/* sections — tab visibility, qdrant viz, filter bar, responsive */
  /* Tab-driven section visibility */
  .panel[data-section] { display: none; }
  body[data-active-section="activity"] .panel[data-section="activity"],
  body[data-active-section="review"] .panel[data-section="review"],
  body[data-active-section="improvements"] .panel[data-section="improvements"],
  body[data-active-section="support"] .panel[data-section="support"],
  body[data-active-section="users"] .panel[data-section="users"],
  body[data-active-section="health"] .panel[data-section="health"],
  body[data-active-section="qdrant"] .panel[data-section="qdrant"],
  body[data-active-section="benchmark"] .panel[data-section="benchmark"],
  body[data-active-section="digest"] .panel[data-section="digest"] {
    display: block;
  }

  /* Nav modes: the Admin button swaps the WHOLE section nav between the
     normal user sections and the admin sections (Users | Health | Qdrant) —
     no sub-menu. Admin-mode buttons are hidden by default so non-admins (and
     the user mode) never see them. */
  .headerNavBtn[data-nav-mode="admin"] { display: none; }
  body[data-nav-mode="admin"] .headerNavBtn[data-nav-mode="admin"] { display: inline-flex; }
  body[data-nav-mode="admin"] .headerNavBtn[data-nav-mode="user"] { display: none; }

  /* --- Qdrant projection view --- */
  .qdrant-layout {
    display: flex;
    gap: var(--space-lg);
    align-items: stretch;
  }

  .qdrant-sidebar {
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }

  .qdrant-sidebar .qd-section h3 {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    font-weight: 600;
    margin-bottom: 8px;
  }

  .qdrant-sidebar label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    font-weight: 600;
    margin-bottom: 8px;
  }

  .qd-input {
    width: 100%;
    height: 34px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    font-family: inherit;
    font-size: var(--font-control);
    padding: 0 10px;
    line-height: 1;
  }

  .qd-input::placeholder { color: rgba(255, 255, 255, 0.35); }

  .qd-input:focus {
    outline: none;
    border-color: var(--accent-5);
  }

  .qd-stat { font-size: 0.9rem; color: var(--text); }
  .qd-stat span { color: var(--muted-strong); }

  .qd-legend { list-style: none; display: flex; flex-direction: column; gap: 6px; }
  .qd-legend li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--muted-strong);
  }
  .qd-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }

  .qd-search-row { display: flex; gap: 8px; margin-top: 8px; }
  .qd-btn {
    height: 34px;
    padding: 0 14px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    font-family: inherit;
    font-size: var(--font-control);
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
  }
  .qd-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.22); }
  .qd-btn.primary { background: var(--accent-6); border-color: var(--accent-6); }
  .qd-btn.primary:hover { background: var(--accent-7, #1d4ed8); }
  .qd-search-row .qd-btn { flex: 1; }

  .qd-search-result { font-size: 0.78rem; color: var(--muted); margin-top: 8px; }
  .qd-search-result.no-match { color: var(--red); }

  .qd-map-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 600px;
  }

  .qd-map-wrap {
    flex: 1;
    position: relative;
    min-height: 560px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--panel-border);
    background: rgba(0, 0, 0, 0.25);
    overflow: hidden;
  }

  .qd-map { position: absolute; inset: 0; }

  /* HTML fallback axis titles (shown only when deck.TextLayer is unavailable). */
  .qd-axis-title {
    position: absolute;
    display: none;
    color: var(--muted-strong);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    pointer-events: none;
    z-index: 2;
  }
  .qd-axis-x { bottom: 8px; left: 0; right: 0; text-align: center; }
  .qd-axis-y {
    left: 10px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: left center;
  }

  .qd-caption {
    margin: 8px 2px 0;
    color: var(--muted);
    font-size: 0.74rem;
    line-height: 1.4;
  }

  .qd-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    color: var(--muted);
    font-size: 0.95rem;
    z-index: 2;
  }
  .qd-overlay.error { color: var(--red); }

  /* Point-detail modal: key/value payload table + collapsible node content */
  .qd-detail-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
  .qd-detail-table th,
  .qd-detail-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    text-align: left;
  }
  .qd-detail-table th {
    width: 30%;
    color: var(--muted-strong);
    font-weight: 600;
    white-space: nowrap;
  }
  .qd-detail-table td { color: var(--text); word-break: break-word; }
  .qd-detail-node summary { cursor: pointer; color: var(--muted-strong); font-size: 0.82rem; }
  .qd-detail-node pre {
    margin-top: 8px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.74rem;
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
  }

  .qd-tooltip {
    position: fixed;
    max-width: 320px;
    padding: 12px;
    background: rgba(20, 20, 22, 0.96);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
    font-size: 0.72rem;
    pointer-events: none;
    z-index: 1000;
    box-shadow: var(--shadow);
  }
  .qd-tt-type {
    display: inline-block;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    color: #111;
    font-size: 0.62rem;
    text-transform: uppercase;
    font-weight: 700;
    margin-right: 6px;
  }
  .qd-tt-title { font-weight: 700; }
  .qd-tt-summary { color: var(--accent-2); font-style: italic; line-height: 1.35; margin-top: 6px; }
  .qd-tt-text { color: var(--muted-strong); line-height: 1.4; margin-top: 6px; }
  .qd-tt-meta { color: var(--muted); font-size: 0.65rem; margin-top: 4px; word-break: break-word; }
  .qd-tt-score { color: var(--accent-2); margin-top: 6px; font-weight: 600; }

  /* Filter bar (Recent Questions table) */
  .filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
  }

  .filter-input,
  .filter-clear {
    height: var(--control-h);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    font-family: inherit;
    font-size: var(--font-control);
    padding: 0 10px;
    line-height: 1;
  }

  .filter-input::placeholder { color: rgba(255, 255, 255, 0.35); }

  .filter-input { flex: 1 1 220px; min-width: 180px; }

  .filter-input:focus {
    outline: none;
    border-color: var(--accent-5);
  }

  .filter-clear {
    cursor: pointer;
    /* Pill radius matches the sibling .chip-dd-btn Filter trigger and overrides
       the shared radius-md above, which the search input keeps. */
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
    font-weight: 600;
  }

  .filter-clear:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.22);
  }

  .filter-count {
    font-size: var(--font-control-sm);
    color: rgba(255, 255, 255, 0.5);
    margin-left: 4px;
    font-variant-numeric: tabular-nums;
  }

  .support-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-control);
    color: var(--text);
    cursor: pointer;
  }

  .support-filter-toggle input { cursor: pointer; }

  .support-comment {
    max-width: 360px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .support-actions {
    white-space: nowrap;
  }

  /* Pin the View chip's box model so it sits at a consistent control height. */
  .support-actions .chip {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 9px;
    font-size: var(--font-control);
    line-height: 1;
    border-radius: 999px;
    box-sizing: border-box;
  }

  /* --- Benchmarking --- */

  .bm-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 14px;
  }

  .bm-progress-track {
    flex: 1;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
  }

  .bm-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: #818cf8; /* matches the panel's indigo accent */
    transition: width 0.4s ease;
  }

  .bm-progress-label {
    font-size: var(--font-control);
    color: var(--muted);
    white-space: nowrap;
  }

  /* Rep-score chips inside a result cell; clickable like table snippets. */
  .bm-rep-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  /* Fixed square (display re-declared over td .chip's inline-block): every glyph is the same circle. */
  .bm-rep-chips .chip {
    display: inline-flex;
    justify-content: center;
    width: 27px;
    height: 27px;
    padding: 0;
    cursor: pointer;
  }

  .bm-aggregates {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    margin-top: 14px;
  }

  /* Element+class so these pin to --control-h whatever the sheet order. */
  button.bm-btn {
    height: var(--control-h);
    box-sizing: border-box;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Mirrors the first row's two calc(50% - 6px) inputs so the right edges line up. */
  #bm-add-docs { flex: 0 1 calc(50% - 6px); }

  .bm-run-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 16px;
    margin-bottom: 16px;
  }

  .bm-run-bar .bm-run-controls {
    margin-left: auto;
    margin-bottom: 0;
    flex: 0 1 auto;
    flex-wrap: nowrap;
  }

  .bm-run-controls .users-status {
    flex: 0 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .bm-models {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex: 1 1 380px;
    min-width: 0;
  }

  .bm-model-field {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex: 1 1 0;
    min-width: 180px;
  }

  .bm-models-single .bm-model-field { flex: 0 1 50%; }

  .bm-model-field .filter-input.invalid { border-color: rgba(220, 38, 38, 0.6); }

  /* Wraps under the input (flex-wrap on the field); colour matches .users-status.error. */
  .bm-model-error {
    flex-basis: 100%;
    margin-top: 4px;
    font-size: var(--font-control-sm);
    color: #dc2626;
  }

  .bm-model-error[hidden] { display: none; }

  button.bm-model-add {
    flex: none;
    padding: 0 9px;
  }

  .bm-model-field .filter-input {
    flex: 1;
    min-width: 0;
    padding-right: 28px;  /* room for the inline remove affordance */
  }

  /* Anchored to the input row's height so a wrapped error cannot drag it down. */
  .bm-model-remove {
    position: absolute;
    right: 5px;
    top: calc(var(--control-h) / 2);
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    background: none;
    color: var(--muted);
    font-family: inherit;
    font-size: var(--font-control);
    line-height: 1;
    cursor: pointer;
  }

  .bm-model-remove:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.1);
  }

  /* 60vh stays clear of the 40vh .chip-dd-menu cap plus a row, so dropdowns fit inside. */
  .bm-cases-scroll {
    max-height: 60vh;
    overflow-y: auto;
  }

  /* --bg, not the translucent --panel: rows would otherwise read through the header. */
  .bm-cases-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg);
    /* border-collapse gives the border to the table, which scrolls out; the shadow rides along. */
    border-bottom: none;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  }

  .bm-coll-create {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
  }

  .bm-coll-create .filter-input { flex: 1; }

  .bm-coll-list {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
  }

  .bm-coll-row {
    display: grid;
    grid-template-columns: 1fr 64px 1fr;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--row-divider);
  }

  .bm-coll-row:last-child { border-bottom: none; }

  .bm-coll-head {
    font-size: var(--font-control-sm);
    padding: 0 0 6px;
  }

  .bm-coll-count {
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  .bm-coll-name { min-width: 0; }

  /* Fills the name column: the .filter-input minimum overflows a narrow modal. */
  .bm-coll-name .filter-input {
    width: 100%;
    min-width: 0;
  }

  .bm-coll-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
  }

  /* .muted is dashboard-wide and carries colour only, so the size lives here. */
  .bm-run-meta { font-size: 0.88rem; }

  .bm-stall-warn {
    font-size: var(--font-control-sm);
    color: #fed7aa;
    white-space: nowrap;
  }

  /* Score-distribution boxplot: HTML chrome at dashboard font sizes, geometry-only 1:1 px SVG. */
  .bm-plot-main { position: relative; }

  .bm-plot {
    display: block;
    width: 100%;
  }

  .bm-plot-grid { stroke: rgba(255, 255, 255, 0.06); }

  .bm-plot-box {
    fill: rgba(255, 255, 255, 0.05);
    stroke: rgba(255, 255, 255, 0.45);
    stroke-width: 1;
  }

  .bm-plot-median {
    stroke: var(--text);
    stroke-width: 2;
  }

  .bm-plot-whisker { stroke: rgba(255, 255, 255, 0.35); }

  .bm-dot {
    cursor: pointer;
    fill-opacity: 0.9;
  }

  .bm-dot:hover {
    fill-opacity: 1;
    stroke: #fff;
  }

  .bm-plot-xaxis {
    position: relative;
    height: 34px;
    margin-top: 4px;
  }

  .bm-plot-xcell {
    position: absolute;
    top: 0;
    text-align: center;
  }

  .bm-plot-xlabel {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .bm-plot-caption {
    font-size: 0.67rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Scoped to .bm-plot-legend: .rc-legend is shared with charts whose items are not clickable. */
  .bm-plot-legend .bm-plot-legend-item {
    display: inline-flex;
    align-items: center;
    border: none;
    padding: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
  }

  .bm-plot-legend .bm-plot-legend-item:hover { color: var(--text); }

  .bm-plot-legend .bm-plot-legend-item[aria-pressed="false"] { opacity: 0.45; }

  /* Round here only: .rc-legend-dot is shared with the Activity and Usage legends. */
  .bm-plot-legend .rc-legend-dot { border-radius: 50%; }

  .bm-plot-empty {
    position: absolute;
    transform: translate(-50%, -50%);
    font-size: 0.7rem;
    color: var(--muted);
    white-space: nowrap;
  }

  /* Compound selector: charts.css loads later, so .rc-tooltip alone would win on order.
     The 8px is 2 x BM_TOOLTIP_PAD in app.js — keep them in sync. */
  .rc-tooltip.bm-plot-tooltip {
    white-space: normal;
    max-width: min(340px, calc(100% - 8px));
  }

  .bm-tooltip-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }

  .bm-tooltip-label { color: var(--muted); }

  @media (max-width: 840px) {
    .topbar-inner {
      align-items: flex-start;
      flex-direction: column;
      padding: 8px;
    }
    .controls { width: 100%; justify-content: flex-start; padding-right: 0; }
    .layout, .topbar-inner { width: min(100vw - 16px, 1600px); }
    .brand-copy { height: auto; }
  }