/* CHAI in the browser.  Page colours follow chai.viz.style (INK, MUTED, GRID, SURFACE); the plot's
   colours are a ColorBrewer sequential multi-hue scheme, chosen on the page (plot.js PALETTES). */
:root {
  --surface: #fcfbf8;
  --panel: #ffffff;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --muted: #898781;
  --grid: #e5e1d8;
  --axis: #c3c2b7;
  --accent: #c2571a;
  --accent-ink: #ffffff;
  --error: #b3261e;
  --error-bg: #fdecea;
  /* the banner: a cup of masala chai on oak (from feedback: the first dark brown was too dark, tan too
     pale); cream letters and text at 4.7:1 or more; a walnut on a dark page */
  --banner-1: #86593a;
  --banner-2: #8f623e;
  --banner-ink: #fff1d9;
  --banner-mark: #3a2214;
  --banner-dot: rgba(255, 220, 170, 0.07);
  --letter: #f6dfb2;
  --letter-shade: #1d0f07;
  --letter-light: #fffaf0;
  --cup-line: #2a160b;
  --cup-body: #f3ead9;
  --cup-shade: #d6c7ab;
  --cup-band: #c2571a;
  --cup-chai: #b5773d;
  --cup-foam: #e2b27a;
  --cup-saucer: #e7dcc6;
  --steam: #fff4e0;
  --cup-handle: var(--cup-shade);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #151412;
    --panel: #1e1c1a;
    --ink: #f1f0ea;
    --ink-2: #c9c7bf;
    --muted: #9a988f;
    --grid: #34322e;
    --axis: #56544d;
    --accent: #f08a4b;
    --accent-ink: #1a0d05;
    --error: #ff8a80;
    --error-bg: #3a1d1b;
    --banner-1: #5e3d25;
    --banner-2: #6b4629;
    --banner-ink: #fff1d9;
    --banner-mark: #e0763a;
    --banner-dot: rgba(255, 220, 170, 0.07);
    --letter: #f6dfb2;
    --letter-shade: #1d0f07;
    --letter-light: #fffaf0;
    --steam: #fff4e0;
    --cup-handle: var(--cup-shade);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --surface: #151412; --panel: #1e1c1a; --ink: #f1f0ea; --ink-2: #c9c7bf; --muted: #9a988f; --grid: #34322e;
  --axis: #56544d; --accent: #f08a4b; --accent-ink: #1a0d05; --error: #ff8a80; --error-bg: #3a1d1b;
  --banner-1: #5e3d25; --banner-2: #6b4629; --banner-ink: #fff1d9; --banner-mark: #e0763a;
  --banner-dot: rgba(255, 220, 170, 0.07); --letter: #f6dfb2; --letter-shade: #1d0f07; --letter-light: #fffaf0;
  --steam: #fff4e0; --cup-handle: var(--cup-shade); color-scheme: dark;
}

/* Archivo (OFL, variable in weight, vendored by `make web-vendor`, so no request leaves the site):
   headings heavy, part labels and buttons bold, all at normal width.  Body text, inputs, tables and every number stay in the system font. */
@font-face {
  font-family: "Archivo";
  src: url("vendor/archivo-5.3.0/archivo-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
/* Courier Prime (OFL, vendored the same way): the banner's subtitle, a typewriter face served with the
   page so every system shows the same one (a bare "monospace" is SF Mono, Consolas or DejaVu). */
@font-face {
  font-family: "Courier Prime";
  src: url("vendor/courier-prime-5.3.0/courier-prime-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
:root { --pixel: "Archivo", system-ui, sans-serif; }

* { box-sizing: border-box; border-radius: 0; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
code, pre, textarea { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.85rem; }
h2 { font: 800 26px/1.15 var(--pixel); margin: 0; }
h3 { font: 700 18px/1.2 var(--pixel); margin: 14px 0 6px; }
legend, .field-title, summary, .privacy strong, .palette {
  font-family: var(--pixel);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
}
.field-title { font-size: 15px; font-weight: 650; }
.privacy strong, .palette { font-size: 15px; }
.palette { font-weight: 600; }
legend label { font: inherit; color: var(--ink); display: inline-flex; align-items: center; }

/* ---- The banner ----
   Two bands of one background: CHAI and the cup stay at the top of the window; the
   subtitle band under them scrolls away beneath. Each band draws the gradient at the size of both
   together (--banner-h, set in app.js), the lower one shifted up by the upper one's height
   (--head-h), so the two meet with no seam. */
.banner, .banner-sub {
  background:
    radial-gradient(circle at 1px 1px, var(--banner-dot) 1px, transparent 1.5px) 0 0 / 14px 14px,
    linear-gradient(160deg, var(--banner-1), var(--banner-2)) 0 0 / 100% var(--banner-h, 100%) no-repeat,
    var(--banner-2);
  color: var(--letter);
  text-align: center;
}
.banner { padding: 16px 16px 12px; position: sticky; top: 0; z-index: 10; }
.banner-sub {
  padding: 0 16px 18px;
  background-position: 0 calc(-1 * var(--head-h, 0px)), 0 calc(-1 * var(--head-h, 0px));
}
.banner-art {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(8px, 1.8vw, 18px);
}
.wordmark { width: min(42vw, 218px); height: auto; display: block; }
.cup { width: min(15vw, 78px); height: auto; display: block; }
.tagline {
  margin: 0;
  font: 700 clamp(0.85rem, 2vw, 1.05rem)/1.3 "Courier Prime", "Courier New", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* The acronym's letters, marked on their lower part: dark brown on the oak, where the cup's orange is
   lost; orange on the dark page's walnut. */
.tagline .ini {
  background: linear-gradient(transparent 56%, var(--banner-mark) 56%, var(--banner-mark) 89%, transparent 89%);
  padding: 0 0.04em;
  margin-right: 0.03em;
}
.lede { margin: 2px auto 0; color: var(--banner-ink); font-size: 0.9rem; }
.px-face rect { fill: var(--letter); }
.px-shade rect { fill: var(--letter-shade); }
.px-light rect { fill: var(--letter-light); }
.cup-line { fill: var(--cup-line); }
.cup-body { fill: var(--cup-body); }
.cup-shade { fill: var(--cup-shade); }
.cup-handle { fill: var(--cup-handle); }
.cup-band { fill: var(--cup-band); }
.cup-chai { fill: var(--cup-chai); }
.cup-foam { fill: var(--cup-foam); }
.cup-saucer { fill: var(--cup-saucer); }
.steam rect { fill: var(--steam); }
/* The banner's cup is still; the small one beside the loading bar steams while the model loads. */
.steam { opacity: 0.7; }
.loading .steam { opacity: 0; animation: steam 3s steps(6) infinite; }
.loading .steam-1 { animation-delay: 1s; }
.loading .steam-2 { animation-delay: 2s; }
@keyframes steam {
  0% { opacity: 0; transform: translateY(2px); }
  30% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .loading .steam { animation: none; opacity: 0.7; }
}

/* ---- The notice under it ---- */
.notice { max-width: 1320px; margin: 0 auto; padding: 14px 16px 0; }
.privacy {
  margin: 0 0 6px;
  padding: 10px 14px;
  border-left: 4px solid var(--accent);
  background: var(--panel);
}
#status { font-size: 0.9rem; color: var(--ink-2); margin: 0; }
progress { width: min(420px, 100%); height: 8px; accent-color: var(--accent); }
.loading { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.loading .cup { width: 40px; }

/* ---- Inputs across the top, the answer below ---- */
main { max-width: 1320px; margin: 0 auto; padding: 16px 16px 24px; }
.inputs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.col > fieldset { margin: 0; }
.col > fieldset:last-of-type { flex: 1; }
/* The fission-track card grows its lengths box to the column's height. */
.col-aft > fieldset, #aft-fields { display: flex; flex-direction: column; }
#aft-fields { flex: 1; }
#lengths { flex: 1; min-height: 9em; }
.col-run > fieldset:last-of-type { flex: 0 0 auto; }
.col-run > fieldset:first-child { flex: 1; }
@media (max-width: 1100px) {
  .inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .col-run { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .col-run > fieldset:first-child { flex: none; }
}
@media (max-width: 700px) {
  .inputs { grid-template-columns: minmax(0, 1fr); }
}

fieldset {
  border: 1px solid var(--grid);
  background: var(--panel);
  padding: 10px 14px 14px;
  min-width: 0;
}
fieldset.plain { border: 0; padding: 0; margin: 0; background: none; }
fieldset:disabled { opacity: 0.5; }
legend { padding: 0 4px; }
label { display: block; font-size: 0.9rem; color: var(--ink-2); }
.grid2 { display: grid; gap: 8px 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
input, select, textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--axis);
  padding: 5px 8px;
  margin-top: 2px;
}
input[type="checkbox"], input[type="radio"] { width: auto; margin: 0 6px 0 0; accent-color: var(--accent); }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
input:disabled { opacity: 0.5; }
textarea { resize: vertical; margin-top: 6px; }
.invalid { border-color: var(--error) !important; outline: 2px solid var(--error); }
.choice { display: grid; gap: 4px 12px; grid-template-columns: auto minmax(0, 1fr); align-items: center; margin: 4px 0; }
.choice label { color: var(--ink); display: flex; align-items: center; }
div.choice[aria-labelledby], .choice.stack { grid-template-columns: minmax(0, 1fr); }
.choice.inline { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.choice.inline .field-title { margin: 0; }
.field-title { margin: 12px 0 0; }
.hint.kinetics { margin: 0 0 6px; }
.hint { font-size: 0.8rem; color: var(--muted); margin: 4px 0; max-width: 70ch; }
.file { font-size: 0.8rem; margin-top: 4px; }
.file input { border: 0; padding: 2px 0; background: none; }
#odds-row { margin-top: 8px; }

/* Boxes: one small grid per box, so they fit a narrow column. */
.box-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  gap: 4px 10px;
  align-items: end;
  padding: 8px 0;
  border-bottom: 1px solid var(--grid);
}
.box-row .pair, #present-day .pair { display: flex; align-items: center; gap: 4px; }
.box-row .pair input, #present-day .pair input { min-width: 0; }
.box-row .remove { grid-row: 1; grid-column: 3; align-self: start; }
.box-row label:nth-of-type(3), .box-row label:nth-of-type(4) { grid-row: 2; }
/* Cooling only, under the boxes. */
label.check { display: flex; align-items: center; color: var(--ink); margin-top: 12px; }
label.check + .hint { margin-top: 2px; }
/* Save and load the whole input, side by side. */
.input-file { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }

.run-box { display: flex; flex-direction: column; gap: 8px; }
#run { font-size: 22px; font-weight: 800; padding: 9px 18px; width: 100%; position: relative; overflow: hidden; isolation: isolate; }
/* Brewing: the button is the run's progress bar, solid orange filling a pale track left to right. */
#run.brewing { opacity: 1; background: color-mix(in srgb, var(--accent) 22%, var(--surface)); color: var(--ink); }
#run.brewing::before { content: attr(data-label); position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; background: var(--accent); color: var(--accent-ink);
  clip-path: inset(0 calc(100% - var(--fill, 0%)) 0 0); transition: clip-path 0.2s linear; }

.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
th { text-align: left; font-weight: 600; color: var(--ink-2); border-bottom: 1px solid var(--axis); padding: 4px 6px; white-space: nowrap; }
td { border-bottom: 1px solid var(--grid); padding: 3px 6px; font-variant-numeric: tabular-nums; }
td { white-space: nowrap; }
td.flag { color: var(--muted); font-size: 0.8rem; }
#table-note { margin-top: 4px; }


button {
  font: 600 15px/1.2 var(--pixel);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  padding: 6px 18px;
  cursor: pointer;
}
button:disabled { opacity: 0.5; cursor: default; }
input[type="file"]::file-selector-button {
  font: 600 13px var(--pixel);
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  padding: 2px 10px;
  margin-right: 8px;
  cursor: pointer;
}
progress { appearance: none; -webkit-appearance: none; border: 1px solid var(--axis); background: var(--surface); }
progress::-webkit-progress-bar { background: var(--surface); }
progress::-webkit-progress-value { background: var(--accent); }
progress::-moz-progress-bar { background: var(--accent); }
button.quiet { background: transparent; color: var(--accent); padding: 4px 12px; }
button.remove { background: transparent; color: var(--muted); border: 0; padding: 2px 8px; font: 1.1rem system-ui, sans-serif; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.error { background: var(--error-bg); color: var(--error); padding: 8px 12px; margin: 0; white-space: pre-wrap; }

/* ---- The answer ---- */
#result {
  margin-top: 24px;
  border: 1px solid var(--grid);
  background: var(--panel);
  padding: 14px 16px 16px;
}
.zoom { display: flex; align-items: center; color: var(--ink); white-space: nowrap; }
/* The span and colour controls sit in the plot's top row, beside the sample's name, when the plot is
   wide enough; narrower, they sit above it. */
.result-plot { position: relative; container-type: inline-size; }
.plot-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 16px; margin-bottom: 6px; }
@container (min-width: 600px) {
  .plot-tools { position: absolute; top: 2px; right: 12px; margin: 0; }
}
.result-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
#headline { margin: 6px 0 10px; }
.result-grid { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(280px, 1fr); gap: 16px 24px; align-items: start; }
@media (max-width: 900px) { .result-grid { grid-template-columns: minmax(0, 1fr); } }
.caution { color: var(--error); background: var(--error-bg); padding: 6px 10px; border-radius: 4px; margin: 6px 0 10px; }
#warnings-block h3 { color: var(--error); background: var(--error-bg); padding: 6px 10px; border-radius: 4px; }
#warnings { margin: 0; padding-left: 20px; font-size: 0.88rem; }
#warnings li { margin: 3px 0; }
details { margin: 12px 0 0; }
summary { cursor: pointer; font-weight: 600; }
pre { background: var(--surface); border: 1px solid var(--grid); padding: 10px; overflow-x: auto; }
#fit {
  margin-top: 20px;
  border: 1px solid var(--grid);
  background: var(--panel);
  padding: 14px 16px 16px;
}
.fit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.fit-grid.one { grid-template-columns: minmax(0, 1fr); }
.fit-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; }
.fit-head .choice { margin: 0; }
.plot .oneone { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 5 4; }
@media (max-width: 800px) { .fit-grid { grid-template-columns: minmax(0, 1fr); } }
#about { margin-top: 20px; }
#about ul { padding-left: 20px; font-size: 0.9rem; }
#about li { margin: 4px 0; }
#about p { font-size: 0.9rem; }
#about .refs { list-style: none; padding-left: 0; }
#about .refs li { padding-left: 1.5em; text-indent: -1.5em; }         /* hanging indent */
#about .refs a { color: var(--accent); overflow-wrap: anywhere; }
/* The way home on the left, the signature centred on the same row; stacked on a phone. */
.signature {
  max-width: 1320px; margin: 0 auto; padding: 0 16px 32px; color: var(--ink-2);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 16px;
}
.signature::before {
  content: ""; grid-column: 1 / -1; border-top: 1px solid var(--grid); margin-bottom: 12px;
}
.signature p { margin: 0; grid-column: 2; grid-row: 2; display: flex; align-items: center; gap: 8px; }
.signature a { color: var(--accent); display: inline-flex; }
.signature a:hover, .signature a:focus-visible { color: var(--ink); }
.signature .home { grid-column: 1; grid-row: 2; justify-self: start; text-decoration: none; }
.signature .home:hover, .signature .home:focus-visible { text-decoration: underline; }
@media (max-width: 520px) {
  .signature { grid-template-columns: 1fr; justify-items: center; row-gap: 6px; }
  .signature p, .signature .home { grid-column: 1; justify-self: center; }
  .signature .home { grid-row: 3; }
}

.palette { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted); }
.palette .group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* A palette's three shades (--p0 darkest, plot.js) in their roles, the same in both themes: the
   darkest is the median, the palest the 95% band. */
:root, #fit { --c0: var(--p0); --c1: var(--p1); --c2: var(--p2); }
.swatch {
  width: 22px; height: 22px; padding: 0; border: 1px solid var(--axis);
  /* flat, three stripes: the scheme's shades, darkest first */
  background: linear-gradient(90deg, var(--s0) 0 33.4%, var(--s1) 33.4% 66.7%, var(--s2) 66.7%);
  image-rendering: pixelated;
}
.swatch[aria-checked="true"] { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---- The plot: colours from the chosen family, --c0 the median, --c1 the 68% band, --c2 the 95% ---- */
.plot { width: 100%; min-height: 200px; }
.plot svg { display: block; width: 100%; height: auto; font-family: inherit; }
.plot .grid line { stroke: var(--grid); stroke-width: 0.6; }
.plot .tick { fill: var(--ink-2); font-size: 11px; }
.plot .legend-text { fill: var(--ink-2); font-size: 13.5px; }
.plot .label { fill: var(--ink-2); font-size: 12px; }
.plot .note { fill: var(--muted); font-size: 13px; }
.plot .readout { fill: var(--ink); font-size: 11px; font-variant-numeric: tabular-nums; }
.plot .band95 { fill: var(--c2); fill-opacity: 0.95; }
.plot .band68 { fill: var(--c1); fill-opacity: 0.9; }
.plot .draws path { fill: none; stroke: var(--c0); stroke-width: 0.5; stroke-opacity: 0.3; }
.plot .median { fill: none; stroke: var(--c0); stroke-width: 2.2; }
.plot line.median { stroke-width: 2.4; }
.plot .truth { fill: none; stroke: var(--pal-accent); stroke-width: 2; stroke-dasharray: 6 4; }
.plot line.truth { stroke-width: 2.2; }
.plot .box { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.plot .box { stroke-dasharray: 4 3; }
.plot .obs { fill: var(--ink); stroke: var(--panel); stroke-width: 1; }
.plot .obs.whisker { stroke: var(--ink); stroke-width: 1.6; fill: none; }
.plot .misfit { fill: none; stroke: var(--error); stroke-width: 2; }
.plot .obs-bar { fill: var(--muted); fill-opacity: 0.35; stroke: var(--muted); stroke-width: 0.8; }
.plot .blind { fill: url(#hatch); }
.plot .hatch { stroke: var(--ink-2); stroke-width: 1.2; stroke-opacity: 0.5; }
.plot .blind-edge { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 2 3; }
.plot .legend rect.blind { fill: url(#hatch-small); stroke: var(--ink-2); stroke-width: 0.6; }
.plot .halo { paint-order: stroke; stroke: var(--panel); stroke-width: 4px; stroke-linejoin: round; }
.plot .label { font-family: var(--pixel); font-weight: 600; font-size: 13px; }
.plot .oldest { stroke: var(--muted); stroke-width: 0.9; stroke-dasharray: 1.5 3; }
.plot .cross { stroke: var(--muted); stroke-width: 0.8; }
.plot .title { fill: var(--ink); font-family: var(--pixel); font-weight: 700; font-size: 14px; }