/* ============================================================
   plaque.css — Hunter's Atlas Plaque component family
   Stage 3 of the Frontend Cohesion Overhaul.

   ONE base contract: .plaque carries the surface, the hairline
   border, the 14px radius, the corner ornaments, and the per-tier
   accent custom-property + the on-hover per-level glow. Each
   variant only redefines layout (grid/flex), spacing, and which
   field slots are visible.

   Variant matrix (all share base .plaque, all share field-set
   slots — typography/coloration is inherited from the base):

     .plaque--mini     HoH track plate.
       orb · slug · handle · rank stars · (no description, no tags,
       no install row). Glow intensity 50%.

     .plaque--tile     Named Skills Explorer grid card.
       header(orb·chip·origin·gh) · slug · title · handle ·
       description · tags(3) · install row.

     .plaque--row      Named Skills Explorer list row (horizontal).
       Same field set as tile, density-collapsed. Description
       hidden in CSS only (no JS-level field drops). Glow 25%.

     .plaque--detail   Skill Explorer modal hero.
       Two-column. Left: orb(lg)·slug·handle·rank(full)·install·gh.
       Right: title·description·tags.

     .plaque--settled  Profile trophy card.
       Tile field set + rank stars + evidence-class chip + gold
       underline. The variant that earns the "trophy" framing.

     .plaque--og       1200×630 social card mock.
       In-browser HTML preview of the SVG card emitted by
       scripts/generateOgCards.py. Same field set as detail;
       OG card uses the same slot vocabulary.

   Field selectors (one source of truth):
     .plaque__header        the top-row cluster (orb + chip + …)
     .plaque__col           detail-only column wrapper
     .plaque__slug    /     skill-name slash form (e.g. /autoresearch)
       .plaque-skill-name   legacy alias kept for the typography rule
     .plaque__title   /     italic EB Garamond subtitle
       .plaque-title        legacy alias
     .plaque__handle  /     contributor row container (honor-red link)
       .plaque-contrib-row  legacy alias
     .plaque__description / body copy
       .plaque-description  legacy alias
     .plaque__tags / .plaque__tag    tag chip group
     .plaque__rank          rank-badge slot (hosts .rank-badge from Stage 2)
     .plaque__install-row   mini-terminal install command
     .plaque__gh-link       GitHub link (sprite-driven)
     .plaque__evidence      evidence-class chip (settled only)
     .plaque__underline     gold underline accent (settled only)
     .plaque__arrow         right-anchor caret (row only)
     .plaque__origin        origin-contributor star

   Tier coloration goes through a single custom property,
   --plaque-accent (with -bg / -rgb companions). One rule per
   tier sets the property; every .plaque__* selector reads it
   via var(--plaque-accent) — never a hardcoded hex.

   Per-level hover glow uses --plaque-glow-intensity as a
   multiplier so .plaque--mini (50%) and .plaque--row (25%) can
   tone down the shadow without redefining the rule.
   ============================================================ */


/* ── Plaque layout tokens ────────────────────────────────────── */
:root {
  --plaque-bg:         var(--surface, #0f172a);
  --plaque-border:     var(--border, #1e293b);
  --plaque-border-w:   1px;
  --plaque-pad:        20px;
  --plaque-radius:     14px;
  --plaque-glow-intensity: 1;
  /* OG / landscape variant */
  --plaque-og-w:       1200px;
  --plaque-og-h:       630px;
}


/* ── Base .plaque rule ──────────────────────────────────────────
   Surface + hairline border + per-tier accent token + hover lift
   + on-hover per-tier radial glow (per DESIGN.md "Cards" rule —
   glow is hover-only, not default).
   ============================================================ */
.plaque {
  --plaque-accent: var(--tier-basic);
  --plaque-accent-rgb: var(--tier-basic-rgb);
  --plaque-accent-bg: var(--tier-basic-bg);

  position: relative;
  background: var(--plaque-bg);
  border: var(--plaque-border-w) solid var(--plaque-border);
  border-radius: var(--plaque-radius);
  padding: var(--plaque-pad);
  color: var(--text, #e2e8f0);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  cursor: pointer;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.15s;
}

.plaque:hover {
  border-color: rgba(var(--plaque-accent-rgb), 0.5);
  transform: translateY(-2px);
  z-index: 10;
  /* Per-tier hover glow uses the accent rgb so the radial halo
     swaps automatically when --plaque-accent flips per data-type. */
  box-shadow:
    0 0 0 1px rgba(var(--plaque-accent-rgb), 0.1),
    0 16px 48px rgba(0, 0, 0, 0.4),
    0 0 calc(32px * var(--plaque-glow-intensity)) rgba(var(--plaque-accent-rgb), 0.18);
}

/* Corner ornaments — kept for the settled trophy + og variants
   (the apex affordance). Hidden on the lighter variants below so
   the card density survives. */
.plaque--settled::before,
.plaque--settled::after,
.plaque--og::before,
.plaque--og::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: rgba(var(--apex-gold-rgb), 0.4);
  border-style: solid;
  pointer-events: none;
}
.plaque--settled::before,
.plaque--og::before {
  top: 10px;
  left: 10px;
  border-width: 1px 0 0 1px;
}
.plaque--settled::after,
.plaque--og::after {
  bottom: 10px;
  right: 10px;
  border-width: 0 1px 1px 0;
}


/* ── Per-tier accent: single rule per tier ───────────────────────
   --plaque-accent flips here. Every .plaque__* selector resolves
   accent via this property, so no per-variant overrides exist.
   ============================================================ */
.plaque[data-type="basic"] {
  --plaque-accent: var(--tier-basic);
  --plaque-accent-rgb: var(--tier-basic-rgb);
  --plaque-accent-bg: var(--tier-basic-bg);
}
.plaque[data-type="extra"] {
  --plaque-accent: var(--tier-extra);
  --plaque-accent-rgb: var(--tier-extra-rgb);
  --plaque-accent-bg: var(--tier-extra-bg);
}
.plaque[data-type="unique"] {
  --plaque-accent: var(--tier-unique);
  --plaque-accent-rgb: var(--tier-unique-rgb);
  --plaque-accent-bg: var(--tier-unique-bg);
}
.plaque[data-type="unique"]:hover {
  box-shadow:
    0 0 0 1px rgba(var(--tier-unique-rgb), 0.3),
    0 16px 48px rgba(0, 0, 0, 0.6),
    0 0 20px rgba(var(--tier-unique-rgb), 0.5);
}
.plaque[data-type="ultimate"] {
  --plaque-accent: var(--tier-ultimate);
  --plaque-accent-rgb: var(--tier-ultimate-rgb);
  --plaque-accent-bg: var(--tier-ultimate-bg);
}


/* ── Per-level hover glow: single rule with --rank-N ────────────
   The base hover-shadow above carries the tier glow. For levels
   4–6, the rank-N glow stacks on top so the rank halo is visible
   on hover. Mini/Row tone down via --plaque-glow-intensity.
   ============================================================ */
.plaque[data-level="2"]:hover {
  box-shadow:
    0 0 0 1px rgba(var(--plaque-accent-rgb), 0.1),
    0 16px 48px rgba(0, 0, 0, 0.4),
    0 0 calc(24px * var(--plaque-glow-intensity)) rgba(99, 202, 183, 0.25);
}
.plaque[data-level="3"]:hover {
  box-shadow:
    0 0 0 1px rgba(var(--plaque-accent-rgb), 0.1),
    0 16px 48px rgba(0, 0, 0, 0.4),
    0 0 calc(26px * var(--plaque-glow-intensity)) rgba(167, 139, 250, 0.3);
}
.plaque[data-level="4"]:hover {
  box-shadow:
    0 0 0 1px rgba(var(--plaque-accent-rgb), 0.1),
    0 16px 48px rgba(0, 0, 0, 0.4),
    0 0 calc(32px * var(--plaque-glow-intensity)) rgba(232, 121, 249, 0.35);
}
.plaque[data-level="5"]:hover {
  box-shadow:
    0 0 0 1px rgba(var(--plaque-accent-rgb), 0.1),
    0 16px 48px rgba(0, 0, 0, 0.4),
    0 0 calc(40px * var(--plaque-glow-intensity)) rgba(var(--apex-gold-rgb), 0.4);
}
.plaque[data-level="6"]:hover {
  box-shadow:
    0 0 0 1px rgba(var(--plaque-accent-rgb), 0.1),
    0 16px 48px rgba(0, 0, 0, 0.4),
    0 0 calc(50px * var(--plaque-glow-intensity)) rgba(var(--apex-gold-rgb), 0.5),
    0 0 calc(80px * var(--plaque-glow-intensity)) rgba(56, 189, 248, 0.25);
}


/* ── Field typography (single source of truth) ───────────────────
   All variants inherit these rules. Variant chrome only overrides
   sizing where the density demands it (mini = smaller slug, etc).
   ============================================================ */

/* Slug — slash-name in the tier-accent color (Apex Gold for Ultimate,
   Honor Red is NEVER used for the slug — it's reserved for handles). */
.plaque__slug,
.plaque-skill-name {
  font-family: var(--font-display, 'EB Garamond', Georgia, serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--plaque-accent);
}
/* When emitted as a <button> (profile pages), strip native control
   chrome so it renders identically to the legacy <div>. The hover
   feedback comes from cursor:pointer; the visual styling stays in
   the typography rules above. */
button.plaque__slug {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  display: block;
}
button.plaque__slug:hover,
button.plaque__slug:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
  outline: none;
}
/* Ultimate carries the brand-voice Apex Gold via the tier token. */
.plaque[data-type="ultimate"] .plaque__slug,
.plaque[data-type="ultimate"] .plaque-skill-name {
  color: var(--apex-gold, #fbbf24);
}
/* Level VI (6★) — Transcendent ★ — earns the rainbow shimmer.
   Level V (5★) — Transcendent — remains static Apex Gold. */
.plaque[data-type="ultimate"][data-level="6"] .plaque__slug,
.plaque[data-type="ultimate"][data-level="6"] .plaque-skill-name {
  animation: tree-rainbow-glow 4s linear infinite;
}

/* Title — italic muted serif subtitle. */
.plaque__title,
.plaque-title {
  font-family: var(--font-display, 'EB Garamond', Georgia, serif);
  font-size: 16px;
  font-style: italic;
  color: rgba(226, 232, 240, 0.55);
  line-height: 1.4;
}

/* Handle row — Bricolage; the inner <a class="atlas-handle"> link
   carries the honor red. */
.plaque__handle,
.plaque-contrib-row {
  font-family: var(--font-body, 'Bricolage Grotesque', sans-serif);
  font-size: 13px;
  margin-top: -2px;
}
.plaque__handle .atlas-handle,
.plaque-contrib-row .atlas-handle,
.plaque-contributor {
  color: var(--honor-red, #ef4444);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Description — Bricolage body, line-clamped per variant chrome. */
.plaque__description,
.plaque-description {
  font-family: var(--font-body, 'Bricolage Grotesque', sans-serif);
  font-size: 13px;
  line-height: 1.65;
  color: rgba(226, 232, 240, 0.55);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin: 0;
}

/* Tag chip group. */
.plaque__tags,
.plaque-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.plaque__tag,
.plaque-tag {
  font-family: var(--font-mono, 'Departure Mono', 'JetBrains Mono', ui-monospace, monospace);
  font-size: 10px;
  color: rgba(226, 232, 240, 0.4);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 3px;
  padding: 2px 7px;
}

/* Rank slot — wraps the .rank-badge component. */
.plaque__rank {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.plaque .rank-badge[data-variant="stars"] { font-size: 16px; gap: 4px; }
.plaque .rank-badge[data-variant="full"]  { gap: 12px; }

/* GitHub link + origin star + arrow. */
.plaque__gh-link,
.ns-gh-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(226, 232, 240, 0.5);
  width: 22px;
  height: 22px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.plaque__gh-link:hover,
.ns-gh-link:hover {
  color: var(--text, #e2e8f0);
  background: rgba(255, 255, 255, 0.05);
}
/* SE context: two-icon pair, use tier accent */
.plaque__gh-link.se-github-link {
  width: auto;
  height: auto;
  color: var(--plaque-accent, var(--basic, #38bdf8));
  opacity: .75;
  gap: 2px;
  padding: .15rem .2rem;
}
.plaque__gh-link.se-github-link:hover {
  color: var(--text, #e2e8f0);
  opacity: 1;
  background: rgba(255, 255, 255, 0.07);
}
.plaque__origin,
.ns-origin {
  color: var(--honor-red, #ef4444);
  font-size: 12px;
  line-height: 1;
  margin-left: 4px;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  position: relative;
  cursor: help;
}
.plaque__origin::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  background: rgba(15, 23, 42, 0.95);
  color: #f8fafc;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 10px;
  font-family: var(--font-body, 'Bricolage Grotesque', Inter, system-ui, sans-serif);
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: 0.02em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  border: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 100;
}
.plaque__origin:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-6px);
}
.plaque__arrow,
.ns-lr-arrow {
  color: var(--muted, rgba(226, 232, 240, 0.45));
  font-size: 1.1rem;
  flex-shrink: 0;
  line-height: 1;
}

/* Header cluster. */
.plaque__header,
.plaque-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}

/* Install row — mini-terminal. Used by tile / detail / settled / og. */
.plaque__install-row,
.ns-install-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  font-family: var(--font-mono, 'Departure Mono', 'JetBrains Mono', ui-monospace, monospace);
  font-size: 12px;
  margin-top: auto;
}
.plaque__install-prompt,
.ns-install-prompt {
  color: var(--apex-gold, #fbbf24);
  flex-shrink: 0;
}
.plaque__install-cmd,
.ns-install-cmd-txt {
  color: rgba(226, 232, 240, 0.75);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Foundation icon-state spec alignment for the plaque install-copy button.
   hover = --tier-basic + drop-shadow glow
   active = --apex-gold
   focus-visible = 2px --tier-extra outline
   disabled = muted + opacity .35 */
.plaque__install-copy,
.ns-install-copy {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(226, 232, 240, 0.55);
  border-radius: 3px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s, filter 0.15s;
}
.plaque__install-copy:hover,
.ns-install-copy:hover {
  color: var(--tier-basic);
  border-color: rgba(var(--tier-basic-rgb), 0.45);
  background: rgba(var(--tier-basic-rgb), 0.06);
  filter: drop-shadow(0 0 8px rgba(var(--tier-basic-rgb), 0.5));
}
.plaque__install-copy:active,
.ns-install-copy:active {
  color: var(--apex-gold, #fbbf24);
  border-color: rgba(var(--apex-gold-rgb), 0.45);
  filter: none;
}
.plaque__install-copy:focus-visible,
.hoh-fs-overlay-restore:focus-visible,
.hoh-fs-btn:focus-visible,
.hoh-fs-btn--close:focus-visible,
.hoh-fs-copy-btn:focus-visible,
.share-action:focus-visible,
.share-modal__close:focus-visible {
  outline: 2px solid var(--tier-extra);
  outline-offset: 2px;
}
.plaque__install-copy[disabled],
.ns-install-copy[disabled] {
  color: var(--muted);
  opacity: .35;
  cursor: not-allowed;
  filter: none;
}

/* Evidence chip (settled only) — neutral ledger pill. */
.plaque__evidence,
.plaque-evidence {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono, 'Departure Mono', 'JetBrains Mono', ui-monospace, monospace);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.5);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  padding: 4px 10px;
  align-self: flex-start;
}

/* Gold underline pulse (settled only). */
.plaque__underline,
.plaque-underline {
  height: 2px;
  width: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    var(--apex-gold, #fbbf24) 40%,
    var(--apex-gold, #fbbf24) 60%,
    transparent
  );
  opacity: 0;
  transform: scaleX(0.3);
}
.plaque__underline.plaque-underline--settled,
.plaque-underline--settled {
  opacity: 0.5;
  transform: scaleX(1);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Named-slug context — keeps the .named-slug class hooks working
   on links inside the slug span (legacy callers still pass it).
   Per DESIGN.md §Naming Conventions: "Skill names after the slash:
   colored by rank level from meta.json level colors". Override the
   tier-based --plaque-accent with the rank-level color token. */
.plaque__slug.named-slug,
.plaque-skill-name.named-slug {
  font-family: var(--font-display, 'EB Garamond', Georgia, serif);
}
/* Rank-level color for named-slug skill names (levels 0–6).
   Also matches per-row scope inside .plaque--mini-stack so each stacked
   skill row resolves its OWN tier/level color (Phase D1). */
.plaque[data-level="0"] .plaque-skill-name.named-slug,
.plaque__stack-row[data-level="0"] .plaque-skill-name.named-slug { color: var(--rank-0, #94a3b8); }
.plaque[data-level="1"] .plaque-skill-name.named-slug,
.plaque__stack-row[data-level="1"] .plaque-skill-name.named-slug { color: var(--rank-1, #38bdf8); }
.plaque[data-level="2"] .plaque-skill-name.named-slug,
.plaque__stack-row[data-level="2"] .plaque-skill-name.named-slug { color: var(--rank-2, #63cab7); }
.plaque[data-level="3"] .plaque-skill-name.named-slug,
.plaque__stack-row[data-level="3"] .plaque-skill-name.named-slug { color: var(--rank-3, #a78bfa); }
.plaque[data-level="4"] .plaque-skill-name.named-slug,
.plaque__stack-row[data-level="4"] .plaque-skill-name.named-slug { color: var(--rank-4, #e879f9); }
.plaque[data-level="5"] .plaque-skill-name.named-slug,
.plaque__stack-row[data-level="5"] .plaque-skill-name.named-slug { color: var(--rank-5, #fbbf24); }
.plaque[data-level="6"] .plaque-skill-name.named-slug,
.plaque__stack-row[data-level="6"] .plaque-skill-name.named-slug { color: var(--rank-6, #fbbf24); }

/* Tier-aware overrides — emitted AFTER the rank-level rules so the tier
   color wins for Unique (deep violet) and Ultimate (apex gold). Without
   these, a Unique skill at rank IV (Hardened) would render fuchsia from
   the rank-4 rule above instead of its tier-native deep violet. */
.plaque[data-type="unique"] .plaque__slug.named-slug,
.plaque[data-type="unique"] .plaque-skill-name.named-slug,
.plaque__stack-row[data-type="unique"] .plaque__slug.named-slug,
.plaque__stack-row[data-type="unique"] .plaque-skill-name.named-slug {
  color: var(--tier-unique, #7c3aed);
}
/* Unique type always overrides level-based rank color on stars */
.plaque[data-type="unique"] .rank-badge__star[data-on],
.plaque__stack-row[data-type="unique"] .rank-badge__star[data-on] {
  color: var(--tier-unique, #7c3aed);
  text-shadow: 0 0 6px rgba(var(--tier-unique-rgb), .5);
}
.plaque[data-type="unique"] .rank-badge__star[data-off],
.plaque__stack-row[data-type="unique"] .rank-badge__star[data-off] {
  color: rgba(var(--tier-unique-rgb), .15);
}
.plaque[data-type="ultimate"] .plaque__slug.named-slug,
.plaque[data-type="ultimate"] .plaque-skill-name.named-slug,
.plaque__stack-row[data-type="ultimate"] .plaque__slug.named-slug,
.plaque__stack-row[data-type="ultimate"] .plaque-skill-name.named-slug {
  color: var(--apex-gold, #fbbf24);
}
.plaque[data-type="ultimate"][data-level="6"] .plaque__slug.named-slug,
.plaque[data-type="ultimate"][data-level="6"] .plaque-skill-name.named-slug,
.plaque__stack-row[data-type="ultimate"][data-level="6"] .plaque__slug.named-slug,
.plaque__stack-row[data-type="ultimate"][data-level="6"] .plaque-skill-name.named-slug {
  animation: tree-rainbow-glow 4s linear infinite;
}


/* ── .plaque-orb — canonical tier glyph orb ──────────────────────
   Default 36 px; modifiers --sm (24px) and --lg (52px). Shared with
   .se-node-orb in styles.css via comma-merged tier-colour rules.
   ============================================================ */
.plaque-orb {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}
.plaque-orb--sm { width: 24px; height: 24px; }
.plaque-orb--lg { width: 52px; height: 52px; }

/* Stage 4 — orb gradients reference tier tokens (--tier-<name>) for the
   dominant colour stop, then color-mix with white/black for the highlight
   and shadow stops. Acceptance: no hardcoded tier hex survives in plaque.css. */
.plaque-orb--basic,
.se-node-orb--basic {
  background: radial-gradient(circle at 35% 35%,
    color-mix(in srgb, var(--tier-basic) 35%, #fff) 0%,
    var(--tier-basic) 60%,
    color-mix(in srgb, var(--tier-basic) 75%, #000) 100%);
  box-shadow: 0 0 12px rgba(var(--tier-basic-rgb), 0.4);
}
.plaque-orb--extra,
.se-node-orb--extra {
  background: radial-gradient(circle at 35% 35%,
    color-mix(in srgb, var(--tier-extra) 35%, #fff) 0%,
    var(--tier-extra) 60%,
    color-mix(in srgb, var(--tier-extra) 60%, var(--tier-unique)) 100%);
  box-shadow: 0 0 12px rgba(var(--tier-extra-rgb), 0.4);
}
.plaque-orb--ultimate,
.se-node-orb--ultimate {
  background: radial-gradient(circle at 35% 35%,
    color-mix(in srgb, var(--tier-ultimate) 30%, #fff) 0%,
    var(--tier-ultimate) 60%,
    color-mix(in srgb, var(--tier-ultimate) 70%, #000) 100%);
  box-shadow: 0 0 12px rgba(var(--tier-ultimate-rgb), 0.4);
}
.plaque-orb--unique,
.se-node-orb--unique {
  background: radial-gradient(circle at 50% 50%,
    #000 55%,
    var(--tier-unique) 80%,
    color-mix(in srgb, var(--tier-unique) 70%, #000) 100%);
  box-shadow: 0 0 14px rgba(var(--tier-unique-rgb), 0.5), inset 0 0 6px rgba(var(--tier-unique-rgb), 0.3);
}
.plaque-orb--vi,
.se-node-orb--vi {
  background: radial-gradient(circle at 35% 35%,
    #fff 40%,
    color-mix(in srgb, var(--tier-ultimate) 30%, #fff) 70%,
    var(--tier-ultimate)) !important;
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.6), 0 0 40px rgba(var(--tier-ultimate-rgb), 0.35) !important;
}


/* ── Apex (6★) rainbow shimmer animation ────────────────────────
   Runs on all six variants identically. The shadow stacks the
   per-tier hover glow underneath when hovered; on its own it's
   the resting Apex affordance.
   ============================================================ */
.plaque--apex-vi {
  animation: plaque-vi-edge 3s linear infinite;
}

/* Apex shimmer cycles through tier RGBs (token-driven) with two non-tier
   accents (rank-3 violet, Honor Red) so the rainbow reads as the canonical
   tier ladder plus its progression accents. */
@keyframes plaque-vi-edge {
  0%   { box-shadow: 0 0 0 1px rgba(var(--apex-gold-rgb), 0.06), 0 24px 64px rgba(0,0,0,0.5), 0 0 30px rgba(var(--tier-basic-rgb),0.3); }
  16%  { box-shadow: 0 0 0 1px rgba(var(--apex-gold-rgb), 0.06), 0 24px 64px rgba(0,0,0,0.5), 0 0 30px rgba(167,139,250,0.3); }
  33%  { box-shadow: 0 0 0 1px rgba(var(--apex-gold-rgb), 0.06), 0 24px 64px rgba(0,0,0,0.5), 0 0 30px rgba(var(--apex-gold-rgb),0.45); }
  50%  { box-shadow: 0 0 0 1px rgba(var(--apex-gold-rgb), 0.06), 0 24px 64px rgba(0,0,0,0.5), 0 0 30px rgba(239,68,68,0.3); }
  66%  { box-shadow: 0 0 0 1px rgba(var(--apex-gold-rgb), 0.06), 0 24px 64px rgba(0,0,0,0.5), 0 0 30px rgba(var(--tier-extra-rgb),0.3); }
  83%  { box-shadow: 0 0 0 1px rgba(var(--apex-gold-rgb), 0.06), 0 24px 64px rgba(0,0,0,0.5), 0 0 30px rgba(52,211,153,0.25); }
  100% { box-shadow: 0 0 0 1px rgba(var(--apex-gold-rgb), 0.06), 0 24px 64px rgba(0,0,0,0.5), 0 0 30px rgba(var(--tier-basic-rgb),0.3); }
}

/* ── Apex 6★ hover — white edge glow + triangular corner shards ─
   On hover the rainbow shimmer gives way to a stark white blaze.
   Triangular crystal shards appear at all four corners via
   ::before / ::after pseudo-elements with clip-path polygons.
   The card's overflow:hidden keeps the shards within the radius.
   ============================================================ */
.plaque--apex-vi:hover {
  animation-play-state: paused;
  border-color: rgba(255, 255, 255, 0.75) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.65),
    0 0 12px  2px rgba(255, 255, 255, 0.55),
    0 0 32px  6px rgba(255, 255, 255, 0.25),
    0 0 64px 10px rgba(255, 255, 255, 0.12),
    0 24px 64px rgba(0, 0, 0, 0.6) !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* Triangular corner shards — two pseudo-elements each carry two
   triangles (top-left + bottom-right via ::before, top-right +
   bottom-left via ::after) using multi-stop linear-gradient fills.
   Variants whose ::before/::after are already occupied by gold corner
   ornaments (--settled, --og) use a different inner-glow strategy. */

/* ── Shard pseudo-element base — variants with free pseudo-elements:
   --tile, --row, --mini, --detail */
.plaque--tile.plaque--apex-vi::before,
.plaque--tile.plaque--apex-vi::after,
.plaque--row.plaque--apex-vi::before,
.plaque--row.plaque--apex-vi::after,
.plaque--mini.plaque--apex-vi::before,
.plaque--mini.plaque--apex-vi::after,
.plaque--detail.plaque--apex-vi::before,
.plaque--detail.plaque--apex-vi::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 1;
  border-radius: inherit;
}

/* ::before — top-left shard + bottom-right shard */
.plaque--tile.plaque--apex-vi::before,
.plaque--row.plaque--apex-vi::before,
.plaque--mini.plaque--apex-vi::before,
.plaque--detail.plaque--apex-vi::before {
  background:
    /* top-left triangle */
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.18) 22%,
      transparent 40%
    ),
    /* bottom-right triangle */
    linear-gradient(
      315deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.18) 22%,
      transparent 40%
    );
}

/* ::after — top-right shard + bottom-left shard */
.plaque--tile.plaque--apex-vi::after,
.plaque--row.plaque--apex-vi::after,
.plaque--mini.plaque--apex-vi::after,
.plaque--detail.plaque--apex-vi::after {
  background:
    /* top-right triangle */
    linear-gradient(
      225deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.18) 22%,
      transparent 40%
    ),
    /* bottom-left triangle */
    linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.18) 22%,
      transparent 40%
    );
}

/* Reveal shards on hover with a brief flare animation */
.plaque--tile.plaque--apex-vi:hover::before,
.plaque--tile.plaque--apex-vi:hover::after,
.plaque--row.plaque--apex-vi:hover::before,
.plaque--row.plaque--apex-vi:hover::after,
.plaque--mini.plaque--apex-vi:hover::before,
.plaque--mini.plaque--apex-vi:hover::after,
.plaque--detail.plaque--apex-vi:hover::before,
.plaque--detail.plaque--apex-vi:hover::after {
  opacity: 1;
  animation: apex-shard-flare 0.5s ease-out forwards;
}

/* ── --settled: pseudo-elements taken by gold corner ornaments.
   Inner shimmer delivered via inset box-shadow instead. */
.plaque--settled.plaque--apex-vi:hover {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.65),
    0 0 12px  2px rgba(255, 255, 255, 0.55),
    0 0 32px  6px rgba(255, 255, 255, 0.25),
    0 0 64px 10px rgba(255, 255, 255, 0.12),
    0 24px 64px rgba(0, 0, 0, 0.6),
    inset 0 0 40px rgba(255, 255, 255, 0.06),
    inset 0 0 80px rgba(255, 255, 255, 0.03) !important;
}

/* ── --og: outer glow only — no inner shards (pseudo-elements
   are gold ornaments; inner shimmer excluded by design). */
.plaque--og.plaque--apex-vi:hover {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.65),
    0 0 12px  2px rgba(255, 255, 255, 0.55),
    0 0 32px  6px rgba(255, 255, 255, 0.25),
    0 0 64px 10px rgba(255, 255, 255, 0.12),
    0 24px 64px rgba(0, 0, 0, 0.6) !important;
}

@keyframes apex-shard-flare {
  0%   { opacity: 0;    transform: scale(1.04); filter: brightness(2.5); }
  35%  { opacity: 1;    transform: scale(1);    filter: brightness(1.6); }
  100% { opacity: 0.85; transform: scale(1);    filter: brightness(1);   }
}


/* ============================================================
   Variant chrome — layout + spacing + slot visibility only.
   ============================================================ */

/* ── .plaque--mini — Hall of Heroes track plate ─────────────────
   200 px wide, ~220 px tall, centre-aligned single column. Drop
   description / tags / install row. Glow intensity 50%.
   ============================================================ */
.plaque--mini {
  --plaque-glow-intensity: 0.5;
  width: 200px;
  max-width: 200px;
  height: auto;
  min-height: 220px;
  padding: 16px;
  align-items: center;
  text-align: center;
  gap: 0.55rem;
  flex-shrink: 0;
}
.plaque--mini .plaque__slug,
.plaque--mini .plaque-skill-name {
  font-size: 18px;
}
.plaque--mini .plaque__handle,
.plaque--mini .plaque-contrib-row {
  font-size: 13px;
}
.plaque--mini .plaque .rank-badge[data-variant="stars"],
.plaque--mini .rank-badge[data-variant="stars"] {
  font-size: 12px;
  gap: 2px;
}
.plaque--mini .rank-badge__star { font-size: 12px; }
/* Mini drops description + tags + install row by NOT emitting them. */


/* ── .plaque--mini-stack — HoH plate listing N skills per contributor ──
   Wider than .plaque--mini (single skill) so multiple slash-skill rows
   can sit on one line each. Header (orb + handle + share button) is one
   horizontal row; body is a vertical list of .plaque__stack-row entries,
   each carrying its OWN data-type / data-level so per-row CSS resolves
   the correct slug colour (see slug rules above). +N more overflow row
   sits at the bottom in muted text.
   ============================================================ */
.plaque--mini-stack {
  width: 260px;
  max-width: 260px;
  min-height: 220px;
  padding: 16px;
  gap: 0.6rem;
  flex-shrink: 0;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
}
.plaque--mini-stack .plaque__stack-header {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
.plaque--mini-stack .plaque__stack-header .plaque-orb {
  flex-shrink: 0;
}
.plaque--mini-stack .plaque__stack-header .plaque__handle,
.plaque--mini-stack .plaque__stack-header .plaque-contrib-row {
  flex: 1 1 auto;
  margin-top: 0;
  font-size: 13px;
}
.plaque--mini-stack .plaque__stack-header .plaque__fs-btn {
  position: static;
  flex-shrink: 0;
}
.plaque--mini-stack .plaque__stack-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.plaque--mini-stack .plaque__stack-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.18s ease, border-color 0.18s ease;
}
.plaque--mini-stack .plaque__stack-row:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
.plaque--mini-stack .plaque__stack-glyph {
  font-size: 14px;
  flex-shrink: 0;
  width: 16px;
  text-align: center;
  line-height: 1;
}
.plaque--mini-stack .plaque__stack-row .plaque__slug,
.plaque--mini-stack .plaque__stack-row .plaque-skill-name {
  font-size: 16px;
  flex: 1 1 auto;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.plaque--mini-stack .plaque__stack-rank {
  flex-shrink: 0;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
}
.plaque--mini-stack .plaque__stack-rank .rank-badge[data-variant="stars"],
.plaque--mini-stack .plaque__stack-rank .rank-badge {
  font-size: 11px;
  gap: 1px;
}
.plaque--mini-stack .plaque__stack-rank .rank-badge__star {
  font-size: 10px;
}
.plaque--mini-stack .plaque__stack-more {
  font-size: 11px;
  color: var(--muted);
  padding: 4px 8px 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  letter-spacing: 0.02em;
}


/* ── .plaque--hall — Hall of Heroes redesigned plate ────────────
   Per-contributor plate with a celestial-atlas avatar medallion at
   the top, the primary skill OG art echoed faintly behind the body, an
   @handle row in Honor Red, a Roman-numeral rank divider, and up
   to N skill rows reusing the .plaque__stack-row markup so per-
   row tier colours just work.

   Two sizes: standard (260px wide, mono handle, 64px crest) and
   featured (full-width, Garamond display handle, 90px crest).
   Apex (6★) plates inherit the existing plaque--apex-vi rainbow
   shimmer; non-apex featured plates carry a slow conic edge sweep.
   ============================================================ */
.plaque--hall {
  --plaque-glow-intensity: 0.5;
  --hall-crest-size: 48px;
  width: 100%;
  min-height: 0;
  height: fit-content;
  align-self: start;
  padding: 14px 14px 12px;
  gap: 0.4rem;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  overflow: hidden;
  border-color: rgba(var(--plaque-accent-rgb), 0.32);
  background:
    radial-gradient(circle at 50% -20%, rgba(var(--plaque-accent-rgb), 0.08), transparent 60%),
    var(--surface, #0f172a);
}

.plaque--hall-featured {
  --hall-crest-size: 68px;
  min-height: 0;
  padding: 18px 18px 14px;
  gap: 0.5rem;
}

/* Backdrop — faint blurred copy of the primary skill OG art. Fades
   in only after the <img> loads (data-art-loaded=true) so a 404
   never leaves a half-rendered fragment. */
.plaque--hall .plaque__hall-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.6s ease-out;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
}
.plaque--hall[data-art-loaded="true"] .plaque__hall-backdrop {
  opacity: 0.08;
}
.plaque--hall-featured[data-art-loaded="true"] .plaque__hall-backdrop {
  opacity: 0.11;
}
.plaque--hall .plaque__hall-backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(14px) saturate(1.15);
  display: block;
}
@media (prefers-reduced-motion: no-preference) {
  .plaque--hall:hover .plaque__hall-backdrop {
    transform: scale(1.06) translateY(-2px);
  }
}

/* Content sits above the backdrop. */
.plaque--hall .plaque__hall-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.plaque--hall-featured .plaque__hall-content {
  gap: 0.5rem;
}

/* Crest medallion — circular framed contributor avatar, with the
   tier glyph as a small badge bottom-right. */
.plaque--hall .plaque__hall-crest {
  position: relative;
  width: var(--hall-crest-size);
  height: var(--hall-crest-size);
  margin: 0 auto;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--plaque-accent-rgb), 0.6);
  background:
    radial-gradient(circle at 30% 30%, rgba(var(--plaque-accent-rgb), 0.18), transparent 65%),
    rgba(0, 0, 0, 0.55);
  box-shadow:
    0 0 18px rgba(var(--plaque-accent-rgb), 0.32),
    inset 0 0 12px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.plaque--hall-featured .plaque__hall-crest {
  margin-top: 2px;
}
.plaque--hall .plaque__hall-crest-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.plaque--hall .plaque__hall-crest[data-crest-fail="true"] {
  /* Render a starburst ring when the OG fetch fails so the plate still
     reads as ceremonial (no broken image). */
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(var(--plaque-accent-rgb), 0.55) 0 8deg,
      transparent 8deg 24deg
    ),
    rgba(0, 0, 0, 0.6);
}
.plaque--hall .plaque__hall-crest-glyph {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  line-height: 1;
  color: var(--plaque-accent);
  background: var(--bg, #030712);
  border: 1.5px solid rgba(var(--plaque-accent-rgb), 0.7);
  box-shadow: 0 0 7px rgba(var(--plaque-accent-rgb), 0.5);
  font-family: var(--font-mono, ui-monospace, monospace);
}
.plaque--hall-featured .plaque__hall-crest-glyph {
  width: 24px;
  height: 24px;
  font-size: 13px;
}

@media (prefers-reduced-motion: no-preference) {
  .plaque--hall:hover .plaque__hall-crest {
    transform: scale(1.05);
    box-shadow:
      0 0 36px rgba(var(--plaque-accent-rgb), 0.55),
      inset 0 0 14px rgba(0, 0, 0, 0.55);
  }
  .plaque--hall-featured .plaque__hall-crest {
    animation: hall-crest-breath 4.6s ease-in-out infinite;
  }
}

@keyframes hall-crest-breath {
  0%, 100% {
    box-shadow:
      0 0 22px rgba(var(--plaque-accent-rgb), 0.35),
      inset 0 0 14px rgba(0, 0, 0, 0.55);
  }
  50% {
    box-shadow:
      0 0 30px rgba(var(--plaque-accent-rgb), 0.5),
      inset 0 0 14px rgba(0, 0, 0, 0.55);
  }
}

/* Meta row — handle (Honor Red via existing atlas-handle) + share btn. */
.plaque--hall .plaque__hall-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  text-align: center;
  margin-top: 2px;
}
.plaque--hall .plaque__hall-meta .plaque__handle,
.plaque--hall .plaque__hall-meta .plaque-contrib-row {
  flex: 0 1 auto;
  margin-top: 0;
  font-size: 0.85rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.1;
}
.plaque--hall-featured .plaque__hall-meta .plaque__handle,
.plaque--hall-featured .plaque__hall-meta .plaque-contrib-row {
  font-family: var(--font-display, 'EB Garamond', Georgia, serif);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0;
}
.plaque--hall .plaque__hall-meta .plaque__fs-btn {
  position: absolute;
  top: -4px;
  right: 0;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.55);
  color: rgba(226, 232, 240, 0.65);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease,
    transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  z-index: 5;
}
.plaque--hall .plaque__hall-meta .plaque__fs-btn .ico,
.plaque--hall .plaque__hall-meta .plaque__fs-btn svg {
  width: 14px;
  height: 14px;
  display: block;
}
.plaque--hall .plaque__hall-meta .plaque__fs-btn:hover,
.plaque--hall .plaque__hall-meta .plaque__fs-btn:focus-visible {
  color: rgba(var(--plaque-accent-rgb, 245, 158, 11), 1);
  border-color: rgba(var(--plaque-accent-rgb, 245, 158, 11), 0.5);
  background: rgba(var(--plaque-accent-rgb, 245, 158, 11), 0.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(var(--plaque-accent-rgb, 245, 158, 11), 0.18);
  outline: none;
}
.plaque--hall .plaque__hall-meta .plaque__fs-btn:focus-visible {
  outline: 2px solid rgba(var(--plaque-accent-rgb, 245, 158, 11), 0.55);
  outline-offset: 2px;
}
/* Featured plates get a slightly larger, more confident hit target. */
.plaque--hall-featured .plaque__hall-meta .plaque__fs-btn {
  width: 32px;
  height: 32px;
  top: -6px;
  border-radius: 7px;
}
.plaque--hall-featured .plaque__hall-meta .plaque__fs-btn .ico,
.plaque--hall-featured .plaque__hall-meta .plaque__fs-btn svg {
  width: 16px;
  height: 16px;
}

/* Roman-numeral rank divider — Garamond italic between two hairlines. */
.plaque--hall .plaque__hall-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--muted, #64748b);
}
.plaque--hall .plaque__hall-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--plaque-accent-rgb), 0.32) 50%,
    transparent 100%
  );
}
.plaque--hall .plaque__hall-divider-numeral {
  font-family: var(--font-display, 'EB Garamond', Georgia, serif);
  font-style: italic;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  color: rgba(var(--plaque-accent-rgb), 0.85);
  text-shadow: 0 0 6px rgba(var(--plaque-accent-rgb), 0.35);
  flex-shrink: 0;
  line-height: 1;
}
.plaque--hall-featured .plaque__hall-divider-numeral {
  font-size: 1rem;
}

/* Skill rows — reuse .plaque__stack-row from .plaque--mini-stack but
   override row backgrounds so the faint backdrop doesn't bleed through
   the row labels. Featured plates get a touch more breathing room. */
.plaque--hall .plaque__hall-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 0;
}
.plaque--hall .plaque__stack-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(var(--plaque-accent-rgb), 0.08);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.plaque--hall .plaque__stack-row:hover {
  background: rgba(0, 0, 0, 0.45);
  border-color: rgba(var(--plaque-accent-rgb), 0.28);
  transform: translateX(2px);
}
.plaque--hall-featured .plaque__stack-row {
  padding: 6px 10px;
}
.plaque--hall .plaque__stack-glyph {
  font-size: 13px;
  flex-shrink: 0;
  width: 14px;
  text-align: center;
  line-height: 1;
}
.plaque--hall .plaque__stack-row .plaque__slug,
.plaque--hall .plaque__stack-row .plaque-skill-name {
  font-size: 14px;
  flex: 1 1 auto;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.plaque--hall-featured .plaque__stack-row .plaque__slug {
  font-size: 16px;
}

/* Slug colour follows the row's rank, not its tier — the existing
   tier-aware override (plaque.css ~line 565) forces every Unique
   slug to deep violet and every non-6★ Ultimate slug to apex gold,
   which mismatches the rank-coloured stars right next to them. The
   rules below restore parity by colouring the slug from the row's
   rank token; 6★ Ultimate alone retains apex gold + the rainbow
   cycle so the apex affordance stays distinct. */
.plaque--hall .plaque__stack-row[data-level="0"] .plaque-skill-name.named-slug,
.plaque--hall .plaque__stack-row[data-level="0"] .plaque__slug.named-slug { color: var(--rank-0, #94a3b8); }
.plaque--hall .plaque__stack-row[data-level="1"] .plaque-skill-name.named-slug,
.plaque--hall .plaque__stack-row[data-level="1"] .plaque__slug.named-slug { color: var(--rank-1, #38bdf8); }
.plaque--hall .plaque__stack-row[data-level="2"] .plaque-skill-name.named-slug,
.plaque--hall .plaque__stack-row[data-level="2"] .plaque__slug.named-slug { color: var(--rank-2, #63cab7); }
.plaque--hall .plaque__stack-row[data-level="3"] .plaque-skill-name.named-slug,
.plaque--hall .plaque__stack-row[data-level="3"] .plaque__slug.named-slug { color: var(--rank-3, #a78bfa); }
.plaque--hall .plaque__stack-row[data-level="4"] .plaque-skill-name.named-slug,
.plaque--hall .plaque__stack-row[data-level="4"] .plaque__slug.named-slug { color: var(--rank-4, #e879f9); }
.plaque--hall .plaque__stack-row[data-level="5"] .plaque-skill-name.named-slug,
.plaque--hall .plaque__stack-row[data-level="5"] .plaque__slug.named-slug { color: var(--rank-5, #fbbf24); }
/* 6★ Ultimate retains apex gold + rainbow — preserves the existing
   tree-rainbow-glow animation on .plaque__stack-row[data-type="ultimate"][data-level="6"]. */
.plaque--hall .plaque__stack-row[data-level="6"][data-type="ultimate"] .plaque-skill-name.named-slug,
.plaque--hall .plaque__stack-row[data-level="6"][data-type="ultimate"] .plaque__slug.named-slug { color: var(--apex-gold, #fbbf24); }
/* Non-Ultimate 6★ (e.g. a hypothetical Unique 6★) just uses rank-6 amber. */
.plaque--hall .plaque__stack-row[data-level="6"]:not([data-type="ultimate"]) .plaque-skill-name.named-slug,
.plaque--hall .plaque__stack-row[data-level="6"]:not([data-type="ultimate"]) .plaque__slug.named-slug { color: var(--rank-6, #fbbf24); }

/* Unique tier exception — deep violet wins over the rank colour for
   every Unique skill row regardless of rank. The Unique branch is the
   standalone-mastery tier (a Basic that ascended without ever fusing)
   and must read in its tier-native deep violet across surfaces. The
   stars in this row also get deep violet (overriding rank-4 fuchsia)
   so slug + stars stay in lockstep. */
.plaque--hall .plaque__stack-row[data-type="unique"] .plaque-skill-name.named-slug,
.plaque--hall .plaque__stack-row[data-type="unique"] .plaque__slug.named-slug {
  color: var(--tier-unique, #7c3aed);
}
.plaque--hall .plaque__stack-row[data-type="unique"] .rank-badge__star[data-on] {
  color: var(--tier-unique, #7c3aed);
  text-shadow: 0 0 6px rgba(var(--tier-unique-rgb), .5);
}
.plaque--hall .plaque__stack-row[data-type="unique"] .rank-badge__star[data-off] {
  color: rgba(var(--tier-unique-rgb), .15);
}

.plaque--hall .plaque__stack-rank {
  flex-shrink: 0;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
}
.plaque--hall .plaque__stack-rank .rank-badge[data-variant="stars"],
.plaque--hall .plaque__stack-rank .rank-badge {
  font-size: 11px;
  gap: 1px;
}
.plaque--hall .plaque__stack-rank .rank-badge__star {
  font-size: 11px;
}
.plaque--hall-featured .plaque__stack-rank .rank-badge,
.plaque--hall-featured .plaque__stack-rank .rank-badge__star {
  font-size: 12px;
}
.plaque--hall .plaque__stack-more {
  font-size: 10.5px;
  color: var(--muted);
  padding: 2px 8px 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  letter-spacing: 0.04em;
  text-align: center;
}

/* Skill-row scroll-reveal cascade — picks up the existing .reveal
   IntersectionObserver on #hall-of-heroes; rows light up top-to-bottom.
   The default state is fully visible; the cascade only animates when
   the section first scrolls into view (initial transform). */
@media (prefers-reduced-motion: no-preference) {
  .plaque--hall .plaque__stack-row {
    animation: hall-row-rise 0.45s ease-out backwards;
    animation-delay: calc(var(--row-index, 0) * 70ms);
  }
}
@keyframes hall-row-rise {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Featured edge sweep (non-apex only) — slow conic edge animation
   driven by the plaque accent. Apex 6★ plates already run the rainbow
   shimmer (.plaque--apex-vi keyframes) so we explicitly skip them. */
.plaque--hall-featured:not(.plaque--apex-vi)::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from 0deg,
    rgba(var(--plaque-accent-rgb), 0.0) 0deg,
    rgba(var(--plaque-accent-rgb), 0.55) 80deg,
    rgba(var(--plaque-accent-rgb), 0.0) 160deg,
    rgba(var(--plaque-accent-rgb), 0.0) 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}
@media (prefers-reduced-motion: no-preference) {
  .plaque--hall-featured:not(.plaque--apex-vi)::after {
    animation: hall-edge-sweep 12s linear infinite;
  }
}
@keyframes hall-edge-sweep {
  to { transform: rotate(360deg); }
}

/* Apex 6★ on .plaque--hall — register the variant for shard support
   (matches the existing rule pattern at ~plaque.css:692). The shimmer
   itself is inherited from .plaque--apex-vi. */
.plaque--hall.plaque--apex-vi::before,
.plaque--hall.plaque--apex-vi::after {
  /* Apex hall plates lean on the shared rainbow shimmer; the conic
     featured-edge sweep above is suppressed by :not(.plaque--apex-vi). */
}


/* ── .plaque--tile — Named Skills Explorer tile ─────────────────
   Grid cell, min-height 280px. Header row hosts orb + level chip
   + origin + gh. Body stacks vertically; install row is sticky-
   bottom via margin-top: auto on .plaque__install-row.
   ============================================================ */
.plaque--tile {
  width: 100%;
  max-width: 100%;
  min-height: 280px;
  padding: 20px;
  gap: 12px;
}
.plaque--tile .plaque__header,
.plaque--tile .plaque-header {
  justify-content: space-between;
  margin-bottom: 0;
}
.plaque--tile .plaque__description,
.plaque--tile .plaque-description {
  -webkit-line-clamp: 3;
}
.plaque--tile .plaque__tags,
.plaque--tile .plaque-tags {
  max-height: 28px;
  overflow: hidden;
}


/* ── .plaque--row — Named Skills Explorer list row ──────────────
   Horizontal flex. ~72 px tall. Description hidden in CSS only.
   Glow intensity 25%.
   ============================================================ */
.plaque--row {
  --plaque-glow-intensity: 0.25;
  width: 100%;
  max-width: 100%;
  min-height: 72px;
  padding: 14px 18px;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}
.plaque--row .plaque__slug,
.plaque--row .plaque-skill-name {
  font-size: 18px;
  flex: 0 1 auto;
  white-space: nowrap;
}
.plaque--row .plaque__title,
.plaque--row .plaque-title {
  font-size: 14px;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.plaque--row .plaque__handle,
.plaque--row .plaque-contrib-row {
  font-size: 12px;
  margin-top: 0;
  flex-shrink: 0;
}
.plaque--row .plaque__tags,
.plaque--row .plaque-tags {
  flex-shrink: 0;
  max-width: 240px;
  overflow: hidden;
}
.plaque--row .plaque__description,
.plaque--row .plaque-description {
  display: none; /* CSS-only collapse; markup still present */
}
.plaque--row .plaque__install-row,
.plaque--row .ns-install-row {
  /* Surface the install command in list rows — was display:none, but
     hiding the canonical CTA in a "scan-all" view defeats the point of
     the list. Compact horizontal variant: smaller font, single line,
     truncates instead of wrapping. */
  display: inline-flex;
  flex: 0 1 auto;
  max-width: 320px;
  font-size: 11px;
  padding: 4px 8px;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
}
.plaque--row .plaque__install-cmd,
.plaque--row .ns-install-cmd-txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 700px) {
  .plaque--row .plaque__install-row,
  .plaque--row .ns-install-row {
    display: none; /* density-collapse on narrow viewports */
  }
  /* Mobile list rows: prevent rightward bleed from no-wrap children, and
     let the slug shrink with ellipsis instead of pushing past the edge.
     Without min-width: 0 on flex children, white-space: nowrap forces
     overflow rather than shrink — that's what made rows look uncentered
     (content shifted out of the padded box). */
  .plaque--row {
    overflow: hidden;
    padding: .65rem .85rem;
    gap: .5rem;
    min-height: 60px;
  }
  .plaque--row .plaque__slug,
  .plaque--row .plaque-skill-name {
    font-size: 15px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .plaque--row .plaque__title,
  .plaque--row .plaque-title {
    font-size: 12px;
    min-width: 0;
  }
  .plaque--row .plaque__handle,
  .plaque--row .plaque-contrib-row {
    font-size: 11px;
    min-width: 0;
    max-width: 35vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Phone (≤480px): drop the secondary fields entirely so the slug + rank
   chip + arrow always fit on a single line. */
@media (max-width: 480px) {
  .plaque--row .plaque__title,
  .plaque--row .plaque-title,
  .plaque--row .plaque__handle,
  .plaque--row .plaque-contrib-row {
    display: none;
  }
  .plaque--row .plaque__slug,
  .plaque--row .plaque-skill-name {
    font-size: 14px;
    flex: 1 1 auto;
  }
  .plaque--row {
    padding: .55rem .75rem;
    gap: .4rem;
  }
}


/* ── .plaque--detail — Skill Explorer modal hero ────────────────
   Two-column layout. Collapses to one column ≤ 700px.
   ============================================================ */
.plaque--detail {
  width: 100%;
  max-width: 100%;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 32px;
  align-items: start;
  cursor: default; /* not click-to-explore — it IS the explorer */
}
.plaque--detail:hover {
  transform: none;
}
.plaque--detail .plaque__gh-link {
  position: static;
  width: 24px;
  height: 24px;
}
.plaque--detail .plaque__gh-row {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  display: flex;
  align-items: center;
  gap: 6px;
}
.plaque--detail .plaque__share-btn {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: rgba(226, 232, 240, 0.45);
  cursor: pointer;
  padding: 0;
  transition: color 0.18s ease;
}
.plaque--detail .plaque__share-btn:hover {
  color: rgba(226, 232, 240, 0.9);
}
.plaque--detail .plaque__col,
.plaque--detail .plaque-detail-left,
.plaque--detail .plaque-detail-right {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  min-width: 0;
}
.plaque--detail .plaque__slug,
.plaque--detail .plaque-skill-name {
  font-size: 32px;
}
.plaque--detail .plaque__description,
.plaque--detail .plaque-description {
  font-size: 14px;
  -webkit-line-clamp: unset;
  display: block;
}

/* Detail modal: trust notch is always expanded — full-width bar showing grade + MAG */
.plaque--detail .plaque__trust-notch {
  height: 36px !important;
  grid-column: 1 / -1;    /* span both columns */
  margin-bottom: calc(-1 * 28px);
  margin-left: calc(-1 * 32px);
  width: calc(100% + 2 * 32px);
  transition: none;
  /* Mobile/medium: allow the bar to grow vertically so the long
     "PLATINUM (S) · MAG xxx" label wraps or fits without overflow. */
  height: auto !important;
  min-height: 36px;
  padding: 6px 12px;
}
.plaque--detail .trust-notch-label {
  opacity: 1 !important;
  font-size: 11px;
  letter-spacing: 0.14em;
  transition: none;
  white-space: normal;          /* allow wrap on narrow screens */
  text-align: center;
  line-height: 1.25;
  max-width: 100%;
  word-break: break-word;
}

@media (max-width: 720px) {
  .plaque--detail .trust-notch-label {
    font-size: 10px;
    letter-spacing: 0.1em;
  }
}
@media (max-width: 480px) {
  .plaque--detail .trust-notch-label {
    font-size: 9px;
    letter-spacing: 0.08em;
  }
  /* Drop the "PLATINUM (S) · " prefix on very narrow screens — the
     plaque already shows the grade pill elsewhere. */
  .plaque--detail .plaque__trust-notch .trust-notch-label::before {
    content: "" !important;
  }
}
/* In detail, the JS prepends the grade name via data-trust-grade attr */
.plaque--detail .plaque__trust-notch[data-trust-grade="S"] .trust-notch-label::before { content: "PLATINUM (S) · "; }
.plaque--detail .plaque__trust-notch[data-trust-grade="A"] .trust-notch-label::before { content: "GOLD (A) · "; }
.plaque--detail .plaque__trust-notch[data-trust-grade="B"] .trust-notch-label::before { content: "SILVER (B) · "; }
.plaque--detail .plaque__trust-notch[data-trust-grade="C"] .trust-notch-label::before { content: "BRONZE (C) · "; }


/* ── .plaque--settled — Profile trophy card ─────────────────────
   Tile field set + rank stars + evidence chip + gold underline.
   Includes the corner ornaments (see top of file).
   ============================================================ */
.plaque--settled {
  width: 100%;
  height: auto;
  min-height: 340px;
  padding: 24px;
  gap: 0.6rem;
}
.plaque--settled .plaque__slug,
.plaque--settled .plaque-skill-name {
  font-size: 22px;
}
.plaque--settled:hover {
  border-color: rgba(var(--apex-gold-rgb), 0.5);
}


/* ── .plaque--og — 1200×630 social card (HTML mock) ─────────────
   The canonical OG card is server-rendered as SVG by
   scripts/generateOgCards.py. This HTML variant exists so the
   sampler can preview the same field set in-browser.
   ============================================================ */
.plaque--og {
  width: var(--plaque-og-w);
  max-width: 100%;
  min-height: 360px;
  padding: 48px 64px;
  gap: 0.8rem;
  border-radius: 0;
  cursor: default;
}
.plaque--og:hover { transform: none; }
.plaque--og .plaque__slug,
.plaque--og .plaque-skill-name {
  font-size: 64px;
}
.plaque--og .plaque__title,
.plaque--og .plaque-title {
  font-size: 32px;
}
.plaque--og .plaque__description,
.plaque--og .plaque-description {
  font-size: 28px;
  line-height: 1.4;
  -webkit-line-clamp: 3;
}
.plaque--og .plaque__tags {
  font-size: 20px;
  gap: 12px;
  margin-top: 12px;
}
.plaque--og .plaque__install {
  font-size: 24px;
  margin-top: auto;
}
.plaque--og .plaque__og-seal { display: inline-flex; color: var(--apex-gold); }


/* ── Plaque grid (used on profile pages) ────────────────────────
   Settled trophies in a 2-col responsive grid.
   ============================================================ */
.plaque-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2.4rem;
}


/* ── Plaque reveal overlay (Priority D — Naming Reveal) ─────────
   The cinematic that runs once when a skill is first named.
   ============================================================ */
.plaque-reveal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1400;
  background: rgba(3, 7, 18, 0.88);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.plaque-reveal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.plaque-reveal-overlay .plaque {
  opacity: 0;
  transform: translateY(32px);
  transition: none;
}
.plaque-reveal-overlay.settled .plaque {
  opacity: 1;
  transform: translateY(0);
}
.plaque-reveal-close {
  position: absolute;
  top: 1.2rem;
  right: 1.4rem;
  background: transparent;
  border: 1px solid rgba(226, 232, 240, 0.15);
  color: rgba(226, 232, 240, 0.5);
  font-size: 1rem;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, border-color 0.15s;
  line-height: 1;
  font-family: inherit;
}
.plaque-reveal-close:hover {
  color: var(--text, #e2e8f0);
  border-color: rgba(226, 232, 240, 0.4);
}


/* ── Animation keyframes (Priority D) ───────────────────────── */

@keyframes plaque-emerge {
  from { opacity: 0; transform: translateY(48px); box-shadow: none; }
  to   { opacity: 1; transform: translateY(0); box-shadow: 0 0 0 1px rgba(var(--apex-gold-rgb), 0.06), 0 24px 64px rgba(0,0,0,0.7), inset 0 1px 0 rgba(var(--apex-gold-rgb), 0.08); }
}
@keyframes ink-pour {
  from { opacity: 0; filter: blur(3px); color: rgba(var(--apex-gold-rgb), 0); text-shadow: none; }
  to   { opacity: 1; filter: blur(0); color: var(--apex-gold); text-shadow: 0 0 18px rgba(var(--apex-gold-rgb), 0.4); }
}
@keyframes star-ignite {
  from { opacity: 0; transform: scale(0.4) rotate(-20deg); filter: blur(2px); }
  60%  { transform: scale(1.3) rotate(5deg); filter: blur(0); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); filter: blur(0); }
}
@keyframes evidence-stamp {
  from { opacity: 0; transform: scale(1.2); letter-spacing: 0.3em; }
  to   { opacity: 1; transform: scale(1); letter-spacing: 0.1em; }
}
@keyframes underline-pulse {
  0%   { opacity: 0; transform: scaleX(0); }
  40%  { opacity: 0.8; transform: scaleX(1.05); }
  70%  { opacity: 0.5; }
  100% { opacity: 0.5; transform: scaleX(1); }
}
@keyframes contributor-resolve {
  from { opacity: 0; filter: blur(6px); transform: translateY(4px); }
  to   { opacity: 1; filter: blur(0); transform: translateY(0); }
}


/* ── Reduced motion: disable shimmer + reveal motion ─────────── */
@media (prefers-reduced-motion: reduce) {
  .plaque-reveal-overlay,
  .plaque-reveal-overlay .plaque,
  .plaque-reveal-overlay.settled .plaque {
    transition: none !important;
    animation: none !important;
  }
  .plaque--apex-vi { animation: none !important; }
  .plaque--apex-vi:hover::before,
  .plaque--apex-vi:hover::after { animation: none !important; opacity: 0.6; }
  @keyframes plaque-vi-edge        { from { } to { } }
  @keyframes apex-shard-flare      { from { } to { } }
  @keyframes plaque-emerge          { from { } to { } }
  @keyframes ink-pour               { from { } to { } }
  @keyframes star-ignite            { from { } to { } }
  @keyframes evidence-stamp         { from { } to { } }
  @keyframes underline-pulse        { from { } to { } }
  @keyframes contributor-resolve    { from { } to { } }
}


/* ── Ascension log (profile pages) ─────────────────────────── */
.ascension-log {
  margin-top: 2rem;
  border: 1px solid var(--border, #1e293b);
  border-radius: 8px;
  overflow: hidden;
}
.ascension-log-header {
  font-family: var(--font-mono, 'Departure Mono', 'JetBrains Mono', ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.45);
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--border, #1e293b);
}
.ascension-log-row {
  display: grid;
  grid-template-columns: 120px 80px 1fr 80px;
  gap: 12px;
  align-items: center;
  padding: 10px 16px;
  font-family: var(--font-mono, 'Departure Mono', 'JetBrains Mono', ui-monospace, monospace);
  font-size: 12px;
  border-bottom: 1px solid rgba(30, 41, 59, 0.6);
  transition: background 0.15s;
}
.ascension-log-row:last-child { border-bottom: none; }
.ascension-log-row:hover      { background: rgba(255, 255, 255, 0.025); }
.al-date   { color: rgba(226, 232, 240, 0.35); white-space: nowrap; }
.al-action { color: var(--honor-red, #ef4444); font-weight: 700; }
.al-skill  { color: rgba(226, 232, 240, 0.7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-level  { color: var(--apex-gold, #fbbf24); text-align: right; }


/* ── Profile page hero (settled context) ─────────────────────── */
.profile-back-row {
  max-width: 960px;
  margin: 0 auto;
  padding: 5rem 1.5rem 0;
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.profile-hero {
  padding: 2rem 1.5rem 3rem;
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}
/* Back link — mirrors the Explorer modal's se-btn-ghost back affordance:
   flows in-document above the hero so the fixed top-nav never overlaps it. */
.profile-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--text, #e2e8f0);
  text-decoration: none;
  font-family: var(--font-body, 'Bricolage Grotesque', sans-serif);
  font-size: 0.82rem;
  background: transparent;
  border: 1px solid var(--border, #1e293b);
  border-radius: 6px;
  padding: 0.38rem 0.9rem;
  transition: border-color 0.2s, color 0.2s;
}
.profile-back:hover,
.profile-back:focus-visible {
  border-color: var(--tier-basic, #38bdf8);
  color: var(--tier-basic, #38bdf8);
  outline: none;
}
/* Lateral nav variant — sits to the right of Back, points "forward" to the
   contributors directory. Honor-red accent (matches the nav entry colour). */
.profile-back--alt {
  margin-left: auto;
}
.profile-back--alt:hover,
.profile-back--alt:focus-visible {
  border-color: var(--honor-red, #ef4444);
  color: var(--honor-red, #ef4444);
}
.ico-flip-x {
  transform: scaleX(-1);
}
.profile-handle {
  font-family: var(--font-body, 'Bricolage Grotesque', sans-serif);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 700;
  color: var(--honor-red, #ef4444);
  margin-bottom: 0.5rem;
}
.profile-handle::before {
  content: '@';
  opacity: 0.55;
  font-size: 0.75em;
  vertical-align: middle;
}
.profile-handle-origin {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 0.4em;
  color: var(--apex-gold);
  vertical-align: middle;
}
.profile-handle-origin .origin-info {
  margin-left: 3px;
  color: var(--muted);
  opacity: 0.7;
}
.profile-meta {
  font-family: var(--font-mono, 'Departure Mono', 'JetBrains Mono', ui-monospace, monospace);
  font-size: 13px;
  color: rgba(226, 232, 240, 0.45);
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
}
.profile-section {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}
.profile-section-title {
  font-family: var(--font-display, 'EB Garamond', Georgia, serif);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 600;
  color: var(--text, #e2e8f0);
  margin-bottom: 0.4rem;
}
.profile-section-sub {
  color: rgba(226, 232, 240, 0.45);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}


/* ── Responsive — canonical breakpoints: 360 / 480 / 700 ─────── */

/* >700px: auto-grid (3+ columns) — default .plaque-grid already handles this */

/* 481–700px: two-column layout */
@media (min-width: 481px) and (max-width: 700px) {
  .plaque-grid          { grid-template-columns: repeat(2, 1fr); }
  .plaque--detail       {
    grid-template-columns: 1fr;
    padding: 20px;
    gap: 20px;
  }
  .ascension-log-row {
    grid-template-columns: 100px 70px 1fr 60px;
    font-size: 11px;
    gap: 8px;
  }
  .plaque--og {
    padding: 24px;
    min-height: 280px;
  }
  .plaque--og .plaque__slug,
  .plaque--og .plaque-skill-name { font-size: 28px; }
}

/* ≤480px: single column; .plaque--detail stacks to prevent crush */
@media (max-width: 480px) {
  .plaque-grid          { grid-template-columns: 1fr; }
  .plaque--detail       {
    grid-template-columns: 1fr;
    padding: 16px;
    gap: 16px;
  }
  .ascension-log-row {
    grid-template-columns: 100px 70px 1fr 60px;
    font-size: 11px;
    gap: 8px;
  }
  .plaque--og {
    padding: 24px;
    min-height: 280px;
  }
  .plaque--og .plaque__slug,
  .plaque--og .plaque-skill-name { font-size: 28px; }
}


/* ── DAG card density override (Tree view uses .plaque--mini) ── */
.plaque--mini.ns-dag-card {
  width: 180px;
  max-width: 180px;
  min-height: 160px;
  gap: 0.45rem;
}
.plaque--mini.ns-dag-card .plaque__slug,
.plaque--mini.ns-dag-card .plaque-skill-name {
  font-size: 15px;
}
.plaque--mini.ns-dag-card.ns-dag-ghost,
.plaque--mini[data-ghost="true"],
.plaque--mini.plaque--ghost {
  opacity: 0.55;
  border-style: dashed;
  /* Hatched border affordance — repeating-linear-gradient simulates a hatched
     edge without a separate SVG. The diagonal stripes read as "not yet". */
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0,
    transparent 6px,
    rgba(148, 163, 184, 0.06) 6px,
    rgba(148, 163, 184, 0.06) 8px
  );
}
.plaque--mini[data-ghost="true"] .plaque__slug,
.plaque--mini.plaque--ghost .plaque__slug,
.plaque--mini[data-ghost="true"] .plaque-skill-name,
.plaque--mini.plaque--ghost .plaque-skill-name {
  color: var(--muted);
}
.plaque--mini[data-ghost="true"] .plaque__gh-link,
.plaque--mini.plaque--ghost .plaque__gh-link {
  display: none;
}


/* ══════════════════════════════════════════════════════════════════════════
   Profile Enhancements — Stage 4d
   Components: filter bar · plaque actions (share/claim) · share modal ·
               progression timeline · activity log
   Token-only colors: NO bare hex literals — always var(--token) or
   var(--token, #hex) fallback form only.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Profile section wrapper ─────────────────────────────────── */
.profile-section {
  margin-block: 3rem;
}
.profile-section h2,
.profile-section-title {
  font-family: var(--font-display, 'EB Garamond', Georgia, serif);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 600;
  color: var(--text, #e2e8f0);
  margin-bottom: 0.25rem;
}
.profile-section-sub {
  color: var(--muted, #64748b);
  font-family: var(--font-mono, 'Departure Mono', 'JetBrains Mono', ui-monospace, monospace);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}/* Ensure filtered-out plaques are actually hidden since .plaque styles override browser default [hidden] behaviour */
.plaque[hidden] {
  display: none !important;
}

/* ── Filter bar ───────────────────────────────────────────────── */
.profile-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: flex-start;
  margin-bottom: 1.25rem;
}

/* fieldset reset */
.profile-filter-group {
  border: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.profile-filter-legend {
  font-family: var(--font-mono, 'Departure Mono', 'JetBrains Mono', ui-monospace, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted, #64748b);
  margin-right: 0.35rem;
  float: left;
  padding-top: 0.3rem;
}

.profile-filter-chip {
  font-family: var(--font-mono, 'Departure Mono', 'JetBrains Mono', ui-monospace, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--border, #1e293b);
  color: var(--muted, #64748b);
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.1s;
}
.profile-filter-chip:hover {
  border-color: var(--tier-basic, #38bdf8);
  color: var(--text, #e2e8f0);
  transform: translateY(-1px);
}
.profile-filter-chip[aria-pressed="true"] {
  border-color: var(--apex-gold, #fbbf24);
  background: rgba(251, 191, 36, 0.08);
  color: var(--apex-gold, #fbbf24);
}

/* Tier-aware active states for Type filter chips */
.profile-filter-group[data-filter-type="type"] .profile-filter-chip[data-value="basic"][aria-pressed="true"] {
  border-color: var(--tier-basic);
  background: var(--tier-basic-bg);
  color: var(--tier-basic);
}
.profile-filter-group[data-filter-type="type"] .profile-filter-chip[data-value="extra"][aria-pressed="true"] {
  border-color: var(--tier-extra);
  background: var(--tier-extra-bg);
  color: var(--tier-extra);
}
.profile-filter-group[data-filter-type="type"] .profile-filter-chip[data-value="unique"][aria-pressed="true"] {
  border-color: var(--tier-unique);
  background: var(--tier-unique-bg);
  color: var(--tier-unique);
}
.profile-filter-group[data-filter-type="type"] .profile-filter-chip[data-value="ultimate"][aria-pressed="true"] {
  border-color: var(--tier-ultimate);
  background: var(--tier-ultimate-bg);
  color: var(--tier-ultimate);
}

/* Rank-aware active states for Rank filter chips */
.profile-filter-group[data-filter-type="rank"] .profile-filter-chip[data-value="1"][aria-pressed="true"] {
  border-color: var(--rank-1); background: var(--rank-1-bg); color: var(--rank-1);
}
.profile-filter-group[data-filter-type="rank"] .profile-filter-chip[data-value="2"][aria-pressed="true"] {
  border-color: var(--rank-2); background: var(--rank-2-bg); color: var(--rank-2);
}
.profile-filter-group[data-filter-type="rank"] .profile-filter-chip[data-value="3"][aria-pressed="true"] {
  border-color: var(--rank-3); background: var(--rank-3-bg); color: var(--rank-3);
}
.profile-filter-group[data-filter-type="rank"] .profile-filter-chip[data-value="4"][aria-pressed="true"] {
  border-color: var(--rank-4); background: var(--rank-4-bg); color: var(--rank-4);
}
.profile-filter-group[data-filter-type="rank"] .profile-filter-chip[data-value="5"][aria-pressed="true"] {
  border-color: var(--rank-5); background: var(--rank-5-bg); color: var(--rank-5);
}
.profile-filter-group[data-filter-type="rank"] .profile-filter-chip[data-value="6"][aria-pressed="true"] {
  border-color: var(--rank-6); background: var(--rank-6-bg); color: var(--rank-6);
}

.profile-filter-reset {
  font-family: var(--font-mono, 'Departure Mono', 'JetBrains Mono', ui-monospace, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: none;
  border: none;
  color: var(--muted, #64748b);
  cursor: pointer;
  padding: 0.3rem 0.5rem;
  transition: color 0.15s;
  align-self: center;
}
.profile-filter-reset:hover {
  color: var(--text, #e2e8f0);
}

/* ── Plaque action buttons (share + claim) ────────────────────── */
.plaque__actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
}

/* Detail variant: actions are a flow row at the bottom of the left column,
   not a corner overlay. Base .plaque__actions + .plaque__share-btn /
   .plaque__claim-btn rules provide the visual — no size overrides needed. */
.plaque-detail-actions {
  position: static;
  margin-top: auto;
  padding-top: 0.75rem;
}

.plaque__share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted, #64748b);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  padding: 0;
}
.plaque__share-btn:hover {
  border-color: var(--tier-basic, #38bdf8);
  color: var(--tier-basic, #38bdf8);
}

.plaque__claim-btn {
  font-family: var(--font-mono, 'Departure Mono', 'JetBrains Mono', ui-monospace, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--muted, #64748b);
  color: var(--muted, #64748b);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.plaque__claim-btn[data-claim="claimed"] {
  border-color: var(--honor-red, #ef4444);
  background: rgba(239, 68, 68, 0.07);
  color: var(--honor-red, #ef4444);
}
.plaque__claim-btn:hover {
  border-color: var(--text, #e2e8f0);
  color: var(--text, #e2e8f0);
}

/* ── Share modal ──────────────────────────────────────────────── */
.share-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
}
.share-modal[hidden] {
  display: none;
}

.share-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 7, 18, 0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
}

.share-modal__panel {
  position: relative;
  z-index: 1;
  width: min(460px, calc(100vw - 2rem));
  background: var(--surface, #0f172a);
  border: 1px solid var(--border, #1e293b);
  border-radius: 14px;
  padding: 1.5rem 1.75rem 1.75rem;
  box-shadow: 0 24px 64px rgba(3, 7, 18, 0.7);
}

.share-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted, #64748b);
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
  transition: border-color 0.15s, color 0.15s;
  padding: 0;
}
.share-modal__close:hover {
  border-color: var(--border, #1e293b);
  color: var(--text, #e2e8f0);
}

.share-modal__title {
  font-family: var(--font-display, 'EB Garamond', Georgia, serif);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--text, #e2e8f0);
  margin: 0 0 0.25rem;
}

.share-modal__caption {
  font-family: var(--font-mono, 'Departure Mono', 'JetBrains Mono', ui-monospace, monospace);
  font-size: 0.78rem;
  color: var(--muted, #64748b);
  letter-spacing: 0.03em;
  margin: 0 0 0.9rem;
}

.share-modal__preview {
  display: block;
  width: 100%;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border, #1e293b);
  margin-bottom: 1rem;
  background: var(--bg, #030712);
}

.share-modal__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.share-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-family: var(--font-mono, 'Departure Mono', 'JetBrains Mono', ui-monospace, monospace);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--bg, #030712);
  border: 1px solid var(--border, #1e293b);
  color: var(--text, #e2e8f0);
  padding: 0.6rem 0.9rem;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.share-action:hover {
  background: var(--surface, #0f172a);
  border-color: var(--muted, #64748b);
}
/* X: neutral with var(--text) — matches brand neutral tone */
.share-action--x {
  border-color: var(--border, #1e293b);
  color: var(--text, #e2e8f0);
}
.share-action--x:hover {
  border-color: var(--text, #e2e8f0);
}
/* Instagram: var(--tier-extra) border suggests gradient without new colors */
.share-action--instagram {
  border-color: var(--tier-extra, #c084fc);
  color: var(--tier-extra, #c084fc);
}
.share-action--instagram:hover {
  background: rgba(192, 132, 252, 0.07);
  border-color: var(--tier-extra, #c084fc);
}

.share-modal__toast {
  margin-top: 0.75rem;
  text-align: center;
  font-family: var(--font-mono, 'Departure Mono', 'JetBrains Mono', ui-monospace, monospace);
  font-size: 0.78rem;
  color: var(--apex-gold, #fbbf24);
  background: var(--surface, #0f172a);
  border: 1px solid var(--apex-gold, #fbbf24);
  border-radius: 6px;
  padding: 0.45rem 0.75rem;
  animation: share-toast-fade 0.2s ease;
}
.share-modal__toast[hidden] {
  display: none;
}
@keyframes share-toast-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Progression timeline canvas ─────────────────────────────── */
.profile-timeline {
  aspect-ratio: 4 / 2;
  width: 100%;
  background: var(--surface, #0f172a);
  border: 1px solid var(--border, #1e293b);
  border-radius: 10px;
  display: block;
}
.profile-timeline:hover {
  cursor: default;
}

/* ── Activity log ─────────────────────────────────────────────── */
.profile-activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.profile-activity-item {
  display: grid;
  grid-template-columns: 7rem 6rem 1fr auto;
  gap: 0.5rem 1rem;
  align-items: center;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border, #1e293b);
  font-family: var(--font-mono, 'Departure Mono', 'JetBrains Mono', ui-monospace, monospace);
  font-size: 0.78rem;
}
.profile-activity-item:last-child {
  border-bottom: none;
}

.profile-activity-time {
  color: var(--muted, #64748b);
  font-size: 0.74rem;
}

.profile-activity-action {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
}
/* Per-action color via data attribute */
.profile-activity-action[data-action="rank_up"]  { color: var(--rank-3, #a78bfa); }
.profile-activity-action[data-action="fuse"]     { color: var(--tier-extra, #c084fc); }
.profile-activity-action[data-action="ascend"]   { color: var(--apex-gold, #fbbf24); }
.profile-activity-action[data-action="name"]     { color: var(--tier-basic, #38bdf8); }
.profile-activity-action[data-action="promote"]  { color: var(--apex-gold, #fbbf24); }
.profile-activity-action[data-action="evidence"] { color: var(--rank-3, #a78bfa); }

.profile-activity-skill {
  color: var(--honor-red, #ef4444);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-activity-change {
  color: var(--muted, #64748b);
  white-space: nowrap;
  text-align: right;
}

@media (max-width: 700px) {
  .profile-activity-item {
    grid-template-columns: 5.5rem 5rem 1fr;
    grid-template-rows: auto auto;
  }
  .profile-activity-change {
    grid-column: 3;
    text-align: left;
  }
}
@media (max-width: 480px) {
  .profile-activity-item {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
  .profile-activity-time { grid-column: 1; }
  .profile-activity-action { grid-column: 2; text-align: right; }
  .profile-activity-skill { grid-column: 1 / -1; }
  .profile-activity-change { grid-column: 1 / -1; text-align: left; }
}

/* ── Contributor Directory custom styles ─────────────────────── */
.contributor-card {
  min-height: 200px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.contributor-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.contributor-card-handle-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.contributor-card-handle {
  font-family: var(--font-body, 'Bricolage Grotesque', sans-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--honor-red, #ef4444);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.contributor-card-handle:hover {
  text-decoration: underline;
}
.contributor-card-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono, 'Departure Mono', 'JetBrains Mono', ui-monospace, monospace);
  font-size: 0.76rem;
  color: var(--muted, #64748b);
  border-bottom: 1px dashed var(--border);
  padding-bottom: 0.6rem;
}
.contributor-stat-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.contributor-card-skills-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 0.5rem;
}
.dir-skill-chip {
  font-family: var(--font-mono, 'Departure Mono', 'JetBrains Mono', ui-monospace, monospace);
  font-size: 0.68rem;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--text);
  transition: border-color 0.15s, background 0.15s;
}
/* Color skill chip depending on level */
.dir-skill-chip[data-level="1"] { color: var(--rank-1); border-color: rgba(var(--rank-1-rgb), 0.15); background: rgba(var(--rank-1-rgb), 0.03); }
.dir-skill-chip[data-level="2"] { color: var(--rank-2); border-color: rgba(var(--rank-2-rgb), 0.15); background: rgba(var(--rank-2-rgb), 0.03); }
.dir-skill-chip[data-level="3"] { color: var(--rank-3); border-color: rgba(var(--rank-3-rgb), 0.15); background: rgba(var(--rank-3-rgb), 0.03); }
.dir-skill-chip[data-level="4"] { color: var(--rank-4); border-color: rgba(var(--rank-4-rgb), 0.15); background: rgba(var(--rank-4-rgb), 0.03); }
.dir-skill-chip[data-level="5"] { color: var(--rank-5); border-color: rgba(var(--rank-5-rgb), 0.15); background: rgba(var(--rank-5-rgb), 0.03); }
.dir-skill-chip[data-level="6"] { color: var(--rank-6); border-color: rgba(var(--rank-6-rgb), 0.15); background: rgba(var(--rank-6-rgb), 0.03); }

.contributor-card-link-btn {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-mono, 'Departure Mono', 'JetBrains Mono', ui-monospace, monospace);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--bg, #030712);
  border: 1px solid var(--border, #1e293b);
  color: var(--text, #e2e8f0);
  padding: 0.6rem 0.9rem;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
}

.contributor-card-link-btn:hover {
  background: var(--surface, #0f172a);
  border-color: var(--tier-basic);
  color: var(--tier-basic);
  box-shadow: 0 0 16px rgba(var(--tier-basic-rgb), 0.2);
}

/* ── Unified Filter Sidebar & Grid Layout (DESIGN.md compliant) ── */
.profile-grid-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.profile-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.profile-sidebar {
  position: fixed;
  top: 58px;
  right: -320px;
  width: 280px;
  height: calc(100vh - 58px);
  max-height: calc(100vh - 58px);
  border-radius: 0;
  border-left: 1px solid var(--border, #1e293b);
  border-top: none; border-bottom: none; border-right: none;
  background: var(--surface, #0f172a);
  z-index: 9999;
  transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: -10px 0 30px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(100,116,139,0.3) transparent;
}
.profile-sidebar::-webkit-scrollbar {
  width: 4px;
}
.profile-sidebar::-webkit-scrollbar-thumb {
  background: rgba(100,116,139,0.3);
  border-radius: 2px;
}

/* Sidebar Date Filters and Inputs */
.sidebar-date-input {
  width: 100%;
  padding: 0.45rem 0.6rem;
  background: var(--bg, #030712);
  border: 1px solid var(--border, #1e293b);
  border-radius: 6px;
  color: var(--text, #e2e8f0);
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  outline: none;
  color-scheme: dark;
  transition: border-color 0.15s;
}
.sidebar-date-input:focus {
  border-color: var(--tier-basic, #38bdf8);
}
.date-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.date-presets .profile-filter-chip {
  flex: 1;
  text-align: center;
  padding: 0.25rem 0.4rem;
}

/* Floating mobile filter button and slide-out backdrop */
.profile-sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: transparent; /* Transparent overlay, like a tool */
  z-index: 9998;
  display: none;
}
.profile-sidebar-backdrop.is-open {
  display: block;
}

.profile-sidebar.is-open {
  right: 0;
}

.profile-timeline-filter-btn:hover {
  border-color: var(--tier-basic, #38bdf8);
  color: var(--tier-basic, #38bdf8);
}

.profile-filter-toggle {
  display: none; /* Hidden on desktop */
}

/* Plaque Highlight Styles (Curve Hover Affordance) */
.plaque.is-highlighted {
  border-color: var(--tier-basic, #38bdf8) !important;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.3) !important;
  transform: translateY(-2px);
  z-index: 10;
}
.plaque.is-highlighted.plaque--ultimate {
  border-color: var(--tier-ultimate, #f59e0b) !important;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.35) !important;
}
.plaque.is-highlighted.plaque--unique {
  border-color: var(--tier-unique, #7c3aed) !important;
  box-shadow: 0 0 20px rgba(124, 58, 237, 0.35) !important;
}
.plaque.is-highlighted.plaque--extra {
  border-color: var(--tier-extra, #c084fc) !important;
  box-shadow: 0 0 20px rgba(192, 132, 252, 0.35) !important;
}

/* ── Interactive Progression Tooltip ── */
.ptl2__tooltip {
  position: absolute;
  z-index: 9999;
  background: var(--surface, #0f172a); /* Solid surface */
  border: 1px solid var(--border, #1e293b);
  border-radius: 8px;
  padding: 10px 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  pointer-events: none;
  font-family: var(--font-body, sans-serif);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 180px;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.15s, transform 0.15s;
}
.ptl2__tooltip.is-visible {
  opacity: 1;
  transform: scale(1);
}
.ptl2__tooltip-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ptl2__tooltip-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text, #e2e8f0);
}
.ptl2__tooltip-tier {
  font-family: var(--font-mono, monospace);
  font-size: 0.54rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 2px;
  color: var(--muted);
  background: rgba(100,116,139,0.1);
  border: 1px solid rgba(100,116,139,0.2);
}
.ptl2__tooltip-tier--basic    { color: var(--tier-basic,#38bdf8);    background: rgba(56,189,248,.1); border-color: rgba(56,189,248,.2); }
.ptl2__tooltip-tier--extra    { color: var(--tier-extra,#c084fc);    background: rgba(192,132,252,.1); border-color: rgba(192,132,252,.2); }
.ptl2__tooltip-tier--unique   { color: var(--tier-unique,#7c3aed);   background: rgba(124,58,237,.1); border-color: rgba(124,58,237,.2); }
.ptl2__tooltip-tier--ultimate { color: var(--tier-ultimate,#f59e0b); background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.2); }

.ptl2__tooltip-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-mono, monospace);
  font-size: 0.68rem;
  color: var(--muted, #64748b);
  margin-top: 2px;
}
.ptl2__tooltip-date {
  color: rgba(226, 232, 240, 0.35);
  font-size: 0.62rem;
}
.ptl2__tooltip-rank {
  color: var(--apex-gold, #fbbf24);
  font-weight: 700;
}

/* Legend high-hover state */
.ptl2__legend-item.is-highlighted {
  color: var(--text, #e2e8f0);
  background: rgba(255,255,255,0.06);
}

/* Responsive side-panel behaviour */
@media (max-width: 860px) {
  .profile-timeline-filter-btn {
    display: none;
  }

  .profile-filter-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--surface, #0f172a);
    border: 1px solid var(--tier-basic, #38bdf8);
    color: var(--text, #e2e8f0);
    font-family: var(--font-mono, monospace);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.7rem 1.2rem;
    border-radius: 999px;
    z-index: 9997;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 10px rgba(56, 189, 248, 0.2);
    transition: transform 0.2s, background 0.2s;
  }
  .profile-filter-toggle:active {
    transform: scale(0.95);
  }
}

/* Empty-state message when all plaques are filtered out */
.profile-empty-state {
  display: none;
  text-align: center;
  color: var(--muted, #64748b);
  font-family: var(--font-mono, monospace);
  font-size: 0.82rem;
  padding: 2.5rem 1rem;
  grid-column: 1 / -1;
}
.profile-empty-reset {
  background: none;
  border: 1px solid var(--border, #1e293b);
  color: var(--text, #e2e8f0);
  border-radius: 6px;
  padding: 0.25rem 0.75rem;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  margin-left: 0.5rem;
  transition: border-color 0.15s;
}
.profile-empty-reset:hover { border-color: var(--tier-basic, #38bdf8); }

/* ── Add-more-skills CTA ──────────────────────────────────────── */
.profile-add-skills-cta {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--muted, #64748b);
  font-family: var(--font-mono, monospace);
  font-size: 0.82rem;
}
.profile-add-skills-cta p {
  margin: 0 0 0.5rem;
}
.profile-cta-link {
  color: var(--tier-basic, #38bdf8);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}
.profile-cta-link:hover {
  border-bottom-color: var(--tier-basic, #38bdf8);
}

/* Origin badge beside handle ──────────────────────────────────── */
.plaque__handle .plaque__origin {
  color: var(--honor-red, #ef4444);
  margin-left: 4px;
  vertical-align: middle;
}

/* Desktop: backdrop stays hidden; sidebar and filter button use same slide-in/toggle as mobile */
@media (min-width: 861px) {
  .profile-sidebar-backdrop {
    display: none !important;
  }
}

/* ── Sidebar & Feed Additions (DESIGN.md solid aesthetics) ── */
.sidebar-search-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: var(--bg, #030712);
  border: 1px solid var(--border, #1e293b);
  border-radius: 6px;
  color: var(--text, #e2e8f0);
  font-family: var(--font-body, sans-serif);
  font-size: 0.8rem;
  outline: none;
  transition: border-color 0.15s;
}
.sidebar-search-input:focus {
  border-color: var(--tier-basic, #38bdf8);
}

.ptl2__delta-badge {
  font-family: var(--font-mono, monospace);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
  display: inline-flex;
  align-items: center;
}
.ptl2__delta-badge--pos {
  color: #86efac;
  background: rgba(134, 239, 172, 0.1);
  border: 1px solid rgba(134, 239, 172, 0.2);
  box-shadow: 0 0 8px rgba(134, 239, 172, 0.2);
}
.ptl2__delta-badge--neg {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.2);
}

.ptl2__event--rank-down .ptl2__dot {
  transform: scale(1.15);
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

/* ============================================================
   Hall of Heroes revamps (Stage 4)
   ============================================================ */

/* Handle-centric mini plaque layout adjustments */
.plaque--mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 240px; /* Slightly taller for perfect proportions */
  padding: 24px 16px 16px;
  background: radial-gradient(120px circle at 50% 30px, rgba(var(--plaque-accent-rgb), 0.05) 0%, transparent 100%), var(--plaque-bg);
}

/* Ensure symmetrical placement of top-bar buttons */
.plaque--mini .plaque__gh-link {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  color: rgba(226, 232, 240, 0.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 5;
}

.plaque--mini .plaque__gh-link:hover {
  color: var(--text);
  border-color: rgba(var(--plaque-accent-rgb), 0.4);
  background: rgba(var(--plaque-accent-rgb), 0.08);
  transform: translateY(-1px);
}

.plaque--mini .plaque__fs-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  color: rgba(226, 232, 240, 0.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  z-index: 5;
}

.plaque--mini .plaque__fs-btn:hover {
  color: var(--apex-gold);
  border-color: rgba(var(--apex-gold-rgb), 0.4);
  background: rgba(var(--apex-gold-rgb), 0.08);
  transform: translateY(-1px);
}

/* Handle row at premium visual prominence */
.plaque--mini .plaque__handle {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.plaque--mini .plaque__handle a {
  color: var(--honor-red) !important;
  text-decoration: none;
  transition: opacity 0.2s;
}

.plaque--mini .plaque__handle a:hover {
  opacity: 0.85;
  text-decoration: underline;
}

.plaque--mini .plaque__origin {
  display: inline-flex;
  align-items: center;
}

/* Star ranking system placement */
.plaque--mini .plaque__rank {
  margin-top: 2px;
}

.plaque--mini .rank-badge[data-variant="stars"] {
  font-size: 11px;
  gap: 2px;
}

/* Slug is secondary and clickable */
.plaque--mini .plaque__slug.plaque__slug--clickable {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--plaque-accent);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 6px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
}

.plaque--mini .plaque__slug.plaque__slug--clickable:hover {
  color: var(--text);
  border-color: rgba(var(--plaque-accent-rgb), 0.3);
  background: rgba(var(--plaque-accent-rgb), 0.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Full-Screen Premium Modal (/impeccable) */
.hoh-fs-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(3, 7, 18, 0.85);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.hoh-fs-modal.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Close button — top right */
.hoh-fs-header {
  position: absolute;
  top: 24px;
  right: 24px;
  display: flex;
  gap: 12px;
  align-items: center;
  z-index: 1010;
}

/* Share/download actions — bottom right */
.hoh-fs-footer {
  position: absolute;
  bottom: 24px;
  right: 24px;
  display: flex;
  gap: 12px;
  align-items: center;
  z-index: 1010;
}

.hoh-fs-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  color: rgba(226, 232, 240, 0.7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.hoh-fs-btn:hover {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(30, 41, 59, 0.8);
  transform: translateY(-2px);
}

.hoh-fs-btn--close {
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.1);
  color: #fca5a5;
}

.hoh-fs-btn--close:hover {
  border-color: rgba(239, 68, 68, 0.6);
  background: rgba(239, 68, 68, 0.25);
  color: #ffffff;
}

/* Modal Center Stage (large card container) */
.hoh-fs-stage {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  box-sizing: border-box;
  transform: scale(0.92) translateY(20px);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hoh-fs-modal.is-active .hoh-fs-stage {
  transform: scale(1) translateY(0);
}

/* Limit the size of --og card inside stage */
.hoh-fs-stage .plaque--og {
  width: 1200px;
  height: 630px;
  transform-origin: center center;
  transform: scale(0.85); /* Scale slightly to fit laptop displays nicely */
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.6), 0 0 100px rgba(var(--plaque-accent-rgb), 0.15);
}
/* When the stage hosts the canonical inline SVG (svg.plaque--og), make
   sure its intrinsic width/height attributes don't fight the scale rule.
   The :is() block keeps the SVG sized exactly like the HTML mock so the
   transform: scale() math remains identical. */
.hoh-fs-stage svg.plaque--og {
  display: block;
  border-radius: 14px;
}

@media (max-width: 1400px) {
  .hoh-fs-stage .plaque--og {
    transform: scale(0.7);
  }
}
@media (max-width: 1200px) {
  .hoh-fs-stage .plaque--og {
    transform: scale(0.55);
  }
}
@media (max-width: 800px) {
  .hoh-fs-stage .plaque--og {
    transform: scale(0.4);
  }
}
@media (max-width: 500px) {
  .hoh-fs-stage .plaque--og {
    transform: scale(0.28);
  }
}

/* Floating overlay README badge panel at the bottom */
.hoh-fs-overlay {
  width: 100%;
  max-width: 680px;
  padding: 20px 24px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 1010;
  box-sizing: border-box;
  
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%) translateY(40px);
  opacity: 0;
  transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}

.hoh-fs-modal.is-active .hoh-fs-overlay {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.hoh-fs-overlay-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.hoh-fs-disclaimer {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

.hoh-fs-disclaimer-handle {
  color: var(--honor-red, #ef4444);
  font-weight: 600;
}

.hoh-fs-overlay-body {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.hoh-fs-badge-img {
  height: 24px;
  background: transparent;
  border-radius: 3px;
}

.hoh-fs-code-wrap {
  flex: 1;
  min-width: 250px;
  display: flex;
  gap: 8px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 12px;
  align-items: center;
  justify-content: space-between;
}

.hoh-fs-code {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #a7f3d0;
  white-space: nowrap;
  overflow-x: auto;
  margin: 0;
  padding-right: 8px;
  scrollbar-width: none;
}
.hoh-fs-code::-webkit-scrollbar {
  display: none;
}

.hoh-fs-copy-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
  flex-shrink: 0;
}

.hoh-fs-copy-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

.hoh-fs-copy-btn.copied {
  color: #10b981;
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.3);
}

/* Sleek dynamic toast notifications */
.hoh-fs-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(16, 185, 129, 0.95);
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  z-index: 1020;
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── Idle-fade chrome (controls hidden by default; reveal on mousemove) ─── */
.hoh-fs-overlay[hidden] { display: none !important; }
.hoh-fs-confirm[hidden] { display: none !important; }
.hoh-fs-modal.is-idle .hoh-fs-header,
.hoh-fs-modal.is-idle .hoh-fs-footer,
.hoh-fs-modal.is-idle .hoh-fs-confirm,
.hoh-fs-modal.is-idle .hoh-fs-overlay {
  opacity: 0;
  pointer-events: none;
}
.hoh-fs-header,
.hoh-fs-footer,
.hoh-fs-confirm,
.hoh-fs-overlay {
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── Compact confirm pill ─── */
.hoh-fs-confirm {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: rgba(226, 232, 240, 0.85);
  z-index: 1010;
}
.hoh-fs-confirm[hidden] { display: none; }
.hoh-fs-confirm-text #hohFsHandleText {
  color: var(--honor-red, #ef4444);
  font-weight: 600;
}
.hoh-fs-confirm-btn {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(226, 232, 240, 0.9);
  padding: 4px 12px;
  border-radius: 999px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease,
              border-color 0.18s ease, transform 0.18s ease;
}
.hoh-fs-confirm-btn:hover,
.hoh-fs-confirm-btn:focus-visible {
  outline: none;
  transform: translateY(-1px);
}
.hoh-fs-confirm-btn--yes:hover,
.hoh-fs-confirm-btn--yes:focus-visible {
  color: #ffffff;
  background: rgba(16, 185, 129, 0.18);
  border-color: rgba(16, 185, 129, 0.55);
}
.hoh-fs-confirm-btn--no:hover,
.hoh-fs-confirm-btn--no:focus-visible {
  color: #ffffff;
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.55);
}

/* ─── Icon-only copy button (foundation-sampler shape) ─── */
.hoh-fs-copy-btn--icon {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(226, 232, 240, 0.75);
  transition: color 0.18s ease, background 0.18s ease,
              border-color 0.18s ease, transform 0.18s ease;
}
.hoh-fs-copy-btn--icon:hover,
.hoh-fs-copy-btn--icon:focus-visible {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
  outline: none;
}
.hoh-fs-copy-btn--icon.copied {
  color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.45);
}
.hoh-fs-copy-btn--icon .ico {
  width: 14px;
  height: 14px;
  display: block;
}

/* ─── README overlay header (minimize + close) ─── */
.hoh-fs-overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.hoh-fs-overlay-controls {
  display: inline-flex;
  gap: 6px;
}
.hoh-fs-overlay-ctl {
  appearance: none;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(226, 232, 240, 0.7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease,
              border-color 0.18s ease, transform 0.18s ease;
}
.hoh-fs-overlay-ctl:hover,
.hoh-fs-overlay-ctl:focus-visible {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  outline: none;
  transform: translateY(-1px);
}
.hoh-fs-overlay-ctl .ico { display: block; }

/* Minimized chip — shows when the README panel is collapsed. */
.hoh-fs-overlay-restore {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(226, 232, 240, 0.85);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease,
              border-color 0.18s ease, transform 0.18s ease;
  z-index: 1010;
}
.hoh-fs-overlay-restore[hidden] { display: none !important; }
.hoh-fs-overlay-restore:hover,
.hoh-fs-overlay-restore:focus-visible {
  color: var(--text);
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(255, 255, 255, 0.25);
  outline: none;
  transform: translateX(-50%) translateY(-1px);
}

/* Fullscreen toggle — pinned bottom-right of the modal. */
.hoh-fs-fullscreen-btn {
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: rgba(226, 232, 240, 0.7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  z-index: 1010;
}
.hoh-fs-fullscreen-btn:hover,
.hoh-fs-fullscreen-btn:focus-visible {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(30, 41, 59, 0.8);
  transform: translateY(-2px);
  outline: none;
}
.hoh-fs-fullscreen-btn .hoh-fs-fullscreen-exit { display: none; }
.hoh-fs-modal.is-fullscreen .hoh-fs-fullscreen-btn .hoh-fs-fullscreen-enter { display: none; }
.hoh-fs-modal.is-fullscreen .hoh-fs-fullscreen-btn .hoh-fs-fullscreen-exit { display: block; }
.hoh-fs-modal.is-idle .hoh-fs-fullscreen-btn {
  opacity: 0;
  pointer-events: none;
}

.hoh-fs-toast.is-active {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ─── Download format popover ─── */
.hoh-dl-wrap {
  position: relative;
}

.hoh-dl-popover {
  position: absolute;
  bottom: calc(100% + 10px);
  top: auto;
  left: 50%;
  transform: translateX(-50%) scale(0.94);
  min-width: 180px;
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 10px 8px 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.hoh-dl-popover::before {
  content: '';
  position: absolute;
  bottom: -6px;
  top: auto;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: rgba(15, 23, 42, 0.96);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.hoh-dl-popover.is-open {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) scale(1);
}

.hoh-dl-popover-hint {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: rgba(226, 232, 240, 0.38);
  text-align: center;
  padding: 0 4px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 6px;
}

.hoh-dl-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  gap: 8px;
}

.hoh-dl-choice:hover,
.hoh-dl-choice:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  outline: none;
}

.hoh-dl-choice-fmt {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #e2e8f0);
  letter-spacing: 0.06em;
}

.hoh-dl-choice-sub {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  color: rgba(226, 232, 240, 0.4);
  letter-spacing: 0.03em;
}

.hoh-fs-btn.is-active {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(30, 41, 59, 0.9);
}

/* ─── Contributors directory (docs/u/index.html) ─── */
/* Search input — extracted from inline styles in build_directory_page. */
.directory-search {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s;
}
.directory-search:focus {
  border-color: var(--accent, var(--tier-extra));
}

/* Tier sections — contributors are grouped by peak rank into bands. */
.directory-tier { margin-block: 2.5rem; }
.directory-tier__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin-block-end: 1rem;
  padding-block-end: 0.5rem;
  border-block-end: 1px solid var(--border);
  letter-spacing: 0.01em;
}
.directory-tier[data-tier="4"] .directory-tier__title { color: var(--tier-ultimate); }
.directory-tier[data-tier="3"] .directory-tier__title { color: var(--tier-unique); }
.directory-tier[data-tier="2"] .directory-tier__title { color: var(--tier-extra); }
.directory-tier[data-tier="1"] .directory-tier__title { color: var(--tier-basic); }

/* ── Mystery redaction — 0★ / 1★ pre-named skills ──────────────────────────
   The contributor handle is withheld until the skill is officially named (2★+).
   Styled to feel classified / encrypted rather than broken.
   Colors: slate (--rank-0) for primary, cornflower-blue (--tier-basic) for accent. */
.plaque__redacted-handle {
  display: inline-block;
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 0.8em;
  font-style: italic;
  letter-spacing: 0.12em;
  color: var(--rank-0) !important;         /* slate — must win over honor-red context selectors (.sl-chip .handle, .atlas-handle, .gst-named-handle …) */
  background: var(--rank-0-bg);
  border: 1px solid var(--rank-0-border);
  border-radius: 3px;
  padding: 1px 6px;
  cursor: not-allowed;
  user-select: none;
  pointer-events: none;
  position: relative;
  overflow: hidden;
  animation: redacted-flicker 4s ease-in-out infinite;
}
.plaque__redacted-handle::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    var(--rank-0-edge) 50%,
    transparent 65%
  );
  background-size: 200% 100%;
  animation: redacted-scan 3.5s linear infinite;
  pointer-events: none;
}
@keyframes redacted-flicker {
  0%, 89%, 91%, 100% { opacity: 0.72; }
  90%                 { opacity: 0.45; }
}
@keyframes redacted-scan {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .plaque__redacted-handle,
  .plaque__redacted-handle::after { animation: none; }
}


.sidebar-search-input:focus-visible,
.sidebar-date-input:focus-visible,
.profile-filter-chip:focus-visible,
.profile-filter-reset:focus-visible,
.plaque__share-btn:focus-visible,
.plaque__claim-btn:focus-visible {
  outline: 2px solid var(--tier-extra);
  outline-offset: 2px;
}


/* ============================================================
   Trust Grade notch — I8 (redesign: pixel-thin bar → expand on hover)

   Default: 3px colored bar flush at the very card bottom (full-width,
   boxy — no radius). Grade color is always visible as a thin stripe.

   Hover (whole plaque): bar expands to 24px, "MAG X.X" counts up from
   0 to the real TM in <0.4s via JS (_wireTrustNotches). The label fades
   in as the bar opens. Transition ≤0.35s so the whole motion is snappy.

   Ungraded skills emit no element — zero markup cost.
   ============================================================ */

/* ── Base bar ────────────────────────────────────────────────── */
.plaque__trust-notch {
  /* Push to very bottom of the flex column card */
  margin-top: auto;
  /* Full width, boxy — no radius, no gap */
  width: 100%;
  margin-bottom: calc(-1 * var(--plaque-pad, 20px));
  margin-left: calc(-1 * var(--plaque-pad, 20px));
  /* Compensate for card padding on both sides */
  width: calc(100% + 2 * var(--plaque-pad, 20px));
  /* Thin bar by default */
  height: 3px;
  overflow: hidden;
  transition: height 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  /* Label hidden at 3px height, revealed as bar expands */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* ── Expand on plaque hover ──────────────────────────────────── */
.plaque:hover .plaque__trust-notch {
  height: 24px;
}

/* ── Label: invisible at rest, fades in as bar opens ─────────── */
.trust-notch-label {
  font-family: var(--font-mono, 'Departure Mono', 'JetBrains Mono', ui-monospace, monospace);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.18s ease 0.12s;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  /* Don't burst out of narrow plaques on medium widths */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.plaque:hover .trust-notch-label {
  opacity: 1;
}

/* ── Grade fills ────────────────────────────────────────────────────────────
   Plaque trust notches inherit the unified metallic grade fills from
   docs/css/styles.css (search ".grade-segment.grade-plat,").
   The selectors .plaque__trust-notch[data-trust-grade="S/A/B/C"] are appended
   to those rules — single source for all grade colors across plaques, MAG bars,
   evidence cards, and the docs/index.html Evidence Grade ladder.

   Anything plaque-specific (animated shimmer for S, reduced-motion fallback)
   stays here. The base color/gradient/shadow live in styles.css.
─────────────────────────────────────────────────────────────────────────── */

/* Animated S shimmer — overlays the metallic platinum fill (additive layer) */
@keyframes trust-notch-shimmer {
  0%   { background-position: 0%   0%, 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 200% 0%, 0 0, 0 0, 0 0, 0 0, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .plaque__trust-notch[data-trust-grade="S"] {
    animation: none !important;
  }
}


/* ── OG card: proportional bar at social-card scale ─────────── */
.plaque--og .plaque__trust-notch {
  height: 5px;
}
.plaque--og:hover .plaque__trust-notch {
  height: 32px;
}
.plaque--og .trust-notch-label {
  font-size: 13px;
}

/* ── Reduced-motion: skip height transition, show label always ── */
@media (prefers-reduced-motion: reduce) {
  .plaque__trust-notch {
    height: 24px;
    transition: none;
  }
  .trust-notch-label {
    opacity: 1;
    transition: none;
  }
}


/* ── Row variant: evidence badge ─────────────────────────────────
   Shown at the end of list-view rows as a small muted label.
   Positioned just before the › arrow. */
.plaque--row .plaque__ev-badge {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  opacity: 0.55;
  margin-left: auto;
  align-self: center;
  padding: 1px 4px;
  text-transform: uppercase;
  font-family: var(--font-mono, 'Departure Mono', 'JetBrains Mono', ui-monospace, monospace);
  white-space: nowrap;
  flex-shrink: 0;
}