/* staking.html — page-specific styles */
/* ── Section headers ── */
.sk-sec {
display:flex;align-items:center;gap:10px;
font-family:var(--font-mono);font-size:12px;font-weight:600;
letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);
margin:30px 0 14px;padding-left:2px;
}
.sk-sec::before { content:"";width:6px;height:6px;border-radius:50%;background:#FFB400;flex-shrink:0; }
.sk-sec-line { flex:1;height:1px;background:var(--border-card); }
.sk-hero-eyebrow {
font-family:var(--font-mono); font-size:9px; letter-spacing:0.12em;
text-transform:uppercase; color:var(--text-muted); font-weight:600;
}
/* Phase badge — makes Testnet (pre-TGE) vs Mainnet (post-TGE) obvious at a glance. */
.sk-phase-pill {
margin-left:10px; padding:2px 9px; border-radius:999px;
font-family:var(--font-mono); font-size:9px; font-weight:700;
letter-spacing:0.08em; text-transform:uppercase;
}
.sk-phase-pill.is-testnet { color:#0E0E0E; background:#FFB400; }
.sk-phase-pill.is-mainnet { color:#fff; background:#1c8a4e; }
/* ── Intro card: pitch + network stats (left) · how staking works (right) ── */
.sk-intro {
display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:32px;
background:var(--surface); border:1px solid var(--border-card); border-radius:var(--radius);
padding:28px 32px;
position:relative; overflow:hidden;
}
/* Hero — a single luminous gold gradient line along the top edge (no glow).
Absolutely-positioned pseudo so it doesn't become a grid item. */
.sk-intro::after {
content:""; position:absolute; top:0; left:0; right:0; height:2px; z-index:2;
background:linear-gradient(90deg, transparent, rgba(255,180,0,0.9) 22%, rgba(255,180,0,0.9) 78%, transparent);
pointer-events:none;
}
@media(max-width:900px){ .sk-intro{ grid-template-columns:1fr; gap:24px; } }
.sk-intro-head { display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.sk-intro-title { font-size:28px; line-height:1.15; font-weight:800; color:var(--text); margin:0 0 14px; letter-spacing:-0.01em; }
.sk-gold { color:#FFB400; }
.sk-intro-desc { font-size:13px; line-height:1.6; color:var(--text-secondary); margin:0 0 22px; max-width:56ch; }
/* Tiles hug their content (flex, not a 3×1fr stretch grid) so they read as
compact stat chips rather than three full-width panels. */
.sk-intro-stats { display:flex; flex-wrap:wrap; gap:12px; }
.sk-intro-stats .sk-acct-tile { flex:0 0 auto; }
@media(max-width:520px){ .sk-intro-stats .sk-acct-tile{ flex:1 1 100%; } }
.sk-how-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:520px){ .sk-how-grid{ grid-template-columns:1fr; } }
.sk-how-card {
padding:16px 18px; background:var(--gray-50);
border:1px solid var(--border-card); border-radius:var(--radius-sm);
}
.sk-how-num {
font-family:var(--font-mono); font-size:11px; font-weight:800; letter-spacing:0.08em;
color:#FFB400; margin-bottom:10px;
}
/* ── Staking action card ── */
.sk-action {
background:var(--surface);border:1px solid var(--border-card);border-radius:var(--radius);
padding:28px;position:relative;overflow:hidden;margin-bottom:20px;
/* Flex column (head → panels → step arrows) that fills the main column so it
unifies with the taller right column. Content is top-aligned; the arrows pin
to the bottom and the leftover space sits between them. */
flex:1; display:flex; flex-direction:column;
}
/* Step 3 is the focal point of the page — stake card carries a gold accent */
.sk-stake-center {
border-color:rgba(255,180,0,0.45);
box-shadow:0 6px 28px rgba(255,180,0,0.08);
}
/* ── Step arrows — prev/next at the bottom of the main widget, with position dots.
Pinned to the bottom because .sk-panels (flex:1) absorbs the slack above. ── */
.sk-tab-nav {
display:flex; align-items:center; justify-content:space-between; gap:16px;
padding-top:18px; margin-top:16px; border-top:1px solid var(--border-card);
}
.sk-nav-arrow {
width:36px; height:36px; flex-shrink:0; border-radius:9px;
display:inline-flex; align-items:center; justify-content:center;
background:var(--gray-50); border:1px solid var(--border-card); color:var(--text-secondary);
cursor:pointer; transition:border-color .15s, color .15s, background .15s;
}
.sk-nav-arrow:hover:not(:disabled) { border-color:#FFB400; color:#FFB400; background:rgba(255,180,0,0.06); }
.sk-nav-arrow:disabled { opacity:0.3; cursor:default; }
.sk-nav-arrow svg { width:16px; height:16px; }
.sk-nav-dots { display:flex; align-items:center; gap:9px; }
.sk-nav-dot {
width:7px; height:7px; border-radius:50%; background-color:var(--gray-200);
cursor:pointer; transition:background-color .15s, transform .15s; padding:0; border:none;
/* Indicator dot, not a CTA — exempt from the global 44px touch-target
min-height (components.css) which stretched it into a tall ellipse.
box-sizing:content-box + background-clip:content-box keep the VISIBLE dot
a 7px circle while padding (mobile) enlarges the tap area. Use
background-COLOR (not the shorthand) everywhere so the clip isn't reset. */
min-height:0; box-sizing:content-box; flex:0 0 auto; background-clip:content-box;
}
.sk-nav-dot:hover { background-color:var(--text-muted); }
.sk-nav-dot.active { background-color:#FFB400; transform:scale(1.25); }
/* ── Claim breakdown — total claimable $PROMPT split by source (baseline / points) ── */
.sk-claim-bd { margin:-8px 0 20px; }
.sk-claim-bd-row {
display:flex; align-items:center; justify-content:space-between; gap:12px;
padding:11px 16px; font-size:12px; color:var(--text-secondary);
border:1px solid var(--gray-100); border-top:none; background:var(--gray-50);
}
.sk-claim-bd-row:first-child { border-top:1px solid var(--gray-100); border-radius:var(--radius-sm) var(--radius-sm) 0 0; }
.sk-claim-bd-row:last-child { border-radius:0 0 var(--radius-sm) var(--radius-sm); }
.sk-claim-bd-label { display:flex; align-items:center; gap:8px; }
.sk-claim-bd-label::before { content:""; width:6px; height:6px; border-radius:2px; background:var(--text-muted); flex-shrink:0; }
.sk-claim-bd-row.is-baseline .sk-claim-bd-label::before { background:#3b82f6; }
.sk-claim-bd-row.is-points .sk-claim-bd-label::before { background:#FFB400; }
.sk-claim-bd-val { font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--text); white-space:nowrap; }
/* Baseline yield is mainnet-only — dim the row + tag it on the testnet page. */
.sk-claim-bd-row.is-inactive { opacity:0.62; }
.sk-claim-bd-row.is-inactive .sk-claim-bd-label::before { background:var(--text-muted); }
.sk-claim-tag {
font-family:var(--font-mono); font-size:8px; font-weight:700; letter-spacing:0.06em;
text-transform:uppercase; color:#1c8a4e; background:rgba(34,197,94,0.12);
border-radius:999px; padding:2px 7px; margin-left:8px;
}
/* The active panel sizes the card; inactive panels are lifted out of flow
(absolute overlay) so a taller hidden tab — e.g. Claim's long note — can't
pad out the visible one with dead space. The card resizes to fit whichever
tab is open, so Stake (the default view) reads tight with no empty band. */
/* All panels share ONE grid cell → the cell is always as tall as the TALLEST panel,
so switching tabs never resizes the widget (content top-aligned, slack at the
bottom where the step arrows live). flex:1 lets it also fill a stretched card. */
.sk-panels { flex:1; display:grid; align-content:start; }
.sk-panels > [role="tabpanel"] { grid-column:1; grid-row:1; min-width:0; }
.sk-panels > .sk-panel-off { visibility:hidden; pointer-events:none; }
/* ════ App layout — staking-flow primary (≈2/3) + informative side (≈1/3) ════
The left column is the participation flow as a stack of numbered widgets
(① wallet → ② social → ③ get $PROMPT → ④ stake), the Stake panel being the
visual anchor. The right column is informative: Your Summary + The Lab. How
Rewards Work and FAQ are full-width bands below. Grid areas place the widgets,
so DOM order is free; `side` spans the four flow rows and top-aligns. */
.sk-app {
display:grid; gap:20px; margin-top:16px; align-items:stretch;
grid-template-columns:minmax(0,2fr) minmax(0,1fr);
grid-template-areas:
"main side"
"rewards rewards"
"faq faq";
}
.sk-app .sk-sec { margin-top:0; }
.sk-app .sk-card, .sk-app .sk-verify, .sk-app .sk-action, .sk-app .sk-meter,
.sk-app .sk-spend, .sk-app .sk-faucet, .sk-app .sk-summary { margin-bottom:0; }
/* ── Main-widget tab bar — every step is a tab (Wallet · Socials · Get · | ·
Stake · Unstake · Claim). Wraps on narrow widths; a thin divider groups the
one-time setup tabs from the recurring stake actions. ── */
.sk-tabs-flow { flex-wrap:wrap; }
/* Green ✓ on the Verify tab once every verification step is complete. */
#tab-verify { display:inline-flex; align-items:center; gap:5px; }
.sk-tab-check { width:12px; height:12px; color:#1c8a4e; flex-shrink:0; }
.sk-tab-check[hidden] { display:none; }
.sk-tab-div { width:1px; align-self:stretch; margin:2px 4px; background:var(--border-card); }
/* The verification panels (Wallet/Socials) keep their rows tight inside the card. */
#verify-panel .sk-vrows { margin-top:2px; }
/* Mint/buy box merged into the top of the Stake panel — space it from the amount field. */
.sk-app .sk-faucet-inline { margin-bottom:20px; }
/* ── Your Summary — global balances (right column, top) ── */
.sk-summary {
background:var(--surface); border:1px solid var(--border-card); border-radius:var(--radius);
padding:4px 20px;
}
.sk-sum-row {
display:flex; justify-content:space-between; align-items:center; gap:12px;
padding:11px 0; border-bottom:1px solid var(--border-card);
}
.sk-sum-row:last-child { border-bottom:none; }
.sk-sum-label { font-size:11.5px; color:var(--text-secondary); }
.sk-sum-val { font-family:var(--font-mono); font-size:12.5px; font-weight:700; color:var(--text); white-space:nowrap; }
.sk-sum-val.gold { color:#FFB400; }
.sk-sum-mult { font-size:10px; color:var(--text-muted); margin-left:4px; }
/* ── Shared section card — the canonical surface panel every section sits in
(Connect, Verify, Daily Credits, FAQ…) so both columns read as one system. ── */
.sk-card {
background:var(--surface); border:1px solid var(--border-card); border-radius:var(--radius);
padding:20px;
/* flex column so the rows can absorb extra height in a stretched row */
display:flex; flex-direction:column;
}
/* Each section block = section header + its card, as a flex column so the
card can grow to fill a stretched grid row. */
.sk-blk-main, .sk-blk-summary, .sk-blk-lab, .sk-blk-referral, .sk-col-side, .sk-blk-rewards, .sk-blk-faq {
display:flex; flex-direction:column; min-width:0;
}
.sk-blk-main { grid-area:main; }
.sk-col-side { grid-area:side; gap:24px; }
/* Referral block absorbs the side-column slack so its card fills the space
under the Lab card and the column bottom-aligns with the main widget. */
.sk-blk-referral { flex:1 1 auto; }
.sk-blk-referral .sk-refer { flex:1; }
.sk-blk-rewards { grid-area:rewards; }
.sk-blk-faq { grid-area:faq; }
/* Single column on narrow screens — main widget, then side, then rewards, then FAQ. */
@media(max-width:900px){
.sk-app {
grid-template-columns:1fr;
grid-template-areas:"main" "side" "rewards" "faq";
align-items:start;
}
}
/* ══ Unified verification row (sk-vrow) ══
One compact component for every check — Wallet age / funds (Connect card)
AND Twitter / Telegram (Verify card): 30px icon → name (+ info tooltip) →
state → action. Every row is the same shape so the two cards read as
siblings. `is-done` turns the icon into a green ✓ and hides the action. */
/* Verify checks in a 2-col grid (the connect row spans full width) so five
rows fold into three and the card isn't so tall. Single column < 560px. */
.sk-vrows { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
#connect-row { grid-column:1 / -1; }
@media(max-width:560px){ .sk-vrows { grid-template-columns:1fr; } }
.sk-vrow {
background:var(--gray-50); border:1px solid var(--gray-100);
border-radius:var(--radius-sm); transition:border-color .15s; min-width:0;
}
.sk-vrow-main {
display:flex; align-items:center; gap:11px; width:100%;
padding:10px 12px; text-align:left;
}
.sk-vrow-ic {
width:30px; height:30px; flex-shrink:0; border-radius:8px;
display:flex; align-items:center; justify-content:center;
background:var(--surface); border:1px solid var(--border-card); color:var(--text);
}
.sk-vrow-ic svg { width:15px; height:15px; }
.sk-vrow.is-done .sk-vrow-ic { background:#1c8a4e; border-color:#1c8a4e; color:#fff; }
.sk-vrow-meta { flex:1; min-width:0; display:flex; flex-direction:column; }
.sk-vrow-name { font-size:12.5px; font-weight:700; color:var(--text); display:flex; align-items:center; }
.sk-vrow.is-done .sk-vrow-state { color:#1c8a4e; }
.sk-vrow-act { flex-shrink:0; display:flex; align-items:center; gap:8px; }
/* Done → hide the action button and show a green checkmark in its place
(a square that matches the button radius, not a pill). */
.sk-vrow.is-done .sk-vbtn { display:none; }
.sk-vrow.is-done .sk-vrow-act::after {
content:"✓"; display:inline-flex; align-items:center; justify-content:center;
width:30px; height:30px; border-radius:var(--radius-btn);
background:rgba(34,197,94,0.13); color:#1c8a4e; font-size:15px; font-weight:800; line-height:1;
}
/* Completed rows CONTRACT to a slim, single-line "done" state: smaller padding +
icon, name and state on one line. A finished check reads as quietly resolved. */
.sk-vrow.is-done .sk-vrow-main { padding-top:9px; padding-bottom:9px; }
.sk-vrow.is-done .sk-vrow-ic { width:24px; height:24px; border-radius:6px; }
.sk-vrow.is-done .sk-vrow-ic svg { width:13px; height:13px; }
.sk-vrow.is-done .sk-vrow-meta { flex-direction:row; align-items:center; gap:8px; }
.sk-vrow.is-done .sk-vrow-state { margin-top:0; }
.sk-vbtn { flex-shrink:0; }
.sk-vbtn-done {
color:#1c8a4e; background:rgba(34,197,94,0.10);
border:1px solid rgba(34,197,94,0.30); cursor:default; opacity:1;
}
/* ── Info tooltip — the requirement note, moved off the row into a hover/focus
bubble next to the title (keeps every row compact & identical). ── */
.sk-tip {
position:relative; flex-shrink:0; margin-left:6px; cursor:help;
width:14px; height:14px; border-radius:50%;
display:inline-flex; align-items:center; justify-content:center;
font-family:var(--font-mono); font-size:9px; font-weight:700; font-style:normal;
background:var(--gray-100); color:var(--text-muted); transition:background .15s, color .15s;
}
.sk-tip:hover, .sk-tip:focus-visible { background:var(--gray-200); color:var(--text); outline:none; }
.sk-tip::after {
content:attr(data-tip);
position:absolute; top:calc(100% + 8px); left:-6px;
width:max-content; max-width:240px; padding:8px 11px; border-radius:8px;
font-family:var(--font-body); font-size:11px; font-weight:400; line-height:1.45;
letter-spacing:0; text-transform:none;
background:var(--surface); color:var(--text-secondary);
border:1px solid var(--border-card); box-shadow:0 8px 24px rgba(0,0,0,0.14);
opacity:0; visibility:hidden; transform:translateY(-4px);
transition:opacity .15s, transform .15s; z-index:50; pointer-events:none; white-space:normal;
}
.sk-tip:hover::after, .sk-tip:focus-visible::after { opacity:1; visibility:visible; transform:translateY(0); }
/* Baseline-yield card is inactive (mainnet-only) on the testnet page */
.sk-reward-card.is-inactive { opacity:0.72; }
.sk-reward-tag.is-mainnet-only { color:#fff; background:#1c8a4e; }
/* ── How rewards work — two streams (baseline yield vs points yield) ── */
.sk-rewards-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:640px){ .sk-rewards-grid{ grid-template-columns:1fr; } }
.sk-reward-card {
background:var(--surface); border:1px solid var(--border-card); border-radius:var(--radius);
padding:20px 22px;
}
.sk-reward-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.sk-reward-name { font-size:15px; font-weight:700; color:var(--text); }
.sk-reward-tag {
font-family:var(--font-mono); font-size:8.5px; font-weight:700; letter-spacing:0.1em;
text-transform:uppercase; color:#B07A00; background:rgba(255,180,0,0.14);
padding:3px 8px; border-radius:999px;
}
.sk-reward-desc { font-size:12.5px; line-height:1.6; color:var(--text-secondary); }
/* FAQ now uses the shared .rf-acc accordion component (rf-accordion.css). */
.sk-acct-tile {
background:var(--surface);border:1px solid var(--border-card);border-radius:var(--radius);
padding:13px 16px;box-shadow:var(--shadow-xs);min-width:0;
}
.sk-acct-label {
font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:0.12em;
text-transform:uppercase;color:var(--text-muted);margin-bottom:6px;
}
.sk-acct-val {
font-family:var(--font-mono);font-size:18px;font-weight:700;color:var(--text);
line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sk-acct-tile .sk-meter-bar { margin:10px 0 0; }
/* ── Step 4 · Spend-in-Lab CTA card ── */
.sk-spend {
display:flex;align-items:center;gap:20px;
background:var(--surface);border:1px solid var(--border-card);border-radius:var(--radius);
padding:20px;margin-bottom:20px;text-decoration:none;
transition:border-color 0.15s,background 0.15s;
}
.sk-spend:hover { border-color:#FFB400;background:rgba(255,180,0,0.04); }
.sk-spend-body { flex:1;min-width:0; }
.sk-spend-title { font-size:14px;font-weight:700;color:var(--text);margin-bottom:6px; }
.sk-spend-text { font-size:12.5px;line-height:1.55;color:var(--text-secondary); }
.sk-spend-cta { flex-shrink:0; }
@media(max-width:640px){
.sk-spend{flex-direction:column;align-items:flex-start;gap:14px;}
.sk-spend-cta{align-self:stretch;text-align:center;}
}
.sk-action-head {
display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;
}
/* Stake / Unstake tab toggle — the design-system segmented control: .chart-ctrl-btn
buttons on a subtle track (matches `.ds-seg`), so the active button reads as a white
pill on the track instead of a faded button floating on the card. */
.sk-tabs { display:inline-flex;gap:4px;padding:4px;background:var(--hover-subtle);border-radius:var(--radius-ctrl); }
.sk-unstake-note {
margin-top:14px;padding:12px 14px;border-radius:var(--radius-sm, 8px);
background:var(--gray-50);border:1px solid var(--border-card);
font-size:12px;line-height:1.5;color:var(--text-muted);
}
.sk-empty {
padding:32px 20px;text-align:center;
font-size:13px;line-height:1.6;color:var(--text-muted);
}
.sk-balance-pill {
display:inline-flex;align-items:center;gap:6px;
padding:6px 14px;border-radius:999px;
background:var(--gray-50);border:1px solid var(--gray-100);
font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--text);
}
.sk-balance-pill .dot {
width:6px;height:6px;border-radius:50%;
}
.sk-balance-pill .dot.connected { background:#22c55e; }
.sk-balance-pill .dot.disconnected { background:var(--gray-300); }
/* Input group */
.sk-input-group {
margin-bottom:20px;
}
.sk-input-label {
font-family:var(--font-mono);font-size:9px;font-weight:600;
letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);
margin-bottom:8px;display:block;
}
.sk-input-wrap {
display:flex;align-items:stretch;border:1px solid var(--gray-200);
border-radius:var(--radius-sm);overflow:hidden;background:var(--gray-50);
transition:border-color 0.15s;
}
.sk-input-wrap:focus-within { border-color:#FFB400; }
.sk-input-wrap input {
flex:1;padding:14px 16px;border:none;background:transparent;
font-family:var(--font-mono);font-size:18px;font-weight:600;
color:var(--text);outline:none;min-width:0;
}
.sk-input-wrap input::placeholder { color:var(--gray-300); }
.sk-input-suffix {
display:flex;align-items:center;gap:8px;padding:0 16px;
font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--text-muted);
border-left:1px solid var(--gray-200);background:var(--gray-100);
}
.sk-input-max {
font-size:10px;font-weight:600;color:#FFB400;cursor:pointer;
text-transform:uppercase;letter-spacing:0.06em;
}
.sk-input-max:hover { text-decoration:underline; }
/* Preview row */
.sk-preview {
display:flex;justify-content:space-between;align-items:center;
padding:12px 16px;background:var(--gray-50);border-radius:var(--radius-sm);
margin-bottom:20px;border:1px solid var(--gray-100);
}
.sk-preview-label { font-size:12px;color:var(--text-secondary); }
.sk-preview-val {
font-family:var(--font-mono);font-size:14px;font-weight:700;color:var(--text);
}
/* Claim total matches the breakdown amounts below it (12px), flattening the hierarchy. */
.sk-preview-val.gold { color:#FFB400; font-size:12px; }
/* The two stake previews (credits/day + level) sit side-by-side in one row. */
.sk-preview-pair { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:20px; }
.sk-preview-pair .sk-preview { margin-bottom:0; }
@media(max-width:480px){ .sk-preview-pair{ grid-template-columns:1fr; } }
/* Forfeit warning — any unstake loses ALL current-epoch points; flag it in red. */
.sk-preview-warn { border-color:rgba(239,68,68,0.32); background:rgba(239,68,68,0.06); }
.sk-preview-warn .sk-preview-val { color:var(--red); }
.sk-warn-tag {
font-family:var(--font-mono); font-size:8px; font-weight:700; letter-spacing:0.06em;
text-transform:uppercase; color:#b42318; background:rgba(239,68,68,0.12);
border-radius:999px; padding:2px 7px; margin-left:8px;
}
/* Buttons */
.sk-btn-row { display:flex;gap:10px; }
.sk-btn-row .rf-btn-tiny { flex:1;justify-content:center;padding:14px 20px;font-size:14px; }
@media(max-width:480px){ .sk-btn-row{flex-direction:column;} }
.sk-step-title {
font-size:13px;font-weight:700;color:var(--text);margin-bottom:4px;
}
.sk-step-desc {
font-size:11px;color:var(--text-secondary);line-height:1.5;
}
/* ── Empty state ── */
.sk-empty {
text-align:center;padding:48px 24px;
}
/* Two-column layout */
/* extracted free inline styles (css-verify) */
.stkf-1 { grid-template-columns:1fr 1fr; }
.stkf-2 { flex-shrink:0; }
.stkf-3 { flex-shrink:0;text-decoration:none; }
.stkf-4 { margin-top:20px; }
.stkf-5 { color:#FFB400; }
.stkf-6 { grid-column:1/-1; }
/* The two heads reserve the same height so the first row of each card starts at the
same Y — Connect (`.sk-card-head`) and Verify (`.sk-verify-intro`) line up row-for-row.
Use rem (root-anchored), not em: the two elements have different font-sizes (head 14px
vs intro 12.5px), so `em` resolved to different pixel heights and knocked the rows out
of line. The reservation must clear the TALLER head (always the Verify intro): in the
narrow two-column band (901–1199px) that intro wraps to 3 lines, so reserve for 3 lines
by default and tighten to 2 lines once it stops wrapping (≥1200px) — aligned at every
paired width, with no wasted head space at the common wide width. */
.sk-card-head, .sk-verify > .sk-verify-intro { min-height: 3.75rem; }
.sk-verify-status { margin-top: 14px; font-size: 12px; color: var(--text-muted); }
/* Wallet-gate rows stay clean — a failed check shows its reason ONLY in the toast that
pops on Verify, never as persistent text on the row. Keep the Verify button a fixed
width so Verify ⇄ Checking… doesn't jump. */
.sk-wallet-verify { min-width: 4.75rem; justify-content: center; text-align: center; }
/* Logged-out (and verified) the status is blank — collapse it so its 14px top
margin doesn't make the Verify card taller than its Connect sibling. */
.sk-verify-status:empty { display: none; }
.sk-verify-status.is-verified { color: #1c8a4e; font-weight: 600; }
/* ── Testnet faucet ── */
.sk-faucet {
display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
padding: 14px 18px;
background: rgba(255, 180, 0, 0.05); border: 1px dashed rgba(255, 180, 0, 0.35);
border-radius: var(--radius);
}
.sk-faucet-text { flex: 1; min-width: 180px; font-size: 12px; line-height: 1.5; color: var(--text-secondary); }
/* ── Mobile: stake action header (appended last to win source order) ── */
@media (max-width: 640px) {
/* Tabs (Verify/Stake/Claim/Unstake) shared a row with the $PROMPT amount and
wrapped raggedly. Stack the header so the tab row gets full width and fits
on one line, with the amount below it. */
.sk-action-head { flex-direction: column; align-items: stretch; gap: 12px; }
.sk-action-head .sk-tabs, .sk-action-head .sk-tabs-flow { width: 100%; }
}
/* Pager dots: on phones give a bigger tap area via padding while keeping the
visible dot small (background-clip:content-box). Round, not stretched. */
@media (max-width: 640px) {
.sk-nav-dot { padding: 7px 5px; background-clip: content-box; }
.sk-nav-dots { gap: 4px; }
}