@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@400;500;600&display=swap');

:root {
  /* Backgrounds — Decision 017 palette */
  --bg-page: #f4efe6;
  --bg-card: #faf8f3;
  --bg-inset: #f0ebe1;
  --bg-hover: #ffffff;

  /* Accent and header */
  --accent-header: #3d2e5a;
  --accent-nav-active: #5c4a82;
  --accent-nav-text: #8b7d6b;

  /* Borders and framing */
  --border-panel: #d4c9b8;
  --border-ornament: #c4b5a0;
  --border-subtle: #e8e0d2;

  /* Text */
  --text-primary: #2c2416;
  --text-secondary: #5a4d3d;
  --text-tertiary: #8b7d6b;

  /* Tier colors (purple family) */
  --tier-top: #3d2e5a;
  --tier-mid: #5c4a82;
  --tier-low: #7d6ea8;

  --radius: 8px;
  --radius-lg: 12px;
  --sidebar-width: 280px;
}

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

body {
  background: var(--bg-page) url('../assets/parchment.jpg');
  background-size: 900px auto;
  background-repeat: repeat;
  background-attachment: fixed;
  background-blend-mode: multiply;
  color: var(--text-primary);
  font-family: 'Crimson Text', Georgia, serif;
  font-size: 16px;
  line-height: 1.55;
  min-height: 100vh;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-inset); }
::-webkit-scrollbar-thumb { background: var(--border-panel); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-ornament); }

/* ── SITE HEADER + NAV ── */
.site-header {
  background: var(--accent-header);
  border-bottom: 2px solid var(--border-ornament);
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0 2.5rem;
}

.site-header-inner {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.7rem;
  padding: 0.85rem 0 0.4rem;
  position: relative;
}

.brand-pf2e {
  font-family: 'Cinzel', serif;
  font-size: 3.4rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.03em;
  line-height: 1;
  align-self: center;
}

.brand-stack {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  /* Match the cap-height-ish span of PF2E (~3.4rem * 0.72) */
  min-height: 2.6rem;
  padding: 0.15rem 0;
}

.brand-spell-planner {
  font-family: 'Cinzel', serif;
  font-size: 1.7rem;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.brand-tagline {
  font-family: 'Crimson Text', serif;
  font-size: 0.88rem;
  font-style: italic;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.04em;
  line-height: 1;
  /* Shift up so descenders sit at/above PF2E's bottom edge instead of dropping below it */
  margin-bottom: 0.3rem;
}

.site-mark {
  font-size: 2.8rem;
  line-height: 1;
  align-self: center;
  margin-left: 0.4rem;
  filter: drop-shadow(0 0 12px rgba(180, 150, 230, 0.85))
          drop-shadow(0 0 4px rgba(220, 200, 255, 0.6));
  user-select: none;
}

/* ── Header Utility Links ── */
.header-utility-links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: right;
  line-height: 1.8;
}

.header-utility-links a {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #b8aed4;
  text-decoration: none;
  transition: color 0.2s;
  cursor: pointer;
}

.header-utility-links a:hover {
  color: #ffffff;
}

.header-utility-links a.active {
  color: #ffffff;
}

.header-utility-links .external-indicator {
  font-size: 10px;
  opacity: 0.7;
}

.header-utility-links .utility-link-inert {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #b8aed4;
  opacity: 0.5;
  cursor: default;
}

.tab-bar {
  display: flex;
  justify-content: flex-start;
  gap: 0;
  padding: 0 0 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tab-btn {
  font-family: 'Cinzel', serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 0.5rem 1.1rem 0.45rem;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.04em;
  text-decoration: none;
  display: inline-block;
}

.tab-btn:hover { color: rgba(255,255,255,0.85); border-bottom-color: rgba(255,255,255,0.3); }
.tab-btn.active { color: #ffffff; border-bottom-color: #ffffff; }

/* ── BODY LAYOUT ── */
.body-layout {
  display: flex;
  min-height: calc(100vh - 80px);
}

/* ── SIDEBAR ── */
.sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  background: var(--bg-card);
  border-right: 1px solid var(--border-panel);
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: calc(100vh - 80px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}

/* Inner wrapper handles scrolling so corner ornaments on .sidebar.framed
   anchor to the visible bottom edge instead of the scrollable content end. */
.sidebar-inner {
  height: 100%;
  overflow-y: auto;
  padding: 1.4rem 0.85rem;
}

.sidebar-resize-handle {
  position: absolute;
  top: 0;
  right: -3px;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 50;
  background: transparent;
  transition: background 0.15s;
}

.sidebar-resize-handle:hover,
.sidebar-resize-handle.dragging {
  background: rgba(61, 46, 90, 0.15);
}

body.resizing-sidebar { cursor: col-resize; user-select: none; }

.sidebar-title {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent-header);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border-panel);
}

/* ── Coverage Hierarchy ── */

.cov-section {
  margin-bottom: 0.6rem;
}

.cov-section-header {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  padding: 0.25rem 0;
  border-left: 2px solid var(--accent-header);
  padding-left: 0.4rem;
  user-select: none;
}

.cov-section-label {
  font-family: 'Cinzel', serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cov-chevron {
  font-size: 0.6rem;
  color: var(--text-tertiary);
  transition: transform 0.2s;
  line-height: 1;
}

.cov-section.collapsed .cov-chevron {
  transform: rotate(-90deg);
}

.cov-section.collapsed .cov-section-body {
  display: none;
}

.cov-section-body {
  padding-left: 0.3rem;
  padding-top: 0.3rem;
}

.cov-group {
  margin-bottom: 0.5rem;
  padding-left: 0.5rem;
}

.cov-group-header {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.15rem;
}

.cov-group-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
}

.cov-subgroup {
  margin-top: 0.35rem;
  margin-bottom: 0.3rem;
}

.cov-subgroup-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-tertiary);
  letter-spacing: 0.03em;
  margin-bottom: 0.15rem;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.cov-info {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid var(--accent-nav-active);
  color: transparent;
  font-size: 0;
  cursor: help;
  transition: border-color 0.15s, background 0.15s;
  vertical-align: middle;
  position: relative;
  flex-shrink: 0;
  box-sizing: border-box;
}

/* The dot of the "i" */
.cov-info::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 2px;
  background: var(--accent-nav-active);
  border-radius: 50%;
}

/* The vertical bar of the "i" */
.cov-info::after {
  content: '';
  position: absolute;
  top: 5.5px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 5px;
  background: var(--accent-nav-active);
  border-radius: 1px;
}

.cov-info:hover {
  border-color: var(--accent-header);
  background: var(--bg-inset);
}

.cov-info:hover::before,
.cov-info:hover::after {
  background: var(--accent-header);
}

.cov-tip-body { }
.cov-tip-note {
  margin-top: 0.4rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--border-subtle);
  font-style: italic;
  color: var(--text-secondary);
  font-size: 0.68rem;
  line-height: 1.35;
}

.cov-condition-separator {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: 0.25rem 0;
}

/* Weakness star overlay on damage type tags */
.ctag.has-weakness::after {
  content: '\2605';
  position: absolute;
  top: -7px;
  right: -6px;
  font-size: 14px;
  color: #147a6b;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 0 3px var(--bg-card), 0 0 2px var(--bg-card);
}

.ctag.has-weakness {
  position: relative;
}

/* ── Tag Color Palette — Decision 017 Property Pills (revised 2026-05-04) ── */
:root {
  /* Defense (purple) */
  --tag-defense: #5a3d9e;
  --tag-defense-bg: #e2daf0;
  --tag-defense-border: #9a88c8;

  /* Targeting (teal) */
  --tag-targeting: #1a6b63;
  --tag-targeting-bg: #d0e8e5;
  --tag-targeting-border: #5db3a8;

  /* Damage types (red) */
  --tag-damage: #a32d2d;
  --tag-damage-bg: #f8d4d4;
  --tag-damage-border: #d88080;

  /* Conditions imposed (amber/orange) */
  --tag-condition: #8a5a15;
  --tag-condition-bg: #fce8c8;
  --tag-condition-border: #d8a850;

  /* Reliability (blue) */
  --tag-reliability: #2d5a8a;
  --tag-reliability-bg: #d8e5f2;
  --tag-reliability-border: #6a9cc8;

  /* Action Efficiency — sidebar only (purple, ~2 steps boosted) */
  --tag-action: #5c4a82;
  --tag-action-bg: #e6dcf2;
  --tag-action-border: #9a88c8;

  /* Special Coverage — sidebar only (green, ~2 steps boosted) */
  --tag-special: #1a7a42;
  --tag-special-bg: #d8eee0;
  --tag-special-border: #5db3a8;

  /* Weakness (cyan) */
  --tag-weakness: #147a6b;
  --tag-weakness-bg: #d0ede9;
  --tag-weakness-border: #5dbfae;
}

/* Ghosted-but-hued: unlit sidebar tags retain group color at low intensity */
.sidebar .ctag.tag-defense {
  color: var(--tag-defense);
  background: var(--tag-defense-bg);
  border-color: var(--tag-defense-border);
}
.sidebar .ctag.tag-targeting {
  color: var(--tag-targeting);
  background: var(--tag-targeting-bg);
  border-color: var(--tag-targeting-border);
}
.sidebar .ctag.tag-damage {
  color: var(--tag-damage);
  background: var(--tag-damage-bg);
  border-color: var(--tag-damage-border);
}
.sidebar .ctag.tag-condition {
  color: var(--tag-condition);
  background: var(--tag-condition-bg);
  border-color: var(--tag-condition-border);
}
.sidebar .ctag.tag-reliability {
  color: var(--tag-reliability);
  background: var(--tag-reliability-bg);
  border-color: var(--tag-reliability-border);
}
.sidebar .ctag.tag-action {
  color: var(--tag-action);
  background: var(--tag-action-bg);
  border-color: var(--tag-action-border);
}
.sidebar .ctag.tag-special {
  color: var(--tag-special);
  background: var(--tag-special-bg);
  border-color: var(--tag-special-border);
}
.sidebar .ctag.tag-weakness {
  color: var(--tag-weakness);
  background: var(--tag-weakness-bg);
  border-color: var(--tag-weakness-border);
}

.coverage-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; }

.ctag {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  padding: 0.15rem 0.4rem;
  border-radius: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-panel);
  color: var(--text-secondary);
  transition: all 0.2s;
  opacity: 0.55;
  cursor: help;
}

/* Browser/slot tags — full opacity by default (only sidebar dims unlit) */
.spell-table .ctag,
.slot-tags .ctag { opacity: 1; }

/* Sidebar lit state */
.ctag.lit { opacity: 1; }

.ctag.tag-defense.lit,
.spell-table .ctag.tag-defense,
.slot-tags .ctag.tag-defense.lit,
.slot-tags .ctag.tag-defense {
  color: var(--tag-defense);
  background: var(--tag-defense-bg);
  border-color: var(--tag-defense-border);
}

.ctag.tag-targeting.lit,
.spell-table .ctag.tag-targeting,
.slot-tags .ctag.tag-targeting.lit,
.slot-tags .ctag.tag-targeting {
  color: var(--tag-targeting);
  background: var(--tag-targeting-bg);
  border-color: var(--tag-targeting-border);
}

.ctag.tag-damage.lit,
.spell-table .ctag.tag-damage,
.slot-tags .ctag.tag-damage.lit,
.slot-tags .ctag.tag-damage {
  color: var(--tag-damage);
  background: var(--tag-damage-bg);
  border-color: var(--tag-damage-border);
}

.ctag.tag-condition.lit,
.spell-table .ctag.tag-condition,
.slot-tags .ctag.tag-condition.lit,
.slot-tags .ctag.tag-condition {
  color: var(--tag-condition);
  background: var(--tag-condition-bg);
  border-color: var(--tag-condition-border);
}

.ctag.tag-reliability.lit,
.spell-table .ctag.tag-reliability,
.slot-tags .ctag.tag-reliability.lit,
.slot-tags .ctag.tag-reliability {
  color: var(--tag-reliability);
  background: var(--tag-reliability-bg);
  border-color: var(--tag-reliability-border);
}

.ctag.tag-action.lit,
.spell-table .ctag.tag-action,
.slot-tags .ctag.tag-action.lit,
.slot-tags .ctag.tag-action {
  color: var(--tag-action);
  background: var(--tag-action-bg);
  border-color: var(--tag-action-border);
}

.ctag.tag-special.lit,
.spell-table .ctag.tag-special,
.slot-tags .ctag.tag-special.lit,
.slot-tags .ctag.tag-special {
  color: var(--tag-special);
  background: var(--tag-special-bg);
  border-color: var(--tag-special-border);
}

.ctag.tag-weakness.lit,
.spell-table .ctag.tag-weakness,
.slot-tags .ctag.tag-weakness.lit,
.slot-tags .ctag.tag-weakness {
  color: var(--tag-weakness);
  background: var(--tag-weakness-bg);
  border-color: var(--tag-weakness-border);
}

/* ST-Incap danger treatment — Decision 017 */
.ctag.danger,
.ctag.lit.danger,
.ctag.danger.lit {
  color: #a32d2d;
  background: #f8d4d4;
  border-color: #c94444;
  font-weight: 600;
}

/* ── Role Pills (hollow — white fill, colored border + text) ── */
.ctag.role-pill {
  background: #ffffff;
  border-width: 1.5px;
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 500;
  opacity: 1;
}

.ctag.role-damage { color: #a32d2d; border-color: #b83a3a; }
.ctag.role-debuff { color: #b85c14; border-color: #c46a20; }
.ctag.role-buff { color: #1a7a42; border-color: #28964e; }
.ctag.role-healing { color: #1a7a42; border-color: #28964e; }
.ctag.role-control { color: #2d5a8a; border-color: #3d72a8; }
.ctag.role-utility { color: #2d5a8a; border-color: #3d72a8; }
.ctag.role-silverbullet { color: #5a5a5a; border-color: #888888; }

/* ── MAIN CONTENT ── */
.main-content {
  flex: 1;
  min-width: 0;
  padding: 0 1.4rem 3rem;
}

/* ── TRADITION PAGE ── */
.tradition-page { display: none; }
.tradition-page.active { display: block; }

/* Tradition pages (except Overview) get a card background so content
   doesn't float on raw parchment texture. */
.tradition-page:not(#page-overview).active {
  background: var(--bg-card);
  border: 1px solid var(--border-panel);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
  padding: 1.4rem 1.5rem;
  position: relative;
}

/* ── EXPORT BUTTONS ── */
/* Positioned at top-right of the tradition card so the class selector
   can sit on the same row, reclaiming vertical space. */
.export-bar {
  display: flex;
  gap: 0.3rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  position: absolute;
  top: 1.2rem;
  right: 1.4rem;
  z-index: 3;
}

.export-btn {
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius);
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: all 0.2s;
  border: 1px solid var(--border-panel);
  background: var(--bg-card);
  color: var(--accent-header);
}

.export-btn:hover {
  background: var(--bg-inset);
  border-color: var(--accent-header);
}

.info-bubble {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid var(--accent-nav-active);
  color: transparent;
  font-size: 0;
  cursor: help;
  transition: border-color 0.15s, background 0.15s;
  vertical-align: middle;
  position: relative;
  flex-shrink: 0;
  box-sizing: border-box;
  margin-left: -0.2rem;
  margin-right: 0.2rem;
}

.info-bubble::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 2px;
  background: var(--accent-nav-active);
  border-radius: 50%;
}

.info-bubble::after {
  content: '';
  position: absolute;
  top: 5.5px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 5px;
  background: var(--accent-nav-active);
  border-radius: 1px;
}

.info-bubble:hover {
  border-color: var(--accent-header);
  background: var(--bg-inset);
}

.info-bubble:hover::before,
.info-bubble:hover::after {
  background: var(--accent-header);
}

/* ── CLASS SELECTOR ── */
.class-selector {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.class-selector label {
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.class-selector select {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-panel);
  background: var(--bg-card);
  color: var(--text-primary);
  cursor: pointer;
}

/* ── LEVEL TABS ── */
.level-tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--border-panel);
  padding-bottom: 0.7rem;
}

.level-tab {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 0.3rem 0.65rem;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid var(--border-panel);
  background: var(--bg-card);
  color: var(--text-tertiary);
  transition: all 0.18s;
}

.level-tab:hover { border-color: var(--accent-nav-active); color: var(--accent-nav-active); }
.level-tab.active { background: rgba(61,46,90,0.08); border-color: var(--accent-header); color: var(--accent-header); }
.level-tab.has-data { border-color: var(--accent-nav-active); color: var(--text-primary); }

/* ── OVERVIEW SECTIONS — outer frame containing heading + content ── */
.overview-section {
  background: var(--bg-card);
  border: 1px solid var(--border-panel);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
  padding: 1.2rem 1.4rem;
  margin: 1.5rem 0;
}

.overview-section .section-label {
  margin-top: 0;
}

/* Inside an overview-section, sub-cards visually nest by sharing the
   same base background. Tier cards, checklist cards, gotchas, item rows,
   and table wraps shift to a slightly distinct inset/elevation. */
.overview-section .tier-card,
.overview-section .checklist-card,
.overview-section .gotcha,
.overview-section .item-row,
.overview-section .flow-content {
  background: var(--bg-inset);
  box-shadow: none;
}

.overview-section .tier-table-wrap,
.overview-section .data-table-wrap,
.overview-section .wgiet-grid {
  box-shadow: none;
}

.overview-section .callout {
  background: var(--bg-inset);
}

/* ── OVERVIEW SECTIONS ── */
.overview-hero {
  text-align: center;
  padding: 1.2rem 1rem 1rem;
  margin-bottom: 1.5rem;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-panel);
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}

.overview-hero h1 {
  font-family: 'Cinzel', serif;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--accent-header);
  margin-bottom: 0.3rem;
  letter-spacing: 0.05em;
}

.overview-hero p { color: var(--text-secondary); font-size: 1rem; }

.section-label {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent-header);
  margin: 1.8rem 0 0.5rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--border-panel);
  letter-spacing: 0.04em;
}

.section-label:first-of-type { margin-top: 0; }

.section-intro {
  color: var(--text-secondary);
  font-size: 1.08rem;
  margin-bottom: 1rem;
  font-style: italic;
}

.superpower-box {
  background: var(--bg-card);
  border: 1px solid var(--border-panel);
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  font-style: italic;
  color: var(--accent-header);
  margin: 0.5rem 0 1rem;
  font-size: 1.1rem;
  line-height: 1.5;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}

.defense-note {
  font-size: 1.05rem;
  line-height: 1.5;
  margin: 0.5rem 0 1rem;
  padding: 0.7rem 0.9rem;
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 1px solid var(--border-panel);
}

.gap-box {
  background: #fde8e8;
  border: 1px solid #e8a0a0;
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  margin: 0.5rem 0 1rem;
  font-size: 1.05rem;
  line-height: 1.5;
}

.gap-box h4 {
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  color: #a32d2d;
  margin-bottom: 0.3rem;
}

.gap-box ul { padding-left: 1.2rem; color: var(--text-primary); }
.gap-box li { margin-bottom: 0.2rem; }

.items-box {
  background: #e8eff7;
  border: 1px solid #8ab4d8;
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  margin: 0.5rem 0 1rem;
  font-size: 1.05rem;
  line-height: 1.5;
}

.items-box ul { padding-left: 1.2rem; }
.items-box li { margin-bottom: 0.25rem; }

/* ── ROLE RATING TABLE ── */
.data-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border-panel);
  margin: 0.5rem 0 1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}

.data-table th {
  font-family: 'Cinzel', serif;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: left;
  padding: 0.5rem 0.7rem;
  background: var(--bg-inset);
  color: var(--accent-header);
  border-bottom: 1px solid var(--border-panel);
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.data-table td {
  padding: 0.45rem 0.7rem;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
  line-height: 1.4;
}

.data-table tr:last-child td { border-bottom: none; }
.data-table tr:nth-child(even) td { background: rgba(44,36,22,0.02); }
.data-table tr.star-row td { background: rgba(61,46,90,0.04); }
.data-table tr.cannot-row td { opacity: 0.6; }

/* ── SLOT PLANNING AREA ── */
.rank-rows { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.2rem; }

.rank-row {
  background: var(--bg-inset);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 0.55rem 0.8rem;
}

.rank-row-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.45rem;
}

.rank-label {
  font-family: 'Cinzel', serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}

.tier-badge {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
}

.tier-badge.top { color: var(--tier-top); background: var(--bg-card); border: 1px solid var(--tier-top); }
.tier-badge.mid { color: var(--tier-mid); background: var(--bg-card); border: 1px solid var(--tier-mid); }
.tier-badge.low { color: var(--tier-low); background: var(--bg-card); border: 1px solid var(--tier-low); }

/* Equalize tier symbol sizes — circles render larger than diamonds, so scale diamonds up */
.tier-badge .tier-sym {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}
.tier-badge.top .tier-sym,
.tier-badge.mid .tier-sym { font-size: 1.35em; }
.tier-badge.low .tier-sym { font-size: 1em; }

.add-slot-btn {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid var(--border-panel);
  background: var(--bg-card);
  color: var(--text-tertiary);
  transition: all 0.15s;
  margin-left: auto;
}

.add-slot-btn:hover { border-color: var(--accent-header); color: var(--accent-header); }

/* ── SLOT TABLE ── */
/* Use display:flex on rows so the X button can hug the tags via
   margin-left:auto, regardless of the rank-row's outer width. */
.slot-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.slot-table tbody, .slot-table tr {
  display: block;
}

.slot-table tr {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
  padding: 0.15rem 0;
}

.slot-table tr:last-child { border-bottom: none; }

.slot-table td {
  padding: 0.15rem 0.5rem;
  border: none;
  vertical-align: middle;
  display: block;
}

.slot-table td:nth-child(1) { width: 14rem; flex: 0 0 14rem; }
.slot-table td:nth-child(2) { width: 5rem; flex: 0 0 5rem; text-align: left; }
.slot-table td:nth-child(3) { flex: 0 1 auto; min-width: 0; }
.slot-table td.slot-actions { width: 4.5rem; flex: 0 0 4.5rem; text-align: right; margin-left: auto; }

/* Empty-slot row uses colspan=3 — make that single cell span name+action+tags */
.slot-table td.slot-empty {
  flex: 1 1 auto;
  width: auto;
}

.slot-table tr:last-child td { border-bottom: none; }

.slot-table tr {
  cursor: pointer;
  transition: background 0.15s;
}

.slot-table tr:hover { background: rgba(44,36,22,0.04); }
.slot-table tr.selected { background: var(--bg-hover); border-left: 3px solid var(--accent-header); }

.slot-spell-name {
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slot-action {
  white-space: nowrap;
  color: var(--text-secondary);
}

.slot-empty {
  color: var(--text-tertiary);
  font-style: italic;
  opacity: 0.6;
}

.slot-tags { display: flex; gap: 0.2rem; flex-wrap: wrap; }

.slot-clear-btn {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.2rem 0.4rem;
  border-radius: 3px;
  cursor: pointer;
  border: 1px solid #e8a0a0;
  background: #fde8e8;
  color: #a32d2d;
  transition: all 0.15s;
}

.slot-clear-btn:hover { background: #f5cece; border-color: #c94444; }

.slot-delete-btn {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.2rem 0.4rem;
  border-radius: 3px;
  cursor: pointer;
  border: 1px solid var(--border-panel);
  background: var(--bg-card);
  color: var(--text-tertiary);
  transition: all 0.15s;
}

.slot-delete-btn:hover { background: #f5cece; border-color: #c94444; color: #a32d2d; }

.slot-actions { display: flex; gap: 0.25rem; justify-content: flex-end; }

/* ── LEVEL ACTIONS BAR ── */
.level-actions {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 0;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
}

.level-action-btn {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid var(--border-panel);
  background: var(--bg-card);
  color: var(--text-secondary);
  transition: all 0.15s;
}

.level-action-btn:hover:not(:disabled) { border-color: var(--accent-header); color: var(--accent-header); }
.level-action-btn:disabled { cursor: not-allowed; }

/* ── SPELL BROWSER ── */
.spell-browser {
  background: var(--bg-inset);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 0.8rem;
  margin-top: 1rem;
}

.spell-browser.browser-hidden { display: none; }

.browser-role-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.8rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
}

.browser-role-tab {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 0.25rem 0.55rem;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid var(--border-panel);
  background: var(--bg-card);
  color: var(--text-tertiary);
  transition: all 0.15s;
}

.browser-role-tab:hover { border-color: var(--accent-nav-active); color: var(--accent-nav-active); }
.browser-role-tab.active { background: rgba(61,46,90,0.08); border-color: var(--accent-header); color: var(--accent-header); }

/* ── SEARCH / FILTER ── */
.search-bar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.8rem;
  flex-wrap: wrap;
}

.search-bar input,
.search-bar select {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-panel);
  background: var(--bg-card);
  color: var(--text-primary);
}

.search-bar input { flex: 1; min-width: 150px; }
.search-bar input::placeholder { color: var(--text-tertiary); }
.search-bar input:focus { outline: none; border-color: var(--accent-nav-active); box-shadow: 0 0 0 2px rgba(61,46,90,0.08); }

/* ── SPELL TABLE IN BROWSER ── */
.spell-table-wrap {
  max-height: 400px;
  overflow-y: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border-panel);
}

.spell-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.spell-table th {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  font-weight: 600;
  text-align: left;
  padding: 0.4rem 0.5rem;
  background: var(--bg-inset);
  color: var(--accent-header);
  border-bottom: 1px solid var(--border-panel);
  position: sticky;
  top: 0;
  z-index: 1;
}

.spell-table td {
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
  line-height: 1.35;
}

.spell-table tr:last-child td { border-bottom: none; }
.spell-table tr:nth-child(even) td { background: rgba(44,36,22,0.02); }

.spell-table tr.curated-row td { background: rgba(61,46,90,0.04); }
.spell-table tr.curated-row td:first-child { border-left: 3px solid var(--accent-nav-active); }

.spell-table tr {
  cursor: pointer;
  transition: background 0.1s;
}

.spell-table tr:hover td { background: rgba(44,36,22,0.04); }

.spell-name-link {
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 600;
}

.spell-name-link:hover { text-decoration: underline; color: var(--accent-header); }

.aon-link {
  color: var(--text-tertiary);
  text-decoration: none;
  font-size: 0.72rem;
  margin-left: 0.3rem;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.aon-link:hover { opacity: 1; color: var(--accent-header); }

.spell-notes {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  font-style: italic;
  width: 280px;
  max-width: 280px;
  white-space: normal;
  word-wrap: break-word;
}

.silver-bullet-note {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.72rem;
  font-style: italic;
  color: var(--text-tertiary);
  line-height: 1.3;
  white-space: normal;
  word-wrap: break-word;
}

.heightened-badge {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--tier-mid);
  background: rgba(92,74,130,0.08);
  border: 1px solid rgba(92,74,130,0.2);
  border-radius: 3px;
  padding: 0 0.25rem;
  margin-left: 0.3rem;
}

.heightened-badge.parked {
  color: var(--text-tertiary);
  background: rgba(139,125,107,0.06);
  border: 1px dashed var(--border-panel);
  font-style: italic;
}

/* (parked-row styles removed in C24 feedback — only Heightens At cell is greyed) */

/* ── BROWSER ADVICE ── */
.browser-advice {
  font-size: 0.92rem;
  color: var(--text-secondary);
  margin-bottom: 0.6rem;
  padding: 0.4rem 0.6rem;
  background: var(--bg-inset);
  border-radius: var(--radius);
  border-left: 3px solid var(--accent-header);
}

.browser-advice:empty { display: none; }

/* ═══════════════════════════════════════════════════════════
   TOOLTIP STANDARDS — All tooltips in the app use these patterns.

   Icon style: .cov-info (14x14 circle, custom "i" glyph)
   Popup style: .cov-tooltip (fixed position, Inter 0.7rem, 250px max)

   When adding new tooltips, use these classes. Do not create new
   tooltip styles without updating this block.
   ═══════════════════════════════════════════════════════════ */

.tag-tooltip,
.cov-tooltip {
  position: fixed;
  background: var(--bg-inset);
  border: 1px solid var(--border-panel);
  border-radius: var(--radius);
  padding: 0.45rem 0.65rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.4;
  z-index: 1100;
  max-width: 250px;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

/* ── TOAST ── */
.toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--accent-header);
  border: 1px solid var(--accent-nav-active);
  border-radius: var(--radius);
  padding: 0.5rem 1.2rem;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #ffffff;
  opacity: 0;
  transition: all 0.3s;
  z-index: 1000;
  pointer-events: none;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── GUIDE PAGE STYLES ── */
.guide-page { max-width: 960px; margin: 0 auto; }

.hero {
  text-align: center;
  padding: 1.5rem 1rem 1.2rem;
  margin-bottom: 1.5rem;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-panel);
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}

.hero h1 {
  font-family: 'Cinzel', serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent-header);
  margin-bottom: 0.3rem;
  letter-spacing: 0.05em;
}

.hero p { color: var(--text-primary); font-size: 1.2rem; font-weight: 500; line-height: 1.45; max-width: 720px; margin: 0 auto; }

/* Tier map grid */
.tier-map-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.tier-card {
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  border: 1px solid;
  background: var(--bg-card);
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}

.tier-card.top { border-color: rgba(61,46,90,0.3); }
.tier-card.mid { border-color: rgba(92,74,130,0.25); }
.tier-card.low { border-color: rgba(149,133,181,0.25); }

.tier-symbol { font-size: 1.5rem; display: inline-block; margin-right: 0.3rem; vertical-align: middle; }
.tier-card.top .tier-symbol { color: var(--tier-top); }
.tier-card.mid .tier-symbol { color: var(--tier-mid); }
.tier-card.low .tier-symbol { color: var(--tier-low); }

.tier-card h3 {
  font-family: 'Cinzel', serif;
  font-size: 1.08rem;
  font-weight: 700;
  display: inline;
  vertical-align: middle;
}

.tier-card.top h3 { color: var(--tier-top); }
.tier-card.mid h3 { color: var(--tier-mid); }
.tier-card.low h3 { color: var(--tier-low); }

.tier-card .tier-desc { font-size: 1rem; color: var(--text-primary); margin-top: 0.4rem; line-height: 1.45; }

.tier-card .tier-ranks {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 0.5rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--border-subtle);
}

/* Tier table */
.tier-table-wrap {
  overflow-x: auto;
  margin: 1rem 0;
  border-radius: var(--radius);
  border: 1px solid var(--border-panel);
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
  width: fit-content;
  max-width: 100%;
}

.tier-table-video-row {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  margin: 1rem 0;
}
.tier-table-video-row .tier-table-wrap {
  margin: 0;
  flex-shrink: 0;
}
.mathfinder-attribution {
  flex: 1;
  min-width: 280px;
  max-width: 400px;
}
.mathfinder-video-embed {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border-panel);
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}
.mathfinder-video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.mathfinder-disclaimer {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-primary);
  margin-top: 0.75rem;
  padding: 12px 16px;
  background: var(--bg-inset);
  border-radius: var(--radius);
  border: 1px solid var(--border-panel);
}
.mathfinder-disclaimer a {
  color: var(--accent-header);
  text-decoration: underline;
}
@media (max-width: 900px) {
  .tier-table-video-row {
    flex-direction: column;
  }
  .mathfinder-attribution {
    max-width: 100%;
  }
}

.tier-table { width: auto; border-collapse: collapse; font-size: 1rem; }

.tier-table th {
  font-family: 'Cinzel', serif;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: left;
  padding: 0.55rem 0.7rem;
  background: var(--bg-inset);
  color: var(--accent-header);
  border-bottom: 1px solid var(--border-panel);
}

.tier-table td { padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--border-subtle); vertical-align: top; line-height: 1.4; }
.tier-table tr:last-child td { border-bottom: none; }
.tier-table tr:nth-child(even) td { background: rgba(44,36,22,0.02); }

.tier-table th, .tier-table td { white-space: nowrap; }
.tier-table .col-level { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.92rem; color: var(--text-primary); }
.tier-table .col-max { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.92rem; text-align: left; }
.tier-table .tag-top { font-family: 'Inter', sans-serif; font-size: 0.88rem; color: var(--tier-top); font-weight: 600; }
.tier-table .tag-mid { font-family: 'Inter', sans-serif; font-size: 0.88rem; color: var(--tier-mid); font-weight: 500; }
.tier-table .tag-low { font-family: 'Inter', sans-serif; font-size: 0.88rem; color: var(--tier-low); font-weight: 500; }
.em-dash { color: var(--text-tertiary); }

/* What goes in each tier grid */
.wgiet-grid {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr;
  gap: 0;
  border: 1px solid var(--border-panel);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 1rem 0;
  font-size: 1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}

.wgiet-grid .wg-header {
  font-family: 'Cinzel', serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent-header);
  background: var(--bg-inset);
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--border-panel);
}

.wgiet-grid .wg-cell {
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--border-subtle);
  border-right: 1px solid var(--border-subtle);
  line-height: 1.4;
}

.wgiet-grid .wg-cell:last-child { border-right: none; }

.wgiet-grid .wg-tier-label {
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--border-subtle);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  align-items: flex-start;
  white-space: nowrap;
}

.wgiet-grid .wg-tier-label.top { color: var(--tier-top); background: rgba(61,46,90,0.04); }
.wgiet-grid .wg-tier-label.mid { color: var(--tier-mid); background: rgba(92,74,130,0.04); }
.wgiet-grid .wg-tier-label.low { color: var(--tier-low); background: rgba(149,133,181,0.04); }

.wg-warning {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: #a32d2d;
  font-weight: 600;
  display: block;
  margin-top: 0.3rem;
}

/* Decision flow */
.flow-steps { display: flex; flex-direction: column; gap: 0; margin: 1rem 0; position: relative; }
.flow-step { display: flex; align-items: stretch; gap: 0.8rem; position: relative; }
.flow-connector { display: flex; flex-direction: column; align-items: center; width: 36px; flex-shrink: 0; }

.flow-number {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
  border: 2px solid;
}

.flow-step:nth-child(1)  .flow-number { background: rgba(163,45,45,0.08);  border-color: #a32d2d; color: #a32d2d; }
.flow-step:nth-child(2)  .flow-number { background: rgba(184,92,20,0.08);  border-color: #b85c14; color: #b85c14; }
.flow-step:nth-child(3)  .flow-number { background: rgba(184,150,20,0.08); border-color: #b89614; color: #9a7e10; }
.flow-step:nth-child(4)  .flow-number { background: rgba(26,122,66,0.08);  border-color: #1a7a42; color: #1a7a42; }
.flow-step:nth-child(5)  .flow-number { background: rgba(20,140,140,0.08); border-color: #148c8c; color: #148c8c; }
.flow-step:nth-child(6)  .flow-number { background: rgba(45,90,138,0.08);  border-color: #2d5a8a; color: #2d5a8a; }
.flow-step:nth-child(7)  .flow-number { background: rgba(60,60,160,0.08);  border-color: #3c3ca0; color: #3c3ca0; }
.flow-step:nth-child(8)  .flow-number { background: rgba(92,74,130,0.08);  border-color: #5c4a82; color: #5c4a82; }
.flow-step:nth-child(9)  .flow-number { background: rgba(130,50,130,0.08); border-color: #823282; color: #823282; }
.flow-step:nth-child(10) .flow-number { background: rgba(160,50,100,0.08); border-color: #a03264; color: #a03264; }

.flow-line { width: 2px; flex: 1; min-height: 12px; background: var(--border-panel); }
.flow-step:last-child .flow-line { display: none; }

.flow-content {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border-panel);
  border-radius: var(--radius);
  padding: 0.65rem 0.9rem;
  margin-bottom: 0.5rem;
}

.flow-content h4 { font-family: 'Cinzel', serif; font-size: 1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.2rem; }
.flow-content p { font-size: 1rem; color: var(--text-secondary); line-height: 1.45; }

/* Coverage checklists */
.checklist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin: 1rem 0; }

.checklist-card {
  background: var(--bg-card);
  border: 1px solid var(--border-panel);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}

.checklist-card h4 {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.checklist-card h4 .cl-icon { font-size: 1.1rem; }
.checklist-card.defense h4 { color: var(--tag-defense); }
.checklist-card.effect h4 { color: var(--tag-damage); }
.checklist-card.reliability h4 { color: var(--tag-reliability); }
.checklist-card.action h4 { color: var(--tag-action); }
.checklist-card.defense { border-color: var(--tag-defense-border); }
.checklist-card.effect { border-color: var(--tag-damage-border); }
.checklist-card.reliability { border-color: var(--tag-reliability-border); }
.checklist-card.action { border-color: var(--tag-action-border); }

.cl-items { list-style: none; font-size: 1rem; }
.cl-items li { padding: 0.25rem 0; padding-left: 1.3rem; position: relative; line-height: 1.45; }
.cl-items li::before { content: '\2610'; position: absolute; left: 0; color: var(--text-tertiary); font-size: 1rem; }
.cl-items li strong { color: var(--text-primary); font-weight: 600; }

.cl-advice {
  font-size: 0.92rem;
  color: var(--text-secondary);
  font-style: italic;
  margin-top: 0.5rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--border-subtle);
  line-height: 1.35;
}

/* Gotchas */
.gotcha-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin: 1rem 0; }

.gotcha {
  background: var(--bg-card);
  border: 1px solid var(--border-panel);
  border-radius: var(--radius);
  padding: 0.6rem 0.8rem;
  font-size: 1rem;
}

.gotcha-q { font-weight: 700; color: #b85c14; font-size: 0.95rem; margin-bottom: 0.2rem; }
.gotcha-a { color: var(--text-primary); line-height: 1.45; }

/* Items reminder */
.item-row {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  background: var(--bg-card);
  border: 1px solid var(--border-panel);
  border-radius: var(--radius);
  padding: 0.65rem 0.9rem;
  margin-bottom: 0.5rem;
}

.item-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 0.1rem; }
.item-row h4 { font-family: 'Cinzel', serif; font-size: 1rem; font-weight: 700; color: var(--accent-header); margin-bottom: 0.15rem; }
.item-row p { font-size: 1rem; color: var(--text-primary); line-height: 1.45; }

/* Callout */
.callout {
  background: var(--bg-card);
  border-left: 3px solid var(--accent-header);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 0.7rem 1rem;
  margin: 0.8rem 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-primary);
  border: 1px solid var(--border-panel);
  border-left: 3px solid var(--accent-header);
}

.callout strong { color: var(--accent-header); }

/* Source footer */
.source-footer {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-panel);
  font-size: 0.78rem;
  color: var(--text-tertiary);
  font-style: italic;
  text-align: center;
}

/* ── FRAMED PANELS — Corner Ornaments ── */
.framed { position: relative; }

.framed .corner-ornament {
  position: absolute;
  width: 40px;
  height: 40px;
  pointer-events: none;
  opacity: 0.85;
  z-index: 2;
}

/* Smaller ornaments on compact panels so they don't dominate */
.tier-card .corner-ornament,
.data-table-wrap .corner-ornament,
.tier-table-wrap .corner-ornament { width: 28px; height: 28px; }

.framed .corner-tl { top: 0; left: 0; }
.framed .corner-tr { top: 0; right: 0; transform: scaleX(-1); }
.framed .corner-bl { bottom: 0; left: 0; transform: scaleY(-1); }
.framed .corner-br { bottom: 0; right: 0; transform: scale(-1,-1); }

/* ── FILTER CONTROLS CLUSTER ── */
.filter-controls {
  border-top: 1px solid var(--border-panel);
  padding-top: 0.75rem;
  margin-top: 0.75rem;
}

.filter-controls-label {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}

.rarity-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 0.4rem;
}

.rarity-btn {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 0.2rem 0.45rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
  background: transparent;
}

.rarity-btn[data-rarity="Common"] {
  color: var(--text-primary);
  border: 1.5px solid var(--border-panel);
}
.rarity-btn[data-rarity="Common"].active {
  background: var(--text-primary);
  color: #ffffff;
  border-color: var(--text-primary);
}

.rarity-btn[data-rarity="Uncommon"] {
  color: #98513D;
  border: 1.5px solid #98513D;
}
.rarity-btn[data-rarity="Uncommon"].active {
  background: #98513D;
  color: #ffffff;
  border-color: #98513D;
}

.rarity-btn[data-rarity="Rare"] {
  color: #002664;
  border: 1.5px solid #002664;
}
.rarity-btn[data-rarity="Rare"].active {
  background: #002664;
  color: #ffffff;
  border-color: #002664;
}

.rarity-btn[data-rarity="Unique"] {
  color: #800080;
  border: 1.5px solid #800080;
}
.rarity-btn[data-rarity="Unique"].active {
  background: #800080;
  color: #ffffff;
  border-color: #800080;
}

.filter-toggle-btn {
  display: block;
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid var(--border-panel);
  background: var(--bg-card);
  color: var(--text-secondary);
  transition: all 0.15s;
  margin-top: 0.3rem;
  text-align: center;
}

.filter-toggle-btn:hover { border-color: var(--accent-header); color: var(--accent-header); }
.filter-toggle-btn.active {
  background: rgba(61,46,90,0.08);
  border-color: var(--accent-header);
  color: var(--accent-header);
}

/* ── SORT INDICATORS ── */
.sortable-header {
  cursor: pointer;
  user-select: none;
}
.sortable-header:hover { color: var(--accent-nav-active); }

.sort-indicator {
  font-size: 0.65rem;
  margin-left: 0.2rem;
}
.sort-indicator.dim { opacity: 0.35; }

/* ── SEARCH TAB ── */
.search-tab-btn {
  border-left: 2px solid var(--border-panel) !important;
  margin-left: 0.4rem !important;
  padding-left: 0.7rem !important;
}

.search-ui {
  margin-bottom: 0.6rem;
}

.search-input {
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-panel);
  background: var(--bg-card);
  color: var(--text-primary);
  margin-bottom: 0.3rem;
}
.search-input:focus {
  outline: none;
  border-color: var(--accent-nav-active);
  box-shadow: 0 0 0 2px rgba(61,46,90,0.08);
}
.search-input::placeholder { color: var(--text-tertiary); }

.search-info {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  color: var(--text-tertiary);
  font-style: italic;
}

.search-message {
  padding: 1rem;
  color: var(--text-tertiary);
  text-align: center;
  font-style: italic;
}
.search-error {
  color: #a32d2d;
}
.search-error code {
  font-size: 0.8rem;
  background: var(--bg-inset);
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
}

/* ── FILTER NOTICE ── */
.filter-notice {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.6rem;
  margin-bottom: 0.5rem;
  background: #fef3cd;
  border: 1px solid #e8c547;
  border-radius: var(--radius);
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  color: #856404;
  flex-wrap: wrap;
}

.filter-notice-text { flex: 1 1 auto; }

.filter-notice-btn {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid #e8c547;
  background: #fff;
  color: #856404;
  transition: all 0.15s;
}
.filter-notice-btn:hover { background: #fef3cd; border-color: #856404; }
.filter-notice-btn.secondary { background: transparent; border-color: transparent; text-decoration: underline; }
.filter-notice-btn.secondary:hover { background: rgba(0,0,0,0.04); }

/* ── SEARCH WARNING BADGES ── */
.search-warning-badge {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.1rem 0.35rem;
  margin-left: 0.3rem;
  border-radius: 3px;
  background: #fef3cd;
  border: 1px solid #e8c547;
  color: #856404;
  vertical-align: middle;
}

/* ── LEGACY ROW STYLING ── */
.spell-table tr.legacy-row td {
  opacity: 0.65;
}

.legacy-badge {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  padding: 0.05rem 0.3rem;
  margin-left: 0.3rem;
  border-radius: 3px;
  background: rgba(139,125,107,0.12);
  border: 1px solid var(--border-panel);
  color: var(--text-tertiary);
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ── COVERAGE FILTER MODE ── */
.sidebar.coverage-filter-mode .ctag {
  cursor: pointer;
  opacity: 0.75;
}

.sidebar.coverage-filter-mode .ctag:hover {
  opacity: 1;
}

.sidebar .ctag.filter-included {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--accent-header);
  font-weight: 700;
}

.sidebar .ctag.filter-excluded {
  opacity: 0.55;
  text-decoration: line-through;
  border-style: dashed;
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .sidebar { display: none; }
  .main-content { padding: 1rem; }
}

@media (max-width: 700px) {
  .tier-map-grid { grid-template-columns: 1fr; }
  .checklist-grid { grid-template-columns: 1fr; }
  .gotcha-grid { grid-template-columns: 1fr; }
  .wgiet-grid { overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; }
  .hero h1, .overview-hero h1 { font-size: 1.4rem; }
}

/* ── Cycle 21: Curation Layer Display ── */

.mathfinder-star {
  color: #b8860b;
  font-size: 14px;
  cursor: pointer;
  display: inline-block;
  width: 18px;
  text-align: center;
}
.mathfinder-spacer {
  display: inline-block;
  width: 18px;
}

.mathfinder-row {
  background: rgba(184, 134, 11, 0.06);
}
.mathfinder-row td:first-child {
  border-left: 3px solid #b8860b;
}

#curation-popover {
  position: absolute;
  z-index: 1000;
  max-width: 320px;
  padding: 12px;
  background: var(--bg-card);
  border: 1px solid #b8860b;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  display: none;
}
#curation-popover .popover-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 6px;
}
#curation-popover .popover-summary {
  color: var(--text-secondary);
  font-size: 12px;
  margin-bottom: 8px;
}
#curation-popover .popover-sources {
  border-top: 1px solid var(--border-subtle);
  padding-top: 6px;
  color: var(--text-tertiary);
  font-size: 11px;
}
#curation-popover .popover-sources a {
  color: var(--accent-nav-active);
  text-decoration: none;
}
#curation-popover .popover-sources a:hover {
  text-decoration: underline;
}

.mathfinder-video-link {
  font-size: 11px;
  color: var(--accent-nav-active);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  max-width: 130px;
}
.mathfinder-video-link:hover {
  text-decoration: underline;
}

.chain-badge {
  display: inline-block;
  font-size: 11px;
  font-style: italic;
  margin-left: 6px;
  vertical-align: middle;
}
.chain-replaces {
  color: #0F6E56;
}
.chain-replaced-by {
  color: #993C1D;
}

/* ═══════════════════════════════════════════════════════════
   Cycle 22 — Trait Filters / Column Filters / Active Filter Bar
   ═══════════════════════════════════════════════════════════ */

/* ── Trait Filter Pills (sidebar section) ── */
.trait-section {
  border-top: 1px solid var(--border-panel);
  padding-top: 0.6rem;
  margin-top: 0.6rem;
}

.trait-filter-input {
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  border: 1px solid var(--border-panel);
  background: var(--bg-card);
  color: var(--text-primary);
  margin-bottom: 0.4rem;
  box-sizing: border-box;
}
.trait-filter-input:focus {
  outline: none;
  border-color: var(--accent-nav-active);
}
.trait-filter-input::placeholder { color: var(--text-tertiary); }

.trait-empty-msg {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-style: italic;
  color: var(--text-tertiary);
  padding: 0.3rem 0;
}

/* Trait pills — use neutral palette by default; reuse filter-included/excluded states */
.sidebar .ctag.tag-trait {
  color: var(--text-secondary);
  background: var(--bg-card);
  border-color: var(--border-panel);
  cursor: pointer;
  opacity: 0.75;
}
.sidebar .ctag.tag-trait:hover { opacity: 1; }

/* Tradition-aware dimming — still clickable */
.sidebar .ctag.tag-trait.trait-dimmed {
  opacity: 0.35;
  pointer-events: auto;
}
.sidebar .ctag.tag-trait.trait-dimmed:hover { opacity: 0.6; }

/* Filter-included reuses .filter-included styling already defined.
   For trait pills, ensure visibility even when dimmed. */
.sidebar .ctag.tag-trait.filter-included,
.sidebar .ctag.tag-trait.filter-excluded {
  opacity: 1;
}

/* ── Column Filter Buttons (funnel + star) ── */
/* Funnel button — visually distinct from sort indicators (which use ⇕▲▼).
   Filter buttons have a clear border/background so they're obviously buttons. */
.col-filter-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 0.4rem;
  padding: 0;
  border: 1px solid var(--border-panel);
  border-radius: 3px;
  background: var(--bg-card);
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all 0.15s;
  vertical-align: middle;
  line-height: 1;
}
.col-filter-icon:hover {
  border-color: var(--accent-nav-active);
  color: var(--accent-nav-active);
  background: var(--bg-inset);
}
.col-filter-icon.active {
  border-color: var(--accent-header);
  background: var(--accent-header);
  color: #ffffff;
}
.col-filter-icon .cf-funnel { display: block; }

/* Star toggle — sibling of funnel, uses gold when active */
.col-filter-icon.star-toggle {
  font-size: 0.85rem;
  color: var(--text-tertiary);
}
.col-filter-icon.star-toggle.active {
  background: #b8860b;
  border-color: #b8860b;
  color: #ffffff;
}

/* Visual separator between sort indicator and filter buttons.
   Sort indicators (⇕▲▼) sit before filter buttons; the margin-left and
   distinct boxed look on the filter buttons keep the two roles obvious. */
.sortable-header .sort-indicator { margin-right: 0.05rem; }

/* Table-header info bubble (e.g. Tags column) needs breathing room
   from its label — override the export-bar negative margin. */
.spell-table th .info-bubble {
  margin-left: 0.35rem;
  margin-right: 0;
}

/* ── Column Filter Dropdown ── */
.column-filter-dropdown {
  position: fixed;
  z-index: 1100;
  background: var(--bg-card);
  border: 1px solid var(--border-panel);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  padding: 0.6rem 0.7rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  min-width: 180px;
  max-width: 260px;
}

.column-filter-dropdown .cfd-row { display: flex; }

.column-filter-dropdown .cfd-name-input {
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  border: 1px solid var(--border-panel);
  background: var(--bg-card);
  color: var(--text-primary);
  box-sizing: border-box;
}
.column-filter-dropdown .cfd-name-input:focus {
  outline: none;
  border-color: var(--accent-nav-active);
}

.column-filter-dropdown .cfd-info {
  font-size: 0.68rem;
  font-style: italic;
  color: var(--text-tertiary);
  margin-bottom: 0.35rem;
  line-height: 1.3;
}

.column-filter-dropdown .cfd-controls {
  display: flex;
  gap: 0.3rem;
  margin-bottom: 0.35rem;
}

.column-filter-dropdown .cfd-btn {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  cursor: pointer;
  border: 1px solid var(--border-panel);
  background: var(--bg-card);
  color: var(--text-secondary);
  transition: all 0.15s;
}
.column-filter-dropdown .cfd-btn:hover {
  border-color: var(--accent-header);
  color: var(--accent-header);
}

.column-filter-dropdown .cfd-checks {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  max-height: 240px;
  overflow-y: auto;
}

.column-filter-dropdown .cfd-check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  font-size: 0.78rem;
  color: var(--text-primary);
  padding: 0.1rem 0;
}

/* ── Active Filter Summary Bar ── */
.active-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.6rem;
  margin-bottom: 0.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border-panel);
  border-radius: var(--radius);
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
}

.active-filter-bar .afb-label {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 0.2rem;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.5rem;
  border-radius: 12px;
  background: var(--bg-inset);
  border: 1px solid var(--border-panel);
  color: var(--text-primary);
  font-size: 0.72rem;
  white-space: nowrap;
}

.filter-chip.neg {
  background: #fde8e8;
  border-color: #e8a0a0;
  color: #a32d2d;
}

.filter-chip.paused {
  opacity: 0.5;
  font-style: italic;
}

.filter-chip .afb-x {
  cursor: pointer;
  color: var(--text-tertiary);
  font-weight: 700;
  transition: color 0.15s;
  font-size: 0.85rem;
  line-height: 1;
}
.filter-chip .afb-x:hover { color: var(--accent-header); }
.filter-chip.neg .afb-x:hover { color: #a32d2d; }

.afb-clear {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid var(--accent-nav-active);
  background: transparent;
  color: var(--accent-nav-active);
  margin-left: auto;
  transition: all 0.15s;
}
.afb-clear:hover {
  background: var(--accent-nav-active);
  color: #ffffff;
}

/* ── No-results message with clear-filters link ── */
.no-results-msg {
  padding: 1.2rem 1rem;
  text-align: center;
  font-style: italic;
  color: var(--text-secondary);
}
.no-results-msg .clear-filters-link {
  color: var(--accent-nav-active);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.no-results-msg .clear-filters-link:hover {
  color: var(--accent-header);
}

/* ═══════════════════════════════════════════════════════════
   Cycle 24 — Heightening Display
   ═══════════════════════════════════════════════════════════ */

/* B2 — Slot context header */
.slot-context-header {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent-header);
  letter-spacing: 0.08em;
  text-align: center;
  padding: 0.5rem 0 0.2rem;
}

/* B4 — Heightens At column */
.heighten-cell {
  font-size: 0.88rem;
  white-space: nowrap;
}
.heighten-cell.parked {
  color: var(--text-tertiary);
  opacity: 0.55;
}

/* B6/B10 — Quality indicators (inline in Heightens At cell) */
.indicator-icon {
  font-size: 13px;
  cursor: help;
  margin-left: 4px;
  vertical-align: middle;
}
.indicator-green {
  color: #1a7a3a;
}
.indicator-grey {
  color: #999;
}

/* Dropdown divider for heighten filter */
.cfd-divider {
  border: none;
  border-top: 1px solid var(--border-panel);
  margin: 6px 0;
}

/* B7/B8 — Chain advisory notes in Notes column */
.chain-note {
  font-size: 0.82rem;
  line-height: 1.35;
  margin-top: 3px;
  padding: 2px 0;
}
.chain-note-icon {
  font-size: 10px;
}
.chain-note-orange {
  color: #b05a1a;
}
.chain-note-orange .chain-note-icon {
  color: #d47a2a;
}
.chain-note-green {
  color: #0f6e56;
}
.chain-note-green .chain-note-icon {
  color: #1a9a6a;
}

/* (B9 heightening filter bar removed — filters moved to column dropdown) */

/* ── About Page ── */
.about-layout {
  display: flex;
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 20px;
}

.about-toc {
  width: 240px;
  min-width: 240px;
  position: sticky;
  top: 150px;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 0;
  max-height: calc(100vh - 170px);
  overflow-y: auto;
}

.about-toc-link {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 5px 12px;
  border-left: 3px solid transparent;
  border-radius: 0 4px 4px 0;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.about-toc-link:hover {
  color: var(--text-primary);
  background: var(--bg-inset);
}
.about-toc-link.active {
  color: var(--accent-header);
  border-left-color: var(--accent-header);
  font-weight: 500;
}

.about-content {
  flex: 1;
  min-width: 0;
}

.about-content .overview-section {
  margin-bottom: 28px;
  scroll-margin-top: 160px;
}

.about-body {
  font-family: 'Crimson Text', Georgia, serif;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-primary);
}
.about-body p {
  margin-bottom: 0.75em;
}
.about-body ul, .about-body ol {
  margin: 0.5em 0 0.75em 1.5em;
}
.about-body li {
  margin-bottom: 0.35em;
}
.about-body a {
  color: var(--accent-header);
  text-decoration: underline;
  text-decoration-color: var(--border-panel);
  text-underline-offset: 2px;
}
.about-body a:hover {
  text-decoration-color: var(--accent-header);
}
.about-body blockquote {
  background: var(--bg-inset);
  border-left: 4px solid var(--accent-header);
  padding: 12px 16px;
  margin: 0.75em 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-style: italic;
}
.about-body h3 {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent-header);
  margin: 1.25em 0 0.5em;
}
.about-body strong {
  font-weight: 700;
  color: var(--text-primary);
}

.about-screenshot {
  display: block;
  max-width: 100%;
  border: 1px solid var(--border-panel);
  border-radius: var(--radius);
  margin: 12px 0 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.app-version {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #8a7f9e;
  text-align: center;
  margin-top: 2rem;
  opacity: 0.6;
}

@media (max-width: 768px) {
  .about-layout {
    flex-direction: column;
    gap: 0;
  }
  .about-toc {
    width: 100%;
    min-width: unset;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-panel);
    margin-bottom: 16px;
  }
  .about-toc-link {
    border-left: none;
    border-bottom: 2px solid transparent;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
  }
  .about-toc-link.active {
    border-left-color: transparent;
    border-bottom-color: var(--accent-header);
  }
}