/* ============================================================================
   delEat — product UI
   The real screens, rebuilt in markup so they stay crisp at any size, respond
   to the container they sit in, and can be animated. Proportions, hierarchy
   and copy follow the shipping product.
   ========================================================================= */

.ui {
  --ui-bg:     #F7F3EE;
  --ui-card:   #FFFFFF;
  --ui-ink:    #000000;
  --ui-acc:    #FF6B3D;
  --ui-acc-sf: #FFF0E9;
  font-family: var(--font-ui);
  background: var(--ui-bg);
  color: var(--ui-ink);
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  min-height: 460px;
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: -0.004em;
}
@container (max-width: 700px) { .ui { grid-template-columns: 54px minmax(0,1fr); } }
@container (max-width: 430px) { .ui { grid-template-columns: minmax(0,1fr); } .ui-rail { display: none; } }

/* ---- the rail ------------------------------------------------------------*/
.ui-rail { background: var(--ui-card); border-right: 1px solid var(--ui-line); padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; }
.ui-rail .rb { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin-bottom: 10px; }
.ui-rail .rb img { height: 17px; }
.ui-nav { display: grid; gap: 1px; }
.ui-nav a {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 8px; border-radius: 7px;
  font-size: 11.5px; font-weight: 500; color: var(--ui-ink-2);
}
.ui-nav a .gl { flex: none; width: 13px; height: 13px; opacity: .8; }
.ui-nav a.on { background: var(--ui-acc-sf); color: #A13D20; font-weight: 600; }
.ui-nav a.on .gl { opacity: 1; }
@container (max-width: 700px) {
  .ui-rail .rb span, .ui-nav a span, .ui-outlet { display: none; }
  .ui-nav a { justify-content: center; padding: 7px 0; }
}
.ui-outlet { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--ui-line); }
.ui-outlet .sel {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 9px; border: 1px solid var(--ui-line); border-radius: 8px;
  font-size: 11px; font-weight: 600; background: var(--ui-bg);
}

/* ---- the body ------------------------------------------------------------*/
.ui-main { padding: 16px 18px 18px; overflow: hidden; }
.ui-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.ui-head h3 { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -.028em; line-height: 1.1; }
.ui-head .sub { font-size: 11px; color: var(--ui-ink-3); margin-top: 3px; display: flex; align-items: center; gap: 6px; }
.ui-head .sub .live { width: 6px; height: 6px; border-radius: 50%; background: #1A7F5A; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.ui-tools { display: flex; gap: 6px; align-items: center; }
.ui-seg { display: flex; background: var(--ui-sunk); border-radius: 8px; padding: 2px; }
.ui-seg b { font-size: 10.5px; font-weight: 600; padding: 4px 11px; border-radius: 6px; color: var(--ui-ink-2); }
.ui-seg b.on { background: var(--ui-card); color: var(--ui-ink); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.ui-btn { font-size: 10.5px; font-weight: 600; padding: 5px 10px; border-radius: 7px; border: 1px solid var(--ui-line); background: var(--ui-card); display: inline-flex; gap: 5px; align-items: center; }
.ui-btn.acc { background: var(--ui-acc); border-color: var(--ui-acc); color: #000000; }

/* ---- bento -----------------------------------------------------------------
   Cards are FILLED surfaces, not bordered containers. Four fills, chosen by
   what the card is for, and no border anywhere — separation is fill plus gap.
   One accent per band, one or two ink, the rest paper.                      */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
@container (max-width: 620px) { .bento { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.tile {
  background: var(--ui-card); border: 0; border-radius: 20px;
  padding: 14px 15px; min-width: 0;
}
.tile.ink  { background: #000000; color: #F7F3EE; }
.tile.ink .tile-h b, .tile.ink .cap { color: var(--ui-ink-tile-3); }
.tile.wash { background: var(--ui-acc-sf); }
.tile.wash .tile-h b { color: #A13D20; }
.tile.w2 { grid-column: span 2; }
.tile.w3 { grid-column: span 3; }
.tile.w4 { grid-column: span 4; }
@container (max-width: 620px) { .tile.w3, .tile.w4 { grid-column: span 2; } }
.tile-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tile-h b { font-size: 11px; font-weight: 500; color: var(--ui-ink-3); display: flex; align-items: center; gap: 6px; }
/* the drill-down affordance is a real button, not a quiet chevron */
.tile-h .chev {
  width: 20px; height: 20px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: 10px; font-weight: 700;
  background: rgba(0,0,0,.06); color: var(--ui-ink-2);
}
.tile.ink .tile-h .chev { background: rgba(255,255,255,.12); color: var(--ui-ink-tile-1); }
.tile.hero-tile .tile-h .chev { background: rgba(0,0,0,.14); color: var(--ui-on-acc); }
/* period selectors belong on the card they affect, not in the page toolbar */
.tile-pill {
  font-size: 9.5px; font-weight: 600; padding: 3px 8px; border-radius: 12px;
  background: rgba(0,0,0,.06); color: var(--ui-ink-2); white-space: nowrap;
}
.tile.ink .tile-pill { background: rgba(255,255,255,.12); color: var(--ui-ink-tile-1); }
.tile .fig {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 34px; font-weight: 700; letter-spacing: -.04em; line-height: 1.05; margin-top: 9px;
}
.tile .fig.sm { font-size: 26px; }
.tile .cap { font-size: 10px; color: var(--ui-ink-3); margin-top: 4px; }
.delta { font-family: var(--font-mono); font-size: 10px; font-weight: 700; padding: 2px 5px; border-radius: 4px; }
.delta.up { background: #E7F4EE; color: #0E5C40; }
.delta.dn { background: #FBEAE8; color: #8C1712; }

/* the one number the shift is judged on — accent fill, ink type */
.tile.hero-tile { background: var(--ui-acc); color: #000000; }
.tile.hero-tile .fig { font-size: 48px; }
.tile.hero-tile .tile-h b { color: var(--ui-on-acc); }
.tile.hero-tile .cap { color: var(--ui-on-acc-2); }
.tile.hero-tile .delta.up { background: rgba(0,0,0,.14); color: #000000; }

/* sparkline / bars / donut are inline SVG; these just size them */
.spark { width: 100%; height: 56px; margin-top: 10px; display: block; }
.bars  { width: 100%; height: 66px; margin-top: 10px; display: block; }
.donut { width: 104px; height: 104px; flex: none; }
/* 45° hatch — the texture for anything not yet reached: forecast, remaining
   budget, par level not hit. Used across bars, arcs and pies. */
.ui-hatch { --hatch: rgba(0,0,0,.16); }
.tile.ink .ui-hatch { --hatch: rgba(255,255,255,.18); }
.legend { display: grid; gap: 5px; font-size: 10px; min-width: 0; }
.legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 6px; flex: none; }
.legend div { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ui-ink-2); }
.legend b { font-family: var(--font-mono); color: inherit; font-variant-numeric: tabular-nums; }
.tile.ink .legend div { color: var(--ui-ink-tile-2); }
.donut-row { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.donut-wrap { position: relative; flex: none; }
.donut-mid {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}
.donut-mid b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.03em; }
.donut-mid span { font-size: 8.5px; color: var(--ui-ink-3); }
.tile.ink .donut-mid span { color: var(--ui-ink-3); }

.chip-row { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 600; padding: 5px 9px;
  background: var(--ui-card); border: 1px solid var(--ui-line); border-radius: 8px;
}
.chip .n { font-family: var(--font-mono); font-weight: 700; }
.chip.warn { border-color: var(--ui-warn-line); background: #FBF1DC; color: #8A5C05; }
.tile.wash .chip { background: var(--ui-card); border-color: #FFCEBD; }

/* ---- till ----------------------------------------------------------------*/
.till { display: grid; grid-template-columns: 104px minmax(0,1fr) 196px; gap: 0; height: 100%; min-height: 460px; }
@container (max-width: 560px) { .till { grid-template-columns: 84px minmax(0,1fr); } .till .till-order { display: none; } }
.till-cats { border-right: 1px solid var(--ui-line); padding: 10px 7px; display: grid; gap: 2px; align-content: start; background: var(--ui-card); }
.till-cats b {
  display: flex; align-items: center; gap: 6px; justify-content: space-between;
  font-size: 10.5px; font-weight: 600; color: var(--ui-ink-2);
  padding: 6px 7px; border-radius: 7px; border-left: 3px solid transparent;
}
.till-cats b i { font-style: normal; font-family: var(--font-mono); font-size: 9.5px; color: var(--ui-ink-3); }
.till-cats b.on { background: var(--ui-sunk); color: var(--ui-ink); border-left-color: var(--ui-acc); }

.till-menu { padding: 10px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; align-content: start; overflow: hidden; }
@container (max-width: 760px) { .till-menu { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.dish { background: var(--ui-card); border: 1px solid var(--ui-line); border-radius: 10px; overflow: hidden; }
.dish .ph { aspect-ratio: 16/10; background: var(--ph, var(--ui-ph)); position: relative; }
.dish .ph::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(80% 70% at 30% 25%, rgba(255,255,255,.30), transparent 65%);
}
.dish .ph .veg { position: absolute; left: 6px; top: 6px; width: 10px; height: 10px; border: 1.5px solid #1A7F5A; border-radius: 2px; background: #fff; }
.dish .ph .veg.nv { border-color: #B3211A; }
.dish .ph .veg::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: #1A7F5A; }
.dish .ph .veg.nv::after { background: #B3211A; }
.dish .nm { padding: 7px 8px 8px; }
.dish .nm b { display: block; font-size: 10.5px; font-weight: 600; line-height: 1.3; }
.dish .nm span { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 700; margin-top: 3px; }

.till-order { border-left: 1px solid var(--ui-line); background: var(--ui-card); display: flex; flex-direction: column; padding: 10px; }
.till-order .oh { display: flex; align-items: flex-start; justify-content: space-between; }
.till-order .oh b { font-size: 12px; font-weight: 700; }
.till-order .oh small { display: block; font-size: 9.5px; color: var(--ui-ink-3); }
.till-order .cov { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; }
.till-order .cov s { text-decoration: none; width: 17px; height: 17px; border: 1px solid var(--ui-line); border-radius: 5px; display: grid; place-items: center; }
.svc { display: flex; gap: 2px; background: var(--ui-sunk); padding: 2px; border-radius: 7px; margin-top: 9px; }
.svc b { flex: 1; text-align: center; font-size: 9.5px; font-weight: 600; padding: 4px 0; border-radius: 5px; color: var(--ui-ink-2); }
.svc b.on { background: var(--ui-card); color: var(--ui-ink); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.olines { margin-top: 10px; display: grid; gap: 7px; align-content: start; flex: 1; }
.oline { display: grid; grid-template-columns: 18px minmax(0,1fr) auto; gap: 7px; font-size: 10.5px; align-items: baseline; }
.oline .q { font-family: var(--font-mono); font-weight: 700; color: var(--ui-acc); }
.oline .p { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.oline small { display: block; color: var(--ui-ink-3); font-size: 9.5px; }
.osum { border-top: 1px dashed var(--ui-line); margin-top: 10px; padding-top: 8px; display: grid; gap: 4px; font-size: 10px; }
.osum div { display: flex; justify-content: space-between; color: var(--ui-ink-2); }
.osum .tot { font-size: 15px; font-weight: 700; color: var(--ui-ink); font-family: var(--font-mono); letter-spacing: -.03em; margin-top: 3px; }
.opay { margin-top: 9px; display: grid; gap: 5px; }
.opay .pb { text-align: center; font-size: 11px; font-weight: 700; padding: 9px; border-radius: 9px; background: var(--ui-acc); color: #000000; }
.opay .pb.sec { background: var(--ui-card); border: 1px solid var(--ui-line); color: var(--ui-ink-2); font-weight: 600; font-size: 10px; padding: 6px; }

/* ---- kitchen -------------------------------------------------------------*/
.kds { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
@container (max-width: 760px) { .kds { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.tkt { background: var(--ui-card); border: 1px solid var(--ui-line); border-left: 3px solid var(--ui-acc); border-radius: 10px; overflow: hidden; }
.tkt.age-2 { border-left-color: #C98A0B; }
.tkt.age-3 { border-left-color: #B3211A; }
.tkt .th { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 9px 6px; }
.tkt .th b { font-size: 11px; font-weight: 700; text-transform: lowercase; }
.tkt .th .ag { font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--ui-ink-3); }
.tkt.age-2 .th .ag { color: #8A5C05; } .tkt.age-3 .th .ag { color: #8C1712; }
.tkt .tm { padding: 0 9px 6px; font-size: 9.5px; color: var(--ui-ink-3); font-family: var(--font-mono); }
.tkt ul { list-style: none; margin: 0; padding: 0 9px 8px; display: grid; gap: 4px; }
.tkt li { font-size: 10.5px; display: grid; grid-template-columns: 20px 1fr; gap: 4px; }
.tkt li b { font-family: var(--font-mono); color: var(--ui-acc); }
.tkt li em { display: block; font-style: normal; font-size: 9.5px; color: var(--ui-ink-3); }
.tkt .ta { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 0 9px 9px; }
.tkt .ta b { text-align: center; font-size: 10px; font-weight: 600; padding: 5px; border-radius: 7px; border: 1px solid var(--ui-line); }
.tkt .ta b.go { background: #E7F4EE; border-color: var(--ui-go-line); color: #0E5C40; }

/* ---- reports -------------------------------------------------------------*/
.rep-kpi { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 9px; }
@container (max-width: 620px) { .rep-kpi { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.rep-tabs { display: flex; gap: 14px; margin: 12px 0 0; border-bottom: 1px solid var(--ui-line); }
.rep-tabs b { font-size: 10.5px; font-weight: 600; color: var(--ui-ink-3); padding-bottom: 7px; border-bottom: 2px solid transparent; }
.rep-tabs b.on { color: var(--ui-ink); border-bottom-color: var(--ui-acc); }
.rtab { width: 100%; border-collapse: collapse; font-size: 10.5px; margin-top: 4px; }
.rtab th, .rtab td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--ui-line); }
.rtab thead th { font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--ui-ink-3); font-weight: 600; }
.rtab td.n, .rtab th.n { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.rtab tbody tr:last-child td { border-bottom: 0; }
.rtab tr.sum td { font-weight: 700; background: var(--ui-sunk); }
.rtab td.neg { color: #8C1712; }
/* a shorter row for a table that has to fit in less room (inventory's slow
   movers, on a fixed-height mac screen) -- same table, tighter padding. */
.rtab-tight td { padding: 3px 8px; font-size: 10px; }

/* ---- recipe / cost -------------------------------------------------------*/
.rc { display: grid; grid-template-columns: minmax(0,1fr) 190px; gap: 10px; }
@container (max-width: 700px) { .rc { grid-template-columns: 1fr; } }
.rc-lines { background: var(--ui-card); border: 1px solid var(--ui-line); border-radius: 12px; overflow: hidden; }
.rc-lines .hd { padding: 9px 11px; border-bottom: 1px solid var(--ui-line); font-size: 11px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
.rc-lines table { width: 100%; border-collapse: collapse; font-size: 10.5px; }
.rc-lines td { padding: 6px 11px; border-bottom: 1px solid var(--ui-line); }
.rc-lines td.n { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.rc-lines tr:last-child td { border-bottom: 0; }
.rc-panel { background: var(--ui-card); border: 1px solid var(--ui-line); border-radius: 12px; padding: 11px; display: grid; gap: 9px; align-content: start; }
.rc-panel .row { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ui-ink-2); }
.rc-panel .row b { font-family: var(--font-mono); color: var(--ui-ink); }
.rc-panel .big { font-family: var(--font-mono); font-size: 22px; font-weight: 700; letter-spacing: -.03em; }
.rc-panel .meter { height: 6px; border-radius: 3px; background: var(--ui-sunk); overflow: hidden; }
.rc-panel .meter i { display: block; height: 100%; background: var(--ui-acc); }
.rc-note { font-size: 9.5px; color: var(--ui-ink-3); line-height: 1.5; }

/* ---- floor ---------------------------------------------------------------*/
.floor { display: grid; grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); gap: 8px; }
.tbl { background: var(--ui-card); border: 1px solid var(--ui-line); border-radius: 10px; padding: 10px 9px; position: relative; }
.tbl b { font-size: 12px; font-weight: 700; }
.tbl small { display: block; font-size: 9.5px; color: var(--ui-ink-3); margin-top: 2px; }
.tbl .dot { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: #1A7F5A; }
.tbl.seated { border-color: #FFB298; background: #FFF0E9; }
.tbl.seated .dot { background: var(--ui-acc); }
.tbl.seated .amt { font-family: var(--font-mono); font-size: 11px; font-weight: 700; margin-top: 3px; }
.tbl.dirty { background: var(--ui-sunk); }
.tbl.dirty small { color: var(--ui-ink-2); }   /* on the sunk panel ui-ink-3 is 4.43; ui-ink-2 is 5.89 */
.tbl.dirty .dot { background: #C98A0B; }

/* ranked list — a bar behind the name rather than beside it, so the row is
   readable and the proportion is still legible at a glance */
.rank { display: grid; gap: 7px; margin-top: 11px; }
.rank > div {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 6px 9px; border-radius: 9px; overflow: hidden;
  font-size: 10.5px; font-weight: 500;
}
.rank i { position: absolute; inset: 0 auto 0 0; background: var(--ui-acc-sf); z-index: 0; }
.rank span, .rank b { position: relative; z-index: 1; }
.rank b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---- vibrant tiles ---------------------------------------------------------
   The dashboard was one accent on white. Cards now carry the chart palette as
   FILLS, which is what makes the reference boards read from across a room —
   and the hue still means something: teal is people, indigo is cost, gold is
   a warning, ember is money.                                               */
.tile.teal   { background: #12796B; color: var(--ui-on-teal); }
.tile.indigo { background: #3B4FB8; color: var(--ui-on-indigo); }
.tile.gold   { background: #C98A0B; color: var(--ui-on-gold); }
.tile.violet { background: #9C4FD1; color: var(--ui-on-violet); }
.tile.teal .tile-h b, .tile.indigo .tile-h b,
.tile.gold .tile-h b, .tile.violet .tile-h b { color: rgba(255,255,255,.72); }
.tile.teal .cap, .tile.indigo .cap,
.tile.gold .cap, .tile.violet .cap { color: rgba(255,255,255,.66); }
.tile.teal .tile-h .chev, .tile.indigo .tile-h .chev,
.tile.gold .tile-h .chev, .tile.violet .tile-h .chev {
  background: rgba(255,255,255,.16); color: #fff;
}
.tile.teal .tile-pill, .tile.indigo .tile-pill,
.tile.gold .tile-pill, .tile.violet .tile-pill {
  background: rgba(255,255,255,.16); color: #fff;
}
.tile.teal .delta.up, .tile.indigo .delta.up {
  background: rgba(255,255,255,.18); color: #fff;
}

/* ---- menu matrix (dashboard) ----------------------------------------------
   Popularity (y) against margin (x) -- the four boxes report 18 exports:
   stars, plough-horses, puzzles, dogs. One dot is highlighted with a CSS-only
   tooltip; all of them drift a couple of px, same rhythm as the live tiles. */
.qm { position: relative; height: 76px; margin-top: 9px; background: var(--ui-sunk); border-radius: 10px; }
.qm::before, .qm::after { content: ""; position: absolute; background: var(--ui-line); }
.qm::before { left: 50%; top: 5px; bottom: 5px; width: 1px; }
.qm::after { top: 50%; left: 5px; right: 5px; height: 1px; }
.qm-q { position: absolute; font-family: var(--font-mono); font-size: 6.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--ui-ink-2); }
.qm-q.q-star { right: 6px; top: 5px; }
.qm-q.q-plow { left: 6px; top: 5px; }
.qm-q.q-puz { right: 6px; bottom: 5px; }
.qm-q.q-dog { left: 6px; bottom: 5px; }
.qm-dot {
  position: absolute; left: var(--x); bottom: var(--y); width: 5px; height: 5px; border-radius: 50%;
  background: var(--ui-ink-3); transform: translate(-50%, 50%);
}
.qm-dot.is-hl { width: 7px; height: 7px; background: var(--ui-acc); box-shadow: 0 0 0 3px rgba(255,107,61,.22); }
.qm-dot[data-tip]:hover, .qm-dot[data-tip]:focus-visible { z-index: 3; }
.qm-dot[data-tip]:hover::after, .qm-dot[data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; bottom: 9px; left: 50%; transform: translateX(-50%);
  background: var(--ui-ink); color: var(--ui-bg); font-family: var(--font-mono); font-size: 8px; font-weight: 600;
  padding: 4px 7px; border-radius: 6px; white-space: nowrap; z-index: 5; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .qm-dot { animation: qmDrift 4.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
}
@keyframes qmDrift {
  0%, 100% { transform: translate(-50%, 50%); }
  50%      { transform: translate(calc(-50% + 1.4px), calc(50% - 1.1px)); }
}

/* ---- day-part heat map (dashboard) ----------------------------------------
   7 weekday rows x 12 hourly columns (10:00-22:00), tinted from bone (0) to
   the accent (highest net sales) with color-mix -- a token blend, so both
   palettes stay correct without a second hex table. */
.heat { margin-top: 6px; display: grid; gap: 1px; }
.heat-row { display: grid; grid-template-columns: 16px repeat(12, 1fr); gap: 1px; align-items: center; height: 6px; }
.heat-row span { font-family: var(--font-mono); font-size: 6px; color: var(--ui-ink-3); line-height: 1; }
.heat-row i { height: 6px; border-radius: 1px; display: block; background: color-mix(in srgb, var(--ui-acc) calc(var(--v) * 100%), var(--ui-bg)); }
.heat-axis { grid-column: 2 / -1; display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 2px; line-height: 1; }
.heat-axis span { font-family: var(--font-mono); font-size: 6px; color: var(--ui-ink-3); }
.heat-axis span:last-child { text-align: right; }

/* ---- menu engineering / slow movers -- inventory + guest card (loyalty) --*/
.guest-card { margin-top: 10px; background: var(--ui-card); border: 1px solid var(--ui-line); border-radius: 12px; padding: 12px; display: grid; gap: 10px; }
.gc-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.gc-name b { display: block; font-size: 13px; font-weight: 700; }
.gc-name span { display: block; font-size: 9.5px; color: var(--ui-ink-3); margin-top: 2px; }
.gc-pts { text-align: right; flex: none; }
.gc-pts b { display: block; font-family: var(--font-mono); font-size: 18px; font-weight: 700; letter-spacing: -.03em; }
.gc-pts span { display: block; font-size: 9px; color: var(--ui-ink-3); }
.gc-row { display: flex; gap: 6px; flex-wrap: wrap; }
.gc-fav > span { display: block; font-size: 9.5px; color: var(--ui-ink-3); margin-bottom: 5px; }
.gc-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.gc-chip {
  font-style: normal; font-size: 10px; font-weight: 600; padding: 4px 9px; border-radius: 999px;
  background: var(--ui-sunk); color: var(--ui-ink-2); white-space: nowrap;
}