/*
  LLM Desk: the one stylesheet (2026-11-11; system pass 2026-11-12, docs/reviews/2026-11-12-design-pass/README.md).
  The parts and when to use each are listed in design/parts.md. A page uses these parts and adds no style sheet of its own.

  The system (2026-11-12). Every value a rule uses comes from one of these scales:
  - Color: FIVE interface tokens, each with a light and a dark value: --text, --text-2 (muted text), surface (--ground, the
    page, and --raised, a card on it: one role at two levels), --line, --accent. Every other interface color (fills,
    washes, the current tab's tint, hovers, the selection, the focus ring) is a color-mix of those five, so nothing else is
    a free choice. The result colors and the platform colors are a separate, fixed DATA palette: a result is a word with
    its color (green Recommended, amber With a caveat, blue Only named, red Not named), a platform bar is that platform's
    own color. No gradients anywhere.
  - Type: five sizes. --t-1 13 (labels, table heads, meta), --t-2 14 (body), --t-3 16 (lead, card headings),
    --t-4 20 (summary figures), --t-5 24 (the page title). Three weights: 400, 550, 650.
  - Space: eight steps. --s-1 4, --s-2 8, --s-3 12, --s-4 16, --s-5 24, --s-6 32, --s-7 48, --s-8 64. Small gaps inside a
    group, larger gaps between groups.
  Owner decisions kept on purpose (decisions.md): the red primary button carries a white label; no pale grey text;
  results carry a color and always the word; a platform is marked by its own mark and color; few soft surfaces, fills
  instead of outlines ("not boxy"); dark mode is true dark with the raised surface lighter than the ground.
  Responsive (2026-11-12): the arrangement at 1440 is the desktop layout. Under 1024 px (or on a touch screen) every
  control is at least 44 px; under 900 px the sidebar is a drawer; under 768 px tables become labeled cards.
*/

@font-face { font-family: "Roobert"; src: url("fonts/RoobertVF.3ba27eb7e977.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }

:root {
  /* brand primitives (context/brand). Rules never use these directly. */
  --cream: #FAF5F0; --white: #FFFFFF; --ink: #1C1C29; --mist: #D6D6D6; --red: #FF283C; --black: #000000;
  /* the five interface color tokens, light */
  --text: var(--ink);
  --text-2: color-mix(in srgb, var(--ink) 82%, var(--cream));      /* muted text, still dark: about 10:1 on Cream */
  --ground: var(--cream);                                           /* surface, level 0: the page */
  --raised: var(--white);                                           /* surface, level 1: a card */
  --line: color-mix(in srgb, var(--mist) 62%, var(--white));       /* hairlines */
  --accent: var(--red);
  /* derived from the five: tints and states, never a new hue */
  --line-strong: color-mix(in srgb, var(--text) 18%, var(--line));
  --fill: color-mix(in srgb, var(--text) 6%, transparent);          /* inputs, tracks, quiet buttons */
  --fill-2: color-mix(in srgb, var(--text) 11%, transparent);
  --on-accent: var(--white);
  --accent-hover: color-mix(in srgb, var(--accent) 88%, var(--text));
  --wash: color-mix(in srgb, var(--accent) 10%, transparent);      /* secondary buttons, the current tab */
  --wash-2: color-mix(in srgb, var(--accent) 17%, transparent);
  --wash-text: color-mix(in srgb, var(--accent) 70%, var(--text)); /* the current tab's word: 6:1 on White */
  --sel: var(--raised);                                             /* the chosen tab or filter */
  --side-bg: var(--ground);
  --focus: var(--text);
  --card-edge: none;                                                /* light: the white on Cream is the edge */
  --shadow-menu: 0 2px 4px color-mix(in srgb, var(--text) 8%, transparent), 0 12px 28px color-mix(in srgb, var(--text) 12%, transparent);
  --shadow-sel: 0 1px 2px color-mix(in srgb, var(--text) 8%, transparent);
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231C1C29' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  /* DATA palette, fixed. Results: the word is always there; the color repeats it */
  --yes: #2E9E62;    --yes-text: #1F7A4A;      /* Recommended */
  --caveat: #E3A008; --caveat-text: #8A5F00;   /* Recommended with a caveat */
  --named: #4277D6;  --named-text: #2D5FB8;    /* Only named */
  --none: #E5484D;   --none-text: #B4232F;     /* Not named */
  /* platforms: each platform's own color, used only to mark that platform. Gemini is its mark's violet (no gradient),
     so it never shares Google AI Mode's blue */
  --p-chatgpt: var(--text); --p-claude: #D97757; --p-gemini: #9B72CB;
  --p-ai-mode: #4285F4; --p-ai-overview: #34A853; --p-perplexity: #20808D; --p-other: color-mix(in srgb, var(--text) 55%, var(--raised));
  /* space */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  /* type */
  --t-1: 13px; --t-2: 14px; --t-3: 16px; --t-4: 20px; --t-5: 24px;
  /* shape, motion, fonts */
  --r-s: 8px; --r-m: 12px; --r-l: 16px; --r-full: 999px;
  --ease: cubic-bezier(.2, .8, .4, 1); --dur: 140ms;
  --font: "Roobert", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --side-w: 248px;
  --tap: 44px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --text: var(--cream);
  --text-2: color-mix(in srgb, var(--cream) 84%, var(--black));
  --ground: var(--black); --raised: var(--ink);
  --line: #30303F;
  --fill: color-mix(in srgb, var(--text) 9%, transparent); --fill-2: color-mix(in srgb, var(--text) 15%, transparent);
  --wash: color-mix(in srgb, var(--accent) 22%, transparent); --wash-2: color-mix(in srgb, var(--accent) 30%, transparent);
  --wash-text: color-mix(in srgb, var(--accent) 40%, var(--text));
  --sel: color-mix(in srgb, var(--text) 14%, var(--raised));
  --side-bg: color-mix(in srgb, var(--raised) 55%, var(--ground));
  --card-edge: inset 0 0 0 1px color-mix(in srgb, var(--text) 7%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent);
  --shadow-menu: 0 2px 4px color-mix(in srgb, var(--black) 40%, transparent), 0 12px 28px color-mix(in srgb, var(--black) 50%, transparent);
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23FAF5F0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --yes: #46C283; --yes-text: #7FDCAA; --caveat: #F2C14E; --caveat-text: #FFD772; --named: #6F9CF0; --named-text: #A3C1FF; --none: #FF6B75; --none-text: #FF9AA3;
  --p-perplexity: #2FB3C2;
  color-scheme: dark;
} }
:root[data-theme="dark"] {
  --text: var(--cream);
  --text-2: color-mix(in srgb, var(--cream) 84%, var(--black));
  --ground: var(--black); --raised: var(--ink);
  --line: #30303F;
  --fill: color-mix(in srgb, var(--text) 9%, transparent); --fill-2: color-mix(in srgb, var(--text) 15%, transparent);
  --wash: color-mix(in srgb, var(--accent) 22%, transparent); --wash-2: color-mix(in srgb, var(--accent) 30%, transparent);
  --wash-text: color-mix(in srgb, var(--accent) 40%, var(--text));
  --sel: color-mix(in srgb, var(--text) 14%, var(--raised));
  --side-bg: color-mix(in srgb, var(--raised) 55%, var(--ground));
  --card-edge: inset 0 0 0 1px color-mix(in srgb, var(--text) 7%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent);
  --shadow-menu: 0 2px 4px color-mix(in srgb, var(--black) 40%, transparent), 0 12px 28px color-mix(in srgb, var(--black) 50%, transparent);
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23FAF5F0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --yes: #46C283; --yes-text: #7FDCAA; --caveat: #F2C14E; --caveat-text: #FFD772; --named: #6F9CF0; --named-text: #A3C1FF; --none: #FF6B75; --none-text: #FF9AA3;
  --p-perplexity: #2FB3C2;
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-family: var(--font); -webkit-text-size-adjust: 100%; font-feature-settings: "calt" 0; }
body { margin: 0; background: var(--ground); color: var(--text); font-size: var(--t-2); line-height: 1.5; font-weight: 400; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1 { font-size: var(--t-5); line-height: 1.2; font-weight: 650; letter-spacing: -0.02em; text-wrap: balance; }
h2 { font-size: var(--t-3); line-height: 1.3; font-weight: 650; letter-spacing: -0.01em; }
h3 { font-size: var(--t-2); line-height: 1.4; font-weight: 650; }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
strong, b { font-weight: 650; }
img, svg { max-width: 100%; }
svg.i { flex: none; vertical-align: -3px; }
code, kbd { font-family: var(--mono); font-size: var(--t-1); overflow-wrap: anywhere; }   /* a long file name or hash wraps instead of widening a phone page */
/* Focus: a 2px ring in the text color, drawn outside the control. An outline (not a shadow) survives forced-colors mode. */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
input:focus, input:focus-within, select:focus, textarea:focus { outline: 2px solid var(--focus); outline-offset: 1px; }     /* a field shows focus however it was reached */
.t-wrap :focus-visible { outline-offset: -2px; }   /* inside a scrolling table the ring is drawn inward, so the edge cannot clip it */
main:focus { outline: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: var(--s-4); top: calc(-1 * var(--s-7)); z-index: 50; padding: var(--s-2) var(--s-4); background: var(--text); color: var(--ground); border-radius: var(--r-s); }
.skip-link:focus { top: var(--s-4); }
.num { text-align: right; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.sub { color: var(--text-2); font-size: var(--t-1); }
p.sub, .card-h p, .note span, .empty p { max-width: 56ch; }
main p, main dd, main li { max-width: 62ch; }   /* running text stays within about 80 characters a line */
.t p, .t dd, .t li, .figs dd { max-width: none; }
.nowrap { white-space: nowrap; }

/* ---------- shell ---------- */
.app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }
.side-collapsed .app { grid-template-columns: minmax(0, 1fr); }
.side-collapsed .side { display: none; }
.side { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-4) var(--s-3); border-right: 1px solid var(--line); background: var(--side-bg); }
.side-head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-1) var(--s-2); }
.side-brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; font-weight: 650; font-size: var(--t-3); line-height: 1.2; }
.side-maker { display: block; font-weight: 400; font-size: var(--t-1); color: var(--text-2); }
.side .side-close { display: none; }
.side nav { display: flex; flex-direction: column; gap: var(--s-1); }
.side nav a { display: flex; align-items: center; gap: var(--s-3); min-height: 36px; padding: 0 var(--s-3); border-radius: var(--r-s); text-decoration: none; color: var(--text); transition: background-color var(--dur) var(--ease); }
.side nav a:hover { background: var(--fill); }
.side nav a[aria-current="page"] { background: var(--wash); font-weight: 650; }
.side nav a[aria-current="page"] svg { color: var(--accent); }
.side-label { margin: var(--s-4) 0 var(--s-1); padding: 0 var(--s-3); font-size: var(--t-1); font-weight: 550; color: var(--text-2); }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--s-3); }
.side-foot .seg { display: flex; } .side-foot .seg button { flex: 1; justify-content: center; padding: 0 var(--s-1); gap: var(--s-1); font-size: var(--t-1); }
.side-user { display: flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-2); min-height: 36px; }
.side-user .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-1); }
.avatar { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-full); background: var(--text); color: var(--ground); font-size: var(--t-1); font-weight: 650; }
/* client switcher */
.sw { position: relative; }
.sw > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: 52px; padding: var(--s-2) var(--s-3); border-radius: var(--r-m); background: var(--fill); cursor: pointer; }
.sw > summary::-webkit-details-marker { display: none; }
.sw > summary:hover { background: var(--fill-2); }
.sw-text { display: flex; flex-direction: column; min-width: 0; }
.sw-label { font-size: var(--t-1); color: var(--text-2); }
.sw-name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-menu { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + var(--s-1)); padding: var(--s-1); background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--shadow-menu); }
.sw-item, .sw-all { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); width: 100%; min-height: 36px; padding: 0 var(--s-3); border: 0; background: transparent; border-radius: var(--r-s); font: inherit; color: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.sw-item:hover, .sw-all:hover { background: var(--fill); }
.sw-item[aria-current="true"] { font-weight: 650; }
.sw-all { justify-content: flex-start; margin-top: var(--s-1); border-top: 1px solid var(--line); border-radius: 0 0 var(--r-s) var(--r-s); }
.sw-empty { padding: var(--s-2) var(--s-3); }
/* top bar and page */
.main { min-width: 0; display: flex; flex-direction: column; container-type: inline-size; container-name: main; }
.topbar { display: flex; align-items: center; gap: var(--s-2); min-height: 52px; padding: 0 var(--s-5); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); min-width: 0; font-size: var(--t-1); }
.crumbs a { text-decoration: none; padding: var(--s-1); border-radius: var(--r-s); }
.crumbs a:hover { background: var(--fill); }
.crumbs .here { padding: var(--s-1); font-weight: 650; }
.page { width: 100%; max-width: 1240px; margin: 0 auto; padding: var(--s-2) var(--s-6) var(--s-8); }
.page.narrow { max-width: 760px; }

/* wayfinding above the title: the Back link and the trail share one line, quiet, so the title leads */
.wayfind { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-4); margin-bottom: var(--s-4); font-size: var(--t-1); }
.wayfind .back, .wayfind .trail ol { margin-bottom: 0; }
/* the trail: the chain of work this page belongs to (question, answer, buying reason, change, result) */
.trail { min-width: 0; }
.trail ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); margin-bottom: var(--s-3); font-size: var(--t-1); color: var(--text-2); }
.trail li { min-width: 0; overflow-wrap: anywhere; }
.trail li + li::before { content: "\203A"; margin-right: var(--s-2); }
.trail a { text-decoration: none; } .trail a:hover { text-decoration: underline; }
.trail li:has(> [aria-current]) { display: none; }   /* the page itself is named by its h1 right below: the trail shows where it came from */

/* ---------- page head ---------- */
.ph { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-3) var(--s-5); margin-bottom: var(--s-5); }
.ph-text { min-width: 0; flex: 1 1 420px; }
.ph-kicker { display: block; margin-bottom: var(--s-1); font-size: var(--t-1); color: var(--text-2); }    /* what kind of thing this page is: "Buying reason" */
.ph-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.lead { margin-top: var(--s-2); max-width: 58ch; font-size: var(--t-3); line-height: 1.5; text-wrap: pretty; }     /* the one sentence that answers the page's question */
.lead strong { font-weight: 650; }
.back { display: inline-flex; align-items: center; gap: var(--s-1); margin-bottom: var(--s-3); font-size: var(--t-1); text-decoration: none; padding: var(--s-1) var(--s-2) var(--s-1) var(--s-1); border-radius: var(--r-s); }
.back:hover { background: var(--fill); }

/* ---------- tabs and filters ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-bottom: var(--s-5); padding: var(--s-1); width: fit-content; max-width: 100%; background: var(--fill); border-radius: var(--r-m); }
.tabs a { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 32px; padding: 0 var(--s-3); border-radius: var(--r-s); text-decoration: none; white-space: nowrap; }
.tabs a:hover { background: var(--fill); }
.tabs a[aria-current="page"], .tabs a[aria-current="true"] { background: var(--sel); color: var(--wash-text); font-weight: 650; box-shadow: var(--shadow-sel); }
.tabs .n { font-variant-numeric: tabular-nums; color: var(--text-2); font-weight: 400; }
/* one band of filters: every control the same 32px height, so the band reads as one quiet row above the data */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-5); }
.filters label { display: inline-flex; align-items: center; gap: var(--s-2); margin: 0; font-size: var(--t-1); font-weight: 550; }
.filters label { max-width: 100%; min-width: 0; }
.filters select, .filters input[type="search"], .filters input[type="text"] { width: 140px; min-width: 140px; max-width: 100%; }
.filters select, .filters input { min-height: 32px; font-size: var(--t-1); }
select { max-width: 100%; text-overflow: ellipsis; }
.fig .res { white-space: normal; }
.seg { display: inline-flex; flex-wrap: wrap; max-width: 100%; padding: var(--s-1); gap: var(--s-1); background: var(--fill); border-radius: var(--r-m); }
.seg a, .seg button { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 28px; padding: 0 var(--s-3); border: 0; border-radius: var(--r-s); background: transparent; font: inherit; color: inherit; text-decoration: none; cursor: pointer; white-space: nowrap; }
.seg a[aria-current="true"], .seg button[aria-pressed="true"] { background: var(--sel); color: var(--wash-text); font-weight: 650; box-shadow: var(--shadow-sel); }

/* ---------- buttons ---------- */
.btn, button.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 40px; padding: 0 var(--s-4); border: 0; border-radius: var(--r-s); background: var(--wash); color: var(--text); font: inherit; font-weight: 650; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur) var(--ease); }
.btn:hover { background: var(--wash-2); }
.btn-primary, button.btn-primary { background: var(--accent); color: var(--on-accent); padding: 0 var(--s-5); }   /* one per view. White label: owner decision, 2026-11-09 */
.btn-primary:hover { background: var(--accent-hover); }
.btn-quiet, button.btn-quiet { background: transparent; font-weight: 550; padding: 0 var(--s-3); }
.btn-quiet:hover { background: var(--fill); }
.btn-small { min-height: 32px; padding: 0 var(--s-3); font-size: var(--t-1); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.icon-btn { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: var(--r-s); background: transparent; color: inherit; cursor: pointer; }
.icon-btn:hover { background: var(--fill); }
.go { display: inline-flex; align-items: center; gap: var(--s-1); font-weight: 550; text-decoration: none; white-space: nowrap; }   /* a text link that moves on: "Open the answers" */
.go:hover { text-decoration: underline; }

/* ---------- surfaces ---------- */
.card { background: var(--raised); border-radius: var(--r-l); margin-bottom: var(--s-5); container-type: inline-size; box-shadow: var(--card-edge); }       /* one meaningful unit. No border, no shadow: the white on Cream is the edge */
.card-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-4); padding: var(--s-5) var(--s-5) var(--s-3); }
.card-h p { flex-basis: 100%; color: var(--text-2); font-size: var(--t-1); }
.card-b { padding: var(--s-1) var(--s-5) var(--s-5); }
.card-b:first-child { padding-top: var(--s-5); }
.card-f { padding: var(--s-3) var(--s-5) var(--s-4); border-top: 1px solid var(--line); font-size: var(--t-1); color: var(--text-2); }
.cols { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.cols.even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stack > * + * { margin-top: var(--s-3); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.grow { flex: 1; min-width: 0; }
.section { margin: var(--s-6) 0 var(--s-3); display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); }   /* a heading that sits on the ground, above a card or table */

/* ---------- tables ---------- */
.t { width: 100%; border-collapse: collapse; }
caption { text-align: left; }
.t th { height: 36px; padding: 0 var(--s-3); text-align: left; font-size: var(--t-1); font-weight: 550; color: var(--text-2); white-space: nowrap; vertical-align: middle; }
.t td { padding: var(--s-3); border-top: 1px solid var(--line); vertical-align: top; }
.t th:first-child, .t td:first-child { padding-left: var(--s-5); }
.t th:last-child, .t td:last-child { padding-right: var(--s-5); }
.t tbody tr.row-opens { cursor: pointer; transition: background-color var(--dur) var(--ease); }
.t tbody tr.row-opens:hover { background: var(--fill); }
.t td a { text-decoration: none; }
.t td a:hover { text-decoration: underline; }
.t .id { font-weight: 550; }                              /* the cell that names the row and opens it */
.t tr.you td { background: var(--fill); }                  /* the client's own row among rivals */
.t tr.group td { padding-top: var(--s-4); padding-bottom: var(--s-2); font-weight: 650; border-top: 1px solid var(--line); }
.t td.mid, .t.mid td { vertical-align: middle; }
.t-wrap { overflow-x: auto; position: relative; }
/* The AI names stay in view while the question list scrolls (Peace, 2026-11-12: "i can't know which platform did this when i
   scroll"). A sideways scroller stops a header from sticking to the window, so where the columns fit (a wide card, five AIs or
   fewer) the wrapper stops scrolling sideways and the header row sticks to the top; narrower, the table scrolls as before. */
@container (min-width: 860px) {
  .t-wrap.sticky-head { overflow: visible; }
  .t-wrap.sticky-head thead th { position: sticky; top: 0; z-index: 2; background: var(--raised); box-shadow: inset 0 -1px 0 var(--line); }
  .t-wrap.sticky-head thead th:first-child { z-index: 3; }
}
/* A wide comparison (a column per AI) keeps its first column in place and scrolls the rest inside the card. The question
   column takes a third of the width, so a question reads in two or three lines instead of six. */
.t.pin-first th:first-child, .t.pin-first td:first-child { position: sticky; left: 0; z-index: 1; background: var(--raised); min-width: 240px; box-shadow: 1px 0 0 var(--line); }
.t.pin-first th:first-child { width: 32%; }
.t.pin-first tr.group td:first-child { box-shadow: none; }
.t.pin-first tbody tr.row-opens:hover td:first-child { background: color-mix(in srgb, var(--raised) 94%, var(--text)); }   /* relative: hidden labels inside a scrolled table must not widen the page */
/* A table that does not fit becomes labeled cards (static/app.js adds .is-stacked and data-label). The cell that names the
   row is the card's title; every other cell is a label beside its value. */
.t.is-stacked, .t.is-stacked tbody { display: block; }
.t.is-stacked thead { display: none; }
.t.is-stacked tr { display: flex; flex-direction: column; padding: var(--s-4) var(--s-5); border-top: 1px solid var(--line); }
.t.is-stacked td:has(> a.id), .t.is-stacked td:has(> .id) { order: -1; }   /* the name leads the card, wherever its column was */
.t.is-stacked td:has(> div:only-child > a:not(.id):only-child)::before, .t.is-stacked td:has(> a:not(.id):only-child)::before { align-self: center; }
.t.is-stacked.pin-first td:first-child { position: static; min-width: 0; box-shadow: none; background: none; }
.t.is-stacked tr.group td, .t.is-stacked tr.stack-head td { border: 0; }
.t.is-stacked td { display: grid; grid-template-columns: min(34%, 200px) minmax(0, 1fr); column-gap: var(--s-3); row-gap: 0; padding: var(--s-1) 0; border: 0; text-align: left; white-space: normal; min-width: 0; position: static; box-shadow: none; background: none; }
.t.is-stacked td::before { content: attr(data-label); grid-column: 1; grid-row: 1 / span 8; align-self: start; font-size: var(--t-1); font-weight: 550; color: var(--text-2); }
.t.is-stacked td > * { grid-column: 2; min-width: 0; }
.t.is-stacked td:not([data-label])::before, .t.is-stacked td[data-label=""]::before { content: none; }
.t.is-stacked td:not([data-label]), .t.is-stacked td[data-label=""] { display: block; }
.t.is-stacked td[data-label=""]:not(:has(> .id)) { padding-left: calc(min(34%, 200px) + var(--s-3)); }   /* a value whose column has no visible head still lines up with the values */
.t.is-stacked td:has(> a.id), .t.is-stacked td:has(> .id) { display: block; padding: 0 0 var(--s-2); }
.t.is-stacked td:has(> a.id)::before, .t.is-stacked td:has(> .id)::before { content: none; }
.t.is-stacked td:has(> a.id) .id { font-weight: 650; }
.t.is-stacked tr.stack-head, .t.is-stacked tr.group { padding-top: var(--s-5); padding-bottom: var(--s-2); }
.t.is-stacked tr.stack-head td, .t.is-stacked tr.group td { display: block; padding: 0; }
.t.is-stacked .num { text-align: left; }
.t.is-stacked td, .t.is-stacked .id { overflow-wrap: anywhere; } .t.is-stacked .res, .t.is-stacked .engine, .t.is-stacked .num, .t.is-stacked .nowrap { white-space: normal; }

/* ---------- results and platforms ---------- */
.res { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 550; white-space: nowrap; }     /* a result: swatch + the word */
.res::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--k, transparent); box-shadow: inset 0 0 0 1.5px var(--kb, transparent); }
.res-yes { --k: var(--yes); color: var(--yes-text); }
.res-caveat { --k: var(--caveat); color: var(--caveat-text); }
.res-named { --k: var(--named); color: var(--named-text); }
.res-none { --k: var(--none); color: var(--none-text); }
.res-empty { --kb: var(--line-strong); color: var(--text); font-weight: 400; }        /* not counted, not read yet, no result yet: an outline, never grey text */
.res.wrap { white-space: normal; align-items: flex-start; }
.res.wrap::before { margin-top: var(--s-1); }
.key { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); font-size: var(--t-1); }                 /* a legend made of .res */
.tone { font-weight: 550; }                                                               /* one brand's tone in one answer */
.tone-positive { color: var(--yes-text); } .tone-negative { color: var(--none-text); }
mark { padding: 0 2px; border-radius: 3px; color: inherit; background: color-mix(in srgb, var(--caveat) 24%, transparent); }   /* quoted words in an answer */
mark.q-yes { background: color-mix(in srgb, var(--yes) 24%, transparent); }
mark.q-caveat { background: color-mix(in srgb, var(--caveat) 28%, transparent); }
mark.q-named { background: color-mix(in srgb, var(--named) 22%, transparent); }
mark.q-none, mark.q-empty { background: color-mix(in srgb, var(--line-strong) 40%, transparent); }
.stand { font-weight: 650; }                                                              /* Winning, Tied, Losing at the start of a lead */
.stand-win { color: var(--yes-text); } .stand-lose { color: var(--none-text); } .stand-tie { color: var(--caveat-text); }
.engine { display: inline-flex; align-items: center; gap: var(--s-2); white-space: nowrap; }
.engine-logo { flex: none; }
.engine-name { font-weight: 550; }
/* bars: one track, one or more fills. A bar never appears without its number. */
.bar { display: flex; height: 8px; min-width: 80px; border-radius: var(--r-full); background: var(--fill-2); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--k, var(--text)); }
.bar > i + i { margin-left: 1px; }
.bar .yes { --k: var(--yes); } .bar .caveat { --k: var(--caveat); } .bar .named { --k: var(--named); } .bar .none { --k: var(--none); }
.bar .p-chatgpt { background: var(--p-chatgpt); } .bar .p-claude { background: var(--p-claude); } .bar .p-gemini { background: var(--p-gemini); }
.bar .p-ai-mode { background: var(--p-ai-mode); } .bar .p-ai-overview { background: var(--p-ai-overview); } .bar .p-perplexity { background: var(--p-perplexity); } .bar .p-other { background: var(--p-other); }
.bar.tall { height: 12px; }
/* figures: summary numbers, unboxed, in one line. Not a row of tiles. One step below the page title, so the title leads. */
.figs { display: grid; grid-template-columns: repeat(4, minmax(0, max-content)); gap: var(--s-4) var(--s-7); margin: 0 0 var(--s-5); }
@container main (max-width: 820px) { .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-5); } }
.fig dt { font-size: var(--t-1); }
.fig dd { margin-top: var(--s-1); font-size: var(--t-4); line-height: 1.2; font-weight: 650; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.fig dd small { font-size: var(--t-2); font-weight: 400; letter-spacing: 0; }
.fig .sub { display: block; margin-top: var(--s-1); max-width: 28ch; }

/* ---------- words on pages ---------- */
.quote { padding: var(--s-1) 0 var(--s-1) var(--s-4); border-left: 3px solid var(--line-strong); max-width: 62ch; }       /* an AI answer or a page's own words, quoted */
.quote + .quote { margin-top: var(--s-3); }
.prose { max-width: 58ch; font-size: var(--t-3); line-height: 1.6; }
.prose > * + * { margin-top: var(--s-3); }
.prose ul { list-style: disc; padding-left: var(--s-5); } .prose ol { list-style: decimal; padding-left: var(--s-5); }
.prose h2, .prose h3 { margin-top: var(--s-5); }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s-2) var(--s-5); }
.kv dt { font-size: var(--t-1); font-weight: 550; }
.tag { display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--s-2); border-radius: var(--r-full); background: var(--fill); font-size: var(--t-1); white-space: nowrap; }     /* a kind or a label, never a result */
.tag-you { background: var(--fill-2); color: var(--text); font-weight: 650; }   /* "This client": named, not shouted; the row is already marked */
.note { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-5); border-radius: var(--r-m); background: var(--fill); }      /* something the reader must know before reading on */
.note > svg { margin-top: var(--s-1); }
.note-problem { background: color-mix(in srgb, var(--none) 12%, transparent); }
.note-good { background: color-mix(in srgb, var(--yes) 12%, transparent); }
.note .row { margin-left: auto; }
.flash { margin-bottom: var(--s-5); } .flash li { padding: var(--s-3) var(--s-4); border-radius: var(--r-m); background: var(--text); color: var(--ground); } .flash li + li { margin-top: var(--s-2); }
.empty { padding: var(--s-7) var(--s-5); max-width: 60ch; }
.empty h2 { margin-bottom: var(--s-2); } .empty p { margin-bottom: var(--s-4); }
/* next steps: what to do, in order. One row each; the first one that is not done carries the primary button. */
.next li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--s-1) var(--s-4); align-items: center; padding: var(--s-4) var(--s-5); border-top: 1px solid var(--line); }
.next li:first-child { border-top: 0; }
.next .n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-full); background: var(--fill-2); font-weight: 650; font-variant-numeric: tabular-nums; }
.next .done .n { background: var(--yes-text); color: var(--raised); }
.next h3 { font-size: var(--t-2); } .next p { grid-column: 2; color: var(--text-2); font-size: var(--t-1); max-width: 62ch; }
.next .btn, .next .go { grid-column: 3; grid-row: 1 / span 2; }
.next .btn { white-space: normal; text-align: center; line-height: 1.3; padding-top: var(--s-2); padding-bottom: var(--s-2); max-width: 100%; }
@container (max-width: 520px) { .next li { grid-template-columns: 28px minmax(0, 1fr); } .next .btn, .next .go { grid-column: 2; grid-row: auto; justify-self: start; margin-top: var(--s-2); } }
/* versus: the client's page beside the rival's, the reason the tool exists */
.versus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.versus > div { padding: var(--s-1) var(--s-5) var(--s-5); }
.versus > div + div { border-left: 1px solid var(--line); }
.pg { padding: var(--s-3) 0; border-top: 1px solid var(--line); }
.pg:first-of-type { border-top: 0; }
.pg-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); }
.pg-h a { font-weight: 550; text-decoration: none; overflow-wrap: anywhere; } .pg-h a:hover { text-decoration: underline; }
.pg .quote { margin-top: var(--s-2); }
/* diff: the current wording and the proposed wording */
.diff { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.diff > div { padding: var(--s-4); border-radius: var(--r-m); background: var(--fill); }
.diff > .new { background: color-mix(in srgb, var(--yes) 12%, transparent); }
.diff h3 { margin-bottom: var(--s-2); }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); padding: var(--s-3) var(--s-5); border-top: 1px solid var(--line); font-size: var(--t-1); }

/* ---------- forms ---------- */
label { display: block; margin-bottom: var(--s-1); font-weight: 550; }
input:not([type="checkbox"], [type="radio"], [type="file"], [type="submit"], [type="button"], [type="hidden"]), select, textarea { width: 100%; min-height: 40px; padding: 0 var(--s-3); border: 0; border-radius: var(--r-s); background: var(--fill); color: var(--text); font: inherit; transition: background-color var(--dur) var(--ease); }
textarea { padding: var(--s-2) var(--s-3); line-height: 1.5; min-height: 96px; resize: vertical; }
select { appearance: none; padding-right: var(--s-6); background-image: var(--chev); background-position: right var(--s-3) center; background-size: 10px 6px; background-repeat: no-repeat; }
input:hover, select:hover, textarea:hover { background-color: var(--fill-2); }
input::placeholder, textarea::placeholder { color: var(--text-2); }
input[type="file"] { font: inherit; min-height: 40px; padding: var(--s-2) 0; }
input, select, textarea { max-width: 100%; }   /* no control, however long its value or options, widens the page */
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; margin: 0; accent-color: var(--text); vertical-align: -2px; }
.field { max-width: 560px; } .field + .field { margin-top: var(--s-4); }
.field .hint { margin-top: var(--s-1); font-size: var(--t-1); color: var(--text-2); }
.field .error, .error { margin-top: var(--s-1); font-size: var(--t-1); color: var(--none-text); font-weight: 550; }
.check { display: flex; align-items: flex-start; gap: var(--s-2); font-weight: 400; } .check input { margin-top: var(--s-1); }
.tick { display: inline-flex; align-items: center; margin: 0; cursor: pointer; }   /* a box alone in a table cell: the label around it is the target */
.t.is-stacked td:has(> .tick) { align-items: center; }
fieldset { border: 0; padding: 0; margin: 0; } legend { padding: 0; margin-bottom: var(--s-2); font-weight: 550; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-top: var(--s-5); }
.actions .sub { max-width: 52ch; }
.drop { display: block; padding: var(--s-5); border-radius: var(--r-m); background: var(--fill); text-align: left; cursor: pointer; }
.drop.is-over { background: var(--wash); }
.drop:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }   /* the real file input is visually hidden: the area shows its focus */
.drop ul { margin-top: var(--s-2); }
details.more > summary { display: inline-flex; align-items: center; gap: var(--s-1); cursor: pointer; font-weight: 550; list-style: none; padding: var(--s-1) 0; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: "+"; display: inline-block; width: 12px; }
details.more[open] > summary::before { content: "\2212"; }
details.menu { position: relative; }
details.menu > summary { list-style: none; cursor: pointer; }
details.menu > summary::-webkit-details-marker { display: none; }
details.menu > div { position: absolute; z-index: 20; top: calc(100% + var(--s-1)); left: 0; min-width: 240px; padding: var(--s-1); background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--shadow-menu); }
.ph-actions details.menu > div, .card-h details.menu > div { left: auto; right: 0; }   /* a menu at the right edge opens leftward */
details.menu > div a { display: block; padding: var(--s-2) var(--s-3); border-radius: var(--r-s); text-decoration: none; } details.menu > div a:hover { background: var(--fill); }

/* ---------- narrower than the desktop layout ---------- */
/* Layout follows the page's own width (the sidebar may be open), not the window. */
@container main (max-width: 1080px) { .cols { grid-template-columns: minmax(0, 1fr); } }
@container main (max-width: 760px) { .cols.even { grid-template-columns: minmax(0, 1fr); } .ph-actions { width: 100%; } }
/* Inside a narrow card, table cells wrap rather than squeeze, and columns marked optional step aside. */
@container (max-width: 760px) { .t .res, .t th, .t .engine { white-space: normal; } .t td, .t th { padding-left: var(--s-2); padding-right: var(--s-2); } }
@container (max-width: 560px) { .t .opt { display: none; } }
/* the per-AI grid wraps its words before it scrolls, so half a screen shows every AI */
@container (max-width: 1100px) { .t.pin-first .res, .t.pin-first .engine { white-space: normal; } .t.pin-first th:first-child, .t.pin-first td:first-child { min-width: 200px; } }
/* The column that names a row never shrinks below a readable line; the table scrolls inside .t-wrap instead (2026-11-11).
   A short name (a platform, a brand) in a narrow side card needs no such floor, so the card keeps a real table. */
.t td:first-child:has(> a.id) { min-width: 24ch; }
@container (max-width: 520px) { .t td:first-child:has(> a.id) { min-width: 0; } .t td.num, .t th.num { white-space: nowrap; } }

/* Touch and anything narrower than a laptop: every control is at least 44px tall (WCAG 2.5.8 asks 24; Peace asks 44). */
@media (max-width: 1023px), (pointer: coarse) {
  .btn, button.btn, .btn-small, button.btn-small, .side nav a, .tabs a, .seg a, .seg button, details.more > summary, details.menu > summary,
  .sw-item, .sw-all, .skip-link, .back, .crumbs a, .crumbs .here, .go, .trail a, .pager a, details.menu > div a, .side-user { min-height: var(--tap); }
  .crumbs a, .crumbs .here, .back, .trail a, .pager a { display: inline-flex; align-items: center; padding-left: var(--s-2); padding-right: var(--s-2); }
  .icon-btn { width: var(--tap); height: var(--tap); }
  main input:not([type="checkbox"], [type="radio"], [type="file"]), main select, main textarea, .filters select, .filters input { font-size: var(--t-3); min-height: var(--tap); }
  main input[type="file"] { min-height: var(--tap); }
  /* a checkbox or radio is reached through its row: the label (or a cell holding only the box) is the 44px target */
  .check, label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { min-height: var(--tap); align-items: center; }
  label:has(> input[type="checkbox"]):not(.check), label:has(> input[type="radio"]):not(.check) { display: flex; gap: var(--s-2); }
  .check input { margin-top: 0; }
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }
  .tick { min-width: var(--tap); min-height: var(--tap); margin: calc(-1 * var(--s-3)) 0; }
  .t.is-stacked .tick { margin: 0; }
  /* a link inside a table cell that is not the row's own name (a result that opens one conversation) */
  .t td a:not(.id):not(.btn) { display: inline-flex; align-items: center; min-height: var(--tap); }
  .t td div:has(> a:not(.id)) + div:has(> a:not(.id)) { margin-top: 0; }
  /* a link that is a value on its own (a fact's value, a page's address) */
  .kv dd a, .pg-h a { display: inline-flex; align-items: center; min-height: var(--tap); }
  .pager .btn, .pager a, .seg a, .seg button { min-width: var(--tap); justify-content: center; }
}

@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  /* closed, the drawer is hidden as well as moved, so its links never take focus even before app.js marks it inert */
  .side { visibility: hidden; position: fixed; z-index: 40; inset: 0 auto 0 0; width: min(88vw, 320px); background: var(--ground); transform: translateX(-100%); transition: transform 200ms var(--ease), visibility 0s linear 200ms; box-shadow: var(--shadow-menu); }
  .side-collapsed .side { display: flex; }
  .app.menu-open .side { transform: none; visibility: visible; transition: transform 200ms var(--ease); }
  .side .side-close { display: inline-grid; }
  .topbar { padding: 0 var(--s-3); } .page { padding: var(--s-2) var(--s-4) var(--s-8); }
  .versus, .diff { grid-template-columns: minmax(0, 1fr); } .versus > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .card-h, .card-b { padding-left: var(--s-4); padding-right: var(--s-4); } .card-f, .pager { padding-left: var(--s-4); padding-right: var(--s-4); }
  .t th:first-child, .t td:first-child { padding-left: var(--s-4); } .t th:last-child, .t td:last-child { padding-right: var(--s-4); }
  .t.is-stacked tr { padding-left: var(--s-4); padding-right: var(--s-4); }
  .next li { grid-template-columns: 28px minmax(0, 1fr); padding: var(--s-4); } .next .btn, .next .go { grid-column: 2; grid-row: auto; justify-self: start; margin-top: var(--s-2); }
  .filters .row { max-width: 100%; }
}

/* Phone and small tablet: one column of everything. */
@media (max-width: 767px) {
  /* the tab strip is a two-column grid of equal targets instead of a ragged three-row tray */
  .tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .tabs a { justify-content: center; white-space: normal; text-align: center; line-height: 1.25; padding: var(--s-1) var(--s-2); }
  /* filters: two equal columns; the search box takes a whole row */
  .filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
  .filters > .seg, .filters > .row, .filters > nav, .filters label:has(input[type="search"]), .filters label:has(input[type="text"]) { grid-column: 1 / -1; }
  .filters label, .filters select, .filters input[type="search"], .filters input[type="text"] { width: 100%; min-width: 0; }
  .filters .seg { display: flex; width: 100%; } .filters .seg a { flex: 1; justify-content: center; }
  .seg a, .seg button { white-space: normal; text-align: center; line-height: 1.25; }
  .ph-actions { width: 100%; } .ph-actions .btn { flex: 1 1 auto; }
  .actions .btn { flex: 1 1 auto; }
  .btn, button.btn { white-space: normal; text-align: center; line-height: 1.3; padding-top: var(--s-2); padding-bottom: var(--s-2); max-width: 100%; }   /* a long label wraps instead of widening a phone page (checked at 320) */
  .figs { gap: var(--s-4) var(--s-4); }
  /* breadcrumbs keep the parent and the current page; the client and the list of clients are in the menu */
  .crumbs > :nth-last-child(n+4) { display: none; }
  .card-h { padding-top: var(--s-4); }
  .t.pin-first th:first-child, .t.pin-first td:first-child { position: static; min-width: 0; width: auto; box-shadow: none; }
  .kv { grid-template-columns: minmax(0, 1fr); gap: 0; } .kv dd { margin-bottom: var(--s-3); }
  .pager { justify-content: center; }
}

/* Reduced motion: nothing slides, fades or scrolls smoothly. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print { .side, .topbar, .tabs, .filters, .ph-actions, .btn { display: none !important; } .app { display: block; } body { background: var(--white); } .card { break-inside: avoid; } }