/* Open Crumb - flour-sack paper, rye-crust accents, ruled index cards. */
:root {
  --bg: #f2ebdd; --paper: #fffcf5; --paper2: #f8f1e4; --ink: #2a1f16; --muted: #6b5a4a; --line: #ddd0bb; --rule: rgba(77, 134, 181, .16); --margin: #d98b8b;
  --rye: #7a3f1d; --rye-ink: #fffaf2; --crust: #b5652b; --focus: #b5652b;
  --ok: #2f6b3a; --ok-bg: #e3f0e2; --warn: #8a5200; --warn-bg: #fbeccd; --fix: #a3271f; --fix-bg: #f9dfdb; --sign: #5b4a8a; --sign-bg: #e9e3f5;
  --r-flour: #c9a46a; --r-water: #4d86b5; --r-milk: #8fb3d3; --r-levain: #8a6bb0; --r-salt: #7d8a96; --r-yeast: #c47a9a; --r-other: #8e9a5a;
  --shadow: 0 1px 2px rgba(60, 40, 20, .08), 0 6px 18px rgba(60, 40, 20, .08);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #17120e; --paper: #241d17; --paper2: #2c241d; --ink: #f1e7d8; --muted: #b7a690; --line: #43372b; --rule: rgba(120, 160, 200, .10); --margin: #8a4545;
  --rye: #e6a46b; --rye-ink: #1a120c; --crust: #e6a46b; --focus: #f0b97f;
  --ok: #8fdc9a; --ok-bg: rgba(110, 200, 130, .14); --warn: #f3c06a; --warn-bg: rgba(240, 180, 80, .14); --fix: #ff9b8c; --fix-bg: rgba(255, 120, 100, .14); --sign: #c9b8ff; --sign-bg: rgba(170, 150, 255, .14);
  --r-flour: #d8b67c; --r-water: #6fa6d6; --r-milk: #a6c6e3; --r-levain: #a98bd0; --r-salt: #9aa7b3; --r-yeast: #e098b7; --r-other: #b0bd78;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 22px rgba(0, 0, 0, .35);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--rye); }
h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; line-height: 1.2; }
.hidden { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.small { font-size: 13px; } .muted { color: var(--muted); } .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } .r { text-align: right; } .block { display: block; } .strong { font-weight: 700; }
.warn { color: var(--warn); } .none { color: var(--muted); font-style: italic; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Header */
.bar { display: flex; align-items: center; gap: 12px; padding: 10px 20px; background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.back { text-decoration: none; font-size: 14px; color: var(--muted); }
.brand { display: flex; align-items: center; gap: 8px; margin-right: auto; font-size: 17px; }
.logo { width: 28px; height: 28px; }
.lg-crust { fill: var(--crust); } .lg-score { stroke: var(--paper); stroke-width: 1.6; fill: none; stroke-linecap: round; } .lg-hole { fill: var(--paper); opacity: .85; }
.session { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.pill { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 5px 12px; font-size: 13px; cursor: pointer; text-decoration: none; color: var(--ink); }
.pill:hover { border-color: var(--crust); }
.pill.solid, .btn.solid { background: var(--rye); color: var(--rye-ink); border-color: var(--rye); }
.pill.ghost { background: transparent; cursor: default; }
.pill.tiny { padding: 2px 10px; font-size: 12px; }

/* Layout */
.wrap { max-width: 1180px; margin: 0 auto; padding: 20px 20px 40px; }
.hero { padding: 18px 0 8px; max-width: 820px; }
.kicker { text-transform: uppercase; letter-spacing: .14em; font-size: 12px; color: var(--crust); margin: 0; font-weight: 700; }
.hero h1 { font-size: clamp(30px, 5vw, 46px); margin: 6px 0 10px; }
.lede { color: var(--muted); font-size: 16px; margin: 0 0 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chips-label { font-size: 13px; color: var(--muted); }
.chip { border: 1px dashed var(--crust); background: transparent; border-radius: 6px; padding: 6px 12px; cursor: pointer; font-size: 14px; }
.chip.on { background: var(--rye); color: var(--rye-ink); border-style: solid; }
.two { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 22px; margin-top: 18px; align-items: start; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 18px; box-shadow: var(--shadow); margin-top: 18px; }
.two .card { margin-top: 0; }
.card h2 { font-size: 21px; margin: 0 0 10px; }
.lbl { display: block; font-weight: 600; font-size: 14px; margin: 10px 0 4px; }
textarea, input, select { width: 100%; border: 1px solid var(--line); border-radius: 6px; background: var(--paper2); padding: 8px 10px; }
textarea { resize: vertical; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13.5px; line-height: 1.5; }
.drop.over textarea { border-color: var(--crust); box-shadow: 0 0 0 3px var(--warn-bg); }
.filelink { color: var(--rye); text-decoration: underline; cursor: pointer; }
.grid3 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; margin-top: 10px; }
.grid3 label { font-size: 13px; font-weight: 600; display: flex; flex-direction: column; gap: 4px; }
.pair { display: flex; gap: 6px; } .pair input { flex: 1; } .pair select { width: 76px; }
.notes { list-style: none; padding: 0; margin: 8px 0 0; font-size: 13px; }
.notes li.ok { color: var(--ok); } .notes li.warn { color: var(--warn); }

/* The card stack */
.stackwrap { min-width: 0; }
.tabs { display: flex; gap: 4px; padding-left: 12px; flex-wrap: wrap; }
.tab { border: 1px solid var(--line); border-bottom: none; background: var(--paper2); color: var(--muted); padding: 7px 14px 6px; border-radius: 8px 8px 0 0; cursor: pointer; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; position: relative; top: 1px; }
.tab.on { background: var(--paper); color: var(--ink); font-weight: 700; z-index: 2; }
.tab.has::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--crust); margin-left: 6px; vertical-align: middle; }
.stack { position: relative; }
.stack::before, .stack::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--paper2); z-index: 0; }
.stack::before { transform: translate(7px, 7px) rotate(.6deg); }
.stack::after { transform: translate(13px, 13px) rotate(1.1deg); opacity: .6; z-index: -1; }
.icard { position: relative; z-index: 1; background: var(--paper); border: 1px solid var(--line); border-radius: 0 10px 10px 10px; padding: 0 18px 18px; box-shadow: var(--shadow); min-height: 360px;
  background-image: repeating-linear-gradient(to bottom, transparent 0 27px, var(--rule) 27px 28px); background-position: 0 58px; }
.ihead { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 14px 0 10px; border-bottom: 2px solid var(--margin); margin-bottom: 10px; background: var(--paper); }
.ititle { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.verdict-tag, .est-tag { font-size: 12.5px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.v-bake { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); }
.v-adjust { background: var(--warn-bg); color: var(--warn); border-color: var(--warn); }
.v-rework { background: var(--fix-bg); color: var(--fix); border-color: var(--fix); }
.est-tag { background: var(--paper2); }

/* Formula */
.ftable, .ctable { width: 100%; border-collapse: collapse; font-size: 14px; }
.ftable th, .ctable th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.ftable th.r, .ctable th.r { text-align: right; } .ftable th.dim { opacity: .45; }
.ftable td, .ctable td { padding: 5px 6px; border-bottom: 1px dotted var(--line); vertical-align: middle; }
.ftable td.ing { overflow-wrap: anywhere; }
.ftable.noscale th:nth-child(4), .ftable.noscale td:nth-child(4) { display: none; }
.ctable td.mono { white-space: nowrap; }
.ftable tr.changed td { background: var(--warn-bg); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 7px; vertical-align: middle; }
.est { font-size: 11px; margin-left: 6px; padding: 0 5px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); }
.pctcell { white-space: nowrap; }
.pbar { display: inline-block; width: 70px; height: 7px; background: var(--paper2); border: 1px solid var(--line); border-radius: 4px; margin-right: 8px; vertical-align: middle; overflow: hidden; }
.fill { display: block; height: 100%; }
.role-flour.dot, .role-flour.fill { background: var(--r-flour); } .role-water.dot, .role-water.fill { background: var(--r-water); } .role-milk.dot, .role-milk.fill { background: var(--r-milk); }
.role-levain.dot, .role-levain.fill { background: var(--r-levain); } .role-salt.dot, .role-salt.fill { background: var(--r-salt); } .role-yeast.dot, .role-yeast.fill { background: var(--r-yeast); } .role-other.dot, .role-other.fill { background: var(--r-other); }
.scaled { color: var(--crust); font-weight: 700; }
.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 14px 0 8px; }
.stat { background: var(--paper2); border: 1px solid var(--line); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; min-width: 0; }
.slabel { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.sval { font-size: 19px; font-weight: 700; }
.ssub, .swas { font-size: 11px; color: var(--muted); }
.swas { color: var(--warn); }

/* Schedule */
.strip { width: 100%; overflow: hidden; margin: 6px 0 10px; }
.strip svg { display: block; max-width: 100%; }
.band { fill: var(--paper2); stroke: var(--line); }
.blk { stroke: var(--paper); stroke-width: 1; }
.blk.s-mix { fill: var(--r-water); } .blk.s-bulk { fill: var(--r-flour); } .blk.s-shape { fill: var(--r-levain); } .blk.s-proof { fill: var(--r-milk); } .blk.s-bake { fill: var(--crust); } .blk.s-cool { fill: var(--r-salt); }
.blab { font: 600 11px system-ui, sans-serif; fill: #1d140c; }
.tlab { font: 10.5px ui-monospace, Menlo, monospace; fill: var(--muted); }
.daylab { font: italic 10.5px system-ui, sans-serif; fill: var(--crust); }
.tick { stroke: var(--muted); stroke-width: 1; }
.midnight { stroke: var(--crust); stroke-width: 1.2; stroke-dasharray: 3 3; }
.srows { list-style: none; padding: 0; margin: 0 0 10px; }
.srow { display: grid; grid-template-columns: 104px 1fr; gap: 8px; padding: 5px 0; border-bottom: 1px dotted var(--line); align-items: baseline; }
.srow .stime { white-space: nowrap; font-weight: 700; color: var(--crust); border-left: 4px solid var(--line); padding-left: 6px; }
.srow.s-mix .stime { border-color: var(--r-water); } .srow.s-bulk .stime { border-color: var(--r-flour); } .srow.s-shape .stime { border-color: var(--r-levain); }
.srow.s-proof .stime { border-color: var(--r-milk); } .srow.s-bake .stime { border-color: var(--crust); } .srow.s-cool .stime { border-color: var(--r-salt); }

/* Method */
.mrows { padding-left: 22px; margin: 0; }
.mrows li { padding: 4px 0; }
.mstep p { margin: 2px 0; }
.mtop { display: flex; gap: 8px; align-items: center; }
.mstage { font: 700 11px ui-monospace, Menlo, monospace; text-transform: uppercase; letter-spacing: .08em; color: var(--rye); background: var(--paper2); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; }
.mtime { font-size: 12px; color: var(--muted); }
.mcue { color: var(--ok); font-size: 13.5px; }

/* Next bake */
.stamp { font: 800 13px ui-monospace, Menlo, monospace; text-transform: uppercase; letter-spacing: .1em; padding: 4px 12px; border: 2px solid currentColor; border-radius: 4px; transform: rotate(-2deg); }
.stamp.v-bake { color: var(--ok); background: var(--ok-bg); } .stamp.v-adjust { color: var(--warn); background: var(--warn-bg); } .stamp.v-rework { color: var(--fix); background: var(--fix-bg); }
.nsummary { margin: 4px 0 8px; font-size: 15px; }
.partial { background: var(--warn-bg); color: var(--warn); padding: 6px 10px; border-radius: 6px; font-size: 13px; }
.ih3 { font-size: 15px; margin: 14px 0 6px; }
.flags, .diag, .plain, .recon { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.flags li, .recon li { padding: 4px 0; border-bottom: 1px dotted var(--line); }
.lv { display: inline-block; min-width: 54px; text-align: center; font: 700 11px ui-monospace, Menlo, monospace; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; margin-right: 6px; }
.lv-fix .lv { background: var(--fix-bg); color: var(--fix); } .lv-warn .lv { background: var(--warn-bg); color: var(--warn); } .lv-info .lv { background: var(--paper2); color: var(--muted); border: 1px solid var(--line); } .lv-sign .lv { background: var(--sign-bg); color: var(--sign); }
.flags li.ok { color: var(--ok); }
.flags li.addressed { color: var(--muted); } .flags li .addr { display: block; color: var(--ok); font-size: 12.5px; margin-top: 2px; }
.diag li { padding: 6px 0; border-bottom: 1px dotted var(--line); } .diag p { margin: 2px 0 0; }
.cause { margin-left: 8px; font-size: 11.5px; padding: 1px 7px; border-radius: 999px; background: var(--sign-bg); color: var(--sign); }
.cause.c-under_fermented, .cause.c-over_fermented { background: var(--warn-bg); color: var(--warn); } .cause.c-oven { background: var(--fix-bg); color: var(--fix); }
.plain li { padding: 3px 0 3px 16px; position: relative; } .plain li::before { content: "-"; position: absolute; left: 2px; color: var(--crust); }
.plain li.none::before { content: ""; }
.recon li.warn { color: var(--warn); } .recon li.info { color: var(--muted); }

/* Ask, progress, exports, history */
.askrow { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.btn { border: 1px solid var(--line); border-radius: 8px; padding: 10px 18px; font-weight: 700; cursor: pointer; font-size: 15px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.meter { color: var(--muted); }
.gate { background: var(--paper2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 10px 0 0; font-size: 14px; }
.gate .pill { margin-left: 4px; }
.steps { list-style: none; padding: 0; margin: 0; }
.step { padding: 3px 0; color: var(--muted); } .step.done { color: var(--ok); } .step.active { color: var(--ink); font-weight: 700; }
.step-ic { display: inline-block; width: 16px; font-family: ui-monospace, Menlo, monospace; }
.raw { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12.5px; background: var(--paper2); padding: 10px; border-radius: 6px; max-height: 320px; overflow: auto; }
.btnrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.hist { list-style: none; padding: 0; margin: 8px 0 0; }
.hrow { display: flex; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px dotted var(--line); }
.hinfo { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.toasts { position: fixed; bottom: 16px; right: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 50; max-width: min(380px, calc(100vw - 32px)); }
.toast { background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--ok); padding: 10px 12px; border-radius: 6px; box-shadow: var(--shadow); font-size: 14px; transition: opacity .5s; }
.toast.err { border-left-color: var(--fix); } .toast.gone { opacity: 0; }
.foot { max-width: 1180px; margin: 0 auto; padding: 10px 20px 40px; color: var(--muted); font-size: 13px; }

/* Docs pages */
.doc { max-width: 900px; margin: 0 auto; padding: 24px 20px 40px; }
.doc pre { background: var(--paper2); border: 1px solid var(--line); border-radius: 8px; padding: 12px; overflow: auto; font-size: 12.5px; line-height: 1.5; }
.doc code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .92em; }
.doc table { border-collapse: collapse; width: 100%; font-size: 14px; display: block; overflow-x: auto; }
.doc th, .doc td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
.doc h1 { font-size: 2rem; } .doc h2 { font-size: 1.35rem; margin-top: 32px; } .doc h3 { font-size: 1.05rem; margin-top: 22px; }
.doc pre code { white-space: pre; } .doc td code { white-space: normal; }
.codegroup { margin: 10px 0 16px; }
.codegroup .tabs { display: inline-flex; flex-wrap: wrap; gap: 0; padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--paper); margin-bottom: 6px; }
.codegroup .tab { top: 0; border: none; border-radius: 0; border-right: 1px solid var(--line); background: var(--paper); font-family: system-ui, sans-serif; padding: 5px 11px; }
.codegroup .tab.active { background: var(--rye); color: var(--rye-ink); font-weight: 700; }
.statebox { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.tokenrow { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.tokenbox { font-family: ui-monospace, Menlo, monospace; font-size: 13px; background: var(--paper); border: 1px solid var(--line); padding: 8px 12px; border-radius: 8px; overflow-wrap: anywhere; flex: 1; }
.langbar { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.langbar button { border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 4px 12px; cursor: pointer; font-size: 13px; }
.langbar button.on, .langbar button[aria-pressed="true"] { background: var(--rye); color: var(--rye-ink); border-color: var(--rye); }
.tokbox { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin: 14px 0; }

/* Phones */
@media (max-width: 900px) { .two { grid-template-columns: 1fr; } .stack::before, .stack::after { display: none; } }
/* The rotated paper layers behind the cards grow wider with the card's height; on one column they pushed a long Next-bake card past the phone's edge. */
@media (max-width: 560px) {
  .wrap { padding: 12px 16px 32px; } .bar { padding: 8px 16px; flex-wrap: wrap; position: static; gap: 8px; } .back { display: none; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ftable { font-size: 13px; }
  .pctcell .pbar { width: 36px; margin-right: 4px; }
  .tab { padding: 6px 9px 5px; font-size: 12px; }
  .icard { padding: 0 12px 14px; }
  .grid3 { grid-template-columns: 1fr 1fr; }
}

/* Print: the four cards, one after another */
@media print {
  body { background: #fff; color: #000; }
  .bar, .hero, .recipecard, .askcard, .exports, .history, .foot, .tabs, .toasts, #progressPanel, #how, #rawResult { display: none !important; }
  .two { display: block; } .stack::before, .stack::after { display: none; }
  .icard { display: block !important; box-shadow: none; border: 1px solid #999; margin-bottom: 14px; page-break-inside: avoid; background-image: none; }
}