/* ============================================================
   drawer.css — the "v3" redesign, everything under .drawer.sheetify.tsr:
   teaser (the pitch), confirm (subscribe/insufficient-funds), wallet
   (add funds). Self-contained. Load after style.css. Depends only on
   tokens --fd / --fdc / --fm / --rail / --amb and the shared
   .btn / .btn--ghost / .btn--primary / .sheet__grab rules (still
   style.css's own — genuinely shared with signin, the one drawer left
   on the older .sheetify shell without .tsr).
   Already done, not a TODO any more: every .sheet__art*, .sheet__panel,
   .sheet__kicker, .sheet__title, .sheet__say, .twPrice, .twStats,
   .twProof, .packs, .pack, .cost*, .custAmt*, .f2*, .lrow__v* rule that
   only ever served one of these three — all deleted from style.css,
   not left duplicated once its own drawer moved here.
   ============================================================ */

/* ---- shell: the --cc radial wash across the whole drawer ---- */
.drawer.sheetify.tsr{
  background:
    radial-gradient(ellipse 70% 65% at 0% 45%,
      color-mix(in srgb, var(--cc, #8b92a8) 22%, #0f1117),
      #0f1117 70%);
}

/* ---- art ---- */
.tsr__art{position:relative;flex:none;height:40dvh;min-height:220px;overflow:hidden}
.tsr__artSvg{position:absolute;inset:0;width:100%;height:100%;display:block}
.tsr__art::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:30%;pointer-events:none;
  background:linear-gradient(to top,#0f1117,transparent);
}
.tsr__artTag{
  position:absolute;left:20px;top:16px;z-index:2;
  font:500 10.5px/1 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:#4e5568;
}

/* ---- panel ---- */
.tsr__panel{
  flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
  padding:6px 22px 0;padding-bottom:env(safe-area-inset-bottom,0px);
  overflow-y:auto;overscroll-behavior:contain;
}
.tsr__kicker{margin:0 0 10px;font:500 11px/1.4 var(--fm);letter-spacing:.2em;text-transform:uppercase;color:var(--cc,#8b92a8)}
.tsr__kickSep{display:inline-block;width:14px;height:1px;background:currentColor;opacity:.5;margin:0 10px;vertical-align:middle}
.tsr__title{
  margin:0;font-family:var(--fdc);font-weight:400;letter-spacing:.02em;line-height:1;
  font-size:clamp(34px,7vw,46px);color:#fff;
  text-shadow:0 0 60px color-mix(in srgb,var(--cc,#8b92a8) 45%,transparent);
}
.tsr__say{margin:12px 0 0;font:400 15.5px/1.45 var(--fd);color:#c9cdd6;max-width:34ch}

.tsr__price{margin-top:22px;display:flex;align-items:baseline;gap:10px}
.tsr__priceVal{font:600 32px/1 var(--fm);letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
.tsr__priceUnit{font:400 13px/1 var(--fd);color:#8b92a8}

/* ---- stats: a ledger, not tiles ---- */
.tsr__stats{margin-top:24px;border-top:1px solid rgba(255,255,255,.08)}
.tsr__stats:empty{display:none;margin:0;border:0}
.tsr__stat{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:13px 0;border-bottom:1px solid rgba(255,255,255,.08);
}
.tsr__statVal{font:600 26px/1 var(--fm);letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.tsr__statMeta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right;min-width:0}
.tsr__statLbl{font:400 13px/1.2 var(--fd);color:#c9cdd6}
.tsr__statSub{font:400 11px/1.2 var(--fm);color:#4e5568;white-space:nowrap}

.tsr__proof{margin:14px 0 0;font:400 11px/1.4 var(--fm);letter-spacing:.04em;color:#4e5568}

/* ---- foot ---- */
.tsr__foot{flex:none;display:flex;align-items:center;gap:10px;margin-top:auto;padding:20px 0 18px}
.tsr__foot .btn{flex:1 1 auto;height:46px}
.tsr__foot .btn:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ---- desktop: side by side, art takes the larger half ---- */
@media (min-width:900px){
  .drawer.sheetify.tsr{display:grid;grid-template-columns:1.15fr 1fr}
  .tsr__art{height:100%;min-height:0;order:1}
  .tsr__art::after{
    top:0;left:auto;right:0;bottom:0;width:18%;height:auto;
    background:linear-gradient(to right,transparent,#0f1117);
  }
  .tsr__artTag{left:28px;top:24px}
  .tsr__panel{order:2;padding:44px 44px 0;justify-content:center}
  .tsr__title{font-size:46px}
  .tsr__stats{margin-top:30px}
  .tsr__stat{padding:16px 0}
  .tsr__statVal{font-size:30px}
  .tsr__foot{padding:34px 0 0;margin-top:34px}
  .tsr__foot .btn{flex:0 1 auto;min-width:150px}
}

@media (prefers-reduced-motion:reduce){
  .drawer.sheetify.tsr{transition:none}
}

/* ---- confirm-subscribe: the ledger (shares everything else with the teaser) ---- */
.tsr__ledger{margin-top:26px;border-top:1px solid rgba(255,255,255,.08)}
.tsr__row{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:13px 0;border-bottom:1px solid rgba(255,255,255,.08);
}
.tsr__rowLbl{font:400 13px/1.2 var(--fd);color:#8b92a8}
.tsr__rowVal{font:500 18px/1 var(--fm);letter-spacing:-.01em;color:#c9cdd6;font-variant-numeric:tabular-nums}
.tsr__row--total .tsr__rowLbl{color:#c9cdd6}
.tsr__row--total .tsr__rowVal{font-size:26px;font-weight:600;color:#fff}
.tsr__row--short .tsr__rowVal{color:#ff9a1f}
.tsr__em{color:#fff;font-family:var(--fm)}
@media (min-width:900px){
  .tsr__ledger{margin-top:30px}
  .tsr__row{padding:15px 0}
  .tsr__row--total .tsr__rowVal{font-size:30px}
}

/* ---- wallet: amount pills, custom input, recent ---- */
.tsr__amts{margin-top:22px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tsr__amt{
  height:44px;padding-left:14px;border:0;border-radius:2px;cursor:pointer;
  background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
  font:500 15px/1 var(--fm);letter-spacing:-.01em;color:#c9cdd6;font-variant-numeric:tabular-nums;
}
.tsr__amt:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);color:#fff}
.tsr__amt.on{background:#eceef3;color:#08090d;box-shadow:none}
.tsr__amt:focus-visible{outline:2px solid #fff;outline-offset:2px}
.tsr__custom{
  margin-top:8px;display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:2px;
  background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
}
.tsr__custom:focus-within{box-shadow:inset 0 0 0 1px var(--cc,#ff9a1f)}
.tsr__customCur{font:500 15px/1 var(--fm);color:#4e5568}
.tsr__customIn{
  flex:1;min-width:0;border:0;background:transparent;outline:0;
  font:500 15px/1 var(--fm);color:#fff;font-variant-numeric:tabular-nums;
}
.tsr__customIn::placeholder{color:#4e5568}
.tsr__customIn::-webkit-outer-spin-button,.tsr__customIn::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.tsr__customIn[type=number]{-moz-appearance:textfield}

.tsr__recent{margin-top:22px}
.tsr__recentHd{margin:0 0 4px;font:500 10.5px/1.4 var(--fm);letter-spacing:.16em;text-transform:uppercase;color:#4e5568}
.tsr__tx{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.tsr__tx:last-child{border-bottom:0}
.tsr__txMeta{display:flex;flex-direction:column;gap:3px;min-width:0}
.tsr__txKind{font:400 13px/1.2 var(--fd);color:#c9cdd6}
.tsr__txWhen{font:400 11px/1.2 var(--fm);color:#4e5568}
.tsr__txAmt{font:500 15px/1 var(--fm);color:#c9cdd6;font-variant-numeric:tabular-nums;white-space:nowrap}
.tsr__txAmt.up{color:#3dd68c}
.tsr__txAmt.dn{color:#8b92a8}
@media (min-width:900px){
  .tsr__amts{margin-top:26px}
}

/* ---- legal: its own frame, not tsr (Ateet, 2026-09-13: "restyle.
   Prefix all classes .lgl. Flat background, no art, no gradient, no
   logo... left column 220px... right column, reading measure...
   does not get class tsr"). Supersedes the tsr-shell version of this
   same drawer from earlier the same day — that one's own
   .tsr__art--mark/.tsr__docsw/.tsr__pill/.tsr__doc/.tsr__panel--doc
   deleted outright, not left duplicated alongside this. Still
   .drawer.sheetify (the shared 940px shell) — js/drawers.js's own
   `lgl` class (paintDrawer()) is what turns the base .sheetify 900px+
   1fr/1fr grid into this 220px/1fr split, below. */
.lgl__nav{
  display:flex;flex-direction:column;gap:2px;
  padding:28px 22px;overflow-y:auto;
  border-right:1px solid rgba(255,255,255,.07);
}
.lgl__navLbl{margin:0 0 16px;font:400 13px/1.2 var(--fd);color:#8b92a8}
.lgl__navList{display:flex;flex-direction:column;gap:2px}
.lgl__navItem{
  display:block;width:100%;text-align:left;cursor:pointer;
  padding:9px 0 9px 12px;border-left:2px solid transparent;
  font:400 14px/1.3 var(--fd);color:#8b92a8;transition:color .14s;
}
.lgl__navItem:hover{color:#c9cdd6}
.lgl__navItem.on{color:#fff;border-left-color:#ff9a1f}
.lgl__navFoot{margin-top:auto;padding-top:20px;font:400 12px/1.3 var(--fm);color:#4e5568;word-break:break-all}

.lgl__doc{position:relative;flex:1;min-height:0;overflow:hidden}
.lgl__docBody{height:100%;overflow-y:auto;max-width:64ch;padding:40px 44px}
.lgl__h1{margin:0;font:600 26px/1.3 var(--fd);color:#fff}
.lgl__updated{margin:6px 0 0;font:400 12px/1 var(--fm);color:#4e5568}
.lgl__lead{margin:24px 0 28px;padding:18px;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.lgl__leadLabel{margin:0 0 8px;font:600 13px/1.2 var(--fd);color:#fff}
.lgl__lead p{margin-top:8px;font:400 15px/1.6 var(--fd);color:#c9cdd6}
.lgl__lead p:first-of-type{margin-top:0}
.lgl__h2{display:flex;align-items:baseline;gap:14px;margin:34px 0 10px;font:600 15px/1.3 var(--fd);color:#fff}
.lgl__h2num{flex:none;font:400 15px/1 var(--fm);color:#4e5568}
.lgl__p{margin:0 0 12px;font:400 15px/1.6 var(--fd);color:#c9cdd6}
.lgl__docBody ul{margin:0 0 12px;padding-left:20px}
.lgl__docBody li{margin-bottom:4px;font:400 15px/1.6 var(--fd);color:#c9cdd6}
.lgl__docBody strong{color:#fff;font-weight:600}
.lgl__docBody a{color:#c9cdd6;text-decoration:underline;text-underline-offset:2px}
.lgl__docBody a:hover{color:#fff}

/* No ESC key on a touch device — a real, reachable way to close this
   one drawer from inside the doc column itself, mobile only (desktop
   already has ESC and the scrim). */
.lgl__close{display:none}

@media (max-width:899px){
  .lgl__nav{
    flex-direction:row;align-items:center;gap:4px;flex:none;
    padding:10px 16px;border-right:0;border-bottom:1px solid rgba(255,255,255,.07);
    overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  }
  .lgl__nav::-webkit-scrollbar{display:none}
  .lgl__navLbl,.lgl__navFoot{display:none}
  .lgl__navList{flex-direction:row}
  .lgl__navItem{
    white-space:nowrap;padding:8px 12px;
    border-left:0;border-bottom:2px solid transparent;
  }
  .lgl__navItem.on{border-left-color:transparent;border-bottom-color:#ff9a1f}
  .lgl__docBody{max-width:none;padding:44px 20px 24px}
  .lgl__close{
    display:inline-flex;align-items:center;justify-content:center;
    position:absolute;top:14px;right:14px;z-index:2;
    height:30px;padding:0 14px;border-radius:2px;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
    color:#8b92a8;font:500 11px/1 var(--fm);letter-spacing:.06em;text-transform:uppercase;
  }
  .lgl__close:hover{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
}
@media (min-width:900px){
  .drawer.sheetify.lgl{grid-template-columns:220px 1fr}
}