/* VectorBid app grade — "night flight deck at cruise" (VB-P7-012, extracted
   from docs/design/mockups/app.css, S12/VB-P7-011). Token sheet is canonical
   in docs/design/DESIGN-SYSTEM.md §1; the :root below must match it
   byte-for-byte (scripts/ac-checks/VB-P7-012.sh diffs the pairs).
   One hand-written stylesheet — no build step (strategy §4). */

:root{
  /* ground */
  --void:#0a0e13; --panel:#111823; --panel-2:#0d141d; --raise:#16202c;
  /* ink */
  --ink:#eef2f6; --ink-2:#c3ced9; --dim:#7d8b99; --faint:#55626f; --caveat:#8fa0b0;
  /* lines */
  --line:rgba(255,255,255,.075); --line-2:rgba(255,255,255,.12);
  /* signal */
  --amber:#ffb020; --amber-2:#ffca6b; --amber-ink:#1a1204;
  --cyan:#5ad1cf; --cyan-dim:#2a6b6d;
  --red:#ff8a75; --red-dim:rgba(255,138,117,.32);
  /* type families */
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Plex Mono",ui-monospace,"SF Mono","Cascadia Code",Menlo,monospace;
  /* space (4px base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  /* radius */
  --r-s:6px; --r-m:10px; --r-l:14px; --r-xl:16px; --r-pill:999px;
  /* motion */
  --t-fast:.15s; --t-med:.2s; --t-enter:.5s; --ease:cubic-bezier(.2,.8,.2,1);
  /* layout */
  --maxw:1120px;
}

/* ---- fonts (self-hosted; same eight files as the landing) ---------------- */
@font-face { font-family:"Fraunces"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/static/fonts/fraunces-400.woff2") format("woff2"); }
@font-face { font-family:"Fraunces"; font-style:normal; font-weight:600; font-display:swap;
  src:url("/static/fonts/fraunces-600.woff2") format("woff2"); }
@font-face { font-family:"Fraunces"; font-style:normal; font-weight:900; font-display:swap;
  src:url("/static/fonts/fraunces-900.woff2") format("woff2"); }
@font-face { font-family:"Plex Sans"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/static/fonts/ibm-plex-sans-400.woff2") format("woff2"); }
@font-face { font-family:"Plex Sans"; font-style:normal; font-weight:500; font-display:swap;
  src:url("/static/fonts/ibm-plex-sans-500.woff2") format("woff2"); }
@font-face { font-family:"Plex Sans"; font-style:normal; font-weight:600; font-display:swap;
  src:url("/static/fonts/ibm-plex-sans-600.woff2") format("woff2"); }
@font-face { font-family:"Plex Mono"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/static/fonts/ibm-plex-mono-400.woff2") format("woff2"); }
@font-face { font-family:"Plex Mono"; font-style:normal; font-weight:500; font-display:swap;
  src:url("/static/fonts/ibm-plex-mono-500.woff2") format("woff2"); }

/* ---- ground --------------------------------------------------------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background-color:var(--void); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.55; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  /* the landing's sky at half alpha: cabin lights dimmed for work */
  background-image:
    radial-gradient(120% 70% at 50% -8%, rgba(255,176,32,.05), transparent 55%),
    radial-gradient(80% 55% at 88% -4%, rgba(90,209,207,.03), transparent 55%),
    linear-gradient(rgba(255,255,255,.020) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.020) 1px, transparent 1px);
  background-size:100% 900px, 100% 700px, 58px 58px, 58px 58px;
  background-repeat:no-repeat, no-repeat, repeat, repeat;
  background-position:center top;
}
a{color:var(--amber-2); text-decoration:none}
a:hover{color:var(--amber)}
::selection{background:rgba(255,176,32,.28); color:#fff}
:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(255,176,32,.16), 0 0 0 1px var(--amber)}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--s5)}
main.wrap{padding-top:var(--s5); padding-bottom:var(--s8)}

/* ---- type roles ------------------------------------------------------------ */
h1{font-family:var(--serif); font-weight:600; font-size:clamp(1.6rem,3vw,2.1rem);
  line-height:1.1; letter-spacing:-.01em; margin:0 0 var(--s2); color:var(--ink)}
h2{font-family:var(--serif); font-weight:600; font-size:1.25rem; line-height:1.2;
  margin:var(--s5) 0 var(--s2); color:var(--ink)}
.brass{font-family:var(--serif); font-weight:600; font-size:1.7rem; line-height:1.15;
  letter-spacing:.01em}
.eyebrow{font-family:var(--mono); font-size:.68rem; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--amber); margin:0}
.label{font-family:var(--mono); font-size:.68rem; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim)}
.mono{font-family:var(--mono)}
.tnum,.mono{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1}
.muted{color:var(--dim)}
.small{font-size:.85rem}
.pkg-line{font-family:var(--mono); font-size:.8rem; color:var(--dim); letter-spacing:.03em;
  margin:0 0 var(--s5)}

/* liability text — reserved role, --caveat floor (DESIGN-SYSTEM §4) */
.caveat{font-family:var(--mono); font-size:.74rem; letter-spacing:.02em; color:var(--caveat);
  margin:var(--s3) 0 0; line-height:1.55}
.err{color:var(--red); font-family:var(--mono); font-size:.76rem; margin:var(--s2) 2px 0}

/* ---- header + status line -------------------------------------------------- */
.top{position:sticky; top:0; z-index:20; backdrop-filter:blur(10px);
  background:linear-gradient(var(--void),rgba(10,14,19,.72)); border-bottom:1px solid var(--line)}
.top .bar{display:flex; align-items:center; justify-content:space-between; height:60px}
.brand{font-family:var(--mono); font-weight:500; letter-spacing:.30em; font-size:.9rem;
  color:var(--ink); text-transform:uppercase; display:flex; align-items:center; gap:.7ch}
.brand .dot{width:7px; height:7px; border-radius:50%; background:var(--amber);
  box-shadow:0 0 10px 1px rgba(255,176,32,.8); animation:beacon 3.4s ease-in-out infinite}
@keyframes beacon{0%,100%{opacity:1}50%{opacity:.35}}
.top nav{display:flex; gap:var(--s4); font-family:var(--mono); font-size:.8rem}
.top nav a{color:var(--ink-2); padding:var(--s2) var(--s2); letter-spacing:.04em}
.top nav a:hover{color:var(--amber)}
.top nav a[aria-current=page]{color:var(--amber); border-bottom:2px solid var(--amber)}
.statusline{border-bottom:1px solid rgba(255,176,32,.16); background:rgba(255,176,32,.055)}
.statusline .wrap{padding-top:6px; padding-bottom:6px; font-family:var(--mono);
  font-size:.72rem; letter-spacing:.02em; color:var(--amber-2); line-height:1.5}

/* ---- buttons ---------------------------------------------------------------- */
.btn{font-family:var(--mono); font-weight:500; letter-spacing:.04em; font-size:.9rem;
  cursor:pointer; display:inline-block; color:var(--amber-ink); background:var(--amber);
  border:1px solid var(--amber); border-radius:var(--r-m); padding:12px 18px; min-height:44px;
  white-space:nowrap; text-decoration:none;
  transition:transform var(--t-fast), box-shadow var(--t-med), background var(--t-med)}
.btn:hover{background:var(--amber-2); color:var(--amber-ink);
  box-shadow:0 6px 22px -6px rgba(255,176,32,.55)}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--amber); color:var(--amber); background:transparent; box-shadow:none}
.btn--quiet{background:transparent; border-color:transparent; color:var(--amber-2)}
.btn--quiet:hover{color:var(--amber); background:transparent; box-shadow:none}

/* ---- inputs ------------------------------------------------------------------ */
input[type=email],input[type=text],input:not([type]),select{
  width:100%; font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:var(--panel-2); border:1px solid var(--line-2); border-radius:var(--r-m);
  padding:10px 12px; min-height:44px; outline:none;
  transition:border-color var(--t-med), box-shadow var(--t-med)}
input::placeholder{color:var(--faint)}
input:focus,select:focus{border-color:var(--amber); box-shadow:0 0 0 3px rgba(255,176,32,.16)}
select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),
    linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size:5px 5px; background-repeat:no-repeat; padding-right:34px}
select[multiple]{background-image:none; padding-right:12px; min-height:0; height:auto}
input[type=checkbox],input[type=radio]{accent-color:var(--amber); width:18px; height:18px}

/* ---- chips (variant = meaning; DESIGN-SYSTEM §2) ------------------------------ */
.chip{display:inline-block; font-family:var(--mono); font-size:.72rem; letter-spacing:.03em;
  color:var(--ink-2); background:var(--panel-2); border:1px solid var(--line-2);
  border-radius:var(--r-s); padding:3px 8px; margin:0 4px 4px 0; white-space:nowrap;
  font-variant-numeric:tabular-nums}
.chip--data{color:var(--cyan); border-color:var(--cyan-dim); background:rgba(90,209,207,.06)}
.chip--warn{color:var(--amber-2); border-color:rgba(255,176,32,.35); background:rgba(255,176,32,.07)}
.chip--alert{color:var(--red); border-color:var(--red-dim); background:rgba(255,138,117,.07)}

/* ---- cards / wells -------------------------------------------------------------- */
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-l);
  padding:var(--s4) var(--s4)}
.well{background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-m);
  padding:var(--s3) var(--s4)}

/* ---- readout (signature frame — one per region) ---------------------------------- */
.readout{background:linear-gradient(160deg,var(--panel),var(--panel-2)); border:1px solid var(--line-2);
  border-radius:var(--r-xl); padding:4px;
  box-shadow:0 30px 80px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.04);
  margin:0 0 var(--s5)}
.readout-in{border:1px solid var(--line); border-radius:13px; padding:var(--s4) var(--s4) var(--s4);
  background:rgba(0,0,0,.16)}
.readout h2{margin-top:0}
.hold-headline{font-size:1.02rem; margin:var(--s1) 0 var(--s2); color:var(--ink-2)}
.hold-headline b{color:var(--ink); font-weight:600}

/* ---- seniority axis ---------------------------------------------------------------- */
.axis{position:relative; height:44px; margin:var(--s4) 0 2px}
.axis .track{position:absolute; left:0; right:0; top:26px; height:8px; border-radius:5px;
  background:var(--panel); border:1px solid var(--line)}
.axis .band{position:absolute; top:26px; height:8px; border-radius:5px;
  background:linear-gradient(90deg, rgba(90,209,207,.25), rgba(90,209,207,.6));
  box-shadow:0 0 14px rgba(90,209,207,.3); animation:grow var(--t-enter) var(--ease) both}
.axis .band--dense{background:linear-gradient(90deg, rgba(90,209,207,.55), rgba(90,209,207,.85));
  box-shadow:none}
@keyframes grow{from{transform:scaleX(0); transform-origin:left}to{transform:scaleX(1)}}
.axis .tick{position:absolute; top:19px; width:2px; height:22px; background:var(--cyan)}
.axis .you{position:absolute; top:6px; width:2px; height:38px; background:var(--amber);
  box-shadow:0 0 10px rgba(255,176,32,.7)}
.axis .lbl{position:absolute; top:-4px; transform:translateX(-50%); font-family:var(--mono);
  font-size:.6rem; letter-spacing:.06em; white-space:nowrap; color:var(--cyan)}
.axis .lbl--you{color:var(--amber); top:-16px}
.axis-ends{display:flex; justify-content:space-between; font-family:var(--mono); font-size:.62rem;
  letter-spacing:.06em; color:var(--dim); margin-top:2px}

/* ---- verdict ------------------------------------------------------------------------ */
.verdict{font-family:var(--serif); font-style:italic; font-weight:600; font-size:1.15rem;
  color:var(--ink); background:var(--raise); border-left:3px solid var(--amber);
  border-radius:0 var(--r-m) var(--r-m) 0; padding:var(--s3) var(--s4); margin:var(--s4) 0}

/* ---- trip rows ----------------------------------------------------------------------- */
.trip-row{display:grid; grid-template-columns:8.5rem 1fr 11rem; gap:4px var(--s4);
  grid-template-areas:"head main nums"; align-items:center;
  background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-l);
  padding:var(--s3) var(--s4); margin-bottom:var(--s2); text-decoration:none; color:var(--ink);
  min-height:44px; transition:border-color var(--t-med), background var(--t-med)}
.trip-row:hover{border-color:var(--line-2); background:var(--raise); color:var(--ink)}
.trip-head{grid-area:head}
.trip-main{grid-area:main}
.trip-id{font-family:var(--mono); font-weight:600; font-size:1.05rem;
  font-variant-numeric:tabular-nums; color:var(--ink)}
.trip-facts{color:var(--dim); font-size:.8rem; font-family:var(--mono); letter-spacing:.02em;
  margin-top:2px}
.trip-nums{grid-area:nums; text-align:right; font-family:var(--mono);
  font-variant-numeric:tabular-nums; font-size:.86rem; color:var(--ink-2); line-height:1.5}
.trip-nums b{color:var(--ink); font-weight:500; font-size:1rem}
.held{color:var(--cyan); font-family:var(--mono); font-size:.74rem}
.held--thin{color:var(--amber-2)}
.held--none{color:var(--dim)}
.trip-nums .chip{white-space:normal; line-height:1.45; margin-right:0}
.trip-main .chip{white-space:normal; line-height:1.45}
@media(max-width:720px){
  .trip-row{grid-template-columns:1fr auto; grid-template-areas:"head nums" "main main"}
}

/* ---- filter / preference console ------------------------------------------------------ */
.console{margin:0 0 var(--s4)}
.console > summary{cursor:pointer; font-family:var(--mono); font-size:.85rem; font-weight:500;
  letter-spacing:.06em; color:var(--ink-2); padding:var(--s2) 0; min-height:44px;
  display:flex; align-items:center; gap:8px; list-style:none}
.console > summary::-webkit-details-marker{display:none}
.console > summary::before{content:"▸"; color:var(--amber); transition:transform var(--t-med)}
.console[open] > summary::before{transform:rotate(90deg)}
.console > summary .on{color:var(--amber)}
.console form{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-l);
  padding:var(--s4)}
.console .groups{display:flex; flex-wrap:wrap; gap:var(--s3) var(--s6)}
.console fieldset{border:0; margin:0; padding:0; min-width:9rem}
.console legend{font-family:var(--mono); font-size:.68rem; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim); padding:0 0 var(--s1)}
.console legend + legend, .console .relegend{margin-top:var(--s3)}
.console label.check{display:block; padding:5px 0; min-height:30px; font-size:.92rem;
  color:var(--ink-2)}
.console select{max-width:12rem; font-size:.92rem}
.console .actions{margin-top:var(--s4); display:flex; gap:var(--s3); align-items:center;
  flex-wrap:wrap}

/* ---- notices (degraded states are said, not hidden) ------------------------------------- */
.notice{font-family:var(--mono); font-size:.78rem; color:var(--amber-2);
  background:rgba(255,176,32,.08); border:1px solid rgba(255,176,32,.22);
  border-radius:var(--r-m); padding:10px 14px; margin:0 0 var(--s3); line-height:1.55}

/* ---- count line / explainers -------------------------------------------------------------- */
.count-line{font-family:var(--mono); font-size:.9rem; font-weight:500; color:var(--ink);
  margin:var(--s3) 0; font-variant-numeric:tabular-nums}
.explain{color:var(--dim); font-size:.8rem; margin:0 0 var(--s3)}

/* ---- facts grid (detail summary) ------------------------------------------------------------ */
dl.facts{display:grid; grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r-m);
  overflow:hidden; margin:0}
dl.facts > div{background:var(--panel-2); padding:10px 12px}
dl.facts dt{font-family:var(--mono); font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim); margin:0}
dl.facts dd{font-family:var(--mono); font-weight:500; font-size:1.12rem; color:var(--ink);
  margin:3px 0 0; font-variant-numeric:tabular-nums}

/* ---- legs table -------------------------------------------------------------------------------- */
.table-scroll{overflow-x:auto}
table.legs{border-collapse:collapse; width:100%; min-width:560px; font-family:var(--mono);
  font-size:.86rem; font-variant-numeric:tabular-nums}
table.legs th,table.legs td{text-align:left; padding:7px 10px; border-bottom:1px solid var(--line);
  white-space:nowrap}
table.legs th{font-size:.62rem; text-transform:uppercase; letter-spacing:.14em; color:var(--dim);
  font-weight:500}
table.legs td{color:var(--ink-2)}
.layover-box{background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-m);
  padding:10px 14px; margin:var(--s2) 0 0; font-size:.9rem; color:var(--ink-2)}
.layover-box .stn{color:var(--cyan); font-family:var(--mono)}
.duty-day{margin-bottom:var(--s5)}
.duty-day h2 .when{font-family:var(--mono); font-weight:400; font-size:.78rem; color:var(--dim);
  letter-spacing:.02em}

/* ---- empty state ---------------------------------------------------------------------------------- */
.empty{border:1px dashed var(--line-2); border-radius:var(--r-l); padding:var(--s6) var(--s5);
  text-align:center; background:rgba(0,0,0,.12)}
.empty h3{font-family:var(--serif); font-weight:600; font-size:1.3rem; margin:0 0 var(--s2);
  color:var(--ink)}
.empty p{color:var(--ink-2); margin:0 0 var(--s4)}

/* ---- pager ------------------------------------------------------------------------------------------ */
.pager{display:flex; gap:var(--s3); align-items:center; justify-content:center; margin:var(--s5) 0;
  font-family:var(--mono); font-size:.85rem}
.pager .here{color:var(--dim)}

/* ---- plan block (PBS rows) ----------------------------------------------------------------------------- */
.plan{background:var(--panel-2); border:1px solid var(--line); border-top:2px solid var(--amber);
  border-radius:var(--r-m); padding:var(--s4); margin:var(--s3) 0 0}
.plan pre{overflow-x:auto; font-family:var(--mono); font-size:.82rem; line-height:1.5;
  margin:var(--s3) 0 0; color:var(--ink-2)}

/* ---- seniority form -------------------------------------------------------------------------------------- */
.sen-form label{display:block; margin-bottom:6px; color:var(--ink)}
.sen-form .sen-controls{display:flex; gap:var(--s2); align-items:center; flex-wrap:wrap}
.sen-form input{width:10rem}
.sen-change{margin:var(--s2) 0}
.sen-change > summary{cursor:pointer; color:var(--amber-2); min-height:32px; font-size:.85rem}

/* ---- attestation (a pilot signs it — body size, never fine print) ------------------------------------------- */
.attest{display:flex; gap:10px; align-items:flex-start; font-weight:500; color:var(--ink-2)}
.attest input{min-width:20px; min-height:20px; margin-top:3px}
.attest-block{margin:var(--s3) 0 var(--s4)}

/* ---- footer (liability surface on every page, incl. 404/503) ------------------------------------------------- */
footer.site{border-top:1px solid var(--line); padding:var(--s6) 0 var(--s7); color:var(--dim);
  margin-top:var(--s7)}
footer.site .evidence{font-size:.82rem; line-height:1.65; max-width:70ch; margin:0 0 var(--s3);
  color:var(--caveat)}
footer.site .evidence b{color:var(--ink-2); font-weight:500}
footer.site .links{font-family:var(--mono); font-size:.78rem; display:flex; gap:var(--s4);
  flex-wrap:wrap}
footer.site a{color:var(--dim)} footer.site a:hover{color:var(--amber)}
footer.site .affil{font-size:.78rem; color:var(--dim); margin:var(--s3) 0 0}

/* ---- entrance motion (one stagger set per page) ------------------------------------------------------------------ */
.rise{opacity:0; transform:translateY(12px); animation:rise var(--t-enter) var(--ease) forwards}
@keyframes rise{to{opacity:1; transform:none}}
.d1{animation-delay:.04s}.d2{animation-delay:.10s}.d3{animation-delay:.18s}.d4{animation-delay:.26s}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important; animation-delay:0!important; transition-duration:.001s!important;
    scroll-behavior:auto!important}
  .rise{opacity:1; transform:none}
}

/* ---- small screens -------------------------------------------------------------------------------------------------- */
@media(max-width:480px){
  .brand{letter-spacing:.16em; font-size:.8rem; gap:.55ch}
  .top nav{gap:var(--s2)} .top nav a{font-size:.74rem; white-space:nowrap}
  dl.facts dd{font-size:1rem}
  .axis .lbl{font-size:.56rem}
}