/* Site-specific layout styles for the Coins of Record marketing site.
   Brand color/type/spacing come from the design-system tokens — only use
   token var()s here (no raw hex, no raw px for brand values), per the design
   system's adherence rules. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-app);
  color: var(--text-body);
  font: var(--fw-regular) var(--fs-body) / var(--lh-relaxed) var(--font-sans);
}

a { color: var(--link); }
a:hover { color: var(--link-hover); }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* Marketing top bar: solid ink chrome, identical to the account + app headers
   so the header reads the same whether signed in or out. Pinned to the top. */
.marketing-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  background: var(--surface-ink);
  border-bottom: 1px solid var(--border-strong);
}
.marketing-bar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
/* On-dark text for the ink bar. */
.marketing-bar .brand-lockup .wordmark { color: var(--text-on-dark); }
.marketing-bar .marketing-nav a:not(.btn) { color: var(--text-on-dark); opacity: .85; }
.marketing-bar .marketing-nav a:not(.btn):hover { color: var(--brass-2); opacity: 1; }
.marketing-bar .btn-ghost { color: var(--text-on-dark); border-color: var(--border-strong); }
.marketing-bar .btn-ghost:hover { background: rgba(236, 232, 220, .10); color: var(--text-on-dark); }
/* "Log in" reads as the secondary brand action — brass outline on the ink bar. */
.marketing-bar .btn-ghost[href="/login"] { color: var(--brass-2); border-color: var(--brass); }
.marketing-bar .btn-ghost[href="/login"]:hover { background: rgba(217, 182, 90, .14); color: var(--brass-2); }
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
}
.brand-lockup img { height: 48px; width: auto; display: block; }
.brand-lockup .wordmark {
  font: var(--fw-bold) var(--fs-h3) / 1 var(--font-serif);
  color: var(--text-strong);
  letter-spacing: var(--ls-tight);
}

.marketing-nav {
  display: flex;
  gap: var(--space-4);
  align-items: center;
}
.marketing-nav a { text-decoration: none; color: var(--text-body); }
.marketing-nav a:hover { color: var(--text-strong); }
.marketing-nav a.btn { color: inherit; }

/* === Unified app header =================================================== */
/* Server-rendered twin of the React AppShell top bar (frontend/src/shell/
   AppShell.jsx). Both the marketing and account shells include
   templates/shells/_appbar.html, so the header reads identically whether a
   page is an island or server-rendered, signed in or out. Values mirror the
   AppShell inline styles via tokens. */
.cor-appbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-6);
  background: var(--ink);
  border-bottom: 1px solid var(--border-strong);
}
/* Brand lockup: gold COR mark + wordmark, links home. */
.cor-appbar__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  flex: none;
  text-decoration: none;
}
/* Brand lockup in the ink top bar: full lockup on desktop, compact mark on mobile. */
.cor-appbar__logo { display: block; flex: none; height: 30px; width: auto; }
.cor-appbar__logo-mark { display: none; flex: none; width: 30px; height: 30px; }
.cor-appbar__wordmark {
  font: var(--fw-bold) var(--fs-h3) / 1 var(--font-serif);
  color: var(--text-on-brass);
  letter-spacing: var(--ls-tight);
  white-space: nowrap;
}
/* Primary nav, right-justified like the app bar. */
.cor-appbar__nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
}
.cor-navlink {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  font: var(--fw-semibold) var(--fs-body) / 1 var(--font-sans);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  color: var(--text-on-dark);
  opacity: 0.72;
  white-space: nowrap;
}
.cor-navlink:hover { opacity: 1; color: var(--text-on-dark); }
.cor-navlink.is-active {
  color: var(--text-on-brass);
  opacity: 1;
  background: rgba(217, 182, 90, .18);
}
/* Right cluster: Add coin + account (authed) or auth buttons (anon). */
.cor-appbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: none;
}
.cor-appbar__actions.is-anon { margin-left: auto; }
.cor-addcoin {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--brass-hover);
  background: var(--brass);
  color: var(--text-on-brass);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  font: var(--fw-semibold) var(--fs-sm) / 1 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--sheen-brass);
  white-space: nowrap;
}
.cor-addcoin:hover { background: var(--brass-hover); color: var(--text-on-brass); }
.cor-addcoin svg { width: 15px; height: 15px; }
/* Account menu (native <details> dropdown — no JS needed). */
.cor-acct { position: relative; }
.cor-acct__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  list-style: none;
}
.cor-acct__trigger::-webkit-details-marker { display: none; }
.cor-acct__name {
  font: var(--fw-semibold) var(--fs-sm) / 1 var(--font-sans);
  color: var(--text-on-brass);
  white-space: nowrap;
}
.cor-avatar {
  width: var(--space-8);
  height: var(--space-8);
  flex: none;
  border-radius: var(--radius-coin);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-2);
  color: var(--text-on-dark);
  font: var(--fw-bold) var(--fs-sm) / 1 var(--font-sans);
  border: 2px solid var(--brass);
  box-shadow: 0 0 0 2px var(--surface-ink);
}
.cor-menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  min-width: 13rem;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  z-index: 40;
  max-height: min(74vh, 620px);
  overflow-y: auto;
}
.cor-menu__head {
  padding: var(--space-2) var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-1);
}
.cor-menu__name { font: var(--fw-bold) var(--fs-body) / 1.2 var(--font-sans); color: var(--text-strong); }
.cor-menu__tier {
  display: inline-block;
  margin-top: var(--space-1);
  font: var(--fw-bold) var(--fs-overline) / 1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--brand);
}
.cor-menu__sep { border-top: 1px solid var(--border-subtle); margin: var(--space-1) 0; }
.cor-menu__label {
  padding: var(--space-1) var(--space-3) var(--space-1);
  font: var(--fw-bold) var(--fs-overline) / 1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--brand);
}
.cor-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font: var(--fw-medium) var(--fs-sm) / 1 var(--font-sans);
  color: var(--text-body);
  text-decoration: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
}
.cor-menu-item:hover { background: var(--brand-tint); color: var(--text-strong); }
.cor-menu-item.is-upgrade { color: var(--brand-ink); font-weight: var(--fw-semibold); }
.cor-acct .cor-menu__logout { margin: 0; }

/* Mobile: reclaim space by dropping the wordmark + account name, and let the
   primary nav scroll horizontally so every link stays reachable (anon visitors
   have no dropdown fallback, so the nav must not be hidden outright). The gold
   mark, Add coin, and avatar stay put. */
@media (max-width: 720px) {
  .cor-appbar { gap: var(--space-3); padding: 0 var(--space-4); }
  .cor-appbar__logo { display: none; }
  .cor-appbar__logo-mark { display: block; }
  .cor-appbar__wordmark,
  .cor-acct__name { display: none; }
  .cor-appbar__nav {
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cor-appbar__nav::-webkit-scrollbar { display: none; }
  .cor-navlink { padding: var(--space-2); }
}

.eyebrow {
  font: var(--fw-bold) var(--fs-overline) / 1.2 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--brand);
}

.hero-cta { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.hero-note { font-size: var(--fs-sm); color: var(--text-muted); margin: var(--space-4) 0 0; }

/* Two-column hero: copy + coin-cluster art */
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: var(--space-12);
}
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { display: none; }
}

.hero-art { position: relative; height: 360px; }
.hero-art .coin {
  position: absolute;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sheen-brass), var(--shadow-lg),
    inset 0 0 0 7px rgba(92, 71, 17, .18);
}
.coin-brass {
  width: 210px; height: 210px; top: 40px; left: 90px; z-index: 3;
  background: radial-gradient(circle at 36% 30%, #ecd391, #cda43f 46%, #9c7423);
}
.coin-silver {
  width: 150px; height: 150px; top: 12px; left: 8px; z-index: 2;
  background: radial-gradient(circle at 36% 30%, #eceef1, #b9c0c8 48%, #8a929c);
  box-shadow: var(--shadow-md), inset 0 0 0 6px rgba(60, 66, 74, .15);
}
.coin-bronze {
  width: 130px; height: 130px; bottom: 6px; left: 150px; z-index: 1;
  background: radial-gradient(circle at 36% 30%, #e0b083, #b87a45 50%, #8a5a30);
  box-shadow: var(--shadow-md), inset 0 0 0 5px rgba(80, 50, 25, .2);
}
.hero-art .coin-qr {
  position: absolute; right: 4px; bottom: 60px; z-index: 4;
  width: 56px; height: 56px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-ink); color: var(--brass-2);
  box-shadow: var(--shadow-md);
}

.btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--fs-lead); }

/* Supporting-surfaces row */
.surfaces-section { padding-bottom: var(--space-16); }
.surfaces-eyebrow { text-align: center; margin-bottom: var(--space-6); }
.surfaces {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6);
}
@media (max-width: 820px) { .surfaces { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .surfaces { grid-template-columns: 1fr; } }
.surface { text-align: left; }
.surface i, .surface svg {
  width: 26px; height: 26px; color: var(--brand); margin-bottom: var(--space-2);
}
.surface h3 {
  font: var(--text-h3); color: var(--text-strong); margin: 0 0 var(--space-1);
}
.surface p { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }

/* Closing CTA band (ink) */
.cta-band { background: var(--surface-ink); color: var(--text-on-dark); margin-top: var(--space-8); }
.cta-band-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6); padding: var(--space-12) var(--space-6); flex-wrap: wrap;
}
.cta-band h2 { font: var(--text-h2); color: #fffdf7; margin: 0 0 var(--space-1); }
.cta-band p { margin: 0; color: var(--text-on-dark); opacity: .85; }

.hero {
  padding: var(--space-20) 0 var(--space-16);
}
.hero h1 {
  font: var(--text-display);
  color: var(--text-strong);
  text-wrap: balance;
  margin: var(--space-3) 0 var(--space-4);
  max-width: 18ch;
}
.hero p.lead {
  font-size: var(--fs-lead);
  color: var(--text-muted);
  max-width: 52ch;
  margin: 0 0 var(--space-8);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font: var(--fw-semibold) var(--fs-body) / 1 var(--font-sans);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-base) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.btn-primary {
  background: var(--brand);
  color: var(--text-on-brass);
  border: 1px solid var(--brass-hover);
  box-shadow: var(--sheen-brass), var(--shadow-xs);
}
.btn-primary:hover { background: var(--brand-hover); color: var(--text-on-brass); }
.btn-primary:active { transform: translateY(0.5px); }
.btn-ghost {
  background: transparent;
  color: var(--text-strong);
  border: 1px solid var(--border-default);
}
.btn-ghost:hover { background: var(--brand-tint); }

/* Base card surface — cream, hairline border, soft shadow. Public market/shop
   tiles and the leaderboard board use `class="… card"`; without this they had no
   boundary and read as floating coins rather than distinct tiles. */
.card {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  padding-bottom: var(--space-20);
}
@media (max-width: 720px) { .pillars { grid-template-columns: 1fr; } }
.pillar-card {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-8);
}
.pillar-card h2 {
  font: var(--text-h2);
  color: var(--text-strong);
  margin: var(--space-2) 0 var(--space-3);
}

.btn-block { width: 100%; justify-content: center; margin-top: var(--space-2); }

.site-footer {
  background: var(--surface-ink);
  color: var(--text-on-dark);
  padding: var(--space-12) 0 var(--space-8);
  font-size: var(--fs-sm);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid rgba(236, 232, 220, .12);
}
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-brand p { color: var(--text-on-dark); opacity: .75; margin: var(--space-3) 0 0; line-height: 1.6; }
.footer-head {
  font: var(--fw-bold) var(--fs-overline) / 1.2 var(--font-sans);
  text-transform: uppercase; letter-spacing: var(--ls-wide);
  color: var(--brass-2); margin: 0 0 var(--space-3);
}
.footer-col { display: flex; flex-direction: column; gap: var(--space-2); }
.footer-col a { color: var(--text-on-dark); opacity: .8; text-decoration: none; }
.footer-col a:hover { opacity: 1; color: var(--brass-2); }
.footer-fine { padding-top: var(--space-5); color: var(--text-on-dark); opacity: .6; }

/* --- Auth cards (B1–B4) --------------------------------------------------- */
.auth-wrap {
  min-height: calc(100vh - var(--topbar-h));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-5);
}
.auth-card {
  width: 400px;
  max-width: 100%;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-8) var(--space-8);
}
.auth-logo { width: 44px; height: 44px; margin-bottom: var(--space-4); }
.auth-title { font: var(--text-h2); color: var(--text-strong); margin: 0 0 var(--space-1); }
.auth-subtitle { font-size: var(--fs-sm); color: var(--text-muted); margin: 0 0 var(--space-6); }
.auth-note {
  font-size: var(--fs-sm); color: var(--brand-ink);
  background: var(--brand-tint); border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3); margin: 0 0 var(--space-4);
}
.auth-aux { font-size: var(--fs-sm); margin: var(--space-3) 0 0; }
.auth-footer {
  text-align: center; margin-top: var(--space-5);
  font-size: var(--fs-sm); color: var(--text-muted);
}

/* Form fields */
.field { margin-bottom: var(--space-4); }
.field > label {
  display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--text-strong); margin-bottom: var(--space-1);
}
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field textarea,
.field select {
  width: 100%;
  font: var(--fw-regular) var(--fs-body) / 1.4 var(--font-sans);
  color: var(--text-body);
  background: var(--paper-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}
.field textarea { resize: vertical; min-height: var(--space-16); }
.field input[type="file"] { font-size: var(--fs-sm); color: var(--text-body); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.field .help { font-size: var(--fs-xs); color: var(--text-muted); margin: var(--space-1) 0 0; }
.field .err { font-size: var(--fs-xs); color: var(--danger); margin: var(--space-1) 0 0; }
.field.has-error input, .field.has-error select { border-color: var(--danger); }
.field-check .check-label {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-sm); color: var(--text-body); font-weight: var(--fw-regular);
}
/* Heading for a multi-checkbox group (CheckboxSelectMultiple), e.g. waitlist
   personas on the no-JS /join page and the claim form. */
.field .field-group-label {
  display: block; font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--text-strong); margin: 0 0 var(--space-2);
}

/* Flash messages */
.messages { list-style: none; padding: 0; margin: 0 0 var(--space-4); }
.msg {
  font-size: var(--fs-sm); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); margin-bottom: var(--space-2);
}
.msg-success { background: var(--success-bg); color: var(--success); }
.msg-error { background: var(--danger-bg); color: var(--danger); }
.msg-info { background: var(--info-bg); color: var(--info); }

/* --- Account shell (M3) --------------------------------------------------- */
/* Ink top bar for logged-in account pages (settings, billing). */
.account-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  background: var(--surface-ink);
  border-bottom: 1px solid var(--border-strong);
}
.account-bar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.account-bar .brand-lockup .wordmark { color: var(--text-on-dark); }

.account-nav {
  display: flex;
  gap: var(--space-5);
  align-items: center;
}
.account-nav a,
.account-nav .linklike {
  color: var(--text-on-dark);
  text-decoration: none;
  font: var(--fw-semibold) var(--fs-sm) / 1 var(--font-sans);
  opacity: 0.85;
}
.account-nav a:hover,
.account-nav .linklike:hover { opacity: 1; }
.account-logout { margin: 0; }
.account-nav .linklike {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* --- G2 settings --------------------------------------------------------- */
.settings-wrap { max-width: var(--container-prose); }
.settings-h {
  font: var(--text-h2);
  color: var(--text-strong);
  margin: 0 0 var(--space-2);
}
.settings-sub {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  margin: 0 0 var(--space-8);
}
.settings-section {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}
.settings-section-h {
  font: var(--text-h3);
  color: var(--text-strong);
  margin: 0 0 var(--space-5);
}

.account-main { padding: var(--space-10) 0 var(--space-16); }

/* --- Account content pages (transfer, print, etc.) ------------------------ */
.account-page { padding: var(--space-10) 0 var(--space-16); }
.account-page.narrow { max-width: 640px; }
.account-page h1 {
  font: var(--text-h1); color: var(--text-strong);
  margin: var(--space-2) 0 var(--space-3);
}
.account-page .lede {
  font-size: var(--fs-lead); color: var(--text-muted);
  max-width: 60ch; margin: 0 0 var(--space-6);
}
.account-page .card {
  background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  padding: var(--space-6); max-width: 560px;
}
.account-page .back-link { margin-top: var(--space-6); font-size: var(--fs-sm); }
.transfer-live .claim-link {
  width: 100%; font-family: var(--font-mono); font-size: var(--fs-sm);
  padding: var(--space-2) var(--space-3); border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); background: var(--surface-sunken);
  margin: var(--space-2) 0;
}
.transfer-note {
  font-style: italic; color: var(--text-muted);
  border-left: 3px solid var(--brand); padding-left: var(--space-3);
  margin: var(--space-4) 0;
}
/* Secure 6-digit transfer code: big enough to read aloud / hold up. */
.secure-code {
  font-family: var(--font-mono); font-size: var(--fs-display);
  font-weight: var(--fw-bold); letter-spacing: var(--space-2);
  color: var(--text-strong); text-align: center; user-select: all;
  padding: var(--space-4) var(--space-3); margin: var(--space-2) 0;
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--surface-sunken);
}
.transfer-status {
  list-style: none; padding: 0; margin: var(--space-4) 0;
  display: flex; flex-direction: column; gap: var(--space-2);
  font-size: var(--fs-sm); color: var(--text-muted);
}
.transfer-status li { display: flex; align-items: center; gap: var(--space-2); }
.claim-cover {
  display: block; width: 100%; max-width: 240px;
  border-radius: var(--radius-md); margin: 0 0 var(--space-4);
}
.form-error {
  color: var(--danger); font-size: var(--fs-sm);
  font-weight: var(--fw-medium); margin: 0 0 var(--space-4);
}
p.help { font-size: var(--fs-xs); color: var(--text-muted); margin: var(--space-2) 0 0; }

/* --- I1 maker apply (plan cards) ----------------------------------------- */
.mk-plan { margin-bottom: var(--space-4); }
.mk-plan-title { font: var(--text-h3); color: var(--text-strong); margin: 0 0 var(--space-1); }
.mk-plan-price { font-family: var(--font-serif); font-weight: var(--fw-bold); font-size: var(--fs-h2); color: var(--brass); margin: 0 0 var(--space-2); }
.mk-plan-per { font-size: var(--fs-sm); font-weight: var(--fw-regular); color: var(--text-muted); }
.mk-plan-desc { color: var(--text-muted); margin: 0 0 var(--space-4); }

/* --- K1 moderation queue ------------------------------------------------- */
.mod-list { list-style: none; padding: 0; margin: 0; }
.mod-item { margin-bottom: var(--space-4); max-width: none; }
.mod-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.mod-type { font-weight: var(--fw-bold); color: var(--text-strong); }
.mod-link { font-size: var(--fs-sm); color: var(--brand); }
.mod-by { font-size: var(--fs-sm); color: var(--text-muted); }
.mod-reason { color: var(--text-body); margin: 0 0 var(--space-3); }
.mod-actions { display: flex; gap: var(--space-2); }
.mod-empty { color: var(--text-muted); padding: var(--space-8) 0; }

/* --- FAQ accordions (shared: landing teaser + /faq page) ------------------ */
/* Native <details> — zero JS. Used on the landing FAQ teaser and the full FAQ. */
.faq-item {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-3);
}
.faq-item > summary {
  font: var(--fw-semibold) var(--fs-lead) / 1.3 var(--font-sans);
  color: var(--text-strong);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "+";
  font: var(--fw-regular) var(--fs-h3) / 1 var(--font-serif);
  color: var(--brand);
}
.faq-item[open] > summary::after { content: "–"; }
.faq-item > p { color: var(--text-muted); margin: var(--space-3) 0 0; }
.faq-item > p a { color: var(--link); }

/* --- Analytics consent banner ------------------------------------------- */
/* Rendered by the site-wide tracker (frontend/src/tracker). Styling lives here
   (not inline) so the tracker JS stays token-clean and dependency-free. */
.cor-consent {
  position: fixed; left: var(--space-4); right: var(--space-4); bottom: var(--space-4);
  z-index: 1000; margin: 0 auto; max-width: var(--container-prose);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
  background: var(--surface-card); color: var(--text-body);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg, var(--shadow-md)); padding: var(--space-4) var(--space-5);
  font-family: var(--font-sans); font-size: var(--fs-sm);
}
.cor-consent[hidden] { display: none; }
.cor-consent-text { flex: 1 1 16rem; margin: 0; }
.cor-consent-actions { display: flex; gap: var(--space-2); flex: 0 0 auto; }
.cor-consent-btn {
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: var(--fw-bold);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
  border: 1px solid var(--border-default); cursor: pointer; background: var(--surface-sunken);
  color: var(--text-strong);
}
.cor-consent-btn.is-primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink, var(--surface-card)); }
.cor-consent-btn:hover { border-color: var(--border-strong); }
.cor-consent-btn.is-primary:hover { background: var(--brand-hover); }

/* ── "Coming soon" veil ───────────────────────────────────────────────
   Blurs + greys a content region and floats a "Coming soon" panel over
   it, while the surrounding page chrome (header, search, CTA) stays sharp.
   The veiled content is made inert (not clickable, not selectable). Add
   `cs-veil--soft` for a lighter blur, `cs-veil--lg` for a touch less blur.
   To launch an area, drop the `cs-veil` wrapper and the panel block. */
.cs-veil { position: relative; isolation: isolate; }

.cs-veil__content {
  filter: blur(7px) grayscale(0.95);
  opacity: 0.6;
  pointer-events: none;
  user-select: none;
}
.cs-veil--soft .cs-veil__content {
  filter: blur(2.5px) grayscale(0.5);
  opacity: 0.8;
}
/* Coins + shop: a touch less blur than the default veil. */
.cs-veil--lg .cs-veil__content { filter: blur(6.3px) grayscale(0.95); }

/* Inline "coming soon" disable: blur + grey a single control (e.g. a chip). */
.cs-fuzz {
  filter: blur(2px) grayscale(0.6);
  opacity: 0.75;
  pointer-events: none;
  user-select: none;
}

/* The panel spans the veiled region; the badge sticks near the top of the
   viewport so it stays visible while scrolling a tall grid. */
.cs-veil__panel {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.cs-veil__badge {
  position: sticky;
  top: var(--space-10);
  width: fit-content;
  max-width: 26rem;
  margin: var(--space-10) auto 0;
  padding: var(--space-6) var(--space-8);
  text-align: center;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  transform: scale(1.3);
  transform-origin: top center;
}
.cs-veil__badge .eyebrow { margin: 0 0 var(--space-2); }
.cs-veil__title {
  margin: 0;
  font: var(--fw-bold) var(--fs-h3) / 1.15 var(--font-serif);
  color: var(--text-strong);
}
.cs-veil__note {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}