/* /carnegie/admin — page-specific styles.
 * Most chrome (header/footer/sections/buttons/chips) is inherited from
 * /carnegie/create/app.css. Only the layout + loading/denied states live here.
 */

.admin-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
  /* Cockpit pages have a sticky WhatsApp FAB (≈64px-from-bottom) + the
     annotations toolbar (≈48px + 12px from bottom). Reserve enough room
     so the last section never sits under either, plus iOS safe-area. */
  padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px));
}

.admin-loading {
  /* Center the spinner + label vertically in the available viewport
     instead of just padding 80px from the top (Kenneth 2026-05-23:
     "huge empty space" — text floated near top with dead area below). */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  padding: 40px 20px;
  color: var(--air-fg-mute, #5a6273);
  font-size: 14px;
}
/* Rule #10 guard: `.admin-loading { display: flex }` outranks the UA
 * `[hidden] { display: none }` rule, so setting `loading.hidden = true`
 * in JS does NOT hide the loading state — the spinner + 60vh padding
 * stay painted while the resolved admin shell renders below. Kenneth
 * screenshot 2026-05-31: "Checking access… took the whole page and
 * pushed everything down". This rule restores the JS hide path. */
.admin-loading[hidden] { display: none !important; }
.admin-loading p { margin: 0; }
.admin-loading-spinner {
  width: 28px;
  height: 28px;
  margin: 0 0 16px;
  border: 3px solid #e2e2e2;
  border-top-color: #1a1a1a;
  border-radius: 50%;
  animation: admin-spin 0.8s linear infinite;
}
@keyframes admin-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .admin-loading-spinner { animation: none; }
}

.admin-denied-num {
  background: #fde9e9;
  color: #c50d0d;
}

.admin-denied-actions {
  margin-top: 18px;
}

/* Hide panels (not chrome) when [hidden] is set. Previously matched ALL
   admin-* IDs which trapped the mobile hamburger (id=admin-mobile-nav-open)
   and topbar in `display:none !important` whenever they had the hidden
   attribute set. Scoped to panel containers only. */
[id^="admin-"][id$="-panel"][hidden],
[id="admin-panel"][hidden] { display: none !important; }

/* ---- LLM settings panel ------------------------------------------------ */

#admin-llm-panel { margin-top: 28px; }

.admin-llm-grid {
  display: grid;
  gap: 22px;
  margin-top: 12px;
}

.admin-llm-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-llm-field input.air-input,
.admin-llm-field select.air-input {
  /* Default: fill the grid cell. The old 220px max-width cap caused inputs
     to sit left-aligned inside ~280-300px cells with phantom right gaps —
     visually broken next to <select>s which always claim 100%. Opt-in to a
     narrower input via .admin-llm-field--narrow on the wrapper if needed. */
  width: 100%;
  max-width: 100%;
  font-variant-numeric: tabular-nums;
}
.admin-llm-field--narrow input.air-input { max-width: 220px; }
/* Default-value strong tags in help text — tabular-nums so they don't wobble
   between "Default 8" and "Default 1024". Otherwise lines visually jiggle on
   re-render. (Audit P2-5.) */
.admin-llm-field .air-help strong { font-variant-numeric: tabular-nums; }

.admin-llm-rate-group {
  border: 1px solid var(--air-line, #e6e6e0);
  border-radius: 12px;
  padding: 16px 18px 14px;
  background: rgba(0, 0, 0, 0.03);
  margin: 0;
}
.admin-llm-rate-group > legend {
  padding: 0 8px;
  /* Was inline-flex with row gap — on narrow viewports that caused the
     two-word "Rate limit" title to wrap into "Rate / limit" stacked,
     and the hint span to float weirdly to the right of the first word.
     Switch to block + flex-wrap so the hint flows under the title
     cleanly when there isn't horizontal room. */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
  row-gap: 2px;
  font-size: 14px;
  /* Force "Rate limit" to stay on one line */
  white-space: nowrap;
}
.admin-llm-rate-group > legend .air-label-hint {
  /* Override default 6px left margin from the design-tokens stylesheet
     since the legend now controls gap via column-gap. */
  margin-left: 0;
  /* Hint may wrap onto its own line and should re-enable wrapping. */
  white-space: normal;
}

.admin-llm-rate-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 8px;
}
/* Variant: single-control row — natural width, not stretched across 3 cols.
   Used for Commercial sense-check timeout (one knob) and any future mode
   with fewer than 3 controls. Prevents the empty-cell visual noise the
   audit flagged as P0. */
.admin-llm-rate-row--single { grid-template-columns: minmax(0, 320px); }
/* Variant: 2 controls — used for Think Stage 2 row (model + timeout, no
   thinking budget). Reads as intentional grouping ("Stage 2 has fewer
   knobs") instead of a row with a TODO gap on the right. */
.admin-llm-rate-row--two    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) {
  .admin-llm-rate-row,
  .admin-llm-rate-row--single,
  .admin-llm-rate-row--two { grid-template-columns: 1fr; }
}

.admin-llm-rate-note {
  display: block;
  margin-top: 10px;
  opacity: 0.8;
}

/* ─── Mode cards (Think / Flash / Commercial) ──────────────────────────
   Each "mode" group is one fieldset with a tinted left border + emoji badge
   in the legend. Visually segregates the three AI surfaces so super-admin
   doesn't have to mentally map "Stage 1 timeout" → which feature.
   Empty .admin-llm-field-empty cells keep grid columns aligned when a row
   has fewer than 3 controls (Sense-check single-control row, Stage 2 etc). */
.admin-llm-mode-group {
  border-left-width: 4px;
}
.admin-llm-mode-think     { border-left-color: #5b21b6; }  /* violet — reasoning */
.admin-llm-mode-flash     { border-left-color: #d97706; }  /* amber — speed */
.admin-llm-mode-commercial { border-left-color: #047857; }  /* emerald — money */

/* Monospace mode tag in the legend. Replaces the earlier emoji badge which
   read as toy-like next to the rest of the admin chrome. The 2-letter mono
   tag is more in line with the existing "super admin" pill + SVG icons. */
.admin-llm-mode-tag {
  display: inline-flex;
  align-items: center;
  font: 600 10px/1 'Fira Code', ui-monospace, monospace;
  letter-spacing: 0.08em;
  padding: 4px 7px;
  border-radius: 4px;
  margin-right: 4px;
  vertical-align: 1px;
}
.admin-llm-mode-tag--think     { background: rgba(91, 33, 182, 0.12);  color: #5b21b6; }
.admin-llm-mode-tag--flash     { background: rgba(217, 119, 6, 0.14);  color: #b45309; }
.admin-llm-mode-tag--commercial { background: rgba(4, 120, 87, 0.14);  color: #047857; }

/* Multi-row mode groups: extra spacing between rows. */
.admin-llm-mode-group .admin-llm-rate-row + .admin-llm-rate-row {
  margin-top: 16px;
}

/* Flash mode model-mirror — read-only "follows Stage 2" display.
   Visually distinct from the editable fields below (no border, no input
   chrome) so it's obvious the value isn't editable here, and the user is
   directed to the Stage 2 picker (anchor link) to change it. */
.admin-llm-flash-model-mirror {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  margin: 8px 0 4px;
  background: rgba(217, 119, 6, 0.06);
  border-radius: 8px;
  border-left: 3px solid rgba(217, 119, 6, 0.35);
}
.admin-llm-flash-model-mirror .air-label {
  margin: 0;
  font-weight: 600;
}
.admin-llm-flash-model-value {
  font: 600 13px/1.3 'Fira Code', ui-monospace, monospace;
  color: #b45309;
  padding: 2px 6px;
  background: rgba(217, 119, 6, 0.12);
  border-radius: 4px;
}
.admin-llm-flash-model-mirror .air-label-hint {
  margin-left: auto;
  font-size: 12px;
}

/* Empty grid cell — invisible placeholder to keep columns aligned. */
.admin-llm-field-empty {
  visibility: hidden;
  min-height: 1px;
}
@media (max-width: 640px) {
  /* On mobile, the row collapses to 1 column; empty cells must not eat space. */
  .admin-llm-field-empty { display: none; }
}

/* ─── Saved feedback animation ─────────────────────────────────────────
   On successful POST /api/carnegie/llm-settings, admin/app.js adds
   .is-saved to every input/select whose value changed and removes it
   2s later. Brief green tint + scale pulse so the user sees confirmation
   per-field, not just at the bottom "Updated ✓" status. */
@keyframes admin-llm-saved-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(4, 120, 87, 0.55); background-color: rgba(4, 120, 87, 0.10); }
  60%  { box-shadow: 0 0 0 6px rgba(4, 120, 87, 0.00); background-color: rgba(4, 120, 87, 0.06); }
  100% { box-shadow: 0 0 0 0   rgba(4, 120, 87, 0.00); background-color: transparent; }
}
.admin-llm-field input.air-input.is-saved,
.admin-llm-field select.air-input.is-saved {
  animation: admin-llm-saved-pulse 1.6s ease-out;
  border-color: #047857;
}

.admin-llm-reset {
  /* R2: reset = red text link, not a button. Matches .ctxrules-reset-link. */
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  background: transparent;
  border: 0;
  padding: 8px 0;
  color: var(--air-color-danger, #b3261e);
  text-decoration: underline;
  cursor: pointer;
  min-height: 44px;
}

/* ---- Header overrides for the admin page ------------------------------- */

/* Back button: always visible on the admin page, even on small phones.
   /carnegie/create/app.css collapses .create-header-right .air-btn to icon-only
   under 480px by setting font-size:0. That made the admin Back link
   disappear entirely because it was text-only. We now have an inline
   SVG arrow so the icon-only collapse degrades gracefully, AND we keep
   the button visually present (filled bg, never zero-width). */
body.admin-page .admin-back-btn {
  /* Always show as a clear pill-shaped button regardless of viewport. */
  background: var(--air-text, #0b1020);
  color: var(--air-text-on-colour, #fff);
  border: 0;
  border-radius: var(--air-radius-pill, 999px);
  padding: 10px 16px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
body.admin-page .admin-back-btn:hover {
  background: var(--air-text, #0b1020);
  opacity: 0.85;
}
@media (max-width: 480px) {
  /* On phones, drop the visible text but keep the icon + a comfy tap
     target. Overrides the global .create-header-right .air-btn{font-size:0}
     because the icon itself doesn't need a font size. */
  body.admin-page .admin-back-btn .admin-back-btn-text {
    display: none;
  }
  body.admin-page .admin-back-btn {
    padding: 10px 12px;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }
  body.admin-page .admin-back-btn svg {
    margin-right: 0 !important;
    vertical-align: middle !important;
  }
}
.admin-llm-reset:hover {
  opacity: 0.8;
  background: transparent;
}

/* ── Settings: global context docs (Stage 1 planner) ───────────────────── */
.admin-context-list {
  display: grid;
  gap: 18px;
  margin-bottom: 8px;
}
.admin-context-card {
  display: grid;
  gap: 8px;
  padding: 14px 14px 12px;
  background: var(--air-surface-2, rgba(255, 255, 255, 0.55));
  border: 1px solid var(--air-stroke-soft, rgba(11, 16, 32, 0.08));
  border-radius: var(--air-radius-md, 14px);
}
.admin-context-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.admin-context-card-label {
  font-weight: 600;
  color: var(--air-fg, #0b1020);
}
.admin-context-card-meta {
  font-size: 12px;
  color: var(--air-fg-soft, rgba(11, 16, 32, 0.55));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.admin-context-card textarea {
  width: 100%;
  min-height: 140px;
  resize: vertical;
  font: 13px/1.45 "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding: 10px 12px;
  border-radius: var(--air-radius-sm, 10px);
  border: 1px solid var(--air-stroke, rgba(11, 16, 32, 0.16));
  background: var(--air-surface, #fff);
  color: var(--air-fg, #0b1020);
}
.admin-context-card textarea:focus-visible {
  outline: 2px solid var(--air-accent, #6c4cf1);
  outline-offset: 1px;
  border-color: var(--air-accent, #6c4cf1);
}
.admin-context-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--air-fg-soft, rgba(11, 16, 32, 0.55));
}
.admin-context-card-foot .admin-context-size.over {
  color: #b42318;
  font-weight: 600;
}

/* ── Settings: Standard Pricing form (lives in same Reference docs panel) ─ */
.admin-pricing-card {
  margin-bottom: 22px;
  gap: 14px;
}
.admin-pricing-help {
  margin: 0;
  font-size: 12.5px;
  color: var(--air-fg-soft, rgba(11, 16, 32, 0.65));
  line-height: 1.5;
}
.admin-pricing-help code {
  font: 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: rgba(11, 16, 32, 0.05);
  padding: 1px 5px;
  border-radius: 4px;
}
.admin-pricing-groups {
  display: grid;
  gap: 16px;
}
.admin-pricing-group {
  border: 1px solid var(--air-stroke-soft, rgba(11, 16, 32, 0.08));
  border-radius: var(--air-radius-sm, 10px);
  padding: 10px 14px 12px;
  background: var(--air-surface, #fff);
  display: grid;
  gap: 10px;
  margin: 0;
}
.admin-pricing-group-legend {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: var(--air-fg-soft, rgba(11, 16, 32, 0.6));
  padding: 0 6px;
}
.admin-pricing-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
  gap: 14px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(11, 16, 32, 0.06);
}
.admin-pricing-row:last-child {
  border-bottom: none;
}
.admin-pricing-label {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.admin-pricing-label-text {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--air-fg, #0b1020);
}
.admin-pricing-help-text {
  font-size: 11.5px;
  color: var(--air-fg-soft, rgba(11, 16, 32, 0.55));
  line-height: 1.4;
}
.admin-pricing-input-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
.admin-pricing-input {
  width: 92px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font: 13px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding: 6px 10px;
}
.admin-pricing-input:invalid,
.admin-pricing-input:out-of-range {
  border-color: #b42318;
  background: rgba(180, 35, 24, 0.04);
}
.admin-pricing-unit-pre,
.admin-pricing-unit-post {
  font-size: 12.5px;
  color: var(--air-fg-soft, rgba(11, 16, 32, 0.6));
  font-variant-numeric: tabular-nums;
}
.admin-pricing-default {
  font-size: 11px;
  color: var(--air-fg-soft, rgba(11, 16, 32, 0.45));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.admin-pricing-actions {
  margin-top: 6px;
}
@media (max-width: 640px) {
  .admin-pricing-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .admin-pricing-input-wrap {
    justify-content: flex-end;
  }
}
.admin-context-file-btn {
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  color: var(--air-accent, #6c4cf1);
  background: none;
  border: 0;
  padding: 0;
}
.admin-context-file-btn:hover { opacity: 0.8; }
.admin-context-clear-btn {
  font-size: 12px;
  background: none;
  border: 0;
  padding: 0;
  color: var(--air-fg-soft, rgba(11, 16, 32, 0.55));
  cursor: pointer;
  text-decoration: underline;
}
.admin-context-clear-btn:hover { color: #b42318; }

/* ───────────────────────────────────────────────────────────────────────
   Ticker editor (super-admin only)
   ─────────────────────────────────────────────────────────────────────── */

.admin-ticker-legend {
  font-family: 'Fira Code', ui-monospace, monospace;
  font-size: 12px;
  padding: 1px 6px;
  border-radius: 4px;
}
.admin-ticker-legend--positive { color: #1c8a4f; background: rgba(43, 212, 123, 0.12); }
.admin-ticker-legend--alert    { color: #b91c1c; background: rgba(255, 77, 77, 0.12); }

.admin-ticker-compose {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-top: 6px;
  flex-wrap: wrap;
}

.admin-ticker-kind-toggle {
  display: inline-flex;
  border: 1px solid var(--air-line, #d8d8d2);
  border-radius: 10px;
  overflow: hidden;
  background: var(--air-surface, #fff);
  flex: 0 0 auto;
}
.admin-ticker-kind {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 10px 16px;
  min-height: 44px;
  font: 600 13px/1 'Fira Code', ui-monospace, monospace;
  color: var(--air-text-secondary, #5a6273);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  white-space: nowrap;
}
.admin-ticker-kind + .admin-ticker-kind {
  border-left: 1px solid var(--air-line, #d8d8d2);
}
.admin-ticker-kind:hover {
  background: rgba(0, 0, 0, 0.03);
}
.admin-ticker-kind--positive.is-active {
  background: rgba(43, 212, 123, 0.14);
  color: #1c8a4f;
}
.admin-ticker-kind--alert.is-active {
  background: rgba(255, 77, 77, 0.14);
  color: #b91c1c;
}

.admin-ticker-input {
  flex: 1 1 240px;
  min-width: 0;
}

.admin-ticker-add {
  flex: 0 0 auto;
}

.admin-ticker-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding: 10px;
  min-height: 60px;
  border: 1px dashed var(--air-line, #d8d8d2);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.015);
}

.admin-ticker-empty {
  font-size: 13px;
  color: var(--air-text-secondary, #5a6273);
  font-style: italic;
  padding: 8px 4px;
}

.admin-ticker-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 8px 12px;
  min-height: 36px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--air-surface, #fff);
  font-size: 13px;
  max-width: 100%;
}
.admin-ticker-chip--positive {
  background: rgba(43, 212, 123, 0.10);
  border-color: rgba(43, 212, 123, 0.35);
  color: #0e6b3a;
}
.admin-ticker-chip--alert {
  background: rgba(255, 77, 77, 0.10);
  border-color: rgba(255, 77, 77, 0.35);
  color: #8f1717;
}

.admin-ticker-chip-flip {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Fira Code', ui-monospace, monospace;
  flex: 0 0 auto;
}
.admin-ticker-chip--positive .admin-ticker-chip-flip { color: #1c8a4f; }
.admin-ticker-chip--alert    .admin-ticker-chip-flip { color: #b91c1c; }
.admin-ticker-chip-flip:hover { opacity: 0.7; }

.admin-ticker-chip-text {
  font-weight: 500;
  word-break: break-word;
  overflow-wrap: anywhere;
  /* Soft cap on chip width so very long entries don't blow out the panel. */
  max-width: 36ch;
}

.admin-ticker-chip-remove {
  appearance: none;
  border: 0;
  background: rgba(0, 0, 0, 0.06);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  flex: 0 0 auto;
}
.admin-ticker-chip-remove:hover {
  background: rgba(0, 0, 0, 0.12);
}

/* Mobile: stack the compose row vertically so the input has room. */
@media (max-width: 540px) {
  .admin-ticker-compose {
    flex-direction: column;
    align-items: stretch;
  }
  .admin-ticker-kind-toggle {
    align-self: flex-start;
  }
  .admin-ticker-add {
    width: 100%;
  }
}

/* ─── Analytics panel ──────────────────────────────────────────────────────
   OKR snapshot dashboard. Robinhood-style: numbers are the UI. Hand-rolled
   SVG charts (no Chart.js) to honor design principle #6 — type as hierarchy,
   not boxes.
*/

#admin-analytics-panel .create-section-header {
  align-items: center;
  flex-wrap: wrap;
}
#admin-analytics-panel .create-section-header > div:not(.create-section-num):not(.admin-analytics-header-actions) {
  min-width: 0;
}
#admin-analytics-panel .create-section-header h2 {
  overflow-wrap: anywhere;
}
.admin-analytics-header-actions {
  margin-left: auto;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.admin-analytics-window-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.admin-analytics-window-select {
  width: auto;
  min-width: 92px;
  padding: 6px 8px;
  font-size: 14px;
}

/* Stat tiles — no card boxes, hairline divider only between tiles */
.admin-analytics-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--air-divider, #e2e2e2);
  border-bottom: 1px solid var(--air-divider, #e2e2e2);
  margin: 12px 0 24px;
}
.admin-analytics-tile {
  padding: 16px 18px;
  border-right: 1px solid var(--air-divider, #e2e2e2);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 90px;
}
.admin-analytics-tile:nth-child(3n) { border-right: 0; }
.admin-analytics-tile:nth-child(n+4) {
  border-top: 1px solid var(--air-divider, #e2e2e2);
}
.admin-analytics-tile[data-skeleton] .admin-analytics-tile-value {
  opacity: 0.4;
}
.admin-analytics-tile-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--air-fg-mute, #5a6273);
  letter-spacing: 0.02em;
}
.admin-analytics-tile-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--air-fg, #0b1020);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.admin-analytics-tile-sub {
  font-size: 12px;
  color: var(--air-fg-mute, #5a6273);
  min-height: 14px;
}

/* Chart block */
.admin-analytics-chart-block {
  margin: 0 0 28px;
}
.admin-analytics-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 8px;
}
.admin-analytics-h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  color: var(--air-fg, #0b1020);
  letter-spacing: 0.01em;
}
.admin-analytics-chart-sub {
  font-size: 12px;
  color: var(--air-fg-mute, #5a6273);
  font-variant-numeric: tabular-nums;
}
.admin-analytics-chart {
  width: 100%;
  overflow: hidden;
  background: var(--air-surface-soft, transparent);
  border-radius: 8px;
}
.admin-analytics-chart svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Two-up: by-model + top-pages */
.admin-analytics-two-up {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin: 0 0 24px;
}
.admin-analytics-list-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-analytics-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Bar row — minimalist, label + track + value + sub */
.admin-analytics-bar-row {
  display: grid;
  grid-template-columns: minmax(110px, 1.6fr) minmax(60px, 2fr) auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "label track value"
    "sub   sub   sub";
  gap: 2px 12px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--air-divider, #e2e2e2);
  font-variant-numeric: tabular-nums;
}
.admin-analytics-bar-row:last-child { border-bottom: 0; }
.admin-analytics-bar-label {
  grid-area: label;
  font-size: 13px;
  font-weight: 500;
  color: var(--air-fg, #0b1020);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-analytics-bar-track {
  grid-area: track;
  height: 8px;
  background: var(--air-divider, #e2e2e2);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.admin-analytics-bar-fill {
  display: block;
  height: 100%;
  background: var(--air-accent, #c0a062);
  border-radius: 4px;
  transition: width 220ms ease-out;
}
.admin-analytics-bar-value {
  grid-area: value;
  font-size: 13px;
  font-weight: 600;
  color: var(--air-fg, #0b1020);
  text-align: right;
}
.admin-analytics-bar-sub {
  grid-area: sub;
  font-size: 11px;
  color: var(--air-fg-mute, #5a6273);
  margin-left: 122px;   /* aligns under the bar track on widescreens */
}

/* Referrer split — single segmented bar + inline legend */
.admin-analytics-meta-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--air-divider, #e2e2e2);
  margin-top: 8px;
}
.admin-analytics-referrer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin-analytics-referrer-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--air-fg-mute, #5a6273);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.admin-analytics-referrer-segs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}
.admin-analytics-referrer-bar {
  display: flex;
  flex: 1 1 100%;
  height: 8px;
  background: var(--air-divider, #e2e2e2);
  border-radius: 4px;
  overflow: hidden;
  min-width: 200px;
}
.admin-analytics-referrer-seg {
  height: 100%;
}
.admin-analytics-referrer-seg--direct   { background: var(--air-accent, #c0a062); }
.admin-analytics-referrer-seg--internal { background: rgba(192, 160, 98, 0.55); }
.admin-analytics-referrer-seg--external { background: rgba(70, 130, 180, 0.85); }
.admin-analytics-referrer-legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--air-fg-mute, #5a6273);
  font-variant-numeric: tabular-nums;
}
.admin-analytics-referrer-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.admin-analytics-referrer-dot--direct   { background: var(--air-accent, #c0a062); }
.admin-analytics-referrer-dot--internal { background: rgba(192, 160, 98, 0.55); }
.admin-analytics-referrer-dot--external { background: rgba(70, 130, 180, 0.85); }
.admin-analytics-empty-inline {
  font-size: 12px;
  color: var(--air-fg-mute, #5a6273);
  font-style: italic;
}

.admin-analytics-meta {
  font-size: 11px;
  color: var(--air-fg-mute, #5a6273);
  font-variant-numeric: tabular-nums;
}

.admin-analytics-deeplinks {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 12px;
}

/* Empty / error states */
.admin-analytics-empty {
  padding: 16px 0;
  font-size: 13px;
  color: var(--air-fg-mute, #5a6273);
  font-style: italic;
  text-align: center;
}
.admin-analytics-err {
  color: var(--air-color-danger, #c8332a) !important;
}

/* Mobile (≤ 720px): collapse to single column, stack header actions */
@media (max-width: 720px) {
  .admin-analytics-tiles {
    grid-template-columns: 1fr 1fr;
  }
  .admin-analytics-tile:nth-child(3n)  { border-right: 1px solid var(--air-divider, #e2e2e2); }
  .admin-analytics-tile:nth-child(2n)  { border-right: 0; }
  .admin-analytics-tile:nth-child(n+3) { border-top: 1px solid var(--air-divider, #e2e2e2); }
  .admin-analytics-two-up {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .admin-analytics-bar-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "label value"
      "track track"
      "sub   sub";
    gap: 2px 8px;
  }
  .admin-analytics-bar-sub { margin-left: 0; }
  .admin-analytics-header-actions {
    margin-left: 0;
    margin-top: 8px;
    flex-basis: 100%;
    justify-content: flex-end;
  }
}
@media (max-width: 480px) {
  .admin-analytics-tiles {
    grid-template-columns: 1fr;
  }
  .admin-analytics-tile         { border-right: 0 !important; }
  .admin-analytics-tile:nth-child(n+2) { border-top: 1px solid var(--air-divider, #e2e2e2); }
}

/* Funnel block (used → applied → deployed) */
.admin-analytics-funnel {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin: 0 0 28px;
  padding: 16px 0;
  border-bottom: 1px solid var(--air-divider, #e2e2e2);
}
.admin-analytics-funnel-step {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 12px;
  border-left: 2px solid var(--air-accent, #c0a062);
  min-width: 0;
}
.admin-analytics-funnel-step[data-step="applied"] {
  border-left-color: rgba(192, 160, 98, 0.55);
}
.admin-analytics-funnel-step[data-step="deployed"] {
  border-left-color: rgba(70, 130, 180, 0.85);
}
.admin-analytics-funnel-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--air-fg-mute, #5a6273);
}
.admin-analytics-funnel-value {
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--air-fg, #0b1020);
  line-height: 1.1;
}
.admin-analytics-funnel-sub {
  font-size: 12px;
  color: var(--air-fg-mute, #5a6273);
  min-height: 14px;
}
.admin-analytics-funnel-arrow {
  align-self: center;
  font-size: 18px;
  color: var(--air-fg-mute, #5a6273);
  font-weight: 600;
  flex: 0 0 auto;
}

@media (max-width: 720px) {
  .admin-analytics-funnel {
    flex-direction: column;
    gap: 8px;
  }
  .admin-analytics-funnel-arrow { transform: rotate(90deg); align-self: flex-start; padding-left: 12px; }
}

/* =================================================================
   Context rules panel — tier (hot/warm/cold/off) + weights per feature
   Mirrors the mockup at /tmp/ctx-rules-mock/index.html.
   Honors carnegie-design-principles: flat surfaces, hairline dividers,
   one primary action, segmented control for tier, gold override-dot.
   ================================================================= */

#admin-context-rules-panel {
  /* Categorical tones for tier pills */
  --ctxr-hot:  #e84a4a;
  --ctxr-warm: #e0a020;
  --ctxr-cold: #4a7ae0;
  --ctxr-off:  #9a9a9a;
  --ctxr-accent: #c0a062;
  --ctxr-divider: var(--air-divider, rgba(11, 16, 32, 0.10));
  --ctxr-divider-strong: var(--air-divider-strong, rgba(11, 16, 32, 0.18));
}

.ctxrules-source {
  font-size: 13px;
  color: var(--air-color-text-muted, #6b6b6b);
  margin: 0 0 16px 0;
}
.ctxrules-source[data-source="kv"]::before {
  content: ""; display: inline-block;
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--ctxr-accent);
  margin-right: 6px; vertical-align: 2px;
}

/* Feature picker pills */
.ctxrules-features {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: 0 0 16px 0;
}
.ctxrules-feature-pill {
  font: inherit; font-size: 13px; font-weight: 500;
  padding: 10px 14px; border-radius: 9999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--air-color-text-primary, #0b1020);
  cursor: pointer; white-space: nowrap;
  min-height: 44px;  /* WCAG 2.5.5 */
}
.ctxrules-feature-pill[aria-pressed="true"] {
  border-color: var(--air-color-text-primary, #0b1020);
  background: rgba(11,16,32,0.04);
}
/* Inherited agents (no own rule entry — uses upstream feature config) get
   a softer treatment so admins can tell at a glance which agents have
   dedicated config vs which ride a shared rule. */
.ctxrules-feature-pill--inherited {
  opacity: 0.62;
  font-style: italic;
}
.ctxrules-feature-pill--inherited[aria-pressed="true"] {
  opacity: 1;
}
/* Stat row — flat, no boxes */
.ctxrules-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 12px 0 16px 0;
  border-bottom: 1px solid var(--ctxr-divider);
  margin-bottom: 16px;
}
.ctxrules-stat-lbl { font-size: 13px; color: var(--air-color-text-muted, #6b6b6b); }
.ctxrules-stat-val { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.ctxrules-stat-val .ctxrules-stat-unit {
  font-size: 13px; font-weight: 500;
  color: var(--air-color-text-muted, #6b6b6b);
  margin-left: 4px;
}

/* Source rows — Apple-Settings flat cell pattern */
.ctxrules-sources { display: flex; flex-direction: column; }
.ctxrules-source-cell {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ctxr-divider);
  min-width: 0;
}
.ctxrules-source-cell:last-child { border-bottom: none; }

/* Column-header row (Source / Tier / Weight) */
.ctxrules-source-cell--header {
  padding: 6px 0 8px 0;
  border-bottom: 1px solid var(--ctxr-divider-strong);
}
.ctxrules-col-lbl {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--air-color-text-muted, #6b6b6b);
}
.ctxrules-col-unit {
  font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0;
  color: var(--air-color-text-faint, #9a9a9a);
}

/* Scoring-knob name column with stacked hint + behaviour line */
.ctxrules-scoring-name {
  flex-direction: column; align-items: flex-start; gap: 2px;
}
.ctxrules-knob-hint {
  display: inline-flex; align-items: center; flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--air-color-text-muted, #6b6b6b);
  margin-top: 2px;
}
.ctxrules-knob-range {
  font-family: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
}
.ctxrules-knob-default {
  font-family: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  padding: 1px 6px;
  border: 1px solid var(--ctxr-divider);
  border-radius: 999px;
  font-size: 11px;
}
.ctxrules-knob-behaviour {
  font-size: 12px;
  color: var(--air-color-text-faint, #9a9a9a);
  font-style: italic;
  margin-top: 2px;
}
.ctxrules-source-name {
  font-size: 16px; font-weight: 500;
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
}
.ctxrules-source-key {
  font-family: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--air-color-text-faint, #9a9a9a);
}

/* Segmented control: Hot / Warm / Cold / Off */
.ctxrules-seg {
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 100%;
  border: 1px solid var(--ctxr-divider-strong);
  border-radius: 9999px;
  overflow: hidden;
  background: var(--air-color-surface, #fff);
}
.ctxrules-seg button {
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 10px 12px;
  border: 0; background: transparent; cursor: pointer;
  color: var(--air-color-text-muted, #6b6b6b);
  min-width: 44px;  /* WCAG 2.5.5 — tap target */
  min-height: 44px;
}
.ctxrules-seg button[aria-pressed="true"][data-tone="hot"]  { background: var(--ctxr-hot);  color: #fff; }
.ctxrules-seg button[aria-pressed="true"][data-tone="warm"] { background: var(--ctxr-warm); color: #1a1206; }
.ctxrules-seg button[aria-pressed="true"][data-tone="cold"] { background: var(--ctxr-cold); color: #fff; }
.ctxrules-seg button[aria-pressed="true"][data-tone="off"]  { background: var(--ctxr-off);  color: #fff; }

/* Weight stepper */
.ctxrules-weight {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 14px;
}
.ctxrules-weight button {
  width: 36px; height: 36px;
  border: 1px solid var(--ctxr-divider-strong);
  background: transparent; border-radius: 999px;
  font-size: 16px; line-height: 1; cursor: pointer;
  color: var(--air-color-text-primary, #0b1020);
  font-family: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  position: relative;
}
/* 44×44 hit area without growing the visual size */
.ctxrules-weight button::before {
  content: ""; position: absolute;
  inset: -4px;
}
.ctxrules-weight input {
  width: 56px; text-align: center;
  font-family: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 16px;  /* iOS zoom guard (rule #3) */
  font-variant-numeric: tabular-nums;
  border: 0; border-bottom: 1px solid var(--ctxr-divider-strong);
  background: transparent;
  color: var(--air-color-text-primary, #0b1020);
  padding: 4px 0;
}
.ctxrules-weight input:focus {
  outline: none;
  background: rgba(11,16,32,0.05);
  border-radius: 8px;
}
.ctxrules-weight input:disabled { opacity: 0.4; }

/* Knob row */
.ctxrules-knobs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--ctxr-divider);
  margin-bottom: 16px;
}
.ctxrules-knob-lbl { font-size: 13px; color: var(--air-color-text-muted, #6b6b6b); margin-bottom: 4px; }
.ctxrules-knob-val { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ctxrules-knob input {
  margin-top: 8px;
  width: 100%; max-width: 160px; font-size: 16px;
  padding: 10px 12px;
  border: 1px solid var(--ctxr-divider-strong);
  border-radius: 8px;
  background: transparent;
  color: var(--air-color-text-primary, #0b1020);
  font-family: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  min-height: 44px;
}

/* Scoring (collapsible) */
.ctxrules-scoring {
  margin-top: 8px;
  border-top: 1px solid var(--ctxr-divider);
}
.ctxrules-scoring > summary {
  list-style: none; cursor: pointer;
  padding: 14px 0;
  font-size: 16px; font-weight: 600;
  border-bottom: 1px solid var(--ctxr-divider);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  min-height: 44px;
}
.ctxrules-scoring > summary::-webkit-details-marker { display: none; }
.ctxrules-scoring > summary::after {
  content: "▾"; font-size: 13px;
  color: var(--air-color-text-muted, #6b6b6b);
  transition: transform 200ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .ctxrules-scoring > summary::after { transition: none; }
}
.ctxrules-scoring[open] > summary::after { transform: rotate(180deg); }
.ctxrules-scoring-meta {
  font-size: 13px; color: var(--air-color-text-muted, #6b6b6b); font-weight: 500;
}
.ctxrules-scoring-body { padding: 16px 0 0 0; }
.ctxrules-scoring-body .ctxrules-reset-link { margin-top: 8px; }

/* Quiet danger zone — Reset lives here, not in the sticky action bar */
.ctxrules-danger-zone {
  padding: 12px 0 8px;
  margin-top: 8px;
}

/* Actions row — flat at the bottom of the panel. R7: NEVER use position:sticky/fixed
   bottom on cockpit pages — it collides with the .share-ann-toolbar (bottom:12px)
   and WhatsApp FAB (bottom:19px). The page-level .admin-main padding-bottom
   already reserves the safe-area room to scroll past the FAB zone. */
.ctxrules-actions {
  display: flex; align-items: center; gap: 12px;
  margin-top: 16px;
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0));
  background: var(--air-color-surface, #fff);
  border-top: 1px solid var(--ctxr-divider);
}
.ctxrules-actions > .create-admin-status {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ctxrules-reset-link {
  font: inherit; font-size: 14px; font-weight: 500;
  background: transparent; border: 0; padding: 8px 0;
  color: var(--air-color-danger, #b3261e);
  text-decoration: underline;
  cursor: pointer;
  min-height: 44px;
}
.ctxrules-reset-link:hover { opacity: 0.8; }

/* ─── Stage 3: bundle-tree view + diff modal ─────────────────────── */

/* `[hidden]` must beat the explicit `display:` rules below — otherwise both
   view-mode panes show simultaneously AND the diff modal renders on load. */
#admin-context-rules-panel [hidden] { display: none !important; }

.ctxrules-view-mode {
  display: flex;
  gap: 4px;
  margin: 12px 0 14px;
  padding: 4px;
  background: var(--air-color-surface, #f3f3f5);
  border-radius: 10px;
  width: fit-content;
  max-width: 100%;
  flex-wrap: wrap;
}
.ctxrules-view-tab {
  font: inherit; font-size: 13px; font-weight: 500;
  padding: 8px 14px;
  min-height: 36px;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: var(--air-color-text-muted, #555);
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.ctxrules-view-tab.is-active {
  background: var(--air-color-bg, #fff);
  color: var(--air-color-text, #111);
  border: 1px solid var(--ctxr-divider, rgba(0,0,0,0.10));
}
.ctxrules-view-tab:hover:not(.is-active) { color: var(--air-color-text, #111); }

.ctxrules-tree {
  display: flex; flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.ctxrules-tree__empty {
  font-size: 13px;
  color: var(--air-color-text-muted, #6b6b6b);
  padding: 12px;
  background: var(--air-color-surface, #f6f6f8);
  border-radius: 8px;
}

.ctxrules-bundle {
  border: 1px solid var(--ctxr-divider, rgba(0,0,0,0.08));
  border-radius: 10px;
  overflow: hidden;
  background: var(--air-color-bg, #fff);
}
.ctxrules-bundle__header {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  min-height: 48px;
  background: var(--air-color-surface, #f9f9fb);
  border: none;
  border-bottom: 1px solid var(--ctxr-divider, rgba(0,0,0,0.06));
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.ctxrules-bundle[data-expanded="false"] .ctxrules-bundle__header {
  border-bottom: none;
}
.ctxrules-bundle__header:hover { background: var(--ctxr-divider, rgba(0,0,0,0.04)); }
.ctxrules-bundle__chev {
  width: 14px;
  font-size: 11px;
  color: var(--air-color-text-muted, #888);
}
.ctxrules-bundle__dot {
  width: 12px; height: 12px;
  border-radius: 999px;
  flex-shrink: 0;
}
.ctxrules-bundle__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--air-color-text, #111);
  flex-shrink: 0;
}
.ctxrules-bundle__count {
  font-size: 12px;
  color: var(--air-color-text-muted, #888);
  margin-left: auto;
  text-align: right;
}

.ctxrules-bundle__body {
  display: flex; flex-direction: column;
  padding: 4px 0;
}

.ctxrules-tree-row {
  display: grid;
  grid-template-columns: 14px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 32px;  /* indent under bundle header */
  min-height: 44px;
  background: transparent;
  border: none;
  border-top: 1px solid var(--ctxr-divider, rgba(0,0,0,0.04));
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: background 120ms;
}
.ctxrules-tree-row:first-child { border-top: none; }
.ctxrules-tree-row:hover { background: var(--ctxr-divider, rgba(0,0,0,0.03)); }
.ctxrules-tree-row.is-selected {
  background: rgba(72, 122, 224, 0.08);
}
.ctxrules-tree-row__dot {
  width: 10px; height: 10px;
  border-radius: 999px;
}
.ctxrules-tree-row__name {
  font-size: 13px;
  color: var(--air-color-text, #111);
  word-break: break-word;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.ctxrules-tree-row__layman {
  font-weight: 600;
  font-size: 13px;
}
.ctxrules-tree-row__rawid {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  color: var(--air-color-text-muted, #888);
  opacity: 0.75;
}
.ctxrules-tree-row__summary {
  display: flex; gap: 4px;
  flex-shrink: 0;
}
.ctxr-pill {
  display: inline-flex; align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.ctxr-pill--hot  { background: rgba(232, 74, 74, 0.15);   color: #c93333; }
.ctxr-pill--warm { background: rgba(224, 160, 32, 0.18);  color: #8a5e08; }
.ctxr-pill--cold { background: rgba(72, 122, 224, 0.15);  color: #2c5cc4; }
.ctxr-pill--off  { background: rgba(128, 128, 128, 0.12); color: #666; }

.ctxrules-tree-row__deeplink {
  font-size: 14px;
  color: var(--air-color-text-muted, #aaa);
}

/* Right pane: per-source-across-features detail */
.ctxrules-source-detail {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--ctxr-divider, rgba(0,0,0,0.08));
  border-radius: 10px;
  background: var(--air-color-bg, #fff);
}
.ctxrules-source-detail__empty {
  font-size: 13px;
  color: var(--air-color-text-muted, #888);
  margin: 0;
}
.ctxrules-source-detail__header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.ctxrules-source-detail__dot {
  width: 12px; height: 12px;
  border-radius: 999px;
}
.ctxrules-source-detail__title {
  font-size: 16px;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  margin: 0;
  word-break: break-all;
}
.ctxrules-source-detail__bundle {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ctxrules-source-detail__deeplink-wrap {
  margin-left: auto;
}
.ctxrules-source-detail__deeplink {
  font-size: 13px;
  color: var(--air-color-text-muted, #666);
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
}
.ctxrules-source-detail__hint {
  font-size: 12px;
  color: var(--air-color-text-muted, #888);
  margin: 0 0 10px;
}
.ctxrules-detail-list {
  display: flex; flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.ctxrules-detail-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--air-color-surface, #f9f9fb);
  border-radius: 8px;
  min-height: 48px;
}
.ctxrules-detail-row__feature {
  font-size: 13px;
  font-weight: 500;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-all;
}
.ctxrules-detail-bulk {
  display: flex; gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--air-color-text-muted, #666);
}
.ctxrules-detail-bulk__btn {
  font: inherit; font-size: 12px;
  padding: 10px 12px;
  min-height: 44px;
  border: 1px solid var(--ctxr-divider, rgba(0,0,0,0.10));
  border-radius: 6px;
  background: var(--air-color-bg, #fff);
  cursor: pointer;
}
.ctxrules-detail-bulk__btn:hover { background: var(--ctxr-divider, rgba(0,0,0,0.04)); }
.ctxrules-detail-bulk__btn--reset {
  color: #c93333;
  border-color: rgba(232, 74, 74, 0.30);
}

/* ─── Change-diff preview modal ──────────────────────────────────── */

.ctxrules-diff-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Respect the [hidden] attribute. Without this, `display: flex` above wins
   over the UA `[hidden]{display:none}` and the modal renders on page load. */
.ctxrules-diff-modal[hidden] { display: none !important; }
.ctxrules-diff-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}
.ctxrules-diff-modal__panel {
  position: relative;
  background: var(--air-color-bg, #fff);
  border-radius: 14px;
  padding: 22px;
  max-width: 640px;
  width: calc(100% - 32px);
  /* Use 100dvh so mobile browsers (iOS Safari) account for the dynamic
     toolbar height — 100vh leaves the modal clipped under the URL bar. */
  max-height: calc(100dvh - 64px);
  overflow-y: auto;
  box-shadow: 0 20px 80px rgba(0,0,0,0.30);
}
/* Ensure modal action buttons meet 44×44 touch-target on mobile. */
.ctxrules-diff-modal__actions .air-btn {
  min-height: 44px;
  min-width: 44px;
}
.ctxrules-diff-modal__panel h3 {
  margin: 0 0 4px;
  font-size: 17px;
}
.ctxrules-diff-modal__meta {
  font-size: 13px;
  color: var(--air-color-text-muted, #666);
  margin: 0 0 12px;
}
.ctxrules-diff-list {
  display: flex; flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.ctxrules-diff-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--air-color-surface, #f6f6f8);
  border-radius: 8px;
  font-size: 13px;
  flex-wrap: wrap;
}
.ctxrules-diff-row__where {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--air-color-text-muted, #666);
  display: flex; gap: 4px;
  flex-wrap: wrap;
}
.ctxrules-diff-row__feature { color: var(--air-color-text, #111); font-weight: 600; }
.ctxrules-diff-row__source  { color: var(--air-color-text, #222); }
.ctxrules-diff-row__attr    { color: var(--air-color-text-muted, #888); }
.ctxrules-diff-row__change {
  display: flex; gap: 8px; align-items: center;
  margin-left: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 600;
}
.ctxrules-diff-row__before {
  color: #c93333;
  text-decoration: line-through;
}
.ctxrules-diff-row__after  { color: #2c8a2c; }
.ctxrules-diff-row__arrow  { color: var(--air-color-text-muted, #999); }
.ctxrules-diff-modal__actions {
  display: flex; gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* Mobile tightening for the diff modal + bulk row */
@media (max-width: 480px) {
  .ctxrules-diff-row { flex-direction: column; align-items: flex-start; }
  .ctxrules-diff-row__change { margin-left: 0; }
  .ctxrules-bundle__count    { width: 100%; text-align: left; margin-left: 22px; }
  .ctxrules-tree-row         { grid-template-columns: 14px 1fr auto; padding-left: 22px; }
  .ctxrules-tree-row__deeplink { display: none; }
  .ctxrules-detail-row       { grid-template-columns: 1fr; }
}

/* Dirty pill on Save button */
.ctxrules-actions .air-btn-primary[data-dirty="true"]::after {
  content: ""; display: inline-block;
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--ctxr-accent);
  margin-left: 8px; vertical-align: 1px;
}
/* Mobile (≤ 480 px) */
@media (max-width: 480px) {
  .ctxrules-stats { grid-template-columns: 1fr 1fr; }
  .ctxrules-stats > div:last-child { grid-column: span 2; }

  .ctxrules-knobs { grid-template-columns: 1fr; }

  /* Stack source cell on narrow screens — name on top, controls below */
  .ctxrules-source-cell {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .ctxrules-source-cell > .ctxrules-seg {
    justify-self: stretch;
    width: 100%;
    justify-content: space-between;
  }
  .ctxrules-source-cell > .ctxrules-seg button { flex: 1; min-width: 0; padding: 10px 8px; }
  .ctxrules-source-cell > .ctxrules-weight {
    justify-self: start;
  }

  .ctxrules-features {
    overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .ctxrules-features::-webkit-scrollbar { display: none; }
  .ctxrules-features > .ctxrules-feature-pill { scroll-snap-align: start; }

  /* On mobile, drop sticky on the action bar — it competes with the
     always-floating WhatsApp FAB + annotations toolbar. Static bar with
     generous bottom space (and admin-main's padding-bottom) gives the
     user a clear unobstructed save target above the floating chrome. */
  .ctxrules-actions {
    position: static;
    padding: 16px 0 24px;
    border-top: 1px solid var(--ctxr-divider);
  }
  /* Hide the column-header row on mobile — labels are redundant when each
     row is already stacked vertically with its own context. */
  .ctxrules-source-cell--header { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
 * ADMIN NAV + SHELL — left collapsible nav, split-pane context-rules, legend
 * Added 2026-05-26 (Kenneth: "we also need a navigation panel on the left").
 * Mockup ref: /tmp/admin-nav-mock/index.html.
 * ──────────────────────────────────────────────────────────────────────── */

/* Bundle/tier color tokens (mirror mockup). The existing app.js renders
   inline `style="background:<color>"` for bundle dots from server meta,
   so these tokens are used by the LEGEND chips + the new tier dots only. */
:root {
  --b-brand:      #9b59b6;
  --b-commercial: #f39c12;
  --b-partner:    #3498db;
  --b-page:       #2ecc71;
  --b-template:   #1abc9c;
  --b-reference:  #f1c40f;
  --b-system:     #8a8a8a;
  --t-hot:  #d63a3a;
  --t-warm: #f39c12;
  --t-cold: #3498db;
  --t-off:  #8a8a8a;
}

/* ── Admin shell grid ─────────────────────────────────────────────── */
.admin-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  align-items: start;
  /* shell lives inside .admin-main which already has padding-bottom for the
     bottom-safe-area + WhatsApp FAB clear. Don't double-pad. */
  margin: 0 auto;
  max-width: 1280px;
  transition: grid-template-columns 0.2s ease;
}
.admin-shell.is-nav-collapsed { grid-template-columns: 56px 1fr; }
.admin-shell[hidden] { display: none; }

.admin-shell-main {
  min-width: 0; /* allow children to shrink inside grid */
  padding: 0 var(--s-5, 24px) 0 var(--s-6, 32px);
}

/* ── Left nav ─────────────────────────────────────────────────────── */
.admin-nav {
  background: var(--air-surface, #ffffff);
  border-right: 1px solid var(--air-divider, rgba(11,16,32,0.10));
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  /* Sit BELOW the news ticker (36px sticky bar at the top of every page).
     Without this offset, the first 36px of the nav slides under the ticker
     and the chevron/header is unreachable. Bug found 2026-05-26. */
  top: var(--news-ticker-height, 36px);
  align-self: start;
  /* Same offset has to come off max-height or the nav extends past the bottom
     of the viewport and the last items sit below the fold. */
  max-height: calc(100vh - var(--news-ticker-height, 36px));
  overflow-y: auto;
}
.admin-nav-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px 16px;
  border-bottom: 1px solid var(--air-divider, rgba(11,16,32,0.10));
  margin-bottom: 12px;
}
.admin-nav-title {
  font-weight: 700; font-size: 13px;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--air-text-muted, rgba(11,16,32,0.62));
}
.is-nav-collapsed .admin-nav-title { display: none; }
.is-nav-collapsed .admin-nav-header {
  padding: 0 12px 12px;
  justify-content: center;
}

.admin-nav-toggle {
  width: 32px; height: 32px;
  background: transparent; border: none; cursor: pointer;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--air-text-muted, rgba(11,16,32,0.62));
  padding: 0;
}
.admin-nav-toggle:hover {
  background: var(--air-divider, rgba(11,16,32,0.06));
  color: var(--air-text-primary, #0b1020);
}
.admin-nav-toggle-icon { transition: transform 0.2s ease; }
.is-nav-collapsed .admin-nav-toggle-icon { transform: rotate(180deg); }
/* (Removed 2026-05-26: chevron rotate-on-mobile-open. Shoelace drawer
   has its own close affordance now — the chevron only flips for
   desktop collapse.) */

.admin-nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 24px;
  text-decoration: none;
  color: var(--air-text-primary, #0b1020);
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  cursor: pointer;
  text-align: left;
  width: 100%;
  min-height: 44px;
  font-size: 14px; font-weight: 500;
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
  position: relative;
}
.admin-nav-item:hover { background: rgba(11,16,32,0.04); }
.admin-nav-item.is-active {
  background: rgba(11,16,32,0.06);
  border-left-color: var(--air-accent, #c0a062);
  font-weight: 600;
}
.admin-nav-icon {
  width: 20px; height: 20px; flex: 0 0 20px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--air-text-muted, rgba(11,16,32,0.62));
}
.admin-nav-item.is-active .admin-nav-icon { color: var(--air-accent, #c0a062); }
.admin-nav-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.is-nav-collapsed .admin-nav-label { display: none; }
.is-nav-collapsed .admin-nav-item {
  padding: 10px 12px;
  justify-content: center;
}

.admin-nav-badge {
  font-size: 10px; font-weight: 600;
  background: var(--air-accent, #c0a062);
  color: #0b1020;
  padding: 1px 6px;
  border-radius: 9999px;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.is-nav-collapsed .admin-nav-badge { display: none; }

/* Tooltip on hover when collapsed */
.is-nav-collapsed .admin-nav-item[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute; left: 60px; top: 50%;
  transform: translateY(-50%);
  background: var(--air-text-primary, #0b1020);
  color: var(--air-bg, #fbfbfa);
  padding: 6px 10px; border-radius: 6px;
  font-size: 12px; font-weight: 500;
  white-space: nowrap;
  z-index: 200;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

/* (Removed 2026-05-26: legacy custom mobile drawer backdrop + mobile-nav-bar
   styles. Shoelace <sl-drawer> now owns the mobile drawer and its backdrop,
   and the new .admin-topbar block (below the @media (max-width: 768px)
   rule) replaces .mobile-nav-bar.) */

/* ── Context-rules legend (top of panel) ──────────────────────────── */
.ctxr-legend {
  margin: 16px 0 0;
  background: var(--air-surface, #ffffff);
  border: 1px solid var(--air-divider, rgba(11,16,32,0.10));
  border-radius: 16px;
  padding: 16px;
}
.ctxr-legend summary {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 14px; font-weight: 600;
  color: var(--air-text-primary, #0b1020);
  min-height: 28px;
}
.ctxr-legend summary::-webkit-details-marker { display: none; }
.ctxr-legend summary::after {
  content: "▾";
  color: var(--air-text-muted, rgba(11,16,32,0.62));
  font-size: 12px;
  transition: transform 0.2s ease;
}
.ctxr-legend:not([open]) summary::after { transform: rotate(-90deg); }
.ctxr-legend-body {
  margin-top: 16px;
  display: grid;
  gap: 16px;
}
.ctxr-legend-row { display: grid; gap: 8px; }
.ctxr-legend-row h4 {
  margin: 0;
  font-size: 11px; font-weight: 600;
  color: var(--air-text-muted, rgba(11,16,32,0.62));
  letter-spacing: 0.06em; text-transform: uppercase;
}
.ctxr-legend-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.ctxr-legend-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500;
  padding: 6px 10px;
  border-radius: 9999px;
  background: var(--air-divider, rgba(11,16,32,0.08));
  color: var(--air-text-primary, #0b1020);
}
.ctxr-legend-chip .swatch {
  width: 10px; height: 10px; border-radius: 50%;
  flex: 0 0 10px;
}
.ctxr-legend-chip .swatch.tier-hot  { background: var(--t-hot); }
.ctxr-legend-chip .swatch.tier-warm { background: var(--t-warm); }
.ctxr-legend-chip .swatch.tier-cold { background: var(--t-cold); }
.ctxr-legend-chip .swatch.tier-off  { background: var(--t-off); }
.ctxr-legend-chip .swatch.b-brand      { background: var(--b-brand); }
.ctxr-legend-chip .swatch.b-commercial { background: var(--b-commercial); }
.ctxr-legend-chip .swatch.b-partner    { background: var(--b-partner); }
.ctxr-legend-chip .swatch.b-page       { background: var(--b-page); }
.ctxr-legend-chip .swatch.b-template   { background: var(--b-template); }
.ctxr-legend-chip .swatch.b-reference  { background: var(--b-reference); }
.ctxr-legend-chip .swatch.b-system     { background: var(--b-system); }
.ctxr-legend-defn {
  font-size: 13px; line-height: 1.55;
  color: var(--air-text-muted, rgba(11,16,32,0.62));
  margin: 0;
}
.ctxr-legend-defn strong {
  color: var(--air-text-primary, #0b1020);
  font-weight: 600;
}
.ctxr-legend-defn code {
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 12px;
  background: var(--air-divider, rgba(11,16,32,0.08));
  padding: 2px 6px;
  border-radius: 4px;
}

/* ── Split pane: tree + detail side-by-side on desktop ──────────── */
.ctxrules-split {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
  margin-top: 24px;
  align-items: start;
}
@media (max-width: 880px) {
  .ctxrules-split { grid-template-columns: 1fr; gap: 12px; }
}

/* Restyle existing tree bundle headers to match mockup (44+ tap targets,
   left-border accent, flat). Don't rename — JS depends on these class names. */
.ctxrules-bundle__header { min-height: 48px; }
.ctxrules-tree-row { min-height: 44px; }

/* ── Mobile (≤768px) — Shoelace-owned drawer + custom topbar ─────────
   Strategy: on mobile, the desktop sidebar is hidden completely and
   the nav becomes a Shoelace <sl-drawer>. We do NOT custom-position
   any drawer ourselves — Shoelace handles z-index, focus trap,
   backdrop, swipe-to-close. We only hide/show our shell pieces. */
@media (max-width: 768px) {
  .admin-topbar { display: flex; }
  .admin-shell {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
  .admin-shell-main {
    padding: 0 16px 24px;
  }

  /* Desktop sidebar is hidden on mobile; Shoelace drawer takes over. */
  .admin-shell .admin-nav { display: none; }

  /* Section heads shrink on mobile */
  .create-admin-section h2 { font-size: 22px; }

  /* Context-rules: split collapses, detail goes flat */
  .ctxrules-split { grid-template-columns: 1fr; gap: 12px; }
  .ctxrules-source-detail {
    border: none;
    border-radius: 0;
    border-top: 1px solid var(--ctxr-divider, var(--air-divider, rgba(11,16,32,0.10)));
    padding-left: 0;
    padding-right: 0;
    background: transparent;
  }

  /* ≥44px tap targets on the segmented tier control */
  .ctxrules-seg { width: 100%; padding: 3px; }
  .ctxrules-seg button {
    flex: 1;
    min-height: 44px;
    font-size: 13px;
    padding: 10px 4px;
  }

  /* Weight stepper: full-width, 44px controls, 16px input */
  .ctxrules-weight {
    width: 100%;
    max-width: 320px;
    height: 44px;
  }
  .ctxrules-weight button { width: 44px; height: 44px; font-size: 20px; }
  .ctxrules-weight input { flex: 1; height: 44px; font-size: 16px; }

  /* Legend chip wrap tightens */
  .ctxr-legend-chips { gap: 6px; }
  .ctxr-legend-chip { font-size: 12px; padding: 6px 10px; }
}

/* ── Admin top bar (mobile only — hidden on desktop) ───────────────
   IMPORTANT cascade note (Kenneth 2026-05-27): this block sits AFTER
   the @media (max-width: 768px) rule above that promotes .admin-topbar
   to display:flex. If we set `display: none` here as the default, the
   later same-specificity rule wins and the hamburger never shows on
   mobile. Instead, default to display:flex (matching the mobile rule
   it's paired with) and hide it on desktop via @media (min-width:769px). */
.admin-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--air-divider, rgba(11,16,32,0.10));
  background: var(--air-surface, #fff);
  /* Was position:sticky but sticky inside a flex column with no
     defined scroll container is unreliable on mobile. Plain relative
     puts it at the top of <main>, which is what we want — the news
     ticker is the only thing above it. */
  position: relative;
  z-index: 50;
}
.admin-topbar[hidden] { display: none !important; }
@media (min-width: 769px) {
  .admin-topbar { display: none; }
}
.admin-topbar-crumb {
  font: 600 15px/1 'DM Sans', system-ui, sans-serif;
  color: var(--air-text, #0b1020);
}
.admin-topbar-hamburger {
  width: 44px; height: 44px;
  border: 1px solid var(--air-divider, rgba(11,16,32,0.10));
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--air-text, #0b1020);
  padding: 0;
  flex: 0 0 44px;
}
.admin-topbar-hamburger:hover {
  background: rgba(11,16,32,0.04);
}
.admin-topbar-hamburger:active {
  background: rgba(11,16,32,0.08);
}

/* ── Mobile nav drawer (plain HTML, no library) ──────────────────────
   Sits offscreen by default. .is-open slides it in from the left.
   Sibling .admin-nav-drawer-backdrop dims the page behind it. */
.admin-nav-drawer {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: min(280px, 86vw);
  background: var(--air-surface, #fff);
  box-shadow: 4px 0 16px rgba(0,0,0,0.18);
  z-index: 9999;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.22s ease;
  /* Hidden on desktop — only shown when mobile media query promotes
     .admin-topbar to display:flex (i.e. ≤768px). */
  visibility: hidden;
}
.admin-nav-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
}
.admin-nav-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.admin-nav-drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
/* Drawer is moot on desktop — hide both pieces entirely so they can't
   eat clicks or paint behind other elements. */
@media (min-width: 769px) {
  .admin-nav-drawer,
  .admin-nav-drawer-backdrop { display: none !important; }
}
.admin-drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
}

/* Close (×) affordance inside the mobile drawer. Matches 44×44 touch
   target. Click handler in app.js routes to drawer-backdrop click so we
   re-use the existing close logic. */
.admin-nav-drawer-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 9999px;
  border: 1px solid var(--air-border, #d6e0e5);
  background: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
}
.admin-drawer-nav .admin-drawer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  min-height: 48px;
  font: 500 15px/1.2 'DM Sans', system-ui, sans-serif;
  color: var(--air-text, #0b1020);
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  text-align: left;
  text-decoration: none;     /* anchors used on /admin/agents (cloned from <a>) had browser-default underline */
  cursor: pointer;
  width: 100%;
}
.admin-drawer-nav .admin-drawer-item:hover {
  background: rgba(11,16,32,0.04);
}
.admin-drawer-nav .admin-drawer-item.is-active {
  background: rgba(192,160,98,0.10);
  border-left-color: var(--air-accent, #c0a062);
  color: var(--air-text, #0b1020);
}
.admin-drawer-nav .admin-drawer-item .admin-nav-icon {
  display: inline-flex;
  width: 20px; height: 20px;
  flex: 0 0 20px;
  color: var(--air-text-muted, rgba(11,16,32,0.55));
}
.admin-drawer-nav .admin-drawer-item.is-active .admin-nav-icon {
  color: var(--air-accent, #c0a062);
}

/* Guard rule: hidden attribute MUST beat .admin-shell display:grid */
.admin-shell[hidden] { display: none !important; }

/* ─── Templates panel (HTML 0→1 generator) ───────────────────────────────── */
.admin-templates-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 18px 0 22px;
}
.admin-tpl-row {
  background: var(--air-surface, #fff);
  border: 1px solid var(--air-divider, rgba(11,16,32,0.10));
  border-radius: 14px;
  padding: 18px 20px;
}
.admin-tpl-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.admin-tpl-row-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.admin-tpl-row-title strong {
  font-size: 18px;
  letter-spacing: -0.02em;
  text-transform: capitalize;
}
.admin-tpl-mode {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--air-fg-mute, rgba(11,16,32,0.62));
  padding: 3px 8px;
  border: 1px solid var(--air-divider, rgba(11,16,32,0.10));
  border-radius: 999px;
}
.admin-tpl-row-status {
  font-size: 13px;
  color: var(--air-fg-mute, rgba(11,16,32,0.62));
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.admin-tpl-row-status.is-active span { color: #1f8a4d; }
.admin-tpl-row-status.is-disabled span { color: #b35a00; }
.admin-tpl-row-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.admin-tpl-slot {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin-tpl-slot-meta {
  font-size: 13px;
  color: var(--air-fg-mute, rgba(11,16,32,0.62));
}
.admin-tpl-slot-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.admin-tpl-empty {
  color: var(--air-fg-mute, rgba(11,16,32,0.62));
  font-style: italic;
  font-size: 13px;
}
.admin-tpl-blocks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--air-divider, rgba(11,16,32,0.10));
}
.admin-tpl-block-chip {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(11,16,32,0.04);
  border: 1px solid var(--air-divider, rgba(11,16,32,0.10));
  color: var(--air-fg-mute, rgba(11,16,32,0.62));
}
.admin-tpl-block-chip.is-required {
  background: rgba(40, 90, 150, 0.08);
  border-color: rgba(40, 90, 150, 0.3);
  color: rgb(40, 90, 150);
}
.admin-tpl-danger {
  color: #b3261e !important;
}
.admin-tpl-danger:hover {
  background: rgba(179, 38, 30, 0.06) !important;
  border-color: rgba(179, 38, 30, 0.3) !important;
}
#admin-templates-status[data-tone="err"] { color: #b3261e; }
#admin-templates-status[data-tone="ok"]  { color: #1f8a4d; }

/* ─── Generator config sub-row (per-category model knobs) ──────────────── */
.admin-tpl-slot-config {
  /* Span full width — the template + notes slots sit in a 2-col grid above. */
  grid-column: 1 / -1;
  padding-top: 12px;
  border-top: 1px dashed var(--air-divider, rgba(11,16,32,0.10));
}
.admin-tpl-slot-config-legend {
  /* Fieldset legend visual; the actual element is a <strong> or <div>. */
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--air-fg-mute, rgba(11,16,32,0.62));
  margin-bottom: 8px;
}
.admin-tpl-config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin: 8px 0 12px;
}
.admin-tpl-config-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--air-fg-mute, rgba(11,16,32,0.62));
}
.admin-tpl-config-field span {
  font-weight: 500;
  letter-spacing: 0.01em;
}
.admin-tpl-config-field .air-input {
  /* R4: inputs must be ≥16px so iOS Safari doesn't zoom. */
  font-size: 16px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--air-divider, rgba(11,16,32,0.18));
  border-radius: 6px;
  color: var(--air-fg, #0b1020);
}
.admin-tpl-config-field .air-input:focus {
  outline: none;
  border-color: rgba(192, 160, 98, 0.5);
  box-shadow: 0 0 0 2px rgba(192, 160, 98, 0.15);
}

@media (max-width: 780px) {
  .admin-tpl-row-grid {
    grid-template-columns: 1fr;
  }
  .admin-tpl-config-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .admin-tpl-config-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── 2026-05-26 admin restructure: agent rename + Web Designer + feature dropdown
 *   - Renamed fieldsets THINK/FLASH/SENSE → CBDO/BD Manager/BD Assistant/CFO/Web Designer
 *     (HTML-side legends/tags already updated; this restyles the new tag colors)
 *   - Templates panel simplified to .html + .md + Mode only (model config moved
 *     to LLM panel as a global Web Designer fieldset)
 *   - By-feature view uses a <select> dropdown instead of pills
 */

/* Mode tag colors — distinct per agent so the colored tab dot is meaningful */
.admin-llm-mode-tag--cbdo        { background: rgba(155, 89, 182, 0.16); color: #6c3483; }   /* purple — planner */
.admin-llm-mode-tag--bdmanager   { background: rgba(52, 152, 219, 0.16); color: #1b4f72; }   /* blue — executor */
.admin-llm-mode-tag--bdassistant { background: rgba(243, 156, 18, 0.16); color: #9c640c; }   /* amber — flash assist */
.admin-llm-mode-tag--cfo         { background: rgba(192, 57, 43, 0.14);  color: #922b21; }   /* red — audit */
.admin-llm-mode-tag--webdesigner { background: rgba(26, 188, 156, 0.16); color: #117a65; }   /* teal — web designer */

/* Narrow numeric fields so 4 fit on a row without crushing the model picker */
.admin-llm-field--narrow { min-width: 130px; flex: 0 1 160px; }
.admin-llm-field--narrow .air-input { width: 100%; max-width: 160px; }

/* Templates panel: simplified row grid (2 slots + mode) */
.admin-tpl-row-grid--simple {
  display: grid;
  grid-template-columns: 1fr 1fr 240px;
  gap: 20px;
}
@media (max-width: 900px) {
  .admin-tpl-row-grid--simple { grid-template-columns: 1fr; }
}
.admin-tpl-filename {
  display: inline-block;
  margin: 2px 0 4px;
  padding: 2px 8px;
  border-radius: 9999px;
  background: rgba(11, 16, 32, 0.04);
  color: var(--air-color-text-secondary, rgba(11,16,32,0.7));
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.admin-tpl-mode-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-top: 6px;
}
.admin-tpl-mode-row .air-input { flex: 1 1 auto; }
.admin-tpl-remove-link {
  display: inline-block;
  margin-left: 8px;
  padding: 4px 0;
  background: none;
  border: 0;
  color: var(--air-color-danger, #c0392b);
  text-decoration: underline;
  font-size: 13px;
  cursor: pointer;
}
.admin-tpl-remove-link:hover { color: #a93226; }

/* Feature-by-source dropdown picker row */
.ctxrules-feature-picker-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 16px;
  padding: 12px 14px;
  background: rgba(11, 16, 32, 0.03);
  border-radius: 12px;
}
.ctxrules-feature-picker-row .air-label {
  margin: 0;
  font-weight: 600;
  white-space: nowrap;
}
.ctxrules-feature-select {
  flex: 1 1 auto;
  max-width: 360px;
  min-height: 44px;
  font-size: 16px;  /* iOS Safari no-zoom-on-focus */
}
@media (max-width: 480px) {
  .ctxrules-feature-picker-row { flex-direction: column; align-items: stretch; }
  .ctxrules-feature-select { max-width: 100%; }
}

/* Bundle group headers inside the By-Feature sources list.
   Each header introduces a Brand / Commercial / Partner / Page / Template /
   Reference / System group with a colored dot + label + active-count.
   Sources inside the group get a thin colored stripe on the left so the
   bundle context stays visible while scanning the tier/weight controls. */
.ctxrules-bundle-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 6px 6px;
  margin: 10px 0 4px;
  border-bottom: 1px solid var(--air-divider, rgba(11,16,32,0.08));
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--air-color-text-secondary, rgba(11,16,32,0.7));
}
.ctxrules-bundle-group-header:first-of-type { margin-top: 0; }
.ctxrules-bundle-group-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.ctxrules-bundle-group-label { flex: 0 1 auto; }
.ctxrules-bundle-group-count {
  margin-left: auto;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  color: var(--air-color-text-muted, rgba(11,16,32,0.55));
  font-variant-numeric: tabular-nums;
}

.ctxrules-source-name { position: relative; padding-left: 12px; }
.ctxrules-source-bundle-stripe {
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 3px;
  border-radius: 2px;
  display: inline-block;
}


/* Context-rules detail-pane mode switcher (Inspect by source / by feature).
   Single horizontal bar at the top of the right detail pane. Both dropdowns
   are always visible — picking one auto-switches the pane to that mode. */
.ctxr-detail-mode-switch {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 16px;
  margin: 0 0 14px;
  background: rgba(11, 16, 32, 0.04);
  border-radius: 12px;
  border: 1px solid var(--air-divider, rgba(11,16,32,0.08));
}
.ctxr-detail-mode-switch__field {
  display: flex; flex-direction: column; gap: 4px;
  flex: 1 1 200px;
  min-width: 0;
}
.ctxr-detail-mode-switch__field .air-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--air-color-text-muted, rgba(11,16,32,0.55));
  margin: 0;
}
.ctxr-detail-mode-switch__field .air-input {
  width: 100%;
  min-height: 44px;
  font-size: 16px;  /* iOS no-zoom */
}
.ctxr-detail-mode-switch__or {
  align-self: flex-end;
  padding: 0 2px 12px;
  font-size: 12px;
  color: var(--air-color-text-muted, rgba(11,16,32,0.45));
  font-style: italic;
}
.ctxr-detail-mode-select[aria-pressed="true"] {
  border-color: var(--air-color-accent, #c0a062) !important;
  box-shadow: 0 0 0 2px rgba(192,160,98,0.12);
}
@media (max-width: 640px) {
  .ctxr-detail-mode-switch { flex-direction: column; align-items: stretch; gap: 10px; }
  .ctxr-detail-mode-switch__or { padding: 0; align-self: center; }
  /* R3: separate the mode-bar from the bundle list below it on mobile so the
     two zones don't visually merge. The .ctxrules-split margin-top override
     for narrow viewports collapses spacing; restore breathing room here. */
  #ctxrules-mode-bar { margin-bottom: 16px; border-bottom: 1px solid var(--ctxr-divider, rgba(0,0,0,0.10)); padding-bottom: 14px; }
}

/* Feature-mode bundle groups (long list of sources under each bundle header) */
.ctxrules-feature-bundle-group {
  margin: 14px 0 6px;
}
.ctxrules-feature-detail-list .ctxrules-feature-source-row .ctxrules-detail-row__feature {
  position: relative;
  padding-left: 12px;
  display: flex; align-items: center; gap: 8px;
}

/* Orphan-weight lint: source has a weight set but tier=off → won't inject.
 * The row gets a subtle amber treatment + a tooltipped warning chip so the
 * admin knows the row is "configured but inactive" rather than just "off".
 * Added 2026-06-07 alongside Tier A planning — most CBDO/BD-Manager rows
 * inherited weights but no tier from the Phase 1 absorb. */
.ctxrules-detail-row--orphan-weight {
  background: rgba(212, 160, 23, 0.06);  /* gold-tinted */
}
.ctxrules-detail-row--orphan-weight .ctxrules-detail-row__feature span:not(.ctxrules-source-bundle-stripe):not(.ctxrules-detail-row__lint) {
  opacity: 0.75;
}
.ctxrules-detail-row__lint {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 500;
  color: #b8801b;  /* darker gold for legibility */
  background: rgba(212, 160, 23, 0.12);
  border: 1px solid rgba(212, 160, 23, 0.3);
  border-radius: 4px;
  padding: 2px 6px;
  margin-left: 6px;
  cursor: help;
  white-space: nowrap;
}
@media (prefers-color-scheme: dark) {
  .ctxrules-detail-row--orphan-weight {
    background: rgba(224, 160, 32, 0.08);
  }
  .ctxrules-detail-row__lint {
    color: #e0a020;
    background: rgba(224, 160, 32, 0.15);
    border-color: rgba(224, 160, 32, 0.35);
  }
}

/* ─── Feature-mode inline controls in the left tree (2026-05-26 round 3)
 *   When ctxr.detailMode === 'feature' the tree rows render tier + weight
 *   controls inline so we don't repeat source/bundle names on the right.
 */
.ctxrules-tree-row--feature-mode {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
}
.ctxrules-tree-row--feature-mode .ctxrules-tree-row__controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ctxrules-tree-row--feature-mode .ctxrules-seg--compact button {
  /* Dense inline tier control. Visual height stays compact but tap area
     extends via padding so total clickable height is ≥36px. Acceptable
     compromise vs R5's 44px floor for inline tree-row controls where a
     full 44px target would blow up the row density. */
  font-size: 12px;
  padding: 9px 10px;
  min-height: 36px;
}
.ctxrules-tree-row--feature-mode .ctxrules-weight--compact input {
  width: 56px;
  min-height: 36px;
  font-size: 13px;
  text-align: center;
  padding: 8px 6px;
}
.ctxrules-tree-row--feature-mode.is-active-for-feature {
  background: rgba(192, 160, 98, 0.05);
  border-left: 2px solid rgba(192, 160, 98, 0.45);
}
.ctxrules-tree-row--feature-mode:not(.is-active-for-feature) .ctxrules-tree-row__name {
  color: var(--air-text-muted, rgba(11,16,32,0.55));
}
@media (max-width: 720px) {
  .ctxrules-tree-row--feature-mode {
    grid-template-columns: 10px 1fr;
  }
  .ctxrules-tree-row--feature-mode .ctxrules-tree-row__controls {
    grid-column: 1 / -1;
    justify-content: flex-end;
    padding-top: 4px;
  }
}

/* Feature-mode summary chips on the right (per-bundle active counts) */
.ctxrules-feature-summary-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 16px;
}
.ctxrules-feature-summary-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 9999px;
  background: rgba(11, 16, 32, 0.04);
  font-size: 12px;
  font-weight: 500;
}
.ctxrules-feature-summary-chip__dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block;
}
.ctxrules-feature-summary-chip__count {
  font-variant-numeric: tabular-nums;
  color: var(--air-text-muted, rgba(11,16,32,0.6));
}

/* 2026-05-26 round 4 — mode-switcher bar above the split (not inside right pane).
   Sits between the legend block and the tree/detail split, full width. */
#ctxrules-mode-bar { margin: 14px 0 12px; }
#ctxrules-mode-bar .ctxr-detail-mode-switch { margin: 0; }

/* ── Context Estimator ──────────────────────────────────────────────────────
   Preflight diagnostic strip in the /admin context-rules panel. Operator
   clicks "Estimate" and gets a real read of what the current rules will
   produce: which sources fire, their token counts, hot/budget headroom,
   and per-source hints (empty-but-wired, budget-exceeded, etc.).
   2026-05-26 — paired with the server-side hot-budget enforcement in
   lib/context-registry/build-context.mjs. */
.ctxrules-estimator {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--air-surface, #fff);
  border: 1px solid var(--air-divider, rgba(11,16,32,0.10));
  border-radius: 10px;
}
.ctxrules-estimator__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.ctxrules-estimator__header strong { font-size: 14px; font-weight: 600; }
.ctxrules-estimator__hint {
  display: block;
  font-size: 12px;
  color: var(--air-fg-mute, rgba(11,16,32,0.62));
  margin-top: 2px;
}
.ctxrules-estimator__body { margin-top: 12px; }

/* Headline totals row */
.ctxrules-estimator__totals {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--air-divider, rgba(11,16,32,0.10));
  margin-bottom: 10px;
  font-size: 13px;
}
.ctxrules-estimator__totals dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--air-fg-mute, rgba(11,16,32,0.62));
  margin-bottom: 2px;
}
.ctxrules-estimator__totals dd { font-weight: 600; }
.ctxrules-estimator__totals .is-ok    { color: #1f8a4d; }
.ctxrules-estimator__totals .is-warn  { color: #b35a00; }
.ctxrules-estimator__totals .is-error { color: #b3261e; }

/* Budget bar — visual fraction of budget used */
.ctxrules-budget-bar {
  position: relative;
  width: 100%;
  height: 8px;
  background: rgba(11,16,32,0.06);
  border-radius: 4px;
  overflow: hidden;
  margin: 8px 0 14px;
}
.ctxrules-budget-bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: #1f8a4d;
  transition: width 280ms ease, background-color 200ms ease;
}
.ctxrules-budget-bar[data-tone="warn"]  .ctxrules-budget-bar__fill { background: #b35a00; }
.ctxrules-budget-bar[data-tone="error"] .ctxrules-budget-bar__fill { background: #b3261e; }

/* Hint banner — one per finding */
.ctxrules-estimator__hint-banner {
  display: flex;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 8px;
  border: 1px solid;
}
.ctxrules-estimator__hint-banner[data-level="ok"] {
  background: rgba(31,138,77,0.08);
  border-color: rgba(31,138,77,0.30);
  color: #1f6a3d;
}
.ctxrules-estimator__hint-banner[data-level="warn"] {
  background: rgba(179,90,0,0.08);
  border-color: rgba(179,90,0,0.30);
  color: #8c4500;
}
.ctxrules-estimator__hint-banner[data-level="error"] {
  background: rgba(179,38,30,0.08);
  border-color: rgba(179,38,30,0.30);
  color: #8a1d18;
}
.ctxrules-estimator__hint-banner[data-level="info"] {
  background: rgba(40,90,160,0.06);
  border-color: rgba(40,90,160,0.25);
  color: #1f4570;
}

/* Per-source table */
.ctxrules-estimator__table {
  width: 100%;
  margin-top: 12px;
  border-collapse: collapse;
  font-size: 13px;
}
.ctxrules-estimator__table th,
.ctxrules-estimator__table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--air-divider, rgba(11,16,32,0.06));
}
.ctxrules-estimator__table th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--air-fg-mute, rgba(11,16,32,0.62));
}
.ctxrules-estimator__table td.is-num { text-align: right; font-variant-numeric: tabular-nums; }
.ctxrules-estimator__table tr.is-dropped td { background: rgba(179,38,30,0.06); }
.ctxrules-estimator__table tr.is-empty-wired td { background: rgba(179,90,0,0.06); }
.ctxrules-estimator__tier-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ctxrules-estimator__tier-pill[data-tier="hot"]  { background: rgba(179,38,30,0.10); color: #b3261e; }
.ctxrules-estimator__tier-pill[data-tier="warm"] { background: rgba(179,90,0,0.10);  color: #b35a00; }
.ctxrules-estimator__tier-pill[data-tier="cold"] { background: rgba(40,90,150,0.10); color: rgb(40,90,150); }
.ctxrules-estimator__tier-pill[data-tier="off"]  { background: rgba(11,16,32,0.08);  color: var(--air-fg-mute, rgba(11,16,32,0.62)); }

@media (max-width: 640px) {
  .ctxrules-estimator__totals { gap: 12px; font-size: 12px; }
  .ctxrules-estimator__table { font-size: 12px; }
  .ctxrules-estimator__table th,
  .ctxrules-estimator__table td { padding: 6px 8px; }
}

/* ── Estimator partner+page picker row ──────────────────────────────────
   Layout-only wrapper. Field labels/selects use the shared `.air-label` +
   `.air-input` design tokens so this row matches every other admin form
   (analytics window picker, LLM model selects, etc.). Kenneth pin
   2026-05-29: "make this UI consistent with the rest of the UI". */
.ctxrules-estimator__pickers {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-top: 10px;
}
.ctxrules-estimator__picker-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 220px;
  min-width: 200px;
}
@media (max-width: 600px) {
  .ctxrules-estimator__pickers { gap: 8px; }
  .ctxrules-estimator__picker-field { flex: 1 1 100%; }
}

/* ─── Source-detail layman labels + description block (Kenneth 2026-06-04) ─── */
.ctxrules-source-detail__title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
}
.ctxrules-source-detail__layman {
  font-size: 16px;
  font-weight: 700;
  color: var(--air-color-text, #111);
}
.ctxrules-source-detail__rawid {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  color: var(--air-color-text-muted, #888);
  background: rgba(120, 120, 120, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
}
.ctxrules-source-detail__about {
  margin: 8px 0 12px 0;
  padding: 12px 14px;
  background: rgba(120, 120, 140, 0.05);
  border-left: 3px solid rgba(120, 120, 140, 0.35);
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.55;
}
.ctxrules-source-detail__about p {
  margin: 0 0 6px 0;
}
.ctxrules-source-detail__about p:last-child {
  margin-bottom: 0;
}
.ctxrules-source-detail__what {
  color: var(--air-color-text, #111);
}
.ctxrules-source-detail__whens {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
  margin: 6px 0;
}
@media (max-width: 720px) {
  .ctxrules-source-detail__whens { grid-template-columns: 1fr; }
}
.ctxrules-source-detail__when--hot strong { color: #c93333; }
.ctxrules-source-detail__when--off strong { color: #666; }
.ctxrules-source-detail__editor {
  font-size: 12px;
  color: var(--air-color-text-muted, #666);
}

/* ─── 💡 Suggest button + panel ─── */
.ctxrules-suggest-btn {
  margin-left: auto;
}
.ctxrules-suggest-panel {
  margin: 10px 0 14px 0;
  border: 1px solid rgba(120, 90, 200, 0.3);
  background: rgba(120, 90, 200, 0.06);
  border-radius: 6px;
  padding: 12px 14px;
}
.ctxrules-suggest-panel__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 13px;
}
.ctxrules-suggest-panel__header strong code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(0,0,0,0.05);
  padding: 1px 4px;
  border-radius: 3px;
}
.ctxrules-suggest-panel__source-tag {
  font-size: 11px;
  color: var(--air-color-text-muted, #888);
  background: rgba(120, 90, 200, 0.12);
  padding: 2px 6px;
  border-radius: 3px;
}
.ctxrules-suggest-panel__close {
  margin-left: auto;
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--air-color-text-muted, #888);
  line-height: 1;
}
.ctxrules-suggest-panel__close:hover {
  color: var(--air-color-text, #111);
}
.ctxrules-suggest-panel__loading,
.ctxrules-suggest-panel__empty,
.ctxrules-suggest-panel__error {
  margin: 0;
  font-size: 13px;
  color: var(--air-color-text-muted, #666);
}
.ctxrules-suggest-panel__error { color: #c93333; }
.ctxrules-suggest-row {
  background: var(--air-color-bg, #fff);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 5px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.ctxrules-suggest-row:last-child { margin-bottom: 0; }
.ctxrules-suggest-row__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.ctxrules-suggest-row__delta {
  font-size: 13px;
  color: var(--air-color-text, #111);
}
.ctxrules-suggest-row__confidence {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 600;
  text-transform: capitalize;
}
.ctxrules-suggest-row__confidence--high   { background: rgba(46, 160, 67, 0.15);  color: #1a7f37; }
.ctxrules-suggest-row__confidence--medium { background: rgba(224, 160, 32, 0.15); color: #8a5e08; }
.ctxrules-suggest-row__confidence--low    { background: rgba(128, 128, 128, 0.15); color: #666; }
.ctxrules-suggest-row__rationale {
  margin: 0 0 8px 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--air-color-text, #222);
}
.ctxrules-suggest-row__actions {
  display: flex;
  gap: 6px;
}


/* ════════════════════════════════════════════════════════════════════════
   v2 brief Edit modal — 3-tab variant (Brief / Templates / Sources & Derive)
   Lives in /carnegie/admin/agents.html. Scoped under .am-briefs-modal-v2 so
   the legacy single-card modal styles (if any other consumer exists) are
   unaffected.
   ════════════════════════════════════════════════════════════════════════ */

/* The OUTER .am-briefs-modal-v2 is the backdrop+positioner (replaces what
   .am-modal-bg does for the legacy modals — see agents.html inline styles).
   The INNER .am-briefs-modal-card-v2 is the white card.
   2026-06-15 (Kenneth) — before this fix the modal was inline-positioned and
   appeared in-page below the briefs list instead of as an overlay. */
.am-briefs-modal-v2 {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  padding: 16px;
}
.am-briefs-modal-v2[hidden] { display: none !important; }

.am-briefs-modal-v2 .am-briefs-modal-card-v2 {
  background: #fff;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 64px);
  padding: 20px 22px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.36);
  overflow-y: auto;
}
.am-briefs-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 0 0 12px;
}
.am-briefs-modal-head h3 { margin: 0; font-size: 17px; }
.am-modal-close {
  background: none; border: 0;
  width: 32px; height: 32px;
  border-radius: 6px;
  font-size: 20px; line-height: 1;
  color: #6a6a6a; cursor: pointer;
}
.am-modal-close:hover { background: #f2f2f4; color: #1a1a1a; }

.am-briefs-tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid #e6e6e6;
  margin: 0 0 14px;
}
.am-briefs-tab {
  background: transparent; border: 0; cursor: pointer;
  padding: 9px 14px;
  font-size: 13px; font-weight: 600;
  color: #6a6a6a;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.am-briefs-tab:hover { color: #1a1a1a; }
.am-briefs-tab.is-active,
.am-briefs-tab[aria-selected="true"] {
  color: #1a1a1a;
  border-bottom-color: #1a1a1a;
}
.am-briefs-tab[hidden] { display: none; }
.am-briefs-tab-count {
  display: inline-block;
  background: #f0f0f0;
  color: #6a6a6a;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 11px;
  margin-left: 4px;
}
.am-briefs-tabpanel {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.am-briefs-tabpanel[hidden] { display: none; }

/* ─── Templates tab ─────────────────────────────────────────────────── */
.am-tpl-toolbar {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
.am-tpl-toolbar .am-tpl-status { flex: 1; font-size: 12px; }
.am-tpl-status { color: #0a7e3d; font-size: 12px; }
.am-tpl-list {
  display: flex; flex-direction: column;
  gap: 8px;
}
.am-tpl-empty {
  padding: 24px;
  text-align: center;
  background: #fafafa;
  border: 1px dashed #d6d6d6;
  border-radius: 8px;
  color: #6a6a6a; font-size: 13px;
}
.am-tpl-row {
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
}
.am-tpl-row-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
}
.am-tpl-row-head strong { font-size: 14px; }
.am-tpl-star {
  cursor: pointer;
  font-size: 16px;
  user-select: none;
  width: 20px; text-align: center;
  color: #cbb35a;
}
.am-tpl-star:hover { color: #a0892a; }
.am-tpl-row-meta {
  font-size: 11px; color: #6a6a6a;
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.am-tpl-match-row { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.am-tpl-match {
  background: #eef3ff;
  color: #2849a3;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
}
.am-tpl-row-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.am-tpl-source-seed, .am-tpl-source-derived, .am-tpl-source-manual {
  font-size: 10px; font-weight: 600;
  padding: 1px 7px; border-radius: 6px;
}
.am-tpl-source-seed     { background: #eef5e8; color: #2c7028; }
.am-tpl-source-derived  { background: #f0e5f9; color: #6b2c93; }
.am-tpl-source-manual   { background: #f0f0f0; color: #6a6a6a; }
.am-tpl-danger { color: #c93333 !important; }

.am-tpl-editor {
  margin-top: 12px;
  padding: 16px;
  background: #f9f9fa;
  border: 1px solid #d6d6d6;
  border-radius: 8px;
}
.am-tpl-editor-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.am-tpl-editor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px 10px;
}
.am-tpl-editor-grid label,
.am-tpl-editor label {
  display: block;
  font-size: 12px;
  color: #6a6a6a;
}
.am-tpl-editor-grid label.am-tpl-full-row { grid-column: 1 / -1; }
.am-tpl-editor input,
.am-tpl-editor select,
.am-tpl-editor textarea {
  width: 100%;
  margin-top: 2px;
}
.am-tpl-editor-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  align-items: center;
  margin-top: 12px;
}
.am-tpl-editor-actions .am-tpl-status {
  flex: 1; text-align: left;
}

/* ─── Sources & Derive tab ──────────────────────────────────────────── */
.am-derive-row {
  display: flex; align-items: center; gap: 10px;
  margin: 6px 0 4px;
}
.am-derive-row strong { font-size: 13px; }
.am-derive-row .am-tpl-status { flex: 1; }

.am-derive-sources-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex; flex-direction: column;
  gap: 4px;
}
.am-derive-source-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px;
  background: #fafafa;
  border: 1px solid #ececec;
  border-radius: 6px;
  font-size: 12px;
}
.am-derive-source-name { font-weight: 600; flex: 1; }
.am-derive-source-meta { color: #8a8a8a; font-size: 11px; }
.am-derive-source-remove { color: #c93333; padding: 2px 8px; }

.am-derive-form {
  padding: 12px 14px;
  background: #fafafa;
  border: 1px solid #ececec;
  border-radius: 8px;
}
.am-derive-form strong { display: block; margin-bottom: 8px; }
.am-derive-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
}
.am-derive-grid label { font-size: 12px; color: #6a6a6a; display: block; }
.am-derive-actions {
  display: flex; justify-content: flex-end; align-items: center;
  gap: 8px; margin-top: 10px;
}
.am-derive-actions .am-tpl-status { flex: 1; text-align: left; }

.am-derive-draft {
  margin-top: 16px;
  padding: 14px;
  border: 2px solid #cbb35a;
  background: #fffdf6;
  border-radius: 10px;
}
.am-derive-draft strong { display: block; margin-bottom: 6px; }
.am-derive-draft-meta { font-size: 12px; color: #6a6a6a; margin-bottom: 10px; }
.am-derive-draft-split {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 12px;
  height: 420px;
}
.am-derive-draft-split iframe {
  width: 100%; height: 100%;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  background: #fff;
}
.am-derive-block-report {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  padding: 12px;
  overflow-y: auto;
  font-size: 12px;
}
.am-derive-block-report h4 { margin: 0 0 6px; font-size: 13px; }
.am-derive-bk-section { margin-bottom: 10px; }
.am-derive-bk-section code {
  display: inline-block;
  margin: 2px 4px 2px 0;
  padding: 1px 7px;
  background: #eef5e8;
  color: #2c7028;
  border-radius: 4px;
  font-size: 11px;
}
.am-derive-bk-section code.am-derive-bk-new {
  background: #f0e5f9;
  color: #6b2c93;
}
.am-derive-bk-warn {
  color: #a14a00;
  background: #fff4e0;
  padding: 6px 10px;
  border-radius: 4px;
  margin-top: 6px;
}
.am-derive-draft-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 12px;
}

@media (max-width: 720px) {
  .am-derive-draft-split { grid-template-columns: 1fr; height: auto; }
  .am-derive-draft-split iframe { height: 320px; }
  .am-derive-grid { grid-template-columns: 1fr; }
  .am-tpl-editor-grid { grid-template-columns: 1fr; }
}


/* ─── Template editor — overlay modal-on-modal (Step 4 revision 2026-06-15) ─── */
.am-tpl-editor-modal {
  position: fixed;
  inset: 0;
  z-index: 10001;  /* above the briefs modal (10000-ish) */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  padding: 16px;
}
.am-tpl-editor-modal[hidden] { display: none; }
.am-tpl-editor-modal-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px 22px;
  /* 2026-06-15 fix: editor was too cramped (was max-width 880px / 96%).
     Bump to 1280px max so the form grid, multi-brief checklists, and
     HTML textareas have breathing room. Card-card override below
     (style="max-width: …") still wins — we also widen that inline value. */
  max-width: 1280px;
  width: min(98vw, 1280px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.36);
}
.am-tpl-editor-modal-body {
  /* The inner editor — drop the inline-pane styling (no extra background/border) */
  background: transparent;
  border: 0;
  padding: 0;
  margin-top: 0;
}

/* Inline help text used inside the editor (Shape radio labels,
   multibrief sections, etc.). Distinct from .am-tpl-empty, which is
   a full-block empty-state card and was bleeding into these inline
   captions — see 2026-06-15 fix for the Shape-selector layout bug. */
.am-tpl-hint {
  display: inline;
  color: #6a6a6a;
  font-size: 12px;
  font-weight: 400;
  margin-left: 4px;
}
.am-tpl-multibrief-section .am-tpl-hint {
  display: block;
  margin: 2px 0 8px;
}

/* ───── v3 agent-templates: pool-scoped Templates tab ───── */

/* Yellow-tinted usage banner shown when editing a template assigned to >1 brief */
.am-tpl-usage-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: #fff8e1;
  border: 1px solid #f1d97a;
  border-radius: 8px;
  font-size: 12px;
  color: #6c4a00;
}
.am-tpl-usage-banner-icon { font-size: 14px; }
.am-tpl-usage-banner-text { font-weight: 600; }
.am-tpl-usage-banner-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}
.am-tpl-usage-chip {
  background: rgba(0, 0, 0, 0.04);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  color: #5a4400;
}

/* Shape selector — only visible during create. Greyed out when editing. */
.am-tpl-shape-picker {
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0 0 12px;
  background: #fafafa;
}
.am-tpl-shape-picker legend {
  font-size: 12px;
  color: #6a6a6a;
  font-weight: 600;
  padding: 0 6px;
}
.am-tpl-shape-picker label {
  display: block;
  font-size: 13px;
  margin: 4px 0;
}
.am-tpl-shape-picker.is-locked {
  background: #f4f4f4;
  opacity: 0.85;
}
.am-tpl-shape-picker.is-locked label { cursor: not-allowed; }

/* Shape badge on each template row */
.am-tpl-shape-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.am-tpl-shape-html-blocks { background: #e8eef7; color: #2d4a7a; }
.am-tpl-shape-email       { background: #faeede; color: #8a4a14; }

/* "Shared" badge — visible when applicable_briefs.length > 1 */
.am-tpl-share-icon {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  padding: 1px 6px;
  background: #e8f4ec;
  color: #1f6b3f;
  border-radius: 4px;
  cursor: help;
  user-select: none;
}

/* "used by N briefs" badge in the row meta */
.am-tpl-usage-badge {
  display: inline-block;
  background: #f0f0f0;
  color: #555;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  margin-left: 6px;
  cursor: help;
  white-space: nowrap;
}

/* Multi-brief checklist (replaces v2 .am-tpl-apply-to) */
.am-tpl-multibrief {
  border: 1px solid #ececec;
  border-radius: 8px;
  padding: 12px 14px;
  background: #fafafa;
}
.am-tpl-multibrief-section strong { display: block; font-size: 13px; margin-bottom: 2px; }
.am-tpl-multibrief-section small { display: block; font-size: 11px; color: #6a6a6a; margin-bottom: 8px; }
.am-tpl-brief-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 6px;
}
.am-tpl-brief-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
}
.am-tpl-brief-check:hover { background: #f5f5f7; }
.am-tpl-brief-check code { font-size: 11px; }
.am-tpl-brief-check.is-locked {
  background: #eef3ee;
  border-color: #d8e4d8;
  cursor: not-allowed;
}
.am-tpl-brief-check.is-locked code { color: #2d6b3a; font-weight: 600; }
.am-tpl-multibrief-error {
  color: #c93333;
  font-size: 12px;
  margin-top: 6px;
}

/* "+ Add from pool ▾" dropdown */
.am-tpl-add-from-pool-wrap { position: relative; display: inline-block; }
.am-tpl-add-from-pool-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 50;
  background: #fff;
  border: 1px solid #d6d6d6;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  min-width: 280px;
  max-width: 380px;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
}
.am-tpl-add-from-pool-menu[hidden] { display: none; }
.am-tpl-pool-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
}
.am-tpl-pool-item:hover { background: #f0f0f4; }
.am-tpl-pool-item strong { display: block; font-size: 13px; }
.am-tpl-pool-item small { display: block; font-size: 11px; color: #6a6a6a; margin-top: 2px; }