/* GUI v2 — Stream B (Apps, Kits, OxOnGPT, Clyde, OxOnTV). Tokens only; no raw hex except an app icon's own artwork. */

/* ── Apps ─────────────────────────────────────────────────────────────── */
.apps-section > header h2 { display: block; }
.apps-kicker {
  display: block; margin-bottom: 2px;
  font-size: var(--t-small); font-weight: var(--w-medium); color: var(--text-3); letter-spacing: 0;
}
/* ⭐ ONE TILE SHAPE, SO EVERY ROW LINES UP (founder, 2026-10-04 17:37: "misaligned, and poor").
   Mark · name (1 line) · caption (1 line, kept when empty) · status slot (fixed height, kept when
   empty). Every tile in every grid is therefore the same height with its text on the same lines.
   Columns are one fixed width on every grid of the page, so sections line up under each other;
   apps.js balanceGrids() sets --cols so no tile is left alone on a row. A phone keeps v2.css's
   three fluid columns. */
.apps-page { --apps-track: 152px; --apps-icon: 88px; --apps-slot: 28px; }
@media (min-width: 761px) {
  .apps-page .tiles { grid-template-columns: repeat(var(--cols, auto-fill), var(--apps-track)); justify-content: start; }
}
@media (min-width: 1700px) { .apps-page { --apps-track: 168px; --apps-icon: 104px; --apps-slot: 30px; } }
@media (max-width: 760px) { .apps-page { --apps-icon: 68px; --apps-slot: 24px; } }
.tile-cell { position: relative; display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
.tile-cell > .tile { width: 100%; height: 100%; min-height: var(--hit); min-width: 0; }
.apps-page .tile { justify-content: flex-start; }
.apps-page .tile .name, .apps-page .tile .where {
  display: block; width: 100%; min-width: 0; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.apps-page .tile .where {
  min-height: calc(var(--t-caption) * var(--lh-snug));
  font-size: var(--t-caption); font-weight: var(--w-regular, 400); color: var(--text-3);
}
.apps-page .tile .slot {
  display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0;
  height: var(--apps-slot); flex: none;
}
.apps-page .tile .slot .state {
  min-height: var(--apps-slot); max-width: 100%; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-flex;
  font-size: var(--t-caption); padding: 0 var(--s-3); line-height: 1;
}
/* The lines are reserved per GRID, not per page: a grid where no tile has a caption (or a chip)
   does not carry an empty line under every tile — the fleet's tiles are a name and nothing else. */
.apps-page .tiles:not(:has(.where:not(:empty))) .tile .where,
.apps-page .tiles:not(:has(.slot:not(:empty))) .tile .slot { display: none; }
/* A phone's column is ~110px: the chip keeps its dot and its word and drops its pill. */
@media (max-width: 760px) {
  .apps-page .tiles { column-gap: var(--s-1); }
  .apps-page .tile { padding-inline: 0; }
  .apps-page .tile .slot .state { background: transparent; padding: 0 2px; gap: 4px; }
  .apps-page .tile .slot .state::before { width: 7px; height: 7px; }
}
.tile .icon { position: relative; flex: none; }
.tile .icon.own { box-shadow: none; overflow: visible; }
/* the monogram: one or two initials, bold — a light "I" is a bar, not a letter */
.tile .icon.letter .mono { position: relative; z-index: 0; font-weight: var(--w-bold); font-size: var(--t-title-2); letter-spacing: 0; }
/* on the type scale (RULEBOOK R-T1): a title size on desk and glass, a section size on a phone */
.apps-page .tile .icon.letter .mono { font-size: var(--t-title-1); }
@media (max-width: 760px) { .apps-page .tile .icon.letter .mono { font-size: var(--t-title-2); } }
.tile .icon.letter img { position: absolute; inset: 0; z-index: 1; object-fit: cover; }
/* The initial is the fallback for a mark that fails, not a ground for one that loads: a logo
   with a transparent background (DrawString's) showed its "D" through the middle (founder,
   2026-10-04 17:13). icon() removes a failed <img>, so the initial returns exactly then. */
.tile .icon.letter:has(> img) > .mono { visibility: hidden; }
/* A monogram on the app's OWN colour is the app's artwork, not ours. */
.tile .icon.letter.tinted { background: var(--app-accent); border-color: transparent; color: rgb(255 255 255 / .94); }
.tile .where { margin-top: -4px; }
.tile.down .icon { opacity: .7; }
div.tile { cursor: default; }
div.tile:hover { background: none; }
.apps-page .tile .icon { width: var(--apps-icon); height: var(--apps-icon); }

/* The "i": the full honest sentence, opened OVER the page so it moves no tile. Its visible disc
   sits on the mark's top-right corner; its target is the full --hit square. */
.tile-why-btn {
  position: absolute; z-index: 2; top: calc(var(--s-2) - var(--hit) / 2 + 10px);
  left: calc(50% + var(--apps-icon) / 2 - var(--hit) / 2 - 4px);
  width: var(--hit); height: var(--hit); padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; color: var(--text-2); border-radius: 50%;
}
.tile-why-btn svg {
  width: 26px; height: 26px; padding: 3px; box-sizing: border-box; border-radius: 50%;
  background: var(--surface); box-shadow: var(--shadow-1); border: 1px solid var(--border);
}
.tile-why-btn:hover svg, .tile-why-btn[aria-expanded="true"] svg { color: var(--text); border-color: var(--control-border); }
.tile-why-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: -6px; }
.tile-why {
  position: fixed; z-index: 50; width: min(300px, calc(100vw - 16px)); box-sizing: border-box;
  padding: var(--s-3) var(--s-4); background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-2);
  font-size: var(--t-small); line-height: var(--lh-snug); text-align: left;
}
.tile-why[hidden] { display: none; }
.tile-why p { margin: 0; }
@media (max-width: 760px) {
  .tile-why { left: var(--s-4); right: var(--s-4); bottom: var(--s-4); width: auto; top: auto; padding: var(--s-4); }
}

.apps-section .state-panel, .apps-section .empty { margin-top: var(--s-6); }
.apps-section .state-panel.state-error .btn { background: var(--surface); color: var(--text); border-color: var(--control-border); }
.apps-section .foot { margin: var(--s-3) 0 0; max-width: var(--read-max); }
.apps-alone { margin-top: var(--s-10); }

/* ⭐ THE FLEET, ONE CARD PER COMPUTER (founder 2026-10-05: "this is ugly … i like the tiled look
   on the home screen"). The same card family as Home's fleet cards (.boxcard): the computer's
   picture at the top-left, its name and short id, an honest state chip, its one quiet line, and
   its apps as tiles inside the card. A card that did not answer is drawn, never hidden. */
.apps-box {
  position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); padding: var(--s-5); min-width: 0;
}
.apps-box + .apps-box { margin-top: var(--s-4); }
.apps-box-top { display: flex; align-items: center; gap: var(--s-4); min-width: 0; }
.apps-box-pic { flex: none; display: grid; place-items: center; width: 72px; height: 72px; }
.apps-box-pic .boxpic { width: 72px; height: 72px; display: block; }
.apps-box-titles { flex: 1; min-width: 0; }
.apps-box-head {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin: 0; min-height: var(--apps-slot);
  font-size: var(--t-lead); font-weight: var(--w-bold); color: var(--text); line-height: var(--lh-snug);
}
.apps-box-name { min-width: 0; overflow-wrap: anywhere; }
.apps-box-state:empty { display: none; }
.apps-box-state .state { min-height: 24px; font-size: var(--t-caption); }
.apps-box-notes .foot.apps-box-note { margin: 2px 0 0; font-size: var(--t-small); color: var(--text-3); max-width: none; }
.apps-box[data-state="none"] .apps-box-notes .foot.apps-box-note { color: var(--text-3); }
.apps-box .tiles { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--hairline); }
.apps-box[data-state="away"] .apps-box-pic .boxpic { filter: grayscale(1); opacity: .6; }
/* The family of drawings sits on a transparent ground; a photo is cropped square by the box that
   made it and gets the icon's corner so it reads as a picture, not a sticker. */
.boxpic { object-fit: contain; display: block; }
.boxpic.boxpic-photo { object-fit: cover; border-radius: var(--r-md); background: var(--surface-2); }
@media (min-width: 761px) {
  .apps-box .tiles { grid-template-columns: repeat(var(--cols, auto-fill), var(--apps-track)); }
}
@media (max-width: 760px) {
  .apps-box { padding: var(--s-4); }
  .apps-box-pic, .apps-box-pic .boxpic { width: 56px; height: 56px; }
  .apps-box-head { font-size: var(--t-body); }
}
.apps-arrived { margin-bottom: var(--s-6); }

/* ── Clyde (spec A7) — Mason, integration ─────────────────────────────────
   The brief rendered unstyled: browser bullets, a raw <details> marker and a
   default-size heading under the face. It is a card now. Controls share one
   height. The stage stays dark in BOTH themes (app.css paints it; untouched). */
.clyde-briefing, .clyde-brief, .clyde-build-banner {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); padding: var(--s-6); margin-top: var(--s-6);
}
.clyde-briefing[hidden], .clyde-brief[hidden], .clyde-build-banner[hidden] { display: none; }
.clyde-briefing h2, .clyde-brief h2 { font-size: var(--t-title-3); font-weight: var(--w-bold); letter-spacing: var(--track-title); margin: 0 0 var(--s-3); }
.clyde-briefing ul, .clyde-briefing ol, .clyde-brief ul, .clyde-brief ol { list-style: none; margin: var(--s-2) 0 0; padding: 0; }
.clyde-briefing li, .clyde-brief li { padding: var(--s-2) 0; border-top: 1px solid var(--hairline); color: var(--text-2); font-size: var(--t-small); }
.clyde-briefing li:first-child, .clyde-brief li:first-child { border-top: 0; }
.clyde-briefing details summary {
  list-style: none; cursor: pointer; min-height: var(--hit); display: flex; align-items: center; gap: var(--s-2);
  font-weight: var(--w-bold); color: var(--text);
}
.clyde-briefing details summary::-webkit-details-marker { display: none; }
.clyde-briefing details summary::after { content: "›"; color: var(--text-3); transition: transform var(--dur-2) var(--ease); }
.clyde-briefing details[open] summary::after { transform: rotate(90deg); }
.clyde-briefing__said { font-size: var(--t-lead); line-height: var(--lh-body); color: var(--text); }

/* ── ONE APP FRAME (Atlas item 10) — the bar every app opens behind ────────
   Mark · "Opening X…" · where it runs · Cancel; the way back said under it.
   The same component for a packaged app, a service app and a fleet app. */
.apps-page .app-frame { height: auto; display: block; max-width: 760px; margin-top: var(--s-6); }
.apps-page .app-frame__bar { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); margin: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.apps-page .app-frame__mark { flex: none; width: 56px; height: 56px; display: grid; place-items: center; }
.apps-page .app-frame__mark:empty { display: none; }
.apps-page .app-frame__mark .icon { width: 56px; height: 56px; border-radius: var(--r-icon); overflow: hidden;
  display: grid; place-items: center; font-size: var(--t-title-3); }
.apps-page .app-frame__mark .icon img, .apps-page .app-frame__mark .icon svg { width: 100%; height: 100%; display: block; }
.apps-page .app-frame__mark .icon.letter { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); position: relative; }
.apps-page .app-frame__mark .icon.letter.tinted { background: var(--app-accent); color: rgb(255 255 255 / .94); border-color: transparent; }
.apps-page .app-frame__mark .icon.letter img { position: absolute; inset: 0; object-fit: cover; }
.apps-page .app-frame__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.apps-page .app-frame__name { font-size: var(--t-lead); font-weight: var(--w-medium); color: var(--text); margin: 0; }
.apps-page .app-frame__where { font-size: var(--t-small); color: var(--text-2); }
.apps-page .app-frame__note { margin: var(--s-3) 0 0 0; padding-left: var(--s-5); font-size: var(--t-small); color: var(--text-2); }
@media (max-width: 760px) {
  .apps-page .app-frame__bar { gap: var(--s-3); padding: var(--s-3) var(--s-4); }
  .apps-page .app-frame__mark, .apps-page .app-frame__mark .icon { width: 44px; height: 44px; }
}

/* ── AI screen (phase 2): the Pictures card spans the column (D-27). ── */
.v2-ai .v2-pictures { max-width: none; }

/* ── Kits, a Kit, one run (phase 2, audit D-54…D-57) ───────────────────────
   The v1 rules live in app.css (Foundations' file). These, scoped to
   .kits-page, put the Kit screens on the v2 scale: one type scale (R-T1), no
   uppercase tracked labels (R-T4), state colour only on chips and the one
   "where it thinks" panel (R-C2), every target ≥ 44px (R-K2). */
.kits-page .kitstage { margin-top: var(--s-8); border-color: var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); }
.kits-page .kitstage + .kitstage { margin-top: var(--s-6); }
.kits-page .kitstage-top { padding: var(--s-6) var(--s-8) var(--s-5); gap: var(--s-6); }
.kits-page .kitstage-mark { width: 56px; height: 56px; }
.kits-page .kitstage-nameline { align-items: center; gap: var(--s-3); }
/* ⛔ D-54: the stage title was 50px — larger than the page title. Section size now. */
.kits-page .kitstage-name { font-size: var(--t-title-2); font-weight: var(--w-bold); letter-spacing: var(--track-title); line-height: var(--lh-tight); }
.kits-page .kitstage-by { margin-top: var(--s-2); font-size: var(--t-small); color: var(--text-2); }
.kits-page .kitstage-say { padding: 0 var(--s-8) var(--s-6); font-size: var(--t-lead); font-weight: var(--w-regular); color: var(--text); max-width: var(--read-max); }
.kits-page .kitfacts { border-top-color: var(--hairline); }
.kits-page .kitfact { padding: var(--s-5) var(--s-8); border-right-color: var(--hairline); gap: var(--s-1); }
.kits-page .kitfact-label { font-size: var(--t-small); font-weight: var(--w-medium); letter-spacing: 0; text-transform: none; color: var(--text-2); }
.kits-page .kitfact-val { font-size: var(--t-title-3); font-weight: var(--w-medium); letter-spacing: 0; color: var(--text); }
/* ⛔ D-55: "Off this computer" is a fact, not a status — ink, not blue. Not
   recorded stays the could-not-check grey, never amber (R-C3). */
.kits-page .kitfact.f-local .kitfact-val, .kits-page .kitfact.f-offbox .kitfact-val { color: var(--text); }
.kits-page .kitfact.f-unknown .kitfact-val { color: var(--idle); }
.kits-page .kitfact-note { font-size: var(--t-small); color: var(--text-2); }
.kits-page .kitstage-foot { padding: var(--s-5) var(--s-8); border-top-color: var(--hairline); background: var(--surface-2); gap: var(--s-4); }
.kits-page .kitstage-foot .btn { padding: 0 var(--s-6); font-size: var(--t-body); min-height: var(--hit); }
.kits-page .kitstage-foot .hint { font-size: var(--t-small); color: var(--text-2); }
.kits-page .payoff-file { border-color: var(--border); border-radius: var(--r-md); background: var(--surface); min-height: var(--hit); }
.kits-page .rows .row .k .state { white-space: nowrap; }
.kits-page .nav-back { margin-bottom: var(--s-4); }

/* Giving a Kit a job */
.kits-page .jobbox { border-color: var(--border); border-radius: var(--r-lg); background: var(--surface); padding: var(--s-6); }
.kits-page .jobbox-label { font-size: var(--t-lead); font-weight: var(--w-medium); margin-bottom: var(--s-3); }
.kits-page .jobbox-in { font-size: var(--t-body); background: var(--surface); border-color: var(--control-border); border-radius: var(--r-sm); padding: var(--s-3) var(--s-4); }
.kits-page .jobbox-in:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.kits-page .jobbox-hint { font-size: var(--t-small); color: var(--text-2); }
.kits-page .jobbox-hint.bad { color: var(--bad); }
.kits-page .chiprow-label { font-size: var(--t-small); font-weight: var(--w-medium); letter-spacing: 0; text-transform: none; color: var(--text-2); }
/* ⛔ D-56: an example is ONE line, ellipsis at 60ch, the full text in its title. */
.kits-page .jobbox .chiprow .chip.kit-ex { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: min(60ch, 100%);
  font-size: var(--t-body); padding: 0 var(--s-4); min-height: var(--hit); text-align: left; }
.kits-page .kitaside h3 { font-size: var(--t-small); font-weight: var(--w-medium); letter-spacing: 0; text-transform: none; color: var(--text-2); }

/* Where it thinks */
.kits-page .brain { border-color: var(--border); border-left-width: 3px; border-radius: var(--r-md); background: var(--surface); padding: var(--s-5); gap: var(--s-4); }
.kits-page .brain-label { font-size: var(--t-small); font-weight: var(--w-medium); letter-spacing: 0; text-transform: none; color: var(--text-2); }
.kits-page .brain-head { font-size: var(--t-lead); font-weight: var(--w-medium); }
.kits-page .brain p { font-size: var(--t-small); color: var(--text-2); }
.kits-page .brain .brain-model { font-size: var(--t-caption); color: var(--text-3); }
.kits-page .brain-mark { width: 28px; height: 28px; font-size: var(--t-small); }
.kits-page .brain-local { border-left-color: var(--ok); background: var(--ok-bg); }
.kits-page .brain-local .brain-mark, .kits-page .brain-local .brain-head { color: var(--ok); }
.kits-page .brain-offbox { border-left-color: var(--info); }
.kits-page .brain-offbox .brain-mark, .kits-page .brain-offbox .brain-head { color: var(--info); }
.kits-page .brain-unknown { border-left-color: var(--idle); background: var(--surface); }
.kits-page .brain-unknown .brain-mark, .kits-page .brain-unknown .brain-head { color: var(--idle); }

/* One run */
.kits-page .run-status { font-size: var(--t-title-1); font-weight: var(--w-bold); letter-spacing: var(--track-title); color: var(--text); }
.kits-page .run-status.run-stop { color: var(--bad); }
.kits-page .run-when { font-size: var(--t-small); color: var(--text-2); }
.kits-page .run-job { font-size: var(--t-lead); background: var(--surface-2); border-radius: var(--r-lg); padding: var(--s-4) var(--s-5); }
.kits-page .run-h2 { font-size: var(--t-title-2); font-weight: var(--w-bold); margin-top: var(--s-10); }
.kits-page .runline { font-size: var(--t-body); border-bottom-color: var(--hairline); padding: var(--s-3) 0; }
.kits-page .runline time { font-size: var(--t-caption); color: var(--text-3); width: 56px; }
.kits-page .run-foot { font-size: var(--t-small); color: var(--text-2); }
.kits-page .outfiles { border-color: var(--border); border-radius: var(--r-md); }
.kits-page .outfile { background: var(--surface); border-bottom-color: var(--hairline); padding: var(--s-3) var(--s-4); }
.kits-page .outfile-t b { font-size: var(--t-body); font-weight: var(--w-medium); }
.kits-page .outfile-t span, .kits-page .outfile-s { font-size: var(--t-caption); color: var(--text-3); }
.kits-page .run-error h2 { font-size: var(--t-title-3); }
@media (min-width: 1700px) {
  .kits-page .kitstage-top, .kits-page .kitfact, .kits-page .kitstage-foot { padding-left: var(--s-10); padding-right: var(--s-10); }
  .kits-page .kitstage-say { padding-left: var(--s-10); padding-right: var(--s-10); }
  .kits-page .run-status { font-size: var(--t-title-1); }
  .kits-page .runline time { width: 64px; }
}

/* ── OxOnTV (phase 2, audit D-50…D-52) — v2 parts, scoped to .tv-page ───── */
.tv-page .tv-band { margin-top: var(--s-4); }
.tv-page .tv-provs { margin-top: var(--s-4); gap: var(--s-4); }
.tv-page .tv-prov { border-color: var(--border); border-radius: var(--r-lg); background: var(--surface); padding: var(--s-5) var(--s-6); }
.tv-page .tv-prov__head { gap: var(--s-3); margin-bottom: var(--s-2); }
.tv-page .tv-prov__name { font-size: var(--t-lead); font-weight: var(--w-medium); letter-spacing: 0; }
.tv-page .tv-prov__note { font-size: var(--t-small); color: var(--text-2); margin-top: var(--s-3); }
/* ⛔ D-51: one form style — the setting-row shape: label on the left, the
   field in a fixed control column on the right; never 640px fields with the
   label stacked above. */
.tv-page .tv-field { display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 420px); align-items: center; gap: var(--s-4);
  margin-top: 0; padding: var(--s-2) 0; border-top: 1px solid var(--hairline); }
.tv-page .tv-field > span { font-size: var(--t-body); font-weight: var(--w-medium); letter-spacing: 0; color: var(--text); margin: 0; }
.tv-page .tv-field input { max-width: none; min-height: var(--hit); font-size: var(--t-body); padding: 0 var(--s-3); border-radius: var(--r-sm);
  border-color: var(--control-border); background: var(--surface); }
.tv-page .tv-check { min-height: var(--hit); font-size: var(--t-body); margin-top: var(--s-2); }
.tv-page .tv-check input { width: 20px; height: 20px; }
.tv-page .tv-actions { margin-top: var(--s-4); }
.tv-page .tv-failed { font-size: var(--t-small); color: var(--bad); }
.tv-page .tv-sub-saved { border: 0; background: none; padding: 0; margin-top: var(--s-3); font-size: var(--t-small); color: var(--text-2); }
.tv-page .tvch-form { border-color: var(--border); border-radius: var(--r-lg); background: var(--surface); padding: var(--s-5); }
.tv-page .tvch-form label { font-size: var(--t-small); color: var(--text-2); gap: var(--s-1); }
.tv-page .tvch-form input, .tv-page .tvch-form select { font-size: var(--t-body); min-height: var(--hit); padding: 0 var(--s-3);
  border-radius: var(--r-sm); border-color: var(--control-border); background: var(--surface); color: var(--text); }
.tv-page .tvch-form input:focus-visible, .tv-page .tvch-form select:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.tv-page .tvch-form input[readonly] { background: var(--surface-2); color: var(--text-2); }
.tv-page .tvch-hint { font-size: var(--t-caption); color: var(--text-3); }
.tv-page .tvch-err, .tv-page .tvch-rowerr { font-size: var(--t-small); color: var(--bad); }
.tv-page .tvch { border-bottom-color: var(--hairline); padding: var(--s-3) 0; gap: var(--s-4); }
.tv-page .tvch-pos { font-family: var(--font); font-size: var(--t-title-3); font-weight: var(--w-medium); color: var(--text); }
.tv-page .tvch-name { font-size: var(--t-body); font-weight: var(--w-medium); }
.tv-page .tvch-meta { gap: var(--s-2); }
.tv-page .tvch-meta code { font-family: var(--mono); font-size: var(--t-caption); color: var(--text-3); }
.tv-page .tvch-def { font-size: var(--t-small); color: var(--text-2); }
.tv-page .tvch-def--none { color: var(--warn); }
.tv-page .tv-empty { font-size: var(--t-body); color: var(--text-2); }
.tv-page .tv-soon { border: 0; padding: 0; margin-top: var(--s-10); }
.tv-page .tv-soon__more summary { min-height: var(--hit); display: flex; align-items: center; gap: var(--s-2); cursor: pointer;
  color: var(--text-2); font-weight: var(--w-medium); list-style: none; }
.tv-page .tv-soon__more summary::-webkit-details-marker { display: none; }
.tv-page .tv-soon__more summary::after { content: "›"; transition: transform var(--dur-2) var(--ease); }
.tv-page .tv-soon__more[open] summary::after { transform: rotate(90deg); }
.tv-page .tv-soon p { font-size: var(--t-small); color: var(--text-2); margin-top: var(--s-2); }
@media (max-width: 760px) {
  .tv-page .tv-field { grid-template-columns: 1fr; gap: var(--s-1); }
}
/* R-S4: cards in one row keep their action rows on the card bottom. */
.v2-ai .v2-models .v2-model .v2-model-acts { margin-top: auto; padding-top: var(--s-2); }