/* Freightools GPT — the phone (2026-11-10). Loaded after app.css and workspace.css on every app page.

   Adam: "a mobile application of shipments … inspired by the Wolt delivery application, with the map, and by the
   ChatGPT and Claude mobile applications, with the nice navigation … the chat is very clear, the conversations are
   always saved … easy navigation between the shipments and the copilot … mobile native feel."

   Under 761px the Atlas console becomes an app:
     * an APP BAR (the top bar, 52px): the menu, the screen's title, the screen's one action; a pushed screen (a
       shipment) leads with Back instead of the menu;
     * a TAB BAR (58px, at the thumb): Copilot · Shipments · Overview · Notifications — the active tab carries the short
       Freightools red tick of the sidebar's active item;
     * the DRAWER (the sidebar, like the ChatGPT and Claude apps): the workspace and its environment, New conversation,
       the sections, every saved conversation, the account;
     * COPILOT: the world map of the shipments on top and the conversation as a sheet under it — one clean chat once a
       conversation is under way;
     * SHIPMENTS: the map on top and the list as a sheet pulled over it by scrolling (the page's own scroll, so it has
       the device's physics), shipments as cards;
     * a SHIPMENT: its journey map on top and the page as a sheet over it.
   Nothing here changes a colour token: the three palettes stay in app.css (tests/ui/theme.test.ts). The red tick is the
   brand's one red; depth is a border or one soft shadow, never both; motion is transform and opacity, under 400ms, and
   stops for prefers-reduced-motion (app.css). Press feedback is :active; hover styles are not relied on.
   Behaviour: /static/mobile.js (the drawer's conversations, its edge swipe, the sheet's handle). */

:root {
  --appbar-h: 52px;
  --tabbar-h: 58px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --sheet-r: 22px;
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-press: cubic-bezier(0.23, 1, 0.32, 1);
}

/* The phone's own parts never show on a desk. */
.tabbar, .appbar__title, .appbar__back, .appbar__actions, .sidebar__close, .sidebar__env, .nav-new, .nav-history, .map-stage--sheet, .ws-sheet-handle { display: none; }

@media screen and (max-width: 760px) {
  /* ============================================================ the platform floor ============================= */
  html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  :root { --copilot-font: 16px; }
  body.app { font-size: 15px; line-height: 1.5; }
  a, button, summary, label, [role='tab'], [role='menuitem'] { touch-action: manipulation; }
  /* a control's label is not content: no selection or callout on a long press (addresses, references and answers stay selectable) */
  button, summary, .btn, .icon-btn, .tabbar__tab, .nav-link, .ws-queue, .ws-dept__tab, .seg, .copilot-suggestion, .appbar__back { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  /* the press answers under the finger */
  .btn, .icon-btn, .topbar__menu-btn, .appbar__btn, .appbar__back, .nav-link, .ws-queue, .ws-icon-btn, .copilot-suggestion, .copilot-composer__send, .arrival-card, .stat, .copilot-threads__item > a { transition: transform 140ms var(--ease-press), background-color 160ms ease, color 160ms ease, border-color 160ms ease; }
  .btn:active, .icon-btn:active, .topbar__menu-btn:active, .appbar__btn:active, .appbar__back:active, .ws-icon-btn:active, .copilot-composer__send:active { transform: scale(0.94); }
  .nav-link:active, .ws-queue:active, .copilot-suggestion:active, .arrival-card:active, a.stat:active, .copilot-threads__item > a:active { transform: scale(0.98); }

  /* ============================================================ the shell ====================================== */
  .app-shell { min-height: 100vh; min-height: 100dvh; }
  .main { min-height: 100vh; min-height: 100dvh; }
  .app:has(.tabbar) .main { padding-bottom: calc(var(--tabbar-h) + var(--safe-b)); }
  .content { padding: 16px max(16px, var(--safe-r)) 28px max(16px, var(--safe-l)); }

  /* ---- the app bar ---- */
  .app-shell .topbar { position: sticky; top: 0; z-index: 30; gap: 0; min-height: calc(var(--appbar-h) + var(--safe-t)); padding: var(--safe-t) max(4px, var(--safe-r)) 0 max(4px, var(--safe-l)); view-transition-name: appbar; }
  .topbar__menu-btn, .appbar__back, .appbar__btn { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--text); cursor: pointer; }
  .topbar__menu-btn .icon, .appbar__btn .icon { width: 22px; height: 22px; }
  .topbar__menu-btn:active, .appbar__back:active, .appbar__btn:active { background: var(--surface-3); }
  .topbar--pushed .topbar__menu-btn { display: none; }
  .appbar__title { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; padding: 0 6px; color: var(--text); font-size: 16px; font-weight: 600; letter-spacing: -0.015em; }
  .appbar__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .appbar__env { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--surface-3); color: var(--text-muted); font-size: 11.5px; font-weight: 600; letter-spacing: 0; }
  .appbar__actions { display: flex; align-items: center; flex: none; }
  .appbar__form { display: flex; margin: 0; }
  .app-shell .topbar .crumbs, .app-shell .topbar > .segmented, .app-shell .topbar .theme-toggle, .app-shell .topbar .copilot-toggle, .app-shell .topbar .topbar__avatar { display: none; }
  /* the notifications are a tab here */
  .app:has(.tabbar) .topbar .bell { display: none; }
  .menu-panel { top: calc(var(--appbar-h) + var(--safe-t) + 4px); }

  /* ---- the tab bar ---- */
  .tabbar { position: fixed; inset-inline: 0; bottom: 0; z-index: 40; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); height: calc(var(--tabbar-h) + var(--safe-b)); padding: 0 max(4px, var(--safe-r)) var(--safe-b) max(4px, var(--safe-l)); border-top: 1px solid var(--border); background: var(--topbar-bg); view-transition-name: tabbar; transition: transform 220ms var(--ease-press); }
  .tabbar__tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; color: var(--text-muted); font-size: 11px; font-weight: 500; line-height: 1.2; text-decoration: none; transition: color 160ms ease; }
  .tabbar__icon { position: relative; display: grid; place-items: center; width: 30px; height: 26px; transition: transform 140ms var(--ease-press); }
  .tabbar__icon .icon { width: 23px; height: 23px; stroke-width: 1.6; }
  .tabbar__tab:active .tabbar__icon { transform: scale(0.9); }
  .tabbar__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar__tab[aria-current='page'] { color: var(--text); font-weight: 600; }
  .tabbar__tab[aria-current='page'] .icon { stroke-width: 2; }
  /* the active tab: the short Freightools red tick (the bar over the "T"), on the bar's top edge */
  .tabbar__tab[aria-current='page']::before { content: ''; position: absolute; top: 0; left: 50%; width: 20px; height: 3px; margin-left: -10px; border-radius: 0 0 3px 3px; background: var(--brand-red); }
  .tabbar__badge { position: absolute; top: -4px; inset-inline-start: 16px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--accent-contrast); box-shadow: 0 0 0 2px var(--topbar-bg); font-size: 10.5px; font-weight: 600; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
  /* the keyboard is up (<html class="kb-open">, mobile.js reads the visible height): the bar steps out so the field sits
     on the keyboard. Not :focus — a field can hold the focus with no keyboard (set by script, or after Android's Back). */
  :root.kb-open .tabbar { transform: translateY(100%); }
  :root.kb-open .app:has(.tabbar) .main { padding-bottom: 0; }
  .toasts { bottom: calc(var(--tabbar-h) + var(--safe-b) + 10px); }

  /* ---- the drawer (the sidebar) ---- */
  .sidebar { width: min(86vw, 340px); padding: calc(10px + var(--safe-t)) 12px calc(10px + var(--safe-b)) max(12px, var(--safe-l)); z-index: 70; transition: transform 260ms var(--ease-sheet); will-change: transform; overscroll-behavior: contain; }
  body.nav-open .sidebar { transition-duration: 380ms; }
  .sidebar.is-dragging { transition: none; }
  .sidebar-backdrop { display: block; z-index: 65; opacity: 0; pointer-events: none; transition: opacity 260ms ease; }
  body.nav-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }
  .sidebar__head { margin: 0 0 12px; padding-inline-start: 6px; }
  .sidebar__close { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; margin-inline-start: auto; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--text-muted); cursor: pointer; }
  .sidebar__close:active { background: var(--nav-hover); transform: scale(0.94); }
  .workspace { margin: 0 0 8px; padding: 12px; border-radius: 14px; }
  .workspace__avatar { width: 36px; height: 36px; font-size: 12.5px; }
  .workspace__text strong { font-size: 14.5px; }
  .workspace__text small { font-size: 12.5px; }
  .sidebar__env { display: block; margin: 0 0 14px; }
  .sidebar__env .segmented { display: flex; width: 100%; }
  .sidebar__env .seg { flex: 1 1 0; justify-content: center; min-height: 38px; font-size: 13.5px; text-transform: capitalize; }
  .leftnav { gap: 16px; margin: 0 -12px; padding: 0 12px 8px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .nav-group { gap: 2px; }
  .nav-group__label { margin: 0 0 4px; padding: 0 12px; font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
  .nav-link { min-height: 46px; gap: 13px; padding: 10px 12px; border-radius: 12px; font-size: 15px; color: var(--nav-text-strong); }
  .nav-link__icon { width: 20px; height: 20px; color: var(--text-muted); }
  .nav-link[aria-current='page'] .nav-link__icon { color: inherit; }
  .nav-link[aria-current='page']::before { inset-inline-start: -12px; height: 22px; margin-top: -11px; }
  .nav-new { display: block; margin: 0; }
  .nav-new__btn { width: 100%; border: 1px solid var(--border); background: var(--surface); font-family: inherit; font-weight: 600; text-align: start; cursor: pointer; }
  .nav-new__btn .nav-link__icon { color: inherit; }
  .nav-history { display: block; }
  .nav-history__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
  .nav-history .copilot-threads__item > a { display: flex; align-items: center; gap: 8px; max-width: none; min-height: 44px; padding: 9px 12px; border: 0; border-radius: 12px; background: transparent; color: var(--text); font-size: 15px; font-weight: 400; text-decoration: none; }
  .nav-history .copilot-threads__item > a[aria-current='page'] { background: var(--nav-active-bg); font-weight: 600; }
  .nav-history .copilot-threads__item > a:active { background: var(--nav-hover); }
  /* the six latest; "Show all" opens the rest (mobile.js SHOWN) */
  .nav-history__list:not(.is-all) > li:nth-child(n + 7) { display: none; }
  .nav-history__more { display: block; width: 100%; min-height: 40px; padding: 8px 12px; border: 0; border-radius: 12px; background: transparent; color: var(--accent-ink); font: inherit; font-size: 14px; font-weight: 500; text-align: start; cursor: pointer; }
  .nav-history__more[hidden] { display: none; }
  .nav-history__more:active { background: var(--nav-hover); }
  .nav-history__note { margin: 0; padding: 6px 12px; color: var(--text-muted); font-size: 13.5px; }
  .nav-history__note[hidden] { display: none; }
  .sidebar-tip { display: none; }
  .sidebar__base { padding-top: 8px; border-top: 1px solid var(--sidebar-border); }
  .sidebar__base .nav-link { min-height: 46px; }
  .account-menu__btn { min-height: 52px; }
  .account-menu__name { font-size: 14.5px; }
  .account-menu__role { font-size: 12.5px; }
  .account-bar__cog { width: 44px; height: 44px; }

  /* ============================================================ Copilot ======================================== */
  /* The screen does not scroll: the map, then the conversation's sheet; the messages scroll inside it. */
  body:has(.copilot-home) { overflow: hidden; }
  /* --vvh: the visible height (mobile.js), for a phone whose keyboard does not resize the page */
  .app:has(.copilot-home) .main { height: 100vh; height: 100dvh; height: var(--vvh, 100dvh); min-height: 0; }
  .app:has(.copilot-home) .content { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; max-width: none; padding: 0; }
  .content:has(.copilot-home) > #flash:empty { display: none; }
  .content:has(.copilot-home) > #flash { padding: 8px 16px 0; }
  .page-head.page-head--copilot { display: none; }
  .copilot-home { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  .copilot-home > .arrivals { display: none; }
  .map-stage.map-stage--home { display: flex; flex-direction: column; flex: 1 1 auto; height: auto; min-height: 0; border: 0; border-radius: 0; }
  .map-stage--home > .map-canvas { position: relative; inset: auto; flex: 1 1 auto; min-height: 96px; }
  .map-stage--home > .copilot-overlay { position: relative; inset: auto; left: auto; bottom: auto; top: auto; z-index: 10; flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; width: auto; max-width: none; max-height: none; margin-top: calc(-1 * var(--sheet-r)); padding: 22px max(16px, var(--safe-r)) 10px max(16px, var(--safe-l)); border-radius: var(--sheet-r) var(--sheet-r) 0 0; background: var(--surface); box-shadow: 0 -8px 28px rgba(9, 47, 66, 0.1); transform: none; pointer-events: auto; }
  .copilot-greeting { margin: 0 0 14px; text-align: start; pointer-events: auto; }
  .copilot-greeting h2 { font-size: 23px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; text-shadow: none; text-wrap: balance; }
  .copilot-greeting p { margin: 5px 0 0; font-size: 14px; line-height: 1.45; text-shadow: none; text-wrap: pretty; }
  .copilot--home .copilot__dock { display: flex; flex-direction: column; padding: 0; background: none; }
  /* the suggestions lead (above the field, in reach), as full rows */
  .copilot--home .copilot-suggestions { order: 1; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 6px; margin: 0 0 12px; }
  .copilot--home .copilot-suggestion { display: flex; width: 100%; min-height: 48px; gap: 12px; padding: 10px 14px; border: 0; border-radius: 14px; background: var(--surface-2); font-size: 15px; font-weight: 500; text-align: start; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .copilot--home .copilot-suggestion .icon { width: 19px; height: 19px; }
  .copilot--home .copilot__status { order: 2; margin: 0 0 4px; padding: 0 6px; text-shadow: none; }
  .copilot--home .copilot__status:empty { min-height: 0; margin: 0; }
  .copilot--home .copilot__composer { order: 3; }
  .copilot--home .copilot-composer__box { padding: 10px 8px 8px 16px; border: 1px solid var(--border-strong); border-radius: 22px; background: var(--surface); box-shadow: 0 2px 12px rgba(9, 47, 66, 0.06); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .copilot--home .copilot-composer textarea[data-copilot-input] { min-height: 1.5em; max-height: 9em; font-size: 16px; line-height: 1.5; }
  /* the hint stays on one line, so the field starts one line high */
  .copilot--home .copilot-composer textarea[data-copilot-input]::placeholder { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .copilot--home .copilot-composer__bar { min-height: 38px; margin-top: 4px; }
  .copilot--home .copilot-composer__attach.icon-btn { width: 38px; height: 38px; margin-inline-start: -8px; border-radius: 50%; }
  .copilot--home .copilot-composer__send, .copilot--home .copilot-composer__stop { width: 38px; height: 38px; border-radius: 50%; }
  .copilot--home .copilot-composer__foot--home { order: 4; margin: 8px 0 0; font-size: 12px; text-align: center; text-shadow: none; text-wrap: balance; }
  /* typing in the empty state: the suggestions, the second line and the note give the field the room */
  :root.kb-open .copilot--home:not(:has(.copilot-msg)) .copilot-suggestions, :root.kb-open .copilot--home .copilot-composer__foot--home, :root.kb-open .copilot-greeting p { display: none; }

  /* a conversation under way: one clean chat, no map behind it */
  .map-stage--home:has(.copilot-msg) > .map-canvas, .map-stage--home:has(.copilot-msg) > .map-topline, .map-stage--home:has(.copilot-msg) > .map-controls, .map-stage--home:has(.copilot-msg) > .map-legend, .map-stage--home:has(.copilot-msg) > .map-card { display: none; }
  .map-stage--home:has(.copilot-msg) { background: var(--surface); }
  .map-stage--home > .copilot-overlay:has(.copilot-msg) { display: flex; flex-direction: column; flex: 1 1 auto; top: auto; min-height: 0; overflow: hidden; max-width: none; margin-top: 0; padding: 0; border-radius: 0; box-shadow: none; }
  .copilot-overlay:has(.copilot-msg) > .copilot--home { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  .copilot--home > .copilot__budget, .copilot--home > .copilot__long { margin: 8px 16px; }
  .copilot--home:has(.copilot-msg) .copilot__messages { flex: 1 1 auto; min-height: 0; max-height: none; margin: 0; padding: 16px max(16px, var(--safe-r)) 12px max(16px, var(--safe-l)); gap: 20px; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .copilot--home .copilot-msg--assistant { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .copilot--home .copilot-msg__avatar { display: none; }
  .copilot--home .copilot-msg--user > .copilot-msg__body { max-width: 86%; margin-inline-start: 0; padding: 10px 15px; border-radius: 20px 20px 6px 20px; background: var(--surface-3); }
  .copilot--home .copilot-msg--proposal { padding-inline-start: 0; }
  .copilot--home:has(.copilot-msg) .copilot__dock { flex: none; padding: 6px max(12px, var(--safe-r)) 8px max(12px, var(--safe-l)); }
  .copilot--home:has(.copilot-msg) .copilot-composer__foot--home { display: none; }

  /* ---- the map's own chrome on a phone ---- */
  .map-topline { inset-inline: 12px; top: 12px; }
  .map-filter { min-height: 36px; padding: 0 10px; border-radius: 999px; font-size: 13px; }
  .map-filter .icon { flex: none; }
  .map-filter select { max-width: 132px; font-size: 16px; }
  .map-topline > * { min-width: 0; }
  .map-filter { flex: none; }
  .map-live { flex: 0 1 auto; min-height: 36px; padding: 0 12px; border-radius: 999px; font-size: 13px; white-space: nowrap; }
  .map-live > [data-fleet-summary-text] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .map-live__dot { flex: none; }
  .map-controls { inset-inline-end: 12px; top: auto; bottom: calc(var(--sheet-r) + 12px); border-radius: 12px; }
  .map-controls .icon-btn { width: 40px; height: 40px; border-radius: 9px; }
  /* two fingers zoom the map; the one button left brings every shipment back into view */
  .map-controls [data-fleet-zoom='in'], .map-controls [data-fleet-zoom='out'] { display: none; }
  .map-legend { inset-inline-start: 12px; bottom: calc(var(--sheet-r) + 8px); font-size: 10.5px; }
  .map-legend > span:not([data-fleet-attribution]) { display: none; }
  .map-stage--overview .map-controls, .map-stage--overview .map-legend { bottom: 12px; }
  /* the Copilot's map is the backdrop: the shipment in focus alone rides on it (the filter and the count are on Shipments) */
  .map-stage--home > .map-topline { display: none; }
  .map-stage.map-stage--home .map-card { top: 12px; }
  /* the shipment in focus: one row — the route and its reference, the arrival, the share of the journey; the row opens it */
  .map-stage .map-card { top: 58px; inset-inline: 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1px 12px; width: auto; padding: 12px 14px; border-radius: 16px; background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .map-stage .map-card[hidden] { display: none; }
  .map-card__eyebrow, .map-card__vessel { display: none; }
  .map-card__route { grid-column: 1; justify-content: flex-start; font-size: 15px; }
  .map-card__ref { grid-column: 1; margin: 0; font-size: 12px; }
  .map-card__meta { grid-column: 2; grid-row: 1 / span 2; flex-direction: column-reverse; align-items: flex-end; gap: 1px; font-size: 12px; }
  .map-card__meta > span:last-child { color: var(--text); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .map-card__progress { grid-column: 1 / -1; margin: 9px 0 0; }
  .map-card__link { position: absolute; inset: 0; margin: 0; padding: 0; border: 0; border-radius: 16px; opacity: 0; }
  .map-stage .map-card:active { transform: scale(0.985); transition: transform 140ms var(--ease-press); }

  /* ============================================================ Shipments ====================================== */
  /* The map on top, the list as a sheet over it. The page scrolls: the map stays (sticky) and the sheet rides up over
     it with the device's own scroll physics; the handle steps between the two rests (mobile.js). */
  .app:has(.map-stage--sheet) .content--full { padding: 0; }
  .map-stage.map-stage--sheet { display: block; position: sticky; top: calc(var(--appbar-h) + var(--safe-t)); z-index: 0; flex: none; height: 44vh; height: 44dvh; min-height: 220px; border: 0; border-radius: 0; }
  .map-stage--sheet .map-filter strong, .map-stage--sheet .map-filter__sep { display: none; }

  /* at least a screen tall, so even a short list can be pulled up over the map */
  .map-stage--sheet + .ws { min-height: calc(100vh - var(--appbar-h) - var(--tabbar-h)); min-height: calc(100dvh - var(--appbar-h) - var(--safe-t) - var(--tabbar-h) - var(--safe-b)); position: relative; z-index: 1; margin-top: calc(-1 * var(--sheet-r)); padding: 0 max(12px, var(--safe-r)) 0 max(12px, var(--safe-l)); border-radius: var(--sheet-r) var(--sheet-r) 0 0; background: var(--bg); box-shadow: 0 -8px 28px rgba(9, 47, 66, 0.1); }
  .ws-sheet-handle { display: block; flex: none; width: 100%; height: 24px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; touch-action: manipulation; }
  .ws-sheet-handle > span { display: block; width: 38px; height: 4px; margin: 0 auto; border-radius: 2px; background: var(--border-strong); transition: transform 140ms var(--ease-press), background-color 160ms ease; }
  .ws-sheet-handle:active > span { transform: scaleX(1.25); background: var(--text-muted); }

  /* the command bar: search, filters and the menu on one row; the department and New shipment on the next */
  .ws .ws-bar { position: static; flex-wrap: wrap; gap: 8px; min-height: 0; padding: 2px 0 10px; border-bottom: 0; background: transparent; }
  /* the search takes the first row with the two buttons (2 x 44px + 2 gaps) */
  .ws .ws-search { order: 1; flex: 1 1 calc(100% - 104px); min-width: 0; max-width: none; height: 44px; padding: 0 14px; border-radius: 14px; }
  .ws .ws-search kbd { display: none; }
  .ws .ws-bar > .ws-icon-btn[data-ws-toggle-filters] { order: 2; }
  .ws .ws-bar > .ws-more { order: 3; }
  .ws .ws-bar .ws-icon-btn { width: 44px; height: 44px; border-radius: 14px; }
  /* a layout of columns is a desk's tool: on the phone a shipment is a card */
  .ws .ws-bar > .ws-icon-btn[data-ws-columns] { display: none; }
  .ws .ws-dept { order: 4; flex: 1 1 0; height: 40px; border-radius: 12px; }
  .ws .ws-dept__tab { border-radius: 9px; font-size: 13.5px; }
  .ws .ws-bar .ws-new { order: 5; margin: 0; }
  .ws .ws-new .btn { min-height: 40px; border-radius: 12px; font-size: 13.5px; }

  /* the queues as chips */
  .ws .ws-queuebar { min-height: 0; margin: 0 calc(-1 * max(12px, var(--safe-r))) 0 calc(-1 * max(12px, var(--safe-l))); border-bottom: 0; }
  .ws .ws-queues { gap: 8px; padding: 0 12px 6px; scroll-snap-type: x proximity; scroll-padding-inline: 12px; overscroll-behavior-x: contain; }
  .ws .ws-queue { flex: none; min-height: 36px; padding: 0 13px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: 13.5px; scroll-snap-align: start; }
  .ws .ws-queue[aria-current] { border-color: var(--accent-solid); background: var(--accent-solid); color: var(--accent-solid-ink); }
  .ws .ws-queue[aria-current] .ws-queue__n { background: transparent; color: inherit; opacity: 0.8; }
  .ws .ws-queue__n { min-width: 0; padding: 0; background: transparent; font-size: 12.5px; }

  /* a shipment: who, the route, the date, where it stands, what is next */
  .ws .ws-row { margin: 10px 0; border-radius: 18px; transition: transform 160ms var(--ease-press); }
  .ws .ws-row:active { transform: scale(0.985); }
  .ws .ws-row > td { padding: 14px 16px 0; }
  .ws .ws-row > td:last-child { padding-bottom: 14px; }
  .ws .ws-row .ws-sel { display: none; }
  .ws .ws-row .ws-c--id { padding-inline-start: 16px; padding-inline-end: 52px; }
  .ws .ws-row .ws-c--more { top: 8px; inset-inline-end: 6px; }
  .ws .ws-rowmenu__btn { width: 44px; height: 44px; border-radius: 12px; }
  .ws .ws-id__main { font-size: 16px; letter-spacing: -0.01em; line-height: 1.3; }
  .ws .ws-id__meta { font-size: 12.5px; }
  .ws .ws-harbor { font-size: 14.5px; }
  .ws .ws-cap { font-size: 12.5px; }
  .ws .ws-row .ws-c--journey { padding-inline-end: 112px; }
  .ws .ws-row .ws-c--date { inset-inline-end: 16px; margin-top: -58px; }
  .ws .ws-date { font-size: 22px; letter-spacing: -0.03em; }
  .ws .ws-row .ws-c--steps, .ws .ws-row .ws-c--next { margin: 14px 16px 0; padding: 14px 0 0; }
  .ws .ws-step__label { font-size: 11px; }
  .ws .ws-next__title { font-size: 14.5px; }
  .ws .ws-next__ctx { font-size: 12.5px; }
  .ws .ws-row .ws-c--next:last-child, .ws .ws-row .ws-c--owner { padding-bottom: 14px; }
  /* nobody to name: the row gives its place to the shipment */
  .ws .ws-row .ws-c--owner:has(.is-empty) { display: none; }
  .ws .ws-row:has(.ws-c--owner .is-empty) .ws-c--next { padding-bottom: 2px; }
  .ws .ws-empty { padding: 28px 8px; }
  /* the pager ends the list instead of riding over it */
  .ws .ws-pager { position: static; margin: 6px 0 0; padding: 6px 4px; border-top: 0; background: transparent; }
  .ws .ws-pager .ws-icon-btn { width: 40px; height: 40px; }
  .ws-ask { display: none; }
  .ws .ws-foot, .ws:has(~ .ws-ask) .ws-foot { padding: 14px 4px 18px; font-size: 12px; }

  /* ============================================================ a shipment ===================================== */
  /* Its journey map on top, the page as a sheet over it (the Overview tab, where the map is). The sheet's ground is one
     layer laid under the page's parts, so the map never shows between them. */
  .page-head--detail .back-link { display: none; }
  .page-head--detail h1.mono { font-size: 24px; }
  .page-head.page-head--detail .page-sub { font-size: 13px; }
  .status-note { font-size: 13.5px; }
  .content:has(> #tab-body .journey__map) { --journey-h: max(38vh, 200px); position: relative; display: flex; flex-direction: column; padding-top: 0; }
  @supports (height: 1dvh) { .content:has(> #tab-body .journey__map) { --journey-h: max(38dvh, 200px); } }
  .content:has(> #tab-body .journey__map) > #tab-body, .content:has(> #tab-body .journey__map) .journey, .content:has(> #tab-body .journey__map) .journey__grid { display: contents; }
  .content:has(> #tab-body .journey__map) .journey__map { order: -2; position: sticky; top: calc(var(--appbar-h) + var(--safe-t)); z-index: 0; flex: none; height: var(--journey-h); margin: 0 calc(-1 * max(16px, var(--safe-r))) 0 calc(-1 * max(16px, var(--safe-l))); border: 0; border-radius: 0; }
  /* the sheet's rounded head, over the map's lower edge … */
  .content:has(> #tab-body .journey__map)::before { content: ''; order: -1; position: relative; z-index: 1; flex: none; height: var(--sheet-r); margin: calc(-1 * var(--sheet-r)) calc(-1 * max(16px, var(--safe-r))) 0 calc(-1 * max(16px, var(--safe-l))); border-radius: var(--sheet-r) var(--sheet-r) 0 0; background: var(--bg); box-shadow: 0 -8px 28px rgba(9, 47, 66, 0.1); }
  /* … and its ground: a box from the map's lower edge to the end of the page, so the map is covered (and cannot be
     touched) however long the page is */
  .content:has(> #tab-body .journey__map)::after { content: ''; position: absolute; z-index: 1; inset: var(--journey-h) 0 0 0; background: var(--bg); }
  .content:has(> #tab-body .journey__map) > *, .content:has(> #tab-body .journey__map) > #tab-body > *, .content:has(> #tab-body .journey__map) .journey__grid > :not(.journey__map) { position: relative; z-index: 2; }
  .content:has(> #tab-body .journey__map) > #flash:empty { display: none; }
  .tabs { margin-inline: calc(-1 * max(16px, var(--safe-r))) calc(-1 * max(16px, var(--safe-l))); padding-inline: 16px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: 16px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs > a { flex: none; min-height: 44px; font-size: 14.5px; scroll-snap-align: start; }

  /* ============================================================ Overview and the plain pages ==================== */
  .page-head h1 { font-size: 24px; letter-spacing: -0.03em; text-wrap: balance; }
  /* a plain page's title is in the app bar: said once (it stays in the page for a screen reader's headings) */
  .page-head:not(.page-head--atlas):not(.page-head--detail):not(.page-head--copilot) h1 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .page-head:not(.page-head--atlas):not(.page-head--detail):not(.page-head--copilot) .page-sub { margin-top: 0; }
  .page-head .page-sub { font-size: 14px; }
  .map-stage.map-stage--overview { height: 300px; margin-inline: calc(-1 * max(16px, var(--safe-r))) calc(-1 * max(16px, var(--safe-l))); border-inline: 0; border-radius: 0; }
  .stat__label { font-size: 13px; }
  .stat__note { font-size: 12.5px; }
  .arrivals__grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .arrival-card { padding: 14px 16px; border-radius: 16px; }
  .arrival-card__route { font-size: 14.5px; }
  .arrival-card__ref, .arrival-card__date small { font-size: 12px; }
  .arrival-card__date { font-size: 14.5px; font-weight: 600; }
  .section-head__link { font-size: 13.5px; }
  .btn { min-height: 44px; }
  .btn.small { min-height: 38px; }

  /* ---- the copilot's drawer (asked about a shipment from another screen): the whole screen ---- */
  .drawer.copilot-drawer { width: 100vw; max-width: none; padding-top: var(--safe-t); border: 0; border-radius: 0; transition: transform 380ms var(--ease-sheet), visibility 0s linear 380ms; }
  .drawer.copilot-drawer.is-open { transition: transform 380ms var(--ease-sheet), visibility 0s; }
  .copilot-drawer .drawer__head { min-height: var(--appbar-h); padding: 0 6px 0 16px; }
  .copilot-drawer .drawer__head .icon-btn { width: 44px; height: 44px; }
  .copilot-drawer .drawer__body { padding: 16px max(16px, var(--safe-r)) calc(12px + var(--safe-b)) max(16px, var(--safe-l)); }

  /* ---- one page fades into the next; the bars hold still ---- */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: em-screen-out 90ms ease-out both; }
  ::view-transition-new(root) { animation: em-screen-in 180ms var(--ease-press) both; }
  ::view-transition-group(appbar), ::view-transition-group(tabbar) { animation: none; }
}

@keyframes em-screen-out { to { opacity: 0; } }
@keyframes em-screen-in { from { opacity: 0; } }

@media screen and (max-width: 760px) and (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* A short phone: the Copilot's opening sheet keeps to the headline, and the map under it stays a map. */
@media screen and (max-width: 760px) and (max-height: 720px) {
  .copilot-greeting p { display: none; }
  .map-stage.map-stage--home .map-card { display: none; }
}

/* A phone on its side: the bars give the height back. */
@media screen and (max-width: 760px) and (max-height: 480px) {
  :root { --appbar-h: 44px; --tabbar-h: 48px; }
  .tabbar__label { display: none; }
  .map-stage.map-stage--sheet { height: 56vh; height: 56dvh; }
  .content:has(> #tab-body .journey__map) { --journey-h: max(56vh, 200px); }
  @supports (height: 1dvh) { .content:has(> #tab-body .journey__map) { --journey-h: max(56dvh, 200px); } }
}

/* viewport-fit=cover lets the page under a notch at every width. Over 760px (a large phone on its side) the page, the
   drawer and the copilot's panel keep clear of it. On a desk the insets are 0. */
@media screen and (min-width: 761px) {
  .app .main { padding-left: var(--safe-l); padding-right: var(--safe-r); }
  .drawer.copilot-drawer { padding-right: var(--safe-r); }
}
@media screen and (min-width: 761px) and (max-width: 959px) {
  .app .sidebar { padding-left: max(17px, var(--safe-l)); }
}

@media print { .tabbar { display: none !important; } }