/* The kitchen screen, /admin/kitchen/ (Version 24).
   A ticket rail: each order is a paper slip on the rail of its step, its
   number big enough to read across the kitchen, its next step one big
   button. Made for a tablet on a wall or stand, read at arm's length and
   tapped with wet or gloved fingers: large targets, high contrast, no hover. */

@font-face {
  font-family: "CCS Nav";
  src: url("../fonts/nav-condensed-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --k-night: #02112c;      /* the site's navy */
  --k-rail: #0a1d3f;
  --k-line: #1c2d4a;
  --k-paper: #f3eee4;      /* ticket paper */
  --k-ink: #121726;
  --k-ink-dim: #545b6e;
  --k-text: #f4f6fb;
  --k-dim: #aab2c8;
  --k-new: #d9a34c;        /* the site's gold */
  --k-making: #6fd6e0;     /* the site's frost */
  --k-ready: #7cd98c;
  --k-late: #ff6b57;
  --k-warn-bg: #3a1c10;
  --k-gap: clamp(10px, 1.4vw, 18px);
  --k-radius: 10px;
  --k-num: "CCS Nav", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --k-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body.k {
  background: var(--k-night);
  color: var(--k-text);
  font: 500 17px/1.35 var(--k-body);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid var(--k-making); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---------------- Top bar ---------------- */
.k-bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: var(--k-gap);
  padding: 10px var(--k-gap);
  background: var(--k-night);
  border-bottom: 1px solid var(--k-line);
}
.k-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.k-mark { width: 38px; height: 38px; flex: none; }
.k-mark rect { fill: var(--k-new); }
.k-mark path { fill: none; stroke: var(--k-night); stroke-width: 2.6; stroke-linecap: round; }
.k-brand-name { margin: 0; font: 700 1.5rem/1 var(--k-num); letter-spacing: 0.02em; }
.k-brand-tablet { margin: 2px 0 0; color: var(--k-dim); font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 18ch; }

.k-duty {
  display: flex; align-items: center; gap: 10px;
  min-height: 56px; padding: 6px 16px 6px 6px;
  background: var(--k-rail); border: 2px solid var(--k-line); border-radius: 999px;
  text-align: left; max-width: 40vw;
}
.k-duty-empty { border-color: var(--k-new); animation: k-call 2.4s ease-in-out infinite; }
.k-duty-text { display: grid; min-width: 0; }
.k-duty-label { font-size: 0.72rem; color: var(--k-dim); text-transform: none; }
.k-duty-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.k-avatar {
  width: 42px; height: 42px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: #24385e center / cover no-repeat;
  font: 700 1rem/1 var(--k-num); color: var(--k-text);
}
.k-avatar-lg { width: 64px; height: 64px; font-size: 1.4rem; }

.k-bar-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.k-tool {
  min-height: 52px; padding: 0 20px;
  background: transparent; border: 2px solid var(--k-line); border-radius: var(--k-radius);
  font-weight: 700;
}
.k-tool:active { background: var(--k-rail); }
.k-tool-link { display: inline-flex; align-items: center; color: var(--k-dim); text-decoration: none; font-weight: 700; }
.k-clock { font: 700 1.6rem/1 var(--k-num); min-width: 4.5ch; text-align: right; }
.k-awake { width: 10px; height: 10px; border-radius: 50%; background: var(--k-ready); }

.k-banner {
  margin: 0; padding: 12px var(--k-gap);
  background: var(--k-rail); border-bottom: 1px solid var(--k-line);
  color: var(--k-dim);
}
.k-banner-warn { background: var(--k-warn-bg); color: #ffd9c9; }

/* ---------------- The rails ---------------- */
.k-board {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--k-gap); padding: var(--k-gap);
  align-items: start;
}
.k-rail h2 {
  margin: 0 0 10px; padding-bottom: 8px;
  font: 700 1.6rem/1 var(--k-num); letter-spacing: 0.03em;
  border-bottom: 4px solid var(--rail-color, var(--k-line));
  display: flex; align-items: baseline; justify-content: space-between;
}
.k-rail-new { --rail-color: var(--k-new); }
.k-rail-preparing { --rail-color: var(--k-making); }
.k-rail-ready { --rail-color: var(--k-ready); }
.k-count { font-size: 1.3rem; color: var(--rail-color); }
.k-tickets { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--k-gap); }
.k-empty { color: var(--k-dim); padding: 18px 4px; list-style: none; }

/* A ticket: paper, clipped to the rail at the top. */
.k-ticket {
  position: relative;
  background: var(--k-paper); color: var(--k-ink);
  border-radius: 4px 4px var(--k-radius) var(--k-radius);
  border-top: 8px solid var(--rail-color);
  padding: 14px 16px 14px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}
.k-ticket::before { /* the clip */
  content: ""; position: absolute; top: -14px; left: 50%; width: 46px; height: 10px; margin-left: -23px;
  background: var(--k-line); border-radius: 3px 3px 0 0;
}
.k-ticket-head { display: flex; align-items: flex-start; gap: 12px; }
.k-num { font: 700 2.6rem/0.9 var(--k-num); letter-spacing: 0.01em; }
.k-who { display: grid; min-width: 0; padding-top: 2px; }
.k-name { font-weight: 800; font-size: 1.15rem; overflow-wrap: anywhere; }
.k-age { color: var(--k-ink-dim); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.k-late .k-age { color: #b4271a; font-weight: 800; }
.k-late { border-top-color: var(--k-late); }
.k-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 6px; }
.k-tag { font-size: 0.78rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: #e3ddd0; color: var(--k-ink); }
.k-tag-ok { background: #cfe9d3; color: #14532d; }
.k-tag-warn { background: #ffd8cc; color: #8a1d0e; }
.k-items-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.k-items-list li { display: grid; grid-template-columns: 2.6ch 1fr; gap: 8px; font-size: 1.15rem; font-weight: 700; }
.k-qty { font-family: var(--k-num); font-size: 1.4rem; line-height: 1.1; }
.k-what { display: grid; }
.k-choice { font-weight: 500; font-size: 0.95rem; color: var(--k-ink-dim); }
.k-note { margin: 10px 0 0; padding: 8px 10px; background: #fff6c8; border-left: 4px solid #b98900; font-weight: 700; overflow-wrap: anywhere; }
.k-ticket-actions { display: flex; gap: 10px; margin-top: 14px; align-items: flex-start; }

.k-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 60px; padding: 0 22px;
  border: 0; border-radius: var(--k-radius);
  background: var(--k-new); color: var(--k-ink);
  font-weight: 800; font-size: 1.1rem; text-decoration: none;
}
.k-btn:disabled { opacity: 0.5; }
.k-btn-go { flex: 1; background: var(--k-ink); color: var(--k-paper); font: 700 1.6rem/1 var(--k-num); letter-spacing: 0.03em; }
.k-ticket-new .k-btn-go { background: #6b3f08; }
.k-ticket-preparing .k-btn-go { background: #0d5c66; }
.k-ticket-ready .k-btn-go { background: #1d6b2e; }
.k-btn-go:active { transform: translateY(1px); }
.k-btn-ghost { background: transparent; color: inherit; border: 2px solid currentColor; min-height: 52px; font-size: 1rem; }
.k-btn-danger { color: #b4271a; }
.k-more { position: relative; }
.k-more summary {
  list-style: none; min-height: 60px; padding: 0 18px; display: flex; align-items: center;
  border: 2px solid var(--k-ink); border-radius: var(--k-radius); font-weight: 800; cursor: pointer;
}
.k-more summary::-webkit-details-marker { display: none; }
.k-more-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 3;
  display: grid; gap: 8px; padding: 10px; min-width: 220px;
  background: var(--k-paper); border: 2px solid var(--k-ink); border-radius: var(--k-radius);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.k-fresh { animation: k-arrive 1.2s ease-out 1; }
@keyframes k-arrive { 0% { transform: translateY(-14px); box-shadow: 0 0 0 6px var(--k-new); } 100% { transform: none; } }
@keyframes k-call { 0%, 100% { box-shadow: 0 0 0 0 rgba(217, 163, 76, 0); } 50% { box-shadow: 0 0 0 6px rgba(217, 163, 76, 0.35); } }

/* Done in the last hour */
.k-done { margin: 0 var(--k-gap) var(--k-gap); border: 1px solid var(--k-line); border-radius: var(--k-radius); background: var(--k-rail); }
.k-done summary { padding: 14px 16px; font-weight: 700; cursor: pointer; min-height: 52px; }
.k-done-list { list-style: none; margin: 0; padding: 0 16px 12px; display: grid; gap: 8px; }
.k-done-row { display: flex; align-items: center; gap: 14px; }
.k-done-row .k-num { font-size: 1.6rem; }
.k-done-row .k-btn { margin-left: auto; min-height: 48px; }

/* ---------------- Sheets ---------------- */
.k-sheet {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(1, 8, 22, 0.86);
  display: grid; place-items: center; padding: 16px;
  overflow-y: auto;
}
.k-sheet-body {
  width: min(880px, 100%); max-height: calc(100vh - 32px); overflow-y: auto;
  background: var(--k-night); border: 2px solid var(--k-line); border-radius: 16px;
  padding: clamp(18px, 3vw, 32px);
}
.k-sheet h2 { margin: 0 0 6px; font: 700 2.2rem/1.05 var(--k-num); letter-spacing: 0.02em; }
.k-sheet-sub { margin: 0 0 18px; color: var(--k-dim); }
.k-sheet-note { color: var(--k-dim); font-size: 0.9rem; margin: 18px 0 0; }
.k-sheet-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; margin-top: 18px; }

.k-people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.k-person {
  width: 100%; min-height: 150px; padding: 14px 10px;
  display: grid; justify-items: center; align-content: center; gap: 8px;
  background: var(--k-rail); border: 2px solid var(--k-line); border-radius: 14px;
}
.k-person:active { border-color: var(--k-new); }
.k-person-on { border-color: var(--k-ready); }
.k-person-nopin { opacity: 0.55; }
.k-person-name { font-weight: 800; font-size: 1.1rem; text-align: center; overflow-wrap: anywhere; }
.k-person-sub { color: var(--k-dim); font-size: 0.85rem; min-height: 1.2em; }

/* The PIN pad */
.k-pin { width: min(460px, 100%); text-align: center; }
.k-pin-dots { display: flex; justify-content: center; gap: 14px; margin: 8px 0 6px; }
.k-pin-dots span { width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--k-dim); }
.k-pin-dots span.k-dot-on { background: var(--k-new); border-color: var(--k-new); }
.k-shake { animation: k-shake 0.4s; }
@keyframes k-shake { 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }
.k-pin-msg { min-height: 1.4em; margin: 6px 0 10px; color: #ffb4a2; font-weight: 700; }
.k-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.k-pad button {
  min-height: 78px; border-radius: 14px; border: 2px solid var(--k-line);
  background: var(--k-rail); font: 700 2.2rem/1 var(--k-num);
}
.k-pad button:active { background: #13305c; }
.k-pad .k-pad-alt { font: 700 1.05rem/1 var(--k-body); color: var(--k-dim); }
.k-link { margin-top: 18px; background: none; border: 0; color: var(--k-new); text-decoration: underline; font-weight: 700; min-height: 48px; }

/* Pickup */
.k-scan { position: relative; border-radius: 12px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; max-height: 46vh; }
.k-scan video { width: 100%; height: 100%; object-fit: cover; display: block; }
.k-scan video.k-mirror { transform: scaleX(-1); }
.k-scan-state { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 10px 14px; background: rgba(2, 17, 44, 0.8); }
.k-number { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.k-number label { font-weight: 700; }
.k-number input { width: 7ch; min-height: 60px; padding: 0 12px; font: 700 2rem/1 var(--k-num); background: var(--k-paper); color: var(--k-ink); border: 0; border-radius: var(--k-radius); }
.k-pickup-result { margin-top: 16px; padding: 16px; border-radius: 12px; display: grid; gap: 8px; font-size: 1.1rem; }
.k-pickup-result p { margin: 0; }
.k-pickup-result.k-good { background: #12391d; border: 2px solid var(--k-ready); }
.k-pickup-result.k-bad { background: var(--k-warn-bg); border: 2px solid var(--k-late); }
.k-pickup-num { font: 700 2rem/1 var(--k-num); }
.k-pickup-warn { color: #ffd9c9; font-weight: 700; }

/* Sold out */
.k-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.k-items-head { margin-top: 10px; color: var(--k-dim); font-weight: 700; }
.k-item { width: 100%; min-height: 60px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--k-rail); border: 2px solid var(--k-line); border-radius: var(--k-radius); text-align: left; }
.k-item-name { font-weight: 700; }
.k-item-state { color: var(--k-ready); font-weight: 700; }
.k-item-out { border-color: var(--k-late); }
.k-item-out .k-item-name { text-decoration: line-through; }
.k-item-out .k-item-state { color: var(--k-late); }

/* Not a kitchen tablet (yet) */
.k-unset { position: fixed; inset: 0; z-index: 30; background: var(--k-night); display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px; text-align: center; }
.k-unset h1 { margin: 0; font: 700 2.4rem/1.1 var(--k-num); }
.k-unset p { margin: 0; max-width: 46ch; color: var(--k-dim); }
.k-mark-big { width: 72px; height: 72px; }

body.k-offline .k-board { opacity: 0.55; }

/* The keep-awake video: playing, but not seen. */
.k-keepawake { position: fixed; width: 1px; height: 1px; left: 0; bottom: 0; opacity: 0.01; pointer-events: none; }

/* Portrait tablets and phones: the rails stack. */
@media (max-width: 820px) {
  .k-board { grid-template-columns: 1fr; }
  .k-bar { flex-wrap: wrap; }
  .k-duty { max-width: none; flex: 1; }
  .k-bar-tools { width: 100%; }
  .k-tool { flex: 1; }
  .k-brand-tablet { max-width: 30ch; }
}

/* Phones (Version 25): the same board, sized for a hand rather than a wall.
   One tidy header (name and clock, then who's on duty, then three equal
   tools), smaller rail headings, compact tickets, and sheets that rise from
   the bottom. Buttons stay at least 44px tall for wet or gloved fingers. */
@media (max-width: 600px) {
  body.k { font-size: 15px; }
  .k-bar {
    display: grid; grid-template-columns: 1fr auto; gap: 8px 10px;
    padding: 8px 12px 10px;
  }
  .k-brand { gap: 8px; }
  .k-mark { width: 30px; height: 30px; }
  .k-brand-name { font-size: 1.2rem; }
  .k-brand-tablet { font-size: 0.75rem; max-width: 24ch; }
  .k-bar-tools { display: contents; }
  .k-clock { grid-column: 2; grid-row: 1; font-size: 1.15rem; min-width: 0; display: flex; align-items: center; gap: 6px; }
  .k-awake { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; width: 8px; height: 8px; margin: -2px -4px 0 0; }
  .k-duty {
    grid-column: 1 / -1; grid-row: 2; max-width: none; width: 100%;
    min-height: 48px; padding: 4px 14px 4px 4px; gap: 8px; border-width: 2px;
  }
  .k-avatar { width: 38px; height: 38px; font-size: 0.9rem; }
  .k-duty-label { font-size: 0.7rem; }
  .k-duty-name { font-size: 0.98rem; }
  .k-tool {
    grid-row: 3; min-height: 44px; padding: 0 8px; font-size: 0.9rem;
    display: inline-flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap;
  }
  .k-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .k-brand { grid-column: 1 / 3; grid-row: 1; }
  .k-clock { grid-column: 3; justify-content: flex-end; }
  .k-awake { grid-column: 3; }
  .k-tool[data-k-open="pickup"] { grid-column: 1; }
  .k-tool[data-k-open="soldout"] { grid-column: 2; }
  .k-tool-link { grid-column: 3; }
  /* Version 26: with the Time Clock, it takes the third spot and Staff Sign-in drops to its own row. */
  .k-tool[data-k-open="time"] { grid-column: 3; }
  .k-tool[data-k-open="time"]:not([hidden]) ~ .k-tool-link { grid-column: 1 / -1; grid-row: 4; min-height: 38px; }

  .k-banner { padding: 10px 12px; font-size: 0.88rem; line-height: 1.4; }

  .k-board { gap: 14px; padding: 12px; }
  .k-rail h2 { font-size: 1.2rem; margin-bottom: 8px; padding-bottom: 6px; border-bottom-width: 3px; }
  .k-count { font-size: 1.05rem; }
  .k-empty { padding: 4px 2px 6px; font-size: 0.88rem; }
  .k-tickets { gap: 12px; }

  .k-ticket { padding: 11px 12px; border-top-width: 6px; }
  .k-ticket::before { top: -11px; width: 36px; height: 8px; margin-left: -18px; }
  .k-ticket-head { gap: 10px; }
  .k-num { font-size: 2rem; }
  .k-name { font-size: 1rem; }
  .k-age { font-size: 0.8rem; }
  .k-tags { margin: 8px 0 4px; }
  .k-tag { font-size: 0.72rem; }
  .k-items-list li { font-size: 1rem; gap: 6px; }
  .k-qty { font-size: 1.2rem; }
  .k-choice { font-size: 0.85rem; }
  .k-note { font-size: 0.9rem; padding: 6px 8px; }
  .k-ticket-actions { margin-top: 10px; gap: 8px; }
  .k-btn { min-height: 48px; padding: 0 16px; font-size: 1rem; }
  .k-btn-go { font-size: 1.25rem; }
  .k-more summary { min-height: 48px; padding: 0 14px; }

  .k-done { margin: 0 12px 12px; }
  .k-done summary { min-height: 44px; padding: 12px 14px; font-size: 0.92rem; }
  .k-done-row .k-num { font-size: 1.3rem; }
  .k-done-row .k-btn { min-height: 44px; }

  .k-sheet { place-items: end stretch; padding: 0; }
  .k-sheet-body { width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0; border-width: 1px 0 0; padding: 18px 14px calc(16px + env(safe-area-inset-bottom)); }
  .k-sheet h2 { font-size: 1.6rem; }
  .k-sheet-sub { margin-bottom: 14px; font-size: 0.92rem; }
  .k-people { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .k-person { min-height: 118px; padding: 10px 8px; }
  .k-avatar-lg { width: 52px; height: 52px; font-size: 1.15rem; }
  .k-person-name { font-size: 1rem; }
  .k-pin { width: 100%; }
  .k-pad { gap: 10px; }
  .k-pad button { min-height: 62px; font-size: 1.8rem; }
  .k-number input { min-height: 48px; font-size: 1.6rem; }
  .k-item { min-height: 50px; padding: 0 14px; }
  .k-unset h1 { font-size: 1.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .k-fresh, .k-duty-empty, .k-shake { animation: none; }
}

/* Version 26: a non-alcoholic drink on a ticket */
.k-drink { justify-self: start; margin-top: 2px; padding: 1px 8px; border-radius: 999px; background: #0d5c66; color: #e7fbfd; font-size: 0.72rem; font-weight: 800; }

/* Version 26: the time clock sheet */
.k-time-actions { display: grid; gap: 12px; margin: 6px 0 0; }
.k-time-actions .k-btn { min-height: 64px; font-size: 1.3rem; }