/*
VOICE: friendly and tidy — a cute brand that still runs a clean business.
IDEA: a bakery order ticket — a white card on a pink counter, daisy on top.
PICTURE: the day's total as a big ticket number; a daisy drawn in the header.
COLOUR and TYPE: strawberry pink lead, daisy yellow support, plum ink; Fredoka + Nunito.
LAYOUT: one phone column, cards stacked, bottom tabs; sheets slide up for edits.
*/
:root {
  color-scheme: light dark;
  --bg: light-dark(#fff4f8, #1c1019);
  --card: light-dark(#ffffff, #2a1826);
  --ink: light-dark(#3a1d33, #fbe9f2);
  --soft: light-dark(#7d5a72, #c9a9bd);
  --line: light-dark(#f3d5e3, #4a2c42);
  --pink: light-dark(#d23a7c, #ff7bb0);
  --pink-2: light-dark(#fde0ec, #4b2140);
  --on-pink: light-dark(#ffffff, #2a0f20);
  --ticket: light-dark(#d23a7c, #b02e69);
  --sun: light-dark(#ffc83d, #ffd25e);
  --sun-2: light-dark(#fff3cc, #4a3a14);
  --ok: light-dark(#1f8a5b, #5fd39c);
  --ok-2: light-dark(#dcf5e8, #173a2a);
  --warn: light-dark(#b45309, #fbbf6a);
  --warn-2: light-dark(#fff0d9, #43300f);
  --bad: light-dark(#c62845, #ff8097);
  --bad-2: light-dark(#ffe1e6, #4a1a25);
  --r: 18px;
  --shadow: 0 1px 0 var(--line), 0 6px 18px -10px light-dark(rgba(150, 40, 90, .35), rgba(0, 0, 0, .6));
}
:root[data-theme=light] { color-scheme: light }
:root[data-theme=dark] { color-scheme: dark }
* { box-sizing: border-box; min-width: 0 }
[hidden] { display: none !important }
html { -webkit-text-size-adjust: 100% }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.5 "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif; overflow-x: clip;
}
h1, h2, h3, .display { font-family: "Fredoka", "Nunito", system-ui, sans-serif; font-weight: 600; line-height: 1.1; margin: 0; text-wrap: balance }
h1 { font-size: 26px } h2 { font-size: 20px } h3 { font-size: 17px }
p { margin: 0 }
small, .muted { color: var(--soft) }
.muted { font-size: 14px }
.num { font-variant-numeric: tabular-nums; white-space: nowrap }
a { color: var(--pink) }

/* Buttons & inputs */
button, .btn {
  font: inherit; font-weight: 700; border: 0; border-radius: 14px; min-height: 44px; padding: 10px 16px;
  background: var(--pink-2); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none; touch-action: manipulation;
}
button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px }
.btn-main { background: var(--pink); color: var(--on-pink) }
.btn-ghost { background: transparent; border: 2px solid var(--line) }
.btn-bad { background: var(--bad-2); color: var(--bad) }
.btn-sm { min-height: 36px; padding: 6px 12px; font-size: 14px; border-radius: 11px }
.btn-wide { width: 100% }
button:disabled { opacity: .45; cursor: not-allowed }
input, select, textarea {
  font: inherit; font-size: 16px; color: var(--ink); background: var(--card); border: 2px solid var(--line); border-radius: 12px;
  min-height: 44px; padding: 8px 12px; width: 100%;
}
textarea { min-height: 80px; resize: vertical }
.f { display: grid; gap: 4px; font-weight: 700; font-size: 14px }
.f > span { color: var(--soft) }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; font-size: 15px; cursor: pointer }
.check input { width: 22px; height: 22px; min-height: 0; margin-top: 1px; accent-color: var(--pink); flex: none }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px }
.grid3 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap }
.between { display: flex; justify-content: space-between; align-items: center; gap: 10px }
.stack { display: grid; gap: 12px }

/* Cards & chips */
.card { background: var(--card); border-radius: var(--r); padding: 16px; box-shadow: var(--shadow) }
.card + .card { margin-top: 12px }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 99px; font-size: 13px; font-weight: 800; background: var(--pink-2); white-space: nowrap }
.chip.ok { background: var(--ok-2); color: var(--ok) }
.chip.warn { background: var(--warn-2); color: var(--warn) }
.chip.bad { background: var(--bad-2); color: var(--bad) }
.chip.sun { background: var(--sun-2) }
.seg { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none }
.seg button { background: var(--card); border: 2px solid var(--line); min-height: 38px; padding: 6px 14px; white-space: nowrap; flex: none; font-size: 14px }
.seg button.on { background: var(--ink); color: var(--bg); border-color: var(--ink) }
.empty { text-align: center; padding: 26px 12px; color: var(--soft) }

/* Lists */
.list { display: grid }
.item { display: flex; gap: 12px; align-items: center; padding: 12px 2px; border-top: 1px solid var(--line); width: 100%; background: none; border-radius: 0; text-align: left; min-height: 56px; font-weight: 400; color: var(--ink) }
.item:first-child { border-top: 0 }
.item .grow { flex: 1; display: grid; gap: 2px }
.item b { font-weight: 800 }
.item .right { text-align: right; display: grid; gap: 2px; justify-items: end }

/* Bars (HTML rows with % width) */
.bars { display: grid; gap: 8px }
.bar { display: grid; grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 14px }
.bar .track { height: 12px; border-radius: 99px; background: var(--pink-2); overflow: hidden }
.bar .fill { height: 100%; border-radius: 99px; background: var(--pink) }
.bar .fill.sun { background: var(--sun) }

/* Tables */
table { width: 100%; border-collapse: collapse; font-size: 15px }
th { text-align: left; font-size: 13px; color: var(--soft); font-weight: 800; padding: 6px 4px }
td { padding: 8px 4px; border-top: 1px solid var(--line) }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap }
@media (max-width: 600px) {
  table { font-size: 13px }
  .tstack thead { display: none }
  .tstack tr { display: grid; padding-block: 10px; border-top: 1px solid var(--line) }
  .tstack td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 2px 0 }
  .tstack td::before { content: attr(data-l); color: var(--soft); font-weight: 700 }
  .tstack td.n { text-align: right }
}

/* Steppers */
.step { display: inline-flex; align-items: center; gap: 4px; background: var(--pink-2); border-radius: 14px; padding: 3px }
.step button { min-height: 40px; min-width: 40px; padding: 0; font-size: 22px; line-height: 1; background: var(--card); border-radius: 11px }
.step output { min-width: 2ch; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums }

/* Bottom sheet */
.sheet-wrap { position: fixed; inset: 0; z-index: 50; background: rgba(40, 10, 30, .45); display: flex; align-items: flex-end; justify-content: center; animation: fade .15s }
.sheet { background: var(--bg); width: min(640px, 100%); max-height: 92vh; overflow-y: auto; border-radius: 24px 24px 0 0; padding: 18px 16px calc(24px + env(safe-area-inset-bottom)); animation: up .22s ease-out }
.sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; position: sticky; top: -18px; background: var(--bg); padding: 6px 0 }
@keyframes up { from { transform: translateY(40px); opacity: .4 } }
@keyframes fade { from { opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .sheet, .sheet-wrap { animation: none } }

.toast { position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 99px; font-weight: 700; font-size: 15px; max-width: 90vw; text-align: center }
.banner { background: var(--sun-2); border-radius: 14px; padding: 10px 14px; font-size: 14px; font-weight: 600 }
.banner.bad { background: var(--bad-2); color: var(--bad) }
.daisy { flex: none }

/* Room for a host badge in the bottom-right corner (see dodgeOverlays in core.js) */
.has-overlay .sheet { padding-bottom: calc(96px + env(safe-area-inset-bottom)) }

/* − [ n ] + steppers */
.stepper { display: inline-flex; align-items: stretch; border: 2px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--card); max-width: 100%; flex: none }
.stepper .sb { min-height: 44px; min-width: 44px; padding: 0; border-radius: 0; background: var(--pink-2); font-size: 22px; line-height: 1; font-weight: 700 }
.stepper input { border: 0; border-radius: 0; width: 64px; min-height: 44px; text-align: center; padding: 6px 2px; -moz-appearance: textfield; appearance: textfield; font-weight: 800; font-variant-numeric: tabular-nums }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }
.stepper input:focus-visible { outline-offset: -3px }
.f .stepper, .irow .stepper, .mf .stepper { width: 100% }
.f .stepper input, .irow .stepper input, .mf .stepper input { flex: 1; width: auto }
.mini { display: inline-flex; align-items: center; gap: 4px }
.mini button { min-height: 40px; min-width: 40px; padding: 0; font-size: 22px; line-height: 1; border-radius: 12px }
.mini span { min-width: 4.5ch; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 15px }

/* On/off switch */
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; cursor: pointer; color: var(--soft) }
.switch input { appearance: none; -webkit-appearance: none; width: 46px; height: 28px; min-height: 0; padding: 0; border-radius: 99px; background: var(--line); border: 0; position: relative; flex: none; margin: 0; cursor: pointer; transition: background .15s }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s }
.switch input:checked { background: var(--ok) }
.switch input:checked::after { transform: translateX(18px) }
.switch input:checked + span { color: var(--ok) }
@media (prefers-reduced-motion: reduce) { .switch input, .switch input::after { transition: none } }

/* List rows with their own controls */
.prow { align-items: center }
.prow .plain small { overflow-wrap: anywhere }
.prow .plain { background: none; padding: 4px 0; min-height: 0; text-align: left; display: grid; gap: 3px; justify-items: start; font-weight: 400; color: var(--ink); border-radius: 8px }
.prow .plain b { font-weight: 800 }
.pctl { display: grid; gap: 6px; justify-items: end; flex: none }
.pctl small { font-size: 12px }

/* Optional fold-out section */
details.more { border: 2px solid var(--line); border-radius: 16px; padding: 12px 14px }
details.more > summary { cursor: pointer; font-weight: 800; list-style: none; display: flex; justify-content: space-between; gap: 8px; align-items: center; min-height: 32px }
details.more > summary::-webkit-details-marker { display: none }
details.more > summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--pink) }
details.more[open] > summary::after { content: "–" }

/* Inline "add a new item" inside a picker row */
.newitem { display: flex; gap: 6px; flex-wrap: wrap; align-items: center }
.newitem input { flex: 1 1 160px }
.newitem select { flex: 0 1 130px }
.mf { display: grid; gap: 2px }
.mf small { font-size: 12px; font-weight: 800; color: var(--soft) }