/* ==========================================================================
   Orders — the hub register (orders.html)

   Spec: build/pages.md §1

   Only what is this page's own: the register's column shares and how the
   page folds at 1100 / 640 / 480. Everything another
   Orders page also says — the hub strip, the readings, the hold word, the
   bulk bar itself, the gear dialogs — is in css/pages/orders.css.
   ========================================================================== */

/* ---------- Columns -----------------------------------------------------------
   Seven columns take shares of the table under `table-layout: fixed` (which
   `.data-table` sets), so they resize with the browser and never with the data.
   The Next column reads a date over a sentence with a document number and an
   amount, so it is given enough share to keep that sentence to two lines. Side
   & shipping is as wide — "Homeowner via Meridian Design Studio · Pickup" is as
   long as somebody typed it. The status sits last, right-aligned by
   `.data-table`'s own last-column rule, with room for "Awaiting Approval" and a
   hold word under it. No check column (owner, 2026-10-05: every act is on
   the order page); the shares sum to 100 so the browser has no slack to hand
   out. */
.ord-table--orders th.col-order    { width: 24%; }
.ord-table--orders th.col-ship     { width: 24%; }
.ord-table--orders th.col-next     { width: 24%; }
.ord-table--orders th.col-total    { width: 12%; }
.ord-table--orders th.col-status   { width: 16%; }
/* The step badge is a button that opens the step dialogue (app.css), as a
   material's state does on quote.html: the same badge, and a hover border is
   the only tell that it is pressable. */
.ord-step { position: relative; display: inline-block; vertical-align: middle; }
.ord-step-btn { cursor: pointer; line-height: inherit; }
.ord-step-btn:hover { border-color: currentColor; }
/* Placed against the window by ordStepOpen(), clear of the table's scroll box. */
.ord-step .dropdown-menu.req-step-pop { position: fixed; right: auto; transform: none; }
/* The Next column reads a date over a line that says what the date is for, so
   its sub-line may carry a link into Deliveries; the link is the sub-line's
   own blue and nothing else — a plain link, no button, no truck UI (the run
   is planned in that module, not here). */
.ord-table--orders td.col-next .sub a { color: var(--color-primary-600); }
.ord-table--orders td.col-next .sub a:hover { color: var(--color-primary-700); }
/* The Expired row's three verbs — Extend · Release · Cancel — are the user
   actions the status waits on (nothing is released on its own), written as
   words on the sub-line in the link blue, so they read as what can be done
   rather than as three buttons crammed into a 12% column. */
.ord-acts a { color: var(--color-primary-600); font-weight: 500; }
.ord-acts a:hover { color: var(--color-primary-700); }

/* ---------- The separator ------------------------------------------------------
   orders.css trails the `·` after every child but the last, so a reading that
   wraps leaves a dot hanging at the end of its first line. On this page the
   dot leads every child instead, and the reading is pulled 16px left and
   clipped by those 16px: the dot that would open a line falls in the clipped
   strip, so a wrapped line neither starts nor ends with a dot. The 16px is the
   dot's own box; its -5px right margin cancels the child's 5px gap. */
.ord-reading {
  margin-left: -16px;
  max-width: calc(100% + 16px);
  clip-path: inset(0 0 0 16px);
}
.ord-reading > *:not(:last-child)::after { content: none; }
.ord-reading > *::before {
  content: "·";
  flex: none; width: 16px; margin-right: -5px;
  text-align: center;
  color: var(--color-text-subtle);
  font-weight: 400;
}

/* ---------- Narrow screens --------------------------------------------------------
   Below 1100px the six columns fight: the register keeps its desktop shares
   on an 840px table and scrolls sideways inside `.table-wrap` (the house
   pattern) instead of folding six readings into forty-pixel columns. The
   KPI grid, the header's wrap and the sidebar's fold are app.css's. */
@media (max-width: 1100px) {
  .ord-table--orders { min-width: 840px; }
  /* FOUR TILES FOLD TO TWO BY TWO. app.css lets a folded KPI row flex-fill
     from a 160px basis, which on a tablet seats three tiles on the first line
     and stretches the fourth across the whole second — one tile three times
     the width of its neighbours, saying nothing more. Two to a line keeps
     every tile the same size, and a figure like $1,439,499 still has the room
     it needs. Said with the summary's own class ahead of the tile's, because
     app.css's `.grid:has(> .kpi) > .kpi` already weighs three classes. */
  .kpi-summary .kpi-summary__cards > .kpi { flex: 1 1 calc(50% - 8px); }
}
@media (max-width: 640px) {
  /* ...and one to a line on a phone, where two 131px tiles clip $1,439,499.
     app.css says the same at this width; restated because the rule above
     outweighs it and would otherwise carry the pair down to 320px. */
  .kpi-summary .kpi-summary__cards > .kpi { flex-basis: 100%; }
}