/* Cassette futurism, borrowed from dash and held to the same rule: the texture
   is structure, not costume. Where dash is amber because it is a public page
   glanced at, this is green, because DESIGN.md reserves green for the tools
   that get read for minutes at a time and this is one of those.

   Everything here is drawn in CSS. No bitmaps, so the grain scales and costs
   no request. */

:root {
  /* Warm near-black, six steps. Never pure black: phosphor sat on warm glass
     and #000 reads as a hole in the page rather than a screen.

     Every value below is measured against the ground with the CRT overlays
     applied, since a multiply blend over the whole page costs more contrast
     than any colour choice does. Do not darken one to make something look
     softer without re-measuring what sits on it. */
  --void: #0a0908;
  --bg: #0e0d0a;
  --panel: #1e1b16;
  --panel-2: #29251e;
  --bar: #201d16;
  --line: #414e41;
  --line-hot: #5c725c;

  --text: #ece5d8;
  --muted: #c6b9a3;
  --dim: #ab9c86;
  --faint: #9c8e7a;

  /* P1 green, the phosphor this is pretending to be. */
  --green: #6b9e78;
  --green-bright: #7db88c;
  --green-hot: #95cca2;
  --green-glow: rgba(107, 158, 120, 0.16);

  /* Amber is the instrument, not the data. Labels, brackets and warnings. */
  --amber: #d4b45a;
  --amber-hot: #ffb000;
  --terracotta: #c47055;

  --mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --track: 0.14em;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* One number for the reading column, so the bar and the content line up
     rather than the bar running edge to edge over a centred page. */
  --col: 56rem;

  /* The ask box sticks directly under the bar, so both read this rather than
     each carrying its own number and drifting a few pixels apart. */
  --barh: 2.9rem;
}

* { box-sizing: border-box; }

html {
  color-scheme: dark;
  scrollbar-color: var(--line-hot) var(--void);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 7rem;

  /* The structural grid. 32px so it lines up with the panel padding rhythm
     rather than cutting across it. */
  background-image:
    linear-gradient(rgba(107, 158, 120, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107, 158, 120, 0.028) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: center top;
}

/* --- CRT overlays ------------------------------------------------------- */

/* Both of these are multiply blends over the whole page, so they cost contrast
   everywhere rather than only where you can see them. Body text measured 15.5
   to 1 nominally and 3.9 to 1 under the pair of them at a page corner, which is
   below the floor for text a person actually reads. The values here are what is
   left after measuring rather than what looked good. */

/* Scanlines at 3px so they read as structure at any zoom. */
.crt {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  background: repeating-linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.08) 0px,
    rgba(0, 0, 0, 0.08) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: multiply;
}

/* Under the header rather than over it, because the corner is where this bites
   hardest and the corner is where the bar keeps its smallest text. */
.vignette {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 62%, rgba(0, 0, 0, 0.22) 100%);
}

/* --- header ------------------------------------------------------------- */

/* Chrome is a plane above the page, so it is a step lighter than the ground
   rather than a step darker. A bar painted below the body colour reads as a
   hole in the page and gives everything sat on it nowhere to go. */
.bar {
  height: var(--barh);
  background: var(--bar);
  border-bottom: 1px solid var(--line-hot);
  position: sticky;
  top: 0;
  z-index: 20;
}

/* The bar runs the full width and its contents do not, so the brand lines up
   with the first character of the page under it. */
.barin {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  height: 100%;
  max-width: var(--col);
  margin: 0 auto;
  padding: 0 1.5rem;
}
.landingbar .barin { max-width: 60rem; }

/* The mark is a lit key rather than a word with a character in front of it: a
   bordered tile carrying the caret, then the name. It is the only place on the
   site that gets to be a logo. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.brand .key {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--green);
  border-radius: 2px;
  background: var(--green-glow);
  box-shadow: inset 0 0 10px -4px var(--green);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
/* The cursor is drawn rather than typed. A block glyph renders at a different
   width in every monospace face and came out as a hairline in some, which is an
   empty box where the mark should be. */
.brand .cursor {
  display: block;
  width: 0.42rem;
  height: 0.85rem;
  background: var(--green-hot);
  box-shadow: 0 0 6px -1px var(--green-hot);
}
.brand:hover .key { background: var(--green); border-color: var(--green-hot); }
.brand:hover .cursor { background: var(--void); box-shadow: none; }

/* What page you are on, beside the mark and behind a rule, so the bar says
   something rather than only carrying controls. */
.where {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: var(--track);
  color: var(--amber);
}
.where::before {
  content: "";
  width: 1px;
  height: 0.95rem;
  background: var(--line-hot);
}

.spacer { flex: 1; }

.label {
  text-transform: uppercase;
  letter-spacing: var(--track);
  font-weight: 600;
  font-size: 0.68rem;
  color: var(--amber);
}
.faint { color: var(--faint); font-size: 0.82rem; }
.dim { color: var(--dim); }

/* The archive counts and the gauge label sit in the top corner, which is the
   hardest place on the page to read, so neither gets the faint step. */
.counts { font-size: 0.68rem; letter-spacing: 0.08em; color: var(--dim); text-transform: uppercase; }
.counts b { color: var(--text); font-weight: 700; }

.ghost {
  background: transparent;
  border: 1px solid var(--line-hot);
  color: var(--muted);
  font: inherit;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: var(--track);
  padding: 0.2rem 0.7rem;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.ghost:hover { border-color: var(--green); color: var(--green-bright); background: var(--green-glow); }

/* Seven pixels of colour is not a state, so the ring carries it too: hollow
   when the model is down and filled when it is up. */
.dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1px solid var(--terracotta);
  background: transparent;
  color: var(--terracotta);
}
.dot.up { background: var(--green); border-color: var(--green); color: var(--green); box-shadow: 0 0 7px var(--green); }

/* --- capacity meter, segmented like a level gauge ----------------------- */

.gauge { display: flex; align-items: center; gap: 0.5rem; }
.segs { display: flex; gap: 2px; }
.seg {
  width: 4px; height: 10px;
  background: var(--line-hot);
  border-radius: 1px;
  transition: background 0.35s var(--ease);
}
.seg.on { background: var(--green); }
.gauge.low .seg.on { background: var(--amber-hot); }
.gauge.out .seg.on { background: var(--terracotta); }
.gtext {
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--dim);
  text-transform: uppercase;
  min-width: 5.5rem;
}
.gauge.low .gtext { color: var(--amber-hot); }
.gauge.out .gtext { color: var(--terracotta); }

/* --- layout ------------------------------------------------------------- */

main { max-width: var(--col); margin: 0 auto; padding: 1.5rem 1.5rem 0; }

.intro { margin-bottom: 2.5rem; animation: rise 0.5s var(--ease) both; }
.introline {
  color: var(--muted);
  border-left: 2px solid var(--line-hot);
  padding-left: 1rem;
  margin: 0 0 1rem;
}
.ambient {
  font-size: 0.78rem;
  color: var(--faint);
  border-left: 2px solid var(--line);
  padding-left: 1rem;
  margin: 0;
}

/* --- the ask box, button inside the field ------------------------------- */

/* The field is the point of the page, so it sits above the helper text rather
   than under it, and follows down the page as answers scroll past. Sticking to
   the top rather than the bottom means it is in the same place whether the page
   is empty or holds an hour of conversation. */
.askwrap {
  position: sticky;
  top: var(--barh);
  z-index: 15;
  margin-bottom: 2rem;
  padding: 0.9rem 0;
  background: var(--bg);
  box-shadow: 0 12px 16px -12px var(--bg), 0 1px 0 0 var(--bg);
}

.ask {
  position: relative;
  display: block;
}

/* The bracket corners are the whole cassette-futurism trick: a frame that
   reads as an instrument bezel rather than a form control. */
.ask::before,
.ask::after {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  border: 1px solid var(--green);
  opacity: 0.6;
  transition: opacity 0.25s var(--ease);
  pointer-events: none;
}
.ask::before { top: -3px; left: -3px; border-right: 0; border-bottom: 0; }
.ask::after { bottom: -3px; right: -3px; border-left: 0; border-top: 0; }
.ask:focus-within::before,
.ask:focus-within::after { opacity: 1; }

.ask input {
  width: 100%;
  /* The right padding clears the button plus its inset, so text never runs
     under it. */
  padding: 1rem 8rem 1rem 1.1rem;
  background: var(--panel);
  border: 1px solid var(--line-hot);
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  border-radius: 2px;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.ask input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 1px var(--green-glow), 0 0 24px -8px var(--green);
}
.ask input::placeholder { color: var(--faint); }
.ask input:disabled { opacity: 0.55; }

/* Pinned to three edges rather than centred on one, so the gap around it is the
   same 6px on top, right and bottom. Centring vertically and insetting
   horizontally gives two different gaps, which is what made it look crooked. */
.ask button {
  position: absolute;
  top: 6px;
  right: 6px;
  bottom: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.3rem;
  background: var(--green);
  border: none;
  color: var(--void);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--track);
  text-indent: var(--track); /* balances the trailing letter-space */
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.2s var(--ease), opacity 0.2s var(--ease);
}
.ask button:hover:not(:disabled) { background: var(--green-hot); }
.ask button:disabled { opacity: 0.35; cursor: default; }

/* The choice at the end of an answer. Following on is the common next move, so
   it is the filled button, and starting over sits beside it rather than in a
   corner. */
.turnfoot {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin-top: 1.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}
.act {
  font: inherit;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: var(--track);
  padding: 0.5rem 1.1rem;
  border-radius: 2px;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--line-hot);
  color: var(--dim);
  transition: all 0.2s var(--ease);
}
.act:hover { border-color: var(--green); color: var(--green-bright); background: var(--green-glow); }
.act.primary {
  background: var(--green);
  border-color: var(--green);
  color: var(--void);
  font-weight: 700;
}
.act.primary:hover { background: var(--green-hot); border-color: var(--green-hot); color: var(--void); }

/* In follow-up mode the field is marked, so it is never a surprise that the
   next question is measured against the last answer. */
.ask.followon input { border-color: var(--green); }
.ask.followon::before, .ask.followon::after { opacity: 1; }

.hint { margin: 0.5rem 0 0; font-size: 0.76rem; }
.capnote { color: var(--amber-hot); }

/* --- a turn ------------------------------------------------------------- */

.turn { margin-bottom: 3rem; animation: rise 0.4s var(--ease) both; }

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.question {
  font-size: 1.08rem;
  color: var(--green-bright);
  border-left: 2px solid var(--green);
  padding-left: 1rem;
  margin-bottom: 1.2rem;
}
.question::before {
  content: "ASK";
  display: block;
  font-size: 0.62rem;
  letter-spacing: var(--track);
  color: var(--amber);
  margin-bottom: 0.15rem;
}

/* --- live status -------------------------------------------------------- */

.status {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 1rem 1.2rem;
  position: relative;
  overflow: hidden;
}

/* A sweep along the top edge, so the panel reads as working rather than as a
   static box with a spinner glued to it. */
.status::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 1px; width: 35%;
  background: linear-gradient(90deg, transparent, var(--green-hot), transparent);
  animation: sweep 1.8s linear infinite;
}
@keyframes sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(390%); }
}

.stephead { display: flex; align-items: center; gap: 0.6rem; }
.spinner {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: pulse 1.2s ease-in-out infinite;
  flex: none;
}
@keyframes pulse { 0%, 100% { opacity: 0.25; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1); } }

.steptext { color: var(--green-bright); flex: 1; }
.clock { color: var(--faint); font-size: 0.76rem; font-variant-numeric: tabular-nums; }

.why {
  color: var(--faint);
  font-size: 0.76rem;
  margin: 0.35rem 0 0 1.3rem;
  min-height: 1.2em;
  transition: opacity 0.3s var(--ease);
}

.trail { list-style: none; margin: 0.5rem 0 0; padding: 0 0 0 1.3rem; }
.trail li {
  color: var(--faint);
  font-size: 0.78rem;
  line-height: 1.6;
  animation: slidein 0.3s var(--ease) both;
}
.trail li::before { content: "› "; color: var(--green); }
@keyframes slidein {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: none; }
}

/* --- answer ------------------------------------------------------------- */

.answerwrap { animation: rise 0.45s var(--ease) both; }

.meta { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.chip {
  font-size: 0.68rem;
  color: var(--dim);
  background: var(--panel-2);
  border: 1px solid var(--line);
  padding: 0.1rem 0.5rem;
  border-radius: 2px;
}
.flag {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: var(--track);
  color: var(--amber-hot);
  border: 1px solid var(--amber-hot);
  padding: 0 0.4rem;
  border-radius: 2px;
}

.answer {
  background: var(--panel);
  border: 1px solid var(--line-hot);
  border-radius: 2px;
  padding: 0.5rem 1.5rem 1.3rem;
  position: relative;
}
/* A hairline of phosphor down the left edge, the way a lit panel would sit. */
.answer::before {
  content: "";
  position: absolute;
  left: -1px; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--green), transparent);
}

.prose > *:first-child { margin-top: 1rem; }
.prose h1, .prose h2, .prose h3 {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: var(--track);
  color: var(--amber);
  margin: 1.6rem 0 0.6rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--line);
}
.prose p { margin: 0.85rem 0; }
.prose ul, .prose ol { margin: 0.85rem 0; padding-left: 1.4rem; }
.prose li { margin: 0.3rem 0; }
.prose li::marker { color: var(--green); }
.prose strong { color: var(--green-hot); font-weight: 700; }
.prose code {
  background: var(--panel-2);
  padding: 0.1rem 0.35rem;
  border-radius: 2px;
  color: var(--green-bright);
  font-size: 0.92em;
}
.prose pre {
  background: var(--void);
  border: 1px solid var(--line);
  padding: 0.9rem;
  overflow-x: auto;
  border-radius: 2px;
}
.prose table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--line); padding: 0.35rem 0.7rem; text-align: left; }
.prose th { color: var(--amber); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; }
.prose a { color: var(--green-bright); }
.prose blockquote {
  border-left: 2px solid var(--line-hot);
  margin: 0.85rem 0;
  padding-left: 1rem;
  color: var(--muted);
}

a.cite {
  color: var(--green-hot);
  text-decoration: none;
  font-size: 0.8em;
  vertical-align: super;
  padding: 0 0.08em;
  transition: color 0.15s var(--ease);
}
a.cite:hover { color: var(--amber-hot); }

/* --- validation --------------------------------------------------------- */

section { margin-bottom: 1.8rem; }
.validation { margin-top: 1.8rem; }
.vhead { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }

/* A verification bar, filled by the share that held up. */
.vbar {
  flex: 1;
  min-width: 6rem;
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.vfill {
  display: block;
  height: 100%;
  background: var(--green);
  width: 0;
  transition: width 0.8s var(--ease);
}
.vbar.bad .vfill { background: var(--amber-hot); }
.score { font-size: 0.76rem; color: var(--green-bright); }
.score.bad { color: var(--amber-hot); }

.explain { margin: 0.6rem 0 0.9rem; max-width: 48rem; line-height: 1.65; }

.checks { list-style: none; padding: 0; margin: 0.7rem 0 0; }
.checks li {
  display: flex;
  gap: 0.8rem;
  align-items: baseline;
  padding: 0.55rem 0.8rem;
  border-left: 2px solid var(--green);
  background: var(--panel);
  margin-bottom: 3px;
  transition: background 0.2s var(--ease);
}
.checks li:hover { background: var(--panel-2); }
.checks li.bad { border-left-color: var(--terracotta); }
.verdict {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--green-bright);
  flex: 0 0 5.5rem;
}
.checks li.bad .verdict { color: var(--terracotta); }
.sentence { color: var(--muted); font-size: 0.84rem; }
.note { display: block; color: var(--faint); font-size: 0.74rem; font-style: italic; }

/* --- sources ------------------------------------------------------------ */

.sources { list-style: none; padding: 0; margin: 0.7rem 0 0; counter-reset: src; }
.sources li {
  counter-increment: src;
  margin-bottom: 0.8rem;
  padding-left: 2.2rem;
  position: relative;
}
.sources li::before {
  content: "[" counter(src) "]";
  position: absolute;
  left: 0;
  color: var(--green);
  font-size: 0.78rem;
}
.sources a { color: var(--green-bright); text-decoration: none; }
.sources a:hover { color: var(--green-hot); text-decoration: underline; }
.cached { color: var(--amber); }

details.passages { margin-top: 1.2rem; border-top: 1px solid var(--line); padding-top: 0.9rem; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "▸ "; color: var(--green); }
details[open] > summary::before { content: "▾ "; }
.passage {
  border-left: 2px solid var(--line-hot);
  padding: 0.5rem 0 0.5rem 0.9rem;
  margin: 0.9rem 0;
  scroll-margin-top: 5rem;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.passage:target { border-left-color: var(--green-hot); background: var(--panel-2); }
.phead { display: flex; gap: 0.6rem; align-items: baseline; }
.passage p { color: var(--muted); font-size: 0.82rem; margin: 0.35rem 0 0; white-space: pre-wrap; }

.error { color: var(--terracotta); }
.warn { color: var(--amber-hot); font-size: 0.8rem; margin: 0.4rem 0 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* --- the public landing ------------------------------------------------- */

.landing { max-width: 60rem; padding-bottom: 4rem; }

.hero { margin: 4rem 0 5rem; }
.eyebrow {
  display: block;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: var(--track);
  color: var(--amber);
  margin-bottom: 1.2rem;
}
.hero h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 1.4rem;
}
.hero h1 .accent { color: var(--green-bright); }
.lede { color: var(--muted); max-width: 44rem; margin: 0 0 2rem; font-size: 0.95rem; }
.ctas { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.ctas .act { text-decoration: none; display: inline-flex; align-items: center; }

/* Four cards, so two columns. auto-fit gave three at this width and left the
   fourth alone beside an empty half row. */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: 3rem;
}
.card { background: var(--panel); padding: 1.4rem 1.5rem; }
.card p { color: var(--muted); font-size: 0.84rem; margin: 0.5rem 0 0; }

.strip {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 2.5rem;
}
.stat { display: flex; flex-direction: column; }
.statv { font-size: 1.5rem; color: var(--green-bright); font-weight: 700; }
.statl {
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: var(--track);
  color: var(--dim);
}

.foot p { margin: 0; }
.foot a { color: var(--green-bright); }
a.ghost { text-decoration: none; display: inline-flex; align-items: center; }

/* --- narrow screens ------------------------------------------------------
   This gets read on a phone as much as a desktop. Three things drive the
   layout here: the header has five things in it and only two of them matter
   small, the validation rows are a two column table that has to become one,
   and the sticky ask box must not eat the viewport when a keyboard opens. */

@media (max-width: 46rem) {
  body { font-size: 13px; padding-bottom: 5rem; }

  .barin { gap: 0.7rem; padding: 0 1rem; }
  /* The archive count is context, not something to act on, so it goes first. */
  #archive { display: none; }
  .where { display: none; }
  .gtext { min-width: 0; }

  main { padding: 1.5rem 1rem 0; }

  .question { font-size: 1rem; }

  .ask input { padding: 0.9rem 6.5rem 0.9rem 0.9rem; font-size: 16px; }
  .ask button { padding: 0 0.9rem; font-size: 0.66rem; letter-spacing: 0.1em; }

  .answer { padding: 0.4rem 1rem 1.1rem; }
  .prose ul, .prose ol { padding-left: 1.2rem; }

  /* One column: a 5.5rem verdict beside wrapping text leaves about eight
     characters a line on a phone. */
  .checks li { flex-direction: column; gap: 0.2rem; padding: 0.6rem 0.7rem; }
  .verdict { flex: none; }
  .sentence { font-size: 0.86rem; }

  .turnfoot { flex-direction: column; align-items: stretch; }
  .act { text-align: center; justify-content: center; }

  .meta { gap: 0.4rem; }
  .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .sources li { padding-left: 1.9rem; }

  .grid { grid-template-columns: 1fr; }
  .hero { margin: 2.5rem 0 3rem; }
  .strip { gap: 1.5rem; }
  .passage { padding-left: 0.7rem; }
}

/* The header loses its label text before it wraps. */
@media (max-width: 30rem) {
  .gtext { display: none; }
  .barin { gap: 0.55rem; }
  .brand { font-size: 0.88rem; }
  .ask input { padding-right: 3.4rem; }
  /* An icon-sized button, since "search" does not fit beside a question. */
  .ask button { padding: 0 0.7rem; font-size: 0; }
  .ask button::after { content: "\2192"; font-size: 1.1rem; line-height: 1; }
  .statv { font-size: 1.25rem; }
}

/* A phone keyboard shrinks the viewport rather than scrolling the page, so a
   sticky element measured against vh ends up above the fold. */
@supports (height: 100dvh) {
  body { min-height: 100dvh; }
}

/* A calculated answer has no sources and no validation, so it is the number
   and the working and nothing else. */
.answer.calc { text-align: center; padding: 1.6rem 1.4rem; }
.answer.calc p:first-child strong {
  font-size: clamp(2rem, 7vw, 3rem);
  color: var(--green-hot);
  line-height: 1.1;
  display: block;
  margin-bottom: 0.6rem;
}
.answer.calc code { background: transparent; color: var(--faint); font-size: 0.86rem; }

/* --- verified links to what the answer named ---------------------------- */

.entlinks { list-style: none; padding: 0; margin: 0.7rem 0 0; }
.entlinks li {
  padding: 0.6rem 0.8rem;
  background: var(--panel);
  border-left: 2px solid var(--green-hot);
  margin-bottom: 3px;
}
.entname {
  color: var(--green-hot);
  text-decoration: none;
  font-weight: 700;
}
.entname:hover { text-decoration: underline; }
.entname::after { content: " \2197"; font-weight: 400; font-size: 0.85em; }


/* --- the try panel, an instrument list rather than a wrapping grid ------- */

.skills { margin: 1.8rem 0; }
.skhead { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.5rem; }
.skrule { flex: 1; height: 1px; background: var(--line); }

.skillrow { list-style: none; margin: 0; padding: 0; }
.skillrow li + li { border-top: 1px solid var(--line); }

.skill {
  display: grid;
  grid-template-columns: 7rem 1fr auto;
  align-items: baseline;
  gap: 1rem;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-left: 2px solid transparent;
  padding: 0.5rem 0.7rem;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.skill:hover, .skill:focus-visible {
  background: var(--panel);
  border-left-color: var(--green);
  outline: none;
}

.skname {
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: var(--track);
  color: var(--amber);
}
.skex { color: var(--dim); font-size: 0.84rem; }
.skill:hover .skex { color: var(--green-bright); }

.sktag {
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--faint);
  border: 1px solid var(--line-hot);
  padding: 0 0.35rem;
  border-radius: 2px;
}
.skill:hover .sktag { color: var(--green); border-color: var(--green); }

@media (max-width: 46rem) {
  .skill { grid-template-columns: 1fr auto; gap: 0.2rem 0.6rem; padding: 0.6rem 0.7rem; }
  .skname { grid-column: 1 / -1; }
}

/* --- waiting for the people ahead --------------------------------------- */

.status.waiting::after { animation-duration: 3.2s; opacity: 0.55; }
.status.waiting .spinner { background: var(--amber-hot); box-shadow: 0 0 8px var(--amber-hot); }
.status.waiting .steptext { color: var(--amber-hot); }

/* --- code --------------------------------------------------------------- */

/* A code answer is copied, not read, so the block is a thing with a lid rather
   than a paragraph in a box: what it is on the left, the button on the right. */
.codeblock {
  margin: 0.85rem 0;
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
  background: var(--void);
}
.codehead {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.6rem;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.codename {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--green-bright);
}
.codelang {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: var(--track);
  color: var(--faint);
}
.codehead .spacer { flex: 1; }

.copy {
  font: inherit;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: var(--track);
  color: var(--amber);
  background: transparent;
  border: 1px solid var(--line-hot);
  border-radius: 2px;
  padding: 0.15rem 0.55rem;
  cursor: pointer;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.copy:hover { color: var(--amber-hot); border-color: var(--amber); }
.copy.done { color: var(--green-hot); border-color: var(--green); }

.codeblock pre {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.codeblock pre code { background: transparent; padding: 0; color: var(--text); font-size: 0.82rem; }
/* Long lines scroll inside the block. Wrapping a command over three lines is
   how a pasted command ends up missing an argument. */
.codeblock pre { white-space: pre; }

.deps { list-style: none; padding: 0; margin: 0.7rem 0 0; }
.deps li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.35rem 0.7rem;
  border-left: 2px solid var(--green);
  background: var(--panel);
  margin-bottom: 2px;
}
.deps li.bad { border-left-color: var(--terracotta); }
.deps li.unknown { border-left-color: var(--line-hot); }
.depname { color: var(--text); font-size: 0.82rem; }
.depeco {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: var(--track);
  color: var(--faint);
}
.depstate { margin-left: auto; font-size: 0.72rem; color: var(--green); }
.deps li.bad .depstate { color: var(--terracotta); }
.deps li.unknown .depstate { color: var(--faint); }

@media (max-width: 620px) {
  .deps li { flex-wrap: wrap; gap: 0.3rem 0.6rem; }
  .depstate { margin-left: 0; width: 100%; }
}

/* Incognito. Amber because that is what amber is for on this site, the
   instrument rather than the data, and because a mode that is easy to forget
   you left on has to be impossible to miss. It lives in the bar rather than in
   the ask row, since it is a mode rather than a per question checkbox, and
   because every button in the ask row is absolutely positioned on top of the
   same corner.

   Four things carry it: the toggle fills, the bar takes an amber rule, the ask
   box goes amber with a note under it, and every answer asked in it is tagged
   and dashed. */
.incogbtn[aria-pressed="true"] {
  border-color: var(--amber-hot);
  color: var(--void);
  background: var(--amber-hot);
}
.incogbtn[aria-pressed="true"]:hover {
  border-color: var(--amber-hot);
  color: var(--void);
  background: var(--amber);
}

body.incognito .bar { border-bottom: 1px solid var(--amber-hot); }
body.incognito .askwrap {
  border-left: 2px dashed var(--amber-hot);
  padding-left: 0.7rem;
}
body.incognito .ask input { border-color: var(--amber); }
body.incognito .ask input:focus {
  border-color: var(--amber-hot);
  box-shadow: 0 0 0 1px rgba(255, 176, 0, 0.16), 0 0 24px -8px var(--amber-hot);
}
body.incognito .ask::before,
body.incognito .ask::after { border-color: var(--amber-hot); }
.incognote {
  font-size: 0.78rem;
  color: var(--dim);
  margin: 0.45rem 0 0;
  line-height: 1.5;
}
.incognote .label { margin-right: 0.5rem; color: var(--amber-hot); }

.turn.incog { border-left: 2px dashed var(--amber-hot); padding-left: 0.7rem; }

/* The thumb. It sits under the answer rather than in the meta row, because it
   is asked after reading rather than before. */
.rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line);
}
.thumb {
  background: transparent;
  border: 1px solid var(--line-hot);
  color: var(--muted);
  font: inherit;
  font-size: 0.7rem;
  padding: 0.15rem 0.6rem;
  border-radius: 2px;
  cursor: pointer;
}
.thumb:hover { border-color: var(--green); color: var(--green-bright); background: var(--green-glow); }
.thumb:disabled { opacity: 0.4; cursor: default; }
.thumb.down:hover { border-color: var(--amber-hot); color: var(--amber-hot); background: rgba(255, 176, 0, 0.08); }
.why-not { display: flex; flex-wrap: wrap; gap: 0.4rem; }
/* A display rule beats the hidden attribute, so the reasons would sit there
   before anyone said the answer was wrong. */
.why-not[hidden] { display: none; }

/* The history page. One row per question, opened to see the answer it gave. */
.hist { list-style: none; padding: 0; margin: 1rem 0 0; }
.hrow { border-bottom: 1px solid var(--line); padding: 0.7rem 0; }
.hrow summary { cursor: pointer; display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; }
.hrow summary::-webkit-details-marker { display: none; }
.hq { color: var(--text); flex: 1 1 20rem; }
.hwhen { color: var(--faint); font-size: 0.75rem; }
.verdict { white-space: nowrap; font-size: 0.62rem; text-transform: uppercase; letter-spacing: var(--track); padding: 0 0.4rem; border-radius: 2px; }
.verdict.up { color: var(--green-hot); border: 1px solid var(--green); }
.verdict.down { color: var(--amber-hot); border: 1px solid var(--amber-hot); }
.hbody { padding: 0.8rem 0 0.2rem; }
.hbody .answer { border-left: 1px solid var(--line); padding-left: 0.8rem; }
.hmeta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; align-items: center; }
.stamp { font-size: 0.68rem; color: var(--faint); font-family: var(--mono); }
.danger {
  background: transparent;
  border: 1px solid var(--terracotta);
  color: var(--terracotta);
  font: inherit;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: var(--track);
  padding: 0.2rem 0.7rem;
  border-radius: 2px;
  cursor: pointer;
}
.danger:hover { background: rgba(196, 112, 85, 0.12); }
.filters { display: flex; gap: 0.5rem; margin-top: 0.8rem; flex-wrap: wrap; align-items: center; }
.filters a { color: var(--dim); text-decoration: none; font-size: 0.7rem; text-transform: uppercase; letter-spacing: var(--track); border: 1px solid var(--line); padding: 0.15rem 0.6rem; border-radius: 2px; }
.filters a.on { color: var(--green-bright); border-color: var(--green); }