/* ============================================================
   ta-bundles-v1.2.1.css
   ============================================================
   INBXIFY · Bundles Workspace · Cut 3 patch · TD-182 retest-blocker UI fix

   v1.2.1 changelog (UI patch on v1.2.0):
   - Removed text-overflow:ellipsis + white-space:nowrap +
     max-width caps from .bdl-card-label, .bdl-row-filename,
     .bdl-row-target. Per "show whole element by default" rule
     (Jeff, 2026-05-21) — these are primary content, not chrome,
     and the workspace has ample horizontal space.
   - .bdl-row align-items: center → flex-start so wrapped content
     aligns at top instead of mid-clipping.
   - NEW selectors: .bdl-row-meta (vertical stack for filename +
     Item ID); .bdl-row-id (mono small muted Webflow item ID under
     filename, for cross-checking against Designer during
     attach-verify workflows).

   No selector retired. JS pair: ta-bundles-v1.2.1.js.

   ─── v1.2.0 changelog (TD-183 build on v1.1.7) ───
   New selector blocks at the end of the file (search "v1.2.0"
   anchor comments to find them). All v1.1.7 rules preserved
   verbatim. Touch points:

   1. STATUS FILTER STRIP (TD-183.3)
      .bdl-filter-strip          · row container above file list
      .bdl-filter-label          · "Show" label
      .bdl-filter-chip           · chip button (Available / Attached)
      .bdl-filter-chip.is-active · selected state (blue border + bg + count)
      .bdl-filter-chip-count     · count badge inside chip
      .bdl-filter-clear          · Reset text link
      .bdl-filter-empty          · empty-state row when filter is zero

   2. TEXT-TYPE GUARD (TD-183.4)
      .bdl-row.is-disabled       · disabled file row (opacity + cursor)
      .bdl-row-guard             · amber "Body — locked" inline pill

   3. ALREADY_LINKED MODAL (TD-183.2)
      .bdl-replace-modal-bg      · fixed overlay (rgba(26,41,59,.45))
      .bdl-replace-modal         · container (max-width 480px)
      .bdl-replace-modal-head    · title row
      .bdl-replace-modal-title   · h3
      .bdl-replace-modal-body    · prose + target list
      .bdl-replace-lead          · intro paragraph
      .bdl-replace-multi-hint    · hint shown when >1 collision
      .bdl-replace-target-list   · list wrapper
      .bdl-replace-target-card   · per-collision card (skip-toggle for multi)
      .bdl-replace-target-card.is-skipped · faded state
      .bdl-replace-skip-check    · skip checkbox (shown only when >1)
      .bdl-replace-target-icon   · article icon
      .bdl-replace-target-body   · text block
      .bdl-replace-target-text   · filename → article-name
      .bdl-replace-target-arrow  · separator
      .bdl-replace-target-meta   · article-id meta line
      .bdl-replace-error         · "name lookup unavailable" callout
      .bdl-replace-modal-foot    · footer row (cancel + confirm)
      .bdl-replace-cancel        · cancel text link (reverts cleanly per §10.11)
      .bdl-replace-confirm       · gold Replace button (write-commit semantic)

   No existing v1.1.7 rule modified.

   ─── v1.1.7 changelog (polish patch on v1.1.6) ───
   .bdl-cstep-num circles were rendered in the DOM but invisible
   in v1.1.6 — the .bdl-cstep-head parent flex container used
   `align-items: baseline`, which interacts poorly with an
   inline-flex circle child (the circle's cross-axis size
   collapses to the baseline of its inner text). Fix:
   • .bdl-cstep-head: align-items: center (was baseline)
   • .bdl-cstep-num: 24px (was 18px), !important on all visual
     props, explicit flex-basis so it can't be compressed,
     higher-specificity selector so cascade-stack overrides lose.
   State color variants (active/set/pending) carry through.

   No other rules changed from v1.1.6.

   ─── v1.1.6 changelog (UX fix on v1.1.5) ───
   2-column cascade body. CSS grid splits the cascade body into:
     • Left column (280px fixed)  — Step 1 (Asset Type chips)
     • Right column (1fr flex)    — Step 2 (Picker or Create info)
   Cascade panel gains min-height: 480px so the picker dropdown
   has real room. Picker list max-height bumped 280px → 360px.
   On narrow viewports (<700px), grid collapses to single column
   so steps stack vertically again — touch device fallback.

   No other rules changed from v1.1.5.

   ─── v1.1.5 changelog (Cut 2 final ship) ───
   1. Red 4px top border CARRIES from .bdl-action-bar to
      .bdl-cascade — visual continuity through the attach /
      create transition.
   2. .bdl-cascade-status gains three mood states for the
      save flow:
        • .is-saving  — italic, dim, animated cursor
        • .is-success — green, bold
        • .is-error   — red, bold
      Replaces v1.1.0's brief .is-stub-confirmed flash with
      a proper semantic palette.
   3. .ix-btn[data-bdl-cascade-save].is-saving — slightly dim,
      cursor:wait while the request is in flight. Reuses the
      existing :disabled treatment from ix-buttons.

   ─── v1.1.4 changelog (polish patch on v1.1.3) ───
   Three action-bar adjustments per Jeff:
   1. Width matches the .dashboard div (JS sync target changed
      from #bdl-root to .dashboard in v1.1.4.js).
   2. 4px solid red top border on .bdl-action-bar.
   3. Padding bumped 20px → 60px top + 60px bottom on .bdl-action-bar.
   Plus: #bdl-root.has-selection padding-bottom 110px → 200px
   to keep the last file row scrollable above the now-much-
   taller pinned bar.

   ─── v1.1.3 changelog (polish patch on v1.1.2) ───
   Action bar geometry:
   • #bdl-cascade-anchor: position:fixed at bottom:0. left and
     width are NO LONGER set by CSS — JS (syncCascadeAnchorToContainer)
     mirrors #bdl-root's bounding rect onto the anchor so the
     action bar / cascade panel align with the file list above
     them instead of spanning the viewport.
   • .bdl-action-bar: padding 20px 16px (was 12px 16px). Border-
     radius reduced to top corners only (10px 10px 0 0). border-
     bottom removed. box-shadow flipped from below to above the
     element (since the bottom now meets the viewport edge).
   • .bdl-cascade panel: same flush-bottom treatment (top-only
     radius, no bottom border, shadow above).
   • .bdl-cascade-footer: bottom padding bumped 14px → 20px for
     visual parity when expanded.

   ─── v1.1.2 changelog (CSS-only delta from v1.1.1) ───
   Removed the max-width: 1100px cap on #bdl-cascade-anchor.
   v1.1.1 added that cap to prevent the action bar from looking
   stretched on wide monitors, but Jeff wanted the v1.1.0 full-
   width behavior back. Anchor now extends to left:24px /
   right:24px from the viewport, full width across.

   All other rules unchanged from v1.1.1.

   ─── v1.1.1 changelog (polish patch on v1.1.0) ───
   Two production-verification bugs from v1.1.0:

   1. .bdl-row.is-selected background was being overridden by
      a higher-specificity / !important rule from another
      stylesheet in the cascade (computed bg returned pure
      white instead of the intended rgba(91,127,255,0.08)).
      Fix: !important on the background, bumped tint opacity
      0.08 → 0.12 (more visible), and added a 3px crisp blue
      left-edge indicator via box-shadow inset so selection
      is unmissable regardless of what overrides exist.

   2. #bdl-cascade-anchor was position:sticky, which bottomed
      out at the Inputs panel edge instead of the viewport
      bottom. Operator had to scroll to see the action bar.
      Fix: position:fixed centered horizontally with max-width
      cap for wide screens. Paired with a new rule on
      #bdl-root.has-selection that adds bottom padding only
      when an action bar is present, so the last file row
      stays scrollable above the bar (the v1.1.1 JS toggles
      the has-selection class).

   No other rules changed. Everything from v1.1.0.css carries
   forward verbatim.

   ─── v1.1.0 changelog ───
   • Banner REMOVED entirely (.bdl-banner / .bdl-banner-counts /
     .bdl-banner-meta / .bdl-banner-time / .bdl-banner-refresh /
     .bdl-banner-sep — all gone). Replaced with a refresh icon
     button inline-right with the first section label.
   • File rows now host a leading checkbox + an is-selected state.
   • New: section-label-row (label + optional refresh icon).
   • New: bdl-refresh-icon (positioned next to the section label).
   • New: cascade-anchor (sticky bottom container for action bar
     + cascade panel).
   • New: action-bar (two primary buttons + Clear link + count).
   • New: cascade panel (header / body / steps / footer) — Option B
     layout (mode pre-set from action bar; cascade runs Step 1
     Asset Type → Step 2 Picker-or-Info → Save).
   • New: bdl-create-info (info pane for create-mode Step 2).
   • New: bdl-picker-empty (no-matches state for the picker list).

   ─── Class namespace ───
   bdl-* for Bundles-local styles. ix-* primitives (chips, picker,
   revert) come from ix-form-controls-v1.0.0.css. ix-btn-* primary
   buttons come from ix-buttons-v1.0.4.css. Neither is restyled here.

   ─── Token strategy ───
   Use ix CSS variables (from title-admin-page-design v1.4.x) with
   raw-value fallbacks for defensive loading. Hex values match the
   tokens at the time of writing (2026-05-18) so behavior is stable
   even if title-admin-page-design changes downstream — the
   fallback colors stay correct visually.

   ──────────────────────────────────────────────────────────── */

#bdl-root {
  font-family: var(--ix-font-body, 'DM Sans', system-ui, -apple-system, sans-serif);
  color: var(--ix-text-dark, #1A293B);
  margin-top: 16px;
}

.bdl-root-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ═══════════════════════════════════════════════════════════
   SECTION LABEL ROW
   Was a banner in v1.0.0. Now: label on the left, optional
   refresh icon button on the right of the FIRST section only.
   ═══════════════════════════════════════════════════════════ */

.bdl-section-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 8px 4px;
  min-height: 28px;
}

.bdl-section-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ix-text-mid, #6B7280);
  font-weight: 600;
  font-family: var(--ix-font-mono, 'DM Mono', monospace);
}

/* Plain .bdl-section-label (no row container) — legacy use; preserves
   v1.0.0's behavior for the second section label that has no refresh icon. */
.bdl-section > .bdl-section-label {
  display: block;
  margin: 0 0 8px 4px;
}

.bdl-refresh-icon {
  /* Sized down a touch vs default ix-btn--icon */
  min-width: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  color: var(--ix-text-mid, #6B7280) !important;
}
.bdl-refresh-icon:hover:not(:disabled) {
  color: var(--ix-blue, #5B7FFF) !important;
}
.bdl-refresh-icon.is-spinning {
  pointer-events: none;
  color: var(--ix-blue, #5B7FFF) !important;
  animation: bdl-spin 0.8s linear infinite;
}
@keyframes bdl-spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════
   BUNDLE LIST
   ═══════════════════════════════════════════════════════════ */

.bdl-bundles {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bdl-card {
  border: 1px solid var(--ix-border, #E5E7EB);
  border-radius: 8px;
  background: var(--ix-white, #FFFFFF);
  overflow: hidden;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.bdl-card:hover {
  border-color: rgba(91, 127, 255, 0.35);
}

.bdl-card.is-expanded {
  border-color: rgba(91, 127, 255, 0.40);
  box-shadow: 0 1px 3px rgba(91, 127, 255, 0.08);
}

/* Left-border status accent (unchanged from v1.0.0) */
.bdl-card--status-pending        { border-left: 3px solid #E0B4B4; }
.bdl-card--status-partial        { border-left: 3px solid #C4A35A; }
.bdl-card--status-fully_assigned { border-left: 3px solid #86C9A4; }

.bdl-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
}

.bdl-card-header:hover {
  background: var(--ix-cream, #FAF8F1);
}

.bdl-caret {
  font-size: 12px;
  color: var(--ix-text-mid, #6B7280);
  width: 12px;
  display: inline-block;
  text-align: center;
}

.bdl-card-label {
  /* v1.2.1: removed text-overflow:ellipsis + white-space:nowrap.
     Bundle labels can be long; we have horizontal room; show the
     whole thing. */
  flex: 1;
  font-weight: 600;
  font-size: 14px;
  color: var(--ix-text-dark, #1A293B);
  word-break: break-word;
}

.bdl-card-count {
  font-size: 12px;
  color: var(--ix-text-mid, #6B7280);
  font-family: var(--ix-font-mono, 'DM Mono', monospace);
  letter-spacing: 0.02em;
}

.bdl-card-body {
  border-top: 1px solid #F1F3F5;
  background: #FAFAFA;
  padding: 6px 0;
}

/* ═══════════════════════════════════════════════════════════
   FILE ROWS
   v1.0.0 had padding 8px 14px 8px 36px to indent under caret.
   v1.1.0 uses 12px left + leading checkbox so the row reads as
   a checkable line item, not an indented detail.
   ═══════════════════════════════════════════════════════════ */

.bdl-row {
  display: flex;
  align-items: flex-start;   /* v1.2.1: was 'center'; flex-start so wrapped meta aligns at top */
  gap: 10px;
  padding: 8px 14px 8px 12px;
  font-size: 13px;
  border-bottom: 1px solid transparent;
  transition: background-color 100ms ease;
}

.bdl-row:hover {
  background: var(--ix-white, #FFFFFF);
}

.bdl-row.is-selected {
  /* v1.1.1: !important + bumped opacity + left-edge indicator.
     Previously the rule was being overridden by another stylesheet's
     row-background rule. The left-edge box-shadow guarantees the
     selection is visible even if the bg-color rule loses again. */
  background-color: rgba(91, 127, 255, 0.12) !important;
  box-shadow: inset 3px 0 0 var(--ix-blue, #5B7FFF) !important;
}
.bdl-row.is-selected:hover {
  background-color: rgba(91, 127, 255, 0.18) !important;
}

.bdl-row-check {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 3px 0 0;   /* v1.2.1: nudge down 3px so checkbox aligns with first line of wrapped meta */
  accent-color: var(--ix-blue, #5B7FFF);
  cursor: pointer;
}

.bdl-row-mime {
  flex: 0 0 18px;
  font-size: 14px;
  text-align: center;
  line-height: 1.4;   /* v1.2.1: match meta's first-line height */
}

/* v1.2.1 NEW: vertical stack for filename + Webflow item ID.
   Filename is primary; ID is secondary metadata used for
   cross-checking against Designer during attach-verify workflows. */
.bdl-row-meta {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;   /* permits children to wrap inside flex */
}

.bdl-row-filename {
  /* v1.2.1: removed overflow:hidden + text-overflow:ellipsis +
     white-space:nowrap. Filenames vary in length; wrapping is
     fine and preserves the whole name. */
  color: var(--ix-text-dark, #1A293B);
  word-break: break-word;
  line-height: 1.4;
}

/* v1.2.1 NEW: Webflow item ID display. Mono font, smaller, muted —
   reads as secondary metadata. User-selectable so the ID can be
   copied for Webflow Designer lookup. */
.bdl-row-id {
  font-family: var(--ix-font-mono, 'DM Mono', monospace);
  font-size: 11px;
  color: var(--ix-text-soft, #9CA3AF);
  letter-spacing: 0.01em;
  user-select: text;
  cursor: text;
  word-break: break-all;   /* 24-char hex; let it wrap if needed */
}

.bdl-row-size {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--ix-text-mid, #6B7280);
  font-family: var(--ix-font-mono, 'DM Mono', monospace);
  line-height: 1.4;   /* v1.2.1: align with first line of meta stack */
}

.bdl-row-target {
  /* v1.2.1: removed max-width:220px + overflow:hidden +
     text-overflow:ellipsis + white-space:nowrap. Asset names
     (article titles, ad names, etc.) can be long; truncating
     them defeats the point of showing them. */
  flex: 0 1 auto;
  font-size: 12px;
  color: #4B5563;
  line-height: 1.4;
  word-break: break-word;
  text-align: right;
}

.bdl-row-target-more {
  color: var(--ix-blue, #5B7FFF);
  font-weight: 500;
  margin-left: 2px;
}

/* ═══════════════════════════════════════════════════════════
   LOOSE TRAY
   ═══════════════════════════════════════════════════════════ */

.bdl-loose {
  border: 1px dashed #D1D5DB;
  border-radius: 8px;
  background: var(--ix-white, #FFFFFF);
  padding: 4px 0;
}

.bdl-loose .bdl-row {
  padding-left: 12px;
}

/* ═══════════════════════════════════════════════════════════
   STATUS PILLS (unchanged from v1.0.0)
   ═══════════════════════════════════════════════════════════ */

.bdl-pill {
  display: inline-block;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px;
  font-family: var(--ix-font-mono, 'DM Mono', monospace);
  text-transform: uppercase;
  white-space: nowrap;
}
.bdl-pill--pending          { background: #FEE2E2; color: #991B1B; }
.bdl-pill--partial          { background: #FEF3C7; color: #92400E; }
.bdl-pill--fully_assigned   { background: #D1FAE5; color: #065F46; }
.bdl-pill--awaiting         { background: #EDE9FE; color: #5B21B6; }

/* ═══════════════════════════════════════════════════════════
   STATES — loading / error / empty (unchanged from v1.0.0)
   ═══════════════════════════════════════════════════════════ */

.bdl-state {
  padding: 24px 16px;
  text-align: center;
  background: var(--ix-cream, #FAF8F1);
  border: 1px solid var(--ix-border, #E5E7EB);
  border-radius: 8px;
}
.bdl-state--loading {
  color: var(--ix-text-mid, #6B7280);
  font-style: italic;
}
.bdl-state--error {
  background: #FEF2F2;
  border-color: #FECACA;
}
.bdl-state--empty {
  color: var(--ix-text-mid, #6B7280);
}
.bdl-state-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--ix-text-dark, #1A293B);
  margin-bottom: 6px;
}
.bdl-state-msg {
  font-size: 13px;
  color: var(--ix-text-mid, #6B7280);
  margin-bottom: 12px;
}

.bdl-empty-section {
  padding: 18px;
  background: #FAFAFA;
  border: 1px dashed var(--ix-border, #E5E7EB);
  border-radius: 8px;
  font-size: 13px;
  color: var(--ix-text-mid, #6B7280);
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════
   CASCADE ANCHOR — fixed-to-viewport mount for action bar
                    + cascade panel
   v1.1.3: pinned to bottom:0 (flush with viewport edge).
   left + width set dynamically by syncCascadeAnchorToContainer()
   in JS so the bar mirrors #bdl-root's width (the file list
   container) — NOT the full viewport.
   ═══════════════════════════════════════════════════════════ */

#bdl-cascade-anchor {
  position: fixed;
  bottom: 0;
  z-index: 100;
  /* left and width are set inline by JS — do NOT specify here */
}

/* Hide entirely when the anchor has no children (no selection).
   The JS empties the innerHTML when selection drops to 0. */
#bdl-cascade-anchor:empty {
  display: none;
}

/* v1.1.1: when a selection is active, the JS toggles .has-selection on
   #bdl-root so the panel reserves space at the bottom for the fixed
   action bar / cascade panel — preventing the last file row from being
   hidden under the bar at the scroll limit.
   v1.1.4: bumped 110px → 200px because the action bar is now ~160px
   tall (4px red border + 60px pad + ~36px content + 60px pad). */
#bdl-root.has-selection {
  padding-bottom: 200px;
}

/* ═══════════════════════════════════════════════════════════
   ACTION BAR — Option B (two buttons + Clear)
   ═══════════════════════════════════════════════════════════ */

.bdl-action-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  /* v1.1.4: 60px top + 60px bottom padding (was 20px), 4px red top border. */
  padding: 60px 16px;
  background: var(--ix-white, #FFFFFF);
  border: 1px solid rgba(91, 127, 255, 0.22);
  border-top: 4px solid red;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 -4px 24px rgba(91, 127, 255, 0.10);
}

.bdl-action-bar-count {
  font-size: 14px;
  font-weight: 600;
  color: var(--ix-text-dark, #1A293B);
}
.bdl-action-bar-count strong {
  color: var(--ix-blue, #5B7FFF);
}

.bdl-action-bar-spacer {
  flex: 1;
}

/* The Clear link uses .ix-revert (defined in ix-form-controls).
   No additional override needed here. */

/* ═══════════════════════════════════════════════════════════
   CASCADE PANEL
   ═══════════════════════════════════════════════════════════ */

.bdl-cascade {
  background: var(--ix-white, #FFFFFF);
  border: 1px solid rgba(91, 127, 255, 0.22);
  /* v1.1.3: flush-bottom treatment — top-only radius, no bottom border,
     shadow above (since the bottom meets the viewport edge).
     v1.1.5: 4px red top border carries from the action bar so the
     transition action-bar → cascade-panel feels visually continuous.
     v1.1.6: min-height so the picker dropdown has room to expand. */
  border-top: 4px solid red;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 -4px 24px rgba(91, 127, 255, 0.14);
  overflow: hidden;
  min-height: 480px;
  display: flex;
  flex-direction: column;
}

/* Cascade header */
.bdl-cascade-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid #F1F3F5;
  background: rgba(91, 127, 255, 0.06);
}

.bdl-cascade-mode-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  font-family: var(--ix-font-mono, 'DM Mono', monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  color: #FFFFFF;
  white-space: nowrap;
}
.bdl-cascade-mode-tag--attach { background: var(--ix-blue, #5B7FFF); }
.bdl-cascade-mode-tag--create { background: var(--ix-gold, #C4A35A); }

.bdl-cascade-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--ix-text-dark, #1A293B);
}
.bdl-cascade-count strong {
  color: var(--ix-blue, #5B7FFF);
}

/* The mode-switch link uses .ix-revert; align it to the far right */
.bdl-cascade-header > .ix-revert {
  margin-left: auto;
}

/* Cascade body */
.bdl-cascade-body {
  /* v1.1.6: 2-column grid — Step 1 (chips) left, Step 2 (picker/info) right */
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 36px;
  padding: 24px 24px 18px;
  flex: 1;
  min-height: 0;
}

/* Cascade step container */
.bdl-cstep {
  /* v1.1.6: no bottom margin — steps are grid cells now, not stacked */
  margin-bottom: 0;
  opacity: 1;
  transition: opacity 200ms ease;
}
.bdl-cstep--inactive {
  opacity: 0.5;
  pointer-events: none;
}

.bdl-cstep-head {
  /* v1.1.7: align-items center (was baseline). Baseline alignment was
     collapsing the inline-flex number circles to ~0 cross-axis height. */
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

/* v1.1.7: defensive sizing + visuals on the step-num circle. Higher
   specificity selector + !important so nothing in the cascade stack
   can collapse or hide it. Bumped 18px → 24px for visibility. */
.bdl-cstep .bdl-cstep-num,
.bdl-cstep-num {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  flex: 0 0 24px !important;
  border-radius: 50% !important;
  background-color: var(--ix-gold, #C4A35A) !important;
  background-image: none !important;
  color: #FFFFFF !important;
  font-family: var(--ix-font-mono, 'DM Mono', monospace) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.bdl-cstep .bdl-cstep-num--pending,
.bdl-cstep-num--pending {
  background-color: #C7CDE8 !important;
}
.bdl-cstep.is-active .bdl-cstep-num {
  background-color: var(--ix-blue, #5B7FFF) !important;
}
.bdl-cstep.is-set .bdl-cstep-num {
  background-color: var(--ix-gold, #C4A35A) !important;
}
.bdl-cstep.is-active.is-set .bdl-cstep-num {
  /* When the step is both active and set, prefer the "set" gold */
  background-color: var(--ix-gold, #C4A35A) !important;
}

.bdl-cstep-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ix-text-dark, #1A293B);
}
.bdl-cstep-label--muted {
  color: var(--ix-text-mid, #6B7280);
  font-weight: 500;
}

/* The per-step Change link uses .ix-revert; push it to far right */
.bdl-cstep-head > .ix-revert {
  margin-left: auto;
}

/* Create-mode info pane (Step 2 for create flow) */
.bdl-create-info {
  /* v1.1.6: was margin-left 28px / max-width 480px for single-column indent
     under the step head — not needed in 2-column grid, info pane fills the
     right cell. */
  max-width: 480px;
  padding: 14px 16px;
  background: var(--ix-cream, #FAF8F1);
  border: 1px dashed var(--ix-gold, #C4A35A);
  border-radius: 8px;
  font-size: 13px;
  color: var(--ix-text-dark, #1A293B);
  line-height: 1.5;
}
.bdl-create-info strong {
  color: var(--ix-gold, #C4A35A);
}

/* v1.1.6: more dropdown room in the cascade context. Overrides
   ix-form-controls' default 280px max-height (which had !important). */
.bdl-cascade .bdl-cstep .ix-picker-list {
  max-height: 360px !important;
}

/* Picker empty state (when no matches found) */
.bdl-picker-empty {
  padding: 10px 14px;
  font-size: 12px;
  font-style: italic;
  color: var(--ix-text-mid, #6B7280);
  font-family: var(--ix-font-body, 'DM Sans', sans-serif);
}

/* ═══════════════════════════════════════════════════════════
   CASCADE FOOTER
   ═══════════════════════════════════════════════════════════ */

.bdl-cascade-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* v1.1.3: bottom 20px (was 14px) for visual parity with action bar */
  padding: 14px 20px 20px;
  border-top: 1px solid #F1F3F5;
  background: #FCFCFD;
}

.bdl-cascade-footer-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.bdl-cascade-status {
  font-size: 12px;
  color: var(--ix-text-mid, #6B7280);
  font-family: var(--ix-font-mono, 'DM Mono', monospace);
}
.bdl-cascade-status.is-stub-confirmed {
  color: #065F46;
  font-weight: 600;
}
/* v1.1.5: semantic mood states for the save flow */
.bdl-cascade-status.is-saving {
  color: var(--ix-text-mid, #6B7280);
  font-style: italic;
}
.bdl-cascade-status.is-success {
  color: #065F46;
  font-weight: 600;
}
.bdl-cascade-status.is-error {
  color: #991B1B;
  font-weight: 600;
}

/* v1.1.5: Save button in-flight state. Slightly dim + wait cursor.
   Disabled attribute is also set by JS, which the ix-btn :disabled
   rule already handles for the dimming. */
.ix-btn[data-bdl-cascade-save].is-saving {
  cursor: wait !important;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — narrow Studio frames
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 700px) {
  .bdl-card-header { flex-wrap: wrap; }
  .bdl-row         { flex-wrap: wrap; }
  .bdl-row-target  { max-width: 100%; }

  .bdl-action-bar {
    flex-wrap: wrap;
    gap: 8px 12px;
  }
  .bdl-action-bar-spacer { display: none; }
  .bdl-action-bar [data-bdl-open-cascade] { flex: 1 1 140px; }

  .bdl-cascade-header { flex-wrap: wrap; }
  .bdl-cascade-header > .ix-revert { margin-left: 0; }

  /* v1.1.6: collapse 2-column cascade back to single column on narrow */
  .bdl-cascade {
    min-height: 0;
  }
  .bdl-cascade-body {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* v1.2.0 · TD-183.3 — filter strip wraps on narrow viewports */
  .bdl-filter-strip {
    flex-wrap: wrap;
    gap: 6px 8px;
  }
  .bdl-filter-clear { margin-left: 0 !important; }

  /* v1.2.0 · TD-183.2 — modal becomes near-full-width on narrow */
  .bdl-replace-modal { max-width: 100%; }
  .bdl-replace-modal-bg { padding: 12px; }
}

/* ═══════════════════════════════════════════════════════════
   v1.2.0 · TD-183.3 · STATUS FILTER STRIP
   ═══════════════════════════════════════════════════════════ */

.bdl-filter-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--ix-line-soft, #F1F3F5);
  background: #FFFFFF;
}
.bdl-loose .bdl-filter-strip {
  /* In loose tray context, the strip sits ABOVE the .bdl-loose wrapper's
     own content. Match the card-body chrome so visual grouping holds. */
  border-radius: 8px 8px 0 0;
}

.bdl-filter-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ix-text-soft, #9CA3AF);
  font-family: var(--ix-font-mono, 'DM Mono', monospace);
  margin-right: 4px;
}

.bdl-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-family: var(--ix-font-body, 'DM Sans', sans-serif);
  font-size: 12px;
  font-weight: 600;
  color: var(--ix-text-mid, #6B7280);
  background: #FFFFFF;
  border: 1px solid var(--ix-line, #E5E7EB);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.bdl-filter-chip:hover {
  border-color: #C7D4FF;
  color: var(--ix-text-dark, #1A293B);
}
.bdl-filter-chip.is-active {
  background: #E8EEFF;
  border: 1.5px solid var(--ix-blue, #5B7FFF);
  color: var(--ix-blue, #5B7FFF);
  /* Compensate for the +0.5px border so the chip doesn't shift on activation */
  padding: 4.5px 11.5px;
}
.bdl-filter-chip:focus-visible {
  outline: 2px solid var(--ix-blue, #5B7FFF);
  outline-offset: 2px;
}

.bdl-filter-chip-count {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 8px;
  background: var(--ix-line, #E5E7EB);
  font-size: 10px;
  font-family: var(--ix-font-mono, 'DM Mono', monospace);
  font-weight: 700;
  color: var(--ix-text-mid, #6B7280);
}
.bdl-filter-chip.is-active .bdl-filter-chip-count {
  background: var(--ix-blue, #5B7FFF);
  color: #FFFFFF;
}

.bdl-filter-clear {
  margin-left: auto;
  background: none;
  border: 0;
  color: var(--ix-text-soft, #9CA3AF);
  font-size: 11px;
  font-family: var(--ix-font-mono, 'DM Mono', monospace);
  text-decoration: underline;
  cursor: pointer;
  padding: 4px 6px;
}
.bdl-filter-clear:hover { color: var(--ix-blue, #5B7FFF); }
.bdl-filter-clear[disabled] {
  color: var(--ix-line, #E5E7EB);
  text-decoration: none;
  cursor: default;
}

.bdl-filter-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--ix-text-mid, #6B7280);
  font-size: 13px;
  font-style: italic;
  background: #FCFCFD;
}
.bdl-filter-empty strong {
  color: var(--ix-text-dark, #1A293B);
  font-style: normal;
}

/* ═══════════════════════════════════════════════════════════
   v1.2.0 · TD-183.4 · TEXT-TYPE GUARD
   ═══════════════════════════════════════════════════════════ */

.bdl-row.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.bdl-row.is-disabled:hover {
  /* Don't lift on hover when disabled — communicates "can't click me" */
  background: transparent;
}
.bdl-row.is-disabled .bdl-row-check {
  cursor: not-allowed;
}

.bdl-row-guard {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 10px;
  font-family: var(--ix-font-mono, 'DM Mono', monospace);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: #92400E;
  background: #FEF3C7;
  border-radius: 4px;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════
   v1.2.0 · TD-183.2 · ALREADY_LINKED CONFIRMATION MODAL
   ═══════════════════════════════════════════════════════════ */

.bdl-replace-modal-bg {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(26, 41, 59, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  /* Layer above cascade panel (z-index in #bdl-cascade-anchor is local;
     fixed position with explicit z-index wins.) */
}

.bdl-replace-modal {
  background: #FFFFFF;
  border-radius: 10px;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  font-family: var(--ix-font-body, 'DM Sans', sans-serif);
}

.bdl-replace-modal-head {
  padding: 18px 22px 6px;
}
.bdl-replace-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ix-text-dark, #1A293B);
  margin: 0;
  line-height: 1.35;
}

.bdl-replace-modal-body {
  padding: 12px 22px 8px;
  font-size: 13px;
  color: var(--ix-text-dark, #1A293B);
  line-height: 1.55;
  overflow-y: auto;
}
.bdl-replace-modal-body p { margin: 0 0 10px; }

.bdl-replace-lead strong {
  color: var(--ix-text-dark, #1A293B);
}
.bdl-replace-lead em {
  color: var(--ix-text-mid, #6B7280);
  font-style: italic;
}

.bdl-replace-multi-hint {
  margin: 4px 0 12px;
  padding: 8px 12px;
  background: #F4F6FB;
  border-left: 3px solid var(--ix-blue, #5B7FFF);
  border-radius: 4px;
  font-size: 12px;
  color: var(--ix-text-mid, #6B7280);
}
.bdl-replace-multi-hint strong {
  color: var(--ix-text-dark, #1A293B);
}

.bdl-replace-target-list {
  margin: 8px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bdl-replace-target-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #ECDFB8;
  background: #F8F1E2;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
}
.bdl-replace-target-card:hover {
  background: #F3EAD2;
}
.bdl-replace-target-card.is-skipped {
  opacity: 0.55;
  background: #FAFAFB;
  border-color: var(--ix-line, #E5E7EB);
}

.bdl-replace-skip-check {
  margin: 2px 0 0;
  accent-color: var(--ix-blue, #5B7FFF);
  cursor: pointer;
  flex-shrink: 0;
}

.bdl-replace-target-icon {
  width: 22px;
  text-align: center;
  color: var(--ix-gold, #C4A35A);
  font-size: 18px;
  flex-shrink: 0;
}

.bdl-replace-target-body {
  flex: 1;
  min-width: 0;
}

.bdl-replace-target-text {
  font-size: 13px;
  color: var(--ix-text-dark, #1A293B);
  line-height: 1.45;
  word-wrap: break-word;
}
.bdl-replace-target-text strong {
  font-weight: 700;
}

.bdl-replace-target-arrow {
  color: var(--ix-text-mid, #6B7280);
}

.bdl-replace-target-meta {
  margin-top: 4px;
  font-size: 11px;
  color: var(--ix-text-mid, #6B7280);
  font-family: var(--ix-font-mono, 'DM Mono', monospace);
  word-wrap: break-word;
}

.bdl-replace-error {
  margin: 12px 0 4px;
  padding: 10px 12px;
  border: 1px solid #FEE2E2;
  border-radius: 6px;
  background: #FFF5F5;
  font-size: 12px;
  color: #991B1B;
  line-height: 1.5;
}
.bdl-replace-error strong { font-weight: 700; }

.bdl-replace-modal-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--ix-line-soft, #F1F3F5);
  background: #FCFCFD;
  flex-wrap: wrap;
}

.bdl-replace-cancel {
  /* Reuses .ix-revert pattern from ix-form-controls — small unstyled link. */
  background: none;
  border: 0;
  color: var(--ix-text-mid, #6B7280);
  font-family: var(--ix-font-body, 'DM Sans', sans-serif);
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px 0;
}
.bdl-replace-cancel:hover {
  color: var(--ix-text-dark, #1A293B);
}

.bdl-replace-confirm {
  /* Gold semantic — matches the cascade Save button. Replace is a
     write-commit action. */
  background: var(--ix-gold, #C4A35A);
  color: #FFFFFF;
  border: 0;
  border-radius: 6px;
  padding: 9px 18px;
  font-family: var(--ix-font-body, 'DM Sans', sans-serif);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: background 0.12s ease, opacity 0.12s ease;
}
.bdl-replace-confirm:hover {
  background: #B5945A;
}
.bdl-replace-confirm:focus-visible {
  outline: 2px solid var(--ix-blue, #5B7FFF);
  outline-offset: 2px;
}
.bdl-replace-confirm[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--ix-gold, #C4A35A);
}

/* ═══════════════════════════════════════════════════════════
   END · ta-bundles-v1.2.0.css
   ═══════════════════════════════════════════════════════════ */