/* Redesigned public databases (js/cyb-db.js). Scoped to .cyb-db; themes follow :root[data-theme]. */
.cyb-db {
  --cdb-bg: #fff; --cdb-head: #edf2fa; --cdb-line: #d3dbe7; --cdb-text: #182338; --cdb-muted: #536077;
  --cdb-accent: #2459c4; --cdb-ink: #fff; --cdb-row: #f7f9fc; --cdb-hover: #eef3fc; --cdb-pill: #e0eafa; --cdb-pill-text: #153d78;
  --cdb-report: #17753f; --cdb-report-hover: #0f5c30; --cdb-report-ink: #fff;
  color: var(--cdb-text); background: var(--cdb-bg); display: grid; gap: 12px;
  width: 100%; max-width: 100%; min-width: 0; margin: 20px 0 40px; font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
}
:root[data-theme=dark] .cyb-db {
  --cdb-bg: #19192c; --cdb-head: #272b43; --cdb-line: #42465d; --cdb-text: #f0f2fa; --cdb-muted: #b8c1d5;
  --cdb-accent: #9dbfff; --cdb-ink: #101b30; --cdb-row: #202238; --cdb-hover: #2a2f4d; --cdb-pill: #2c3a5c; --cdb-pill-text: #dbe6ff;
  --cdb-report: #2fa466; --cdb-report-hover: #49c182; --cdb-report-ink: #06180e;
  color-scheme: dark;
}
.cyb-db *, .cyb-db *::before, .cyb-db *::after { box-sizing: border-box; }
.cyb-db [hidden] { display: none !important; }
/* Grid items default to min-width:auto and would let a wide table stretch the page instead of scrolling. */
.cyb-db > *, .cyb-db [data-panel] > * { min-width: 0; max-width: 100%; }
.cyb-db [data-panel] { display: grid; gap: 12px; }
.cyb-db p { margin: 0; color: var(--cdb-muted); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.cyb-db .cyb-db-status { color: var(--cdb-text); font-weight: 650; }
.cyb-db .cyb-db-error { color: #b3261e; }
:root[data-theme=dark] .cyb-db .cyb-db-error { color: #ffb4ab; }
.cyb-db .cyb-db-totals { font-weight: 400; color: var(--cdb-muted); margin-left: .35em; }
.cyb-db .cyb-db-note { font-size: 12.5px; }

/* Controls */
.cyb-db input, .cyb-db select, .cyb-db button {
  font: inherit; line-height: 1.3; letter-spacing: normal; text-transform: none; margin: 0; height: auto; box-shadow: none;
  border: 1px solid var(--cdb-line); border-radius: 6px; padding: 8px 10px; background: var(--cdb-bg); color: var(--cdb-text);
}
.cyb-db input, .cyb-db select { width: 100%; min-width: 0; max-width: 100%; }
.cyb-db select { display: block !important; appearance: auto; }
.cyb-db select + .nice-select { display: none !important; }
.cyb-db button { cursor: pointer; min-height: 36px; }
.cyb-db button:hover { border-color: var(--cdb-accent); }
.cyb-db button:disabled { cursor: default; opacity: .5; }
.cyb-db button[aria-pressed=true] { color: var(--cdb-ink); border-color: var(--cdb-accent); background: var(--cdb-accent); }
.cyb-db :is(input, select, button, a, [tabindex]):focus-visible { outline: 2px solid var(--cdb-accent); outline-offset: 2px; }
.cyb-db label { display: grid; gap: 5px; min-width: 0; margin: 0; font-size: 12px; font-weight: 650; color: var(--cdb-muted); }
.cyb-db .cyb-db-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--cdb-line); flex-wrap: wrap; }
.cyb-db .cyb-db-tabs button { border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; padding: 10px 16px;
  font-size: 15px; font-weight: 700; color: var(--cdb-muted); margin-bottom: -2px; }
.cyb-db .cyb-db-tabs button[aria-selected=true] { color: var(--cdb-accent); border-bottom-color: var(--cdb-accent); }
.cyb-db .cyb-db-views { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.cyb-db .cyb-db-views label { max-width: 360px; }
.cyb-db .cyb-db-hint { flex: 1 1 320px; align-self: center; font-size: 12.5px; }
.cyb-db .cyb-db-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.cyb-db .cyb-db-seg button { font-size: 13px; padding: 6px 12px; min-height: 32px; }
/* A selector visitors must not miss (coolers: CPU platform and noise level; owner 03-10-2026). */
.cyb-db .cyb-db-views.cyb-db-views-prominent { display: grid; gap: 10px; padding: 14px 16px; border: 2px solid var(--cdb-accent);
  border-radius: 10px; background: var(--cdb-head); }
.cyb-db .cyb-db-views-prominent .cyb-db-views-title { margin: 0; font-size: 15px; font-weight: 750; color: var(--cdb-text); }
.cyb-db .cyb-db-views-prominent .cyb-db-axis { font-size: 13px; color: var(--cdb-text); }
.cyb-db .cyb-db-views-prominent .cyb-db-seg button { font-size: 14px; font-weight: 650; padding: 8px 14px; min-height: 38px; }
.cyb-db .cyb-db-views-prominent .cyb-db-axis select { font-size: 14px; font-weight: 600; min-width: 220px; border: 2px solid var(--cdb-accent); }
.cyb-db .cyb-db-views-prominent .cyb-db-hint { font-size: 13px; }
.cyb-db .cyb-db-controls { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--cdb-line); border-radius: 12px; background: var(--cdb-row); }
.cyb-db [data-facets] { display: grid; gap: 10px; }
.cyb-db [data-facets]:empty { display: none; }
.cyb-db .cyb-db-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; }
.cyb-db .cyb-db-search { flex: 1 1 260px; }
.cyb-db .cyb-db-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cyb-db .cyb-db-chips-label { font-size: 12px; font-weight: 650; color: var(--cdb-muted); margin-right: 4px; }
.cyb-db .cyb-db-chips button { border-radius: 999px; font-size: 12px; padding: 5px 11px; min-height: 30px; }
.cyb-db .cyb-db-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; align-items: end; }
.cyb-db .cyb-db-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cdb-text); min-height: 36px; }
.cyb-db .cyb-db-toggle input { width: auto; }
.cyb-db .cyb-db-link { border: 0; background: none; padding: 0; min-height: 0; color: var(--cdb-accent); text-decoration: underline; font-size: 12.5px; }
.cyb-db .cyb-db-pager { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.cyb-db .cyb-db-pager label { grid-auto-flow: column; align-items: center; }
.cyb-db .cyb-db-pager select { width: auto; padding: 6px 8px; }
.cyb-db .cyb-db-pager span { align-self: center; font-size: 13px; color: var(--cdb-muted); }

/* Tables */
.cyb-db .cyb-db-scroll { max-width: 100%; min-width: 0; overflow: auto; max-height: 75vh; border: 1px solid var(--cdb-line); border-radius: 10px;
  /* Sideways overscroll stays inside the table (no browser back gesture). Up and down must reach the page: with
     "contain" on both axes the wheel did nothing over a table that had no vertical scroll of its own, and the
     page could only be scrolled with the pointer beside the table (owner, 2026-10-02). */
  overscroll-behavior-x: contain; overscroll-behavior-y: auto; }
.cyb-db table { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; margin: 0; color: var(--cdb-text);
  background: var(--cdb-bg); font-size: 13px; font-variant-numeric: tabular-nums; }
.cyb-db th, .cyb-db td { border: 0; border-bottom: 1px solid var(--cdb-line); padding: 7px 12px; text-align: right; white-space: nowrap;
  vertical-align: middle; background: var(--cdb-bg); color: var(--cdb-text); font-weight: 400; }
.cyb-db tbody tr:nth-child(even) > * { background: var(--cdb-row); }
.cyb-db tbody tr:hover > * { background: var(--cdb-hover); }
.cyb-db thead th { position: sticky; top: 0; z-index: 2; background: var(--cdb-head); font-size: 12px; font-weight: 700; vertical-align: bottom; }
.cyb-db thead th button { border: 0; background: transparent; padding: 2px 0; min-height: 0; font-weight: 700; color: inherit; text-align: inherit; white-space: nowrap; }
.cyb-db thead th[aria-sort=ascending], .cyb-db thead th[aria-sort=descending] { color: var(--cdb-accent); }
.cyb-db .cyb-db-unit { font-weight: 500; color: var(--cdb-muted); font-size: 11px; }
.cyb-db .cyb-db-group { display: block; font-size: 10.5px; font-weight: 600; color: var(--cdb-muted); letter-spacing: .02em; margin-bottom: 2px; }
.cyb-db .cyb-db-gstart { box-shadow: inset 1px 0 0 var(--cdb-line); }
.cyb-db .cyb-db-name { text-align: left; white-space: normal; min-width: 230px; max-width: 320px; position: sticky; left: 0; z-index: 1;
  overflow-wrap: anywhere; box-shadow: 2px 0 0 var(--cdb-line); }
.cyb-db thead th.cyb-db-name { z-index: 3; }
.cyb-db td.cyb-db-c-text, .cyb-db td.cyb-db-c-pill, .cyb-db td.cyb-db-c-links, .cyb-db th.cyb-db-c-text, .cyb-db th.cyb-db-c-links { text-align: left; }
.cyb-db td.cyb-db-c-rating, .cyb-db th.cyb-db-c-rating, .cyb-db td.cyb-db-c-bool, .cyb-db th.cyb-db-c-bool { text-align: center; }
.cyb-db a { color: var(--cdb-accent); text-decoration: underline; text-underline-offset: 2px; }
.cyb-db .cyb-db-brand { display: block; border: 0; background: none; padding: 0; min-height: 0; margin: 0; color: var(--cdb-muted); font-size: 11px; font-weight: 400; text-align: left; cursor: pointer; }
.cyb-db .cyb-db-brand:hover { color: var(--cdb-accent); text-decoration: underline; }
.cyb-db .cyb-db-brandlink { border: 0; background: none; padding: 0; min-height: 0; color: var(--cdb-accent); font: inherit; font-weight: 600; text-align: left; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.cyb-db .cyb-db-model-line { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.cyb-db .cyb-db-model-line a, .cyb-db .cyb-db-model-line > span { flex: 1 1 auto; min-width: 0; }
.cyb-db .cyb-db-compare { flex: 0 0 auto; padding: 1px 7px; min-height: 22px; font-size: 11px; line-height: 1.2; font-weight: 600; }
.cyb-db .cyb-db-nm { color: var(--cdb-muted); font-size: 12px; }
/* Document links are small buttons with real space between them, never bare underlined text side by side. */
.cyb-db .cyb-db-docs { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 10px; }
.cyb-db .cyb-db-doc, .cyb-db .cyb-db-report { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 11px; border: 1px solid var(--cdb-line); border-radius: 6px;
  background: var(--cdb-pill); color: var(--cdb-pill-text); font-size: 12px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.cyb-db .cyb-db-doc:hover, .cyb-db .cyb-db-doc:focus-visible, .cyb-db .cyb-db-report:hover, .cyb-db .cyb-db-report:focus-visible {
  border-color: var(--cdb-accent); background: var(--cdb-accent); color: var(--cdb-ink); text-decoration: none; }
/* The report link is green in every database, so it is found at a glance (owner, 2026-10-02). */
.cyb-db .cyb-db-doc-evaluation, .cyb-db .cyb-db-report { border-color: var(--cdb-report); background: var(--cdb-report); color: var(--cdb-report-ink); }
.cyb-db .cyb-db-doc-evaluation:hover, .cyb-db .cyb-db-doc-evaluation:focus-visible, .cyb-db .cyb-db-report:hover, .cyb-db .cyb-db-report:focus-visible {
  border-color: var(--cdb-report-hover); background: var(--cdb-report-hover); color: var(--cdb-report-ink); }
.cyb-db .cyb-db-report-preview { border-style: dashed; }
@media (prefers-reduced-motion: reduce) { .cyb-db .cyb-db-doc, .cyb-db .cyb-db-report { transition: none; } }
.cyb-db .cyb-db-empty { text-align: left; white-space: normal; }
.cyb-db .cyb-db-sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Pills (ratings keep the metal colours of the performance tables) */
.cyb-db .cyb-db-pill { display: inline-block; border-radius: 999px; padding: 3px 9px; font-size: 11px; font-weight: 750; background: var(--cdb-pill); color: var(--cdb-pill-text); white-space: nowrap; }
.cyb-db .cyb-db-diamond { background: #d9cdf9; color: #42257b; }
.cyb-db .cyb-db-titanium { background: #d7deee; color: #253a63; }
.cyb-db .cyb-db-platinum { background: #cfe9e7; color: #154c48; }
.cyb-db .cyb-db-gold { background: #f7e6a9; color: #604500; }
.cyb-db .cyb-db-silver { background: #e2e7ee; color: #364657; }
.cyb-db .cyb-db-bronze { background: #f3d6bf; color: #69360e; }
.cyb-db .cyb-db-yes { background: #d8efdc; color: #21552d; }

/* Manufacturer summary */
.cyb-db .cyb-db-summary th, .cyb-db .cyb-db-summary td { text-align: center; }
.cyb-db .cyb-db-summary .cyb-db-name { text-align: left; min-width: 170px; font-weight: 600; }
.cyb-db .cyb-db-summary thead th { position: sticky; top: 0; }
.cyb-db .cyb-db-summary thead tr + tr th { top: 30px; }
.cyb-db .cyb-db-summary .cyb-db-grouphead { border-bottom: 1px solid var(--cdb-line); }
.cyb-db .cyb-db-summary tfoot > * > * { font-weight: 700; background: var(--cdb-head); position: sticky; bottom: 0; }
.cyb-db .cyb-db-count { border: 0; background: none; padding: 2px 6px; min-height: 0; color: var(--cdb-accent); text-decoration: underline; font-weight: 650; }
.cyb-db .cyb-db-zero { color: var(--cdb-muted); opacity: .55; }
.cyb-db .cyb-db-total { font-weight: 700; }

@media (max-width: 700px) {
  .cyb-db { font-size: 13.5px; }
  .cyb-db .cyb-db-controls { padding: 10px; }
  .cyb-db .cyb-db-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cyb-db .cyb-db-name { min-width: 150px; max-width: 170px; }
  .cyb-db .cyb-db-summary .cyb-db-name { min-width: 120px; }
  .cyb-db th, .cyb-db td { padding: 7px 8px; }
  .cyb-db .cyb-db-scroll { max-height: 70vh; }
  .cyb-db .cyb-db-hide700 { display: none; }
  .cyb-db .cyb-db-model-line { flex-wrap: wrap; row-gap: 3px; }
  .cyb-db .cyb-db-tabs button { padding: 9px 12px; font-size: 14px; }
}
@media (max-width: 900px) { .cyb-db .cyb-db-hide900 { display: none; } }

/* Compare tab: one column per product */
.cyb-db .cyb-db-cmp-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.cyb-db .cyb-db-cmp th.cyb-db-cmp-item { text-align: left; white-space: normal; vertical-align: top; min-width: 170px; max-width: 240px; }
.cyb-db .cyb-db-cmp-brand { display: block; color: var(--cdb-muted); font-size: 11px; font-weight: 400; }
.cyb-db .cyb-db-cmp-model { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; overflow-wrap: anywhere; }
.cyb-db .cyb-db-cmp .cyb-db-cmp-label { font-weight: 600; min-width: 200px; max-width: 260px; }
.cyb-db .cyb-db-cmp td { text-align: center; }
.cyb-db .cyb-db-cmp .cyb-db-cmp-group th { text-align: left; font-size: 11.5px; font-weight: 700; color: var(--cdb-accent); background: var(--cdb-head); position: static; }
.cyb-db .cyb-db-cmp td.cyb-db-best { font-weight: 800; color: #0b6b34; background: #e3f5ea; }
:root[data-theme=dark] .cyb-db .cyb-db-cmp td.cyb-db-best { color: #8ff0b8; background: #1f3a2d; }
@media (max-width: 700px) {
  .cyb-db .cyb-db-cmp .cyb-db-cmp-label { min-width: 120px; max-width: 140px; }
  .cyb-db .cyb-db-cmp th.cyb-db-cmp-item { min-width: 140px; }
}
/* Visual review 2026-09-29: readable placeholders in both themes; on phones the Compare button always sits under the name. */
.cyb-db input::placeholder { color: var(--cdb-muted); font-weight: 400; opacity: 1; }
@media (max-width: 700px) {
  .cyb-db .cyb-db-model-line { flex-direction: column; align-items: flex-start; }
  .cyb-db .cyb-db-model-line a, .cyb-db .cyb-db-model-line > span { flex: 0 0 auto; }
}

/* Configured voltage/category axes; other category controls keep their existing layout. */
.cyb-db .cyb-db-axes { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.cyb-db .cyb-db-axis { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; }
.cyb-db .cyb-db-axis .cyb-db-seg { margin: 0; }
.cyb-db .cyb-db-axis select { min-width: 180px; }
.cyb-db .cyb-db-summary-program { display: block; font-size: 11px; }
@media (max-width: 700px) {
  .cyb-db .cyb-db-axes { flex-direction: column; align-items: stretch; }
  .cyb-db .cyb-db-axis select { width: 100%; min-width: 0; }
}
/* "Report" link of the kinds whose model name is not itself the link (coolers, capacitors). */
.cyb-db .cyb-db-model-line a.cyb-db-report { flex: 0 0 auto; margin-left: 10px; min-height: 24px; padding: 2px 10px; font-size: 11.5px; }