/* Snug Season - an old tiled stove in a warm kitchen: oat-coloured walls, raw clay tiles that turn to deep glazes
 * (bottle green, cobalt, ochre, oxblood, teal, plum, olive, slate) as the checks get done, and a firebox that glows. */
:root {
  --bg: #f3ebdf; --panel: #fffaf3; --ink: #2b211b; --soft: #66564a; --line: #dccbb6; --chip: #f6ecdf;
  --acc: #1f5c4a; --acc-ink: #ffffff; --focus: #2a4f8f; --field: #ffffff; --rail: #b4532f;
  --st-body: #eadcc8; --st-body-line: #c9b392; --st-cornice: #7a3e24; --st-crown: #fff6ea; --st-frieze: #d6c0a0; --st-band: #3a291d;
  --st-raw: #e2b693; --st-raw-line: #b98761; --st-ros: #c88a63; --st-numbg: #fffaf3; --st-num: #2b211b;
  --g0: #1f5c4a; --g1: #2a4f8f; --g2: #7d5410; --g3: #7a2430; --g4: #1b6168; --g5: #5b3a78; --g6: #4b5a1c; --g7: #3d4b5c;
  --st-door: #3a2a1f; --st-glass: #150e0a; --st-glow: #ff9a3c; --st-plate: #3a291d;
  --v-retire: #8e2a1f; --v-check: #7d5410; --v-gap: #2a4f8f; --v-snug: #1f5c4a; --v-ink: #ffffff;
  --retire-bg: #f8ddd6; --retire-ink: #74200f; --check-bg: #f6e9c6; --check-ink: #573c05; --ok-bg: #dcebdf; --ok-ink: #1c4d2f;
  --warn-bg: #f6e9c6; --warn-ink: #573c05; --info-bg: #dde6f4; --info-ink: #1d3766; --flag-bg: #f8ddd6; --flag-ink: #74200f;
  --shadow: 0 1px 0 rgba(60, 35, 20, .05), 0 6px 18px rgba(60, 35, 20, .1);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #19140f; --panel: #241d17; --ink: #f2e7d9; --soft: #c3b2a1; --line: #46392e; --chip: #2d251d;
  --acc: #86cfb2; --acc-ink: #0d241b; --focus: #9cb8ff; --field: #1c1712; --rail: #c8714a;
  --st-body: #33281f; --st-body-line: #554435; --st-cornice: #8f4c2d; --st-crown: #fff1e0; --st-frieze: #4a3b2f; --st-band: #f3e4cf;
  --st-raw: #8d5c3e; --st-raw-line: #b07a55; --st-ros: #a8704c; --st-numbg: #fff3e4; --st-num: #241a12;
  --g0: #2f7a62; --g1: #3b64a8; --g2: #9a6a1a; --g3: #9a3442; --g4: #2a7b83; --g5: #74519a; --g6: #62742a; --g7: #55667a;
  --st-door: #120c08; --st-glass: #050302; --st-glow: #ffab55; --st-plate: #f3e4cf;
  --v-retire: #ff9c8a; --v-check: #f0c56b; --v-gap: #a9c2ff; --v-snug: #86cfb2; --v-ink: #1b130d;
  --retire-bg: #4a1d16; --retire-ink: #ffcdc2; --check-bg: #3e3010; --check-ink: #ffe3a3; --ok-bg: #18341f; --ok-ink: #bce6c8;
  --warn-bg: #3e3010; --warn-ink: #ffe3a3; --info-bg: #1b2a45; --info-ink: #c7d8ff; --flag-bg: #4a1d16; --flag-ink: #ffcdc2;
  --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .45);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background-color: var(--bg); background-image: radial-gradient(rgba(150, 110, 70, .07) 1px, transparent 1.2px); background-size: 14px 14px; color: var(--ink); font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; overflow-x: hidden; }
a { color: var(--acc); }
h1, h2, h3, h4 { font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif; letter-spacing: .005em; }
.hidden { display: none !important; }
.small { font-size: .88rem; }
.muted { color: var(--soft); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.none { color: var(--soft); font-style: italic; }

/* Header */
.bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px; padding: 10px 18px; background: var(--panel); border-bottom: 3px solid var(--rail); }
.back { text-decoration: none; color: var(--soft); font-size: .92rem; white-space: nowrap; }
.brand { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.brand strong { font-family: Georgia, "Iowan Old Style", serif; font-size: 1.12rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo { width: 34px; height: 21px; flex: none; }
.lg-bg { fill: var(--st-body); stroke: var(--st-cornice); stroke-width: 1.2; }
.lg-t { fill: var(--g0); }
.lg-f { fill: var(--st-glow); stroke: var(--st-door); stroke-width: 1.2; }
.session { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

/* Controls */
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; font-size: .88rem; cursor: pointer; text-decoration: none; white-space: nowrap; }
.pill:hover { border-color: var(--acc); }
.pill.solid { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); font-weight: 600; }
.pill.solid:hover { filter: brightness(1.06); }
.pill.ghost { background: transparent; cursor: default; }
.pill.tiny { padding: 3px 10px; font-size: .8rem; }
.pill.big { padding: 10px 20px; font-size: 1rem; }
.pill:disabled { opacity: .5; cursor: not-allowed; }
.chip { padding: 5px 12px; border-radius: 6px; border: 1px dashed var(--rail); background: var(--chip); color: var(--ink); font: inherit; font-size: .86rem; cursor: pointer; }
.chip.on { border: 1px solid var(--acc); box-shadow: inset 0 0 0 1px var(--acc); }
input[type="text"], input[type="date"], select, textarea { font: inherit; color: var(--ink); background: var(--field); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; max-width: 100%; }
input[type="text"] { width: 100%; min-height: 42px; }
select { min-height: 42px; }
textarea { width: 100%; line-height: 1.55; resize: vertical; min-height: 84px; }
input:focus-visible, select:focus-visible, textarea:focus, .pill:focus-visible, .chip:focus-visible, .st-tile:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.lbl { display: block; font-weight: 600; font-size: .9rem; margin: 12px 0 4px; }
.lbl .muted { font-weight: 400; }
.check { display: inline-flex; align-items: center; gap: 8px; margin: 6px 14px 2px 0; font-size: .95rem; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--acc); }
.spots { border: 0; padding: 0; margin: 8px 0 0; }
.spots legend { padding: 0; }

/* Layout */
main { max-width: 1000px; margin: 0 auto; padding: 18px 16px 40px; }
.hero { padding: 10px 2px 6px; }
.kicker { font-size: .9rem; color: var(--soft); margin: 0 0 6px; border-left: 3px solid var(--rail); padding-left: 10px; }
h1 { font-size: 2.3rem; line-height: 1.1; margin: 8px 0 10px; overflow-wrap: anywhere; }
.h1b { display: block; font-size: 1.15rem; font-weight: 500; color: var(--soft); margin-top: 6px; }
.lede { max-width: 760px; }
.samples { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin: 16px 0; box-shadow: var(--shadow); }
.ph { display: flex; align-items: center; gap: 10px; font-size: 1.2rem; margin: 0 0 8px; flex-wrap: wrap; overflow-wrap: anywhere; }
.step-no { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; background: var(--rail); color: #fff; font-size: .95rem; }
:root[data-theme="dark"] .step-no { color: #1b130d; }
.free { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; background: var(--ok-bg); color: var(--ok-ink); padding: 2px 8px; border-radius: 4px; }
.note { background: var(--warn-bg); color: var(--warn-ink); padding: 6px 10px; border-radius: 6px; }
.sub { font-size: 1rem; margin: 14px 0 6px; }

/* The warmer list */
.items { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 8px; }
.item { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--chip); }
.item-no { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 5px; background: var(--g0); color: #fff; font-weight: 700; font-family: ui-monospace, Menlo, monospace; margin-top: 6px; }
.items li:nth-child(8n+2) .item-no { background: var(--g1); } .items li:nth-child(8n+3) .item-no { background: var(--g2); } .items li:nth-child(8n+4) .item-no { background: var(--g3); }
.items li:nth-child(8n+5) .item-no { background: var(--g4); } .items li:nth-child(8n+6) .item-no { background: var(--g5); } .items li:nth-child(8n+7) .item-no { background: var(--g6); } .items li:nth-child(8n+8) .item-no { background: var(--g7); }
.item-body { min-width: 0; display: grid; gap: 6px; }
.item-top { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 6px; }
.item-top select { width: 100%; }
.it-rm { margin-top: 8px; }
textarea.it-cond { min-height: 0; resize: vertical; field-sizing: content; }

/* The stove board */
.flags { list-style: none; padding: 0; margin: 6px 0 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.flag { padding: 4px 10px; border-radius: 6px; font-size: .86rem; overflow-wrap: anywhere; }
.flag-retire { background: var(--retire-bg); color: var(--retire-ink); }
.flag-check { background: var(--check-bg); color: var(--check-ink); }
.flag-ok { background: var(--ok-bg); color: var(--ok-ink); }
.stove-row { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 18px; align-items: start; }
.stovebox svg { display: block; width: 100%; max-width: 380px; height: auto; }
.pickline { font-weight: 600; margin: 0 0 6px; }
.phase .sub { margin-top: 10px; padding-bottom: 2px; border-bottom: 2px solid var(--line); }
.cl { list-style: none; padding: 0; margin: 4px 0; }
.cl-row { padding: 5px 0; border-bottom: 1px dashed var(--line); }
.cl-lab { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; cursor: pointer; align-items: start; }
.cl-lab input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--acc); }
.cl-txt { overflow-wrap: anywhere; font-size: .93rem; }
.cl-item { font-weight: 600; }
.cl-pass { display: block; color: var(--soft); font-size: .84rem; }
.cl-row.on .cl-txt { text-decoration: line-through; text-decoration-color: var(--soft); }
.gaps { list-style: none; padding: 0; margin: 4px 0 10px; }
.gaps li { padding: 4px 0; overflow-wrap: anywhere; }
.exports { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.remind { margin-top: 12px; }
.remind .lbl { display: block; }
.datein { min-height: 38px; color-scheme: light dark; }
.safety { background: var(--chip); border-left: 4px solid var(--rail); padding: 8px 12px; border-radius: 6px; margin: 14px 0 0; }

/* Stove SVG */
.st-body { fill: var(--st-body); stroke: var(--st-body-line); stroke-width: 1.5; }
.st-cornice { fill: var(--st-cornice); }
.st-crown { fill: var(--st-crown); font: 700 12px Georgia, serif; letter-spacing: .14em; }
.st-frieze { fill: var(--st-frieze); }
.st-band { fill: var(--st-band); font: 700 10.5px ui-monospace, Menlo, monospace; letter-spacing: .06em; }
.st-tile { cursor: pointer; }
.st-tile.cracked { cursor: default; }
.st-face { stroke: rgba(0, 0, 0, .18); stroke-width: 1; }
.st-raw { fill: var(--st-raw); stroke: var(--st-raw-line); stroke-dasharray: 3 2; }
.st-g0 { fill: var(--g0); } .st-g1 { fill: var(--g1); } .st-g2 { fill: var(--g2); } .st-g3 { fill: var(--g3); }
.st-g4 { fill: var(--g4); } .st-g5 { fill: var(--g5); } .st-g6 { fill: var(--g6); } .st-g7 { fill: var(--g7); }
.st-inset { fill: none; stroke: rgba(90, 50, 25, .35); stroke-width: 1; }
.st-inset.lit { stroke: rgba(255, 255, 255, .4); }
.st-ros { fill: var(--st-ros); }
.st-ros.lit { fill: rgba(255, 255, 255, .28); }
.st-shine { fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: 2.2; stroke-linecap: round; }
.st-crack { fill: none; stroke: #1b120c; stroke-width: 2; stroke-linejoin: round; }
.st-numbg { fill: var(--st-numbg); }
.st-num { fill: var(--st-num); font: 700 11px ui-monospace, Menlo, monospace; }
.st-tick { fill: #ffffff; font: 700 15px ui-monospace, Menlo, monospace; }
.st-empty { fill: none; stroke: var(--st-body-line); stroke-dasharray: 4 3; }
.st-emptyt { fill: var(--st-band); font: italic 11px Georgia, serif; }
.st-out { fill: var(--v-retire); }
.st-door { fill: var(--st-door); }
.st-glass { fill: var(--st-glass); }
.st-glow { fill: var(--st-glow); }
.st-plate { fill: var(--st-plate); font: 600 12px Georgia, serif; }

/* Ask, progress, result */
.runrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.gate { background: var(--warn-bg); color: var(--warn-ink); padding: 8px 12px; border-radius: 8px; }
.gate .pill { margin-left: 6px; }
.steps { list-style: none; padding: 0; margin: 6px 0; }
.step { padding: 3px 0; color: var(--soft); }
.step.active { color: var(--ink); font-weight: 600; }
.step.done { color: var(--ok-ink); }
.step-ic { display: inline-block; width: 1.2em; font-family: ui-monospace, Menlo, monospace; }
.raw { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--chip); padding: 10px; border-radius: 8px; font-size: .82rem; }
.res-kick { text-transform: uppercase; letter-spacing: .1em; color: var(--soft); margin: 0 0 6px; }
.verdict-card { border: 2px solid var(--st-cornice); border-radius: 12px; padding: 14px 16px; background: var(--chip); }
.vc-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.vc-title { margin: 0; font-size: 1.3rem; overflow-wrap: anywhere; min-width: 0; flex: 1 1 200px; }
.verdict-card h4 { margin: 12px 0 4px; font-size: .95rem; }
.vc-list { margin: 4px 0; padding-left: 20px; }
.vc-list li { overflow-wrap: anywhere; }
.cosy { font-family: Georgia, serif; font-style: italic; margin: 12px 0 0; color: var(--ink); }
.badge { font: 800 .78rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; padding: 5px 10px; border-radius: 4px; background: var(--v-snug); color: var(--v-ink); white-space: nowrap; }
.badge.v-retire_one { background: var(--v-retire); } .badge.v-check_first { background: var(--v-check); } .badge.v-fill_gap { background: var(--v-gap); }
.recon { list-style: none; padding: 0; margin: 4px 0 8px; }
.recon li { padding: 6px 10px; border-radius: 6px; margin: 4px 0; font-size: .9rem; }
.recon li.warn { background: var(--warn-bg); color: var(--warn-ink); }
.recon li.info { background: var(--info-bg); color: var(--info-ink); }
.recon li.none { background: var(--ok-bg); color: var(--ok-ink); font-style: normal; }
.cardrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; align-items: center; }

/* Saved kits */
.saved { list-style: none; padding: 0; margin: 10px 0 0; }
.hrow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.hrow.none { color: var(--soft); font-style: italic; }
.hdot { width: 12px; height: 12px; border-radius: 3px; flex: none; background: var(--line); }
.hdot.v-retire_one { background: var(--v-retire); } .hdot.v-check_first { background: var(--v-check); } .hdot.v-fill_gap { background: var(--v-gap); } .hdot.v-snug { background: var(--v-snug); }
.hinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hinfo b { overflow-wrap: anywhere; }
.hbtns { display: flex; gap: 6px; flex-wrap: wrap; }

/* Footer, toasts */
.foot { max-width: 1000px; margin: 0 auto; padding: 10px 16px 40px; color: var(--soft); font-size: .88rem; }
.toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 50; max-width: calc(100vw - 32px); }
.toast { padding: 10px 14px; border-radius: 8px; box-shadow: var(--shadow); font-size: .9rem; transition: opacity .5s; }
.toast.ok { background: var(--ok-bg); color: var(--ok-ink); }
.toast.err { background: var(--flag-bg); color: var(--flag-ink); }
.toast.gone { opacity: 0; }
.toast a { color: inherit; font-weight: 700; }

@media (max-width: 760px) {
  .stove-row { grid-template-columns: minmax(0, 1fr); }
  .stovebox svg { margin: 0 auto; }
}
@media (max-width: 560px) {
  .bar { padding: 8px 10px; gap: 8px; }
  .back-t { display: none; }
  .brand strong { font-size: 1rem; }
  .logo { width: 28px; height: 18px; }
  .session .pill { padding: 5px 10px; font-size: .82rem; }
  main { padding: 12px 12px 30px; }
  .panel { padding: 14px 12px; }
  h1 { font-size: 1.85rem; }
  .h1b { font-size: 1.02rem; }
  .item { grid-template-columns: 28px minmax(0, 1fr); }
  .it-rm { grid-column: 2; justify-self: start; margin-top: 0; }
  .item-top { grid-template-columns: minmax(0, 1fr); }
}