/* Undersay — the settlement window. Written for this drop. */
:root{
  --ground:#0A0E12; --panel:#111820; --panel2:#0D141B; --ink:#E6EDF3; --dim:#7C8C9B; --faint:#4A5966;
  --accent:#38D6FF; --accent-dim:#1B8FB0; --line:rgba(230,237,243,.10); --line2:rgba(230,237,243,.055);
  --warm:#FFB86B; --slip:#131C25;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font:400 14px/1.55 "Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(1100px 620px at 50% -12%, rgba(56,214,255,.09), transparent 62%);
}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,.disp{font-family:"Unbounded",system-ui,sans-serif;font-weight:700;letter-spacing:-.01em;margin:0}
.fig{font-family:"Roboto Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;font-weight:700}
[hidden]{display:none !important}

/* ---------- fixed chrome: the route pill (top) and the buy slip (bottom) ---------- */
#routes{
  position:fixed; z-index:40; top:10px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:2px; padding:4px;
  background:rgba(13,20,27,.92); border:1px solid var(--line); border-radius:999px;
  backdrop-filter:blur(10px); max-width:calc(100vw - 20px);
}
#routes a,#routes button{
  padding:7px 13px; border-radius:999px; font-size:12px; letter-spacing:.04em;
  color:var(--dim); text-decoration:none; white-space:nowrap;
}
#routes a.here{background:rgba(56,214,255,.13); color:var(--accent)}
#routes button{border:1px solid var(--line); margin-left:2px}
#routes button.on{color:var(--accent); border-color:rgba(56,214,255,.4)}

#deskslip{
  position:fixed; z-index:41; left:0; right:0; bottom:0;
  display:flex; align-items:center; gap:10px; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(to top, rgba(10,14,18,.99), rgba(10,14,18,.94));
  border-top:1px solid var(--line);
}
#deskslip .tick{font-weight:700; font-size:12px; letter-spacing:.06em; color:var(--accent); flex:0 0 auto}
#deskslip .buy{
  flex:0 0 auto; padding:9px 16px; border-radius:8px; text-decoration:none; font-weight:700; font-size:12.5px;
  letter-spacing:.05em; background:var(--accent); color:#04141B; box-shadow:0 0 22px rgba(56,214,255,.24);
}
#deskslip .buy.dead{background:rgba(56,214,255,.12); color:var(--accent-dim); box-shadow:none; pointer-events:none}
#deskslip .ca{
  flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:11px; color:var(--faint); text-align:right;
}

/* ---------- stage ---------- */
#stage{position:relative; z-index:1; max-width:560px; margin:0 auto; padding:70px 14px 96px}
.primary,.aside{display:flex; flex-direction:column; gap:14px; min-width:0}
.aside{margin-top:14px}

/* ---------- the big slip: one object ---------- */
#bigslip{
  position:relative; background:var(--slip); border:1px solid var(--line);
  border-radius:4px 4px 12px 12px; padding:18px 16px 16px; overflow:hidden;
}
#bigslip::before{
  content:""; position:absolute; top:0; left:0; right:0; height:7px;
  background:repeating-linear-gradient(90deg, var(--ground) 0 6px, transparent 6px 12px);
}
.sliphead{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:6px 0 14px}
.sliphead .wno{font-size:11px; letter-spacing:.16em; color:var(--faint)}
.phasetag{
  font-size:10.5px; letter-spacing:.14em; padding:4px 9px; border-radius:999px;
  border:1px solid var(--line); color:var(--dim);
}
.phasetag.filing{color:var(--accent); border-color:rgba(56,214,255,.42); background:rgba(56,214,255,.08)}
.phasetag.unsealing{color:var(--warm); border-color:rgba(255,184,107,.4); background:rgba(255,184,107,.08)}

.potline{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:4px}
.potbox{display:flex; flex-direction:column; min-width:0}
.potline .potv{font-size:40px; line-height:1; color:var(--accent)}
.potline .potu{font-size:10.5px; letter-spacing:.13em; color:var(--faint); margin-top:7px; white-space:nowrap}
.bellclock{text-align:right}
.bellclock .cv{font-size:26px; line-height:1.1}
.bellclock .cl{font-size:10px; letter-spacing:.14em; color:var(--faint)}
.subline{font-size:12px; color:var(--dim); margin:10px 0 0; border-top:1px dashed var(--line); padding-top:11px}
.subline b{color:var(--ink); font-weight:500}

/* ---------- the figure pad: one action ---------- */
.figbox{margin-top:16px; border-top:1px dashed var(--line); padding-top:15px}
.figread{
  display:flex; align-items:baseline; justify-content:center; gap:4px; height:74px;
  background:var(--panel2); border:1px solid var(--line); border-radius:9px; margin-bottom:10px;
}
.figread .v{font-size:46px; line-height:1; letter-spacing:.02em}
.figread .v.ghost{color:var(--faint); opacity:.38}
.figread .pc{font-size:19px; color:var(--dim)}
.figpad{display:grid; grid-template-columns:repeat(3,1fr); gap:7px}
.padkey{
  height:46px; border:1px solid var(--line); border-radius:9px; background:var(--panel);
  font-size:17px; font-weight:500; font-variant-numeric:tabular-nums; transition:background .12s,border-color .12s;
}
.padkey:active{background:rgba(56,214,255,.16); border-color:rgba(56,214,255,.45)}
.padkey.wipe{color:var(--dim); font-size:14px}
.commit{
  margin-top:9px; width:100%; height:52px; border-radius:10px; background:var(--accent); color:#04141B;
  font-weight:700; font-size:14px; letter-spacing:.06em;
}
.commit[disabled]{background:rgba(56,214,255,.13); color:var(--accent-dim); cursor:not-allowed}
.commit.warm{background:var(--warm); color:#2A1704}
.hint{margin-top:9px; font-size:11.5px; color:var(--faint); line-height:1.5}
.hint b{color:var(--dim); font-weight:400}

/* ---------- envelopes: sealed, then flipped ---------- */
.envwrap{margin-top:16px; border-top:1px dashed var(--line); padding-top:14px}
.envlabel{font-size:10.5px; letter-spacing:.14em; color:var(--faint); margin-bottom:9px}
.envgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(52px,1fr)); gap:6px}
.envcard{perspective:520px; aspect-ratio:1/1}
.envface{
  position:relative; width:100%; height:100%; transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.3,.9,.3,1);
}
.envcard.up .envface{transform:rotateY(180deg)}
.envface .s,.envface .f{
  position:absolute; inset:0; backface-visibility:hidden; border-radius:7px;
  display:flex; align-items:center; justify-content:center; border:1px solid var(--line);
}
.envface .s{background:var(--panel)}
.envface .s i{width:11px; height:11px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px rgba(56,214,255,.6); display:block}
.envface .f{
  background:var(--panel2); transform:rotateY(180deg); font-size:17px; font-weight:700;
  font-variant-numeric:tabular-nums;
}
.envcard.low .envface .f{color:var(--accent); border-color:rgba(56,214,255,.5); background:rgba(56,214,255,.1)}
.envcard.mine .envface .s,.envcard.mine .envface .f{border-color:rgba(255,184,107,.55)}

/* ---------- sidebar cards ---------- */
.carrycard,.movetape,.primer{background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:15px 15px 14px}
.cardlabel{font-size:10.5px; letter-spacing:.14em; color:var(--faint); margin-bottom:9px}
.carryv{font-size:34px; line-height:1; color:var(--accent)}
.carryu{font-size:11px; color:var(--dim); margin-left:6px}
.carrynote{font-size:11.5px; color:var(--dim); margin-top:10px; line-height:1.5}
.spec{list-style:none; margin:0; padding:0; font-size:12px}
.spec li{display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px dashed var(--line2)}
.spec li:last-child{border-bottom:0}
.spec .k{color:var(--dim)} .spec .v{color:var(--ink); font-weight:500; text-align:right}
.tapelist{list-style:none; margin:0; padding:0; font-size:12px}
.tapelist li{display:flex; align-items:center; gap:9px; padding:7px 0; border-bottom:1px dashed var(--line2)}
.tapelist li:last-child{border-bottom:0}
.tapelist .dot{width:6px;height:6px;border-radius:50%;background:var(--faint);flex:0 0 auto}
.tapelist li.op .dot{background:var(--accent)}
.tapelist .who{color:var(--dim)} .tapelist .val{margin-left:auto; color:var(--ink); font-weight:500}
.quiet{font-size:12px; color:var(--faint); padding:6px 0}

/* ---------- the stack of settled slips ---------- */
.slipstack{display:flex; flex-direction:column; gap:10px}
.settled{
  background:var(--panel); border:1px solid var(--line); border-radius:4px 4px 10px 10px;
  padding:14px 14px 12px; position:relative;
}
.settled::before{content:""; position:absolute; top:0; left:0; right:0; height:5px;
  background:repeating-linear-gradient(90deg, var(--ground) 0 5px, transparent 5px 10px)}
.settled .top{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:5px 0 10px}
.settled .no{font-size:11px; letter-spacing:.14em; color:var(--faint)}
.settled .at{font-size:11px; color:var(--faint)}
.settled .body{display:flex; align-items:center; gap:14px}
.settlefig{font-size:42px; line-height:1; color:var(--accent)}
.settlefig small{font-size:15px; color:var(--dim); margin-left:2px}
.settled .facts{font-size:11.5px; color:var(--dim); line-height:1.65}
.settled .facts b{color:var(--ink); font-weight:500}

/* ---------- prose ---------- */
.prose h1{font-size:25px; line-height:1.18; margin-bottom:12px}
.prose h2{font-size:14px; letter-spacing:.02em; margin:20px 0 7px; color:var(--accent)}
.prose p{font-size:13px; color:var(--dim); line-height:1.7; margin:0 0 10px}
.prose p b{color:var(--ink); font-weight:500}
.lede{font-size:14.5px; color:var(--ink); line-height:1.65}

/* ---------- headline block ---------- */
.headline{margin-bottom:2px}
.headline h1{font-size:26px; line-height:1.16}
.headline p{font-size:13px; color:var(--dim); line-height:1.65; margin:10px 0 0}

/* ---------- foot ---------- */
.foot{margin-top:6px; padding:14px 0 0; border-top:1px solid var(--line); font-size:11px; color:var(--faint); line-height:1.75; word-break:break-all}
.foot a{color:var(--dim)}
.foot .ln{display:block}

/* ---------- docket ---------- */
#docket{position:fixed; inset:0; z-index:60; background:rgba(5,8,11,.8); display:flex; align-items:center; justify-content:center; padding:18px}
.docketbox{background:var(--panel); border:1px solid var(--line); border-radius:14px; width:100%; max-width:420px; max-height:82vh; overflow:auto}
.docketbox header{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line); font-size:13px}
.docketbox header button{font-size:20px; color:var(--dim); line-height:1}
#docketBody{padding:15px 16px 18px; font-size:12.5px; color:var(--dim); line-height:1.65}
#docketBody b{color:var(--ink); font-weight:500}
.wallets{display:flex; flex-direction:column; gap:8px}
.wallets button{display:flex; align-items:center; gap:10px; padding:11px 13px; border:1px solid var(--line); border-radius:10px; font-size:13px}
.wallets img{width:20px; height:20px; border-radius:5px}
.toast{position:fixed; left:50%; bottom:86px; transform:translateX(-50%); z-index:70; background:var(--panel);
  border:1px solid var(--line); border-radius:9px; padding:10px 15px; font-size:12px; max-width:min(92vw,400px)}

/* ---------- ~720: same column, more air ---------- */
@media (min-width:720px){
  body{font-size:15px}
  #stage{max-width:680px; padding:82px 24px 108px}
  .headline h1{font-size:34px}
  .headline p,.prose p{font-size:14px}
  .potline .potv{font-size:52px}
  .figread{height:88px} .figread .v{font-size:56px}
  .padkey{height:54px; font-size:19px}
  .settlefig{font-size:50px}
  .envgrid{grid-template-columns:repeat(auto-fill,minmax(58px,1fr))}
  #deskslip{padding:12px 22px calc(12px + env(safe-area-inset-bottom))}
}

/* ---------- >=1000: the page recomposes into desk + room ---------- */
@media (min-width:1000px){
  #stage{
    max-width:1180px; padding:96px 28px 116px;
    display:grid; grid-template-columns:minmax(0,1.32fr) minmax(320px,.86fr); gap:26px; align-items:start;
  }
  .primary{grid-column:1} .aside{grid-column:2; margin-top:0; position:sticky; top:96px}
  .headline h1{font-size:40px}
  .potline .potv{font-size:62px}
  .figread{height:102px} .figread .v{font-size:68px}
  .padkey{height:58px}
  #bigslip{padding:24px 22px 20px}
  #deskslip{
    left:auto; right:auto; bottom:18px; margin-left:18px; width:max-content; max-width:520px;
    border:1px solid var(--line); border-radius:12px; padding:11px 15px;
    background:rgba(13,20,27,.96); backdrop-filter:blur(10px);
    box-shadow:0 10px 34px rgba(0,0,0,.5);
  }
  #deskslip .ca{text-align:left}
}
@media (min-width:1280px){ .headline h1{font-size:46px} }
@media (prefers-reduced-motion:reduce){ .envface{transition:none} }