/* Hall — landing page (step 7).
 *
 * Design rules carried over from ARCH-BOOK:
 *   - 17px body floor / readable type
 *   - visual-first; status-colour only (no decorative tints)
 *   - responsive grid: 4 → 2 → 1 columns
 *   - approved buttons only: arch-cta · arch-btn-red ·
 *     arch-btn-ghost · arch-btn-ok (assumed defined site-wide;
 *     the .arch-btn-ghost block below is a defensive fallback).
 *
 * BEM-ish naming with the .hall- prefix to avoid collisions with
 * the existing site CSS.
 */

/* ── Hero ───────────────────────────────────────────────────────── */
.hall-hero {
  background: linear-gradient(135deg, #1f2433 0%, #171b27 100%);
  border-bottom: 1px solid #262b3c;
  padding: 48px 0 36px;
}
.hall-hero__inner {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}
.hall-hero__eyebrow {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:var(--accent);
  font-weight: 800;
  margin-bottom: 6px;
}
.hall-hero__title h1 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 900;
  letter-spacing: -0.8px;
  line-height: 1.1;
  /* FND-073 decision 1 — one heading colour. Was gradient-clipped text
     (gold -> periwinkle #818cf8), which is a third and fourth heading
     mechanism on top of var(--text-primary) and the inline-styled auth
     headings. It also degraded badly: in dark mode the gradient ran to a
     periwinkle the brand does not contain, and the last word faded out. */
  color: var(--text-primary);
  margin-bottom: 8px;
}
.hall-hero__tag {
  color: #8a93a6;
  font-size: 1.05rem;
  max-width: 60ch;
  line-height: 1.6;
}
.hall-hero__featured {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 20px;
  background: rgba(205, 161, 44, 0.08);
  border: 1px solid rgba(205, 161, 44, 0.36);
  border-radius: 14px;
  text-decoration: none;
  color: #e8eaf0;
  min-width: 220px;
  transition: background .15s, border-color .15s, transform .15s;
}
.hall-hero__featured:hover {
  background: rgba(205, 161, 44, 0.14);
  border-color: rgba(205, 161, 44, 0.6);
  transform: translateY(-1px);
}
.hall-hero__featured-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:var(--accent);
  font-weight: 800;
}
.hall-hero__featured-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffd35e;
}
.hall-hero__featured-meta {
  font-size: 0.85rem;
  color: #8a93a6;
}

/* ── Add a topic CTA — collapsed by default ─────────────────────── */
.hall-add {
  border-bottom: 1px solid #262b3c;
  background: #0f1219;
  padding: 16px 0;
}
.hall-add[data-collapsed="true"] .hall-add__body {
  display: none;
}
.hall-add__body {
  margin-top: 14px;
  padding: 14px 18px;
  background: #171b27;
  border: 1px solid #262b3c;
  border-radius: 12px;
  color: #8a93a6;
  font-size: 0.94rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
/* Pre-promote to compositor layer so the site-wide translateY(-1px) hover
 * doesn't trigger a sub-pixel text re-render on Windows/Chrome */
.hall-add__body .arch-cta {
  -webkit-font-smoothing: antialiased;
  transform: translateZ(0);
}
.hall-add__body .arch-cta:hover {
  transform: translateY(-1px) translateZ(0);
}

/* The site-wide `.container { min-height: calc(100vh - 200px) }` rule
 * (style.css L142) is meant for top-level page wrappers. The expo
 * templates use `.container` purely for Bootstrap's responsive width +
 * horizontal padding inside larger section wrappers, so the inherited
 * min-height blows up small components (filter bar, hero strip, sticky
 * header) to full viewport height. Reset it on the bits where it
 * matters. */
.hall-hero__inner.container,
.hall-add .container,
.hall-filters__form.container,
.hall-toolbar.container,
.hall-detail-header__inner.container,
.hall-add-page__head.container,
.hall-edit-page__head.container,
.hall-add-page__form.container,
.hall-edit-page__form.container,
.hall-add-page__body.container,
.hall-contributors-page.container,
.hall-detail-body.container,
.hall-grid-section .container,
.hall-contribs-strip .container,
.hall-requests-section .container {
  min-height: auto;
}

/* ── Filters bar — sticky on scroll ─────────────────────────────── */
.hall-filters {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(15, 18, 25, 0.96);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid #262b3c;
  padding: 14px 0;
}
.hall-filters__form {
  display: flex;
  gap: 12px;
  align-items: end;
  flex-wrap: wrap;
  min-height: auto;
}
.hall-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
  flex: 1 1 140px;
}
.hall-filter--actions {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-width: auto;
  flex: 0 1 auto;
}
.hall-filter__label {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #8a93a6;
}
.hall-filter select {
  background: #171b27;
  color: #e8eaf0;
  border: 1px solid #262b3c;
  border-radius: 10px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 0.9rem;
  min-height: 40px;
}
.hall-filter select:focus {
  outline: none;
  border-color: #cda12c;
  box-shadow: 0 0 0 3px rgba(205, 161, 44, 0.18);
}


/* ── Topic grid: 4 → 2 → 1 columns ──────────────────────────────── */
.hall-grid-section {
  padding: 28px 0 60px;
  background: #0a0d14;
}
.hall-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 992px) {
  .hall-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 576px) {
  .hall-grid { grid-template-columns: 1fr; }
}

/* ── Topic card ─────────────────────────────────────────────────── *
 * Rule 0 — every topic card renders at exactly the same height,
 * per breakpoint. Fixed `height` (not min-height) at each grid
 * width so two cards with different content can't drift even a
 * single pixel. overflow:hidden enforces the cap. 1:1 cover stays
 * — body absorbs the remainder via flex:1.
 *
 * Per-breakpoint heights track the cover's natural width:
 *   4-col (default ~280px wide)  → cover 280 + body 140 = 420
 *   2-col (≤1024 ~360-480 wide)  → cover ~440 + body 140 = 580
 *   1-col mobile (full width)    → fall back to min-height; the
 *     cover scales freely with the column. */
.hall-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .15s, border-color .15s, box-shadow .15s;
  display: flex;
  flex-direction: column;
  height: 420px;
}
@media (max-width: 992px) and (min-width: 576px) {
  .hall-card { height: 540px; }
}
@media (max-width: 576px) {
  .hall-card { height: auto; min-height: 420px; }
}
.hall-card:hover {
  transform: translateY(-2px);
  border-color: rgba(205, 161, 44, 0.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
}
.hall-card__cover {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #1f2433, #171b27);
  overflow: hidden;
  text-decoration: none;
  flex-shrink: 0;  /* cover holds its 1:1 shape; body absorbs slack via flex:1 */
}
.hall-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hall-card__cover-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: 'Nunito', sans-serif;
  font-size: 4rem;
  font-weight: 900;
  color: rgba(205, 161, 44, 0.32);
  letter-spacing: -2px;
  text-transform: uppercase;
}
.hall-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(205, 161, 44, 0.18);
  color: #ffd35e;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 99px;
  border: 1px solid rgba(205, 161, 44, 0.4);
  backdrop-filter: blur(4px);
}
.hall-card__body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-height: 140px;  /* Rule 0 — body never collapses; stats always have room */
  min-width: 0;
}
.hall-card__name {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.2px;
  line-height: 1.3;
  margin: 0;
  /* Rule 0 — clamp at 2 lines so two-word vs five-word architect
   * names render at the same vertical bound. min-height reserves the
   * 2-line slot even when the name is one word, so the row below
   * (native + meta) starts at the same Y on every card. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}
.hall-card__name a {
  color: #e8eaf0;
  text-decoration: none;
}
.hall-card__name a:hover {
  color: #ffd35e;
}
.hall-card__native {
  font-size: 0.85rem;
  color: #8a93a6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Slot reserved even when the architect has no native-script name;
   * the empty line keeps the meta row at the same Y on every card. */
  min-height: 1.2em;
}
.hall-card__meta {
  font-size: 0.82rem;
  color: #8a93a6;
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 1.2em;
  /* Pushes the stats footer all the way to the body's bottom edge so
   * the stats sit at exactly the same Y across every card regardless
   * of how many of the three lines above actually have content. */
  margin-bottom: auto;
}
.hall-card__stats {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 11px 0 0;
  margin: auto 0 0;  /* Rule 0 — pin the footer to the card bottom so every card's stats line up */
  border-top: 1px solid #262b3c;
}
.hall-card__stats li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.92rem;
  font-weight: 800;
  color: #ffd35e;          /* the figure colour; the icon overrides to muted */
  line-height: 1;
}
.hall-card__stats li i {
  color: #8a93a6;          /* muted icon carries the meaning — full label on hover/SR */
  font-size: 0.82rem;
}
.hall-card__stat-num {
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1;
}

/* ── Empty state ────────────────────────────────────────────────── */
.hall-empty {
  text-align: center;
  padding: 60px 20px;
  color: #8a93a6;
}
.hall-empty h2 {
  font-size: 1.4rem;
  color: #e8eaf0;
  margin-bottom: 10px;
  font-weight: 800;
}
.hall-empty p {
  font-size: 1rem;
  margin-bottom: 18px;
  max-width: 50ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.55;
}

/* ── Pagination ───────────────────────────────────────────────────
 * Custom .hall-pagination retired — the page now uses the site-wide
 * _pagination.html partial (.pager / .pager-btn) so Expo matches
 * groups/offices/projects/posts pagination. Wrapper kept so we can
 * add a top border + spacing without touching the partial. */
.hall-pagination-wrap {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid #262b3c;
}

/* ── Mobile breakpoint adjustments ──────────────────────────────── */
@media (max-width: 768px) {
  .hall-hero {
    padding: 32px 0 24px;
  }
  .hall-hero__inner {
    grid-template-columns: 1fr;
  }
  .hall-filter {
    min-width: 100%;
    flex: 1 1 100%;
  }
  .hall-filter--actions {
    flex: 1 1 100%;
    justify-content: flex-start;
  }
}


/* ════════════════════════════════════════════════════════════════════ *
 * Topic detail page (step 8)                                          *
 * ════════════════════════════════════════════════════════════════════ */

/* Hidden-topic banner (staff only) */
.hall-hidden-banner {
  background: rgba(239, 68, 68, 0.12);
  border-bottom: 2px solid #ef4444;
  color: #fecaca;
  padding: 12px 20px;
  font-size: 0.92rem;
  text-align: center;
}
.hall-hidden-banner strong {
  color: #ef4444;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.hall-hidden-banner a {
  color: #ffd35e;
  margin-left: 12px;
  text-decoration: underline;
}

/* Step 60 — stub banner on the topic page */
.hall-stub-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: rgba(251, 191, 36, 0.09);
  border-bottom: 2px solid rgba(251, 191, 36, 0.35);
  color: #fef3c7;
  padding: 12px 20px;
  font-size: 0.88rem;
}
.hall-stub-banner__icon {
  font-size: 1.1rem;
  color: #fbbf24;
  flex-shrink: 0;
}
.hall-stub-banner__body {
  flex: 1;
  min-width: 0;
}
.hall-stub-banner__title {
  color: #fbbf24;
  font-weight: 700;
  margin-right: 6px;
}
.hall-stub-banner__text {
  color: #fde68a;
}
.hall-stub-banner__cta {
  flex-shrink: 0;
  font-size: 0.8rem;
  padding: 5px 14px;
}

/* ── Photo swiper (step 13 — full polish) ──────────────────────────────
 * Full-width slides, native scroll-snap for swipe, JS overlay for
 * chevrons / dots / counter / resume pill. Auto-advance + a11y handled
 * in static/javascript/expo/swiper.js. */
.hall-swiper {
  background: #0a0d14;
  border-bottom: 1px solid #262b3c;
  position: relative;
  outline-offset: -3px;
}
.hall-swiper:focus-visible {
  outline: 3px solid rgba(205, 161, 44, 0.7);
}
.hall-swiper__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Hide native scrollbars across browsers — chevrons + dots + swipe
   * cover navigation. */
  scrollbar-width: none;
}
.hall-swiper__track::-webkit-scrollbar { display: none; }

.hall-swiper__slide {
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: start;
  margin: 0;
  position: relative;
  background: #171b27;
}
.hall-swiper__slide img {
  width: 100%;
  height: clamp(280px, 60vh, 640px);
  object-fit: cover;
  display: block;
}
.hall-swiper__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(0deg, rgba(10, 13, 20, 0.92), rgba(10, 13, 20, 0.0));
  color: #e8eaf0;
  padding: 22px 22px 14px;
  font-size: 0.92rem;
  pointer-events: none;
}
.hall-swiper__credit {
  color: #8a93a6;
  font-size: 0.8rem;
  margin-left: 6px;
  display: inline;
}
.hall-swiper__credit-link {
  color: #8a93a6;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hall-swiper__credit-link:hover {
  color: #c4cad8;
}

/* Chevrons */
.hall-swiper__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 64px;
  background: rgba(10, 13, 20, 0.55);
  color: #ffd35e;
  border: 1px solid rgba(205, 161, 44, 0.32);
  border-radius: 12px;
  font-size: 1.6rem;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  backdrop-filter: blur(6px);
  transition: background .15s, border-color .15s;
}
.hall-swiper__nav:hover {
  background: rgba(10, 13, 20, 0.78);
  border-color: rgba(205, 161, 44, 0.6);
}
.hall-swiper__nav:focus-visible {
  outline: 2px solid #ffd35e;
  outline-offset: 2px;
}
.hall-swiper__nav--prev { left: 14px; }
.hall-swiper__nav--next { right: 14px; }

/* Dots */
.hall-swiper__dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
  background: rgba(10, 13, 20, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 99px;
  padding: 6px 12px;
  backdrop-filter: blur(6px);
}
.hall-swiper__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.32);
  border: 0;
  cursor: pointer;
  padding: 0;
  transition: background .15s, transform .15s;
}
.hall-swiper__dot:hover {
  background: rgba(255, 255, 255, 0.55);
}
.hall-swiper__dot.is-active {
  background: #ffd35e;
  transform: scale(1.3);
}
.hall-swiper__dot:focus-visible {
  outline: 2px solid #ffd35e;
  outline-offset: 3px;
}

/* Counter */
.hall-swiper__counter {
  position: absolute;
  bottom: 14px;
  right: 16px;
  font-family: 'Cascadia Code', monospace;
  font-size: 0.82rem;
  color: #ffd35e;
  background: rgba(10, 13, 20, 0.6);
  border: 1px solid rgba(205, 161, 44, 0.25);
  padding: 4px 10px;
  border-radius: 99px;
  backdrop-filter: blur(6px);
  z-index: 2;
}
.hall-swiper__counter-sep {
  color: #8a93a6;
  margin: 0 2px;
}

/* Resume pill — appears when paused. */
.hall-swiper__resume {
  position: absolute;
  bottom: 14px;
  left: 16px;
  background: rgba(10, 13, 20, 0.78);
  color: #ffd35e;
  border: 1px solid rgba(205, 161, 44, 0.5);
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  padding: 6px 14px 6px 12px;
  border-radius: 99px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  z-index: 2;
  backdrop-filter: blur(6px);
  transition: background .15s, border-color .15s;
}
.hall-swiper__resume:hover {
  background: rgba(205, 161, 44, 0.16);
  border-color: rgba(205, 161, 44, 0.8);
}
.hall-swiper__resume:focus-visible {
  outline: 2px solid #ffd35e;
  outline-offset: 2px;
}
.hall-swiper__resume[hidden] { display: none; }

/* Single-slide state — hide every navigation control. */
.hall-swiper--single .hall-swiper__nav,
.hall-swiper--single .hall-swiper__dots,
.hall-swiper--single .hall-swiper__counter,
.hall-swiper--single .hall-swiper__resume {
  display: none;
}

/* Accessibility utility (used by the swiper live region). Add only
 * once even if multiple components define it — the CSS cascade
 * deduplicates. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Reduced-motion: kill smooth-scroll animation on the track so
 * scrollTo({behavior:'smooth'}) becomes instant. */
@media (prefers-reduced-motion: reduce) {
  .hall-swiper__track { scroll-behavior: auto; }
  .hall-swiper__dot { transition: none; }
}

/* Mobile breakpoint — shrink chevrons + tighten dot bar. */
@media (max-width: 576px) {
  .hall-swiper__nav {
    width: 36px;
    height: 56px;
    font-size: 1.4rem;
  }
  .hall-swiper__nav--prev { left: 8px; }
  .hall-swiper__nav--next { right: 8px; }
  .hall-swiper__counter {
    bottom: 10px;
    right: 8px;
    font-size: 0.74rem;
  }
  .hall-swiper__resume {
    bottom: 10px;
    left: 8px;
    font-size: 0.76rem;
    padding: 5px 12px;
  }
}

/* ── Sticky header strip ────────────────────────────────────────────── */
.hall-detail-header__sentinel {
  height: 1px;
  margin: 0;
  padding: 0;
}
.hall-detail-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(15, 18, 25, 0.96);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid #262b3c;
  padding: 16px 0;
  transition: padding .2s ease, box-shadow .2s ease;
}
.hall-detail-header.is-stuck {
  padding: 8px 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.32);
}
.hall-detail-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 18px;
  align-items: center;
}
.hall-detail-header__back {
  grid-column: 1 / -1;
  font-size: 0.82rem;
  color: #8a93a6;
  text-decoration: none;
  letter-spacing: 0.02em;
  margin-bottom: -6px;
}
.hall-detail-header__back:hover { color: #ffd35e; }
.hall-detail-header.is-stuck .hall-detail-header__back { display: none; }
.hall-detail-header__title h1 {
  font-size: clamp(1.3rem, 2.8vw, 1.85rem);
  font-weight: 900;
  letter-spacing: -0.5px;
  color: #ffd35e;
  margin: 0;
  line-height: 1.15;
}
.hall-detail-header.is-stuck .hall-detail-header__title h1 {
  font-size: 1.15rem;
}
.hall-detail-header__native {
  font-size: 0.9rem;
  color: #8a93a6;
  margin: 2px 0 0;
}
.hall-detail-header.is-stuck .hall-detail-header__native {
  display: none;
}
.hall-detail-header__meta {
  display: flex;
  gap: 6px;
  font-size: 0.86rem;
  color: #8a93a6;
  flex-wrap: wrap;
  align-items: center;
}
.hall-detail-header__meta span:first-child {
  color: #e8eaf0;
  font-weight: 700;
}
.hall-detail-header__count {
  margin-left: 6px;
  font-family: 'Cascadia Code', monospace;
  font-size: 0.74rem;
  color: #8a93a6;
}
.hall-detail-header__created-by a {
  color: var(--accent);
  text-decoration: none;
}
.hall-detail-header__created-by a:hover {
  text-decoration: underline;
}
/* Step 62 — top-contributor badge */
.hall-top-contributor-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  border-radius: 99px;
  background: rgba(251, 191, 36, .15);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, .35);
  font-size: .7rem;
  font-weight: 700;
  margin-left: 4px;
  vertical-align: middle;
}

/* ── Body layout ────────────────────────────────────────────────────── */
.hall-detail-body {
  padding: 32px 20px 80px;
}
/* Step 61 — two-column layout: prose + related sidebar */
.hall-detail-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 40px;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 992px) {
  .hall-detail-layout {
    grid-template-columns: 1fr;
  }
}
.hall-detail-prose {
  min-width: 0;
}

/* ── Related architects sidebar (step 61) ─────── */
.hall-related-sidebar {
  position: sticky;
  top: 80px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
}
.hall-related-sidebar__head {
  margin-bottom: 12px;
}
.hall-related-sidebar__title {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
}
.hall-related-sidebar__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hall-related-card__link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  padding: 6px 8px;
  border-radius: 8px;
  transition: background .12s;
}
.hall-related-card__link:hover {
  background: var(--bg-surface);
}
.hall-related-card__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-surface);
}
.hall-related-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hall-related-card__avatar--init {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-muted);
}
.hall-related-card__info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.hall-related-card__name {
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hall-related-card__meta {
  font-size: .73rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hall-related-sidebar__see-all {
  display: block;
  margin-top: 12px;
  font-size: .78rem;
  color: var(--accent);
  text-decoration: none;
  text-align: right;
  padding: 4px 8px;
}
.hall-related-sidebar__see-all:hover {
  text-decoration: underline;
}

.hall-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
}
.hall-detail-tags__chip {
  background: rgba(129, 140, 248, 0.14);
  color: #c7cfff;
  border: 1px solid rgba(129, 140, 248, 0.34);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 99px;
}
.hall-detail-tags__chip--award {
  background: rgba(205, 161, 44, 0.12);
  color: #ffd35e;
  border-color: rgba(205, 161, 44, 0.34);
  font-weight: 700;
}

/* Section */
.hall-section {
  margin: 32px 0;
  scroll-margin-top: 80px;
}
.hall-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px dashed #262b3c;
  padding-bottom: 8px;
  margin-bottom: 16px;
}
.hall-section__title {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: #ffd35e;
  margin: 0;
}
.hall-section__edit {
  font-size: 0.82rem;
  font-weight: 700;
  color: #818cf8;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 8px;
  transition: background .15s, color .15s;
}
.hall-section__edit:hover {
  background: rgba(129, 140, 248, 0.1);
  color: #c7cfff;
}
.hall-section__body {
  font-size: 1.05rem;
  line-height: 1.72;
  color: #e8eaf0;
}
.hall-section__body p {
  margin: 0 0 14px;
}
.hall-section--empty {
  text-align: center;
  padding: 40px 20px;
  color: #8a93a6;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed #262b3c;
  border-radius: 14px;
}

/* Sources footnote */
.hall-sources {
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid #262b3c;
}
.hall-sources__title {
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #8a93a6;
  margin: 0 0 12px;
}
.hall-sources__list {
  font-size: 0.92rem;
  color: #b8bdcc;
  padding-left: 24px;
}
.hall-sources__list li {
  margin-bottom: 6px;
  line-height: 1.5;
}
.hall-sources__list a {
  color: #ffd35e;
  text-decoration: none;
}
.hall-sources__list a:hover {
  text-decoration: underline;
}

/* ── Pending edit cards (placeholder grid; step 10 polishes) ────────── */
.hall-edits {
  margin-top: 60px;
  padding-top: 32px;
  border-top: 1px solid #262b3c;
}
.hall-edits__head h2 {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: #e8eaf0;
  margin: 0 0 18px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.hall-edits__count {
  font-family: 'Cascadia Code', monospace;
  font-size: 0.78rem;
  color: #ffd35e;
  background: rgba(205, 161, 44, 0.12);
  border: 1px solid rgba(205, 161, 44, 0.32);
  padding: 2px 9px;
  border-radius: 99px;
}
.hall-edits__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 768px) {
  .hall-edits__grid { grid-template-columns: 1fr; }
}
.hall-edit-card {
  background: #171b27;
  border: 1px solid #262b3c;
  border-radius: 12px;
  padding: 14px 16px;
}
.hall-edit-card__head h3 {
  font-size: 0.92rem;
  font-weight: 800;
  color: #ffd35e;
  margin: 0;
}
.hall-edit-card__meta {
  font-size: 0.78rem;
  color: #8a93a6;
  margin: 4px 0 8px;
}
.hall-edit-card__rationale {
  font-size: 0.9rem;
  color: #e8eaf0;
  margin: 0 0 10px;
  line-height: 1.55;
}
.hall-edit-card__foot {
  border-top: 1px solid #262b3c;
  padding-top: 8px;
  font-size: 0.78rem;
  color: #8a93a6;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}
.hall-edit-card__counts strong { color: #e8eaf0; }
.hall-edit-card__placeholder {
  color: #6b7388;
  font-style: italic;
  font-size: 0.74rem;
}
.hall-edits__empty {
  text-align: center;
  color: #8a93a6;
  padding: 24px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed #262b3c;
  border-radius: 12px;
}

/* ── Comments (read-only placeholder; step 12 wires AJAX form) ──────── */
.hall-comments {
  margin-top: 60px;
  padding-top: 32px;
  border-top: 1px solid #262b3c;
}
.hall-comments__head {
  margin-bottom: 18px;
}
.hall-comments__head h2 {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: #e8eaf0;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.hall-comments__count {
  font-family: 'Cascadia Code', monospace;
  font-size: 0.78rem;
  color: #2dd4bf;
  background: rgba(45, 212, 191, 0.12);
  border: 1px solid rgba(45, 212, 191, 0.32);
  padding: 2px 9px;
  border-radius: 99px;
}
.hall-comments__hint {
  font-size: 0.78rem;
  color: #6b7388;
  font-style: italic;
  margin: 4px 0 0;
}
.hall-comments__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hall-comments__list--replies {
  margin-top: 10px;
  padding-left: 24px;
  border-left: 2px solid #262b3c;
  gap: 8px;
}
.hall-comment {
  background: #171b27;
  border: 1px solid #262b3c;
  border-radius: 12px;
  padding: 12px 14px;
}
.hall-comment--reply {
  background: #1d2231;
}
.hall-comment__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.hall-comment__head strong {
  color: #ffd35e;
  font-size: 0.92rem;
  font-weight: 800;
}
.hall-comment__date {
  font-size: 0.74rem;
  color: #8a93a6;
}
.hall-comment__body {
  font-size: 0.92rem;
  color: #e8eaf0;
  line-height: 1.55;
}
.hall-comment__body p { margin: 0 0 8px; }
.hall-comments__empty {
  text-align: center;
  color: #8a93a6;
  padding: 24px;
}

/* Detail-page mobile breakpoint adjustments */
@media (max-width: 768px) {
  .hall-detail-header__inner {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .hall-detail-header__actions {
    justify-self: stretch;
  }
  .hall-section__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .hall-section__body {
    font-size: 1rem;
  }
}


/* ════════════════════════════════════════════════════════════════════ *
 * Add-topic form (step 9) — /expo/add/                                *
 * ════════════════════════════════════════════════════════════════════ */
.hall-add-page {
  background: #0a0d14;
  padding: 0 0 80px;
}
.hall-add-page__head {
  padding: 48px 20px 28px;
  border-bottom: 1px solid #262b3c;
  margin-bottom: 28px;
}
.hall-add-page__eyebrow {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:var(--accent);
  font-weight: 800;
  margin-bottom: 6px;
}
.hall-add-page__head h1 {
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  font-weight: 900;
  letter-spacing: -0.6px;
  color: #ffd35e;
  margin: 0 0 8px;
}
.hall-add-page__tag {
  color: #8a93a6;
  font-size: 1.02rem;
  max-width: 70ch;
  line-height: 1.6;
  margin: 0;
}

.hall-add-page__form {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 0 20px;
  max-width: 1100px;
}

/* Fieldsets */
.hall-form-section {
  background: #171b27;
  border: 1px solid #262b3c;
  border-radius: 16px;
  padding: 22px 24px 24px;
  margin: 0;
}
.hall-form-section legend {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: #ffd35e;
  padding: 4px 14px;
  background: #1d2231;
  border: 1px solid #262b3c;
  border-radius: 99px;
  margin-bottom: 6px;
}
.hall-form-required {
  display: inline-block;
  margin-left: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(239, 68, 68, 0.16);
  color: #fecaca;
  padding: 2px 8px;
  border-radius: 99px;
  border: 1px solid rgba(239, 68, 68, 0.32);
}

/* Rows + fields */
.hall-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 14px;
}
.hall-form-row:last-child { margin-bottom: 0; }
.hall-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.hall-form-field--narrow { max-width: 180px; }
.hall-form-field--body { margin-bottom: 18px; }
.hall-form-field label {
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #8a93a6;
}
.hall-form-help {
  font-size: 0.82rem;
  color: #8a93a6;
  margin: 4px 0 12px;
  line-height: 1.5;
}
.hall-form-field small {
  font-size: 0.78rem;
  color: #8a93a6;
}

/* Inputs */
.hall-form-field input[type="text"],
.hall-form-field input[type="number"],
.hall-form-field input[type="url"],
.hall-form-field input[type="email"],
.hall-form-field select,
.hall-form-field textarea {
  background: #0a0d14;
  color: #e8eaf0;
  border: 1px solid #262b3c;
  border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 0.92rem;
  width: 100%;
  min-height: 40px;
}
.hall-form-field select[multiple] {
  min-height: 200px;
  padding: 6px;
}
.hall-form-field input:focus,
.hall-form-field select:focus,
.hall-form-field textarea:focus {
  outline: none;
  border-color: #cda12c;
  box-shadow: 0 0 0 3px rgba(205, 161, 44, 0.18);
}
.hall-form-field input[type="file"] {
  padding: 8px;
  font-size: 0.86rem;
}

/* Field-level error list */
.hall-form-field .errorlist,
.hall-form-errors .errorlist,
.hall-form-errors ul {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  color: #fecaca;
  font-size: 0.82rem;
}
.hall-form-errors {
  background: rgba(239, 68, 68, 0.08);
  border-inline-start: 4px solid #ef4444;
  border-radius: 0;
  border-start-end-radius: 12px;
  border-end-end-radius: 12px;
  padding: 12px 18px;
  color: #fecaca;
  font-size: 0.92rem;
}

/* Formset rows */
.hall-formset {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hall-formset__row {
  background: #0a0d14;
  border: 1px solid #262b3c;
  border-radius: 12px;
  padding: 14px 16px;
}

/* Submit row */
.hall-add-page__actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  align-items: center;
  margin-top: 8px;
  flex-wrap: wrap;
}


/* "NEW" badge on the topic-grid card (step 9) */
.hall-card__badge--new {
  background: rgba(52, 211, 153, 0.18);
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.4);
  top: 10px;
  left: auto;
  right: 10px;
}
/* Step 64 — quality grade badge (bottom-left of cover) */
.hall-card__grade {
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-size: 0.65rem;
  font-weight: 800;
  /* FND-075(c) / FND-073 decision 4 — one badge shape, and it is a pill.
     This was a 20x18 SQUARE at radius 5px sitting in the SAME slot as the
     amber .hall-card__badge--stub pill (50x26 at radius 99px): two shapes and
     two colours in one slot, on the same card. Matched to the pill so the slot
     reads as one component. (The finding also reports the right half being
     clipped by the image container; measured here the badge sits 299px inside
     the container's right edge, so that half does not reproduce and is not
     claimed as fixed.) */
  padding: 2px 8px;
  border-radius: 99px;
  border: 1px solid transparent;
  line-height: 1.2;
  letter-spacing: 0.04em;
}
.hall-card__grade--a {
  background: rgba(52, 211, 153, 0.18);
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.4);
}
.hall-card__grade--b {
  background: rgba(163, 230, 53, 0.16);
  color: #a3e635;
  border-color: rgba(163, 230, 53, 0.35);
}
.hall-card__grade--c {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.35);
}
.hall-card__grade--d {
  background: rgba(251, 146, 60, 0.15);
  color: #fb923c;
  border-color: rgba(251, 146, 60, 0.35);
}
.hall-card__grade--f {
  /* Dark-mode contrast, measured on the badge's own red-tinted surface
     (card + rgba(239,68,68,.14)):
         #f87171          4.32  (was shipping — fails 4.5)
         var(--danger)    3.01  (tried; the token's dark value #d05a5a is
                                 DARKER than what it sits on, so it is worse —
                                 --danger is AA on the page background, not on
                                 a danger-tinted chip)
         #fca5a5          passes
     The light override below already passes at #991b1b and is unchanged. */
  background: rgba(239, 68, 68, 0.14);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.32);
}

/* Step 60 — stub badge on the card */
.hall-card__badge--stub {
  background: rgba(251, 191, 36, 0.14);
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.35);
  top: auto;
  left: auto;
  right: 10px;
  bottom: 10px;
}
.hall-card__badge--new + .hall-card__badge,
.hall-card__badge:has(+ .hall-card__badge--new) {
  /* When both Featured and NEW badges exist, keep them stacked. */
  /* (Featured stays top-left; NEW stays top-right — no rule needed
   * beyond the existing absolute positioning above.) */
}

/* Mobile breakpoint */
@media (max-width: 768px) {
  .hall-form-row {
    grid-template-columns: 1fr;
  }
  .hall-form-field--narrow {
    max-width: 100%;
  }
  .hall-add-page__actions {
    justify-content: stretch;
  }
  .hall-add-page__actions .arch-cta,
  .hall-add-page__actions .arch-btn-ghost {
    flex: 1;
    justify-content: center;
  }
}


/* ════════════════════════════════════════════════════════════════════ *
 * Edit suggestion (step 10): /expo/<slug>/edit/<anchor>/              *
 * + diff renderer + folded card on the topic detail page              *
 * ════════════════════════════════════════════════════════════════════ */

/* ── Edit page ──────────────────────────────────────────────────────── */
.hall-edit-page {
  background: #0a0d14;
  padding: 0 0 80px;
}
.hall-edit-page__head {
  padding: 32px 20px 28px;
  border-bottom: 1px solid #262b3c;
  margin-bottom: 28px;
}
.hall-edit-page__back {
  display: inline-block;
  font-size: 0.86rem;
  color: #818cf8;
  text-decoration: none;
  margin-bottom: 12px;
}
.hall-edit-page__back:hover { color: #c7cfff; }
.hall-edit-page__eyebrow {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:var(--accent);
  font-weight: 800;
  margin-bottom: 6px;
}
.hall-edit-page__head h1 {
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  font-weight: 900;
  letter-spacing: -0.6px;
  color: #ffd35e;
  margin: 0 0 8px;
}
.hall-edit-page__tag {
  color: #8a93a6;
  font-size: 1.02rem;
  max-width: 70ch;
  line-height: 1.6;
  margin: 0;
}
.hall-edit-page__form {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 0 20px;
  max-width: 1100px;
}
.hall-edit-page__actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* ── Folded edit-card on topic detail ───────────────────────────────── */
.hall-edit-card {
  background: #171b27;
  border: 1px solid #262b3c;
  border-radius: 12px;
  overflow: hidden;
  list-style: none;
}
/* Reset the default <details>/<summary> arrow — we want our own chevron. */
.hall-edit-card::-webkit-details-marker,
.hall-edit-card > summary::-webkit-details-marker { display: none; }
.hall-edit-card > summary { list-style: none; }

.hall-edit-card__summary {
  padding: 14px 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  cursor: pointer;
  transition: background .15s;
}
.hall-edit-card__summary:hover {
  background: rgba(255, 255, 255, 0.02);
}
.hall-edit-card[open] > .hall-edit-card__summary {
  border-bottom: 1px solid #262b3c;
  background: rgba(205, 161, 44, 0.04);
}
.hall-edit-card[open] > .hall-edit-card__summary::after {
  content: "▴";
  position: absolute;
  right: 16px;
  top: 14px;
  color: #8a93a6;
}
.hall-edit-card__summary {
  position: relative;
}
.hall-edit-card:not([open]) > .hall-edit-card__summary::after {
  content: "▾";
  position: absolute;
  right: 16px;
  top: 14px;
  color: #8a93a6;
}

.hall-edit-card__summary-main {
  min-width: 0;
  padding-right: 24px; /* room for the chevron pseudo-element */
}
.hall-edit-card__title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #ffd35e;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.hall-edit-card__title-tag {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #818cf8;
  background: rgba(129, 140, 248, 0.14);
  padding: 2px 7px;
  border-radius: 99px;
}
.hall-edit-card__meta {
  font-size: 0.78rem;
  color: #8a93a6;
  margin: 4px 0 8px;
}
.hall-edit-card__rationale-short {
  font-size: 0.9rem;
  color: #e8eaf0;
  line-height: 1.5;
  margin: 0;
}
.hall-edit-card__summary-stats {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
  white-space: nowrap;
  padding-right: 18px;
}
.hall-edit-card__effective {
  font-family: 'Cascadia Code', monospace;
  font-size: 0.86rem;
  color: #e8eaf0;
}
.hall-edit-card__effective strong {
  color: #34d399;
  font-size: 1.1rem;
  font-weight: 800;
}
.hall-edit-card__effective small {
  color: #8a93a6;
  margin-left: 2px;
}
.hall-edit-card__remaining {
  font-size: 0.74rem;
  color: #fb923c;
}
.hall-edit-card__threshold-met {
  font-size: 0.74rem;
  font-weight: 800;
  color: #34d399;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hall-edit-card__body {
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hall-edit-card__row h4 {
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #8a93a6;
  margin: 0 0 8px;
}
.hall-edit-card__rationale-full {
  font-size: 0.92rem;
  color: #e8eaf0;
  line-height: 1.6;
  margin: 0;
}
.hall-edit-card__sources {
  font-size: 0.86rem;
  color: #b8bdcc;
  padding-left: 22px;
  margin: 0;
}
.hall-edit-card__sources li { margin-bottom: 4px; line-height: 1.5; }
.hall-edit-card__sources a { color: #ffd35e; text-decoration: none; }
.hall-edit-card__sources a:hover { text-decoration: underline; }

.hall-edit-card__formula {
  font-family: 'Cascadia Code', monospace;
  font-size: 0.78rem;
  color: #8a93a6;
  background: #0a0d14;
  border: 1px solid #262b3c;
  border-radius: 8px;
  padding: 8px 12px;
  margin: 0;
}

.hall-edit-card__actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 4px;
  border-top: 1px dashed #262b3c;
  padding-top: 12px;
}
.hall-edit-card__flag {
  margin-left: auto;
  font-size: 0.78rem;
}

/* ── Diff renderer ──────────────────────────────────────────────────── */
.hall-diff {
  background: #0a0d14;
  border: 1px solid #262b3c;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 0.92rem;
  line-height: 1.7;
  color: #e8eaf0;
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 50vh;
  overflow-y: auto;
}
.diff-ins,
.diff-del {
  padding: 1px 4px;
  border-radius: 4px;
  text-decoration: none;
}
/* Red/green AND +/- markers — never rely on colour alone (a11y). */
.diff-ins {
  background: rgba(52, 211, 153, 0.16);
  color: #6ee7b7;
  border: 1px solid rgba(52, 211, 153, 0.3);
}
.diff-ins::before {
  content: "+";
  font-weight: 800;
  margin-right: 2px;
  color: #34d399;
}
.diff-del {
  background: rgba(239, 68, 68, 0.16);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.3);
  text-decoration: line-through;
  text-decoration-color: rgba(239, 68, 68, 0.6);
}
.diff-del::before {
  content: "−";
  font-weight: 800;
  margin-right: 2px;
  color: #ef4444;
  text-decoration: none;
  display: inline-block;
}
.diff-noop {
  font-style: italic;
  color: #8a93a6;
}

/* ── Compact sizing for voting buttons inside the edit card ─────────── */
.hall-edit-card__actions .arch-btn-ok,
.hall-edit-card__actions .arch-btn-red {
  padding: 8px 14px;
  height: auto;
  font-size: 0.86rem;
  gap: 4px;
}

/* ── Edit-card mobile breakpoint ────────────────────────────────────── */
@media (max-width: 768px) {
  .hall-edit-card__summary {
    grid-template-columns: 1fr;
  }
  .hall-edit-card__summary-stats {
    text-align: left;
    align-items: flex-start;
    padding-right: 0;
  }
  .hall-edit-page__actions {
    justify-content: stretch;
  }
  .hall-edit-page__actions .arch-cta,
  .hall-edit-page__actions .arch-btn-ghost {
    flex: 1;
    justify-content: center;
  }
}


/* ════════════════════════════════════════════════════════════════════ *
 * AJAX voting (step 11) — active state, count pills, toast, applied   *
 * card animation                                                       *
 * ════════════════════════════════════════════════════════════════════ */

/* Inline count pill on each vote button */
.hall-edit-card__btn-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 99px;
  margin-left: 4px;
  background: rgba(255, 255, 255, 0.06);
  font-family: 'Cascadia Code', monospace;
  font-size: 0.74rem;
  font-weight: 700;
}

/* Active vote — emerald outline on Agree, rust on Disagree */
.arch-btn-ok.is-active {
  background: rgba(52, 211, 153, 0.28);
  border-color: #34d399;
  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.32);
}
.arch-btn-red.is-active {
  background: rgba(239, 68, 68, 0.28);
  border-color: #ef4444;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.32);
}

/* Disabled state — visible focus for tooltip discovery */
[data-vote]:disabled,
[data-vote][aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
}
[data-vote]:disabled:focus-visible,
[data-vote][aria-disabled="true"]:focus-visible {
  outline: 2px solid #818cf8;
  outline-offset: 2px;
}

/* Reaching threshold — card celebration before removal */
.hall-edit-card.is-applied {
  border-color: rgba(52, 211, 153, 0.6);
  background: rgba(52, 211, 153, 0.08);
  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.18);
}
.hall-edit-card.is-applied .hall-edit-card__title {
  color: #34d399;
}

/* Live "remaining" stamp toggles to emerald when threshold met */
.hall-edit-card__remaining.is-met {
  color: #34d399;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Flag modal — reason + note form inside the shared #hallFlagModal.
   The .form-select / .form-control fields inherit the site's dark + RTL
   theme from style.css; only the layout chrome lives here. */
.arch-modal-target {
  margin: 2px 0 0;
  font-size: var(--fs-sm);
  font-style: italic;
  color: var(--text-muted, #8b949e);
  text-align: center;
}
.hall-flag-field { margin-block-start: 14px; text-align: start; }
.hall-flag-label {
  display: block;
  margin-block-end: 6px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-primary, #e6edf3);
}
.hall-flag-optional { font-weight: 400; color: var(--text-muted, #8b949e); }
.hall-flag-form .arch-modal-actions { margin-block-start: 20px; }
.hall-detail-header__flag.is-flagged,
.hall-edit-card__flag.is-flagged { opacity: 0.6; cursor: default; }

/* .hall-toast — removed in FR-4 W10; hall toasts now use the site-wide archToast (arch-modals.js). */

/* Respect reduced-motion — disable card-removal animation entirely
 * (the script still calls .remove() once the timeout completes so
 * functionality is preserved). */
@media (prefers-reduced-motion: reduce) {
  .hall-edit-card { transition: none !important; }
}


/* ════════════════════════════════════════════════════════════════════ *
 * Comments + follow (step 12)                                         *
 * ════════════════════════════════════════════════════════════════════ */

/* Top-level comment form */
.hall-comment-form {
  background: #171b27;
  border: 1px solid #262b3c;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hall-comment-form textarea {
  width: 100%;
  background: #0a0d14;
  color: #e8eaf0;
  border: 1px solid #262b3c;
  border-radius: 8px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 0.94rem;
  resize: vertical;
  min-height: 70px;
}
.hall-comment-form textarea:focus {
  outline: none;
  border-color: #cda12c;
  box-shadow: 0 0 0 3px rgba(205, 161, 44, 0.18);
}
.hall-comment-form__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Inline reply form — slightly recessed inside the parent comment */
.hall-comment-form--reply {
  margin: 10px 0 4px;
  background: #1d2231;
  padding: 10px 12px;
}
.hall-comment-form--reply textarea {
  min-height: 56px;
  font-size: 0.9rem;
}

.hall-comment__actions {
  margin-top: 6px;
}

/* Empty list-item — gets removed on first comment insertion */
.hall-comments__empty {
  list-style: none;
  text-align: center;
  color: #8a93a6;
  padding: 18px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed #262b3c;
  border-radius: 10px;
}

/* Follow button — pressed state */
[data-follow-toggle].is-following {
  background: rgba(52, 211, 153, 0.18);
  border-color: rgba(52, 211, 153, 0.5);
  color: #6ee7b7;
}
[data-follow-toggle].is-following::before {
  content: "✓";
  margin-right: 4px;
  font-weight: 800;
}

/* Anonymous viewer's grey-out follow stamp (not a button) */
.hall-detail-header__follow-anon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0.5;
  cursor: default;
}


/* ════════════════════════════════════════════════════════════════════ *
 * Light-theme overrides                                               *
 *                                                                     *
 * expo.css was written with hardcoded dark tokens throughout.         *
 * This block remaps every dark-specific surface, text, and border     *
 * to the site's [data-theme="light"] design variables.               *
 * Selector order mirrors the component order above.                   *
 * ════════════════════════════════════════════════════════════════════ */

/* — Hero ————————————————————————————————————————————————————————————— */
[data-theme="light"] .hall-hero {
  background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-base) 100%);
  border-bottom-color: var(--border);
}
[data-theme="light"] .hall-hero__eyebrow { color: var(--accent); }
/* light override retired with the gradient — var(--text-primary) is theme-aware */
[data-theme="light"] .hall-hero__tag { color: var(--text-muted); }
[data-theme="light"] .hall-hero__featured {
  background: rgba(184, 134, 42, 0.08);
  border-color: rgba(184, 134, 42, 0.28);
  color: var(--text-primary);
}
[data-theme="light"] .hall-hero__featured:hover {
  background: rgba(184, 134, 42, 0.14);
  border-color: rgba(184, 134, 42, 0.50);
}
[data-theme="light"] .hall-hero__featured-eyebrow { color:var(--accent); }
[data-theme="light"] .hall-hero__featured-name    { color: var(--accent); }
[data-theme="light"] .hall-hero__featured-meta    { color: var(--text-muted); }

/* — Add CTA bar ———————————————————————————————————————————————————— */
[data-theme="light"] .hall-add {
  background: var(--bg-base);
  border-bottom-color: var(--border);
}
[data-theme="light"] .hall-add__body {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-muted);
}

/* — Sticky filters ————————————————————————————————————————————————— */
[data-theme="light"] .hall-filters {
  background: rgba(245, 246, 248, 0.96);
  border-bottom-color: var(--border);
}
[data-theme="light"] .hall-filter__label { color: var(--text-muted); }
[data-theme="light"] .hall-filter select {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border);
}

/* — Grid section ——————————————————————————————————————————————————— */
[data-theme="light"] .hall-grid-section { background: var(--bg-base); }

/* — Topic card ————————————————————————————————————————————————————— */
/* (Wave 4 · FR-4) .hall-card base now uses --bg-card / --border tokens (was hardcoded
 * #171b27 / #262b3c, which broke theming); the light override that re-fixed the hex is
 * no longer needed and was removed. */
[data-theme="light"] .hall-card__cover {
  background: linear-gradient(135deg, var(--bg-surface), var(--bg-card));
}
[data-theme="light"] .hall-card__badge {
  background: rgba(184, 134, 42, 0.14);
  color: #78350f;
  border-color: rgba(184, 134, 42, 0.36);
}
[data-theme="light"] .hall-card__name a { color: var(--text-primary); }
[data-theme="light"] .hall-card__name a:hover { color: var(--accent); }
[data-theme="light"] .hall-card__native,
[data-theme="light"] .hall-card__meta   { color: var(--text-muted); }
[data-theme="light"] .hall-card__stats  { border-top-color: var(--border); }
[data-theme="light"] .hall-card__stat-num { color: var(--accent); }
[data-theme="light"] .hall-card__stats li { color: var(--accent); }
[data-theme="light"] .hall-card__stats li i { color: var(--text-muted); }

/* Grade badges — use saturated-dark palettes for contrast on white */
[data-theme="light"] .hall-card__badge--new {
  background: rgba(5, 150, 105, 0.12);
  color: #065f46;
  border-color: rgba(5, 150, 105, 0.30);
}
[data-theme="light"] .hall-card__grade--a {
  background: rgba(5, 150, 105, 0.12);
  color: #065f46;
  border-color: rgba(5, 150, 105, 0.30);
}
[data-theme="light"] .hall-card__grade--b {
  background: rgba(77, 124, 15, 0.12);
  color: #3f6212;
  border-color: rgba(77, 124, 15, 0.28);
}
[data-theme="light"] .hall-card__grade--c,
[data-theme="light"] .hall-card__badge--stub {
  background: rgba(217, 119, 6, 0.12);
  color: #92400e;
  border-color: rgba(217, 119, 6, 0.28);
}
[data-theme="light"] .hall-card__grade--d {
  background: rgba(194, 65, 12, 0.10);
  color: #7c2d12;
  border-color: rgba(194, 65, 12, 0.25);
}
[data-theme="light"] .hall-card__grade--f {
  background: rgba(185, 28, 28, 0.10);
  color: #991b1b;
  border-color: rgba(185, 28, 28, 0.25);
}

/* — Empty state + pagination ——————————————————————————————————————— */
[data-theme="light"] .hall-empty        { color: var(--text-muted); }
[data-theme="light"] .hall-empty h3     { color: var(--text-primary); }
[data-theme="light"] .hall-pagination-wrap { border-top-color: var(--border); }

/* — Banners (hidden / stub) ———————————————————————————————————————— */
[data-theme="light"] .hall-hidden-banner {
  background: rgba(220, 38, 38, 0.08);
  border-bottom-color: rgba(220, 38, 38, 0.50);
  color: #991b1b;
}
[data-theme="light"] .hall-hidden-banner strong { color: #dc2626; }
[data-theme="light"] .hall-hidden-banner a      { color: var(--accent); }

[data-theme="light"] .hall-stub-banner {
  background: rgba(217, 119, 6, 0.08);
  border-bottom-color: rgba(217, 119, 6, 0.35);
  color: #78350f;
}
[data-theme="light"] .hall-stub-banner__icon,
[data-theme="light"] .hall-stub-banner__title { color: #92400e; }
[data-theme="light"] .hall-stub-banner__text  { color: #78350f; }

/* — Sticky detail header ————————————————————————————————————————— */
[data-theme="light"] .hall-detail-header {
  background: rgba(245, 246, 248, 0.96);
  border-bottom-color: var(--border);
}
[data-theme="light"] .hall-detail-header.is-stuck {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .hall-detail-header__back     { color: var(--text-muted); }
[data-theme="light"] .hall-detail-header__back:hover { color: var(--accent); }
[data-theme="light"] .hall-detail-header__title h1 { color: var(--accent); }
[data-theme="light"] .hall-detail-header__native   { color: var(--text-muted); }
[data-theme="light"] .hall-detail-header__meta     { color: var(--text-muted); }
[data-theme="light"] .hall-detail-header__meta span:first-child { color: var(--text-primary); }
[data-theme="light"] .hall-detail-header__count    { color: var(--text-muted); }

/* Top-contributor badge */
[data-theme="light"] .hall-top-contributor-badge {
  background: rgba(184, 134, 42, 0.12);
  color: #78350f;
  border-color: rgba(184, 134, 42, 0.30);
}

/* — Detail tags/chips ——————————————————————————————————————————————— */
[data-theme="light"] .hall-detail-tags__chip {
  background: rgba(79, 70, 229, 0.08);
  color: #4338ca;
  border-color: rgba(79, 70, 229, 0.22);
}
[data-theme="light"] .hall-detail-tags__chip--award {
  background: rgba(184, 134, 42, 0.12);
  color: #78350f;
  border-color: rgba(184, 134, 42, 0.30);
}

/* — Section body —————————————————————————————————————————————————— */
[data-theme="light"] .hall-section__head  { border-bottom-color: var(--border); }
[data-theme="light"] .hall-section__title { color: var(--accent); }
[data-theme="light"] .hall-section__edit  { color: #4f46e5; }
[data-theme="light"] .hall-section__edit:hover {
  background: rgba(79, 70, 229, 0.08);
  color: #4338ca;
}
[data-theme="light"] .hall-section__body  { color: var(--text-primary); }
[data-theme="light"] .hall-section--empty {
  background: var(--overlay-soft);
  border-color: var(--border);
}

/* — Sources footnote ————————————————————————————————————————————— */
[data-theme="light"] .hall-sources            { border-top-color: var(--border); }
[data-theme="light"] .hall-sources__title     { color: var(--text-muted); }
[data-theme="light"] .hall-sources__list      { color: var(--text-secondary); }
[data-theme="light"] .hall-sources__list a    { color: var(--accent); }

/* — Pending edit cards ——————————————————————————————————————————— */
[data-theme="light"] .hall-edits             { border-top-color: var(--border); }
[data-theme="light"] .hall-edits__head h2    { color: var(--text-primary); }
[data-theme="light"] .hall-edits__count {
  color: #78350f;
  background: rgba(184, 134, 42, 0.12);
  border-color: rgba(184, 134, 42, 0.28);
}
[data-theme="light"] .hall-edit-card {
  background: var(--bg-card);
  border-color: var(--border);
}
[data-theme="light"] .hall-edit-card__summary:hover { background: var(--overlay-soft); }
[data-theme="light"] .hall-edit-card[open] > .hall-edit-card__summary {
  background: rgba(184, 134, 42, 0.04);
  border-bottom-color: var(--border);
}
[data-theme="light"] .hall-edit-card__title          { color: var(--accent); }
[data-theme="light"] .hall-edit-card__meta          { color: var(--text-muted); }
[data-theme="light"] .hall-edit-card__rationale-short,
[data-theme="light"] .hall-edit-card__effective,
[data-theme="light"] .hall-edit-card__rationale-full { color: var(--text-primary); }
[data-theme="light"] .hall-edit-card__sources        { color: var(--text-secondary); }
[data-theme="light"] .hall-edit-card__sources a      { color: var(--accent); }
[data-theme="light"] .hall-edit-card__formula {
  background: var(--bg-base);
  border-color: var(--border);
  color: var(--text-muted);
}
[data-theme="light"] .hall-edit-card__counts strong { color: var(--text-primary); }
[data-theme="light"] .hall-edits__empty {
  background: var(--overlay-soft);
  border-color: var(--border);
}

/* — Diff renderer ———————————————————————————————————————————————— */
[data-theme="light"] .hall-diff {
  background: var(--bg-base);
  border-color: var(--border);
  color: var(--text-primary);
}
[data-theme="light"] .diff-ins {
  background: rgba(5, 150, 105, 0.12);
  color: #065f46;
  border-color: rgba(5, 150, 105, 0.28);
}
[data-theme="light"] .diff-ins::before  { color: #059669; }
[data-theme="light"] .diff-del {
  background: rgba(220, 38, 38, 0.10);
  color: #991b1b;
  border-color: rgba(220, 38, 38, 0.25);
  text-decoration-color: rgba(220, 38, 38, 0.50);
}
[data-theme="light"] .diff-del::before  { color: #dc2626; }
[data-theme="light"] .diff-noop         { color: var(--text-muted); }

/* — Vote button pills ————————————————————————————————————————————— */
[data-theme="light"] .hall-edit-card__btn-count { background: rgba(0, 0, 0, 0.06); }
[data-theme="light"] .arch-btn-ok.is-active {
  background: rgba(5, 150, 105, 0.15);
  border-color: #059669;
  box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.22);
}
[data-theme="light"] .hall-edit-card.is-applied {
  border-color: rgba(5, 150, 105, 0.45);
  background: rgba(5, 150, 105, 0.06);
  box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.14);
}
[data-theme="light"] .hall-edit-card.is-applied .hall-edit-card__title { color: #059669; }
[data-theme="light"] .hall-edit-card__remaining.is-met                 { color: #059669; }

/* [data-theme="light"] .hall-toast — removed in FR-4 W10 (toast unified onto archToast). */

/* — Comments ————————————————————————————————————————————————————— */
[data-theme="light"] .hall-comments           { border-top-color: var(--border); }
[data-theme="light"] .hall-comments__count {
  color: #0e7490;
  background: rgba(6, 182, 212, 0.10);
  border-color: rgba(6, 182, 212, 0.28);
}
[data-theme="light"] .hall-comments__hint     { color: var(--text-muted); }
[data-theme="light"] .hall-comments__list--replies { border-left-color: var(--border); }
[data-theme="light"] .hall-comment {
  background: var(--bg-card);
  border-color: var(--border);
}
[data-theme="light"] .hall-comment--reply     { background: var(--bg-surface); }
[data-theme="light"] .hall-comment__head strong { color: var(--accent); }
[data-theme="light"] .hall-comment__date      { color: var(--text-muted); }
[data-theme="light"] .hall-comment__body      { color: var(--text-primary); }
[data-theme="light"] .hall-comments__empty {
  color: var(--text-muted);
  background: var(--overlay-soft);
  border-color: var(--border);
}

/* — Comment form ————————————————————————————————————————————————— */
[data-theme="light"] .hall-comment-form {
  background: var(--bg-card);
  border-color: var(--border);
}
[data-theme="light"] .hall-comment-form textarea {
  background: var(--bg-base);
  color: var(--text-primary);
  border-color: var(--border);
}
[data-theme="light"] .hall-comment-form--reply { background: var(--bg-surface); }

/* — Add / Edit page shells ——————————————————————————————————————— */
[data-theme="light"] .hall-add-page,
[data-theme="light"] .hall-edit-page           { background: var(--bg-base); }
[data-theme="light"] .hall-add-page__head,
[data-theme="light"] .hall-edit-page__head     { border-bottom-color: var(--border); }
[data-theme="light"] .hall-add-page__tag,
[data-theme="light"] .hall-edit-page__tag      { color: var(--text-muted); }
[data-theme="light"] .hall-add-page__head h1,
[data-theme="light"] .hall-edit-page__head h1  { color: var(--accent); }
[data-theme="light"] .hall-edit-page__back     { color: #4f46e5; }
[data-theme="light"] .hall-edit-page__back:hover { color: #4338ca; }

/* — Form sections (add + edit pages) ————————————————————————————— */
[data-theme="light"] .hall-form-section {
  background: var(--bg-card);
  border-color: var(--border);
}
[data-theme="light"] .hall-form-section legend {
  background: var(--bg-surface);
  border-color: var(--border);
  color: var(--accent);
}
[data-theme="light"] .hall-form-field label,
[data-theme="light"] .hall-form-help,
[data-theme="light"] .hall-form-field small { color: var(--text-muted); }
[data-theme="light"] .hall-form-field input,
[data-theme="light"] .hall-form-field select,
[data-theme="light"] .hall-form-field textarea {
  background: var(--bg-base);
  color: var(--text-primary);
  border-color: var(--border);
}
[data-theme="light"] .hall-formset__row {
  background: var(--bg-base);
  border-color: var(--border);
}

/* — Follow button (detail page) ————————————————————————————————— */
[data-theme="light"] [data-follow-toggle].is-following {
  background: rgba(5, 150, 105, 0.12);
  border-color: rgba(5, 150, 105, 0.40);
  color: #065f46;
}

/* FND-073 decision 3 — the Featured architect as a standalone card, after the
   shared centred page header (the navy .hall-hero band it used to sit in was
   deleted). Centred, capped width, gold top-accent to match .co-hero / the
   list-hero language. */
.hall-featured-card{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  position:relative;overflow:hidden;
  max-width:420px;margin:0 auto 26px;padding:16px 22px;
  text-align:center;text-decoration:none;
  background:radial-gradient(120% 140% at 50% 0%, rgba(205,161,44,.10), transparent 60%), var(--bg-card);
  border:1px solid var(--border);border-radius:var(--radius-md);
  transition:border-color .15s var(--ease), transform .15s var(--ease);
}
.hall-featured-card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
}
.hall-featured-card:hover{border-color:rgba(205,161,44,.45);transform:translateY(-2px)}
.hall-featured-card__eyebrow{font-size:var(--fs-2xs);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.hall-featured-card__name{font-size:var(--fs-lg);font-weight:800;color:var(--text-primary);letter-spacing:-.01em}
.hall-featured-card__meta{font-size:var(--fs-sm);color:var(--text-secondary)}