/* ===== Explorer ===== */
.metric-row { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--card-border); font-size: 13px; }
.metric-row:last-child { border-bottom: none; }
.metric-row b { font-family: var(--font-display); font-size: 17px; }
.pager { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 14px; border-top: 1px solid var(--card-border); }
.row-count-label { font-family: var(--font-mono); font-size: 11px; color: var(--on-surface-variant); }

#detail-panel {
  position: fixed; top: 76px; right: 0; bottom: 0; width: 380px; max-width: 92vw;
  background: var(--surface-bright); border-left: 1px solid var(--card-border);
  transform: translateX(100%); transition: transform .35s ease; z-index: 70; overflow-y: auto; padding: var(--space-4);
}
#detail-panel.open { transform: translateX(0); box-shadow: var(--shadow-elevated); }
.detail-field { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--card-border); }
.detail-field .eyebrow { font-size: 10px; }

/* ===== Dashboard ===== */
.dash-hero { position: relative; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg); padding: var(--space-5); overflow: hidden; }
.dash-tile { display: flex; flex-direction: column; gap: var(--space-2); }
.dash-tile .stat { font-family: var(--font-display); font-size: 34px; }
.history-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--card-border); font-size: 13px; }
.history-item:last-child { border-bottom: none; }

/* ===== Education ===== */
.glossary-term { padding: var(--space-3) 0; border-bottom: 1px solid var(--card-border); }
.glossary-term .id-tag { font-family: var(--font-mono); font-size: 10px; color: var(--gold-accent); }
.glossary-term h4 { font-size: 17px; margin: 4px 0; }
.chapter-card { padding: var(--space-4); border: 1px solid var(--card-border); border-radius: var(--radius-md); background: var(--card-bg); }
.chapter-card .chap-num { font-family: var(--font-mono); font-size: 11px; color: var(--gold-accent); }
.fact-carousel { display: flex; align-items: center; gap: var(--space-3); }
.fact-card { flex: 1; padding: var(--space-3); background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-md); min-height: 76px; display: flex; align-items: center; }

/* ===== Analysis ===== */
.stat-bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.stat-bar-row .label { width: 140px; font-size: 12px; color: var(--on-surface-variant); flex-shrink: 0; }
.stat-bar-track { flex: 1; height: 10px; background: var(--toggle-bg); border-radius: 6px; overflow: hidden; }
.stat-bar-fill { height: 100%; border-radius: 6px; background: var(--gold-accent); transition: width .5s ease; }
.stat-bar-row .val { width: 60px; text-align: right; font-family: var(--font-mono); font-size: 12px; }
.numeric-stat-card { padding: var(--space-3); border: 1px solid var(--card-border); border-radius: var(--radius-md); background: var(--card-bg); }
.numeric-stat-card .name { font-family: var(--font-mono); font-size: 11px; color: var(--on-surface-variant); margin-bottom: 6px; }
.numeric-stat-card .row { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; }

/* ===== Settings ===== */
.setting-row { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--card-border); gap: var(--space-3); }
.setting-row:last-child { border-bottom: none; }
.setting-row .copy strong { display: block; font-size: 14.5px; margin-bottom: 3px; }
.setting-row .copy p { font-size: 12.5px; color: var(--on-surface-variant); margin: 0; max-width: 420px; }
.switch { position: relative; width: 46px; height: 26px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track { position: absolute; inset: 0; background: var(--outline-variant); border-radius: 999px; cursor: pointer; transition: background .2s ease; }
.switch .track::after { content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; background: var(--surface); border-radius: 50%; transition: transform .2s ease; }
.switch input:checked + .track { background: var(--gold-accent); }
.switch input:checked + .track::after { transform: translateX(20px); }
.theme-swatch-row { display: flex; gap: var(--space-3); }
.theme-swatch { flex: 1; padding: var(--space-3); border-radius: var(--radius-md); border: 2px solid var(--card-border); cursor: pointer; text-align: center; transition: border-color .2s ease; }
.theme-swatch.active { border-color: var(--gold-accent); }
.theme-swatch .swatch-preview { height: 46px; border-radius: 8px; margin-bottom: 10px; }

/* ===== About ===== */
.founder-card { padding: var(--space-4); border: 1px solid var(--card-border); border-radius: var(--radius-lg); background: var(--card-bg); }
.founder-card .quote { font-family: var(--font-display); font-style: italic; margin-top: var(--space-2); color: var(--on-surface-variant); }
.value-row { display: flex; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--card-border); }
.value-row .num { font-family: var(--font-display); font-size: 26px; color: var(--gold-accent); width: 46px; flex-shrink: 0; }

/* ===== 404 ===== */
.lost-scene { text-align: center; padding: var(--space-8) var(--space-3); position: relative; }
.lost-scene h1 { font-size: clamp(52px, 12vw, 140px); letter-spacing: -0.02em; }
.coords { font-family: var(--font-mono); font-size: 12px; color: var(--on-surface-variant); margin-top: var(--space-3); }

/* ===== Keyboard-nav accessibility (Settings toggle) ===== */
[data-kbnav="on"] a:focus-visible, [data-kbnav="on"] button:focus-visible, [data-kbnav="on"] input:focus-visible {
  outline: 2px solid var(--gold-accent); outline-offset: 3px;
}