/*
  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; }
/* 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; } }