@charset "UTF-8";
/* =========================================================================
   Container Portal
   -------------------------------------------------------------------------
   Grounded in the subject: ocean freight. Colours come off a container's
   painted steel — a weathered grey-green deck, deep harbour teal for ink,
   and one saturated oxide paint used for the single thing that matters:
   where the container is right now.

   Type does the bill-of-lading job. Saira Condensed is the port-signage and
   stencil voice for headings; IBM Plex Sans carries the reading; IBM Plex
   Mono carries every identifier — reference, B/L, seal, container number,
   date — because that is how shipping paperwork sets them and because digits
   that align are easier to check against a piece of paper.

   The boldness is spent in exactly one place: the stage trail.
   ========================================================================= */

:root {
  color-scheme: light;

  /* palette */
  --sea-deep: #10323f;   /* ink, masthead, hero */
  --hull: #1c4c5c;       /* mid steel, completed stages */
  --paint: #d4522a;      /* container oxide — the current position, and only that */
  --deck: #e4e9e8;       /* page ground: cool, sun-bleached */
  --panel: #fafbfa;      /* panels and cards */
  --rule: #c3cfce;       /* borders */
  --stencil: #6b8285;    /* muted marks, secondary text */

  --ok: #1c6b52;
  --warn: #8a5a00;

  --font-display: "Saira Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --radius: 3px;
  --shadow: 0 1px 0 rgba(16, 50, 63, .06), 0 8px 24px -18px rgba(16, 50, 63, .5);
  --wrap: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--deck);
  color: var(--sea-deep);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  /* Faint horizon band at the top of the deck — the sea, not a gradient for
     its own sake. */
  background-image: linear-gradient(180deg, #dbe3e2 0, var(--deck) 220px);
  background-repeat: no-repeat;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: .005em;
  margin: 0 0 .35em;
}
h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem); }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1rem; }

a { color: var(--hull); text-underline-offset: .18em; }
a:hover { color: var(--paint); }

:focus-visible {
  outline: 3px solid var(--paint);
  outline-offset: 2px;
  border-radius: 1px;
}

.mono { font-family: var(--font-mono); font-variant-ligatures: none; }
.subtle { color: var(--stencil); }
.muted { color: var(--stencil); font-size: .875rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* Eyebrows are stencilled: caps, tracked out, small. Port signage. */
.eyebrow {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .75rem;
  font-weight: 600;
  color: var(--stencil);
  margin: 0 0 .4rem;
}
.eyebrow a { color: inherit; }

.lede { color: var(--hull); font-size: 1.02rem; margin: 0; }
.hint { color: var(--stencil); font-size: .85rem; line-height: 1.5; }
small.hint { display: block; margin-top: .3rem; }

/* ---------------------------------------------------------------- masthead */

.masthead {
  background: var(--sea-deep);
  color: #eaf0ef;
  border-bottom: 3px solid var(--paint);
}
.masthead-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 12px 24px;
  flex-wrap: wrap;
}
.wordmark {
  display: inline-flex; align-items: center; gap: 9px;
  color: inherit; text-decoration: none;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 1rem;
  font-weight: 700;
}
/* The mark is a container end: three ribs. */
.wordmark-mark {
  width: 22px; height: 16px;
  border: 1.5px solid #eaf0ef;
  background-image: repeating-linear-gradient(90deg, #eaf0ef 0 1.5px, transparent 1.5px 5px);
  background-size: 100% 100%;
  background-position: 3px 0;
  background-repeat: no-repeat;
}
.wordmark-thin { font-weight: 500; opacity: .72; margin-left: .15em; }

.nav-links { display: flex; gap: 18px; margin-right: auto; flex-wrap: wrap; }
.nav-links a {
  color: #cfdcda; text-decoration: none;
  font-size: .9rem; padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover { color: #fff; border-bottom-color: var(--paint); }

.masthead-user { display: flex; align-items: center; gap: 14px; font-size: .85rem; }
.masthead-who { color: #cfdcda; }
.masthead .btn-link { color: #cfdcda; }
.masthead .btn-link:hover { color: var(--paint); }

.main { max-width: var(--wrap); margin: 0 auto; padding: 28px 20px 72px; }
.page-footer {
  max-width: var(--wrap); margin: 0 auto; padding: 0 20px 48px;
  color: var(--stencil); font-size: .8rem;
  font-family: var(--font-mono);
}
.page-footer p { margin: 0; }

/* ------------------------------------------------------------------ flashes */

.flashes { margin-bottom: 20px; display: grid; gap: 8px; }
.flash {
  margin: 0 0 12px;
  padding: 11px 14px 11px 16px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--stencil);
  border-radius: var(--radius);
  font-size: .93rem;
}
.flashes .flash { margin: 0; }
.flash-ok { border-left-color: var(--ok); }
.flash-warn { border-left-color: var(--warn); }
.flash-err { border-left-color: var(--paint); }

/* ================================================================ THE TRAIL
   The signature. Ten stops painted along a length of corrugated steel: the
   rail carries the rib pattern of a container wall, and progress is a stripe
   of oxide paint laid across it. Completed stops are filled steel plates,
   the current stop is the painted one (carrying the production percentage
   while the container is being made), and what's ahead is left bare.
   ========================================================================= */

.trail { position: relative; padding: 4px 0 2px; }

.trail-stops {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  position: relative;
}

/* Bare rail: corrugated ribs, running between the first and last stop. */
.trail-stops::before,
.trail-stops::after {
  content: "";
  position: absolute;
  top: 30px;
  left: 5%;
  height: 13px;
  border-radius: 1px;
  pointer-events: none;
}
.trail-stops::before {
  right: 5%;
  background-color: #cdd8d7;
  background-image: repeating-linear-gradient(90deg, rgba(16,50,63,.16) 0 2px, transparent 2px 11px);
  box-shadow: inset 0 1px 0 rgba(16,50,63,.12), inset 0 -1px 0 rgba(255,255,255,.5);
}
/* The painted stripe. */
.trail-stops::after {
  width: calc(90% * var(--trail-fill, 0) / 100);
  background-color: var(--hull);
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.17) 0 2px, transparent 2px 11px);
  animation: paint-on .7s cubic-bezier(.2, .7, .3, 1) both;
  transform-origin: left center;
}
@keyframes paint-on { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.trail-stop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
  min-width: 0;
  padding-top: 22px;   /* reserved for the paint mark, so plates stay level */
}

/* Each stop is a plate: a small square of steel, not a dot. */
.trail-node {
  position: relative;
  z-index: 1;
  width: 18px; height: 18px;
  margin-top: 7px;
  border: 2px solid #aebbba;
  background: var(--panel);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(16,50,63,.18);
  overflow: hidden;
  flex: none;
}
.is-done .trail-node {
  background: var(--hull);
  border-color: var(--hull);
}
/* Stamped tick on what's behind us. */
.is-done .trail-node::after {
  content: "";
  position: absolute;
  left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid var(--panel);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
.is-current .trail-node {
  width: 28px; height: 28px;
  margin-top: 1px;
  border-color: var(--paint);
  background: var(--panel);
  box-shadow: 0 0 0 3px rgba(212, 82, 42, .18), 0 1px 3px rgba(16,50,63,.25);
}
.is-current .trail-node::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--paint);
  border-radius: 1px;
}
/* During production the plate fills from the bottom by percentage. */
.trail-node-fill {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--pct, 0%);
  background: var(--paint);
  z-index: 1;
}
.is-current .trail-node:has(.trail-node-fill)::after {
  inset: 2px;
  background: rgba(212, 82, 42, .12);
}
.is-current .trail-node-fill { box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.is-current .trail-node-fill { z-index: 2; }

.trail-index {
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--stencil);
  letter-spacing: .04em;
}
.is-done .trail-index { color: var(--hull); }
.is-current .trail-index { color: var(--paint); font-weight: 600; }

.trail-label {
  font-family: var(--font-display);
  font-size: .8rem;
  line-height: 1.15;
  color: var(--stencil);
  text-transform: uppercase;
  letter-spacing: .03em;
  max-width: 12ch;
  min-height: 3.4em;
}
.is-done .trail-label { color: var(--hull); }
.is-current .trail-label { color: var(--sea-deep); font-weight: 600; }

.trail-pct {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  color: var(--panel);
  background: var(--paint);
  padding: 1px 6px;
  border-radius: 2px;
  white-space: nowrap;
}

.trail-caption {
  margin: 14px 0 0;
  font-size: .9rem;
  color: var(--stencil);
}

/* Compact trail (cards): plates only, no labels. */
.trail-compact .trail-label,
.trail-compact .trail-index,
.trail-compact .trail-pct { display: none; }
.trail-compact .trail-stop { padding-top: 0; }
.trail-compact .trail-node { width: 14px; height: 14px; margin-top: 0; border-width: 2px; }
.trail-compact .is-current .trail-node { width: 18px; height: 18px; margin-top: -2px; }
.trail-compact .is-done .trail-node::after { left: 2px; top: 0; width: 3px; height: 6px; border-width: 0 2px 2px 0; }
.trail-compact .trail-stops::before,
.trail-compact .trail-stops::after {
  top: 4px; height: 9px;
  background-image: repeating-linear-gradient(90deg, rgba(16,50,63,.14) 0 1px, transparent 1px 8px);
}
.trail-compact .trail-stops::after {
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 1px, transparent 1px 8px);
}

/* --------------------------------------------------------------- headings */

.page-head, .detail-head { margin-bottom: 24px; }
.page-head {
  display: flex; gap: 20px; align-items: flex-end;
  justify-content: space-between; flex-wrap: wrap;
}
.page-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.ref-title {
  font-size: clamp(1.7rem, 1.2rem + 2.4vw, 2.5rem);
  letter-spacing: .01em;
  font-weight: 600;
  margin-bottom: .3rem;
}
.detail-status { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0; }

/* The hero answers the only question that matters, in the ship's own voice. */
.hero {
  background: var(--sea-deep);
  color: #eaf0ef;
  padding: 30px 28px 32px;
  border-radius: var(--radius);
  margin-bottom: 26px;
  position: relative;
  overflow: hidden;
}
/* Corrugation, catching light down the right edge. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 55%;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0 2px, transparent 2px 14px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%);
  mask-image: linear-gradient(90deg, transparent, #000 55%);
  pointer-events: none;
}
.hero .eyebrow { color: #8fb0ae; position: relative; z-index: 1; }
.hero-title {
  margin: 0 0 .35rem;
  color: #fff;
  position: relative; z-index: 1;
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 2.7rem);
}
.hero-line {
  margin: 0;
  color: #cfdcda;
  font-size: 1.05rem;
  max-width: 46ch;
  position: relative; z-index: 1;
}

/* ----------------------------------------------------------------- panels */

.panel {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 20px 22px 22px;
  margin: 0 0 20px;
  box-shadow: var(--shadow);
}
.panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.panel-title {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--stencil);
  font-weight: 600;
  margin: 0 0 14px;
}
.panel-head .panel-title { margin-bottom: 14px; }
.panel-count { color: var(--stencil); font-size: .82rem; }
.sub-title {
  font-size: .95rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--hull); margin: 0 0 10px;
}
.panel-trail { padding-bottom: 26px; }
.panel-note .note-body { margin: 0; white-space: pre-wrap; }

.detail-cols { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; align-items: start; }
.detail-cols > .panel { margin-bottom: 20px; }

/* ------------------------------------------------------------- badges, ETA */

.badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  padding: 3px 9px 3px 3px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--panel);
  color: var(--hull);
  white-space: nowrap;
}
.badge-step {
  font-family: var(--font-mono);
  font-size: .72rem;
  background: var(--hull);
  color: var(--panel);
  padding: 2px 5px;
  border-radius: 1px;
  letter-spacing: 0;
}
.badge-stage[data-stage="delivered"] { border-color: var(--ok); color: var(--ok); }
.badge-stage[data-stage="delivered"] .badge-step { background: var(--ok); }
.badge-ok { color: var(--ok); border-color: var(--ok); padding: 3px 9px; }
.badge-wait { color: var(--warn); border-color: var(--warn); padding: 3px 9px; }
.badge-muted { color: var(--stencil); padding: 3px 9px; }

.eta { display: inline-flex; align-items: baseline; gap: 8px; font-size: .92rem; }
.eta-label {
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .14em; font-size: .7rem; color: var(--stencil);
}
.eta-date { font-family: var(--font-mono); color: var(--sea-deep); }
.eta-rel { color: var(--stencil); }
.eta-late .eta-rel { color: var(--paint); font-weight: 600; }
.eta-none, .eta-done { color: var(--stencil); font-size: .9rem; }
.eta-done { color: var(--ok); font-weight: 600; }

/* ------------------------------------------------------------------- cards */

.card-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
  margin-bottom: 28px;
}
.card {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 18px 20px 14px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color .15s ease, transform .15s ease;
}
.card:hover { border-color: var(--hull); transform: translateY(-1px); }
.card-hit { text-decoration: none; color: inherit; display: block; }
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 8px;
}
.card-ref {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.card:hover .card-ref { color: var(--paint); }
.card-eta { margin: 0; }
.card-foot {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; padding-top: 12px; border-top: 1px solid var(--rule);
  font-size: .78rem;
}
.card-foot .subtle { min-width: 0; overflow-wrap: anywhere; }
.card-more { white-space: nowrap; }
.card-more { text-decoration: none; font-weight: 600; font-size: .85rem; }

/* Past shipments: folded away, like a closed file. */
.past {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 0 18px;
  margin-bottom: 24px;
}
.past > summary {
  cursor: pointer;
  padding: 14px 0;
  display: flex; align-items: baseline; gap: 12px;
  list-style: none;
}
.past > summary::-webkit-details-marker { display: none; }
.past > summary::before {
  content: "▸";
  color: var(--stencil);
  transition: transform .15s ease;
  display: inline-block;
}
.past[open] > summary::before { transform: rotate(90deg); }
.past-title {
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .12em; font-weight: 600; font-size: .9rem;
}
.past-count { color: var(--stencil); font-size: .8rem; margin-left: auto; }
.past .table-scroll { padding-bottom: 16px; }

/* ------------------------------------------------------------------ tables */

/* position:relative so absolutely-positioned descendants (the screen-reader
   column labels) are contained here and scroll with the table, rather than
   escaping to the page and widening it. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; }
.table { border-collapse: collapse; width: 100%; font-size: .92rem; }
.table th {
  text-align: left;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .72rem;
  font-weight: 600;
  color: var(--stencil);
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.table td {
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid #e2e9e8;
  vertical-align: top;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; padding-right: 14px; }
.table th.num { text-align: right; }
.col-line { width: 3ch; color: var(--stencil); }
.col-actions { text-align: right; white-space: nowrap; }
.col-actions-wide { min-width: 190px; }
.col-actions form { display: inline-block; margin-left: 8px; }
.cell-name { font-weight: 500; min-width: 16ch; }
.cell-desc { color: var(--stencil); min-width: 16ch; }
.ref-link { font-weight: 600; text-decoration: none; }
.ref-link:hover { text-decoration: underline; }

/* The admin manifest sits on its own sheet. */
.table-scroll:has(> .table-admin) {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 2px 18px;
  box-shadow: var(--shadow);
}

/* ---------------------------------------------------------------- specs, docs */

.specs { display: grid; gap: 0; margin: 0; }
.spec {
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #e2e9e8;
}
.spec:last-child { border-bottom: 0; }
.spec dt {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .72rem;
  color: var(--stencil);
  padding-top: .15rem;
}
.spec dd { margin: 0; }

.doc-list { list-style: none; margin: 0 0 16px; padding: 0; }
.doc {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid #e2e9e8;
}
.doc:last-child { border-bottom: 0; }
.doc-link { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
/* Filed and stamped with its kind, the way a document sleeve is labelled. */
.doc-kind {
  font-size: .68rem; font-weight: 600; letter-spacing: .06em;
  background: var(--sea-deep); color: var(--panel);
  padding: 3px 6px; border-radius: 1px; flex: none;
}
.doc-name { font-weight: 500; overflow-wrap: anywhere; }
.doc-meta { color: var(--stencil); font-size: .76rem; margin-left: auto; }

/* ---------------------------------------------------------------- timeline */

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline-entry {
  display: grid;
  grid-template-columns: 15.5rem 1fr;
  gap: 18px;
  padding: 14px 0 14px 0;
  border-bottom: 1px solid #e2e9e8;
  position: relative;
}
.timeline-entry:last-child { border-bottom: 0; }
.timeline-when { color: var(--stencil); font-size: .78rem; padding-top: .2rem; white-space: nowrap; }
.timeline-body { border-left: 2px solid var(--rule); padding-left: 16px; }
.timeline-entry:first-child .timeline-body { border-left-color: var(--paint); }
.timeline-stage {
  margin: 0 0 .3rem;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  font-size: .95rem;
}
.timeline-pct {
  font-family: var(--font-mono);
  font-size: .74rem;
  background: var(--deck);
  color: var(--hull);
  padding: 1px 6px;
  border-radius: 2px;
  letter-spacing: 0;
  margin-left: 4px;
}
.timeline-note { margin: 0; white-space: pre-wrap; }
.timeline-scroll { max-height: 560px; overflow-y: auto; }

/* ------------------------------------------------------------------- forms */

input, select, textarea, button { font: inherit; color: inherit; }
input, select, textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: #fff;
}
input[type="file"] { padding: 8px; background: var(--deck); }
textarea { resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--stencil); }

.field { display: block; margin: 0 0 14px; }
.field > span {
  display: block;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .72rem;
  font-weight: 600;
  color: var(--stencil);
  margin-bottom: 5px;
}
.field > span i { color: var(--paint); font-style: normal; }
.field-inline { display: inline-block; margin: 0; }
.field-row { display: flex; gap: 14px; flex-wrap: wrap; }
.field-row > .field { flex: 1 1 190px; margin-bottom: 14px; }
.field-grid {
  display: grid; gap: 0 14px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.stack > * { margin-bottom: 14px; }
.stack > *:last-child { margin-bottom: 0; }

.form-card fieldset {
  border: 0;
  border-top: 1px solid var(--rule);
  padding: 22px 0 4px;
  margin: 0 0 8px;
}
.form-card fieldset:first-of-type { border-top: 0; padding-top: 0; }
.form-card legend {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .72rem;
  color: var(--stencil);
  font-weight: 600;
  padding: 0 8px 0 0;
}

.toolbar {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 18px;
}
.filters { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.filters .field > span { margin-bottom: 4px; }

.view-switch { display: flex; gap: 2px; }
.view-switch a {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .76rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--stencil);
  padding: 8px 13px;
  border: 1px solid var(--rule);
  background: var(--panel);
}
.view-switch a:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.view-switch a:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.view-switch a.is-active { background: var(--sea-deep); color: #fff; border-color: var(--sea-deep); }

.split { display: grid; gap: 26px; grid-template-columns: 1fr 1fr; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--rule); }
.split-half { min-width: 0; }

.update-form { background: transparent; }
.panel-update { border-left: 3px solid var(--paint); }
.recipients {
  font-size: .76rem; color: var(--stencil); margin: 10px 0 0;
  overflow-wrap: anywhere;
}
.upload-form { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); }

.inline-edit > summary { cursor: pointer; font-size: .82rem; color: var(--hull); }
.inline-edit[open] {
  background: var(--deck);
  padding: 12px;
  border-radius: var(--radius);
  margin-top: 6px;
  text-align: left;
}
.item-form { margin-top: 10px; }

/* ----------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 600;
  font-size: .85rem;
  padding: 10px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--sea-deep);
  background: var(--sea-deep);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.btn:hover { background: #0a242e; color: #fff; }
.btn-primary { background: var(--paint); border-color: var(--paint); }
.btn-primary:hover { background: #b8431f; border-color: #b8431f; }
.btn-quiet {
  background: var(--panel); color: var(--hull); border-color: var(--rule);
}
.btn-quiet:hover { background: #fff; border-color: var(--hull); color: var(--hull); }
.btn-small { padding: 6px 12px; font-size: .76rem; }
.btn-danger { background: var(--paint); border-color: var(--paint); }
.btn-danger:hover { background: #a63a1a; border-color: #a63a1a; }
.btn-danger-quiet {
  background: var(--panel); color: var(--paint); border-color: var(--paint);
}
.btn-danger-quiet:hover { background: var(--paint); color: #fff; }
.btn-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.btn-row .subtle { font-size: .82rem; }

.btn-link {
  background: none; border: 0; padding: 0;
  color: var(--hull); cursor: pointer;
  text-decoration: underline; text-underline-offset: .18em;
  font-size: .85rem;
}
.btn-link:hover { color: var(--paint); }
.btn-danger-link {
  background: none; border: 0; padding: 0;
  color: var(--paint); cursor: pointer; font-size: .8rem;
  text-decoration: underline; text-underline-offset: .18em;
}

/* ------------------------------------------------------------ danger block */

.danger-block {
  border: 1px solid rgba(212, 82, 42, .4);
  border-left: 3px solid var(--paint);
  border-radius: var(--radius);
  background: #fdf4f1;
  padding: 18px 22px 20px;
  margin: 28px 0 0;
}
.danger-block h2 {
  font-size: .82rem; text-transform: uppercase; letter-spacing: .16em;
  color: var(--paint); margin-bottom: 10px;
}
.danger-block p { font-size: .9rem; margin-bottom: 12px; }
.danger-copy { color: var(--sea-deep); }
.purge-list { list-style: none; margin: 0; padding: 0; }
.purge { border-top: 1px solid rgba(212, 82, 42, .25); padding: 10px 0; }
.purge > summary { cursor: pointer; font-size: .9rem; }
.purge form { margin-top: 12px; max-width: 32rem; }

/* ------------------------------------------------------------ empty states */

.empty {
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 40px 28px;
  text-align: center;
  margin-bottom: 24px;
}
.empty h2 { margin-bottom: .4rem; }
.empty p { color: var(--stencil); max-width: 46ch; margin: 0 auto 18px; }
.empty .btn { margin-top: 4px; }
.empty-inline { color: var(--stencil); font-size: .92rem; margin: 0 0 4px; }

/* ============================================================== the gate
   Sign-in and password pages: the whole surface is the harbour at night,
   with one plate of paper on it.
   ========================================================================= */

.gate-body {
  background: var(--sea-deep);
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 2px, transparent 2px 16px),
    linear-gradient(170deg, #16404f 0, #0b242e 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
}
.gate-body .main { padding: 0; max-width: 27rem; width: 100%; }
.gate { width: 100%; }
.gate-plate {
  display: flex; align-items: center; gap: 10px;
  color: #eaf0ef;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .9rem;
  font-weight: 700;
  margin-bottom: 18px;
}
.gate-mark {
  width: 24px; height: 17px;
  border: 1.5px solid var(--paint);
  background-image: repeating-linear-gradient(90deg, var(--paint) 0 1.5px, transparent 1.5px 5px);
  background-position: 3px 0;
  background-repeat: no-repeat;
}
.gate-card {
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.14);
  border-top: 3px solid var(--paint);
  border-radius: var(--radius);
  padding: 26px 26px 24px;
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.8);
}
.gate-card h1 { font-size: 1.8rem; margin-bottom: .5rem; }
.gate-card .lede { font-size: .95rem; margin-bottom: 20px; }
.gate-card .btn { width: 100%; }
.gate-foot { margin: 14px 0 0; font-size: .87rem; }
.gate-foot.muted { color: var(--stencil); font-size: .8rem; line-height: 1.45; }

/* ================================================================= mobile */

@media (max-width: 900px) {
  .detail-cols { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; gap: 20px; }
  .spec { grid-template-columns: 10rem 1fr; }
}

@media (max-width: 680px) {
  .main { padding: 20px 16px 56px; }
  .masthead-inner { padding: 10px 16px; gap: 8px 16px; }
  .nav-links { order: 3; width: 100%; gap: 14px; }
  .masthead-user { margin-left: auto; }
  .hero { padding: 24px 20px 26px; }
  .panel { padding: 16px 16px 18px; }
  .card-grid { grid-template-columns: 1fr; }
  .spec { grid-template-columns: 1fr; gap: 2px; padding: 10px 0; }
  .timeline-entry { grid-template-columns: 1fr; gap: 6px; }
  .timeline-when { padding-top: 0; }
  .timeline-body { border-left: 0; padding-left: 0; border-top: 2px solid var(--rule); padding-top: 8px; }
  .timeline-entry:first-child .timeline-body { border-left: 0; border-top-color: var(--paint); }
  .doc-meta { margin-left: 0; width: 100%; }
  .page-head { align-items: flex-start; }

  /* The full trail turns on its side and reads as a column — the same way a
     stamp column runs down the edge of a bill of lading. */
  .trail:not(.trail-compact) .trail-stops { grid-template-columns: 1fr; }
  /* The rail runs down a 32px gutter; every plate is centred in it, whatever
     its size, so the band passes cleanly through all ten. */
  .trail:not(.trail-compact) .trail-stops::before,
  .trail:not(.trail-compact) .trail-stops::after {
    top: 18px; bottom: 18px; left: 12px; right: auto;
    width: 8px; height: auto;
    background-image: repeating-linear-gradient(0deg, rgba(16,50,63,.16) 0 2px, transparent 2px 11px);
  }
  .trail:not(.trail-compact) .trail-stops::after {
    height: calc((100% - 36px) * var(--trail-fill, 0) / 100);
    bottom: auto;
    background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.17) 0 2px, transparent 2px 11px);
    animation-name: paint-down;
    transform-origin: center top;
  }
  .trail:not(.trail-compact) .trail-stop {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    text-align: left;
    padding: 6px 0;
  }
  .trail:not(.trail-compact) .trail-node { margin: 0 0 0 7px; }          /* (32 - 18) / 2 */
  .trail:not(.trail-compact) .is-current .trail-node { margin-left: 2px; } /* (32 - 28) / 2 */
  .trail:not(.trail-compact) .trail-label {
    max-width: none; font-size: .85rem; min-height: 0;
  }
  .trail:not(.trail-compact) .trail-index { display: block; font-size: .72rem; }
  .trail:not(.trail-compact) .trail-pct {
    position: static; transform: none; margin-left: auto;
  }
}

@keyframes paint-down { from { transform: scaleY(0); } to { transform: scaleY(1); } }

@media (max-width: 420px) {
  .btn { padding: 10px 14px; font-size: .8rem; }
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1; }
}

/* Print: the manifest, on paper. */
@media print {
  .masthead, .page-footer, .btn, .btn-row, .danger-block, .panel-update, form { display: none !important; }
  body { background: #fff; }
  .panel { break-inside: avoid; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}