@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/ibm-plex-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-600-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-700-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --bg: #dfe4e7;
  --surface: #ffffff;
  --surface-soft: #edf1f3;
  --ink: #101820;
  /* Both secondary tones clear WCAG AA (4.5:1) on all three grounds this app
     paints text on -- white, --surface-soft and --bg. --faint used to sit at
     2.02:1 on the page background, which is below the threshold for any text
     at any size, and it carries real content: reference numbers, stat captions,
     page subtitles. Tertiary emphasis comes from size, weight and letter
     spacing, which this design already leans on, not from fading text out of
     legibility. */
  --muted: #4f5a67;
  --faint: #5b6675;
  --line: #c8d1d7;
  --line-strong: #b8c3cb;
  --nav: #0b151c;
  --nav-soft: #14232d;
  --blue: #2368a7;
  --teal: #19756d;
  --green: #1f7a50;
  --amber: #8d570b;
  --red: #b33c35;
  --red-bg: #fbefed;
  --amber-bg: #fff4df;
  --green-bg: #eaf6f0;
  --blue-bg: #eaf2fb;
  --shadow: 0 18px 55px rgba(16, 24, 32, 0.12);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
}

body {
  overflow: hidden;
}

body.guest-page {
  overflow: auto;
}

/* Onboarding has no app shell scroller; its steps can be taller than the
   window (discovery suggestions, several receiving sites). */
body.onboarding-page {
  overflow-y: auto;
}

/* Proposal 2: names and published status first, with work alongside. */
.home-proposal-two::before { display: none; }
.home-overview-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0 28px; }
.home-overview-head h1 { font-size: 32px; letter-spacing: -0.8px; margin: 0 0 6px; }
.home-overview-head p { margin: 0; color: var(--muted); }
.home-proposal-two .home-add-shipment { background: var(--blue); border-radius: 8px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; flex-shrink: 0; }
.home-overview-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 280px); gap: 28px; align-items: start; }
.home-current, .home-for-you { min-width: 0; }
.home-overview-layout h2 { font-size: 18px; margin: 0 0 14px; }
.home-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.home-shipment-card { --card-tone: var(--faint); --card-soft: var(--surface-soft); position: relative; min-width: 0; display: flex; flex-direction: column; gap: 8px; text-align: start; color: var(--ink); padding: 20px 22px 0; border: 1px solid #e0e6ea; border-radius: 16px; background: var(--surface); box-shadow: 0 2px 7px #10182006; cursor: pointer; overflow: hidden; }
.home-shipment-card::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: 0; width: 4px; background: var(--card-tone); }
.home-shipment-card:hover { border-color: var(--card-tone); box-shadow: 0 4px 14px #10182010; }
.home-shipment-card:focus-visible, .home-for-you-row:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.home-shipment-card.tone-review { --card-tone: #a63c58; --card-soft: #f9edf1; }
.home-shipment-card.tone-action { --card-tone: var(--teal); --card-soft: #e8f4f1; }
.home-shipment-card.tone-positive { --card-tone: var(--green); --card-soft: var(--green-bg); }
.home-shipment-card.tone-delayed { --card-tone: var(--amber); --card-soft: var(--amber-bg); }
.home-card-top { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 10px 14px; margin-bottom: 10px; }
.home-card-arrival { color: var(--muted); font-size: 13px; flex: 1 1 130px; }
.home-card-status { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; width: fit-content; padding: 4px 8px; border-radius: 6px; color: var(--card-tone); background: var(--card-soft); font-size: 12px; font-weight: 600; }
.home-card-status svg { width: 14px; height: 14px; flex-shrink: 0; }
.home-card-title { font-size: 20px; line-height: 1.3; }
.home-card-stage, .home-card-detail, .home-card-freshness { color: var(--muted); font-size: 14px; line-height: 1.5; }
.home-card-freshness { font-size: 12px; }
.home-card-title, .home-card-arrival, .home-card-detail, .home-card-status, .home-for-you-row strong { overflow-wrap: anywhere; }
.home-card-footer { display: flex; justify-content: space-between; gap: 12px; color: var(--blue); font-size: 13px; border-top: 1px solid #edf0f2; margin-top: auto; padding: 13px 0; }
.home-card-stage { padding-bottom: 4px; }
.home-overview-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--muted); }
.home-overview-footer button, .home-all-updates { min-height: 44px; }
.home-card-empty { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 28px; }
.home-card-empty h3 { margin-top: 0; }
.home-card-empty p { color: var(--muted); }
.home-for-you h2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.home-for-you h2 > span { border-radius: 999px; background: var(--surface-soft); padding: 3px 7px; color: var(--muted); font-size: 12px; }
.home-for-you-group { background: var(--surface); border: 1px solid #e0e6ea; border-radius: 14px; overflow: hidden; }
.home-for-you-row { width: 100%; display: flex; gap: 10px; padding: 18px 16px; border: 0; background: none; text-align: start; color: var(--ink); cursor: pointer; }
.home-for-you-row + .home-for-you-row, .home-for-you-empty + .home-for-you-row { border-top: 1px solid #edf0f2; }
.home-for-you-row:hover { background: var(--surface-soft); }
.home-for-you-row > svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--blue); }
.home-for-you-row.tone-review > svg { color: #a63c58; }
.home-for-you-row.tone-action > svg { color: var(--teal); }
.home-for-you-row > span { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.home-for-you-row strong { font-size: 14px; line-height: 1.4; }
.home-for-you-context { font-size: 13px; line-height: 1.45; color: var(--muted); }
.home-for-you-link { font-size: 13px; color: var(--blue); margin-top: 4px; }
.home-for-you-empty { font-size: 14px; color: var(--muted); margin: 0; padding: 18px 16px; }
@media (max-width: 1200px) {
  .home-overview-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 680px) {
  .home-card-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .home-overview-head { gap: 12px; padding-top: 8px; }
  .home-overview-head h1 { font-size: 30px; }
  .home-proposal-two .home-add-shipment { width: 44px; padding: 0; justify-content: center; border-radius: 50%; }
  .home-add-shipment > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .home-shipment-card { padding: 18px 20px 0; }
}

button,
input,
select,
textarea {
  font: inherit;
}

input,
select,
textarea {
  outline: none;
}

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

button {
  border: 0;
}

.app-shell {
  min-height: 100dvh;
}

.guest-layout {
  position: relative;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  background: var(--nav);
}

.guest-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 7vw, 94px);
  background: var(--nav);
  color: #fff;
}

.guest-copy h1 {
  max-width: 760px;
  margin: 22px 0 0;
  font-size: 68px;
  font-weight: 600;
  line-height: 0.96;
  letter-spacing: 0;
}

.guest-copy h1 span {
  display: block;
  overflow-wrap: anywhere;
}

/* Language menu remains consistent across desktop browsers and phone widths. */
.guest-language { position: absolute; top: 24px; right: 28px; color: #425969; z-index: 20; }
.guest-language-trigger { display: flex; align-items: center; gap: 10px; min-width: 148px; min-height: 44px; background: #f6f9fb; border: 1px solid #dce5ec; border-radius: 24px; padding: 10px 14px; font: inherit; font-size: 14px; font-weight: 600; line-height: 22px; color: #273e50; cursor: pointer; }
.guest-language-trigger svg { width: 18px; height: 18px; flex-shrink: 0; }
.guest-language-trigger .guest-language-chevron { margin-left: auto; width: 16px; height: 16px; }
.guest-language-trigger:hover, .guest-language-trigger[aria-expanded="true"] { background: #edf3f8; border-color: #b8cbdc; }
.guest-language-trigger:focus-visible { outline: 3px solid #3988c6; outline-offset: 3px; }
.guest-language-trigger:disabled { opacity: .6; cursor: wait; }
.guest-language-menu { position: absolute; top: calc(100% + 10px); right: 0; width: 224px; max-width: calc(100vw - 40px); padding: 8px; background: #fff; color: #273e50; border: 1px solid #dce5ec; border-radius: 16px; box-shadow: 0 12px 36px #071b3024, 0 2px 6px #071b3010; }
.guest-language-menu[hidden] { display: none; }
.guest-language-caption { padding: 6px 12px 8px; color: #647887; font-size: 12px; font-weight: 600; }
.guest-language-menu button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 10px 12px; color: #273e50; background: transparent; border: 0; border-radius: 9px; text-align: left; font: inherit; font-size: 14px; line-height: 22px; cursor: pointer; }
.guest-language-menu button svg { width: 17px; height: 17px; visibility: hidden; flex-shrink: 0; }
.guest-language-menu button[aria-checked="true"] { background: #eaf3fa; color: #185f91; font-weight: 600; }
.guest-language-menu button[aria-checked="true"] svg { visibility: visible; }
.guest-language-menu button:hover, .guest-language-menu button:focus-visible { background: #eaf3fa; outline: 2px solid #b9d5e8; outline-offset: -2px; }
.guest-language-menu button[data-language-choice="system"] { border-top: 1px solid #e5edf2; border-radius: 0 0 9px 9px; margin-top: 6px; padding-top: 12px; color: #526a7b; }
@media (max-width: 900px) {
  .guest-language { color: #fff; right: 24px; }
  .guest-layout .guest-copy { padding-top: 100px; }
}

.guest-copy p {
  max-width: 560px;
  margin: 22px 0 0;
  color: #c8d4dd;
  font-size: 18px;
  line-height: 1.5;
}

.guest-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 40px;
}

.guest-brand .brand-mark {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  font-size: 18px;
}

.guest-brand .brand-logo {
  width: 78px;
  height: 67px;
}

.guest-brand .brand-title {
  color: #fff;
  font-size: 27px;
  font-weight: 700;
}

.guest-brand .brand-subtitle {
  margin-top: 7px;
  color: #8f9ba6;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.14em;
}

.guest-panel {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 36px;
  background: #fff;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.guest-panel h2 {
  margin: 0;
  font-size: 24px;
}

.guest-panel p {
  margin: 8px 0 22px;
  color: var(--muted);
  line-height: 1.5;
}

.guest-tracking-form {
  width: min(560px, 100%);
  margin-top: 30px;
}

.guest-tracking-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.24);
}

.guest-tracking-control input {
  width: 100%;
  min-width: 0;
  height: 52px;
  padding: 0 14px;
  border: 0;
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  font-size: 17px;
}

.guest-tracking-control input::placeholder {
  color: #7c8791;
}

.guest-tracking-control input:focus-visible {
  box-shadow: inset 0 0 0 2px var(--blue);
}

.guest-tracking-control .button {
  min-width: 154px;
  height: 52px;
}

.guest-tracking-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 16px;
  width: min(560px, 100%);
  margin-top: 30px;
  padding: 15px 17px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
}

.guest-tracking-summary span {
  grid-column: 1 / -1;
  color: #9fb0bc;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.guest-tracking-summary strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 16px;
}

.guest-tracking-summary .text-button {
  color: #b8d9ee;
}

.guest-handoff-error .button {
  width: 100%;
}

/* --- Tracking map --- */

.tracking-layout {
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  transition: grid-template-columns 180ms ease;
}

.tracking-layout.is-rail-collapsed {
  grid-template-columns: minmax(0, 1fr) 52px;
}

.tracking-map-wrap {
  position: relative;
  min-height: 0;
  background: #dce4e8;
}

#trackingMap {
  position: absolute;
  inset: 0;
}

#trackingMap canvas {
  outline: none;
}

.map-veil {
  pointer-events: none;
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 80px rgba(29, 46, 58, 0.08);
}

.tracking-map-wrap.is-map-unavailable .map-legend {
  display: none;
}

.tracking-unavailable-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: min(520px, calc(100% - 48px));
  transform: translate(-50%, -50%);
  padding: 24px;
  border: 1px solid rgba(127, 212, 255, 0.22);
  border-radius: 14px;
  background: rgba(9, 15, 21, 0.9);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
  color: #dce7ef;
}

.tracking-unavailable-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  border: 1px solid rgba(127, 212, 255, 0.28);
  border-radius: 12px;
  background: rgba(127, 212, 255, 0.1);
  color: #9fd8f7;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.tracking-unavailable-panel .eyebrow {
  margin: 0 0 8px;
  color: #7fd4ff;
}

.tracking-unavailable-panel h2 {
  margin: 0;
  font-size: 24px;
  letter-spacing: 0;
}

.tracking-unavailable-panel p:not(.eyebrow) {
  margin: 10px 0 18px;
  color: #9fb0bd;
  font-size: 14px;
  line-height: 1.55;
}

.tracking-unavailable-steps {
  display: grid;
  gap: 8px;
}

.tracking-unavailable-steps span {
  display: block;
  padding: 9px 11px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  color: #c9d5de;
  font-family: var(--font-mono);
  font-size: 11px;
}

/* Wraps and stays inside the map. Seven legend entries on one line are wider
   than the map is between 681 and 800px, and because the legend is absolutely
   positioned that overflow reached the document: the whole app scrolled
   sideways by up to 147px, sidebar and all. */
.map-legend {
  position: absolute;
  left: 18px;
  bottom: 18px;
  max-width: calc(100% - 36px);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  background: rgba(9, 14, 20, 0.78);
  backdrop-filter: blur(6px);
  color: #9fb0bd;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.map-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.legend-confirmed {
  background: #2dd4a7;
}

.legend-estimated {
  background: rgba(255, 255, 255, 0.92);
  border: 2px solid #b66d15;
}

.legend-atrisk {
  background: #e05d54;
  box-shadow: 0 0 0 3px rgba(224, 93, 84, 0.22);
}

.legend-destination {
  background: transparent;
  border: 2px solid #7fd4ff;
}

.legend-sequence {
  width: 18px;
  height: 0;
  border-top: 2px dashed #0d7895;
}

.legend-site {
  position: relative;
  width: 10px;
  height: 11px;
  border-radius: 2px 2px 1px 1px;
}

.legend-site::after {
  content: "";
  position: absolute;
  left: 3px;
  bottom: 0;
  width: 3px;
  height: 4px;
  background: currentColor;
}

.legend-homebase {
  border: 1px solid #7fd4ff;
  background: #0c6487;
  color: #7fd4ff;
}

.legend-receiving {
  border: 1px solid #718593;
  background: #eef4f7;
  color: #718593;
}

/* markers */

.map-origin span,
.map-dest span {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: #344958;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.95);
}

.map-origin,
.map-dest {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  pointer-events: none;
}

.map-origin i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: #8494a3;
  box-shadow: 0 0 0 2px rgba(132, 148, 163, 0.25);
}

.map-origin span {
  color: #485e6d;
}

.map-dest i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2.5px solid #7fd4ff;
  background: rgba(127, 212, 255, 0.12);
  box-shadow: 0 0 14px rgba(127, 212, 255, 0.45);
}

.map-dest span {
  color: #0c6487;
}

.map-dest .map-dest-sub {
  margin-top: -2px;
  color: #466b80;
  font-size: 8.5px;
}

.map-site {
  width: 38px;
  min-width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border: 0;
  border-radius: 6px;
  background: rgba(246, 250, 252, 0.9);
  box-shadow: 0 4px 14px rgba(14, 29, 40, 0.2);
  cursor: pointer;
}

.map-site:focus-visible {
  outline: 3px solid rgba(127, 212, 255, 0.72);
  outline-offset: 3px;
}

.map-site-building {
  position: relative;
  width: 20px;
  height: 19px;
  display: grid;
  grid-template-columns: repeat(2, 3px);
  grid-template-rows: repeat(2, 3px);
  justify-content: center;
  align-content: start;
  gap: 3px;
  padding-top: 4px;
  border: 1.5px solid #536b7b;
  border-radius: 3px 3px 1px 1px;
  background: #f7fbfd;
  box-shadow: 0 2px 5px rgba(27, 48, 62, 0.18);
}

.map-site-building::after {
  content: "";
  position: absolute;
  left: 7px;
  bottom: -2px;
  width: 5px;
  height: 6px;
  border-radius: 1px 1px 0 0;
  background: #536b7b;
}

.map-site-building b {
  width: 3px;
  height: 3px;
  border-radius: 1px;
  background: #8094a1;
}

.map-site-name,
.map-site-type {
  display: none;
}

.map-site.is-default {
  border: 1px solid rgba(127, 212, 255, 0.72);
  background: rgba(9, 67, 91, 0.94);
  box-shadow: 0 5px 18px rgba(7, 48, 66, 0.34);
}

.map-site.is-default .map-site-building {
  border-color: #8bdcff;
  background: #0c6487;
}

.map-site.is-default .map-site-building b,
.map-site.is-default .map-site-building::after {
  background: #b8eaff;
}

.map-site.is-default .map-site-name {
  color: #fff;
}

.map-site.is-default .map-site-type {
  color: #a8ddf2;
}

.map-site.is-selected-destination:not(.is-default) {
  border: 1px solid rgba(12, 100, 135, 0.34);
}

.map-site-popup .maplibregl-popup-content {
  padding: 12px 14px;
  border: 1px solid rgba(127, 212, 255, 0.25);
  border-radius: 7px;
  background: rgba(9, 17, 23, 0.96);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  color: #eaf4fa;
}

.map-site-popup .maplibregl-popup-tip {
  border-top-color: rgba(9, 17, 23, 0.96);
}

.map-site-popup strong,
.map-site-popup span,
.map-site-popup p,
.map-site-popup small {
  display: block;
}

.map-site-popup strong {
  font-size: 13px;
}

.map-site-popup span {
  margin-top: 2px;
  color: #7fd4ff;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.map-site-popup p {
  margin: 7px 0 0;
  color: #becdd7;
  font-size: 11px;
  line-height: 1.4;
}

.map-site-popup small {
  margin-top: 5px;
  color: #7f929f;
  font-family: var(--font-mono);
  font-size: 9px;
}

.map-est {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.map-est-halo {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 163, 61, 0.28) 0%, rgba(232, 163, 61, 0.05) 65%, transparent 70%);
  animation: est-pulse 2.4s ease-out infinite;
}

.map-est-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #e8a33d;
  border: 2px solid #120d04;
  box-shadow: 0 0 12px rgba(232, 163, 61, 0.8);
}

.map-est.is-risk-high .map-est-dot {
  background: #e05d54;
  box-shadow: 0 0 12px rgba(224, 93, 84, 0.8);
}

.map-est.is-risk-high .map-est-halo {
  background: radial-gradient(circle, rgba(224, 93, 84, 0.3) 0%, rgba(224, 93, 84, 0.05) 65%, transparent 70%);
}

.map-est.is-risk-low .map-est-dot {
  background: #2dd4a7;
  box-shadow: 0 0 12px rgba(45, 212, 167, 0.8);
}

.map-est.is-contextual .map-est-halo {
  animation: none;
  border: 1px dashed rgba(158, 91, 14, 0.7);
  background: rgba(232, 163, 61, 0.13);
}

.map-est.is-contextual .map-est-dot {
  width: 12px;
  height: 12px;
  border: 3px solid #b66d15;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 8px rgba(77, 43, 7, 0.3);
}

.tracking-map-label {
  pointer-events: none;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--tracking-color, #8494a3) 70%, #fff);
  background: rgba(9, 17, 23, 0.95);
  box-shadow:
    inset 3px 0 0 var(--tracking-color, #8494a3),
    0 3px 12px rgba(24, 36, 44, 0.24);
}

.tracking-map-label.is-focused {
  border-width: 2px;
  box-shadow:
    inset 3px 0 0 var(--tracking-color, #8494a3),
    0 3px 12px rgba(24, 36, 44, 0.24);
}

.tracking-map-label span {
  display: block;
  color: #f4f8fb;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.35;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

.tracking-map-label.is-risk-high {
  border-color: var(--tracking-color, rgba(224, 93, 84, 0.4));
}

.tracking-map-label.is-risk-high span {
  color: #f4f8fb;
}

.map-est.has-shipment-color .map-est-dot {
  background: var(--tracking-color);
  box-shadow: 0 0 12px color-mix(in srgb, var(--tracking-color) 72%, transparent);
}

.map-est.has-shipment-color .map-est-halo {
  background: color-mix(in srgb, var(--tracking-color) 20%, transparent);
}

.map-est.has-shipment-color.is-contextual .map-est-halo {
  border-color: var(--tracking-color);
  background: color-mix(in srgb, var(--tracking-color) 12%, transparent);
}

.map-est.has-shipment-color.is-contextual .map-est-dot {
  border-color: var(--tracking-color);
  background: rgba(255, 255, 255, 0.94);
}

.map-est.has-shipment-color.is-focused .map-est-dot {
  transform: scale(1.15);
}

.tracking-observation-map-popup .maplibregl-popup-content {
  max-height: min(460px, 66dvh);
  overflow: auto;
  padding: 14px;
  border: 1px solid rgba(20, 50, 68, 0.18);
  border-radius: 8px;
  box-shadow: 0 16px 42px rgba(11, 26, 36, 0.24);
}

.tracking-observation-map-popup .maplibregl-popup-close-button {
  width: 34px;
  height: 34px;
  color: var(--muted);
  font-size: 20px;
}

.tracking-observation-popup .eyebrow {
  margin: 0 34px 3px 0;
  color: var(--faint);
  font-size: 9px;
}

.tracking-observation-popup h3 {
  margin: 0 34px 10px 0;
  font-size: 15px;
}

.tracking-observation-popup-events {
  display: grid;
  gap: 10px;
}

.tracking-observation-popup-events article + article {
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.tracking-observation-popup-events strong,
.tracking-observation-popup-events > article > span {
  display: block;
}

.tracking-observation-popup-events strong {
  font-size: 12px;
}

.tracking-observation-popup-events > article > span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11.5px;
}

.tracking-observation-popup-events dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
  margin: 9px 0 0;
}

.tracking-observation-popup-events dl div {
  min-width: 0;
}

.tracking-observation-popup-events dt {
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.tracking-observation-popup-events dd {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 10.5px;
}

.tracking-observation-popup-note {
  margin: 11px 0 0;
  padding-top: 9px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
}

@keyframes est-pulse {
  0% {
    transform: scale(0.55);
    opacity: 0.95;
  }
  70% {
    transform: scale(1.25);
    opacity: 0.25;
  }
  100% {
    transform: scale(1.45);
    opacity: 0;
  }
}

/* rail */

.tracking-rail {
  position: relative;
  min-height: 0;
  overflow: visible;
  border-left: 1px solid var(--line);
  background: var(--surface);
}

.tracking-rail-content {
  height: 100%;
  overflow: auto;
  padding: 18px;
}

.tracking-rail-toggle {
  position: absolute;
  left: -15px;
  top: 50%;
  z-index: 4;
  width: 30px;
  height: 54px;
  display: grid;
  place-items: center;
  padding: 0;
  transform: translateY(-50%);
  border: 1px solid #9fb1bc;
  border-radius: 7px;
  background: var(--surface);
  box-shadow: 0 3px 12px rgba(20, 42, 55, 0.18);
  color: #436174;
  cursor: pointer;
}

.tracking-rail-toggle:hover,
.tracking-rail-toggle:focus-visible {
  border-color: #2f6f8f;
  color: #0c6487;
}

.tracking-rail-grip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.tracking-rail-grip i {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}

.tracking-rail-collapsed {
  position: relative;
  width: 100%;
  height: 100%;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 15px 0 18px;
  border: 0;
  background: #f4f7f9;
  color: #365466;
  cursor: pointer;
}

.tracking-rail-collapsed-grip {
  position: absolute;
  left: -15px;
  top: 50%;
  width: 30px;
  height: 54px;
  transform: translateY(-50%);
  border: 1px solid #9fb1bc;
  border-radius: 7px;
  background: var(--surface);
  box-shadow: 0 3px 12px rgba(20, 42, 55, 0.18);
  color: #436174;
}

.tracking-rail-collapsed:hover,
.tracking-rail-collapsed:focus-visible {
  background: #e9f1f5;
  color: #0c6487;
}

.tracking-rail-collapsed:hover .tracking-rail-collapsed-grip,
.tracking-rail-collapsed:focus-visible .tracking-rail-collapsed-grip {
  border-color: #2f6f8f;
  color: #0c6487;
}

.tracking-rail-collapsed strong {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #0c6487;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
}

.tracking-rail-collapsed > span:last-child {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tracking-layout.is-rail-collapsed .tracking-rail-content,
.tracking-layout.is-rail-collapsed .tracking-rail-toggle {
  display: none;
}

.tracking-layout.is-rail-collapsed .tracking-rail-collapsed {
  display: flex;
}

.tracking-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.tracking-rail-head > div {
  min-width: 0;
}

.tracking-rail-head h3 {
  margin: 0;
  font-size: 14px;
}

.tracking-rail-head .eyebrow {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.tracking-select-all {
  min-width: 48px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
}

.tracking-select-all:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}

.tracking-select-all input,
.tracking-card-selector input {
  accent-color: #0c6487;
}

.tracking-cards {
  display: grid;
  gap: 10px;
}

.tracking-card {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
  transition: border-color 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
}

.tracking-card:hover {
  border-color: var(--line-strong);
}

.tracking-card:not(.is-selected) {
  opacity: 1;
}

.tracking-card.is-selected {
  border-color: color-mix(in srgb, var(--tracking-color) 60%, var(--line));
}

.tracking-card.is-active {
  border-color: var(--tracking-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tracking-color) 16%, transparent);
}

.tracking-card-selector {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
}

.tracking-card-selector input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.tracking-card-body {
  min-width: 0;
  padding: 12px 14px 13px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.tracking-card-body:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--tracking-color) 45%, transparent);
  outline-offset: -3px;
}

.tracking-card h4 {
  margin: 7px 0 4px;
  font-size: 13.5px;
}

.tracking-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tracking-shipment-swatch {
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: var(--tracking-color);
}

.tracking-search {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
}
.tracking-sort-note { margin: 9px 0 18px; font-size: 11px; color: var(--muted); }
.tracking-group { display: grid; gap: 12px; min-width: 0; align-content: start; }
.tracking-group + .tracking-group { margin-top: 14px; }
.tracking-group-heading { display: flex; justify-content: space-between; margin: 0 0 2px; font-size: 12px; color: var(--muted); }
.tracking-group-heading span { font-weight: 500; }
.tracking-status { margin-left: auto; color: var(--ink); background: var(--surface-soft); padding: 3px 6px; border-radius: 5px; font-size: 10px; text-align: right; }
.tracking-card h4 { font-size: 15px; line-height: 1.4; margin: 10px 0 6px; }
.tracking-card .tracking-carrier { font-weight: 650; margin-bottom: 9px; }
.tracking-card .tracking-stale { color: var(--ink); font-weight: 650; }
.tracking-card-body:not(button) { cursor: default; }
.tracking-card-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); }
.tracking-card-actions .text-button { font-size: 12px; white-space: nowrap; }
.tracking-history { padding: 0 14px 12px; }
.tracking-history h5 { font-size: 11px; margin: 12px 0 8px; color: var(--muted); }
.tracking-history ol { padding: 0 0 0 12px; margin: 0 0 0 3px; border-left: 2px solid var(--line); list-style: none; }
.tracking-history li + li { margin-top: 10px; }
.tracking-history li strong, .tracking-history li span { display: block; font-size: 11px; line-height: 1.5; }
.tracking-history li span { color: var(--muted); }
.tracking-rail-head { flex-wrap: wrap; gap: 12px; }

.tracking-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.tracking-dot.is-risk-high {
  background: var(--red);
}

.tracking-dot.is-risk-medium {
  background: var(--amber);
}

.tracking-dot.is-risk-low {
  background: var(--green);
}

.tracking-ref {
  color: var(--muted);
  font-size: 11px;
}

.tracking-score {
  margin-left: auto;
  font-weight: 800;
  font-size: 12.5px;
}

.tracking-score.is-risk-high {
  color: var(--red);
}

.tracking-score.is-risk-medium {
  color: var(--amber);
}

.tracking-score.is-risk-low {
  color: var(--green);
}

.tracking-meta {
  margin: 0;
  color: var(--ink);
  font-size: 11.5px;
  line-height: 1.45;
}

.tracking-meta.muted {
  color: var(--muted);
}

.field-hint {
  display: block;
  margin-top: 3px;
  color: var(--faint);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.field input[type="file"] {
  min-height: 0;
  padding: 9px 10px;
  border: 1px dashed var(--line-strong);
  background: var(--surface-soft);
  font-size: 12.5px;
  color: var(--muted);
}

.field input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.auth-secondary {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.auth-secondary .button {
  flex: 1;
}

.loading-screen {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--ink);
}

.loading-screen span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-top: 3px;
}

.loading-logo {
  width: 58px;
  height: 50px;
  object-fit: contain;
}

.app-layout {
  width: 100%;
  height: 100dvh;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  background: var(--surface);
}

.sidebar {
  min-height: 0;
  background: var(--nav);
  color: #e8eef2;
  display: flex;
  flex-direction: column;
  padding: 22px 18px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 4px 26px;
}

.brand-logo {
  width: 52px;
  height: 45px;
  object-fit: contain;
  flex: 0 0 auto;
}

.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #1e5a9f;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
}

.brand-title {
  font-size: 14px;
  font-weight: 750;
  line-height: 1;
}

.brand-subtitle,
.eyebrow {
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brand-subtitle {
  margin-top: 4px;
  font-size: 8px;
  color: #8593a1;
}

.nav-label {
  padding: 0 8px;
  margin: 8px 0 7px;
  font-size: 9px;
  color: #8593a1;
}

.nav-item {
  width: 100%;
  height: 40px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  color: #a8b2bd;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-weight: 650;
}

.nav-item.is-active,
.nav-item:hover {
  background: #1d2831;
  color: #fff;
}

.updates-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(11, 19, 24, 0.28);
}

.updates-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 90;
  width: min(400px, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  color: var(--ink);
  border-left: 1px solid var(--line);
  box-shadow: -18px 0 48px rgba(11, 19, 24, 0.16);
}

.updates-head {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.updates-head h2,
.updates-head p {
  margin: 0;
}

.updates-head h2 {
  font-size: 20px;
}

.updates-head p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}
.text-button,
.file-shipment-link {
  padding: 0;
  background: transparent;
  color: var(--blue);
  cursor: pointer;
  font-size: 12px;
  font-weight: 750;
  text-align: left;
}
.text-button:disabled {
  color: var(--faint);
  cursor: default;
}

.updates-list {
  min-height: 0;
  overflow: auto;
}

.update-row {
  width: 100%;
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr);
  gap: 12px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.update-row.is-unread {
  background: #f4f9fd;
}

.update-indicator {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--blue);
}

.update-indicator.warning {
  background: var(--amber);
}

.update-indicator.critical {
  background: var(--red);
}

.update-copy,
.update-copy strong,
.update-copy span,
.update-copy time {
  display: block;
  min-width: 0;
}

.update-copy strong {
  font-size: 13px;
}

.update-copy span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.update-copy time {
  margin-top: 7px;
  color: var(--faint);
  font-size: 10px;
}

.updates-empty {
  margin: 0;
  padding: 28px 20px;
  color: var(--muted);
  font-size: 13px;
}

.workspace-chip {
  margin-top: auto;
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--nav-soft);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.workspace-chip:hover,
.workspace-chip.is-active {
  background: #1d2831;
  border-color: rgba(255, 255, 255, 0.06);
}

.workspace-chip.is-static {
  cursor: default;
}

.workspace-chip.is-static:hover {
  background: var(--nav-soft);
  border-color: transparent;
}

/* Without min-width: 0 this flex child refuses to shrink, so long workspace
   names run to the chip edge instead of truncating. */

.workspace-chip-text {
  min-width: 0;
}

.workspace-chip strong,
.workspace-chip span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-chip strong {
  font-size: 12px;
}

.workspace-chip span {
  margin-top: 2px;
  color: #8593a1;
  font-size: 11px;
}

.workspace-chip:hover span,
.workspace-chip.is-active span {
  color: #91a0ad;
}

.workspace-chip.is-static:hover span {
  color: #8593a1;
}

.main {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.topbar {
  min-height: 70px;
  display: flex;
  /* The shell column flexes; the bar itself must never be squeezed by tall
     page content or its actions (the 40px updates button) spill out of it. */
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 28px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.topbar h1 {
  margin: 0;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: 0;
}

.topbar p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.topbar-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
}

.topbar-updates-button {
  position: relative;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
}

.topbar-updates-button:hover,
.topbar-updates-button.is-active {
  border-color: #a9bfd0;
  background: #f1f6f9;
  color: var(--blue);
}

.topbar-updates-button:focus-visible {
  outline: 3px solid rgba(40, 118, 181, 0.2);
  outline-offset: 2px;
}

.topbar-updates-icon {
  width: 19px;
  height: 19px;
}

.topbar-updates-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 19px;
  height: 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 2px solid var(--surface);
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}

.setup-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.button {
  min-height: 38px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.button.secondary {
  color: var(--ink);
  background: var(--surface-soft);
  border: 1px solid var(--line);
}

.button.ghost {
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
}

.button.danger {
  color: var(--red);
  background: var(--red-bg);
  border: 1px solid rgba(179, 60, 53, 0.24);
}

.button.danger.solid {
  color: #fff;
  background: var(--red);
  border-color: var(--red);
}

.button.danger.solid:hover:not(:disabled) {
  background: #96342f;
}

.button.compact {
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
}

.icon-button {
  min-width: 32px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
  text-decoration: none;
}

.icon-button:hover {
  border-color: var(--line-strong);
  background: var(--surface-soft);
}

.icon-button.danger {
  color: var(--red);
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

/* In-flight action feedback: the pressed button grows a spinner and swaps its
   label (e.g. "Sending code…") so a slow network never reads as a dead click. */

.button.is-loading {
  opacity: 0.85;
}

.button.is-loading::before {
  content: "";
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  border: 2px solid rgba(127, 140, 152, 0.35);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: button-spin 0.7s linear infinite;
}

@keyframes button-spin {
  to {
    transform: rotate(360deg);
  }
}

.button:focus-visible,
.field input:focus-visible,
.field select:focus-visible {
  border-color: #7aa6ca;
  box-shadow: 0 0 0 3px rgba(35, 104, 167, 0.14);
}

/* Single-column workspace: hosts the onboarding steps and the full-width
   shipment detail dashboard. The case list lives on its own page below. */

.workspace {
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}

/* --- Shipments list page --- */

.shipments-page {
  min-width: 0;
  min-height: 0;
  flex: 1;
  overflow: auto;
  padding: 28px;
}

/* Wraps rather than overflows: between 681 and 700px the tabs, the sort control
   and a full-width New shipment button do not fit on one line, and the icon-only
   treatment does not start until 680. A second line is a better answer at that
   width than either an overflow or a button with its label taken away. */
.shipments-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.shipment-new-button {
  min-height: 40px;
  justify-content: center;
}
.shipments-toolbar-actions {
  min-width: 0;
  display: flex;
  align-items: center;
}

.shipments-toolbar-actions {
  gap: 10px;
}

.shipment-new-icon {
  font-size: 18px;
  line-height: 1;
}

.shipment-tabs {
  display: flex;
  align-items: center;
  gap: 22px;
}

.shipment-tabs button {
  position: relative;
  min-width: 0;
  min-height: 38px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: 750;
}

.shipment-tabs button span {
  margin-left: 5px;
  color: var(--faint);
  font-weight: 800;
}

.shipment-tabs button.is-active {
  color: var(--ink);
}

.shipment-tabs button.is-active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--blue);
}

.shipment-tabs button.is-active span {
  color: var(--blue);
}

.metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 220px));
  gap: 8px;
  margin-bottom: 16px;
}

.metric {
  border: 1px solid var(--line);
  background: var(--surface-soft);
  border-radius: 10px;
  padding: 12px;
}

.metric strong {
  display: block;
  font-size: 22px;
  line-height: 1;
}

.metric span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 10px;
}

.shipment-list {
  min-width: 0;
}

.shipments-bulk-archive {
  border-color: #d39a95;
  color: #9f342f;
}

.shipments-table {
  min-width: 0;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.shipments-table-head,
.shipment-row {
  min-width: 1058px;
  display: grid;
  grid-template-columns: minmax(190px, 1.7fr) minmax(150px, 1.25fr) 180px minmax(130px, 1fr) minmax(130px, 1fr) 110px 110px;
  gap: 14px;
  align-items: center;
}

.shipments-table.is-selectable .shipments-table-head,
.shipments-table.is-selectable .shipment-row {
  min-width: 1118px;
  grid-template-columns: 44px minmax(190px, 1.7fr) minmax(150px, 1.25fr) 180px minmax(130px, 1fr) minmax(130px, 1fr) 110px 110px;
}

/* Which Project a shipment serves, and the way into it. */
.shipment-project-cell { min-width: 0; }

.shipment-project-link {
  display: grid;
  gap: 2px;
  width: 100%;
  min-width: 0;
  padding: 5px 8px;
  margin: -5px -8px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.shipment-project-link:hover {
  background: var(--blue-bg, #eaf2fb);
}

.shipment-project-link:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}

.shipment-project-link strong {
  overflow: hidden;
  color: var(--blue, #2368a7);
  font-size: 12.5px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shipment-project-link .mono {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
}

.shipment-project-none {
  color: var(--faint);
  font-size: 12px;
  font-style: italic;
}

.shipments-table-head {
  min-height: 42px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.shipment-row {
  width: 100%;
  min-height: 64px;
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  color: #202a33;
  text-align: left;
  font-size: 12px;
  cursor: pointer;
}

.shipment-row.is-selected {
  background: #f2f7fb;
  box-shadow: inset 3px 0 0 var(--blue);
}

.shipment-row.is-selected:hover {
  background: #edf5fb;
}

.shipments-table-body .shipment-row:last-child {
  border-bottom: 0;
}

.shipment-row:hover {
  background: #f4f8fb;
}

.shipment-row:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

/* The cell is the target, not the 18px box inside it: a label forwards the
   click natively, so the whole track is tappable without growing the control. */
.shipment-select-cell {
  width: 44px;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.shipment-select-checkbox {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin: 0;
  accent-color: var(--blue);
  cursor: pointer;
}

.shipment-select-checkbox:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.shipment-select-all-label {
  display: none;
}

.shipment-primary strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
}

.shipment-primary span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.shipment-row.is-archived .shipment-primary strong {
  color: var(--muted);
}

.shipments-empty {
  padding: 48px 0 24px;
}

.mono {
  font-family: var(--font-mono);
}

.shipment-ref,
.muted {
  color: var(--muted);
}

.shipment-ref {
  font-size: 11px;
  font-weight: 700;
}

.badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  border-radius: 7px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 750;
  background: var(--amber-bg);
  color: var(--amber);
  white-space: nowrap;
}

/* A shipment status is a word ("Ordered") in the common case and a sentence
   ("Receipt confirmed; order completion unknown") in the uncommon one, so the
   chip wraps inside its own column instead of running across the next one. */
.shipment-row > div[data-label="Status"] .badge,
.home-cell-status .badge,
.global-search-item .badge {
  height: auto;
  min-height: 24px;
  padding: 4px 8px;
  line-height: 1.35;
  white-space: normal;
  text-wrap: balance;
}

.badge.red {
  background: var(--red-bg);
  color: var(--red);
}

.badge.green {
  background: var(--green-bg);
  color: var(--green);
}

.badge.neutral {
  background: #eef2f5;
  color: var(--muted);
}

.badge.source {
  background: #e7f1fa;
  color: var(--blue);
}

.detail {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 28px 34px 42px;
}

.detail-back-row {
  margin-bottom: 14px;
}

.detail-back {
  border: 0;
  font-size: 13px;
}

.account-page {
  min-height: 0;
  overflow: auto;
  padding: 38px 52px 58px;
}

.account-topbar {
  align-items: center;
  justify-content: center;
  padding: 0 52px;
}

.account-topbar-inner {
  width: min(860px, 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.account-save-button {
  min-width: 150px;
}

.account-stack {
  display: grid;
  width: min(860px, 100%);
  max-width: 860px;
  margin: 0 auto;
}

.account-section {
  padding: 30px 0;
  border-top: 1px solid var(--line);
}

.account-section:first-child {
  border-top: 0;
  padding-top: 0;
}

.account-section-heading {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}

.site-manager-add {
  margin-left: auto;
  flex-shrink: 0;
}

.account-section-heading h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: 0;
}

.account-section-heading p {
  max-width: 620px;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.account-section-body {
  display: grid;
  gap: 14px;
  max-width: 620px;
  margin-left: 42px;
}

.site-manager-body {
  max-width: none;
}

.site-manager-list {
  display: grid;
  border-bottom: 1px solid var(--line);
}

.site-manager-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 15px 0;
  border-top: 1px solid var(--line);
}

.site-manager-row.is-inactive {
  opacity: 0.7;
}

.site-manager-marker {
  position: relative;
  width: 31px;
  height: 31px;
  border: 1px solid #9aabb5;
  border-radius: 4px;
  background: #f5f8fa;
}

.site-manager-marker::before,
.site-manager-marker::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 1px;
  background: #8396a2;
}

.site-manager-marker::before {
  left: 7px;
  top: 7px;
}

.site-manager-marker::after {
  right: 7px;
  top: 7px;
}

.site-manager-marker i {
  position: absolute;
  left: 12px;
  bottom: 0;
  width: 7px;
  height: 8px;
  border-radius: 1px 1px 0 0;
  background: #6e8390;
}

.site-manager-marker.is-default {
  border-color: #0c6487;
  background: #0c6487;
}

.site-manager-marker.is-default::before,
.site-manager-marker.is-default::after,
.site-manager-marker.is-default i {
  background: #c7efff;
}

.site-manager-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.site-manager-title {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.site-manager-title strong,
.site-manager-copy span,
.site-manager-copy small {
  overflow-wrap: anywhere;
}

.site-manager-title strong {
  font-size: 14px;
}

.site-manager-copy > span {
  color: var(--muted);
  font-size: 12px;
}

.site-manager-copy small {
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 10px;
}

.site-manager-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px 12px;
}

.text-button.is-danger {
  color: var(--red);
}

.receiving-site-dialog {
  width: min(620px, 100%);
  max-height: calc(100dvh - 40px);
  overflow: auto;
}

.receiving-site-form {
  margin-top: 20px;
}

.site-default-control {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.site-default-control input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.site-homebase-note {
  padding: 11px 13px;
  border-left: 3px solid #0c6487;
  background: #edf7fa;
}

.site-homebase-note span {
  color: #0c6487;
  font-size: 12px;
  font-weight: 800;
}

.site-homebase-note p {
  margin: 3px 0 0;
  font-size: 12px;
}

.home-base-shipments {
  display: grid;
  min-width: 0;
  margin: 8px 0 2px;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.home-base-shipments legend {
  width: 100%;
  padding: 12px 0 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.home-base-shipment {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.home-base-shipment input {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 0;
}

.home-base-shipment span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.home-base-shipment strong,
.home-base-shipment small {
  overflow-wrap: anywhere;
}

.home-base-shipment strong {
  font-size: 13px;
}

.home-base-shipment small {
  color: var(--muted);
  font-size: 12px;
}

.account-rows {
  display: grid;
  gap: 0;
}

.account-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  min-height: 38px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}

.account-row:first-child {
  border-top: 0;
}

.account-row span {
  color: var(--muted);
  font-size: 13px;
}

.account-row strong {
  min-width: 0;
  text-align: right;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.coordinate-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.coordinate-pair.is-empty {
  display: none;
}

.account-signout-section {
  display: flex;
  justify-content: flex-start;
}

.detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.detail-head-copy {
  min-width: 0;
}

.detail-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.detail-head h2 {
  margin: 8px 0 0;
  font-size: 31px;
  line-height: 1.12;
  letter-spacing: 0;
}

.archive-banner {
  display: grid;
  gap: 6px;
  margin: -12px 0 24px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcfd;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.archive-banner strong {
  color: var(--ink);
  font-size: 14px;
}

.section {
  padding: 21px 0;
  border-top: 1px solid var(--line);
}

.section h3 {
  margin: 0 0 14px;
  font-size: 15px;
}

.section-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
}

.section-heading-row h3 {
  margin: 0;
}

.section-heading-row p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.fact,
.score {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 10px;
  padding: 13px;
}

.fact span,
.score span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 6px;
}

.fact strong,
.score strong {
  display: block;
  font-size: 16px;
}

/* ---- Shipment State: operational journey ---- */

.journey-section {
  padding: 0;
  border-top: 0;
}

.journey {
  margin: 0 -34px;
  padding: 22px 34px 20px;
  border-bottom: 1px solid var(--line);
  background: #f4f7f8;
}

.journey-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.journey-head h3 {
  margin: 5px 0 0;
  font-size: 18px;
  line-height: 1.25;
}

.journey-booking {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.journey-booking.requested {
  border-color: #d59a39;
  background: var(--amber-bg);
  color: #85540e;
}

.journey-booking.confirmed {
  border-color: #71a48a;
  background: var(--green-bg);
  color: var(--green);
}

.stage-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.journey-evidence {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0 24px;
  margin: 16px 0 0 146px;
  border-top: 1px solid var(--line);
}

.journey-evidence-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  padding-top: 10px;
  white-space: nowrap;
}

.journey-source-link,
.journey-guidance-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}

.journey-source-link:hover,
.journey-source-link:focus-visible,
.journey-guidance-link:hover,
.journey-guidance-link:focus-visible {
  text-decoration: underline;
}

.journey-head-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 10px;
}

.journey-head-meta > span {
  white-space: nowrap;
}
.journey-contract-copy > span {
  display: block;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: uppercase;
}

.journey-contract {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.journey-contract-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
}

.journey-contract-copy {
  max-width: 620px;
}

.journey-contract-copy strong {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.35;
}

.journey-contract-copy p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.journey-contract-head .journey-evidence-actions {
  flex: 0 0 auto;
  padding-top: 0;
}

.journey-contract-source {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

/* ---- Shipment State: attention banner ---- */

.shipment-update-banner {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 15px;
  margin: 0 0 22px;
  padding: 13px 16px;
  border: 1px solid #0f61b8;
  border-radius: 8px;
  background: #146fd1;
  box-shadow: 0 5px 16px rgba(16, 72, 128, 0.18);
  color: #fff;
}

.shipment-update-copy {
  min-width: 0;
}

.shipment-update-banner strong,
.shipment-update-banner span {
  display: block;
}

.shipment-update-banner strong {
  color: #fff;
  font-size: 13px;
  line-height: 1.3;
}

.shipment-update-banner > div > span {
  max-width: 1480px;
  margin-top: 3px;
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
}

.shipment-update-indicator {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.42);
  border-top-color: #fff;
  border-radius: 50%;
  animation: tracking-connection-spin 0.9s linear infinite;
}

.shipment-update-dismiss {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.shipment-update-dismiss:hover {
  background: rgba(255, 255, 255, 0.14);
}

.shipment-update-dismiss:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.shipment-update-banner.is-complete {
  border-color: #0d7338;
  background: #11853f;
  box-shadow: 0 5px 16px rgba(14, 104, 50, 0.18);
}

.shipment-update-banner.is-complete .shipment-update-indicator {
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.9);
  background: transparent;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  animation: none;
}

.shipment-update-banner.is-complete strong {
  color: #fff;
}

.attention-banner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--red);
  background: var(--red-bg);
  border-radius: 10px;
  padding: 13px 15px;
  margin-bottom: 18px;
}

.attention-banner strong {
  color: var(--red);
  font-size: 13px;
}

.attention-banner span {
  color: var(--ink);
  font-size: 13px;
}

.review-failure-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding: 13px 15px;
  border: 1px solid #d69b2d;
  border-radius: 8px;
  background: #fff8e8;
}

.review-failure-banner > div {
  min-width: 0;
}

.review-failure-banner strong,
.review-failure-banner span {
  display: block;
}

.review-failure-banner strong {
  color: #805500;
  font-size: 13px;
}

.review-failure-banner span {
  margin-top: 3px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}

.review-failure-banner .button {
  flex: 0 0 auto;
}

.tracking-connection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: -4px 0 24px;
  padding: 15px 16px;
  border: 1px solid #bfd4e7;
  border-radius: 8px;
  background: var(--blue-bg);
}

.tracking-connection.is-connected {
  border-color: #b8dac8;
  background: var(--green-bg);
}

.tracking-connection.is-waiting {
  border-color: #ead19f;
  background: var(--amber-bg);
}

.tracking-connection-status,
.tracking-connection-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.tracking-connection-status > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.tracking-connection-status strong {
  font-size: 14px;
}

.tracking-connection-status span:last-child {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.tracking-connection-indicator {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border: 2px solid #aac8df;
  border-radius: 50%;
}

.tracking-connection.is-connecting .tracking-connection-indicator {
  border-top-color: var(--blue);
  animation: tracking-connection-spin 0.8s linear infinite;
}

.tracking-connection.is-connected .tracking-connection-indicator {
  border: 5px solid var(--green);
}

.tracking-connection.is-waiting .tracking-connection-indicator {
  border: 5px solid var(--amber);
}

.tracking-connection-actions {
  flex: 0 0 auto;
}

.tracking-connection-actions code {
  max-width: 220px;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 12px;
}

@keyframes tracking-connection-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tracking-layout {
      transition: none;
    }

  .tracking-connection.is-connecting .tracking-connection-indicator,
    .shipment-update-indicator {
      animation: none;
    }
}

/* ---- Commercial items and physical deliveries ---- */

.fulfillment-section {
  min-width: 0;
  padding-top: 26px;
}

.fulfillment-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.fulfillment-heading h3,
.fulfillment-heading p {
  margin: 0;
}

.fulfillment-heading p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
}

.fulfillment-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.fulfillment-files-link {
  color: var(--blue);
  font-size: 12px;
  white-space: nowrap;
}

.fulfillment-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 68px);
  min-width: 0;
}

.fulfillment-ledger-column {
  min-width: 0;
}

.fulfillment-ledger-column > h4 {
  margin: 0;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--line-strong);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.case-item-row {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.case-item-copy,
.case-item-meta {
  min-width: 0;
}

.case-item-copy strong,
.case-item-copy span,
.case-item-meta strong,
.case-item-meta span {
  display: block;
}

.case-item-copy strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.case-item-copy span,
.case-item-meta span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.case-item-meta {
  flex: 0 0 auto;
  text-align: right;
}

.case-item-meta strong {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
}

.case-item-meta span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.delivery-ledger-row {
  min-width: 0;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.delivery-ledger-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.delivery-ledger-head h5 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.delivery-ledger-status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  line-height: 1.35;
  text-transform: uppercase;
}

.delivery-ledger-status i {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  background: currentColor;
}

.delivery-ledger-status.is-planned {
  color: #8a5907;
}

.delivery-ledger-status.is-evidenced {
  color: var(--green);
}

.delivery-ledger-status.is-alert {
  color: var(--red);
}

.delivery-ledger-row > p,
.fulfillment-packages p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.delivery-ledger-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 9px;
}

.fulfillment-packages {
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.fulfillment-packages h5 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.fulfillment-ledger-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.fulfillment-empty {
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

/* ---- Evidence drawer ---- */

.evidence-drawer {
  border-top: 1px solid var(--line);
  margin-top: 26px;
  padding-top: 4px;
}

.evidence-drawer > summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 8px;
  user-select: none;
}

.evidence-drawer > summary::-webkit-details-marker {
  display: none;
}

.evidence-drawer > summary::before {
  content: "▸";
  color: var(--faint);
  font-size: 11px;
}

.evidence-drawer[open] > summary::before {
  content: "▾";
}

.evidence-drawer > summary .muted {
  font-weight: 400;
  font-size: 12px;
  color: var(--muted);
}

.list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.row {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 10px;
  padding: 13px 14px;
}

.row[data-shipment-document-id] {
  scroll-margin-block: 24px;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.row[data-shipment-document-id]:focus,
.row[data-shipment-document-id].is-term-source {
  border-color: var(--blue);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(32, 112, 184, 0.14);
}

.row-top {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.document-row-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.row-title {
  font-weight: 750;
}

.row p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.document-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.document-row > div {
  min-width: 0;
}

.review-note {
  color: var(--amber);
  font-weight: 650;
}

.email-evidence-meta {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.email-evidence-meta dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 18px;
  margin: 0;
}

.email-evidence-meta dl > div {
  min-width: 0;
}

.email-evidence-meta dt {
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.email-evidence-meta dd {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.email-attachment-list {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 11px;
}

.email-body-preview {
  margin-top: 10px;
}

.email-body-preview > summary {
  width: fit-content;
  cursor: pointer;
  color: var(--blue);
  font-size: 12px;
  font-weight: 750;
}

.email-body-preview pre {
  max-height: 260px;
  margin: 10px 0 0;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #35404a;
  font: 12px/1.55 var(--font-sans);
}

@media (max-width: 680px) {
  .email-evidence-meta dl {
      grid-template-columns: 1fr;
    }
}

.extracted-fields {
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.extracted-fields > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.extracted-fields > summary::-webkit-details-marker {
  display: none;
}

.extracted-fields > summary::before {
  content: "▸";
  color: var(--faint);
}

.extracted-fields[open] > summary::before {
  content: "▾";
}

.extracted-fields > summary span {
  margin-left: auto;
  color: var(--faint);
  font-weight: 500;
}

.extracted-fields-table {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.extracted-field-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1.4fr) 54px;
  gap: 10px;
  align-items: start;
  color: var(--muted);
  font-size: 12px;
}

.extracted-field-row strong {
  min-width: 0;
  color: var(--ink);
  font-weight: 700;
  word-break: break-word;
}

.extracted-field-row em {
  color: var(--faint);
  font-style: normal;
  text-align: right;
}

.timeline {
  display: grid;
  gap: 10px;
}

.event {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 12px;
}

.event-dot {
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--blue);
}

.event strong {
  display: block;
  font-size: 13px;
}

.event span {
  color: var(--muted);
  font-size: 12px;
}

.side-section {
  padding: 20px;
  border-bottom: 1px solid var(--line);
}

.side-section h3 {
  margin: 0 0 12px;
  font-size: 14px;
}

.next-step-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 12px;
}

.next-step-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.next-step-row .next-step-actions {
  flex-shrink: 0;
  margin-top: 0;
}

.next-step-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.conflict-resolution-section {
  background: #fff8f5;
}

.conflict-resolution-list {
  display: grid;
  gap: 20px;
}

/* One card, not a card inside a card: the section is the alert surface and
   each conflict lays out flat inside it. Stacked conflicts divide with a
   rule instead of extra card chrome. */
.conflict-resolution {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(280px, 1.2fr);
  gap: 20px 28px;
}

.conflict-resolution + .conflict-resolution {
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.conflict-resolution-copy p {
  max-width: 680px;
}

.conflict-resolution-options {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.conflict-resolution-options legend {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.conflict-resolution-option {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
}

.conflict-resolution-option:has(input:checked) {
  border-color: var(--blue);
  box-shadow: 0 0 0 1px var(--blue);
}

.conflict-resolution-option input {
  width: 16px;
  height: 16px;
  margin: 3px 0 0;
  accent-color: var(--blue);
}

.conflict-resolution-option span,
.conflict-resolution-option small {
  display: block;
  min-width: 0;
}

.conflict-resolution-option small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.conflict-resolution-actions {
  grid-column: 2;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  align-items: end;
  gap: 12px;
}

.conflict-resolution-actions label > span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.conflict-resolution-actions label small {
  font-weight: 400;
}

.conflict-resolution-actions input {
  width: 100%;
}

@media (max-width: 820px) {
  .conflict-resolution {
      grid-template-columns: 1fr;
    }

  .conflict-resolution-actions {
      grid-column: 1;
    }
}

@media (max-width: 540px) {
  .conflict-resolution-actions {
      grid-template-columns: 1fr;
    }

  .conflict-resolution-actions .button {
      width: 100%;
    }
}

.case-note p {
  margin-top: 0;
  color: var(--ink);
  white-space: pre-wrap;
}

.case-note > span {
  display: block;
  margin-top: 8px;
  color: var(--faint);
  font-size: 11px;
}

/* --- Workspace files --- */

.files-page {
  min-width: 0;
  min-height: 0;
  flex: 1;
  overflow: auto;
  padding: 28px;
}

.files-tab {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: -1px;
  padding: 0 0 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.files-tab:hover,
.files-tab:focus-visible {
  color: var(--blue);
}

.files-tab.is-active {
  border-bottom-color: var(--blue);
  color: var(--ink);
}

.files-tab strong {
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 10px;
}

.files-tab.is-active strong {
  background: #e3f1fb;
  color: var(--blue);
}

.reference-safety {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin: -8px 0 22px;
  padding: 12px 14px;
  border-top: 1px solid #bdd7ea;
  border-bottom: 1px solid #bdd7ea;
  background: #eef7fd;
  color: var(--muted);
}

.reference-safety > span {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #73a9ce;
  border-radius: 50%;
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
}

.reference-safety p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}

.reference-safety strong {
  color: var(--ink);
}

.files-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.files-toolbar > span {
  color: var(--muted);
  font-size: 12px;
}

.files-table {
  min-width: 0;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.files-table-head,
.file-table-row {
  min-width: 860px;
  display: grid;
  grid-template-columns: minmax(180px, 2fr) minmax(90px, 1fr) 110px 80px 110px 55px 150px;
  gap: 14px;
  align-items: center;
}

.files-table.is-reference .files-table-head,
.files-table.is-reference .file-table-row {
  grid-template-columns:
    minmax(220px, 2fr)
    minmax(105px, 0.8fr)
    minmax(110px, 0.9fr)
    minmax(90px, 0.7fr)
    80px
    110px
    150px;
}

.files-table-head {
  min-height: 42px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.file-table-row {
  min-height: 68px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

.file-table-row:last-child {
  border-bottom: 0;
}

.file-primary,
.file-primary strong,
.file-primary span {
  display: block;
  min-width: 0;
}

.file-primary strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-primary span {
  margin-top: 3px;
  overflow: hidden;
  color: var(--faint);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-shipment-link {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.external-events-page {
  min-width: 0;
  min-height: 0;
  flex: 1;
  overflow: auto;
  padding: 28px;
}

.external-events-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid var(--red);
  border-radius: 8px;
  background: var(--red-bg);
}

.external-events-error div,
.external-events-error strong,
.external-events-error span {
  display: block;
  min-width: 0;
}

.external-events-error span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.external-events-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-bottom: 14px;
}
.external-events-filter {
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
}
.external-events-filter:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(39, 111, 181, 0.11);
}

.external-events-filters {
  min-width: 0;
  display: flex;
  align-items: center;
  flex: 1 1 560px;
  flex-wrap: wrap;
  gap: 8px;
}

.external-events-filters label {
  min-width: 0;
  flex: 1 1 128px;
}

.external-events-filter {
  width: 100%;
  padding: 0 30px 0 10px;
  cursor: pointer;
}

.external-events-clear {
  flex: 0 0 auto;
  padding: 8px 4px;
}

.external-events-result-count {
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}
.external-event-row {
  min-width: 780px;
  display: grid;
  grid-template-columns:
    minmax(280px, 2.4fr) minmax(150px, 1fr) 100px minmax(130px, 0.9fr)
    minmax(130px, 0.9fr);
  gap: 18px;
  align-items: center;
}

.external-event-row {
  position: relative;
  min-height: 88px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  outline: none;
  transition:
    background-color 140ms ease,
    box-shadow 140ms ease;
}

.external-event-row:hover {
  background: #f8fafb;
}

.external-event-row:focus-visible,
.external-event-row.is-selected {
  background: #f5f9fc;
  box-shadow: inset 3px 0 0 var(--blue);
}

.external-event-row:last-child {
  border-bottom: 0;
}

.external-event-row strong,
.external-event-row span {
  display: block;
  min-width: 0;
}

.external-event-row strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.external-event-row span {
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.external-event-row .external-event-status {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  width: fit-content;
  margin-top: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1;
}

.external-event-status::before {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #98a4af;
  content: "";
}

.external-event-status.is-active {
  color: var(--green);
}

.external-event-status.is-active::before {
  background: var(--green);
}

.external-event-status.is-warning {
  color: #8a5a00;
}

.external-event-status.is-warning::before {
  background: #b87900;
}

.external-event-status.is-critical {
  color: var(--red);
}

.external-event-status.is-critical::before {
  background: var(--red);
}

.external-event-status.is-upcoming {
  color: var(--blue);
}

.external-event-status.is-upcoming::before {
  background: var(--blue);
}

.external-event-primary strong {
  font-size: 14px;
}

.external-event-primary > span {
  display: -webkit-box;
  margin-top: 6px;
  color: #5b6975;
  line-height: 1.45;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.external-event-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.external-event-heading strong {
  min-width: 0;
  flex: 1;
  display: -webkit-box;
  line-height: 1.35;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.external-events-empty {
  margin: 0;
  padding: 36px 18px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

body.external-event-drawer-open {
  overflow: hidden;
}

.external-event-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(12, 22, 29, 0.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.external-event-drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.external-event-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 81;
  width: min(580px, 100vw);
  margin: 0;
  overflow: hidden;
  border: 0;
  border-left: 1px solid var(--line-strong);
  background: #f5f7f8;
  box-shadow: -18px 0 50px rgba(16, 24, 32, 0.18);
  opacity: 0;
  pointer-events: none;
  transform: translateX(100%);
  visibility: hidden;
  transition:
    transform 180ms ease,
    opacity 180ms ease,
    visibility 0s linear 180ms;
}

.external-event-drawer.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  visibility: visible;
  transition-delay: 0s;
}

.external-event-drawer-head {
  min-height: 112px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 23px 24px 21px;
  background: var(--nav);
  color: #f5f7f8;
}

.external-event-drawer-head > div {
  min-width: 0;
}

.external-event-drawer-head > div > span {
  display: block;
  overflow: hidden;
  color: #aebac3;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 650;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.external-event-drawer-head h2 {
  margin: 7px 0 0;
  color: #f5f7f8;
  font-size: 18px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.external-event-drawer-close {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-color: transparent;
  background: transparent;
  color: #b8c3ca;
  font-size: 23px;
}

.external-event-drawer-close:hover,
.external-event-drawer-close:focus-visible {
  color: #fff;
}

.external-event-drawer-body {
  height: calc(100dvh - 112px);
  padding: 0 24px 48px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.external-event-detail-loading {
  margin: 0;
  padding: 36px 0;
  color: var(--muted);
  font-size: 13px;
}

.external-event-detail-error {
  margin: 18px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--red);
  border-radius: 8px;
  background: var(--red-bg);
}

.external-event-detail-error strong,
.external-event-detail-error span {
  display: block;
}

.external-event-detail-error span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.external-event-detail-intro {
  padding: 24px 0 22px;
}

.external-event-detail-statuses {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.external-event-detail-statuses .external-event-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.external-event-detail-intro > p {
  margin: 15px 0 0;
  color: #34414b;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.external-event-detail-section {
  padding: 23px 0 0;
  border-top: 1px solid var(--line);
}

.external-event-detail-section + .external-event-detail-section {
  margin-top: 24px;
}

.external-event-detail-section h3 {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 13px;
}

.external-event-detail-note {
  max-width: 490px;
  margin: -2px 0 13px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.55;
}

.external-event-detail-facts {
  margin: 0;
}

.external-event-detail-facts > div {
  min-width: 0;
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.external-event-detail-facts dt,
.external-event-detail-facts dd {
  min-width: 0;
  margin: 0;
}

.external-event-detail-facts dt {
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 650;
  text-transform: uppercase;
}

.external-event-detail-facts dd {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.external-event-source-link {
  width: fit-content;
  margin-top: 14px;
}

.files-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 16px;
}

.files-pagination span {
  color: var(--muted);
  font-size: 12px;
}

/* --- Add information and file editing --- */

.unsaved-dialog.information-dialog {
  width: min(720px, calc(100vw - 32px));
  max-height: min(800px, calc(100dvh - 32px));
  overflow: auto;
}

.information-dialog .form {
  gap: 18px;
  margin-top: 18px;
}

.information-kicker {
  display: block;
  margin-bottom: 6px;
  color: var(--blue);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* One Action, one dialog: remediation choices and the prepared email replace
   each other inside this surface instead of opening nested overlays. */
.unsaved-dialog.remediation-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: min(820px, calc(100dvh - 32px));
  overflow: auto;
  padding: 0;
}

.remediation-head {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 24px 26px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}

.remediation-head h2 { margin: 2px 0 0; }

.remediation-head p {
  max-width: 610px;
  margin-top: 7px;
}

.remediation-body { padding: 24px 26px 26px; }

.remediation-review-reason {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.remediation-comparison {
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: 11px;
  overflow: hidden;
  background: var(--surface);
}
.remediation-comparison table { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 0; }
.remediation-comparison :is(th, td) { padding: 14px 18px; vertical-align: top; text-align: left; overflow-wrap: anywhere; }
.remediation-comparison :is(th + th, td + td) { border-left: 1px solid var(--line); }
.remediation-comparison th { background: var(--surface-soft); text-transform: none; }
.remediation-source-kind { display: block; margin-bottom: 8px; color: var(--blue); font-size: 11px; line-height: 1.4; font-weight: 600; }
.remediation-comparison h3, .remediation-source-additional h3 {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2.8em;
  max-height: 2.8em;
}
.remediation-source-date { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; font-weight: 400; }
.remediation-comparison-readings td { border-top: 1px solid var(--line); padding-bottom: 10px; }
.remediation-comparison-readings td > span, .remediation-comparison-quotes td > span { display: block; color: var(--muted); font-size: 12px; }
.remediation-comparison-readings strong { display: block; margin-top: 4px; font-size: 28px; line-height: 1.3; color: var(--ink); }
.remediation-comparison-readings strong > span { color: var(--blue); }
.remediation-comparison-contents td { padding-top: 0; padding-bottom: 10px; color: var(--muted); font-size: 12px; }
.remediation-comparison-quotes td { padding-top: 0; padding-bottom: 3px; }
.remediation-comparison blockquote, .remediation-source-additional blockquote { margin: 6px 0 0; padding: 0; border: 0; font-size: 14px; line-height: 1.6; color: var(--ink); white-space: pre-line; }
.remediation-source-missing { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.remediation-comparison-links td { padding-top: 0; padding-bottom: 10px; }
.remediation-comparison .text-button { min-height: 40px; font-size: 13px; }
.remediation-source-toggle { margin-top: 10px; min-height: 36px; font-size: 13px; }
.remediation-source-additional { margin-top: 10px; padding: 14px; border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: 11px; background: var(--surface); overflow-wrap: anywhere; }
.remediation-additional-reading { margin: 10px 0; color: var(--muted); font-size: 12px; }
.remediation-additional-reading strong { margin-left: 5px; color: var(--ink); font-size: 18px; }
.remediation-review-form { margin-top: 22px; }
.remediation-decision { margin: 0; padding: 0; border: 0; min-width: 0; }
.remediation-decision legend { margin-bottom: 13px; padding: 0; font-size: 18px; line-height: 1.4; font-weight: 700; color: var(--ink); }
.remediation-review-choice { display: flex; align-items: flex-start; gap: 12px; margin-top: 8px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 11px; cursor: pointer; background: var(--surface); }
.remediation-review-choice:has(input:checked) { background: color-mix(in srgb, var(--blue) 9%, var(--surface)); border-color: var(--blue); }
.remediation-review-choice:has(input:disabled) { opacity: .6; cursor: default; }
.remediation-review-choice input { width: 17px; height: 17px; flex-shrink: 0; margin: 3px 0 0; accent-color: var(--blue); }
.remediation-review-choice > span { display: flex; flex-direction: column; gap: 2px; }
.remediation-review-choice strong { color: var(--ink); font-size: 14px; font-weight: 600; }
.remediation-review-choice small { color: var(--muted); font-size: 12px; line-height: 1.5; }
.remediation-review-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 17px; }
.remediation-review-footer > span { color: var(--muted); font-size: 12px; }
.remediation-review-footer .button { min-height: 42px; font-size: 13px; }
.remediation-source-context { min-width: 0; overflow-wrap: anywhere; }
.remediation-source-context h3 { margin: 0 0 6px; font-size: 18px; }
.remediation-source-context > p { color: var(--muted); font-size: 12px; }
.remediation-source-context pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 13px; line-height: 1.6; padding: 14px; border-radius: 10px; background: var(--surface-soft); color: var(--ink); }
.remediation-source-context .remediation-actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 560px) {
  .remediation-comparison :is(th, td) { padding-left: 11px; padding-right: 11px; }
  .remediation-comparison .remediation-source-kind { min-height: 2.8em; }
  .remediation-comparison-readings strong { font-size: 25px; }
  .remediation-comparison .text-button { min-height: 44px; font-size: 12px; }
  .remediation-review-choice { padding: 12px; }
  .remediation-review-footer { flex-direction: column; align-items: stretch; }
  .remediation-review-footer .button { min-height: 44px; }
}

.remediation-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(130px, 0.72fr);
  gap: 12px;
  align-items: stretch;
  padding: 14px;
  border: 1px solid #cbd8e5;
  border-radius: 12px;
  background: #f3f7fb;
}

.remediation-summary > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.remediation-summary span {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
}

.remediation-summary strong {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.3;
}

.remediation-summary-arrow {
  align-self: center;
  color: var(--faint);
  font-size: 20px !important;
}

.remediation-summary .remediation-difference {
  padding-left: 14px;
  border-left: 1px solid #cbd8e5;
}

.remediation-summary .remediation-difference strong { color: var(--red); }

.remediation-options {
  display: grid;
  gap: 9px;
  margin: 22px 0 0;
  padding: 0;
  border: 0;
}

.remediation-options legend {
  margin-bottom: 10px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 750;
}

.remediation-option {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: 14px;
  padding: 14px 15px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.remediation-option:hover:not(:disabled),
.remediation-option:focus-visible {
  border-color: #6f9ec5;
  box-shadow: 0 4px 14px rgba(30, 74, 112, 0.1);
  transform: translateY(-1px);
}

.remediation-option.is-recommended {
  border-color: #7eacd2;
  background: #f2f7fc;
}

.remediation-option:disabled {
  opacity: 0.56;
  cursor: not-allowed;
}

.remediation-option-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 3px;
}

.remediation-option-copy strong { font-size: 13.5px; }

.remediation-option-copy small {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.4;
}

.remediation-form {
  display: grid;
  gap: 17px;
}

.remediation-step-intro,
.remediation-confirmation {
  padding-bottom: 17px;
  border-bottom: 1px solid var(--line);
}

.remediation-step-intro strong { font-size: 14px; }

.remediation-step-intro p,
.remediation-confirmation p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
}

.remediation-confirmation h3 {
  margin: 5px 0 0;
  font-size: 19px;
}

.remediation-source-note {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border-left: 3px solid var(--blue);
  background: #f4f7fa;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.5;
}

.remediation-source-note strong { color: var(--ink); }

.remediation-actions {
  margin-top: 1px;
  padding-top: 17px;
  border-top: 1px solid var(--line);
}

.information-request-section,
.information-documents {
  min-width: 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.information-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.information-section-heading h3,
.information-section-heading p {
  margin: 0;
}

.information-section-heading h3 {
  color: var(--ink);
  font-size: 14px;
}

.information-section-heading p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.information-section-heading > span {
  flex: 0 0 auto;
  color: var(--faint);
  font-size: 11px;
  font-weight: 700;
}

.information-questions {
  display: grid;
}

.information-question {
  min-width: 0;
  margin: 0;
  padding: 18px 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.information-question:first-child {
  border-top: 0;
}

.information-question legend {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0;
}

.information-question legend > span:last-child {
  min-width: 0;
}

.information-question-index {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.information-question legend strong,
.information-question legend small {
  display: block;
  overflow-wrap: anywhere;
}

.information-question legend strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.4;
}

.information-question legend small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.45;
}

.required-mark {
  margin-left: 7px;
  color: var(--faint);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.information-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0 34px;
}

.information-choice {
  position: relative;
  min-width: 0;
  cursor: pointer;
}

.information-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.information-choice span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: #fff;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  transition:
    border-color 140ms ease,
    background-color 140ms ease,
    color 140ms ease,
    box-shadow 140ms ease;
}

.information-choice input:checked + span {
  border-color: #6f9ec5;
  background: #edf5fb;
  color: #174f7e;
}

.information-choice input:focus-visible + span {
  box-shadow: 0 0 0 3px rgba(35, 104, 167, 0.14);
}

.information-question-value {
  margin: 10px 0 0 34px;
}

.information-question-value input,
.information-question-value textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 9px 11px;
  font: inherit;
  font-size: 13px;
  line-height: 1.45;
}

.information-question-value input {
  min-height: 40px;
}

.information-question-value textarea {
  min-height: 86px;
  resize: vertical;
}

.information-question-value input:disabled,
.information-question-value textarea:disabled {
  background: var(--surface-soft);
  color: var(--faint);
}

.information-question-value input:focus-visible,
.information-question-value textarea:focus-visible {
  border-color: #7aa6ca;
  box-shadow: 0 0 0 3px rgba(35, 104, 167, 0.14);
}

.information-documents ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.information-documents li {
  display: grid;
  gap: 3px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}

.information-documents li:first-child {
  border-top: 0;
}

.information-documents li strong {
  color: var(--ink);
  font-size: 12.5px;
}

.information-documents li span {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.45;
}

.unsaved-dialog.file-editor-dialog {
  width: min(500px, calc(100vw - 32px));
}

.unsaved-dialog.reference-uploader-dialog {
  width: min(720px, calc(100vw - 32px));
  max-height: min(880px, calc(100dvh - 32px));
  overflow: auto;
}

.reference-uploader-form {
  gap: 16px;
  margin-top: 20px;
}

.reference-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.reference-title-field,
.reference-url-field {
  grid-column: 1 / -1;
}

.reference-upload-zone {
  min-height: 108px;
}

.reference-boundary-note {
  display: grid;
  gap: 3px;
  padding: 11px 13px;
  border-left: 3px solid var(--green);
  background: #eef8f2;
}

.reference-boundary-note strong {
  color: var(--ink);
  font-size: 12px;
}

.reference-boundary-note span {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.45;
}

.field textarea {
  width: 100%;
  min-height: 116px;
  resize: vertical;
  padding: 10px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
}

.field textarea:focus-visible {
  border-color: #7aa6ca;
  box-shadow: 0 0 0 3px rgba(35, 104, 167, 0.14);
}

.information-dropzone {
  min-height: 110px;
}

.onboarding-steps {
  display: grid;
  gap: 9px;
}

.step {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 12px;
}

.step-index {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.step.is-active {
  color: var(--ink);
  font-weight: 700;
}

.step.is-active .step-index {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
}

.form {
  display: grid;
  gap: 10px;
}

.field {
  display: grid;
  gap: 5px;
}

.field label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.field input,
.field select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 8px 11px;
  font-size: 15px;
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    background-color 140ms ease;
}

.field select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #657280 50%),
    linear-gradient(135deg, #657280 50%, transparent 50%);
  background-position:
    calc(100% - 17px) 18px,
    calc(100% - 11px) 18px;
  background-size:
    6px 6px,
    6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

.geocode-field {
  position: relative;
}

.geocode-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 40;
  display: grid;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(11, 19, 24, 0.16);
  overflow: hidden;
}

.geocode-suggestion {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}

.geocode-suggestion:hover,
.geocode-suggestion.is-active {
  background: var(--surface-soft);
}

.geocode-suggestion + .geocode-suggestion {
  border-top: 1px solid var(--line);
}

.profile-options {
  display: grid;
  gap: 10px;
}

.profile-option {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 12px;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 14px 16px;
  cursor: pointer;
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    background-color 140ms ease;
}

.profile-option:has(input:checked) {
  border-color: rgba(51, 141, 211, 0.55);
  background: rgba(86, 166, 225, 0.08);
  box-shadow: 0 0 0 3px rgba(86, 166, 225, 0.14);
}

.field .profile-option input[type="radio"],
.profile-option input[type="radio"] {
  appearance: auto;
  width: 16px;
  min-height: 16px;
  height: 16px;
  margin: 2px 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  accent-color: var(--blue);
}

.profile-option span {
  display: block;
  min-width: 0;
}

.profile-option strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.25;
}

.profile-option small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.choice-options {
  display: grid;
  gap: 8px;
}

.choice-option {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 11px 13px;
  color: var(--ink);
  cursor: pointer;
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    background-color 140ms ease;
}

.choice-option:has(input:checked) {
  border-color: rgba(51, 141, 211, 0.55);
  background: rgba(86, 166, 225, 0.08);
  box-shadow: 0 0 0 3px rgba(86, 166, 225, 0.12);
}

.field .choice-option input[type="radio"] {
  appearance: auto;
  width: 16px;
  min-height: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  accent-color: var(--blue);
}

.choice-option span {
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}

.choice-empty {
  min-height: 44px;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  padding: 12px 13px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 50;
  width: max-content;
  max-width: min(420px, calc(100vw - 32px));
  background: var(--ink);
  color: #fff;
  border-radius: 14px;
  padding: 11px 18px;
  box-shadow: var(--shadow);
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}

.unsaved-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(11, 19, 24, 0.36);
}

.unsaved-dialog {
  width: min(460px, 100%);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 24px;
}

.unsaved-dialog h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.15;
}

.unsaved-dialog p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.delete-shipment-dialog {
  width: min(500px, 100%);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
}

.delivery-editor {
  width: min(620px, 100%);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
}

.delivery-editor-form {
  margin-top: 20px;
}

.delivery-editor-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.delivery-editor-items {
  min-width: 0;
  margin: 10px 0 0;
  padding: 18px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.delivery-editor-items legend {
  padding: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 750;
}

.delivery-editor-items > p {
  margin: 3px 0 12px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.45;
}

.delivery-editor-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 86px;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}

.delivery-editor-item label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  cursor: pointer;
}

.delivery-editor-item label input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-top: 1px;
  accent-color: var(--blue);
}

.delivery-editor-item label span {
  min-width: 0;
}

.delivery-editor-item strong,
.delivery-editor-item small {
  display: block;
  overflow-wrap: anywhere;
}

.delivery-editor-item strong {
  color: var(--ink);
  font-size: 12px;
}

.delivery-editor-item small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10.5px;
}

.delivery-editor-item > input {
  width: 86px;
  min-width: 0;
  min-height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 7px 9px;
  color: var(--ink);
  font: inherit;
}

.delete-warning {
  margin-top: 18px;
  padding: 12px 14px;
  border-left: 3px solid var(--red);
  background: var(--red-bg);
  color: var(--red);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.confirmation-field {
  display: grid;
  gap: 8px;
  margin-top: 20px;
  color: var(--ink);
  font-size: 13px;
}

.confirmation-field input {
  width: 100%;
  min-width: 0;
  height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 0 12px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.confirmation-field input:focus {
  border-color: var(--ink);
  outline: 3px solid rgba(19, 32, 42, 0.1);
}

.unsaved-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

/* Both wizard steps share one footprint so the dialog doesn't jump size
   between "details" and "documents". */

.shipment-wizard {
  width: min(520px, 100%);
  min-height: 430px;
  display: flex;
  flex-direction: column;
}

.shipment-wizard form {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.shipment-wizard .unsaved-actions {
  margin-top: auto;
  padding-top: 22px;
}

.dropzone {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 30px 16px;
  border: 1.5px dashed var(--line-strong);
  border-radius: 12px;
  background: var(--surface-soft);
  text-align: center;
  cursor: pointer;
  transition:
    border-color 140ms ease,
    background-color 140ms ease;
}

.dropzone:hover,
.dropzone.is-drag {
  border-color: #7aa6ca;
  background: #eef5fb;
}

.dropzone strong {
  font-size: 15px;
}

.dropzone span {
  color: var(--muted);
  font-size: 13px;
}

.dropzone em {
  margin-top: 6px;
  color: var(--faint);
  font-size: 11.5px;
  font-style: normal;
}

.dropzone-files {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.dropzone-file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  font-size: 13px;
}

.dropzone-file span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 650;
}

.dropzone-file em {
  color: var(--faint);
  font-size: 11.5px;
  font-style: normal;
  white-space: nowrap;
}

.dropzone-file button {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.dropzone-file button:hover {
  background: var(--red-bg);
  color: var(--red);
}

.shipment-wizard {
  width: min(560px, calc(100vw - 32px));
}

.shipment-wizard .form {
  gap: 14px;
}

.shipment-wizard .unsaved-actions {
  margin-top: 4px;
}

.document-manager {
  width: min(620px, calc(100vw - 32px));
  max-height: calc(100dvh - 40px);
  overflow: auto;
}

.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.document-manager h3 {
  margin: 0;
  font-size: 14px;
}

.document-capacity {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.document-capacity strong {
  font-size: 16px;
}

.document-capacity span,
.manager-section-heading span {
  color: var(--faint);
  font-size: 12px;
  font-weight: 700;
}

.manager-upload-form {
  display: grid;
  gap: 12px;
  padding: 20px 0 24px;
  border-bottom: 1px solid var(--line);
}

.manager-upload-zone {
  display: grid;
  place-content: center;
  gap: 5px;
  width: 100%;
  min-height: 132px;
  padding: 22px;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--ink);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition:
    border-color 140ms ease,
    background-color 140ms ease,
    box-shadow 140ms ease;
}

.manager-upload-zone:hover,
.manager-upload-zone:focus-visible,
.manager-upload-zone.is-drag {
  border-color: var(--blue);
  background: #f4f9fd;
  box-shadow: 0 0 0 3px rgba(86, 166, 225, 0.12);
  outline: none;
}

.manager-upload-zone:disabled {
  border-style: solid;
  background: #f7f8f9;
  color: var(--muted);
  cursor: default;
  box-shadow: none;
}

.manager-upload-zone strong {
  font-size: 17px;
}

.manager-upload-zone span {
  color: var(--muted);
  font-size: 13px;
}

.manager-upload-zone em {
  margin-top: 4px;
  color: var(--faint);
  font-size: 11.5px;
  font-style: normal;
  font-weight: 650;
}

.manager-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.manager-selected-files {
  display: grid;
}

.manager-selected-file {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 30px;
  gap: 10px;
  align-items: center;
  min-height: 42px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}

.manager-selected-file:first-of-type {
  border-top: 0;
}

.manager-selected-file > span {
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manager-selected-file em {
  color: var(--faint);
  font-size: 12px;
  font-style: normal;
}

.manager-selected-file button {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 17px;
  cursor: pointer;
}

.manager-selected-file button:hover {
  background: var(--red-bg);
  color: var(--red);
}

.manager-upload-button {
  width: 100%;
  min-height: 48px;
}

.manager-uploaded {
  padding-top: 22px;
}

.manager-document-list {
  display: grid;
}

.manager-document-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.manager-document-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.manager-document-title {
  font-size: 14px;
  font-weight: 800;
}

.manager-document-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.manager-status {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
}

.manager-status.green {
  background: var(--green);
}

.manager-status.red {
  background: var(--red);
}

.manager-document-row p {
  display: -webkit-box;
  margin: 8px 0 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.manager-remove {
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.manager-remove:hover {
  color: var(--red);
}

.manager-remove:disabled {
  color: var(--faint);
  cursor: default;
}

.empty {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.empty-workspace {
  display: grid;
  align-content: center;
  min-height: 100%;
  max-width: 680px;
  margin: 0 auto;
}

.empty-workspace h2 {
  margin: 0;
  font-size: 34px;
  line-height: 1.1;
}

.empty-workspace p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

@media (max-width: 1180px) and (min-width: 681px) {
  .app-layout {
      grid-template-columns: 220px minmax(0, 1fr);
    }

  .sidebar {
      padding: 18px 14px;
    }

  .workspace-chip {
      display: none;
    }

  .detail {
      border-right: 0;
    }

  .fulfillment-layout {
      grid-template-columns: minmax(0, 1fr);
    }

  .shipments-page {
      padding: 22px;
    }

  .shipments-table {
      overflow: visible;
      border: 0;
      border-radius: 0;
      background: transparent;
    }

  .shipments-table-head {
      display: none;
    }

  .shipments-table.is-selectable .shipments-table-head {
      min-width: 0;
      min-height: 40px;
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      padding: 0 16px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface);
    }

  .shipments-table.is-selectable .shipments-table-head > span:not(.shipment-select-cell) {
      display: none;
    }

  .shipments-table.is-selectable .shipments-table-head .shipment-select-cell {
      width: auto;
      justify-content: flex-start;
      gap: 9px;
    }

  .shipment-select-all-label {
      display: inline;
      color: var(--muted);
      font-family: var(--font-sans);
      font-size: 12px;
      font-weight: 700;
      text-transform: none;
    }

  .tracking-layout {
      grid-template-columns: minmax(0, 1fr) 280px;
    }

  .account-page {
      padding: 28px 30px 42px;
    }

  .account-topbar {
      padding: 0 30px;
    }

  .files-page {
      padding: 22px;
    }

  .files-table {
      overflow: visible;
      border: 0;
      border-radius: 0;
      background: transparent;
    }

  .files-table-head {
      display: none;
    }

  .file-table-row {
      min-width: 0;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px 22px;
      margin-bottom: 10px;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface);
    }

  .files-table.is-reference .file-table-row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

  .file-table-row > div:not(.file-primary):not(.file-actions) {
      display: grid;
      grid-template-columns: 88px minmax(0, 1fr);
      gap: 10px;
    }

  .file-table-row > div:not(.file-primary):not(.file-actions)::before {
      content: attr(data-label);
    }

  .file-primary,
    .file-actions {
      grid-column: 1 / -1;
    }

  .file-actions {
      justify-content: flex-start;
      padding-top: 10px;
      border-top: 1px solid var(--line);
    }

  .external-event-row {
      min-width: 0;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px 22px;
      margin-bottom: 10px;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface);
    }

  .external-event-primary {
      grid-column: 1 / -1;
    }

  .external-event-row > div:not(.external-event-primary) {
      display: grid;
      grid-template-columns: 92px minmax(0, 1fr);
      gap: 4px 10px;
      align-items: center;
    }

  .external-event-row > div:not(.external-event-primary)::before {
      content: attr(data-label);
    }

  .external-event-row > div:not(.external-event-primary) > span {
      grid-column: 2;
    }
}

/* Narrow tablets and phones: side-by-side leaves a sliver of map, so stack
   it — map on top, shipments rail below. */

@media (max-width: 1100px) {
  .guest-layout {
      height: auto;
      grid-template-columns: minmax(0, 1fr);
      background: var(--nav);
      overflow: visible;
    }

  .guest-layout .guest-copy {
      min-height: 58dvh;
    }

  .guest-copy h1 {
      font-size: 58px;
    }
}

@media (max-width: 900px) {
  .workspace {
      overflow-x: hidden;
      overflow-y: auto;
    }

  .workspace .detail {
      overflow: visible;
      border-right: 0;
    }

  .tracking-layout {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: minmax(300px, 46dvh) minmax(0, 1fr);
    }

  .tracking-layout.is-rail-collapsed {
      grid-template-columns: minmax(0, 1fr);
    }

  .tracking-map-wrap {
      min-height: 300px;
    }

  .tracking-rail {
      border-left: 0;
      border-top: 1px solid var(--line);
    }

  .tracking-rail-toggle,
    .tracking-rail-collapsed {
      display: none !important;
    }

  .tracking-layout.is-rail-collapsed .tracking-rail-content {
      display: block;
    }

  .tracking-rail-content {
      padding: 16px;
    }

  .tracking-cards {
      grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 680px) {
  body {
      overflow-x: hidden;
      overflow-y: auto;
    }

  .app-layout {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      min-height: 100dvh;
      height: auto;
      grid-template-columns: 1fr;
      /* auto/1fr rows: keep the collapsed sidebar-header at its natural height
         instead of letting stretch alignment inflate it with dark empty space. */
      grid-template-rows: auto minmax(0, 1fr);
    }

  .map-legend {
      right: 10px;
      bottom: 10px;
      left: 10px;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 7px 12px;
      padding: 9px 11px;
      font-size: 8px;
    }

  .tracking-cards {
      grid-template-columns: minmax(0, 1fr);
    }

  .tracking-rail-content {
      padding: 14px;
    }

  .tracking-observation-map-popup .maplibregl-popup-content {
      max-width: min(330px, calc(100vw - 28px));
      max-height: 58dvh;
    }

  .tracking-observation-popup-events dl {
      grid-template-columns: minmax(0, 1fr);
    }

  .tracking-map-label span {
      font-size: 9px;
    }

  .map-site {
      width: 32px;
      min-width: 32px;
      height: 32px;
      padding: 5px;
      border-radius: 6px;
    }

  .sidebar {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      min-height: auto;
      /* Icon-only items in one wrapping row — labels can never overlap a
         neighboring cell, and any nav count shares the width evenly. */
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 6px;
      padding: 14px 16px;
    }

  .sidebar .brand {
      flex: 1 1 100%;
    }

  .sidebar .nav-item {
      flex: 1 1 0;
    }

  .sidebar .nav-item .nav-text {
      display: none;
    }

  .sidebar .nav-item .nav-text-short {
      display: block;
      overflow: hidden;
      max-width: 100%;
      font-size: 8.5px;
      font-weight: 600;
      letter-spacing: -0.015em;
      line-height: 1;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

  /* The sidebar collapses into a slim header: scale the brand up to fill it
       instead of leaving a small logo in empty dark space. */

  .sidebar .brand {
      grid-column: 1 / -1;
      padding: 2px 4px 10px;
      gap: 14px;
    }

  .sidebar .brand-mark {
      width: 48px;
      height: 48px;
      border-radius: 13px;
      font-size: 16px;
    }

  .sidebar > .brand .brand-logo {
      width: 58px;
      height: 50px;
    }

  .sidebar .brand-title {
      font-size: 19px;
    }

  .sidebar .brand-subtitle {
      margin-top: 5px;
      font-size: 10px;
    }

  .workspace-chip {
      display: none;
    }

  .sidebar .nav-label {
      display: none;
    }

  /* Seven unlabeled icons is a memory test. Each item stacks its short label
       under the icon -- no neighbor can overlap it, because every item is its
       own flex track -- and the stack clears the 44px touch minimum. */
  .sidebar .nav-item {
      min-width: 0;
      flex-direction: column;
      height: 48px;
      justify-content: center;
      gap: 3px;
      margin: 0;
      padding: 4px 1px;
      font-size: 11px;
    }

  .updates-drawer {
      inset: auto 0 0;
      width: 100%;
      height: min(76dvh, 680px);
      border-top: 1px solid var(--line);
      border-left: 0;
      box-shadow: 0 -18px 48px rgba(11, 19, 24, 0.18);
    }

  .guest-layout {
      grid-template-columns: 1fr;
      width: 100%;
      min-width: 0;
      min-height: 100dvh;
      height: auto;
      overflow-x: hidden;
      overflow-y: visible;
    }

  .guest-layout .guest-copy {
      min-width: 0;
      min-height: auto;
      padding: max(34px, calc(22px + env(safe-area-inset-top))) 24px 36px;
    }

  .guest-copy h1 {
      max-width: 100%;
      margin-top: 0;
      font-size: 42px;
      line-height: 1.01;
    }

  .guest-copy h1 span {
      white-space: normal;
    }

  .guest-copy p {
      max-width: 100%;
      font-size: 14px;
      line-height: 1.45;
    }

  .guest-brand {
      gap: 11px;
      margin-bottom: 27px;
    }

  .guest-brand .brand-logo {
      width: 60px;
      height: 52px;
    }

  .guest-brand .brand-title {
      font-size: 22px;
    }

  .guest-brand .brand-subtitle {
      font-size: 8px;
    }

  .guest-tracking-form {
      margin-top: 21px;
    }

  .guest-panel {
      width: 100%;
      min-width: 0;
      padding: 27px 24px max(31px, calc(22px + env(safe-area-inset-bottom)));
      border-left: 0;
    }

  .guest-panel .button {
      width: 100%;
      min-width: 0;
    }

  .auth-secondary {
      flex-direction: column;
    }

  .guest-tracking-control {
      grid-template-columns: minmax(0, 1fr);
    }

  .guest-tracking-control .button {
      width: 100%;
      min-width: 0;
    }

  .guest-tracking-control input,
    .guest-tracking-control .button {
      height: 44px;
      min-height: 44px;
      font-size: 13px;
    }

  .tracking-connection,
    .tracking-connection-actions {
      align-items: stretch;
      flex-direction: column;
    }

  .tracking-connection-actions {
      width: 100%;
    }

  .tracking-connection-actions code {
      max-width: 100%;
    }

  .tracking-connection-actions .button {
      width: 100%;
    }

  .review-failure-banner {
      align-items: stretch;
      flex-direction: column;
    }

  .review-failure-banner .button {
      width: 100%;
    }

  .shipment-update-banner {
      align-items: flex-start;
      grid-template-columns: 20px minmax(0, 1fr) 30px;
      gap: 11px;
      margin: 0 0 18px;
      padding: 12px;
    }

  .shipment-update-indicator {
      margin-top: 2px;
    }

  .detail-head,
    .row-top {
      align-items: flex-start;
      flex-direction: column;
    }

  .topbar {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      align-items: center;
      flex-direction: row;
      padding: 18px;
    }

  .files-topbar {
      align-items: stretch;
      flex-direction: column;
    }

  .files-topbar .topbar-actions {
      width: 100%;
    }

  .files-topbar .topbar-actions .button {
      width: auto;
      flex: 1;
    }

  .workspace {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      overflow: visible;
    }

  .main,
    .detail,
    .shipments-page {
      width: 100%;
      max-width: 100%;
      min-width: 0;
    }

  .detail {
      overflow: visible;
      border-right: 0;
    }

  /* The page body is the scroller here; clipping wrappers would break the
     sticky section rail. (Double class outranks the later base rules.) */
  .workspace.workspace-detail,
  .workspace-detail.workspace-detail {
      overflow: visible;
    }

  .account-page {
      padding: 24px 20px 38px;
    }

  .account-topbar {
      padding: 18px 20px;
    }

  .account-topbar-inner {
      align-items: flex-start;
      flex-direction: column;
    }

  .account-topbar-inner > div:first-child {
      width: 100%;
      min-width: 0;
      max-width: 100%;
    }

  .account-topbar .topbar-actions {
      width: 100%;
    }

  .account-save-button {
      width: auto;
      flex: 1;
    }

  .unsaved-actions .button {
      width: 100%;
    }

  .account-save-button,
    .unsaved-actions .button {
      max-width: none;
    }

  .account-row {
      align-items: flex-start;
      flex-direction: column;
      gap: 4px;
    }

  .account-row strong {
      text-align: left;
    }

  .account-section-body {
      margin-left: 0;
    }

  .account-section-heading {
      flex-wrap: wrap;
    }

  .site-manager-add {
      width: calc(100% - 42px);
      margin-left: 42px;
    }

  .site-manager-row {
      grid-template-columns: 36px minmax(0, 1fr);
    }

  .site-manager-actions {
      grid-column: 2;
      justify-content: flex-start;
    }

  .coordinate-pair {
      grid-template-columns: 1fr;
    }

  .modal-head,
    .section-heading-row,
    .document-row {
      align-items: stretch;
      flex-direction: column;
    }

  .document-capacity {
      align-items: flex-start;
      flex-direction: column;
      gap: 4px;
    }

  .manager-upload-zone {
      min-height: 120px;
      padding: 18px 14px;
    }

  .manager-document-row {
      gap: 10px;
    }

  .extracted-field-row {
      grid-template-columns: 1fr;
      gap: 3px;
    }

  .extracted-field-row em {
      text-align: left;
    }

  .fulfillment-heading,
    .delivery-ledger-head {
      align-items: flex-start;
      flex-direction: column;
    }

  .fulfillment-layout {
      grid-template-columns: minmax(0, 1fr);
      gap: 28px;
    }

  .fulfillment-heading-actions {
      width: 100%;
      justify-content: space-between;
    }

  .delivery-editor-fields {
      grid-template-columns: 1fr;
    }

  .delivery-editor-item {
      grid-template-columns: minmax(0, 1fr) 76px;
    }

  .delivery-editor-item > input {
      width: 76px;
    }

  .case-item-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: start;
      gap: 14px;
    }

  .case-item-meta {
      text-align: right;
    }

  .workspace {
      display: block;
    }

  .detail {
      padding: 22px 18px 32px;
    }

  .shipments-page {
      padding: 20px 16px 30px;
    }

  .shipments-toolbar {
      align-items: center;
      flex-direction: row;
      gap: 10px;
    }

  .shipment-tabs {
      gap: 14px;
    }

  .shipments-toolbar-actions {
      gap: 8px;
    }

  .shipments-toolbar .shipment-new-button {
      width: 40px;
      min-width: 40px;
      padding: 0;
    }

  .shipment-new-label {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      white-space: nowrap;
    }

  .shipments-table {
      overflow: visible;
      border: 0;
      border-radius: 0;
      background: transparent;
    }

  .shipments-table-head {
      display: none;
    }

  .shipments-table.is-selectable .shipments-table-head {
      min-width: 0;
      min-height: 28px;
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      padding: 0 14px;
      border: 0;
      border-radius: 0;
      background: transparent;
    }

  .shipments-table.is-selectable .shipments-table-head > span:not(.shipment-select-cell) {
      display: none;
    }

  .shipments-table.is-selectable .shipments-table-head .shipment-select-cell {
      width: auto;
      justify-content: flex-start;
      gap: 9px;
    }

  .shipments-pagination {
      justify-content: space-between;
    }

  .files-page {
      padding: 20px 16px 30px;
    }

  .files-tab {
      flex: 0 0 auto;
      white-space: nowrap;
    }

  .files-toolbar {
      align-items: stretch;
      flex-direction: column;
      gap: 10px;
    }

  .files-table {
      overflow: visible;
      border: 0;
      border-radius: 0;
      background: transparent;
    }

  .files-table-head {
      display: none;
    }

  .file-table-row {
      min-width: 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 9px 16px;
      margin-bottom: 10px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface);
    }

  .files-table.is-reference .file-table-row {
      grid-template-columns: minmax(0, 1fr) auto;
    }

  .file-table-row > div:not(.file-primary):not(.file-actions) {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: 88px minmax(0, 1fr);
      gap: 10px;
    }

  .file-table-row > div:not(.file-primary):not(.file-actions)::before {
      content: attr(data-label);
    }

  .file-primary {
      grid-column: 1 / -1;
    }

  .file-actions {
      grid-column: 1 / -1;
      justify-content: flex-start;
      padding-top: 8px;
      border-top: 1px solid var(--line);
    }

  .file-actions .icon-button {
      flex: 1;
    }

  .files-pagination {
      justify-content: space-between;
    }

  .external-events-page {
      padding: 20px 16px 30px;
    }

  .external-events-controls {
      align-items: stretch;
      flex-direction: column;
    }

  .external-events-filters {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      flex: none;
    }

  .external-events-clear {
      justify-self: start;
    }

  .external-events-result-count {
      margin-left: 0;
    }

  .external-events-error {
      align-items: stretch;
      flex-direction: column;
    }

  .external-event-row {
      min-width: 0;
      grid-template-columns: minmax(0, 1fr);
      gap: 10px;
      margin-bottom: 10px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface);
    }

  .external-event-row > div:not(.external-event-primary) {
      display: grid;
      grid-template-columns: 92px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
    }

  .external-event-row > div:not(.external-event-primary)::before {
      content: attr(data-label);
    }

  .external-event-row > div:not(.external-event-primary) > span {
      grid-column: 2;
    }

  .external-event-drawer {
      width: 100vw;
      border-left: 0;
    }

  .external-event-drawer-head {
      min-height: 106px;
      padding: max(20px, env(safe-area-inset-top)) 18px 18px;
    }

  .external-event-drawer-head h2 {
      font-size: 16px;
    }

  .external-event-drawer-body {
      height: calc(100dvh - 106px);
      padding-right: 18px;
      padding-bottom: max(42px, env(safe-area-inset-bottom));
      padding-left: 18px;
    }

  .external-event-detail-facts > div {
      grid-template-columns: 104px minmax(0, 1fr);
      gap: 12px;
    }

  .unsaved-dialog.information-dialog,
    .unsaved-dialog.remediation-dialog,
    .unsaved-dialog.file-editor-dialog,
    .unsaved-dialog.reference-uploader-dialog {
      width: 100%;
      max-height: calc(100dvh - 24px);
    }

  .information-backdrop,
    .remediation-backdrop {
      padding: 12px;
    }

  .unsaved-dialog.information-dialog {
      padding: 18px;
    }

  .remediation-head,
    .remediation-body {
      padding-right: 18px;
      padding-left: 18px;
    }

  .remediation-summary {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

  .remediation-summary-arrow { display: none; }

  .remediation-summary .remediation-difference {
      grid-column: 1 / -1;
      padding-top: 10px;
      padding-left: 0;
      border-top: 1px solid #cbd8e5;
      border-left: 0;
    }

  .information-section-heading {
      gap: 8px;
    }

  .information-question {
      padding: 16px 0;
    }

  .information-choices {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      margin-left: 0;
    }

  .information-choice,
    .information-choice span {
      width: 100%;
    }

  .information-question-value {
      margin-left: 0;
    }

  .information-dialog .modal-head,
    .remediation-dialog .modal-head,
    .file-editor-dialog .modal-head,
    .reference-uploader-dialog .modal-head {
      align-items: flex-start;
      flex-direction: row;
    }

  .information-dialog .modal-head .icon-button,
    .remediation-dialog .modal-head .icon-button,
    .file-editor-dialog .modal-head .icon-button,
    .reference-uploader-dialog .modal-head .icon-button {
      width: 36px;
      min-width: 36px;
      flex: 0 0 36px;
    }

  .reference-form-grid {
      grid-template-columns: minmax(0, 1fr);
    }

  .reference-title-field,
    .reference-url-field {
      grid-column: auto;
    }

  .next-step-actions {
      align-items: stretch;
      flex-direction: column;
    }

  .next-step-row {
      align-items: stretch;
      flex-direction: column;
    }

  .next-step-row .next-step-actions {
      width: 100%;
    }

  [data-next-step-key="confirm-receipt"] .next-step-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

  [data-next-step-key="confirm-receipt"] .next-step-actions .button {
      width: 100%;
      min-width: 0;
      white-space: normal;
    }

  .detail-head h2 {
      font-size: 26px;
    }

  .detail-actions {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

  .detail-actions .badge {
      grid-column: 1 / -1;
      justify-self: start;
    }

  .detail-actions [data-add-information] {
      grid-column: 1 / -1;
    }

  .detail-actions .button {
      width: 100%;
      min-width: 0;
      min-height: 42px;
    }

  .delivery-editor-backdrop {
      align-items: flex-end;
      overflow: hidden;
      padding: 12px;
    }

  .delivery-editor {
      width: 100%;
      max-height: calc(100dvh - 24px);
      padding: 18px;
      border-radius: 8px;
      overscroll-behavior: contain;
    }

  .delivery-editor .modal-head {
      align-items: flex-start;
      flex-direction: row;
    }

  .delivery-editor .modal-head > div {
      min-width: 0;
    }

  .delivery-editor .modal-head .button {
      width: auto;
      min-width: 62px;
      flex: 0 0 auto;
    }

  .delivery-editor-form .unsaved-actions {
      position: sticky;
      bottom: -18px;
      z-index: 1;
      margin: 14px -18px -18px;
      padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
      border-top: 1px solid var(--line);
      background: var(--surface);
    }

  .journey {
      margin: 0 -18px;
      padding: 18px;
    }

  .journey-head {
      gap: 12px;
      margin-bottom: 20px;
    }

  .journey-head h3 {
      font-size: 16px;
    }

  .journey-head-meta {
      align-items: flex-end;
      flex-direction: column-reverse;
      gap: 6px;
      text-align: right;
    }

  .journey-contract {
      margin-top: 20px;
      padding-top: 16px;
    }

  .journey-contract-head {
      display: block;
    }

  .journey-contract-head .journey-evidence-actions {
      margin-top: 10px;
    }

  .journey-evidence {
      grid-template-columns: 1fr;
      gap: 0;
      margin: 4px 0 0;
    }

  .journey-evidence-actions {
      justify-content: flex-start;
      flex-wrap: wrap;
      gap: 9px 16px;
      padding-top: 9px;
      white-space: normal;
    }

  .stage-step.is-current {
      flex-shrink: 0;
    }
}

/* Keep map controls legible against both the street map and bundled fallback. */

.tracking-map-wrap .maplibregl-ctrl-group {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(25, 43, 55, 0.15);
  border-radius: 9px;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(20, 37, 48, 0.16);
}

.tracking-map-wrap .maplibregl-ctrl-group button {
  background: transparent;
  border: 0;
}

.tracking-map-wrap .maplibregl-ctrl-group button + button {
  border-top: 1px solid rgba(25, 43, 55, 0.1);
}

.tracking-map-wrap .maplibregl-ctrl-icon {
  filter: none;
}

.platform-invite-shell {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--bg);
}

.platform-invite-shell > header {
  min-height: 72px;
  padding: 18px 28px;
  background: var(--nav);
  color: #fff;
}

.platform-invite-shell .brand {
  padding: 0;
}

.platform-invite-panel {
  width: min(620px, calc(100% - 40px));
  align-self: center;
  justify-self: center;
  padding: 42px 0;
}

.platform-invite-panel h1 {
  margin: 10px 0 12px;
  font-size: 34px;
  letter-spacing: 0;
}

.platform-invite-panel > p {
  max-width: 590px;
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.platform-invite-facts {
  margin: 28px 0 0;
  border-top: 1px solid var(--line);
}

.platform-invite-facts > div {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.platform-invite-facts dt,
.platform-invite-facts dd {
  margin: 0;
}

.platform-invite-facts dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.platform-invite-facts dd {
  font-size: 13px;
  font-weight: 700;
}

.admin-topbar {
  min-height: 82px;
}

.admin-topbar > div:first-child {
  min-width: 0;
  max-width: 100%;
}

.admin-topbar p {
  white-space: normal;
}

.admin-topbar .eyebrow {
  display: block;
  margin-bottom: 5px;
  color: var(--teal);
  font-size: 9px;
  font-weight: 800;
}

.admin-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-page {
  min-width: 0;
  min-height: 0;
  flex: 1;
  overflow: auto;
  padding: 24px 28px 52px;
  background: var(--bg);
}

.admin-gate-page {
  display: grid;
  place-items: center;
}

.admin-gate {
  width: min(560px, 100%);
  padding: 28px 0;
}

.admin-gate h2 {
  margin: 9px 0 10px;
  font-size: 28px;
  letter-spacing: 0;
}

.admin-gate > p {
  max-width: 520px;
  margin: 0 0 22px;
  color: var(--muted);
  line-height: 1.6;
}

.admin-support-note {
  margin-top: 12px !important;
  font-size: 12px;
}

.admin-error {
  margin: 0 0 16px;
  padding: 11px 13px;
  border-left: 3px solid var(--red);
  background: var(--red-bg);
  color: #762c28;
  font-size: 12px;
  line-height: 1.5;
}

.admin-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(110px, 1fr));
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.admin-metrics > div {
  min-width: 0;
  padding: 18px;
  border-right: 1px solid var(--line);
}

.admin-metrics > div:last-child {
  border-right: 0;
}

.admin-metrics strong,
.admin-metrics span {
  display: block;
}

.admin-metrics strong {
  font-size: 25px;
  line-height: 1;
}

.admin-metrics span {
  margin-top: 7px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
}

.admin-section {
  margin-top: 30px;
  padding: 22px 0 0;
  border-top: 1px solid var(--line-strong);
}

.admin-section-heading {
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.admin-section-heading .eyebrow {
  color: var(--teal);
  font-size: 9px;
  font-weight: 800;
}

.admin-section-heading h2 {
  margin: 4px 0 0;
  font-size: 19px;
  letter-spacing: 0;
}

.admin-section-heading > span {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.admin-table {
  min-width: 0;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.admin-table-head,
.admin-table-row {
  min-width: 900px;
  display: grid;
  gap: 14px;
  align-items: center;
}

.admin-organization-table .admin-table-head,
.admin-organization-table .admin-table-row {
  grid-template-columns: minmax(210px, 1.8fr) 90px minmax(150px, 1.2fr) 95px 95px 95px;
}

.admin-user-table .admin-table-head,
.admin-user-table .admin-table-row {
  grid-template-columns: minmax(210px, 1.5fr) minmax(170px, 1.25fr) minmax(150px, 1.1fr) 90px 80px 80px;
}

.admin-table-head {
  min-height: 40px;
  padding: 0 15px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.admin-table-row {
  min-height: 66px;
  padding: 12px 15px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}

.admin-table-row:last-child {
  border-bottom: 0;
}

.admin-table-row > div {
  min-width: 0;
}

.admin-table-row strong,
.admin-table-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-table-row strong {
  color: var(--ink);
  font-size: 12px;
  white-space: normal;
}

.admin-table-row small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}

.admin-empty {
  padding: 24px 15px;
  color: var(--muted);
  font-size: 12px;
}

.admin-action-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(100px, 1fr));
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.admin-action-strip > div {
  min-width: 0;
  padding: 14px 16px;
  border-right: 1px solid var(--line);
}

.admin-action-strip > div:last-child {
  border-right: 0;
}

.admin-action-strip strong,
.admin-action-strip span {
  display: block;
}

.admin-action-strip strong {
  font-size: 20px;
}

.admin-action-strip span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.admin-activity-list,
.admin-access-list {
  margin-top: 12px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.admin-activity-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.admin-activity-mark {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
}

.admin-activity-row strong,
.admin-activity-row span {
  display: block;
}

.admin-activity-row strong {
  font-size: 12px;
}

.admin-activity-row span,
.admin-activity-row time {
  color: var(--muted);
  font-size: 10px;
}

.admin-activity-row span {
  margin-top: 3px;
}

.admin-activity-row time {
  white-space: nowrap;
}

.admin-invite-form {
  max-width: 660px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.admin-invite-form .field {
  margin: 0;
}

.admin-access-list {
  max-width: 820px;
}

.admin-access-row {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
}

.admin-access-row > div {
  min-width: 0;
}

.admin-access-row strong,
.admin-access-row span {
  display: block;
}

.admin-access-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
}

.admin-access-row > div span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
}

.admin-access-row.is-pending {
  background: #fffaf0;
}

.admin-tabs {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line-strong);
}

.admin-tab {
  min-height: 39px;
  padding: 0 1px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.admin-tab:hover,
.admin-tab:focus-visible {
  color: var(--ink);
}

.admin-tab.is-active {
  border-bottom-color: var(--blue);
  color: var(--ink);
}

.admin-newsletter-layout {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(250px, 0.38fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.admin-newsletter-index {
  min-width: 0;
}

.admin-newsletter-list {
  border-top: 1px solid var(--line);
}

.admin-newsletter-item {
  width: 100%;
  display: block;
  padding: 15px 13px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.admin-newsletter-item:hover,
.admin-newsletter-item:focus-visible {
  background: var(--surface-soft);
}

.admin-newsletter-item.is-selected {
  border-left-color: var(--blue);
  background: var(--surface);
}

.admin-newsletter-item-topline,
.admin-newsletter-item-meta,
.admin-newsletter-item time {
  display: block;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.admin-newsletter-item-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-transform: uppercase;
}

.admin-newsletter-item strong {
  display: block;
  font-size: 13px;
  line-height: 1.45;
}

.admin-newsletter-item-meta {
  margin-top: 7px;
}

.admin-newsletter-item time {
  margin-top: 3px;
}

.admin-newsletter-status {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 7px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-newsletter-status.is-sent {
  border-color: #abd4bd;
  background: #edf8f1;
  color: #1f7043;
}

.admin-newsletter-status.is-failed {
  border-color: #e6bcb8;
  background: var(--red-bg);
  color: #8b332e;
}

.admin-newsletter-status.is-pending,
.admin-newsletter-status.is-sending {
  border-color: #e6d2a6;
  background: #fff9ec;
  color: #7c5a16;
}

.admin-newsletter-preview {
  min-width: 0;
}

.admin-newsletter-preview-heading {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.admin-newsletter-preview-heading > div {
  min-width: 0;
}

.admin-newsletter-preview-heading .eyebrow,
.admin-newsletter-test-panel .eyebrow,
.admin-newsletter-deliveries .eyebrow {
  color: var(--teal);
  font-size: 9px;
  font-weight: 800;
}

.admin-newsletter-preview-heading h2 {
  margin: 5px 0 0;
  font-size: 18px;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.admin-newsletter-preview-heading p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.admin-newsletter-frame-shell {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #f3f5f6;
}

.admin-newsletter-frame {
  width: 100%;
  height: 720px;
  display: block;
  border: 0;
  background: #f3f5f6;
}

.admin-newsletter-test-panel {
  display: grid;
  grid-template-columns: minmax(160px, 0.7fr) minmax(260px, 1.4fr) auto;
  gap: 18px;
  align-items: end;
  margin-top: 18px;
  padding: 18px 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.admin-newsletter-test-panel h3,
.admin-newsletter-deliveries h3 {
  margin: 4px 0 0;
  font-size: 15px;
  letter-spacing: 0;
}

.admin-newsletter-test-form {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  align-items: end;
}

.admin-newsletter-test-form .field {
  margin: 0;
}

.admin-newsletter-campaign-state {
  align-self: center;
  text-align: right;
}

.admin-newsletter-campaign-state strong,
.admin-newsletter-campaign-state span {
  display: block;
  font-size: 10px;
}

.admin-newsletter-campaign-state span {
  margin-top: 4px;
  color: var(--muted);
}

.admin-newsletter-deliveries {
  margin-top: 24px;
}

.admin-newsletter-deliveries .admin-section-heading {
  margin-bottom: 8px;
}

.admin-newsletter-delivery {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.admin-newsletter-delivery strong,
.admin-newsletter-delivery span {
  display: block;
  font-size: 11px;
}

.admin-newsletter-delivery span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.admin-newsletter-loading,
.admin-newsletter-placeholder {
  min-height: 120px;
  display: grid;
  place-items: center;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 1040px) {
  .admin-newsletter-layout {
      grid-template-columns: minmax(0, 1fr);
    }

  .admin-newsletter-index {
      max-width: none;
    }

  .admin-newsletter-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      border-top: 0;
    }

  .admin-newsletter-item {
      border: 1px solid var(--line);
      border-left: 3px solid transparent;
      border-radius: 6px;
      background: var(--surface);
    }

  .admin-newsletter-item.is-selected {
      border-left-color: var(--blue);
    }

  .admin-newsletter-test-panel {
      grid-template-columns: minmax(150px, 0.6fr) minmax(280px, 1fr);
    }

  .admin-newsletter-campaign-state {
      grid-column: 1 / -1;
      text-align: left;
    }
}

@media (max-width: 1180px) and (min-width: 681px) {
  .admin-page {
      padding: 22px;
    }

  .admin-table {
      overflow: visible;
      border: 0;
      border-radius: 0;
      background: transparent;
    }

  .admin-table-head {
      display: none;
    }

  .admin-table-row {
      min-width: 0;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 12px 20px;
      margin-bottom: 10px;
      padding: 15px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface);
    }

  .admin-table-row > div {
      display: grid;
      grid-template-columns: 84px minmax(0, 1fr);
      gap: 9px;
    }

  .admin-table-row > div::before {
      content: attr(data-label);
    }

  .admin-table-row > div:first-child {
      grid-column: 1 / -1;
    }

  .admin-metrics,
    .admin-action-strip {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

  .admin-metrics > div:nth-child(3),
    .admin-action-strip > div:nth-child(3) {
      border-right: 0;
    }

  .admin-metrics > div:nth-child(-n + 3),
    .admin-action-strip > div:nth-child(-n + 3) {
      border-bottom: 1px solid var(--line);
    }
}

@media (max-width: 680px) {
  .sidebar {
      grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
    }

  .platform-invite-shell > header {
      padding: 15px 18px;
    }

  .platform-invite-panel {
      width: calc(100% - 32px);
      padding: 32px 0;
    }

  .platform-invite-panel h1 {
      font-size: 27px;
    }

  .platform-invite-facts > div {
      grid-template-columns: 92px minmax(0, 1fr);
    }

  .admin-topbar {
      min-height: auto;
      align-items: flex-start;
      flex-direction: column;
      padding: 18px 16px;
    }

  .admin-topbar-actions {
      width: 100%;
    }

  .admin-topbar-actions .button {
      flex: 1;
    }

  .admin-page {
      overflow: visible;
      padding: 18px 16px 42px;
    }

  .admin-metrics,
    .admin-action-strip {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

  .admin-metrics > div,
    .admin-action-strip > div {
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

  .admin-metrics > div:nth-child(2n),
    .admin-action-strip > div:nth-child(2n) {
      border-right: 0;
    }

  .admin-metrics > div:last-child,
    .admin-action-strip > div:last-child {
      border-bottom: 0;
    }

  .admin-section-heading {
      align-items: flex-start;
    }

  .admin-table {
      overflow: visible;
      border: 0;
      border-radius: 0;
      background: transparent;
    }

  .admin-table-head {
      display: none;
    }

  .admin-table-row {
      min-width: 0;
      grid-template-columns: minmax(0, 1fr) !important;
      gap: 10px;
      margin-bottom: 10px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface);
    }

  .admin-table-row > div {
      display: grid;
      grid-template-columns: 86px minmax(0, 1fr);
      gap: 8px;
    }

  .admin-table-row > div::before {
      content: attr(data-label);
    }

  .admin-table-row small {
      white-space: normal;
    }

  .admin-action-strip > div:last-child:nth-child(odd),
    .admin-metrics > div:last-child:nth-child(odd) {
      grid-column: 1 / -1;
      border-right: 0;
    }

  .admin-activity-row {
      grid-template-columns: 8px minmax(0, 1fr);
    }

  .admin-activity-row time {
      grid-column: 2;
    }

  .admin-invite-form {
      grid-template-columns: minmax(0, 1fr);
    }

  .admin-invite-form .button {
      width: 100%;
    }

  .admin-access-row {
      align-items: flex-start;
    }

  .admin-newsletter-list {
      grid-template-columns: minmax(0, 1fr);
    }

  .admin-newsletter-frame {
      height: 640px;
    }

  .admin-newsletter-test-panel,
    .admin-newsletter-test-form {
      grid-template-columns: minmax(0, 1fr);
    }

  .admin-newsletter-test-form .button {
      width: 100%;
    }
}

/* ---- Shipment journey: chapter inspector ---- */

.detail-back-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.detail-evidence-link {
  flex: 0 0 auto;
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
}

.journey-section {
  padding: 0;
  border-top: 0;
}

.journey {
  margin: 30px -34px 0;
  padding: 52px 34px 28px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #f2f4f5;
}

.journey-head {
  margin-bottom: 52px;
}

.journey-head h3 {
  margin-top: 7px;
  font-size: 20px;
  line-height: 1.3;
}

.journey-empty {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

/* Carrier records remain an evidence ledger, not an inferred route. */

.journey-tracking-history {
  margin-top: 62px;
  padding-top: 25px;
  border-top: 1px solid var(--line);
}

.journey-current-location {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.journey-current-location > div {
  min-width: 0;
}

.journey-current-location h4,
.journey-tracking-ledger-head h4 {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
}

.journey-current-location-value {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.journey-current-location-value > strong {
  min-width: 0;
  font-size: 22px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.journey-current-location-value > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 5px 10px;
  border: 1px solid #e8c48a;
  border-radius: 6px;
  background: #fbf3e6;
  color: #7a4f00;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
}

.journey-current-location-value > span i {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  background: #a65b00;
}

.journey-current-location-value > span.is-supported {
  border-color: #c9dbf8;
  background: #f2f6fd;
  color: #1b4cb0;
}

.journey-current-location-value > span.is-supported i {
  background: var(--blue);
}

.journey-current-location p {
  max-width: 880px;
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.journey-current-location-actions {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  flex: 0 0 auto;
}

.journey-current-eta {
  display: grid;
  gap: 3px;
  text-align: right;
}

.journey-current-eta > span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
}

.journey-current-eta > strong {
  font-size: 15px;
  line-height: 1.35;
}

.journey-current-location-actions > .button {
  flex: 0 0 auto;
}

/* The history sits directly in the location card, under a divider. */
.journey-tracking-ledger {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #dfe4e9;
}

.journey-tracking-ledger-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 0 12px;
}

.journey-tracking-ledger-head > span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
}

.journey-tracking-table-header,
.journey-tracking-row {
  display: grid;
  grid-template-columns:
    minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 0.6fr);
  gap: 20px;
}

.journey-tracking-table-header {
  padding: 8px 0;
  border-bottom: 1px solid #dfe4e9;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.35;
  text-transform: uppercase;
}

.journey-tracking-row {
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid #eef1f4;
}

.journey-tracking-row:last-child {
  border-bottom: 0;
}

.journey-tracking-event {
  position: relative;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}

/* One continuous line through every row, drawn on the row so it spans the
   row's full height whatever the tallest cell is. --dot-y is the dot centre. */
.journey-tracking-row {
  --dot-y: 23px;
  /* Rows sit flush inside the location card, so the line needs no inset. */
  --timeline-inset: 0px;
  position: relative;
  border-bottom: 0;
}

.journey-tracking-row::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--timeline-inset) + 6px);
  width: 2px;
  background: #cdd5dc;
  content: "";
}

/* Row dividers start after the line so they never cross it. */
.journey-tracking-row::after {
  position: absolute;
  right: var(--timeline-inset);
  bottom: 0;
  left: calc(var(--timeline-inset) + 26px);
  height: 1px;
  background: #eef1f4;
  content: "";
}

.journey-tracking-row.is-last::after {
  display: none;
}

.journey-tracking-row.is-first::before {
  top: var(--dot-y);
}

.journey-tracking-row.is-last::before {
  bottom: auto;
  height: var(--dot-y);
}

.journey-tracking-row.is-first.is-last::before {
  display: none;
}

/* Solid dots centred on the line; the white ring keeps the line from
   touching them. The latest scan is larger and blue. */
.journey-tracking-dot {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  margin: 4px 0 0 2px;
  border-radius: 50%;
  background: #50606e;
  box-shadow: 0 0 0 3px #fff;
}

.journey-tracking-row.is-current .journey-tracking-dot {
  width: 12px;
  height: 12px;
  margin: 3px 0 0 1px;
  background: var(--blue);
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(35, 104, 167, 0.18);
}

.journey-tracking-row.is-attention .journey-tracking-dot {
  background: #a65b00;
}

.journey-tracking-row.is-administrative .journey-tracking-dot,
.journey-tracking-row.is-record .journey-tracking-dot {
  border: 2px solid #aeb7c0;
  background: #fff;
}

.journey-tracking-event strong,
.journey-tracking-place strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.journey-tracking-event p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.journey-tracking-place-link {
  margin-top: 7px;
  padding: 4px 9px;
  border: 1px solid #c9dbf8;
  border-radius: 6px;
  background: #f2f6fd;
  color: #1b4cb0;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
}

.journey-tracking-place-link:hover {
  border-color: var(--blue);
}

.journey-tracking-place span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.45;
  text-transform: uppercase;
}

.journey-tracking-row > time,
.journey-tracking-source {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.journey-tracking-row > time {
  font-family: var(--font-mono);
}

.journey-tracking-row > time:first-of-type {
  color: var(--ink);
}

.journey-tracking-row > time small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

/* Movement not reported by a carrier (documents, manual updates, GPS). */
.journey-movement {
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.journey-movement ol {
  display: flex;
  flex-direction: column;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.journey-movement li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid #eef1f4;
}

.journey-movement li:first-child { border-top: 0; }
.journey-movement li strong { font-size: 13.5px; }
.journey-movement li p { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; }
.journey-movement li time { color: var(--muted); font-family: var(--font-mono); font-size: 12px; white-space: nowrap; }

.journey-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 22px 20px;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
}

.journey-empty p { margin: 0 0 6px; color: var(--muted); font-size: 13.5px; }

.journey-tracking-ledger-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 12px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.journey-tracking-empty {
  margin: 0;
  padding: 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

/* Contract truth remains a separate layer beneath the operating picture. */

.journey-contract {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.journey-contract-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  margin: 0;
}

.journey-contract-toggle {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.journey-contract-toggle:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 6px;
}

.journey-contract-toggle > span:last-child {
  flex: 0 0 auto;
  color: #3d4750;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.journey-contract-copy {
  min-width: 0;
  max-width: 760px;
}

.journey-contract-copy > span {
  color: var(--muted);
}

.journey-contract-copy strong {
  display: block;
  margin-top: 8px;
  font-size: 20px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.journey-contract-copy small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.journey-contract-head .journey-evidence-actions {
  flex: 0 0 auto;
  gap: 14px;
  padding-top: 1px;
}

.journey-contract-detail {
  margin-top: 22px;
}

.journey-contract-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(30px, 5vw, 68px);
  margin: 0;
}

.journey-contract-facts > div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.journey-contract-facts dt {
  flex: 0 0 138px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.journey-contract-facts dd {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  text-align: right;
  overflow-wrap: anywhere;
}

.journey-contract-route-block {
  margin-top: 30px;
}

.journey-contract-route-block > p,
.journey-contract-comparison > p {
  max-width: 820px;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.journey-contract-route-scroll,
.journey-contract-comparison-scroll {
  width: 100%;
  margin-top: 18px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.journey-contract-route {
  min-width: 920px;
}

.journey-contract-stop-labels,
.journey-contract-ticks,
.journey-contract-cost-strip,
.journey-contract-stop-evidence {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.journey-contract-stop-labels span {
  padding: 0 8px 7px 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.35;
  text-transform: uppercase;
}

.journey-contract-ticks span {
  height: 10px;
  border-left: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
}

.journey-contract-cost-strip span {
  height: 14px;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.journey-contract-cost-strip .is-seller,
.journey-contract-legend i.is-seller,
.journey-contract-comparison-row [role="cell"].is-seller {
  border-color: var(--ink);
  background: var(--ink);
}

.journey-contract-cost-strip .is-buyer,
.journey-contract-legend i.is-buyer,
.journey-contract-comparison-row [role="cell"].is-buyer {
  background: repeating-linear-gradient(
    45deg,
    #aeb8c0 0 2px,
    transparent 2px 6px
  );
}

.journey-contract-stop-evidence > div {
  min-width: 0;
  padding: 9px 8px 0 0;
}

.journey-contract-stop-evidence strong {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #80520e;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.35;
  text-transform: uppercase;
}

.journey-contract-stop-evidence span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.journey-contract-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 18px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
}

.journey-contract-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.journey-contract-legend i {
  display: inline-block;
  width: 18px;
  height: 8px;
  border: 1px solid var(--line-strong);
}

.journey-contract-legend i.is-transfer {
  width: 8px;
  background: #a9690d;
  border-color: #a9690d;
}

.journey-contract-disclaimer {
  max-width: 760px;
  margin: 24px 0 0;
  padding-left: 13px;
  border-left: 2px solid var(--ink);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.journey-terms-toggle {
  margin-top: 20px;
  padding: 0;
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
}

.journey-contract-comparison {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.journey-contract-comparison-table {
  min-width: 980px;
}

.journey-contract-comparison-head,
.journey-contract-comparison-row {
  display: grid;
  grid-template-columns: 180px repeat(7, minmax(0, 1fr));
  gap: 8px;
  align-items: center;
}

.journey-contract-comparison-head {
  padding-bottom: 8px;
}

.journey-contract-comparison-head span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1.35;
  text-transform: uppercase;
}

.journey-contract-comparison-row {
  min-height: 31px;
  padding: 4px 0;
}

.journey-contract-comparison-row > div {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 6px;
  min-width: 0;
}

.journey-contract-comparison-row > div strong {
  font-family: var(--font-mono);
  font-size: 10px;
}

.journey-contract-comparison-row > div span {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journey-contract-comparison-row [role="cell"] {
  position: relative;
  display: block;
  height: 11px;
}

.journey-contract-comparison-row [role="cell"] i {
  position: absolute;
  top: 1px;
  left: -4px;
}

.journey-contract-comparison-row.is-active {
  background: rgba(35, 104, 167, 0.07);
  box-shadow: 0 0 0 4px rgba(35, 104, 167, 0.07);
}

.journey-contract-comparison-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 14px;
}

.journey-contract-source {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

/* Evidence opens as an inspector, without replacing the operating picture. */

body.evidence-drawer-open {
  overflow: hidden;
}

.evidence-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(16, 24, 32, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.evidence-drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.evidence-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 81;
  width: min(540px, 100vw);
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-left: 1px solid var(--ink);
  background: #f2f4f5;
  box-shadow: -18px 0 50px rgba(16, 24, 32, 0.16);
  opacity: 0;
  pointer-events: none;
  transform: translateX(100%);
  visibility: hidden;
  transition:
    transform 180ms ease,
    opacity 180ms ease,
    visibility 0s linear 180ms;
}

.evidence-drawer.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  visibility: visible;
  transition-delay: 0s;
}

.evidence-drawer-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  min-height: 78px;
  padding: 15px 22px;
  background: var(--ink);
  color: #f5f7f8;
}

.evidence-drawer-head > div {
  min-width: 0;
}

.evidence-drawer-head > div > span {
  color: #b8c1c8;
}

.evidence-drawer-head h2 {
  margin: 4px 0 0;
  color: #f5f7f8;
  font-size: 16px;
  line-height: 1.3;
}

.evidence-drawer-head p {
  margin: 5px 0 0;
  color: #b8c1c8;
  font-size: 11px;
}

.evidence-drawer-head p .text-button {
  padding: 0;
  color: #9bc6f0;
  font-size: 11px;
}

.evidence-drawer-close {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-color: transparent;
  background: transparent;
  color: #b8c1c8;
  font-size: 22px;
}

.evidence-drawer-close:hover,
.evidence-drawer-close:focus-visible {
  color: #fff;
}

.evidence-drawer-body {
  height: calc(100dvh - 78px);
  overflow-y: auto;
  padding: 6px 22px 48px;
  overscroll-behavior: contain;
}

.evidence-drawer-section {
  padding: 22px 0 0;
}

.evidence-drawer-section + .evidence-drawer-section {
  margin-top: 24px;
  border-top: 1px solid var(--line);
}

.evidence-drawer-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.evidence-drawer-section-head h3 {
  margin: 0;
}

.evidence-drawer-section-head > span {
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 10px;
}

.evidence-source {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.evidence-source > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.evidence-source > header > div {
  min-width: 0;
}

.evidence-source > header strong,
.evidence-source > header span {
  display: block;
  overflow-wrap: anywhere;
}

.evidence-source > header strong {
  font-size: 13px;
  line-height: 1.4;
}

.evidence-source > header > div span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.evidence-source > p {
  margin: 10px 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--line-strong);
  color: #35404a;
  font-size: 13px;
  line-height: 1.55;
}

.evidence-source .extracted-fields {
  margin-top: 10px;
}

.evidence-plain-list > div,
.evidence-fact-list > div,
.evidence-revision-list > div {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.evidence-plain-list strong,
.evidence-plain-list span,
.evidence-fact-list span,
.evidence-fact-list strong,
.evidence-fact-list small {
  display: block;
}

.evidence-plain-list strong,
.evidence-fact-list strong {
  font-size: 12px;
  line-height: 1.45;
}

.evidence-plain-list p {
  margin: 5px 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.evidence-plain-list span,
.evidence-fact-list span,
.evidence-fact-list small {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
}

.evidence-fact-list strong {
  margin: 4px 0;
  overflow-wrap: anywhere;
}

.evidence-revision-list > div {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
}

.evidence-revision-list strong,
.evidence-revision-list span,
.evidence-revision-list time {
  font-size: 10px;
}

.evidence-revision-list span,
.evidence-revision-list time {
  color: var(--muted);
}

.evidence-drawer .timeline {
  margin-top: 8px;
}

@media (max-width: 980px) {
  .journey-contract-head {
      align-items: stretch;
      flex-direction: column;
    }

  .journey-contract-head .journey-evidence-actions {
      justify-content: flex-start;
    }

  .journey-tracking-table-header {
      display: none;
    }

  .journey-tracking-row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px 28px;
    }

  .journey-tracking-event {
      grid-column: 1 / -1;
    }

  .journey-tracking-row > [data-label]:not(.journey-tracking-event) {
      padding-left: 26px;
    }

  .journey-tracking-row > [data-label]:not(.journey-tracking-event)::before {
      display: block;
      margin-bottom: 5px;
      color: var(--muted);
      content: attr(data-label);
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 600;
      line-height: 1.35;
      text-transform: uppercase;
    }
}

@media (max-width: 680px) {
  .detail-back-row {
      margin-bottom: 20px;
    }

  .detail-evidence-link {
      font-size: 11px;
    }

  /* One wrapping row of compact actions instead of stacked full-width rows:
     triage content stays above the fold on small screens. */
  .detail-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
    }

  .detail-actions .button {
      width: auto;
      min-height: 38px;
      padding-inline: 14px;
    }

  .journey {
      margin: 26px -18px 0;
      padding: 40px 18px 22px;
    }

  .journey-head {
      align-items: flex-start;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 34px;
    }

  .journey-head-meta {
      align-items: flex-start;
      flex-direction: row;
      flex-wrap: wrap;
      text-align: left;
    }

  .journey-tracking-history {
      margin-top: 48px;
    }

  .journey-current-location {
      align-items: flex-start;
      flex-direction: column;
      gap: 16px;
    }

  .journey-current-location-value {
      align-items: flex-start;
      flex-direction: column;
    }

  .journey-current-location-value > strong {
      font-size: 19px;
    }

  .journey-current-location-actions {
      width: 100%;
      align-items: flex-start;
      justify-content: space-between;
    }

  .journey-current-eta {
      text-align: left;
    }

  .journey-tracking-ledger-head {
      align-items: flex-start;
      flex-direction: column;
    }

  .journey-tracking-row {
      --dot-y: 25px;
      --timeline-inset: 0px;
      grid-template-columns: minmax(0, 1fr);
      gap: 15px;
      padding: 16px 0;
    }

  .journey-tracking-event {
      grid-column: auto;
    }

  .journey-tracking-ledger-foot {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
    }

  .journey-contract {
      margin-top: 50px;
    }

  .journey-contract-toggle {
      align-items: flex-start;
      flex-direction: column;
      gap: 12px;
    }

  .journey-contract-copy strong {
      font-size: 17px;
    }

  .journey-contract-head .journey-evidence-actions {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
    }

  .journey-contract-facts {
      grid-template-columns: minmax(0, 1fr);
    }

  .journey-contract-facts dt {
      flex-basis: 108px;
    }

  .evidence-drawer {
      width: 100vw;
      border-left: 0;
    }

  .evidence-drawer-head,
    .evidence-drawer-body {
      padding-right: 18px;
      padding-left: 18px;
    }

  .evidence-revision-list > div {
      grid-template-columns: 76px minmax(0, 1fr);
    }

  .evidence-revision-list time {
      grid-column: 2;
    }
}

/* ---- Shipment workspace: linked movement and document operations ---- */

.detail-head {
  margin-bottom: 20px;
}

.shipment-ref {
  color: #68737d;
}

.journey {
  margin-top: 24px;
  padding-top: 40px;
  background: #f4f6f6;
}

.journey-head {
  margin-bottom: 34px;
}

.journey-head h3 {
  max-width: 760px;
  font-size: 21px;
}

.shipment-workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  padding-top: 38px;
}

.shipment-workspace-primary {
  min-width: 0;
}

.shipment-workspace-primary .fulfillment-section {
  margin-top: 8px;
  padding-top: 30px;
}

.workspace-section-eyebrow,
.workspace-rail-heading > span,
.shipment-activity-meta > span,
.shipment-activity-meta time {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.35;
  text-transform: uppercase;
}

.workspace-section-eyebrow {
  display: block;
  margin-bottom: 7px;
}

.shipment-activity-head {
  align-items: flex-end;
  margin-bottom: 22px;
}

.shipment-activity-head h3 {
  margin-bottom: 0;
  font-size: 18px;
}

.shipment-activity-head p {
  max-width: 640px;
  margin-top: 6px;
  line-height: 1.5;
}

.shipment-activity-key {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 15px;
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}

.shipment-activity-key span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.shipment-activity-key i {
  width: 7px;
  height: 7px;
  border: 1px solid #7f8a93;
  border-radius: 50%;
  background: #fff;
}

.shipment-activity-key i.is-movement {
  border-color: #247a67;
  background: #247a67;
}

.shipment-activity-key i.is-document {
  border-color: var(--blue);
  background: var(--blue);
}

.shipment-activity-key i.is-plan {
  border-color: #a9690d;
}

.shipment-activity-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.shipment-activity-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 15px;
  align-items: start;
  min-width: 0;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.shipment-activity-marker {
  position: relative;
  align-self: stretch;
  width: 18px;
}

.shipment-activity-marker::before {
  position: absolute;
  top: -19px;
  bottom: -19px;
  left: 8px;
  width: 1px;
  background: #dce2e5;
  content: "";
}

.shipment-activity-item:first-child .shipment-activity-marker::before {
  top: 8px;
}

.shipment-activity-item:last-child .shipment-activity-marker::before {
  bottom: calc(100% - 9px);
}

.shipment-activity-marker i {
  position: relative;
  z-index: 1;
  display: block;
  width: 9px;
  height: 9px;
  margin: 4px 0 0 4px;
  border: 2px solid #7d8790;
  border-radius: 50%;
  background: #fff;
}

.shipment-activity-item.is-movement .shipment-activity-marker i {
  border-color: #247a67;
  background: #247a67;
}

.shipment-activity-item.is-document .shipment-activity-marker i {
  border-color: var(--blue);
  background: var(--blue);
}

.shipment-activity-item.is-plan .shipment-activity-marker i {
  border-color: #a9690d;
}

.shipment-activity-copy {
  min-width: 0;
}

.shipment-activity-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  margin-bottom: 5px;
}

.shipment-activity-meta > span {
  color: #35424c;
}

.shipment-activity-item.is-movement .shipment-activity-meta > span {
  color: #1f6859;
}

.shipment-activity-item.is-document .shipment-activity-meta > span {
  color: #1b4cb0;
}

.shipment-activity-item.is-plan .shipment-activity-meta > span {
  color: #80520e;
}

.shipment-activity-copy > strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.shipment-activity-copy > p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.shipment-activity-actions {
  display: grid;
  justify-items: end;
  gap: 7px;
  padding-top: 1px;
}

.shipment-activity-actions > span {
  padding: 4px 7px;
  border-radius: 4px;
  background: #eef2f5;
  color: #59646e;
  font-size: 10px;
  font-weight: 700;
}

.shipment-activity-actions .text-button {
  padding: 0;
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

/* Empty supporting sections collapse to one quiet line instead of a large
   card that only says nothing exists yet. */
.workspace-empty-line {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.workspace-detail .section.is-empty {
  padding-top: 14px;
  padding-bottom: 14px;
}

.shipment-activity-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* 33px left = the 18px marker column + 15px gap, so the note aligns with
     entry copy; top matches the 15px item rhythm. */
  padding: 15px 0 0 33px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.shipment-activity-more .text-button {
  flex: 0 0 auto;
  padding: 0;
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
}

/* One compact callout under the status strip carries exceptions and next
   actions; it renders nothing when there is nothing to act on. */
.next-action-callout {
  min-width: 0;
}

.workspace-rail-section {
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.workspace-rail-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 15px;
}

.workspace-rail-heading b {
  display: inline-grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  padding: 0 6px;
  border-radius: 999px;
  background: #edf1f3;
  color: #4f5a64;
  font-size: 10px;
}

.workspace-issue strong,
.workspace-task .row-title {
  display: block;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}

.workspace-issue p,
.workspace-task p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.workspace-issue-list,
.workspace-task-list {
  display: grid;
}

.workspace-issue {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  gap: 10px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
}

.workspace-issue > span {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  background: #a9690d;
}

.workspace-issue.is-critical > span,
.workspace-issue.is-error > span {
  background: var(--red);
}

.workspace-task-delivery-issue,
.workspace-task-delivery-delay,
.remediation-delivery-issue {
  border: 1px solid color-mix(in srgb, var(--red) 32%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--red) 7%, var(--surface));
  color: var(--ink);
}

.workspace-task-delivery-delay {
  margin: 10px 0;
  padding: 10px 12px;
  border-color: color-mix(in srgb, var(--amber) 35%, var(--line));
  background: color-mix(in srgb, var(--amber) 8%, var(--surface));
}

.workspace-task-delivery-issue {
  margin: 10px 0;
  padding: 10px 12px;
}

.remediation-delivery-issue {
  display: grid;
  gap: 4px;
  margin-bottom: 16px;
  padding: 12px 14px;
}

.workspace-task-delivery-issue strong,
.remediation-delivery-issue strong {
  color: var(--red);
}

.workspace-task.next-step-row {
  display: block;
  padding: 15px 0;
  border-top: 1px solid var(--line);
}

.workspace-task .next-step-actions {
  justify-content: flex-start;
  margin-top: 12px;
}

.workspace-task .next-step-actions .button {
  min-width: 0;
  white-space: normal;
}

@media (max-width: 680px) {
  .journey {
      margin: 26px -18px 0;
      padding: 36px 18px 22px;
    }

  .shipment-workspace-grid {
      gap: 24px;
      padding-top: 30px;
    }

  .shipment-activity-head {
      align-items: flex-start;
      flex-direction: column;
      gap: 14px;
    }

  .shipment-activity-key {
      justify-content: flex-start;
    }

  .shipment-activity-item {
      grid-template-columns: 16px minmax(0, 1fr);
      gap: 12px;
    }

  .shipment-activity-actions {
      grid-column: 2;
      grid-template-columns: auto auto;
      justify-content: start;
      justify-items: start;
    }

  .shipment-activity-meta {
      align-items: flex-start;
      flex-direction: column;
      gap: 3px;
    }

  .shipment-activity-more {
      align-items: flex-start;
      flex-direction: column;
      padding-left: 28px;
    }

  .workspace-task-list {
      grid-template-columns: minmax(0, 1fr);
    }

  .workspace-task .next-step-actions {
      width: 100%;
    }
}

/* ==== Shipment workspace redesign: header, status strip, two-lane timeline ==== */

.detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 0;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.detail-head-copy {
  min-width: 0;
}

.shipment-identity {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
}

.shipment-identity .shipment-ref {
  margin: 0;
  color: #4c5a66;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.shipment-copy {
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: color 120ms ease, border-color 120ms ease;
}

.shipment-copy:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.shipment-copy:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.shipment-copy[data-copied="true"] {
  border-color: var(--green);
  color: var(--green);
}

.shipment-copy[data-copied="true"] span::after {
  content: "\00a0\2713";
}

.detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  max-width: 460px;
}

/* ---- Timeline: the dominant surface ---- */

.shipment-workspace-primary > .journey-section {
  margin-bottom: 26px;
  padding: 0;
  border-top: 0;
}

.journey {
  margin-top: 0;
  padding: 20px 0 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.journey-head {
  align-items: flex-start;
  margin-bottom: 16px;
  padding: 0 18px;
}

.journey-head h3 {
  margin-top: 4px;
  font-size: 17px;
  line-height: 1.35;
}

.journey [data-carrier-tracking-history] {
  padding: 0 18px 18px;
}

/* ---- Supporting detail + rail composition ---- */

.shipment-workspace-grid {
  gap: clamp(26px, 3vw, 40px);
  padding-top: 24px;
}

@media (max-width: 900px) {
  .detail-head {
      flex-direction: column;
      gap: 16px;
    }

  .detail-actions {
      justify-content: flex-start;
      max-width: none;
    }
}

@media (max-width: 680px) {
  .journey {
      margin: 0;
      padding: 16px 0 0;
      border-radius: 9px;
    }

  .journey-head {
      padding: 0 14px;
    }
}

/* ==== Home: workspace overview ==== */

/* Card language for this page follows the supplied home mockup: separated
   white cards on the grey workspace, soft elevation, larger radii. */

.workspace-home {
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.home-page {
  --home-radius: 12px;
  --home-shadow: 0 1px 2px rgba(16, 24, 32, 0.05), 0 1px 3px rgba(16, 24, 32, 0.04);
  --home-card-line: #e3e8ec;
  --home-gutter: 32px;
  padding: 26px var(--home-gutter) 46px;
}

.home-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.home-greeting h2 {
  margin: 0;
  font-size: 26px;
  letter-spacing: -0.015em;
}

.home-greeting p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.home-head-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.home-new-shipment {
  height: 40px;
  flex: 0 0 auto;
  border-radius: 10px;
  white-space: nowrap;
}

/* Home has no topbar, so the updates bell sits in the page header. */

.home-head-actions .topbar-updates-button {
  flex: 0 0 auto;
}

.workspace-home {
  padding-top: 0;
}

.home-new-shipment span {
  margin-right: 6px;
  font-weight: 700;
}

.home-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.home-stat {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 4px 12px;
  min-width: 0;
  padding: 16px 17px;
  border: 1px solid var(--home-card-line);
  border-radius: var(--home-radius);
  background: var(--surface);
  box-shadow: var(--home-shadow);
}

.home-stat-icon {
  display: grid;
  grid-row: span 2;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--muted);
}

.home-stat-icon svg {
  width: 20px;
  height: 20px;
}

.home-stat.is-active .home-stat-icon {
  background: var(--blue-bg);
  color: var(--blue);
}

.home-stat.is-attention .home-stat-icon {
  background: var(--amber-bg);
  color: var(--amber);
}

.home-stat.is-positive .home-stat-icon {
  background: var(--green-bg);
  color: var(--green);
}

.home-stat-label {
  align-self: end;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}

.home-stat-value {
  align-self: start;
  font-size: 26px;
  font-weight: 650;
  line-height: 1.15;
}

.home-stat.is-attention .home-stat-value {
  color: var(--amber);
}

.home-stat-note {
  grid-column: 1 / -1;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.home-shipments,
.home-rail-section {
  min-width: 0;
  overflow: hidden; /* clip full-bleed row hovers + footer links to the radius */
  border: 1px solid var(--home-card-line);
  border-radius: var(--home-radius);
  background: var(--surface);
  box-shadow: var(--home-shadow);
}

.home-shipments-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 0;
}

.home-shipments-head h3 {
  margin: 0;
  font-size: 16px;
}

.home-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.home-filters button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 11px 12px;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

.home-filters button:hover {
  color: var(--ink);
}

.home-filters button.is-active {
  border-bottom-color: var(--blue);
  color: var(--blue);
}

.home-filters button span {
  color: var(--faint);
  font-size: 12px;
}

.home-filters button.is-active span {
  color: var(--blue);
}

.home-filters button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

.home-table-head,
.home-row {
  display: grid;
  grid-template-columns:
    minmax(0, 1.5fr) minmax(0, 1.6fr) minmax(0, 1.2fr)
    minmax(0, 1fr) 76px;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
}

.home-table-head {
  border-top: 1px solid var(--home-card-line);
  border-bottom: 1px solid var(--home-card-line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.home-row {
  border-bottom: 1px solid var(--home-card-line);
  cursor: pointer;
  transition: background-color 120ms ease;
}

.home-row:last-child {
  border-bottom: 0;
}

.home-row:hover {
  background: #f7fafc;
}

.home-row:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

.home-cell {
  min-width: 0;
}

.home-cell-shipment strong {
  display: block;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.home-cell-shipment .mono {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.home-cell-route {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1.4;
}

.home-cell-route i {
  color: var(--faint);
  font-style: normal;
}

.home-route-single em {
  color: var(--faint);
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.home-cell-sub {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.home-cell-sub.is-attention {
  color: var(--amber);
  font-weight: 600;
}

.home-cell-documents strong {
  font-size: 12px;
  font-weight: 650;
}

.home-muted {
  color: var(--faint);
  font-size: 11px;
}

.home-cell-updated {
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}

.home-view-all {
  display: block;
  width: 100%;
  padding: 14px 18px;
  border-top: 1px solid var(--home-card-line);
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

/* The card's overflow: hidden would clip the UA default focus ring, so draw
   it inset like the other card controls. */
.home-view-all:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

.home-empty,
.home-rail-empty {
  margin: 0;
  padding: 22px 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.home-rail {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.home-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--home-card-line);
}

.home-rail-head > span {
  font-size: 14px;
  font-weight: 650;
}

.home-rail-head b {
  display: inline-grid;
  min-width: 21px;
  height: 21px;
  place-items: center;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 10px;
}

.home-rail-head .text-button {
  padding: 0;
  color: var(--blue);
  font-size: 12px;
  font-weight: 650;
}

.home-upcoming,
.home-alerts {
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-upcoming li + li,
.home-alerts li + li {
  border-top: 1px solid var(--home-card-line);
}

.home-upcoming button,
.home-alerts button {
  display: grid;
  width: 100%;
  padding: 13px 18px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background-color 120ms ease;
}

.home-upcoming button {
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.home-upcoming button:hover,
.home-alerts button:hover {
  background: #f7fafc;
}

.home-upcoming button:focus-visible,
.home-alerts button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

.home-upcoming-date {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.3;
  text-transform: uppercase;
}

.home-upcoming-copy strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
}

.home-upcoming-copy .mono {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.home-upcoming-when {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.home-upcoming li.is-overdue .home-upcoming-when {
  color: var(--amber);
  font-weight: 650;
}

.home-alerts button {
  grid-template-columns: 8px minmax(0, 1fr);
  grid-template-areas: "marker title" "marker meta";
  gap: 3px 10px;
  align-items: start;
}

.home-alerts button::before {
  grid-area: marker;
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--amber);
  content: "";
}

.home-alerts li.is-critical button::before,
.home-alerts li.is-error button::before {
  background: var(--red);
}

.home-alerts strong {
  grid-area: title;
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.home-alerts span {
  grid-area: meta;
  display: block;
  margin-top: 0;
  color: var(--muted);
  font-size: 11px;
}

@media (max-width: 1240px) {
  .home-stats {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
  .home-page {
      --home-gutter: 18px;
      padding: 22px var(--home-gutter) 36px;
    }

  .home-head-actions {
      flex-wrap: wrap;
      width: 100%;
    }

  .home-stats {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

  .home-rail {
      grid-template-columns: minmax(0, 1fr);
    }

  .home-table-head {
      display: none;
    }

  .home-row {
      grid-template-columns: minmax(0, 1fr);
      gap: 9px;
      padding: 15px 16px;
    }

  .home-cell::before {
      display: block;
      margin-bottom: 3px;
      content: attr(data-label);
    }

  .home-cell-shipment::before {
      display: none;
    }

  .home-cell-updated {
      text-align: left;
    }
}

@media (max-width: 520px) {
  .home-stats {
      grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
  .home-row,
    .home-upcoming button,
    .home-alerts button {
      transition: none;
    }
}

/* ==== Shipment workspace: light command center ==== */

/* The shipment workspace shares Home's light canvas and card language while
   retaining the evidence graph, not the reference mockup, as its state model. */

.workspace-detail {
  --workspace-card-line: #ccd5dd;
  --workspace-canvas: #eef1f4;
  --workspace-radius: 12px;
  --workspace-shadow:
    0 1px 2px rgba(16, 24, 32, 0.06),
    0 2px 6px rgba(16, 24, 32, 0.05);
  /* Single source of truth for the sticky section rail: where it pins
     within the scroller. .workspace-rail (top) and .workspace-anchor
     (scroll-margin-top) both derive from it so they cannot drift apart. */
  --workspace-rail-top: 0px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--workspace-canvas);
}

/* The scroller must carry NO top padding: a sticky child pins below the
   scroller's padding, leaving a gap where scrolled content stays visible
   above the rail. The former top padding lives on the first content row. */
.workspace-detail .detail {
  padding: 0 32px 48px;
  background: var(--workspace-canvas);
}

.workspace-detail .detail-back-row {
  margin: 24px 0 15px;
}

.workspace-detail .detail-back,
.workspace-detail .detail-evidence-link {
  color: var(--blue);
  font-size: 12px;
  font-weight: 650;
}

.workspace-detail .detail-head {
  align-items: flex-start;
  margin: 0 0 22px;
  padding: 0;
  border: 0;
}

.workspace-detail .detail-head-copy {
  max-width: 820px;
}

.workspace-detail .shipment-identity {
  margin-top: 0;
  gap: 10px;
}

.workspace-detail .shipment-identity .shipment-ref {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: none;
}

.workspace-detail .shipment-copy {
  height: 22px;
  display: inline-grid;
  place-items: center;
  padding: 0 7px;
  border-color: var(--workspace-card-line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--faint);
}

.workspace-detail .shipment-identity .badge {
  height: 24px;
  border-radius: 999px;
}

/* The route is the page title. */
.workspace-detail .shipment-head-headline {
  margin: 9px 0 0;
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.workspace-detail .shipment-head-headline i {
  padding: 0 5px;
  color: var(--blue);
  font-style: normal;
  font-weight: 500;
}

/* Facts read as one quiet sentence, not chips. */
.workspace-detail .shipment-head-meta {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.65;
}

.workspace-detail .shipment-head-meta b {
  color: var(--ink);
  font-weight: 600;
}

.workspace-detail .shipment-head-meta i {
  padding: 0 7px;
  color: var(--faint);
  font-style: normal;
}

.workspace-detail .detail-actions {
  gap: 10px;
  max-width: none;
}

.workspace-detail .detail-actions .button {
  min-height: 38px;
  border-radius: 9px;
  white-space: nowrap;
}

.workspace-detail .detail-actions .topbar-updates-button {
  border-color: var(--workspace-card-line);
  border-radius: 9px;
  box-shadow: var(--workspace-shadow);
}

/* Overflow menu: rare and destructive actions live behind the ellipsis. */
.head-menu {
  position: relative;
}

.head-menu summary {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--workspace-card-line, var(--line));
  border-radius: 9px;
  background: var(--surface);
  box-shadow: var(--workspace-shadow, none);
  color: var(--muted);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  list-style: none;
}

.head-menu summary::-webkit-details-marker {
  display: none;
}

.head-menu summary:hover,
.head-menu[open] summary {
  border-color: var(--faint);
  color: var(--ink);
}

.head-menu-list {
  position: absolute;
  top: 44px;
  right: 0;
  z-index: 30;
  min-width: 185px;
  padding: 6px;
  border: 1px solid var(--workspace-card-line, var(--line));
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 10px 30px rgba(16, 24, 32, 0.14);
}

.head-menu-list button {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: 550;
  text-align: left;
  cursor: pointer;
}

.head-menu-list button:hover {
  background: var(--surface-soft);
}

.head-menu-list button.is-danger {
  color: var(--red);
}

.workspace-detail .archive-banner,
.workspace-detail .attention-banner,
.workspace-detail .review-failure-banner,
.workspace-detail .shipment-update-banner,
.workspace-detail .tracking-connection {
  margin-bottom: 14px;
  border-radius: var(--workspace-radius);
  box-shadow: var(--workspace-shadow);
}

.workspace-detail .shipment-workspace-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: start;
  padding-top: 0;
}

.workspace-detail .shipment-workspace-primary {
  min-width: 0;
}

/* Factual KPI cards */

/* Dominant four-stage physical and document timeline */

.workspace-detail .shipment-workspace-primary > .journey-section {
  margin: 0 0 16px;
  padding: 0;
}

.workspace-detail .journey {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0.5px solid var(--nav);
  border-radius: var(--workspace-radius);
  background: var(--surface);
  box-shadow: var(--workspace-shadow);
}

/* The timeline card wears the same header band as the exceptions &
   next-actions card: tab-wash blue, one shade deeper. */
.workspace-detail .journey-head {
  align-items: center;
  gap: 18px;
  min-height: 49px;
  margin: 0 0 16px;
  padding: 11px 18px;
  border-bottom: 1px solid #c6d8ec;
  background: #e1ecf8;
}

.workspace-detail .journey-head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
}

.workspace-detail .journey-head p {
  max-width: 680px;
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.workspace-detail .journey-head-meta {
  gap: 6px;
}

.workspace-detail .journey-head-meta > span {
  padding: 5px 8px;
  border: 1px solid var(--workspace-card-line);
  border-radius: 7px;
  background: #fafbfd;
  color: var(--muted);
  font-size: 9px;
}

.workspace-detail .journey [data-carrier-tracking-history] {
  padding: 0 19px 18px;
}

.workspace-detail .shipment-activity,
.workspace-detail .fulfillment-section,
.workspace-detail .conflict-resolution-section,
.workspace-detail [data-shipment-documents],
.workspace-detail .shipment-communications,
.workspace-detail .case-notes-section {
  margin-top: 16px;
  padding: 18px;
  border: 1px solid var(--workspace-card-line);
  border-radius: var(--workspace-radius);
  background: var(--surface);
  box-shadow: var(--workspace-shadow);
}

/* The flattened conflict card carries the attention accent itself. */
.workspace-detail .conflict-resolution-section {
  border-left: 3px solid var(--red);
  padding-left: 20px;
}

/* Document rows open the preview drawer; the surface says so on hover. */
.workspace-detail [data-shipment-documents] .row.is-openable {
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.workspace-detail [data-shipment-documents] .row.is-openable:hover {
  border-color: var(--faint);
  box-shadow: 0 2px 8px rgba(16, 24, 32, 0.08);
}

.workspace-detail .shipment-activity-head {
  margin-bottom: 16px;
}

.workspace-detail .shipment-activity-list {
  border-top-color: var(--workspace-card-line);
}

.workspace-detail .shipment-activity-item {
  padding: 15px 0;
  border-bottom-color: var(--workspace-card-line);
}

/* Exceptions and next actions share ONE compact callout card; it renders
   nothing at all when there is nothing to act on. */

.workspace-detail .next-action-callout {
  min-width: 0;
  margin-bottom: 14px;
  padding: 0 0 14px;
  overflow: hidden;
  border: 0.5px solid var(--nav);
  border-radius: var(--workspace-radius);
  background: var(--surface);
  box-shadow: var(--workspace-shadow);
}

/* The callout header wears a dark slate — command-bar weight like the nav,
   lifted a step lighter so a card header doesn't read as heavy as the shell. */
.workspace-detail .workspace-rail-heading {
  min-height: 49px;
  margin: 0;
  padding: 13px 18px;
  border-bottom: 1px solid #c6d8ec;
  background: #e1ecf8;
}

.workspace-detail .workspace-rail-heading > span {
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

.workspace-detail .workspace-rail-heading b {
  border: 1px solid #c6d8ec;
  background: var(--surface);
  color: var(--blue);
}

/* ---- Overview glance row: home-dashboard stat cards on the shipment hub.
   The top margin leaves room for the ringed icons straddling the card edge;
   values are text facts, so they sit smaller than home's big counts. ---- */
.workspace-detail .home-stats.workspace-glance {
  margin: 34px 0 26px;
}

.workspace-detail .workspace-assessment-label {
  margin: 18px 0 -14px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.workspace-detail .workspace-glance-stat .home-stat-value {
  font-size: 17.5px;
  letter-spacing: -0.01em;
  line-height: 1.3;
  text-wrap: balance;
}

.workspace-detail .workspace-glance-stat .home-stat-note {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.workspace-detail .workspace-glance-stat .home-stat-note .badge {
  height: 18px;
  padding: 0 6px;
  border-radius: 5px;
  font-size: 9.5px;
}

.workspace-detail .workspace-glance-stat.is-action .home-stat-icon {
  background: var(--amber-bg);
  color: var(--amber);
}

.workspace-detail .workspace-glance-stat .button.compact {
  order: 3;
  align-self: flex-start;
  min-height: 30px;
  margin-top: 10px;
  padding: 0 12px;
  font-size: 12px;
}

/* ---- Documents section: banded card with a sunken row well. The card
   repeats the app's own canvas grammar one level down — slate recess,
   white openable records floating on it. ---- */
.workspace-detail .docs-section {
  margin: 0 0 16px;
  padding: 0;
  overflow: hidden;
  border: 0.5px solid var(--nav);
  border-radius: var(--workspace-radius);
  background: var(--surface);
  box-shadow: var(--workspace-shadow);
}

.workspace-detail .section-band {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 49px;
  padding: 11px 18px;
  border-bottom: 1px solid #c6d8ec;
  background: #e1ecf8;
}

.workspace-detail .section-band h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
}

.workspace-detail .section-band p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.workspace-detail .section-band-count {
  display: inline-grid;
  min-width: 22px;
  height: 22px;
  margin-left: auto;
  place-items: center;
  padding: 0 8px;
  border: 1px solid #c6d8ec;
  border-radius: 999px;
  background: var(--surface);
  color: var(--blue);
  font-size: 10px;
  font-weight: 700;
}

.workspace-detail .docs-section .list {
  gap: 12px;
  padding: 16px 18px 18px;
  background: #f2f5f8;
}

.workspace-detail .docs-section .row {
  border-color: #d5dde3;
  box-shadow: 0 1px 2px rgba(16, 24, 32, 0.05);
}

.workspace-detail .workspace-issue-list,
.workspace-detail .workspace-task-list {
  padding: 0 18px;
}

.workspace-detail .workspace-issue,
.workspace-detail .workspace-task.next-step-row {
  padding: 13px 0;
  border-top: 0;
  border-bottom: 1px solid var(--workspace-card-line);
}

.workspace-detail .workspace-issue:last-child,
.workspace-detail .workspace-task.next-step-row:last-child {
  border-bottom: 0;
}

.workspace-detail .workspace-task .next-step-actions {
  margin-top: 10px;
}

.workspace-detail .workspace-task .next-step-actions .button {
  min-height: 34px;
  border-radius: 8px;
}

@media (max-width: 1320px) {
  .workspace-detail .workspace-task-list {
      grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 900px) {
  .workspace-detail .detail {
      padding: 0 18px 40px;
    }

  .workspace-detail .detail-back-row {
      margin-top: 22px;
    }

  .workspace-detail .detail-head {
      flex-direction: column;
      gap: 16px;
    }

  .workspace-detail .detail-actions {
      width: 100%;
      max-width: none;
      justify-content: flex-start;
    }
}

@media (max-width: 680px) {
  .workspace-detail .detail {
      padding: 0 16px 34px;
    }

  .workspace-detail .detail-back-row {
      margin: 18px 0 14px;
    }

  .workspace-detail .shipment-head-headline {
      font-size: 20px;
    }

  .workspace-detail .shipment-head-meta {
      font-size: 12.5px;
    }

  /* One wrapping row of compact actions instead of stacked full-width rows:
     triage content stays above the fold on small screens. */
  .workspace-detail .detail-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

  .workspace-detail .detail-actions .button {
      width: auto;
      min-width: 0;
      min-height: 38px;
      padding-inline: 13px;
      white-space: nowrap;
    }

  .workspace-detail .journey {
      margin: 0;
      padding: 0;
      border-radius: var(--workspace-radius);
    }

  .workspace-detail .journey-head {
      align-items: flex-start;
      flex-direction: column;
      padding: 15px;
    }

  .workspace-detail .journey-head-meta {
      align-items: flex-start;
      flex-direction: row;
      flex-wrap: wrap;
      text-align: left;
    }

  .workspace-detail .shipment-activity,
    .workspace-detail .fulfillment-section,
    .workspace-detail .conflict-resolution-section,
    .workspace-detail [data-shipment-documents],
    .workspace-detail .shipment-communications,
    .workspace-detail .case-notes-section {
      padding: 15px;
    }
}

/* ==== Shipment & document timeline ==================================== */
/* Single source of truth, transcribed from the supplied shipment-workspace
   mockup. Node anatomy per cell: icon row (24px), track row (26px) holding
   two 2px half-segments and a 24px ring centred with margin-left, then
   name / date / status and a 2px selection bar. A half-segment is solid
   only when the nodes on both of its sides are evidenced or current; the
   rail never runs solid past the evidence frontier. */

.workspace-detail .journey-rails {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 20px 18px 18px;
}

.workspace-detail .journey-rail {
  padding: 16px 16px 10px;
  border: 1px solid var(--workspace-card-line, var(--line));
  border-radius: 10px;
  background: #f9fafc;
  overflow-x: auto;
}

.workspace-detail .journey-rail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.workspace-detail .journey-rail-title {
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.workspace-detail .journey-rail-counts {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.workspace-detail .journey-rail-empty {
  margin: 14px 0 6px;
  color: var(--muted);
  font-size: 13px;
}

/* ---- Physical milestone cells ---- */

.workspace-detail .journey-chapters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  min-width: 520px;
  margin: 16px 0 0;
  padding: 0;
}

.workspace-detail .journey-chapter {
  appearance: none;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: 8px 2px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font-family: inherit;
  text-align: center;
  cursor: pointer;
  transition: background 120ms ease;
}

.workspace-detail .journey-chapter:hover {
  background: #eef3f9;
}

.workspace-detail .journey-chapter.is-selected {
  background: var(--blue-bg);
}

.workspace-detail .journey-chapter:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}

.workspace-detail .journey-chapter-icon {
  display: flex;
  height: 24px;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}

.workspace-detail .journey-chapter-icon svg {
  width: 22px;
  height: 22px;
}

.workspace-detail .journey-chapter.is-rail-current .journey-chapter-icon {
  color: var(--ink);
}

.workspace-detail .journey-chapter.is-rail-pending .journey-chapter-icon {
  color: var(--faint);
}

/* ---- Track row shared by both rails ---- */

.workspace-detail .journey-rail-row {
  position: relative;
  display: block;
  width: 100%;
  height: 26px;
  margin-top: 8px;
}

.workspace-detail .journey-rail-seg {
  position: absolute;
  top: 12px;
  height: 2px;
}

.workspace-detail .journey-rail-seg.is-left {
  right: 50%;
  left: 0;
}

.workspace-detail .journey-rail-seg.is-right {
  right: 0;
  left: 50%;
}

.workspace-detail .journey-rail-seg.is-solid {
  background: var(--blue);
}

.workspace-detail .journey-rail-seg.is-dashed {
  background: repeating-linear-gradient(
    90deg,
    var(--line-strong) 0 5px,
    transparent 5px 10px
  );
}

.workspace-detail .journey-rail-seg.is-blank {
  background: transparent;
}

.workspace-detail .journey-rail-node {
  position: absolute;
  top: 1px;
  left: 50%;
  z-index: 1;
  display: flex;
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  margin-left: -12px;
  border: 2.5px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--line-strong);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
}

.workspace-detail .journey-rail-node.is-complete {
  border-color: var(--green);
  color: var(--green);
}

.workspace-detail .journey-rail-node.is-current {
  border-color: var(--blue);
  box-shadow: 0 0 0 5px rgba(35, 104, 167, 0.16);
  color: var(--blue);
}

.workspace-detail .journey-rail-node.is-risk {
  border-color: var(--amber);
  color: var(--amber);
}

/* ---- Cell text ---- */

.workspace-detail .journey-chapter-name {
  margin-top: 12px;
}

.workspace-detail .journey-chapter-name strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.008em;
  line-height: 1.3;
}

.workspace-detail .journey-chapter.is-rail-pending .journey-chapter-name strong {
  color: var(--muted);
}

.workspace-detail .journey-chapter-date {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}

.workspace-detail .journey-chapter-state {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.workspace-detail .journey-chapter.is-rail-complete .journey-chapter-state {
  color: var(--green);
}

.workspace-detail .journey-chapter.is-rail-current .journey-chapter-state {
  color: var(--blue);
}

.workspace-detail .journey-chapter.is-rail-risk .journey-chapter-state {
  color: var(--amber);
}

.workspace-detail .journey-chapter-selbar {
  width: 28px;
  height: 2px;
  border-radius: 1px;
  margin-top: 10px;
  background: transparent;
}

.workspace-detail .journey-chapter.is-selected .journey-chapter-selbar {
  background: var(--blue);
}

/* ---- Milestone detail panel ---- */

.workspace-detail .journey-inspector {
  margin: 20px 18px 18px;
  padding: 18px 20px 16px;
  border: 1px solid var(--workspace-card-line, var(--line));
  border-radius: 10px;
  background: #f9fafc;
}

.workspace-detail .journey-rails .journey-inspector {
  margin: 0;
}

.workspace-detail .journey-inspector-eyebrow {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.workspace-detail .journey-inspector-chip {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-soft);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.workspace-detail .journey-inspector-chip.is-rail-complete {
  border-color: var(--green);
  background: var(--green-bg);
  color: var(--green);
}

.workspace-detail .journey-inspector-chip.is-rail-current {
  border-color: var(--blue);
  background: var(--blue-bg);
  color: var(--blue);
}

.workspace-detail .journey-inspector-chip.is-rail-risk {
  border-color: var(--amber);
  background: var(--amber-bg);
  color: var(--amber);
}

.workspace-detail .journey-inspector h4 {
  max-width: 60ch;
  margin: 12px 0 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.35;
}

.workspace-detail .journey-inspector-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 56px;
  margin: 18px 0 0;
}

.workspace-detail .journey-inspector-grid > div {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  column-gap: 20px;
  align-items: baseline;
  padding: 15px 0;
  border-top: 1px solid #e4e9ee;
}

.workspace-detail .journey-inspector-grid dt {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.workspace-detail .journey-inspector-grid dd {
  margin: 0;
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.5;
}

.workspace-detail .journey-inspector-evidence {
  margin: 14px 0 4px;
}

/* Current location and carrier history: a top-level card, a sibling of the
   timeline card — position evidence is not a milestone and never nests
   under one. The ledger inside stays its own framed table. */
.workspace-detail [data-carrier-tracking-history] {
  margin: 0 0 26px;
  padding: 20px 22px 22px;
  border: 1px solid var(--workspace-card-line, var(--line));
  border-top: 1px solid var(--workspace-card-line, var(--line));
  border-radius: var(--workspace-radius, 10px);
  background: var(--surface);
  box-shadow: var(--workspace-shadow, none);
}

@media (max-width: 900px) {
  .workspace-detail .journey-inspector-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==== Shipment setup wizard ============================================ */
/* Ported from the approved modal prototype: fixed-size dialog, soft blue
   wash at the top, one focused question per step. */

.shipment-wizard.swz {
  display: flex;
  flex-direction: column;
  width: min(680px, calc(100vw - 40px));
  height: min(780px, calc(100vh - 60px));
  max-width: none;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(620px 300px at 88% -8%, rgba(35, 104, 167, 0.1), transparent 62%),
    radial-gradient(520px 280px at -8% -4%, rgba(99, 91, 255, 0.06), transparent 58%),
    linear-gradient(180deg, #f5f9fe 0%, #ffffff 30%);
}

/* Single-form shipment setup: tracking number, documents, or both. */
.shipment-wizard.swz.is-single {
  height: auto;
  max-height: calc(100dvh - 60px);
  background: var(--surface);
}

.swz-single-head { flex: none; display: flex; align-items: flex-start; gap: 16px; padding: 24px 20px 0 28px; }
.swz-single-head h2 { margin: 0; font-size: 24px; letter-spacing: -0.02em; line-height: 1.25; }
.swz-single-head .swz-lede { margin: 4px 0 0; font-size: 15px; }
.swz-single-head .swz-close { flex: none; width: 40px; height: 40px; margin: -6px 0 0 auto; }

.swz-single-body { display: flex; flex-direction: column; gap: 22px; padding: 20px 28px 24px; }
.swz-single-body .swz-field { display: flex; flex-direction: column; gap: 6px; margin-top: 0; min-width: 0; }
.swz-single-body .swz-field label,
.swz-single-body .swz-label { margin: 0; font-size: 14px; font-weight: 600; }
.swz-single-body .swz-label small { color: var(--faint); font-weight: 500; }
.swz-single-body select { height: 42px; }

.swz-track { position: relative; }
.swz-single-body .swz-track input {
  height: 46px;
  padding-right: 46px;
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.03em;
}
.swz-single-body .swz-track input::placeholder { font-family: var(--font-sans); font-weight: 400; letter-spacing: 0; }
.swz-single-body .swz-track input.is-valid { border-color: var(--green); }
.swz-single-body .swz-track input.is-invalid,
.swz-single-body .swz-track input.is-invalid:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(179, 60, 53, 0.12); }
.swz-track-mark {
  position: absolute;
  top: 50%;
  right: 13px;
  display: flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  transform: translateY(-50%);
}
.swz-track-mark[hidden] { display: none; }
.swz-track-mark svg { width: 13px; height: 13px; }
.swz-help { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.swz-error { margin: 0; color: var(--red); font-size: 13px; font-weight: 500; line-height: 1.45; }
.swz-help[hidden], .swz-error[hidden] { display: none; }

.swz-single-body .swz-files { margin-top: 0; }
.swz-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  min-height: 132px;
  padding: 22px 18px;
  border: 1.5px dashed var(--line-strong);
  border-radius: 10px;
  background: #f7f9fb;
  color: var(--ink);
  font-family: inherit;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.swz-drop:hover { border-color: var(--blue); background: #f3f8fd; }
.swz-drop:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.swz-drop:disabled { cursor: default; opacity: 0.6; }
.swz-drop-ic {
  display: flex;
  flex: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  margin-bottom: 7px;
  border-radius: 10px;
  background: var(--blue-bg);
  color: var(--blue);
}
.swz-drop-ic svg { width: 19px; height: 19px; }
.swz-drop-copy { display: flex; flex-direction: column; gap: 3px; }
.swz-drop strong { font-size: 15px; font-weight: 600; line-height: 1.35; }
.swz-drop-sub { color: var(--muted); font-size: 13px; line-height: 1.45; }
.swz-link { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.swz-drop-active { display: none; }
.swz-drop.is-drag { border-style: solid; border-color: var(--blue); background: var(--blue-bg); box-shadow: 0 0 0 3px rgba(35, 104, 167, 0.14); }
.swz-drop.is-drag .swz-drop-ic { background: var(--blue); color: #fff; }
.swz-drop.is-drag .swz-drop-idle { display: none; }
.swz-drop.is-drag .swz-drop-active { display: inline; }
.swz-drop.is-compact { flex-direction: row; justify-content: flex-start; gap: 11px; min-height: 0; padding: 11px 14px; text-align: left; }
.swz-drop.is-compact .swz-drop-ic { width: 30px; height: 30px; margin: 0; border-radius: 7px; }
.swz-drop.is-compact .swz-drop-ic svg { width: 16px; height: 16px; }
.swz-drop.is-compact strong { font-size: 14px; }
.swz-single-body .swz-cap { margin-top: 0; }

.swz-sep { height: 1px; background: var(--line); opacity: 0.7; }
.swz-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.swz-chip {
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: 500 14px var(--font-sans);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.swz-chip:hover { border-color: var(--line-strong); }
.swz-chip.is-on { border-color: var(--blue); background: var(--blue-bg); color: #174f82; box-shadow: inset 0 0 0 1px var(--blue); }
.swz-chip:disabled { cursor: default; opacity: 0.55; }

.swz-more { margin-top: -8px; }
.swz-more summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.swz-more summary::-webkit-details-marker { display: none; }
.swz-more summary svg { width: 16px; height: 16px; flex: none; color: var(--muted); transition: transform 0.15s ease; }
.swz-more[open] summary svg { transform: rotate(90deg); }
.swz-more-sum { min-width: 0; margin-left: auto; overflow: hidden; color: var(--muted); font-size: 13px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.swz-more[open] .swz-more-sum { display: none; }
.swz-more .swz-field-row { margin-top: 6px; }

.swz-single-foot { gap: 10px; padding: 14px 20px 14px 28px; }
.swz-status { display: flex; min-width: 0; align-items: center; gap: 8px; margin: 0 auto 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.35; }
.swz-status-ic {
  display: flex;
  flex: none;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed var(--line-strong);
  border-radius: 50%;
  color: #fff;
}
.swz-status-ic svg { display: none; width: 11px; height: 11px; }
.swz-status.is-ready { color: var(--green); font-weight: 500; }
.swz-status.is-ready .swz-status-ic { border: 0; background: var(--green); }
.swz-status.is-ready .swz-status-ic svg { display: block; }
.swz-status.is-warn { color: var(--amber); font-weight: 500; }
.swz-status.is-warn .swz-status-ic { border-color: var(--amber); }

@media (prefers-reduced-motion: reduce) {
  .swz-drop, .swz-chip, .swz-more summary svg { transition: none; }
}

.shipment-wizard.swz.is-project-intake {
  width: min(820px, calc(100vw - 40px));
  height: auto;
  max-height: calc(100vh - 60px);
}

.swz-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 22px 0;
}

.shipment-wizard.swz.is-project-intake .swz-top {
  justify-content: flex-end;
  padding: 18px 24px 0;
}

.swz-dots { display: flex; gap: 6px; }

.swz-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line);
}

.swz-dots i.is-done { background: var(--green); }

.swz-dots i.is-current {
  background: var(--blue);
  box-shadow: 0 0 0 3px rgba(35, 104, 167, 0.18);
}

.swz-close {
  padding: 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--faint);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.swz-close:hover { color: var(--ink); background: var(--surface-soft); }

.swz-body { flex: 1; padding: 12px 28px 10px; overflow-y: auto; font-size: 15px; }

.shipment-wizard.swz.is-project-intake .swz-body {
  padding: 12px 36px 24px;
}

.swz-body h2 { margin: 4px 0 6px; font-size: 24px; letter-spacing: -0.02em; line-height: 1.3; }

.shipment-wizard.swz.is-project-intake .swz-body h2 {
  margin-top: 6px;
  font-size: 29px;
}

.swz-lede { margin: 0 0 6px; color: #3d4854; font-size: 15.5px; line-height: 1.55; }

.swz-fine { margin: 12px 0 0; color: var(--muted); font-size: 13.5px; }

.swz-eyebrow {
  display: block;
  margin: 4px 0 2px;
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.swz-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 22px 16px;
  border-top: 1px solid var(--line);
  background: rgba(249, 250, 252, 0.85);
}

.shipment-wizard.swz.is-project-intake .swz-foot {
  padding: 18px 36px 20px;
}

.swz-foot > span { flex: 1; }

.swz-inline-form { display: contents; }

.swz-mark {
  display: flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  margin: 6px 0 14px;
  border-radius: 10px;
  background: var(--blue);
}

.swz-mark svg { width: 22px; height: 22px; }

.swz-points { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }

/* The project wizard opens with its one required decision: the name. */
.swz-intro-name {
  max-width: 480px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.shipment-wizard.swz.is-project-intake .swz-intro-name {
  max-width: none;
  margin-top: 20px;
  padding-top: 0;
  border-top: 0;
}

.swz-points li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  color: #3d4854;
  font-size: 15.5px;
}

.swz-points li i {
  position: relative;
  top: 2px;
  display: flex;
  width: 17px;
  height: 17px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--green-bg);
  color: var(--green);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.swz-points li i::after { content: "\2713"; }

.swz-options { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 4px; }

.swz-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 14px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.swz-option:hover { border-color: var(--blue); background: #f9fafc; }

.swz-option b { grid-column: 1; grid-row: 1; font-size: 16.5px; }

.swz-option > span:not(.swz-arrow) { grid-column: 1; grid-row: 2; color: #3d4854; font-size: 14.5px; }

.swz-option .swz-arrow { grid-column: 2; grid-row: 1 / span 2; color: var(--faint); font-size: 16px; }

.swz-option.is-primary { border-color: var(--blue); background: var(--blue-bg); }

.swz-option.is-primary b { color: var(--blue); }

.swz-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  margin-top: 14px;
  padding: 28px 18px;
  border: 1.5px dashed var(--line-strong);
  border-radius: 10px;
  background: #f9fafc;
  cursor: pointer;
  text-align: center;
}

.swz-dropzone.is-tall { min-height: 320px; }

.shipment-wizard.swz.is-project-intake .swz-dropzone.is-tall {
  min-height: 230px;
}

.swz-dropzone:hover, .swz-dropzone.is-drag { border-color: var(--blue); background: var(--blue-bg); }

.swz-dropzone strong { display: block; font-size: 16.5px; }

.swz-dropzone span { display: block; margin-top: 6px; color: var(--muted); font-size: 14px; }

.swz-files { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }

.swz-file {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}

.swz-file-ic {
  display: flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: var(--blue-bg);
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 8px;
}

.swz-file-name { min-width: 0; }

.swz-file-name b { display: block; overflow: hidden; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }

.swz-file-name span { color: var(--muted); font-size: 12px; }

.swz-file > button {
  padding: 4px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
}

.swz-file > button:hover { background: var(--surface-soft); color: var(--ink); }

.swz-cap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.swz-sites { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

.swz-site {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
}

.swz-site:hover { border-color: var(--line-strong); background: #f9fafc; }

.swz-site.is-selected {
  border-color: var(--blue);
  background: var(--blue-bg);
  box-shadow: 0 0 0 1px var(--blue), 0 2px 8px rgba(35, 104, 167, 0.12);
}

.swz-site i {
  display: flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--muted);
  font-style: normal;
}

.swz-site i svg { width: 17px; height: 17px; }

.swz-site.is-selected i { background: var(--blue); color: #fff; }

.swz-site.is-selected::after {
  content: "\2713";
  position: absolute;
  top: 50%;
  right: 14px;
  display: flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  transform: translateY(-50%);
}

.swz-site-copy b { display: block; font-size: 15px; }

.swz-site-copy span { color: #3d4854; font-size: 13.5px; }

.swz-site.is-quiet { border-style: dashed; background: transparent; }

.swz-site.is-quiet i { border: 1.5px dashed var(--line-strong); background: transparent; }

.swz-site.is-quiet.is-selected { border-style: solid; background: var(--blue-bg); }

.swz-site.is-quiet.is-selected i { border: 0; background: var(--blue); }

.swz-field { margin-top: 11px; }

.swz-field label { display: block; margin-bottom: 5px; font-size: 14px; font-weight: 600; }

.swz-field label small { color: var(--faint); font-weight: 500; }

.swz-field textarea,
.swz-field input,
.swz-field select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  outline: none;
}

.swz-field textarea { min-height: 46px; resize: vertical; }

.swz-field textarea:focus,
.swz-field input:focus,
.swz-field select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(35, 104, 167, 0.14);
}

.swz-field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 640px) {
  .shipment-wizard.swz { width: calc(100vw - 24px); height: calc(100vh - 32px); }
  .shipment-wizard.swz.is-single,
  .shipment-wizard.swz.is-project-intake { height: auto; max-height: calc(100vh - 32px); }
  .swz-field-row { grid-template-columns: minmax(0, 1fr); }
  .swz-single-head { padding: 16px 8px 0 18px; }
  .swz-single-head h2 { font-size: 22px; }
  .swz-single-body { padding: 18px 18px 22px; }
  .swz-single-foot { flex-wrap: wrap; padding: 12px 14px 16px; }
  .swz-status { width: 100%; margin: 0; }
  .swz-single-foot .swz-cancel { display: none; }
  .swz-single-foot .swz-inline-form .button { width: 100%; min-height: 46px; }
  .swz-single-foot .swz-inline-form { display: block; flex: 1; }
}

/* ---- Timeline warmth pass (from the approved Packshiver-variant study) ---- */

/* Evidenced nodes read as accomplished: filled, white check, soft glow. */
.workspace-detail .journey-rail-node.is-complete {
  border-color: var(--green);
  background: var(--green);
  box-shadow: 0 4px 10px rgba(31, 122, 80, 0.24);
  color: #fff;
}

/* Rail counts float as a quiet pill. */
.workspace-detail .journey-rail-counts {
  padding: 5px 12px;
  border: 1px solid var(--workspace-card-line, var(--line));
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 3px 10px rgba(16, 24, 32, 0.06);
}

/* ==== Navigation shell: icon rail, hover motion, collapsible sidebar ==== */

.nav-item { display: flex; align-items: center; gap: 12px; }

.nav-ic {
  display: flex;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  color: #98a1ab;
}

.nav-ic svg {
  width: 20px;
  height: 20px;
  transition: transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-item:hover .nav-ic svg { transform: translateY(-1px) scale(1.12); }

.nav-item.is-active .nav-ic { color: #7fa8f2; }

.nav-item .nav-text { white-space: nowrap; }
.nav-item .nav-text-short { display: none; }

/* The drawer clips labels without reflowing its fixed icon column. */
.sidebar { position: relative; }

.nav-collapse {
  position: absolute;
  top: 12px;
  right: -14px;
  z-index: 10;
  display: flex;
  width: 28px;
  height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--nav, #09171d);
  color: #9bbbed;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease;
}

.nav-collapse::before { content: ""; position: absolute; inset: -2px -8px; }
.nav-collapse svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-collapse:hover { color: #fff; background: var(--nav-soft, #14232d); }

@media (min-width: 901px) {
  .sidebar { overflow: visible; min-width: 0; }
  .app-layout { transition: grid-template-columns 750ms cubic-bezier(0.4, 0, 0.2, 1); }
  .app-layout:has(.sidebar.is-collapsed) {
    grid-template-columns: 80px minmax(0, 1fr);
  }

  .sidebar .brand,
  .sidebar .nav-item,
  .sidebar .workspace-chip { overflow: hidden; flex-shrink: 0; }
  .sidebar .brand { padding-left: 0; padding-right: 0; }
  .sidebar .brand > div { flex: 0 0 auto; white-space: nowrap; }
  .sidebar .nav-item { justify-content: flex-start; }
  .sidebar .nav-label { white-space: nowrap; overflow: hidden; flex-shrink: 0; }
  .sidebar .workspace-chip { padding: 12px 3px; height: 62px; }
  .sidebar .workspace-chip-text { flex: 0 0 154px; }

  .sidebar .nav-text,
  .sidebar .brand > div,
  .sidebar .nav-label,
  .sidebar .workspace-chip-text {
    opacity: 1;
    transition: opacity 220ms ease 250ms;
  }
  .sidebar.is-collapsed .nav-text,
  .sidebar.is-collapsed .brand > div,
  .sidebar.is-collapsed .nav-label,
  .sidebar.is-collapsed .workspace-chip-text {
    opacity: 0;
    transition-delay: 0ms;
    pointer-events: none;
  }
  .sidebar.is-collapsed .workspace-chip { background: transparent; box-shadow: none; }
}

@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
  .app-layout,
  .sidebar .nav-text,
  .sidebar .brand > div,
  .sidebar .nav-label,
  .sidebar .workspace-chip-text { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-ic svg { transition: none; }
}

@media (max-width: 900px) {
  .nav-collapse { display: none; }

  .nav-item { gap: 6px; }

  .nav-ic { flex-basis: 15px; width: 15px; height: 15px; }

  .nav-ic svg { width: 15px; height: 15px; }
}

/* ==== Slim identity top bar (FlightAPI-style) ==== */
/* One quiet strip: view identity reads left, actions right — page taglines
   shrink to inline context so the bar stays a bar, not a hero. */

.topbar {
  min-height: 52px;
  gap: 14px;
}

.topbar > div:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  min-width: 0;
}

.topbar h1 { min-width: 0; }

.topbar h1 {
  font-size: 15.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.topbar p {
  min-width: 0;
  flex: 0 1 auto;
  margin: 0;
  overflow: hidden;
  color: var(--faint);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==== Warmth pass: current-location ledger and home stat tiles ==== */

.workspace-detail .journey-tracking-ledger-head > span {
  padding: 5px 12px;
  border: 1px solid var(--workspace-card-line, var(--line));
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 10px;
}

.home-stat {
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.home-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(16, 24, 32, 0.1);
}

@media (prefers-reduced-motion: reduce) {
  .home-stat { transition: none; }
  .home-stat:hover { transform: none; }
}

/* ==== Home restyle (approved mockup): wash canvas, slim bar, floating cards ==== */

.workspace-home {
  background:
    radial-gradient(1000px 520px at 88% -8%, rgba(35, 104, 167, 0.09), transparent 60%),
    radial-gradient(700px 400px at 10% 8%, rgba(35, 104, 167, 0.05), transparent 55%),
    linear-gradient(180deg, #edf1f5, #f5f8fa 70%);
}

.home-page {
  position: relative;
  max-width: none;
}

.home-page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(35, 104, 167, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35, 104, 167, 0.035) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(180deg, #000, transparent 65%);
}

.home-page > * { position: relative; }

.home-topbar {
  position: sticky;
  top: 0;
  /* Keep the edge toggle (10) above this header and dialogs (20+) above both. */
  z-index: 9;
  margin: 0 calc(-1 * var(--home-gutter, 32px)) 18px;
  padding: 10px var(--home-gutter, 32px);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(6px);
}

.home-crumb {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 650;
}

.home-crumb svg { width: 17px; height: 17px; color: var(--muted); }

.home-topbar .home-new-shipment { border-radius: 999px; }

.home-greeting h2 { margin: 6px 0 4px; }

/* Stat tiles: white floating cards that wrap 5 → 3 → 2 across breakpoints. */
.home-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 14px;
}

.home-stat {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 6px 20px rgba(16, 24, 32, 0.06);
}

/* Filter tabs become a segmented pill. */
.home-filters {
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #eef1f4;
}

.home-filters button {
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
}

.home-filters button.is-active {
  background: var(--surface);
  color: var(--blue);
  box-shadow: 0 1px 3px rgba(16, 24, 32, 0.14);
}

.home-shipments,
.home-duo > .home-rail-section {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 6px 20px rgba(16, 24, 32, 0.05);
}

.home-duo {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 20px;
  margin-top: 20px;
}

@media (max-width: 980px) {
  .home-duo { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
  .home-topbar { margin-bottom: 16px; }
}

/* Sidebar: brand sits tighter, the active tab raises off the rail. */
.sidebar .brand { padding-bottom: 14px; }

.nav-item.is-active {
  background: linear-gradient(180deg, #1e3040, #16242f);
  border: 1px solid rgba(127, 168, 242, 0.35);
  box-shadow: 0 6px 16px rgba(4, 10, 16, 0.55), inset 0 1px 0 rgba(127, 168, 242, 0.18);
}

/* The rail is the most-used control set in the app and had no focus state at
   all: 52 :focus-visible rules elsewhere in this file, none of them here, so a
   keyboard user tabbing the navigation could not see where they were. The ring
   is the nav's own accent rather than the page blue, which disappears against
   the dark rail. */
.nav-item:focus-visible,
.nav-collapse:focus-visible {
  outline: 2px solid #7fa8f2;
  outline-offset: 2px;
}

.nav-item { border: 1px solid transparent; }

@media (prefers-reduced-motion: reduce) {
  .nav-item.is-active { transform: none; }
}

@media (max-width: 900px) {
  .nav-item,
  .nav-item.is-active {
    border: 0;
    box-shadow: none;
    transform: none;
  }
}

/* ==== Home mockup parity: flush bar, stacked tiles, fixed-height list ==== */

/* The bar sits flush with the window — no canvas strip above it. */
.home-topbar { margin-top: -26px; }

/* Stat tiles read top-down: icon chip, number, label, note. */
.home-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 16px 18px;
}

.home-stat .home-stat-icon { margin-bottom: 10px; }

.home-stat .home-stat-value { order: 0; font-size: 24px; letter-spacing: -0.02em; line-height: 1.15; }

.home-stat .home-stat-label { order: 1; align-self: flex-start; margin-top: 2px; color: #3d4854; font-size: 13px; font-weight: 600; }

.home-stat .home-stat-note { order: 2; margin-top: 4px; color: var(--faint); font-size: 12px; }

.home-greeting-accent { color: var(--blue); font-style: italic; }

/* The shipments card keeps one height; the row list scrolls inside it. */
.home-shipments .home-table-body {
  height: 332px;
  overflow-y: auto;
}

@media (max-width: 700px) {
  .home-topbar { margin-top: -18px; }

  .home-shipments .home-table-body { height: auto; max-height: 420px; }
}

/* ==== Documents: tile grid + detail drawer ==== */

/* Shipment evidence is a table now, so it gets a real header row — the same
   48px band, 12px rows and dividers the Shipments list uses. */
.files-table:not(.is-reference) .files-table-head,
.files-table:not(.is-reference) .file-row {
  min-width: 1000px;
  grid-template-columns: minmax(210px, 2fr) 130px minmax(150px, 1.2fr) minmax(120px, 1fr) 120px 130px;
}

.files-rows { min-width: 0; }

.file-row {
  display: grid;
  gap: 14px;
  align-items: center;
  min-height: 64px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  color: #202a33;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 140ms ease;
}

.files-rows > .file-row:last-child { border-bottom: 0; }
.file-row:hover { background: #f4f8fb; }
.file-row:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

/* Title leads, filename underneath: two facts, one hierarchy. */
.file-row-primary {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}

.file-row-names { min-width: 0; }

.file-row-names strong {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-row-names small {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-row-type,
.file-row-ship { min-width: 0; color: var(--muted); }

/* Received leads with the date; the size is secondary to it. */
.file-row-when { min-width: 0; }
.file-row-when span { display: block; color: var(--muted); font-size: 12px; }
.file-row-when small { display: block; margin-top: 2px; color: var(--faint); font-size: 10.5px; }

.file-row-project { min-width: 0; }

.file-project-link {
  display: grid;
  gap: 2px;
  width: 100%;
  min-width: 0;
  padding: 5px 8px;
  margin: -5px -8px;
  border: 0;
  border-radius: 8px;
  background: none;
  text-align: left;
  cursor: pointer;
}

.file-project-link:hover { background: var(--blue-bg, #eaf2fb); }
.file-project-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

.file-project-link strong {
  overflow: hidden;
  color: var(--blue);
  font-size: 12.5px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-project-link .mono { color: var(--muted); font-size: 10.5px; font-weight: 700; }

.file-project-none { color: var(--faint); font-size: 12px; font-style: italic; }

.file-ship-cell { display: grid; gap: 2px; min-width: 0; }
.file-ship-cell small { color: var(--faint); font-size: 10.5px; }

/* Loading, empty, filtered-empty and error all live in the table frame. */
.files-state {
  display: grid;
  justify-items: center;
  gap: 9px;
  padding: 44px 24px;
  text-align: center;
}

.files-state strong { font-size: 15px; font-weight: 650; }
.files-state p { max-width: 52ch; margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.files-state.is-error strong { color: var(--red); }

.files-rows.is-skeleton { display: grid; gap: 1px; }

.file-row-skeleton {
  height: 64px;
  background: linear-gradient(90deg, #e4eaee 25%, #f4f8fa 37%, #e4eaee 63%);
  background-size: 400% 100%;
  animation: files-skeleton-sheen 1.5s ease-in-out infinite;
}

@keyframes files-skeleton-sheen { to { background-position: -135% 0; } }

@media (prefers-reduced-motion: reduce) {
  .file-row-skeleton { animation: none; background: var(--surface-soft); }
}

/* The count and the way to load more sit above the list as well as below it,
   so neither is something you have to scroll blindly to find. */
.files-more-top { flex: 0 0 auto; margin-left: auto; }

@media (max-width: 900px) {
  .files-table:not(.is-reference) .files-table-head { display: none; }

  .files-table:not(.is-reference) .file-row {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 14px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-bottom: 10px;
  }

  .file-row-primary { grid-column: 1; grid-row: 1; }
  .file-row > span[data-label="Status"] { grid-column: 2; grid-row: 1; justify-self: end; }

  .file-row > span:not(.file-row-primary):not([data-label="Status"]) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
  }

  .file-row > span:not(.file-row-primary):not([data-label="Status"])::before {
    content: attr(data-label);
  }

  .file-row-when { display: grid; grid-template-columns: 86px minmax(0, 1fr); }
  /* The size belongs under the date, not under the label. */
  .file-row-when small { grid-column: 2; }
}

.file-tic {
  display: flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  border-radius: 9px;
  font-family: var(--font-mono);
  font-size: 9.5px;
}

.file-tic.is-pdf { background: var(--red-bg); color: var(--red); }

.file-tic.is-img { background: var(--blue-bg); color: var(--blue); }

.file-tic.is-etc { background: var(--amber-bg); color: var(--amber); }

/* drawer */
.fdr-backdrop {
  position: fixed;
  inset: 0;
  z-index: 25;
  background: rgba(13, 20, 27, 0.4);
}

.fdr {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 26;
  display: flex;
  flex-direction: column;
  width: min(1120px, 95vw);
  background: var(--surface);
  box-shadow: -18px 0 60px rgba(16, 24, 32, 0.24);
}

.fdr-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
}

.fdr-nav {
  display: inline-flex;
  min-width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: #3d4854;
  cursor: pointer;
  font: 600 13px var(--font-sans);
  text-decoration: none;
}

.fdr-nav:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }

.fdr-nav:disabled { opacity: 0.45; cursor: default; }

.fdr-count { color: var(--faint); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; }

.fdr-spacer { flex: 1; }

.fdr-close {
  padding: 4px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  font-size: 15px;
}

.fdr-close:hover { background: var(--surface-soft); color: var(--ink); }

.fdr-cols {
  display: grid;
  flex: 1;
  grid-template-columns: 380px minmax(0, 1fr);
  min-height: 0;
}

.fdr-left {
  overflow-y: auto;
  padding: 18px 22px 22px;
  border-right: 1px solid var(--line);
}

.fdr-left h2 { margin: 0 0 2px; font-size: 18px; letter-spacing: -0.01em; }

.fdr-file { color: var(--faint); font-family: var(--font-mono); font-size: 11px; }

.fdr-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0 4px; }

.fdr-type { color: #3d4854; font-size: 12.5px; }

.fdr-rows { margin-top: 14px; }

.fdr-rows > div {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding: 9px 0;
  border-top: 1px solid var(--surface-soft);
  font-size: 13.5px;
}

.fdr-rows span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fdr-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 18px; }

.fdr-danger:hover:not(:disabled) { border-color: var(--red); color: var(--red); }

.fdr-workspace { margin-top: 16px; padding: 0; color: var(--blue); font-weight: 600; }

.fdr-right {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: #e7ebef;
}

.fdr-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: #f7f9fb;
}

.fdr-lab {
  margin-right: auto;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.fdr-zoom { min-width: 44px; color: var(--muted); font-family: var(--font-mono); font-size: 11px; text-align: center; }

.fdr-viewport { flex: 1; min-height: 0; overflow: auto; }

.fdr-frame { display: block; width: 100%; height: 100%; border: 0; }

.fdr-imgwrap { padding: 20px; text-align: center; }

.fdr-imgwrap img { width: 100%; max-width: none; box-shadow: 0 6px 24px rgba(16, 24, 32, 0.18); }

.fdr-none {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 100%;
  color: var(--muted);
  font-size: 13.5px;
}

@media (max-width: 1100px) {
  .fdr-cols { grid-template-columns: 330px minmax(0, 1fr); }
}

@media (max-width: 700px) {
  .fdr { width: 100vw; }

  .fdr-cols { display: flex; flex-direction: column; overflow-y: auto; }

  .fdr-left { overflow-y: visible; border-right: 0; border-bottom: 1px solid var(--line); }

  .fdr-right { min-height: 60vh; }
}

/* ==== Shell header parity + lucide-animated draw-on-hover icons ==== */

.topbar {
  min-height: 0;
  padding: 13px 34px;
}

.topbar h1 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 650;
}

.topbar-crumb-ic { color: var(--muted); }

.topbar-crumb-ic svg { width: 17px; height: 17px; }

/* lucide-animated icon port: each icon replays the registry's motion
   variants on hover — home/box redraw, file-text retypes its lines,
   map-pin bobs while its dot redraws, earth redraws its meridians, and
   shield-check pops its check in. */

.nav-ic svg { transition: transform 0.3s ease-out; }

:is(.nav-item:hover, .topbar h1:hover, .home-crumb:hover) svg .ic-a,
:is(.nav-item:hover, .topbar h1:hover, .home-crumb:hover) svg .ic-globe,
:is(.nav-item:hover, .topbar h1:hover, .home-crumb:hover) svg .ic-lat {
  stroke-dasharray: 1;
  animation: ic-redraw var(--ic-dur, 0.5s) ease var(--ic-delay, 0s) both;
}

svg[data-icon="home"] .ic-a { --ic-dur: 0.6s; }

svg[data-icon="shipments"] .ic-a { --ic-dur: 0.4s; }

svg[data-icon="map"] .ic-a { --ic-dur: 0.5s; --ic-delay: 0.3s; }

svg[data-icon="events"] .ic-globe { --ic-dur: 0.3s; --ic-delay: 0.1s; }

svg[data-icon="events"] .ic-lat { --ic-dur: 0.7s; --ic-delay: 0.5s; }

:is(.nav-item:hover, .topbar h1:hover, .home-crumb:hover) svg[data-icon="files"] {
  transform: scale(1.05);
}

:is(.nav-item:hover, .topbar h1:hover, .home-crumb:hover) svg[data-icon="files"] .ic-line {
  stroke-dasharray: 1;
  animation: ic-retype 0.7s ease var(--ic-delay, 0s) both;
}

svg[data-icon="files"] .ic-l1 { --ic-delay: 0.3s; }

svg[data-icon="files"] .ic-l2 { --ic-delay: 0.5s; }

svg[data-icon="files"] .ic-l3 { --ic-delay: 0.7s; }

:is(.nav-item:hover, .topbar h1:hover, .home-crumb:hover) svg[data-icon="map"] {
  animation: ic-bob 0.5s ease both;
}

:is(.nav-item:hover, .topbar h1:hover, .home-crumb:hover) svg .ic-check {
  stroke-dasharray: 1;
  transform-box: fill-box;
  transform-origin: center;
  animation: ic-pop 0.4s ease both;
}

:is(.nav-item:hover, .topbar h1:hover, .home-crumb:hover) svg .ic-head {
  stroke-dasharray: 1;
  transform-box: fill-box;
  transform-origin: center;
  animation: ic-pop 0.4s ease both;
}

:is(.nav-item:hover, .topbar h1:hover, .home-crumb:hover) svg .ic-body {
  stroke-dasharray: 1;
  animation: ic-redraw 0.4s ease 0.2s both;
}

/* lucide-animated bell: the whole bell rocks on hover. */
.topbar-updates-button:hover .topbar-updates-icon {
  animation: ic-ring 0.5s ease-in-out;
}

@keyframes ic-redraw {
  from { stroke-dashoffset: 1; opacity: 0; }

  to { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes ic-retype {
  0% { stroke-dashoffset: 0; }

  45% { stroke-dashoffset: 1; }

  100% { stroke-dashoffset: 0; }
}

@keyframes ic-bob {
  0% { transform: translateY(0); }

  60% { transform: translateY(-5px); }

  100% { transform: translateY(-3px); }
}

@keyframes ic-pop {
  from { stroke-dashoffset: 1; opacity: 0; transform: scale(0.5); }

  to { stroke-dashoffset: 0; opacity: 1; transform: scale(1); }
}

@keyframes ic-ring {
  0%, 100% { transform: rotate(0deg); }

  25%, 75% { transform: rotate(-10deg); }

  50% { transform: rotate(10deg); }
}

@media (prefers-reduced-motion: reduce) {
  .nav-ic svg { transition: none; }

  :is(.nav-item:hover, .topbar h1:hover, .home-crumb:hover) svg,
  :is(.nav-item:hover, .topbar h1:hover, .home-crumb:hover) svg .ic-a,
  :is(.nav-item:hover, .topbar h1:hover, .home-crumb:hover) svg .ic-globe,
  :is(.nav-item:hover, .topbar h1:hover, .home-crumb:hover) svg .ic-lat,
  :is(.nav-item:hover, .topbar h1:hover, .home-crumb:hover) svg .ic-line,
  :is(.nav-item:hover, .topbar h1:hover, .home-crumb:hover) svg .ic-check,
  :is(.nav-item:hover, .topbar h1:hover, .home-crumb:hover) svg .ic-head,
  :is(.nav-item:hover, .topbar h1:hover, .home-crumb:hover) svg .ic-body,
  .topbar-updates-button:hover .topbar-updates-icon {
    animation: none;
    transform: none;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

/* ==== Documents mockup parity: topbar search, filter pills, load more ==== */

/* ==== The page header ===================================================
   One component across Home, Shipments, Documents, Communications and External
   events: crumb, centered search, actions. This grid and the responsive ladder
   under it used to be written out four times in four places, with four subtly
   different collapses -- which is how one wrong track sizing shipped as four
   separate bugs, and then as a fifth on the crumb side. Home keeps its own
   chrome (sticky, translucent, bled to the page gutter); the layout is shared.

   The side tracks are floored at min-content, not at 0. The actions cluster
   never wraps and never shrinks, so a track narrower than the cluster does not
   squeeze it -- it pushes it out of the track and underneath the centered
   search. The search yields width instead, and stays centered where it can. */
.search-topbar {
  display: grid;
  grid-template-columns: minmax(min-content, 1fr) minmax(0, 460px) minmax(min-content, 1fr);
  align-items: center;
  gap: 10px 16px;
}

/* Below 900 the search takes a row of its own; crumb and actions share one. */
@media (max-width: 900px) {
  .search-topbar {
    grid-template-columns: minmax(min-content, 1fr) auto;
  }

  .search-topbar > .topbar-search,
  .search-topbar > .global-search {
    order: 3;
    grid-column: 1 / -1;
  }
}

/* Home and Communications carry the widest action clusters, so their crumb
   needs a row of its own before the others do. */
@media (max-width: 760px) {
  .search-topbar.has-wide-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 680px) {
  .search-topbar {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .search-topbar.has-wide-actions > .topbar-actions,
  .search-topbar.has-wide-actions > .home-head-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 680px) {
  .search-topbar > .topbar-actions,
  .search-topbar > .home-head-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

.files-topbar-crumb { min-width: 0; }

.topbar-search { min-width: 0; }

.topbar-search input {
  width: 100%;
  min-height: 38px;
  padding: 8px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 13.5px;
}

.topbar-search input::placeholder { color: var(--faint); }

/* The page search is the first tab stop inside every header and had no focus
   state: it sits outside .field, which is where the shared input focus ring is
   scoped. Matches the ring the form fields already use. */
.topbar-search input:focus-visible,
.global-search input:focus-visible {
  border-color: #7aa6ca;
  box-shadow: 0 0 0 3px rgba(35, 104, 167, 0.14);
  outline: none;
}

:is(.files-topbar, .external-events-topbar) .topbar-actions .button { border-radius: 999px; }


.home-head-actions { justify-content: flex-end; }

/* The account page keeps the same left-aligned slim header as every page. */
.account-topbar { justify-content: flex-start; }

.account-topbar-inner { width: 100%; }

/* The tile grid sits flat on the canvas; only reference rows keep the frame. */
.files-table:not(.is-reference) {
  min-width: 0;
  overflow-x: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* Same wash + fading grid canvas as the home page. */
.files-page {
  position: relative;
  background:
    radial-gradient(1000px 520px at 88% -8%, rgba(35, 104, 167, 0.09), transparent 60%),
    radial-gradient(700px 400px at 10% 8%, rgba(35, 104, 167, 0.05), transparent 55%),
    linear-gradient(180deg, #edf1f5, #f5f8fa 70%);
}

.files-page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(35, 104, 167, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35, 104, 167, 0.035) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(180deg, #000, transparent 65%);
}

.files-page > * { position: relative; }

/* Count line + dropdown pills replace the library tabs. */
.files-toolbar { align-items: center; }

.files-count {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.files-drops {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.files-drop { position: relative; display: inline-flex; }

.files-drop-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 260px;
  padding: 7px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #fff;
  color: #3d4854;
  cursor: pointer;
  font: 600 12.5px var(--font-sans);
}

.files-drop-button > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.files-drop-button i {
  color: var(--faint);
  font-size: 10px;
  font-style: normal;
  transition: transform 0.15s ease;
}

.files-drop-button:hover,
.files-drop-button:focus-visible,
.files-drop.is-open .files-drop-button {
  border-color: var(--blue);
  color: var(--blue);
}

.files-drop.is-open .files-drop-button i { transform: rotate(180deg); }

/* Applied filters read as removable tokens: blue border, soft fill. */
.files-drop.is-applied .files-drop-button {
  border-color: var(--blue);
  background: var(--blue-bg);
  color: var(--blue);
}

.files-drop.is-applied .files-drop-button i { color: var(--blue); }

/* The open menu is the reference's white rounded card, not the OS menu. */
.files-drop-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  min-width: 230px;
  max-width: min(320px, 86vw);
  max-height: min(430px, 62vh);
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(16, 24, 32, 0.16);
}

/* Viewport-aware flips applied by positionOpenDropPillMenu() after render. */
.files-drop-menu.is-left {
  right: auto;
  left: 0;
}

.files-drop-menu.is-up {
  top: auto;
  bottom: calc(100% + 8px);
}

.files-drop-option {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: 500 13.5px var(--font-sans);
  text-align: left;
}

.files-drop-option:hover,
.files-drop-option:focus-visible,
.files-drop-option.is-active {
  background: #f2f5f8;
}

.files-drop-option.is-selected {
  background: var(--blue-bg);
  color: var(--blue);
  font-weight: 600;
}

.files-drop-tick {
  width: 14px;
  flex: none;
  color: var(--blue);
  font-size: 11px;
}

.files-drop-sep {
  margin: 6px 4px 2px;
  padding: 8px 8px 4px;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Centered count + Load more instead of page steppers. */
.files-loadmore {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
}

.files-loadmore span {
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.files-loadmore button { border-radius: 999px; }

@media (max-width: 680px) {
  :is(.files-topbar, .external-events-topbar) .topbar-actions .button { flex: 1; }

  .files-toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .files-drop-menu { right: auto; left: 0; }
}

/* ==== External events: FlightAPI-style restyle ==== */

.external-events-page {
  position: relative;
  background:
    radial-gradient(1000px 520px at 88% -8%, rgba(35, 104, 167, 0.09), transparent 60%),
    radial-gradient(700px 400px at 10% 8%, rgba(35, 104, 167, 0.05), transparent 55%),
    linear-gradient(180deg, #edf1f5, #f5f8fa 70%);
}

.external-events-page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(35, 104, 167, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35, 104, 167, 0.035) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(180deg, #000, transparent 65%);
}

.external-events-page > * { position: relative; }

/* Count line + dropdown pills, mirroring the Documents toolbar. */
.external-events-controls {
  align-items: center;
  justify-content: space-between;
}

.external-events-result-count {
  margin-left: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.external-events-filters {
  flex: 0 1 auto;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 680px) {
  .external-events-controls {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .external-events-filters { justify-content: flex-start; }
}

/* ==== Home stat cards: FlightAPI card treatment ==== */

/* Room for the floating badges above the first card row. */
.home-stats {
  margin-top: 38px;
  row-gap: 36px;
}

.home-stat {
  position: relative;
  padding: 34px 18px 16px;
  border-color: #ccdbf2;
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(35, 104, 167, 0.08);
}

/* The icon floats as a ringed circular badge straddling the card's top edge. */
.home-stat .home-stat-icon {
  position: absolute;
  top: -23px;
  left: 16px;
  width: 46px;
  height: 46px;
  margin-bottom: 0;
  border: 1px solid #ccdbf2;
  border-radius: 50%;
  box-shadow: 0 6px 14px rgba(16, 24, 32, 0.08);
}

.home-stat .home-stat-icon svg {
  width: 22px;
  height: 22px;
}

/* Breathing room between the card head (title + filter pill) and the
   table's divider line. */
.home-shipments-head { padding: 16px 18px 14px; }

/* Needs-attention reads red, matching the app's review/alert badges. */
.home-stat.is-attention .home-stat-icon {
  background: var(--red-bg);
  color: var(--red);
}

.home-stat.is-attention .home-stat-value {
  color: var(--red);
}

.home-stat:hover {
  box-shadow: 0 14px 32px rgba(35, 104, 167, 0.14);
}

/* ==== Shipments page: FlightAPI-style restyle ==== */

.shipments-page {
  position: relative;
  background:
    radial-gradient(1000px 520px at 88% -8%, rgba(35, 104, 167, 0.09), transparent 60%),
    radial-gradient(700px 400px at 10% 8%, rgba(35, 104, 167, 0.05), transparent 55%),
    linear-gradient(180deg, #edf1f5, #f5f8fa 70%);
}

.shipments-page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(35, 104, 167, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35, 104, 167, 0.035) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(180deg, #000, transparent 65%);
}

.shipments-page > * { position: relative; }

/* Active/Archived becomes a segmented pill like the home filters. */
.shipment-tabs {
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #eef1f4;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}

.shipment-tabs button {
  min-height: 44px;
  flex-shrink: 0;
  white-space: nowrap;
  padding: 8px 16px;
  border-radius: 999px;
}

.shipment-tabs button.is-active {
  background: var(--surface);
  color: var(--blue);
  box-shadow: 0 1px 3px rgba(16, 24, 32, 0.14);
}

.shipment-tabs button.is-active::after { content: none; }

.shipment-primary .shipment-row-meta { display: flex; flex-wrap: wrap; gap: 3px 8px; align-items: baseline; color: var(--muted); font-size: 11px; }
.shipment-row-meta > span + span::before { content: "·"; margin-right: 8px; color: var(--faint); }

.shipments-toolbar .shipment-new-button { border-radius: 999px; }

/* The case list floats as a rounded card. */
.shipments-table {
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(16, 24, 32, 0.05);
}

/* Selecting rows swaps the head row's content in place — same height,
   nothing below moves. */
.shipments-table-head { min-height: 48px; }

.shipments-head-selection {
  display: flex;
  grid-column: 2 / -1;
  align-items: center;
  gap: 14px;
  min-width: 0;
  text-transform: none;
}

.shipments-head-selection strong {
  color: var(--ink);
  font-size: 13px;
}

.shipments-head-selection .text-button {
  font-size: 12.5px;
  font-weight: 600;
}

.shipments-head-selection .shipments-bulk-archive {
  margin-left: auto;
  border-radius: 999px;
}

.shipments-table-head.has-selection {
  border-color: #9ebbd2;
  background: #eaf3fb;
}

.shipments-pagination .button { border-radius: 999px; }

/* ==== Global search: one bar, grouped dropdown across shipments and files ==== */

.global-search { position: relative; min-width: 0; }

.global-search-icon {
  position: absolute;
  top: 50%;
  left: 16px;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  color: var(--faint);
  pointer-events: none;
}

.global-search input { width: 100%; padding-left: 40px; }

.home-topbar .global-search { width: 100%; }

.global-search-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  z-index: 40;
  max-height: min(480px, 70vh);
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(16, 24, 32, 0.16);
}

.global-search-group {
  margin: 6px 4px 2px;
  padding: 6px 8px 4px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.global-search-group + .global-search-group,
.global-search-item + .global-search-group {
  /* Match the 20px the first group gets from the card edge (8px menu
     padding + 6px margin + 6px padding). */
  margin-top: 10px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}

.global-search-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: 500 13.5px var(--font-sans);
  text-align: left;
}

.global-search-item:hover,
.global-search-item.is-active {
  background: #f2f5f8;
}

.global-search-item strong {
  overflow: hidden;
  font-size: 13.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-search-item .gs-sub {
  overflow: hidden;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-search-item .badge { margin-left: auto; flex: none; }

.global-search-action { color: var(--blue); font-weight: 600; }

.global-search-empty {
  padding: 12px;
  color: var(--muted);
  font-size: 13px;
}

/* ==== External events: news feed ==== */

.external-events-feed {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 6px 20px rgba(16, 24, 32, 0.05);
}

.external-events-feed .external-event-row {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.external-events-feed .external-event-row:last-child { border-bottom: 0; }

.external-events-feed .external-event-row:hover,
.external-events-feed .external-event-row:focus-visible,
.external-events-feed .external-event-row.is-selected {
  background: #f6f9fc;
}

.external-events-feed .external-event-row .feed-ic {
  display: grid;
  width: 30px;
  height: 30px;
  flex: none;
  align-self: center;
  place-items: center;
  margin: 0;
  overflow: visible;
  border: 1px solid #dce4eb;
  border-radius: 50%;
  background: #f8fafb;
  color: var(--muted);
  line-height: 0;
  white-space: normal;
}

.feed-ic svg { display: block; width: 16px; height: 16px; }

.feed-ic.is-critical { border-color: #f2c7c4; background: var(--red-bg); color: var(--red); }

.feed-ic.is-warning { border-color: #ecd7ad; background: var(--amber-bg); color: var(--amber); }

.feed-ic.is-active,
.feed-ic.is-upcoming { border-color: #c9dcef; background: var(--blue-bg); color: var(--blue); }

.feed-ic.is-observed { border-color: #d9d3f3; background: #f5f3fc; color: #6758a8; }

.external-events-feed .external-event-primary {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 3px;
}

.external-events-feed .feed-kicker {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  -webkit-line-clamp: none;
}

.external-events-feed .feed-relevance {
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.feed-kicker b { font-weight: 600; }

.feed-kicker i { color: var(--faint); font-style: normal; }

.feed-status { font-style: normal; font-weight: 700; }

.feed-status.is-critical { color: var(--red); }

.feed-status.is-warning { color: var(--amber); }

.feed-status.is-active,
.feed-status.is-upcoming { color: var(--blue); }

.external-events-feed .external-event-heading strong {
  font-size: 14px;
  line-height: 1.35;
}

.external-events-feed .feed-summary {
  overflow: hidden;
  display: -webkit-box;
  margin-top: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  color: #3d4854;
  font-size: 13px;
  line-height: 1.5;
}

.external-events-feed .feed-meta {
  display: block;
  margin-top: 2px;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  -webkit-line-clamp: none;
}

.feed-time {
  flex: none;
  margin-top: 2px;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 10.5px;
  white-space: nowrap;
}

@media (max-width: 680px) {
  .external-events-feed .external-event-row { padding: 14px 16px; }

  .feed-time { display: none; }
}

/* ==== Account page: FlightAPI card treatment ==== */

.account-page {
  position: relative;
  background:
    radial-gradient(1000px 520px at 88% -8%, rgba(35, 104, 167, 0.09), transparent 60%),
    radial-gradient(700px 400px at 10% 8%, rgba(35, 104, 167, 0.05), transparent 55%),
    linear-gradient(180deg, #edf1f5, #f5f8fa 70%);
}

.account-page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(35, 104, 167, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35, 104, 167, 0.035) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(180deg, #000, transparent 65%);
}

/* Lift the content above the grid wash. Only the stack: the site and Network
   editors are also children here, and making their fixed backdrops relative
   dropped each dialog in-flow below Sign out and scrolled the page to it. */
.account-page > .account-stack { position: relative; }

/* A dialog covers the unsaved-changes bar rather than sitting under it. */
.account-page > .unsaved-backdrop { z-index: 31; }

/* Each settings section floats as its own card; the form wrapper melts away
   so every section shares the stack's rhythm. */
#accountSettingsForm { display: contents; }

.account-stack { gap: 20px; }

.account-stack .account-section {
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 6px 20px rgba(16, 24, 32, 0.05);
}

/* Soft blue icon chips replace the numbered step circles. */
.account-section-ic {
  display: grid;
  width: 40px;
  height: 40px;
  flex: none;
  place-items: center;
  border-radius: 11px;
  background: var(--blue-bg);
  color: var(--blue);
}

.account-section-ic svg { width: 20px; height: 20px; }

.account-section-heading h2 { font-size: 18px; }

.account-section-body { margin-left: 54px; }

/* Sign out stays a quiet row, not a card. */
.account-stack .account-signout-section {
  padding: 4px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.account-save-button { border-radius: 999px; }

@media (max-width: 680px) {
  .account-stack .account-section { padding: 18px 16px; }

  .account-section-body { margin-left: 0; }
}

/* ==== Account settings: dense label/control rows + floating savebar ==== */

.account-stack .account-section { padding: 20px 26px 8px; }

.account-stack .account-signout-section { padding: 4px 2px; }

.account-stack .account-section-heading {
  align-items: center;
  margin-bottom: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--surface-soft);
}

.account-stack .account-section-ic { width: 34px; height: 34px; border-radius: 9px; }

.account-stack .account-section-ic svg { width: 17px; height: 17px; }

.account-stack .account-section-heading h2 { font-size: 15px; }

.account-stack .account-section-heading p { margin-top: 2px; font-size: 12px; }

.account-rows-list { display: block; }

.account-stack .account-row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  min-height: 62px;
  margin: 0;
  padding: 13px 0;
  border-top: 1px solid var(--surface-soft);
}

.account-rows-list > .account-row:first-child { border-top: 0; }

.account-stack .account-row > span,
.account-stack .account-row > label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.account-stack .account-row > label small {
  display: block;
  margin-top: 2px;
  color: var(--faint);
  font-size: 11.5px;
  font-weight: 400;
}

.account-stack .account-row > strong {
  justify-self: start;
  font-size: 13.5px;
  text-align: left;
}

.account-page { flex: 1; }

.account-stack .account-row input,
.account-stack .account-row select {
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: 500 13.5px var(--font-sans);
}

.account-stack .account-row input:focus,
.account-stack .account-row select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(39, 111, 181, 0.12);
  outline: none;
}

.account-stack .account-row select { min-height: 44px; }

/* Receiving-site rows: one-line mono meta under the name. */
.site-manager-meta {
  display: block;
  margin-top: 4px;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Floating unsaved-changes bar. */
.account-savebar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px 10px 18px;
  border-radius: 999px;
  background: #101820;
  box-shadow: 0 16px 40px rgba(16, 24, 32, 0.35);
  color: #e6ebef;
  transform: translateX(-50%);
}

.account-savebar[hidden] { display: none; }

.account-savebar-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f2b33d;
}

.account-savebar strong { font-size: 13px; }

.account-savebar-discard { color: #9fb0bd; font-size: 13px; }

.account-savebar-discard:hover { color: #fff; }

.account-savebar .account-save-button {
  min-width: 0;
  border: 0;
  border-radius: 999px;
  background: var(--blue);
  padding: 9px 18px;
}

@media (max-width: 680px) {
  .account-stack .account-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    min-height: 0;
  }

  .account-savebar {
    width: calc(100vw - 24px);
    justify-content: space-between;
    gap: 8px;
    padding-left: 14px;
  }
}

/* ==== Account operating network ==== */

.account-stack .operating-network-section {
  padding-bottom: 22px;
}

.network-heading-actions {
  display: flex;
  flex: none;
  gap: 8px;
  margin-left: auto;
}

.network-readonly-label {
  margin-left: auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font: 700 10px var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.network-manager-body {
  max-width: none;
  margin-left: 0;
}

.network-boundary-note,
.network-trust-note,
.network-confirm-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.network-boundary-note {
  padding: 12px 14px;
  border: 1px solid #cfe0ef;
  border-radius: 9px;
  background: #f1f7fc;
  color: #385b72;
}

.network-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.network-summary > div {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 12px 14px;
  border-left: 1px solid var(--line);
}

.network-summary > div:first-child { border-left: 0; }

.network-summary strong {
  color: var(--ink);
  font: 700 18px/1 var(--font-sans);
}

.network-summary span {
  overflow: hidden;
  color: var(--muted);
  font: 600 10px/1.3 var(--font-mono);
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.network-summary .has-attention strong { color: var(--blue); }

.network-load-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #efc8c8;
  border-radius: 8px;
  background: #fff6f6;
  color: var(--red);
  font-size: 12px;
}

.network-loading {
  margin: 0;
  padding: 12px 0;
  color: var(--muted);
  font-size: 12px;
}

.network-groups {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.network-group {
  min-width: 0;
  padding: 18px 0 4px;
  border-bottom: 1px solid var(--surface-soft);
}

.network-group:last-child { border-bottom: 0; }

.network-group-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
}

.network-group-heading h3 {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.01em;
}

.network-group-heading > span {
  display: grid;
  min-width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font: 700 10px var(--font-mono);
}

.network-trust-note { margin-bottom: 7px; }

.network-discovery-controls {
  display: grid;
  gap: 7px;
  margin: 10px 0 5px;
  padding: 11px 12px;
  border: 1px solid var(--surface-soft);
  border-radius: 9px;
  background: #fafcfd;
}

.network-discovery-refresh-control {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.network-discovery-refresh-control label {
  flex: none;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 650;
}

.network-discovery-refresh-control select {
  width: min(210px, 100%);
  min-width: 0;
  height: 34px;
  padding: 5px 28px 5px 9px;
  font-size: 12px;
}

.network-discovery-refresh-control .button { margin-left: auto; }

.network-discovery-eligibility,
.network-discovery-last-check {
  margin: 0;
  color: var(--faint);
  font: 500 10px/1.45 var(--font-mono);
  letter-spacing: 0.03em;
}

.network-discovery-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding-top: 7px;
  border-top: 1px solid var(--surface-soft);
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.45;
}

.network-discovery-status.is-active { justify-content: flex-start; color: #385b72; }

.network-discovery-status.is-error { color: var(--red); }

.network-discovery-status.is-partial { color: #805c17; }

.network-discovery-spinner {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border: 2px solid #bdd2e3;
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: network-discovery-spin 0.8s linear infinite;
}

@keyframes network-discovery-spin {
  to { transform: rotate(360deg); }
}

.network-record-list { display: grid; }

.network-candidate-groups {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

.network-candidate-group {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--surface-soft);
  border-radius: 10px;
  background: var(--surface);
}

.network-candidate-group-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--surface-soft);
  background: #fafcfd;
}

.network-candidate-group-heading > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.network-candidate-group-heading > div > span {
  color: var(--faint);
  font: 600 9px/1.3 var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.network-candidate-group-heading h4 {
  overflow-wrap: anywhere;
  margin: 0;
  font-size: 12.5px;
}

.network-candidate-group-heading > span {
  display: grid;
  min-width: 23px;
  height: 23px;
  place-items: center;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font: 700 10px var(--font-mono);
}

.network-candidate-group .network-record-list { padding: 0 12px; }

.network-candidate-anchor-note {
  margin: 0;
  padding: 8px 12px;
  border-bottom: 1px solid #eadfca;
  background: #fffaf0;
  color: #805c17;
  font-size: 11px;
  line-height: 1.45;
}

.network-record,
.network-suggestion {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px 0;
  border-top: 1px solid var(--surface-soft);
}

.network-record-list > :first-child { border-top: 0; }

.network-suggestion { grid-template-columns: minmax(0, 1fr) auto; }

.network-suggestion.is-stale { background: linear-gradient(90deg, rgba(105, 120, 132, 0.045), transparent); }

.network-record.is-inactive { opacity: 0.65; }

.network-record-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid #b9cad8;
  border-radius: 9px;
  background: #eff6fb;
  color: #2d6383;
  font: 700 10px var(--font-mono);
}

.network-record-icon.is-place {
  position: relative;
  border-radius: 5px;
}

.network-record-icon.is-place::before,
.network-record-icon.is-place::after {
  content: "";
  position: absolute;
  top: 9px;
  width: 4px;
  height: 4px;
  border-radius: 1px;
  background: #7692a5;
}

.network-record-icon.is-place::before { left: 8px; }
.network-record-icon.is-place::after { right: 8px; }

.network-record-icon.is-place i {
  position: absolute;
  bottom: 0;
  left: 13px;
  width: 8px;
  height: 9px;
  border-radius: 2px 2px 0 0;
  background: #517893;
}

.network-record-icon.is-route { font-size: 18px; }

.network-record-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.network-record-title {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.network-record-title strong {
  overflow-wrap: anywhere;
  font-size: 13.5px;
}

.network-record-copy > span {
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 12px;
}

.network-candidate-identity {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 7px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.network-candidate-type {
  color: var(--ink);
  font-weight: 650;
}

.network-candidate-detail {
  min-width: 0;
  overflow-wrap: anywhere;
}

.network-candidate-detail::before {
  content: "·";
  margin-right: 7px;
  color: var(--faint);
}

.network-record-copy > small {
  overflow-wrap: anywhere;
  color: var(--faint);
  font: 500 10px/1.4 var(--font-mono);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.network-record-copy > .network-candidate-warning {
  color: var(--red);
  text-transform: none;
}

.network-record-copy > .network-candidate-website {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  letter-spacing: 0;
  text-transform: none;
}

.network-candidate-website > span {
  color: var(--faint);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.network-candidate-website b { color: var(--muted); }

.network-candidate-website a {
  color: var(--blue);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: rgba(35, 104, 167, 0.35);
  text-underline-offset: 2px;
}

.network-candidate-website a:hover { text-decoration-color: currentColor; }

.network-record-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px 11px;
}

.network-record-actions .text-button { font-size: 12px; }

.network-record-actions .text-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.network-group-empty {
  margin: 0;
  padding: 12px 0 15px;
  color: var(--faint);
  font-size: 12px;
}

.network-editor-dialog {
  width: min(680px, 100%);
  max-height: calc(100dvh - 40px);
  overflow: auto;
}

.network-editor-form { margin-top: 20px; }

.network-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.network-form-section { margin-top: 20px; }

.network-form-section > div:first-child { margin-bottom: 12px; }

.network-form-section h3 {
  margin: 0;
  font-size: 14px;
}

.network-form-section p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.network-preferred-control { margin-top: 18px; }

.network-confirm-note { margin-top: 10px; }

@media (max-width: 680px) {
  .network-heading-actions {
    width: calc(100% - 48px);
    margin-left: 48px;
  }

  .network-heading-actions .button { flex: 1; }

  .network-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .network-summary > div:nth-child(3) {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .network-summary > div:nth-child(4) { border-top: 1px solid var(--line); }

  .network-discovery-refresh-control {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .network-discovery-refresh-control label { width: 100%; }

  .network-discovery-refresh-control select {
    width: auto;
    flex: 1 1 150px;
  }

  .network-discovery-refresh-control .button {
    flex: 1 1 auto;
    margin-left: 0;
  }

  .network-discovery-status { align-items: flex-start; flex-wrap: wrap; }

  .network-record,
  .network-suggestion {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .network-suggestion .network-record-copy { grid-column: 1 / -1; }

  .network-record-actions {
    grid-column: 2;
    justify-content: flex-start;
  }

  .network-suggestion .network-record-actions { grid-column: 1 / -1; }

  .network-candidate-group .network-record-list { padding: 0 10px; }

  .network-form-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .network-discovery-spinner { animation: none; }
}

/* ==== Updates drawer: 640px, grouped, unmissable unread ==== */

.updates-drawer { width: min(640px, 96vw); }

/* Updates uses the sidebar's 750ms curve, without changing sidebar motion. */
#updates-drawer-root .updates-drawer {
  transform: translateX(100%);
  pointer-events: none;
  transition: transform 750ms cubic-bezier(0.4, 0, 0.2, 1);
}
#updates-drawer-root .updates-drawer.is-open { transform: translateX(0); pointer-events: auto; }
#updates-drawer-root .updates-backdrop {
  opacity: 0;
  pointer-events: none;
  transition: opacity 750ms cubic-bezier(0.4, 0, 0.2, 1);
}
#updates-drawer-root .updates-backdrop.is-open { opacity: 1; pointer-events: auto; }
#updates-drawer-root .updates-list { overscroll-behavior: contain; }
@media (max-width: 680px) {
  #updates-drawer-root .updates-drawer { transform: translateY(100%); }
  #updates-drawer-root .updates-drawer.is-open { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  #updates-drawer-root .updates-drawer,
  #updates-drawer-root .updates-backdrop { transition: none; }
}

.updates-head {
  align-items: center;
  gap: 12px;
  padding: 18px 22px 14px;
}

.updates-head h2 { font-size: 20px; }

.updates-unread-pill {
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 11px;
}

.updates-unread-pill.is-zero { background: var(--line-strong); }

.updates-head-spacer { flex: 1; }

.updates-markall {
  padding: 6px 8px;
  border-radius: 8px;
  color: var(--blue);
  font-size: 13px;
  font-weight: 600;
}

.updates-markall:hover:not(:disabled) { background: var(--blue-bg); }

.updates-markall:disabled { color: var(--faint); }

.updates-list { padding: 6px 12px 20px; }

.updates-group-label {
  margin: 14px 10px 6px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.updates-drawer .update-row {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 2px 12px;
  align-items: start;
  width: 100%;
  margin: 6px 0;
  padding: 14px 14px 12px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  text-align: left;
}

.updates-drawer .update-row:hover { background: var(--surface-soft); }

/* Unread: tinted card, blue edge bar, ringed dot, bold ink title, NEW tag. */
.updates-drawer .update-row.is-unread {
  background: var(--blue-bg);
  border-color: #c9dcf3;
  box-shadow: inset 3px 0 0 #2f6fb2;
}

.updates-drawer .update-row.is-unread:hover { background: #e0edfa; }

.update-ic {
  display: grid;
  grid-row: span 2;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 9px;
  background: var(--surface-soft);
  color: var(--muted);
}

.updates-drawer .update-row.is-unread .update-ic { background: var(--surface); color: var(--blue); }

.update-ic svg { width: 17px; height: 17px; }

.updates-drawer .update-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.updates-drawer .update-title { display: flex; align-items: center; gap: 8px; min-width: 0; }

.updates-drawer .update-title strong { display: inline; color: #3d4854; font-size: 14px; font-weight: 600; }

.updates-drawer .update-row.is-unread .update-title strong { color: var(--ink); font-weight: 700; }

.update-new {
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  text-transform: uppercase;
}

.update-body { color: var(--muted); font-size: 13px; line-height: 1.5; }

.updates-drawer .update-row.is-unread .update-body { color: #3d4854; }

.updates-drawer .update-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 10.5px;
}

.updates-drawer .update-meta .update-ship { display: inline-flex; }

.updates-drawer .update-meta time { display: inline; }

.updates-drawer .update-row.is-unread .update-meta { color: var(--muted); }

.update-meta time { font-size: 10.5px; color: inherit; }

/* The same three notification categories used in the iOS inbox. */
.updates-drawer .update-row { --update-accent: #2367a0; --update-tint: #eef5fc; }
.updates-drawer .update-row.category-review { --update-accent: #a13752; --update-tint: #fcf0f3; }
.updates-drawer .update-row.category-action { --update-accent: #21766d; --update-tint: #edf8f5; }
.updates-drawer .update-row.is-unread,
.updates-drawer .update-row.is-unread:hover {
  background: var(--update-tint);
  border-color: color-mix(in srgb, var(--update-accent) 20%, transparent);
  box-shadow: inset 3px 0 0 var(--update-accent);
}
.updates-drawer .update-row.is-unread .update-ic,
.updates-drawer .update-category { color: var(--update-accent); }
.updates-drawer .update-new { background: var(--update-accent); flex-shrink: 0; }
.updates-drawer .update-meta { flex-wrap: wrap; }

.update-ship {
  border: 1px solid #c9dbf8;
  border-radius: 999px;
  background: var(--surface);
  color: var(--blue);
  font-size: 10px;
  font-style: normal;
  padding: 1px 9px;
}

.update-dot {
  width: 9px;
  height: 9px;
  margin-top: 6px;
  border-radius: 50%;
  background: #2f6fb2;
  box-shadow: 0 0 0 3px rgba(47, 111, 178, 0.18);
}

/* ==== Onboarding: brand + stepper + floating step cards ==== */

.onboarding-flow {
  min-height: 100vh;
  overflow-y: auto;
  padding: 0 20px 60px;
  position: relative;
  background:
    radial-gradient(1000px 520px at 88% -8%, rgba(35, 104, 167, 0.1), transparent 60%),
    radial-gradient(700px 400px at 10% 8%, rgba(35, 104, 167, 0.05), transparent 55%),
    linear-gradient(180deg, #edf1f5, #f5f8fa 70%);
}

.onboarding-flow::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(35, 104, 167, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35, 104, 167, 0.035) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(180deg, #000, transparent 65%);
}

.onboarding-flow > * { position: relative; }

.ob-brand { display: flex; justify-content: center; padding: 30px 0 8px; }

.ob-brand .brand { padding: 0; }

.ob-brand .brand-title { color: var(--ink); }

.ob-brand .brand-subtitle { color: var(--muted); }

.ob-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0 8px;
}

.ob-step { display: flex; align-items: center; gap: 9px; }

.ob-step .ob-n {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.ob-step > span:last-child { color: var(--muted); font-size: 13px; font-weight: 600; }

.ob-step.is-done .ob-n { border-color: var(--green); background: var(--green-bg); color: var(--green); }

.ob-step.is-done > span:last-child { color: var(--green); }

.ob-step.is-active .ob-n {
  border-color: var(--blue);
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(35, 104, 167, 0.15);
  color: #fff;
}

.ob-step.is-active > span:last-child { color: var(--ink); }

.ob-connector {
  width: 64px;
  height: 2px;
  margin: 0 14px;
  border-radius: 2px;
  background: var(--line-strong);
}

.ob-connector.is-done { background: var(--green); }

.ob-stage {
  display: flex;
  align-items: baseline;
  gap: 10px;
  max-width: 560px;
  margin: 26px auto 10px;
}

.ob-stage-step {
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ob-stage-title { color: var(--muted); font-size: 13px; font-weight: 650; }

.ob-card {
  max-width: 560px;
  margin: 0 auto;
  padding: 30px 34px 28px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 10px 30px rgba(35, 104, 167, 0.09);
}

.ob-ic {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  margin-bottom: 14px;
  border-radius: 12px;
  background: var(--blue-bg);
  color: var(--blue);
}

.ob-ic svg { width: 21px; height: 21px; }

.ob-ic.is-ready {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--green-bg);
  color: var(--green);
}

.ob-ic.is-ready svg { width: 26px; height: 26px; }

.ob-card h2 { margin: 0 0 6px; font-size: 21px; letter-spacing: -0.01em; }

.ob-card > p { margin: 0 0 20px; color: var(--muted); font-size: 13.5px; line-height: 1.55; }

.ob-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 22px; }

.ob-primary { border-radius: 999px; padding: 12px 24px; }

.ob-summary { border: 1px solid var(--surface-soft); border-radius: 12px; overflow: hidden; margin-top: 4px; }

.ob-summary-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 13px 16px;
  border-top: 1px solid var(--surface-soft);
}

.ob-summary-row:first-child { border-top: 0; }

.ob-summary-row > span { color: var(--muted); font-size: 12.5px; font-weight: 600; }

.ob-summary-row strong { font-size: 13.5px; }

.ob-summary-site + .ob-summary-site { margin-top: 10px; }

.ob-summary-site small {
  display: block;
  margin-top: 2px;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ob-home-pill {
  margin-left: 7px;
  border-radius: 999px;
  background: var(--green-bg);
  color: var(--green);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 650;
  padding: 2px 9px;
}

.ob-discovery {
  display: grid;
  gap: 12px;
  margin: 18px 0;
  padding: 15px;
  border: 1px solid #cfe0ef;
  border-radius: 12px;
  background: #f8fbfd;
}

.ob-discovery.is-later {
  gap: 7px;
  border-color: var(--surface-soft);
  background: #fbfcfd;
}

.ob-discovery-heading > div {
  display: grid;
  gap: 3px;
}

.ob-discovery-heading .eyebrow {
  color: var(--blue);
  font: 700 9px/1.3 var(--font-mono);
  letter-spacing: 0.09em;
}

.ob-discovery-heading h3 {
  margin: 0;
  font-size: 15px;
  letter-spacing: -0.005em;
}

.ob-discovery-heading p,
.ob-discovery.is-later > p {
  margin: 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.5;
}

.ob-discovery-message {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 11px;
  border: 1px solid var(--surface-soft);
  border-radius: 9px;
  background: var(--surface);
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.45;
}

.ob-discovery-message > span:not(.network-discovery-spinner),
.ob-discovery-message:not(.is-loading) {
  display: grid;
  gap: 2px;
}

.ob-discovery-message strong { color: var(--ink); font-size: 12px; }

.ob-discovery-message.is-error {
  border-color: #efc8c8;
  background: #fff6f6;
  color: var(--red);
}

.ob-discovery-message.is-error strong { color: var(--red); }

.ob-discovery-message.is-partial {
  border-color: #eadfca;
  background: #fffaf0;
  color: #805c17;
}

.ob-discovery-message.is-partial strong { color: #68480d; }

.ob-discovery-message.is-empty { background: #fbfcfd; }

.ob-discovery-inline-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ob-discovery .network-candidate-groups { margin-top: 0; }

.ob-discovery .network-candidate-group { border-color: #dce7ee; }

.ob-discovery .network-candidate-group-heading { background: #f4f8fb; }

.ob-discovery .network-suggestion { padding: 11px 0; }

.ob-discovery .network-record-actions { gap: 6px 10px; }

.ob-discovery-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 2px;
}

.ob-discovery-footer > span {
  color: var(--faint);
  font-size: 10.5px;
  line-height: 1.4;
}

@media (max-width: 680px) {
  .ob-card { padding: 22px 18px; }

  .ob-connector { width: 28px; margin: 0 8px; }

  .ob-step > span:last-child { display: none; }

  .ob-step.is-active > span:last-child { display: inline; }

  .ob-summary-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }

  .ob-discovery { margin-inline: -4px; padding: 12px; }

  .ob-discovery-footer { align-items: flex-start; flex-direction: column; gap: 2px; }
}

/* Blocked navigation: the savebar is the one decision point — it flashes an
   amber ring and shakes instead of opening a second dialog. */
.account-savebar.is-blocking {
  box-shadow: 0 16px 40px rgba(16, 24, 32, 0.45), 0 0 0 2px rgba(242, 179, 61, 0.65);
}

.account-savebar.is-shake { animation: savebar-shake 0.4s ease; }

@keyframes savebar-shake {
  0%, 100% { transform: translateX(-50%); }

  20%, 60% { transform: translateX(calc(-50% - 8px)); }

  40%, 80% { transform: translateX(calc(-50% + 8px)); }
}

@media (prefers-reduced-motion: reduce) {
  .account-savebar.is-shake { animation: none; }
}

/* ==== Address + timezone fields: no artifacts, site-local detection ==== */

/* The suggestion listbox's display:grid was overriding [hidden], leaving a
   2px bordered strip under the Address field. */
.geocode-suggestions[hidden] { display: none; }

/* Local time zone reads as a detected fact with a quiet Change action; the
   raw input only appears on Change or when detection has nothing. */
.tz-field .tz-summary {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 38px;
  padding: 6px 0 0;
}

.tz-field .tz-summary strong { font-size: 14px; }

.tz-field .tz-note { color: var(--faint); font-size: 12px; }

.tz-field .tz-change { padding: 0; color: var(--blue); font-size: 12.5px; font-weight: 600; }

.tz-field .tz-input { display: none; }

.tz-field.is-editing .tz-summary { display: none; }

.tz-field.is-editing .tz-input { display: block; }

/* First-run home: the full dashboard shell renders with zeroed cards and the
   Shipments card carries the call to action. */
.home-first-run {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 44px 24px 48px;
  text-align: center;
}

.home-first-run h3 { margin: 0; font-size: 18px; }

.home-first-run p {
  max-width: 520px;
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
}

.home-first-run .button { border-radius: 999px; }

/* ==== lucide-animated truck (Shipments): bob, wheel spin, speed lines ==== */

svg[data-icon="shipments"] { overflow: visible; }

svg[data-icon="shipments"] .tk-speed { opacity: 0; }

svg[data-icon="shipments"] .tk-wheel { transform-box: view-box; }

svg[data-icon="shipments"] .tk-w1 { transform-origin: 7px 18px; }

svg[data-icon="shipments"] .tk-w2 { transform-origin: 17px 18px; }

:is(.nav-item:hover, .topbar h1:hover, .home-crumb:hover) svg[data-icon="shipments"] .tk-body {
  animation: tk-bob 0.4s ease-in-out infinite;
}

:is(.nav-item:hover, .topbar h1:hover, .home-crumb:hover) svg[data-icon="shipments"] .tk-wheel {
  animation: tk-spin 0.5s linear infinite;
}

:is(.nav-item:hover, .topbar h1:hover, .home-crumb:hover) svg[data-icon="shipments"] .tk-speed {
  animation: tk-lines 0.5s ease-out var(--tk-delay, 0s) infinite;
}

svg[data-icon="shipments"] .tk-s2 { --tk-delay: 0.08s; }

svg[data-icon="shipments"] .tk-s3 { --tk-delay: 0.16s; }

@keyframes tk-bob {
  0%, 50%, 100% { transform: translateY(0); }

  25% { transform: translateY(-1px); }

  75% { transform: translateY(-0.5px); }
}

@keyframes tk-spin {
  to { transform: rotate(360deg); }
}

@keyframes tk-lines {
  0% { opacity: 0; transform: translateX(0) scaleX(0.2); }

  20% { opacity: 0.7; transform: translateX(-4px) scaleX(1); }

  60% { opacity: 0.5; transform: translateX(-10px) scaleX(0.8); }

  100% { opacity: 0; transform: translateX(-16px) scaleX(0.3); }
}

@media (prefers-reduced-motion: reduce) {
  svg[data-icon="shipments"] .tk-body,
  svg[data-icon="shipments"] .tk-wheel,
  svg[data-icon="shipments"] .tk-speed {
    animation: none;
  }
}

/* ==== Communications: operational correspondence, not a mail-client clone ==== */

.communications-topbar .topbar-actions .button { border-radius: 999px; }

.communications-page {
  position: relative;
  min-width: 0;
  min-height: 0;
  flex: 1;
  overflow: auto;
  padding: 28px;
  background:
    radial-gradient(1000px 520px at 88% -8%, rgba(35, 104, 167, 0.09), transparent 60%),
    radial-gradient(700px 400px at 10% 8%, rgba(35, 104, 167, 0.05), transparent 55%),
    linear-gradient(180deg, #edf1f5, #f5f8fa 70%);
}

.communications-page::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(35, 104, 167, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35, 104, 167, 0.035) 1px, transparent 1px);
  background-size: 54px 54px;
  content: "";
  mask-image: linear-gradient(180deg, #000, transparent 65%);
}

.communications-page > * { position: relative; }


.comm-places.has-overflow { overflow-x: auto; }

/* Wraps at every width rather than only below 900: the search, the three filter
   chips and the sort control overran the bar by 13px at 901. */
.communications-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 0;
  padding: 9px 16px;
}

.communications-search {
  position: relative;
  display: block;
  width: min(560px, 100%);
}

.communications-search svg {
  position: absolute;
  top: 50%;
  left: 13px;
  width: 16px;
  height: 16px;
  color: var(--faint);
  transform: translateY(-50%);
}

.communications-search input {
  width: 100%;
  min-height: 38px;
  padding: 8px 14px 8px 38px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: 13px var(--font-sans);
}

.communications-search input:focus {
  border-color: var(--blue);
  outline: 3px solid rgba(40, 118, 181, 0.13);
}

.communications-filter-chip {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid var(--blue);
  border-radius: 999px;
  background: var(--blue-bg);
  color: var(--blue);
  cursor: pointer;
  font: 650 11.5px var(--font-sans);
}

.communications-filter-chip span { margin-left: 4px; }

/* The card's own strips, matching the page's two axes. */
.shipment-communications-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.shipment-communications-hint {
  color: var(--muted);
  font-size: 12px;
}

.shipment-email-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11.5px;
}

.shipment-email-strip-spacer { flex: 1; }

.shipment-email-strip .is-attention { color: var(--amber); font-weight: 650; }

/* Controls and rows are one white sheet with rules between them, the way a
   mail client reads — not two floating panels on a tinted page. */
.communications-controls {
  margin-bottom: 0;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: #fff;
}

.communications-ledger {
  overflow: hidden;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 32, 0.04);
}

/* ==== The mailbox row: one line, 40px, the way a mail client reads ==== */

.communication-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  border-bottom: 1px solid #dde4e8;
  background: transparent;
  cursor: pointer;
  transition: background 120ms ease;
}

.communication-row:last-child { border-bottom: 0; }

/* Read and unread the way Gmail draws them: what you have not opened is bold
   on white; what you have is regular weight on a blue-grey tint. These sit
   before hover, selected and checked so those states still win. */
.communication-row.is-read { background: #f2f6fc; }

.communication-row.is-read .comm-from,
.communication-row.is-read .comm-line strong {
  font-weight: 400;
}

.communication-row.is-unread .comm-from,
.communication-row.is-unread .comm-line strong,
.communication-row.is-unread .comm-when {
  color: var(--ink);
  font-weight: 700;
}

.communication-row:hover { background: #f7f9fa; }

.communication-row.is-read:hover { background: #e9eef6; }

.communication-row.is-selected { background: #eef4f9; }

.communication-row.is-checked { background: var(--blue-bg); }

/* The checkbox sits where the direction arrow used to; direction is carried by
   the sender instead ("me → Seneca Ridge" reads as sent without a glyph). */
.comm-select {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding-left: 16px;
  cursor: pointer;
}

.comm-select input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--blue);
  cursor: pointer;
}

.comm-select.is-bulk {
  height: auto;
  padding-left: 0;
  flex: 0 0 auto;
}

.comm-open {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr) 92px 20px 62px;
  gap: 12px;
  align-items: center;
  min-width: 0;
  min-height: 40px;
  padding: 0 16px 0 10px;
  border: 0;
  background: none;
  color: #202a33;
  cursor: pointer;
  font: 13px var(--font-sans);
  text-align: left;
}

.communication-row.has-chips .comm-open { padding-top: 6px; }

.comm-open:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

.comm-from {
  overflow: hidden;
  color: var(--ink);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comm-mid { min-width: 0; }

.comm-line {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comm-line strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}

.comm-snip { color: var(--faint); }

/* The attached document is the evidence, so it names itself in the row. */
/* The chips line sits under the subject as its own row of real buttons --
   clicking one opens the attachment viewer straight from the list, without
   opening the message, exactly as Gmail's chips behave. */
.comm-chips {
  display: flex;
  grid-column: 2;
  gap: 6px;
  margin: -2px 16px 8px 198px;
  overflow: hidden;
}

.comm-attchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 210px;
  padding: 3px 9px 3px 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  font-family: var(--font-sans);
}

button.comm-attchip:hover { border-color: #9fc0d8; background: #f2f8fc; color: var(--ink); }

button.comm-attchip:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

.comm-attchip i {
  display: flex;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  background: #c8362c;
  color: #fff;
  font-size: 6.5px;
  font-style: normal;
  font-weight: 700;
}

.comm-attchip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comm-attchip.is-more {
  padding: 3px 9px;
  color: var(--faint);
}

.comm-ord {
  justify-self: start;
  overflow: hidden;
  max-width: 100%;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--surface-soft);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comm-clip { color: var(--faint); }
.comm-clip svg { display: block; width: 13px; height: 13px; }

.comm-when {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: right;
  white-space: nowrap;
}

/* ==== Two axes: places above, conditions and sort below ==== */

.comm-places {
  display: flex;
  gap: 2px;
  padding: 0 16px;
  border-bottom: 1px solid #dde4e8;
}

.comm-place {
  flex: 0 0 auto;
  white-space: nowrap;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px 10px;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font: 600 13.5px var(--font-sans);
}

.comm-place svg { width: 15px; height: 15px; }

.comm-place.is-active { color: var(--ink); }

.comm-place.is-active::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: -1px;
  left: 10px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--blue);
}

.comm-place em {
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
}

.comm-place.is-active em { color: var(--blue); }

.comm-place:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

@media (max-width: 480px) {
  .comm-places { padding: 0 4px; gap: 0; }
  .comm-place { padding-inline: 8px; gap: 5px; }
}

.comm-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  font: 500 12px var(--font-sans);
  white-space: nowrap;
}

.comm-chip b { color: var(--faint); font-family: var(--font-mono); font-size: 10.5px; }

.comm-chip.is-alert { border-color: #e6c69a; background: var(--amber-bg); color: var(--amber); }
.comm-chip.is-alert b { color: var(--amber); }

.comm-chip.is-active { border-color: var(--blue); background: var(--blue-bg); color: var(--blue); }
.comm-chip.is-active b { color: var(--blue); }

.comm-sort {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font: 500 12px var(--font-sans);
  white-space: nowrap;
}

.comm-sort svg { width: 12px; height: 12px; }

/* ==== Selection swaps the strip rather than adding one ==== */

.comm-bulk {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  border-radius: 0;
  border-bottom: 1px solid #cfe0f0;
  background: var(--blue-bg);
}

.comm-bulk-count {
  margin-right: 4px;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 650;
  white-space: nowrap;
}

.comm-bulk-spacer { flex: 1; }

.comm-bulk-note {
  color: var(--muted);
  font-size: 11.5px;
  white-space: nowrap;
}

.comm-act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 11px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font: 600 12px var(--font-sans);
  white-space: nowrap;
}

.comm-act.is-danger { border-color: #dcb3ae; color: var(--red); }

.comm-act:disabled { cursor: not-allowed; opacity: 0.55; }

/* ==== Deleting names what goes and what stays ==== */

.comm-confirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(16, 24, 32, 0.42);
}

.comm-confirm {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 91;
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 24px 60px rgba(16, 24, 32, 0.28);
  transform: translate(-50%, -50%);
}

.comm-confirm h2 {
  margin: 0 0 8px;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.comm-confirm > p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.comm-confirm-list {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
}

.comm-confirm-list li {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}

.comm-confirm-list li:last-child { border-bottom: 0; }

.comm-confirm-list strong {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comm-confirm-list span {
  display: block;
  margin-top: 2px;
  color: var(--faint);
  font-size: 11px;
}

.comm-confirm-list li.is-more { color: var(--faint); font-size: 11.5px; }

.comm-confirm-error {
  margin: 12px 0 0;
  padding: 9px 11px;
  border-radius: 8px;
  background: var(--red-bg);
  color: var(--red);
  font-size: 12.5px;
}

.comm-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 18px;
}

.communications-empty {
  margin: 0;
  padding: 48px 24px;
  color: var(--muted);
  text-align: center;
}

.communications-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid #e3b0b0;
  border-radius: 10px;
  background: var(--red-bg);
}

.communications-error strong,
.communications-error span { display: block; }

.communications-error span { margin-top: 3px; color: var(--muted); font-size: 11px; }

/* Shipment workspace summary — deliberately one section, not another tile row. */
.shipment-communications-head { align-items: flex-end; }

.shipment-communications-head h3 { margin: 0; }

.shipment-communications-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.shipment-communications-actions .text-button {
  padding: 0;
  color: var(--blue);
  font-size: 11.5px;
  font-weight: 700;
}

/* The card is the same mailbox at the same density — it just knows which
   shipment it is in, so the row drops the shipment column. */
.shipment-communication-list .communication-row.is-compact {
  grid-template-columns: 30px minmax(0, 1fr);
  border-radius: 0;
  background: transparent;
}

.communication-row.is-compact .comm-select { padding-left: 0; }

.communication-row.is-compact .comm-open {
  grid-template-columns: 176px minmax(0, 1fr) 20px 62px;
  padding-right: 0;
}

.shipment-communication-list .communication-row.is-compact:hover {
  background: #f7f9fa;
}

.shipment-communications-empty,
.shipment-communications-error {
  margin: 0;
  padding: 20px 0 4px;
  color: var(--muted);
  font-size: 12px;
}

.shipment-communications-error { color: var(--red); }

/* Wide communication detail: message context at left, evidence preview at right. */
/* ==== The message as a page ====
   Opening a message replaces the list rather than covering it, so there is a
   place to come back to and a control that says so. */
.communication-reader {
  display: flex;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(16, 24, 32, 0.04);
}

.communication-reader-bar {
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.communication-reader-back {
  display: inline-flex;
  height: 32px;
  align-items: center;
  gap: 8px;
  padding: 0 12px 0 9px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font: 600 12.5px var(--font-sans);
}

.communication-reader-back svg { width: 15px; height: 15px; }

.communication-reader-back:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.communication-reader-count {
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: nowrap;
}

.communication-reader-nav {
  display: inline-flex;
  min-width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: #3d4854;
  cursor: pointer;
  font: 650 13px var(--font-sans);
  text-decoration: none;
}

.communication-reader-nav:hover:not(:disabled) {
  border-color: var(--blue);
  color: var(--blue);
}

.communication-reader-nav:disabled { opacity: 0.35; cursor: default; }

.communication-reader-spacer { flex: 1; }

/* A page, not a drawer: the message gets real width, and when there is no
   attachment it gets the whole page rather than sharing it with an empty
   preview. */
/* One column, always. The old layout split the reader in two the moment a
   message had attachments and parked a persistent preview pane on the right;
   attachments now live as cards at the bottom of the message and open a
   full-screen viewer, the way Gmail's do. */
.communication-reader-body {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
}

/* Gmail's thread fills the pane; no narrow column with a blank right half. */
.communication-reader-body .communication-message-pane {
  max-width: none;
  border-right: 0;
}

.communication-message-pane {
  min-width: 0;
  overflow-y: auto;
  padding: 24px 25px 36px;
  border-right: 1px solid var(--line);
}



.communication-status {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #edf1f3;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 750;
  white-space: nowrap;
}

.communication-status.is-working { background: var(--blue-bg); color: var(--blue); }

.communication-status.is-positive { background: var(--green-bg); color: var(--green); }

.communication-status.is-attention { background: var(--amber-bg); color: var(--amber); }

.communication-status.is-critical { background: var(--red-bg); color: var(--red); }














/* Gmail's conversation: the subject once, then every message in the thread
   stacked oldest first. Earlier messages fold to a sender-and-snippet line;
   the latest, and anything unread when you opened it, stays open. */
.communication-thread-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0 0 4px;
}

.communication-thread-heading h2 {
  margin: 0;
  color: var(--ink);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.communication-thread-shipment {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid #c9d9e6;
  border-radius: 6px;
  background: #eef4f9;
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.communication-thread-shipment:hover:not(:disabled) { background: #e0ebf5; }

.communication-thread-shipment:disabled {
  border-color: var(--line);
  background: #f1f3f5;
  color: var(--muted);
  cursor: default;
}

.communication-thread-count {
  color: var(--muted);
  font-size: 12px;
}

.communication-thread {
  margin: 0;
  padding: 0;
  list-style: none;
}

.communication-thread-message { border-top: 1px solid var(--line); }

.communication-thread-message:first-child { border-top: 0; }

.communication-thread-toggle {
  display: grid;
  width: 100%;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  column-gap: 14px;
  align-items: center;
  padding: 18px 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.communication-thread-toggle:hover { background: #f7f9fa; }

.communication-avatar {
  display: inline-flex;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: hsl(var(--avatar-hue, 205) 42% 44%);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}

.communication-thread-who {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.communication-thread-who strong {
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
}

.communication-thread-snippet {
  overflow: hidden;
  color: var(--muted);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.communication-thread-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.communication-thread-time {
  color: var(--muted);
  font-size: 11.5px;
  white-space: nowrap;
}

.communication-thread-clip { width: 16px; height: 16px; color: var(--muted); }

.communication-thread-head {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  column-gap: 14px;
  align-items: start;
  padding: 20px 0 4px;
}

.communication-thread-name {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.communication-thread-name:disabled { cursor: default; }

.communication-thread-addr {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

.communication-thread-to,
.communication-thread-cc {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  color: var(--muted);
  font-size: 12px;
}

/* Gmail's details caret: the small chevron by the "to" line opens a compact
   card of where the message came from and how it was handled. */
.communication-thread-caret {
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.communication-thread-caret svg { width: 14px; height: 14px; }

.communication-thread-caret:hover { background: #e8ecf0; color: var(--ink); }

.communication-thread-caret[aria-expanded="true"] svg { transform: rotate(180deg); }

.communication-thread-details {
  margin: 8px 0 4px 54px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.communication-thread-details dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 14px;
  margin: 0;
}

.communication-thread-details dl > div { display: contents; }

.communication-thread-details dt {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.communication-thread-details dd {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.communication-thread-details p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

/* Gmail leaves a clear band under each message before the next one starts. */
.communication-thread-content { padding: 14px 0 24px 54px; }

.communication-thread-content pre {
  margin: 0;
  color: #202124;
  font: 13.5px/1.6 var(--font-sans);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.communication-thread-message .communication-attachments,
.communication-thread-message .communication-sender-review {
  margin-left: 54px;
}

.communication-thread-message .communication-attachments { margin-bottom: 20px; }

.communication-thread-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 18px 0 8px 54px;
}

.communication-thread-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border: 1px solid #c4cbd2;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.communication-thread-action:hover:not(:disabled) { background: #f1f3f4; }

.communication-thread-action:disabled { opacity: 0.5; cursor: default; }

.communication-thread-action svg { width: 16px; height: 16px; }

.communication-thread-actions + .communication-reply { margin-left: 54px; }

.comm-count {
  margin-left: 4px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
}

.communication-row.is-unread .comm-count { color: var(--ink); font-weight: 700; }

@media (max-width: 680px) {
  .communication-thread-content,
  .communication-thread-actions,
  .communication-thread-details,
  .communication-thread-actions + .communication-reply,
  .communication-thread-message .communication-attachments,
    .communication-thread-message .communication-sender-review {
    margin-left: 0;
    padding-left: 0;
  }

  .communication-thread-toggle,
  .communication-thread-head {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    column-gap: 10px;
  }

  /* Gmail's phone header: name on one line, time and status under it, the
     address left out. */
  .communication-thread-head {
    grid-template-columns: 32px minmax(0, 1fr);
    row-gap: 4px;
  }

  .communication-thread-head .communication-thread-meta {
    grid-column: 2;
    justify-content: flex-start;
  }

  .communication-thread-addr { display: none; }

  .communication-avatar {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
    font-size: 13px;
  }

  .communication-thread-heading h2 { font-size: 18px; }
}

.communication-attachments {
  margin-top: 26px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.communication-attachments-line {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.communication-attachment-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

/* A card the way Gmail draws one: a paper preview on top, a strip naming the
   file underneath. The whole card is one button that opens the viewer. */
.communication-attachment-card {
  position: relative;
  display: flex;
  width: 182px;
  flex-direction: column;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  text-align: left;
}

.communication-attachment-card:hover { border-color: #9fc0d8; box-shadow: 0 2px 8px rgba(16, 24, 32, 0.1); }

.communication-attachment-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.communication-attachment-thumb {
  display: block;
  height: 108px;
  overflow: hidden;
  background: #eef1f4;
}

.communication-attachment-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.communication-attachment-paper {
  display: grid;
  height: 100%;
  place-items: center;
  background:
    linear-gradient(180deg, #fff 0%, #fff 78%, #f0f3f5 100%);
  border-bottom: 1px solid var(--line);
}

.communication-attachment-paper i {
  display: grid;
  width: 40px;
  height: 48px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(16, 24, 32, 0.08);
  color: #c8362c;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  font-family: var(--font-mono);
}

.communication-attachment-strip {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 8px 10px;
}

.communication-attachment-strip i {
  display: flex;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: #c8362c;
  color: #fff;
  font-size: 7px;
  font-style: normal;
  font-weight: 700;
}

.communication-attachment-strip span {
  overflow: hidden;
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.communication-attachment-note {
  padding: 0 10px 8px;
  color: var(--faint);
  font-size: 10px;
}

.communication-no-attachments { margin: 12px 0 0; color: var(--muted); font-size: 11.5px; }

.communication-sender-review {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin: 18px 0 0;
  padding: 12px;
  border: 1px solid #e7c77d;
  border-radius: 10px;
  background: #fff9e9;
}

.communication-sender-review strong {
  color: #7a4a00;
  font-size: 11.5px;
}

.communication-sender-review p {
  margin: 3px 0 0;
  color: #725f3d;
  font-size: 10.5px;
  line-height: 1.45;
}

.communication-sender-review .button {
  white-space: nowrap;
}

.workspace-email-inbox {
  display: block;
  padding: 18px 20px;
  margin: 0 0 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  overflow-wrap: anywhere;
}
.workspace-email-heading,
.workspace-email-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.workspace-email-heading { justify-content: space-between; gap: 16px; }
.workspace-email-heading > div:first-child { min-width: 0; }
.workspace-email-heading strong { display: block; font-size: 16px; color: var(--ink); }
.workspace-email-inbox p { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.workspace-email-pending { display: flex; align-items: center; gap: 8px; margin: 20px 0 0; font-size: 14px; color: var(--amber); }
.workspace-email-pending span { padding: 2px 7px; border-radius: 6px; background: var(--amber-bg); font-size: 12px; }
.workspace-email-inbox > section { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
.workspace-email-inbox > section > strong { font-size: 14px; }
.workspace-email-inbox details { margin: 8px 0; font-size: 13px; }
.workspace-email-inbox label { font-size: 13px; }
.workspace-email-inbox select { max-width: 100%; margin: 0 8px 8px; padding: 6px; }
.workspace-email-inbox > section .button { margin-right: 6px; margin-bottom: 4px; }
.workspace-email-address-form { display: grid; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.workspace-email-address-form > label { font-weight: 600; }
.workspace-email-address-field { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; max-width: 540px; }
.workspace-email-address-field input { flex: 1; min-width: 120px; width: 240px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; }
.workspace-email-address-field > span { color: var(--muted); font-size: 14px; }
.workspace-email-address-form p { margin: 0; }
.workspace-email-address-form [role="alert"], .workspace-email-setup-error { color: var(--red); }
.communication-from { display: flex; gap: 12px; align-items: baseline; padding: 8px 0; color: var(--muted); font-size: 12px; }
.communication-from strong { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; min-width: 0; }

.communication-sender-review-action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  max-width: 220px;
}

.communication-sender-review-action small {
  color: #725f3d;
  font-size: 10px;
  line-height: 1.45;
  text-align: right;
}

.communication-address-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(238, 242, 245, 0.7);
  font-size: 11px;
  font-weight: 600;
  white-space: normal;
  overflow-wrap: anywhere;
}

.communication-address-chip > span { min-width: 0; }

.communication-address-chip button {
  border: 0;
  padding: 0;
  background: none;
  color: var(--accent, #2e5f8a);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.communication-to-hint {
  display: block;
  margin-top: 5px;
  color: var(--ink-soft, #5c6b7a);
  font-size: 11px;
  line-height: 1.5;
}









/* ==== The attachment viewer ==============================================
   Gmail's model exactly: the file takes the whole screen over a near-black
   backdrop, a slim dark bar carries the way back (top-left), the file's name,
   and its actions (top-right). Esc or the backdrop closes it and whatever was
   underneath -- message or list -- is exactly as you left it. It sits above
   every panel in the app including the compose dock. */
.attachment-viewer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 129;
  background: rgba(13, 17, 22, 0.88);
}

.attachment-viewer {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: flex;
  min-width: 0;
  flex-direction: column;
  pointer-events: none;
}

.attachment-viewer-bar,
.attachment-viewer-body { pointer-events: auto; }

.attachment-viewer-bar {
  display: flex;
  min-height: 56px;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  color: #e8edf2;
}

.attachment-viewer-close,
.attachment-viewer-nav {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #e8edf2;
  cursor: pointer;
  font-size: 19px;
}

.attachment-viewer-close svg { width: 20px; height: 20px; }

.attachment-viewer-close:hover,
.attachment-viewer-nav:hover:not(:disabled) { background: rgba(255, 255, 255, 0.14); }

.attachment-viewer-nav:disabled { opacity: 0.35; cursor: default; }

.attachment-viewer-close:focus-visible,
.attachment-viewer-nav:focus-visible,
.attachment-viewer-action:focus-visible { outline: 2px solid #9ec5ec; outline-offset: 2px; }

.attachment-viewer-ext {
  display: flex;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: #c8362c;
  color: #fff;
  font-size: 7px;
  font-style: normal;
  font-weight: 700;
}

.attachment-viewer-name {
  overflow: hidden;
  max-width: 40vw;
  font-size: 13.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-viewer-spacer { flex: 1; }

.attachment-viewer-count { color: #b8c2cc; font-family: var(--font-mono); font-size: 11px; }

.attachment-viewer-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background: transparent;
  color: #e8edf2;
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
}

.attachment-viewer-action:hover { background: rgba(255, 255, 255, 0.14); }

.attachment-viewer-action svg { width: 15px; height: 15px; }

.attachment-viewer-body {
  display: flex;
  flex: 1;
  min-height: 0;
  align-items: center;
  justify-content: center;
  padding: 0 18px 18px;
}

.attachment-viewer-frame {
  width: min(920px, 94vw);
  height: 100%;
  border: 0;
  border-radius: 6px 6px 0 0;
  background: #fff;
}

.attachment-viewer-image {
  max-width: 94vw;
  max-height: 82vh;
  border-radius: 4px;
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.5);
}

.attachment-viewer-empty {
  display: flex;
  max-width: 420px;
  flex-direction: column;
  gap: 8px;
  padding: 34px 38px;
  border-radius: 12px;
  background: #fff;
  color: var(--muted);
  text-align: center;
}

.attachment-viewer-empty strong { color: var(--ink); font-size: 14px; }

.attachment-viewer-empty p { margin: 0; font-size: 12px; line-height: 1.55; }

/* Compose stays intentionally narrow: shipment request, not free-form mailbox. */
/* A new message docks in the corner and leaves the list working behind it —
   composing is not a decision that should block the page. The supplier
   acknowledgement request stays a modal, because that one is an authorization
   step and deserves the whole screen's attention. */
.communication-compose.is-docked {
  position: fixed;
  right: 20px;
  bottom: 0;
  z-index: 120;
  display: flex;
  width: min(560px, calc(100vw - 32px));
  max-height: min(660px, calc(100dvh - 76px));
  flex-direction: column;
  overflow-y: auto;
  padding: 18px 20px 20px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: var(--surface);
  box-shadow: 0 -2px 10px rgba(16, 24, 32, 0.06), 0 -18px 48px rgba(16, 24, 32, 0.18);
}

.communication-compose.is-docked .modal-head p { display: none; }

.communication-compose.is-docked textarea { min-height: 120px; }

@media (max-width: 680px) {
  .communication-compose.is-docked {
    right: 0;
    left: 0;
    width: 100vw;
    max-height: calc(100dvh - 52px);
    border-right: 0;
    border-left: 0;
    border-radius: 12px 12px 0 0;
  }
}

/* ==== Replying happens inside the message ==== */
.communication-reply {
  margin-top: 18px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}

.communication-reply-to {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
  color: var(--muted);
  font-size: 12px;
}

.communication-reply-to svg { width: 15px; height: 15px; flex: 0 0 15px; }

.communication-reply-to span {
  overflow: hidden;
  color: var(--ink);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.communication-reply textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
  font: 13px/1.55 var(--font-sans);
  resize: vertical;
}

.communication-reply textarea:focus {
  border-color: var(--blue);
  outline: 3px solid rgba(40, 118, 181, 0.13);
}

.communication-reply-error {
  margin: 9px 0 0;
  color: var(--red);
  font-size: 12.5px;
}

.communication-reply-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.communication-reply-note {
  color: var(--faint);
  font-size: 11.5px;
}

.communication-compose-backdrop { z-index: 120; }

.communication-compose {
  width: min(620px, calc(100vw - 28px));
  max-height: min(820px, calc(100dvh - 28px));
  overflow-y: auto;
}

.communication-compose .modal-head { align-items: flex-start; }

.communication-compose .modal-head h2 { margin: 2px 0 0; }

.communication-compose .modal-head p { max-width: 470px; }

.communication-compose-form { padding-top: 8px; }

.communication-compose-form textarea { resize: vertical; }

.communication-recipient-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.communication-recipient-row input { flex: 1 1 auto; min-width: 0; }

.communication-known-email-select {
  flex: 0 0 auto;
  width: auto;
  max-width: min(220px, 38vw);
}

.communication-compose-note {
  padding: 10px 12px;
  border-left: 2px solid #a9c8de;
  background: #f3f8fb;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.communication-document-picker {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fafb;
}

.communication-document-picker legend {
  padding: 0 5px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.communication-document-picker legend span {
  color: var(--faint);
  font-weight: 600;
}

.communication-document-picker.is-loading,
.communication-document-empty,
.communication-compose-source {
  margin: 0;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.45;
}

.communication-document-controls {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(190px, 1.2fr);
  gap: 10px;
}

.communication-document-controls label {
  display: grid;
  gap: 5px;
}

.communication-document-controls label > span {
  color: var(--faint);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.communication-document-list {
  display: grid;
  max-height: 220px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
}

.communication-document-option {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 10px;
  cursor: pointer;
}

.communication-document-option + .communication-document-option {
  border-top: 1px solid var(--line);
}

.communication-document-option:hover { background: #f5f9fc; }

.communication-document-option input { margin: 0; }

.communication-document-option strong,
.communication-document-option small { display: block; }

.communication-document-option strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.communication-document-option small,
.communication-document-option em {
  color: var(--muted);
  font-size: 9.5px;
  font-style: normal;
}

.communication-document-empty { padding: 16px; text-align: center; }

.communication-file-attachments {
  display: grid;
  gap: 8px;
}

.communication-file-dropzone {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: center;
  padding: 12px;
  border: 1.5px dashed var(--line-strong);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition:
    border-color 140ms ease,
    background-color 140ms ease;
}

.communication-file-dropzone:hover,
.communication-file-dropzone.is-drag {
  border-color: #7aa6ca;
  background: #eef5fb;
}

@media (max-width: 640px) {
  .communication-recipient-row {
    display: grid;
  }

  .communication-known-email-select {
    max-width: none;
    width: 100%;
  }
}

.communication-file-dropzone strong {
  color: var(--ink);
  font-size: 11px;
}

.communication-file-dropzone span {
  grid-column: 1;
  color: var(--muted);
  font-size: 9.5px;
  line-height: 1.35;
}

.communication-file-dropzone button {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.communication-file-list {
  display: grid;
  gap: 6px;
}

.communication-file-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
}

.communication-file-chip span {
  min-width: 0;
  flex: 1;
}

.communication-file-chip strong,
.communication-file-chip small {
  display: block;
}

.communication-file-chip strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.communication-file-chip small {
  color: var(--faint);
  font-size: 9.5px;
}

.communication-file-chip button {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.communication-file-chip button:hover {
  background: var(--red-bg);
  color: var(--red);
}

.live-freshness {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  color: var(--muted);
  font: 700 11px/1.2 var(--font-mono);
  cursor: pointer;
}

.live-freshness svg { width: 13px; height: 13px; flex: 0 0 auto; }

/* The control never shrinks and never resizes as its state changes: it is not
   a flex item that gives way, and the label reserves the width of the longest
   of the four states. Narrow topbars get the short label, stable at its own
   width, rather than a squeezed version of the long one. */
.live-freshness { flex: 0 0 auto; }

.live-freshness-label {
  flex: 0 0 auto;
  text-align: left;
  white-space: nowrap;
}

/* One label at one reserved width, everywhere. The verbose form spent 25ch of
   mono to say "0 min ago" and was the widest thing in the header; the compact
   form is just as stable across the four states and leaves the header room. The
   button's aria-label still reads the full sentence. */
.live-freshness-label.is-wide { display: none; }
.live-freshness-label.is-narrow { min-width: 11ch; }

.live-freshness-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--green, #1d8b65);
  box-shadow: 0 0 0 3px rgba(29, 139, 101, 0.12);
  transition: background-color 160ms ease, box-shadow 160ms ease;
}

/* One tone per state, on the dot and on the glyph. */
.live-freshness.is-checking .live-freshness-dot {
  background: var(--blue, #2368a7);
  box-shadow: 0 0 0 3px rgba(35, 104, 167, 0.14);
}

.live-freshness.is-updated .live-freshness-dot {
  background: var(--amber, #b87614);
  box-shadow: 0 0 0 3px rgba(184, 118, 20, 0.16);
}

.live-freshness.is-error .live-freshness-dot {
  background: var(--red);
  box-shadow: 0 0 0 3px rgba(179, 60, 53, 0.16);
}

.live-freshness.is-checking { color: var(--blue, #2368a7); }
.live-freshness.is-updated { color: var(--amber, #b87614); }
.live-freshness.is-error { color: var(--red); }

/* Spin about the middle. transform-box: fill-box measures the ink, so a
   glyph that is symmetric in its box turns without wandering. */
.live-freshness-spin {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.live-freshness.is-checking .live-freshness-spin {
  animation: live-refresh-spin 0.9s linear infinite;
}

@keyframes live-refresh-spin { to { transform: rotate(360deg); } }

/* Reduced motion keeps the state legible without the rotation: the label
   already says "Checking…", so nothing is lost by stilling the glyph. */
@media (prefers-reduced-motion: reduce) {
  .live-freshness .live-freshness-spin { animation: none !important; }
  .live-freshness-dot { transition: none; }
  .live-freshness.is-checking .live-freshness-dot {
    animation: live-refresh-pulse 1.6s ease-in-out infinite;
  }
}

@keyframes live-refresh-pulse {
  50% { opacity: 0.35; }
}

.projects-page,
.home-projects {
  display: grid;
  gap: 12px;
  margin: 18px 0 6px;
}

/* The section title sits on the cards' left edge, at a size that reads as a
   heading, with the link on the same baseline. It is not a card head. */
.home-projects-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
}

.home-projects-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.projects-page { padding: 26px 30px 44px; }

/* The shell body never scrolls; each view scrolls its own content column.
   Projects pages sit directly under .main, so they own the scroll. */
.main > .projects-page {
  flex: 1 1 auto;
  min-height: 0;
  align-content: start;
  overflow-y: auto;
}

.projects-intro {
  max-width: 760px;
  padding: 18px 0 4px;
}

.projects-intro h2 { margin: 6px 0 0; font-size: clamp(24px, 3vw, 38px); }

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 14px;
}

.project-grid.is-home { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.project-card {
  display: grid;
  gap: 13px;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 7px 24px rgba(21, 40, 54, 0.05);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.project-card:hover { border-color: #9fbfd8; transform: translateY(-1px); }
.project-card.is-attention { border-left: 4px solid #d98722; }

.project-card > strong { font-size: 18px; line-height: 1.2; }

.project-card-kicker,
.project-card-health,
.project-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.project-card-kicker {
  color: var(--faint);
  font: 700 9px/1.2 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.project-card-kicker em { font-style: normal; }

.project-card-health b,
.project-card-health i { font-size: 11px; font-style: normal; }
.project-card-health i { color: #9b5c0d; }

.project-card-meta {
  align-items: flex-start;
  color: var(--muted);
  font-size: 10px;
}

.project-card-action {
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.project-card-action.is-needed { color: #9b5c0d; }

.project-detail-page { align-content: start; }

.project-tabs {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
}

.project-tabs button {
  position: relative;
  flex: 0 0 auto;
  padding: 14px 2px 13px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: 800 11px/1.2 var(--font-sans);
}

.project-tabs button::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  background: transparent;
  content: "";
}

.project-tabs button.is-active { color: var(--blue); }
.project-tabs button.is-active::after { background: var(--blue); }

.project-overview,
.project-action-center,
.project-activity {
  display: grid;
  gap: 22px;
}

.project-overview-heading,
.project-orders-heading,
.project-overview-footer,
.project-action-center > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.project-overview-heading h2,
.project-orders-heading h2,
.project-action-center > header h2,
.project-activity h2 {
  margin: 5px 0 3px;
}

.project-overview-heading p,
.project-action-center > header p,
.project-activity .section-heading-row p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.project-attention-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.project-attention-card header p,
.project-attention-description {
  margin: 0;
  color: var(--muted);
  font-size: 10.5px;
}

.project-work-icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #bfd4e7;
  border-radius: 50%;
  color: var(--blue);
  font-size: 17px;
  font-style: normal;
  font-weight: 900;
}

.project-work-icon.is-waiting { color: #7656c3; background: #f4f0ff; }
.project-work-icon.is-needs_you { color: #a96510; background: #fff5e6; }
.project-work-icon.is-resolved { color: #19754f; background: #eaf8f1; }

.project-attention-evidence {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 18px;
  border-block: 1px solid var(--line);
}

.project-attention-evidence div { padding: 10px 4px; }
.project-attention-evidence dt { color: var(--muted); font-size: 9px; }
.project-attention-evidence dd { margin: 3px 0 0; font-weight: 900; }

.project-recommendation {
  align-self: start;
  margin: 12px 18px 0;
  padding: 10px;
  border: 1px solid #f0c982;
  border-radius: 9px;
  background: #fffaf1;
  color: #6d4a18;
  font-size: 10px;
}

.project-attention-description { padding: 6px 18px; }
.project-attention-actions { align-self: end; padding: 14px 18px; }

.project-attention-card > footer button,
.project-action-provenance button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--blue);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
}

.project-overview-orders {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.project-overview-orders article {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.project-order-mark {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  background: #eaf4ff;
  color: var(--blue);
  font-size: 20px;
}

.project-overview-orders article div { display: grid; gap: 3px; }
.project-overview-orders article small { color: var(--muted); }
.project-overview-orders article div > span { color: var(--faint); font-size: 9px; }
.project-overview-orders article > button {
  border: 0;
  background: transparent;
  color: var(--blue);
  cursor: pointer;
  font-size: 24px;
}

.project-overview-footer {
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
}

.project-overview-clear,
.project-action-empty {
  display: grid;
  gap: 5px;
  padding: 28px;
  border: 1px dashed var(--line-strong);
  border-radius: 14px;
  background: #fff;
  color: var(--muted);
}

.project-overview-clear strong,
.project-action-empty h3 { margin: 0; color: var(--ink); }

.project-action-layout {
  display: grid;
  grid-template-columns: minmax(270px, 0.7fr) minmax(500px, 1.5fr);
  min-height: 570px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 9px 28px rgba(24, 45, 62, 0.06);
}

.project-work-queue {
  border-right: 1px solid var(--line);
  background: #fbfcfd;
}

.project-work-queue > h3 {
  margin: 0;
  padding: 17px 18px 10px;
  color: var(--ink);
  font-size: 11px;
}

.project-work-row {
  display: grid;
  width: 100%;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 15px 16px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.project-work-row.is-selected {
  box-shadow: inset 3px 0 var(--blue);
  background: #edf5ff;
}

.project-work-row strong,
.project-work-row small { display: block; }
.project-work-row small { margin-top: 4px; color: var(--muted); font-size: 9.5px; }
.project-work-row > span:last-child { color: var(--blue); font-size: 21px; }
.project-queue-empty { margin: 0; padding: 13px 18px 18px; color: var(--muted); font-size: 10px; }

.project-action-panel {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 25px;
}

.project-action-detail-head > span {
  color: #b54231;
  font: 800 9px/1.3 var(--font-mono);
  letter-spacing: 0.05em;
}

.project-action-detail-head h2 { margin: 9px 0 7px; font-size: 22px; }
.project-action-detail-head p,
.project-action-explanation { color: var(--muted); font-size: 11px; }

.project-action-comparison {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
  align-items: stretch;
  margin: 16px 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
}

.project-action-comparison div { display: grid; gap: 8px; padding: 17px; }
.project-action-comparison div:last-child { border-left: 1px solid var(--line); }
.project-action-comparison span { color: var(--muted); font-size: 10px; }
.project-action-comparison strong { font-size: 22px; }
.project-action-comparison small { color: var(--faint); font-size: 9px; }
.project-action-comparison > b {
  z-index: 1;
  display: grid;
  width: 34px;
  height: 34px;
  align-self: center;
  margin-inline: -17px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: #fff;
  color: var(--blue);
}

.project-action-options {
  display: grid;
  gap: 8px;
  margin: 16px 0;
  padding: 0;
  border: 0;
}

.project-action-options legend { margin-bottom: 9px; font-weight: 900; }
.project-action-options button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-weight: 850;
  text-align: left;
}

.project-action-options button.is-recommended { border-color: var(--blue); }
.project-action-options button em {
  padding: 5px 9px;
  border-radius: 999px;
  background: #e8f2ff;
  color: var(--blue);
  font-size: 9px;
  font-style: normal;
}

.project-action-options button i { color: var(--blue); font-size: 20px; font-style: normal; }
.project-action-options button:disabled { cursor: not-allowed; opacity: 0.48; }

.project-action-provenance {
  margin: auto -25px -25px;
  padding: 15px 25px;
  border-top: 1px solid var(--line);
  background: #f8fafc;
  color: var(--muted);
  font-size: 9.5px;
}

.project-action-form { display: grid; gap: 14px; }
.project-action-intro { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.project-action-intro strong { font-size: 18px; }
.project-action-intro p { margin: 6px 0 0; color: var(--muted); font-size: 11px; }
.project-action-form label { display: grid; gap: 6px; }
.project-action-form label > span { color: var(--muted); font-size: 10px; font-weight: 850; }
.project-action-form input,
.project-action-form select,
.project-action-form textarea {
  width: 100%;
  padding: 10px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

.project-action-form textarea { resize: vertical; }
.project-action-form-actions { display: flex; gap: 10px; }
.project-source-boundary {
  padding: 11px 13px;
  border-left: 3px solid var(--blue);
  background: #f4f8fc;
  color: var(--muted);
  font-size: 10px;
}

.project-action-question {
  margin: 18px 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafc;
}

.project-action-question p { margin-bottom: 0; color: var(--muted); }

.project-activity-list { display: grid; gap: 10px; }
.project-activity-list article {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.project-activity-list article > span { color: var(--blue); font-weight: 850; }
.project-activity-list small { color: var(--muted); }

.project-brief,
.vendor-order-card,
.project-issues {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

.project-brief {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
  gap: 28px;
  padding: 24px;
}

.project-brief.is-attention { border-left: 5px solid #d98722; }
.project-brief h2 { margin: 6px 0; }
.project-brief p { margin: 0; color: var(--muted); }

.project-brief dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.project-brief dt {
  color: var(--faint);
  font: 700 8.5px/1.2 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.project-brief dd { margin: 5px 0 0; font-size: 12px; font-weight: 800; }

.project-orders { display: grid; gap: 12px; }
.vendor-order-card { padding: 18px; }

.vendor-order-card header,
.vendor-order-metrics {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.vendor-order-card h3 { margin: 4px 0; }
.vendor-order-card header p { margin: 0; color: var(--muted); }

.vendor-order-metrics {
  margin: 14px 0;
  padding: 12px 0;
  border-block: 1px solid var(--line);
  color: var(--muted);
  font-size: 10.5px;
}

.vendor-order-metrics b { color: var(--ink); }
.vendor-order-metrics .is-attention { color: #9b5c0d; }

.vendor-order-shipments { display: grid; gap: 8px; }
.vendor-order-shipments button {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafb;
  text-align: left;
  cursor: pointer;
}

.vendor-order-shipments button span { color: var(--muted); font-size: 10px; }

.project-issues { display: grid; gap: 0; overflow: hidden; }
.project-issues .section-heading-row { padding: 18px; }
.project-issues > article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
}
.project-issues article p { margin: 4px 0 0; color: var(--muted); font-size: 10.5px; }

.project-inline-action {
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.project-inline-action.is-heading {
  position: relative;
  margin: 0;
  border: 0;
  padding: 0;
}

.project-inline-action summary {
  width: max-content;
  color: var(--blue);
  cursor: pointer;
  font-size: 10.5px;
  font-weight: 800;
  list-style-position: inside;
}

.project-inline-action.is-heading[open] summary { margin-left: auto; }

.project-inline-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fafb;
}

.project-inline-action.is-heading .project-inline-form {
  position: absolute;
  z-index: 20;
  top: 26px;
  right: 0;
  width: min(620px, calc(100vw - 48px));
  box-shadow: 0 14px 40px rgba(21, 40, 54, 0.16);
}

.project-inline-form label { display: grid; gap: 5px; }
.project-inline-form label > span { color: var(--muted); font-size: 9.5px; font-weight: 800; }
.project-inline-form label small { color: var(--faint); font-weight: 600; }
.project-inline-form input,
.project-inline-form select,
.project-inline-form textarea {
  width: 100%;
  min-height: 38px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

.project-inline-form textarea { resize: vertical; }
.project-inline-form .is-wide { grid-column: 1 / -1; }
.project-inline-form .button { width: max-content; }

.swz-project-context {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

@media (max-width: 900px) {
  .project-grid.is-home,
  .project-brief { grid-template-columns: 1fr; }
  .project-brief dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .project-attention-grid,
  .project-overview-orders { grid-template-columns: 1fr; }
  .project-action-layout { grid-template-columns: minmax(240px, 0.75fr) minmax(380px, 1.25fr); }
}

@media (max-width: 640px) {
  .projects-page { padding: 18px 14px 34px; }
  .projects-topbar .live-freshness { grid-column: 1 / -1; justify-self: start; }
  .project-grid,
  .project-grid.is-home { grid-template-columns: 1fr; }
  .project-card-meta,
  .project-card-health,
  .vendor-order-card header,
  .vendor-order-metrics,
  .vendor-order-shipments button { align-items: flex-start; flex-direction: column; }
  .project-brief dl,
  .swz-project-context,
  .communication-document-controls,
  .communication-file-dropzone,
  .project-inline-form { grid-template-columns: 1fr; }
  .communication-file-dropzone button { grid-column: 1; grid-row: auto; justify-self: start; }
  .project-inline-form .is-wide { grid-column: auto; }
  .communication-document-option { grid-template-columns: 18px minmax(0, 1fr); }
  .communication-document-option em { grid-column: 2; }
  .project-tabs { gap: 20px; }
  .project-overview-heading,
  .project-orders-heading,
  .project-overview-footer,
  .project-action-center > header { align-items: flex-start; flex-direction: column; }
  .project-action-layout { display: flex; min-height: 0; flex-direction: column; }
  .project-work-queue { border-right: 0; border-bottom: 1px solid var(--line); }
  .project-action-panel { min-height: 520px; padding: 18px; }
  .project-action-provenance { margin: auto -18px -18px; padding-inline: 18px; }
  .project-action-comparison { grid-template-columns: 1fr; }
  .project-action-comparison > b { margin: -17px auto; transform: rotate(90deg); }
  .project-action-comparison div:last-child { border-top: 1px solid var(--line); border-left: 0; }
  .project-activity-list article { grid-template-columns: 1fr; gap: 4px; }
}

@keyframes panel-slide-in {
  from { opacity: 0; transform: translateX(28px); }

  to { opacity: 1; transform: translateX(0); }
}

@keyframes communication-backdrop-in {
  from { opacity: 0; }

  to { opacity: 1; }
}

@media (max-width: 1000px) {
  /* The sender narrows before the subject does — the subject is what you scan. */
  .comm-open {
    grid-template-columns: 132px minmax(0, 1fr) 84px 20px 56px;
    gap: 10px;
  }

}

@media (max-width: 900px) {
  .communications-page { padding: 22px; }

}

@media (max-width: 760px) {
  .attachment-viewer-name { max-width: 30vw; }

  .attachment-viewer-action span { display: none; }

  .attachment-viewer-action { min-width: 38px; justify-content: center; padding: 0; border: 0; }

  /* Open in Documents has no icon; on a phone the viewer keeps Download and
     the close control, the same trim Gmail applies. */
  .attachment-viewer-action:not([href]) { display: none; }

  .attachment-viewer-body { padding: 0 8px 8px; }

  .attachment-viewer-frame { width: 100%; }
}

@media (max-width: 680px) {
  .communications-page { padding: 18px; }

  .communications-search { width: 100%; }

  /* On a phone the row becomes two lines: sender and time, then the subject.
     The shipment chip goes — you reach a shipment from the message, not the
     row — and the paperclip goes with it, since the chips already say it. */
  .comm-open {
    grid-template-columns: minmax(0, 1fr) 56px;
    gap: 4px 10px;
    padding: 8px 12px 9px 4px;
  }

  .comm-from { grid-row: 1; }

  .comm-when { grid-row: 1; }

  .comm-mid { grid-column: 1 / -1; grid-row: 2; }

  .comm-ord,
  .comm-clip { display: none; }

  .comm-select { padding-left: 12px; }

  .comm-chips { margin-left: 4px; margin-right: 12px; }

  .shipment-communications-head { align-items: flex-start; flex-direction: column; }

  .shipment-communications-actions { width: 100%; justify-content: space-between; }

  .communication-message-pane { padding: 20px 18px 30px; }


}

@media (prefers-reduced-motion: reduce) {
  .communication-row { transition: none; }
}

/* ==== Shipment participants ========================================== */
/* A shipment roster is an operating relationship, not another KPI grid.
   Keep it as one quiet ledger with a focused inspector for changes. */

.workspace-detail .shipment-participants {
  margin-top: 16px;
  padding: 18px;
  border: 1px solid var(--workspace-card-line);
  border-radius: var(--workspace-radius);
  background: var(--surface);
  box-shadow: var(--workspace-shadow);
}

.shipment-participants-head {
  align-items: flex-end;
  margin-bottom: 15px;
}

.shipment-participants-head h3 {
  margin: 1px 0 0;
  font-size: 16px;
}

.shipment-participants-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11.5px;
}

.shipment-participant-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.participant-summary {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 22px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 10.5px;
}

.participant-summary span { white-space: nowrap; }

.participant-summary strong {
  margin-right: 3px;
  color: var(--ink);
  font-size: 12px;
}

.participant-summary .is-attention,
.participant-summary .is-attention strong { color: #a35b00; }

.participant-summary .is-missing,
.participant-summary .is-missing strong { color: #7a674b; }

.participant-setup-prompt {
  width: 100%;
  display: grid;
  grid-template-columns: 28px auto minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin: 1px 0 8px;
  padding: 10px 12px;
  border: 1px solid #efd7ac;
  border-radius: 9px;
  background: #fffaf1;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition:
    border-color 140ms ease,
    background-color 140ms ease,
    transform 140ms ease;
}

.participant-setup-prompt:hover {
  border-color: #dfa847;
  background: #fff8e8;
  transform: translateY(-1px);
}

.participant-setup-prompt > span {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff0d1;
  color: #9a5700;
  font-size: 11px;
  font-weight: 800;
}

.participant-setup-prompt strong { font-size: 11.5px; }

.participant-setup-prompt small {
  color: #7a674b;
  font-size: 10.5px;
  line-height: 1.4;
}

.participant-setup-prompt i {
  color: #a35b00;
  font-style: normal;
}

.participant-list {
  border-top: 1px solid var(--line);
}

.participant-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 68px;
  border-bottom: 1px solid var(--line);
  transition: background-color 140ms ease;
}

.participant-row:last-child { border-bottom: 0; }

.participant-row:hover { background: #fafbfd; }

.participant-row.is-suggested {
  margin: 0 -8px;
  padding: 0 8px;
  border-bottom-color: #f0dfc1;
  background: #fffdf9;
}

.participant-row.is-suggested::before {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 2px;
  border-radius: 2px;
  background: #d88910;
  content: "";
}

.participant-row.is-ended { opacity: 0.7; }

.participant-row-main {
  min-width: 0;
  display: grid;
  grid-template-columns: 36px minmax(180px, 1.35fr) minmax(140px, 0.9fr) minmax(110px, 0.75fr);
  gap: 10px 13px;
  align-items: center;
  padding: 11px 8px 11px 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.participant-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #dbe4ea;
  border-radius: 9px;
  background: #f3f7fa;
  color: #35536b;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.participant-row.is-suggested .participant-avatar {
  border-color: #efd7ac;
  background: #fff5df;
  color: #9a5700;
}

.participant-identity,
.participant-assignment,
.participant-related {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.participant-identity strong,
.participant-assignment strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.participant-assignment strong { color: #394b59; }

.participant-row.has-missing-role .participant-assignment strong { color: #9a5700; }

.participant-identity small,
.participant-assignment small,
.participant-related small {
  overflow: hidden;
  color: var(--muted);
  font-size: 9.75px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.participant-row-state {
  min-width: 155px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 10px 0 10px 12px;
}

.participant-status {
  display: inline-flex;
  min-height: 23px;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  white-space: nowrap;
}

.participant-status.is-confirmed { background: var(--green-bg); color: var(--green); }

.participant-status.is-suggested { background: #fff1d5; color: #965500; }

.participant-status.is-ended { background: var(--surface-soft); color: var(--muted); }

.participant-row-chevron {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
}

.participant-row-chevron:hover { background: var(--surface-soft); color: var(--blue); }

.participant-empty {
  margin: 0;
  padding: 22px 2px 6px;
  color: var(--muted);
  font-size: 11.5px;
}

div.participant-empty { display: grid; gap: 5px; }

.participant-empty strong { color: var(--ink); font-size: 12px; }

.participant-empty p { max-width: 620px; margin: 0; line-height: 1.5; }

.participant-empty .text-button { width: fit-content; margin-top: 5px; color: var(--blue); }

.participant-load-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  padding: 9px 11px;
  border-radius: 8px;
  background: var(--red-bg);
  color: var(--red);
  font-size: 10.5px;
}

.participant-load-error .text-button { color: var(--red); }

/* Inline note shown in the drawer when a save fails; edits stay in place. */
.participant-form-error {
  margin: 0;
  padding: 9px 11px;
  border-radius: 8px;
  background: var(--red-bg);
  color: var(--red);
  font-size: 10.5px;
  line-height: 1.5;
}

body.participant-drawer-open { overflow: hidden; }

.participant-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 112;
  background: rgba(13, 20, 27, 0.42);
}

/* Entrance runs only on the closed → open transition; in-place content
   rewrites while the drawer stays open must not replay it. */
.participant-drawer-backdrop.is-entering {
  animation: communication-backdrop-in 160ms ease both;
}

.participant-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 113;
  width: min(690px, 96vw);
  overflow-y: auto;
  background: var(--surface);
  box-shadow: -20px 0 64px rgba(16, 24, 32, 0.24);
}

.participant-drawer.is-entering {
  animation: panel-slide-in 180ms ease both;
}

.participant-drawer-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
}

.participant-drawer-head span {
  color: var(--faint);
  font-size: 9.5px;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.participant-drawer-head h2 {
  margin: 3px 0 0;
  font-size: 19px;
  letter-spacing: -0.015em;
}

.participant-drawer-close {
  width: 34px;
  height: 34px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
}

.participant-drawer-close:hover { border-color: var(--line); color: var(--ink); }

.participant-drawer-body { padding: 22px 24px 42px; }

/* Workspace section rail: one compact row, bounded by a hairline so it never
   reads as a floating band. Total height stays under 48px. */
/* Station-block tabs: six equal columns across the full content width.
   The active section is a solid tinted station with a squared blue floor;
   hover washes a column gray. Counts are superscript mono figures and
   attention is a quiet amber dot, so nothing here reads as a button. */
.workspace-rail {
  position: sticky;
  top: var(--workspace-rail-top, 0px);
  z-index: 24;
  display: flex;
  align-items: stretch;
  margin: 0 0 16px;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--line);
  background: var(--workspace-canvas, var(--bg, #dfe4e7));
}

.workspace-rail::-webkit-scrollbar { display: none; }

/* The scrollbar is hidden, so overflow needs another affordance: edges
   fade only on the side where more sections are hiding. */
.workspace-rail.has-more-right {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
}

.workspace-rail.has-more-left {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px);
  mask-image: linear-gradient(90deg, transparent, #000 44px);
}

.workspace-rail.has-more-left.has-more-right {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent);
}

.workspace-rail-item {
  position: relative;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 15px 6px 18px;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 15px;
  font-weight: 550;
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
  transition: color 140ms ease, background 180ms ease;
}

.workspace-rail-item:hover:not(.is-active) {
  color: var(--ink);
  background: rgba(16, 24, 32, 0.035);
}

.workspace-rail-item:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -3px;
  border-radius: 8px;
}

.workspace-rail-item.is-active {
  color: var(--blue, #2368a7);
  font-weight: 650;
  background: var(--blue-bg, #eaf2fb);
  box-shadow: inset 0 -3px 0 var(--blue, #2368a7);
}

.workspace-rail-item sup {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  color: var(--faint);
  transform: translateY(-4px);
}

.workspace-rail-item.is-active sup {
  color: var(--blue, #2368a7);
  font-weight: 600;
}

.workspace-rail-item i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--amber);
  transform: translateY(-7px);
}

@media (max-width: 900px) {
  /* Narrow screens give up equal columns for a scrollable left-aligned
     row; the station treatment itself stays. */
  .workspace-rail-item {
    flex: none;
    padding: 12px 14px 14px;
    font-size: 14px;
  }
}

/* Documents on the route: stage badges + unplaced tray */
.journey-stage-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.journey-stage-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface, #fff);
  color: var(--ink, #22303c);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.journey-stage-chip:hover,
.journey-stage-chip:focus-visible {
  border-color: var(--ink-soft, #5c6b7a);
}

.journey-stage-chip b {
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(46, 122, 84, 0.12);
  color: #23623f;
  font-size: 11px;
  text-align: center;
}

.journey-stage-chip.is-attention b {
  background: #f6e8c8;
  color: #7a4a00;
}

.journey-unplaced {
  margin-top: 12px;
  font-size: 12px;
  color: var(--ink-soft, #5c6b7a);
}

.journey-unplaced summary {
  cursor: pointer;
  width: fit-content;
}

.journey-unplaced ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.journey-unplaced li button {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--ink, #22303c);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.journey-unplaced li button:hover,
.journey-unplaced li button:focus-visible {
  background: rgba(238, 242, 245, 0.9);
}

.journey-unplaced li button span {
  color: var(--ink-soft, #5c6b7a);
  font-size: 11px;
  white-space: nowrap;
}

.journey-unplaced li button em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 650;
  white-space: nowrap;
}

.journey-unplaced li button em.is-attention {
  color: #7a4a00;
  background: #f6e8c8;
  border-radius: 999px;
  padding: 1px 7px;
}

.journey-unplaced li button i {
  margin-left: auto;
  color: var(--ink-faint, #8494a5);
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.participant-readonly-note,
.participant-suggestion-note,
.participant-ended-note {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 19px;
  padding: 12px 13px;
  border: 1px solid #efd7ac;
  border-radius: 9px;
  background: #fffaf1;
}

.participant-readonly-note {
  border-color: #cbd8e2;
  background: #f5f8fa;
}

.participant-readonly-note > span {
  width: 25px;
  height: 25px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: #e6eef4;
  color: #35536b;
  font-size: 10px;
}

.participant-readonly-note strong {
  display: block;
  color: var(--ink);
  font-size: 11.5px;
}

.participant-readonly-note p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.45;
}

.participant-suggestion-note > span {
  width: 25px;
  height: 25px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: #ffecc8;
  color: #945500;
  font-size: 11px;
  font-weight: 800;
}

.participant-suggestion-note strong,
.participant-ended-note strong { display: block; color: var(--ink); font-size: 11.5px; }

.participant-suggestion-note p,
.participant-ended-note span {
  margin: 3px 0 0;
  color: #776447;
  font-size: 10.5px;
  line-height: 1.45;
}

.participant-ended-note {
  display: grid;
  gap: 2px;
  border-color: var(--line);
  background: var(--surface-soft);
}

.participant-ended-note span { color: var(--muted); }

.participant-form { gap: 15px; }

.participant-form [hidden] { display: none; }

.participant-field-hint {
  color: var(--faint);
  font-size: 9.75px;
  line-height: 1.4;
}

.participant-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.participant-form .field label span { color: var(--faint); font-weight: 550; }

.participant-form input:disabled,
.participant-form select:disabled { background: var(--surface-soft); color: var(--muted); }

.participant-drawer.is-readonly .participant-scope label {
  cursor: default;
}

.participant-scope {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.participant-scope legend {
  grid-column: 1 / -1;
  margin-bottom: -1px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.participant-scope label {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.participant-scope label:has(input:checked) {
  border-color: #8fb7df;
  background: #f4f9fe;
}

.participant-scope input { margin-top: 2px; accent-color: var(--blue); }

.participant-scope span { min-width: 0; display: grid; gap: 2px; }

.participant-scope strong { color: var(--ink); font-size: 10.5px; }

.participant-scope small { color: var(--muted); font-size: 9.5px; line-height: 1.35; }

.participant-form-section {
  display: grid;
  gap: 11px;
  margin-top: 1px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}

.participant-form-section h3 { margin: 0; font-size: 12px; }

.participant-form-section > div > p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 10.25px;
}

.participant-form-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

/* Review verbs stay reachable without scrolling: the bar sticks to the
   drawer's bottom edge while the suggestion form is in view. */
.participant-form-actions.is-sticky {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: block;
  margin: 14px -24px 0;
  padding: 12px 24px 16px;
  background: var(--surface, #fff);
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 24px rgba(11, 19, 24, 0.06);
}

.participant-review-verbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.participant-review-consequence {
  margin: 8px 0 0;
  color: var(--ink-soft, #5c6b7a);
  font-size: 11px;
  line-height: 1.5;
}

/* ---- Review mode: flight-card suggestion drawer ---- */

.participant-drawer-head.is-review {
  display: flex;
  align-items: center;
  gap: 8px;
}

.participant-nav {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
}

.participant-nav:hover { color: var(--ink); border-color: var(--faint); }

.participant-step-label {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.participant-drawer-head.is-review .participant-drawer-close { margin-left: auto; }

.participant-kicker {
  display: block;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.participant-review-form .participant-party-input {
  width: 100%;
  margin: 4px 0 0 -5px;
  padding: 2px 5px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 23px;
  font-weight: 650;
  letter-spacing: -0.015em;
}

.participant-review-form .participant-party-input:hover { border-color: var(--line); }

.participant-review-form .participant-party-input:focus {
  outline: none;
  border-color: var(--blue);
  background: var(--surface);
}

.participant-party-hint {
  margin: 3px 0 14px;
  color: var(--faint);
  font-size: 12px;
}

.participant-evidence-line.is-chip summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}

.participant-evidence-line.is-chip summary b {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--green-bg, #eaf6f0);
  color: var(--green, #1f7a50);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.participant-evidence-line.is-chip summary span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.participant-scope.is-seg { display: block; }

.participant-scope-seg {
  display: flex;
  min-height: 40px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #f2f5f8;
}

.participant-scope-seg label {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  padding: 0 6px;
  border: 0;
  border-radius: 7px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 550;
  white-space: nowrap;
  cursor: pointer;
}

.participant-scope-seg input {
  position: absolute;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.participant-scope-seg label:has(input:checked) {
  border: 0;
  background: var(--surface);
  color: var(--ink);
  font-weight: 650;
  box-shadow: 0 1px 2px rgba(16, 24, 32, 0.1);
}

.participant-scope-seg label:has(input:focus-visible) {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

.participant-contact-fold {
  margin-top: 14px;
  border: 1px dashed var(--line);
  border-radius: 9px;
}

.participant-contact-fold summary {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 13px;
  color: var(--muted);
  font-weight: 550;
  cursor: pointer;
  list-style: none;
}

.participant-contact-fold summary::-webkit-details-marker { display: none; }

.participant-contact-fold summary:hover { color: var(--ink); }

.participant-contact-fold summary b { color: var(--blue); font-weight: 600; }

.participant-contact-fold summary i { color: var(--faint); font-style: normal; font-weight: 500; }

.participant-contact-fold[open] summary { border-bottom: 1px dashed var(--line); }

.participant-contact-fold .participant-form-grid { padding: 12px 13px; }

.participant-audit-line {
  margin: 18px 0 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Review mode is a flex column so the verdict bar pins to the drawer's
   bottom edge even when the form is short. */
.participant-drawer.is-review {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.participant-drawer.is-review .participant-drawer-head { flex: none; position: static; }

.participant-drawer.is-review .participant-drawer-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.participant-review-foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid var(--line);
  background: #fbfcfd;
}

.participant-review-foot .participant-later { margin-left: auto; }

.participant-flabel {
  display: block;
  margin: 18px 0 8px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.participant-role-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.participant-role-chips label {
  position: relative;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 550;
  white-space: nowrap;
  cursor: pointer;
}

.participant-role-chips label:hover {
  border-color: var(--faint);
  color: var(--ink);
}

.participant-role-chips input {
  position: absolute;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.participant-role-chips label:has(input:checked) {
  border-color: var(--blue);
  background: var(--blue-bg);
  color: var(--blue);
  font-weight: 650;
}

.participant-role-chips label:has(input:focus-visible) {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.participant-other-role-field { margin-top: 10px; }

.participant-evidence-line {
  margin: 0 0 16px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(238, 242, 245, 0.6);
  font-size: 12px;
}

.participant-evidence-line summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink, #22303c);
}

.participant-evidence-line dl {
  margin: 10px 0 0;
  display: grid;
  gap: 6px;
}

.participant-evidence-line dl div {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 8px;
}

.participant-evidence-line dt {
  color: var(--ink-soft, #5c6b7a);
}

.participant-evidence-line dd {
  margin: 0;
}

.participant-evidence-line > p {
  margin: 8px 0 0;
  color: var(--ink-soft, #5c6b7a);
  font-size: 11px;
}

.participant-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: 22px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.participant-links > div:not(.participant-link-actions) {
  display: grid;
  gap: 3px;
  padding-right: 14px;
}

.participant-links > div + div:not(.participant-link-actions) {
  padding-left: 14px;
  border-left: 1px solid var(--line);
}

.participant-links span { color: var(--muted); font-size: 9.75px; }

.participant-links strong { color: var(--ink); font-size: 16px; }

.participant-link-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 13px;
}

.participant-link-actions .text-button { color: var(--blue); }

.participant-links-note {
  grid-column: 1 / -1;
  margin: 11px 0 0;
  color: var(--faint);
  font-size: 9.5px;
  line-height: 1.45;
}

.participant-lifecycle,
.participant-provenance {
  display: grid;
  gap: 13px;
  margin-top: 22px;
}

.participant-lifecycle h3,
.participant-provenance h3 { margin: 2px 0 0; font-size: 13px; }

.participant-lifecycle dl,
.participant-provenance dl { display: grid; gap: 8px; margin: 0; }

.participant-lifecycle dl > div,
.participant-provenance dl > div {
  display: grid;
  grid-template-columns: 125px minmax(0, 1fr);
  gap: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.participant-lifecycle dt,
.participant-provenance dt { color: var(--muted); font-size: 10px; }

.participant-lifecycle dd,
.participant-provenance dd {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
  color: var(--ink);
  font-size: 10.5px;
}

.participant-provenance dd span {
  padding: 3px 6px;
  border-radius: 5px;
  background: var(--surface-soft);
}

.participant-lifecycle > p,
.participant-provenance > p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.participant-lifecycle-actions {
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.participant-lifecycle-actions .text-button { color: #a64a40; font-size: 10.5px; }

.participant-lifecycle-actions p {
  margin: 5px 0 0;
  color: var(--faint);
  font-size: 9.75px;
  line-height: 1.45;
}

@media (max-width: 900px) {
  .participant-row-main {
    grid-template-columns: 36px minmax(160px, 1.2fr) minmax(120px, 0.8fr);
  }

  .participant-related { display: none; }
}

@media (max-width: 680px) {
  .workspace-detail .shipment-participants { padding: 15px; }

  .shipment-participants-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .shipment-participant-actions { width: 100%; flex-wrap: wrap; }

  .participant-summary { flex-wrap: wrap; gap: 8px 16px; }

  .participant-setup-prompt {
    grid-template-columns: 28px minmax(0, 1fr) auto;
  }

  .participant-setup-prompt small { grid-column: 2 / -1; }

  .participant-row {
    grid-template-columns: minmax(0, 1fr);
    padding: 6px 0 8px;
  }

  .participant-row.is-suggested { padding-right: 8px; padding-left: 8px; }

  .participant-row-main {
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 7px 0;
  }

  .participant-assignment { grid-column: 2; }

  .participant-row-state {
    min-width: 0;
    justify-content: flex-start;
    padding: 0 0 2px 44px;
  }

  .participant-drawer { width: 100vw; }

  .participant-drawer-head { padding: 12px 16px; }

  .participant-drawer-body { padding: 18px 16px 34px; }

  .participant-form-grid,
  .participant-scope { grid-template-columns: minmax(0, 1fr); }

  .participant-link-actions { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .participant-row,
  .participant-setup-prompt { transition: none; }

  .participant-drawer.is-entering,
  .participant-drawer-backdrop.is-entering { animation: none; }
}

/* ==== Opening a shipment =================================================
   The click is acknowledged on the row in the same frame, and the workspace
   shows a shell while three requests land, so the operator is never left
   wondering whether the click registered. */

[data-shipment-id].is-opening {
  position: relative;
  background: var(--blue-bg, #eaf2fb);
  box-shadow: inset 3px 0 0 var(--blue, #2368a7);
  cursor: progress;
}

[data-shipment-id].is-opening::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border: 2px solid var(--line-strong, #b8c3cb);
  border-top-color: var(--blue, #2368a7);
  border-radius: 50%;
  animation: shipment-open-spin 0.8s linear infinite;
}

main.detail.shipment-opening {
  display: grid;
  align-content: start;
  gap: 20px;
  padding: 22px 32px 48px;
}

.shipment-opening-bar {
  display: flex;
  align-items: center;
}

.shipment-opening-inner {
  display: grid;
  justify-items: center;
  gap: 9px;
  max-width: 940px;
  width: 100%;
  margin: 0 auto;
  padding: 34px 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 6px 20px rgba(16, 24, 32, 0.05);
  text-align: center;
}

.shipment-opening-inner strong {
  font-size: 16px;
  font-weight: 650;
}

.shipment-opening-inner p {
  margin: 0;
  max-width: 46ch;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.shipment-opening-spinner {
  width: 26px;
  height: 26px;
  border: 2.5px solid var(--line, #c8d1d7);
  border-top-color: var(--blue, #2368a7);
  border-radius: 50%;
  animation: shipment-open-spin 0.8s linear infinite;
}

.shipment-opening-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--red-bg, #fbefed);
  color: var(--red);
}

.shipment-opening-mark svg { width: 21px; height: 21px; }

.shipment-opening-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.shipment-opening-skeleton {
  display: grid;
  gap: 12px;
  max-width: 940px;
  width: 100%;
  margin: 0 auto;
}

.shipment-opening-skeleton span {
  height: 76px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(
    90deg,
    #dde4e9 25%,
    #f3f7f9 37%,
    #dde4e9 63%
  );
  background-size: 400% 100%;
  animation: shipment-open-sheen 1.5s ease-in-out infinite;
}

@keyframes shipment-open-spin { to { transform: rotate(360deg); } }
@keyframes shipment-open-sheen { to { background-position: -135% 0; } }

@media (prefers-reduced-motion: reduce) {
  [data-shipment-id].is-opening::after,
  .shipment-opening-spinner { animation-duration: 2.4s; }
  .shipment-opening-skeleton span {
    animation: none;
    background: var(--surface-soft, #edf1f3);
  }
}

@media (max-width: 720px) {
  main.detail.shipment-opening { padding: 16px 14px 28px; }
  .shipment-opening-inner { padding: 26px 16px; }
  .shipment-opening-skeleton span { height: 64px; }
}


/* ==== Tables between the phone card and the full desktop grid =============
   Both evidence tables carry a fixed min-width wider than the space a sidebar
   leaves on a laptop or a tablet: shipments needs 1120px and does not get it
   until about 1424px, documents needs 1000px against a 946px page. The result
   was a horizontal scroll with no affordance -- the row ended convincingly at
   Destination, and Progress and ETA were simply gone.

   So the trailing columns fold onto a second line under the ones they belong
   with, carrying the column name the phone layout already gives them. Nothing
   is hidden, and from roughly 970px up neither table scrolls at all. */

/* Each band sits directly above that table's existing card layout -- shipments
   turns into labelled cards below 1181px, documents below 901px -- and reaches
   up to the width where the full grid finally fits: shipments needs 1142px of
   grid and a sidebar leaves it that only above 1500px, documents needs 1000px
   and gets it from about 1310px. */
@media (min-width: 901px) and (max-width: 1309px) {
  .files-table:not(.is-reference) .files-table-head,
  .files-table:not(.is-reference) .file-row {
    min-width: 0;
    row-gap: 4px;
    grid-template-columns:
      minmax(150px, 2fr) 96px minmax(112px, 1.2fr) minmax(86px, 1fr) 96px;
  }

  .files-table:not(.is-reference) .files-table-head > [data-col="received"] {
    display: none;
  }

  .files-table:not(.is-reference) .file-row > .file-row-when {
    grid-column: 4 / -1;
    grid-row: 2;
    display: flex;
    align-items: baseline;
    gap: 7px;
    padding-top: 2px;
  }

  .files-table:not(.is-reference) .file-row > .file-row-when::before {
    content: attr(data-label);
  }
}

/* Below about 970px even the folded grid runs out of room, and there the scroll
   has to be visible. These four layers are the standard local/scroll pairing: a
   shadow paints on whichever edge still has content behind it and disappears at
   the ends, so a table that fits shows nothing at all. */
.shipments-table,
.files-table:not(.is-reference) {
  background-color: var(--surface);
  background-image:
    linear-gradient(to right, var(--surface) 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to left, var(--surface) 30%, rgba(255, 255, 255, 0)),
    radial-gradient(farthest-side at 0 50%, rgba(16, 24, 32, 0.16), rgba(16, 24, 32, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(16, 24, 32, 0.16), rgba(16, 24, 32, 0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 34px 100%, 34px 100%, 13px 100%, 13px 100%;
  background-attachment: local, local, scroll, scroll;
}


/* ==== Folded column labels ================================================
   Every table in the app reduces the same way: the trailing columns leave the
   row and take a line of their own, with the column name in front of the
   value. That label was written out twelve times across five components and
   rendered five different ways -- 9px, 9.5px and 10px; weights 650, 800; with
   and without letter-spacing -- so the same idea looked different on Shipments,
   Documents, Admin and Home, sometimes on one page at two widths.

   The type is set once, here. The media queries below decide only *where* a
   label appears, by setting content. A ::before with no content generates no
   box, so this rule is inert everywhere else. */
.file-table-row > div:not(.file-primary):not(.file-actions)::before,
.external-event-row > div:not(.external-event-primary)::before,
.admin-table-row > div::before,
.home-cell::before,
.file-row > span:not(.file-row-primary):not([data-label="Status"])::before,
.files-table:not(.is-reference) .file-row > .file-row-when::before {
  color: var(--faint);
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ==== Touch targets ====================================================
   A 44px minimum wherever the pointer is coarse -- phone and tablet, never a
   mouse -- so none of this changes desktop density. It sits last in the file
   deliberately: these are overrides, and several of the controls below are
   sized by later rules elsewhere. Checkboxes grow their own box because an
   <input> cannot carry a pseudo-element to expand into; their wrappers are
   labels so the whole cell forwards the click natively. */

@media (pointer: coarse) {
  .shipment-select-cell,
  .comm-select,
  .tracking-select-all,
  .tracking-card-selector {
    min-height: 44px;
  }

  .shipment-select-cell,
  .comm-select,
  .tracking-select-all,
  .tracking-card-selector {
    min-width: 44px;
  }

  .shipment-select-checkbox,
  .comm-select input,
  .tracking-card-selector input,
  .tracking-select-all input {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
  }

  .live-freshness,
  .text-button,
  .button,
  .button.compact,
  .files-drop-button,
  .comm-chip,
  .comm-sort,
  .comm-attchip,
  .communication-attachment-card,
  .attachment-viewer-action,
  .shipment-project-link,
  .file-project-link,
  [role="tab"],
  /* carries its own min-height: 0 at equal specificity, so it needs naming */
  .shipment-tabs button {
    min-height: 44px;
  }

  .attachment-viewer-close,
  .attachment-viewer-nav {
    width: 44px;
    height: 44px;
  }

  .text-button {
    min-width: 44px;
  }

  .topbar-updates-button {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  /* Text fields are touch targets too -- the page search sat at 38px. */
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input:not([type]),
  select,
  textarea {
    min-height: 44px;
  }

  .tracking-map-wrap .maplibregl-ctrl-group button {
    width: 44px;
    height: 44px;
  }
}

/* The secondary link inside a row earns its 44px only where the row has already
   become a card. On a tablet these rows are still a table, and 44px each would
   push every row past 90px tall for a link the row itself mostly duplicates. */
@media (pointer: coarse) and (max-width: 680px) {
  .file-shipment-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Only where the button is already icon-only -- widening it while its label
     still shows pushes the label straight out of the page. */
  .shipments-toolbar .shipment-new-button {
    width: 44px;
    min-width: 44px;
  }
}

@media (pointer: coarse) {
  .communication-thread-action,
  .communication-thread-toggle { min-height: 44px; }

  .communication-thread-caret {
    width: 44px;
    height: 44px;
    margin: -12px 0;
  }
}
/* Document presence uses the same shipment record as assessment and Actions. */
.section.document-checklist {
  padding: 0;
  margin-bottom: 20px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.document-checklist-header { padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.document-checklist-header h3 { margin: 0; font-size: 19px; }
.document-checklist-header p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.document-checklist-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 126px 18px;
  gap: 12px;
  padding: 14px 20px 12px 56px;
  font-size: 12px;
}
.document-checklist-columns strong { font-weight: 700; }

.document-checklist-items {
  display: grid;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.document-checklist-item {
  min-width: 0;
  padding: 0;
}

.document-checklist-row {
  --checklist-accent: #397bb4;
  position: relative;
  overflow: hidden;
  border-radius: 12px 0 0 12px;
  background: var(--surface);
}
.document-checklist-row.is-recorded { --checklist-accent: var(--green); }
.document-checklist-row.needs-review { --checklist-accent: var(--amber); }
.document-checklist-row::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 0;
  width: 4px;
  background: var(--checklist-accent);
  pointer-events: none;
  z-index: 1;
}
.document-checklist-row[open] { background: #e6eff8; }

.document-checklist-heading {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 126px 18px;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 10px 20px;
  list-style: none;
  cursor: pointer;
}
.document-checklist-heading::-webkit-details-marker { display: none; }
.document-checklist-heading:hover { background: #f7faff; }
.document-checklist-row[open] > .document-checklist-heading { background: #e6eff8; }
.document-checklist-heading:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }

.document-checklist-heading h4 {
  margin: 0;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  white-space: normal;
  overflow-wrap: anywhere;
}

.document-checklist-icon { display: inline-flex; color: var(--checklist-accent); }
.document-checklist-icon svg { width: 18px; height: 18px; }
.document-checklist-chevron {
  justify-self: center;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
}
.document-checklist-row[open] > summary .document-checklist-chevron { transform: rotate(225deg); }
.document-checklist-status { display: grid; justify-items: start; gap: 4px; }
.document-checklist-review-label { color: var(--amber); font-size: 11px; font-weight: 600; }
.document-checklist-content { min-width: 0; padding: 0 20px 20px 56px; }
.document-checklist-row-actions { display: flex; justify-content: flex-end; margin-top: 12px; }

.document-checklist-answer {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

.document-checklist-answer.is-yes { color: #166646; background: var(--green-bg); }

.document-checklist .document-checklist-basis,
.document-checklist .document-checklist-reason {
  margin: 4px 0 0;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.document-checklist .document-checklist-basis {
  color: var(--muted);
  font-size: 12px;
}

.document-checklist .document-checklist-reason { font-size: 13px; }

.document-checklist-file {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.document-checklist-review {
  margin-top: 12px;
  padding: 10px 12px;
  border-left: 3px solid #ae721d;
  background: #fff6e8;
  color: #664717;
  font-size: 13px;
}

.document-checklist-review p { margin: 5px 0 0; }

.document-checklist-form {
  margin-top: 14px;
  display: grid;
  grid-template-columns: minmax(140px, 180px) minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  background: var(--surface-soft);
  border-radius: 6px;
}

.document-checklist-form label {
  display: grid;
  align-content: start;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
}

.document-checklist-form select,
.document-checklist-form textarea { width: 100%; min-width: 0; }

.document-checklist-form-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.document-checklist-error {
  grid-column: 1 / -1;
  margin: 0;
  color: #a32929;
  font-size: 13px;
}

.document-checklist-history {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}

.document-checklist-history summary { cursor: pointer; width: fit-content; color: var(--blue); }
.document-checklist-history ol { margin: 8px 0 0; padding-left: 18px; }
.document-checklist-history li { padding: 6px 0; }

@media (max-width: 620px) {
  .document-checklist-columns { display: none; }
  .document-checklist-items { margin-top: 12px; }
  .document-checklist-heading { grid-template-columns: 24px minmax(0, 1fr) 18px; gap: 6px 9px; padding: 12px 14px; min-height: 70px; }
  .document-checklist-icon { grid-column: 1; grid-row: 1 / 3; }
  .document-checklist-heading h4 { grid-column: 2; grid-row: 1; }
  .document-checklist-status { grid-column: 2; grid-row: 2; }
  .document-checklist-chevron { grid-column: 3; grid-row: 1 / 3; }
  .document-checklist-content { padding: 0 14px 18px; }
  .document-checklist-form { grid-template-columns: 1fr; padding: 10px; }
  .document-checklist-form select, .document-checklist-form textarea { font-size: 16px; }
}
@media (pointer: coarse) {
  .document-checklist-file, .document-checklist-history summary,
  .document-checklist .button { min-height: 44px; }
}
/* Outside the rerendered app root so background refresh cannot reset a check. */
.sign-in-security-dialog { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); box-sizing: border-box; padding: 0 0 16px; border: 1px solid #cbd4dc; border-radius: 20px; background: #fff; }
.sign-in-security-dialog::backdrop { background: rgb(8 20 28 / 45%); }
.sign-in-security-dialog iframe { display: block; border: 0; width: 100%; height: 330px; }
.sign-in-security-dialog > button { margin: 0 24px; }

.order-document-form { display: flex; flex-direction: column; align-items: stretch; }
.order-document-form .document-checklist-file { overflow-wrap: anywhere; text-align: left; }
/* Keep the shipment name readable while its editor remains a small affordance. */
.shipment-title-row { display: flex; align-items: center; gap: 2px; }
.shipment-title-row .shipment-head-headline { min-width: 0; overflow-wrap: anywhere; }
.icon-button.shipment-title-edit { position: relative; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--ink); box-shadow: none; }
.shipment-title-edit::before { content: ""; position: absolute; inset: 8px; border-radius: 7px; pointer-events: none; }
.shipment-title-edit svg { position: relative; width: 16px; height: 16px; }
.shipment-title-edit::before, .shipment-title-edit svg { transform: translateY(3px); }
.shipment-title-edit:focus-visible::before,
.shipment-title-edit:active::before { background: color-mix(in srgb, var(--ink) 8%, transparent); }
@media (hover: hover) {
  .shipment-title-edit:hover::before { background: color-mix(in srgb, var(--ink) 8%, transparent); }
}
.shipment-name-dialog { width: min(500px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; box-sizing: border-box; padding: 24px; border: 1px solid #cdd7e1; border-radius: 16px; color: #111e27; background: white; box-shadow: 0 18px 60px #06172433; }
.shipment-name-dialog::backdrop { background: #081b2d66; }
.shipment-name-dialog h2 { margin: 0 0 20px; }
.shipment-name-dialog label { display: block; font-weight: 700; margin-bottom: 8px; }
.shipment-name-dialog input { box-sizing: border-box; width: 100%; padding: 12px; border: 1px solid #a7b8c9; border-radius: 8px; font: inherit; font-size: 16px; }
.shipment-name-dialog p { line-height: 1.5; overflow-wrap: anywhere; }
.shipment-name-automatic { padding: 12px; background: #f0f5f9; border-radius: 8px; }
.shipment-name-automatic p { margin: 6px 0 0; }
.shipment-name-error { color: #b42318; }
.shipment-name-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 24px; }
.shipment-name-actions button { min-height: 44px; }
@media (max-width: 480px) {
  .shipment-name-actions button { flex: 1; }
  .shipment-name-actions [data-name-automatic] { flex-basis: 100%; }
}

@media (max-width: 900px) { .guest-layout .guest-copy { padding-top: 100px; } }

/* Shipment context stays compact; the entire row is an accessible target. */
.shipment-involvement-chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 44px; max-width: 100%; margin-top: 6px; padding: 6px 10px; border: 1px solid var(--line, #c9d4de); border-radius: 10px; background: var(--surface, #fff); color: var(--text, #101b22); font: inherit; font-size: 13px; cursor: pointer; }
.shipment-involvement-chip:focus-visible { outline: 2px solid var(--blue, #2469a4); outline-offset: 2px; }
.involvement-suggested { color: var(--blue, #2469a4); }
.shipment-involvement-dialog fieldset { border: 0; padding: 0; margin: 18px 0 0; }
.shipment-involvement-dialog .involvement-choice { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px; margin: 8px 0; border: 1px solid var(--line, #c9d4de); border-radius: 10px; cursor: pointer; }
.shipment-involvement-dialog .involvement-choice:has(input:checked) { background: var(--blue-soft, #eaf3fb); border-color: var(--blue, #2469a4); }
.shipment-involvement-dialog .involvement-choice input { width: 20px; height: 20px; flex: 0 0 20px; margin: 0; accent-color: var(--blue, #2469a4); }
.involvement-choice strong, .involvement-choice small { display: block; }
.involvement-choice small { margin-top: 4px; font-size: 13px; font-weight: 400; }

/* Shipment ledger: the same facts, compact rows with a persistent status edge. */
.shipments-page-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.shipments-page-heading h2 { margin: 0; font-size: 28px; line-height: 1.2; letter-spacing: -.5px; }
.shipments-page-heading .shipment-new-button { display: inline-flex; gap: 9px; align-items: center; border-radius: 12px; min-height: 44px; }
.shipments-page .shipments-toolbar { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.shipments-page .shipment-tabs { min-width: 0; flex: 0 1 auto; }
.shipments-page .shipment-archive-view { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; min-height: 44px; border-radius: 12px; }
.shipment-archive-view svg { width: 18px; height: 18px; }
.shipment-archive-view.is-active { background: #eaf3fb; border-color: var(--blue); color: var(--blue); }
.shipments-page > .shipments-toolbar-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.shipments-page .shipments-table { overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; }
.shipments-page .shipments-table-body { display: grid; gap: 8px; }
.shipments-page .shipments-table-head,
.shipments-page .shipments-table.is-selectable .shipments-table-head,
.shipments-page .shipment-row,
.shipments-page .shipments-table.is-selectable .shipment-row {
  min-width: 0; grid-template-columns: minmax(160px, 2fr) minmax(105px, 1.1fr) minmax(110px, 1.2fr) minmax(70px, .8fr) minmax(90px, .9fr) minmax(100px, 1.1fr) 28px;
  column-gap: 12px; row-gap: 0; padding: 12px 16px; align-items: center;
}
.shipments-page .shipments-table.is-selectable .shipments-table-head,
.shipments-page .shipments-table.is-selectable .shipment-row { grid-template-columns: 28px minmax(160px, 2fr) minmax(105px, 1.1fr) minmax(110px, 1.2fr) minmax(70px, .8fr) minmax(90px, .9fr) minmax(100px, 1.1fr) 28px; }
.shipments-page .shipments-table-head { border: 0; background: transparent; min-height: 42px; font-size: 10px; font-weight: 800; }
.shipments-page .shipments-table-head > [data-col="expected"] { display: block; }
.shipments-page .shipments-table-head.has-selection { background: #eaf3fb; border-radius: 10px; margin-bottom: 8px; }
.shipments-page .shipment-row { --row-tone: #82919f; --row-soft: #eef1f4; position: relative; min-height: 76px; margin: 0; border: 1px solid #dce4ea; border-radius: 10px; background: #fff; box-shadow: 0 1px 3px #10182004; font-size: 12px; }
.shipments-page .shipment-row::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; border-radius: 10px 0 0 10px; background: var(--row-tone); pointer-events: none; }
.shipments-page .shipment-row[data-shipment-tone="ordered"] { --row-tone: #b17a18; --row-soft: #fff5df; }
.shipments-page .shipment-row[data-shipment-tone="moving"] { --row-tone: #286ba5; --row-soft: #e8f2fb; }
.shipments-page .shipment-row[data-shipment-tone="positive"] { --row-tone: #21835b; --row-soft: #e7f5ef; }
.shipments-page .shipment-row[data-shipment-tone="delayed"] { --row-tone: #b4611c; --row-soft: #fff0df; }
.shipments-page .shipment-row[data-shipment-tone="review"] { --row-tone: #a63c58; --row-soft: #f9edf1; }
.shipments-page .shipment-row:hover { background: #f8fbfd; border-color: #bfcfdb; }
.shipments-page .shipment-row.is-selected,
.shipments-page .shipment-row.is-selected:hover { background: #eef6fc; border-color: #8cb4d5; box-shadow: none; }
.shipments-page .shipment-row:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.shipments-page .shipments-table-body .shipment-row:last-child { border-bottom: 1px solid #dce4ea; }
.shipments-page .shipment-row > div { min-width: 0; grid-column: auto; grid-row: auto; padding: 0; }
.shipments-page .shipment-row > div::before { content: none; }
.shipments-page .shipment-row .shipment-select-cell { width: 28px; height: 44px; grid-column: auto; grid-row: auto; align-self: center; }
.shipments-page .shipment-primary { display: grid; gap: 5px; }
.shipments-page .shipment-primary > strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 14px; line-height: 1.35; }
.shipments-page .shipment-row-meta { gap: 2px 6px; font-size: 11px; line-height: 1.4; }
.shipments-page .shipment-row-meta > span + span::before { margin-right: 6px; }
.shipments-page .shipment-mobile-carrier { display: none; }
.shipments-page .shipment-project-link { color: var(--blue); }
.shipments-page .shipment-project-link strong { font-size: 12px; font-weight: 500; }
.shipments-page .shipment-project-link .mono { display: none; }
.shipments-page .shipment-row .badge { color: var(--row-tone); background: var(--row-soft); border: 0; max-width: 100%; white-space: normal; line-height: 1.3; text-align: center; }
.shipments-page .shipment-row-date { line-height: 1.4; font-size: 12px; }
.shipment-row-actions { position: relative; align-self: center; }
.shipment-row-actions summary { cursor: pointer; list-style: none; display: grid; place-items: center; width: 32px; height: 44px; font-size: 21px; font-weight: 700; }
.shipment-row-actions summary::-webkit-details-marker { display: none; }
.shipment-row-actions summary:focus-visible { outline: 2px solid var(--blue); border-radius: 8px; }
.shipment-row-action-menu { position: absolute; z-index: 20; top: 40px; right: 0; min-width: 180px; padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 8px 28px #10182022; }
.shipment-row-action-menu button { display: block; width: 100%; min-height: 44px; text-align: left; border: 0; background: none; border-radius: 6px; color: var(--ink); }
.shipment-row-action-menu button:hover { background: #eef6fc; }
.shipments-page .shipment-row:has(details[open]) { z-index: 5; }
@media (max-width: 1180px) {
  .shipments-page .shipments-table-head,
  .shipments-page .shipments-table.is-selectable .shipments-table-head { display: flex; min-height: 0; padding: 0 12px; gap: 10px; }
  .shipments-page .shipments-table-head:not(.has-selection) { margin-bottom: 6px; }
  .shipments-page .shipments-table-head > span,
  .shipments-page .shipments-table-head > [data-col="expected"] { display: none; }
  .shipments-page .shipments-table-head .shipment-select-cell { min-height: 36px; width: auto; }
  .shipments-page .shipments-head-selection { flex: 1; flex-wrap: wrap; gap: 8px; padding: 8px 0; }
  .shipments-page .shipment-row,
  .shipments-page .shipments-table.is-selectable .shipment-row { grid-template-columns: 24px minmax(0, 1fr) minmax(80px, .42fr); gap: 8px 12px; padding: 12px 14px; min-height: 0; }
  .shipments-page .shipment-row > .shipment-select-cell { grid-column: 1; grid-row: 1; align-self: start; height: 24px; width: 24px; }
  .shipments-page .shipment-row > .shipment-primary { grid-column: 2; grid-row: 1; gap: 4px; }
  .shipments-page .shipment-primary > strong { font-size: 15px; }
  .shipments-page .shipment-row .shipment-mobile-carrier { display: inline; }
  .shipments-page .shipment-row > [data-label="Carrier"] { display: none; }
  .shipments-page .shipment-row > [data-label="Status"] { grid-column: 3; grid-row: 1; justify-self: end; align-self: start; }
  .shipments-page .shipment-row > [data-label="Destination"] { grid-column: 2; grid-row: 2; align-self: start; line-height: 1.4; }
  .shipments-page .shipment-row > [data-label="Expected"] { display: block; grid-column: 3; grid-row: 2; align-self: start; text-align: right; }
  .shipments-page .shipment-row > [data-label="Expected"]::before { display: block; content: attr(data-display-label); text-transform: none; font-size: 11px; font-weight: 400; letter-spacing: 0; color: var(--muted); margin-bottom: 2px; }
  .shipments-page .shipment-row > [data-label="Project"] { grid-column: 2 / -1; grid-row: 3; padding-right: 30px; font-size: 11px; }
  .shipments-page .shipment-row > .shipment-row-actions { grid-column: 3; grid-row: 3; justify-self: end; }
  .shipments-page .shipment-row-actions summary { height: 44px; margin-block: -6px; }
  .shipments-page .shipment-row.is-archived { grid-template-columns: minmax(0, 1fr) minmax(96px, .55fr); }
  .shipments-page .shipment-row.is-archived > .shipment-primary,
  .shipments-page .shipment-row.is-archived > [data-label="Destination"] { grid-column: 1; }
  .shipments-page .shipment-row.is-archived > [data-label="Status"],
  .shipments-page .shipment-row.is-archived > [data-label="Expected"],
  .shipments-page .shipment-row.is-archived > .shipment-row-actions { grid-column: 2; }
  .shipments-page .shipment-row.is-archived > [data-label="Project"] { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .shipments-page-heading { margin-bottom: 14px; }
  .shipments-page-heading h2 { font-size: 25px; }
  .shipments-page-heading .shipment-new-button { padding: 8px 12px; font-size: 12px; }
  .shipments-page .shipment-tabs { flex: 1; }
  .shipments-page .shipment-tabs button { padding: 8px 12px; font-size: 12px; }
  .shipments-page .shipment-archive-view { padding: 10px; }
  .shipments-page .shipment-archive-view > span { display: none; }
  .shipments-page .shipments-toolbar { gap: 8px; }
}

/* Connected tracking is routine status, not an attention banner. */
.workspace-detail .tracking-connection.is-connected {
  padding: 6px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  gap: 8px 18px;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
}
.tracking-connection.is-connected .tracking-connection-status > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}
.tracking-connection.is-connected .tracking-connection-indicator {
  width: 8px;
  height: 8px;
  flex-basis: 8px;
  border: 0;
  background: var(--green);
}
.tracking-connection .tracking-connection-actions {
  flex-direction: row;
  align-items: center;
  width: auto;
  max-width: 100%;
  gap: 12px;
}
.tracking-connection-actions code { min-width: 0; }
.tracking-connection-actions .text-button { flex: 0 0 auto; min-height: 44px; }
.tracking-connection-actions [data-copied="true"] { color: var(--green); }
.tracking-connection .head-menu summary { box-shadow: none; background: transparent; }

/* Reserve the selection controls before the first click, including wrapped mobile controls. */
.shipments-page .shipments-table-head.is-selection-bar {
  margin-bottom: 8px;
  border-radius: 10px;
}
.shipments-page .is-selection-bar .shipments-head-selection strong { min-width: 11em; }
.shipments-page .is-selection-bar:not(.has-selection) { background: #f2f6f9; }

/* Tracking stays in place while its editor owns focus and draft state. */
.shipment-tracking { margin: 24px 0; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.shipment-tracking-heading, .shipment-tracking-row, .shipment-tracking-empty { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.shipment-tracking-heading h2 { font-size: 17px; margin: 0; }
.shipment-tracking-row { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 16px; }
.shipment-tracking-empty { margin-top: 16px; }
.shipment-tracking p { margin: 5px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.shipment-tracking-number { min-width: 0; }
.shipment-tracking-number code { overflow-wrap: anywhere; font-size: 15px; }
.shipment-tracking-controls { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.shipment-tracking button { min-height: 44px; }
.shipment-tracking-dialog { box-sizing: border-box; width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 24px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 80px #0004; }
.shipment-tracking-dialog::backdrop { background: #0f1a2466; }
.shipment-tracking-dialog h2 { margin: 0 0 24px; font-size: 23px; }
.shipment-tracking-dialog label { display: block; margin-bottom: 8px; font-weight: 600; }
.shipment-tracking-dialog input { box-sizing: border-box; width: 100%; font-size: 16px; min-height: 48px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--surface); }
.shipment-tracking-dialog input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.shipment-tracking-dialog p { line-height: 1.5; color: var(--muted); }
.shipment-tracking-dialog [role=alert] { color: var(--danger, #a32424); }
.shipment-tracking-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 24px; }
.shipment-tracking-dialog-actions .danger { margin-right: auto; }
.shipment-tracking-dialog [hidden] { display: none; }
@media(max-width: 600px) {
  .shipment-tracking { padding: 16px; }
  .shipment-tracking-row, .shipment-tracking-empty { flex-wrap: wrap; }
  .shipment-tracking-controls { margin-left: auto; }
}

/* Compact shipping-details intake; the shipment is fixed by its action. */
.unsaved-dialog.startup-information-dialog { width: min(560px, calc(100vw - 32px)); }
.startup-information-dialog .modal-head h2 { font-size: 26px; line-height: 1.2; }
.startup-information-dialog .startup-optional { color: var(--muted); font-weight: 400; font-size: 12px; }
.startup-information-dialog .information-dropzone { min-height: 104px; }
.startup-information-dialog .unsaved-actions { flex-direction: row-reverse; }

/* Shipment workspace: the existing shell frames an independent list + detail. */
.brand .courier-brand-logo { width: 44px; height: 38px; object-fit: contain; }
.shipment-split-workspace { display: grid; grid-template-columns: minmax(285px, 31%) minmax(0, 1fr); gap: 22px; padding: 22px; flex: 1; min-height: 0; overflow: hidden; background: #f4f7fa; color: #152a43; }
.shipment-browser { min-width: 0; overflow: auto; padding: 2px 5px 24px 0; scrollbar-width: thin; }
.shipment-browser-heading, .shipment-browser-tools, .shipment-browser-card-top, .shipment-browser-card-bottom, .shipment-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.shipment-browser-heading { margin-bottom: 18px; }
.shipment-browser-heading h2 { margin: 0; font-size: 25px; letter-spacing: -.7px; }
.shipment-browser-heading .button { background: #284968; border-color: #284968; font-size: 12px; padding: 0 12px; white-space: nowrap; }
.shipment-browser-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.shipment-browser-filters button { padding: 9px 11px; border: 0; border-radius: 22px; background: #eaf0f6; color: #355370; font-size: 11px; font-weight: 600; cursor: pointer; }
.shipment-browser-filters button.is-active { background: #284968; color: white; }
.shipment-browser-filters button span { margin-left: 3px; }
.shipment-browser-tools { margin: 8px 0; }
.shipment-browser-tools .text-button { font-size: 12px; }
.shipment-browser-sort { margin: 0 0 15px; }
.shipment-browser-sort .drop-pill-trigger { font-size: 12px; }
.shipment-browser-cards { display: grid; gap: 12px; }
.shipment-browser-card { position: relative; width: 100%; display: flex; align-items: center; gap: 12px; padding: 17px 25px 17px 14px; border: 1px solid #dfe7ee; border-radius: 13px; background: #fff; text-align: left; color: #18334e; box-shadow: 0 2px 5px #15365004; cursor: pointer; transition: border-color .15s, background .15s; }
.shipment-browser-card:hover { border-color: #7197b8; background: #fafdff; }
.shipment-browser-card.is-selected { border: 2px solid #547b9b; padding: 16px 24px 16px 13px; background: #eff6fb; }
.shipment-browser-card.is-selected.needs-attention { border-color: #efad48; background: #fff9ef; }
.shipment-box { display: grid; place-items: center; flex: 0 0 44px; height: 55px; border-radius: 10px; background: #f1f3f5; color: #70818e; }
.shipment-box svg { width: 31px; height: 31px; }
.shipment-browser-card-copy { min-width: 0; flex: 1; display: grid; gap: 6px; }
.shipment-browser-card-top { align-items: baseline; flex-wrap: wrap; gap: 5px; }
.shipment-browser-card-top strong { font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.shipment-browser-card-top small { color: #72869a; font-size: 10px; }
.shipment-browser-route { font-size: 12px; line-height: 1.4; color: #526c82; }
.shipment-browser-carrier { font-size: 11px; color: #728297; }
.shipment-browser-card-bottom { align-items: flex-start; flex-wrap: wrap; font-size: 11px; line-height: 1.4; color: #526c82; gap: 5px; }
.shipment-browser-status { display: inline-flex; align-items: center; gap: 5px; }
.shipment-browser-status i { width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: #8a99a6; }
.shipment-browser-status.tone-review, .shipment-browser-status.tone-action { color: #a76404; }
.shipment-browser-status.tone-review i, .shipment-browser-status.tone-action i { background: #e59a25; }
.shipment-browser-status.tone-positive i { background: #36966a; }
.shipment-browser-arrow { position: absolute; right: 11px; top: 44%; font-size: 23px; }
.shipment-browser-caption { font-size: 13px; font-weight: 650; }
.shipment-browser-empty { display: grid; gap: 14px; padding: 25px 12px; }
.shipment-detail-pane { min-width: 0; min-height: 0; overflow: hidden; border: 1px solid #e3eaf0; border-radius: 16px; background: white; }
.shipment-detail-pane .workspace-detail { height: 100%; display: block; background: white; }
.shipment-detail-pane .workspace-detail .detail { height: 100%; padding: 0 24px 22px; background: white; }
.shipment-detail-pane .detail-back-row { margin: 15px 0 12px; }
.shipment-detail-pane .workspace-detail .detail-head { gap: 12px; margin: 0 0 16px; }
.shipment-detail-pane .workspace-detail .shipment-head-headline { font-size: clamp(24px, 2.1vw, 35px); letter-spacing: -.7px; line-height: 1.15; }
.shipment-detail-pane .workspace-detail .shipment-head-meta { font-size: 13px; margin: 8px 0; line-height: 1.5; }
.shipment-detail-pane .detail-actions .topbar-updates-button { display: none; }
.shipment-detail-pane .detail-actions { flex-wrap: wrap; justify-content: flex-end; }
.shipment-detail-pane .workspace-detail .detail-actions .button { min-height: 32px; padding: 0 10px; font-size: 11px; }
.shipment-detail-pane .shipment-identity { flex-wrap: wrap; }
.shipment-detail-pane .shipment-involvement { font-size: 12px; }
.shipment-detail-pane .workspace-rail { margin: 0 -24px 22px; padding: 0 24px; gap: 14px; background: white; border-bottom: 1px solid #e3eaf0; overflow: visible; z-index: 5; }
.shipment-detail-pane .workspace-rail-item { flex: 0 0 auto; padding: 14px 8px; font-size: 13px; color: #5c7390; border-radius: 0; white-space: nowrap; }
.shipment-detail-pane .workspace-rail-item.is-active { color: #132e4b; border-bottom: 3px solid #173757; background: transparent; }
.workspace-more { position: relative; margin-left: auto; }
.workspace-more summary { list-style: none; cursor: pointer; }
.workspace-more summary::-webkit-details-marker { display: none; }
.workspace-more > div { position: absolute; right: 0; top: 100%; min-width: 200px; display: grid; background: white; padding: 7px; border: 1px solid #dce4ec; border-radius: 10px; box-shadow: 0 12px 35px #17375726; z-index: 10; }
.workspace-more > div button { text-align: left; }
.shipment-detail-pane .shipment-workspace-grid { display: block; }
.shipment-detail-pane .shipment-workspace-primary { min-width: 0; }
.shipment-select-prompt { height: 100%; min-height: 400px; padding: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: radial-gradient(ellipse at center, #eff7fd, white 70%); }
.shipment-select-prompt img { width: 150px; height: 120px; object-fit: contain; margin-bottom: 20px; }
.shipment-select-prompt h2 { font-size: 28px; margin: 0 0 12px; }
.shipment-select-prompt p { max-width: 350px; line-height: 1.6; color: #677e92; }
.shipment-journey-hero { border: 1px solid #dde8f1; border-radius: 13px; padding: 21px 20px 24px; background: #f4f9fd url('/assets/shipment-world.png') center right / cover no-repeat; margin-bottom: 18px; }
.shipment-panel-heading { align-items: flex-start; margin-bottom: 15px; }
.shipment-panel-heading h3 { font-size: 17px; line-height: 1.35; margin: 0; color: #17324d; }
.shipment-journey-hero h3 { font-size: 21px; }
.shipment-panel-heading p { margin: 5px 0 0; font-size: 12px; line-height: 1.5; color: #566e85; }
.shipment-panel-heading .text-button { font-size: 12px; white-space: nowrap; }
.shipment-panel-heading .button { white-space: nowrap; font-size: 11px; padding: 0 10px; background: #ffffffa8; }
.shipment-journey-track { display: flex; align-items: flex-start; padding-top: 20px; gap: 5px; }
.shipment-journey-shark { width: 60px; height: 48px; object-fit: contain; margin-top: -4px; }
.shipment-journey-track ol { display: flex; flex: 1; list-style: none; padding: 0; margin: 0; min-width: 0; }
.shipment-journey-track li { position: relative; flex: 1; min-width: 0; text-align: center; }
.shipment-journey-track li::before { content: ''; position: absolute; top: 16px; left: -50%; width: 100%; border-top: 2px dashed #b4c6d6; }
.shipment-journey-track li:first-child::before { left: -10%; width: 60%; }
.shipment-journey-track li.is-complete::before, .shipment-journey-track li.is-current::before { border-top-style: solid; border-color: #365f81; }
.shipment-journey-track li button { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; padding: 0 5px; border: 0; background: transparent; color: #24435e; cursor: pointer; }
.shipment-checkpoint { display: grid; place-items: center; width: 33px; height: 33px; border: 2px solid #b0c2d2; border-radius: 50%; background: #f8fbff; box-shadow: 0 0 0 4px #f1f7fc; margin-bottom: 12px; font-size: 18px; }
.is-complete .shipment-checkpoint, .is-current .shipment-checkpoint { background: #355d7d; border-color: #355d7d; color: white; }
.is-current .shipment-checkpoint::after { content: ''; width: 9px; height: 9px; background: white; border-radius: 50%; }
.is-risk .shipment-checkpoint { background: #f0a016; border-color: #f0a016; color: white; }
.shipment-journey-track strong { font-size: 12px; line-height: 1.35; }
.shipment-journey-track small { margin-top: 5px; font-size: 10px; line-height: 1.5; color: #536c82; }
.shipment-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 17px; margin-bottom: 18px; align-items: start; }
.shipment-dashboard-right { display: grid; gap: 17px; min-width: 0; }
.shipment-dashboard-panel { padding: 19px; border: 1px solid #e0e7ee; border-radius: 12px; background: #fff; min-width: 0; }
.shipment-recent { min-height: 330px; }
.shipment-recent ol { list-style: none; padding: 6px 0 0; margin: 0; }
.shipment-recent li { position: relative; display: flex; gap: 13px; padding: 0 0 22px; }
.shipment-recent li:not(:last-child)::before { content: ''; position: absolute; top: 12px; bottom: -4px; left: 5px; border-left: 1px solid #d8e3ee; }
.shipment-activity-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 11px; margin-top: 5px; background: #3e6384; z-index: 1; }
.shipment-recent strong { font-size: 12px; line-height: 1.5; display: block; }
.shipment-recent p { margin: 3px 0; font-size: 11px; line-height: 1.5; color: #607991; }
.shipment-recent small { color: #758aa0; font-size: 10px; }
.shipment-actions-panel .workspace-rail-section { margin: 0; padding: 0; border: 0; box-shadow: none; background: transparent; }
.shipment-actions-panel .workspace-rail-heading { display: none; }
/* Override the older full-width task-row rules inside dashboard cards. */
.workspace-detail .shipment-actions-panel .workspace-task.next-step-row { min-width: 0; padding: 20px; border-radius: 8px; border: 1px solid #f0dcc3; background: #fff8ef; overflow-wrap: anywhere; }
.shipment-actions-panel .workspace-task > div { min-width: 0; max-width: 100%; }
.shipment-actions-panel .next-step-heading { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.shipment-actions-panel .next-step-heading .row-title { font-size: 14px; }
.shipment-actions-panel .workspace-task p, .shipment-actions-panel > p { font-size: 12px; line-height: 1.6; }
.shipment-actions-panel .workspace-task p { margin-top: 10px; }
.workspace-detail .shipment-actions-panel .workspace-task .next-step-actions { flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.shipment-actions-panel .next-step-actions .button { max-width: 100%; overflow-wrap: anywhere; font-size: 11px; padding: 9px 11px; min-height: 35px; height: auto; white-space: normal; }
.shipment-document-tiles { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.shipment-document-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; padding: 11px; border: 1px solid #e1e8ef; border-radius: 8px; background: #fafcfe; color: #2b4964; min-width: 0; cursor: pointer; }
.shipment-document-tile > span { font-size: 24px; color: #5486a9; }
.shipment-document-tile strong { font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.shipment-document-tile small { font-size: 10px; color: #75899c; }
.shipment-document-tile.is-add { border-style: dashed; align-items: center; justify-content: center; font-size: 11px; }
/* Source artwork is deliberately cropped to the narrow reference band. */
.shipment-courier-footer { min-height: 76px; display: flex; align-items: center; gap: 16px; margin-top: 20px; padding: 12px 16px; border: 1px solid #d5e6f2; border-radius: 10px; background: #e7f3fd url('/assets/shipment-mountains.png') center 35% / 100% auto no-repeat; }
.shipment-courier-footer img { width: 65px; height: 49px; object-fit: contain; flex-shrink: 0; }
.shipment-courier-footer > div { border-left: 1px solid #91aac0; padding-left: 16px; }
.shipment-courier-footer strong { font-size: 15px; color: #173859; }
.shipment-courier-footer p { margin: 5px 0 0; font-size: 11px; color: #58718c; }
.shipment-courier-footer > span { margin-left: auto; font-size: 8px; font-weight: 750; letter-spacing: 1.2px; white-space: nowrap; color: #173859; }
.shipment-table-return { padding: 15px 28px 0; }
@media (min-width: 1700px) {
  .shipment-split-workspace { grid-template-columns: 405px minmax(0, 1fr); }
  .shipment-document-tiles { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 1200px) {
  .shipment-split-workspace { gap: 14px; padding: 15px; grid-template-columns: 280px minmax(0,1fr); }
  .shipment-browser-heading { flex-wrap: wrap; }
  .shipment-dashboard-grid { grid-template-columns: 1fr; }
  .shipment-courier-footer > span { display: none; }
  .shipment-detail-pane .workspace-detail .detail { padding: 0 18px 20px; }
  .shipment-detail-pane .workspace-rail { margin-left: -18px; margin-right: -18px; padding: 0 12px; gap: 3px; }
  .shipment-journey-hero .shipment-panel-heading { flex-wrap: wrap; }
}
@media (max-width: 900px) {
  .shipment-split-workspace { display: block; overflow: auto; padding: 14px; }
  .shipment-browser { overflow: visible; padding: 0 0 20px; }
  .shipment-browser-heading { flex-wrap: nowrap; }
  .shipment-detail-pane { display: none; }
  .shipment-split-workspace.has-detail .shipment-browser { display: none; }
  .shipment-split-workspace.has-detail .shipment-detail-pane { display: block; overflow: visible; }
  .shipment-detail-pane .workspace-detail, .shipment-detail-pane .workspace-detail .detail { height: auto; overflow: visible; }
  .shipment-detail-pane .workspace-rail { position: relative; flex-wrap: wrap; }
  .shipment-detail-pane .workspace-detail .detail-head { flex-wrap: wrap; }
  .shipment-detail-pane .shipment-identity { font-size: 10px; }
  .shipment-detail-pane .workspace-detail .shipment-head-headline { font-size: 27px; }
  .shipment-journey-hero { padding: 16px 10px 20px; }
  .shipment-journey-hero h3 { font-size: 18px; }
  .shipment-journey-shark { display: none; }
  .shipment-journey-track strong { font-size: 10px; }
  .shipment-journey-track small { font-size: 9px; }
  .shipment-journey-track li:first-child::before { display: none; }
  .shipment-checkpoint { width: 29px; height: 29px; }
  .shipment-journey-track li::before { top: 14px; }
  .shipment-dashboard-panel { padding: 16px; }
  .shipment-courier-footer { background-size: auto 180px; background-position: 61% 35%; gap: 10px; padding: 12px; }
  .shipment-courier-footer > div { padding-left: 10px; }
  .shipment-courier-footer img { width: 48px; }
  .shipment-courier-footer strong { font-size: 13px; }
  .shipment-courier-footer p { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .shipment-browser-card { transition: none; } }
.shipment-browser-involvement { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 6px 0 13px; }
.shipment-browser-involvement .text-button { color: #667f94; font-size: 10px; }
.shipment-browser-involvement .text-button.is-active { color: #173a59; text-decoration: underline; text-underline-offset: 4px; }
.shipment-browser-sort { display: flex; gap: 6px; flex-wrap: wrap; }
.shipment-detail-pane .button:not(.secondary):not(.danger) { background: #284968; border-color: #284968; color: white; }
.shipment-actions-panel .next-step-heading .badge { justify-self: start; }
.workspace-detail .shipment-actions-panel .workspace-task-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 0; min-width: 0; }
@media (max-width: 900px) {
  .shipment-detail-pane .workspace-rail-item { padding-left: 5px; padding-right: 5px; font-size: 11px; }
  .shipment-detail-pane .workspace-rail { flex-wrap: nowrap; gap: 1px; }
  .shipment-detail-pane .workspace-rail-item sup { margin-left: 2px; }
  .shipment-detail-pane .workspace-more { margin-left: 0; }
}

.shipment-journey-track li button { z-index: 1; }
.shipment-detail-pane .shipment-detail-arrival { flex-basis: 100%; margin: 0 0 6px; text-align: right; font-size: 12px; line-height: 1.45; color: #536e86; }

/* Sign-in. The shark frames are transparent; the canvas extends past the button
   (logical view -70,-59 860x726 over the button's 720x608) so the spin and
   bubbles can spill out and fade, while the resting logo lands exactly on the
   static image. */
.guest-layout.is-login { grid-template-columns: minmax(0, 1.15fr) minmax(400px, 0.85fr); background: #061017; }
.is-login .guest-copy { align-items: center; text-align: center; background: #061017; padding: 56px clamp(28px, 5vw, 88px); }
.login-shark { display: grid; place-items: center; position: relative; width: min(360px, 100%); aspect-ratio: 720 / 608; padding: 0; background: transparent; border: 0; border-radius: 0; cursor: pointer; }
.login-shark img { width: 83.35%; height: auto; }
.login-shark canvas { display: none; position: absolute; left: -9.7222%; top: -9.7039%; width: 119.4444%; height: 119.4079%; pointer-events: none; }
.login-shark.has-motion canvas { display: block; }
.login-shark.has-motion img { visibility: hidden; }
.login-shark:focus-visible { outline: 2px solid #81dfff; outline-offset: 8px; border-radius: 12px; }
.login-wordmark { color: #b9cddc; font-size: 19px; font-weight: 650; margin: 12px 0 0; }
.is-login .guest-copy h1 { margin: 18px 0 0; font-size: clamp(34px, 3.8vw, 60px); line-height: 1.08; letter-spacing: -0.035em; }
.is-login .guest-copy p { max-width: 430px; margin-top: 24px; font-size: 17px; line-height: 1.6; color: #b9c9d4; }
.login-form-panel { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 100px clamp(28px, 4.4vw, 80px) 64px; background: #fff; color: #10202a; }
.is-login .guest-panel { width: 100%; max-width: 410px; padding: 0; align-self: auto; border: 0; background: #fff; color: #10202a; }
.is-login .guest-panel h2 { font-size: 30px; letter-spacing: -0.02em; }
.is-login .guest-panel p { color: #52616b; font-size: 15px; }
.is-login .guest-panel .field label { color: #273c49; }
.is-login .guest-panel input { min-height: 52px; background: #fff; color: #10202a; border-color: #cbd5dd; }
.is-login .guest-panel input::placeholder { color: #6a7780; }
.is-login .guest-panel .button:not(.ghost) { min-height: 52px; background: #10202a; color: #fff; }
.is-login .guest-panel .button.ghost { color: #245d88; }
.login-new-account { width: 100%; max-width: 410px; margin: 24px 0 0; color: #52616b; font-size: 13px; line-height: 1.6; }
@media (max-width: 900px) {
  .guest-layout.is-login { grid-template-columns: minmax(0, 1fr); }
  .is-login .guest-copy { padding: 84px 24px 36px; }
  .login-shark { width: 190px; }
  .login-wordmark { font-size: 16px; margin-top: 4px; }
  .is-login .guest-copy h1 { font-size: 34px; margin-top: 14px; }
  .is-login .guest-copy p { font-size: 15px; margin-top: 16px; max-width: 360px; }
  .login-form-panel { padding: 36px 24px max(40px, env(safe-area-inset-bottom)); }
  .is-login .guest-panel h2 { font-size: 27px; }
  .is-login .guest-language { top: 18px; right: 20px; }
}

@media (max-width: 900px) {
  .is-login-code .guest-copy { padding-bottom: 16px; }
  .is-login-code .login-shark { width: 100px; }
  .is-login-code .guest-copy h1, .is-login-code .guest-copy p { display: none; }
  .is-login-code .login-form-panel { justify-content: flex-start; padding-top: 28px; }
}

@media (max-width: 900px) {
  .is-login .guest-language { color: #b9cddc; }
  .is-login .guest-language-trigger { color: #edf5fa; background: #11222e; border-color: #304655; }
  .is-login .guest-language-trigger:hover { background: #1b3141; border-color: #59758b; }
}

/* Feedback remains visible while address suggestions are waiting on the network. */
.geocode-status { color: var(--muted); font-size: 12px; line-height: 1.5; }
.geocode-status:empty { display: none; }
.geocode-status button { border: 0; background: none; color: var(--blue); text-decoration: underline; padding: 2px 4px; cursor: pointer; font: inherit; }
.geocode-status.is-loading::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 7px; vertical-align: -2px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: geocode-spin .75s linear infinite; }
@keyframes geocode-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .geocode-status.is-loading::before { animation: none; } }

.tracking-location-note { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.tracking-location-note p { margin: 0 0 4px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.tracking-location-note .text-button { font-size: 12px; }
#trackingLocationNotice:empty { display: none; }

/* Keep the address editor close control compact, including on phone widths. */
.receiving-site-dialog .modal-head { position: relative; display: block; padding-right: 38px; }
.receiving-site-dialog .modal-head [data-site-editor-close] { position: absolute; top: 0; right: 0; width: 32px; min-width: 32px; height: 32px; padding: 0; }

/* Communications page A: one mailbox surface; shipment cards keep their own styles. */
.communications-page {
  background: #edf1f5;
}

.communications-page::before { display: none; }

.communications-page .communications-mailbox {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(16, 24, 32, 0.04);
}

.communications-page .communications-controls {
  border: 0;
  border-bottom: 1px solid #dde4e8;
  border-radius: 12px 12px 0 0;
  background: var(--surface);
}

.communications-page .communications-ledger {
  border: 0;
  border-radius: 0 0 12px 12px;
  box-shadow: none;
}

.communications-page .comm-places { padding: 0 10px; }
.communications-page .comm-place { min-height: 44px; gap: 8px; padding: 11px 12px 10px; }
.communications-page .comm-place em {
  min-width: 23px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  text-align: center;
}
.communications-page .comm-place.is-active em { background: var(--blue-bg); color: var(--blue); }

.communications-page .communications-toolbar { gap: 8px 10px; padding: 10px 16px; }
.communications-page .communications-search { flex: 1 1 300px; width: auto; min-width: 220px; max-width: 440px; }
.communications-page .communications-search input { min-height: 36px; font-size: 13px; }
.communications-page .comm-chip,
.communications-page .comm-sort { min-height: 34px; padding-inline: 11px; border-radius: 999px; background: #fff; }
.communications-page .comm-chip.is-active { background: var(--blue-bg); }
.communications-page .comm-chip.is-alert { background: #fffaf0; border-color: #e6d6b9; }
.communications-page .comm-chip b { font-weight: 500; }
.communications-page .comm-bulk { flex-wrap: wrap; min-height: 54px; padding: 9px 16px; }
.communications-page .comm-act { min-height: 34px; font-weight: 500; }
.communications-page .comm-bulk-note { white-space: normal; }

.communications-page .communication-row { grid-template-columns: 34px minmax(0, 1fr); background: #fff; }
.communications-page .communication-row.is-read { background: #fbfcfd; }
.communications-page .communication-row:hover { background: #f5f8fa; }
.communications-page .communication-row.is-selected,
.communications-page .communication-row.is-checked { background: var(--blue-bg); box-shadow: inset 3px 0 var(--blue); }
.communications-page .comm-open {
  grid-template-columns: 184px minmax(0, 1fr) 116px 18px 68px;
  gap: 12px;
  min-height: 44px;
  padding: 8px 16px 8px 10px;
  color: var(--ink);
}
.communications-page .communication-row.has-chips .comm-open { padding-top: 9px; }
.communications-page .comm-from { font-size: 13px; font-weight: 600; }
.communications-page .comm-count { margin-left: 6px; color: var(--faint); font: 500 11px var(--font-mono); }
.communications-page .comm-line strong { font-size: 13px; font-weight: 600; }
.communications-page .communication-row.is-read .comm-from,
.communications-page .communication-row.is-read .comm-line strong { font-weight: 400; }
.communications-page .comm-ord { padding: 2px 7px; border: 1px solid #dde4e8; background: #f6f8fa; font-weight: 500; }
.communications-page .communication-row.is-workspace-email .comm-ord { font-family: var(--font-sans); font-size: 11px; }
.communications-page .comm-select-placeholder { display: block; align-self: stretch; }
.communications-page .comm-when { font: 11.5px var(--font-sans); font-variant-numeric: tabular-nums; }
.communications-page .comm-chips { flex-wrap: wrap; margin: -2px 16px 10px 206px; }
.communications-page .comm-attchip { min-height: 28px; max-width: 230px; font-size: 11.5px; }

.communications-page .communications-address-disclosure { width: 100%; max-width: 100%; margin: 0 0 14px; color: var(--muted); }
.communications-page .communications-address-disclosure > summary {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12.5px;
}
.communications-page .communications-address-disclosure > summary:hover,
.communications-page .communications-address-disclosure[open] > summary { border-color: var(--line); background: #fff; color: var(--ink); }
.communications-page .communications-address-disclosure > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.communications-page .communications-address-disclosure .workspace-email-inbox { margin: 8px 0 0; padding: 14px 16px; background: #fff; border-radius: 10px; }
.communications-page .communications-address-disclosure .workspace-email-heading strong { font: 500 13px var(--font-mono); }
.communications-page .communications-address-disclosure .workspace-email-inbox p { font-size: 12.5px; }
.communications-page .communications-address-disclosure .workspace-email-address-form { margin-top: 12px; padding-top: 12px; }

.communications-page .communications-mailbox > .communication-reader { border: 0; border-radius: 12px; box-shadow: none; }
.communications-page .communication-reader-bar { gap: 8px; padding: 10px 14px; background: #fff; }
.communications-page .communication-reader-back { background: none; border-color: transparent; }
.communications-page .communication-reader-back:hover { background: var(--surface-soft); border-color: var(--line); }
.communications-page .communication-reader-body .communication-message-pane { padding: 22px 24px 30px; }
.communications-page .communication-thread-heading { gap: 8px 12px; margin-bottom: 8px; }
.communications-page .communication-thread-heading h2 { font-size: 20px; font-weight: 500; }
.communications-page .communication-thread-shipment { border-color: var(--line); background: var(--surface-soft); color: var(--muted); font-weight: 500; }
.communications-page .communication-status { min-height: 22px; padding: 3px 8px; font-size: 10px; font-weight: 600; }
.communications-page .communication-workspace-note { margin: 16px 0; padding: 10px 12px; border: 1px solid #dde4e8; border-radius: 8px; background: #f7f9fb; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.communications-page .communication-workspace-note p { margin: 0; }
.communications-page .communication-workspace-body { max-width: 80ch; margin: 18px 0; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; font: 14px/1.6 var(--font-sans); }
.communications-page .communication-workspace-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 18px 0 8px; min-width: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.communications-page .communication-workspace-meta strong { min-width: 0; max-width: 100%; color: var(--ink); font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.communications-page .communication-workspace-meta time { max-width: 100%; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.communications-page .communication-workspace-details { min-width: 0; max-width: 100%; margin: 8px 0 18px; color: var(--muted); font-size: 12.5px; }
.communications-page .communication-workspace-details > summary { width: fit-content; max-width: 100%; min-height: 34px; padding: 7px 0; cursor: pointer; }
.communications-page .communication-workspace-details > summary:hover { color: var(--ink); }
.communications-page .communication-workspace-details > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 3px; }
.communications-page .communication-workspace-details dl { margin: 4px 0 0; padding: 10px 12px; border: 1px solid #dde4e8; border-radius: 8px; background: #f7f9fb; line-height: 1.5; }
.communications-page .communication-workspace-details dl > div { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; }
.communications-page .communication-workspace-details dl > div + div { margin-top: 6px; }
.communications-page .communication-workspace-details dt { margin: 0; color: var(--faint); font-weight: 400; }
.communications-page .communication-workspace-details dd { min-width: 0; margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.communications-page .communication-workspace-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; max-width: 100%; margin: 0; padding: 0; border: 0; }
.communications-page .communication-workspace-actions .button,
.communications-page .communication-workspace-assignment .button { min-height: 36px; max-width: 100%; border-radius: 8px; font-weight: 500; white-space: normal; }
.communications-page .communication-workspace-assignment { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid #dde4e8; }
.communications-page .communication-workspace-assignment label { display: flex; flex: 1 1 300px; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; max-width: 520px; color: var(--muted); font-size: 12.5px; }
.communications-page .communication-workspace-assignment select { flex: 1 1 200px; width: 0; min-width: 0; max-width: 100%; min-height: 36px; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; font: 13px var(--font-sans); text-overflow: ellipsis; }
.communications-page .communications-empty { padding: 42px 20px; }
.communications-page .files-loadmore { margin-top: 0; padding: 12px 16px; border-top: 1px solid var(--line); }

@media (max-width: 1100px) {
  .communications-page .comm-open { grid-template-columns: 148px minmax(0, 1fr) 92px 18px 62px; gap: 10px; }
  .communications-page .comm-chips { margin-left: 168px; }
}

@media (max-width: 760px) {
  .communications-page { padding: 16px 12px 24px; }
  .communications-page .comm-places { padding: 0 4px; gap: 0; }
  .communications-page .comm-place { flex: 1; justify-content: center; min-height: 46px; padding: 10px 6px; gap: 6px; font-size: 13px; }
  .communications-page .comm-place svg { display: none; }
  .communications-page .comm-place em { min-width: 22px; padding-inline: 6px; }
  .communications-page .communications-toolbar { padding: 10px 12px; }
  .communications-page .communications-search { flex-basis: 100%; width: 100%; min-width: 0; max-width: none; }
  .communications-page .communications-search input,
  .communications-page .comm-chip,
  .communications-page .comm-sort,
  .communications-page .comm-act { min-height: 44px; }
  .communications-page .comm-bulk { gap: 8px; padding: 10px 12px; }
  .communications-page .comm-bulk-spacer { display: none; }
  .communications-page .comm-bulk-note { flex-basis: 100%; }
  .communications-page .communication-row { grid-template-columns: 32px minmax(0, 1fr); }
  .communications-page .comm-select { padding-left: 10px; }
  .communications-page .comm-open {
    grid-template-columns: minmax(0, 1fr) 18px 64px;
    grid-template-areas: "from clip when" "mid mid mid" "ord ord ord";
    gap: 6px 8px;
    padding: 10px 12px 10px 4px;
  }
  .communications-page .communication-row.has-chips .comm-open { padding-top: 10px; }
  .communications-page .comm-from { grid-area: from; }
  .communications-page .comm-when { grid-area: when; }
  .communications-page .comm-mid { grid-area: mid; }
  .communications-page .comm-clip { display: block; grid-area: clip; }
  .communications-page .comm-ord { display: inline-block; grid-area: ord; justify-self: start; margin-top: 2px; }
  .communications-page .comm-line { white-space: normal; line-height: 1.45; }
  .communications-page .comm-line strong,
  .communications-page .comm-snip { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .communications-page .comm-chips { gap: 6px; margin: -2px 12px 10px 4px; }
  .communications-page .comm-attchip { min-height: 44px; max-width: 100%; }
  .communications-page .communications-address-disclosure > summary { min-height: 44px; }
  .communications-page .communications-address-disclosure .workspace-email-inbox { padding: 14px 12px; }
  .communications-page .communications-address-disclosure .workspace-email-address-field { gap: 6px; }
  .communications-page .communications-address-disclosure .workspace-email-address-field input { min-width: 0; }
  .communications-page .communications-address-disclosure .button,
  .communications-page .communications-address-disclosure .text-button { min-height: 44px; }
  .communications-page .communication-reader-bar { flex-wrap: wrap; gap: 8px; padding: 8px 10px; }
  .communications-page .communication-reader-back,
  .communications-page .communication-reader-nav { min-height: 44px; height: 44px; }
  .communications-page .communication-reader-nav { min-width: 44px; }
  .communications-page .communication-reader-body .communication-message-pane { padding: 18px 14px 24px; }
  .communications-page .communication-thread-heading h2 { font-size: 19px; }
  .communications-page .communication-workspace-actions { flex: 1 1 auto; align-items: stretch; }
  .communications-page .communication-workspace-actions .button,
  .communications-page .communication-workspace-assignment .button,
  .communications-page .communication-workspace-details > summary { min-height: 44px; }
  .communications-page .communication-workspace-assignment label { flex-basis: 100%; width: 100%; max-width: none; }
  .communications-page .communication-workspace-assignment select { min-height: 44px; }
  .communications-page .communication-workspace-details dl { padding: 10px; }
  .communications-page .communication-workspace-details dl > div { grid-template-columns: 48px minmax(0, 1fr); gap: 8px; }
}