/* Order Rail — the right-edge column driven by js/rail/rail.js.
 *
 * Isolation (ORDER_RAIL_SPEC §6): every class here is prefixed `rail-`, and the
 * only app hook is the `.app` grid's third column (var(--rail-w) in styles.css).
 * Colours come entirely from the app's own CSS variables, so the rail is
 * theme-aware for free — no palette of its own to keep in sync.
 *
 * Section 1 reuses the existing .confq-card markup (styled in styles.css); the
 * full-screen detail overlay reuses .cook-detail (also styles.css). This file
 * owns only the rail shell, its ticket rows, and the collapse/peek behaviour.
 */

#orderRail {
  grid-area: rail;
  min-width: 0;
  overflow: hidden;              /* collapsed → the 0-width track clips the inner */
  border-left: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  flex-direction: column;
}
/* Off entirely (no cook access / toggle off): nothing to show. */
body:not(.rail-on) #orderRail { display: none; }

/* Fixed width so collapsing (track → 0) clips the content rather than reflowing
   it, exactly like the left nav. */
.rail-inner {
  box-sizing: border-box;
  width: 300px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
}

.rail-head { display: flex; align-items: center; gap: 8px; padding: 2px 2px 6px; }
/* The collapse switch is #railToggle in the topbar (see index.html) — the
   mirror of #navToggle, same .iconbtn box and the same panel glyph flipped. All
   this file adds is the two states the nav's toggle has: hidden when there is no
   rail to switch, and accent-coloured while the rail is away, so the bar says
   the panel is hiding rather than absent. */
body:not(.rail-on) #railToggle { display: none !important; }
body.rail-collapsed #railToggle { color: var(--accent-700); }
.rail-title {
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-muted);
}

.rail-sec { display: flex; flex-direction: column; gap: 6px; padding: 6px 0; }
.rail-h {
  margin: 2px 0; font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-muted);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
/* How many tickets are on the pass in total — the header keeps the true count
   even while the list below draws only the first page of them. */
.rail-count {
  font-size: 11px; font-weight: 700; letter-spacing: 0;
  color: var(--text-soft); background: var(--surface-3);
  border-radius: 999px; padding: 1px 7px;
}
.rail-empty { margin: 0; padding: 4px 2px; font-size: 12px; color: var(--text-soft); }
/* Draws the next page of tickets that are already in hand. */
.rail-more {
  margin-top: 2px; width: 100%; border: 1px dashed var(--border);
  background: none; color: var(--text-muted); cursor: pointer;
  border-radius: 8px; padding: 7px 8px; font: inherit; font-size: 12px;
}
.rail-more:hover { border-color: var(--border-strong); color: var(--text); background: var(--surface-3); }

/* Section-1 cards borrow .confq-card, but the corner popup's drop shadow is out
   of place inside a flat column. */
#orderRail .confq-card { box-shadow: none; }

/* ---- Section 2: the ticket rows ---- */
.rail-ticket {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--text-soft);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer; text-align: left;
}
.rail-ticket:hover { border-color: var(--border-strong); }
.rail-ticket.s-red      { border-left-color: var(--danger); }
.rail-ticket.s-yellow   { border-left-color: var(--warn); }
.rail-ticket.s-normal   { border-left-color: var(--accent); }
.rail-ticket.s-pending  { border-left-color: var(--accent); }
.rail-ticket.s-completed { opacity: 0.55; }

.rail-t-main { display: flex; align-items: center; gap: 8px; }
.rail-t-num { font-family: var(--mono); font-weight: 800; font-size: 14px; color: var(--text); }
.rail-t-place {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; color: var(--text-muted);
}
.rail-t-timer {
  flex: 0 0 auto; font-variant-numeric: tabular-nums;
  font-size: 12px; font-weight: 700; color: var(--text-muted);
}
.rail-ticket.s-red .rail-t-timer    { color: var(--danger); }
.rail-ticket.s-yellow .rail-t-timer { color: var(--warn-strong, var(--warn)); }

/* Where the ticket IS (the pill, borrowed wholesale from the Cook Screen) and
   where the next press TAKES it (the button). Two different facts, so they sit
   on one line rather than one standing in for the other. */
.rail-t-foot { display: flex; align-items: center; gap: 8px; }
.rail-t-foot .status-pill { flex: 0 0 auto; }

/* The rung the press LEADS TO decides the colour, and the colour is the Cook
   Screen's own: --warn for Cooking, --info for Ready, --accent for the press
   that ends the ticket. Before this every rail button was green whatever it
   did, so "start cooking" and "hand it over" looked like the same press. */
.rail-t-action {
  flex: 1 1 auto; min-width: 0;
  padding: 7px 10px; border-radius: 8px;
  border: 1px solid var(--rung, var(--accent));
  background: var(--rung-bg, var(--accent-bg));
  color: var(--rung-ink, var(--accent-700));
  font-weight: 700; font-size: 13px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rail-t-action[data-rung="cooking"]   { --rung: var(--warn);   --rung-bg: var(--warn-bg);   --rung-ink: var(--warn-strong); }
.rail-t-action[data-rung="ready"]     { --rung: var(--info);   --rung-bg: var(--info-bg);   --rung-ink: var(--info); }
.rail-t-action[data-rung="completed"] { --rung: var(--accent); --rung-bg: var(--accent-bg); --rung-ink: var(--accent-700); }
/* Hover doubles the rung's own outline rather than flooding the button with it:
   a fill would have to pick a legible ink per rung per theme, and amber-on-white
   is exactly the pair that goes unreadable when it guesses wrong. */
.rail-t-action:hover { box-shadow: inset 0 0 0 1px var(--rung, var(--accent)); }
/* Dark: --accent-700 is a deep green that sinks into the 18%-alpha tile. The
   Cook Screen's pill accepts that because it is 10px uppercase on a card; a
   13px button that must read across a room does not. */
:root[data-theme="dark"] .rail-t-action[data-rung="completed"] { --rung-ink: var(--accent); }

/* ---- collapse / peek — mirror the left nav (desktop/tablet only) ---- */
@media (min-width: 721px) {
  /* Same rule set as .nav-pin, value for value — the two panels should not
     start drifting on the first tweak one of them gets — with one deliberate
     difference: no `margin-left: auto`. The nav needs it to reach its own INNER
     edge, because the nav is on the left and its inner edge is the row's end.
     The rail is on the right, so its inner edge is the row's START, which is
     where markup order already puts this. Copying the auto margin as well is
     what had one pin hugging the content and the other hugging the screen's
     right rim — the same rule, and the opposite place on screen. */
  .rail-pin { border: 0; background: none; padding: 4px; border-radius: 6px; color: var(--text-muted); cursor: pointer; display: none; }
  .rail-pin:hover { background: var(--surface-3); color: var(--text); }
  body.rail-on.rail-collapsed.rail-peek .rail-pin { display: inline-flex; }

  #railPeekZone { position: fixed; top: 0; right: 0; bottom: 0; width: 12px; z-index: 59; }
  body:not(.rail-on) #railPeekZone,
  body:not(.rail-collapsed) #railPeekZone { display: none; }
  /* Collapsed the rail rides the grid's 0-width column; peeking floats it over
     the content from the right edge, no layout shift. */
  body.rail-on.rail-collapsed.rail-peek #orderRail {
    position: fixed; top: 0; right: 0; bottom: 0; width: 300px; z-index: 60;
    border-left: 1px solid var(--border);
    box-shadow: -16px 0 44px rgba(0, 0, 0, 0.22);
  }
}

/* ---- phones: no rail at all — the pinned Cook tab covers the same need ---- */
@media (max-width: 720px) {
  #orderRail,
  #railPeekZone { display: none !important; }
}
/* Never drawn outside a peek — stated once here too, so a phone or a pinned
   rail cannot show it through some later rule. */
body:not(.rail-peek) .rail-pin { display: none; }