@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --sidebar-w: 272px;
  --header-h: 56px;
  --navy-950: #07090f;
  --navy-900: #0f172a;
  --navy-800: #1e293b;
  --navy-700: #334155;
  --slate-400: #94a3b8;
  --slate-300: #cbd5e1;
  --indigo-500: #6366f1;
  --indigo-400: #818cf8;
  --indigo-950: #1e1b4b;
  --bg: #f9f8f5;
  --surface: #ffffff;
  --border: #e8e4dc;
  --text: #0f172a;
  --muted: #64748b;
  --accent: #6366f1;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0/.08),0 1px 2px -1px rgb(0 0 0/.05);
  --shadow-md: 0 4px 12px -2px rgb(0 0 0/.12),0 2px 6px -2px rgb(0 0 0/.06);
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',system-ui,sans-serif;font-size:15px;line-height:1.6;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}

/* ── Header ─────────────────────────────────────────────── */
header{height:var(--header-h);display:flex;align-items:center;padding:0 1.5rem;background:var(--navy-900);position:sticky;top:0;z-index:100;gap:1rem;border-bottom:1px solid var(--navy-800)}
.logo{font-size:1.05rem;font-weight:700;letter-spacing:-0.03em;color:#fff;text-decoration:none}
.logo span{color:var(--indigo-400)}
#search{margin-left:auto;padding:.38rem 1rem;background:var(--navy-800);border:1px solid var(--navy-700);border-radius:999px;color:var(--slate-300);font-size:.8rem;font-family:inherit;width:200px;outline:none;transition:border-color .15s,background .15s}
#search::placeholder{color:var(--slate-400)}
#search:focus{border-color:var(--indigo-500);background:var(--navy-950)}

/* ── Layout ──────────────────────────────────────────────── */
.layout{display:flex;height:calc(100vh - var(--header-h));overflow:hidden}

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar{width:var(--sidebar-w);background:var(--navy-900);border-right:1px solid var(--navy-800);overflow-y:auto;flex-shrink:0;padding:1.25rem 0 2rem;scrollbar-width:thin;scrollbar-color:var(--navy-700) transparent}
.sidebar details{}
.sidebar summary{list-style:none;display:flex;align-items:center;gap:.45rem;padding:.45rem 1rem;font-size:.68rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--slate-400);cursor:pointer;user-select:none;transition:color .15s}
.sidebar summary::-webkit-details-marker{display:none}
.sidebar summary::before{content:'';display:inline-block;width:0;height:0;border-style:solid;border-width:4px 0 4px 6px;border-color:transparent transparent transparent var(--slate-400);transition:transform .18s;flex-shrink:0;opacity:.7}
.sidebar details[open]>summary::before{transform:rotate(90deg)}
.sidebar summary:hover{color:var(--slate-300)}
.sidebar ul{list-style:none;padding:0;margin-bottom:.25rem}
.sidebar a{display:block;padding:.35rem 1rem .35rem 2rem;font-size:.84rem;font-weight:400;color:var(--slate-400);text-decoration:none;border-radius:var(--radius-sm);margin:.1rem .5rem;transition:color .13s,background .13s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar a:hover{color:var(--slate-300);background:var(--navy-800)}
.sidebar a.active{color:var(--indigo-400);background:var(--indigo-950);font-weight:500}
.sidebar details details summary{padding-left:1.5rem}
.sidebar details details a{padding-left:2.75rem}
.sidebar details details details summary{padding-left:2.5rem}
.sidebar details details details a{padding-left:3.5rem}

/* ── Main ────────────────────────────────────────────────── */
main{flex:1;overflow-y:auto;background:var(--bg)}
.content-wrap{max-width:780px;padding:2.5rem 3rem;margin:0 auto}

/* ── Breadcrumbs ─────────────────────────────────────────── */
.breadcrumbs{display:flex;align-items:center;flex-wrap:wrap;gap:.2rem;font-size:.775rem;color:var(--muted);margin-bottom:2rem}
.breadcrumbs a{color:var(--muted);text-decoration:none;transition:color .13s}
.breadcrumbs a:hover{color:var(--accent)}
.breadcrumbs .sep{color:var(--border);font-size:.7rem;margin:0 .1rem}

/* ── Content typography ──────────────────────────────────── */
#content h1{font-size:1.875rem;font-weight:700;letter-spacing:-.025em;line-height:1.2;color:var(--text);margin-bottom:.75rem}
#content h2{font-size:1.2rem;font-weight:600;letter-spacing:-.015em;color:var(--text);margin:2rem 0 .75rem;padding-bottom:.5rem;border-bottom:1px solid var(--border)}
#content h3{font-size:1.025rem;font-weight:600;color:var(--text);margin:1.5rem 0 .45rem}
#content h4{font-size:.875rem;font-weight:600;color:var(--muted);margin:1.25rem 0 .4rem;text-transform:uppercase;letter-spacing:.06em}
#content p{color:#374151;line-height:1.8;margin-bottom:1rem}
#content a{color:var(--accent);text-decoration:underline;text-decoration-color:#c7d2fe;text-underline-offset:2px;transition:text-decoration-color .13s}
#content a:hover{text-decoration-color:var(--accent)}
#content strong{font-weight:600;color:var(--text)}
#content em{font-style:italic;color:#4b5563}
#content code{font-family:'JetBrains Mono','Fira Code',monospace;font-size:.84em;background:#f1f0ed;border:1px solid #e2dfd7;padding:.15em .4em;border-radius:4px;color:#be185d}
#content pre{background:#0d1117;border-radius:var(--radius-md);padding:1.25rem 1.5rem;overflow-x:auto;margin-bottom:1.25rem;border:1px solid #21262d;box-shadow:var(--shadow-sm)}
#content pre code{background:none;border:none;padding:0;color:#e6edf3;font-size:.875rem;line-height:1.65}
#content blockquote{border-left:3px solid var(--indigo-500);padding:.75rem 1.25rem;background:#f5f3ff;border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin-bottom:1.25rem;color:#4338ca}
#content blockquote p{color:#4338ca;margin:0}
#content ul,#content ol{padding-left:1.5rem;margin-bottom:1rem}
#content li{line-height:1.8;margin-bottom:.3rem;color:#374151}
#content hr{border:none;border-top:1px solid var(--border);margin:2rem 0}
#content table{width:100%;border-collapse:collapse;margin-bottom:1.25rem;font-size:.9rem}
#content th{background:var(--bg);padding:.6rem .875rem;text-align:left;font-weight:600;border-bottom:2px solid var(--border)}
#content td{padding:.6rem .875rem;border-bottom:1px solid var(--border)}
#content tr:last-child td{border-bottom:none}
#content sup{font-size:.75em;color:var(--muted)}

/* ── Index page ──────────────────────────────────────────── */
.page-header{margin-bottom:2.5rem}
.page-title{font-size:2rem;font-weight:700;letter-spacing:-.03em;color:var(--text);margin-bottom:.35rem}
.page-subtitle{font-size:.925rem;color:var(--muted)}

.category-section{margin-bottom:2.75rem}
.category-label{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.875rem;display:flex;align-items:center;gap:.75rem}
.category-label::after{content:'';flex:1;height:1px;background:var(--border)}
.subcategory-label{font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#94a3b8;margin:1.25rem 0 .6rem .125rem}

.concept-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.75rem;margin-bottom:1rem}
.concept-card{display:block;padding:1rem 1.125rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s,transform .12s;box-shadow:var(--shadow-sm)}
.concept-card:hover{border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card-title{font-size:.875rem;font-weight:600;color:var(--accent);margin-bottom:.3rem;letter-spacing:-.01em}
.card-summary{font-size:.79rem;color:var(--muted);line-height:1.5}

/* ── Header action links ─────────────────────────────────── */
.header-actions{display:flex;align-items:center;gap:.5rem;margin-left:.5rem}
.header-action{font-size:.8rem;font-weight:500;color:var(--slate-400);text-decoration:none;padding:.25rem .65rem;border-radius:var(--radius-sm);border:1px solid var(--navy-700);transition:color .13s,background .13s,border-color .13s}
.header-action:hover{color:var(--slate-300);background:var(--navy-800);border-color:var(--slate-400)}
.header-action.active{color:var(--indigo-400);border-color:var(--indigo-500);background:var(--indigo-950)}
.header-action.disabled{color:var(--navy-700);border-color:var(--navy-800);cursor:default;pointer-events:none}

/* ── Log page ────────────────────────────────────────────── */
.log-page .content-wrap{max-width:1100px}
.log-table{width:100%;border-collapse:collapse;font-size:.8rem;margin-top:1.25rem}
.log-table th{background:var(--bg);padding:.5rem .75rem;text-align:left;font-weight:600;border-bottom:2px solid var(--border);color:var(--muted);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;user-select:none}
.log-table th[data-col]{cursor:pointer}
.log-table th[data-col]:hover{color:var(--text)}
.log-table th[data-sort="asc"]::after{content:' ▲';opacity:.7}
.log-table th[data-sort="desc"]::after{content:' ▼';opacity:.7}
.log-table td{padding:.5rem .75rem;border-bottom:1px solid var(--border);vertical-align:top;font-size:.8rem}
.log-table tr:last-child td{border-bottom:none}
.log-table tbody tr:hover td{background:#f5f3ff}
.log-num{color:var(--muted);font-size:.75rem;width:2.5rem;text-align:right}
.log-source{font-weight:500;color:var(--text);word-break:break-word;max-width:260px}
.log-date{color:var(--muted);white-space:nowrap;font-size:.78rem}
.log-concepts{display:flex;flex-wrap:wrap;gap:.25rem}
.log-concept-tag{font-size:.72rem;background:#f1f0ed;border:1px solid var(--border);padding:.1em .4em;border-radius:999px;color:var(--accent);text-decoration:none}
.log-concept-tag:hover{background:#ede9ff;border-color:var(--accent)}
.log-row-pending td{color:var(--muted)}
.log-row-pending .log-source{font-weight:400;font-style:italic}
.log-pending-badge{font-size:.72rem;color:var(--muted);background:#f1f0ed;border:1px solid var(--border);padding:.1em .5em;border-radius:999px}

/* ── Concepts page ───────────────────────────────────────── */
.alpha-nav{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:1.75rem;padding-bottom:1rem;border-bottom:2px solid var(--border)}
.alpha-btn{font-size:.75rem;font-weight:600;min-width:1.9rem;text-align:center;padding:.25rem .4rem;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:var(--muted);cursor:pointer;transition:background .13s,color .13s,border-color .13s;line-height:1;font-family:inherit}
.alpha-btn:hover{background:var(--bg);color:var(--text);border-color:var(--slate-400)}
.alpha-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.concepts-group{margin-bottom:1.75rem}
.concepts-letter{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem;padding-bottom:.3rem;border-bottom:1px solid var(--border)}
.concepts-cloud{display:flex;flex-wrap:wrap;gap:.4rem}
.concept-pill{font-size:.8rem;background:var(--surface);border:1px solid var(--border);padding:.3em .8em;border-radius:999px;color:var(--accent);text-decoration:none;transition:border-color .13s,background .13s;white-space:nowrap}
.concept-pill:hover{background:#ede9ff;border-color:var(--accent)}

/* ── Hover tooltip ───────────────────────────────────────── */
#wiki-tooltip{position:fixed;z-index:9999;max-width:280px;pointer-events:none;display:none;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:.75rem 1rem;box-shadow:var(--shadow-md);line-height:1.5}
#wiki-tooltip .tip-title{font-size:.82rem;font-weight:600;color:var(--accent);margin-bottom:.3rem}
#wiki-tooltip .tip-summary{font-size:.78rem;color:var(--muted)}

/* ── Responsive ──────────────────────────────────────────── */
@media(max-width:768px){
  .sidebar{display:none}
  .content-wrap{padding:1.25rem}
  .concept-grid{grid-template-columns:1fr}
  .log-table{font-size:.8rem}
}