/* Conditional Routing tree editor (it-33) — a full-screen dark node canvas, per the v3 mockup.
   The canvas is a deliberate dark workspace (like an automation builder); the popups stay house
   light dialogs. Interaction is the contract (palette → glow → drop → popup, validate-on-save). */

/* Canvas design tokens — shared by the full editor and the read-only mini-canvas (list popup / the
   pinned live-call view), so both render the same node cards + edges. */
.cnr-editor, .cnr-mini, .cnr-minihost, .mig-surface, .mig {
  /* Node card size — mirrors NW/NH in cnr-canvas.js (the layout math). Keep them in sync. The height
     is a floor (cards grow past it when text wraps); ghost/target slots use it so they track the node. */
  --cnr-node-w: 396px;
  --cnr-node-h: 150px;
  --cnr-bg: #0e0e15;
  --cnr-dot: #1b1b26;
  --cnr-panel: #14141d;
  --cnr-card: #16161f;
  --cnr-border: #2a2a37;
  --cnr-text: #ececf2;
  --cnr-muted: #8a8a99;
  --cnr-eyebrow: #7c7c8c;
  --cnr-start: #4a9eff;
  --cnr-cond: #7c6bde;
  --cnr-rule: #2fbf71;
  --cnr-amber: #d9a24a;
  --cnr-yes: #34c759;
  --cnr-no: #e0708f;
  --cnr-edge: #3a3a48;
  --cnr-save: #7c6bde;
}

/* it-65: the editor lives INSIDE the app shell (main.main--bleed = fixed height
   calc(100vh - --app-bar-h)), not as a fixed viewport takeover. It fills that box;
   position:relative keeps it a self-contained positioning context. No z-index: main
   is its own stacking context (sidebar.css), so nothing here competes with the drawer. */
.cnr-editor {
  position: relative;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--cnr-bg);
  color: var(--cnr-text);
  font-family: inherit;
}

/* ---- header ---- */
.cnr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .6rem 1.1rem;
  border-bottom: 1px solid var(--cnr-border);
  background: rgba(20, 20, 29, .85);
  backdrop-filter: blur(6px);
  /* position is required for the z-index to do anything — without it this declaration was inert, and
     anything the header overhangs (a tooltip, a popup) was ordered by DOM position alone. */
  position: relative;
  z-index: 3;
}
/* Full-width status strip directly under the header — shared dark-editor chrome, not campaign-only,
   so the next canvas editor that needs one doesn't re-invent it.
   Deliberately NOT .notice: that is the house callout for LIGHT surfaces (tinted container, rounded,
   margin-bottom) and every use inside these editors lives in a dialog or drawer. Making it work
   edge-to-edge on the dark canvas would mean overriding its radius, margin, background and colour —
   fighting the component instead of using it.
   In flow, so it pushes the palette and canvas down rather than covering them. */
.cnr-statusbar {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .5rem 1.1rem;
  font-size: .78rem; font-weight: 500;
  border-bottom: 1px solid transparent;
}
.cnr-statusbar .material-symbols-rounded { font-size: 17px; }
/* Naming a control inside the message ("click Publish") — mirrors the button so the eye can match it
   to the real one, at text size rather than the leading icon's. */
.cnr-statusbar__ref { display: inline-flex; align-items: center; gap: .2rem; font-weight: 700; }
.cnr-statusbar__ref .material-symbols-rounded { font-size: 1em; }
.cnr-statusbar--info {
  background: rgba(74, 158, 255, .14);
  border-bottom-color: rgba(74, 158, 255, .35);
  color: var(--cnr-start);
}
.cnr-statusbar__act {
  margin-left: .5rem; padding: .15rem .55rem; border-radius: 7px;
  border: 1px solid currentColor; background: transparent; color: inherit;
  font: inherit; font-size: .72rem; font-weight: 600; cursor: pointer;
}
.cnr-statusbar__act:hover { background: rgba(255, 255, 255, .08); }
.cnr-statusbar--warn {
  background: rgba(217, 162, 74, .14);
  border-bottom-color: rgba(217, 162, 74, .35);
  color: var(--cnr-amber);
}

.cnr-head__title { display: flex; align-items: center; gap: .75rem; }
.cnr-head__back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px; color: var(--cnr-muted);
}
.cnr-head__back:hover { background: rgba(255, 255, 255, .06); color: var(--cnr-text); }
.cnr-head__eyebrow { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cnr-eyebrow); }
.cnr-head__name { display: inline-flex; align-items: center; gap: .35rem; }
.cnr-head__name input {
  background: transparent; border: none; color: var(--cnr-text);
  font-size: 1.05rem; font-weight: 700; padding: 0; min-width: 12rem; border-radius: 6px;
}
.cnr-head__name input:focus { outline: none; background: rgba(255, 255, 255, .05); padding: 0 .35rem; }
.cnr-head__name button { color: var(--cnr-muted); display: inline-flex; padding: .2rem; border-radius: 6px; }
.cnr-head__name button:hover { color: var(--cnr-text); }
.cnr-head__name .material-symbols-rounded { font-size: 1rem; }

.cnr-head__right { display: flex; align-items: center; gap: 1rem; }
.cnr-head__status { font-size: .82rem; }
.cnr-head__status.is-ok { color: var(--cnr-yes); }
.cnr-head__status.is-warn { color: var(--cnr-amber); }
.cnr-head__status.is-err { color: var(--cnr-no); }
.cnr-save {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .95rem; border-radius: 9px; border: none;
  background: var(--cnr-save); color: #fff; font: inherit; font-weight: 600; cursor: pointer;
}
.cnr-save:hover { filter: brightness(1.08); }
.cnr-save:disabled { opacity: .45; cursor: not-allowed; }
.cnr-save .material-symbols-rounded { font-size: 1.1rem; }

/* ---- canvas ---- */
.cnr-canvas {
  position: relative;
  flex: 1;
  overflow: hidden;
  background-color: var(--cnr-bg);
  background-image: radial-gradient(var(--cnr-dot) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
  cursor: grab;
}
.cnr-canvas.is-panning { cursor: grabbing; }
.cnr-world { position: absolute; top: 0; left: 0; }
.cnr-edges { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; }
.cnr-edge__label { font-size: 10px; font-weight: 700; letter-spacing: .06em; }
.cnr-edge__label.is-yes { fill: var(--cnr-yes); }
.cnr-edge__label.is-no { fill: var(--cnr-no); }

.cnr-boxwrap { position: absolute; width: var(--cnr-node-w); }

/* ---- palette ---- */
.cnr-palette {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
  width: 210px; display: flex; flex-direction: column; gap: .55rem;
}
.cnr-palette__label { font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cnr-eyebrow); margin: 0 0 .15rem .2rem; }
.cnr-palette__item {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .6rem .7rem; border-radius: 11px;
  background: var(--cnr-panel); border: 1px solid var(--cnr-border);
  cursor: grab; text-align: left; user-select: none;
}
.cnr-palette__item:hover { border-color: #3a3a4a; background: #191922; }
.cnr-palette__item.is-active { border-color: var(--cnr-cond); box-shadow: 0 0 0 1px var(--cnr-cond); }
.cnr-palette__ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px; flex: none; color: #fff;
}
.cnr-palette__ic .material-symbols-rounded { font-size: 1.1rem; }
.cnr-ic--cond { background: var(--cnr-cond); }
.cnr-ic--rule { background: var(--cnr-rule); }
.cnr-ic--assign { background: #e8894a; }
.cnr-palette__t { font-size: .82rem; font-weight: 600; color: var(--cnr-text); }
.cnr-palette__d { font-size: .72rem; color: var(--cnr-muted); line-height: 1.25; margin-top: .1rem; }

/* ---- node cards ---- */
.cnr-node {
  position: relative;
  width: var(--cnr-node-w);
  background: var(--cnr-card);
  border: 1px solid var(--cnr-border);
  /* Square top so the accent bar reads as a flush colored cap; only the bottom corners round. */
  border-radius: 0 0 15px 15px;
  min-height: var(--cnr-node-h);
  padding: 1.25rem 1.4rem 1.3rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  cursor: grab;
  overflow: hidden;
  user-select: none;
  /* Center the content in the taller card so it doesn't sit sparse at the top. */
  display: flex; flex-direction: column; justify-content: center;
}
.cnr-node:active { cursor: grabbing; }
.cnr-node__accent { position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.cnr-node--start .cnr-node__accent { background: var(--cnr-start); }
.cnr-node--cond .cnr-node__accent { background: var(--cnr-cond); }
.cnr-node--rule .cnr-node__accent { background: var(--cnr-rule); }
/* it-41: team (user-group) cards under an Assignment Group — a distinct people-tone (amber). */
.cnr-node--team .cnr-node__accent { background: #e8894a; }
.cnr-node--team .cnr-node__ic { color: #e8894a; background: color-mix(in srgb, #e8894a 18%, transparent); }
.cnr-node--start { cursor: grab; }
.cnr-node--start:active { cursor: grabbing; }
.cnr-node.is-eligible { box-shadow: 0 0 0 2px var(--cnr-amber), 0 6px 18px rgba(0, 0, 0, .35); }

.cnr-node__head { display: flex; align-items: center; gap: .85rem; margin-bottom: .4rem; }
.cnr-node__headtext { display: flex; flex-direction: column; min-width: 0; }
/* Icon sits in a tinted rounded box (the accent color at low alpha), like the mockup. */
.cnr-node__ic { font-size: 1.6rem; width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.cnr-node--start .cnr-node__ic { color: var(--cnr-start); background: color-mix(in srgb, var(--cnr-start) 18%, transparent); }
.cnr-node--cond .cnr-node__ic { color: var(--cnr-cond); background: color-mix(in srgb, var(--cnr-cond) 18%, transparent); }
.cnr-node--rule .cnr-node__ic { color: var(--cnr-rule); background: color-mix(in srgb, var(--cnr-rule) 18%, transparent); }
.cnr-node__eyebrow { font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; color: var(--cnr-eyebrow); }
/* Titles + subs wrap (the cards are wide enough now); clamp to keep a runaway value from ballooning a card. */
.cnr-node__title { font-size: 1.22rem; font-weight: 700; color: var(--cnr-text); margin-top: .15rem; line-height: 1.25;
  white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.cnr-node__sub { font-size: .92rem; color: var(--cnr-muted); margin-top: .5rem; line-height: 1.4;
  white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

.cnr-node__chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }
.cnr-cchip {
  display: inline-flex; align-items: center; gap: .28rem;
  font-size: .72rem; padding: .12rem .3rem; border-radius: 6px;
  background: rgba(124, 107, 222, .14); color: #c9beff;
}
.cnr-cchip__f { font-weight: 600; }
.cnr-cchip__op { color: var(--cnr-muted); }
.cnr-cchip__v { color: var(--cnr-text); font-weight: 600; }
.cnr-nofilter { font-size: .74rem; color: var(--cnr-no); }

.cnr-catch {
  margin-left: auto; font-size: .6rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: .1rem .35rem; border-radius: 5px; background: rgba(47, 191, 113, .16); color: var(--cnr-rule);
}
.cnr-assignchip {
  display: inline-flex; align-items: center; gap: .3rem; margin-top: .5rem;
  font-size: .72rem; font-weight: 600; padding: .2rem .45rem; border-radius: 7px;
  background: rgba(217, 162, 74, .14); color: var(--cnr-amber);
}
.cnr-assignchip .material-symbols-rounded { font-size: .95rem; }

.cnr-node__actions {
  position: absolute; top: .35rem; right: .4rem; display: none; gap: 1px;
}
.cnr-node:hover .cnr-node__actions { display: inline-flex; }
.cnr-node__actions button {
  display: inline-flex; padding: .2rem; border-radius: 6px; color: var(--cnr-muted);
}
.cnr-node__actions button:hover { background: rgba(255, 255, 255, .08); color: var(--cnr-text); }
.cnr-node__actions button.is-danger:hover { color: var(--cnr-no); }
.cnr-node__actions .material-symbols-rounded { font-size: 1rem; }

/* ---- empty drop slot ---- */
.cnr-slot {
  /* Match the node card exactly so the target reads as "a node goes here" and stays centred under the
     parent (the edge terminates at the box centre = the slot's real centre). */
  width: var(--cnr-node-w); min-height: var(--cnr-node-h);
  display: flex; align-items: center; justify-content: center;
  border: 1.5px dashed #3a3a48; border-radius: 13px;
  background: rgba(255, 255, 255, .015); color: var(--cnr-muted);
  font: inherit; font-size: .82rem; cursor: default;
}
.cnr-slot.is-eligible {
  cursor: pointer; border-color: var(--cnr-amber); color: var(--cnr-amber);
  background: rgba(217, 162, 74, .06);
  animation: cnr-glow 1.2s ease-in-out infinite;
}
/* A hole: the condition-shaped gap left when a load-bearing condition is deleted. Reads as a broken
   condition (purple) you must refill, and is always clickable (not just when a palette drag is live). */
.cnr-slot--hole {
  flex-direction: column; gap: .15rem; cursor: pointer;
  border-color: color-mix(in srgb, var(--cnr-cond) 60%, transparent);
  color: color-mix(in srgb, var(--cnr-cond) 82%, #fff 18%);
  background: color-mix(in srgb, var(--cnr-cond) 8%, transparent);
}
.cnr-slot--hole .material-symbols-rounded { font-size: 1.2rem; }
.cnr-slot__title { font-weight: 600; }
.cnr-slot__hint { font-size: .72rem; color: var(--cnr-muted); }
@keyframes cnr-glow {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--cnr-amber) 22%, transparent); }
}

/* ---- help + zoom ---- */
.cnr-help {
  position: absolute; bottom: 1rem; left: 1rem; z-index: 2;
  max-width: 20rem; margin: 0; font-size: .72rem; color: var(--cnr-muted); line-height: 1.4;
  /* Purely decorative hint. Its 20rem box overlaps the floating palette on a
     shorter viewport, and without this it swallows clicks on the lower palette
     items (Webhook / Send SMS) — the text is unreadable there against the
     palette, so it reads as a dead control rather than an overlay. Found by the
     it-46 e2e suite; affects the it-33 routing editor too, which shares .cnr-*. */
  pointer-events: none;
}
.cnr-help strong { color: var(--cnr-text); }
.cnr-zoom {
  position: absolute; bottom: 1rem; right: 1rem; z-index: 2;
  display: flex; align-items: center; gap: .3rem;
  background: var(--cnr-panel); border: 1px solid var(--cnr-border);
  border-radius: 10px; padding: .25rem .35rem;
}
.cnr-zoom__pct { font-size: .74rem; color: var(--cnr-muted); padding: 0 .3rem; min-width: 2.6rem; text-align: center; }
.cnr-zoom button { display: inline-flex; padding: .25rem; border-radius: 7px; color: var(--cnr-muted); background: none; border: none; cursor: pointer; }
.cnr-zoom button:hover { background: rgba(255, 255, 255, .08); color: var(--cnr-text); }
.cnr-zoom .material-symbols-rounded { font-size: 1.05rem; }

/* ---- popups (house light dialogs; only editor-local list/grid helpers here) ---- */
/* The canvas paints white text on .cnr-editor, but the popups are house LIGHT dialogs nested inside
   it. Re-assert on-surface text on the dialog so any house component WITHOUT its own color (e.g. a
   chip-multiselect dropdown option) inherits dark instead of the canvas white and vanishing. */
.cnr-editor .dialog { color: var(--md-sys-color-on-surface); }
.cnr-picklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.cnr-picklist__item {
  width: 100%; text-align: left; padding: .6rem .75rem;
  border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-medium, 12px);
  background: var(--md-sys-color-surface-container-lowest); color: var(--md-sys-color-on-surface);
  cursor: pointer; font: inherit;
}
.cnr-picklist__item:hover { background: var(--md-sys-color-surface-container); }
/* Additional Logic dialog: width lives here, not inline. Compound selector beats the base
   .dialog { max-width: 480px } (which loads later in the cascade), and `width` FORCES the size so
   the stacked single-column content doesn't let the dialog collapse to fit. */
.dialog.cnr-assign-dialog { width: min(900px, 96vw); max-width: min(900px, 96vw); }
/* Breathing room between the intro line and the first section card. */
.cnr-assign__intro { margin: 0 0 1.5rem; }
/* The two triggers stack vertically, each in its own house card (white surface + elevation). */
.cnr-assign-stack { display: flex; flex-direction: column; }
.cnr-assign-stack .float-card { margin-bottom: 1rem; }
.cnr-assign-stack .float-card:last-child { margin-bottom: 0; }
.cnr-assign__h {
  font-size: 1.05rem; font-weight: 600; color: var(--md-sys-color-on-surface);
  margin: 0 0 1rem;
}

/* ---- routing tester (it-33.1) ---- */
.cnr-test-btn {
  display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem; border-radius: 10px;
  border: 1px solid var(--cnr-border); background: transparent; color: var(--cnr-text); cursor: pointer; font: inherit;
}
.cnr-test-btn:hover { background: rgba(255, 255, 255, .06); }
/* Canvas highlight after a preview runs: the taken path glows, the rest dims. */
.cnr-onpath { box-shadow: 0 0 0 2px var(--cnr-amber), 0 6px 18px rgba(0, 0, 0, .45) !important; }
.cnr-offpath { opacity: .32; }

/* Replayed rotation table (it-41 lead-number box): one row per simulated lead, the asked-for turn
   highlighted. No scrollbox of its own — the drawer body already scrolls. */
.ld-leads { display: flex; flex-direction: column; gap: 2px; }
.ld-leads__row {
  display: flex; align-items: center; gap: .5rem;
  padding: .3rem .5rem; border-radius: 7px;
  font-size: .85rem; color: var(--cnr-muted);
}
.ld-leads__row.is-current { background: rgba(255, 255, 255, .07); color: var(--cnr-text); font-weight: 600; }
.ld-leads__n { min-width: 2.2rem; font-variant-numeric: tabular-nums; opacity: .7; }
.ld-leads__tag {
  margin-left: auto; font-size: .7rem; letter-spacing: .04em; text-transform: uppercase;
  padding: .1rem .4rem; border-radius: 5px;
  background: rgba(255, 176, 32, .16); color: var(--cnr-amber);
}
.cnr-muted { color: var(--cnr-muted); }

/* routing-trace renderer — context-agnostic: text inherits the surface color (dark tester drawer OR
   light list popup), muted via opacity, borders via currentColor, accents are mid-tones readable on
   both grounds, and the code block is always dark. */
.rt-summary { color: inherit; }
.rt-collision {
  font-size: .85rem; padding: .5rem .65rem; border-radius: 8px; margin-bottom: .6rem;
  background: color-mix(in srgb, #e0ad5a 16%, transparent);
  border: 1px solid color-mix(in srgb, #e0ad5a 40%, transparent); border-left-width: 3px;
}
.rt-match { font-size: .9rem; margin-bottom: .5rem; }
.rt-badge { font-size: .68rem; padding: .1rem .45rem; border-radius: 999px; background: #8b7be8; color: #fff; }
.rt-block { margin-top: .75rem; }
.rt-h { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; opacity: .6; margin-bottom: .4rem; }
.rt-ring { display: flex; align-items: center; gap: .5rem; font-size: .88rem; padding: .15rem 0; }
.rt-dot { width: 8px; height: 8px; border-radius: 50%; background: #5bb98b; flex: none; }
.rt-dot--pstn, .rt-dot--mobile { background: #e0ad5a; }
.rt-muted { opacity: .6; }
/* .rt-code — the shared dark JSON block (Campaigns / Distribution / routing tester / call-log traces).
   Vertically resizable by dragging the bottom-right corner (default 280px, drag to grow). code-copy.js
   adds the copy button to every one, so the wrapper + button styling live here once too. */
.rt-code { background: #0f0f16; color: #ecebf2; border-radius: 8px; padding: .6rem; font-size: .72rem;
  overflow: auto; height: 280px; max-height: none; margin-top: .4rem; resize: vertical; min-height: 3rem; }
.rt-codewrap { position: relative; }
/* right offset clears the code block's vertical scrollbar (~15px) so the glyph isn't hidden behind it */
.rt-copy { position: absolute; top: .55rem; right: 1.15rem; z-index: 1; display: inline-flex; align-items: center;
  justify-content: center; width: 26px; height: 26px; border: none; border-radius: 6px; cursor: pointer;
  background: color-mix(in srgb, #ecebf2 12%, transparent); color: #ecebf2; }
.rt-copy:hover { background: color-mix(in srgb, #ecebf2 22%, transparent); }
.rt-copy .material-symbols-rounded { font-size: 1rem; }
.rt-copy--done { color: #6fdc8c; }
/* Mini-canvas: the REAL editor node cards + curved edges, static + inert. The dark canvas ground +
   dot-grid live on the HOST (100% wide); it grows only to fit the tree (JS sets the height, capped),
   never forced tall. The tree (.cnr-mini) pans as ONE unit — drag anywhere; JS centers it initially
   and translates it on drag. overflow:hidden (drag, not scrollbars). Reuses .cnr-node via the tokens. */
.cnr-minihost {
  position: relative; overflow: hidden; width: 100%; min-height: 200px; box-sizing: border-box;
  border: 1px solid var(--cnr-border); border-radius: 12px;
  background-color: var(--cnr-bg);
  background-image: radial-gradient(var(--cnr-dot) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
  color: var(--cnr-text);
  cursor: grab;
}
.cnr-minihost.is-panning { cursor: grabbing; }
.cnr-mini { position: absolute; top: 0; left: 0; }
.cnr-mini .cnr-node { pointer-events: none; }
.cnr-mini .cnr-node__actions, .cnr-mini .cnr-node__chips, .cnr-mini .cnr-assignchip { display: none; }

/* Tester popup: wide, tall only up to 90vh (body scrolls if it needs to), not force-filled. */
.dialog.cnr-test-dialog { width: min(1100px, 96vw); max-width: min(1100px, 96vw); max-height: 90vh; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.cnr-test-dialog .dialog__body { overflow: auto; }

/* Code view = an in-panel SLIDE-OVER (no stacked modal): slides in over the tester surface, Back
   returns. Lives inside the list popup (.cnr-test-dialog) or the docked drawer (.cmp-drawer). */
.cnr-codeover {
  position: absolute; inset: 0; z-index: 5;
  transform: translateX(100%); transition: transform .25s ease;
  display: flex; flex-direction: column;
}
.cnr-codeover.is-open { transform: translateX(0); }
.dialog .cnr-codeover { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); }
/* it-41.1: the tester lives in the light docked drawer now; the code-view slides over the whole panel
   and must be opaque so nothing behind it bleeds through (the JSON block keeps its own dark styling). */
.cmp-drawer .cnr-codeover { background: #fff; color: #1a1a22; }
.cnr-codeover__head { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.15rem; border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
.cnr-codeover__back { display: inline-flex; align-items: center; gap: .3rem; background: none; border: none; cursor: pointer; color: inherit; font: inherit; font-weight: 600; }
.cnr-codeover .rt-code { flex: 1 1 auto; margin: .9rem; border-radius: 10px; max-height: none; }

@media (max-width: 640px) {
  .cnr-palette { position: static; width: auto; flex-direction: row; flex-wrap: wrap; margin: .5rem; }
}

/* ---- .cnr-pick — a selectable row inside a canvas editor's dialog (it-47's leaf picker; reusable by
   any of the .cnr-* editors). Its own class rather than borrowing the SMS panel's .sms-pick, which
   would couple two unrelated surfaces.

   position:relative + overflow:hidden are REQUIRED, not cosmetic: a custom .state-layer host without
   them lets the ripple's ::after escape its bounds and swallow clicks meant for the row (the it-27.2
   lesson — .btn / .icon-btn already carry them, bespoke hosts must declare them). */
.cnr-pick {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  padding: .55rem .7rem;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 9px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cnr-pick:hover { border-color: var(--md-sys-color-outline); }
.cnr-pick.is-picked {
  border-color: var(--md-sys-color-primary);
  background: var(--md-sys-color-surface-container-high);
}

/* ---- mid-tree insert "+" ----
   Shown at an edge midpoint while a spliceable palette item is picked: clicking inserts a node BETWEEN
   two existing ones. Shared by the it-26 campaign canvas and the it-47 sender-rule editor, which is why
   it lives here beside @keyframes cnr-glow rather than in one feature's stylesheet. */
.cnr-insert {
  position: absolute; transform: translate(-50%, -50%); z-index: 3;
  width: 28px; height: 28px; border-radius: 50%; border: none;
  background: var(--cnr-amber); color: #171308; display: grid; place-items: center;
  cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
  animation: cnr-glow 1.2s ease-in-out infinite;
}
.cnr-insert:hover { filter: brightness(1.12); }
.cnr-insert .material-symbols-rounded { font-size: 18px; }