/* Charity Food Stall POS - Phase I
   Tokens and layout follow design/*.dc.html */

:root {
  --ink: #1C1917;
  --muted: #57534E;
  --ink-2: #44403C;
  --line: #E7E5E4;
  --page: #F5F5F4;
  --card: #FFFFFF;
  --marigold: #FDE68A;
  --blue: #1D4ED8;
  --teal: #0F766E;
  --teal-dark: #134E4A;
  --teal-pale: #CCFBF1;
  --amber: #B45309;
  --amber-pale: #FEF3C7;
  --amber-bar: #FBBF24;
  --stone-400: #A8A29E;
  --stone-300: #D6D3D1;
  --stone-500: #78716C;
  --red: #B91C1C;
  --blue-pale: #BFDBFE;
  --shadow: 0 1px 2px rgba(28, 25, 23, 0.08);
  --font-body: 'Atkinson Hyperlegible', system-ui, -apple-system, sans-serif;
  --font-head: 'Bricolage Grotesque', 'Atkinson Hyperlegible', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.45;
  overflow-x: hidden;
}

button, input, select { font-family: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

h1, h2, h3 { font-family: var(--font-head); font-weight: 800; margin: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.outlet {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ------------------------------------------------------------- header */

.header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  padding: 12px 24px;
  background: var(--ink);
  color: #FFFFFF;
}
.header[hidden] { display: none; }

.header__left,
.header__right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.header__title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.1;
}

.header__sub { font-size: 17px; color: var(--stone-300); }

.header a { color: #FFFFFF; font-weight: 700; }
.header a:hover { color: var(--marigold); }

.navlink {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 12px;
  border-radius: 10px;
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 700;
  text-decoration: underline;
}
.navlink[aria-current='page'] {
  background: #292524;
  text-decoration: none;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--teal-dark);
  color: #FFFFFF;
  font-size: 17px;
}
.pill__dot { width: 10px; height: 10px; border-radius: 50%; background: #5EEAD4; flex: none; }
.pill--offline { background: #7C2D12; }
.pill--offline .pill__dot { background: var(--amber-bar); }

.till-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  color: var(--stone-300);
}
.till-field select {
  height: 48px;
  min-width: 64px;
  padding: 0 10px;
  border-radius: 10px;
  border: 2px solid var(--stone-500);
  background: #292524;
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 700;
}

.ghost-btn {
  min-height: 48px;
  padding: 0 16px;
  border-radius: 12px;
  border: 2px solid var(--stone-400);
  background: transparent;
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 700;
}
.ghost-btn[aria-pressed='true'] {
  background: var(--marigold);
  border-color: var(--marigold);
  color: var(--ink);
}
.ghost-btn:disabled { opacity: 0.45; }
.undo-short { display: none; }

/* ------------------------------------------------------------- banner */

.banner {
  margin: 0;
  padding: 14px 24px;
  background: var(--amber-pale);
  color: #78350F;
  border-bottom: 2px solid #D97706;
  font-size: 18px;
  font-weight: 700;
}
.banner__note { display: block; font-weight: 400; font-size: 16px; margin-top: 4px; }

/* ------------------------------------------------------------- landing */

.landing {
  flex: 1 1 auto;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px 48px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.landing h1 { font-size: 44px; line-height: 1.1; }
.landing__lede { margin: 0; font-size: 19px; line-height: 28px; color: var(--ink-2); max-width: 62ch; }
.landing__eyebrow {
  font-size: 14px;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--amber);
}
.landing__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.big-link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-height: 160px;
  padding: 24px;
  border-radius: 22px;
  border: 3px solid var(--ink);
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow);
}
.big-link strong { font-family: var(--font-head); font-weight: 800; font-size: 30px; }
.big-link span { font-size: 17px; color: var(--muted); }
.big-link:hover { background: var(--marigold); }

.setting-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 560px;
}
.setting-card h2 { font-size: 24px; }
.setting-card p { margin: 0; font-size: 16px; color: var(--muted); }
.setting-card select {
  height: 64px;
  min-width: 120px;
  padding: 0 14px;
  font-size: 24px;
  font-weight: 700;
  border: 2px solid var(--stone-400);
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
}
.field-label { font-size: 16px; font-weight: 700; color: var(--ink-2); }

/* ------------------------------------------------------------- cash */

.cash {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 24px;
  align-items: flex-start;
}

.cash__scroll {
  flex: 999 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tiles {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.tile {
  position: relative;
  min-height: 212px;
  padding: 20px 16px;
  border-radius: 22px;
  border: 4px solid transparent;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}
.tile[data-selected='true'] { border-color: var(--ink); }
.tile__name { font-size: 21px; line-height: 26px; font-weight: 700; }
/* The short name is the phone tile's label (hotfix H3 2). */
.tile__short { display: none; }
.tile__price { font-size: 19px; color: var(--ink-2); }
.tile__qty {
  position: absolute;
  top: 12px;
  right: 12px;
  min-width: 48px;
  height: 48px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--ink);
  color: #FFFFFF;
  font-size: 24px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.panel {
  flex: 1 1 380px;
  min-width: 0;
  background: var(--card);
  border-radius: 22px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--shadow);
}
/* Panel rows keep their natural height: inside the height-capped phone sheet
   the default flex-shrink collapsed them on top of each other. */
.panel > * { flex: 0 0 auto; }

/* Send and Clear. On a phone this footer is sticky inside the scrolling
   order sheet, so the primary action is never below the fold. */
.panel__foot { display: flex; flex-direction: column; gap: 16px; }

.toast {
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--teal-pale);
  color: var(--teal-dark);
  font-size: 18px;
  font-weight: 700;
}
.toast:empty { display: none; }

.field { display: flex; flex-direction: column; gap: 8px; }
.field input[type='text'] {
  height: 64px;
  padding: 0 18px;
  font-size: 24px;
  border: 2px solid var(--stone-400);
  border-radius: 14px;
  color: var(--ink);
  background: var(--card);
}

.lines { display: flex; flex-direction: column; gap: 10px; min-height: 96px; }
.lines__empty { padding: 24px 0; text-align: center; font-size: 19px; color: var(--muted); }

/* Fixed columns so the steppers, quantity and amount line up on every row,
   whatever the length of the item name. The name wraps (and hyphenates) instead. */
.line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px 28px 52px 58px;
  align-items: center;
  column-gap: 6px;
}
.line__name { min-width: 0; font-size: 18px; line-height: 22px; font-weight: 700; overflow-wrap: break-word; hyphens: auto; }
.line__qty { text-align: center; font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.line__amount { text-align: right; font-size: 18px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stepper {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 14px;
  border: 2px solid var(--stone-400);
  background: var(--card);
  font-size: 28px;
  line-height: 1;
  color: var(--ink);
}

.total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 2px solid var(--line);
}
.total-row__label { font-size: 20px; font-weight: 700; }
.total-row__value { font-family: var(--font-head); font-weight: 800; font-size: 44px; }

.pay-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pay-btn {
  height: 64px;
  border-radius: 14px;
  font-size: 22px;
  font-weight: 700;
  border: 3px solid var(--stone-400);
  background: var(--card);
  color: var(--ink);
}
.pay-btn[aria-pressed='true'] { border-color: var(--ink); background: var(--marigold); }

/* Cash received (optional). One grid so the change line can sit under the
   controls on tablet and beside the label on phone. */
.tender {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    'head   clear'
    'quick  quick'
    'other  other'
    'status status';
  align-items: center;
  gap: 10px;
}
.tender[hidden] { display: none; }
.tender__head { grid-area: head; display: flex; align-items: center; gap: 6px; }
.tender__optional { font-weight: 400; color: var(--muted); }
.tender__clear { grid-area: clear; align-self: center; justify-self: end; padding: 0 10px; font-size: 15px; }
.tender__clear[hidden] { display: none; }
.tender__grid { grid-area: quick; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.tender__btn {
  min-height: 54px;
  padding: 0 4px;
  border-radius: 12px;
  font-size: 19px;
  font-weight: 700;
  border: 2px solid var(--stone-400);
  background: var(--card);
  color: var(--ink);
}
.tender__btn[aria-pressed='true'] { border-color: var(--ink); background: var(--marigold); }

/* The Other amount row, plus the phone-only link that reveals it (H3 4).
   On tablet the link is display:none, so this wrapper is invisible. */
.tender__otherwrap { grid-area: other; display: flex; flex-direction: column; gap: 6px; }
.tender__toggle { display: none; }
.tender__other { display: flex; align-items: center; gap: 12px; }
.tender__other .field-label { flex: none; }
.tender__input { position: relative; flex: 1 1 auto; min-width: 0; display: block; }
.tender__prefix {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: var(--muted);
  pointer-events: none;
}
.tender__input input {
  width: 100%;
  height: 54px;
  padding: 0 14px 0 32px;
  font-size: 20px;
  border: 2px solid var(--stone-400);
  border-radius: 12px;
  color: var(--ink);
  background: var(--card);
}
.tender__input input[data-state='invalid'] { border-color: var(--amber); }
.tender__input input[data-state='change'],
.tender__input input[data-state='short'] { border-color: var(--ink); }

.change { grid-area: status; margin: 0; font-size: 22px; font-weight: 700; color: var(--teal-dark); }
.change[hidden] { display: none; }
.change[data-state='short'],
.change[data-state='invalid'] { color: var(--amber); }
.change[data-state='invalid'] { font-size: 17px; font-weight: 400; }

.send-btn {
  min-height: 84px;
  border: none;
  border-radius: 18px;
  background: var(--teal);
  color: #FFFFFF;
  font-size: 24px;
  font-weight: 700;
}
.send-btn:disabled { background: var(--stone-400); }

.link-btn {
  align-self: center;
  min-height: 48px;
  padding: 0 16px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 17px;
  text-decoration: underline;
}

.recent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 0 0 8px;
}
.recent__items { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.recent__label { font-size: 16px; font-weight: 700; color: var(--ink-2); }
.recent__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--line);
  color: var(--ink);
  font-size: 17px;
}
.recent__item[data-status='new'] { background: var(--marigold); }
.recent__item[data-status='preparing'] { background: var(--blue-pale); }
.recent__item[data-status='ready'] { background: var(--teal); color: #FFFFFF; }
.recent__item[data-status='cancelled'] { background: #FFFFFF; border: 2px solid var(--red); color: var(--red); }
.recent__cancel {
  min-height: 48px;
  padding: 0 14px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: #FFFFFF;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
}
.recent__empty { font-size: 17px; color: var(--muted); }

/* ------------------------------------ hotfix H3: small cash counter (v1.3.1)
   Everything here belongs to the layout below 700px (design/CashCounterSmall
   .dc.html). At 700px and wider the wrapper is display:contents, so the order
   panel stays an ordinary flex child of .cash and nothing else is rendered. */

.sheet { display: contents; }
.sheet__head { display: none; }
.sheet__backdrop,
.order-bar,
.mini-sheet,
.mini-sheet__backdrop,
.app-menu,
.menu-btn { display: none; }

/* ------------------------------------------------------------- kitchen */

.kitchen { flex: 1 1 auto; display: flex; flex-direction: column; }

.tabs {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 12px 16px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.tab {
  min-height: 60px;
  border-radius: 12px;
  border: 3px solid var(--stone-300);
  background: var(--card);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.tab__count { font-size: 22px; font-weight: 800; line-height: 24px; font-family: var(--font-head); }
.tab__label { font-size: 15px; font-weight: 700; }
.tab[aria-selected='true'] { border-color: var(--ink); }
.tab[aria-selected='true'][data-col='new'] { background: var(--marigold); }
.tab[aria-selected='true'][data-col='preparing'] { background: var(--blue-pale); }
.tab[aria-selected='true'][data-col='ready'] { background: var(--teal); color: #FFFFFF; }

.columns {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px 24px 24px;
  align-items: flex-start;
}
.column { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.column__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 22px;
  font-family: var(--font-head);
  font-weight: 800;
}
.column__count { font-size: 26px; }
.column--new .column__head { background: var(--marigold); }
.column--preparing .column__head { background: var(--blue-pale); }
.column--ready .column__head { background: var(--teal); color: #FFFFFF; }
.column__empty { padding: 24px 0; text-align: center; font-size: 17px; color: var(--muted); }

.order-card {
  background: var(--card);
  border-radius: 18px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow);
  border: 3px solid transparent;
}
.order-card--ready { border-color: var(--teal); }
.order-card__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.order-card__no { font-family: var(--font-head); font-weight: 800; font-size: 30px; }
.order-card__age { font-size: 17px; font-weight: 700; color: var(--muted); }
.order-card__age[data-late='true'] { color: var(--amber); }
.order-card__name { font-size: 26px; font-weight: 700; }
.order-card__call {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 38px;
  letter-spacing: 0.02em;
  color: var(--teal);
  text-transform: uppercase;
  word-break: break-word;
}
.order-card__lines { display: flex; flex-direction: column; gap: 6px; }
.order-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  line-height: 26px;
  color: var(--ink);
}
.order-line[data-off='true'] { color: var(--stone-400); }
.order-line b { width: 34px; flex: none; }
.action-btn {
  min-height: 68px;
  border: none;
  border-radius: 14px;
  color: #FFFFFF;
  font-size: 23px;
  font-weight: 700;
}
.action-btn[data-action='start'] { background: var(--blue); }
.action-btn[data-action='ready'] { background: var(--teal); }
.action-btn[data-action='collected'] { background: var(--ink); }

/* ------------------------------------------------------------- reports */

.reports {
  flex: 1 1 auto;
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.kpi {
  background: var(--card);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kpi__label { font-size: 16px; color: var(--muted); }
.kpi__value { font-family: var(--font-head); font-weight: 800; font-size: 38px; line-height: 44px; }
.kpi__note { font-size: 14px; color: var(--muted); }

.report-cols { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.card-section {
  background: var(--card);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.card-section h2 { font-family: var(--font-head); font-weight: 800; font-size: 26px; }
.peak-col { flex: 3 1 540px; min-width: 0; }
.side-col { flex: 2 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.callouts { display: flex; flex-wrap: wrap; gap: 12px; }
.callout { padding: 12px 16px; border-radius: 12px; background: var(--page); font-size: 17px; line-height: 24px; }
.callout--peak { background: var(--amber-pale); }

.chart { display: flex; align-items: flex-end; gap: 6px; height: 240px; padding-top: 8px; border-bottom: 2px solid var(--line); }
.chart__bar { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.chart__fill { display: block; width: 100%; background: var(--amber-bar); border-radius: 4px 4px 0 0; min-height: 2px; }
.chart__bar[data-peak='true'] .chart__fill { background: var(--amber); }
.chart__ticks { display: flex; gap: 6px; }
.chart__tick { flex: 1 1 0; min-width: 0; font-size: 13px; color: var(--muted); white-space: nowrap; }

.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 16px; }
table.data th { text-align: left; color: var(--muted); padding: 8px; border-bottom: 2px solid var(--stone-300); }
table.data td { padding: 8px; border-bottom: 1px solid var(--line); }
table.data td.num, table.data th.num { text-align: right; }

.item-row { display: flex; flex-direction: column; gap: 6px; }
.item-row__top { display: flex; align-items: center; gap: 10px; font-size: 17px; }
.item-row__name { flex: 1 1 auto; min-width: 0; font-weight: 700; }
.item-row__units { width: 56px; text-align: right; }
.item-row__rev { width: 90px; text-align: right; font-weight: 700; }
.item-row__bar { height: 10px; background: var(--page); border-radius: 4px; }
.item-row__fill { height: 10px; background: #D97706; border-radius: 0 4px 4px 0; }

.split-bar { display: flex; gap: 2px; height: 28px; }
.split-bar__cash { background: var(--ink); border-radius: 4px 0 0 4px; }
.split-bar__card { flex: 1 1 auto; background: var(--amber-bar); border-radius: 0 4px 4px 0; }
.split-legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 17px; }
.swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.swatch--cash { background: var(--ink); }
.swatch--card { background: var(--amber-bar); }

.btn-secondary {
  min-height: 48px;
  padding: 0 16px;
  border-radius: 10px;
  border: 2px solid var(--stone-300);
  background: var(--card);
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
}
.btn-marigold {
  min-height: 48px;
  padding: 0 18px;
  border-radius: 10px;
  border: none;
  background: var(--marigold);
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
}
.date-field { display: inline-flex; align-items: center; gap: 10px; color: var(--stone-300); font-size: 17px; }
.date-field input[type='date'] {
  height: 48px;
  padding: 0 12px;
  border-radius: 10px;
  border: 2px solid var(--stone-500);
  background: #292524;
  color: #FFFFFF;
  font-size: 17px;
}

/* ------------------------------------------------------------- sign out */

.signout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 14px;
  border: 2px solid var(--stone-500);
  border-radius: 10px;
  background: transparent;
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 700;
}
.signout:hover { background: #292524; }
.signout[hidden] { display: none; }
.signout svg { flex: none; }

/* ------------------------------------------------------------- modal */

.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(28, 25, 23, 0.55);
}
.modal__card {
  width: 100%;
  max-width: 460px;
  background: var(--card);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 12px 32px rgba(28, 25, 23, 0.28);
}
.modal__title { font-size: 24px; line-height: 1.2; }
.modal__note { margin: 0; font-size: 17px; color: var(--muted); }
.modal__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.modal__btn {
  min-height: 64px;
  border-radius: 14px;
  font-size: 20px;
  font-weight: 700;
  border: 2px solid var(--ink);
  background: var(--card);
  color: var(--ink);
}
.modal__btn--danger { border-color: #B5050F; background: #B5050F; color: #FFFFFF; }

/* ------------------------------------------------------------- login */

.login {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  background: var(--page);
}
.login__card {
  width: 100%;
  max-width: 520px;
  background: var(--card);
  border-radius: 24px;
  padding: 40px 40px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.06), 0 12px 32px rgba(28, 25, 23, 0.08);
}
.login__logo { width: 168px; height: 168px; object-fit: contain; }
.login__heads { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.login__title { font-size: 32px; line-height: 38px; }
.login__sub { margin: 0; font-size: 20px; line-height: 26px; color: #B5050F; font-weight: 700; }
.login__slot, .login__body { width: 100%; display: flex; flex-direction: column; gap: 18px; }
.login__form { width: 100%; display: flex; flex-direction: column; gap: 18px; }
.login__field { display: flex; flex-direction: column; gap: 8px; }
.login__label { font-size: 17px; font-weight: 700; }
.login__form input {
  width: 100%;
  height: 60px;
  padding: 0 18px;
  font-size: 22px;
  border: 2px solid var(--stone-400);
  border-radius: 14px;
  color: var(--ink);
  background: var(--card);
}
.login__form input[data-invalid='true'] { border-color: #B91C1C; }
.login__pass { position: relative; }
.login__pass input { padding-right: 104px; }
.login__show {
  position: absolute;
  right: 6px;
  top: 6px;
  height: 48px;
  padding: 0 14px;
  border: none;
  border-radius: 10px;
  background: var(--page);
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
}
.login__submit {
  min-height: 68px;
  border: none;
  border-radius: 16px;
  background: #B5050F;
  color: #FFFFFF;
  font-size: 22px;
  font-weight: 700;
}
.login__error {
  padding: 14px 16px;
  border-radius: 12px;
  background: #FEE2E2;
  color: #7F1D1D;
  font-size: 17px;
  line-height: 24px;
  font-weight: 700;
}
.login__error[hidden] { display: none; }
.login__help { margin: 0; font-size: 15px; line-height: 22px; color: var(--muted); text-align: center; }
.login__blocked {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border-radius: 12px;
  background: var(--amber-pale);
  color: #78350F;
  border: 2px solid #D97706;
  font-size: 19px;
}
.login__blocked-note { font-size: 16px; font-weight: 400; }


/* ------------------------------------------------- app version (Phase III) */

/* Outlined pill right after the screen title in every dark header. */
.version-pill {
  align-self: center;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--muted);
  color: var(--stone-300);
  font-size: 13px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* One line at the bottom of the login card. */
.login__version {
  margin: 0;
  width: 100%;
  text-align: center;
  font-size: 13px;
  line-height: 18px;
  color: var(--stone-500);
}

/* --------------------------------------------- sales by day (Phase III) */

.report-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.report-nav__item { display: inline-flex; }
.report-pill {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  border: 2px solid var(--stone-300);
  background: var(--card);
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
}
.report-pill:hover { background: var(--page); color: var(--ink); }
.report-pill--on,
.report-pill--on:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #FFFFFF;
}

.btn-wrap { display: inline-flex; }
.btn-wrap[hidden] { display: none; }

.range-card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  background: var(--card);
  border-radius: 16px;
  padding: 20px;
}
.range-field { display: flex; flex-direction: column; gap: 6px; }
.range-label { font-size: 15px; font-weight: 700; color: var(--ink-2); }
.range-input {
  height: 48px;
  min-height: 48px;
  padding: 0 12px;
  border-radius: 10px;
  border: 2px solid var(--stone-400);
  background: var(--card);
  color: var(--ink);
  font-size: 17px;
}
.range-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.quick-btn {
  min-height: 48px;
  padding: 0 16px;
  border-radius: 999px;
  border: 2px solid var(--stone-300);
  background: var(--card);
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
}
.quick-btn[hidden] { display: none; }
.quick-btn[aria-pressed='true'] { background: var(--marigold); border-color: var(--ink); }

.range-error {
  margin: 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--amber-pale);
  border: 2px solid #D97706;
  color: #78350F;
  font-size: 18px;
  font-weight: 700;
}
.range-error[hidden] { display: none; }

.kpi__inner { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.kpis[hidden], .card-section[hidden], .empty-card[hidden] { display: none; }
.empty-card { gap: 6px; }
.empty-card__text { margin: 0; font-size: 20px; font-weight: 700; }

.days-readout { font-size: 16px; color: var(--ink-2); min-height: 22px; }

.days-chart { position: relative; height: 260px; margin-top: 26px; }
.days-chart__line {
  position: absolute;
  left: 68px;
  right: 0;
  height: 0;
  border-top: 1px solid var(--line);
}
.days-chart__tick {
  position: absolute;
  left: 0;
  width: 60px;
  text-align: right;
  font-size: 13px;
  line-height: 16px;
  color: var(--muted);
  transform: translateY(50%);
}
.days-chart__bars {
  position: absolute;
  left: 68px;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  gap: 24px;
}
.day-bar {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  max-width: 160px;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.day-bar__value {
  position: absolute;
  left: 0;
  right: 0;
  margin-bottom: 5px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.day-bar__fill {
  display: block;
  width: 100%;
  min-height: 2px;
  background: var(--amber-bar);
  border-radius: 4px 4px 0 0;
}
.day-bar:hover .day-bar__fill,
.day-bar:focus-visible .day-bar__fill,
.day-bar[data-hover='true'] .day-bar__fill { background: #F59E0B; }
/* The best day keeps its own colour, hovered or not (design/ReportsByDay.dc.html). */
.day-bar[data-best='true'] .day-bar__fill { background: var(--amber); }

.days-chart__labels { display: flex; gap: 24px; padding-left: 68px; margin-top: 6px; }
.days-chart__label {
  flex: 1 1 0;
  min-width: 0;
  max-width: 160px;
  text-align: center;
  font-size: 14px;
  line-height: 18px;
  color: var(--ink-2);
}

table.data--wide { min-width: 860px; }
table.data td.day-cell { font-weight: 700; white-space: nowrap; }
table.data td.num--strong { font-weight: 700; }
table.data td.cell--best { background: var(--amber-pale); }
.totals-row td { background: #FAFAF9; font-weight: 700; border-bottom: none; }
.matrix-item { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.open-day {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 10px;
  border: 2px solid var(--stone-300);
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.open-day:hover { background: var(--page); color: var(--ink); }

/* ------------------------------------------- orders list (Phase IV) */

.reports-orders { gap: 20px; }

.orders-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  background: var(--card);
  border-radius: 16px;
  padding: 18px 20px;
}
.orders-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.orders-field--search { flex: 1 1 220px; }
.orders-search {
  width: 100%;
  height: 48px;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 10px;
  border: 2px solid var(--stone-400);
  background: var(--card);
  color: var(--ink);
  font-size: 17px;
}
.orders-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 2px solid var(--stone-300);
  background: var(--card);
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
}
.chip[aria-pressed='true'] { background: var(--marigold); border-color: var(--ink); }

.orders-summary { margin: 0; font-size: 16px; color: var(--ink-2); }
.orders-summary__note { color: var(--muted); }

.orders-cols { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }

/* 700px basis: the detail panel drops under the list below about 1100px. */
.orders-list-card {
  flex: 3 1 700px;
  min-width: 0;
  background: var(--card);
  border-radius: 16px;
  padding: 8px 8px 12px;
}
.orders-table-wrap[hidden],
.orders-cards[hidden],
.orders-empty[hidden],
.orders-back-wrap[hidden],
.order-detail__body[hidden],
.order-detail__empty[hidden] { display: none; }

table.orders-table { min-width: 760px; }
table.orders-table th { padding: 12px 10px; border-bottom: 1.5px solid var(--stone-300); }
table.orders-table td { padding: 6px 10px; }
.orders-row[data-selected='true'] > td { background: var(--amber-pale); }
.orders-no {
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  border: 2px solid var(--stone-300);
  background: var(--card);
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 18px;
}
.orders-no[aria-pressed='true'] { border-color: var(--ink); }
.orders-time, .orders-items, .orders-wait { color: var(--ink-2); }
/* Only the Items column wraps; the rest stay on one line and the card
   scrolls sideways instead (CLAUDE.md Phase IV 5). */
.orders-no, .orders-time, .orders-wait, .orders-name { white-space: nowrap; }
.orders-name { font-weight: 700; }
.orders-total { font-weight: 700; font-variant-numeric: tabular-nums; }
.orders-total--cancelled { color: var(--stone-500); }
.orders-empty { margin: 0; padding: 32px; text-align: center; font-size: 18px; color: var(--muted); }

.status-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--line);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.status-pill--new { background: var(--marigold); border-color: var(--marigold); }
.status-pill--preparing { background: var(--blue-pale); border-color: var(--blue-pale); }
.status-pill--ready { background: var(--teal); border-color: var(--teal); color: #FFFFFF; }
.status-pill--collected { background: var(--line); border-color: var(--line); }
.status-pill--cancelled { background: var(--card); border-color: var(--red); color: var(--red); }

/* The same rows as cards, for the phone (design/ReportsOrdersMobile.dc.html). */
.orders-cards { display: flex; flex-direction: column; gap: 8px; padding: 8px; }
.orders-card-btn {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: none;
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
  text-align: left;
  box-shadow: var(--shadow);
}
.orders-card-btn[data-selected='true'] { background: var(--amber-pale); }
.orders-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
}
.orders-card__no { font-family: var(--font-head); font-weight: 800; font-size: 20px; }
.orders-card__name { font-family: var(--font-body); font-weight: 700; font-size: 17px; }
.orders-card__items { font-size: 15px; color: var(--ink-2); }
.orders-card__foot {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
  font-size: 15px;
  color: var(--muted);
}

.order-detail {
  flex: 2 1 380px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--card);
  border-radius: 16px;
  padding: 24px;
}
.order-detail__body { display: flex; flex-direction: column; gap: 18px; }
.order-detail__empty { margin: 0; padding: 40px 0; text-align: center; font-size: 18px; color: var(--muted); }
.order-detail__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.order-detail__ids { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.order-detail__no { font-family: var(--font-head); font-weight: 800; font-size: 36px; line-height: 40px; }
.order-detail__name { font-size: 22px; font-weight: 700; }
.order-detail .status-pill { padding: 6px 14px; font-size: 16px; }
.order-detail__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  font-size: 16px;
}
.order-detail__meta-label { display: block; color: var(--muted); font-size: 14px; }
.order-detail__block { display: flex; flex-direction: column; gap: 8px; }
.order-detail__block h3 { font-size: 17px; }

.timeline { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.timeline__step { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.timeline__dot { width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--teal); }
.timeline__label { width: 92px; font-weight: 700; }
.timeline__step[data-step='cancelled'] .timeline__dot { background: var(--red); }
/* Last, so a step that was never reached stays grey whichever step it is. */
.timeline__step[data-reached='false'] { color: var(--stone-500); }
.timeline__step[data-reached='false'] .timeline__dot { background: var(--stone-300); }

table.order-items th, table.order-items td { padding: 8px 4px; }
.order-line__name { display: inline-flex; align-items: center; gap: 8px; }
table.order-items .totals-row td { background: none; padding-top: 10px; }
.order-detail__total { font-family: var(--font-head); font-weight: 800; font-size: 22px; }
.order-detail__note { margin: 0; font-size: 14px; line-height: 20px; color: var(--muted); }

.orders-back-wrap { align-self: flex-start; }
.orders-back {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  border: 2px solid var(--stone-300);
  background: var(--card);
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
}
.orders-back:hover { background: var(--page); }

/* Tablet and desktop: cards and the back button belong to the phone layout. */
@media (min-width: 700px) {
  .orders-cards { display: none; }
  .orders-back-wrap { display: none; }
}

/* ------------------------------------------------------------- phone */

@media (max-width: 699px) {
  /* Sign out is icon-only below 700px (CLAUDE.md "Login and sign out" 7).
     The tighter nav spacing keeps it on the same row as the screen links. */
  .signout { width: 44px; height: 44px; min-height: 44px; padding: 0; flex: none; }
  .signout__text { display: none; }
  .header__right { gap: 6px 8px; }
  .header__right .navlink { padding: 0 6px; }

  .login { padding: 0; align-items: flex-start; background: var(--card); }
  .login__card {
    max-width: none;
    border-radius: 0;
    padding: 56px 20px 24px;
    gap: 22px;
    box-shadow: none;
  }
  .login__logo { width: 132px; height: 132px; }
  .login__title { font-size: 26px; line-height: 31px; }
  .login__sub { font-size: 18px; line-height: 24px; }
  .login__slot, .login__body, .login__form { gap: 16px; }
  .login__field { gap: 6px; }
  .login__label { font-size: 16px; }
  .login__form input { height: 56px; font-size: 20px; border-radius: 12px; padding: 0 16px; }
  .login__pass input { padding-right: 96px; }
  .login__show { height: 46px; top: 5px; right: 5px; padding: 0 12px; font-size: 15px; }
  .login__submit { min-height: 64px; border-radius: 14px; font-size: 21px; }
  .login__error { font-size: 16px; line-height: 22px; padding: 12px 14px; }
  .login__help { font-size: 14px; line-height: 20px; }

  .modal__card { padding: 18px; }
  .modal__title { font-size: 21px; }
  .modal__btn { min-height: 56px; font-size: 18px; }

  /* Cash received: the label and its message share the top row, the five
     quick buttons the next, and the Other amount box hides behind a link
     until it is wanted (hotfix H3 4). */
  .tender {
    grid-template-areas:
      'head   status'
      'quick  quick'
      'other  other';
    gap: 6px 8px;
  }
  .tender__clear { display: none; }
  .tender__grid { gap: 6px; }
  .tender__btn { min-height: 44px; padding: 0 2px; font-size: 15px; border-radius: 10px; }
  .tender__toggle {
    display: inline-block;
    align-self: start;
    min-height: 44px;
    padding: 0 2px;
    font-size: 16px;
  }
  .tender[data-other='closed'] .tender__other { display: none; }
  /* The link above the box is the visible label; the real <label> stays for
     screen readers only, so the words are not printed twice. */
  .tender__other { gap: 8px; }
  .tender__other .field-label {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  /* Keep the revealed box clear of the pinned Send button when it is
     scrolled into view. */
  .tender__otherwrap { scroll-margin-bottom: 96px; }
  .tender__input input { height: 48px; font-size: 18px; }
  .tender__prefix { left: 12px; font-size: 18px; }
  .change { justify-self: end; text-align: right; font-size: 16px; }
  .change[data-state='invalid'] { font-size: 16px; font-weight: 700; }

  .header { padding: 8px 14px; gap: 6px 10px; }
  .header__title { font-size: 22px; }
  .header__sub, .pill, .navlink { font-size: 15px; }
  .navlink { padding: 0 8px; }

  .landing { padding: 20px 16px 40px; }
  .landing h1 { font-size: 32px; }

  /* ---------------------------------------------------------------------
     Hotfix H3 (v1.3.1): the small cash counter.
     design/CashCounterSmall.dc.html. Header on one 52px row, 3-column tiles,
     an order bar that only appears with items in the cart, and the order
     panel as a Review & send sheet over the top.
     --------------------------------------------------------------------- */

  body[data-route='/cash'] .app { height: 100vh; height: 100dvh; }
  body[data-route='/cash'] .outlet { overflow: hidden; }

  /* Header: till picker, connection, next order number, ☰. The two groups
     become display:contents so all four sit on one row in the right order
     whatever their wrapper. */
  body[data-route='/cash'] .header {
    flex-wrap: nowrap;
    justify-content: flex-start;
    height: 52px;
    gap: 8px;
    padding: 0 10px 0 12px;
  }
  body[data-route='/cash'] .header__left,
  body[data-route='/cash'] .header__right { display: contents; }
  body[data-route='/cash'] .header .header__title,
  body[data-route='/cash'] .header .version-pill,
  body[data-route='/cash'] .header nav.header__right,
  body[data-route='/cash'] .header .signout { display: none; }

  body[data-route='/cash'] .till-field {
    order: 1;
    gap: 2px;
    height: 48px;
    padding: 0 6px 0 10px;
    border: 1.5px solid #57534E;
    border-radius: 10px;
    color: #FFFFFF;
    font-size: 17px;
    font-weight: 700;
  }
  body[data-route='/cash'] .till-field label {
    position: static;
    width: auto;
    height: auto;
    clip: auto;
  }
  body[data-route='/cash'] .till-field select {
    height: 44px;
    min-width: 44px;
    padding: 0 2px;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-size: 18px;
    font-weight: 800;
  }
  body[data-route='/cash'] .pill {
    order: 2;
    min-height: 0;
    padding: 0;
    gap: 6px;
    background: transparent;
    color: var(--stone-300);
    font-size: 14px;
  }
  body[data-route='/cash'] .pill--offline { background: transparent; }
  body[data-route='/cash'] .pill__dot { width: 9px; height: 9px; }
  body[data-route='/cash'] .pill__suffix { display: none; }
  body[data-route='/cash'] .header__sub {
    order: 3;
    margin-left: auto;
    font-size: 14px;
    white-space: nowrap;
    color: var(--stone-300);
  }
  .menu-btn {
    order: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1.5px solid #57534E;
    border-radius: 10px;
    background: transparent;
    color: #FFFFFF;
  }

  /* ☰ dropdown: Food counter, Reports, Recent orders, Sign out, version. */
  .app-menu {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 56px;
    right: 10px;
    z-index: 48;
    width: 220px;
    max-width: calc(100vw - 20px);
    padding: 8px;
    border-radius: 14px;
    background: var(--card);
    box-shadow: 0 8px 24px rgba(28, 25, 23, 0.2);
  }
  .app-menu[hidden] { display: none; }
  .app-menu__item {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 12px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--ink);
    font-size: 17px;
    font-weight: 700;
    text-align: left;
    text-decoration: none;
  }
  .app-menu__item:hover { background: var(--page); }
  .app-menu__item--danger { color: #B5050F; }
  .app-menu__version {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding: 6px 12px 4px;
    font-size: 12px;
    color: var(--stone-500);
  }
  /* The borrowed header pill reads as plain text in the menu. */
  .app-menu__version .version-pill {
    flex: none;
    width: auto;
    padding: 0;
    border: none;
    border-radius: 0;
    font-size: 12px;
    line-height: 16px;
    color: var(--stone-500);
  }
  .app-menu__build { font-size: 12px; line-height: 16px; color: var(--stone-500); }

  .cash {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    padding: 0;
    flex: 1 1 auto;
    min-height: 0;
  }
  /* The tile area owns the whole screen under the header. Bottom padding
     keeps the last row clear of the order bar (H3 2). */
  .cash__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 10px 10px calc(96px + env(safe-area-inset-bottom));
    gap: 12px;
  }
  .tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }
  .tile {
    min-height: 112px;
    height: 112px;
    padding: 8px 4px;
    border-radius: 16px;
    border-width: 3px;
    gap: 6px;
  }
  .tile .icon { width: 40px; height: 40px; }
  /* The full name stays in the accessible name; the short name is what the
     volunteer reads (H3 2). */
  .tile__name {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .tile__short { display: block; font-size: 14px; line-height: 16px; font-weight: 700; }
  .tile__price { display: none; }
  .tile__qty { top: 6px; right: 6px; min-width: 30px; height: 30px; font-size: 16px; }

  /* Order bar: hidden while the cart is empty (H3 3). */
  .order-bar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    padding: 10px 12px calc(14px + env(safe-area-inset-bottom));
    background: var(--card);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 16px rgba(28, 25, 23, 0.1);
  }
  .order-bar[hidden] { display: none; }
  .order-bar__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 60px;
    padding: 0 16px;
    border: none;
    border-radius: 14px;
    background: var(--teal);
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 700;
  }
  .order-bar__cta { display: inline-flex; align-items: center; gap: 6px; }

  /* Review & send sheet (H3 4). */
  .sheet__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgba(28, 25, 23, 0.45);
  }
  .sheet__backdrop[hidden] { display: none; }
  .sheet {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 40px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    background: var(--card);
    border-radius: 18px 18px 0 0;
    overflow: hidden;
    animation: sheet-up 180ms ease-out;
  }
  .sheet:focus { outline: none; }
  .cash[data-sheet='closed'] .sheet { display: none; }

  .sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0 -16px;
    padding: 10px 12px 6px 16px;
    background: var(--card);
  }
  .sheet__title { font-family: var(--font-head); font-weight: 800; font-size: 22px; }
  .sheet__more {
    flex: none;
    height: 44px;
    padding: 0 12px;
    border: 2px solid var(--stone-300);
    border-radius: 10px;
    background: var(--card);
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
  }

  .panel {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    max-height: none;
    border: none;
    border-radius: 0;
    padding: 0 16px;
    gap: 12px;
    box-shadow: none;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* Send stays pinned under the scrolling body, always visible (H3 4). */
  .panel__foot {
    position: sticky;
    bottom: 0;
    z-index: 2;
    gap: 6px;
    margin: 0 -16px;
    padding: 10px 12px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: var(--card);
  }
  /* Clear order is not part of the sheet: emptying the cart closes it. */
  .panel__foot .link-btn { display: none; }

  .lines { min-height: 0; gap: 6px; }
  .lines__empty { padding: 12px 0; }
  /* The H2 aligned grid at the sheet's 48px stepper size (H3 4). */
  .line { grid-template-columns: minmax(0, 1fr) 48px 28px 48px 54px; column-gap: 6px; }
  .line__name { font-size: 16px; line-height: 19px; }
  .line__qty { font-size: 20px; }
  .line__amount { font-size: 16px; }
  .stepper { width: 48px; height: 48px; border-radius: 12px; font-size: 24px; }

  .total-row { padding-top: 8px; }
  .total-row__label { font-size: 18px; }
  .total-row__value { font-size: 32px; }
  .pay-group { gap: 8px; }
  .pay-btn { height: 48px; border-radius: 12px; font-size: 18px; }
  .field input[type='text'] { height: 48px; font-size: 20px; border-radius: 12px; }
  .send-btn { min-height: 60px; height: 60px; border-radius: 14px; font-size: 20px; }

  /* Recent orders: ☰ → Recent orders opens them in their own small sheet
     (H3 6), so the till screen itself is just tiles. */
  .mini-sheet__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 45;
    background: rgba(28, 25, 23, 0.45);
  }
  .mini-sheet__backdrop[hidden] { display: none; }
  .mini-sheet {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 46;
    max-height: 70dvh;
    padding: 0 16px calc(14px + env(safe-area-inset-bottom));
    border-radius: 18px 18px 0 0;
    background: var(--card);
    animation: sheet-up 180ms ease-out;
  }
  .mini-sheet[hidden] { display: none; }
  .mini-sheet:focus { outline: none; }
  .mini-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0 8px;
  }
  .mini-sheet__title { font-size: 20px; }
  .mini-sheet__body { overflow-y: auto; overscroll-behavior: contain; padding-bottom: 8px; }
  .mini-sheet .recent { flex-direction: column; align-items: stretch; padding: 0; gap: 8px; }
  .mini-sheet .recent__label { display: none; }
  .mini-sheet .recent__items { flex-direction: column; align-items: stretch; gap: 8px; }
  .mini-sheet .recent__item { justify-content: space-between; border-radius: 14px; }

  /* A fade, not a slide: a moving box would report a moving position to
     anything measuring the sheet the moment it opens. */
  @keyframes sheet-up {
    from { opacity: 0.4; }
    to { opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .sheet, .mini-sheet { animation: none; }
  }

  .header__slot--stations {
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: 100%;
    padding-bottom: 2px;
  }
  .header__slot--stations .ghost-btn { flex: none; padding: 0 14px; }
  .collected-count { display: none; }
  .undo-long { display: none; }
  .undo-short { display: inline; }
  .till-field label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

  .tabs { display: grid; }
  .columns { padding: 14px 16px 20px; gap: 12px; flex-direction: column; flex-wrap: nowrap; }
  .column { flex: 1 1 auto; width: 100%; }
  .column[data-active='false'] { display: none; }
  .column__head { display: none; }
  .order-card__call { font-size: 32px; }

  .reports { padding: 16px; gap: 16px; }
  .kpi__value { font-size: 32px; }
  .card-section { padding: 18px; }
  .chart { height: 180px; }

  /* Version: its own line under the screen title, so the header buttons keep
     their size (CLAUDE.md Phase III part 2, 5). */
  .version-pill {
    flex: 0 0 100%;
    width: 100%;
    padding: 0;
    border: none;
    border-radius: 0;
    color: var(--stone-400);
    font-size: 12px;
    line-height: 16px;
  }

  /* Login: the version line sits at the bottom of the screen. */
  .login { align-items: stretch; }
  .login__version { margin-top: auto; padding-top: 20px; }

  .report-pill { padding: 0 16px; font-size: 16px; }
  .range-card { padding: 16px; gap: 12px; }
  .range-field { flex: 1 1 140px; }
  .range-input { width: 100%; }
  .range-quick { width: 100%; }
  .quick-btn { flex: 1 1 auto; padding: 0 12px; font-size: 15px; }
  .range-error { font-size: 17px; }

  .days-chart { height: 200px; margin-top: 24px; }
  .days-chart__line, .days-chart__bars { left: 52px; }
  .days-chart__tick { width: 46px; font-size: 12px; }
  .days-chart__bars { gap: 8px; }
  .days-chart__labels { gap: 8px; padding-left: 52px; }
  .days-chart__label { font-size: 12px; line-height: 16px; }
  .day-bar__value { font-size: 12px; margin-bottom: 4px; }
  .days-readout { font-size: 15px; }
  /* Orders report (Phase IV): the day and search share a row, the status
     chips scroll sideways, and the list becomes cards. */
  .reports-orders { gap: 12px; }
  .orders-filters {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: end;
    gap: 10px;
    padding: 12px 14px;
  }
  .orders-field--status { grid-column: 1 / -1; }
  .orders-field--pay { display: none; }
  .orders-field--day .range-label,
  .orders-field--search .range-label {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .reports-orders .range-input,
  .orders-search { width: 100%; height: 44px; min-height: 44px; font-size: 16px; }
  .orders-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .chip { flex: none; min-height: 44px; padding: 0 12px; font-size: 14px; }
  .orders-summary { font-size: 15px; }

  .orders-table-wrap { display: none; }
  .orders-list-card { flex: 1 1 auto; padding: 0; background: none; border-radius: 0; }
  .orders-cards { padding: 0; }
  .orders-empty { padding: 28px 16px; background: var(--card); border-radius: 14px; }

  .order-detail { padding: 16px; gap: 14px; }
  .order-detail__no { font-size: 30px; line-height: 34px; }
  .order-detail__name { font-size: 20px; }
  .order-detail__meta { font-size: 15px; gap: 8px 12px; }
  .timeline__label { width: 84px; }
  table.order-items { font-size: 15px; }
  table.order-items th, table.order-items td { padding: 8px 2px; }
  /* Icon, quantity, name and line total only, as the phone mock-up has it
     (design/ReportsOrdersMobile.dc.html). The tablet detail keeps Price. */
  .order-line__price { display: none; }

  /* List and detail are two screens on the phone; which one shows follows the
     hash, so the browser Back button walks from the detail to the list. */
  .reports-orders[data-view='list'] .order-detail { display: none; }
  .reports-orders[data-view='detail'] .report-nav,
  .reports-orders[data-view='detail'] .orders-filters,
  .reports-orders[data-view='detail'] .orders-summary,
  .reports-orders[data-view='detail'] .orders-list-card { display: none; }
}