/* win95-base.css — Windows 95 Base Styles, Resets & Utility Classes
   SYNC: public/assets/css/win95-base.css must be kept identical. */

/* ================================================================
   GLOBAL RESETS
   ================================================================ */

/* Nuclear border-radius reset — kills all ~493 instances at once */
*,
*::before,
*::after {
  border-radius: 0 !important;
}

/* Exception: Leaflet map elements need their native border-radius */
.leaflet-container *,
.leaflet-container *::before,
.leaflet-container *::after,
.leaflet-popup-content-wrapper,
.leaflet-popup-tip,
.leaflet-marker-icon {
  border-radius: revert !important;
}

/* ================================================================
   TYPOGRAPHY
   ================================================================ */

body {
  font-family: var(--font-body) !important;
  color: var(--gnf-text);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 900;
}

code, pre, .mono {
  font-family: var(--font-mono);
}

/* Opt-in decorative font (Comic Sans) */
.font-decorative {
  font-family: var(--font-decorative) !important;
}

/* ================================================================
   BEVELED WINDOW
   ================================================================ */

.win95-window {
  background: var(--window-bg);
  border: var(--window-border-width) solid;
  border-color: var(--bevel-outset);
  box-shadow: var(--shadow-outset), var(--window-shadow);
}

/* ================================================================
   TITLE BAR (standardized across all windows)
   ================================================================ */

.win95-titlebar {
  background: var(--titlebar-bg);
  padding: var(--titlebar-padding);
  min-height: var(--titlebar-min-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 13px;
  font-family: var(--font-body);
  color: var(--titlebar-text);
  cursor: grab;
  user-select: none;
  border-bottom: 1px solid var(--gnf-border-pink);
}

/* ================================================================
   CLOSE BUTTON (standardized — identical on every window)
   ================================================================ */

.win95-close-btn {
  width: var(--close-btn-size);
  height: var(--close-btn-size);
  min-width: var(--close-btn-size);
  min-height: var(--close-btn-size);
  background: var(--close-btn-bg);
  border: 2px solid;
  border-color: var(--bevel-outset);
  box-shadow: var(--shadow-outset);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
  padding: 0;
  line-height: 1;
  color: var(--gnf-text);
  font-family: var(--font-body);
}

.win95-close-btn:hover {
  background: #d0d0d0;
}

.win95-close-btn:active {
  border-color: var(--bevel-inset);
  box-shadow: var(--shadow-inset);
  padding: 1px 0 0 1px;
}

.win95-close-btn:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

/* ================================================================
   BUTTONS
   ================================================================ */

.win95-btn {
  background: var(--btn-bg);
  border: var(--btn-border-width) solid;
  border-color: var(--bevel-outset);
  box-shadow: var(--shadow-outset);
  padding: var(--btn-padding);
  font-size: var(--btn-font-size);
  font-family: var(--font-body);
  font-weight: bold;
  cursor: pointer;
  color: var(--gnf-text);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: none;
}

.win95-btn:hover {
  background: #e8e8e8;
}

.win95-btn:active {
  border-color: var(--bevel-inset);
  box-shadow: var(--shadow-inset);
  transform: translate(1px, 1px);
}

.win95-btn:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

.win95-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  border-color: #ccc;
  box-shadow: none;
}

.win95-btn-primary {
  background: var(--btn-primary-bg);
}

.win95-btn-primary:hover {
  background: #ffe0f0;
}

/* Compact square icon button (e.g., browser nav controls) */
.nav-icon-btn {
  padding: 3px 6px;
  min-width: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.nav-icon-btn svg {
  display: block;
  color: var(--gnf-text);
}

.nav-icon-btn:disabled svg {
  color: #888;
}

/* ================================================================
   INSET PANEL (for content areas, sunken regions)
   ================================================================ */

.win95-inset {
  border: 2px solid;
  border-color: var(--bevel-inset);
  box-shadow: var(--shadow-inset);
  background: var(--gnf-bg);
}

/* ================================================================
   OUTSET PANEL (for raised content cards)
   ================================================================ */

.win95-panel {
  border: 2px solid;
  border-color: var(--bevel-outset);
  box-shadow: var(--shadow-outset);
  background: var(--gnf-bg);
}

/* ================================================================
   TAB BUTTONS (browser-style horizontal tabs)
   ================================================================ */

.win95-tab {
  background: var(--gnf-bg-silver);
  border: 2px solid;
  border-color: var(--bevel-inset);
  padding: 4px 12px;
  margin-right: 4px;
  position: relative;
  top: 1px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--gnf-text);
  cursor: pointer;
  transition: none;
}

.win95-tab:hover {
  background: #e8e8e8;
}

.win95-tab.is-active {
  background: var(--gnf-bg);
  border-color: var(--bevel-outset);
  border-bottom-color: var(--gnf-bg);
  font-weight: bold;
}

.win95-tab:focus-visible {
  outline: var(--focus-outline);
  outline-offset: -2px;
}

/* ================================================================
   FORM INPUTS (global inset bevel)
   ================================================================ */

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea,
select {
  border: 2px solid;
  border-color: var(--bevel-inset);
  box-shadow: var(--shadow-inset);
  background: var(--gnf-bg);
  font-family: var(--font-body);
  padding: 4px 6px;
  color: var(--gnf-text);
}

input:focus,
textarea:focus,
select:focus {
  outline: var(--focus-outline);
  outline-offset: 1px;
}

/* ================================================================
   LINKS (always underlined, instant color changes)
   ================================================================ */

a {
  color: var(--link-color);
  text-decoration: underline;
  transition: none;
}

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

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

a:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

/* ================================================================
   GROOVE HR DIVIDER
   ================================================================ */

hr,
.win95-groove {
  border: none;
  border-top: 1px solid var(--gnf-border-pink);
  border-bottom: 1px solid rgba(255, 255, 255, 0.8);
  margin: 16px 0;
  height: 0;
}

/* ================================================================
   CONSTRUCTION STRIPES (pastel pink/white)
   ================================================================ */

.win95-stripes {
  background: repeating-linear-gradient(
    -45deg,
    var(--stripe-color-1),
    var(--stripe-color-1) var(--stripe-size),
    var(--stripe-color-2) var(--stripe-size),
    var(--stripe-color-2) calc(var(--stripe-size) * 2)
  );
  padding: 4px;
}

/* ================================================================
   HIT COUNTER
   ================================================================ */

.win95-hit-counter {
  background: var(--counter-bg);
  color: var(--counter-text);
  font-family: var(--counter-font);
  font-size: 14px;
  padding: 6px 16px;
  display: inline-block;
  border: 2px solid;
  border-color: var(--bevel-inset);
  box-shadow: var(--shadow-inset);
  letter-spacing: 2px;
}

/* ================================================================
   "NEW!" / "HOT!" BADGE
   ================================================================ */

.win95-badge-new {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: bold;
  color: var(--gnf-pink-400);
  text-transform: uppercase;
  animation: badge-pulse 1.5s ease-in-out infinite;
}

@keyframes badge-pulse {
  0%, 100% {
    opacity: 1;
    text-shadow: 0 0 4px var(--gnf-pink-300);
  }
  50% {
    opacity: 0.7;
    text-shadow: 0 0 8px var(--gnf-pink-200);
  }
}

/* ================================================================
   RAINBOW TEXT (pastel color cycle)
   ================================================================ */

.win95-rainbow {
  animation: rainbow-cycle 4s linear infinite;
  font-weight: bold;
}

@keyframes rainbow-cycle {
  0%   { color: var(--gnf-pink-300); }
  20%  { color: var(--gnf-blue-300); }
  40%  { color: var(--gnf-green-200); }
  60%  { color: var(--gnf-yellow-200); }
  80%  { color: var(--gnf-purple-100); }
  100% { color: var(--gnf-pink-300); }
}

/* ================================================================
   DECORATIVE COLOR SQUARES
   ================================================================ */

.win95-color-squares {
  display: flex;
  gap: 2px;
}

.win95-color-square {
  width: 12px;
  height: 12px;
  border: 2px solid;
  border-color: var(--bevel-outset);
  box-shadow: var(--shadow-outset);
}

/* ================================================================
   BACKGROUND CROSSHATCH PATTERN (subtle pastel)
   ================================================================ */

.win95-crosshatch {
  background-color: var(--gnf-bg-gray);
  background-image:
    linear-gradient(45deg, rgba(212, 143, 199, 0.08) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(212, 143, 199, 0.08) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(212, 143, 199, 0.08) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(212, 143, 199, 0.08) 75%);
  background-size: 4px 4px;
  background-position: 0 0, 0 2px, 2px -2px, -2px 0px;
}

/* ================================================================
   ALTERNATING ROW BACKGROUNDS
   ================================================================ */

.win95-striped-rows > *:nth-child(even) {
  background-color: var(--gnf-bg-gray);
}

.win95-striped-rows > *:nth-child(odd) {
  background-color: var(--gnf-bg);
}

/* ================================================================
   TEXT SHADOW (3D text effect)
   ================================================================ */

.win95-text-shadow {
  text-shadow: 1px 1px 0 var(--gnf-border-pink-light);
}

/* ================================================================
   ACCESSIBILITY: Reduced Motion
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
  .win95-rainbow {
    animation: none;
    color: var(--gnf-pink-400);
  }

  .win95-badge-new {
    animation: none;
  }

  /* Let marquee libraries handle their own reduced motion */
}

/* ================================================================
   SELECTION COLOR
   ================================================================ */

::selection {
  background: var(--pink-dark);
  color: white;
}

::-moz-selection {
  background: var(--pink-dark);
  color: white;
}

/* ================================================================
   TYPOGRAPHY SCALE — locked sizes
   Prefer these classes over one-off font-size declarations.
   ================================================================ */

h1, .win95-h1 {
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-4) 0;
}

h2, .win95-h2 {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-3) 0;
}

h3, .win95-h3 {
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-3) 0;
}

h4, .win95-h4 {
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-2) 0;
}

.win95-hero-title {
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  font-family: var(--font-heading);
  color: var(--gnf-text);
  margin: 0 0 var(--space-4) 0;
}

.win95-body {
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  color: var(--gnf-text-secondary);
}

.win95-caption {
  font-size: var(--text-sm);
  color: var(--gnf-text-muted);
}

/* ================================================================
   LAYOUT — page wrapper for static chapter pages
   ================================================================ */

.win95-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(var(--space-10) + var(--space-4)) var(--space-5) var(--space-5);
}

/* ================================================================
   HERO SECTION (flat, beveled, two-column)
   ================================================================ */

.win95-hero {
  background: var(--gnf-bg);
  border: 2px solid;
  border-color: var(--bevel-outset);
  box-shadow: var(--shadow-outset), var(--window-shadow);
  margin-bottom: var(--space-8);
  overflow: hidden;
}

.win95-hero-content {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: 340px;
}

.win95-hero-left {
  flex: 1;
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--pink-light);
}

.win95-hero-right {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: var(--pink-mid);
  min-height: 340px;
}

.win95-hero-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.win95-hero-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-3);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: var(--text-sm);
  font-family: var(--font-body);
}

/* ================================================================
   SECTION PANEL (generic beveled content block)
   ================================================================ */

.win95-section {
  background: var(--gnf-bg);
  border: 2px solid;
  border-color: var(--bevel-outset);
  box-shadow: var(--shadow-outset);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

.win95-section--pink    { background: var(--pink-light); }
.win95-section--blue    { background: var(--blue-light); }
.win95-section--yellow  { background: var(--yellow-light); }
.win95-section--green   { background: var(--green-light); }
.win95-section--purple  { background: var(--purple-light); }

.win95-section h2 {
  font-family: var(--font-heading);
  color: var(--gnf-text);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--pink-dark);
  margin-bottom: var(--space-4);
}

/* ================================================================
   TWO-COLUMN LAYOUT (for chapter pages: counties + stats)
   ================================================================ */

.win95-two-col {
  display: flex;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.win95-two-col > * {
  flex: 1;
  min-width: 300px;
}

/* ================================================================
   CHIP GRID (e.g., county lists)
   ================================================================ */

.win95-chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.win95-chip {
  background: var(--gnf-bg);
  padding: var(--space-3);
  text-align: center;
  font-size: var(--text-sm);
  font-family: var(--font-body);
  border: 2px solid;
  border-color: var(--bevel-outset);
  box-shadow: var(--shadow-outset);
  color: var(--gnf-text);
}

/* ================================================================
   STAT GRID (impact numbers)
   ================================================================ */

.win95-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  text-align: center;
  contain: layout;
}

.win95-stat {
  background: var(--gnf-bg);
  padding: var(--space-5) var(--space-4);
  border: 2px solid;
  border-color: var(--bevel-outset);
  box-shadow: var(--shadow-outset);
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.win95-stat-num {
  font-family: var(--font-heading);
  font-size: 52px;
  line-height: 1;
  margin: 0 0 var(--space-2) 0;
  color: var(--gnf-text);
  /* Lock height + use tabular figures so the slot doesn't visibly resize
     when chapter-hydration.js swaps the static fallback for the live count. */
  min-height: 52px;
  font-variant-numeric: tabular-nums;
}

.win95-stat-num--pink   { color: var(--pink-dark); }
.win95-stat-num--blue   { color: var(--blue-dark); }
.win95-stat-num--green  { color: var(--green-dark); }
.win95-stat-num--purple { color: var(--purple-dark); }
.win95-stat-num--yellow { color: var(--yellow-dark); }

.win95-stat p {
  font-size: var(--text-lg);
  color: var(--gnf-text-secondary);
  margin: 0;
  line-height: var(--leading-tight);
  font-weight: 500;
}

/* ================================================================
   CTA (button-as-anchor, large marketing variant)
   ================================================================ */

.win95-cta {
  display: inline-block;
  background: var(--pink-mid);
  border: 2px solid;
  border-color: var(--bevel-outset);
  box-shadow: var(--shadow-outset);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-xl);
  font-weight: bold;
  font-family: var(--font-body);
  color: var(--gnf-text);
  cursor: pointer;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  align-self: flex-start;
  transition: none;
}

.win95-cta:hover {
  background: #ffe0f0;
  color: var(--gnf-text);
  text-decoration: none;
}

.win95-cta:active {
  border-color: var(--bevel-inset);
  box-shadow: var(--shadow-inset);
  transform: translate(1px, 1px);
}

.win95-cta:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

/* Secondary CTA (LP / alternate action) */
.win95-cta--alt {
  background: var(--purple-mid);
}

.win95-cta--alt:hover {
  background: var(--purple-light);
}

/* ================================================================
   FINAL CTA BLOCK (construction-stripe variant)
   ================================================================ */

.win95-final-cta {
  background: repeating-linear-gradient(
    -45deg,
    var(--pink-mid),
    var(--pink-mid) var(--stripe-size),
    var(--gnf-bg) var(--stripe-size),
    var(--gnf-bg) calc(var(--stripe-size) * 2)
  );
  padding: var(--space-8) var(--space-5);
  text-align: center;
  border: 2px solid;
  border-color: var(--bevel-outset);
  box-shadow: var(--shadow-outset);
  margin-bottom: var(--space-6);
}

.win95-final-cta h2 {
  font-family: var(--font-heading);
  color: var(--gnf-text);
  margin: 0 0 var(--space-4) 0;
  text-shadow: 1px 1px 0 #fff;
  border-bottom: none;
}

.win95-final-cta p {
  font-size: var(--text-lg);
  color: var(--gnf-text);
  max-width: 600px;
  margin: 0 auto var(--space-5);
  line-height: var(--leading-loose);
  background: rgba(255, 255, 255, 0.7);
  padding: var(--space-3);
}

/* ================================================================
   TASKBAR (standardized across React + static HTML)
   ================================================================ */

.win95-taskbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--gnf-bg-silver);
  padding: var(--space-1) var(--space-3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-body);
  font-weight: bold;
  font-size: var(--text-base);
  border-bottom: 2px solid var(--pink-dark);
  box-shadow: inset 0 -1px 0 rgba(180, 100, 160, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  z-index: 1000;
}

.win95-taskbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: inherit;
}

.win95-taskbar-left:hover {
  opacity: 0.8;
  text-decoration: none;
  color: inherit;
}

.win95-taskbar-icon {
  width: 16px;
  height: 16px;
}

.win95-taskbar-right {
  font-weight: bold;
  white-space: nowrap;
  margin-right: 30px;
  font-family: var(--font-mono);
  font-size: var(--text-md);
}

/* ================================================================
   PAGE JUMP NAV (anchor strip above the hero)
   Styled to match the "Millennium Bug" editorial theme (cream paper,
   hard ink borders, hard offset shadows — same vocabulary as .mb-btn /
   .mb-card), NOT the pastel Win95 bevel set the class name implies.
   The class is kept for historical continuity with other chapter-page
   elements; the visual system is all MB tokens.
   ================================================================ */

/* Smooth-scroll for in-page anchor jumps. Respects prefers-reduced-motion
   (handled below via a media query that overrides to auto). */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.win95-page-nav {
  background: var(--mb-chalk);
  border: 2px solid var(--mb-ink);
  box-shadow: var(--shadow-hard);
  padding: 12px 20px;
  margin-bottom: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-family: var(--font-content);
}

.win95-page-nav-label {
  font-family: var(--font-pixel);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mb-ink-60);
  padding-right: 14px;
  margin-right: 6px;
  border-right: 1px solid var(--mb-ink-15);
}

.win95-page-nav a {
  display: inline-block;
  background: transparent;
  border: 1px solid transparent;
  padding: 6px 12px;
  font-family: var(--font-content);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mb-ink);
  text-decoration: none;
  cursor: pointer;
  transition: background 60ms ease-out, color 60ms ease-out;
}

.win95-page-nav a:hover {
  background: var(--mb-ink);
  color: var(--mb-chalk);
  text-decoration: none;
}

/* Scrollspy active state — chapter-hydration.js sets aria-current="page"
   on the link whose target section is currently in view. Mirrors the hover
   look so the active anchor reads as a "pressed" tab. */
.win95-page-nav a[aria-current="page"] {
  background: var(--mb-ink);
  color: var(--mb-chalk);
}

.win95-page-nav a:focus-visible {
  outline: 2px solid var(--mb-ink);
  outline-offset: 2px;
}

/* Anchor-target scroll offset — any element inside the chapter container
   with an id gets enough top margin that smooth-scroll clears the fixed
   taskbar (~36px). Scoped to .win95-container so unrelated [id] elements
   (e.g. form inputs) aren't affected. */
.win95-container [id] {
  scroll-margin-top: 56px;
}

/* ================================================================
   BACK-TO-TOP BUTTON (fixed bottom-right)
   Follows the MB button vocabulary: hard ink border + hard shadow,
   hover grows the shadow via a -1/-1 translate.
   ================================================================ */

.win95-back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 52px;
  height: 52px;
  background: var(--mb-magenta);
  color: var(--mb-chalk);
  border: 2px solid var(--mb-ink);
  box-shadow: var(--shadow-hard);
  font-family: var(--font-content);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  display: none;            /* JS toggles .is-visible to flip this */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0;
  z-index: 999;
  text-decoration: none;
  transition: transform 60ms ease-out, box-shadow 60ms ease-out;
}

.win95-back-to-top.is-visible {
  display: flex;
}

.win95-back-to-top:hover {
  transform: translate(-1px, -1px);
  box-shadow: var(--shadow-hard-lg);
  background: var(--mb-magenta);
  color: var(--mb-chalk);
  text-decoration: none;
}

.win95-back-to-top:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 0 var(--mb-ink);
}

.win95-back-to-top:focus-visible {
  outline: 2px solid var(--mb-ink);
  outline-offset: 4px;
}

.win95-back-to-top-arrow {
  font-size: 16px;
  line-height: 1;
}

/* ================================================================
   LP / PERSON CARD GRID
   ================================================================ */

.win95-lp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 320px));
  gap: var(--space-5);
  margin-top: var(--space-4);
  justify-content: center;
}

.win95-lp-card {
  background: var(--gnf-bg);
  border: 2px solid;
  border-color: var(--bevel-outset);
  box-shadow: var(--shadow-outset);
  padding: var(--space-4);
  font-family: var(--font-body);
}

.win95-lp-card img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border: 2px solid;
  border-color: var(--bevel-inset);
  box-shadow: var(--shadow-inset);
  display: block;
  margin: 0 auto var(--space-3);
}

.win95-lp-card h3 {
  font-size: var(--text-lg);
  margin: 0 0 var(--space-1);
  text-align: center;
}

.win95-lp-card h3 a {
  color: var(--link-color);
  text-decoration: none;
}

.win95-lp-card h3 a:hover {
  text-decoration: underline;
}

.win95-lp-card .win95-lp-role {
  font-weight: bold;
  font-size: var(--text-sm);
  margin: 0 0 var(--space-2);
  text-align: center;
  color: var(--gnf-text);
}

.win95-lp-card .win95-lp-bio {
  font-size: var(--text-sm);
  margin: 0;
  color: var(--gnf-text-secondary);
  line-height: var(--leading-normal);
}

.win95-lp-card .win95-lp-link {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  text-align: center;
}

/* ================================================================
   IMAGE GALLERY (community photos)
   ================================================================ */

.win95-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.win95-image-grid .win95-image {
  border: 2px solid;
  border-color: var(--bevel-outset);
  box-shadow: var(--shadow-outset);
  overflow: hidden;
  background: var(--gnf-bg);
}

.win95-image-grid .win95-image img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

/* ================================================================
   FOOTER (simple, centered, beveled divider)
   ================================================================ */

.win95-footer {
  background: var(--gnf-bg-gray);
  padding: var(--space-5);
  text-align: center;
  color: var(--gnf-text-secondary);
  border-top: 2px solid;
  border-top-color: var(--pink-dark);
  font-size: var(--text-sm);
  font-family: var(--font-body);
}

.win95-footer a {
  margin: 0 var(--space-2);
}

/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (max-width: 768px) {
  .win95-hero-content {
    flex-direction: column;
  }

  .win95-hero-right {
    min-height: 200px;
  }

  .win95-two-col {
    flex-direction: column;
  }

  .win95-stat-grid {
    grid-template-columns: 1fr;
  }

  .win95-hero-title {
    font-size: var(--text-3xl);
  }

  .win95-container {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }

  .win95-page-nav {
    gap: var(--space-1);
    padding: var(--space-2);
  }

  .win95-page-nav-label {
    display: none;
  }

  .win95-page-nav a {
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-2);
  }

  .win95-back-to-top {
    width: 44px;
    height: 44px;
    font-size: 9px;
  }
}

/* ================================================================
   UTILITIES (chapter-page surface)
   Small, single-purpose classes used by the static landing pages so
   we can keep markup free of inline style attrs. Stay consistent
   with the Win95 + Millennium-Bug vocabulary — no soft shadows,
   no border-radius, no hex literals.
   ================================================================ */

.win95-text-center { text-align: center; }

.win95-body--narrow {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Centered-section variant: used by the "Powered by People" / "Become an LP"
   panel where the heading sits over centered body copy and shouldn't carry
   the default magenta underline. */
.win95-section--centered { text-align: center; }
.win95-section--centered h2 { border-bottom: none; }

/* Generic visibility toggle, used by chapter-hydration.js to show/hide
   togglable sections (LPs, Awardees, Gallery) and their corresponding
   page-nav links. Kept distinct from {hidden} attr so we can override
   when a parent container demands display: contents etc. */
.is-hidden { display: none !important; }

/* ================================================================
   SKIP-TO-CONTENT LINK
   Off-screen by default; springs into the upper-left on focus.
   Targets the hero (#pitch) since it's the natural top-of-content
   anchor on every chapter page.
   ================================================================ */

.win95-skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-3);
  z-index: 10000;
  background: var(--mb-ink);
  color: var(--mb-chalk);
  padding: 10px 16px;
  font-family: var(--font-content);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--mb-ink);
  box-shadow: var(--shadow-hard);
  transition: top 120ms ease-out;
}

.win95-skip-link:focus,
.win95-skip-link:focus-visible {
  top: var(--space-3);
  color: var(--mb-chalk);
  text-decoration: none;
  outline: 2px solid var(--mb-magenta);
  outline-offset: 2px;
}

/* ================================================================
   LP PHOTO PLACEHOLDER
   Drop-in stand-in for the 120×120 LP avatar when the per-name
   /assets/lps/<slug>.png file is missing or 404s. Same border /
   inset-shadow vocabulary as .win95-lp-card img so the layout
   doesn't shift when the fallback kicks in.
   ================================================================ */

.win95-lp-photo-placeholder {
  width: 120px;
  height: 120px;
  margin: 0 auto var(--space-3);
  background: var(--pink-mid);
  border: 2px solid;
  border-color: var(--bevel-inset);
  box-shadow: var(--shadow-inset);
  display: block;
}

/* ================================================================
   ADMIN PANEL UTILITIES — "Millennium Bug" content aesthetic
   Reusable classes for the LP Portal admin surface. These adopt
   the editorial/modern-retro content theme established in
   theme-tokens.css (cream paper, ink borders, magenta accents,
   Instrument Serif / Inter / Silkscreen / JetBrains Mono).
   Namespaced with `.admin-*` and `.retro-*`.

   Tokens used (from theme-tokens.css):
     --mb-paper, --mb-chalk, --mb-ink, --mb-ink-15, --mb-ink-60
     --mb-magenta, --mb-magenta-deep, --mb-magenta-soft
     --mb-aqua-soft, --mb-butter, --mb-butter-soft, --mb-grape-soft
     --font-display (Instrument Serif), --font-content (Inter),
     --font-pixel (Silkscreen), --font-numeral (JetBrains Mono)
     --shadow-hard-sm / --shadow-hard / --shadow-hard-lg
   ================================================================ */

/* ── Admin sub-tab strip — Neighborhood-Navigator browser-tab style ──
 * Flat horizontal bar, pixel-font labels, magenta-filled active state.
 * Matches the `.mb-tabs` pattern from theme-tokens.css so admin tabs
 * feel like they belong to the same browser-chrome vocabulary as the
 * public Neighborhood Navigator tabs. */
.admin-tabstrip {
  display: flex;
  gap: 0;
  padding: 0;
  background: var(--mb-paper);
  border: 2px solid var(--mb-ink);
  border-bottom: none;
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
  z-index: 1;
}

.admin-tab {
  position: relative;
  padding: 13px 18px;
  font-family: var(--font-pixel);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mb-ink);
  background: transparent;
  border: none;
  border-right: 1px solid var(--mb-ink-15);
  cursor: pointer;
  white-space: nowrap;
  transition: background 80ms ease-out, color 80ms ease-out;
}

.admin-tab:last-child {
  border-right: none;
}

.admin-tab:hover {
  background: var(--mb-butter);
}

.admin-tab:focus-visible {
  outline: 2px solid var(--mb-magenta);
  outline-offset: -2px;
}

.admin-tab[aria-selected="true"] {
  background: var(--mb-magenta);
  color: var(--mb-chalk);
}

/* Magenta underline that "connects" the active tab to the panel below */
.admin-tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--mb-magenta);
  z-index: 3;
}

.admin-tab-count {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  font-family: var(--font-numeral);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--mb-magenta);
  color: var(--mb-chalk);
  border: 1px solid var(--mb-ink);
  min-width: 18px;
  text-align: center;
  line-height: 12px;
}

.admin-tab[aria-selected="true"] .admin-tab-count {
  background: var(--mb-chalk);
  color: var(--mb-magenta);
  border-color: var(--mb-chalk);
}

/* Panel that hangs off the tab strip. No internal padding — each tab's
   content supplies its own `.mb-block` / `.admin-section` stack. */
.admin-tabpanel {
  border: 2px solid var(--mb-ink);
  box-shadow: var(--shadow-hard);
  background: var(--mb-chalk);
  position: relative;
  z-index: 0;
  font-family: var(--font-content);
  font-size: var(--tc-body);
  color: var(--mb-ink);
  line-height: 1.5;
  overflow: hidden;
}

/* Admin sections stack inside the tab panel like landing-page blocks */
.admin-section {
  padding: 40px 48px;
  border-bottom: 2px solid var(--mb-ink);
}

.admin-section:last-child {
  border-bottom: none;
}

.admin-section--hero {
  padding: 48px 48px 36px;
}

.admin-section--hero-compact {
  padding: 24px 32px 20px;
}

.admin-section--hero-compact .admin-section-head {
  margin-bottom: 0;
  gap: 6px;
}

.admin-section--paper    { background: var(--mb-paper); }
.admin-section--chalk    { background: var(--mb-chalk); }
.admin-section--magenta  { background: var(--mb-magenta);  color: var(--mb-chalk); }
.admin-section--grape    { background: var(--mb-grape);    color: var(--mb-chalk); }
.admin-section--aqua     { background: var(--mb-aqua);     color: var(--mb-ink); }
.admin-section--aqua-soft{ background: var(--mb-aqua-soft); color: var(--mb-ink); }
.admin-section--butter   { background: var(--mb-butter);   color: var(--mb-ink); }
.admin-section--butter-soft { background: var(--mb-butter-soft); color: var(--mb-ink); }
.admin-section--tangerine-soft { background: var(--mb-tangerine-soft); color: var(--mb-ink); }
.admin-section--ink      { background: var(--mb-ink);      color: var(--mb-chalk); }

.admin-section--magenta .mb-eyebrow,
.admin-section--grape .mb-eyebrow,
.admin-section--ink .mb-eyebrow {
  color: var(--mb-butter);
}

/* Editorial section heading helper — eyebrow + serif headline + lede.
   Used as the top of every admin section. */
.admin-section-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 32px;
  max-width: 780px;
}

.admin-section-head--split {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  max-width: none;
  flex-wrap: wrap;
  gap: 24px;
}

.admin-section-head__eyebrow {
  font-family: var(--font-pixel);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mb-magenta);
}

.admin-section--magenta .admin-section-head__eyebrow,
.admin-section--grape .admin-section-head__eyebrow,
.admin-section--ink .admin-section-head__eyebrow {
  color: var(--mb-butter);
}

.admin-section-head__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--tc-h2);
  line-height: 1.05;
  letter-spacing: -0.018em;
  margin: 0;
  color: inherit;
}

.admin-section-head__title em {
  font-style: italic;
  color: var(--mb-magenta);
}

.admin-section--magenta .admin-section-head__title em,
.admin-section--grape .admin-section-head__title em,
.admin-section--ink .admin-section-head__title em {
  color: var(--mb-butter);
}

.admin-section-head__title--sm {
  font-size: var(--tc-h3);
}

.admin-section-head__lede {
  font-family: var(--font-content);
  font-size: var(--tc-lede);
  line-height: 1.45;
  margin: 0;
  max-width: 62ch;
  color: inherit;
  opacity: 0.92;
}

.admin-section-head__meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  align-items: flex-end;
  text-align: right;
}

.admin-section-head--split .admin-section-head__meta {
  margin-top: 0;
}

/* Inline stat strip (used on hero sections) */
.admin-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--mb-ink-15);
}

.admin-section--magenta .admin-hero-stats,
.admin-section--grape .admin-hero-stats,
.admin-section--ink .admin-hero-stats {
  border-top-color: rgba(255, 255, 255, 0.3);
}

.admin-hero-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 120px;
}

.admin-hero-stat__num {
  font-family: var(--font-numeral);
  font-size: var(--tc-numeral-md);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--mb-magenta);
}

.admin-section--magenta .admin-hero-stat__num,
.admin-section--grape .admin-hero-stat__num,
.admin-section--ink .admin-hero-stat__num {
  color: var(--mb-butter);
}

.admin-hero-stat__label {
  font-family: var(--font-pixel);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* Editorial section headings — admin panels that use plain <h4>/<h5>
   still get proper type, for legacy blocks that haven't migrated yet. */
.admin-tabpanel h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--tc-h3);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: inherit;
  margin: 0 0 16px 0;
}

.admin-tabpanel h5 {
  font-family: var(--font-content);
  font-weight: 700;
  font-size: var(--tc-h4);
  line-height: 1.25;
  color: inherit;
  margin: 0 0 12px 0;
}

.admin-tabpanel p {
  font-family: var(--font-content);
  font-size: var(--tc-body);
  line-height: 1.55;
  color: inherit;
}

.admin-tabpanel code {
  font-family: var(--font-numeral);
  font-size: 0.92em;
  background: var(--mb-magenta-soft);
  border: 1px solid var(--mb-ink-15);
  padding: 1px 6px;
  color: var(--mb-ink);
}

.admin-section--magenta code,
.admin-section--grape code,
.admin-section--ink code {
  background: rgba(255, 255, 255, 0.15);
  color: var(--mb-chalk);
  border-color: rgba(255, 255, 255, 0.3);
}

/* ── Filter bar (airy, ink-bordered) ── */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 14px;
  margin-bottom: 20px;
  background: var(--mb-paper);
  border: 2px solid var(--mb-ink);
  box-shadow: var(--shadow-hard-sm);
  font-family: var(--font-content);
  font-size: var(--tc-body);
}

/* `!important` overrides the global `input:not(...):not(...):not(...)` rule
   at the top of this file, which has higher selector specificity (0,0,3,1)
   than our `.filter-bar > input[type="search"]` (0,0,2,1) and would
   otherwise leak the pink bevel border + inset shadow into this admin row. */
.filter-bar > select,
.filter-bar > input[type="text"],
.filter-bar > input[type="search"] {
  padding: 8px 10px;
  font-family: var(--font-content);
  font-size: 14px;
  min-height: 34px;
  background: var(--mb-chalk);
  border: 2px solid var(--mb-ink) !important;
  box-shadow: none !important;
  color: var(--mb-ink);
}

.filter-bar > select:focus,
.filter-bar > input:focus {
  outline: 2px solid var(--mb-ink);
  outline-offset: 1px;
}

.filter-bar > select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--mb-chalk);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 4 L6 8 L10 4' fill='none' stroke='%23141419' stroke-width='2' stroke-linecap='square'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 12px;
  padding-right: 32px;
  cursor: pointer;
}

.filter-bar > input[type="text"],
.filter-bar > input[type="search"] {
  flex-grow: 1;
  min-width: 200px;
}

.filter-bar > .filter-grow {
  flex-grow: 1;
  min-width: 200px;
}

.filter-bar > .filter-spacer {
  flex-grow: 1;
}

/* Prefer a single row, but wrap when controls can't fit.
   Overflow stays visible so absolutely-positioned children (e.g.
   MultiSelectDropdown panels) aren't clipped — setting overflow-x here
   would force overflow-y to compute as auto and cut off the dropdown. */
.filter-bar--one-row {
  flex-wrap: wrap;
}

.filter-bar--one-row > select,
.filter-bar--one-row > input[type="text"],
.filter-bar--one-row > input[type="search"],
.filter-bar--one-row > button,
.filter-bar--one-row > .retro-toggle {
  flex-shrink: 0;
}

.filter-bar--one-row > input[type="text"],
.filter-bar--one-row > input[type="search"] {
  min-width: 160px;
}

/* Normalize button height to match the 34px selects/inputs in this row. */
.filter-bar--one-row > button,
.filter-bar--one-row > .retro-toggle,
.filter-bar--one-row > .win95-btn {
  height: 34px;
  min-height: 34px;
  padding: 0 14px;
  line-height: 1;
  font-size: 13px;
}

/* ── Toolbar (row of action buttons) ── */
.retro-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}

.retro-toolbar--end {
  justify-content: flex-end;
}

.retro-toolbar--split {
  justify-content: space-between;
}

/* ── Retro table — ink-bordered, paper alt-rows, butter hover ── */
.retro-table-wrap {
  overflow-x: auto;
  border: 2px solid var(--mb-ink);
  box-shadow: var(--shadow-hard);
  background: var(--mb-chalk);
}

.retro-table {
  width: 100%;
  font-size: var(--tc-body);
  border-collapse: collapse;
  font-family: var(--font-content);
  color: var(--mb-ink);
}

.retro-table thead tr {
  background: var(--mb-ink);
  color: var(--mb-chalk);
  text-align: left;
}

.retro-table thead th {
  padding: 12px 12px;
  font-family: var(--font-pixel);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--mb-chalk);
  position: sticky;
  top: 0;
  background: var(--mb-ink);
  z-index: 1;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.retro-table thead th:last-child {
  border-right: none;
}

.retro-table thead th .sort-btn {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  width: 100%;
  color: inherit;
  font: inherit;
}

.retro-table thead th .sort-btn:hover {
  color: var(--mb-butter);
}

.retro-table thead th .sort-btn:focus-visible {
  outline: 2px solid var(--mb-magenta);
  outline-offset: -2px;
}

.retro-table tbody tr {
  border-bottom: 1px solid var(--mb-ink-15);
  transition: background 80ms ease-out;
}

.retro-table tbody tr:nth-child(even) {
  background: var(--mb-paper);
}

.retro-table tbody tr:hover {
  background: var(--mb-butter-soft);
}

.retro-table tbody tr.is-editing {
  background: var(--mb-magenta-soft);
}

.retro-table tbody tr.is-self {
  background: var(--mb-aqua-soft);
}

.retro-table tbody tr.is-editing:hover,
.retro-table tbody tr.is-self:hover {
  background: var(--mb-butter-soft);
}

.retro-table tbody td {
  padding: 10px 12px;
  vertical-align: middle;
  color: var(--mb-ink);
}

.retro-table tbody td.truncate {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.retro-table tbody td.actions {
  white-space: nowrap;
}

.retro-table tbody a {
  color: var(--mb-magenta-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.retro-table tbody a:hover {
  color: var(--mb-magenta);
}

/* Inputs + selects inside the table (inline row edits) */
.retro-table tbody select,
.retro-table tbody input {
  background: var(--mb-chalk);
  border: 1.5px solid var(--mb-ink);
  box-shadow: none;
  padding: 4px 8px;
  font-family: var(--font-content);
  font-size: 13px;
  color: var(--mb-ink);
  min-height: 28px;
}

.retro-table tbody select:focus,
.retro-table tbody input:focus {
  outline: 2px solid var(--mb-magenta);
  outline-offset: 2px;
}

.retro-table tbody select:disabled,
.retro-table tbody input:disabled {
  background: var(--mb-paper);
  color: var(--mb-ink-60);
  cursor: not-allowed;
}

/* ── Form row (label + control stack) ── */
.retro-form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.retro-form-row label {
  font-family: var(--font-pixel);
  font-weight: 600;
  color: var(--mb-ink);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* `:not(...)` triple-pseudo bumps specificity to (0,4,1) so this beats the
   global `input:not([type=checkbox]):not([type=radio]):not([type=range])`
   pink-bevel rule (0,3,1). Without it, retro-form-row text inputs/textareas
   get the legacy inset pink border. */
.retro-form-row input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.retro-form-row textarea,
.retro-form-row select {
  font-family: var(--font-content);
  font-size: 14px;
  color: var(--mb-ink);
  background: var(--mb-chalk);
  border: 2px solid var(--mb-ink);
  box-shadow: var(--shadow-hard-sm);
  padding: 10px 12px;
  line-height: 1.4;
}

.retro-form-row input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
.retro-form-row textarea:focus,
.retro-form-row select:focus {
  outline: 2px solid var(--mb-magenta);
  outline-offset: 2px;
}

.retro-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 14px;
}

@media (max-width: 640px) {
  .retro-form-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Edit panel (inline expand under a table row) — paper card with
   magenta left-marker, echoing .mb-marker from theme-tokens.css ── */
.retro-edit-panel {
  padding: 24px 28px;
  background: var(--mb-paper);
  border-top: 1px solid var(--mb-ink);
  border-bottom: 2px solid var(--mb-ink);
  border-left: 4px solid var(--mb-magenta);
  position: relative;
}

.retro-edit-panel-title {
  font-family: var(--font-pixel);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mb-ink);
  margin-bottom: 16px;
}

/* ── Member photo: grayscale with ink border; hover reveals color ── */
.member-photo {
  border: 2px solid var(--mb-ink);
  background: #fff;
  filter: grayscale(100%);
  transition: filter 120ms linear;
}

.member-photo:hover,
.member-photo:focus-visible {
  filter: grayscale(0%);
}

/* ── Action row (bottom of an edit panel: Save / Cancel) ── */
.retro-action-row {
  display: flex;
  gap: 10px;
  justify-content: flex-start;
  margin-top: 16px;
}

.retro-action-row--end {
  justify-content: flex-end;
}

/* ── Status pills — solid color blocks with ink border.
   Tone variants use MB palette. All share the same rectangular
   crisp look; no bevels. Retro cue: 2px ink border + no rounding. */
.retro-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-family: var(--font-pixel);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mb-ink);
  background: var(--mb-chalk);
  border: 1.5px solid var(--mb-ink);
  box-shadow: none;
  white-space: nowrap;
  line-height: 1.5;
}

.retro-pill--pink   { background: var(--mb-magenta);       color: var(--mb-chalk); }
.retro-pill--blue   { background: var(--mb-aqua-soft);     color: var(--mb-ink); }
.retro-pill--green  { background: #d6f0e0;                 color: var(--mb-ink); }
.retro-pill--yellow { background: var(--mb-butter);        color: var(--mb-ink); }
.retro-pill--purple { background: var(--mb-grape);         color: var(--mb-chalk); }
.retro-pill--error  { background: var(--mb-ink);           color: var(--mb-magenta); }
.retro-pill--warn   { background: var(--mb-tangerine-soft); color: var(--mb-tangerine-deep); }

/* ── Empty state — ink-bordered chalk card, display-serif title.
   Icon sits in a solid magenta square for accent. ── */
.retro-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 24px;
  text-align: center;
  color: var(--mb-ink);
  background: var(--mb-paper);
  border: 2px solid var(--mb-ink);
  box-shadow: var(--shadow-hard-sm);
  font-family: var(--font-content);
}

.retro-empty-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: var(--mb-magenta);
  color: var(--mb-chalk);
  border: 2px solid var(--mb-ink);
  box-shadow: var(--shadow-hard-sm);
  margin-bottom: 4px;
}

.retro-empty-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--tc-h4);
  letter-spacing: -0.01em;
  color: var(--mb-ink);
  line-height: 1.15;
}

.retro-empty-body {
  font-family: var(--font-content);
  font-size: var(--tc-body);
  max-width: 460px;
  color: var(--mb-ink-60);
  line-height: 1.5;
}

/* ── Loading placeholder row ── */
.retro-loading {
  padding: 20px;
  text-align: center;
  color: var(--mb-ink-60);
  font-family: var(--font-content);
  font-size: var(--tc-micro);
  background: var(--mb-paper);
  border: 2px solid var(--mb-ink-15);
}

.retro-loading-dots::after {
  display: inline-block;
  content: "";
  width: 1.4em;
  text-align: left;
  animation: retro-dots 1.2s steps(3, end) infinite;
}

@keyframes retro-dots {
  0%, 20%   { content: "."; }
  40%       { content: ".."; }
  60%, 100% { content: "..."; }
}

/* ── Section header inside a tab (above a filter bar or table) ── */
.retro-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

.retro-section-head h4,
.retro-section-head h5 {
  margin: 0;
}

.retro-section-head .retro-hint {
  color: var(--mb-ink-60);
  font-size: var(--tc-micro);
  font-style: italic;
  font-family: var(--font-display);
}

/* ── Inline hint / help text ── */
.retro-hint {
  font-family: var(--font-content);
  font-size: var(--tc-micro);
  color: var(--mb-ink-60);
}

/* ── Slider toggle (true/false switch — e.g. "Live on website") ──
   Square per the no-border-radius rule. Hidden checkbox drives :checked. */
.win95-toggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
  cursor: pointer;
}

.win95-toggle input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}

.win95-toggle__track {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  background: var(--mb-paper-deep);
  border: 2px solid var(--mb-ink);
  box-shadow: var(--shadow-hard-sm);
  transition: background 80ms ease-out;
}

.win95-toggle__thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 14px;
  height: 14px;
  background: var(--mb-ink);
  transition: transform 80ms ease-out;
  pointer-events: none;
}

.win95-toggle input:checked ~ .win95-toggle__track {
  background: var(--mb-aqua);
}

.win95-toggle input:checked ~ .win95-toggle__thumb {
  transform: translateX(18px);
}

.win95-toggle input:focus-visible ~ .win95-toggle__track {
  outline: 2px solid var(--mb-magenta);
  outline-offset: 2px;
}

.win95-toggle input:disabled ~ .win95-toggle__track {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Retro toggle button (for Hide Passed/Ineligible, etc.) ── */
.retro-toggle {
  background: var(--mb-chalk);
  color: var(--mb-ink);
  border: 2px solid var(--mb-ink);
  box-shadow: var(--shadow-hard-sm);
  padding: 8px 14px;
  cursor: pointer;
  font-family: var(--font-content);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  transition: transform 60ms ease-out, box-shadow 60ms ease-out, background 60ms ease-out;
}

.retro-toggle:hover {
  background: var(--mb-butter-soft);
  transform: translate(-1px, -1px);
  box-shadow: var(--shadow-hard);
}

.retro-toggle:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 0 var(--mb-ink);
}

.retro-toggle[aria-pressed="true"] {
  background: var(--mb-magenta);
  color: var(--mb-chalk);
  border-color: var(--mb-ink);
  box-shadow: var(--shadow-hard-sm);
}

.retro-toggle[aria-pressed="true"]:hover {
  background: var(--mb-magenta-deep);
}

.retro-toggle:focus-visible {
  outline: 2px solid var(--mb-magenta);
  outline-offset: 3px;
}

/* ── Modal dialog (replaces window.confirm) ── */
.retro-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 25, 0.55);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 16px;
}

.retro-dialog {
  background: var(--mb-chalk);
  border: 2px solid var(--mb-ink);
  box-shadow: var(--shadow-hard-lg);
  max-width: 460px;
  width: 100%;
  font-family: var(--font-content);
  color: var(--mb-ink);
  display: flex;
  flex-direction: column;
}

.retro-dialog-titlebar {
  background: var(--mb-ink);
  padding: 10px 14px;
  font-family: var(--font-pixel);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--mb-chalk);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.retro-dialog-body {
  padding: 20px 22px;
  font-family: var(--font-content);
  font-size: 15px;
  color: var(--mb-ink);
  line-height: 1.55;
}

.retro-dialog-body p {
  margin: 0 0 10px 0;
}

.retro-dialog-body p:last-child {
  margin-bottom: 0;
}

.retro-dialog-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 14px 18px;
  background: var(--mb-paper);
  border-top: 1px solid var(--mb-ink-15);
}

/* ── Destructive button variant (already declared; re-tint to magenta) ── */
.win95-btn-danger {
  background: var(--mb-magenta);
  color: var(--mb-chalk);
}

.win95-btn-danger:hover {
  background: var(--mb-magenta-deep);
  color: var(--mb-chalk);
}

/* ── Global focus-ring upgrade for every button in admin panel ── */
.admin-tabpanel button:focus-visible,
.retro-dialog button:focus-visible {
  outline: 2px solid var(--mb-magenta);
  outline-offset: 3px;
}

/* Links within the admin panel use magenta */
.admin-tabpanel a {
  color: var(--mb-magenta-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.admin-tabpanel a:hover {
  color: var(--mb-magenta);
}

.admin-tabpanel a:visited {
  color: var(--mb-grape-deep);
}

/* ── Social Cards tab (LP sidebar) ──
 * Magenta hero + paper content block that holds a grid of card tiles.
 * Each tile shows a 1:1 canvas preview plus editorial metadata + a
 * download button, in the same visual vocabulary as the admin surface. */
.social-cards-page {
  border: 2px solid var(--mb-ink);
  box-shadow: var(--shadow-hard);
  background: var(--mb-chalk);
  overflow: hidden;
  font-family: var(--font-content);
}

.social-cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
}

.social-card-tile {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.social-card-tile__preview {
  border: 2px solid var(--mb-ink);
  box-shadow: var(--shadow-hard-sm);
  aspect-ratio: 1 / 1;
  background: var(--mb-paper);
  overflow: hidden;
  transition: transform 80ms ease-out, box-shadow 80ms ease-out;
}

.social-card-tile:hover .social-card-tile__preview {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-hard-lg);
}

.social-card-tile__body {
  padding: 18px 2px 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.social-card-tile__eyebrow {
  font-family: var(--font-pixel);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mb-magenta);
}

.social-card-tile__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--mb-ink);
  margin: 0;
}

.social-card-tile__description {
  font-family: var(--font-content);
  font-size: 13px;
  color: var(--mb-ink-60);
  line-height: 1.5;
  margin: 0 0 6px;
}

.social-card-tile__download {
  margin-top: 4px;
  background: var(--mb-magenta);
  color: var(--mb-chalk);
  border: 2px solid var(--mb-ink);
  box-shadow: var(--shadow-hard-sm);
  padding: 10px 16px;
  font-family: var(--font-content);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  transition: transform 60ms ease-out, box-shadow 60ms ease-out, background 60ms ease-out;
}

.social-card-tile__download:hover {
  background: var(--mb-magenta-deep);
  transform: translate(-1px, -1px);
  box-shadow: var(--shadow-hard);
}

.social-card-tile__download:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 0 var(--mb-ink);
}

.social-card-tile__download:focus-visible {
  outline: 2px solid var(--mb-magenta);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .social-cards-container {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .social-card-tile__body {
    padding: 14px 16px 16px;
  }
  .social-card-tile__title {
    font-size: 20px;
  }
}

/* ── LP pitch card (Review Pitches list on the LP sidebar) ──
 * Clickable row with an ink border, hard offset shadow, and a 4px
 * left-accent color that encodes review status (magenta = needs review,
 * butter = favorite, aqua = consideration, ink-15 = passed). */
.lp-pitch-card {
  background: var(--mb-chalk);
  padding: 16px 18px;
  margin-bottom: 14px;
  border: 2px solid var(--mb-ink);
  border-left: 4px solid var(--mb-magenta);
  box-shadow: var(--shadow-hard-sm);
  cursor: pointer;
  font-family: var(--font-content);
  color: var(--mb-ink);
  transition: transform 80ms ease-out, box-shadow 80ms ease-out;
}

.lp-pitch-card:hover {
  transform: translate(-1px, -1px);
  box-shadow: var(--shadow-hard);
  background: var(--mb-paper);
}

.lp-pitch-card:focus-visible {
  outline: 2px solid var(--mb-magenta);
  outline-offset: 3px;
}

.lp-pitch-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}

.lp-pitch-card__info {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lp-pitch-card__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--mb-ink);
}

.lp-pitch-card__title strong {
  font-weight: 400;
}

.lp-pitch-card__by {
  font-family: var(--font-content);
  font-size: 14px;
  color: var(--mb-ink-60);
}

.lp-pitch-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lp-pitch-card__status {
  flex-shrink: 0;
}

.lp-pitch-card__summary {
  font-family: var(--font-content);
  font-size: 14px;
  line-height: 1.5;
  color: var(--mb-ink);
  margin: 10px 0 0;
}

.lp-pitch-card__ai-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-content);
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--mb-ink-60);
  margin-bottom: 6px;
}

.lp-pitch-card__ai-badge {
  display: inline-block;
  padding: 1px 5px;
  background: var(--mb-aqua-deep, var(--mb-magenta));
  color: var(--mb-chalk);
  border: 1px solid var(--mb-ink);
  font-size: 9px;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

.lp-pitch-card__summary em {
  color: var(--mb-ink-60);
}

.lp-pitch-card__meta {
  margin-top: 10px;
  font-family: var(--font-content);
  font-size: 12px;
  color: var(--mb-ink-60);
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.lp-pitch-card__meta-sep {
  opacity: 0.4;
}

/* ── Admin pitch card (Reviews tab, per-pitch summary) ── */
.admin-pitch-card {
  padding: 18px 20px;
  border: 2px solid var(--mb-ink);
  box-shadow: var(--shadow-hard-sm);
  margin-bottom: 16px;
  background: var(--mb-chalk);
  font-family: var(--font-content);
  color: var(--mb-ink);
  transition: transform 80ms ease-out, box-shadow 80ms ease-out;
}

.admin-pitch-card:hover {
  transform: translate(-1px, -1px);
  box-shadow: var(--shadow-hard);
}

.admin-pitch-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
}

.admin-pitch-card__info {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-pitch-card__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--mb-ink);
}

.admin-pitch-card__by {
  font-family: var(--font-content);
  font-size: 14px;
  color: var(--mb-ink-60);
  font-weight: 400;
}

.admin-pitch-card__summary {
  color: var(--mb-ink);
  font-size: 14px;
  line-height: 1.5;
  margin: 4px 0;
}

.admin-pitch-card__summary--fallback em {
  color: var(--mb-ink-60);
}

.admin-pitch-card__meta {
  font-family: var(--font-content);
  font-size: 12px;
  color: var(--mb-ink-60);
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 2px;
}

.admin-pitch-card__meta-sep {
  opacity: 0.4;
}

.admin-pitch-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.admin-pitch-card__actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.admin-pitch-card__reviews {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--mb-ink-15);
  font-size: 13px;
  color: var(--mb-ink);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-pitch-card__reviews--empty {
  color: var(--mb-ink-60);
  font-style: italic;
}

.admin-pitch-card__reviews-label {
  font-family: var(--font-pixel);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--mb-magenta);
}

.admin-pitch-card__reviews-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.admin-pitch-card__score {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px;
  font-family: var(--font-content);
  font-size: 12px;
  font-weight: 600;
  background: var(--mb-butter-soft);
  border: 1.5px solid var(--mb-ink);
  white-space: nowrap;
  color: var(--mb-ink);
}

.admin-pitch-card__score-avg {
  color: var(--mb-ink-60);
  font-weight: 500;
  font-size: 11px;
}

@media (max-width: 640px) {
  .admin-pitch-card {
    padding: 14px;
  }
  .admin-pitch-card__title {
    font-size: 19px;
  }
}

/* ── Admin tool card grid (Super Admin Tools tab) ── */
.admin-tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

.admin-tool-card {
  background: var(--mb-chalk);
  border: 2px solid var(--mb-ink);
  box-shadow: var(--shadow-hard-sm);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--font-content);
  color: var(--mb-ink);
}

.admin-tool-card__eyebrow {
  font-family: var(--font-pixel);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--mb-magenta);
}

.admin-tool-card__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--mb-ink);
  margin: 0;
  border: none;
  padding: 0;
}

.admin-tool-card__body {
  font-family: var(--font-content);
  font-size: 14px;
  line-height: 1.55;
  color: var(--mb-ink);
}

.admin-tool-card__footnote ul {
  margin: 0;
  padding-left: 18px;
  font-family: var(--font-content);
  font-size: 13px;
  color: var(--mb-ink-60);
  line-height: 1.6;
}

.admin-tool-card__warning {
  background: var(--mb-tangerine-soft);
  border: 1px solid var(--mb-tangerine-deep);
  color: var(--mb-tangerine-deep);
  padding: 8px 12px;
  font-family: var(--font-content);
  font-size: 13px;
  font-weight: 600;
}

.admin-tool-card__action {
  margin-top: 4px;
}

/* ── Responsive: admin panel on small screens ── */
@media (max-width: 768px) {
  .admin-section {
    padding: 28px 20px;
  }
  .admin-section--hero {
    padding: 32px 20px 24px;
  }
  .admin-section-head {
    margin-bottom: 20px;
  }
  .admin-section-head__title {
    font-size: 28px;
  }
  .admin-section-head__lede {
    font-size: 16px;
  }
  .admin-hero-stats {
    gap: 20px;
    margin-top: 24px;
    padding-top: 18px;
  }
  .admin-hero-stat__num {
    font-size: 28px;
  }
  .admin-tabpanel h4 { font-size: 24px; }
  .admin-tabpanel h5 { font-size: 18px; }
  .filter-bar {
    padding: 10px;
    gap: 8px;
  }
  .retro-table thead th,
  .retro-table tbody td {
    padding: 8px 10px;
    font-size: 13px;
  }
  .retro-edit-panel {
    padding: 16px;
  }
  .retro-empty {
    padding: 28px 18px;
  }
  .admin-tool-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .admin-tool-card {
    padding: 16px;
  }
  .admin-tab {
    padding: 10px 14px;
    font-size: 10px;
  }
}