/* Pizza Night Calculator
   One deliberate look: a dark pizzeria board with tomato red, basil green and a mozzarella yellow for highlights.
   Layout: one column on phones; from 900px the settings sit sticky on the left of the recipe. Tabs in a sticky pill bar. */
/* Self-hosted fonts, latin subset, from Google Fonts on 3 Nov 2026 (SIL Open Font License: fonts/OFL-*.txt). */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/plex-sans-var.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/plex-mono-400.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/plex-mono-500.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Lilita One";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/lilita-one-400.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --bg:#161716; --surface:#1f201e; --surface-2:#2a2b28; --fg:#f3efe5; --muted:#aaa79b; --line:#3a3b35;
  --red:#e23b2c; --red-soft:#48201b; --green:#3fb763; --green-soft:#1f3a28; --yellow:#f2c14e; --yellow-soft:#3f3416;
  --cream:#f3e9d2;
  --font-display:"Lilita One","Arial Rounded MT Bold","Helvetica Neue",Arial,sans-serif;
  --font-body:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  /* type scale: xs labels, sm captions, md table and running text in panels, base, h2, tiles, h1 */
  --fs-xs:.68rem; --fs-sm:.8rem; --fs-md:.88rem; --fs-h2:1.3rem; --fs-tile:1.6rem; --fs-h1:clamp(2rem,6vw,2.8rem);
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
img{max-width:100%}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:15px;line-height:1.45;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-top:calc(env(safe-area-inset-top,0px) + 14px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 48px);
  -webkit-text-size-adjust:100%}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:10}
.wrap{max-width:1120px;margin:0 auto;display:grid;gap:14px;min-width:0}
.i{width:1em;height:1em;vertical-align:-.15em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

/* Hero: centred pizzeria lockup with a checkered rule */
.hero{display:grid;justify-items:center;text-align:center;gap:4px;padding-bottom:20px;position:relative}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;background:repeating-conic-gradient(var(--green) 0 25%,transparent 0 50%) 0 0/12px 12px}
.mark{width:54px;height:54px;margin-bottom:2px}
.tagline{font-family:var(--font-display);color:var(--red);font-size:var(--fs-md);letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.spark{color:var(--yellow);width:.9em;height:.9em;fill:currentColor;stroke:none}
.eyebrow{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0}
h1{font-family:var(--font-display);font-weight:400;font-size:var(--fs-h1);line-height:1;margin:0;text-wrap:balance;letter-spacing:.02em;text-transform:uppercase;color:var(--cream)}
h2{font-family:var(--font-display);font-weight:400;font-size:var(--fs-h2);line-height:1.15;margin:0 0 10px;letter-spacing:.02em;display:flex;align-items:center;gap:8px;color:var(--cream)}
h2 .i{color:var(--red);width:1em;height:1em;stroke-width:2.2}
h3{font-weight:600;font-size:var(--fs-md);margin:0 0 3px}
p{margin:0}
.lede{color:var(--muted);max-width:65ch;font-size:var(--fs-md)}
a{color:var(--yellow)}

/* Tabs */
.tabs-wrap{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);padding-block:4px}
.tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:3px}
.tabs a{display:flex;align-items:center;justify-content:center;gap:5px;padding:8px 2px;border-radius:9px;color:var(--muted);text-decoration:none;font-weight:500;font-size:var(--fs-md);white-space:nowrap;min-width:0}
.tabs a .i{width:1.05em;height:1.05em}
.tabs a[aria-selected="true"]{background:var(--red);color:#fff}
.tabs a:focus-visible{outline:2px solid var(--yellow);outline-offset:-2px}
@media (max-width:520px){.tabs a{flex-direction:column;gap:2px;font-size:var(--fs-xs);padding:6px 1px}.tabs a .i{width:1.15rem;height:1.15rem}}
.tabpanel{min-width:0}

/* Layout and panels */
.layout{display:grid;gap:14px;align-items:start;min-width:0}
@media (min-width:900px){
  .layout{grid-template-columns:minmax(0,390px) minmax(0,1fr)}
  .controls{position:sticky;top:calc(env(safe-area-inset-top,0px) + 52px);max-height:calc(100vh - 64px);overflow-y:auto}
}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;min-width:0}
.controls{display:grid;gap:10px}
.results{display:grid;gap:14px;min-width:0}
.narrow{max-width:720px}
.group-label{margin-top:4px;padding-top:10px;border-top:1px solid var(--line);color:var(--green)}
.field{display:grid;gap:5px;margin:0;padding:0;border:0;min-width:0}
label,legend{font-weight:500;font-size:var(--fs-md)}
legend{padding:0;margin-bottom:5px}
.legend-note{color:var(--muted);font-weight:400}
input[type=number],input[type=datetime-local],input[type=date],input[type=text],select{width:100%;font:inherit;font-size:16px;font-variant-numeric:tabular-nums;color:var(--fg);
  background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:7px 10px;min-height:40px}
/* iOS keeps the native date control's own minimum width and ignores width:100%; without its native look it fits the panel */
input[type=datetime-local],input[type=date]{-webkit-appearance:none;appearance:none;display:block;min-width:0;max-width:100%}
input::placeholder{color:var(--muted);opacity:.8}
input:focus-visible,select:focus-visible,button:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.seg input:focus-visible+span,.card input:focus-visible+.card-body{outline:2px solid var(--yellow);outline-offset:2px}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.row-2.tight{gap:8px}
.row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:360px){.row-3{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.row-2.stack{grid-template-columns:1fr}}
.stepper{display:grid;grid-template-columns:40px 1fr 40px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--bg)}
.stepper button{border:0;background:var(--surface-2);color:var(--fg);font-size:1.2rem;cursor:pointer;min-height:40px}
.stepper input{border:0;border-radius:0;text-align:center;background:transparent;min-height:40px}
.stepper.small{grid-template-columns:32px 1fr 32px}
.stepper.small button,.stepper.small input{min-height:32px;font-size:1rem}
.seg{display:grid;gap:5px;grid-template-columns:repeat(auto-fit,minmax(92px,1fr))}
.seg-4{grid-template-columns:repeat(2,1fr)}
@media (min-width:480px){.seg-4{grid-template-columns:repeat(4,1fr)}}
.seg-5{grid-template-columns:repeat(6,1fr)}
.seg-5 label{grid-column:span 2}
.seg-5 label:nth-child(4),.seg-5 label:nth-child(5){grid-column:span 3}
.seg label{position:relative;display:block;cursor:pointer;min-width:0}
.seg input,.card input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.seg span{display:grid;gap:1px;height:100%;padding:6px 4px;border:1px solid var(--line);border-radius:8px;background:var(--bg);text-align:center}
.seg b{font-weight:600;font-size:var(--fs-sm);line-height:1.2}
.seg small{color:var(--muted);font-size:var(--fs-xs);line-height:1.25}
.seg input:checked+span{background:var(--red-soft);border-color:var(--red)}
.cards{display:grid;gap:5px}
.card{position:relative;display:block;cursor:pointer;min-width:0}
.card-body{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1px 10px;align-items:center;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.card input:checked+.card-body{border-color:var(--red);background:var(--red-soft)}
.card-name{font-weight:600;font-size:var(--fs-md)}
.card-spec{grid-column:1;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--muted)}
.card-blurb{display:none;grid-column:1/-1;font-size:var(--fs-sm);color:var(--muted);padding-top:3px}
.card input:checked+.card-body .card-blurb{display:block}
.chip{grid-column:2;grid-row:1/3;font-size:var(--fs-xs);font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:999px;white-space:nowrap;align-self:center}
.chip.best{background:var(--green-soft);color:var(--green)}
.chip.good{background:var(--yellow-soft);color:var(--yellow)}
.chip.ok{background:var(--surface-2);color:var(--muted)}
.chip.avoid{background:var(--red-soft);color:var(--red);border:1px solid var(--red)}
.card input:checked+.card-body .chip.ok{background:var(--surface)}
.hint{font-size:var(--fs-sm);color:var(--muted)}
.link{background:none;border:0;padding:0;color:var(--yellow);font:inherit;font-size:var(--fs-sm);cursor:pointer;text-decoration:underline;justify-self:start}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.panel-head h2{margin:0}
.btn{font:inherit;font-size:var(--fs-md);font-weight:500;padding:0 11px;min-height:36px;border-radius:8px;border:1px solid var(--line);background:var(--surface-2);color:var(--fg);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.btn.primary{background:var(--red);color:#fff;border-color:var(--red)}
.copy-status{font-size:var(--fs-sm);color:var(--green);min-width:0}
.check{display:flex;align-items:center;gap:6px;font-size:var(--fs-md);font-weight:500;margin:0 0 8px}
.check input{accent-color:var(--red)}

/* Recipe */
.why{display:grid;gap:8px;margin:0 0 12px;max-width:72ch}
.why div{display:grid;gap:2px}
.why dt{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
.why dd{margin:0;font-size:var(--fs-md);color:var(--muted)}
.why-text{font-size:var(--fs-md);max-width:72ch}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:4px 0 10px}
@media (min-width:600px){.tiles{grid-template-columns:repeat(4,1fr)}}
.tile{padding:10px 12px;border-radius:9px;background:var(--surface-2);display:grid;gap:1px;align-content:start;min-width:0}
.tile .v{font-family:var(--font-display);font-size:var(--fs-tile);line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--yellow);letter-spacing:.01em}
.tile .v small{font-size:var(--fs-md);font-family:var(--font-body);color:var(--muted)}
.tile .l{font-size:var(--fs-md);font-weight:600}
.tile .s{font-size:var(--fs-sm);color:var(--muted)}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{padding:6px 5px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-size:var(--fs-md)}
th{font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:500}
.num{text-align:right;white-space:nowrap}
tfoot td{font-weight:600;border-bottom:0;color:var(--yellow)}
tr.group td{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--green);padding-top:12px}
.sub{display:block;font-size:var(--fs-sm);color:var(--muted);font-weight:400}
.ing .sub{display:inline;margin-left:6px}   /* "Water at 22 °C" on one line when it fits */
.notes{margin:10px 0 0;padding-left:16px;font-size:var(--fs-sm);color:var(--muted);display:grid;gap:3px}
.warn{margin-top:10px;padding:8px 10px;border-radius:8px;background:var(--yellow-soft);color:var(--fg);font-size:var(--fs-sm);border-left:3px solid var(--yellow)}
.warn+.warn{margin-top:6px}
#recovery{margin:10px 16px 0;position:relative;z-index:20}
.now-next{display:flex;flex-wrap:wrap;gap:2px 14px;margin:10px 0 0;padding:9px 12px;border-radius:10px;background:var(--surface);border-left:3px solid var(--yellow);color:var(--fg);text-decoration:none;font-size:var(--fs-sm)}
.now-next[hidden]{display:none}
.now-next b{color:var(--yellow);font-weight:600;margin-right:4px}
#recovery .btn{margin:6px 6px 0 0}

/* Shopping */
.menu{display:grid;gap:4px}
.menu-row{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:6px 10px;align-items:center}
.menu-row.custom .link{grid-column:1/-1;justify-self:end}
.add-top{display:grid;grid-template-columns:minmax(0,1fr) 110px auto;gap:6px;margin-top:10px}
@media (max-width:420px){.add-top{grid-template-columns:1fr 1fr}.add-top input[type=text]{grid-column:1/-1}}
.menu-name{font-size:var(--fs-md)}
.shop{list-style:none;margin:8px 0 0;padding:0;display:grid}
.shop li{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--line);font-size:var(--fs-md)}
.shop li:last-child{border-bottom:0}
.shop li.group{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--green);padding-top:10px}

/* Timeline */
.timeline{list-style:none;margin:0;padding:0;display:grid}
.timeline li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:8px;padding:7px 0 7px 14px;border-bottom:1px solid var(--line);position:relative}
.timeline li::before{content:"";position:absolute;left:0;top:13px;width:7px;height:7px;border-radius:50%;background:var(--line)}
.timeline li:last-child{border-bottom:0}
.timeline li.day{display:block;padding:14px 0 6px;font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--yellow);border-bottom:1px solid var(--yellow-soft)}
.timeline li.day:first-child{padding-top:4px}
.timeline li.day::before{display:none}
.timeline li.past{color:var(--muted)}
.timeline li.past b{font-weight:500}
.timeline li.next::before{background:var(--yellow);box-shadow:0 0 0 3px var(--yellow-soft)}
.timeline li.next time{color:var(--yellow)}
.timeline time{font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:500;padding-top:2px;white-space:nowrap;color:var(--green)}
.timeline li.past time{color:var(--muted)}
.timeline b{display:block;font-weight:600;font-size:var(--fs-md)}
.timeline span{font-size:var(--fs-sm);color:var(--muted)}

/* Tables in Notes */
.scroll{overflow-x:auto;min-width:0}
.cmp td,.cmp th{font-size:var(--fs-sm);min-width:130px}
.cmp td:first-child{font-weight:500;min-width:110px;color:var(--yellow)}
.reading{margin:0;padding-left:16px;display:grid;gap:5px;font-size:var(--fs-md);max-width:72ch}

/* Process */
.guide{display:grid;gap:10px;min-width:0}
.steps{list-style:none;margin:0;padding:0;counter-reset:step;display:grid;gap:8px}
.steps li{counter-increment:step;display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;padding:11px 13px;background:var(--surface);border:1px solid var(--line);border-radius:10px}
.steps li::before{content:counter(step) ".";font-family:var(--font-display);font-size:var(--fs-h2);color:var(--red);line-height:1;padding-top:1px}
.steps p{font-size:var(--fs-md);max-width:70ch}
.steps p+p{margin-top:5px}
.timer{display:grid;gap:8px}
.timer .check{margin:0}
.timer-face{display:grid;gap:1px;justify-items:center;padding:4px 0}
.timer-time{font-family:var(--font-mono);font-size:2.8rem;line-height:1;font-variant-numeric:tabular-nums;color:var(--yellow)}
.timer-stage{font-size:var(--fs-md);color:var(--muted)}
.timer-buttons{display:flex;gap:8px;justify-content:center}
.timer-buttons .btn{min-width:104px;justify-content:center}

/* Log */
.rating-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rating{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px;position:relative}
.rating input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.rating label{font-size:1.6rem;line-height:1;color:var(--line);cursor:pointer;padding:1px}
.rating label:hover,.rating label:hover~label,.rating input:checked~label{color:var(--yellow)}
.rating input:focus-visible+label{outline:2px solid var(--yellow);outline-offset:2px;border-radius:4px}
.log{list-style:none;margin:0;padding:0;display:grid}
.log li{display:grid;gap:2px;padding:8px 0;border-bottom:1px solid var(--line)}
.log li:last-child{border-bottom:0}
.log-head{display:flex;justify-content:space-between;gap:10px;font-size:var(--fs-md)}
.stars{color:var(--yellow);letter-spacing:.05em}
.log-meta{font-size:var(--fs-sm);color:var(--muted)}
.log-notes{font-size:var(--fs-md)}

footer{font-size:var(--fs-sm);color:var(--muted);max-width:78ch;display:grid;gap:4px}
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:10px 14px;border-radius:10px;font-size:.85rem;display:flex;gap:12px;align-items:center;box-shadow:0 6px 24px rgba(0,0,0,.4);max-width:calc(100vw - 32px)}
.toast button{font:inherit;font-weight:600;background:none;border:0;color:inherit;text-decoration:underline;cursor:pointer;padding:0}
@media (prefers-reduced-motion:no-preference){.seg span,.card-body,.btn,.tabs a{transition:background-color .15s,border-color .15s,color .15s}}