/* D145 · Token page: chart + bonding card on the left, buy/sell panel on the right; phone gets a bottom sheet. */
#token-detail .detail-layout.has-trade{grid-template-columns:minmax(0,1fr) minmax(320px,380px);align-items:start}
#token-detail .has-trade>.token-identity{grid-column:1/-1;padding:18px 22px}
#token-detail .has-trade>.token-identity .detail-art{width:96px;height:96px}
#token-detail .has-trade>.token-identity .detail-art :is(img,svg,canvas,.token-art){width:96px!important;height:96px!important}
#token-detail .has-trade>.token-identity h1{font-size:clamp(26px,3vw,36px)}
#token-detail .token-main,#token-detail .token-side{display:grid;gap:16px;min-width:0;align-content:start}
#token-detail .token-side .trade-panel{margin:0}
#token-detail .token-main .token-chart .chart-plot{max-height:360px}

/* Bonding progress card */
.bond-progress{padding:18px 20px;display:grid;gap:12px}
.bond-progress .bp-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.bond-progress h2{margin:0;font-size:17px}
.bp-chip{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:4px 10px}
.bp-bar{position:relative;height:30px;border-radius:999px;background:#1d1d20;border:1px solid #2c2c31;overflow:hidden}
.bp-bar>i{position:absolute;inset:0 auto 0 0;border-radius:999px;background:linear-gradient(90deg,#ff7f11,#ffb066);transition:width .6s ease}
.bp-bar>b{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;font-weight:800;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);z-index:1}
.bp-tick{position:absolute;top:7px;bottom:7px;width:1px;background:rgba(255,255,255,.14)}
.bp-tick[data-passed]{background:rgba(0,0,0,.25)}
.bond-progress[data-state=hot] .bp-bar>i{box-shadow:0 0 18px rgba(255,127,17,.65);animation:bp-pulse 1.8s ease-in-out 2}
.bond-progress[data-state=hot] .bp-chip{color:#ffb066;border-color:#ff7f11}
.bond-progress[data-state=graduating] .bp-bar>i{background:repeating-linear-gradient(45deg,#ff7f11 0 12px,#ff9a45 12px 24px);background-size:34px 34px;animation:bp-stripes 1s linear infinite}
.bond-progress[data-state=graduated] .bp-bar>i{background:linear-gradient(90deg,#2fbf71,#5fe39b)}
.bond-progress[data-state=graduated] .bp-chip{color:#5fe39b;border-color:#2fbf71}
@keyframes bp-pulse{50%{box-shadow:0 0 6px rgba(255,127,17,.35)}}
@keyframes bp-stripes{to{background-position:34px 0}}
@media (prefers-reduced-motion:reduce){.bp-bar>i{animation:none!important;transition:none}}
.bp-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0}
.bp-stats div{background:#151517;border:1px solid #26262b;border-radius:10px;padding:8px 10px}
.bp-stats dt{font-size:11px;color:var(--muted)}
.bp-stats dd{margin:2px 0 0;font-weight:700;font-size:14px}
.bp-note{margin:0;font-size:12.5px;color:var(--muted);line-height:1.5}
.bp-link{font-size:13px;color:var(--accent)}

/* Trade panel */
.trade-panel{padding:16px;display:grid;gap:12px;margin-bottom:16px;border-color:#3a3a40}
.trade-tabs{display:grid;grid-template-columns:1fr 1fr;background:#151517;border:1px solid var(--line);border-radius:12px;padding:4px;gap:4px}
.trade-tabs button{border:0;border-radius:9px;padding:10px;font:inherit;font-weight:800;background:none;color:var(--muted);cursor:pointer}
.trade-tabs [data-side=buy][aria-selected=true]{background:#1f6b45;color:#fff}
.trade-tabs [data-side=sell][aria-selected=true]{background:#7a2633;color:#fff}
.trade-amount{display:grid;gap:6px;margin:0}
.trade-amount>span{font-size:12px;color:var(--muted)}
.trade-input-row{display:flex;align-items:center;background:#101012;border:1px solid var(--line);border-radius:12px;padding:0 14px}
.trade-input-row:focus-within{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.trade-input-row input{flex:1;min-width:0;border:0!important;background:none!important;box-shadow:none!important;color:var(--ink);font-size:24px;font-weight:700;padding:12px 0!important;margin:0!important;outline:none;border-radius:0}
.trade-unit{font-weight:700;color:var(--muted);white-space:nowrap}
.trade-chips{display:flex;gap:8px;flex-wrap:wrap}
.trade-chips button{flex:1;min-width:64px;border:1px solid var(--line);background:#151517;color:var(--ink);border-radius:999px;padding:8px 10px;font:inherit;font-weight:700;cursor:pointer}
.trade-chips button:disabled{opacity:.45;cursor:not-allowed}
.trade-receipt-line{margin:0;font-size:14px;min-height:20px}
.trade-receipt-line .muted{color:var(--muted)}
.trade-receipt-line .bad,.trade-details .bad dd{color:#ff6b6b}
.trade-details .warn dd{color:#ffb84d}
.trade-details summary{cursor:pointer;font-size:12px;color:var(--muted)}
.trade-details dl{margin:8px 0 0;display:grid;gap:6px}
.trade-details dl div{display:flex;justify-content:space-between;gap:12px;font-size:12.5px}
.trade-details dt{color:var(--muted)}
.trade-details dd{margin:0;font-weight:600;text-align:right}
.trade-details .sub{padding-left:10px;font-size:12px}
.trade-settings{display:grid;gap:8px}
.trade-setting{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted)}
.trade-seg{display:flex;gap:4px}
.trade-seg button{border:1px solid var(--line);background:none;color:var(--muted);border-radius:8px;padding:4px 8px;font:inherit;font-size:12px;cursor:pointer}
.trade-seg [aria-checked=true]{border-color:var(--accent);color:var(--ink)}
.trade-confirm{width:100%;justify-content:center;padding:14px;font-size:16px;margin:0!important}
.trade-panel[data-side=buy] .trade-confirm:not(:disabled){background:#22a061;border-color:#22a061}
.trade-panel[data-side=sell] .trade-confirm:not(:disabled){background:#c43d50;border-color:#c43d50}
.trade-confirm:disabled{opacity:.6;cursor:not-allowed}
.trade-appfee{margin:0;font-size:12px;color:#5fe39b;text-align:center;font-weight:700}
.trade-note{margin:0;font-size:12px;color:var(--muted);line-height:1.5}
.sheet-close,.trade-bar,.sheet-backdrop{display:none}

/* Phone and small tablets: one column; the panel becomes a bottom sheet opened from a sticky Buy / Sell bar. */
@media (max-width:900px){
  #token-detail .detail-layout.has-trade{grid-template-columns:minmax(0,1fr)}
  #token-detail .token-side{position:static}
  #token-detail .token-main .token-chart .chart-plot{max-height:240px}
  .bp-stats{grid-template-columns:1fr 1fr}
  .trade-panel{position:fixed;left:0;right:0;bottom:0;z-index:60;margin:0;border-radius:18px 18px 0 0;max-height:88vh;overflow:auto;
    transform:translateY(105%);transition:transform .25s ease;padding:18px 16px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -12px 40px rgba(0,0,0,.6);background:#141416}
  .trade-panel.open{transform:none}
  .sheet-close{display:block;justify-self:end;border:0;background:none;color:var(--muted);font-size:26px;line-height:1;padding:0 4px;cursor:pointer;margin-bottom:-8px}
  .sheet-backdrop:not([hidden]){display:block;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:55}
  .trade-bar{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(8,8,8,.92);backdrop-filter:blur(8px);border-top:1px solid var(--line)}
  .trade-bar .button{margin:0!important;justify-content:center;padding:13px;font-size:16px}
  .trade-bar-buy{background:#22a061!important;border-color:#22a061!important}
  .trade-bar-sell{background:#c43d50!important;border-color:#c43d50!important;color:#fff!important}
  .trade-bar.trade-bar-preview{grid-template-columns:1fr auto auto;align-items:center}
  .trade-bar-preview .trade-bar-note{color:var(--muted);font-size:13px;line-height:1.3}
  .trade-bar-preview :is(.trade-bar-buy,.trade-bar-sell){background:#1b1b1e!important;border-color:#3a3a40!important;color:var(--ink)!important;font-size:14px;padding:12px 14px}
  body:has(#detail-view:not([hidden])) main{padding-bottom:84px}body:has(#detail-view:not([hidden])){--site-footer-clearance:60px}
  body.sheet-open{overflow:hidden}
  @media (prefers-reduced-motion:reduce){.trade-panel{transition:none}}
}
/* The sticky bar only belongs on a token page. */
body:has(#detail-view[hidden]) .trade-bar,body:not(:has(#token-trade)) .trade-bar{display:none!important}

/* Lightweight Charts surface */
.token-chart .tv-plot{height:320px;width:100%}
@media (max-width:900px){.token-chart .tv-plot{height:240px}}

/* D149 chart empty state */
.token-chart .chart-empty{display:grid;gap:6px;justify-items:start}
.token-chart .chart-empty p{margin:0}
.chart-spot{color:#ffb066;font-size:13px}

/* D149 token tabs */
.token-tabs{padding:0;overflow:hidden}
.tt-list{display:flex;gap:2px;border-bottom:1px solid var(--line);padding:6px 8px 0;overflow-x:auto}
.tt-list button{border:0;background:none;color:var(--muted);font:inherit;font-weight:700;padding:10px 14px;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap}
.tt-list [aria-selected=true]{color:var(--ink);border-bottom-color:var(--accent)}
.tt-panel{padding:14px 18px 18px;min-height:120px}
.tt-panel:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.tt-empty,.tt-error{color:var(--muted);margin:8px 0}
.tt-error{color:#ff8a8a}
.tt-table{width:100%;border-collapse:collapse;font-size:13px}
.tt-table th{text-align:left;color:var(--muted);font-weight:600;font-size:11.5px;padding:6px 8px;border-bottom:1px solid var(--line)}
.tt-table td{padding:7px 8px;border-bottom:1px solid #1f1f23;white-space:nowrap}
.tt-buy .tt-side{color:#3fd18a;font-weight:700}.tt-sell .tt-side{color:#ff6b7d;font-weight:700}
.tt-venue{font-size:10px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:1px 6px;font-weight:600}
.tt-table .mono,.tt-who .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--ink)}
.tt-tx{color:var(--accent)}
.tt-holders{list-style:none;margin:0;padding:0;display:grid;gap:6px;counter-reset:h}
.tt-holders li{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:12px;align-items:center;font-size:13px;counter-increment:h}
.tt-holders li::before{content:counter(h);position:absolute;opacity:0}
.tt-label{font-size:11px;color:#ffb066;border:1px solid #6b4a24;border-radius:999px;padding:1px 7px;font-weight:700}
.tt-share{position:relative;height:18px;background:#1a1a1d;border-radius:6px;overflow:hidden}
.tt-share i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#3b2a18,#7a4d1d)}
.tt-share em{position:relative;font-style:normal;font-size:11.5px;padding-left:6px;line-height:18px}
.tt-amt{color:var(--muted);text-align:right}
.tt-count{margin:0 0 10px;font-weight:700}
.tt-desc{margin:0 0 12px;line-height:1.6}
.tt-links{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.tt-facts{display:grid;gap:8px;margin:0 0 12px}
.tt-facts div{display:grid;grid-template-columns:140px minmax(0,1fr);gap:12px;font-size:13px}
.tt-facts dt{color:var(--muted)}.tt-facts dd{margin:0}
.tt-details{margin-top:14px}
.tt-calls{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px}
.tt-call{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;color:var(--ink);text-decoration:none}
.tt-call:hover{border-color:#555}
.tt-tier{font-size:11px;color:var(--muted)}.tt-x{font-size:10px;border:1px solid #D7DCE3;border-radius:4px;padding:0 4px}
.tt-when{color:var(--muted);font-size:12px;text-align:right}
.tt-res{grid-column:1/-1;display:flex;gap:10px;font-size:12.5px;color:var(--muted)}
.tt-res strong.up{color:#3fd18a}.tt-res strong.down{color:#ff6b7d}
.tt-cta{display:inline-flex}
@media (max-width:900px){.tt-panel{padding:12px}.tt-table{display:block;overflow-x:auto}.tt-facts div{grid-template-columns:1fr}.tt-holders li{grid-template-columns:minmax(0,1fr) 90px auto}}

/* D149 balances */
.trade-amount-top{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted)}
.trade-balance{font-variant-numeric:tabular-nums}
.trade-chips [data-max]{flex:0 0 auto}

/* D149 review flow */
.trade-review{display:grid;gap:8px;border:1px solid var(--line);border-radius:12px;padding:12px;background:#101012}
.trade-review-title{margin:0;font-weight:800}
.trade-review-lines{margin:0;padding-left:18px;font-size:12px;color:var(--muted);display:grid;gap:3px;overflow-wrap:anywhere}
.trade-sign{justify-content:center;margin:0!important}
.trade-flow{margin:0;font-size:12.5px;min-height:1em}
.trade-flow.ok{color:#5fe39b}.trade-flow.bad{color:#ff6b6b}.trade-flow.warn{color:#ffb84d}
.trade-done{margin:0;font-weight:800;color:#5fe39b}

/* D149 chart marks */
.mark-card{position:absolute;top:8px;z-index:3;max-width:280px;background:rgba(18,18,20,.97);border:1px solid #3a3a40;border-radius:10px;padding:8px;display:grid;gap:6px;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.mark-row{display:grid;grid-template-columns:20px minmax(0,1fr);gap:2px 8px;color:var(--ink);text-decoration:none;font-size:12.5px}
.mark-row b{grid-row:span 2;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;color:#111;font-size:11px}
.mark-row small{color:var(--muted);font-size:11.5px}
a.mark-row:hover span{text-decoration:underline}
.chart-marks-menu{position:absolute;z-index:5;right:0;top:100%;margin-top:6px;background:#141416;border:1px solid var(--line);border-radius:10px;padding:8px 10px;display:grid;gap:2px;min-width:200px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.chart-toolbar{position:relative}
.token-chart .chart-mark-opt{display:flex!important;flex-direction:row!important;align-items:center;gap:8px;font-size:13px;cursor:pointer;margin:0!important;padding:5px 2px;color:var(--ink)}
.token-chart .chart-mark-opt input{width:16px!important;height:16px;margin:0!important;padding:0!important;flex:none;accent-color:var(--accent)}
.chart-mark-opt b{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;color:#111;font-size:10px}

/* ===================== D151 · token page sizing and usability ===================== */
#detail-view{padding-top:4px}
.th-hidden{display:none!important}
/* The token page's back arrow lives in the header; the old line only shows where there's no header strip (examples). */
#detail-view>.text-link[href="/"]{display:none}
#detail-view.show-back>.text-link[href="/"]{display:inline-flex}
.th-sr,.bp-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#token-detail .detail-layout.has-trade{gap:12px;grid-template-columns:minmax(0,1fr) 360px;max-width:none;width:100%}
@media (min-width:1600px){#token-detail .detail-layout.has-trade{grid-template-columns:minmax(0,1fr) 400px}}
#token-detail .token-main,#token-detail .token-side{gap:12px}

/* Header strip */
#token-detail .has-trade>.token-identity.th{position:relative;overflow:hidden;padding:10px 16px 13px;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px 20px;border-radius:14px}
.th .detail-head{display:flex;align-items:center;gap:12px;min-width:0;margin:0}
.th .th-back{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;color:var(--muted);text-decoration:none;font-size:17px;border:1px solid var(--line)}
.th .th-back:hover{color:var(--ink);border-color:#555}
#token-detail .has-trade>.token-identity .detail-art{width:44px;height:44px;flex:none}
#token-detail .has-trade>.token-identity .detail-art :is(img,svg,canvas,.token-art){width:44px!important;height:44px!important;border-radius:10px}
.th .detail-title{display:grid;gap:4px;min-width:0;margin:0}
.th .th-row{display:flex;align-items:center;gap:8px;min-width:0}
#token-detail .has-trade>.token-identity.th h1{font-size:22px;line-height:1.15;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.02em}
.th .detail-sub{display:flex;align-items:center;gap:6px;margin:0;flex:none}
.th .detail-sub .symbol{font-size:12px}
.th .mint-chip{font-size:11px;padding:3px 8px}
.detail-sub .th-mint{font:500 12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);background:none;padding:0;white-space:nowrap}
.th .badge[data-stage=bonding]{color:#ffb066;border-color:#5a3a1c;background:#1d150d}
.th .badge{font-size:10.5px;padding:2px 7px;margin:0;white-space:nowrap;flex:none}
.th .th-meta .detail-story{display:block!important;-webkit-line-clamp:unset!important;line-clamp:unset!important;margin:0!important;font-size:12px;line-height:18px;max-height:18px;color:var(--muted);white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.th .detail-facts{display:flex;flex-wrap:nowrap;justify-content:flex-end;gap:6px;margin:0;min-width:0;overflow-x:auto;scrollbar-width:none}
.th .detail-facts::-webkit-scrollbar{display:none}
.th .detail-facts>div{flex:none;background:#17171a;border:1px solid #26262b;border-radius:10px;padding:5px 10px;min-width:0;min-height:0;box-shadow:none}
.th .detail-facts dt{font-size:10.5px;color:var(--muted);margin:0;line-height:1.2}
.th .detail-facts dd{margin:1px 0 0;display:flex;gap:6px;align-items:baseline;white-space:nowrap}
.th .detail-facts .fact-value{font-size:14px;font-weight:750;line-height:1.2}
.th .detail-facts small{font-size:11px;color:var(--muted);margin:0}
.th .detail-facts .th-badge{display:flex;align-items:center;gap:6px;padding:4px 9px;background:transparent}
.th .detail-facts .th-badge dd{margin:0}.th .detail-facts .th-badge .fact-value{font-size:12.5px;font-weight:650}
.th .th-price .fact-value{color:#ffb066;font-variant-numeric:tabular-nums;display:inline-block;min-width:76px}
.th .th-line{position:absolute!important;left:0;right:0;bottom:0;height:3px!important;margin:0!important;border-radius:0!important;border:0!important;background:#1d1d20!important}
.th .th-line>i{display:block;height:100%;border-radius:0!important;background:linear-gradient(90deg,#ff7f11,#ffb066)!important}

/* Chart as the hero */
.has-trade .token-chart{position:relative;padding:10px 14px 10px}
.has-trade .token-chart .chart-header{position:absolute;right:14px;bottom:8px;margin:0;z-index:1}
.has-trade .token-chart .chart-header>div:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.has-trade .token-chart .chart-badge{font-size:10.5px;padding:3px 8px}
.has-trade .token-chart .chart-toolbar{margin:0 0 4px;padding:0 0 6px;border-bottom:1px solid #1f1f23;gap:6px}
.has-trade .token-chart .chart-toolbar button{padding:5px 9px;font-size:12px}
.has-trade .token-chart .chart-price{display:inline-block;font-size:18px;font-weight:750;margin:2px 8px 0 0;letter-spacing:0}
.has-trade .token-chart .chart-units{display:inline-block;font-size:11.5px;margin:0}
.has-trade .token-chart .tv-plot{height:clamp(300px,calc(100vh - 472px),520px)}
#token-detail .has-trade .token-main .token-chart .chart-plot{max-height:none;height:auto;min-height:0}
.has-trade .token-chart .chart-readout{font-size:11.5px;margin:4px 0 0;min-height:16px}
.has-trade .token-chart .chart-status{display:inline;font-size:11px;margin:0 10px 0 0;color:var(--muted)}
.has-trade .token-chart .chart-data{display:inline-block;margin:0;font-size:11.5px;vertical-align:baseline}
.has-trade .token-chart .chart-data[open]{display:block;margin-top:6px}
.has-trade .token-chart .chart-data>summary{font-size:11.5px}

/* Bonding: one slim row */
.has-trade .bond-progress{display:grid;grid-template-columns:auto minmax(140px,1fr) auto auto;align-items:center;gap:8px 14px;padding:10px 14px}
.has-trade .bond-progress .bp-head{gap:8px}
.has-trade .bond-progress h2{font-size:13px;white-space:nowrap}
.has-trade .bp-chip{font-size:10px;padding:3px 8px}
.has-trade .bp-bar{height:16px}
.has-trade .bp-bar>b{font-size:10.5px}
.has-trade .bp-tick{top:3px;bottom:3px}
.has-trade .bp-stats{display:flex;gap:14px;grid-template-columns:none}
.has-trade .bp-stats div{background:none;border:0;padding:0;display:flex;gap:5px;align-items:baseline;white-space:nowrap}
.has-trade .bp-stats dt{font-size:11px}.has-trade .bp-stats dd{font-size:12.5px;margin:0}
.bp-help{width:22px;height:22px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--muted);font:inherit;font-size:12px;cursor:help;padding:0}
.has-trade .bp-link{grid-column:1/-1;font-size:12px}

/* Side column: the trade panel only, sticky */
#token-detail .has-trade .token-side{position:sticky;top:12px}
#token-detail .token-side .trade-panel{padding:14px;gap:10px}
.trade-panel .trade-tabs button{padding:8px}
.trade-panel .trade-input-row input{font-size:22px;padding:9px 0!important}
.trade-rrow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.trade-rrow .trade-receipt-line{flex:1;min-width:0;font-size:13.5px}
.trade-gear{position:relative;flex:none}
.trade-gear>summary{list-style:none;cursor:pointer;font-size:11.5px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:4px 9px;white-space:nowrap}
.trade-gear>summary::-webkit-details-marker{display:none}
.trade-gear[open]>summary{color:var(--ink);border-color:var(--accent)}
.trade-gear>.trade-settings{position:absolute;right:0;top:calc(100% + 6px);z-index:6;background:#141416;border:1px solid var(--line);border-radius:12px;padding:10px;min-width:240px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.trade-confirm{padding:12px;font-size:15px}
.trade-foot{font-size:11.5px;color:var(--muted);line-height:1.5;text-align:center}
.trade-foot .trade-appfee{display:inline;font-size:11.5px}
.trade-foot .trade-note{display:inline;font-size:11.5px}
.trade-foot :is(p,a){display:block;margin:6px 0 0;font-size:11.5px}

/* Tabs */
.token-tabs .tt-panel{padding:12px 14px 14px;min-height:100px}
.tt-more{margin-top:8px}
.tt-curve{margin-top:12px}.tt-curve>summary{cursor:pointer;font-weight:650}
.tt-curve h2{display:none}

@media (max-width:900px){
  #token-detail .detail-layout.has-trade{grid-template-columns:minmax(0,1fr)}
  #token-detail .has-trade>.token-identity.th{grid-template-columns:minmax(0,1fr);padding:10px 12px 13px;gap:8px}
  .th .detail-facts{justify-content:flex-start}
  .th .th-meta{display:none}
  .th .detail-head{gap:10px}
  #token-detail .has-trade .token-side{position:static}
  .has-trade .token-chart .tv-plot{height:260px}
  .has-trade .token-chart .chart-toolbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .has-trade .token-chart .chart-toolbar::-webkit-scrollbar{display:none}
  .has-trade .token-chart .chart-toolbar>*{flex:none}
  .th .detail-facts>div{padding:4px 8px}
  .th .detail-facts .fact-value{font-size:13px}
  #token-detail .has-trade>.token-identity.th{padding:8px 12px 11px}
  .has-trade .bond-progress{grid-template-columns:minmax(0,1fr) auto;gap:8px 10px}
  .has-trade .bond-progress .bp-bar{grid-column:1/-1;order:3}
  .has-trade .bond-progress .bp-stats{grid-column:1/-1;order:4;flex-wrap:wrap}
  .has-trade .bond-progress .bp-help{order:2}
  .has-trade .token-chart .chart-status{padding-right:0}
  .has-trade .token-chart .chart-header{position:static;margin:4px 0 0}
}

/* ===================== D152 · stability and polish ===================== */
/* A1/A2: the token route keeps its final spacing from the first paint, and the footer stays below a reserved shell. */
html[data-route=token] #token-detail{min-height:calc(100vh - 96px)}

/* A3: the chart card has the same height while loading, empty, unavailable or drawn. */
#token-detail .has-trade .token-main .token-chart .chart-plot{height:clamp(300px,calc(100vh - 472px),520px);display:grid}
#token-detail .has-trade .token-main .token-chart .chart-plot>.tv-plot{height:100%}
#token-detail .has-trade .token-main .token-chart .chart-plot>.chart-empty{align-self:center;justify-self:center;text-align:center;justify-items:center}
.has-trade .token-chart .chart-price{min-height:22px;min-width:1px}
/* C11: empty/unavailable charts: no stray price bar, no floating badge, no dead Reset; keep the row height. */
.has-trade .token-chart:is([data-status=empty],[data-status=unavailable]) :is(.chart-price,.chart-units){display:inline-block!important;visibility:hidden}
.has-trade .token-chart:is([data-status=empty],[data-status=unavailable]) :is(.chart-badge,.chart-reset){display:none}
.has-trade .token-chart:not([data-status]) .chart-price{visibility:hidden}
/* C13: the receipt stays on one line (full text in its tooltip and in Details), so the ⚙ chip never jumps. */
.trade-rrow .trade-receipt-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trade-rrow{flex-wrap:wrap}
/* D15/D16: settings open inline (push content down) everywhere, so they can't cover the confirm button or the fees. */
.trade-gear[open]{flex-basis:100%;order:2}
.trade-gear[open]>summary{display:inline-block}
.trade-gear>.trade-settings{position:static!important;box-shadow:none!important;min-width:0!important;margin-top:8px}
/* D17: Details can't push the confirm button away (the button now sits above Details; long lists scroll inside). */
.trade-details[open] dl{max-height:240px;overflow:auto}
/* E: fixed-width digits so numbers don't wiggle; stable tab panels; art box placeholder. */
.th .detail-facts,.trade-receipt-line,.trade-details dd,.trade-balance,.tt-table td,.tt-holders,.bp-stats dd,.bp-bar>b{font-variant-numeric:tabular-nums}
.token-tabs .tt-panel{min-height:180px}
#token-detail .has-trade>.token-identity .detail-art{background:#1a1a1d;border-radius:10px}
#token-detail .has-trade .token-main .token-chart[data-status=unavailable] .chart-plot{display:grid!important}
@media (max-width:900px){
  #token-detail .has-trade .token-main .token-chart .chart-plot{height:260px}
  .trade-panel{max-height:88dvh}
}

/* D152: fixed-height text lines in the chart card, so loading/empty/drawn states and wrapping never change its height. */
.has-trade .token-chart :is(.chart-price,.chart-units){height:24px;line-height:24px;vertical-align:top;overflow:hidden;white-space:nowrap}
.has-trade .token-chart .chart-readout{height:18px;line-height:18px;margin:4px 0 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.has-trade .token-chart .chart-status{display:inline-block;height:18px;line-height:18px;vertical-align:top;max-width:60%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.has-trade .token-chart .chart-data:not([open]){display:inline-block;height:18px;line-height:18px;vertical-align:top}
.has-trade .token-chart .chart-data:not([open])>summary{line-height:18px}
@media (max-width:900px){.has-trade .token-chart .chart-status{max-width:100%;display:block}
  .has-trade .token-chart:is([data-status=empty],[data-status=unavailable]) .chart-badge{display:inline-flex;visibility:hidden}
  .has-trade .token-chart .chart-header{min-height:24px}
  .has-trade .bond-progress{min-height:141px;align-content:start}}

/* D154 fix: the one-line receipt must never widen the panel (the phone sheet was cut off on the left). */
.trade-panel{grid-template-columns:minmax(0,1fr)}
.trade-panel>*{min-width:0}

/* D155: the chart must always shrink to its column. The D152 grid let the chart canvas set its own minimum width, so the
   chart kept its old width on resize and slid under the trade panel (and pushed the page sideways on narrow windows). */
#token-detail .has-trade .token-main,#token-detail .has-trade .token-main>*{min-width:0}
#token-detail .has-trade .token-chart{min-width:0;max-width:100%;overflow:hidden}
#token-detail .has-trade .token-main .token-chart .chart-plot{grid-template-columns:minmax(0,1fr);min-width:0;width:100%}
#token-detail .has-trade .token-main .token-chart .chart-plot>.tv-plot{min-width:0;width:100%;overflow:hidden}
/* Mid widths (two columns but a narrower window): a slightly narrower panel so the chart keeps room. */
@media (min-width:901px) and (max-width:1180px){#token-detail .detail-layout.has-trade{grid-template-columns:minmax(0,1fr) 320px}}

/* D155: the chart's data table scrolls inside its box instead of widening the page. */
#token-detail .has-trade .token-chart .chart-data{max-width:100%}
#token-detail .has-trade .token-chart .chart-table-wrap{max-width:100%;overflow-x:auto}


/* D155: the bonding row wraps when ITS column is narrow (two columns in a half-width window), not only on phones. */
#token-detail .has-trade .token-main{container-type:inline-size;container-name:tokenmain}
@container tokenmain (max-width:700px){
  .has-trade .bond-progress{grid-template-columns:minmax(0,1fr) auto;gap:8px 10px}
  .has-trade .bond-progress .bp-bar{grid-column:1/-1;order:3}
  .has-trade .bond-progress .bp-stats{grid-column:1/-1;order:4;flex-wrap:wrap}
  .has-trade .bond-progress .bp-help{order:2}
  .has-trade .token-chart .chart-toolbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .has-trade .token-chart .chart-toolbar>*{flex:none}
}

/* D155: right-aligned pills that overflow must still show Price and Market cap first (safe alignment: auto margin, not
   justify-content:flex-end, which hides overflowed items at the start). */
.th .detail-facts{justify-content:flex-start!important}
.th .detail-facts>:first-child{margin-left:auto}
/* Quick-amount chips stay on one line in a narrower panel. */
.trade-chips button{white-space:nowrap;min-width:0;padding-left:6px;padding-right:6px}
/* The chart's status badge sits in the footnote row when the column is narrow, instead of covering it. */
@container tokenmain (max-width:700px){
  .has-trade .token-chart .chart-header{position:static;margin:4px 0 0}
  .has-trade .token-chart .chart-status{max-width:100%}
}

/* D158 Part 5: say it once. The chart's freshness badge repeats its status line; About's details block repeats the
   description and links shown above it. */
.has-trade .token-chart .chart-badge{display:none}
.tt-details>summary{font-weight:650}
.tt-details :is(.detail-story,.detail-links){display:none}

/* D158 Part 5: the phone Buy/Sell bar never hides the end of the page (footer links stay reachable). */
@media (max-width:900px){html[data-route=token] body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}}
/* D158 Part 5: interval buttons stay in every chart state (they keep the toolbar's height; Refresh stays too). */
#token-detail .has-trade .token-chart[data-status] .chart-frames{display:flex!important}
/* D158 Part 5: the chart status line was clipped in half (12px padding from token-chart.css inside an 18px line). */
.token-chart .chart-status{padding:0;border-top:0;box-sizing:content-box}
.has-trade .token-chart .chart-header{display:none}

/* D158 Part 4: mark icons in the bubble card and Marks menu */
.mark-ic{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:999px;flex-shrink:0;--icon-base:#0d0d0f;--icon-accent:#0d0d0f;--icon-ink:#fff}
.mark-ic svg.ic{margin:0}
/* TR-04: hand-off to the execution host, same size and place as the confirm button */
.trade-handoff{display:flex;width:100%;justify-content:center;padding:12px;font-size:15px;margin:0!important;text-decoration:none}
.trade-handoff[hidden]{display:none}
/* Real-use pass F17: on phones the name gets its own line (it was cut to "B…" next to the symbol and mint chip). The
   stat pills stay one line inside the D151 phone budget (header ≤ 120px): a horizontal scroller that starts at Price,
   with a fade on the right edge while more pills are off-screen, so none is silently clipped. */
@media (max-width:600px){
  .th .th-name{flex-wrap:wrap;row-gap:2px}
  #token-detail .has-trade>.token-identity.th h1{flex:1 1 100%;white-space:normal;overflow-wrap:anywhere;font-size:19px;line-height:1.15}
  .th .detail-facts{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);padding-right:24px}
  .th .detail-facts>*{scroll-snap-align:start}
  .th .detail-facts>:first-child{margin-left:0}
  #token-detail .has-trade>.token-identity.th{gap:6px;padding:7px 12px 10px}
  .th .detail-facts>div{padding:3px 8px}
}
/* Real-use pass F21: token not found / unavailable. */
.token-missing{max-width:560px;margin:8px auto 0;padding:40px 0 48px;text-align:center}.token-missing h1{font-size:28px;margin:0 0 8px}.token-missing p{color:var(--muted);margin:0 0 20px}.token-missing-actions{display:flex;gap:16px;justify-content:center;align-items:center;flex-wrap:wrap}

/* Prompt H Part 4: the "Reading token data…" line shows from first paint; #token-detail is its own block formatting
   context, so no state's first margin collapses through it and moves the page when the token (or an error) arrives. */
#token-detail{display:flow-root}#token-detail>p:only-child{margin:0;padding:8px 0;color:var(--muted)}

/* HR-FAST U5: holder payouts panel (only for a Holder Mode coin with a listed holder ledger). */
.holder-payouts { margin-top: 16px; }
.holder-payouts h2 { margin: 0 0 6px; font-size: 1.05rem; }
.holder-payouts h3 { margin: 14px 0 6px; font-size: .9rem; color: var(--muted, #b0b0b8); font-weight: 600; }
.holder-payouts-clock { margin: 0 0 10px; font-variant-numeric: tabular-nums; color: var(--ink, #f4f4f5); }
.holder-payouts-facts { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; margin: 0; }
.holder-payouts-facts dt { color: var(--muted, #b0b0b8); }
.holder-payouts-facts dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.holder-payouts-receipts { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.holder-payouts-receipts a { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; }
.holder-payouts-receipts a:focus-visible { outline: 2px solid var(--accent, #ff7f11); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 700px) {
  .holder-payouts-facts { grid-template-columns: 1fr; }
  .holder-payouts-facts dd { text-align: left; margin-bottom: 6px; }
  .holder-payouts-receipts a { display: inline-block; min-height: 44px; line-height: 44px; }
}
.holder-payouts-you { margin: 0 0 10px; color: var(--accent, #ff7f11); font-weight: 600; }
/* Audit 2026-10-24: a visible "more" button at the right edge of the stat pills while some are off-screen
   (token-header.js moreCue). Over the header, so the D151 height budget is unchanged. */
.th>.th-more{position:absolute;right:8px;transform:translateY(-50%);z-index:2;display:grid;place-items:center;width:28px;height:28px;padding:0;border-radius:999px;border:1px solid #3a3a40;background:#1f1f23;color:var(--ink);cursor:pointer;box-shadow:-10px 0 12px #111114}
.th>.th-more[hidden]{display:none}
.th>.th-more:focus-visible{outline:2px solid var(--accent);outline-offset:2px}