:root {
  --bg: #EEF1F0;
  --surface: #FFFFFF;
  --ink: #1E2B2F;
  --muted: #55656A;
  --line: #CDD7D5;
  --basil: #2E6B4B;
  --basil-ink: #FFFFFF;
  --crust: #C08A3E;
  --chill: #4A7BA6;
  --away: #AAB6B9;
  --on-crust: #1E2B2F;
  --on-chill: #FFFFFF;
  --fire: #C2402D;
  --active: #E3F0E8;
  --focus: #1F5FBF;
  color-scheme: light;
  --display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131B1E;
    --surface: #1B2528;
    --ink: #E6EEEB;
    --muted: #9AABAA;
    --line: #2E3C3F;
    --basil: #6DBE95;
    --basil-ink: #10241A;
    --crust: #D9A560;
    --chill: #7FA9CB;
    --away: #56666A;
    --on-crust: #10241A;
    --on-chill: #10241A;
    --fire: #E5715F;
    --active: #20362B;
    --focus: #8DB8FF;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #131B1E;
  --surface: #1B2528;
  --ink: #E6EEEB;
  --muted: #9AABAA;
  --line: #2E3C3F;
  --basil: #6DBE95;
  --basil-ink: #10241A;
  --crust: #D9A560;
  --chill: #7FA9CB;
  --away: #56666A;
  --on-crust: #10241A;
  --on-chill: #10241A;
  --fire: #E5715F;
  --active: #20362B;
  --focus: #8DB8FF;
  color-scheme: dark;
}
:root[data-theme="pizza"] {
  --bg: #F0E7D0;
  --surface: #FFFFFF;
  --ink: #3A2011;
  --muted: #7B5E46;
  --line: #EAD9B8;
  --basil: #547A30;
  --basil-ink: #FFFFFF;
  --crust: #F7AD45;
  --chill: #4A7BA6;
  --away: #C9B79A;
  --on-crust: #3A2011;
  --on-chill: #FFFFFF;
  --fire: #BB3E00;
  --active: #EAF1DE;
  --focus: #1F5FBF;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  -webkit-text-size-adjust: 100%;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  scroll-padding-top: calc(var(--bar-h, 0px) + env(safe-area-inset-top, 0px) + 20px);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.app { max-width: 1080px; margin: 0 auto; padding: 24px 16px 72px; }

h1, h2, h3, h4 { font-family: var(--display); margin: 0; line-height: 1.15; }
h1 { font-size: clamp(1.7rem, 4.5vw, 2.4rem); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 1.25rem; font-weight: 650; letter-spacing: -0.01em; }
.lede { margin: 6px 0 0; color: var(--muted); max-width: 60ch; }

/* Hero */
.hero {
  margin-top: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: clamp(18px, 4vw, 32px);
}
.hero-label { margin: 0; color: var(--muted); font-weight: 500; }
.hero-big {
  margin: 2px 0 0;
  font-family: var(--display);
  font-weight: 750;
  font-size: clamp(2.1rem, 7.5vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.hero-sub { margin: 8px 0 0; color: var(--muted); max-width: 62ch; }

.notice {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--crust);
  display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between;
}
.notice p { margin: 0; max-width: 60ch; }

/* The dough clock strip */
#barSentinel { height: 1px; margin-bottom: -1px; }
.barwrap { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; margin-top: 12px; }
.barcard { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 6px 14px 10px; }
.barwrap.stuck .barcard { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); }
/* Dev toggle (see app.js, owner-only): compares docked-bar treatments. */
.bar-style-original .barwrap { top: calc(env(safe-area-inset-top, 0px) + 8px); }
.corner-snap .barwrap.stuck .barcard { border-top-left-radius: 0; border-top-right-radius: 0; transition: border-radius 0.15s ease; }
.barcard .strip-wrap { padding-top: 22px; }
.barcard .strip { height: 34px; border-radius: 10px; }
.barcard .awaybar { height: 6px; margin-top: 4px; }
.barcard .ends { margin-top: 6px; font-size: 0.84rem; }
.barcard .legend { margin-top: 6px; font-size: 0.78rem; gap: 2px 14px; }
.strip-wrap { position: relative; padding-top: 22px; }
.strip-wrap.plain { padding-top: 0; }
.strip { display: flex; height: 46px; border-radius: 14px; overflow: hidden; }
.seg { position: relative; flex: 1 1 0; min-width: 4px; background: var(--c); }
.seg + .seg { box-shadow: inset 2px 0 0 var(--surface); }
.seg.work { --c: var(--basil); }
.seg.room { --c: var(--crust); }
.seg.fridge { --c: var(--chill); }

/* Drag grips on the editor bar */
.handle {
  position: absolute; top: 0; bottom: 0; right: -8px; width: 16px; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: col-resize; touch-action: none; outline-offset: -2px;
}
.seg:last-child .handle { right: 0; }
.handle::before {
  content: ""; width: 6px; height: 26px; border-radius: 3px;
  background: var(--surface); border: 2px solid var(--ink);
}
.handle:hover::before, .handle:focus-visible::before { height: 34px; }
#editStrip .strip { touch-action: none; }
#editBarWrap .barcard { padding-top: 10px; }
#stripArea .strip { touch-action: pan-y; }   /* up/down still scrolls the page; sideways scrubs the bar */
#editStrip.dragging { cursor: col-resize; user-select: none; -webkit-user-select: none; }
.now {
  position: absolute; top: 0; bottom: -6px; width: 0;
  border-left: 3px solid var(--ink);
  transform: translateX(-1.5px);
}
.now span {
  position: absolute; top: 0; left: 6px;
  font-size: 0.8rem; font-weight: 650; background: var(--ink); color: var(--bg);
  padding: 0 6px; border-radius: 6px; line-height: 1.5;
}
.ends { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 0.9rem; color: var(--muted); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 0.85rem; color: var(--muted); }
.legend li { display: flex; align-items: center; gap: 6px; }
.swatch { width: 12px; height: 12px; border-radius: 4px; background: var(--c); }
.swatch.work { --c: var(--basil); }
.swatch.room { --c: var(--crust); }
.swatch.fridge { --c: var(--chill); }

/* Extra time added around away periods, and the away bands under the bar */
.seg.ext { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.42) 0 4px, transparent 4px 9px); }
.seg.ext + .seg { box-shadow: none; }
.seg.gap { --c: var(--line); }
.awaybar { position: relative; height: 8px; margin-top: 6px; }
.awaybar span { position: absolute; top: 0; bottom: 0; background: var(--away); border-radius: 3px; }
.swatch.ext { --c: var(--muted); background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0 3px, transparent 3px 6px); }
.swatch.away { --c: var(--away); }

/* Custom tooltip for the bars */
#tip {
  position: fixed; z-index: 60; left: 0; top: 0; max-width: 280px; padding: 8px 12px; border-radius: 10px;
  background: var(--ink); color: var(--bg); font-size: 0.88rem; line-height: 1.4; pointer-events: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  opacity: 0; visibility: hidden; transition: opacity 0.08s, visibility 0s 0.08s;
}
#tip.show { opacity: 1; visibility: visible; transition-delay: 0s; }
.tip-title { font-weight: 700; }
.tip-muted { opacity: 0.75; }
.tip-ext { font-weight: 600; }
.tip-row { display: flex; justify-content: space-between; gap: 18px; }
.tip-row strong { white-space: nowrap; }

/* Help page */
.topbtns { display: flex; gap: 8px; flex: none; }
a.iconbtn, a.link-btn { text-decoration: none; }
a.link-btn { display: inline-flex; align-items: center; }
.helphead { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.helphead h1:focus { outline: none; }
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 4px; }
.toc a {
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.92rem;
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; background: var(--surface);
}
.hsec { margin-top: 16px; scroll-margin-top: 12px; }
.help h2 { margin-bottom: 10px; }
.help h3 { font-size: 1.02rem; font-weight: 650; margin: 16px 0 6px; }
.help p, .help ul, .help ol { margin: 0 0 10px; }
.help ul, .help ol { padding-left: 22px; }
.help li { margin-bottom: 6px; }
.help .swatch { display: inline-block; vertical-align: -1px; margin: 0 4px 0 2px; }
.help .demo { margin: 14px 0 6px; }
.help .hnote { color: var(--muted); font-size: 0.92rem; }
.helpfoot { margin: 22px 0 0; }

/* Start! button and the "making it" layout */
.herorow { display: flex; justify-content: space-between; align-items: center; gap: 16px 24px; flex-wrap: wrap; }
.herotxt { flex: 1 1 260px; min-width: 0; }
.btn.bigbtn {
  margin-left: auto; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 64px; padding: 0 34px; border-radius: 16px;
  font-family: var(--display); font-size: 1.5rem; font-weight: 750; letter-spacing: -0.01em;
}
.btn.bigbtn:not(.secondary) {
  box-shadow: 0 8px 20px rgba(46, 107, 75, 0.35), inset 0 -3px 0 rgba(0, 0, 0, 0.18);
  transition: transform 0.12s, box-shadow 0.12s;
}
.btn.bigbtn:not(.secondary):hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(46, 107, 75, 0.42), inset 0 -3px 0 rgba(0, 0, 0, 0.18); }
.btn.bigbtn:not(.secondary):active { transform: translateY(1px); box-shadow: 0 3px 8px rgba(46, 107, 75, 0.35), inset 0 -2px 0 rgba(0, 0, 0, 0.18); }
.btn.bigbtn.secondary { min-height: 48px; padding: 0 22px; font-size: 1.1rem; font-weight: 650; }
.btn.bigbtn.secondary .playicon { display: none; }
.playicon { flex: none; }
@media (prefers-reduced-motion: reduce) { .btn.bigbtn { transition: none !important; } }
.cols.running { grid-template-columns: minmax(0, 1fr); }

/* Sections you can minimise */
h2 .ptoggle {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0; margin: 0;
  background: none; border: 0; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer;
}
.ptoggle .ptitle { flex: none; }
.ptoggle .psum {
  display: none; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--body); font-size: 0.85rem; font-weight: 400; letter-spacing: 0; color: var(--muted);
}
.ptoggle .chev { flex: none; margin-left: auto; color: var(--muted); }
.panel.collapsed .ptoggle .psum { display: block; }
.panel.collapsed .ptoggle .chev { transform: rotate(-90deg); }
.panel.collapsed h2 { margin-bottom: 0; }
.panel.collapsed .tl-head { margin-bottom: 0; }
.panel.collapsed #resetChecks { display: none; }
.tl-head h2 { flex: 1 1 auto; min-width: 0; }
@media (max-width: 640px) { h2 .ptoggle { min-height: 44px; } }

/* Confirmation dialog */
.overlay { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, 0.45); }
.dialog { width: 100%; max-width: 440px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3); }
.dialog h2 { margin-bottom: 8px; }
.dialog p { margin: 0 0 6px; }
.dialog .fbtns { justify-content: flex-end; margin-bottom: 0; }
.btn.warn { background: var(--fire); border-color: var(--fire); color: #fff; }

/* Theme menu */
.themewrap { position: relative; flex: none; }
.themepanel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; width: min(230px, calc(100vw - 32px));
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.tbtn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px;
  background: none; border: 0; border-radius: 10px; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.tbtn small { display: block; color: var(--muted); font-size: 0.8rem; font-weight: 400; }
.tbtn[aria-pressed="true"] { background: var(--active); font-weight: 650; }
.tbtn .tick { visibility: hidden; color: var(--basil); }
.tbtn[aria-pressed="true"] .tick { visibility: visible; }

/* Saved file button and panel */
.top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.filewrap { position: relative; flex: none; }
.iconbtn {
  position: relative; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 12px;
}
.dot { position: absolute; top: 7px; right: 7px; width: 11px; height: 11px; border-radius: 50%; background: var(--basil); border: 2px solid var(--surface); }
.dot.warn { background: var(--crust); }
.filepanel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; width: min(380px, calc(100vw - 32px));
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  max-height: calc(100vh - 96px); overflow-y: auto;
}
.filepanel h2 { margin-bottom: 8px; }
.filepanel h3 { font-size: 1rem; font-weight: 650; margin: 14px 0 6px; }
.filepanel h2 + #fileBody > h3:first-child { margin-top: 4px; }
.filepanel p { margin: 0 0 10px; }
.filepanel .fine { margin: 10px 0 0; }
.fbtns { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.fbtns .btn, .fbtns .link-btn { min-height: 44px; }

/* Dev options button and panel (owner-only, see app.js) */
.devwrap { position: relative; flex: none; }
.devpanel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; width: min(300px, calc(100vw - 32px));
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.devpanel h2 { margin: 8px 8px 2px; font-size: 1rem; }
.devpanel > .fine { margin: 0 8px 8px; }
.ferr { color: var(--fire); }
.fgroup { padding-top: 4px; }
.link-btn.danger { color: var(--fire); border-color: var(--fire); }

/* Layout */
.cols.editing { grid-template-columns: minmax(0, 1fr); }
#editSentinel { height: 1px; margin-bottom: -1px; }
.barcard .strip-wrap.plain { padding-top: 0; }
#editHero .range { max-width: 560px; }
#editHero .hero-big { font-size: clamp(2rem, 6vw, 3.4rem); }
@media (min-width: 900px) {
  /* Summary on the left, the two planning boxes on the right, hints underneath */
  #editHero { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(230px, 480px); column-gap: 32px; align-items: center; }
  #editHero .hero-label, #editHero .hero-big { grid-column: 1; }
  #editHero .range { grid-column: 2; max-width: none; margin-top: 0; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
  #editHero .fine { grid-column: 1 / -1; }
}
.cols { display: grid; gap: 20px; margin-top: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .cols { grid-template-columns: 340px minmax(0, 1fr); align-items: start; }
  .settings {
    position: sticky; top: calc(var(--bar-h, 0px) + env(safe-area-inset-top, 0px) + 20px);
    max-height: calc(100vh - var(--bar-h, 0px) - env(safe-area-inset-top, 0px) - 32px);
    overflow-y: auto; padding: 3px; margin: -3px;
  }
}
/* Space the panels with a gap rather than margins, so a hidden panel (the editor) never pushes its neighbour down */
main, .settings { display: grid; gap: 16px; align-content: start; }
main > *, .settings > * { min-width: 0; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 18px; }
.panel h2 { margin-bottom: 12px; }

.field { display: block; margin: 0 0 14px; }
.field > span, legend { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 4px; padding: 0; }
.hint { color: var(--muted); font-weight: 400; }
fieldset { border: 0; margin: 0 0 14px; padding: 0; min-width: 0; }
fieldset:disabled { opacity: 0.55; }

input[type="number"], input[type="text"], input[type="datetime-local"], input[type="time"], select, textarea {
  width: 100%; font: inherit; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; min-height: 46px;
}
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row2 .field { margin-bottom: 0; }
.row2 + .field, .row2 + fieldset, .row2 + .row2 { margin-top: 14px; }
.editor .row2 { margin-bottom: 4px; }

.stepper { display: flex; align-items: stretch; gap: 8px; }
.stepper button {
  width: 52px; min-height: 46px; font: inherit; font-size: 1.4rem; font-weight: 600;
  background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
}
.stepper output { flex: 1; display: grid; place-items: center; font-family: var(--display); font-size: 1.5rem; font-weight: 700; }

.methods { display: grid; gap: 8px; }
.method { position: relative; display: block; cursor: pointer; }
.method input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.method .opt {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--bg);
}
.method .opt b { font-family: var(--display); font-weight: 650; overflow-wrap: anywhere; }
.method .opt small { color: var(--muted); white-space: nowrap; }
.method .minfo { display: inline-block; vertical-align: -2px; margin-left: 6px; color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
textarea { resize: vertical; min-height: 64px; line-height: 1.4; }
.method input:checked + .opt { border-color: var(--basil); box-shadow: inset 0 0 0 1px var(--basil); background: var(--active); }
.method input:focus-visible + .opt { outline: 3px solid var(--focus); outline-offset: 2px; }
.mbar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

table { width: 100%; border-collapse: collapse; }
th, td { padding: 8px 0; text-align: left; border-bottom: 1px solid var(--line); }
th { font-weight: 500; color: var(--muted); font-size: 0.85rem; }
td:nth-child(n+2), th:nth-child(n+2) { text-align: right; }
tbody td:nth-child(n+2) { font-weight: 650; }
tbody td:last-child { font-size: 1.05rem; }
tfoot td { border-bottom: 0; color: var(--muted); }
tfoot td:last-child { font-weight: 650; color: var(--ink); }
.fine { margin: 10px 0 0; color: var(--muted); font-size: 0.88rem; }
.fine:empty { display: none; }

.link-btn {
  font: inherit; font-size: 0.9rem; color: var(--ink); background: none; border: 1px solid var(--line);
  border-radius: 10px; padding: 6px 12px; cursor: pointer; min-height: 40px;
}
.btn {
  font: inherit; font-weight: 600; color: var(--basil-ink); background: var(--basil);
  border: 1px solid var(--basil); border-radius: 10px; padding: 10px 16px; min-height: 44px; cursor: pointer;
}
.btn.secondary { color: var(--ink); background: none; border-color: var(--line); }
.btn.danger { color: var(--fire); background: none; border-color: var(--fire); }

/* Method editor */
.erows { list-style: none; margin: 14px 0 0; padding: 0; }
.erow {
  --c: var(--basil);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "on time" "temp dur";
  gap: 2px 8px; align-items: center;
  border-left: 6px solid var(--c); padding: 10px 0 10px 12px; border-bottom: 1px solid var(--line);
}
.erow.work { --c: var(--basil); }
.erow.room { --c: var(--crust); }
.erow.fridge { --c: var(--chill); }
.erow.bake { --c: var(--fire); grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "on time"; }
.ehead { display: contents; }
.eon { grid-area: on; min-width: 0; display: flex; align-items: center; gap: 10px; font-weight: 600; min-height: 40px; }
.eon input { flex: none; width: 22px; height: 22px; accent-color: var(--basil); margin: 0; cursor: pointer; }
.eon input:disabled { cursor: not-allowed; }
.edur { grid-area: dur; display: flex; align-items: center; gap: 6px; align-self: center; justify-self: end; }
.edur input { width: 64px; min-height: 40px; padding: 6px 8px; text-align: right; }
.edur span { color: var(--muted); font-size: 0.9rem; }
.etime { grid-area: time; justify-self: end; align-self: center; white-space: nowrap; color: var(--muted); font-size: 0.92rem; }
.etemp {
  grid-area: temp; justify-self: start; display: inline-flex;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
}
.etemp label { position: relative; display: block; cursor: pointer; }
.etemp label + label { border-left: 1px solid var(--line); }
.etemp input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.etemp span { display: flex; align-items: center; min-height: 38px; padding: 0 9px; font-size: 0.88rem; font-weight: 600; color: var(--muted); }
.etemp input:checked + span { color: var(--on-crust); background: var(--crust); }
.etemp input[value="fridge"]:checked + span { color: var(--on-chill); background: var(--chill); }
.etemp input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: -3px; }
.erow.off .eon span, .erow.off .edur, .erow.off .etemp { opacity: 0.5; }
/* When the editor is wide enough, put the durations on the right and the temperature toggle under the step name */
.editor { container-type: inline-size; }
@container (min-width: 560px) {
  .erow, .erow.bake { grid-template-columns: 1fr 116px 196px; grid-template-areas: "on time dur" "temp time dur"; row-gap: 0; }
  .erow.bake { grid-template-areas: "on time dur"; }
  .ehead { display: contents; }
  .eon { grid-area: on; }
  .etime { grid-area: time; justify-self: start; align-self: start; line-height: 40px; white-space: nowrap; }
  .edur { justify-content: flex-end; }
  .etemp { justify-self: start; margin: 0 0 4px 32px; }
}
.preview { margin-top: 18px; }
.range { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 12px; }
.range .field { margin: 0; }
.sum { margin: 12px 0 0; }
.sum span { display: block; }
.actions { display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: space-between; margin-top: 18px; }
.grp { display: flex; flex-wrap: wrap; gap: 8px; }

/* Away periods */
.intro { margin: 0 0 14px; }
.away { padding: 14px 0; border-top: 1px solid var(--line); }
.away:first-child { border-top: 0; padding-top: 0; }
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.days label { position: relative; display: block; cursor: pointer; }
.days input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.days span {
  display: flex; align-items: center; justify-content: center; min-height: 40px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg);
  font-weight: 600; font-size: 0.9rem; color: var(--muted);
}
.days input:checked + span { background: var(--basil); border-color: var(--basil); color: var(--basil-ink); }
.days input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.atimes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; margin-top: 10px; }
.atimes .field { margin: 0; }
.ahead { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.aon { display: flex; align-items: center; gap: 10px; font-weight: 600; min-height: 40px; cursor: pointer; }
.aon input { width: 22px; height: 22px; accent-color: var(--basil); margin: 0; cursor: pointer; }
.away.off .days, .away.off .atimes { opacity: 0.5; }
#awayMsg span { display: block; }
#awayMsg { margin-top: 12px; }

/* Timeline */
.tl-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 4px; }
.timeline { list-style: none; margin: 0; padding: 0; }
.day { margin: 22px 0 8px; }
.day h3 { font-size: 1rem; font-weight: 650; color: var(--muted); }
.step {
  --c: var(--basil);
  display: grid; grid-template-columns: 92px 1fr auto; gap: 6px 14px; align-items: start;
  background: var(--surface); border: 1px solid var(--line); border-left: 7px solid var(--c);
  border-radius: 6px 16px 16px 6px; padding: 14px 14px 14px 12px; margin-bottom: 8px;
}
.step.work { --c: var(--basil); }
.step.room { --c: var(--crust); }
.step.fridge { --c: var(--chill); }
.step.gap { --c: var(--line); border-style: dashed; border-left-style: solid; }
.extnote { display: flex; align-items: center; gap: 8px; }
.extnote .swatch { flex: none; }
.step.bake { --c: var(--fire); }
.step.is-active { background: var(--active); border-color: var(--basil); border-left-color: var(--c); }
.step.is-past, .step.is-done { opacity: 0.6; }
.step.is-done h4 { text-decoration: line-through; text-decoration-thickness: 1px; }
.when time { display: block; font-family: var(--display); font-weight: 700; font-size: 1.15rem; line-height: 1.2; }
.when .dur { display: block; font-size: 0.85rem; color: var(--muted); }
.what h4 { font-size: 1.08rem; font-weight: 650; }
.what p { margin: 4px 0 0; color: var(--muted); max-width: 60ch; }
.qty { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.qty li { background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 4px 10px; }
.qty .n { font-family: var(--display); font-weight: 700; font-size: 1.15rem; margin-right: 6px; }
.qty .l { color: var(--muted); font-size: 0.92rem; }
.done { display: flex; align-items: center; gap: 8px; cursor: pointer; min-height: 44px; padding: 0 4px; font-size: 0.92rem; }
.done input { width: 24px; height: 24px; accent-color: var(--basil); margin: 0; cursor: pointer; }

@media (max-width: 560px) {
  .step { grid-template-columns: 1fr auto; }
  .when { grid-column: 1 / -1; display: flex; gap: 10px; align-items: baseline; }
  .when time { display: inline; }
  .what { grid-column: 1; }
  .done { grid-column: 2; grid-row: 2; align-self: start; }
}
@media (prefers-reduced-motion: no-preference) {
  .now { transition: left 0.6s ease; }
}
/* Phones: space is tight, so everything is a little smaller and denser */
@media (max-width: 560px) {
  html { font-size: 14.5px; }
  body { line-height: 1.4; }
  input, select, textarea { font-size: 16px; }          /* 16px stops iOS zooming into a field */
  .app { padding: 12px 12px 56px; }
  h1 { font-size: 1.4rem; }
  .top .lede { display: none; }
  .top { gap: 10px; align-items: center; }
  .iconbtn { width: 40px; height: 40px; border-radius: 10px; }
  .topbtns { gap: 6px; }
  .top h1 { font-size: 1.6rem; }
  .dot { top: 5px; right: 5px; }

  .hero { margin-top: 12px; padding: 14px; border-radius: 16px; }
  .hero-label { font-size: 0.85rem; }
  .hero-big { font-size: 1.75rem; }
  .hero-sub { font-size: 0.85rem; margin-top: 4px; }
  .herorow { flex-wrap: nowrap; gap: 12px; }
  .herotxt { flex: 1 1 0; }
  .btn.bigbtn { min-height: 52px; padding: 0 18px; font-size: 1.15rem; gap: 8px; border-radius: 14px; }
  .btn.bigbtn.secondary { min-height: 42px; padding: 0 14px; font-size: 0.95rem; }
  .playicon { width: 18px; height: 18px; }
  .notice { margin-top: 10px; padding: 10px 12px; gap: 8px 12px; font-size: 0.88rem; }
  .notice .btn { min-height: 38px; padding: 6px 14px; font-size: 0.9rem; }

  .barwrap { margin-top: 10px; }
  .barcard { padding: 4px 10px 8px; border-radius: 14px; }
  .barcard .strip-wrap { padding-top: 19px; }
  .barcard .strip-wrap.plain { padding-top: 0; }
  .barcard .strip { height: 26px; border-radius: 8px; }
  .barcard .awaybar { height: 5px; margin-top: 3px; }
  .barcard .ends { margin-top: 4px; font-size: 0.76rem; }
  .barcard .legend { margin-top: 4px; font-size: 0.7rem; gap: 1px 10px; }
  .swatch { width: 10px; height: 10px; }
  .now span { font-size: 0.7rem; }
  #editBarWrap .barcard { padding-top: 8px; }

  .cols { gap: 10px; margin-top: 10px; }
  main, .settings { gap: 10px; }
  .panel { padding: 12px; border-radius: 14px; }
  .panel h2 { font-size: 1.05rem; margin-bottom: 8px; }
  h2 .ptoggle { min-height: 40px; }
  .field { margin-bottom: 10px; }
  .field > span, legend { font-size: 0.85rem; margin-bottom: 3px; }
  input[type="number"], input[type="text"], input[type="datetime-local"], input[type="time"], select, textarea { min-height: 40px; padding: 7px 10px; }
  .row2 { gap: 8px; }
  .stepper button { width: 46px; min-height: 40px; font-size: 1.2rem; }
  .stepper output { font-size: 1.25rem; }
  .methods { gap: 6px; }
  .method .opt { padding: 7px 10px; border-radius: 10px; }
  .mbar { margin-top: 8px; }
  .link-btn { min-height: 38px; padding: 5px 12px; font-size: 0.88rem; }
  .btn { min-height: 42px; padding: 8px 14px; }
  .fbtns .btn, .fbtns .link-btn { min-height: 40px; }
  .fine { font-size: 0.8rem; }

  /* Your plan: pizzas and yeast share a row */
  #planBody { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; }
  #planBody > * { margin-top: 0; }
  #planBody > label.field:first-child { grid-column: 1 / -1; order: 1; }
  #planBody > #methodSet { grid-column: 1 / -1; order: 2; }
  #planBody > #msg { grid-column: 1 / -1; order: 3; }
  #planBody > #ballsField { order: 4; }
  #planBody > #yeastField { order: 5; }
  #planBody > .row2 { grid-column: 1 / -1; order: 6; margin-bottom: 10px; }

  .away { padding: 10px 0; }
  .days span { min-height: 36px; }
  .atimes { margin-top: 8px; }
  .ahead { margin-bottom: 8px; }

  th, td { padding: 6px 0; }

  /* Schedule cards: time and Done on one line, then the step and its amounts across the full width */
  .day { margin: 12px 0 6px; }
  .step { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "when done" "what what"; gap: 0 8px; padding: 8px 10px; border-left-width: 5px; margin-bottom: 6px; }
  .when { grid-area: when; align-self: center; }
  .what { grid-area: what; }
  .done { grid-area: done; grid-row: auto; min-height: 30px; align-self: center; font-size: 0.85rem; padding: 0; }
  .done input { width: 22px; height: 22px; }
  .when time { font-size: 1.05rem; }
  .when .dur { font-size: 0.78rem; }
  .what h4 { font-size: 0.98rem; }
  .what p { font-size: 0.85rem; margin-top: 2px; }
  .qty { gap: 5px; margin-top: 6px; }
  .qty li { padding: 2px 8px; }
  .qty .n { font-size: 1rem; margin-right: 4px; }
  .qty .l { font-size: 0.8rem; }

  /* Editing */
  #editHero .hero-big { font-size: 1.6rem; }
  #editHero .fine { font-size: 0.78rem; margin-top: 6px; }
  #editHero .range { margin-top: 10px; gap: 8px; }
  .erow { padding: 5px 0 5px 10px; }
  .eon { min-height: 34px; font-size: 0.95rem; gap: 8px; }
  .eon span { white-space: nowrap; }
  .eon input { width: 20px; height: 20px; }
  .edur { gap: 4px; }
  .edur input { width: 54px; min-height: 38px; padding: 4px 6px; }
  .edur span { font-size: 0.8rem; }
  .etemp span { min-height: 32px; padding: 0 8px; font-size: 0.82rem; }
  .etemp { margin: 0 0 2px; }
  .etime { font-size: 0.8rem; }
  .actions { margin-top: 12px; }
  .toc a { padding: 5px 12px; }
}
@media (max-width: 380px) {
  .top h1 { font-size: 1.45rem; }
}

/* First-run tutorial: four rectangles tile the screen around the current target, dimming and blocking
   everything else without covering the target itself - simple z-index tricks don't reliably win against
   ancestors like .settings or .barwrap that form their own stacking context (position: sticky). */
.tutdim { position: fixed; z-index: 90; background: rgba(15, 20, 20, 0.6); }
.tutring { position: fixed; z-index: 91; pointer-events: none; outline: 3px solid var(--focus); outline-offset: 6px; border-radius: 14px; }
.tutpop {
  position: fixed; z-index: 92; width: min(320px, calc(100vw - 32px));
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
.tutpop h2 { font-size: 1.05rem; margin: 2px 0 6px; }
.tutpop p#tutBody { margin: 0; color: var(--muted); }
.tutpop .tutbtns { margin: 14px 0 0; justify-content: space-between; align-items: center; }
/* On the "here's your answer" step, Start! and the notice buttons (Use that time, Switch to fridge...) sit inside
   the highlighted card - freeze them so a first-time user can look without accidentally acting on them yet. */
#planHero.tut-frozen #startBtn, #planHero.tut-frozen #notice button { pointer-events: none; opacity: 0.45; }
.tutpop #tutBack:disabled { opacity: 0.4; }