/* Copyright (c) 2026 Eleftherios Notas and The XIOM Authors
   SPDX-License-Identifier: Apache-2.0 */

/* XIOM Registry -- read-only web UI.
   Shares the XIOM brand tokens with xiom-lang.org and the playground:
   indigo on near-black, Inter/system stack, no webfont dependency. */

:root {
  --ink: #08090B;
  --panel: #111217;
  --panel-raised: #16181D;
  --line: #25272E;
  --line-soft: #1A1C22;

  --paper: #F2F3F6;
  --paper-dim: #C2C5CF;
  --muted: #9497A3;

  --signal: #5C6BFF;
  --signal-dim: #3F4BD1;
  --signal-glow: rgba(92, 107, 255, 0.14);
  --verified: #34D399;
  --verified-dim: #1F8A63;
  --error: #FF5C7A;

  --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body: var(--font-display);
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;

  --transition: 200ms ease-out;

  --radius-sm: 8px;
  --radius: 10px;
  --radius-lg: 16px;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  --max-width: 1180px;
  --nav-height: 64px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
h1 { font-size: 34px; }
h2 { font-size: 22px; margin-bottom: var(--space-md); }
h3 { font-size: 17px; }
p { color: var(--paper-dim); }

a { color: var(--signal); text-decoration: none; }
a:hover { color: var(--paper); }

code, pre, .mono { font-family: var(--font-mono); }
code {
  color: var(--paper);
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.88em;
}

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

/* ---------- Header ---------- */

.site-header {
  border-bottom: 1px solid var(--line);
  background: rgba(8, 9, 11, 0.92);
  position: sticky;
  top: 0;
  z-index: 10;
}

.site-header .container {
  height: var(--nav-height);
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

/* The masthead lives in the page banner (wordmark link + global search), so
   the sticky bar is navigation only. On phones the link row collapses into a
   no-JS "Menu" disclosure; the account action always stays visible. */
.site-header nav {
  display: flex;
  gap: var(--space-lg);
  font-size: 14px;
}
.site-header nav a { color: var(--paper-dim); }
.site-header nav a:hover { color: var(--paper); }

.nav-links { margin-right: auto; }
.nav-brand {
  color: var(--paper);
  display: none;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}
.nav-more { display: none; position: relative; }
.nav-more summary {
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--paper-dim);
  cursor: pointer;
  font-size: 13px;
  list-style: none;
  padding: 9px 16px;
}
.nav-more summary::-webkit-details-marker { display: none; }
.nav-more summary::after { content: ' \25be'; }
.nav-more[open] summary { border-color: var(--signal); color: var(--paper); }
.nav-more-panel {
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  display: none;
  gap: 2px;
  min-width: 220px;
  padding: var(--space-sm);
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 30;
}
.nav-more[open] .nav-more-panel { display: grid; }
.nav-more-panel a {
  border-radius: var(--radius-sm);
  padding: 11px 12px;
}
.nav-more-panel a:hover { background: var(--panel-raised); }

.skip-link {
  background: var(--signal);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  color: #fff;
  left: var(--space-md);
  padding: 8px 14px;
  position: fixed;
  top: -60px;
  transition: top 0.15s ease-out;
  z-index: 100;
}
.skip-link:focus { color: #fff; top: 0; }

/* ---------- Main / hero ---------- */

main { flex: 1; padding: var(--space-xl) 0 var(--space-2xl); }

.hero { margin-bottom: var(--space-xl); }
.hero p { max-width: 62ch; margin-top: var(--space-sm); }

.search-form {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  max-width: 560px;
}
.search-form input {
  flex: 1;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--paper);
  font: inherit;
  padding: 10px 14px;
}
.search-form input:focus {
  outline: none;
  border-color: var(--signal);
  box-shadow: 0 0 0 3px var(--signal-glow);
}
.search-form button {
  background: var(--signal);
  border: 0;
  border-radius: var(--radius);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  padding: 10px 18px;
}
.search-form button:hover { background: var(--signal-dim); }

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  color: var(--muted);
  font-size: 14px;
  margin-top: var(--space-md);
}

/* ---------- Package list ---------- */

.package-list {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: minmax(0, 1fr);
  list-style: none;
  margin-top: var(--space-lg);
}

.pagination {
  align-items: center;
  display: flex;
  font-size: 14px;
  gap: var(--space-md);
  justify-content: center;
  margin-top: var(--space-lg);
}
.page-link {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--paper-dim);
  padding: 6px 14px;
}
.page-link:hover { border-color: var(--signal); color: var(--paper); }
.page-link.disabled { color: var(--muted); opacity: 0.6; }
.page-status { color: var(--muted); }

/* Sort + facet controls on the full listing (section 13 phase 3). */
.facet-bar { display: grid; gap: var(--space-sm); margin-top: var(--space-lg); }
.facet-group {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: var(--space-sm);
}
.facet-sort { color: var(--muted); }
.facet-sort .chip { font-size: 12px; }

/* Compact listing rows (section 13 phase 2): the full list at /packages. */
.pkg-rows {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  list-style: none;
  margin-top: var(--space-lg);
  overflow: hidden;
}
.pkg-row {
  align-items: center;
  display: grid;
  gap: var(--space-xs) var(--space-sm);
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 2px var(--space-lg);
}
.pkg-row + .pkg-row { border-top: 1px solid var(--line-soft); }
.pkg-row:hover { background: var(--panel-raised); }
.pkg-row .pkg-badge { border-radius: 10px; height: 56px; width: 56px; }
.pkg-row .badge { font-size: 11px; padding: 1px 8px; }
.pkg-row .pkg-name { color: var(--paper); font-size: 16px; font-weight: 600; }
.pkg-row-main { min-width: 0; }
.pkg-row-main .pkg-desc {
  color: var(--muted);
  font-size: 13px;
  margin: 2px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pkg-row-meta {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 13px;
  gap: var(--space-md);
  white-space: nowrap;
}
.pkg-row-meta .pkg-version { color: var(--paper-dim); }

.featured { margin-top: var(--space-lg); }
.browse-all { margin-top: var(--space-lg); text-align: center; }

@media (max-width: 640px) {
  .pkg-row {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 8px var(--space-md);
  }
  .pkg-row .pkg-badge { border-radius: 8px; height: 44px; width: 44px; }
  .pkg-row-meta {
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-md);
    grid-column: 2;
    white-space: normal;
  }
  .package-card { padding: var(--space-md); }
  .package-card .pkg-badge { border-radius: 10px; height: 48px; width: 48px; }
  .package-card .pkg-badge-group { gap: var(--space-xs); }
  /* Mobile pass (owner report): the stage badge wraps to its own line inside
     the card instead of clipping at the right edge. */
  .package-card .pkg-head { align-items: flex-start; row-gap: 8px; }
  .package-card .pkg-badge-group {
    justify-content: flex-start;
    margin-left: 0;
    width: 100%;
  }
}

.package-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-width: 0;
  padding: var(--space-md) var(--space-lg);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.package-card:hover { border-color: var(--signal-dim); background: var(--panel-raised); }

.package-card .pkg-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
}

/* Package status badge art (owner-supplied webp matrix): one icon per
   package on the right, with an explicit trust pill beside it when signed. */
.pkg-badge-group {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-left: auto;
  max-width: 100%;
  min-width: 0;
  position: relative;
}

/* Fallback treatments when a decision's own art is not in the build: a muted
   package dims its art and carries a "muted" tag, a reviewed package gets a
   signal ring. Dropping pgk_muted_* / pgk_reviewed_* into src/ui/assets
   replaces these automatically (owner report, 2026-09-26). */
.pkg-badge--muted { filter: grayscale(1) opacity(0.55); }
.pkg-badge--reviewed { outline: 2px solid var(--signal-dim); outline-offset: 2px; border-radius: 14px; }

/* Dense icon-only rows (admin console): same state, compact art. */
.pkg-badge-group--compact { margin-left: 0; }
.pkg-badge-group--compact .pkg-badge { border-radius: 10px; height: 44px; width: 44px; }
@media (max-width: 640px) {
  .pkg-badge-group--compact .pkg-badge { height: 36px; width: 36px; }
}
.pkg-badge-group--muted::after {
  background: var(--ink);
  border: 1px solid var(--muted);
  border-radius: 999px;
  bottom: -6px;
  color: var(--muted);
  content: 'muted';
  font-size: 9px;
  left: 4px;
  letter-spacing: 0.05em;
  padding: 1px 6px;
  position: absolute;
  text-transform: uppercase;
}

.pkg-badge {
  flex: 0 0 auto;
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: 14px;
}

.pkg-title .pkg-badge-group { margin-left: auto; }
.package-card .pkg-name { font-size: 17px; font-weight: 600; color: var(--paper); }
.package-card .pkg-version { color: var(--muted); font-family: var(--font-mono); font-size: 13px; }
.package-card .pkg-desc { color: var(--paper-dim); margin-top: 4px; font-size: 14px; }
.package-card .pkg-meta { color: var(--muted); margin-top: 6px; font-size: 13px; }

/* ---------- Package page ---------- */

.pkg-title { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-md); min-width: 0; }
.pkg-title .version { color: var(--muted); font-family: var(--font-mono); font-size: 15px; }

.badges { display: inline-flex; gap: var(--space-sm); }
.badge {
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--paper-dim);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px 12px;
  text-transform: uppercase;
}
.badge.signed { border-color: var(--verified-dim); color: var(--verified); }
.badge.trusted { border-color: rgba(105, 184, 255, 0.55); color: #69b8ff; }
.badge.official { border-color: var(--signal-dim); color: var(--signal); }
.badge.yanked { border-color: var(--error); color: var(--error); }

.install {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: var(--space-lg) 0;
  padding: var(--space-md) var(--space-lg);
}
.install code { background: transparent; border: 0; font-size: 15px; }

.detail-grid {
  display: grid;
  gap: var(--space-md) var(--space-xl);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: var(--space-lg) 0;
}
.detail dt { color: var(--muted); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
.detail dd { font-family: var(--font-mono); font-size: 13px; overflow-wrap: anywhere; }

table.versions {
  border-collapse: collapse;
  font-size: 13px;
  margin-top: var(--space-md);
  width: 100%;
}
table.versions th, table.versions td {
  border-bottom: 1px solid var(--line-soft);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
table.versions th { color: var(--muted); font-weight: 600; }
table.versions td.mono { font-family: var(--font-mono); }
table.versions tr:hover td { background: var(--panel); }

/* Wide data never widens the page on a phone: the wrapper scrolls instead. */
.table-wrap { margin-top: var(--space-md); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table.versions { margin-top: 0; min-width: 640px; }

/* Progressive-enhancement copy control (hidden until the layout script runs). */
.copy-button {
  background: var(--panel-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--paper-dim);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  margin-left: var(--space-sm);
  padding: 4px 10px;
}
.copy-button:hover { border-color: var(--signal); color: var(--paper); }

/* Full digests, keys, and signatures: available, never shouted. */
.integrity {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-top: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
}
.integrity summary { color: var(--paper-dim); cursor: pointer; font-weight: 600; }
.integrity .detail-grid { margin-bottom: var(--space-sm); }
.overflow-wrap { overflow-wrap: anywhere; }

/* On phones a data table becomes labelled rows; no pinch-zoom, no clipping. */
@media (max-width: 640px) {
  .table-wrap { overflow: visible; }
  .table-wrap table.versions { min-width: 0; }
  table.table-cards { border-collapse: separate; }
  table.table-cards thead { display: none; }
  table.table-cards, table.table-cards tbody, table.table-cards tr, table.table-cards td {
    display: block;
    width: 100%;
  }
  table.table-cards tr {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: var(--space-md);
    padding: var(--space-sm) var(--space-md);
  }
  table.table-cards tr:hover td { background: transparent; }
  table.table-cards td {
    border: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    padding: 4px 0;
    text-align: left;
  }
  table.table-cards td > * { min-width: 0; }
  table.table-cards td,
  table.table-cards td .mono { overflow-wrap: anywhere; }
  table.table-cards td::before {
    color: var(--muted);
    content: attr(data-label);
    flex: 0 0 92px;
    font-size: 11px;
    letter-spacing: 0.05em;
    padding-top: 1px;
    text-transform: uppercase;
  }
}

.empty {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  margin-top: var(--space-lg);
  padding: var(--space-xl);
  text-align: center;
}

.note {
  border-left: 3px solid var(--signal);
  color: var(--paper-dim);
  font-size: 14px;
  margin-top: var(--space-lg);
  overflow-wrap: anywhere;
  padding: var(--space-sm) var(--space-md);
}

/* Long commands and digests wrap instead of widening the page. */
.install code,
.note code,
.integrity code,
.detail dd code { overflow-wrap: anywhere; }

/* ---------- Categories ---------- */

.chips { display: inline-flex; flex-wrap: wrap; gap: 6px; vertical-align: middle; }
.chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--paper-dim);
  font-size: 12px;
  padding: 1px 9px;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.chip:hover { border-color: var(--signal-dim); color: var(--paper); }
.chip-active { border-color: var(--signal); color: var(--paper); }
.chip-empty { opacity: 0.5; }
.chip-count { color: var(--muted); font-size: 11px; margin-left: 4px; }
.category-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-md); }
.category-list {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  list-style: none;
  margin-top: var(--space-lg);
}
.category-item { align-items: center; display: flex; gap: var(--space-md); }

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  padding: var(--space-lg) 0;
}
.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
  align-items: center;
}
.site-footer a { color: var(--paper-dim); }
.site-footer a:hover { color: var(--paper); }
.site-footer .spacer { margin-left: auto; }
.site-footer .legal {
  margin-top: var(--space-sm);
  font-size: 12px;
  color: var(--muted);
}
.site-footer .legal a { color: var(--muted); }
.site-footer .legal a:hover { color: var(--paper); }

/* Social row: same block and rules as xiom-lang.org's footer (.footer-social,
   xiom-website/style.css); registry@xiom-lang.org sits beside it as the
   registry-specific contact. */
.footer-social-row { margin-top: var(--space-md); }
.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  transition: color var(--transition), border-color var(--transition),
    box-shadow var(--transition);
}
.footer-social a:hover {
  color: var(--paper);
  border-color: var(--signal-dim);
  box-shadow: 0 0 0 1px var(--signal-glow);
}
.footer-social svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Home "Support the project" section: same markup and class names as
   xiom-lang.org's contributing page (eco-grid/eco-card), filled at runtime by
   /ui/support-tiers.js from the collective's public endpoints. Adapted to the
   registry palette; the grid wraps and stacks on phones. */
.home-support {
  border-top: 1px solid var(--line);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
}
.eco-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.eco-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}
.eco-card h4 {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}
.eco-card p { margin: 0; }

/* ============================================================
   Page banners
   Full-width artwork with the wordmark and section title overlaid on the
   left negative space. Lifted from xiom-website/style.css ("Page banners")
   so the registry matches xiom-lang.org; keep the treatment in sync when it
   changes there. The banner is decorative in this UI (aria-hidden), so every
   page keeps its own semantic heading.
   ============================================================ */

.page-banner {
  position: relative;
  overflow: hidden;
  background: #05080f;
  border-bottom: 1px solid var(--line);
}

.page-banner img {
  display: block;
  width: 100%;
  height: auto;
}

.xiom-banner-text {
  position: absolute;
  left: 7%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  white-space: nowrap;
}

.xiom-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
}

.xiom-brand {
  font-family: var(--font-display, var(--font-body));
  font-size: clamp(28px, 2.8vw, 52px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #f3f7ff;
  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.08),
    0 0 24px rgba(70, 120, 255, 0.08);
}

.xiom-section {
  margin-top: 13px;
  font-size: clamp(9px, 0.72vw, 14px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: #69b8ff;
  text-shadow:
    0 0 8px rgba(80, 150, 255, 0.3),
    0 0 18px rgba(50, 110, 255, 0.15);
}

.xiom-section.long-title {
  letter-spacing: 0.24em;
  font-size: clamp(8px, 0.65vw, 13px);
}

.xiom-accent {
  width: 42px;
  height: 2px;
  margin-top: 17px;
  background: linear-gradient(90deg, #66fff1 0%, #4cc8ff 70%, rgba(76, 200, 255, 0) 100%);
  box-shadow:
    0 0 7px rgba(76, 220, 255, 0.55),
    0 0 16px rgba(76, 180, 255, 0.2);
}

@media (prefers-reduced-motion: no-preference) {
  .xiom-banner-text {
    animation: xiomFadeIn 900ms ease-out both;
  }

  @keyframes xiomFadeIn {
    from { opacity: 0; transform: translate(-12px, -50%); }
    to { opacity: 1; transform: translate(0, -50%); }
  }
}

@media (max-width: 860px) {
  .xiom-banner-text { left: 6%; }
  .xiom-brand { font-size: clamp(22px, 4.6vw, 34px); letter-spacing: 0.22em; }
  .xiom-section { margin-top: 9px; font-size: clamp(8px, 1.9vw, 12px); letter-spacing: 0.26em; }
  .xiom-section.long-title { font-size: clamp(7px, 1.6vw, 11px); letter-spacing: 0.18em; }
  .xiom-accent { width: 32px; margin-top: 11px; }
}

/* ---------- Registry banner search ----------
   Owner's call for the registry, within the website's banner rules: the
   search is centred horizontally and wide, anchored to the lower third of
   the artwork so it never stacks into the left wordmark area. The banner
   stays wordmark + section + accent above it; the sticky bar keeps
   navigation only, so "XIOM Registry" is never repeated. */

.xiom-heading:focus-visible {
  outline: 2px solid #69b8ff;
  outline-offset: 6px;
  border-radius: 2px;
}

.banner-search {
  position: absolute;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  gap: var(--space-sm);
  width: min(760px, 84%);
}

.banner-search input {
  flex: 1;
  min-width: 0;
  background: rgba(5, 8, 15, 0.72);
  border: 1px solid rgba(105, 184, 255, 0.35);
  border-radius: var(--radius);
  color: var(--paper);
  font: inherit;
  padding: 12px 16px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.banner-search input::placeholder {
  color: rgba(242, 243, 246, 0.55);
}

.banner-search input:focus {
  outline: none;
  border-color: #69b8ff;
  box-shadow: 0 0 0 3px rgba(105, 184, 255, 0.22);
}

.banner-search button {
  background: rgba(105, 184, 255, 0.16);
  border: 1px solid rgba(105, 184, 255, 0.45);
  border-radius: var(--radius);
  color: #eaf4ff;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  padding: 12px 22px;
}

.banner-search button:hover,
.banner-search button:focus-visible {
  background: rgba(105, 184, 255, 0.28);
}

@media (max-width: 860px) {
  .banner-search { bottom: 10%; width: min(560px, 90%); }
}

@media (max-width: 640px) {
  .site-header .container {
    height: auto;
    min-height: var(--nav-height);
    padding-top: 6px;
    padding-bottom: 6px;
  }
  /* One visible row: brand + account action + Menu. Everything else lives in
     the disclosure, so no link is ever scrolled off-screen. (The nav element
     selector in the base rules outranks a bare class, hence the pairing.) */
  .site-header nav.nav-links { display: none; }
  .nav-brand { display: inline-block; }
  .nav-more { display: block; }
  .nav-more summary { padding: 8px 14px; }
  .nav-right { margin-left: auto; }
  .site-header nav .nav-more-panel { gap: 0; margin-left: 0; }
  .account-tab { font-size: 13px; }
  .account-tabs { gap: var(--space-md); }

  h1 { font-size: 26px; }
  .container { padding: 0 var(--space-md); }

  /* Banner: art on top, search below it. The search never covers the
     wordmark and the placeholder is never clipped. */
  .page-banner {
    display: block;
    min-height: 0;
    padding-bottom: var(--space-md);
  }
  .page-banner img { height: 170px; object-fit: cover; object-position: 62% center; }
  .xiom-banner-text { animation: none; left: 6%; top: 42%; }
  .banner-search {
    bottom: auto;
    left: auto;
    margin: 0 var(--space-md);
    position: static;
    transform: none;
    width: auto;
  }
  .banner-search button { padding: 11px 16px; }
}

/* ---------- Accounts and requests (registry 2.0) ----------
   Sign-in identity, the self-service request form, and the admin queue. */

.site-header nav .nav-right {
  display: inline-flex;
  gap: var(--space-lg);
  margin-left: auto;
}
/* .nav-shell, not `nav`: the Sign in / account control lives in the
   .nav-right span next to (not inside) the primary nav element. */
.site-header .nav-shell a.nav-account { color: var(--signal); }
.site-header .nav-shell a.nav-account:hover { color: var(--paper); }

/* Signed-in account menu: avatar + name button, click for an overlay panel
   (no JS; details/summary). Mirrors the playground pattern. */
.nav-account { position: relative; }
.nav-account > summary {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  gap: 7px;
  list-style: none;
  padding: 6px 8px;
}
.nav-account > summary::-webkit-details-marker { display: none; }
.nav-account > summary::after {
  color: var(--muted);
  content: '\25BE';
  font-size: 10px;
  margin-left: 2px;
}
.nav-account > summary:hover span { color: var(--paper); }
.nav-account > summary span {
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-avatar {
  background: var(--panel-raised);
  border: 1px solid var(--line);
  border-radius: 50%;
  height: 24px;
  object-fit: cover;
  width: 24px;
}
.nav-avatar--fallback {
  align-items: center;
  color: var(--paper-dim);
  display: inline-flex;
  font-size: 12px;
  font-weight: 600;
  justify-content: center;
}
/* Qualified with .site-header: the generic `.site-header nav { display:flex }`
   rule would otherwise turn the panel into a clipped flex row. */
.site-header .nav-account-panel {
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  display: grid;
  gap: 2px;
  min-width: 208px;
  padding: 8px;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 40;
}
.site-header .nav-account-panel a {
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  white-space: nowrap;
}
.site-header .nav-account-panel a:hover { background: var(--panel-raised); }
.site-header .nav-account-signout {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  color: var(--paper-dim);
  cursor: pointer;
  font: inherit;
  margin-top: 4px;
  padding: 10px 12px;
  text-align: left;
  white-space: nowrap;
  width: 100%;
}
.site-header .nav-account-signout:hover { background: var(--panel-raised); color: var(--paper); }

/* Header notification bell: unread count next to the account control. */
.nav-account-group { align-items: center; display: inline-flex; gap: 6px; }
.nav-bell {
  align-items: center;
  color: var(--paper-dim);
  display: inline-flex;
  gap: 5px;
  padding: 6px 4px;
  position: relative;
}
.nav-bell:hover { color: var(--paper); }
.nav-bell svg { display: block; }
.nav-bell-count {
  background: var(--signal);
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  min-width: 17px;
  padding: 3px 5px;
  text-align: center;
}
/* Admin/reviewer work badge: pending queues, pull-based. */
.nav-work {
  align-items: center;
  color: var(--paper-dim);
  display: inline-flex;
  gap: 5px;
  padding: 6px 4px;
  position: relative;
}
.nav-work:hover { color: var(--paper); }
.nav-work svg { display: block; }
.nav-work-count {
  background: #ffc400;
  border-radius: 999px;
  color: #1a1400;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  min-width: 17px;
  padding: 3px 5px;
  text-align: center;
}
/* Simple owner/activity lists on the admin user overview. */
.plain-list { margin: var(--space-sm) 0; padding-left: var(--space-lg); }
.plain-list li { margin: 4px 0; }

/* Inbox triage: filter chips and per-notice actions. */
.notice-filters {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.notice-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}
/* Assignment controls on the admin work inbox. */
.work-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}
.work-actions select {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--paper);
  padding: 6px 8px;
}
@media (max-width: 640px) {
  .nav-account > summary span { max-width: 120px; }
  .site-header .nav-account-panel { left: auto; right: 0; }
}
.site-header nav a[aria-current="page"] { color: var(--paper); }

/* Nav actions (Sign in, GitHub) read as buttons, not as menu text. */
.site-header .nav-shell a.nav-button {
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--paper-dim);
  line-height: 1;
  padding: 7px 14px;
}
.site-header .nav-shell a.nav-button:hover { border-color: var(--signal); color: var(--paper); }
.site-header .nav-shell a.nav-button-primary {
  background: var(--signal);
  border-color: var(--signal);
  color: #fff;
}
.site-header .nav-shell a.nav-button-primary:hover { background: var(--signal-dim); color: #fff; }

.account-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  max-width: 560px;
  padding: var(--space-lg);
}
.account-card .button { margin-bottom: var(--space-md); }

/* Account sub-pages: Overview / Requests / Notifications / Settings. */
.account-tabs {
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: var(--space-md);
  margin: var(--space-md) 0 var(--space-lg);
  overflow-x: auto;
}
.account-tab {
  border-bottom: 2px solid transparent;
  color: var(--paper-dim);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 2px;
  white-space: nowrap;
}
.account-tab:hover { color: var(--paper); }
.account-tab.active { border-bottom-color: var(--signal); color: var(--paper); }
.account-signout { margin-top: var(--space-xl); }
.account-subhead { margin-top: var(--space-lg); }
.inline-form { margin-bottom: var(--space-md); }
.mint-details { margin-top: var(--space-md); }
.mint-details summary { color: var(--paper-dim); cursor: pointer; font-size: 14px; }

/* Admin console: dashboard cards, audit feed, user actions. */
.console-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-bottom: var(--space-xl);
}
.console-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-md) var(--space-lg);
}
.console-card:hover { border-color: var(--signal-dim); }
.console-card-value { color: var(--paper); font-size: 28px; font-weight: 600; }
.console-card-label { color: var(--paper-dim); font-size: 14px; font-weight: 600; }
.console-search {
  display: flex;
  gap: var(--space-sm);
  margin: var(--space-md) 0;
  max-width: 520px;
}
.console-search input { flex: 1; min-width: 0; }
.audit-list { display: grid; gap: var(--space-xs); list-style: none; margin-top: var(--space-md); }
.audit-row {
  align-items: baseline;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  padding: 8px 0;
}
.audit-action { color: var(--paper); }
.audit-detail { overflow-wrap: anywhere; }
.user-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }
.user-actions form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: 0;
  max-width: 100%;
}
.user-actions input { min-width: 0; }

/* Maintainer identity (ownership claims, SESSION.md 21 A1). */
.maintainers { margin-top: var(--space-lg); }
.maintainer-list { display: grid; gap: var(--space-sm); list-style: none; margin-top: var(--space-sm); }
.maintainer-row {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
}
.claim-form {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  margin-top: var(--space-md);
}

/* Publishing guide: quick links above the rendered markdown. */
.quick-links { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }
.guide-source { margin: var(--space-md) 0; }
.guide { margin-bottom: var(--space-lg); max-width: 900px; }
.guide h2 { scroll-margin-top: calc(var(--nav-height) + var(--space-md)); }

.account-hero { align-items: center; display: flex; gap: var(--space-md); }
.account-avatar {
  border: 1px solid var(--line);
  border-radius: 50%;
  flex: 0 0 auto;
}

.publisher-fields {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  margin-bottom: var(--space-md);
  padding: var(--space-md) var(--space-lg);
}
.request-history { margin-top: 2px; overflow-wrap: anywhere; }

.account-grid {
  align-items: start;
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  margin-top: var(--space-xl);
}

.request-form fieldset {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: var(--space-md);
  padding: var(--space-md) var(--space-lg);
}
.request-form legend {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 0 var(--space-sm);
  text-transform: uppercase;
}
.radio-row {
  color: var(--paper-dim);
  display: flex;
  font-size: 14px;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
}
.radio-row input { accent-color: var(--signal); margin-top: 5px; }

.form-grid { display: grid; gap: var(--space-md); }
.form-field { display: flex; flex-direction: column; gap: 4px; }
.form-field > span { color: var(--paper-dim); font-size: 14px; font-weight: 600; }
.form-field small { color: var(--muted); font-size: 12px; }
.form-field input,
.form-field textarea {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--paper);
  font: inherit;
  padding: 10px 12px;
}
.form-field input:focus,
.form-field textarea:focus {
  border-color: var(--signal);
  box-shadow: 0 0 0 3px var(--signal-glow);
  outline: none;
}

.button {
  background: var(--panel-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--paper);
  cursor: pointer;
  display: inline-block;
  font: inherit;
  font-weight: 600;
  line-height: 1.4;
  padding: 9px 18px;
  text-align: center;
}
.button:hover { border-color: var(--signal); }
.button.primary { background: var(--signal); border-color: var(--signal); color: #fff; }
.button.primary:hover { background: var(--signal-dim); }
.button.danger { border-color: rgba(255, 92, 122, 0.6); color: var(--error); }
.button.danger:hover { background: rgba(255, 92, 122, 0.12); }

/* One visible focus treatment for links, buttons, and form controls. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

.notice,
.error-box {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
  padding: var(--space-sm) var(--space-md);
}
.notice { border-color: var(--verified-dim); color: var(--verified); }
.error-box { border-color: var(--error); color: var(--error); }

.status-pill {
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 1px 10px;
  text-transform: uppercase;
  white-space: nowrap;
}
.status-pending { border-color: rgba(105, 184, 255, 0.55); color: #69b8ff; }
.status-supervisor { border-color: rgba(196, 151, 255, 0.55); color: #c497ff; }
.status-approved { border-color: var(--verified-dim); color: var(--verified); }
.status-denied { border-color: var(--error); color: var(--error); }
.status-fulfilled { border-color: var(--signal-dim); color: var(--signal); }
.status-muted { border-color: rgba(148, 151, 163, 0.6); color: var(--muted); }

.request-id { color: var(--paper-dim); font-family: var(--font-mono); font-size: 13px; }
.notice-muted { border-color: var(--line); border-left: 3px solid var(--muted); color: var(--paper-dim); }

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Phones get touch-sized controls and full-width decision inputs. */
@media (max-width: 640px) {
  .button,
  .site-header .nav-shell a.nav-button,
  .nav-more summary,
  .account-tab,
  .chip,
  .page-link {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
  }
  /* Stack decision controls on phones: side-by-side, the note input clips
     under the buttons (flex: 1 fights the width), which reads as broken. */
  .decision-form { display: grid; grid-template-columns: minmax(0, 1fr); }
  .decision-form input,
  .decision-form select,
  .decision-form textarea,
  .decision-form .button { flex: none; min-width: 0; width: 100%; }
  .decision-form .button { justify-content: center; }
}

.request-list {
  display: grid;
  gap: var(--space-md);
  list-style: none;
  margin-bottom: var(--space-xl);
}
.request-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-md) var(--space-lg);
}
.request-card.closed { opacity: 0.75; }
.request-head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
}
.request-target {
  color: var(--paper);
  font-size: 13px;
  margin-top: var(--space-sm);
  overflow-wrap: anywhere;
}
.decision-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
.decision-form input {
  background: var(--panel-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--paper);
  flex: 1;
  font: inherit;
  min-width: 200px;
  padding: 8px 10px;
}
/* Checkboxes inside a decision form are controls, not text fields. */
.decision-form input[type="checkbox"] {
  accent-color: var(--signal);
  flex: 0 0 auto;
  height: 16px;
  margin-top: 4px;
  min-width: 0;
  padding: 0;
  width: 16px;
}
.count { color: var(--muted); font-size: 14px; font-weight: 400; }
.request-table td { vertical-align: top; }

/* Reports and the reviewer queue (registry 2.0 phase 3). */
.review-box { margin-top: var(--space-lg); }
.report-form-box {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-top: var(--space-md);
  padding: var(--space-md) var(--space-lg);
}
.report-form-box summary { color: var(--paper-dim); cursor: pointer; font-weight: 600; }
.report-form { margin-top: var(--space-md); }
.report-form .button { margin-top: var(--space-sm); }
.form-field select {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--paper);
  font: inherit;
  padding: 10px 12px;
}

/* Human review: a distinct claim pill, the public history, and decisions. */
.badge.reviewed { border-color: var(--verified-dim); color: var(--verified); }
.review-history { margin-top: var(--space-md); }
.review-history summary { color: var(--paper-dim); cursor: pointer; font-weight: 600; }
.review-history-list { color: var(--muted); font-size: 13px; margin: var(--space-sm) 0 0 20px; }
.review-decision-row { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); }
.mint-command {
  background: var(--panel-raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  font-size: 12px;
  margin: var(--space-sm) 0;
  overflow-x: auto;
  padding: var(--space-sm) var(--space-md);
  white-space: pre-wrap;
}

/* Ratings and short reviews (the social layer's first slice). */
.ratings-box {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-top: var(--space-lg);
  padding: var(--space-lg);
}
.rating-summary { margin: 0 0 var(--space-sm); }
.rating-average { color: var(--paper); font-size: 22px; font-weight: 700; }
.rating-stars { color: #e8b84b; letter-spacing: 2px; }
.rating-list { list-style: none; margin: var(--space-md) 0; }
.rating-item { border-top: 1px solid var(--line-soft); padding: var(--space-sm) 0; }
.rating-item .pkg-desc { margin-top: 4px; }
.rating-form { border-top: 1px solid var(--line); margin-top: var(--space-md); padding-top: var(--space-md); }

/* Review votes, maintainer replies, and list controls (A9). */
.review-controls { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.review-controls a[aria-current="true"] { color: var(--paper); font-weight: 600; }
.review-social { margin-top: var(--space-xs); }
.vote-form { display: flex; gap: var(--space-xs); }
.vote-button { min-width: 64px; padding: 6px 10px; }
.vote-button[aria-pressed="true"] { border-color: var(--signal); box-shadow: 0 0 0 2px var(--signal-glow); color: var(--signal); }
.review-reply { border-left: 2px solid var(--line); margin-top: var(--space-sm); padding-left: var(--space-sm); }
.reply-form { display: flex; flex-direction: column; gap: var(--space-xs); margin-top: var(--space-sm); }
.reply-form textarea {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--paper);
  font-family: inherit;
  padding: var(--space-sm);
  width: 100%;
}
.review-pagination { align-items: center; display: flex; gap: var(--space-md); justify-content: center; margin-top: var(--space-md); }

/* README block on the package page (section 13). */
.readme {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: var(--space-lg) 0;
}
.readme summary {
  cursor: pointer;
  font-weight: 600;
  padding: var(--space-md) var(--space-lg);
}
.readme .pkg-meta { padding: 0 var(--space-lg) var(--space-md); }

/* Rendered markdown (GitHub-like reading styles, XIOM palette). */
.markdown {
  border-top: 1px solid var(--line);
  color: var(--paper-dim);
  font-size: 14px;
  line-height: 1.65;
  overflow-wrap: anywhere;
  padding: var(--space-lg);
}
.markdown > :first-child { margin-top: 0; }
.markdown h1, .markdown h2, .markdown h3,
.markdown h4, .markdown h5, .markdown h6 {
  color: var(--paper);
  margin: var(--space-lg) 0 var(--space-sm);
}
.markdown h1 { border-bottom: 1px solid var(--line); font-size: 24px; padding-bottom: 8px; }
.markdown h2 { border-bottom: 1px solid var(--line-soft); font-size: 20px; padding-bottom: 6px; }
.markdown h3 { font-size: 17px; }
.markdown h4, .markdown h5, .markdown h6 { font-size: 15px; }
.markdown p { margin: var(--space-sm) 0; }
.markdown a { text-decoration: underline; text-underline-offset: 2px; }
.markdown ul, .markdown ol { margin: var(--space-sm) 0 var(--space-sm) 24px; }
.markdown li { margin: 4px 0; }
.markdown li > ul, .markdown li > ol { margin: 4px 0 4px 18px; }
.markdown code { background: var(--panel-raised); font-size: 0.9em; }
.markdown pre {
  background: var(--panel-raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  margin: var(--space-md) 0;
  overflow: auto;
  padding: var(--space-md);
}
.markdown pre code { background: transparent; border: 0; padding: 0; }
.markdown blockquote {
  border-left: 3px solid var(--line);
  color: var(--muted);
  margin: var(--space-md) 0;
  padding: 2px 0 2px 14px;
}
.markdown hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-lg) 0; }
.markdown img { border-radius: var(--radius-sm); max-width: 100%; }
.markdown table { border-collapse: collapse; margin: var(--space-md) 0; }
.markdown th, .markdown td { border: 1px solid var(--line); padding: 6px 10px; }
.markdown th { background: var(--panel-raised); color: var(--paper); }
.markdown .task-list-item { list-style: none; margin-left: -20px; }
.markdown .task-list-item input { margin-right: 6px; }
.markdown .md-invalid { color: var(--muted); text-decoration: line-through; }

@media (max-width: 860px) {
  .account-grid { grid-template-columns: 1fr; }
}

/* ---------- Contributor profiles + Sponsors badge (A4) ---------- */

.sponsor-badge {
  align-items: center;
  background: rgba(105, 184, 255, 0.12);
  border: 1px solid rgba(105, 184, 255, 0.55);
  border-radius: 999px;
  color: #69b8ff;
  display: inline-flex;
  font-size: 12px;
  font-weight: 600;
  gap: 5px;
  padding: 2px 10px;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
}
.sponsor-badge:hover { background: rgba(105, 184, 255, 0.2); }

/* The opt-in state line sits below the badge form with room to breathe. */
.sponsor-state { margin-top: var(--space-md); }

/* At-a-glance package stats (rating / downloads / watchers / versions). */
.pkg-stats { color: var(--muted); font-size: 14px; margin: var(--space-sm) 0 0; }

/* Naming-guard warnings on the admin request queue (approval ack). */
.name-warnings {
  background: rgba(255, 196, 0, 0.08);
  border: 1px solid rgba(255, 196, 0, 0.35);
  border-radius: var(--radius);
  margin: var(--space-sm) 0;
  padding: var(--space-sm) var(--space-md);
}
.name-warning-list { margin: var(--space-sm) 0; padding-left: var(--space-lg); }

/* Request-form live name check (advisory; the door re-checks at submit). */
.scope-check { display: grid; gap: 4px; margin: 0; font-size: 13px; }
.scope-check-icon { font-weight: 700; }
.scope-check-label { font-weight: 600; }
.scope-check-line { color: var(--muted); }
.scope-check-ok .scope-check-icon,
.scope-check-ok .scope-check-label { color: var(--verified); }
.scope-check-warn .scope-check-icon,
.scope-check-warn .scope-check-label { color: #ffc400; }
.scope-check-error .scope-check-icon,
.scope-check-error .scope-check-label { color: var(--error); }
.field-error { color: var(--error); font-size: 12px; }

.profile-link { color: var(--paper); font-weight: 600; text-decoration: none; }
.profile-link:hover { text-decoration: underline; }

.contributor-list {
  display: grid;
  list-style: none;
  margin-top: var(--space-lg);
  padding: 0;
}
.contributor-row {
  align-items: center;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  padding: 10px 4px;
}
.contributor-row:hover { background: var(--panel); }
.contributor-rank { color: var(--muted); font-family: var(--font-mono); min-width: 26px; text-align: right; }
.contributor-breakdown { flex: 1 1 auto; min-width: 0; }
.contributor-score { color: var(--paper); font-weight: 600; white-space: nowrap; }

.profile-page > section:not(.hero) { margin-top: var(--space-xl); }
.profile-page > .profile-note,
.contributors-note { margin-top: var(--space-lg); }

@media (max-width: 640px) {
  .contributor-row { align-items: flex-start; }
  .contributor-breakdown { flex-basis: 100%; order: 5; }
}

/* ---------- Activity feeds + watching (A5) ---------- */

.watch-box {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  margin: var(--space-md) 0;
}

.activity-list {
  display: grid;
  list-style: none;
  padding: 0;
}
.activity-row {
  align-items: baseline;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--space-sm);
  padding: 8px 2px;
}
.activity-type { flex: 0 0 auto; }
.activity-detail { flex: 1 1 60%; min-width: 0; }
.activity-excerpt { color: var(--muted); display: block; overflow-wrap: anywhere; }
.activity-when { margin-left: auto; white-space: nowrap; }

@media (max-width: 640px) {
  .activity-detail { flex-basis: 100%; order: 2; }
  .activity-when { margin-left: 0; order: 3; }
}

/* ---------- Grant changes (B4/B5) ---------- */

.grant-change { margin: var(--space-sm) 0; }
.grant-change summary { color: var(--signal); cursor: pointer; }
.grant-change[open] summary { color: var(--paper); margin-bottom: var(--space-sm); }
.request-card .inline-form { margin-top: var(--space-sm); }