/* ============================================================================
   rag-demo.nodejavascript.com — the page.

   Dark, because a document is read for a while and a bright page is tiring, and
   because the answer panels are easier to pick out of a dark field than out of a
   white one. One accent colour, used for one thing at a time: what you are meant
   to look at next.

   Teal, not purple. The palette below is the same structure it always had — one
   very dark ground, three panel steps, one accent and one strong accent — with the
   hue moved from ~258 degrees to ~172. Every colour that was written by hand rather
   than through a variable was moved with it, and they are marked so they stay
   together: a purple left in one gradient is obvious the moment the page loads.

   The margins are copied from llm-demo on purpose: a 940px container, 20px of side
   inset at EVERY width, and the vertical rhythm on the container itself. Two sites
   by the same hand should not disagree about where the edge is.
   ========================================================================= */

:root {
  --container: 940px;
  --bg: #03090b;
  --bg-2: #061114;
  --panel: #08181c;
  --panel-2: #0c2126;
  --panel-3: #112d33;
  --ink: #e6f6f8;
  --ink-2: #b2d3d8;
  --muted: #7ba1a8;
  --line: #123037;
  --line-2: #1b434b;
  --accent: #5eead4;
  --accent-2: #14b8a6;
  --accent-soft: rgba(94, 234, 212, 0.14);
  --good: #34d399;
  --warn: #fbbf24;
  --bad: #fb7185;
  --radius: 16px;
  --radius-sm: 10px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(20, 184, 166, 0.16), transparent 60%),
    radial-gradient(900px 500px at 95% 0%, rgba(94, 234, 212, 0.09), transparent 55%),
    var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* The container. 940px and a 20px side inset at every width, matching llm-demo. */
.wrap { max-width: var(--container); margin: 0 auto; padding-inline: 20px; }

/*
 * The body's vertical rhythm, and it belongs here rather than on the hero.
 *
 * 🔴 MEASURED AGAINST llm-demo, WHICH IS WHY IT EXISTS. llm-demo puts 32px of padding on
 * `main`, so its heading sits **125px** below the top of the page; rag had no `main`
 * padding at all and its heading sat at **86px** — nearly 40px higher, which is why the
 * page read as cramped at the top even after the hero was matched. The 60px at the bottom
 * is the other half: it is what separates the last card from the footer, and it is why the
 * footer itself needs no top margin.
 */
main { padding-block: 32px 60px; }

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

.top {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(14px);
  background: rgba(3, 9, 11, 0.82);
  border-bottom: 1px solid var(--line);
}
.top-in {
  display: flex;
  align-items: center;
  gap: 14px;
  /* padding-BLOCK, not padding. These elements also carry `.wrap`, and writing
     `padding: 12px 0` here silently wiped the side inset — the whole page then
     sat flush against the screen edge on a phone. Setting only the block axis cannot
     clobber the axis it does not name. */
  /*
   * 🔴 THE HEADER IS FULL-BLEED, NOT CONTAINED. llm-demo's header carries its own 20px inset
   * and spans the viewport, so its brand sits **20px** from the edge while everything below
   * it is inset to the 940px container — measured at 1280px wide: brand at 20, body at 190.
   * rag had the header inside the container, so its brand sat at 190 and the sticky bar
   * looked like a card rather than a bar. `max-width: none` undoes the `.wrap` this element
   * also carries; it comes later in the file, so it wins.
   */
  max-width: none;
  padding: 12px 20px;
}
.brand { display: flex; align-items: center; gap: 11px; }
.brand svg { display: block; }
.brand-name { font-weight: 650; letter-spacing: -0.01em; line-height: 1.1; }
.brand-sub {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.top nav { margin-left: auto; display: flex; gap: 20px; font-size: 14px; }
.top nav a { color: var(--ink-2); }
@media (max-width: 620px) {
  .top nav { display: none; }
  .charts { grid-template-columns: 1fr; }
}

/* ---------- hero ---------- */

/* llm-demo's hero rhythm: 26px above, 34px below. It was 58/26, which pushed the
   first card most of a screen down. */
.hero { padding-block: 26px 34px; }
.hero h1 {
  font-size: clamp(34px, 6vw, 58px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 0 0 20px;
  font-weight: 680;
}
.hero p.lede {
  font-size: 18px;
  color: var(--ink-2);
  max-width: 62ch;
  margin: 0 0 22px;
}
.hero ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; max-width: 72ch; }
.hero li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-2); font-size: 15px; }
.hero li::before {
  content: "";
  flex: none;
  width: 7px; height: 7px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--warn);
}
.hero li b { color: var(--ink); font-weight: 600; }

/* ---------- steps ---------- */

.step {
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  /* llm-demo's card rhythm: bottom only. `18px 0` put a gap above the first card as well,
     which stacked onto the hero's own bottom padding and opened a hole under the heading. */
  margin: 0 0 22px;
  box-shadow: 0 22px 60px -40px rgba(20, 184, 166, 0.5);
}
.step-head { display: flex; align-items: center; gap: 13px; margin-bottom: 6px; }
.step-n {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-soft);
  border: 1px solid var(--line-2);
  color: var(--accent);
  font-size: 14px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.step-head h2 { font-size: 21px; margin: 0; letter-spacing: -0.02em; font-weight: 640; }
.step > p.hint { color: var(--muted); font-size: 14.5px; margin: 0 0 16px 43px; max-width: 74ch; }
@media (max-width: 620px) { .step > p.hint { margin-left: 0; } .step { padding: 18px; } }

/* ---------- inputs ---------- */

.paste-wrap { position: relative; }
textarea#paste {
  width: 100%;
  min-height: 210px;
  resize: vertical;
  background: #04100f;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 15px;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.62;
  outline: none;
  transition: border-color 0.15s;
}
textarea#paste:focus { border-color: var(--accent-2); }
textarea#paste.drop { border-color: var(--accent); background: #08201f; }
textarea#paste::placeholder { color: #4d7a7f; }

.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.row.tight { margin-top: 8px; gap: 8px; }
.grow { flex: 1 1 auto; }

button, .btn {
  font: inherit;
  font-size: 14.5px;
  font-weight: 560;
  color: var(--ink);
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 10px 15px;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s, transform 0.07s;
}
button:hover, .btn:hover { background: var(--panel-3); border-color: var(--accent-2); }
button:active { transform: translateY(1px); }
button[disabled] { opacity: 0.45; cursor: not-allowed; }
button.primary {
  /* Grey-teal, not the bright accent: white text needs a dark ground, and the accent
     is for things you read, not things you press. */
  background: linear-gradient(180deg, var(--accent-2), #0b7d72);
  border-color: #2dd4bf;
  color: #fff;
  box-shadow: 0 10px 30px -14px rgba(20, 184, 166, 0.9);
}
button.primary:hover { filter: brightness(1.08); }
button.ghost { background: transparent; }
button.danger { border-color: #4a2436; color: #ffb4c4; }
button.danger:hover { background: #2a1622; border-color: var(--bad); }

label.field { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--muted); }
input[type="text"], input[type="number"], input[type="search"] {
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: #04100f;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 9px 12px;
  outline: none;
  min-width: 130px;
}
input:focus { border-color: var(--accent-2); }
.year { width: 92px; min-width: 92px; }

/* ---------- stats ---------- */

.statline { font-size: 13px; color: var(--muted); margin: 10px 0 0; font-variant-numeric: tabular-nums; }
.statline b { color: var(--ink-2); font-weight: 600; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); gap: 10px; margin: 0 0 18px; }
.card {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 13px;
}
.card .k { font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted); }
.card .v { font-size: 25px; font-weight: 660; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 3px; }
.card .u { font-size: 12px; color: var(--muted); margin-top: 1px; }

.charts { display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; }
@media (max-width: 880px) { .charts { grid-template-columns: 1fr; } }
.chart-box {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 14px 10px;
}
.chart-box h3 { margin: 0 0 2px; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; }
.chart-box p { margin: 0 0 8px; font-size: 12.5px; color: var(--muted); }
.chart-box canvas { display: block; width: 100%; }

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

.answer-wrap { margin: 0 0 18px; }
.answer {
  background: linear-gradient(180deg, #0d2a30, #081a1e);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  padding: 18px 20px;
}
.answer .q { font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.answer .q b { color: var(--ink-2); }
.answer .prose { font-size: 17px; line-height: 1.72; white-space: pre-wrap; }
.answer .prose .cite {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 1px 6px;
  white-space: nowrap;
}
.answer.refused { border-left-color: var(--warn); }
.answer.refused .prose { color: var(--ink-2); font-style: italic; font-size: 16px; }

.timings { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--muted); margin-top: 12px; font-variant-numeric: tabular-nums; }
.timings span b { color: var(--ink-2); font-weight: 600; }

/* ---------- details ---------- */

.details { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 14px; }
.detail {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 14px;
}
.detail h4 { margin: 0 0 9px; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-size: 12.5px;
  background: var(--panel-3);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 3px 10px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.chip b { color: var(--ink); font-weight: 600; }
.chip.date { font-family: var(--mono); font-size: 12px; }
.chip.inferred { border-style: dashed; }
.chip.inferred::after { content: " (year worked out)"; color: var(--muted); font-size: 11px; }

.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.thumb { border-radius: 9px; overflow: hidden; border: 1px solid var(--line-2); background: #04100f; }
.thumb img { display: block; width: 100%; height: 84px; object-fit: cover; }
.thumb figcaption { font-size: 11px; color: var(--muted); padding: 5px 7px; }

.sources { margin-top: 14px; }
.sources summary { cursor: pointer; font-size: 13.5px; color: var(--ink-2); }
.sources ol { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 10px; }
.sources li { font-size: 13.5px; }
.sources .lbl { font-family: var(--mono); font-size: 12px; color: var(--accent); }
.sources .txt { color: var(--ink-2); white-space: pre-wrap; margin-top: 4px; max-height: 200px; overflow: auto; }
.meter { height: 4px; background: var(--panel-3); border-radius: 3px; margin-top: 6px; overflow: hidden; }
.meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); }

/* ---------- misc ---------- */

.warn-box {
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.3);
  color: #ffe4a3;
  border-radius: 10px;
  padding: 11px 13px;
  font-size: 13.5px;
  margin-top: 12px;
}
.err-box {
  background: rgba(251, 113, 133, 0.09);
  border: 1px solid rgba(251, 113, 133, 0.35);
  color: #ffc2cd;
  border-radius: 10px;
  padding: 11px 13px;
  font-size: 13.5px;
  margin-top: 12px;
}
.spinner {
  display: inline-block;
  width: 13px; height: 13px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: -2px;
  margin-right: 7px;
}
@keyframes spin { to { transform: rotate(360deg); } }

section.block { padding: 34px 0; }
section.block h2 { font-size: 25px; letter-spacing: -0.02em; margin: 0 0 14px; font-weight: 650; }
section.block p { color: var(--ink-2); max-width: 76ch; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 780px) { .two-col { grid-template-columns: 1fr; } }
.note {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
}
.note h3 { margin: 0 0 8px; font-size: 15px; }
.note ul { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 14.5px; }
.note li { margin: 4px 0; }

footer {
  border-top: 1px solid var(--line);
  /* No margin-top: llm-demo has none either, because `main`'s 60px bottom padding already
     does that work. Both together opened a 90px void above the border. */
  padding: 26px 20px 40px;
  /* Centred, like llm-demo's. It was left-aligned inside the container, which read as a
     stray paragraph rather than a footer. */
  text-align: center;
  color: var(--muted);
  font-size: 13.5px;
}
footer .foot-links { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-bottom: 10px; }

/* ---------- what the document does not say ---------- */

/*
 * Deliberately NOT styled like the answer above it. The answer is a solid panel with a
 * teal glow; this is a dashed outline on the page's own background, muted, and it is the
 * last thing in the block. If the two looked alike, a reader could not tell the document's
 * evidence from a count about the document's vocabulary — and telling those apart is the
 * whole reason this app exists.
 */
.gaps {
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-sm);
  background: transparent;
}
.gaps h3 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 620;
  letter-spacing: 0.01em;
  color: var(--ink-2);
}
.gaps-tag {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--muted);
}
.gaps p { margin: 0 0 10px; font-size: 14.5px; color: var(--ink-2); }
.gaps p:last-child { margin-bottom: 0; }
.gaps .term {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 6px;
}
.gaps .once-list { display: flex; flex-wrap: wrap; gap: 7px; }
.gaps .once {
  font-size: 12.5px;
  color: var(--ink-2);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
}
.gaps .once b { color: var(--ink); font-weight: 600; }
.gaps ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.gaps li { font-size: 14.5px; color: var(--ink-2); }

/* ---------- the floating notice ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 14px);
  z-index: 60;
  max-width: min(560px, calc(100vw - 40px));
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--panel-2);
  border: 1px solid var(--accent-2);
  color: var(--ink);
  font-size: 14px;
  box-shadow: 0 20px 50px -24px rgba(0, 0, 0, 0.9);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s, transform 0.22s, visibility 0.22s;
}
.toast.on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
}

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }