/*
 * The Pass — a restaurant kitchen's pass, picked by Daniel on 2026-10-05 from six
 * directions. Each day's dinner is a ticket on a steel rail; tonight's hangs
 * under the heat lamp. The list prints like a docket; a day with no cooking is
 * "86". Brisk, practical, made for a counter with wet hands: big type, a real
 * kitchen timer, nothing to read twice.
 *
 * Light: brushed steel and thermal paper. Dark: a black pass with lit tickets.
 * Archivo narrowed for names and buttons, Fragment Mono for anything printed,
 * Permanent Marker only on masking-tape labels.
 */

:root {
  --steel-1: #D6DBDF;
  --steel-2: #BCC3C8;
  --brush: rgba(255, 255, 255, .14);
  --on-steel: #17181A;
  --on-steel-mute: #535A60;
  --row: rgba(255, 255, 255, .58);
  --row-line: rgba(23, 24, 26, .08);
  --paper: #FCFCFA;
  --paper-lit: #FFF6E2;
  --ink: #17181A;
  --ink-mute: #5E656B;
  --dash: #9AA0A5;
  --red: #C3202B;
  --red-ink: #FFFFFF;
  --lamp: #F4A62A;
  --lamp-glow: rgba(255, 190, 80, .38);
  --tape: #ECE3BF;
  --tape-ink: #1D1D1D;
  --nav: #2A2E31;
  --nav-fg: #AEB5BA;
  --nav-on: #FFFFFF;
  --rail-hi: #F4F6F7;
  --rail-mid: #9AA3A9;
  --rail-lo: #6D767C;
  --ok: #2F7A4A;
  --field: #FFFFFF;
  --field-line: #7E878E;
  --lcd: #1B1D1F;
  --lcd-digit: #FF4A3A;
  --shadow: rgba(0, 0, 0, .35);
  --scrim: rgba(18, 20, 22, .55);
  --display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --ui: 'Archivo', system-ui, sans-serif;
  --mono: 'Fragment Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --marker: 'Permanent Marker', 'Comic Sans MS', cursive;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --steel-1: #25292C;
    --steel-2: #181B1E;
    --brush: rgba(255, 255, 255, .025);
    --on-steel: #E6E9EB;
    --on-steel-mute: #9AA3A9;
    --row: rgba(255, 255, 255, .06);
    --row-line: rgba(255, 255, 255, .08);
    --paper: #EEECE5;
    --paper-lit: #F8ECCF;
    --lamp-glow: rgba(255, 170, 60, .22);
    --nav: #0F1112;
    --rail-hi: #6F787E;
    --rail-mid: #3C4348;
    --rail-lo: #24292D;
    --field: #2A2F33;
    --field-line: #59626A;
    --shadow: rgba(0, 0, 0, .6);
    --scrim: rgba(0, 0, 0, .65);
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --steel-1: #25292C;
  --steel-2: #181B1E;
  --brush: rgba(255, 255, 255, .025);
  --on-steel: #E6E9EB;
  --on-steel-mute: #9AA3A9;
  --row: rgba(255, 255, 255, .06);
  --row-line: rgba(255, 255, 255, .08);
  --paper: #EEECE5;
  --paper-lit: #F8ECCF;
  --lamp-glow: rgba(255, 170, 60, .22);
  --nav: #0F1112;
  --rail-hi: #6F787E;
  --rail-mid: #3C4348;
  --rail-lo: #24292D;
  --field: #2A2F33;
  --field-line: #59626A;
  --shadow: rgba(0, 0, 0, .6);
  --scrim: rgba(0, 0, 0, .65);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font: 400 15px/1.45 var(--ui);
  color: var(--on-steel);
  background: repeating-linear-gradient(90deg, var(--brush) 0 1px, transparent 1px 3px), linear-gradient(var(--steel-1), var(--steel-2)) fixed;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--lamp); outline-offset: 2px; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

.i { width: 22px; height: 22px; fill: currentColor; flex: none; }

/* ---------------------------------------------------------------- frame */

.app { min-height: 100%; display: grid; grid-template-rows: auto 1fr auto; max-width: 760px; margin: 0 auto; position: relative; }
.lamp { position: fixed; inset: 0 0 auto; height: 220px; pointer-events: none; background: radial-gradient(55% 75% at 30% 0%, var(--lamp-glow), transparent 70%); z-index: 0; }
.bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: calc(env(safe-area-inset-top, 0px) + 10px) 14px 8px; background: linear-gradient(var(--steel-1) 70%, transparent); }
.bar h1 { margin: 0; font: 900 28px/1 var(--display); font-stretch: 72%; letter-spacing: .01em; }
.bar .sub { font-size: 12.5px; font-weight: 600; font-stretch: 85%; color: var(--on-steel-mute); margin-left: 2px; }
.bar .actions { margin-left: auto; display: flex; gap: 4px; }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--on-steel); cursor: pointer; }
.icon-btn:hover { background: var(--row); }
main { position: relative; z-index: 1; padding: 4px 0 calc(env(safe-area-inset-bottom, 0px) + 84px); min-width: 0; }
.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: grid; grid-template-columns: repeat(4, 1fr); max-width: 760px; margin: 0 auto; background: var(--nav); padding: 6px 0 calc(env(safe-area-inset-bottom, 0px) + 8px); }
.nav a { display: grid; justify-items: center; gap: 2px; padding: 6px 0 8px; text-decoration: none; color: var(--nav-fg); font: 700 13.5px/1 var(--display); font-stretch: 80%; letter-spacing: .02em; }
.nav a .i { width: 22px; height: 22px; }
.nav a[aria-current='page'] { color: var(--nav-on); box-shadow: inset 0 -3px 0 var(--lamp); }
.nav a .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); position: absolute; margin-left: 22px; }

.page { padding: 4px 14px 16px; display: grid; gap: 12px; }
.lead { margin: 0; color: var(--on-steel-mute); font-size: 14px; }
.label { margin: 10px 0 0; font: 700 12.5px/1.2 var(--display); font-stretch: 85%; color: var(--on-steel-mute); letter-spacing: .02em; }
.empty { padding: 22px 14px; text-align: center; color: var(--on-steel-mute); }
.empty strong { display: block; font: 800 18px/1.2 var(--display); font-stretch: 80%; color: var(--on-steel); margin-bottom: 4px; }

/* ---------------------------------------------------------------- buttons */

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 7px 14px; border-radius: 3px; border: 1px solid var(--field-line); background: var(--row); color: var(--on-steel); font: 800 14.5px/1 var(--display); font-stretch: 80%; letter-spacing: .02em; cursor: pointer; text-decoration: none; }
.btn:hover { border-color: var(--on-steel-mute); }
.btn.fire { background: var(--red); border-color: var(--red); color: var(--red-ink); }
.btn.ink { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn.small { min-height: 32px; padding: 5px 10px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: default; }
.btns { display: flex; flex-wrap: wrap; gap: 8px; }
.linkish { border: 0; background: none; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; }

/* ---------------------------------------------------------------- tape + stamp */

.tape { display: inline-block; font: 400 13px/1.25 var(--marker); color: var(--tape-ink); background: var(--tape); padding: 2px 7px; transform: rotate(-2deg); box-shadow: 0 1px 1px rgba(0,0,0,.18); white-space: nowrap; }
.stamp { display: inline-block; color: var(--red); border: 2px solid var(--red); font: 900 15px/1.2 var(--display); font-stretch: 70%; padding: 0 6px; transform: rotate(-9deg); letter-spacing: .03em; }

/* ---------------------------------------------------------------- the rail */

.week-head { display: flex; align-items: center; gap: 6px; padding: 0 14px; }
.week-head .when { font: 700 13px/1 var(--display); font-stretch: 85%; color: var(--on-steel-mute); }
.week-head .icon-btn { width: 34px; height: 34px; }
.rail { height: 12px; margin-top: 8px; background: linear-gradient(var(--rail-hi), var(--rail-mid) 55%, var(--rail-lo)); box-shadow: 0 2px 3px var(--shadow); }
.tickets { display: flex; gap: 12px; padding: 0 14px 14px; margin-top: -6px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.tickets::-webkit-scrollbar { display: none; }

.ticket {
  flex: none; width: 152px; min-height: 196px; position: relative; scroll-snap-align: start;
  background: var(--paper); color: var(--ink); font: 400 11.5px/1.5 var(--mono);
  padding: 16px 10px 16px; border: 0; text-align: left; cursor: pointer;
  box-shadow: 0 7px 12px -7px var(--shadow);
  -webkit-mask: linear-gradient(#000, #000) top/100% calc(100% - 6px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom/10px 6px repeat-x;
  mask: linear-gradient(#000, #000) top/100% calc(100% - 6px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom/10px 6px repeat-x;
}
.ticket::before { content: ''; position: absolute; inset: 0 0 auto; height: 10px; background: linear-gradient(var(--rail-mid), var(--steel-1)); }
.ticket.lit { background: linear-gradient(var(--paper-lit), var(--paper) 70%); box-shadow: 0 0 0 1px rgba(244,166,42,.35), 0 12px 28px -8px rgba(244,166,42,.75); }
.ticket .stamp { position: absolute; right: 7px; top: 20px; opacity: .92; }
.ticket hr, .docket hr { border: 0; border-top: 1px dashed var(--dash); margin: 6px 0; }
.ticket b { display: block; font-weight: 400; font-size: 13px; line-height: 1.3; }
.ticket .red { color: var(--red); }
.ticket .meal { color: var(--ink-mute); }
.ticket.off { background: transparent; color: var(--on-steel); box-shadow: none; outline: 2px dashed var(--field-line); outline-offset: -8px; -webkit-mask: none; mask: none; }
.ticket.off::before { display: none; }
.ticket.add { display: grid; place-items: center; text-align: center; background: transparent; color: var(--on-steel-mute); box-shadow: none; outline: 2px dashed var(--field-line); outline-offset: -8px; -webkit-mask: none; mask: none; font: 700 14px/1.3 var(--display); font-stretch: 85%; }
.ticket.add::before { display: none; }

.rows { display: grid; gap: 8px; padding: 0 14px; }
.row { text-decoration: none; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--row); border-radius: 4px; padding: 8px 10px 8px 6px; border: 0; text-align: left; color: inherit; cursor: pointer; width: 100%; }
.row .tape { justify-self: center; }
.row strong { display: block; font: 700 15px/1.25 var(--ui); }
.row span.n { font-size: 12.5px; color: var(--on-steel-mute); }
.row.off strong { color: var(--red); font-stretch: 82%; }
.row .chev { color: var(--on-steel-mute); }

/* ---------------------------------------------------------------- docket (list, recipe) */

.docket {
  background: var(--paper); color: var(--ink); font: 400 12.5px/1.65 var(--mono); padding: 14px 13px 16px; box-shadow: 0 7px 14px -9px var(--shadow);
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top/10px 6px repeat-x, linear-gradient(#000, #000) center/100% calc(100% - 12px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom/10px 6px repeat-x;
  mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top/10px 6px repeat-x, linear-gradient(#000, #000) center/100% calc(100% - 12px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom/10px 6px repeat-x;
}
.docket .h { text-align: center; text-transform: uppercase; }
.docket .sec { color: var(--red); text-transform: uppercase; margin-top: 6px; }
.docket .tot { display: flex; justify-content: space-between; gap: 8px; text-transform: uppercase; }
.docket .meta { color: var(--ink-mute); font-size: 11.5px; }
.li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 6px; align-items: start; padding: 3px 0; cursor: pointer; border: 0; background: none; color: inherit; font: inherit; text-align: left; width: 100%; }
.li .box { width: 15px; height: 15px; border: 1.5px solid var(--ink); margin-top: 4px; display: grid; place-items: center; font-size: 11px; line-height: 1; }
.li .what { text-transform: uppercase; min-width: 0; overflow-wrap: anywhere; }
.li .what small { display: block; text-transform: none; color: var(--ink-mute); font-size: 11px; line-height: 1.35; }
.li .amt { text-align: right; white-space: nowrap; text-transform: uppercase; }
.li .amt small { display: block; color: var(--ink-mute); font-size: 11px; }
.li.got { color: #8A9095; }
.li.got .what span { text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.li.got .box { border-color: #8A9095; color: var(--red); }
.li.queued .box { border-style: dashed; }
.list-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.adder { display: flex; gap: 8px; }
.adder input { flex: 1; min-width: 0; }
.adder select { width: auto; flex: none; max-width: 40%; }
.offline { display: flex; gap: 8px; align-items: center; background: var(--tape); color: var(--tape-ink); padding: 8px 10px; font-size: 13px; border-radius: 3px; }

/* ---------------------------------------------------------------- fields */

input[type='text'], input[type='search'], input[type='number'], input[type='password'], input[type='date'], input[type='time'], input:not([type]), select, textarea {
  background: var(--field); color: var(--on-steel); border: 1px solid var(--field-line); border-radius: 4px; padding: 9px 11px; min-height: 42px; width: 100%; min-width: 0;
}
textarea { resize: vertical; line-height: 1.45; }
.field { display: grid; gap: 4px; }
.field > span { font: 700 12.5px/1.2 var(--display); font-stretch: 85%; color: var(--on-steel-mute); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { border: 1px solid var(--field-line); background: var(--row); border-radius: 3px; padding: 6px 10px; font: 700 13px/1 var(--display); font-stretch: 85%; cursor: pointer; color: var(--on-steel); }
.seg button[aria-pressed='true'] { background: var(--on-steel); color: var(--steel-2); border-color: var(--on-steel); }

/* ---------------------------------------------------------------- book */

.search { position: sticky; top: 58px; z-index: 3; }
.book { display: grid; gap: 8px; }
.book .row { grid-template-columns: minmax(0, 1fr) auto; padding-left: 12px; }
.book .row .rt { text-align: right; font: 400 12px/1.4 var(--mono); color: var(--on-steel-mute); white-space: nowrap; }
.stars { color: var(--lamp); letter-spacing: 1px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags button { border: 0; background: none; padding: 0; cursor: pointer; }

.recipe-head { background: var(--paper); color: var(--ink); padding: 14px 13px 10px; font: 400 12px/1.5 var(--mono); }
.recipe-head h2 { margin: 0; font: 900 25px/1.08 var(--display); font-stretch: 74%; text-wrap: balance; }
.recipe-head .meta { color: var(--ink-mute); text-transform: uppercase; margin-top: 4px; }
.scaler { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.scaler button { width: 30px; height: 30px; border: 1px solid var(--ink); background: transparent; color: var(--ink); font: 700 16px/1 var(--mono); cursor: pointer; }
.allday { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1px 10px; text-transform: uppercase; }
.allday .q { text-align: right; white-space: nowrap; }
.allday .n { color: var(--ink-mute); text-transform: none; font-size: 11px; }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 10px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; }
.steps li::before { content: counter(s); font: 900 20px/1.1 var(--display); font-stretch: 72%; color: var(--red); }
.steps li .t { font: 400 12px/1.4 var(--mono); color: var(--on-steel-mute); display: block; margin-top: 2px; }
.note-card { background: var(--row); border-left: 3px solid var(--lamp); padding: 9px 11px; border-radius: 0 4px 4px 0; font-size: 14px; }
.unclear { background: var(--tape); color: var(--tape-ink); padding: 8px 10px; font-size: 13.5px; border-radius: 3px; }

/* ---------------------------------------------------------------- cook mode */

.cook { padding: 4px 14px 16px; display: grid; gap: 12px; }
.cook .dish { font: 900 22px/1.1 var(--display); font-stretch: 74%; }
.cook .done-steps { font-size: 13px; color: var(--on-steel-mute); text-decoration: line-through; text-decoration-color: var(--red); }
.now { background: var(--ink); color: var(--paper); border-radius: 4px; padding: 14px 15px; }
.now small { display: block; font: 800 12.5px/1.2 var(--display); font-stretch: 80%; color: var(--lamp); letter-spacing: .04em; }
.now p { margin: 6px 0 0; font: 600 21px/1.32 var(--ui); }
.timer { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; background: var(--lcd); border: 3px solid #5D666C; border-radius: 6px; padding: 10px 14px; color: #B6BDC2; }
.timer b { font: 400 54px/1 var(--mono); color: var(--lcd-digit); letter-spacing: .02em; text-shadow: 0 0 12px rgba(255,74,58,.55); font-variant-numeric: tabular-nums; }
.timer.ringing b { animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .25; } }
.timer span { font-size: 12.5px; text-align: right; line-height: 1.35; }
.listen { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--on-steel-mute); }
.listen .live { width: 9px; height: 9px; border-radius: 50%; background: var(--red); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.heard { font: 400 12.5px/1.4 var(--mono); color: var(--on-steel-mute); min-height: 18px; }

/* ---------------------------------------------------------------- talk */

.talk { display: grid; grid-template-rows: 1fr auto; min-height: calc(100dvh - 150px); }
.thread { display: flex; flex-direction: column; gap: 12px; padding: 6px 14px 14px; }
.you { align-self: flex-end; max-width: 86%; background: var(--nav); color: #fff; border-radius: 12px 12px 3px 12px; padding: 9px 12px; font-size: 14.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.you .files { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.you .files img { max-width: 120px; max-height: 120px; border-radius: 3px; display: block; }
.you .files a { color: #fff; font-size: 12.5px; }
.work { font: 600 12.5px/1.35 var(--ui); font-stretch: 88%; color: var(--on-steel-mute); }
.jq { position: relative; max-width: 94%; background: var(--paper); color: var(--ink); padding: 14px 13px 11px; font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 5px 10px -8px var(--shadow); }
.jq::before { content: 'JACQUES'; position: absolute; top: -7px; left: 8px; font: 400 10.5px/1.4 var(--mono); background: var(--red); color: #fff; padding: 0 6px; }
.jq .bigger { display: block; font: 400 10.5px/1.4 var(--mono); color: var(--ink-mute); margin-top: 6px; }
.jq audio { display: block; width: 100%; margin-bottom: 8px; }
.held { background: var(--tape); color: var(--tape-ink); padding: 10px 12px; border-radius: 3px; display: grid; gap: 8px; }
.working { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--on-steel-mute); }
.working .dots { display: inline-flex; gap: 3px; }
.working .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--red); animation: pulse 1.2s infinite; }
.working .dots i:nth-child(2) { animation-delay: .2s; }
.working .dots i:nth-child(3) { animation-delay: .4s; }
.composer { position: sticky; bottom: calc(env(safe-area-inset-bottom, 0px) + 72px); padding: 8px 12px; display: grid; gap: 6px; background: linear-gradient(transparent, var(--steel-2) 30%); }
.composer .rowc { display: flex; align-items: flex-end; gap: 8px; }
.composer .box { flex: 1; display: flex; align-items: flex-end; gap: 4px; background: var(--paper); color: var(--ink); border: 1px solid var(--field-line); border-radius: 6px; padding: 4px 4px 4px 12px; min-width: 0; }
.composer textarea { border: 0; background: transparent; color: var(--ink); padding: 8px 0; min-height: 38px; max-height: 192px; resize: none; }
.composer textarea:focus { outline: none; }
.composer .box .icon-btn { color: var(--ink-mute); }
.go { width: 46px; height: 46px; border-radius: 4px; border: 0; background: var(--red); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }
.go.recording { background: var(--ink); color: var(--lcd-digit); }
.pending { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--tape); color: var(--tape-ink); padding: 3px 4px 3px 9px; font-size: 12.5px; border-radius: 3px; }
.chip button { border: 0; background: none; cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 5px; color: inherit; }
.drop-hint { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: var(--scrim); color: #fff; font: 900 26px/1 var(--display); font-stretch: 75%; pointer-events: none; }

/* ---------------------------------------------------------------- settings, notebook, pantry */

.card { background: var(--row); border-radius: 4px; padding: 12px; display: grid; gap: 8px; }
.card p { margin: 0; }
.setting { display: grid; gap: 4px; padding: 10px 0; border-top: 1px solid var(--row-line); }
.setting .name { font: 800 15px/1.2 var(--display); font-stretch: 85%; }
.setting .desc { font-size: 13px; color: var(--on-steel-mute); }
.setting .control { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.setting .control > input, .setting .control > select { flex: 1 1 200px; }
.setting .src { font-size: 12px; color: var(--on-steel-mute); }
.notes { display: grid; gap: 6px; }
.notes .item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; background: var(--row); padding: 8px 10px; border-radius: 4px; }
.changes { display: grid; gap: 4px; font-size: 13px; color: var(--on-steel-mute); }
.changes div { display: flex; gap: 8px; justify-content: space-between; align-items: baseline; }
.pantry-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; background: var(--row); padding: 8px 10px; border-radius: 4px; }
.pantry-item .levels { grid-column: 1 / -1; }
.pantry-item small { color: var(--on-steel-mute); font-size: 12px; }
.lvl-out strong { color: var(--red); }
.shop-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; background: var(--row); padding: 9px 11px; border-radius: 4px; font-size: 14px; }
.shop-row small { grid-column: 1 / -1; color: var(--on-steel-mute); font-size: 12.5px; }
.ok { color: var(--ok); }
.bad { color: var(--red); }

/* ---------------------------------------------------------------- sheet, toast, login */

dialog.sheet { border: 0; padding: 0; width: min(100%, 560px); max-height: 88dvh; margin: auto auto 0; background: var(--steel-1); color: var(--on-steel); border-radius: 10px 10px 0 0; box-shadow: 0 -10px 40px var(--shadow); }
dialog.sheet::backdrop { background: var(--scrim); }
dialog.sheet .in { padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 18px); display: grid; gap: 12px; overflow: auto; max-height: 88dvh; }
dialog.sheet h3 { margin: 0; font: 900 22px/1.1 var(--display); font-stretch: 74%; }
@media (min-width: 640px) { dialog.sheet { margin: auto; border-radius: 10px; } }

.toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 88px); transform: translate(-50%, 20px); opacity: 0; z-index: 30; background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: 4px; font-size: 14px; max-width: calc(100% - 32px); transition: opacity .2s, transform .2s; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.login { max-width: 360px; margin: 12vh auto 0; padding: 0 16px; display: grid; gap: 12px; justify-items: stretch; text-align: center; }
.login img { width: 84px; height: 84px; justify-self: center; border-radius: 18px; }
.login h1 { margin: 0; font: 900 34px/1 var(--display); font-stretch: 72%; }
.login p { margin: 0; color: var(--on-steel-mute); }
.err { color: var(--red); min-height: 1em; margin: 0; }

@media (min-width: 700px) {
  .ticket { width: 168px; }
  .page, .cook { padding-inline: 20px; }
}