/* PrimeTriad shared shell for /staking (PrimeIndexer). Batch A 2026-09-25. Tokens match landing css/style.css. */
:root:root{
  --pt-bg:#0a0809; --bg-alt:#100c0e; --surface-raised:#1e1618;
  --border-subtle:#24181a; --text-muted:#c4b8b0; --text-dim:#a89890;
  --brand-gold:#d4a017; --brand-gold-hover:#e8b82a;
  --radius:14px; --radius-sm:10px; --radius-lg:20px;
  --pt-font:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --pt-display:"Syne","DM Sans",system-ui,sans-serif;
  --pt-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --max-w:74rem; --header-h:4.25rem;
  --chrome-border:rgba(58,42,44,.55); --chrome-bg:rgba(10,8,9,.88);
  --shadow-sm:0 1px 2px rgba(0,0,0,.28);
  /* PrimeIndexer product accent: ONE red. #f0626a for text/active/fills (6.33:1 on #0a0809; #0a0809 text on it 6.33:1);
     #b4293c for borders only (cosmetic 2026-09-26, replaces #ff8f8a / #f5a3b0 / #fbb4bd / #e35a6f) */
  --product-accent:#f0626a; --product-accent-soft:rgba(240,98,106,.10);
  --product-accent-border:rgba(180,41,60,.62); --product-accent-line:#b4293c;
  --product-accent-glow:0 0 0 1px rgba(240,98,106,.14),0 8px 28px rgba(240,98,106,.06);
  /* Re-map the app's old tokens onto the landing palette (crimson #c41e3a dropped) */
  --bg:#0a0809; --bg-deep:#0a0809; --bg-panel:#161012; --bg-elevated:#1e1618;
  --surface:#161012; --surface2:#1e1618; --card:#161012; --card-solid:#161012;
  --border:#3a2a2c; --text:#f4efe8; --muted:#a89890;
  --accent:var(--product-accent); --accent-dim:var(--product-accent); --accent-glow:rgba(240,98,106,.25);
  --gold:var(--product-accent); --neon-cyan:var(--product-accent); --neon-magenta:var(--product-accent);
  --brass:var(--text-muted); --pending:var(--product-accent);
  --brand-glow:none; --brand-gold-glow:none; --inset-top:0 0 #0000;
  --shadow-md:var(--shadow-sm); --shadow-xl:var(--shadow-sm);
  --stake-content-max:var(--max-w); --stake-chrome-max:var(--max-w);
}
/* cosmetic 2026-09-26 (batch 2): the compiled Next CSS hard-codes the old salmon/pink accents (#ff8f8a, #f5a3b0,
   #e35a6f). Same selectors, prefixed for specificity, (plus pt-map.css, which loads after pt-shell.css) recoloured to the one staking red: #f0626a (text, fills, glows) and
   #b4293c (borders only). Generated by reference/build_pt_shell_css.py. Status colours (#f87171/#fca5a5) are unchanged. */
html:root{--accent:#f0626a;--accent-dim:#f0626a;--brand-glow:0 0 24px #f0626a66;--neon-magenta:#f0626a}
html body .stake-app{background:radial-gradient(1100px 600px at 12% -8%,#f0626a29,transparent 60%),radial-gradient(900px 500px at 100% 0,#d4a84b1f,transparent 55%),radial-gradient(800px 800px at 50% 120%,#f0626a14,transparent 60%),var(--bg)}
html body .card-featured{background:linear-gradient(135deg,#f0626a24,#f0626a14 45%,#e8c56a0f)}
html body .stake-table-row:hover{background:#f0626a0f}
html body .stake-nav-btn-active{background:linear-gradient(135deg,#f0626a47,#d4a84b24)}
html:root{--pending:#f0626a}
html body .block-range-tabs .tab.active{background:#f0626a26}
html body .cadence-seg.mining-index{background:#f0626ad9}
html body .cadence-dot.mining-index{background:#f0626ad9}
html body .pulse-block.mining-index{background:#f0626a1a;border-color:#b4293c9b}
html body .arrival-swatch.v-contested{background:#f0626a33;border:1px solid #b4293c9b}
html body .arrival-swatch.mining-index{background:#f0626a8c;border:1px solid #b4293cff}
html body .arrival-v-gutter.contested{background:#f0626a1a}
html body .arrival-v-height.mining-index{color:#f0626a;background:#f0626a29;border-color:#b4293cad}
html body .arrival-v-height.contested{box-shadow:inset 0 0 0 1px #f0626a8c}
html body .arrival-v-gutter.mining-index{background:#f0626a14}
html body .v-badge.contested{background:#f0626a33}
html:root,html body .stake-app{--gold:#f0626a!important;--brass:#f0626a!important;--color-pi-gold:#f0626a!important;--color-pi-brass:#f0626a!important;--neon-cyan:#f0626a!important;--neon-magenta:#f0626a!important;--accent:#f0626a!important;--accent-dim:#f0626a!important;--brand-glow:0 0 24px #f0626a66!important;--brand-gold-glow:0 0 20px #f0626a59!important}
html body .stake-tab-active{color:#f0626a!important}
html body .block-range-tabs .tab.active,html body .tab.active{background:#f0626a26!important;border-color:#b4293cbd!important}
html body .text-pi-gold,html body .hover\:text-pi-gold:hover{color:#f0626a!important}
html body .text-pi-brass,html body .hover\:text-pi-brass:hover{color:#f0626a!important}
html body .stake-triad-link{color:#f0626a!important;background:#f0626a14!important;border-color:#b4293c78!important}
html body .stake-section-title:before{background:linear-gradient(180deg,#f0626a,#f0626a)!important}
html body .stake-input:focus{border-color:#b4293cbd!important;box-shadow:0 0 0 2px #f0626a1f!important}
html body .arrival-panel-mempool .arrival-head,html body .arrival-panel-compact .arrival-head{color:#f0626a!important;background:#f0626a29!important;border:1px solid #b4293cad!important}
html body .arrival-panel-mempool .arrival-head-vertical .arrival-head-h,html body .arrival-panel-compact .arrival-head-vertical .arrival-head-h{color:#f0626a!important}
html body .arrival-panel-mempool .arrival-head-vertical .arrival-head-meta{color:#f0626acc!important}
html body .arrival-panel-mempool .arrival-head.contested{box-shadow:inset 0 0 0 1px #f0626a8c,inset 0 1px #ffffff0f,0 1px 3px #00000059!important}
html body .block-range-tabs .tab.active,html body .tab.active{border-color:#b4293cbd!important;color:#f0626a!important}
html body .ptm .ptm-chk input{accent-color:#f0626a}
html body .ptm .p1{background:#f0626a}
html body .ptm .ty-i{color:#f0626a;border-color:rgba(180,41,60,0.68);background:rgba(240,98,106,.12)}
html body .ptm .r.t-i .bk{border-left-color:rgba(180,41,60,0.94)}
html body .ptm .r.data:hover{background:rgba(240,98,106,.04)}
html body .ptm .r.open{background:rgba(240,98,106,.06)}
html body .ptm .hl .r:not(.detail) .col-prime::before{background:rgba(240,98,106,.07);border-left:1px solid rgba(180,41,60,0.34);border-right:1px solid rgba(180,41,60,0.34)}
html body .ptm .r.head .col-prime{background:rgba(240,98,106,.09)}
html body .ptm .c.pend{border:1.5px dashed rgba(180,41,60,1)}
html body .ptm .c.p1.pend{background:rgba(240,98,106,.22)}
html body .ptm .sw.pend{background:rgba(240,98,106,.22);border:1.5px dashed rgba(180,41,60,1)}
html body .ptm .hl .r.compact .col-prime::before{background:rgba(240,98,106,.035)}
/* Fonts: DM Sans body, Syne display, JetBrains Mono (next/font vars live on .__variable_* classes) */
html body, html body [class*="__variable_"]{
  --font-stake:"DM Sans"; --font-stake-mono:"JetBrains Mono"; --font-mono:"JetBrains Mono"; --font-display:"Syne";
}
html body{background:var(--bg);color:var(--text);font-family:var(--pt-font)}
html body h1,html body h2,html body h3,html body .stake-section-title{font-family:var(--pt-display)}
html body code,html body kbd,html body pre{font-family:var(--pt-mono)}

/* Layout: flatten the React wrapper so shell parts can be ordered around it */
html body{display:flex;flex-direction:column;min-height:100vh;margin:0}
html body > div[class*="__variable_"], html body > div[class*="__variable_"] > .stake-app{display:contents}
html body > *, html body .stake-app > *{order:4}
html body .pt-header{order:1} html body .stake-app > .stake-header{order:2} html body .pt-extras{order:3}
html body .stake-app > .stake-main{order:4;flex:1 0 auto;width:100%} html body .stake-app > .stake-footer{order:5} html body .pt-footer{order:6}
html body .stake-footer{display:none!important}

/* ---------- Shared header ---------- */
.pt-header{position:sticky;top:0;z-index:60;height:var(--header-h);background:var(--chrome-bg);border-bottom:1px solid var(--chrome-border);backdrop-filter:blur(16px) saturate(1.05);-webkit-backdrop-filter:blur(16px) saturate(1.05);font-family:var(--pt-font)}
.pt-header-inner{max-width:var(--max-w);margin:0 auto;height:100%;padding:0 1.25rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;position:relative}
.pt-logo{display:inline-flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--text);min-width:0}
.pt-logo img{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 1px 6px rgba(0,0,0,.35))}
.pt-logo-text{font-family:var(--pt-display);font-weight:800;font-size:1.15rem;letter-spacing:-.03em;line-height:1.15;color:var(--text)}
.pt-logo-tagline{display:block;font-size:.7rem;font-weight:500;color:var(--text-dim);max-width:18rem;line-height:1.25}
.pt-nav{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem}
.pt-nav a{padding:.4rem .7rem;font-size:.8125rem;font-weight:550;letter-spacing:.01em;color:var(--text-muted);border-radius:999px;text-decoration:none;transition:color .18s ease,background .18s ease}
.pt-nav a:hover{color:var(--text);background:rgba(30,22,24,.65)}
.pt-nav a[aria-current="page"]{color:var(--text);background:var(--product-accent-soft);box-shadow:inset 0 -2px 0 var(--product-accent)}
.pt-nav .pt-nav-cta{border:1px solid var(--brand-gold);color:var(--brand-gold)}
.pt-nav-toggle{display:none;background:none;border:1px solid var(--border);border-radius:10px;color:var(--text);padding:.45rem .7rem;font:inherit;font-size:1.1rem;line-height:1;cursor:pointer;min-width:44px;min-height:40px}
@media (max-width:860px){
  .pt-nav-toggle{display:inline-block}
  .pt-nav{display:none;position:absolute;top:var(--header-h);left:0;right:0;flex-direction:column;align-items:stretch;background:var(--bg);border-bottom:1px solid var(--border);padding:.75rem 1rem;z-index:61}
  html.pt-nav-open .pt-nav{display:flex}
  .pt-nav a{min-height:44px;display:flex;align-items:center;font-size:1rem}
  .pt-logo-tagline{display:none}
}

/* ---------- Product sub-nav (the app's old header, restyled as a second row) ---------- */
html body .stake-header{position:relative;z-index:50;background:rgba(16,12,14,.7);border-bottom:1px solid var(--chrome-border);padding:0;margin:0;font-family:var(--pt-font)}
html body .stake-header .stake-chrome{max-width:var(--max-w);margin:0 auto;padding:0 1.25rem;width:100%}
html body .stake-header .stake-header-panel{max-width:none;margin:0;padding:.4rem 0;background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none}
html body .stake-header .stake-header-panel > div{flex-direction:row!important;align-items:center;gap:.5rem!important;flex-wrap:nowrap}
html body .stake-header .stake-header-panel > div > div:first-child{order:2;margin-left:auto;flex-wrap:nowrap}
html body .stake-header .stake-brand-link, html body .stake-header .stake-triad-link{display:none!important}
html body .stake-header .stake-site-nav{order:1;display:flex;align-items:center;gap:.3rem;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;min-width:0;padding:0;margin:0;border:0;background:none}
html body .stake-header .stake-site-nav::-webkit-scrollbar{display:none}
html body .stake-header .stake-site-nav::before{content:"PrimeIndexer";font-family:var(--pt-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--product-accent);margin-right:.5rem;white-space:nowrap}
html body .stake-header .stake-nav-btn{min-width:0;padding:.35rem .7rem;font-size:.8rem;font-weight:550;color:var(--text-dim);border-radius:999px;background:none;border:0;box-shadow:none;text-decoration:none;white-space:nowrap;font-family:var(--pt-font)}
html body .stake-header .stake-nav-btn:hover{color:var(--text);background:rgba(30,22,24,.65)}
html body .stake-header .stake-nav-btn-active{color:var(--text);background:var(--product-accent-soft);box-shadow:inset 0 -2px 0 var(--product-accent)}
html body .stake-header .btn-primary{padding:.4rem .9rem;font-size:.8rem;white-space:nowrap}
@media (max-width:640px){
  html body .stake-header .stake-site-nav::before{display:none}
  html body .stake-header .stake-nav-btn{padding:.35rem .55rem;font-size:.76rem}
  html body .stake-header .btn-primary{padding:.4rem .6rem;font-size:.74rem}
}

/* ---------- Cards and buttons: flat ---------- */
html body .card{background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
html body .btn-primary{background:var(--product-accent);border:1px solid var(--product-accent);color:#0a0809;box-shadow:none;border-radius:var(--radius-sm);font-weight:600;filter:none}
html body .btn-primary:hover{background:var(--product-accent);border-color:var(--product-accent);filter:brightness(1.08);transform:none}
html body .btn-secondary{background:transparent;border:1px solid var(--product-accent-border);color:var(--text);border-radius:var(--radius-sm)}
html body .btn-ghost{border-radius:var(--radius-sm)}
.pt-eyebrow{font-family:var(--pt-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--product-accent)}
.pt-card{background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.pt-card--accent{border-color:var(--product-accent-border);box-shadow:var(--product-accent-glow)}
.pt-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.72rem 1.3rem;border-radius:var(--radius-sm);font-family:var(--pt-font);font-size:.9rem;font-weight:600;border:1px solid var(--border);background:transparent;color:var(--text);text-decoration:none;cursor:pointer;min-height:44px}
.pt-btn--primary{background:var(--product-accent);border-color:var(--product-accent);color:#0a0809}
.pt-btn--brand{background:var(--brand-gold);border-color:var(--brand-gold);color:#0a0809}
.pt-btn--ghost:hover{border-color:var(--product-accent-border)}

/* ---------- Page extras (route-scoped blocks rendered by the shell) ---------- */
.pt-extras{width:100%;font-family:var(--pt-font)}
.pt-extras[hidden],.pt-extra[hidden]{display:none!important}
.pt-wrap{max-width:var(--max-w);margin:0 auto;padding:1.25rem 1.25rem 0}
.pt-faq h1{font-family:var(--pt-display);font-weight:800;font-size:1.6rem;margin:.35rem 0 .5rem;color:var(--text)}
.pt-faq p,.pt-faq li{color:var(--text-muted);line-height:1.6;font-size:.95rem}
.pt-faq details{border-top:1px solid var(--border-subtle);padding:.75rem 0}
.pt-faq summary{cursor:pointer;color:var(--text);font-weight:600;min-height:32px}
.pt-faq a{color:var(--product-accent)}
.pt-faq .pt-links{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}
.pt-faq .pt-links a{color:var(--text)}
.pt-faq .pt-links a.pt-btn--primary{color:#0a0809}

/* ---------- Shared footer ---------- */
.pt-footer{margin-top:3rem;padding:2.75rem 0 0;border-top:1px solid var(--border-subtle);background:radial-gradient(ellipse 55% 40% at 15% 0%,rgba(107,28,40,.18),transparent 55%),var(--bg-alt);font-family:var(--pt-font);color:var(--text-muted)}
.pt-footer-grid{max-width:var(--max-w);margin:0 auto;padding:0 1.25rem;display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:2rem}
.pt-footer h4{font-family:var(--pt-display);font-size:.85rem;font-weight:700;color:var(--text);margin:0 0 .75rem}
.pt-footer nav{display:flex;flex-direction:column;gap:.45rem}
.pt-footer a{color:var(--text-dim);text-decoration:none;font-size:.85rem}
.pt-footer a:hover{color:var(--text)}
.pt-footer .pt-logo img{width:32px;height:32px}
.pt-footer-tagline{font-size:.85rem;color:var(--text-dim);margin:.6rem 0 0;max-width:22rem}
.pt-footer-bottom{max-width:var(--max-w);margin:2rem auto 0;padding:1rem 1.25rem 1.5rem;border-top:1px solid var(--border-subtle);font-size:.78rem;color:var(--text-dim);display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between}
.pt-footer-bottom p{margin:0}
@media (max-width:760px){.pt-footer-grid{grid-template-columns:1fr 1fr}.pt-footer-grid>div:first-child{grid-column:1/-1}}
html body .card-featured{background:var(--surface);border-color:var(--product-accent-border);box-shadow:var(--product-accent-glow)}
html body .stake-app{background:var(--bg)}
html body .card:before, html body .stake-header-panel:before{display:none!important;animation:none!important}
/* batch B 2026-09-25: one combined map on /staking#map replaces the old arrival maps + Proof Race tab */
html body .arrival-panel-compact{display:none!important}
html body .stake-header a[href$="proof-race"],html body .stake-site-nav a[href$="proof-race"]{display:none!important}
html body .pulse-subhead,html body .pulse-blocks{display:none!important}
/* batch C 2026-09-25 */
/* HIGH: riseIn used fill-mode "both", leaving transform:translateY(0) on .stake-main / .stake-header-panel after the
   animation. A transformed ancestor becomes the containing block for the stake modal's position:fixed overlay, so the
   dialog was centred on the whole page (off-screen). "backwards" keeps the entry animation but drops the transform after. */
html body .stake-main,html body .stake-header-panel{animation-fill-mode:backwards!important}
html body .stake-modal-overlay{background:rgba(5,4,5,.72)}
html body [role="dialog"].card{max-height:calc(100dvh - 2rem);overflow-y:auto}
/* amount field + wallet notices (pt-shell.js) */
html body .pt-amt-error{margin:.35rem 0 0;font-size:.78rem;color:#fca5a5}
html body .stake-amount-input[aria-invalid="true"]{border-color:#f87171!important;box-shadow:0 0 0 1px rgba(248,113,113,.35)}
html body .pt-wallet-missing{margin:.6rem 0 0;padding:.6rem .75rem;border:1px solid var(--product-accent-border);border-radius:10px;background:var(--product-accent-soft);font-size:.82rem;line-height:1.45;color:var(--text)}
html body .pt-wallet-missing a{color:var(--product-accent);font-weight:600}
/* review 2026-09-26 (#5): bottom-docked so it never covers the header Connect Wallet button */
html body .pt-wallet-toast{position:fixed;z-index:120;top:auto;bottom:1rem;right:1rem;max-width:22rem;margin:0;padding-right:2.4rem;box-shadow:0 12px 32px rgba(0,0,0,.45);background:#1a1214}
html body .pt-wallet-toast.pt-wallet-toast--top{bottom:auto;top:calc(var(--header-h) + 3.5rem)}
html body .pt-wallet-toast .pt-toast-close{position:absolute;top:.35rem;right:.4rem;width:1.8rem;height:1.8rem;border:0;border-radius:.4rem;background:transparent;color:inherit;font-size:1.25rem;line-height:1;cursor:pointer;opacity:.8}
html body .pt-wallet-toast .pt-toast-close:hover,html body .pt-wallet-toast .pt-toast-close:focus-visible{opacity:1;background:rgba(255,255,255,.08)}
@media (max-width:640px){html body .pt-wallet-toast{left:.75rem;right:.75rem;bottom:.75rem;max-width:none}}
/* LOW: mobile sub-nav wraps instead of hiding "Rewards & FAQs" and the EN switcher in a sideways scroll */
@media (max-width:640px){
  html body .stake-header .stake-header-panel > div{flex-wrap:wrap!important;row-gap:.35rem!important}
  html body .stake-header .stake-site-nav{flex:1 1 100%!important;flex-wrap:wrap!important;overflow:visible!important;row-gap:.25rem;max-width:100%}
  html body .stake-header .stake-header-panel > div > div:first-child{flex:0 0 auto;margin-left:auto}
}
/* LOW: long inline code (commission inscription) on /staking/help */
html body code{overflow-wrap:anywhere;word-break:break-word}
/* ===== cosmetic 2026-09-26 (batch 2 + staking parts of batch 1) =====
   Review items: 4 (12px label floor, 44px phone tap targets), 5 (one h1 per page; /staking/help size override),
   8 (stakers table as card rows under 640px), 9 (one staking red). No script-tag / edge.js change. */

/* --- #9 buttons: primary = #f0626a fill + #0a0809 text (6.33:1); secondary/ghost = outline, #b4293c border.
       Beats the compiled "pt-outline-buttons" !important rules (.stake-app button.btn-primary = 0,2,1). --- */
html body .btn-primary.btn-primary,
html body .stake-app .btn-primary.btn-primary,
html body .stake-app button.btn-primary.btn-primary{background:#f0626a!important;border:1px solid #f0626a!important;color:#0a0809!important;box-shadow:none!important;filter:none!important;text-shadow:none!important;font-weight:600}
html body .btn-primary.btn-primary:hover:not(:disabled),
html body .stake-app button.btn-primary.btn-primary:hover:not(:disabled){background:#f0626a!important;border-color:#f0626a!important;color:#0a0809!important;filter:brightness(1.08)!important}
html body .btn-primary.btn-primary:disabled{opacity:.55}
html body .btn-secondary.btn-secondary,html body .btn-ghost.btn-ghost,
html body .stake-app .btn-secondary.btn-secondary,html body .stake-app .btn-ghost.btn-ghost{color:#f4efe8!important;background:transparent!important;border:1px solid rgba(180,41,60,.85)!important;box-shadow:none!important;filter:none!important}
html body .btn-secondary.btn-secondary:hover:not(:disabled),html body .btn-ghost.btn-ghost:hover:not(:disabled){color:#fff!important;border-color:#f0626a!important;background:rgba(240,98,106,.08)!important}
html body .pt-btn--primary{background:#f0626a;border-color:#f0626a;color:#0a0809}
html body .pt-btn--ghost{border-color:rgba(180,41,60,.85)}
/* PrimeIndexer title: solid cream with a 3px red left rule instead of pink text */
html body .stake-indexer-title{color:#f4efe8!important;background:none!important;-webkit-text-fill-color:currentColor!important;border-left:3px solid #b4293c;padding-left:.6rem;line-height:1.15}

/* --- #5 headings --- */
/* /staking/help: "Reward Allocation & FAQs" carried text-[28px] but .stake-section-title won (16.8px) */
html body h1.stake-section-title{font-size:28px!important;line-height:1.15;font-weight:700;letter-spacing:-.02em}
@media (min-width:641px){html body h1.stake-section-title{font-size:32px!important}}
/* edge headings demoted to h2 by pt-shell.js (one h1 per page) keep their look */
html body .pt-faq h2[data-pt-h1]{font-family:var(--pt-display);font-weight:700;font-size:20px;line-height:1.2;margin:.35rem 0 .5rem;color:var(--text)}
html body .pt-faq h1[data-pt-h1]{font-family:var(--pt-display);font-weight:700;font-size:28px;line-height:1.15;margin:.35rem 0 .5rem;color:var(--text)}
html body .ptm #ptm-hero-title{font-family:var(--pt-display);font-size:1.45rem;line-height:1.2;font-weight:800;letter-spacing:-.02em;margin:.25rem 0 0;color:var(--text)}
@media (max-width:640px){html body .ptm #ptm-hero-title{font-size:1.15rem}}
/* My Staking has no heading of its own: pt-shell.js adds this page title (edge-owned, outside React) */
html body .pt-page-head{padding-top:1.25rem}
html body .pt-page-title{font-family:var(--pt-display);font-weight:700;font-size:28px;line-height:1.15;letter-spacing:-.02em;margin:0;color:var(--text);border-left:3px solid #b4293c;padding-left:.6rem}
@media (min-width:641px){html body .pt-page-title{font-size:32px}}

/* --- #4 label floor: 12px minimum (chart glyphs included) --- */
html body :is(.pt-logo-tagline,.pt-eyebrow,.stake-brand-eyebrow,.arrival-key,.arrival-matrix-hint,.arrival-id-text,.freshness-badge,
  .intel-label,.intel-sub,.health-counts,.pulse-cadence-label,.pulse-cadence-legend span,.pulse-block-fee,
  .ptm .ptm-hero-stats dt,.ptm .ptm-proof,.ptm .ptm-fresh-meta,.ptm .sw,.ptm .ty,.ptm .bk .ty,.ptm .band-types .ty,
  .ptm .h,.ptm .r.head .h,.ptm .r.head .h:first-child,.ptm .h span,.ptm .sum,.ptm .r.compact .sum,.ptm .sum b,.ptm .bk .num,.ptm .bk .pre,
  .ptm .ptm-board th,.stake-header .stake-nav-btn,.stake-header .btn-primary,.btn-primary.text-sm){font-size:12px!important}
html body :is(.intel-label,.ptm .ptm-hero-stats dt,.ptm .ptm-board th){font-weight:600;letter-spacing:.06em}
html body .ptm .sw{width:1.25rem;height:1.25rem}
html body .ptm .ty{padding:.05rem .3rem}
@media (max-width:640px){
  html body .ptm .bk .ty{padding:0 .22rem;letter-spacing:0}
  html body .ptm .r.head .h{height:6rem}
}

/* --- #4 tap targets: 44px minimum on phones --- */
@media (max-width:640px){
  html body .pt-logo{min-height:44px}
  html body .pt-nav-toggle{min-height:44px}
  html body .stake-header .btn-primary,html body .stake-header a.btn-primary{min-height:44px!important;padding-top:.5rem;padding-bottom:.5rem}
  html body .stake-header .stake-nav-btn{min-height:44px;display:inline-flex;align-items:center}
  html body .lang-switcher__btn{min-height:44px;min-width:44px}
  html body .stake-score-badge{min-height:44px}
  html body .btn-primary,html body .btn-secondary,html body .btn-ghost,html body .pt-btn{min-height:44px}
  /* 14px icon buttons (copy address, APR / commission info): 44x44 hit area, glyph stays 14px, layout unchanged */
  html body .stake-app button:has(> svg:only-child):not(.btn-primary):not(.btn-secondary):not(.btn-ghost){min-width:44px;min-height:44px;justify-content:center;margin:-15px -15px -15px -9px;position:relative}
  html body .stake-app a.inline-flex:has(> svg){min-height:44px;margin-block:-12px}
  html body .stake-app a.pi-link.inline-flex{min-height:44px;margin-block:-10px}
  html body .pt-faq summary{min-height:44px;display:flex;align-items:center;gap:.5rem;list-style:none}
  html body .pt-faq summary::-webkit-details-marker{display:none}
  html body .pt-faq summary::before{content:"\25B8";color:var(--product-accent);font-size:.85em}
  html body .pt-faq details[open] > summary::before{content:"\25BE"}
  html body .pt-footer nav{gap:0}
  html body .pt-footer nav a,html body .pt-footer-bottom a{display:flex;align-items:center;min-height:44px}
  html body .pt-footer .pt-logo{min-height:44px}
  html body .pt-unisat-install a{display:inline-flex;align-items:center;min-height:44px;margin-block:-14px}
  html body .ptm summary{min-height:44px;display:flex;align-items:center}
  html body .ptm a.ptm-proof{display:inline-flex;align-items:center;min-height:44px;margin-block:-14px}
  html body .ptm a.ptm-proof{min-width:44px;justify-content:center}
  html body .ptm .ptm-seg button,html body .ptm button{min-height:44px}
  html body .ptm label:has(> input[type=checkbox]){display:inline-flex;align-items:center;min-height:44px;gap:.4rem}
  html body .ptm input[type=checkbox]{width:18px;height:18px}
  html body tr.stake-table-row button:has(> svg:only-child){margin-right:-4px!important}
}

/* --- #8 stakers table: card rows under 640px (#1 address / amount · share), no sideways clipping --- */
@media (max-width:640px){
  html body table.min-w-full:has(tr.stake-table-row){display:block;min-width:0!important;width:100%}
  html body table.min-w-full:has(tr.stake-table-row) thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  html body table.min-w-full:has(tr.stake-table-row) tbody{display:block;width:100%}
  html body tr.stake-table-row{display:grid;grid-template-columns:2.4rem minmax(0,1fr) auto auto;grid-template-areas:"rank addr addr addr" ". . amt share";align-items:center;column-gap:.5rem;row-gap:0;padding:.35rem 0;border-bottom:1px solid var(--border-subtle)}
  html body tr.stake-table-row:last-child{border-bottom:0}
  html body tr.stake-table-row > td{display:block;padding:0!important;min-width:0}
  html body tr.stake-table-row > td:nth-child(1){grid-area:rank;font-family:var(--pt-mono);font-size:13px}
  html body tr.stake-table-row > td:nth-child(2){grid-area:addr;min-width:0}
  html body tr.stake-table-row > td:nth-child(2) > div{min-width:0}
  html body tr.stake-table-row > td:nth-child(2) a.address-text{display:flex;align-items:center;min-height:44px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--pt-mono);font-size:13px!important}
  html body tr.stake-table-row > td:nth-child(3){grid-area:amt;text-align:right;white-space:nowrap;font-family:var(--pt-mono);font-size:13px}
  html body tr.stake-table-row > td:nth-child(4){grid-area:share;text-align:right;white-space:nowrap;font-family:var(--pt-mono);font-size:13px}
  html body tr.stake-table-row > td:nth-child(4)::before{content:"\00B7\00A0";color:var(--text-dim)}
  html body .overflow-x-auto:has(> table.min-w-full tr.stake-table-row){overflow-x:visible}
}
/* tabfix 2026-09-26 (.bak-20260926tabs): staking tabs (Stakers / Proof Records / Commission History) >=44px tap target on phones, text centred vertically */
@media (max-width:640px){
  html body .stake-tab{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:44px;min-width:min-content;padding:6px 2px;line-height:1.3}
  html body div:has(> button.stake-tab){column-gap:16px}
}
@media (max-width:360px){html body div:has(> button.stake-tab){column-gap:10px}}