/* Stowmark — the hold. Three states: one column under 520, a wider measure to 1000, a stowage plan beside its
   manifest past it. The only fixed chrome is the bottom stripe, which is where the buy control lives. */
:root{
  --deck:#08090B; --crate:#101216; --crate2:#161A1F; --edge:#242A31; --edge2:#323A44;
  --ink:#E9EDF0; --dim:#8791A0; --faint:#59616D;
  --cy:#14E0FF; --cy-ink:#02222B;
  --t1:#0D5C6B; --t2:#0F7B90; --t3:#119CB7; --t4:#12BEDD; --t5:#14E0FF;
  --dock:#4A3340; --warn:#FF8A5B;
  --stripe:58px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--deck);color:var(--ink);font-family:Barlow,system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}          /* a bare [hidden] loses to display:flex/grid on .drape */
img{max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.num{font-variant-numeric:tabular-nums}

/* ---- the fixed stripe: sailing state on the left, the buy control on the right, at every width ---- */
.stripe{position:fixed;left:0;right:0;bottom:0;z-index:60;height:var(--stripe);display:flex;align-items:center;
  justify-content:space-between;gap:10px;padding:0 12px calc(env(safe-area-inset-bottom) * .6);
  background:rgba(8,9,11,.95);backdrop-filter:blur(12px);border-top:2px solid var(--edge)}
.bell{min-width:0;line-height:1.1}
.bellk{display:block;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.bellv{display:block;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gopill{flex:0 0 auto;display:flex;align-items:baseline;gap:7px;padding:10px 16px;background:var(--cy);color:var(--cy-ink);
  font-weight:700;font-size:14px;white-space:nowrap;border:2px solid var(--cy);clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)}
.gopill .gov{font-size:12px;font-weight:600;opacity:.66}
.gopill.shut{background:transparent;color:var(--dim);border-color:var(--edge2);cursor:default}
.gopill.shut .gov{opacity:1;color:var(--faint)}
@media (max-width:399px){ .gopill .gov{display:none} .gopill{padding:10px 14px} }

/* ---- stage ---- */
.stage{max-width:660px;margin:0 auto;padding:16px 12px calc(var(--stripe) + 22px);
  display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.main{min-width:0;display:flex;flex-direction:column;gap:14px}
.aside{min-width:0;display:flex;flex-direction:column;gap:14px}

/* ---- crown: identity and routes live in the page, not in fixed chrome ---- */
.crown{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ensign{display:flex;align-items:center;gap:9px;min-width:0}
.sigil{width:30px;height:30px;flex:0 0 auto}
.word{font-family:Bungee,Impact,sans-serif;font-size:17px;letter-spacing:.02em;line-height:1}
.routes{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-left:auto}
.routes::-webkit-scrollbar{display:none}
.routes a{padding:5px 10px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:lowercase;
  color:var(--dim);border:1px solid var(--edge);white-space:nowrap}
.routes a.on{color:var(--cy-ink);background:var(--cy);border-color:var(--cy)}

/* ---- headline block ---- */
.lede{border-left:4px solid var(--cy);padding:2px 0 2px 12px}
.lede h1{font-family:Bungee,Impact,sans-serif;font-weight:400;font-size:clamp(22px,6.4vw,34px);line-height:1.06;margin:0 0 7px}
.lede p{margin:0;color:var(--dim);font-size:14px;max-width:52ch}

/* ---- the hold: the one object ---- */
.holdbox{background:var(--crate);border:2px solid var(--edge)}
.holdhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:10px 12px;border-bottom:1px solid var(--edge)}
.hh{font-family:Bungee,Impact,sans-serif;font-size:12px;letter-spacing:.04em}
.hv{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.plan{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;padding:12px}
.slot{position:relative;aspect-ratio:1/1;background:var(--crate2);border:1px solid var(--edge);display:flex;
  align-items:center;justify-content:center;transition:none}
.slot.void{background:repeating-linear-gradient(135deg,transparent 0 5px,rgba(255,255,255,.035) 5px 10px)}
.slot.full{border-color:transparent}
.slot.t1{background:var(--t1)} .slot.t2{background:var(--t2)} .slot.t3{background:var(--t3)}
.slot.t4{background:var(--t4)} .slot.t5{background:var(--t5)}
.slot.head{border-left:3px solid var(--deck)}
.slot.mine{outline:2px solid var(--ink);outline-offset:-2px;z-index:2}
.slot .cap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:var(--cy-ink);font-variant-numeric:tabular-nums}
.slot .ix{position:absolute;left:3px;top:2px;font-size:8px;color:var(--faint);font-variant-numeric:tabular-nums}
.planfoot{display:flex;flex-wrap:wrap;gap:4px 14px;padding:0 12px 12px;font-size:11px;color:var(--faint)}
.planfoot b{color:var(--dim);font-weight:600}
.swatch{display:inline-block;width:9px;height:9px;margin-right:4px;vertical-align:-1px}

/* ---- the pad: size, rate, commit ---- */
.pad{background:var(--crate);border:2px solid var(--edge);padding:12px}
.padk{font-family:Bungee,Impact,sans-serif;font-size:11px;letter-spacing:.06em;color:var(--dim);margin-bottom:9px}
.padline{font-size:14px;color:var(--dim);margin-bottom:11px}
.rowk{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin:0 0 6px}
.sizer{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-bottom:12px}
.sizer button{padding:11px 0;background:var(--crate2);border:1px solid var(--edge);font-weight:700;font-size:15px;
  font-variant-numeric:tabular-nums;color:var(--dim)}
.sizer button.on{background:var(--ink);border-color:var(--ink);color:var(--deck)}
.ladder{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.rung{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;background:var(--crate2);border:1px solid var(--edge);text-align:left}
.rung.on{border-color:var(--ink);background:#1B2026}
.rung .chip{width:14px;height:14px;flex:0 0 auto}
.rung .mul{font-weight:700;font-size:14px;font-variant-numeric:tabular-nums;min-width:44px}
.rung .per{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.rung .flag{margin-left:auto;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.rung .flag.ok{color:var(--cy)}
.rung .flag.no{color:var(--warn)}
.tote{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--edge)}
.totk{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.totv{font-family:Barlow,sans-serif;font-weight:700;font-size:20px;font-variant-numeric:tabular-nums}
.verdict{font-size:13px;font-weight:600;padding:8px 10px;margin-bottom:10px;border-left:3px solid var(--cy);background:var(--crate2)}
.verdict.bad{border-left-color:var(--dock);color:var(--dim)}
.stow{display:block;width:100%;padding:14px;background:var(--cy);color:var(--cy-ink);font-weight:700;font-size:15px;
  letter-spacing:.03em;border:2px solid var(--cy)}
.stow:disabled{background:transparent;color:var(--faint);border-color:var(--edge);cursor:not-allowed}
.padnote{margin-top:9px;font-size:12px;color:var(--faint)}

/* ---- cards in the aside ---- */
.crate{background:var(--crate);border:2px solid var(--edge)}
.cratek{font-family:Bungee,Impact,sans-serif;font-size:11px;letter-spacing:.06em;padding:10px 12px;border-bottom:1px solid var(--edge)}
.cratebody{padding:10px 12px}
.quiet{padding:12px;color:var(--faint);font-size:13px}
.mani{display:flex;flex-direction:column}
.mrow{display:flex;align-items:center;gap:9px;padding:8px 12px;border-bottom:1px solid var(--edge);font-size:13px}
.mrow:last-child{border-bottom:0}
.mrow .chip{width:12px;height:12px;flex:0 0 auto}
.mrow .who{color:var(--dim);font-variant-numeric:tabular-nums;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mrow .sz{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}
.mrow .st{font-size:10px;letter-spacing:.12em;text-transform:uppercase;width:52px;text-align:right}
.mrow.in .st{color:var(--cy)} .mrow.out .st{color:var(--warn)} .mrow.out{opacity:.62}
.cutline{display:flex;align-items:center;gap:8px;padding:5px 12px;background:#1A1216;border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--warn)}
.cutline i{flex:1;height:1px;background:var(--warn);opacity:.45}
.figs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--edge)}
.fig{background:var(--crate);padding:10px 12px}
.figk{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.figv{font-weight:700;font-size:19px;font-variant-numeric:tabular-nums;line-height:1.2}
.figv.hot{color:var(--cy)}
.tape{display:flex;flex-direction:column}
.trow{display:flex;align-items:baseline;gap:8px;padding:7px 12px;border-bottom:1px solid var(--edge);font-size:12px}
.trow:last-child{border-bottom:0}
.trow .tw{color:var(--dim);font-variant-numeric:tabular-nums}
.trow .tt{margin-left:auto;color:var(--faint);font-variant-numeric:tabular-nums}
.prose{padding:12px;font-size:14px;color:var(--dim)}
.prose h3{font-family:Bungee,Impact,sans-serif;font-weight:400;font-size:13px;color:var(--ink);margin:14px 0 6px}
.prose h3:first-child{margin-top:0}
.prose p{margin:0 0 9px}
.prose b{color:var(--ink)}
.prose ol{margin:0 0 9px;padding-left:20px} .prose li{margin-bottom:5px}

/* ---- keel ---- */
.keel{border-top:2px solid var(--edge);padding-top:12px;margin-top:4px}
.keelline{display:flex;gap:10px;font-size:11px;padding:3px 0;align-items:baseline}
.kk{color:var(--faint);letter-spacing:.14em;text-transform:uppercase;flex:0 0 96px}
.kv{color:var(--dim);word-break:break-all;font-variant-numeric:tabular-nums}
.kv a{color:var(--cy)}
.keelsig{margin-top:10px;font-size:11px;color:var(--faint)}

/* ---- drape ---- */
.drape{position:fixed;inset:0;z-index:90;background:rgba(4,5,6,.8);display:flex;align-items:flex-end;justify-content:center}
.leaf{width:100%;max-width:440px;background:var(--crate);border:2px solid var(--edge2);max-height:82vh;overflow:auto}
.leafbar{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--edge);
  font-family:Bungee,Impact,sans-serif;font-size:11px;letter-spacing:.06em}
#drapeBody{padding:12px}
.wl{display:flex;flex-direction:column;gap:6px}
.wl button{display:flex;align-items:center;gap:9px;padding:10px;background:var(--crate2);border:1px solid var(--edge);text-align:left}
.wl img{width:20px;height:20px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--stripe) + 14px);z-index:120;
  background:var(--ink);color:var(--deck);padding:9px 14px;font-weight:600;font-size:13px;max-width:88vw}

/* ---- 720+: a wider measure, a bigger object, still one column ---- */
@media (min-width:720px){
  .stage{max-width:840px;padding:20px 20px calc(var(--stripe) + 28px);gap:18px}
  .plan{grid-template-columns:repeat(8,1fr);gap:4px;padding:16px}
  .slot .cap{font-size:13px}
  .lede h1{font-size:38px}
  .lede p{font-size:15px}
  .figv{font-size:22px}
  .stripe{padding:0 22px}
  .bellv{font-size:17px}
}

/* ---- 1000+: the stowage plan beside its manifest ---- */
@media (min-width:1000px){
  .stage{max-width:1180px;padding:26px 26px calc(var(--stripe) + 34px);
    grid-template-columns:minmax(0,1fr) 380px;grid-template-areas:"crown crown" "main aside" "keel keel";gap:22px 22px}
  .crown{grid-area:crown}
  .main{grid-area:main;gap:18px}
  .aside{grid-area:aside;gap:16px}
  .keel{grid-area:keel}
  .plan{grid-template-columns:repeat(12,1fr);gap:5px;padding:20px}
  .slot .cap{font-size:15px}
  .word{font-size:20px}
  .sigil{width:34px;height:34px}
  .lede h1{font-size:46px}
  .totv{font-size:24px}
  .figv{font-size:26px}
  .stripe{padding:0 30px}
}