/* The kitchen display's look, shared by the dashboard's Orders tab and the
   standalone pass screen at kds.html.

   Lives in its own file for the same reason kds-core.js does: two copies of
   "what does a late ticket look like" would drift, and the copy that drifted
   would be the one nobody had open. Uses the palette variables the host page
   declares. */

/* ---- KDS ----------------------------------------------------------------
   A rail of full-height tickets rather than a grid of cards: on a pass the
   screen is glanced at, not browsed, and a fixed column that always holds the
   same ticket in the same place is read faster than a reflowing grid.
   Oldest sits left, so the next thing to make is always the leftmost.

   The header is coloured by WAITING TIME, not by status. Status is a chip.
   Time is the thing worth seeing from across a room; status is the thing you
   read once you have walked over. ------------------------------------------ */
.kds{display:flex;gap:12px;overflow-x:auto;align-items:stretch;padding-bottom:10px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.kcard{flex:0 0 302px;scroll-snap-align:start;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);display:flex;flex-direction:column;overflow:hidden;max-height:74vh}
.khead{padding:13px 16px;background:var(--panel-3);display:flex;align-items:flex-start;
  justify-content:space-between;gap:10px;border-bottom:1px solid var(--line)}
.khead.warn{background:#E8A93B;border-bottom-color:rgba(0,0,0,.18)}
.khead.late{background:#F0564A;border-bottom-color:rgba(0,0,0,.18)}
.khead.warn .knum,.khead.warn .ktimer,.khead.warn .kwhere,.khead.warn .kwhen,
.khead.late .knum,.khead.late .ktimer,.khead.late .kwhere,.khead.late .kwhen{color:#14170F}
.khead.late .knum,.khead.late .ktimer{color:#0B0C0A}
.knum{font-family:var(--display);font-size:24px;font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--txt)}
.kwhere{font-size:12.5px;color:var(--txt-2);margin-top:5px}
/* fix-68. Louder than .kwhere and in the timer's lime on purpose: it is the one
   line that says DO NOT COOK THIS YET, and it has to win against somebody
   scanning a rail of forty tickets. */
.kwhen{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--lime);margin-top:5px}
/* Tabular figures so the seconds column does not jitter while it counts. */
.ktimer{font-family:var(--mono);font-size:23px;font-weight:700;font-variant-numeric:tabular-nums;
  line-height:1;white-space:nowrap;color:var(--lime)}
.kstatus{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--txt-2);margin-top:6px;text-align:right}
.khead.warn .kstatus,.khead.late .kstatus{color:rgba(20,23,15,.72)}
.klines{padding:0 16px;overflow-y:auto;flex:1 1 auto}
.kline{display:flex;gap:11px;padding:11px 0;font-size:16.5px;line-height:1.32;border-bottom:1px solid var(--line)}
.kline:last-child{border-bottom:0}
.kqty{font-family:var(--mono);font-size:16.5px;font-weight:700;color:var(--lime);min-width:28px}
.kmod{font-size:13.5px;color:var(--txt-2);margin-top:3px;padding-left:1px}
.kelse{font-size:12px;color:var(--txt-3);padding:10px 16px;border-top:1px dashed var(--line)}
.kfoot{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--line);
  margin-top:auto;background:var(--panel-2)}
.kfoot .btn{flex:1;justify-content:center}
.kmoney{font-family:var(--mono);font-size:12.5px;color:var(--txt-2);white-space:nowrap}
/* A rail is wrong on a phone — nobody swipes sideways through a dinner rush. */
@media(max-width:600px){
  .kds{flex-direction:column;overflow-x:visible}
  .kcard{flex:1 1 auto;max-height:none}
}

/* ---------- docket notes ----------
   Written at either screen, shown at both: the pass and the kitchen read the
   same orders.staff_note. Styled like the reference KDS highlights a note: a
   solid yellow band, black capitals, bold — a cook glancing from the grill
   must not be able to miss it. Amber-on-dark whispered; this shouts. */
.knote{margin:8px 12px 0;padding:8px 11px;border-radius:6px;
  background:#F5D93B;color:#161711;
  font-weight:800;font-size:13.5px;line-height:1.3;
  letter-spacing:.04em;text-transform:uppercase;
  white-space:pre-wrap;word-break:break-word}
.knote:last-of-type{margin-bottom:10px}
/* A note pinned to ONE dish sits INSIDE that dish's row, in the same slot the
   cook already reads its modifiers, and shrinks to its text. Same shape and
   same reasoning as pass.css — the two screens must not teach different
   shapes for the same idea, and an allergy note is the worst place to start.
   Full width still means the whole docket; a tab means one dish.
   No greying rule needed here: .kline.made already dims the whole row. */
.knote.item{display:block;width:fit-content;max-width:100%;
  margin:5px 0 0;padding:5px 9px;font-size:12px;line-height:1.3;letter-spacing:.03em}
.knotebtn{flex:0 0 auto !important}

/* One dish, several ways: the group heading carries the total, each way stays
   its own tappable row underneath. */
.kgroup{padding:9px 16px 0;font-weight:700;font-size:15.5px}
.kline.sub{padding-left:30px;font-size:14px}
.kline.sub .kqty{opacity:.75}

/* the notes sheet: existing entries, then the input, then where it lands */
.knlist{margin-bottom:12px;display:flex;flex-direction:column;gap:6px}
.knentry{display:flex;align-items:flex-start;gap:8px;justify-content:space-between;
  background:#F5D93B;color:#161711;border-radius:6px;padding:7px 8px 7px 11px;
  font-weight:800;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;
  word-break:break-word}
.knx{flex:none;width:22px;height:22px;border-radius:6px;background:rgba(0,0,0,.14);
  color:#161711;font-size:14px;line-height:1;display:grid;place-items:center}
.kntargets{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.kntag{background:var(--panel-2);border:1px solid var(--line-2);border-radius:100px;
  color:var(--txt-2);font-size:12.5px;padding:6px 11px;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kntag.on{background:var(--lime);color:#14170F;border-color:var(--lime);font-weight:600}

.knotewrap{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.62);
  display:flex;align-items:center;justify-content:center;padding:20px}
.knotecard{width:min(460px,100%);background:var(--panel);border:1px solid var(--line-2);
  border-radius:16px;padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.knoteh{font-family:var(--display);font-weight:700;font-size:18px;margin-bottom:12px}
.knotein{width:100%;background:var(--panel-2);border:1px solid var(--line-2);border-radius:10px;
  padding:12px 13px;color:var(--txt);font-family:inherit;font-size:16px;line-height:1.4;resize:vertical}
.knotein:focus{outline:2px solid var(--warn);outline-offset:1px}
.knotefoot{display:flex;gap:9px;margin-top:14px;justify-content:flex-end}

/* The cue to fire the mains. */
.kentsent{margin:10px 16px 0;padding:7px 11px;border-radius:8px;
  background:rgba(195,239,74,.16);border-left:3px solid var(--lime);
  font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--txt)}

/* ---------- a dish the kitchen has finished ----------
   Tapping a line marks it made, which is what un-greys it on the pass. Lime
   for done, same as everywhere else on these two screens. */
.kline.tap{display:flex;width:100%;text-align:left;background:none;border:0;
  color:inherit;font:inherit;cursor:pointer;padding:7px 0;gap:10px;align-items:flex-start}
.kline.tap:active{opacity:.6}
.kbox{flex:none;width:22px;height:22px;border-radius:7px;border:2px solid var(--line-2);
  display:grid;place-items:center;margin-top:1px}
.kline.made .kbox{background:var(--lime);border-color:var(--lime)}
.kbox svg{width:13px;height:13px;fill:none;stroke:#14170F;stroke-width:3.2;
  stroke-linecap:round;stroke-linejoin:round}
.kline.made{opacity:.5}
.klabel{flex:1;text-align:left}
/* Struck by name, not by position: the pinned note lives inside .klabel
   too, and text-decoration inherits to whatever it is told to cover. */
.kline.made .kname,.kline.made .kmod{text-decoration:line-through}