/*
 * ProductService.Ui.Components — app compositions over the SoftSense design system.
 *
 * Every value resolves through a design-system token (stylelint enforces it), so each
 * block is a straight candidate for graduation into the design system. Blocks that
 * extend an existing design-system pattern reuse its class prefix (kpi-card__*);
 * everything else carries the ps- prefix.
 */

@layer components {

  /* ── Page scaffold ─────────────────────────────────────────────────────── */

  /* Layout runs FullBleed; the page owns its outer padding. */
  .ps-page {
    padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-2xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    min-height: 100%;
    min-width: 0;
  }

  /* Form pages end in a sticky save bar that bleeds to the viewport edges. */
  .ps-page--form {
    padding-bottom: var(--spacing-0);
  }

  /* Page header: subtitle reads as a mono meta line ("N orders · Sep 11 · all orgs"). */
  .ps-page-header .page-header-subtitle {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    letter-spacing: var(--font-letter-spacing-wide);
    color: var(--color-text-tertiary);
  }

  .ps-page-header .page-header-title h1 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
  }

  .ps-page-header--mono .page-header-title h1 {
    font-family: var(--font-family-mono);
  }

  .ps-page-header .page-header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
  }

  .ps-page-header__total {
    text-align: right;
    font-family: var(--font-family-mono);
  }

  .ps-page-header__total-value {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-line-height-tight);
  }

  .ps-lede {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    max-width: 64ch;
    line-height: var(--font-line-height-normal);
    margin: var(--spacing-0);
  }

  /* Back link above a detail / edit header. */
  .ps-back {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    letter-spacing: var(--font-letter-spacing-wide);
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    text-decoration: none;
  }

  .ps-back:hover {
    color: var(--color-text-primary);
  }

  /* ── Type helpers ──────────────────────────────────────────────────────── */

  .ps-meta {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    letter-spacing: var(--font-letter-spacing-wide);
    color: var(--color-text-tertiary);
  }

  .ps-meta--upper {
    text-transform: uppercase;
  }

  .ps-mono {
    font-family: var(--font-family-mono);
  }

  .ps-num {
    font-family: var(--font-family-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .ps-num--right {
    text-align: right;
    display: block;
  }

  .ps-dim {
    color: var(--color-text-tertiary);
  }

  .ps-delta {
    font-family: var(--font-family-mono);
    font-weight: var(--font-weight-medium);
  }

  .ps-delta--pos {
    color: var(--color-status-success-fg);
  }

  .ps-delta--neg {
    color: var(--color-status-error-fg);
  }

  .ps-delta--neutral {
    color: var(--color-text-tertiary);
  }

  .ps-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
  }

  /* ── KPI tiles (extends design-system .kpi-card) ───────────────────────── */

  .ps-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
    gap: var(--spacing-md);
  }

  .kpi-card--alarm {
    border-color: oklch(from var(--color-error) l c h / 0.45);
  }

  .kpi-card--alarm .eyebrow {
    color: var(--color-status-error-fg);
  }

  .kpi-card__value--mono {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-2xl);
  }

  .kpi-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-sm);
  }

  .kpi-card__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm) var(--spacing-md);
    margin-top: var(--spacing-md);
  }

  .kpi-card__mini-value {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-line-height-tight);
  }

  .kpi-card__bar {
    height: 3px;
    border-radius: var(--border-radius-full);
    background: var(--color-surface-sunken);
    margin-top: var(--spacing-sm);
    overflow: hidden;
  }

  .kpi-card__bar-fill {
    height: 100%;
    border-radius: var(--border-radius-full);
    background: var(--color-brand-primary);
  }

  .kpi-card__bar-fill--warning {
    background: var(--color-status-warning-dot);
  }

  .kpi-card__bar-fill--error {
    background: var(--color-status-error-dot);
  }

  /* Tiles that double as filters (invoice aging). */
  .kpi-card--button {
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    width: 100%;
  }

  .kpi-card--button:hover {
    border-color: var(--color-border-strong);
  }

  .kpi-card--selected {
    border-color: var(--color-text-primary);
  }

  /* ── Layout grids ──────────────────────────────────────────────────────── */

  .ps-split {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr);
    gap: var(--spacing-md);
    align-items: start;
  }

  .ps-split--hero {
    grid-template-columns: minmax(0, 1.8fr) minmax(240px, 1fr);
  }

  .ps-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr));
    gap: var(--spacing-md);
    align-items: start;
  }

  .ps-two-up {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: var(--spacing-md);
    align-items: start;
  }

  .ps-stack {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    min-width: 0;
  }

  .ps-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
    gap: var(--spacing-md);
  }

  @media (max-width: 1024px) {
    .ps-split,
    .ps-split--hero {
      grid-template-columns: 1fr;
    }
  }

  /* ── Cards ─────────────────────────────────────────────────────────────── */

  /* A card whose body is a table or a row list: body runs edge to edge. */
  .ps-card--flush > .card-body,
  .ps-card--flush .card-body {
    padding: var(--spacing-0);
  }

  .ps-card-meta {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    margin-inline-start: var(--spacing-sm);
    font-weight: var(--font-weight-normal);
  }

  /* Row list inside a flush card. */
  .ps-rows {
    display: flex;
    flex-direction: column;
  }

  .ps-row {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: var(--border-width-thin) solid var(--color-border-subtle);
    color: inherit;
    text-decoration: none;
  }

  .ps-row:last-child {
    border-bottom: none;
  }

  .ps-row--link {
    cursor: pointer;
    align-items: center;
  }

  .ps-row--link:hover {
    background: var(--color-surface-muted);
  }

  .ps-row--muted {
    background: var(--color-surface-muted);
  }

  .ps-row__dot {
    width: 6px;
    height: 6px;
    border-radius: var(--border-radius-full);
    margin-top: var(--spacing-xs);
    flex-shrink: 0;
    background: var(--color-status-neutral-dot);
  }

  .ps-row__dot--high {
    background: var(--color-status-error-dot);
  }

  .ps-row__dot--medium {
    background: var(--color-status-warning-dot);
  }

  .ps-row__dot--ok {
    background: var(--color-status-success-dot);
  }

  .ps-row__icon {
    display: flex;
    flex-shrink: 0;
    color: var(--color-text-tertiary);
  }

  .ps-row__body {
    flex: 1;
    min-width: 0;
  }

  .ps-row__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
  }

  .ps-row__detail {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    margin-top: var(--spacing-2xs);
  }

  .ps-row__desc {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    margin-top: var(--spacing-2xs);
  }

  .ps-row__chev {
    display: flex;
    color: var(--color-border-strong);
    margin-inline-start: auto;
    flex-shrink: 0;
  }

  .ps-row__actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-shrink: 0;
  }

  /* Card footer strip (totals, pagination, notes). */
  .ps-card-foot {
    padding: var(--spacing-sm) var(--spacing-md);
    border-top: var(--border-width-thin) solid var(--color-border);
    background: var(--color-surface-muted);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
  }

  .ps-card-foot--danger {
    background: var(--color-status-error-bg);
    color: var(--color-status-error-fg);
    border-top-color: var(--color-border-subtle);
  }

  .ps-card-foot__end {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
  }

  /* Centred in-card empty copy. */
  .ps-empty {
    padding: var(--spacing-xl) var(--spacing-md);
    text-align: center;
  }

  .ps-empty__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
  }

  .ps-empty__sub {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    margin-top: var(--spacing-2xs);
  }

  .ps-empty--ok {
    color: var(--color-status-success-fg);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
  }

  /* ── Bars and tracks ───────────────────────────────────────────────────── */

  .ps-track {
    height: 8px;
    border-radius: var(--border-radius-full);
    background: var(--color-surface-sunken);
    overflow: hidden;
    min-width: 0;
  }

  .ps-track--thin {
    height: 7px;
  }

  .ps-track__fill {
    height: 100%;
    border-radius: var(--border-radius-full);
    background: var(--color-brand-primary);
  }

  .ps-track__fill--accent {
    background: var(--color-error);
  }

  /* Revenue-by-line row: identity · track · money · delta. */
  .ps-line {
    display: grid;
    grid-template-columns: minmax(140px, 150px) minmax(0, 1fr) 84px 60px;
    gap: var(--spacing-md);
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-0);
    border-bottom: var(--border-width-thin) solid var(--color-border-subtle);
  }

  .ps-line:last-child {
    border-bottom: none;
  }

  /* Status pipeline strip: one segment per status, flex = count. */
  .ps-strip {
    display: flex;
    height: 10px;
    border-radius: var(--border-radius-full);
    overflow: hidden;
    background: var(--color-surface-sunken);
    gap: var(--border-width-thin);
  }

  .ps-strip__seg {
    min-width: 2px;
    border: 0;
    padding: var(--spacing-0);
    cursor: pointer;
    transition: opacity var(--transition-duration-fast);
  }

  .ps-strip__seg--dim {
    opacity: 0.3;
  }

  .ps-legend {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
  }

  .ps-legend__item {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
  }

  .ps-swatch {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: var(--border-radius-sm);
    flex-shrink: 0;
  }

  /* Status breakdown row: swatch · label · pct · count · money. */
  .ps-status-row {
    display: grid;
    grid-template-columns: 9px minmax(0, 1fr) 52px 40px 96px;
    gap: var(--spacing-sm);
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-0);
    font-size: var(--font-size-sm);
  }

  /* ── Tables ────────────────────────────────────────────────────────────── */

  .ps-cell-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
  }

  .ps-cell-sub {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-2xs);
    letter-spacing: var(--font-letter-spacing-wide);
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    margin-top: var(--spacing-2xs);
  }

  .ps-cell-sub--plain {
    text-transform: none;
    letter-spacing: var(--font-letter-spacing-normal);
  }

  .ps-row-actions {
    display: flex;
    gap: var(--spacing-xs);
    justify-content: flex-end;
    opacity: 0;
    transition: opacity var(--transition-duration-fast);
  }

  tr:hover .ps-row-actions,
  .ps-row-actions:focus-within {
    opacity: 1;
  }

  .ps-warn-text {
    color: var(--color-status-error-fg);
  }

  /* Tree cell (categories). */
  .ps-tree-cell {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 260px;
  }

  .ps-tree-toggle {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    padding: var(--spacing-0);
    color: var(--color-text-tertiary);
    cursor: pointer;
    flex-shrink: 0;
  }

  .ps-tree-icon {
    display: flex;
    color: var(--color-brand-primary);
    flex-shrink: 0;
  }

  .ps-tree-icon--inactive {
    color: var(--color-text-disabled);
  }

  .ps-tree-mini {
    display: flex;
    flex-direction: column;
    font-size: var(--font-size-sm);
  }

  .ps-tree-mini__row {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-2xs) var(--spacing-0);
    min-width: 0;
  }

  .ps-tree-mini__row--here {
    background: var(--color-status-info-bg);
    border-radius: var(--border-radius-sm);
    padding-inline: var(--spacing-xs);
    font-weight: var(--font-weight-medium);
  }

  .ps-tree-mini__row--inactive {
    color: var(--color-text-disabled);
  }

  .ps-tree-mini__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Pricing tier ladder: hairline grid on the border colour. */
  .ps-ladder {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--border-width-thin);
    background: var(--color-border);
    border: var(--border-width-thin) solid var(--color-border);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
  }

  .ps-ladder__cell {
    background: var(--color-surface);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
  }

  .ps-ladder__cell--head {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--font-letter-spacing-wider);
    text-transform: uppercase;
    color: var(--color-text-tertiary);
  }

  .ps-ladder__cell--active {
    background: var(--color-status-info-bg);
    color: var(--color-status-info-fg);
    font-weight: var(--font-weight-bold);
  }

  .ps-ladder-note {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
  }

  /* ── Toolbar ───────────────────────────────────────────────────────────── */

  .ps-toolbar {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
  }

  .ps-toolbar__search {
    flex: 0 1 320px;
    min-width: 200px;
  }

  .ps-toolbar__end {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
  }

  /* Bulk-selection bar. */
  .ps-bulk {
    background: var(--color-surface-inverse);
    color: var(--color-text-inverse);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    font-size: var(--font-size-sm);
  }

  /* ── Lifecycle steps (order detail) ────────────────────────────────────── */

  .ps-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
    gap: var(--spacing-sm);
  }

  .ps-step {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    min-width: 0;
  }

  .ps-step__marker {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
  }

  .ps-step__dot {
    width: 16px;
    height: 16px;
    border-radius: var(--border-radius-full);
    border: var(--border-width-medium) solid var(--color-border-strong);
    background: var(--color-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-text-on-primary);
  }

  .ps-step__line {
    flex: 1;
    height: 2px;
    background: var(--color-border);
  }

  .ps-step--done .ps-step__dot {
    background: var(--color-brand-primary);
    border-color: var(--color-brand-primary);
  }

  .ps-step--done .ps-step__line {
    background: var(--color-brand-primary);
  }

  .ps-step--blocked .ps-step__dot {
    border-color: var(--color-status-error-dot);
  }

  .ps-step--blocked .ps-step__line {
    background: var(--color-status-error-dot);
  }

  .ps-step__label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
  }

  .ps-step--pending .ps-step__label {
    color: var(--color-text-tertiary);
  }

  .ps-step__meta {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-2xs);
    color: var(--color-text-tertiary);
    line-height: var(--font-line-height-normal);
  }

  /* ── Forms ─────────────────────────────────────────────────────────────── */

  .ps-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: var(--spacing-md);
  }

  .ps-form-grid--wide {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  }

  .ps-field {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    min-width: 0;
  }

  .ps-field__label {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
  }

  .ps-field__required {
    font-size: var(--font-size-2xs);
    color: var(--color-status-error-fg);
  }

  .ps-field__hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-disabled);
  }

  .ps-field__error {
    font-size: var(--font-size-xs);
    color: var(--color-status-error-fg);
  }

  .ps-form-divider {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: var(--border-width-thin) solid var(--color-border-subtle);
  }

  .ps-callout {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    line-height: var(--font-line-height-normal);
  }

  .ps-callout--warning {
    background: var(--color-status-warning-bg);
    color: var(--color-status-warning-fg);
  }

  .ps-callout--error {
    background: var(--color-status-error-bg);
    color: var(--color-status-error-fg);
  }

  .ps-callout--info {
    background: var(--color-status-info-bg);
    color: var(--color-status-info-fg);
  }

  /* Validation checklist rows. */
  .ps-check {
    display: flex;
    gap: var(--spacing-sm);
    align-items: flex-start;
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: var(--border-width-thin) solid var(--color-border-subtle);
    font-size: var(--font-size-xs);
    line-height: var(--font-line-height-normal);
  }

  .ps-check:last-child {
    border-bottom: none;
  }

  .ps-check__icon {
    display: flex;
    flex-shrink: 0;
    color: var(--color-status-error-fg);
  }

  .ps-check--ok {
    color: var(--color-text-tertiary);
  }

  .ps-check--ok .ps-check__icon {
    color: var(--color-status-success-fg);
  }

  .ps-check--advisory .ps-check__icon {
    color: var(--color-status-warning-fg);
  }

  /* Sticky save bar: bleeds across the page padding. */
  .ps-save-bar {
    position: sticky;
    bottom: 0;
    margin-top: auto;
    margin-inline: calc(-1 * var(--spacing-xl));
    background: var(--color-surface);
    border-top: var(--border-width-thin) solid var(--color-border);
    padding: var(--spacing-sm) var(--spacing-xl);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    z-index: var(--z-sticky);
    box-shadow: var(--shadow-sm);
  }

  .ps-save-bar__state {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    letter-spacing: var(--font-letter-spacing-wide);
    text-transform: uppercase;
    color: var(--color-text-tertiary);
  }

  .ps-save-bar__state--dirty {
    color: var(--color-error);
  }

  .ps-save-bar__summary {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
  }

  .ps-save-bar__actions {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
  }

  /* ── Settings rows ─────────────────────────────────────────────────────── */

  .ps-set-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-lg);
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: var(--border-width-thin) solid var(--color-border-subtle);
    flex-wrap: wrap;
  }

  .ps-set-row:last-child {
    border-bottom: none;
  }

  .ps-set-row__main {
    flex: 1 1 260px;
    min-width: 0;
  }

  .ps-set-row__label {
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
  }

  .ps-set-row__help {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    margin-top: var(--spacing-2xs);
    line-height: var(--font-line-height-normal);
  }

  .ps-set-row__control {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
  }

  /* ── Plan candidate cards (subscriptions) ──────────────────────────────── */

  .ps-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    gap: var(--spacing-sm);
  }

  .ps-plan {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    background: var(--color-surface);
    border: var(--border-width-medium) solid var(--color-border);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
  }

  .ps-plan--selected {
    border-color: var(--color-brand-primary);
  }

  .ps-plan__price {
    margin-top: auto;
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-medium);
  }

  /* Three-panel body separated by hairlines (gap is the line). */
  .ps-panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: var(--border-width-thin);
    background: var(--color-border-subtle);
  }

  .ps-panel {
    background: var(--color-surface);
    padding: var(--spacing-md);
    min-width: 0;
  }

  .ps-panel__value {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-medium);
    margin-top: var(--spacing-xs);
  }

  /* ── Additions graduated from page work ────────────────────────────────── */

  /* Card head with icon · title · badges on one wrapping line. */
  .ps-card-title-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    min-width: 0;
  }

  .ps-card-title-row__icon {
    display: flex;
    color: var(--color-brand-primary);
    flex-shrink: 0;
  }

  .ps-panel--inactive {
    opacity: 0.72;
  }

  .ps-panel__lines {
    margin-top: var(--spacing-sm);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
  }

  .ps-tab-body {
    margin-top: var(--spacing-md);
  }

  .ps-dot-cell {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
  }

  .ps-row__dot--inline {
    margin-top: var(--spacing-0);
  }

  /* Rows whose trailing control is a button/pill: centre vertically. */
  .ps-row--centered {
    align-items: center;
  }

  .ps-row--centered .ps-row__dot {
    margin-top: var(--spacing-0);
  }

  .ps-row__head {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
  }

  .ps-row__body > .ps-track {
    margin-top: var(--spacing-xs);
  }

  .ps-row__body > .ps-row__detail {
    display: block;
  }

  .ps-cell-sub--block {
    display: block;
  }

  /* Hero display value + head (billing revenue hero). */
  .ps-hero-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
  }

  .ps-hero-value-row {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    flex-wrap: wrap;
  }

  .ps-hero-value {
    font-family: var(--font-family-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--font-letter-spacing-display-tight);
    line-height: var(--font-line-height-tight);
  }

  /* Breakdown block: name · money · share · delta, then a thin track. */
  .ps-breakdown {
    padding: var(--spacing-sm) var(--spacing-0);
    border-bottom: var(--border-width-thin) solid var(--color-border-subtle);
  }

  .ps-breakdown:last-child {
    border-bottom: none;
  }

  .ps-breakdown__head {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
  }

  .ps-breakdown__name {
    flex: 1;
    min-width: 0;
  }

  .ps-breakdown__share {
    min-width: 44px;
    text-align: right;
  }

  .ps-breakdown__delta {
    min-width: 56px;
    text-align: right;
  }

  /* Status pill acting as a toggle button. */
  .ps-pill-button {
    border: 0;
    background: transparent;
    padding: var(--spacing-0);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
  }

  /* Tree indent via a custom property set per row (--ps-depth). */
  .ps-tree-cell {
    padding-inline-start: calc(var(--ps-depth, 0) * var(--spacing-lg));
  }

  .ps-tree-mini__row {
    padding-inline-start: calc(var(--ps-depth, 0) * var(--spacing-md) + var(--spacing-xs));
  }

  a.ps-tree-mini__row {
    color: inherit;
    text-decoration: none;
  }

  .ps-tree-mini__end {
    margin-inline-start: auto;
  }

  .ps-tree-mini__here {
    color: var(--color-brand-primary);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--font-letter-spacing-wider);
    text-transform: uppercase;
  }

  /* Ancestor trail above a detail header. */
  .ps-trail {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
  }

  .ps-trail a {
    color: inherit;
    text-decoration: none;
  }

  .ps-trail a:hover {
    color: var(--color-text-primary);
  }

  .ps-trail__current {
    color: var(--color-text-primary);
  }

  /* Order cell: number + up/down buttons. */
  .ps-order-cell {
    display: flex;
    align-items: center;
    gap: var(--spacing-2xs);
  }

  .ps-order-cell__num {
    min-width: 2ch;
  }

  .ps-form-divider > .ps-callout {
    margin-top: var(--spacing-sm);
  }

  .ps-bulk .btn-ghost {
    color: var(--color-text-inverse);
  }

  .ps-bulk__end {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
  }

  .ps-step__dot svg {
    width: 10px;
    height: 10px;
  }

  .ps-step__meta > div {
    overflow-wrap: anywhere;
  }

  /* Totals block in a card footer (Subtotal / Tax / Total). */
  .ps-card-foot--totals {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-2xs);
  }

  .ps-totals__row {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-md);
  }

  .ps-totals__row--grand {
    margin-top: var(--spacing-xs);
    padding-top: var(--spacing-xs);
    border-top: var(--border-width-thin) solid var(--color-border);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
  }

  /* Always-visible inline action cell. */
  .ps-cell-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-xs);
  }

  .ps-pre {
    margin: var(--spacing-0);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
  }

  .ps-toolbar__select {
    flex: 0 0 180px;
  }

  /* Grid-view product card: price block + line-clamped description. */
  .ps-price {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-medium);
    font-variant-numeric: tabular-nums;
  }

  .ps-price-row {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-xs);
  }

  .ps-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Card header action cluster holding a label + small input (preview qty). */
  .ps-header-control {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
  }

  .ps-header-control__input {
    width: 120px;
  }

  .ps-row--danger .ps-row__icon,
  .ps-row--danger .ps-row__title {
    color: var(--color-status-error-fg);
  }

  /* Flush-card intro block above a divided info panel. */
  .ps-card-intro {
    padding: var(--spacing-md);
    border-bottom: var(--border-width-thin) solid var(--color-border-subtle);
  }

  .ps-card-intro__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
  }

  .ps-card-inset {
    padding: var(--spacing-0) var(--spacing-md);
  }

  .ps-badges {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
  }

  .ps-input--num {
    text-align: right;
    font-family: var(--font-family-mono);
  }

  .ps-scroll-x {
    overflow-x: auto;
    min-width: 0;
  }

  /* Title + pill on one wrapping row (table cells, card titles). */
  .ps-cell-title--row {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
  }

  /* Plan matrix: divider before each plan's column group. */
  .ps-matrix__group {
    border-inline-start: var(--border-width-thin) solid var(--color-border);
  }

  /* ── Signed-out landing ────────────────────────────────────────────────────
     The one page with no app chrome: the workspace shell only exists behind
     auth. It is a dark brand surface in every theme, so it reads from the nav
     tokens (the same ones that keep the sidebar navy) rather than the page
     surface tokens.

     --ps-landing-accent is the one gap: the brand cyan exists in the theme only
     as a chart colour. Aliased once here so it repoints in a single place if the
     design system grows a named accent for it. */
  .ps-landing {
    --ps-landing-accent: var(--color-chart-categorical-3);
    --ps-landing-ink-muted: color-mix(in oklch, var(--color-text-inverse) 66%, transparent);
    --ps-landing-ink-faint: color-mix(in oklch, var(--color-text-inverse) 45%, transparent);
    --ps-landing-veil: color-mix(in oklch, var(--color-text-inverse) 4%, transparent);
    --ps-landing-gutter: clamp(var(--spacing-md), 5vw, var(--spacing-4xl));

    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow: hidden;
    background: var(--color-surface-inverse);
    color: var(--color-text-inverse);
  }

  /* Brand wash behind the hero, warmest at the top right. */
  .ps-landing__glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
      120% 90% at 82% -10%,
      color-mix(in oklch, var(--color-brand-primary) 28%, transparent),
      transparent 60%);
  }

  .ps-landing__bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    padding: var(--spacing-md) var(--ps-landing-gutter);
    border-block-end: var(--border-width-thin) solid var(--color-nav-border);
  }

  .ps-landing__brand {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 0;
  }

  .ps-landing__brand-name {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--font-letter-spacing-tight);
  }

  /* Mono eyebrow, the prototype's recurring label treatment. */
  .ps-landing__eyebrow {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--font-letter-spacing-wide);
    color: var(--ps-landing-ink-faint);
  }

  .ps-landing__eyebrow--accent {
    color: var(--ps-landing-accent);
    display: block;
    margin-block-end: var(--spacing-md);
  }

  .ps-landing__main {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    padding: clamp(var(--spacing-2xl), 9vh, var(--spacing-4xl)) var(--ps-landing-gutter);
  }

  /* Two columns while both fit, one below that — no breakpoint to maintain. */
  .ps-landing__grid {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: clamp(var(--spacing-xl), 6vw, var(--spacing-4xl));
    align-items: center;
  }

  .ps-landing__col {
    min-width: 0;
  }

  .ps-landing__title {
    margin: 0;
    font-size: clamp(var(--font-size-3xl), 5.4vw, var(--font-size-display-md));
    font-weight: var(--font-weight-normal);
    line-height: var(--font-line-height-tight);
    letter-spacing: var(--font-letter-spacing-display-tight);
    text-wrap: pretty;
  }

  .ps-landing__lede {
    margin: var(--spacing-md) 0 0;
    max-width: 44ch;
    font-size: var(--font-size-lg);
    line-height: var(--font-line-height-relaxed);
    color: var(--ps-landing-ink-muted);
    text-wrap: pretty;
  }

  .ps-landing__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-block-start: var(--spacing-xl);
  }

  .ps-landing__note {
    margin: var(--spacing-md) 0 0;
    max-width: 48ch;
    font-size: var(--font-size-sm);
    line-height: var(--font-line-height-normal);
    color: var(--ps-landing-ink-faint);
  }

  /* What the service covers — one row per top-level area of the app. */
  .ps-landing__panel {
    min-width: 0;
    display: flex;
    flex-direction: column;
    border: var(--border-width-thin) solid var(--color-nav-border);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    background: var(--ps-landing-veil);
  }

  .ps-landing__row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border-block-end: var(--border-width-thin) solid var(--color-nav-border);
  }

  .ps-landing__row:last-child {
    border-block-end: 0;
  }

  .ps-landing__row-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: var(--border-radius-md);
    background: color-mix(in oklch, var(--color-brand-primary) 16%, transparent);
    color: var(--ps-landing-accent);
  }

  .ps-landing__row-name {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
  }

  .ps-landing__row-sub {
    font-size: var(--font-size-sm);
    line-height: var(--font-line-height-normal);
    color: color-mix(in oklch, var(--color-text-inverse) 55%, transparent);
  }

  /* Error text inside an info field: wraps rather than forcing the panel wide. */
  .ps-pre-inline {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    line-height: var(--font-line-height-normal);
    color: var(--color-status-error-fg);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    text-align: left;
  }

  /* ── Delivery log ──────────────────────────────────────────────────────────
     One table, full width of the detail grid. The columns that carry short
     fixed-shape values are pinned narrow and never wrap, so the reason column
     takes the slack instead of every timestamp breaking across three lines. */
  .ps-delivery__head {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-inline-start: auto;
  }

  .ps-delivery__empty {
    padding: var(--spacing-md);
  }

  .ps-delivery {
    width: 100%;
    table-layout: auto;
  }

  .ps-delivery__when {
    white-space: nowrap;
    width: 1%;
    font-size: var(--font-size-xs);
  }

  .ps-delivery__num {
    white-space: nowrap;
    width: 1%;
    text-align: right;
    font-size: var(--font-size-xs);
  }

  .ps-delivery__outcome {
    white-space: nowrap;
    width: 1%;
  }

  /* The only column that should wrap — it holds upstream error text. */
  .ps-delivery__reason {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    line-height: var(--font-line-height-normal);
    color: var(--color-text-secondary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    min-width: 24ch;
  }

  /* Table sits flush to the card edge rather than inside body padding. */
  .ps-card-body--flush {
    padding: var(--spacing-0);
  }
}