/**
 * Pilot network, Mission inbox, quotes, missions, payments and settings.
 *
 * Colours, type, radii, buttons, fields, badges, tabs, drawers and empty
 * states come from system.css. This sheet only lays out the Network's own
 * views, in the light system: whitespace and section headings first,
 * hairlines second, borders last — and no card inside a card.
 */

/* ══════════════════════════ page frame ══════════════════════════ */
[hidden] { display: none !important; }
/* clip, not hidden: hidden makes <body> a scroll container and the app
   rail's position: sticky stops working on long pages. */
html, body { max-width: 100%; overflow-x: clip; }
body.has-rail > main.view { width: 100%; }
.view { max-width: 1440px; margin: 0 auto; padding: 32px 24px 80px; }
.view:not(.wide) > * { max-width: 1080px; }
.net-chrome { max-width: none; margin: 0; padding: 0; }
.nv-page-head h1 { overflow-wrap: anywhere; }
.nv-page-head p { font-size: var(--fs-body); }
.nx-gap { margin-top: var(--sp-6); }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.loading { padding: 80px; text-align: center; color: var(--text-2); }

/* Icons: the shell's stroke set, sized to the text they sit in. */
.nx-ico { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.125em; }
.nx-back { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; margin-bottom: var(--sp-3); font-size: var(--fs-sm); }
.nx-back .nx-ico { width: 16px; height: 16px; }

/* ══════════════════════════ modal form ══════════════════════════ */
/* A centred grid item that outgrows the viewport is clipped at BOTH ends with
   no way to scroll — on a phone that made the preflight modal's sign button
   unreachable. flex-start + margin:auto centres while it fits and top-aligns
   when it doesn't, and the overlay itself scrolls. */
.nx-overlay { position: fixed; inset: 0; z-index: 950; background: rgba(15, 23, 42, 0.30);
  display: flex; align-items: flex-start; justify-content: center;
  overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 18px; }
.nx-modal { width: 100%; max-width: 460px; margin: auto; background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--shadow); }
.nx-modal h3 { margin: 0 0 var(--sp-4); font-size: 20px; }
.nx-modal form { display: flex; flex-direction: column; gap: 12px; }
.nx-modal-p { font-size: var(--fs-body); color: var(--text-2); }
.nx-modal-p b { color: var(--text); }

/* ══════════════════════ legacy form vocabulary ══════════════════════
   The pilot profile builder, onboarding, the overlay forms and the operator
   console still use these names; each maps onto the shared treatment. */
.btn.primary { background: var(--blue-fill); border-color: var(--blue-fill); color: var(--on-accent); }
.btn.primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); }
.btn.sm { min-height: 36px; padding: 0 14px; font-size: var(--fs-sm); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.ghost:hover { color: var(--text); background: var(--hover); }
.btn.warn { border-color: var(--danger-line); color: var(--danger-text); }
.btn.block { width: 100%; justify-content: center; }
.btn:not(.primary):not(.ghost):not(.warn) { border-color: var(--border-strong); background: var(--surface); }
.btn:not(.primary):not(.ghost):not(.warn):hover:not(:disabled) { border-color: var(--blue-line); background: var(--surface-2); }
.page-h { margin: 0 0 4px; font-size: var(--fs-h1); font-weight: 700; letter-spacing: -0.02em; }
.page-sub { margin: 0 0 24px; color: var(--text-2); font-size: var(--fs-body); max-width: 72ch; }
.section-h { font-size: 17px; font-weight: 650; color: var(--text); margin: 0 0 10px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; margin-bottom: 16px; }
.card h3 { margin: 0 0 12px; font-size: var(--fs-h3); }
.li-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--hairline); }
.li-row:first-of-type { border-top: 0; }
.li-row b { font-size: 15px; } .li-row .sub { font-size: 13px; color: var(--text-2); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field span { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
/* Form controls do not inherit the page face by default — a textarea falls
   back to monospace, placeholder included. */
.field input, .field select, .field textarea { min-height: 44px; padding: 0 12px; background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); color: var(--text); font-family: var(--font); font-size: var(--fs-body); }
.field textarea { min-height: 96px; padding: 10px 12px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: var(--focus); }
.chk.field input { min-height: 0; width: 18px; height: 18px; accent-color: var(--blue); }
.chip-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); font: 500 var(--fs-sm)/1 var(--font); cursor: pointer; }
.chip:hover { border-color: var(--blue-line); }
.chip.on { background: var(--blue-soft); border-color: var(--blue); color: var(--blue-text); }
.chip:focus-visible { outline: none; box-shadow: var(--focus); }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 20px; }
.form-actions .nv-btn-block { width: 100%; }
.widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 24px; }
.widget { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px; }
.widget b { font-size: 24px; font-weight: 700; } .widget span { display: block; font-size: 13px; color: var(--text-2); margin-top: 4px; }
.empty { text-align: center; padding: 60px 20px; color: var(--text-2); }
.empty-state { max-width: 440px; margin: 48px auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.empty-state h3 { margin: 0; font-size: 18px; }
.empty-state p { margin: 0; color: var(--text-2); }
.disclaimer { margin-top: 32px; font-size: 13px; color: var(--text-3); line-height: 1.6; border-top: 1px solid var(--border); padding-top: 16px; }
.no-commission { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ok-text); background: var(--ok-soft);
  border: 1px solid var(--ok-line); padding: 6px 12px; border-radius: var(--r-md); }

/* Records filter bar. Four fields and a button: a class, not an inline style —
   the inline grid beat the phone rule and pushed fields off the screen. */
.search-box { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; padding: 16px;
  margin-bottom: 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); }
.search-box .fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.search-box label { font: 600 13px/1.2 var(--font); color: var(--text-2); }
.search-box input, .search-box select { height: 44px; padding: 0 12px; background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); color: var(--text); font-size: var(--fs-body); font-family: var(--font); min-width: 0; }
.search-box input:focus, .search-box select:focus { outline: none; border-color: var(--blue); box-shadow: var(--focus); }
.search-box.search-box-4 { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
@media (max-width: 900px) { .search-box.search-box-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Signed out: the public header's account menu (signed in, the rail has it). */
.ws-btn { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: var(--r-md);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: 14px; }
.ws-btn small { display: inline-flex; color: var(--text-3); }
.ws-btn small .nx-ico { width: 12px; height: 12px; }
.ws-pop { position: fixed; z-index: 960; min-width: 240px; padding: 6px; border-radius: var(--r-md); background: var(--surface);
  border: 1px solid var(--border-strong); box-shadow: var(--shadow); }
.ws-pop button { display: block; width: 100%; text-align: left; min-height: 40px; padding: 8px 12px; border-radius: 6px; border: 0;
  background: transparent; color: var(--text); font-size: 14px; }
.ws-pop button:hover { background: var(--hover); }
.ws-pop button small { display: block; color: var(--text-3); font-size: 12px; margin-top: 2px; }
.ws-pop .ws-head { padding: 8px 12px 4px; font-size: 12px; color: var(--text-3); }

/* ══════════════════════════ shared rows and bars ══════════════════════════ */
/* List rows: a table's scanability without a table. On phones they stack. */
.nx-rows, .nx-files { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.nx-rows > li, .nx-files > li { border-bottom: 1px solid var(--border); }
.nx-files > li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; }
.nx-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 12px 8px; color: inherit; text-decoration: none; }
a.nx-row:hover { background: var(--surface-2); }
a.nx-row:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-md); }
.nx-row-main { min-width: 0; display: grid; gap: 2px; }
.nx-row-main b { font-size: 15px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.nx-row-main small { font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
.nx-row-side { flex: none; display: grid; gap: 4px; justify-items: end; text-align: right; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.nx-row-side small { font-size: 13px; font-weight: 400; color: var(--text-3); }
.nx-row-acts { flex: none; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.nx-row.is-for-you { box-shadow: inset 3px 0 0 var(--ok); }
.nx-row-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.nx-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: calc(-1 * var(--sp-3)) 0 var(--sp-4); font-size: var(--fs-sm); }
.nx-links a { min-height: 32px; display: inline-flex; align-items: center; }
.nx-error { margin-top: var(--sp-4); }

/* A slim statement of context: the mission a search or request is for. */
.fp-context { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: var(--sp-4); border: 1px solid var(--blue-line); border-radius: var(--r-lg);
  background: var(--blue-soft); color: var(--text); font-size: 14px; }
.fp-context b { font-weight: 650; }

/* Disclosures: advanced fields, checklists, files. Closed by default. */
.pm-adv > summary, .rq-disc > summary { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none;
  font: 600 15px/1.3 var(--font); color: var(--text); border-radius: var(--r-md); }
.pm-adv > summary::-webkit-details-marker, .rq-disc > summary::-webkit-details-marker, .pf-more > summary::-webkit-details-marker { display: none; }
.pm-adv > summary::before, .rq-disc > summary::before { content: ""; flex: none; width: 7px; height: 7px; margin: 0 4px 0 2px;
  border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: rotate(-45deg); transition: transform 0.15s; }
.pm-adv[open] > summary::before, .rq-disc[open] > summary::before { transform: rotate(45deg); }
.pm-adv > summary:focus-visible, .rq-disc > summary:focus-visible { outline: none; box-shadow: var(--focus); }

/* ══════════════════════════ Find a pilot ══════════════════════════ */
.fp-head { margin-bottom: var(--sp-4); }
.fp-stats { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 6px; font-size: var(--fs-sm); color: var(--text-3); }
.fp-stats b { color: var(--text-2); font-weight: 650; margin-left: 4px; font-variant-numeric: tabular-nums; }
.fp-bar { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.1fr) auto auto; gap: 12px; align-items: end;
  padding: 16px; margin-bottom: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-2); }
.fp-bar .nv-field { min-width: 0; }
.fp-bar .nv-field > label { display: block; margin-bottom: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
.fp-bar .nv-input, .fp-bar .nv-select { min-width: 0; }
.fp-adv svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.fp-adv.has-filters { border-color: var(--blue-line); color: var(--blue-text); }
.fp-adv .nv-tab-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--blue-soft); color: var(--blue-text); font-size: 12px; display: inline-grid; place-items: center; }
.fp-tools { align-items: center; gap: 8px 12px; margin-bottom: var(--sp-3); }
.fp-count-live { font-size: 15px; font-weight: 600; color: var(--text); }
.fp-count-sub { font-weight: 400; color: var(--text-3); }
.fp-warn { color: var(--warn-text); }
.pn-sort { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: var(--fs-sm); color: var(--text-2); white-space: nowrap; }
.pn-sort .nv-select { min-height: 36px; min-width: 160px; }
.fp-view { display: none; }
.fp-wrap { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); gap: var(--sp-4); align-items: start; }
.fp-results { min-width: 0; display: grid; gap: var(--sp-3); }
.pn-mapbox { position: sticky; top: calc(var(--top-h) + 12px); height: calc(100svh - var(--top-h) - 24px); min-height: 480px; max-height: 820px;
  border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; isolation: isolate; }
.pn-mapbox .fp-map { position: absolute; inset: 0; }
.pn-area { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 720; display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 16px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--text);
  font: 600 14px/1 var(--font); cursor: pointer; box-shadow: var(--shadow-sm); }
.pn-area svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.pn-area:hover { border-color: var(--blue-line); }
.pn-area:focus-visible { outline: none; box-shadow: var(--focus); }
.pn-pages { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.pn-pages button { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--text-2); font: 600 14px/1 var(--font); cursor: pointer; }
.pn-pages button[aria-current="page"] { background: var(--action); border-color: var(--action); color: var(--on-action); }
.pn-pages button:disabled { opacity: 0.4; cursor: default; }
.pn-pages button:focus-visible { outline: none; box-shadow: var(--focus); }
.pn-pages .nx-ico { width: 16px; height: 16px; }
.fp-drawer { width: min(400px, 100vw); }
.fp-drawer .nv-field { margin-bottom: var(--sp-4); }
.fp-drawer .nv-check { margin-top: 8px; font-size: 14px; }
.nx-row-actions .nv-btn { flex: none; }
.pilot-cards .pilot-card { container-type: inline-size; }
@container (max-width: 520px) {
  .pc-foot { flex-direction: column; align-items: stretch; }
  .pc-actions { width: 100%; }
  .pc-actions .nv-btn { flex: 1; }
}
.pilot-cards.nx-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr)); gap: 12px; align-items: start; }

/* Why a pilot matched: the tier's reasons, one click away. */
.match-explain { position: fixed; z-index: 960; width: 280px; padding: 14px; border-radius: var(--r-md); background: var(--surface);
  border: 1px solid var(--border-strong); box-shadow: var(--shadow); }
.match-explain h5 { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.me-row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 13px; border-top: 1px solid var(--border); }
.me-row:first-of-type { border-top: 0; } .me-lvl { font-weight: 600; }
.me-Excellent, .me-Verified, .me-Match, .me-Strong, .me-Available { color: var(--ok-text); }
.me-Travel, .me-Near, .me-Partial, .me-Moderate, .me-Limited { color: var(--warn-text); }
.me-Unverified, .me-Missing, .me-Over, .me-New, .me-Unknown, .me-Not, .me-Out { color: var(--text-2); }

@media (max-width: 1240px) {
  .fp-bar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fp-adv { grid-column: 3; }
  .fp-go { grid-column: 4; }
}
@media (max-width: 1100px) {
  .fp-view { display: inline-flex; }
  .fp-wrap { grid-template-columns: minmax(0, 1fr); }
  .fp-wrap[data-view="list"] .pn-mapbox { display: none; }
  .fp-wrap[data-view="map"] .fp-results { display: none; }
  .fp-wrap[data-view="map"] .pn-mapbox { position: relative; top: 0; height: 70svh; min-height: 380px; }
}
@media (max-width: 760px) {
  .fp-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fp-f-where { grid-column: 1 / -1; }
  .fp-adv { grid-column: 2; }
  .fp-go { grid-column: 1 / -1; }
  .pn-sort { margin-left: 0; }
}

/* ══════════════════════════ pilot profile ══════════════════════════ */
.pf-top { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: var(--sp-5); align-items: start; margin: var(--sp-2) 0 var(--sp-5); }
.pf-photo { width: 96px; height: 96px; border-radius: var(--r-lg); overflow: hidden; background: var(--surface-3); display: grid; place-items: center;
  font: 650 30px/1 var(--font-head); color: var(--text-2); }
.pf-photo img { width: 100%; height: 100%; object-fit: cover; }
.pf-id { min-width: 0; }
.pf-headline { margin-top: 4px; font-size: 16px; color: var(--text-2); }
.pf-meta, .pf-creds { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 10px; font-size: 14px; color: var(--text-2); }
.pf-creds b { font-weight: 600; color: var(--text); }
.pf-actions { display: flex; flex-direction: column; gap: 8px; min-width: 250px; }
.pf-actions > .nv-btn { width: 100%; }
/* Message, Save and More: compact icon-and-label buttons on one row. */
.pf-act-row { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-act-row > .nv-btn, .pf-act-row > .pf-more { flex: 1 1 auto; min-width: 0; }
.pf-act { gap: 7px; width: 100%; padding: 0 13px; white-space: nowrap; }
.pf-act .nx-ico { width: 16px; height: 16px; }
.pf-act[aria-pressed="true"] { color: var(--ok-text); }
.pf-initials { display: grid; place-items: center; width: 100%; height: 100%; }
.pf-note { font-size: 13px; color: var(--text-3); text-align: center; }
.pf-more { position: relative; }
.pf-more > summary { list-style: none; cursor: pointer; }
.pf-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 60; min-width: 200px; padding: 6px; background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--r-md); box-shadow: var(--shadow); }
.pf-menu button { display: block; width: 100%; min-height: 40px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent;
  text-align: left; font: 500 14px/1.2 var(--font); color: var(--text); cursor: pointer; }
.pf-menu button:hover { background: var(--hover); }
.pf-menu button:focus-visible { outline: none; box-shadow: var(--focus); }
.pf-tabs { width: fit-content; max-width: 100%; margin-bottom: var(--sp-5); }
.pf-tabs button { min-height: 36px; font-size: 14px; }
.pf-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-6); align-items: start; }
.pf-sec { padding-bottom: var(--sp-5); margin-bottom: var(--sp-5); border-bottom: 1px solid var(--border); }
.pf-sec:last-child { border-bottom: 0; margin-bottom: 0; }
.pf-sec h2 { font-size: 20px; margin-bottom: var(--sp-3); }
.pf-list { list-style: none; margin: 0 0 var(--sp-2); padding: 0; }
.pf-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-top: 1px solid var(--hairline); font-size: 15px; }
.pf-list li:first-child { border-top: 0; }
.pf-l { min-width: 0; display: grid; gap: 2px; }
.pf-l small { font-size: 13px; color: var(--text-3); }
.pf-list .pc-st { flex: none; font-size: 14px; font-weight: 600; }
.pf-soft { color: var(--text-3); font-size: 13px; }
.pf-flags, .pf-text { margin-top: 8px; font-size: 14px; color: var(--text-2); }
.pf-work li { display: block; }
.pf-sum { font-size: 15px; font-weight: 600; margin-bottom: var(--sp-2); }
.pf-reviews { list-style: none; margin: 0; padding: 0; }
.pf-reviews li { padding: var(--sp-4) 0; border-top: 1px solid var(--hairline); }
.pf-reviews li:first-child { border-top: 0; }
.pf-rv-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.pf-stars { color: var(--text); letter-spacing: 1px; }
.pf-reviews p { margin-top: 6px; font-size: 15px; }
.prof-map { height: 240px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
@media (max-width: 900px) {
  .pf-top { grid-template-columns: 72px minmax(0, 1fr); gap: var(--sp-4); }
  .pf-photo { width: 72px; height: 72px; font-size: 24px; }
  .pf-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; min-width: 0; }
  .pf-actions > .nv-btn { flex: 1 1 100%; width: auto; }
  .pf-act-row { flex: 1 1 100%; }
  .pf-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pf-side { padding-top: var(--sp-5); border-top: 1px solid var(--border); }
}

/* ══════════════════════════ mission request (stepped) ══════════════════════════ */
.pm { max-width: 720px; }
.nx-steps { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 var(--sp-5); padding: 0; }
.nx-steps button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 8px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--surface); color: var(--text-2); font: 600 14px/1 var(--font); cursor: pointer; }
.nx-steps button:hover { border-color: var(--border-strong); }
.nx-steps button:focus-visible { outline: none; box-shadow: var(--focus); }
.nx-steps i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-3); font-style: normal; font-size: 13px; color: var(--text-2); }
.nx-steps [aria-current="step"] { border-color: var(--blue); color: var(--text); }
.nx-steps [aria-current="step"] i { background: var(--blue-fill); color: var(--on-accent); }
.nx-steps .done i { background: var(--ok-soft); color: var(--ok-text); }
.pm-form { display: grid; gap: var(--sp-5); }
.pm-step { display: grid; gap: var(--sp-4); }
.pm-step h2 { font-size: var(--fs-h2); }
.pm-mode { border: 0; margin: 0; padding: 0; min-width: 0; }
.pm-mode legend { padding: 0; margin-bottom: 8px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
.pm-mode-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pm-opt { display: grid; gap: 4px; align-content: start; padding: 14px 16px; text-align: left; border: 1px solid var(--border-strong); border-radius: var(--r-lg);
  background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.pm-opt b { font-size: 15px; }
.pm-opt span { font-size: 14px; color: var(--text-2); }
.pm-opt:hover { border-color: var(--blue-line); }
.pm-opt.sel { border-color: var(--blue); background: var(--blue-soft); box-shadow: 0 0 0 1px var(--blue); }
.pm-opt:focus-visible { outline: none; box-shadow: var(--focus); }
.pm-adv { border-top: 1px solid var(--border); padding-top: 4px; }
.pm-adv[open] > :not(summary) { margin-top: var(--sp-3); }
.pm-nav { display: flex; justify-content: flex-end; gap: 8px; padding-top: var(--sp-4); border-top: 1px solid var(--border); }
@media (max-width: 620px) { .pm-mode-opts { grid-template-columns: minmax(0, 1fr); } .nx-steps span { display: none; } .nx-steps [aria-current="step"] span { display: inline; } }

/* Who a quote request goes to, before anything is typed. */
.nx-invite { display: flex; align-items: center; gap: 14px; margin-bottom: var(--sp-4); padding: 12px 14px; border: 1px solid var(--blue-line); border-radius: var(--r-lg); background: var(--surface); }
.nx-invite-photo { flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); font-weight: 650; }
.nx-invite-photo img { width: 100%; height: 100%; object-fit: cover; }
.nx-invite-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.nx-invite-body span { font-size: 13px; color: var(--text-2); }
.nx-invite .nv-btn { gap: 6px; }
@media (max-width: 620px) { .nx-invite { flex-wrap: wrap; } .nx-invite-body { flex: 1 1 calc(100% - 58px); } .nx-invite .nv-btn { margin-left: 58px; } }

/* ══════════════════════════ a mission and its quotes ══════════════════════════ */
.rq-head .nv-page-actions { align-self: flex-start; }
.rq-num { margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--text-3); }
.rq-track { display: flex; list-style: none; margin: 0 0 var(--sp-4); padding: 0 0 4px; overflow-x: auto; scrollbar-width: none; }
.rq-track::-webkit-scrollbar { display: none; }
.rq-track li { position: relative; flex: 1 0 76px; display: grid; justify-items: center; gap: 6px; text-align: center; font-size: 12px; color: var(--text-3); }
.rq-track li::before { content: ""; position: absolute; top: 5px; left: -50%; width: 100%; height: 2px; background: var(--border); }
.rq-track li:first-child::before { display: none; }
.rq-track i { position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--surface); }
.rq-track li.done::before, .rq-track li.now::before { background: var(--ok); }
.rq-track li.done i { background: var(--ok); border-color: var(--ok); }
.rq-track li.done span { color: var(--text-2); }
.rq-track li.now i { background: var(--blue-fill); border-color: var(--blue-fill); }
.rq-track li.now span { color: var(--text); font-weight: 600; }
.rq-next { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--sp-4) var(--sp-5);
  padding: var(--sp-5); margin-bottom: var(--sp-6); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-2); }
.rq-next-main { flex: 1 1 320px; min-width: 0; display: grid; gap: 8px; }
.rq-next h2 { font-size: 17px; }
.rq-next p { font-size: 15px; color: var(--text-2); }
.rq-next p b { color: var(--text); }
.rq-actions { flex: 1 1 260px; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.rq-sum { max-width: 440px; margin-top: 4px; }
.rq-record { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--ok-text); }
.rq-note { display: grid; justify-items: start; gap: 8px; padding: var(--sp-4) 0; margin-bottom: var(--sp-5); border-bottom: 1px solid var(--border); }
.rq-note h2 { font-size: 17px; }
.rq-note p { font-size: 15px; color: var(--text-2); }
.rq-note.is-ok h2 { display: flex; align-items: center; gap: 6px; color: var(--ok-text); }
.rq-sec { margin-bottom: var(--sp-6); }
.rq-sec .nv-section-head { margin-bottom: var(--sp-3); }
.qt-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 12px; }
.qt-card { display: grid; gap: 14px; align-content: start; padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.qt-card.is-selected { border-color: var(--ok-line); box-shadow: 0 0 0 1px var(--ok-line); }
.qt-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.qt-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.qt-photo { flex: none; width: 48px; height: 48px; border-radius: var(--r-md); overflow: hidden; display: grid; place-items: center; background: var(--surface-3); font: 650 16px/1 var(--font-head); color: var(--text-2); }
.qt-photo img { width: 100%; height: 100%; object-fit: cover; }
.qt-who > div { min-width: 0; }
.qt-who h3 { font-size: 16px; overflow-wrap: anywhere; }
.qt-who h3 a { color: var(--text); text-decoration: none; }
.qt-who h3 a:hover { text-decoration: underline; }
.qt-who p { font-size: 13px; color: var(--text-2); }
.qt-price { flex: none; display: grid; gap: 2px; justify-items: end; text-align: right; }
.qt-price b { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.qt-price span { font-size: 13px; color: var(--text-3); }
.qt-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 0; }
.qt-facts div { min-width: 0; }
.qt-facts dt { font-size: 12px; color: var(--text-3); }
.qt-facts dd { margin: 2px 0 0; font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.qt-facts dd small { display: block; font-size: 12px; color: var(--text-3); }
.qt-wide { grid-column: 1 / -1; }
.qt-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.rq-more { display: grid; max-width: 880px; border-top: 1px solid var(--border); }
.rq-disc { padding: 6px 0; border-bottom: 1px solid var(--border); }
.rq-disc[open] { padding-bottom: var(--sp-4); }
.rq-disc > :not(summary) { margin-top: 8px; }
.rq-disc .pilot-cards { margin-top: var(--sp-3); }
.rq-sec .rq-disc { margin-top: var(--sp-4); border-top: 1px solid var(--border); }
.rq-inbox { padding: var(--sp-3) 0; font-size: 14px; }
.cl-g { margin: var(--sp-4) 0 4px; font-size: 13px; font-weight: 600; color: var(--text-3); }
.cl-list { list-style: none; margin: 0; padding: 0; }
.cl-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--hairline); font-size: 14px; }
.cl-mark { color: var(--danger-text); }
.cl-list li.ok .cl-mark { color: var(--ok-text); }
.cl-list li.warn .cl-mark { color: var(--warn-text); }
.cl-l small { display: block; font-size: 13px; color: var(--text-3); }
.cl-missing { margin: 8px 0; font-size: 14px; color: var(--warn-text); }
.nx-cl-src { font-size: 13px; color: var(--text-3); white-space: nowrap; }
.ctx-notes { margin: 0; }
.ctx-notes dt { margin-top: 10px; font-size: 13px; color: var(--text-3); }
.ctx-notes dt:first-child { margin-top: 0; }
.ctx-notes dd { margin: 2px 0 0; font-size: 15px; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 620px) {
  .cl-list li { grid-template-columns: 20px minmax(0, 1fr); }
  .nx-cl-src { grid-column: 2; }
  .qt-facts { grid-template-columns: minmax(0, 1fr); }
  .rq-actions { justify-content: flex-start; }
  .rq-next { padding: var(--sp-4); }
}

/* ══════════════════════════ missions ══════════════════════════ */
/* One row pattern for Missions, Records, Aircraft, Sites, Recurring missions
   and Settings: a single surface, hairlines between rows, the name and one
   line of facts on the left, then status, value and one action. Phones stack. */
.nx-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.nx-list[hidden] { display: none; }
.nx-li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, auto) minmax(96px, auto) auto; align-items: center; gap: var(--sp-4);
  min-height: 64px; padding: 12px 16px; border-top: 1px solid var(--hairline); transition: background 0.14s; }
.nx-li:first-child { border-top: 0; }
.nx-li[hidden] { display: none; }
.nx-li:has(.nx-li-link):hover { background: var(--surface-2); }
.nx-li-main { min-width: 0; display: grid; gap: 2px; }
.nx-li-main b, .nx-li-link { font-size: 16px; font-weight: 600; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
/* The name's link covers the row; the action sits above it. */
.nx-li-link::after { content: ""; position: absolute; inset: 0; }
.nx-li-link:focus-visible { outline: none; }
.nx-li:has(.nx-li-link:focus-visible) { box-shadow: inset var(--focus); }
.nx-li-main small { font-size: var(--fs-sm); color: var(--text-2); overflow-wrap: anywhere; }
.nx-li-match { color: var(--text-3); }
.nx-li-val { display: grid; justify-items: end; text-align: right; font-size: 16px; font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nx-li-val small { font-size: 12px; font-weight: 400; color: var(--text-3); }
.nx-li-none { font-size: 14px; font-weight: 400; color: var(--text-3); }
.nx-li-act { position: relative; z-index: 1; display: flex; gap: 6px; justify-content: flex-end; align-items: center; min-width: 0; }
.nx-li-act:empty { display: none; }
/* One status word: a small dot and the word, never a loud pill. */
.nx-st { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500; color: var(--text-2); white-space: nowrap; }
.nx-st::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--unknown, var(--text-3)); }
.nx-st-ok { color: var(--ok-text); } .nx-st-ok::before { background: var(--ok); }
.nx-st-warn { color: var(--warn-text); } .nx-st-warn::before { background: var(--warn); }
.nx-st-danger { color: var(--danger-text); } .nx-st-danger::before { background: var(--danger); }
.nx-st-info { color: var(--blue-text); } .nx-st-info::before { background: var(--blue); }
.nx-st-plain::before { display: none; }

.jb-head { align-items: flex-start; }
.jb-head .nx-links { margin: var(--sp-2) 0 0; }
.jb-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin: var(--sp-4) 0; }
.jb-tabs { flex: 0 1 auto; max-width: 100%; }
.jb-tabs button { min-height: 36px; padding: 0 14px; font-size: 14px; white-space: nowrap; }
.jb-maptoggle { gap: 6px; }
.jb-maptoggle .nx-ico { width: 16px; height: 16px; }
.jb-maptoggle[aria-pressed="true"] { border-color: var(--blue-line); color: var(--blue-text); background: var(--blue-soft); }
.jb-map { height: clamp(280px, 40vh, 420px); margin-bottom: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.jb-map[hidden] { display: none; }
#jb-empty { border: 1px solid var(--border); border-radius: var(--r-lg); }
@media (max-width: 900px) {
  .nx-li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main val" "st act"; gap: 6px var(--sp-3); padding: 14px 16px; }
  .nx-li > .nx-li-main { grid-area: main; }
  .nx-li > .nx-st { grid-area: st; }
  .nx-li > .nx-li-val { grid-area: val; align-self: start; }
  .nx-li > .nx-li-act { grid-area: act; }
}
@media (max-width: 520px) {
  .nx-li-act .nv-btn { min-height: 44px; }
  .nx-li > .nx-li-act { flex-wrap: wrap; }
  .jb-bar { flex-direction: column; align-items: stretch; }
  .jb-maptoggle { align-self: flex-start; }
}

/* Records (same shape as the organization Records page). */
.rx-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin: var(--sp-4) 0; }
.rx-search { flex: 0 1 360px; min-width: 0; }
.rx-search input { width: 100%; }
.nx-filter-btn { gap: 6px; }
.nx-filter-btn .nx-ico { width: 16px; height: 16px; }
.nx-filter-btn .nv-tab-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--blue-soft); color: var(--blue-text); font-size: 12px; display: inline-grid; place-items: center; }
.rx-li { grid-template-columns: minmax(0, 1fr) 130px 150px 130px 16px; }
.rx-when { font-size: 14px; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rx-chev { display: inline-flex; color: var(--text-3); }
.rx-chev .nx-ico { width: 16px; height: 16px; }
@media (max-width: 900px) {
  .rx-li { grid-template-columns: minmax(0, 1fr) 16px; grid-template-areas: "main chev" "when chev" "pay chev" "rec chev"; gap: 4px var(--sp-3); }
  .rx-li > .nx-li-main { grid-area: main; }
  .rx-li > .rx-when { grid-area: when; font-size: var(--fs-sm); }
  .rx-li > .nx-st:nth-of-type(2) { grid-area: pay; }
  .rx-li > .nx-st:nth-of-type(3) { grid-area: rec; }
  .rx-li > .rx-chev { grid-area: chev; }
  .rx-search { flex: 1 1 100%; }
}

/* Aircraft (pilot). */
.ac-li { grid-template-columns: minmax(0, 1fr) minmax(160px, 220px) minmax(140px, 180px) auto; }
.ac-li .pc-chips { margin-top: 4px; }
.ac-cell { display: grid; gap: 2px; min-width: 0; }
.ac-cell small { font-size: 12px; color: var(--text-3); }
.ac-cell b { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.ac-cell .nx-st { font-size: 13px; }
@media (max-width: 900px) {
  .ac-li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "main main" "reg rid" "act act"; }
  .ac-li > .ac-cell:nth-of-type(1) { grid-area: reg; }
  .ac-li > .ac-cell:nth-of-type(2) { grid-area: rid; }
}

/* Sites, Recurring missions: a row with several quiet actions. */
@media (min-width: 901px) { .st-row { grid-template-columns: minmax(0, 1fr) auto auto auto; } }
.st-row .nx-li-val:empty { display: none; }
@media (max-width: 900px) {
  .st-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main main" "st val" "act act"; }
  .st-row > .nx-li-act { justify-content: flex-start; flex-wrap: wrap; }
}

/* ══════════════════════════ Mission inbox ══════════════════════════ */
.ib-head { margin-bottom: var(--sp-4); }
.ib-empty { min-height: 360px; justify-content: center; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.ib { display: grid; grid-template-columns: 300px minmax(0, 1fr) 320px; height: calc(100svh - var(--top-h) - 150px); min-height: 520px;
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.ib-list { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; border-right: 1px solid var(--border); }
.ib-list .nv-empty { margin: var(--sp-3); }
.ib-find { padding: 12px; border-bottom: 1px solid var(--border); }
.ib-rows { list-style: none; margin: 0; padding: 0; }
.convo-row { display: grid; gap: 2px; width: 100%; min-height: 64px; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--hairline);
  background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.convo-row:hover { background: var(--surface-2); }
.convo-row.on { background: var(--blue-soft); box-shadow: inset 3px 0 0 var(--blue); }
.convo-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--blue); }
.cr-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cr-top b { font-size: 15px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-top time { flex: none; font-size: 12px; color: var(--text-3); }
.cr-mission { font-size: 13px; font-weight: 600; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.convo-row .prev { font-size: 13px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ib-thread > .nv-empty, .ib-thread > .nv-loading { margin: var(--sp-4); }
.thread-head { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); min-height: 60px; }
.th-who { flex: 1; min-width: 0; display: grid; }
.th-who b { font-size: 16px; }
.th-who span { font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-back, .ib-info { display: none; }
.ib-back .nx-ico { width: 16px; height: 16px; }
.thread-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: var(--sp-4); }
.bubble { max-width: 72%; padding: 10px 14px; border-radius: var(--r-lg); font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.bubble.me { align-self: flex-end; background: var(--blue-fill); color: var(--on-accent); }
.bubble.them { align-self: flex-start; background: var(--surface-3); color: var(--text); }
.bubble time { display: block; margin-top: 4px; font-size: 12px; opacity: 0.85; }
.msg-sys { text-align: center; }
.msg-sys span { display: inline-block; padding: 3px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); font-size: 12px; color: var(--text-2); }
.msg-none { text-align: center; }
.ib-quote { align-self: stretch; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin: 4px 0;
  padding: 12px 14px; border: 1px solid var(--blue-line); border-radius: var(--r-lg); background: var(--surface); }
.ib-quote-main { display: grid; gap: 2px; min-width: 0; }
.ib-quote-main b { font-size: 15px; }
.ib-quote-main span { font-size: 13px; color: var(--text-2); }
.ib-quote-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.thread-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); }
.thread-input input { flex: 1; min-width: 0; }
.ib-ctx { display: grid; align-content: start; gap: var(--sp-4); min-height: 0; overflow-y: auto; padding: var(--sp-4); border-left: 1px solid var(--border); }
.ib-ctx .ib-back { justify-self: start; }
.ctx-top h2 { font-size: 18px; overflow-wrap: anywhere; }
.ctx-top p:last-child { margin-top: 8px; }
.ctx-sec h2 { font-size: 18px; margin-bottom: 8px; }
.ctx-tabs { width: 100%; }
.ctx-tabs button { flex: 1 1 auto; padding: 0 8px; }
.ctx-panel { display: grid; gap: 12px; }
.ctx-panel .nv-kv { font-size: 14px; }
.ctx-panel .nv-empty { padding: var(--sp-5) var(--sp-2); }
.ctx-price { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ctx-text { font-size: 14px; color: var(--text-2); white-space: pre-wrap; }
@media (max-width: 1180px) {
  .ib { grid-template-columns: 280px minmax(0, 1fr); }
  .ib-ctx { display: none; border-left: 0; }
  .ib-info, .ib-ctx .ib-back { display: inline-flex; }
  .ib[data-pane="ctx"] .ib-thread { display: none; }
  .ib[data-pane="ctx"] .ib-ctx { display: grid; }
}
@media (max-width: 760px) {
  .ib { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; }
  .ib-list, .ib-thread, .ib-ctx { display: none; }
  .ib-list { border-right: 0; }
  .ib[data-pane="list"] .ib-list { display: flex; }
  .ib[data-pane="thread"] .ib-thread { display: flex; height: calc(100svh - var(--shell-h) - 150px); min-height: 420px; }
  .ib[data-pane="ctx"] .ib-ctx { display: grid; }
  .thread-head .ib-back { display: inline-flex; }
  .bubble { max-width: 88%; }
}

/* ══════════════════════════ settings and payments ══════════════════════════ */
.st-sec { display: grid; gap: 12px; max-width: 760px; padding: var(--sp-5) 0; border-top: 1px solid var(--border); }
.st-sec h2 { font-size: 20px; }
.st-sec .nx-row { padding: 8px 0; min-height: 0; }
.st-sec .nx-row-actions { justify-content: flex-start; }
.st-sec .nv-help { max-width: 64ch; }
.st-kv { max-width: 520px; grid-template-columns: 140px minmax(0, 1fr); }
.st-kv dd { text-align: left; }
.st-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.st-links { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: var(--fs-sm); }
.st-links a { min-height: 32px; display: inline-flex; align-items: center; }
.st-li { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 520px) { .st-kv { grid-template-columns: minmax(0, 1fr); gap: 2px; } .st-kv dd { margin-bottom: 8px; } .st-acts .nv-btn { flex: 1 1 100%; } }
.pay-kv { max-width: 420px; }
.rec-list { margin-top: var(--sp-2); }

/* Pilot passport rows (the pilot's own dashboard). */
.nx-pp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 220px); gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--hairline); }
.nx-pp-row:last-child { border-bottom: 0; }
.nx-pp-state { font-size: 13px; font-weight: 600; white-space: nowrap; }
.nx-pp-basis { font-size: 13px; color: var(--text-3); text-align: right; }
@media (max-width: 620px) {
  .nx-pp-row { grid-template-columns: minmax(0, 1fr) auto; }
  .nx-pp-basis { grid-column: 1 / -1; text-align: left; }
}

/* ══════════════════════════ onboarding ══════════════════════════ */
.ob-wrap { max-width: 720px; margin: 0 auto; }
.ob-meta { margin: 0 0 var(--sp-4); font-size: var(--fs-sm); color: var(--text-3); }
.ob-meta b { color: var(--text-2); font-weight: 600; }
.ob-back { display: inline-block; margin-bottom: var(--sp-3); font-size: var(--fs-sm); }
.ob-paths { display: grid; gap: var(--sp-3); margin: var(--sp-5) 0 var(--sp-4); }
.ob-path { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--sp-3); align-items: start; width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit; padding: var(--sp-4) var(--sp-5); }
.ob-path:hover { border-color: var(--blue-line); }
.ob-path:focus-visible { box-shadow: var(--focus); outline: none; }
.ob-path.sel { border-color: var(--blue); background: var(--blue-soft); }
.ob-path-radio { width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--surface-3); position: relative; }
.ob-path.sel .ob-path-radio { border-color: var(--blue); }
.ob-path.sel .ob-path-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--blue); }
.ob-path-body b { display: block; font-size: 16px; margin-bottom: 4px; }
.ob-path-body > span { display: block; color: var(--text-2); font-size: var(--fs-body); line-height: 1.5; }
.ob-foot { margin: var(--sp-4) 0 0; font-size: var(--fs-sm); color: var(--text-3); text-align: center; }
.ob-foot b { color: var(--text-2); font-weight: 600; }
.ob-wrap .form-actions { justify-content: center; }
.view > .ob-wrap { max-width: 720px; }
.view > .ob-wrap.ob-narrow { max-width: 560px; }
.nv-field > .nv-field-help { font-weight: 400; font-size: var(--fs-sm); color: var(--text-3); margin-bottom: 0; }
.nx-modal .nv-field + .nv-field, .nx-modal .pm-adv .nv-field { margin-top: 4px; }
.nx-modal .pm-adv[open] { display: grid; gap: 12px; }
.ob-head { margin-bottom: var(--sp-5); }
.ob-dots { margin-bottom: var(--sp-2); gap: 0; flex-wrap: nowrap; }
.ob-dots li { display: flex; align-items: center; flex: 1 1 0; }
.ob-dots li:last-child { flex: 0 0 auto; }
.ob-dots li:not(:last-child)::after { content: ""; flex: 1; height: 2px; margin: 0 8px; background: var(--border); }
.ob-dots li.done:not(:last-child)::after { background: var(--ok); }
.ob-dots i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-3); font-style: normal; font-size: 13px; font-weight: 600; color: var(--text-2); }
.ob-dots [aria-current="step"] i { background: var(--blue-fill); color: var(--on-accent); }
.ob-dots .done i { background: var(--ok-soft); color: var(--ok-text); }
.ob-dots .nx-ico { width: 14px; height: 14px; stroke-width: 2.5; }
.ob-head .ob-meta { margin: 0; }
.ob-form { margin-top: var(--sp-4); }
.ob-wrap .pm-nav { margin-top: var(--sp-5); }
.ob-wrap .ob-paths { margin-top: var(--sp-4); }
@media (max-width: 600px) { .ob-path { padding: var(--sp-4); } }

/* The five onboarding stages the server reports, so the header and the
   checklist can never disagree about where you are. */
.ob-prog { margin: 0 0 26px; }
.ob-steps { display: flex; align-items: flex-start; gap: 0; }
.ob-st { flex: 1; position: relative; text-align: center; min-width: 0; }
.ob-st::before { content: ""; position: absolute; top: 13px; left: -50%; width: 100%; height: 2px; background: var(--border); }
.ob-st:first-child::before { display: none; }
.ob-st.done::before, .ob-st.now::before { background: var(--blue); }
.ob-st i { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; margin: 0 auto; border-radius: 50%;
  border: 2px solid var(--border); background: var(--bg); font-size: 12px; font-weight: 700; font-style: normal; color: var(--text-2); }
.ob-st i .nx-ico { width: 14px; height: 14px; stroke-width: 2.5; }
.ob-st.done i { border-color: var(--ok); background: var(--ok); color: var(--on-accent); }
.ob-st.now i { border-color: var(--blue); color: var(--blue-text); box-shadow: var(--focus); }
.ob-st span { display: block; margin-top: 8px; font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-st.now span { color: var(--text); font-weight: 600; }
.ob-st.done span { color: var(--ok-text); }
.ob-prog .ob-meta { margin-top: 14px; text-align: center; }

/* ══════════════════════════ pilot profile builder ══════════════════════════ */
.pb-progress { display: grid; gap: 10px; padding: var(--sp-4) 0 var(--sp-5); }
.pb-progress-line { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; }
.pb-progress-line b { font-size: 16px; }
.pb-progress-line > span { font-size: var(--fs-sm); color: var(--text-2); }
.pb-progress-line .nv-btn { margin-left: auto; }
.pb-progress .cmp-list { margin-top: 4px; }
.pb-progress .cmp-list .nv-linkbtn { font-weight: 600; text-align: left; }
.pb-secs { border-top: 1px solid var(--border); }
.pb-sec { border-bottom: 1px solid var(--border); }
.pb-sec > summary { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 4px; cursor: pointer; list-style: none; border-radius: var(--r-md); }
.pb-sec > summary::-webkit-details-marker { display: none; }
.pb-sec > summary::before { content: ""; flex: none; width: 7px; height: 7px; margin: 0 4px 0 2px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: rotate(-45deg); transition: transform 0.15s; }
.pb-sec[open] > summary::before { transform: rotate(45deg); }
.pb-sec > summary:hover { background: var(--surface-2); }
.pb-sec > summary:focus-visible { outline: none; box-shadow: var(--focus); }
.pb-title { font: 650 18px/1.3 var(--font-head, var(--font)); color: var(--text); }
.pb-sum { margin-left: auto; min-width: 0; font-size: var(--fs-sm); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; }
.pb-sec > summary .nx-st { margin-left: auto; font-size: 13px; }
.pb-body { display: grid; gap: var(--sp-4); padding: 4px 4px var(--sp-5) 27px; }
.pb-body .nv-field > span { display: block; margin-bottom: 8px; }
.pb-wide { grid-column: 1 / -1; }
.pb-sub { margin-top: var(--sp-2); font-size: 15px; font-weight: 650; }
.pb-sub small { margin-left: 6px; font-size: 13px; font-weight: 400; color: var(--text-3); }
.pb-photo-row { display: flex; align-items: center; gap: 16px; }
.pb-photo { flex: none; width: 76px; height: 76px; border-radius: var(--r-md); overflow: hidden; display: grid; place-items: center; background: var(--surface-3); }
.pb-photo img { width: 100%; height: 100%; object-fit: cover; }
.pb-photo .pc-initials { font-size: 26px; }
.pb-upload { cursor: pointer; }
.pb-photo-row .nv-help { margin-top: 6px; }
.pb-avail { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 8px; }
.pb-avail legend { padding: 0; margin-bottom: 8px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
.pb-avail .nv-seg { width: fit-content; max-width: 100%; }
.pb-avail .nv-seg button { min-height: 36px; padding: 0 14px; }
.pb-avail .nv-seg button[aria-checked="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.pb-status { font-size: 15px; display: flex; align-items: center; gap: 10px; }
.pb-disc h3 { font-size: 15px; margin-bottom: 10px; }
.pb-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding-top: var(--sp-3); border-top: 1px solid var(--hairline); }
@media (max-width: 620px) {
  .pb-body { padding-left: 4px; }
  .pb-sum { display: none; }
  .pb-foot .nv-btn { flex: 1 1 auto; }
  .pb-progress-line .nv-btn { margin-left: 0; }
}

/* completion bar + checklist */
.cmp-bar { height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
.cmp-bar i { display: block; height: 100%; border-radius: 999px; background: var(--blue-fill); transition: width 0.5s ease; }
.cmp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.cmp-head b { font-size: 15px; }
.cmp-head span { font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.cmp-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px; }
.cmp-list li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--border); font-size: 14px; }
.cmp-list li:first-child { border-top: none; }
.cmp-list li em { font-style: normal; display: block; margin-top: 2px; font-size: 13px; color: var(--text-2); line-height: 1.5; }
.cmp-mark { display: inline-flex; align-self: start; padding-top: 3px; font-size: 13px; line-height: 1.5; }
.cmp-mark .nx-ico { width: 14px; height: 14px; }
.cmp-list li.done { color: var(--text-2); }
.cmp-list li.done .cmp-mark { color: var(--ok-text); }
.cmp-list li.done em { display: none; }
.cmp-list li.todo .cmp-mark { color: var(--warn-text); }
.cmp-list li.opt .cmp-mark { color: var(--text-3); }
.cmp-req { font-size: 13px; font-weight: 600; color: var(--warn-text); white-space: nowrap; }
.cmp-opt { font-size: 13px; color: var(--text-2); white-space: nowrap; }

/* what becomes public */
.disc { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 4px; }
.disc h4 { margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.disc-pub h4 { color: var(--blue-text); }
.disc-priv h4 { color: var(--ok-text); }
.disc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.disc li { position: relative; padding-left: 16px; font-size: 13px; color: var(--text-2); line-height: 1.5; }
.disc li::before { position: absolute; left: 0; top: 0; }
.disc-pub li::before { content: "◇"; color: var(--blue-text); }
.disc-priv li::before { content: "🔒"; font-size: 9px; top: 2px; }

@media (max-width: 620px) {
  .ob-st span { display: none; }
  .ob-st.now span { display: block; position: absolute; left: 50%; transform: translateX(-50%); width: 120px; }
  /* The first and last step's label sat centred on a dot at the edge and ran
     off the screen ("Published" at step 5); anchor them to that edge. */
  .ob-st.now:first-child span { left: 0; transform: none; text-align: left; }
  .ob-st.now:last-child span { left: auto; right: 0; transform: none; text-align: right; }
  .ob-steps { padding-bottom: 22px; }
  .disc { grid-template-columns: 1fr; }
  .cmp-list li { grid-template-columns: 18px minmax(0, 1fr); }
  .cmp-req, .cmp-opt { grid-column: 2; margin-top: 2px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Phones — the pilot's mission-day device. Accept, preflight, begin, upload
   and complete all happen one-handed in a field.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .view { padding: 20px 16px 64px; }
  /* 16px stops iOS zooming the whole page on focus. */
  .field input, .field select, .field textarea,
  .search-box input, .search-box select,
  .nv-input, .nv-select, .nv-textarea { font-size: 16px; }
  .form-grid { grid-template-columns: 1fr; }
  .search-box, .search-box.search-box-4 { grid-template-columns: 1fr; }
  .widgets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .li-row { flex-wrap: wrap; gap: 8px; }
  .nx-row { flex-wrap: wrap; }
  .nx-row-side { justify-items: start; text-align: left; }
  .nx-row-acts { justify-content: flex-start; }
  .nx-overlay { padding: 10px; align-items: flex-start; }
  .nx-modal { max-width: none; padding: 18px; }
  .form-actions { gap: 8px; }
  .form-actions .btn, .form-actions .nv-btn { flex: 1 1 auto; justify-content: center; }
  .pm-nav .nv-btn { flex: 1; }
  .btn { min-height: 44px; }
  .btn.sm { min-height: 40px; }
  .page-h { font-size: 26px; }
}
@media (max-width: 480px) { .widgets { grid-template-columns: 1fr; } }

/* Respect a user who asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── the open board, signed out (viewPublicBoard) ───────────────────────── */
.pb-board { margin-top: var(--sp-4); }
.pb-row { cursor: default; }
.pb-asks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pb-asks .nv-badge { font-size: 12px; }
@media (max-width: 600px) { .pb-row .nx-row-side { text-align: left; } }