/* Assign to Ship: shared tokens and the top bar for /, /shift and /rates. */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  --paper:#F6F3EC; --paper-2:#EFEADF; --surface:#FFFFFF; --ink:#171A33; --muted:#676A80; --line:#E6E0D4;
  --navy:#1E2140; --lamp:#FFB547;
  --assisted:#C9821B; --supervised:#2F5BEA; --handsoff:#14A05A; --incident:#D8452E;
  --sans:"Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--paper); color:var(--ink); font:15px/1.5 var(--sans); -webkit-font-smoothing:antialiased; }
a { color:inherit; }
img { max-width:100%; }

.bar { position:sticky; top:0; z-index:50; background:#F6F3ECE6; backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--line); }
.bar-in { max-width:1240px; margin:0 auto; padding:12px 24px; display:flex; align-items:center; gap:28px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:650; letter-spacing:-.02em; font-size:17px; white-space:nowrap; }
.brand svg { width:28px; height:28px; flex:none; }
.nav { display:flex; gap:4px; }
.nav a { text-decoration:none; color:var(--muted); font-size:14px; font-weight:500; padding:6px 10px; border-radius:8px; }
.nav a:hover { color:var(--ink); background:var(--paper-2); }
.nav a[aria-current] { color:var(--ink); background:var(--surface); box-shadow:0 0 0 1px var(--line); }
.bar-end { margin-left:auto; display:flex; align-items:center; gap:14px; font-size:13px; color:var(--muted); }
.live { display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:12px; white-space:nowrap; }
.live i { width:8px; height:8px; border-radius:50%; background:var(--handsoff); box-shadow:0 0 0 0 #14A05A66; animation:pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow:0 0 0 7px #14A05A00; } }
.gl { display:inline-flex; align-items:center; gap:6px; text-decoration:none; font-weight:500; color:var(--ink); padding:7px 12px; border-radius:9px; background:var(--surface); box-shadow:0 0 0 1px var(--line); white-space:nowrap; }
.gl:hover { box-shadow:0 0 0 1px #CFC7B6; }

.badge { display:inline-block; font:600 10.5px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:#fff; padding:4px 7px; border-radius:6px; vertical-align:middle; }
.badge.assisted { background:var(--assisted); } .badge.supervised { background:var(--supervised); } .badge.hands-off { background:var(--handsoff); }
.mono { font-family:var(--mono); }
.eyebrow { font:500 12px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }

@media (max-width:760px) {
  .bar-in { padding:10px 16px; gap:12px; flex-wrap:wrap; }
  .nav { order:3; width:100%; overflow-x:auto; margin:0 -4px; }
  .bar-end .live { display:none; }
}