/* Lifeboat — the bridge (left column) and the deck pages. True multi-page: every route is its own document. */
:root{--sea:#060B12;--hull:#0C1420;--hull2:#101A29;--seam:#1A2636;--seam2:#27384D;--type:#EEF2F6;--faded:#8A98AA;--sunk:#4B5868;
 --jacket:#FF7A1A;--jacket-2:#FF9A4D;--jacket-dim:#3E2210;--ok:#4FD6A8;
 --sans:"Instrument Sans",system-ui,sans-serif;--mono:"Geist Mono",ui-monospace,Menlo,monospace}
*{box-sizing:border-box} html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--sea);color:var(--type);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--jacket);outline-offset:2px;border-radius:6px}
.m{font-family:var(--mono);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── shell: a sticky bridge on the left, the deck on the right ─────────────────────── */
#shell{display:grid;grid-template-columns:300px minmax(0,1fr);min-height:100vh}
#bridge{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:26px 22px 22px;border-right:1px solid var(--seam);background:var(--hull)}
#bridge .plate{display:flex;align-items:center;gap:10px}
#bridge .plate img{width:26px;height:26px;border-radius:6px}
#bridge .plate b{font-weight:700;font-size:15px;letter-spacing:-.01em}
#bridge .plate i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--jacket);letter-spacing:.06em}
#bridge .line{color:var(--faded);font-size:13px;line-height:1.5;margin:14px 0 20px}
.gauge{padding:12px 0;border-top:1px solid var(--seam)}
.gauge .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--sunk)}
.gauge .v{font-family:var(--mono);font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:3px}
.gauge .v.wl{color:var(--jacket)} .gauge .v.hit{color:var(--jacket)} .gauge .v.wait{font-size:12px;font-weight:500;color:var(--faded)}
.gauge .s{font-family:var(--mono);font-size:10.5px;color:var(--sunk);margin-top:2px}
nav.rail{margin:18px 0 0;border-top:1px solid var(--seam);padding-top:10px}
nav.rail a{display:flex;align-items:baseline;gap:12px;padding:9px 0;color:var(--faded);font-size:14px;position:relative}
nav.rail a i{font-family:var(--mono);font-style:normal;font-size:10px;color:var(--sunk);width:18px}
nav.rail a[aria-current="page"]{color:var(--type)}
nav.rail a[aria-current="page"]:before{content:"";position:absolute;left:-22px;top:9px;bottom:9px;width:3px;background:var(--jacket);border-radius:0 2px 2px 0}
nav.rail a:hover{color:var(--type)}
#bridge .foot{margin-top:auto;padding-top:14px}
.buy{display:block;padding:13px;border-radius:9px;background:var(--jacket);color:#1E0A00;text-align:center;font-weight:700;font-size:14.5px;transition:filter .12s,transform .12s}
.buy:hover{filter:brightness(1.07)} .buy:active{transform:translateY(1px)}
.buy.off{background:transparent;color:var(--faded);border:1px solid var(--seam2)}
.ca{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;color:var(--sunk);padding:8px 0 0}
.ca b{font-weight:400;color:var(--faded);word-break:break-all;flex:1}
.ca button{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--jacket);border:1px solid var(--seam2);border-radius:5px;padding:3px 7px}
#deck{padding:34px 40px 80px;max-width:980px}
.strip{display:flex;align-items:baseline;gap:14px;margin:0 0 20px;padding-bottom:14px;border-bottom:1px solid var(--seam)}
.strip h1{font-weight:700;font-size:clamp(24px,3vw,32px);letter-spacing:-.03em;margin:0;line-height:1.1}
.strip .sub{color:var(--faded);font-size:13.5px}
.strip .sp{flex:1}
.strip .cnt{font-family:var(--mono);font-size:11.5px;color:var(--sunk)} .strip .cnt b{color:var(--faded);font-weight:400}

/* ── mobile: the bridge folds into a header, the rail becomes a row of stamps ───────── */
@media (max-width:899px){
  #shell{display:block}
  #bridge{position:static;height:auto;padding:calc(14px + env(safe-area-inset-top)) 16px 0;border-right:0;border-bottom:1px solid var(--seam)}
  #bridge .line{display:none}
  .gauges{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .gauge{padding:10px 0 12px;border-top:0} .gauge .v{font-size:19px}
  nav.rail{margin:0;padding:0 0 2px;border-top:1px solid var(--seam);display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
  nav.rail::-webkit-scrollbar{display:none}
  nav.rail a{padding:11px 10px 10px;white-space:nowrap;font-size:13px;border-bottom:2px solid transparent}
  nav.rail a i{display:none}
  nav.rail a[aria-current="page"]{border-bottom-color:var(--jacket)}
  nav.rail a[aria-current="page"]:before{display:none}
  #bridge .foot{display:none}
  #deck{padding:20px 16px 110px}
  #dock{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:linear-gradient(0deg,var(--sea) 70%,rgba(6,11,18,0));}
  #dock .buy{box-shadow:0 8px 26px rgba(255,122,26,.25)}
}
@media (min-width:900px){#dock{display:none}}

/* ── components ──────────────────────────────────────────────────────────────────────── */
.berths{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}
.berth{aspect-ratio:1;border-radius:8px;border:1.5px solid var(--seam2);display:grid;place-items:center;font-family:var(--mono);font-size:12px;color:var(--sunk);position:relative;transition:background .25s,border-color .25s,transform .15s}
.berth.on{background:var(--jacket);border-color:var(--jacket);color:#1E0A00;font-weight:700}
.berth.on:hover{transform:translateY(-1px);filter:brightness(1.06)}
.berth.on:after{content:attr(data-w);position:absolute;bottom:4px;font-size:8.5px;font-weight:500;color:#5A2606}
@media (max-width:430px){.berths{gap:5px} .berth{font-size:10px;border-radius:5px} .berth.on:after{font-size:7px;bottom:3px}}
.water{height:3px;background:var(--type);margin:16px 0 6px;border-radius:2px;position:relative}
.water:after{content:"waterline";position:absolute;right:0;top:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sunk)}
.tally{display:flex;justify-content:space-between;align-items:baseline;padding-top:20px}
.tally .n{font-family:var(--mono);font-size:28px;font-weight:700;color:var(--faded)}
.tally .l{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sunk)}
.panel{background:var(--hull);border:1px solid var(--seam);border-radius:12px;padding:16px 18px}
.panel+.panel{margin-top:12px}
h2{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--sunk);margin:28px 0 10px;font-weight:500}
h2 a{color:var(--jacket)}
.tk{display:grid;grid-template-columns:56px minmax(0,1fr) auto auto;gap:10px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--seam);font-family:var(--mono);font-size:12px}
.tk:last-child{border-bottom:0}
.tk .no{font-weight:700;font-size:15px} .tk.on .no{color:var(--jacket)} .tk.off .no{color:var(--sunk)}
.tk .w{color:var(--faded);word-break:break-all;font-size:11.5px} .tk .w a:hover{color:var(--type)}
.tk .st{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;padding:2px 7px;border-radius:4px}
.tk.on .st{color:var(--jacket);background:var(--jacket-dim)} .tk.off .st{color:var(--sunk);border:1px solid var(--seam2)}
.tk .e{color:var(--sunk);font-size:11px}
.tk .rk{color:var(--sunk);font-size:10px}
table.ledger{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12px}
table.ledger th{text-align:left;font-weight:500;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--sunk);padding:8px 8px 8px 0;border-bottom:1px solid var(--seam2)}
table.ledger td{padding:9px 8px 9px 0;border-bottom:1px solid var(--seam);vertical-align:baseline}
table.ledger td.n{font-weight:700;color:var(--jacket)} table.ledger td.w{word-break:break-all;color:var(--faded);font-size:11.5px}
table.ledger td.r{color:var(--sunk)} table.ledger tr:last-child td{border-bottom:0}
.wrap{overflow-x:auto}
.btn2{width:100%;padding:11px;border-radius:9px;border:1px solid var(--seam2);color:var(--faded);font-family:var(--mono);font-size:11.5px;margin-top:10px}
.btn2:hover{color:var(--type);border-color:var(--jacket)}
.field{display:flex;gap:8px}
.field input{flex:1;min-width:0;background:var(--hull2);border:1px solid var(--seam2);border-radius:9px;color:var(--type);padding:11px 12px;font-family:var(--mono);font-size:12px;outline:none}
.field input:focus{border-color:var(--jacket)}
.field button{padding:0 16px;border-radius:9px;border:1px solid var(--seam2);color:var(--faded);font-family:var(--mono);font-size:11.5px}
.field button:hover{color:var(--jacket);border-color:var(--jacket)}
.note{color:var(--sunk);font-size:13px;margin:8px 0 0}
.empty{color:var(--sunk);font-size:13.5px;padding:14px 0}
.stat{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
.stat div{background:var(--hull);border:1px solid var(--seam);border-radius:10px;padding:12px}
.stat b{display:block;font-family:var(--mono);font-size:20px;font-weight:700} .stat i{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--sunk)}
.rule{display:grid;grid-template-columns:30px 1fr;gap:12px;padding:13px 0;border-bottom:1px solid var(--seam)}
.rule:last-child{border-bottom:0}
.rule i{font-family:var(--mono);font-style:normal;color:var(--jacket);font-size:12px;padding-top:2px}
.rule b{display:block;font-weight:600;margin-bottom:3px} .rule p{margin:0;color:var(--faded);font-size:13.5px} .rule code{font-family:var(--mono);font-size:12px;color:var(--type)}
.fact{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--seam);font-family:var(--mono);font-size:11.5px}
.fact:last-child{border-bottom:0} .fact i{color:var(--sunk);font-style:normal} .fact b{font-weight:400;text-align:right;word-break:break-all} .fact a{color:var(--jacket)}
.verify{margin-top:10px} .verify .out{font-family:var(--mono);font-size:13px;margin-top:10px;padding:12px;border-radius:9px;background:var(--hull2);border:1px solid var(--seam)}
.verify .out b{color:var(--jacket);font-size:22px}
.share{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:8px 12px;border-radius:8px;border:1px solid var(--seam2);font-family:var(--mono);font-size:11px;color:var(--faded)}
.share:hover{color:var(--jacket);border-color:var(--jacket)}
footer{margin-top:40px;padding-top:14px;border-top:1px solid var(--seam);color:var(--sunk);font-size:12.5px;display:flex;flex-wrap:wrap;gap:14px}
footer a{color:var(--faded)} footer a:hover{color:var(--jacket)} footer .sp{flex:1}
.skel{background:linear-gradient(90deg,var(--hull2) 25%,#182536 50%,var(--hull2) 75%);background-size:200% 100%;animation:sh 1.3s infinite;border-radius:6px;color:transparent}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── fixes after the 390 / 1280 screenshots ─────────────────────────────────────────── */
@media (max-width:899px){
  .stat{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .stat div{padding:10px 9px} .stat b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .stat i{font-size:9px}
  /* full address stays in the DOM and in the link; the row shows it on one line */
  .tk{grid-template-columns:50px minmax(0,1fr) auto auto;gap:8px}
  .tk .w a,.tk .w{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  table.ledger td.w{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  table.ledger td.w a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media (min-width:900px){
  .berths{grid-template-columns:repeat(10,minmax(0,1fr));max-width:680px;gap:7px}
  .berth{font-size:12px} .berth.on:after{font-size:8px}
}
@media (max-width:899px){
  /* the block column is the least useful on a phone; drop it so Paid never clips */
  table.ledger th:nth-child(4),table.ledger td:nth-child(4){display:none}
  table.ledger td.w{max-width:150px}
}