/* ---------- theme ---------- */
:root {
  --bg: #ffffff;
  --bg-alt: #f5f5f7;
  --fg: #1c1c1e;
  --fg-dim: #6b6b70;
  --accent: #0a6cff;
  --border: #e4e4e8;
  --code-bg: #f0f0f3;
  --highlight: #fff3a8;
}
html[data-theme="dark"] {
  --bg: #15171a;
  --bg-alt: #1c1f23;
  --fg: #e6e6e8;
  --fg-dim: #9a9aa1;
  --accent: #4ea1ff;
  --border: #2a2d33;
  --code-bg: #22262b;
  --highlight: #6a5a00;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--fg);
  background: var(--bg);
  display: grid;
  grid-template-columns: 300px 1fr;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- sidebar ---------- */
#sidebar {
  border-right: 1px solid var(--border);
  background: var(--bg-alt);
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: sticky;
  top: 0;
}
#sidebar header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
#sidebar header h1 {
  font-size: 16px;
  margin: 0;
  letter-spacing: 0.3px;
}
#theme-toggle {
  background: none;
  border: 1px solid var(--border);
  color: var(--fg);
  border-radius: 6px;
  width: 28px; height: 28px;
  cursor: pointer;
}
nav.primary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
nav.primary a {
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 5px;
  border: 1px solid transparent;
}
nav.primary a.active {
  background: var(--bg);
  border-color: var(--border);
}
#session-filter {
  margin: 10px 14px 6px;
  padding: 6px 8px;
  font: inherit;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
}

/* sort controls (sidebar + globals) */
.sort-control {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--fg-dim);
}
#session-sort-wrap {
  margin: 0 14px 6px;
}
.sort-control label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sort-control select {
  flex: 1;
  font: inherit;
  font-size: 12px;
  padding: 3px 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  border-radius: 5px;
  cursor: pointer;
}
.global-sort {
  margin: 0 0 14px;
}
.global-sort select { flex: 0 0 auto; min-width: 14em; }
.entry-group-label {
  display: inline-block;
  font-size: 0.7em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-dim);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 8px;
  vertical-align: middle;
  font-weight: 400;
}
.entry-meta {
  font-size: 0.75em;
  color: var(--fg-dim);
  margin-left: 8px;
  vertical-align: middle;
  font-weight: 400;
}
.view-mode {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 14px 8px;
  font-size: 0.8em;
}
.view-mode-label {
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.85em;
}
.view-mode button {
  flex: 1;
  padding: 4px 6px;
  font: inherit;
  font-size: 0.95em;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg-dim);
  border-radius: 5px;
  cursor: pointer;
}
.view-mode button:hover { color: var(--fg); border-color: var(--accent); }
.view-mode button.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
#session-list {
  list-style: none;
  padding: 4px 6px 16px;
  margin: 0;
  overflow-y: auto;
  flex: 1;
}
#session-list li a {
  display: block;
  padding: 4px 8px;
  border-radius: 5px;
  color: var(--fg);
  font-size: 13px;
  line-height: 1.35;
}
#session-list li a:hover { background: var(--bg); text-decoration: none; }
#session-list li a.active { background: var(--accent); color: #fff; }
#session-list .num {
  display: inline-block;
  min-width: 2.6em;
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}
#session-list li a.active .num { color: #e5efff; }

/* ---------- main ---------- */
#content {
  height: 100vh;
  overflow-y: auto;
  padding: 28px 40px 80px;
}
#view { max-width: 900px; margin: 0 auto; }
#loading {
  position: fixed; top: 10px; right: 14px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
}

/* ---------- markdown ---------- */
#view h1 { font-size: 26px; margin: 0 0 8px; }
#view h2 { margin-top: 1.6em; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
#view h3 { margin-top: 1.4em; color: var(--fg); }
#view img { max-width: 100%; border-radius: 6px; border: 1px solid var(--border); }
#view pre, #view code { background: var(--code-bg); border-radius: 4px; }
#view code { padding: 1px 5px; font-size: 0.92em; }
#view pre { padding: 10px 14px; overflow-x: auto; }
#view pre code { padding: 0; background: transparent; }
#view blockquote {
  margin: 0.6em 0;
  padding: 4px 14px;
  border-left: 3px solid var(--border);
  color: var(--fg-dim);
}
#view ul, #view ol { padding-left: 1.4em; }
#view li { margin: 2px 0; }
#view table { border-collapse: collapse; }
#view th, #view td { border: 1px solid var(--border); padding: 4px 8px; }
#view hr { border: none; border-top: 1px solid var(--border); margin: 2em 0; }

/* ---------- collapsible sections ---------- */
.collapse-bar {
  display: flex;
  gap: 6px;
  margin: 0 0 14px;
}
.collapse-bar button {
  font: inherit;
  font-size: 12px;
  padding: 3px 9px;
  background: var(--bg-alt);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
}
.collapse-bar button:hover { background: var(--bg); }
.collapse-bar .audio-toggle { margin-left: auto; }
.collapse-bar .audio-toggle.active {
  background: var(--bg);
  border-color: var(--fg-dim);
  color: var(--fg-dim);
}

/* Audio-transcription notes: italicised [From audio:] blocks added to raw
   sessions during the post-export recap pass. Tagged by app.js as
   .audio-note (the <em>) and .audio-only (a <p> whose only content is one).
   The toolbar toggle flips .audio-hidden on the body so the whole class
   set collapses out. .audio-only is hidden as a block to avoid leaving a
   blank paragraph gap; inline .audio-note hides just the span. */
.audio-hidden .audio-note { display: none; }
.audio-hidden p.audio-only { display: none; }

/* FLIP-animate the reflow when the audio toggle hides / shows notes.
   display:none can't be transitioned directly, but the SURROUNDING
   paragraphs that move because of it can. The handler in app.js
   (animateAudioToggle) snapshots positions, applies the class change,
   then inverts each surviving block to its old spot via transform;
   this rule carries it to its new spot. Scoped to the session view
   (#view) so the same FLIP animation doesn't leak onto other pages. */
#view details, #view summary, #view p, #view ul, #view ol, #view li,
#view h2, #view h3, #view h4, #view h5, #view blockquote, #view pre, #view table {
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  #view details, #view summary, #view p, #view ul, #view ol, #view li,
  #view h2, #view h3, #view h4, #view h5, #view blockquote, #view pre, #view table {
    transition: none;
  }
}

details.md-collapsible {
  border-left: 2px solid var(--border);
  padding: 0 0 0 12px;
  margin: 0.6em 0;
}
details.md-collapsible > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-left: -12px;
  padding: 2px 0 2px 6px;
  border-radius: 4px;
}
details.md-collapsible > summary:hover { background: var(--bg-alt); }
details.md-collapsible > summary::-webkit-details-marker { display: none; }
details.md-collapsible > summary::before {
  content: "▸";
  display: inline-block;
  width: 1em;
  color: var(--fg-dim);
  transition: transform 0.12s ease;
  font-size: 0.85em;
}
details.md-collapsible[open] > summary::before { transform: rotate(90deg); }

.md-heading {
  font-weight: 600;
  line-height: 1.25;
}
.md-heading.h2 { font-size: 1.35em; }
.md-heading.h3 { font-size: 1.1em;  color: var(--fg); }

/* Replace default heading margins inside summaries */
details.md-collapsible > summary .md-heading { margin: 0; padding: 0; border: none; }
details.md-collapsible.md-lvl-2 { border-left-color: var(--accent); }
details.md-collapsible.md-lvl-2 > summary { border-bottom: 1px solid var(--border); }

/* H2 intro body wrapper; a quiet toggle for prose under a category heading */
details.md-collapsible.md-intro {
  border-left-color: var(--border);
  margin: 4px 0 8px;
  padding-left: 8px;
}
details.md-collapsible.md-intro > summary {
  border: none;
  font-size: 12px;
  color: var(--fg-dim);
  padding: 0 0 0 6px;
}
.md-intro-label { font-style: italic; }

/* session-ref pills */
.sref {
  display: inline-block;
  padding: 0 5px;
  border-radius: 4px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  font-size: 0.85em;
  color: var(--accent);
  white-space: nowrap;
}
.sref:hover { background: var(--accent); color: #fff; text-decoration: none; border-color: var(--accent); }

/* auto-linked character / location names (background pass) */
.auto-link {
  color: inherit;
  text-decoration: underline dotted var(--fg-dim);
  text-underline-offset: 2px;
}
.auto-link:hover { color: var(--accent); text-decoration-color: var(--accent); }
.auto-link[data-kind="locations"]:hover { color: #2a8d4f; text-decoration-color: #2a8d4f; }
html[data-theme="dark"] .auto-link[data-kind="locations"]:hover { color: #67d18a; text-decoration-color: #67d18a; }

/* Multi-entry popup: when a name resolves to multiple entries (e.g. two
   "Ward"s) the popup body renders each entry as its own section with a mini
   header and a per-entry "Open page" link. */
.auto-popup-section + .auto-popup-section { margin-top: 0.5rem; }
.auto-popup-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0 0.35rem;
  font-weight: 600;
}
.auto-popup-section-name { flex: 1; }
.auto-popup-section-open {
  font-size: 0.85em;
  text-decoration: none;
  color: var(--accent);
  white-space: nowrap;
}
.auto-popup-section-open:hover { text-decoration: underline; }
.auto-popup-sep {
  border: 0;
  border-top: 1px solid var(--border, #ccc);
  margin: 0.75rem 0;
}

@keyframes focusFlash {
  0%   { background: var(--highlight); }
  100% { background: transparent; }
}
.focus-flash > summary { animation: focusFlash 1.2s ease-out; border-radius: 4px; }
/* Flash a bare heading element when a semantic deep-link jumps to its section. */
.section-flash { animation: focusFlash 1.2s ease-out; border-radius: 4px; }

/* search-result highlight inside the destination view */
mark.search-mark {
  background: var(--highlight);
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
}
@keyframes searchMarkFlash {
  0%, 60% { box-shadow: 0 0 0 4px var(--highlight); }
  100%    { box-shadow: 0 0 0 0 transparent; }
}
mark.search-mark-flash { animation: searchMarkFlash 1.5s ease-out; }

/* auto-link popup */
.auto-link { touch-action: manipulation; } /* avoid iOS double-tap-to-zoom */
.auto-popup {
  position: fixed;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  min-height: 160px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  overflow: hidden;
}
.auto-popup-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  cursor: default;
  user-select: none;
}
.auto-popup-title {
  flex: 1;
  font-weight: 600;
  font-size: 0.95em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.auto-popup-actions { display: flex; gap: 4px; }
.auto-popup-actions button {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 0.85em;
  cursor: pointer;
}
.auto-popup-actions button:hover { background: var(--bg); border-color: var(--accent); color: var(--accent); }
.auto-popup-close { padding: 3px 7px !important; font-size: 1em !important; line-height: 1; }
.auto-popup-body {
  flex: 1;
  overflow: auto;
  padding: 10px 14px;
  font-size: 0.92em;
  line-height: 1.5;
}
.auto-popup-body h1, .auto-popup-body h2 { font-size: 1.05em; margin: 0 0 6px; }
.auto-popup-body h3 { font-size: 1em; margin: 8px 0 4px; }
.auto-popup-body p, .auto-popup-body ul, .auto-popup-body ol { margin: 0 0 6px; }
.auto-popup-body img { max-width: 100%; height: auto; }
.auto-popup-resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 22px;
  height: 22px;
  cursor: nwse-resize;
  /* visual grip */
  background:
    linear-gradient(135deg, transparent 50%, var(--fg-dim) 50%, var(--fg-dim) 60%, transparent 60%,
                            transparent 70%, var(--fg-dim) 70%, var(--fg-dim) 80%, transparent 80%);
  border-bottom-right-radius: 8px;
  touch-action: none;
}
.kind-pill {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 0.75em;
  font-weight: 600;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg-dim);
  vertical-align: middle;
}
.kind-pill.kind-characters { color: var(--accent); border-color: var(--accent); }
.kind-pill.kind-locations  { color: #2a8d4f; border-color: #2a8d4f; }
html[data-theme="dark"] .kind-pill.kind-locations { color: #67d18a; border-color: #67d18a; }

/* ---------- session header / tabs ---------- */
.session-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1em;
  padding-bottom: 8px;
}
.session-head .nav-btns { display: flex; gap: 6px; }
.session-head .nav-btns a {
  border: 1px solid var(--border);
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 13px;
  color: var(--fg);
}
.tab-bar {
  display: flex;
  gap: 4px;
  margin: 0 0 14px;
  border-bottom: 1px solid var(--border);
}
.tab-bar button {
  background: none;
  border: 1px solid transparent;
  border-bottom: none;
  padding: 5px 12px;
  font: inherit;
  color: var(--fg-dim);
  cursor: pointer;
  border-radius: 6px 6px 0 0;
  margin-bottom: -1px;
}
.tab-bar button.active {
  color: var(--fg);
  border-color: var(--border);
  background: var(--bg-alt);
}

/* ---------- search ---------- */
#search-input {
  width: 100%;
  padding: 8px 10px;
  font: inherit;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  margin-bottom: 14px;
}
.search-hit {
  border-bottom: 1px solid var(--border);
  padding: 10px 0;
}
.search-hit h4 { margin: 0 0 4px; font-size: 14px; }
.search-hit p {
  margin: 0;
  color: var(--fg-dim);
  font-size: 13px;
  white-space: pre-wrap;
}
.search-hit mark { background: var(--highlight); color: inherit; padding: 0 2px; border-radius: 2px; }

.search-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0 0 8px;
  padding: 8px 10px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
}
.search-filter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
}
.search-filter .count { color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.search-status { color: var(--fg-dim); font-size: 13px; margin: 4px 0 10px; }

.search-mode {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0 0 6px;
  padding: 8px 10px;
  background: var(--bg-alt);
  border: 1px dashed var(--border);
  border-radius: 6px;
  font-size: 13px;
}

#evals-view .eval-status   { color: var(--fg-dim); font-size: 13px; }
#evals-view .eval-summary  { margin: 8px 0; }
#evals-view .eval-table    { border-collapse: collapse; font-size: 12.5px; width: 100%; margin-top: 8px; }
#evals-view .eval-table th, #evals-view .eval-table td { border: 1px solid var(--border); padding: 4px 8px; vertical-align: top; }
#evals-view .eval-table th { background: var(--bg-alt); text-align: left; position: sticky; top: 0; }
#evals-view .eval-pass { color: #196f3d; font-weight: 600; text-align: center; }
#evals-view .eval-fail { color: #a93226; font-weight: 600; text-align: center; }
#evals-view .eval-xfail { color: var(--fg-dim); font-weight: 600; text-align: center; font-style: italic; }
#evals-view .eval-err  { color: var(--fg-dim); font-style: italic; text-align: center; }
#evals-view .eval-pending { color: var(--fg-dim); text-align: center; }
#evals-view .eval-result { min-width: 280px; max-width: 480px; }
#evals-view .eval-result .search-hit { margin: 0; }
#evals-view .eval-server-toggle { display: inline-block; margin: 0 0 8px 12px; font-size: 13px; color: var(--fg-dim); cursor: pointer; }
#evals-view .eval-server-toggle input { vertical-align: middle; margin-right: 4px; }
#evals-view button { margin-bottom: 8px; }
#evals-view .eval-table-controls { display: flex; align-items: center; gap: 16px; margin: 8px 0; font-size: 13px; }
#evals-view .eval-filter-toggle { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
#evals-view .eval-sort-hint { color: var(--fg-dim); font-style: italic; }
#evals-view .eval-th-sortable { cursor: pointer; user-select: none; }
#evals-view .eval-th-sortable:hover { background: var(--bg); }
#evals-view .eval-th-sorted { background: var(--accent-soft, #e8f0fe); }

.sem-score {
  display: inline-block;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  padding: 0 6px;
  margin-left: 6px;
  border-radius: 3px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--fg-dim);
  vertical-align: 1px;
}

.search-routed {
  margin: 8px 0 16px;
  padding: 10px 12px;
  background: var(--bg-alt);
  border-left: 3px solid #0a6cff;
  border-radius: 4px;
  font-size: 14px;
}
.search-routed .muted { color: var(--fg-dim); font-size: 12px; }

.search-didyoumean {
  margin: 4px 0 8px;
  padding: 6px 10px;
  background: var(--bg-alt);
  border-left: 3px solid #d18f00;
  border-radius: 4px;
  font-size: 13px;
}
.search-didyoumean a { font-weight: 600; }
.search-didyoumean .muted { color: var(--fg-dim); font-size: 12px; margin-left: 4px; }

.search-hit .kind {
  display: inline-block;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 3px;
  margin-right: 6px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--fg-dim);
  vertical-align: 1px;
}
.search-hit .kind-summary    { color: #0a6cff; border-color: #0a6cff55; }
.search-hit .kind-raw        { color: #8a6a00; border-color: #8a6a0055; }
.search-hit .kind-characters { color: #c63a8a; border-color: #c63a8a55; }
.search-hit .kind-locations  { color: #2a8d4f; border-color: #2a8d4f55; }
html[data-theme="dark"] .search-hit .kind-summary    { color: #6bb0ff; }
html[data-theme="dark"] .search-hit .kind-raw        { color: #d9b257; }
html[data-theme="dark"] .search-hit .kind-characters { color: #ff7ec0; }
html[data-theme="dark"] .search-hit .kind-locations  { color: #67d18a; }

/* Server-side rerank decoration. Applied to the results container after
   the server's /api/search/query call comes back; the badge sits on the
   status line above so nothing in the hits themselves moves. The
   .search-server-new class marks hits the client's hybrid pipeline never
   surfaced; those are the most interesting ones to inspect. */
.search-server-new {
  border-left: 3px solid #0a6cff;
  padding-left: 8px;
  animation: searchServerFadeIn 0.45s ease-out both;
}
html[data-theme="dark"] .search-server-new { border-left-color: #6bb0ff; }
@keyframes searchServerFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* FLIP-animate the rerank shuffle: when the server's order is applied,
   each hit that moved is instantly translated back to its old spot via
   inline style, then this transition carries it to its new spot.
   `will-change` is not set globally; only the moving nodes get inline
   `transform`, so we just declare the transition target here.
   0.9 s lets the eye actually follow each hit across the others rather
   than just registering a teleport. */
.search-hit {
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* While a hit is mid-flight it lifts above stationary neighbours so it
   visually crosses them instead of getting buried. Z-index + a subtle
   shadow + the tiniest scale bump make a single moving card readable as
   it travels several rows. */
.search-hit-moving {
  position: relative;
  z-index: 5;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  transform-origin: center;
}
html[data-theme="dark"] .search-hit-moving {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
}
@media (prefers-reduced-motion: reduce) {
  .search-hit { transition: none; }
  .search-hit-moving { box-shadow: none; z-index: auto; }
  .search-server-new { animation: none; }
}

/* Inline "server still working" spinner shown next to the result count
   while /api/search/query is in flight. Removed on success / timeout /
   failure. Sized to align with the surrounding text. */
.search-server-pending {
  display: inline-block;
  vertical-align: -2px;
  width: 11px;
  height: 11px;
  margin-left: 6px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  opacity: 0.6;
  animation: searchServerSpin 0.9s linear infinite;
}
@keyframes searchServerSpin {
  to { transform: rotate(360deg); }
}

/* sessions toggle (mobile only) */
#sessions-toggle {
  display: none;
  font: inherit;
  font-size: 13px;
  text-align: left;
  margin: 8px 14px 0;
  padding: 6px 10px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}
#sessions-toggle .caret {
  display: inline-block;
  transition: transform 0.15s ease;
  color: var(--fg-dim);
}
#sessions-toggle[aria-expanded="false"] .caret { transform: rotate(-90deg); }

@media (max-width: 800px) {
  body { grid-template-columns: 1fr; }
  #sidebar { height: auto; position: static; }
  #session-list { max-height: 50vh; }
  #content { padding: 20px; }
  #sessions-toggle { display: block; }
  body.sidebar-collapsed #sessions-pane { display: none; }
}