/* ═══ SNR — Help Assist frontend ═══
 * Referensi gaya: D:\GitHub\Web\SNR\wwwroot\css\app.css
 * Aksen #2563eb · light #f8fafc · dark #0f172a/#1e293b · kartu 16px · pill 9999px
 */
:root {
  color-scheme: light dark;
  --accent: #2563eb;
  --accent-light: #dbeafe;
  --accent-dark: #1d4ed8;
  --accent-cyan: #06b6d4;
  --bg: #f8fafc;
  --card: #ffffff;
  --card-2: #f1f5f9;
  --border-subtle: rgba(0,0,0,0.05);
  --border-medium: rgba(0,0,0,0.08);
  --text: #0d0d0d;
  --text-muted: #666666;
  --text-faint: #888888;
  --header-bg: rgba(255,255,255,0.92);
  --shadow-card: rgba(0,0,0,0.03) 0px 2px 4px;
  --shadow-hover: rgba(37,99,235,0.08) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.85px;
  --radius-card: 16px;
  --radius-pill: 9999px;
  --code-bg: rgba(0,0,0,0.07);
  --code-text: #b91c1c;
  --input-bg: #ffffff;
  --msg-w: 88%;
}
.dark {
  color-scheme: dark;
  --accent: #3b82f6;
  --accent-light: #1e3a5f;
  --accent-dark: #60a5fa;
  --accent-cyan: #22d3ee;
  --bg: #0f172a;
  --card: #1e293b;
  --card-2: #243247;
  --border-subtle: rgba(255,255,255,0.06);
  --border-medium: rgba(255,255,255,0.1);
  --text: #f1f5f9;
  --text-muted: #94a3b8;
  --text-faint: #64748b;
  --header-bg: rgba(15,23,42,0.92);
  --shadow-card: rgba(0,0,0,0.2) 0px 2px 8px;
  --shadow-hover: rgba(59,130,246,0.15) 0px 4px 18px, rgba(0,0,0,0.3) 0px 2px 8px;
  --code-bg: rgba(0,0,0,0.35);
  --code-text: #7dd3fc;
  --input-bg: #0f172a;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent }
html, body { height: 100% }
body {
  margin: 0; font: 15px/1.45 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased;
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; overflow: hidden; overscroll-behavior: contain;
}
button { font: inherit; cursor: pointer; outline: none; touch-action: manipulation }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
input:focus-visible, textarea:focus-visible { outline: none }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important }
}

/* ---------- header — Mintlify style (blur) ---------- */
header {
  display: flex; padding: 0 24px; height: 64px; flex-shrink: 0;
  background: var(--header-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-subtle); position: sticky; top: 0; z-index: 30;
}
.hrow { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0 }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; color: var(--text) }
.brand-logo { width: 34px; height: 34px; object-fit: contain }
.brand-name { display: flex; flex-direction: column; line-height: 1.15; font-weight: 700; font-size: 15px; letter-spacing: -0.3px }
.brand-sub { font-size: 9.5px; font-weight: 500; color: var(--text-faint); letter-spacing: 0 }
.nav { display: flex; gap: 2px; margin-left: 8px; min-width: 0; overflow-x: auto; scrollbar-width: none }
.nav::-webkit-scrollbar { display: none }
.nav-tab {
  background: transparent; border: 0; color: var(--text); padding: 6px 14px;
  border-radius: var(--radius-pill); font-size: 14px; font-weight: 500; white-space: nowrap; transition: all .15s ease;
}
.nav-tab:hover { background: var(--accent-light); color: var(--accent-dark) }
.nav-tab.active { color: var(--accent-dark); font-weight: 600 }
.spacer { flex: 1 }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; flex-shrink: 0; transition: background .2s }
.dark .dot { background: #475569 }
.dot.ok { background: #22c55e }
.dot.err { background: #ef4444 }
button.icon {
  background: transparent; border: 0; color: var(--text-muted); width: 34px; height: 34px;
  border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
button.icon:hover { background: var(--accent-light); color: var(--accent-dark) }
button.icon svg { width: 18px; height: 18px }

/* ---------- main + views ---------- */
main { flex: 1; display: flex; flex-direction: column; min-height: 0; width: 100%; max-width: 920px; margin: 0 auto; padding: 0 18px }
.view { display: none; flex: 1; flex-direction: column; min-height: 0; width: 100% }
.view.active { display: flex }

/* ---------- konteks aplikasi (badge + picker) ---------- */
.app-bar { position: relative; flex-shrink: 0; padding-top: 12px }
.app-badge {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
  background: var(--card); border: 1px solid var(--border-medium); color: var(--text-muted);
  border-radius: var(--radius-pill); padding: 6px 14px; font-size: 12.5px; font-weight: 500;
  box-shadow: var(--shadow-card); transition: all .15s ease; white-space: nowrap; overflow: hidden;
}
.app-badge:hover { border-color: var(--accent); color: var(--accent) }
.app-badge.has-app { background: var(--accent-light); border-color: var(--accent); color: var(--accent-dark) }
.app-badge .caret { width: 13px; height: 13px; flex-shrink: 0; transition: transform .15s ease }
.app-bar.open .app-badge .caret { transform: rotate(180deg) }
.app-picker {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 240px; max-width: min(320px, 92vw);
  background: var(--card); border: 1px solid var(--border-medium); border-radius: var(--radius-card);
  box-shadow: 0 12px 40px rgba(0,0,0,.18); padding: 8px; overflow: hidden;
}
.dark .app-picker { box-shadow: 0 12px 40px rgba(0,0,0,.5) }
.app-picker-head { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); padding: 4px 10px 8px }
.app-opt {
  display: block; width: 100%; text-align: left; background: transparent; border: 0; color: var(--text);
  border-radius: 10px; padding: 9px 10px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-opt:hover { background: var(--accent-light); color: var(--accent-dark) }
.app-opt.active { background: var(--accent-light); color: var(--accent-dark); font-weight: 600 }
.app-opt.empty { color: var(--text-faint); cursor: default }
#appPickerList { max-height: 240px; overflow-y: auto }

/* ---------- chat ---------- */
#msgs {
  flex: 1; overflow-y: auto; padding: 18px 0 8px;
  display: flex; flex-direction: column; gap: 10px; -webkit-overflow-scrolling: touch;
}
.msg-wrap { display: flex; flex-direction: column; width: 100%; gap: 6px }
.msg { max-width: var(--msg-w); padding: 9px 12px; border-radius: 16px; white-space: pre-wrap; word-break: break-word; font-size: 14px; position: relative; align-self: flex-end }
.msg.user { background: var(--accent); color: #fff; border-bottom-right-radius: 6px }
.msg.assistant { align-self: flex-start; background: var(--card); border: 1px solid var(--border-subtle); border-bottom-left-radius: 6px; box-shadow: var(--shadow-card) }
.msg.sys { align-self: center; color: var(--text-faint); font-size: 11.5px; background: none; border: 0; padding: 2px 6px; max-width: 100%; text-align: center; white-space: normal }
.md-body {
  max-width: var(--msg-w); align-self: flex-start; background: var(--card);
  border: 1px solid var(--border-subtle); border-radius: 16px; border-bottom-left-radius: 6px;
  padding: 10px 13px; font-size: 14px; word-break: break-word; overflow-wrap: anywhere; box-shadow: var(--shadow-card);
}
.md-body.ai-answer { border-color: var(--accent); border-left-width: 3px; }
.ai-badge { color: var(--accent-dark); font-size: 11px; font-weight: 700; margin-bottom: 8px; }

.md-body p { margin: 0 0 10px; line-height: 1.6 }
.md-body p:last-child { margin-bottom: 0 }
.md-body h1, .md-body h2, .md-body h3, .md-body h4 { margin: 18px 0 8px; line-height: 1.35; letter-spacing: -0.2px }
.md-body h1 { font-size: 20px; font-weight: 700; color: var(--text) }
.md-body h2 { font-size: 16.5px; font-weight: 650; color: var(--text); padding-bottom: 5px; border-bottom: 1px solid var(--border-subtle) }
.md-body h3 { font-size: 15px; font-weight: 600; color: var(--text) }
.md-body h4 { font-size: 14px; font-weight: 600; color: var(--text-muted) }
.md-body ul, .md-body ol { margin: 6px 0 12px; padding-left: 24px }
.md-body li { margin: 4px 0; line-height: 1.55 }
.md-body li::marker { color: var(--accent) }
.md-body code { background: var(--code-bg); border-radius: 5px; padding: 2px 6px; font: 500 12px ui-monospace, Consolas, monospace; color: var(--code-text) }
.md-body pre { background: var(--code-bg); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 12px 14px; overflow: auto; max-height: 360px; margin: 8px 0 }
.md-body pre code { background: none; padding: 0; color: var(--text); white-space: pre; font-size: 12.5px; line-height: 1.5 }
.md-body table { border-collapse: collapse; margin: 10px 0; max-width: 100%; display: block; overflow: auto; border-radius: 8px; border: 1px solid var(--border-medium) }
.md-body td, .md-body th { border: 1px solid var(--border-medium); padding: 7px 12px; font-size: 13px; text-align: left }
.md-body th { background: var(--card-2); font-weight: 600; white-space: nowrap }
.md-body tr:nth-child(even) { background: var(--card-2) }
.md-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px }
.md-body a:hover { color: var(--accent-dark) }
.md-body strong { font-weight: 700 }
.md-body blockquote { margin: 10px 0; padding: 8px 16px; border-left: 4px solid var(--accent); background: var(--accent-light); border-radius: 0 8px 8px 0; color: var(--text-muted) }
.md-body hr { border: 0; border-top: 1px solid var(--border-medium); margin: 16px 0 }
.md-body del { color: var(--text-faint); text-decoration: line-through }

/* thinking / aktivitas */
details.reasoning {
  align-self: flex-start; width: var(--msg-w); background: var(--card-2);
  border: 1px solid var(--border-subtle); border-radius: 12px; padding: 5px 10px; font-size: 12px; overflow: visible;
}
details.reasoning summary.sum { cursor: pointer; color: var(--text-muted); font-size: 11px; user-select: none; display: flex; align-items: center; gap: 6px; list-style: none }
details.reasoning summary.sum::-webkit-details-marker { display: none }
details.reasoning summary .sum-icon { color: var(--accent); font-size: 9px; transition: transform .15s ease }
details.reasoning[open] summary .sum-icon { transform: rotate(90deg) }
details.reasoning .body { color: var(--text-muted); white-space: pre-wrap; font-size: 11.5px; margin-top: 5px; max-height: 220px; overflow: auto }

/* streaming bubble */
.stream-bubble {
  border-color: var(--accent); border-width: 1.5px;
  animation: stream-pulse 2s ease-in-out infinite;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.stream-bubble.done { border-color: var(--border-subtle); animation: none; box-shadow: var(--shadow-card) }
@keyframes stream-pulse {
  0%, 100% { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.08) }
  50% { border-color: var(--accent-cyan); box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.1) }
}
.thinking-line {
  color: var(--text-muted); font-size: 13px; display: flex; align-items: center; gap: 8px;
  padding: 2px 0;
}
.thinking-line .thinking-label {
  font-style: italic; color: var(--text-faint);
}
.tool-line {
  color: var(--text-faint); font-size: 12px; margin-top: 6px;
  padding: 4px 8px; background: var(--card-2); border-radius: 8px; display: inline-block;
}
.dots { display: inline-flex; gap: 4px; align-items: center }
.dots i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  animation: dot-bounce 1.4s ease-in-out infinite;
}
.dots i:nth-child(2) { animation-delay: .15s }
.dots i:nth-child(3) { animation-delay: .3s }
@keyframes dot-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .3 }
  30% { transform: translateY(-4px); opacity: 1 }
}
.loading-status {
  display: flex; align-items: center; gap: 8px; padding: 6px 0 2px;
  color: var(--text-faint); font-size: 12.5px; font-style: italic;
}
.loading-status .loading-icon {
  display: inline-flex; width: 16px; height: 16px; animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }

/* aksi pesan */
.msg-actions { display: flex; gap: 5px; margin-top: 5px }
.msg-actions button {
  background: none; border: 1px solid var(--border-medium); color: var(--text-muted);
  font-size: 10.5px; padding: 2px 8px; border-radius: 9999px; transition: all .15s ease;
}
.msg-actions button:hover { background: var(--accent-light); color: var(--accent-dark) }
.msg-actions .ask-ai-btn { color: var(--accent-dark); border-color: var(--accent); font-weight: 600; }

/* welcome */
.welcome { text-align: center; padding: 42px 10px 12px; max-width: 580px; align-self: center }
.welcome .w-ic { font-size: 42px }
.welcome h2 { margin: 10px 0 4px; font-size: 20px; letter-spacing: -0.3px }
.welcome p { color: var(--text-muted); font-size: 13.5px; margin: 0 0 18px }
.welcome .chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center }
.welcome .chips button {
  background: var(--accent-light); color: var(--accent-dark); border: 1px solid transparent;
  border-radius: var(--radius-pill); padding: 8px 15px; font-size: 12.5px; transition: all .15s ease;
}
.welcome .chips button:hover { border-color: var(--accent); transform: translateY(-1px) }

/* composer */
#composer { flex-shrink: 0; padding: 8px 0 calc(10px + env(safe-area-inset-bottom)) }
#composerBox { background: var(--card); border: 1px solid var(--border-medium); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-card) }
#composerBox:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light) }
#input {
  width: 100%; background: transparent; border: 0; color: var(--text); resize: none;
  font: inherit; padding: 12px 14px 4px; max-height: 200px; line-height: 1.4;
}
#input::placeholder { color: var(--text-faint) }
#composerToolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 9px 9px }
.ct-hint { color: var(--text-faint); font-size: 10.5px; padding-left: 4px }
button.sq {
  width: 34px; height: 34px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--border-medium); border-radius: var(--radius-pill); background: var(--card-2); color: var(--text-muted); flex-shrink: 0; transition: all .15s ease;
}
button.sq svg { width: 16px; height: 16px }
button.sq:hover { border-color: var(--accent); color: var(--accent) }
button.sq.send { background: var(--accent); border: 0; color: #fff }
button.sq.send:disabled { opacity: .45; cursor: default }
button.sq.send svg { width: 17px; height: 17px }

/* ---------- daftar project ---------- */
.page-head { display: flex; align-items: center; gap: 10px; padding: 20px 0 8px; flex-shrink: 0 }
.page-head h1 { margin: 0; font-size: 19px; letter-spacing: -0.3px }
.proj-cat { margin: 8px 0 4px }
.proj-cat h2 { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); margin: 16px 2px 10px }
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px }
.proj-card {
  text-align: left; background: var(--card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card); padding: 16px 16px 14px; color: var(--text);
  display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow-card);
  transition: all .25s ease;
}
.proj-card:hover {
  transform: translateY(-4px); border-color: var(--accent);
  box-shadow: var(--shadow-hover);
}
.pc-name { font-weight: 600; font-size: 14.5px; word-break: break-word; letter-spacing: -0.2px }
.pc-sum { color: var(--text-muted); font-size: 12.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
.pc-go { margin-top: auto; color: var(--accent); font-size: 11.5px; font-weight: 600; padding-top: 4px }
.loading, .empty { color: var(--text-faint); font-size: 13px; text-align: center; padding: 42px 10px }
.loading { display: flex; align-items: center; justify-content: center; gap: 8px }
.loading::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--accent-light); border-top-color: var(--accent); animation: rspin .8s linear infinite }
@keyframes rspin { to { transform: rotate(360deg) } }

/* ---------- panduan project ---------- */
.back {
  display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); text-decoration: none;
  font-size: 12.5px; margin: 18px 0 6px; width: fit-content; padding: 5px 12px; border-radius: var(--radius-pill); transition: all .15s ease;
}
.back:hover { background: var(--accent-light); color: var(--accent-dark) }
.back svg { width: 14px; height: 14px }
.proj-head { padding: 8px 0 4px; flex-shrink: 0 }
.proj-head h1 { margin: 0 0 8px; font-size: 22px; letter-spacing: -0.3px; word-break: break-word }
.proj-sum { color: var(--text-muted); font-size: 13.5px; margin: 6px 0 4px }

/* ---------- search panduan ---------- */
#viewProject { overflow-y: auto }
.proj-search { padding: 10px 0 4px; flex-shrink: 0 }
.proj-search-box {
  display: flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--border-medium); border-radius: 12px;
  padding: 7px 12px; box-shadow: var(--shadow-card); transition: border-color .15s ease;
}
.proj-search-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light) }
.proj-search-icon { color: var(--text-faint); flex-shrink: 0; width: 16px; height: 16px }
.proj-search-box input {
  flex: 1; background: transparent; border: 0; color: var(--text); font: inherit;
  font-size: 13.5px; min-width: 0; outline: none;
}
.proj-search-box input::placeholder { color: var(--text-faint) }
.proj-search-count {
  font-size: 11px; font-weight: 600; color: var(--accent-dark); background: var(--accent-light);
  border-radius: var(--radius-pill); padding: 2px 8px; white-space: nowrap; flex-shrink: 0;
}
.proj-search-clear {
  background: transparent; border: 0; color: var(--text-faint); font-size: 14px;
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  flex-shrink: 0; transition: all .15s ease; cursor: pointer;
}
.proj-search-clear:hover { background: var(--accent-light); color: var(--accent-dark) }
.md-body mark.search-hl {
  background: #fef08a; color: inherit; border-radius: 3px; padding: 1px 2px;
  box-shadow: 0 0 0 2px #fef08a;
}
.dark .md-body mark.search-hl { background: #854d0e; color: #fef08a; box-shadow: 0 0 0 2px #854d0e }
.md-body mark.search-hl.current {
  background: var(--accent); color: #fff; box-shadow: 0 0 0 2px var(--accent)
}
.pill { display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 500 }
.pill.gray { background: var(--card-2); color: var(--text-muted); border: 1px solid var(--border-medium) }
#projBody { flex: 1; min-width: 0; padding-bottom: 20px }
.md-body.page { max-width: 100%; border-radius: var(--radius-card); margin-top: 12px; padding: 24px 28px; background: var(--card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-card) }
.md-body.page h1:first-child, .md-body.page h2:first-child { margin-top: 0 }

/* ---------- TOC sidebar ---------- */
.proj-toc-toggle {
  display: none; /* ditampilkan via JS di mobile */
  align-items: center; gap: 6px; margin: 8px 0 4px; padding: 7px 14px;
  background: var(--card); border: 1px solid var(--border-medium); border-radius: var(--radius-pill);
  color: var(--text-muted); font-size: 13px; font-weight: 500; width: fit-content;
  box-shadow: var(--shadow-card); transition: all .15s ease; cursor: pointer;
}
.proj-toc-toggle:hover { border-color: var(--accent); color: var(--accent) }
.proj-toc-toggle.open { background: var(--accent-light); border-color: var(--accent); color: var(--accent-dark) }
.proj-content { display: flex; gap: 20px; flex: 1; min-height: 0 }
.proj-toc-wrap {
  width: 220px; flex-shrink: 0; position: sticky; top: 0; align-self: flex-start;
  max-height: calc(100vh - 200px); overflow-y: auto; padding: 8px 0 8px 0;
  scrollbar-width: thin; scrollbar-color: var(--border-medium) transparent;
}
.proj-toc-wrap::-webkit-scrollbar { width: 4px }
.proj-toc-wrap::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: 4px }
.proj-toc-head {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint);
  padding: 0 0 6px 8px; font-weight: 600;
}
.proj-toc { display: flex; flex-direction: column; gap: 1px }
.proj-toc a {
  display: block; padding: 5px 10px; border-radius: 8px; font-size: 12.5px; color: var(--text-muted);
  text-decoration: none; line-height: 1.35; transition: all .12s ease; border-left: 2px solid transparent;
}
.proj-toc a:hover { background: var(--accent-light); color: var(--accent-dark) }
.proj-toc a.active { background: var(--accent-light); color: var(--accent-dark); font-weight: 600; border-left-color: var(--accent) }
.proj-toc a.toc-h1 { padding-left: 10px; font-weight: 600; font-size: 13px }
.proj-toc a.toc-h2 { padding-left: 18px }
.proj-toc a.toc-h3 { padding-left: 28px; font-size: 12px }
.proj-toc a.toc-h4 { padding-left: 36px; font-size: 11.5px; color: var(--text-faint) }

/* ---------- footer — dark gradient ---------- */
.footer-snr {
  flex-shrink: 0; background: linear-gradient(135deg, #0d0d0d, #1a1a1a);
  color: rgba(255,255,255,0.6); font-size: 0.82rem; padding: 16px 24px; text-align: center;
}
.footer-inner { max-width: 920px; margin: 0 auto }

/* ---------- responsive ---------- */
@media (max-width: 620px) {
  header { padding: 0 12px }
  main { padding: 0 10px }
  .brand-sub { display: none }
  .nav-tab { padding: 6px 10px; font-size: 13px }
  .welcome { padding: 26px 6px 10px }
  #msgs { padding-top: 12px }
  .md-body.page { padding: 16px; border-radius: 12px }
  .md-body h1 { font-size: 18px }
  .md-body h2 { font-size: 15px }
  .md-body pre { max-height: 260px; padding: 10px 12px }
  .md-body td, .md-body th { padding: 5px 8px; font-size: 12px }
  .proj-content { flex-direction: column }
  .proj-toc-wrap { width: 100%; max-height: none; position: static; padding: 0 0 8px; display: none; border-bottom: 1px solid var(--border-subtle); margin-bottom: 8px }
  .proj-toc-wrap.mobile-open { display: block }
  .proj-toc-toggle { display: inline-flex }
  .proj-toc a { padding: 6px 10px; font-size: 13px }
  .proj-toc a.toc-h1 { padding-left: 10px }
  .proj-toc a.toc-h2 { padding-left: 18px }
  .proj-toc a.toc-h3 { padding-left: 28px }
  .proj-toc a.toc-h4 { padding-left: 36px }
}