/* ===== Complex Modal Factory Styles ===== */

/* Standalone pages do not load the workspace's global reset. CMF geometry
   must be independent of that reset, including imperative confirm/prompt. */
.cmf-modal,
.cmf-modal *,
.cmf-modal *::before,
.cmf-modal *::after {
  box-sizing: border-box;
}

.cmf-dialog-message {
  margin: 0;
}

@media (width <= 430px) {
  .cmf-modal:has(.cmf-dialog-message) > :is(.cmf-header, .cmf-body, .cmf-footer) {
    padding: 12px;
  }
}

/* Shared CMF / Vue-kit spacing: the suffix is pixels, never a multiplier.
   Keep legacy --space-* values intact for existing consumers. */

/* Base overlay */
.cmf-overlay {
  position: fixed;
  inset: 0;
  background: var(
    --modal-backdrop-color,
    color-mix(in srgb, var(--cmf-visual-header) 55%, transparent)
  );
  /* stylelint-disable-next-line property-no-vendor-prefix -- Safari compatibility */
  -webkit-backdrop-filter: blur(var(--modal-backdrop-blur, 4px));
  backdrop-filter: blur(var(--modal-backdrop-blur, 4px));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: var(--z-modal, 1050);
  animation: cmfFadeIn 0.15s ease-out;
}

/* presentation:'dock' — the SAME shell, positioned beside the work instead of
   over it. The overlay stops being a backdrop and becomes a click-through
   positioner, so the flow underneath stays visible, scrollable and clickable.
   Everything inside (.cmf-header, .cmf-body, .cmf-footer, .cmf-btn) is the
   unchanged modal vocabulary. */
.cmf-overlay--dock {
  padding: 24px;
  align-items: flex-end;
  justify-content: flex-end;
  pointer-events: none;

  /* No backdrop, categorically — every theme, every scrim tier. !important is
     deliberate: `.cmf-overlay` is repainted by the scrim tiers below, by the
     dark-mode variants, and by product theme sheets loaded after this one
     (planlined-product-theme.css). Winning that cascade on specificity alone
     means re-losing it the next time a sheet restyles overlays, and a dock that
     paints a backdrop dims the very flow it exists to sit beside. */
  background: none !important;
  /* stylelint-disable-next-line property-no-vendor-prefix -- Safari compatibility */
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* The card keeps the shell's own entrance animation; only hit-testing changes. */
.cmf-overlay--dock > .cmf-modal {
  pointer-events: auto;
}

/* A phone has no room beside the flow: the dock takes the full width at the
   bottom edge, still without a backdrop. */
@media (width <= 520px) {
  .cmf-overlay--dock {
    padding: 12px;
  }

  .cmf-overlay--dock > .cmf-modal {
    width: 100% !important;
  }
}

/* Base modal container */
.cmf-modal {
  --cmf-field-radius: 6px;
  --cmf-control-h-field: 40px;
  --cmf-field-pad-y: 9px;
  --cmf-field-pad-x: 11px;
  --cmf-field-font: 16px;
  /* Shell aliases are resolved here, at the modal boundary. Consumers should
     use the body contract below rather than redeclaring these values. */
  --modal-body-bg: var(--semantic-surface-canvas, var(--surface-primary, var(--color-white)));
  --modal-body-color: var(--semantic-text-primary, var(--text-primary, #172d43));
  --modal-footer-bg: var(--semantic-surface-subtle, var(--surface-secondary, #fff));
  --modal-footer-border: 1px solid var(--semantic-border-subtle, var(--border-subtle, #dce4ee));
  --modal-section-bg: var(--semantic-surface-subtle, var(--surface-secondary, #fff));
  --modal-section-divider: var(--semantic-border-subtle, var(--border-subtle, #dce4ee));
  --modal-text-primary: var(--semantic-text-primary, var(--text-primary, #2b5fc0));
  --modal-text-secondary: var(--semantic-text-secondary, var(--text-secondary, #64748b));
  --modal-text-success: var(--cmf-state-success-ink, #1f6b4d);
  --modal-link: var(--brand-primary, #c8402a);
  --modal-btn-secondary-bg: var(--surface-primary, var(--color-white));
  --modal-btn-secondary-color: var(--text-primary, #334155);
  --modal-btn-secondary-border: 1px solid var(--border-default, #dce4ee);
  --modal-btn-secondary-bg-hover: var(--surface-secondary, #fff);
  --modal-btn-secondary-border-hover: 1px solid var(--brand-primary, #c4d0de);
  --cmf-shell-soft-brand: #fff;
  --cmf-shell-current-bg: linear-gradient(135deg, #edf2f8, #edf2f8);
  --cmf-shell-icon-bg: #f3f5f8;
  --cmf-shell-icon-current-bg: #edf2f8;
  --cmf-shell-icon-warning-bg: #eef2f7;
  --cmf-shell-staged-bg: #edf2f8;
  --cmf-shell-band-bg: linear-gradient(180deg, #fff, #f3f5f8);
  --cmf-shell-empty-bg: linear-gradient(180deg, #f7faff, #fff);
  --cmf-shell-meter-track: #f3f5f8;
  --cmf-state-info-bg: var(--semantic-state-info-bg, #edf2f8);
  --cmf-state-info-border: var(--semantic-state-info-border, #bccbdd);
  --cmf-state-info-ink: var(--semantic-state-info-ink, #a63320);
  --cmf-state-success-bg: var(--semantic-state-success-bg, #e6f3ec);
  --cmf-state-success-border: var(--semantic-state-success-border, #b5d6c5);
  --cmf-state-success-ink: var(--semantic-state-success-ink, #1f6b4d);
  --cmf-state-warning-bg: var(--semantic-state-warning-bg, #eef2f7);
  --cmf-state-warning-border: var(--semantic-state-warning-border, #c4d0de);
  --cmf-state-warning-ink: var(--semantic-state-warning-ink, #8a5a00);
  --cmf-state-danger-bg: var(--semantic-state-danger-bg, #f7e9eb);
  --cmf-state-danger-border: var(--semantic-state-danger-border, #e3bcc1);
  --cmf-state-danger-ink: var(--semantic-state-danger-ink, #a61e2b);

  background: var(--modal-body-bg, var(--color-white));
  border-radius: var(--modal-border-radius, 12px);
  box-shadow: var(
    --modal-shadow,
    0 24px 50px color-mix(in srgb, var(--cmf-visual-ink) 20%, transparent)
  );
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
  animation: cmfSlideIn 0.15s ease-out;
}

/* OS preference. Gated on the auto-dark roots because design-tokens.css only
   re-points its variables under `:root.auto-dark` / `:root.vui-auto-dark`
   (design-tokens.css:861-874). `:root:not([data-theme='light'])` looks like a
   guard but matches whenever <html> carries no data-theme at all — i.e. every
   ordinary light session — so it darkened these surfaces while every token they
   inherit stayed light. */
@media (prefers-color-scheme: dark) {
  :root.auto-dark .cmf-modal,
  :root.vui-auto-dark .cmf-modal {
    --cmf-shell-soft-brand: #12233c;
    --cmf-shell-current-bg: linear-gradient(135deg, #173052, #10233c);
    --cmf-shell-icon-bg: #1e293b;
    --cmf-shell-icon-current-bg: #1e3a5f;
    --cmf-shell-icon-warning-bg: #3b250d;
    --cmf-shell-staged-bg: #3b153c;
    --cmf-shell-band-bg: linear-gradient(180deg, #12233c, #0e1c2e);
    --cmf-shell-empty-bg: linear-gradient(180deg, #12233c, #0e1c2e);
    --cmf-shell-meter-track: #27364b;
    --cmf-wb-meter-bg: linear-gradient(180deg, #17243a, #121e31);
    --cmf-wb-meter-border: #334155;
    --cmf-wb-success: #6ee7b7;
    --cmf-wb-warning: #fbbf24;
    --cmf-wb-danger: #fca5a5;
    --cmf-wb-info: #ffc9bc;
    --cmf-state-info-bg: #17233d;
    --cmf-state-info-border: #31588c;
    --cmf-state-info-ink: #ffc9bc;
    --cmf-state-success-bg: #12352d;
    --cmf-state-success-border: #276a57;
    --cmf-state-success-ink: #6ee7b7;
    --cmf-state-warning-bg: #352a15;
    --cmf-state-warning-border: #765617;
    --cmf-state-warning-ink: #fbbf24;
    --cmf-state-danger-bg: #3b1d25;
    --cmf-state-danger-border: #7f3544;
    --cmf-state-danger-ink: #fca5a5;
  }
}

[data-theme='dark'] .cmf-modal,
.dark-mode .cmf-modal,
.vui-dark .cmf-modal {
  --cmf-shell-soft-brand: #12233c;
  --cmf-shell-current-bg: linear-gradient(135deg, #173052, #10233c);
  --cmf-shell-icon-bg: #1e293b;
  --cmf-shell-icon-current-bg: #1e3a5f;
  --cmf-shell-icon-warning-bg: #3b250d;
  --cmf-shell-staged-bg: #3b153c;
  --cmf-shell-band-bg: linear-gradient(180deg, #12233c, #0e1c2e);
  --cmf-shell-empty-bg: linear-gradient(180deg, #12233c, #0e1c2e);
  --cmf-shell-meter-track: #27364b;
  --cmf-wb-meter-bg: linear-gradient(180deg, #17243a, #121e31);
  --cmf-wb-meter-border: #334155;
  --cmf-wb-success: #6ee7b7;
  --cmf-wb-warning: #fbbf24;
  --cmf-wb-danger: #fca5a5;
  --cmf-wb-info: #ffc9bc;
  --cmf-state-info-bg: #17233d;
  --cmf-state-info-border: #31588c;
  --cmf-state-info-ink: #ffc9bc;
  --cmf-state-success-bg: #12352d;
  --cmf-state-success-border: #276a57;
  --cmf-state-success-ink: #6ee7b7;
  --cmf-state-warning-bg: #352a15;
  --cmf-state-warning-border: #765617;
  --cmf-state-warning-ink: #fbbf24;
  --cmf-state-danger-bg: #3b1d25;
  --cmf-state-danger-border: #7f3544;
  --cmf-state-danger-ink: #fca5a5;
}

/* Managed controls use the native hidden attribute. Keep it authoritative
   even when a component class declares its own flex display mode. */
.cmf-modal [hidden] {
  display: none !important;
}

/* Modal header - Boardroom style: the proposal-book cover's radial glows
   and cropped rings, carried into the instrument so the modal and the
   artifact it produces share one mark. */
.cmf-header {
  position: relative;
  overflow: hidden;
  padding: var(--modal-header-padding, 1rem 1.25rem);
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: var(
    --modal-header-gradient,
    var(
      --modal-header-gradient-blue,
      linear-gradient(
        116deg,
        var(--cmf-visual-header, #071925),
        var(--cmf-visual-header-high, #0a2231) 62%,
        var(--cmf-visual-header, #071925)
      )
    )
  );
  border-radius: var(--modal-border-radius, 12px) var(--modal-border-radius, 12px) 0 0;
  color: var(--modal-header-color, var(--color-white));
  flex-shrink: 0; /* never squeeze header */
}

.cmf-header > * {
  position: relative;
  z-index: 1;
}

/* Eyebrow kicker above the title — the rc topbar voice. Builders render
   it when config.eyebrow is set. */
.cmf-header-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--modal-header-subtitle-color, rgb(255 255 255 / 55%));
  margin: 0 0 2px;
}

/* Hero band: the stat strip between header and body (wb-meter material).
   Rendered by createContentModal when config.heroBand is set. */
.cmf-hero-band {
  display: flex;
  align-items: stretch;
  padding: 0 1.25rem;
  background: var(--cmf-shell-band-bg);
  border-bottom: 1px solid var(--border-subtle, var(--cmf-visual-rule));
  flex-shrink: 0;
  overflow-x: auto;
}

.cmf-hero-stat {
  padding: 10px 22px 11px 0;
  margin-right: 22px;
  border-right: 1px solid var(--border-subtle, var(--cmf-visual-rule));
  flex-shrink: 0;
}

.cmf-hero-stat:last-child {
  border-right: none;
  margin-right: 0;
}

.cmf-hero-stat-value {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--cmf-wb-info, #a63320);
  font-variant-numeric: tabular-nums;
}

.cmf-hero-stat-value em {
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary, #64748b);
}

.cmf-hero-stat-value.tone-ok {
  color: var(--cmf-wb-success, var(--cmf-visual-ready));
}

.cmf-hero-stat-value.tone-warn {
  color: var(--cmf-wb-warning, var(--cmf-visual-review));
}

.cmf-hero-stat-value.tone-danger {
  color: var(--cmf-wb-danger, var(--cmf-visual-danger));
}

.cmf-hero-stat-label {
  margin-top: 1px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-tertiary, var(--cmf-visual-ink-tertiary));
}

.cmf-header-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
}

.cmf-header-icon {
  width: var(--modal-header-icon-size, 40px);
  height: var(--modal-header-icon-size, 40px);
  background: var(--modal-header-icon-bg, rgb(255 255 255 / 20%));
  border-radius: var(--modal-header-icon-radius, 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--modal-header-icon-color, var(--color-white));
  font-size: var(--modal-header-icon-font-size, 16px);
  flex-shrink: 0;
}

.cmf-header-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cmf-title {
  font-weight: 600;
  font-size: 20px;
  color: var(--modal-header-title-color, var(--color-white));
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  line-height: 1.3;
}

.cmf-subtitle {
  font-size: 13px;
  color: var(--modal-header-subtitle-color, rgb(255 255 255 / 85%));
  margin: 0;
}

.cmf-close {
  background: var(--modal-close-btn-bg, rgb(255 255 255 / 15%));
  border: none;
  width: var(--modal-close-btn-size, 32px);
  height: var(--modal-close-btn-size, 32px);
  border-radius: var(--modal-close-btn-radius, 8px);
  font-size: 20px;
  cursor: pointer;
  color: var(--modal-close-btn-color, var(--color-white));
  padding: 0;
  line-height: 1;
  transition: background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cmf-close:hover {
  background: var(--modal-close-btn-bg-hover, rgb(255 255 255 / 25%));
}

.cmf-close:focus-visible {
  outline: 3px solid
    var(--brand-primary-ring, color-mix(in srgb, var(--cmf-visual-signal) 72%, transparent));
  outline-offset: 3px;
}

/* Header actions wrapper - for walkthrough buttons + close */
.cmf-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  width: auto;
  margin-left: auto;
}

.cmf-header-actions .cmf-walkthrough-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 13px;
  padding: 0.35rem 0.6rem;
  background: rgb(255 255 255 / 20%);
  border: none;
  border-radius: 6px;
  color: var(--color-white);
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}

.cmf-header-actions .cmf-walkthrough-btn:hover {
  background: rgb(255 255 255 / 30%);
}

/* Semantic header states. The default header is the Boardroom shell. */
.cmf-header.cmf-header-success {
  background: var(
    --modal-header-gradient-green,
    linear-gradient(135deg, var(--cmf-visual-ready), var(--cmf-visual-ready))
  );
}

.cmf-header.cmf-header-warning {
  background: var(
    --modal-header-gradient-orange,
    linear-gradient(135deg, var(--cmf-visual-review), var(--cmf-visual-review))
  );
}

.cmf-header.cmf-header-danger {
  background: var(
    --modal-header-gradient-red,
    linear-gradient(135deg, var(--cmf-visual-danger-tint), var(--cmf-visual-danger))
  );
}

@media (width <= 480px) {
  .cmf-header {
    padding: 0.75rem 1rem;
    gap: 0.5rem;
  }

  .cmf-header-icon {
    width: var(--cmf-header-icon-size, 32px);
    height: var(--cmf-header-icon-size, 32px);
    font-size: 13px;
  }

  .cmf-title {
    font-size: 16px;
    white-space: normal;
  }

  .cmf-subtitle {
    font-size: 0.75rem;
  }

  .cmf-modal .cmf-close {
    width: var(--cmf-control-h-secondary);
    height: var(--cmf-control-h-secondary);
  }

  .cmf-body {
    padding: 1rem;
  }

  .cmf-footer {
    padding: 0.75rem 1rem;
    flex-direction: column-reverse;
  }

  .cmf-footer button {
    width: 100%;
    justify-content: center;
  }

  /* A footerControl is a control, not a command: the full-width rule above
     would stretch a 42px switch pill across the bar. Buttons INSIDE the slot
     keep their intrinsic size; the slot itself goes full width so its label
     can wrap. */
  .cmf-footer .cmf-footer-control button {
    width: auto;
  }

  .cmf-modal .cmf-footer > .cmf-footer-left,
  .cmf-modal .cmf-footer > .cmf-footer-right {
    width: 100%;
    flex-flow: column wrap;
  }

  .cmf-modal .cmf-footer .cmf-footer-control {
    width: 100%;
    flex: 1 1 100%;
  }
}

/* Modal body and the supported consumer token contract. Feature code may
   style its own content, but shell geometry and color remain CMF-owned. */
.cmf-body {
  --cmf-content-gap: 0.75rem;
  --cmf-content-section-bg: var(--semantic-surface-subtle, var(--surface-secondary, #f7f9fc));
  --cmf-content-section-border: var(--semantic-border-subtle, var(--border-subtle, #dce4ee));
  --cmf-content-section-radius: 8px;
  --cmf-content-section-padding: 14px 16px;

  padding: var(--modal-body-padding, 1rem 1.25rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  flex: 1;
  min-height: 0; /* break flex-item min-height:auto so overflow-y:auto scrolls */
  color: var(--modal-body-color, var(--cmf-visual-ink));
  background: var(--modal-body-bg, var(--color-white));
}

/* Modal footer */
.cmf-footer {
  padding: var(--modal-footer-padding, 0.85rem 1.25rem);
  border-top: var(--modal-footer-border, 1px solid var(--cmf-visual-rule));
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  background: var(--modal-footer-bg, var(--cmf-visual-rail));
  flex-shrink: 0; /* never squeeze footer; let body scroll instead */
}

.cmf-footer-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
}

.cmf-footer-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Commit-bar control slot (config.footerControl). A direct child of the bar,
   between the two button groups, and it shrinks before them so a long gate
   label never pushes the primary action off the bar. */
.cmf-footer-control {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-width: 0;
  flex: 0 1 auto;
}

/* Centring the slot means balancing what flanks it: footerLeft already claims
   flex:1, so the right group has to claim it too, or the control sits wherever
   the left-hand buttons happen to end. Scoped with :has() so bars WITHOUT a
   control keep their existing right-aligned geometry exactly. */
.cmf-footer:has(> .cmf-footer-control) .cmf-footer-right {
  flex: 1;
  justify-content: flex-end;
}

/* Button styles — four ranks, one physics: primary lifts, ghost gains the
   soft ring, link underlines, destructive stays quiet until hovered. */

/* The generic `.cmf-modal :where(...):focus-visible` ring (~line 4056) is
   the one that actually wins here at equal specificity, later in source --
   this rule was dead. Deleting it, not "fixing" it, per the CMF Instrument
   task-5 brief: fixing the ring/fill collision on filled ranks happens at
   `.cmf-btn-primary:focus-visible` / `.cmf-btn-verify:focus-visible`
   further down, where it can win over the generic rule deliberately. */

/* Ghost rank. Ships as the "secondary" class every footer already uses. */

/* Treatment C assumes a footer has exactly one filled object -- the
   commit -- so the secondary can afford to be a ghost. A footer whose ONLY
   action is a secondary (FeedbackModal's 'Close') has no filled object at
   all, and a ghost there reads as a label rather than a control. Give the
   sole action its edge back. */
.cmf-footer:not(:has(.cmf-btn-primary, .cmf-btn-verify, .cmf-btn-danger)) .cmf-btn-secondary {
  border-color: var(--cmf-visual-edge, var(--cmf-visual-ink-secondary));
}

/* `--cmf-btn-lift` is the sanctioned knob for the hover lift. A commit button
   that can render directly under the pointer which opened the modal has to be
   able to switch it off: a one-pixel rise moves the button out from under an
   edge-positioned pointer, :hover drops, the button falls back under the
   pointer, and it oscillates. Set `--cmf-btn-lift: 0` on the modal's own scope
   rather than overriding `.cmf-btn-primary`. Read here with the shipped
   literal as the fallback, so an unset knob changes nothing. */

/* Quiet rank. Zero call sites today (see task-5 brief corrections) but part
   of the factory's public variant API -- this is its only live tier, tier 2
   never re-declares `.cmf-btn-link` so nothing downstream overrides it. Ink
   text at rest keeps it from reading as a second danger/destructive rank. */

/* Destructive: outline at rest so the danger reads without shouting;
   fills red on hover, when the user is already aiming at it. */

/* Reduced motion now wins over the `.cmf-btn` transition BY DESIGN: the single
   `.cmf-btn` definition sits above this block, whereas the old duplicate sat
   below it and kept buttons animating. Pinned by cmf-control-geometry.spec.js. */
@media (prefers-reduced-motion: reduce) {
}

/* ===== Selection Modal Styles ===== */

.cmf-selection-modal {
  width: min(700px, 100%);
}

.cmf-controls {
  padding: 12px 0;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--cmf-visual-rule);
  margin-bottom: 1rem;
}

.cmf-search {
  flex: 1;
  min-width: 200px;
  padding: 8px 12px;
  border: 1px solid var(--cmf-visual-rule-strong);
  border-radius: 6px;
  font-size: 13px;
  outline: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

.cmf-search:focus {
  border-color: #c8402a;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cmf-visual-signal) 15%, transparent);
}

.cmf-filter {
  padding: 8px 12px;
  border: 1px solid var(--cmf-visual-rule-strong);
  border-radius: 6px;
  font-size: 13px;
  background: var(--color-white);
}

.cmf-select-all-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--cmf-visual-ink);
  cursor: pointer;
  white-space: nowrap;
}

.cmf-select-all-cb {
  width: 16px;
  height: 16px;
  accent-color: var(--cmf-visual-command-tint-strong);
}

.cmf-list {
  max-height: 400px;
  min-height: 200px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.cmf-list-count {
  font-size: 12px;
  color: var(--cmf-visual-ink-secondary);
  margin-bottom: var(--cmf-content-gap);
}

.cmf-list-empty {
  text-align: center;
  padding: 40px;
  color: var(--cmf-visual-ink-tertiary);
}

.cmf-list-empty i {
  font-size: 20px;
  margin-bottom: 8px;
  display: block;
}

.cmf-list-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 6px;
  background: var(--cmf-visual-rail);
  border: 1px solid var(--cmf-visual-rule);
  cursor: pointer;
  transition: all 0.15s;
  gap: 12px;
}

.cmf-list-item:hover {
  background: var(--cmf-visual-rail);
  border-color: var(--cmf-visual-command-tint);
}

.cmf-list-item.selected {
  background: var(--cmf-visual-rail);
  border-color: var(--cmf-visual-command-tint-strong);
}

.cmf-list-item-cb {
  width: 18px;
  height: 18px;
  accent-color: var(--cmf-visual-command-tint-strong);
  flex-shrink: 0;
}

.cmf-list-item-info {
  flex: 1;
  min-width: 0;
}

.cmf-list-item-label {
  font-weight: 500;
  color: var(--cmf-visual-ink);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cmf-list-item-meta {
  font-size: 12px;
  color: var(--cmf-visual-ink-secondary);
  margin-top: 2px;
}

.cmf-list-item-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.cmf-badge {
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
}

.cmf-badge-success {
  background: var(--cmf-visual-ready-tint);
  color: var(--cmf-visual-ready);
}

.cmf-badge-warning {
  background: var(--cmf-visual-review-tint);
  color: var(--cmf-visual-review);
}

.cmf-badge-info {
  background: var(--cmf-visual-signal-tint);
  color: #a63320;
}

.cmf-selection-info {
  font-size: 13px;
  color: var(--cmf-visual-ink-secondary);
}

/* ===== Split-Pane Modal Styles ===== */

.cmf-split-modal {
  width: 95vw;
  max-width: 1400px;
  height: 90vh;
}

.cmf-split-content {
  flex: 1;
  display: grid;
  grid-template-columns: 60% 40%;
  overflow: hidden;
}

.cmf-split-content.is-resizable {
  grid-template-columns: minmax(120px, 50%) 8px minmax(120px, 1fr);
}

.cmf-split-left {
  border-right: 1px solid var(--border-subtle, var(--cmf-visual-rule));
  background: var(--surface-secondary, var(--cmf-visual-rail));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.cmf-split-right {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-primary, var(--color-white));
  color: var(--text-primary, var(--cmf-visual-ink));
}

.cmf-panel-header {
  padding: 0.5rem 0.75rem;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-subtle, var(--cmf-visual-rule));
}

.cmf-panel-header-left,
.cmf-panel-header-right {
  background: var(--surface-tertiary, var(--cmf-visual-rail));
  color: var(--text-secondary, var(--cmf-visual-ink-secondary));
}

.cmf-panel-body {
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0.5rem;
}

.cmf-pdf-frame {
  width: 100%;
  height: 100%;
  border: none;
  min-height: 0;
}

.cmf-no-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: var(--cmf-visual-ink-tertiary);
  gap: 0.75rem;
  text-align: center;
  padding: 2rem;
}

.cmf-no-content i {
  font-size: 2.5rem;
}

.cmf-benefit-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0.5rem 0.65rem;
  border-bottom: 1px solid var(--cmf-visual-rule);
  cursor: pointer;
  transition: background 0.15s;
  gap: 0.75rem;
}

.cmf-benefit-row:hover {
  background: var(--cmf-visual-ready-tint);
}

.cmf-benefit-row.highlighted {
  background: var(--cmf-visual-ready-tint);
  border-color: var(--semantic-state-success-border);
}

.cmf-benefit-id {
  font-size: 13px;
  font-weight: 600;
  color: var(--cmf-visual-ink);
  min-width: 140px;
  word-break: break-word;
}

.cmf-benefit-value {
  font-size: 13px;
  color: var(--cmf-visual-ink-secondary);
  text-align: right;
  word-break: break-word;
  flex: 1;
}

/* ===== Form Modal Styles ===== */

.cmf-form-modal {
  width: min(720px, 100%);
}

/* Field palette -- ONE voice for every field inside a CMF shell.

   These were raw `#e5e7eb` / `#c8402a`: the app's slate ramp, hardcoded, with
   no token in front of it. That is how a modal ends up speaking a different
   language than the shell around it, and it is the reason `.settings-select`
   (Instrument edge) and the Layout/Feedback/Share selects (slate) read as three
   different systems. The resting edge and the focus colour are the two things
   that must not vary; both are tokens now, and both re-point on dark. */

/* Warn state: one condition, one severity. Danger stays for invalid input. */

/* Fixed-height text inputs centre their text by line-height; `auto`-height
   themes (paper, cool) keep padding-driven sizing. The fallback is the `1`
   that `.cmf-modal :where(... input ...)` already sets, so those themes are
   unchanged. Selects centre natively and are not listed. */

/* Compact ledger currency: cell control for editable table rows. Must follow
   and out-rank the line-height rule above (its :not() counts toward
   specificity), or slate's 34px field line-height keeps the cell at 36px. */

/* A fixed 36px field must be 36px outside a modal too: pages and the kit
   harness carry no global border-box reset, so the 1px border pushed slate
   inputs to 38px and past their container. Scoped to slate so the paper and
   cool baselines (recorded content-box) do not move. */

/* Slate fields are fixed-height with zero vertical padding, which would
   collapse a textarea to one line. Textareas never read the single-line
   centring tokens. Scoped to slate so paper and cool textareas do not move. */

/* Treatment C, extended to the factory's own select. C gave `.settings-select`
   and `.cmf-custom-select-toggle` a ruled field and left this one boxed --
   which is exactly the inconsistency C made visible. Ruled at rest; the full
   edge returns on hover and focus, which the transition above animates. */

.cmf-status {
  font-size: 13px;
  color: var(--cmf-visual-ink);
}

.cmf-status.error {
  color: var(--cmf-visual-danger);
}

.cmf-status.success {
  color: var(--cmf-visual-ready);
}

/* ===== Tabbed Modal Styles ===== */

.cmf-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--cmf-visual-rule);
  padding: 0 1.25rem;
  background: var(--cmf-visual-rail);
}

.cmf-tab {
  padding: 0.75rem 1rem;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--cmf-visual-ink-secondary);
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cmf-tab:hover {
  color: #c8402a;
}

.cmf-tab.active {
  color: #c8402a;
  border-bottom-color: #c8402a;
  font-weight: 600;
}

.cmf-tab-panel {
  display: none;
  padding: 1rem 1.25rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.cmf-tab-panel.active {
  display: block;
}

.cmf-section-divider {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--cmf-visual-rule);
  background: var(--cmf-visual-rail);
}

/* ===== Reusable section styles — decision workspace =====
   Sections stay compact and scan-friendly, but belong to the product UI
   rather than borrowing the proposal ledger's editorial treatment. Every
   colour resolves through --cmf-visual-* so light and dark modes share one
   semantic hierarchy. */

.cmf-section {
  /* Horizontal bleed for the full-width hover band. Matches .cmf-body's
     20px inline padding; override per-consumer if that ever changes. */
  --cmf-section-bleed: 20px;

  border-top: 1px solid var(--cmf-visual-rule, var(--cmf-visual-rule-strong));
}

.cmf-section:first-child {
  border-top: none;
}

/* The header is the hover target and spans the full body width, so the
   band reads as a row rather than a floating pill. It holds two sibling
   buttons — never nested, which is invalid and unfocusable. */
.cmf-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline: calc(var(--cmf-section-bleed) * -1);
  padding: 10px var(--cmf-section-bleed);
  background: none;
  border-bottom: none;
  user-select: none;
  transition: background 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.cmf-section-header:hover {
  background: var(--cmf-visual-rail, var(--cmf-visual-rail));
}

/* The disclosure control. Real button: keyboard-reachable, and it carries
   aria-expanded so the state is announced, which a clickable div never did. */
.cmf-section-toggle {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
  border: 1px solid transparent;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.cmf-section-toggle:focus-visible {
  outline: 2px solid var(--cmf-visual-focus, var(--cmf-visual-command, var(--cmf-visual-focus)));
  outline-offset: 3px;
  border-radius: 6px;
}

/* Sentence-case sans, not mono small-caps. Mono is for figures; words read
   faster with their ascender/descender silhouette intact, and uppercase
   tracking made long titles shout and wrap. */
.cmf-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.011em;
  line-height: 1.25;
  color: var(--cmf-visual-ink, var(--cmf-visual-ink));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Monochrome glyph on the rule — no tile. The tile was a rail atom and
   did not survive being repeated once per section. */
.cmf-section-icon {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--cmf-visual-command, var(--cmf-visual-command));
  display: inline-flex;
  align-items: center;
  font-size: var(--cmf-section-icon-size, 11px);
  flex-shrink: 0;
}

/* 6px of state. Neutral by default; ok/warn are opt-in via config.status. */
.cmf-section-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--cmf-visual-ink-tertiary, var(--cmf-visual-header));
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--cmf-visual-ink-tertiary, var(--cmf-visual-ink)) 18%, transparent);
}

.cmf-section--ok .cmf-section-dot {
  background: var(--cmf-visual-command, var(--cmf-visual-command));
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--cmf-visual-command, var(--cmf-visual-command)) 20%, transparent);
}

.cmf-section--warn .cmf-section-dot {
  background: var(--cmf-visual-review, var(--cmf-visual-review));
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--cmf-visual-review, var(--cmf-visual-review)) 22%, transparent);
}

/* Count, progress track and chevron ride the right end of the rule. */
.cmf-section-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}

/* Figures keep tabular alignment and tighter tracking — this is where a
   numeric face earns its place. */
.cmf-section-count {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--cmf-visual-ink, var(--cmf-visual-ink));
  font-variant-numeric: tabular-nums;
}

.cmf-section-count-suffix {
  margin-inline-start: 0.3em;
  font-family: var(--cmf-font-sans);
  font-weight: 400;
  font-size: 11px;
  color: var(--cmf-visual-ink-tertiary);
}

/* The count made visual. Rendered only when config.total is supplied. */
.cmf-section-track {
  width: 34px;
  height: 3px;
  border-radius: 6px;
  background: var(--cmf-visual-rule, var(--cmf-visual-rule));
  overflow: hidden;
  flex-shrink: 0;
}

.cmf-section-track > span {
  display: block;
  height: 100%;
  border-radius: 6px;
  background: var(--cmf-visual-command, var(--cmf-visual-command));
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reveal-on-hover so it is available without being permanent clutter.
   Focus reveals it too, or it would be unreachable by keyboard. */
.cmf-section-action {
  flex: none;
  padding: 4px 7px;
  border: 0;
  border-radius: 6px;
  background: none;
  font-size: 11px;
  font-weight: 600;

  /* 🔴 Was opacity:0 until hover -- which means invisible on touch, invisible
     in a demo, and invisible in every screenshot ever taken of this product.
     An action nobody can see is not an action. It rests visible-but-quiet and
     resolves to full command colour on hover/focus. The translateX slide is
     dropped with it: an element that is always present should not jump. */
  color: var(--cmf-visual-ink-tertiary, var(--cmf-visual-ink-secondary));
  cursor: pointer;
  opacity: 0.62;
  transition:
    opacity 120ms cubic-bezier(0.22, 0.72, 0.24, 1),
    color 120ms cubic-bezier(0.22, 0.72, 0.24, 1),
    background 120ms cubic-bezier(0.22, 0.72, 0.24, 1);
}

.cmf-section-header:hover .cmf-section-action,
.cmf-section-header:focus-within .cmf-section-action,
.cmf-section-action:focus-visible {
  opacity: 1;
  color: var(--cmf-visual-command, var(--cmf-visual-command));
}

.cmf-section-action:hover {
  background: var(--cmf-visual-command-tint, var(--cmf-visual-ready-tint));
}

/* A chevron is a SHAPE, not a font-size. This rule declared only a colour and
   0.7rem -- no width, no height -- so the glyph collapsed to a near-invisible
   dot. Giving it an explicit box makes it a real affordance, and ink-secondary
   (not tertiary) keeps the one control that toggles a whole section from
   sitting at the same weight as disabled helper text. */
.cmf-section-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: var(--cmf-visual-ink-secondary, var(--cmf-visual-ink));
  font-size: 11px;
  transition: transform 120ms cubic-bezier(0.22, 0.72, 0.24, 1);
  flex-shrink: 0;
}

.cmf-section.collapsed .cmf-section-chevron {
  transform: rotate(-90deg);
}

/* ONE recessed well per section — depth without the box soup we removed.
   The rows sit in an inset surface instead of floating on the body. */
.cmf-section-content {
  padding: var(--cmf-section-content-padding, 3px 11px);
  margin-bottom: 12px;
  background: var(--cmf-section-content-bg, var(--cmf-visual-rail, var(--cmf-visual-rail)));
  border: 1px solid var(--cmf-visual-rule, var(--cmf-visual-rule-strong));
  border-radius: 8px;
}

/* An empty section invites the next action instead of reporting a zero. */
.cmf-section-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  padding: 9px 11px;
  border: 1px dashed var(--cmf-visual-rule-strong, var(--cmf-visual-ink-secondary));
  border-radius: 8px;
  font-size: 12px;
  color: var(--cmf-visual-ink-tertiary, var(--cmf-visual-ink));
}

.cmf-section-empty > button {
  flex: none;
  padding: 4px 7px;
  border: 0;
  border-radius: 6px;
  background: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--cmf-visual-command, var(--cmf-visual-command));
  cursor: pointer;
}

.cmf-section-empty > button:hover {
  background: var(--cmf-visual-command-tint, var(--cmf-visual-ready-tint));
}

.cmf-section.collapsed .cmf-section-content {
  display: none;
}

/* ===== Compact section variant — the same band, tightened =====
   Dense comparison grids get less air and a flush content area; the base
   band is already borderless, so compact only trims.
   (The .cmf-section-count / -suffix rules that used to live here were a
   SECOND declaration sitting after the canonical one above — it silently
   won on source order. Do not reintroduce one.) */
.cmf-section--compact .cmf-section-header {
  padding-top: 7px;
  padding-bottom: 7px;
}

.cmf-section--compact .cmf-section-title {
  font-size: 12px;
}

.cmf-section--compact .cmf-section-content {
  padding: 0;
  margin-bottom: 8px;
  background: none;
  border: 0;
  border-radius: 0;
}

.cmf-section--compact .cmf-section-chevron {
  font-size: 10px;
}

.cmf-section--compact .cmf-section-count {
  font-size: 11px;
}

/* ===== Reusable compact label/value data grid (comparison table) ===== */

/* margin/border reset guards against the global `table` and `td, th` rules in
   styles.css, which otherwise add trailing space and edges inside the well. */
.cmf-datagrid {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  table-layout: fixed;
}

/* Dense label/value rows remain neutral; state and interaction provide the
   emphasis instead of report-style zebra banding. */
.cmf-datagrid-row {
  background: none;
}

/* Rules come from --cmf-visual-*, not --ledger-*: the ledger palette only
   carries dark counterparts under the prefers-color-scheme block and
   .vui-dark, and this app themes by html[data-theme]. Using --ledger-rule
   here would pin the row rule to its light value in dark mode. */
.cmf-datagrid-row:hover {
  background: var(--cmf-visual-rail, #f1f5f4);
}

/* styles.css carries a global `td, th { border: 1px solid var(--border-color) }`,
   so setting only border-bottom leaves its left/right/top edges drawing a grid
   through the well. Reset all four, then state the one rule we want. */
.cmf-datagrid-row > td {
  padding: 4px 0;
  font-size: 12px;
  border: 0;
  border-bottom: 1px solid var(--cmf-visual-rule, var(--cmf-visual-rule-strong));
  vertical-align: middle;
  line-height: 1.3;
}

.cmf-datagrid-row:last-child > td {
  border-bottom: none;
}

.cmf-datagrid-label {
  text-align: left;
  font-weight: 500;
  color: var(--cmf-visual-ink-secondary, var(--cmf-visual-ink-secondary));
  word-break: break-word;
}

/* In a tool that sells money to employers, currency must be the most
   confident glyph run on screen. It was rendering at 11.52px (0.72rem
   inherited from the row) -- the 22nd largest of 33 sizes in this file, while
   a dropdown reading "Medical" got 15.2px.

   🔴 --cmf-font-serif deliberately ends in Georgia, serif. If the webfont
   fails in front of a client, currency must degrade to a REAL serif, never to
   a default UI face.

   🔴 letter-spacing is explicitly 0, overriding the -0.02em this rule used to
   carry: tracking defeats tabular alignment, which is the entire point of a
   figures column. Never add it back. */

/* 🔴 SPECIFICITY, not source order, is the trap here. `.cmf-datagrid-value`
   sits on a <td> that is a direct child of `.cmf-datagrid-row`, so the
   `.cmf-datagrid-row > td` rule above scores (0,1,1) and beats a bare
   `.cmf-datagrid-value` at (0,1,0) -- font-size and line-height set there
   would be silently discarded and the money would stay at 11.52px. Qualifying
   with the element and parent takes this to (0,2,1) so it actually wins.
   Verified: ComplexModalFactory.js:3066 builds it as `createElement('td')`. */
.cmf-datagrid-row > td.cmf-datagrid-value,
.cmf-datarow-value.is-currency {
  text-align: right;
  font-family: var(--cmf-font-serif, 'Source Serif 4', Georgia, serif);
  font-optical-sizing: auto;
  font-size: 19px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0;
  color: var(--cmf-visual-ink, var(--cmf-visual-ink));
  word-break: break-word;
  font-variant-numeric: tabular-nums lining;
}

/* Editable values read like text until hover/focus -- which only works if the
   input inherits the SAME face and size as the static figure beside it.
   Left at 0.72rem sans, a currency cell visibly shrank and changed typeface
   the moment it became editable, so the "reads like text" illusion broke at
   exactly the moment the user looked at it. */
.cmf-datagrid-value input {
  width: 100%;
  padding: 2px 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  background: transparent;
  text-align: right;
  color: var(--cmf-visual-ink, var(--cmf-visual-ink));
  font-weight: 600;
  transition:
    border-color 0.12s,
    background 0.12s;
  box-sizing: border-box;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.cmf-datagrid-value input:not([readonly]):hover {
  border-color: var(--cmf-visual-rule, var(--cmf-visual-rule-strong));
  background: var(--cmf-visual-surface-raised, var(--color-white));
}

.cmf-datagrid-value input:focus {
  outline: none;
  border-color: var(--cmf-visual-focus, var(--cmf-visual-command, var(--cmf-visual-command)));
  background: var(--cmf-visual-surface-raised, var(--color-white));
  box-shadow: 0 0 0 2px
    var(--cmf-visual-focus-ring, color-mix(in srgb, var(--cmf-visual-focus) 24%, transparent));
}

.cmf-datagrid-row.edited .cmf-datagrid-value input {
  border-color: var(--cmf-visual-command, var(--cmf-visual-command));
  background: var(--cmf-visual-surface-raised, var(--color-white));
}

/* ===== Animations ===== */

/* The Instrument entrance. Consumed by the winning `.cmf-modal` tier. */
/* stylelint-disable-next-line keyframes-name-pattern -- public CMF animation contract */
@keyframes cmfInstrumentIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* stylelint-disable-next-line keyframes-name-pattern -- public CMF animation contract */
@keyframes cmfFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* stylelint-disable-next-line keyframes-name-pattern -- referenced by ComplexModalFactory.js */
@keyframes cmfFadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* stylelint-disable-next-line keyframes-name-pattern -- public CMF animation contract */
@keyframes cmfSlideIn {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* stylelint-disable-next-line keyframes-name-pattern -- referenced by ComplexModalFactory.js */
@keyframes cmfSlideOut {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(-20px);
    opacity: 0;
  }
}

/* ===== Workbench (rail + status + draft) =====
   Visual tier originated in Plan Sheet Workspace and now lives here:
   navy radial header, green progress fill, 80px rail rows with 42px icon
   tiles. NOT the welcome-screen aurora language. Magenta stays reserved
   for STAGED state so it never collides with the ok/warn tones. */

.cmf-workbench-modal > .cmf-header {
  min-height: var(--cmf-wb-header-min-height, 88px);
  padding: var(--cmf-wb-header-padding, 18px 24px);
  gap: var(--cmf-wb-header-gap, 20px);
  background: var(
    --cmf-wb-header-bg,
    radial-gradient(circle at 74% 0%, rgb(40 83 148 / 20%), transparent 34%),
    linear-gradient(118deg, #071526 0%, #0a1c31 54%, #071425 100%)
  );
  border-bottom: 1px solid var(--cmf-wb-header-border, rgb(255 255 255 / 16%));
}

.cmf-workbench-modal .cmf-header-icon {
  width: var(--cmf-wb-header-icon-size, 48px);
  height: var(--cmf-wb-header-icon-size, 48px);

  /* The workbench selector outranks the base header icon, so the visible
     instrument tile is repeated here rather than silently flattened.
     🔴 It repeated the DECLARATIONS but not the token NAMES: this rule asked
     for --cmf-header-icon-edge and --cmf-header-icon-bg, which nothing
     declares, and neither read carried a fallback. An unset var() with no
     fallback is invalid at computed-value time, so `border` and `background`
     resolved to `unset` -> initial: no border, transparent tile. That is
     exactly the flattening the line above was written to prevent, and it did
     NOT fall through to the base .cmf-header-icon rule -- invalid-at-computed-
     value discards the declaration, it does not defer to a lower-priority one.
     The declared names are --cmf-header-edge (base) and --cmf-wb-header-icon-bg
     (the workbench knob, set on .cmf-modal and itself routed through
     --cmf-header-tile, so this resolves to the same tile the base draws).
     Fallbacks are mandatory here so a future rename degrades to the tile
     instead of erasing it. Guarded by cmfTokenFallbacks.test.js. */
  border: 1px solid var(--cmf-header-edge, rgb(255 255 255 / 16%));
  border-radius: var(--cmf-wb-header-icon-radius, 8px);
  background: var(--cmf-wb-header-icon-bg, rgb(255 255 255 / 8%));
  color: var(--cmf-header-accent, #fbede9);
  box-shadow: inset 0 1px rgb(255 255 255 / 8%);
}

.cmf-workbench-modal .cmf-header-content {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.cmf-workbench-modal .cmf-header-info {
  min-width: 0;
}

.cmf-workbench-modal .cmf-title {
  font-size: var(--cmf-wb-title-size, 20px);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.cmf-workbench-modal .cmf-subtitle {
  margin-top: 4px;
  max-width: 100%;
  overflow: hidden;
  color: var(--cmf-wb-subtitle-color, rgb(255 255 255 / 70%));
  font-size: var(--cmf-wb-subtitle-size, 12px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cmf-workbench-body {
  flex: 1;
  display: grid;
  grid-template-columns: var(--cmf-wb-rail-width, 272px) minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

.cmf-wb-rail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--cmf-wb-rail-bg, var(--surface-secondary, var(--cmf-visual-rail)));
  border-right: 1px solid var(--cmf-wb-rail-border, var(--border-subtle, var(--cmf-visual-rule)));
}

.cmf-wb-search {
  position: relative;
  padding: var(--cmf-wb-search-padding, 13px 13px 10px);
}

.cmf-wb-search input {
  width: 100%;
  min-height: var(--cmf-wb-control-height, 34px);
  padding: 8px 10px;
  border: 1px solid var(--border-subtle, var(--cmf-visual-rule));
  border-radius: var(--cmf-wb-control-radius, 8px);
  background: var(--surface-primary, var(--color-white));
  font-size: 13px;
  color: var(--text-primary, var(--cmf-visual-ink));
}

.cmf-wb-search input:focus {
  outline: none;
  border-color: var(--brand-primary, var(--cmf-visual-command));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cmf-visual-focus) 14%, transparent);
}

.cmf-wb-meter {
  margin: var(--cmf-wb-meter-margin, 0 13px 12px);
  padding: var(--cmf-wb-meter-padding, 11px 13px);
  border: 1px solid var(--cmf-wb-meter-border, var(--cmf-visual-rule));
  border-radius: var(--cmf-wb-meter-radius, 12px);
  background: var(--cmf-wb-meter-bg, linear-gradient(180deg, #f7faff, var(--cmf-visual-rail)));
}

.cmf-wb-meter-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.cmf-wb-meter-value {
  font-size: 16px;
  font-weight: 640;
  letter-spacing: -0.015em;
  color: var(--cmf-wb-info, #a63320);
  font-variant-numeric: tabular-nums;
}

.cmf-wb-meter-value em {
  font-style: normal;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-tertiary, #64748b);
}

.cmf-wb-meter-pct {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary, #64748b);
  font-variant-numeric: tabular-nums;
}

.cmf-wb-meter-track {
  display: flex;
  margin-top: 8px;
  height: 7px;
  border-radius: 999px;
  background: var(--cmf-shell-meter-track);
  overflow: hidden;
}

.cmf-wb-meter-fill {
  background: linear-gradient(90deg, var(--cmf-visual-ready), var(--cmf-visual-ready));
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cmf-wb-meter-staged {
  background: repeating-linear-gradient(
    45deg,
    var(--cmf-visual-staged),
    var(--cmf-visual-staged) 4px,
    var(--cmf-visual-staged) 4px,
    var(--cmf-visual-staged) 8px
  );
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cmf-wb-meter-caption {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-tertiary, #64748b);
}

.cmf-wb-meter[data-tone='info'] .cmf-wb-meter-fill {
  background: var(--cmf-wb-info, #a63320);
}

.cmf-wb-meter[data-tone='warning'] .cmf-wb-meter-fill {
  background: var(--cmf-wb-warning, var(--cmf-visual-review));
}

.cmf-wb-meter[data-tone='danger'] .cmf-wb-meter-fill {
  background: var(--cmf-wb-danger, var(--cmf-visual-danger));
}

.cmf-wb-meter-caption[data-tone='success'] {
  color: var(--cmf-wb-success, var(--cmf-visual-ready));
}

.cmf-wb-meter-caption[data-tone='info'] {
  color: var(--cmf-wb-info, #a63320);
}

.cmf-wb-meter-caption[data-tone='warning'] {
  color: var(--cmf-wb-warning, var(--cmf-visual-review));
}

.cmf-wb-meter-caption[data-tone='danger'] {
  color: var(--cmf-wb-danger, var(--cmf-visual-danger));
}

.cmf-wb-rail-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px 12px;
}

/* Control rail (opt-in `railContent`). A rail holding CONTROLS rather than a
   list of things to pick. It owns the scroll when it is the rail's only
   content, so the item list below can still flex when a consumer pairs both. */
.cmf-wb-rail-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

/* With no items, the list must not hold open a strip of empty rail. */
.cmf-wb-rail-content ~ .cmf-wb-rail-list.cmf-wb-rail-list--content-only {
  display: none;
}

.cmf-wb-rail-heading {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 5px 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pl-on-ink-muted);
}

/* A collapsible heading is a real <button>, so it needs the control reset
   the <div> never did — plus a full-width hit area, because clicking the
   60px of label text is not a usable disclosure target. */
.cmf-wb-rail-heading.is-collapsible {
  width: 100%;
  font-family: inherit;
  background: none;
  border: 0;
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
}

.cmf-wb-rail-heading.is-collapsible:hover {
  color: #64748b;
  background: color-mix(in srgb, var(--cmf-visual-ink-tertiary) 12%, transparent);
}

.cmf-wb-rail-heading.is-collapsible:focus-visible {
  outline: 2px solid var(--cmf-visual-focus);
  outline-offset: -2px;
}

.cmf-wb-rail-heading-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cmf-wb-rail-count {
  flex: none;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

.cmf-wb-rail-caret {
  flex: none;
  width: 0;
  height: 0;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  border-top: 5px solid currentcolor;
  transition: transform 0.15s ease-out;
}

.cmf-wb-rail-heading[aria-expanded='false'] .cmf-wb-rail-caret {
  transform: rotate(-90deg);
}

/* Rail-level actions (＋ New folder). Tokenized like .cmf-wb-rail-item so
   the shared dark tokens recolor it automatically. */
.cmf-wb-rail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 8px 4px;
}

.cmf-wb-rail-action {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary, var(--cmf-visual-ink));
  background: var(--surface-primary, var(--color-white));
  border: 1px solid var(--cmf-wb-rail-border, var(--border-subtle, var(--cmf-visual-rule)));
  border-radius: 8px;
  cursor: pointer;
  transition-property: background-color, border-color;
  transition-duration: 0.15s;
  transition-timing-function: ease-out;
}

/* A translucent overlay, not the #f8faff the older rail rows use: this
   row's text is var(--text-primary), which inverts in dark mode, so a
   fixed light hover would make the label unreadable. Tinting
   whatever sits beneath works in both themes. */
.cmf-wb-rail-action:hover {
  background: color-mix(in srgb, var(--cmf-visual-command) 8%, transparent);
}

.cmf-wb-rail-action:focus-visible {
  outline: 2px solid var(--cmf-visual-focus);
  outline-offset: -2px;
}

.cmf-wb-rail-action[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.cmf-wb-rail-item {
  position: relative;
  display: grid;
  grid-template-columns: var(--cmf-wb-rail-icon-size, 42px) minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
  min-height: var(--cmf-wb-rail-row-min-height, 80px);
  /* .cmf-wb-rail-list is a scrolling flex column, so a rail long enough to
     overflow used to shrink every row down to its min-height floor while
     STILL overflowing -- pure loss. Labels (name + sub-line) then spilled out
     of the 44px row and collided with their neighbours. Measured live with a
     16-plan Verify Re-scan rail 2026-09-10: rows squashed 66px -> 44px. */
  flex-shrink: 0;
  gap: var(--cmf-wb-rail-row-gap, 10px);
  padding: var(--cmf-wb-rail-row-padding, 11px 12px);
  color: var(--text-primary, var(--cmf-visual-ink));
  text-align: left;
  background: var(--surface-primary, var(--color-white));
  border: 1px solid transparent;
  border-bottom-color: var(--border-subtle, var(--cmf-visual-rule));
  border-radius: 8px;
  cursor: pointer;
  transition-property: background-color, border-color, box-shadow;
  transition-duration: 0.15s;
  transition-timing-function: ease-out;
}

/* The dirty dot is the item's 4th child; in the 3-column grid it wrapped
   into a phantom 6px second row and pushed row-1 content ~8px high.
   Icon rails pin it to the corner instead (measured live 2026-07-31). */
.cmf-wb-rail-item:has(.cmf-wb-rail-icon) .cmf-wb-dot {
  position: absolute;
  top: 10px;
  right: 10px;
}

/* Icon-less rails (queue rails: Step3 age-rated, QCC roster editor) keep
   compact flex rows — the 42px icon column would swallow their labels. */
.cmf-wb-rail-item:not(:has(.cmf-wb-rail-icon)) {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 0;
  margin-bottom: 2px;
  padding: 9px 10px;
}

.cmf-wb-rail-item:hover {
  background: var(--cmf-shell-soft-brand);
}

.cmf-wb-rail-item:focus-visible {
  outline: 2px solid var(--cmf-visual-focus);
  outline-offset: -2px;
}

.cmf-wb-rail-item[aria-current='true'] {
  background: var(--cmf-shell-current-bg);
  border-color: var(--cmf-visual-plan-current);
  box-shadow: 0 5px 14px color-mix(in srgb, var(--cmf-visual-signal) 9%, transparent);
}

/* Radius and shadow are knobs for the same reason the backgrounds already are:
   a shell that wants a flat, square icon plate (Settings) had been reaching in
   with a `.cmf-workbench-modal.<shell> .cmf-wb-rail-icon` override, which the
   ownership ratchet counts and dark mode never reaches. Set the tokens on the
   shell scope instead. */
.cmf-wb-rail-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--cmf-wb-rail-icon-size, 42px);
  height: var(--cmf-wb-rail-icon-size, 42px);
  color: var(--cmf-visual-ink-secondary);
  background: var(--cmf-shell-icon-bg);
  border-radius: var(--cmf-shell-icon-radius, 8px);
  box-shadow: var(--cmf-shell-icon-shadow, none);
}

.cmf-wb-rail-item[aria-current='true'] .cmf-wb-rail-icon {
  color: #a63320;
  background: var(--cmf-shell-icon-current-bg);
}

.cmf-wb-rail-item.needs-review .cmf-wb-rail-icon {
  color: var(--cmf-visual-review);
  background: var(--cmf-shell-icon-warning-bg);
}

/* Collapse gets its OWN class rather than reusing .is-hidden: search and
   collapse are independent reasons to hide a row, and sharing one class
   would make clearing a search re-expand every collapsed group. This rule
   must stay here — .cmf-wb-rail-item:not(:has(.cmf-wb-rail-icon)) above
   computes to the same 0,2,0 specificity and sets display:flex, so only
   source order decides the winner. */
.cmf-wb-rail-item.is-hidden,
.cmf-wb-rail-item.is-group-collapsed,
.cmf-wb-rail-item.is-renaming,
.cmf-wb-rail-heading.is-hidden {
  display: none;
}

/* Hierarchy. The gutter is reserved on EVERY row of a tree rail, not just
   expandable ones, so sibling labels align in a column instead of
   stair-stepping around the twisties. --cmf-wb-rail-depth is set inline
   per row; the 14px step is the same rhythm the bespoke Plan Library rail
   uses for its --depth. */
.cmf-wb-rail-tree .cmf-wb-rail-item[data-rail-depth] {
  padding-left: calc(var(--cmf-wb-rail-depth, 0) * 14px + 26px);
}

.cmf-wb-rail-twisty {
  position: absolute;
  top: 50%;
  left: calc(var(--cmf-wb-rail-depth, 0) * 14px + 7px);
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: 6px;
  cursor: pointer;
}

/* Drawn with borders rather than a glyph so it inherits currentColor and
   needs no icon font — the rail already renders in modals that load
   before Font Awesome. */
.cmf-wb-rail-twisty::before {
  position: absolute;
  top: 3px;
  left: 4px;
  width: 5px;
  height: 5px;
  border-right: 1.6px solid currentcolor;
  border-bottom: 1.6px solid currentcolor;
  transform: rotate(-45deg);
  opacity: 0.62;
  transition: transform 0.15s ease-out;
  content: '';
}

.cmf-wb-rail-item[aria-expanded='true'] .cmf-wb-rail-twisty::before {
  transform: rotate(45deg);
}

.cmf-wb-rail-twisty:hover::before {
  opacity: 1;
}

/* Drop feedback is rgba over the row's own background, never a light hex:
   a literal cannot invert, and this row's text comes from --text-primary,
   which DOES go near-white in dark mode. */
.cmf-wb-rail-item.is-drop-target {
  background: color-mix(in srgb, var(--cmf-visual-command) 10%, transparent);
  border-color: var(--cmf-visual-command);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cmf-visual-command) 35%, transparent);
}

.cmf-wb-rail-item.is-drop-invalid {
  background: color-mix(in srgb, var(--cmf-visual-danger) 8%, transparent);
  border-color: var(--cmf-visual-danger);
  cursor: not-allowed;
}

/* The inline rename editor stands in for the row it replaces, so it
   inherits the same padding var and lines up at either density. */
.cmf-wb-rail-rename {
  display: flex;
  align-items: center;
  padding: var(--cmf-wb-rail-row-padding, 11px 12px);
}

.cmf-wb-rail-rename input {
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  color: var(--text-primary, var(--cmf-visual-ink));
  background: var(--surface-primary, var(--color-white));
  border: 1px solid var(--cmf-visual-command);
  border-radius: 6px;
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cmf-visual-command) 16%, transparent);
}

.cmf-wb-rail-rename.is-error input {
  border-color: var(--cmf-visual-danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cmf-visual-danger) 16%, transparent);
}

.cmf-wb-rail-label {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 550;
  line-height: 1.25;
  color: var(--text-primary, var(--cmf-visual-ink));
  overflow-wrap: anywhere;
  white-space: normal;
}

.cmf-wb-chip {
  flex: none;

  /* Long chip labels (ECS "EE + ER + HSA + Total") must not win the
     width fight against the rail label — "Costs" truncated to "C…".
     Full text survives in the title attribute. */
  max-width: 16ch;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 2.5px 7px;
  border: 1px solid;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.cmf-wb-chip-ok {
  background: var(--cmf-state-success-bg);
  border-color: var(--cmf-state-success-border);
  color: var(--cmf-state-success-ink);
}

.cmf-wb-chip-warn {
  background: var(--cmf-state-warning-bg);
  border-color: var(--cmf-state-warning-border);
  color: var(--cmf-state-warning-ink);
}

.cmf-wb-chip-info {
  background: var(--cmf-state-info-bg);
  border-color: var(--cmf-state-info-border);
  color: var(--cmf-state-info-ink);
}

.cmf-wb-chip-off {
  background: var(--surface-tertiary, var(--cmf-visual-rail));
  border-color: var(--border-subtle, var(--cmf-visual-rule));
  color: var(--text-tertiary, #64748b);
}

/* Staged outranks the tone colour — uncommitted state is the louder fact. */
.cmf-wb-rail-item.is-dirty .cmf-wb-chip {
  background: var(--cmf-shell-staged-bg);
  border-color: var(--cmf-visual-staged);
  color: var(--cmf-visual-staged);
  box-shadow: 0 1px 0 0 var(--cmf-visual-staged);
}

.cmf-wb-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--cmf-visual-command-tint);
  opacity: 0;
  transition: opacity 0.15s;
}

.cmf-wb-rail-item.is-dirty .cmf-wb-dot {
  opacity: 1;
}

.cmf-wb-rail-empty {
  display: none;
  padding: 14px 10px;
  font-size: 13px;
  color: var(--pl-on-ink-muted);
  text-align: center;
}

.cmf-wb-rail-empty.is-visible {
  display: block;
}

.cmf-wb-main {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  background: var(--surface-primary, var(--color-white));
  color: var(--text-primary, var(--cmf-visual-ink));
}

/* Persistent editor/preview compositions own their internal scrollers.
   Consumers opt into this shared mode instead of restyling the main
   Workbench container from feature CSS.

   overflow-y is a safety net, not a second scroller: a composition that
   fills the pane (flex: 1; min-height: 0) never overflows it, so nothing
   changes. It was `hidden`, which silently made content below the fold
   unreachable whenever a consumer forgot its inner scroller -- hit by the
   ACA modeler, Census Statistics, Census Processor, QCC re-scan and
   Reconciliation, each patched locally. x stays clipped so wide matrices
   do not grow a horizontal bar. */
.cmf-wb-main.cmf-wb-main-contained {
  display: flex;
  flex-direction: column;
  overflow: hidden auto;
}

/* Standard workbench editor pane. The fixed header and independent
   scroller keep titles/actions visible while long facet content remains
   reachable. min-* and overflow rules prevent grid/flex descendants
   from silently widening the modal or being clipped by its footer. */
.cmf-wb-main:has(.cmf-wb-pane) {
  overflow: hidden;
}

.cmf-wb-pane {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--surface-primary, var(--color-white));
  color: var(--text-primary, var(--cmf-visual-ink));
}

.cmf-wb-pane-header {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: var(--cmf-wb-pane-header-padding, 15px 18px 13px);
  border-bottom: 1px solid var(--border-subtle, var(--cmf-visual-rule));
  background: var(--surface-primary, var(--color-white));
}

.cmf-wb-pane-heading {
  min-width: 0;
}

.cmf-wb-pane-eyebrow {
  margin-bottom: 4px;
  color: var(--text-tertiary, #64748b);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.cmf-wb-pane-title {
  margin: 0;
  color: var(--text-primary, var(--cmf-visual-ink));
  font-size: 16px;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.cmf-wb-pane-subtitle {
  margin: 3px 0 0;
  color: var(--text-secondary, var(--cmf-visual-ink-secondary));
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.cmf-wb-pane-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.cmf-wb-pane-scroll {
  box-sizing: border-box;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;

  /* Matches the treatment .cmf-body now carries; this scroller already had
     the stable gutter, so only the scrollbar's own colouring was missing. */
  scrollbar-width: thin;
  scrollbar-color: var(--cmf-visual-rule-strong, var(--cmf-visual-ink-secondary)) transparent;
  padding: var(--cmf-wb-pane-padding, 16px 18px 24px);
}

.cmf-wb-pane-scroll > * {
  max-width: 100%;
  min-width: 0;
}

.cmf-wb-pane :where(input, select, textarea, img, iframe, pre) {
  max-width: 100%;
}

.cmf-wb-pane :where(input, select, textarea, button, [tabindex]):focus-visible {
  scroll-margin: 72px 16px;
}

/* Header metric strip — borderless PSW style, one hairline on the left */
.cmf-wb-metrics {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--cmf-wb-metrics-gap, 26px);
  margin-left: auto;
  padding-left: 22px;
  border-left: 1px solid color-mix(in srgb, var(--cmf-visual-command-tint) 24%, transparent);
  white-space: nowrap;
}

.cmf-wb-metric {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border-left: 0;
  color: var(--cmf-visual-rule);
  font-size: 13px;
  font-weight: 600;
}

.cmf-wb-metric:first-child {
  border-left: 0;
}

.cmf-wb-metric-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--cmf-visual-command-tint-strong);
  transition: color 0.18s;
}

.cmf-wb-metric.is-ok .cmf-wb-metric-value {
  color: var(--semantic-state-success-border);
}

.cmf-wb-metric.is-review .cmf-wb-metric-value {
  color: var(--cmf-visual-review);
}

.cmf-wb-metric-label {
  margin-top: 2px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.075em;

  /* On the navy workbench header #94a3b8 sat near 4:1 — too tight for
     small uppercase. #b8c7dd clears WCAG with room. */
  color: var(--cmf-visual-rule);
}

.cmf-wb-metric.is-staged .cmf-wb-metric-value {
  color: var(--cmf-visual-staged);
}

/* Draft aggregate — occupies the footer's left slot */
.cmf-wb-draft {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.cmf-wb-footer-summary {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-tertiary, #64748b);
  font-size: 13px;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
}

.cmf-wb-footer-summary::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentcolor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentcolor 14%, transparent);
}

.cmf-wb-footer-summary.is-success {
  color: var(--cmf-wb-success, var(--cmf-visual-ready));
}

.cmf-wb-footer-summary.is-warning {
  color: var(--cmf-wb-warning, var(--cmf-visual-review));
}

.cmf-wb-footer-summary.is-danger {
  color: var(--cmf-wb-danger, var(--cmf-visual-danger));
}

.cmf-wb-footer-summary.is-info {
  color: var(--cmf-wb-info, #a63320);
}

.cmf-wb-draft-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid var(--border-subtle, var(--cmf-visual-rule));
  border-radius: 999px;
  background: var(--surface-primary, var(--color-white));
  font-size: 13px;
  font-weight: 600;
  color: var(--text-tertiary, #64748b);
  font-variant-numeric: tabular-nums;
}

.cmf-wb-draft-pill.is-active {
  border-color: var(--cmf-visual-command-tint);
  background: var(--cmf-visual-command-tint);
  color: var(--cmf-visual-command);
}

.cmf-wb-draft-pill::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentcolor;
}

.cmf-wb-discard {
  padding: 5px 8px;
  border: 0;
  border-radius: 6px;
  background: none;
  font-size: 13px;
  font-weight: 550;
  color: #64748b;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cmf-wb-discard:hover:not(:disabled) {
  color: var(--text-primary, var(--cmf-visual-ink));
  background: var(--surface-secondary, var(--color-white));
}

.cmf-wb-discard:disabled {
  opacity: 0.35;
  cursor: default;
}

.cmf-workbench-modal > .cmf-footer {
  min-height: var(--cmf-wb-footer-min-height, 68px);
  padding: var(--cmf-wb-footer-padding, 12px 24px);
  background: var(--cmf-wb-footer-bg, var(--surface-primary, var(--color-white)));
  border-top: 1px solid
    var(--cmf-wb-footer-border, var(--border-subtle, var(--cmf-visual-rule-strong)));
}

.cmf-workbench-modal > .cmf-footer .cmf-btn {
  min-width: var(--cmf-wb-button-min-width, 112px);
  min-height: var(--cmf-wb-button-min-height, 42px);
  border-radius: var(--cmf-wb-button-radius, 8px);
  font-size: var(--cmf-wb-button-font-size, var(--modal-btn-font-size, 13px));
  font-weight: 700;
}

.cmf-workbench-modal > .cmf-footer .cmf-btn-primary {
  min-width: var(--cmf-wb-primary-min-width, 150px);
  background: linear-gradient(135deg, var(--cmf-visual-command), var(--cmf-visual-command));
  border-color: var(--cmf-visual-command);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--cmf-visual-signal) 18%, transparent);
}

/* Named shell presets keep feature CSS out of CMF internals. */
.cmf-wb-size-standard {
  width: min(1180px, 98vw);
  height: min(760px, 92dvh);
  max-height: 92dvh;
}

.cmf-wb-size-wide {
  width: min(1760px, 98vw);
  height: 95dvh;
  max-height: 95dvh;
}

.cmf-wb-size-fullscreen {
  width: 100vw;
  height: 100dvh;
  min-height: 100dvh;
  max-width: 100vw;
  max-height: 100dvh;
  border-radius: 0;
}

.cmf-wb-overlay-fullscreen {
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
}

.cmf-wb-density-presentation {
  --cmf-wb-header-min-height: 112px;
  --cmf-wb-header-padding: 24px 30px;
  --cmf-wb-header-gap: 20px;
  --cmf-wb-header-icon-size: 60px;
  --cmf-wb-header-icon-radius: 13px;
  --cmf-wb-title-size: 1.75rem;
  --cmf-wb-subtitle-size: 1rem;
  --cmf-wb-rail-width: clamp(280px, 21vw, 336px);
  --cmf-wb-search-padding: 17px 17px 10px;
  --cmf-wb-control-height: 42px;
  --cmf-wb-meter-margin: 0 17px 18px;
  --cmf-wb-meter-padding: 16px;
  --cmf-wb-rail-row-min-height: 88px;
  --cmf-wb-rail-row-padding: 13px 16px;
  --cmf-wb-rail-row-gap: 14px;
  --cmf-wb-rail-icon-size: 48px;
  --cmf-wb-metrics-gap: 34px;
  --cmf-wb-footer-min-height: 100px;
  --cmf-wb-footer-padding: 20px 30px;
  --cmf-wb-button-min-height: 56px;
  --cmf-wb-button-min-width: 124px;
  --cmf-wb-primary-min-width: 200px;
  --cmf-wb-button-radius: 10px;
  --cmf-wb-button-font-size: 16px;
}

.cmf-wb-header-density-compact {
  --cmf-wb-header-min-height: 64px;
  --cmf-wb-header-padding: 10px 18px;
  --cmf-wb-header-gap: 14px;
  --cmf-wb-header-icon-size: 40px;
  --cmf-wb-header-icon-radius: 9px;
  --cmf-wb-title-size: 1.2rem;
  --cmf-wb-subtitle-size: 0.78rem;
  --cmf-wb-metrics-gap: 22px;
}

/* 🔴 The reduced-motion guard used to be declared HERE and again at the end of
   this file. Both blocks targeted the same universal selector set with
   !important, so the later one won outright and this copy was dead code.
   Deleting it is a no-op at runtime. The single surviving guard lives at the
   bottom of this file -- edit that one. */

@media (height <= 820px) and (width >= 901px) {
  .cmf-wb-density-presentation {
    --cmf-wb-header-min-height: 82px;
    --cmf-wb-header-padding: 15px 20px;
    --cmf-wb-header-gap: 14px;
    --cmf-wb-header-icon-size: 48px;
    --cmf-wb-title-size: 1.38rem;
    --cmf-wb-subtitle-size: 0.875rem;
    --cmf-wb-search-padding: 12px 14px 8px;
    --cmf-wb-control-height: 38px;
    --cmf-wb-meter-margin: 5px 14px 18px;
    --cmf-wb-meter-padding: 13px 14px;
    --cmf-wb-rail-row-min-height: 70px;
    --cmf-wb-rail-row-padding: 11px 13px;
    --cmf-wb-rail-icon-size: 42px;
    --cmf-wb-footer-min-height: 72px;
    --cmf-wb-footer-padding: 10px 20px;
    --cmf-wb-button-min-height: 50px;
    --cmf-wb-button-font-size: 13px;
  }
}

/* ===== Responsive ===== */

/* The second branch catches large iPhones in landscape. Their CSS
   viewport can exceed 900px even though the short edge is still phone
   sized, so a width-only breakpoint leaves them in the desktop rail. */
@media (width <= 900px), (orientation: landscape) and (height <= 500px) and (width <= 1000px) {
  .cmf-wb-density-presentation {
    --cmf-wb-header-min-height: 88px;
    --cmf-wb-header-padding: 16px 18px;
    --cmf-wb-header-icon-size: 48px;
    --cmf-wb-title-size: 1.35rem;
    --cmf-wb-subtitle-size: 0.82rem;
    --cmf-wb-footer-min-height: 76px;
    --cmf-wb-footer-padding: 12px 16px;
    --cmf-wb-button-min-height: 46px;
    --cmf-wb-button-min-width: 108px;
    --cmf-wb-primary-min-width: 150px;
    --cmf-wb-button-font-size: 13px;
  }

  .cmf-workbench-body {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  /* A control rail has substantial intrinsic height. Leaving the first track
     as `auto` lets that content claim the whole body even though the rail box
     itself is capped at 42%, collapsing the main pane to zero height. */
  .cmf-wb-mobile-stack .cmf-workbench-body {
    grid-template-rows: minmax(0, 42%) minmax(0, 1fr);
  }

  .cmf-wb-mobile-stack .cmf-wb-rail {
    height: 100%;
    max-height: none;
  }

  .cmf-wb-rail,
  .cmf-wb-main {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .cmf-wb-rail {
    border-right: 0;
    border-bottom: 1px solid var(--cmf-visual-rule);
    max-height: 42%;
  }

  .cmf-wb-mobile-tabs .cmf-wb-rail {
    max-height: none;
  }

  .cmf-wb-mobile-tabs .cmf-wb-search,
  .cmf-wb-mobile-tabs .cmf-wb-meter,
  .cmf-wb-mobile-tabs .cmf-wb-rail-heading {
    display: none;
  }

  .cmf-wb-mobile-tabs .cmf-wb-rail-list {
    display: flex;
    flex: none;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    gap: 6px;
    overflow-x: auto;
    padding: 7px 9px;
    scrollbar-gutter: stable;
  }

  .cmf-wb-mobile-tabs .cmf-wb-rail-item {
    display: grid;
    grid-template-columns: 30px minmax(88px, 1fr) auto;
    flex: 1 0 min(210px, 72vw);
    min-height: 50px;
    gap: 7px;
    margin: 0;
    padding: 7px 8px;
    border-bottom-color: transparent;
  }

  .cmf-wb-mobile-tabs .cmf-wb-rail-item:not(:has(.cmf-wb-rail-icon)) {
    display: flex;
    grid-template-columns: none;
  }

  .cmf-wb-mobile-tabs .cmf-wb-rail-icon {
    width: 30px;
    height: 30px;
    border-radius: var(--cmf-shell-icon-radius, 8px);
  }

  .cmf-wb-mobile-tabs .cmf-wb-chip {
    max-width: 8ch;
    padding-inline: 5px;
  }

  .cmf-wb-metrics {
    display: none;
  }

  .cmf-wb-pane-header {
    padding: 12px 14px 11px;
  }

  .cmf-wb-pane-scroll {
    padding: 14px 14px 20px;
    scrollbar-gutter: auto;
  }

  .cmf-split-content {
    grid-template-columns: 1fr;
    grid-template-rows: 50% 50%;
  }

  .cmf-split-content.is-resizable {
    grid-template-columns: 1fr;
    grid-template-rows: 50% 50%;
  }

  .cmf-split-content.is-resizable .cmf-split-left {
    width: auto;
  }

  .cmf-split-content.is-resizable .cmf-split-resizer {
    display: none;
  }

  .cmf-split-left {
    border-right: none;
    border-bottom: 1px solid var(--cmf-visual-rule);
  }

  /* On stacked mobile split panes, some surfaces (e.g. Scenario Manager)
     render controls directly in the pane root instead of inside
     .cmf-panel-body. Keep pane roots scrollable so lower controls are
     reachable instead of being clipped under the footer. */
  .cmf-split-left,
  .cmf-split-right {
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

/* A landscape phone can be wider than the portrait breakpoint while having
   less usable height. Treat that short viewport as phone geometry too: the
   modal gets one bounded flex box and .cmf-body remains its scroll owner.
   Consumer-supplied width/height remain authoritative: rich modals that own
   a nested pane must not be silently converted into full-screen sheets.
   Workbench-specific layout still adapts in its own 900px/short-viewport
   rules above; this block only establishes the shared shell contract. */
@media (width <= 640px), (width <= 960px) and (height <= 500px) and (orientation: landscape) {
  .cmf-overlay:not(.cmf-overlay--dock) {
    padding: 0;
    align-items: stretch;
  }

  /* dvh, not vh. On iOS 'vh' resolves to the LARGE viewport — the height
     the page would have with Safari's toolbars hidden — so a 100vh sheet
     renders ~90-130px taller than the visible area and its footer lands
     under the browser chrome, unreachable because .cmf-overlay is
     position:fixed and cannot be scrolled. The vh lines stay first as a
     fallback for pre-dvh browsers (Safari < 15.4).
     min-height is what actually pins the height here: used height is
     max(min-height, min(max-height, height)), so min-height beats any
     caller-supplied inline max-height regardless of specificity. Keep it
     in dvh or every caller's inline maxHeight is silently meaningless.
     NOTE: no backticks in this comment — it lives inside the injected-style
     template literal, so a backtick here TERMINATES the literal and breaks
     the whole module. node --check caught exactly that on 2026-08-03. */
  .cmf-overlay:not(.cmf-overlay--dock) > .cmf-modal {
    /* Keep the feature's inline width and height, but never allow its shell
       to exceed the visible viewport. This bounds the flex body so its own
       overflow-y:auto remains usable after rotation. */
    max-width: 100%;
    max-height: 100dvh;
    min-height: 0;
    border-radius: 0;
    margin: 0;
  }

  .cmf-overlay:not(.cmf-overlay--dock) > .cmf-workbench-modal {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
  }

  .cmf-header {
    border-radius: 0;
    padding: 0.875rem 1rem;
  }

  .cmf-workbench-modal > .cmf-header {
    min-width: 0;
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  .cmf-workbench-modal .cmf-header-content,
  .cmf-workbench-modal .cmf-header-info {
    min-width: 0;
    flex: 1 1 auto;
  }

  .cmf-workbench-modal .cmf-title {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .cmf-workbench-modal .cmf-subtitle {
    display: none;
  }

  .cmf-workbench-modal .cmf-header-actions {
    flex: 0 0 auto;
    justify-content: flex-end;
    min-width: 0;
    margin-left: auto;
    padding: 0;
  }

  .cmf-workbench-modal > .cmf-footer {
    overflow: hidden auto;
  }

  .cmf-header-icon {
    width: var(--cmf-header-icon-size, 36px);
    height: var(--cmf-header-icon-size, 36px);
    font-size: 16px;
  }

  .cmf-title {
    font-size: 16px;
  }

  .cmf-body {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
  }

  .cmf-footer {
    border-radius: 0;
    padding: 0.875rem 1rem;
  }
}

@media (width <= 480px) {
  .cmf-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .cmf-search {
    min-width: 100%;
  }

  .cmf-header-content {
    gap: 0.5rem;
  }

  .cmf-subtitle {
    display: none;
  }

  .cmf-footer {
    flex-direction: column;
    gap: 0.5rem;
  }

  .cmf-footer button {
    width: 100%;
  }

  /* Restored 2026-08-13, second casualty of the same extraction. The close
     button is the most important control on a modal and it lost its touch
     target twice over: the dedicated `.cmf-modal .cmf-close { 44px }` rule was
     deleted outright, AND `.cmf-close` was removed from a shared selector list
     that granted `min-width/min-height: 44px`. What was left is the 32px base
     size; the only reason it is not 32x32 today is that the global
     `button { min-height: 44px }` in styles.css happens to stretch the height,
     so it measured 32 WIDE x 44 tall at 390px -- a lopsided target that no rule
     in the repo intends. */
  .cmf-modal .cmf-close {
    width: var(--cmf-control-h-secondary);
    height: var(--cmf-control-h-secondary);
    min-width: var(--cmf-control-h-secondary);
    min-height: var(--cmf-control-h-secondary);
  }

  /* Restored 2026-08-13. The extraction that created this file dropped the
     `min-height` and `flex` pins that used to live in modal-responsive.css,
     keeping only the `width: 100%` above -- which silently un-did the 2026-08-07
     fix for a PRIMARY FOOTER BUTTON THAT RENDERED 342x172px, a slab filling a
     fifth of the phone screen. In a column flex container `flex-basis` resolves
     against the container's HEIGHT, so a button carrying `flex-basis: 100%` grows
     to fill the footer instead of hugging its label; grow:0 + basis:auto makes it
     hug regardless of whichever upstream rule supplies that basis.

     Today the hazard happens to be dormant -- the offending basis is now scoped to
     `.cmf-workbench-modal`, and buttons measure 44px (verified at 390x844) -- but
     the pin is defence against it coming back, which is exactly what happened here.
     The workbench rules further down are equally specific and come later, so they
     still win for workbench modals; this governs content and tabbed modals. */
  .cmf-modal .cmf-footer button,
  .cmf-modal .cmf-footer .cmf-btn {
    width: 100%;
    min-height: var(--cmf-control-h-secondary);
    flex: 0 0 auto;
  }

  /* The rule above forces every footer button to 100% -- but 100% of its GROUP,
     not of the footer. `.cmf-footer-left` / `.cmf-footer-right` are flex rows
     that default to `nowrap`, and only the outer `.cmf-footer` was switched to
     column, so a group holding two buttons laid them side by side at full width
     each and pushed the second one off-screen: Parsing Analytics' "Reset Local"
     measured x=386 -> right edge 744 in a 390px viewport on 2026-08-13, i.e.
     completely unreachable (it declares two `position:'left'` buttons).

     `.cmf-footer-right` only ever LOOKED right by accident -- a structural wizard
     selector in styles.css (`[role="dialog"] > div > div:last-child`) matches it
     as :last-child and forces column. `.cmf-footer-left` is never last, so it got
     nothing. Both groups are handled explicitly here rather than left to that
     coincidence. The workbench equivalent is just below; this covers the content
     and tabbed modals it never applied to. */
  .cmf-modal .cmf-footer > .cmf-footer-left,
  .cmf-modal .cmf-footer > .cmf-footer-right {
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
  }

  .cmf-workbench-modal > .cmf-footer {
    align-items: stretch;
    max-height: min(40dvh, 240px);
  }

  .cmf-workbench-modal > .cmf-footer .cmf-footer-left,
  .cmf-workbench-modal > .cmf-footer .cmf-footer-right {
    flex: 0 0 auto;
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
  }

  .cmf-workbench-modal > .cmf-footer .cmf-btn {
    flex: 1 1 120px;
    width: auto;
    min-width: 0;
  }

  .cmf-workbench-modal > .cmf-footer .cmf-btn-primary {
    flex-basis: 100%;
  }
}

@supports (padding: env(safe-area-inset-left)) {
  @media (width <= 900px), (orientation: landscape) and (height <= 500px) and (width <= 1000px) {
    .cmf-workbench-modal > .cmf-header {
      padding-top: max(10px, env(safe-area-inset-top, 0px));
      padding-right: max(18px, env(safe-area-inset-right, 0px));
      padding-left: max(18px, env(safe-area-inset-left, 0px));
    }

    .cmf-workbench-body {
      padding-right: env(safe-area-inset-right, 0);
      padding-left: env(safe-area-inset-left, 0);
    }

    .cmf-workbench-modal > .cmf-footer {
      padding-right: max(16px, env(safe-area-inset-right, 0px));
      padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
      padding-left: max(16px, env(safe-area-inset-left, 0px));
    }
  }
}

/* app.html sets viewport-fit=cover, so a full-bleed sheet extends under
   the Dynamic Island and the home indicator. Workbench modals compensate
   above; base modals go full-bleed only at <=640px, so scope it there.
   :not(.cmf-workbench-modal) is required — createModal builds every shell
   as 'cmf-modal <modalClass>', so workbench modals carry BOTH classes and
   an unscoped .cmf-modal rule would collide with the block above. */
@supports (padding: env(safe-area-inset-left)) {
  @media (width <= 640px), (width <= 960px) and (height <= 500px) and (orientation: landscape) {
    .cmf-modal:not(.cmf-workbench-modal) > .cmf-header {
      padding-top: max(0.875rem, env(safe-area-inset-top, 0px));
      padding-right: max(1rem, env(safe-area-inset-right, 0px));
      padding-left: max(1rem, env(safe-area-inset-left, 0px));
    }

    /* .cmf-body is deliberately NOT padded here: its padding comes from
       the themeable --modal-body-padding, and a hard-coded max() floor
       would override every theme that sets it. Left/right insets are 0
       in portrait anyway — the case this fix targets. */
    .cmf-modal:not(.cmf-workbench-modal) > .cmf-footer {
      padding-right: max(1rem, env(safe-area-inset-right, 0px));
      padding-bottom: max(0.875rem, env(safe-area-inset-bottom, 0px));
      padding-left: max(1rem, env(safe-area-inset-left, 0px));
    }
  }
}

/* ─── Stepper (createSteppedModal) ─────────────────────────────── */
.cmf-stepper {
  display: flex;
  gap: 6px;
  padding: 14px 1.25rem;
  border-bottom: var(--modal-footer-border, 1px solid var(--cmf-visual-rule));
  background: var(--modal-section-bg, var(--cmf-visual-rail));
  flex-shrink: 0;
}

.cmf-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  position: relative;
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

.cmf-step::after {
  content: '';
  position: absolute;
  top: 18px;
  left: calc(50% + 22px);
  right: calc(-50% + 22px);
  height: 2px;
  background: var(--modal-section-divider, var(--cmf-visual-rail));
  z-index: 0;
}

.cmf-step:last-child::after {
  display: none;
}

.cmf-step--active,
.cmf-step--complete {
  opacity: 1;
}

.cmf-step--complete::after {
  background: var(--modal-text-success, var(--cmf-visual-ready));
}

.cmf-step-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-primary, var(--color-white));
  border: 2px solid var(--modal-section-divider, var(--cmf-visual-rule));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--modal-text-secondary, #64748b);
  position: relative;
  z-index: 1;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.cmf-step--active .cmf-step-icon {
  background: var(--modal-link, #c8402a);
  border-color: var(--modal-link, #c8402a);
  color: var(--color-white);
}

.cmf-step--complete .cmf-step-icon {
  background: var(--modal-text-success, var(--cmf-visual-ready));
  border-color: var(--modal-text-success, var(--cmf-visual-ready));
  color: var(--color-white);
}

.cmf-step-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--modal-text-secondary, #64748b);
  text-align: center;
  line-height: 1.3;
}

.cmf-step--active .cmf-step-label {
  color: var(--modal-text-primary, var(--cmf-visual-ink));
}

.cmf-step--complete .cmf-step-label {
  color: var(--modal-text-success, var(--cmf-visual-ready));
}

/* Reachable steps invite navigation; lift the icon slightly on hover. */
.cmf-step--clickable {
  cursor: pointer;
}

.cmf-step--clickable:hover .cmf-step-icon,
.cmf-step--clickable:focus-visible .cmf-step-icon {
  border-color: var(--modal-link, #c8402a);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cmf-visual-signal) 18%, transparent);
}

.cmf-step--clickable:focus-visible {
  outline: none;
}

.cmf-step--clickable:hover .cmf-step-label {
  color: var(--modal-text-primary, var(--cmf-visual-ink));
}

/* The "Now" line under the stepper: what this step decides. */
.cmf-stepper-now {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 1.25rem 9px;
  background: var(--cmf-shell-band-bg);
  border-bottom: 1px solid var(--border-subtle, var(--cmf-visual-rule));
  font-size: 12px;
  color: var(--text-secondary, var(--cmf-visual-ink-secondary));
  flex-shrink: 0;
}

.cmf-stepper-now > span {
  flex: 0 0 auto;
  color: var(--cmf-wb-info, #a63320);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.7;
}

.cmf-stepper-now > p {
  margin: 0;
}

.cmf-stepped-body {
  padding: var(--modal-body-padding, 1.25rem);
}

/* ===== Body kit (cmf-kit-*) ===== */

/* Rail density preset. The 80px default row is sized for rail items that
   carry a status line; a rail of many short, label-only facets overflows
   instead of staying legible at a glance — which is the whole point of a
   rail. Compact re-tunes the two shared tokens rather than restyling
   .cmf-wb-rail-item, so every rail correction stays in one place. */
.cmf-wb-rail-compact .cmf-wb-rail {
  --cmf-wb-rail-row-min-height: 52px;
  --cmf-wb-rail-icon-size: 30px;
  --cmf-wb-rail-row-padding: 7px 10px;
}

.cmf-wb-rail-compact .cmf-wb-rail-icon {
  font-size: 13px;
}

/* Compact rails are long nav trees (the Plan Library ships 348 folders),
   where the standard "white-space: normal" wraps a long tenant name onto
   a second line and makes every row a different height — the thing that
   destroys scannability at that length. Standard density keeps wrapping
   on purpose: its 80px icon rows have the room, and truncating there
   would lose text that currently fits. The full label stays reachable
   via the title tooltip set in buildRail(), same contract as the chip.
   NB: this block is inside a JS template literal — no backticks. */
.cmf-wb-rail-compact .cmf-wb-rail-label {
  font-size: 13px;
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cmf-wb-rail-compact .cmf-wb-rail-heading {
  padding: 5px 5px 4px;
}

.cmf-wb-rail-compact .cmf-wb-rail-action {
  min-height: 28px;
  padding: 5px 9px;
}

/* Icons density: a 72px glyph-only rail (the "Focus" compact shell, 2026-09-03).
   Search, meter text, heading, chips and rail actions leave the visual layout
   the same way .cmf-wb-mobile-tabs already drops them at <=900px; the label
   and the progressbar are clipped, not removed, so every button keeps its
   accessible name (plus the title tooltip buildRail() sets) and the meter
   stays announced. The meter itself becomes a 52px ring at the rail's foot,
   drawn from the --cmf-wb-meter-pct / data-value that renderMeter() exposes.
   Below 901px the mobile rail takes over, so none of this applies there. */
@media (width >= 901px) {
  .cmf-workbench-modal.cmf-wb-rail-icons {
    --cmf-wb-rail-width: 72px;
  }

  .cmf-wb-rail-icons .cmf-wb-rail {
    --cmf-wb-rail-row-min-height: 52px;
    --cmf-wb-rail-icon-size: 36px;
    --cmf-wb-rail-row-padding: 0;

    align-items: center;
    padding: 12px 8px;
  }

  .cmf-wb-rail-icons .cmf-wb-search,
  .cmf-wb-rail-icons .cmf-wb-rail-heading,
  .cmf-wb-rail-icons .cmf-wb-rail-actions,
  .cmf-wb-rail-icons .cmf-wb-chip,
  .cmf-wb-rail-icons .cmf-wb-meter-top,
  .cmf-wb-rail-icons .cmf-wb-meter-caption {
    display: none;
  }

  .cmf-wb-rail-icons .cmf-wb-rail-list {
    width: 100%;
    padding: 0;

    /* overflow-y:auto on the base list implies overflow-x:auto; a 1px
       rounding overrun would paint a horizontal scrollbar under the items. */
    overflow-x: hidden;
  }

  .cmf-wb-rail-icons .cmf-wb-rail-item {
    min-width: 0;
    max-width: 52px;
    display: grid;
    grid-template-columns: var(--cmf-wb-rail-icon-size);
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 4px;
    border-bottom-color: transparent;
  }

  .cmf-wb-rail-icons .cmf-wb-rail-label,
  .cmf-wb-rail-icons .cmf-wb-rail-meta,
  .cmf-wb-rail-icons .cmf-wb-meter-track {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .cmf-wb-rail-icons .cmf-wb-meter {
    position: relative;
    order: 1;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: auto 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--text-primary, var(--cmf-visual-ink-secondary));
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .cmf-wb-rail-icons .cmf-wb-meter::before {
    content: '';
    position: absolute;
    inset: 3.5px;
    border-radius: 50%;
    background: conic-gradient(
      #31966a calc(var(--cmf-wb-meter-pct, 0) * 1%),
      var(--border-subtle, #dbe3ef) 0
    );
    /* stylelint-disable-next-line property-no-vendor-prefix -- Safari compatibility */
    -webkit-mask: radial-gradient(
      farthest-side,
      transparent calc(100% - 5px),
      #000 calc(100% - 4.5px)
    );
    mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px));
  }

  .cmf-wb-rail-icons .cmf-wb-meter::after {
    content: attr(data-value);
    position: relative;
  }
}

/* body.settingRow — icon + label + description + control. */

/* Nine settings used to produce nine borders, nine radii, nine icon tiles and
   nine white fills -- roughly 36 pieces of chrome to say "here are nine
   settings", with no grouping to show for it. They are now ruled rows: one
   hairline between neighbours, no box at all. The row also carried a 12px
   radius nested inside the modal's own corner, so the child was rounder than
   its container.

   🔴 KEEP THIS `display: grid`. CMF's 390px phone stack overrides these rows
   entirely with grid properties (grid-template-areas et al); a blanket
   `display: flex` here silently kills the mobile layout with no error.
   The three grid children are fixed by SettingsModal.js:2998-3016
   (icon, text, control) -- the column count must stay 3 or the control wraps. */

/* The last row in a group must not draw a rule into the group's own gap. */

/* Changed state: a 2px command bar, not a tinted card. The previous version
   announced a pending edit with a blue gradient fill AND a three-hue
   cyan/blue/magenta spine -- three colours from the pre-Ledger palette that
   no token in this system defines. */

/* The tile is the chrome, not the glyph. Stripping the fill, border and
   radius removes nine boxes while keeping the icon itself for wayfinding --
   which matters because SettingsModal defaults it to a generic `fa-cog`, so
   the tile was drawing a framed box around a shape carrying no information. */

/* Sizes snapped onto the documented ramp (13.5px and 12.2px were two of the
   32 sizes in this file sitting within 1px of another) and leading made
   absolute, which is half of the row-pitch fix below: a unitless 1.3/1.45
   re-multiplies against each element's own size, so rows disagreed by 3px
   depending on which children they happened to contain. */

/* The grouping the nine cards never had. A quiet uppercase subhead costs one
   line of chrome and does the job all nine borders were failing to do. */

/* 🔴 ROW-PITCH JITTER. Single-line rows measured 75px and 78px alternately.
   Cause: form controls inherit the modal's leading, and a select at 15.2px
   with a unitless 1.45 resolves to ~22px while a 13px control resolves to
   ~19px -- so a row's height depended on which control it happened to hold.
   Pinning controls to a unitless 1 makes their box height a function of
   padding alone, which is uniform. :where() keeps specificity at 0 so any
   component rule still wins without needing !important. */
.cmf-modal :where(button:not(.cmf-btn), input, select, textarea) {
  line-height: 1;
}

/* The six dark-mode overrides that used to live here are GONE, not re-gated.
   They existed to repaint a navy card fill and card border onto rows that no
   longer have either -- the rows are now ruled, and every value they carry
   (--cmf-visual-rule, --cmf-visual-rail, --cmf-visual-ink*, --cmf-visual-
   command) already inverts at the token layer. Reinstating them would draw a
   #0e1c2e card back on top of the ruled rows in dark mode only, which is
   exactly the split-personality this retheme is removing. Three of them also
   duplicated their auto-dark twins verbatim, so the pair had to be kept in
   sync by hand -- a maintenance trap with no remaining purpose. */

/* The OFF state's fill is deliberately recessive (--cmf-toggle-off is the
   same pale value as --cmf-rule), so the fill alone measured 1.36:1 light /
   1.30:1 dark against the row -- an unlit control with no perceivable
   boundary. This border, not a darker fill, is what carries the boundary:
   --cmf-visual-edge measures 3.53:1 light / 3.55:1 dark, clearing the 3:1
   control-edge floor while leaving the off state visually quiet. */

/* 🔴 left/bottom on an absolutely-positioned child resolve against the
   containing block's PADDING box, not its border box. The border above
   shrinks that padding box from 40x22 to 38x20 and moves its origin to
   (1,1), which would shift this 16px knob 1px right and 1px up and leave it
   visibly off-centre (1px top gap vs 3px bottom). 2px here restores the
   exact 3px border-box gap on all four sides that this control had before
   the border existed; translateX(18px) when checked stays correct. */

/* ON state: the fill is the command colour and carries its own boundary, so
   the edge border would only muddy it. Matching border-color to the fill
   keeps the lit pill reading as one solid command object -- the border
   exists for the OFF state, not this one. */

.cmf-custom-select {
  position: relative;
}

.cmf-custom-select-toggle {
  width: min(100%, var(--cmf-dropdown-max-width, 360px));
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0 10px;

  /* 0.95rem (15.2px) was the single largest contributor to row-pitch jitter:
     it is the only control in a settings row rendering above the 13px body
     size. A fixed 32px height plus the unitless leading above makes every
     row that contains a select the same height as one that does not. */
  height: 32px;
  border: 1px solid var(--cmf-visual-edge, var(--cmf-visual-rule-strong));
  border-radius: 6px;
  background: var(--cmf-visual-surface-raised, var(--color-white));
  color: var(--cmf-visual-ink, var(--cmf-visual-ink));
  font-size: 13px;
  cursor: pointer;
  text-align: left;
}

.cmf-custom-select-toggle:hover {
  border-color: var(--cmf-visual-command, var(--cmf-visual-command));
  background: var(--cmf-visual-command-tint, var(--cmf-visual-command-tint));
}

.cmf-custom-select-toggle:focus-visible,
.cmf-custom-select-toggle.open {
  outline: none;
  border-color: var(--cmf-visual-command, var(--cmf-visual-command));
  border-radius: 6px;
  box-shadow: 0 0 0 3px
    var(--cmf-visual-focus-ring, color-mix(in srgb, var(--cmf-visual-focus) 27%, transparent));
}

.cmf-custom-select-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cmf-custom-select-caret {
  font-size: 0.75rem;
  color: var(--text-secondary, #64748b);
  flex-shrink: 0;
}

.cmf-custom-select-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: auto;
  z-index: 40;
  display: none;
  width: min(100%, var(--cmf-dropdown-max-width, 360px));
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  max-height: min(var(--cmf-dropdown-max-height, 216px), 42vh);
  overflow-y: auto;
  border: 1px solid var(--border-color, var(--cmf-visual-rule));
  border-radius: 8px;
  background: var(--surface-primary, var(--color-white));
  box-shadow: 0 14px 28px color-mix(in srgb, var(--cmf-visual-ink) 18%, transparent);
}

.cmf-custom-select-menu.open {
  display: block;
}

.cmf-custom-select-option {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--border-color, var(--cmf-visual-rule));
  background: transparent;
  color: var(--text-primary, var(--cmf-visual-ink));
  text-align: left;
  padding: 0.55rem 0.65rem;
  cursor: pointer;
  font-size: 13px;
}

.cmf-custom-select-option:last-child {
  border-bottom: none;
}

.cmf-custom-select-option:hover,
.cmf-custom-select-option.active {
  background: var(--surface-hover, var(--cmf-visual-rail));
}

.cmf-custom-select-option.selected {
  background: var(--surface-hover, var(--cmf-visual-signal-tint));
  color: var(--brand-primary, #a63320);
  font-weight: 600;
}

/* Re-assert the recommendation tint over the sticky fill. The tint rule
   and the sticky rule have equal specificity, so source order alone would
   let sticky win and strip column 1 of its highlight. Mixed against the
   surface rather than transparent so the cell stays opaque. */

/* styles.css:5007-5013 carries bare-element rules —
     table { margin-bottom: 1rem }  and  td, th { border: 1px solid var(--border-color) }
   — so a cell rule that states only border-bottom inherits the global's
   left/right/top edges and draws a full grid. Reset first, then state the
   one edge we want. Same trap as .cmf-datagrid; both primitives need it. */

/* Ledger variant: the proposal book's comparison grammar in-app.
   Role tints match report-composition.css (slate current / amber
   renewal / blue proposed); numerals are tabular; the footer carries
   a real total rule; deltas read by tone, not punctuation alone.
   Fallbacks pin the literal :root value from design-tokens.css — same
   hazard/fix as report-composition.css's --rc-role-* aliases (guarded
   by LedgerGrammarSurfaces.test.js): this file can render standalone
   (customizer preview, PDF/HTML export) without design-tokens.css in
   scope, where an unresolvable var() with no fallback computes to
   transparent/initial instead of the intended color. */

/* Slate raises the ledger head to the 11px floor; paper keeps its 10px until
   app.html flips. */

/* Workspace table / decision grid ---------------------------------------
   The shared benefits-entry grammar used by QCC-style review surfaces and
   Workbench editors. Consumers supply values and controls; CMF owns density,
   semantic plan roles, state treatment and responsive geometry. */

/* The column rule, split out and scoped. `.cmf-kit-workspace-table-grid
   :is(th, td)` above is (0,1,1) and resets `border: 0`, so the bare
   (0,1,0) class lost and this declaration used to carry !important. Adding
   the grid class makes it (0,2,0) -- it now wins on specificity alone.
   Split rather than scoping the whole rule so the typography above keeps
   its original (0,1,0) weight and nothing that overrides it changes. */

/* Summary row: the collapsed "N fields identical" line at the end of a section. */

@container cmf-workspace-table (max-width: 640px) {
  /* With an odd number of plan columns, the final value gets a full-width
     row instead of leaving a blank half-card. The row label is child one, so
     an even-numbered last child means an odd number of data cells. */
}

/* Shared touch floor. The slate selectors are needed because the slate root
   block and the modal-scoped field tokens both outrank a bare :root; the extra
   :root class makes them win regardless of stylesheet order. The field
   line-height token is slate-only: bare :root would leak it into paper and
   cool, whose inputs size from padding and read the `1` fallback. */
@media (pointer: coarse) {
  :root[data-product-theme='planlined-slate'] .cmf-modal {
    --cmf-control-h-field: 44px;
    --cmf-field-line-height: 42px;
  }
}

@media (pointer: coarse) {
}

/* ── kit controls (Precision Slate round) ─────────────────────────────── */

/* ── kit overlays (Precision Slate round) ─────────────────────────────── */

/* ChoiceSwitch: a two-state decision control (Original | AI). */

/* EvidenceLine: confidence badge · page · snippet under a decision row. */

/* Empty state: an invitation, not absence — ring motif on the tinted
   band, eyebrow naming the surface, icon on a tile. */

.cmf-popover {
  position: fixed;
  background: var(--surface-primary, var(--color-white));
  border: 1px solid var(--border-color, var(--cmf-visual-rule-strong));
  border-radius: 8px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 16%);
  padding: 6px;
  min-width: 160px;
}

.cmf-split-resizer {
  cursor: col-resize;
  background: var(--border-color, var(--cmf-visual-rule));
  transition: background 0.12s ease;
  touch-action: none;
  outline: none;
}

.cmf-split-resizer:hover,
.cmf-split-resizer.is-dragging,
.cmf-split-resizer:focus-visible {
  background: var(--brand-primary, var(--cmf-visual-command));
}

/* ==========================================================================
   CMF Boardroom Editorial visual system

   An executive decision workspace: midnight framing, warm pearl working
   surfaces, editorial financial hierarchy, and jewel-tone semantic signals.
   This layer deliberately preserves every existing CMF class, builder
   contract, responsive layout, and overflow guard.
   ========================================================================== */

/* The scrim is the one effect this system pays real GPU for, and the two
   filters beyond blur are what earn it: blur alone reads as a smudge,
   saturate() is what makes it read as glass, and brightness() is what buys a
   LIGHT panel its separation from the app behind it. The previous version
   leaned on two decorative radial tints and measured 1.08:1 against the app
   — no separation at all, which is why a single 1px hairline was carrying
   100% of the boundary. Flat scrim + real filters instead of coloured haze. */
.cmf-overlay {
  background: color-mix(in srgb, var(--cmf-visual-header) 42%, transparent);
  /* stylelint-disable-next-line property-no-vendor-prefix -- Safari compatibility */
  -webkit-backdrop-filter: blur(10px) saturate(118%) brightness(0.86);
  backdrop-filter: blur(10px) saturate(118%) brightness(0.86);
}

/* Dark needs a heavier scrim AND more brightness suppression: the panel is
   no longer much lighter than its surroundings, so the same 0.86 would let
   the app read through as competing content. */
html[data-theme='dark'] .cmf-overlay,
.dark-mode .cmf-overlay,
.vui-dark .cmf-overlay {
  background: rgb(4 8 14 / 54%);
  /* stylelint-disable-next-line property-no-vendor-prefix -- Safari compatibility */
  -webkit-backdrop-filter: blur(12px) saturate(118%) brightness(0.72);
  backdrop-filter: blur(12px) saturate(118%) brightness(0.72);
}

/* Low-cost scrim tiers (2026-08-17 input-latency audit).

   backdrop-filter is a full-viewport GPU pass that re-runs on every frame in
   which the overlay's content changes — which, while a text field inside a
   modal has focus, means once per keystroke. On capable hardware it is free:
   measured 0ms delta with the filters forced off, holding even with 89,766
   DOM nodes behind the overlay. On integrated GPUs and scaled 4K displays it
   is not free, and the cost is paid once per rendered overlay — the home
   shell stays mounted underneath a dialog, so two stacked full-screen passes
   is the normal case, not the worst one.

   The default tier above is deliberate and stays as-is. These two fire only
   when the environment has already declared it cannot afford the effect, so
   the scrim degrades on exactly the machines where it hurts. Both keep the
   flat scrim doing the separation work: the background is made MORE opaque
   to replace the contrast brightness() was buying, so the panel boundary
   survives without any filter chain. */
@media (prefers-reduced-transparency: reduce) {
  .cmf-overlay {
    background: color-mix(in srgb, var(--cmf-visual-header) 82%, transparent);
    /* stylelint-disable-next-line property-no-vendor-prefix -- Safari compatibility */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  html[data-theme='dark'] .cmf-overlay,
  .dark-mode .cmf-overlay,
  .vui-dark .cmf-overlay {
    background: rgb(4 8 14 / 88%);
    /* stylelint-disable-next-line property-no-vendor-prefix -- Safari compatibility */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Displays that cannot repaint fast enough to composite a blur every frame. */
@media (update: slow) {
  .cmf-overlay {
    background: color-mix(in srgb, var(--cmf-visual-header) 82%, transparent);
    /* stylelint-disable-next-line property-no-vendor-prefix -- Safari compatibility */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  html[data-theme='dark'] .cmf-overlay,
  .dark-mode .cmf-overlay,
  .vui-dark .cmf-overlay {
    background: rgb(4 8 14 / 88%);
    /* stylelint-disable-next-line property-no-vendor-prefix -- Safari compatibility */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.cmf-modal {
  --surface-primary: var(--cmf-visual-surface, #fff);
  --surface-secondary: var(--cmf-visual-rail, #f3f5f8);
  --surface-tertiary: var(--cmf-visual-command-tint, #f3f5f8);
  --border-subtle: var(--cmf-visual-rule, #dce4ee);
  --border-default: var(--cmf-visual-rule-strong, #c4d0de);
  --border-color: var(--cmf-visual-rule, #dce4ee);
  --text-primary: var(--cmf-visual-ink, #2b5fc0);
  --text-secondary: var(--cmf-visual-ink-secondary, #334155);
  --text-tertiary: var(--cmf-visual-ink-tertiary, #52657a);
  --brand-primary: var(--cmf-visual-command, #2b5fc0);
  --brand-primary-hover: var(--cmf-visual-command-hover, #234f9f);
  --brand-primary-ring: var(--cmf-visual-focus-ring, color-mix(in srgb, #c4d0de 24%, transparent));
  --modal-body-bg: var(--cmf-visual-surface, #fff);
  --modal-body-color: var(--cmf-visual-ink, #172d43);
  --modal-footer-bg: var(--cmf-visual-surface, #fff);
  --modal-footer-border: 1px solid var(--cmf-visual-rule-strong, #c4d0de);
  --modal-section-bg: var(--cmf-visual-rail, #f3f5f8);
  --modal-section-divider: var(--cmf-visual-rule, #dce4ee);
  --modal-text-primary: var(--cmf-visual-ink, #2b5fc0);
  --modal-text-secondary: var(--cmf-visual-ink-secondary, #334155);
  --modal-text-success: var(--cmf-visual-ready, #1f6b4d);
  --modal-link: var(--cmf-visual-command, #2b5fc0);
  --modal-btn-secondary-bg: var(--cmf-visual-surface-raised, var(--color-white));
  --modal-btn-secondary-color: var(--cmf-visual-ink, #334155);
  --modal-btn-secondary-border: 1px solid var(--cmf-visual-rule-strong, #c4d0de);
  --modal-btn-secondary-bg-hover: var(--cmf-visual-command-tint, #e9f0fb);
  --modal-btn-secondary-border-hover: 1px solid var(--cmf-visual-command, #c4d0de);
  --cmf-shell-soft-brand: var(--cmf-visual-command-tint, #e9f0fb);
  --cmf-shell-current-bg: var(--cmf-visual-command-tint, #edf2f8);
  --cmf-shell-icon-bg: var(--cmf-visual-surface-raised, var(--color-white));
  --cmf-shell-icon-current-bg: var(--cmf-visual-command-tint-strong, #edf2f8);
  --cmf-shell-icon-warning-bg: #eef2f7;
  --cmf-shell-staged-bg: #edf2f8;
  --cmf-shell-band-bg: var(--cmf-visual-rail, #f3f5f8);
  --cmf-shell-empty-bg: var(--cmf-visual-rail, #f3f5f8);
  --cmf-shell-meter-track: var(--cmf-visual-rule, #edf2f8);
  --cmf-state-info-bg: #edf2f8;
  --cmf-state-info-border: #bccbdd;
  --cmf-state-info-ink: #2f4a68;
  --cmf-state-success-bg: #e6f3ec;
  --cmf-state-success-border: #b5d6c5;
  --cmf-state-success-ink: #1f6b4d;
  --cmf-state-warning-bg: #eef2f7;
  --cmf-state-warning-border: #c4d0de;
  --cmf-state-warning-ink: #8a5a00;
  --cmf-state-danger-bg: #f7e9eb;
  --cmf-state-danger-border: #e3bcc1;
  --cmf-state-danger-ink: #a61e2b;
  --cmf-matrix-head-bg: #172d43;
  --cmf-matrix-head-text: #fff;
  --cmf-matrix-sticky-bg: var(--cmf-visual-surface-raised, #fff);
  --cmf-wb-header-min-height: 76px;
  --cmf-wb-header-padding: 12px 20px;
  --cmf-wb-header-gap: 12px;

  /* Workbench header tokens, repointed off the navy slab in the same pass as
     `.cmf-modal > .cmf-header`. These are DEFINED here, so the themed
     fallbacks written at the consuming rules would never have fired -- the
     values had to change at the definition or the workbench archetype would
     have kept a dark header while the content archetype went light. */
  --cmf-wb-header-bg: linear-gradient(
    112deg,
    var(--cmf-visual-header, #071522),
    var(--cmf-visual-header-high) 58%,
    #0c2134
  );
  --cmf-wb-header-border: var(--cmf-header-edge, rgb(255 255 255 / 22%));
  --cmf-wb-header-icon-size: 42px;
  --cmf-wb-header-icon-radius: 8px;
  --cmf-wb-header-icon-bg: var(--cmf-header-tile, rgb(255 255 255 / 6%));
  --cmf-wb-title-size: 20px;
  --cmf-wb-subtitle-size: 12px;
  --cmf-wb-subtitle-color: var(--cmf-header-ink-secondary, rgb(255 255 255 / 70%));
  --cmf-wb-rail-width: 268px;
  --cmf-wb-rail-bg: var(--cmf-visual-rail, #f3f5f8);
  --cmf-wb-rail-border: var(--cmf-visual-rule, #dce4ee);
  --cmf-wb-search-padding: 10px 10px 8px;
  --cmf-wb-control-height: 36px;
  --cmf-wb-control-radius: 6px;
  --cmf-wb-meter-margin: 0 10px 10px;
  --cmf-wb-meter-padding: 10px 12px;
  --cmf-wb-meter-radius: 6px;
  --cmf-wb-meter-bg: var(--cmf-visual-surface, #fff);
  --cmf-wb-meter-border: var(--cmf-visual-rule, #dce4ee);
  --cmf-wb-rail-row-min-height: 52px;
  --cmf-wb-rail-row-padding: 7px 9px;
  --cmf-wb-rail-row-gap: 8px;
  --cmf-wb-rail-icon-size: 32px;
  --cmf-wb-metrics-gap: 20px;
  --cmf-wb-pane-header-padding: 13px 20px 12px;
  --cmf-wb-pane-padding: 16px 20px 24px;
  --cmf-wb-footer-min-height: 60px;
  --cmf-wb-footer-padding: 10px 20px;
  --cmf-wb-footer-bg: var(--cmf-visual-surface, #fff);
  --cmf-wb-footer-border: var(--cmf-visual-rule-strong, #c4d0de);
  --cmf-wb-button-min-height: 36px;
  --cmf-wb-button-min-width: 96px;
  --cmf-wb-primary-min-width: 132px;
  --cmf-wb-button-radius: 6px;
  --cmf-wb-success: var(--cmf-visual-ready, #1f6b4d);
  --cmf-wb-warning: var(--cmf-visual-review, #8a5a00);
  --cmf-wb-danger: var(--cmf-visual-danger, #a61e2b);
  --cmf-wb-info: var(--cmf-visual-info, #2f4a68);
  --cmf-wb-staged: var(--cmf-visual-staged, #213e5b);

  box-sizing: border-box;
  color: var(--cmf-visual-ink, var(--cmf-visual-ink));
  background: var(--cmf-visual-surface, var(--cmf-visual-rail));

  /* All elevation lives at the BOUNDARY, none inside. The 1px ring is the
     load-bearing layer -- --cmf-visual-edge measures 3.53:1 light / 3.55:1
     dark, so the panel has a real edge even where the shadow washes out
     against a dark app. The depth layers stay on --cmf-visual-shadow rather
     than being hardcoded, because that token already carries a deeper dark
     variant (design-tokens.css:989/1062/1096); inlining a fixed rgba stack
     here would have silently flattened dark-mode elevation. */
  border: 0;
  border-radius: 12px;

  /* 🔴 NO `overflow: hidden` here, deliberately. The corner still needs the
     header band and footer tone clipped to it, but doing that with a
     clipping context on the panel would also clip anything that paints
     outside the panel box -- and `.cmf-custom-select-menu` is
     `position: absolute; top: calc(100% + 6px)` (line ~3256), so a select
     sitting in the footer or header would have its dropdown cut off. The
     corners are handled by giving the header and footer their own matching
     radii instead, which costs nothing and creates no clipping context. */
  box-shadow:
    0 0 0 1px var(--cmf-visual-edge, #8a8578),
    var(--cmf-visual-shadow, 0 28px 72px rgb(4 14 31 / 27%), 0 8px 24px rgb(4 14 31 / 13%));
  font-family: var(--cmf-font-sans, 'IBM Plex Sans', system-ui, -apple-system, sans-serif);

  /* One entrance, one curve. 260ms is the system's entrance duration (state
     changes use 120ms); the panel rises 10px and settles from 0.985 rather
     than scaling from a distant 0.9, which reads as a dialog arriving rather
     than a popup inflating. Disabled entirely under prefers-reduced-motion. */
  animation: cmfInstrumentIn 260ms cubic-bezier(0.22, 0.72, 0.24, 1);
  font-size: var(--text-sm, 13px);

  /* Absolute, not 1.45 -- a unitless ratio re-multiplies against every
     descendant's own font-size, which is what makes row pitch jitter 75/78px
     (see Task 8). 20px here is a fixed rhythm every row inherits unchanged. */
  line-height: 20px;
}

/* The dialog itself receives initial focus so screen-reader and keyboard users
   start in the correct context. Its shell already has a strong boundary; keep
   the visible focus treatment on interactive descendants instead of drawing a
   browser-default blue frame around the entire modal. */
.cmf-modal[tabindex='-1']:focus,
.cmf-modal[tabindex='-1']:focus-visible {
  outline: none;
}

[data-theme='dark'] .cmf-modal,
.dark-mode .cmf-modal,
.vui-dark .cmf-modal {
  --cmf-shell-icon-warning-bg: #3b2d18;
  --cmf-shell-staged-bg: #243353;
  --cmf-state-info-bg: #172a3c;
  --cmf-state-info-border: #38556c;
  --cmf-state-info-ink: #8fb7f3;
  --cmf-state-success-bg: #15362b;
  --cmf-state-success-border: #376852;
  --cmf-state-success-ink: #74d7a8;
  --cmf-state-warning-bg: #252a25;
  --cmf-state-warning-border: #665b3e;
  --cmf-state-warning-ink: #f1bf73;
  --cmf-state-danger-bg: #3b2425;
  --cmf-state-danger-border: #765051;
  --cmf-state-danger-ink: #ffaaa3;
  --cmf-matrix-head-bg: #0b2033;
  --cmf-matrix-head-text: #f7f5ef;
  --cmf-matrix-border: #3c5961;
  --cmf-matrix-divider: #294148;
  --cmf-matrix-sticky-bg: var(--cmf-visual-surface-raised, #111e2d);
}

/* OS preference. Gated on the auto-dark roots — see the note at the top of this
   file. */
@media (prefers-color-scheme: dark) {
  :root.auto-dark .cmf-modal,
  :root.vui-auto-dark .cmf-modal {
    --cmf-shell-icon-warning-bg: #3b2d18;
    --cmf-shell-staged-bg: #243353;
    --cmf-state-info-bg: #172a3c;
    --cmf-state-info-border: #38556c;
    --cmf-state-info-ink: #8fb7f3;
    --cmf-state-success-bg: #15362b;
    --cmf-state-success-border: #376852;
    --cmf-state-success-ink: #74d7a8;
    --cmf-state-warning-bg: #252a25;
    --cmf-state-warning-border: #665b3e;
    --cmf-state-warning-ink: #f1bf73;
    --cmf-state-danger-bg: #3b2425;
    --cmf-state-danger-border: #765051;
    --cmf-state-danger-ink: #ffaaa3;
    --cmf-matrix-head-bg: #0b2033;
    --cmf-matrix-head-text: #f7f5ef;
    --cmf-matrix-border: #3c5961;
    --cmf-matrix-divider: #294148;
    --cmf-matrix-sticky-bg: var(--cmf-visual-surface-raised, #111e2d);
  }
}

.cmf-modal > .cmf-header {
  box-sizing: border-box;
  min-height: var(--cmf-wb-header-min-height, 76px);
  padding: var(--cmf-wb-header-padding, 15px 20px);
  isolation: isolate;

  /* 🔴 THE HEADER IS A SLAB, and it is theme-INVARIANT: dark in both the
     light and dark app themes. That single fact drives every header rule
     below. Its children must read the --cmf-header-* set, never
     --cmf-visual-ink / --cmf-visual-command, because those INVERT: in light
     mode --cmf-visual-command resolves to #1b44c4, which measures 2.34:1 on
     this slab and fails the 3:1 floor.

     This header was briefly an Instrument rail band (2026-08-17); restored to
     the BART navy slab at the user's direction while the rest of the
     Instrument surface -- paper, ruled rows, serif title, panel edge ring,
     command toggles, motion -- stays. Changing this background without
     flipping the ~12 child rules in the same commit makes the header
     unreadable in one direction or the other; they move together or not at
     all. */
  background: linear-gradient(
    112deg,
    var(--cmf-visual-header, #071522),
    var(--cmf-visual-header-high) 58%,
    #0c2134
  );

  /* The slab is its own anchor -- an 18:1 step against the paper below -- so
     the boundary does NOT need --cmf-visual-edge here. That token exists for
     the case where a quiet band has to carry the separation on its own. */
  border-bottom: 1px solid var(--cmf-header-edge, rgb(255 255 255 / 22%));
  border-radius: 12px 12px 0 0;
}

.cmf-modal > .cmf-header::before,
.cmf-workbench-modal > .cmf-header::before {
  /* Decorative header art retired. Both layers were tuned for the navy slab
     (a blue radial bloom and a white sheen); over a light rail band they
     render as a grey smudge with no informational content. Instrument puts
     its separation in the rule and the scrim, not in surface decoration. */
  content: none;
}

.cmf-modal > .cmf-header::after,
.cmf-workbench-modal > .cmf-header::after {
  position: absolute;
  z-index: 2;
  right: auto;
  bottom: 0;
  left: 20px;
  width: 92px;
  height: 2px;

  /* 🔴 LOAD-BEARING, not decoration. `.cmf-header:is(-success, -warning,
     -danger)` collapses all three variants to the SAME band colour, so after
     that collapse this bar is the only thing distinguishing a danger header
     from a success one. It stays, repointed from two-hue gradients to the
     single semantic token per variant, at full opacity -- 0.68 over a light
     rail washed it to roughly a hairline. */
  background: var(--cmf-header-accent, #fbede9);
  border-radius: 999px 999px 0 0;
  content: '';
  opacity: 1;
  pointer-events: none;
}

.cmf-modal > .cmf-header-warning::after,
.cmf-workbench-modal > .cmf-header-warning::after {
  background: var(--cmf-header-review, var(--cmf-visual-review));
}

.cmf-modal > .cmf-header-danger::after,
.cmf-workbench-modal > .cmf-header-danger::after {
  background: var(--cmf-header-danger, var(--cmf-visual-review-tint));
}

.cmf-modal > .cmf-header-success::after,
.cmf-workbench-modal > .cmf-header-success::after {
  background: var(--cmf-header-ready, var(--cmf-visual-ready));
}

.cmf-header > :is(.cmf-header-content, .cmf-header-actions) {
  position: relative;
  z-index: 3;
}

/* Variant headers share the base slab. They always did -- this rule collapses
   success/warning/danger to one gradient -- so the semantic difference is
   carried entirely by the ::after accent bar above, which is why that bar
   keeps per-variant tokens rather than being deleted. */
.cmf-header:is(.cmf-header-success, .cmf-header-warning, .cmf-header-danger) {
  background: linear-gradient(
    112deg,
    var(--cmf-visual-header),
    var(--cmf-visual-header) 58%,
    var(--cmf-visual-header)
  );
}

.cmf-header.cmf-header-success {
  box-shadow: inset 4px 0 0 var(--cmf-visual-ready, var(--cmf-visual-ready));
}

.cmf-header.cmf-header-warning {
  box-shadow: inset 4px 0 0 var(--cmf-visual-review, var(--cmf-visual-review));
}

.cmf-header.cmf-header-danger {
  box-shadow: inset 4px 0 0 var(--cmf-visual-danger, var(--cmf-visual-danger));
}

.cmf-header-content {
  gap: 12px;
}

/* 🔴 Every rule below sits ON THE SLAB, so all of it is light-on-dark and
   reads the theme-INVARIANT --cmf-header-* set. Repointing any of these at
   --cmf-visual-ink* would look right in dark mode and go invisible in light,
   because those tokens invert while the slab does not. */
.cmf-header-icon {
  /* --cmf-header-icon-size, not --modal-* -- see the note on .cmf-body. */
  width: var(--cmf-header-icon-size, 42px);
  height: var(--cmf-header-icon-size, 42px);
  border: 1px solid var(--cmf-header-edge, rgb(255 255 255 / 16%));
  border-radius: 8px;
  background: var(--cmf-header-tile, rgb(255 255 255 / 8%));
  color: var(--cmf-header-accent, #fbede9);
  box-shadow:
    inset 0 1px rgb(255 255 255 / 9%),
    0 6px 18px rgb(0 0 0 / 14%);
  font-size: 16px;
}

.cmf-header-eyebrow {
  margin-bottom: 2px;
  color: var(--cmf-header-accent, #fbede9);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

/* Utility titles stay in the product UI face. Editorial type is still
   available for report figures and money, but a modal title is navigation. */
.cmf-title {
  color: var(--cmf-header-ink, #fff);
  font-family: var(--cmf-font-sans, Inter, system-ui, sans-serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 22px;
}

.cmf-subtitle {
  color: var(--cmf-header-ink-secondary, rgb(255 255 255 / 70%));
  font-size: 12px;
  line-height: 16px;
}

.cmf-close {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;

  /* Treatment C: no resting container. Hover and focus draw the ground. */
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--cmf-header-ink-secondary, rgb(255 255 255 / 70%));
  box-shadow: none;
  transition:
    background-color 120ms ease-out,
    border-color 120ms ease-out,
    color 120ms ease-out;
}

.cmf-close:hover {
  border-color: var(--cmf-header-accent, #fbede9);
  background: var(--cmf-header-tile-hover, rgb(255 255 255 / 12%));
  color: var(--cmf-header-ink, #fff);
}

.cmf-modal :where(button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--cmf-visual-focus, var(--cmf-visual-command, var(--cmf-visual-focus)));
  outline-offset: 2px;
  box-shadow: 0 0 0 4px
    var(--cmf-visual-focus-ring, color-mix(in srgb, var(--cmf-visual-focus) 24%, transparent));
}

/* 🔴 The header keeps its OWN ring, and must. The generic modal ring is
   --cmf-visual-command, which in light mode is #1b44c4 -- 2.34:1 on this
   slab, under the 3:1 floor. --cmf-header-accent clears 8.62:1 and does not
   invert, matching the slab it sits on. */
.cmf-header :where(button, [tabindex]):focus-visible {
  outline-color: var(--cmf-header-accent, #fbede9);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cmf-visual-focus) 30%, transparent);
}

.cmf-hero-band {
  padding: 0 20px;
}

.cmf-hero-stat {
  margin-right: 18px;
  padding: 9px 18px 10px 0;
  border-right-color: var(--cmf-visual-rule-strong, var(--cmf-visual-rule-strong));
}

.cmf-hero-stat-value,
.cmf-wb-meter-value {
  font-weight: 600;
}

.cmf-body {
  --cmf-content-gap: 12px;
  --cmf-content-section-bg: var(--cmf-visual-surface-raised, var(--color-white));
  --cmf-content-section-border: var(--cmf-visual-rule, #dce4ee);
  --cmf-content-section-radius: 8px;
  --cmf-content-section-padding: 14px;

  /* Asymmetric on purpose. With equal 16px top and bottom the last row sat
     flush against a hard scroll cut, and the footer's 1px hairline is
     chromatically identical to the row dividers above it -- so the clip line
     read as one more divider and content looked finished when it was not.
     28px at the bottom makes a clipped row obviously mid-content. */

  /* The consumer knob is --cmf-body-padding, NOT --modal-body-padding.
     modal-base.css sets the --modal-* names on `:root` for the legacy modal
     system, so reading those here would make every CMF modal inherit the
     legacy 1.25rem and silently discard the asymmetric bottom pad argued for
     above. --cmf-body-padding has no :root definition anywhere, so this
     literal stays the default until a feature deliberately opts out. */
  padding: var(--cmf-body-padding, 16px 20px 28px);
  color: var(--cmf-visual-ink);
  background: var(--cmf-visual-surface, var(--cmf-visual-rail));
  font-family: var(--cmf-font-sans, var(--font-ui, Inter, system-ui, sans-serif));
  font-size: var(--text-sm, 13px);
  line-height: 20px;

  /* Set on other scrollers in this file but NOT on .cmf-body, so the body
     jumped 15px sideways the moment content grew past one screen. */
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--cmf-visual-rule-strong, var(--cmf-visual-ink-secondary)) transparent;
}

.cmf-footer {
  min-height: 60px;

  /* --cmf-footer-padding, not --modal-* -- see the note on .cmf-body. */
  padding: var(--cmf-footer-padding, 10px 20px);
  gap: 8px;
  background: color-mix(
    in srgb,
    var(--cmf-visual-surface-raised, var(--cmf-visual-rail)) 96%,
    transparent
  );
  border-top: 1px solid var(--cmf-visual-rule, var(--cmf-visual-command-tint));

  /* Matches the shell's 12px so the footer tone clips to the panel's bottom
     corners. This is what replaces `overflow: hidden` on .cmf-modal -- see
     the note there: a clipping context on the panel would cut off any
     absolutely-positioned dropdown that opens past the panel edge. */
  border-radius: 0 0 12px 12px;
  box-shadow: inset 0 1px rgb(255 255 255 / 52%);
}

.cmf-footer-left,
.cmf-footer-right {
  gap: 8px;
}

/* Button rank ladder -- four silhouettes, not hue alone. This tier is the
   winning one (source order beats tiers 1 and 3 for every property declared
   here; tier 3 at ~5307/5314 still pins border-radius/min-height for every
   `.cmf-btn` regardless of rank -- silhouette here is built from
   background/border/color/box-shadow/font-weight/padding, the properties
   tier 3 does not touch):
     commit      -- solid command fill.       primary, verify
     neutral     -- outlined, never filled.    secondary, warning
     quiet       -- bare text.                 link (tier 1 only, see above)
     destructive -- bare text, reddens on hover only. danger
   `accent` is deliberately NOT commit: see its own rule below. */

/* Pressed feedback shared by every rank. Primary/verify layer their own
   :active below too, since they also need to cancel the hover lift. */

/* Neutral -- outlined, never a competing filled box. `--cmf-visual-edge` at
   FULL opacity: the previous 68%-diluted --cmf-visual-rule-strong measured
   ~2.27:1 against the raised surface, under the 3:1 floor. Full-opacity edge
   measures 3.68:1 light / 3.31:1 dark. */

/* Ink rank: a commit that is NOT the surface's decision (Save plan, Upload,
   Open editor). Filled ink so it never competes with the one Signal primary.
   Sized like primary (it is a commit); hover mixes the ink fill toward the
   surface so text contrast holds in light and dark. */

/* Commit -- the only filled object in a footer. Exactly one per modal.
   `verify` shares this rank (both are deliberate, weighty confirmations);
   `accent` deliberately does NOT (see its own rule below), so a footer can
   never present two equally-weighted filled commands at once. */
.cmf-workbench-modal > .cmf-footer .cmf-btn-primary {
  min-height: var(--cmf-control-h-primary);
  padding: var(--cmf-control-pad-y) var(--cmf-control-pad-x-primary);
  background: var(--cmf-visual-signal, var(--cmf-visual-command, var(--cmf-visual-command)));
  border: 1px solid var(--cmf-visual-signal, var(--cmf-visual-command, var(--cmf-visual-command)));
  color: var(--cmf-visual-command-ink, var(--color-white));
  font-size: var(--cmf-control-font-primary);
  font-weight: var(--cmf-control-font-weight-primary);
  box-shadow:
    inset 0 1px rgb(255 255 255 / 18%),
    0 7px 16px color-mix(in srgb, var(--cmf-visual-command, #0a48b2) 20%, transparent);
}

.cmf-workbench-modal > .cmf-footer .cmf-btn-primary:hover {
  background: var(
    --cmf-visual-signal-hover,
    var(--cmf-visual-command-hover, var(--cmf-visual-command))
  );
  border-color: var(
    --cmf-visual-signal-hover,
    var(--cmf-visual-command-hover, var(--cmf-visual-command))
  );
  box-shadow:
    inset 0 1px rgb(255 255 255 / 24%),
    0 11px 24px color-mix(in srgb, var(--cmf-visual-command, #0b47b7) 30%, transparent);
  transform: translateY(var(--cmf-btn-lift, -1px));
}

.cmf-workbench-modal > .cmf-footer .cmf-btn-primary:active {
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 24%);
  transform: none;
}

/* Ring INSIDE on filled ranks only: --cmf-visual-focus-ring resolves onto
   --cmf-visual-command (Task 2), the SAME token as this fill, so the
   generic outside ring at `.cmf-modal :where(...):focus-visible` (~line
   4056) vanishes into the button. Negative outline-offset draws it inside
   the fill instead, in the fill's own ink colour, which is guaranteed to
   contrast against the fill (7.86:1 light / 8.53:1 dark -- see
   __tests__/CmfButtonRanks.test.js). Equal specificity to the generic rule,
   later in source, so it wins for exactly these two ranks; every other rank
   keeps the generic outside ring, which is correct for them since their
   fill isn't command-coloured. Not grouped into one selector list on
   purpose -- keeps each rank's rule independently greppable. */

/* Keep links and focus indicators on the accessible pale-blue dark token,
   while giving commit actions a saturated button silhouette. This prevents
   the dark-theme primary from reading like a disabled pastel control. */
:is([data-theme='dark'], .dark-mode, .vui-dark)
  .cmf-workbench-modal
  > .cmf-footer
  .cmf-btn-primary {
  color: var(--color-white);
  background: #07586b;
  border-color: #3bbbd3;
  box-shadow:
    inset 0 1px rgb(255 255 255 / 20%),
    0 8px 20px rgb(3 11 24 / 38%);
}

:is([data-theme='dark'], .dark-mode, .vui-dark)
  .cmf-workbench-modal
  > .cmf-footer
  .cmf-btn-primary:hover {
  color: var(--color-white);

  /* #3d78e2 (the previous hover) measured 4.21:1 for white text -- under
     the 4.5:1 floor. #2a5cbb clears 6.27:1 and keeps the same
     darken-on-hover direction light mode uses (command -> command-hover),
     instead of lightening into a floor violation. */
  background: #06495a;
  border-color: #72dff5;
}

/* When staged Apply is present it is the commit action. Other existing
   primary actions remain available, but step down to an outlined rank so the
   footer never presents two equally weighted commits. */
.cmf-workbench-modal
  > .cmf-footer:has(.cmf-wb-apply.has-changes)
  .cmf-btn-primary:not(.cmf-wb-apply) {
  color: var(--cmf-visual-command, var(--cmf-visual-command));
  background: var(--cmf-visual-surface-raised, var(--color-white));
  border-color: var(--cmf-visual-rule-strong, var(--cmf-visual-rule-strong));
  box-shadow: none;
}

.cmf-workbench-modal
  > .cmf-footer:has(.cmf-wb-apply.has-changes)
  .cmf-btn-primary:not(.cmf-wb-apply):hover {
  color: var(--cmf-visual-command-hover, var(--cmf-visual-command));
  background: var(--cmf-visual-command-tint, var(--cmf-visual-ready-tint));
  border-color: var(--cmf-visual-command, var(--cmf-visual-command));
  box-shadow: none;
}

/* Emphasis -- command-coloured outline, never filled. This is what keeps
   `accent` from reading as a second commit: a footer can carry a filled
   primary AND an outlined accent without two competing filled commands. */

/* Neutral, review-toned edge -- shares secondary's outlined silhouette;
   only the border hue (and the transparent, not raised-white, fill)
   changes. */

/* Destructive is a text rank. Secondary is already a bordered button, so an
   outlined danger read as the same object and the footer lost its
   hierarchy. It stays neutral ink at rest and reddens only on hover, when
   the pointer is already committed -- no fill, so it never competes with
   the commit rank's solid fill either. */

.cmf-modal button:disabled,
.cmf-modal button[aria-disabled='true'] {
  background: var(--cmf-visual-disabled-surface, var(--cmf-visual-rail));
  border-color: var(--cmf-visual-rule, var(--cmf-visual-rule-strong));
  color: var(--cmf-visual-disabled-ink, var(--cmf-visual-ink-secondary));
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
  transform: none;
}

.cmf-modal :where(input:not([type='checkbox'], [type='radio'], [type='range']), select, textarea) {
  min-height: var(--cmf-control-h-field);
  padding: var(--cmf-field-pad-y) var(--cmf-field-pad-x);
  color: var(--cmf-visual-ink, var(--cmf-visual-ink));
  background: var(--cmf-visual-surface-raised, var(--color-white));
  border-color: var(--cmf-visual-rule-strong, var(--cmf-visual-rule-strong));
  border-radius: 6px;
  font-family: inherit;
  font-size: var(--cmf-field-font);
}

.cmf-split-left {
  border-right-color: var(--cmf-visual-rule-strong, var(--cmf-visual-rule-strong));
}

.cmf-panel-header {
  min-height: 36px;
  padding: 8px 12px;
  border-bottom-color: var(--cmf-visual-rule, var(--cmf-visual-rule-strong));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* A pane is a place, not a state: both split panes share the neutral header. */
.cmf-panel-header-left,
.cmf-panel-header-right {
  background: var(--cmf-visual-rail, var(--cmf-visual-rail));
  color: var(--cmf-visual-ink-secondary, var(--cmf-visual-ink-secondary));
}

.cmf-benefit-row {
  border-bottom-color: var(--cmf-visual-rule, var(--cmf-visual-rule-strong));
  transition: background-color 120ms ease-out;
}

.cmf-benefit-row:hover {
  background: var(--cmf-visual-command-tint, var(--cmf-visual-ready-tint));
}

.cmf-benefit-row.highlighted {
  background: var(--cmf-visual-command-tint-strong, var(--cmf-visual-ready-tint));
  border-color: var(--cmf-visual-command, var(--cmf-visual-command));
}

.cmf-benefit-id {
  color: var(--cmf-visual-ink, var(--cmf-visual-ink));
}

.cmf-benefit-value {
  color: var(--cmf-visual-ink-secondary, var(--cmf-visual-ink-secondary));
}

.cmf-split-resizer {
  background: var(--cmf-visual-rule-strong, var(--cmf-visual-ink-tertiary));
}

.cmf-split-resizer:hover,
.cmf-split-resizer.is-dragging,
.cmf-split-resizer:focus-visible {
  background: var(--cmf-visual-command, var(--cmf-visual-command));
}

.cmf-stepper {
  gap: 4px;
  padding: 10px 20px;
}

.cmf-step {
  gap: 5px;
  padding: 3px 6px;
}

.cmf-step::after {
  top: 16px;
  background: var(--cmf-visual-rule-strong, var(--cmf-visual-ink-tertiary));
}

.cmf-step-icon {
  width: 32px;
  height: 32px;
  background: var(--cmf-visual-surface-raised, var(--color-white));
  border-color: var(--cmf-visual-rule-strong, var(--cmf-visual-rule-strong));
  color: var(--cmf-visual-ink-secondary, var(--cmf-visual-ink-secondary));
  font-size: 12px;
  font-weight: 600;
}

.cmf-step--active .cmf-step-icon {
  background: var(--cmf-visual-command, var(--cmf-visual-command));
  border-color: var(--cmf-visual-command, var(--cmf-visual-command));
  color: var(--cmf-visual-command-ink, var(--color-white));
}

.cmf-step--complete .cmf-step-icon,
.cmf-step--complete::after {
  background: var(--cmf-visual-ready, var(--cmf-visual-ready));
  border-color: var(--cmf-visual-ready, var(--cmf-visual-ready));
}

.cmf-step--active .cmf-step-label {
  color: var(--cmf-visual-ink, var(--cmf-visual-ink));
}

.cmf-step--complete .cmf-step-label {
  color: var(--cmf-visual-ready, var(--cmf-visual-ready));
}

.cmf-step--clickable:hover .cmf-step-icon,
.cmf-step--clickable:focus-visible .cmf-step-icon {
  border-color: var(--cmf-visual-command, var(--cmf-visual-command));
  box-shadow: 0 0 0 3px
    var(--cmf-visual-focus-ring, color-mix(in srgb, var(--cmf-visual-focus) 24%, transparent));
  transform: none;
}

.cmf-stepper-now {
  padding: 7px 20px 8px;
  background: var(--cmf-visual-command-tint, var(--cmf-visual-ready-tint));
  border-bottom-color: var(--cmf-visual-rule, var(--cmf-visual-rule-strong));
  color: var(--cmf-visual-ink-secondary, var(--cmf-visual-ink-secondary));
}

.cmf-stepper-now > span {
  color: var(--cmf-visual-command, var(--cmf-visual-command));
}

.cmf-modal:not(.cmf-workbench-modal) .cmf-kit-section-title::before {
  display: inline-block;
  width: 3px;
  height: 16px;
  margin-right: 9px;
  border-radius: 999px;
  background: var(--cmf-visual-command, var(--cmf-visual-command));
  content: '';
  vertical-align: -3px;
}

.cmf-workbench-modal .cmf-kit-section {
  padding: 14px 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--cmf-visual-rule, var(--cmf-visual-rule-strong));
  border-radius: 0;
}

.cmf-workbench-modal .cmf-kit-section:first-child {
  padding-top: 0;
  border-top: 0;
}

.cmf-modal .kit-icon {
  display: inline-block;
  flex: none;
  vertical-align: -0.125em;
}

.cmf-modal .kit-icon--spin {
  animation: kit-icon-spin 1s linear infinite;
}

@keyframes kit-icon-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cmf-modal .kit-icon--spin {
    animation-duration: 3s;
  }
}

.kit-callout__icon {
  flex: 0 0 auto;
  margin-top: 1px;
}

.kit-callout__copy {
  min-width: 0;
}

.kit-callout__title,
.kit-callout__message {
  display: block;
}

.kit-callout__title {
  margin-bottom: var(--space-025, 2px);
}

.cmf-wb-search input {
  border-color: var(--cmf-visual-rule-strong, var(--cmf-visual-rule-strong));
  border-radius: 6px;
  background: var(--cmf-visual-surface-raised, var(--color-white));
  color: var(--cmf-visual-ink, var(--cmf-visual-ink));
}

.cmf-wb-search input:focus {
  border-color: var(--cmf-visual-focus, var(--cmf-visual-command, var(--cmf-visual-command)));
  box-shadow: 0 0 0 3px
    var(--cmf-visual-focus-ring, color-mix(in srgb, var(--cmf-visual-focus) 24%, transparent));
}

.cmf-wb-meter-track {
  height: 6px;
}

.cmf-wb-meter-fill {
  background: var(--cmf-visual-ready, var(--cmf-visual-ready));
}

.cmf-wb-meter-staged {
  background: repeating-linear-gradient(
    135deg,
    var(--cmf-visual-staged, #7c3f72) 0 3px,
    transparent 3px 6px
  );
}

.cmf-wb-meter[data-tone='info'] .cmf-wb-meter-fill {
  background: var(--cmf-visual-info, var(--cmf-visual-header));
}

.cmf-wb-meter[data-tone='warning'] .cmf-wb-meter-fill {
  background: var(--cmf-visual-review, var(--cmf-visual-review));
}

.cmf-wb-meter[data-tone='danger'] .cmf-wb-meter-fill {
  background: var(--cmf-visual-danger, var(--cmf-visual-danger));
}

.cmf-wb-rail-heading {
  padding: 6px 6px 5px;
  color: var(--cmf-visual-ink-tertiary, var(--cmf-visual-ink));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.cmf-wb-rail-heading.is-collapsible:hover,
.cmf-wb-rail-action:hover {
  color: var(--cmf-visual-ink, var(--cmf-visual-ink));
  background: var(--cmf-visual-command-tint, var(--cmf-visual-ready-tint));
}

.cmf-wb-rail-action {
  min-height: 32px;
  border-color: var(--cmf-visual-rule-strong, var(--cmf-visual-rule-strong));
  border-radius: 6px;
  background: var(--cmf-visual-surface-raised, var(--color-white));
  color: var(--cmf-visual-ink, var(--cmf-visual-ink));
}

.cmf-wb-rail-item {
  /* Pinned to the ramp. This button carried an inherited 14.4px; its label
     is already 13px, so the inherited size only reached bare text nodes. */
  font-size: 13px;
  color: var(--cmf-visual-ink, var(--cmf-visual-ink));
  background: transparent;
  border-color: transparent;
  border-bottom-color: var(--cmf-visual-rule, var(--cmf-visual-rule-strong));
  border-radius: 6px;
  box-shadow: none;
  transition:
    background-color 120ms ease-out,
    border-color 120ms ease-out,
    box-shadow 120ms ease-out;
}

.cmf-wb-rail-item:hover {
  background: var(--cmf-visual-command-tint, var(--cmf-visual-ready-tint));
}

.cmf-wb-rail-item[aria-current='true'] {
  background: var(
    --cmf-visual-command-tint,
    color-mix(in srgb, var(--cmf-visual-plan-current) 12%, var(--cmf-visual-surface))
  );
  border-color: var(--cmf-visual-rule-strong, var(--cmf-visual-rule-strong));
  box-shadow: inset 3px 0 0 var(--cmf-visual-command, var(--cmf-visual-plan-current));
}

.cmf-wb-rail-item:focus-visible,
.cmf-wb-rail-action:focus-visible,
.cmf-wb-rail-heading.is-collapsible:focus-visible {
  outline: 2px solid var(--cmf-visual-focus, var(--cmf-visual-command, var(--cmf-visual-focus)));
  outline-offset: 2px;
  box-shadow: 0 0 0 4px
    var(--cmf-visual-focus-ring, color-mix(in srgb, var(--cmf-visual-focus) 24%, transparent));
}

.cmf-wb-rail-icon {
  border: 1px solid var(--cmf-visual-rule, var(--cmf-visual-rule-strong));
  border-radius: 6px;
  background: var(--cmf-visual-surface-raised, var(--color-white));
  color: var(--cmf-visual-ink-secondary, var(--cmf-visual-ink-secondary));
}

.cmf-wb-rail-item[aria-current='true'] .cmf-wb-rail-icon {
  color: var(--cmf-visual-command, var(--cmf-visual-plan-current));
  background: var(
    --cmf-visual-command-tint-strong,
    color-mix(in srgb, var(--cmf-visual-plan-current) 12%, var(--cmf-visual-surface))
  );
  border-color: var(--cmf-visual-command, var(--cmf-visual-plan-current));
}

.cmf-wb-rail-item.needs-review .cmf-wb-rail-icon {
  color: var(--cmf-visual-review, var(--cmf-visual-review));
  background: var(--cmf-state-warning-bg, var(--cmf-visual-review-tint));
  border-color: var(--cmf-state-warning-border, var(--semantic-state-warning-border));
}

.cmf-wb-rail-label {
  color: var(--cmf-visual-ink, var(--cmf-visual-ink));
  font-size: 13px;
  font-weight: 500;
}

.cmf-wb-chip {
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 600;
}

.cmf-wb-rail-item.is-dirty .cmf-wb-chip,
.cmf-wb-draft-pill.is-active {
  background: var(--cmf-shell-staged-bg, var(--cmf-visual-command-tint));
  border-color: var(--cmf-visual-staged, var(--cmf-visual-command));
  color: var(--cmf-visual-staged, var(--cmf-visual-command));
  box-shadow: none;
}

.cmf-wb-dot {
  background: var(--cmf-visual-staged, var(--cmf-visual-command));
}

.cmf-wb-pane-header {
  border-bottom-color: var(--cmf-visual-rule-strong, var(--cmf-visual-rule-strong));
}

.cmf-wb-pane-eyebrow {
  color: var(--cmf-visual-ink-tertiary, var(--cmf-visual-ink));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.cmf-wb-pane-title {
  color: var(--cmf-visual-ink, var(--cmf-visual-ink));
  font-size: 16px;
  font-weight: 600;
}

.cmf-wb-pane-subtitle {
  color: var(--cmf-visual-ink-secondary, var(--cmf-visual-ink-secondary));
  font-size: 12px;
}

.cmf-wb-metrics {
  gap: var(--cmf-wb-metrics-gap, 20px);
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--cmf-visual-rule) 18%, transparent);
  border-radius: 8px;
  background: rgb(255 255 255 / 4%);
  box-shadow: inset 0 1px rgb(255 255 255 / 6%);
}

.cmf-wb-metric {
  color: var(--cmf-visual-rule);
  font-size: 13px;
  font-weight: 600;
}

.cmf-wb-metric-value {
  color: var(--cmf-visual-command-tint);
  font-weight: 700;
}

.cmf-wb-metric.is-ok .cmf-wb-metric-value {
  color: var(--semantic-state-success-border);
}

.cmf-wb-metric.is-review .cmf-wb-metric-value {
  color: var(--semantic-state-warning-border);
}

.cmf-wb-metric.is-staged .cmf-wb-metric-value {
  color: var(--cmf-visual-staged);
}

.cmf-wb-metric-label {
  color: var(--cmf-visual-rule);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* Optional two-row Workbench header. Dense workflows keep the default inline
   strip; financial review canvases can give figures a dedicated scan line
   without consumer CSS reaching into CMF's shell. */
.cmf-workbench-modal.cmf-wb-metrics-stacked > .cmf-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 142px;
  padding: 14px 22px 0;
  column-gap: 18px;
}

.cmf-workbench-modal.cmf-wb-metrics-stacked > .cmf-header > .cmf-header-content {
  min-width: 0;
}

.cmf-workbench-modal.cmf-wb-metrics-stacked > .cmf-header > .cmf-header-actions {
  justify-self: end;
}

.cmf-workbench-modal.cmf-wb-metrics-stacked > .cmf-header > .cmf-wb-metrics {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  justify-content: flex-start;
  gap: 26px;
  margin: 12px 0 0;
  padding: 13px 0 12px;
  border: 0;
  border-top: 1px solid rgb(255 255 255 / 8%);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.cmf-workbench-modal.cmf-wb-metrics-stacked .cmf-wb-metric {
  min-width: 150px;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.cmf-workbench-modal.cmf-wb-metrics-stacked .cmf-wb-metric-value {
  order: 2;
  font-size: 20px;
  line-height: 1.2;
}

.cmf-workbench-modal.cmf-wb-metrics-stacked .cmf-wb-metric-label {
  order: 1;
}

.cmf-workbench-modal.cmf-wb-metrics-stacked .cmf-wb-metric[data-workbench-metric='configured'] {
  min-width: 0;
  margin-left: auto;
}

@media (width <= 900px), (orientation: landscape) and (height <= 500px) and (width <= 1000px) {
  .cmf-workbench-modal.cmf-wb-metrics-stacked > .cmf-header {
    display: flex;
    min-height: var(--cmf-wb-header-min-height, 76px);
    padding: var(--cmf-wb-header-padding, 12px 20px);
  }

  .cmf-workbench-modal.cmf-wb-metrics-stacked > .cmf-header > .cmf-wb-metrics {
    display: none;
  }
}

.cmf-wb-footer-summary,
.cmf-wb-draft-pill,
.cmf-wb-discard {
  color: var(--cmf-visual-ink-tertiary, var(--cmf-visual-ink));
  font-weight: 500;
}

.cmf-wb-draft-pill {
  background: var(--cmf-visual-surface, var(--cmf-visual-rail));
  border-color: var(--cmf-visual-rule, var(--cmf-visual-rule-strong));
}

.cmf-wb-discard:hover:not(:disabled) {
  color: var(--cmf-visual-ink, var(--cmf-visual-ink));
  background: var(--cmf-visual-command-tint, var(--cmf-visual-ready-tint));
}

.cmf-workbench-modal > .cmf-footer .cmf-btn {
  font-size: 13px;
  font-weight: 600;
}

/* Optional header rendering stays physically and semantically below the
   Workbench controls. The host never participates in hit testing or layout. */
.cmf-header > .cmf-wb-data-fabric {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  contain: layout paint;
  opacity: 0.18;
  mix-blend-mode: normal;
}

.cmf-wb-data-fabric canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Font Awesome is present in the main app, but CMF also renders in isolated
   test, export, and embedded hosts. Give those shells an authored glyph rather
   than an empty plate. The runtime class is removed once a real font glyph is
   detected, so existing consumer icon choices remain intact in the app. */
.cmf-header-icon.cmf-header-icon--fallback > i {
  display: none;
}

.cmf-header-icon.cmf-header-icon--fallback::before {
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  border: 1.5px solid currentcolor;
  border-radius: 6px;
  background:
    linear-gradient(currentcolor, currentcolor) 50% 0 / 1px 100% no-repeat,
    linear-gradient(currentcolor, currentcolor) 0 50% / 100% 1px no-repeat;
  content: '';
  opacity: 0.92;
}

.cmf-header-icon.cmf-header-icon--fallback[data-cmf-icon*='chart']::before {
  border-top: 0;
  border-right: 0;
  border-radius: 0 0 0 2px;
  background:
    linear-gradient(145deg, transparent 0 42%, currentcolor 43% 49%, transparent 50%) 1px 0 / 15px
      13px no-repeat,
    radial-gradient(circle, currentcolor 0 1.5px, transparent 1.7px) 1px 10px / 7px 7px repeat-x;
}

.cmf-header-icon.cmf-header-icon--fallback[data-cmf-icon*='column']::before {
  background:
    linear-gradient(currentcolor, currentcolor) 50% 0 / 1px 100% no-repeat,
    linear-gradient(rgb(255 255 255 / 8%), rgb(255 255 255 / 8%));
}

.cmf-header-icon.cmf-header-icon--fallback[data-cmf-icon*='list']::before,
.cmf-header-icon.cmf-header-icon--fallback[data-cmf-icon*='check']::before {
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle, currentcolor 0 1.5px, transparent 1.7px) 0 1px / 5px 6px repeat-y,
    linear-gradient(currentcolor, currentcolor) 7px 2px / 11px 1.5px no-repeat,
    linear-gradient(currentcolor, currentcolor) 7px 8px / 11px 1.5px no-repeat,
    linear-gradient(currentcolor, currentcolor) 7px 14px / 11px 1.5px no-repeat;
}

.cmf-header-icon.cmf-header-icon--fallback[data-cmf-icon*='slider']::before {
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle, currentcolor 0 2px, transparent 2.2px) 2px 0 / 16px 6px no-repeat,
    radial-gradient(circle, currentcolor 0 2px, transparent 2.2px) -2px 6px / 16px 6px no-repeat,
    radial-gradient(circle, currentcolor 0 2px, transparent 2.2px) 4px 12px / 16px 6px no-repeat,
    linear-gradient(currentcolor, currentcolor) 0 3px / 18px 1px no-repeat,
    linear-gradient(currentcolor, currentcolor) 0 9px / 18px 1px no-repeat,
    linear-gradient(currentcolor, currentcolor) 0 15px / 18px 1px no-repeat;
}

/* Workbench icons may mount before an icon font is available. Use one
   authored comparison-grid glyph for font-icon configurations so the plate
   always resolves and remains consistent across loading and export hosts. */
.cmf-workbench-modal .cmf-header-icon:has(> i) {
  position: relative;

  /* Back on the navy tile, so a pale glyph is correct again -- routed
     through the invariant slab set rather than a bare hex. */
  color: var(--cmf-header-ink-secondary, rgb(255 255 255 / 70%));
}

.cmf-workbench-modal .cmf-header-icon:has(> i) > i {
  display: none;
}

.cmf-workbench-modal .cmf-header-icon:has(> i)::before {
  width: 18px;
  height: 14px;
  border: 1.5px solid currentcolor;
  border-radius: 6px;
  background:
    linear-gradient(currentcolor, currentcolor) 0 4px / 100% 1px no-repeat,
    linear-gradient(currentcolor, currentcolor) 0 8px / 100% 1px no-repeat;
  content: '';
}

.cmf-workbench-modal .cmf-header-icon:has(> i)::after {
  position: absolute;
  top: 50%;
  left: 16px;
  width: 1px;
  height: 12px;
  background: currentcolor;
  content: '';
  transform: translateY(-50%);
}

.cmf-workbench-modal.cmf-wb-density-presentation {
  --cmf-wb-header-min-height: 80px;
  --cmf-wb-header-padding: 14px 20px;
  --cmf-wb-header-gap: 16px;
  --cmf-wb-header-icon-size: 40px;
  --cmf-wb-header-icon-radius: 6px;
  --cmf-wb-title-size: 1.3rem;
  --cmf-wb-subtitle-size: 0.8rem;
  --cmf-wb-rail-width: clamp(272px, 20vw, 320px);
  --cmf-wb-search-padding: 11px 12px 8px;
  --cmf-wb-control-height: 36px;
  --cmf-wb-meter-margin: 0 12px 12px;
  --cmf-wb-meter-padding: 11px 12px;
  --cmf-wb-rail-row-min-height: 64px;
  --cmf-wb-rail-row-padding: 8px 11px;
  --cmf-wb-rail-row-gap: 9px;
  --cmf-wb-rail-icon-size: 36px;
  --cmf-wb-metrics-gap: 22px;
  --cmf-wb-footer-min-height: 64px;
  --cmf-wb-footer-padding: 10px 20px;
  --cmf-wb-button-min-height: 36px;
  --cmf-wb-button-min-width: 104px;
  --cmf-wb-primary-min-width: 144px;
  --cmf-wb-button-radius: 6px;
  --cmf-wb-button-font-size: 13px;
}

.cmf-workbench-modal.cmf-wb-header-density-compact {
  --cmf-wb-header-min-height: 60px;
  --cmf-wb-header-padding: 10px 16px;
  --cmf-wb-header-gap: 12px;
  --cmf-wb-header-icon-size: 32px;
  --cmf-wb-header-icon-radius: 6px;
  --cmf-wb-title-size: 1.1rem;
  --cmf-wb-subtitle-size: 0.75rem;
  --cmf-wb-metrics-gap: 18px;
}

.cmf-wb-rail-compact .cmf-wb-rail {
  --cmf-wb-rail-row-min-height: 44px;
  --cmf-wb-rail-icon-size: 28px;
  --cmf-wb-rail-row-padding: 6px 9px;
}

/* Ordered Workbench workflow. This is deliberately a CMF preset rather than
   consumer-owned shell CSS: the rail remains the canonical state mirror and
   retains the same DOM, events, statuses, search, and progress semantics. */
@media (width >= 901px) {
  .cmf-workbench-modal.cmf-wb-rail-layout-steps > .cmf-workbench-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .cmf-workbench-modal.cmf-wb-rail-layout-steps > .cmf-workbench-body > .cmf-wb-rail {
    display: grid;
    grid-template-columns: clamp(250px, 20vw, 320px) minmax(0, 1fr);
    grid-template-rows: auto auto;
    min-height: 92px;
    max-height: 112px;
    overflow: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--cmfb-border, var(--cmf-visual-rule-strong));
    background: var(--cmfb-surface, #fff);
  }

  .cmf-workbench-modal.cmf-wb-rail-layout-steps .cmf-wb-search {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    padding: 10px 14px 5px;
  }

  .cmf-workbench-modal.cmf-wb-rail-layout-steps .cmf-wb-meter {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    margin: 0 14px 10px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .cmf-wb-rail-layout-steps .cmf-wb-meter-top {
    min-height: 17px;
  }

  .cmf-wb-rail-layout-steps .cmf-wb-meter-value {
    font-size: 12px;
  }

  .cmf-wb-rail-layout-steps .cmf-wb-meter-pct,
  .cmf-wb-rail-layout-steps .cmf-wb-meter-caption {
    font-size: 10px;
  }

  .cmf-wb-rail-layout-steps .cmf-wb-meter-track {
    height: 5px;
    margin-top: 4px;
  }

  .cmf-wb-rail-layout-steps .cmf-wb-meter-caption,
  .cmf-wb-rail-layout-steps .cmf-wb-rail-heading,
  .cmf-wb-rail-layout-steps .cmf-wb-rail-actions,
  .cmf-wb-rail-layout-steps .cmf-wb-rail-content {
    display: none;
  }

  .cmf-workbench-modal.cmf-wb-rail-layout-steps .cmf-wb-rail-list {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0;
    min-width: 0;
    overflow: hidden;
    padding: 0 18px 0 0;
  }

  .cmf-workbench-modal.cmf-wb-rail-layout-steps .cmf-wb-rail-item {
    position: relative;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    min-width: 0;
    min-height: 92px;
    gap: 2px 10px;
    margin: 0;
    padding: 12px 14px;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .cmf-workbench-modal.cmf-wb-rail-layout-steps .cmf-wb-rail-item::after {
    position: absolute;
    top: 50%;
    right: 0;
    width: 1px;
    height: 42px;
    background: var(--cmfb-border, var(--cmf-visual-rule));
    content: '';
    transform: translateY(-50%);
  }

  .cmf-workbench-modal.cmf-wb-rail-layout-steps .cmf-wb-rail-item:last-child::after {
    display: none;
  }

  .cmf-workbench-modal.cmf-wb-rail-layout-steps .cmf-wb-rail-item[aria-current='true'] {
    border-bottom-color: var(--cmfb-blue, #a63320);
    background: #f7faff;
    box-shadow: none;
  }

  .cmf-workbench-modal.cmf-wb-rail-layout-steps .cmf-wb-rail-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    font-size: 13px;
  }

  .cmf-workbench-modal.cmf-wb-rail-layout-steps .cmf-wb-rail-text {
    grid-column: 2;
    grid-row: 1;
  }

  .cmf-workbench-modal.cmf-wb-rail-layout-steps .cmf-wb-rail-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
  }

  .cmf-workbench-modal.cmf-wb-rail-layout-steps .cmf-wb-rail-meta {
    display: block;
    margin-top: 2px;
    font-size: 10.5px;
  }

  .cmf-workbench-modal.cmf-wb-rail-layout-steps .cmf-wb-chip {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    margin: 2px 0 0;
  }

  .cmf-workbench-modal.cmf-wb-rail-layout-steps .cmf-wb-dot {
    top: 12px;
    right: 10px;
  }
}

@media (width <= 900px), (orientation: landscape) and (height <= 500px) and (width <= 1000px) {
  .cmf-workbench-modal.cmf-wb-rail-layout-steps.cmf-wb-mobile-tabs .cmf-wb-rail-meta {
    display: none;
  }

  .cmf-workbench-modal.cmf-wb-rail-layout-steps > .cmf-footer {
    height: auto;
    max-height: 165px;
  }
}

@media (height <= 820px) and (width >= 901px) {
  .cmf-workbench-modal.cmf-wb-density-presentation {
    --cmf-wb-header-min-height: 72px;
    --cmf-wb-header-padding: 12px 18px;
    --cmf-wb-header-icon-size: 40px;
    --cmf-wb-title-size: 1.25rem;
    --cmf-wb-rail-row-min-height: 60px;
    --cmf-wb-rail-icon-size: 34px;
    --cmf-wb-footer-min-height: 64px;
    --cmf-wb-footer-padding: 8px 18px;
    --cmf-wb-button-min-height: var(--cmf-control-h-secondary);
  }
}

@media (width <= 900px), (orientation: landscape) and (height <= 500px) and (width <= 1000px) {
  .cmf-wb-data-fabric {
    display: none;
  }

  .cmf-modal .cmf-close {
    width: var(--cmf-control-h-secondary);
    height: var(--cmf-control-h-secondary);
    min-width: var(--cmf-control-h-secondary);
    min-height: var(--cmf-control-h-secondary);
  }

  .cmf-modal .cmf-footer .cmf-btn {
    min-height: var(--cmf-control-h-secondary);
  }

  .cmf-workbench-modal > .cmf-footer .cmf-wb-discard {
    box-sizing: border-box;
    min-height: var(--cmf-control-h-secondary);
  }

  .cmf-wb-rail {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    border-right: 0;
    border-bottom-color: var(--cmf-visual-rule-strong, var(--cmf-visual-rule-strong));
  }

  /* A fixed edge cue plus a real scrollbar makes the off-screen destinations
     explicit. The fade is hosted by the rail so it stays put while the tab
     list scrolls beneath it. */
  .cmf-wb-mobile-tabs .cmf-wb-rail::before {
    content: '';
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    bottom: 5px;
    width: 58px;
    pointer-events: none;
    background: linear-gradient(
      90deg,
      transparent,
      var(--cmf-visual-rail, var(--cmf-visual-rail)) 68%
    );
  }

  .cmf-wb-mobile-tabs .cmf-wb-rail::after {
    content: '\203A';
    position: absolute;
    z-index: 3;
    top: 50%;
    right: 7px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 30px;
    color: var(--cmf-visual-command, var(--cmf-visual-command));
    background: var(--cmf-visual-surface-raised, var(--color-white));
    border: 1px solid var(--cmf-visual-rule-strong, var(--cmf-visual-rule-strong));
    border-radius: 999px;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--cmf-visual-ink) 16%, transparent);
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    pointer-events: none;
    transform: translateY(calc(-50% - 2px));
  }

  .cmf-wb-mobile-tabs .cmf-wb-rail-list {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    gap: 4px;
    padding: 6px 44px 6px 8px;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-color: var(--cmf-visual-command, var(--cmf-visual-command))
      var(--cmf-visual-rule, var(--cmf-visual-rule));
    scrollbar-width: thin;
  }

  .cmf-wb-mobile-tabs .cmf-wb-rail-list::-webkit-scrollbar {
    height: 5px;
  }

  .cmf-wb-mobile-tabs .cmf-wb-rail-list::-webkit-scrollbar-track {
    background: var(--cmf-visual-rule, var(--cmf-visual-rule));
  }

  .cmf-wb-mobile-tabs .cmf-wb-rail-list::-webkit-scrollbar-thumb {
    background: var(--cmf-visual-command, var(--cmf-visual-command));
    border-radius: 999px;
  }

  .cmf-wb-mobile-tabs .cmf-wb-rail-item {
    min-height: 44px;
    border-bottom-color: var(--cmf-visual-rule, var(--cmf-visual-rule-strong));
    scroll-snap-align: start;
  }

  .cmf-wb-mobile-tabs .cmf-wb-rail-item[aria-current='true'] {
    box-shadow: inset 0 -3px 0 var(--cmf-visual-command, var(--cmf-visual-plan-current));
  }

  .cmf-split-left {
    border-right: 0;
    border-bottom-color: var(--cmf-visual-rule-strong, var(--cmf-visual-rule-strong));
  }

  .cmf-workbench-modal.cmf-wb-density-presentation {
    --cmf-wb-header-min-height: 72px;
    --cmf-wb-header-padding: 12px 16px;
    --cmf-wb-header-icon-size: 36px;
    --cmf-wb-title-size: 1.2rem;
    --cmf-wb-footer-min-height: 68px;
    --cmf-wb-footer-padding: 10px 14px;
    --cmf-wb-button-min-height: var(--cmf-control-h-secondary);
  }
}

@media (width <= 640px) {
  .cmf-modal {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .cmf-modal > .cmf-header,
  .cmf-workbench-modal > .cmf-header {
    min-height: 64px;
    padding: 11px 14px;
    border-radius: 0;
  }

  .cmf-title,
  .cmf-workbench-modal .cmf-title {
    max-width: 100%;
    overflow: hidden;
    display: -webkit-box;
    font-size: 16px;
    line-height: 1.25;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .cmf-close,
  .cmf-modal .cmf-close {
    width: var(--cmf-control-h-secondary);
    height: var(--cmf-control-h-secondary);
    min-width: var(--cmf-control-h-secondary);
    min-height: var(--cmf-control-h-secondary);
  }

  .cmf-body {
    padding: var(--cmf-body-padding, 14px);
  }

  .cmf-footer,
  .cmf-workbench-modal > .cmf-footer {
    padding: var(--cmf-footer-padding, 10px 14px);
  }

  .cmf-modal .cmf-footer .cmf-btn,
  .cmf-workbench-modal > .cmf-footer .cmf-btn {
    min-height: var(--cmf-control-h-secondary);
  }

  .cmf-wb-pane-header {
    padding: 11px 14px 10px;
  }

  .cmf-wb-pane-scroll {
    padding: 14px 14px 20px;
  }

  /* Comparison matrices become compact decision rows instead of requiring a
     hidden horizontal pan. The authored header remains in the accessibility
     tree; data-label supplies the visible label/value grammar. */
}

@media (width <= 480px) {
  .cmf-modal > .cmf-header .cmf-header-icon {
    display: none;
  }

  .cmf-modal > .cmf-header::before,
  .cmf-workbench-modal > .cmf-header::before {
    opacity: 0.55;
  }

  .cmf-footer,
  .cmf-workbench-modal > .cmf-footer {
    gap: 8px;
  }

  .cmf-workbench-modal > .cmf-footer .cmf-footer-left,
  .cmf-workbench-modal > .cmf-footer .cmf-footer-right {
    gap: 8px;
  }

  .cmf-workbench-modal > .cmf-footer .cmf-footer-left {
    display: grid;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .cmf-workbench-modal .cmf-wb-draft {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 6px;
    width: auto;
    max-width: 100%;
  }

  .cmf-workbench-modal .cmf-wb-draft-pill {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    padding: 4px 8px;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
  }

  .cmf-workbench-modal .cmf-wb-draft-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .cmf-workbench-modal > .cmf-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    max-height: min(38dvh, 196px);
    padding: 8px 14px;
  }

  .cmf-workbench-modal .cmf-wb-footer-summary {
    font-size: 12px;
    line-height: 1.25;
  }

  .cmf-workbench-modal > .cmf-footer .cmf-footer-right {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr);
    gap: 8px;
  }

  .cmf-workbench-modal > .cmf-footer .cmf-btn,
  .cmf-workbench-modal > .cmf-footer .cmf-btn-primary {
    flex: none;
    width: auto;
    max-width: 100%;
    min-width: 0;
    min-height: var(--cmf-control-h-primary);
  }
}

/* ===== Premium fluid surface system =====
   One elevated shell; internal hierarchy comes from tone, whitespace and
   hairlines. Curvature is reserved for the shell, controls and selection
   wells instead of turning every operational record into a card. */
@media (width >= 641px) {
  /* 🔴 THIS BLOCK IS A THIRD DECLARATION SITE for the panel's box-shadow, and
     because `min-width: 641px` is true on every desktop viewport it BEATS the
     winning tier's rule. It previously carried the depth layers WITHOUT the
     1px edge ring, which silently stripped the Instrument boundary everywhere
     except phones -- measured live: 2 shadow layers, no ring. The file's
     known trap is "grep for a second declaration before editing"; this is the
     same trap wearing a media query, which a grep for a top-level duplicate
     does NOT surface. Keep the ring here in sync with the base rule. */
  .cmf-modal,
  .cmf-workbench-modal {
    border-radius: 12px;
    box-shadow:
      0 0 0 1px var(--cmf-visual-edge, #8a8578),
      var(--cmf-visual-shadow, 0 28px 72px rgb(4 14 31 / 27%), 0 8px 24px rgb(4 14 31 / 13%));
  }

  .cmf-modal > .cmf-header,
  .cmf-workbench-modal > .cmf-header {
    border-radius: 12px 12px 0 0;
  }
}

/* WCAG AAA contrast closure for the Step 4 decision surface. These values are
   intentionally scoped to PCM; they preserve the approved light/dark palette
   while lifting small text from the AA-only ratios in the mockup to 7:1+. */

#plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .pcm-pane-status {
  color: #334155;
}

#plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  :is(
    .pcm-tier-state--capped,
    .pcm-cap-title-long,
    .pcm-cap-title-short,
    .pcm-cap-long,
    .pcm-cap-short
  ) {
  color: var(--cmf-visual-review);
}

#plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .plan-contrib-clear-btn {
  color: var(--cmf-visual-danger);
}

#plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .plan-contrib-premiums-panel
  > table
  > tbody
  > tr:nth-child(3)
  > td:nth-child(2),
#plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .plan-contrib-premiums-panel
  > table
  > tbody
  > tr:nth-child(3)
  > td:nth-child(4) {
  color: var(--cmf-visual-danger);
}

#plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .plan-contrib-premiums-panel
  > table
  > tbody
  > tr:nth-child(3)
  > td:nth-child(3) {
  color: var(--cmf-visual-ready);
}

/* Buttons: the radius is --cmf-control-radius on `.cmf-btn` itself. This
   higher-specificity footer rule wins over the workbench footer radius rules
   above, so it stays (reading the token) to keep the geometry fixed. */
.cmf-workbench-modal > .cmf-footer .cmf-btn {
  border-radius: var(--cmf-control-radius);
}

/* The CONTROL step of the radius scale (shell 12 / surface 8 / control 6 /
   pill 999), for fields inside a modal. A nested radius must never exceed its
   parent's: 6px inside an 8px section inside the modal's 12px shell.
   `--cmf-field-radius` is set to 6px on the base `.cmf-modal` rule. */
.cmf-modal :where(input:not([type='checkbox'], [type='radio'], [type='range']), select, textarea) {
  border-radius: var(--cmf-field-radius);
}

.cmf-close {
  width: var(--cmf-control-h-secondary);
  height: var(--cmf-control-h-secondary);
  min-width: var(--cmf-control-h-secondary);
  min-height: var(--cmf-control-h-secondary);
}

.cmf-hero-band {
  gap: 0;
  padding: 8px 20px 10px;
  background: transparent;
  border-bottom-color: var(--cmf-visual-rule, var(--cmf-visual-rule-strong));
}

.cmf-hero-stat {
  margin-right: 24px;
  padding: 8px 24px 8px 0;
  border-right-color: var(--cmf-visual-rule, var(--cmf-visual-rule-strong));
}

.cmf-workbench-modal {
  --cmf-wb-control-radius: 10px;
  --cmf-wb-meter-radius: 0;
  --cmf-wb-button-min-height: var(--cmf-control-h-secondary);
  --cmf-wb-button-radius: 10px;
}

.cmf-workbench-modal .cmf-wb-rail {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--cmf-visual-surface-raised, #fffefa) 70%, transparent),
    var(--cmf-wb-rail-bg, var(--cmf-visual-rail, #f5f2eb)) 44%
  );
  border-right-color: var(--cmf-visual-rule, var(--cmf-visual-rule-strong));
}

.cmf-workbench-modal .cmf-wb-meter {
  margin-inline: 14px;
  padding: 10px 2px 12px;
  background: transparent;
  border: 0;
}

.cmf-workbench-modal .cmf-wb-rail-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-inline: 10px;
}

.cmf-workbench-modal :is(.cmf-wb-rail-item, .cmf-wb-rail-action) {
  box-sizing: border-box;
  min-height: 44px;
}

.cmf-workbench-modal .cmf-wb-discard {
  box-sizing: border-box;
  min-height: var(--cmf-control-h-secondary);
}

.cmf-workbench-modal .cmf-wb-rail-item {
  border-color: transparent;
  border-bottom-color: transparent;
  border-radius: 8px;
  box-shadow: none;
}

.cmf-workbench-modal .cmf-wb-rail-item:hover {
  background: color-mix(
    in srgb,
    var(--cmf-visual-surface-raised, var(--cmf-visual-rail)) 88%,
    transparent
  );
  box-shadow: 0 4px 12px color-mix(in srgb, var(--cmf-visual-ink) 5%, transparent);
}

.cmf-workbench-modal .cmf-wb-rail-item[aria-current='true'] {
  background: var(--cmf-visual-surface-raised, var(--cmf-visual-rail));
  background-color: var(--cmf-visual-surface-raised, var(--cmf-visual-rail));
  border-color: color-mix(
    in srgb,
    var(--cmf-visual-command, var(--cmf-visual-plan-current)) 22%,
    transparent
  );
  box-shadow:
    inset 3px 0 0 var(--cmf-visual-command, #0b47b7),
    0 8px 18px rgb(16 26 40 / 8%);
}

.cmf-workbench-modal .cmf-wb-rail-icon {
  border-color: transparent;
  border-radius: 8px;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--cmf-visual-surface-raised, var(--color-white)) 96%, transparent),
    color-mix(in srgb, var(--cmf-visual-rail, #eef3f9) 80%, transparent)
  );
  box-shadow:
    inset 0 1px rgb(255 255 255 / 64%),
    0 4px 10px rgb(11 21 38 / 8%);
}

.cmf-workbench-modal .cmf-wb-rail-item[aria-current='true'] .cmf-wb-rail-icon {
  border-color: transparent;
}

.cmf-workbench-modal .cmf-wb-pane-header {
  border-bottom-color: var(--cmf-visual-rule, var(--cmf-visual-rule-strong));
}

.cmf-workbench-modal .matrix-copy > .cmf-kit-toolbar {
  margin: 10px 14px 0;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--cmf-visual-rule, var(--cmf-visual-rule-strong));
  border-radius: 0;
  box-shadow: none;
}

.cmf-workbench-modal .matrix-copy > .cmf-kit-toolbar .cmf-kit-status-badge {
  padding-inline: 0;
  color: var(--cmf-visual-ink-tertiary, var(--cmf-visual-ink));
  background: transparent;
  border: 0;
  border-radius: 0;
}

.cmf-workbench-modal .matrix-metric-band {
  position: relative;
  gap: 0;
  isolation: isolate;
  overflow: hidden;
  margin: 0 14px;
  background: var(--cmf-visual-surface-raised, var(--cmf-visual-rail));
  border: 1px solid var(--cmf-visual-rule, var(--cmf-visual-rule-strong));
  border-radius: 8px;
  box-shadow:
    0 8px 22px rgb(16 26 40 / 5%),
    inset 0 1px rgb(255 255 255 / 58%);
}

.cmf-workbench-modal .matrix-metric-band::after {
  position: absolute;
  z-index: 2;
  inset: 0 0 0 auto;
  width: 5px;
  background: linear-gradient(
    180deg,
    var(--cmf-visual-command) 0 54%,
    var(--cmf-visual-ready) 82%,
    var(--cmf-visual-danger) 100%
  );
  content: '';
  pointer-events: none;
}

.cmf-workbench-modal .matrix-metric-band .cmf-kit-stat {
  position: relative;
  z-index: 1;
  padding: 16px 20px 15px;
  background: transparent;
  border: 0;
}

.cmf-workbench-modal .matrix-metric-band .cmf-kit-stat:not(:last-child) {
  border-right: 1px solid var(--cmf-visual-rule, var(--cmf-visual-rule-strong));
}

.cmf-workbench-modal .matrix-metric-band .cmf-kit-stat-value {
  font-family: Charter, 'Bitstream Charter', 'Iowan Old Style', ui-serif, Georgia, serif;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.cmf-workbench-modal .matrix-metric-band .cmf-kit-stat-label {
  margin-top: 7px;
  font-size: 10px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

@media (width >= 1180px) {
  .cmf-workbench-modal .matrix-metric-band::before {
    position: absolute;
    z-index: 0;
    top: 50%;
    right: 20px;
    width: 132px;
    height: 46px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 46'%3E%3Cpath d='M3 28 L20 24 L38 25 L55 26 L72 32 L90 32 L108 29 L129 18' fill='none' stroke='%230a48b2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M72 32 L90 32 L108 29 L129 18' fill='none' stroke='%23075b3b' stroke-width='1.8' stroke-linecap='round'/%3E%3Cg fill='%230a48b2'%3E%3Ccircle cx='3' cy='28' r='2.4'/%3E%3Ccircle cx='20' cy='24' r='2.4'/%3E%3Ccircle cx='38' cy='25' r='2.4'/%3E%3Ccircle cx='55' cy='26' r='2.4'/%3E%3Ccircle cx='72' cy='32' r='2.4'/%3E%3C/g%3E%3Cg fill='%23075b3b'%3E%3Ccircle cx='90' cy='32' r='2.4'/%3E%3Ccircle cx='108' cy='29' r='2.4'/%3E%3Ccircle cx='129' cy='18' r='2.4'/%3E%3C/g%3E%3Cline x1='90' x2='90' y1='8' y2='41' stroke='%233f4f65' stroke-width='1'/%3E%3Ccircle cx='90' cy='32' r='5' fill='none' stroke='%23075b3b' stroke-width='1.8'/%3E%3Ccircle cx='90' cy='32' r='2.2' fill='%23075b3b'/%3E%3C/svg%3E")
      center / contain no-repeat;
    content: '';
    opacity: 0.94;
    pointer-events: none;
    transform: translateY(-50%);
  }

  .cmf-workbench-modal .matrix-metric-band .cmf-kit-stat:last-child {
    padding-right: 160px;
  }

  :is([data-theme='dark'], .dark-mode, .vui-dark) .cmf-workbench-modal .matrix-metric-band::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 46'%3E%3Cpath d='M3 28 L20 24 L38 25 L55 26 L72 32 L90 32 L108 29 L129 18' fill='none' stroke='%238db4ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M72 32 L90 32 L108 29 L129 18' fill='none' stroke='%2374d7a8' stroke-width='1.8' stroke-linecap='round'/%3E%3Cg fill='%238db4ff'%3E%3Ccircle cx='3' cy='28' r='2.4'/%3E%3Ccircle cx='20' cy='24' r='2.4'/%3E%3Ccircle cx='38' cy='25' r='2.4'/%3E%3Ccircle cx='55' cy='26' r='2.4'/%3E%3Ccircle cx='72' cy='32' r='2.4'/%3E%3C/g%3E%3Cg fill='%2374d7a8'%3E%3Ccircle cx='90' cy='32' r='2.4'/%3E%3Ccircle cx='108' cy='29' r='2.4'/%3E%3Ccircle cx='129' cy='18' r='2.4'/%3E%3C/g%3E%3Cline x1='90' x2='90' y1='8' y2='41' stroke='%239fb0c5' stroke-width='1'/%3E%3Ccircle cx='90' cy='32' r='5' fill='none' stroke='%2374d7a8' stroke-width='1.8'/%3E%3Ccircle cx='90' cy='32' r='2.2' fill='%2374d7a8'/%3E%3C/svg%3E");
  }

  /* OS preference. Gated on the auto-dark roots — see the note at the top of
     this file. */
  @media (prefers-color-scheme: dark) {
    :root.auto-dark .cmf-workbench-modal .matrix-metric-band::before,
    :root.vui-auto-dark .cmf-workbench-modal .matrix-metric-band::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 46'%3E%3Cpath d='M3 28 L20 24 L38 25 L55 26 L72 32 L90 32 L108 29 L129 18' fill='none' stroke='%238db4ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M72 32 L90 32 L108 29 L129 18' fill='none' stroke='%2374d7a8' stroke-width='1.8' stroke-linecap='round'/%3E%3Cg fill='%238db4ff'%3E%3Ccircle cx='3' cy='28' r='2.4'/%3E%3Ccircle cx='20' cy='24' r='2.4'/%3E%3Ccircle cx='38' cy='25' r='2.4'/%3E%3Ccircle cx='55' cy='26' r='2.4'/%3E%3Ccircle cx='72' cy='32' r='2.4'/%3E%3C/g%3E%3Cg fill='%2374d7a8'%3E%3Ccircle cx='90' cy='32' r='2.4'/%3E%3Ccircle cx='108' cy='29' r='2.4'/%3E%3Ccircle cx='129' cy='18' r='2.4'/%3E%3C/g%3E%3Cline x1='90' x2='90' y1='8' y2='41' stroke='%239fb0c5' stroke-width='1'/%3E%3Ccircle cx='90' cy='32' r='5' fill='none' stroke='%2374d7a8' stroke-width='1.8'/%3E%3Ccircle cx='90' cy='32' r='2.2' fill='%2374d7a8'/%3E%3C/svg%3E");
    }
  }
}

/* Case Version History uses this one class grammar in both the CMF legacy
   renderer and its Vue body, keeping fallback a visual as well as behavioral
   equivalent. */
.cvh-changes {
  margin-top: var(--space-1, 8px);
}

.cvh-changes-toggle {
  min-height: 36px;
  padding-inline: 0;
  color: var(--cmf-visual-command);
  font-size: var(--text-xs, 12px);
}

.cvh-changes-chevron {
  display: inline-block;
  margin-right: var(--space-05, 4px);
  transition: transform var(--transition-fast, 150ms ease);
}

.cvh-changes-chevron.is-expanded {
  transform: rotate(90deg);
}

.cvh-changes-panel {
  margin-top: var(--space-1, 8px);
}

.cvh-loading,
.cvh-change-reason,
.cvh-change-line,
.cvh-change-group-title {
  font-size: var(--text-xs, 12px);
}

.cvh-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1, 8px);
}

.cvh-change-line {
  margin: var(--space-025, 2px) 0 var(--space-025, 2px) var(--space-1, 8px);
  color: var(--cmf-visual-ink-secondary);
}

.cvh-change-mark,
.cvh-change-emphasis,
.cvh-change-group-title {
  font-weight: var(--font-semibold, 600);
}

.cvh-change-mark--added {
  color: var(--cmf-visual-ready);
}

.cvh-change-mark--removed {
  color: var(--cmf-visual-danger);
}

.cvh-change-field {
  margin-left: var(--space-1-5, 12px);
}

.cvh-change-before {
  color: var(--cmf-visual-ink-tertiary);
}

.cvh-change-group {
  margin-block: var(--space-1, 8px);
}

.cvh-change-group-title {
  margin-bottom: var(--space-025, 2px);
}

.cmf-workbench-modal .matrix-review-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 18px;
  align-items: center;
  width: 100%;
}

.cmf-workbench-modal .matrix-review-detail > strong,
.cmf-workbench-modal .matrix-review-detail > span {
  grid-column: 1;
}

.cmf-workbench-modal .matrix-review-detail > .cmf-btn {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.cmf-workbench-modal .matrix-copy > .cmf-kit-callout--warning {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.cmf-workbench-modal .matrix-copy > .cmf-kit-callout--warning::before {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: var(--cmf-state-warning-ink, var(--cmf-visual-review));
  border: 1.5px solid currentcolor;
  border-radius: 50%;
  content: '!';
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.cmf-workbench-modal .cmf-kit-callout .cmf-btn-secondary {
  min-width: 0;
  margin-top: 0;
  padding-inline: 0;
  color: var(--cmf-visual-command, var(--cmf-visual-command));
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.cmf-workbench-modal .cmf-kit-callout .cmf-btn-secondary::after {
  margin-left: 7px;
  content: '\2192';
}

.cmf-workbench-modal .cmf-kit-callout .cmf-btn-secondary:hover {
  color: var(--cmf-visual-command-hover, var(--cmf-visual-command));
  background: transparent;
  border-color: transparent;
}

@media (width >= 641px) {
  .cmf-workbench-modal .cmf-kit-matrix-row:not(.cmf-kit-matrix-row--head) {
    min-height: 46px;
  }
}

.cmf-workbench-modal > .cmf-footer {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--cmf-wb-footer-bg, #fbfcfc) 84%, transparent),
    var(--cmf-wb-footer-bg, #fbfcfc) 24%
  );
  border-top-color: var(--cmf-visual-rule, var(--cmf-visual-command-tint));
  box-shadow:
    inset 0 1px rgb(255 255 255 / 52%),
    0 -10px 28px rgb(11 21 38 / 4.5%);
}

@media (width <= 900px), (orientation: landscape) and (height <= 500px) and (width <= 1000px) {
  .cmf-workbench-modal.cmf-wb-mobile-tabs .cmf-wb-rail {
    background: var(--cmf-visual-rail, var(--cmf-visual-rail));
  }

  .cmf-workbench-modal.cmf-wb-mobile-tabs .cmf-wb-rail-item {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .cmf-workbench-modal.cmf-wb-mobile-tabs .cmf-wb-rail-list {
    flex-direction: row;
  }

  .cmf-workbench-modal.cmf-wb-mobile-tabs .cmf-wb-rail-item[aria-current='true'] {
    color: var(--cmf-visual-command, var(--cmf-visual-plan-current));
    background: color-mix(
      in srgb,
      var(
          --cmf-visual-command-tint,
          color-mix(in srgb, var(--cmf-visual-plan-current) 12%, var(--cmf-visual-surface))
        )
        38%,
      transparent
    );
    box-shadow: inset 0 -3px 0 var(--cmf-visual-command, var(--cmf-visual-plan-current));
  }

  .cmf-wb-mobile-tabs .cmf-wb-rail::after {
    box-shadow: 0 1px 4px color-mix(in srgb, var(--cmf-visual-ink) 10%, transparent);
  }
}

@media (width <= 640px) {
  .cmf-workbench-modal .matrix-metric-band {
    display: grid;
    grid-template-columns: repeat(3, minmax(104px, 1fr));
    overflow-x: auto;
    margin: 0 10px;
    border-radius: 6px;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .cmf-workbench-modal .matrix-metric-band::-webkit-scrollbar {
    display: none;
  }

  .cmf-workbench-modal .matrix-metric-band::after {
    width: 3px;
  }

  .cmf-workbench-modal .matrix-metric-band .cmf-kit-stat {
    min-width: 104px;
    padding: 8px 10px 7px;
    scroll-snap-align: start;
  }

  .cmf-workbench-modal .matrix-metric-band .cmf-kit-stat-value {
    font-size: 16px;
    letter-spacing: -0.025em;
  }

  .cmf-workbench-modal .matrix-metric-band .cmf-kit-stat-label {
    margin-top: 3px;
    font-size: 10px;
    letter-spacing: 0.07em;
    line-height: 1.15;
  }

  .cmf-workbench-modal .matrix-copy > .cmf-kit-toolbar {
    min-height: 30px;
    margin: 4px 10px 0;
    padding: 5px 2px 6px;
  }

  .cmf-workbench-modal .matrix-copy > .cmf-kit-toolbar .cmf-kit-status-badge {
    max-width: 18ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cmf-workbench-modal .matrix-copy > .cmf-kit-callout--warning {
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 8px;
    margin: 6px 10px;
    padding: 7px 9px;
  }

  .cmf-workbench-modal .matrix-copy > .cmf-kit-callout--warning::before {
    width: 18px;
    height: 18px;
    font-size: 11px;
  }

  .cmf-workbench-modal .matrix-review-detail {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 8px;
  }

  .cmf-workbench-modal .matrix-review-detail > span {
    display: -webkit-box;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .cmf-workbench-modal .matrix-review-detail > .cmf-btn {
    align-self: center;
    min-height: 36px;
    padding-inline: 5px;
    font-size: 11px;
  }

  .cmf-workbench-modal > .cmf-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    max-height: min(30dvh, 116px);
    padding: 5px 10px;
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--cmf-wb-footer-bg, #fbfcfc) 78%, transparent),
      var(--cmf-wb-footer-bg, #fbfcfc) 22%
    );
    border-radius: 0;
    box-shadow: none;
  }

  .cmf-workbench-modal > .cmf-footer .cmf-footer-left {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 8px;
    width: auto;
    max-width: 100%;
    min-width: 0;
  }

  .cmf-workbench-modal .cmf-wb-footer-summary {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cmf-workbench-modal > .cmf-footer .cmf-footer-left > * {
    min-width: 0;
    max-width: 100%;
  }

  .cmf-workbench-modal > .cmf-footer .cmf-footer-left > .cmf-wb-draft {
    max-width: 138px;
    overflow: hidden;
  }

  .cmf-workbench-modal .cmf-wb-draft {
    display: flex;
    grid-template-columns: none;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    width: auto;
    max-width: 138px;
    min-width: 0;
  }

  .cmf-workbench-modal .cmf-wb-draft-pill {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    max-width: 80px;
    padding: 3px 7px;
    white-space: nowrap;
  }

  .cmf-workbench-modal .cmf-wb-draft-text {
    font-size: 0;
  }

  .cmf-workbench-modal .cmf-wb-draft-text::after {
    content: attr(data-compact-label);
    font-size: 11px;
  }

  .cmf-workbench-modal > .cmf-footer .cmf-wb-draft > .cmf-wb-discard {
    flex: 0 0 52px;
    width: 52px;
    min-width: 52px;
    min-height: var(--cmf-control-h-secondary);
    padding: 3px;
    font-size: 11px;
  }

  .cmf-workbench-modal > .cmf-footer .cmf-footer-right {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
    gap: 8px;
    width: auto;
    max-width: 100%;
  }

  .cmf-workbench-modal > .cmf-footer .cmf-btn,
  .cmf-workbench-modal > .cmf-footer .cmf-btn-primary {
    width: 100%;
    min-width: 0;
    min-height: var(--cmf-control-h-secondary);
  }
}

/* Commit ranks keep the primary height inside footers. The footer rules above
   read the secondary token for every `.cmf-btn`; these sit after them (equal
   or higher specificity) so a commit is never shorter than its rank. */
.cmf-modal
  .cmf-footer
  :is(.cmf-btn-primary, .cmf-btn-verify, .cmf-btn-ink, .cmf-wb-apply.has-changes),
.cmf-workbench-modal
  > .cmf-footer
  :is(.cmf-btn-primary, .cmf-btn-verify, .cmf-btn-ink, .cmf-wb-apply.has-changes) {
  min-height: var(--cmf-control-h-primary);
}

@media (prefers-reduced-motion: reduce) {
  .cmf-wb-data-fabric {
    display: none;
  }
}

@media (forced-colors: active) {
  .cmf-wb-data-fabric {
    display: none;
  }

  .cmf-overlay {
    background: Canvas;
    backdrop-filter: none;
  }

  .cmf-modal {
    color: CanvasText;
    background: Canvas;
    border: 2px solid CanvasText;
    box-shadow: none;
    forced-color-adjust: auto;
  }

  .cmf-modal > .cmf-header,
  .cmf-workbench-modal > .cmf-header {
    color: CanvasText;
    background: Canvas;
    border-bottom: 2px solid CanvasText;
    box-shadow: none;
  }

  .cmf-modal > .cmf-header::before,
  .cmf-modal > .cmf-header::after,
  .cmf-workbench-modal > .cmf-header::before,
  .cmf-workbench-modal > .cmf-header::after {
    content: none;
  }

  .cmf-title,
  .cmf-subtitle,
  .cmf-header-eyebrow,
  .cmf-header-icon,
  .cmf-close {
    color: CanvasText;
  }

  .cmf-close,
  .cmf-wb-rail-item,
  .cmf-wb-rail-action,
  .cmf-wb-chip {
    border: 1px solid ButtonText;
    box-shadow: none;
  }

  .cmf-wb-mobile-tabs .cmf-wb-rail::before {
    background: Canvas;
    border-left: 1px solid CanvasText;
  }

  .cmf-wb-mobile-tabs .cmf-wb-rail::after {
    color: ButtonText;
    background: Canvas;
    border-color: ButtonText;
    box-shadow: none;
  }

  .cmf-workbench-modal > .cmf-footer .cmf-btn-primary {
    color: HighlightText;
    background: Highlight;
    border-color: Highlight;
  }

  .cmf-workbench-modal
    > .cmf-footer:has(.cmf-wb-apply.has-changes)
    .cmf-btn-primary:not(.cmf-wb-apply) {
    color: ButtonText;
    background: Canvas;
    border-color: ButtonText;
  }

  .cmf-wb-rail-item[aria-current='true'] {
    color: CanvasText;
    background: Canvas;
    border: 2px solid Highlight;
    box-shadow: inset 4px 0 0 Highlight;
  }

  .cmf-modal :where(button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 2px;
    box-shadow: none;
  }
}

@media (pointer: coarse), (any-pointer: coarse) {
  .cmf-wb-data-fabric {
    display: none;
  }

  /* 🔴 THE 16px INPUT FLOOR, scoped to touch -- which is what it was always
     for. iOS zooms the viewport when a focused input renders below 16px,
     throwing the operator out of their layout; that hazard exists only on a
     touch pointer. DESIGN.md stated the floor unconditionally while CMF's
     controls sat at 13px on the desktop ramp, so the two contradicted each
     other. Resolved by honouring the floor exactly where it bites and keeping
     desktop density everywhere else. `pointer: coarse` is the right gate
     rather than a width breakpoint: a narrow window on a laptop does not
     zoom, and a large tablet does. */
  .cmf-modal
    :where(input:not([type='checkbox'], [type='radio'], [type='range']), select, textarea) {
    font-size: 16px;
  }

  /* 🔴 THE 44px TARGET FLOOR -- the 16px floor's missing sibling, and the step
     the ladder never had.

     DESIGN.md rule[5] ("The 44px Rule") calls a 44px hit target non-negotiable
     on touch. The repo honoured it the wrong way round: as one-off patches
     inside `@media (max-width: 900px)` blocks, granted to two controls (the
     close button and footer buttons) and nothing else. A width breakpoint is
     the wrong gate here for exactly the reason argued above -- a large tablet
     is a touch device at desktop width, so it got NO floor at all, while a
     narrow laptop window got one it never needed.

     Everything else was left on the desktop density ramp: the custom select
     toggle at a hard 32px, header action buttons at 36px, kit pills on padding
     alone. Scoped to the same coarse gate, the floor now applies once, to every
     control, on exactly the devices the rule was written for.

     Per the rule's own instruction -- "reduce padding and font size before you
     reduce the target" -- this raises the target and leaves type alone. */
  .cmf-modal :where(button, select, summary, [role='button'], [role='tab']) {
    min-height: 44px;
  }

  .cmf-modal .cmf-btn {
    min-height: var(--cmf-control-h-secondary);
  }

  .cmf-modal
    .cmf-btn:is(.cmf-btn-primary, .cmf-btn-verify, .cmf-btn-ink, .cmf-wb-apply.has-changes) {
    min-height: var(--cmf-control-h-primary);
  }

  /* Square icon controls need the target in both axes; a min-height alone
     leaves a 32px-wide button that is tall but still hard to hit. Restricted to
     genuinely interactive icons -- `.cmf-header-icon` is a decorative status
     tile, not a control. */
  .cmf-modal :where(.cmf-close, .cmf-header-action) {
    min-width: var(--cmf-control-h-secondary);
    min-height: var(--cmf-control-h-secondary);
  }

  /* An explicit `height` defeats a `min-height` floor in every practical sense:
     the box stops growing for its content even though the used height clamps
     up. These are the two controls in CMF that pin a height outright. */
  .cmf-custom-select-toggle {
    height: auto;
    min-height: 44px;
  }
}

/* This final source-order guard owns the motion contract, and is now the ONLY
   reduced-motion block in this file. CMF has later component declarations than
   its original accessibility block, so the guard must remain after those
   declarations to prevent entrance and state motion from reappearing for users
   who request reduced motion.

   🔴 Reduced motion is a MOVEMENT preference, not a feedback preference.
   This block used to also set `transition-duration: 0s !important`, which does
   not just stop animation -- it kills hover and focus COLOUR transitions too,
   so every button, row and toggle snapped between states and the whole surface
   felt broken rather than calm. That is a worse experience than the motion it
   was avoiding. What needs to stop is displacement: entrance animations and
   transforms. Colour and opacity transitions are deliberately preserved.

   That rule was already decided and already tested -- see
   `__tests__/CmfInstrumentChrome.test.js`, "reduced motion stops displacement
   but preserves colour feedback", which asserts this block contains no
   `transition-duration`. It passed anyway for as long as the duplicate block
   existed, because its regex matched the FIRST reduced-motion block in the
   file (the compliant one) while this later block quietly overrode it. Do not
   re-add the declaration, and do not add a second guard.

   🔴 BUT THE CARVE-OUT IS NOT IN EFFECT, and cannot be delivered from this
   file. Measured in Chrome against the running app on 2026-08-21: a `.cmf-btn`
   inside a `.cmf-modal` computes `transition-duration: 1e-05s` under reduced
   motion, against 0.12s normally. TWO app-wide sheets clamp every element --
   `styles.css` and `vanilla-ui.css` each declare
   `*, ::before, ::after { transition-duration: 0.01ms !important }`. Those are
   (0,0,0) but !important, and because this block deliberately no longer bids
   on transition-duration, nothing outranks them. `.cmf-btn` is additionally
   killed by CMF's own narrow `transition: none` block earlier in this file.

   Honouring the carve-out therefore needs a decision OUTSIDE CMF: either
   narrow those two universal clamps, or have this block re-assert a scoped
   non-zero duration with !important (which would flatten every in-modal
   duration to a single value). Neither is a CMF-local cleanup, so neither was
   done here. Do not "fix" this by re-adding `transition-duration: 0s`. */
@media (prefers-reduced-motion: reduce) {
  .cmf-overlay,
  .cmf-modal,
  .cmf-modal *,
  .cmf-modal *::before,
  .cmf-modal *::after {
    animation: none !important;
    scroll-behavior: auto !important;
  }

  .cmf-modal *,
  .cmf-modal *::before,
  .cmf-modal *::after {
    transform: none !important;
  }
}

@media print {
  .cmf-wb-data-fabric {
    display: none;
  }
}

@media (width <= 480px) {
  /* Rail tabs become a horizontal scrolling list on phones, for every
     workbench. This is the FOURTH block in this file to style
     `.cmf-wb-mobile-tabs .cmf-wb-rail-list` (see also ~:2531, ~:6211, ~:6942,
     all under `@media (max-width: 900px)`, which also matches here). It used
     to carry !important on every layout declaration, which read as a fight
     against a consumer -- it was not. No consumer anywhere targets
     `.cmf-wb-rail-list` or `.cmf-wb-rail-item`; the competitors were CMF's own
     three earlier blocks. This block is (0,3,0) and last in source order, so
     it already outranks all of them. The !important flags were removed with no
     behavioural change. */
  .cmf-workbench-modal.cmf-wb-mobile-tabs .cmf-wb-rail-list {
    display: flex;
    flex-flow: row nowrap;
    overflow: auto hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .cmf-workbench-modal.cmf-wb-mobile-tabs .cmf-wb-rail-list::-webkit-scrollbar {
    display: none;
  }

  .cmf-workbench-modal.cmf-wb-mobile-tabs .cmf-wb-rail-item {
    flex: 0 0 auto;
    white-space: nowrap;
    width: auto;
  }

  .cmf-workbench-modal.cmf-wb-mobile-tabs .cmf-wb-rail-label {
    white-space: nowrap;
  }
}

/* Case Setup rail: switch the active step instantly. Opening a step renders
   synchronously, so a 0.12s fade stalled half-way and the old and new steps
   both read as active through "Loading step n…". */
.wizard-workbench-cmf-modal .cmf-wb-rail-item {
  transition: none;
}

/* A rail item with `meta` stacks name over a secondary line. Only the
   boardroom and steps layouts styled the stack, so elsewhere (Group
   Enrollment) the two ran together as "HMO 30-North-CA14 enrolled".
   :where() keeps this a default that every variant above still overrides. */
:where(.cmf-workbench-modal) .cmf-wb-rail-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

:where(.cmf-workbench-modal) .cmf-wb-rail-meta {
  font-size: 11px;
  line-height: 1.35;
  color: var(--cmf-visual-ink-secondary, var(--pl-text-soft));
}

/* ==========================================================================
   CMF BOARDROOM — opt-in shell theme for the four surfaces audited in
   artifacts/cmf-drift-review/index.html (Step 4 Plan Contributions, Plan
   Library Mass Edit, Case Share, Feature Flag Workbench).

   WHY THIS BLOCK EXISTS, AND WHY IT IS HERE

   This stylesheet declares the modal surface twice. The first tier (~line
   2200) is the material the drift-review artifact reconstructs and proposes:
   Inter/system UI, a 116deg navy header, tabular-numeric metrics, a #a63320
   commit button, tinted table headers. The second tier (~line 4700+) redeclares
   the same surface with a different design — a 112deg header, 'Source Serif 4'
   metric values, a teal #07586b commit button, #c8402a table headers — and,
   being later in source order, it is the one that ships. Measured live on
   2026-08-21: .cmf-title 17.6px/600 against the artifact's 19px/650,
   .cmf-wb-metric-value serif 16px/600 against mono 19px/700.

   Reviving the first tier globally would restyle every modal in the app, which
   is out of scope. So the Boardroom material is restated here, scoped to
   .cmf-boardroom, after both tiers. Only a modal that opts in by adding the
   class is affected; every other CMF consumer renders exactly as before.

   Values are transcribed from the artifact's own computed styles, captured at
   .playwright-mcp/cmf-exact-parity/reference/reference-geometry.json.
   ========================================================================== */

.cmf-modal.cmf-boardroom {
  --cmfb-surface: var(--color-white);
  --cmfb-surface-2: #f8fafc;
  --cmfb-rail: #fff;
  --cmfb-border: #dce4ee;
  --cmfb-border-2: #cbd5e1;
  --cmfb-ink: #172d43;
  --cmfb-ink-2: #475569;
  --cmfb-ink-3: #64748b;
  --cmfb-blue: #2b5fc0;
  --cmfb-blue-dark: #a63320;
  --cmfb-icon-bg: #f3f5f8;
  --cmfb-icon-current: #edf2f8;
  --cmfb-ok-bg: #e6f3ec;
  --cmfb-ok-bd: #b5d6c5;
  --cmfb-ok-ink: #1f6b4d;
  --cmfb-warn-bg: #eef2f7;
  --cmfb-warn-bd: #c4d0de;
  --cmfb-warn-ink: #8a5a00;
  --cmfb-dang-bg: #f7e9eb;
  --cmfb-dang-bd: #e3bcc1;
  --cmfb-dang-ink: #a61e2b;
  --cmfb-info-bg: #edf2f8;
  --cmfb-info-bd: #bccbdd;
  --cmfb-info-ink: #a63320;
  --cmfb-staged: #213e5b;
  --cmfb-slab: #172d43;
  --cmfb-slab-high: #172d43;
  --cmfb-slab-accent: #c8402a;
  --cmfb-ui: inter, system-ui, -apple-system, 'Segoe UI', roboto, sans-serif;
  --cmfb-num: 'SF Mono', monaco, 'Cascadia Code', 'Fira Code', consolas, ui-monospace, monospace;

  font-family: var(--cmfb-ui);
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: -0.006em;
  color: var(--cmfb-ink);
  background: var(--cmfb-surface);
  border-radius: 12px;
  box-shadow: 0 24px 50px color-mix(in srgb, var(--cmf-visual-ink) 20%, transparent);
  color-scheme: light;
}

/* ---- header ------------------------------------------------------------- */
.cmf-modal.cmf-boardroom > .cmf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background-color: var(--cmfb-slab);
  background-image: linear-gradient(
    116deg,
    var(--cmfb-slab) 0%,
    var(--cmfb-slab-high) 62%,
    var(--cmfb-slab) 100%
  );
  color: var(--color-white);
}

/* The animated data-fabric canvas is a second tier ornament the Proposed
   frames do not carry, and it repaints, which makes a screenshot diff
   non-deterministic. Boardroom surfaces render the flat gradient. */
.cmf-modal.cmf-boardroom > .cmf-header > .cmf-wb-data-fabric {
  display: none;
}

/* The title block owns the left of the header and must never be allowed to
   shrink to nothing: with `flex: 0 1 auto` and min-width:0 children it
   collapsed entirely and the metrics slid to x104. A stated basis keeps the
   name of the surface on screen and the metrics on the right. */
.cmf-modal.cmf-boardroom .cmf-header-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 1 auto;
  min-width: 260px;
}

/* The frame reserves the title block to ~x420 and runs the metric strip from
   x430 to x808, leaving the action pair on the right. */
#plan-contrib-modal.cmf-boardroom .cmf-header-content {
  flex: 0 0 380px;
  min-width: 0;
}

#plan-contrib-modal.cmf-boardroom > .cmf-header > .cmf-wb-metrics {
  flex: 0 1 auto;
  margin-left: 10px;
  margin-right: auto;
}

#plan-contrib-modal.cmf-boardroom .cmf-title,
#plan-contrib-modal.cmf-boardroom .cmf-subtitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cmf-modal.cmf-boardroom .cmf-header-info {
  min-width: 0;
}

.cmf-modal.cmf-boardroom > .cmf-header > .cmf-wb-metrics {
  margin-left: auto;
  flex: 0 0 auto;
}

.cmf-modal.cmf-boardroom .cmf-header-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 8px;
  background: rgb(255 255 255 / 16%);
  color: var(--color-white);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.cmf-modal.cmf-boardroom .cmf-header-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 55%);
  margin: 0 0 2px;
}

.cmf-modal.cmf-boardroom .cmf-title {
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.45;
  color: var(--color-white);
}

.cmf-modal.cmf-boardroom .cmf-subtitle {
  font-size: 12px;
  line-height: 1.45;
  color: rgb(255 255 255 / 85%);
  margin-top: 1px;
}

.cmf-modal.cmf-boardroom .cmf-header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}

/* ---- header metrics ------------------------------------------------------ */
.cmf-modal.cmf-boardroom .cmf-wb-metrics {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border: 0;
  margin: 0;
}

.cmf-modal.cmf-boardroom .cmf-wb-metric {
  display: block;
  padding: 0 15px;
  border-left: 1px solid color-mix(in srgb, var(--cmf-visual-rule-strong) 32%, transparent);
  background: none;
}

.cmf-modal.cmf-boardroom .cmf-wb-metric:first-child {
  border-left: 0;
  padding-left: 0;
}

.cmf-modal.cmf-boardroom .cmf-wb-metric-value {
  font-family: var(--cmfb-num);
  font-variant-numeric: tabular-nums;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.006em;
  color: var(--color-white);
}

.cmf-modal.cmf-boardroom .cmf-wb-metric-label {
  font-family: var(--cmfb-ui);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 62%);
  margin-top: 4px;
}

.cmf-modal.cmf-boardroom .cmf-wb-metric.is-headline .cmf-wb-metric-value,
.cmf-modal.cmf-boardroom
  .cmf-wb-metric[data-workbench-metric='premium-delta']
  .cmf-wb-metric-value {
  font-size: 23px;
  color: var(--cmfb-slab-accent);
}

.cmf-modal.cmf-boardroom .cmf-wb-metric.is-ok .cmf-wb-metric-value {
  color: var(--cmf-visual-ready);
}

.cmf-modal.cmf-boardroom .cmf-wb-metric.is-review .cmf-wb-metric-value,
.cmf-modal.cmf-boardroom .cmf-wb-metric.is-warn .cmf-wb-metric-value {
  color: var(--cmf-visual-review);
}

/* ---- header buttons / close --------------------------------------------- */
.cmf-modal.cmf-boardroom .cmf-header-actions .cmf-btn {
  height: auto;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--cmf-visual-rule) 50%, transparent);
  background: rgb(255 255 255 / 6%);
  color: var(--color-white);
  border-radius: 8px;
  padding: 7px 12px;
  font-family: var(--cmfb-ui);
  font-size: 12px;
  font-weight: 600;
}

.cmf-modal.cmf-boardroom .cmf-close {
  width: 32px;
  height: 32px;
  min-width: 0;
  border: 0;
  border-radius: 8px;
  background: rgb(255 255 255 / 15%);
  color: var(--color-white);
  font-size: 18px;
  line-height: 1;
  padding: 0;
}

/* ---- workbench body / rail ---------------------------------------------- */
.cmf-modal.cmf-boardroom .cmf-workbench-body {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 0;
}

.cmf-modal.cmf-boardroom .cmf-wb-rail {
  background: var(--cmfb-rail);
  background-image: none;
  border-right: 1px solid var(--cmfb-border);
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
}

.cmf-modal.cmf-boardroom .cmf-wb-rail-heading {
  padding: 12px 13px 8px;
  margin: 0;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cmfb-ink-3);
  background: none;
  border: 0;
}

.cmf-modal.cmf-boardroom .cmf-wb-search {
  margin: 0 13px 10px;
  padding: 0;
  border: 0;
}

.cmf-modal.cmf-boardroom .cmf-wb-search input {
  height: 32px;
  width: 100%;
  border: 1px solid var(--cmfb-border);
  border-radius: 8px;
  background: var(--color-white);
  padding: 0 10px;
  font-family: var(--cmfb-ui);
  font-size: 12px;
  color: var(--cmfb-ink);
}

.cmf-modal.cmf-boardroom .cmf-wb-search input::placeholder {
  color: var(--cmfb-ink-3);
}

.cmf-modal.cmf-boardroom .cmf-wb-meter {
  margin: 0 13px 12px;
  padding: 10px 12px;
  border: 1px solid var(--cmf-visual-rule);
  border-radius: 12px;
  background-color: var(--cmf-visual-rail);
  background-image: linear-gradient(180deg, #f7faff, var(--cmf-visual-rail));
}

.cmf-modal.cmf-boardroom .cmf-wb-meter-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11px;
  gap: 8px;
}

.cmf-modal.cmf-boardroom .cmf-wb-meter-value {
  font-family: var(--cmfb-num);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 700;
  color: var(--cmfb-ink);
}

.cmf-modal.cmf-boardroom .cmf-wb-meter-pct {
  font-family: var(--cmfb-num);
  font-size: 11px;
  color: var(--cmfb-ink-3);
}

.cmf-modal.cmf-boardroom .cmf-wb-meter-track {
  height: 5px;
  border-radius: 3px;
  background: var(--cmf-visual-command-tint);
  margin: 7px 0 5px;
  overflow: hidden;
  display: flex;
}

.cmf-modal.cmf-boardroom .cmf-wb-meter-fill {
  background: var(--cmfb-blue-dark);
}

.cmf-modal.cmf-boardroom .cmf-wb-meter-staged {
  background: var(--cmfb-staged);
}

.cmf-modal.cmf-boardroom .cmf-wb-meter-caption {
  font-size: 10px;
  font-weight: 600;
  color: var(--cmfb-ok-ink);
}

.cmf-modal.cmf-boardroom .cmf-wb-rail-list {
  flex: 1;
  padding: 0 9px 9px;
  display: grid;
  gap: 2px;
  align-content: start;
  overflow-y: auto;
}

/* Flex, not a fixed three-track grid: CMF omits .cmf-wb-rail-icon entirely for
   items that declare no icon, and a hard 34px first track then eats the label's
   width and truncates "Medical" to "Me…". Flex lets the icon reserve its 34px
   only when it exists. */
.cmf-modal.cmf-boardroom .cmf-wb-rail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-bottom-color: var(--cmfb-border);
  border-radius: 8px;
  background: var(--color-white);
  text-align: left;
  min-width: 0;
  box-shadow: none;
  font-family: var(--cmfb-ui);
}

/* Group/search visibility must outrank the Boardroom row's display:flex.
   Without this scoped rule the disclosure caret changed state while every
   supposedly collapsed plan remained visible. */
.cmf-modal.cmf-boardroom .cmf-wb-rail-item:is(.is-hidden, .is-group-collapsed, .is-renaming),
.cmf-modal.cmf-boardroom .cmf-wb-rail-heading.is-hidden {
  display: none;
}

.cmf-modal.cmf-boardroom .cmf-wb-rail-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 8px;
  background: var(--cmfb-icon-bg);
  color: var(--cmf-visual-ink-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

.cmf-modal.cmf-boardroom .cmf-wb-rail-label {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--cmfb-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The chip is the row's trailing status and must never be the element that
   wins the width fight with the label. */
.cmf-modal.cmf-boardroom .cmf-wb-rail-item .cmf-wb-chip {
  flex: 0 0 auto;
  margin-left: auto;
}

.cmf-modal.cmf-boardroom .cmf-wb-rail-text {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}

.cmf-modal.cmf-boardroom .cmf-wb-rail-text .cmf-wb-rail-label {
  flex: none;
}

.cmf-modal.cmf-boardroom .cmf-wb-rail-meta,
.cmf-modal.cmf-boardroom .cmf-wb-rail-item small {
  display: block;
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--cmfb-ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cmf-modal.cmf-boardroom .cmf-wb-rail-item.is-active,
.cmf-modal.cmf-boardroom .cmf-wb-rail-item[aria-current='true'],
.cmf-modal.cmf-boardroom .cmf-wb-rail-item[aria-selected='true'] {
  background-color: var(--cmf-visual-rail);
  background-image: linear-gradient(135deg, var(--cmf-visual-rail), var(--cmf-visual-rail));
  border-color: var(--cmfb-blue);
  box-shadow: 0 5px 14px color-mix(in srgb, var(--cmf-visual-signal) 9%, transparent);
}

.cmf-modal.cmf-boardroom .cmf-wb-rail-item.is-active .cmf-wb-rail-icon,
.cmf-modal.cmf-boardroom .cmf-wb-rail-item[aria-current='true'] .cmf-wb-rail-icon,
.cmf-modal.cmf-boardroom .cmf-wb-rail-item[aria-selected='true'] .cmf-wb-rail-icon {
  background: var(--cmfb-icon-current);
  color: var(--cmfb-blue-dark);
}

.cmf-modal.cmf-boardroom .cmf-wb-rail-item.is-dirty .cmf-wb-rail-icon {
  background: var(--cmf-visual-command-tint);
  color: var(--cmfb-staged);
}

.cmf-modal.cmf-boardroom .cmf-wb-chip {
  font-family: var(--cmfb-num);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border: 0;
  border-radius: 999px;
  background: var(--cmfb-icon-bg);
  color: var(--cmfb-ink-2);
}

.cmf-modal.cmf-boardroom .cmf-wb-chip-ok {
  background: var(--cmfb-ok-bg);
  color: var(--cmfb-ok-ink);
}

.cmf-modal.cmf-boardroom .cmf-wb-chip-warn {
  background: var(--cmfb-warn-bg);
  color: var(--cmfb-warn-ink);
}

.cmf-modal.cmf-boardroom .cmf-wb-chip-danger,
.cmf-modal.cmf-boardroom .cmf-wb-chip-dang {
  background: var(--cmfb-dang-bg);
  color: var(--cmfb-dang-ink);
}

.cmf-modal.cmf-boardroom .cmf-wb-chip-info {
  background: var(--cmfb-info-bg);
  color: var(--cmfb-info-ink);
}

.cmf-modal.cmf-boardroom .cmf-wb-chip-staged {
  background: var(--cmf-visual-staged);
  color: var(--cmfb-staged);
}

/* ---- main pane ----------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Scoped SF Pro fallback for the four audited CMF surfaces.

   The approved frames render in SF Pro: the artifact asks for
   `--font-ui: Inter, system-ui, …` and loads NO webfont, and Inter is not
   installed on the review machine, so `system-ui` resolves to SF Pro. The app
   loads IBM Plex Sans as a webfont (app.html:137) and binds it through
   --font-document -> --cmf-font-sans, so every glyph in every audited frame is
   drawn in a different typeface from the reference. Different letterforms mean
   different pixels, and different advance widths shift every element that
   follows a text run — which is why text-bearing regions dominate the raw diff.

   Scoped DELIBERATELY to the four audited surfaces by their own modal classes,
   never product-wide: changing --font-document would restyle the entire
   product to match a mockup, which is not what the drift review is for.
   --------------------------------------------------------------------------- */

/* 🔴 Setting `font-family` here is NOT sufficient, and on its own it did almost
   nothing. The descendants do not inherit it: `.cmf-title`, `.cmf-subtitle`,
   the metric parts, the rail rows, the tables and the inputs each RE-SET
   `font-family: var(--cmf-font-sans)` / `var(--font-ui)` (e.g. :1191, :3630,
   :4805, :5015), and an explicit declaration beats an inherited value no matter
   how specific the ancestor rule is. A token-drift probe measured the result:
   every text role on PCM still computed to `"IBM Plex Sans", …` while the frame
   computed `Inter, system-ui, …`.

   So rebind the TOKENS those descendants read, scoped to the same four
   surfaces. `--cmfb-ui` is already the frame's own stack (:7538); pointing
   `--cmf-font-sans` and `--font-ui` at it makes every descendant that resolves
   a font token land on the same typeface as the reference, while anything that
   merely inherits still gets the declaration below.

   Still scoped DELIBERATELY to the four audited surfaces. Rebinding
   `--font-document` globally would restyle the whole product to match a
   mockup, which is not what this review is for. */
.cmf-modal.cmf-boardroom.pcm-cmf-workbench,
.cmf-modal.cmf-boardroom.mass-edit-workbench,
.cmf-modal.cmf-boardroom.case-share-workbench,
#plan-contrib-modal.cmf-boardroom {
  /* The literal is repeated as a FALLBACK on purpose. `--cmfb-ui` is declared
     on `.cmf-modal.cmf-boardroom` (:7509), and PCM's root is
     `#plan-contrib-modal` — matched by the last selector above, which does not
     require `.cmf-modal`. Where that class is absent the token is out of scope,
     a bare `var(--cmfb-ui)` is invalid at computed-value time, and font-family
     silently falls back to the INHERITED app face — i.e. straight back to IBM
     Plex Sans, the exact bug this block exists to fix, but now failing
     invisibly. The fallback keeps it correct on every surface. */
  --cmf-font-sans: var(--cmfb-ui, Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
  --font-ui: var(--cmfb-ui, Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);

  font-family: var(--cmfb-ui, Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
}

.cmf-modal.cmf-boardroom .cmf-wb-main {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  /* NOTE — slate-50 was tried here and REVERTED; do not retry it alone.
     The approved frames paint this pane slate-50 (rgb(248,250,252)) and float
     white cards on it, and that is the single largest flat-region colour
     difference in the parity diff (flags-desktop 74,327 px, caseshare-desktop
     25,957 px, pcm-desktop 25,123 px). But the shipped cards have no background
     of their own — they INHERIT white from this pane — so recolouring it turns
     the cards slate-50 as well and the surface gets further from the frame, not
     closer. Measured: caseshare-desktop 253,784 -> 307,943 raw (+54,159),
     caseshare-phone 164,492 -> 230,798 (+66,306); only pcm-desktop improved
     (440,410 -> 438,499). Closing this gap requires giving the cards an explicit
     white background FIRST, then flipping this value — one coordinated change,
     not this one-liner. */
  background: var(--color-white);
}

.cmf-modal.cmf-boardroom .cmf-wb-pane-header {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px 10px;
  border-bottom: 1px solid var(--cmfb-border);
  background: var(--color-white);
}

.cmf-modal.cmf-boardroom .cmf-wb-pane-eyebrow {
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cmfb-ink-3);
  margin-bottom: 3px;
}

.cmf-modal.cmf-boardroom .cmf-wb-pane-title {
  font-size: 15px;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--cmfb-ink);
}

.cmf-modal.cmf-boardroom .cmf-wb-pane-subtitle {
  font-size: 11px;
  color: var(--cmfb-ink-2);
  margin-top: 2px;
}

.cmf-modal.cmf-boardroom .cmf-wb-pane-scroll,
.cmf-modal.cmf-boardroom .cmf-body {
  padding: 13px 18px;
  background: var(--color-white);
  color: var(--cmfb-ink);
  font-size: 13px;
}

/* ---- footer -------------------------------------------------------------- */
.cmf-modal.cmf-boardroom > .cmf-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 20px;
  background: var(--cmfb-surface-2);
  background-image: none;
  border-top: 1px solid var(--cmfb-border);
  border-radius: 0 0 12px 12px;
}

.cmf-modal.cmf-boardroom .cmf-wb-footer-summary {
  font-family: var(--cmfb-ui);
  font-size: 11.5px;
  color: var(--cmfb-ink-2);
}

.cmf-modal.cmf-boardroom > .cmf-footer .cmf-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: auto;
  padding: 8px 14px;
  border-radius: 8px;
  font-family: var(--cmfb-ui);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  border: 1px solid var(--cmfb-border-2);
  background: var(--color-white);
  color: var(--cmfb-ink-2);
}

.cmf-modal.cmf-boardroom > .cmf-footer .cmf-btn-primary {
  border-color: transparent;
  background-color: var(--cmfb-blue-dark);
  background-image: linear-gradient(135deg, var(--cmfb-blue), var(--cmfb-blue-dark));
  color: var(--color-white);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--cmf-visual-signal) 25%, transparent);
}

.cmf-modal.cmf-boardroom > .cmf-footer .cmf-btn-danger {
  border-color: var(--cmf-visual-danger-tint);
  background: var(--color-white);
  color: var(--cmfb-dang-ink);
}

/* ---- tables inside a Boardroom body -------------------------------------- */
.cmf-modal.cmf-boardroom .cmf-body table,
.cmf-modal.cmf-boardroom .cmf-wb-pane-scroll table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--cmfb-ui);
  font-size: 11.5px;
  border: 1px solid var(--cmfb-border);
  border-radius: 8px;
  overflow: hidden;
}

.cmf-modal.cmf-boardroom .cmf-body th,
.cmf-modal.cmf-boardroom .cmf-body td,
.cmf-modal.cmf-boardroom .cmf-wb-pane-scroll th,
.cmf-modal.cmf-boardroom .cmf-wb-pane-scroll td {
  padding: 5px 9px;
  border: 0;
  border-bottom: 1px solid #eef2f7;
  text-align: right;
  white-space: nowrap;
  font-size: 11.5px;
  color: var(--cmfb-ink);
}

.cmf-modal.cmf-boardroom .cmf-body th:first-child,
.cmf-modal.cmf-boardroom .cmf-body td:first-child,
.cmf-modal.cmf-boardroom .cmf-wb-pane-scroll th:first-child,
.cmf-modal.cmf-boardroom .cmf-wb-pane-scroll td:first-child {
  text-align: left;
}

.cmf-modal.cmf-boardroom .cmf-body thead th,
.cmf-modal.cmf-boardroom .cmf-wb-pane-scroll thead th {
  background-color: var(--cmf-visual-rail);
  background-image: linear-gradient(180deg, #f7faff, var(--cmf-visual-rail));
  border-bottom: 1px solid var(--cmf-visual-rule);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cmfb-ink-2);
}

.cmf-modal.cmf-boardroom .cmf-body tfoot td,
.cmf-modal.cmf-boardroom .cmf-wb-pane-scroll tfoot td {
  border-top: 2px solid var(--cmf-visual-ink);
  border-bottom: 0;
  font-weight: 750;
  background: var(--color-white);
}

/* ---- rail reading order --------------------------------------------------
   CMF emits the rail as search → meter → heading → content → list. The Proposed
   frames lead with the heading ("PLANS", "ADMIN", "BENEFIT TYPE", "SHARE WITH"),
   then the filter, then the meter — the column names itself before it offers a
   way to narrow itself. Reordered visually rather than in the DOM so the tab
   order and the accessible name of the search field are unchanged.
   The direct-child combinator matters: group headings inside .cmf-wb-rail-list
   share the .cmf-wb-rail-heading class and must keep their place in the list. */
.cmf-modal.cmf-boardroom > .cmf-workbench-body > .cmf-wb-rail > .cmf-wb-rail-heading {
  order: -3;
}

.cmf-modal.cmf-boardroom > .cmf-workbench-body > .cmf-wb-rail > .cmf-wb-search {
  order: -2;
}

.cmf-modal.cmf-boardroom > .cmf-workbench-body > .cmf-wb-rail > .cmf-wb-meter {
  order: -1;
}

.cmf-modal.cmf-boardroom > .cmf-workbench-body > .cmf-wb-rail > .cmf-wb-rail-content {
  order: 0;
}

.cmf-modal.cmf-boardroom > .cmf-workbench-body > .cmf-wb-rail > .cmf-wb-rail-list {
  order: 1;
}

/* ---- overflow ------------------------------------------------------------
   A grid/flex child defaults to min-width:auto, so a wide table refuses to
   shrink and pushes a horizontal scrollbar through the whole pane — which is
   what was clipping "Proposal Book v2 renderer" to "roposal Book v2 render" in
   the flag list and cutting "Needs review" off the inspector. */
.cmf-modal.cmf-boardroom .cmf-wb-main,
.cmf-modal.cmf-boardroom .cmf-wb-main > *,
.cmf-modal.cmf-boardroom .cmf-wb-pane,
.cmf-modal.cmf-boardroom .cmf-wb-pane-scroll,
.cmf-modal.cmf-boardroom .cmf-body {
  min-width: 0;
}

/* ---- control density inside a Boardroom body -----------------------------
   The Proposed frames run every in-body control at 30px with 12px type
   (.m-input). The shipped second tier runs 44px controls, which is what turned
   a 28px decision-table row into a 56px one. */
.cmf-modal.cmf-boardroom
  :is(.cmf-body, .cmf-wb-pane-scroll)
  :is(select, input[type='text'], input[type='number'], input[type='search'], input[type='email']) {
  box-sizing: border-box;
  height: 30px;
  min-height: 0;
  padding: 0 9px;
  font-family: var(--cmfb-ui);
  font-size: 12px;
  line-height: 1.45;
  border: 1px solid var(--cmfb-border);
  border-radius: 8px;
  background: var(--color-white);
  color: var(--cmfb-ink);
}

.cmf-modal.cmf-boardroom :is(.cmf-body, .cmf-wb-pane-scroll) :is(select, input):focus {
  outline: none;
  border-color: var(--cmfb-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cmf-visual-focus) 15%, transparent);
}

.cmf-modal.cmf-boardroom :is(.cmf-body, .cmf-wb-pane-scroll) .cmf-btn {
  min-height: 0;
  height: auto;
  padding: 6px 11px;
  border-radius: 8px;
  font-family: var(--cmfb-ui);
  font-size: 11.5px;
  font-weight: 600;
}

/* ---- phone --------------------------------------------------------------- */
@media (width <= 640px) {
  .cmf-modal.cmf-boardroom {
    border-radius: 0;
    box-shadow: 0 12px 30px color-mix(in srgb, var(--cmf-visual-ink) 18%, transparent);
  }

  .cmf-modal.cmf-boardroom > .cmf-header {
    padding: 11px 14px;
    border-radius: 0;
  }

  .cmf-modal.cmf-boardroom .cmf-header-icon {
    width: 34px;
    height: 34px;
    font-size: 12px;
  }

  .cmf-modal.cmf-boardroom .cmf-title {
    font-size: 16px;
  }

  .cmf-modal.cmf-boardroom .cmf-wb-metric {
    padding: 0 9px;
  }

  .cmf-modal.cmf-boardroom .cmf-wb-metric-value {
    font-size: 15px;
  }

  .cmf-modal.cmf-boardroom .cmf-workbench-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .cmf-modal.cmf-boardroom .cmf-wb-rail {
    border-right: 0;
    border-bottom: 1px solid var(--cmfb-border);
  }

  .cmf-modal.cmf-boardroom .cmf-wb-pane-scroll,
  .cmf-modal.cmf-boardroom .cmf-body {
    padding: 11px 13px;
  }

  .cmf-modal.cmf-boardroom > .cmf-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 0;
  }

  .cmf-modal.cmf-boardroom > .cmf-footer .cmf-footer-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .cmf-modal.cmf-boardroom > .cmf-footer .cmf-btn {
    justify-content: center;
    min-width: 0;
  }
}

/* ---- Boardroom: Step 4 Plan Contributions -------------------------------
   html-partials/styles.html carries 328 `#plan-contrib-modal ...` rules that
   predate this theme and win on ID specificity. Rather than delete rules that
   the legacy body still depends on, the Boardroom variant restates only the
   shell facts at `#plan-contrib-modal.cmf-boardroom`, which outranks them by
   one class and applies only while the Boardroom class is present. */
#plan-contrib-modal.cmf-boardroom {
  /* The reference rail occupies x0..247. styles.html:1122 sets 280px for this
     surface; the 32px it gives back is what lets MODEL and the whole SCOPE
     group share one row in the scope bar. */
  --cmf-wb-rail-width: 248px;
}

/* The divider is the rail's right edge. It measured x265 against the frame's
   x247 because the split layout carried its own inset — zeroed here so the
   248px track starts at x0. */
#plan-contrib-modal.cmf-boardroom .contrib-split-layout.cmf-workbench-body {
  grid-template-columns: 248px minmax(0, 1fr);
  padding: 0;
  margin: 0;
  gap: 0;
}

/* The generated Workbench now owns the one visible, cross-benefit plan rail.
   Keep the renderer's selector mounted as a compatibility control for its
   established delegated handlers, but remove its duplicate visual track. */
#plan-contrib-modal.cmf-boardroom.pcm-factory-rail > .cmf-workbench-body {
  grid-template-columns: var(--cmf-wb-rail-width, 248px) minmax(0, 1fr);
}

#plan-contrib-modal.cmf-boardroom.pcm-factory-rail > .cmf-workbench-body > .cmf-wb-rail {
  display: flex;
}

#plan-contrib-modal.cmf-boardroom.pcm-factory-rail .contrib-split-layout.cmf-workbench-body {
  grid-template-columns: minmax(0, 1fr);
}

#plan-contrib-modal.cmf-boardroom.pcm-factory-rail .contrib-split-layout > .contrib-plan-selector {
  display: none;
}

#plan-contrib-modal.cmf-boardroom.pcm-factory-rail
  > .cmf-workbench-body
  > .cmf-wb-rail
  > .cmf-wb-search {
  order: 2;
  margin: 0 13px 10px;
}

#plan-contrib-modal.cmf-boardroom.pcm-factory-rail
  > .cmf-workbench-body
  > .cmf-wb-rail
  > .cmf-wb-meter {
  order: 3;
  margin: 0 13px 10px;
}

#plan-contrib-modal.cmf-boardroom.pcm-factory-rail
  > .cmf-workbench-body
  > .cmf-wb-rail
  > .cmf-wb-rail-heading {
  order: 1;
  padding: 12px 13px 8px;
}

#plan-contrib-modal.cmf-boardroom.pcm-factory-rail
  > .cmf-workbench-body
  > .cmf-wb-rail
  > .cmf-wb-rail-list {
  order: 4;
}

#plan-contrib-modal.cmf-boardroom.pcm-factory-rail .pcm-tier-filterbar {
  margin: 0 0 8px;
  padding: 0;
}

#plan-contrib-modal.cmf-boardroom .cmf-wb-pane-header .pcm-pane-status {
  flex: 0 0 auto;
  align-self: center;
  margin-left: auto;
}

#plan-contrib-modal.cmf-boardroom .contrib-plan-selector {
  margin: 0;
  padding: 0;
  border-right: 1px solid var(--cmfb-border);
}

/* The 18px the split layout was inset by came from the CMF body wrapper that
   hosts it. Zeroed so the 248px rail track starts at x0 and its divider lands
   on x248, matching the frame. */

/* The inset is on the CMF body wrapper that hosts the split, not on the split
   itself — zero it at the direct child so the 248px rail track starts at x0. */
#plan-contrib-modal.cmf-boardroom > .cmf-body,
#plan-contrib-modal.cmf-boardroom > .cmf-workbench-body > .cmf-wb-main,
#plan-contrib-modal.cmf-boardroom .pcm-cmf-body,
#plan-contrib-modal.cmf-boardroom .cmf-wb-main-contained {
  padding: 0;
  margin: 0;
}

#plan-contrib-modal.cmf-boardroom .tab-panels {
  padding-left: 0;
  padding-right: 0;
}

/* The inset belongs to the MAIN column only: the rail runs edge to edge so its
   divider lands on x248, and the pane's own 18px keeps content at x266 with the
   right edge at x1062 — the frame's geometry. */
#plan-contrib-modal.cmf-boardroom .contrib-split-layout > .contrib-plan-selector {
  padding-inline: 0;
}

#plan-contrib-modal.cmf-boardroom .contrib-split-layout > .contrib-table-area {
  padding-inline: 18px;
}

/* The rail is a FLAT plan list in the frame — proposed plans first, then the
   current book. Group headings are demoted to a thin divider so plan identity
   and the group's own DOM structure are untouched while the reading order
   matches. */
#plan-contrib-modal.cmf-boardroom .contrib-plan-selector .contrib-plan-selector-scroll,
#plan-contrib-modal.cmf-boardroom .contrib-plan-selector .tabs {
  display: flex;
  flex-direction: column;
}

#plan-contrib-modal.cmf-boardroom .contrib-plan-selector .tab-group {
  display: contents;
}

#plan-contrib-modal.cmf-boardroom
  .contrib-plan-selector
  .tab-group:has(.tab[data-plan-type='proposed']),
#plan-contrib-modal.cmf-boardroom .contrib-plan-selector .tab-group:nth-of-type(2) {
  order: -1;
}

#plan-contrib-modal.cmf-boardroom .contrib-plan-selector .tab-group-title {
  order: -2;
  padding: 8px 13px 4px;
  font-size: 9.5px;
  letter-spacing: 0.1em;
}

#plan-contrib-modal.cmf-boardroom .plan-contrib-modal-grid {
  padding: 0;
  margin: 0;
}

#plan-contrib-modal.cmf-boardroom > .cmf-header {
  min-height: 90px;
  padding: 14px 20px;
}

/* The frame's header carries ONE labelled action — Walkthrough — beside the
   close button. Groups and Benchmark are relocated into the rail by
   UIManager rather than hidden, so both stay clickable and in tab order. */
#plan-contrib-modal.cmf-boardroom .cmf-header-actions .pcm-header-action-label {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip-path: none;
  font-size: 12px;
  font-weight: 600;
}

#plan-contrib-modal.cmf-boardroom .cmf-header-actions .cmf-btn {
  width: auto;
  gap: 6px;
  padding: 7px 12px;
}

/* The success/warning accent edge is second-tier chrome; the Proposed frame
   carries that state in the Configured metric's colour instead. */
#plan-contrib-modal.cmf-boardroom > .cmf-header::after,
#plan-contrib-modal.cmf-boardroom > .cmf-header-success::after,
#plan-contrib-modal.cmf-boardroom > .cmf-header-warning::after {
  display: none;
}

#plan-contrib-modal.cmf-boardroom
  > .cmf-header:is(.cmf-header-success, .cmf-header-warning, .cmf-header-danger) {
  border-bottom: 0;
}

#plan-contrib-modal.cmf-boardroom .pcm-metric-band {
  gap: 0;
  margin-right: 0;
  padding-right: 0;
  border-right: 0;
}

#plan-contrib-modal.cmf-boardroom .pcm-metric {
  text-align: left;
  padding: 0 15px;
  border-left: 1px solid color-mix(in srgb, var(--cmf-visual-rule-strong) 32%, transparent);
}

#plan-contrib-modal.cmf-boardroom .pcm-metric:first-child {
  border-left: 0;
  padding-left: 0;
}

#plan-contrib-modal.cmf-boardroom .pcm-metric .cmf-wb-metric-value {
  font-family: var(--cmfb-num);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.006em;
}

#plan-contrib-modal.cmf-boardroom .pcm-metric-headline .cmf-wb-metric-value {
  font-size: 23px;
  color: var(--cmfb-slab-accent);
}

#plan-contrib-modal.cmf-boardroom .pcm-metric-configured.is-ok .cmf-wb-metric-value {
  color: var(--cmf-visual-ready);
}

#plan-contrib-modal.cmf-boardroom .pcm-metric-configured.is-review .cmf-wb-metric-value {
  color: var(--cmf-visual-review);
}

#plan-contrib-modal.cmf-boardroom .pcm-metric .cmf-wb-metric-label {
  margin-top: 4px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.09em;
  color: rgb(255 255 255 / 62%);
}

/* The plan rail: shown only once UIManager has adopted the renderer's own
   `.contrib-plan-selector` into the rail column. Absent that node the rail
   stays collapsed exactly as it did before, so nothing regresses when the
   renderer has no list to give. */
#plan-contrib-modal.cmf-boardroom.pcm-rail-adopted.pcm-native-workbench
  > .cmf-workbench-body
  > .cmf-wb-rail {
  display: flex;
}

#plan-contrib-modal.cmf-boardroom.pcm-rail-adopted.pcm-native-workbench > .cmf-workbench-body {
  grid-template-columns: 248px minmax(0, 1fr);
}

#plan-contrib-modal.cmf-boardroom .pcm-rail-host {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* The adopted selector already carries CMF's rail classes, so it inherits the
   Boardroom rail material. Neutralise only the nested-rail chrome. */
#plan-contrib-modal.cmf-boardroom .pcm-rail-host > .contrib-plan-selector {
  flex: 1;
  min-height: 0;
  width: auto;
  border-right: 0;
  background: transparent;
  overflow-y: auto;
  padding: 0;
  margin: 0;
}

#plan-contrib-modal.cmf-boardroom .pcm-rail-host .tabs,
#plan-contrib-modal.cmf-boardroom .pcm-rail-host .cmf-wb-rail-list {
  display: grid;
  gap: 2px;
  align-content: start;
  padding: 0 9px 9px;
}

#plan-contrib-modal.cmf-boardroom .pcm-rail-host .tab {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-bottom-color: var(--cmfb-border);
  border-radius: 8px;
  background: var(--color-white);
  text-align: left;
  min-width: 0;
  width: auto;
}

#plan-contrib-modal.cmf-boardroom .pcm-rail-host .tab.active,
#plan-contrib-modal.cmf-boardroom .pcm-rail-host .tab[aria-current='true'],
#plan-contrib-modal.cmf-boardroom .pcm-rail-host .tab[aria-selected='true'] {
  background-color: var(--cmf-visual-rail);
  background-image: linear-gradient(135deg, var(--cmf-visual-rail), var(--cmf-visual-rail));
  border-color: var(--cmfb-blue);
  box-shadow: 0 5px 14px color-mix(in srgb, var(--cmf-visual-signal) 9%, transparent);
}

/* Body: the legacy container chain sets its own padding to zero, which puts
   the decision table hard against the shell edge. The Proposed frame pads the
   pane at 13px/18px. */
#plan-contrib-modal.cmf-boardroom .pcm-cmf-body > .plan-contrib-modal-grid {
  padding: 13px 18px;
}

/* The rail is the plan list; the stepper rungs are not built under Boardroom,
   but belt-and-braces in case a stale render leaves one behind. */
#plan-contrib-modal.cmf-boardroom .pcm-left-stepper,
#plan-contrib-modal.cmf-boardroom .pcm-left-review-step {
  display: none;
}

#plan-contrib-modal.cmf-boardroom .pcm-rail-head {
  display: block;
  padding: 0;
}

#plan-contrib-modal.cmf-boardroom .pcm-rail-heading {
  padding: 12px 13px 8px;
}

/* Groups and Benchmark live in a CMF popover behind the header's overflow
   button — invisible until invoked, so the rail stays a list of plans. */
.cmf-popover.pcm-header-overflow-popover {
  padding: 6px;
  min-width: 176px;
}

.pcm-header-overflow-menu {
  display: grid;
  gap: 4px;
}

.pcm-header-overflow-menu .pcm-header-action-label {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip-path: none;
}

#plan-contrib-modal.cmf-boardroom .pcm-header-overflow {
  width: 32px;
  min-width: 32px;
  padding: 0;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}

/* The benefit facet, relocated into the rail. */
#plan-contrib-modal.cmf-boardroom .pcm-rail-benefit-field {
  display: block;
  margin: 0 13px 10px;
  min-width: 0;
}

#plan-contrib-modal.cmf-boardroom .pcm-rail-benefit-field .pcm-toolbar-label {
  display: block;
  margin-bottom: 5px;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cmfb-ink-3);
}

#plan-contrib-modal.cmf-boardroom .pcm-rail-benefit-field .pcm-benefit-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

#plan-contrib-modal.cmf-boardroom .pcm-rail-benefit-field .pcm-benefit-tabs > * {
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--cmfb-border);
  background: var(--color-white);
  font-size: 11px;
  font-weight: 600;
  color: var(--cmfb-ink-2);
}

#plan-contrib-modal.cmf-boardroom
  .pcm-rail-benefit-field
  .pcm-benefit-tabs
  > :is(.active, .is-active) {
  border-color: var(--cmfb-blue);
  background: var(--cmf-visual-rail);
  color: var(--cmfb-blue-dark);
}

/* The pane is a split: the coverage-tier decision table on the left, the
   warning callout and the premium dock docked on the right. Stacked, the dock
   was overrunning the table it is meant to sit beside. The dock element itself
   is never recreated — the renderer holds `_premiumsUnsubscribe` on that exact
   node — so this only changes which grid track it occupies. */

/* Measured child list of .contrib-table-area (2026-08-21, capture-cli diag):
     .plan-contrib-modal-toolbar   the scope bar
     .contrib-sticky-header        the pane header
     .pcm-plan-rules               the linked-rule card
     .tab-panels                   the coverage-tier decision table
     .pcm-premiums-dock            the premium summary
   Every one of them is placed explicitly. Auto-placement is what put the dock
   on top of the rule card: two children with no assignment both landed in the
   second column of row 2 and overlapped. */

/* Rows 3 and 4 are the content band: the table spans both on the left, the
   rule card sizes to content on the right and the premium dock takes the
   remainder and scrolls. An `auto` row cannot be trusted to keep its content
   here — the grid is height-constrained, so over-subscribed auto rows get
   squeezed, which is exactly how a 190px scope bar rendered as a clipped 95px
   strip. min-content on row 2 is what refuses that squeeze. */
#plan-contrib-modal.cmf-boardroom .contrib-table-area {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr);
  grid-template-rows: min-content min-content auto minmax(0, 1fr) auto;
  gap: 11px 13px;
  padding: 13px 18px;
  align-content: stretch;
  overflow: hidden;
}

/* The frame names the plan FIRST, then offers the controls that act on it:
   pane header on row 1, scope bar on row 2. */
#plan-contrib-modal.cmf-boardroom .contrib-table-area > .contrib-sticky-header {
  grid-column: 1 / -1;
  grid-row: 1;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--cmfb-border);
  background: var(--color-white);
}

#plan-contrib-modal.cmf-boardroom .contrib-table-area > .plan-contrib-modal-toolbar {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  border: 1px solid var(--cmfb-border);
  border-radius: 8px;
  background: var(--cmfb-surface-2);
  padding: 9px 11px;
}

/* The reference scope bar is ONE row at ~89px. Ours measured 208px because it
   also carried the benefit switcher (now in the rail, where a facet belongs)
   and a full-sentence hint. Compressed to the frame's three groups. */
#plan-contrib-modal.cmf-boardroom
  .plan-contrib-modal-toolbar
  :is(.pcm-toolbar-label, .pcm-side-label) {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--cmfb-ink-3);
  white-space: nowrap;
}

/* Every group shrinks. `.pcm-same-types-control` measured 898px inside a 717px
   bar — wider than its container — which forced a row of its own and then
   overflowed it; a shrinkable basis is what folds the bar back to two rows. */
#plan-contrib-modal.cmf-boardroom
  .plan-contrib-modal-toolbar
  :is(.pcm-toolbar-field, .pcm-pay-periods, .pcm-same-all-label, .pcm-same-types-control) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  min-width: 0;
  flex: 0 1 auto;
}

/* The scope pills. The frame shows three — Current, Renewal, Proposed — so the
   Alternate pill is out of this frame's row; it stays in the accessibility
   tree because it is a real scope a case can use. Pills are tightened so
   MODEL + SCOPE fit one 717px row instead of wrapping to three. */
#plan-contrib-modal.cmf-boardroom .pcm-same-types-control {
  flex: 0 1 auto;
  flex-wrap: nowrap;
  overflow: hidden;
}

#plan-contrib-modal.cmf-boardroom .pcm-same-types-control label:has(input[value='alternate']),
#plan-contrib-modal.cmf-boardroom .pcm-same-types-control [data-plan-type='alternate'] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
}

#plan-contrib-modal.cmf-boardroom .pcm-same-types-control label {
  gap: 5px;
  padding: 2px 7px;
  font-size: 11px;
  white-space: nowrap;
}

#plan-contrib-modal.cmf-boardroom .pcm-same-types-control > * {
  min-width: 0;
}

#plan-contrib-modal.cmf-boardroom .pcm-pay-periods {
  flex: 0 1 auto;
}

#plan-contrib-modal.cmf-boardroom .pcm-pay-periods select {
  min-width: 0;
  width: auto;
  max-width: 118px;
}

#plan-contrib-modal.cmf-boardroom .pcm-pay-periods label {
  font-size: 10.5px;
  white-space: nowrap;
}

/* styles.html:2725 hides the linked-mirror and deduction-action controls in the
   scope bar only under `.pcm-has-left-stepper`, because Tiered mode promotes
   them into the selected-plan rule bar. Boardroom promotes them the same way
   (they are visible in .pcm-plan-rules) but has no stepper, so without this the
   scope bar renders a second copy — which is what took it from 89px to 208px.
   The canonical controls stay mounted as delegated writers, exactly as they do
   under the stepper. */

/* The linked-mirror and deduction-action controls stay VISIBLE in the scope
   bar. They are the canonical controls; `.pcm-plan-rules` is the promoted copy
   the pane used to show, and that copy is the one hidden — so the body gets its
   space back without anything becoming unreachable. Compressed to fit the row
   rather than removed. */
#plan-contrib-modal.cmf-boardroom .pcm-case-settings-panel > .pcm-linked-mirror-control,
#plan-contrib-modal.cmf-boardroom .pcm-case-settings-panel > .pcm-deduction-actions {
  order: 5;
  flex: 0 1 auto;
  min-width: 0;
  gap: 6px;
  font-size: 11px;
}

/* Advisory sentences, not controls. They live INSIDE .pcm-same-types-control,
   so they were stretching that group to 683px and taking a whole row that the
   frame's scope bar does not have. Removed from the visual flow but kept in
   the accessibility tree — a screen reader still reads the explanation, and
   `display: none` would have taken that away too. */
#plan-contrib-modal.cmf-boardroom
  .plan-contrib-modal-toolbar
  :is(.pcm-same-types-note, .pcm-partial-types-hint) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

#plan-contrib-modal.cmf-boardroom .contrib-table-area > .tab-panels {
  grid-column: 1;
  grid-row: 4;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 0;
}

#plan-contrib-modal.cmf-boardroom .contrib-table-area > .pcm-tier-filterbar {
  grid-column: 1;
  grid-row: 3;
  align-self: start;
  min-width: 0;
}

/* Anything else the renderer drops into the pane spans the full width beneath
   the table rather than auto-placing into the dock's cell. */
#plan-contrib-modal.cmf-boardroom
  .contrib-table-area
  > :not(
    .contrib-sticky-header,
    .plan-contrib-modal-toolbar,
    .tab-panels,
    .pcm-plan-rules,
    .pcm-premiums-dock,
    .pcm-autofill-feedback,
    .pcm-cap-warning,
    .pcm-tier-filterbar
  ) {
  grid-column: 1 / -1;
  grid-row: 5;
}

/* ---- the decision table --------------------------------------------------
   Four columns: coverage tier, what it costs today, what it will cost, and what
   that does to the employee. Two sections — monthly premium (read-only) and
   employer contribution (the canonical editors). Transcribed from the frame's
   .m-wst geometry. */
#plan-contrib-modal.cmf-boardroom .pcm-decision-table {
  border: 1px solid var(--cmfb-border);
  border-radius: 8px;
  overflow: hidden;
  font-size: 11.5px;
}

#plan-contrib-modal.cmf-boardroom .pcm-decision-table :is(th, td) {
  padding: 4px 9px;
  border: 0;
  border-bottom: 1px solid #eef2f7;
  text-align: right;
  white-space: nowrap;
}

#plan-contrib-modal.cmf-boardroom .pcm-decision-table :is(th, td):first-child {
  text-align: left;
  width: 27%;
}

/* The proposed column contains two real controls, while Current and Delta are
   read-only figures. Fixed column budgets prevent the type selector and amount
   field from painting on top of each other in large cases. */
#plan-contrib-modal.cmf-boardroom .pcm-decision-table thead th:nth-child(2) {
  width: 19%;
}

#plan-contrib-modal.cmf-boardroom .pcm-decision-table thead th:nth-child(3) {
  width: 34%;
}

#plan-contrib-modal.cmf-boardroom .pcm-decision-table thead th:nth-child(4) {
  width: 20%;
}

#plan-contrib-modal.cmf-boardroom .pcm-decision-table thead th {
  background-color: var(--cmf-visual-rail);
  background-image: linear-gradient(180deg, #f7faff, var(--cmf-visual-rail));
  border-bottom: 1px solid var(--cmf-visual-rule);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cmfb-ink-2);
  vertical-align: bottom;
}

#plan-contrib-modal.cmf-boardroom .pcm-decision-table .pcm-col-role {
  display: block;
  font-size: 8.5px;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--cmfb-ink-3);
}

#plan-contrib-modal.cmf-boardroom .pcm-decision-table tr.pcm-sec td {
  background: var(--cmf-visual-rail);
  font-size: 9.5px;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cmfb-ink-3);
  padding: 4px 9px;
  text-align: left;
}

#plan-contrib-modal.cmf-boardroom .pcm-decision-table td.money {
  font-family: var(--cmfb-num);
  font-variant-numeric: tabular-nums;
}

#plan-contrib-modal.cmf-boardroom .pcm-decision-table .pcm-tier-enrollment {
  margin-left: 4px;
  color: var(--cmfb-ink-3);
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
}

#plan-contrib-modal.cmf-boardroom .pcm-decision-table .pcm-ee-delta {
  font-weight: 700;
}

#plan-contrib-modal.cmf-boardroom .pcm-decision-table .pcm-ee-delta.is-increase {
  color: var(--cmf-visual-danger);
  background: var(--cmf-visual-signal-tint);
}

#plan-contrib-modal.cmf-boardroom .pcm-decision-table .pcm-ee-delta.is-decrease {
  color: var(--cmf-visual-ready);
  background: var(--cmf-visual-ready-tint);
}

#plan-contrib-modal.cmf-boardroom .pcm-decision-table .pcm-ee-delta.is-neutral {
  color: var(--cmfb-ink-2);
}

#plan-contrib-modal.cmf-boardroom .pcm-decision-table tr.pcm-er-row td:first-child {
  font-weight: 650;
  background: var(--cmf-visual-rail);
}

/* One line, not two: the type select and the amount sit side by side or the
   editable cell doubles the row height the frame draws. */
#plan-contrib-modal.cmf-boardroom .pcm-decision-table :is(.pcm-er-edit, .pcm-ee-edit) {
  padding: 3px 6px;
  white-space: nowrap;
}

#plan-contrib-modal.cmf-boardroom .pcm-decision-table .pcm-er-edit {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(76px, 1fr);
  align-items: center;
  gap: 4px;
  padding-left: 16px;
  background: var(--cmf-visual-command-tint);
  box-shadow: inset 0 0 0 1px var(--cmf-visual-command-tint);
}

#plan-contrib-modal.cmf-boardroom .pcm-decision-table .pcm-er-edit > * {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

#plan-contrib-modal.cmf-boardroom .pcm-decision-table :is(.pcm-er-edit, .pcm-ee-edit) .input-group,
#plan-contrib-modal.cmf-boardroom
  .pcm-decision-table
  :is(.pcm-er-edit, .pcm-ee-edit)
  .input-group-suffix {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

#plan-contrib-modal.cmf-boardroom .pcm-decision-table .pcm-er-edit select {
  width: 100%;
  min-width: 0;
  margin-right: 0;
  padding: 0 2px;
  font-size: 10px;
}

/* `.pcm-cmf-workbench` is here for weight only: the adapter's
   `#plan-contrib-modal .plan-specific-table :where(.cmf-form-input,
   .total-premium-cell)` is (1,3,0) and was taking font-variant-numeric off
   these cells, so the tier figures stopped lining up. (1,3,1) restores it
   without !important. */
#plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .pcm-decision-table input {
  width: 72px;
  min-width: 0;
  height: 26px;
  padding: 0 6px;
  font-size: 11.5px;
  text-align: right;
  font-family: var(--cmfb-num);
  font-variant-numeric: tabular-nums;
}

/* The editable proposed cell carries the frame's staged marker. */
#plan-contrib-modal.cmf-boardroom .pcm-decision-table .pcm-er-edit::before,
#plan-contrib-modal.cmf-boardroom .pcm-decision-table .pcm-er-total-proposed::before {
  content: '◆';
  position: absolute;
  left: 5px;
  color: var(--cmf-visual-staged);
  font-size: 7px;
  line-height: 1;
}

#plan-contrib-modal.cmf-boardroom .pcm-decision-table .pcm-er-total-row > * {
  padding-top: 7px;
  padding-bottom: 7px;
  border-top: 2px solid #334155;
  border-bottom: 0;
  background: var(--color-white);
  font-weight: 750;
}

#plan-contrib-modal.cmf-boardroom .pcm-decision-table .pcm-er-total-row > th:first-child {
  white-space: normal;
}

#plan-contrib-modal.cmf-boardroom .pcm-decision-table .pcm-total-note {
  display: block;
  margin-top: 1px;
  color: var(--cmfb-ink-3);
  font-size: 8.5px;
  font-weight: 500;
  line-height: 1.15;
}

#plan-contrib-modal.cmf-boardroom .pcm-decision-table .pcm-er-total-proposed {
  position: relative;
  padding-left: 16px;
  background: color-mix(in srgb, var(--cmf-visual-plan-proposed) 12%, var(--cmf-visual-surface));
  box-shadow: inset 0 0 0 1px var(--cmf-visual-plan-proposed);
}

/* The decision table needs its columns to breathe: at 411px with five columns
   the ER TYPE select collapsed to 40px and rendered "Per…" over its own value.
   Fixed layout with a stated first column gives the money columns a floor. */
#plan-contrib-modal.cmf-boardroom .tab-panels table {
  table-layout: fixed;
  width: 100%;
}

#plan-contrib-modal.cmf-boardroom .tab-panels :is(th, td) {
  padding: 5px 7px;
  overflow: hidden;
  text-overflow: ellipsis;
}

#plan-contrib-modal.cmf-boardroom .tab-panels :is(th, td):first-child {
  width: 26%;
}

#plan-contrib-modal.cmf-boardroom .pcm-decision-table thead th:first-child {
  width: 27%;
}

#plan-contrib-modal.cmf-boardroom .tab-panels select {
  width: 100%;
  min-width: 0;
  height: 26px;
  padding: 0 2px;
  font-size: 11px;
}

#plan-contrib-modal.cmf-boardroom .tab-panels input {
  width: 100%;
  min-width: 0;
  height: 26px;
  padding: 0 6px;
  font-size: 11.5px;
  text-align: right;
}

/* The premium dock's own table has to shrink too, or it pushes a horizontal
   scrollbar through a 307px column and clips "TOTAL PREMIUM" to "TO…". */
#plan-contrib-modal.cmf-boardroom .pcm-premiums-dock table {
  table-layout: fixed;
  width: 100%;
  font-size: 10.5px;
}

/* `overflow-wrap: anywhere` split "TOTAL PREMIUM" mid-word into "PREMIU / M".
   Wrap between words only and let the type shrink instead. */
#plan-contrib-modal.cmf-boardroom .pcm-premiums-dock :is(th, td) {
  box-sizing: border-box;
  padding: 4px 5px;
  font-size: 10px;
  overflow: hidden;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}

#plan-contrib-modal.cmf-boardroom .pcm-premiums-dock {
  overflow-x: hidden;
}

#plan-contrib-modal.cmf-boardroom .pcm-premiums-dock :is(th, td):first-child {
  width: 22%;
}

#plan-contrib-modal.cmf-boardroom .pcm-premiums-dock :is(th, td):not(:first-child) {
  width: 26%;
  font-variant-numeric: tabular-nums lining-nums;
}

/* The frame's right column is a warning callout above the Premium Summary —
   NOT a rule editor. The linked-rule card moves to the foot of the left
   column, under the decision table, where its canonical controls stay in
   normal reading order and keyboard order and nothing about their wiring
   changes; the plan's linked rule is already stated in the pane subtitle. */

/* The linked-rule strip is the pane's PROMOTED COPY of controls that also live
   in the scope bar; the frame states the plan's linked rule in the subtitle and
   gives this space to the decision table. Hidden here, never orphaned: the
   canonical controls are the ones UIManager relocates into the header overflow
   menu, so every one of them stays reachable. */
#plan-contrib-modal.cmf-boardroom .contrib-table-area > .pcm-plan-rules {
  display: none;
  grid-column: 1;
  grid-row: 5;
  align-self: end;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--cmfb-border);
  border-radius: 8px;
  background: var(--cmfb-surface-2);
  font-size: 11.5px;
  line-height: 1.35;

  /* No `display` here — the block above sets `display: none`, and repeating a
     later `display: flex` in the same rule silently undid it. */
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px 12px;
  height: 40px;
  overflow: auto hidden;
  padding: 0 12px;
}

#plan-contrib-modal.cmf-boardroom .pcm-plan-rules > * {
  flex: 0 0 auto;
}

/* The right column's callout slot. `.pcm-autofill-feedback` is the only
   warning the live surface actually produces; it renders here when it has
   something to say and collapses to nothing when it does not. The frame's
   "Family tier holds at $1,020.00" cap warning has no producer in the live
   modal — that is recorded as a residual, not faked. */
#plan-contrib-modal.cmf-boardroom .contrib-table-area > .pcm-cap-warning {
  grid-column: 2;
  grid-row: 3;
  align-self: start;
  min-width: 0;
  margin: 0;
  padding: 9px 12px;
  border: 1px solid var(--cmfb-warn-bd);
  border-radius: 8px;
  background: var(--cmfb-warn-bg);
  color: var(--cmfb-warn-ink);
  font-size: 11.5px;
  line-height: 1.35;
  white-space: normal;
}

#plan-contrib-modal.cmf-boardroom .pcm-cap-short {
  display: none;
}

#plan-contrib-modal.cmf-boardroom .pcm-footer-tier-count:empty {
  display: none;
}

#plan-contrib-modal.cmf-boardroom .pcm-footer-tier-count {
  font-size: 11.5px;
  color: var(--cmfb-ink-2);
}

#plan-contrib-modal.cmf-boardroom .pcm-cap-warning b {
  display: block;
  margin-bottom: 3px;
  font-weight: 750;
}

#plan-contrib-modal.cmf-boardroom .pcm-cap-warning::before {
  content: '▲ ';
}

#plan-contrib-modal.cmf-boardroom .contrib-table-area > .pcm-autofill-feedback {
  grid-column: 2;
  grid-row: 3;
  align-self: start;
  min-width: 0;
  margin: 0;
  padding: 9px 12px;
  border: 1px solid var(--cmfb-warn-bd);
  border-radius: 8px;
  background: var(--cmfb-warn-bg);
  color: var(--cmfb-warn-ink);
  font-size: 11.5px;
  line-height: 1.35;
}

#plan-contrib-modal.cmf-boardroom .contrib-table-area > .pcm-autofill-feedback:empty {
  display: none;
}

#plan-contrib-modal.cmf-boardroom .pcm-plan-rules :is(.pcm-side-label, .pcm-toolbar-label) {
  font-size: 10px;
  letter-spacing: 0.07em;
}

#plan-contrib-modal.cmf-boardroom .pcm-plan-rules select {
  height: 28px;
  font-size: 11.5px;
}

#plan-contrib-modal.cmf-boardroom .contrib-table-area > .pcm-premiums-dock {
  grid-column: 2;
  grid-row: 4;
  align-self: start;
  min-width: 0;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--cmfb-border);
  border-radius: 8px;
  background: var(--cmfb-surface-2);
  padding: 11px 13px;
}

/* The scope bar is a single wrapping row of controls, not a form column. */

/* The frame has no "CASE SETTINGS" disclosure header — the scope bar IS the
   controls. Boardroom already defaults the panel open, so the toggle row is
   pure height. Hidden with aria-hidden rather than removed so the binding in
   __bindPcmCaseSettingsDisclosure keeps its element and never null-paths. */
#plan-contrib-modal.cmf-boardroom .pcm-case-settings-toggle {
  display: none;
}

/* Carries the two extra shell classes purely for WEIGHT. The scope bar is
   always open in Boardroom -- the disclosure toggle above is display:none, so
   if this loses, five controls stay mounted with offsetHeight 0 and become
   unreachable. The legacy adapter's `.plan-contrib-modal-toolbar.is-open
   .pcm-case-settings-panel` is (1,3,0); this used to win with !important and
   now wins as (1,4,0) instead. Weight, not a new scope: every one of these
   classes is already on this modal. */
#plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench.pcm-native-workbench .pcm-case-settings-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 0;
  border-top: 0;
  min-width: 0;
}

/* Row 1: MODEL, then SCOPE (same-for-all + the plan-type pills).
   Row 2: PAY PERIODS alone, right-aligned. `flex-basis: 100%` is what forces
   the break; `margin-left: auto` is what pushes it right. */
#plan-contrib-modal.cmf-boardroom .pcm-case-settings-panel > .pcm-toolbar-field {
  order: 1;
}

#plan-contrib-modal.cmf-boardroom .pcm-case-settings-panel > .pcm-same-all-label {
  order: 2;
}

#plan-contrib-modal.cmf-boardroom .pcm-case-settings-panel > .pcm-same-types-control {
  order: 3;
}

#plan-contrib-modal.cmf-boardroom .pcm-case-settings-panel > .pcm-pay-periods {
  order: 4;
  flex: 0 0 100%;
  justify-content: flex-end;
  margin-left: auto;
}

#plan-contrib-modal.cmf-boardroom .pcm-case-settings-panel > * {
  min-width: 0;
}

#plan-contrib-modal.cmf-boardroom .pcm-model-toggle-btns {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  background: #eef2f7;
  border-radius: 999px;
}

#plan-contrib-modal.cmf-boardroom .pcm-model-btn {
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--cmfb-ink-2);
}

#plan-contrib-modal.cmf-boardroom .pcm-model-btn:is(.active, .is-active) {
  background: var(--color-white);
  color: var(--cmfb-blue-dark);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--cmf-visual-ink) 10%, transparent);
}

/* Rail rows: icon | name over caption | chip — the .m-railitem geometry. The
   five children are flex siblings in the DOM, so an explicit two-row grid is
   what stops the caption stealing the name's width and wrapping it to three
   lines behind the chip. */
#plan-contrib-modal.cmf-boardroom .contrib-plan-selector .tab {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 0 10px;
  align-items: center;
}

#plan-contrib-modal.cmf-boardroom .contrib-plan-selector .tab > .cmf-wb-rail-icon {
  grid-column: 1;
  grid-row: 1 / span 2;
}

#plan-contrib-modal.cmf-boardroom .contrib-plan-selector .tab > .plan-tab-name {
  grid-column: 2;
  grid-row: 1;
}

#plan-contrib-modal.cmf-boardroom .contrib-plan-selector .tab > .pcm-rail-caption {
  grid-column: 2;
  grid-row: 2;
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--cmfb-ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The trailing slot carries EITHER the scope chip or the plan's ER cost —
   shell-inline-27 suppresses Global/Override chips as noise and shows the
   number instead. Both land in the same cell so the row is 52px either way. */
#plan-contrib-modal.cmf-boardroom .contrib-plan-selector .tab > .cmf-wb-chip,
#plan-contrib-modal.cmf-boardroom .contrib-plan-selector .tab > .pcm-rail-amt {
  grid-column: 3;
  grid-row: 1 / span 2;
  justify-self: end;
  text-align: right;
  white-space: nowrap;
}

#plan-contrib-modal.cmf-boardroom .contrib-plan-selector .tab > .pcm-rail-amt {
  display: block;
  font-size: 11.5px;
  line-height: 1.25;
}

#plan-contrib-modal.cmf-boardroom .contrib-plan-selector .tab > .pcm-rail-amt b {
  display: block;
  font-family: var(--cmfb-num);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 700;
}

#plan-contrib-modal.cmf-boardroom .contrib-plan-selector .tab > .pcm-rail-amt i {
  display: block;
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cmfb-ink-3);
}

#plan-contrib-modal.cmf-boardroom .contrib-plan-selector .tab > .cmf-wb-dot {
  display: none;
}

@media (width <= 640px) {
  /* The factory-owned PCM rail is declared after CMF's generic phone rules,
     so repeat the responsive composition at the same ownership boundary.
     Without this, the desktop 248px track wins by source order and leaves the
     editor only ~118px wide on a 390px phone. */
  #plan-contrib-modal.cmf-boardroom.pcm-factory-rail > .cmf-workbench-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  #plan-contrib-modal.cmf-boardroom.pcm-factory-rail > .cmf-workbench-body > .cmf-wb-rail {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    max-height: 70px;
    overflow: hidden;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-factory-rail
    > .cmf-workbench-body
    > .cmf-wb-rail
    > .cmf-wb-rail-list {
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    align-content: normal;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    gap: 6px;
    padding: 7px 9px;
    overflow: auto hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-factory-rail
    > .cmf-workbench-body
    > .cmf-wb-rail
    > .cmf-wb-rail-list::-webkit-scrollbar {
    display: none;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-factory-rail
    > .cmf-workbench-body
    > .cmf-wb-rail
    > .cmf-wb-rail-list
    > .cmf-wb-rail-item {
    flex: 0 0 min(220px, 78vw);
    width: min(220px, 78vw);
    min-width: 0;
    margin: 0;
    scroll-snap-align: start;
  }

  /* The desktop split is declared !important to beat styles.html's own
     !important rule, so the phone override has to be !important too — without
     it the 248px rail track survives at 390px and squeezes the pane to ~80px,
     which renders the plan name one letter per line. */
  #plan-contrib-modal.cmf-boardroom .contrib-split-layout.cmf-workbench-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  #plan-contrib-modal.cmf-boardroom .pcm-decision-table :is(th, td) {
    padding: 4px 6px;
  }

  /* ---- the phone composition (<=640px) ------------------------------------
     Built from the live DOM, not from assumption:
       - `data-pcm-metric` sits on the metric's CHILD, so the tiles are hidden
         by their parent's position, `.pcm-metric:nth-child(n)`.
       - the eyebrow/title pair is relabelled with ::after rather than replaced,
         so the real nodes and their ids stay put.
       - `.tab-group` / `.tabs` are flattened with `display: contents` so the
         plan chips become one horizontal strip with proposed plans first.
       - each contribution row is a 3-column grid: tier name spans the card,
         then Current / Proposed / employee change sit side by side. Per-cell `block`
         made a single card hundreds of pixels tall.
     The canonical workbench class supplies the needed specificity; this block
     does not need escalation flags to own the phone presentation. */

  /* The pane owns the sheet's ONLY inset. Grouping the body with it gave both
     13px and left the content 278px wide inside a 390px modal. */
  #plan-contrib-modal.cmf-boardroom .pcm-cmf-body {
    display: flex;
    flex-direction: column;

    /* The parent keeps a 12px inset of its own; reclaim it so the pane's 13px
       is the sheet's ONLY margin and cards run x13..377. */
    width: calc(100% + 24px);
    margin-left: -12px;
    margin-right: -12px;
    padding: 0;
    overflow: hidden;
  }

  #plan-contrib-modal.cmf-boardroom .contrib-table-area {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 13px;
    overflow-y: auto;
  }

  #plan-contrib-modal.cmf-boardroom :is(.contrib-table-area, .pcm-cmf-body) > * {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    max-height: none;
    min-width: 0;
  }

  #plan-contrib-modal.cmf-boardroom
    :is(.contrib-table-area, .pcm-cmf-body)
    > .contrib-sticky-header {
    order: 1;
  }

  #plan-contrib-modal.cmf-boardroom
    :is(.contrib-table-area, .pcm-cmf-body)
    > .plan-contrib-modal-toolbar {
    order: 2;
    max-height: 76px;
    overflow: hidden;
  }

  #plan-contrib-modal.cmf-boardroom :is(.contrib-table-area, .pcm-cmf-body) > .pcm-tier-filterbar {
    order: 3;
  }

  #plan-contrib-modal.cmf-boardroom :is(.contrib-table-area, .pcm-cmf-body) > .pcm-cap-warning {
    order: 4;
  }

  #plan-contrib-modal.cmf-boardroom :is(.contrib-table-area, .pcm-cmf-body) > .tab-panels {
    order: 5;
    overflow: visible;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .pcm-premiums-dock,
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .pcm-plan-rules,
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .pcm-pay-periods {
    display: none;
  }

  /* The whole legacy wrapper chain keeps its own width/inset, which left the
     sheet 278px wide inside a 390px modal (x43..349). Force each link to full
     width with no inset, then put the sheet's only 13px padding on the pane so
     cards run x13..377. */
  #plan-contrib-modal.cmf-boardroom
    :is(
      .plan-contrib-modal-body,
      .plan-contrib-modal-grid,
      .plan-contrib-left,
      .wizard-contribution-model,
      .pcm-tiered-settings,
      .plan-specific-contribution-container,
      .contrib-split-layout
    ) {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  /* ---- header ---- */
  #plan-contrib-modal.cmf-boardroom > .cmf-header {
    min-height: 61px;
    padding: 8px 12px;
    flex-wrap: nowrap;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench [id='plan-contrib-walkthrough-btn'],
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .pcm-header-overflow,
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .pcm-header-overflow-menu,
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .cmf-header-actions .cmf-btn,
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .cmf-subtitle,
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .pcm-metric:nth-child(1),
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .pcm-metric:nth-child(2) {
    display: none;
  }

  #plan-contrib-modal.cmf-boardroom .cmf-close {
    display: inline-flex;
  }

  #plan-contrib-modal.cmf-boardroom .cmf-header-content {
    flex: 1 1 auto;
    min-width: 120px;
    max-width: 145px;
  }

  #plan-contrib-modal.cmf-boardroom .cmf-header-info {
    min-width: 0;
  }

  /* Relabel in place: the nodes, their ids and their text stay in the DOM for
     assistive tech; only the rendered glyphs change. */
  #plan-contrib-modal.cmf-boardroom .cmf-header-eyebrow {
    display: block;
    font-size: 0;
    letter-spacing: 0;
  }

  #plan-contrib-modal.cmf-boardroom .cmf-header-eyebrow::after {
    content: 'STEP 4';
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: rgb(255 255 255 / 55%);
  }

  #plan-contrib-modal.cmf-boardroom .cmf-title {
    font-size: 0;
  }

  #plan-contrib-modal.cmf-boardroom .cmf-title::after {
    content: 'Contributions';
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--color-white);
  }

  #plan-contrib-modal.cmf-boardroom > .cmf-header > .cmf-wb-metrics {
    flex: 0 0 auto;
    margin-left: auto;
    margin-right: 8px;
    overflow: visible;
  }

  #plan-contrib-modal.cmf-boardroom .cmf-wb-metric-value {
    font-size: 13px;
  }

  #plan-contrib-modal.cmf-boardroom .pcm-metric,
  #plan-contrib-modal.cmf-boardroom .cmf-wb-metric {
    min-width: 0;

    /* 59px clipped "+$686.00" into its neighbour; 68px with a 13px value is
       the smallest pair that keeps both tiles legible beside the close button. */
    max-width: 68px;
    padding: 0 6px;
  }

  /* Keep a long signed currency delta (for example −$78,182) inside its tile
     while preserving the same 136px two-metric band from the proposed phone
     frame. The configured count needs less room, so give those pixels to the
     decision metric instead of letting the values paint over each other. */
  #plan-contrib-modal.cmf-boardroom .pcm-metric-headline {
    flex: 0 0 80px;
    width: 80px;
    max-width: 80px;
    padding-inline: 2px;
  }

  #plan-contrib-modal.cmf-boardroom .pcm-metric-configured {
    flex: 0 0 56px;
    width: 56px;
    max-width: 56px;
    padding-inline: 2px;
  }

  /* Large real cases can carry five-figure monthly deltas and two-digit plan
     counts. Their full desktop strings cannot fit the proposed 136px phone
     band. Render the writer's compact presentation value here while keeping
     the exact text in the DOM and desktop header. */
  #plan-contrib-modal.cmf-boardroom
    :is(.pcm-metric-headline, .pcm-metric-configured)
    .cmf-wb-metric-value {
    font-size: 0;
  }

  #plan-contrib-modal.cmf-boardroom
    :is(.pcm-metric-headline, .pcm-metric-configured)
    .cmf-wb-metric-value::after {
    content: attr(data-pcm-mobile-value);
    font-size: 13px;
  }

  #plan-contrib-modal.cmf-boardroom .cmf-wb-metric-label {
    font-size: 8px;
    letter-spacing: 0.06em;
    white-space: nowrap;
    overflow: hidden;
  }

  /* "MONTHLY CHANGE" and "CONFIGURED" overlap at 68px; the frame's phone header
     shortens them. The full text stays in the DOM for assistive tech. */
  #plan-contrib-modal.cmf-boardroom .pcm-metric-headline .cmf-wb-metric-label {
    font-size: 0;
  }

  #plan-contrib-modal.cmf-boardroom .pcm-metric-headline .cmf-wb-metric-label::after {
    content: 'CHANGE';
    font-size: 8px;
    letter-spacing: 0.06em;
  }

  #plan-contrib-modal.cmf-boardroom .pcm-metric-configured .cmf-wb-metric-label {
    font-size: 0;
  }

  #plan-contrib-modal.cmf-boardroom .pcm-metric-configured .cmf-wb-metric-label::after {
    content: 'SET';
    font-size: 8px;
    letter-spacing: 0.06em;
  }

  #plan-contrib-modal.cmf-boardroom .cmf-header-icon {
    display: flex;
    width: 28px;
    height: 28px;
  }

  /* ---- plan chips ---- */
  #plan-contrib-modal.cmf-boardroom .contrib-plan-selector {
    max-height: 53px;
    min-height: 53px;
    overflow: auto hidden;
    border-right: 0;
    border-bottom: 1px solid var(--cmfb-border);
  }

  #plan-contrib-modal.cmf-boardroom .contrib-plan-selector .contrib-plan-selector-scroll {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 6px;
    padding: 8px 13px;
  }

  /* display:contents flattens the plan-type grouping into the strip without
     touching the groups themselves. `.collapsed .tabs` has to be re-shown or a
     collapsed group takes its plans with it. */
  #plan-contrib-modal.cmf-boardroom .contrib-plan-selector .tab-group,
  #plan-contrib-modal.cmf-boardroom .contrib-plan-selector .tabs,
  #plan-contrib-modal.cmf-boardroom .contrib-plan-selector .tab-group.collapsed .tabs {
    display: contents;
  }

  #plan-contrib-modal.cmf-boardroom .contrib-plan-selector .tab {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    width: auto;
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    padding: 5px 11px;
    border-radius: 999px;
    margin: 0;
    order: 1;
    line-height: 1;
    grid-template-rows: auto;
  }

  #plan-contrib-modal.cmf-boardroom .contrib-plan-selector .tab[data-plan-type='proposed'] {
    order: 1;
  }

  #plan-contrib-modal.cmf-boardroom .contrib-plan-selector .tab[data-plan-id='__global'],
  #plan-contrib-modal.cmf-boardroom .contrib-plan-selector .tab > .pcm-rail-caption,
  #plan-contrib-modal.cmf-boardroom .contrib-plan-selector .tab > .pcm-rail-amt,
  #plan-contrib-modal.cmf-boardroom .contrib-plan-selector .tab > .cmf-wb-rail-icon,
  #plan-contrib-modal.cmf-boardroom .contrib-plan-selector .plan-type-badge,
  #plan-contrib-modal.cmf-boardroom .contrib-plan-selector .tab-group-title,
  #plan-contrib-modal.cmf-boardroom .pcm-rail-heading,
  #plan-contrib-modal.cmf-boardroom .pcm-rail-meter,
  #plan-contrib-modal.cmf-boardroom .pcm-rail-note,
  #plan-contrib-modal.cmf-boardroom .pcm-rail-benefit-field,
  #plan-contrib-modal.cmf-boardroom .cmf-wb-search {
    display: none;
  }

  #plan-contrib-modal.cmf-boardroom .contrib-plan-selector .tab > .plan-tab-name {
    display: inline;
    font-size: 12px;
    white-space: nowrap;
  }

  /* ---- contribution cards ---- */
  #plan-contrib-modal.cmf-boardroom .pcm-decision-table thead,
  #plan-contrib-modal.cmf-boardroom .pcm-decision-table tr.pcm-prem-row,
  #plan-contrib-modal.cmf-boardroom .pcm-decision-table tr.pcm-sec,
  #plan-contrib-modal.cmf-boardroom .pcm-decision-table .pcm-er-edit select,
  #plan-contrib-modal.cmf-boardroom .pcm-decision-table tr.pcm-er-row[data-tier-id='child'] {
    display: none;
  }

  #plan-contrib-modal.cmf-boardroom .pcm-decision-table,
  #plan-contrib-modal.cmf-boardroom .pcm-decision-table tbody {
    display: block;
    width: 100%;
    border: 0;
  }

  #plan-contrib-modal.cmf-boardroom .pcm-decision-table tr.pcm-er-row {
    display: grid;
    grid-template:
      'tier tier tier' 35px
      'current proposed delta' minmax(45px, min-content) /
      repeat(3, minmax(0, 1fr));
    align-items: center;
    min-height: 80px;
    height: auto;
    border: 1px solid var(--cmfb-border);
    border-radius: 10px;
    background: var(--color-white);
    margin-bottom: 8px;
    overflow: visible;
  }

  #plan-contrib-modal.cmf-boardroom .pcm-decision-table tr.pcm-er-row td {
    box-sizing: border-box;
    display: block;
    border: 0;
    padding: 3px 10px;
    text-align: left;
    background: var(--color-white);
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #plan-contrib-modal.cmf-boardroom .pcm-decision-table tr.pcm-er-row td[data-col='Coverage tier'] {
    grid-column: 1 / -1;
    background: var(--cmfb-surface-2);
    border-bottom: 1px solid #eef2f7;
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #plan-contrib-modal.cmf-boardroom .pcm-decision-table tr.pcm-er-row td[data-col='Current'] {
    grid-column: 1;
  }

  #plan-contrib-modal.cmf-boardroom .pcm-decision-table tr.pcm-er-row td[data-col='Proposed'] {
    grid-column: 2;
    box-shadow: none;
  }

  #plan-contrib-modal.cmf-boardroom
    .pcm-decision-table
    tr.pcm-er-row
    td[data-col='Employee / mo change'] {
    grid-column: 3;
  }

  #plan-contrib-modal.cmf-boardroom
    .pcm-decision-table
    td[data-col]:not([data-col='Coverage tier'])::before {
    content: attr(data-col);
    display: block;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cmfb-ink-3);
  }

  #plan-contrib-modal.cmf-boardroom .pcm-decision-table input {
    width: 100%;
    height: 24px;
  }

  /* The panel wrappers between .tab-panels and the table each contribute their
     own inset, which is what left a 250px card inside a 366px sheet and
     truncated every tier name to "Em…". */
  #plan-contrib-modal.cmf-boardroom .tab-panels,
  #plan-contrib-modal.cmf-boardroom .tab-panel {
    padding: 0;
    margin: 0;
    width: 100%;
    border: 0;
    background: transparent;
  }

  /* Commit bar: one summary line, then the two actions side by side. Stacked
     buttons cost 116px where the frame spends 80. */
  #plan-contrib-modal.cmf-boardroom > .cmf-footer {
    min-height: 80px;
    max-height: 80px;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 8px 13px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench > .cmf-footer .cmf-footer-right {
    display: grid;
    flex-direction: row;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
  }

  #plan-contrib-modal.cmf-boardroom > .cmf-footer .cmf-btn {
    padding: 7px 10px;
    font-size: 12px;
  }

  /* The scope pills do not fit a 390px scope bar; Model + Same-all is what the
     frame's phone card carries. The control stays in the accessibility tree. */
  #plan-contrib-modal.cmf-boardroom .pcm-same-types-control {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  #plan-contrib-modal.cmf-boardroom .tab-panel.active {
    padding: 0;
  }

  #plan-contrib-modal.cmf-boardroom .pcm-decision-table {
    width: 100%;
  }

  /* Card geometry: the tier name spans the card at 35px, then Current /
     Proposed / employee change sit in three equal 45px columns — 80px total, the
     frame's card height. Without the explicit span the first cell took a third
     of the grid and the card grew to 137px. */
  #plan-contrib-modal.cmf-boardroom .pcm-decision-table tr.pcm-er-row td:first-child {
    grid-column: 1 / -1;
    width: auto;
    height: 35px;
    display: flex;
    align-items: center;
  }

  #plan-contrib-modal.cmf-boardroom .pcm-decision-table tr.pcm-er-row td:nth-child(2) {
    grid-column: 1;
  }

  #plan-contrib-modal.cmf-boardroom .pcm-decision-table tr.pcm-er-row td:nth-child(3) {
    grid-column: 2;
  }

  #plan-contrib-modal.cmf-boardroom .pcm-decision-table tr.pcm-er-row td:nth-child(4) {
    grid-column: 3;
  }

  #plan-contrib-modal.cmf-boardroom .pcm-decision-table tr.pcm-er-row td:not(:first-child) {
    min-height: 45px;
    height: auto;
  }

  /* The proposed cell is money: show its currency prefix rather than a bare
     number floating in the card. */
  #plan-contrib-modal.cmf-boardroom .pcm-decision-table .pcm-er-edit .input-group-text {
    display: inline;
    font-size: 11px;
    color: var(--cmfb-ink-2);
  }

  /* Chips: proposed plans lead. `.plan-type-badge.type-proposed` is the marker
     the renderer already stamps on the row. */
  #plan-contrib-modal.cmf-boardroom .contrib-plan-selector .tab:has(.type-proposed) {
    order: 0;
  }

  #plan-contrib-modal.cmf-boardroom .pcm-same-all-label {
    display: flex;
    position: static;
    width: auto;
    height: 24px;
    margin: 0;
    clip-path: none;
    overflow: visible;
    order: 2;
    flex: 0 0 100%;
    font-size: 11.5px;
  }

  #plan-contrib-modal.cmf-boardroom > .cmf-footer .cmf-footer-left {
    justify-content: center;
    font-size: 11px;
  }

  #plan-contrib-modal.cmf-boardroom .pcm-decision-table td[data-col='Coverage tier'] {
    grid-area: tier;
    width: auto;
  }

  #plan-contrib-modal.cmf-boardroom .pcm-decision-table td[data-col='Current'] {
    grid-area: current;
  }

  #plan-contrib-modal.cmf-boardroom .pcm-decision-table td[data-col='Proposed'] {
    grid-area: proposed;
  }

  #plan-contrib-modal.cmf-boardroom .pcm-decision-table td[data-col='Employee / mo change'] {
    grid-area: delta;
  }

  /* Header: the icon carries the frame's glyph. */
  #plan-contrib-modal.cmf-boardroom .cmf-header-icon > i {
    display: none;
  }

  #plan-contrib-modal.cmf-boardroom .cmf-header-icon::after {
    content: '$';
    font-size: 14px;
    font-weight: 700;
    color: var(--color-white);
  }

  /* Warning: the short copy only. */
  #plan-contrib-modal.cmf-boardroom .pcm-cap-long {
    display: none;
  }

  #plan-contrib-modal.cmf-boardroom .pcm-cap-short {
    display: block;
  }

  /* The value cells stack their own label above the number. As blocks with a
     block ::before and `overflow: hidden`, the number was pushed past the 45px
     row and clipped away entirely — labels with no values. */
  #plan-contrib-modal.cmf-boardroom
    .pcm-decision-table
    tr.pcm-er-row
    td:not([data-col='Coverage tier']) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1px;
    overflow: visible;
    white-space: nowrap;
    font-size: 12px;
  }

  #plan-contrib-modal.cmf-boardroom .pcm-decision-table tr.pcm-er-row td .input-group,
  #plan-contrib-modal.cmf-boardroom .pcm-decision-table tr.pcm-er-row td .input-group-suffix {
    display: inline-flex;
    align-items: center;
    width: 100%;
  }

  #plan-contrib-modal.cmf-boardroom .pcm-decision-table tr.pcm-er-row input {
    height: 22px;
    font-size: 12px;
  }

  /* The warning shows BOTH its lines inside 55px. */
  #plan-contrib-modal.cmf-boardroom .pcm-cap-warning {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    min-height: 55px;
    max-height: 55px;
    overflow: hidden;
    padding: 7px 10px;
    font-size: 10.5px;
    line-height: 1.3;
  }

  #plan-contrib-modal.cmf-boardroom .pcm-cap-warning b {
    margin-bottom: 0;
  }

  /* The tier-count sentence sits centred above the two actions. */
  #plan-contrib-modal.cmf-boardroom .pcm-footer-tier-count {
    display: block;
    text-align: center;
    font-size: 11px;
  }

  #plan-contrib-modal.cmf-boardroom > .cmf-footer .pcm-footer-totals {
    display: none;
  }

  /* Reclaim the inset on the split itself — the body's negative margin was
     being re-absorbed by the wrapper below it. */
  #plan-contrib-modal.cmf-boardroom .contrib-split-layout {
    width: calc(100% + 26px);
    margin-left: -13px;
    margin-right: -13px;
  }
}

#plan-contrib-modal.cmf-boardroom .plan-contrib-modal-grid table {
  font-size: 11.5px;
}

#plan-contrib-modal.cmf-boardroom .plan-contrib-modal-grid :is(th, td) {
  padding: 5px 9px;
  font-size: 11.5px;
  line-height: 1.45;
}

#plan-contrib-modal.cmf-boardroom .plan-contrib-modal-grid thead th {
  background-color: var(--cmf-visual-rail);
  background-image: linear-gradient(180deg, #f7faff, var(--cmf-visual-rail));
  border-bottom: 1px solid var(--cmf-visual-rule);
  color: var(--cmfb-ink-2);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#plan-contrib-modal.cmf-boardroom .plan-contrib-modal-toolbar {
  padding: 9px 18px;
  background: var(--cmfb-surface-2);
  border-bottom: 1px solid var(--cmfb-border);
}

/* ---- Boardroom: density corrections measured against the Proposed frames --
   Each value below was set from a live measurement, not from a guess: the
   footer measured 67px against the frame's 58px because the commit buttons
   carry a 44px min-height from the second tier, and the decision table's
   selects and inputs measured ~50px rows against the frame's 30px controls. */
.cmf-modal.cmf-boardroom > .cmf-footer {
  min-height: 0;
}

.cmf-modal.cmf-boardroom > .cmf-footer :is(.cmf-footer-left, .cmf-footer-right) {
  min-height: 0;
  align-items: center;
  gap: 10px;
}

.cmf-modal.cmf-boardroom > .cmf-footer .cmf-btn {
  min-height: 0;
  height: auto;
}

/* Rail rows: one line for the label, one for the meta, chip on the right.
   Without the explicit min-width:0 the middle track refuses to shrink and the
   plan name wraps into three lines behind the chip. */
.cmf-modal.cmf-boardroom .cmf-wb-rail-item > *,
#plan-contrib-modal.cmf-boardroom .pcm-rail-host .tab > * {
  min-width: 0;
}

#plan-contrib-modal.cmf-boardroom .pcm-rail-host .tab :is(.plan-tab-name, .cmf-wb-rail-label) {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#plan-contrib-modal.cmf-boardroom
  .pcm-rail-host
  .tab
  :is(.plan-tab-meta, small, .cmf-wb-rail-meta) {
  display: block;
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--cmfb-ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#plan-contrib-modal.cmf-boardroom
  .pcm-rail-host
  :is(.contrib-plan-selector-heading, .pcm-rail-caption) {
  padding: 0 13px 6px;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cmfb-ink-3);
}

#plan-contrib-modal.cmf-boardroom .pcm-rail-host input[type='search'],
#plan-contrib-modal.cmf-boardroom .pcm-rail-host input[type='text'] {
  box-sizing: border-box;
  width: calc(100% - 26px);
  margin: 0 13px 10px;
  height: 32px;
  border: 1px solid var(--cmfb-border);
  border-radius: 8px;
  background: var(--color-white);
  padding: 0 10px;
  font-size: 12px;
}

/* Body controls: the Proposed frame's toolbar and decision table run at 30px
   control height and 12px type. */
#plan-contrib-modal.cmf-boardroom
  .plan-contrib-modal-grid
  :is(select, input[type='text'], input[type='number']) {
  height: 30px;
  min-height: 0;
  padding: 0 9px;
  font-size: 12px;
  border-radius: 8px;
  border: 1px solid var(--cmfb-border);
}

#plan-contrib-modal.cmf-boardroom .plan-contrib-modal-grid :is(th, td) {
  vertical-align: middle;
}

/* ---- Boardroom: Plan Library Mass Edit -----------------------------------
   MassEditModal injects its own \3c style> at open time, which lands AFTER this
   file's <link>, so these rules carry the extra `.cmf-boardroom` class to
   outrank it rather than editing the module's inline sheet. */
.cmf-modal.cmf-boardroom.mass-edit-workbench > .cmf-header {
  min-height: 90px;
}

.cmf-modal.cmf-boardroom.mass-edit-workbench .mass-edit-workbench-main {
  min-width: 0;
  padding: 13px 18px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 11px;
  overflow: hidden;
}

.cmf-modal.cmf-boardroom.mass-edit-workbench .mass-edit-body {
  min-width: 0;
  min-height: 0;
  gap: 13px;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}

.cmf-modal.cmf-boardroom.mass-edit-workbench :is(.mass-edit-grid-pane, .mass-edit-source-pane) {
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--cmfb-border);
  border-radius: 8px;
  background: var(--color-white);
  overflow: auto;
}

.cmf-modal.cmf-boardroom.mass-edit-workbench .mass-edit-source-pane {
  border-left: 1px solid var(--cmfb-border);
  background: var(--cmfb-surface-2);
  padding: 11px 13px;
}

/* The grid is a decision table, not a form: 28px rows, tinted header, tabular
   numerals. It measured 55px rows with a horizontal scrollbar clipping "HSA
   Eligible" to "HSA Elig…". */

/* NOT `table-layout: fixed`: this grid carries ~19 columns, and fixed layout
   divided the pane evenly and collapsed every one to ~25px, so each cell read
   "A..". Auto layout with a per-column floor lets the columns size to their
   content and the pane scroll, which is what the frame shows. */
.cmf-modal.cmf-boardroom.mass-edit-workbench .mass-edit-grid {
  table-layout: auto;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}

.cmf-modal.cmf-boardroom.mass-edit-workbench .mass-edit-grid :is(th, td) {
  padding: 4px 9px;
  border: 0;
  border-bottom: 1px solid #eef2f7;
  font-size: 11.5px;
  line-height: 1.3;
  white-space: nowrap;
  min-width: 76px;
}

.cmf-modal.cmf-boardroom.mass-edit-workbench .mass-edit-grid :is(th, td):first-child {
  min-width: 150px;
  position: sticky;
  left: 0;
  background: var(--color-white);
  z-index: 2;
}

.cmf-modal.cmf-boardroom.mass-edit-workbench .mass-edit-grid thead th:first-child {
  z-index: 3;
}

.cmf-modal.cmf-boardroom.mass-edit-workbench .mass-edit-grid thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--cmf-visual-rail);
  background-image: linear-gradient(180deg, #f7faff, var(--cmf-visual-rail));
  border-bottom: 1px solid var(--cmf-visual-rule);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cmfb-ink-2);
}

.cmf-modal.cmf-boardroom.mass-edit-workbench .mass-edit-grid input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 22px;
  padding: 0 6px;
  font-size: 11.5px;
  line-height: 1.3;
  font-family: var(--cmfb-num);
  font-variant-numeric: tabular-nums;
  text-align: right;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
}

.cmf-modal.cmf-boardroom.mass-edit-workbench .mass-edit-grid input:focus {
  border-color: var(--cmfb-blue);
  background: var(--color-white);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cmf-visual-focus) 15%, transparent);
}

/* The failure callout states each plan and its reason, the way the frame does. */
.cmf-modal.cmf-boardroom.mass-edit-workbench .mass-edit-failure-callout {
  margin: 0;
  padding: 9px 12px;
  border: 1px solid var(--cmfb-dang-bd);
  border-radius: 8px;
  background: var(--cmfb-dang-bg);
  color: var(--cmfb-dang-ink);
  font-size: 11.5px;
  line-height: 1.35;
}

.cmf-modal.cmf-boardroom.mass-edit-workbench
  .mass-edit-source-pane
  :is(h3, h4, .mass-edit-source-title) {
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: -0.01em;
  color: var(--cmfb-ink);
  margin: 0 0 8px;
}

@media (width <= 640px) {
  .cmf-modal.cmf-boardroom.mass-edit-workbench .mass-edit-workbench-main {
    padding: 11px 13px;
  }

  .cmf-modal.cmf-boardroom.mass-edit-workbench .mass-edit-body {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The phone frame reads as a FLAT list of plan cards with the source control
     underneath it. Stacking the two panes at 390px left the source viewer
     ABOVE the plans and wrapped both in their desktop card chrome, so the list
     rendered as a panel inside a panel inside the pane -- three nested borders
     and two nested scrollbars for one list.
     The panes keep their own scrolling; only the borrowed desktop chrome and
     the source-first order come off. */
  .cmf-modal.cmf-boardroom.mass-edit-workbench .mass-edit-grid-pane {
    order: 1;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .cmf-modal.cmf-boardroom.mass-edit-workbench .mass-edit-source-pane {
    order: 2;
    border: 0;
    border-top: 1px solid var(--cmfb-border);
    border-radius: 0;
    padding: 11px 0 0;
    background: transparent;
  }
}

/* Row height: the cells measured 49px because each carries a 22px input plus
   the cell's own padding on top of a default line-box. Pin the row. */
.cmf-modal.cmf-boardroom.mass-edit-workbench .mass-edit-grid tbody tr {
  height: 28px;
}

.cmf-modal.cmf-boardroom.mass-edit-workbench .mass-edit-grid tbody td {
  height: 28px;
  padding-top: 2px;
  padding-bottom: 2px;
}

/* ---------------------------------------------------------------------------
   Mass Edit keeps the ReportUI comparison-table model on the phone: benefit
   and premium labels run vertically, selected plans run horizontally, and the
   first column stays pinned while the plan columns scroll. The previous
   plan-card conversion inverted that comparison model at the smallest size.
   --------------------------------------------------------------------------- */
@media (width <= 560px) {
  .cmf-modal.cmf-boardroom.mass-edit-workbench .mass-edit-grid {
    display: table;
    width: max-content;
    min-width: 100%;
  }

  .cmf-modal.cmf-boardroom.mass-edit-workbench .mass-edit-grid tbody {
    display: table-row-group;
  }

  .cmf-modal.cmf-boardroom.mass-edit-workbench .mass-edit-grid tbody tr {
    display: table-row;
    height: auto;
  }

  .cmf-modal.cmf-boardroom.mass-edit-workbench .mass-edit-grid tbody :is(th, td) {
    display: table-cell;
    height: auto;
    min-width: 140px;
    padding: 5px 9px;
  }

  .cmf-modal.cmf-boardroom.mass-edit-workbench .mass-edit-grid :is(th, td):first-child {
    position: sticky;
    left: 0;
    min-width: 150px;
  }
}

/* ---- Boardroom: Case Share ----------------------------------------------- */
.cmf-modal.cmf-boardroom.case-share-workbench .cmf-wb-rail-item {
  padding: 9px 10px;
}

.cmf-modal.cmf-boardroom.case-share-workbench .cmf-wb-main {
  min-width: 0;
}

.cmf-modal.cmf-boardroom.case-share-workbench .cmf-wb-pane-scroll {
  padding: 13px 18px;
}

/* Organisation rows read as cards with a checkbox, a name/meta stack and a
   status badge — the frame's .m-cardrow. */
.cmf-modal.cmf-boardroom.case-share-workbench :is(.case-share-org-row, .share-org-row, li) {
  min-width: 0;
}

.cmf-modal.cmf-boardroom.case-share-workbench label:has(input[type='checkbox']) {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--cmfb-border);
  border-radius: 8px;
  background: var(--color-white);
  margin-bottom: 8px;
  font-size: 12.5px;
}

.cmf-modal.cmf-boardroom.case-share-workbench input[type='checkbox'] {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  accent-color: var(--cmfb-blue-dark);
}

/* ---- Boardroom: Feature Flag Workbench ----------------------------------- */

/* The flag list is a table in the frame: 10px uppercase headers, 28px rows,
   tabular numerals. The shipped list renders as tall cards with a horizontal
   scrollbar that clipped "Proposal Book v2 renderer" to "roposal Book v2 r". */

/* ---- Boardroom density corrections, measured -----------------------------
   MassEditModal injects its own stylesheet at open time, which lands after
   this file's <link>, so its `.mass-edit-grid td { padding: .45rem .6rem }`
   was winning on source order and holding rows at 45px against the frame's 28.
   These carry the extra `.cmf-boardroom` class AND !important to settle it. */
.cmf-modal.cmf-boardroom.mass-edit-workbench .mass-edit-grid tbody tr,
.cmf-modal.cmf-boardroom.mass-edit-workbench .mass-edit-grid tbody td {
  height: 28px;
  padding-top: 1px;
  padding-bottom: 1px;
  line-height: 1.25;
}

.cmf-modal.cmf-boardroom.mass-edit-workbench .mass-edit-grid input {
  height: 22px;
  padding: 0 6px;
}

.cmf-modal.cmf-boardroom.mass-edit-workbench .mass-edit-grid thead th {
  height: 26px;
  padding-top: 2px;
  padding-bottom: 2px;
}

/* The failure panel names each plan on its own line with its reason, and its
   retry control sits on that line — one flat sentence cannot be acted on
   per plan. */
.cmf-modal.cmf-boardroom.mass-edit-workbench .mass-edit-failure-callout :is(ul, ol) {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.cmf-modal.cmf-boardroom.mass-edit-workbench .mass-edit-failure-callout li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.cmf-modal.cmf-boardroom.mass-edit-workbench .mass-edit-failure-callout .cmf-btn {
  min-height: 0;
  height: auto;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 11px;
  background: var(--color-white);
  border: 1px solid var(--cmfb-border-2);
  color: var(--cmfb-ink-2);
}

/* The source pane leads with a titled bar naming the plan it is showing, and
   closes with the staged-write note the frame carries. */
.cmf-modal.cmf-boardroom.mass-edit-workbench .mass-edit-source-pane {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 11.5px;
  text-align: left;
}

.cmf-modal.cmf-boardroom.mass-edit-workbench .mass-edit-source-pane > * {
  text-align: left;
}

/* ---- Boardroom: Feature Flag Workbench, main pane -------------------------
   The frame's list is a compact grouped table — six rows visible in the space
   the shipped list spends on three — and the inspector is a column of small
   cards rather than a full-height form. */

/* The inspector: 11.5px body, tighter section rhythm, and its own scroll so it
   cannot push a horizontal scrollbar through the pane. */

/* The filter row is a pair of checkboxes in the frame ("Staged only", "Needs
   review"), not four pill buttons; compress the pills so they occupy one
   compact row instead of a band. */

/* ---- Boardroom: Case Share, compact rows ---------------------------------
   The frame fits four organisation rows plus the heading, the copy line, the
   search row and the facet tabs inside a 560px dialog. The shipped rows spend
   ~88px each on a two-line chip stack; these bring them to the frame's ~61px
   without dropping a single fact. */

/* Two tight lines, not three: name + tier on the first, the member/role meta
   on the second. The shipped row wrapped its chips onto a row of their own and
   spent 82px where the frame spends 61. */
.cmf-modal.cmf-boardroom.case-share-workbench label:has(input[type='checkbox']) {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr) auto;
  align-items: center;
  gap: 1px 9px;
  padding: 7px 10px;
  margin-bottom: 6px;
  min-height: 61px;
  font-size: 12px;
  line-height: 1.25;
}

.cmf-modal.cmf-boardroom.case-share-workbench label:has(input[type='checkbox']) > input {
  grid-row: 1 / span 2;
}

.cmf-modal.cmf-boardroom.case-share-workbench label:has(input[type='checkbox']) strong {
  font-size: 12.5px;
  font-weight: 650;
}

/* The member/role/tier chips read as one meta line, not a second row of pills. */
.cmf-modal.cmf-boardroom.case-share-workbench
  label:has(input[type='checkbox'])
  :is(.chip, .badge, .pill, span[class*='chip'], span[class*='badge']) {
  padding: 1px 6px;
  font-size: 10px;
  border-radius: 999px;
}

.cmf-modal.cmf-boardroom.case-share-workbench .cmf-wb-pane-scroll > :is(h2, h3) {
  font-size: 15px;
  font-weight: 750;
  letter-spacing: -0.02em;
  margin: 0 0 3px;
}

.cmf-modal.cmf-boardroom.case-share-workbench .cmf-wb-pane-scroll > p {
  font-size: 11.5px;
  color: var(--cmfb-ink-2);
  margin: 0 0 11px;
}

.cmf-modal.cmf-boardroom.case-share-workbench input[type='search'],
.cmf-modal.cmf-boardroom.case-share-workbench input[type='text'] {
  height: 32px;
  font-size: 12px;
  border-radius: 8px;
}

/* ---- Boardroom phone: Mass Edit and Feature Flags -------------------------
   Same treatment PCM gets: the rail becomes a chip strip, the desktop
   two-column body becomes one column, and the dense table becomes cards. */
@media (width <= 640px) {
  /* Case Share's phone rail is three chips (Orgs / Team / Link), not three
     full cards — those were eating 245px of a 716px sheet, which is why the
     active-link body could only fit its Copy control. */
  .cmf-modal.cmf-boardroom.case-share-workbench .cmf-wb-rail-item {
    display: inline-flex;
    align-items: center;
    width: auto;
    height: 36px;
    padding: 5px 11px;
    border-radius: 999px;
    margin: 0;
  }

  .cmf-modal.cmf-boardroom.case-share-workbench .cmf-wb-rail-icon {
    display: none;
  }

  /* The active-link controls sit side by side, with the revoke action and its
     warning beneath — the frame's structure. */
  .cmf-modal.cmf-boardroom.case-share-workbench .case-share-link-url {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .cmf-modal.cmf-boardroom.case-share-workbench .case-share-link-url input {
    flex: 0 0 auto;
    min-width: 0;
  }

  .cmf-modal.cmf-boardroom.case-share-workbench .case-share-link-url .copy-link-btn {
    flex: 0 0 auto;
    width: auto;
    padding: 7px 14px;
  }

  .cmf-modal.cmf-boardroom.case-share-workbench .case-share-email-section {
    margin-top: 10px;
  }

  /* Mass Edit: source is a button-reveal while the comparison table scrolls. */
  .cmf-modal.cmf-boardroom.mass-edit-workbench .mass-edit-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .cmf-modal.cmf-boardroom.mass-edit-workbench .mass-edit-source-pane {
    display: none;
  }

  .cmf-modal.cmf-boardroom.mass-edit-workbench
    .mass-edit-workbench-main.is-source-open
    .mass-edit-source-pane {
    display: flex;
  }

  .cmf-modal.cmf-boardroom.mass-edit-workbench
    .mass-edit-workbench-main.is-source-open
    .mass-edit-grid-pane {
    display: none;
  }

  .cmf-modal.cmf-boardroom.mass-edit-workbench .mass-edit-source-toggle {
    display: inline-flex;
    align-self: flex-start;
  }

  /* Flags: the inspector follows the list rather than competing for width. */

  /* Preserve compact comparison rows without collapsing plan columns into cards. */
  .cmf-modal.cmf-boardroom.mass-edit-workbench .mass-edit-grid tbody tr,
  .cmf-modal.cmf-boardroom.mass-edit-workbench .mass-edit-grid tbody :is(th, td) {
    height: auto;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .cmf-modal.cmf-boardroom.mass-edit-workbench .mass-edit-grid {
    width: max-content;
    min-width: 100%;
  }
}

/* ---------------------------------------------------------------------------
   Boardroom shell geometry: the four audited surfaces render at the size the
   approved frames are drawn at.

   The Proposed frames are windowed dialogs -- 1080x646 for the three wide
   surfaces, 860x560 for the smaller Case Share shell, 390x716 on the phone,
   each with a 12px radius and a drop shadow. The shells were inheriting the
   generic workbench sizes instead (`fullscreen` = 100vw x 100dvh, `wide` =
   min(1760px, 98vw) x 95dvh, `standard` = min(1180px, 760px)), so at
   1440x1000 they rendered 1408x900 / 1440x1000 / 1408x950 / 1180x760 and no
   frame could ever line up: every comparison started with a few hundred
   thousand pixels of pure size difference before a single element was read.

   Written as `min(<frame>, <viewport fraction>)` rather than a bare literal so
   nothing is pinned larger than the space available -- below the frame size
   these behave exactly as the generic sizes did, and the responsive phone
   rules further down still win on source order. Only box metrics are set here:
   no `display`, because the 390px stack is all grid properties and a stray
   `display: flex` collapses it silently.
   --------------------------------------------------------------------------- */
.cmf-modal.cmf-boardroom.mass-edit-workbench {
  width: min(1080px, 98vw);
  height: min(646px, 92dvh);
  min-height: 0;
  max-width: min(1080px, 98vw);
  max-height: min(646px, 92dvh);
  border-radius: 12px;
}

/* PCM carries substantially more live information than the three static
   review surfaces above: a case can contain 14+ plans, four editable tiers,
   linked-plan controls and a four-column premium summary. Capping that real
   workbench at the review frame's 1080x646 made the editor unusable in those
   cases (the proposed type/value controls overlapped and the summary clipped
   its total column). Keep the frame size for the other review surfaces, but
   let PCM use the content-capable size its adapter was designed for. */
#plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench.pcm-linked-pair-workbench {
  width: min(1592px, calc(100vw - 40px));
  height: min(900px, calc(100dvh - 24px));
  min-height: 0;
  max-width: min(1592px, calc(100vw - 40px));
  max-height: min(900px, calc(100dvh - 24px));
  border-radius: 12px;
}

@media (width >= 641px) {
  .pcm-linked-pair-workbench-overlay:has(> #plan-contrib-modal.cmf-boardroom) {
    padding: 12px;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench.pcm-linked-pair-workbench {
    --cmf-wb-rail-width: clamp(220px, 17vw, 248px);
  }
}

/* Case Share is the one surface whose frame puts the rail meter at the BOTTOM
   of the rail, under the three facets, not above them. CMF appends the meter
   before the list, which is right for Mass Edit and Feature Flags -- their
   frames carry it up top -- so this is reordering for one surface rather than
   changing the shared default. `.cmf-wb-rail` is already a flex column
   (:1589), so `order` alone does it and no display is touched. */
.cmf-modal.cmf-boardroom.case-share-workbench .cmf-wb-rail > .cmf-wb-meter {
  order: 9;
  margin-top: auto;
}

.cmf-modal.cmf-boardroom.case-share-workbench {
  width: min(860px, 98vw);
  height: min(560px, 92dvh);
  min-height: 0;
  max-width: min(860px, 98vw);
  max-height: min(560px, 92dvh);
  border-radius: 12px;
}

/* The phone frames are full-bleed at 390 and 716 tall -- they do NOT fill the
   844 viewport, so the shell is a sheet with backdrop below it, not a
   full-height takeover. */
@media (width <= 560px) {
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench.pcm-linked-pair-workbench {
    width: min(390px, 100vw);
    height: min(716px, 96dvh);
    min-height: 0;
    max-width: min(390px, 100vw);
    max-height: min(716px, 96dvh);
    margin: 0;
    border-radius: 0;
  }
}

/* ---------------------------------------------------------------------------
   Mass Edit phone header: two metrics, not three.

   The Proposed phone frame carries EDITED and FAILED only. Keeping the third
   ("Plans") at 390px is what squeezed the header text until the eyebrow
   rendered as "LIBRARY" and the title as "Edit" -- the source strings are and
   always were "Plan Library" and "Mass Edit" (MassEditModal.js:278,281), so
   this was pure clipping, not wrong copy.

   Hidden with `display: none` on the metric CELL only. The metric id, its
   element and its setMetrics() writer all stay live, so nothing that reads or
   updates `plans` changes behaviour -- the count is simply not shown at a
   width where it costs the title.
   --------------------------------------------------------------------------- */
@media (width <= 560px) {
  .cmf-modal.cmf-boardroom.mass-edit-workbench [data-workbench-metric='plans'] {
    display: none;
  }

  /* All four phone frames carry the header icon tile. The generic rule at
     :6460 hides `.cmf-header-icon` below 480px, so the Boardroom surfaces lost
     the tile the frame draws and the eyebrow/title started hard against the
     header's left padding. Restored at the frame's 34px, for these four
     surfaces only -- the generic rule still governs every other modal. */
  #plan-contrib-modal.cmf-boardroom > .cmf-header .cmf-header-icon {
    display: inline-flex;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    font-size: 12px;
  }

  /* Phone rail tabs carry the COUNT badge the Proposed frame shows, not the
     word. "Needs review" and "N staged" ellipsize to "Need..." / "Clea..." in
     a 390px tab, which reads as broken rather than terse.

     The full label stays the element's textContent and its title, so screen
     readers and the rail search are unaffected -- only the glyph box is
     collapsed, and the compact form is painted from the data attribute
     ComplexModalFactory.applyChip writes. A tab with nothing to report has an
     empty short form and shows no chip at all, exactly as the frame does. */

  /* Every rule below is gated on the attribute actually being present and
     non-empty. That gate is deliberate: collapsing the font unconditionally
     produced EMPTY grey pills wherever the attribute had not been written,
     which is worse than the truncation it was meant to fix. With the gate, a
     chip CMF has not annotated keeps its original text and nothing regresses. */
  .cmf-modal.cmf-boardroom:is(.mass-edit-workbench, .case-share-workbench)
    .cmf-wb-rail-item
    .cmf-wb-chip[data-chip-short]:not([data-chip-short='']) {
    font-size: 0;
    line-height: 0;
  }

  .cmf-modal.cmf-boardroom:is(.mass-edit-workbench, .case-share-workbench)
    .cmf-wb-rail-item
    .cmf-wb-chip[data-chip-short]:not([data-chip-short=''])::after {
    content: attr(data-chip-short);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.45;
    letter-spacing: -0.01em;
  }

  /* A tab with nothing to report shows no chip at all, as the frame does. */
  .cmf-modal.cmf-boardroom:is(.mass-edit-workbench, .case-share-workbench)
    .cmf-wb-rail-item
    .cmf-wb-chip[data-chip-short=''] {
    display: none;
  }

  /* Same swap for the tab LABEL. Case Share's frame reads "Orgs / Team / Link"
     across three tabs at 390px; the full labels ellipsize to "t..." and
     "Share link Acti..." and push a scroll arrow into the strip. Gated on a
     non-empty attribute so a rail CMF has not annotated is untouched. */
  .cmf-modal.cmf-boardroom.case-share-workbench
    .cmf-wb-rail-item
    .cmf-wb-rail-label[data-label-short]:not([data-label-short='']) {
    font-size: 0;
    line-height: 0;
  }

  .cmf-modal.cmf-boardroom.case-share-workbench
    .cmf-wb-rail-item
    .cmf-wb-rail-label[data-label-short]:not([data-label-short=''])::after {
    content: attr(data-label-short);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.35;
    letter-spacing: -0.01em;
  }

  /* Case Share's phone frame carries two header tiles, not three: the LINK
     state is already the third tab's own chip, so repeating it in the header
     costs the title its room. */
  .cmf-modal.cmf-boardroom.case-share-workbench [data-workbench-metric='link'] {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Step 4 PCM parity closure

   These selectors deliberately carry the modal's existing identity and mode
   classes. The contribution partial is assembled after this stylesheet and
   still owns many legacy ID selectors; the extra class weight lets CMF keep
   ownership of shell and Workbench geometry without adding !important.
   -------------------------------------------------------------------------- */
#plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench > .cmf-header {
  box-sizing: border-box;
  height: 90px;
  min-height: 90px;
  max-height: 90px;
  padding: 12px 20px;
}

#plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench > .cmf-header .cmf-header-icon > * {
  display: none;
}

#plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench > .cmf-header .cmf-header-icon::before {
  content: none;
}

#plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench > .cmf-header .cmf-header-icon::after {
  content: '$';
  color: var(--color-white);
  font-size: 14px;
  font-weight: 700;
}

#plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .cmf-wb-rail-icon--text {
  font-family: var(--cmfb-ui);
  font-style: normal;
  font-weight: 700;
}

#plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .cmf-wb-rail-item
  .cmf-wb-chip[data-chip-short]:not([data-chip-short='']) {
  font-size: 0;
  line-height: 0;
}

#plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .cmf-wb-rail-item
  .cmf-wb-chip[data-chip-short]:not([data-chip-short=''])::after {
  content: attr(data-chip-short);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.45;
}

#plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .cmf-wb-rail-item
  .cmf-wb-chip[data-chip-short=''] {
  display: none;
}

#plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .plan-contrib-modal-grid,
#plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .contrib-split-layout {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0;
}

#plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .contrib-table-area {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 13px 18px;
  scrollbar-gutter: auto;
  grid-template-rows: min-content min-content 32px minmax(0, 1fr);
}

#plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .contrib-table-area
  > .plan-contrib-modal-toolbar {
  box-sizing: border-box;
  height: 89px;
  min-height: 89px;
  max-height: 89px;
  overflow: hidden;
}

#plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .contrib-table-area > .tab-panels {
  grid-row: 4;
  margin-top: -11px;
}

#plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .contrib-table-area > .pcm-cap-warning {
  grid-row: 3 / 5;
  height: 90px;
  min-height: 90px;
  max-height: 90px;
  z-index: 1;
}

#plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .contrib-table-area > .pcm-premiums-dock {
  grid-row: 3 / 5;
  margin-top: 0;
}

#plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .contrib-table-area:has(> .pcm-cap-warning)
  > .pcm-premiums-dock {
  margin-top: 101px;
}

#plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .cmf-wb-rail-list > .cmf-wb-rail-item {
  min-height: 52px;
}

#plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench > .cmf-workbench-body > .cmf-wb-rail {
  scrollbar-width: none;
}

#plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  > .cmf-workbench-body
  > .cmf-wb-rail::-webkit-scrollbar {
  display: none;
}

#plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .pcm-pane-status::before {
  content: '●';
  margin-right: 5px;
  font-size: 7px;
}

#plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .pcm-tier-filterbar {
  box-sizing: border-box;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  height: 32px;
  min-height: 32px;
  gap: 8px;
  overflow: hidden;
  padding: 0 9px;
  border: 1px solid var(--cmfb-border);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: var(--cmf-visual-rail);
}

#plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .pcm-tier-filterbar.is-compact {
  justify-content: flex-end;
}

#plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .pcm-table-scroll-hint {
  display: none;
}

#plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .pcm-summary-scroll-hint {
  display: none;
}

#plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .tab-panel.active .pcm-decision-table {
  border-radius: 0 0 8px 8px;
}

@media (width >= 641px) {
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .pcm-pay-periods select {
    width: 150px;
    max-width: 150px;
  }

  /* The summary has a fixed three-row contract. Letting it advertise an
     internal scrollbar consumes a numeric column even when every row fits. */
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .pcm-premiums-dock {
    overflow: hidden;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-decision-table
    .pcm-er-edit
    :is(select, input) {
    height: 24px;
    padding: 0 3px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-decision-table
    .pcm-er-edit
    :is(select, input):focus-visible {
    border-radius: 3px;
    outline: 2px solid var(--cmfb-blue);
    outline-offset: 1px;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-decision-table
    .pcm-er-edit
    :is(.input-group, .input-group-suffix) {
    border: 0;
    background: transparent;
    box-shadow: none;
  }
}

#plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench > .cmf-footer {
  box-sizing: border-box;
  height: 58px;
  min-height: 58px;
  max-height: 58px;
  padding: 11px 20px;
  overflow: hidden;
}

#plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench > .cmf-footer .cmf-footer-left {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 0 12px;
  min-width: 0;
}

#plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench > .cmf-footer .plan-contrib-clear-btn {
  grid-column: 1;
  grid-row: 1 / span 2;
  flex: 0 0 auto;
  white-space: nowrap;
}

#plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench > .cmf-footer .pcm-footer-totals,
#plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench > .cmf-footer .plan-contrib-save-status {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench > .cmf-footer .pcm-footer-tier-count {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .pcm-tier-state {
  display: none;
}

@media (width >= 641px) {
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .contrib-table-area {
    width: calc(100% + 11px);
    max-width: calc(100% + 11px);
    padding: 0 18px 13px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 80px min-content 32px minmax(0, 1fr);
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .contrib-table-area
    > :is(.contrib-sticky-header, .plan-contrib-modal-toolbar, .pcm-tier-filterbar, .tab-panels) {
    grid-column: 1;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .contrib-table-area > .pcm-tier-filterbar {
    grid-row: 3;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .contrib-table-area > .tab-panels {
    grid-row: 4;
  }

  /* Keep the live subscription node mounted, but remove the redundant viewer
     from this editor. The four-tier grid is the primary working surface. */
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .contrib-table-area > .pcm-premiums-dock {
    display: none;
  }

  /* A real held-tier warning remains useful. When present it becomes a
     full-width row above the filters instead of recreating a right pane. */
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .contrib-table-area > .pcm-cap-warning {
    grid-column: 1;
    grid-row: 3;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .contrib-table-area:has(> .pcm-cap-warning) {
    grid-template-rows: 80px min-content auto 32px minmax(0, 1fr);
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .contrib-table-area:has(> .pcm-cap-warning)
    > .pcm-tier-filterbar {
    grid-row: 4;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .contrib-table-area:has(> .pcm-cap-warning)
    > .tab-panels {
    grid-row: 5;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .pcm-decision-table thead th:first-child {
    width: 29%;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .pcm-decision-table thead th:nth-child(2) {
    width: 22%;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .pcm-decision-table thead th:nth-child(3) {
    width: 29%;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .pcm-decision-table thead th:nth-child(4) {
    width: 20%;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .contrib-table-area > .contrib-sticky-header {
    box-sizing: border-box;
    width: calc(100% + 36px);
    height: 80px;
    min-height: 80px;
    margin-right: -18px;
    margin-left: -18px;
    padding: 12px 18px 10px;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .contrib-table-area
    > .plan-contrib-modal-toolbar {
    margin-top: 3px;
  }
}

@media (width <= 640px) {
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench > .cmf-header {
    height: 61px;
    min-height: 61px;
    max-height: 61px;
    padding: 8px 12px;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench > .cmf-workbench-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 53px minmax(0, 1fr);
    padding: 0;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench > .cmf-workbench-body > .cmf-wb-rail {
    width: 100%;
    height: 53px;
    min-height: 53px;
    max-height: 53px;
    border-right: 0;
    border-bottom: 1px solid var(--cmfb-border);
    overflow: hidden;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench > .cmf-workbench-body > .cmf-wb-rail::before,
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench > .cmf-workbench-body > .cmf-wb-rail::after {
    content: none;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    > .cmf-workbench-body
    > .cmf-wb-rail
    > :not(.cmf-wb-rail-list) {
    display: none;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    > .cmf-workbench-body
    > .cmf-wb-rail
    > .cmf-wb-rail-list {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 53px;
    gap: 6px;
    padding: 8px 13px;
    overflow: auto hidden;
    scrollbar-width: none;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    > .cmf-workbench-body
    > .cmf-wb-rail
    > .cmf-wb-rail-list::-webkit-scrollbar {
    display: none;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    > .cmf-workbench-body
    > .cmf-wb-rail
    > .cmf-wb-rail-list
    > .cmf-wb-rail-item {
    box-sizing: border-box;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    width: auto;
    min-width: 0;
    max-width: 220px;
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    gap: 8px;
    margin: 0;
    padding: 5px 11px;
    border-radius: 999px;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    > .cmf-workbench-body
    > .cmf-wb-rail
    .cmf-wb-rail-icon,
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    > .cmf-workbench-body
    > .cmf-wb-rail
    .cmf-wb-rail-meta,
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    > .cmf-workbench-body
    > .cmf-wb-rail
    .cmf-wb-dot {
    display: none;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    > .cmf-workbench-body
    > .cmf-wb-rail
    .cmf-wb-rail-label {
    max-width: 150px;
    font-size: 12px;
    line-height: 1.35;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench > .cmf-workbench-body > .cmf-wb-main {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    gap: 0;
    scrollbar-gutter: auto;
  }

  /* A legacy mobile pane rule still reserves 8px on each side of the factory
     main. Reclaim that content-box inset here so the selected-plan sheet is
     full width; its cards then own the reference's single 13px margin. */
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    > .cmf-workbench-body
    > .cmf-wb-main
    > .pcm-cmf-body {
    width: calc(100% + 16px);
    max-width: none;
    margin-right: -8px;
    margin-left: -8px;
    scrollbar-gutter: auto;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .pcm-cmf-body,
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .plan-contrib-modal-grid,
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .plan-contrib-left,
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .wizard-contribution-model,
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .pcm-tiered-settings,
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .plan-specific-contribution-container,
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .contrib-split-layout,
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .contrib-table-area {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .contrib-table-area {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
    scrollbar-width: none;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .contrib-table-area::-webkit-scrollbar {
    display: none;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .contrib-sticky-header {
    box-sizing: border-box;
    flex: 0 0 80px;
    width: 100%;
    min-height: 80px;
    margin: 0;
    padding: 12px 18px 10px;
    border-bottom: 1px solid var(--cmfb-border);
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .contrib-table-area
    > .plan-contrib-modal-toolbar {
    position: relative;
    box-sizing: border-box;
    flex: 0 0 76px;
    width: calc(100% - 26px);
    height: 76px;
    min-height: 76px;
    max-height: 76px;
    margin: 11px 13px 0;
    padding: 9px 11px;
    border: 1px solid var(--cmfb-border);
    border-radius: 8px;
    overflow: hidden;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .plan-contrib-modal-toolbar
    .pcm-same-all-label {
    position: absolute;
    right: auto;
    bottom: 7px;
    left: 11px;
    width: auto;
    height: 24px;
    margin: 0;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .pcm-tier-filterbar {
    display: none;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .contrib-table-area > .pcm-cap-warning {
    box-sizing: border-box;
    flex: 0 0 55px;
    width: calc(100% - 26px);
    min-height: 55px;
    max-height: 55px;
    margin: 11px 13px 0;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .tab-panels {
    box-sizing: border-box;
    flex: 0 0 auto;
    width: calc(100% - 26px);
    margin: 11px 13px 0;
    padding: 0;
    overflow: visible;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-decision-table
    tr.pcm-er-row
    td[data-col='Coverage tier'] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .pcm-tier-state {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border: 1px solid;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .pcm-tier-state::before {
    content: '●';
    font-size: 7px;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .pcm-tier-state--edited {
    border-color: var(--cmf-visual-command-tint);
    background: var(--cmf-visual-command-tint);
    color: var(--cmf-visual-command);
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .pcm-tier-state--capped {
    border-color: var(--cmfb-warn-bd);
    background: var(--cmfb-warn-bg);
    color: var(--cmf-visual-review);
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-decision-table
    .pcm-er-edit
    .input-group {
    display: flex;
    width: 100%;
    min-width: 0;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .pcm-decision-table .pcm-er-edit input {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench > .cmf-footer {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    height: 80px;
    min-height: 80px;
    max-height: 80px;
    gap: 6px;
    padding: 8px 13px max(8px, env(safe-area-inset-bottom));
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench > .cmf-footer .cmf-footer-left {
    display: flex;
    flex: 0 0 14px;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 14px;
    font-size: 11px;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    > .cmf-footer
    .cmf-footer-left
    > :not(.pcm-footer-tier-count),
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench > .cmf-footer .pcm-footer-tier-count:empty {
    display: none;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench > .cmf-footer .pcm-footer-tier-count {
    display: block;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench > .cmf-footer .cmf-footer-right {
    box-sizing: border-box;
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: calc(100vw - 26px);
    max-width: calc(100vw - 26px);
    min-width: 0;
    overflow: hidden;
    align-self: center;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench > .cmf-footer .cmf-btn {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 36px;
    justify-content: center;
  }

  /* Final phone-frame closure. The legacy workbench main contributes an 11px
     content offset after the horizontal rail; reclaim it so the plan heading
     starts directly below the rail, as it does on every other workbench. */
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    > .cmf-workbench-body
    > .cmf-wb-main
    > .pcm-cmf-body {
    margin-top: -11px;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .pcm-pane-status {
    display: none;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .pcm-pane-subtitle[data-pcm-mobile-text] {
    font-size: 0;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-pane-subtitle[data-pcm-mobile-text]::after {
    content: attr(data-pcm-mobile-text);
    font-size: 11px;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .cmf-header-icon {
    border: 0;
    background: #334155;
    box-shadow: none;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .cmf-header-icon > * {
    display: none;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .cmf-header-icon::after {
    content: '$';
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    > .cmf-workbench-body
    > .cmf-wb-rail
    > .cmf-wb-rail-list
    > .cmf-wb-rail-item {
    max-width: none;
    overflow: visible;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    > .cmf-workbench-body
    > .cmf-wb-rail
    .cmf-wb-chip {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    width: auto;
    min-width: 0;
    max-width: none;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .pcm-model-btn[data-model='reference'] {
    font-size: 0;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-model-btn[data-model='reference']::after {
    content: 'Ref';
    font-size: 11px;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .pcm-cap-title-short {
    display: inline;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .pcm-cap-title-long {
    display: none;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .pcm-cap-warning::before {
    display: none;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .contrib-table-area > .tab-panels {
    margin: 11px 13px 0;
  }

  /* All padding belongs to the card itself. Intermediate tab/section wrappers
     used to consume 8px per side and turn a 364px card into a 348px card. */
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .tab-panels > .tab-panel.active {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .pcm-decision-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .pcm-decision-table tbody {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .pcm-decision-table tr.pcm-er-row {
    box-sizing: border-box;
    grid-template-rows: 35px 45px;
    width: 100%;
    height: 80px;
    min-height: 80px;
    max-height: 80px;
    overflow: hidden;
    margin-right: 0;
    margin-left: 0;
    padding: 0;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .pcm-decision-table tr.pcm-er-row td {
    min-height: 0;
    overflow: hidden;
    text-align: left;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-decision-table
    tr.pcm-er-row
    td[data-col='Coverage tier'] {
    position: relative;
    height: 35px;
    min-height: 35px;
    padding: 3px 10px;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-decision-table
    tr.pcm-er-row
    .pcm-tier-label {
    display: block;
    width: 100%;
    min-width: 0;
    padding-right: 70px;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-decision-table
    tr.pcm-er-row
    .pcm-tier-state {
    position: absolute;
    top: 7px;
    right: 10px;
    height: 20px;
    margin: 0;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-decision-table
    tr.pcm-er-row
    td:not([data-col='Coverage tier']) {
    height: 45px;
    min-height: 45px;
    padding: 3px 10px;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-decision-table
    tr.pcm-er-row
    td:not([data-col='Coverage tier'])::before {
    line-height: 10px;
  }

  /* Keep the canonical editable fields and their delegated input events while
     presenting phone values with the compact inline treatment in the frame. */
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-decision-table
    .pcm-er-edit
    .input-group {
    align-items: baseline;
    gap: 2px;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-decision-table
    .pcm-er-edit
    :is(.input-group-text, input) {
    height: 19px;
    min-height: 19px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--cmf-visual-ink);
    font: 500 13px/19px var(--cmfb-num);
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-decision-table
    .pcm-er-edit
    input:focus-visible {
    outline: 2px solid #a63320;
    outline-offset: 1px;
  }
}

@media (width >= 641px) {
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .pcm-cap-title-short {
    display: none;
  }

  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench .pcm-cap-title-long {
    display: inline;
  }
}

/* Plan Contributions · Signal A workbench. Keep CMF's existing shell, tier
   inputs, premium subscription node, and delegated action proxies mounted. */
html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench {
  /* The older Boardroom rule points --cmf-font-sans back at --cmfb-ui.
     Resolve from the inherited product face to avoid a circular fallback to Inter. */
  --cmfb-ui: var(--font-document);
  --cmfb-num: var(--font-document);
  --cmfb-surface: var(--cmf-visual-surface-raised);
  --cmfb-surface-2: var(--cmf-visual-surface);
  --cmfb-rail: var(--cmf-visual-rail);
  --cmfb-border: var(--cmf-visual-rule);
  --cmfb-border-2: var(--cmf-visual-rule-strong);
  --cmfb-ink: var(--cmf-visual-ink);
  --cmfb-ink-2: var(--cmf-visual-ink-secondary);
  --cmfb-ink-3: var(--cmf-visual-ink-tertiary);
  --cmfb-blue: var(--cmf-visual-command);
  --cmfb-blue-dark: var(--cmf-visual-command);
  --cmfb-staged: var(--cmf-visual-command);
  font-family: var(--cmf-font-sans);
  color: var(--cmf-visual-ink);
  background: var(--cmf-visual-surface);
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  > .cmf-header {
  background: var(--cmf-visual-header);
  background-image: none;
  border-bottom: 2px solid var(--cmf-visual-command);
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .contrib-table-area {
  background: var(--cmf-visual-surface-raised);
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .pcm-tier-filterbar {
  background: var(--cmf-visual-surface);
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .cmf-wb-rail-item[aria-current='true'] {
  background: var(--cmf-visual-command-tint);
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .pcm-tier-state--edited {
  color: var(--cmf-visual-command);
  background: var(--cmf-visual-command-tint);
  border-color: var(--cmf-visual-rule-strong);
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .pcm-metric
  .cmf-wb-metric-value {
  font-family: var(--cmf-font-sans);
  font-size: 19px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .pcm-metric
  .cmf-wb-metric-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .pcm-metric-headline
  .cmf-wb-metric-value {
  color: var(--cmf-header-accent);
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .pcm-model-toggle-btns {
  border: 1px solid var(--cmf-visual-rule);
  border-radius: 8px;
  background: var(--cmf-visual-surface);
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .pcm-model-btn {
  border-radius: 6px;
  color: var(--cmf-visual-ink-secondary);
  font-size: 12px;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .pcm-model-btn:is(.active, .is-active) {
  color: var(--cmf-visual-command);
  background: var(--cmf-visual-surface-raised);
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .pcm-same-types-control {
  flex-wrap: wrap;
  overflow: visible;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .pcm-same-types-control
  label:has(input[value='alternate']) {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip-path: none;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .pcm-same-all-label {
  position: static;
  display: inline-flex;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip-path: none;
  color: var(--cmf-visual-ink-secondary);
  font-size: 12px;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .pcm-same-type-chip {
  gap: 5px;
  padding: 4px 8px;
  color: var(--cmf-visual-ink-secondary);
  background: var(--cmf-visual-surface-raised);
  border: 1px solid var(--cmf-visual-rule);
  border-radius: 999px;
  font-size: 11px;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  :is(.pcm-same-type-cb, .pcm-same-contrib-cb) {
  appearance: auto;
  width: 15px;
  height: 15px;
  min-width: 15px;
  min-height: 15px;
  margin: 0;
  background: transparent;
  border: 0;
  accent-color: var(--cmf-visual-command);
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  :is(.pcm-same-type-cb, .pcm-same-contrib-cb)::before,
html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  :is(.pcm-same-type-cb, .pcm-same-contrib-cb)::after {
  content: none;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .global-contribution-table {
  width: 100%;
  border-color: var(--cmf-visual-rule);
  background: var(--cmf-visual-surface-raised);
  font-family: var(--cmf-font-sans);
  font-size: 12px;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .global-contribution-table
  th {
  color: var(--cmf-visual-ink-secondary);
  background: var(--cmf-visual-surface);
  font-size: 11px;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .pcm-decision-table {
  font-family: var(--cmf-font-sans);
  font-size: 12px;
  border-color: var(--cmf-visual-rule);
  background: var(--cmf-visual-surface-raised);
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .pcm-decision-table
  :is(th, td) {
  padding: 8px 10px;
  border-bottom-color: var(--cmf-visual-rule);
  font-size: 12px;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .pcm-decision-table
  thead
  th,
html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .pcm-decision-table
  tr.pcm-sec
  td {
  color: var(--cmf-visual-ink-secondary);
  background: var(--cmf-visual-surface);
  background-image: none;
  font-family: var(--cmf-font-sans);
  font-size: 11px;
  font-weight: 700;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .pcm-decision-table
  .pcm-col-role,
html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .pcm-decision-table
  .pcm-total-note {
  font-size: 11px;
  letter-spacing: 0;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .pcm-decision-table
  .pcm-tier-enrollment {
  font-size: 11px;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .pcm-decision-table
  .pcm-unit-hint {
  margin-left: 12px;
  color: var(--cmf-visual-ink-tertiary);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .pcm-decision-table
  :is(.pcm-er-edit, .pcm-er-total-proposed) {
  background: var(--cmf-visual-surface-raised);
  box-shadow: inset 0 0 0 1px var(--cmf-visual-rule);
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .pcm-decision-table
  :is(.pcm-er-edit, .pcm-er-total-proposed)::before {
  content: none;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .pcm-decision-table
  :is(input, select) {
  font-family: var(--cmf-font-sans);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .pcm-decision-table
  :is(input, select):focus-visible {
  outline: 2px solid var(--cmf-visual-focus-ring);
  outline-offset: 1px;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .pcm-decision-table
  .pcm-er-edit {
  grid-template-columns: 90px minmax(68px, 1fr);
  gap: 4px;
  padding-left: 8px;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .pcm-decision-table
  .pcm-er-edit
  select.plan-contrib-type {
  width: 90px;
  min-width: 90px;
  min-height: 32px;
  padding: 0 5px;
  color: var(--cmf-visual-ink);
  background: var(--cmf-visual-surface-raised);
  border: 1px solid var(--cmf-visual-rule-strong);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .pcm-decision-table
  .pcm-er-edit
  select.plan-contrib-type.pcm-unit-source {
  display: none;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .pcm-unit-toggle {
  display: inline-flex;
  width: 90px;
  min-width: 90px;
  overflow: hidden;
  background: var(--cmf-visual-surface-raised);
  border: 1px solid var(--cmf-visual-rule-strong);
  border-radius: 6px;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .pcm-unit-btn {
  flex: 1 1 50%;
  min-width: 0;
  min-height: 32px;
  padding: 0;
  color: var(--cmf-visual-ink-secondary);
  background: transparent;
  border: 0;
  font-family: var(--cmf-font-sans);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .pcm-unit-btn
  + .pcm-unit-btn {
  border-left: 1px solid var(--cmf-visual-rule);
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .pcm-unit-btn[aria-pressed='true'] {
  color: var(--cmf-visual-command);
  background: var(--cmf-visual-command-tint);
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .pcm-unit-btn:focus-visible {
  outline: 2px solid var(--cmf-visual-focus-ring);
  outline-offset: -2px;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .pcm-decision-table
  .pcm-er-edit
  :is(.input-group, .input-group-suffix) {
  width: 100%;
  min-width: 0;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .pcm-decision-table
  .pcm-er-edit
  input.plan-contrib-value {
  width: 100%;
  min-width: 0;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .pcm-premiums-dock {
  color: var(--cmf-visual-ink);
  background: var(--cmf-visual-surface-raised);
  border-color: var(--cmf-visual-rule);
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .pcm-premiums-dock
  :is(th, td) {
  font-family: var(--cmf-font-sans);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .pcm-premiums-dock
  thead
  th {
  color: var(--cmf-visual-ink-secondary);
  background: var(--cmf-visual-surface);
  background-image: none;
  font-weight: 700;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
  .pcm-tier-filterbar {
  color: var(--cmf-visual-ink-secondary);
  background: var(--cmf-visual-surface-raised);
  border-color: var(--cmf-visual-rule);
}

@media (width >= 901px) {
  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .contrib-table-area {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 28%);
    grid-template-rows: min-content min-content min-content 40px minmax(0, 1fr);
    gap: 9px 12px;
    width: 100%;
    max-width: none;
    padding: 12px 16px;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .contrib-table-area
    > .contrib-sticky-header {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .contrib-table-area
    > .plan-contrib-modal-toolbar {
    grid-column: 1 / -1;
    grid-row: 2;
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 10px 12px;
    overflow: visible;
    background: var(--cmf-visual-surface);
    border-color: var(--cmf-visual-rule);
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .contrib-table-area
    > .pcm-plan-rules {
    display: flex;
    grid-column: 1;
    grid-row: 3;
    min-height: 44px;
    height: auto;
    padding: 6px 10px;
    overflow: visible;
    color: var(--cmf-visual-ink);
    background: var(--cmf-visual-surface-raised);
    border-color: var(--cmf-visual-rule);
  }

  /* The canonical linked mode and deduction actions stay in Case settings.
     Keep only the selected-plan identity and one-time actions in this strip. */
  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-plan-rules
    :is(.pcm-plan-rule-mode, .pcm-plan-rule-deductions) {
    display: none;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .contrib-table-area
    > .pcm-tier-filterbar {
    grid-column: 1;
    grid-row: 4;
    margin: 0;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .contrib-table-area
    > .tab-panels {
    grid-column: 1;
    grid-row: 5;
    min-height: 0;
    margin: 0;
    overflow: auto;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .contrib-table-area
    > .pcm-premiums-dock {
    display: flex;
    grid-column: 2;
    grid-row: 3 / 6;
    align-self: stretch;
    min-height: 0;
    margin: 0;
    overflow: auto;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .contrib-table-area
    > .pcm-cap-warning {
    grid-column: 2;
    grid-row: 3;
    height: auto;
    min-height: 0;
    max-height: none;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .contrib-table-area:has(> .pcm-cap-warning)
    > .pcm-premiums-dock {
    grid-row: 4 / 6;
    margin-top: 0;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .contrib-table-area
    > .pcm-autofill-feedback:not(:empty) {
    grid-column: 1 / -1;
    grid-row: 6;
  }
}

/* The assembled PCM adapter carries a more specific desktop grid rule in
   html-partials/styles.html. Keep its same DOM boundary while giving Signal A
   separate rows for selected-plan actions, filters, and the tier table. */
@media (width >= 1181px) {
  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench.pcm-native-workbench
    .contrib-table-area.cmf-wb-main {
    grid-template-columns: minmax(0, 1fr) minmax(380px, 34%);
    grid-template-rows: min-content min-content min-content 40px minmax(0, 1fr);
    gap: 9px 12px;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench.pcm-native-workbench
    .contrib-table-area.cmf-wb-main
    > .pcm-plan-rules {
    grid-column: 1;
    grid-row: 3;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench.pcm-native-workbench
    .contrib-table-area.cmf-wb-main
    > .pcm-tier-filterbar {
    grid-column: 1;
    grid-row: 4;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench.pcm-native-workbench
    .contrib-table-area.cmf-wb-main
    > .tab-panels {
    grid-column: 1;
    grid-row: 5;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench.pcm-native-workbench
    .contrib-table-area.cmf-wb-main
    > .pcm-premiums-dock {
    grid-column: 2;
    grid-row: 3 / 6;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench.pcm-native-workbench
    .contrib-table-area.cmf-wb-main
    > .pcm-cap-warning {
    grid-column: 2;
    grid-row: 3;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench.pcm-native-workbench
    .contrib-table-area.cmf-wb-main:has(> .pcm-cap-warning)
    > .pcm-premiums-dock {
    grid-row: 4 / 6;
    margin-top: 0;
  }
}

@media (width >= 901px) and (width <= 1180px) {
  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    > .cmf-header {
    flex-wrap: wrap;
    height: auto;
    min-height: 0;
    max-height: none;
    gap: 6px;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .cmf-header-content {
    flex: 1 1 100%;
    max-width: none;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .cmf-header-actions {
    flex: 1 1 100%;
    justify-content: flex-end;
    width: 100%;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .contrib-table-area.cmf-wb-main {
    display: flex;
    flex-direction: column;
    gap: 9px;
    overflow-y: auto;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .contrib-table-area.cmf-wb-main
    > :is(
      .contrib-sticky-header,
      .plan-contrib-modal-toolbar,
      .pcm-plan-rules,
      .pcm-tier-filterbar,
      .tab-panels,
      .pcm-premiums-dock
    ) {
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
    margin: 0;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .contrib-table-area.cmf-wb-main
    > .tab-panels {
    min-height: 430px;
    overflow-x: auto;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .contrib-table-area.cmf-wb-main
    > .pcm-premiums-dock {
    display: flex;
    min-height: 190px;
    max-height: none;
    overflow: auto;
  }
}

@media (width <= 900px) {
  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .contrib-table-area {
    display: flex;
    flex-direction: column;
    gap: 9px;
    width: 100%;
    max-width: none;
    padding: 12px;
    overflow-y: auto;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .contrib-table-area
    > .plan-contrib-modal-toolbar {
    order: 2;
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 10px;
    overflow: visible;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .contrib-table-area
    > .pcm-plan-rules {
    display: flex;
    order: 3;
    height: auto;
    max-height: none;
    overflow: visible;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-plan-rules
    :is(.pcm-plan-rule-mode, .pcm-plan-rule-deductions) {
    display: none;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .contrib-table-area
    > .pcm-tier-filterbar {
    display: flex;
    order: 4;
    flex: 0 0 auto;
    min-height: 32px;
    height: auto;
    overflow: visible;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .contrib-table-area
    > .pcm-cap-warning {
    order: 5;
    height: auto;
    min-height: 0;
    max-height: none;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .contrib-table-area
    > .tab-panels {
    order: 6;
    min-height: 300px;
    margin: 0;
    overflow: auto;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .contrib-table-area
    > .pcm-premiums-dock {
    display: flex;
    order: 7;
    flex: 0 0 auto;
    width: 100%;
    min-height: 190px;
    margin: 0;
    overflow: auto;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-pay-periods {
    display: flex;
    flex-wrap: wrap;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-pay-periods
    select {
    width: 170px;
    max-width: 170px;
    font-size: 12px;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-same-types-control {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
  }
}

@media (width <= 640px) {
  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-pay-periods {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 170px;
    align-items: center;
    gap: 6px 8px;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-pay-periods
    > label {
    grid-column: 1 / -1;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-pay-periods
    > select {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-same-types-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100%;
    gap: 6px;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-same-types-grid
    .pcm-same-type-chip {
    width: 100%;
  }
  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .cmf-header-eyebrow {
    font-size: 11px;
    letter-spacing: 0.08em;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .cmf-header-eyebrow::after,
  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .cmf-title::after {
    content: none;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .cmf-title {
    font-size: 19px;
    font-weight: 700;
    width: auto;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-model-btn[data-model='reference'] {
    font-size: 12px;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-model-btn[data-model='reference']::after {
    content: none;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    > .cmf-header {
    height: auto;
    min-height: 0;
    max-height: none;
    flex-wrap: wrap;
    gap: 8px;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .cmf-header-content {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .cmf-header-actions
    > .cmf-wb-metrics {
    grid-column: 1 / -1;
    grid-row: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 6px;
    margin: 0;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-metric:nth-child(1),
  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-metric:nth-child(2) {
    display: block;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-metric {
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 3px 6px;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-metric
    .cmf-wb-metric-value,
  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    :is(.pcm-metric-headline, .pcm-metric-configured)
    .cmf-wb-metric-value {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    :is(.pcm-metric-headline, .pcm-metric-configured)
    .cmf-wb-metric-value::after,
  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    :is(.pcm-metric-headline, .pcm-metric-configured)
    .cmf-wb-metric-label::after {
    content: none;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    :is(.pcm-metric-headline, .pcm-metric-configured)
    .cmf-wb-metric-label {
    font-size: 11px;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    :is(.pcm-metric-headline, .pcm-metric-configured) {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .cmf-header-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) 36px;
    width: 100%;
    gap: 5px;
    order: 3;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    [id='plan-contrib-walkthrough-btn']
    .pcm-header-action-label {
    display: none;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .cmf-header-actions
    .cmf-btn {
    display: inline-flex;
    min-height: 32px;
    padding: 5px 8px;
    font-size: 11px;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    #plan-contrib-market-btn,
  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    #plan-contrib-walkthrough-btn {
    display: inline-flex;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .cmf-wb-metric-label {
    font-size: 11px;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    > .cmf-workbench-body
    > .cmf-wb-rail {
    display: flex;
    max-height: 130px;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-cmf-body:not(.pcm-has-pane) {
    overflow-y: auto;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-cmf-body:not(.pcm-has-pane)
    > .plan-contrib-modal-toolbar {
    order: 0;
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-cmf-body:not(.pcm-has-pane)
    > .plan-contrib-modal-grid {
    order: 1;
    flex: 0 0 auto;
    min-height: 350px;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-cmf-body:not(.pcm-has-pane)
    > .pcm-premiums-dock {
    display: flex;
    order: 2;
    flex: 0 0 auto;
    min-height: 190px;
    margin: 10px 12px;
    overflow: auto;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    > .cmf-workbench-body
    > .cmf-wb-rail
    > .cmf-wb-search {
    display: block;
    order: 1;
    margin: 6px 9px;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    > .cmf-workbench-body
    > .cmf-wb-rail
    > .cmf-wb-rail-list {
    order: 2;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .contrib-table-area
    > .tab-panels {
    min-height: 360px;
    overflow-x: auto;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-global-table-area {
    overflow-x: auto;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-decision-table {
    display: table !important;
    min-width: 820px;
    width: 100%;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-decision-table
    thead
    th:first-child {
    width: 145px;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-decision-table
    thead
    th:nth-child(2) {
    width: 195px;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-decision-table
    thead
    th:nth-child(3),
  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-decision-table
    thead
    th:nth-child(4) {
    width: 240px;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-decision-table
    .pcm-unit-toggle {
    vertical-align: middle;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-decision-table
    .pcm-unit-btn {
    min-height: 40px;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-decision-table
    .pcm-er-edit
    :is(.input-group, .input-group-suffix) {
    display: inline-flex;
    width: 68px;
    min-width: 68px;
    min-height: 40px;
    vertical-align: middle;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-decision-table
    .pcm-er-edit
    input.plan-contrib-value {
    min-height: 40px;
    color: var(--cmf-visual-ink);
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-decision-table
    .pcm-er-edit
    input.plan-contrib-value:focus-visible {
    outline-color: var(--cmf-visual-focus-ring);
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-decision-table
    tbody {
    display: table-row-group;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-decision-table
    tfoot {
    display: table-footer-group;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-decision-table
    thead {
    display: table-header-group;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-decision-table
    thead
    tr {
    display: table-row;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-decision-table
    :is(thead tr, tr.pcm-prem-row, tr.pcm-er-row, tr.pcm-er-total-row)
    > :first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--cmf-visual-surface-raised);
    box-shadow: 1px 0 0 var(--cmf-visual-rule);
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-decision-table
    thead
    tr
    > :first-child {
    z-index: 4;
    background: var(--cmf-visual-surface);
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-decision-table
    :is(
      tr.pcm-prem-row,
      tr.pcm-sec,
      tr.pcm-er-row,
      tr.pcm-er-row[data-tier-id='child'],
      tr.pcm-er-total-row
    ) {
    display: table-row;
    height: auto;
    min-height: 0;
    max-height: none;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-decision-table
    tr.pcm-er-row
    td,
  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-decision-table
    tr.pcm-er-row
    td:first-child {
    display: table-cell;
    height: auto;
    min-height: 0;
    padding: 8px;
    white-space: normal;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-decision-table
    tr.pcm-er-row
    .pcm-tier-label {
    padding-right: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    line-height: 1.2;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-decision-table
    tr.pcm-er-row
    .pcm-tier-state {
    position: static;
    display: inline-flex;
    margin-top: 4px;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-decision-table
    tbody
    tr:not(.pcm-plan-tier-actions-row)
    > td {
    display: table-cell;
    min-width: 0;
    height: auto;
    padding: 8px 10px;
    border-bottom: 1px solid var(--cmf-visual-rule);
    background: var(--cmf-visual-surface-raised);
    white-space: nowrap;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-decision-table
    tbody
    tr
    td::before {
    display: none;
    content: none;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-decision-table
    tfoot
    tr
    > :is(th, td) {
    display: table-cell;
    min-width: 0;
    height: auto;
    padding: 8px 10px;
    white-space: nowrap;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-decision-table
    tfoot
    tr
    > :is(th, td)::before {
    content: none;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-premiums-dock {
    overflow-x: hidden;
  }

  /* The shared slot normally clips overflow. On phones it alone owns the
     horizontal scroll, keeping the summary title visible above the table. */
  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-premiums-dock
    .plan-contrib-modal-premiums-slot {
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-summary-scroll-hint {
    display: block;
    padding: 0 12px 6px;
    color: var(--cmf-visual-ink-secondary);
    font-size: 11px;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .plan-contrib-premiums-panel {
    flex: 0 0 auto;
    min-width: 500px;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .plan-contrib-premiums-panel
    table {
    overflow: visible !important;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .plan-contrib-premiums-panel
    tr
    > :first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--cmf-visual-surface-raised);
    box-shadow: 1px 0 0 var(--cmf-visual-rule);
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .plan-contrib-premiums-panel
    thead
    tr
    > :first-child {
    z-index: 3;
    background: var(--cmf-visual-surface);
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .plan-contrib-premiums-panel
    :is(th, td):nth-child(2),
  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .plan-contrib-premiums-panel
    :is(th, td):nth-child(3) {
    display: table-cell;
    width: 26%;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-decision-table
    .pcm-er-edit
    select {
    display: inline-block;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-decision-table
    td[data-col]::before {
    display: none;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-tier-filterbar {
    flex-wrap: wrap;
    height: auto;
    min-height: 32px;
    padding-block: 5px;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-table-scroll-hint {
    display: block;
    flex: 0 0 100%;
    color: var(--cmf-visual-ink-secondary);
    font-size: 11px;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    > .cmf-footer {
    height: auto;
    min-height: 115px;
    max-height: none;
    overflow: visible;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    > .cmf-footer
    .cmf-footer-left {
    display: flex;
    flex-wrap: wrap;
    min-height: 32px;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    > .cmf-footer
    .plan-contrib-clear-btn {
    display: inline-flex;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    > .cmf-footer
    :is(.pcm-footer-totals, .plan-contrib-save-status) {
    display: inline-flex;
    min-width: 0;
    font-size: 11px;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    > .cmf-footer {
    min-height: 136px;
    padding: 8px 12px;
    gap: 6px;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    > .cmf-footer
    .cmf-footer-left {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(3, auto);
    justify-items: stretch;
    width: 100%;
    min-height: 0;
    gap: 2px;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    > .cmf-footer
    .plan-contrib-clear-btn {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    > .cmf-footer
    .pcm-footer-totals {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    white-space: nowrap;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    > .cmf-footer
    .pcm-footer-tier-count {
    grid-column: 1;
    grid-row: 3;
    width: 100%;
    text-align: left;
    white-space: nowrap;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    > .cmf-footer
    .plan-contrib-save-status {
    grid-column: 1;
    grid-row: 4;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    > .cmf-footer
    .plan-contrib-save-status:empty {
    display: none;
  }
}

/* Plan Contributions decision flow. All three views use the same CMF shell,
   original plan renderer, and canonical tier inputs. The portfolio is a read
   projection of those rows; the worksheet remains the only contribution editor. */
html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom {
  --pcm-paper: var(--cmf-visual-surface);
  --pcm-raised: var(--cmf-visual-surface-raised);
  --pcm-rule: var(--cmf-visual-rule);
  --pcm-ink: var(--cmf-visual-ink);
  --pcm-muted: var(--cmf-visual-ink-secondary);
  --pcm-signal: var(--cmf-visual-command);
  font-family: var(--font-ui);
}

@media (width >= 1101px) {
  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-factory-rail:is(.pcm-worksheet-mode, .pcm-guided-mode)
    > .cmf-workbench-body {
    grid-template-columns: 310px minmax(0, 1fr);
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-factory-rail.pcm-guided-mode
    > .cmf-workbench-body {
    grid-template-columns: 330px minmax(0, 1fr);
  }
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-portfolio-mode.pcm-factory-rail
  > .cmf-workbench-body {
  grid-template-columns: minmax(0, 1fr);
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-portfolio-mode
  > .cmf-workbench-body
  > .cmf-wb-rail,
html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-portfolio-mode
  .pcm-cmf-body
  > :not(.pcm-portfolio),
html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-portfolio-mode
  .pcm-overview-toggle {
  display: none;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-portfolio-mode
  > .cmf-workbench-body
  > .cmf-wb-main,
html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-portfolio-mode
  .pcm-cmf-body {
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  padding: 0;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom
  .pcm-portfolio:not([hidden]) {
  display: grid;
  /* 340px keeps three money cards and the four-column tier table whole at
     ~1100-1200px (the browser pane), where 320px less a scrollbar split them. */
  grid-template-columns: minmax(0, 72%) minmax(340px, 28%);
  width: 100%;
  height: 100%;
  min-height: 0;
  background: var(--pcm-paper);
  color: var(--pcm-ink);
}

html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-portfolio-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 18px 24px 12px;
  overflow: hidden;
}

html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-portfolio-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 16px;
}

html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-portfolio-heading h3 {
  margin: 0;
  color: var(--pcm-ink);
  font: 700 26px/1.2 var(--font-ui);
  letter-spacing: -0.035em;
}

html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-portfolio-heading p {
  margin: 3px 0 0;
  color: var(--pcm-muted);
  font-size: 13px;
}

html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-portfolio-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

/* The search gives up width before the actions get pushed off the edge. */
html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-portfolio-search {
  width: 250px;
  min-width: 160px;
  flex: 0 1 250px;
  height: 36px;
  background: var(--pcm-raised);
}

html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-review-next {
  min-height: 36px;
  white-space: nowrap;
}

html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-portfolio-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 13px;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom
  .pcm-portfolio-filters
  button {
  border: 1px solid var(--pcm-rule);
  border-radius: 7px;
  background: var(--pcm-raised);
  color: var(--pcm-muted);
  font: 600 12px var(--font-ui);
  padding: 8px 14px;
  cursor: pointer;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom
  .pcm-portfolio-filters
  button[aria-pressed='true'] {
  border-color: var(--pcm-signal);
  color: var(--pcm-signal);
  background: var(--cmf-visual-command-tint);
}

html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-portfolio-table-wrap {
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--pcm-rule);
  border-radius: 8px;
  background: var(--pcm-raised);
}

html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-portfolio-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom
  .pcm-portfolio-table
  th:first-child {
  width: 23%;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom
  .pcm-portfolio-table
  th:nth-child(2) {
  width: 10%;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom
  .pcm-portfolio-table
  th:nth-child(3) {
  width: 17%;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom
  .pcm-portfolio-table
  th:nth-child(7) {
  width: 12%;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom
  .pcm-portfolio-table
  :is(th, td) {
  padding: 9px 10px;
  border-bottom: 1px solid var(--pcm-rule);
  text-align: left;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom
  .pcm-portfolio-table
  thead
  th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--cmf-visual-rail);
  color: var(--pcm-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 11px;
}

html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-portfolio-group th {
  background: var(--cmf-visual-rail);
  color: var(--pcm-ink);
  font-size: 12px;
  font-weight: 700;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom
  .pcm-portfolio-row.is-selected {
  background: var(--cmf-visual-command-tint);
  box-shadow: inset 3px 0 var(--pcm-signal);
}

html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-portfolio-row button {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--pcm-ink);
  font: 650 11.5px var(--font-ui);
  text-align: left;
  cursor: pointer;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom
  .pcm-portfolio-table
  .is-review {
  color: var(--cmf-state-warning-ink);
  font-weight: 700;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom
  .pcm-portfolio-table
  .is-ready {
  color: var(--cmf-state-success-ink);
  font-weight: 650;
}

html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-portfolio-inspector {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  border-left: 1px solid var(--pcm-rule);
  background: var(--pcm-raised);
  padding: 20px 18px;
  font-size: 12px;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom
  .pcm-portfolio-inspector
  > small {
  color: var(--pcm-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom
  .pcm-portfolio-inspector
  h4 {
  margin: 5px 0 4px;
  font-size: 17px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom
  .pcm-portfolio-inspector
  > p {
  margin: 0 0 16px;
  color: var(--pcm-muted);
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom
  .pcm-portfolio-inspector
  hr {
  border: 0;
  border-top: 1px solid var(--pcm-rule);
  margin: 16px 0;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom
  .pcm-portfolio-inspector
  h5 {
  margin: 18px 0 10px;
  font-size: 12px;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom
  :is(.pcm-inspector-metric, .pcm-inspector-tier) {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--pcm-rule);
  font-variant-numeric: tabular-nums;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom
  .pcm-inspector-metric
  strong {
  font-size: 16px;
}

html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-inspector-warning {
  margin: 16px 0;
  padding: 12px;
  border: 1px solid var(--cmf-state-warning-border);
  border-radius: 8px;
  background: var(--cmf-state-warning-bg);
  color: var(--cmf-state-warning-ink);
  font-weight: 650;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom
  :is(.pcm-inspector-open, .pcm-inspector-review) {
  width: 100%;
  justify-content: center;
  margin-top: 10px;
}

html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-ready-status {
  font-size: 12px;
  font-weight: 700;
  color: var(--cmf-state-warning-ink);
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom
  .pcm-overview-toggle:not([hidden]) {
  display: inline-flex;
}

/* Worksheet follows the mockup's rail, central edit table, and right impact
   track. Existing table controls and premium dock stay mounted and active. */
html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode {
  --cmf-wb-rail-width: 300px;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .contrib-table-area.cmf-wb-main {
  position: relative;
  grid-template-columns: minmax(0, 2.2fr) minmax(270px, 1fr);
  grid-template-rows: min-content min-content min-content 34px minmax(0, 1fr);
  gap: 12px;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-decision-table {
  font-size: 12px;
  background: var(--pcm-raised);
  border-color: var(--pcm-rule);
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-decision-table
  thead
  th,
html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-decision-table
  tr.pcm-sec
  td {
  background: var(--cmf-visual-rail);
  color: var(--pcm-ink);
  font-size: 11px;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-decision-table
  .pcm-er-edit {
  background: var(--pcm-raised);
  box-shadow: none;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-decision-table
  .pcm-er-edit::before {
  display: none;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-premiums-dock {
  background: var(--pcm-raised);
  border: 1px solid var(--pcm-rule);
  border-radius: 8px;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-premiums-dock
  .plan-contrib-modal-premiums-slot {
  flex-shrink: 0;
  height: auto;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-premiums-dock
  :is(th, td) {
  padding: 4px 3px !important;
  font-size: 9.5px;
}

/* Guided review keeps the original plan rail and native tier row reachable.
   The explicit decision and impact cards occupy the mockup's center/right. */
html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom.pcm-guided-mode {
  --cmf-wb-rail-width: 300px;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-guided-mode
  .contrib-table-area.cmf-wb-main {
  grid-template-columns: minmax(0, 2.5fr) minmax(270px, 1fr);
  grid-template-rows: min-content minmax(0, 1fr);
  padding: 0;
  gap: 0;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-guided-mode
  .contrib-table-area.cmf-wb-main
  > :not(.pcm-guided-flow) {
  display: none;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-guided-mode
  .pcm-guided-flow {
  display: grid;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  grid-template-columns: minmax(0, 2.5fr) minmax(270px, 1fr);
  grid-template-rows: 58px minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  background: var(--pcm-paper);
}

@media (width >= 1101px) {
  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-guided-mode
    > .cmf-workbench-body {
    grid-template-rows: 58px minmax(0, 1fr);
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-guided-mode
    > .cmf-workbench-body
    > .cmf-wb-rail {
    grid-column: 1;
    grid-row: 2;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-guided-mode
    > .cmf-workbench-body
    > .cmf-wb-main {
    grid-column: 2;
    grid-row: 2;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-guided-mode
    .pcm-guided-flow {
    grid-template-rows: minmax(0, 1fr);
  }
}

html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-guided-progress {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 8px;
  border-bottom: 1px solid var(--pcm-rule);
  background: var(--pcm-raised);
  font-size: 12px;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-guided-mode
  > .cmf-workbench-body
  > .pcm-guided-progress {
  width: 100%;
  height: 58px;
}

@media (width <= 1100px) {
  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-guided-mode
    > .cmf-workbench-body {
    grid-template-rows: 58px minmax(0, 1fr);
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-guided-mode
    > .cmf-workbench-body
    > .cmf-wb-rail,
  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-guided-mode
    > .cmf-workbench-body
    > .cmf-wb-main {
    grid-row: 2;
  }
}

@media (width <= 640px) {
  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-guided-mode
    > .cmf-workbench-body {
    grid-template-rows: 58px 53px minmax(0, 1fr);
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-guided-mode
    > .cmf-workbench-body
    > .cmf-wb-rail {
    grid-column: 1;
    grid-row: 2;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-guided-mode
    > .cmf-workbench-body
    > .cmf-wb-main {
    grid-column: 1;
    grid-row: 3;
  }
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom
  .pcm-guided-progress
  .is-done {
  color: var(--cmf-state-success-ink);
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom
  .pcm-guided-progress
  strong {
  color: var(--pcm-signal);
}

html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-guided-center {
  min-width: 0;
  overflow: auto;
  padding: 20px;
}

html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-guided-plan {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
}

html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-guided-center h3 {
  margin: 0;
  font-size: 25px;
  letter-spacing: -0.03em;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom
  .pcm-guided-center
  > p:not(.pcm-guided-plan) {
  color: var(--pcm-muted);
  font-size: 13px;
}

html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-guided-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 20px 0;
}

html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-guided-metrics > div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  min-height: 118px;
  padding: 12px;
  border: 1px solid var(--pcm-rule);
  border-radius: 8px;
  background: var(--pcm-raised);
}

html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-guided-metrics small {
  color: var(--pcm-muted);
  font-size: 11px;
}

html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-guided-metrics strong {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-guided-tiers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--pcm-rule);
}

html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-guided-tiers-head {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: 13px;
}

html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-guided-tier-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 120px;
  padding: 12px;
  border: 1px solid var(--pcm-rule);
  border-radius: 8px;
  background: var(--pcm-raised);
  color: var(--pcm-ink);
  text-align: left;
  cursor: pointer;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom
  .pcm-guided-tier-card.is-active {
  border-color: var(--pcm-signal);
  background: var(--cmf-visual-command-tint);
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom
  .pcm-guided-tier-card
  :is(strong, small, span) {
  display: block;
  width: 100%;
  line-height: 1.3;
  margin-bottom: 12px;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom
  .pcm-guided-tier-card
  small {
  color: var(--pcm-muted);
}

html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-guided-tier-card span {
  color: var(--pcm-signal);
  font-weight: 700;
}

html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-guided-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-guided-impact {
  min-width: 0;
  padding: 20px;
  border-left: 1px solid var(--pcm-rule);
  background: var(--pcm-raised);
}

html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-guided-impact h4 {
  margin: 0 0 14px;
  font-size: 17px;
}

html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-guided-cost {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--pcm-rule);
  border-radius: 8px;
}

html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-guided-cost strong {
  color: var(--pcm-signal);
  font-size: 25px;
  font-variant-numeric: tabular-nums;
}

html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-guided-cost-line {
  padding: 12px 0;
  font-variant-numeric: tabular-nums;
}

html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-guided-warning,
html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-guided-tip {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--cmf-state-warning-border);
  border-radius: 8px;
  background: var(--cmf-state-warning-bg);
  color: var(--cmf-state-warning-ink);
  font-size: 12px;
  line-height: 1.5;
}

html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-guided-tip {
  border-color: var(--cmf-state-success-border);
  background: var(--cmf-state-success-bg);
  color: var(--cmf-state-success-ink);
}

@media (width <= 1100px) {
  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom
    .pcm-portfolio:not([hidden]) {
    grid-template-columns: minmax(0, 1fr);
    /* Stacked: each block keeps its natural height and the portfolio
       scrolls. Shared rows squeezed the plan table to its header row. */
    grid-template-rows: none;
    grid-auto-rows: max-content;
    overflow: auto;
  }

  html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-portfolio-main {
    overflow: visible;
  }

  html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-portfolio-inspector {
    border-top: 1px solid var(--pcm-rule);
    border-left: 0;
  }

  html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-guided-flow {
    grid-template-columns: minmax(0, 1fr);
    overflow: auto;
  }

  html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-guided-impact {
    border-top: 1px solid var(--pcm-rule);
    border-left: 0;
  }
}

@media (width <= 700px) {
  html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-portfolio-heading,
  html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-portfolio-tools {
    flex-direction: column;
    align-items: stretch;
  }

  html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-portfolio-search {
    width: 100%;
  }

  html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-guided-metrics,
  html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-guided-tiers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom
  > .cmf-footer
  .cmf-footer-left {
  display: grid;
  grid-template-columns: max-content minmax(160px, 1fr) max-content;
  column-gap: 14px;
  align-items: center;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom
  > .cmf-footer
  .pcm-ready-status {
  grid-column: 3;
  grid-row: 1 / 3;
  margin: 0;
  white-space: nowrap;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-worksheet-heading {
  padding: 14px 16px 10px;
  border: 1px solid var(--pcm-rule);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: var(--pcm-raised);
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-worksheet-heading
  h3 {
  margin: 0 0 3px;
  color: var(--pcm-ink);
  font-size: 17px;
  font-weight: 700;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-worksheet-heading
  p {
  margin: 0;
  color: var(--pcm-muted);
  font-size: 11px;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-worksheet-table {
  width: 100%;
  min-width: 700px;
  table-layout: fixed;
  border-radius: 0 0 8px 8px;
  font-variant-numeric: tabular-nums;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-worksheet-table
  :is(th, td) {
  padding: 9px 7px;
  white-space: normal;
  font-size: 11px;
  vertical-align: middle;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-worksheet-table
  thead
  th {
  font-size: 10.5px;
  text-align: right;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-worksheet-table
  thead
  th:first-child,
html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-worksheet-table
  tbody
  td:first-child {
  width: 18%;
  text-align: left;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-worksheet-table
  thead
  th:nth-child(2) {
  width: 8%;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-worksheet-table
  thead
  th:nth-child(3),
html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-worksheet-table
  thead
  th:nth-child(4) {
  width: 13%;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-worksheet-table
  thead
  th:nth-child(5) {
  width: 22%;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-worksheet-table
  thead
  th:nth-child(6),
html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-worksheet-table
  thead
  th:nth-child(7) {
  width: 13%;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-worksheet-table
  :is(.pcm-prem-row, .pcm-sec, .pcm-er-total-row, td[hidden]) {
  display: none;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-worksheet-table
  .pcm-tier-enrollment {
  display: none;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-worksheet-table
  .pcm-er-edit {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 7px 4px;
  background: var(--pcm-raised);
  box-shadow: none;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-worksheet-table
  .pcm-unit-toggle {
  flex: 0 0 auto;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-worksheet-table
  .pcm-er-edit
  .input-group,
html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-worksheet-table
  .pcm-er-edit
  .input-group-suffix {
  flex: 1;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-worksheet-table
  .pcm-er-edit
  input {
  width: 100%;
  height: 30px;
  border: 1px solid var(--pcm-rule);
  border-radius: 6px;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-worksheet-table
  .pcm-worksheet-members,
html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-worksheet-table
  .pcm-worksheet-money {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-worksheet-note {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  margin: 10px 0 14px;
  border: 1px solid var(--cmf-state-info-border);
  border-radius: 7px;
  background: var(--cmf-state-info-bg);
  color: var(--cmf-state-info-ink);
  font-size: 11px;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-worksheet-premiums {
  padding-top: 12px;
  border-top: 1px solid var(--pcm-rule);
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-worksheet-premiums
  h4 {
  margin: 0 0 9px;
  font-size: 13px;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-worksheet-premiums
  table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-worksheet-premiums
  :is(th, td) {
  padding: 6px 8px;
  border: 1px solid var(--pcm-rule);
  text-align: right;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-worksheet-premiums
  :is(th, td):first-child {
  text-align: left;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-worksheet-premiums
  th {
  background: var(--cmf-visual-rail);
}

@media (width <= 900px) {
  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom
    > .cmf-footer
    .cmf-footer-left {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom
    > .cmf-footer
    .pcm-ready-status {
    grid-column: 1;
    grid-row: auto;
    white-space: normal;
  }
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .plan-contrib-modal-toolbar {
  padding: 10px 14px;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-case-settings-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 8px 16px;
  align-items: center;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-case-settings-panel
  > :not(.pcm-model-field, .pcm-rules-toggle, .pcm-benefit-field) {
  display: none;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode.pcm-rules-open
  .pcm-case-settings-panel
  > :not(.pcm-model-field, .pcm-rules-toggle, .pcm-benefit-field) {
  display: flex;
  grid-column: 1 / -1;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-rules-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
  white-space: nowrap;
}

/* The cap warning takes its own slot at the top of the right column, above
   Projected impact, while the plan table spans down beside it. It used to be
   absolutely positioned over a padded dock and covered the dock heading
   whenever the warning ran taller than the padding. Rows: header, toolbar,
   filterbar (row 3, plan rules hidden), warning overflow, table/dock. */
@media (width > 1100px) {
  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
    .contrib-table-area.cmf-wb-main:has(> .pcm-plan-rules[hidden]):has(> .pcm-cap-warning) {
    grid-template-rows: auto auto 32px auto minmax(0, 1fr);
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
    .contrib-table-area.cmf-wb-main:has(> .pcm-plan-rules[hidden]):has(> .pcm-cap-warning)
    > .pcm-tier-filterbar {
    grid-row: 3;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
    .contrib-table-area.cmf-wb-main:has(> .pcm-plan-rules[hidden]):has(> .pcm-cap-warning)
    > .pcm-plan-panels {
    grid-row: 4 / 6;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
    .contrib-table-area.cmf-wb-main:has(> .pcm-plan-rules[hidden])
    > .pcm-cap-warning {
    position: static;
    grid-row: 3 / 5;
    align-self: start;
    width: auto;
    margin: 0 0 12px;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
    .contrib-table-area.cmf-wb-main:has(> .pcm-plan-rules[hidden]):has(> .pcm-cap-warning)
    > .pcm-premiums-dock {
    grid-row: 5;
    padding-top: 0;
  }
}

/* Plan rules open: the rules panel owns row 3, so the warning floats as before. */
html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .contrib-table-area.cmf-wb-main:not(:has(> .pcm-plan-rules[hidden]))
  > .pcm-cap-warning {
  position: absolute;
  flex: 0 0 auto;
  top: 53px;
  right: 18px;
  width: calc(100% - 18px);
  z-index: 1;
}

@media (width >= 641px) {
  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
    .pcm-cap-warning
    .pcm-cap-long {
    display: block;
  }
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-cap-warning
  .pcm-review-tier-link {
  display: block;
  width: max-content;
  margin-top: 5px;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: var(--cmf-visual-command);
  font: 600 12px/16px var(--font-ui);
  text-decoration: underline;
  cursor: pointer;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .contrib-table-area.cmf-wb-main:has(> .pcm-cap-warning)
  > .pcm-premiums-dock {
  grid-row: 3 / 6;
  padding-top: 150px;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-premiums-dock-title {
  font-size: 14px;
}

@media (width <= 1100px) {
  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
    .contrib-table-area.cmf-wb-main
    > .pcm-cap-warning {
    position: static;
    width: auto;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
    .contrib-table-area.cmf-wb-main:has(> .pcm-cap-warning)
    > .pcm-premiums-dock {
    padding-top: 0;
  }
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-case-settings-panel
  > .pcm-model-field {
  order: 0;
  grid-column: 1;
  justify-self: start;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-case-settings-panel
  > .pcm-rules-toggle {
  order: 1;
  grid-column: 2;
}

/* The legacy renderer writes display:flex inline during every refresh. */
html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode:not(.pcm-rules-open)
  .pcm-case-settings-panel
  > .pcm-linked-mirror-control {
  display: none !important;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode.pcm-rules-open
  .pcm-case-settings-panel
  > .pcm-linked-mirror-control {
  display: flex !important;
}

html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-guided-employer-field {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border: 1px solid var(--pcm-rule);
  border-radius: 7px;
  background: var(--pcm-paper);
  font-size: 16px;
  font-weight: 700;
}

html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-guided-employer-input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-guided-slider {
  width: 100%;
  margin: 2px 0 20px;
  accent-color: var(--pcm-signal);
}

html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-inspector-cost-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 10px 0 4px;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom
  .pcm-inspector-cost-cards
  > div {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--pcm-rule);
  border-radius: 7px;
  background: var(--pcm-paper);
  font-variant-numeric: tabular-nums;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom
  .pcm-inspector-cost-cards
  small {
  font-size: 10px;
  color: var(--pcm-muted);
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom
  .pcm-inspector-cost-cards
  strong {
  /* A figure never breaks between digits ("$1,216.3" / "5"). */
  white-space: nowrap;
  font-size: 13px;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom
  .pcm-inspector-cost-cards
  > div {
  padding-inline: 8px;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom
  .pcm-inspector-cost-cards
  > div:last-child {
  border-color: var(--cmf-state-danger-border);
  background: var(--cmf-state-danger-bg);
  color: var(--cmf-state-danger-ink);
}

html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-inspector-cost-note {
  margin: 4px 0 12px;
  font-size: 11px;
  color: var(--pcm-muted);
}

html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-inspector-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom
  .pcm-inspector-table
  :is(th, td) {
  padding: 7px 5px;
  border-bottom: 1px solid var(--pcm-rule);
  text-align: right;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom
  .pcm-inspector-table
  :is(th, td):first-child {
  width: 34%;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Three money columns share ~66% of a 320px inspector: keep each figure on
   one line ("$1,216.35" was splitting and overrunning the next cell). */
html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom
  .pcm-inspector-table
  :is(th, td):not(:first-child) {
  padding-inline: 3px;
  white-space: nowrap;
  letter-spacing: 0;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom
  .pcm-inspector-table
  td:not(:first-child) {
  font-size: 11px;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom
  .pcm-inspector-table
  :is(th, td):first-child {
  text-align: left;
}

html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-inspector-table th {
  color: var(--pcm-muted);
  text-transform: uppercase;
  font-size: 10px;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-projected-impact {
  padding: 14px 14px 16px;
  border-bottom: 1px solid var(--pcm-rule);
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-projected-impact
  h4 {
  margin: 0;
  color: var(--pcm-ink);
  font-size: 17px;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-projected-impact
  > p {
  margin: 3px 0 12px;
  color: var(--pcm-muted);
  font-size: 11px;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-projected-impact-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-projected-impact-cards
  > div,
html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-projected-total {
  display: grid;
  gap: 6px;
  padding: 11px;
  border: 1px solid var(--pcm-rule);
  border-radius: 7px;
  background: var(--pcm-paper);
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-projected-impact-cards
  small,
html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-projected-total
  span {
  color: var(--pcm-muted);
  font-size: 10px;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  :is(.pcm-projected-impact-cards, .pcm-projected-total)
  strong {
  color: var(--pcm-ink);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-projected-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 8px;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-projected-total
  small {
  color: var(--cmf-state-danger-ink);
  font-size: 11px;
  font-weight: 700;
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-projected-bar {
  height: 15px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 5px;
  background: var(--cmf-state-success-bg);
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-projected-bar
  span {
  display: block;
  height: 100%;
  background: var(--cmf-state-success-ink);
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-projected-legend {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 7px;
  color: var(--pcm-muted);
  font-size: 10px;
}

/* Keep the shared-model route beside the worksheet title. A separate callout
   consumed most of the short desktop table viewport. */
html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-shared-plan-notice {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 3px 10px;
  min-width: 0;
  color: var(--cmf-visual-ink-secondary);
}

html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .pcm-worksheet-heading
  .pcm-shared-plan-notice
  .pcm-edit-shared {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cmf-visual-command);
  font: 600 11px/1.4 var(--font-ui);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

/* The inner plan section must expose a wider table to the actual scroll pane.
   Its former overflow:hidden clipped columns without giving users a scrollbar. */
html[data-product-theme^='planlined']
  #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
  .tab-panels
  > .tab-panel.active {
  overflow: visible;
}

@media (width >= 1181px) {
  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
    .pcm-global-table-area {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: min-content minmax(0, 1fr);
    gap: 0;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
    .pcm-global-table-area
    > .pcm-global-sticky-header {
    grid-column: 1;
    grid-row: 1;
    height: auto;
    min-height: 0;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
    .pcm-global-table-area
    > .pcm-global-tab-panels {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
  }
}

@media (width >= 1181px) and (width <= 1400px) {
  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .cmf-header-content {
    flex: 0 0 305px;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .cmf-header-actions {
    gap: 6px;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .cmf-wb-metric {
    padding-inline: 9px;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .pcm-metric
    .cmf-wb-metric-value {
    font-size: 17px;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .cmf-header-actions
    .cmf-btn {
    gap: 4px;
    padding: 6px;
    font-size: 11px;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .cmf-header-actions
    .pcm-header-action-label {
    font-size: 11px;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-factory-rail.pcm-worksheet-mode
    > .cmf-workbench-body {
    grid-template-columns: 255px minmax(0, 1fr);
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench.pcm-native-workbench.pcm-factory-rail.pcm-worksheet-mode
    .contrib-table-area.cmf-wb-main {
    grid-template-columns: minmax(0, 1fr) 330px;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
    .pcm-worksheet-table {
    min-width: 590px;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
    .pcm-worksheet-table
    :is(th, td) {
    padding-inline: 5px;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
    .pcm-worksheet-table
    thead
    th {
    overflow: hidden;
    text-overflow: clip;
    font-size: 11px;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
    .pcm-worksheet-table
    thead
    th:nth-child(2) {
    width: 9%;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
    .pcm-worksheet-table
    thead
    th:nth-child(5) {
    width: 21%;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
    .pcm-worksheet-table
    .pcm-unit-toggle {
    width: 60px;
    min-width: 60px;
  }
}

@media (width >= 641px) and (width <= 900px) {
  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    > .cmf-header {
    height: auto;
    min-height: 0;
    max-height: none;
    flex-wrap: wrap;
    gap: 6px;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .cmf-header-content {
    flex: 1 1 100%;
    max-width: none;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .cmf-header-actions {
    flex: 1 1 100%;
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .cmf-header-actions
    > .cmf-wb-metrics {
    flex: 1 1 100%;
    width: 100%;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench.pcm-native-workbench.pcm-worksheet-mode
    .pcm-case-settings-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench.pcm-native-workbench.pcm-worksheet-mode
    .pcm-case-settings-panel
    > .pcm-rules-toggle {
    grid-column: 1;
    justify-self: start;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench.pcm-worksheet-mode
    .pcm-plan-rules {
    flex-wrap: wrap;
    height: auto;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench.pcm-worksheet-mode
    .pcm-plan-rules
    > :is(.pcm-plan-rule-identity, .pcm-apply-er-proxy) {
    max-width: 100%;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    > .cmf-footer {
    height: auto;
    min-height: 82px;
    max-height: none;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding-block: 8px;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    > .cmf-footer
    .cmf-footer-left {
    flex: 1 1 100%;
    width: 100%;
    min-height: 0;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    > .cmf-footer
    .cmf-footer-right {
    margin-left: auto;
  }
}

@media (width <= 640px) {
  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .cmf-header-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) 36px 36px;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-cmf-workbench
    .cmf-header-actions
    > .cmf-wb-metrics {
    grid-column: 1 / -1;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
    .pcm-plan-rules {
    flex-wrap: wrap;
    height: auto;
  }

  html[data-product-theme^='planlined']
    #plan-contrib-modal.cmf-boardroom.pcm-worksheet-mode
    .pcm-plan-rules
    > :is(.pcm-plan-rule-identity, .pcm-apply-er-proxy) {
    max-width: 100%;
  }
}

/* Plan Contributions Pop-out: Advanced panel for the three legacy models
   (lowest-cost reference, tiered reference, progressive caps). Built by
   __pcmSyncAdvancedModel in shell-inline-27.js. */
#plan-contrib-modal .pcm-advanced-settings {
  display: grid;
  gap: var(--space-1, 8px);
  padding: var(--space-1-5, 12px) var(--space-2, 16px);
}

#plan-contrib-modal .pcm-advanced-settings[hidden],
#plan-contrib-modal .pcm-advanced-model-btn[hidden] {
  display: none;
}

#plan-contrib-modal .pcm-advanced-bracket {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-1-5, 12px);
}

/* Slate workbench rail: the current step carries the 2px Signal mark (DESIGN.md),
   icon plates are ink on the band tint, chips keep ok / warn / info tones. */
:root[data-product-theme='planlined-slate']
  .cmf-workbench-modal
  .cmf-wb-rail-item[aria-current='true'] {
  background: var(--cmf-visual-command-tint);
  border-color: transparent;
  box-shadow: inset 2px 0 0 var(--pl-signal);
  font-weight: 600;
}
:root[data-product-theme='planlined-slate'] .cmf-workbench-modal .cmf-wb-rail-icon {
  color: var(--pl-text-muted);
  background: var(--cmf-visual-rail);
  border: 1px solid var(--cmf-visual-rule-strong);
}
:root[data-product-theme='planlined-slate']
  .cmf-workbench-modal
  .cmf-wb-rail-item[aria-current='true']
  .cmf-wb-rail-icon,
:root[data-product-theme='planlined-slate']
  .cmf-workbench-modal
  .cmf-wb-rail-item.needs-review
  .cmf-wb-rail-icon {
  color: var(--pl-ink);
  background: var(--cmf-visual-surface);
}
:root[data-product-theme='planlined-slate'] .cmf-workbench-modal .cmf-wb-meter-caption:empty {
  display: none;
}
@media (max-width: 767px) {
  /* Phone: one Signal primary per row, 44px targets; the body is one grid row. */
  :root[data-product-theme='planlined-slate'] .cmf-workbench-modal > .cmf-workbench-body {
    grid-template-rows: minmax(0, 1fr);
  }
  :root[data-product-theme='planlined-slate'] .cmf-workbench-modal > .cmf-footer {
    max-height: none;
    flex-wrap: wrap;
  }
  :root[data-product-theme='planlined-slate'] .cmf-workbench-modal > .cmf-footer .cmf-footer-right {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  :root[data-product-theme='planlined-slate']
    .cmf-workbench-modal
    > .cmf-footer
    .cmf-footer-right
    .cmf-btn-primary {
    grid-column: 1 / -1;
    order: -1;
    width: 100%;
    height: 44px;
    justify-content: center;
  }
  :root[data-product-theme='planlined-slate']
    .cmf-workbench-modal
    > .cmf-footer
    .cmf-footer-right
    .cmf-btn {
    min-height: 44px;
  }
}

/* The overview's shared-amounts action wrapped to two lines beside the search. */
html[data-product-theme^='planlined'] #plan-contrib-modal.cmf-boardroom .pcm-edit-shared {
  white-space: nowrap;
}