/* AIpedia visual layer. Target: docs/visual-spec.md (approved reference 1672x941). */

:root {
  color-scheme: dark;
  --bg: #080f14;
  --bg-top: #0b151c;
  --surface: #0f1a21;
  --surface-2: #111f28;
  --panel: #0a1319;
  --panel-2: #0f1a21;
  --text: #e6f7ff;
  --text-soft: #aeb9c0;
  --muted: #9aa8b2;
  --line: rgba(139, 169, 181, 0.15);
  --line-soft: rgba(139, 169, 181, 0.09);
  --line-strong: rgba(150, 182, 196, 0.26);
  --mint: #00e0c6;
  --mint-text: #4debd7;
  --mint-line: rgba(126, 243, 222, 0.55);
  --mint-dim: rgba(94, 234, 212, 0.07);
  --mint-glow: rgba(94, 234, 212, 0.18);
  --on-mint: #052019;
  --link: #22d9ff;
  --danger: #f0a8a8;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.42);
  --r-card: 12px;
  --r-panel: 14px;
  --r-ctl: 10px;
  --r-chip: 999px;
  --pad-x: 16px;
  --pad-r: 15px;
  --col-gap: 18px;
  /* Detail panel grows with the screen: ~485px on a 1280 laptop, ~510px at 1440,
     ~550px at the 1672px reference, up to 720px on large and ultrawide monitors. */
  --panel-w: clamp(440px, calc(16vw + 280px), 720px);
  /* The catalog shell stops growing on ultrawide screens so rows stay
     readable, but still takes most of the screen instead of a narrow column. */
  --shell-max: max(2400px, 60vw);
  --touch: 44px;
  --head-inset: 10px;
  --footer-h: 36px;
  /* Height of the header, measured in JS, so the mobile panel starts below it. */
  --aip-header-h: 0px;
  /* Stacking layers, low and explicit: catalog < backdrop < panel < header < popover. */
  --z-panel-backdrop: 20;
  --z-panel: 30;
  --z-header: 40;
  --z-popover: 50;
  --z-sheet: 60;
  font-family: "Segoe UI", Inter, system-ui, -apple-system, "Noto Sans", "Noto Sans Arabic",
    "Noto Sans CJK SC", "Noto Sans CJK TC", "Noto Sans JP", "Noto Sans KR", "Noto Sans Devanagari",
    "Noto Sans Thai", "Noto Sans Bengali", "Nirmala UI", "Leelawadee UI", "Yu Gothic", "Malgun Gothic",
    "Microsoft YaHei", "Segoe UI Emoji", sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f8fa;
  --bg-top: #f5f8fa;
  --surface: #ffffff;
  --surface-2: #f3f6f8;
  --panel: #ffffff;
  --panel-2: #f6f9fa;
  --text: #0e1b22;
  --text-soft: #41505c;
  --muted: #5c6b78;
  --line: #d7dfe6;
  --line-soft: #e4eaef;
  --line-strong: #c3ced7;
  --mint: #00c2ac;
  --mint-text: #087c70;
  --mint-line: rgba(11, 127, 112, 0.6);
  --mint-dim: rgba(15, 157, 138, 0.1);
  --mint-glow: rgba(15, 157, 138, 0.14);
  --on-mint: #04231d;
  --link: #0b6e99;
  --danger: #b33c3c;
  --shadow: 0 14px 38px rgba(28, 36, 44, 0.12);
}

* { box-sizing: border-box; }
html, body { margin: 0; max-width: 100%; }

body {
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(520px 420px at 56% -4%, rgba(150, 214, 232, 0.16), transparent 68%),
    radial-gradient(280px 240px at 34% 0%, rgba(94, 234, 212, 0.06), transparent 70%),
    radial-gradient(900px 380px at 70% 8%, rgba(34, 217, 255, 0.045), transparent 72%),
    var(--bg);
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .5;
  background-image:
    repeating-linear-gradient(117deg, rgba(255, 255, 255, .012) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(24deg, rgba(94, 234, 212, .008) 0 1px, transparent 1px 12px);
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}
:root[data-theme="light"] body {
  background:
    radial-gradient(1200px 320px at 50% -6%, rgba(15, 157, 138, .07), transparent 70%),
    var(--bg);
}
:root[data-theme="light"] body::before { opacity: .12; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 22px; font-weight: 550; line-height: 1.25; overflow-wrap: anywhere; }
h2 { font-size: 13px; font-weight: 500; letter-spacing: .005em; }
svg.lucide { width: 16px; height: 16px; vertical-align: middle; }

button, input, select, textarea {
  font: inherit; color: inherit; min-width: 0; max-width: 100%;
  border: 1px solid var(--line-strong); border-radius: var(--r-ctl);
  background: var(--surface-2); padding: 6px 10px;
}
button, select { cursor: pointer; }
input, select, button { min-height: 34px; }
textarea { width: 100%; resize: vertical; }
:focus-visible { outline: 2px solid var(--mint-text); outline-offset: 2px; }

.wrap { max-width: 1400px; margin: auto; padding: 0 24px; }
.sr-only, .skip, .sr-submit {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
}
.skip:focus {
  clip-path: none; width: auto; height: auto; top: 8px; left: 8px; z-index: 50;
  background: var(--surface-2); padding: 8px;
}

/* ---------------------------------------------------------------- shell */

.catalog-page {
  display: flex; flex-direction: column;
  min-height: 100vh;
}
.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--col-gap);
  padding: 0 var(--pad-r) 0 var(--pad-x);
  min-width: 0;
}
.catalog-page > .workspace,
.catalog-page > .site-footer {
  width: 100%; max-width: var(--shell-max); margin-inline: auto;
}
.catalog-column { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
/* The catalog area is a size container: columns, row layout and the
   compact Filter/Sort toolbar follow the space the catalog really has
   (viewport minus an open detail panel), not the device name. */
.catalog-column > main {
  display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0;
  container: catalog / inline-size;
}

/* App shell: header and toolbar stay put, the table scrolls inside its card.
   Used when there is room for it; short landscape phones scroll the page. */
@media (min-width: 721px) and (min-height: 540px), (min-width: 1280px) {
  html, body.catalog-page { height: 100%; }
  body.catalog-page { overflow: hidden; }
  .workspace { flex: 1; min-height: 0; }
}
/* Desktop: catalog and detail panel side by side. */
@media (min-width: 1280px) {
  .catalog-page.is-panel-open .workspace {
    grid-template-columns: minmax(0, 1fr) var(--panel-w);
  }
}

/* --------------------------------------------------------------- header */

.site-header {
  display: grid;
  grid-template-columns: 206px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0;
  padding: 14px var(--head-inset) 0;
  position: relative;
  z-index: var(--z-header);
}
.brand {
  display: flex; align-items: center; gap: 12px; height: 44px; width: fit-content;
  color: var(--text); font-size: 22px; font-weight: 400; letter-spacing: -.01em;
  text-shadow: 0 0 18px rgba(255, 255, 255, .12);
}
.brand:hover { text-decoration: none; }
.brand img { width: 40px; height: 40px; flex: 0 0 40px; }
.brand-word { display: inline-flex; align-items: baseline; }
.brand-ai { color: #00e0c6; font-weight: 600; }
:root[data-theme="light"] .brand-ai { color: #00a996; }

.search { display: flex; align-items: center; position: relative; width: 100%; max-width: 541px; z-index: 1; }
.search > svg { position: absolute; inset-inline-start: 14px; color: var(--mint-text); opacity: .8; pointer-events: none; }
.search input {
  width: 100%; height: 44px; padding: 0 42px 0 42px;
  font-size: 13.5px;
  border-radius: var(--r-ctl);
  border-color: var(--line-strong);
  background: rgba(9, 16, 21, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02);
}
.search input::placeholder { color: #7f8d97; }
:root[data-theme="light"] .search input { background: #fff; }
.search-kbd {
  position: absolute; inset-inline-end: 11px; min-width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: 5px;
  color: var(--muted); font-size: 11px;
}

.header-end {
  display: flex; align-items: center; justify-content: flex-end; gap: 9px;
  justify-self: end; min-width: 0; position: relative; z-index: 1;
}
.orbit {
  position: absolute; top: -8px; right: 118px; width: 260px; height: 180px;
  pointer-events: none; z-index: 0;
}
.orbit::before {
  content: ""; position: absolute; right: 8px; top: 8px; width: 170px; height: 170px;
  background: radial-gradient(circle, rgba(210, 236, 248, .22) 0%, rgba(94, 234, 212, .05) 42%, transparent 70%);
  filter: blur(2px);
}
.orbit img { position: absolute; left: 0; top: 0; width: 260px; height: 180px; display: block; }
:root[data-theme="light"] .orbit { opacity: .28; filter: invert(1) hue-rotate(180deg); }

.header-controls { display: flex; align-items: center; gap: 9px; }

.env-nav {
  display: inline-flex; align-items: center; gap: 2px; height: 22px;
  padding: 0 2px; border: 0; border-radius: 6px;
  background: transparent;
}
.env-local, .env-production {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
  border-radius: 6px; font-size: 11px; line-height: 1; white-space: nowrap; color: var(--muted);
}
.env-local { color: var(--mint-text); font-weight: 500; background: var(--mint-dim); }
.env-production:hover { color: var(--text); text-decoration: none; background: rgba(255, 255, 255, .04); }

.languages { position: relative; display: flex; align-items: stretch; }
.lang-menu { position: relative; }
.lang-menu > summary {
  display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--r-ctl);
  background: rgba(255, 255, 255, .012); color: var(--text-soft);
  font-size: 12.5px; cursor: pointer; list-style: none; white-space: nowrap;
}
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu > summary::marker { content: ""; }
.lang-menu > summary:hover { color: var(--text); }
.lang-menu[open] > summary { color: var(--text); border-color: var(--line-strong); }
.lang-toggle .lang-current { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.lang-toggle svg { width: 16px; height: 16px; }
.lang-caret { width: 14px; height: 14px; opacity: .7; transition: transform .15s ease; }
.lang-menu[open] .lang-caret { transform: rotate(180deg); }
.lang-popover {
  position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: var(--z-popover);
  min-width: 210px; max-height: min(60vh, 460px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-ctl); box-shadow: var(--shadow); padding: 6px;
}
.lang-popover ul { list-style: none; margin: 0; padding: 0; }
.lang-popover a {
  display: block; padding: 7px 12px; border-radius: 8px; color: var(--text-soft);
  white-space: nowrap; text-align: start;
}
.lang-popover a:hover { text-decoration: none; color: var(--text); background: var(--mint-dim); }
.lang-popover a[aria-current] { color: var(--text); font-weight: 600; background: rgba(255, 255, 255, .05); }
:root[data-theme="light"] .lang-popover a[aria-current] { background: rgba(0, 0, 0, .05); }

.icon-button {
  width: 45px; height: 44px; padding: 0; display: inline-flex;
  align-items: center; justify-content: center; color: var(--text);
  background: rgba(255, 255, 255, .012);
  border: 1px solid var(--line); border-radius: var(--r-ctl);
}
.icon-button:hover { text-decoration: none; background: rgba(255, 255, 255, .045); }

/* -------------------------------------------------------------- toolbar */

.catalog-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px 14px;
  flex-wrap: wrap;
  margin: 29px var(--head-inset) 20px;
  min-height: 34px;
}
.toolbar-end {
  display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px 14px;
  min-width: 0; margin-inline-start: auto;
}
.type-tabs { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.type-tab {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; min-width: 84px; padding: 0 22px;
  border-radius: var(--r-ctl); border: 1px solid var(--line);
  background: rgba(255, 255, 255, .02);
  color: var(--text); font-size: 13px; font-weight: 400;
}
.type-tab:hover { text-decoration: none; color: var(--text); background: rgba(255, 255, 255, .05); }
.type-tab > span { margin-inline-start: 5px; }
.type-tab.is-active, .type-tab[aria-current] {
  background: var(--mint); color: var(--on-mint); border-color: var(--mint); font-weight: 600;
  box-shadow: none;
}
/* News uses the same tab states; its small dot remains the only extra accent. */
.news-tab { gap: 7px; }
.news-tab-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px var(--mint-glow); animation: news-pulse 2.6s ease-in-out infinite; }
.news-tab.is-active .news-tab-dot, .news-tab[aria-current] .news-tab-dot { background: var(--on-mint); box-shadow: none; animation: none; }
@keyframes news-pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--mint-glow); opacity: .85; } 50% { box-shadow: 0 0 0 5px rgba(94, 234, 212, 0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .news-tab-dot { animation: none; } }
@media (max-width: 480px) {
  /* Three section tabs remain readable at phone widths. */
  .tb-row2 .tb-seg .type-tab > span:not(.news-tab-dot) { display: none; }
  .tb-row2 .tb-seg .type-tab { padding-inline: 8px; }
}
.catalog-counts { color: var(--muted); font-size: 13px; min-width: 0; text-align: end; }
.catalog-counts > #result-count { white-space: nowrap; }
.catalog-freshness-shell { position: relative; display: inline-flex; }
.catalog-freshness {
  display: grid; grid-template-columns: auto auto; gap: 1px 8px; align-items: baseline;
  min-height: 35px; padding: 2px 6px;
  border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--text-soft);
  font-size: 11px; line-height: 1.15; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.catalog-freshness:hover, .catalog-freshness:focus-visible, .catalog-freshness-shell.is-open .catalog-freshness {
  border-color: var(--mint-line); background: var(--mint-dim); color: var(--text);
}
.freshness-date { color: var(--muted); font-size: 10.5px; }
.freshness-time { color: var(--text); font-size: 14px; font-weight: 520; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.freshness-time { position: relative; contain: layout; }
.freshness-time > [data-local-time-size] { visibility: hidden; }
.freshness-time > [data-local-time] { position: absolute; inset: 0; }
.freshness-age { grid-column: 1 / -1; color: var(--muted); font-size: 9.5px; }
.catalog-freshness.is-amber .freshness-age { color: #d6a95b; }
.catalog-freshness-popover {
  position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: var(--z-popover);
  width: min(350px, calc(100vw - 32px)); padding: 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r-panel);
  background: color-mix(in srgb, var(--panel) 94%, transparent); color: var(--text);
  box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.catalog-freshness-shell.is-open .catalog-freshness-popover {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.popover-title { font-size: 13px; font-weight: 650; }
.popover-time { margin-top: 3px; color: var(--muted); font-size: 12px; }
.freshness-list {
  list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px;
  max-height: min(320px, calc(100vh - 190px)); overflow-x: hidden; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(146, 164, 178, .16) transparent;
}
.freshness-list::-webkit-scrollbar { width: 4px; }
.freshness-list::-webkit-scrollbar-track { background: transparent; }
.freshness-list::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(146, 164, 178, .14); }
.catalog-freshness-popover:hover .freshness-list::-webkit-scrollbar-thumb { background: rgba(146, 164, 178, .28); }
.freshness-entry { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; column-gap: 8px; align-items: start; font-size: 12px; }
.freshness-section { margin-top: 7px; color: var(--muted); font-size: 11px; font-weight: 650; }
.freshness-section:first-child { margin-top: 0; }
.freshness-action { color: var(--mint-text); font-size: 10px; font-weight: 700; letter-spacing: 0; }
.freshness-action-updated { color: var(--text-soft); }
.freshness-recent { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.freshness-recent .freshness-list { max-height: min(150px, calc(100vh - 330px)); }
.freshness-update-list { max-height: min(260px, calc(100vh - 330px)); }
.freshness-empty { color: var(--muted); font-size: 12px; }
.freshness-name { min-width: 0; line-height: 1.25; white-space: normal; overflow-wrap: normal; word-break: normal; }
.freshness-release-date { justify-self: end; color: var(--muted); font-size: 11px; line-height: 1.25; text-align: end; white-space: nowrap; }
.catalog-update-badge {
  display: inline-flex; margin-inline-start: 4px; padding: 1px 3px; border-radius: 4px;
  border: 1px solid rgba(126, 243, 222, .22); color: var(--mint-text);
  font-size: 7px; line-height: 1; font-weight: 700; opacity: .64; transform: translateY(-.18em);
}
.catalog-page.is-catalog-freshness-open tr.catalog-update-row {
  background: linear-gradient(90deg, rgba(94, 234, 212, .08), transparent 42%);
}

/* Compact Filter / Sort entry points. Hidden while the full desktop table
   shows every column with its own header filters; shown on touch screens and
   whenever the catalog is narrow enough for columns to fold away. */
.catalog-actions { display: none; align-items: center; gap: 8px; }
.toolbar-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 13px; border-radius: var(--r-ctl);
  border: 1px solid var(--line); background: rgba(255, 255, 255, .02);
  color: var(--text); font-size: 13px; white-space: nowrap;
}
.toolbar-button:hover { background: rgba(255, 255, 255, .05); }
.toolbar-button svg.lucide { width: 15px; height: 15px; color: var(--mint-text); }
.toolbar-badge {
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mint); color: var(--on-mint); font-size: 11px; font-weight: 650;
}
@container catalog (max-width: 1299px) {
  .catalog-actions { display: flex; }
}
@media (hover: none) {
  .catalog-actions { display: flex; }
}

/* ------------------------------------------------------ filter/sort sheet */

.sheet {
  padding: 0; border: 1px solid var(--line-strong); border-radius: var(--r-panel);
  background: var(--panel); color: var(--text); box-shadow: var(--shadow);
  width: min(460px, calc(100% - 32px)); max-width: none;
  max-height: min(78dvh, 720px);
  overflow: hidden;
}
.sheet[open] { display: flex; flex-direction: column; }
.sheet::backdrop { background: rgba(3, 8, 11, .62); }
:root[data-theme="light"] .sheet::backdrop { background: rgba(14, 27, 34, .35); }
.sheet-inner { display: flex; flex-direction: column; min-height: 0; max-height: inherit; }
.sheet-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 10px 10px 18px; padding-inline: 18px 10px;
  border-bottom: 1px solid var(--line-soft);
}
.sheet-head .sheet-title { font-size: 16px; font-weight: 550; }
.sheet-close { border: 0; width: var(--touch); height: var(--touch); }
.sheet-body {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 14px 18px 18px; margin: 0; display: grid; gap: 14px; align-content: start;
}
.sheet-group { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; }
.sheet-group > legend {
  padding: 0; margin-bottom: 8px; font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
}
.sheet-group label { display: grid; gap: 6px; font-size: 13px; color: var(--text-soft); min-width: 0; }
.sheet-group label.evaluated-only { display: flex; align-items: center; gap: 10px; min-height: var(--touch); }
.sheet-group select, .sheet-group input:not([type=checkbox]) { width: 100%; min-height: var(--touch); }
.sheet-group input[type=checkbox] { width: 20px; height: 20px; min-height: 0; }
.sheet-group button[type=submit] { display: none; }
.sheet-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-soft); background: var(--panel-2);
}
.sheet .sheet-foot > * { height: var(--touch); min-height: var(--touch); padding: 0 18px; }
.sort-options { list-style: none; gap: 2px; padding: 8px 10px 14px; }
.sort-options a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: var(--touch); padding: 0 12px; border-radius: var(--r-ctl);
  color: var(--text-soft); font-size: 14px;
}
.sort-options a:hover { text-decoration: none; background: var(--mint-dim); color: var(--text); }
.sort-options a svg.lucide { visibility: hidden; color: var(--mint-text); flex: 0 0 auto; }
.sort-options a[aria-current] { color: var(--text); font-weight: 550; background: var(--mint-dim); }
.sort-options a[aria-current] svg.lucide { visibility: visible; }
html.modal-open { overflow: hidden; } /* set by site.js while a sheet/account dialog is open */

.filter-chips {
  display: flex; flex-wrap: wrap; gap: 6px; list-style: none;
  margin: 0 var(--head-inset) 10px; padding: 0;
}
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px;
  border-radius: var(--r-chip); border: 1px solid var(--line);
  color: var(--text); font-size: 12px; background: var(--mint-dim);
}
.chip:hover { text-decoration: none; }
.chip-reset { background: transparent; color: var(--muted); }
.comparison-basis {
  margin: 0 var(--head-inset) 10px; color: var(--muted); font-size: 12px;
}
.comparison-basis:empty { display: none; }

/* ------------------------------------------------------------ table card */

.catalog-card {
  display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .015);
  overflow: hidden;
}
/* position: relative keeps visually hidden, absolutely positioned helpers in
   the rows (price conditions) inside the scroller; otherwise they extend the
   document and keyboard focus could scroll the whole app shell away. */
.table-scroll { flex: 1; min-height: 0; overflow: auto; max-width: 100%; position: relative; }
.model-table thead th:first-child, .model-table tbody td:first-child, .model-table tbody th:first-child { padding-inline-start: 14px; }
.model-table thead th:last-child, .model-table tbody td:last-child { padding-inline-end: 12px; }

table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13.25px; text-align: start; }
th, td {
  vertical-align: middle; padding: 8px 12px;
  border-bottom: 1px solid var(--line-soft);
  line-height: 1.32; overflow-wrap: normal; word-break: normal;
}
thead th {
  vertical-align: middle;
  font-size: 11.5px; font-weight: 450; color: var(--muted);
  background: var(--surface-2);
  height: 54px; padding: 6px 10px;
  position: sticky; top: 0; z-index: 4;
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}
thead th.checks-col, thead th.rating-col { white-space: normal; line-height: 1.2; }
tbody th { font-weight: 400; text-align: start; }
/* The reference rhythm is a uniform 55px row; long values clamp instead of
   pushing the row taller, otherwise the page no longer fits 12 rows. */
.model-table tbody tr > * { height: 55px; max-height: 55px; overflow: hidden; }
.model-table tbody tr[data-slug] { cursor: pointer; }
tbody tr:last-child > * { border-bottom: 0; }
tbody tr:hover > * { background: rgba(126, 198, 214, 0.035); }

.column-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; position: relative; }
.column-actions > a[data-sort] {
  display: inline-flex; align-items: center; color: inherit; min-width: 0; flex: 1;
  padding-inline-end: 12px; position: relative;
}
.column-actions > a[data-sort]:hover { text-decoration: none; color: var(--text); }
.sort-icon {
  position: absolute; inset-inline-end: 0; top: 50%; transform: translateY(-50%);
  display: inline-flex; opacity: .32;
}
.sort-icon svg.lucide { width: 10px; height: 10px; }
.model-table th[aria-sort="ascending"] a[data-sort],
.model-table th[aria-sort="descending"] a[data-sort] { color: var(--mint-text); }
.model-table th[aria-sort="ascending"] .sort-icon,
.model-table th[aria-sort="descending"] .sort-icon { opacity: 1; }

/* Filter affordances stay in the DOM and keyboard order; the reference header
   shows sorting only, so they surface on hover and focus. */
.column-actions > .header-control,
.column-actions > .col-filter {
  position: absolute; inset-inline-end: -6px; top: 50%; transform: translateY(-50%);
}
.header-control, .col-filter summary {
  appearance: none; list-style: none; border: 0; color: var(--muted);
  width: 20px; height: 20px; min-width: 20px; padding: 0; display: inline-flex;
  align-items: center; justify-content: center; cursor: pointer; border-radius: 5px;
  background: var(--surface-2);
  opacity: 0; pointer-events: none; transition: opacity .12s ease;
}
thead th:hover .header-control,
thead th:hover .col-filter summary,
thead th:focus-within .header-control,
thead th:focus-within .col-filter summary,
.header-control:focus-visible,
.col-filter summary:focus-visible,
.col-filter[open] summary { opacity: 1; pointer-events: auto; }
.header-control:hover, .col-filter summary:hover { color: var(--text); background: rgba(255, 255, 255, .08); }
.header-control svg, .col-filter summary svg { width: 13px; height: 13px; }
.col-filter summary::-webkit-details-marker { display: none; }
.col-filter { position: relative; display: inline-flex; }
.filter-popover {
  position: absolute; z-index: 40; top: calc(100% + 4px); inset-inline-end: 0; min-width: 240px;
  padding: 10px; border: 1px solid var(--line-strong); border-radius: var(--r-ctl);
  background: var(--panel-2); box-shadow: var(--shadow); display: grid; gap: 8px;
}
.filter-popover label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }

a.model-name, a.model-name:visited { display: flex; align-items: center; gap: 11px; color: var(--text); font-weight: 400; }
a.model-name:hover { text-decoration: none; }
a.model-name:hover .model-title { color: var(--mint-text); }
.model-table tbody tr.is-selected a.model-name,
.model-table tbody tr.is-selected .model-title { color: var(--text); }
.model-mark {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #16212a; color: var(--mint-text); font-size: 11px; font-weight: 600;
  border: 1px solid rgba(139, 169, 181, .12);
}
:root[data-theme="light"] .model-mark { background: #eaf1f4; border-color: #dbe4ea; }
.model-mark.has-logo,
:root[data-theme="light"] .model-mark.has-logo {
  background: transparent; border-color: transparent; color: var(--text);
}
.model-mark.has-logo svg,
.model-mark.has-logo img {
  width: 24px; height: 24px; display: block; object-fit: contain;
}
.panel-mark.has-logo svg,
.panel-mark.has-logo img { width: 40px; height: 40px; object-fit: contain; }
/* Preserve the official black Liquid glyph against both catalog themes. */
.model-mark.has-logo img[src*="marks/liquid"] { background: #fff; border-radius: 4px; padding: 2px; }
/* Price scope is part of the value: never truncate confirmed billing conditions. */
.price-col .cell-lines { display: block; -webkit-line-clamp: unset; overflow: visible; }
.model-copy { min-width: 0; display: block; }
.cell-lines {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; min-width: 0;
}
.model-title { display: block; font-size: 14px; font-weight: 500; line-height: 1.22; color: var(--text); }
.secondary { display: block; font-size: 11.5px; color: var(--muted); }
.task { display: block; font-size: 12.75px; color: var(--text-soft); }
.model-table .task { display: inline; }
.model-table .task:not(:last-child)::after { content: ", "; color: var(--muted); }
.model-table td, .model-table tbody th { color: var(--text-soft); }
.model-table .model-col { color: var(--text); }

.price-line { font-size: 13px; white-space: normal; line-height: 1.25; color: var(--text-soft); }
.price-line strong { font-weight: 550; color: var(--text); }
.price-condition {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11px; color: var(--muted); margin-top: 2px;
}
.model-table .price-condition {
  position: static; width: auto; height: auto; padding: 0; margin: 2px 0 0;
  overflow: visible; clip-path: none; white-space: normal;
}
.model-table .price-condition.scoped-price-condition {
  position: static; width: auto; height: auto; padding: 0; margin: 2px 0 0;
  overflow: visible; clip-path: none; white-space: normal;
}
.price-line + .price-line { margin-top: 3px; }
.free-tier-note { display: block; font-size: 12px; font-weight: 550; color: var(--text); }
/* DQ-M8: free-tier collection rows grow to show the note, the label and both paid prices. */
.model-table.free-tier-table tbody tr > * { height: auto; max-height: none; }
.model-table.free-tier-table tbody tr[data-slug] > .price-col .cell-lines { display: block; -webkit-line-clamp: unset; }
.paid-beyond-note { display: block; font-size: 11px; color: var(--muted); margin: 2px 0 1px; }
.missing, .empty-cell { color: var(--muted); font-size: 12px; }
.access-links { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--text-soft); }
.model-table .access-links { display: block; }
.model-table .access-links span { display: inline; }
.model-table .access-links span:not(:last-child)::after { content: ", "; color: var(--muted); }
.model-table .access-col, .model-table .type-col { word-break: keep-all; overflow-wrap: normal; }
.developer-with-country { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px 5px; min-width: 0; max-width: 100%; }
.developer-with-country > span { min-width: 0; overflow-wrap: anywhere; }
.developer-flags { display: inline-flex; flex-wrap: wrap; gap: 3px; max-width: 100%; }
.country-badge { display: inline-flex; position: relative; flex: 0 0 auto; align-items: center; line-height: 1; }
.country-badge:focus-visible { outline: 2px solid var(--mint-text); outline-offset: 2px; }
.country-badge:focus-visible::after { content: attr(data-country-label); position: absolute; z-index: 20; inset-block-start: 100%; inset-inline-start: 0; padding: 5px 7px; min-width: max-content; max-width: 180px; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 4px; font-size: 12px; }
.origin-unknown { color: var(--muted); font-size: 11px; line-height: 1.4; }
.developer-with-country > .origin-tentative { flex-basis: 100%; color: var(--muted); font-size: 11px; line-height: 1.4; }
.developer-with-country > .origin-unknown { flex-basis: 100%; }
.origin-evidence-list { padding-inline-start: 0; list-style: none; display: grid; gap: 10px; }
.origin-evidence-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 7px; overflow-wrap: anywhere; }
.origin-evidence-list li p { flex-basis: 100%; margin: 0; }
.country-flag {
  width: 16px; height: 11px; flex: 0 0 16px; display: inline-block;
  border-radius: 1px; box-shadow: 0 0 0 1px rgba(139, 169, 181, .18);
}
.country-origin-list { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.country-origin-list > span { display: inline-flex; align-items: center; gap: 7px; }
.quiet-chip {
  display: inline-flex; align-items: center; min-height: 21px; max-width: 100%;
  padding: 2px 7px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--text-soft); background: rgba(255,255,255,.018); font-size: 11.25px;
  line-height: 1.15; text-decoration: none;
}
.chip-list { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.tool-table .platform-col .quiet-chip { white-space: nowrap; }
.tool-table .ecosystem-col a { color: var(--mint-text); }
.tool-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.detail-access { line-height: 1.35; }
.detail-access .secondary { font-size: 10.5px; }

.rating { font-size: 12.5px; margin-bottom: 6px; }
.rating a { color: var(--text-soft); }

/* Compact benchmark badge used in the catalog row, one line like the reference. */
.check-badge {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  height: 24px; padding: 0 8px;
  border: 1px solid var(--line-strong); border-radius: 7px;
  background: rgba(255, 255, 255, .022);
  font-size: 11.5px; line-height: 1; color: var(--muted);
}
.check-badge:hover { text-decoration: none; border-color: var(--mint-line); }
.check-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.check-badge strong { flex: 0 0 auto; color: var(--mint-text); font-weight: 600; }
.release-date { font-size: 13px; color: var(--text-soft); }
.model-table .release-date { white-space: nowrap; }
.model-table .release-date.missing { color: var(--muted); }
/* Release #025: a long "≈ date" (ja/ar at 1280 px) wraps inside the fixed-width
   release column instead of being clipped at the card edge. */
.model-table .release-date.approx { color: var(--text-soft); white-space: normal; }

.model-table tbody tr.is-selected > * {
  background: rgba(94, 234, 212, .04);
  border-top: 1px solid #7ef3de;
  border-bottom: 1px solid #7ef3de;
  box-shadow: none;
}
.model-table tbody tr.is-selected > :first-child {
  border-inline-start: 1px solid #7ef3de;
  border-start-start-radius: 10px; border-end-start-radius: 10px;
}
.model-table tbody tr.is-selected > :last-child {
  border-inline-end: 1px solid #7ef3de;
  border-start-end-radius: 10px; border-end-end-radius: 10px;
}
:root[data-theme="light"] .model-table tbody tr.is-selected > * { background: rgba(15, 157, 138, .06); }

.empty { padding: 44px; text-align: center; color: var(--muted); }

/* ----------------------------------------------------------- pagination */

.pagination {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; height: 40px; padding: 0 12px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted); font-size: 12.5px;
  background: var(--surface);
}
.page-numbers { display: flex; align-items: center; gap: 4px; }
.page-link, .page-current, .page-ellipsis {
  min-width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; color: var(--muted); font-size: 12.5px; padding: 0 6px;
}
.page-current {
  background: transparent; color: var(--text); font-weight: 500;
  border: 1px solid var(--line-strong);
}
.page-link:hover { text-decoration: none; color: var(--text); background: rgba(255, 255, 255, .05); }
.pagination .icon-button {
  width: 28px; height: 28px; min-height: 28px; border: 0; background: transparent; color: var(--muted);
}
.pagination .icon-button:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.pagination .icon-button.is-disabled { opacity: .35; pointer-events: none; }
.pagination .icon-button svg.lucide { width: 15px; height: 15px; }
.page-range { color: var(--muted); font-size: 11.5px; opacity: .75; margin-inline-end: auto; }
.infinite-scroll { min-height: 1px; display: flex; justify-content: center; align-items: center; padding: 8px 0 12px; }
.infinite-scroll button {
  min-height: 28px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .02); color: var(--text); font-size: 12.5px; cursor: pointer;
}
.infinite-scroll button:hover { background: rgba(255, 255, 255, .05); }

/* --------------------------------------------------------------- footer */

.site-footer {
  display: flex; gap: 6px 18px; flex-wrap: wrap; align-items: center;
  min-height: var(--footer-h); flex: 0 0 auto;
  padding: 4px var(--pad-r) 4px var(--pad-x);
  border-top: 1px solid rgba(139, 169, 181, .07);
  font-size: 12px; color: var(--muted);
}
.site-footer a { color: var(--muted); display: inline-flex; align-items: center; min-height: 24px; }
.site-footer a:hover { color: var(--text); }
.footer-end { margin-inline-start: auto; display: flex; align-items: center; gap: 18px; }
.footer-sep { opacity: .45; }
.footer-slogan { color: var(--muted); }

.ad-slot { border-top: 1px solid var(--line); margin-top: 16px; padding: 11px 18px; }
.ad-slot > span { display: block; color: var(--muted); font-size: 11px; margin-bottom: 7px; }
.ad-slot ins { display: block; min-height: 90px; }
.consent {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding: 12px 18px; font-size: 12px;
}
.consent span { color: var(--muted); }
.policy { max-width: 780px; padding: 28px 0 40px; }
.policy h1 { margin-bottom: 18px; }
.policy h2 { margin-top: 25px; margin-bottom: 8px; }
.policy p { margin: 8px 0; }

/* ---------------------------------------------------------------- panel */

.model-panel {
  display: none;
  flex-direction: column;
  min-width: 0; min-height: 0;
  margin: 11px 0 0;
  border: 1px solid var(--line); border-radius: var(--r-panel);
  background:
    radial-gradient(520px 300px at 6% 0%, rgba(55, 132, 122, .055), transparent 66%),
    var(--panel);
  overflow: hidden;
}
.model-panel.is-open, .model-panel:not([hidden]) { display: flex; }
.panel-inner { display: flex; flex-direction: column; min-height: 0; height: 100%; }

.panel-top {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 8px 20px 0; position: relative;
}
.panel-close {
  width: 28px; height: 28px; min-height: 28px; margin-inline-end: auto;
  border: 0; background: transparent; color: #6d7b85; border-radius: 8px;
}
.panel-close:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.panel-close svg.lucide { width: 16px; height: 16px; }
.panel-actions { display: flex; align-items: center; gap: 6px; }

.ghost-button, .mint-button, .quiet-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; min-height: 36px; padding: 0 13px;
  border-radius: var(--r-ctl); font-size: 13px; font-weight: 450;
  border: 1px solid transparent; background: transparent;
}
.ghost-button { color: var(--text); }
.ghost-button:hover { text-decoration: none; background: rgba(255, 255, 255, .05); }
.ghost-button svg.lucide { width: 15px; height: 15px; }
.quiet-button { color: var(--muted); border-color: var(--line); background: rgba(255, 255, 255, .012); }
.quiet-button:hover { text-decoration: none; color: var(--text); background: rgba(255, 255, 255, .04); }
.save-wrap { position: relative; display: inline-flex; }
.mint-button {
  color: var(--mint-text); border-color: var(--mint-line); background: var(--mint-dim);
}
.mint-button:hover { text-decoration: none; background: rgba(94, 234, 212, .13); }

.share-fallback, .share-status {
  margin: 6px 20px 0; padding: 9px 11px;
  border: 1px solid var(--line-strong); border-radius: var(--r-ctl);
  background: var(--panel-2); font-size: 12px; color: var(--muted);
}
.share-status { color: var(--mint-text); }
.share-fallback input { width: 100%; margin-top: 6px; }

.panel-heading { display: flex; gap: 15px; align-items: flex-start; padding: 20px 20px 0; }
.panel-mark {
  width: 48px; height: 48px; flex: 0 0 48px; font-size: 15px; border-radius: 50%;
}
.panel-heading h1 { font-size: 24px; font-weight: 500; letter-spacing: -.02em; }
.model-meta { font-size: 14px; color: var(--muted); margin-top: 2px; }
.panel-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.tag {
  display: inline-flex; align-items: center; height: 26px; padding: 0 11px;
  border-radius: var(--r-chip); border: 1px solid var(--line); font-size: 12px; color: var(--text-soft);
}
.description {
  padding: 14px 20px 0; font-size: 14px; color: var(--text-soft); line-height: 1.6;
}
.panel-scroll { overflow: auto; flex: 1; min-height: 0; padding: 0 20px 22px; }
.panel-tabs {
  display: flex; gap: 28px; border-bottom: 1px solid var(--line-soft);
  margin-bottom: 18px; position: sticky; top: 0; z-index: 2;
  background: var(--panel);
}
.panel-tab { padding: 16px 0 10px; color: var(--muted); font-size: 14px; font-weight: 450; }
.panel-tab:hover { text-decoration: none; color: var(--text); }
.panel-tab.is-active, .panel-tab[aria-selected="true"] {
  color: var(--text); box-shadow: inset 0 -2px 0 var(--mint);
}

.stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat-card {
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid var(--line); border-radius: var(--r-card); padding: 12px;
  background: rgba(255, 255, 255, .017); min-height: 118px;
}
.stat-card h2 { font-size: 11px; font-weight: 450; color: var(--muted); line-height: 1.25; letter-spacing: -.008em; }
.stat-head { display: flex; align-items: center; gap: 7px; }
.stat-card:first-child {
  background: linear-gradient(150deg, rgba(46, 140, 127, .16), rgba(255, 255, 255, .015) 72%);
  border-color: rgba(126, 243, 222, .16);
}
.stat-icon { color: var(--mint-text); display: inline-flex; flex: 0 0 auto; }
.stat-icon svg.lucide { width: 14px; height: 14px; }
.stat-value {
  font-size: 22px; font-weight: 500; min-height: 1.2em; margin-top: 8px;
  letter-spacing: -.012em; line-height: 1.2; overflow-wrap: anywhere;
}
.context-value {
  white-space: nowrap; overflow-wrap: normal; word-break: normal;
}
.stat-card .secondary { margin-top: auto; padding-top: 6px; line-height: 1.3; font-size: 10.5px; }
.stat-card .release-date { font-size: 10.5px; color: var(--muted); }

.panel-block { margin: 20px 0; }
.panel-block + .panel-block { border-top: 1px solid var(--line-soft); padding-top: 18px; }
.panel-block h2 { margin-bottom: 11px; font-size: 13px; font-weight: 500; }
.fit-list, .resource-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.fit-list li {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 6px;
  border-radius: var(--r-chip); border: 1px solid var(--line);
  background: rgba(255, 255, 255, .025); font-size: 12.5px; color: var(--text-soft);
}
.fit-check {
  flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mint-dim); border: 1px solid var(--mint-line); color: var(--mint-text);
}
.fit-check svg.lucide { width: 11px; height: 11px; }
.essentials { display: grid; grid-template-columns: 134px minmax(0, 1fr); gap: 8px 14px; font-size: 13px; }
.essentials dt { color: var(--muted); }
.essentials dd { margin: 0; min-height: 1.2em; color: var(--text-soft); }
.capability-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.capability-list li {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px;
  align-items: start; font-size: 13px; color: var(--text-soft);
}
.capability-list .check { color: var(--mint-text); display: inline-flex; }
.capability-list .check svg.lucide { width: 18px; height: 18px; }
.detail-access { display: flex; flex-direction: column; gap: 8px; font-size: 13px; margin-top: 12px; }
.detail-prices { min-width: 460px; table-layout: fixed; }
.detail-prices th:first-child, .detail-prices td:first-child { width: 140px; }
.detail-prices th:nth-child(2), .detail-prices td:nth-child(2) { width: 150px; }
.panel-scroll .table-scroll {
  border: 1px solid var(--line); border-radius: var(--r-card); overflow: auto; flex: none;
}
/* The panel body is its own size container: in a narrow panel (phone sheet,
   small drawer) each price row becomes a small card instead of a table that
   needs sideways scrolling. */
.panel-scroll { container: panel / inline-size; }
@container panel (max-width: 479px) {
  .detail-prices { min-width: 0; display: block; }
  .detail-prices thead { display: none; }
  .detail-prices tbody { display: grid; gap: 8px; }
  .detail-prices tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px;
    padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--r-card);
  }
  .detail-prices td { display: block; width: auto !important; padding: 0; border: 0; min-width: 0; }
  .detail-prices td:nth-child(2) { text-align: end; }
  .detail-prices td:nth-child(3) { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
}
.evaluation { padding: 13px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.evaluation-heading { display: flex; gap: 18px; align-items: baseline; }
.evaluation p { margin: 5px 0; }
.evaluation-layer { margin-bottom: 18px; }
.evaluation-layer + .evaluation-layer { padding-top: 14px; border-top: 1px solid var(--line); }
.evaluation-group { padding: 10px 0 6px; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.evaluation-group-heading { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; font-weight: 600; }
.evaluation-rows { list-style: none; margin: 4px 0 0; padding: 0; }
.evaluation-row { padding: 6px 0 2px; border-top: 1px dashed var(--line-soft); }
.evaluation-row:first-child { border-top: 0; }
.evaluation-row .evaluation-heading { justify-content: space-between; min-width: 0; }
.evaluation-row .evaluation-heading a { min-width: 0; overflow-wrap: anywhere; }
.evaluation-row .evaluation-heading b { white-space: nowrap; }
.evaluation-row p, .evaluation-row details p { margin: 3px 0; }
.evaluation-row details summary { padding: 2px 0; }
.evaluation-more > summary { padding: 6px 0 2px; }
.evaluation-research-only { margin: 10px 0 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-card); color: var(--muted); font-size: 12px; }
.evaluation-gap { margin-top: 14px; }
details summary { font-size: 12px; padding: 7px 0; color: var(--link); cursor: pointer; }
.detail-source { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 16px; }
.record-number { color: var(--muted); font-size: .55em; font-weight: 400; white-space: nowrap; opacity: .7; }
.errorlist, .error { color: var(--danger); }
.success { color: var(--mint-text); }
.panel-error { padding: 24px; color: var(--muted); }

/* ----------------------------------------------------------- responsive */

@media (max-width: 1180px) {
  .orbit { display: none; }
  .header-end { gap: 12px; }
}

/* Detail panel below the desktop split. Tablets and small laptops get a
   drawer over the catalog (the header stays usable above it, so the language
   menu is never covered); phones and short landscape screens get a
   full-screen sheet. Clicking the dimmed catalog closes the drawer. */
@media (max-width: 1279px) {
  body.catalog-page.is-panel-open { overflow: hidden; }
  .model-panel.is-open, .model-panel:not([hidden]) {
    position: fixed; z-index: var(--z-panel);
    inset-block: var(--aip-header-h, 0) 0; inset-inline-end: 0;
    width: min(680px, calc(100% - 40px)); max-width: none;
    margin: 0; border-block: 0; border-inline-end: 0;
    border-radius: 0; border-start-start-radius: var(--r-panel);
    box-shadow: var(--shadow);
    background: var(--panel);
  }
  .catalog-page.is-panel-open .workspace::after {
    content: ""; position: fixed; inset: var(--aip-header-h, 0) 0 0 0;
    z-index: var(--z-panel-backdrop);
    background: rgba(3, 8, 11, .55);
  }
  :root[data-theme="light"] .catalog-page.is-panel-open .workspace::after {
    background: rgba(14, 27, 34, .28);
  }
  .panel-close { width: 40px; height: 40px; min-height: 40px; }
  .panel-actions .ghost-button, .panel-actions .quiet-button { height: 40px; min-height: 40px; }
}

@media (max-width: 720px), (max-width: 1279px) and (max-height: 539px) {
  /* Full-screen detail sheet: the whole card scrolls as one page, with room
     for notches and the home indicator. */
  .model-panel.is-open, .model-panel:not([hidden]) {
    z-index: var(--z-sheet);
    inset: 0; width: 100%; height: 100%; height: 100dvh;
    border: 0; border-radius: 0;
    overflow-y: auto; overscroll-behavior: contain;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
  }
  .catalog-page.is-panel-open .workspace::after { content: none; }
  .model-panel .panel-inner { height: auto; min-height: 100%; }
  .model-panel .panel-top {
    position: sticky; top: 0; z-index: 3; background: var(--panel);
    padding-block: 6px; border-bottom: 1px solid var(--line-soft);
  }
  .model-panel .panel-scroll {
    overflow: visible; flex: none;
    padding-bottom: calc(28px + env(safe-area-inset-bottom));
  }
  .model-panel .panel-tabs { position: static; }
  .panel-close { width: var(--touch); height: var(--touch); min-height: var(--touch); }
  .panel-actions .ghost-button, .panel-actions .quiet-button { height: 40px; min-height: 40px; }
}

/* Phones in portrait: the detail view fills the screen below the header, so
   language, search and theme stay available above it (the list position is
   kept and restored on close by site.js). Short landscape screens keep the
   full-screen sheet above. */
@media (max-width: 720px) and (min-height: 540px) {
  /* Measured phone header height for every locale (Release #025); site.js
     still sets the exact value. Without it a server-opened card was first
     painted at the top and then moved under the header (CLS 0.128 on slow
     phones). */
  :root { --aip-header-h: calc(108px + env(safe-area-inset-top, 0px)); }
  .model-panel.is-open, .model-panel:not([hidden]) {
    z-index: var(--z-panel);
    inset: var(--aip-header-h, 0) 0 0 0; height: auto;
    padding-top: 0;
    border-top: 1px solid var(--line-strong);
    border-radius: var(--r-panel) var(--r-panel) 0 0;
    box-shadow: 0 -12px 32px rgba(0, 0, 0, .35);
  }
}

@media (max-width: 900px) {
  .catalog-card { min-height: 60vh; }
}
@media (min-width: 721px) and (min-height: 540px), (min-width: 1280px) {
  .catalog-card { min-height: 0; }
}

@media (max-width: 720px) {
  :root { --pad-x: 12px; --pad-r: 12px; --head-inset: 0px; --footer-h: auto; --col-gap: 0px; }
  /* Phone header as one grid: brand | language | theme, then search, then
     optional extras (remembered-language offer, Local/Production switch) on
     their own line so nothing overlaps the brand at 320px. */
  .site-header {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-auto-rows: auto;
    gap: 10px 8px; padding: calc(10px + env(safe-area-inset-top)) 0 0;
  }
  .header-end, .header-controls { display: contents; }
  .brand { grid-column: 1; grid-row: 1; font-size: 19px; gap: 9px; height: var(--touch); }
  .brand img { width: 32px; height: 32px; flex-basis: 32px; }
  .languages { grid-column: 2; grid-row: 1; align-self: center; }
  #theme { grid-column: 3; grid-row: 1; align-self: center; }
  .search { max-width: none; grid-column: 1 / -1; grid-row: 2; }
  .env-nav { grid-column: 1; grid-row: 3; justify-self: start; }
  .lang-offer { grid-column: 2 / -1; grid-row: 3; justify-self: end; align-self: center; padding: 6px 0; }
  .search input { height: var(--touch); font-size: 16px; }
  .env-nav { height: 38px; }
  .icon-button { width: var(--touch); height: var(--touch); }
  .lang-menu > summary { height: var(--touch); padding: 0 11px; }
  .lang-toggle .lang-current { max-width: 92px; }
  .lang-popover { max-height: min(70dvh, 460px); }
  .lang-popover a { padding-block: 11px; }
  .catalog-toolbar {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px;
    margin: 14px 0 12px;
  }
  .type-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .type-tab { min-width: 0; height: var(--touch); padding: 0 12px; }
  .toolbar-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
  .catalog-actions { display: flex; }
  .toolbar-button { height: var(--touch); padding: 0 14px; }
  .catalog-freshness { max-width: 100%; white-space: normal; }
  .catalog-freshness-popover { inset-inline-start: auto; inset-inline-end: 0; }
  .freshness-entry { grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: 7px; }
  .catalog-counts { white-space: normal; font-size: 12.5px; text-align: end; min-width: 0; }
  .count-note { display: block; font-size: 11.5px; white-space: normal; overflow-wrap: anywhere; }
  .filter-chips, .comparison-basis { margin-left: 0; margin-right: 0; }
  .chip { height: 34px; }
  .site-footer { padding: 12px var(--pad-r) calc(12px + env(safe-area-inset-bottom)) var(--pad-x); height: auto; }
  .footer-end { margin-inline-start: 0; flex-wrap: wrap; gap: 12px; }
  .panel-top, .panel-heading, .description { padding-left: 14px; padding-right: 14px; }
  .panel-scroll { padding-left: 14px; padding-right: 14px; }
  .panel-heading h1 { font-size: 21px; }
  .stat-grid { grid-template-columns: 1fr; gap: 10px; }
  .stat-card { min-height: 0; }
  .panel-inner > .breadcrumbs { margin-inline: 14px; }
  .essentials { grid-template-columns: 1fr; gap: 2px; }
  .essentials dd { margin-bottom: 8px; }
  .panel-tabs { gap: 20px; overflow-x: auto; scrollbar-width: none; }
  .panel-tab { white-space: nowrap; padding-block: 14px 12px; }
  /* Bottom sheet for Filter / Sort on phones. */
  .sheet {
    width: 100%; max-width: 100%; max-height: 88dvh;
    margin: auto 0 0; border-radius: 16px 16px 0 0; border-bottom: 0;
  }
}

@media (max-width: 480px) {
  /* The button may sit at either end of the wrapped toolbar row. Anchor the
     popover to the row's end, which is always the content edge, so a popover
     of min(350px, 100vw - 32px) always stays inside the viewport. */
  .toolbar-end { position: relative; }
  .catalog-freshness-shell { position: static; }
  .catalog-freshness-popover { inset-inline-start: auto; inset-inline-end: 0; }
}

/* Touch screens: no hover, so header filters and search hints must not rely
   on it, and tap targets get a comfortable size. */
@media (hover: none) {
  .search-kbd { display: none; }
  .search input { padding-inline-end: 14px; }
  .header-control, .col-filter summary { opacity: 1; pointer-events: auto; width: 32px; height: 32px; }
  .column-actions > a[data-sort] { min-height: 40px; }
  .panel-inner > .breadcrumbs a { display: inline-block; padding-block: 12px; }
  .panel-inner > .breadcrumbs ol { margin-bottom: 0; }
  .column-actions > .header-control,
  .column-actions > .col-filter { inset-inline-end: -8px; }
  .type-tab { height: 40px; }
  .toolbar-button { height: 40px; }
}

/* Right-to-left refinements for Arabic and Persian. Logical properties above
   handle text flow and most mirroring; these cover decorative pieces and
   direction-specific icons. */
[dir="rtl"] .orbit { right: auto; left: 118px; transform: scaleX(-1); }
[dir="rtl"] .breadcrumb .sep,
[dir="rtl"] .back svg { transform: scaleX(-1); }
[dir="rtl"] a.back { direction: rtl; }
/* Keep the brand wordmark in its designed order regardless of text direction. */
.brand { direction: ltr; }
[dir="rtl"] .price-line strong,
[dir="rtl"] .stat-value,
[dir="rtl"] .money,
[dir="rtl"] .catnum { unicode-bidi: plaintext; }

/* GSD-1.0: footer links, collection header, language offer, reference pages */
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.hub-header { padding: 14px 0 6px; max-width: 900px; }
.hub-header h1 { font-size: 22px; font-weight: 500; margin: 0 0 6px; }
.hub-header p { margin: 4px 0; }
.hub-criterion { font-size: 13px; }
.lang-offer { font-size: 13px; color: var(--mint-text); white-space: nowrap; }
.policy .secondary, .policy .note { color: var(--muted); }
.policy ul.plain { list-style: none; padding: 0; }
.policy ul.plain li { margin: 12px 0; }
.policy table { border-collapse: collapse; width: 100%; font-size: 13px; }
.policy th, .policy td { border-bottom: 1px solid var(--line); padding: 6px 8px; text-align: start; vertical-align: top; }
.policy code { overflow-wrap: anywhere; }
.policy .table-scroll { overflow-x: auto; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin: 0 0 8px; padding: 0; font-size: 12px; color: var(--muted); }
.breadcrumbs li + li::before { content: "›"; margin-inline-end: 6px; opacity: .6; }
[dir="rtl"] .breadcrumbs li + li::before { content: "‹"; }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--text); }
.panel-inner > .breadcrumbs { margin: 4px 20px 6px; }