/* Portolan design tokens v2 — Together × Harbour Green, dark = Deep Harbour */
@font-face{font-family:"Alliance";src:url(fonts/A2-Regular.otf) format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:"Alliance";src:url(fonts/A2-Medium.otf) format("opentype");font-weight:500;font-display:swap}
@font-face{font-family:"Alliance";src:url(fonts/A2-SemiBold.otf) format("opentype");font-weight:600;font-display:swap}
@font-face{font-family:"Alliance";src:url(fonts/A2-ExtraBold.otf) format("opentype");font-weight:700 800;font-display:swap}
:root{
  /* colour — light */
  --bg:#F1F3EC; --surface:#FFFFFF; --surface-2:#E7ECE3; --surface-3:#DDE5D8;
  --ink:#0E2A20; --ink-2:#2C4A3E; --muted:#5A6E64; --faint:#8EA096;
  --line:#D9E0D5; --line-strong:#0E2A20;
  --acc:#0E4D3A; --acc-hover:#0A3B2C; --acc-ink:#FFFFFF; --sig:#C8F03C; --sig-ink:#0E2A20; --acc-tint:#DDE9D9; --acc-soft:#A9C9B8;
  --ok:#14804A; --ok-tint:#DDF2E6; --warn:#A85A00; --warn-tint:#FDEBD3; --risk:#C8281E; --risk-tint:#FBE0DD;
  --focus:0 0 0 3px rgba(200,240,60,.7);
  /* type */
  --f-ui:"Alliance",system-ui,sans-serif; --f-mono:"Alliance",system-ui,sans-serif; --f-code:ui-monospace,"SF Mono",Menlo,monospace;
  --w-cond:70%; /* display width */
  /* space (4-base) */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s10:40px;--s12:48px;--s16:64px;
  --r:10px; --r-lg:16px; --r-pill:999px;
  --row:44px; --row-dense:34px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
[data-theme="dark"]{
  --bg:#070D0B; --surface:#0C1512; --surface-2:#121D19; --surface-3:#192620;
  --ink:#E3E9E5; --ink-2:#BCC8C1; --muted:#84948B; --faint:#56655D;
  --line:#1C2A24; --line-strong:#E3E9E5;
  --acc:#C8F03C; --acc-hover:#D6F56A; --acc-ink:#070D0B; --sig:#C8F03C; --sig-ink:#070D0B; --acc-tint:rgba(200,240,60,.10); --acc-soft:rgba(200,240,60,.4);
  --ok:#3E9A68; --ok-tint:rgba(91,208,138,.12); --warn:#F0A23A; --warn-tint:rgba(240,162,58,.13); --risk:#FF6B5E; --risk-tint:rgba(255,107,94,.13);
  --focus:0 0 0 3px rgba(200,240,60,.45);
}
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased}
body{margin:0;background:var(--bg);color:var(--ink);font:400 14px/1.45 var(--f-ui)}
/* type roles */
.t-display{font:800 72px/.9 var(--f-ui);}
.t-h1{font:800 44px/.92 var(--f-ui);}
.t-h2{font:800 28px/.95 var(--f-ui);}
.t-h3{font:600 18px/1.25 var(--f-ui);letter-spacing:-.01em}
.t-body{font:400 14px/1.5 var(--f-ui)}
.t-small{font:400 12px/1.4 var(--f-ui);color:var(--muted)}
.t-label{font:500 11px/1.2 var(--f-mono);color:var(--muted)}
.t-code,.mono{font-family:var(--f-mono);font-variant-numeric:lining-nums}
.t-num{font:500 14px var(--f-mono);font-variant-numeric:lining-nums}
.t-price{font:500 20px var(--f-mono);letter-spacing:-.02em;font-variant-numeric:lining-nums}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 14px;border:0;border-radius:var(--r);font:500 12px var(--f-mono);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s}
.btn-p{background:var(--acc);color:var(--acc-ink)}.btn-p:hover{background:var(--acc-hover)}
.btn-s{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}.btn-s:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.btn-g{background:none;color:var(--ink)}.btn-g:hover{background:var(--surface-2)}
.btn-d{background:var(--risk);color:#fff}
.btn-lg{height:44px;padding:0 20px;font-size:13px}.btn-sm{height:28px;padding:0 10px;font-size:11px}
.btn:focus-visible,.field:focus-within{outline:0;box-shadow:var(--focus)}
/* fields */
.field{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:52px;padding:8px 12px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--r)}
.field .t-label{font-size:10px}.field b{font:600 15px var(--f-ui)}.field small{font:400 11px var(--f-mono);color:var(--muted)}
/* chips + status */
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;font:500 11px var(--f-mono);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);border-radius:var(--r);white-space:nowrap}
.chip i{width:6px;height:6px;border-radius:50%;background:currentColor}
.st-ok{color:var(--ok);background:var(--ok-tint);box-shadow:none}.st-warn{color:var(--warn);background:var(--warn-tint);box-shadow:none}.st-risk{color:var(--risk);background:var(--risk-tint);box-shadow:none}.st-acc{color:var(--acc);background:var(--acc-tint);box-shadow:none}.st-ink{background:var(--ink);color:var(--bg);box-shadow:none}
.pill{display:inline-block;font:500 9px var(--f-mono);background:var(--acc);color:var(--acc-ink);padding:2px 6px;vertical-align:2px}
/* table */
.tbl{width:100%;border-collapse:collapse}
.tbl th{font:500 10px var(--f-mono);color:var(--muted);text-align:left;padding:8px 10px;border-bottom:2px solid var(--line-strong);white-space:nowrap}
.tbl td{height:var(--row);padding:0 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl.dense td{height:var(--row-dense)}
.tbl .n{text-align:right;font-family:var(--f-mono);font-variant-numeric:lining-nums}
.tbl tr.sel td{background:var(--acc-tint)}.tbl tr.sel td:first-child{box-shadow:inset 3px 0 var(--acc)}
.tbl tbody tr:hover td{background:var(--surface-2)}
/* route line */
.route{display:flex;align-items:center;gap:8px;font:500 12px var(--f-mono)}
.route .ln{flex:1;height:2px;background:var(--ink);position:relative;min-width:40px}
.route .ln.acc{background:var(--acc)}
.route .ln i{position:absolute;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 2px var(--ink)}
/* reliability meter: 10 ticks */
.rel{display:inline-flex;gap:2px}.rel i{width:4px;height:12px;background:var(--line)}.rel i.on{background:var(--ok)}.rel.mid i.on{background:var(--warn)}
/* cards: hairline, square */
.panel{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.rule{height:1px;background:var(--line)}
.kbd{font:500 10px var(--f-mono);padding:1px 5px;box-shadow:inset 0 0 0 1px var(--line);color:var(--muted)}
