/* ---- css/styles.css ---- */
:root {
  --bg-dark: #161B22;
  --bg-nav: #0D1117;
  --bg-card: #212830;
  --bg-subcard: #181E24;
  --bg-hover: #2D3748;
  /* Elevated surface for hover tooltips/popovers so they read as a distinct
     layer instead of blending into card-coloured controls behind them. */
  --tip-bg: #313D4C;

  --border-main: #30363D;
  --border-accent: #38BDF8;

  --text-main: #FFFFFF;
  --text-muted: #8B949E;
  --text-dim: #6E7681;

  --c-cyan: #38BDF8;
  --c-orange: #F97316;
  --c-purple: #A855F7;
  --c-yellow: #EAB308;
  --c-red: #EF4444;
  --c-green: #22C55E;
  --c-pink: #EC4899;
}

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

html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
  /* We provide our own press feedback (:active scale), so suppress the mobile
     tap-highlight flash that would otherwise compete with it. */
  -webkit-tap-highlight-color: transparent;
  /* Stop iOS from inflating the page in landscape before a font-size fix lands. */
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-dark);
  color: var(--text-main);
  line-height: 1.5;
  min-height: 100vh;
}

/* Mobile baseline: kill the 300ms tap delay, stop long-press from selecting
   control text, and keep inputs at 16px so iOS Safari does not zoom into them. */
button, a, [role="button"] {
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
input, textarea, select {
  font-size: 16px;
}

.site-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.9rem 1.75rem;
  /* On a notched phone, push the logo/title below the notch. */
  padding-top: calc(0.9rem + env(safe-area-inset-top, 0px));
  background-color: var(--bg-nav);
  border-bottom: 2px solid var(--border-main);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.nav-menu-toggle {
  display: none;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--border-main);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text-main);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nav-menu-toggle-bars,
.nav-menu-toggle-bars::before,
.nav-menu-toggle-bars::after {
  display: block;
  width: 16px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  position: relative;
}

.nav-menu-toggle-bars::before,
.nav-menu-toggle-bars::after {
  content: '';
  position: absolute;
  left: 0;
}

.nav-menu-toggle-bars::before { top: -5px; }
.nav-menu-toggle-bars::after { top: 5px; }

.nav-center-tabs {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.nav-sidebar-overlay {
  display: none;
}

.nav-sidebar {
  display: none;
}

@media (max-width: 992px) {
  .nav-center-tabs {
    position: static;
    transform: none;
    margin: 0 auto;
  }
}

.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

a.site-btn.nav-tab-btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.brand-badge {
  background-color: var(--c-cyan);
  color: #0D1117;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 0.85rem;
  padding: 0 1rem;
  height: 38px;
  border-radius: 6px;
  letter-spacing: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.nav-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.site-btn {
  background-color: var(--bg-card);
  border: 1px solid var(--border-main);
  color: var(--text-main);
  padding: 0 1rem;
  height: 38px;
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: lowercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  /* CJK labels otherwise break per character and stack vertically inside the
     fixed-height buttons (e.g. the run-card "Share" button). */
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease, transform 80ms ease-out;
}

.site-btn:hover {
  background-color: var(--bg-subcard);
  border-color: var(--c-cyan);
}

.admin-floating-btn {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  background-color: var(--bg-card);
  color: var(--c-yellow);
  border: 1px solid var(--border-main);
  padding: 0.55rem 1.1rem;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  transition: all 0.2s ease;
}

.admin-floating-btn:hover {
  border-color: var(--c-yellow);
  background-color: var(--bg-subcard);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7);
}

.btn-upload {
  background-color: var(--c-cyan);
  color: #0D1117;
  border: none;
}

.btn-upload:hover {
  opacity: 0.9;
}

.site-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.5rem clamp(1rem, 2vw, 2.25rem);
}

/* Persistent brand/domain line under the app content. Kept in the static shell
   (not rendered by app.js) so search engines see the site name and domain as
   real text on every route. */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem 0.6rem;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.25rem clamp(1rem, 2vw, 2.25rem) 2rem;
  border-top: 1px solid var(--border-main);
  color: var(--text-muted);
  font-size: 0.8rem;
}

.site-footer-brand {
  color: var(--text-main);
  font-weight: 700;
}

.site-footer-link {
  color: var(--text-muted);
  text-decoration: none;
}

.site-footer-link:hover {
  color: var(--c-cyan);
  text-decoration: underline;
}

.site-footer-sep {
  color: var(--text-dim);
}

/* Visually hidden but present for assistive tech and crawlers. Used for the
   single page <h1>, which the app's nav-title design does not show visually. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.runs-needed-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  width: 100%;
  margin: 0 0 0.9rem;
  padding: 0.7rem 1rem;
  background: var(--bg-nav);
  border: 1px solid var(--border-main);
  border-radius: 8px;
}

.runs-needed-icon {
  width: 1.35rem;
  height: 1.35rem;
  color: var(--c-yellow);
  flex-shrink: 0;
}

.runs-needed-text {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.45;
  text-align: center;
  flex: 1;
  min-width: 0;
}

.discord-fab {
  position: fixed;
  right: 1.25rem;
  /* Sit above the home indicator on phones that have one. */
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #5865F2;
  color: #fff;
  box-shadow: 0 8px 24px rgba(88, 101, 242, 0.45);
  transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.discord-fab img {
  width: 1.7rem;
  height: auto;
  display: block;
  pointer-events: none;
}

.discord-fab:hover,
.discord-fab:focus-visible {
  background: #4752C4;
  transform: scale(1.06);
  box-shadow: 0 10px 28px rgba(88, 101, 242, 0.6);
  outline: none;
}

.discord-fab:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .discord-fab {
    transition: none;
  }

  .discord-fab:hover,
  .discord-fab:focus-visible {
    transform: none;
  }
}

.runs-needed-link {
  color: var(--c-cyan);
  font-weight: 800;
  text-decoration: underline;
}

.runs-needed-link:hover {
  color: #7dd3fc;
}

.bangboo-filter-banner {
  flex-direction: column;
  align-items: stretch;
  gap: 0.7rem;
}

.bangboo-fork-text {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  font-weight: 500;
}

.bangboo-skill-toggle {
  display: flex;
  gap: 0.5rem;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.bangboo-skill-btn,
.bangboo-skill-btn-wrap {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  justify-content: center;
}

.bangboo-skill-btn-wrap {
  display: flex;
}

.bangboo-skill-btn-wrap .bangboo-skill-btn {
  width: 100%;
  text-align: center;
}

@media (min-width: 1600px) {
  .site-navbar {
    padding-left: clamp(1.75rem, 2.5vw, 3rem);
    padding-right: clamp(1.75rem, 2.5vw, 3rem);
  }

  .site-container {
    max-width: min(1760px, calc(100vw - 3.5rem));
    padding-top: 1.65rem;
    padding-bottom: 1.65rem;
  }

  .site-chart-card {
    padding: 1.4rem 1.5rem;
  }

  .runs-needed-banner {
    padding: 0.85rem 1.35rem;
  }

  .runs-needed-text {
    font-size: 0.98rem;
  }
}

@media (min-width: 1920px) {
  .site-container {
    max-width: min(1960px, calc(100vw - 4.5rem));
    padding-top: 1.85rem;
    padding-bottom: 1.85rem;
  }

  .site-chart-card {
    padding: 1.5rem 1.65rem;
  }
}

.site-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.site-char-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-main);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.site-char-header {
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, rgba(33, 40, 48, 0.9) 0%, rgba(24, 30, 36, 0.95) 100%);
  min-height: 90px;
  position: relative;
  overflow: hidden;
}

.site-char-meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.site-char-name {
  font-weight: 800;
  font-size: 1.05rem;
  color: #fff;
}

.site-char-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.site-char-portrait {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.site-char-wengine-box {
  background-color: var(--bg-subcard);
  border-top: 1px solid var(--border-main);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.site-wengine-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.site-wengine-meta {
  display: flex;
  flex-direction: column;
}

.site-wengine-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
}

.site-wengine-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.site-discs-stack {
  margin-left: auto;
  display: flex;
  gap: 4px;
}

.site-disc-img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.site-meta-bar {
  background-color: var(--bg-nav);
  border: 1px solid var(--border-main);
  border-radius: 6px;
  padding: 0.6rem 1rem;
  margin-bottom: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
  font-size: 0.82rem;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-muted);
}

.site-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.site-badge-val {
  color: var(--c-cyan);
  font-weight: 700;
}

.site-proof-link {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  max-width: 10.5rem;
  min-width: 0;
  flex: 0 1 auto;
}

.site-proof-link a {
  color: var(--c-cyan);
  text-decoration: underline;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.site-proof-link.is-unlisted a {
  color: var(--c-orange);
}

.site-proof-warn {
  color: var(--c-orange);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: normal;
  max-width: 14rem;
}

.site-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.site-kpi-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-main);
  border-radius: 8px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
}

.site-kpi-card.border-cyan { border-top: 4px solid var(--c-cyan); }
.site-kpi-card.border-orange { border-top: 4px solid var(--c-orange); }

.site-kpi-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.site-kpi-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 2.4rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 0.5rem;
}

.site-kpi-stats {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: var(--text-dim);
  display: flex;
  gap: 0.8rem;
}

.site-chart-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-main);
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

.site-chart-card.stats-themed-card {
  background:
    radial-gradient(900px 380px at 8% 0%, rgba(var(--tc-accent-rgb), 0.28), transparent 58%),
    radial-gradient(700px 320px at 100% 100%, rgba(var(--tc-accent-rgb), 0.16), transparent 52%),
    var(--bg-card);
  border-color: rgba(var(--tc-accent-rgb), 0.38);
  color: var(--text-main);
}

.site-chart-card.stats-themed-card .site-chart-card {
  background: var(--bg-subcard);
  border-color: var(--border-main);
}

.site-chart-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.site-pie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.docs-enemy-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.25rem;
}

.docs-enemy-stats .table-wrapper {
  overflow: visible;
}

.docs-enemy-stats .custom-table,
.docs-enemy-stats .custom-table td {
  font-family: inherit;
  color: #fff;
}

.docs-enemy-stats .custom-table td:last-child {
  text-align: right;
}

.filter-bar {
  background-color: var(--bg-nav);
  border: 1px solid var(--border-main);
  border-radius: 8px;
  padding: 0.85rem 1.25rem;
  margin-bottom: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  align-items: center;
}

/* Collapsible filter trays (collapsed by default on mobile) */
.filter-tray {
  width: 100%;
}

.filter-tray-toggle {
  display: none;
}

.checkbox-container.hide-substats-toggle {
  display: none;
}

.filter-tray-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.filter-tray-title {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--c-cyan);
}

.filter-tray-sub {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0;
  text-transform: none;
  margin-top: 0.15rem;
}

.filter-tray-chevron {
  font-size: 0.85rem;
  color: var(--c-cyan);
  flex-shrink: 0;
}

.site-breakdown-collapse {
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.site-breakdown-collapse:hover,
.site-breakdown-collapse:focus-visible {
  background: var(--bg-subcard);
  border-color: var(--c-orange);
  color: var(--c-orange);
  outline: none;
}

@media (max-width: 768px) {
  .filter-tray {
    border: 1px solid var(--border-main);
    border-radius: 8px;
    background: var(--bg-nav);
    margin-bottom: 0.75rem;
    overflow: visible;
  }

  .filter-tray-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.8rem 0.9rem;
    min-height: 52px;
    background: var(--bg-nav);
    border: none;
    border-radius: 7px;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
  }

  .filter-tray-toggle:hover,
  .filter-tray-toggle:focus-visible {
    background: var(--bg-subcard);
    outline: none;
  }

  .filter-tray-body.is-collapsed {
    display: none;
  }

  .filter-tray-body > .filter-bar,
  .filter-tray-body > .bangboo-filter-banner {
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
  }

  .filter-tray-body > .filter-bar {
    padding: 0.85rem 0.9rem;
  }

  .filter-tray-body > .bangboo-filter-banner {
    padding: 0.85rem 0.9rem 1rem;
  }
}

.slider-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-end;
  width: 100%;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;
  min-width: 200px;
}

.filter-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
}

.filter-val {
  color: var(--c-cyan);
  font-family: 'JetBrains Mono', monospace;
}

.slider-input {
  accent-color: var(--c-cyan);
  height: 5px;
  border-radius: 3px;
  background: var(--border-main);
  outline: none;
  cursor: pointer;
}

.checkbox-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--c-cyan);
}

.checkbox-input {
  width: 16px;
  height: 16px;
  accent-color: var(--c-cyan);
  cursor: pointer;
}

.tc-tooltip-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.tc-tooltip-box {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 100%;
  margin-top: 10px;
  right: 0;
  width: 340px;
  background-color: #0F141C;
  border: 1px solid var(--c-cyan);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.85);
  border-radius: 8px;
  padding: 1rem;
  z-index: 1000;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  color: var(--text-main);
  line-height: 1.55;
}

.tc-tooltip-box::after {
  content: '';
  position: absolute;
  top: -15px;
  left: 0;
  right: 0;
  height: 15px;
  background: transparent;
}

.tc-tooltip-box::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 28px;
  width: 10px;
  height: 10px;
  background-color: #0F141C;
  border-left: 1px solid var(--c-cyan);
  border-top: 1px solid var(--c-cyan);
  transform: rotate(45deg);
  z-index: 1;
}

.tc-tooltip-wrapper:hover .tc-tooltip-box,
.tc-tooltip-box:hover {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.tc-tooltip-header {
  font-weight: 800;
  color: var(--c-cyan);
  font-size: 0.88rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-main);
  padding-bottom: 0.35rem;
}

.tc-tooltip-section {
  margin-bottom: 0.6rem;
  color: #fff;
}

.tc-tooltip-note {
  color: var(--c-yellow);
  font-weight: 700;
  margin-bottom: 0.6rem;
}

.tc-tooltip-reason {
  color: var(--text-muted);
  font-size: 0.76rem;
  margin-bottom: 0.5rem;
}

.tc-tooltip-reason strong {
  color: var(--c-orange);
}

.table-wrapper {
  overflow-x: auto;
  border-radius: 6px;
  border: 1px solid var(--border-main);
}

.custom-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.85rem;
}

.custom-table th {
  background-color: var(--bg-nav);
  color: var(--c-cyan);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-main);
  text-transform: uppercase;
  font-size: 0.75rem;
}

.custom-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-main);
  background-color: var(--bg-card);
  color: #fff;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(13, 17, 23, 0.82);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition:
    opacity var(--dur-base, 200ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    backdrop-filter var(--dur-base, 200ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    -webkit-backdrop-filter var(--dur-base, 200ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modal-card {
  background-color: var(--bg-nav);
  border: 1px solid var(--c-cyan);
  width: 90%;
  max-width: 600px;
  border-radius: 12px;
  padding: 1.75rem;
  /* Exit: 150ms ease-out to scale(0.98) + fade. */
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition:
    opacity 150ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    transform 150ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

/* Entrance: 260ms on the snappy ease-out the modal spec calls for. */
.modal-overlay.active .modal-card {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity var(--dur-slow, 260ms) var(--ease-pop, cubic-bezier(0.16, 1, 0.3, 1)),
    transform var(--dur-slow, 260ms) var(--ease-pop, cubic-bezier(0.16, 1, 0.3, 1));
}

.dropzone {
  border: 2px dashed var(--border-main);
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  background-color: var(--bg-card);
  cursor: pointer;
  margin-bottom: 1.25rem;
}

.dropzone:hover {
  border-color: var(--c-cyan);
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
}

.form-control {
  width: 100%;
  padding: 0.65rem;
  background-color: var(--bg-card);
  border: 1px solid var(--border-main);
  border-radius: 6px;
  color: #fff;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.35;
  box-sizing: border-box;
}

select.form-control {
  cursor: pointer;
}

.form-control[readonly],
.form-control:disabled {
  cursor: default;
  opacity: 1;
  color: #fff;
}

.form-control:focus {
  outline: none;
  border-color: var(--c-cyan);
}

.btn-primary {
  background-color: var(--c-cyan);
  color: #0D1117;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: lowercase;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  width: 100%;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.btn-primary:hover {
  opacity: 0.9;
}

.agent-filter-row {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border-main);
  width: 100%;
}

.archive-toggle-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border-main);
  width: 100%;
}

.agent-select-group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1;
  min-width: 250px;
}

.agent-select-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}

.agent-multi-select {
  background: var(--bg-card);
  border: 1px solid var(--border-main);
  color: var(--text-main);
  border-radius: 6px;
  padding: 0.65rem;
  font-size: 0.85rem;
  font-family: inherit;
  font-weight: 600;
  line-height: 1.35;
  width: 100%;
  cursor: pointer;
  box-sizing: border-box;
}

.agent-multi-select:focus {
  outline: none;
  border-color: var(--c-cyan);
}

.active-agent-tags {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}

.agent-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.agent-tag-inc {
  background: rgba(56, 189, 248, 0.15);
  color: var(--c-cyan);
  border: 1px solid var(--c-cyan);
}

.agent-tag-exc {
  background: rgba(249, 115, 22, 0.15);
  color: var(--c-orange);
  border: 1px solid var(--c-orange);
}

.agent-tag:hover {
  opacity: 0.8;
}

@keyframes pulseGlow {
  0% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.15); opacity: 1; text-shadow: 0 0 16px var(--c-cyan); }
  100% { transform: scale(1); opacity: 0.8; }
}

@keyframes loadingBarAnim {
  0% { left: -100%; width: 30%; }
  50% { left: 35%; width: 45%; }
  100% { left: 100%; width: 30%; }
}

@keyframes boltLoadPulse {
  0% { transform: scale(1) rotate(0deg); opacity: 0.7; text-shadow: 0 0 0 rgba(56, 189, 248, 0); }
  40% { transform: scale(1.22) rotate(-5deg); opacity: 1; text-shadow: 0 0 22px var(--c-cyan); }
  55% { transform: scale(1.16) rotate(4deg); opacity: 1; text-shadow: 0 0 28px var(--c-cyan); }
  75% { transform: scale(1.05) rotate(-2deg); opacity: 0.95; text-shadow: 0 0 14px var(--c-cyan); }
  100% { transform: scale(1) rotate(0deg); opacity: 0.7; text-shadow: 0 0 0 rgba(56, 189, 248, 0); }
}

/* The collapsed nav (menu button + sidebar): html.nav-compact is set by
   js/app.js fitNavbar at 900px and below, and whenever the centred tabs would
   run into the brand or the actions (longer labels in other languages, the
   advanced toggle's extra tabs). */
html.nav-compact .site-navbar {
  padding: 0.75rem 1rem;
  flex-wrap: nowrap;
  gap: 0.65rem;
  height: auto;
}

html.nav-compact .nav-menu-toggle {
  display: inline-flex;
}

html.nav-compact .nav-center-tabs {
  display: none !important;
}

html.nav-compact .nav-actions {
  margin-left: auto;
  gap: 0.5rem;
}

html.nav-compact .nav-menu-toggle {
  width: 34px;
  height: 34px;
}

html.nav-compact .nav-sidebar-overlay {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 180;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

html.nav-compact .nav-sidebar-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

html.nav-compact .nav-sidebar {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(300px, 86vw);
  background: var(--bg-nav);
  border-right: 1px solid var(--border-main);
  z-index: 190;
  transform: translateX(-105%);
  transition: transform 0.22s ease;
  box-shadow: 8px 0 28px rgba(0, 0, 0, 0.45);
  padding: 0.85rem 0.85rem 1.25rem;
  gap: 0.85rem;
}

html.nav-compact .nav-sidebar.is-open {
  transform: translateX(0);
}

html.nav-compact .nav-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--border-main);
}

html.nav-compact .nav-sidebar-title {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 1px;
  color: var(--c-cyan);
  text-transform: uppercase;
}

html.nav-compact .nav-sidebar-close {
  width: 34px;
  height: 34px;
  border: 1px solid var(--border-main);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
}

html.nav-compact .nav-sidebar-links {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

html.nav-compact .nav-side-btn {
  width: 100%;
  justify-content: flex-start;
  height: 42px;
  padding: 0 0.85rem;
  font-size: 0.82rem;
  letter-spacing: 0.4px;
}

@media (max-width: 900px) {
  .site-btn {
    padding: 0.4rem 0.65rem;
    font-size: 0.78rem;
  }

  .brand-badge {
    font-size: 0.8rem;
    height: 34px;
    padding: 0 0.75rem;
  }
}

@media (max-width: 640px) {
  .site-container {
    padding: 0.75rem 0.5rem;
  }

  .site-navbar {
    padding: 0.65rem 0.5rem;
  }

  .filter-bar {
    padding: 0.75rem;
    gap: 0.75rem;
  }

  .runs-needed-banner {
    gap: 0.45rem;
    align-items: flex-start;
  }

  .runs-needed-text {
    font-size: 0.82rem;
  }

  .discord-fab {
    right: 0.85rem;
    bottom: 0.85rem;
    width: 3.1rem;
    height: 3.1rem;
  }

  .discord-fab img {
    width: 1.5rem;
  }

  .slider-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
  }

  .slider-group {
    min-width: 100%;
    width: 100%;
  }

  .agent-filter-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .agent-select-group {
    min-width: 100%;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }

  .site-team-grid {
    grid-template-columns: 1fr;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
  }

  .site-char-card {
    padding: 0.65rem 0.75rem;
  }

  .site-char-name {
    font-size: 0.9rem;
  }

  .site-wengine-title {
    font-size: 0.8rem;
  }

  .site-pie-grid {
    grid-template-columns: 1fr;
  }

  .docs-enemy-stats {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .site-meta-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .site-meta-bar > div:last-child {
    margin-left: 0 !important;
  }

  .modal-card {
    width: 95%;
    padding: 1.25rem;
    max-height: 90vh;
    overflow-y: auto;
  }

  .dropzone {
    padding: 1.25rem 0.75rem;
  }

  .table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .custom-table th, .custom-table td {
    padding: 0.5rem 0.65rem;
    font-size: 0.78rem;
  }

  .site-kpi-grid {
    grid-template-columns: 1fr;
  }

  .filter-label {
    font-size: 0.78rem;
  }

  .checkbox-container.hide-substats-toggle {
    display: flex;
  }

  .runs-needed-banner {
    padding: 0.65rem 0.7rem;
  }

  .bangboo-skill-toggle {
    flex-direction: column;
  }

  .bangboo-skill-toggle .bangboo-skill-btn,
  .bangboo-skill-toggle .bangboo-skill-btn-wrap {
    width: 100%;
  }

  .site-chart-card {
    padding: 0.9rem;
    margin-bottom: 0.9rem;
  }

  .site-chart-title {
    font-size: 0.88rem;
    margin-bottom: 0.75rem;
  }

  .site-char-header {
    padding: 0.7rem 0.75rem;
    min-height: 0;
  }

  .site-char-portrait {
    width: 52px;
    height: 52px;
  }

  .site-char-wengine-box {
    padding: 0.55rem 0.75rem;
  }

  .site-kpi-card {
    padding: 0.9rem;
  }

  .site-kpi-val {
    font-size: 1.8rem;
  }

  .site-meta-bar {
    padding: 0.6rem 0.7rem;
  }

  .site-badge {
    font-size: 0.75rem;
  }

  .site-meta-bar--run {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: nowrap;
    overflow: hidden;
    min-height: 0;
  }

  .site-meta-bar--run > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    gap: 0.5rem;
    overflow: hidden;
  }

  .site-meta-bar--run > div:last-child {
    margin-left: 0 !important;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    row-gap: 0;
  }

  .site-meta-bar--run .meta-hide-mobile {
    display: none !important;
  }

  .site-meta-bar--run .meta-primary {
    font-size: 0.85rem !important;
  }

  .site-meta-bar--run .site-proof-link {
    max-width: none;
    flex: 0 0 auto;
  }

  .site-meta-bar--run .meta-bangboo {
    min-width: 0;
    overflow: hidden;
    flex: 0 1 auto;
  }

  .site-meta-bar--run .meta-bangboo-label {
    display: none;
  }

  .site-meta-bar--run .meta-bangboo .site-badge-val {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .site-breakdown-actions {
    position: sticky;
    bottom: 0;
    z-index: 6;
    padding: 0.6rem 0.5rem;
    margin: 0.75rem -0.9rem -0.9rem;
    background: rgba(13, 17, 23, 0.96);
    border-top: 1px solid var(--border-main);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  .site-breakdown-actions .site-btn {
    flex: 1 1 auto;
  }

  .site-breakdown-actions .site-breakdown-collapse {
    order: -1;
  }
}

.tier-list-page {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.tier-chart-card {
  overflow: hidden;
}

.tier-chart-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 280px;
}

.tier-chart-tooltip {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  max-width: min(340px, calc(100vw - 16px));
  padding: 12px 14px;
  background-color: #0F141C;
  border: 1px solid #30363D;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.85);
  color: #E6EDF3;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  white-space: pre-wrap;
  transition: opacity 0.12s ease;
}

.tier-chart-tooltip-title {
  color: #38BDF8;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 6px;
  white-space: normal;
}

.tier-chart-tooltip-body {
  color: #E6EDF3;
}

.tier-chart-tooltip-gap {
  height: 0.45em;
}

.tier-chart-tooltip-foot {
  margin-top: 8px;
  color: #8B949E;
  font-size: 11px;
  font-weight: 600;
}

.tier-chart-wrap canvas {
  max-width: 100%;
}

.tier-legend .tier-legend-item,
button.tier-legend-item {
  max-width: 100%;
}

.tier-intro h2 {
  line-height: 1.25;
  word-break: break-word;
}

.tier-meta-row {
  row-gap: 0.45rem;
}

.tier-method {
  max-width: 74ch;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.tier-method > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  list-style: none;
  user-select: none;
}

.tier-method > summary::-webkit-details-marker {
  display: none;
}

.tier-method > summary::before {
  content: '+';
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: var(--c-orange, #F97316);
}

.tier-method[open] > summary::before {
  content: '−';
}

.tier-method > summary:hover {
  color: var(--text-main);
}

.tier-method-body {
  margin-top: 0.6rem;
  line-height: 1.55;
}

.tier-method-body p {
  margin: 0 0 0.4rem;
}

.tier-method-body p:last-child {
  margin-bottom: 0;
}

.tier-formula {
  margin: 0.15rem 0 0.5rem;
  color: var(--text-main);
  overflow-x: auto;
  overflow-y: hidden;
}

.tier-formula .katex {
  font-size: 1em;
}

.tier-chart-tooltip-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #30363D;
}

.tier-chart-tooltip-actions button {
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  color: #E6EDF3;
  background: #161B22;
  border: 1px solid #30363D;
  border-radius: 6px;
  padding: 5px 9px;
  cursor: pointer;
}

.tier-chart-tooltip-actions button:hover {
  border-color: #58A6FF;
  color: #fff;
}

.tier-chart-tooltip-actions button.primary {
  margin-left: auto;
  background: #1F6FEB;
  border-color: #1F6FEB;
  color: #fff;
}

.tier-chart-tooltip-count {
  color: #8B949E;
  font-size: 11px;
  font-weight: 700;
  min-width: 2.6em;
  text-align: center;
}

@media (max-width: 900px) {
  .tier-intro {
    padding: 1.1rem !important;
  }

  .tier-intro h2 {
    font-size: 1.2rem !important;
  }

  .tier-intro p {
    font-size: 0.82rem !important;
    line-height: 1.45;
  }

  .tier-chart-card {
    padding: 0.85rem !important;
  }

  .tier-chart-wrap {
    height: 480px !important;
  }

  .tier-chart-wrap.support {
    height: 520px !important;
  }

  .archive-toggle-row {
    align-items: flex-start !important;
  }

  .tc-tooltip-box {
    width: min(340px, calc(100vw - 2rem)) !important;
    left: 0;
    right: auto;
  }
}

@media (max-width: 640px) {
  .tier-list-page {
    gap: 1rem !important;
  }

  .tier-intro {
    padding: 0.85rem !important;
  }

  .tier-intro h2 {
    font-size: 1.05rem !important;
    margin-bottom: 0.35rem !important;
  }

  .tier-intro p {
    display: block;
    font-size: 0.78rem !important;
    line-height: 1.45 !important;
    margin-bottom: 0.5rem !important;
  }

  .tier-meta-row {
    gap: 0.55rem 0.85rem !important;
    font-size: 0.72rem !important;
  }

  .tier-meta-hint {
    display: inline;
  }

  .tier-chart-card {
    padding: 0.45rem !important;
  }

  .tier-chart-wrap {
    height: 360px !important;
  }

  .tier-chart-wrap.support {
    height: 380px !important;
  }

  .tier-legend {
    gap: 0.45rem !important;
    justify-content: flex-start !important;
  }

  button.tier-legend-item {
    padding: 0.28rem 0.55rem !important;
    font-size: 0.75rem !important;
  }

  .filter-group {
    min-width: 100%;
  }

  .agent-select-group {
    min-width: 100% !important;
  }
}

.tc-mock-page {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  margin-bottom: 2.5rem;
}

.tc-mock-option {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.tc-mock-option-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  align-items: baseline;
}

.tc-mock-option-tag {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  color: var(--c-yellow);
  background: rgba(234, 179, 8, 0.12);
  border: 1px solid rgba(234, 179, 8, 0.35);
  border-radius: 6px;
  padding: 0.25rem 0.65rem;
}

.tc-mock-option-desc {
  color: var(--text-muted);
  font-size: 0.88rem;
}

.tc-mock-frame {
  overflow-x: auto;
  padding: 0.75rem;
  background: var(--bg-nav);
  border: 1px dashed var(--border-main);
  border-radius: 10px;
}

.tc-mock-frame.portrait {
  display: flex;
  justify-content: center;
}

.tc-export-canvas {
  --tc-accent: #38BDF8;
  --tc-accent-ink: #0D1117;
  --tc-accent-rgb: 56, 189, 248;
  --tc-canvas-bg: #161B22;
  --tc-panel-bg: #0D1117;
  --tc-card-bg: #212830;
  --tc-hover-bg: #2D3748;
  --tc-border: #30363D;
  --tc-text: #FFFFFF;
  --tc-muted: #8B949E;
  --tc-dim: #6E7681;
  background:
    radial-gradient(900px 380px at 8% 0%, rgba(var(--tc-accent-rgb), 0.42), transparent 58%),
    radial-gradient(700px 320px at 100% 100%, rgba(var(--tc-accent-rgb), 0.24), transparent 52%),
    var(--tc-canvas-bg);
  border: 1px solid var(--tc-border);
  border-radius: 12px;
  color: var(--tc-text);
  font-family: 'Inter', sans-serif;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.tc-export-canvas.tc-theme-site {
  background: var(--tc-canvas-bg);
}

.tc-export-brand {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 1px;
  color: var(--tc-accent);
}

.tc-export-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--tc-text);
  margin-top: 0.2rem;
}

.tc-export-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.7rem;
  margin-top: 0.32rem;
}

.tc-export-social {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--tc-text);
  line-height: 1;
}

.tc-export-social-icon {
  width: 12px;
  height: 12px;
  color: var(--tc-accent);
  display: inline-flex;
  flex-shrink: 0;
}

.tc-export-social-icon svg {
  width: 12px;
  height: 12px;
  display: block;
}

.tc-axis-chip {
  display: inline-flex;
  margin-top: 0.45rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: var(--tc-accent-ink);
  background: var(--tc-accent);
  border-radius: 4px;
  padding: 0.18rem 0.5rem;
}

.tc-axis-chip.multi {
  background: var(--c-orange);
}

.tc-mock-boss {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  margin: 0.85rem 0;
  padding: 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border-main);
  border-radius: 8px;
}

.tc-mock-boss.compact {
  flex-direction: row;
  align-items: center;
  gap: 0.65rem;
  margin: 0.65rem 0;
  padding: 0.55rem;
}

.tc-mock-boss-art {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid var(--border-main);
  background: linear-gradient(145deg, var(--tc-hover-bg), var(--tc-panel-bg));
  position: relative;
  overflow: hidden;
  display: block;
}

.tc-mock-boss.compact .tc-mock-boss-art {
  width: 72px;
  height: 72px;
}

.tc-mock-boss-placeholder {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 0.75rem;
  color: var(--text-dim);
  letter-spacing: 1px;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tc-mock-boss-name {
  font-weight: 800;
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
}

.tc-mock-boss-line {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.tc-mock-boss-line strong {
  color: var(--text-main);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
}

.tc-mock-team-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-bottom: 0.85rem;
}

.tc-mock-agent-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border-main);
  border-radius: 8px;
  padding: 0.45rem 0.65rem;
  min-width: 160px;
}

.tc-mock-portrait {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: none;
  background: transparent;
}

.tc-mock-portrait.mini {
  width: 28px;
  height: 28px;
}

.tc-mock-portrait.col {
  width: 36px;
  height: 36px;
}

.tc-mock-agent-name {
  font-weight: 800;
  font-size: 0.82rem;
}

.tc-mock-agent-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.tc-mock-shared-gear {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  justify-content: center;
}

.tc-mock-gear-row {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}

.tc-mock-gear-img {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  border: none;
  object-fit: contain;
  background: transparent;
}

.tc-mock-gear-img.compact {
  width: 28px;
  height: 28px;
}

.tc-mock-subs {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
}

.tc-mock-subs.compact {
  font-size: 0.65rem;
  line-height: 1.35;
}

.tc-mock-shared-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-top: 0.75rem;
  margin-bottom: 0.35rem;
}

.tc-strip-canvas {
  display: grid;
  grid-template-columns: 300px 1fr;
  min-width: 1180px;
  width: 100%;
  max-width: 100%;
  min-height: 320px;
}

.tc-iv-strip.tc-strip-canvas {
  min-height: 0;
  align-items: stretch;
}

.tc-strip-meta {
  padding: 0.85rem;
  border-right: 1px solid var(--tc-border);
  background: var(--tc-panel-bg);
  border-radius: 12px 0 0 12px;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.tc-strip-meta .tc-mock-boss {
  min-width: 0;
}

.tc-strip-meta .tc-mock-boss-meta {
  min-width: 0;
  flex: 1;
}

.tc-strip-meta .tc-mock-boss-name,
.tc-strip-meta .tc-mock-boss-line {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.tc-strip-meta .tc-mock-boss-line {
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
}

.tc-strip-team-mini {
  display: none;
}

.tc-strip-team-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
  width: 100%;
  margin-top: 0.15rem;
  align-items: start;
  justify-items: center;
}

.tc-strip-team-img {
  width: 100%;
  max-width: 64px;
  aspect-ratio: 1 / 1;
  height: auto;
  max-height: none;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: none;
  background: transparent;
  display: block;
  align-self: start;
  flex-shrink: 0;
}

.tc-strip-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  height: 100%;
  min-height: 0;
  align-self: stretch;
}

.tc-strip-cols.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tc-strip-cols.cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tc-strip-cols.cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.tc-strip-cols.cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.tc-strip-cols.cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.tc-strip-cols.cols-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.tc-strip-col {
  padding: 0.75rem 0.55rem;
  border-right: 1px solid var(--tc-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  text-align: center;
  min-height: 0;
  height: 100%;
  background: rgba(var(--tc-accent-rgb), 0.04);
}

.tc-strip-col:nth-child(even) {
  background: rgba(var(--tc-accent-rgb), 0.09);
}

.tc-strip-col:last-child {
  border-right: none;
}

.tc-strip-col.baseline {
  background: rgba(var(--tc-accent-rgb), 0.16);
}

.tc-iv-col {
  padding: 0.65rem 0.5rem 0.75rem;
}

.tc-iv-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  max-width: 100%;
  font-size: 1.05rem;
  color: var(--tc-text);
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0.15rem 0.25rem;
  line-height: 1.25;
  text-align: center;
  order: 0;
}

.tc-iv-chip.inline {
  vertical-align: middle;
  margin: 0 0.15rem;
  font-size: 0.86rem;
  color: var(--c-orange);
  background: rgba(249, 115, 22, 0.12);
  border: 1px solid rgba(249, 115, 22, 0.4);
  border-radius: 999px;
  padding: 0.26rem 0.7rem;
}

.tc-iv-chip-prefix {
  display: none;
}

.tc-iv-chip strong {
  color: var(--tc-text);
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.tc-iv-hero {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  order: 1;
}

.tc-iv-hero-ms {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 4.08rem;
  letter-spacing: -1px;
  color: var(--tc-text);
  line-height: 1;
  text-shadow: 0 0 24px rgba(var(--tc-accent-rgb), 0.35);
}

.tc-iv-hero-agent img,
.tc-iv-hero-item img {
  width: min(142px, 94%);
  aspect-ratio: 1 / 1;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center;
  border-radius: 10px;
  border: none;
  background: transparent;
  box-shadow: none;
}

.tc-iv-hero-agent img {
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}

.tc-iv-hero-team {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  min-height: 0;
  padding: 0.2rem 0;
}

.tc-team-stack-img {
  width: min(83px, 76%);
  aspect-ratio: 1 / 1;
  height: auto;
  max-height: none;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
  border: none;
  background: transparent;
  display: block;
  flex-shrink: 0;
}

.tc-iv-strip .tc-export-title {
  font-size: 1.5rem;
}

.tc-iv-strip .tc-mock-shared-label {
  font-size: 0.84rem;
}

.tc-iv-strip .tc-const-list {
  font-size: 0.84rem;
  gap: 0.55rem;
}

.tc-iv-strip .tc-mock-boss-name {
  font-size: 1.14rem;
}

.tc-iv-strip .tc-mock-boss-line {
  font-size: 0.94rem;
}

.tc-iv-strip-teammates .tc-iv-chip {
  max-width: 100%;
}

.tc-iv-strip-teammates .tc-iv-chip strong {
  white-space: normal;
  text-overflow: clip;
  line-height: 1.25;
  font-size: 0.95rem;
}

.tc-titles-compact .tc-iv-chip,
.tc-titles-compact .tc-iv-chip strong,
.tc-titles-compact .tc-iv-name-label {
  font-size: 0.68rem !important;
  line-height: 1.2;
}

.tc-iv-hero-subs {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 2.15rem;
  line-height: 1.15;
  color: var(--tc-text);
  text-align: center;
  padding: 0.35rem;
  letter-spacing: -0.5px;
}

.tc-iv-hero-d456 {
  flex-direction: column;
  gap: 0.55rem;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 1.55rem;
  line-height: 1.25;
  color: var(--tc-text);
  text-align: center;
  padding: 0.35rem;
  letter-spacing: -0.3px;
}

.tc-iv-strip-d456.tc-strip-canvas {
  min-width: 1320px;
}

.tc-iv-strip-d456 .tc-iv-col {
  padding-left: 0.3rem;
  padding-right: 0.3rem;
  overflow: hidden;
  min-width: 0;
}

.tc-iv-strip-d456 .tc-iv-hero-d456 {
  font-size: 0.86rem;
  gap: 0.28rem;
  letter-spacing: -0.15px;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  align-items: stretch;
  padding: 0.15rem 0;
}

.tc-iv-strip-d456 .tc-d456-line {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.2;
  max-width: 100%;
}

.tc-iv-strip-d456 .tc-strip-cols.cols-6 .tc-iv-hero-d456,
.tc-iv-strip-d456 .tc-strip-cols.cols-7 .tc-iv-hero-d456,
.tc-iv-strip-d456 .tc-strip-cols.cols-8 .tc-iv-hero-d456 {
  font-size: 0.78rem;
  gap: 0.22rem;
}

.tc-d456-line {
  white-space: nowrap;
}

.tc-d456-num {
  color: var(--text-muted);
}

.tc-baseline-side {
  margin: 0.35rem 0 0.65rem;
  padding: 0.55rem 0.6rem;
  background: rgba(var(--tc-accent-rgb), 0.08);
  border: 1px solid rgba(var(--tc-accent-rgb), 0.35);
  border-radius: 8px;
}

.tc-baseline-side-dps {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--tc-text);
  line-height: 1.2;
}

.tc-baseline-side-label {
  margin-top: 0.25rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--tc-accent);
  line-height: 1.35;
}

.tc-strip-portraits {
  display: flex;
  gap: 0.25rem;
}

.tc-strip-portraits.muted {
  opacity: 0.55;
}

.tc-mock-portrait.tiny {
  width: 22px;
  height: 22px;
  border-width: 1px;
}

.tc-strip-delta {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 1.44rem;
  line-height: 1.15;
  order: 2;
}

.tc-strip-dps {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--text-muted);
  order: 3;
}

.tc-strip-delta.up { color: var(--c-green); }
.tc-strip-delta.down { color: var(--c-orange); }
.tc-strip-delta.baseline { color: var(--tc-accent); }

.tc-const-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0;
  font-size: 0.7rem;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  line-height: 1.45;
}

.tc-mock-boss.strip-boss {
  margin: 0.45rem 0 0.35rem;
}

.tc-strip-meta .tc-mock-shared-label {
  margin-top: 0.45rem;
}

.tc-strip-meta .tc-const-list {
  margin-bottom: 0.15rem;
}

.tc-strip-meta .tc-strip-team-row {
  margin-top: 0.25rem;
}

.tc-poster-buff-block {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 0.75rem;
}

.tc-poster-buff {
  background: var(--bg-card);
  border: 1px solid var(--border-main);
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
}

.tc-poster-buff-label {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.5px;
  color: var(--tc-accent);
  margin-bottom: 0.35rem;
  text-transform: uppercase;
}

.tc-poster-buff-title {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--tc-text);
  margin: 0 0 0.35rem;
  line-height: 1.25;
}

.tc-poster-buff-body {
  font-size: 0.78rem;
  color: var(--text-main);
  line-height: 1.45;
}

.tc-buff-poster {
  width: 460px;
}

.tc-strip-label,
.tc-diff-chip,
.tc-strip-changed {
  display: none;
}

.tc-poster-canvas,
.tc-master-canvas {
  width: 420px;
  max-width: 100%;
  padding: 1.1rem;
}

.tc-master-canvas {
  width: 460px;
}

.tc-master-sheet {
  width: 100%;
  max-width: 100%;
  min-width: 1180px;
  padding: 1.1rem 1.15rem 0.9rem;
}

.tc-master-top {
  margin-bottom: 0.35rem;
}

.tc-master-top .tc-export-title {
  font-size: 1.55rem;
  margin-bottom: 0.55rem;
}

.tc-master-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(240px, 0.85fr);
  gap: 0.7rem 1rem;
  align-items: stretch;
}

/* Boss card hidden: the team/constants panel takes the full width. */
.tc-master-top-grid.tc-master-top-grid-no-boss {
  grid-template-columns: minmax(0, 1fr);
}

/* Boss slot replaced by the run pies: give them the room a set of pies needs,
   the team/constants panel just the width its lines want. */
.tc-master-top-grid.tc-master-top-grid-pies {
  grid-template-columns: minmax(0, 1.7fr) minmax(225px, 0.72fr);
}

.tc-master-top-boss .tc-mock-boss.strip-boss {
  margin-top: 0;
  height: 100%;
}

.tc-master-top-side {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 0;
  padding: 0.7rem 0.8rem;
  border: 1px solid rgba(var(--tc-accent-rgb), 0.28);
  border-radius: 10px;
  background: var(--tc-panel-bg);
}

/* Run damage pies: the leaderboard-run DPS split + per-member damage splits
   that occupy the boss / HP slot while it is hidden. */
.tc-master-top-pies {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.7rem 0.8rem;
  border: 1px solid rgba(var(--tc-accent-rgb), 0.28);
  border-radius: 10px;
  background: var(--tc-panel-bg);
}

.tc-run-pies-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.tc-run-pies-title {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  color: var(--tc-text);
}

.tc-run-pies-run {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--tc-muted);
  text-align: right;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* One row, always: the pies compress to share the slot rather than wrapping. */
.tc-run-pies-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0.45rem;
}

.tc-run-pie {
  margin: 0;
  min-width: 0;
  padding: 0.4rem 0.45rem 0.5rem;
  border: 1px solid rgba(var(--tc-accent-rgb), 0.2);
  border-radius: 8px;
  background: var(--tc-card-bg);
}

.tc-run-pie-title {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 0.64rem;
  line-height: 1.2;
  color: var(--tc-text);
  text-align: center;
  margin-bottom: 0.3rem;
  min-height: 2.4em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Fixed height + equal-width columns: every pie renders at the same size no
   matter how many legend rows it has. */
.tc-run-pie-canvas {
  position: relative;
  height: 150px;
}

.tc-run-pie-legend {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tc-run-pie-legend-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.tc-run-pie-swatch {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.tc-run-pie-legend-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  line-height: 1.3;
  color: var(--tc-muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tc-master-pies-control {
  margin: 0.15rem 0 0.7rem;
  padding: 0.65rem 0.75rem;
  border: 1px dashed rgba(var(--tc-accent-rgb), 0.32);
  border-radius: 8px;
  background: rgba(var(--tc-accent-rgb), 0.04);
}

.tc-master-pies-control .tc-run-picker {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.6rem;
  margin: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.tc-master-pies-control .tc-run-picker .tc-field {
  flex: 1 1 220px;
}

.tc-master-pies-control .tc-slot-hint {
  flex-basis: 100%;
}

.tc-poster-buff-block.master-buffs.tc-master-top-buffs {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.65rem;
  margin: 0;
}

.tc-poster-buff-block.master-buffs .tc-poster-buff {
  padding: 0.55rem 0.65rem;
  min-height: 0;
}

.tc-poster-buff-block.master-buffs .tc-poster-buff-body {
  font-size: 0.76rem;
  line-height: 1.42;
}

.tc-master-team-row {
  max-width: 240px;
  margin-bottom: 0.45rem;
}

.tc-master-const-list {
  font-size: 0.8rem;
  gap: 0.4rem;
  flex: 1;
}

.tc-master-boards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 0.85rem;
}

/* Two half-width boards share a line; each keeps half the sheet. */
.tc-master-board-row {
  display: flex;
  align-items: stretch;
  gap: 1rem;
}

.tc-master-board-row > .tc-master-board {
  flex: 1 1 0;
  min-width: 0;
}

/* "Stack options vertically": each variant becomes a compact row — hero on the
   left, its name / delta / DPS in one text block on the right — instead of a
   full-height column, which suits narrow half-width boards. The row is a flex
   line so both halves stay vertically centred however tall the row grows. */
.tc-master-sheet .tc-strip-cols.tc-cols-stack {
  grid-template-columns: 1fr;
}

.tc-master-sheet .tc-strip-cols.tc-cols-stack .tc-strip-col {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.85rem;
  padding: 0.4rem 0.7rem;
  border-right: 0;
  border-bottom: 1px solid var(--tc-border);
  text-align: left;
}

.tc-master-sheet .tc-strip-cols.tc-cols-stack .tc-strip-col:last-child {
  border-bottom: 0;
}

.tc-master-sheet .tc-strip-cols.tc-cols-stack .tc-stack-hero {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tc-master-sheet .tc-strip-cols.tc-cols-stack .tc-stack-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
}

.tc-master-sheet .tc-strip-cols.tc-cols-stack .tc-strip-delta {
  font-size: 0.92rem;
}

.tc-master-sheet .tc-strip-cols.tc-cols-stack .tc-strip-dps {
  font-size: 0.72rem;
}

.tc-master-sheet .tc-strip-cols.tc-cols-stack .tc-iv-name-label {
  min-height: 0;
  padding: 0;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
}

.tc-master-sheet .tc-strip-cols.tc-cols-stack .tc-iv-hero-agent img,
.tc-master-sheet .tc-strip-cols.tc-cols-stack .tc-iv-hero-item img {
  width: 46px;
}

.tc-master-sheet .tc-strip-cols.tc-cols-stack .tc-team-stack-img {
  width: 34px;
}

.tc-master-sheet .tc-strip-cols.tc-cols-stack .tc-iv-hero-ms {
  font-size: 2.2rem;
}

.tc-master-sheet .tc-strip-cols.tc-cols-stack .tc-iv-hero-d456 {
  font-size: 0.8rem;
  line-height: 1.2;
  gap: 0.1rem;
  padding: 0;
  text-align: left;
  align-items: flex-start;
}

.tc-master-sheet .tc-strip-cols.tc-cols-stack .tc-iv-hero-subs {
  font-size: 1.05rem;
  padding: 0;
  text-align: left;
}

/* Text-hero boards have no image, so the hero is given a fixed width: the text
   block then starts at the same x in every stacked row instead of drifting with
   the width of each row's text. */
.tc-master-sheet .tc-strip-cols.tc-cols-stack .tc-stack-hero {
  flex-basis: 52px;
}

.tc-master-sheet .tc-strip-cols.tc-cols-stack.tc-stack-tm .tc-stack-hero {
  flex-basis: 112px;
}

.tc-master-sheet .tc-strip-cols.tc-cols-stack.tc-stack-ms .tc-stack-hero {
  flex-basis: 96px;
}

.tc-master-sheet .tc-strip-cols.tc-cols-stack.tc-stack-sub .tc-stack-hero,
.tc-master-sheet .tc-strip-cols.tc-cols-stack.tc-stack-d456 .tc-stack-hero {
  flex-basis: 132px;
  justify-content: flex-start;
}

.tc-master-board {
  border: 1px solid rgba(var(--tc-accent-rgb), 0.35);
  border-radius: 10px;
  background: var(--tc-panel-bg);
  overflow: hidden;
  padding: 0.15rem;
  /* Column so the option grid flexes to fill the panel, keeping a short board's
     borders flush with a taller sibling in the same row instead of stopping short. */
  display: flex;
  flex-direction: column;
}

.tc-master-board-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem 0.5rem;
  border-bottom: 1px solid rgba(var(--tc-accent-rgb), 0.22);
}

.tc-master-board-title {
  font-weight: 800;
  font-size: 1rem;
  color: var(--tc-text);
}

.tc-master-board-axis {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--tc-accent);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.tc-board-commentary {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.tc-iv-strip-has-commentary {
  grid-template-rows: 1fr auto;
  overflow: hidden;
}

.tc-iv-strip-has-commentary .tc-strip-meta {
  border-radius: 12px 0 0 0;
}

.tc-strip-commentary {
  grid-column: 1 / -1;
  padding: 0.55rem 0.9rem 0.65rem;
  border-top: 1px solid var(--border-main);
  background: var(--tc-panel-bg);
  font-size: 0.78rem;
}

.tc-master-board-note {
  padding: 0.45rem 0.9rem 0.2rem;
  font-size: 0.78rem;
}

.tc-master-board-cols {
  min-height: 0;
  height: auto;
  flex: 1 1 auto;
}

.tc-master-col {
  min-height: 0;
  height: auto;
  padding: 0.85rem 0.55rem 0.9rem;
  gap: 0.55rem;
}

.tc-iv-name-label {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 0.92rem;
  line-height: 1.3;
  color: var(--tc-text);
  text-align: center;
  max-width: 100%;
  padding: 0 0.2rem;
  order: 0;
}

.tc-master-sheet .tc-iv-name-label {
  font-size: 0.82rem;
  min-height: 2.1em;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.tc-master-board-teammates .tc-iv-name-label {
  font-size: 0.78rem;
  min-height: 2.6em;
  color: var(--tc-text);
}

.tc-master-board-teammates.tc-titles-compact .tc-iv-name-label {
  font-size: 0.62rem;
  min-height: 2.8em;
}

.tc-strip-cols.cols-8 .tc-iv-chip,
.tc-strip-cols.cols-8 .tc-iv-chip strong {
  font-size: 0.82rem;
}

.tc-strip-cols.cols-8 .tc-iv-hero-ms {
  font-size: 2.6rem;
}

.tc-strip-cols.cols-8 .tc-iv-hero-agent img,
.tc-strip-cols.cols-8 .tc-iv-hero-item img {
  width: min(96px, 92%);
}

.tc-strip-cols.cols-8 .tc-team-stack-img {
  width: min(58px, 78%);
}

.tc-strip-cols.cols-8 .tc-iv-hero-subs {
  font-size: 1.15rem;
}

.tc-strip-cols.cols-8 .tc-iv-hero-d456 {
  font-size: 0.82rem;
  gap: 0.2rem;
}

.tc-strip-cols.cols-8 .tc-strip-dps {
  font-size: 0.72rem;
}

.tc-strip-cols.cols-8 .tc-strip-delta {
  font-size: 1.05rem;
}

.tc-master-sheet .tc-strip-cols.cols-8 .tc-iv-name-label {
  font-size: 0.62rem;
  min-height: 2.4em;
}

.tc-master-sheet .tc-strip-cols.cols-8 .tc-iv-hero-ms {
  font-size: 1.85rem;
}

.tc-master-sheet .tc-strip-cols.cols-8 .tc-iv-hero-agent img,
.tc-master-sheet .tc-strip-cols.cols-8 .tc-iv-hero-item img {
  width: min(64px, 86%);
}

.tc-master-sheet .tc-strip-cols.cols-8 .tc-team-stack-img {
  width: min(40px, 72%);
}

.tc-master-sheet .tc-strip-cols.cols-8 .tc-iv-hero-subs {
  font-size: 1.05rem;
}

.tc-master-sheet .tc-strip-cols.cols-8 .tc-iv-hero-d456 {
  font-size: 0.78rem;
}

.tc-master-sheet .tc-strip-cols.cols-8 .tc-strip-dps {
  font-size: 0.72rem;
}

.tc-master-sheet .tc-strip-cols.cols-8 .tc-strip-delta {
  font-size: 0.92rem;
}

.tc-master-sheet .tc-iv-hero-ms {
  font-size: 2.6rem;
}

.tc-master-sheet .tc-iv-hero-agent img,
.tc-master-sheet .tc-iv-hero-item img {
  width: min(88px, 78%);
}

.tc-master-sheet .tc-team-stack-img {
  width: min(52px, 70%);
}

.tc-master-sheet .tc-iv-hero-team {
  gap: 0.3rem;
  padding: 0.1rem 0;
}

.tc-master-sheet .tc-iv-hero-subs {
  font-size: 1.45rem;
}

.tc-master-sheet .tc-iv-hero-d456 {
  font-size: 1.05rem;
  gap: 0.28rem;
}

.tc-master-sheet .tc-strip-dps {
  font-size: 0.78rem;
}

.tc-master-sheet .tc-strip-delta {
  font-size: 1.1rem;
}

.tc-master-board-teammates .tc-master-col {
  padding-top: 0.7rem;
  padding-bottom: 0.75rem;
}

.tc-poster-header {
  margin-bottom: 0.35rem;
}

.tc-poster-variants {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0.5rem 0 0.85rem;
}

.tc-poster-variants.compact {
  margin: 0.35rem 0 0.15rem;
  gap: 0.35rem;
}

.tc-poster-row {
  display: grid;
  grid-template-columns: 52px 1fr 72px 52px;
  gap: 0.45rem;
  align-items: center;
  padding: 0.35rem 0.45rem;
  border-radius: 6px;
}

.tc-poster-row.baseline {
  background: rgba(var(--tc-accent-rgb), 0.08);
  border: 1px solid rgba(var(--tc-accent-rgb), 0.25);
}

.tc-poster-row-label {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 0.8rem;
  color: var(--tc-accent);
}

.tc-poster-bar-track {
  height: 10px;
  background: var(--bg-subcard);
  border: 1px solid var(--border-main);
  border-radius: 999px;
  overflow: hidden;
}

.tc-poster-bar {
  height: 100%;
  background: var(--tc-accent);
  border-radius: 999px;
}

.tc-poster-row-dps {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 0.78rem;
  text-align: right;
}

.tc-poster-row-delta {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 0.72rem;
  text-align: right;
}

.tc-poster-row-delta.up { color: var(--c-green); }
.tc-poster-row-delta.down { color: var(--c-orange); }

.tc-poster-callout {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.45;
  padding: 0.65rem 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border-main);
  border-radius: 8px;
}

.tc-poster-footer {
  margin-top: 0.75rem;
  font-size: 0.68rem;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  text-align: center;
}

.tc-master-section {
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(var(--tc-accent-rgb), 0.35);
}

.tc-master-section-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.35rem;
}

.tc-master-section-title {
  font-weight: 800;
  font-size: 0.9rem;
}

.tc-workspace {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

.tc-workspace-sub {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0;
  max-width: 72rem;
  line-height: 1.45;
}

.tc-workspace-title-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: flex-start;
}

.tc-workspace-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-start;
}

.tc-theme-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.85rem;
  margin-bottom: 0.75rem;
}

.tc-theme-picker-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-right: 0.15rem;
}

.tc-theme-chip {
  appearance: none;
  border: 1px solid var(--border-main);
  background: var(--bg-card);
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  border-radius: 999px;
  padding: 0.22rem 0.55rem;
  cursor: pointer;
  line-height: 1.2;
}

.tc-theme-chip.active {
  color: var(--chip-ink, #0D1117);
  background: var(--chip-accent, var(--c-cyan));
  border-color: var(--chip-accent, var(--c-cyan));
}

.tc-file-btn {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.tc-save-status {
  margin-top: 0.75rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: var(--text-dim);
}

.tc-session-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.65rem;
  margin-top: 0.45rem;
}

.tc-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
}

.tc-field-wide {
  grid-column: 1 / -1;
}

.tc-textarea {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  line-height: 1.4;
  resize: vertical;
}

.tc-textarea-master {
  min-height: 12rem;
}

.tc-textarea-buff {
  min-height: 9rem;
  white-space: pre-wrap;
}

.tc-session-boss-row {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  margin-top: 0.85rem;
  padding: 0.65rem 0.75rem;
  background: var(--bg-subcard);
  border: 1px solid var(--border-main);
  border-radius: 8px;
}

.tc-session-boss-art {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-main);
  background: #0D1117;
  position: relative;
}

.tc-session-boss-img,
.tc-mock-boss-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.tc-session-boss-note {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.tc-mock-boss-art {
  overflow: hidden;
  padding: 0;
}

.tc-master-top-boss .tc-mock-boss.compact.strip-boss {
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
  padding: 0.6rem;
}

.tc-master-top-boss .tc-mock-boss.compact.strip-boss .tc-mock-boss-art {
  width: 100%;

  height: 220px;
  min-height: 220px;
  max-height: 220px;
  aspect-ratio: auto;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 8px;
}

.tc-master-top-boss .tc-mock-boss-img {
  object-fit: cover;
  object-position: center 25%;
}

@media (max-width: 1100px) {
  .tc-master-sheet {
    min-width: 0;
  }

  .tc-master-top-grid,
  .tc-master-top-grid.tc-master-top-grid-pies {
    grid-template-columns: 1fr;
  }

  .tc-poster-buff-block.master-buffs.tc-master-top-buffs {
    grid-template-columns: 1fr;
  }
}

.tc-board-tabs-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}

.tc-board-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.tc-board-tab {
  position: relative;
  cursor: grab;
}

.tc-board-tab.dragging {
  opacity: 0.45;
  cursor: grabbing;
}

/* Sliding drop cue: a glowing bar under the half of the tab the board will land on. */
.tc-board-tab.drop-before::after,
.tc-board-tab.drop-after::after {
  content: '';
  position: absolute;
  bottom: 3px;
  height: 2px;
  width: 42%;
  border-radius: 2px;
  background: var(--c-cyan);
  box-shadow: 0 0 8px var(--c-cyan);
  animation: tc-drop-cue 0.45s ease-out;
}

.tc-board-tab.drop-before::after { left: 5px; }
.tc-board-tab.drop-after::after { right: 5px; }

@keyframes tc-drop-cue {
  from { opacity: 0; transform: scaleX(0.35); }
  to { opacity: 1; transform: scaleX(1); }
}

.tc-board-tab.active {
  color: var(--c-yellow) !important;
  border-color: var(--c-yellow) !important;
  font-weight: 800 !important;
}

.tc-board-tab-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  opacity: 0.75;
}

.tc-board-editor {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.65rem;
  align-items: end;
  margin-bottom: 0.9rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--border-main);
}

.tc-check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--text-main);
  padding-bottom: 0.35rem;
}

.tc-slots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
}

.tc-slot-custom-img {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0.15rem 0;
}

.tc-slot-thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--border-main);
  background: #0D1117;
  flex-shrink: 0;
}

.tc-slot-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  color: var(--text-dim);
  text-align: center;
  line-height: 1.15;
  padding: 0.2rem;
}

.tc-session-team-block {
  margin-top: 0.85rem;
}

.tc-session-socials-block {
  margin-top: 0.95rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border-main);
}

.tc-socials-hint {
  margin: 0.3rem 0 0;
  color: var(--text-dim);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.4;
}

.tc-social-rows {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.55rem;
}

.tc-social-row {
  display: grid;
  grid-template-columns: minmax(120px, 150px) minmax(0, 1fr) auto;
  gap: 0.45rem;
  align-items: end;
}

.tc-social-add {
  margin-top: 0.55rem;
}

.tc-team-source-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.1rem;
  margin: 0.45rem 0 0.55rem;
}

.tc-team-source-row .tc-check {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
}

.tc-session-team-pb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.55rem;
}

.tc-run-picker {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--border-main);
}

.tc-run-picker .tc-field {
  margin: 0;
}

.tc-session-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.65rem;
  margin-top: 0.4rem;
}

.tc-session-team-slot {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.55rem 0.65rem;
  background: var(--bg-subcard);
  border: 1px solid var(--border-main);
  border-radius: 8px;
}

.tc-slot-card {
  background: var(--bg-subcard);
  border: 1px solid var(--border-main);
  border-radius: 10px;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.tc-slot-card-head {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: baseline;
}

.tc-slot-idx {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  color: var(--c-cyan);
  font-size: 0.8rem;
}

.tc-slot-source {
  font-size: 0.68rem;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  text-align: right;
}

.tc-slot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.tc-slot-hint {
  font-size: 0.68rem;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
}

.tc-add-slot-btn {
  margin-top: 0.85rem;
}

.tc-empty {
  padding: 1.25rem;
  color: var(--text-muted);
  font-size: 0.9rem;
  text-align: center;
  border: 1px dashed var(--border-main);
  border-radius: 10px;
}

@media (max-width: 768px) {
  .docs-enemy-stats {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .tc-social-row {
    grid-template-columns: 1fr;
  }

  .tc-strip-canvas {
    grid-template-columns: 1fr;
    min-width: 640px;
  }

  .tc-strip-meta {
    border-right: none;
    border-bottom: 1px solid var(--border-main);
    border-radius: 12px 12px 0 0;
  }

  .tc-iv-strip-has-commentary .tc-strip-meta {
    border-radius: 12px 12px 0 0;
  }
}

.yt-thumb {
  width: 1920px;
  height: 1080px;
  box-sizing: border-box;
  padding: 36px 44px;
  background: linear-gradient(135deg, #0D1117 0%, #161B22 100%);
  color: #fff;
  font-family: 'Inter', sans-serif;
}

.yt-thumb-frame {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 32px;
  padding: 36px 44px 40px;
  border: 2px solid #30363D;
  border-radius: 28px;
  background: #161B22;
}

.yt-thumb-header {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 72px;
}

.yt-thumb-badge {
  flex-shrink: 0;
  background: #38BDF8;
  color: #0D1117;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.04em;
  padding: 12px 18px;
  border-radius: 12px;
}

.yt-thumb-title {
  flex: 1;
  min-width: 0;
  font-size: 52px;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.yt-thumb-site {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 36px;
  font-weight: 800;
  color: #38BDF8;
  letter-spacing: 0.01em;
  padding: 10px 16px;
  border: 2px solid rgba(56, 189, 248, 0.45);
  border-radius: 12px;
  background: rgba(13, 17, 23, 0.72);
}

.yt-thumb-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  min-height: 0;
}

.yt-thumb-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 0;
  padding: 26px 28px;
  background: #212830;
  border: 1px solid #30363D;
  border-radius: 20px;
}

.yt-thumb-card-top {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: 1;
  min-height: 0;
}

.yt-thumb-portrait-wrap {
  position: relative;
  flex-shrink: 0;
  width: 280px;
  height: 280px;
  border-radius: 22px;
  border: 4px solid #38BDF8;
  background: #0D1117;
  overflow: hidden;
}

.yt-thumb-portrait-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.yt-thumb-mind {
  position: absolute;
  top: 10px;
  left: 10px;
  min-width: 52px;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(13, 17, 23, 0.88);
  color: #38BDF8;
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  font-weight: 800;
  text-align: center;
}

.yt-thumb-card-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.yt-thumb-agent {
  font-size: 48px;
  font-weight: 800;
  line-height: 1.1;
}

.yt-thumb-dmg {
  color: #38BDF8;
  font-family: 'JetBrains Mono', monospace;
  font-size: 36px;
  font-weight: 800;
}

.yt-thumb-dps {
  color: #8B949E;
  font-family: 'JetBrains Mono', monospace;
  font-size: 28px;
}

.yt-thumb-gear {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: #181E24;
  border-radius: 14px;
}

.yt-thumb-gear img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  flex-shrink: 0;
}

.yt-thumb-gear img.yt-thumb-disc {
  width: 40px;
  height: 40px;
}

.yt-thumb-gear-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.yt-thumb-wengine {
  font-size: 22px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.yt-thumb-discs {
  color: #8B949E;
  font-size: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.yt-thumb-empty {
  color: #6E7681;
  font-size: 28px;
  margin: auto;
}

.yt-thumb-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  padding: 22px 32px;
  background: #0D1117;
  border: 1px solid #30363D;
  border-radius: 16px;
}

.yt-thumb-stat-label {
  color: #8B949E;
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.yt-thumb-stat-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 64px;
  font-weight: 800;
  line-height: 1;
}

.yt-thumb-charts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  min-height: 0;
}

.yt-thumb-chart {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  padding: 22px 24px 24px;
  background: #212830;
  border: 1px solid #30363D;
  border-radius: 18px;
}

.yt-thumb-chart-title {
  font-size: 24px;
  font-weight: 800;
}

.yt-thumb-bars {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 12px;
  flex: 1;
  min-height: 0;
}

.yt-thumb-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.yt-thumb-bar-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #0D1117;
  overflow: hidden;
  flex-shrink: 0;
}

.yt-thumb-bar-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.yt-thumb-bar-track {
  position: relative;
  flex: 1;
  height: 28px;
  border-radius: 7px;
  background: #0D1117;
  overflow: hidden;
}

.yt-thumb-bar-fill {
  height: 100%;
  border-radius: 7px;
}

.yt-thumb-bar-pct {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  font-weight: 800;
  color: #E6EDF3;
}

.yt-thumb--faces,
.yt-thumb--poster {
  padding: 0;
}

.yt-thumb--faces .yt-thumb-frame {
  --yt-inset: 48px;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  gap: 0;
  padding: var(--yt-inset);
}

.yt-thumb--faces .yt-thumb-header {
  align-self: center;
  align-items: center;
  min-height: 0;
  height: auto;
}

.yt-thumb-faces-result {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 44px;
  width: 100%;
}

.yt-thumb-faces-result .yt-thumb-result-item:first-child {
  justify-content: flex-end;
}

.yt-thumb-faces-result .yt-thumb-result-item:last-child {
  justify-content: flex-start;
}

.yt-thumb-result-item {
  display: flex;
  align-items: baseline;
  gap: 18px;
}

.yt-thumb-result-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 100px;
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -3px;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

.yt-thumb-result-label {
  color: #8B949E;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.yt-thumb-result-divider {
  width: 4px;
  height: 78px;
  border-radius: 2px;
  background: #30363D;
}

.yt-thumb-faces-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  width: 100%;
  min-height: 0;
}

.yt-thumb-face-ring {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  box-sizing: border-box;
  padding: 8px;
  border-radius: 36px;
}

.yt-thumb-face {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 28px;
  overflow: hidden;
  background: #0D1117;
  border: none;
}

.yt-thumb-face > img {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.yt-thumb-face-name {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 32px 26px 24px;
  background: linear-gradient(transparent, rgba(13, 17, 23, 0.92) 55%);
  font-size: 64px;
  font-weight: 800;
  line-height: 1;
}

.yt-thumb-face .yt-thumb-mind {
  z-index: 2;
  top: 20px;
  left: 20px;
  height: 124px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-size: 72px;
  min-width: 0;
  padding: 5px;
  border-radius: 18px;
  letter-spacing: 0.02em;
}

.yt-thumb-mind-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 26px;
  border-radius: 13px;
  background: rgba(13, 17, 23, 0.88);
  font-family: 'JetBrains Mono', monospace;
  font-size: 72px;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.02em;
}

.yt-thumb-faces-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  min-height: 0;
  height: auto;
}

.yt-thumb--faces .yt-thumb-site {
  font-family: 'JetBrains Mono', monospace;
  font-size: 100px;
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -3px;
  color: #38BDF8;
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

.yt-thumb-face-bangboo {
  position: absolute;
  z-index: 3;
  bottom: 20px;
  right: 20px;
  width: 124px;
  height: 124px;
  box-sizing: border-box;
  padding: 6px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yt-thumb-face-bangboo-inner {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 8px;
  border-radius: 12px;
  background: rgba(13, 17, 23, 0.85);
  overflow: hidden;
}

.yt-thumb-face-bangboo-img {
  position: absolute;
  max-width: 100%;
  max-height: 100%;
  display: block;
}

.yt-thumb-face-wengine {
  position: absolute;
  z-index: 3;
  top: 20px;
  right: 20px;
  width: 124px;
  height: 124px;
  box-sizing: border-box;
  padding: 6px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yt-thumb-face-wengine-inner {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 8px;
  border-radius: 12px;
  background: rgba(13, 17, 23, 0.85);
  overflow: hidden;
}

.yt-thumb-face-wengine-img {
  position: absolute;
  max-width: 100%;
  max-height: 100%;
  display: block;
}

.yt-thumb--poster .yt-thumb-frame {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.yt-thumb-poster-hero {
  position: relative;
  min-height: 0;
  background: #0D1117;
}

.yt-thumb-poster-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.yt-thumb-poster-hero .yt-thumb-mind {
  top: 32px;
  left: 32px;
  font-size: 42px;
  min-width: 88px;
  padding: 10px 16px;
}

.yt-thumb-poster-hero-name {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 32px;
  font-size: 72px;
  font-weight: 800;
  line-height: 0.95;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.75);
}

.yt-thumb-poster-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px 48px 40px;
  background: #0D1117;
}

.yt-thumb-poster-dps {
  font-family: 'JetBrains Mono', monospace;
  font-size: 168px;
  font-weight: 800;
  color: #38BDF8;
  line-height: 0.85;
  letter-spacing: -4px;
}

.yt-thumb-poster-dps-label {
  margin-top: 8px;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: #8B949E;
}

.yt-thumb-poster-score {
  margin-top: 28px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 64px;
  font-weight: 800;
  color: #F97316;
}

.yt-thumb-poster-supports {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: auto;
}

.yt-thumb-poster-support {
  position: relative;
  height: 280px;
  border-radius: 20px;
  overflow: hidden;
  border: 4px solid #30363D;
  background: #161B22;
}

.yt-thumb-poster-support img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.yt-thumb-poster-support .yt-thumb-mind {
  font-size: 28px;
}

.yt-thumb-poster-support-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 14px 12px;
  background: linear-gradient(transparent, rgba(13, 17, 23, 0.9));
  font-size: 28px;
  font-weight: 800;
}

.yt-thumb-poster-meta {
  margin-top: 22px;
  font-size: 28px;
  font-weight: 700;
  color: #8B949E;
}

.yt-thumb-preview-gallery {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  overflow: auto;
  background: #07090c;
  padding: 28px 32px 80px;
}

.yt-thumb-preview-gallery h2 {
  margin: 0 0 8px;
  font-size: 1.4rem;
}

.yt-thumb-preview-gallery p {
  margin: 0 0 24px;
  color: var(--text-muted);
  max-width: 52rem;
}

.yt-thumb-preview-item {
  margin-bottom: 36px;
}

.yt-thumb-preview-label {
  font-weight: 800;
  font-size: 1rem;
  margin-bottom: 10px;
  color: #fff;
}

.yt-thumb-preview-note {
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 500;
  margin: 0 0 12px;
}

.yt-thumb-preview-frame {
  width: min(672px, calc(100vw - 48px));
  height: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--border-main);
  border-radius: 12px;
  background: #0D1117;
}

.yt-thumb-preview-frame .yt-thumb {
  transform-origin: top left;
}

.yt-thumb-preview-phone {
  width: 320px;
  height: 180px;
  overflow: hidden;
  border: 1px solid var(--border-main);
  border-radius: 10px;
  background: #0D1117;
  margin-top: 10px;
}

.yt-thumb-preview-phone .yt-thumb {
  transform: scale(calc(320 / 1920));
  transform-origin: top left;
}

.yt-thumb-preview-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-start;
}

/* --- Loading animations (webm loop) --- */
.load-webm-video {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.lb-sentinel {
  height: 1px;
}

.lb-bottom-loader {
  display: none;
}

body.lb-loading {
  overflow: hidden;
}

body.lb-loading .lb-bottom-loader {
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 150px;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to top, var(--bg-main, #0D1117) 32%, transparent);
  z-index: 80;
  pointer-events: none;
}

.lb-bottom-video {
  height: 110px;
  width: auto;
  pointer-events: none;
}

.da-page {
  margin-bottom: 1.25rem;
}

.da-muted {
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.55;
}

.da-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.85rem;
  margin-top: 1rem;
}

.da-controls label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  color: var(--c-cyan);
  font-size: 0.8rem;
  font-weight: 700;
}

.da-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.85rem;
}

.da-kpis span {
  display: block;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.da-kpis strong {
  font-size: 1.05rem;
}

.da-mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
}

.da-warn {
  margin-top: 0.35rem;
  padding: 0.35rem 0.5rem;
  border-left: 2px solid var(--accent-warn, #e0a458);
  background: rgba(224, 164, 88, 0.08);
  color: var(--accent-warn, #e0a458);
  font-size: 0.78rem;
  line-height: 1.45;
}

.da-h4 {
  color: var(--c-cyan);
  font-size: 0.95rem;
  font-weight: 800;
  margin: 1rem 0 0.45rem;
}

.da-warn-inline {
  color: var(--accent-warn, #e0a458);
  font-weight: 700;
}

.da-mode-toggle {
  display: inline-flex;
  gap: 0.35rem;
  padding: 0.25rem;
  margin: 0.5rem 0 0.25rem;
  background: var(--bg-main);
  border: 1px solid var(--border-main);
  border-radius: 999px;
}

.da-mode-btn {
  background: none;
  border: none;
  border-radius: 999px;
  padding: 0.4rem 1rem;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.da-mode-btn.active {
  background: var(--c-cyan);
  color: #08131c;
}

.da-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 1rem 0 0.45rem;
}

.da-table-head .da-h4 {
  margin: 0;
}

.da-export-tools {
  display: flex;
  justify-content: flex-end;
  gap: 0.4rem;
}

.da-export-tools .site-btn {
  padding: 0.15rem 0.7rem;
  font-size: 0.72rem;
}

.da-autobest.is-on {
  border-color: var(--c-yellow);
  color: var(--c-yellow);
}

.da-ledger-wrap {
  max-height: 320px;
  overflow: auto;
}

.da-ledger th,
.da-ledger td {
  font-size: 0.78rem;
  vertical-align: top;
}

.da-custom {
  margin-top: 1rem;
  border-top: 1px solid var(--border-main);
  padding-top: 0.85rem;
}

.da-custom-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.da-custom-rows {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.da-custom-row {
  display: grid;
  grid-template-columns: minmax(176px, 1.7fr) 5.5rem auto minmax(140px, 1fr) auto auto;
  gap: 0.5rem;
  align-items: center;
}

.da-custom-row .form-control {
  width: 100%;
}

.da-custom-uptime {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--text-muted);
  font-size: 0.78rem;
  white-space: nowrap;
}

.da-custom-uptime .form-control {
  width: 4.25rem;
}

.da-kind-tag {
  font-size: 0.75rem;
  min-width: 2.4rem;
  text-align: center;
}

.da-custom-remove {
  padding: 0.05rem 0.5rem;
  line-height: 1.6;
}

@media (max-width: 720px) {
  .da-custom-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* --- Language switcher: square flag button + flag menu --- */
.lang-switcher { position: relative; }
.lang-current {
  width: 38px; height: 38px; padding: 0; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-card); border: 1px solid var(--border-main);
  border-radius: 6px; color: var(--text-muted); cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.12s ease;
}
.lang-current:hover,
.lang-switcher.open .lang-current { border-color: var(--border-accent); }
.lang-current:active { transform: scale(0.94); }
.lang-current:focus-visible { outline: 2px solid var(--border-accent); outline-offset: 2px; }
.lang-flag {
  width: 22px; height: 16px; display: block; border-radius: 2px;
  object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10);
  pointer-events: none;
}
.lang-menu {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 168px;
  background: var(--bg-nav); border: 1px solid var(--border-main); border-radius: 8px;
  padding: 4px; display: none; z-index: 60; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}
.lang-switcher.open .lang-menu { display: block; }
.lang-item {
  display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.45rem 0.55rem;
  background: none; border: none; border-radius: 6px; color: var(--text-main);
  font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; text-align: left;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.lang-item:hover { background: var(--bg-subcard); }
.lang-item.is-active { color: var(--c-cyan); }

@media (max-width: 640px) {
  .lang-current { width: 34px; height: 34px; }
  .lang-flag { width: 20px; height: 15px; }
}

/* --- Report modal (reuses .modal-card / .form-control / .btn-primary) --- */
.report-card { max-width: 560px; }
.report-close { background: none; border: none; color: #A0AEC0; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.report-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; }
.report-tabs .site-btn { flex: 1; font-size: 0.78rem; }
.report-tabs .site-btn.is-active { color: var(--c-cyan); border-color: var(--c-cyan); background-color: rgba(56, 189, 248, 0.10); font-weight: 800; }
.report-pick-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.report-hint { color: var(--text-muted); font-size: 0.78rem; }
.report-status { color: var(--c-cyan); font-size: 0.82rem; min-height: 1.1rem; margin-top: 0.5rem; }
.report-thumb img { max-width: 100%; max-height: 160px; border-radius: 6px; display: block; }
#report-cur { word-break: break-word; font-weight: 600; }
#report-cur.is-empty { color: var(--text-muted); font-weight: 400; }
body.report-picking { cursor: crosshair; }
body.report-picking .report-pickable-hl { outline: 2px solid var(--c-cyan) !important; outline-offset: 1px; background-color: rgba(56, 189, 248, 0.12) !important; }

/* ---- css/refresh.css ---- */
/* ==========================================================================
   ZZZ Analytics — UI refresh
   Loaded after styles.css. Adds: type scale, light theme, navbar/hero,
   filter panel, results bar, card affordances, damage-log, states,
   floating search, shortcuts overlay, toast.
   ========================================================================== */

/* ---------- Type scale (7 steps) ---------- */
:root {
  --fs-micro: 11px;
  --fs-small: 12px;
  --fs-caption: 13px;
  --fs-body: 14px;
  --fs-lead: 16px;
  --fs-title: 20px;
  --fs-display: 28px;

  /* Missing token referenced across the app */
  --bg-main: var(--bg-nav);

  /* Agent header base (theme-aware) + score alias */
  --char-header-base: linear-gradient(135deg, rgba(33, 40, 48, 0.9) 0%, rgba(24, 30, 36, 0.95) 100%);
  --c-score: var(--c-cyan);
  --grid-line: #21262D;
  --c-sepia: #CEA36B;   /* legacy bangboo */
  --c-teal: #2DD4BF;    /* current bangboo */

  /* Element tokens */
  --el-physical: #F2D26B;
  --el-fire: #FF6A3D;
  --el-ice: #63E0FF;
  --el-electric: #6E8BFF;
  --el-ether: #C08BFF;
  --el-wind: #4FE0B5;
  --el-frost: #9AD8FF;
  --el-lumiflux: #FF5FD0;
  --el-genesis: #5669EA;
}

/* ---------- Light theme ---------- */
[data-theme="light"] {
  --bg-dark: #F6F8FA;
  --bg-nav: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-subcard: #F0F3F6;
  --bg-hover: #E7ECF1;
  --tip-bg: #EEF2F7;

  --border-main: #D0D7DE;
  --border-accent: #096B8C;

  --text-main: #1F2328;
  --text-muted: #59636E;
  --text-dim: #5A636E;

  --c-cyan: #096B8C;
  --grid-line: #E7ECF1;
  --c-sepia: #7A5628;
  --c-teal: #0F766E;
  --c-orange: #BC4C00;
  --c-purple: #8250DF;
  --c-yellow: #8A5A00;
  --c-red: #B31D28;
  --c-green: #1A7F37;
  --c-pink: #BF3989;

  --char-header-base: linear-gradient(135deg, rgba(246, 248, 250, 0.9) 0%, rgba(240, 243, 246, 0.94) 100%);
}
[data-theme="light"] .site-char-name,
[data-theme="light"] .site-wengine-title,
[data-theme="light"] .site-kpi-val { color: var(--text-main); }
[data-theme="light"] .modal-card { background-color: var(--bg-nav); }
[data-theme="light"] .custom-table td { color: var(--text-main); }
[data-theme="light"] .form-control { color: var(--text-main); }
[data-theme="light"] .agent-multi-select { color: var(--text-main); }
[data-theme="light"] #admin-auth-section .btn-primary { background-color: #FFC24B !important; color: #0D1117 !important; }

/* Catch inline hard-coded dark-theme text/backgrounds still present in JS templates */
[data-theme="light"] [style*="color:#fff"],
[data-theme="light"] [style*="color: #fff"],
[data-theme="light"] [style*="color:#FFF"],
[data-theme="light"] [style*="color: #FFF"],
[data-theme="light"] [style*="color:#FFFFFF"],
[data-theme="light"] [style*="color: #FFFFFF"] { color: var(--text-main) !important; }
[data-theme="light"] [style*="color:#A0AEC0"],
[data-theme="light"] [style*="color: #A0AEC0"],
[data-theme="light"] [style*="color:#E6EDF3"],
[data-theme="light"] [style*="color: #E6EDF3"] { color: var(--text-muted) !important; }
[data-theme="light"] [style*="background:#0D1117"],
[data-theme="light"] [style*="background: #0D1117"],
[data-theme="light"] [style*="background-color:#0D1117"],
[data-theme="light"] [style*="background-color: #0D1117"] { background-color: var(--bg-nav) !important; }

html { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }

/* ==========================================================================
   Navbar — Z logo, page title in the bar, standardised tab type
   ========================================================================== */
.brand-badge {
  width: 38px;
  padding: 0;
  font-size: var(--fs-lead);
  border-radius: 6px 6px 0 6px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%);
}
/* Gemini line-art mark: cyan by default, white on hover. Uses a thickened copy
   of the art (gemini-logo.svg) because the original strokes are sub-pixel at
   navbar size. */
.brand-logo {
  width: 34px;
  height: 34px;
  display: block;
  background-color: var(--c-cyan);
  -webkit-mask: url('/assets/gemini-logo.svg') center / contain no-repeat;
  mask: url('/assets/gemini-logo.svg') center / contain no-repeat;
  transition: background-color 0.15s ease;
}
a.brand:hover .brand-logo,
a.brand:focus-visible .brand-logo { background-color: var(--text-main); }
.nav-page-title {
  font-size: var(--fs-lead);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
a.site-btn.nav-tab-btn { letter-spacing: 1px; font-size: var(--fs-small); color: var(--text-muted); border: 1px solid var(--border-main); background-color: var(--bg-card); }
/* Hover mirrors the theme toggle: text -> text-main, border -> accent */
a.site-btn.nav-tab-btn:hover,
a.site-btn.nav-tab-btn:focus-visible { color: var(--text-main); border-color: var(--border-accent); background-color: var(--bg-subcard); outline: none; }
a.site-btn.nav-tab-btn[aria-current="page"] { color: var(--c-cyan); border-color: var(--c-cyan); background-color: rgba(56, 189, 248, 0.10); font-weight: 800; }

/* Filled brand/primary buttons: on hover the border and text go white */
.btn-upload { border: 1px solid transparent; }
.btn-upload:hover,
.btn-upload:focus-visible { background-color: var(--c-cyan); border-color: #ffffff; color: #ffffff; opacity: 1; }
a.brand .brand-badge { border: 1px solid transparent; }
a.brand:hover .brand-badge,
a.brand:focus-visible .brand-badge { border-color: #ffffff; color: #ffffff; }
.theme-toggle {
  width: 38px; height: 38px; padding: 0; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-card); border: 1px solid var(--border-main);
  border-radius: 6px; color: var(--text-muted); cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, transform 0.12s cubic-bezier(0.23, 1, 0.32, 1);
}
.theme-toggle:hover { color: var(--text-main); border-color: var(--border-accent); }
.theme-toggle:active { transform: scale(0.9); }
.theme-toggle:focus-visible { outline: 2px solid var(--border-accent); outline-offset: 2px; }
.theme-toggle svg { width: 17px; height: 17px; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .theme-toggle { transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease; }
  .theme-toggle:active { transform: none; }
}

/* Calculator toggle: when pressed, hides the advanced pages and submit button. */
#advanced-toggle[aria-pressed="true"] {
  color: var(--c-cyan);
  border-color: var(--c-cyan);
  background-color: rgba(56, 189, 248, 0.10);
}
body.hide-advanced [data-nav-tab="check-stats"],
body.hide-advanced [data-nav-tab="tc"],
body.hide-advanced #open-upload-btn { display: none !important; }

/* ==========================================================================
   Hero + results bar
   ========================================================================== */
.page-lede {
  font-size: var(--fs-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-main);
  margin: 0 0 1.1rem;
}
.hide-mobile { display: inline; }

.results-head {
  position: sticky; top: 59px; z-index: 90;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.9rem; margin-bottom: 1rem;
  /* Opaque, no backdrop-filter: a sticky element with backdrop-filter renders
     blank inside a view-transition snapshot, so the bar "hid then popped" on tab
     swaps. The background was already 96% opaque, so this is visually the same. */
  background: var(--bg-nav);
  border: 1px solid var(--border-main); border-radius: 8px;
}
.results-head .rh-count { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-small); color: var(--text-muted); }
.results-head .rh-count b { color: var(--c-cyan); }
.fresh { display: inline-flex; align-items: center; gap: 0.45rem; font-family: 'JetBrains Mono', monospace; font-size: var(--fs-small); color: var(--text-muted); }
.fresh .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-green); box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--bg-card); border: 1px solid var(--border-main); border-radius: 999px;
  padding: 0.2rem 0.35rem 0.2rem 0.7rem; font-size: var(--fs-small); color: var(--text-main); font-weight: 600;
}
.chip button { all: unset; cursor: pointer; color: var(--text-muted); font-size: 0.9rem; line-height: 1; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; }
.chip button:hover { background: var(--bg-hover); color: var(--text-main); }
.results-head .rh-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.results-head .clear { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: var(--fs-small); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.results-head .clear:hover { color: var(--text-main); }
/* Sort buttons share the Share-view button style; the active one is highlighted. */
.rh-sort-btn[aria-pressed="true"] {
  color: var(--c-cyan);
  border-color: var(--c-cyan);
  background-color: rgba(56, 189, 248, 0.10);
}
.link-btn { height: 28px; font-size: var(--fs-small); letter-spacing: 0.4px; }

/* ==========================================================================
   Filter panel — grouped rows, unified text
   ========================================================================== */
.filter-panel { background-color: var(--bg-nav); border: 1px solid var(--border-main); border-radius: 8px; padding: 1rem 1.25rem; margin-bottom: 1rem; }
.filter-head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.filter-head-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.filter-head .title { font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: var(--fs-caption); letter-spacing: 1px; text-transform: uppercase; color: var(--text-main); }
.filter-head .clear { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: var(--fs-small); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.filter-toggle { display: none; width: 100%; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.6rem 0.15rem; background: none; border: none; color: var(--text-main); cursor: pointer; text-align: left; }
.filter-toggle .t { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-caption); font-weight: 800; letter-spacing: 1px; text-transform: lowercase; color: var(--c-cyan); }
.filter-toggle .c { font-size: var(--fs-small); color: var(--text-muted); }
.filter-toggle .filter-toggle-arrow { display: inline-block; font-size: 1.15rem; line-height: 1; vertical-align: -0.1em; margin-left: 0.15rem; }

.filter-row { display: grid; grid-template-columns: 96px 1fr; gap: 0.6rem 1.25rem; align-items: start; padding: 0.85rem 0; border-top: 1px solid var(--border-main); }
.filter-rows > .filter-row:first-child { margin-top: 0.75rem; }
.filter-row .rlabel { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-dim); padding-top: 0.45rem; }
.filter-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; min-width: 0; }
/* Top row (Bangboo / Beta / Cost). Below the one-row breakpoint the three groups
   each get their own row with an inline, left-aligned group title, instead of
   wrapping into a ragged layout. */
.filter-controls.preset-row { flex-direction: column; align-items: flex-start; gap: 0.7rem; }
.filter-cluster { display: inline-flex; align-items: center; gap: 0.6rem; min-width: 0; }
/* Inline group title, used whenever the top row stacks */
.cluster-label { display: inline; }
/* Same title width across the groups so their controls line up */
.filter-cluster > .seg-label { min-width: 56px; }
.preset-filter-row { grid-template-columns: 1fr; }
.preset-filter-row > .rlabel { display: none; }
/* Dividers/spacers only apply in the one-row layout */
.filter-controls.preset-row .fdivider { display: none; }
.preset-gap { display: none; }
@media (min-width: 1600px) {
  /* One row: three equal columns with the dividers between them, so Beta stays
     centred and the dividers are symmetric about the centre. */
  .filter-controls.preset-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    column-gap: 0.9rem;
  }
  .filter-controls.preset-row > .filter-cluster { justify-self: center; }
  .filter-controls.preset-row .fdivider { display: block; }
}
.agents-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1.75rem; width: 100%; }
.invest-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem 1.75rem; align-items: end; width: 100%; }

/* one size/weight/colour for every descriptive filter string */
.filter-row .hint,
.filter-row .ctl > span,
.filter-row .mini .ml,
.filter-row .norm .norm-label,
.filter-row .switch,
.filter-row details.why > summary { font-size: var(--fs-caption); font-weight: 600; color: var(--text-muted); }

.seg-sm { display: inline-flex; border: 1px solid var(--border-main); border-radius: 6px; overflow: hidden; background: var(--bg-card); }
.seg-sm button { appearance: none; background: none; border: none; cursor: pointer; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.3px; padding: 0.32rem 0.8rem; }
.seg-sm button + button { border-left: 1px solid var(--border-main); }
.seg-sm button:hover { color: var(--text-main); background: var(--bg-subcard); }
.seg-sm button[aria-pressed="true"] { background: var(--c-cyan); color: #0D1117; }
/* Filled brand elements keep the brand cyan + dark ink in light mode */
[data-theme="light"] .brand-badge,
[data-theme="light"] .btn-upload,
[data-theme="light"] .seg-sm button[aria-pressed="true"] { background-color: #38BDF8; color: #0D1117; }
/* A normalisation preset whose standard sliders have been nudged: yellow warns
   that the view is no longer the preset, and clicking it resets the sliders. */
.seg-sm button[aria-pressed="true"].is-modified,
[data-theme="light"] .seg-sm button[aria-pressed="true"].is-modified { background: var(--c-yellow); color: #0D1117; }
.fdivider { width: 1px; align-self: stretch; min-height: 22px; background: var(--border-main); margin: 0 0.15rem; }
.seg-label { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-dim); }

/* Investment preset group: hover a segment to read its rules. */
.preset-wrap { position: relative; display: inline-flex; align-items: center; }
.preset-wrap:has(button[data-preset="m0r0"]:hover) .preset-tip[data-tip="m0r0"],
.preset-wrap:has(button[data-preset="norm"]:hover) .preset-tip[data-tip="norm"],
.preset-wrap:has(button[data-preset="m1norm"]:hover) .preset-tip[data-tip="m1norm"] { visibility: visible; opacity: 1; pointer-events: auto; }

.ctl { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.ctl > span { white-space: nowrap; }
.ctl-select, .filter-row .form-control {
  background: var(--bg-card); border: 1px solid var(--border-main); color: var(--text-main);
  border-radius: 6px; padding: 0.42rem 0.6rem; font-size: var(--fs-caption); font-weight: 600;
  font-family: inherit; cursor: pointer; flex: 1 1 auto; min-width: 0;
}
.ctl-select.logic { flex: 0 0 108px; }
.ctl-select:hover { border-color: var(--border-accent); }
.mini { display: flex; flex-direction: column; gap: 0.28rem; min-width: 0; }
.mini .ml { display: flex; justify-content: space-between; gap: 0.5rem; }
.mini .ml b { color: var(--c-cyan); font-family: 'JetBrains Mono', monospace; }
.mini input[type="range"] { width: 100%; accent-color: var(--c-cyan); height: 4px; cursor: pointer; }
.switch { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.switch:hover { color: var(--text-main); }
.switch input { width: 15px; height: 15px; accent-color: var(--c-cyan); cursor: pointer; }

.norm { position: relative; display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer; padding-top: 0.1rem; }
.norm-label-wrap { display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer; }
.norm input { width: 15px; height: 15px; accent-color: var(--c-cyan); cursor: pointer; flex: none; }
.norm .tip-check { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.55rem; padding-top: 0.55rem; border-top: 1px solid var(--border-main); cursor: pointer; color: var(--text-main); font-size: var(--fs-small); font-weight: 600; }
.filter-row .norm .norm-label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--fs-caption); font-weight: 700; color: var(--c-cyan); text-decoration: underline; text-decoration-color: var(--text-muted); text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* Unified help triggers: Normalise, What changed?, cost "?" */
.help-trigger { display: inline-flex; align-items: center; color: var(--c-cyan); font-family: 'Inter', sans-serif; font-size: var(--fs-caption); font-weight: 700; text-decoration: underline; text-decoration-color: var(--text-muted); text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: help; }
.filter-row .norm .norm-label:hover, .help-trigger:hover, .help-trigger:focus-visible { text-decoration-color: var(--c-cyan); text-decoration-thickness: 2px; }
.norm img { height: 18px; width: auto; display: block; }
.tip {
  position: absolute; bottom: calc(100% + 10px); right: 0; z-index: 200;
  width: min(340px, 84vw); padding: 0.85rem 1rem;
  background: var(--tip-bg); border: 1px solid var(--c-cyan); border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
  font-family: 'Inter', sans-serif; font-size: var(--fs-small); line-height: 1.5; color: var(--text-main);
  visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 0.15s ease;
}
.tip .tip-line { display: block; }
.tip .tip-line + .tip-line { margin-top: 0.15rem; }
.norm:hover .tip, .norm:focus-within .tip { visibility: visible; opacity: 1; pointer-events: auto; }
.tip .h { color: var(--c-cyan); font-weight: 800; margin-bottom: 0.35rem; }
.tip .note { color: var(--c-yellow); font-weight: 700; margin-top: 0.4rem; }
/* Normalise opens downward so it can't slide under the sticky navbar */
.norm .tip { top: calc(100% + 10px); bottom: auto; right: 0; left: auto; }

/* The preset popover only needs positioning — its surface comes from `.tip`. */
.preset-tip {
  top: calc(100% + 10px); bottom: auto; left: 0; right: auto;
  width: min(360px, 84vw);
  z-index: 300;
}

details.why { position: relative; display: inline-flex; align-items: center; align-self: center; }
details.why > summary { display: inline-flex; align-items: center; cursor: pointer; list-style: none; color: var(--c-cyan); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
details.why > summary::-webkit-details-marker { display: none; }
details.why .why-body {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 200;
  width: min(520px, 82vw); padding: 0.85rem 1rem;
  background: var(--tip-bg); border: 1px solid var(--border-accent); border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
  color: var(--text-muted); font-size: var(--fs-caption); line-height: 1.5;
}

/* ==========================================================================
   Run card affordances
   ========================================================================== */
.site-chart-card.is-expandable { cursor: pointer; }
.site-chart-card.is-expandable:focus-visible { outline: none; border-color: var(--c-cyan); box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.45); }
/* Hover border only where hover is actually available (avoids a stuck border on touch) */
@media (hover: hover) and (pointer: fine) {
  .site-chart-card.is-expandable:hover { border-color: var(--card-hover-color, var(--border-accent)); }
}
.card-chev {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  background: none; border: 1px solid transparent; border-radius: 6px;
  color: var(--text-dim); cursor: pointer;
}
.card-chev:hover { color: var(--c-cyan); border-color: var(--border-main); }
.card-chev svg { width: 15px; height: 15px; transition: transform 0.15s ease; }
.card-chev[aria-expanded="true"] svg { transform: rotate(180deg); }
.share-btn { height: 24px; padding: 0 0.6rem; font-size: var(--fs-micro); letter-spacing: 0.4px; }

/* Status tags — one component for bangboo level / beta / needs-improvement / downscaled */
.status-tag {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: 'Inter', sans-serif; font-size: 0.78rem; font-weight: 700; line-height: 1;
  border-radius: 6px; padding: 0.32rem 0.6rem;
  border: 1px solid var(--border-main); background: var(--bg-subcard); color: var(--text-muted);
  white-space: nowrap;
}
.status-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.status-tag.is-good { color: var(--c-green); border-color: color-mix(in srgb, var(--c-green) 45%, transparent); background: color-mix(in srgb, var(--c-green) 12%, transparent); }
.status-tag.is-warn { color: var(--c-yellow); border-color: color-mix(in srgb, var(--c-yellow) 45%, transparent); background: color-mix(in srgb, var(--c-yellow) 12%, transparent); }
.status-tag.is-danger { color: var(--c-red); border-color: color-mix(in srgb, var(--c-red) 45%, transparent); background: color-mix(in srgb, var(--c-red) 12%, transparent); }
.status-tag.is-info { color: var(--c-cyan); border-color: color-mix(in srgb, var(--c-cyan) 45%, transparent); background: color-mix(in srgb, var(--c-cyan) 12%, transparent); }
/* "Old" = sepia + dashed outline + hollow dot; "New" = teal, solid */
.status-tag.is-old { color: var(--c-sepia); border-style: dashed; border-color: color-mix(in srgb, var(--c-sepia) 55%, transparent); background: color-mix(in srgb, var(--c-sepia) 10%, transparent); }
.status-tag.is-old .dot { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.status-tag.is-new { color: var(--c-teal); border-color: color-mix(in srgb, var(--c-teal) 45%, transparent); background: color-mix(in srgb, var(--c-teal) 12%, transparent); }
.status-tag.is-new .dot { background: currentColor; }
/* The agent overview's beta-run fallback: tag beside the hero stats and the
   Best runs title, with a muted line explaining why the page is beta data. */
.wiki-beta-runs-tag { align-self: center; }
.site-chart-title .wiki-beta-runs-tag { margin-left: 0.5rem; vertical-align: middle; }
.wiki-beta-runs-note { margin: -0.6rem 0 0.9rem; color: var(--text-muted); font-size: 0.72rem; }
.new-chip { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 800; letter-spacing: 0.5px; color: #0D1117; background: var(--c-green); border-radius: 4px; padding: 0.1rem 0.4rem; }
[data-theme="light"] .new-chip { color: #FFFFFF; }
.help { position: relative; display: inline-grid; }
.help-dot { width: 15px; height: 15px; padding: 0; border-radius: 50%; border: 1px solid var(--border-main); background: var(--bg-card); color: var(--text-muted); display: inline-grid; place-items: center; font-size: 0.58rem; font-weight: 800; cursor: help; line-height: 1; }
.help-dot:hover, .help-dot:focus-visible { color: var(--c-cyan); border-color: var(--c-cyan); }
.help .tip { bottom: auto; top: calc(100% + 10px); left: 0; right: auto; }
.help:hover .tip, .help:focus-within .tip { visibility: visible; opacity: 1; }

/* ==========================================================================
   Damage log — sticky header, sortable
   ========================================================================== */
.damage-log-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.6rem; }
.damage-log-cap .t { font-weight: 800; font-size: var(--fs-lead); }

/* Hit-level parse tray: the header is the toggle, the rows load on first open */
.parse-tray .damage-log-cap { align-items: center; }
.parse-tray-heading { display: inline-flex; align-items: center; gap: 0.45rem; }
.parse-tray-toggle { display: inline-flex; align-items: center; gap: 0.45rem; background: none; border: none; padding: 0; margin: 0; color: inherit; font: inherit; cursor: pointer; }
.parse-tray-toggle:hover .t { color: var(--c-cyan); }
.parse-tray-arrow { font-size: 1.05rem; line-height: 1; color: var(--c-cyan); }
.parse-tray-body { margin-top: 0.25rem; }
table.custom-table th.sortable { cursor: pointer; user-select: none; color: var(--c-cyan); }
table.custom-table th.sortable .arw { opacity: 0.55; }
table.custom-table th.sortable[aria-sort] .arw { opacity: 1; }
.custom-table thead th { position: sticky; top: 0; z-index: 1; }

/* ==========================================================================
   States
   ========================================================================== */
.state-skel { background: var(--bg-card); border: 1px solid var(--border-main); border-radius: 8px; padding: 1rem; margin-bottom: 1.25rem; }
.state-skel .top { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 0.85rem; }
.state-skel .block { background: var(--bg-subcard); border-radius: 5px; }
.state-skel .av { width: 44px; height: 44px; border-radius: 50%; }
.state-skel .l1 { width: 40%; height: 12px; }
.state-skel .l2 { width: 24%; height: 10px; margin-top: 0.45rem; }
.state-skel .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; }
.state-skel .c3 { height: 92px; }
.state-box { background: var(--bg-card); border: 1px dashed var(--border-main); border-radius: 8px; padding: 2.5rem 1.5rem; text-align: center; margin-bottom: 1.25rem; }
.state-box h3 { font-size: var(--fs-lead); margin-bottom: 0.4rem; }
.state-box p { color: var(--text-muted); font-size: var(--fs-caption); margin-bottom: 1.1rem; }
.state-box .row { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }
.state-box.is-error .ico { width: 42px; height: 42px; margin: 0 auto 0.7rem; border-radius: 50%; background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.5); display: grid; place-items: center; color: var(--c-red); }
.state-box.is-empty h3 { color: var(--c-orange); }

/* ==========================================================================
   Floating search + shortcuts + toast
   ========================================================================== */
.floating-search {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 95;
  /* Sit above the home indicator on phones that have one. */
  bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 0.6rem;
  width: min(680px, calc(100% - 1.5rem)); padding: 0 0.85rem; height: 48px;
  background: color-mix(in srgb, var(--bg-nav) 97%, transparent);
  border: 1px solid var(--border-main); border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); backdrop-filter: blur(8px);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.24s ease;
  will-change: transform;
}
/* Slides off the page on scroll-down, slides back on scroll-up / shortcut */
.floating-search.is-hidden { transform: translateX(-50%) translateY(190%); opacity: 0; pointer-events: none; }
/* Only shown on the leaderboard view */
.floating-search.is-route-hidden { display: none; }
.floating-search:focus-within { border-color: var(--c-cyan); box-shadow: 0 12px 40px rgba(0,0,0,.45), 0 0 0 2px rgba(56,189,248,.35); }
.floating-search > svg { width: 17px; height: 17px; color: var(--text-muted); flex: none; }
.floating-search input { flex: 1; background: none; border: none; color: var(--text-main); font: inherit; font-size: var(--fs-body); min-width: 0; outline: none; }
.floating-search kbd { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-micro); color: var(--text-muted); border: 1px solid var(--border-main); border-radius: 4px; padding: 0.05rem 0.38rem; flex: none; }
.floating-search .fs-count { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-small); color: var(--text-muted); flex: none; }
.floating-search .fs-count b { color: var(--c-cyan); }
.fs-help { width: 26px; height: 26px; flex: none; border-radius: 6px; border: 1px solid var(--border-main); background: var(--bg-card); color: var(--text-muted); cursor: pointer; font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: var(--fs-small); }
.fs-help:hover { color: var(--c-cyan); border-color: var(--c-cyan); }

.overlay { position: fixed; inset: 0; z-index: 1200; display: none; align-items: center; justify-content: center; padding: 1rem; background: rgba(13, 17, 23, 0.9); }
.overlay.is-open { display: flex; }
.sc-panel { width: min(460px, 100%); max-height: 90vh; overflow: auto; background: var(--bg-card); border: 1px solid var(--border-main); border-radius: 10px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); }
.sc-subhead { margin-top: 0.35rem; padding: 0.75rem 1rem 0.4rem; border-top: 1px solid var(--border-main); font-family: 'JetBrains Mono', monospace; font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-dim); }
.sc-row--syntax { gap: 0.75rem; }
.sc-row--syntax kbd { max-width: 64%; white-space: normal; text-align: right; }
.sc-head { display: flex; justify-content: space-between; align-items: center; padding: 0.85rem 1rem; border-bottom: 1px solid var(--border-main); font-weight: 800; font-size: var(--fs-body); }
.sc-head button { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1.05rem; }
.sc-head button:hover { color: var(--text-main); }
.sc-row { display: flex; justify-content: space-between; align-items: center; padding: 0.65rem 1rem; border-bottom: 1px solid var(--border-main); font-size: var(--fs-caption); color: var(--text-muted); }
.sc-row:last-child { border-bottom: none; }
kbd { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-micro); color: var(--text-main); background: var(--bg-nav); border: 1px solid var(--border-main); border-bottom-width: 2px; border-radius: 5px; padding: 0.1rem 0.4rem; }

.toast {
  position: fixed; left: 50%; bottom: 4.6rem; z-index: 1300; transform: translateX(-50%) translateY(10px);
  opacity: 0; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease;
  display: inline-flex; align-items: center; gap: 0.5rem; background: var(--bg-card);
  border: 1px solid var(--c-green); border-radius: 8px; padding: 0.6rem 0.95rem;
  font-size: var(--fs-caption); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.toast.is-open { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast svg { width: 16px; height: 16px; color: var(--c-green); }

/* Discord logo: black in dark mode, white in light mode */
.discord-fab { color: #000; }
.discord-fab svg { width: 1.7rem; height: 1.7rem; display: block; }
[data-theme="light"] .discord-fab { color: #fff; }

/* ==========================================================================
   Submit dialog — single dropzone with browse
   ========================================================================== */
.dropzone { position: relative; }
.dropzone .dropzone-browse { display: block; margin-top: 0.5rem; color: var(--c-cyan); font-size: var(--fs-caption); font-weight: 700; text-decoration: underline; cursor: pointer; }
.dropzone.is-dragover { border-color: var(--c-cyan); background: var(--bg-subcard); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .invest-grid { grid-template-columns: 1fr 1fr; }
  .agents-grid { grid-template-columns: 1fr; }
  .nav-page-title { font-size: var(--fs-caption); }
}
@media (max-width: 760px) {
  /* Submit Run is desktop-only — a run can't practically be submitted from a phone */
  #open-upload-btn, .btn-upload { display: none !important; }
  .filter-head .title, .filter-head .clear { display: none; }
  .filter-toggle { display: flex; }
  .filter-toggle .filter-toggle-arrow { font-size: 1.6rem; }
  .filter-rows.is-collapsed { display: none; }
  .filter-row { grid-template-columns: 1fr; }
  .filter-row .rlabel { padding-top: 0; margin-bottom: 0.1rem; }
  .invest-grid { grid-template-columns: 1fr; }
  /* Fit the four preset options on a phone without widening the panel */
  .filter-controls.preset-row .seg-sm button { padding: 0.3rem 0.35rem; font-size: var(--fs-micro); }
  .page-lede { font-size: var(--fs-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hide-mobile { display: none; }
  .state-skel .cards { grid-template-columns: 1fr; }
  .discord-fab { width: 2.9rem; height: 2.9rem; bottom: 4.6rem; }

  /* Mobile-first: no accidental horizontal widening from popovers */
  body { overflow-x: clip; }
  .tip, .why-body { max-width: calc(100vw - 24px); }

  /* Prevent iOS focus zoom (inputs must be >= 16px) */
  input, select, textarea,
  .form-control, .agent-multi-select, .ctl-select,
  #run-search-input, .search input { font-size: 16px; }

  /* Popovers open centred on mobile so they can't run off the edge */
  .tip, .why-body, .norm .tip, .help .tip {
    position: fixed; left: 50%; right: auto; top: 50%; bottom: auto;
    transform: translate(-50%, -50%);
    width: min(92vw, 420px); max-width: 92vw; max-height: 72vh; overflow: auto;
    z-index: 1500;
  }

  /* Free up room in the results bar for the sort switcher */
  .results-head .fresh { display: none; }

  /* Hide the floating search while a modal/overlay is open so it can't cover popups */
  body:has(.modal-overlay.active) .floating-search,
  body:has(.overlay.is-open) .floating-search { display: none; }

  /* Hide while a run is expanded so it can't cover the sticky breakdown actions */
  body.run-expanded .floating-search { display: none; }
}
@media (min-width: 761px) { .filter-rows { display: block !important; } }

@media (prefers-reduced-motion: reduce) {
  .toast, .card-chev svg, .floating-search { transition: none !important; }
}

/* ---------- View transitions (tab / route changes) ---------- */
:root {
  /* Motion tokens. `--ease-out` is the base UI curve; `--ease-in-out` is for
     on-screen movement (FLIP / chart point travel); `--ease-pop` is the snappy
     ease-out the modal spec calls for. Durations stay in the 120-350ms band. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-pop: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 260ms;
  --dur-view: 240ms;
  --view-rise: 8px;
}

#app-content { view-transition-name: app-content; }

/* Only the content swaps; keep the chrome (navbar, fab, search) still. */
::view-transition-old(root),
::view-transition-new(root) { animation: none; }

::view-transition-old(app-content) {
  animation: vt-content-out var(--dur-view) var(--ease-out) both;
}
::view-transition-new(app-content) {
  animation: vt-content-in var(--dur-view) var(--ease-out) both;
}

@keyframes vt-content-out {
  to { opacity: 0; transform: translateY(calc(var(--view-rise) * -0.5)); }
}
@keyframes vt-content-in {
  from { opacity: 0; transform: translateY(var(--view-rise)); }
}
@keyframes vt-fade {
  from { opacity: 0; }
}

/* Fallback entrance for browsers without the View Transitions API */
#app-content.view-enter {
  animation: vt-content-in var(--dur-view) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(app-content),
  ::view-transition-new(app-content) {
    animation: vt-fade var(--dur-view) ease both;
  }
  #app-content.view-enter {
    animation: vt-fade var(--dur-view) ease;
  }
}

/* ---------- Action feedback: green tick on the triggering button ---------- */
/* !important beats the inline colour these buttons carry. */
.site-btn.is-done {
  color: var(--c-green) !important;
  border-color: var(--c-green) !important;
  background-color: rgba(34, 197, 94, 0.14) !important;
  gap: 0.4rem;
}
.btn-tick { width: 16px; height: 16px; flex-shrink: 0; }
.site-btn.is-done .btn-tick path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: btn-tick-draw 0.32s cubic-bezier(0.23, 1, 0.32, 1) 0.05s forwards;
}
@keyframes btn-tick-draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .site-btn.is-done .btn-tick path { animation: none; stroke-dashoffset: 0; }
}

/* While a breakdown panel animates open/closed, keep its action bar in normal
   flow — otherwise the sticky/blurred bar re-pins and stutters the transition. */
.card-breakdown-detail.is-animating .site-breakdown-actions {
  position: static;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* The animated panel itself carries no padding/border/margin, so it can shrink
   to a true zero and leave no "notch"; the spacing lives on the inner wrapper
   (flow-root keeps the inner margin from collapsing out of the panel). */
.card-breakdown-detail {
  display: flow-root;
}
.card-breakdown-inner {
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-main);
  margin-top: 1rem;
}

/* ---------- Long-running action feedback ---------- */
/* Full-screen overlay above the modals: loader while working, tick when done. */
.process-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Near-opaque scrim so the modal's own action button behind it is not a
     competing status indicator. */
  background-color: rgba(13, 17, 23, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.process-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.process-overlay-card {
  width: min(420px, 86vw);
  padding: 2.5rem 2rem;
  border-radius: 14px;
  background-color: var(--bg-nav);
  border: 1px solid var(--border-main);
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  /* Height is driven from JS between states; ease it instead of snapping. */
  transition: height 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.process-overlay-media {
  width: 150px;
  max-width: 55%;
  margin: 0 auto 1.1rem;
}
.process-overlay-media.is-out {
  animation: process-media-out 0.17s ease-in forwards;
}
.process-overlay-media.is-in {
  animation: process-media-in 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes process-media-out {
  to { opacity: 0; transform: scale(0.82); }
}
@keyframes process-media-in {
  0% { opacity: 0; transform: scale(0.55); }
  62% { opacity: 1; transform: scale(1.07); }
  100% { opacity: 1; transform: scale(1); }
}
.process-overlay-title {
  color: var(--text-main);
  font-weight: 800;
  font-size: 1.2rem;
  margin: 0 0 0.4rem;
}
.process-overlay-message {
  color: var(--text-muted);
  font-size: 0.88rem;
  margin: 0 0 1.4rem;
}
.process-overlay-bar {
  position: relative;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: rgba(128, 138, 152, 0.2);
  overflow: hidden;
}
/* Width is driven from JS (ramp to ~90%, then snap to 100% on success). */
.process-overlay-bar span {
  position: absolute;
  left: 0;
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: var(--c-cyan);
}
.process-overlay.is-success .process-overlay-bar span {
  background: var(--c-green);
}
.process-tick {
  width: 96px;
  height: 96px;
  color: var(--c-green);
  margin: 0 auto;
}
/* Draw the circle, then the check, so completion reads as deliberate. */
.process-tick .process-tick-ring,
.process-tick .process-tick-check {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.process-tick .process-tick-ring {
  animation: btn-tick-draw 0.5s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.process-tick .process-tick-check {
  animation: btn-tick-draw 0.35s cubic-bezier(0.23, 1, 0.32, 1) 0.42s forwards;
}
.process-overlay.is-success .process-overlay-title {
  color: var(--c-green);
}

/* Green border + a centred drawn tick on a card being approved. */
.site-chart-card.is-approved {
  position: relative;
  border-color: var(--c-green) !important;
  box-shadow: 0 0 0 1px var(--c-green), 0 0 26px rgba(34, 197, 94, 0.35);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.card-approve-tick {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: rgba(13, 17, 23, 0.35);
  border-radius: inherit;
  animation: card-tick-in 0.25s ease 0.12s both;
}
@keyframes card-tick-in { from { opacity: 0; } to { opacity: 1; } }
.card-approve-tick svg {
  width: 84px;
  height: 84px;
  color: var(--c-green);
  filter: drop-shadow(0 4px 14px rgba(34, 197, 94, 0.5));
}
.card-approve-tick svg path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: btn-tick-draw 0.42s cubic-bezier(0.23, 1, 0.32, 1) 0.06s forwards;
}

@media (prefers-reduced-motion: reduce) {
  .process-overlay,
  .process-overlay-card,
  .site-chart-card.is-approved {
    transition: none;
  }
  .process-overlay-media.is-out,
  .process-overlay-media.is-in,
  .process-tick .process-tick-ring,
  .process-tick .process-tick-check,
  .card-approve-tick,
  .card-approve-tick svg path {
    animation: none;
    stroke-dashoffset: 0;
    opacity: 1;
    transform: none;
  }
}

/* ---------- Unhandled error banner ---------- */
.error-banner {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translate(-50%, 130%);
  z-index: 2100;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: min(560px, 92vw);
  padding: 0.8rem 0.9rem 0.8rem 1rem;
  border-radius: 10px;
  background-color: var(--bg-nav);
  border: 1px solid var(--c-red, #ef4444);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  color: var(--text-main);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.error-banner.active {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}
.error-banner-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--c-red, #ef4444);
}
.error-banner-text {
  flex: 1;
  font-size: 0.9rem;
  line-height: 1.35;
}
.error-banner-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
}
.error-banner-close:hover {
  color: var(--text-main);
  background: rgba(128, 138, 152, 0.15);
}
@media (prefers-reduced-motion: reduce) {
  .error-banner {
    transition: none;
  }
}

/* ==========================================================================
   Motion primitives — tactile feedback, intent, and state transitions
   Shared durations/easings live in the :root token block above.
   ========================================================================== */

/* ---------- C. Tooltips / popovers: 100ms intent buffer, instant exit ------- */
/* The base `.tip` carries the exit transition (0ms delay => unhover is
   instantaneous). The hover state delays the enter by 100ms so a fast cursor
   sweep across a grid never flashes a tooltip. */
.tip {
  pointer-events: none;
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    visibility 0s linear 0s;
  transition-delay: 0s;
}

.norm:hover .tip,
.norm:focus-within .tip,
.help:hover .tip,
.help:focus-within .tip,
.preset-wrap:has(button[data-preset="m0r0"]:hover) .preset-tip[data-tip="m0r0"],
.preset-wrap:has(button[data-preset="norm"]:hover) .preset-tip[data-tip="norm"],
.preset-wrap:has(button[data-preset="m1norm"]:hover) .preset-tip[data-tip="m1norm"] {
  visibility: visible;
  opacity: 1;
  pointer-events: none;
  transition-delay: 100ms;
}

/* Directional origin: tips that open up scale from their bottom edge; tips that
   open down (normalise, help dots, presets, TC) scale from their top edge. */
@media (min-width: 761px) {
  .tip { transform: scale(0.95); transform-origin: bottom center; }
  .norm .tip,
  .help .tip,
  .preset-tip { transform-origin: top center; }
  .norm:hover .tip,
  .norm:focus-within .tip,
  .help:hover .tip,
  .help:focus-within .tip,
  .preset-wrap:has(button[data-preset="m0r0"]:hover) .preset-tip[data-tip="m0r0"],
  .preset-wrap:has(button[data-preset="norm"]:hover) .preset-tip[data-tip="norm"],
  .preset-wrap:has(button[data-preset="m1norm"]:hover) .preset-tip[data-tip="m1norm"] {
    transform: scale(1);
  }
}

.tc-tooltip-box {
  transform: scale(0.95);
  transform-origin: top right;
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    visibility 0s linear 0s;
  transition-delay: 0s;
}
.tc-tooltip-wrapper:hover .tc-tooltip-box,
.tc-tooltip-box:hover {
  transform: scale(1);
  transition-delay: 100ms;
}

/* ---------- D. Buttons, chips, tags: tactile press + hover lift ----------- */
.site-btn {
  transition:
    transform 80ms var(--ease-out),
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease,
    opacity 150ms ease;
}
.site-btn:active { transform: scale(0.97); }

.chip {
  transition:
    transform 80ms var(--ease-out),
    background-color 150ms ease,
    border-color 150ms ease;
}
.chip:active { transform: scale(0.96); }

.agent-tag {
  transition:
    transform 80ms var(--ease-out),
    opacity 150ms ease;
}
.agent-tag:active { transform: scale(0.96); }

.seg-sm button {
  transition:
    transform 80ms var(--ease-out),
    color 150ms ease,
    background-color 150ms ease;
}
.seg-sm button:active { transform: scale(0.96); }

.help-dot:active,
.card-chev:active,
.fs-help:active { transform: scale(0.94); }

/* Hover elevation only where a real hover exists (touch fires false hovers) */
@media (hover: hover) and (pointer: fine) {
  .site-btn:hover { transform: translateY(-1px); }
  .chip:hover { transform: translateY(-1px); }
  .site-chart-card.is-expandable { transition: transform 160ms var(--ease-out), border-color 160ms ease, box-shadow 160ms ease; }
  .site-chart-card.is-expandable:hover { transform: translateY(-1px); }
  /* A held press must beat the hover lift. */
  .site-btn:active:hover { transform: scale(0.97); }
  .chip:active:hover { transform: scale(0.96); }
}

/* ---------- D. Sliding segmented-control pill ------------------------------ */
.seg-sm.seg-animated { position: relative; }
.seg-sm.seg-animated button { position: relative; z-index: 1; }
/* The 1px gaps between segments are drawn in the group's own background (one
   gradient per gap, positioned from JS), not as per-button borders — a button
   border paints above the sliding pill and drew a dark line straight across it
   mid-slide. From the background layer the pill paints cleanly over them. */
.seg-sm.seg-animated.is-pill-ready {
  background-image:
    linear-gradient(var(--border-main), var(--border-main)),
    linear-gradient(var(--border-main), var(--border-main)),
    linear-gradient(var(--border-main), var(--border-main));
  background-repeat: no-repeat;
  background-size: 1px 100%, 1px 100%, 1px 100%;
  background-position:
    var(--seg-div-1, -99px) 0,
    var(--seg-div-2, -99px) 0,
    var(--seg-div-3, -99px) 0;
}
.seg-sm.seg-animated.is-pill-ready button + button { border-left-color: transparent; }
/* The active button becomes a transparent window onto the sliding pill — but
   only once the pill has real geometry (`.is-pill-ready`). While the row is
   hidden (collapsed mobile tray) the plain active styling stays legible. */
.seg-sm.seg-animated.is-pill-ready button[aria-pressed="true"],
[data-theme="light"] .seg-sm.seg-animated.is-pill-ready button[aria-pressed="true"],
.seg-sm.seg-animated.is-pill-ready button[aria-pressed="true"].is-modified,
[data-theme="light"] .seg-sm.seg-animated.is-pill-ready button[aria-pressed="true"].is-modified {
  background: transparent;
  color: #0D1117;
}
.seg-sm.seg-animated .seg-pill {
  position: absolute;
  top: 1px;
  left: 0;
  z-index: 0;
  height: calc(100% - 2px);
  border-radius: 5px;
  background: var(--c-cyan);
  pointer-events: none;
  transition:
    transform var(--dur-slow) var(--ease-out),
    width var(--dur-slow) var(--ease-out),
    background-color 200ms ease;
  will-change: transform, width;
}
.seg-sm.seg-animated .seg-pill.is-modified { background: var(--c-yellow); }
[data-theme="light"] .seg-sm.seg-animated .seg-pill { background-color: #38BDF8; }

/* The Buff-Modelling mode switcher reuses the sliding segmented pill. */
.da-mode-toggle.seg-sm {
  padding: 0;
  gap: 0;
  border-radius: 999px;
  background: var(--bg-main);
  margin: 0.5rem 0 0.25rem;
}
.da-mode-toggle .da-mode-btn {
  font-family: inherit;
  font-size: 0.82rem;
  padding: 0.4rem 1rem;
}
.da-mode-toggle.seg-sm .seg-pill { border-radius: 999px; }

/* ---------- E. Skeleton shimmer + resolution cross-dissolve ---------------- */
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .state-skel .block,
  .lb-skel-card .skel-shape {
    background-image: linear-gradient(
      100deg,
      var(--bg-subcard) 30%,
      color-mix(in srgb, var(--bg-hover) 75%, var(--bg-subcard)) 50%,
      var(--bg-subcard) 70%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.6s ease-in-out infinite;
  }
}

/* Leaderboard card skeletons — same footprint as a real card so the swap to
   content doesn't shift the page. Shown only when a load is slow. */
.lb-skel-card {
  background: var(--bg-card);
  border: 1px solid var(--border-main);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1.25rem;
  pointer-events: none;
}
.lb-skel-card .lb-skel-head { display: flex; gap: 0.75rem; align-items: center; }
.lb-skel-card .skel-shape { background: var(--bg-subcard); border-radius: 5px; }
.lb-skel-card .lb-skel-av { width: 44px; height: 44px; border-radius: 50%; flex: none; }
.lb-skel-card .lb-skel-lines { flex: 1; min-width: 0; }
.lb-skel-card .lb-skel-line { height: 12px; }
.lb-skel-card .lb-skel-line.w1 { width: 42%; }
.lb-skel-card .lb-skel-line.w2 { width: 26%; height: 10px; margin-top: 0.5rem; }
.lb-skel-card .lb-skel-art { height: 96px; margin-top: 0.9rem; }
/* Leaderboard boot placeholder: invisible for LOADING_FLASH_MS, so a fast load
   paints nothing before the cards. */
@keyframes lb-boot-in { to { opacity: 1; } }
.lb-boot-skel { opacity: 0; animation: lb-boot-in 160ms var(--ease-out) 220ms forwards; }

@keyframes state-resolve { from { opacity: 0.35; } to { opacity: 1; } }
#leaderboard-cards-container.is-resolving > * {
  animation: state-resolve 180ms var(--ease-out) both;
}

/* A re-computed value (the run count) fades rather than hard-cutting. The
   results bar is rebuilt on every filter, so the animation replays with it. */
@keyframes value-crossfade { from { opacity: 0.4; } to { opacity: 1; } }
.results-head .rh-count b { animation: value-crossfade 120ms var(--ease-out) both; }
/* In-place value updates re-add this class to replay the fade. */
.value-pulse { animation: value-crossfade 120ms var(--ease-out); }

/* ---------- Content-panel reveals (parse tray) ---------------------------- */
/* The tray body's height/opacity is animated in JS; the arrow rotates off the
   toggle's aria-expanded state so it needs no glyph swap. */
.parse-tray-arrow {
  display: inline-block;
  transition: transform 160ms var(--ease-out);
}
.parse-tray-toggle[aria-expanded="true"] .parse-tray-arrow { transform: rotate(90deg); }

/* ---------- Reduced motion: keep comprehension, drop movement ------------- */
@media (prefers-reduced-motion: reduce) {
  .tip,
  .tc-tooltip-box {
    transition: opacity var(--dur-fast) ease;
    transition-delay: 0s;
  }
  .site-btn,
  .chip,
  .agent-tag,
  .seg-sm button { transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease; }
  .site-btn:hover,
  .chip:hover,
  .site-chart-card.is-expandable:hover,
  .site-btn:active,
  .chip:active,
  .agent-tag:active,
  .seg-sm button:active,
  .help-dot:active,
  .card-chev:active,
  .fs-help:active { transform: none; }
  .state-skel .block,
  .lb-skel-card .skel-shape { animation: none; }
  .is-resolving > * { animation: none; }
  .results-head .rh-count b,
  .value-pulse { animation: none; }
  .parse-tray-arrow { transition: none; }
  .seg-sm.seg-animated .seg-pill { transition: background-color 200ms ease; }
  .modal-card { transform: none !important; }
}

/* ==========================================================================
   Agent wiki (/wiki/agents) — portrait gallery
   Mirrors the JSM.GG character index: a search box plus element/specialty icon
   filters over a responsive portrait grid. Each tile reuses the leaderboard's
   per-element gradient as its backdrop (--wiki-accent is the element colour).
   ========================================================================== */

.wiki-page {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  padding-bottom: 3rem;
}

.wiki-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.wiki-head h2 {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-main);
}
.wiki-head .wiki-count {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--text-muted);
}

/* --- Toolbar: search + filter groups -------------------------------------- */
.wiki-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.wiki-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 220px;
  min-width: 190px;
  max-width: 340px;
  height: 38px;
  padding: 0 0.7rem;
  background-color: var(--bg-card);
  border: 1px solid var(--border-main);
  border-radius: 10px;
  transition: border-color 150ms var(--ease-out);
}
.wiki-search:focus-within { border-color: var(--border-accent); }
.wiki-search svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--text-muted); }
.wiki-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-main);
  font-family: inherit;
  font-size: 0.9rem;
}
.wiki-search input::placeholder { color: var(--text-dim); }
.wiki-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.wiki-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

/* Pushed to the far right of the toolbar. Inter (not the mono .site-btn face)
   so the label matches the surrounding UI copy. */
.wiki-clear {
  margin-left: auto;
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.wiki-empty .site-btn {
  font-family: 'Inter', sans-serif;
  letter-spacing: 0;
  text-transform: none;
}

.wiki-fgroup {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  padding: 0.22rem;
  background-color: var(--bg-card);
  border: 1px solid var(--border-main);
  border-radius: 10px;
}

.wiki-fbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  transition: background-color 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}
.wiki-fbtn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.5;
  filter: grayscale(0.4);
  transition: opacity 140ms var(--ease-out), filter 140ms var(--ease-out);
}
.wiki-fbtn:hover { background-color: var(--bg-hover); }
.wiki-fbtn:hover img { opacity: 0.85; filter: none; }
.wiki-fbtn.is-active {
  background-color: var(--bg-hover);
  box-shadow: inset 0 0 0 1.5px var(--wiki-accent, var(--c-cyan));
}
.wiki-fbtn.is-active img { opacity: 1; filter: none; }
.wiki-fbtn:focus-visible { outline: 2px solid var(--border-accent); outline-offset: 2px; }

/* View toggle: a labelled switch, because an icon button did not say what it did. */
.wiki-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.25rem 0.5rem 0.25rem 0.75rem;
  border: 1px solid var(--border-main);
  border-radius: 999px;
  background-color: var(--bg-card);
  color: var(--text-muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 140ms var(--ease-out), color 140ms var(--ease-out);
}
.wiki-switch:hover { border-color: var(--border-accent); color: var(--text-main); }
.wiki-switch.is-on { color: var(--text-main); }
.wiki-switch:focus-visible { outline: 2px solid var(--border-accent); outline-offset: 2px; }
.wiki-switch-track {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background-color: var(--bg-subcard);
  box-shadow: inset 0 0 0 1px var(--border-main);
  transition: background-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.wiki-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--text-muted);
  transition: transform 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.wiki-switch.is-on .wiki-switch-track {
  background-color: rgba(56, 189, 248, 0.22);
  box-shadow: inset 0 0 0 1px var(--c-cyan);
}
.wiki-switch.is-on .wiki-switch-knob {
  transform: translateX(16px);
  background-color: var(--c-cyan);
}

/* --- Portrait grid -------------------------------------------------------- */
.wiki-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: 1.25rem 1rem;
}

.wiki-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  outline: none;
}
.wiki-card[hidden] { display: none; }

.wiki-tile {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
  /* The leaderboard element gradient, mirrored about the tile's midline so the
     element colour reads on both edges rather than only the right one. */
  background-color: var(--bg-card);
  background-image: var(--wiki-grad-a), var(--wiki-grad-b), var(--char-header-base);
  background-size: 50% 100%, 50% 100%, 100% 100%;
  background-position: 100% 0, 0 0, 0 0;
  background-repeat: no-repeat;
  outline: 0 solid var(--wiki-accent, var(--c-cyan));
  outline-offset: 4px;
  transition: transform 260ms var(--ease-out), outline-width 200ms var(--ease-out), box-shadow 260ms var(--ease-out);
}
.wiki-card:hover .wiki-tile,
.wiki-card:focus-visible .wiki-tile {
  outline-width: 3px;
  transform: rotate(2deg);
  box-shadow: 0 0 34px -6px var(--wiki-accent, var(--c-cyan));
}

.wiki-tile-portrait {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform: scale(1.06) translateY(2%);
  transition: transform 260ms var(--ease-out);
  -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 68%, transparent 100%);
}
.wiki-card:hover .wiki-tile-portrait { transform: scale(1.15) translateY(2%); }

.wiki-tile-chip {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 20px;
  min-width: 20px;
  padding: 0 5px;
  border-radius: 6px;
  background: rgba(13, 17, 23, 0.55);
  font-size: 0.62rem;
  font-weight: 800;
  color: #fff;
}
.wiki-tile-chip.is-spec { left: 6px; bottom: 6px; width: 20px; padding: 0; }
.wiki-tile-chip.is-spec img { width: 14px; height: 14px; object-fit: contain; }

.wiki-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text-main);
  text-align: center;
}

.wiki-empty {
  display: none;
  padding: 3rem 1rem;
  text-align: center;
  color: var(--text-muted);
}
.wiki-empty.is-shown { display: block; }
.wiki-empty p { margin: 0 0 1rem; font-size: 0.95rem; }

/* --- Agent hub hero (/wiki/agents/<slug>) --------------------------------- */
.wiki-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding: 1.5rem;
  border: 1px solid var(--border-main);
  border-radius: 14px;
  overflow: hidden;
  background: var(--wiki-gradient, var(--char-header-base));
}
.wiki-hero-watermark {
  position: absolute;
  inset: 0;
  background-position: 88% 50%;
  background-repeat: no-repeat;
  background-size: 210px;
  opacity: 0.16;
  pointer-events: none;
}
.wiki-hero-portrait {
  position: relative;
  flex: 0 0 auto;
  width: 104px;
  height: 104px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}
.wiki-hero-meta { position: relative; flex: 1; min-width: 220px; }
.wiki-hero-meta h2 {
  margin: 0 0 0.25rem;
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
}
.wiki-hero-tags {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
  font-size: 0.85rem;
  font-weight: 600;
}
.wiki-hero-tags .wiki-hero-element { color: var(--wiki-accent, var(--c-cyan)); }
.wiki-hero-tag-ico { width: 15px; height: 15px; object-fit: contain; }
.wiki-hero-stats {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.wiki-hero-stats strong { color: #fff; }
.wiki-hero-note { margin-top: 0.5rem; font-size: 0.72rem; color: var(--text-muted); }

[data-theme="light"] .wiki-hero-meta h2,
[data-theme="light"] .wiki-hero-stats strong { color: #0D1117; }

/* --- Mindscape banner heroes ----------------------------------------------
   Agents with Mindscape "Full" art swap the compact portrait for the art as a
   full-bleed banner. The art is transparent, so it sits on the element
   gradient; the copy moves to whichever side the art leaves empty (data-pos,
   measured by scripts/build-agent-banners.py). object-fit: contain shows the
   whole artwork at desktop widths (never stretched, never cropped), and the
   mobile band switches to cover with the measured focal point. */
.wiki-hero.has-banner {
  min-height: clamp(275px, 32vw, 460px);
  padding: clamp(1.15rem, 2.2vw, 1.9rem) clamp(1.15rem, 2.4vw, 2.1rem);
  align-items: center;
  flex-wrap: nowrap;
}
.wiki-hero.has-banner .wiki-hero-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  /* The source art is cut flat at the canvas bottom; fade it into the card
     instead of showing a hard slice through the body. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 90%, transparent 100%);
}
[data-theme="light"] .wiki-hero.has-banner .wiki-hero-art {
  /* Pale characters (Rina, Velina) otherwise dissolve into the pale theme. */
  filter: drop-shadow(0 10px 26px rgba(31, 41, 55, 0.18));
}
.wiki-hero.has-banner .wiki-hero-watermark,
.wiki-hero.has-banner .wiki-hero-portrait,
.wiki-hero.has-banner .wiki-hero-fallback { display: none; }
.wiki-hero.has-banner .wiki-hero-meta {
  position: relative;
  z-index: 2;
  flex: 0 1 auto;
  max-width: min(30rem, 38%);
  padding: 0.95rem 1.15rem;
  border-radius: 12px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7), 0 0 14px rgba(0, 0, 0, 0.45);
  background: linear-gradient(90deg,
    rgba(7, 10, 15, 0.8) 0%, rgba(7, 10, 15, 0.62) 58%, rgba(7, 10, 15, 0.18) 88%, rgba(7, 10, 15, 0) 100%);
}
.wiki-hero.has-banner[data-pos^="left"] .wiki-hero-meta { margin-right: auto; }
.wiki-hero.has-banner[data-pos^="right"] .wiki-hero-meta {
  margin-left: auto;
  text-align: right;
  background: linear-gradient(270deg,
    rgba(7, 10, 15, 0.8) 0%, rgba(7, 10, 15, 0.62) 58%, rgba(7, 10, 15, 0.18) 88%, rgba(7, 10, 15, 0) 100%);
}
.wiki-hero.has-banner[data-pos^="right"] .wiki-hero-tags,
.wiki-hero.has-banner[data-pos^="right"] .wiki-hero-stats { justify-content: flex-end; }
.wiki-hero.has-banner[data-pos$="-top"] .wiki-hero-meta { align-self: flex-start; }
.wiki-hero.has-banner[data-pos$="-bottom"] .wiki-hero-meta { align-self: flex-end; }
.wiki-hero.has-banner .wiki-hero-meta h2 { font-size: clamp(1.6rem, 2.4vw, 2rem); }
[data-theme="light"] .wiki-hero.has-banner .wiki-hero-meta {
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.72) 58%, rgba(255, 255, 255, 0.26) 88%, rgba(255, 255, 255, 0) 100%);
}
[data-theme="light"] .wiki-hero.has-banner[data-pos^="right"] .wiki-hero-meta {
  background: linear-gradient(270deg,
    rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.72) 58%, rgba(255, 255, 255, 0.26) 88%, rgba(255, 255, 255, 0) 100%);
}

@media (max-width: 860px) {
  .wiki-hero.has-banner {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    min-height: 0;
    padding: 0;
    gap: 0;
  }
  .wiki-hero.has-banner .wiki-hero-art {
    position: relative;
    inset: auto;
    width: 100%;
    height: clamp(220px, 46vw, 360px);
    object-fit: cover;
    object-position: var(--banner-focus, 50% 50%);
  }
  .wiki-hero.has-banner .wiki-hero-meta,
  .wiki-hero.has-banner[data-pos^="right"] .wiki-hero-meta {
    max-width: none;
    margin: -1.6rem 0 0;
    padding: 1rem 1.05rem 1.1rem;
    align-self: stretch;
    text-align: left;
    border-radius: 14px 14px 0 0;
    background: rgba(7, 10, 15, 0.9);
  }
  .wiki-hero.has-banner[data-pos^="right"] .wiki-hero-tags,
  .wiki-hero.has-banner[data-pos^="right"] .wiki-hero-stats { justify-content: flex-start; }
  .wiki-hero.has-banner .wiki-hero-meta h2 { font-size: 1.5rem; }
  [data-theme="light"] .wiki-hero.has-banner .wiki-hero-meta,
  [data-theme="light"] .wiki-hero.has-banner[data-pos^="right"] .wiki-hero-meta {
    background: rgba(255, 255, 255, 0.92);
  }
}

/* --- Holographic detail banners -------------------------------------------
   Pointer position drives a linear rainbow sweep, a soft specular highlight
   and a subtle card tilt. The tint stays additive (screen / soft-light) so the
   banner keeps its element gradient and the copy stays legible. Norma's banner
   also spawns floating hearts at the cursor (see wikiMakeHeartEmitter). */
.wiki-hero.is-holo {
  --holo-x: 50%;
  --holo-y: 50%;
  --holo-rx: 0deg;
  --holo-ry: 0deg;
  --holo-angle: 0deg;
  --holo-scale: 1;
  transform: none;
  transform-origin: 50% 50%;
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 320ms var(--ease-out);
  will-change: transform;
}
.wiki-hero.is-holo.is-holo-active {
  --holo-scale: 1.008;
  transform: perspective(900px) rotateX(var(--holo-rx)) rotateY(var(--holo-ry)) scale(var(--holo-scale));
  transition-duration: 90ms;
  box-shadow: 0 26px 52px -34px rgba(0, 0, 0, 0.9), 0 0 30px -12px var(--wiki-accent, var(--c-cyan));
}

.wiki-hero.is-holo::before,
.wiki-hero.is-holo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 260ms var(--ease-out);
}
.wiki-hero.is-holo.is-holo-active::before,
.wiki-hero.is-holo.is-holo-active::after { opacity: 1; }

.wiki-hero.is-holo::before {
  background:
    radial-gradient(circle at var(--holo-x) var(--holo-y),
      rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.04) 28%, transparent 56%),
    linear-gradient(calc(105deg + var(--holo-angle)),
      rgba(255, 50, 150, 0) 12%,
      rgba(255, 50, 150, 0.2) 30%,
      rgba(255, 196, 64, 0.12) 42%,
      rgba(64, 255, 190, 0.18) 54%,
      rgba(64, 145, 255, 0.23) 66%,
      rgba(190, 64, 255, 0.2) 78%,
      rgba(255, 50, 150, 0.12) 90%,
      rgba(255, 50, 150, 0) 100%);
  background-size: 100% 100%, 220% 220%;
  background-position: 0 0, var(--holo-x) var(--holo-y);
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  filter: saturate(1.25);
}

.wiki-hero.is-holo::after {
  background:
    radial-gradient(ellipse 52% 150% at var(--holo-x) var(--holo-y),
      rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.06) 34%, transparent 68%),
    radial-gradient(ellipse 110% 190% at var(--holo-x) var(--holo-y),
      rgba(120, 255, 255, 0.12), rgba(255, 255, 255, 0.03) 46%, transparent 74%);
  mix-blend-mode: soft-light;
}

[data-theme="light"] .wiki-hero.is-holo::before {
  mix-blend-mode: soft-light;
  opacity: 0;
}
[data-theme="light"] .wiki-hero.is-holo.is-holo-active::before { opacity: 0.9; }

/* Keep the portrait and copy above the foil. */
.wiki-hero.is-holo .wiki-hero-watermark { z-index: 0; }
.wiki-hero.is-holo .wiki-hero-fallback,
.wiki-hero.is-holo .wiki-hero-portrait,
.wiki-hero.is-holo .wiki-hero-meta { z-index: 2; }
.wiki-hero.is-holo .wiki-hero-portrait {
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.14);
  transition: box-shadow 260ms var(--ease-out);
}
.wiki-hero.is-holo.is-holo-active .wiki-hero-portrait {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.28),
    0 0 26px -6px var(--wiki-accent, var(--c-cyan));
}
.wiki-hero.is-holo .wiki-hero-meta h2 { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); }

/* A soft scrim behind the copy keeps labels readable while the foil is lit.
   Banner heroes keep their own left/right fade, so the scrim never flips sides
   or turns into a box on hover. */
.wiki-hero.is-holo .wiki-hero-meta {
  border-radius: 10px;
  transition: background-color 220ms var(--ease-out);
}
.wiki-hero.is-holo:not(.has-banner).is-holo-active .wiki-hero-meta {
  background: radial-gradient(ellipse 82% 50% at 20% 50%,
    rgba(7, 10, 15, 0.62), rgba(7, 10, 15, 0.4) 40%, rgba(7, 10, 15, 0) 100%);
}
.wiki-hero.is-holo:not(.has-banner).is-holo-active .wiki-hero-meta h2,
.wiki-hero.is-holo:not(.has-banner).is-holo-active .wiki-hero-tags,
.wiki-hero.is-holo:not(.has-banner).is-holo-active .wiki-hero-stats {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 10px rgba(0, 0, 0, 0.35);
}
.wiki-hero.is-holo:not(.has-banner).is-holo-active .wiki-hero-stats { color: #e6edf3; }
.wiki-hero.is-holo:not(.has-banner).is-holo-active .wiki-hero-stats strong { color: #fff; }

[data-theme="light"] .wiki-hero.is-holo:not(.has-banner).is-holo-active .wiki-hero-meta {
  background: radial-gradient(ellipse 82% 50% at 20% 50%,
    rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.42) 40%, rgba(255, 255, 255, 0) 100%);
}
[data-theme="light"] .wiki-hero.is-holo:not(.has-banner).is-holo-active .wiki-hero-stats { color: #1f2937; }
[data-theme="light"] .wiki-hero.is-holo:not(.has-banner).is-holo-active .wiki-hero-stats strong { color: #0D1117; }
[data-theme="light"] .wiki-hero.is-holo:not(.has-banner).is-holo-active .wiki-hero-meta h2,
[data-theme="light"] .wiki-hero.is-holo:not(.has-banner).is-holo-active .wiki-hero-tags,
[data-theme="light"] .wiki-hero.is-holo:not(.has-banner).is-holo-active .wiki-hero-stats {
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.75);
}

/* Cursor hearts — appended to <body> as fixed-position nodes so they can
   float out of the card instead of being clipped by its overflow. */
.wiki-heart-layer {
  position: fixed;
  inset: 0;
  z-index: 90;
  overflow: visible;
  pointer-events: none;
}
.wiki-heart {
  position: fixed;
  display: block;
  line-height: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 5px rgba(255, 70, 130, 0.55)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
  animation: wiki-heart-rise var(--heart-duration, 1.2s) cubic-bezier(0.16, 0.65, 0.35, 1) forwards;
  will-change: transform, opacity;
}
.wiki-heart svg { display: block; width: 100%; height: 100%; }

@keyframes wiki-heart-rise {
  0% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(0.35) rotate(0deg); }
  12% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1) rotate(calc(var(--heart-rot, 0deg) * 0.25)); }
  68% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate3d(calc(-50% + var(--heart-dx, 0px)), calc(-50% + var(--heart-dy, -90px)), 0)
      scale(0.92) rotate(var(--heart-rot, 0deg));
  }
}

@media (prefers-reduced-motion: reduce) {
  .wiki-hero.is-holo { transform: none; }
  .wiki-hero.is-holo.is-holo-active { box-shadow: none; }
  .wiki-hero.is-holo::before,
  .wiki-hero.is-holo::after { display: none; }
  .wiki-heart { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wiki-tile,
  .wiki-tile-portrait { transition: none; }
  .wiki-card:hover .wiki-tile { transform: none; }
  .wiki-card:hover .wiki-tile-portrait { transform: scale(1.06) translateY(2%); }
}

/* ==========================================================================
   Wiki compendium — category buttons, item cards, skill / refinement panels
   Shared by the agent, W-Engine, Bangboo and Drive Disc pages.
   ========================================================================== */

/* One vertical rhythm for every card on the wiki: the hero→internal-nav gap
   is the reference, and the shared site cards must not add their own bottom
   margin on top of the flex/grid gap. */
.wiki-page { --wiki-gap: 1.15rem; gap: var(--wiki-gap); }
#wiki-agent-tab-body { gap: var(--wiki-gap); }
.wiki-page .site-chart-card,
.wiki-page .site-pie-grid,
.wiki-page .wiki-disc-bonuses { margin-bottom: 0; }
.wiki-page .site-pie-grid { gap: var(--wiki-gap); }
.wiki-page .wiki-disc-bonuses { gap: var(--wiki-gap); }
.wiki-page .wiki-grid { row-gap: var(--wiki-gap); }

.wiki-head { align-items: center; }


.wiki-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  padding: 0.25rem;
  border: 1px solid var(--border-main);
  border-radius: 12px;
  background-color: var(--bg-card);
}
.wiki-cat {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 0.85rem;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--text-muted);
  font-size: 0.84rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 150ms var(--ease-out), border-color 150ms var(--ease-out), color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}
.wiki-cat:hover {
  color: var(--text-main);
  background-color: var(--bg-subcard);
  border-color: var(--border-main);
}
.wiki-cat.is-active {
  color: #04121A;
  background-color: var(--c-cyan);
  border-color: transparent;
  box-shadow: 0 5px 16px -8px var(--c-cyan);
}
[data-theme="light"] .wiki-cat.is-active { color: #FFFFFF; }
.wiki-cat:focus-visible { outline: 2px solid var(--border-accent); outline-offset: 2px; }
.wiki-cat[hidden] { display: none !important; }

.wiki-clear[hidden] { display: none !important; }

/* Missing art still leaves a readable tile: the first letter sits behind the
   image and is revealed only when the image errors. */
.wiki-tile-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--wiki-accent, var(--text-muted));
  font-size: 2rem;
  font-weight: 900;
  opacity: 0.45;
}
.wiki-tile.is-missing .wiki-tile-fallback { display: flex; }
.wiki-tile.is-missing { background-color: var(--bg-subcard); }

/* --- Non-agent item tiles -------------------------------------------------- */
.wiki-card.is-item .wiki-tile {
  background-image: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.09), transparent 64%);
  background-size: 100% 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
}
.wiki-tile.has-dmg-bg {
  background-image: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.09), transparent 64%);
  background-size: 100% 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
}
.wiki-tile.has-dmg-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--wiki-dmg-a, var(--wiki-accent));
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
  pointer-events: none;
}
.wiki-card:hover .wiki-tile.has-dmg-bg::before,
.wiki-card:focus-visible .wiki-tile.has-dmg-bg::before { opacity: 0.34; }
.wiki-card.is-item:hover .wiki-tile,
.wiki-card.is-item:focus-visible .wiki-tile {
  transform: translateY(-3px) rotate(0deg);
  box-shadow: 0 16px 32px -20px var(--wiki-accent, var(--c-cyan));
}
.wiki-tile-item {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 11%;
  transition: transform 260ms var(--ease-out);
}
.wiki-tile-item.is-bangboo { padding: 7%; }
.wiki-tile.is-disc .wiki-tile-item { padding: 9%; }
.wiki-tile.is-disc::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(135deg, var(--wiki-disc-a, #38BDF8), var(--wiki-disc-b, #0EA5E9));
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
  pointer-events: none;
}
.wiki-card:hover .wiki-tile.is-disc::before { opacity: 0.34; }
.wiki-card:hover .wiki-tile-item { transform: scale(1.05); }

/* Drive Discs behave like records: the art spins while the card is hovered.
   W-Engines and Bangboos use the agent-style tile tilt/outline instead. */
.wiki-card:hover .wiki-tile.is-disc .wiki-tile-item {
  animation: wiki-disc-spin 1.6s linear infinite;
  transform: none;
}
.wiki-card.is-item:not(.is-disc):hover .wiki-tile,
.wiki-card.is-item:not(.is-disc):focus-visible .wiki-tile {
  outline-width: 3px;
  transform: rotate(2deg);
  box-shadow: 0 0 34px -6px var(--wiki-accent, var(--c-cyan));
}
@keyframes wiki-disc-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Holographic gallery tiles. The overlay sits above the art so the foil reads
   on portraits and W-Engine renders, while the specialty chip stays above it.
   Every wiki card uses this treatment; hearts are Norma-only. */
.wiki-card.is-holo-card .wiki-tile,
.wiki-card.is-holo-card.is-item:not(.is-disc) .wiki-tile {
  --holo-scale: 1;
  --holo-lift: 0px;
  --holo-rot: 0deg;
  transform: none;
  transform-origin: 50% 50%;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    outline-width 200ms var(--ease-out), box-shadow 260ms var(--ease-out);
  will-change: transform;
}

.wiki-card.is-holo-card .wiki-tile-holo {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms var(--ease-out);
}
.wiki-card.is-holo-card:hover .wiki-tile-holo,
.wiki-card.is-holo-card.is-holo-active .wiki-tile-holo,
.wiki-card.is-holo-card:focus-visible .wiki-tile-holo { opacity: 0.25; }

.wiki-card.is-holo-card .wiki-tile-holo::before,
.wiki-card.is-holo-card .wiki-tile-holo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.wiki-card.is-holo-card .wiki-tile-holo::before {
  background:
    linear-gradient(calc(105deg + var(--holo-angle)),
      rgba(255, 50, 150, 0) 10%,
      rgba(255, 50, 150, 0.5) 28%,
      rgba(255, 196, 64, 0.32) 41%,
      rgba(64, 255, 190, 0.42) 54%,
      rgba(64, 145, 255, 0.5) 66%,
      rgba(190, 64, 255, 0.46) 78%,
      rgba(255, 50, 150, 0.28) 90%,
      rgba(255, 50, 150, 0) 100%);
  background-size: 220% 220%;
  background-position: var(--holo-x) var(--holo-y);
  background-repeat: no-repeat;
  mix-blend-mode: soft-light;
  filter: saturate(1.1);
}
.wiki-card.is-holo-card .wiki-tile-holo::after {
  background:
    radial-gradient(ellipse 46% 62% at var(--holo-x) var(--holo-y),
      rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05) 40%, transparent 70%);
  mix-blend-mode: screen;
  opacity: 0.55;
}

.wiki-card.is-holo-card .wiki-tile-chip { z-index: 4; }
.wiki-card.is-holo-card .wiki-tile-portrait,
.wiki-card.is-holo-card .wiki-tile-item { z-index: 2; }

.wiki-card.is-holo-card:hover .wiki-tile,
.wiki-card.is-holo-card:focus-visible .wiki-tile,
.wiki-card.is-holo-card.is-item:not(.is-disc):hover .wiki-tile,
.wiki-card.is-holo-card.is-item:not(.is-disc):focus-visible .wiki-tile {
  --holo-scale: 1.025;
  --holo-lift: -3px;
  --holo-rot: 2deg;
  transform: perspective(700px) rotateX(var(--holo-rx, 0deg)) rotateY(var(--holo-ry, 0deg))
    rotate(var(--holo-rot)) translateY(var(--holo-lift)) scale(var(--holo-scale));
  outline-width: 3px;
  box-shadow: 0 16px 32px -18px var(--wiki-accent, var(--c-cyan)),
    0 0 30px -8px var(--wiki-accent, var(--c-cyan));
}

@media (prefers-reduced-motion: reduce) {
  .wiki-card.is-holo-card .wiki-tile { transform: none; }
  .wiki-card.is-holo-card .wiki-tile-holo { display: none; }
}

.wiki-tile-chip.is-spec-text {
  left: 8px;
  bottom: 8px;
  max-width: calc(100% - 16px);
  height: 18px;
  padding: 0 6px;
  border: 0;
  overflow: hidden;
  background: rgba(13, 17, 23, 0.82);
  color: var(--wiki-accent, #FFFFFF);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.wiki-tile-chip.is-spec {
  left: 8px;
  bottom: 8px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  background: rgba(13, 17, 23, 0.75);
  box-shadow: none;
}
.wiki-tile-chip.is-spec img { width: 18px; height: 18px; }

/* Two-line names keep long W-Engine / disc titles readable without ragged
   mid-word cuts; the title attribute still carries the full name. */
.wiki-name {
  display: -webkit-box;
  min-height: 2.5em;
  white-space: normal;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* --- Rich game text -------------------------------------------------------- */
.wiki-richtext {
  margin: 0;
  max-width: 80ch;
  color: var(--text-main);
  font-size: 0.86rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.wiki-kbd {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 5px;
  margin: 0 1px;
  border: 1px solid var(--border-main);
  border-radius: 4px;
  background-color: var(--bg-subcard);
  color: var(--text-main);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  font-weight: 700;
  vertical-align: baseline;
}

/* --- Skill tabs, level selector and all-levels parameter tables ----------- */
.wiki-stabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0 0 0.9rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-main);
}
.wiki-stab-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}
.wiki-stab-head .wiki-stabs {
  flex: 1 1 auto;
  margin: 0;
}
.wiki-level-select {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding-bottom: 0.5rem;
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
}
.wiki-level-select select {
  height: 32px;
  min-width: 64px;
  padding: 0 0.5rem;
  border: 1px solid var(--border-main);
  border-radius: 8px;
  background-color: var(--bg-card);
  color: var(--text-main);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
}
.wiki-stab,
.wiki-rtab {
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--border-main);
  border-radius: 8px;
  background: var(--bg-subcard);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 140ms var(--ease-out), border-color 140ms var(--ease-out), color 140ms var(--ease-out);
}
.wiki-stab:hover,
.wiki-rtab:hover { background-color: var(--bg-hover); color: var(--text-main); }
.wiki-stab.is-active,
.wiki-rtab.is-active {
  color: var(--c-cyan);
  background-color: rgba(56, 189, 248, 0.10);
  border-color: var(--c-cyan);
}
.wiki-stab:focus-visible,
.wiki-rtab:focus-visible { outline: 2px solid var(--border-accent); outline-offset: 1px; }

.wiki-skill-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.wiki-skill-toolbar label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 700;
}
.wiki-skill-toolbar select {
  height: 32px;
  min-width: 64px;
  padding: 0 0.5rem;
  border: 1px solid var(--border-main);
  border-radius: 8px;
  background-color: var(--bg-card);
  color: var(--text-main);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
}

.wiki-skill-block + .wiki-skill-block {
  margin-top: 1.15rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--border-main);
}
.wiki-skill-block h4 {
  margin: 0 0 0.45rem;
  color: var(--text-main);
  font-size: 0.95rem;
  font-weight: 800;
}
.wiki-skill-block .wiki-richtext { margin: 0.35rem 0 0.65rem; }
.wiki-tbc { margin: 0; color: var(--text-muted); font-size: 0.86rem; font-weight: 700; letter-spacing: 0.04em; }

.wiki-pt-wrap { margin: 0.5rem 0 0; }
.wiki-pt { font-size: 0.74rem; }
.wiki-pt th,
.wiki-pt td {
  padding: 0.34rem 0.55rem;
  text-align: right;
  white-space: nowrap;
}
.wiki-pt thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--bg-card);
  color: var(--text-muted);
  font-weight: 800;
  text-align: right;
}
.wiki-pt thead th:first-child { text-align: left; }
.wiki-pt tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: var(--bg-card);
  color: var(--text-main);
  font-family: 'Inter', sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
}
.wiki-pt-corner { background-color: var(--bg-card); }

/* --- Refinement panel ------------------------------------------------------ */
.wiki-refine-name {
  margin-bottom: 0.35rem;
  color: var(--text-main);
  font-size: 0.9rem;
  font-weight: 800;
}

/* --- Shared stat / rank / growth bits ------------------------------------- */
.wiki-stat-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wiki-stat-list li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.15rem;
  min-width: 0;
  padding: 0.4rem 0.55rem;
  border-radius: 8px;
  background-color: var(--bg-subcard);
  font-size: 0.82rem;
}
.wiki-stat-list span { color: var(--text-muted); }
.wiki-stat-list strong {
  color: var(--text-main);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  line-height: 1.2;
}

.wiki-rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 0.4rem;
  border-radius: 6px;
  background: rgba(13, 17, 23, 0.55);
  color: #FBBF24;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1;
}

.wiki-bonus {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.42rem;
  border: 1px solid var(--border-main);
  border-radius: 6px;
  background-color: var(--bg-subcard);
  color: var(--text-main);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}
.wiki-growth th:first-child,
.wiki-growth td:first-child { text-align: left; }
.wiki-growth th:not(:first-child),
.wiki-growth td:not(:first-child) { text-align: center; }
.wiki-growth td:last-child { text-align: left; }
.wiki-growth .wiki-bonus {
  margin: 0.1rem 0.15rem 0.1rem 0;
  white-space: normal;
}

/* --- Agent profile / core skill / mindscapes ------------------------------ */
.wiki-profile {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.55rem 0.9rem;
  margin: 0;
}
.wiki-profile > div {
  min-width: 0;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border-main);
  border-radius: 9px;
  background-color: var(--bg-subcard);
}
.wiki-profile dt {
  margin-bottom: 0.15rem;
  color: var(--text-muted);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.wiki-profile dd {
  margin: 0;
  color: var(--text-main);
  font-size: 0.86rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.wiki-core-rank { padding: 0.75rem 0; }
.wiki-core-rank + .wiki-core-rank { border-top: 1px solid var(--border-main); }
.wiki-core-rank.is-additional { padding-bottom: 0.1rem; }
.wiki-core-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem 0.6rem;
  margin-bottom: 0.35rem;
}
.wiki-core-title {
  margin: 0;
  color: var(--text-main);
  font-size: 0.9rem;
  font-weight: 800;
}
.wiki-core-gate {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.wiki-core-stats { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.wiki-core-rank .wiki-richtext { margin: 0.3rem 0; }

.wiki-mindscapes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 0.75rem;
}
@media (max-width: 1100px) {
  .wiki-mindscapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .wiki-mindscapes { grid-template-columns: 1fr; }
}
.wiki-mindscape {
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border-main);
  border-radius: 10px;
  background-color: var(--bg-subcard);
}
.wiki-mindscape-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.wiki-mindscape-head h5 {
  margin: 0;
  color: var(--text-main);
  font-size: 0.86rem;
  font-weight: 800;
}
.wiki-mindscape .wiki-richtext { margin: 0.25rem 0; font-size: 0.82rem; }
.wiki-mindscape-note { color: var(--text-muted); }

/* --- Detail hero variants -------------------------------------------------- */
.wiki-disc-bonuses {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 1rem;
}
@media (max-width: 860px) {
  .wiki-disc-bonuses { grid-template-columns: 1fr; }
}

.wiki-hero-fallback {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 104px;
  border-radius: 12px;
  background: rgba(13, 17, 23, 0.28);
  color: var(--wiki-accent, #FFFFFF);
  font-size: 2.4rem;
  font-weight: 900;
}
.wiki-hero.is-missing .wiki-hero-fallback { display: flex; }
.wiki-hero-portrait.is-contained {
  object-fit: contain;
  padding: 8px;
  background: rgba(13, 17, 23, 0.22);
}
.wiki-hero-portrait.is-bangboo {
  object-fit: contain;
  padding: 4px;
  background: transparent;
}
.wiki-hero-portrait.is-disc {
  object-fit: contain;
  padding: 3px;
  border-radius: 50%;
  background: rgba(13, 17, 23, 0.28);
}

@media (prefers-reduced-motion: reduce) {
  .wiki-cat,
  .wiki-tile-item,
  .wiki-stab,
  .wiki-rtab { transition: none; }
  .wiki-card.is-item:hover .wiki-tile { transform: none; }
  .wiki-card:hover .wiki-tile-item { transform: none; }
  .wiki-card:hover .wiki-tile.is-disc .wiki-tile-item { animation: none; }
  .wiki-card.is-item:not(.is-disc):hover .wiki-tile { transform: none; }
}

/* --- Agent detail tabs / overview / core slider --------------------------- */
.wiki-dtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--border-main);
  border-radius: 12px;
  background-color: var(--bg-card);
}
.wiki-dtab {
  height: 34px;
  padding: 0 0.9rem;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
  transition: background-color 140ms var(--ease-out), border-color 140ms var(--ease-out), color 140ms var(--ease-out);
}
.wiki-dtab:hover { color: var(--text-main); background-color: var(--bg-subcard); border-color: var(--border-main); }
.wiki-dtab.is-active {
  color: var(--c-cyan);
  background-color: rgba(56, 189, 248, 0.10);
  border-color: var(--c-cyan);
}
.wiki-dtab:focus-visible { outline: 2px solid var(--border-accent); outline-offset: 2px; }
/* SHARE (the share summary) is an action at the bar's right end, styled as a tab. */
.wiki-dtab-share { margin-left: auto; letter-spacing: 0.06em; }

#wiki-agent-tab-body {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.wiki-stat-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.wiki-level-tag {
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.wiki-stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 0.5rem;
}
.wiki-stat {
  min-width: 0;
  padding: 0.5rem 0.55rem;
  border: 1px solid var(--border-main);
  border-radius: 8px;
  background-color: var(--bg-subcard);
}
.wiki-stat span {
  display: block;
  overflow: visible;
  min-height: 2.3em;
  color: var(--text-muted);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-overflow: clip;
  text-transform: uppercase;
  white-space: normal;
}
.wiki-stat strong {
  display: block;
  margin-top: 0.15rem;
  color: var(--text-main);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.86rem;
}

.wiki-ascension-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem 0.9rem;
  color: var(--text-muted);
  font-size: 0.82rem;
}
.wiki-ascension-line strong {
  color: var(--text-main);
  font-family: 'JetBrains Mono', monospace;
}
.wiki-asc-badge {
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--border-main);
  border-radius: 6px;
  background-color: var(--bg-subcard);
  color: var(--text-main);
  font-size: 0.72rem;
  font-weight: 800;
}

.wiki-rank-control {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.wiki-rank-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 44px;
  color: var(--text-muted);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.wiki-rank-label strong {
  color: var(--text-main);
  font-family: 'JetBrains Mono', monospace;
  font-size: 1rem;
  line-height: 1.1;
}
.wiki-rank-slider {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  min-width: 120px;
  padding: 0 9px;
}
.wiki-rank-slider input[type="range"] {
  width: 100%;
  height: 4px;
  margin: 0;
  accent-color: var(--c-cyan);
  cursor: pointer;
}
.wiki-rank-scale {
  display: flex;
  justify-content: space-between;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
}

/* Term link hint and markdown links inside parsed game text. */
.wiki-term {
  border-bottom: 1px dotted currentColor;
  cursor: help;
}
.wiki-link {
  color: var(--c-cyan);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Inline detailed skill table behind a disclosure. */
.wiki-skill-details {
  margin-top: 0.55rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--border-main);
  border-radius: 8px;
  background-color: var(--bg-subcard);
}
.wiki-skill-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  list-style: none;
  text-transform: uppercase;
  cursor: pointer;
}
.wiki-skill-details summary::-webkit-details-marker { display: none; }
.wiki-skill-details summary::after {
  content: '\25BE';
  font-size: 0.9rem;
  line-height: 1;
  transition: transform 150ms var(--ease-out);
}
.wiki-skill-details:not([open]) summary::after { transform: rotate(-90deg); }
.wiki-skill-details[open] summary {
  margin-bottom: 0.45rem;
  color: var(--text-main);
}
.wiki-detail-table { font-size: 0.72rem; }
.wiki-detail-table th:first-child { text-align: left; }

/* --- Agent overview charts -------------------------------------------------- */
/* One height per chart shape, so the card grid does not stretch a doughnut or
   squeeze a twelve-bar ranking into whatever height its sibling happened to
   need. The two rows pair like with like: pies on top, rankings below. */
.wiki-chart-box { position: relative; height: 300px; }
.wiki-chart-box.is-pie { height: 320px; }
.wiki-chart-box.is-bars { height: 340px; }
.wiki-chart-box.is-source { height: 340px; }
.wiki-chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.8rem;
  text-align: center;
}
.wiki-chart-note {
  margin: 0.35rem 0 0;
  color: var(--text-muted);
  font-size: 0.72rem;
  text-align: center;
}

/* --- Mindscape vertical ---------------------------------------------------- */
.wiki-ms-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.wiki-ms-select {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: auto;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}
.wiki-ms-select select {
  height: 30px;
  max-width: 340px;
  padding: 0 0.5rem;
  border: 1px solid var(--border-main);
  border-radius: 8px;
  background-color: var(--bg-card);
  color: var(--text-main);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
}
.wiki-ms-team {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--border-main);
}
.wiki-ms-team .wiki-gear { gap: 0.35rem; font-size: 0.85rem; }
/* The bangboo is part of the matched context, not a third teammate, so a
   hairline keeps it visually separate from the team chips. */
.wiki-ms-team .wiki-ms-boo {
  padding-left: 0.9rem;
  border-left: 1px solid var(--border-main);
}
.wiki-gear-ico.is-mini { width: 18px; height: 18px; border-radius: 4px; }
.wiki-ms-mind {
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 700;
}
.wiki-ms-list { margin-top: 0.1rem; }
.wiki-ms-left { display: inline-flex; align-items: center; gap: 0.6rem; min-width: 0; }
.wiki-ms-badge {
  display: inline-block;
  min-width: 34px;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--border-main);
  border-radius: 6px;
  background-color: var(--bg-subcard);
  color: var(--text-main);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
}
.wiki-ms-dps {
  color: var(--text-main);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  font-weight: 700;
}
/* Two charts per row: four equal columns would leave each one too narrow for a
   doughnut legend next to the plot. */
.wiki-chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-chart-card.is-wide { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .wiki-chart-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .wiki-chart-box.is-pie { height: 300px; }
  .wiki-chart-box.is-bars { height: 300px; }
  .wiki-chart-box.is-source { height: 380px; }
}

/* --- Ranked lists on the agent overview ------------------------------------ */
.wiki-rank-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.wiki-rank-list { margin: 0; padding: 0; list-style: none; }
.wiki-rank-list.is-last { margin-bottom: 0; }
.wiki-rank-list:not(.is-last) { margin-bottom: 0.75rem; }
.wiki-rank-group {
  margin: 0.2rem 0 0.15rem;
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.wiki-rank-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 34px;
  padding: 0.3rem 0.35rem;
  margin: 0 -0.35rem;
  border-bottom: 1px solid var(--border-main);
  border-radius: 6px;
}
.wiki-rank-list .wiki-rank-row:last-child { border-bottom: 0; }
.wiki-rank-row.is-link { cursor: pointer; }
.wiki-rank-row.is-link:hover { background-color: var(--bg-subcard); }
.wiki-rank-row:focus-visible { outline: 2px solid var(--border-accent); outline-offset: 1px; }
/* Rank rows reuse the site's own popover surface instead of a native title. */
.wiki-rank-help { position: relative; display: inline-flex; align-items: center; }
.wiki-rank-help .tip {
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  bottom: auto;
  min-width: 190px;
  text-align: left;
}
.help-dot.is-icon {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--c-yellow);
  cursor: help;
}
.help-dot.is-icon svg { width: 16px; height: 16px; }
.help-dot.is-icon:focus-visible { outline: 2px solid var(--border-accent); outline-offset: 2px; color: var(--c-yellow); }
.wiki-rank-val {
  flex: 0 0 auto;
  color: var(--c-cyan);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}
.wiki-rank-val:hover,
.wiki-rank-val:focus-visible { text-decoration: underline; text-underline-offset: 2px; }
.wiki-rank-val.is-na,
.wiki-rank-val.is-zero { color: var(--text-muted); }
.wiki-rank-val.is-na { cursor: help; }
.wiki-rank-empty {
  padding: 0.3rem 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}
.wiki-rank-note {
  padding-top: 0.4rem;
  color: var(--text-muted);
  font-size: 0.72rem;
  line-height: 1.4;
}

/* --- Gear / agent chips ---------------------------------------------------- */
.wiki-gear {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  max-width: 100%;
  color: inherit;
  text-decoration: none;
}
.wiki-gear:hover .wiki-gear-name,
.wiki-gear:focus-visible .wiki-gear-name {
  color: var(--c-cyan);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wiki-gear:focus-visible { outline: 2px solid var(--border-accent); outline-offset: 2px; border-radius: 4px; }
.wiki-gear-ico {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background-color: rgba(13, 17, 23, 0.35);
  object-fit: contain;
}
.wiki-gear-ico.is-round { border-radius: 50%; object-fit: cover; }
[data-theme="light"] .wiki-gear-ico { background-color: rgba(13, 17, 23, 0.06); }
/* Two merged items: one square, split along the "/" diagonal. */
.wiki-gear-ico.is-split {
  position: relative;
  display: inline-block;
  overflow: hidden;
  background-color: transparent;
}
.wiki-gear-ico.is-split img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.wiki-gear-ico.is-split img:first-child { clip-path: polygon(0 0, 100% 0, 0 100%); }
.wiki-gear-ico.is-split img:last-child { clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.wiki-gear-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Best runs: a compressed copy of the leaderboard run card -------------- */
.wiki-run-list { margin: 0; padding: 0; list-style: none; }
.wiki-run { border-bottom: 1px solid var(--border-main); }
.wiki-run-list .wiki-run:last-child { border-bottom: 0; }
.wiki-run summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 46px;
  padding: 0.4rem 0;
  cursor: pointer;
  list-style: none;
}
.wiki-run summary::-webkit-details-marker { display: none; }
.wiki-run summary:hover .wiki-run-metrics strong { color: var(--c-cyan); }
.wiki-run summary:focus-visible { outline: 2px solid var(--border-accent); outline-offset: 2px; border-radius: 6px; }
.wiki-run-rank {
  flex: 0 0 auto;
  width: 1.1rem;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  font-weight: 700;
}
.wiki-run-team { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 auto; min-width: 0; }
.wiki-run-chip { position: relative; flex: 0 0 auto; }
.wiki-run-ico {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background-color: var(--bg-subcard);
  object-fit: cover;
}
.wiki-run-mind {
  position: absolute;
  right: -3px;
  bottom: -3px;
  padding: 0 3px;
  border: 1px solid var(--border-main);
  border-radius: 5px;
  background-color: var(--bg-nav);
  color: var(--text-main);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.56rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.35;
}
.wiki-run-metrics {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--text-muted);
  font-size: 0.8rem;
  white-space: nowrap;
}
.wiki-run-metrics strong {
  color: var(--text-main);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.86rem;
  font-weight: 700;
}
.wiki-run-sep { margin: 0 0.4rem; opacity: 0.6; }
/* Beta revision and "Gear priced on this run" tags sit between the team and
   the metrics; on a phone they drop to their own line under the team. */
.wiki-run-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; min-width: 0; }
.wiki-run-tags .status-tag { white-space: nowrap; }
.wiki-run-priced-tag { color: var(--c-cyan); border-color: color-mix(in srgb, var(--c-cyan) 45%, transparent); background: color-mix(in srgb, var(--c-cyan) 12%, transparent); }
.wiki-run.is-priced .wiki-run-rank { color: var(--c-cyan); }
@media (max-width: 640px) {
  .wiki-run summary { flex-wrap: wrap; row-gap: 0.35rem; }
  .wiki-run-team { flex: 0 1 auto; }
  .wiki-run-tags { order: 3; flex-basis: 100%; padding-left: calc(1.1rem + 0.75rem); }
}
.wiki-run-body { padding: 0.5rem 0 0.9rem; }
.wiki-run-body .site-team-grid { margin-bottom: 0.6rem; }
.wiki-run-links { display: flex; gap: 1rem; }
.wiki-run-links .wiki-link { font-size: 0.78rem; }

/* --- Game-text colour tags, theme aware ------------------------------------ */
/* The colour tags in skill text are authored for the dark combat UI: raw white
   and pale element hues land at 1.1–3.0:1 on a white card. The author hex now
   arrives as --wiki-c so the light theme can re-blend it toward body ink while
   keeping the hue; the dark theme renders it untouched. */
.wiki-color { color: var(--wiki-c, currentColor); font-weight: 800; }

/* Emphasis inside game text: every number is bold green, and major skill
   categories keep a fixed swatch so "EX Special Attack" reads the same in every
   W-Engine, Drive Disc, mindscape and skill description. */
.wiki-num { color: #4ADE80; font-weight: 800; }
.wiki-buff { color: #4ADE80; font-weight: 800; }
.wiki-skill { color: var(--wiki-skill-c, currentColor); font-weight: 800; }
.wiki-skill[data-skill="basic"] { --wiki-skill-c: #38BDF8; }
.wiki-skill[data-skill="dash"] { --wiki-skill-c: #22D3EE; }
.wiki-skill[data-skill="dodge"] { --wiki-skill-c: #2DD4BF; }
.wiki-skill[data-skill="special"] { --wiki-skill-c: #A855F7; }
.wiki-skill[data-skill="ex"] { --wiki-skill-c: #C084FC; }
.wiki-skill[data-skill="chain"] { --wiki-skill-c: #F97316; }
.wiki-skill[data-skill="ultimate"] { --wiki-skill-c: #EAB308; }
.wiki-skill[data-skill="assist"] { --wiki-skill-c: #22C55E; }
.wiki-skill[data-skill="maim"] { --wiki-skill-c: #DC2626; }
.wiki-skill[data-skill="abloom"] { --wiki-skill-c: #6EE7B7; }
.wiki-skill[data-skill="luminize"] { --wiki-skill-c: #FF9AD5; }
.wiki-skill[data-skill="disorder"] { --wiki-skill-c: #E879F9; }
.wiki-skill[data-skill="vortex"] { --wiki-skill-c: #C9971C; }
.wiki-skill[data-skill="windswept"] { --wiki-skill-c: #7EDFD2; }
.wiki-skill[data-skill="assault"] { --wiki-skill-c: #FFD65A; }
.wiki-skill[data-skill="burn"] { --wiki-skill-c: #FB7185; }
.wiki-skill[data-skill="shatter"] { --wiki-skill-c: #93C5FD; }
.wiki-skill[data-skill="freeze"] { --wiki-skill-c: #60A5FA; }
.wiki-skill[data-skill="frostbite"] { --wiki-skill-c: #82B6D1; }
.wiki-skill[data-skill="shock"] { --wiki-skill-c: #637DEB; }
.wiki-skill[data-skill="corruption"] { --wiki-skill-c: #D852E6; }
.wiki-skill[data-skill="refringe"] { --wiki-skill-c: #FFA9DD; }
.wiki-skill[data-skill="sharp"] { --wiki-skill-c: #FCA5A5; }

[data-theme="light"] .wiki-color[data-c="#FFFFFF"] { color: var(--text-main); }
[data-theme="light"] .wiki-color { color: color-mix(in srgb, var(--wiki-c, currentColor) 34%, var(--text-main)); }
[data-theme="light"] .wiki-num { color: #15803D; }
[data-theme="light"] .wiki-buff { color: #15803D; }
[data-theme="light"] .wiki-skill { color: color-mix(in srgb, var(--wiki-skill-c, currentColor) 45%, #0D1117); }

/* The element label sits on the near-white banner panel in light theme. */
[data-theme="light"] .wiki-hero-tags .wiki-hero-element {
  color: color-mix(in srgb, var(--wiki-accent, var(--c-cyan)) 40%, #0D1117);
}

/* ==========================================================================
   Loadout Lab gear lists on the agent page
   Precomputed percentage deltas against the run's own build, with a caution
   mark for effects a fixed timeline cannot price and an inline admin editor.
   ========================================================================== */
.wiki-lab-list { margin-bottom: 0; }
.wiki-lab-group + .wiki-lab-group { margin-top: 0.65rem; }
.wiki-lab-name { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.wiki-lab-name .wiki-gear { min-width: 0; }
.wiki-lab-refine,
.wiki-lab-worn {
  flex: none;
  padding: 0 0.32rem;
  border: 1px solid var(--border-main);
  border-radius: 4px;
  background-color: var(--bg-subcard);
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.5;
}
.wiki-lab-val {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
}
.wiki-lab-pct {
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}
.wiki-lab-pct.is-up { color: var(--c-green, #4ade80); }
.wiki-lab-pct.is-down { color: var(--c-orange); }
.wiki-lab-edited {
  color: var(--text-muted);
  font-size: 0.62rem;
  font-style: italic;
  white-space: nowrap;
}
.wiki-lab-caution {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--c-orange);
}
.wiki-lab-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}
.wiki-lab-edit svg { width: 14px; height: 14px; }
.wiki-lab-edit:hover,
.wiki-lab-edit:focus-visible {
  background-color: var(--bg-subcard);
  color: var(--c-cyan);
}
.wiki-lab-edit:focus-visible { outline: 2px solid var(--border-accent); outline-offset: 1px; }
.wiki-lab-remove { font-size: 0.95rem; line-height: 1; }
.wiki-lab-note-btn { font-size: 0.85rem; font-weight: 800; line-height: 1; }
.wiki-lab-reset { font-size: 0.9rem; line-height: 1; }
/* Tags and values with the site tooltip (wikiLabTip). */
.wiki-lab-help { display: inline-flex; align-items: center; cursor: help; outline: none; }
.wiki-lab-help:focus-visible { border-radius: 4px; box-shadow: 0 0 0 2px var(--border-accent); }
.wiki-lab-help .tip { width: min(280px, 80vw); font-size: 0.74rem; text-transform: none; letter-spacing: 0; white-space: normal; font-weight: 500; text-align: left; }
.wiki-lab-help.is-right .tip { left: auto; right: 0; }
.wiki-lab-rebal { border-color: rgba(56, 189, 248, 0.45); color: var(--c-cyan); }
.wiki-lab-anchor { border-color: rgba(74, 222, 128, 0.45); color: var(--c-green, #4ade80); }
/* What an option's build changed besides its item (wikiLabChangesHtml):
   teammate faces, set icons, disc 4/5/6 main icons with the slot number, and
   a "subs" tag whose tooltip lists the substat rolls. */
.wiki-lab-chg { display: inline-flex; align-items: center; gap: 0.3rem; flex: none; margin-left: 0.15rem; }
.wiki-lab-chg-team { display: inline-flex; align-items: center; gap: 0.15rem; }
.wiki-lab-chg-ico {
  display: block;
  flex: none;
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.wiki-lab-chg-ico.is-agent,
.wiki-lab-chg-ico.is-disc {
  border-radius: 50%;
  background-color: rgba(13, 17, 23, 0.35);
  object-fit: cover;
}
.wiki-lab-chg-ico.is-stat { width: 18px; height: 18px; }
.wiki-lab-chg-ico.is-element { width: 20px; height: 20px; }
/* A slot takes the same 22px box as the faces and set icons, so the row stays
   evenly spaced; the mark sits top-left and the slot number tucks under its
   bottom-right corner. */
.wiki-lab-chg-slot { position: relative; display: block; flex: none; width: 22px; height: 22px; }
.wiki-lab-chg-slot .wiki-lab-chg-ico { position: absolute; top: 0; left: 0; }
.wiki-lab-chg-slot sub {
  position: absolute;
  right: -1px;
  bottom: -3px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1;
}
/* A set icon's piece count (2p / 4p) tucks under its corner like a slot
   number, on a small backing so it reads over the set art. */
.wiki-lab-chg-set { position: relative; display: block; flex: none; width: 22px; height: 22px; }
.wiki-lab-chg-set sub {
  position: absolute;
  right: -3px;
  bottom: -3px;
  padding: 0 1px;
  border-radius: 3px;
  background: var(--bg-card);
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  font-weight: 700;
  line-height: 1;
}
.wiki-lab-subs { border-color: rgba(56, 189, 248, 0.45); color: var(--c-cyan); }
/* The slot marks are white: dark on the light theme. */
[data-theme="light"] .wiki-lab-chg-ico.is-stat:not(.is-element) { filter: invert(1) brightness(0.35); }
[data-theme="light"] .wiki-lab-chg-ico.is-agent,
[data-theme="light"] .wiki-lab-chg-ico.is-disc { background-color: rgba(13, 17, 23, 0.06); }
.wiki-lab-tip-link { display: block; color: var(--c-cyan); overflow-wrap: anywhere; text-decoration: underline; }
.wiki-lab-remove:hover { color: var(--c-orange); }
/* Admins: the calculated % beside a set one or a caution, and the Add picker. */
.wiki-lab-calc {
  margin-left: 0.3rem;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  white-space: nowrap;
}
.wiki-lab-add {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.35rem 0 0.2rem;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
}
.wiki-lab-add select {
  flex: 1;
  min-width: 0;
  height: 28px;
  padding: 0 0.4rem;
  border: 1px solid var(--border-main);
  border-radius: 7px;
  background-color: var(--bg-card);
  color: var(--text-main);
  font: inherit;
  font-size: 0.74rem;
}
.wiki-lab-note {
  margin: 0.55rem 0 0;
  color: var(--text-muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

/* --- Wiki share summary (js/wiki-share.js) ---------------------------------
   A fixed 1200x630 card, exported at 2x by html2canvas. It always draws in the
   dark theme (its own tokens), themed on the Agent's element via --ws-accent.
   Colours here stay hex/rgba: html2canvas 1.4.1 cannot parse color-mix(). */
.wiki-share-card {
  --bg-nav: #0D1117; --bg-card: #212830; --bg-subcard: #181E24; --bg-hover: #2D3748;
  --border-main: #30363D; --border-accent: #38BDF8;
  --text-main: #FFFFFF; --text-muted: #8B949E; --text-dim: #6E7681;
  --c-cyan: #38BDF8; --c-orange: #F97316; --c-green: #22C55E; --c-red: #EF4444; --c-purple: #A855F7; --c-yellow: #EAB308;
  position: relative; width: 1200px; height: 630px; overflow: hidden;
  background: #0B0F14; color: #FFFFFF;
  font-family: 'Inter', system-ui, sans-serif; text-align: left;
}
.wiki-share-card .ws-bg, .wiki-share-card .ws-stripes { position: absolute; inset: 0; }
.wiki-share-card .ws-stripes {
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0px, rgba(255, 255, 255, 0.025) 2px, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0) 14px);
}
.wiki-share-card .ws-glow { position: absolute; left: 270px; top: 40px; width: 660px; height: 640px; }
.wiki-share-card .ws-watermark { position: absolute; left: 400px; top: 150px; width: 400px; height: 400px; opacity: 0.07; object-fit: contain; }
/* Box and image sizes are set inline by js/wiki-share.js (artHtml) from the
   image's natural ratio: html2canvas ignores object-fit and would stretch it. */
.wiki-share-card .ws-art { position: absolute; overflow: hidden; }
.wiki-share-card .ws-art img { position: absolute; max-width: none; max-height: none; }
/* A <canvas> drawn by js/wiki-share.js: html2canvas renders a CSS gradient's
   transparent first stop as a visible line across the export. */
.wiki-share-card .ws-art-fade { position: absolute; left: 0; bottom: 0; width: 1200px; height: 170px; }
.wiki-share-card .ws-head { position: absolute; top: 16px; left: 380px; width: 440px; text-align: center; }
.wiki-share-card .ws-name { font-size: 40px; font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); }
.wiki-share-card .ws-tags { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 6px; color: var(--ws-accent); font-size: 16px; font-weight: 700; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7); }
.wiki-share-card .ws-tag-ico { width: 22px; height: 22px; object-fit: contain; }
.wiki-share-card .ws-col { position: absolute; top: 18px; bottom: 44px; width: 340px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.wiki-share-card .ws-left { left: 18px; }
.wiki-share-card .ws-right { right: 18px; }
.wiki-share-card .ws-card {
  margin: 0; padding: 10px 14px; border: 1px solid var(--ws-accent-line); border-radius: 10px;
  background: rgba(13, 17, 23, 0.82); box-shadow: none; flex: 0 0 auto;
}
.wiki-share-card .ws-card .site-chart-title, .wiki-share-card .ws-title {
  margin: 0 0 6px; color: var(--ws-accent); font-size: 13px; font-weight: 800; letter-spacing: 0.02em;
}
.wiki-share-card .ws-card .site-chart-title .wiki-beta-runs-tag { margin-left: 6px; }
.wiki-share-card .wiki-rank-list { margin: 0; }
.wiki-share-card .wiki-rank-row { padding: 4px 0; min-height: 0; font-size: 13px; }
.wiki-share-card .wiki-rank-group { margin: 4px 0 2px; font-size: 10px; }
.wiki-share-card .wiki-lab-group + .wiki-lab-group { margin-top: 2px; }
.wiki-share-card .wiki-gear-ico { width: 22px; height: 22px; }
.wiki-share-card .status-tag { background: rgba(139, 148, 158, 0.12); border-color: rgba(139, 148, 158, 0.35); color: #C9D1D9; }
.wiki-share-card .wiki-run-priced-tag { background: rgba(56, 189, 248, 0.12); border-color: rgba(56, 189, 248, 0.45); color: #38BDF8; }
.wiki-share-card .wiki-run-summary { display: flex; flex-wrap: wrap; align-items: center; min-height: 0; padding: 4px 0; gap: 4px 8px; }
.wiki-share-card .wiki-run-team { flex: 0 0 auto; gap: 6px; }
.wiki-share-card .wiki-run-metrics { margin-left: auto; }
.wiki-share-card .wiki-run-tags { order: 3; flex-basis: 100%; padding-left: 26px; }
.wiki-share-card .wiki-run-ico { width: 26px; height: 26px; border-radius: 6px; }
.wiki-share-card .wiki-run-metrics { font-size: 11px; }
.wiki-share-card .wiki-run-metrics strong { font-size: 12px; }
.wiki-share-card .wiki-run-tags .status-tag { font-size: 9px; padding: 1px 5px; }
.wiki-share-card .ws-pie-body { display: flex; align-items: center; gap: 12px; }
.wiki-share-card .ws-pie-plot { flex: 0 0 auto; width: 118px; height: 118px; }
.wiki-share-card .ws-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 11.5px; color: #C9D1D9; }
.wiki-share-card .ws-legend li { display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wiki-share-card .ws-legend i { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 2px; }
.wiki-share-card .ws-ms-list { list-style: none; margin: 0; padding: 0; }
.wiki-share-card .ws-ms-row { display: flex; align-items: center; gap: 10px; padding: 3px 0; font-size: 12.5px; }
.wiki-share-card .ws-ms-badge { min-width: 30px; padding: 1px 6px; border-radius: 5px; background: var(--ws-accent-soft); color: var(--ws-accent); font-weight: 800; font-size: 11px; text-align: center; }
.wiki-share-card .ws-ms-dps { color: #C9D1D9; font-family: 'JetBrains Mono', monospace; }
.wiki-share-card .ws-ms-gain { margin-left: auto; color: #8B949E; font-weight: 700; }
.wiki-share-card .ws-ms-gain.is-up { color: #22C55E; }
.wiki-share-card .ws-foot { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; align-items: center; gap: 12px; font-size: 12px; color: #8B949E; }
.wiki-share-card .ws-brand { color: var(--ws-accent); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.wiki-share-card .ws-beta { padding: 1px 7px; border: 1px solid rgba(139, 148, 158, 0.35); border-radius: 999px; color: #C9D1D9; }

.ws-overlay { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(1, 4, 9, 0.72); }
.ws-dialog { width: min(1240px, 100%); max-height: 100%; overflow: auto; padding: 14px; border: 1px solid var(--border-main); border-radius: 12px; background: var(--bg-card); color: var(--text-main); }
.ws-dialog-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ws-x { border: 0; background: none; color: var(--text-muted); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.ws-frame { position: relative; width: 100%; overflow: hidden; border-radius: 8px; }
.ws-stage { width: 1200px; height: 630px; transform-origin: 0 0; }
.ws-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; color: var(--text-muted); }
.ws-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ws-status { margin-right: auto; color: var(--text-muted); font-size: 0.85rem; }

/* ---- css/guides.css ---- */
/* ==========================================================================
   Wiki guides
   A reading-first layer on top of the compendium: one accent per guide, a
   dossier-style hub, and an editor that stays out of the way.
   ========================================================================== */

.guide-page {
  --guide-gap: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: var(--guide-gap);
  padding-bottom: 3rem;
  min-width: 0;
}

.guide-page [hidden],
.guide-modal [hidden],
[data-guide-admin][hidden],
.guide-editor-restore[hidden] {
  display: none !important;
}

.guide-kicker {
  margin: 0 0 0.45rem;
  color: var(--guide-accent, var(--c-yellow));
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.guide-hint {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.78rem;
  line-height: 1.5;
}

.guide-hint code {
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9em;
}

/* Server-rendered guide shell (crawlers / no-JS). The client replaces this
   with the interactive article after boot. */
.ssr-guide-cover {
  display: block;
  width: 100%;
  max-height: 420px;
  margin: 1rem 0 1.5rem;
  object-fit: cover;
  border: 1px solid var(--border-main);
  border-radius: 9px;
}

.ssr-guide-body {
  max-width: 74ch;
  line-height: 1.7;
}

.ssr-guide-body h2 { margin-top: 1.8rem; font-size: 1.45rem; }
.ssr-guide-body h3 { margin-top: 1.4rem; font-size: 1.15rem; }
.ssr-guide-body p { margin: 0 0 1rem; }
.ssr-guide-body a { color: var(--c-cyan); }
.ssr-guide-wip {
  display: inline-block;
  margin: 0 0 1rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--c-yellow) 55%, var(--border-main));
  border-radius: 6px;
  background: color-mix(in srgb, var(--c-yellow) 10%, transparent);
  color: var(--c-yellow);
  font-size: 0.82rem;
}
.ssr-guide-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 0; list-style: none; }
.ssr-guide-tags li { padding: 0.1rem 0.4rem; border: 1px solid var(--border-main); border-radius: 4px; color: var(--text-muted); font-size: 0.72rem; }

/* --- Loading / empty ------------------------------------------------------ */

.guide-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  min-height: 42vh;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.guide-spinner {
  width: 26px;
  height: 26px;
  border: 2px solid var(--border-main);
  border-top-color: var(--c-yellow);
  border-radius: 50%;
  animation: guide-spin 780ms linear infinite;
}

@keyframes guide-spin { to { transform: rotate(360deg); } }

.guide-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  max-width: 620px;
  padding: 2.4rem;
  margin: 1rem 0;
  background: var(--bg-card);
  border: 1px solid var(--border-main);
  border-left: 3px solid var(--guide-accent, var(--c-yellow));
  border-radius: 10px;
}

.guide-empty h1,
.guide-empty h2 {
  margin: 0;
  color: var(--text-main);
  font-size: 1.55rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.guide-empty p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* --- Hub hero ------------------------------------------------------------- */

.guide-hub-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1.5rem;
  padding: 1.4rem 0 1.5rem;
  border-bottom: 1px solid var(--border-main);
}

.guide-hub-copy h1 {
  margin: 0;
  color: var(--text-main);
  font-size: clamp(2.6rem, 6vw, 4.8rem);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.055em;
}

.guide-hub-lede {
  max-width: 56ch;
  margin: 0.85rem 0 0;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.65;
}

.guide-hub-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  padding: 0.75rem 0 1.1rem;
}

.guide-hub-head h1 {
  margin: 0;
  color: var(--text-main);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
}

.guide-hub-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* --- Buttons -------------------------------------------------------------- */

.guide-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 38px;
  padding: 0 1rem;
  border: 1px solid var(--c-yellow);
  border-radius: 8px;
  background: var(--c-yellow);
  color: #16130a;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: transform 140ms var(--ease-out), filter 140ms var(--ease-out);
}

.guide-button:hover { filter: brightness(1.08); }
.guide-button:active { transform: translateY(1px); }
.guide-button:focus-visible { outline: 2px solid var(--c-cyan); outline-offset: 2px; }

.guide-button--ghost {
  background: transparent;
  border-color: var(--border-main);
  color: var(--text-main);
}

.guide-button--ghost:hover { border-color: var(--c-yellow); color: var(--c-yellow); }

.guide-button--small {
  min-height: 32px;
  padding: 0 0.75rem;
  font-size: 0.78rem;
}

.guide-text-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-cyan);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.guide-text-btn:hover { text-decoration: underline; }
.guide-text-btn:focus-visible { outline: 2px solid var(--c-cyan); outline-offset: 2px; border-radius: 2px; }

/* --- Toolbar -------------------------------------------------------------- */

.guide-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}

.guide-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 240px;
  max-width: 380px;
  height: 38px;
  padding: 0 0.7rem;
  background: var(--bg-card);
  border: 1px solid var(--border-main);
  border-radius: 9px;
  transition: border-color 150ms var(--ease-out);
}

.guide-search:focus-within { border-color: var(--c-cyan); }
.guide-search svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--text-muted); }
.guide-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-main);
  font-family: inherit;
  font-size: 0.9rem;
}

.guide-search input::placeholder { color: var(--text-dim); }
.guide-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.guide-tag-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  flex: 1 1 320px;
}

.guide-chip {
  height: 30px;
  padding: 0 0.62rem;
  border: 1px solid var(--border-main);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  transition: color 140ms var(--ease-out), border-color 140ms var(--ease-out), background-color 140ms var(--ease-out);
}

.guide-chip:hover { color: var(--text-main); border-color: var(--text-dim); }
.guide-chip.is-active {
  background: var(--c-yellow);
  border-color: var(--c-yellow);
  color: #16130a;
}

.guide-chip:focus-visible { outline: 2px solid var(--c-cyan); outline-offset: 2px; }

.guide-sort {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: auto;
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.guide-sort select {
  height: 34px;
  padding: 0 0.55rem;
  border: 1px solid var(--border-main);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--text-main);
  font-family: inherit;
  font-size: 0.82rem;
}

/* --- Hub cards ------------------------------------------------------------ */

.guide-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  overflow: hidden;
  margin: 0.15rem 0 0.35rem;
  background: var(--bg-card);
  border: 1px solid var(--border-main);
  border-left: 3px solid var(--guide-accent, var(--c-yellow));
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  transition: border-color 160ms var(--ease-out), transform 160ms var(--ease-out);
}

.guide-feature:hover {
  border-color: var(--guide-accent, var(--c-yellow));
  transform: translateY(-2px);
}

.guide-feature:focus-visible { outline: 2px solid var(--c-cyan); outline-offset: 2px; }

.guide-feature-cover { min-height: 260px; }
.guide-feature-cover .guide-cover { height: 100%; min-height: 260px; border-radius: 0; border: 0; }

.guide-feature-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 1.6rem 1.7rem;
}

.guide-feature-body h2 {
  margin: 0;
  color: var(--text-main);
  font-size: clamp(1.5rem, 2.7vw, 2.15rem);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.035em;
}

.guide-feature-summary {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

.guide-feature-cta {
  margin-top: auto;
  color: var(--guide-accent, var(--c-yellow));
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.76rem;
  font-weight: 800;
}

.guide-meta {
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.01em;
}

.guide-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1rem;
}

/* Guides tagged with a wiki agent/item */
.wiki-guides-section { margin-top: 1rem; }
.wiki-guides-panel { margin-top: 0.5rem; }
.wiki-guides-lede {
  margin: 0 0 0.9rem;
  color: var(--text-muted);
  font-size: 0.86rem;
}
.wiki-guides-lede strong { color: var(--text-main); }
.wiki-guides-results {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.guide-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

.guide-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border-main);
  border-radius: 9px;
  color: inherit;
  text-decoration: none;
  transition: border-color 150ms var(--ease-out), transform 150ms var(--ease-out);
}

.guide-card:hover {
  border-color: var(--guide-accent, var(--c-cyan));
  transform: translateY(-2px);
}

.guide-card:focus-visible { outline: 2px solid var(--c-cyan); outline-offset: 2px; }

.guide-card-cover { aspect-ratio: 16 / 9; flex: 0 0 auto; }
.guide-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.9rem 1rem 1rem;
}

.guide-card-body h3 {
  margin: 0;
  color: var(--text-main);
  font-size: 1.08rem;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.guide-card-body p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Cover art ------------------------------------------------------------ */

.guide-cover,
.guide-card-cover,
.guide-hero-cover {
  position: relative;
  overflow: hidden;
  background: var(--bg-subcard);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--guide-accent, #EAB308) 26%, transparent), transparent 58%),
    var(--bg-subcard);
}

.guide-cover img,
.guide-card-cover img,
.guide-hero-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.guide-cover-initial {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--guide-accent, #EAB308) 55%, transparent);
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 900;
  line-height: 1;
  z-index: 0;
}

.guide-cover.has-image .guide-cover-initial,
.guide-card-cover.has-image .guide-cover-initial,
.guide-hero-cover.has-image .guide-cover-initial { z-index: 0; }
.guide-cover.has-image img,
.guide-card-cover.has-image img,
.guide-hero-cover.has-image img { position: relative; z-index: 1; }
.guide-cover.is-missing .guide-cover-initial,
.guide-cover.has-image .guide-cover-initial { display: flex; }
/* A loaded cover is the cover; the initial is only the no-image / failed-image
   fallback, so never paint it through the artwork. */
.guide-cover.has-image:not(.is-missing) .guide-cover-initial,
.guide-card-cover.has-image:not(.is-missing) .guide-cover-initial,
.guide-hero-cover.has-image:not(.is-missing) .guide-cover-initial { display: none; }

.guide-hero-cover.is-missing::after {
  content: 'Cover image unavailable';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.guide-cover-scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg, transparent 0 9px, color-mix(in srgb, var(--guide-accent, #EAB308) 10%, transparent) 9px 10px);
  opacity: 0.35;
  pointer-events: none;
}

/* --- Tags ----------------------------------------------------------------- */

.guide-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-tags li {
  padding: 0.12rem 0.42rem;
  border: 1px solid var(--border-main);
  border-radius: 4px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* --- Reader --------------------------------------------------------------- */

.guide-reader { position: relative; }

.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 180;
  height: 3px;
  background: transparent;
  pointer-events: none;
}

.reading-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--c-yellow);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.guide-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
}

.guide-breadcrumb a { color: var(--text-muted); text-decoration: none; }
.guide-breadcrumb a:hover { color: var(--c-cyan); text-decoration: underline; }

.guide-article {
  width: min(1400px, 100%);
  margin: 0 auto;
}

.guide-article-head {
  padding: 0.75rem 0 1.25rem;
}

.guide-article-labels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.7rem;
}

.guide-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 0.55rem;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.guide-badge--draft { background: var(--c-orange); color: #1a0d03; }
.guide-badge--wip { background: var(--c-yellow); color: #16130a; }

.guide-article-head h1 {
  max-width: 20ch;
  margin: 0;
  color: var(--text-main);
  font-size: clamp(2.3rem, 5.4vw, 4.4rem);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.guide-deck {
  max-width: 62ch;
  margin: 1rem 0 0;
  color: var(--text-muted);
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  line-height: 1.6;
}

.guide-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.85rem;
  margin-top: 1rem;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
}

.guide-byline-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-left: auto;
}

.guide-hero-cover {
  aspect-ratio: 21 / 9;
  max-height: 460px;
  margin: 0.5rem 0 1.75rem;
  border: 1px solid var(--border-main);
  border-radius: 10px;
}

.guide-layout { display: block; }
.guide-layout.has-toc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 2.75rem;
  align-items: start;
}

.guide-body {
  min-width: 0;
  max-width: none;
  color: var(--text-main);
  font-size: 1rem;
  line-height: 1.75;
}

/* Keep prose readable, but let tables, grids and charts use the full article
   width. The old 74ch cap on the container squeezed every data embed into the
   same narrow column as the paragraphs. */
.guide-body > p,
.guide-body > h2,
.guide-body > h3,
.guide-body > h4,
.guide-body > ul,
.guide-body > ol,
.guide-body > blockquote,
.guide-body > .guide-callout,
.guide-body > .guide-details {
  max-width: 74ch;
}

.guide-body > :first-child { margin-top: 0; }

.guide-body h2,
.guide-body h3,
.guide-body h4 {
  color: var(--text-main);
  font-weight: 850;
  line-height: 1.15;
  letter-spacing: -0.025em;
  scroll-margin-top: 96px;
}

.guide-body h2 {
  margin: 2.6rem 0 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border-main);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
}

.guide-body h3 { margin: 2rem 0 0.6rem; font-size: 1.28rem; }
.guide-body h4 { margin: 1.5rem 0 0.45rem; font-size: 1.05rem; }

.guide-body p { margin: 0 0 1.05rem; }
.guide-subtext {
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.5;
}
.guide-body strong { color: var(--text-main); font-weight: 800; }

.guide-body a {
  color: var(--c-cyan);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.guide-body a:hover { color: #7DD3FC; }

/* Embeds are cards, not prose. The generic prose underline made every wiki
   card title, kicker and "Open wiki entry" read as a stray blue line. */
.guide-body .guide-embed a,
.guide-body .guide-figure > a,
.guide-body .guide-wiki-link,
.guide-body .guide-run a,
.guide-body .guide-run-table a,
.guide-body .guide-tc a,
.guide-body .guide-button {
  text-decoration: none;
}
.guide-body .guide-wiki-link:hover h3,
.guide-body .guide-run-table a:hover,
.guide-body .guide-run a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.guide-body ul,
.guide-body ol {
  margin: 0 0 1.1rem;
  padding-left: 1.35rem;
}

.guide-body li { margin-bottom: 0.35rem; }
.guide-body li > ul,
.guide-body li > ol { margin-top: 0.35rem; margin-bottom: 0; }

.guide-body blockquote {
  margin: 1.4rem 0;
  padding: 0.3rem 0 0.3rem 1.1rem;
  border-left: 3px solid var(--guide-accent, var(--c-yellow));
  color: var(--text-muted);
  font-size: 1.05rem;
}

.guide-body blockquote p:last-child { margin-bottom: 0; }

.guide-body code {
  padding: 0.1rem 0.3rem;
  border: 1px solid var(--border-main);
  border-radius: 4px;
  background: var(--bg-subcard);
  color: var(--c-yellow);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85em;
}

.guide-code {
  overflow-x: auto;
  margin: 1.25rem 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border-main);
  border-radius: 8px;
  background: var(--bg-nav);
  line-height: 1.55;
}

.guide-code code {
  padding: 0;
  border: 0;
  background: transparent;
  color: #E6EDF3;
  font-size: 0.83rem;
}

.guide-rule {
  height: 1px;
  margin: 2rem 0;
  border: 0;
  background: var(--border-main);
}

.guide-table-wrap {
  width: 100%;
  margin: 1.25rem 0 1.5rem;
  overflow-x: auto;
  border: 1px solid var(--border-main);
  border-radius: 8px;
}

.guide-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card);
  font-size: 0.84rem;
}

.guide-table th,
.guide-table td {
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--border-main);
  text-align: left;
  vertical-align: middle;
}

.guide-table th {
  background: var(--bg-subcard);
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.guide-table tr:last-child td { border-bottom: 0; }
.guide-table tbody tr:hover td { background: color-mix(in srgb, var(--c-cyan) 5%, transparent); }

.guide-figure,
.guide-video {
  margin: 1.5rem 0;
}

.guide-figure img,
.guide-video video {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border-main);
  border-radius: 8px;
  background: #000;
}

.guide-figure img { cursor: zoom-in; }

.guide-figure figcaption,
.guide-video figcaption,
.guide-embed-caption {
  margin-top: 0.5rem;
  color: var(--text-dim);
  font-size: 0.76rem;
  line-height: 1.5;
}

.guide-button-row { margin: 1.25rem 0; }

.guide-button-row .guide-button { min-height: 40px; }

/* --- Callouts / details --------------------------------------------------- */

.guide-callout {
  margin: 1.5rem 0;
  padding: 0.95rem 1.05rem;
  border: 1px solid var(--border-main);
  border-left: 3px solid var(--c-cyan);
  border-radius: 8px;
  background: var(--bg-card);
}

.guide-callout-title {
  margin: 0 0 0.35rem !important;
  color: var(--text-main);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.guide-callout-body > :last-child { margin-bottom: 0; }
.guide-callout--tip { border-left-color: var(--c-green); }
.guide-callout--note { border-left-color: var(--c-cyan); }
.guide-callout--warning { border-left-color: var(--c-yellow); }
.guide-callout--danger { border-left-color: var(--c-red); }
.guide-callout--quote { border-left-color: var(--c-purple); }
.guide-callout--success { border-left-color: var(--c-green); }

.guide-details {
  margin: 1.25rem 0;
  border: 1px solid var(--border-main);
  border-radius: 8px;
  background: var(--bg-card);
}

.guide-details summary {
  padding: 0.7rem 0.9rem;
  color: var(--text-main);
  font-size: 0.88rem;
  font-weight: 750;
  cursor: pointer;
}

.guide-details-body {
  padding: 0 0.9rem 0.9rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.guide-details-body > :last-child { margin-bottom: 0; }

/* --- TOC ------------------------------------------------------------------ */

.guide-toc {
  position: sticky;
  top: 92px;
  align-self: start;
  padding-left: 1rem;
  border-left: 1px solid var(--border-main);
}

.guide-toc-title {
  margin: 0 0 0.55rem;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.guide-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-toc li { margin: 0 0 0.4rem; }
.guide-toc li.guide-toc-l3 { padding-left: 0.7rem; }

.guide-toc a {
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.4;
  text-decoration: none;
}

.guide-toc a:hover { color: var(--text-main); }
.guide-toc a.is-active { color: var(--c-yellow); font-weight: 750; }

/* --- Article footer / related -------------------------------------------- */

.guide-article-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-main);
}

.guide-foot-note {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.74rem;
}

.guide-related { width: min(1080px, 100%); margin: 1rem auto 0; }
.guide-related h2 {
  margin: 0 0 0.85rem;
  font-size: 1.1rem;
  font-weight: 850;
  letter-spacing: -0.01em;
}

/* --- Embeds --------------------------------------------------------------- */

.guide-embed {
  margin: 1.75rem 0;
}

/* Side-by-side cards from :::grid{cols="2|3"} */
.guide-grid {
  display: grid;
  grid-template-columns: repeat(var(--guide-cols, 2), minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
  margin: 1.75rem 0;
}
.guide-grid > .guide-embed {
  margin: 0;
  min-width: 0;
}
/* A three-up row has no room for the 128px art beside the text, so stack the
   card internally while keeping the cards themselves side by side. */
.guide-grid--3 .guide-wiki-link {
  grid-template-columns: 1fr;
}
.guide-grid--3 .guide-wiki-art {
  width: 100%;
  height: 116px;
  aspect-ratio: auto;
  border-bottom: 1px solid var(--border-main);
}
@media (max-width: 760px) {
  .guide-grid {
    grid-template-columns: 1fr;
  }
}

.guide-embed-loading {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1rem;
  border: 1px dashed var(--border-main);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 0.82rem;
}

.guide-embed-error {
  margin: 1rem 0;
  padding: 0.8rem 1rem;
  border: 1px solid color-mix(in srgb, var(--c-red) 55%, var(--border-main));
  border-radius: 8px;
  background: color-mix(in srgb, var(--c-red) 8%, var(--bg-card));
  color: #FCA5A5;
  font-size: 0.84rem;
}

.guide-embed-empty {
  margin: 1rem 0;
  padding: 1rem;
  border: 1px dashed var(--border-main);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 0.86rem;
}

.guide-embed-kicker {
  margin: 0 0 0.2rem;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.guide-embed-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.guide-embed-head h3 {
  margin: 0;
  color: var(--text-main);
  font-size: 1.05rem;
  font-weight: 850;
  letter-spacing: -0.015em;
}

/* Run card */

.guide-run {
  margin: 0;
  padding: 1.1rem 1.15rem 1rem;
  border: 1px solid var(--border-main);
  border-radius: 9px;
  background: var(--bg-card);
}

.guide-run-pie {
  margin: 0;
  padding: 1.1rem 1.15rem 1rem;
  border: 1px solid var(--border-main);
  border-radius: 9px;
  background: var(--bg-card);
}
.guide-run-pie .guide-chart-canvas { height: clamp(280px, 42vw, 420px); }

.guide-run-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.guide-run-head h3 {
  margin: 0;
  color: var(--text-main);
  font-size: 1.1rem;
  font-weight: 850;
  letter-spacing: -0.02em;
}

.guide-run-dps {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1;
}

.guide-run-dps strong {
  color: #4ADE80;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.15rem;
  font-weight: 800;
}

[data-theme="light"] .guide-run-dps strong { color: #15803D; }

.guide-run-dps span {
  margin-top: 0.2rem;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.guide-run-actors,
.guide-team {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}

.guide-run-actors { margin: 0.9rem 0 0.7rem; }

.guide-run-actor {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.guide-run-actor img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-subcard);
  border: 1px solid var(--border-main);
}

.guide-run-actor span {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.guide-run-actor strong {
  color: var(--text-main);
  font-size: 0.8rem;
  font-weight: 750;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.guide-run-actor small {
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
}

.guide-run-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  color: var(--text-muted);
  font-size: 0.76rem;
}

.guide-run-meta strong { color: var(--text-main); }

.guide-run-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0.9rem;
}

/* Compact run: the whole card is one link to the run breakdown. */
.guide-run--compact { padding: 0; }
.guide-run-compact-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 0.9rem;
  color: inherit;
  text-decoration: none;
}
.guide-run-compact-link:hover { background: var(--bg-subcard); }
.guide-run-compact-link:focus-visible { outline: 2px solid var(--c-cyan); outline-offset: -2px; }
.guide-run--compact .guide-run-actors {
  margin: 0;
  flex-wrap: nowrap;
  overflow: hidden;
}
.guide-run--compact .guide-run-actor img { width: 34px; height: 34px; }
.guide-run--compact .guide-run-dps { margin-left: auto; }

/* Leaderboard */

.guide-leaderboard {
  margin: 0;
  padding: 1.1rem 1.15rem 1rem;
  border: 1px solid var(--border-main);
  border-radius: 9px;
  background: var(--bg-card);
}

.guide-th-sort {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.guide-th-sort:hover { color: var(--c-cyan); }
.guide-sort-arrow { color: var(--c-yellow); }

.guide-col-rank { width: 2.2rem; color: var(--text-dim); font-family: 'JetBrains Mono', monospace; }
.guide-col-open { width: 2.5rem; text-align: right; }
.guide-col-open a { color: var(--c-cyan); font-weight: 800; text-decoration: none; }
.guide-num { white-space: nowrap; font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; }

.guide-team { gap: 0.35rem; }
.guide-team .guide-run-actor img { width: 28px; height: 28px; }
.guide-team .guide-run-actor strong { font-size: 0.72rem; }
.guide-team .guide-run-actor small { display: none; }

/* Chart */

.guide-chart {
  margin: 0;
  padding: 1.1rem 1.15rem 1rem;
  border: 1px solid var(--border-main);
  border-radius: 9px;
  background: var(--bg-card);
}

.guide-chart-canvas {
  position: relative;
  height: clamp(240px, 38vw, 360px);
}

/* Wiki card */

.guide-wiki {
  margin: 0;
  border: 1px solid var(--border-main);
  border-radius: 9px;
  background: var(--bg-card);
  overflow: hidden;
}

.guide-wiki-link {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem;
  color: inherit;
  text-decoration: none;
}

.guide-wiki-link:hover { background: var(--bg-subcard); }
.guide-wiki-link:focus-visible { outline: 2px solid var(--c-cyan); outline-offset: -2px; }

.guide-wiki-extra,
.guide-wiki-sections {
  padding: 0.85rem 1rem 1rem;
  border-top: 1px solid var(--border-main);
}
.guide-wiki-extra .guide-wiki-effect { margin: 0 0 0.55rem; color: var(--text-muted); font-size: 0.82rem; line-height: 1.55; }
.guide-wiki-extra .guide-wiki-effect:last-child { margin-bottom: 0; }
.guide-wiki-extra .guide-wiki-effect strong { color: var(--text-main); margin-right: 0.25rem; }
.guide-wiki-toggle-row { padding: 0 1rem 0.9rem; }
.guide-wiki-toggle-row .guide-text-btn { font-size: 0.76rem; }
.guide-wiki-section + .guide-wiki-section { margin-top: 1rem; }
.guide-wiki-section > h4 { margin: 0 0 0.35rem; color: var(--text-main); font-size: 0.9rem; }
.guide-wiki--full .guide-wiki-link { border-bottom: 1px solid var(--border-main); }
.guide-wiki-sections .site-chart-card { margin: 0; }
.guide-wiki--skill-only .guide-wiki-sections {
  border-top: 0;
  padding-top: 1rem;
}

.guide-wiki-art {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 8px;
  background: var(--bg-subcard);
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--guide-accent, #38BDF8) 20%, transparent), transparent 68%),
    var(--bg-subcard);
}

.guide-wiki-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8%;
}

.guide-wiki-body h3 {
  margin: 0;
  color: var(--text-main);
  font-size: 1.15rem;
  font-weight: 850;
  letter-spacing: -0.02em;
}

.guide-wiki-facts {
  margin: 0.25rem 0 0;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.guide-wiki-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 0.7rem 0;
}

.guide-wiki-stats div {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.guide-wiki-stats dt {
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.guide-wiki-stats dd {
  margin: 0;
  color: var(--text-main);
  font-size: 0.8rem;
  font-weight: 750;
}

/* TC */

.guide-tc {
  margin: 0;
  padding: 1.1rem 1.15rem 1rem;
  border: 1px solid var(--border-main);
  border-radius: 9px;
  background: var(--bg-card);
}

.guide-tc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
}

.guide-tc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.25rem 0 0.7rem;
}

.guide-tc-tabs button {
  height: 28px;
  padding: 0 0.6rem;
  border: 1px solid var(--border-main);
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

.guide-tc-tabs button:hover { color: var(--text-main); border-color: var(--text-dim); }
.guide-tc-tabs button.is-active { background: var(--c-yellow); border-color: var(--c-yellow); color: #16130a; }

.guide-tc-scroll {
  overflow: auto;
  max-height: 78vh;
  padding: 0.75rem;
  border: 1px dashed var(--border-main);
  border-radius: 8px;
  background: var(--bg-nav);
}

.guide-tc-scroll > .tc-export-canvas {
  width: max-content;
  min-width: 980px;
}

/* --- Lightbox ------------------------------------------------------------- */

.guide-lightbox {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(4, 8, 12, 0.94);
  cursor: zoom-out;
}

.guide-lightbox img {
  max-width: min(1200px, 94vw);
  max-height: 90vh;
  object-fit: contain;
  border-radius: 6px;
}

.guide-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-main);
  border-radius: 50%;
  background: var(--bg-card);
  color: var(--text-main);
  font-size: 1.1rem;
  cursor: pointer;
}

/* --- Modals --------------------------------------------------------------- */

body.guide-modal-open { overflow: hidden; }

.guide-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(3, 6, 10, 0.78);
  backdrop-filter: blur(3px);
}

.guide-modal {
  display: flex;
  flex-direction: column;
  width: min(680px, 100%);
  max-height: min(88vh, 900px);
  overflow: hidden;
  border: 1px solid var(--border-main);
  border-radius: 12px;
  background: var(--bg-card);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}

.guide-modal--wide { width: min(920px, 100%); }

.guide-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--border-main);
}

.guide-modal-head h2 {
  margin: 0;
  color: var(--text-main);
  font-size: 1.1rem;
  font-weight: 850;
  letter-spacing: -0.01em;
}

.guide-icon-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border-main);
  border-radius: 6px;
  background: var(--bg-subcard);
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
}

.guide-icon-btn:hover { color: var(--text-main); border-color: var(--text-dim); }

.guide-modal-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 1.15rem;
}

.guide-modal-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.9rem 1.15rem;
  border-top: 1px solid var(--border-main);
}

.guide-modal-actions .site-btn {
  font-family: inherit;
  letter-spacing: 0;
  text-transform: none;
}

.guide-modal-actions .guide-button { margin-left: auto; }

/* --- Media picker --------------------------------------------------------- */

.guide-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 180px;
  padding: 1.5rem;
  border: 1px dashed var(--border-main);
  border-radius: 9px;
  background: var(--bg-subcard);
  text-align: center;
  cursor: pointer;
  transition: border-color 150ms var(--ease-out), background-color 150ms var(--ease-out);
}

.guide-dropzone.is-over {
  border-color: var(--c-yellow);
  background: color-mix(in srgb, var(--c-yellow) 8%, var(--bg-subcard));
}

.guide-dropzone-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border-main);
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 1.3rem;
}

.guide-dropzone p { margin: 0; color: var(--text-muted); font-size: 0.86rem; }
.guide-dropzone strong { color: var(--text-main); }
.guide-linkish {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-cyan);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.guide-media-preview {
  margin-top: 1rem;
  border: 1px solid var(--border-main);
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}

.guide-media-preview img,
.guide-media-preview video { display: block; width: 100%; max-height: 300px; object-fit: contain; }

.guide-media-facts {
  margin-top: 0.5rem;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
}

.guide-media-status {
  min-height: 1.2rem;
  margin-top: 0.7rem;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.guide-media-repair-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 56vh;
  overflow: auto;
  margin-top: 0.75rem;
}
.guide-media-repair {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border-main);
  border-radius: 8px;
  background: var(--bg-subcard);
}
.guide-media-repair-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.guide-media-repair-url {
  max-width: 58ch;
  overflow: hidden;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.guide-media-repair-status {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
}
.guide-media-repair-status.is-ok { color: var(--c-green); }
.guide-media-repair-status.is-missing { color: #F87171; }

.guide-progress {
  height: 4px;
  margin-top: 0.4rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--border-main);
}

.guide-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--c-yellow);
  transition: width 120ms linear;
}

.guide-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0 0 0.85rem;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.guide-field input,
.guide-field textarea,
.guide-field select,
.guide-modal input[type="text"],
.guide-modal input[type="search"],
.guide-modal input[type="number"],
.guide-modal select {
  width: 100%;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border-main);
  border-radius: 7px;
  outline: 0;
  background: var(--bg-main);
  color: var(--text-main);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 400;
}

.guide-field input:focus,
.guide-field textarea:focus,
.guide-field select:focus,
.guide-modal input:focus,
.guide-modal select:focus {
  border-color: var(--c-cyan);
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.18);
}

.guide-field textarea { resize: vertical; min-height: 78px; }

.guide-check {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0.5rem 0;
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.45;
  cursor: pointer;
}

.guide-check input { margin-top: 0.18rem; accent-color: var(--c-yellow); }

.guide-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0 0.85rem;
}

/* --- Editor --------------------------------------------------------------- */

.guide-editor {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 80vh;
}

.guide-editor-topbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border-main);
  border-radius: 10px;
  background: var(--bg-card);
}

.guide-editor-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 1px solid var(--border-main);
  border-radius: 7px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 1rem;
}

.guide-editor-back:hover { color: var(--text-main); border-color: var(--text-dim); }

.guide-editor-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1;
  min-width: 0;
}

.guide-editor-title {
  width: 100%;
  min-width: 0;
  padding: 0.25rem 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-main);
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 850;
  letter-spacing: -0.02em;
}

.guide-editor-title::placeholder { color: var(--text-dim); }

.guide-status {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 0.45rem;
  flex: 0 0 auto;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.guide-status.is-draft { background: var(--bg-hover); color: var(--text-muted); }
.guide-status.is-wip { background: var(--c-yellow); color: #16130a; }
.guide-status.is-published { background: var(--c-green); color: #04130a; }

.guide-editor-top-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
}

.guide-editor-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 0.75rem;
  border: 1px solid var(--border-main);
  border-radius: 7px;
  background: var(--bg-subcard);
  color: var(--text-main);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}

.guide-editor-btn::-webkit-details-marker { display: none; }
.guide-editor-btn:hover { border-color: var(--c-cyan); }
.guide-editor-btn.guide-primary { background: var(--c-yellow); border-color: var(--c-yellow); color: #16130a; }
.guide-editor-btn:disabled { opacity: 0.55; cursor: progress; }

.guide-editor-menu { position: relative; }
.guide-editor-menu-panel {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  min-width: 170px;
  padding: 0.3rem;
  border: 1px solid var(--border-main);
  border-radius: 8px;
  background: var(--bg-card);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.guide-editor-menu-panel button,
.guide-editor-menu-panel a,
.guide-menu-file {
  display: block;
  padding: 0.45rem 0.55rem;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.78rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.guide-editor-menu-panel button:hover,
.guide-editor-menu-panel a:hover,
.guide-menu-file:hover { background: var(--bg-hover); color: var(--text-main); }
.guide-editor-menu-panel .is-danger { color: #F87171; }

.guide-editor-restore {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid color-mix(in srgb, var(--c-yellow) 55%, var(--border-main));
  border-radius: 8px;
  background: color-mix(in srgb, var(--c-yellow) 8%, var(--bg-card));
  color: var(--text-muted);
  font-size: 0.8rem;
}

.guide-editor-grid {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.guide-editor-meta {
  position: sticky;
  top: 86px;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  max-height: calc(100vh - 110px);
  overflow: auto;
  padding: 1rem;
  border: 1px solid var(--border-main);
  border-radius: 10px;
  background: var(--bg-card);
}

.guide-meta-group { padding-bottom: 0.75rem; border-bottom: 1px solid var(--border-main); }
.guide-meta-group:last-of-type { border-bottom: 0; padding-bottom: 0; }
.guide-meta-group .guide-field { margin-bottom: 0; }
.guide-field-label {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.guide-cover-field {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px dashed var(--border-main);
  border-radius: 7px;
  background: var(--bg-subcard);
  color: var(--text-dim);
  font-size: 0.75rem;
}

.guide-cover-field img { width: 100%; height: 100%; object-fit: cover; }
.guide-cover-actions { display: flex; gap: 0.8rem; margin-top: 0.35rem; }

.guide-meta-details {
  border-top: 1px solid var(--border-main);
  padding-top: 0.7rem;
}

.guide-meta-details summary {
  margin-bottom: 0.55rem;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 750;
  cursor: pointer;
}

.guide-editor-tip {
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--border-main);
  border-left: 2px solid var(--c-cyan);
  border-radius: 6px;
  background: var(--bg-subcard);
}

.guide-editor-tip p { margin: 0 0 0.35rem; color: var(--text-muted); font-size: 0.75rem; line-height: 1.5; }
.guide-editor-tip p:last-child { margin-bottom: 0; }
.guide-editor-tip strong { color: var(--text-main); }

.guide-editor-workspace {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--border-main);
  border-radius: 10px;
  background: var(--bg-card);
  overflow: hidden;
}

.guide-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  padding: 0.45rem 0.55rem;
  border-bottom: 1px solid var(--border-main);
  background: var(--bg-subcard);
}

.guide-toolbar-group {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding-right: 0.35rem;
  border-right: 1px solid var(--border-main);
}

.guide-toolbar-group:last-of-type { border-right: 0; }

.guide-toolbar-group button {
  min-width: 30px;
  height: 28px;
  padding: 0 0.42rem;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 750;
  cursor: pointer;
}

.guide-toolbar-group button:hover { background: var(--bg-hover); color: var(--text-main); }
.guide-toolbar-group button:focus-visible { outline: 2px solid var(--c-cyan); outline-offset: 1px; }

.guide-toolbar-insert { position: relative; }
.guide-toolbar-insert-btn { border-color: var(--border-main) !important; color: var(--text-main) !important; }

.guide-insert-menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 190px;
  padding: 0.3rem;
  border: 1px solid var(--border-main);
  border-radius: 8px;
  background: var(--bg-card);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.guide-insert-menu[hidden] { display: none; }
.guide-insert-menu button {
  padding: 0.45rem 0.55rem;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.78rem;
  text-align: left;
  cursor: pointer;
}

.guide-insert-menu button:hover { background: var(--bg-hover); color: var(--text-main); }

.guide-editor-modes {
  display: flex;
  gap: 0.15rem;
  margin-left: auto;
  padding: 0.15rem;
  border: 1px solid var(--border-main);
  border-radius: 6px;
}

.guide-editor-modes button {
  height: 24px;
  padding: 0 0.45rem;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 750;
  cursor: pointer;
}

.guide-editor-modes button.is-active { background: var(--bg-hover); color: var(--text-main); }

.guide-editor-panes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 520px;
  height: calc(100vh - 310px);
}

.guide-editor-panes[data-mode="write"] { grid-template-columns: minmax(0, 1fr); }
.guide-editor-panes[data-mode="write"] .guide-editor-preview { display: none; }
.guide-editor-panes[data-mode="preview"] { grid-template-columns: minmax(0, 1fr); }
.guide-editor-panes[data-mode="preview"] .guide-editor-write { display: none; }

.guide-editor-write { display: flex; min-width: 0; border-right: 1px solid var(--border-main); }
.guide-editor-panes[data-mode="preview"] .guide-editor-write,
.guide-editor-panes[data-mode="preview"] .guide-editor-preview { border-right: 0; }

.guide-editor-textarea {
  width: 100%;
  height: 100%;
  min-height: 100%;
  padding: 1rem 1.1rem 3rem;
  border: 0;
  outline: 0;
  resize: none;
  background: var(--bg-main);
  color: var(--text-main);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  line-height: 1.7;
  tab-size: 2;
  caret-color: var(--c-yellow);
}

.guide-editor-textarea::placeholder { color: var(--text-dim); }

.guide-editor-preview {
  overflow: auto;
  padding: 1rem 1.25rem 3rem;
  background: var(--bg-dark);
}

.guide-editor-preview .guide-body { max-width: none; font-size: 0.9rem; }
.guide-editor-preview .guide-body h2 { margin-top: 1.6rem; }

.guide-editor-statusbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.45rem 0.75rem;
  border-top: 1px solid var(--border-main);
  background: var(--bg-subcard);
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
}

.guide-editor-shortcuts { margin-left: auto; }

/* --- Login ---------------------------------------------------------------- */

.guide-login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 62vh;
}

.guide-login-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: min(430px, 100%);
  padding: 1.6rem;
  border: 1px solid var(--border-main);
  border-top: 3px solid var(--c-yellow);
  border-radius: 10px;
  background: var(--bg-card);
}

.guide-login-card h1 { margin: 0; font-size: 1.45rem; font-weight: 900; letter-spacing: -0.03em; }
.guide-login-card p { margin: 0; color: var(--text-muted); font-size: 0.86rem; line-height: 1.55; }
.guide-login-actions { display: flex; align-items: center; gap: 1rem; margin-top: 0.25rem; }
.guide-login-error { color: #F87171; min-height: 1.1rem; }

/* --- Picker lists --------------------------------------------------------- */

.guide-picker-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-height: 46vh;
  overflow: auto;
  padding: 0.15rem;
}

.guide-picker-skill-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 0.15rem 0.35rem;
  border-bottom: 1px solid var(--border-main);
  margin-bottom: 0.15rem;
}

.guide-picker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0.55rem 0.65rem;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text-main);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.guide-picker-row:hover { background: var(--bg-subcard); border-color: var(--border-main); }
.guide-picker-row:focus-visible { outline: 2px solid var(--c-cyan); outline-offset: 1px; }
.guide-picker-row.is-selected {
  border-color: var(--c-cyan);
  background: color-mix(in srgb, var(--c-cyan) 10%, var(--bg-card));
}
.guide-picker-row.is-selected .guide-picker-metric { color: var(--c-cyan); }

.guide-element-section { margin-top: 1rem; }
.guide-element-section .guide-kicker { margin-bottom: 0.5rem; }
.guide-element-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.5rem;
}
.guide-element-btn {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border-main);
  border-radius: 7px;
  background: var(--bg-card);
  color: var(--text-main);
  text-align: left;
  cursor: pointer;
}
.guide-element-btn:hover {
  border-color: var(--c-cyan);
  background: var(--bg-subcard);
}
.guide-element-btn strong { font-size: 0.8rem; font-weight: 750; }
.guide-element-btn span { color: var(--text-dim); font-size: 0.68rem; }

.guide-picker-main { display: flex; flex-direction: column; min-width: 0; gap: 0.1rem; }
.guide-picker-main strong { font-size: 0.84rem; font-weight: 750; }
.guide-picker-main span { color: var(--text-dim); font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.guide-picker-metric { flex: 0 0 auto; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; }
.guide-picker-metric strong { color: var(--c-yellow); }

.guide-picker-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 0.7rem;
}

.guide-picker-tabs button {
  height: 30px;
  padding: 0 0.65rem;
  border: 1px solid var(--border-main);
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
}

.guide-picker-tabs button.is-active { background: var(--c-cyan); border-color: var(--c-cyan); color: #04121a; }

.guide-search--modal { max-width: none; margin-bottom: 0.75rem; }

.guide-tc-picker-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 42vh;
  overflow: auto;
  margin-bottom: 0.8rem;
}

.guide-tc-picker-row {
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border-main);
  border-radius: 7px;
  background: var(--bg-subcard);
}

.guide-tc-picker-row > span { display: flex; flex-direction: column; gap: 0.1rem; }
.guide-draft-list { display: flex; flex-direction: column; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.guide-draft-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border-main);
  border-radius: 7px;
  background: var(--bg-subcard);
}
.guide-draft-row > div { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.guide-draft-row strong { font-size: 0.84rem; }
.guide-draft-meta { display: flex; align-items: center; gap: 0.35rem; color: var(--text-dim); font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; }
.guide-draft-status {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 0.35rem;
  border-radius: 3px;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.guide-draft-status.is-draft { background: var(--bg-hover); color: var(--text-muted); }
.guide-draft-status.is-wip { background: var(--c-yellow); color: #16130a; }
.guide-draft-status.is-published { background: var(--c-green); color: #04130a; }
.guide-draft-actions { display: flex; align-items: center; gap: 0.35rem; flex: 0 0 auto; }
.guide-text-btn.is-danger { color: #F87171; }

/* --- Preview modal -------------------------------------------------------- */

.guide-preview-modal { width: min(1040px, 100%); }
.guide-preview-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 1.25rem 1.5rem 3rem;
  background: var(--bg-dark);
}
.guide-preview-body .guide-article { width: 100%; }

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1100px) {
  .guide-editor-grid { grid-template-columns: 240px minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .guide-hub-hero { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .guide-hub-actions { justify-content: flex-start; }
  .guide-feature { grid-template-columns: minmax(0, 1fr); }
  .guide-feature-cover { min-height: 190px; }
  .guide-feature-cover .guide-cover { min-height: 190px; }
  .guide-layout.has-toc { grid-template-columns: minmax(0, 1fr); }
  .guide-toc { display: none; }
  .guide-editor-grid { grid-template-columns: minmax(0, 1fr); }
  .guide-editor-meta {
    position: static;
    max-height: none;
    order: 2;
  }
  .guide-editor-workspace { order: 1; }
  .guide-editor-panes { height: auto; min-height: 60vh; }
  .guide-editor-topbar { flex-wrap: wrap; }
  .guide-editor-title-wrap { order: 3; width: 100%; flex-basis: 100%; }
  .guide-editor-top-actions { margin-left: auto; }
}

@media (max-width: 700px) {
  .guide-hub-copy h1 { font-size: clamp(2.4rem, 12vw, 3.6rem); }
  .guide-toolbar { align-items: stretch; }
  .guide-search { max-width: none; flex-basis: 100%; }
  .guide-sort { margin-left: 0; }
  .guide-results { grid-template-columns: minmax(0, 1fr); }
  .guide-feature-body { padding: 1.1rem; }
  .guide-article-head h1 { font-size: clamp(2.1rem, 10vw, 3.1rem); }
  .guide-hero-cover { aspect-ratio: 16 / 10; }
  .guide-body { font-size: 0.95rem; }
  .guide-wiki-link { grid-template-columns: 84px minmax(0, 1fr); }
  .guide-run-head { flex-direction: column; gap: 0.4rem; }
  .guide-run-dps { align-items: flex-start; }
  .guide-run-compact-link { flex-wrap: wrap; gap: 0.6rem; }
  .guide-run--compact .guide-run-actors { flex-wrap: wrap; }
  .guide-run--compact .guide-run-dps { margin-left: 0; }
  .guide-wiki-stats { gap: 0.4rem 0.8rem; }
  .guide-editor-top-actions { flex-wrap: wrap; }
  .guide-editor-btn { padding: 0 0.55rem; }
  .guide-editor-panes { grid-template-columns: minmax(0, 1fr); }
  .guide-editor-panes[data-mode="split"] .guide-editor-preview { display: none; }
  .guide-editor-textarea { min-height: 55vh; }
  .guide-editor-shortcuts { display: none; }
  .guide-modal-overlay { padding: 0.5rem; }
  .guide-modal { max-height: 94vh; }

  /* iOS Safari zooms the page when a focused control is below 16px. */
  .guide-editor-textarea,
  .guide-field input,
  .guide-field textarea,
  .guide-field select,
  .guide-modal input[type="text"],
  .guide-modal input[type="search"],
  .guide-modal input[type="number"],
  .guide-modal select,
  .guide-editor-title {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .guide-spinner { animation-duration: 1.8s; }
  .guide-feature,
  .guide-card,
  .guide-button { transition: none; }
}

/* ---- css/lab.css ---- */
/* ---------------------------------------------------------------------------
   Loadout Lab (js/loadoutLab.js): the TC tab's default view, built on the
   wiki's primitives in refresh.css (wiki-page, wiki-head, wiki-cats,
   wiki-search, wiki-rtab, wiki-stat, wiki-bonus); only the Lab's own pieces
   are here.
   --------------------------------------------------------------------------- */
/* One spacing scale: sections sit --wiki-gap apart (the page's own gap, also
   inside #loadout-lab-body, which was a plain block whose cards touched), and
   every card grid or list inside a section uses --lab-card-gap. */
.lab-page { --lab-card-gap: 0.6rem; }
#loadout-lab-body { display: flex; flex-direction: column; gap: var(--wiki-gap, 1.15rem); }
#loadout-lab-body:empty { display: none; }

/* The Lab / Create Graphics switch is both views' title, top left of the page. */
.lab-head { display: flex; justify-content: flex-start; }
.lab-views { display: inline-flex; gap: 0.3rem; padding: 0.25rem; border: 1px solid var(--border-main); border-radius: 11px; background-color: var(--bg-card); }
.lab-views .wiki-rtab { padding: 0.45rem 0.95rem; font-size: 0.86rem; font-weight: 800; cursor: pointer; }
.lab-muted { color: var(--text-muted); font-size: 0.8rem; }
.lab-error { color: var(--c-red); font-size: 0.82rem; font-weight: 700; }
.lab-empty { padding: 2.5rem 1rem; border: 1px dashed var(--border-main); border-radius: 12px; color: var(--text-muted); text-align: center; }
.lab-section { display: flex; flex-direction: column; gap: var(--lab-card-gap); }
.lab-section-head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.lab-section-title { color: var(--text-muted); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }

/* Run search */
/* .wiki-search's flex basis is a width in the wiki's toolbar row; in this
   column it would be the height. */
.lab-run-search { flex: 0 0 auto; width: 100%; max-width: 520px; }
.lab-run-search input,
.lab-picker-search input { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; outline: 0; box-shadow: none; background: transparent; color: var(--text-main); font: inherit; font-size: 0.86rem; }
.lab-run-current { color: var(--text-main); font-size: 0.86rem; font-weight: 700; }
.lab-run-list { display: flex; flex-direction: column; max-width: 640px; border: 1px solid var(--border-main); border-radius: 12px; overflow: hidden; background-color: var(--bg-card); }
.lab-run-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.45rem 0.7rem; border: 0; border-top: 1px solid var(--border-main); background: transparent; color: var(--text-main); font: inherit; text-align: left; cursor: pointer; }
.lab-run-row:first-child { border-top: 0; }
.lab-run-row:hover { background-color: var(--bg-hover); }
.lab-run-team { display: flex; gap: 4px; flex: 0 0 auto; }
.lab-run-unit { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.lab-run-art { position: relative; display: block; width: 28px; height: 28px; }
.lab-run-face { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; background-color: var(--bg-subcard); }
/* The W-Engine sits on the face's corner, as on the leaderboard rows. */
.lab-run-engine { position: absolute; right: -4px; bottom: -4px; width: 16px; height: 16px; border-radius: 4px; object-fit: cover; background-color: var(--bg-card); box-shadow: 0 0 0 1px var(--border-main); }
.lab-run-mr { color: var(--text-muted); font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; line-height: 1.2; white-space: nowrap; }
.lab-run-text { display: flex; flex: 1; flex-direction: column; min-width: 0; overflow: hidden; }
.lab-run-names,
.lab-run-engines { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lab-run-names { font-size: 0.84rem; font-weight: 700; }
.lab-run-engines { color: var(--text-muted); font-size: 0.72rem; }
.lab-run-meta { display: flex; flex-direction: column; align-items: flex-end; flex: 0 0 auto; }
.lab-run-score { color: var(--text-main); font-family: 'JetBrains Mono', monospace; font-size: 0.76rem; font-weight: 700; }
.lab-run-date { color: var(--text-muted); font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; }

/* Agent row */
.lab-agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--lab-card-gap); }
.lab-agent { display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto; column-gap: 0.7rem; align-items: center; padding: 0.55rem; border: 1px solid var(--border-main); border-radius: 12px; background-color: var(--bg-card); color: var(--text-main); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.lab-agent:hover { background-color: var(--bg-hover); }
.lab-agent.is-active { border-color: var(--c-cyan); box-shadow: inset 0 0 0 1px var(--c-cyan); }
.lab-agent-art { position: relative; display: block; grid-row: 1 / 3; width: 52px; height: 52px; }
.lab-agent-face { display: block; width: 52px; height: 52px; border-radius: 10px; object-fit: cover; background-color: var(--bg-subcard); }
/* Unreleased Agents and gear: a yellow tag in the art's top-right corner. */
.lab-beta { position: absolute; top: 4px; right: 4px; z-index: 1; padding: 0 0.28rem; border-radius: 4px; background-color: #FACC15; color: #1A1408; font-size: 0.56rem; font-weight: 800; letter-spacing: 0.04em; line-height: 1.5; pointer-events: none; }
.lab-agent-name { overflow: hidden; font-size: 0.84rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.lab-agent-share { color: var(--text-muted); font-size: 0.72rem; }

/* Build slots */
.lab-build { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--lab-card-gap); }
.lab-slot { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.6rem; border: 1px solid var(--border-main); border-radius: 12px; background-color: var(--bg-card); }
.lab-slot.is-open { border-color: var(--c-cyan); }
.lab-slot.is-changed .lab-slot-label { color: var(--c-cyan); }
.lab-slot-main { display: flex; align-items: center; gap: 0.75rem; padding: 0; border: 0; background: transparent; color: var(--text-main); font: inherit; text-align: left; cursor: pointer; }
.lab-slot-art { position: relative; display: inline-flex; flex: 0 0 64px; width: 64px; height: 64px; align-items: center; justify-content: center; border-radius: 10px; background-color: var(--bg-subcard); overflow: hidden; }
.lab-slot-img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.lab-slot-art.is-disc .lab-slot-img { padding: 6%; }
.lab-slot-text { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 0.15rem; }
.lab-slot-label { color: var(--text-muted); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.lab-slot-name { font-size: 0.92rem; font-weight: 800; line-height: 1.2; }
.lab-slot-caret { color: var(--text-muted); font-size: 0.8rem; }
.lab-rtabs { gap: 0.3rem; }
.lab-rtabs .wiki-rtab { flex: 1; padding: 0.3rem 0; }

/* Picker */
.lab-picker { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.9rem; border: 1px solid var(--border-main); border-radius: 12px; background-color: var(--bg-card); }
.lab-picker-head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.lab-picker-title { font-size: 1rem; font-weight: 800; }
.lab-picker-search { flex: 0 1 220px; min-width: 150px; height: 34px; margin-left: auto; background-color: var(--bg-subcard); }
.lab-picker-note { font-size: 0.74rem; }
/* Statstick: every specialty in the W-Engine picker; an off-class item is
   tagged and its passive is inactive. */
.lab-flag.lab-statstick { border-color: rgba(56, 189, 248, 0.45); color: var(--c-cyan); }
.lab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: 0.75rem 0.6rem; max-height: 30rem; overflow-y: auto; padding: 0.15rem; }
.lab-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.4rem 0.3rem 0.5rem; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--text-main); font: inherit; cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.lab-tile:hover { background-color: var(--bg-hover); }
.lab-tile.is-active { border-color: var(--c-cyan); background-color: rgba(56, 189, 248, 0.08); }
.lab-tile-art { position: relative; display: flex; width: 100%; aspect-ratio: 1 / 1; align-items: center; justify-content: center; border-radius: 10px; background-color: var(--bg-subcard); overflow: hidden; }
.lab-tile-img { width: 100%; height: 100%; object-fit: contain; padding: 10%; }
.lab-tile-art.is-disc .lab-tile-img { padding: 8%; }
.lab-tile-none { color: var(--text-dim); font-size: 1.4rem; }
.lab-tile-rarity { position: absolute; top: 5px; left: 5px; padding: 0 0.3rem; border-radius: 5px; background-color: rgba(0, 0, 0, 0.55); color: #fff; font-size: 0.62rem; font-weight: 800; }
.lab-tile-rarity.is-S { color: #fbbf24; }
.lab-tile-rarity.is-A { color: #c084fc; }
.lab-tile-name { display: -webkit-box; overflow: hidden; font-size: 0.74rem; font-weight: 700; line-height: 1.2; text-align: center; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.lab-tile-delta { color: var(--text-muted); font-family: 'JetBrains Mono', monospace; font-size: 0.74rem; font-weight: 700; }
.lab-tile-tag { position: absolute; top: 9px; right: 9px; padding: 0 0.3rem; border-radius: 5px; background-color: var(--c-cyan); color: #04121A; font-size: 0.6rem; font-weight: 800; text-transform: uppercase; }
.lab-tile-flags { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2rem; }
.lab-flag { border-color: rgba(251, 146, 60, 0.45); color: var(--c-orange); font-size: 0.64rem; }
.lab-tile-delta.is-up,
.lab-saved-num .is-up { color: var(--c-green, #4ade80); }
.lab-tile-delta.is-down,
.lab-saved-num .is-down { color: var(--c-orange); }

/* Substats */
.lab-subs-total { color: var(--text-muted); font-family: 'JetBrains Mono', monospace; font-size: 0.76rem; }
.lab-subs-total.is-off { color: var(--c-orange); }
.lab-subs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: var(--lab-card-gap); }
.lab-sub span { min-height: 0; }
.lab-sub.is-changed { border-color: var(--c-cyan); }
.lab-sub-row { display: flex; align-items: center; justify-content: space-between; gap: 0.3rem; margin-top: 0.3rem; }
.lab-sub-row strong { margin: 0; font-size: 1rem; }
.lab-sub em,
.lab-strip em { display: block; margin-top: 0.15rem; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; font-style: normal; }
.lab-step { width: 26px; height: 26px; border: 1px solid var(--border-main); border-radius: 7px; background-color: var(--bg-card); color: var(--text-main); font: inherit; font-weight: 800; line-height: 1; cursor: pointer; }
.lab-step:hover:not(:disabled) { border-color: var(--c-cyan); color: var(--c-cyan); }
.lab-step:disabled { opacity: 0.35; cursor: default; }

/* Result */
.lab-strip { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--lab-card-gap); }
.lab-strip strong { font-size: 1.2rem; }
.lab-strip .wiki-stat span { min-height: 0; }
.lab-delta.is-up strong { color: var(--c-green, #4ade80); }
.lab-delta.is-down strong { color: var(--c-orange); }
.lab-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.lab-notes { color: var(--text-muted); font-size: 0.76rem; }
.lab-notes summary { cursor: pointer; }
.lab-notes ul { margin: 0.35rem 0 0; padding-left: 1.1rem; line-height: 1.5; }
.lab-conversions { font-size: 0.8rem; }
.lab-conversions ul { margin: 0.25rem 0 0; padding-left: 1.1rem; line-height: 1.5; }
.lab-actions { display: flex; flex-wrap: wrap; gap: var(--lab-card-gap); }
.lab-btn { height: 36px; padding: 0 1rem; border: 1px solid var(--border-main); border-radius: 9px; background-color: var(--bg-card); color: var(--text-main); font: inherit; font-size: 0.84rem; font-weight: 800; cursor: pointer; }
.lab-btn:hover { background-color: var(--bg-hover); }
.lab-btn.is-primary { border-color: transparent; background-color: var(--c-cyan); color: #04121A; }
.lab-btn.is-primary:hover { filter: brightness(1.08); }
.lab-link { padding: 0; border: 0; background: transparent; color: var(--c-cyan); font: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer; }
.lab-link:disabled { color: var(--text-dim); cursor: default; }
.lab-link.is-quiet { color: var(--text-muted); }
/* Button text is lowercase mono, like the site's other buttons (site-btn). */
.lab-btn,
.lab-link,
.lab-page .wiki-rtab,
.lab-views .wiki-rtab { font-family: 'JetBrains Mono', monospace; text-transform: lowercase; }

/* Saved results */
.lab-saved-row { display: grid; grid-template-columns: 40px 1fr auto auto; align-items: center; gap: 0.75rem; padding: 0.55rem 0.7rem; border: 1px solid var(--border-main); border-radius: 12px; background-color: var(--bg-card); }
.lab-saved-face { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background-color: var(--bg-subcard); }
.lab-saved-text { min-width: 0; }
.lab-saved-title { overflow: hidden; font-size: 0.86rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.lab-saved-sub { overflow: hidden; color: var(--text-muted); font-size: 0.72rem; text-overflow: ellipsis; white-space: nowrap; }
.lab-saved-num { display: flex; flex-direction: column; align-items: flex-end; font-family: 'JetBrains Mono', monospace; font-size: 0.86rem; font-weight: 800; }
.lab-saved-num span { font-size: 0.72rem; }
.lab-saved-actions { display: flex; gap: 0.8rem; }
/* The line under a result an admin sent To wiki (its whole row width). */
.lab-saved-wiki { grid-column: 1 / -1; color: var(--text-muted); font-size: 0.72rem; }
.lab-saved-wiki.is-error { color: var(--c-red); }
/* Admins: the build optimiser under the result strip (js/lab-optimise.js). */
.lab-optimise { display: grid; gap: 0.4rem; margin-top: var(--lab-card-gap); padding-top: var(--lab-card-gap); border-top: 1px dashed var(--border-main); }
.lab-optimise-status { color: var(--text-muted); font-size: 0.74rem; }
.lab-optimise-status.is-error { color: var(--c-red); }
.lab-optimised-tag { margin-left: 0.35rem; padding: 0 0.3rem; border: 1px solid rgba(56, 189, 248, 0.45); border-radius: 4px; color: var(--c-cyan); font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; vertical-align: middle; }

/* How it was priced, and Buff Modelling: collapsible trays. The padding sits
   on the summary (not the details) so its text and arrow are centred in the
   closed tray; a details element's children are not its flex items (they sit
   in its content slot), so the body is its own flex column. */
.lab-diag { gap: 0; padding: 0; border: 1px solid var(--border-main); border-radius: 12px; background-color: var(--bg-card); }
.lab-diag summary { display: flex; align-items: center; gap: 0.45rem; min-height: 3.4rem; padding: 0 0.9rem; color: var(--text-muted); font-size: 0.8rem; font-weight: 800; line-height: 1.2; cursor: pointer; list-style: none; }
.lab-diag summary::-webkit-details-marker { display: none; }
.lab-diag summary::before { content: '▸'; font-size: 0.7rem; transition: transform var(--dur-fast) var(--ease-out); }
.lab-diag[open] summary::before { transform: rotate(90deg); }
.lab-diag-body { display: flex; flex-direction: column; gap: var(--lab-card-gap); padding: 0 0.9rem 0.9rem; }
.lab-diag .table-wrapper { margin: 0; }
.lab-pt td:first-child,
.lab-pt th:first-child { text-align: left; }
/* Buff Modelling (js/parseDaBuffs.js) in its tray. */
.lab-buff-tray .da-mode-toggle.seg-sm { align-self: flex-start; margin: 0; }
#lab-buff-body { display: flex; flex-direction: column; gap: var(--lab-card-gap); min-width: 0; }
#lab-buff-body > #da-mode-panel > :first-child { margin-top: 0 !important; }

/* Run cards (js/app.js runLabButtonsHtml): open in the Lab */
.run-lab-actions { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }
.run-lab-btn { display: inline-flex; align-items: center; gap: 0.3rem; height: 24px; padding: 0 0.5rem; border: 1px solid var(--border-main); border-radius: 6px; background-color: var(--bg-subcard); color: var(--text-muted); font: inherit; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.02em; cursor: pointer; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.run-lab-btn:hover { border-color: var(--c-cyan); color: var(--c-cyan); }
.run-lab-btn.is-lab { color: var(--c-cyan); }
.run-lab-btn svg { flex: none; }

@media (max-width: 640px) {
  .lab-saved-row { grid-template-columns: 40px 1fr auto; }
  .lab-saved-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .lab-picker-search { margin-left: 0; flex-basis: 100%; }
  .lab-grid { grid-template-columns: repeat(auto-fill, minmax(5.6rem, 1fr)); }
}

/* Main stats (discs 4-6) */
.lab-mains-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--lab-card-gap); }
.lab-main { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.55rem 0.6rem; border: 1px solid var(--border-main); border-radius: 10px; background-color: var(--bg-card); }
.lab-main-slot { color: var(--text-muted); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.lab-main-opts { flex-wrap: wrap; gap: 0.3rem; }
.lab-main-opts .wiki-rtab { padding: 0.28rem 0.5rem; font-size: 0.74rem; }
.lab-main-opts .wiki-rtab.is-run:not(.is-active) { border-style: dashed; }