/* ==========================================================================
   Orders — the Deliveries page, By Sea and By Road (deliveries.html)

   Spec: build/pages.md §4

   Only what is this page's own: the register's column shares, the one
   reading orders.css does not name (a document that is released or signed,
   read in the success ink), and how the page folds at 1100 / 768 / 480.
   Everything another Orders page also says — the hub strip, the readings,
   the mode word, the hold word, the bulk bar, the gear dialogs — is in
   css/pages/orders.css. Prefix `shp-` for anything new; never an `.ord-*`.
   ========================================================================== */

/* ---------- Columns -----------------------------------------------------------
   Six 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. Mode & Route is the longest reading on the row — "Container 40 ft HC
   · Port Everglades → San Juan" with the container, vessel and bill of lading
   under it — so it takes the biggest share and still wraps on the two
   container rows at 1440; orders.css breaks it cleanly between readings.
   Milestone and Documents each carry a date or a word over a line of detail;
   the status column holds "Ready for Pickup" on one line and lets a hold word
   drop under the badge. The load sits last and is right-aligned by
   `.data-table`'s own last-column rule. The shares sum to 100 so the browser
   has no slack to hand out. */
.ord-table--shipments th.col-shp    { width: 15%; }
.ord-table--shipments th.col-route  { width: 26%; }
.ord-table--shipments th.col-when   { width: 16%; }
.ord-table--shipments th.col-docs   { width: 18%; }
.ord-table--shipments th.col-status { width: 14%; }
.ord-table--shipments th.col-load   { width: 11%; }

/* THE ORDER REFERENCE NEVER BREAKS INSIDE ITSELF. The shipment's sub-line is
   "ORD-2026-0047 | Henderson Residence", and a fixed column lets the browser
   break a reference at its own hyphens ("ORD-2026-" over "0047") before it
   breaks at the bar. So the line is a wrapping flex row of two readings: the
   reference with its bar, which never breaks, and the client, which wraps at
   its own spaces when the yard's name is long. When the two do not fit on one
   line the bar trails the first, the way a trailing dot closes a reading in
   orders.css, and the client opens the second. */
.ord-table--shipments td.col-shp .sub { display: flex; flex-wrap: wrap; align-items: baseline; }
.ord-table--shipments .shp-ref { white-space: nowrap; }
.ord-table--shipments .shp-who { min-width: 0; }

/* A reading's main line inside a two-line cell keeps the row's own 13px; the
   sub-line under it keeps the cell-stack's 11px even when it carries a
   reading of its own (the claim under Arrived, the overdue invoice under
   Collected) — a second line always drops a step (memory.md §4). */
.ord-table--shipments .cell-stack .sub .ord-reading { font-size: 11px; }
.ord-table--shipments .cell-stack .sub .ord-reading svg { width: 12px; height: 12px; }
.ord-table--shipments .cell-stack .sub .ord-linked { font-size: 11px; }
.ord-table--shipments .cell-stack .sub .ord-linked svg { width: 12px; height: 12px; }

/* A document that is RELEASED or SIGNED is a thing that happened, so its word
   takes the success ink and the weight a done reading carries — the same
   state the badge beside it would show (memory.md §19). The dot before it is
   the mark; the word is the reading. */
.shp-ok { color: var(--color-success-ink); font-weight: 600; }

/* The footer carries the count and, after it, where the truck UI is not: a
   subtle note that Deliveries plans the runs. It sits inside the register's
   card so the hub strip stays directly under the KPI summary, as on the other
   five registers. The pager app.js appends lands after both. */
.card-footer .shp-note {
  display: inline-flex; align-items: center; gap: 5px;
  flex: 1 1 auto; min-width: 0;
  font-size: 12px; color: var(--color-text-subtle);
}
.card-footer .shp-note svg { width: 13px; height: 13px; flex: none; }

/* The sub-line of the route and the documents cells may carry a link: into
   Deliveries for a truck's run, or the Owner's early release on the held
   container. A plain link in the link blue, nothing else — no button, no
   truck UI (the run is planned in that module, not here). */
.ord-table--shipments td.col-route .sub a,
.ord-table--shipments td.col-docs .sub a { color: var(--color-primary-600); font-weight: 500; }
.ord-table--shipments td.col-route .sub a:hover,
.ord-table--shipments td.col-docs .sub a:hover { color: var(--color-primary-700); }

/* The milestone's main line is a date or a short phrase and never breaks mid-
   figure: "Departed Sep 18 · ETA Oct 14" wraps between the two readings, not
   inside a date. */
.ord-table--shipments td.col-when .main { overflow-wrap: normal; }

/* ---------- Which shipments (supplier) -------------------------------------------
   The view bar is app.css's `.po-viewbar`; the page script shows one panel, and
   always All for a distributor, who has no bar. deliveries.html: a row at the
   top of the card, the views in groups — a caption over its options joined as
   one control (user, 2026-10-13). */
.shp-viewbar { align-items: flex-end; gap: 10px 12px; padding: 0 0 12px; margin-bottom: 12px; border-bottom: 1px solid var(--color-border); }
.shp-vgroup { display: flex; flex-direction: column; gap: 4px; }
/* Between groups: one view at a time — the two map stages are the one view
   that lights two options. Centred on the 32px control beside it. */
.shp-vor { line-height: 32px; font-size: 12px; font-style: italic; color: var(--color-text-subtle); }
.shp-vgroup__cap { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-subtle); }
/* The lit option is a white tab lifted off the grey track — no ring, no extra
   weight; two lit options read as two tabs, not one heavy box (user, 2026-10-13). */
.shp-vseg { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--color-control-border); border-radius: 6px; background: var(--color-control); }
.shp-vseg .po-viewbar__btn { gap: 6px; padding: 5px 10px; line-height: 16px; border-radius: 4px; white-space: nowrap; transition: color 120ms, background-color 120ms, box-shadow 120ms; }
.shp-vseg .po-viewbar__btn .count { font-size: 11px; padding: 0 6px; border-radius: 9px; background: color-mix(in oklab, var(--color-text) 9%, transparent); color: var(--color-text-muted); }
.shp-vseg .po-viewbar__btn.is-active { background: var(--color-surface); color: var(--color-text); font-weight: 500; box-shadow: 0 0 0 1px rgb(15 23 42 / 0.06), var(--shadow); }
.shp-vseg .po-viewbar__btn.is-active svg { color: var(--color-primary); }
.shp-vseg .po-viewbar__btn.is-active .count { background: var(--color-primary-50); color: var(--color-primary-700); }
/* deliveries.html: each tab's tools sit in a wrapper that shows with its tab
   (`data-for-tab`); the wrapper itself draws nothing, so the bar and the chips
   inside stay the strip's own flex items. */
.del-tools { display: contents; }
.del-tools[hidden] { display: none; }

/* LOADING THIS WEEK / NEXT WEEK: six columns on shares, as the register's.
   Container & Route carries the longest reading; Full is a figure; the status
   sits last, right-aligned by `.data-table`, with the one verb it waits on
   under the badge. The shipment's sub-line never breaks inside its reference. */
.shp-load-table th.col-shp    { width: 18%; }
.shp-load-table th.col-route  { width: 24%; }
.shp-load-table th.col-when   { width: 18%; }
.shp-load-table th.col-fill   { width: 10%; }
.shp-load-table th.col-money  { width: 15%; }
.shp-load-table th.col-status { width: 15%; }
.shp-load-table td.col-shp .sub { display: flex; flex-wrap: wrap; align-items: baseline; }
.shp-load-table .shp-ref { white-space: nowrap; }
.shp-load-table .cell-stack .sub .ord-reading { font-size: 11px; }
.shp-load-table .cell-stack .sub .ord-reading svg { width: 12px; height: 12px; }
.shp-load-table td.col-status .cell-stack { align-items: flex-end; }
.shp-load-table td.col-status .sub { margin-top: 6px; }
.shp-load-table tbody tr { cursor: pointer; }
/* A week with no trucks says so in one quiet line across the table. */
.shp-load-table tbody tr.shp-empty-row { cursor: default; }
.shp-load-table tbody td.shp-empty { padding: 34px 16px; text-align: center; color: var(--color-text-subtle); white-space: normal; }

/* THE MAP. Leaflet draws into the frame; the pins, routes and labels are ours. */
.shp-mapview__map { height: 720px; overflow: hidden; border-radius: 7px; background: var(--color-control); }
/* LOADING AND ARRIVED: the chart on the left, the list on its side (user,
   2026-10-13). The list gives up its 860px floor and wraps inside its column;
   below 1100px the chart stands over the list. */
.shp-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; align-items: start; }
.shp-split__map { height: 480px; overflow: hidden; border-radius: 7px; background: var(--color-control); }
.shp-split .shp-load-table { min-width: 0; }
@media (max-width: 1100px) {
  .shp-split { grid-template-columns: minmax(0, 1fr); }
  .shp-split__map { height: 340px; }
}
.shp-mapview__key { margin: 10px 0 0; font-size: 12px; }
.shp-mapview__key a { color: var(--color-primary-600); }
.shp-mapview__off {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 100%; margin: 0;
  font-size: 13px; color: var(--color-text-muted);
}
.shp-mapview__off svg { width: 18px; height: 18px; }
.shp-pin {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: 2px solid var(--color-primary); border-radius: 7px;
  background: var(--color-surface); color: var(--color-primary-700);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.shp-pin svg { width: 16px; height: 16px; }
.shp-pin--sea, .shp-pin--road { background: var(--color-primary); color: var(--color-surface); }
/* Arriving soon calls attention: amber, not a second blue (user, 2026-10-13). */
.shp-pin--in { background: var(--color-warn); border-color: var(--color-warn); color: var(--color-surface); }
.shp-pin--danger { border-color: var(--color-danger); color: var(--color-danger-ink); }
/* A yard is one small light-blue pin, never one per box: it marks where boxes
   load, not a box, and both of the licence's yards always show (user, 2026-10-13). */
.shp-pin--arrived { border-color: var(--color-success); color: var(--color-success-ink); }
.shp-pin--yard { width: 22px; height: 22px; border: 1.5px solid var(--color-primary); border-radius: 5px; background: var(--color-primary-50); color: var(--color-primary-700); cursor: pointer; }
.shp-pin--yard svg { width: 13px; height: 13px; }
.shp-pin__n {
  position: absolute; top: -8px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 5px; background: var(--color-text); color: var(--color-surface);
  font-size: 10px; font-weight: 600; line-height: 16px; text-align: center;
}
.shp-pin--key { width: 20px; height: 20px; border-width: 1.5px; border-radius: 5px; box-shadow: none; vertical-align: middle; }
.shp-pin--key svg { width: 12px; height: 12px; }
.shp-route { stroke: var(--color-primary); stroke-width: 3; fill: none; }
.shp-route--in { stroke: var(--color-warn); }
.shp-route--ahead { stroke-dasharray: 6 7; stroke-opacity: .6; }
.shp-port { stroke: var(--color-text-muted); stroke-width: 2; fill: var(--color-surface); fill-opacity: 1; }
.leaflet-tooltip.shp-tip { font: inherit; font-size: 12px; line-height: 1.45; border-radius: 7px; }
/* Zoomed out to the world, a truck's name shows on hover only (the trucks crowd Europe). */
.shp-far .leaflet-tooltip.shp-tip--road:not(.is-open) { display: none; }

/* ---------- Narrow screens --------------------------------------------------------
   Below 1100px the seven columns fight: the register keeps its desktop shares
   on a 980px table and scrolls sideways inside `.table-wrap` (the house
   pattern) instead of folding seven readings into forty-pixel columns. */
@media (max-width: 1100px) {
  .ord-table--shipments { min-width: 980px; }
  .shp-load-table { min-width: 860px; }
  /* FOUR TILES FOLD TO TWO BY TWO, every tile the same size, so $409,632 keeps
     its room. 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); }
  /* The map gives up height. */
  .shp-mapview__map { height: 400px; }
}
@media (max-width: 640px) {
  /* ...and one to a line on a phone. Restated because the rule above outweighs
     app.css's own and would otherwise carry the pair down to 320px. */
  .kpi-summary .kpi-summary__cards > .kpi { flex-basis: 100%; }
}
@media (max-width: 768px) {
  /* The count and the pager keep the footer's line; the Deliveries note drops
     to a full line of its own under them instead of squeezing to one word. */
  .tab-shell .card-footer { flex-wrap: wrap; }
  .card-footer .shp-note { order: 3; flex-basis: 100%; }
}