/* Premium coin page style (owner brief 2026-10-29, "YEEHAW Premium Landing Page + Live Countdown"). Opt-in per coin
   through config/pages.toml (style = "premium"); every rule is scoped to body.premium, so no other page changes.
   Dark navy and charcoal, emerald and a little gold; system fonts only (the CSP loads nothing from elsewhere). The
   hero keeps the shared contract block (#contract) where the rendered check needs it: on a phone, the address, Copy
   contract and the trading link (or "Not launched") stay on the first screen. */
body.premium {
  --bg: #070d1a;
  --surface: #0f1726;
  --surface-2: #131e31;
  --line: rgba(148, 163, 184, 0.16);
  --text: #edf2f7;
  --muted: #9fb0c7;
  --primary: #34d399;
  --primary-deep: #059669;
  --accent: #e3b552;
  --warn: #e3b552;
  --radius: 18px;
  /* modern system sans for every heading, whatever the coin's own theme sets (its theme.css may pick a serif) */
  --head: "Segoe UI Variable Display", "SF Pro Display", -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --body: -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background:
    radial-gradient(900px 520px at 85% -10%, rgba(52, 211, 153, 0.13), transparent 60%),
    radial-gradient(700px 480px at -10% 10%, rgba(227, 181, 82, 0.07), transparent 60%),
    var(--bg);
  background-attachment: scroll;
}
body.premium::before, body.premium::after { display: none; }
body.premium .topbar { background: rgba(7, 13, 26, 0.82); border-bottom: 1px solid var(--line); }
body.premium .section { background: var(--surface); border-color: var(--line); box-shadow: 0 18px 40px -32px rgba(0, 0, 0, 0.9); }
body.premium .section h2 { letter-spacing: -0.01em; }
body.premium .banner-warn { border-color: rgba(227, 181, 82, 0.45); background: rgba(227, 181, 82, 0.08); }

/* Hero: one grid, two arrangements. Phone: a small mascot beside the name, then the headline, the contract block and
   the countdown. Wide screens: text on the left, the mascot large on the right. */
.premium .pm-hero {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  grid-template-areas: "art id" "title title" "ca ca" "count count" "lead lead";
  column-gap: 0.95rem;
  align-items: center;
  padding: 1.1rem 0 1.4rem;
}
/* After the create (launched pages carry has-actionbar): on a phone the contract block comes right under the name,
   before the headline, so the address, Copy contract and the trading link stay on the first screen with any font
   (the server's rendered check holds the announcements otherwise). */
@media (max-width: 879.98px) {
  .premium.has-actionbar .pm-hero { grid-template-areas: "art id" "ca ca" "title title" "count count" "lead lead"; }
  .premium.has-actionbar .pm-hero > .ca { margin-top: 0.9rem; }
}
.premium .pm-art { grid-area: art; }
.premium .pm-art img {
  width: 76px; height: 76px; border-radius: 22px; background: #0b1322;
  box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.35), 0 12px 30px -12px rgba(52, 211, 153, 0.55);
}
.premium .pm-id { grid-area: id; min-width: 0; }
.premium .pm-kicker { margin: 0 0 0.3rem; }
.premium .pm-badge {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.22rem 0.7rem; border-radius: 999px;
  font-size: 0.78rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase;
  color: #1a1405; background: var(--accent);
}
.premium .pm-badge.live { color: #04261b; background: var(--primary); }
.premium .pm-badge.off { color: var(--text); background: rgba(148, 163, 184, 0.22); }
.premium .pm-name { margin: 0; font-size: 1.12rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.premium .pm-sym { color: var(--primary); font-weight: 750; margin-left: 0.25rem; }
.premium .pm-title {
  grid-area: title; margin: 0.9rem 0 0.85rem; font-size: clamp(1.75rem, 7.2vw, 3.5rem); font-weight: 800;
  line-height: 1.08; letter-spacing: -0.025em;
}
.premium .pm-title span { display: block; color: var(--primary); }
.premium .pm-title span::after { content: ""; display: block; width: 3.2rem; height: 3px; margin-top: 0.55rem; border-radius: 3px; background: var(--accent); }
.premium .pm-lead { grid-area: lead; margin: 1rem 0 0; color: var(--muted); font-size: 1.02rem; }
.premium .pm-hero > .ca {
  grid-area: ca; margin: 0; background: var(--surface-2); border: 1px solid rgba(52, 211, 153, 0.28);
  border-radius: var(--radius); box-shadow: 0 20px 44px -30px rgba(52, 211, 153, 0.6);
}
.premium .pm-hero > .ca .btn-primary { background: var(--primary); color: #04261b; }
.premium .pm-hero > .ca .btn-trade { border-color: rgba(227, 181, 82, 0.6); }

/* Countdown (planned pages with an armed time) and the launch confirmation (launched pages) */
.premium .pm-count {
  grid-area: count; margin: 0.9rem 0 0; padding: 1rem 1rem 0.95rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.premium .pm-count h2, .premium .pm-count .pm-sub { margin: 0 0 0.6rem; font-size: 0.82rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.premium .pm-count .pm-sub { margin: 1rem 0 0; }
.premium .pm-sub + .pm-when { margin-top: 0.45rem; }
.premium .pm-clock { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.45rem; }
.premium .pm-unit {
  display: flex; flex-direction: column; align-items: center; padding: 0.55rem 0.2rem 0.45rem;
  background: #0a1221; border: 1px solid rgba(227, 181, 82, 0.28); border-radius: 12px;
}
.premium .pm-num {
  font: 800 clamp(1.5rem, 7vw, 2.3rem)/1.05 ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.premium .pm-lab { margin-top: 0.25rem; font-size: 0.8rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.premium .pm-when { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; gap: 0.25rem; font-size: 0.92rem; }
.premium .pm-when li { display: flex; justify-content: space-between; gap: 0.75rem; border-top: 1px solid var(--line); padding-top: 0.3rem; }
.premium .pm-when li span:first-child { color: var(--muted); }
.premium .pm-when li span:last-child { font-variant-numeric: tabular-nums; text-align: right; }
.premium .pm-count-note { margin: 0.7rem 0 0; color: var(--muted); font-size: 0.88rem; }
.premium .pm-count[data-state="verifying"] { border-color: rgba(227, 181, 82, 0.55); }
.premium .pm-count[data-state="verifying"] .pm-count-note { color: var(--accent); }
.premium .pm-count[data-state="unconfirmed"] .pm-clock { opacity: 0.45; }
.premium .pm-done p { margin: 0; }

/* Wide screens: the name, headline and contract block on the left, the mascot on the right; below them the line and
   the countdown. The contract block ends well inside the first screen of a 1366 x 768 laptop even with wide fonts
   (the rendered check needs all of it there), and the countdown starts on it. */
@media (min-width: 880px) {
  .premium .pm-hero {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    grid-template-areas: "id art" "title art" "ca art" "lead count";
    column-gap: 2.6rem; align-items: start; padding: 1.3rem 0 2.2rem;
  }
  .premium .pm-art { align-self: center; justify-self: center; position: relative; }
  .premium .pm-art::before {
    content: ""; position: absolute; inset: -14%; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(52, 211, 153, 0.28), transparent 70%);
  }
  .premium .pm-art img {
    position: relative; width: min(100%, 250px); height: auto; aspect-ratio: 1 / 1; border-radius: 32px;
    box-shadow: 0 0 0 1px rgba(227, 181, 82, 0.35), 0 40px 90px -40px rgba(52, 211, 153, 0.7);
  }
  .premium .pm-name { font-size: 1.3rem; }
  .premium .pm-title { margin: 0.6rem 0 1.05rem; font-size: clamp(2.2rem, 3.5vw, 2.8rem); }
  .premium .pm-lead { margin: 1rem 0 0; font-size: 1.04rem; }
  .premium .pm-count { margin: 1rem 0 0; padding: 1.1rem 1.1rem 1rem; }
}