/* One typeface, one accent, a flush-left column. The grid is the only picture.
   Sizes come from one scale and spacing from one line; see the tokens below. */
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/font.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}
:root {
  --paper: #f4f4f1;
  --ink: #141514;
  --muted: #5d625e;
  --rule: #d6d8d3;
  --faint: #e7e8e4;
  --field: #ffffff;
  --prep: #ffffff;
  --stove: #d9dbd6;
  --oven: #efd9c4;
  --wait: #f4f4f1;
  --hands: rgba(20, 21, 20, 0.16);
  --clash: #d0281c;
  --sans: "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Type scale: one ratio, 1.2 (a minor third), six steps. */
  --s-2: 0.694rem;   /* 11.1px  grid labels, counters */
  --s-1: 0.833rem;   /* 13.3px  small text, buttons */
  --s0: 1rem;        /* 16px    body */
  --s1: 1.2rem;      /* 19.2px  lede, summary, titles */
  --s4: 2.074rem;    /* 33.2px  headline on phones */
  --s6: 2.986rem;    /* 47.8px  headline on wider screens */
  /* Rhythm: the body line is 24px; every line-height, margin and padding is a multiple of a quarter of it. */
  --q: 0.375rem;     /* 6px  */
  --h: 0.75rem;      /* 12px */
  --u: 1.5rem;       /* 24px, one body line */
  --u1h: 2.25rem;    /* 36px */
  --u2: 3rem;        /* 48px */
  --u3: 4.5rem;      /* 72px */
  --lh-s: 1.125rem;  /* 18px for small text */
  --lh-0: 1.5rem;    /* 24px for body, 1.5 */
  --lh-1: 1.875rem;  /* 30px for the lede */
  --lh-1t: 1.5rem;   /* 24px for one-line titles at step 1 */
  --measure: 52ch;   /* about 65 characters a line in this face */
  --oven-ink: #8e5829; /* the oven color, deepened to 5.3:1 on paper */
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #111312; --ink: #ebece8; --muted: #9ca29d; --rule: #2c312e; --faint: #1c201e; --field: #181b19;
    --prep: #1c201e; --stove: #2f3431; --oven: #4a3727; --wait: #111312; --hands: rgba(235, 236, 232, 0.16);
    --clash: #ff6a5c; --oven-ink: #d8a579; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #111312; --ink: #ebece8; --muted: #9ca29d; --rule: #2c312e; --faint: #1c201e; --field: #181b19;
  --prep: #1c201e; --stove: #2f3431; --oven: #4a3727; --wait: #111312; --hands: rgba(235, 236, 232, 0.16);
  --clash: #ff6a5c; --oven-ink: #d8a579; color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 var(--s0)/var(--lh-0) var(--sans);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}
.wrap {
  max-width: 1080px; margin: 0 auto;
  padding-left: max(1rem, env(safe-area-inset-left, 0px));
  padding-right: max(1rem, env(safe-area-inset-right, 0px));
}
button { font: inherit; color: inherit; text-wrap: balance; }
h1, h2, .demo-name, .summary, .tour-title { text-wrap: balance; }
p, li { text-wrap: pretty; }
.vh, .hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Header */
.top { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--h); padding-bottom: var(--h); border-bottom: 1px solid var(--rule); }
.mark { font-weight: 600; letter-spacing: -0.01em; }
.status, .label, .kicker { font-size: var(--s-1); line-height: var(--lh-s); color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; }

/* Intro */
.intro { padding-top: var(--u2); padding-bottom: 0; }
h1 { margin: 0 0 var(--h); font-size: var(--s4); line-height: 2.25rem; font-weight: 600; letter-spacing: -0.025em; max-width: 15em; }
h1 > span { display: block; text-wrap: balance; }
h1 .oven-line { color: var(--oven-ink); }
.lede { margin: 0; font-size: var(--s1); line-height: var(--lh-1); max-width: var(--measure); color: var(--ink); }

/* Inputs */
.inputs { padding-top: var(--u); }
.dishes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); counter-reset: dish; }
.dish { counter-increment: dish; display: grid; grid-template-columns: 1.6em 1fr auto; gap: 0 var(--h); align-items: center; padding: var(--q) 0; border-bottom: 1px solid var(--rule); }
.dish::before { content: counter(dish); color: var(--muted); font-size: var(--s-1); }
.dish input[type=url] {
  width: 100%; min-width: 0; font: inherit; color: var(--ink); background: transparent;
  border: 0; padding: var(--q) 0; outline: none;
}
.dish input[type=url]::placeholder { color: var(--muted); }
.dish .state { grid-column: 2 / 4; font-size: var(--s-1); line-height: var(--lh-s); padding-bottom: var(--q); color: var(--muted); min-height: 0; }
.dish .state:empty { display: none; }
.dish .state.err { color: var(--clash); }
.dish .done-title { font-weight: 500; }
.dish .x { border: 0; background: none; color: var(--muted); padding: var(--q); cursor: pointer; font-size: var(--s-1); }
.dish:focus-within { border-bottom-color: var(--ink); }
.row-actions { margin: var(--h) 0 0; display: flex; flex-wrap: wrap; gap: var(--q) var(--h); align-items: baseline; }
.sep { color: var(--rule); }
.link { border: 0; background: none; padding: var(--q) 0; color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; cursor: pointer; font-size: var(--s-1); line-height: var(--lh-s); }
.link:hover { text-decoration-color: var(--ink); }
.link[disabled] { color: var(--muted); cursor: default; text-decoration: none; }
.paste { margin-top: var(--h); }
.paste textarea {
  display: block; width: 100%; margin-top: var(--q); font: inherit; font-size: var(--s-1); line-height: var(--lh-s); color: var(--ink);
  background: var(--field); border: 1px solid var(--rule); border-radius: 2px; padding: var(--h); resize: vertical;
}
.msg { font-size: var(--s-1); line-height: var(--lh-s); color: var(--muted); }
.msg.err { color: var(--clash); }
.msg.ok { color: var(--ink); }

.settings { display: flex; flex-wrap: wrap; gap: var(--h) var(--u); margin-top: var(--u); padding-top: var(--h); border-top: 1px solid var(--rule); }
.field { display: flex; flex-direction: column; gap: var(--q); border: 0; margin: 0; padding: 0; min-width: 0; }
.field input[type=time] {
  font: inherit; font-size: var(--s1); line-height: var(--lh-1t); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--ink);
  padding: 0; border-radius: 0; min-width: 7.5em; font-variant-numeric: tabular-nums;
}
.toggles legend { padding: 0; margin-bottom: var(--q); }
.toggles button {
  border: 1px solid var(--rule); background: transparent; padding: var(--q) var(--h); min-width: 42px; min-height: 36px; cursor: pointer; margin-right: -1px;
}
.toggles button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); position: relative; }

/* Buttons */
.quiet, .primary {
  border: 1px solid var(--ink); background: transparent; color: var(--ink); padding: 8px var(--h); border-radius: 2px; cursor: pointer; font-size: var(--s-1); line-height: var(--lh-s); font-weight: 500;
}
.primary { background: var(--ink); color: var(--paper); }
.quiet:hover { background: var(--ink); color: var(--paper); }
.quiet[disabled], .primary[disabled] { opacity: 0.5; cursor: default; }

/* Result */
.result { padding-top: var(--u1h); }
.summary { font-size: var(--s1); line-height: var(--lh-1t); margin-bottom: var(--h); max-width: var(--measure); }
.summary strong { font-variant-numeric: tabular-nums; }
.summary strong { font-weight: 600; }
.clashes { list-style: none; margin: 0 0 var(--h); padding: 0; }
.clashes li { display: flex; flex-wrap: wrap; gap: var(--q) var(--h); align-items: baseline; padding: var(--q) 0; border-top: 1px solid var(--rule); font-size: var(--s-1); line-height: var(--lh-s); }
.clashes li::before { content: ""; width: 8px; height: 8px; background: var(--clash); flex: 0 0 8px; transform: translateY(-1px); }
.clashes li.soft::before { background: transparent; border: 1px solid var(--clash); }
.clashes li.all::before { display: none; }
.clashes li.all .link { font-weight: 600; }
.clashes .what { flex: 1 1 16em; max-width: var(--measure); }

.grid-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -1rem; padding: 0 1rem; }
.grid { position: relative; min-width: 100%; text-wrap: wrap; }
.more { margin: 0 0 var(--q); }
.g-head { display: flex; position: relative; }
.g-head .h { padding: 0 var(--q) var(--q) var(--q); font-size: var(--s-1); line-height: var(--lh-s); overflow: hidden; }
.g-head .h b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; }
.g-head .h a { color: var(--muted); text-decoration: none; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-body { position: relative; border-top: 1px solid var(--ink); }
.g-line { position: absolute; left: 44px; right: 0; border-top: 1px solid var(--faint); }
.g-line.hour { border-top-color: var(--rule); }
.g-tick { position: absolute; left: 0; width: 40px; font-size: var(--s-2); color: var(--muted); transform: translateY(-50%); text-align: right; padding-right: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.g-gap { position: absolute; left: 44px; right: 0; display: flex; align-items: center; justify-content: center; font-size: var(--s-2); color: var(--muted);
  background: repeating-linear-gradient(-45deg, transparent 0 5px, var(--faint) 5px 6px); }
.g-gap span { background: var(--paper); padding: 0 6px; }
.g-band { position: absolute; left: 40px; width: 3px; background: var(--clash); }
.blk {
  position: absolute; border: 1px solid var(--muted); background: var(--prep); overflow: hidden; padding: 3px 5px; cursor: pointer;
  font-size: var(--s-2); line-height: 13px; text-align: left; border-radius: 1px; color: var(--ink); text-wrap: wrap;
}
.blk.stove { background: var(--stove); }
.blk.oven { background: var(--oven); }
.blk.wait, .blk.rest { background: repeating-linear-gradient(-45deg, var(--wait) 0 5px, var(--faint) 5px 6px); border-style: dashed; }
.blk .hands { position: absolute; left: 0; right: 0; top: 0; background: var(--hands); pointer-events: none; }
.blk .t { position: relative; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-weight: 500; line-height: 13px; overflow-wrap: anywhere; }
.blk .m { position: relative; color: var(--muted); font-variant-numeric: tabular-nums; }
.blk.clash { border: 2px solid var(--clash); }
.blk.sel { outline: 2px solid var(--ink); outline-offset: 1px; z-index: 2; }
.g-hold { position: absolute; border-left: 1px dashed var(--muted); pointer-events: none; }
.g-hold::before { content: ""; position: absolute; left: -1px; top: 0; width: 6px; border-top: 1px solid var(--muted); }
.g-hold span { position: absolute; left: 6px; right: 0; top: -2px; font-size: var(--s-2); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.detail .hold { flex: 1 1 100%; margin: 0; color: var(--muted); }
.g-sit { position: absolute; left: 0; right: 0; border-top: 2px solid var(--ink); }
.g-sit span { position: absolute; left: 44px; top: var(--q); font-size: var(--s-1); line-height: var(--lh-s); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Step detail: a sheet fixed to the bottom, so tapping a step never scrolls the grid away. */
.detail { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; max-width: 720px; margin: 0 auto; max-height: 60vh; overflow: auto;
  background: var(--paper); padding: var(--h) 1rem calc(var(--h) + env(safe-area-inset-bottom)); border-top: 2px solid var(--ink);
  box-shadow: 0 -8px 24px rgba(0,0,0,.12); font-size: var(--s-1); line-height: var(--lh-s); display: flex; flex-wrap: wrap; gap: var(--q) var(--h); align-items: baseline; }
.detail[hidden] { display: none; }
.detail .what { flex: 1 1 100%; font-size: var(--s0); line-height: var(--lh-0); }
.detail .what b { font-weight: 600; }
.detail input { width: 4.5em; font: inherit; color: var(--ink); background: var(--field); border: 1px solid var(--rule); padding: var(--q); border-radius: 2px; font-variant-numeric: tabular-nums; }
.key { display: flex; flex-wrap: wrap; gap: var(--q) var(--h); margin: var(--u1h) 0 0; font-size: var(--s-1); line-height: var(--lh-s); color: var(--muted); }
.key span { display: inline-flex; align-items: center; gap: var(--q); }
.sw { display: inline-block; width: 14px; height: 10px; border: 1px solid var(--muted); }
.sw.prep { background: var(--prep); } .sw.stove { background: var(--stove); } .sw.oven { background: var(--oven); }
.sw.wait { background: repeating-linear-gradient(-45deg, var(--wait) 0 3px, var(--faint) 3px 4px); border-style: dashed; }
.sw.hands { background: var(--hands); }
.sw.hold { width: 6px; height: 12px; border: 0; border-left: 1px dashed var(--muted); border-top: 1px solid var(--muted); background: none; }

.kicker { margin: var(--u2) 0 var(--h); }
.steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.steps li { display: grid; grid-template-columns: 4.6em 1fr; gap: 0 var(--h); padding: var(--q) 0; border-bottom: 1px solid var(--rule); }
.steps .at { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.steps .what { max-width: var(--measure); }
.steps .what span { color: var(--muted); }
.steps li.pre .what { color: var(--muted); }
.steps li.clash .at { color: var(--clash); }
.steps .day { display: block; font-size: var(--s-2); line-height: var(--lh-s); color: var(--muted); font-weight: 400; }
.fine { font-size: var(--s-1); line-height: var(--lh-s); color: var(--muted); max-width: var(--measure); margin: var(--h) 0 0; }

/* Extension and price */
.extension, .price { padding-top: var(--u); }
.body { margin: 0 0 var(--h); max-width: var(--measure); }
.capture { margin-top: var(--q); max-width: var(--measure); }
form.join { display: flex; gap: var(--q); flex-wrap: wrap; }
form.join input[type=email] {
  flex: 1 1 220px; min-width: 0; font: inherit; color: var(--ink); background: var(--field);
  border: 1px solid var(--rule); padding: var(--q) var(--h); border-radius: 2px;
}
form.join input[type=email]:focus { border-color: var(--ink); outline: none; }

footer { margin-top: var(--u2); padding-top: var(--h); padding-bottom: var(--u2); border-top: 1px solid var(--rule); font-size: var(--s-1); line-height: var(--lh-s); color: var(--muted); }
footer p { max-width: var(--measure); margin: 0 0 var(--h); }
footer strong { color: var(--ink); font-weight: 500; }

@media (min-width: 760px) {
  .intro { padding-top: var(--u3); }
  h1 { font-size: var(--s6); line-height: 3.375rem; }
  .dish input[type=url] { font-size: var(--s1); line-height: var(--lh-1t); }
}
@media print {
  .inputs, .extension, .price, footer, .row-actions, .detail { display: none !important; }
  body { background: #fff; }
}

/* Hero and why */
.cta { display: flex; flex-wrap: wrap; gap: var(--h); align-items: center; margin: var(--u) 0 0; }
.big { font-size: var(--s0); line-height: var(--lh-0); padding: 11px 18px; }
.intro .fine { margin-top: var(--h); }
.why { padding-top: var(--u1h); }
.why .body { margin: var(--q) 0 0; }
.inputs .kicker { margin: 0 0 var(--h); }
.why .kicker { margin: 0; }

/* Demo mode */
.demo-bar { padding-top: var(--u1h); scroll-margin-top: var(--h); }
.demo-name { font-size: var(--s1); line-height: var(--lh-1t); font-weight: 600; margin: 0; }
.demo-line { margin: var(--q) 0 0; max-width: var(--measure); }
.hints { margin: var(--q) 0 0; font-size: var(--s-1); line-height: var(--lh-s); color: var(--muted); max-width: var(--measure); }
.demo-actions { margin: var(--h) 0 0; display: flex; gap: var(--h); align-items: center; flex-wrap: wrap; }
.demo-bar + .result { padding-top: var(--u); }
.sitbar { display: flex; align-items: center; gap: var(--q); margin: 0 0 var(--h); }
.sitbar .label { margin-right: 4px; }
.sit-time { font-weight: 600; min-width: 5.5em; text-align: center; font-variant-numeric: tabular-nums; }
.nudge { border: 1px solid var(--rule); background: transparent; min-width: 44px; min-height: 36px; padding: 0 var(--q); line-height: var(--lh-s); cursor: pointer; font-size: var(--s-1); border-radius: 2px; }
.nudge:hover { border-color: var(--ink); }
.detail .move { flex: 1 1 100%; margin: 0; display: flex; gap: var(--q); align-items: center; flex-wrap: wrap; }
.detail .move .label { margin-right: 4px; }

/* Moving blocks by hand */
.blk { touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; transition: transform .12s ease-out; }
@media (pointer: fine) { .blk { cursor: grab; } .blk:active { cursor: grabbing; } }
.blk.lift { box-shadow: 0 4px 14px rgba(0,0,0,.18) !important; z-index: 3; }
.blk .tip { position: absolute; right: 4px; bottom: 3px; font-size: var(--s-2); font-weight: 600; background: var(--paper); padding: 0 4px; border-radius: 2px; }

/* Guided tour */
.touring .intro, .touring .why, .touring .inputs, .touring .demo-bar, .touring .extension, .touring .price, .touring footer,
.touring .key, .touring #summary, .touring #clashes, .touring .result .kicker, .touring #steps, .touring .result .fine, .touring #detail, .touring .sitbar { display: none !important; }
.touring .result { padding-top: var(--h); }
.touring .clashes { pointer-events: none; }
.touring .grid-scroll { overflow: hidden; margin: 0; padding: 0; border: 1px solid var(--rule); }
.touring .grid { transform-origin: 0 0; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.touring .blk { cursor: default; transition: opacity .4s; }
.grid.dim .blk:not(.tour-hi), .grid.dim .g-hold:not(.tour-hi) { opacity: .28; }
.tour-hi { outline: 2px solid var(--clash); outline-offset: 2px; }
.g-sit.tour-hi { outline: none; border-top-color: var(--clash); }
.summary strong.tour-hi { outline-offset: 4px; }
.blk.tour-hi { outline: none; }
.tour {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: max(12px, env(safe-area-inset-bottom, 0px));
  width: min(560px, calc(100% - 24px)); background: var(--paper); border: 1px solid var(--ink); border-radius: 3px;
  padding: var(--h) 18px; box-shadow: 0 8px 30px rgba(0,0,0,.18); z-index: 10;
}
.tour-count { margin: 0; font-size: var(--s-2); line-height: var(--lh-s); color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.tour-title { margin: var(--q) 0 0; font-size: var(--s1); line-height: var(--lh-1t); font-weight: 600; letter-spacing: -0.01em; }
.tour-line { margin: var(--q) 0 var(--h); }
.tour-actions { display: flex; justify-content: space-between; align-items: center; gap: var(--h); margin: 0; flex-wrap: wrap; }
.tour-nav { display: flex; gap: var(--q); }
@media (prefers-reduced-motion: reduce) { .touring .grid, .blk { transition: none !important; } }
.g-free { position: absolute; right: 0; background: color-mix(in srgb, var(--clash) 10%, transparent); border-top: 1px dashed var(--clash); border-bottom: 1px dashed var(--clash); pointer-events: none; }
.summary.flash { animation: flash 1s ease-out; }
@keyframes flash { from { background: color-mix(in srgb, var(--clash) 22%, transparent); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .summary.flash { animation: none; } }
.g-free.tour-hi { outline: none; }

/* Name placeholder: no product name is chosen yet, so every slot is marked to be swapped later. */
.form-help { margin: 0 0 var(--h); max-width: var(--measure); }

/* Human check: Cloudflare's widget runs out of sight, and the panel shows only when it needs a click.
   It is clipped, not display: none, because the check has to run inside it. */
.human { position: fixed; left: 0; bottom: 0; width: 1px; height: 1px; overflow: hidden; }
.human p { display: none; }
.human.show { left: 0; right: 0; bottom: var(--u); z-index: 40; width: max-content; height: auto; max-width: calc(100% - 2rem); margin: 0 auto; overflow: visible;
  background: var(--field); border: 1px solid var(--rule); padding: var(--h) var(--h) var(--q); box-shadow: 0 8px 30px rgba(0,0,0,.18); }
.human.show p { display: block; margin: 0 0 var(--q); font-size: var(--s-1); line-height: var(--lh-s); color: var(--muted); }