/* ============================================================
   Helping Friendly Book — shared "cabinet clay" design system.
   Extracted so every recipe card (prep + cook) shares one look.
   Warm-cream clay, terracotta accent, pastel step spines.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
:root {
  --wall:#ece3d1; --wall-deep:#e0d4bd;
  --rose:#e8a08c; --mint:#a9c199; --butter:#edcf86; --lilac:#c0b1d6; --peach:#d99b73;
  --cocoa:#584636; --cocoa-soft:#8a7157; --brand-green:#41501f;
  --accent:#c1543d; --accent-deep:#9e3f2c; --warn:#d06a54;
  --ink:var(--cocoa); --ink-dim:#998a73;
  --card:#f5f0e4; --card-edge:#e4dac4;
  --lift:5px 8px 16px rgba(80,55,45,.20); --lift-lg:9px 14px 30px rgba(80,55,45,.24);
  --mold: inset 3px 3px 7px rgba(255,255,255,.65), inset -5px -6px 12px rgba(120,80,55,.16);
  --press: inset -3px -3px 7px rgba(255,255,255,.55), inset 4px 5px 11px rgba(120,80,55,.16);
  --hi:rgba(255,255,255,.6); --sh:rgba(120,80,55,.18);
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-display:"Arial Rounded MT Bold","Helvetica Rounded","Trebuchet MS",var(--font-body);
}
/* Default is light everywhere; dark applies only when the reader toggles it
   (data-theme="dark"). We intentionally do NOT auto-switch on the OS setting. */
:root[data-theme="light"]{--wall:#ece3d1;--wall-deep:#e0d4bd;--rose:#e8a08c;--mint:#a9c199;--butter:#edcf86;--lilac:#c0b1d6;--peach:#d99b73;--cocoa:#584636;--cocoa-soft:#8a7157;--brand-green:#41501f;--accent:#c1543d;--accent-deep:#9e3f2c;--warn:#d06a54;--ink:#584636;--ink-dim:#998a73;--card:#f5f0e4;--card-edge:#e4dac4;--lift:5px 8px 16px rgba(80,55,45,.2);--lift-lg:9px 14px 30px rgba(80,55,45,.24);--mold:inset 3px 3px 7px rgba(255,255,255,.65),inset -5px -6px 12px rgba(120,80,55,.16);--press:inset -3px -3px 7px rgba(255,255,255,.55),inset 4px 5px 11px rgba(120,80,55,.16);--hi:rgba(255,255,255,.6);--sh:rgba(120,80,55,.18);}
:root[data-theme="dark"]{--wall:#2b2620;--wall-deep:#221e18;--rose:#7a4a3a;--mint:#48583a;--butter:#5e4f2a;--lilac:#4b4360;--peach:#6e4636;--cocoa:#efe6d5;--cocoa-soft:#c8b7a1;--brand-green:#a8bd6e;--accent:#e08a72;--accent-deep:#b8654e;--warn:#c96650;--ink:#efe6d5;--ink-dim:#b6a891;--card:#38322a;--card-edge:#241f18;--lift:5px 8px 16px rgba(0,0,0,.4);--lift-lg:9px 14px 30px rgba(0,0,0,.46);--mold:inset 3px 3px 8px rgba(255,255,255,.08),inset -5px -6px 12px rgba(0,0,0,.4);--press:inset -3px -3px 8px rgba(255,255,255,.07),inset 4px 5px 12px rgba(0,0,0,.45);--hi:rgba(255,255,255,.14);--sh:rgba(0,0,0,.4);}

body { font-family: var(--font-body); color: var(--ink); background-color: var(--wall); line-height: 1.45; font-size: 15px;
  background-image:
    radial-gradient(circle at 15% 10%, rgba(255,255,255,.35), transparent 45%),
    radial-gradient(circle at 85% 85%, var(--sh), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  background-attachment: fixed,fixed,fixed; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 20px clamp(12px,3vw,28px) 60px; }

.toolbar { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:12px; }
.toolbar .home { font-family:var(--font-display); font-size:.8rem; color:var(--ink-dim); text-decoration:none; }
.toolbar .home:hover { color:var(--accent); }
.toolbar .btns { display:flex; gap:8px; }
.toolbar button, .toolbar a.tabbtn { font-family: var(--font-display); font-size:.78rem; cursor:pointer; text-decoration:none; display:inline-block;
  background:var(--card); color:var(--ink); border:2px solid var(--card-edge); border-radius:30px; padding:7px 14px; box-shadow:var(--mold),var(--lift); }
.toolbar a.tabbtn.on { background:var(--accent); color:#fff; }

/* Prep/Cook mode toggle — one segmented pill, shown on the recipe card so the
   crew lands on the recipe and flips modes without an extra menu page. */
.mode-tgl { display:inline-flex; background:var(--wall); border:2px solid var(--card-edge); border-radius:30px; box-shadow:var(--press); overflow:hidden; }
.mode-tgl a { font-family:var(--font-display); font-size:.95rem; text-decoration:none; color:var(--ink-dim); padding:9px 20px; }
.mode-tgl a.on { background:var(--accent); color:#fff; box-shadow:var(--mold); border-radius:30px; }
@media (max-width:520px){ .mode-tgl a { padding:9px 14px; font-size:.88rem; } }

.card { background: var(--card); border:3px solid var(--card-edge); border-radius: 28px 34px 30px 36px; box-shadow: var(--mold), var(--lift-lg); padding: clamp(16px,2.6vw,30px); overflow:hidden; }

.rc-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; }
.rc-title h1 { font-family:var(--font-display); font-size:clamp(1.6rem,1rem+2.6vw,2.6rem); margin:0; color:var(--accent); letter-spacing:.5px; text-shadow:1px 1px 0 var(--hi), 2px 3px 4px var(--sh); }
.rc-title .es { color:var(--ink-dim); font-weight:600; font-size:1rem; margin-top:2px; }
.badges { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.badge { font-family:var(--font-display); font-size:.8rem; color:var(--ink); background:var(--c,var(--mint)); padding:8px 15px; border-radius:32px 36px 32px 36px; box-shadow:var(--mold); border:2px solid rgba(255,255,255,.25); }
.plaque { background:var(--brand-green); color:#f2d78d; }
.p-rose{--c:var(--rose);}.p-mint{--c:var(--mint);}.p-butter{--c:var(--butter);}.p-lilac{--c:var(--lilac);}.p-peach{--c:var(--peach);}

.allergen { display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; margin:16px 0; background:var(--warn); color:#fff; font-weight:800; letter-spacing:.5px; padding:12px 18px; border-radius:20px 26px 20px 26px; box-shadow: inset 2px 2px 5px rgba(255,255,255,.3), inset -3px -4px 8px rgba(0,0,0,.18), var(--lift); text-shadow:0 1px 1px rgba(0,0,0,.25); }
.allergen .big { font-family:var(--font-display); font-size:1.15rem; }

/* DRAFT strip — clay */
.draftstrip { margin:14px 0; background:repeating-linear-gradient(45deg,var(--butter),var(--butter) 14px,var(--peach) 14px,var(--peach) 28px); border:2px solid var(--accent); border-radius:18px 22px 18px 22px; padding:11px 16px; box-shadow:var(--mold); font-family:var(--font-display); font-size:.9rem; color:var(--ink); text-align:center; text-shadow:0 1px 1px var(--hi); }

.facts { display:flex; flex-wrap:wrap; gap:9px; margin:16px 0 18px; }
.fact { background:var(--wall); border:2px solid var(--card-edge); border-radius:16px 20px 16px 20px; padding:8px 14px; box-shadow:var(--press); font-size:.85rem; }
.fact b { font-family:var(--font-display); color:var(--ink); font-variant-numeric:tabular-nums; }
.fact.ccp { background:var(--peach); }

/* toggles (language / kettle) — clay pill group */
.toggles { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin:6px 0 16px; }
.tgl-label { font-family:var(--font-display); font-size:.72rem; text-transform:uppercase; letter-spacing:1px; color:var(--ink-dim); }
.tgl { display:inline-flex; background:var(--wall); border:2px solid var(--card-edge); border-radius:30px; box-shadow:var(--press); overflow:hidden; }
.tgl button { border:0; background:transparent; font-family:var(--font-display); font-size:.82rem; cursor:pointer; color:var(--ink-dim); padding:8px 16px; }
.tgl button.on { background:var(--accent); color:#fff; box-shadow:var(--mold); border-radius:30px; }

.legend { display:flex; flex-wrap:wrap; gap:14px; align-items:center; font-size:.8rem; color:var(--ink-dim); margin-bottom:14px; }
.legend span { display:inline-flex; align-items:center; gap:6px; }
.swatch { width:16px; height:16px; border-radius:5px; box-shadow:var(--mold); }

/* step bands */
.band { display:grid; grid-template-columns: 148px 1fr; gap:10px; margin-bottom:12px; }
.spine { background:var(--c,var(--mint)); border-radius:20px 8px 20px 8px; padding:14px 12px; box-shadow:var(--mold); border:2px solid rgba(255,255,255,.25); display:flex; flex-direction:column; gap:6px; justify-content:center; }
.spine .no { font-family:var(--font-display); font-size:1.5rem; line-height:1; color:var(--ink); }
.spine .lab { font-family:var(--font-display); font-size:.82rem; color:var(--ink); }
.spine .temp { font-size:.78rem; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.spine .flag { font-size:.72rem; font-weight:800; color:#7a2f26; background:rgba(255,255,255,.55); border-radius:10px; padding:2px 7px; align-self:flex-start; }
.tbtn { margin-top:4px; align-self:flex-start; cursor:pointer; font-family:var(--font-display); font-size:.72rem; color:var(--ink); background:rgba(255,255,255,.55); border:2px solid rgba(255,255,255,.5); border-radius:20px; padding:4px 10px; box-shadow:var(--mold); }
.tbtn:hover { background:#fff; }
/* inline step timer — lives in the green spine, never blocks the card */
.itimer { display:flex; align-items:center; gap:4px; margin-top:5px; background:var(--card); border:2px solid var(--card-edge); border-radius:16px; padding:3px 5px; box-shadow:var(--mold); align-self:flex-start; }
.itimer .tdisp { font-family:var(--font-display); font-size:1.2rem; color:var(--accent-deep); font-variant-numeric:tabular-nums; min-width:56px; text-align:center; }
.itimer.run .tdisp { color:var(--brand-green); }
.itimer.done .tdisp { color:var(--warn); animation:tflash 1s steps(2) infinite; }
@keyframes tflash { 50% { opacity:.3; } }
.itimer button { cursor:pointer; border:none; background:transparent; font-family:var(--font-display); font-size:1rem; color:var(--ink); padding:2px 5px; line-height:1; }
.itimer button:hover { color:var(--accent); }
.band.ccp .spine { background:var(--warn); color:#fff; } .band.ccp .spine .no,.band.ccp .spine .lab,.band.ccp .spine .temp { color:#fff; }
.band.cqp .spine { background:var(--lilac); }

.rows { background:var(--wall); border:2px solid var(--card-edge); border-radius:8px 20px 8px 20px; box-shadow:var(--press); overflow:hidden; padding:12px 14px; }
.rows .k { font-family:var(--font-display); font-size:.66rem; text-transform:uppercase; letter-spacing:.8px; color:var(--ink-dim); margin-bottom:2px; }
.rows .ing { font-size:.9rem; margin-bottom:8px; white-space:pre-line; }
.rows .task { font-size:.9rem; white-space:pre-line; }
.rows .pending { display:inline-block; font-size:.68rem; font-weight:800; color:#fff; background:var(--warn); border-radius:10px; padding:2px 8px; margin-left:6px; }

/* prep table inside a band */
.grid-scroll { overflow-x:auto; }
table.ing { width:100%; border-collapse:collapse; min-width:520px; }
table.ing th, table.ing td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--card-edge); vertical-align:middle; }
table.ing tr:last-child td { border-bottom:none; }
table.ing th { font-size:.66rem; text-transform:uppercase; letter-spacing:.8px; color:var(--ink-dim); font-family:var(--font-display); }
.part { font-variant-numeric:tabular-nums; font-weight:700; color:var(--ink-dim); font-size:.82rem; white-space:nowrap; }
.item b { color:var(--ink); } .item .note { display:block; font-size:.76rem; color:var(--ink-dim); }
.amt { font-variant-numeric:tabular-nums; font-weight:800; white-space:nowrap; }
.cont { font-variant-numeric:tabular-nums; font-weight:800; color:var(--accent-deep); white-space:nowrap; }
.milk { display:inline-block; font-size:.66rem; font-weight:800; color:#fff; background:var(--warn); padding:1px 7px; border-radius:10px; margin-left:4px; }
tr.combine td { background:rgba(192,177,214,.4); }

/* prep checkbox */
.chk { width:26px; height:26px; border:2px solid var(--accent); border-radius:8px; background:var(--card); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-display); color:transparent; box-shadow:var(--mold); font-size:1rem; }
tr.done .chk { background:var(--mint); color:var(--brand-green); }
tr.done .item, tr.done .part, tr.done .amt { opacity:.55; text-decoration:line-through; }

.callouts { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; margin-top:18px; }
.callout { background:var(--card); border:2px solid var(--card-edge); border-radius:18px 22px 18px 22px; padding:14px 16px; box-shadow:var(--mold),var(--lift); }
.callout h4 { margin:0 0 4px; font-family:var(--font-display); font-size:.92rem; color:var(--ink); display:flex; gap:8px; align-items:center; }
.callout p { margin:0; font-size:.84rem; color:var(--ink-dim); }

.watertable { max-width:420px; margin-top:6px; }
/* ── prep sheet, sized for the prep room ────────────────────────────────────
   Same complaint as the cook page, same answer. The pick list is genuinely
   tabular so it stays a table, but the parts a person acts on were the
   smallest things in it: column heads at .66rem, the ingredient at body size,
   and the note — which is where "mix with 5 gal water BEFORE addition" lives —
   at .76rem in --ink-dim, wrapping under the name as grey filler.
   Scoped to table.ing.prep so the water table and the legacy hand-coded cards
   keep their compact sizing. */
table.ing.prep th { font-size:.78rem; letter-spacing:.7px; color:var(--ink-dim); }
table.ing.prep td { padding:13px 12px; vertical-align:top; }
table.ing.prep .part { font-size:.98rem; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
/* Let the ingredient absorb the slack — everything else is nowrap, so without
   this the names wrap two-up while the numeric columns sit on empty space. */
table.ing.prep .item { width:99%; }
table.ing.prep .item b { font-size:1.1rem; font-weight:800; line-height:1.3; }
/* A note is an instruction, not a footnote. Full ink, its own indent rule, and
   room to breathe — it is the line that says water goes in first. */
table.ing.prep .item .note { display:block; margin-top:6px; font-size:.95rem; line-height:1.45;
  color:var(--ink); border-left:3px solid var(--accent); padding:2px 0 2px 10px; max-width:52ch; }
table.ing.prep .amt { font-size:1.15rem; font-weight:800; color:var(--ink); }
/* The container split is what the prep clerk actually builds to — chipped, the
   same butter-and-accent treatment the cook page's weight got. */
table.ing.prep .cont { color:var(--ink); }
table.ing.prep .cchip { display:inline-block; font-size:1.02rem; font-weight:800; color:var(--ink);
  background:var(--butter); border:1.5px solid var(--accent); border-radius:9px; padding:3px 10px;
  margin:2px 3px 2px 0; white-space:nowrap; box-shadow:var(--mold); }
table.ing.prep .chk { width:34px; height:34px; font-size:1.25rem; border-radius:10px; }
table.ing.prep .milk { font-size:.8rem; }
/* Done strikes the NAME. The amount and the containers stay readable, because
   that is what someone scans back to check against the containers in front of
   them. */
table.ing.prep tr.done .amt { opacity:1; text-decoration:none; }
table.ing.prep tr.done .cont { opacity:1; }
/* Printed prep sheets: keep the emphasis, drop the fill. Browsers strip
   backgrounds when printing anyway, and a page of solid butter chips is toner
   nobody asked for — an outline reads the same on paper. */
@media print {
  table.ing.prep .cchip { background:none; border:1.5px solid #777; box-shadow:none; padding:1px 6px; }
  table.ing.prep .item .note { border-left-color:#777; }
  table.ing.prep td { padding:7px 8px; }
}

.watertable table.ing { min-width:0; }

/* cook: dump checklist (verify each prepped container is added) */
.dump { margin-top:10px; background:var(--card); border:2px dashed var(--accent); border-radius:12px 16px 12px 16px; padding:11px 12px; box-shadow:var(--press); }
.dump .dhead { font-family:var(--font-display); font-size:.95rem; color:var(--accent-deep); display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:6px; }
.dump .dcount { font-family:var(--font-display); font-size:1.05rem; padding:3px 12px; color:var(--ink); background:var(--butter); border-radius:12px; padding:2px 10px; }
.dump .dcount.done { background:var(--mint); color:var(--brand-green); }
/* Sized for a tablet on the cook line, read at arm's length by someone holding
   a container. The old row put the ingredient at .95rem and ran "container 1/5 ·
   116 lb" after it at .74rem in --ink-dim — so the two numbers that say WHICH
   container and HOW MUCH were the faintest, smallest thing on the card. They are
   the instruction. They now sit on their own line, at full ink, as chips. */
.dchk { display:flex; align-items:flex-start; gap:14px; padding:11px 10px; border-radius:12px; cursor:pointer; min-height:58px; }
.dchk + .dchk { border-top:1px solid var(--card-edge); }
.dchk:hover { background:var(--wall); }
.dchk .box { width:36px; height:36px; border:2px solid var(--accent); border-radius:10px; background:var(--card); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:1.3rem; color:transparent; box-shadow:var(--mold); margin-top:1px; }
.dchk.on .box { background:var(--mint); color:var(--brand-green); }
.dchk .dtxt { display:flex; flex-direction:column; gap:5px; min-width:0; }
.dchk .lbl { font-size:1.12rem; font-weight:800; color:var(--ink); line-height:1.25; }
/* Done fades the NAME only. The container and weight stay fully legible so an
   operator can scan back and confirm what they already tipped in. */
.dchk.on .lbl { text-decoration:line-through; color:var(--ink-dim); }
.dchk .dmeta { display:flex; flex-wrap:wrap; align-items:center; gap:7px; font-variant-numeric:tabular-nums; }
.dchk .cn, .dchk .wt, .dchk .lot { border-radius:9px; padding:3px 10px; white-space:nowrap; box-shadow:var(--mold); }
.dchk .cn { font-size:.95rem; font-weight:700; color:var(--ink); background:var(--wall); }
/* The weight is the number being acted on — biggest, warmest, hardest to miss. */
.dchk .wt { font-size:1.05rem; font-weight:800; color:var(--ink); background:var(--butter); border:1.5px solid var(--accent); }
.dchk .lot { font-size:.9rem; font-weight:700; color:var(--ink); background:var(--peach); }
@media print { .dchk .box { -webkit-print-color-adjust:exact; print-color-adjust:exact; } }
.disclaimer { margin-top:18px; background:var(--peach); border-radius:18px 22px 18px 22px; padding:14px 18px; box-shadow:var(--mold); font-size:.86rem; color:var(--ink); }
.disclaimer b { font-family:var(--font-display); }
.version { margin-top:18px; font-size:.78rem; color:var(--ink-dim); }
.foot { text-align:center; margin-top:22px; font-size:.76rem; color:var(--ink-dim); }

/* timer modal */
.tmodal { position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(60,40,30,.45); }
.tmodal[hidden] { display:none; }
.tcard { width:min(360px,92vw); background:var(--card); border:3px solid var(--card-edge); border-radius:26px 32px 26px 32px; box-shadow:var(--mold),var(--lift-lg); padding:22px; text-align:center; }
.tm-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.tm-head span { font-family:var(--font-display); color:var(--brand-green); letter-spacing:.5px; }
.tm-x { cursor:pointer; border:none; background:transparent; font-size:1.1rem; color:var(--ink-dim); }
.tm-step { font-size:.85rem; color:var(--ink-dim); min-height:1.2em; margin-bottom:8px; }
.tm-display { font-family:var(--font-display); font-size:3rem; line-height:1; color:var(--accent); font-variant-numeric:tabular-nums; }
.tm-bar { height:12px; background:var(--wall); border-radius:8px; overflow:hidden; margin:14px 0; box-shadow:var(--press); }
.tm-bar i { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--mint),var(--butter),var(--peach),var(--warn)); transition:width .3s linear; }
.tm-controls { display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap; }
.tm-controls label { font-size:.8rem; color:var(--ink-dim); display:inline-flex; align-items:center; gap:6px; }
.tm-controls input { width:64px; font-size:1rem; padding:6px 8px; border:2px solid var(--card-edge); border-radius:12px; background:var(--wall); color:var(--ink); font-variant-numeric:tabular-nums; }
.tm-controls button { cursor:pointer; font-family:var(--font-display); font-size:.85rem; color:var(--ink); border:2px solid rgba(255,255,255,.4); border-radius:20px; padding:8px 16px; box-shadow:var(--mold); }
#tmStart { background:var(--mint); } #tmReset { background:var(--peach); }

.es-only{display:none;} .lang-es .en-only{display:none;} .lang-es .es-only{display:inline;}
@media (max-width:620px){ .band{grid-template-columns:1fr;} .spine{flex-direction:row;flex-wrap:wrap;align-items:center;border-radius:18px;} }
@media print { body{background:#fff;font-size:11px;} .toolbar,.tbtn,.tmodal,.toggles{display:none!important;} .card{box-shadow:none;border-color:#bbb;} .band{break-inside:avoid;} @page{size:letter landscape;margin:0.4in;} }