/* ═══════════════════════════════════════════════════════════
   Back-office views: orders board, kitchen, floor, menu, staff, reports.
   ═══════════════════════════════════════════════════════════ */

/* ══════════════════ TAKING AN ORDER ══════════════════ */
.pos{display:flex;height:100%;}

.cats{
  width:168px;flex:none;background:var(--surface);
  border-right:1px solid var(--line);overflow-y:auto;padding:10px 9px;
}
.cat{
  width:100%;text-align:left;padding:11px 12px;border-radius:var(--r-sm);
  color:var(--fg-3);margin-bottom:3px;display:flex;flex-direction:column;gap:2px;
  transition:background var(--tap) var(--ease),color var(--tap) var(--ease);
}
.cat b{font-size:.8rem;font-weight:500;}
.cat i{font-family:var(--mono);font-size:.55rem;font-style:normal;opacity:.7;}
.cat:hover{background:var(--surface-2);color:var(--fg-2);}
.cat.on{background:var(--surface-3);color:var(--fg);}
.cat.on i{color:var(--accent);opacity:1;}

.grid-wrap{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg);}
.grid-head{
  height:56px;flex:none;display:flex;align-items:center;gap:12px;
  padding:0 16px;border-bottom:1px solid var(--line);
}
.grid-count{margin-left:auto;color:var(--fg-3);}
.grid{
  flex:1;min-height:0;overflow-y:auto;padding:14px;display:grid;gap:11px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  grid-auto-rows:max-content;align-content:start;
}

/* the ticket alongside */
/* On a 1366×768 laptop the header and the footer together left the basket 37px
   of height — one line of a five-drink order. So the whole column scrolls and
   only the buttons are pinned: the guest's details and the discount can be
   scrolled to, but Confirm must always be under the cashier's thumb. */
.ticket{
  width:360px;flex:none;background:var(--surface);
  border-left:1px solid var(--line);display:flex;flex-direction:column;
  min-height:0;overflow:auto;
}
/* the tile: photo, name, price, and a + that adds it outright */
.tile{
  position:relative;text-align:left;overflow:hidden;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);display:flex;flex-direction:column;
  transition:border-color var(--tap) var(--ease),transform var(--tap) var(--ease),
             box-shadow var(--tap) var(--ease);
}
.tile:hover{border-color:var(--line-2);box-shadow:var(--shadow-sm);}
.tile:active{transform:scale(.975);}
.tile-shot{height:84px;flex:none;background:var(--surface-2);overflow:hidden;position:relative;}
.tile-shot img{width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .4s var(--ease);}
.tile-shot img.ready{opacity:1;}
.tile-var{
  position:absolute;top:7px;left:7px;z-index:2;
  padding:3px 7px;border-radius:100px;
  background:rgba(8,8,10,.62);backdrop-filter:blur(6px);color:#fff;
  font-family:var(--mono);font-size:.47rem;letter-spacing:.08em;text-transform:uppercase;
}
.tile-pad{padding:10px 11px 11px;display:flex;flex-direction:column;flex:1;}
.tile b{
  font-size:.84rem;font-weight:600;line-height:1.26;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.tile-meta{margin-top:auto;padding-top:9px;display:flex;align-items:center;gap:7px;}
.tile-price{font-family:var(--mono);font-size:.86rem;}
.tile-opts{color:var(--fg-3);font-size:.45rem;}
.tile-add{
  margin-left:auto;width:30px;height:30px;border-radius:50%;flex:none;
  background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;
  transition:transform var(--tap) var(--ease),filter var(--tap) var(--ease);
}
.tile-add svg{width:15px;height:15px;stroke:currentColor;fill:none;
  stroke-width:2.6;stroke-linecap:round;}
.tile-add:hover{filter:brightness(1.08);}
.tile-add:active{transform:scale(.82);}
.tile.hit{animation:hit 280ms var(--ease);}
@keyframes hit{
  0%{border-color:var(--accent);background:var(--accent-soft);}
  100%{border-color:var(--line);background:var(--surface);}
}

/* ══════ DELIVERY ══════
   A third way to order. On the board it needs to read differently at a glance
   from a table number, because it is the one nobody can work out by looking
   around the room. */
.ob-filter{display:flex;gap:5px;margin-right:14px;}
.ob-filter button{
  border:1px solid var(--line);background:var(--surface-2);color:var(--fg-3);
  border-radius:100px;padding:6px 12px;cursor:pointer;font:inherit;font-size:.74rem;
}
.ob-filter button:hover{color:var(--fg);}
.ob-filter button.on{background:var(--accent);border-color:var(--accent);
  color:var(--accent-ink);font-weight:600;}

.ocard-dest.is-deliv{
  background:color-mix(in srgb, var(--warn,#e0a02a) 12%, transparent);
  border-color:color-mix(in srgb, var(--warn,#e0a02a) 40%, transparent);
}
.ocard-dest.is-deliv > .mono{color:var(--warn,#e0a02a);}
/* an address is long; two lines then ellipsis keeps the card its own height */
.ocard-addr{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;font-size:.82rem;line-height:1.35;font-weight:600;
}

.chip-warn{
  background:color-mix(in srgb, var(--warn,#e0a02a) 18%, transparent);
  color:var(--warn,#e0a02a);
}

/* the full address, on the order sheet, where there is room for it */
.od-addr{
  display:flex;flex-direction:column;gap:5px;align-items:flex-start;
  padding:12px 14px;margin-top:10px;border-radius:var(--r-sm);
  background:var(--surface-2);
  border:1px solid color-mix(in srgb, var(--warn,#e0a02a) 35%, var(--line));
}
.od-addr > .mono{color:var(--warn,#e0a02a);}
.od-addr b{line-height:1.5;}
.od-addr i{font-style:normal;color:var(--fg-3);font-size:.78rem;}

.ticket-head textarea{
  width:100%;resize:vertical;min-height:52px;font:inherit;font-size:.86rem;
  padding:10px 12px;background:var(--surface-2);border:1px solid var(--line);
  color:var(--fg);border-radius:var(--r-sm);line-height:1.5;
}
/* three types no longer fit two-across at the till */
.types .type-btn{padding:9px 4px;font-size:.78rem;}

/* ══════ REPORT TABS ══════ */
.rtabs{display:flex;gap:6px;margin-bottom:14px;}
.rtabs button{
  border:1px solid var(--line);background:var(--surface-2);color:var(--fg-3);
  border-radius:100px;padding:8px 16px;cursor:pointer;font:inherit;font-size:.82rem;
  transition:color var(--tap) var(--ease), background var(--tap) var(--ease);
}
.rtabs button:hover{color:var(--fg);}
.rtabs button.on{background:var(--accent);border-color:var(--accent);
  color:var(--accent-ink);font-weight:600;}

/* ══════ WHO WAS IN ══════
   One row per order: who, their number, and what they actually had. */
.cust-panel{padding:0;overflow:hidden;}
.cust-table{width:100%;border-collapse:collapse;font-size:.86rem;}
.cust-table th{
  text-align:left;padding:11px 14px;background:var(--surface-2);
  border-bottom:1px solid var(--line-2);
  font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-3);font-weight:600;
}
.cust-table th.num,.cust-table td.num{text-align:right;}
.cust-table td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top;}
.cust-table tbody tr:last-child td{border-bottom:none;}
.cust-table tbody tr:hover{background:var(--surface-2);}
.cust-when,.cust-where,.cust-paid{
  display:block;font-style:normal;color:var(--fg-3);font-size:.68rem;margin-top:2px;
}
.cust-phone a{color:var(--accent);text-decoration:none;}
.cust-phone a:hover{text-decoration:underline;}
.cust-items{min-width:220px;}
.cust-line{display:flex;gap:8px;padding:1px 0;}
.cust-line .cq{
  flex:none;min-width:20px;text-align:center;color:var(--fg-3);
  font-size:.72rem;padding-top:1px;
}
.cust-line i{display:block;font-style:normal;color:var(--fg-3);font-size:.68rem;}
.cust-note{color:var(--fg-3);font-size:.72rem;margin-top:4px;}

/* Only on paper. */
.print-head{display:none;}

/* ══════ PRINTING A REPORT ══════
   "Export PDF" is the browser's own print dialog, so this is what decides
   whether the result is a document or a screenshot of an app. Everything that
   belongs to the screen — the rail, the top bar, the date pickers, the live
   strip — comes off, and the report introduces itself instead. */
@media print{
  @page{margin:14mm;}

  /* Paper is white whatever the café's screen is set to. */
  :root, :root[data-theme="dark"]{
    --bg:#fff; --surface:#fff; --surface-2:#fff; --surface-3:#f4f4f4;
    --fg:#111; --fg-2:#333; --fg-3:#666;
    --line:#ddd; --line-2:#bbb; --accent:#111; --accent-ink:#fff;
  }
  html,body{background:#fff !important;height:auto !important;overflow:visible !important;}

  .rail, .topbar, .rangebar, .rtabs, .livestrip,
  .page-head .btn, .toasts, .modal-back{display:none !important;}

  .app, .mgr-main, .page, #body{
    display:block !important;height:auto !important;overflow:visible !important;
    padding:0 !important;margin:0 !important;
  }

  .print-head{
    display:block;margin-bottom:14px;padding-bottom:10px;
    border-bottom:2px solid #111;
  }
  .print-head b{display:block;font-size:1.3rem;}
  .print-head span{display:block;font-size:.95rem;margin-top:2px;}
  .print-head i{display:block;font-style:normal;font-size:.72rem;color:#666;margin-top:4px;}

  .page-head h3, .page-head .mono{display:none;}

  /* Cards read as a row of figures rather than tiles. */
  .cards{display:flex !important;gap:18px;page-break-inside:avoid;margin-bottom:14px;}
  .stat{border:1px solid #ddd !important;padding:9px 12px !important;box-shadow:none !important;}
  .panel{border:1px solid #ddd !important;box-shadow:none !important;}

  /* A long day should not tear a row in half across a page break. */
  .cust-table{font-size:.76rem;}
  .cust-table thead{display:table-header-group;}
  .cust-table tr{page-break-inside:avoid;}
  .cust-table th{background:#f4f4f4 !important;-webkit-print-color-adjust:exact;}
  .cust-phone a{color:#111;text-decoration:none;}

  /* Bars and charts carry no meaning in monochrome print. */
  .bar-row .bar, .chart{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
}

/* ══════ THE COFFEE BOOK ══════
   A day sheet. Opening is carried in and cannot be typed, so it reads quieter
   than the three columns the bar actually fills in. */
.bean{display:flex;flex-direction:column;gap:16px;height:100%;min-height:0;padding:18px;}
.bean-bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
}
.bean-when{display:flex;align-items:center;gap:8px;}
.bean-when input[type=date]{
  background:var(--surface-2);border:1px solid var(--line);color:var(--fg);
  border-radius:var(--r-sm);padding:8px 11px;font:inherit;font-size:.85rem;
}
.bean-tot{display:flex;gap:22px;flex-wrap:wrap;}
.bean-tot > div{display:flex;flex-direction:column;gap:2px;}
.bean-tot .mono{color:var(--fg-3);font-size:.6rem;}
.bean-tot b{font-size:1.05rem;}
.bean-tot .hot b{color:var(--accent);}

.bean-note{
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:10px 13px;
}
.bean-note .mono{color:var(--fg-3);line-height:1.7;}
/* the roastery is not answering — the list on screen is the last one seen */
.bean-note .mono.warn{color:var(--warn,#e0a02a);}
.bean-store{font-style:normal;color:var(--fg-2);}

/* grams or kilos — how weights are typed and read, never how they are stored */
.unit-pick{
  display:inline-flex;border:1px solid var(--line);border-radius:100px;
  overflow:hidden;margin-left:6px;
}
.unit-pick button{
  border:none;background:none;cursor:pointer;font:inherit;
  padding:7px 13px;font-size:.75rem;color:var(--fg-3);
}
.unit-pick button.on{background:var(--accent);color:var(--accent-ink);font-weight:600;}

.bean-body{flex:1;min-height:0;overflow:auto;}
.bean-table{width:100%;border-collapse:collapse;font-size:.88rem;}
.bean-table th{
  text-align:left;padding:9px 10px;position:sticky;top:0;z-index:1;
  background:var(--surface);border-bottom:1px solid var(--line-2);
  font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);
  font-weight:600;
}
.bean-table th.num,.bean-table td.num{text-align:right;}
.bean-table td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle;}
.bean-table tbody tr:hover{background:var(--surface-2);}
.bean-table tr.fresh td{opacity:.92;}
.bean-org{display:block;font-style:normal;color:var(--fg-3);font-size:.68rem;margin-top:2px;}
/* carried in, not typed — reads as context rather than an entry */
.bean-table td.carried{color:var(--fg-3);}
.bean-table input[type=number]{
  width:82px;text-align:right;background:var(--surface-2);
  border:1px solid var(--line);color:var(--fg);
  border-radius:var(--r-sm);padding:6px 8px;font:inherit;font-size:.85rem;
}
.bean-close{color:var(--accent);}
/* used more than there was — the one arithmetic the book must not allow */
.bean-table tr.over .bean-close{color:var(--danger,#e5484d);}
.bean-noteCell{display:flex;gap:8px;align-items:center;}
.bean-noteCell input{
  flex:1;min-width:110px;background:var(--surface-2);border:1px solid var(--line);
  color:var(--fg);border-radius:var(--r-sm);padding:6px 9px;font:inherit;font-size:.82rem;
}
/* signing the day off */
.bean-foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;padding-top:4px;
}
.bean-queue{color:var(--fg-3);}
.bean-acts{display:flex;gap:10px;}
/* what leaves the store, itemised before anybody commits to it */
.bean-confirm{list-style:none;display:flex;flex-direction:column;gap:2px;}
.bean-confirm li{
  display:flex;justify-content:space-between;gap:14px;
  padding:8px 0;border-bottom:1px solid var(--line);
}
.bean-confirm li:last-child{border-bottom:none;}

@media (max-width:860px){
  .bean{padding:12px;}
  .bean-body{overflow-x:auto;}
  .bean-table{min-width:720px;}
  .bean-foot{flex-direction:column;align-items:stretch;}
  .bean-acts .btn{width:100%;}
}

/* ══════ SETTLING A BILL ══════
   What has been taken sits under the totals, ruled off from them, so the
   question a cashier actually has — is this paid? — is answered in one look. */
.pay-box{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);}
.pay-ref,.pay-by{
  font-style:normal;display:inline-block;margin-left:8px;
  font-size:.62rem;color:var(--fg-3);
}
.pay-by::before{content:'· ';}
.sum.total.paid{color:var(--accent);}
.sum.total.due{color:var(--fg);}
/* The guest said they transferred and nobody has looked yet — this is the one
   state on the screen that is a question rather than a fact. */
.sum.total.check{color:var(--warn, #e0a02a);}
.sum.unchecked{color:var(--warn, #e0a02a);}
.pay-ok{
  margin-left:9px;padding:3px 9px;border-radius:100px;cursor:pointer;
  font:inherit;font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;
  background:var(--warn, #e0a02a);border:none;color:#1a1205;
}
.pay-ok:hover{filter:brightness(1.1);}
.check-tag{
  color:var(--warn, #e0a02a);font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;
}
.pay-x{
  margin-left:9px;border:none;background:none;cursor:pointer;
  color:var(--fg-3);font-size:1rem;line-height:1;padding:0 2px;
}
.pay-x:hover{color:var(--danger, #e5484d);}
.pay-change{color:var(--accent);min-height:1.2em;margin-top:6px;}
.pay-warn{color:var(--fg-3);line-height:1.7;margin-top:10px;}

/* the card says "paid" where it would otherwise count items */
.paid-tag{
  color:var(--accent);font-weight:600;letter-spacing:.04em;text-transform:uppercase;
}

/* how the counter settles it, chosen as the order is rung up. Ruled off from
   the money above it, because picking this is a separate decision from the
   discount and the total. */
.pay-pick{
  display:flex;flex-direction:column;gap:9px;
  padding-top:13px;border-top:1px solid var(--line);
}
.pay-pick > .mono{color:var(--fg-3);}
.pay-pick .chip-opt{padding:7px 13px;font-size:.8rem;}
.opt-hint{font-style:normal;color:var(--fg-3);margin-left:6px;}
.ticket-foot .field input{padding:10px 12px;font-size:.86rem;}

/* The pane swaps with the chosen method, so it carries its own rhythm rather
   than relying on the modal body's gap — its children are one level down. */
.pay-pane{display:flex;flex-direction:column;gap:15px;}
.pay-pane[hidden]{display:none;}

/* The InstaPay block itself lives in app.css: the guest picks a payment method
   on their phone and staff pick the same one at the counter, and order.html
   never loads this file. */

/* ── the options sheet ──
   One question per block, ruled off from the next so six of them in a row
   still read as separate decisions rather than a wall of chips. */
.opt-block{
  display:flex;flex-direction:column;gap:10px;
  padding-bottom:16px;border-bottom:1px solid var(--line);
}
.opt-block:last-of-type{border-bottom:none;padding-bottom:4px;}
.opt-block > .mono{color:var(--fg-2);display:flex;align-items:center;flex-wrap:wrap;}
.opt-block > .mono .req,
.opt-block > .mono .opt{
  font-style:normal;margin-left:9px;padding:3px 8px;border-radius:100px;
  font-size:.5rem;letter-spacing:.08em;line-height:1;
}
.opt-block > .mono .req{background:var(--accent-soft);color:var(--accent);}
.opt-block > .mono .opt{background:var(--surface-3);color:var(--fg-3);}

.opt-qty{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-top:4px;
}
.opt-qty > .mono{color:var(--fg-2);}

/* the sheet is a stack of questions, so give it room */
.modal-body{gap:16px;}

.opt-head{display:flex;align-items:flex-start;gap:14px;}
.opt-head > div{flex:1;min-width:0;}
.opt-head .mono{color:var(--fg-2);margin-top:4px;}
.opt-shot{
  width:58px;height:58px;flex:none;border-radius:var(--r-sm);
  object-fit:cover;background:var(--surface-2);
}

/* One question under the next by default. */
.opt-grid{display:flex;flex-direction:column;gap:16px;}

/* Two columns once there are several questions, so a drink with six of them
   does not become a long scroll. Columns rather than a grid: a grid makes every
   block in a row as tall as the tallest one, which leaves a dead gap under a
   two-chip question sitting beside a six-chip one. Columns just flow. */
.modal-wide .opt-grid{
  display:block;columns:2;column-gap:28px;column-rule:1px solid var(--line);
}
.modal-wide .opt-grid .opt-block{
  break-inside:avoid;border-bottom:none;padding-bottom:0;margin-bottom:20px;
}
.modal-wide .opt-grid .opt-block:last-of-type{margin-bottom:0;}
@media (max-width:760px){
  .modal-wide .opt-grid{display:flex;columns:auto;column-rule:none;}
  .modal-wide .opt-grid .opt-block{margin-bottom:0;}
  .modal-wide .opt-grid .opt-block:not(:last-of-type){
    border-bottom:1px solid var(--line);padding-bottom:16px;
  }
}

/* The header is a stack of rows now — type, who, and a number — so it carries
   its own rhythm rather than each row nudging itself with a margin. */
.ticket-head{
  padding:14px 16px;border-bottom:1px solid var(--line);flex:none;
  display:flex;flex-direction:column;gap:12px;
}
/* minmax(0,…) not 1fr: a grid column defaults to min-content, so a long
   placeholder pushed the Customer field past the edge of the column. */
.ticket-who{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px;}
.ticket-who .field{min-width:0;}
.ticket-who .field input{padding:10px 12px;font-size:.86rem;}

/* The phone row matches the two above it rather than the guest page's
   roomier sizing — a till packs more into less height. */
.ticket-head .c-phone{gap:7px;}
.ticket-head .c-phone select{max-width:116px;padding:10px 8px;font-size:.82rem;}
.ticket-head .c-phone input{padding:10px 12px;font-size:.86rem;}
.ticket-head .c-phone-hint{min-height:0;font-size:.62rem;}
.ticket-head .c-phone-hint:empty{display:none;}
.types{display:flex;gap:6px;}
.type-btn{
  flex:1;padding:9px 6px;border-radius:var(--r-sm);
  background:var(--surface-2);border:1px solid var(--line);color:var(--fg-3);
  font-family:var(--mono);font-size:.57rem;letter-spacing:.09em;text-transform:uppercase;
  transition:all var(--tap) var(--ease);
}
.type-btn.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}

/* The column scrolls as a whole now, so the basket grows with its contents
   rather than scrolling inside itself — two scrollbars in one panel is worse
   than one. It never shrinks below a couple of readable lines. */
.lines{flex:1 0 auto;min-height:150px;padding:8px 10px;}
.line{
  display:flex;gap:10px;padding:10px;border-radius:var(--r-sm);cursor:pointer;
  animation:line-in 220ms var(--ease);
}
.line:hover{background:var(--surface-2);}
@keyframes line-in{from{opacity:0;transform:translateX(10px);}}
.line-main{flex:1;min-width:0;}
.line-name{font-size:.86rem;font-weight:600;line-height:1.3;}
.line-sub{margin-top:3px;color:var(--fg-3);font-family:var(--mono);
  font-size:.56rem;letter-spacing:.06em;line-height:1.6;}
.line-note{margin-top:3px;color:var(--warn);font-size:.72rem;}
.line-right{display:flex;flex-direction:column;align-items:flex-end;gap:7px;}
.line-total{font-family:var(--mono);font-size:.84rem;}
.qty{display:flex;align-items:center;gap:2px;background:var(--surface-2);
  border-radius:100px;padding:2px;border:1px solid var(--line);}
.qty button{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;
  font-size:1rem;line-height:1;color:var(--fg-2);}
.qty button:hover{background:var(--surface-3);color:var(--fg);}
.qty b{min-width:19px;text-align:center;font-family:var(--mono);font-size:.76rem;}

/* Same idea as the header: one stack, one gap, rather than each block
   nudging the next with a margin of its own. */
.ticket-foot{
  border-top:1px solid var(--line);padding:14px 16px 0;flex:none;
  display:flex;flex-direction:column;gap:13px;
}
.disc{margin-bottom:0;}
.disc > .mono{color:var(--fg-3);display:block;margin-bottom:8px;}
.disc > .mono i{font-style:normal;color:var(--accent);}
.disc-row{display:flex;gap:6px;flex-wrap:wrap;}
.disc-btn{
  padding:7px 12px;border-radius:100px;
  background:var(--surface-2);border:1px solid var(--line);color:var(--fg-2);
  font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;
  transition:all var(--tap) var(--ease);
}
.disc-btn:hover{border-color:var(--line-2);color:var(--fg);}
.disc-btn.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}
.sum.discount span:last-child{color:var(--accent);}
/* Pinned to the bottom of the scrolling column. The background is what stops
   the lines above showing through as they pass under it. */
.ticket-close{
  position:sticky;bottom:0;z-index:2;flex:none;
  padding:12px 16px 14px;
  background:var(--surface);border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:11px;
}
.ticket-actions{display:grid;grid-template-columns:auto 1fr;gap:8px;}

@media (max-width:1100px){ .ticket{width:310px;} .cats{width:140px;} }
@media (max-width:760px){
  .pos{flex-direction:column;}
  .cats{width:100%;flex:none;display:flex;gap:6px;overflow-x:auto;
        border-right:none;border-bottom:1px solid var(--line);padding:10px;}
  .cat{width:auto;flex:none;white-space:nowrap;margin-bottom:0;}
  .grid-wrap{min-height:0;flex:1;}
  .ticket{width:100%;max-height:46vh;border-left:none;border-top:1px solid var(--line);}
}

/* ══════════════════ ORDERS BOARD ══════════════════ */
.ob{height:100%;display:flex;flex-direction:column;background:var(--bg);}

.ob-bar{
  height:60px;flex:none;display:flex;align-items:center;gap:16px;
  padding:0 18px;border-bottom:1px solid var(--line);background:var(--surface);
}
.ob-bar .spacer{flex:1;}
.ob-tally{display:flex;gap:8px;}
.ob-count{
  display:flex;align-items:baseline;gap:7px;padding:7px 14px;border-radius:100px;
  background:var(--surface-2);border:1px solid var(--line);
}
.ob-count b{font-family:var(--display);font-size:1.05rem;font-weight:600;
  font-variant-numeric:tabular-nums;}
.ob-count i{font-family:var(--mono);font-size:.55rem;font-style:normal;
  letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);}
.ob-count.hot{background:var(--accent-soft);border-color:var(--accent-line);}
.ob-count.hot b{color:var(--accent);}
.ob-live{display:flex;align-items:center;gap:8px;color:var(--fg-3);}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);
  animation:pulse 2s var(--ease) infinite;}
@keyframes pulse{50%{opacity:.25;transform:scale(.75);}}

.lanes{
  flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,1fr);
  gap:14px;padding:16px;
}
.lane{
  display:flex;flex-direction:column;min-height:0;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
}
.lane-head{
  flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px;border-bottom:1px solid var(--line);
}
.lane-head b{font-family:var(--display);font-size:1rem;font-weight:600;display:block;}
.lane-head .mono{color:var(--fg-3);font-size:.55rem;}
.lane-n{
  min-width:26px;height:26px;padding:0 8px;border-radius:13px;flex:none;
  background:var(--surface-3);color:var(--fg-2);
  display:grid;place-items:center;font-family:var(--mono);font-size:.7rem;font-weight:500;
}
.lane-n.hot{background:var(--accent);color:var(--accent-ink);
  animation:pulse 1.8s var(--ease) infinite;}
.lane-body{flex:1;overflow-y:auto;padding:11px;display:flex;flex-direction:column;gap:10px;}
.lane-empty{padding:34px 0;text-align:center;color:var(--fg-3);}

.ocard{
  position:relative;text-align:left;width:100%;
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r);padding:14px;cursor:pointer;
  animation:card-in 380ms var(--ease);
  transition:border-color var(--tap) var(--ease),transform var(--tap) var(--ease),
             box-shadow var(--tap) var(--ease);
}
@keyframes card-in{from{opacity:0;transform:translateY(-12px) scale(.97);}}
.ocard:hover{border-color:var(--line-2);box-shadow:var(--shadow-sm);}
.ocard:active{transform:scale(.985);}
.ocard.late{border-color:var(--danger);}
.ocard.late::before{
  content:'';position:absolute;inset:-1px;border-radius:var(--r);pointer-events:none;
  box-shadow:0 0 0 1px var(--danger);animation:nag 1.7s var(--ease) infinite;
}
@keyframes nag{50%{opacity:.25;}}

.ocard-top{display:flex;justify-content:space-between;align-items:baseline;}
.ocard-top b{font-family:var(--mono);font-size:1rem;font-weight:500;letter-spacing:.03em;}
.ocard-age{font-family:var(--mono);font-size:.68rem;color:var(--fg-3);}
.ocard-age.hot{color:var(--danger);font-weight:500;}

/* destination block — the loudest thing on the card */
.ocard-dest{
  margin-top:11px;padding:10px 13px;border-radius:var(--r-sm);
  border:1px solid var(--accent-line);background:var(--accent-soft);
}
.ocard-dest .mono{display:block;color:var(--accent);font-size:.53rem;opacity:.9;}
.ocard-dest b{
  display:block;margin-top:2px;font-family:var(--display);
  font-size:1.5rem;font-weight:700;line-height:1.05;letter-spacing:-.03em;
  color:var(--fg);
  /* a guest might type "Patio 2" or a long word — never let it break the card */
  overflow-wrap:anywhere;
}
.ocard-dest i{
  display:block;margin-top:4px;font-style:normal;
  font-size:.82rem;color:var(--fg-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* takeaway is a different job, so it reads differently */
.ocard-dest.is-away{border-color:var(--line-2);background:var(--surface-3);}
.ocard-dest.is-away .mono{color:var(--fg-2);font-size:.62rem;}

.ocard-items{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:5px;}
.ocard-items li{display:flex;gap:9px;align-items:baseline;font-size:.83rem;line-height:1.35;}
.oq{
  flex:none;min-width:20px;height:20px;padding:0 5px;border-radius:5px;
  background:var(--surface-3);color:var(--fg);
  display:grid;place-items:center;font-family:var(--mono);font-size:.66rem;
}
.on{color:var(--fg-2);}
.onote{color:var(--warn);font-size:.74rem;padding-left:29px;}
.omore{color:var(--fg-3);font-size:.76rem;padding-left:29px;}

.ocard-foot{
  margin-top:13px;padding-top:11px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:10px;
}
.ocard-sum b{font-family:var(--mono);font-size:.95rem;display:block;}
.ocard-sum i{font-style:normal;font-family:var(--mono);font-size:.53rem;
  letter-spacing:.1em;color:var(--fg-3);text-transform:uppercase;}
.ocard-foot .btn{margin-left:auto;}

.ocard-x{
  position:absolute;top:10px;right:10px;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;font-size:.72rem;
  color:var(--fg-3);background:var(--surface-3);opacity:0;
  transition:opacity var(--tap) var(--ease),color var(--tap) var(--ease),
             background var(--tap) var(--ease);
}
.ocard:hover .ocard-x{opacity:1;}
.ocard-x:hover{color:#fff;background:var(--danger);}

/* order detail */
.od-note{
  padding:11px 14px;border-radius:var(--r-sm);
  background:var(--warn-soft);color:var(--warn);font-size:.85rem;
}
.od-items{display:flex;flex-direction:column;border:1px solid var(--line);
  border-radius:var(--r-sm);overflow:hidden;}
.od-item{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;
  border-bottom:1px solid var(--line);}
.od-item:last-child{border-bottom:none;}
.od-q{
  flex:none;min-width:26px;height:26px;padding:0 7px;border-radius:6px;
  background:var(--surface-3);display:grid;place-items:center;
  font-family:var(--mono);font-size:.78rem;
}
.od-main{flex:1;min-width:0;}
.od-main b{font-size:.92rem;font-weight:600;}
.od-main .mono{color:var(--fg-3);margin-top:3px;}
.od-inote{color:var(--warn);font-size:.76rem;margin-top:3px;}
.od-total{font-family:var(--mono);font-size:.88rem;}

@media (max-width:1100px){
  .lanes{grid-template-columns:repeat(2,1fr);overflow-y:auto;}
  .ob-tally{overflow-x:auto;}
}

/* On a phone the lanes stack and each one scrolls with the page, so a busy
   counter can still work the board one-handed. */
@media (max-width:760px){
  .ob-bar{height:auto;min-height:52px;padding:10px 14px;gap:10px;flex-wrap:wrap;}
  .ob-tally{width:100%;gap:6px;}
  .ob-count{flex:1;justify-content:center;padding:7px 8px;gap:5px;}
  .ob-count i{font-size:.48rem;}
  .ob-live{margin-left:auto;}

  /* Grid rows gave each lane a fixed height, so cards spilled out and
     overlapped the lane below. Stack them in normal flow instead and let
     the whole board scroll as one column. */
  .lanes{
    display:flex;flex-direction:column;gap:12px;padding:12px;
    overflow-y:auto;
  }
  .lane{display:block;flex:none;min-height:0;}
  .lane-body{
    display:flex;flex-direction:column;gap:10px;padding:10px;
    max-height:none;overflow:visible;flex:none;
  }
  /* an empty lane on a phone is just noise between the ones that matter */
  .lane:has(.lane-empty){opacity:.55;}
  .lane:has(.lane-empty) .lane-body{padding:6px 10px 10px;}
  .lane-empty{padding:8px 0;}

  /* the decline ✕ is always visible here, so keep the age clear of it */
  .ocard-top{padding-right:30px;}
  .ocard-x{opacity:1;top:12px;right:12px;}

  .ocard-foot{flex-wrap:wrap;gap:12px;}
  .ocard-foot .btn{width:100%;margin-left:0;padding:13px;}

  .od-items{max-height:none;}
}

/* ══════════════════ KITCHEN ══════════════════ */
.kds{height:100%;display:flex;flex-direction:column;background:var(--bg);}
.kds-bar{
  height:60px;flex:none;display:flex;align-items:center;gap:10px;
  padding:0 18px;border-bottom:1px solid var(--line);background:var(--surface);
}
.kds-bar .live{margin-left:auto;display:flex;align-items:center;gap:8px;color:var(--fg-3);}

.kds-board{
  flex:1;min-height:0;overflow-x:auto;overflow-y:hidden;padding:16px;
  display:flex;gap:14px;align-items:flex-start;
}
.kds-ticket{
  width:300px;flex:none;max-height:100%;
  background:var(--surface);border:1px solid var(--line);
  border-top:3px solid var(--fg-3);
  border-radius:var(--r);display:flex;flex-direction:column;
  animation:card-in 400ms var(--ease);
}
.kds-ticket.age-1{border-top-color:var(--accent);}
.kds-ticket.age-2{border-top-color:var(--warn);}
.kds-ticket.age-3{border-top-color:var(--danger);animation:nag 1.6s var(--ease) infinite;}

.kt-head{padding:13px 15px;border-bottom:1px solid var(--line);}
.kt-top{display:flex;justify-content:space-between;align-items:baseline;}
.kt-top b{font-family:var(--mono);font-size:.88rem;letter-spacing:.04em;}
.kt-age{font-family:var(--mono);font-size:1.1rem;font-variant-numeric:tabular-nums;}
.kt-where{margin-top:6px;color:var(--fg-2);}
.kt-items{flex:1;overflow-y:auto;padding:10px 15px;}
.kt-item{padding:10px 0;border-bottom:1px solid var(--line);display:flex;gap:12px;
  cursor:pointer;}
.kt-item:last-child{border-bottom:none;}
.kt-item.done{opacity:.35;}
.kt-item.done .kt-name{text-decoration:line-through;}
.kt-qty{
  flex:none;min-width:28px;height:28px;padding:0 7px;border-radius:var(--r-sm);
  background:var(--surface-3);display:grid;place-items:center;
  font-family:var(--mono);font-size:.85rem;
}
.kt-name{font-size:.95rem;font-weight:600;line-height:1.3;}
.kt-mods{margin-top:4px;color:var(--accent);font-family:var(--mono);
  font-size:.6rem;letter-spacing:.05em;line-height:1.6;}
.kt-note{margin-top:4px;color:var(--warn);font-size:.75rem;}
.kt-foot{padding:12px 15px;border-top:1px solid var(--line);display:flex;gap:8px;}
.kt-foot .btn{flex:1;}

/* ══════════════════ FLOOR ══════════════════ */
.zone{margin-bottom:30px;}
.zone-head{display:flex;align-items:center;gap:14px;margin-bottom:14px;}
.zone-head h4{font-size:1rem;}
.zone-head .rule{flex:1;height:1px;background:var(--line);}
.zone-head .mono{color:var(--fg-3);}

.tables{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));}
.table-card{
  position:relative;text-align:left;padding:16px;min-height:112px;
  border-radius:var(--r);border:1px solid var(--line);background:var(--surface);
  display:flex;flex-direction:column;gap:3px;
  transition:border-color var(--tap) var(--ease),transform var(--tap) var(--ease);
  animation:flip-in 500ms var(--ease) backwards;transform-origin:top center;
}
@keyframes flip-in{from{opacity:0;transform:perspective(700px) rotateX(-48deg);}}
.table-card:hover{border-color:var(--line-2);}
.table-card:active{transform:scale(.975);}
.table-card b{font-family:var(--display);font-size:1.3rem;font-weight:600;letter-spacing:-.02em;}
.table-card .t-seats{color:var(--fg-3);}
.table-card .t-state{margin-top:auto;color:var(--fg-2);}
.t-status{position:absolute;top:15px;right:15px;width:9px;height:9px;border-radius:50%;
  background:var(--fg-3);}
.is-occupied{border-color:var(--accent-line);}
.is-occupied .t-status{background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);}
.is-occupied .t-state{color:var(--accent);}
.is-reserved .t-status{background:var(--info);}
.is-dirty .t-status{background:var(--warn);}
.is-dirty .t-state{color:var(--warn);}

/* ══════════════════ MENU MANAGER ══════════════════ */
.mgr{display:flex;height:100%;}
.mgr-rail{
  width:180px;flex:none;background:var(--surface);border-right:1px solid var(--line);
  overflow-y:auto;padding:12px 10px;
}
.mgr-cat{
  width:100%;text-align:left;padding:11px 13px;border-radius:var(--r-sm);
  color:var(--fg-3);margin-bottom:3px;
  display:flex;flex-direction:column;gap:3px;
  transition:background var(--tap) var(--ease),color var(--tap) var(--ease);
}
.mgr-cat b{font-size:.82rem;font-weight:500;}
.mgr-cat i{font-family:var(--mono);font-size:.53rem;letter-spacing:.08em;
  font-style:normal;opacity:.75;}
.mgr-cat:hover{color:var(--fg-2);background:var(--surface-2);}
.mgr-cat.on{background:var(--surface-3);color:var(--fg);}
.mgr-cat.on i{color:var(--accent);opacity:1;}

/* min-height:0 is load-bearing — without it this column refuses to shrink
   below its content, the grid never gets a scroll box, and the whole shell
   grows past the viewport taking the bottom nav with it. */
.mgr-main{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;}
.mgr-head{
  height:56px;flex:none;display:flex;align-items:center;gap:12px;
  padding:0 18px;border-bottom:1px solid var(--line);
}
.search{
  flex:1;max-width:340px;display:flex;align-items:center;gap:10px;
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:100px;padding:9px 16px;
}
.search:focus-within{border-color:var(--accent);}
.search svg{width:15px;height:15px;stroke:var(--fg-3);fill:none;stroke-width:1.9;}
.search input{flex:1;font-size:.88rem;}
.search input::placeholder{color:var(--fg-3);}

.mgr-grid{
  flex:1;min-height:0;overflow-y:auto;padding:16px;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  /* Once the container has a definite height (flex:1 + min-height:0) auto rows
     get divided up to fit, squashing every tile. max-content keeps each row at
     its natural height and lets the container scroll instead. */
  grid-auto-rows:max-content;
  align-content:start;
}
.mtile{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;cursor:pointer;display:flex;flex-direction:column;
  animation:card-in 340ms var(--ease) backwards;
  transition:border-color var(--tap) var(--ease),transform var(--tap) var(--ease),
             box-shadow var(--tap) var(--ease);
}
.mtile:hover{border-color:var(--line-2);transform:translateY(-2px);box-shadow:var(--shadow-sm);}
.mtile:active{transform:scale(.985);}
.mtile-shot{height:118px;background:var(--surface-2);overflow:hidden;flex:none;}
.mtile-shot img{width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .4s var(--ease);}
.mtile-shot img.ready{opacity:1;}
.mtile-body{padding:13px 14px 14px;display:flex;flex-direction:column;flex:1;}
.mtile-body b{font-size:.92rem;font-weight:600;line-height:1.28;}
.mtile-body p{
  margin-top:5px;color:var(--fg-3);font-size:.76rem;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.mtile-foot{margin-top:auto;padding-top:11px;display:flex;align-items:center;gap:8px;
  flex-wrap:wrap;}
.mtile-price{font-family:var(--mono);font-size:.92rem;}
.mtile-price small{font-size:.58rem;color:var(--fg-3);letter-spacing:.08em;}
.mtile-foot .mono{color:var(--fg-3);}

.edit-shot{height:170px;border-radius:var(--r-sm);overflow:hidden;background:var(--surface-2);}
.edit-shot img{width:100%;height:100%;object-fit:cover;transition:opacity .3s var(--ease);}

@media (max-width:900px){
  .mgr{flex-direction:column;min-height:0;}
  /* flex:none, or the category strip stretches and eats the grid's height */
  .mgr-rail{
    width:100%;flex:none;display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;
    border-right:none;border-bottom:1px solid var(--line);
    padding:10px;scrollbar-width:none;
  }
  .mgr-rail::-webkit-scrollbar{display:none;}
  .mgr-cat{width:auto;flex:none;white-space:nowrap;margin-bottom:0;}
  .mgr-main{min-height:0;}
}

/* ══════════════════ PAGES / PANELS ══════════════════ */
.page{height:100%;overflow-y:auto;padding:24px;}
.page-head{display:flex;align-items:flex-end;gap:16px;margin-bottom:22px;flex-wrap:wrap;}
.page-head h3{font-size:1.6rem;}
.page-head .mono{color:var(--fg-3);}
.page-head .spacer{flex:1;}

.panel{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:20px;margin-bottom:16px;
}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-bottom:16px;}
/* a panel whose settings do not apply yet */
.panel.dimmed{opacity:.5;}
.panel.dimmed:focus-within{opacity:1;}
.panel > h4{font-size:1rem;margin-bottom:14px;}
.panel-head > h4{margin-bottom:0;}

.cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  margin-bottom:20px;}
.stat{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:18px;
  animation:flip-in 480ms var(--ease) backwards;transform-origin:top center;
}
.stat .mono{color:var(--fg-3);}
.stat b{display:block;margin-top:11px;font-family:var(--display);font-size:2rem;
  font-weight:600;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums;}
.stat i{display:block;margin-top:8px;font-style:normal;color:var(--fg-3);font-size:.77rem;}
.stat.accent b{color:var(--accent);}

table.data{width:100%;border-collapse:collapse;font-size:.87rem;}
table.data th{
  text-align:left;padding:10px 12px;border-bottom:1px solid var(--line-2);
  font-family:var(--mono);font-size:.56rem;font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;color:var(--fg-3);white-space:nowrap;
}
table.data td{padding:11px 12px;border-bottom:1px solid var(--line);}
table.data tr:last-child td{border-bottom:none;}
table.data .num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;}
table.data tbody tr{transition:background var(--tap) var(--ease);}
table.data tbody tr:hover{background:var(--surface-2);}
.off td{opacity:.42;}

/* ══════════════════ REPORTS ══════════════════ */
.rangebar{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:12px 14px;margin-bottom:14px;
}
.range-presets{display:flex;gap:7px;flex-wrap:wrap;}
.range-presets button{
  padding:8px 14px;border-radius:100px;white-space:nowrap;
  border:1px solid var(--line);background:var(--surface-2);color:var(--fg-2);
  font-family:var(--mono);font-size:.57rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
  transition:all var(--tap) var(--ease);
}
.range-presets button:hover{border-color:var(--line-2);color:var(--fg);}
.range-presets button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}
.range-dates{display:flex;align-items:center;gap:9px;margin-left:auto;flex-wrap:wrap;}
.range-dates label{color:var(--fg-3);}
.range-dates input{
  background:var(--surface-2);border:1px solid var(--line);color:var(--fg);
  border-radius:var(--r-sm);padding:9px 12px;font-size:.85rem;
}
.range-dates input:focus{border-color:var(--accent);}

/* today so far — pinned above whatever range is being read */
.livestrip{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  background:var(--accent-soft);border:1px solid var(--accent-line);
  border-radius:var(--r);padding:14px 18px;margin-bottom:18px;
}
.live-title{display:flex;align-items:center;gap:9px;color:var(--accent);}
.live-figs{display:flex;gap:26px;flex-wrap:wrap;margin-left:auto;}
.live-figs span{display:flex;align-items:baseline;gap:7px;}
.live-figs b{font-family:var(--display);font-size:1.3rem;font-weight:600;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;}
.live-figs i{font-style:normal;font-family:var(--mono);font-size:.55rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2);}
.live-figs .hot b{color:var(--accent);}

/* deltas on the stat cards */
.stat i .d-up,.stat i .d-down,.stat i .d-flat,.stat i .d-new{font-style:normal;}
.stat-delta{margin-top:3px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;}
.stat-delta em{font-style:normal;color:var(--fg-3);font-size:.72rem;}
.d-up{color:var(--accent);font-weight:600;}
.d-down{color:var(--danger);font-weight:600;}
.d-flat,.d-new{color:var(--fg-3);}

/* inline proportion bars inside tables */
.bar{
  display:inline-block;width:100%;max-width:180px;height:7px;border-radius:4px;
  background:var(--surface-3);overflow:hidden;vertical-align:middle;
}
.bar.thin{height:5px;max-width:90px;}
.bar i{display:block;height:100%;background:var(--accent);border-radius:4px;
  transition:width .5s var(--ease);}

table.data tfoot td{
  padding:12px;border-top:1px solid var(--line-2);
  background:var(--surface-2);
}

.two-up{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:1000px){ .two-up{grid-template-columns:1fr;} }

.hours{display:flex;align-items:flex-end;gap:5px;height:170px;padding-top:8px;}
.hour{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-end;gap:6px;min-width:0;height:100%;}
.hour-val{
  font-size:.5rem;color:var(--fg-3);opacity:0;transition:opacity var(--tap) var(--ease);
  white-space:nowrap;
}
.hour:hover .hour-val,.hour.peak .hour-val{opacity:1;}
.hour.peak .hour-val{color:var(--accent);}
.hour-bar{
  width:100%;background:var(--surface-3);border-radius:4px 4px 0 0;min-height:3px;
  transition:height .55s var(--ease),background var(--tap) var(--ease);
}
.hour:hover .hour-bar{background:var(--line-2);}
.hour.peak .hour-bar{background:var(--accent);}
.hour i{font-family:var(--mono);font-size:.52rem;color:var(--fg-3);font-style:normal;}

/* ══════════════════ MOBILE ══════════════════ */
@media (max-width:760px){
  .page{padding:14px;}
  .page-head{gap:12px;margin-bottom:16px;}
  .page-head h3{font-size:1.3rem;}

  /* reports */
  .rangebar{padding:12px;gap:12px;}
  .range-presets{width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;}
  .range-presets::-webkit-scrollbar{display:none;}
  .range-dates{margin-left:0;width:100%;}
  .range-dates input{flex:1;min-width:0;}

  .livestrip{padding:12px 14px;gap:10px;}
  .live-figs{margin-left:0;width:100%;gap:16px;}
  .live-figs b{font-size:1.1rem;}

  .cards{grid-template-columns:repeat(2,1fr);gap:10px;}
  .stat{padding:14px;}
  .stat b{font-size:1.5rem;}
  .stat i{font-size:.7rem;}

  .two-up{grid-template-columns:1fr;}
  .panel{padding:14px;}
  .hours{height:130px;}

  /* Tables scroll inside their panel rather than pushing the page sideways. */
  .panel table.data{display:block;overflow-x:auto;white-space:nowrap;}
  .bar{max-width:80px;}

  /* The staff table's Edit button is the point of the row, so drop the two
     descriptive columns rather than push it off the side. */
  .staff-table{display:table !important;white-space:normal;}
  .staff-table th:nth-child(3),.staff-table td:nth-child(3),
  .staff-table th:nth-child(4),.staff-table td:nth-child(4){display:none;}
  .staff-table td,.staff-table th{padding:11px 8px;}

  /* menu manager */
  .mgr-grid{grid-template-columns:repeat(2,1fr);gap:10px;padding:12px;}
  .mtile-shot{height:92px;}
  .mtile-body{padding:11px 12px 12px;}
  .mtile-body b{font-size:.86rem;}
  .mtile-body p{font-size:.7rem;-webkit-line-clamp:1;}
  /* price and calories on one line, so every tile is the same height and
     the grid rows do not jump */
  .mtile-foot{flex-wrap:nowrap;gap:6px;padding-top:9px;}
  .mtile-price{font-size:.84rem;}
  .mtile-price small{font-size:.5rem;}
  .mtile-foot .mono{font-size:.5rem;white-space:nowrap;}
  .mtile-foot .chip{padding:3px 7px;font-size:.46rem;}
  .mgr-head{padding:0 12px;}
  .search{max-width:none;}

  /* kitchen: one ticket at a time, full width */
  .kds-board{
    flex-direction:column;overflow-x:hidden;overflow-y:auto;padding:12px;gap:12px;
  }
  .kds-ticket{width:100%;max-height:none;}
  .kds-bar{padding:0 14px;gap:7px;}
  .kds-bar .btn{padding:8px 11px;}
}