/* Proof Rack - a lab bench: pale sage enamel, glass, a walnut rack and five reagent colours, one per flaw. */
:root {
  --bg: #eaf0ec; --bg-2: #dfe7e2; --card: #fbfcfa; --ink: #16242a; --ink-2: #44565b; --line: #c5d1cc; --accent: #17676a; --accent-ink: #ffffff;
  --wood: #8f5f36; --wood-2: #6b4425; --glass: #9fb4b6; --glass-bg: rgba(255, 255, 255, 0.75);
  --f-none: #23704f; --f-phantom: #6a3aa6; --f-strawman: #8f5b08; --f-cherry-pick: #a82f55; --f-thin-test: #2a5c9e; --f-ink: #ffffff;
  --warn-bg: #fbecd6; --warn-ink: #6b4200; --info-bg: #e3edf0; --info-ink: #24444c; --fix-bg: #f8dddd; --fix-ink: #7a1d1d;
  --v-walk: #a82f55; --v-ask: #8f5b08; --v-back: #23704f; --v-needs: #56656a;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0e1416; --bg-2: #141d20; --card: #172125; --ink: #e2ebe8; --ink-2: #a7b7b3; --line: #2e3d41; --accent: #62c2c0; --accent-ink: #0b1517;
  --wood: #a8784c; --wood-2: #7b5431; --glass: #5d7377; --glass-bg: rgba(255, 255, 255, 0.05);
  --f-none: #7fd3aa; --f-phantom: #c7a8f2; --f-strawman: #efbd60; --f-cherry-pick: #f29bb7; --f-thin-test: #95baf2; --f-ink: #0e1719;
  --warn-bg: #3a2c12; --warn-ink: #f4d39a; --info-bg: #1b2c31; --info-ink: #bfd6dc; --fix-bg: #3d1c1c; --fix-ink: #f5c0c0;
  --v-walk: #f29bb7; --v-ask: #efbd60; --v-back: #7fd3aa; --v-needs: #b4c2c0;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 16px/1.55 var(--sans); overflow-x: hidden; }
a { color: var(--accent); }
.hidden { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.small { font-size: 0.88rem; } .muted { color: var(--ink-2); } .mono { font-family: var(--mono); }

.bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 16px; background: var(--card); border-bottom: 1px solid var(--line); }
.back { font-size: 0.9rem; text-decoration: none; color: var(--ink-2); }
.brand { display: flex; align-items: center; gap: 8px; font-family: var(--serif); font-size: 1.15rem; }
.logo { width: 28px; height: 28px; }
.lg-wood { fill: var(--wood); } .lg-glass { fill: none; stroke: var(--glass); stroke-width: 1.6; } .lg-liq { fill: var(--accent); }
.session { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 999px; padding: 6px 14px; font: 600 0.88rem var(--sans); cursor: pointer; text-decoration: none; }
.pill:hover { border-color: var(--accent); }
.pill.solid { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.pill.ghost { cursor: default; }
.pill.tiny { padding: 3px 10px; font-size: 0.8rem; }
.pill.big { padding: 10px 22px; font-size: 1rem; }
.pill:disabled { opacity: 0.55; cursor: not-allowed; }

main { max-width: 1180px; margin: 0 auto; padding: 0 16px 40px; }
.hero { padding: 26px 0 8px; }
.kicker { font-size: 0.86rem; color: var(--ink-2); border-left: 3px solid var(--accent); padding-left: 10px; max-width: 860px; margin: 0 0 12px; }
h1 { font-family: var(--serif); font-size: clamp(1.7rem, 4.4vw, 2.7rem); line-height: 1.12; margin: 0 0 12px; max-width: 900px; overflow-wrap: break-word; }
h2, h3 { font-family: var(--serif); overflow-wrap: break-word; }
.lede { max-width: 820px; margin: 0 0 14px; }
.samples { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip { border: 1px dashed var(--accent); background: transparent; color: var(--ink); border-radius: 8px; padding: 5px 12px; font: 0.86rem var(--sans); cursor: pointer; }
.chip.on { background: var(--accent); color: var(--accent-ink); border-style: solid; }

.layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; margin-top: 16px; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin-top: 16px; min-width: 0; }
.layout .panel { margin-top: 0; }
.ph { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 1.25rem; }
.step-no { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--accent); color: var(--ink); font: 700 0.9rem var(--mono); flex: none; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lbl { display: block; font-weight: 600; font-size: 0.9rem; margin: 8px 0 4px; }
input[type=text], textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); padding: 8px 10px; font: 0.95rem var(--sans); }
textarea { resize: vertical; line-height: 1.5; }
input:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.drop { border: 1px dashed var(--line); border-radius: 8px; padding: 8px 10px; margin-top: 8px; }
.drop.over { border-color: var(--accent); background: var(--bg-2); }
.filelbl { color: var(--accent); cursor: pointer; text-decoration: underline; }
.flags, .recon, .plain, .hist, .steps { list-style: none; padding: 0; margin: 10px 0 0; }
.flags li, .recon li { padding: 6px 10px; border-radius: 8px; margin-bottom: 6px; font-size: 0.88rem; }
.flags li.lv-fix { background: var(--fix-bg); color: var(--fix-ink); }
.flags li.lv-warn, .recon li.warn { background: var(--warn-bg); color: var(--warn-ink); }
.flags li.lv-info, .recon li.info { background: var(--info-bg); color: var(--info-ink); }
.recon li.none, .plain li.none, .claims li.none, .hist li.none { color: var(--ink-2); font-size: 0.9rem; }
.lv { font: 700 0.72rem var(--mono); text-transform: uppercase; letter-spacing: 0.04em; margin-right: 8px; }

/* The rack */
.rk-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 10px; }
.rk-kick { font: 700 0.72rem var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); }
.rk-name { font-family: var(--serif); font-size: 1.15rem; overflow-wrap: anywhere; }
.rk-count { font-size: 0.85rem; color: var(--ink-2); margin-left: auto; }
.rk-bench { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 6px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px 10px 0 0; padding: 10px 8px 0; }
.rk-scale { position: relative; height: 196px; }
.rk-tick { position: absolute; right: 2px; font: 600 0.7rem/1.1 var(--sans); color: var(--ink-2); text-align: right; max-width: 90px; }
.tk-short { display: none; }
.rk-row { position: relative; display: flex; gap: 10px; align-items: flex-end; height: 196px; overflow-x: auto; overflow-y: hidden; padding: 0 4px; }
.rk-line { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--line); pointer-events: none; }
.rk-rail { position: absolute; left: 0; right: 0; height: 8px; background: var(--wood); opacity: 0.9; border-radius: 2px; pointer-events: none; }
.rk-empty { margin: auto; color: var(--ink-2); font-size: 0.92rem; text-align: center; }
.rk-wood { height: 16px; background: linear-gradient(var(--wood), var(--wood-2)); border-radius: 0 0 6px 6px; }
.tube { position: relative; z-index: 1; flex: none; width: 38px; height: 196px; display: flex; flex-direction: column; align-items: center; padding: 0; border: 0; background: none; cursor: pointer; color: var(--ink); }
.tb-cap { width: 34px; height: 8px; border-radius: 3px; background: var(--glass); }
.tb-glass { position: relative; width: 28px; height: 160px; border: 2px solid var(--glass); border-top: 0; border-radius: 0 0 14px 14px; background: var(--glass-bg); overflow: hidden; }
.tb-liq { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 0 0 12px 12px; transition: height 0.5s ease; }
.tb-num { margin-top: 6px; font: 700 0.8rem var(--mono); color: var(--ink-2); height: 22px; }
.tube.sel .tb-glass { border-color: var(--ink); box-shadow: 0 0 0 3px var(--accent); }
.tube.sel .tb-num { color: var(--ink); }
.tube:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fl-none .tb-liq, .lg-dot.fl-none { background-color: var(--f-none); }
.fl-phantom .tb-liq, .lg-dot.fl-phantom { background-color: var(--f-phantom); }
.fl-strawman .tb-liq, .lg-dot.fl-strawman { background-color: var(--f-strawman); }
.fl-cherry-pick .tb-liq, .lg-dot.fl-cherry-pick { background-color: var(--f-cherry-pick); }
.fl-thin-test .tb-liq, .lg-dot.fl-thin-test { background-color: var(--f-thin-test); }
.tube.is-guess .tb-liq { opacity: 0.55; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.55) 0 4px, transparent 4px 9px); }
.rk-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 0; margin: 10px 0 0; font-size: 0.82rem; color: var(--ink-2); }
.lg-item { display: inline-flex; align-items: center; gap: 6px; }
.lg-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.rk-note { font-size: 0.82rem; color: var(--ink-2); margin: 8px 0 0; }
.rk-asks { margin-top: 12px; background: var(--bg); border-left: 3px solid var(--v-needs); padding: 8px 12px; border-radius: 6px; }
.rk-asks-h { font-size: 0.9rem; }
.rk-asks ul { margin: 6px 0 0; padding-left: 20px; }

/* The specimen label */
.specimen { margin-top: 14px; border: 1px solid var(--line); border-left: 6px solid var(--accent); border-radius: 8px; padding: 12px 14px; background: var(--bg); }
.sp-h { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0 0 8px; }
.sp-no { font: 700 0.78rem var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); }
.sp-flaw, .cc-flaw { font: 700 0.76rem var(--sans); padding: 2px 9px; border-radius: 999px; color: var(--f-ink); }
.sp-flaw.fl-none, .cc-flaw.fl-none { background: var(--f-none); }
.sp-flaw.fl-phantom, .cc-flaw.fl-phantom { background: var(--f-phantom); }
.sp-flaw.fl-strawman, .cc-flaw.fl-strawman { background: var(--f-strawman); }
.sp-flaw.fl-cherry-pick, .cc-flaw.fl-cherry-pick { background: var(--f-cherry-pick); }
.sp-flaw.fl-thin-test, .cc-flaw.fl-thin-test { background: var(--f-thin-test); }
.sp-rung, .cc-rung { font-size: 0.82rem; color: var(--ink-2); }
.sp-claim { margin: 0 0 8px; font-family: var(--serif); font-size: 1.02rem; border-left: 2px solid var(--line); padding-left: 10px; }
.sp-marks { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 6px; }
.sp-mark { font: 0.74rem var(--mono); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; color: var(--ink-2); }
.sp-lbl { font: 700 0.72rem var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); margin: 8px 0 2px; }
.sp-why, .sp-ask { margin: 0 0 6px; }
.sp-ask { font-weight: 600; }

.askbox .runrow { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.note { background: var(--info-bg); color: var(--info-ink); padding: 6px 10px; border-radius: 8px; }
.gate { background: var(--warn-bg); color: var(--warn-ink); padding: 8px 10px; border-radius: 8px; margin: 10px 0 0; }
.gate .pill { margin-left: 4px; }
.steps li { padding: 3px 0; color: var(--ink-2); }
.steps li.done { color: var(--ink); } .steps li.active { color: var(--accent); font-weight: 600; }
.step-ic { font-family: var(--mono); display: inline-block; width: 1.2em; }
.raw { white-space: pre-wrap; overflow-wrap: anywhere; font: 0.82rem var(--mono); background: var(--bg); padding: 10px; border-radius: 8px; }

.res-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.res-head h2 { margin: 0; font-size: 1.4rem; }
.verdict { font: 800 0.86rem var(--sans); text-transform: uppercase; letter-spacing: 0.06em; padding: 5px 12px; border-radius: 6px; color: var(--f-ink); background: var(--v-needs); }
.verdict.v-walk-away { background: var(--v-walk); } .verdict.v-ask-first { background: var(--v-ask); } .verdict.v-back-it { background: var(--v-back); } .verdict.v-needs-claims { background: var(--v-needs); }
.summary { font-size: 1.02rem; }
.claims { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 10px; }
.cc { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--bg); }
.cc-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 6px; }
.cc-n { font: 700 0.8rem var(--mono); color: var(--ink-2); }
.cc-text { font-family: var(--serif); margin: 0 0 6px; }
.cc-why { margin: 0 0 6px; font-size: 0.94rem; }
.cc-ask { margin: 0; font-size: 0.94rem; font-weight: 600; }
.cc-ask .pill { margin-left: 6px; font-weight: 600; }
.exports, .cardrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.hrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--line); }
.hinfo { flex: 1 1 220px; display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }

.foot { max-width: 1180px; margin: 0 auto; padding: 18px 16px 40px; font-size: 0.86rem; color: var(--ink-2); }
.toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 20; max-width: calc(100vw - 32px); }
.toast { background: var(--ink); color: var(--bg); padding: 8px 12px; border-radius: 8px; font-size: 0.88rem; transition: opacity 0.5s; }
.toast.err { background: var(--fix-bg); color: var(--fix-ink); border: 1px solid var(--fix-ink); }
.toast a { color: inherit; }
.toast.gone { opacity: 0; }

@media (max-width: 860px) { .layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .two { grid-template-columns: 1fr; }
  .rk-bench { grid-template-columns: 64px minmax(0, 1fr); padding: 8px 4px 0; }
  .rk-tick { font-size: 0.7rem; max-width: 62px; white-space: nowrap; }
  .tk-long { display: none; } .tk-short { display: inline; }
  .rk-row { gap: 6px; }
  .tube { width: 32px; }
  .tb-glass { width: 24px; }
  .tb-cap { width: 28px; }
  .session { margin-left: 0; }
}
@media print {
  .bar, .samples, .askbox, .histbox, .exports, .foot, .toasts, .pagebox .drop { display: none !important; }
  body { background: #fff; color: #000; }
  .panel { border: 0; }
}
/* The loop: what moved since the last audit of this rack, and the letter preview. */
.moved li { padding: 6px 10px; border-radius: 8px; margin-bottom: 6px; font-size: 0.88rem; background: var(--bg-2); color: var(--ink); }
.moved li.up { background: var(--info-bg); color: var(--info-ink); }
.moved li.down { background: var(--warn-bg); color: var(--warn-ink); }
.letterbox { margin: 12px 0 0; }
.letterbox summary { cursor: pointer; font-size: 0.9rem; color: var(--ink); }
.letterbox .raw { margin-top: 8px; }