/* evaluator.css — laugh.so/evaluator.
   Tokens mirror benchmark-board.css so the two pages read as one site; kept in
   a separate file so a change to the benchmark dashboard cannot reflow this
   page. The result screen is deliberately bare: a number, the claim, a verdict.
   The brand gradient is used on the button only — the score itself is set in
   plain ink so the figure reads as a measurement rather than a graphic. */
:root {
  --paper:#fffdf7;
  --card:#fffefb;
  --card-2:#fbf8f2;
  --ink:#201c1a;
  --ink-2:#4a4340;
  --muted:#706863;
  --faint:#938a84;
  --line:#e2ddd6;
  --accent:#a92665;
  --prov:#8a6d1d;
  --prov-bg:#fdf7e5;
  --prov-line:#e6d8ad;
  --grad:linear-gradient(135deg,#f6b97a 0%,#f4a8b8 50%,#e86aa6 100%);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Source Serif 4",Charter,Georgia,ui-serif,serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --shadow-lift:0 8px 30px rgba(61,45,35,.07);

  /* Spacing scale. Every vertical gap on this page is one of these, so the
     rhythm is decided once rather than per element. --tight binds a label to
     the thing it labels, --group separates one idea from the next, --page is
     the outer frame. Nothing else is allowed. */
  --tight:8px;
  --close:16px;
  --group:40px;
  --page:64px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:#141210; --card:#1b1816; --card-2:#221e1b;
    --ink:#f5f1ec; --ink-2:#d6cfc9; --muted:#a49a94; --faint:#877d77;
    --line:#332e2b;
    --accent:#f2b2cf; --prov:#d8b45c; --prov-bg:#2a2314; --prov-line:#4d4227;
    --shadow-lift:0 8px 30px rgba(0,0,0,.45);
    --grad:linear-gradient(135deg,#f2a765 0%,#ef8fa6 50%,#df5f9c 100%);
  }
}
:root[data-theme="dark"] {
  --paper:#141210; --card:#1b1816; --card-2:#221e1b;
  --ink:#f5f1ec; --ink-2:#d6cfc9; --muted:#a49a94; --faint:#877d77;
  --line:#332e2b;
  --accent:#f2b2cf; --prov:#d8b45c; --prov-bg:#2a2314; --prov-line:#4d4227;
  --shadow-lift:0 8px 30px rgba(0,0,0,.45);
  --grad:linear-gradient(135deg,#f2a765 0%,#ef8fa6 50%,#df5f9c 100%);
}
:root[data-theme="light"] {
  --paper:#fffdf7; --card:#fffefb; --card-2:#fbf8f2;
  --ink:#201c1a; --ink-2:#4a4340; --muted:#706863; --faint:#938a84;
  --line:#e2ddd6;
  --accent:#a92665; --prov:#8a6d1d; --prov-bg:#fdf7e5; --prov-line:#e6d8ad;
  --shadow-lift:0 8px 30px rgba(61,45,35,.07);
  --grad:linear-gradient(135deg,#f6b97a 0%,#f4a8b8 50%,#e86aa6 100%);
}

* { box-sizing:border-box; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; }
.shell { width:min(680px, calc(100% - 36px)); margin:0 auto; }
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------------------------------------------------------- masthead ---- */
.masthead { border-bottom:1px solid var(--line); background:var(--paper); position:sticky; top:0; z-index:40; }
.masthead .shell { width:min(1340px, calc(100% - 36px)); min-height:58px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.wordmark { display:inline-flex; align-items:center; gap:9px; font-family:var(--serif); font-size:1.16rem; letter-spacing:-.01em; text-decoration:none; color:var(--ink); }
.wordmark .mark { width:20px; height:20px; border-radius:5px; display:block; }
.mast-nav { display:flex; align-items:center; gap:2px; flex-wrap:wrap; }
.mast-nav a { padding:6px 10px; border-radius:7px; text-decoration:none; color:var(--muted); font-size:.87rem; font-weight:550; }
.mast-nav a:hover { background:var(--card-2); color:var(--ink); }
.mast-nav a.current { color:var(--ink); font-weight:650; }
.mast-cta { background:var(--grad); color:#fff !important; font-weight:650 !important; }
.mast-cta:hover { opacity:.92; }
.theme-switch { display:inline-flex; align-items:center; cursor:pointer; margin-left:6px; }
.theme-switch input { position:absolute; opacity:0; width:0; height:0; }
.theme-switch .track { width:34px; height:19px; border-radius:999px; background:var(--line); position:relative; transition:background .18s; display:block; }
.theme-switch .knob { position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%; background:var(--paper); transition:transform .18s; display:block; }
.theme-switch input:checked + .track { background:var(--accent); }
.theme-switch input:checked + .track .knob { transform:translateX(15px); }

/* ------------------------------------------------------------- input ---- */
main { padding:var(--page) 0 calc(var(--page) + var(--group)); }

/* Heading structure lifted from /benchmark so the two pages read as one site:
   sticky masthead, then a left-aligned titleblock whose title-row carries the
   h1. Same serif, same regular weight, same clamp. */
.titleblock { padding:0 0 var(--group); }
.title-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
h1 {
  margin:0; font-family:var(--serif); font-weight:400;
  font-size:clamp(2.1rem, 4.2vw, 2.9rem); line-height:1.06; letter-spacing:-.02em;
  text-wrap:balance;
}
.title-row .bubble { width:40px; height:40px; border-radius:50%; display:block; flex:none; }
.composer {
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:6px 6px 12px; box-shadow:var(--shadow-lift);
}
.composer textarea {
  width:100%; border:none; background:transparent; color:var(--ink);
  font-family:var(--serif); font-size:1.18rem; line-height:1.5;
  padding:18px 16px 8px; resize:vertical; min-height:132px; outline:none;
}
.composer textarea::placeholder { color:var(--faint); }
.composer-foot { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:0 12px; }
/* Empty until it matters — either the free allowance is nearly gone or the
   character limit is close. Silent the rest of the time. */
.counter { font-size:.8rem; color:var(--faint); font-variant-numeric:tabular-nums; }
button.act {
  border:none; border-radius:10px; padding:11px 22px; font:inherit; font-weight:650;
  font-size:.95rem; cursor:pointer; background:var(--grad); color:#fff;
}
button.act:disabled { opacity:.45; cursor:not-allowed; }
button.ghost {
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  border-radius:10px; padding:9px 16px; font:inherit; font-weight:600; font-size:.88rem; cursor:pointer;
}
button.ghost:hover { background:var(--card-2); }
button:focus-visible, a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.err { margin:var(--close) 0 0; padding:11px 14px; border-radius:10px; font-size:.88rem;
       background:var(--prov-bg); border:1px solid var(--prov-line); color:var(--prov); }

/* ----------------------------------------------------------- working ---- */
.working { text-align:center; padding:var(--page) 0; }
/* One line, same 2px track and accent as the result ticker, so the wait and the
   answer are visibly the same object. The old row of 24 dots wrapped onto a
   second line at this width and read as broken. */
.loadbar {
  max-width:440px; margin:0 auto; height:2px; border-radius:2px;
  background:var(--line); overflow:hidden;
}
.loadbar span {
  display:block; height:100%; width:0; border-radius:2px; background:var(--accent);
}
.loadbar.run span { animation:fill 24s cubic-bezier(.08,.62,.2,1) forwards; }
/* Stops short of the end: the bar is a sign of life, not a real completion
   estimate, and running it to 100% before the answer arrives would lie. */
@keyframes fill { from { width:0; } to { width:93%; } }
@media (prefers-reduced-motion: reduce) {
  .loadbar.run span { animation:none; width:40%; }
}

/* ------------------------------------------------------------ result ---- */
.result { display:none; }
.result.show { display:block; text-align:center; animation:rise .5s cubic-bezier(.2,.7,.3,1) both; }
@keyframes rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) {
  .result.show { animation:none; }
  .dot { transition:none; }
}

.bignum {
  font-family:var(--serif); font-weight:600; letter-spacing:-.04em;
  font-size:clamp(5rem, 22vw, 10rem); line-height:.9;
  color:var(--ink); font-variant-numeric:tabular-nums;
}
.bigclaim { font-size:1.1rem; color:var(--ink-2); margin:var(--close) 0 0; }
/* Sits under the claim, quieter than it: the estimate's range is a qualifier on
   the big number, not a second headline. */
.bigrange { font-size:.85rem; color:var(--ink-3, var(--ink-2)); opacity:.75; margin:var(--close) 0 0; }

/* ---- the ticker ---- */
.meter { margin:var(--group) auto 0; max-width:440px; }
.meter .track {
  position:relative; height:2px; border-radius:2px; background:var(--line);
}
.meter .fill {
  position:absolute; left:0; top:0; height:100%; width:0; border-radius:2px;
  background:var(--accent);
  transition:width 1.15s cubic-bezier(.22,.72,.24,1);
}
/* A triangle pointing up at the track, not a circle sitting on it: a dot on a
   line reads as a slider handle and invites a drag that does nothing. */
.meter .pip {
  position:absolute; top:100%; left:0; margin:5px 0 0 -5px;
  width:0; height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-bottom:7px solid var(--accent);
  transition:left 1.15s cubic-bezier(.22,.72,.24,1);
}
.meter .ends {
  /* The triangle hangs 12px below the track, so the labels clear it by --tight. */
  display:flex; justify-content:space-between; margin-top:calc(12px + var(--tight));
  font-size:.7rem; color:var(--faint); font-variant-numeric:tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
  .meter .fill, .meter .pip { transition:none; }
}

/* Verdict and its reason are one unit: bound by --tight, separated from the
   ticker above and the button below by --group. */
.verdict { margin:var(--group) 0 0; }
.verdict-word { font-size:1.1rem; font-weight:700; color:var(--ink); margin:0; }
.verdict-why { font-size:.94rem; color:var(--muted); margin:var(--tight) 0 0; }
.actions { margin:var(--group) 0 0; }

/* ---- the explainer, collapsed by default ---- */
.method { margin:var(--group) auto 0; max-width:600px; text-align:left; }
.method summary {
  list-style:none; cursor:pointer; text-align:center; font-size:.8rem;
  color:var(--faint); text-decoration:underline; text-underline-offset:2px;
}
.method summary::-webkit-details-marker { display:none; }
.method summary:hover { color:var(--ink-2); }
.method summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
.method-body { margin:var(--close) 0 0; padding-top:var(--close); border-top:1px solid var(--line); }
.method-body h2 {
  font-family:var(--serif); font-size:1.06rem; letter-spacing:-.01em;
  margin:var(--group) 0 var(--tight); text-wrap:balance;
}
.method-body h2:first-child { margin-top:0; }
.method-body p { font-size:.92rem; color:var(--ink-2); margin:0 0 11px; }
.method-body b { font-weight:650; color:var(--ink); }
.method-body .stand-in {
  margin-top:16px; padding:10px 13px; border-radius:9px; font-size:.85rem;
  background:var(--prov-bg); border:1px solid var(--prov-line); color:var(--prov);
}

/* -------------------------------------------------------------- gate ---- */
.gate { display:none; text-align:center; }
.gate.show { display:block; }
.gate p { font-family:var(--serif); font-size:1.4rem; margin:0 0 var(--group); letter-spacing:-.015em; }
.gsign {
  display:inline-flex; align-items:center; gap:9px; border:1px solid var(--line);
  background:var(--card); color:var(--ink); border-radius:10px; padding:10px 18px;
  font:inherit; font-weight:600; font-size:.92rem; cursor:pointer;
}
.gsign:hover { background:var(--card-2); }
.gsign svg { width:17px; height:17px; }

@media (max-width:560px) {
  main { padding:var(--group) 0 var(--page); }
  .composer textarea { font-size:1.06rem; }
}