/* ═══════════════════════════════════════════════════════════════
   ARCHITECTURE — Architecture designer GUI, presets, quality
   tier badges
   ═══════════════════════════════════════════════════════════════ */

  /* ── Architecture Designer ─────────────────────────── */
  .arch-view{
    flex:1;flex-direction:column;height:100%;width:100%;
    overflow:hidden;
    font-family:var(--sans);
    margin:0;padding:0;
  }
  .arch-body{
    flex:1;overflow-y:auto;padding:8px 0 0 0;min-height:0;
  }
  .arch-body::-webkit-scrollbar{width:7px}
  .arch-body::-webkit-scrollbar-track{background:transparent}
  .arch-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:9px}
  .arch-header{
    flex-shrink:0;padding:16px 28px 14px;
    background:var(--white);border-bottom:1px solid var(--border);
    box-shadow:0 2px 8px var(--shadow);
    display:flex;align-items:center;gap:16px;
    /* maintainer 2026-05-10: must paint above .arch-toolbar (z-index:5)
     * so that data-tip tooltips on the header's ?, gear, and X icons
     * (which render via ::after below the icon) aren't covered by the
     * toolbar row sitting just below. Without this, the tooltip lives
     * in the header's auto-z stacking context and the positive-z
     * toolbar wins. */
    /* maintainer 2026-05-10: was z-index:5 (explicit stacking above the
     * scrolled agent grid). Bumped to 6 so the header sits one above
     * .arch-toolbar (which is also z:5) — without this, the toolbar
     * paints over the data-tip tooltips dropping out the bottom of
     * the header icons (?, gear, X). Stacking above the agent grid
     * is preserved (grid has no positive z-index). */
    position:relative;z-index:6;
  }
  .arch-header-actions{display:flex;gap:6px;align-items:center}
  .arch-toolbar{
    flex-shrink:0;display:flex;align-items:center;gap:6px;
    padding:8px 28px;background:var(--white);
    border-bottom:1px solid var(--border);
    /* maintainer 2026-05-10: same z-index lift as the header. The
     * preset `<select>` in the toolbar is rendered OS-level so its
     * dropdown list is unaffected by clipping; this rule covers
     * any custom popovers we add to the toolbar later. */
    position:relative;z-index:5;
  }

  .arch-btn{
    padding:5px 14px;background:var(--white);color:var(--brown);
    border:1px solid var(--border);border-radius:6px;
    font-size:.75rem;font-weight:500;cursor:pointer;
    transition:background .15s,border-color .15s;
  }
  .arch-btn:hover{background:var(--bg-warm);border-color:var(--accent)}
  .arch-btn-accent{
    background:var(--accent);color:var(--white);border-color:var(--accent);
  }
  .arch-btn-accent:hover{background:var(--accent-light);border-color:var(--accent-light)}

  /* maintainer 2026-05-10: primary Done button. Same visual weight as the
   * accent variant but uses brown-dark to read as "primary exit" rather
   * than "primary action" — matches Linear's settings Done pattern. */
  .arch-btn-primary{
    background:var(--brown-dark);color:var(--cream);
    border-color:var(--brown-dark);
    font-weight:600;
    padding:5px 18px;
  }
  .arch-btn-primary:hover{
    background:var(--brown);border-color:var(--brown);
  }
  .arch-btn-primary:focus-visible{
    outline:2px solid var(--accent);outline-offset:2px;
  }

  /* Active-state badge — sits in the toolbar showing what's actually
   * wired up. Two visual states: "Active <name>" (calm) and
   * "Customizing <name>" (italic + accent tint) once _dirty=true. */
  .arch-active-badge{
    display:inline-flex;align-items:baseline;gap:6px;
    padding:3px 10px;
    margin:0 2px;
    border:1px solid var(--border);
    border-radius:999px;
    background:var(--bg-warm, #f7f1e6);
    font-size:.72rem;
    line-height:1.3;
    color:var(--brown-dark);
    transition:background .15s,border-color .15s,color .15s;
  }
  .arch-active-badge .arch-active-label{
    text-transform:uppercase;letter-spacing:.05em;font-weight:600;
    color:var(--brown-light);font-size:.62rem;
  }
  .arch-active-badge .arch-active-name{
    font-weight:600;
  }
  .arch-active-badge[data-state="customizing"]{
    background:rgba(122,58,16,.08);
    border-color:var(--accent);
    color:var(--accent);
  }
  .arch-active-badge[data-state="customizing"] .arch-active-label{
    color:var(--accent);
  }
  .arch-active-badge[data-state="customizing"] .arch-active-name{
    font-style:italic;
  }

  /* ═══════════════════════════════════════════════════════════════
     Wave 6 — per-agent Claw badge + global Claw toggles
     maintainer 2026-05-10. The badge sits next to the role badge in the
     agent card header when the agent is opted into Claw. The global
     row above the agent grid carries the orchestrator-Claw checkbox
     plus per-agent / per-run cost-cap range inputs.
     ═══════════════════════════════════════════════════════════════ */
  .arch-agent-claw-badge{
    display:inline-flex;
    align-items:center;
    padding:2px 8px;
    margin-left:6px;
    background:var(--accent, #7a3a10);
    color:var(--cream, #faf6f0);
    border-radius:999px;
    font-size:.62rem;
    font-weight:600;
    letter-spacing:.04em;
    text-transform:uppercase;
  }
  .arch-agent-claw-toggle{
    margin-top:6px;
    padding:6px 8px;
    border-top:1px dashed var(--border, #d7ccc8);
    font-size:.74rem;
    color:var(--brown, #513728);
  }
  .arch-agent-claw-toggle label{
    cursor:pointer;
    user-select:none;
  }
  .arch-agent-claw-toggle input{
    margin-right:6px;
    vertical-align:middle;
  }
  .arch-claw-toggle{
    color:var(--accent, #7a3a10);
    font-weight:500;
  }

  .arch-select{
    padding:4px 8px;border:1px solid var(--border);border-radius:5px;
    font-size:.75rem;background:var(--white);color:var(--text);
    font-family:var(--sans);cursor:pointer;
  }

  /* Pipeline — reuses lib-pipeline with architecture overrides */
  .arch-pipeline{
    --lib-pipe-mt:0;
    --lib-pipe-pad:12px 8px 8px;
    --lib-pipe-icon:28px;
    --lib-pipe-icon-font:.7rem;
    --lib-pipe-label:.62rem;
    --lib-pipe-label-mt:4px;
    --lib-pipe-detail:.6rem;
    --lib-pipe-conn:36px;
    --lib-pipe-conn-mt:14px;
    margin:18px 12px;padding:12px 14px;
    background:var(--cream-dark);border-radius:8px;
    justify-content:center;
  }
  .arch-pipe-stage{min-width:80px;max-width:120px}
  .arch-pipe-stage .pipe-detail{margin-top:4px}
  .arch-stage-select{
    width:100%;padding:2px 4px;border:1px solid var(--border);
    border-radius:4px;font-size:.65rem;background:var(--white);
    color:var(--text);font-family:var(--sans);
  }
  .arch-stage-toggle{
    font-size:.65rem;color:var(--text);display:flex;
    align-items:center;gap:3px;justify-content:center;
  }
  .arch-stage-toggle input[type="checkbox"]{
  -webkit-appearance:none;appearance:none;
  width:14px;height:14px;border:1.5px solid var(--border);
  border-radius:3px;background:var(--cream);
  cursor:pointer;position:relative;flex-shrink:0;
  transition:background .15s,border-color .15s;margin:0;
}
.arch-stage-toggle input[type="checkbox"]:checked{
  background:var(--accent);border-color:var(--accent);
}
.arch-stage-toggle input[type="checkbox"]:checked::after{
  content:'\2713';position:absolute;
  top:-2px;left:1px;
  font-size:.6rem;font-weight:700;color:var(--white);
}

  /* Global controls row */
  .arch-globals{
    display:flex;align-items:center;gap:14px;flex-wrap:wrap;
    margin:0 12px 18px;padding:10px 14px;
    background:var(--cream-dark);border-radius:8px;
    font-size:.75rem;color:var(--text);
  }
  .arch-globals label{display:flex;align-items:center;gap:6px}
  .arch-globals input[type="range"]{width:80px}
  .arch-globals input[type="checkbox"]{
  -webkit-appearance:none;appearance:none;
  width:16px;height:16px;border:1.5px solid var(--border);
  border-radius:4px;background:var(--cream);
  cursor:pointer;position:relative;flex-shrink:0;
  transition:background .15s,border-color .15s;margin:0;
}
.arch-globals input[type="checkbox"]:checked{
  background:var(--accent);border-color:var(--accent);
}
.arch-globals input[type="checkbox"]:checked::after{
  content:'\2713';position:absolute;
  top:-1px;left:2px;
  font-size:.65rem;font-weight:700;color:var(--white);
}

  /* Agent cards grid — maintainer 2026-05-10: redesigned for visibility on
   * Add Agent. Was: cards stretched to fill row, cramped 12px gap, no
   * visual feedback on add. Now: 75%-width centered grid, smaller
   * 220-260px cards, 18px gap, clearer borders, centered name badges,
   * X-button absolute-positioned at top-right so the name can center,
   * fade-in animation on the most-recently-added card so the user
   * sees it appear. */
  .arch-agent-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 260px));
    gap:18px;
    padding:6px 0 28px;
    max-width:75%;
    margin:0 auto;
    justify-content:center;
  }
  .arch-agent-card{
    position:relative;
    border:1.5px solid var(--border);
    border-left:4px solid var(--border-light);
    border-radius:8px;
    padding:14px 14px 12px;
    font-size:.75rem;
    background:var(--cream);
    box-shadow:0 1px 2px rgba(53,32,26,.04);
    transition:border-color .2s, box-shadow .2s, transform .15s;
  }
  .arch-agent-card:hover{
    box-shadow:0 4px 14px rgba(53,32,26,.10);
    transform:translateY(-1px);
  }

  /* Role color coding (left rail) */
  .arch-agent-card[data-role="deep-reader"]{border-left-color:var(--gold)}
  .arch-agent-card[data-role="web-researcher"]{border-left-color:#42a5f5}
  .arch-agent-card[data-role="cross-referencer"]{border-left-color:#66bb6a}
  .arch-agent-card[data-role="contrarian"]{border-left-color:#ef5350}
  .arch-agent-card[data-role="custom"]{border-left-color:#ab47bc}

  /* Header: agent name centered; X button absolute top-right corner. */
  .arch-agent-header{
    display:flex;align-items:center;justify-content:center;
    margin:0 0 12px;padding:0 24px 10px;
    border-bottom:1px solid var(--border-light);
    min-height:24px;text-align:center;
  }
  .arch-agent-role-badge{
    font-size:.7rem;font-weight:700;text-transform:uppercase;
    letter-spacing:.04em;padding:3px 10px;border-radius:5px;
    background:var(--bg-warm);color:var(--brown-dark);
    text-align:center;
  }
  .arch-agent-remove{
    position:absolute;top:8px;right:8px;
    background:none;border:none;cursor:pointer;
    color:var(--text-muted);font-size:1rem;line-height:1;
    width:22px;height:22px;
    display:flex;align-items:center;justify-content:center;
    border-radius:4px;transition:color .15s,background .15s;
  }
  .arch-agent-remove:hover{color:#ef5350;background:rgba(239,83,80,.10)}

  /* Add-Agent feedback: the most-recently-added card briefly outlines
   * in accent + fades in so the user sees the new card appear without
   * having to hunt for it. The class is removed by JS after the
   * animation completes. */
  @keyframes arch-agent-appear{
    0%   {opacity:0; transform:scale(.96) translateY(-4px); box-shadow:0 0 0 3px rgba(122,58,16,.30);}
    60%  {opacity:1; transform:scale(1.02) translateY(0);   box-shadow:0 0 0 3px rgba(122,58,16,.20);}
    100% {opacity:1; transform:scale(1) translateY(0);      box-shadow:0 1px 2px rgba(53,32,26,.04);}
  }
  .arch-agent-card-just-added{
    animation:arch-agent-appear .55s ease-out;
  }

  .arch-agent-field{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:6px;gap:8px;
  }
  .arch-agent-field label{
    font-size:.7rem;color:var(--text-muted);white-space:nowrap;
  }
  .arch-agent-field select,
  .arch-agent-field input[type="range"]{
    flex:1;min-width:0;
  }
  .arch-agent-field select{
    padding:2px 4px;border:1px solid var(--border);border-radius:4px;
    font-size:.7rem;background:var(--white);font-family:var(--sans);
  }
  .arch-agent-field input[type="range"]{width:80px}
  .arch-agent-field .arch-field-val{
    font-size:.68rem;color:var(--text);min-width:18px;text-align:right;
  }

  .arch-text-input{
    width:100%;padding:7px 10px;
    border:1px solid var(--border);border-radius:6px;
    font-size:.8rem;font-family:var(--sans);
    background:var(--white);color:var(--text);
  }
  .arch-text-input:focus{outline:none;border-color:var(--accent)}

  .arch-tool-list{
    display:flex;flex-wrap:wrap;gap:4px 8px;margin-top:4px;
  }
  .arch-tool-list label{
    font-size:.65rem;color:var(--text);display:flex;
    align-items:center;gap:3px;cursor:pointer;
  }
  .arch-tool-list input[type="checkbox"]{
  -webkit-appearance:none;appearance:none;
  width:14px;height:14px;border:1.5px solid var(--border);
  border-radius:3px;background:var(--cream);
  cursor:pointer;position:relative;flex-shrink:0;
  transition:background .15s,border-color .15s;margin:0;
}
.arch-tool-list input[type="checkbox"]:checked{
  background:var(--accent);border-color:var(--accent);
}
.arch-tool-list input[type="checkbox"]:checked::after{
  content:'\2713';position:absolute;
  top:-2px;left:1px;
  font-size:.6rem;font-weight:700;color:var(--white);
}

  .arch-mandate-input{
    width:100%;padding:5px 8px;margin-top:4px;
    border:1px solid var(--border);border-radius:4px;
    font-size:.7rem;font-family:var(--sans);
    background:var(--white);color:var(--text);resize:vertical;
    min-height:40px;
  }
  .arch-mandate-input:focus{outline:none;border-color:var(--accent)}

  /* Save modal footer */
  .arch-view .modal-footer{
    display:flex;justify-content:flex-end;align-items:center;
  }

  /* ── Architecture-as-modal (maintainer 2026-05-10) ────────────────────
     The Architecture Designer used to take over the entire main pane
     via switchToView("architecture"). It now renders inside a
     modal-overlay so the Atelier (or whatever view triggered it)
     stays mounted underneath and can be returned to instantly.

     `.arch-modal-overlay` reuses the global `.modal-overlay` backdrop
     styling (rgba brown wash) and the global Modal helper picks up
     Esc + click-outside automatically. The `.arch-view-modal`
     modifier converts the previously full-bleed view into a Mira-
     branded modal panel: cream background, brown-dark 1.5px border,
     9px corner radius, soft warm shadow. Dimensions cap at the
     viewport so it remains usable on smaller displays. The inner
     `.arch-body` keeps its scroll behaviour. */
  /* maintainer 2026-05-10: grow-from-button / collapse-into-button
   * animation. The overlay stays rendered (`display:flex !important`)
   * even when closed, so the close transition can play after Modal
   * removes `.open`. Visibility is controlled by opacity + pointer-
   * events. The panel scales from a near-zero size at the trigger
   * button's coordinates to its full size, using a transform-origin
   * set in JS via the `--arch-origin-x` / `--arch-origin-y` custom
   * properties (panel-local pixels). */
  .arch-modal-overlay{
    display:flex !important;
    opacity:0;
    pointer-events:none;
    transition:opacity .26s ease;
  }
  .arch-modal-overlay.open{
    opacity:1;
    pointer-events:auto;
  }
  .arch-modal-overlay .arch-view-modal{
    background:var(--cream);
    border:1.5px solid var(--brown-dark);
    border-radius:9px;
    box-shadow:0 14px 44px rgba(40,25,15,.32);
    width:min(1100px, 94vw);
    height:min(820px, 88vh);
    max-width:94vw;max-height:88vh;
    display:flex;
    overflow:hidden;
    /* Closed: tiny scale anchored at the trigger button. */
    transform:scale(.04);
    opacity:0;
    transform-origin:var(--arch-origin-x, 50%) var(--arch-origin-y, 50%);
    transition:
      transform .30s cubic-bezier(.34, 1.45, .64, 1),
      opacity   .22s ease;
  }
  .arch-modal-overlay.open .arch-view-modal{
    transform:scale(1);
    opacity:1;
  }
  /* Re-skin the existing arch-header for the modal frame: cream
     surface to match the panel, brown-dark hairline below. The X
     close button sits flush right via inline margin-left:auto. */
  .arch-modal-overlay .arch-header{
    background:var(--cream);
    border-bottom:1px solid var(--border);
    border-top-left-radius:9px;border-top-right-radius:9px;
    box-shadow:none;
  }
  .arch-modal-overlay .arch-header h2{
    font-family:var(--serif);
    color:var(--brown-dark);
  }
  .arch-modal-overlay .arch-toolbar{
    background:var(--cream);
  }
  .arch-modal-close-btn{
    color:var(--brown-dark);
    cursor:pointer;
  }
  .arch-modal-close-btn:hover{color:var(--accent)}

  /* ================================================================
     Phase 3 — Intake Status Indicator
     Shows "Semantic search available" or "BM25 only" in the Explorer
     header. Green dot when intake server connected, muted when not.
     ================================================================ */
  .intake-status{
    display:inline-flex;align-items:center;gap:4px;
    padding:2px 8px;border-radius:4px;
    font-size:.6rem;font-weight:700;letter-spacing:.2px;
    text-transform:uppercase;margin-left:auto;
  }
  .intake-status::before{
    content:'';display:inline-block;
    width:5px;height:5px;border-radius:50%;
    flex-shrink:0;
  }
  .intake-status-active{
    background:rgba(46,125,50,.08);color:#2e7d32;
  }
  .intake-status-active::before{background:#2e7d32}
  .intake-status-inactive{
    background:rgba(0,0,0,.04);color:var(--text-muted);
  }
  .intake-status-inactive::before{background:var(--text-muted)}

  /* ── Reranker Badge ── */
  .reranker-badge{
    font-size:.62rem;font-weight:700;letter-spacing:.4px;
    text-transform:uppercase;padding:2px 7px;border-radius:3px;
    display:inline-flex;align-items:center;gap:4px;
  }
  .reranker-active{
    background:rgba(46,125,50,.1);color:#2e7d32;
  }
  .reranker-inactive{
    background:rgba(0,0,0,.04);color:var(--text-muted);
  }

  /* ── Quality Tier Badge ── */
  .quality-tier-badge{
    font-size:.62rem;font-weight:700;letter-spacing:.4px;
    text-transform:uppercase;padding:2px 7px;border-radius:3px;
    margin-left:6px;display:inline-block;
  }
  .quality-tier-frontier{
    background:rgba(46,125,50,.12);color:#2e7d32;
  }
  .quality-tier-strong{
    background:rgba(21,101,192,.12);color:#1565c0;
  }
  .quality-tier-capable{
    background:rgba(245,124,0,.12);color:#e65100;
  }

  /* ── Dialectical Stage Headers ── */
  .stage-header{
    display:flex;align-items:center;gap:10px;
    padding:6px 16px;margin:10px 0 4px;
    border-top:1px solid var(--border-light);
    font-family:var(--serif);font-variant:small-caps;
    letter-spacing:.5px;
  }
  .stage-icon{
    font-size:.9rem;line-height:1;opacity:.7;
  }
  .stage-label{
    font-size:.72rem;font-weight:700;letter-spacing:1px;
  }
  .stage-cycle{
    font-size:.62rem;color:var(--text-muted);
    margin-left:auto;font-variant:normal;letter-spacing:0;
  }

  /* Stage accent colors */
  .stage-thesis       { color:#9E7A3C; border-top-color:#9E7A3C }
  .stage-maturation   { color:#6B7B8D; border-top-color:#6B7B8D }
  .stage-antithesis   { color:#8B3A2A; border-top-color:#8B3A2A }
  .stage-synthesis    { color:#4A7A5B; border-top-color:#4A7A5B }

  /* Stage badges (inline pills in result <details>) */
  .stage-badge{
    font-size:.58rem;font-weight:700;letter-spacing:.5px;
    padding:1px 6px;border-radius:3px;margin-right:4px;
    display:inline-block;vertical-align:middle;
  }
  .stage-badge-thesis     { background:rgba(158,122,60,.14);color:#9E7A3C }
  .stage-badge-maturation { background:rgba(107,123,141,.14);color:#6B7B8D }
  .stage-badge-antithesis { background:rgba(139,58,42,.14);color:#8B3A2A }
  .stage-badge-synthesis  { background:rgba(74,122,91,.14);color:#4A7A5B }

  /* Stage result <details> border accent */
  .stage-result{ border-left:3px solid var(--border-light); padding-left:12px; margin:4px 0 }
  .stage-result-thesis     { border-left-color:#9E7A3C }
  .stage-result-maturation { border-left-color:#6B7B8D }
  .stage-result-antithesis { border-left-color:#8B3A2A }
  .stage-result-synthesis  { border-left-color:#4A7A5B }
  .stage-result-facet      { border-left-color:#5B6FA0 }

  /* ── Deconstructive-Reconstructive (Phase 3G) ── */
  .decon-facets { margin:8px 0; }
  .decon-facets h3 { font-size:.92rem; margin:0 0 6px; color:var(--brown-dark) }
  .decon-facets ol { margin:0; padding-left:20px; font-size:.85rem; line-height:1.6 }
  .deconstructive-reconstruction { margin:12px 0 }
  .deconstructive-reconstruction h3 {
    font-size:.95rem; margin:0 0 8px; color:var(--accent);
    border-bottom:1px solid var(--border-light); padding-bottom:4px;
  }
  .facet-summary-bar { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px }
  .facet-badge {
    font-size:.72rem; padding:2px 8px; border-radius:10px;
    font-weight:600; letter-spacing:.02em;
  }
  .facet-badge-ok    { background:rgba(74,122,91,.14); color:#4A7A5B }
  .facet-badge-error { background:rgba(183,28,28,.10); color:#B71C1C }
  .reconstruction-body { font-size:.88rem; line-height:1.65 }

  /* ================================================================
     Phase 3 — Process Observer Panel (Logs view)
     Displays observation summary after swarm/dialectical runs.
     ================================================================ */
  .observer-panel{
    margin:12px 0;padding:12px 16px;
    border:1px solid var(--border-soft);border-radius:6px;
    background:var(--bg-card);
  }
  .observer-panel-header{
    display:flex;justify-content:space-between;align-items:center;
    margin-bottom:8px;
  }
  .observer-panel-header h3{
    font-size:.78rem;font-weight:700;color:var(--text-main);
    margin:0;text-transform:uppercase;letter-spacing:.3px;
  }
  .observer-summary h4{
    font-size:.72rem;font-weight:700;color:var(--text-light);
    margin:10px 0 4px;text-transform:uppercase;letter-spacing:.2px;
  }
  .observer-table{
    width:100%;font-size:.72rem;border-collapse:collapse;
  }
  .observer-table td{
    padding:2px 8px;border-bottom:1px solid var(--border-soft);
  }
  .observer-table td:first-child{
    font-weight:600;color:var(--text-light);width:40%;
  }
  .observer-table tr.observer-warning td{
    color:#b71c1c;
  }
  .observer-patterns{
    list-style:none;padding:0;margin:0;
  }
  .observer-patterns li{
    padding:4px 0;font-size:.7rem;
    border-bottom:1px solid var(--border-soft);
  }
  .observer-patterns .observer-warning{color:#e65100}
  .observer-patterns .observer-critical{color:#b71c1c;font-weight:600}

  /* ================================================================
     Phase 3 — Outcome Quality Prompt (Explorer conversation)
     Non-blocking thumbs up/down for data flywheel.
     ================================================================ */
  .outcome-prompt{
    display:inline-flex;align-items:center;gap:8px;
    padding:6px 12px;border-radius:6px;
    background:rgba(0,0,0,.03);
    font-size:.72rem;color:var(--text-light);
  }
  .outcome-label{font-weight:600}
  .outcome-btn{
    background:none;border:1px solid var(--border-soft);
    border-radius:4px;padding:2px 8px;cursor:pointer;
    font-size:.72rem;color:var(--text-muted);
    transition:all .15s;
  }
  .outcome-btn:hover{
    border-color:var(--accent);color:var(--accent);
  }
  .outcome-up:hover{color:#2e7d32;border-color:#2e7d32}
  .outcome-down:hover{color:#b71c1c;border-color:#b71c1c}
  .outcome-dismiss:hover{color:var(--text-muted)}
  .outcome-recorded{
    font-size:.72rem;color:var(--text-muted);font-style:italic;
  }