/*
 * Sending Configuration configurator chrome.
 *
 * Three labeled clusters (Delivery / Address / Sender), flat tiles
 * with a single popover at a time, hover-trace dim + color-coded
 * relationship glow, single-blue flash for the user's own cascade
 * changes, double-ring gray for external (other-user) changes.
 *
 * Spec: docs/handoff/audience-marketing/sending-configurator/
 *       CONFIGURATOR-BEHAVIOR-SPEC.md
 *
 * The visual treatment uses design-system tokens — no per-component
 * color escapes.
 */

/* ===== Badge ("send-cfg-zone") and edit-in-place drawer =====
   Per BADGE-DRAWER-DECISION.md. Appears on Send cards (Campaign
   page) and the Send detail page. The badge is the resting display
   of which configuration this Send uses; clicking it opens the
   drawer with the same configurator inside. */

.send-cfg-zone {
  background: var(--color-slate-50);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 8px 10px;
  cursor: pointer;
  transition: border-color var(--t-fast), background-color var(--t-fast);
  font-family: var(--font-sans);
  color: var(--fg);
  text-align: left;
}
/* Inside a Send card's two-column body grid, the configuration
   zone spans both columns — there's only one per Send, so a single
   column would leave a dead corner. */
.cpv1-send-body > .send-cfg-zone { grid-column: 1 / -1; }
.send-cfg-zone:hover {
  border-color: var(--border-strong);
  background: var(--surface);
}
.send-cfg-zone--empty {
  background: transparent;
  border-style: dashed;
}
/* Locked variant for data-locked Sends (sending / sent / failed).
   Same facets as the live badge, but non-interactive: cursor reverts
   to default, hover doesn't change the border, and a small "Locked"
   tag sits next to the label. */
.send-cfg-zone--locked {
  cursor: default;
  background: var(--color-slate-50);
}
.send-cfg-zone--locked:hover {
  border-color: var(--border);
  background: var(--color-slate-50);
}
.send-cfg-zone-locked-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
  font-weight: 600;
}
.send-cfg-zone-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 2px;
}
.send-cfg-zone-name {
  display: block;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg);
  line-height: 1.25;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.send-cfg-zone-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
  font-weight: 600;
}
.send-cfg-zone-edit {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-blue-700);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.send-cfg-zone:hover .send-cfg-zone-edit { text-decoration: underline; }
/* Two-column field grid. Each row-item is a self-contained label +
   value pair so Platform / ESP can sit side-by-side; long values
   (From, Account) use .row-item--full to span both columns. Every
   value truncates one line with ellipsis so a single long string
   can't blow the card width. */
.send-cfg-zone-rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 14px;
}
.send-cfg-zone-rows .row-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.send-cfg-zone-rows .row-item--full {
  grid-column: 1 / -1;
}
.send-cfg-zone-rows .row-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.send-cfg-zone-rows .row-value {
  font-size: 12px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.send-cfg-zone-from-mono {
  font-family: var(--font-mono);
  font-size: 12px;
}
.send-cfg-zone-from-name { font-weight: 600; }
.send-cfg-zone-empty-text {
  border: 0;
  background: transparent;
  color: var(--fg-muted);
  font-style: italic;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  text-align: left;
}
.send-cfg-zone-empty-text:hover { color: var(--fg); }

/* Drawer + scrim. The scrim is the dimmed background overlay; the
   drawer slides in from the right. Both share a single Stimulus
   controller (data-controller="sending-config-drawer") which manages
   open/close state and proxies Done / Cancel into the configurator
   controller inside the drawer body. */
.sc-scrim {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease-out;
  z-index: 1100;
}
.sc-scrim.sc-scrim--open {
  opacity: 1;
  pointer-events: auto;
}
.sc-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 430px;
  max-width: 92vw;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -12px 0 40px -16px rgba(15, 23, 42, 0.3);
  transform: translateX(100%);
  transition: transform 240ms ease-out;
  z-index: 1200;
  display: flex;
  flex-direction: column;
}
.sc-drawer.sc-drawer--open { transform: none; }
.sc-drawer-head {
  padding: 15px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.sc-drawer-head-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sc-drawer-prefix {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--fg-muted);
  font-weight: 600;
}
.sc-drawer-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--fg);
}
.sc-drawer-sub {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--fg-muted);
  margin-top: 2px;
}
.sc-drawer-x {
  margin-left: auto;
  border: 0;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  color: var(--fg-faint);
  cursor: pointer;
  padding: 0;
}
.sc-drawer-x:hover { color: var(--fg); }
.sc-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
}

/* ===== Persona picker — the voice for the Send ===== */
.sc-persona-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
.sc-persona-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
  font-weight: 600;
}
.sc-persona-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  padding: 8px 12px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--fg);
  cursor: pointer;
}
.sc-persona-trigger:hover { border-color: var(--border-strong); }
.sc-persona-chev { color: var(--fg-muted); font-size: 10px; }
.sc-persona-picker {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  z-index: 50;
  max-height: 320px;
  display: flex;
  flex-direction: column;
}
.sc-persona-picker[hidden] { display: none; }
.sc-persona-search {
  border: 0;
  border-bottom: 1px solid var(--border);
  padding: 8px 12px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  outline: 0;
}
.sc-persona-search:focus {
  box-shadow: inset 0 -2px 0 var(--color-blue-500);
}
.sc-persona-list {
  overflow-y: auto;
  flex: 1;
}
.sc-persona-option {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-faint);
  padding: 10px 12px;
  font-family: var(--font-sans);
  color: var(--fg);
  cursor: pointer;
}
.sc-persona-option:hover { background: var(--color-slate-50); }
.sc-persona-option--sel { background: var(--color-blue-50); }
.sc-persona-option--off {
  color: var(--fg-faint);
  cursor: not-allowed;
}
.sc-persona-option--off:hover { background: transparent; }
.sc-persona-stack {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.sc-persona-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 8px;
  align-items: baseline;
  min-width: 0;
}
.sc-persona-row-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
  font-weight: 600;
}
.sc-persona-row-value {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.sc-persona-check {
  color: var(--color-blue-700);
  font-weight: 600;
}
.sc-persona-empty {
  padding: 12px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--fg-muted);
  font-style: italic;
}

/* Foot has two rows on the narrow drawer column:
     Row 1 — [Done] [Cancel] ………… [hint]
     Row 2 — [Detach configuration] ………… [Create new sending configuration →]
   Detach is hidden when there's no current attachment to remove. */
.sc-drawer-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-areas:
    "done cancel hint"
    "extras extras extras";
  gap: 8px 12px;
  align-items: center;
}
.sc-drawer-foot > .sc-btn--save   { grid-area: done; }
.sc-drawer-foot > .sc-btn--cancel { grid-area: cancel; }
.sc-drawer-hint {
  grid-area: hint;
  justify-self: end;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--fg-muted);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.sc-drawer-hint--error {
  color: var(--color-danger-text);
}
.sc-drawer-foot-extras {
  grid-area: extras;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.sc-drawer-detach {
  background: transparent;
  border: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--color-danger-text);
  cursor: pointer;
}
.sc-drawer-detach:hover {
  text-decoration: underline;
}
.sc-drawer-detach[hidden] {
  display: none;
}
.sc-drawer-create-new {
  justify-self: end;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--color-blue-700);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.sc-drawer-create-new:hover {
  border-bottom-color: currentcolor;
}

/* Inside the drawer the cluster grid stacks single-column (no 3-up
   or 2-up rows) because the drawer is narrow. The configurator's
   board target is reused as-is; only the column template changes. */
.sc-drawer .cluster-row--3,
.sc-drawer .cluster-row--2,
.sc-drawer .cluster-row--1 {
  grid-template-columns: minmax(0, 1fr);
}

/* The body's two-column grid extends to the viewport bottom so the
   vertical hairline between the work column and the facts column
   has no visible end-edge. The min-height fudge factor is the
   approximate combined height of the global toplinks + the AM
   subnav above the cpv1-body. */
.cpv1-body.sc-page .cpv1-detail {
  min-height: calc(100vh - 200px);
}
.cpv1-body.sc-page .cpv1-work { padding-bottom: 24px; }

/* ===== Page-head state badge (Active / Inactive) ===== */
/* New variants in the cpv1-badge family for Sending Configurations.
   Follow the same tinted-pill pattern as state-approved/archived in
   campaign_page.css §state badges. */
.cpv1-body .cpv1-badge--state-active {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
}
.cpv1-body .cpv1-badge--state-active.cpv1-badge--clickable:hover { background: #dcfce7; }
.cpv1-body .cpv1-badge--state-inactive {
  background: var(--color-slate-50);
  border: 1px solid var(--color-slate-300);
  color: var(--color-slate-600);
}
.cpv1-body .cpv1-badge--state-inactive.cpv1-badge--clickable:hover { background: var(--color-slate-100); }

/* ===== Outer container ===== */
.sc-configurator {
  font-family: var(--font-sans);
  color: var(--fg);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ===== Notes block — operator-maintained free-text below the board ===== */
.sc-notes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 0 4px;
  border-top: 1px solid var(--border);
}
.sc-notes-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
  font-weight: 600;
}
.sc-notes-body {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--fg);
  line-height: 1.5;
  cursor: text;
  min-height: 1.5em;
  white-space: pre-wrap;
}
.sc-notes-body--empty {
  color: var(--fg-faint);
  font-style: italic;
}
.sc-notes-body:hover { background: var(--color-slate-50); }

/* ===== Action bar (Save / Cancel / Reset) ===== */
.sc-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0 0;
  border-top: 1px solid var(--border);
}
.sc-btn {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: var(--r-input);
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--fg);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.sc-btn:hover:not(:disabled) {
  background: var(--color-bg-hover);
  border-color: var(--color-slate-400);
}
.sc-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.sc-btn--save {
  background: var(--color-slate-900);
  border-color: var(--color-slate-900);
  color: white;
}
.sc-btn--save:hover:not(:disabled) {
  background: var(--color-slate-800);
  border-color: var(--color-slate-800);
}
/* Save as new is a peer to Save changes but secondary in visual
   weight: the primary action is "save what's open" (Save changes);
   the secondary "duplicate" action gets the regular button surface. */
.sc-btn--reset { color: var(--fg-muted); }
.sc-actions-status {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--fg-muted);
  margin-left: 8px;
}
.sc-actions-status--success { color: var(--color-success-text); }
.sc-actions-status--error   { color: var(--color-danger-text); }
.sc-actions-status--info    { color: var(--color-text-secondary); }

/* ===== Board (the cluster grid) ===== */
.sc-board {
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: opacity 200ms ease-out;
}

/* Trace dim applies only to SET tiles that aren't the focus or a rel
   target. Empty tiles are never dimmed — the trace describes
   relationships between filled values, so an empty tile is out of
   scope and must not carry an overlay (per STATE-MATRIX I-3). */
.sc-board.tracing .tile.tile--has:not(.tile--focus):not(.tile--rel) {
  opacity: 0.32;
}

/* ===== Cluster ===== */
.cluster {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cluster-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  border-bottom: 2px solid var(--border-strong);
  padding-bottom: 6px;
}

.cluster-row {
  display: grid;
  gap: 12px;
}

.cluster-row--1 { grid-template-columns: minmax(0, 1fr); }
.cluster-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cluster-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ===== Tile ===== */
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast), opacity 200ms ease-out;
  min-height: 84px;
}

.tile:hover {
  border-color: var(--border-strong);
  background: var(--color-bg-hover);
}

.tile:focus {
  outline: 2px solid var(--color-blue-500);
  outline-offset: 1px;
}

.tile--has {
  background: var(--surface);
  border-color: var(--border-strong);
}

/* A "locked" tile has a value AND no alternative picks in the
   current context — the picker would be useless. The tile body
   is non-interactive (no hover background, no pointer cursor); the
   × button stays interactive because clearing the value frees the
   tile (and possibly others) for new picks. */
.tile--locked { cursor: default; }
.tile--locked:hover {
  background: var(--surface);
  border-color: var(--border-strong);
}

/* The open tile needs a high stacking context so its popover renders
   above every sibling tile and cluster — and above the Save/Cancel/
   Reset action bar that lives below the board. */
.tile--open {
  border-color: var(--color-blue-500);
  box-shadow: 0 0 0 1px var(--color-blue-500);
  z-index: 100;
}

.tile-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-height: 14px;
}

/* Per-tile relationship label, set by _applyTrace when the user
   hovers a different tile that affects this one. Reads e.g.
   "MEMBER OF DOMAIN" or "COMPATIBLE WITH ESP". Empty by default;
   becomes visible (with color keyed to the relationship rule) only
   while the trace points to this tile. Per spec §5 + §4. */
.rel-line {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: right;
  color: transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--t-fast);
}
.rel-line.rel-r0 { color: var(--color-slate-700); }
.rel-line.rel-r1 { color: #6b21a8; }   /* paired (violet) */
.rel-line.rel-r2 { color: #065f46; }   /* member-of / derived-from (emerald) */
.rel-line.rel-r3 { color: var(--color-blue-800); } /* compatible-with (blue) */
.rel-line.rel-r4 { color: #92400e; }   /* restricts / restricted-by (amber) */

.tile-name {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.tile-req {
  color: var(--color-danger);
  margin-left: 2px;
}


.tile-val {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
  min-height: 22px;
}

.val-fill {
  font-weight: 600;
}

.val-placeholder {
  color: var(--fg-faint);
  font-weight: 400;
  font-style: italic;
  font-size: 13px;
}

.tile-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-muted);
}

.tile-count {
  letter-spacing: 0.02em;
}

.tile-chev {
  color: var(--fg-faint);
  font-size: 11px;
  line-height: 1;
}

.tile-clear {
  background: transparent;
  border: 0;
  color: var(--fg-faint);
  font-size: 16px;
  line-height: 1;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  cursor: pointer;
  margin-left: auto;
  transition: background var(--t-fast), color var(--t-fast);
}

.tile-clear:hover {
  background: var(--color-slate-100);
  color: var(--color-danger);
}

.tile-clear:focus {
  outline: 2px solid var(--color-blue-500);
  outline-offset: 1px;
}

/* ===== Hover-trace tints ===== */
.tile--focus {
  border-color: var(--fg);
  box-shadow: 0 0 0 1px var(--fg);
  opacity: 1 !important;
}

.tile--rel {
  opacity: 1 !important;
}

/* r0 = Independent / inferred (slate) */
.tile--r0           { border-color: var(--color-slate-400); box-shadow: 0 0 0 1px var(--color-slate-400); background: var(--color-slate-50); }
.tile--r0 .rel-line { color: var(--color-slate-700); }

/* r1 = Paired with (violet) */
.tile--r1           { border-color: #a855f7; box-shadow: 0 0 0 1px #a855f7; background: #faf5ff; }
.tile--r1 .rel-line { color: #6b21a8; }

/* r2 = Member of / Derived (emerald) */
.tile--r2           { border-color: #10b981; box-shadow: 0 0 0 1px #10b981; background: #ecfdf5; }
.tile--r2 .rel-line { color: #065f46; }

/* r3 = Compatible with (blue) */
.tile--r3           { border-color: var(--color-blue-500); box-shadow: 0 0 0 1px var(--color-blue-500); background: var(--color-blue-50); }
.tile--r3 .rel-line { color: var(--color-blue-800); }

/* r4 = Restricts / Restricted by (amber) */
.tile--r4           { border-color: #f59e0b; box-shadow: 0 0 0 1px #f59e0b; background: #fffbeb; }
.tile--r4 .rel-line { color: #92400e; }

/* ===== Single BLUE flash (self cascade) ===== */
@keyframes sc-flash-blue-bg {
  0%   { background: var(--color-blue-50); box-shadow: 0 0 0 2px var(--color-blue-500); }
  60%  { background: var(--color-blue-50); box-shadow: 0 0 0 2px var(--color-blue-500); }
  100% { background: var(--surface);        box-shadow: none; }
}
.tile--flash-blue {
  animation: sc-flash-blue-bg 1900ms ease-out 1;
}

/* ===== Double-ring GRAY flash (other user) ===== */
@keyframes sc-flash-gray-ring {
  0%   { box-shadow: 0 0 0 2px var(--color-slate-400), inset 0 0 0 1px var(--color-slate-300); background: var(--color-slate-50); }
  50%  { box-shadow: 0 0 0 4px var(--color-slate-400), inset 0 0 0 1px var(--color-slate-300); background: var(--color-slate-50); }
  100% { box-shadow: none; background: var(--surface); }
}

.tile--flash-gray {
  animation: sc-flash-gray-ring 1900ms ease-out 1;
}

/* Value crossfade during the flash — P0.7 canon pattern.
   swap-old is in normal flow and defines the wrapper's layout
   width; swap-new is positioned absolutely on top. Old fades out
   over 30%-50% of the animation, new fades in over 50%-70% — no
   visible overlap window, so the half-faded artifact can't recur
   even when old and new have different widths.
   The single blue tile-glow above provides the "noticed it
   changed" affordance; this crossfade provides the spec §8
   "box's value crossfades old→new" requirement. */
.tile-swap {
  position: relative;
  display: inline-block;
}
.tile-swap .swap-old {
  display: inline-block;
  animation: sc-flash-swap-old 1900ms ease-out 1 forwards;
}
.tile-swap .swap-new {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  opacity: 0;
  animation: sc-flash-swap-new 1900ms ease-out 1 forwards;
}
@keyframes sc-flash-swap-old {
  0%   { opacity: 1; }
  35%  { opacity: 1; }
  60%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes sc-flash-swap-new {
  0%   { opacity: 0; }
  40%  { opacity: 0; }
  65%  { opacity: 1; }
  100% { opacity: 1; }
}

/* ===== Popover =====
   Namespaced .sc-pop* (vs unscoped .pop* used by global-nav's page-finder).
   z-index: 1000 inside the open tile's stacking context so the picker
   wins over every other tile, the action bar, and the facts column.
*/
.sc-pop {
  position: absolute;
  top: calc(100% + 4px);
  left: -1px;
  right: -1px;
  background: var(--surface);
  border: 1px solid var(--color-blue-500);
  border-radius: var(--r-card);
  box-shadow: var(--sh-menu);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  max-height: 360px;
  overflow: hidden;
  cursor: auto;
}

.sc-pop-search {
  padding: 8px;
  border-bottom: 1px solid var(--border);
}

.sc-pop-search input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  padding: 6px 8px;
  font-size: 13px;
  font-family: var(--font-sans);
  color: var(--fg);
}

.sc-pop-search input:focus {
  outline: 2px solid var(--color-blue-500);
  outline-offset: 0;
  border-color: var(--color-blue-500);
}

.sc-pop-list {
  overflow-y: auto;
  flex: 1;
  padding: 4px;
}

.sc-pop-empty {
  padding: 12px 10px;
  font-size: 12px;
  color: var(--fg-muted);
  font-style: italic;
}

.sc-pop-option {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--r-input);
  padding: 6px 8px;
  font-size: 13px;
  font-family: var(--font-sans);
  color: var(--fg);
  cursor: pointer;
  gap: 8px;
}

.sc-pop-option:hover:not([disabled]):not(.sc-pop-option--off) {
  background: var(--color-bg-hover);
}

.sc-pop-option:focus {
  outline: 2px solid var(--color-blue-500);
  outline-offset: -1px;
}

.sc-pop-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sc-pop-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-muted);
  flex-shrink: 0;
}

.sc-pop-check {
  color: var(--color-success);
  font-size: 12px;
}

.sc-pop-option--off, .sc-pop-option[disabled] {
  color: var(--fg-faint);
  cursor: not-allowed;
}

.sc-pop-option--off .sc-pop-meta,
.sc-pop-option[disabled] .sc-pop-meta {
  color: var(--fg-faint);
}

.sc-pop-option--sel {
  background: var(--color-blue-50);
}