body{font-family:var(--sans);font-variant-numeric:tabular-nums}
h1{letter-spacing:-.025em}
code,pre{font-variant-numeric:tabular-nums}
.card,section.card{border-color:var(--line)}
button,.ghost,.btnlink,.lbl,a.back,.ni,.chip{transition:background .16s ease,border-color .16s ease,
  color .16s ease,transform .12s ease,box-shadow .16s ease}
button:hover,.ghost:hover,.lbl:hover{background:var(--inset);border-color:var(--line-strong)}
button:active,.ghost:active,.lbl:active,.chip:active{transform:translateY(1px)}
:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:2px;border-radius:6px}
.ni{border-radius:8px}
.ni:hover{background:var(--inset);color:var(--ink)}
.ni.on{background:var(--rdy-bg);color:var(--rdy-ink);font-weight:600;box-shadow:inset 2px 0 0 var(--accent)}
.nitems{gap:14px}
.ngrp{display:flex;flex-direction:column;gap:1px}
.nlab{font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);padding:0 10px 5px}
.nfoot{margin-top:auto}
a{transition:color .16s ease}

/* ---- mobile: the in-shell rail got none of the collapse rules ----------
   The injected rail folds to a horizontal strip under 860px; the two pages
   that build the rail into their own shell never got the matching rules, so
   the grouped nav stayed a 542px column inside a 390px viewport and pushed the
   whole page sideways. Wide tables scroll inside themselves rather than
   dragging the document with them. */
@media(max-width:860px){
  /* once the shell stacks, the content column has to take the viewport rather
     than the width its widest row would like - otherwise the header row sets
     an 818px floor and drags the whole document sideways. */
  .shell{flex-direction:column}
  .col{width:100%;min-width:0;max-width:100%}
  .hrow,.hrow.toolbar,.qlead{flex-wrap:wrap;max-width:100%}
  /* the order rows are a real grid with real columns; on a phone they scroll
     inside their band rather than squeezing to illegibility or dragging the
     page. Same treatment as the wide tables above. */
  .qgrp .grows,.qgrp .colhead{overflow-x:auto}
  .rail .nitems{flex-direction:row;flex-wrap:wrap;gap:8px}
  .rail .ngrp{flex-direction:row;flex-wrap:wrap;gap:2px}
  .rail .nlab{display:none}
  .rail .nfoot{margin-top:0}
  table{display:block;overflow-x:auto;max-width:100%}
}

/* ---- one type size per role ------------------------------------------
   Page titles were 17, 18, 19, 20 and 21px across the pages - five sizes for
   one role, which is what makes the portal read as several products stitched
   together rather than one. */
h1{font-size:21px;font-weight:600;letter-spacing:-.025em}
@media(max-width:860px){h1{font-size:19px}}

/* ---- elevation is declared once --------------------------------------
   A 1px border under a wide soft shadow is the ghost card: two elevation
   systems arguing. At this density the border is the more legible of the two,
   so it keeps the job and the ambient shadow goes. Shadow is reserved for
   things that genuinely float - the armed commit bar, menus, dialogs. */
.card,section.card{box-shadow:none}
.pmenu[open] .pmenu-list{box-shadow:0 10px 30px -12px rgba(25,26,23,.28)}

/* a booked pickup reads from its fill, not from a bar down its edge */
.booked{border-left-width:1px}

/* width animates layout; the same motion on transform does not */
.bar span{transition:transform .2s ease-out;transform-origin:left}

/* The queue's state colours, zones, tiles and commit bar live in ui/src/queue.css. */

/* ---- one header row on every page -------------------------------------
   The dashboard skill's header: title left, controls right, one sticky row.
   The one-line explanation under a title moves into the title's tooltip (the
   script below); counts and other live figures stay on screen. */
header:has(> h1, > .hrow > h1){position:sticky;top:0;z-index:20;display:flex;align-items:center;flex-wrap:wrap;
  flex-direction:row;justify-content:flex-start;text-align:left;
  gap:8px 12px;min-height:54px;box-sizing:border-box;padding:10px 26px;margin:0;
  background:var(--veil);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--line)}
header:has(> h1, > .hrow > h1) .hrow{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:0;flex:1 1 auto}
header h1{font-size:18px;font-weight:600;letter-spacing:-.02em;margin:0}
header h1[data-tip]{position:relative;cursor:help;border-radius:6px}
header h1[data-tip]:hover::after,header h1[data-tip]:focus-visible::after{content:attr(data-tip);position:absolute;
  left:0;top:calc(100% + 8px);z-index:40;width:max-content;max-width:340px;white-space:normal;
  font:400 12px/1.45 var(--sans);letter-spacing:0;padding:6px 9px;border-radius:6px;
  background:var(--tip-bg);color:var(--tip-ink);box-shadow:var(--sh-pop)}
@media(max-width:860px){header:has(> h1, > .hrow > h1){padding:10px 14px}}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}