/* ═══════════════════════════════════════════════════════════════
   SWARM — Swarm dashboard, agent grid, stats, stage headers,
   dialectical modes
   ═══════════════════════════════════════════════════════════════ */

  /* ── Swarm Dashboard ──────────────────────────────── */
  .swarm-dashboard{
    flex-shrink:0;border-bottom:1px solid var(--border);
    background:var(--white);overflow:hidden;
  }
  .swarm-dashboard-header{
    display:flex;align-items:center;gap:12px;
    padding:10px 20px;cursor:pointer;
  }
  .swarm-dashboard-title{
    font-family:var(--serif);font-size:.82rem;font-weight:700;
    color:var(--brown-dark);
  }
  .swarm-dashboard-status{
    font-size:.72rem;color:var(--text-muted);
  }
  /* maintainer 2026-05-11: live narrator update — sits DEAD CENTER in
   * the header bar (the white strip that says "Research"). Italic
   * scholarly serif, ditto-marks bookending, so it reads as a
   * live caption ("Organising research approach…", "A deep-reader
   * has reported", "Drafting your essay…") between the static
   * left-aligned title and the right-aligned phase status. */
  .swarm-dashboard-narrator{
    flex:1 1 auto;
    text-align:center;
    font-family:var(--serif, Georgia, "Times New Roman", serif);
    font-style:italic;
    font-size:.82rem;
    color:var(--brown-dark);
    padding:0 12px;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    transition:opacity .2s ease;
  }
  .swarm-dashboard-narrator:empty{display:none}
  .swarm-dashboard-narrator:not(:empty)::before,
  .swarm-dashboard-narrator:not(:empty)::after{
    content:"·";
    display:inline-block;
    margin:0 8px;
    color:var(--gold, #b8881e);
    font-weight:700;
    transform:translateY(-1px);
  }
  /* Status (right-aligned phase tag) loses margin-left:auto since
   * the narrator now fills the middle flex slot. */
  .swarm-dashboard-header .swarm-dashboard-status{
    margin-left:0;
    flex:0 0 auto;
  }
  .swarm-dashboard-toggle{
    border:none;background:none;cursor:pointer;font-size:.7rem;
    color:var(--text-muted);transition:transform .2s;padding:2px 6px;
  }
  .swarm-dashboard.collapsed .swarm-dashboard-body{display:none}
  .swarm-dashboard.collapsed .swarm-dashboard-toggle{transform:rotate(-90deg)}
  .swarm-dashboard-body{padding:0 20px 14px}
  .swarm-agent-grid{
    /* maintainer 2026-05-10: tightened to fit 5 cards on a single line
     * cleanly without the cramped multi-row spillover. Smaller
     * minmax + halved gap reduces the dashboard's vertical footprint
     * so the reveal blocks below have room to breathe. */
    display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
    gap:5px;margin-bottom:6px;
  }
  .swarm-agent-card{
    /* maintainer 2026-05-11: card is the positioning context for the
     * .swarm-agent-num circle in its bottom-right corner. Padding-
     * right gives the circle clearance from the status text.
     * Whole card is now a button-affordance — cursor pointer, faint
     * hover lift, and focus-visible outline for keyboard users. */
    position:relative;
    border:1px solid var(--border-light);border-radius:5px;
    padding:5px 28px 5px 7px;font-size:.66rem;background:var(--cream);
    font-family:var(--sans, system-ui, sans-serif);
    border-left:2px solid var(--border-light);
    cursor:pointer;
    transition:border-color .2s,opacity .2s,background .18s ease,transform .12s ease,box-shadow .18s ease;
  }
  .swarm-agent-card:hover{
    background:#fbf6ec;
    border-color:var(--brown-light);
    box-shadow:0 1px 0 rgba(74,55,40,.05);
  }
  .swarm-agent-card:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
  }
  .swarm-agent-card:hover .swarm-agent-num{
    transform:scale(1.06);
    border-color:var(--brown-dark);
  }

  /* ── Per-card numbered circle (maintainer 2026-05-11).
   * Collapses the old `.narr-pills` row (the "1 2 3 4 5" strip) onto
   * the agent cards themselves. Circle takes its color from the
   * parent card's `.swarm-agent-{status}` class — pending = muted,
   * searching/synthesizing = gold pulse, done = green, error = red.
   * Click opens the per-agent reasoning popover via event
   * delegation in swarm-dashboard.js. */
  .swarm-agent-num{
    position:absolute;
    right:6px;
    bottom:6px;
    width:20px;height:20px;
    display:inline-flex;align-items:center;justify-content:center;
    border:1px solid var(--border-light);
    background:var(--white);
    color:var(--brown-dark);
    border-radius:50%;
    font-family:var(--serif, Georgia, serif);
    font-size:.68rem;
    font-weight:700;
    line-height:1;
    cursor:pointer;
    padding:0;
    transition:background .18s ease,border-color .18s ease,color .18s ease,transform .12s ease;
  }
  .swarm-agent-num:hover{
    transform:scale(1.08);
    border-color:var(--brown-dark);
  }
  .swarm-agent-num:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:1px;
  }
  /* maintainer 2026-05-11 (re-revision): brightness curve goes from
   * subtle pending → solid dark-brown running → solid green done.
   * Pending is an OUTLINED circle (brown-light hairline on cream),
   * which reads as "not yet activated." Once the agent transitions
   * to a running state the circle fills with solid Mira dark-brown
   * — the dark fill IS the launch signal. No more gold/tan in the
   * running state. */
  .swarm-agent-pending .swarm-agent-num{
    background:var(--cream, #faf6f0);
    color:var(--brown-light, #6b4d40);
    border-color:var(--brown-light, #6b4d40);
  }
  .swarm-agent-searching .swarm-agent-num,
  .swarm-agent-retrieving .swarm-agent-num,
  .swarm-agent-synthesizing .swarm-agent-num,
  .swarm-agent-revising .swarm-agent-num{
    background:var(--brown-dark, #3e2723);
    color:var(--cream, #faf6f0);
    border-color:var(--brown-dark, #3e2723);
    animation:swarm-num-pulse 1.6s ease-in-out infinite;
  }
  .swarm-agent-done .swarm-agent-num{
    background:#4caf50;color:#fff;border-color:#3a9b3e;
    animation:none;
  }
  .swarm-agent-error .swarm-agent-num{
    background:#e53935;color:#fff;border-color:#c62828;
    animation:none;
  }
  .swarm-agent-aborted .swarm-agent-num{
    background:var(--text-muted);color:#fff;border-color:#555;
    animation:none;opacity:.7;
  }
  @keyframes swarm-num-pulse{
    /* Brown halo (was gold) — the launched/running state lives in
     * Mira's brown palette, not gold. */
    0%,100%{ box-shadow:0 0 0 0 rgba(62, 39, 35, 0); }
    50%   { box-shadow:0 0 0 3px rgba(62, 39, 35, .22); }
  }

  /* maintainer 2026-05-11: pending→running "warming up" state.
   * Between strategy-complete and first-agent-dispatch the cards
   * sit in `data-warming="1"` — visible signal that something is
   * about to happen. Numbered circle and status dot animate a
   * gentle brown pulse + the circle slowly fills toward the
   * running palette. Once an agent actually launches the JS
   * removes data-warming and the class transitions to
   * .swarm-agent-searching with the stronger pulse. */
  .swarm-agent-card[data-warming="1"]{
    border-color:var(--brown-light, #6b4d40);
    transition:border-color .3s ease, background .3s ease;
    background:#f5ead2;     /* warmer parchment than plain pending */
  }
  .swarm-agent-card[data-warming="1"] .swarm-agent-num{
    background:var(--brown-light, #6b4d40);
    color:var(--cream, #faf6f0);
    border-color:var(--brown-light, #6b4d40);
    animation:swarm-num-warming 1.4s ease-in-out infinite;
  }
  .swarm-agent-card[data-warming="1"] .swarm-status-dot.swarm-dot-pending{
    background:var(--brown, #513728);
    animation:swarm-warming-dot 1.4s ease-in-out infinite;
  }
  .swarm-agent-card[data-warming="1"] .swarm-agent-status::after{
    content:" — warming up";
    color:var(--brown-light, #6b4d40);
    font-style:italic;
  }
  @keyframes swarm-num-warming{
    0%, 100% { transform:scale(1);    box-shadow:0 0 0 0 rgba(62,39,35,0); }
    50%      { transform:scale(1.08); box-shadow:0 0 0 4px rgba(62,39,35,.18); }
  }
  @keyframes swarm-warming-dot{
    0%, 100% { opacity:1;   transform:scale(1); }
    50%      { opacity:0.55; transform:scale(1.2); }
  }
  /* Reduced-motion override for warming. */
  @media (prefers-reduced-motion: reduce){
    .swarm-agent-card[data-warming="1"] .swarm-agent-num,
    .swarm-agent-card[data-warming="1"] .swarm-status-dot.swarm-dot-pending{
      animation:none;
    }
  }

  /* ── Per-agent "awaiting first response" state — dispatched
   * to the LLM but no chunk yet. maintainer 2026-05-11: previously the
   * cards looked identical and frozen during the first-token-
   * latency window. We now show a small italic counter "awaiting
   * response · Ns" on each card so the user sees the wait isn't
   * infinite + which cards are still pending vs already thinking. */
  .swarm-agent-card[data-awaiting="1"] .swarm-agent-await-counter{
    display:inline;
    font-style:italic;
    color:var(--brown-light, #6b4d40);
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    margin-left:2px;
  }
  /* Once a card transitions to thinking or searching/done, the
   * await counter span (if still present) is hidden. */
  .swarm-agent-card[data-thinking="1"] .swarm-agent-await-counter,
  .swarm-agent-searching .swarm-agent-await-counter,
  .swarm-agent-synthesizing .swarm-agent-await-counter,
  .swarm-agent-done .swarm-agent-await-counter,
  .swarm-agent-error .swarm-agent-await-counter{
    display:none;
  }
  /* While awaiting, show a subtle italic "awaiting response" hint
   * to make the elapsed counter readable. */
  .swarm-agent-card[data-awaiting="1"]:not([data-thinking]) .swarm-agent-status::after{
    content:" — awaiting response";
    color:var(--brown-light, #6b4d40);
    font-style:italic;
  }
  /* The data-warming::after handler still applies during warming;
   * once warming clears and awaiting takes over, the rule above
   * provides the new text. */

  /* ── Per-agent "thinking" state — first LLM token has arrived
   * for this agent but it hasn't yet emitted a tool call. maintainer
   * 2026-05-11: this fills the 30-45s silent gap where each model
   * is reasoning before its first search. The thinking state lives
   * between warming-up (pre-launch) and searching (active retrieval),
   * with a distinct visible signal so the user sees PER-AGENT
   * progress during the gap. */
  .swarm-agent-card[data-thinking="1"]{
    border-color:var(--brown, #513728);
    background:linear-gradient(180deg, var(--cream, #faf6f0) 0%, #f5ead2 100%);
  }
  .swarm-agent-card[data-thinking="1"] .swarm-agent-num{
    background:var(--brown, #513728);
    color:var(--cream, #faf6f0);
    border-color:var(--brown, #513728);
    animation:swarm-num-thinking 2.0s ease-in-out infinite;
  }
  .swarm-agent-card[data-thinking="1"] .swarm-status-dot.swarm-dot-pending{
    background:var(--brown, #513728);
    animation:swarm-warming-dot 2.0s ease-in-out infinite;
  }
  .swarm-agent-card[data-thinking="1"] .swarm-agent-status::after{
    content:" — thinking";
    color:var(--brown, #513728);
    font-style:italic;
  }
  @keyframes swarm-num-thinking{
    0%, 100% { transform:scale(1);    box-shadow:0 0 0 0 rgba(81,55,40,0); }
    50%      { transform:scale(1.05); box-shadow:0 0 0 4px rgba(81,55,40,.22); }
  }
  @media (prefers-reduced-motion: reduce){
    .swarm-agent-card[data-thinking="1"] .swarm-agent-num,
    .swarm-agent-card[data-thinking="1"] .swarm-status-dot.swarm-dot-pending{
      animation:none;
    }
  }

  /* ── maintainer 2026-05-11: hide the redundant narrator pill row.
   * The "1 2 3 4 5" pills duplicated information now carried by the
   * per-card numbered circles. The active-line ("X has reported")
   * stays visible. */
  #swarmNarratorStrip .narr-pills,
  #narratorStrip .narr-pills,
  .narrator-strip .narr-pills{
    display:none !important;
  }

  /* ── maintainer 2026-05-11: hide the X/Y agents-completed stats bar
   * entirely — it's a duplicate of the per-circle status colours and
   * earns its own row for no value. */
  .swarm-stats-bar,
  #swarmStatsBar{
    display:none !important;
  }

  /* ── maintainer 2026-05-11: hide the "agent — 7m 50s" stage-telemetry
   * strip entirely. Phase + elapsed time was occupying a full row of
   * dashboard space; the swarm-status header already conveys the
   * active phase. */
  .swarm-stage-telemetry,
  #swarmStageTelemetry{
    display:none !important;
  }

  /* ── maintainer 2026-05-11: tighten the narrator strip vertical spacing.
   * The header narrator (`.swarm-dashboard-narrator`) is now the
   * canonical "X has reported" surface — so the IN-STRIP duplicate
   * (`.narr-active-line`) is hidden. The strip itself stays in the
   * DOM because it also hosts the tool-call pills row
   * (`.narr-tool-pills`) for in-flight tool calls. */
  #swarmNarratorStrip,
  #narratorStrip{
    margin:0;
    padding:0;
  }
  .narr-active-line{
    display:none !important;
  }
  /* If the strip ends up empty (no tool pills active), it shouldn't
   * leave a blank gap. */
  #swarmNarratorStrip:empty,
  #narratorStrip:empty{ display:none; }
  /* maintainer 2026-05-11 (re-revision): the right brightness curve is
   *   pending = SUBTLE (lighter parchment, outlined circle)
   *   running = SOLID dark brown numbered circle (this is when
   *             the agent is doing real work — most prominent)
   *   done    = solid green
   * The previous "solid dark-brown pending" was too heavy AND the
   * running state was gold/tan ("shit brown tan"). This curve makes
   * the cards visibly darken as they LAUNCH from idle, which is
   * what maintainer called for. */
  .swarm-agent-pending{
    background:var(--cream, #faf6f0);
    border-color:var(--border-light);
    color:var(--brown-light, #6b4d40);
    opacity:1;
  }
  .swarm-agent-pending .swarm-agent-label{
    color:var(--brown-light, #6b4d40);
  }
  .swarm-agent-pending .swarm-agent-status{
    color:var(--text-muted);
  }
  /* Subtle dot at rest. */
  .swarm-agent-pending .swarm-status-dot.swarm-dot-pending{
    background:var(--brown-light, #6b4d40);
    box-shadow:0 0 0 1px rgba(255,255,255,.3);
  }
  .swarm-agent-searching{border-left-color:var(--gold);opacity:1;animation:swarm-pulse 1.6s ease-in-out infinite}
  .swarm-agent-synthesizing{border-left-color:var(--accent);opacity:1;animation:swarm-pulse 1.6s ease-in-out infinite}
  .swarm-agent-revising{border-left-color:var(--accent);opacity:1;animation:swarm-pulse 1.6s ease-in-out infinite}
  .swarm-agent-retrieving{border-left-color:var(--gold);opacity:1;animation:swarm-pulse 1.6s ease-in-out infinite}
  .swarm-agent-done{border-left-color:#4caf50;opacity:1}
  .swarm-agent-error{border-left-color:#e53935;opacity:1}
  .swarm-agent-aborted{border-left-color:var(--text-muted);opacity:.6}

  /* ── Heartbeat keyframe: subtle border-left brighten and opacity
     bounce so running agents visibly pulse. Pure CSS, no JS tick. */
  @keyframes swarm-pulse {
    0%   { box-shadow: inset 3px 0 0 0 currentColor, 0 0 0 0 rgba(0,0,0,0); }
    50%  { box-shadow: inset 3px 0 0 0 currentColor, 0 0 6px 1px rgba(180,140,40,.25); }
    100% { box-shadow: inset 3px 0 0 0 currentColor, 0 0 0 0 rgba(0,0,0,0); }
  }
  @keyframes swarm-dot-pulse {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%      { transform: scale(1.4); opacity: .55; }
  }
  /* Status-text pulse (added 2026-05-03 per UX feedback). The
   * dashboard's "Aggregating findings…" / "Synthesizing…" text was
   * sharing swarm-dot-pulse, which scales by 40% — designed for the
   * 9px status dots but too extreme on full-size text. Scaled
   * variation back ~30%: opacity dip stays for the breathing feel,
   * scale variation reduced from 0.4 to 0.04 so the text breathes
   * without jumping noticeably in size. */
  @keyframes swarm-status-pulse {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%      { transform: scale(1.04); opacity: .7; }
  }

  /* ── Leading status dot inside the agent-label. Color driven
     by the dot-variant class. swarm-dot-live pulses via keyframe. */
  .swarm-status-dot{
    display:inline-block;width:9px;height:9px;border-radius:50%;
    vertical-align:middle;margin-right:6px;line-height:1;
    text-align:center;font-size:10px;font-weight:700;
  }
  /* maintainer 2026-05-11: the previous #cfc7b8 read as tan — maintainer
   * wanted the pending dot to match Mira's real dark brown so it
   * doesn't look like a cream-on-cream washout. Solid brown-dark
   * with a fine outer ring gives the dot weight against the cream
   * card background. */
  .swarm-dot-pending{
    background:var(--brown-dark,#3e2723);
    box-shadow:0 0 0 1px rgba(255,255,255,.4);
  }
  .swarm-dot-live{
    background:var(--gold,#b8881e);
    animation:swarm-dot-pulse 1.1s ease-in-out infinite;
  }
  .swarm-dot-done{
    background:#4caf50;color:#fff;width:auto;height:auto;
    min-width:14px;padding:1px 4px;border-radius:8px;
  }
  .swarm-dot-error{
    background:#e53935;color:#fff;width:auto;height:auto;
    min-width:14px;padding:1px 4px;border-radius:8px;
  }
  .swarm-dot-aborted{
    background:#888;color:#fff;width:auto;height:auto;
    min-width:14px;padding:1px 4px;border-radius:8px;
  }

  /* ── Dashboard status line: pulse the phase label itself when a
     live phase is active, so users see motion even while agents are
     silently crunching. Only pulses for in-flight phases. */
  .swarm-dashboard.swarm-phase-init         .swarm-dashboard-status,
  .swarm-dashboard.swarm-phase-planning     .swarm-dashboard-status,
  .swarm-dashboard.swarm-phase-researching  .swarm-dashboard-status,
  .swarm-dashboard.swarm-phase-aggregating  .swarm-dashboard-status,
  .swarm-dashboard.swarm-phase-synthesizing .swarm-dashboard-status{
    animation:swarm-status-pulse 1.8s ease-in-out infinite;
    display:inline-block;          /* needed for transform:scale to apply cleanly */
    transform-origin:left center;  /* keeps the text anchored on the left edge */
  }
  .swarm-dashboard.swarm-phase-stopping     .swarm-dashboard-status{
    color:#b58a20;
  }
  .swarm-dashboard.swarm-phase-stopped      .swarm-dashboard-status,
  .swarm-dashboard.swarm-phase-done         .swarm-dashboard-status{
    animation:none;
  }
  .swarm-dashboard.swarm-phase-error        .swarm-dashboard-status{
    color:#e53935;animation:none;
  }
  .swarm-agent-label{
    font-family:var(--sans, system-ui, sans-serif);
    font-weight:600;color:var(--brown-dark);margin-bottom:1px;
    font-size:.7rem;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .swarm-agent-status{
    font-size:.62rem;color:var(--text-muted);text-transform:capitalize;
  }
  .swarm-agent-meta{
    font-size:.6rem;color:var(--text-muted);margin-top:2px;
  }
  /* Model + backend pills — surface the architecture the user
   * configured so it is visibly the architecture that runs.
   * maintainer 2026-05-10: pills shrunk + role-badge / backend-badge
   * unified to the same scale so the card reads as one cohesive
   * label, not three competing typographies. */
  .swarm-agent-pills{
    display:flex;gap:4px;margin:2px 0 3px;flex-wrap:wrap;
  }
  .swarm-agent-model{
    /* maintainer 2026-05-10: was monospace — felt tech-bro. Now uses
     * the sans family at the same size as the role badge so the
     * card reads as one cohesive label group. */
    font-family:var(--sans, system-ui, sans-serif);
    font-size:.58rem;padding:1px 5px;border-radius:3px;
    background:var(--cream);color:var(--brown);
    border:1px solid var(--border-light);
    letter-spacing:0;
  }
  .swarm-agent-backend{
    font-size:.54rem;padding:1px 4px;border-radius:3px;
    text-transform:uppercase;letter-spacing:.04em;font-weight:600;
  }
  .swarm-agent-backend-mira-native{
    background:#3a5a8a;color:#fff;
  }
  .swarm-agent-backend-claw-subprocess{
    background:#a5631e;color:#fff;
  }
  .swarm-agent-backend-claw-team{
    background:#7a3a1a;color:#fff;
  }
  .swarm-stats-bar{
    display:flex;gap:16px;font-size:.7rem;color:var(--text-muted);
    padding:6px 0;border-top:1px solid var(--border-light);
  }
  .swarm-cost-preview{
    margin-top:12px;padding:10px 14px;background:var(--cream);
    border:1px solid var(--border-light);border-radius:6px;
    font-size:.75rem;
  }
  .swarm-cost-title{
    font-weight:700;font-size:.72rem;color:var(--brown-dark);
    margin-bottom:6px;text-transform:uppercase;letter-spacing:.3px;
  }
  .swarm-cost-row{
    display:flex;justify-content:space-between;padding:2px 0;
    color:var(--text);
  }
  .swarm-cost-total{
    font-weight:700;border-top:1px solid var(--border-light);
    margin-top:4px;padding-top:4px;color:var(--brown-dark);
  }
  .swarm-cost-summary{
    font-size:.78rem;color:var(--text-muted);padding:8px 0;
    border-top:1px dashed var(--border-light);margin-top:8px;
  }
  .swarm-cost-summary strong{color:var(--brown-dark)}

  /* Collapsible evidence panel */
  .evidence-panel{
    margin-top:16px;border:1px solid var(--border);border-radius:8px;
    background:var(--cream-dark);overflow:hidden;
  }
  .evidence-panel-header{
    display:flex;align-items:center;justify-content:space-between;
    padding:10px 14px;cursor:pointer;user-select:none;
    background:var(--cream-dark);border-bottom:1px solid var(--border-light);
    transition:background .15s;
  }
  .evidence-panel-header:hover{background:var(--border-light)}
  .evidence-panel-title{
    font-size:.82rem;font-weight:600;color:var(--brown);
  }
  .evidence-panel-count{
    font-size:.72rem;color:var(--text-muted);margin-left:8px;
  }
  .evidence-panel-toggle{
    font-size:.7rem;color:var(--text-muted);transition:transform .2s;
  }
  .evidence-panel.collapsed .evidence-panel-toggle{transform:rotate(-90deg)}
  .evidence-panel-body{
    max-height:2000px;overflow-y:auto;padding:8px;
    transition:max-height .3s ease;
  }
  .evidence-panel.collapsed .evidence-panel-body{
    max-height:0;padding:0 8px;overflow:hidden;
  }

  /* Checkpoint cards */
  .checkpoint-card{
    margin:12px 0;border:2px solid var(--gold);border-radius:10px;
    background:var(--cream);overflow:hidden;
  }
  .checkpoint-card-header{
    display:flex;align-items:center;gap:10px;padding:12px 16px;
    background:linear-gradient(135deg,var(--cream-dark),var(--cream));
    border-bottom:1px solid var(--border-light);
  }
  .checkpoint-card-header .checkpoint-icon{
    font-size:1.1rem;
  }
  .checkpoint-card-header h4{
    margin:0;font-family:var(--serif);font-size:.88rem;
    color:var(--brown-dark);font-weight:700;
  }
  .checkpoint-card-header .checkpoint-phase{
    margin-left:auto;font-size:.68rem;color:var(--text-muted);
    text-transform:uppercase;letter-spacing:.5px;
  }
  .checkpoint-card-body{
    padding:14px 16px;font-size:.8rem;color:var(--text);line-height:1.5;
  }
  .checkpoint-angle-editor{
    margin:8px 0;
  }
  .checkpoint-angle-row{
    display:flex;align-items:flex-start;gap:8px;padding:6px 0;
    border-bottom:1px solid var(--border-light);
  }
  .checkpoint-angle-row:last-child{border-bottom:none}
  .checkpoint-angle-row input[type="checkbox"]{margin-top:4px;flex-shrink:0}
  .checkpoint-angle-row .angle-fields{flex:1;display:flex;flex-direction:column;gap:4px}
  .checkpoint-angle-row .angle-fields input,
  .checkpoint-angle-row .angle-fields textarea{
    width:100%;padding:4px 8px;border:1px solid var(--border-light);
    border-radius:4px;font-size:.78rem;font-family:var(--sans);
    background:var(--white);
  }
  .checkpoint-angle-row .angle-fields textarea{resize:vertical;min-height:28px}
  .checkpoint-angle-row .angle-label-input{font-weight:600}
  .checkpoint-stats{
    display:flex;flex-wrap:wrap;gap:12px;margin:8px 0;
  }
  .checkpoint-stat{
    padding:6px 12px;background:var(--white);border:1px solid var(--border-light);
    border-radius:6px;font-size:.76rem;
  }
  .checkpoint-stat strong{color:var(--brown-dark)}
  .checkpoint-action-bar{
    display:flex;gap:8px;padding:12px 16px;
    border-top:1px solid var(--border-light);background:var(--cream-dark);
  }
  .checkpoint-action-bar button{
    padding:7px 18px;border:1px solid var(--border);border-radius:6px;
    font-size:.78rem;font-weight:600;cursor:pointer;
    font-family:var(--sans);transition:all .15s;
  }
  .checkpoint-btn-approve{
    background:var(--accent);color:var(--white);border-color:var(--accent);
  }
  .checkpoint-btn-approve:hover{filter:brightness(1.1)}
  .checkpoint-btn-edit{
    background:var(--gold);color:var(--white);border-color:var(--gold);
  }
  .checkpoint-btn-edit:hover{filter:brightness(1.1)}
  .checkpoint-btn-reject{
    background:var(--white);color:#e53935;border-color:#e53935;
  }
  .checkpoint-btn-reject:hover{background:#fbe9e7}
  .checkpoint-btn-secondary{
    background:var(--white);color:var(--text);border-color:var(--border);
  }
  .checkpoint-btn-secondary:hover{background:var(--cream)}
  .checkpoint-guidance{
    margin-top:8px;
  }
  .checkpoint-guidance textarea{
    width:100%;padding:8px 10px;border:1px solid var(--border-light);
    border-radius:6px;font-size:.78rem;font-family:var(--sans);
    resize:vertical;min-height:60px;background:var(--white);
  }

  /* Input bar */
  .disc-input-bar{
    flex-shrink:0;padding:12px 14px;
    border-top:1px solid var(--border);
    display:flex;gap:8px;align-items:center;
    background:var(--cream);
  }
  .disc-input{
    flex:1;padding:10px 14px;
    border:1.5px solid var(--border);border-radius:8px;
    font-size:.84rem;font-family:var(--sans);
    background:var(--white);color:var(--text);outline:none;
    transition:border-color .15s;
  }
  textarea.explorer-input-grow{
    resize:none;overflow:hidden;
    line-height:1.4;
    min-height:calc(1.4em + 20px);
    max-height:calc(1.4em * 3 + 23px); /* 3 rows + padding + border room */
    box-sizing:border-box;
  }
  textarea.explorer-input-grow.scrollable{
    overflow-y:auto;overflow-x:hidden;
  }
  textarea.explorer-input-grow::-webkit-scrollbar{width:6px}
  textarea.explorer-input-grow::-webkit-scrollbar-thumb{background:var(--border);border-radius:9px}
  textarea.explorer-input-grow::-webkit-scrollbar-track{background:transparent}
  .disc-input::placeholder{color:var(--text-muted)}
  .disc-input:focus{border-color:var(--accent)}
  .disc-send{
    width:36px;height:36px;border:none;border-radius:8px;
    background:var(--accent);color:var(--white);cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:background .15s;flex-shrink:0;
    margin-bottom:1px;
  }
  .disc-send:hover{background:var(--accent-light)}

  /* ── Library themed tooltips ─────────────────────────── */
  .af-remove{position:relative}
  .af-remove::after{
    content:'Remove file';
    position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);
    background:var(--brown-dark);color:var(--cream);
    font-family:var(--sans);font-size:.72rem;font-weight:600;
    letter-spacing:.3px;padding:5px 11px;border-radius:6px;
    white-space:nowrap;opacity:0;pointer-events:none;
    transition:opacity .2s,transform .2s;
    box-shadow:0 3px 10px var(--shadow);
    z-index:20;
  }
  .af-remove::before{
    content:'';position:absolute;bottom:calc(100% + 2px);left:50%;transform:translateX(-50%);
    border:5px solid transparent;border-top-color:var(--brown-dark);
    opacity:0;pointer-events:none;transition:opacity .2s;
    z-index:20;
  }
  .af-remove:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}
  .af-remove:hover::before{opacity:1}
  .lib-active-tag{position:relative}
  .lib-active-tag::after{
    content:'Currently selected for Explore and Search';
    position:absolute;bottom:calc(100% + 8px);right:0;transform:translateY(4px);
    background:var(--brown-dark);color:var(--cream);
    font-family:var(--sans);font-size:.72rem;font-weight:600;
    letter-spacing:.3px;padding:5px 11px;border-radius:6px;
    white-space:nowrap;opacity:0;pointer-events:none;
    transition:opacity .2s,transform .2s;
    box-shadow:0 3px 10px var(--shadow);
    z-index:20;
  }
  .lib-active-tag::before{
    content:'';position:absolute;bottom:calc(100% + 2px);right:10px;
    border:5px solid transparent;border-top-color:var(--brown-dark);
    opacity:0;pointer-events:none;transition:opacity .2s;
    z-index:20;
  }
  .lib-active-tag:hover::after{opacity:1;transform:translateY(0)}
  .lib-active-tag:hover::before{opacity:1}

  /* Processing info banner */
  .lib-processing-info{
    margin-top:10px;padding:10px 14px;
    background:rgba(184,134,11,.06);border:1px solid rgba(184,134,11,.15);
    border-radius:7px;font-size:.78rem;color:var(--text-light);line-height:1.55;
  }
  .lib-processing-info strong{color:var(--brown-dark);font-weight:700}

  /* ── Pipeline stage visualization ──────────────────── */
  .lib-pipeline{
    display:flex;align-items:flex-start;gap:0;
    margin-top:var(--lib-pipe-mt,4px);padding:var(--lib-pipe-pad,6px 0 2px);
  }
  .lib-pipeline-stage{
    flex:1;display:flex;flex-direction:column;align-items:center;
    position:relative;text-align:center;min-width:0;
  }
  .lib-pipeline-stage .pipe-icon{
    width:var(--lib-pipe-icon,22px);height:var(--lib-pipe-icon,22px);border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:var(--lib-pipe-icon-font,.65rem);font-weight:700;
    border:1.5px solid var(--border);background:var(--cream);color:var(--text-muted);
    position:relative;z-index:2;transition:all .3s;
  }
  .lib-pipeline-stage .pipe-label{
    font-size:var(--lib-pipe-label,.6rem);font-weight:700;text-transform:uppercase;
    letter-spacing:.3px;color:var(--text-muted);margin-top:var(--lib-pipe-label-mt,3px);
  }
  .lib-pipeline-stage .pipe-detail{
    font-size:var(--lib-pipe-detail,.58rem);color:var(--text-muted);margin-top:1px;
  }
  /* Connector lines between stages */
  .pipe-connector{
    flex:0 0 auto;width:var(--lib-pipe-conn,30px);height:1.5px;
    background:var(--border);margin-top:var(--lib-pipe-conn-mt,11px);
    position:relative;z-index:1;
  }
  /* State: complete */
  .pipe-complete .pipe-icon{
    background:#4CAF50;border-color:#4CAF50;color:var(--white);
  }
  .pipe-complete .pipe-label{color:#2E7D32}
  .pipe-complete + .pipe-connector{background:#4CAF50}
  /* State: active */
  .pipe-active .pipe-icon{
    background:var(--gold);border-color:var(--gold);color:var(--white);
    animation:pipePulse 1.5s ease-in-out infinite;
  }
  .pipe-active .pipe-label{color:var(--gold)}
  @keyframes pipePulse{
    0%,100%{box-shadow:0 0 0 0 rgba(184,134,11,.3)}
    50%{box-shadow:0 0 0 6px rgba(184,134,11,0)}
  }
  /* State: review (needs researcher input) */
  .pipe-review{
    cursor:pointer;border-radius:6px;padding:4px 2px;margin:-4px -2px;
    transition:background .15s;
  }
  .pipe-review:hover{background:rgba(255,143,0,.12)}
  .pipe-review .pipe-icon{
    background:#FF8F00;border-color:#FF8F00;color:var(--white);
    animation:pipeGlow 2s ease-in-out infinite;
    transition:transform .15s;
  }
  .pipe-review:hover .pipe-icon{transform:scale(1.1)}
  .pipe-review .pipe-label{color:#E65100}
  .pipe-review:hover .pipe-label{color:#BF360C}
  @keyframes pipeGlow{
    0%,100%{box-shadow:0 0 0 0 rgba(255,143,0,.25)}
    50%{box-shadow:0 0 8px 3px rgba(255,143,0,.15)}
  }
  .pipe-review-btn{
    margin-top:3px;padding:2px 8px;
    font-size:.6rem;font-weight:700;
    background:#FF8F00;color:var(--white);
    border:none;border-radius:4px;cursor:pointer;
    transition:background .15s;
  }
  .pipe-review:hover .pipe-review-btn{background:#E65100}
  /* State: pending */
  .pipe-pending .pipe-icon{
    background:var(--cream-dark);border-color:var(--border);color:var(--text-muted);
  }
  /* State: error */
  .pipe-error .pipe-icon{
    background:#B71C1C;border-color:#B71C1C;color:var(--white);
  }
  .pipe-error .pipe-label{color:#B71C1C}

  /* ── Attribution review modal ────────────────────────── */
  .attrib-modal{width:700px;max-width:92vw;max-height:85vh;overflow-y:auto}
  .attrib-summary{
    display:flex;align-items:center;gap:12px;
    padding:12px 16px;margin-bottom:16px;
    background:rgba(255,143,0,.06);border:1px solid rgba(255,143,0,.15);
    border-radius:8px;font-size:.82rem;color:var(--text);
  }
  .attrib-summary strong{color:var(--brown-dark)}
  .attrib-progress-mini{
    flex:1;max-width:160px;height:6px;
    background:var(--border-light);border-radius:9px;overflow:hidden;
  }
  .attrib-progress-mini-fill{
    height:100%;border-radius:9px;background:#FF8F00;transition:width .3s;
  }
  .attrib-category{
    border:1px solid var(--border-light);border-radius:8px;
    margin-bottom:10px;overflow:hidden;
  }
  .attrib-cat-header{
    display:flex;align-items:center;justify-content:space-between;
    padding:12px 16px;cursor:pointer;
    background:var(--cream);transition:background .15s;
    user-select:none;
  }
  .attrib-cat-header:hover{background:var(--cream-dark)}
  .attrib-cat-title{
    font-size:.84rem;font-weight:700;color:var(--brown-dark);
    display:flex;align-items:center;gap:8px;
  }
  .attrib-cat-count{
    font-size:.72rem;font-weight:700;color:var(--text-muted);
    background:var(--border-light);padding:2px 8px;border-radius:10px;
  }
  .attrib-confidence{
    font-size:.7rem;font-weight:700;padding:3px 8px;border-radius:4px;
    letter-spacing:.3px;
  }
  .attrib-conf-high{background:rgba(46,125,50,.08);color:#2E7D32}
  .attrib-conf-med{background:rgba(255,143,0,.1);color:#E65100}
  .attrib-conf-low{background:rgba(183,28,28,.06);color:#B71C1C}
  .attrib-cat-chevron{
    font-size:.65rem;color:var(--text-muted);
    transition:transform .2s;
  }
  .attrib-cat-header.expanded .attrib-cat-chevron{transform:rotate(180deg)}
  .attrib-cat-body{
    padding:0 16px;max-height:0;overflow:hidden;
    transition:max-height .3s ease,padding .3s ease;
  }
  .attrib-cat-body.open{max-height:2000px;padding:12px 16px 16px}
  .attrib-cat-done{position:relative}
  .attrib-cat-done::after{
    content:'Applied';position:absolute;inset:0;
    background:rgba(46,125,50,.06);
    display:flex;align-items:center;justify-content:center;
    font-size:.82rem;font-weight:700;color:#2E7D32;
    border-radius:0 0 7px 7px;
  }
  .attrib-sample{
    background:var(--white);border:1px solid var(--border-light);
    border-radius:7px;padding:12px 14px;margin-bottom:10px;
  }
  .attrib-sample-text{
    font-family:var(--serif);font-size:.82rem;line-height:1.55;
    color:var(--text);margin-bottom:8px;
    padding-left:10px;border-left:2px solid var(--border);
    font-style:italic;
  }
  .attrib-sample-meta{
    display:flex;align-items:center;gap:8px;flex-wrap:wrap;
    font-size:.73rem;color:var(--text-muted);margin-bottom:8px;
  }
  .attrib-sample-meta strong{color:var(--brown-dark);font-weight:600}
  .attrib-label-row{
    display:flex;align-items:center;gap:8px;
    padding-top:6px;border-top:1px solid var(--border-light);
  }
  .attrib-label-row span{font-size:.73rem;color:var(--text-muted);font-weight:600}
  .attrib-label-select{
    padding:4px 8px;border:1.5px solid var(--border);border-radius:5px;
    font-size:.78rem;font-family:var(--sans);color:var(--text);
    background:var(--cream);cursor:pointer;
  }
  .attrib-apply-btn{
    display:flex;align-items:center;gap:6px;
    margin-top:12px;padding:7px 16px;
    font-size:.78rem;font-weight:700;
    background:var(--accent);color:var(--white);
    border:none;border-radius:6px;cursor:pointer;
    transition:background .15s;
  }
  .attrib-apply-btn:hover{background:var(--accent-light)}
  .attrib-apply-btn:disabled{opacity:.5;cursor:not-allowed}
  .attrib-apply-all{
    display:block;width:100%;margin-top:16px;padding:12px;
    font-size:.88rem;font-weight:700;text-align:center;
    background:var(--accent);color:var(--white);
    border:none;border-radius:8px;cursor:pointer;
    transition:background .15s;
  }
  .attrib-apply-all:hover{background:var(--accent-light)}
  .attrib-apply-all:disabled{opacity:.5;cursor:not-allowed}

  /* ── Profile modal ──────────────────────────────────── */
  .profile-modal{width:400px}
  .profile-form-group{margin-bottom:16px}
  .profile-form-label{
    font-size:.78rem;font-weight:700;color:var(--text-muted);
    text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;
    display:block;
  }
  .profile-form-input{
    width:100%;padding:10px 14px;
    border:1.5px solid var(--border);border-radius:7px;
    font-size:.88rem;font-family:var(--sans);
    background:var(--cream);color:var(--text);outline:none;
    transition:border-color .15s;
  }
  .profile-form-input:focus{border-color:var(--accent)}
  .profile-form-row{display:flex;gap:12px}
  .profile-form-row .profile-form-group{flex:1}
  .profile-avatar-preview{
    width:48px;height:48px;border-radius:50%;
    background:var(--accent);color:var(--white);
    display:flex;align-items:center;justify-content:center;
    font-size:1.1rem;font-weight:700;margin:0 auto 8px;
    letter-spacing:.3px;
  }

  /* ── New archive modal ──────────────────────────────── */
  .new-archive-modal{width:480px}
  .new-archive-form-group{margin-bottom:16px}
  .new-archive-form-label{
    font-size:.78rem;font-weight:700;color:var(--text-muted);
    text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;
    display:block;
  }
  .new-archive-form-input{
    width:100%;padding:10px 14px;
    border:1.5px solid var(--border);border-radius:7px;
    font-size:.88rem;font-family:var(--sans);
    background:var(--cream);color:var(--text);outline:none;
    transition:border-color .15s;
  }
  .new-archive-form-input:focus{border-color:var(--accent)}
  .new-archive-form-textarea{
    width:100%;padding:10px 14px;min-height:60px;resize:vertical;
    border:1.5px solid var(--border);border-radius:7px;
    font-size:.84rem;font-family:var(--sans);
    background:var(--cream);color:var(--text);outline:none;
    transition:border-color .15s;
  }
  .new-archive-form-textarea:focus{border-color:var(--accent)}

  /* ── Sidebar logout button ─────────────────────────── */
  .sidebar-logout-btn{
    background:none;border:none;cursor:pointer;
    /* maintainer 2026-05-10: stays cream/white, opacity bumped to .65 so
     * it visually matches the gear icon next to it. Both are 14×14
     * SVGs and live in `.sidebar-profile` (display:flex,
     * align-items:center) so they sit at the same vertical level. */
    color:var(--cream, #fff);padding:3px;
    border-radius:3px;opacity:.65;
    transition:opacity .2s;
    flex-shrink:0;
    position:relative;
    display:flex;align-items:center;justify-content:center;
  }
  .sidebar-logout-btn:hover{opacity:1}
  .sidebar-logout-btn::after{
    content:attr(data-tip);
    position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);
    background:var(--brown-dark);color:var(--cream);
    font-family:var(--sans);font-size:.72rem;font-weight:600;
    letter-spacing:.3px;padding:5px 11px;border-radius:6px;
    white-space:nowrap;opacity:0;pointer-events:none;
    transition:opacity .2s,transform .2s;
    box-shadow:0 3px 10px var(--shadow);
    z-index:20;
  }
  .sidebar-logout-btn::before{
    content:'';position:absolute;bottom:calc(100% + 2px);left:50%;transform:translateX(-50%);
    border:5px solid transparent;border-top-color:var(--brown-dark);
    opacity:0;pointer-events:none;transition:opacity .2s;
    z-index:20;
  }
  .sidebar-logout-btn:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}
  .sidebar-logout-btn:hover::before{opacity:1}

  /* ── Profile modal sign-out link ─────────────────────── */
  .profile-signout-link{
    display:block;text-align:center;
    margin-top:14px;padding-top:12px;
    border-top:1px solid var(--border-light);
    font-size:.74rem;color:var(--text-muted);
    background:none;border-left:none;border-right:none;border-bottom:none;
    cursor:pointer;font-family:var(--sans);
    transition:color .15s;width:100%;
    letter-spacing:.2px;
  }
  .profile-signout-link:hover{color:var(--accent)}

  /* ================================================================
     Session Logs View
     ================================================================ */
  .logs-view{
    flex-direction:column;height:100%;
    overflow-y:auto;
    font-family:var(--sans);
  }
  /* maintainer 2026-05-10: Session Logs as a Mira-styled modal panel
   * with backdrop. The previous version was a fixed panel with no
   * dismissal affordance — user got stuck. Now wrapped in a
   * `::before` pseudo-element backdrop (catches click-outside) and
   * Mira-skinned with brown-dark border + cream background. */
  .logs-view.logs-modal-open{
    position:fixed;
    top:50%;left:50%;
    transform:translate(-50%, -50%);
    width:min(960px, 92vw);
    height:min(720px, 86vh);
    z-index:1050;
    background:var(--cream);
    border-radius:10px;
    border:1.5px solid var(--brown-dark);
    box-shadow:0 14px 44px rgba(40,25,15,.32);
    display:flex !important;
    overflow:hidden;
    animation:logsViewIn .22s ease-out;
  }
  @keyframes logsViewIn{
    from{opacity:0;transform:translate(-50%, -48%) scale(.96)}
    to{opacity:1;transform:translate(-50%, -50%) scale(1)}
  }
  /* Backdrop — sibling element rendered when modal is open so a
   * click outside the panel registers via JS. CSS-only backdrop via
   * fixed pseudo on body would be cleaner but harder to wire. We
   * keep the backdrop as a real DOM element added/removed by the
   * Logs button handler in architect-gui.js. */
  .logs-view-backdrop{
    position:fixed;inset:0;background:rgba(53,32,26,.35);
    z-index:1040;animation:logsViewBackdropIn .2s ease-out;
  }
  @keyframes logsViewBackdropIn{
    from{opacity:0} to{opacity:1}
  }
  .logs-header{
    flex-shrink:0;padding:14px 24px 12px;
    background:var(--cream);
    border-bottom:1px solid var(--border);
    border-top-left-radius:10px;border-top-right-radius:10px;
    display:flex;align-items:flex-start;gap:14px;
  }
  .logs-header-titles{flex:1;min-width:0}
  .logs-header h2{
    margin:0;font-family:var(--serif);font-size:1.05rem;
    color:var(--brown-dark);letter-spacing:.01em;
  }
  .logs-subtitle{
    margin:4px 0 0;font-size:.78rem;color:var(--text-muted);
    line-height:1.5;font-family:var(--sans);
  }
  .logs-header-actions{display:flex;gap:6px;margin-left:auto;align-items:center}

  .logs-stats{
    display:flex;gap:16px;flex-wrap:wrap;
    padding:10px 14px;margin:16px 28px 14px;
    background:var(--bg-warm);border-radius:8px;
    font-size:.75rem;color:var(--text-muted);
  }
  .logs-stat-item{display:flex;gap:4px;align-items:center}
  .logs-stat-value{font-weight:700;color:var(--brown-dark)}

  .logs-controls{
    display:flex;gap:16px;margin:0 28px 14px;padding:0;
    font-size:.78rem;
  }
  .logs-toggle{display:flex;align-items:center;gap:6px;cursor:pointer}
  .logs-toggle input[type="checkbox"]{accent-color:var(--accent)}

  .logs-session-list{display:flex;flex-direction:column;gap:6px;padding:0 28px}
  .logs-empty{
    text-align:center;padding:40px 20px;
    color:var(--text-muted);font-size:.82rem;
  }

  .logs-session-card{
    display:flex;align-items:center;justify-content:space-between;
    padding:10px 14px;
    border:1px solid var(--border-light);border-radius:8px;
    background:var(--white);cursor:pointer;
    transition:border-color .15s,box-shadow .15s;
  }
  .logs-session-card:hover{
    border-color:var(--accent);
    box-shadow:0 1px 4px rgba(0,0,0,.06);
  }
  .logs-session-card-info{flex:1;min-width:0}
  .logs-session-card-query{
    font-size:.82rem;font-weight:600;color:var(--brown-dark);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    max-width:400px;
  }
  .logs-session-card-meta{
    font-size:.7rem;color:var(--text-muted);margin-top:2px;
    display:flex;gap:10px;
  }
  .logs-session-card-actions{display:flex;gap:4px;flex-shrink:0}
  .logs-session-card-badge{
    display:inline-block;padding:2px 6px;border-radius:4px;
    font-size:.65rem;font-weight:600;text-transform:uppercase;
  }
  .logs-badge-complete{background:#e8f5e9;color:#2e7d32}
  .logs-badge-running{background:#fff3e0;color:#e65100}
  .logs-badge-error{background:#ffebee;color:#c62828}

  /* Detail view */
  .logs-back-btn{
    background:none;border:none;cursor:pointer;
    font-size:.78rem;color:var(--accent);
    padding:0;margin-bottom:12px;font-family:var(--sans);
  }
  .logs-back-btn:hover{text-decoration:underline}

  .logs-detail-header{
    padding:12px 16px;
    background:var(--bg-warm);border-radius:8px;
    margin-bottom:12px;font-size:.82rem;
  }
  .logs-detail-header strong{color:var(--brown-dark)}

  .logs-detail-actions{
    display:flex;gap:8px;margin-bottom:14px;
  }
  .btn-sm{
    padding:5px 12px;border-radius:6px;border:1px solid var(--border-light);
    background:var(--white);cursor:pointer;font-size:.72rem;
    font-family:var(--sans);color:var(--text);
    transition:background .15s,border-color .15s;
  }
  .btn-sm:hover{background:var(--bg-warm);border-color:var(--accent)}

  .logs-citation-badge{
    padding:12px 16px;margin-bottom:14px;
    border:1px dashed var(--border-light);border-radius:8px;
    background:var(--bg-warm);font-size:.75rem;
  }

  .logs-timeline{display:flex;flex-direction:column;gap:4px}
  .logs-event{
    display:flex;gap:10px;align-items:flex-start;
    padding:6px 10px;border-radius:6px;
    font-size:.72rem;
    border-left:3px solid var(--border-light);
    background:var(--white);
  }
  .logs-event:hover{background:var(--bg-warm)}
  .logs-event-time{
    flex-shrink:0;width:70px;
    color:var(--text-muted);font-variant-numeric:tabular-nums;
  }
  .logs-event-type{
    flex-shrink:0;width:90px;font-weight:600;
    color:var(--brown-dark);text-transform:uppercase;
    font-size:.65rem;padding-top:1px;
  }
  .logs-event-data{
    flex:1;min-width:0;color:var(--text);
    word-break:break-word;
  }

  .logs-event[data-type="config"]{border-left-color:#7986cb}
  .logs-event[data-type="query"]{border-left-color:#4caf50}
  .logs-event[data-type="planner"]{border-left-color:#ff9800}
  .logs-event[data-type="agent_start"]{border-left-color:#29b6f6}
  .logs-event[data-type="tool_call"]{border-left-color:#ab47bc}
  .logs-event[data-type="llm_call"]{border-left-color:#ef5350}
  .logs-event[data-type="agent_report"]{border-left-color:#26a69a}
  .logs-event[data-type="aggregation"]{border-left-color:#8d6e63}
  .logs-event[data-type="debate"]{border-left-color:#d4e157}
  .logs-event[data-type="synthesis"]{border-left-color:#42a5f5}
  .logs-event[data-type="cost"]{border-left-color:#66bb6a}
  .logs-event[data-type="dialectical_cycle"]{border-left-color:#ff7043}

  /* ── Corpus Verification track ────────────────────────
   * maintainer 2026-05-11. Lives at the top of #swarmDashboardBody,
   * directly above the agent grid. Dark-academic palette: cream
   * background, brown-dark labels, serif small-caps title,
   * gold-rule progress fills.
   * The whole panel is hidden when idle and animates into place
   * the moment a query is fired. */
  .swarm-coverage{
    margin:0 0 10px 0;
    padding:0;
    border:1px solid var(--border-light);
    border-radius:6px;
    background:linear-gradient(180deg, var(--cream) 0%, #fbf6ec 100%);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),
               0 1px 0 rgba(74,55,40,.04);
    overflow:hidden;
    transition:opacity .25s ease, max-height .25s ease;
  }
  .swarm-coverage[data-state="idle"]{
    display:none;
  }
  .swarm-coverage[data-state="error"]{
    border-color:#c97c5d;
  }
  .swarm-coverage-head{
    display:flex;align-items:baseline;gap:10px;
    padding:7px 12px 6px;
    border-bottom:1px solid rgba(170,140,90,.18);
    background:rgba(245,234,210,.35);
  }
  .swarm-coverage-title{
    font-family:var(--serif);
    font-size:.7rem;
    letter-spacing:.13em;
    text-transform:uppercase;
    color:var(--brown-dark);
    font-weight:700;
  }
  .swarm-coverage-title::before{
    content:"";
    display:inline-block;
    width:6px;height:6px;
    background:var(--gold);
    border-radius:50%;
    margin-right:7px;
    transform:translateY(-1px);
    box-shadow:0 0 0 2px rgba(212,175,55,.18);
  }
  .swarm-coverage[data-state="probing"] .swarm-coverage-title::before,
  .swarm-coverage[data-state="researching"] .swarm-coverage-title::before{
    animation:swarm-coverage-pulse 1.4s ease-in-out infinite;
  }
  .swarm-coverage[data-state="complete"] .swarm-coverage-title::before{
    background:#4caf50;
    box-shadow:0 0 0 2px rgba(76,175,80,.18);
    animation:none;
  }
  .swarm-coverage-phase{
    font-family:var(--serif);
    font-size:.66rem;
    font-style:italic;
    color:var(--text-muted);
    letter-spacing:.04em;
    margin-left:auto;
  }
  .swarm-coverage-rows{
    display:flex;flex-direction:column;gap:5px;
    padding:9px 12px 9px;
  }
  .swarm-coverage-row{
    display:grid;
    grid-template-columns:120px 1fr auto;
    align-items:center;
    gap:10px;
  }
  .swarm-coverage-row-label{
    font-family:var(--serif);
    font-size:.7rem;
    letter-spacing:.04em;
    color:var(--brown-dark);
  }
  .swarm-coverage-row-bar{
    position:relative;
    height:3px;
    background:rgba(74,55,40,.08);
    border-radius:2px;
    overflow:hidden;
  }
  .swarm-coverage-row-bar::after{
    /* Faint hairline above the bar to give the rule typographic
     * weight without needing a second element. */
    content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
    background:rgba(74,55,40,.04);
  }
  .swarm-coverage-row-fill{
    display:block;
    height:100%;
    width:0%;
    background:linear-gradient(90deg, var(--gold) 0%, #b8941f 100%);
    transition:width .35s cubic-bezier(.2,.7,.2,1);
    box-shadow:0 0 0 1px rgba(212,175,55,.25);
  }
  .swarm-coverage-row-num{
    font-family:"Courier New", "Courier", monospace;
    font-size:.7rem;
    color:var(--brown-dark);
    text-align:right;
    min-width:90px;
    font-variant-numeric:tabular-nums;
  }
  .swarm-coverage-foot{
    padding:0 12px 8px;
    font-family:var(--serif);
    font-size:.62rem;
    font-style:italic;
    color:var(--text-muted);
    letter-spacing:.02em;
  }
  .swarm-coverage-foot:empty{display:none}
  @keyframes swarm-coverage-pulse{
    0%,100%{box-shadow:0 0 0 2px rgba(212,175,55,.18); transform:translateY(-1px) scale(1);}
    50%{box-shadow:0 0 0 4px rgba(212,175,55,.05); transform:translateY(-1px) scale(1.18);}
  }

  /* ── Panel icons row (maintainer 2026-05-11)
   *   Compact icon row anchored TOP-RIGHT of the dashboard body,
   *   just below the "Researching / Planning" header status. Icons
   *   only, no text label, hover-tooltips via data-tip carry the
   *   informative blurb ("View the prompts sent to the planner",
   *   etc.). Click opens a Mira-skinned modal. */
  #swarmDashboardBody{ position:relative; }
  .swarm-panel-icons{
    position:absolute;
    top:4px;
    right:14px;
    display:flex;
    gap:6px;
    margin:0;
    padding:0;
    z-index:3;
  }
  .swarm-panel-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:26px;
    height:26px;
    padding:0;
    border:1px solid var(--brown-light, #6b4d40);
    border-radius:50%;
    background:var(--cream);
    color:var(--brown, #513728);
    cursor:pointer;
    transition:background .15s ease, border-color .15s ease, transform .12s ease, color .15s ease;
  }
  .swarm-panel-icon:hover{
    background:#f5ead2;
    border-color:var(--brown-dark, #3e2723);
    color:var(--brown-dark, #3e2723);
    transform:translateY(-1px);
  }
  .swarm-panel-icon:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
  }
  /* maintainer 2026-05-11: Mira-matched hover tooltip for the panel
   * icons — same dark-brown / cream palette used by the library
   * header icons (lib-header-icon-btn) and journal toolbar.
   * Anchored BELOW the icon, right-aligned, with the small
   * caret-arrow pointing up at the icon. */
  .swarm-panel-icon[data-tip]{ position:relative; }
  .swarm-panel-icon[data-tip]::after{
    content:attr(data-tip);
    position:absolute;
    top:calc(100% + 10px);
    right:0;
    transform:translateY(-4px);
    background:var(--brown-dark, #3e2723);
    color:var(--cream, #faf6f0);
    font-family:var(--sans, system-ui, sans-serif);
    font-size:.72rem;
    font-weight:600;
    letter-spacing:.3px;
    padding:6px 11px;
    border-radius:6px;
    white-space:nowrap;
    max-width:320px;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s, transform .2s;
    box-shadow:0 3px 10px rgba(74,55,40,.18);
    z-index:50;
  }
  .swarm-panel-icon[data-tip]::before{
    content:"";
    position:absolute;
    top:calc(100% + 4px);
    right:10px;
    border:5px solid transparent;
    border-bottom-color:var(--brown-dark, #3e2723);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s;
    z-index:50;
  }
  .swarm-panel-icon[data-tip]:hover::after,
  .swarm-panel-icon[data-tip]:focus-visible::after{
    opacity:1;
    transform:translateY(0);
  }
  .swarm-panel-icon[data-tip]:hover::before,
  .swarm-panel-icon[data-tip]:focus-visible::before{
    opacity:1;
  }
  /* Also suppress the native `title` tooltip so it doesn't race the
   * styled one — keep the title attribute for accessibility but
   * its UA-rendered popup is redundant and shows the wrong palette. */
  .swarm-panel-icon{ -webkit-touch-callout:none; }
  .swarm-panel-icon-glyph{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    font-size:.78rem;
    line-height:1;
    color:inherit;
    /* No background — the icon button itself IS the circle. */
    background:transparent;
    border:none;
    border-radius:0;
  }
  .swarm-panel-icon-label{ display:none; }

  /* Hide the underlying reveal-blocks that the icons now front. */
  .swarm-prompt-block,
  #swarmCoverage{
    display:none !important;
  }

  /* ── Panel modal (clean Mira-skinned) ──────────────────
   *   The Mira modal base styles (.modal-overlay .modal) come from
   *   the general modal CSS — we layer Mira-serif typography for
   *   the body content cloned in from the reveal-blocks. */
  .swarm-panel-modal-overlay{
    /* The base .modal-overlay already provides backdrop + flex
     * centering. We add a slight subtle backdrop tint. */
    background:rgba(40, 25, 15, 0.28);
  }
  /* maintainer 2026-05-11: wider, tighter modal. Was max-width:760px
   * with generous internal padding + line-height:1.7 which felt
   * narrow + airy. Bumped to 1080px and tightened to line-height:
   * 1.5 with reduced padding so the reader sees more content
   * per fold and the layout reads as dense scholarly prose. */
  .swarm-panel-modal{
    max-width:1080px;
    width:90vw;
    max-height:82vh;
    display:flex;
    flex-direction:column;
    padding:20px 26px 18px;
  }
  .swarm-panel-modal-title{
    font-family:var(--serif, Georgia, "Times New Roman", serif);
    font-weight:700;
    color:var(--brown-dark);
    margin:0 0 2px 0;
    font-size:1.15rem;
  }
  .swarm-panel-modal-sub{
    font-family:var(--serif, Georgia, "Times New Roman", serif);
    font-style:italic;
    color:var(--text-muted);
    font-size:.82rem;
    margin-bottom:10px;
  }
  .swarm-panel-modal-body{
    flex:1 1 auto;
    overflow:auto;
    padding:0 4px;
    max-height:68vh;
  }
  /* Override the now-cloned reveal-block body styles so the modal
   * doesn't carry the original's <pre> aesthetic. Tightened
   * line-height + padding per maintainer's "wider but tighter" spec. */
  .swarm-panel-modal-body .swarm-prompt-text,
  .swarm-panel-modal-body pre{
    font-family:var(--serif, Georgia, "Times New Roman", serif);
    font-size:.92rem;
    line-height:1.5;
    color:var(--brown-dark);
    background:transparent;
    border:none;
    border-left:3px solid rgba(170, 140, 90, 0.35);
    border-radius:0;
    padding:4px 4px 4px 12px;
    margin:0 0 6px;
    white-space:pre-wrap;
    max-height:none;
  }
  .swarm-panel-modal-body .swarm-prompt-section-label,
  .swarm-panel-modal-body h4{
    font-family:var(--serif, Georgia, "Times New Roman", serif);
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--brown-light, #6b4d40);
    margin:10px 0 4px;
    padding-bottom:3px;
    border-bottom:1px solid rgba(170, 140, 90, 0.3);
  }
  .swarm-panel-modal-body .swarm-prompt-section-label:first-child,
  .swarm-panel-modal-body h4:first-child{
    margin-top:0;
  }
  /* Coverage rows look the same in the modal as in the reveal-
   * block — the cloned .swarm-coverage-rows + .swarm-coverage-row
   * styles already render correctly. */
  .swarm-panel-modal-empty{
    font-family:var(--serif, Georgia, serif);
    font-style:italic;
    color:var(--text-muted);
    padding:24px 8px;
    text-align:center;
  }