/* ── Covr AI — Tier-1 Pilot-Safety UX Hardening (dark-theme pass) ─────────
 *
 * Implements the 4 must-fix items from
 * docs/OPERATOR_WORKFLOW_UX_AUDIT.md §10 plus the visual-coherence pass
 * dated 2026-05-27 that brings every Tier-1 surface in line with the
 * dark Covr operational shell (charcoal/graphite + teal accents).
 *
 * All selectors are namespaced (.cov-app-header__*, .active-account-chip,
 * .review-queue__*, .acct-btn--destructive, .renewal-queue-*, .acct-ctx-*).
 * No global selector overrides outside that namespace.
 *
 * Tone: calm, infrastructural, insurance-office-grade. No animations
 * beyond 100ms transitions. No gradients, no shimmer, no glow.
 * ──────────────────────────────────────────────────────────────────────── */

/* ── App header bar (mounts inside main.app-content) ────────────────── */
.cov-app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 28px;
  background: var(--charcoal);
  border-bottom: 1px solid var(--hairline-dark);
  font-family: 'General Sans', sans-serif;
  font-size: 0.82rem;
  color: var(--off-white);
  position: sticky;
  top: 0;
  z-index: 40;
}

.cov-app-header__left,
.cov-app-header__right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── Active-account chip (the canonical context surface) ────────────── */
.active-account-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px 7px 11px;
  border-radius: 6px;
  background: var(--graphite);
  border: 1px solid var(--hairline-dark);
  cursor: pointer;
  transition: border-color 100ms ease, background-color 100ms ease;
  max-width: 560px;
  color: var(--off-white);
}
.active-account-chip:hover {
  border-color: var(--teal);
  background: var(--graphite-deep);
}
.active-account-chip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
  flex-shrink: 0;
}
.active-account-chip__name {
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--off-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}
.active-account-chip__meta {
  font-size: 0.75rem;
  color: var(--fog);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.active-account-chip__sep {
  color: var(--hairline-dark);
  margin: 0 2px;
}
.active-account-chip__clear {
  border: none;
  background: transparent;
  color: var(--fog);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
  margin-left: 6px;
  border-left: 1px solid var(--hairline-dark);
  padding-left: 10px;
  transition: color 100ms ease;
}
.active-account-chip__clear:hover { color: var(--off-white); }
.active-account-chip__clear:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* Empty state — no account selected */
.active-account-chip--empty {
  background: transparent;
  border: 1px dashed rgba(244, 244, 242, 0.18);
  color: var(--fog);
}
.active-account-chip--empty .active-account-chip__dot { background: var(--fog); }
.active-account-chip--empty .active-account-chip__name { color: var(--fog); font-weight: 500; }

/* E&O-sensitive variant */
.active-account-chip--eo-sensitive {
  border-color: var(--urgency-critical-border);
  background: rgba(220, 50, 50, 0.08);
}
.active-account-chip--eo-sensitive .active-account-chip__dot {
  background: var(--urgency-critical-fg);
}
.active-account-chip__eo-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--urgency-critical-fg);
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--urgency-critical-bg);
  margin-left: 6px;
}
.active-account-chip__eo-badge svg {
  width: 11px;
  height: 11px;
  stroke: var(--urgency-critical-fg);
}

/* Right side: operator role chip */
.cov-app-header__role {
  font-size: 0.72rem;
  color: var(--fog);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cov-app-header__role-value {
  color: var(--off-white);
  font-weight: 600;
  margin-left: 4px;
  text-transform: none;
  letter-spacing: 0;
}

/* ── Catastrophic-action button variant (for Client Comms) ──────────── */
.acct-btn--destructive {
  border: 1px solid var(--urgency-critical-border) !important;
  background: rgba(220, 50, 50, 0.08) !important;
  position: relative;
}
.acct-btn--destructive:hover {
  background: rgba(220, 50, 50, 0.14) !important;
  border-color: var(--urgency-critical-fg) !important;
}
.acct-btn--destructive__icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: text-bottom;
}
.acct-btn--destructive__icon svg {
  width: 14px;
  height: 14px;
  stroke: var(--urgency-critical-fg);
  stroke-width: 2;
  fill: none;
}
.acct-btn--destructive__caption {
  display: block;
  font-size: 0.68rem;
  color: var(--urgency-critical-fg);
  margin-top: 4px;
  letter-spacing: 0.01em;
  text-transform: none;
  font-weight: 500;
}

/* ── Account-picker "Currently active" pseudo-section ──────────────── */
.acct-ctx-current-section {
  padding: 10px 16px 8px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fog);
  border-bottom: 1px solid var(--hairline-dark);
}
.acct-ctx-row--current {
  background: rgba(93, 168, 162, 0.12) !important;
  border-left: 3px solid var(--teal);
  padding-left: 13px !important;
  color: var(--off-white) !important;
}
.acct-ctx-row--current::before {
  content: '✓';
  color: var(--teal);
  font-weight: 700;
  margin-right: 6px;
}

/* ── Account-switch confirmation modal (dark) ───────────────────────── */
.acct-switch-guard {
  position: fixed;
  inset: 0;
  background: rgba(15, 17, 20, 0.70);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  font-family: 'General Sans', sans-serif;
}
.acct-switch-guard.is-open { display: flex; }
.acct-switch-guard__panel {
  background: var(--graphite-deep);
  border: 1px solid var(--hairline-dark);
  border-radius: 10px;
  padding: 28px 28px 22px;
  max-width: 480px;
  width: calc(100% - 40px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  color: var(--off-white);
}
.acct-switch-guard__title {
  font-family: 'Recoleta', serif;
  font-size: 1.2rem;
  color: var(--off-white);
  margin: 0 0 10px;
  font-weight: 600;
}
.acct-switch-guard__body {
  font-size: 0.88rem;
  color: var(--off-white);
  line-height: 1.5;
  margin-bottom: 18px;
}
.acct-switch-guard__body strong { font-weight: 600; color: var(--teal); }
.acct-switch-guard__reason {
  font-size: 0.78rem;
  color: var(--fog);
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--charcoal);
  border-left: 2px solid var(--urgency-urgent-fg);
  border-radius: 0 4px 4px 0;
}
.acct-switch-guard__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
}
.acct-switch-guard__btn {
  font-family: 'General Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 6px;
  border: 1px solid var(--hairline-dark);
  background: transparent;
  color: var(--off-white);
  cursor: pointer;
  transition: background-color 100ms ease, border-color 100ms ease;
}
.acct-switch-guard__btn:hover { background: var(--charcoal); border-color: var(--off-white); }
.acct-switch-guard__btn--primary {
  background: var(--teal);
  color: var(--charcoal);
  border-color: var(--teal);
}
.acct-switch-guard__btn--primary:hover {
  background: var(--teal-lit);
  border-color: var(--teal-lit);
  color: var(--charcoal);
}

/* ── Review queue — sidebar badge + Awaiting Review screen (dark) ──── */
#nav-approvals .nav-link__badge,
#nav-approvals .review-queue-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  font-size: 0.66rem;
  font-weight: 700;
  background: var(--urgency-critical-bg);
  color: var(--urgency-critical-fg);
  margin-left: auto;
  letter-spacing: 0.02em;
}

.review-queue {
  padding: 24px 32px 40px;
  max-width: 1320px;
  margin: 0 auto;
  font-family: 'General Sans', sans-serif;
  color: var(--off-white);
}
.review-queue__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--hairline-dark);
  padding-bottom: 14px;
}
.review-queue__title {
  font-family: 'Recoleta', serif;
  font-size: 1.4rem;
  color: var(--off-white);
  margin: 0;
  font-weight: 600;
}
.review-queue__sub {
  font-size: 0.82rem;
  color: var(--fog);
  margin-top: 4px;
}
.review-queue__counts {
  display: flex;
  gap: 20px;
  font-size: 0.78rem;
}
.review-queue__count { text-align: right; }
.review-queue__count-num {
  display: block;
  font-family: 'Recoleta', serif;
  font-size: 1.5rem;
  color: var(--off-white);
  font-weight: 600;
}
.review-queue__count-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.65rem;
  color: var(--fog);
}

.review-queue__columns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 14px;
  margin-top: 18px;
}
.review-queue__col {
  background: var(--graphite);
  border: 1px solid var(--hairline-dark);
  border-radius: 8px;
  padding: 12px;
  min-height: 240px;
}
.review-queue__col-head {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--off-white);
  padding: 4px 6px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--hairline-dark);
  margin-bottom: 10px;
}
.review-queue__col-count {
  color: var(--fog);
  font-weight: 700;
}

.review-queue__card {
  background: var(--graphite-deep);
  border: 1px solid var(--hairline-dark);
  border-radius: 6px;
  padding: 11px 12px;
  margin-bottom: 8px;
  font-size: 0.82rem;
  color: var(--off-white);
  cursor: pointer;
  transition: border-color 100ms ease, background-color 100ms ease;
}
.review-queue__card:hover {
  border-color: var(--teal);
  background: rgba(93, 168, 162, 0.06);
}
.review-queue__card-title {
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--off-white);
}
.review-queue__card-meta {
  font-size: 0.7rem;
  color: var(--fog);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.review-queue__card-meta-sep { color: var(--hairline-dark); }
.review-queue__card-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--hairline-dark);
}
.review-queue__card-btn {
  font-size: 0.72rem;
  padding: 5px 11px;
  border-radius: 4px;
  border: 1px solid var(--hairline-dark);
  background: transparent;
  color: var(--off-white);
  cursor: pointer;
  font-family: 'General Sans', sans-serif;
  font-weight: 500;
  transition: background-color 100ms ease, border-color 100ms ease;
}
.review-queue__card-btn:hover { background: var(--charcoal); border-color: var(--off-white); }
.review-queue__card-btn--primary {
  background: var(--teal);
  color: var(--charcoal);
  border-color: var(--teal);
}
.review-queue__card-btn--primary:hover {
  background: var(--teal-lit); border-color: var(--teal-lit); color: var(--charcoal);
}
.review-queue__card-btn--warn {
  border-color: var(--urgency-critical-border);
  color: var(--urgency-critical-fg);
  background: rgba(220, 50, 50, 0.08);
}
.review-queue__card-btn--warn:hover {
  background: rgba(220, 50, 50, 0.16);
  border-color: var(--urgency-critical-fg);
}

.review-queue__card-eo {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--urgency-critical-fg);
  background: var(--urgency-critical-bg);
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 6px;
  text-transform: uppercase;
}

/* Trust-closure fix 1 (2026-05-27): refused/blocked badge + submission tag */
.review-queue__card-refused {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #b45309;
  background: rgba(245, 158, 11, 0.16);
  border: 1px solid rgba(245, 158, 11, 0.45);
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 6px;
  text-transform: uppercase;
}
.review-queue__card--refused {
  border-left: 3px solid rgba(245, 158, 11, 0.55);
}
.review-queue__card-submission-required {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #b45309;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 6px;
  text-transform: uppercase;
}
.review-queue__card-submitted {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--teal);
  background: rgba(93, 168, 162, 0.12);
  border: 1px solid rgba(93, 168, 162, 0.4);
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 6px;
  text-transform: uppercase;
}

/* Trust-closure fix 4 (2026-05-27): inline preview line on every card. */
.review-queue__card-preview {
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--fog);
  font-family: 'General Sans', sans-serif;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Trust-closure fix 3 (2026-05-27): "Mark carrier sent" action button. */
.review-queue__card-btn--carrier {
  border-color: rgba(245, 158, 11, 0.45);
  color: #b45309;
  background: rgba(245, 158, 11, 0.08);
}
.review-queue__card-btn--carrier:hover {
  background: rgba(245, 158, 11, 0.16);
  border-color: rgba(245, 158, 11, 0.7);
}

/* Trust-closure fix 6 (2026-05-27): Quote Comparison table layout.
   The QC handoff renderer emits `.qc-doc / .qc-table` with no CSS in the
   stylesheet — the baseline walkthrough captured the result as overlapping
   text (column headers landing on top of data rows because nothing set
   row height / vertical-align / column widths). These rules give the
   table a clean layout: fixed-layout, equal-width carrier columns,
   per-cell vertical-align, header background, and word-wrap behavior
   that handles long carrier names without collapsing into the data. */
.qc-doc {
  font-family: 'General Sans', 'Recoleta', sans-serif;
  color: #1c1f24;
  padding: 14px 18px;
  background: #ffffff;
  border-radius: 10px;
}
.qc-doc .qc-title {
  font-family: 'Recoleta', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1c1f24;
  margin-bottom: 4px;
}
.qc-doc .qc-mock-note { margin-bottom: 12px; }
.qc-doc .qc-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 0.82rem;
  background: #ffffff;
}
.qc-doc .qc-table thead th {
  background: #1c1f24;
  color: #ece9df;
  font-family: 'General Sans', sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 2px solid rgba(93, 168, 162, 0.5);
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.3;
}
.qc-doc .qc-table tbody td {
  padding: 9px 12px;
  vertical-align: top;
  border-bottom: 1px solid #ede8df;
  color: #1c1f24;
  font-size: 0.82rem;
  line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.qc-doc .qc-table tbody tr:nth-child(even) td { background: #fafaf6; }
.qc-doc .qc-table tbody tr:first-child td {
  background: rgba(93, 168, 162, 0.08);
  font-weight: 600;
}
.qc-doc .qc-table thead th:first-child,
.qc-doc .qc-table tbody td:first-child {
  width: 28%;
  background: #ece9df;
  color: #1c1f24;
  font-weight: 600;
}
.qc-doc .qc-table thead th:first-child { background: #1c1f24; color: #ece9df; }
.qc-doc .qc-recommendation {
  background: rgba(93, 168, 162, 0.10);
  border-left: 3px solid #5da8a2;
  border-radius: 6px;
  padding: 14px 16px;
  margin-top: 18px;
  font-size: 0.86rem;
  line-height: 1.55;
}

.review-queue__empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--fog);
  font-size: 0.9rem;
}
.review-queue__empty-title {
  font-family: 'Recoleta', serif;
  color: var(--off-white);
  font-size: 1.15rem;
  margin-bottom: 8px;
  font-weight: 600;
}

/* ── Restoration toast ──────────────────────────────────────────────── */
.cov-restore-toast {
  position: fixed;
  bottom: calc(var(--agent-strip-h, 64px) + 16px);
  right: 24px;
  background: var(--graphite-deep);
  color: var(--off-white);
  padding: 12px 16px;
  border-radius: 6px;
  border: 1px solid var(--hairline-dark);
  font-family: 'General Sans', sans-serif;
  font-size: 0.82rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
}
.cov-restore-toast.is-visible { opacity: 1; }
.cov-restore-toast__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal-lit);
}

/* ── Renewal queue panel (dark, operationally reactive) ─────────────── */
.renewal-queue-panel { margin: 0 0 14px; }
.renewal-queue-panel:empty { display: none; }
.renewal-queue-panel.is-active {
  background: var(--graphite);
  border: 1px solid var(--hairline-dark);
  border-radius: 10px;
  padding: 16px 18px 14px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

.renewal-queue-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline-dark);
  margin-bottom: 12px;
}
.renewal-queue-eyebrow {
  font-family: 'General Sans', sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--teal);
}
.renewal-queue-title {
  font-family: 'Recoleta', serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--off-white);
  margin: 4px 0 0;
}
.renewal-queue-hint {
  font-family: 'General Sans', sans-serif;
  font-size: 0.72rem;
  color: var(--fog);
}

.renewal-queue-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 360px;
  overflow-y: auto;
}

.renewal-queue-row {
  all: unset;
  cursor: pointer;
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-family: 'General Sans', sans-serif;
  font-size: 0.84rem;
  color: var(--off-white);
  transition: background-color 100ms ease, border-color 100ms ease;
}
.renewal-queue-row:hover {
  background: var(--graphite-deep);
  border-color: var(--hairline-dark);
}
.renewal-queue-row:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
}

.renewal-queue-row-tier {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
}
.renewal-queue-row-tier--critical { background: var(--urgency-critical-fg); }
.renewal-queue-row-tier--urgent   { background: var(--urgency-urgent-fg); }
.renewal-queue-row-tier--normal   { background: var(--teal); }

.renewal-queue-row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.renewal-queue-row-name {
  font-weight: 600;
  color: var(--off-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.renewal-queue-row-meta {
  font-size: 0.72rem;
  color: var(--fog);
}

.renewal-queue-row-due {
  font-family: 'General Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--off-white);
  text-align: right;
  white-space: nowrap;
}
.renewal-queue-row[data-tier="critical"] .renewal-queue-row-due { color: var(--urgency-critical-fg); }
.renewal-queue-row[data-tier="urgent"]   .renewal-queue-row-due { color: var(--urgency-urgent-fg); }

.renewal-queue-row[data-active="true"] {
  background: rgba(93, 168, 162, 0.10);
  border-color: var(--teal);
}

.renewal-queue-empty {
  font-family: 'General Sans', sans-serif;
  font-size: 0.82rem;
  color: var(--fog);
  padding: 14px 8px;
  text-align: center;
}

/* ── Visual-coherence pass (2026-05-27) — host-screen + adjacent fixes ─ */

/* Accounts table — dark surface in place of the cream/white slab. */
#screen-accounts {
  background: var(--charcoal);
  padding: 28px 32px 40px;
  overflow-y: auto;
}
#screen-accounts .acl-title { color: var(--off-white) !important; }
#screen-accounts .acl-sub { color: var(--fog) !important; }
#screen-accounts .acl-name { color: var(--off-white) !important; }
#screen-accounts .acl-empty { color: var(--fog) !important; }
#screen-accounts .acl-table-wrap { padding: 0; }
#screen-accounts .acl-table {
  background: var(--graphite) !important;
  border: 1px solid var(--hairline-dark) !important;
  border-radius: 10px;
  color: var(--off-white);
  font-size: 0.85rem;
}
#screen-accounts .acl-table thead th {
  background: var(--graphite-deep) !important;
  color: var(--fog) !important;
  border-bottom: 1px solid var(--hairline-dark) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 12px 14px;
}
#screen-accounts .acl-row td {
  background: transparent !important;
  border-bottom: 1px solid var(--hairline-dark) !important;
  color: var(--off-white);
  padding: 13px 14px;
}
#screen-accounts .acl-row:hover td {
  background: rgba(93, 168, 162, 0.06) !important;
}
#screen-accounts .acl-row.acl-row--active td,
#screen-accounts .acl-row[data-active="true"] td {
  background: rgba(93, 168, 162, 0.12) !important;
  border-left: 2px solid var(--teal);
}
#screen-accounts .acl-search,
#screen-accounts input.acl-search,
#screen-accounts select.acl-filter,
#screen-accounts .acl-toolbar input,
#screen-accounts .acl-toolbar select {
  background: var(--graphite) !important;
  border: 1px solid var(--hairline-dark) !important;
  color: var(--off-white) !important;
}
#screen-accounts .acl-search::placeholder { color: var(--fog); }
#screen-accounts .acct-qa-btn {
  background: var(--graphite-deep) !important;
  border: 1px solid var(--hairline-dark) !important;
  color: var(--off-white) !important;
}
#screen-accounts .acct-qa-btn:hover {
  background: var(--teal-whisper) !important;
  border-color: var(--teal) !important;
  color: var(--teal) !important;
}

/* Accounts status pills — adjust for dark surface contrast */
#screen-accounts .acl-status,
#screen-accounts .status-chip,
#screen-accounts [class*="status-pill"] {
  background: var(--graphite-deep);
  color: var(--off-white);
  border: 1px solid var(--hairline-dark);
}

/* Tools screen — header is a FULL-WIDTH band above the grid, not a column.
 * #screen-tools inherits `.tool-screen.active { display:flex }` (row), which
 * laid .tools-screen-head + .tool-grid side by side (header read as a narrow
 * left column). Force block flow when active so the header sits above the
 * grid; the id+.active selector outranks the .tool-screen.active flex rule
 * while still letting the inactive screen stay display:none. */
#screen-tools.active { display: block; }
#screen-tools { padding: 40px 44px 48px; }
#screen-tools .tools-screen-head { width: 100%; margin-bottom: 32px; }
#screen-tools .tools-screen-title { margin: 0 0 10px; }
#screen-tools .tools-screen-sub { margin: 0; }

/* Tool cards — icon tile inline-LEFT of the name (row), description below,
 * CTA pinned to the bottom. A CSS grid maps the flat markup (icon, title,
 * desc, cta) into that layout without adding a wrapper element. The middle
 * (desc) row flexes so the CTA lands at the bottom on equal-height cards;
 * overflow stays visible so nothing is clipped. */
#screen-tools .tool-card {
  overflow: visible !important;
  min-height: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "icon title"
    "desc desc"
    "cta  cta";
  column-gap: 12px;
  row-gap: 10px;
  padding: 22px 22px;
}
#screen-tools .tool-card-icon-wrap {
  grid-area: icon;
  width: 32px;
  height: 32px;
  margin: 0;
  flex: 0 0 auto;
  background: var(--graphite-deep);
  border-radius: 8px;
}
#screen-tools .tool-card-title {
  grid-area: title;
  align-self: center;
  margin: 0;
  font-family: 'Recoleta', serif;
  color: var(--off-white);
}
#screen-tools .tool-card-desc {
  grid-area: desc;
  margin: 0;
  font-family: 'General Sans', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--fog);
}
#screen-tools .tool-card-cta { grid-area: cta; margin: 8px 0 0; }

/* Tools-page active-context copy — surfaces "Tools will run for <name>". */
.tools-screen-active-context {
  display: none;
  margin: 10px 0 0;
  font-size: 0.84rem;
  color: var(--fog);
  font-family: 'General Sans', sans-serif;
}
.tools-screen-active-context.is-visible { display: block; }
.tools-screen-active-context__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 4px;
  background: rgba(93, 168, 162, 0.12);
  border: 1px solid rgba(93, 168, 162, 0.30);
  color: var(--teal);
  font-weight: 600;
  font-size: 0.78rem;
  margin-left: 6px;
}
.tools-screen-active-context__pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
}

/* ════════════════════════════════════════════════════════════════════
   Operational Depth pass (2026-05-27) — Account Operational Drawer.
   Persistent right-side panel aggregating every per-account surface
   into one operational view. Calm hierarchy, no flash, no flair.
   All state badges use the same restrained amber/teal/charcoal palette
   already in use across the platform — no new tokens.
   ════════════════════════════════════════════════════════════════════ */

.cov-op-drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 18, 22, 0.45);
  z-index: 998;
  opacity: 0; pointer-events: none;
  transition: opacity 0.18s ease;
}
.cov-op-drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }

.cov-op-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(520px, 92vw);
  background: var(--charcoal, #1c1f24);
  color: var(--off-white, #ece9df);
  border-left: 1px solid var(--hairline-dark, rgba(255,255,255,0.06));
  box-shadow: -6px 0 28px rgba(0,0,0,0.32);
  z-index: 999;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.2s ease;
  font-family: 'General Sans', sans-serif;
}
.cov-op-drawer.is-open { transform: translateX(0); }

.cov-op-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--hairline-dark);
  background: var(--charcoal);
  position: sticky; top: 0; z-index: 1;
}
.cov-op-drawer__eyebrow {
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fog, #94a3b8);
}
.cov-op-drawer__close {
  background: transparent; border: 1px solid transparent;
  color: var(--fog); font-size: 1.4rem; line-height: 1;
  width: 28px; height: 28px; border-radius: 6px; cursor: pointer;
}
.cov-op-drawer__close:hover {
  background: rgba(255,255,255,0.06); color: var(--off-white);
  border-color: var(--hairline-dark);
}

.cov-op-drawer__body {
  flex: 1; overflow-y: auto;
  padding: 14px 18px 80px;
  display: flex; flex-direction: column; gap: 16px;
}
.cov-op-drawer__body::-webkit-scrollbar { width: 6px; }
.cov-op-drawer__body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 3px; }

/* ── Header block ── */
.cov-op-header {
  padding: 4px 0 12px;
  border-bottom: 1px solid var(--hairline-dark);
}
.cov-op-header__name {
  font-family: 'Recoleta', serif;
  font-size: 1.2rem; font-weight: 700;
  color: var(--off-white); margin-bottom: 8px;
  line-height: 1.25;
}
.cov-op-header__pills { display: flex; gap: 6px; margin-bottom: 12px; }
.cov-op-header__meta {
  display: grid; grid-template-columns: 84px 1fr;
  gap: 4px 12px; margin: 0;
  font-size: 0.78rem;
}
.cov-op-header__meta dt {
  color: var(--fog); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.7rem;
}
.cov-op-header__meta dd { color: var(--off-white); margin: 0; }

.cov-op-pill {
  display: inline-flex; align-items: center; padding: 3px 8px;
  border-radius: 4px; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  border: 1px solid transparent;
}
.cov-op-pill--ok        { background: rgba(93,168,162,0.14); color: var(--teal); border-color: rgba(93,168,162,0.4); }
.cov-op-pill--attention { background: rgba(245,158,11,0.12); color: #fde68a; border-color: rgba(245,158,11,0.4); }
.cov-op-pill--urgent    { background: rgba(220,50,50,0.14);  color: #fecaca; border-color: rgba(220,50,50,0.45); }
.cov-op-pill--prospect  { background: rgba(255,255,255,0.06); color: var(--fog); border-color: rgba(255,255,255,0.12); }
.cov-op-pill--neutral   { background: rgba(255,255,255,0.04); color: var(--fog); border-color: rgba(255,255,255,0.08); }

/* ── Renewal strip ── */
.cov-op-renewal {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px;
  background: rgba(93,168,162,0.07);
  border: 1px solid rgba(93,168,162,0.25);
  border-radius: 8px;
}
.cov-op-renewal__row { display: flex; justify-content: space-between; font-size: 0.8rem; }
.cov-op-renewal__label { color: var(--fog); }
.cov-op-renewal__val   { color: var(--off-white); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Section container ── */
.cov-op-section {
  border: 1px solid var(--hairline-dark);
  border-radius: 8px;
  background: rgba(255,255,255,0.018);
  overflow: hidden;
}
.cov-op-section__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px; background: rgba(255,255,255,0.025);
  border-bottom: 1px solid var(--hairline-dark);
}
.cov-op-section__title {
  font-size: 0.74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--off-white);
}
.cov-op-section__count {
  font-size: 0.7rem; font-weight: 600;
  background: rgba(255,255,255,0.06);
  color: var(--fog);
  border-radius: 999px; padding: 1px 8px; min-width: 18px;
  text-align: center;
}
.cov-op-section__body { padding: 10px 14px; }
.cov-op-section--activity .cov-op-section__body { padding: 0; }

/* Lists shared rules */
.cov-op-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }

.cov-op-empty {
  color: var(--fog); font-size: 0.8rem; font-style: italic;
  padding: 4px 0;
}
.cov-op-empty--big { padding: 60px 20px; text-align: center; font-size: 0.9rem; }

/* ── Tags / state badges (reused across sections) ── */
.cov-op-tag {
  display: inline-block; padding: 1px 7px;
  border-radius: 3px; font-size: 0.64rem;
  font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  border: 1px solid transparent;
}
.cov-op-tag--ok               { background: rgba(93,168,162,0.14); color: var(--teal); border-color: rgba(93,168,162,0.4); }
.cov-op-tag--awaiting,
.cov-op-tag--awaiting-carrier,
.cov-op-tag--awaiting-insured { background: rgba(245,158,11,0.10); color: #fde68a; border-color: rgba(245,158,11,0.35); }
.cov-op-tag--blocked          { background: rgba(245,158,11,0.16); color: #fdba74; border-color: rgba(245,158,11,0.45); }
.cov-op-tag--review           { background: rgba(255,255,255,0.06); color: var(--off-white); border-color: rgba(255,255,255,0.12); }
.cov-op-tag--active           { background: rgba(93,168,162,0.10); color: var(--teal); border-color: rgba(93,168,162,0.3); }
.cov-op-tag--past-due         { background: rgba(220,50,50,0.16);  color: #fecaca; border-color: rgba(220,50,50,0.45); }
.cov-op-tag--sev-high         { background: rgba(220,50,50,0.16);  color: #fecaca; border-color: rgba(220,50,50,0.45); }
.cov-op-tag--sev-medium       { background: rgba(245,158,11,0.12); color: #fde68a; border-color: rgba(245,158,11,0.4); }
.cov-op-tag--sev-low          { background: rgba(255,255,255,0.05); color: var(--fog); border-color: rgba(255,255,255,0.10); }

/* ── Policies ── */
.cov-op-policy {
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--hairline-dark); border-radius: 6px;
  display: flex; flex-direction: column; gap: 4px;
}
.cov-op-policy__line1 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cov-op-policy__line2 { display: flex; align-items: baseline; gap: 10px; font-size: 0.74rem; color: var(--fog); flex-wrap: wrap; }
.cov-op-policy__lob   { font-weight: 700; color: var(--teal); font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase; flex-shrink: 0; }
.cov-op-policy__carrier { color: var(--off-white); font-weight: 500; font-size: 0.86rem; flex: 1; }
.cov-op-policy__prem  { color: var(--off-white); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.86rem; }
.cov-op-policy__num   { font-family: 'General Sans', monospace; color: var(--fog); }
.cov-op-policy__exp   { font-weight: 600; }
.cov-op-policy__exp--urgent { color: #fdba74; }
.cov-op-policy__exp--attention { color: #fde68a; }
.cov-op-policy__cov   { color: var(--fog); }

/* ── Claims ── */
.cov-op-claims__totals { font-size: 0.84rem; margin-bottom: 6px; color: var(--off-white); }
.cov-op-claims__last   { font-size: 0.78rem; color: var(--fog); line-height: 1.5; }
.cov-op-claims__last-lob, .cov-op-claims__last-paid { color: var(--off-white); font-weight: 500; }

/* ── Suspenses ── */
.cov-op-suspense {
  padding: 8px 12px; border-left: 3px solid var(--hairline-dark);
  background: rgba(255,255,255,0.025); border-radius: 4px;
}
.cov-op-suspense__title { font-size: 0.84rem; font-weight: 600; color: var(--off-white); }
.cov-op-suspense__meta  { font-size: 0.74rem; color: var(--fog); margin-top: 2px; }
.cov-op-suspense--urgent { border-left-color: rgba(245,158,11,0.7); }
.cov-op-suspense--past-due { border-left-color: rgba(220,50,50,0.7); }

/* ── Workflows ── */
.cov-op-workflow {
  padding: 8px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--hairline-dark); border-radius: 6px;
}
.cov-op-workflow__line1 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cov-op-workflow__title { font-size: 0.84rem; color: var(--off-white); font-weight: 600; }
.cov-op-workflow__meta  { font-size: 0.72rem; color: var(--fog); margin-top: 4px; }

/* ── Approvals ── */
.cov-op-approval {
  padding: 9px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--hairline-dark); border-radius: 6px;
}
.cov-op-approval__title   { font-size: 0.84rem; color: var(--off-white); font-weight: 600; }
.cov-op-approval__preview { font-size: 0.74rem; color: var(--fog); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cov-op-approval__meta    { font-size: 0.7rem; color: var(--fog); margin-top: 4px; }

/* ── Endorsements ── */
.cov-op-endorsement {
  padding: 9px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--hairline-dark); border-radius: 6px;
}
.cov-op-endorsement__title  { font-size: 0.84rem; color: var(--off-white); font-weight: 600; }
.cov-op-endorsement__meta   { font-size: 0.74rem; color: var(--fog); margin-top: 4px; }
.cov-op-endorsement__preview{ font-size: 0.74rem; color: var(--fog); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Risk flags ── */
.cov-op-flag {
  padding: 9px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--hairline-dark); border-radius: 6px;
  border-left-width: 3px;
}
.cov-op-flag--high   { border-left-color: rgba(220,50,50,0.65); }
.cov-op-flag--medium { border-left-color: rgba(245,158,11,0.65); }
.cov-op-flag--low    { border-left-color: rgba(255,255,255,0.14); }
.cov-op-flag__title  { font-size: 0.78rem; color: var(--off-white); font-weight: 600; }
.cov-op-flag__body   { font-size: 0.78rem; color: var(--fog); margin-top: 4px; line-height: 1.45; }
.cov-op-flag__rec    { font-size: 0.74rem; color: var(--off-white); margin-top: 4px; line-height: 1.45; }
.cov-op-flag__rec strong { color: var(--teal); }

/* ── Activity feed ── */
.cov-op-list--activity { gap: 0; }
.cov-op-activity {
  padding: 9px 14px;
  border-bottom: 1px solid var(--hairline-dark);
  border-left: 3px solid transparent;
}
.cov-op-activity:last-child { border-bottom: 0; }
.cov-op-activity--created { border-left-color: rgba(93,168,162,0.55); }
.cov-op-activity--sent    { border-left-color: rgba(93,168,162,0.85); }
.cov-op-activity--review  { border-left-color: rgba(255,255,255,0.20); }
.cov-op-activity--blocked { border-left-color: rgba(245,158,11,0.65); }
.cov-op-activity--neutral { border-left-color: rgba(255,255,255,0.08); }
.cov-op-activity__row    { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cov-op-activity__type   { font-size: 0.74rem; font-weight: 700; color: var(--off-white); text-transform: uppercase; letter-spacing: 0.04em; }
.cov-op-activity__ts     { font-size: 0.7rem; color: var(--fog); white-space: nowrap; }
.cov-op-activity__desc   { font-size: 0.78rem; color: var(--fog); margin-top: 3px; line-height: 1.5; }

/* ── Recent artifacts ── */
.cov-op-art {
  padding: 8px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--hairline-dark); border-radius: 6px;
}
.cov-op-art__title   { font-size: 0.8rem; color: var(--off-white); font-weight: 600; }
.cov-op-art__summary { font-size: 0.74rem; color: var(--fog); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cov-op-art__ts      { font-size: 0.7rem; color: var(--fog); margin-top: 2px; }
.cov-op-art--sent     { border-color: rgba(93,168,162,0.35); }
.cov-op-art--approved { border-color: rgba(93,168,162,0.25); }

/* ── Active-account chip "View account" button (Operational Depth wiring) ── */
.cov-op-open-btn {
  margin-left: 8px; padding: 4px 10px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.16);
  color: var(--fog);
  border-radius: 4px;
  font-family: 'General Sans', sans-serif;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}
.cov-op-open-btn:hover {
  background: var(--teal); color: var(--charcoal);
  border-color: var(--teal);
}

/* ════════════════════════════════════════════════════════════════════
   Account Operations pass (2026-05-27) — Drawer evolves from status
   display into operational command surface. Action bar, policy detail,
   inline approval actions, artifact-memory chips. Visual hierarchy
   tightened — fewer teal accents in chrome, stronger typography ramp.
   ════════════════════════════════════════════════════════════════════ */

/* ── Action bar at the top of the account view ── */
.cov-op-actionbar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin: 6px 0 2px;
}
@media (min-width: 520px) {
  .cov-op-actionbar { grid-template-columns: repeat(3, 1fr); }
}
.cov-op-action {
  font-family: 'General Sans', sans-serif;
  font-size: 0.78rem; font-weight: 600;
  padding: 9px 10px;
  background: rgba(255,255,255,0.04);
  color: var(--off-white);
  border: 1px solid var(--hairline-dark);
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  transition: background 100ms ease, border-color 100ms ease;
  line-height: 1.2;
}
.cov-op-action:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
}
.cov-op-action:disabled {
  opacity: 0.55; cursor: progress;
}
.cov-op-action--primary {
  background: rgba(93,168,162,0.10);
  border-color: rgba(93,168,162,0.30);
  color: var(--off-white);
}
.cov-op-action--primary:hover {
  background: var(--teal);
  color: var(--charcoal);
  border-color: var(--teal);
}

/* ── Inline approval buttons (per pending-review card) ── */
.cov-op-approval__actions {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 8px;
}
.cov-op-approval__btn {
  font-family: 'General Sans', sans-serif;
  font-size: 0.72rem; font-weight: 600;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid var(--hairline-dark);
  background: transparent;
  color: var(--off-white);
  transition: background 100ms ease, border-color 100ms ease;
}
.cov-op-approval__btn:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
}
.cov-op-approval__btn--primary {
  background: rgba(93,168,162,0.12);
  border-color: rgba(93,168,162,0.35);
}
.cov-op-approval__btn--primary:hover {
  background: var(--teal); color: var(--charcoal); border-color: var(--teal);
}
.cov-op-approval__btn--warn {
  background: rgba(220,50,50,0.08);
  border-color: rgba(220,50,50,0.32);
  color: #fecaca;
}
.cov-op-approval__btn--warn:hover {
  background: rgba(220,50,50,0.18);
  border-color: rgba(220,50,50,0.55);
  color: var(--off-white);
}
.cov-op-approval__btn--carrier {
  background: rgba(245,158,11,0.10);
  border-color: rgba(245,158,11,0.35);
  color: #fde68a;
}
.cov-op-approval__btn--carrier:hover {
  background: rgba(245,158,11,0.20);
  border-color: rgba(245,158,11,0.6);
}

/* ── Clickable policy row ── */
.cov-op-policy--clickable {
  position: relative;
  cursor: pointer;
  transition: background 100ms ease, border-color 100ms ease;
}
.cov-op-policy--clickable:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.18);
}
.cov-op-policy__chev {
  margin-left: auto;
  color: var(--fog);
  font-size: 1rem;
  line-height: 1;
}

/* ── Policy detail view ── */
.cov-op-policy-detail {
  display: flex; flex-direction: column; gap: 14px;
}
.cov-op-policy-detail__head {
  display: flex; flex-direction: column; gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline-dark);
}
.cov-op-back {
  align-self: flex-start;
  background: transparent; border: 1px solid var(--hairline-dark);
  color: var(--fog);
  font-family: 'General Sans', sans-serif;
  font-size: 0.74rem; font-weight: 600;
  padding: 4px 10px; border-radius: 5px;
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease;
}
.cov-op-back:hover {
  background: rgba(255,255,255,0.06);
  color: var(--off-white);
  border-color: rgba(255,255,255,0.18);
}
.cov-op-policy-detail__title {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
}
.cov-op-policy-detail__lob {
  font-family: 'Recoleta', serif;
  font-size: 1.0rem; font-weight: 700;
  color: var(--teal);
  letter-spacing: 0.03em; text-transform: uppercase;
}
.cov-op-policy-detail__carrier {
  font-family: 'Recoleta', serif;
  font-size: 1.05rem; color: var(--off-white); font-weight: 700;
}
.cov-op-policy-detail__naic {
  font-size: 0.72rem; color: var(--fog);
  letter-spacing: 0.04em;
}
.cov-op-policy-detail__meta {
  display: grid; grid-template-columns: 92px 1fr;
  gap: 4px 14px; margin: 0;
  font-size: 0.78rem;
  padding: 12px 14px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--hairline-dark); border-radius: 8px;
}
.cov-op-policy-detail__meta dt {
  color: var(--fog); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.68rem;
}
.cov-op-policy-detail__meta dd { color: var(--off-white); margin: 0; }

/* ── Coverages list inside policy detail ── */
.cov-op-coverage {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 10px;
  padding: 7px 10px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--hairline-dark);
  border-radius: 5px;
  font-size: 0.8rem;
  align-items: baseline;
}
.cov-op-coverage__cat {
  font-size: 0.66rem; color: var(--fog);
  letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600;
}
.cov-op-coverage__kind { color: var(--off-white); }
.cov-op-coverage__amt {
  color: var(--off-white); font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ── Artifact memory chips ── */
.cov-op-chips {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-bottom: 10px;
}
.cov-op-chip {
  font-family: 'General Sans', sans-serif;
  font-size: 0.7rem; font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--hairline-dark);
  color: var(--fog);
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
  display: inline-flex; align-items: center; gap: 5px;
}
.cov-op-chip:hover {
  background: rgba(255,255,255,0.08);
  color: var(--off-white);
}
.cov-op-chip.is-active {
  background: rgba(93,168,162,0.18);
  border-color: rgba(93,168,162,0.5);
  color: var(--off-white);
}
.cov-op-chip.is-dim { opacity: 0.45; }
.cov-op-chip__count {
  font-size: 0.65rem;
  background: rgba(255,255,255,0.08);
  color: var(--fog);
  border-radius: 999px;
  padding: 0 6px; min-width: 16px; text-align: center;
}
.cov-op-chip.is-active .cov-op-chip__count {
  background: rgba(93,168,162,0.32); color: var(--off-white);
}

/* ── Visual hierarchy tightening (Account Operations pass) ──
   Quieter section headers — no per-section teal accent.
   Stronger typographic ramp between section title and content.
   Tightened section spacing for operational density without crowding.
*/
.cov-op-drawer__body { gap: 14px; }
.cov-op-section__head {
  /* slightly stronger contrast on the head bar but no teal accent */
  background: rgba(255,255,255,0.035);
}
.cov-op-section__title {
  /* Drop the teal accent — section titles are typographic only */
  color: var(--off-white);
  font-size: 0.7rem;
}

/* Policy detail meta lays out more compactly */
.cov-op-policy-detail__meta dd { font-weight: 500; }

/* ════════════════════════════════════════════════════════════════════
   Operational Continuity pass (2026-05-27).
   Inbound section · Resume banner · Date-grouped activity feed ·
   Continue-where-you-left-off home strip · final tone-down.
   ════════════════════════════════════════════════════════════════════ */

/* ── Resume banner inside the drawer header ── */
.cov-op-resume {
  margin-top: 12px; padding: 11px 14px;
  background: rgba(93,168,162,0.07);
  border: 1px solid rgba(93,168,162,0.22);
  border-radius: 8px;
}
.cov-op-resume__eyebrow {
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--teal);
  display: block; margin-bottom: 4px;
}
.cov-op-resume__msg {
  font-size: 0.86rem; color: var(--off-white);
  line-height: 1.4;
}

/* ── Inbound section ── */
.cov-op-section--inbound .cov-op-section__body { padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.cov-op-inbound-block {
  border: 1px solid var(--hairline-dark); border-radius: 7px;
  overflow: hidden;
}
.cov-op-inbound-block__head {
  padding: 7px 12px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--off-white);
  background: rgba(255,255,255,0.035);
  border-bottom: 1px solid var(--hairline-dark);
  display: flex; justify-content: space-between; align-items: center;
}
.cov-op-inbound-block--us .cov-op-inbound-block__head {
  background: rgba(245,158,11,0.10);
  color: #fde68a;
  border-bottom-color: rgba(245,158,11,0.22);
}
.cov-op-inbound-block__count {
  background: rgba(255,255,255,0.06); color: var(--fog);
  font-weight: 600; font-size: 0.66rem;
  border-radius: 999px; padding: 0 8px; min-width: 18px; text-align: center;
}
.cov-op-inbound-block--us .cov-op-inbound-block__count {
  background: rgba(245,158,11,0.16); color: #fde68a;
}
.cov-op-inbound-block ul { padding: 0; margin: 0; }
.cov-op-inbound {
  list-style: none; padding: 9px 12px;
  border-bottom: 1px solid var(--hairline-dark);
  background: rgba(255,255,255,0.018);
}
.cov-op-inbound:last-child { border-bottom: 0; }
.cov-op-inbound--us { border-left: 2px solid rgba(245,158,11,0.4); }
.cov-op-inbound--them { border-left: 2px solid rgba(255,255,255,0.10); }
.cov-op-inbound__row1 {
  display: flex; gap: 8px; align-items: baseline;
  font-size: 0.74rem;
}
.cov-op-inbound__sender { color: var(--off-white); font-weight: 600; }
.cov-op-inbound__org    { color: var(--fog); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cov-op-inbound__age    { color: var(--fog); font-size: 0.7rem; white-space: nowrap; }
.cov-op-inbound__subj   { font-size: 0.84rem; color: var(--off-white); margin-top: 4px; font-weight: 500; }
.cov-op-inbound__snip   { font-size: 0.76rem; color: var(--fog); margin-top: 3px; line-height: 1.5; }

/* ── Activity feed: date-grouped headers ── */
.cov-op-section--activity .cov-op-section__body { padding: 0; }
.cov-op-activity-group { padding: 0; }
.cov-op-activity-group__head {
  padding: 7px 14px;
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fog);
  background: rgba(255,255,255,0.025);
  border-top: 1px solid var(--hairline-dark);
  border-bottom: 1px solid var(--hairline-dark);
  display: flex; gap: 8px; align-items: baseline;
}
.cov-op-activity-group:first-child .cov-op-activity-group__head { border-top: 0; }
.cov-op-activity-group__count {
  color: var(--fog); font-weight: 600; font-size: 0.66rem;
}
.cov-op-activity__actor {
  font-size: 0.72rem; color: var(--fog); margin-top: 2px;
  font-style: italic;
}

/* ── Continue where you left off (home) ── */
.home-cwleo[hidden] { display: none; }
.home-cwleo {
  padding: 18px 28px 20px;
  background: var(--charcoal);
  border-bottom: 1px solid var(--hairline-dark);
}
.home-cwleo__head {
  display: flex; gap: 12px; align-items: baseline;
  margin-bottom: 12px;
}
.home-cwleo__eyebrow {
  font-family: 'General Sans', sans-serif;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--teal);
}
.home-cwleo__hint {
  font-size: 0.78rem; color: var(--fog);
}
.home-cwleo__list {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.home-cwleo-card {
  background: var(--graphite);
  border: 1px solid var(--hairline-dark);
  border-radius: 8px;
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  color: var(--off-white);
  font-family: 'General Sans', sans-serif;
  transition: background 100ms ease, border-color 100ms ease;
  display: flex; flex-direction: column; gap: 5px;
}
.home-cwleo-card:hover {
  background: var(--graphite-deep);
  border-color: rgba(93,168,162,0.4);
}
.home-cwleo-card__name {
  font-size: 0.92rem; font-weight: 600;
  color: var(--off-white);
}
.home-cwleo-card__age {
  font-size: 0.72rem; color: var(--fog);
}
.home-cwleo-card__tags {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-top: 4px;
}
.home-cwleo-tag {
  font-size: 0.66rem; font-weight: 600;
  background: rgba(255,255,255,0.06); color: var(--fog);
  padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--hairline-dark);
}
.home-cwleo-tag--blocked {
  background: rgba(245,158,11,0.10); color: #fdba74;
  border-color: rgba(245,158,11,0.35);
}
.home-cwleo-tag--carrier {
  background: rgba(245,158,11,0.10); color: #fde68a;
  border-color: rgba(245,158,11,0.35);
}

/* ── Final tone-down: quieter section heads, less teal in chrome ──
   The "operational view" eyebrow was tinted teal; pull it back to fog
   so the only teal accent in the drawer chrome is the win-state and the
   active filter chip. Calmer, more "Applied Epic / Linear" feel. */
.cov-op-drawer__eyebrow { color: var(--fog); }
.cov-op-section__head { background: rgba(255,255,255,0.025); }
.cov-op-section__title { color: var(--off-white); }

/* ════════════════════════════════════════════════════════════════════
   Workflow Trust Hardening pass (2026-05-27)
   Unified workflow-state badge · inbound action buttons · endorsement
   detail surface · final visual tone-down toward enterprise/UW-workstation.
   ════════════════════════════════════════════════════════════════════ */

/* ── Canonical workflow-state badge (CovrWorkflowStates.badgeHTML) ──
   ONE shape used across drawer, review queue, endorsement detail,
   artifact memory, inbound items. Replaces the ad-hoc cov-op-tag
   spread of the prior passes. The CSS keeps the calmer enterprise
   palette — no neon, no glow. */
.wf-state {
  display: inline-block;
  font-family: 'General Sans', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid transparent;
  vertical-align: middle;
  line-height: 1.25;
}
.wf-state--sm { font-size: 0.62rem; padding: 1px 6px; letter-spacing: 0.05em; }

.wf-state--ok       { background: rgba(93,168,162,0.14);  color: var(--teal);     border-color: rgba(93,168,162,0.35); }
.wf-state--active   { background: rgba(93,168,162,0.08);  color: var(--teal);     border-color: rgba(93,168,162,0.25); }
.wf-state--review   { background: rgba(255,255,255,0.06); color: var(--off-white);border-color: rgba(255,255,255,0.16); }
.wf-state--awaiting { background: rgba(245,158,11,0.10);  color: #fde68a;         border-color: rgba(245,158,11,0.30); }
.wf-state--blocked  { background: rgba(245,158,11,0.16);  color: #fdba74;         border-color: rgba(245,158,11,0.40); }
.wf-state--warn     { background: rgba(220,50,50,0.10);   color: #fecaca;         border-color: rgba(220,50,50,0.35); }
.wf-state--neutral  { background: rgba(255,255,255,0.04); color: var(--fog);      border-color: rgba(255,255,255,0.10); }

/* ── Inbound action buttons (per-row) ── */
.cov-op-inbound__actions {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-top: 8px;
}
.cov-op-inbound__btn {
  background: transparent;
  border: 1px solid var(--hairline-dark);
  color: var(--off-white);
  font-family: 'General Sans', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  padding: 4px 9px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 100ms ease, border-color 100ms ease;
}
.cov-op-inbound__btn:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
}
.cov-op-inbound__btn:disabled { opacity: 0.55; cursor: progress; }
.cov-op-inbound__btn--primary {
  background: rgba(93,168,162,0.10);
  border-color: rgba(93,168,162,0.32);
}
.cov-op-inbound__btn--primary:hover {
  background: var(--teal); color: var(--charcoal); border-color: var(--teal);
}

/* ── Endorsement detail surface ── */
.cov-op-endorsement-detail { display: flex; flex-direction: column; gap: 14px; }
.cov-op-endorsement-detail__badges {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 6px;
}
.cov-op-endorsement-detail__fields {
  display: grid; grid-template-columns: 1fr 2fr;
  gap: 4px 12px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--hairline-dark);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 0;
}
.cov-op-endorsement-detail__fields dt {
  color: var(--fog);
  font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.cov-op-endorsement-detail__fields dd {
  color: var(--off-white);
  margin: 0;
  font-size: 0.84rem;
}
.cov-op-endorsement-detail__next {
  font-size: 0.86rem;
  color: var(--off-white);
  line-height: 1.5;
}
.cov-op-outstanding {
  list-style: none;
  font-size: 0.84rem;
  color: var(--off-white);
  padding: 6px 12px;
  background: rgba(245,158,11,0.06);
  border-left: 2px solid rgba(245,158,11,0.35);
  border-radius: 4px;
}
.cov-op-endorsement-detail__timeline {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.cov-op-endorsement-detail__timeline li {
  display: grid; grid-template-columns: 110px 1fr;
  gap: 8px;
  font-size: 0.78rem;
  padding: 6px 12px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--hairline-dark);
  border-radius: 4px;
}
.cov-op-endorsement-detail__timeline .ts {
  color: var(--fog); font-variant-numeric: tabular-nums;
}
.cov-op-endorsement-detail__timeline .lbl { color: var(--off-white); }

/* Make the existing endorsement card clickable + chevron */
.cov-op-endorsement--clickable {
  position: relative;
  cursor: pointer;
  transition: background 100ms ease, border-color 100ms ease;
}
.cov-op-endorsement--clickable:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.18);
}
.cov-op-endorsement--clickable .cov-op-policy__chev {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  color: var(--fog);
}

/* ── Final visual tone-down ──────────────────────────────────────────
   Push the drawer further toward "enterprise UW workstation" feel:
   - empty states quieter, less placeholder-y
   - drawer body background slightly lower contrast
   - card hover state more restrained (no transform, calmer border tint)
   - typography ramp tighter between title/meta/action
   The directive's request: "less AI app, more serious operations tooling."
*/
.cov-op-drawer { background: #15181c; }    /* slightly darker than --charcoal for less "card stack" feel */
.cov-op-drawer__body { padding: 16px 18px 80px; }

.cov-op-section {
  background: rgba(255,255,255,0.015);
}
.cov-op-section__head {
  background: rgba(255,255,255,0.02);
  padding: 8px 14px;
}
.cov-op-section__title {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--fog);   /* demoted from off-white so the body content wins */
}
.cov-op-section__count {
  background: transparent;
  border: 1px solid var(--hairline-dark);
  color: var(--fog);
  font-weight: 600;
}

.cov-op-empty {
  font-style: normal;        /* italics looked too "placeholder" */
  color: rgba(255,255,255,0.32);
  padding: 12px 6px;
  font-size: 0.78rem;
}
.cov-op-empty--big {
  padding: 60px 24px;
  text-align: center;
  font-size: 0.84rem;
}

/* Cards: remove hover transform; rely on background+border for affordance.
   No glow. */
.cov-op-policy--clickable:hover,
.cov-op-endorsement--clickable:hover {
  transform: none;
}

/* Activity feed: tighter grouping, slightly cooler tone */
.cov-op-activity-group__head {
  background: rgba(255,255,255,0.018);
  color: rgba(255,255,255,0.45);
}
.cov-op-activity {
  background: transparent;
}
.cov-op-activity__type { font-weight: 600; }
.cov-op-activity__actor { color: rgba(255,255,255,0.38); font-style: normal; }
.cov-op-activity__desc { color: rgba(255,255,255,0.66); }

/* Action bar: pull back the primary lean — only the truly primary "Run
   market intel" and "Build proposal" stay tinted; the rest are neutral. */
.cov-op-action {
  background: transparent;
  border-color: var(--hairline-dark);
}
.cov-op-action--primary {
  background: rgba(93,168,162,0.06);
  border-color: rgba(93,168,162,0.25);
}

/* ════════════════════════════════════════════════════════════════════
   Realism-Hardening pass (2026-05-27)
   Operator notes section · endorsement closure buttons · synthetic-stream
   labels. Same restrained palette; no new tokens.
   ════════════════════════════════════════════════════════════════════ */

/* ── Operator notes ── */
.cov-op-notes-input {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 12px;
}
.cov-op-notes-input__field {
  width: 100%;
  min-height: 56px; max-height: 200px;
  resize: vertical;
  font-family: 'General Sans', sans-serif;
  font-size: 0.84rem;
  line-height: 1.45;
  padding: 9px 11px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--hairline-dark);
  border-radius: 6px;
  color: var(--off-white);
  box-sizing: border-box;
}
.cov-op-notes-input__field:focus {
  outline: none;
  border-color: rgba(93,168,162,0.5);
  background: rgba(255,255,255,0.06);
}
.cov-op-notes-input__btn {
  align-self: flex-start;
  font-family: 'General Sans', sans-serif;
  font-size: 0.74rem; font-weight: 600;
  padding: 6px 12px;
  border-radius: 5px;
  cursor: pointer;
  background: rgba(93,168,162,0.10);
  border: 1px solid rgba(93,168,162,0.32);
  color: var(--off-white);
  transition: background 100ms ease, border-color 100ms ease;
}
.cov-op-notes-input__btn:hover {
  background: var(--teal); color: var(--charcoal); border-color: var(--teal);
}

.cov-op-list--notes { gap: 6px; }
.cov-op-note {
  padding: 9px 12px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--hairline-dark);
  border-left: 2px solid rgba(93,168,162,0.3);
  border-radius: 5px;
}
.cov-op-note__head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.7rem;
  margin-bottom: 4px;
}
.cov-op-note__author { color: var(--off-white); font-weight: 600; }
.cov-op-note__ts     { color: var(--fog); }
.cov-op-note__body {
  font-size: 0.84rem;
  color: var(--off-white);
  line-height: 1.5;
  white-space: pre-wrap;
}

/* ── Endorsement closure inline actions ── */
.cov-op-endorsement-detail__actions {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 8px;
}
.cov-op-endorsement-detail__btn {
  font-family: 'General Sans', sans-serif;
  font-size: 0.74rem; font-weight: 600;
  padding: 6px 12px;
  border-radius: 5px;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--hairline-dark);
  color: var(--off-white);
  transition: background 100ms ease, border-color 100ms ease;
}
.cov-op-endorsement-detail__btn:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
}
.cov-op-endorsement-detail__btn--primary {
  background: rgba(93,168,162,0.12);
  border-color: rgba(93,168,162,0.35);
}
.cov-op-endorsement-detail__btn--primary:hover {
  background: var(--teal); color: var(--charcoal); border-color: var(--teal);
}

/* ── Synthetic-stream label (inside Inbound section) ── */
.cov-op-inbound-synthetic strong { color: #fdba74; }

/* ════════════════════════════════════════════════════════════════════
 * Visual-coherence pass II (2026-05-31) — dark-surface conversion for the
 * Awaiting Review + Suspense Center screens, home empty-state collapse.
 * Scoped to each screen id so shared components keep their other contexts.
 * ════════════════════════════════════════════════════════════════════ */

/* ── Awaiting Review (#screen-approvals) — was cream body + white cards ── */
#screen-approvals {
  background: var(--charcoal);
  overflow-y: auto;
}
#screen-approvals .approvals-title { color: var(--off-white); }
#screen-approvals .approvals-sub { color: var(--fog); }
#screen-approvals .approvals-tabs { background: var(--graphite-deep); }
#screen-approvals .approvals-tab { color: var(--fog); }
#screen-approvals .approvals-tab:hover { color: var(--off-white); }
#screen-approvals .approvals-tab.active {
  background: var(--graphite);
  color: var(--off-white);
}
#screen-approvals .approvals-tab span {
  background: rgba(236, 233, 223, 0.10);
  color: var(--fog);
}
#screen-approvals .approval-card {
  background: var(--graphite);
  border: 1px solid var(--hairline-dark);
}
#screen-approvals .approval-card:hover { border-color: var(--teal); }
#screen-approvals .approval-card-title { color: var(--off-white); }
#screen-approvals .approval-preview {
  color: var(--fog);
  background: var(--graphite-deep);
}
#screen-approvals .approval-edit-textarea {
  background: var(--graphite-deep);
  color: var(--off-white);
  border-color: var(--hairline-dark);
}
#screen-approvals .approvals-empty { color: var(--fog); }
#screen-approvals .approvals-empty-title { color: var(--off-white); }
#screen-approvals .approvals-empty-sub { color: var(--fog); }

/* ── Suspense Center (#screen-suspenses) — charcoal surface, graphite rows,
 *    legible text, divider strip matched to the surface. Pinned cards are
 *    already graphite/off-white; list rows were white w/ dark text. ── */
#screen-suspenses { background: var(--charcoal); }
#screen-suspenses .sus-shell { background: var(--charcoal); color: var(--off-white); }
#screen-suspenses .sus-toolbar {
  background: var(--charcoal);
  border-top: 1px solid var(--hairline-dark);
  border-bottom: 1px solid var(--hairline-dark);
}
#screen-suspenses .sus-search,
#screen-suspenses .sus-select {
  background: var(--graphite);
  color: var(--off-white);
  border: 1px solid var(--hairline-dark);
}
#screen-suspenses .sus-search::placeholder { color: var(--fog); }
#screen-suspenses .sus-row {
  background: var(--graphite);
  border: 1px solid var(--hairline-dark);
}
#screen-suspenses .sus-row:hover { background: var(--graphite-deep); }
#screen-suspenses .sus-row-title { color: var(--off-white); }
#screen-suspenses .sus-row-meta { color: var(--fog); }
#screen-suspenses .sus-row-due { color: var(--off-white); }
#screen-suspenses .sus-row-due-date { color: var(--fog); }

/* ── Home contextual workflow rail — collapse the mount entirely (incl. its
 *    margins) when the only thing inside is the "No active workflows" empty
 *    state, so there's no dead band between the renewal snapshot + suspenses. */
#suspense-rail:has(> .wf-empty) { display: none; }

/* ════════════════════════════════════════════════════════════════════
 * Agent strip composer — make the "Ask the agent" bar noticeable.
 * It used to read as inert chrome (faint off-white border, teal only on
 * hover/focus). Give it a resting brand-teal edge + a soft, slow glow so
 * the eye lands on it; the glow settles into a crisp focus ring while the
 * operator is actually typing. Tuned subtle on purpose — not neon.
 * ════════════════════════════════════════════════════════════════════ */
.agent-strip-composer {
  border-color: color-mix(in srgb, var(--teal) 50%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--teal) 22%, transparent),
    0 0 16px -3px color-mix(in srgb, var(--teal) 38%, transparent);
  animation: covr-composer-glow 3.6s ease-in-out infinite;
}
@keyframes covr-composer-glow {
  0%, 100% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--teal) 20%, transparent),
      0 0 13px -4px color-mix(in srgb, var(--teal) 30%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--teal) 36%, transparent),
      0 0 24px -2px color-mix(in srgb, var(--teal) 55%, transparent);
  }
}
.agent-strip-composer:hover {
  border-color: var(--teal);
}
/* While typing: stop the pulse, settle to a clean teal ring + steady glow. */
.agent-strip-composer:focus-within {
  animation: none;
  border-color: var(--teal);
  box-shadow:
    0 0 0 2px var(--teal),
    0 0 22px -3px color-mix(in srgb, var(--teal) 50%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .agent-strip-composer { animation: none; }
}