/* =====================================================================
   ANTIQUARIAN STYLESHEET — shared across chemistry / physics / CS
   Layered AFTER each file's own <style> blocks, so this wins.
   Per-subject accent stays (--accent already set inside each file),
   but the global frame is now vellum + Garamond + oxblood + gold.
   ===================================================================== */

/* Tokens (override the linen-era ones) */
:root{
  --bg:#ece2cd !important;
  --bg-soft:#e1d5b8 !important;
  --side:#e1d5b8 !important;
  --ink-strong:#1a1108 !important;
  --ink:#2a1d10 !important;
  --ink-soft:#5a4730 !important;
  --ink-faint:#8c7a5e !important;
  --rule:rgba(42,29,16,0.16) !important;
  --rule-strong:rgba(42,29,16,0.28) !important;
  --card:#f1e8d3 !important;
  --card-warm:#e1d5b8 !important;
  --input-bg:#ece2cd !important;
  --oxblood:#7a2e1f;
  --oxblood-dim:rgba(122,46,31,0.10);
  --gold:#a47e3c;
  --gold-dim:rgba(164,126,60,0.18);
  --shadow-sm:0 1px 0 rgba(42,29,16,0.05),0 1px 2px rgba(42,29,16,0.06);
  --shadow-md:0 1px 0 rgba(42,29,16,0.05),
              0 6px 12px -2px rgba(76,53,30,0.14),
              0 18px 32px -10px rgba(76,53,30,0.16);
  --ease-anti:cubic-bezier(0.4,0,0.2,1);
}

/* Body — vellum + Garamond + paper grain */
html,body{background:var(--bg) !important}
body{
  font-family:'EB Garamond', Georgia, serif !important;
  color:var(--ink) !important;
  line-height:1.55;
  font-feature-settings:'liga','kern','onum';
  -webkit-font-smoothing:antialiased;
  position:relative;
}
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  opacity:0.85;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='4' seed='7'/><feColorMatrix values='0 0 0 0 0.21  0 0 0 0 0.14  0 0 0 0 0.06  0 0 0 0.12 0'/></filter><rect width='320' height='320' filter='url(%23n)'/></svg>");
  background-size:320px 320px;
  mix-blend-mode:multiply;
}
/* second, larger-scale layer — gives the eye a "long fibre" texture
   instead of just uniform grain. Subtle, but it's what makes a paper
   actually read as paper. */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  opacity:0.35;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='800'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.012 0.07' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.30  0 0 0 0 0.20  0 0 0 0 0.08  0 0 0 0.18 0'/></filter><rect width='800' height='800' filter='url(%23f)'/></svg>");
  background-size:800px 800px;
  mix-blend-mode:multiply;
}
/* lift real content above noise layer */
#topnav,.page,.pt-details,#periodic-page,.toast{position:relative;z-index:1}

/* ====== TOPNAV — B-tier (sober, left-aligned, sans nav links) ====== */
#topnav{
  background:rgba(236,226,205,0.85) !important;
  border-bottom:1px solid var(--rule) !important;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  height:60px !important;padding:0 32px !important;
}
#topnav .brand{
  font-family:'Cormorant Garamond', serif !important;
  font-weight:500 !important;
  font-size:20px !important;letter-spacing:0.005em !important;
  color:var(--ink-strong) !important;
  background:none !important;-webkit-text-fill-color:initial !important;
  display:flex;align-items:center;gap:10px;
}
#topnav .brand::before{
  content:'';width:7px;height:7px;border-radius:50%;
  background:var(--oxblood);
  box-shadow:0 0 0 3px var(--oxblood-dim);
}
.nav-btn{
  font-family:'Inter', sans-serif !important;
  background:transparent !important;border:1px solid transparent !important;
  color:var(--ink-soft) !important;
  padding:7px 14px !important;border-radius:7px !important;
  font-size:13px !important;font-weight:500 !important;
}
.nav-btn.active{
  background:var(--vellum-card,#f1e8d3) !important;
  color:var(--ink-strong) !important;border-color:var(--rule) !important;
}
.nav-btn:hover:not(.active){
  background:#f1e8d3 !important;color:var(--ink-strong) !important;
}
#topnav .pill{
  font-family:'Inter', sans-serif !important;
  background:#f1e8d3 !important;border:1px solid var(--rule) !important;
  color:var(--ink-soft) !important;border-radius:999px !important;
  font-size:11.5px !important;font-weight:500 !important;
  padding:5px 11px !important;
}
#topnav .pill.ok{background:#f1e8d3 !important;color:var(--ink-soft) !important;border-color:var(--rule) !important}

/* search bar (chem only) */
#search-wrap{background:#f1e8d3 !important;border:1px solid var(--rule) !important;border-radius:9px !important;color:var(--ink) !important}
#search-wrap:focus-within{border-color:var(--oxblood) !important}
#search-input{font-family:'Inter',sans-serif !important;color:var(--ink-strong) !important;background:transparent !important}
#search-input::placeholder{color:var(--ink-faint) !important}
#search-results{background:#f1e8d3 !important;border:1px solid var(--rule) !important;color:var(--ink) !important}
#search-results .sr-item{border-bottom:1px solid var(--rule) !important;color:var(--ink) !important}
#search-results .sr-item:hover,#search-results .sr-item.kbd{background:rgba(122,46,31,0.10) !important;color:var(--ink-strong) !important}
#search-results .sr-topic{color:var(--oxblood) !important;font-family:'Inter',sans-serif !important}
#search-results .sr-empty{color:var(--ink-faint) !important;font-style:italic}
#to-top{background:var(--ink-strong) !important;color:var(--bg) !important}
#to-top:hover{background:var(--oxblood) !important}
#read-progress{background:var(--oxblood) !important}

/* ====== TOC (notes sidebar) ====== */
aside.toc{background:var(--side) !important;border-right:1px solid var(--rule) !important;width:280px}
aside.toc h2{
  font-family:'Inter', sans-serif !important;
  color:var(--ink-faint) !important;
  font-size:10.5px !important;text-transform:uppercase;letter-spacing:0.18em;font-weight:600 !important;
  border-bottom:1px solid var(--rule) !important;
}
aside.toc a{
  font-family:'EB Garamond', serif !important;
  color:var(--ink-soft) !important;font-size:14.5px !important;
  padding:7px 12px !important;border-radius:6px !important;
}
aside.toc a:hover{background:rgba(42,29,16,0.06) !important;color:var(--ink-strong) !important;transform:none !important}
aside.toc a.active{background:rgba(122,46,31,0.10) !important;color:var(--ink-strong) !important;font-weight:500;font-style:italic}
/* TOC toggle button — fixed to the viewport so it follows you as you scroll.
   Lives just under the 60px topnav, left edge with a little breathing room. */
.toc-toggle{
  position:fixed !important;
  top:74px !important;
  left:14px !important;
  z-index:40 !important;
  background:var(--card) !important;
  border:1px solid var(--rule) !important;
  color:var(--ink-soft) !important;
  box-shadow:var(--shadow-sm) !important;
  width:38px !important;height:38px !important;
  border-radius:10px !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
}
.toc-toggle:hover{background:#f1e8d3 !important;color:var(--ink-strong) !important;transform:none !important;border-color:var(--rule-strong) !important}
.toc-toggle.collapsed{background:var(--ink-strong) !important;border-color:var(--ink-strong) !important;color:var(--bg) !important}
/* Push the article content slightly right so the floating button never overlaps
   the first letter of an h1 / paragraph when the TOC is collapsed. */
aside.toc.collapsed + main.notes-main{padding-left:74px !important}

/* ====== NOTES PAGE — A-tier (book typography) ====== */
main.notes-main{padding:50px 64px 60px 80px !important}
main.notes-main::-webkit-scrollbar-thumb{background:var(--rule-strong) !important}

.ai-note{
  max-width:760px;margin:0 auto 36px !important;
  padding:12px 16px !important;
  background:var(--gold-dim) !important;
  border:1px solid rgba(164,126,60,0.32) !important;
  border-radius:8px !important;
  font-family:'EB Garamond', serif !important;
  font-style:italic !important;font-size:14px !important;
  color:var(--ink-soft) !important;line-height:1.5 !important;
  display:flex;align-items:flex-start;gap:9px;
}
.ai-note::before{
  content:'!' !important;
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;
  border:1.3px solid var(--gold) !important;color:var(--gold) !important;
  font-family:'Inter',sans-serif !important;font-weight:700;font-size:10px;
  flex-shrink:0;margin-top:2px;font-style:normal;
}

.header{
  border-bottom:1px solid var(--gold) !important;
  text-align:left !important;
  padding:8px 0 32px !important;margin-bottom:48px !important;
  position:relative;
}
.header::after{
  content:'';position:absolute;left:0;right:0;bottom:-4px;
  height:1px;background:var(--gold);opacity:0.55;
}
.header h1{
  font-family:'Cormorant Garamond', serif !important;
  font-size:54px !important;font-weight:400 !important;
  letter-spacing:-0.008em !important;line-height:1.05 !important;
  background:none !important;-webkit-text-fill-color:initial !important;
  color:var(--ink-strong) !important;
}
.header .subtitle{
  font-family:'EB Garamond', serif !important;
  font-style:italic !important;font-weight:400 !important;
  font-size:17px !important;color:var(--ink-soft) !important;
  margin-top:6px;
}
.header .badges{justify-content:flex-start !important;margin-top:16px !important}
.badge{
  font-family:'Inter', sans-serif !important;
  background:#f1e8d3 !important;border:1px solid var(--rule) !important;
  color:var(--ink-soft) !important;border-radius:999px !important;
  font-size:11px !important;font-weight:500 !important;
  padding:4px 12px !important;
}

section.topic{
  background:transparent !important;
  border:none !important;border-radius:0 !important;
  padding:0 !important;
  margin:0 auto 64px !important;     /* centred inside notes-main */
  max-width:780px;
}
/* Center the page header / AI banner with the same column width */
main.notes-main > .header,
main.notes-main > .ai-note{
  max-width:780px !important;
  margin-left:auto !important;margin-right:auto !important;
}
section.topic h2{
  font-family:'Cormorant Garamond', serif !important;
  color:var(--ink-strong) !important;
  font-size:34px !important;font-weight:500 !important;
  letter-spacing:-0.005em !important;
  display:flex;align-items:baseline;gap:14px;
  margin-bottom:6px !important;
}
section.topic h2 .num{
  font-family:'EB Garamond', serif !important;
  font-size:14px !important;font-style:italic !important;
  color:var(--oxblood) !important;
  font-variant:small-caps !important;letter-spacing:0.16em !important;
  background:transparent !important;
  width:auto !important;height:auto !important;
  border-radius:0 !important;font-weight:500 !important;
  position:relative;top:-4px;
  display:inline-block !important;
}
section.topic .topic-sub{
  font-family:'EB Garamond', serif !important;
  color:var(--ink-soft) !important;font-style:italic;font-size:15.5px !important;font-weight:400 !important;
  padding-bottom:18px !important;border-bottom:1px solid var(--rule) !important;
  margin-bottom:24px !important;
}

h3{
  font-family:'Cormorant Garamond', serif !important;
  color:var(--ink-strong) !important;font-size:23px !important;font-weight:500 !important;
  padding-left:0 !important;border-left:none !important;
  margin:32px 0 12px !important;
}
h4{
  font-family:'Inter', sans-serif !important;
  color:var(--oxblood) !important;font-size:12px !important;
  text-transform:uppercase !important;letter-spacing:0.12em !important;font-weight:600 !important;
  margin:20px 0 8px !important;
}
section.topic p{
  font-family:'EB Garamond', serif !important;
  font-size:17px !important;line-height:1.72 !important;
  color:var(--ink) !important;
  margin:0 0 18px !important;
  text-align:justify;hyphens:auto;
}
section.topic p strong{color:var(--ink-strong) !important;font-weight:600 !important}
section.topic p em{color:var(--oxblood) !important;font-style:italic !important;font-weight:500}

/* drop cap on the first paragraph after each h2 */
section.topic h2 + p::first-letter,
section.topic h2 + .topic-sub + p::first-letter{
  font-family:'Cormorant Garamond', serif !important;
  font-weight:500 !important;
  font-size:4.4em !important;line-height:0.84 !important;
  float:left;padding:6px 12px 0 0;
  color:var(--oxblood) !important;font-style:normal;
}

.defn{
  background:var(--card) !important;
  border-left:3px solid var(--oxblood) !important;
  padding:16px 20px !important;border-radius:2px !important;
  color:var(--ink) !important;font-family:'EB Garamond', serif !important;
  box-shadow:var(--shadow-sm);position:relative;
}
.defn strong{color:var(--ink-strong) !important;font-weight:600 !important}
.formula{
  background:var(--card) !important;
  border:none !important;border-left:3px solid var(--oxblood) !important;
  padding:18px 22px !important;margin:18px 0 !important;border-radius:2px !important;
  font-family:'EB Garamond', serif !important;
  box-shadow:var(--shadow-sm);position:relative;
}
.formula::before{
  content:'§';position:absolute;top:10px;right:14px;
  color:var(--gold);font-family:serif;font-size:16px;font-style:italic;
}
.formula .label{
  font-family:'Inter', sans-serif !important;
  color:var(--ink-faint) !important;
  font-size:10.5px !important;letter-spacing:0.15em !important;font-weight:600 !important;
  text-transform:uppercase;
}
.formula .eq,.formula .fb{
  font-family:'EB Garamond', serif !important;
  color:var(--ink-strong) !important;font-size:18px !important;font-style:italic !important;
}
.tip{background:rgba(61,110,79,0.08) !important;border-left:3px solid #3d6e4f !important;color:var(--ink) !important;font-family:'EB Garamond', serif !important}
.warn{background:rgba(122,46,31,0.08) !important;border-left:3px solid var(--oxblood) !important;color:var(--ink) !important;font-family:'EB Garamond', serif !important}
.tip::before,.warn::before{content:'' !important}
.example{
  background:var(--card) !important;border-left:3px solid var(--gold) !important;
  font-family:'EB Garamond', serif !important;
}
.example h5{
  font-family:'Inter', sans-serif !important;
  color:var(--ink-strong) !important;font-size:11px !important;
  font-weight:600 !important;letter-spacing:0.12em !important;
}
ul,ol{font-family:'EB Garamond', serif !important;color:var(--ink) !important;font-size:16px}
table{background:var(--card) !important;border:1px solid var(--rule) !important;font-size:14px !important;font-family:'EB Garamond', serif !important}
th{background:#e6dec9 !important;color:var(--ink-strong) !important;border-bottom:1px solid var(--rule-strong) !important;font-weight:600;font-family:'Inter',sans-serif !important;font-size:12px !important;text-transform:uppercase;letter-spacing:0.06em}
td{border-bottom:1px solid var(--rule) !important;color:var(--ink) !important}
tr:hover td{background:rgba(122,46,31,0.06) !important}
code{background:#e6dec9 !important;color:var(--oxblood) !important;font-size:13px !important;font-family:'JetBrains Mono', Consolas, monospace !important;font-style:normal}
pre{background:#e6dec9 !important;border:1px solid var(--rule) !important;color:var(--ink-strong) !important;font-family:'JetBrains Mono', Consolas, monospace !important}
.key-eq-summary{background:var(--card) !important;border:1px solid var(--rule) !important}
.key-eq-summary h4{color:var(--oxblood) !important}

/* ====== TUTOR PAGE — B-tier ====== */
.tutor-container{background:var(--bg) !important}
#sidebar{background:var(--side) !important;border-right:1px solid var(--rule) !important;width:280px}
.sidebar-head{border-bottom:1px solid var(--rule) !important}
.new-chat-btn{
  font-family:'Inter', sans-serif !important;
  background:var(--ink-strong) !important;color:var(--bg) !important;
  border:none !important;border-radius:8px !important;
}
.new-chat-btn:hover{background:var(--oxblood) !important;filter:none !important}
.chat-item{
  font-family:'EB Garamond', serif !important;
  color:var(--ink-soft) !important;font-size:14px !important;
}
.chat-item:hover{background:rgba(42,29,16,0.05) !important}
.chat-item.active{background:rgba(122,46,31,0.10) !important;color:var(--ink-strong) !important;font-weight:500;font-style:italic}
.chat-num{background:#e6dec9 !important;color:var(--ink-soft) !important;font-family:'JetBrains Mono', monospace !important}
.chat-item.active .chat-num{background:var(--oxblood) !important;color:var(--bg) !important}
.drag-handle,.chat-act-btn{color:var(--ink-faint) !important}
.drag-handle:hover,.chat-act-btn:hover{color:var(--ink-strong) !important;background:#f1e8d3 !important}
.chat-act-btn.del:hover{color:var(--oxblood) !important}
.chat-title-edit{background:var(--bg) !important;color:var(--ink-strong) !important;border-color:var(--oxblood) !important;font-family:'EB Garamond', serif !important}
.sidebar-toggle{background:transparent !important;border:1px solid var(--rule) !important;color:var(--ink-soft) !important;font-family:'Inter',sans-serif !important;font-size:12px !important}
.sidebar-toggle:hover{background:#f1e8d3 !important;color:var(--ink-strong) !important}
.empty-list{color:var(--ink-faint) !important;font-family:'EB Garamond', serif !important;font-style:italic}

header.chat-header{background:var(--bg) !important;border-bottom:1px solid var(--rule) !important;padding:14px 24px !important}
header.chat-header h1{
  font-family:'Cormorant Garamond', serif !important;
  font-weight:500 !important;font-size:17px !important;
  color:var(--ink-strong) !important;letter-spacing:-0.005em;
}
header.chat-header h1 .dot{background:#7a8b4f !important;box-shadow:0 0 0 2px rgba(122,139,79,0.18) !important}
.hl-btn{
  font-family:'Inter', sans-serif !important;
  background:transparent !important;border:1px solid var(--rule) !important;
  color:var(--ink-soft) !important;font-size:11.5px !important;border-radius:999px !important;
}
.hl-btn:hover{background:#f1e8d3 !important;color:var(--ink-strong) !important}

#msgs{background:var(--bg) !important;padding:28px 0 20px !important}
.msg-wrap{max-width:clamp(320px,100%,1100px) !important;width:100%;padding:0 32px !important;margin:0 auto !important}
.msg.user{
  background:var(--vellum-deep,#e1d5b8) !important;color:var(--ink-strong) !important;
  border-radius:14px 14px 4px 14px !important;max-width:78% !important;
  padding:10px 15px !important;font-size:14.5px !important;
  font-family:'Inter', sans-serif !important;
}
.msg.bot{
  background:transparent !important;color:var(--ink) !important;
  border:none !important;
  font-family:'EB Garamond', serif !important;
  font-size:16px !important;line-height:1.7 !important;
  padding:0 !important;max-width:100% !important;text-align:left;
}
.msg.bot strong{color:var(--oxblood) !important;font-weight:600}
.msg.bot em{color:var(--oxblood) !important;font-style:italic}
.msg.bot pre{background:#e6dec9 !important;border:1px solid var(--rule) !important;font-family:'JetBrains Mono', Consolas, monospace !important;font-size:13.5px !important}
.msg.bot code{background:#e6dec9 !important;color:var(--oxblood) !important;font-family:'JetBrains Mono', Consolas, monospace !important;font-style:normal}
.diagram-wrap{background:var(--card) !important;border:1px solid var(--rule) !important;border-radius:8px !important;padding:18px !important}
.diagram-wrap svg{background:transparent !important;max-width:100%;height:auto}
.diagram-wrap svg text{fill:var(--ink) !important;font-family:'Inter', sans-serif !important}
.hl-key{color:var(--oxblood) !important;border-bottom-color:rgba(122,46,31,0.4) !important}
.hl-good{color:#5a8a6c !important}
.hl-warn{color:#b8552b !important}
.hl-form{color:var(--oxblood) !important;background:rgba(122,46,31,0.08) !important;font-family:'EB Garamond', serif !important;font-style:italic !important}

#input-bar{background:var(--bg) !important;border-top:1px solid var(--rule) !important;padding:14px 24px 22px !important}
#input-wrap{
  max-width:clamp(320px,100%,1100px) !important;width:100% !important;margin:0 auto !important;
  background:var(--card) !important;border:1px solid var(--rule-strong) !important;
  border-radius:14px !important;padding:8px 8px 8px 14px !important;
  box-shadow:var(--shadow-sm);
}
#input-wrap:focus-within{border-color:var(--oxblood) !important;box-shadow:var(--shadow-md) !important}
#input{
  font-family:'Inter', sans-serif !important;
  color:var(--ink-strong) !important;font-size:14.5px !important;
}
#input::placeholder{color:var(--ink-faint) !important}
#send{
  background:var(--ink-strong) !important;color:var(--bg) !important;
  width:34px !important;height:34px !important;border-radius:50% !important;border:none !important;
}
#send:hover{background:var(--oxblood) !important;filter:none !important}

#paper-bar{display:none !important}
#att-btn{
  font-family:'Inter', sans-serif !important;
  background:transparent !important;
  border:1px solid var(--rule) !important;
  color:var(--ink-soft) !important;
  width:32px !important;height:32px !important;
  padding:0 !important;
  border-radius:8px !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  flex-shrink:0 !important;
  margin-right:4px !important;
  cursor:pointer;
  transition:background 0.15s var(--ease-anti),color 0.15s var(--ease-anti),border-color 0.15s var(--ease-anti);
}
#att-btn:hover{color:var(--ink-strong) !important;border-color:var(--rule-strong) !important;background:#f1e8d3 !important}
#att-btn.has-att{background:rgba(122,46,31,0.10) !important;border-color:var(--oxblood) !important;color:var(--oxblood) !important}
#att-btn svg{display:block}
.att-chip{background:var(--card) !important;border:1px solid var(--rule) !important;color:var(--ink-soft) !important;border-radius:999px !important;font-family:'Inter',sans-serif !important;font-size:11.5px !important}
.att-chip .name{color:var(--ink-strong) !important}
.att-chip .stat{color:var(--ink-faint) !important}
.att-chip .del{color:var(--ink-faint) !important}
.att-chip .del:hover{color:var(--oxblood) !important}

/* KaTeX — keep math readable on vellum */
.msg.bot .katex{color:var(--ink-strong) !important;font-size:1.05em}
.msg.bot .katex-display{
  background:var(--card) !important;border-left:3px solid var(--oxblood) !important;
  border-radius:2px;margin:14px 0;padding:14px 18px;
}

/* ====== Periodic table page (chem only) — B-tier ====== */
#periodic-page .pt-head h1{
  font-family:'Cormorant Garamond', serif !important;
  color:var(--ink-strong) !important;font-weight:500 !important;
  font-size:42px !important;letter-spacing:-0.008em;
}
#periodic-page .pt-head h1 em{color:var(--oxblood) !important;font-style:italic;font-weight:400}
#periodic-page .pt-head p{
  font-family:'EB Garamond', serif !important;font-style:italic !important;
  color:var(--ink-soft) !important;font-size:15.5px !important;
}
#periodic-page .pt-legend{font-family:'Inter', sans-serif !important;color:var(--ink-soft) !important}
/* Periodic table tiles — vellum-tinted category palette.
   We DON'T set background here; we set it per-category below so the
   element colour actually shows. Border + typography stay consistent. */
#periodic-page .el{border:1px solid var(--rule) !important}
#periodic-page .el .s{font-family:'Cormorant Garamond', serif !important;color:var(--ink-strong) !important}
#periodic-page .el .z,#periodic-page .el .m{font-family:'Inter', sans-serif !important;color:var(--ink-faint) !important}
/* 10 vellum-shifted category tints — each ~1 notch off the paper colour,
   chosen so you can tell them apart but they still all feel "in" the book */
#periodic-page .el.alkali     {background:#e8d6c0 !important}   /* warm brick */
#periodic-page .el.alkaline   {background:#e8d8b6 !important}   /* warm wheat */
#periodic-page .el.transition {background:#e2dcc5 !important}   /* dusty ochre */
#periodic-page .el.posttrans  {background:#dcd6c2 !important}   /* warm stone */
#periodic-page .el.metalloid  {background:#d4cfb9 !important}   /* dusty olive */
#periodic-page .el.nonmetal   {background:#d6dcbb !important}   /* sage paper */
#periodic-page .el.halogen    {background:#cfd9b5 !important}   /* dry moss */
#periodic-page .el.noble      {background:#c9d6c4 !important}   /* faded eucalyptus */
#periodic-page .el.lanth      {background:#dccab8 !important}   /* tea-stained pink */
#periodic-page .el.actin      {background:#d3b89e !important}   /* aged terracotta */
#periodic-page .el.unk        {background:#d4cdba !important}   /* neutral aged */
/* Legend swatches in the page head: keep the same colours */
#periodic-page .pt-legend i[style*="f7eddc"],
#periodic-page .pt-legend i[style*="background:#f7eddc"]{background:#e8d6c0 !important}
.pt-details{background:var(--card) !important;border:1px solid var(--rule-strong) !important}
.pt-details .ds{font-family:'Cormorant Garamond', serif !important;color:var(--ink-strong) !important}
.pt-details .dn{font-family:'Cormorant Garamond', serif !important;color:var(--ink-strong) !important}
.pt-details .dz{font-family:'Inter', sans-serif !important;color:var(--ink-faint) !important}
.pt-details .cat-pill{background:rgba(122,46,31,0.10) !important;color:var(--ink-strong) !important;font-family:'Inter',sans-serif !important}
.pt-details .grid .k{font-family:'Inter', sans-serif !important;color:var(--ink-faint) !important}
.pt-details .grid .v{font-family:'EB Garamond', serif !important;color:var(--ink-strong) !important}
.pt-details .grid .v.serif{font-style:italic;color:var(--oxblood) !important}
.pt-details .close{border:1px solid var(--rule-strong) !important;color:var(--ink-soft) !important;background:transparent !important}

/* ====== Lessons page (CS only) — keep functional ====== */
#lessons-nav{background:var(--side) !important;border-right:1px solid var(--rule) !important}
#lessons-nav h3{font-family:'Inter', sans-serif !important;color:var(--ink-faint) !important;font-weight:600}
#lessons-nav button{font-family:'EB Garamond', serif !important;color:var(--ink) !important;font-size:14px}
#lessons-nav button:hover{background:#f1e8d3 !important}
#lessons-nav button.active{background:rgba(122,46,31,0.10) !important;border-left-color:var(--oxblood) !important;color:var(--ink-strong) !important;font-style:italic}
#lessons-nav button.done::after{color:#5a8a6c !important}
#lessons-main h2{font-family:'Cormorant Garamond', serif !important;color:var(--ink-strong) !important;border-bottom:1px solid var(--rule) !important;font-weight:500}
#lessons-main h3{font-family:'Cormorant Garamond', serif !important;color:var(--ink-strong) !important;font-weight:500}
#lessons-main h4{color:var(--oxblood) !important}
.progress-bar{background:#e6dec9 !important}
.progress-fill{background:var(--oxblood) !important}
.editor-wrap{border:1px solid var(--rule) !important}
.editor-bar{background:#e6dec9 !important;color:var(--ink-soft) !important;font-family:'Inter',sans-serif !important}
.editor-bar .ebadge{background:var(--oxblood) !important;color:var(--bg) !important;font-family:'Inter',sans-serif !important}
textarea.editor{background:var(--card) !important;color:var(--ink-strong) !important;font-family:'JetBrains Mono', Consolas, monospace !important}
.btn-row{background:#e6dec9 !important}
button.run{background:#5a8a6c !important;color:var(--bg) !important;font-family:'Inter',sans-serif !important}
button.run:hover{background:#3d6e4f !important}
button.check{background:var(--ink-strong) !important;color:var(--bg) !important;font-family:'Inter',sans-serif !important}
button.check:hover{background:var(--oxblood) !important}
button.hint{background:var(--card) !important;color:var(--ink-strong) !important;border:1px solid var(--rule) !important;font-family:'Inter',sans-serif !important}
button.reset{background:transparent !important;color:var(--ink-soft) !important;border:1px solid var(--rule) !important;font-family:'Inter',sans-serif !important}
.output-box{background:var(--ink-strong) !important;color:#c8d6a9 !important;font-family:'JetBrains Mono', monospace !important}
.output-box.error{color:#e3a890 !important}
.feedback.pass{background:rgba(90,138,108,0.15) !important;border-color:#5a8a6c !important;color:var(--ink-strong) !important;font-family:'EB Garamond',serif !important}
.feedback.fail{background:rgba(122,46,31,0.12) !important;border-color:var(--oxblood) !important;color:var(--ink-strong) !important;font-family:'EB Garamond',serif !important}
.feedback.hint{background:var(--gold-dim) !important;border-color:rgba(164,126,60,0.32) !important;color:var(--ink) !important;font-family:'EB Garamond',serif !important;font-style:italic}
.challenge{background:var(--card) !important;border:1px solid var(--oxblood) !important}
.challenge h4{color:var(--oxblood) !important}
.info-box,.warn-box,.success-box{background:var(--card) !important;border-left-color:var(--oxblood) !important;color:var(--ink) !important;font-family:'EB Garamond',serif !important}
.key-term{color:var(--oxblood) !important;font-weight:600}
.nav-buttons{border-top:1px solid var(--rule) !important}
.nav-buttons button{background:var(--ink-strong) !important;color:var(--bg) !important;border-radius:8px;font-family:'Inter',sans-serif !important}
.nav-buttons button:hover{background:var(--oxblood) !important}
.input-inline{background:var(--card) !important;color:var(--ink-strong) !important;border:1px solid var(--rule) !important}
#pyStatus{background:var(--card) !important;border:1px solid var(--rule) !important;color:var(--ink-soft) !important;font-family:'Inter',sans-serif !important}

/* =====================================================================
   RESPONSIVE — fluid spacing, no fixed-pixel cliffs.
   Strategy:
   (1) Use clamp() for paddings + h1 sizes so they breathe with viewport.
   (2) Three breakpoints: ≤1100 (compact desktop), ≤860 (tablet), ≤640 (phone).
   (3) On tablet+: TOC collapses to icon strip. On phone: TOC hidden by
       default, topnav scrolls horizontally, notes-main padding collapses,
       periodic table scrolls horizontally with no shrunk glyphs.
   ===================================================================== */

/* (1) fluid base */
#topnav{padding:0 clamp(16px, 4vw, 36px) !important}
main.notes-main{padding:clamp(20px, 4vw, 50px) clamp(16px, 5vw, 64px) clamp(28px, 6vw, 60px) clamp(40px, 6vw, 80px) !important}
.header h1{font-size:clamp(32px, 5vw, 54px) !important}
section.topic h2{font-size:clamp(22px, 3vw, 34px) !important}
h3{font-size:clamp(17px, 2vw, 23px) !important}
section.topic{max-width:min(780px, 100%) !important}

/* (2) tablet — ≤1100 */
@media (max-width:1100px){
  aside.toc{width:230px !important}
  #sidebar{width:240px !important}
  .header h1{font-size:clamp(28px, 4.4vw, 42px) !important}
}

/* (3) compact tablet — ≤860 */
@media (max-width:860px){
  aside.toc{width:210px !important;padding:18px 12px !important}
  aside.toc a{font-size:12.5px !important;padding:6px 10px !important}
  aside.toc h2{font-size:10px !important;letter-spacing:0.14em !important}
  #sidebar{width:220px !important}
  main.notes-main{padding:24px 24px 40px 56px !important}
  .toc-toggle{top:68px !important;left:10px !important;width:34px !important;height:34px !important}
  section.topic{padding:24px 22px !important}
  .header h1{font-size:32px !important}
  .header .subtitle{font-size:14.5px !important}
  /* chat bubbles can use the full width comfortably */
  .msg-wrap{padding:0 20px !important}
  /* periodic table cells get a bit smaller but stay readable */
  #periodic-page .el .s{font-size:13px !important}
  #periodic-page .el .z{font-size:8.5px !important}
  #periodic-page .el .m{font-size:6.5px !important}
}

/* (4) phone — ≤640 */
@media (max-width:640px){
  /* topnav scrolls horizontally if tabs don't fit; status pill hidden */
  #topnav{height:56px !important;gap:8px !important;overflow-x:auto !important;overflow-y:hidden !important;flex-wrap:nowrap !important;-webkit-overflow-scrolling:touch}
  #topnav::-webkit-scrollbar{display:none}
  #topnav .brand{font-size:16px !important;flex-shrink:0}
  .nav-btn{font-size:12px !important;padding:6px 10px !important;flex-shrink:0;white-space:nowrap}
  #topnav .pill,#topnav .spacer{display:none !important}
  #search-wrap{display:none !important}

  /* TOC sidebar — hide by default on phone; user can swipe it in via the
     existing toggle button. notes-main takes full width. */
  aside.toc{
    position:fixed !important;top:56px !important;left:0 !important;bottom:0 !important;
    width:84vw !important;max-width:300px !important;z-index:35 !important;
    transform:translateX(-100%) !important;
    transition:transform 0.28s var(--ease-anti);
    box-shadow:4px 0 20px -8px rgba(0,0,0,0.25);
  }
  aside.toc:not(.collapsed){transform:translateX(0) !important}
  /* on phone the collapsed-class semantics flip: collapsed = open. Simpler
     to ignore the class and use focus-within / a body class — but the
     existing JS only toggles .collapsed, so wire it: */
  aside.toc.collapsed{transform:translateX(0) !important}
  main.notes-main{padding:18px 18px 40px 18px !important}
  .toc-toggle{top:64px !important;left:8px !important;width:32px !important;height:32px !important;z-index:60 !important}
  section.topic{padding:18px 16px !important;margin:0 auto 32px !important}
  .header{padding:6px 0 18px !important;margin-bottom:28px !important}
  .header h1{font-size:26px !important;letter-spacing:-0.005em !important}
  .header .subtitle{font-size:13px !important}
  .header .badges{flex-wrap:wrap;gap:5px}
  .badge{font-size:10.5px !important;padding:3px 9px !important}

  /* hide the AI banner SVG on tiny screens — text only */
  .ai-note{font-size:12px !important;padding:9px 12px !important;margin-bottom:20px !important}

  /* tutor: bubbles wider, composer fills the screen */
  #sidebar{width:75vw !important;max-width:280px !important;position:fixed !important;top:56px !important;left:0 !important;bottom:0 !important;z-index:35 !important;transform:translateX(-100%) !important;transition:transform 0.28s var(--ease-anti)}
  #sidebar:not(.collapsed){transform:translateX(0) !important}
  #main-pane{width:100% !important}
  header.chat-header{padding:10px 14px !important}
  header.chat-header h1{font-size:14.5px !important}
  .msg-wrap{padding:0 14px !important}
  .msg.user{max-width:88% !important;font-size:14px !important}
  .msg.bot{font-size:15px !important}
  #input-bar{padding:10px 12px 16px !important}
  #input-wrap{border-radius:14px !important;padding:6px 6px 6px 8px !important}
  #att-btn{width:30px !important;height:30px !important}
  #send{width:30px !important;height:30px !important}

  /* periodic table — let it scroll horizontally on phones,
     cells stay touchable */
  #periodic-page .pt-wrap{padding:18px 14px !important}
  #periodic-page .ptable{
    min-width:760px;       /* enough for 18 cols × ~42px */
    gap:2px !important;
  }
  /* wrap a horizontal scroll context around the grid */
  #periodic-page .pt-wrap{overflow-x:auto !important;-webkit-overflow-scrolling:touch}
  .pt-details{top:auto !important;bottom:0 !important;right:0 !important;left:0 !important;width:auto !important;border-radius:14px 14px 0 0 !important;max-height:60vh !important;overflow-y:auto !important}

  /* lessons page (CS) — single column */
  #lessons-page{flex-direction:column !important}
  #lessons-nav{width:100% !important;max-height:160px !important;border-right:none !important;border-bottom:1px solid var(--rule) !important}
  #lessons-main{padding:18px !important}

  /* tabs of buttons inside the lessons editor */
  .btn-row{flex-wrap:wrap !important;gap:6px !important}

  /* table cells — let big tables scroll horizontally too */
  section.topic{overflow-x:auto !important}

  /* keep paper grain visible on phone — but slightly less aggressive */
  body::before{opacity:0.65 !important}
  body::after{opacity:0.25 !important}
}

/* very narrow — ≤380, e.g. iPhone SE */
@media (max-width:380px){
  .header h1{font-size:23px !important}
  section.topic h2{font-size:20px !important}
  h3{font-size:16px !important}
  .nav-btn{font-size:11.5px !important;padding:5px 8px !important}
  #topnav .brand{font-size:14.5px !important}
}

/* tall narrow — keep things from being too cramped vertically */
@media (max-height:600px) and (max-width:900px){
  #topnav{height:52px !important}
  .toc-toggle{top:62px !important}
}

/* high-DPI / Retina — sharpen 1px borders */
@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){
  aside.toc,#sidebar,#input-wrap,.card,section.topic,.formula{
    border-width:0.5px !important;
  }
}

/* =====================================================================
   INVERTED SIDEBAR — "dark cocoa parchment" panel
   Applies to:
     • aside.toc (the Notes / AS / A2 / Paper-X table of contents)
     • #sidebar  (the Tutor chat history panel)
   The sidebar becomes a warm mid-brown stripe with ivory text + gold
   accents, while the main reading area stays cream. One palette change
   below propagates to chemistry, physics, biology, and CS.
   ===================================================================== */
:root{
  --side-bg:#5a4730;           /* warm mid-brown, lighter than walnut */
  --side-bg-2:#6a5640;         /* slightly lighter at the top */
  --side-ink:#f4ecd7;          /* warm ivory text */
  --side-ink-soft:#d6c8a4;     /* secondary ivory */
  --side-ink-faint:#a89878;    /* faint */
  --side-gold:#d4a85d;         /* gold accents look brighter on dark */
  --side-oxblood:#c25a48;      /* oxblood on dark — pushed brighter */
  --side-rule:rgba(244,236,215,0.12);
}

/* ---- aside.toc (Notes pages) ---- */
aside.toc{
  background:linear-gradient(180deg, var(--side-bg-2) 0%, var(--side-bg) 50%) !important;
  border-right:1px solid rgba(0,0,0,0.18) !important;
  color:var(--side-ink-soft) !important;
  position:relative;
  /* leave room at top so the floating .toc-toggle doesn't cover CONTENTS */
  padding-top:60px !important;
}
/* subtle wood-grain over the sidebar — very low opacity, multiply blend */
aside.toc::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  opacity:0.14;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='400'><filter id='w'><feTurbulence type='fractalNoise' baseFrequency='0.02 0.6' numOctaves='3' seed='5'/><feColorMatrix values='0 0 0 0 0.85  0 0 0 0 0.75  0 0 0 0 0.50  0 0 0 0.5 0'/></filter><rect width='200' height='400' filter='url(%23w)'/></svg>");
  background-size:200px 400px;
}
aside.toc > *{position:relative;z-index:1}

aside.toc h2{
  color:var(--side-gold) !important;
  border-bottom:1px solid rgba(212,168,93,0.32) !important;
}
aside.toc h2.subhead{
  color:var(--side-gold) !important;
}

aside.toc a{
  color:var(--side-ink-soft) !important;
  border-left:none !important;
  position:relative;
}
aside.toc a:hover{
  background:rgba(244,236,215,0.07) !important;
  color:var(--side-ink) !important;
  transform:none !important;
}
aside.toc a.active{
  background:rgba(212,168,93,0.14) !important;
  color:#fff7e4 !important;
  font-weight:500;font-style:italic;
}
aside.toc a.active::before{
  content:'';position:absolute;left:0;top:8px;bottom:8px;width:2px;
  background:var(--side-gold);border-radius:0 1px 1px 0;
  margin-left:-2px;
}

aside.toc::-webkit-scrollbar-thumb{
  background:rgba(244,236,215,0.18) !important;
}

/* ---- #sidebar (Tutor chat list) ----
   We prefix every selector with `body` so this beats any same-id rule
   declared inline in each subject HTML. (Selector specificity wins
   over `!important` ties.) */
body #sidebar{
  background:linear-gradient(180deg, var(--side-bg-2) 0%, var(--side-bg) 50%) !important;
  border-right:1px solid rgba(0,0,0,0.18) !important;
  color:var(--side-ink-soft) !important;
}
body #sidebar .sidebar-head{
  border-bottom:1px solid var(--side-rule) !important;
}
body #sidebar .new-chat-btn{
  background:var(--side-ink) !important;
  color:var(--side-bg) !important;
  border:none !important;
}
body #sidebar .new-chat-btn:hover{
  background:var(--side-gold) !important;
  color:#3a2818 !important;
  filter:none !important;
}
body #sidebar .chat-item{
  color:var(--side-ink-soft) !important;
}
body #sidebar .chat-item:hover{
  background:rgba(244,236,215,0.07) !important;
  color:var(--side-ink) !important;
}
body #sidebar .chat-item.active{
  background:rgba(212,168,93,0.14) !important;
  color:#fff7e4 !important;
  font-style:italic;font-weight:500;
}
body #sidebar .chat-num{
  background:rgba(244,236,215,0.10) !important;
  color:var(--side-ink-soft) !important;
}
body #sidebar .chat-item.active .chat-num{
  background:var(--side-gold) !important;
  color:#3a2818 !important;
}
body #sidebar .drag-handle{color:rgba(244,236,215,0.35) !important}
body #sidebar .drag-handle:hover{color:var(--side-ink) !important}
body #sidebar .chat-act-btn{color:rgba(244,236,215,0.45) !important}
body #sidebar .chat-act-btn:hover{
  color:var(--side-ink) !important;
  background:rgba(244,236,215,0.10) !important;
}
body #sidebar .chat-act-btn.del:hover{color:var(--side-oxblood) !important}
body #sidebar .chat-title-edit{
  background:rgba(244,236,215,0.08) !important;
  color:var(--side-ink) !important;
  border-color:var(--side-gold) !important;
}
body #sidebar .empty-list{color:var(--side-ink-faint) !important}
/* the ☰ button inside the tutor header (NOT inside the sidebar)
   stays on the cream side, so target it separately */
.sidebar-toggle{
  background:transparent !important;
  border:1px solid var(--rule) !important;
  color:var(--ink-soft) !important;
}
.sidebar-toggle:hover{
  background:var(--bg-soft) !important;
  color:var(--ink-strong) !important;
}

/* On phones, the slide-out sidebar should keep the inverted palette */
@media (max-width:640px){
  aside.toc,#sidebar{
    box-shadow:6px 0 24px -10px rgba(0,0,0,0.4) !important;
  }
}