/* ==========================================================================
   Study Document Explorer
   Tokens follow the data-viz reference palette. The three service-line hues
   are categorical slots 1-3 (validated all-pairs, light + dark).
   ========================================================================== */

:root {
  color-scheme: light;

  --page:            #f9f9f7;
  --surface-1:       #fcfcfb;
  --surface-2:       #f2f1ed;
  --surface-sunken:  #edece7;

  --text-primary:    #0b0b0b;
  --text-secondary:  #52514e;
  --text-muted:      #898781;

  --grid:            #e1e0d9;
  --axis:            #c3c2b7;
  --border:          rgba(11, 11, 11, 0.10);
  --border-strong:   rgba(11, 11, 11, 0.18);

  /* categorical — service lines.
     Preclinical is a light orange by request; the Lab green is stepped deeper
     to keep the pair separable under protanopia (ΔE 11.5, target >= 8). */
  --clinical:        #2a78d6;
  --preclinical:     #f59a5c;
  --lab:             #0d8f60;

  /* sequential (blue ramp) */
  --seq-100:         #cde2fb;
  --seq-250:         #86b6ef;
  --seq-450:         #2a78d6;
  --seq-600:         #184f95;

  --good:            #0ca30c;
  --warning:         #fab219;
  --critical:        #d03b3b;

  /* file-format badges */
  --badge-pdf-fg:    #b04a17;
  --badge-pdf-bg:    rgba(235, 104, 52, .14);
  --badge-word-fg:   #2a78d6;
  --badge-word-bg:   rgba(42, 120, 214, .12);
  --badge-excel-fg:  #0a7f37;
  --badge-excel-bg:  rgba(12, 163, 12, .12);
  --badge-mail-fg:   #a06a00;
  --badge-mail-bg:   rgba(250, 178, 25, .16);

  --focus:           #2a78d6;
  --shadow:          0 1px 2px rgba(11, 11, 11, .05), 0 8px 24px rgba(11, 11, 11, .05);

  --radius:          10px;
  --radius-sm:       6px;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page:           #0d0d0d;
    --surface-1:      #1a1a19;
    --surface-2:      #212120;
    --surface-sunken: #141413;
    --text-primary:   #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted:     #898781;
    --grid:           #2c2c2a;
    --axis:           #383835;
    --border:         rgba(255, 255, 255, 0.10);
    --border-strong:  rgba(255, 255, 255, 0.20);
    --clinical:       #3987e5;
    --preclinical:    #f0a070;
    --lab:            #0f9464;
    --seq-100:        #0d366b;
    --seq-250:        #184f95;
    --seq-450:        #3987e5;
    --seq-600:        #86b6ef;
    --badge-pdf-fg:   #ef946a;
    --badge-pdf-bg:   rgba(217, 89, 38, .22);
    --badge-word-fg:  #6da7ec;
    --badge-word-bg:  rgba(57, 135, 229, .18);
    --badge-excel-fg: #4dba63;
    --badge-excel-bg: rgba(12, 163, 12, .18);
    --badge-mail-fg:  #dfb352;
    --badge-mail-bg:  rgba(250, 178, 25, .18);
    --shadow:         0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page:           #0d0d0d;
  --surface-1:      #1a1a19;
  --surface-2:      #212120;
  --surface-sunken: #141413;
  --text-primary:   #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted:     #898781;
  --grid:           #2c2c2a;
  --axis:           #383835;
  --border:         rgba(255, 255, 255, 0.10);
  --border-strong:  rgba(255, 255, 255, 0.20);
  --clinical:       #3987e5;
  --preclinical:    #f0a070;
  --lab:            #0f9464;
  --seq-100:        #0d366b;
  --seq-250:        #184f95;
  --seq-450:        #3987e5;
  --seq-600:        #86b6ef;
  --badge-pdf-fg:   #ef946a;
  --badge-pdf-bg:   rgba(217, 89, 38, .22);
  --badge-word-fg:  #6da7ec;
  --badge-word-bg:  rgba(57, 135, 229, .18);
  --badge-excel-fg: #4dba63;
  --badge-excel-bg: rgba(12, 163, 12, .18);
  --badge-mail-fg:  #dfb352;
  --badge-mail-bg:  rgba(250, 178, 25, .18);
  --shadow:         0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--text-primary);
  font: 400 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }

a { color: inherit; }

code {
  font: 12px/1 var(--mono);
  background: var(--surface-2);
  border-radius: 4px;
  padding: 2px 5px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

:where(button, input, select, a):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── top bar ─────────────────────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 24px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }

.brand-mark {
  width: 32px; height: 32px; flex: none;
  display: block;
  object-fit: contain;
}

.topbar h1 { font-size: 15px; }

.brand-sub {
  margin: 1px 0 0;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.tabs {
  display: flex;
  gap: 2px;
  margin-left: auto;
  background: var(--surface-2);
  padding: 3px;
  border-radius: 999px;
}

.tab {
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font: 500 13px/1 var(--sans);
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
}
.tab:hover { color: var(--text-primary); }
.tab.is-active {
  background: var(--surface-1);
  color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

.icon-btn {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-1);
  color: var(--text-secondary);
  cursor: pointer;
}
.icon-btn:hover { border-color: var(--border-strong); color: var(--text-primary); }
.theme-icon {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--text-secondary);
  box-shadow: inset -4px -3px 0 0 var(--surface-1);
}

/* ── views ───────────────────────────────────────────────────────────────── */
main { flex: 1; min-height: 0; display: flex; }
.view { display: none; width: 100%; min-width: 0; }
.view.is-active { display: block; }
#view-explorer.is-active { display: flex; }

#view-overview { padding: 24px; overflow-y: auto; }
#view-documents { padding: 24px; overflow-y: auto; }

/* ── hero + stat tiles ───────────────────────────────────────────────────── */
.hero-row {
  display: grid;
  grid-template-columns: minmax(240px, 300px) 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.hero, .stat {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
}

.hero { display: flex; flex-direction: column; justify-content: center; }

.stat-label {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}

.hero-value {
  margin: 6px 0 0;
  font-size: 52px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.hero-note { margin: 6px 0 0; font-size: 12px; color: var(--text-muted); }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}

.stat-value {
  margin: 6px 0 0;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.stat-note { margin: 4px 0 0; font-size: 12px; color: var(--text-muted); }

/* ── cards ───────────────────────────────────────────────────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  align-items: start;
}

.card-grid > .card { grid-column: span 4; }
.card-grid > .card-wide { grid-column: 1 / -1; }

@media (max-width: 1180px) {
  .card-grid > .card { grid-column: span 6; }
}
@media (max-width: 760px) {
  .card-grid > .card { grid-column: 1 / -1; }
}

.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px 20px;
  min-width: 0;
}

.card-wide { grid-column: 1 / -1; }
.card h2 { font-size: 14px; }
.card-sub { margin: 4px 0 16px; font-size: 12px; color: var(--text-muted); }
.card-note {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--grid);
  font-size: 12px;
  color: var(--text-muted);
}

/* ── bar chart (HTML marks) ──────────────────────────────────────────────── */
.chart { display: flex; flex-direction: column; gap: 12px; }

.bar-row { display: grid; grid-template-columns: 1fr; gap: 5px; }

.bar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
}
.bar-name { color: var(--text-primary); font-weight: 500; display: flex; align-items: center; gap: 7px; }
.bar-value { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.bar-value .pct { color: var(--text-muted); margin-left: 6px; }

.bar-track {
  height: 14px;
  background: var(--surface-sunken);
  border-radius: 3px 4px 4px 3px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  border-radius: 0 4px 4px 0;
  background: var(--seq-450);
  min-width: 3px;
  transition: filter .12s ease;
}
.bar-row:hover .bar-fill { filter: saturate(1.15) brightness(1.06); }

.swatch {
  width: 10px; height: 10px; flex: none;
  border-radius: 3px;
  background: var(--seq-450);
}

/* meter (archived share) */
.meter { display: flex; flex-direction: column; gap: 10px; }
.meter-track {
  height: 22px;
  background: var(--seq-100);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
}
.meter-fill { background: var(--seq-450); height: 100%; border-radius: 0 4px 4px 0; }
.meter-legend { display: flex; gap: 18px; font-size: 12px; color: var(--text-secondary); }
.meter-legend span { display: flex; align-items: center; gap: 7px; }
.meter-legend i {
  width: 10px; height: 10px; border-radius: 3px; display: inline-block;
  background: var(--seq-450);
}
.meter-legend i.track { background: var(--seq-100); }

/* ── tables ──────────────────────────────────────────────────────────────── */
.table-scroll { overflow-x: auto; }

.grid-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.grid-table th, .grid-table td {
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid var(--grid);
  white-space: nowrap;
}
.grid-table th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--axis);
}
.grid-table td.num, .grid-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.grid-table tbody tr:last-child td { border-bottom: 0; }
.grid-table tbody tr.is-clickable,
.grid-table td.is-clickable { cursor: pointer; }
.grid-table tbody tr.is-clickable:hover { background: var(--surface-2); }
.grid-table td.is-clickable:hover .study-name { text-decoration: underline; }

/* td max-width is unreliable in auto table layout — truncate on an inner block */
.trunc {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#largest-table .trunc { max-width: 220px; }
#largest-table th, #largest-table td { padding-left: 0; }
#largest-table th:last-child, #largest-table td:last-child { padding-right: 0; }

.share-cell { min-width: 120px; }
.share-bar {
  height: 8px;
  background: var(--surface-sunken);
  border-radius: 2px 4px 4px 2px;
  overflow: hidden;
}
.share-bar > i { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--seq-450); }

/* ── explorer layout ─────────────────────────────────────────────────────── */
.explorer {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: 0;
  width: 100%;
  min-height: 0;
}

.panel { min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.panel-list { border-right: 1px solid var(--border); background: var(--surface-1); }
.panel-tree { background: var(--page); }
.panel-docs {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.panel-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.search input {
  width: 100%;
  padding: 9px 12px;
  font: 400 13px/1.2 var(--sans);
  color: var(--text-primary);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.search input::placeholder { color: var(--text-muted); }
/* keep Chromium's autofill wash from repainting the field white in dark mode */
.search input:-webkit-autofill,
.search input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-primary);
  box-shadow: 0 0 0 1000px var(--surface-sunken) inset;
}
.search-sm input { padding: 7px 10px; font-size: 12px; }

.filters { display: flex; flex-wrap: wrap; gap: 6px; }

.chip {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 4px 11px;
  font: 500 12px/1.4 var(--sans);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chip:hover { border-color: var(--border-strong); color: var(--text-primary); }
.chip.is-on {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--surface-1);
}
.chip .dot { width: 8px; height: 8px; border-radius: 50%; }
.chip-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.filters > .chip-group { width: 100%; }
.chip-group > .label {
  flex: none;
  width: 52px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  margin-right: 2px;
}

select {
  font: 400 12px/1 var(--sans);
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 5px 8px;
  cursor: pointer;
}

.list-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ── study list ──────────────────────────────────────────────────────────── */
.study-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.study-row {
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 8px;
  padding: 9px 10px;
  cursor: pointer;
  display: grid;
  gap: 6px;
  color: inherit;
  font: inherit;
}
.study-row:hover { background: var(--surface-2); }
.study-row.is-selected {
  background: var(--surface-2);
  border-color: var(--border-strong);
}

.study-row .top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.study-name {
  font: 500 13px/1.35 var(--mono);
  word-break: break-word;
}
.study-count {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mini-bar {
  display: flex;
  height: 4px;
  gap: 2px;
}
.mini-bar > i { display: block; border-radius: 2px; }

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.btn {
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-secondary);
  border-radius: 7px;
  padding: 6px 11px;
  font: 500 12px/1.3 var(--sans);
  cursor: pointer;
}
.btn:hover:not(:disabled) { border-color: var(--border-strong); color: var(--text-primary); }
.btn:disabled { opacity: .45; cursor: default; }

/* ── study head + tree ───────────────────────────────────────────────────── */
.panel-tree { overflow: hidden; }
.tree-wrap { display: flex; flex-direction: column; min-height: 0; height: 100%; }

.study-head {
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-1);
}
.study-head h2 { font: 600 20px/1.2 var(--mono); letter-spacing: -0.01em; word-break: break-word; }
.study-head .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--surface-1);
  white-space: nowrap;
}
.pill b { color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.pill .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

.tree-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-1);
  flex-wrap: wrap;
}
.tree-tools .search { flex: 1; min-width: 180px; }
.check {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-secondary); cursor: pointer; white-space: nowrap;
}

.tree {
  overflow: auto;
  flex: 1;
  min-height: 0;
  padding: 10px 16px 40px;
}
.tree > .node { max-width: 1180px; }

.node { position: relative; }
.node-children {
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid var(--grid);
}

.node-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.node-row:hover { background: var(--surface-2); }

.twisty {
  width: 14px; height: 14px; flex: none;
  display: grid; place-items: center;
  color: var(--text-muted);
  transition: transform .12s ease;
}
.node.is-open > .node-row .twisty { transform: rotate(90deg); }
.twisty svg { width: 9px; height: 9px; }

.node-icon {
  width: 16px; height: 16px; flex: none;
  display: grid; place-items: center;
  color: var(--text-muted);
}
.node-icon svg { width: 14px; height: 14px; }

.node-label { font-size: 13px; font-weight: 500; }
.node-row.kind-service .node-label { font-size: 13.5px; font-weight: 600; }
.node-row.kind-service .node-icon { color: var(--tone, var(--text-muted)); }
.node-row.kind-doctype .node-label { font-weight: 600; }

.node-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tag {
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 10.5px;
  color: var(--text-secondary);
  letter-spacing: .02em;
}
.tag.archive { border-color: transparent; background: var(--surface-sunken); }

/* documents inside the tree */
.doc-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px 5px 10px;
  border-radius: 7px;
  font-size: 12.5px;
  color: var(--text-secondary);
}
.doc-row:hover { background: var(--surface-2); }
.doc-name {
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-row .grow { flex: 1; min-width: 0; }

.ext-badge {
  flex: none;
  width: 38px;
  text-align: center;
  font: 600 9.5px/1.7 var(--sans);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--surface-sunken);
  border-radius: 4px;
}
.ext-badge.pdf   { color: var(--badge-pdf-fg);   background: var(--badge-pdf-bg); }
.ext-badge.word  { color: var(--badge-word-fg);  background: var(--badge-word-bg); }
.ext-badge.excel { color: var(--badge-excel-fg); background: var(--badge-excel-bg); }
.ext-badge.mail  { color: var(--badge-mail-fg);  background: var(--badge-mail-bg); }

.link-out {
  flex: none;
  color: var(--text-muted);
  text-decoration: none;
  opacity: 0;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 5px;
}
.doc-row:hover .link-out, .link-out:focus-visible { opacity: 1; }
.link-out:hover { color: var(--text-primary); background: var(--surface-sunken); }
.link-out svg { width: 12px; height: 12px; }

.more-btn {
  margin: 4px 0 8px 10px;
  border: 1px dashed var(--border-strong);
  background: transparent;
  color: var(--text-secondary);
  border-radius: 7px;
  padding: 5px 10px;
  font: 500 12px/1.3 var(--sans);
  cursor: pointer;
}
.more-btn:hover { color: var(--text-primary); }

.empty {
  margin: auto;
  max-width: 420px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  padding: 40px 24px;
}
.empty-title { font-size: 15px; font-weight: 600; color: var(--text-secondary); margin: 0 0 6px; }
.panel-tree:has(.empty:not([hidden])) { display: grid; place-items: center; }

.loading { padding: 24px; color: var(--text-muted); font-size: 13px; }

/* ── documents view ──────────────────────────────────────────────────────── */
.doc-table td.path { font: 12px/1.4 var(--mono); color: var(--text-muted); }
.doc-table td.path .trunc { max-width: 340px; }
.doc-table td.study .trunc { max-width: 180px; }

.file-cell { display: flex; align-items: center; gap: 8px; max-width: 420px; }
.file-cell .trunc { min-width: 0; }
.file-cell .tag { flex: none; }

/* ── tooltip ─────────────────────────────────────────────────────────────── */
.tooltip {
  position: fixed;
  z-index: 50;
  pointer-events: none;
  background: var(--surface-1);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.45;
  max-width: 260px;
}
.tooltip b { font-variant-numeric: tabular-nums; }
.tooltip .t-label { color: var(--text-muted); }

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero-row { grid-template-columns: 1fr; }
  .explorer { grid-template-columns: 1fr; }
  .panel-list { border-right: 0; border-bottom: 1px solid var(--border); max-height: 42vh; }
  .topbar { flex-wrap: wrap; gap: 12px; }
  .tabs { margin-left: 0; order: 3; width: 100%; justify-content: space-between; }
}