/*
 * theme.css — the site's design system, loaded last.
 * One neutral palette, one accent, one type scale. Overrides the older
 * per-component styling (gradients, glows, coloured pills, ALL-CAPS labels).
 */

:root {
  --paper: #f8f7f4;
  --surface: #ffffff;
  --ink: #1c1b19;
  --text: #34322f;
  --muted: #6f6b65;
  --rule: #e6e2db;
  --rule-strong: #d4cec4;
  --tint: #f3f1ec;
  --accent: #1f4f8f;
  --accent-ink: #163b6d;
  --accent-soft: #edf2f9;
  --quantum: #5a3f96;
  --good: #2e7651;
  --bad: #a3422e;
  /* dark "instrument" panels keep their slate family, minus the neon */
  --inst-bg: #0f172a;
  --inst-panel: #162033;
  --inst-line: #273246;
  --inst-text: #d8dee8;
  --inst-accent: #9cc0ee;
  --radius: 6px;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
}

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper) !important;
  color: var(--text) !important;
  font-family: var(--sans) !important;
  font-size: 15.5px;
  line-height: 1.7;
  font-feature-settings: 'kern', 'liga';
  -webkit-font-smoothing: antialiased;
}
::selection { background: #cfdcf0; color: var(--ink); }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 2px; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

/* ---------- Header ---------- */
.pro-navbar {
  height: auto !important; min-height: 56px; background: rgba(248, 247, 244, 0.96) !important;
  border-bottom: 1px solid var(--rule) !important; box-shadow: none !important;
}
.pro-brand { gap: 14px; }
.pro-brand-title {
  font-family: var(--serif) !important; font-size: 19px !important; font-weight: 600 !important;
  color: var(--ink) !important; text-decoration: none; letter-spacing: -0.01em;
}
.pro-brand-sub { color: var(--muted) !important; font-size: 13px !important; border-left-color: var(--rule-strong) !important; }
.pro-btn {
  background: transparent !important; color: var(--text) !important; border: 1px solid var(--rule-strong) !important;
  border-radius: var(--radius) !important; font-weight: 500 !important; font-size: 13px !important; box-shadow: none !important;
}
.pro-btn:hover { background: var(--tint) !important; color: var(--ink) !important; border-color: #bdb6aa !important; }
.pro-btn.primary { background: var(--ink) !important; border-color: var(--ink) !important; color: #fff !important; }
.pro-btn.primary:hover { background: #33312d !important; }
.audio-menu-panel { border-color: var(--rule) !important; box-shadow: 0 8px 24px rgba(28, 27, 25, 0.10) !important; }

/* ---------- Sidebar ---------- */
.pro-sidebar {
  background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 4px 0 !important;
}
.sb-top-ctrl { border-bottom-color: var(--rule) !important; }
.sb-mini-btn { background: transparent !important; border-color: var(--rule-strong) !important; color: var(--muted) !important; }
.sb-mini-btn:hover { background: var(--tint) !important; color: var(--ink) !important; }
.sb-heading, .sb-heading span {
  font-family: var(--sans) !important; text-transform: none !important; letter-spacing: 0 !important;
  font-size: 12.5px !important; font-weight: 600 !important; color: var(--muted) !important;
}
.sb-link {
  font-size: 13.5px !important; color: var(--text) !important; background: transparent !important;
  border-radius: 0 !important; border-left: 2px solid transparent !important; padding-left: 12px !important;
}
.sb-link:hover { color: var(--ink) !important; background: transparent !important; border-left-color: var(--rule-strong) !important; }
.sb-link.active { color: var(--accent) !important; font-weight: 600 !important; border-left-color: var(--accent) !important; background: transparent !important; }
.sb-num { display: none !important; }
@media (max-width: 1080px) {
  .pro-sidebar { background: var(--surface) !important; padding: 14px 10px !important; }
}

/* ---------- Sections ---------- */
.section-box {
  background: var(--surface) !important; border: 1px solid var(--rule) !important; border-radius: var(--radius) !important;
  box-shadow: none !important; padding: 40px 48px !important; margin-bottom: 32px !important;
}
.section-head { border-bottom: 0 !important; padding-bottom: 0 !important; margin-bottom: 22px !important; }
.section-head h2, .section-box h2 {
  font-family: var(--serif) !important; font-weight: 600 !important; font-size: 28px !important; line-height: 1.25 !important;
  color: var(--ink) !important; letter-spacing: -0.015em !important; max-width: 34em;
}
.section-box h3, .section-box .ed-serif { font-family: var(--serif) !important; font-weight: 600 !important; }
@media (max-width: 768px) {
  .section-box { padding: 24px 18px !important; }
  .section-head h2, .section-box h2 { font-size: 23px !important; }
}

/* Section labels: a quiet line above the title, not a coloured pill */
h2 > .badge, .section-head .badge {
  display: block !important; width: fit-content; background: none !important; border: 0 !important; padding: 0 !important;
  margin: 0 0 8px !important; color: var(--accent) !important; font: 600 13px/1.4 var(--sans) !important;
  letter-spacing: 0.01em !important; text-transform: none !important; box-shadow: none !important;
}
/* Every other badge becomes a small neutral tag */
.badge {
  background: var(--tint) !important; color: var(--muted) !important; border: 1px solid var(--rule) !important;
  font-family: var(--sans) !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important;
  border-radius: 4px !important; box-shadow: none !important;
}
.journey-studio .badge, .qi .badge { background: transparent !important; border-color: var(--inst-line) !important; color: var(--inst-accent) !important; }

/* No shouting: sentence case everywhere */
[style*="text-transform:uppercase"], [style*="text-transform: uppercase"],
.jt-step, .df-step, .ql-table th, .qi h4, .story-k {
  text-transform: none !important; letter-spacing: 0 !important;
}

/* ---------- Cards and chips ---------- */
.card, .df-card, .lib-card {
  border-radius: var(--radius) !important; box-shadow: none !important;
}
.card { border-color: var(--rule) !important; }
.card:hover, .df-card:hover, .lib-card:hover, .j-tab:hover, .sym-chip:hover, .vmath-pill:hover, .paper-nav-pill:hover { transform: none !important; }
.sym-chip { border-radius: 4px !important; box-shadow: none !important; }
.sym-chip.active { background: #24426f !important; border-color: var(--inst-accent) !important; color: #fff !important; }
.speak-mini {
  background: transparent !important; color: var(--muted) !important; border: 1px solid var(--rule-strong) !important;
  border-radius: var(--radius) !important; font-weight: 500 !important; box-shadow: none !important;
}

/* Flat fills instead of gradients */
.tab-btn.active, .paper-nav-pill.active, .vmath-pill.active, .voice-btn, .voice-btn.lang-toggle, .pdf-btn, .stream-ctrl-btn, .page-btn.next-cta {
  background: var(--accent) !important; box-shadow: none !important;
}
.brand-title, .bridge-title.q-title { background: none !important; -webkit-text-fill-color: currentColor !important; color: inherit !important; }
.bridge-col.quantum-col { background: var(--inst-panel) !important; }
.fill-blue { background: #4f7fbf !important; } .fill-purple { background: #7a63b0 !important; }
.fill-emerald { background: #3f8a63 !important; } .fill-amber { background: #b98a2e !important; } .fill-rose { background: #b0564a !important; }

/* ---------- Dark instrument panels: keep the slate, lose the neon ---------- */
.journey-studio, .paper-sandbox, .pro-main [style*="linear-gradient"] {
  background: var(--inst-bg) !important; border: 1px solid var(--inst-line) !important; box-shadow: none !important;
  border-radius: 8px !important;
}
.pro-main [style*="border:2px solid"], .pro-main [style*="border: 2px solid"],
.pro-main [style*="border:1.5px solid"], .pro-main [style*="border: 1.5px solid"] { border-width: 1px !important; }
.journey-studio canvas, .pro-main [style*="background:#060a12"] { border: 1px solid var(--inst-line) !important; }
.j-tab { border-radius: 6px !important; border-width: 1px !important; background: var(--inst-panel) !important; }
.j-tab.active { background: #1f3352 !important; border-color: var(--inst-accent) !important; box-shadow: none !important; }
.j-tab .jt-step { color: var(--inst-accent) !important; font-weight: 600 !important; }
.j-tab .jt-name { font-weight: 600 !important; }
.analogy-banner {
  background: var(--inst-panel) !important; border: 1px solid var(--inst-line) !important; border-left: 3px solid var(--inst-accent) !important;
  border-radius: 6px !important;
}
.controls-row { border-radius: 6px !important; }
.pro-main [style*="box-shadow"] { box-shadow: none !important; }

/* ---------- Tables ---------- */
.comp-table th, .pro-main table th {
  background: var(--tint) !important; color: var(--ink) !important; font-family: var(--sans) !important;
  font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; border-color: var(--rule) !important;
}
.comp-table td, .pro-main table td { border-color: var(--rule) !important; }
.journey-studio table th, .qi table th { background: var(--inst-panel) !important; color: var(--inst-text) !important; }

/* ---------- Lab and inspector in the shared palette ---------- */
.ql-step { border-top-color: var(--rule) !important; }
.ql-step-num { background: transparent !important; color: var(--accent) !important; border: 1px solid var(--accent); font-family: var(--sans) !important; font-weight: 600 !important; }
.ql-step-head h3 { font-family: var(--serif) !important; font-size: 21px !important; }
.ql-card { border-color: var(--rule) !important; border-radius: var(--radius) !important; }
.ql-chip { background: var(--tint) !important; border-color: var(--rule) !important; font-family: var(--sans) !important; font-weight: 500 !important; }
.ql-tag.q { background: #efeaf7 !important; color: var(--quantum) !important; }
.ql-btn-sm { background: transparent !important; border-color: var(--rule-strong) !important; color: var(--accent) !important; }
.ql-drop { background: var(--tint) !important; border-color: var(--rule-strong) !important; }
.qi, .ql-details > summary { background: var(--inst-bg) !important; border-color: var(--inst-line) !important; }
.qi h4 { color: var(--inst-accent) !important; font-family: var(--sans) !important; font-weight: 600 !important; font-size: 12.5px !important; }
.ql-details > summary { color: var(--inst-text) !important; font-weight: 600 !important; }
.qi-export button.primary { background: #24426f !important; border-color: var(--inst-accent) !important; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--rule); background: var(--paper); margin-top: 8px; }
.site-footer-inner {
  max-width: 1160px; margin: 0 auto; padding: 44px 24px 56px; display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px;
}
.site-footer h2 { font-family: var(--serif); font-size: 22px; color: var(--ink); margin: 0 0 12px; font-weight: 600; }
.site-footer pre {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 12px;
  font: 12.5px/1.6 var(--mono); color: var(--text); overflow-x: auto; white-space: pre;
}
.site-footer-meta p { font-size: 14px; color: var(--text); margin: 0 0 12px; }
.site-footer-small { color: var(--muted) !important; font-size: 13px !important; }
@media (max-width: 860px) { .site-footer-inner { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 32px 16px 44px; } }

/* ---------- Modals ---------- */
.modal-content { border-radius: 8px !important; border-width: 1px !important; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35) !important; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

/* ---------- Fixes after the first pass ---------- */
/* Buttons inside dark panels keep light text */
.journey-studio .pro-btn, .qi .pro-btn, .paper-sandbox .pro-btn, .pdf-modal .pro-btn,
.pro-main [style*="background:#0f172a"] .pro-btn, .pro-main [style*="background:#1e293b"] .pro-btn, .pro-main [style*="background:#090d16"] .pro-btn {
  color: var(--inst-text) !important; border-color: var(--inst-line) !important; background: transparent !important;
}
.journey-studio .pro-btn:hover, .qi .pro-btn:hover, .paper-sandbox .pro-btn:hover { background: var(--inst-panel) !important; color: #fff !important; }
.journey-studio .pro-btn[style*="background:#2f5f9e"] { background: #24426f !important; border-color: var(--inst-accent) !important; color: #fff !important; }
/* Label above the title, button on the right */
.section-head { display: flex !important; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.section-head h2 { display: block !important; flex: 1 1 420px; margin: 0 !important; }
.bridge-title.q-title { color: var(--inst-accent) !important; }
/* Sentence case throughout the content */
.pro-main *, .pdf-modal * { text-transform: none !important; }
.chip-sub { opacity: 0.7; font-weight: 500; margin-left: 4px; }
.sym-chip { font-weight: 500 !important; }

@media (max-width: 768px) {
  .pro-navbar { padding: 8px 12px !important; }
  .pro-brand-title { font-size: 17px !important; }
}

/* Link list in related-paper tables */
.paper-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; min-width: 150px; }
.paper-links a { font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.paper-links a::after { content: " \2197"; font-weight: 400; }
.paper-links a:hover { color: var(--accent-ink); }