/* IdeaLens & ProseLens demo styles.
   Design rules: the verdict sits top-left where readers look first; numbers and graphics carry the message and words
   are labels, with explanations behind one disclosure. Type scale 14 / 16 / 18 / 20 / 26 / 34 px, nothing essential
   below 14px, reading text 18px. Text meets WCAG AA (4.5:1); borders that mark key content and chart marks meet 3:1
   (WCAG 1.4.11); --ai and --human differ in lightness so they stay distinct in grayscale and for red-green
   colorblindness. Dark mode follows Material's dark theme: a grey base, off-white text, desaturated colors. */
:root {
  color-scheme: light;
  --bg: #E2E7EE;
  --surface: #FFFFFF;
  --surface-2: #F3F5F8;
  --ink: #0F172A;
  --ink-2: #334155;
  --muted: #526076;
  --line: #D5DBE3;
  --card-line: #CBD2DC;
  --line-strong: #7D8799;
  --accent: #5B3CC4;
  --accent-soft: #ECE7FB;
  --ai: #C8203C;
  --ai-soft: #FCE8EB;
  --human: #1A4F9C;
  --human-soft: #E1EBF8;
  --mixed: #A35A00;
  --mixed-soft: #F6EAD6;
  --mistake: #CC4A06; /* squares and words for "mistaken for AI" */
  --ideas: #0B7A72; --ideas-soft: #D5F2EE; /* the two things checked (start page, map title): teal ideas, violet prose */
  --prose: #6A43D6; --prose-soft: #EFEAFD;
  --orb: #B3134F; /* the crystal ball by the prediction: cherry, apart from the ideas/prose colors */
  --ideas-lit: #8FE6DA; --prose-lit: #DCD0FF; --tile-mix: 100%;
  --ideas-glow: rgba(40, 200, 180, .5); --prose-glow: rgba(140, 100, 255, .45); /* glowing icons on the red/teal result tiles */
  --warn-soft: #FFF4DB;
  --warn-line: #D9A11F;
  --neutral: #868E9D;
  --on-color: #FFFFFF;
  --sq: color-mix(in srgb, var(--human) 20%, var(--surface));
  --grid-dot: .2;
  --bmix: 100%; /* strength of tone-colored borders; softer in dark mode */
  --shadow: none; /* frames are flat: a border, no shadow */
  --f-ui: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-read: "Newsreader", "Iowan Old Style", Georgia, serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #22262D; --surface: #2B3038; --surface-2: #343A43; --ink: #EEF1F4; --ink-2: #CDD3DA; --muted: #AEB6C1;
    --line: #3E444E; --card-line: #454C57; --line-strong: #7D8694; --accent: #B9A6F7; --accent-soft: #352F4F;
    --ai: #F0949B; --ai-soft: #4A3237; --human: #8DB6F2; --human-soft: #2B3A50; --mixed: #E0B36F; --mixed-soft: #4A402E;
    --mistake: #E0B36F; --warn-soft: #4A4130; --warn-line: #BF9A40;
    --ideas: #63D7C8; --ideas-soft: #1F403C; --prose: #BCA8F8; --prose-soft: #3B3552; --orb: #F47FA6; --tile-mix: 42%; --ideas-glow: rgba(99, 215, 200, .5); --prose-glow: rgba(188, 168, 248, .5);
    --neutral: #8B929D; --on-color: #1A1D22; --sq: color-mix(in srgb, var(--human) 28%, var(--surface)); --grid-dot: .22; --bmix: 60%;
    --shadow: none;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #22262D; --surface: #2B3038; --surface-2: #343A43; --ink: #EEF1F4; --ink-2: #CDD3DA; --muted: #AEB6C1;
  --line: #3E444E; --card-line: #454C57; --line-strong: #7D8694; --accent: #B9A6F7; --accent-soft: #352F4F;
  --ai: #F0949B; --ai-soft: #4A3237; --human: #8DB6F2; --human-soft: #2B3A50; --mixed: #E0B36F; --mixed-soft: #4A402E;
  --mistake: #E0B36F; --warn-soft: #4A4130; --warn-line: #BF9A40;
  --ideas: #63D7C8; --ideas-soft: #1F403C; --prose: #BCA8F8; --prose-soft: #3B3552; --orb: #F47FA6; --tile-mix: 42%; --ideas-glow: rgba(99, 215, 200, .5); --prose-glow: rgba(188, 168, 248, .5);
  --neutral: #8B929D; --on-color: #1A1D22; --sq: color-mix(in srgb, var(--human) 28%, var(--surface)); --grid-dot: .22; --bmix: 60%;
  --shadow: none;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 16px/1.55 var(--f-ui); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { margin: 0; }
button { font: inherit; color: inherit; }
code { font: .92em var(--f-mono); }
pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 15px/1.55 var(--f-mono); background: var(--surface-2); padding: 14px; border-radius: 6px; border: 1px solid var(--line); margin: 12px 0 0; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.nw { white-space: nowrap; }
.ai-c { color: var(--ai); } .human-c { color: var(--human); }
.muted { color: var(--muted); }
.hint { color: var(--ink-2); font-size: 16px; }

/* ---------- chrome ---------- */
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--surface); border-bottom: 1px solid var(--card-line); }
.topbar .wrap { display: flex; align-items: center; gap: 10px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; letter-spacing: -.01em; text-decoration: none; margin-right: auto; }
.brand small { font-weight: 500; color: var(--muted); font-size: 16px; }
.brand-mark { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; flex: none; }
.brand-mark::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--surface); }
.topbar nav { display: flex; align-items: center; gap: 10px; }
.wrap { max-width: 1100px; margin: 0 auto; padding-inline: 24px; }
main.wrap { padding-block: 28px 72px; display: grid; gap: 24px; min-height: 60vh; align-content: start; }

.btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border: 1.5px solid var(--line-strong); background: var(--surface); border-radius: 6px; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; }
.btn:hover { border-color: var(--ink); }
.btn:disabled { opacity: .55; cursor: default; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-color); }
.btn-primary:hover { border-color: var(--accent); filter: brightness(1.06); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { border-color: var(--line-strong); }
.btn svg { width: 17px; height: 17px; flex: none; }
.icon-btn { width: 42px; height: 42px; border-radius: 6px; border: 1.5px solid var(--line-strong); background: var(--surface); display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.icon-btn:hover { border-color: var(--ink); }
.icon-btn svg { width: 20px; height: 20px; }

.card { background: var(--surface); border: 1px solid var(--card-line); border-radius: 8px; padding: 32px; box-shadow: var(--shadow); min-width: 0; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.card h2 { font-size: 21px; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; }
.s-title { font-size: 24px; line-height: 1.2; font-weight: 800; letter-spacing: -.015em; }
.banner { padding: 12px 16px; border-radius: 6px; border: 1.5px solid var(--warn-line); background: var(--warn-soft); font-size: 15px; }
.banner.err { border-color: var(--ai); background: var(--ai-soft); }
.error { margin-top: 14px; padding: 12px 16px; border-radius: 6px; background: var(--ai-soft); border: 1.5px solid var(--ai); font-size: 15px; }
.error.limit { background: var(--warn-soft); border-color: var(--warn-line); color: var(--ink); font-size: 16px; line-height: 1.5; } /* not a mistake: a notice */
.error.limit a { color: var(--accent); font-weight: 700; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; } .error.limit a svg { width: 16px; height: 16px; }

/* ---------- start page: the task first, a three-step picture, options behind "Settings" ---------- */
body[data-page="compose"] .topbar .btn-primary { display: none; }
.c-hero { display: grid; gap: 18px; }
.c-hero h1 { font-size: clamp(23px, 2.85vw, 33px); line-height: 1.2; font-weight: 800; letter-spacing: -.02em; }
.c-hero h1 .q { display: block; font-size: 1.3em; line-height: 1.1; letter-spacing: -.025em; margin-bottom: .1em; text-wrap: balance; }
.ideas-c { color: var(--ideas); } .prose-c { color: var(--prose); }
/* "ideas" and "prose" highlighted in gold and violet, in the start page headline and the map title */
.hl { display: inline-flex; align-items: center; gap: .12em; padding: 0 .22em 0 .14em; border-radius: .3em; white-space: nowrap; }
.hl svg { width: .82em; height: .82em; flex: none; }
.hl.ideas { color: var(--ideas); background: var(--ideas-soft); }
.hl.prose { color: var(--prose); background: var(--prose-soft); }
.hl.ai { color: var(--ai); background: var(--ai-soft); } .hl.human { color: var(--human); background: var(--human-soft); } /* result headline */
.v-title .hl { padding: 0 .16em; }
.gw-ideas { color: var(--ideas); text-shadow: 0 0 .4em var(--ideas-glow); } .gw-prose { color: var(--prose); text-shadow: 0 0 .4em var(--prose-glow); } /* the result boxes' names */
.label { display: block; font-weight: 700; font-size: 16px; margin-bottom: 8px; }
.compose { display: grid; gap: 12px; }
.compose .label { font-size: 21px; font-weight: 800; color: var(--ink); margin: 0; }
textarea { display: block; width: 100%; min-height: 240px; resize: vertical; font: 17px/1.55 var(--f-read); color: var(--ink); background: var(--surface-2); padding: 14px 16px; border: 1.5px solid var(--line-strong); border-radius: 6px; }
textarea::placeholder { color: var(--muted); opacity: 1; }
textarea:focus { outline: 2.5px solid var(--accent); outline-offset: 0; border-color: transparent; }
.meter { display: flex; align-items: center; gap: 12px; }
.meter-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.meter-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.meter-bar.over i { background: var(--ai); }
.meter-n { font-size: 16px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.go { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-top: 4px; }
.btn.big { font-size: 17px; padding: 13px 28px; border-radius: 6px; min-height: 52px; }
.pw { display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 12px; border: 1.5px solid var(--line-strong); border-radius: 6px; background: var(--surface); color: var(--muted); cursor: text; }
.pw:focus-within { outline: 2.5px solid var(--accent); outline-offset: 1px; }
.pw svg { width: 18px; height: 18px; flex: none; }
.pw input[type="password"] { border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--ink); width: 150px; max-width: none; padding: 0; border-radius: 0; }
.pw input::placeholder { color: var(--muted); opacity: 1; }
.eta { display: inline-flex; align-items: center; gap: 7px; font-size: 17px; color: var(--ink); }
.eta svg { width: 20px; height: 20px; color: var(--ink-2); }
.example { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 700; color: var(--accent); text-decoration: none; }
.example:hover { text-decoration: underline; text-underline-offset: 3px; }
.example svg { width: 18px; height: 18px; }
.settings { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.settings > summary { list-style: none; display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; cursor: pointer; }
.settings > summary::-webkit-details-marker { display: none; }
.set-t { display: inline-flex; align-items: center; gap: 9px; font-size: 19px; font-weight: 800; color: var(--ink); }
.set-t svg { width: 24px; height: 24px; color: var(--ink); }
.set-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sc { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 4px; padding: 4px 12px 4px 9px; }
.sc svg { width: 17px; height: 17px; flex: none; color: var(--ink-2); }
.sc.warn { color: var(--ink); background: var(--warn-soft); border-color: var(--warn-line); }
.settings .chv { margin-left: auto; color: var(--ink-2); transition: transform .15s; }
.settings .chv svg { width: 18px; height: 18px; display: block; }
.settings[open] .chv { transform: rotate(90deg); }
.options { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 18px; }
/* below the form, apart from the task: two fold-outs about the project */
.about { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; margin-top: 12px; }
.fold { background: var(--surface); border: 1px solid var(--card-line); border-radius: 8px; }
.fold:hover { border-color: var(--line-strong); }
.fold > summary { list-style: none; display: flex; align-items: center; gap: 14px; padding: 14px 18px 14px 16px; cursor: pointer; border-radius: 8px; }
.fold > summary::-webkit-details-marker { display: none; }
.fold-ic { width: 48px; height: 48px; border-radius: 6px; flex: none; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); }
.fold-ic svg { width: 26px; height: 26px; }
.fold-t { font-size: 19px; font-weight: 800; line-height: 1.25; color: var(--ink); }
.fold .chv { margin-left: auto; color: var(--ink-2); transition: transform .15s; }
.fold .chv svg { width: 18px; height: 18px; display: block; }
.fold[open] .chv { transform: rotate(90deg); }
.soon { display: flex; align-items: center; gap: 9px; margin: 0 18px 18px 78px; font-size: 17px; font-weight: 700; color: var(--ink-2); }
.soon svg { width: 20px; height: 20px; flex: none; }
/* Learn more: a short model card (what each detector reads, what the numbers mean, where it applies, its limits) */
.mc { list-style: none; margin: 2px 18px 14px 16px; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.mc li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; align-items: start; font-size: 18px; line-height: 1.55; color: var(--ink); }
.mc b { font-weight: 800; }
.mc li > span:last-child { color: var(--ink-2); }
.mc li > span:last-child > b:first-child { display: block; margin-bottom: 4px; font-size: 19px; color: var(--ink); }
.fold[open]:has(.mc) { grid-column: 1 / -1; }
@media (min-width: 900px) { .mc { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 44px; row-gap: 26px; } }
.mc-ic { width: 46px; height: 46px; border-radius: 6px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); }
.mc-ic svg { width: 25px; height: 25px; }
.mc-ic.ideas-c { background: var(--ideas-soft); color: var(--ideas); } .mc-ic.prose-c { background: var(--prose-soft); color: var(--prose); }
.mc-ic.warn { background: var(--warn-soft); color: var(--mixed); }
.fmts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fmt { font-size: 15px; font-weight: 700; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; padding: 2px 10px; }
.mc + .soon { margin-left: 76px; }
.support { margin: 2px 18px 16px 16px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 10px; font-size: 17px; line-height: 1.5; color: var(--ink); }
.support p { margin: 0; }
.support a { color: var(--accent); font-weight: 700; overflow-wrap: anywhere; }
.support .todo { color: var(--muted); font-style: italic; }
/* the text box's label row, with the sample button, and the note under the button */
.lrow { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; }
.sample { display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; padding: 4px 0; cursor: pointer; font: 700 16px var(--f-ui); color: var(--accent); }
.sample:hover span { text-decoration: underline; text-underline-offset: 3px; }
.sample svg { width: 18px; height: 18px; }
.nb { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; color: var(--ink-2); }
.nb b { color: var(--ink); font-weight: 800; }
.nb svg { width: 18px; height: 18px; flex: none; color: var(--ink-2); }
/* The optional prediction (start page) and "Think this is wrong?" (result page): quiet, in the secondary style */
.predict { border: 0; margin: 2px 0 0; padding: 0; min-width: 0; display: grid; gap: 8px; }
.predict legend { padding: 0; margin-bottom: 8px; font-size: 16px; font-weight: 700; color: var(--ink); }
.predict legend .orb { display: inline-flex; vertical-align: -4px; margin-right: 7px; color: var(--orb); }
.predict legend .orb svg { width: 20px; height: 20px; }
.predict legend small { margin-left: 6px; font-size: 15px; font-weight: 500; color: var(--muted); }
.prows { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.prow { display: flex; align-items: center; gap: 6px; }
.plab { display: inline-flex; align-items: center; gap: 5px; min-width: 66px; font-size: 15px; font-weight: 800; }
.plab svg { width: 17px; height: 17px; flex: none; }
.pchip { padding: 5px 12px; border: 1px solid var(--card-line); border-radius: 4px; background: var(--surface); color: var(--ink-2); font: 600 15px/1.3 var(--f-ui); cursor: pointer; }
.pchip:hover { border-color: var(--line-strong); color: var(--ink); }
.pchip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pchip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.pchip.ideas[aria-pressed="true"] { background: var(--ideas-soft); border-color: var(--ideas); color: var(--ideas); }
.pchip.prose[aria-pressed="true"] { background: var(--prose-soft); border-color: var(--prose); color: var(--prose); }
.check.pown { padding: 0; font-size: 15px; color: var(--ink-2); }
.check.pown input { margin-top: 2px; width: 17px; height: 17px; }
.fb { display: grid; gap: 8px; }
.mypred { margin: 0; font-size: 15px; color: var(--ink-2); }
.mypred b { font-weight: 800; }
.fb-call { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding: 12px 14px; border-radius: 6px;
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.fb-call p { margin: 0; font-size: 17px; line-height: 1.45; color: var(--ink); }
.fb-call b { font-weight: 800; }
.fb-call .btn { padding: 7px 16px; font-size: 15px; border-color: var(--accent); color: var(--accent); background: var(--surface); }
.fb-call .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fb-form { width: 100%; display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); }
.fb-q { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.fb-how { display: flex; flex-wrap: wrap; gap: 6px; }
.fb-form input[type="url"], .fb-form textarea { width: 100%; min-height: 0; padding: 8px 10px; border: 1.5px solid var(--line-strong); border-radius: 6px; background: var(--surface); color: var(--ink); font: 15px/1.45 var(--f-ui); }
.fb-form textarea { min-height: 64px; resize: vertical; }
.fb-form .error { margin: 0; }
.fb-go { display: flex; gap: 8px; flex-wrap: wrap; } .fb-go .btn { padding: 7px 14px; font-size: 15px; }
.fb-priv { margin: 0; font-size: 15px; color: var(--muted); }
.fb-done { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: var(--human); }
.fb-done svg { width: 16px; height: 16px; }
/* The research-demo notice at the top of the start page: one quiet line that opens to the full notes */
.demo-note { margin: 0; border: 1px solid var(--line); border-radius: 6px; background: color-mix(in srgb, var(--surface) 55%, transparent);
  color: var(--ink-2); font-size: 16px; line-height: 1.45; }
.demo-note > summary { list-style: none; display: grid; grid-template-columns: 20px minmax(0, 1fr) 18px; gap: 10px; align-items: start;
  padding: 11px 14px; cursor: pointer; border-radius: 6px; }
.demo-note > summary::-webkit-details-marker { display: none; }
.demo-note > summary:hover { color: var(--ink); }
.demo-note > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.demo-note > summary > svg { width: 20px; height: 20px; margin-top: 2px; color: var(--muted); }
.demo-note > summary > span:not(.chv) { text-wrap: pretty; }
.demo-note .chv { margin-top: 3px; color: var(--ink-2); transition: transform .15s; }
.demo-note .chv svg { width: 18px; height: 18px; display: block; }
.demo-note[open] .chv { transform: rotate(90deg); }
.demo-note .imp { color: var(--ai); font-weight: 800; }
.demo-note ul { list-style: none; margin: 0 14px 14px; padding: 14px 0 0 30px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.demo-note li { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px; line-height: 1.5; }
.demo-note li > b { color: var(--ink); font-weight: 800; }
.demo-note li > span b { color: var(--ink); font-weight: 700; }
@media (max-width: 640px) { .demo-note li { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
@media (prefers-reduced-motion: reduce) { .demo-note .chv { transition: none; } }
/* who is behind it, on every page */
.foot { border-top: 1px solid var(--card-line); background: var(--surface); }
.foot .wrap { padding-block: 18px; font-size: 16px; color: var(--ink-2); }
.foot b { color: var(--ink); font-weight: 700; }
.options fieldset { background: var(--surface-2); border: 0; border-radius: 6px; padding: 14px 16px 16px; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset:disabled { opacity: .45; }
legend { display: flex; align-items: center; gap: 10px; float: left; width: 100%; font-weight: 800; font-size: 17px; color: var(--ink); padding: 0; margin-bottom: 10px; }
legend + * { clear: both; }
.lg-ic { width: 36px; height: 36px; border-radius: 6px; flex: none; display: grid; place-items: center; background: var(--surface); color: var(--ink-2); }
.lg-ic svg { width: 20px; height: 20px; }
.lg-ic.duo { width: 52px; display: flex; gap: 1px; justify-content: center; align-items: center; background: linear-gradient(90deg, var(--ideas-soft) 50%, var(--prose-soft) 50%); }
.lg-ic.duo svg { width: 18px; height: 18px; display: block; }
.check { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; cursor: pointer; font-size: 17px; color: var(--ink); clear: both; }
.check input { margin: 4px 0 0; flex: none; accent-color: var(--accent); width: 19px; height: 19px; }
.check small { display: block; color: var(--ink-2); font-size: 16px; line-height: 1.45; }
select, input[type="password"] { font: inherit; font-size: 16px; color: var(--ink); background: var(--surface); padding: 10px 12px; border: 1.5px solid var(--line-strong); border-radius: 6px; width: 100%; max-width: 340px; }
fieldset .hint { display: block; margin-top: 8px; }
.hint.warnnote { color: var(--ink); background: var(--warn-soft); border: 1px solid var(--warn-line); border-radius: 6px; padding: 6px 10px; }

/* ---------- progress page: steps light up as the run reaches them ---------- */
.card-head .muted { font-size: 15px; }
.job { width: 100%; max-width: 760px; justify-self: center; }
.job-h { font-size: clamp(24px, 2.85vw, 31px); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.job-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.jm { display: inline-flex; align-items: center; gap: 7px; font-size: 16px; font-weight: 700; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; padding: 5px 14px 5px 11px; font-variant-numeric: tabular-nums; }
.jm svg { width: 18px; height: 18px; color: var(--ink-2); flex: none; }
.jm:empty { display: none; }
.jsteps { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 8px; }
.js { display: grid; grid-template-columns: 52px minmax(0, 1fr) 26px; gap: 16px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 8px; border: 1.5px solid transparent; }
.js-ic { position: relative; width: 52px; height: 52px; border-radius: 6px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.js-ic > svg { width: 27px; height: 27px; }
.js-b b { display: block; font-size: 19px; line-height: 1.25; font-weight: 800; color: var(--ink); }
.js-b small { display: block; margin-top: 2px; font-size: 15px; color: var(--ink-2); }
.js-ok { display: none; position: absolute; right: -6px; bottom: -6px; width: 22px; height: 22px; border-radius: 50%; place-items: center; background: var(--accent); color: var(--on-color); border: 2px solid var(--surface); }
.js-ok svg { width: 12px; height: 12px; }
.js-spin { display: none; width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--accent-soft); border-top-color: var(--accent); animation: spin .9s linear infinite; }
.js[data-state="pending"] .js-b b { color: var(--ink-2); }
.js[data-state="active"], .js[data-state="done"] { --lit: var(--accent); --lit-soft: var(--accent-soft); }
.js.ideas { --lit2: var(--ideas); --lit2-soft: var(--ideas-soft); } .js.prose { --lit2: var(--prose); --lit2-soft: var(--prose-soft); }
.js[data-state="active"] .js-ic, .js[data-state="done"] .js-ic { background: var(--lit2-soft, var(--lit-soft)); color: var(--lit2, var(--lit)); }
.js[data-state="active"] { background: var(--surface-2); border-color: var(--accent); }
.js[data-state="active"] .js-spin { display: block; }
.js[data-state="done"] .js-ok { display: grid; }
.job-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 17px; color: var(--ink); }
.job-foot .btn { margin-left: auto; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- result: the verdict, then the plot (left) and the scores (right) ---------- */
.share { display: flex; gap: 8px; flex-wrap: wrap; }
.share .btn { padding: 7px 12px; font-size: 15px; }
/* The result card as one grid. On laptops: a header row (the verdict; the share buttons), then the plot on the left and
   one panel on the right that holds the Ideas and Prose scores and, under them, the rate control that sets their
   cut-offs. The panel stretches to end with the plot, whose frame lines up with its top. "How to read this" sits under
   the plot and the feedback bar runs along the bottom. Narrower screens stack the parts (see max-width: 900px). */
.res { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); column-gap: 40px; row-gap: 20px; align-items: start; }
.res > .v-head { grid-area: 1 / 1; }
.res > .share { grid-area: 1 / 2; justify-self: end; align-self: end; } /* above the scores */
.res > .vbody { grid-area: 2 / 2; align-self: start; display: grid; gap: 12px; } /* one detector only: its box */
.res > .map { grid-area: 2 / 1; margin-top: -0.909%; } /* the frame (4 of the map's 440 units below its top) lines up with the panel */
.res > .scores { grid-area: 2 / 2; align-self: stretch; }
.res > .howto { grid-area: 3 / 1 / 4 / -1; justify-self: start; margin: 0; } /* under the plot; opened, it has the full width */
.res > .fb { grid-area: 4 / 1 / 5 / -1; }
.res.single > .fb { grid-row: 3; }
/* a warning about the whole verdict (e.g. an unsupported format): under it, across both columns */
.res > .caveats { grid-area: 2 / 1 / 3 / -1; }
.res:has(> .caveats) > .map, .res:has(> .caveats) > .scores { grid-row: 3; }
.res:has(> .caveats) > .howto { grid-row: 4; }
.res:has(> .caveats) > .fb { grid-row: 5; }
.res > .fb > .fb-call { padding: 12px 16px; }
.scores > .vbody { display: grid; gap: 12px; }
.scores > .band { margin: 0; padding: 14px 16px; }
.scores > .band .band-l { gap: 8px; }
.scores > .band .band-t { font-size: 20px; }
.scores > .band .cost { font-size: 16px; line-height: 1.4; max-width: none; margin-top: 0; }
.scores > .band .pills { display: flex; width: 100%; padding: 4px; }
.scores > .band .pills button { flex: 1 1 0; min-height: 0; padding: 5px 4px; }
.scores > .band .pills .pl-n { font-size: 15px; }
.scores > .band .pills .pl-d { font-size: 13px; line-height: 1.2; }
@media (min-width: 901px) {
  .res > .scores { display: flex; flex-direction: column; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; }
  .scores > .vbody { flex: 1 1 auto; grid-template-rows: minmax(0, 1fr); gap: 0; } /* the two scores share any height the plot leaves */
  .scores .stats { gap: 0; }
  .scores .stat { background: none; border: 0; border-radius: 0; padding: 16px 18px; }
  .scores .stat + .stat, .scores > .band { border-top: 1px solid var(--line); }
  .scores > .band { background: none; border-radius: 0; padding: 14px 18px 16px; }
  .scores .stat-fpr { display: none; } /* the rate control is right below */
  .res > .howto > summary { padding: 4px 2px; background: none; border-color: transparent; font-size: 16px; } /* a plain link */
  .res > .howto > summary:hover { border-color: transparent; text-decoration: underline; }
  /* feedback: one slim bar (the prediction, the question, the button) instead of a tall box */
  .res > .fb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 24px; padding: 10px 12px 10px 18px; border-radius: 8px;
    background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
  .res > .fb > .fb-call { flex: 1 1 auto; padding: 0; background: none; border: 0; border-radius: 0; }
  .res > .fb > .fb-call p { font-size: 16px; }
  .res > .fb:has(> .fb-form) { display: grid; padding: 0; background: none; border: 0; } /* the open form, as before */
}
.res .stats { grid-auto-rows: 1fr; }
.res.single { grid-template-columns: minmax(0, 1fr) auto; }
.res.single > .vbody, .res.single > .fb, .res.single > .band { grid-column: 1 / -1; }
.res.single { grid-template-columns: minmax(0, 1fr); }
.v-title { font-size: clamp(24px, 2.47vw, 31px); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
.v-head { display: grid; gap: 4px; } /* "Verdict" over the headline, at the top of the column with the Ideas and Prose boxes */
.v-label { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.stats { display: grid; gap: 12px; }
.res.single .stats { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.stat { border: 1px solid var(--line); background: var(--surface-2); border-radius: 8px; padding: 14px 16px; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: center; }
.stat.ai { --tone: var(--ai); --tone-soft: var(--ai-soft); }
.stat.human { --tone: var(--human); --tone-soft: var(--human-soft); }
.stat.off { --tone: var(--line-strong); --tone-soft: var(--surface-2); }
.stat-ic { width: 56px; height: 56px; border-radius: 8px; background: color-mix(in srgb, var(--tone) var(--tile-mix), var(--bg)); color: var(--on-color); display: grid; place-items: center; }
.s-ideas .stat-ic, .s-ideas .ic-in { color: var(--ideas-lit); } .s-ideas .stat-ic svg, .s-ideas .ic-in svg { filter: drop-shadow(0 0 5px rgba(255, 224, 122, .75)); }
.s-prose .stat-ic, .s-prose .ic-in { color: var(--prose-lit); } .s-prose .stat-ic svg, .s-prose .ic-in svg { filter: drop-shadow(0 0 5px rgba(220, 208, 255, .7)); }
.stat-ic svg { width: 34px; height: 34px; }
.stat-b { display: grid; gap: 2px; min-width: 0; }
.stat-k { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.stat-name { font-size: 23px; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.ic-in { display: none; width: 34px; height: 34px; border-radius: 6px; flex: none; place-items: center; background: color-mix(in srgb, var(--tone) var(--tile-mix), var(--bg)); }
.ic-in svg { width: 21px; height: 21px; display: block; }
.det { font-size: 15px; font-weight: 700; color: var(--ink-2); border: 1.5px solid color-mix(in srgb, var(--ink) 28%, transparent); border-radius: 4px; padding: 1px 9px; white-space: nowrap; }
.stat-k .det { margin-left: auto; } /* the detector's name at the top right; the verdict comes first */
.stat-name .hl { font-size: .92em; }
.tag { margin-left: auto; font-size: 15px; font-weight: 700; padding: 2px 11px; border-radius: 4px; background: var(--tone); color: var(--on-color); white-space: nowrap; }
.stat-s { font-size: 20px; line-height: 1.3; font-weight: 600; color: var(--ink); margin-top: 4px; }
.stat-pa { margin: 2px 0 0; display: flex; align-items: baseline; gap: 8px; } .pa-k { font-size: 23px; font-weight: 700; color: var(--ink-2); letter-spacing: -.01em; }
.stat-th { margin: 0; font-size: 16px; color: var(--ink-2); font-variant-numeric: tabular-nums; } .stat-th b { color: var(--ink); font-weight: 800; }
.stat-v { font-size: 23px; font-weight: 800; letter-spacing: -.02em; color: var(--tone); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 16px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.stat-p b { color: var(--ink); font-weight: 800; font-size: 17px; }
.stat.off .stat-s { font-size: 17px; color: var(--ink-2); }
.caveats { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.caveats li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--ink); background: var(--warn-soft); border: 1px solid var(--warn-line); border-radius: 6px; padding: 9px 12px; }
.caveats svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--mixed); }

.map { margin: 0; }
.map > svg { width: 100%; height: auto; display: block; }
.m-grid { fill: var(--ink); fill-opacity: var(--grid-dot); }
.m-frame { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.m-flag { stroke: var(--ink); stroke-opacity: .7; stroke-width: 2; }
.m-dash { stroke: var(--ink); stroke-opacity: .35; stroke-width: 1.4; stroke-dasharray: 4 5; }
.m-pt { stroke: var(--surface); stroke-width: 3; }
.m-ring { fill: none; stroke: var(--ink); stroke-width: 2; stroke-opacity: .7; }
.m-this { font: 800 16px var(--f-ui); fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 5px; stroke-linejoin: round; }
.m-hit { cursor: pointer; } .m-hot { fill: transparent; }
.m-tip { display: none; pointer-events: none; }
.map > svg.tip-on .m-tip { display: inline; } .map > svg.tip-on .m-this { display: none; } .map > svg.tip-on .m-ring { stroke-width: 3; stroke-opacity: 1; }
@media (hover: hover) { .m-hit:hover ~ .m-tip { display: inline; } .m-hit:hover ~ .m-this { display: none; } .m-hit:hover .m-ring { stroke-width: 3; stroke-opacity: 1; } }
.m-tipbg { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.5; }
.m-tipl { font: 800 16px var(--f-ui); fill: var(--ink); } .m-tipk { font: 500 15px var(--f-ui); fill: var(--ink-2); }
.m-tipv { font: 800 16px var(--f-ui); font-variant-numeric: tabular-nums; } .m-tipv.ai { fill: var(--ai); } .m-tipv.human { fill: var(--human); }
.m-tipi.ideas { color: var(--ideas); } .m-tipi.prose { color: var(--prose); }
.mtitle { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font: 800 20px/1.1 var(--f-ui); color: var(--ink); letter-spacing: -.01em; }
.mtitle .hl { padding: .1em .28em .1em .18em; }
.axh { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; font: 600 17px/1.15 var(--f-ui); color: var(--muted); text-align: center; }
.axh svg { width: 28px; height: 28px; flex: none; }
.axh.y { flex-direction: column; align-items: flex-end; justify-content: center; text-align: right; gap: 4px; padding-right: 2px; } /* next to the frame */
.axh .nw { white-space: nowrap; }
.axh.sm { font-size: 15px; }
.axh.tight { gap: 3px; } .axh.tight svg { width: 20px; height: 20px; } .axh.sm svg { width: 16px; height: 16px; }
.axh.on.ai { color: var(--ai); } .axh.on.human { color: var(--human); } /* only the halves that describe this text carry color */
.axh .lab { border-radius: 6px; padding: 2px 8px; }
.axh.on { font-weight: 800; } /* the two halves that describe this text: a filled pill, like a selected button */
.axh.on.ai .lab { background: var(--ai); color: var(--on-color); } .axh.on.human .lab { background: var(--human); color: var(--on-color); }

/* the flag line and 1,000 squares */
.band { margin-top: 28px; padding: 22px 24px; background: var(--surface-2); border: 0; border-radius: 8px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 32px; align-items: center; }
.band-l { display: grid; gap: 14px; justify-items: start; }
.band-t { font-size: 24px; line-height: 1.2; font-weight: 800; letter-spacing: -.015em; }
.cost { font-size: 20px; line-height: 1.35; font-weight: 600; color: var(--ink); margin-top: -4px; max-width: 30ch; }
.cost b { color: var(--mistake); font-weight: 800; }
/* all three sentences share one cell and only the chosen one shows, so the box keeps the height of the longest and
   doesn't jump when the rate changes */
.cost { display: grid; } .cost-v { grid-area: 1 / 1; } .cost-v:not(.on) { visibility: hidden; }
.pills { display: inline-flex; gap: 4px; background: var(--surface-2); border: 1.5px solid var(--line-strong); padding: 5px; border-radius: 6px; }
.pills button { border: 0; background: none; min-height: 48px; padding: 8px 18px; border-radius: 6px; color: var(--ink-2); cursor: pointer; display: grid; align-content: center; justify-items: center; gap: 1px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.pills .pl-n { font: 700 17px var(--f-ui); white-space: nowrap; }
.pills .pl-d { font: 600 15px var(--f-ui); opacity: .75; text-align: center; }
.pills button:hover { color: var(--ink); }
.pills button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.pills .def { font-size: 15px; font-weight: 500; opacity: .85; }
.sqbox { display: grid; gap: 12px; }

.howto-list .hq { display: grid; gap: 14px; min-width: 0; }
.howto-list .sqbox { max-width: 520px; }
.stat-th .stat-fpr { font-size: 15px; color: var(--muted); white-space: nowrap; }
.squares svg { width: 100%; height: auto; display: block; }
.sq { fill: var(--sq); }
.sq-lit { fill: var(--mistake); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 15px; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend i { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 3px; }
.lg-sq { background: var(--sq); }
.lg-lit { background: var(--mistake); }

/* "How to read this" */
.howto { margin-top: 22px; }
.howto > summary { list-style: none; display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px 9px 12px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); border: 1.5px solid color-mix(in srgb, var(--accent) 40%, transparent); font-size: 17px; font-weight: 700; cursor: pointer; }
.howto > summary::-webkit-details-marker { display: none; }
.howto > summary:hover { border-color: var(--accent); }
.howto > summary svg { width: 21px; height: 21px; flex: none; }
.howto > summary .chv { width: 15px; height: 15px; transition: transform .15s; }
.howto[open] > summary .chv { transform: rotate(90deg); }
.howto-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; max-width: 780px; }
.howto-list li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; align-items: start; font-size: 17px; line-height: 1.5; color: var(--ink); }
.hi { width: 42px; height: 42px; border-radius: 6px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }
.hi svg { width: 22px; height: 22px; }
.hi.warn { color: var(--mistake); background: color-mix(in srgb, var(--mistake) 12%, var(--surface)); border-color: color-mix(in srgb, var(--mistake) 35%, transparent); }
.howto-list b { font-weight: 800; }
.howto-list b.h { color: var(--human); } .howto-list b.a { color: var(--ai); }

/* ---------- outline ---------- */
.o-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.o-lead { font-size: 17px; color: var(--ink-2); margin-top: 8px; }
.o-lead b { font-weight: 800; }
.seg { display: inline-grid; grid-auto-flow: column; background: var(--surface-2); border: 1.5px solid var(--line-strong); border-radius: 6px; padding: 4px; gap: 4px; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label { font-size: 15px; font-weight: 600; padding: 7px 16px; border-radius: 6px; cursor: pointer; color: var(--ink-2); }
.seg input:checked + label { background: var(--ink); color: var(--surface); }
.seg input:focus-visible + label { outline: 2.5px solid var(--accent); outline-offset: 2px; }
.notice { margin-top: 16px; display: flex; gap: 14px; align-items: flex-start; padding: 12px 16px; border-radius: 6px; background: var(--accent-soft); border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.notice-ic { color: var(--accent); flex: none; padding-top: 1px; } .notice-ic svg { width: 26px; height: 26px; display: block; }
.notice p { font-size: 17px; line-height: 1.45; color: var(--ink); max-width: 72ch; } .notice b { font-weight: 800; }
.addfeat { margin-top: 16px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.summary { margin-top: 20px; display: grid; gap: 10px; padding: 18px 20px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; }
.summary .lbl { font-size: 15px; font-weight: 700; color: var(--muted); }
.summary .doc-desc { font-family: var(--f-read); font-style: italic; font-size: 17px; line-height: 1.5; max-width: 70ch; }
.summary ul { margin: 0; padding-left: 22px; display: grid; gap: 4px; font-family: var(--f-read); font-size: 17px; color: var(--ink-2); max-width: 70ch; }

.strip-box { margin-top: 24px; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 6px 12px; }
.strip-lab { display: flex; flex-direction: column; justify-content: space-between; font-size: 15px; font-weight: 700; padding-block: 4px; }
.strip { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; height: 76px; }
.strip::after { content: ""; position: absolute; left: 0; right: 0; top: 38px; border-top: 1.5px solid var(--line-strong); pointer-events: none; }
.sbar { position: relative; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 3px; }
.sbar:hover, .sbar:focus-visible { background: var(--surface-2); }
.sbar i { position: absolute; left: 12%; right: 12%; border-radius: 2px; }
.sbar i.ai { bottom: 50%; background: var(--ai); }
.sbar i.human { top: 50%; background: var(--human); }
.sbar i.none { top: calc(50% - 2.5px); height: 5px; background: var(--neutral); }
.strip-axis { grid-column: 2; display: flex; justify-content: space-between; font-size: 15px; color: var(--ink-2); }

.traits { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; }
.traits .h3 { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 7px; border-radius: 4px; padding: 5px 12px 5px 6px; font-size: 15px; font-weight: 500; cursor: pointer; border: 1.5px solid transparent; }
.chip i { font: 800 13px var(--f-ui); font-style: normal; border-radius: 4px; padding: 2px 7px; color: var(--on-color); }
.chip.ai { background: var(--ai-soft); color: var(--ai); border-color: color-mix(in srgb, var(--ai) 35%, transparent); } .chip.ai i { background: var(--ai); }
.chip.human { background: var(--human-soft); color: var(--human); border-color: color-mix(in srgb, var(--human) 35%, transparent); } .chip.human i { background: var(--human); }
.chip .w { font-family: var(--f-mono); font-size: 15px; }
.chip:hover { border-color: currentColor; }

.fchart { display: grid; gap: 8px; margin-top: 4px; }
.frow { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 56px; gap: 12px; align-items: center; font-size: 15px; }
.frow .fname { text-align: right; color: var(--ink-2); background: none; border: 0; padding: 0; cursor: pointer; font-size: 15px; }
.frow .fname:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.fbar { position: relative; height: 16px; }
.fbar::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; border-left: 1.5px solid var(--line-strong); }
.fbar i { position: absolute; top: 2px; bottom: 2px; border-radius: 3px; }
.fbar i.ai { left: 50%; background: var(--ai); }
.fbar i.human { right: 50%; background: var(--human); }
.frow .fval { font: 15px var(--f-mono); color: var(--ink-2); }
.faxis { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 56px; gap: 12px; font-size: 15px; color: var(--muted); }
.faxis div { display: flex; justify-content: space-between; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 10px; }
.fbtn { border: 1.5px solid var(--line-strong); background: var(--surface); border-radius: 4px; padding: 7px 15px; font-size: 15px; font-weight: 600; cursor: pointer; color: var(--ink-2); }
.fbtn .c { margin-left: 6px; font-weight: 500; color: var(--muted); }
.fbtn[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.fbtn[aria-pressed="true"] .c { color: inherit; }

ol.ideas { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.idea { border-bottom: 1px solid var(--line); transition: background .3s; }
.idea.ai { box-shadow: inset 4px 0 0 var(--ai); }
.idea.human { box-shadow: inset 4px 0 0 var(--human); }
.idea.focus { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.irow { display: grid; grid-template-columns: 28px 18px minmax(0, 1fr) 20px; gap: 10px; width: 100%; text-align: left; background: none; border: 0; padding: 14px 12px 14px 16px; align-items: start; }
button.irow { cursor: pointer; }
button.irow:hover { background: var(--surface-2); }
.irow .n { font: 500 15px var(--f-mono); color: var(--muted); padding-top: 4px; }
.irow .mk { font-size: 15px; padding-top: 3px; }
.mk.ai { color: var(--ai); } .mk.human { color: var(--human); } .mk.none { color: var(--neutral); }
.irow .tx { font-family: var(--f-read); font-size: 17px; line-height: 1.5; color: var(--ink); }
.irow .tag-v { font: 600 13px var(--f-ui); color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; margin-left: 8px; vertical-align: 2px; }
.irow .chev { color: var(--ink-2); padding-top: 5px; transition: transform .15s; }
.irow .chev svg { width: 15px; height: 15px; }
.irow[aria-expanded="true"] .chev { transform: rotate(90deg); }
.idetail { padding: 0 16px 16px 84px; display: grid; gap: 10px; }
.idetail .line { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 15px; align-items: baseline; }
.idetail .role { font-weight: 700; color: var(--ink-2); }
.irow .rchip { display: block; width: fit-content; margin: 0 0 6px; padding: 2px 10px; border-radius: 4px; background: var(--ideas-soft); color: var(--ideas); font: 700 14px/1.5 var(--f-ui); letter-spacing: .01em; } /* Detailed: the role first */
.idetail .lean { font-weight: 700; }
.idetail .lean.ai { color: var(--ai); } .idetail .lean.human { color: var(--human); } .idetail .lean.none { color: var(--muted); font-weight: 500; }
.empty { color: var(--muted); padding: 18px 16px; }
.more { margin-top: 18px; display: grid; gap: 10px; }
.more > details > summary { cursor: pointer; font-weight: 600; font-size: 16px; color: var(--ink-2); width: fit-content; }
.gloss { width: 100%; border-collapse: collapse; font-size: 15px; margin-top: 10px; }
.gloss td, .gloss th { border-top: 1px solid var(--line); padding: 8px 10px 8px 0; text-align: left; vertical-align: top; }
.gloss .gw { font: 15px var(--f-mono); color: var(--muted); white-space: nowrap; }

/* ---------- text + details ---------- */
.t-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.t-head span { font-size: 15px; color: var(--muted); }
.story { font-family: var(--f-read); font-size: 17px; line-height: 1.65; max-width: 68ch; display: grid; gap: 12px; margin-top: 16px; }
.story.clipped { max-height: 280px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }
details.card > summary { cursor: pointer; font-weight: 700; font-size: 17px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::after { content: "+"; font: 400 21px var(--f-mono); color: var(--muted); }
details.card[open] > summary::after { content: "−"; }
details.card[open] > summary { margin-bottom: 16px; }
.kv-wrap { overflow-x: auto; }
table.kv { width: 100%; border-collapse: collapse; font-size: 15px; }
table.kv th { text-align: left; font-weight: 500; color: var(--muted); padding: 8px 16px 8px 0; vertical-align: top; width: 34%; border-top: 1px solid var(--line); }
table.kv td { padding: 8px 0; font-family: var(--f-mono); font-size: 15px; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
table.kv tr.group th { padding-top: 18px; color: var(--ink); font-weight: 800; font-size: 16px; border-top: 0; }

/* ---------- trait popover ---------- */
#pop { position: absolute; z-index: 40; width: min(440px, calc(100vw - 32px)); background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: 6px; box-shadow: 0 12px 40px rgba(0, 0, 0, .22); padding: 18px; display: grid; gap: 12px; font-size: 15px; }
#pop .ph { display: flex; justify-content: space-between; align-items: start; gap: 10px; }
#pop .pn { font-weight: 800; font-size: 17px; }
#pop .rates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#pop .rates div { background: var(--surface-2); border-radius: 6px; padding: 8px 10px; display: grid; }
#pop .rates b { font-size: 17px; font-weight: 800; }
#pop .rates span { font-size: 15px; color: var(--muted); }
#pop details { font-size: 15px; color: var(--ink-2); }
#pop summary { cursor: pointer; color: var(--ink-2); font-weight: 600; }
#pop details p { margin-top: 6px; line-height: 1.55; }
.side-tag { font-size: 15px; font-weight: 700; padding: 2px 10px; border-radius: 4px; justify-self: start; }
.side-tag.ai { color: var(--ai); background: var(--ai-soft); } .side-tag.human { color: var(--human); background: var(--human-soft); }
.x { border: 0; background: var(--surface-2); width: 32px; height: 32px; border-radius: 6px; cursor: pointer; font-size: 18px; line-height: 1; flex: none; color: var(--ink); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .res, .res.single, .band { grid-template-columns: minmax(0, 1fr); }
  .map { max-width: 560px; }
  .res { gap: 20px; }
  .res > .v-head, .res > .share, .res > .vbody, .res > .caveats, .res > .map, .res > .fb, .res > .howto, .scores > .vbody, .scores > .band { grid-area: auto; }
  .res > .scores { display: contents; } /* its scores and rate control take their own places below */
  /* narrow screens: the results first (verdict, then the Ideas and Prose boxes and any warning), then the plot, the rate
     control, "How to read this", sharing and feedback */
  .res > .v-head { order: 1; } .res > .vbody, .scores > .vbody { order: 2; } .res > .caveats { order: 3; }
  .res > .map { order: 4; justify-self: center; width: 100%; margin-top: 0; } .scores > .band { order: 5; margin: 0; } .res > .howto { order: 6; }
  .res > .share { order: 7; justify-self: start; margin-right: 0; } .res > .fb { order: 8; }
}
@media (max-width: 700px) {
  .about { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .traits { grid-template-columns: minmax(0, 1fr); }
  .idetail { padding-left: 16px; }
  .strip-box { grid-template-columns: minmax(0, 1fr); }
  .strip-lab { flex-direction: row; padding: 0; }
  .strip-axis { grid-column: 1; }
  .frow, .faxis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 52px; }
}
@media (max-width: 520px) {
  .c-hero .hl { white-space: normal; padding: 0 .16em 0 .1em; }
  .c-hero { text-align: center; } /* phones: the headline centered, a smaller subtitle in balanced lines under it */
  .c-hero h1 { font-size: 18px; } .c-hero h1 .q { font-size: 28px; margin-bottom: .25em; } .c-hero h1 .sub { display: block; line-height: 1.45; text-wrap: balance; }
  .js { grid-template-columns: 44px minmax(0, 1fr) 22px; gap: 12px; padding: 8px 10px 8px 8px; } .js-ic { width: 44px; height: 44px; border-radius: 6px; } .js-ic > svg { width: 24px; height: 24px; }
  .js-b b { font-size: 17px; } .js-b small { font-size: 15px; } .js-spin { width: 20px; height: 20px; } .job-foot { font-size: 16px; } .job-foot .btn { margin-left: 0; }
  .demo-note { font-size: 15px; } .demo-note > summary { padding: 10px 12px; gap: 8px; } .demo-note ul { margin: 0 12px 12px; padding-left: 0; }
  .about { margin-top: 0; } .fold > summary { padding: 12px 14px; gap: 12px; } .fold-ic { width: 42px; height: 42px; } .fold-ic svg { width: 23px; height: 23px; }
  .fold-t { font-size: 17px; } .soon { margin: 0 14px 16px 68px; font-size: 17px; }
  .settings > summary { display: grid; grid-template-columns: 1fr auto; } .set-chips { grid-column: 1 / -1; grid-row: 2; } .settings .chv { grid-column: 2; grid-row: 1; margin: 0; }
  .go > .pw, .go > .btn.big { flex: 1 1 100%; justify-content: center; } .pw input[type="password"] { width: 100%; } .example { margin-left: 0; }
  .wrap { padding-inline: 16px; }
  main.wrap { padding-block: 16px 48px; gap: 16px; }
  .brand { font-size: 16px; gap: 7px; }
  .topbar .btn-primary { white-space: nowrap; padding: 9px 12px; }
  .card { padding: 22px 18px; border-radius: 8px; }
  .stat { grid-template-columns: minmax(0, 1fr); padding: 14px 16px; }
  .stat-ic { display: none; } .ic-in { display: grid; }
  .stat-name { font-size: 20px; } .stat-k { gap: 8px 7px; } .det { font-size: 14px; padding: 1px 7px; } .tag { font-size: 14px; padding: 2px 9px; }
  .stat-s { font-size: 17px; } .stat-v, .pa-k { font-size: 20px; }
  .band { padding: 18px 16px; }
  .band-t { font-size: 22px; }
  .pills { display: flex; width: 100%; } .pills button { flex: 1 1 0; padding: 8px 6px; } .pills .pl-d { font-size: 14px; line-height: 1.2; }
  .pills .pl-n { font-size: 16px; }
  .irow { grid-template-columns: 24px 16px minmax(0, 1fr) 18px; gap: 8px; padding-left: 12px; }
}
@media (max-width: 380px) { .topbar .nav-label { display: none; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* mock mode: a small tag by the logo */
.mock-tag { margin-left: -2px; margin-right: auto; padding: 1px 8px; border-radius: 4px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mixed); background: var(--mixed-soft); border: 1px solid color-mix(in srgb, var(--mixed) 40%, transparent); }
.brand:has(+ .mock-tag) { margin-right: 0; }

/* ---------- every page: flat frames over a teal-and-purple background (the start page's headline gets a frame too) ---------- */
:root { --band-top-c: #3E9F92; --band-bot-c: #7A64C6; --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill='%233E9F92' d='M0 0H1440V40C1350 70 1170 70 1080 40S810 10 720 40 450 70 360 40 90 10 0 40Z'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --band-top-c: #1E5C55; --band-bot-c: #3D326F; --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill='%231E5C55' d='M0 0H1440V40C1350 70 1170 70 1080 40S810 10 720 40 450 70 360 40 90 10 0 40Z'/%3E%3C/svg%3E"); } }
:root[data-theme="dark"] { --band-top-c: #1E5C55; --band-bot-c: #3D326F; --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill='%231E5C55' d='M0 0H1440V40C1350 70 1170 70 1080 40S810 10 720 40 450 70 360 40 90 10 0 40Z'/%3E%3C/svg%3E"); }
body { overflow-x: clip; min-height: 100vh; display: flex; flex-direction: column; }
body > main.wrap { flex: 1 0 auto; width: 100%; } /* short pages (the waiting page) keep the footer at the bottom */
body[data-page] .topbar { position: absolute; left: 0; right: 0; background: transparent; border-bottom-color: transparent; }
body[data-page] main.wrap { padding-top: 84px; }
body[data-page] .topbar .brand small { color: var(--ink); opacity: .82; } /* readable on the teal */
.hero-zone { display: grid; gap: 18px; }
/* two halves behind the frames: teal (ideas) above, purple (prose) below, meeting in a wave behind the text box */
body[data-page] { --band-top: 540px;
  --wave-w: 1440px; --wave-h: 70px;
  background: var(--wave) left calc(var(--band-top) - 1px) / var(--wave-w) var(--wave-h) repeat-x,
    linear-gradient(var(--band-top-c), var(--band-top-c)) top / 100% var(--band-top) no-repeat,
    var(--band-bot-c); }
body[data-page="compose"] .c-hero { justify-items: center; text-align: center; gap: 12px; padding: 26px 24px 28px; background: var(--surface); border: 1px solid var(--card-line); border-radius: 8px; }
body[data-page="compose"] .c-hero h1 .q { font-size: clamp(28px, 3.42vw, 38px); }
body[data-page="compose"] .c-hero h1 { font-size: clamp(18px, 1.9vw, 22px); font-weight: 700; color: var(--ink-2); }
body[data-page="compose"] .demo-note { background: var(--surface); border-color: var(--card-line); }
body[data-page="compose"] .compose { position: relative; border-radius: 8px; }
@media (max-width: 520px) { body[data-page] main.wrap { padding-top: 72px; } body[data-page="compose"] { --band-top: 780px; } body[data-page] { --wave-w: 720px; --wave-h: 44px; } }

/* ---------- a plainer, less templated look: icons without tinted boxes, serif titles, a two-ring logo ---------- */
/* icons stand on their own, in their color, with no tinted square or glow behind them */
.fold-ic, .mc-ic, .lg-ic, .hi, .js-ic, .mc-ic.ideas-c, .mc-ic.prose-c, .mc-ic.warn, .lg-ic.duo, .hi.warn { background: none; border: 0; }
.js[data-state] .js-ic { background: none; }
.mc li { grid-template-columns: 30px minmax(0, 1fr); }
.mc-ic, .fold-ic { width: 30px; } .mc + .soon { margin-left: 60px; }
.stat-ic { background: none; } .s-ideas .stat-ic { color: var(--ideas); } .s-prose .stat-ic { color: var(--prose); }
.s-ideas .stat-ic svg, .s-prose .stat-ic svg, .s-ideas .ic-in svg, .s-prose .ic-in svg { filter: none; }
.gw-ideas, .gw-prose { text-shadow: none; }
/* serif titles (Newsreader, already used for the text box) */
.c-hero h1 .q, .v-title, .s-title, .band-t, .card h2, .compose .label, .fold-t, #job-h { font-family: var(--f-read); font-weight: 600; letter-spacing: -.01em; }
body[data-page="compose"] .c-hero h1 .q { font-size: clamp(33px, 3.8vw, 43px); }
/* the logo: two overlapping rings, teal for ideas and purple for prose */
.brand-mark { position: relative; width: 32px; height: 20px; border-radius: 0; background: none; display: block; }
.brand-mark::before, .brand-mark::after { content: ""; position: absolute; top: 0; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid; background: none; box-sizing: border-box; }
.brand-mark::before { left: 0; border-color: var(--ideas); } .brand-mark::after { left: 12px; border-color: var(--prose); }
/* the footer sits on the purple with light text, no white strip */
body[data-page] .foot { background: transparent; border-top: 0; }
body[data-page] .foot .wrap { color: rgba(255, 255, 255, .9); }
body[data-page] .foot b, body[data-page] .foot a { color: #fff; }
/* the text box: white with a border, not a grey box inside a white frame */
textarea { background: var(--surface); }
/* header controls on the teal: a plain theme icon, and a white "Try your own text" */
.topbar .icon-btn { background: transparent; border-color: transparent; }
.topbar .icon-btn:hover { background: color-mix(in srgb, var(--surface) 25%, transparent); border-color: transparent; }
.topbar .btn-primary { background: var(--surface); border-color: var(--surface); color: var(--accent); }
.topbar .btn-primary:hover { border-color: var(--surface); filter: none; background: color-mix(in srgb, var(--surface) 88%, var(--accent)); }
/* phones: a compact header */
.brand { white-space: nowrap; }
@media (max-width: 520px) {
  .topbar .wrap { gap: 6px; padding-inline: 14px; }
  .topbar nav { gap: 4px; }
  .topbar .icon-btn { width: 34px; height: 34px; }
  .topbar .btn-primary { padding: 7px 10px; font-size: 15px; }
}
@media (max-width: 420px) { .mock-tag { display: none; } .brand:has(+ .mock-tag) { margin-right: auto; } }
/* the result boxes' small icons on phones: no colored square either */
.ic-in { background: none; } .s-ideas .ic-in { color: var(--ideas); } .s-prose .ic-in { color: var(--prose); }
/* the result boxes: a narrow icon column now that the icons have no tile */
@media (min-width: 521px) { .stat { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; } }
@media (max-width: 900px) { .res > .vbody, .scores > .vbody { align-self: auto; } }
.v-mock { margin-left: 8px; vertical-align: 1px; } /* a mock result: a small tag by "Verdict" */
@media (max-width: 420px) { .v-mock { display: inline-block; } }
/* phones: smaller score boxes (the label and detector, then P(AI)); a tap opens the cut-off sentence, so the plot fits
   on the first screen */
.stat-more { display: none; }
@media (max-width: 520px) {
  .res .stats { grid-auto-rows: auto; gap: 8px; }
  .res .stat:not(.off) { position: relative; padding: 10px 12px; }
  .res .stat:not(.off) .stat-b { grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px; align-items: center; }
  .res .stat:not(.off) .stat-k { grid-column: 1 / -1; }
  .res .stat:not(.off) .ic-in { width: 24px; height: 24px; } .res .stat:not(.off) .ic-in svg { width: 19px; height: 19px; }
  .res .stat:not(.off) .stat-pa { grid-area: 2 / 1; margin: 0; }
  .res .stat:not(.off) .stat-th { grid-area: 3 / 1 / 4 / -1; margin-top: 4px; font-size: 15px; }
  .res .stat:not(.off):not(.open) .stat-th { display: none; }
  .res .stat-more { display: grid; grid-area: 2 / 2; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; background: none; color: var(--ink-2); cursor: pointer; }
  .res .stat-more::after { content: ""; position: absolute; inset: 0; } /* the whole box opens it */
  .res .stat-more svg { width: 16px; height: 16px; transform: rotate(90deg); transition: transform .15s; }
  .res .stat.open .stat-more svg { transform: rotate(-90deg); }
  .res .stat-more:focus-visible { outline: none; } .res .stat:has(.stat-more:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
}
/* fewer gaps, no tiny text: role labels inline with their idea, a wider text column, a slim "Run details" bar */
.irow .rchip { display: inline-block; margin: 0 8px 0 0; vertical-align: 2px; font-size: 15px; line-height: 1.4; }
.irow .tag-v { font-size: 14px; }
.res > .band .pills .pl-d { font-size: 14px; }
.story { max-width: 84ch; }
details.card { padding-block: 18px; }
details.card[open] { padding-bottom: 28px; }
/* the outline's marker column (▲/▼ when traits are rated) takes no width when empty; phones get tighter spacing */
.irow { grid-template-columns: 26px auto minmax(0, 1fr) 20px; }
@media (max-width: 520px) { .irow { gap: 8px; padding: 12px 8px 12px 10px; grid-template-columns: 20px auto minmax(0, 1fr) 16px; } }
/* the scores panel (the Ideas and Prose scores and the rate control): larger text, darker borders */
@media (min-width: 521px) { .res .stat-name, .res .pa-k { font-size: 25px; } }
.res .stat-th { font-size: 18px; }
.res .det { font-size: 16px; border-color: color-mix(in srgb, var(--ink) 55%, transparent); color: var(--ink); }
.scores > .band .band-t { font-size: 22px; }
.scores > .band .cost { font-size: 18px; }
.scores > .band .pills { border-color: color-mix(in srgb, var(--ink) 70%, transparent); }
.scores > .band .pills .pl-n { font-size: 17px; }
.scores > .band .pills .pl-d { font-size: 15px; }
.res .stat { border-color: color-mix(in srgb, var(--ink) 45%, transparent); }
@media (min-width: 901px) {
  .res > .scores { border: 1.5px solid color-mix(in srgb, var(--ink) 70%, transparent); }
  .scores .stat { border: 0; }
  .scores .stat + .stat, .scores > .band { border-top: 1.5px solid color-mix(in srgb, var(--ink) 45%, transparent); }
}
/* the header's "Try your own text": larger text */
.topbar .btn-primary { font-size: 17px; font-weight: 700; padding: 9px 18px; }
@media (max-width: 520px) { .topbar .btn-primary { font-size: 16px; padding: 7px 12px; } }
@media (min-width: 901px) { /* the larger panel text still ends level with the plot: tighter padding inside the panel */
  .scores .stat { padding: 11px 18px; }
  .scores > .band { padding: 11px 18px 13px; }
  .scores > .band .band-l { gap: 6px; }
  .scores > .band .pills button { padding: 5px 2px; }
  .scores > .band .pills .pl-d { font-size: 14px; white-space: nowrap; }
}