/* Planlined Signal — product-wide application layer
   Source of truth: /DESIGN.md and the live planlined.com palette.

   Ink is structural chrome, paper is the reading surface, and Signal red is
   reserved for decisions. The darker action red preserves the Signal hue while
   giving white control labels an 8.24:1 contrast ratio. This sheet loads last
   because several legacy modules still own hard-coded Aurora teal/blue values. */

/* stylelint-disable no-descending-specificity, selector-max-id */

/* Plan Tools is shared by Step 3 and ReportUI. Keep informational icons on
   the semantic palette instead of allowing its legacy inline blue to bypass
   the permanent product-theme anchor. */
html[data-product-theme^='planlined']
  .plan-tools-menu:not(.plan-tools-menu--s3u)
  .plan-tools-item-info
  i {
  color: var(--semantic-state-info-ink) !important;
}

html[data-product-theme^='planlined']
  .plan-tools-menu.plan-tools-menu--s3u
  .plan-tools-item-info
  i {
  color: var(--semantic-state-info-border) !important;
}

/* Benefit Comparison values are inline spreadsheet editors, not form fields.
   Keep their resting state quiet and compact; reveal the edit affordance only
   on interaction. The mobile cascade intentionally retains 16px touch inputs.

   The "Verify Benefit-IDs Against Source Document" modal renders the SAME row
   list against the source PDF, so its value cells are the same kind of control
   and take the same treatment here rather than a second copy in feature CSS.
   They need it from this layer: the generic
   `html[data-product-theme] :where(input, ...)` rule above is 0-1-1 and
   outranks any plain class a feature sheet can write. */
@media (width >= 769px) {
  html[data-product-theme^='planlined']
    :is(#report-container, #step-5-preview-render-area)
    [id^='report-section-benefits']
    .benefit-table
    input.benefit-input,
  html[data-product-theme^='planlined'] .pdf-verify-benefits-list input.pdf-verify-benefit-input {
    height: 24px;
    min-height: 24px;
    padding: 2px 4px;
    border-color: transparent;
    border-radius: 6px;
    background-color: transparent;
    font-size: 0.75rem;
    line-height: 1.2;
  }

  html[data-product-theme^='planlined']
    :is(#report-container, #step-5-preview-render-area)
    [id^='report-section-benefits']
    .benefit-table
    input.benefit-input:hover:not(:focus),
  html[data-product-theme^='planlined']
    .pdf-verify-benefits-list
    input.pdf-verify-benefit-input:hover:not(:focus) {
    border-color: var(--pl-rule-strong);
    background-color: var(--pl-paper);
  }

  html[data-product-theme^='planlined']
    :is(#report-container, #step-5-preview-render-area)
    [id^='report-section-benefits']
    .benefit-table
    input.benefit-input:is(:focus, :focus-visible),
  html[data-product-theme^='planlined']
    .pdf-verify-benefits-list
    input.pdf-verify-benefit-input:is(:focus, :focus-visible) {
    border-color: var(--pl-focus-stroke, var(--pl-signal)) !important;
    background-color: var(--pl-paper) !important;
    box-shadow: 0 0 0 4px var(--pl-focus) !important;
  }
}

/* Shared operational shell ------------------------------------------------ */
html[data-product-theme^='planlined'] .cmf-overlay {
  background: rgb(11 14 21 / 58%);
}

/* The standalone Vue page roots are the same product boundary as a CMF modal
   shell -- they consume --cmf-* roles with no .cmf-modal ancestor, so without
   them every --cmf-visual-* token falls back to the cool default palette in
   design-tokens.css and the page reads cold against the warm Planlined shell. */
html[data-product-theme^='planlined'] .cmf-modal {
  /* Modal-local compatibility boundary. Workspace/report appearance controls
     write legacy aliases inline on <html>; redefining them on the shell keeps
     CMF and Vue-kit bodies on product semantics without disabling those
     controls elsewhere in the application. */
  --primary-color: var(--semantic-action-primary);
  --primary-color-hover: var(--semantic-action-primary-hover);
  --primary-dark: var(--semantic-action-primary-hover);
  --primary-color-rgb: 142, 45, 33;
  --accent: var(--semantic-action-primary);
  --accent-hover: var(--semantic-action-primary-hover);
  --accent-color: var(--semantic-action-primary);
  --info-color: var(--semantic-state-info-ink);
  --brand-primary: var(--semantic-action-primary);
  --brand-primary-hover: var(--semantic-action-primary-hover);
  --brand-primary-dark: var(--semantic-action-primary-hover);
  --admin-brand-primary: var(--semantic-action-primary);
  --admin-brand-primary-dark: var(--semantic-action-primary-hover);
  --vui-primary: var(--semantic-action-primary);
  --vui-primary-hover: var(--semantic-action-primary-hover);
  --cmfb-surface: var(--semantic-surface-canvas);
  --cmfb-surface-2: var(--semantic-surface-subtle);
  --cmfb-rail: var(--semantic-surface-subtle);
  --cmfb-border: var(--semantic-border-subtle);
  --cmfb-border-2: var(--semantic-border-strong);
  --cmfb-ink: var(--semantic-text-primary);
  --cmfb-ink-2: var(--semantic-text-secondary);
  --cmfb-ink-3: var(--semantic-text-tertiary);
  --cmfb-blue: var(--semantic-action-primary);
  --cmfb-blue-dark: var(--semantic-action-primary-hover);
  --cmfb-icon-bg: var(--semantic-surface-inset);
  --cmfb-icon-current: var(--semantic-surface-selected);
  --cmfb-ok-bg: var(--semantic-state-success-bg);
  --cmfb-ok-bd: var(--semantic-state-success-border);
  --cmfb-ok-ink: var(--semantic-state-success-ink);
  --cmfb-warn-bg: var(--semantic-state-warning-bg);
  --cmfb-warn-bd: var(--semantic-state-warning-border);
  --cmfb-warn-ink: var(--semantic-state-warning-ink);
  --cmfb-dang-bg: var(--semantic-state-danger-bg);
  --cmfb-dang-bd: var(--semantic-state-danger-border);
  --cmfb-dang-ink: var(--semantic-state-danger-ink);
  --cmfb-info-bg: var(--semantic-state-info-bg);
  --cmfb-info-bd: var(--semantic-state-info-border);
  --cmfb-info-ink: var(--semantic-state-info-ink);
  --cmfb-staged: var(--pl-signal);
  --cmfb-slab: var(--pl-ink);
  --cmfb-slab-high: var(--pl-ink-warm);
  --cmfb-slab-accent: var(--pl-signal-tint);
  --cmf-visual-header: var(--pl-ink);
  --cmf-visual-header-high: var(--pl-ink-warm);
  --cmf-header-ink: var(--pl-paper-soft);
  --cmf-header-ink-secondary: #c9cdd6;
  --cmf-header-accent: var(--pl-signal-tint);
  --cmf-header-edge: rgb(255 201 188 / 32%);
  --cmf-header-tile: rgb(255 248 241 / 8%);
  --cmf-header-tile-hover: rgb(255 248 241 / 14%);
  --cmf-visual-surface: var(--pl-paper);
  --cmf-visual-surface-raised: #fffdf8;
  --cmf-visual-rail: var(--pl-paper-ground);
  --cmf-visual-rule: var(--pl-rule);
  --cmf-visual-rule-strong: var(--pl-rule-strong);
  --cmf-visual-edge: #8d877d;
  --cmf-visual-ink: var(--pl-ink);
  --cmf-visual-ink-secondary: var(--pl-text-muted);
  --cmf-visual-ink-tertiary: var(--pl-text-soft);
  --cmf-visual-command: var(--pl-action);
  --cmf-visual-command-hover: var(--pl-action-hover);
  --cmf-visual-command-ink: var(--color-white);
  --cmf-visual-command-tint: #f8e8e3;
  --cmf-visual-command-tint-strong: #f1d1c9;
  --cmf-visual-info: #315b78;
  --cmf-visual-focus-ring: var(--pl-focus);
  --cmf-visual-folio: rgb(200 64 42 / 22%);
  --cmf-visual-shadow: 0 26px 64px rgb(42 13 7 / 24%), 0 8px 20px rgb(42 13 7 / 11%);
  --cmf-visual-plan-current: #4d5b70;
  --cmf-visual-plan-proposed: var(--pl-ink);
  --cmf-visual-plan-alt: #213e5b;
  --cmf-visual-ready-tint: #e9f2ec;
  --cmf-visual-review-tint: var(--pl-paper-mark);
  --cmf-visual-danger-tint: var(--pl-action-tint);
  --cmf-visual-info-tint: var(--pl-paper-sunk);
  --cmf-visual-signal: var(--pl-action);
  --cmf-visual-signal-hover: var(--pl-action-hover);
  --cmf-visual-signal-text: var(--pl-signal-deep);
  --cmf-visual-signal-tint: var(--pl-action-tint);
  --cmf-visual-focus: var(--pl-action);
  --cmf-font-sans: var(--font-ui);
  --cmf-wb-header-bg: var(--pl-ink);
  --cmf-wb-header-border: rgb(255 201 188 / 32%);
  --cmf-wb-header-icon-bg: rgb(255 248 241 / 8%);
  --cmf-wb-subtitle-color: var(--pl-on-ink-muted);
  --cmf-wb-rail-bg: var(--pl-paper-ground);
  --cmf-wb-rail-border: var(--pl-rule);
  --cmf-wb-footer-bg: var(--pl-paper);
  --cmf-wb-footer-border: var(--pl-rule-strong);
  --modal-body-bg: var(--pl-paper);
  --modal-body-color: var(--pl-ink);
  --modal-footer-bg: var(--pl-paper);
  --modal-footer-border: 1px solid var(--pl-rule);
  --modal-section-bg: var(--pl-paper-ground);
  --modal-section-divider: var(--pl-rule);
  --modal-text-primary: var(--pl-ink);
  --modal-text-secondary: var(--pl-text-muted);
  --modal-link: var(--pl-action);
  --modal-btn-secondary-bg: var(--pl-paper);
  --modal-btn-secondary-color: var(--pl-ink);
  --modal-btn-secondary-border: 1px solid var(--pl-rule-strong);
  --modal-btn-secondary-bg-hover: var(--pl-paper-inset);
  --modal-btn-secondary-border-hover: 1px solid var(--pl-action);
  --cmf-content-section-bg: var(--semantic-surface-subtle);
  --cmf-content-section-border: var(--semantic-border-subtle);
  --cmf-state-info-bg: var(--semantic-state-info-bg);
  --cmf-state-info-border: var(--semantic-state-info-border);
  --cmf-state-info-ink: var(--semantic-state-info-ink);
  --cmf-state-success-bg: var(--semantic-state-success-bg);
  --cmf-state-success-border: var(--semantic-state-success-border);
  --cmf-state-success-ink: var(--semantic-state-success-ink);
  --cmf-state-warning-bg: var(--semantic-state-warning-bg);
  --cmf-state-warning-border: var(--semantic-state-warning-border);
  --cmf-state-warning-ink: var(--semantic-state-warning-ink);
  --cmf-state-danger-bg: var(--semantic-state-danger-bg);
  --cmf-state-danger-border: var(--semantic-state-danger-border);
  --cmf-state-danger-ink: var(--semantic-state-danger-ink);
  /* Bare state roles some Vue routes read (ClientRoute, WizardPage, RatesLedger). */
  --cmf-state-success: var(--cmf-state-success-ink);
  --cmf-state-warning: var(--cmf-state-warning-ink);
  --cmf-state-danger: var(--cmf-state-danger-ink);
  --cmf-state-focus: var(--cmf-visual-command);
  /* Accent text sits on ink (the Step 1 chooser heading). */
  --cmf-state-accent: var(--pl-signal-tint);

  color: var(--pl-ink);
  background: var(--pl-paper);
  font-family: var(--font-ui);
}

/* Transitional adapters for reachable hand-built modal shells and the Plan
   Library fallback. The normal Plan Library route is already CMF-owned.
   scripts/generate-planlined-modal-registry.js rejects an adapter as soon as
   its source partial gains .cmf-modal, making deletion part of migration. */
html[data-product-theme^='planlined']
  :is(
    #setup-modal,
    #beta-modal,
    #data-analysis-modal,
    #location-market-modal,
    #employee-sheet-modal
  ).modal {
  --primary-color: var(--semantic-action-primary);
  --primary-color-hover: var(--semantic-action-primary-hover);
  --primary-dark: var(--semantic-action-primary-hover);
  --primary-color-rgb: 142, 45, 33;
  --accent: var(--semantic-action-primary);
  --accent-hover: var(--semantic-action-primary-hover);
  --accent-color: var(--semantic-action-primary);
  --info-color: var(--semantic-state-info-ink);
  --surface-primary: var(--semantic-surface-canvas);
  --surface-secondary: var(--semantic-surface-subtle);
  --surface-tertiary: var(--semantic-surface-inset);
  --border-subtle: var(--semantic-border-subtle);
  --border-default: var(--semantic-border-strong);
  --text-primary: var(--semantic-text-primary);
  --text-secondary: var(--semantic-text-secondary);
  --text-light: var(--semantic-text-secondary);
  --brand-primary: var(--semantic-action-primary);
  --brand-primary-hover: var(--semantic-action-primary-hover);

  color: var(--semantic-text-primary);
}

html[data-product-theme^='planlined']
  :is(
    #setup-modal,
    #beta-modal,
    #data-analysis-modal,
    #location-market-modal,
    #employee-sheet-modal
  )
  > .modal-content {
  border: 1px solid var(--semantic-border-subtle);
  background: var(--semantic-surface-canvas) !important;
  color: var(--semantic-text-primary);
  box-shadow: 0 24px 56px var(--pl-shadow-modal, rgb(42 13 7 / 20%));
}

html[data-product-theme^='planlined'] #plan-library-modal > .modal-content:not(.cmf-modal) {
  --primary-color: var(--semantic-action-primary);
  --primary-color-hover: var(--semantic-action-primary-hover);
  --primary-dark: var(--semantic-action-primary-hover);
  --primary-color-rgb: 142, 45, 33;
  --accent: var(--semantic-action-primary);
  --accent-hover: var(--semantic-action-primary-hover);
  --accent-color: var(--semantic-action-primary);
  --info-color: var(--semantic-state-info-ink);

  border-color: var(--semantic-border-subtle);
  background: var(--semantic-surface-canvas) !important;
  color: var(--semantic-text-primary);
}

html[data-product-theme^='planlined']
  :is(
    #setup-modal,
    #beta-modal,
    #data-analysis-modal,
    #location-market-modal,
    #employee-sheet-modal
  )
  :where(.modal-header, .modal-footer, .modal-actions, section, fieldset) {
  border-color: var(--semantic-border-subtle) !important;
}

html[data-product-theme^='planlined']
  :is(
    #setup-modal,
    #beta-modal,
    #data-analysis-modal,
    #location-market-modal,
    #employee-sheet-modal
  )
  :where(.btn-primary, .primary-btn, button[type='submit']):not(.btn-danger, [disabled]) {
  border-color: var(--semantic-action-primary) !important;
  background: var(--semantic-action-primary) !important;
  background-image: none !important;
  color: var(--semantic-action-on-primary) !important;
  box-shadow: none !important;
}

html[data-product-theme^='planlined']
  :is(
    #setup-modal,
    #beta-modal,
    #data-analysis-modal,
    #location-market-modal,
    #employee-sheet-modal
  )
  :where(.close-btn, .modal-close, [aria-label='Close']) {
  color: var(--semantic-text-secondary) !important;
}

/* Location/Market still carries an inline pre-semantic blue/cyan/indigo
   palette. Keep this bridge bounded to that legacy body; delete it when the
   partial moves to CMF.body primitives and the registry changes to `cmf`. */
html[data-product-theme^='planlined']
  #location-market-modal
  .data-source-option[data-source='kff'] {
  border-color: var(--semantic-action-primary) !important;
  background: var(--semantic-surface-subtle) !important;
}

html[data-product-theme^='planlined']
  #location-market-modal
  :where(
    .fa-database,
    .data-source-option[data-source='kff'] .fa-chart-bar,
    .data-source-option[data-source='kff'] > div:nth-child(2),
    .market-collapsible-header h3 > i,
    #mployer-config-section h3,
    #mployer-config-section .form-label,
    #mployer-search-tab-ein,
    .market-benchmark-card-text h4,
    .market-benchmark-card-arrow
  ) {
  color: var(--semantic-action-primary) !important;
}

html[data-product-theme^='planlined']
  #location-market-modal
  :where(
    #mployer-search-tab-name.active,
    #ai-insights-btn,
    #mployer-benchmark-report-btn,
    .market-benchmark-card-icon
  ) {
  border-color: var(--semantic-action-primary) !important;
  background: var(--semantic-action-primary) !important;
  background-image: none !important;
  color: var(--semantic-action-on-primary) !important;
}

html[data-product-theme^='planlined']
  #location-market-modal
  :where(
    .data-source-option[data-source='kff'] > div:first-child,
    #mployer-config-section > div,
    #mployer-plans-content,
    .market-benchmark-card
  ) {
  border-color: var(--semantic-border-subtle) !important;
  background: var(--semantic-surface-subtle) !important;
  background-image: none !important;
}

html[data-product-theme^='planlined'] #location-market-modal .market-benchmark-card:hover {
  border-color: var(--semantic-action-primary) !important;
  box-shadow: 0 0 0 3px var(--semantic-focus-ring) !important;
}

html[data-product-theme^='planlined']
  #employee-sheet-modal
  .employee-sheet-card.accent
  .employee-sheet-card-header {
  background: var(--semantic-surface-selected) !important;
}

html[data-product-theme^='planlined'] #employee-sheet-modal .employee-sheet-preview-surface {
  border-color: var(--semantic-border-subtle) !important;
  background: var(--semantic-surface-inset) !important;
}

html[data-product-theme^='planlined'] #employee-sheet-modal .employee-sheet-preview-placeholder {
  border-color: var(--semantic-border-strong) !important;
  background: var(--semantic-surface-canvas) !important;
  color: var(--semantic-text-secondary) !important;
}

html[data-product-theme^='planlined'] #employee-sheet-modal .employee-sheet-preview-placeholder i {
  color: var(--semantic-action-primary) !important;
}

html[data-product-theme^='planlined'] .cmf-modal > .cmf-header,
html[data-product-theme^='planlined']
  .cmf-header:is(.cmf-header-success, .cmf-header-warning, .cmf-header-danger) {
  border-bottom-color: var(--pl-ink-edge, rgb(255 201 188 / 32%));
  background: var(--pl-ink);
}

html[data-product-theme^='planlined']
  .cmf-modal
  > .cmf-header:not(.cmf-header-success, .cmf-header-warning, .cmf-header-danger)::after {
  background: var(--pl-signal);
}

html[data-product-theme^='planlined'] .cmf-header-icon {
  border-color: var(--pl-ink-edge, rgb(255 201 188 / 32%));
  background: var(--pl-ink-tile, rgb(255 248 241 / 8%));
  color: var(--pl-signal-tint);
  box-shadow: none;
}

html[data-product-theme^='planlined'] .cmf-header-eyebrow {
  color: var(--pl-signal-tint);
  font-size: 11px;
}

html[data-product-theme^='planlined'] :is(.cmf-title, .cmf-subtitle) {
  font-family: var(--font-ui);
}

html[data-product-theme^='planlined'] .cmf-footer {
  border-top-color: var(--pl-rule);
  background: var(--pl-paper);
}

html[data-product-theme^='planlined']
  :is(.cmf-btn-primary, .cmf-btn-verify, .cmf-btn.cmf-wb-apply.has-changes),
html[data-product-theme^='planlined'] .cmf-workbench-modal > .cmf-footer .cmf-btn-primary {
  border-color: var(--semantic-action-primary) !important;
  background-color: var(--semantic-action-primary) !important;
  background-image: none !important;
  color: var(--semantic-action-on-primary) !important;
  box-shadow: none !important;
}

html[data-product-theme^='planlined']
  :is(.cmf-btn-primary, .cmf-btn-verify, .cmf-btn.cmf-wb-apply.has-changes):hover,
html[data-product-theme^='planlined'] .cmf-workbench-modal > .cmf-footer .cmf-btn-primary:hover {
  border-color: var(--semantic-action-primary-hover) !important;
  background-color: var(--semantic-action-primary-hover) !important;
  background-image: none !important;
}

/* A disabled primary must LOOK disabled.
   ------------------------------------------------------------------------
   The rule above paints every primary with !important, which overrides
   complex-modal-factory.css's own `.cmf-btn-primary:disabled` (a pale surface).
   The result was that a disabled primary button rendered at full strength
   anywhere in this product — same fill, same white label — and only the cursor
   distinguished it. The hover rule had the same gap, so a disabled primary even
   took the hover colour under the pointer.

   Measured in Chrome on /organizations: a disabled "Send invitations" computed
   background rgb(142, 45, 33) with white text, identical to the enabled state.

   This mirrors the selector above so it carries the same specificity, and sits
   AFTER the hover rule so it wins on order for both states. The colours are the
   warm palette rather than CMF's cool --cmf-visual-disabled-* (#e6ebf0/#718093),
   which read as a foreign grey against planlined's paper. Disabled controls are
   exempt from the WCAG contrast minimum; this pair still measures ~4.2:1. */
html[data-product-theme^='planlined']
  :is(.cmf-btn-primary, .cmf-btn-verify, .cmf-btn.cmf-wb-apply.has-changes):disabled,
html[data-product-theme^='planlined']
  :is(.cmf-btn-primary, .cmf-btn-verify, .cmf-btn.cmf-wb-apply.has-changes)[aria-disabled='true'],
html[data-product-theme^='planlined'] .cmf-workbench-modal > .cmf-footer .cmf-btn-primary:disabled,
html[data-product-theme^='planlined']
  .cmf-workbench-modal
  > .cmf-footer
  .cmf-btn-primary[aria-disabled='true'] {
  border-color: var(--cmf-visual-rule) !important;
  background-color: var(--cmf-visual-disabled-surface) !important;
  background-image: none !important;
  color: var(--cmf-visual-disabled-ink) !important;
  box-shadow: none !important;
  cursor: not-allowed;
}

/* Full-screen workbench cover --------------------------------------------- */
html[data-product-theme^='planlined'] .has-workbench-cover {
  --wbc-band-high: var(--pl-ink);
  --wbc-band-mid: var(--pl-ink);
  --wbc-band-low: var(--pl-ink-deep);
  --wbc-band-control: var(--pl-ink-warm);
  --wbc-band-control-hover: #343d52;
  --wbc-band-accent: var(--pl-signal-tint);

  color: var(--pl-ink);
  background: var(--pl-paper-ground);
  font-family: var(--font-ui);
}

html[data-product-theme^='planlined'] .has-workbench-cover .wbc-band {
  border-bottom: 3px solid var(--pl-signal);
  background: var(--pl-ink) !important;
  box-shadow: none;
}

html[data-product-theme^='planlined'] .has-workbench-cover .wbc-band::after,
html[data-product-theme^='planlined'] .has-workbench-cover .wbc-atmosphere,
html[data-product-theme^='planlined'] .has-workbench-cover .wbc-rings {
  display: none;
}

html[data-product-theme^='planlined'] .has-workbench-cover :is(.wbc-title, .wbc-sub) {
  font-family: var(--font-ui);
}

html[data-product-theme^='planlined'] .has-workbench-cover .wbc-title {
  color: var(--pl-paper-soft);
}

html[data-product-theme^='planlined'] .has-workbench-cover .wbc-sub {
  color: var(--pl-on-ink-muted);
}

html[data-product-theme^='planlined'] .has-workbench-cover .wbc-eyebrow,
html[data-product-theme^='planlined'] .has-workbench-cover .wbc-chip b {
  color: var(--pl-signal-tint);
}

html[data-product-theme^='planlined'] .has-workbench-cover :is(.wbc-chip, .wbc-quiet) {
  border-color: var(--pl-ink-edge, rgb(255 201 188 / 32%));
  background: var(--pl-ink-warm) !important;
  box-shadow: none;
}

html[data-product-theme^='planlined'] .has-workbench-cover .wbc-rail {
  background: var(--pl-ink);
  box-shadow: inset -1px 0 var(--pl-ink-edge-quiet, rgb(255 201 188 / 18%));
}

/* Case Library ------------------------------------------------------------ */
html[data-product-theme^='planlined'] .case-library-main-modal {
  color: var(--pl-ink);
  background: var(--pl-paper-ground);
  font-family: var(--font-ui);
}

html[data-product-theme^='planlined'] .case-library-main-modal .case-lib-toolbar-v2,
html[data-product-theme^='planlined'] .case-library-main-modal .case-library-toolbar {
  border-color: var(--pl-rule) !important;
  background: var(--pl-paper) !important;
  box-shadow: none !important;
}

html[data-product-theme^='planlined']
  .case-library-main-modal
  .case-lib-toolbar-v2
  #case-library-search {
  border-color: var(--pl-rule-strong) !important;
  background: var(--pl-paper-ground) !important;
  color: var(--pl-ink) !important;
  box-shadow: none !important;
}

html[data-product-theme^='planlined']
  .case-library-main-modal
  .case-lib-toolbar-v2
  #case-library-search:focus {
  border-color: var(--pl-focus-stroke, var(--pl-signal)) !important;
  box-shadow: 0 0 0 3px var(--pl-focus) !important;
}

html[data-product-theme^='planlined'] .case-library-main-modal .case-lib-toolbar-v2 .btn-group-sm {
  border-color: var(--pl-rule-strong);
  background: var(--pl-paper);
}

html[data-product-theme^='planlined']
  .case-library-main-modal
  .case-lib-toolbar-v2
  #case-lib-mode
  .btn-seg:is(.active, [data-selected='true']),
html[data-product-theme^='planlined']
  .case-library-main-modal
  .case-lib-toolbar-v2
  .view-toggle
  .btn-seg:is(.active, [data-selected='true']) {
  border-color: var(--pl-action) !important;
  background: var(--pl-action) !important;
  color: var(--color-white) !important;
  box-shadow: none !important;
}

html[data-product-theme^='planlined']
  body.case-library-v2
  .case-library-main-modal
  .case-library-grid {
  background: var(--pl-paper-ground);
}

html[data-product-theme^='planlined']
  body.case-library-v2
  .case-library-main-modal
  .data-card.case-card-v2 {
  border-color: var(--pl-rule) !important;
  background: var(--pl-paper) !important;
  box-shadow: 0 1px 2px var(--pl-shadow-rest, rgb(42 13 7 / 7%));
  font-family: var(--font-ui);
}

html[data-product-theme^='planlined']
  body.case-library-v2
  .case-library-main-modal
  .data-card.case-card-v2:hover {
  border-color: var(--pl-rule-strong) !important;
  background: var(--pl-paper) !important;
  box-shadow: 0 10px 24px -18px var(--pl-shadow-lift, rgb(42 13 7 / 38%));
  transform: none;
}

html[data-product-theme^='planlined']
  .case-library-main-modal
  .data-card.case-card-v2
  .welcome-case-header {
  border-bottom-color: var(--pl-rule);
  background: var(--pl-paper);
  color: var(--pl-ink);
}

html[data-product-theme^='planlined']
  .case-library-main-modal
  .data-card.case-card-v2
  :is(.welcome-case-title, .welcome-case-title:hover) {
  color: var(--pl-ink) !important;
}

html[data-product-theme^='planlined']
  .case-library-main-modal
  .data-card.case-card-v2
  .welcome-case-carrier-chip[data-scenario='proposed'] {
  border-color: var(--pl-action);
  background: var(--pl-action);
}

html[data-product-theme^='planlined']
  .case-library-main-modal
  .data-card.case-card-v2
  .welcome-case-data-item {
  border-color: var(--pl-rule);
  background: var(--pl-paper-inset);
}

html[data-product-theme^='planlined']
  .case-library-main-modal
  .data-card.case-card-v2
  .welcome-type-badge {
  border-color: var(--pl-rule-strong) !important;
  background: var(--pl-paper-inset) !important;
  color: var(--pl-text-muted) !important;
}

html[data-product-theme^='planlined']
  .case-library-main-modal
  .data-card.case-card-v2
  .welcome-type-badge::before {
  background: var(--pl-signal) !important;
}

html[data-product-theme^='planlined']
  .case-library-main-modal
  .data-card.case-card-v2
  .case-action-btn.is-primary {
  border-color: var(--pl-action);
  background: var(--pl-action);
  color: var(--color-white);
}

html[data-product-theme^='planlined']
  .case-library-main-modal
  .data-card.case-card-v2
  .case-action-btn.is-primary:hover {
  border-color: var(--pl-action-hover);
  background: var(--pl-action-hover);
}

html[data-product-theme^='planlined']
  body.case-library-v2
  .case-library-main-modal
  .data-card.case-card-v2
  .case-action-btn.is-primary:hover {
  border-color: var(--pl-action-hover) !important;
  background: var(--pl-action-hover) !important;
}

html[data-product-theme^='planlined']
  .case-library-main-modal
  .data-card.case-card-v2[data-selected='true'] {
  border-color: var(--pl-signal) !important;
  box-shadow: 0 0 0 3px var(--pl-focus);
}

/* Plan Library ------------------------------------------------------------ */
html[data-product-theme^='planlined'] .plan-library-cmf-modal {
  color: var(--pl-ink);
  background: var(--pl-paper-ground) !important;
  font-family: var(--font-ui);
}

html[data-product-theme^='planlined'] .plan-library-cmf-modal .pl-sidebar.wbc-rail {
  border-right-color: var(--pl-ink-edge-quiet, rgb(255 201 188 / 18%));
  background: var(--pl-ink) !important;
}

html[data-product-theme^='planlined']
  .plan-library-cmf-modal
  .pl-sidebar
  :is(.pl-sidebar-label, .plan-library-eyebrow, .plf-tree-row, .pl-folder, .plf-count) {
  color: var(--pl-on-ink-muted);
}

html[data-product-theme^='planlined']
  .plan-library-cmf-modal
  #plan-library-folder-tree
  .plf-tree-row:hover,
html[data-product-theme^='planlined'] .plan-library-cmf-modal .pl-folder:hover {
  background: var(--pl-ink-warm);
  color: var(--pl-paper-soft);
}

html[data-product-theme^='planlined']
  .plan-library-cmf-modal
  #plan-library-folder-tree
  .plf-tree-row[aria-selected='true'],
html[data-product-theme^='planlined'] .plan-library-cmf-modal .pl-folder.active,
html[data-product-theme^='planlined']
  .plan-library-cmf-modal.has-workbench-cover
  .wbc-rail
  .pl-filter-row.active,
html[data-product-theme^='planlined']
  .plan-library-cmf-modal.has-workbench-cover
  .wbc-rail
  .plf-tree-row[aria-selected='true'] {
  border-color: var(--pl-action) !important;
  background: var(--pl-action) !important;
  color: var(--color-white) !important;
  box-shadow: none !important;
}

html[data-product-theme^='planlined']
  .plan-library-cmf-modal
  #plan-library-folder-tree
  .plf-tree-row[aria-selected='true']
  :is(.plf-count, i),
html[data-product-theme^='planlined']
  .plan-library-cmf-modal
  .pl-folder.active
  :is(.pl-folder-count, i),
html[data-product-theme^='planlined']
  .plan-library-cmf-modal.has-workbench-cover
  .wbc-rail
  :is(.pl-filter-row.active, .plf-tree-row[aria-selected='true'])
  :is(.pl-folder-count, .plf-count, .pl-filter-name, .plf-name, i) {
  color: var(--color-white) !important;
}

html[data-product-theme^='planlined']
  .plan-library-cmf-modal
  #plan-library-folder-tree
  .plf-folder-search {
  border-color: var(--pl-ink-edge, rgb(255 201 188 / 32%));
  background: var(--pl-ink-warm);
  color: var(--pl-paper-soft);
}

html[data-product-theme^='planlined']
  .plan-library-cmf-modal
  :is(.pl-toolbar, #plan-library-cmf-toolbar-host) {
  border-color: var(--pl-rule);
  background: var(--pl-paper);
}

html[data-product-theme^='planlined'] .plan-library-cmf-modal .pl-scroll {
  background: var(--pl-paper-ground);
}

html[data-product-theme^='planlined'] .plan-library-cmf-modal #case-library-search {
  border-color: var(--pl-rule-strong);
  background: var(--pl-paper-inset);
  color: var(--pl-ink);
  box-shadow: none;
}

html[data-product-theme^='planlined'] .plan-library-cmf-modal #case-library-search:focus {
  border-color: var(--pl-focus-stroke, var(--pl-signal));
  background: var(--pl-paper);
  box-shadow: 0 0 0 3px var(--pl-focus);
}

html[data-product-theme^='planlined']
  .plan-library-cmf-modal
  .pl-toolbar
  #case-lib-mode
  :is(.pl-seg.active, .plib-mode-btn[data-selected='true'], .plib-mode-btn[aria-pressed='true']),
html[data-product-theme^='planlined']
  .plan-library-cmf-modal
  .plib-mode-btn:is([data-selected='true'], [aria-pressed='true']) {
  border-color: var(--pl-action) !important;
  background: var(--pl-action) !important;
  color: var(--color-white) !important;
}

html[data-product-theme^='planlined'] .plan-library-cmf-modal .pl-toolbar .pl-newplan-btn,
html[data-product-theme^='planlined'] .plan-library-cmf-modal .pl-card .pl-btn-primary {
  border-color: var(--pl-action) !important;
  background: var(--pl-action) !important;
  color: var(--color-white) !important;
}

html[data-product-theme^='planlined'] .plan-library-cmf-modal .pl-toolbar .pl-newplan-btn:hover,
html[data-product-theme^='planlined'] .plan-library-cmf-modal .pl-card .pl-btn-primary:hover {
  border-color: var(--pl-action-hover) !important;
  background: var(--pl-action-hover) !important;
}

html[data-product-theme^='planlined']
  body.plan-library-v2-cmf
  .plan-library-cmf-modal
  .plan-card.pl-card.data-card
  .pl-btn-primary:hover {
  border-color: var(--pl-action-hover) !important;
  background: var(--pl-action-hover) !important;
}

html[data-product-theme^='planlined']
  body.plan-library-v2-cmf
  .plan-library-cmf-modal
  .plan-card.pl-card.data-card {
  border-top-color: var(--pl-rule) !important;
  border-right-color: var(--pl-rule) !important;
  border-bottom-color: var(--pl-rule) !important;
  background: var(--pl-paper) !important;
  box-shadow: 0 1px 2px var(--pl-shadow-rest, rgb(42 13 7 / 7%)) !important;
  font-family: var(--font-ui);
}

html[data-product-theme^='planlined']
  body.plan-library-v2-cmf
  .plan-library-cmf-modal
  .plan-card.pl-card.data-card:hover {
  border-top-color: var(--pl-rule-strong) !important;
  border-right-color: var(--pl-rule-strong) !important;
  border-bottom-color: var(--pl-rule-strong) !important;
  background: var(--pl-paper) !important;
  box-shadow: 0 10px 24px -18px var(--pl-shadow-lift, rgb(42 13 7 / 38%)) !important;
}

html[data-product-theme^='planlined'] .plan-library-cmf-modal .pl-card .pl-metrics {
  border-color: var(--pl-rule);
  background: var(--pl-paper-inset);
}

html[data-product-theme^='planlined']
  .plan-library-cmf-modal
  .plan-card.pl-card.designation-proposed {
  border-left-color: var(--pl-signal) !important;
}

html[data-product-theme^='planlined']
  .plan-library-cmf-modal
  .pl-card
  .compare-plan-btn.is-selected {
  border-color: var(--pl-signal);
  background: var(--pl-action-tint);
  color: var(--pl-action);
}

/* Source Documents uses the same cover/rail composition as Plan Library. */
html[data-product-theme^='planlined'] .source-docs-workbench-modal .source-docs-app {
  background: var(--pl-paper-ground);
  color: var(--pl-ink);
}

html[data-product-theme^='planlined'] .source-docs-workbench-modal .cmf-footer {
  background: var(--pl-paper-inset);
  box-shadow: inset 0 1px var(--pl-rule);
}

html[data-product-theme^='planlined'] .source-docs-workbench-modal .sdw-doc:focus-visible {
  outline-color: var(--pl-focus-stroke, var(--pl-signal));
}

html[data-product-theme^='planlined'] .source-docs-workbench-modal .sdw-doc.is-active {
  background: color-mix(in srgb, var(--pl-on-ink) 11%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pl-on-ink) 18%, transparent);
}

html[data-product-theme^='planlined'] .source-docs-workbench-modal .sdw-doc.is-active::before {
  background: var(--pl-signal);
}

html[data-product-theme^='planlined']
  .source-docs-workbench-modal
  .sdw-doc.is-active
  .sdw-doc-mark {
  background: color-mix(in srgb, var(--pl-on-ink) 12%, transparent);
  color: var(--pl-on-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pl-on-ink) 20%, transparent);
}

/* Assistant / Command Palette ------------------------------------------- */

/* The Assistant is a standalone drawer, so it does not inherit the CMF
   token bridge above. Keep its private aliases mapped here; the qualified
   selector also outranks the lazy-loaded feature stylesheet. */
html[data-product-theme^='planlined'] #command-palette-overlay {
  --cmf-font-sans: var(--font-ui);
  --cmf-visual-header: var(--pl-ink);
  --cmf-visual-header-high: var(--pl-ink-warm);
  --cmf-visual-command: var(--pl-action);
  --cmf-visual-command-hover: var(--pl-action-hover);
  --cmf-visual-signal: var(--pl-action);
  --cmf-visual-signal-hover: var(--pl-action-hover);
  --cmf-visual-signal-text: var(--pl-signal-deep);
  --cmf-visual-signal-tint: var(--pl-action-tint);
  --cmf-visual-focus: var(--pl-action);
  --cmf-header-accent: var(--pl-signal-tint);
  --cmf-header-edge: rgb(255 201 188 / 28%);
  --modal-body-bg: var(--pl-paper);
  --modal-text-primary: var(--pl-ink);
  --modal-text-secondary: var(--pl-text-muted);
  --modal-text-muted: var(--pl-text-muted);
  --modal-link: var(--pl-action);
  --modal-tab-bar-bg: var(--pl-paper-ground);
  --modal-section-bg: var(--pl-paper);
  --modal-section-divider: var(--pl-rule);
  --surface-primary: var(--pl-paper);
  --surface-secondary: var(--pl-paper-ground);
  --surface-tertiary: var(--pl-paper-inset);
  --border-color: var(--pl-rule);
  --cp-accent: var(--pl-action);
  --cp-accent-rgb: 142, 45, 33;
  --cp-accent-strong: var(--pl-action-hover);
  --cp-accent-strong-rgb: 120, 35, 25;
  --cp-accent-deep: var(--pl-ink-warm);
  --cp-purple-rgb: 142, 45, 33;
  --cp-surface: var(--pl-paper);
  --cp-surface-subtle: var(--pl-paper-ground);
  --cp-border: var(--pl-rule);
  --cp-header-gradient: var(--pl-ink);
}

html[data-product-theme^='planlined'] #command-palette-overlay .cp-earlier-pill {
  border-color: var(--pl-rule);
  background: var(--pl-paper);
  color: var(--pl-text-muted);
}

html[data-product-theme^='planlined'] #command-palette-overlay .cp-attach-btn {
  border-color: var(--pl-action-edge, rgb(142 45 33 / 45%));
  background: var(--pl-action-wash, rgb(142 45 33 / 5%));
  color: var(--pl-action);
}

html[data-product-theme^='planlined'] #command-palette-overlay .cp-attach-btn:hover:not(:disabled) {
  border-color: var(--pl-action);
  background: var(--pl-action-tint);
  color: var(--pl-action-hover);
}

html[data-product-theme^='planlined'] #command-palette-overlay .cp-footer-hint kbd {
  border-color: var(--pl-rule);
  background: var(--pl-paper);
  color: var(--pl-text-muted);
  box-shadow: none;
}

html[data-product-theme^='planlined'] #command-palette-overlay .awc-card-meta,
html[data-product-theme^='planlined'] #command-palette-overlay .awc-card-meta span {
  color: var(--pl-text-muted);
}

html[data-product-theme^='planlined']
  #command-palette-overlay
  .awc-status:is(.is-waiting, .is-open) {
  color: var(--pl-warning-ink);
}

html[data-product-theme^='planlined'] #command-palette-overlay .awc-status.is-in_progress {
  color: var(--pl-info-ink);
}

html[data-product-theme^='planlined'] #command-palette-overlay .awc-status.is-resolved {
  color: var(--pl-success-ink);
}

/* Layout Settings ------------------------------------------------------- */

/* Layout Settings is CMF-framed but defines an independent interior palette.
   Collapse that palette to the same paper/ink/action roles as the shell. */
html[data-product-theme^='planlined']
  :is(.lsm-workbench-modal, .lsm-plan-picker-modal, .lsm-linked-bundle-cmf) {
  --cmf-state-info-ink: var(--pl-info-ink);
  --cmf-state-success-ink: var(--pl-success-ink);
  --cmf-state-warning-ink: var(--pl-warning-ink);
  --cmf-state-danger-ink: var(--pl-danger-ink);
  --color-info: var(--pl-action);
  --color-info-200: var(--pl-rule-strong);
  --color-info-700: var(--pl-action-hover);
  --color-info-800: var(--pl-action-hover);
  --color-info-900: var(--pl-ink);
  --color-info-light: var(--pl-action-tint);
  --modal-btn-primary-gradient: var(--pl-action);
  --modal-btn-primary-gradient-hover: var(--pl-action-hover);
  --modal-btn-primary-shadow-hover: none;
  --modal-header-gradient: var(--pl-action);
}

html[data-product-theme^='planlined'] .lsm-workbench-modal .lsm-container {
  --cmf-section-border: 1px solid var(--pl-rule);
  --cmf-section-header-bg: var(--pl-paper-ground);
  --cmf-section-header-hover-bg: var(--pl-paper-inset);
  --cmf-section-title-color: var(--pl-ink);
  --cmf-section-icon-color: var(--pl-action);
  --cmf-section-chevron-color: var(--pl-text-soft);
  --cmf-section-content-bg: var(--pl-paper);
  --lsm-accent: var(--pl-action);
  --lsm-accent-ink: var(--pl-action-hover);
  --lsm-accent-soft: var(--pl-action-tint);
  --lsm-surface: var(--pl-paper);
  --lsm-surface-muted: var(--pl-paper-ground);
  --lsm-border: var(--pl-rule);
  --color-gray-50: var(--pl-paper-ground);
  --color-gray-100: var(--pl-paper-inset);
  --color-gray-200: var(--pl-rule);
  --color-gray-300: var(--pl-rule-strong);
  --color-gray-400: var(--pl-text-muted);
  --color-gray-500: var(--pl-text-muted);
  --color-gray-600: var(--pl-text-muted);
  --color-gray-700: var(--pl-ink-warm);
  --color-gray-800: var(--pl-ink);
  --color-info: var(--pl-action);
  --color-info-700: var(--pl-action-hover);
  --color-info-800: var(--pl-action-hover);
  --color-info-light: var(--pl-action-tint);
  --color-success-dark: var(--pl-success-ink);
  --color-warning-dark: var(--pl-warning-ink);
  --color-error: var(--pl-danger-ink);
  --color-error-dark: var(--pl-danger-ink);
}

html[data-product-theme^='planlined'] .lsm-workbench-modal .sv-modern .lsm-section {
  --sv-accent: var(--pl-action);
}

html[data-product-theme^='planlined'] .lsm-workbench-modal .lsm-section-header {
  border-color: var(--pl-rule);
  background: var(--pl-paper);
}

html[data-product-theme^='planlined']
  .lsm-workbench-modal
  :is(.lsm-section-content, .lsm-subsection) {
  border-color: var(--pl-rule);
}

html[data-product-theme^='planlined'] .lsm-workbench-modal .sv-toolbar-btn {
  border-color: var(--pl-rule);
  background: var(--pl-paper-ground);
  color: var(--pl-text-muted);
}

html[data-product-theme^='planlined'] .lsm-workbench-modal .sv-toolbar-btn:hover {
  border-color: var(--pl-action);
  background: var(--pl-action-tint);
  color: var(--pl-action-hover);
}

html[data-product-theme^='planlined']
  .lsm-workbench-modal
  :is(.sv-count, .sv-sec-act, .lsm-scope-desc, .lsm-checkbox-desc, .lsm-tab-order-hint) {
  color: var(--pl-text-muted);
}

html[data-product-theme^='planlined']
  .lsm-workbench-modal
  :is(.cmf-wb-rail-heading-label, .cmf-wb-chip-off) {
  color: var(--pl-ink);
}

html[data-product-theme^='planlined']
  .lsm-workbench-modal
  :is(.lsm-section-badge.is-complete, .sv-modern .lsm-section-badge.is-complete) {
  color: var(--pl-success-ink);
}

html[data-product-theme^='planlined']
  .lsm-workbench-modal
  :is(.lsm-section-badge.is-partial, .sv-modern .lsm-section-badge.is-partial) {
  color: var(--pl-warning-ink);
}

html[data-product-theme^='planlined'] .lsm-workbench-modal .sv-sec-act:hover {
  border-color: var(--pl-action);
  background: var(--pl-action);
  color: var(--color-white);
}

html[data-product-theme^='planlined'] .lsm-workbench-modal .lsm-density-btn {
  border-color: var(--pl-rule);
  background: var(--pl-paper-ground);
  color: var(--pl-text-muted);
}

html[data-product-theme^='planlined'] .lsm-workbench-modal .lsm-density-btn:hover {
  border-color: var(--pl-rule-strong);
  background: var(--pl-paper-inset);
  color: var(--pl-ink);
}

html[data-product-theme^='planlined'] .lsm-workbench-modal .lsm-density-btn.active {
  border-color: var(--pl-action);
  background: var(--pl-action-tint);
  color: var(--pl-action-hover);
}

html[data-product-theme^='planlined'] .lsm-workbench-modal .lsm-density-btn i,
html[data-product-theme^='planlined'] .lsm-workbench-modal .lsm-tab-order-hint i,
html[data-product-theme^='planlined'] .lsm-workbench-modal .lsm-plan-sheets-icon {
  color: var(--pl-action);
}

html[data-product-theme^='planlined'] .lsm-workbench-modal .lsm-plan-sheets-label {
  color: var(--pl-action-hover);
}

html[data-product-theme^='planlined'] .lsm-workbench-modal .lsm-plan-picker-count {
  color: var(--pl-action-hover);
}

html[data-product-theme^='planlined']
  :is(.lsm-workbench-modal, .lsm-plan-picker-modal)
  :is(.lsm-sync-btn, .lsm-plan-picker-manage-btn, .lsm-plan-picker-btn.cmf-btn-primary),
html[data-product-theme^='planlined'] .lsm-workbench-modal .lsm-theme-btn.primary {
  border-color: var(--pl-action);
  background: var(--pl-action);
  color: var(--color-white);
  box-shadow: none;
}

html[data-product-theme^='planlined']
  :is(.lsm-workbench-modal, .lsm-plan-picker-modal)
  :is(.lsm-sync-btn, .lsm-plan-picker-manage-btn, .lsm-plan-picker-btn.cmf-btn-primary):hover,
html[data-product-theme^='planlined'] .lsm-workbench-modal .lsm-theme-btn.primary:hover {
  border-color: var(--pl-action-hover);
  background: var(--pl-action-hover);
  color: var(--color-white);
  box-shadow: none;
}

html[data-product-theme^='planlined'] .lsm-workbench-modal .lsm-plan-picker-bar {
  border-color: var(--pl-rule);
  background: var(--pl-paper-ground);
  box-shadow: none;
}

html[data-product-theme^='planlined']
  :is(.lsm-workbench-modal, .lsm-plan-picker-modal)
  :is(
    .lsm-plan-picker-groups-count,
    .lsm-plan-picker-count,
    .lsm-plan-link-group-count,
    .lsm-plan-chip-type,
    .lsm-plan-chip-scent.is-direct
  ) {
  border-color: var(--pl-action-edge, rgb(142 45 33 / 45%));
  background: var(--pl-action-tint);
  color: var(--pl-action-hover);
}

html[data-product-theme^='planlined']
  :is(.lsm-workbench-modal, .lsm-plan-picker-modal)
  :is(
    .lsm-plan-picker-group-item,
    .lsm-plan-type-filter,
    .lsm-plan-sheet-tab,
    .lsm-plan-chip
  ):hover {
  border-color: var(--pl-action);
  background: var(--pl-paper-inset);
  color: var(--pl-ink);
  box-shadow: none;
  transform: none;
}

html[data-product-theme^='planlined']
  :is(.lsm-workbench-modal, .lsm-plan-picker-modal)
  :is(
    .lsm-plan-picker-group-item.is-active,
    .lsm-plan-type-filter.is-active,
    .lsm-plan-sheet-tab.is-active,
    .lsm-plan-sheet-tab.is-drop-target,
    .lsm-plan-chip.is-selected
  ) {
  border-color: var(--pl-action);
  background: var(--pl-action-tint);
  color: var(--pl-action-hover);
  box-shadow: 0 0 0 2px var(--pl-focus);
}

html[data-product-theme^='planlined']
  :is(.lsm-workbench-modal, .lsm-plan-picker-modal)
  :is(.lsm-plan-link-toggle-btn, .lsm-plan-link-drag-handle, .lsm-plan-link-order-btn) {
  border-color: var(--pl-rule-strong);
  background: var(--pl-paper);
  color: var(--pl-action-hover);
}

html[data-product-theme^='planlined']
  :is(.lsm-workbench-modal, .lsm-plan-picker-modal)
  :is(.lsm-plan-link-toggle-btn, .lsm-plan-link-drag-handle, .lsm-plan-link-order-btn):hover {
  border-color: var(--pl-action);
  background: var(--pl-action-tint);
  color: var(--pl-action-hover);
}

html[data-product-theme^='planlined']
  .lsm-workbench-modal
  :is(
    .lsm-plan-link-group.is-active-group,
    .lsm-plan-chip-row.is-sheet-assigned-row .lsm-plan-chip
  ) {
  border-color: var(--pl-action);
  box-shadow: 0 0 0 2px var(--pl-focus);
}

html[data-product-theme^='planlined']
  .lsm-workbench-modal
  .lsm-plan-chip.is-selected
  .lsm-plan-chip-type {
  border-color: var(--pl-action);
  background: var(--pl-action);
  color: var(--color-white);
}

html[data-product-theme^='planlined']
  .lsm-workbench-modal
  :is(.lsm-plan-link-group.is-chip-drop-target, .lsm-plan-sheet-tab-new:hover) {
  border-color: var(--pl-action);
  outline-color: var(--pl-action);
  background: var(--pl-action-tint);
  color: var(--pl-action-hover);
  box-shadow: none;
}

html[data-product-theme^='planlined'] .lsm-plan-picker-modal .lsm-plan-picker-group-item.is-active,
html[data-product-theme^='planlined'] .lsm-plan-picker-modal .lsm-plan-chip.is-selected {
  border-color: var(--pl-action);
  background: var(--pl-action-tint);
  box-shadow: inset 3px 0 0 var(--pl-action);
}

html[data-product-theme^='planlined'] .lsm-linked-bundle-cmf {
  --bundle-blue: var(--pl-action-hover);
  --bundle-blue-soft: var(--pl-action-tint);
  --bundle-ink: var(--pl-ink);
  --bundle-muted: var(--pl-text-muted);
  --bundle-line: var(--pl-rule);
}

html[data-product-theme^='planlined'] .lsm-linked-bundle-cmf .lsm-plan-type-dot.is-proposed {
  background: var(--pl-signal);
}

html[data-product-theme^='planlined'] .lsm-workbench-modal .lsm-plan-sheets-input {
  border-color: var(--pl-action-edge, rgb(142 45 33 / 45%));
  background: var(--pl-paper);
}

html[data-product-theme^='planlined']
  .lsm-workbench-modal
  :is(.lsm-tab-order-list, .lsm-export-size-row) {
  border-color: var(--pl-rule) !important;
  background: var(--pl-paper-ground) !important;
}

html[data-product-theme^='planlined'] .lsm-workbench-modal .lsm-sidebar-control-label {
  color: var(--pl-ink);
}

html[data-product-theme^='planlined'] .lsm-workbench-modal .lsm-sidebar-presentation-note {
  border: 1px solid var(--pl-rule);
  background: var(--pl-paper-inset);
  color: var(--pl-ink);
}

html[data-product-theme^='planlined']
  .lsm-workbench-modal
  :is(
    .lsm-sidebar-layout-tile,
    .lsm-sidebar-appearance-choice,
    .lsm-sidebar-density-choice,
    .lsm-sidebar-reset-choice
  ) {
  border-color: var(--pl-rule);
  background: var(--pl-paper);
  color: var(--pl-ink);
}

html[data-product-theme^='planlined']
  .lsm-workbench-modal
  :is(.lsm-sidebar-layout-tile, .lsm-sidebar-appearance-choice, .lsm-sidebar-density-choice):is(
    :hover,
    :focus-visible,
    .is-active
  ) {
  border-color: var(--pl-action);
  background: var(--pl-action-tint);
  color: var(--pl-action-hover);
  box-shadow: 0 0 0 3px var(--pl-focus);
}

html[data-product-theme^='planlined'] .lsm-workbench-modal .lsm-sidebar-layout-wireframe,
html[data-product-theme^='planlined'] .lsm-workbench-modal .lsm-sidebar-density-group {
  border-color: var(--pl-rule-strong);
  background: var(--pl-paper-ground);
}

html[data-product-theme^='planlined'] .lsm-workbench-modal .lsm-wire-rail {
  background: var(--pl-ink);
}

html[data-product-theme^='planlined'] .lsm-workbench-modal .lsm-wire-panel {
  background: repeating-linear-gradient(var(--pl-rule) 0 5px, var(--pl-paper-ground) 5px 9px);
}

html[data-product-theme^='planlined'] .lsm-workbench-modal .lsm-sidebar-layout-copy small {
  color: var(--pl-ink);
}

html[data-product-theme^='planlined']
  .lsm-workbench-modal
  :is(.lsm-logo-btn, .lsm-theme-btn:not(.primary), .lsm-sidebar-reset-choice) {
  border-color: var(--pl-rule-strong);
  background: var(--pl-paper-ground);
  color: var(--pl-ink);
}

html[data-product-theme^='planlined']
  .lsm-workbench-modal
  :is(.lsm-logo-btn, .lsm-theme-btn:not(.primary)):hover {
  border-color: var(--pl-action);
  background: var(--pl-action-tint);
  color: var(--pl-action-hover);
}

html[data-product-theme^='planlined']
  .lsm-workbench-modal
  :is(.lsm-logo-btn.danger, .lsm-theme-btn.danger) {
  border-color: var(--pl-danger-border);
  background: var(--pl-danger-tint);
  color: var(--pl-danger-ink);
}

html[data-product-theme^='planlined']
  .lsm-workbench-modal
  :is(.lsm-logo-btn.danger, .lsm-theme-btn.danger):hover {
  border-color: var(--pl-danger-ink);
  background: var(--pl-danger-tint-strong);
  color: var(--pl-danger-ink);
}

html[data-product-theme^='planlined'] .lsm-workbench-modal .lsm-footer-bar {
  border-color: var(--pl-rule) !important;
}

html[data-product-theme^='planlined']
  .lsm-workbench-modal
  :is(.lsm-save-template-btn, .lsm-load-template-btn) {
  border-color: var(--pl-rule-strong) !important;
  background: var(--pl-paper) !important;
  color: var(--pl-ink) !important;
}

html[data-product-theme^='planlined']
  .lsm-workbench-modal
  :is(.lsm-save-template-btn, .lsm-load-template-btn):hover {
  border-color: var(--pl-action) !important;
  background: var(--pl-action-tint) !important;
  color: var(--pl-action-hover) !important;
}

/* Sidebar and remaining legacy shells ------------------------------------ */
html[data-product-theme^='planlined'] .sidebar {
  --sidebar-bg: var(--pl-ink);
  --sidebar-surface: var(--pl-ink);
  --sidebar-surface-raised: var(--pl-ink-warm);
  --sidebar-text: var(--pl-paper-soft);
  --sidebar-muted: var(--pl-on-ink-muted);
  --sidebar-border: var(--pl-rail-rule);
  --sidebar-active-surface: var(--pl-action);
  --sidebar-active-text: var(--color-white);
  --sidebar-accent: var(--pl-signal-tint);

  background-color: var(--pl-ink);
  background-image: none;
}

html[data-product-theme^='planlined'] .sidebar[data-sidebar-theme] {
  --sidebar-surface: var(--pl-ink);
  --sidebar-surface-raised: var(--pl-ink-warm);
  --sidebar-text: var(--pl-paper-soft);
  --sidebar-muted: var(--pl-on-ink-muted);
  --sidebar-border: var(--pl-rail-rule);
  --sidebar-active-surface: var(--pl-action);
  --sidebar-active-text: var(--color-white);
  --sidebar-accent: var(--pl-signal-tint);

  background-color: var(--pl-ink);
  background-image: none;
}

html[data-product-theme^='planlined'] .sidebar .sidebar-menu-item:focus-visible {
  outline-color: var(--pl-signal-tint);
}

html[data-product-theme^='planlined'] .sidebar .sidebar-menu-item.active {
  border-color: var(--pl-action);
  background: var(--pl-action);
  color: var(--color-white);
  box-shadow: none;
}

html[data-product-theme^='planlined'] .sidebar .sidebar-menu-item.active::before {
  background: var(--pl-signal-tint);
  box-shadow: none;
}

html[data-product-theme^='planlined'] .sidebar .sidebar-menu-item.active i {
  color: var(--color-white);
}

html[data-product-theme^='planlined'] .sidebar .sidebar-count-pill {
  background: rgb(200 64 42 / 18%);
  color: var(--pl-signal-tint);
}

html[data-product-theme^='planlined'] .sidebar .bart-assistant-sidebar-launcher i,
html[data-product-theme^='planlined'] .sidebar .activity-center-sidebar-launcher > i {
  color: var(--pl-signal-tint) !important;
  filter: none;
}

html[data-product-theme^='planlined'] :is(#activity-center-list, .activity-center-list) {
  background: var(--pl-paper-ground);
}

html[data-product-theme^='planlined'] .activity-center-root {
  --activity-navy: var(--pl-ink);
  --activity-blue: var(--pl-action);
  --activity-teal: var(--pl-signal);
  --activity-border: var(--pl-rule);
  --activity-muted: var(--pl-text-muted);
}

html[data-product-theme^='planlined']
  :is(.activity-center-drawer, .activity-center-header, .activity-center-controls) {
  border-color: var(--pl-rule);
  background: var(--pl-paper);
}

html[data-product-theme^='planlined']
  :is(.activity-center-header p, .activity-center-tabs button, .activity-center-section-heading) {
  color: var(--pl-text-muted);
}

html[data-product-theme^='planlined'] .activity-center-job,
html[data-product-theme^='planlined'] .activity-center-tabs button .activity-center-tab-count {
  border-color: var(--pl-rule);
  background: var(--pl-paper);
  color: var(--pl-text-muted);
}

html[data-product-theme^='planlined'] .activity-center-footer button {
  color: var(--pl-action);
}

html[data-product-theme^='planlined']
  #step5-header-g
  :is(#client-avatar:not(.has-logo), #header-user-avatar) {
  border: 1px solid var(--pl-ink-edge-mid, rgb(255 201 188 / 28%)) !important;
  background: var(--pl-ink-warm) !important;
  background-image: none !important;
  color: var(--pl-paper-soft) !important;
  box-shadow: none !important;
}

html[data-product-theme^='planlined'] #step5-content-area .dashboard-panes {
  background: var(--pl-paper-ground) !important;
}

html[data-product-theme^='planlined']
  .sidebar[data-sidebar-theme]
  :is(.sidebar-menu-item, .sidebar-open-case-row).is-active,
html[data-product-theme^='planlined']
  .sidebar[data-sidebar-theme]
  :is(.sidebar-menu-item, .sidebar-open-case-row).active {
  border-color: var(--pl-action);
  background: var(--pl-action);
  color: var(--color-white);
}

html[data-product-theme^='planlined'] :where(.modal-content, .dialog-content) {
  border-color: var(--pl-rule);
  background-color: var(--pl-paper);
  color: var(--pl-ink);
  font-family: var(--font-ui);
}

html[data-product-theme^='planlined']
  :where(.btn-primary, .button.primary, .primary-btn):not(.btn-danger, [disabled]) {
  border-color: var(--pl-action) !important;
  background-color: var(--pl-action) !important;
  background-image: none !important;
  color: var(--color-white) !important;
  box-shadow: none;
}

html[data-product-theme^='planlined']
  :where(.btn-primary, .button.primary, .primary-btn):not(.btn-danger, [disabled]):hover {
  border-color: var(--pl-action-hover) !important;
  background-color: var(--pl-action-hover) !important;
}

html[data-product-theme^='planlined'] :where(a, button, [role='button']):focus-visible {
  outline-color: var(--pl-focus-stroke, var(--pl-signal));
}

/* Accessibility and responsive behavior --------------------------------- */

/* The production Case Setup path does not load step5-aaa.css, so the
   product-wide anchor owns the last-resort Step 5 footer geometry. The
   unequal tracks preserve room for the longer Generate Comparison label,
   and minmax(0, ...) prevents Sora's intrinsic width from pushing the grid
   outside its modal. */
@media (width <= 560px) {
  html[data-product-theme^='planlined']
    #setup-modal
    .modal-content:has(#wizard-step-5:not([style*='display: none'], [style*='display:none'])) {
    padding-bottom: 0 !important;
  }

  html[data-product-theme^='planlined']
    #main-wizard-area:has(> #wizard-step-5:not([style*='display: none'], [style*='display:none']))
    > div:has(> #prev-btn) {
    display: grid !important;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    align-items: center;
    gap: 8px 10px !important;
    box-sizing: border-box;
    width: 100%;
    padding: 9px 12px 10px !important;
    min-height: 0;
  }

  html[data-product-theme^='planlined']
    #main-wizard-area:has(> #wizard-step-5:not([style*='display: none'], [style*='display:none']))
    > div:has(> #prev-btn)
    .wizard-footer-step {
    grid-area: 1 / 1 / 2 / 2;
    justify-self: start;
    margin: 0 !important;
    padding-right: 0;
    border-right: 0;
  }

  html[data-product-theme^='planlined']
    #main-wizard-area:has(> #wizard-step-5:not([style*='display: none'], [style*='display:none']))
    > div:has(> #prev-btn)
    #save-and-return-btn {
    grid-area: 1 / 2 / 2 / 3;
    justify-self: end;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    text-decoration: none;
  }

  html[data-product-theme^='planlined']
    #main-wizard-area:has(> #wizard-step-5:not([style*='display: none'], [style*='display:none']))
    > div:has(> #prev-btn)
    #prev-btn {
    grid-area: 2 / 1 / 3 / 2;
  }

  html[data-product-theme^='planlined']
    #main-wizard-area:has(> #wizard-step-5:not([style*='display: none'], [style*='display:none']))
    > div:has(> #prev-btn)
    :is(#next-btn, #generate-btn) {
    grid-area: 2 / 2 / 3 / 3;
  }

  html[data-product-theme^='planlined']
    #main-wizard-area:has(> #wizard-step-5:not([style*='display: none'], [style*='display:none']))
    > div:has(> #prev-btn)
    :is(#prev-btn, #next-btn, #generate-btn, #save-and-return-btn) {
    box-sizing: border-box;
    min-width: 0 !important;
    max-width: 100%;
  }

  html[data-product-theme^='planlined']
    #main-wizard-area:has(> #wizard-step-5:not([style*='display: none'], [style*='display:none']))
    > div:has(> #prev-btn)
    :is(#prev-btn, #next-btn, #generate-btn) {
    width: 100%;
    padding-inline: 8px !important;
    gap: 5px;
    font-size: 12px !important;
  }
}

@media (width <= 760px) {
  html[data-product-theme^='planlined']
    :is(.case-library-main-modal, .plan-library-cmf-modal)
    :is(select, input:not([type='checkbox'], [type='radio'])) {
    min-height: 44px !important;
  }

  html[data-product-theme^='planlined']
    :is(.case-library-main-modal, .plan-library-cmf-modal)
    :is(button, [role='button']) {
    min-height: var(--cmf-control-h-secondary) !important;
    min-width: var(--cmf-control-h-secondary);
  }

  html[data-product-theme^='planlined']
    :is(.case-library-main-modal, .plan-library-cmf-modal)
    :is(.cmf-btn-primary, .cmf-btn-verify, .cmf-btn-ink, .cmf-wb-apply.has-changes) {
    min-height: var(--cmf-control-h-primary) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-product-theme^='planlined'] *,
  html[data-product-theme^='planlined'] *::before,
  html[data-product-theme^='planlined'] *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (forced-colors: active) {
  html[data-product-theme^='planlined'] :is(button, input, select, textarea, [role='button']) {
    forced-color-adjust: auto;
  }

  html[data-product-theme^='planlined'] :focus-visible {
    outline: 2px solid Highlight !important;
  }
}

/* ---- Workspace rail: chrome, therefore product-themed -------------------
   The rail is app chrome, not report content, so it belongs to the product
   theme alongside the sidebar — not to whichever of the 17 report themes
   happens to be selected. Before this block only 2 of those 17 (Precision
   Slate, Ledger Sheet) painted the rail at all, so the other 15 left
   workspace-rail.css's pale default bar sitting inside ink chrome.

   Every value here is a role, not a colour. Repointing --pl-ink moves the
   rail and the sidebar together; that is the whole point of the layer.

   !important is forced, not lazy: Step5Renderer emits the sheet tabs with
   inline styles and repaints active state inline on click, which is why
   workspace-rail.css already uses it. See modules/ui/WorkspaceRail.js. */

/* The plate's surface. Same 116deg ink ramp modules/page-shell/page-shell.css
   paints on its band and complex-modal-factory.css paints on a modal header,
   so Step 5's chrome, the standalone Vue pages and every CMF header are one
   surface treatment rather than three darks.

   Both ranks carry the identical declaration rather than one gradient on a
   shared parent, because the two elements have no common wrapper that does not
   also contain the report. That is safe here: the ramp is ~1250px wide and
   each rank is under 55px tall, so at 116deg the vertical component across a
   rank is a small fraction of a step. Computed from the CSS gradient geometry
   at five x positions (0, 25, 50, 75, 100%), the largest per-channel
   difference across the seam is 2/255 — below a visible step. */
html[data-product-theme^='planlined'] .workspace-rail {
  background: linear-gradient(
    116deg,
    var(--pl-ink-deep),
    var(--pl-ink-warm) 62%,
    var(--pl-ink-deep)
  );
  border-bottom: 1px solid var(--pl-rail-rule);
  color: var(--pl-on-ink);
}

/* The app case bar sits directly above the rail and must be the same ink.
   step5-dashboard.css paints it `var(--color-gray-800)` — a generic neutral
   (#1e293b) that 33 other declarations across 10 files also read, so it is
   repointed HERE at the surface rather than globally, where it would drag
   unrelated greys warm. Verified on localhost: without this the bar sat at
   #1e293b while the sidebar and rail were both #1c2230. */
html[data-product-theme^='planlined'] :is(#step5-header-g, #step5-preview-header) {
  background: var(--pl-ink) !important;
  background-color: var(--pl-ink) !important;
  border-bottom-color: var(--pl-rail-rule) !important;
}

/* The plate's surface — the DASHBOARD bar only. #step5-preview-header is the
   wizard's Step 5 preview: a different bar, with its own ramp, that is in the
   rule above solely so it stops being #1e293b. Putting the plate gradient on
   it repainted a surface nobody asked to change. */
html[data-product-theme^='planlined'] #step5-header-g {
  background: linear-gradient(
    116deg,
    var(--pl-ink-deep),
    var(--pl-ink-warm) 62%,
    var(--pl-ink-deep)
  ) !important;

  /* The flat fallback under the gradient, so a paint failure degrades to the
     plate's own ink rather than to whatever sits behind the bar. */
  background-color: var(--pl-ink) !important;
}

/* #step5-header-g and .workspace-rail are ONE plate with two ranks, so the
   line BETWEEN them is an interior seam, not a boundary — --pl-rail-rule (20%)
   is the plate's outer edge and belongs to the rail's bottom border only.
   #step5-preview-header keeps the 20% rule: it is a standalone plate inside
   the wizard with nothing docked beneath it. */
html[data-product-theme^='planlined'] #step5-header-g {
  border-bottom-color: var(--pl-ink-edge-faint, rgb(255 201 188 / 14%)) !important;
}

/* The paper-era 3px #e8553d margin rule (step5-dashboard.css paints it on
   #step5-header-g, workspace-rail.css on the rail) becomes the slate 2px Signal
   mark on both ranks. It is a stroke, never text, so Signal is the right role;
   the old --pl-margin-rule measured 4.42:1 on ink. Both ranks stay one stroke
   on one plate. #step5-preview-header is deliberately not in this list. */
html[data-product-theme^='planlined'] :is(#step5-header-g, .workspace-rail) {
  box-shadow: inset 2px 0 0 var(--pl-signal) !important;
}

html[data-product-theme^='planlined'] .workspace-rail > #case-workspace-tabs-host {
  background: transparent;
  border-right-color: var(--pl-rail-rule);
}

html[data-product-theme^='planlined']
  .workspace-rail
  :is(.sheet-settings-btn, .sheet-nav-hint, .sheet-nav-tab-count, .sheet-nav-tab-rename) {
  color: var(--pl-on-ink-slate);
}

/* Unboxed until active. The plate carries exactly one fill — the sheet you
   are looking at — so an inactive chip is a label on ink, not a raised tile
   competing with it. */
html[data-product-theme^='planlined'] .workspace-rail__tabs .sheet-nav-tab {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--pl-on-ink-slate) !important;
}

html[data-product-theme^='planlined'] .workspace-rail__tabs .sheet-nav-tab:hover {
  background: rgb(255 255 255 / 10%) !important;
  border-color: var(--pl-rail-rule) !important;
  color: var(--pl-on-ink) !important;
}

/* The active sheet is a mark, not a fill (DESIGN.md: Signal is a mark here,
   never a fill). Lit like the sidebar's active row — the same veil role — with
   the 2px Signal mark under it, whatever the report is themed as. The one
   Signal fill on this screen is Export, below. */
html[data-product-theme^='planlined'] .workspace-rail__tabs .sheet-nav-tab.active {
  background: var(
    --pl-rail-active,
    color-mix(in srgb, var(--pl-on-ink) 11%, transparent)
  ) !important;
  border-color: transparent !important;
  box-shadow: inset 0 -2px 0 var(--pl-signal) !important;
  color: var(--pl-on-ink) !important;
}

html[data-product-theme^='planlined'] .workspace-rail__tabs .sheet-nav-tab.active > span {
  color: var(--pl-on-ink) !important;
}

/* The sheet letter is an on-ink tile on every tab, not a red disc. A scenario
   sheet keeps its own amber marker (that is meaning, not decoration), so only
   its shape follows the tile. The :not() rule outweighs workspace-rail.css's
   `.active > span:first-child` scrim on the active tab. */
html[data-product-theme^='planlined'] .workspace-rail__tabs .sheet-nav-tab .sheet-nav-tab-letter {
  border-radius: 4px !important;
}

html[data-product-theme^='planlined']
  .workspace-rail__tabs
  .sheet-nav-tab
  .sheet-nav-tab-letter:not(.scenario) {
  background: color-mix(in srgb, var(--pl-on-ink) 14%, transparent) !important;
  color: var(--pl-on-ink) !important;
}

/* "Open case" is a case-switcher verb, not a sheet action; the sidebar's
   Quick Actions already carry it. Rail only — the sidebar keeps its own. */
html[data-product-theme^='planlined'] .workspace-rail .case-workspace-tabs__open {
  display: none !important;
}

html[data-product-theme^='planlined']
  .workspace-rail
  :is(
    .sheet-nav-action,
    .sheet-settings-btn,
    .case-workspace-tabs__open,
    .sheet-nav-actions button:not(.dropdown-item),
    .plan-tools-btn.plan-tools-btn--s3u
  ) {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: var(--pl-on-ink) !important;
}

/* Plan Tools is the only rail control that keeps an edge — it opens the menu
   that acts on the plans in the sheet, so it outranks its neighbours. 38%
   rather than the plate's 22% hairline: composited over ink that is the 3:1
   floor 1.4.11 sets for a control boundary, and it is the same value
   modules/page-shell/page-shell.css uses for --cmf-visual-edge on its band.

   .sheet-nav-actions is in this selector for specificity, not scope. :is()
   takes the weight of its most specific argument, so the base rule above lands
   at (0,4,2) via `.sheet-nav-actions button:not(.dropdown-item)`; without this
   extra class the override sat at (0,4,1) and the transparent border won.
   Measured: the button rendered with no edge at all. */
html[data-product-theme^='planlined']
  .workspace-rail
  .sheet-nav-actions
  .plan-tools-btn.plan-tools-btn--s3u {
  border-color: rgb(255 255 255 / 38%) !important;
}

/* "Sheets:" is a label that happens to open Layout Settings, so it reads at
   the muted tier until hovered rather than as a control at full strength. */
html[data-product-theme^='planlined'] .workspace-rail .sheet-settings-btn {
  color: var(--pl-on-ink-slate) !important;
}

html[data-product-theme^='planlined']
  .workspace-rail
  :is(
    .sheet-nav-action,
    .sheet-settings-btn,
    .case-workspace-tabs__open,
    .sheet-nav-actions button:not(.dropdown-item),
    .plan-tools-btn.plan-tools-btn--s3u
  ):hover,
html[data-product-theme^='planlined']
  .workspace-rail
  .plan-tools-btn.plan-tools-btn--s3u[aria-expanded='true'] {
  background: var(--pl-rail-raised) !important;
  color: var(--pl-on-ink) !important;
}

html[data-product-theme^='planlined']
  .workspace-rail
  .sheet-nav-actions
  :is(.plan-tools-btn, .sheet-nav-action, .case-workspace-tabs__open)
  i {
  color: var(--pl-on-ink) !important;
  opacity: 1 !important;
}

/* --pl-signal is the focus ring everywhere else, but red on ink measures
   2.9:1. The tint is the on-ink member of the same Signal family. */
html[data-product-theme^='planlined'] .workspace-rail :is(button, [role='button']):focus-visible {
  outline: 2px solid var(--pl-signal-tint) !important;
  outline-offset: 2px;
}

/* One Signal fill per screen. Share was a second filled Signal button beside
   the decision; it becomes a hairline verb like the other header controls, and
   Export (the deliverable, the decision this page exists for) carries the one
   fill. Chrome, so every report theme gets it. step5-dashboard.css paints both
   with !important at (1,2,0)/(1,3,0); the two ids / the html prefix win by
   specificity, not by editing that sheet. */
html[data-product-theme^='planlined'] #step5-header-g #cmf-export-btn {
  background: var(--pl-signal) !important;
  border-color: var(--pl-signal) !important;
  box-shadow: var(--pl-elevation-primary) !important;
  color: var(--pl-on-ink) !important;
  font-weight: 600 !important;
}

html[data-product-theme^='planlined'] #step5-header-g #cmf-export-btn:hover,
html[data-product-theme^='planlined'] #step5-header-g #cmf-export-btn.active {
  background: var(--pl-signal-deep) !important;
  border-color: var(--pl-signal-deep) !important;
  box-shadow: var(--pl-elevation-primary-hover) !important;
}

/* Label and icon read on the fill; the tool row's slate tiers are for ink. */
html[data-product-theme^='planlined'] #step5-header-g #cmf-export-btn .e2-tool-label,
html[data-product-theme^='planlined'] #step5-header-g #cmf-export-btn > i {
  color: inherit !important;
}

html[data-product-theme^='planlined'] #step5-header-g .e2-btn.share {
  background: transparent !important;
  border: 1px solid color-mix(in srgb, var(--pl-on-ink) 38%, transparent) !important;
  box-shadow: none !important;
  color: var(--pl-on-ink) !important;
}

html[data-product-theme^='planlined'] #step5-header-g .e2-btn.share:hover {
  background: var(
    --pl-rail-active,
    color-mix(in srgb, var(--pl-on-ink) 11%, transparent)
  ) !important;
}

/* Phone: the sheet rail stays one scrolling line. Wrapped inside a fixed-height
   box it painted Plan Tools and the sheet tabs over the report (themes that do
   not carry the narrow-width height reset), and wrapped to 166px where they do.
   The decision keeps its label on a phone. */
@media (width <= 767px) {
  /* flex-shrink 0: the dashboard column would otherwise squeeze the rail back
     to its 42px minimum and clip the 44px touch targets inside the scroller. */
  html[data-product-theme^='planlined'] .workspace-rail {
    flex-shrink: 0;
    height: auto !important;
    min-height: 42px;
  }

  html[data-product-theme^='planlined'] .workspace-rail__bar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none;
  }

  html[data-product-theme^='planlined'] .workspace-rail__bar :is(.plan-tools-btn, .sheet-nav-tab) {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  html[data-product-theme^='planlined'] #step5-header-g #cmf-export-btn .e2-tool-label {
    display: inline !important;
  }

  /* With Export labelled, Share drops to its icon so the avatar stays on
     screen: the word is a bare text node, so font-size 0 hides it (it stays in
     the accessible name) and the icon sets its own size back. */
  html[data-product-theme^='planlined'] #step5-header-g .e2-btn.share {
    font-size: 0 !important;
    gap: 0 !important;
    min-width: 44px;
    padding: 0 !important;
  }

  html[data-product-theme^='planlined'] #step5-header-g .e2-btn.share > i {
    font-size: 14px !important;
  }
}

/* Kit actions also live on standalone pages without a .cmf-modal ancestor. */
html[data-product-theme^='planlined'] .kit-button:focus-visible {
  outline: 2px solid var(--cmf-visual-command);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   Precision Slate · finish layer (direction A "Instrument", chosen 2026-10-08
   from public/mockups/planlined-aaa-finish-2026-10-08/).

   Material only: one light source on the ground, lifted panels, a lit rail,
   a contact shadow under the band, inner light on controls. Geometry, type and
   markup are untouched. Every value is a slate token (planlined-slate-theme.css)
   so the finish repoints with the theme; nothing here names a colour. Scoped
   to ='planlined-slate' (paper keeps its flat decisions) and placed last so a
   same-specificity paper rule above never wins by source order.
   --------------------------------------------------------------------------- */

/* Kit sections on a page are raised white panels on the lit ground (board A,
   and what .cmf-body already does for the harness). The paper theme maps the
   section surface to the subtle tint, which on a standalone page is the same
   value as the ground: grey on grey, lifted only by its shadow. */
/* Same ID list as the paper block above so this ties on specificity and wins
   by source order (the paper selector is ID-level; an attribute selector
   alone would lose). */
html[data-product-theme='planlined-slate']
  :is(
    [data-page-shell-host],
    [data-wizard-page-root],
    #wizard-root,
    #cases-root,
    #plans-root,
    #documents-root,
    #organizations-root,
    #benefit-guide-root,
    #shared-links-root,
    #what-if-root,
    #renewal-root,
    #oasis-root,
    #implementation-root,
    #storage-root,
    #aca-marketplace-root,
    #feedback-root,
    #account-root
  ) {
  --cmf-content-section-bg: var(--cmf-visual-surface-raised);
  --cmf-content-section-border: var(--cmf-visual-rule);
}

/* Ground: a radial light from the top-left, settling to the canvas value. */
html[data-product-theme='planlined-slate'] .page-shell-main {
  background: var(--pl-light);
}

/* Rail: lit at the brand, settling to ink where the page's own rail begins,
   so the host plate and the route rail close into one surface. */
html[data-product-theme='planlined-slate'] .page-shell-rail-host {
  background: var(--pl-rail-plate);
}

/* The cross-nav paints its own ink so it can sit on a flat host; under slate
   the host is the plate, so the nav goes clear and the light reaches it. Its
   right hairline reads the rail rule instead of paper's pink tint. */
html[data-product-theme='planlined-slate'] .page-shell-rail-host > .shell-nav {
  background: transparent;
  box-shadow: inset -1px 0 0 var(--pl-rail-rule);
}

/* Active row: a veil plus the 2px Signal mark, not a red fill. Signal is the
   one filled decision per screen and the page's primary already carries it. */
html[data-product-theme='planlined-slate'] .shell-nav-row.on {
  background: var(--pl-rail-active);
  color: var(--pl-on-ink);
  box-shadow:
    inset 2px 0 0 var(--pl-signal),
    inset 0 1px 0 rgb(255 255 255 / 5%);
}

/* Band: a contact shadow onto the ground; its hairline is the rail rule. */
html[data-product-theme='planlined-slate'] .page-shell-band {
  position: relative;
  z-index: 1;
  border-bottom-color: var(--pl-rail-rule);
  box-shadow: var(--pl-elevation-band);
}

/* Panels: 1px top highlight, 2px contact, 28px ambient with a negative
   spread so the lift stays under the panel. Hover raises the ambient only;
   nothing translates. Page-shell hosts and the wizard root (its own shell,
   marked data-wizard-page-root in wizard.html) only; the harness is a host. The stat
   GRID is the painted box (complex-modal-factory.css ~6739 draws the grid and
   clips it; the tiles inside are transparent cells), so the grid takes the
   lift and a tile inside a grid never does. */
html[data-product-theme='planlined-slate']
  :is([data-page-shell-host], [data-wizard-page-root])
  :is(.cmf-kit-section, .cmf-kit-stat-grid, .cmf-kit-stat:not(.cmf-kit-stat-grid *)) {
  box-shadow: var(--pl-elevation-panel);
  transition: box-shadow 0.18s ease;
}

html[data-product-theme='planlined-slate']
  :is([data-page-shell-host], [data-wizard-page-root])
  :is(.cmf-kit-section, .cmf-kit-stat-grid, .cmf-kit-stat:not(.cmf-kit-stat-grid *)):hover {
  box-shadow: var(--pl-elevation-panel-hover);
}

html[data-product-theme='planlined-slate']
  :is([data-page-shell-host], [data-wizard-page-root])
  .cmf-kit-stat-grid
  > .cmf-kit-stat {
  box-shadow: none;
}

/* Workbench sections are rules, not panels: no lift. */
html[data-product-theme='planlined-slate'] .cmf-workbench-modal .cmf-kit-section,
html[data-product-theme='planlined-slate'] .cmf-workbench-modal .cmf-kit-section:hover {
  box-shadow: none;
}

/* Primary: paper flattens every planlined primary with `none !important`
   above; slate's primary carries a 1px inner light and a warm contact shadow
   in Signal's own deep value. Same specificity, later in source. */
html[data-product-theme='planlined-slate']
  :is(.cmf-btn-primary, .cmf-btn-verify, .cmf-btn.cmf-wb-apply.has-changes),
html[data-product-theme='planlined-slate'] .cmf-workbench-modal > .cmf-footer .cmf-btn-primary {
  box-shadow: var(--pl-elevation-primary) !important;
}

html[data-product-theme='planlined-slate']
  :is(.cmf-btn-primary, .cmf-btn-verify, .cmf-btn.cmf-wb-apply.has-changes):hover,
html[data-product-theme='planlined-slate']
  .cmf-workbench-modal
  > .cmf-footer
  .cmf-btn-primary:hover {
  box-shadow: var(--pl-elevation-primary-hover) !important;
}

html[data-product-theme='planlined-slate']
  :is(.cmf-btn-primary, .cmf-btn-verify, .cmf-btn.cmf-wb-apply.has-changes):is(
    :disabled,
    [aria-disabled='true']
  ),
html[data-product-theme='planlined-slate']
  .cmf-workbench-modal
  > .cmf-footer
  .cmf-btn-primary:is(:disabled, [aria-disabled='true']) {
  box-shadow: none !important;
}

/* Secondary: inner light plus a 1px contact. :where() keeps the rule under
   every state rule (hover, disabled, focus) that the kit already owns. */
html[data-product-theme='planlined-slate']
  :where(.cmf-btn-secondary):not(:disabled, [aria-disabled='true'], :hover) {
  box-shadow: var(--pl-elevation-control);
}

/* Fields: a 1px inset shade at rest. Focus, warn, error, disabled and
   read-only keep their own box-shadow. */
html[data-product-theme='planlined-slate']
  :where(.cmf-form-input, .cmf-form-select, .cmf-form-textarea):not(
    :focus,
    :disabled,
    [readonly],
    .is-warn,
    .is-error,
    [aria-invalid='true']
  ) {
  box-shadow: var(--pl-field-inset);
}

/* Selects are boxed fields under slate, like the inputs beside them. CMF's
   "Treatment C" draws .cmf-form-select ruled at rest (transparent edge, bottom
   rule, 8px top-only radius) and boxed 8px on hover; board A and the slate
   geometry spec have one 4px boxed field. Same specificity class as CMF's
   hover/focus rules (0,2,x), later in source. */
html[data-product-theme='planlined-slate'] .cmf-form-select,
html[data-product-theme='planlined-slate'] .cmf-form-select:hover {
  border-color: var(--cmf-visual-edge);
  border-radius: var(--cmf-field-radius);
}

/* States change border, ring and text, never the base box: the shared focus
   rule bumps the radius to 8px, which under slate moves a 4px field. */
html[data-product-theme='planlined-slate']
  :is(.cmf-form-input, .cmf-form-select, .cmf-form-textarea):focus {
  border-radius: var(--cmf-field-radius);
}

/* Status badges: a 1px inset edge so the tint does not float off white. */
html[data-product-theme='planlined-slate'] :where(.cmf-kit-status-badge) {
  box-shadow: var(--pl-badge-edge);
}

/* Shared ink rail treatment. CMF shells opt in without a feature palette.
   All descendants consume these same Planlined roles; the main stays light. */
html[data-product-theme='planlined-slate']
  .cmf-workbench-modal[data-cmf-rail-tone='ink']
  .cmf-wb-rail {
  --surface-primary: var(--pl-ink);
  --surface-secondary: var(--pl-ink);
  --text-primary: var(--pl-on-ink);
  --text-secondary: var(--pl-on-ink-muted);
  --border-subtle: var(--pl-ink-edge);
  --cmf-visual-ink: var(--pl-on-ink);
  --cmf-visual-ink-secondary: var(--pl-on-ink-muted);
  --cmf-visual-ink-tertiary: var(--pl-on-ink-muted);
  --cmf-visual-rule: var(--pl-ink-edge);
  --cmf-shell-soft-brand: var(--pl-ink-warm);
  --cmf-shell-current-bg: var(--pl-rail-raised);
  --cmf-shell-icon-bg: var(--pl-ink-tile);
  --cmf-shell-icon-current-bg: var(--pl-ink-tile);
  --cmf-shell-icon-warning-bg: var(--pl-ink-tile);
  --cmf-wb-rail-bg: var(--pl-ink);
  --cmf-wb-rail-border: var(--pl-ink-edge);
  --cmf-wb-warning: var(--pl-on-ink-muted);
  --cmf-wb-meter-bg: transparent;
  --cmf-wb-meter-border: transparent;
  background: var(--pl-rail-plate);
  color: var(--pl-on-ink);
}
html[data-product-theme='planlined-slate']
  .cmf-workbench-modal[data-cmf-rail-tone='ink']
  .cmf-wb-rail-item {
  background: transparent;
  color: var(--pl-on-ink);
  grid-template-columns: 30px minmax(0, 1fr);
  border-bottom-color: var(--pl-ink-edge);
}
html[data-product-theme='planlined-slate']
  [data-cmf-rail-tone='ink']
  .cmf-wb-rail-item:is(:hover, [aria-current='true']) {
  background: var(--pl-rail-raised);
  border-color: var(--pl-ink-edge);
}
html[data-product-theme='planlined-slate']
  [data-cmf-rail-tone='ink']
  .cmf-wb-rail-item[aria-current='true'] {
  box-shadow: inset 2px 0 var(--pl-signal);
}
html[data-product-theme='planlined-slate']
  .cmf-workbench-modal[data-cmf-rail-tone='ink']
  .cmf-wb-rail-label {
  color: var(--pl-on-ink);
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 12px;
}
html[data-product-theme='planlined-slate']
  [data-cmf-rail-tone='ink']
  :is(
    .cmf-wb-rail-icon,
    .cmf-wb-meter-value,
    .cmf-wb-meter-value em,
    .cmf-wb-meter-pct,
    .cmf-wb-rail-action
  ) {
  color: var(--pl-on-ink-muted);
}
html[data-product-theme='planlined-slate'] [data-cmf-rail-tone='ink'] .cmf-wb-chip {
  grid-column: 2;
  justify-self: start;
  color: var(--pl-on-ink);
  background: var(--pl-ink-tile);
  border-color: var(--pl-ink-edge);
}
html[data-product-theme='planlined-slate'] [data-cmf-rail-tone='ink'] .cmf-wb-chip-danger {
  color: color-mix(in srgb, var(--pl-danger-ink) 28%, var(--pl-on-ink));
}
html[data-product-theme='planlined-slate']
  [data-cmf-rail-tone='ink']
  .cmf-wb-rail-item:has(.cmf-wb-chip-danger) {
  border-left: 2px solid color-mix(in srgb, var(--pl-danger-ink) 28%, var(--pl-on-ink));
}
/* Layout rules must never resurrect a search result or collapsed rail item. */
html [data-cmf-rail-tone='ink'] :is([hidden], .is-hidden, .is-group-collapsed, .is-renaming) {
  display: none !important;
}

html[data-product-theme='planlined-slate']
  .cmf-workbench-modal[data-cmf-rail-tone='ink']
  .cmf-wb-rail-item[aria-current='true'] {
  background: var(--pl-rail-raised) !important;
}
html[data-product-theme='planlined-slate']
  .cmf-workbench-modal[data-cmf-rail-tone='ink']
  .cmf-wb-rail-item:is([aria-current='true'], .needs-review)
  .cmf-wb-rail-icon {
  background: var(--pl-ink-tile);
  color: var(--pl-on-ink-muted);
}
html[data-product-theme='planlined-slate']
  .cmf-workbench-modal[data-cmf-rail-tone='ink']
  .cmf-wb-rail
  .cmf-wb-rail-action {
  background: var(--pl-ink-warm) !important;
  border-color: var(--pl-ink-edge) !important;
  color: var(--pl-on-ink) !important;
}
html[data-product-theme='planlined-slate']
  .cmf-workbench-modal[data-cmf-rail-tone='ink']
  .cmf-wb-rail {
  --cmf-wb-success: var(--pl-on-ink-muted);
}

/* QCC intake compatibility: the adopted legacy shell keeps its lifecycle,
   while the shared Signal layer owns its presentation and legacy aliases.
   Restrict this bridge to upload; processing and review have their own hosts. */
html[data-product-theme^='planlined'] #quick-case-modal:has(.qcc-evidence-upload) {
  --text-color: var(--cmf-visual-ink);
  --text-primary: var(--cmf-visual-ink);
  --text-secondary: var(--cmf-visual-ink-secondary);
  --text-light: var(--cmf-visual-ink-tertiary);
  --border-color: var(--cmf-visual-rule);
  --surface-1: var(--cmf-visual-surface);
  --surface-2: var(--pl-paper-soft);
  --accent-color: var(--cmf-visual-command);
  --qcc-primary: var(--cmf-visual-command);
  --qcc-primary-hover: var(--cmf-visual-command-hover);
  --qcc-text-primary: var(--cmf-visual-ink);
  --qcc-surface-2: var(--pl-paper-soft);

  accent-color: var(--cmf-visual-command);
}

html[data-product-theme^='planlined']
  #quick-case-modal:has(.qcc-evidence-upload)
  .qcc-modal-content {
  padding: 0;
  overflow: hidden;
  font: 400 13.5px / 20px var(--font-ui);
  box-shadow: var(--cmf-visual-shadow);
}

html[data-product-theme^='planlined'] #quick-case-modal:has(.qcc-evidence-upload) .qcc-header {
  position: relative;
  min-height: 64px;
  padding: 12px 20px;
  border-bottom: 2px solid var(--cmf-visual-signal);
  background: var(--cmf-visual-header);
}

html[data-product-theme^='planlined']
  #quick-case-modal:has(.qcc-evidence-upload)
  .qcc-header-title {
  color: var(--pl-on-ink);
  font: 700 20px / 22px var(--font-ui);
  letter-spacing: -0.015em;
}

html[data-product-theme^='planlined']
  #quick-case-modal:has(.qcc-evidence-upload)
  .qcc-header-subtitle {
  color: var(--pl-on-ink-muted);
  font: 400 12px / 16px var(--font-ui);
}

html[data-product-theme^='planlined'] #quick-case-modal:has(.qcc-evidence-upload) .qcc-header-icon {
  width: 36px;
  height: 36px;
  border: 1px solid var(--pl-ink-edge);
  border-radius: var(--cmf-control-radius);
  background: var(--pl-ink-tile);
  color: var(--pl-on-ink);
  font-size: 16px;
}

html[data-product-theme^='planlined']
  #quick-case-modal:has(.qcc-evidence-upload)
  :is(.qcc-walkthrough-btn, .qcc-close-btn) {
  min-height: var(--cmf-control-h-secondary);
  border: 1px solid var(--pl-ink-edge);
  border-radius: var(--cmf-control-radius);
  background: transparent;
  color: var(--pl-on-ink);
  font-family: var(--font-ui);
  font-size: var(--cmf-control-font);
}

html[data-product-theme^='planlined']
  #quick-case-modal:has(.qcc-evidence-upload)
  :is(.qcc-walkthrough-btn, .qcc-close-btn):hover {
  background: var(--pl-ink-tile);
}

html[data-product-theme^='planlined']
  #quick-case-modal:has(.qcc-evidence-upload)
  :is(.qcc-walkthrough-btn, .qcc-close-btn):focus-visible {
  outline: 2px solid var(--pl-on-ink);
  outline-offset: 2px;
}

html[data-product-theme^='planlined']
  #quick-case-modal:has(.qcc-evidence-upload)
  :is(.kit-radio input, .kit-checkbox input) {
  width: 16px;
  height: 16px;
  accent-color: var(--cmf-visual-command);
}

html[data-product-theme^='planlined']
  #quick-case-modal:has(.qcc-evidence-upload)
  .kit-radio__label {
  font: 600 13.5px / 20px var(--font-ui);
}

html[data-product-theme^='planlined']
  #quick-case-modal:has(.qcc-evidence-upload)
  .qcc-upload-context
  h3 {
  font: 600 16px / 24px var(--font-ui);
}

html[data-product-theme^='planlined']
  #quick-case-modal:has(.qcc-evidence-upload)
  .qcc-upload-group-heading {
  background: var(--pl-paper-inset);
}

@media (width >= 1200px) {
  html[data-product-theme^='planlined']
    #quick-case-modal:has(.qcc-evidence-upload)
    .qcc-modal-content
    > .qcc-stepper {
    height: 64px;
  }

  html[data-product-theme^='planlined']
    #quick-case-modal:has(.qcc-evidence-upload)
    .qcc-modal-content
    > .qcc-stepper
    .qcc-step.active {
    background: transparent;
  }

  html[data-product-theme^='planlined']
    #quick-case-modal:has(.qcc-evidence-upload)
    .qcc-modal-content
    > .qcc-stepper
    .qcc-step-icon {
    border: 1px solid var(--pl-ink-edge);
    background: transparent;
    color: var(--pl-on-ink-muted);
  }

  html[data-product-theme^='planlined']
    #quick-case-modal:has(.qcc-evidence-upload)
    .qcc-modal-content
    > .qcc-stepper
    .qcc-step.active
    .qcc-step-icon {
    border-color: var(--pl-on-ink);
    background: var(--pl-on-ink);
    color: var(--pl-ink);
  }
}

/* Approved upload Option A: a generous, bounded drop target stays above the
   source list while the case rail retains its compact reading controls. */
html[data-product-theme^='planlined']
  #quick-case-modal:has(.qcc-evidence-upload)
  .qcc-upload-dropzone {
  box-sizing: border-box;
  flex-shrink: 0;
  min-height: 280px;
  padding: 32px 24px;
  text-align: center;
}

html[data-product-theme^='planlined']
  #quick-case-modal:has(.qcc-evidence-upload)
  .qcc-upload-dropzone--empty {
  flex: 0 0 auto;
  min-height: 280px;
}

html[data-product-theme^='planlined']
  #quick-case-modal:has(.qcc-evidence-upload)
  .qcc-upload-dropzone
  .cmf-kit-dropzone-label {
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

html[data-product-theme^='planlined']
  #quick-case-modal:has(.qcc-evidence-upload)
  .qcc-upload-dropzone
  .cmf-kit-dropzone-title {
  font: 600 20px / 28px var(--font-ui);
}

@media (width <= 760px) {
  html[data-product-theme^='planlined']
    #quick-case-modal:has(.qcc-evidence-upload)
    .qcc-upload-dropzone {
    min-height: 240px;
  }
}

html[data-product-theme^='planlined']
  #quick-case-modal:has(.qcc-evidence-upload)
  .qcc-upload-dropzone
  .cmf-kit-dropzone-icon {
  inline-size: 58px;
  block-size: 58px;
  flex-basis: 58px;
  font-size: 28px;
  background: var(--pl-paper-inset);
  color: var(--pl-ink-warm);
}

html[data-product-theme^='planlined']
  #quick-case-modal:has(.qcc-evidence-upload)
  .qcc-upload-dropzone
  .cmf-kit-dropzone-browse {
  color: var(--cmf-visual-command);
  font: 400 13.5px / 20px var(--font-ui);
}

html[data-product-theme^='planlined']
  #quick-case-modal:has(.qcc-evidence-upload)
  .qcc-upload-dropzone
  .cmf-kit-dropzone-browse
  span {
  text-decoration: underline;
  text-underline-offset: 3px;
}

html[data-product-theme^='planlined']
  #quick-case-modal:has(.qcc-evidence-upload)
  .qcc-upload-dropzone
  .cmf-kit-dropzone-hint {
  margin-block-start: 16px;
}

html[data-product-theme^='planlined']
  #quick-case-modal:has(.qcc-evidence-upload)
  .qcc-upload-register-table
  :is(.cmf-kit-th, .cmf-kit-td) {
  padding: 12px;
  border: 0;
  border-block-end: 1px solid var(--cmf-visual-rule);
}

html[data-product-theme^='planlined']
  #quick-case-modal:has(.qcc-evidence-upload)
  .qcc-upload-register-table
  .cmf-kit-th {
  background: var(--pl-paper-inset);
  color: var(--cmf-visual-ink-secondary);
  font: 600 12px / 20px var(--font-ui);
}

@media (width <= 760px) {
  html[data-product-theme^='planlined'] #quick-case-modal:has(.qcc-evidence-upload) .qcc-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  html[data-product-theme^='planlined']
    #quick-case-modal:has(.qcc-evidence-upload)
    .qcc-header-content {
    min-width: 0;
  }

  html[data-product-theme^='planlined']
    #quick-case-modal:has(.qcc-evidence-upload)
    .qcc-header-title {
    font-size: 18px;
    white-space: normal;
  }

  html[data-product-theme^='planlined']
    #quick-case-modal:has(.qcc-evidence-upload)
    .qcc-header-actions {
    justify-content: end;
  }
}

@media (width <= 640px) {
  html[data-product-theme^='planlined']
    #quick-case-modal:has(.qcc-evidence-upload)
    .qcc-upload-register-table
    .cmf-kit-td {
    padding: 4px 12px;
    border: 0;
  }

  html[data-product-theme^='planlined']
    #quick-case-modal:has(.qcc-evidence-upload)
    .qcc-upload-register-table
    tbody
    tr
    + tr {
    border-block-start: 1px solid var(--cmf-visual-rule);
  }
}

/* Keep the adopted intake host transparent to CMF's height contract, including
   phone rules that otherwise treat each direct child as generic modal content. */
html[data-product-theme^='planlined']
  #quick-case-modal
  .qcc-shared-surface-host:has(> .qcc-evidence-upload) {
  display: contents;
  padding: 0;
}

/* Workspace status controls retain inline visibility from the shell controller.
   Override only its legacy paint; display and positioning remain shell-owned. */
html[data-product-theme='planlined-slate'] #notification-area {
  font-family: var(--font-ui);
}

html[data-product-theme='planlined-slate'] .toast-history-popover .cmf-header {
  background: var(--pl-rail-plate);
  color: var(--pl-on-ink);
}

html[data-product-theme='planlined-slate'] #notification-area .notification-icon {
  border-radius: 4px !important;
  border-color: var(--cmf-visual-rule) !important;
  background: var(--cmf-visual-surface) !important;
  color: var(--cmf-visual-ink-secondary);
  box-shadow: var(--pl-elevation-control) !important;
}

html[data-product-theme='planlined-slate'] #notification-area .notification-icon:hover {
  background: var(--cmf-visual-rail) !important;
  border-color: var(--pl-rule-strong) !important;
}

html[data-product-theme='planlined-slate'] #notification-area :focus-visible {
  outline: 2px solid var(--pl-focus);
  outline-offset: 3px;
}

html[data-product-theme='planlined-slate'] #init-degraded-pill {
  border: 1px solid var(--cmf-state-warning-border);
  border-radius: 4px !important;
  background: var(--cmf-state-warning-bg) !important;
  color: var(--cmf-state-warning-ink) !important;
  font-family: var(--font-ui);
  box-shadow: var(--pl-elevation-control) !important;
}

html[data-product-theme='planlined-slate'] #error-indicator {
  background: var(--cmf-state-danger-ink) !important;
  box-shadow: 0 0 0 3px var(--cmf-state-danger-bg) !important;
  animation: none !important;
}

/* Case opening uses the existing loading surface with Signal's shared roles.
   The stationary brand mark and composited ring remain legible while the
   workspace is preparing; no percentage is implied for this operation. */
html[data-product-theme='planlined-slate'] #loading-overlay[data-case-opening] {
  /* The cold-entry startup blocker is 99999. Case feedback owns the next layer. */
  z-index: 100000;
  background: var(--pl-paper-ground);
  color: var(--cmf-visual-ink);
  font-family: var(--font-ui);
  gap: 16px;
  backdrop-filter: none;
}

html[data-product-theme='planlined-slate'] #loading-overlay[data-case-opening] .spinner {
  position: relative;
  width: 48px;
  height: 48px;
  margin: 8px;
  border: 0;
  background: url('/assets/branding/planlined-mark.svg') center / 32px 32px no-repeat;
  animation: none;
}

html[data-product-theme='planlined-slate'] #loading-overlay[data-case-opening] .spinner::before {
  content: '';
  position: absolute;
  inset: -6px;
  border: 2px solid var(--cmf-visual-rule-strong);
  border-top-color: var(--cmf-visual-header);
  border-radius: 50%;
  animation: planlined-case-opening-spin 800ms linear infinite;
}

html[data-product-theme='planlined-slate']
  #loading-overlay[data-case-opening]
  .loading-overlay-message {
  font-size: 14px;
  font-weight: 600;
}

html[data-product-theme='planlined-slate']
  #loading-overlay[data-case-opening]
  #loading-overlay-elapsed-time {
  /* Override the old overlay's inline presentation with the shared text role. */
  color: var(--cmf-visual-ink-secondary) !important;
}

@keyframes planlined-case-opening-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-product-theme='planlined-slate'] #loading-overlay[data-case-opening] .spinner::before {
    animation: none;
  }
}

@media (pointer: coarse) {
  html[data-product-theme='planlined-slate'] #notification-area .notification-icon {
    width: 44px !important;
    height: 44px !important;
  }
}