/* models.0-0.chat — only what is specific to this store.
   The palette, header, footer, buttons and page frame come from site-kit/site.css, which is loaded
   first and shared with skills.0-0.chat. Do not redeclare anything from there. */

/* ── controls ───────────────────────────────────────────────────────────── */

.controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.controls input[type=search], .controls select {
  padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); font-size: 15px;
}
.controls input[type=search] { min-width: 16rem; }
.count { color: var(--muted); font-size: 0.9rem; }
.btn {
  margin-left: auto; padding: 8px 16px; border-radius: 999px; background: var(--accent);
  color: var(--accent-ink); text-decoration: none; font-weight: 600; font-size: 15px;
}

/* ── tables ─────────────────────────────────────────────────────────────── */

/* NO overflow at desktop widths, deliberately. `overflow-x: auto` makes this a scroll container, and a
   sticky <thead> inside one sticks to the CONTAINER — which never scrolls vertically — so the header
   scrolled away with the page. Narrow screens still get the horizontal scroll (a 10-column table has
   to go somewhere), and there the header is static instead. */
.tablewrap { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
@media (max-width: 1180px) { .tablewrap { overflow-x: auto; } }
table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
thead th {
  text-align: left; padding: 10px 10px; white-space: nowrap; font-weight: 600;
  /* Anchored under the site header as you scroll — --topbar is its height, declared in site.css so
     the two cannot disagree. */
  border-bottom: 1px solid var(--line); position: sticky; top: calc(var(--topbar) + var(--secnav, 0px)); background: var(--surface-2);
  cursor: pointer; user-select: none;
}
thead th:hover { color: var(--accent); }
thead th.on::after { content: " ↓"; color: var(--accent); }
thead th.on.asc::after { content: " ↑"; }
tbody td { padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: 0; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* The one column allowed to be long. Truncating it is what keeps the table inside the page width —
   and the page width is what lets the header stick (see .tablewrap). The full name is the link text,
   so it is still there for search and for a tooltip. */
td.name { max-width: 18rem; overflow: hidden; text-overflow: ellipsis; }
td.name a { color: var(--text); text-decoration: none; font-weight: 500; }
td.name a:hover { color: var(--accent); text-decoration: underline; }
th.pick, td.pick { width: 34px; padding-right: 0; }

table.compare th[scope=row], table.kv th[scope=row] { color: var(--muted); font-weight: 400; text-align: left; white-space: nowrap; }
table.compare td, table.kv td { white-space: normal; }
table.kv { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }

.badge { display: inline-block; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); font-size: 0.78rem; }
.badge.good { border-color: var(--accent); color: var(--accent); }

/* ── facts + cards ──────────────────────────────────────────────────────── */

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 18px 0; }
.facts > div { background: var(--surface); padding: 12px 14px; }
.facts dt { color: var(--muted); font-size: 0.82rem; }
.facts dd { margin: 2px 0 0; font-size: 1.15rem; font-variant-numeric: tabular-nums; }

.mcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 26px 20px; }

/* The card IS the sample: rounded hard, lifted off the page, lit along the top-left edge the way a
   physical card catches light. Nothing else on the item has a box — the words sit in the open
   underneath, so a screenful reads as samples with captions rather than a wall of panels. */
.mitem { display: flex; flex-direction: column; min-width: 0; }
.shot {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 22px;
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: 0 18px 38px -14px rgba(0, 0, 0, 0.65), 0 2px 8px -2px rgba(0, 0, 0, 0.4);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}
@media (prefers-color-scheme: light) {
  .shot { box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.28), 0 2px 6px -2px rgba(0, 0, 0, 0.12); }
}
/* No example yet: the same shape, quietly striped, so the grid stays aligned and the gap is honest
   rather than hidden. */
.shot.none { background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 7px, transparent 7px, transparent 14px); opacity: 0.45; }

.slides { position: absolute; inset: 0; }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.55s ease; }
.slide.on { opacity: 1; }
.slide img, .slide video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Audio has no picture. Give it a lit panel and put the player IN it, rather than a bare control in a
   hole where every other card shows something. */
.slide.audio { display: flex; align-items: flex-end; padding: 14px; background: radial-gradient(120% 90% at 30% 0%, color-mix(in srgb, var(--accent) 22%, var(--surface-2)), var(--surface-2)); }
.slide.audio .wave { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.16) 0 2px, transparent 2px 7px); mask-image: radial-gradient(80% 55% at 50% 45%, #000 0%, transparent 75%); }
.slide.audio audio { position: relative; width: 100%; }

.dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 6px; }
.dot { width: 6px; height: 6px; padding: 0; border-radius: 999px; border: 0; cursor: pointer; background: rgba(255, 255, 255, 0.45); box-shadow: 0 1px 2px rgba(0,0,0,.5); }
.dot.on { background: #fff; width: 16px; }

/* click target over the whole tile, under the controls */
.shot .open { position: absolute; inset: 0; z-index: 1; }
.shot .arrow, .shot .dots, .slide .play { z-index: 2; }
.shot .arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 26px; height: 34px; border: 0; border-radius: 8px; cursor: pointer;
  background: rgba(0,0,0,0.45); color: #fff; font-size: 17px; line-height: 1;
  opacity: 0; transition: opacity 0.15s;
}
.shot:hover .arrow, .shot:focus-within .arrow { opacity: 1; }
.shot .arrow.prev { left: 6px; }
.shot .arrow.next { right: 6px; }

/* One play affordance for video and audio alike, so a grid of samples reads the same everywhere. */
.slide .play {
  position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.5); background: rgba(0,0,0,0.42); cursor: pointer;
  backdrop-filter: blur(4px); transition: transform 0.15s, background 0.15s;
}
.slide .play::after { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0;
  border-left: 15px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent; transform: translateX(2px); }
.slide .play:hover { transform: scale(1.06); background: rgba(0,0,0,0.6); }
.slide.playing .play { display: none; }
/* the row-sized version, for a voice clip in a table cell */
.slide.voice { position: relative; display: inline-block; width: 26px; height: 26px; }
.play.tiny { width: 26px; height: 26px; border-radius: 999px; }
.play.tiny::after { border-left-width: 8px; border-top-width: 5px; border-bottom-width: 5px; transform: translateX(1px); }
.slide.playing video, .slide.playing audio { pointer-events: auto; }

.mitem h3 { margin: 12px 0 0; font-size: 0.98rem; line-height: 1.3; }
.mitem h3 a { text-decoration: none; }
.mitem h3 a:hover { color: var(--accent); }
.mitem .desc { margin: 6px 0 0; font-size: 0.88rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mitem .kinds { display: flex; gap: 5px; flex-wrap: wrap; margin: 9px 0 0; }
.mitem .note { margin: 5px 0 0; font-size: 0.8rem; }

/* The facts, labelled: the label above the value, small and quiet, so a column of cards scans down
   the same three answers instead of three different paragraphs. */
.facts-row { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 10px 0 0; }
.facts-row dt { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.facts-row dd { margin: 1px 0 0; font-size: 0.85rem; font-variant-numeric: tabular-nums; }

/* detail page */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 14px; margin: 18px 0; }
.gallery figure { margin: 0; }
.gallery .slide { position: relative; inset: auto; opacity: 1; aspect-ratio: 4/3; border-radius: 18px; overflow: hidden;
  box-shadow: 0 14px 30px -14px rgba(0,0,0,0.6); border-top: 1px solid rgba(255,255,255,0.3); border-left: 1px solid rgba(255,255,255,0.3); }
.gallery figcaption { color: var(--muted); font-size: 0.8rem; margin-top: 6px; }

/* Section nav: pinned directly under the site header, so it is reachable from anywhere on a long
   page. `scroll-margin-top` on the targets is what stops a jump landing with the heading hidden
   behind both bars. */
/* Pages that carry a section bar declare its height, so a sticky table head lands under BOTH bars
   instead of behind the second one. */
body:has(.secnav) { --secnav: 51px; }
.secnav {
  position: sticky;
  top: var(--topbar);
  z-index: 9;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 10px 0;
  margin-bottom: 6px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
}
.secnav a {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  text-decoration: none;
  font-size: 0.86rem;
  white-space: nowrap;
}
.secnav a:hover { color: var(--text); }
.secnav a.on { color: var(--text); border-color: var(--muted); }
:target, h2[id], h3[id], #all { scroll-margin-top: calc(var(--topbar) + 58px); }

.check { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; color: var(--muted); }
.mcard img, .mcard video { width: 100%; border-radius: 8px; aspect-ratio: 16/10; object-fit: cover; display: block; background: var(--surface-2); }
.mcard audio { width: 100%; margin-bottom: 10px; }
/* The extra samples: smaller, in a row, because the first one is the advert and these are the proof. */
.mcard .more { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.mcard .more img, .mcard .more video { aspect-ratio: 1; border-radius: 6px; }
.mcard .more audio { grid-column: 1 / -1; margin: 0; }
h2 .count { color: var(--muted); font-weight: 400; font-size: 0.8em; font-variant-numeric: tabular-nums; }
h3 { font-size: 1rem; margin: 22px 0 8px; }
.mcard h3 { margin: 0 0 6px; font-size: 1rem; }
.mcard p { margin: 6px 0; font-size: 0.9rem; color: var(--muted); }
.mcard .kinds { display: flex; gap: 5px; flex-wrap: wrap; }

/* Every table on the site anchors its head under the bars — the speech tables are 32 rows long and
   scrolling one used to leave you reading unlabelled columns. */
@media (max-width: 1180px) { thead th { position: static; } }