/* =====================================================================
   PlayAreaPOS - interface styles
   Built for a 1366x768 counter screen: big targets, high contrast,
   nothing that needs a second look.
   ===================================================================== */

:root {
  --bg:          #eef2f7;
  --surface:     #ffffff;
  --surface-2:   #f8fafc;
  --line:        #dbe3ec;
  --line-strong: #c3cedd;
  --ink:         #0f172a;
  --ink-2:       #475569;
  --ink-3:       #7c8ba1;

  --brand:       #2563eb;
  --brand-dark:  #1d4ed8;
  --brand-soft:  #dbeafe;
  --ok:          #16a34a;
  --ok-soft:     #dcfce7;
  --warn:        #d97706;
  --warn-soft:   #fef3c7;
  --danger:      #dc2626;
  --danger-soft: #fee2e2;
  --violet:      #7c3aed;

  --radius:   10px;
  --radius-s: 7px;
  --shadow:   0 1px 2px rgba(15,23,42,.06), 0 4px 12px rgba(15,23,42,.06);
  --shadow-lg:0 12px 40px rgba(15,23,42,.22);

  --topbar: 58px;
  --keybar: 42px;
  --side:   348px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 16px;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

body.app-body { overflow: hidden; }

h1, h2, h3, h4 { margin: 0 0 .5rem; line-height: 1.25; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.02rem; }

.muted  { color: var(--ink-2); }
.dim    { color: var(--ink-3); }
.small  { font-size: .82rem; }
.tiny   { font-size: .74rem; }
.right  { text-align: right; }
.center { text-align: center; }
.bold   { font-weight: 700; }
.mono   { font-variant-numeric: tabular-nums; font-family: "Consolas", ui-monospace, monospace; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }
.grow   { flex: 1 1 auto; }
.stack  { display: flex; flex-direction: column; gap: .8rem; }
.row    { display: flex; align-items: center; gap: .6rem; }
.wrap   { flex-wrap: wrap; }

/* ------------------------------------------------------------------ keys */
kbd {
  display: inline-block;
  min-width: 1.5em;
  padding: 1px 6px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--surface-2);
  font: 600 .72rem/1.5 "Segoe UI", sans-serif;
  color: var(--ink-2);
  text-align: center;
}

/* ---------------------------------------------------------------- inputs */
label { display: block; font-size: .78rem; font-weight: 600; color: var(--ink-2); }

input, select, textarea {
  width: 100%;
  margin-top: .25rem;
  padding: .58rem .7rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-s);
  background: var(--surface);
  font: inherit;
  color: var(--ink);
}
input:focus, select:focus, textarea:focus, .tile:focus, .btn:focus {
  outline: 3px solid rgba(37,99,235,.35);
  outline-offset: 1px;
  border-color: var(--brand);
}
input.big { font-size: 1.15rem; padding: .7rem .8rem; font-weight: 600; }
textarea { resize: vertical; min-height: 62px; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius-s); padding: .8rem; }
legend { font-size: .8rem; font-weight: 700; color: var(--ink-2); padding: 0 .3rem; }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .6rem 1rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-weight: 600;
  font-size: .98rem;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s, transform .06s;
}
.btn:hover  { background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-ok      { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn-danger  { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-ghost   { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: rgba(15,23,42,.06); }
.btn-lg   { padding: .9rem 1.5rem; font-size: 1.15rem; }
.btn-sm   { padding: .4rem .68rem; font-size: .86rem; }
.btn-block{ width: 100%; }

/* ------------------------------------------------------------- app frame */
.app {
  display: grid;
  grid-template-rows: var(--topbar) 1fr var(--keybar);
  height: 100vh;
}

.topbar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 0 .9rem;
  background: #0f172a;
  color: #e2e8f0;
}
.brand { font-weight: 800; letter-spacing: -.02em; font-size: 1.2rem; color: #fff; }
.brand span { color: #60a5fa; }

.navbtn {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem .9rem;
  border: 0;
  border-radius: var(--radius-s);
  background: transparent;
  color: #cbd5e1;
  font-family: inherit;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1;
  cursor: pointer;
}
.navbtn:hover  { background: rgba(255,255,255,.09); color: #fff; }
.navbtn.active { background: var(--brand); color: #fff; }
.navbtn kbd {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.2);
  color: #e2e8f0;
}
.navbtn.active kbd { background: rgba(0,0,0,.22); border-color: rgba(0,0,0,.25); color:#fff; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  font-size: .84rem;
  font-weight: 600;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.dot.off { background: var(--warn); }
.pill.offline { background: var(--warn); color: #1f1300; }

/* body: main + fixed side panel */
.workspace {
  display: grid;
  grid-template-columns: 1fr var(--side);
  overflow: hidden;
}
.workspace.no-side { grid-template-columns: 1fr; }
.main { overflow: auto; padding: .9rem; }
.side {
  border-left: 1px solid var(--line);
  background: var(--surface);
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.keybar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 .9rem;
  background: #1e293b;
  color: #94a3b8;
  font-size: .84rem;
  overflow-x: auto;
}
.keybar kbd { background: #334155; border-color: #475569; color: #e2e8f0; }
.keybar b { color: #e2e8f0; font-weight: 600; }

/* ----------------------------------------------------------------- cards */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: .9rem;
}
.card + .card { margin-top: .8rem; }
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin: -.15rem 0 .7rem;
}
.card-head h3 { margin: 0; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
@media (max-width: 1100px) {
  .grid4 { grid-template-columns: repeat(2, 1fr); }
  .grid3 { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------- banners */
.banner {
  padding: .65rem .8rem;
  border-radius: var(--radius-s);
  border-left: 4px solid var(--brand);
  background: var(--brand-soft);
  font-size: .9rem;
  margin-bottom: .7rem;
}
.banner-ok   { background: var(--ok-soft);     border-color: var(--ok); }
.banner-warn { background: var(--warn-soft);   border-color: var(--warn); }
.banner-err  { background: var(--danger-soft); border-color: var(--danger); }

/* ---------------------------------------------------------------- tables */
table.data { width: 100%; border-collapse: collapse; font-size: .94rem; }
table.data th {
  text-align: left;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-3);
  padding: .4rem .5rem;
  border-bottom: 2px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--surface);
}
table.data td { padding: .45rem .5rem; border-bottom: 1px solid var(--line); }
table.data tr:hover td { background: var(--surface-2); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------- chips */
.chip {
  display: inline-block;
  padding: .18rem .55rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid var(--line);
}
.chip-ok     { background: var(--ok-soft);     color: #14532d; border-color: #a7f3c8; }
.chip-warn   { background: var(--warn-soft);   color: #78350f; border-color: #fcd77f; }
.chip-danger { background: var(--danger-soft); color: #7f1d1d; border-color: #fca5a5; }
.chip-brand  { background: var(--brand-soft);  color: #1e3a8a; border-color: #bfdbfe; }

/* ----------------------------------------------------- selectable tiles */
.tilegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: .55rem; }
.tilegrid.snacks { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .55rem .6rem;
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-s);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color .12s, background .12s;
}
.tile:hover { border-color: var(--brand); background: var(--brand-soft); }
.tile .t-name { font-weight: 700; font-size: .96rem; line-height: 1.2; }
.tile .t-sub  { font-size: .8rem; color: var(--ink-3); }
.tile .t-price{ font-weight: 800; font-size: 1.12rem; font-variant-numeric: tabular-nums; }
.tile .t-key {
  position: absolute;
  top: 4px;
  right: 5px;
  font-size: .64rem;
  font-weight: 800;
  color: var(--ink-3);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 4px;
}
.tile.selected {
  border-color: var(--brand);
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.tile.selected .t-key { background: var(--brand); border-color: var(--brand); color: #fff; }
.tile.recommended { border-color: var(--ok); background: var(--ok-soft); }
.tile.cheapest::after {
  content: "BEST";
  position: absolute;
  bottom: 4px;
  right: 5px;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--ok);
}

/* ---------------------------------------------------------- floor cards */
.floorgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: .75rem; }
.fcard {
  border: 1px solid var(--line);
  border-left: 5px solid var(--ok);
  border-radius: var(--radius-s);
  background: var(--surface);
  padding: .6rem .7rem;
  cursor: pointer;
  box-shadow: var(--shadow);
  text-align: left;
  font: inherit;
  width: 100%;
}
.fcard:hover { border-color: var(--brand); background: var(--brand-soft); }
.fcard.soon  { border-left-color: var(--warn); }
.fcard.over  { border-left-color: var(--danger); background: #fff5f5; }
.fcard .f-name { font-weight: 700; font-size: 1.1rem; }
.fcard .f-time {
  font-size: 1.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.fcard.over .f-time { color: var(--danger); }
.fcard.soon .f-time { color: var(--warn); }
.fcard .f-meta { font-size: .84rem; color: var(--ink-3); }

/* ---------------------------------------------------- snack queue panel */
.side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .6rem .8rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  position: sticky;
  top: 0;
  z-index: 2;
}
.side-head h3 { margin: 0; font-size: 1.05rem; }
.side-list { padding: .6rem; display: flex; flex-direction: column; gap: .5rem; }

.sq {
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-s);
  padding: .5rem .6rem;
  background: var(--surface);
}
.sq.due  { border-left-color: var(--warn); background: var(--warn-soft); }
.sq.late { border-left-color: var(--danger); background: var(--danger-soft); animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 4px rgba(220,38,38,.16); } }
.sq .sq-time { font-weight: 800; font-size: 1.18rem; font-variant-numeric: tabular-nums; }
.sq .sq-item { font-weight: 700; font-size: 1rem; }
.sq .sq-who  { font-size: .84rem; color: var(--ink-2); }
.sq .sq-cd   { font-size: .82rem; font-weight: 700; }

.empty {
  padding: 1.6rem .8rem;
  text-align: center;
  color: var(--ink-3);
  font-size: .85rem;
}

/* ------------------------------------------------------------ bill panel */
.bill { display: flex; flex-direction: column; gap: .35rem; }
.bill-row { display: flex; justify-content: space-between; gap: 1rem; font-size: 1rem; }
.bill-row .lbl { color: var(--ink-2); }
.bill-row .val { font-variant-numeric: tabular-nums; font-weight: 600; }
.bill-sep { height: 1px; background: var(--line); margin: .35rem 0; }
.bill-total { font-size: 1.65rem; font-weight: 800; }
.bill-total .val { font-size: 1.9rem; letter-spacing: -.02em; }

.bigclock {
  font-size: 2.9rem;
  font-weight: 800;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* --------------------------------------------------------------- results */
.result {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: .6rem;
  align-items: center;
  width: 100%;
  padding: .5rem .6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.result:hover, .result.cursor { border-color: var(--brand); background: var(--brand-soft); }
.result .r-ticket { font-weight: 800; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ KPIs */
.kpi {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .75rem .85rem;
  box-shadow: var(--shadow);
}
.kpi .k-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 700; }
.kpi .k-value { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; margin-top: .15rem; font-variant-numeric: tabular-nums; }
.kpi .k-sub   { font-size: .76rem; color: var(--ink-2); }
.kpi.accent   { background: linear-gradient(135deg, #1d4ed8, #3b82f6); border-color: #1d4ed8; color: #fff; }
.kpi.accent .k-label, .kpi.accent .k-sub { color: rgba(255,255,255,.85); }

.bar-track { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.bar-fill  { height: 100%; background: var(--brand); border-radius: 999px; }

/* ---------------------------------------------------------------- modals */
.modal-back {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 60;
}
.modal {
  width: min(560px, 100%);
  max-height: 88vh;
  overflow: auto;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 1.1rem;
}
.modal.wide { width: min(880px, 100%); }
.modal h3 { margin-bottom: .8rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }

/* --------------------------------------------------------------- toasts */
.toasts {
  position: fixed;
  right: 1rem;
  bottom: calc(var(--keybar) + 1rem);
  display: flex;
  flex-direction: column;
  gap: .5rem;
  z-index: 90;
  pointer-events: none;
}
.toast {
  min-width: 230px;
  max-width: 400px;
  padding: .65rem .85rem;
  border-radius: var(--radius-s);
  background: #0f172a;
  color: #fff;
  font-size: .88rem;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  animation: toastin .18s ease-out;
}
@keyframes toastin { from { transform: translateY(8px); opacity: 0; } }
.toast.ok    { background: #15803d; }
.toast.err   { background: #b91c1c; }
.toast.warn  { background: #b45309; }

/* ----------------------------------------------------------- login page */
.auth-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #0f172a, #1e3a8a 60%, #2563eb);
  padding: 1rem;
}
.auth-card {
  width: min(400px, 100%);
  background: var(--surface);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 1.6rem;
}
.install-card { width: min(520px, 100%); max-height: 94vh; overflow: auto; }
.auth-logo { font-size: 2rem; font-weight: 800; text-align: center; letter-spacing: -.03em; margin-bottom: .1rem; }
.auth-logo span { color: var(--brand); }
.auth-sub { text-align: center; color: var(--ink-2); margin: 0 0 1.2rem; font-size: .9rem; }

.pinpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .7rem; }
.pinpad button {
  padding: .85rem 0;
  font-size: 1.3rem;
  font-weight: 700;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-s);
  background: var(--surface);
  cursor: pointer;
}
.pinpad button:hover { background: var(--brand-soft); border-color: var(--brand); }

/* The Enter and Clear keys. These need their own selectors: ".pinpad button"
   is more specific than a bare ".btn-primary", so a shared button class only
   won the text colour and left white on white. */
.pinpad .pin-ok {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-size: 1.05rem;
  letter-spacing: .02em;
}
.pinpad .pin-ok:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
}
.pinpad .pin-clear {
  color: var(--ink-2);
  font-size: 1.05rem;
}
.pinpad .pin-clear:hover { background: var(--danger-soft); border-color: #fca5a5; color: #991b1b; }
.pin-display {
  text-align: center;
  font-size: 2rem;
  letter-spacing: .5rem;
  font-weight: 800;
  min-height: 2.6rem;
  padding: .3rem 0;
  color: var(--brand);
}
.tabs { display: flex; gap: .3rem; margin-bottom: 1rem; background: var(--surface-2); padding: .25rem; border-radius: var(--radius-s); }
.tabs button {
  flex: 1;
  padding: .5rem;
  border: 0;
  border-radius: 5px;
  background: transparent;
  font-family: inherit;
  font-weight: 600;
  font-size: .88rem;
  color: var(--ink-2);
  cursor: pointer;
}
.tabs button.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

/* --------------------------------------------------------------- charts */
.chartbox { position: relative; height: 190px; }
.chartbox canvas { width: 100%; height: 100%; display: block; }
.legend { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .78rem; color: var(--ink-2); margin-top: .4rem; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .3rem; }

/* -------------------------------------------------------- settings pages */
.setgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; }
.switch { display: flex; align-items: center; gap: .5rem; padding: .45rem 0; }
.switch input { width: 18px; height: 18px; margin: 0; }
.switch span { font-size: .88rem; font-weight: 600; color: var(--ink); }

.subnav { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .9rem; }
.subnav button {
  padding: .45rem .8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-family: inherit;
  font-weight: 600;
  font-size: .85rem;
  color: var(--ink-2);
  cursor: pointer;
}
.subnav button.active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Never let the on-screen UI reach the thermal printer. */
@media print {
  body.app-body > *:not(#print-area) { display: none !important; }
}

/* ===================================================================
   Check-in screen
   Entry and the running total on the left, catalogue on the right.
   The left rail sticks so the child's details and the amount due stay
   on screen while the cashier scrolls the snack list.
   =================================================================== */
.checkin-grid {
  display: grid;
  grid-template-columns: 430px minmax(0, 1fr);
  gap: .85rem;
  align-items: start;
}
/* Both columns are capped to the space above the shortcut bar. In each one
   the browsing list takes whatever room is spare and scrolls inside itself,
   so the child's details, the running order and "Check in & print" stay put. */
.checkin-left,
.checkin-right {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  min-width: 0;
  max-height: calc(100vh - var(--topbar) - var(--keybar) - 0.9rem);
}

/* Left column: child details, then the packages. */
.checkin-left .form-lg { flex: 0 0 auto; }
.checkin-left .pkg-card {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.checkin-left .pkg-card .tilegrid { overflow-y: auto; min-height: 0; }

/* Right column: the snack list, then the running order. */
.checkin-right .snack-card {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.checkin-right .snack-scroll { overflow-y: auto; min-height: 0; }
.checkin-right .summary-card { flex: 0 0 auto; }

.checkin-left .card + .card,
.checkin-right .card + .card { margin-top: 0; }

@media (max-width: 1150px) {
  /* Stacked on a narrow screen: the cards run at their natural height and the
     page scrolls, rather than each column scrolling inside itself. */
  .checkin-grid { grid-template-columns: 1fr; }
  .checkin-left,
  .checkin-right { position: static; max-height: none; }
  .checkin-left .pkg-card .tilegrid,
  .checkin-right .snack-scroll { overflow-y: visible; }
}

/* ---- roomier, easier-to-read entry fields ---- */
.form-lg label {
  font-size: .92rem;
  font-weight: 700;
  color: var(--ink-2);
  letter-spacing: .01em;
}
.form-lg input,
.form-lg select {
  margin-top: .3rem;
  padding: .66rem .8rem;
  font-size: 1.18rem;
  font-weight: 600;
  border-width: 2px;
}
.form-lg input::placeholder { color: var(--ink-3); font-size: 1rem; font-weight: 400; }
.form-lg .stack { gap: .62rem; }

input.field-xl {
  font-size: 1.6rem;
  font-weight: 700;
  padding: .62rem .8rem;
  letter-spacing: -.01em;
}

.switch-lg span { font-size: .95rem; }
.switch-lg input { width: 21px; height: 21px; }

/* ---- running order summary ---- */
.summary-card { background: var(--surface-2); padding: .8rem; }
.summary-card .card-head { margin-bottom: .5rem; }

.sum-row {
  display: flex;
  justify-content: space-between;
  gap: .8rem;
  padding: .12rem 0;
  font-size: .96rem;
}
.sum-label { color: var(--ink); font-weight: 600; }
.sum-value { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sum-row.muted-row .sum-label { color: var(--ink-3); font-weight: 600; }
.sum-note {
  font-size: .78rem;
  color: var(--ink-2);
  padding-left: .1rem;
  margin: -.05rem 0 .15rem;
}
.sum-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-weight: 800;
}
.sum-total span:first-child { font-size: .78rem; letter-spacing: .06em; color: var(--ink-2); }
.sum-total span:last-child  { font-size: 1.6rem; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

/* ---- larger package tiles ---- */
.tilegrid-lg { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: .6rem; }
.tilegrid-lg .tile { padding: .7rem .75rem; gap: .2rem; }
.tilegrid-lg .t-name  { font-size: 1rem; }
.tilegrid-lg .t-price { font-size: 1.15rem; }

/* ---- the arrow-key cursor, always visible on the focused tile ---- */
.tile.cursor {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(37,99,235,.3);
}
.tile:focus { outline: none; }
.tile:focus.cursor { box-shadow: 0 0 0 4px rgba(37,99,235,.45); }


/* ===================================================================
   "This check-in" summary box.
   Held at the exact metrics it had before the dashboard was scaled up,
   so enlarging everything around it leaves this box untouched. Values
   are in px on purpose: rem would follow the new base size.
   =================================================================== */
.summary-card { padding: 12px; }
.summary-card .card-head { margin: -2.25px 0 7.5px; }
.summary-card h3 { font-size: 15.3px; }
.summary-card .row { gap: 9px; }
.summary-card .sum-row { font-size: 14.4px; padding: 1.8px 0; }
.summary-card .sum-label,
.summary-card .sum-value { font-size: 14.4px; }
.summary-card .sum-note { font-size: 11.7px; margin: -0.75px 0 2.25px; }
.summary-card .bill-sep { margin: 5.25px 0; }
.summary-card .sum-total span:first-child { font-size: 11.7px; }
.summary-card .sum-total span:last-child  { font-size: 24px; }
.summary-card .chip { font-size: 10.8px; padding: 2.4px 7.5px; }
.summary-card label { font-size: 11.7px; }
.summary-card .switch { padding: 6.75px 0; }
.summary-card .switch span { font-size: 14.25px; }
.summary-card input,
.summary-card select { font-size: 11.7px; margin-top: 3.75px; padding: 8.7px 10.5px; }
.summary-card .switch input { width: 21px; height: 21px; margin: 0; padding: 0; }
.summary-card .btn-lg { font-size: 15.75px; padding: 12.75px 21px; }
.summary-card .btn kbd { font-size: 10.8px; }

/* The returning-family hint only takes space once it has something to say. */
#guardian-hint:empty { display: none; }

/* A plain minus that takes a snack back off the order. */
.btn-remove {
  background: var(--danger-soft);
  border-color: #fca5a5;
  color: #991b1b;
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1;
  min-width: 2.1rem;
  padding: .35rem .55rem;
}
.btn-remove:hover { background: var(--danger); border-color: var(--danger); color: #fff; }