/* Durov's Dossier — public web pages (Block 9)
   Dark dossier / classified archive / cyber-intel aesthetic.
   Cyan #08E4F4 as the single signal color on a #0d0d0d ground.
   Mobile-first, JetBrains Mono, no framework. */

:root {
  --accent: #08E4F4;
  --accent-soft: rgba(8, 228, 244, 0.12);
  --accent-glow: rgba(8, 228, 244, 0.35);
  --bg: #0d0d0d;
  --bg-elev: #141414;
  --bg-input: #1c1c1c;
  --border: #232323;
  --border-strong: #2a2a2a;
  --text: #e6e6e6;
  --text-muted: #8a8a8a;
  --text-dim: #5a5a5a;
  --text-on-accent: #0d0d0d;
  /* Same warm dossier-gold used for #1-#3 leaderboard ranks.
     Promoted to a variable so the "Powered by $PYONYA | $REDRAW"
     footer line + future gold accents stay single-sourced. */
  --gold: #FFD166;
  --gold-glow: rgba(255, 209, 102, 0.35);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
}

/* Faint scanline overlay for the "archive screen" feel */
.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.02) 0px,
    rgba(255, 255, 255, 0.02) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
}

.page {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 16px 48px;
}

/* ----- App shell header (Block A) -----
   Unified header that sits on every public page. Top row:
   product mark + search placeholder. Bottom row: horizontal
   tab strip with mobile-scroll. */

.app-header {
  position: relative;
  z-index: 3;
  margin: 0 0 14px;
  padding: 0 0 0;
  border-bottom: 1px solid var(--border);
}
.app-header__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0 10px;
  flex-wrap: wrap;
}
.app-header__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  white-space: nowrap;
}
.app-header__brand:hover .app-header__title { color: var(--accent); }
.app-header__logo {
  /* Animated APNG, square, fits the nav row. Self-animating —
     no CSS animation, no clipping. Block display avoids inline
     baseline gap. */
  display: block;
  height: 36px;
  width: 36px;
  object-fit: contain;
  flex-shrink: 0;
}
.app-header__title {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--text);
}
.app-nav {
  margin: 0;
  padding: 0;
}
.app-nav__scroll {
  display: flex;
  gap: 4px;
  /* Centered when the strip fits; safe-center degrades to
     start-aligned scroll when content overflows on narrow
     screens (otherwise centering would clip the leading
     tabs). */
  justify-content: safe center;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 1px; /* room for the active underline */
  /* Subtle right-edge fade so overflow is visually obvious on
     narrow screens (the strip still scrolls horizontally; this
     is only a hint that more tabs exist beyond the edge). */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
.app-nav__scroll::-webkit-scrollbar { display: none; }
.app-nav__tab {
  flex: 0 0 auto;
  padding: 10px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.app-nav__tab:hover { color: var(--text); }
.app-nav__tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Legacy .topbar — kept for any old reference, but the
   app-header above is what every page renders now. */
.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--border);
}
.topbar__logo {
  height: 28px;
  width: auto;
}
.topbar__title {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--text);
}

/* ----- Sub-tab strip + panels (Block A) -----
   Used inside /u/:xHandle (profile) and /c/:slug (community).
   Progressive enhancement — no JS shows all panels stacked.
   The .tabs-enhanced body class scopes the panel-hiding rules
   to JS-enabled clients only. */
.subtab-strip {
  margin: 14px 0 0;
  padding: 0 0 0;
  border-bottom: 1px solid var(--border);
}
.subtab-strip__scroll {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.subtab-strip__scroll::-webkit-scrollbar { display: none; }
.subtab {
  flex: 0 0 auto;
  padding: 9px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.subtab:hover { color: var(--text); }
.subtab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.tab-panels {
  display: grid;
  grid-template-columns: 1fr;
  /* Gap between sibling panels (only matters when JS is off
     and panels stack). */
  gap: 22px;
  margin: 22px 0 0;
}
/* The active panel itself is a flex column so its child
   cards inherit a single uniform gap, matching .dossier. This
   is what makes Overview / Raid Resume / Communities feel
   evenly spaced — without it, cards inside a panel stacked
   flush. */
.tab-panel {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
/* JS-enhanced: hide non-active panels. display:none wins over
   the flex rule above via higher selector specificity. */
/* JS-enhanced: hide non-active panels. No-JS: all panels visible
   stacked (no rule applies, so they all render). */
body.tabs-enhanced .tab-panel:not(.is-active) { display: none; }

/* Profile header card + PFP placeholder + contact button row.
   Padding inherits from .card so every card on the page lines
   up to the same interior frame. */
.profile-header {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 18px;
  align-items: center;
}
.pfp {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  background: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 0 12px rgba(8, 228, 244, 0.18);
}
.pfp img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pfp--placeholder .pfp__initial {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.04em;
}
.profile-header__text { min-width: 0; }
.profile-header__name {
  margin: 0 0 2px;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  word-break: break-all;
}
.profile-header__sub {
  margin: 0 0 8px;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* Jeetivity active pill — sits next to the token symbol on
   /c/:slug to signal the conviction gauge is wired for this
   community. */
.jeetivity-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent-soft);
  vertical-align: middle;
}

/* ----- Dossier Professional (Individual Pro) perks ----- */

/* Glowing name — tasteful gradient + soft cyan glow.
   Tenant-skinnable: themes override the gradient stops below. */
.profile-header__name--pro {
  background: linear-gradient(90deg, #08E4F4, #FFD166 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 18px rgba(8, 228, 244, 0.45);
}

/* Pro seal — small uppercase pill beside the @handle. */
.pro-seal {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--bg);
  background: linear-gradient(90deg, #08E4F4, #FFD166);
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(255, 209, 102, 0.45);
  /* Reset text-fill from the gradient applied to the parent
     when the parent is Pro-glowing — otherwise the seal text
     would inherit the transparent fill. */
  -webkit-text-fill-color: var(--bg);
}

/* Open To Work — gold accent, dossier-styled. */
.profile-header__open-to-work {
  display: inline-block;
  margin: 0 0 8px;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: rgba(255, 209, 102, 0.08);
  box-shadow: 0 0 8px var(--gold-glow);
}

/* Holder PFP frame — cyan + gold double-ring around the NFT
   avatar so it reads as a verified holder display. */
.pfp--holder {
  border: 2px solid var(--gold);
  box-shadow:
    0 0 0 3px rgba(13, 13, 13, 0.95),
    0 0 0 4px var(--accent),
    0 0 18px var(--gold-glow);
}

/* Search list — Pro people get the same glow on the result
   card name. Search ranking handles ordering server-side; this
   is the visual signal. */
.search-card__name.pro-name {
  background: linear-gradient(90deg, #08E4F4, #FFD166 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Public leaderboard rows — handle text glows when Pro. */
.lb-row__handle--pro {
  color: var(--accent);
  text-shadow: 0 0 8px rgba(8, 228, 244, 0.45);
}

/* ----- Profile themes (Individual Pro) -----
   Three palettes painted via body[data-theme=...] selectors.
   Each retunes the accent + bg-elev variables so cards and
   buttons inherit. Default theme leaves the base unchanged. */
body[data-theme="noir"] {
  --accent: #e6e6e6;
  --accent-soft: rgba(230, 230, 230, 0.10);
  --accent-glow: rgba(230, 230, 230, 0.30);
  --bg-elev: #141414;
}
body[data-theme="noir"] .profile-header__name--pro {
  background: linear-gradient(90deg, #ffffff, #b3b3b3 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.30);
}
body[data-theme="cyber"] {
  --accent: #08E4F4;
  --accent-soft: rgba(8, 228, 244, 0.18);
  --accent-glow: rgba(8, 228, 244, 0.45);
  --bg: #060912;
  --bg-elev: #0c1320;
}
body[data-theme="cyber"] .profile-header__name--pro {
  text-shadow: 0 0 22px rgba(8, 228, 244, 0.70);
}
body[data-theme="graffiti"] {
  --accent: #ff4dd2;
  --accent-soft: rgba(255, 77, 210, 0.14);
  --accent-glow: rgba(255, 77, 210, 0.45);
}
body[data-theme="graffiti"] .profile-header__name--pro {
  background: linear-gradient(90deg, #ff4dd2, #FFD166 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 18px rgba(255, 77, 210, 0.55);
}
/* Block C — user-set display name + headline beneath the @handle. */
.profile-header__display {
  margin: 0 0 4px;
  color: var(--text);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.profile-header__headline {
  margin: 0 0 8px;
  color: var(--accent);
  font-size: 0.88rem;
  letter-spacing: 0.02em;
}
/* Spec 36 — role row beneath the name.
   Self-stated → plain claim line, dim. Verified → bordered
   badge with cyan accent + subtle glow so the two states are
   immediately distinguishable. */
.profile-header__role {
  margin: 0 0 8px;
  font-size: 0.85rem;
  line-height: 1.3;
}
.profile-header__role--self {
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.role-claim {
  display: inline-block;
  padding: 2px 8px;
  border: 1px dashed var(--border-strong);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}
.role-badge {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 6px;
  font-size: 0.82rem;
  text-transform: uppercase;
  box-shadow: 0 0 10px rgba(8, 228, 244, 0.25);
}
/* Block C — bio paragraph + skill pills. */
.bio {
  margin: 0;
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.65;
  white-space: normal;
  word-break: break-word;
}
/* Block C — grouped skill sections inside the Skills tab.
   Quieter sub-header (cyan accent, smaller letter-spacing) so
   the two groups read as nested under "Skills" rather than
   competing card titles. */
.skills-section + .skills-section { margin-top: 16px; }
.skills-section__title {
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin: 0 0 8px;
  font-weight: 700;
  opacity: 0.95;
}
.skill-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.skill-tag {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}
.profile-header__pill {
  margin: 0 0 12px;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.pill--grade { border: 1px solid var(--accent); }

.contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.contact-btn {
  display: inline-block;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 6px;
  cursor: pointer;
}
.contact-btn:hover { background: var(--accent-soft); }
.contact-btn--primary {
  background: var(--accent);
  color: var(--text-on-accent);
}
.contact-btn--primary:hover { background: #4eecf6; }
.contact-btn--ghost {
  color: var(--text-muted);
  border-color: var(--border-strong);
  cursor: not-allowed;
}
.contact-btn--ghost:hover { background: transparent; }

/* Stub cards used for tabs whose data hasn't shipped yet
   (Experience / Skills / Vouches / Missions / Members / Badges
   under the community page). */
/* Stub-card uses the same .card padding as every other card. */
.stub-card .section-title { margin-bottom: 8px; }

/* Allow the project-row name to be a real link in the new
   profile Overview + Communities tabs. */
.project-row__name {
  color: var(--accent);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.project-row__name:hover { text-decoration: underline; }

@media (min-width: 720px) {
  .app-header__row { padding: 6px 0 12px; }
  .profile-header { grid-template-columns: 120px 1fr; }
  .pfp { width: 120px; height: 120px; }
  .pfp--placeholder .pfp__initial { font-size: 3rem; }
  .profile-header__name { font-size: 1.6rem; }
}

/* ----- Home page (/) -----
   Educational landing. Big animated APNG ONLY here — other
   pages get only the small nav logo. No clipping on the home
   logo: the APNG renders at its natural square aspect inside
   a max-width container, centered. Self-animating; no CSS
   animation. */

.home-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 8px 8px;
  margin: 0 0 24px;
}
.home-logo {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  margin: 0 auto 12px;
  pointer-events: none;
  /* The home logo is shown at intrinsic ratio with no clipping
     — its container has plenty of vertical room. The empty
     padding inside the APNG canvas is acceptable here because
     it's the centerpiece, not a band. */
}
.home-headline {
  margin: 8px 0 14px;
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  line-height: 1.18;
}
/* Hook H1 ships two text variants — full sentence for desktop,
   shorter "Turn raids into reputation." for narrow phones where
   the full 47-character line would otherwise wrap to four lines.
   Default state: mobile, so we show SHORT and hide FULL. The
   ≥720px media query inverts the visibility. */
.home-headline__full { display: none; }
.home-headline__short { display: inline; }
.home-subhead {
  margin: 0;
  font-size: 0.98rem;
  color: var(--accent);
  letter-spacing: 0.02em;
  max-width: 640px;
}

.home-section-title {
  /* Slightly bigger than the in-card section-title since this
     one sits OUTSIDE a card, as a real heading. */
  font-size: 0.78rem;
  margin-bottom: 12px;
}

.home-narrative {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 18px;
  margin: 0 0 20px;
}
.home-narrative p {
  margin: 0 0 12px;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text);
}
.home-narrative p:last-child { margin-bottom: 0; }

.home-pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0 0 20px;
}
.home-pillar { padding: 16px 16px 14px; }
.home-pillar__title {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent);
}
.home-pillar__body {
  margin: 0;
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* ----- Onboarding (heading box + twin audience cards) -----
   Three-part layout:
     1. Full-width heading box ON TOP — single line of copy
        addressing every audience.
     2. Two sibling cards BELOW — operator path on the left,
        member path on the right. Stacked on mobile, side by
        side on desktop. Each card carries a subtle cyan top
        accent so the pair reads as a CTA moment without
        screaming. */
.home-onboard {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 0 24px;
}
.home-onboard__heading-box {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 18px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.home-onboard__heading-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
  opacity: 0.85;
}
.home-onboard__heading {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  line-height: 1.3;
}
.home-onboard__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.home-onboard__block {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.home-onboard__body {
  margin: 0 0 12px;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--text);
}
/* Extra breathing room below the last body paragraph so the
   divider line above the CTA sits in a clear gap, not flush
   against the text. */
.home-onboard__block .home-onboard__body:last-of-type {
  margin-bottom: 22px;
}
.home-onboard__body--accent {
  /* Pro pitch reads as a power upgrade, not a footnote. */
  color: var(--accent);
}
/* CTA wrapper: anchors the action area to the bottom of the
   card via margin-top:auto, adds a thin low-opacity divider so
   the button reads as a distinct action zone, and gives the
   button comfortable breathing room above. Both cards' wrappers
   stretch to the same bottom edge in the desktop side-by-side
   layout, so the CTAs line up regardless of body length. */
.home-onboard__cta-wrap {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  display: flex;
}
.home-onboard__cta {
  /* Full-width within the wrapper so the button reads as a
     distinct action element, not a small tag at the bottom. */
  width: 100%;
  margin-top: 0;
  text-align: center;
  box-sizing: border-box;
  padding: 14px 18px;
}

/* ----- Closing unifier line -----
   Centered standout at the very end of the page, gold-tinted
   to match the vision-line treatment but at a lower altitude
   so the two don't feel like duplicates. */
.home-closer {
  margin: 8px 0 28px;
  padding: 18px 16px;
  text-align: center;
}
.home-closer__line {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  line-height: 1.45;
}

.home-vision {
  margin: 4px 0 24px;
  padding: 18px 16px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.home-vision__line {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--gold);
  text-shadow: 0 0 12px var(--gold-glow);
  line-height: 1.4;
}

.home-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 0 0 28px;
}
.home-cta {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: transparent;
  transition: background 0.12s ease, color 0.12s ease;
}
.home-cta:hover {
  background: var(--accent-soft);
}
.home-cta--primary {
  background: var(--accent);
  color: var(--text-on-accent);
}
.home-cta--primary:hover {
  background: var(--accent);
  color: var(--text-on-accent);
  filter: brightness(1.1);
}

/* ----- Hero ----- */

.hero {
  position: relative;
  min-height: 220px;
  margin: 0 0 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background:
    radial-gradient(circle at 50% 50%, var(--accent-soft), transparent 70%),
    linear-gradient(180deg, #101010, #0a0a0a);
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.hero--active { opacity: 1; }
.hero--fading { opacity: 0.15; }
.hero--gone {
  opacity: 0;
  pointer-events: none;
  min-height: 0;
  height: 0;
  margin: 0;
  border: 0;
}
/* If JS is disabled, hide the hero entirely — Tier 0 data cards
   below are the whole experience. */
.no-js .hero { display: none; }

.hero canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Fix 1 — duplicate-grade hide. The grade-letter + grade-score lines
   live in the server-rendered .grade-card for Tier 0 / Tier 1 / no-JS /
   reduced-motion. When the Tier 2 WebGL hero successfully initializes,
   it sets `body.webgl-hero-active` and the cube reveal becomes the
   one true grade on screen. The other lines in the card (@handle,
   tg name) stay visible. The class is removed only on runtime
   failure inside the WebGL hero so the user is never left with no
   grade. */
body.webgl-hero-active .grade-card .grade-letter,
body.webgl-hero-active .grade-card .grade-score {
  display: none;
}

/* Grade reveal overlay — climax of the WebGL hero. A real DOM letter
   on top of the canvas, scaled up via CSS so it stays crisp at any
   resolution and inherits the page's typography. */
.hero__grade-reveal {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  /* JS sets --reveal-scale per device (smaller on mobile). */
  --reveal-scale: 9;
}
.hero__grade-reveal span {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  color: var(--accent);
  text-shadow:
    0 0 22px var(--accent-glow),
    0 0 64px var(--accent-glow),
    0 0 110px rgba(8, 228, 244, 0.25);
  opacity: 0;
  transform: scale(0.25);
  transition:
    opacity 0.55s ease,
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}
.hero__grade-reveal--showing span {
  opacity: 1;
  transform: scale(var(--reveal-scale));
}
@media (prefers-reduced-motion: reduce) {
  .hero__grade-reveal span {
    transition: none;
    opacity: 0;
  }
}

/* ----- Holographic globe hero (/communities) ----- */
.hero--globe {
  /* Slightly taller than the cube hero so the globe + halo
     breathe; halo extends well past the sphere edge. */
  min-height: 260px;
}
.hero--globe canvas {
  display: block;
  width: 100%;
  height: 100%;
}
/* Static fallback path — reduced-motion, low-power, no WebGL, or
   Three.js failed to load. SVG fills the panel without animation. */
.hero--globe-static {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-globe-svg {
  width: 72%;
  max-width: 320px;
  height: auto;
  display: block;
  /* Subtle cyan drop shadow gives the static SVG the same
     "holographic" weight as the WebGL version. */
  filter: drop-shadow(0 0 18px rgba(8, 228, 244, 0.18));
}
/* Tagline that sits between the globe hero and the leading
   Network Ranking card. Replaces the old top methodology box. */
.hero__tagline {
  text-align: center;
  margin: -4px 0 14px;
  letter-spacing: 0.02em;
}
.hero__tagline strong {
  color: var(--accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.92rem;
}
@media (min-width: 720px) {
  .hero--globe { min-height: 320px; }
  .hero-globe-svg { max-width: 380px; }
}

/* ----- CSS-3D fallback cube (Tier 1) ----- */

.hero--css-cube {
  perspective: 800px;
  min-height: 280px;
}
.hero--css-cube .scene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero--css-cube .cube {
  position: relative;
  width: 140px;
  height: 140px;
  transform-style: preserve-3d;
  animation: cube-spin 9s linear infinite;
  transform: rotateX(-15deg) rotateY(0deg);
}
.hero--css-cube .face {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(8, 228, 244, 0.08), rgba(8, 228, 244, 0.02)),
    repeating-linear-gradient(0deg, rgba(8, 228, 244, 0.08) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(90deg, rgba(8, 228, 244, 0.08) 0 1px, transparent 1px 14px),
    #0a0a0a;
  border: 1px solid var(--accent);
  box-shadow: inset 0 0 16px var(--accent-glow), 0 0 14px var(--accent-glow);
}
.hero--css-cube .face--front  { transform: translateZ(70px); }
.hero--css-cube .face--back   { transform: rotateY(180deg) translateZ(70px); }
.hero--css-cube .face--right  { transform: rotateY(90deg) translateZ(70px); }
.hero--css-cube .face--left   { transform: rotateY(-90deg) translateZ(70px); }
.hero--css-cube .face--top    { transform: rotateX(90deg) translateZ(70px); }
.hero--css-cube .face--bottom { transform: rotateX(-90deg) translateZ(70px); }

.hero--css-cube .glyph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: var(--accent);
  text-shadow: 0 0 12px var(--accent-glow);
}

@keyframes cube-spin {
  0%   { transform: rotateX(-15deg) rotateY(0deg); }
  100% { transform: rotateX(-15deg) rotateY(360deg); }
}

/* ----- Dossier cards (Tier 0 — always rendered, always visible) ----- */

.dossier {
  display: grid;
  grid-template-columns: 1fr;
  /* Generous gap between adjacent cards — premium readable
     spacing across profile + community pages. */
  gap: 22px;
  opacity: 0;
  animation: cards-in 0.6s ease 0.1s forwards;
}
.no-js .dossier { opacity: 1; animation: none; }

@keyframes cards-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  /* Roomier interior so stat lists and section titles breathe. */
  padding: 24px 20px;
  position: relative;
}

/* Grade card — the focal point. Inset cyan ring only; the
   outer glow was bleeding into the gap between cards and
   producing stray slivers, so it's removed. Cards have crisp,
   contained edges. */
.grade-card {
  text-align: center;
  padding: 28px 16px 22px;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-soft) inset;
}
.grade-letter {
  font-size: 4.5rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.04em;
  line-height: 1;
  text-shadow: 0 0 18px var(--accent-glow);
}
.grade-letter.unranked {
  color: var(--text-muted);
  font-size: 1.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: none;
}
.grade-score {
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 0.92rem;
  letter-spacing: 0.04em;
}
.grade-handle {
  margin-top: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.grade-tg { font-size: 0.85rem; }

/* Section titles */
.section-title {
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  /* More breathing room before the first row of content. */
  margin: 0 0 20px;
  font-weight: 700;
}

/* Key-value lists. Calm row spacing — the visible "breathing"
   comes from the gap BETWEEN cards, not from over-padded rows. */
.kv { margin: 0; padding: 0; }
.kv-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}
.kv-row:last-child { border-bottom: none; }
.kv-row dt, .kv-row > :first-child { color: var(--text-muted); margin: 0; }
.kv-row dd, .kv-row > :last-child { margin: 0; color: var(--text); font-variant-numeric: tabular-nums; text-align: right; word-break: break-all; }

/* Project rows */
.projects { list-style: none; margin: 0; padding: 0; }
.project-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.project-row:last-child { border-bottom: none; }
.project-row__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.03em;
}
.project-row__stats {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: 3px;
}
.empty {
  list-style: none;
  color: var(--text-muted);
  padding: 8px 0;
}

/* Jeetivity gauge (display-only). Pure visual shell — the dot is
   always centered at 50% and status reads "Unknown" until spec/30
   ConvictionScoringService ships. Dossier aesthetic — cyan #08E4F4
   accent track tick + dot, dark base, JetBrains Mono. Mobile-first:
   the track flexes to its container; ends stack left/right; the dot
   is non-interactive (pointer-events: none). */
.jeetivity { margin: 4px 0 0; }
.jeetivity__ends {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 6px 0 6px;
}
.jeetivity__end { color: var(--text-muted); }
.jeetivity__end--right { text-align: right; }
.jeetivity__track {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(8, 228, 244, 0.06),
    rgba(8, 228, 244, 0.16),
    rgba(8, 228, 244, 0.06)
  );
  border: 1px solid var(--border-strong);
  box-shadow: inset 0 0 6px rgba(8, 228, 244, 0.06);
  margin: 0 0 10px;
}
.jeetivity__dot {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 1.5px solid #0d0d0d;
  box-shadow: 0 0 10px var(--accent-glow);
  transform: translate(-50%, -50%);
  pointer-events: none; /* gauge is computed, not draggable */
}
.jeetivity__status {
  font-size: 0.85rem;
  color: var(--text);
  letter-spacing: 0.04em;
  margin: 0 0 4px;
}
.jeetivity__status strong {
  color: var(--accent);
  font-weight: 700;
}

/* Badges (DOM class kept stable — engine name; user-facing label is
   "Achievements" in the section title). */
.badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--bg-input);
  font-size: 0.85rem;
}
.badge__emoji { font-size: 1rem; }
.badge__name { color: var(--text); font-weight: 700; }
.badge__project { color: var(--text-muted); font-size: 0.78rem; }

/* Leaderboard rows (community page + /xp).
   Block A nav fix — the whole handle is now the link, so the
   row drops the trailing "view" cell. 3 columns: rank · handle
   · stats. */
.leaderboard { list-style: none; margin: 0; padding: 0; }
.lb-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
}
.lb-row:last-child { border-bottom: none; }
.lb-row__rank {
  color: var(--text);
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
/* Top-3 rank polish — dossier-gold. Warm amber that reads cleanly
   on the dark base and stays distinct from the cyan signal color
   used elsewhere on the page. Subtle text-shadow gives it weight
   without screaming. */
.lb-row__rank--gold {
  color: #FFD166;
  text-shadow: 0 0 6px rgba(255, 209, 102, 0.35);
}
.lb-row__handle { color: var(--text); }
/* Block A nav fix — the whole handle is the discovery link
   when xHandle is set. Cyan so it reads as actionable; no
   underline by default to keep rows clean. */
.lb-row__handle--link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 700;
}
.lb-row__handle--link:hover { text-decoration: underline; }
.lb-row__stats { color: var(--text-muted); font-size: 0.78rem; text-align: right; }
.lb-row__link {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.78rem;
  padding-left: 6px;
}
.lb-row__link:hover { text-decoration: underline; }

/* Strongest Communities — /communities rows. One row per community
   with: rank · circular logo · name · score+grade · stats line.
   Reuses .project-row__logo (circular cyan-ringed avatar) and
   .lb-row__rank / --gold (same gold rule as member leaderboards). */
.comm-leaderboard { list-style: none; margin: 0; padding: 0; }
.comm-row {
  display: grid;
  grid-template-columns: 36px 36px 1fr auto;
  grid-template-areas:
    "rank logo name  score"
    ".    .    stats stats";
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.comm-row:last-child { border-bottom: none; }
.comm-row .lb-row__rank { grid-area: rank; }
.comm-row .project-row__logo { grid-area: logo; }
.comm-row__name {
  grid-area: name;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.comm-row__name:hover { text-decoration: underline; }
.comm-row__score {
  grid-area: score;
  text-align: right;
  color: var(--text);
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.comm-row__grade {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.comm-row__grade--building {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
}
.comm-row__stats {
  grid-area: stats;
  color: var(--text-muted);
  font-size: 0.82rem;
}
@media (min-width: 720px) {
  .comm-row {
    grid-template-columns: 44px 44px 1fr auto;
    grid-template-areas:
      "rank logo name  score"
      ".    .    stats stats";
    padding: 14px 0;
  }
}

/* Community head */
.community-head {
  display: flex;
  align-items: center;
  gap: 16px;
  /* Padding inherits from .card to match every other card on
     the page. */
}

/* Block 10 polish — circular avatar-style logo container. Ticker /
   profile-photo shape on every surface that renders a community
   logo (community-head on /c/:slug + project-row on /u/:xHandle).
   The SAME circle whether the community has uploaded a custom
   logo or falls back to the platform mark — framing is identical.
   object-fit: cover crops overflow so a non-square logo fills the
   circle without distortion. A transparent PNG sits centered with
   its corners harmlessly clipped. Cyan #08E4F4 ring reads as a
   defined avatar in the dossier theme. */
.community-logo {
  width: 88px;
  height: 88px;
  flex: 0 0 88px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  background: #0a0a0a;
  box-shadow: 0 0 12px rgba(8, 228, 244, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.community-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Platform-logo fallback: same circle, but the platform mark sits
   centered as a small contained icon (not edge-cropped) so it
   reads as "no custom logo set" rather than as a real avatar. */
.community-logo--placeholder img {
  width: 56%;
  height: auto;
  object-fit: contain;
  opacity: 0.7;
}

/* Project-row logo — same circular shape, smaller scale, used in
   the /u/:xHandle "Communities" breakdown rows. Placeholder is an
   emoji centered in the same dark cyan-ringed circle. */
.project-row__logo {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  background: #0a0a0a;
  box-shadow: 0 0 4px rgba(8, 228, 244, 0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.project-row__logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.project-row__logo--placeholder {
  font-size: 0.95rem;
  line-height: 1;
}
.community-head__text { flex: 1; min-width: 0; }
.community-head__emoji {
  font-size: 1.1rem;
  letter-spacing: 0.08em;
}
.community-head__name {
  margin: 4px 0 2px;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.community-head__name-text { display: inline; }
/* Network rank pill — same gold tone as the leaderboard top-3 rank
   when the community is ranked #1-3, default text-white at #4+.
   Reuses .lb-row__rank + .lb-row__rank--gold so the color rule
   stays in one place. */
.community-head__rank {
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.community-head__token { font-size: 0.85rem; margin: 0; }

/* Muted helpers */
.muted { color: var(--text-muted); }
.small { font-size: 0.82rem; }

/* Footer */
.footer {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--text-muted);
  font-size: 0.82rem;
}
.footer p { margin: 0 0 6px; }
/* Per-tenant footer line — bigger + cyan-accented so a tenant
   like REDRAW reads as their own voice above the shared
   platform attribution. */
.footer__tenant {
  color: var(--accent);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  margin-bottom: 10px !important;
}
/* Anchor-token line — gold (same warm dossier tone as the #1-#3
   leaderboard ranks). Single-sourced via --gold. */
.footer__powered-by {
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-shadow: 0 0 6px var(--gold-glow);
}

/* ----- Dedicated search surface (/search) -----
   Centered prompt + large input, no header bar. Replaces the
   old header-embedded search input. */
.search-surface {
  max-width: 560px;
  margin: 32px auto 0;
  padding: 8px 12px;
  text-align: center;
}
.search-surface__title {
  margin: 0 0 8px;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text);
}
.search-surface__sub {
  margin: 0 0 22px;
  color: var(--text-muted);
  font-size: 0.95rem;
}
.search-surface__form {
  display: flex;
  gap: 8px;
  margin: 0 auto 18px;
  max-width: 480px;
}
.search-surface__input {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 1rem;
  letter-spacing: 0.02em;
}
.search-surface__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-soft);
}
.search-surface__btn {
  background: var(--accent);
  color: var(--text-on-accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 12px 18px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.search-surface__btn:hover { background: #4eecf6; }
.search-surface__echo {
  margin-top: 10px;
  color: var(--text-muted);
}

/* ----- Search results (Block B) ----- */
.search-results {
  max-width: 720px;
  margin: 24px auto 0;
  padding: 0 12px;
}
.search-group { margin-bottom: 24px; }
.search-group:last-child { margin-bottom: 0; }
.search-group--empty {
  text-align: center;
  padding: 24px 12px;
}
.search-group__title {
  margin: 0 0 12px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}
.search-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.search-card {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  align-items: center;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}
.search-card:hover { border-color: var(--border-strong); }
.search-card__avatar {
  display: block;
  text-decoration: none;
}
.search-card__avatar .pfp,
.search-card__avatar .project-row__logo {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
}
.search-card__avatar .pfp__initial { font-size: 1.6rem; }
.search-card__body { min-width: 0; }
.search-card__name {
  display: inline-block;
  color: var(--accent);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  word-break: break-all;
}
.search-card__name:hover { text-decoration: underline; }
.search-card__sub {
  margin: 2px 0 10px;
  font-size: 0.85rem;
  word-break: break-word;
}
.search-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (min-width: 720px) {
  .search-card { grid-template-columns: 72px 1fr; }
  .search-card__avatar .pfp,
  .search-card__avatar .project-row__logo {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
  }
  .search-card__avatar .pfp__initial { font-size: 1.8rem; }
}

/* Generic anchor */
a { color: var(--accent); }
a:hover { color: #4eecf6; }

/* Code-tag styling for slug examples */
code {
  font-family: inherit;
  font-size: 0.9em;
  background: var(--bg-input);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--accent);
}

/* Reduced motion — calm any movement */
@media (prefers-reduced-motion: reduce) {
  .dossier { animation: none; opacity: 1; }
  .hero--css-cube .cube { animation: none; }
}

/* Wider screens */
@media (min-width: 720px) {
  .page { padding-top: 24px; }
  .hero { min-height: 280px; }
  /* Same uniform gap on every container that holds cards —
     keeps Overview / Raid Resume / Communities visually
     identical regardless of which tab is open. */
  .dossier     { gap: 26px; }
  .tab-panels  { gap: 26px; }
  .tab-panel   { gap: 26px; }
  .card { padding: 28px 26px; }
  .grade-letter { font-size: 5.5rem; }
  /* Home — scale the hero up and lay the three pillars side
     by side once there's room. The animated APNG gets a bit
     larger but stays well under the original ~280px ceiling
     so it never overwhelms the narrative below. */
  .home-logo { max-width: 280px; }
  .home-headline {
    /* Desktop hook: ~2 lines for the 47-char promise. font-size
       and max-width are tuned together — bigger font would
       overflow 2 lines on tight viewports; widening past ~30ch
       starts to read as a horizontal stripe and loses impact. */
    font-size: 2rem;
    max-width: 28ch;
    margin-top: 12px;
    margin-bottom: 18px;
  }
  .home-headline__full { display: inline; }
  .home-headline__short { display: none; }
  .home-subhead { font-size: 1.05rem; }
  .home-pillars { grid-template-columns: repeat(2, 1fr); }
  .home-vision__line { font-size: 1.25rem; }
  .home-onboard { gap: 18px; }
  .home-onboard__cards { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .home-onboard__heading-box { padding: 24px 26px; }
  .home-onboard__block { padding: 28px 26px 26px; }
  .home-onboard__cta-wrap { padding-top: 22px; }
  .home-onboard__heading { font-size: 1.4rem; }
}

/* ----- Public doc pages (/privacy, /algorithm, /methodology)
   Long-form markdown rendered inside the standard app shell.
   Match the dossier dark aesthetic; readable line length; quiet
   tables; cyan accents on links and code. -----------------*/

.doc-page {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 18px;
  margin: 0 auto 32px;
  max-width: 760px;
}
.doc-page__header {
  border-bottom: 1px solid var(--border);
  padding-bottom: 14px;
  margin-bottom: 18px;
}
.doc-page__title {
  margin: 0 0 6px;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  line-height: 1.2;
}
.doc-page__subhead {
  margin: 0;
  color: var(--accent);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.doc-page__body { color: var(--text); font-size: 0.95rem; line-height: 1.65; }
.doc-page__body h1,
.doc-page__body h2,
.doc-page__body h3,
.doc-page__body h4 {
  color: var(--text);
  letter-spacing: 0.02em;
  line-height: 1.25;
  margin: 28px 0 10px;
  font-weight: 700;
}
.doc-page__body h1 { font-size: 1.4rem; }
.doc-page__body h2 { font-size: 1.15rem; color: var(--accent); }
.doc-page__body h3 { font-size: 1rem; }
.doc-page__body h4 { font-size: 0.92rem; color: var(--text-muted); }
.doc-page__body p { margin: 0 0 14px; }
.doc-page__body a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(8, 228, 244, 0.35);
  text-underline-offset: 2px;
}
.doc-page__body a:hover { text-decoration-color: var(--accent); }
.doc-page__body strong { color: var(--text); }
.doc-page__body em { color: var(--text-muted); font-style: italic; }
.doc-page__body ul,
.doc-page__body ol {
  padding-left: 20px;
  margin: 0 0 14px;
}
.doc-page__body li { margin: 4px 0; }
.doc-page__body blockquote {
  margin: 14px 0;
  padding: 10px 14px;
  border-left: 3px solid var(--accent);
  background: rgba(8, 228, 244, 0.05);
  color: var(--text);
  border-radius: 0 6px 6px 0;
}
.doc-page__body blockquote p { margin: 0; }
.doc-page__body code {
  font-family: inherit;
  font-size: 0.9em;
  padding: 1px 6px;
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  color: var(--accent);
}
.doc-page__body pre {
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 12px 14px;
  overflow-x: auto;
  margin: 0 0 14px;
  font-size: 0.85rem;
  line-height: 1.55;
}
.doc-page__body pre code {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--text);
  font-size: inherit;
}
.doc-page__body hr {
  margin: 22px 0;
  border: 0;
  border-top: 1px solid var(--border);
}
/* Tables — quiet, readable, scrollable on narrow viewports. */
.doc-page__body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 16px;
  font-size: 0.88rem;
  display: block;
  overflow-x: auto;
}
.doc-page__body th,
.doc-page__body td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.doc-page__body thead th {
  background: var(--bg-input);
  color: var(--accent);
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--border-strong);
}
.doc-page__body tbody tr:hover td { background: rgba(8, 228, 244, 0.03); }

.footer__doc-links { margin-top: 10px; }
.footer__doc-links a {
  color: var(--text-muted);
  text-decoration: underline;
  text-decoration-color: rgba(138, 138, 138, 0.3);
  text-underline-offset: 2px;
  margin: 0 6px;
}
.footer__doc-links a:hover { color: var(--accent); }

@media (min-width: 720px) {
  .doc-page { padding: 32px 32px; }
  .doc-page__title { font-size: 1.85rem; }
  .doc-page__body { font-size: 1rem; }
}

/* ---------- Home — spec 60 hook restructure ----------
   Hero is now the first impression: hook H1, supporting line,
   three-line microcopy, two CTAs visible above the fold.
   Mobile keeps CTAs above any explainer text. */

/* Hook headline — wider container + softer line-height so the
   47-char promise lands in 2 lines max on desktop (and the
   shorter mobile variant lands in 1-2 lines on a phone).
   Width is set per-variant in the visibility-toggle rules
   below so we don't accidentally cap the long version too
   narrow on desktop. */
.home-headline {
  font-weight: 700;
  line-height: 1.18;
  margin-left: auto;
  margin-right: auto;
}

/* Three-line microproof. Inline-block spans with explicit
   wrap so the lines stack cleanly on phones, sit on one line
   each on desktop. Slightly muted but still legible. */
.home-microcopy {
  margin: 14px auto 18px;
  max-width: 520px;
  color: var(--text-muted);
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
}
.home-microcopy span { display: block; }

/* Hero CTA row — primary + secondary. Stacked on mobile,
   side by side on desktop. Reuses .home-cta look. */
.home-hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 0 0 10px;
}
.home-hero__cta {
  /* Hero CTAs read as primary action elements — comfortable
     touch target on mobile, mid-width on desktop. */
  padding: 12px 18px;
  font-size: 0.88rem;
}

/* Positioning microline ("Most bots track the raid …") — sits
   between the explainer and the four-card outcome grid. Cyan
   strong span, otherwise dim — should read as a single beat,
   not a paragraph. */
.home-positioning {
  text-align: center;
  margin: 4px 0 22px;
  padding: 14px 12px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.home-positioning__line {
  margin: 0;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}
.home-positioning__line strong {
  color: var(--accent);
  font-weight: 700;
}

/* Footer trust line — slightly accented so it lands as a
   posture statement, not buried in fine print. */
.footer__trust {
  margin: 6px 0 4px;
  color: var(--accent);
  letter-spacing: 0.02em;
  font-size: 0.88rem;
}

@media (min-width: 720px) {
  .home-microcopy {
    font-size: 0.95rem;
    flex-direction: row;
    gap: 18px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .home-microcopy span { display: inline; }
  .home-hero__cta { padding: 14px 22px; font-size: 0.92rem; }
  .home-positioning__line { font-size: 1.05rem; }
}

/* ---------- Addiction layer for /u/:handle (spec 53) ----------
   Rank-progression card, Next Best Move, profile completion meter,
   per-community grade pills, share-flex framing, locked-preview
   achievement rows. All additive — existing classes untouched. */

/* Rank progression card — sits between profile header and tabs. */
.rank-progress { padding: 14px 16px; }
.rank-progress__header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.rank-progress__rank {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.rank-progress__score {
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* Next-grade bar + label */
.next-grade { margin: 4px 0 12px; }
.next-grade__bar {
  width: 100%;
  height: 8px;
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  overflow: hidden;
}
.next-grade__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #4eecf6);
  box-shadow: 0 0 8px rgba(8, 228, 244, 0.45);
  transition: width 0.4s ease;
  width: 0%;
}
.next-grade__label { margin-top: 6px; }
.next-grade--maxed .next-grade__rank {
  display: block;
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-shadow: 0 0 8px var(--gold-glow);
}

/* Next Best Move card */
.next-best-move {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  background: var(--bg-input);
}
.next-best-move__title {
  text-transform: uppercase;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 2px;
}
.next-best-move__text {
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* Profile completion meter */
.completion__meter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.completion__bar {
  flex: 1;
  height: 8px;
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  overflow: hidden;
}
.completion__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #4eecf6);
  box-shadow: 0 0 6px rgba(8, 228, 244, 0.30);
  transition: width 0.4s ease;
}
.completion__pct {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}
.completion__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}
.completion__item {
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}
.completion__item--done    { color: var(--accent); }
.completion__item--missing { color: var(--text-muted); }
@media (min-width: 480px) {
  .completion__list { grid-template-columns: 1fr 1fr; }
}

/* Per-community grade pill on /u/:handle rows */
.project-row__grade {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  vertical-align: middle;
}
.project-row__grade--graded {
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.project-row__grade--building {
  border: 1px dashed var(--border-strong);
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 0.62rem;
}

/* Share-flex framing line above the contact buttons */
.share-flex-line {
  margin: 0 0 8px;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 0.92rem;
}

/* Locked achievement preview rows — reuses the existing
   .badge container with a muted overlay so the row reads as
   "not yet earned". */
.badge--locked {
  opacity: 0.78;
}
.badge--locked .badge__emoji { filter: grayscale(0.4); }
.badge--locked .badge__name { color: var(--text-muted); }

/* =========================================================
   Block J — Public Raids board (/missions).
   Reuses existing card / muted / small / section-title
   classes from the rest of the public site. New rules below
   are scoped to .raid-board / .raid-card.
   ========================================================= */

.raid-board { gap: 18px; display: flex; flex-direction: column; }

.raid-board__header { display: flex; flex-direction: column; gap: 4px; }
.raid-board__updated {
  display: inline-block;
  margin-left: 6px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.raid-board__list { display: flex; flex-direction: column; gap: 14px; }
.raid-board__section { display: flex; flex-direction: column; gap: 10px; }
.raid-board__section--sponsored {
  padding: 8px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,193,7,0.06), rgba(255,193,7,0.0));
  border: 1px solid rgba(255,193,7,0.18);
}

/* ---- card ---- */
.raid-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--card-bg);
  border: 1px solid var(--border);
}
.raid-card--sponsored {
  border-color: rgba(255,193,7,0.55);
  box-shadow: 0 0 0 1px rgba(255,193,7,0.18);
}

.raid-card__head {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
}
.raid-card__logo {
  width: 44px; height: 44px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--bg-sub);
  border: 1px solid var(--border);
}
.raid-card__logo--initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text-muted);
}
.raid-card__id { min-width: 0; }
.raid-card__community {
  display: inline-block;
  font-size: 0.78rem;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.raid-card__community:hover { text-decoration: underline; }
.raid-card__title {
  margin: 2px 0 0;
  font-size: 1.02rem;
  line-height: 1.25;
  word-break: break-word;
}

.raid-card__sponsored {
  align-self: start;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  color: #1c1300;
  background: linear-gradient(180deg, #ffd54a, #f6b800);
}

.raid-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
}
.raid-card__heat {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid currentColor;
}
.raid-card__heat--record  { color: #ff5d8f; }
.raid-card__heat--fire    { color: #ff7849; }
.raid-card__heat--heating { color: #ffb547; }
.raid-card__heat--cold    { color: var(--text-muted); border-color: var(--border); }

.raid-card__replies { color: var(--text); font-variant-numeric: tabular-nums; }
.raid-card__time { color: var(--text); font-variant-numeric: tabular-nums; }
.raid-card__time--ended { color: var(--text-muted); }
.raid-card__started { color: var(--text-muted); }

.raid-card__actions { display: flex; justify-content: flex-end; }

.raid-card__join {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 18px;
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: #001218;
  background: var(--accent);
  border: 1px solid var(--accent);
  transition: filter 0.12s ease;
}
.raid-card__join:hover { filter: brightness(1.08); }
.raid-card__join--fallback {
  color: var(--text);
  background: transparent;
  border-color: var(--border-strong);
}

.raid-empty p { margin: 6px 0; }