/* Shared styles for the Ontology Atlas content pages (learn / definitions / references) */
:root {
  --bg-900:#0f172a; --bg-850:#131c31; --bg-800:#1e293b; --bg-750:#24324a;
  --border:#334155; --border-soft:#26324a;
  --text-100:#f1f5f9; --text-300:#cbd5e1; --text-400:#94a3b8; --text-500:#64748b;
  --accent:#9333ea; --accent-400:#c084fc; --accent-500:#a855f7; --accent-soft:rgba(147,51,234,.14);
  --radius:14px; --maxw:900px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; font-family:var(--font); color:var(--text-300);
  background:radial-gradient(1100px 600px at 50% -8%, rgba(147,51,234,.16), transparent 60%), var(--bg-900);
  background-attachment:fixed; -webkit-font-smoothing:antialiased; min-height:100vh;
}
a { color:inherit; text-decoration:none; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* header / nav */
header { padding:38px 0 0; }
.brand { display:flex; align-items:center; gap:13px; flex-wrap:wrap; }
.brand img { height:40px; width:40px; }
.brand .name { font-weight:800; font-size:20px; letter-spacing:-.02em; color:var(--text-100); }
.brand .name span { color:var(--accent-400); }
.topnav { margin-left:26px; display:flex; gap:20px; flex-wrap:wrap; }
.topnav a { font-size:14px; font-weight:600; color:var(--text-400); padding:3px 0; border-bottom:2px solid transparent; transition:.15s; }
.topnav a:hover { color:var(--text-100); }
.topnav a.active { color:var(--text-100); border-color:var(--accent); }

/* hero */
.hero { padding:44px 0 6px; max-width:720px; }
.hero .eyebrow { color:var(--accent-400); font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:14px; }
.hero h1 { font-size:clamp(30px,4.4vw,46px); line-height:1.07; letter-spacing:-.03em; color:var(--text-100); font-weight:800; margin:0 0 16px; }
.hero p { font-size:18px; line-height:1.6; color:var(--text-300); margin:0; }

/* generic section */
.section { padding:30px 0; border-top:1px solid var(--border); }
.section:first-of-type { border-top:0; }
.section h2 { font-size:clamp(22px,3vw,29px); letter-spacing:-.02em; color:var(--text-100); font-weight:800; margin:0 0 6px; }
.section .sub { color:var(--text-400); font-size:15px; margin:0 0 22px; }
.section p { font-size:16px; line-height:1.7; color:var(--text-300); max-width:72ch; }
.section a.inline { color:var(--accent-400); font-weight:600; border-bottom:1px solid transparent; transition:.15s; }
.section a.inline:hover { border-color:var(--accent-400); }
code { font-family:var(--mono); font-size:13.5px; background:var(--bg-800); border:1px solid var(--border); border-radius:6px; padding:1px 6px; color:var(--accent-400); }

/* learning path modules */
.path { display:flex; flex-direction:column; gap:12px; }
.module { display:flex; gap:18px; background:var(--bg-800); border:1px solid var(--border); border-radius:var(--radius); padding:20px 22px; transition:border-color .15s, transform .15s; }
.module:hover { border-color:var(--accent); transform:translateY(-2px); }
.module .num { flex:none; width:34px; height:34px; border-radius:9px; background:var(--accent-soft); color:var(--accent-400); font-weight:800; display:grid; place-items:center; font-size:15px; }
.module h3 { margin:0 0 5px; color:var(--text-100); font-size:17px; font-weight:700; }
.module p { margin:0 0 8px; font-size:14.5px; color:var(--text-300); line-height:1.55; }
.module .go { font-size:13px; font-weight:600; color:var(--accent-400); }
.module:hover .go { text-decoration:underline; }

/* definition lineage (quoted canonical definitions) */
.def { border-left:3px solid var(--accent); background:var(--bg-850); border-radius:0 12px 12px 0; padding:18px 22px; margin:0 0 16px; }
.def q { display:block; font-size:18px; line-height:1.5; color:var(--text-100); font-weight:600; }
.def q::before { content:"“"; } .def q::after { content:"”"; }
.def .cite { display:block; margin-top:10px; font-size:13.5px; color:var(--text-400); }
.def .cite b { color:var(--accent-400); font-weight:700; }
.wordgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:18px 0 4px; }
.wordgrid .w { background:var(--bg-800); border:1px solid var(--border); border-radius:10px; padding:14px; }
.wordgrid .w b { color:var(--text-100); display:block; margin-bottom:4px; font-size:14px; }
.wordgrid .w span { font-size:13px; color:var(--text-400); line-height:1.5; }

/* glossary */
.glossary { display:grid; gap:2px; }
.term { padding:18px 0; border-top:1px solid var(--border-soft); }
.term:first-child { border-top:0; }
.term dt { color:var(--text-100); font-weight:700; font-size:16px; margin-bottom:6px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.term dt .alt { color:var(--text-500); font-weight:500; font-size:13px; }
.term dd { margin:0; font-size:15px; line-height:1.65; color:var(--text-300); max-width:74ch; }
.term dd .src { display:inline-block; margin-top:7px; font-size:12px; color:var(--text-400); background:var(--bg-800); border:1px solid var(--border); border-radius:6px; padding:2px 8px; }

/* references */
.reflist { counter-reset:ref; display:flex; flex-direction:column; gap:2px; }
.ref { padding:16px 0; border-top:1px solid var(--border-soft); font-size:15px; line-height:1.55; }
.ref:first-child { border-top:0; }
.ref .authors { color:var(--text-100); font-weight:600; }
.ref .title { color:var(--text-300); }
.ref .venue { color:var(--text-400); font-style:italic; }
.ref a { color:var(--accent-400); font-weight:600; }
.ref a:hover { text-decoration:underline; }
.pdfcard { display:flex; align-items:center; gap:16px; background:var(--bg-800); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; margin-bottom:22px; }
.pdfcard .ico { flex:none; width:44px; height:44px; border-radius:10px; background:var(--accent-soft); color:var(--accent-400); display:grid; place-items:center; font-weight:800; font-size:13px; }
.pdfcard .m b { color:var(--text-100); }
.pdfcard .m p { margin:3px 0 0; font-size:13.5px; color:var(--text-400); }
.pdfcard .dl { margin-left:auto; font-size:14px; font-weight:700; color:var(--accent-400); border:1px solid var(--accent); border-radius:999px; padding:9px 18px; white-space:nowrap; }
.pdfcard .dl:hover { background:var(--accent-soft); }

/* cta + footer */
.cta { text-align:center; padding:56px 0; border-top:1px solid var(--border); }
.cta h2 { font-size:27px; color:var(--text-100); font-weight:800; margin:0 0 12px; letter-spacing:-.02em; }
.cta p { font-size:16px; color:var(--text-300); max-width:60ch; margin:0 auto 8px; line-height:1.6; }
.cta .btn { display:inline-block; margin-top:12px; background:var(--accent); color:#fff; font-weight:700; font-size:15px; padding:13px 28px; border-radius:999px; transition:.16s; }
.cta .btn:hover { background:var(--accent-500); transform:translateY(-1px); }
footer { border-top:1px solid var(--border); padding:26px 0 46px; color:var(--text-500); font-size:13px; }
footer .wrap { display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:space-between; }
footer a { color:var(--text-300); font-weight:600; }
footer a:hover { color:var(--accent-400); }

@media (max-width:640px){ .module{padding:16px} }