/* ============================================================================
   JSOOR Gaming · THE FRONT DESK SURFACE — layout only
   The room, and the rail beside it. Everything shared with other surfaces
   (till, panel, stage, kv) lives in shell.css; this file holds only what the
   front desk alone draws.
   ========================================================================= */

/* Rooms STRETCH to share the column, which is what the floor already does on
   the page the operator reviewed and accepted. Sizing each room to its machines
   was tried and reverted: it left a dead band along the bottom, and a screen
   with its content clustered over an empty field is the complaint that started
   this review. */
.board { min-block-size: 0; display: grid; gap: 12px;
         grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr minmax(0, .9fr); }
.board-tables { grid-column: 1 / -1; min-block-size: 0; display: grid; gap: 12px; grid-template-columns: 4fr 5fr; }

.ev { display: flex; gap: 10px; padding-block: 10px; border-block-end: 1px solid var(--hairline); }
.ev:last-child { border-block-end: 0; }
.ev-dot { flex: none; inline-size: 7px; block-size: 7px; margin-block-start: 6px; border-radius: 50%; }
.ev-text { display: flex; flex-direction: column; gap: 3px; min-inline-size: 0; }
.ev-text b { font-size: var(--t-meta); font-weight: 600; line-height: 1.35; }
.ev-text span { font-size: var(--t-micro); line-height: 1.45; color: var(--muted); }
.ev-when { flex: none; margin-inline-start: auto; font-family: var(--font-mono); font-size: var(--t-micro); color: var(--faint); }

.qrow { display: flex; align-items: center; gap: 10px; padding-block: 9px; border-block-end: 1px solid var(--hairline); }
.qrow:last-of-type { border-block-end: 0; }
.qrow > div { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.qrow b { font-size: var(--t-meta); font-weight: 600; }
.qrow span { font-size: var(--t-micro); color: var(--muted); }
.qrow-wait { flex: none; margin-inline-start: auto; font-family: var(--font-mono); font-size: var(--t-micro); color: var(--faint); }
.qrow-wait.is-long { color: var(--warn-fg); }

/* Below the design size the stage stops promising one viewport: it stacks and
   takes the scroll itself, so the rail moves under the room instead of being
   deleted. A breakpoint that drops controls to keep a layout has the priority
   backwards. */
@media (max-width: 1180px) {
  .stage { display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
  /* `flex: none`: a flex child with min-block-size 0 shrank to the stage's
     height and its rooms spilled over the rail drawn under it. */
  .board { flex: none; grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: auto; }
  .rail { flex: none; }
}
@media (min-width: 1181px) and (max-height: 999px) {
  .stage { overflow-y: auto; overscroll-behavior: contain; }
  .board { grid-template-rows: none; grid-auto-rows: auto; }
}
@media (max-width: 720px) { .board-tables { grid-template-columns: 1fr; } }

/* ══ THE RAIL'S QUIET PARTS ═════════════════════════════════════════════════ */
.rail-hint { margin-block-start: 6px; font-size: var(--t-micro); line-height: 1.45; color: var(--faint); }
.panel-cta--quiet { margin-block-start: 10px; }
.till-quiet { font-weight: 400; color: var(--faint); }

/* ══ THE SEAT STEP ════════════════════════════════════════════════════════════
   It does not animate in. Seating happens dozens of times a night, often from
   the keyboard, and a step that slides in makes every one of them wait for it.
   The one thing that marks "you are choosing a seat" is static: the chosen
   tile's accent ring, on the room the step never covers. */
/* The step takes the height it needs and "Needs you" gives way, down to a
   floor where its first rows still read. On a short screen the step's body
   scrolls; its commit line and its buttons never leave the panel. */
.rail > .panel--grow:has(+ .seat) { flex: 1 1 0; min-block-size: 132px; }
.seat { flex: 0 1 auto; min-block-size: 0; gap: 10px; border-color: var(--accent-soft-bd); }
.seat-body { display: flex; flex-direction: column; gap: 10px; min-block-size: 0; overflow-y: auto;
             margin-inline: -16px; padding-inline: 16px; overscroll-behavior: contain; }
.seat-sub { font-size: var(--t-meta); color: var(--muted); }
.seat-row { display: flex; flex-direction: column; gap: 6px; }
.seat-row--inline { flex-direction: row; align-items: center; justify-content: space-between; }
.seat-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.seat-pick { font-family: var(--font-mono); font-weight: 600; cursor: pointer; }
.seat-pick small { margin-inline-start: 6px; font-weight: 400; font-size: .62rem; color: var(--faint); }
.seat-pick.js-chip--accent small { color: inherit; opacity: .8; }
/* Not what they asked for: still offered, visibly second. */
.seat-pick.is-off:not(.js-chip--accent) { border-style: dashed; }
.seat-rule { font-size: var(--t-micro); line-height: 1.45; color: var(--faint); }
.seat-heads { display: inline-flex; align-items: center; gap: 8px; }
.seat-heads .js-btn { min-inline-size: 32px; padding-inline: 0; justify-content: center; }
.seat-heads output { min-inline-size: 2ch; text-align: center; font-family: var(--font-mono); font-size: var(--t-body); font-weight: 600; }

/* The chosen seat, on the room. A ring outside the tile's own border so the
   tile's state colours are untouched: this marks a choice, not a state. */
.jg-tile.is-choosing { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── the customer block: two fields that are the search ───────────────────── */
.cf-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cf-fields .js-input { min-height: 38px; font-size: var(--t-body); }
.cf-phone { font-family: var(--font-mono); }
.cf-list { display: flex; flex-direction: column; gap: 4px; }
.cf-list:empty { display: none; }
.cf-row { display: flex; align-items: center; gap: 8px; inline-size: 100%; padding: 7px 10px;
          border: 1px solid var(--hairline); border-radius: var(--r-xs); background: var(--sunken);
          color: var(--ink); font-family: inherit; text-align: start; cursor: pointer;
          transition: transform var(--dur-press) var(--ease-out); }
.cf-row:active { transform: scale(0.98); }
.cf-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cf-row-main { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.cf-row-main b { font-size: var(--t-meta); font-weight: 600; }
.cf-row-main span { font-size: var(--t-micro); color: var(--muted); }
.cf-chip { block-size: 18px; padding-inline: 7px; font-size: .62rem; }
.cf-row-go { margin-inline-start: auto; flex: none; font-size: var(--t-micro); color: var(--faint); }
@media (hover: hover) and (pointer: fine) {
  .cf-row:hover { border-color: var(--border-strong); }
  .cf-row:hover .cf-row-go { color: var(--accent-fg); }
}
.cf-none { font-size: var(--t-micro); color: var(--faint); }
.cf-conflict { display: grid; gap: 8px; padding: 8px 10px; border: 1px solid var(--warn-bd);
               border-radius: var(--r-xs); background: var(--warn-bg); font-size: var(--t-meta); color: var(--ink); }
.cf-conflict-acts { display: flex; gap: 6px; }
.cf-card { display: flex; align-items: center; gap: 10px; padding: 8px 10px;
           border: 1px solid var(--accent-soft-bd); border-radius: var(--r-xs); background: var(--accent-soft); }
.cf-card-main { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.cf-card-main b { font-size: var(--t-body); font-weight: 600; }
.cf-card-main span { font-size: var(--t-micro); color: var(--muted); }
.cf-card .js-btn { margin-inline-start: auto; }
/* The save row is always on screen (customer-identity R7): disabled, it still
   says what it would take to save somebody. */
.cf-save { display: flex; align-items: flex-start; gap: 8px; font-size: var(--t-micro); line-height: 1.45; color: var(--ink-2); cursor: pointer; }
.cf-save input { flex: none; margin: 2px 0 0; accent-color: var(--accent); }
.cf-save.is-off { color: var(--faint); cursor: default; }

/* The commit line: the sentence the commit will record, read before pressing. */
.seat-line { padding: 8px 10px; border-radius: var(--r-xs); background: var(--sunken);
             font-size: var(--t-meta); line-height: 1.45; color: var(--ink); }
.seat-line.is-refused { color: var(--warn-fg); }
.seat-acts { display: flex; justify-content: flex-end; gap: 8px; }
.seat-acts kbd { margin-inline-start: 4px; font-family: var(--font-mono); font-size: .6rem; color: var(--faint); }

/* ── the seal ──────────────────────────────────────────────────────────────── */
.kv--var b { color: var(--warn-fg); }
.seal-label { display: block; margin-block-end: 6px; }
.seal-reasons { display: flex; flex-wrap: wrap; gap: 6px; }
.seal-reasons .js-chip { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .cf-row { transition-property: opacity; }
  .cf-row:active { transform: none; }
}
.till-var { font-weight: 500; color: var(--warn-fg); }
.seal-ledger { padding: 8px 10px; border: 1px solid var(--warn-bd); border-radius: var(--r-xs); background: var(--warn-bg); color: var(--ink); }