/* Planlined Signal / Option A component defaults.
 * Loaded once by Vue Kit, independent of page layout and CMF JavaScript.
 * Page-specific composition remains in planlined-workspace.css. */
html:root[data-product-theme='planlined-slate']
  :is(
    .kit-section,
    .kit-table,
    .kit-stat-grid,
    .kit-stat,
    .kit-toolbar,
    .kit-field,
    .kit-tabs,
    .kit-button,
    .kit-status-badge,
    .kit-currency
  ) {
  font-family: var(--font-ui);
}

/* Ordinary sections group with space and rules. Panels are an explicit variant. */
html:root[data-product-theme='planlined-slate'] .kit-section,
html:root[data-product-theme='planlined-slate'] .kit-section:hover {
  margin: 0 0 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: none;
}
html:root[data-product-theme='planlined-slate'] .kit-section > .cmf-kit-section-title,
html:root[data-product-theme='planlined-slate'] .kit-section > .cmf-kit-section-header {
  margin: 0 0 16px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--cmf-visual-rule);
}
html:root[data-product-theme='planlined-slate'] .kit-section .cmf-kit-section-title {
  margin: 0;
  color: var(--cmf-visual-ink);
  font: 600 14px/21px var(--font-ui);
  letter-spacing: -0.2px;
}
html:root[data-product-theme='planlined-slate'] .kit-section .cmf-kit-section-subtitle {
  margin-top: 3px;
  color: var(--cmf-visual-ink-tertiary);
  font: 400 11px/16.5px var(--font-ui);
}
html:root[data-product-theme='planlined-slate'] .kit-section > .cmf-kit-section-body {
  gap: 16px;
  padding: 0;
  color: var(--cmf-visual-ink);
  font: 400 13px/19.5px var(--font-ui);
}
html:root[data-product-theme='planlined-slate'] .kit-section.kit-section--panel {
  border: 1px solid var(--cmf-visual-rule);
  border-radius: 6px;
  background: var(--pl-paper);
  overflow: hidden;
}
html:root[data-product-theme='planlined-slate'] .kit-section--panel > .cmf-kit-section-header {
  padding: 18px 20px;
  margin: 0;
}
html:root[data-product-theme='planlined-slate'] .kit-section--panel > .cmf-kit-section-body {
  padding: 20px;
}
/* An ordinary child section never adds another box inside a panel. */
html:root[data-product-theme='planlined-slate'] .kit-section .kit-section,
html:root[data-product-theme='planlined-slate'] .kit-section .kit-section:hover {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
html:root[data-product-theme='planlined-slate']
  .kit-section
  .kit-section
  > :is(.cmf-kit-section-header, .cmf-kit-section-body) {
  padding-inline: 0;
}

/* Tables share Signal type and minimum row geometry. Table-cell height is a
 * minimum: wrapped content and controls can grow a row without being clipped.
 * Alignment and sticky geometry stay with the component/column model. */
html:root[data-product-theme='planlined-slate'] .kit-table {
  --kit-table-row-height: var(--pl-row-standard);
  --kit-table-cell-pad-y: 7px;
  --kit-table-cell-pad-x: var(--pl-space-16);

  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  background: var(--pl-paper);
  font: var(--pl-type-body-weight) var(--pl-type-body-size) / var(--pl-type-body-line)
    var(--font-ui);
  color: var(--cmf-visual-ink);
}

html:root[data-product-theme='planlined-slate'] .kit-table thead th {
  box-sizing: border-box;
  height: var(--kit-table-row-height);
  padding: var(--kit-table-cell-pad-y) var(--kit-table-cell-pad-x);
  border: 0;
  border-bottom: 1px solid var(--cmf-visual-rule);
  background: var(--pl-paper-inset);
  color: var(--cmf-visual-ink-secondary);
  font: var(--pl-type-eyebrow-weight) var(--pl-type-eyebrow-size) / var(--pl-type-eyebrow-line)
    var(--font-ui);
  letter-spacing: var(--pl-type-eyebrow-tracking);
  text-transform: uppercase;
  text-align: left;
}

html:root[data-product-theme='planlined-slate'] .kit-table tbody :is(td, th),
html:root[data-product-theme='planlined-slate'] .kit-table tfoot :is(td, th) {
  box-sizing: border-box;
  height: var(--kit-table-row-height);
  padding: var(--kit-table-cell-pad-y) var(--kit-table-cell-pad-x);
  border: 0;
  border-bottom: 1px solid var(--cmf-visual-rule);
  font: var(--pl-type-body-weight) var(--pl-type-body-size) / var(--pl-type-body-line)
    var(--font-ui);
  color: var(--cmf-visual-ink);
  letter-spacing: normal;
  vertical-align: middle;
}

html:root[data-product-theme='planlined-slate'] .kit-table tbody tr:last-child > :is(th, td) {
  border-bottom: 0;
}

html:root[data-product-theme='planlined-slate']
  .kit-table
  :is(.cmf-kit-cell-right, [data-numeric='true']) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

html:root[data-product-theme='planlined-slate'] .kit-table .cmf-kit-cell-center {
  text-align: center;
}

html:root[data-product-theme='planlined-slate'] .kit-table .kit-ledger__row-head {
  background: var(--pl-paper-soft);
  color: var(--pl-text-muted);
  font-weight: 500;
}

html:root[data-product-theme='planlined-slate'] .kit-table tfoot :is(td, th) {
  font-weight: 600;
  border-top: 1px solid var(--cmf-visual-rule-strong);
}

/* Sort controls inherit the header step. A reserved icon track keeps both the
 * label and the column width stable when the canonical sort adds its arrow. */
html:root[data-product-theme='planlined-slate'] .kit-table thead th:has(> .cmf-kit-th-sort) {
  padding-block: 3px;
}

html:root[data-product-theme='planlined-slate'] .kit-table .cmf-kit-th-sort {
  display: inline-grid;
  grid-template-columns: auto var(--pl-space-16);
  align-items: center;
  min-height: var(--pl-control-h-compact);
  gap: var(--pl-space-4);
  padding: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  text-transform: inherit;
  white-space: normal;
}

html:root[data-product-theme='planlined-slate'] .kit-table .cmf-kit-th-sort::after {
  content: '';
  grid-area: 1 / 2;
  width: var(--pl-space-16);
}

html:root[data-product-theme='planlined-slate'] .kit-table .cmf-kit-th-sort > .kit-button__label {
  grid-area: 1 / 1;
}

html:root[data-product-theme='planlined-slate'] .kit-table .cmf-kit-th-sort > .kit-icon {
  grid-area: 1 / 2;
}

/* A stat grid is one flat strip, with no individual raised tiles. */
html:root[data-product-theme='planlined-slate'] .kit-stat-grid {
  border: 0;
  border-top: 1px solid var(--cmf-visual-rule);
  border-bottom: 1px solid var(--cmf-visual-rule);
  border-radius: 0;
  padding: 17px 0;
  background: var(--pl-paper);
  box-shadow: none;
}
html:root[data-product-theme='planlined-slate'] :is(.kit-stat, .kit-stat-grid > .cmf-kit-stat) {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 22px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  min-width: 0;
}
html:root[data-product-theme='planlined-slate'] .kit-stat-grid > .cmf-kit-stat + .cmf-kit-stat {
  border-left: 1px solid var(--cmf-visual-rule);
}
html:root[data-product-theme='planlined-slate']
  :is(.kit-stat, .kit-stat-grid > .cmf-kit-stat)
  > .cmf-kit-stat-label {
  order: 0;
  font: 400 11px/16.5px var(--font-ui);
  text-transform: none;
  letter-spacing: normal;
  color: var(--cmf-visual-ink-tertiary);
}
html:root[data-product-theme='planlined-slate']
  :is(.kit-stat, .kit-stat-grid > .cmf-kit-stat)
  > .cmf-kit-stat-value {
  order: 1;
  font: 600 24px/36px var(--font-ui);
  letter-spacing: -0.6px;
  font-variant-numeric: tabular-nums;
}
html:root[data-product-theme='planlined-slate'] .kit-stat__sublabel {
  order: 2;
  font: 400 10px/15px var(--font-ui);
  color: var(--cmf-visual-ink-tertiary);
}
html:root[data-product-theme='planlined-slate'] .cmf-kit-stat--success > .cmf-kit-stat-value {
  color: var(--cmf-visual-ready);
}
html:root[data-product-theme='planlined-slate'] .cmf-kit-stat--warning > .cmf-kit-stat-value {
  color: var(--cmf-visual-review);
}
html:root[data-product-theme='planlined-slate'] .cmf-kit-stat--danger > .cmf-kit-stat-value {
  color: var(--cmf-visual-danger);
}

/* Control geometry comes from the slate control tokens through .cmf-btn and its
 * ranks in planlined-controls.css (36 primary / 32 secondary, 13/600 and
 * 12.5/500, 0 16 / 0 12, the Signal contact shadow and the inner light): the
 * same paint the CMF modals carry, measured live on app.html 2026-10-23. A
 * flat 36px / 12px / no-shadow override here (2026-10-20) made every kit
 * Button on a Vue page read differently from the rest of the product. */
html:root[data-product-theme='planlined-slate'] .kit-button {
  border-radius: var(--pl-radius-control, 4px);
  letter-spacing: normal;
}
html:root[data-product-theme='planlined-slate'] .kit-button.cmf-btn-link {
  background: transparent;
  border: 0;
  padding-inline: 0;
  color: var(--cmf-visual-command);
  box-shadow: none;
}
html:root[data-product-theme='planlined-slate'] .kit-field > .cmf-form-label {
  font: 500 12px/18px var(--font-ui);
  color: var(--cmf-visual-ink-secondary);
}
html:root[data-product-theme='planlined-slate']
  .kit-field
  > :is(.cmf-form-input, .cmf-form-select, .cmf-form-textarea),
html:root[data-product-theme='planlined-slate']
  .kit-currency:not(.kit-currency--ledger)
  .kit-currency__input {
  border-radius: 4px;
  border-color: var(--cmf-visual-rule);
  font: 400 13px/19.5px var(--font-ui);
  box-shadow: none;
}
html:root[data-product-theme='planlined-slate'] .kit-status-badge {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  font: 500 var(--kit-status-badge-font, 10px)/15px var(--font-ui);
  box-shadow: none;
}
html:root[data-product-theme='planlined-slate'] .kit-status-badge.cmf-kit-status-badge--neutral {
  color: var(--cmf-visual-ink-tertiary);
}
html:root[data-product-theme='planlined-slate'] .kit-tabs__list {
  border: 0;
  border-bottom: 1px solid var(--cmf-visual-rule);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
html:root[data-product-theme='planlined-slate'] .kit-tabs__tab {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font: 400 12px/18px var(--font-ui);
  color: var(--cmf-visual-ink-tertiary);
}
html:root[data-product-theme='planlined-slate'] .kit-tabs__tab.is-active {
  background: transparent;
  border-bottom-color: var(--cmf-visual-command);
  color: var(--cmf-visual-command);
  font-weight: 600;
  box-shadow: none;
}
@media (pointer: coarse) {
  html:root[data-product-theme='planlined-slate'] .kit-button {
    min-height: 44px;
  }
}
/* The existing finish layer resolves these roles on each component. Override
 * the roles, so page-shell :is()/:hover specificity cannot restore elevation. */
html:root[data-product-theme='planlined-slate'] :is(.kit-section, .kit-stat-grid, .kit-stat) {
  --pl-elevation-panel: none;
  --pl-elevation-panel-hover: none;
}
html:root[data-product-theme='planlined-slate'] .kit-section .cmf-kit-section-heading {
  display: block;
  min-width: 0;
}
html:root[data-product-theme='planlined-slate'] .kit-section .cmf-kit-section-title::before {
  content: none;
  display: none;
}

/* Opt-in editing density: freeform values use the same quiet ledger treatment
 * as CurrencyField, without changing ordinary form fields or tables. */
html:root[data-product-theme='planlined-slate'] .kit-field--ledger {
  --cmf-control-h-field: var(--cmf-control-h-compact, 28px);
  --cmf-field-pad-y: 3px;
  --cmf-field-pad-x: 8px;
  --cmf-field-font: 13px;
}
html:root[data-product-theme='planlined-slate'] .kit-field--ledger .cmf-form-input {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
html:root[data-product-theme='planlined-slate']
  .kit-field--ledger
  .cmf-form-input:not(:hover):not(:focus):not([aria-invalid='true']) {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
html:root[data-product-theme='planlined-slate'] .kit-table.kit-ledger--compact {
  --kit-table-row-height: var(--pl-row-compact);
  --kit-table-cell-pad-y: var(--pl-space-4);
  --kit-table-cell-pad-x: 10px;
}

html:root[data-product-theme='planlined-slate']
  .kit-table.kit-ledger--compact
  thead
  th:has(> .cmf-kit-th-sort) {
  padding-block: 0;
}

/* Editing keeps the compact horizontal inset, but its control owns a 44px
 * minimum row even when compact density is requested. */
html:root[data-product-theme='planlined-slate'] .kit-table.kit-ledger--editable {
  --kit-table-row-height: var(--pl-row-editable);
  --kit-table-cell-pad-y: var(--pl-space-4);
  --kit-table-cell-pad-x: 10px;
}

html:root[data-product-theme='planlined-slate'] .kit-table.kit-ledger--editable .cmf-form-input {
  font-size: var(--pl-type-body-size);
}

html:root[data-product-theme='planlined-slate'] .kit-table .kit-ledger__group-head {
  height: var(--pl-row-compact);
  padding-block: var(--pl-space-4);
  background: var(--pl-paper-inset);
  color: var(--cmf-visual-ink-secondary);
  font: var(--pl-type-eyebrow-weight) var(--pl-type-eyebrow-size) / var(--pl-type-eyebrow-line)
    var(--font-ui);
  letter-spacing: var(--pl-type-eyebrow-tracking);
  text-transform: uppercase;
}

@media (width <= 600px) {
  html:root[data-product-theme='planlined-slate'] .kit-table.kit-ledger--compact {
    --kit-table-cell-pad-x: 6px;
  }
}

@media (pointer: coarse) {
  html:root[data-product-theme='planlined-slate'] .kit-table .cmf-kit-th-sort {
    min-height: var(--pl-control-h-touch);
  }
}

/* Public ResponsiveLedger layout/density and FieldRow label/alignment APIs. */
.kit-ledger {
  min-width: 0;
}
.kit-ledger--scrollable {
  overflow-x: auto;
}
.kit-ledger--fixed {
  width: 100%;
  table-layout: fixed;
}
.kit-ledger__column {
  width: var(--kit-column-width, auto);
}

/* One member-table presentation for QCC and Rates & Enrollment. Consumers
 * retain their rows, validation, edits, sorting and save actions. */
.kit-member-roster {
  position: relative;
  min-width: 0;
}

html:root[data-product-theme='planlined-slate'] .kit-table.kit-member-roster-table {
  border: 1px solid var(--cmf-visual-rule-strong);
  border-collapse: separate;
  border-spacing: 0;
  background: var(--cmf-visual-surface);
}

html:root[data-product-theme='planlined-slate'] .kit-table.kit-member-roster-table thead th {
  box-sizing: border-box;
  height: 44px;
  background: var(--semantic-surface-inset, var(--pl-paper-inset));
  color: var(--cmf-visual-ink-secondary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

html:root[data-product-theme='planlined-slate']
  .kit-table.kit-member-roster-table
  thead
  th:has(> button) {
  padding: 0;
}

html:root[data-product-theme='planlined-slate'] .kit-member-roster-table tbody tr > :is(th, td) {
  box-sizing: border-box;
  height: 44px;
}

html:root[data-product-theme='planlined-slate'] .kit-member-roster-table thead button {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: var(--cmf-space-8);
  padding: var(--cmf-space-8) var(--cmf-space-12);
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

html:root[data-product-theme='planlined-slate'] .kit-table.kit-member-roster-table :is(th, td) {
  border-inline-end: 1px solid var(--cmf-visual-rule);
  border-bottom: 1px solid var(--cmf-visual-rule);
}

html:root[data-product-theme='planlined-slate']
  .kit-table.kit-member-roster-table
  tr
  > :last-child {
  border-inline-end: 0;
}

html:root[data-product-theme='planlined-slate']
  .kit-table.kit-member-roster-table
  :is(.cmf-form-input, .cmf-form-select) {
  font-size: var(--ts-13, 13px);
}

html:root[data-product-theme='planlined-slate'] .kit-member-roster-table tbody :is(input, select) {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--cmf-control-h-secondary);
  padding: var(--cmf-space-4) var(--cmf-space-8);
  border: 1px solid transparent;
  border-radius: var(--cmf-field-radius, 4px);
  background: transparent;
  color: inherit;
  font: inherit;
}

html:root[data-product-theme='planlined-slate']
  .kit-member-roster-table
  tbody
  :is(input, select):focus {
  border-color: var(--pl-focus);
  outline: 2px solid var(--semantic-focus-ring);
}

html:root[data-product-theme='planlined-slate']
  .kit-member-roster-table
  tbody
  :is(input, select)[aria-invalid='true'] {
  border-color: var(--semantic-state-warning-border);
}

.kit-member-roster-actions {
  white-space: nowrap;
  text-align: right;
}

html:root[data-product-theme='planlined-slate'] .kit-member-roster-actions button {
  min-width: var(--cmf-control-h-secondary);
  min-height: var(--cmf-control-h-secondary);
  padding: var(--cmf-space-4) var(--cmf-space-8);
  border: 0;
  background: transparent;
  color: var(--semantic-action-primary);
  cursor: pointer;
}

html:root[data-product-theme='planlined-slate'] .kit-member-roster-actions button:last-child {
  color: var(--cmf-visual-ink-secondary);
}

html:root[data-product-theme='planlined-slate']
  .kit-member-roster-table
  .kit-field--ledger
  .cmf-form-select:not(:hover, :focus, [aria-invalid='true']) {
  border-color: transparent;
  background-color: transparent;
  box-shadow: none;
}

html:root[data-product-theme='planlined-slate'] .kit-table.kit-member-roster-table tfoot td {
  border-top: 1px solid var(--cmf-visual-rule-strong);
  border-bottom: 0;
  background: var(--semantic-surface-subtle, var(--pl-paper-soft));
}

.kit-roster-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--cmf-space-16);
  padding-block: var(--cmf-space-8);
  font-size: var(--ts-12, 12px);
  font-variant-numeric: tabular-nums;
}

.kit-roster-summary strong {
  font-weight: 600;
}

.kit-field__label--hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.kit-field--ledger {
  margin: 0;
  min-width: 0;
}
.kit-field--ledger .cmf-form-input {
  min-width: 0;
  box-sizing: border-box;
}
html:root[data-product-theme='planlined-slate']
  .kit-field--ledger.kit-field--align-left
  .cmf-form-input {
  text-align: left;
}
html:root[data-product-theme='planlined-slate']
  .kit-field--ledger.kit-field--align-center
  .cmf-form-input {
  text-align: center;
}
@media (width <= 600px) {
  .kit-ledger__column {
    width: var(--kit-column-mobile-width, var(--kit-column-width, auto));
  }
}

/* Compact financial synopsis for narrow inspectors. Opt-in; ordinary stat
   grids retain their existing type, order and spacing. */
html:root[data-product-theme='planlined-slate'] .kit-stat-grid.kit-stat-grid--compact {
  padding: var(--pl-space-8) 0;
  background: var(--pl-paper-inset);
}
html:root[data-product-theme='planlined-slate']
  .kit-stat-grid.kit-stat-grid--compact
  > .cmf-kit-stat {
  padding: 0 var(--pl-space-8);
  gap: var(--pl-space-4);
  align-items: center;
  text-align: center;
}
html:root[data-product-theme='planlined-slate']
  .kit-stat-grid.kit-stat-grid--compact
  > .cmf-kit-stat
  > .cmf-kit-stat-value {
  order: 0;
  font: var(--pl-type-section-weight) var(--pl-type-section-size)/var(--pl-type-section-line)
    var(--font-ui);
  letter-spacing: normal;
  white-space: nowrap;
}
html:root[data-product-theme='planlined-slate']
  .kit-stat-grid.kit-stat-grid--compact
  > .cmf-kit-stat
  > .cmf-kit-stat-label {
  order: 1;
}

html:root[data-product-theme='planlined-slate']
  .cmf-kit-seg.cmf-kit-seg--outlined
  .cmf-kit-seg__btn.is-on {
  box-shadow: inset 0 0 0 1px var(--pl-command);
  color: var(--pl-command);
  background: var(--pl-command-tint);
}

/* Link actions hosted on an ink identity plate. */
html:root[data-product-theme='planlined-slate'] .cmf-btn.cmf-btn-link.cmf-btn-on-ink {
  color: var(--pl-on-ink) !important;
}
html:root[data-product-theme='planlined-slate'] .cmf-btn.cmf-btn-link.cmf-btn-on-ink:hover {
  background: var(--pl-rail-active);
}

html:root[data-product-theme='planlined-slate'] .cmf-kit-tabs-nav.cmf-kit-tabs-nav--compact {
  gap: 0;
}
html:root[data-product-theme='planlined-slate']
  .cmf-kit-tabs-nav.cmf-kit-tabs-nav--compact
  > .cmf-kit-tab {
  padding: var(--pl-space-8) var(--pl-space-4);
  font-size: var(--pl-type-meta-size);
}

html:root[data-product-theme='planlined-slate'] .cmf-form-select.cmf-form-select--compact {
  min-height: var(--pl-control-h-secondary);
  font: 500 var(--pl-type-meta-size)/var(--pl-type-meta-line) var(--font-ui);
}