/* SlicedPlane organism -- a 3rd-dimension slider over a pluggable plane (TLP-211).
   Matrix-plane chrome only. The slider is the SegmentedControl molecule (own CSS);
   empty/data states use the EmptyState molecule. Consumer-specific cell styling
   (e.g. an n/a diagonal) is passed in as a cell className and lives with the
   consumer, not here. All values from design tokens. */

.sliced-plane {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.sliced-plane__slider {
    display: flex;
}

/* Matrix plane: dense, scrollable table. Rows are the plane's first axis, the
   slider picks the slice each cell shows; a trailing column holds the per-row
   edit affordance. */

.sliced-plane-matrix-wrap {
    overflow-x: auto;
}

.sliced-plane-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.sliced-plane-matrix th,
.sliced-plane-matrix td {
    padding: var(--space-1) var(--space-2); /* tight vertical for a dense matrix */
    border-bottom: 1px solid var(--border-subtle);
    text-align: left;
}

.sliced-plane-matrix th {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Numeric cells + column headers: right-aligned, tabular, never wrap. */
.sliced-plane-matrix__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Clickable cell (per-cell edit, TLP-042). Consumers opt in via cell.action;
   the organism never adds this in read-only. */
.sliced-plane-matrix__num--action {
    cursor: pointer;
}

.sliced-plane-matrix__num--action:hover {
    background: var(--bg-surface-hover);
}

.sliced-plane-matrix__num--action:focus-visible {
    outline: 2px solid var(--color-accent, var(--border-strong));
    outline-offset: -2px;
}

/* Row header (corner + per-row label cell). */
.sliced-plane-matrix__rowhead {
    white-space: nowrap;
}

.sliced-plane-matrix__rowcell {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.sliced-plane-matrix__label {
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.sliced-plane-matrix__action {
    text-align: right;
}

/* List plane: a nested tree (groups -> items); the slider picks the slice each
   item cell shows. Rows are flex (label | cells | action). Tokens only. */

.sliced-plane-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.sliced-plane-list__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.sliced-plane-list__grouphead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding-bottom: var(--space-1);
    border-bottom: 1px solid var(--border-subtle);
}

.sliced-plane-list__grouplabel {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.sliced-plane-list__groupactions {
    display: inline-flex;
    gap: var(--space-1);
}

.sliced-plane-list__items {
    display: flex;
    flex-direction: column;
}

.sliced-plane-list__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    border-bottom: 1px solid var(--border-subtle);
}

.sliced-plane-list__label {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.sliced-plane-list__cells {
    display: inline-flex;
    gap: var(--space-3);
    flex: 0 0 auto;
}

.sliced-plane-list__num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--text-secondary);
}

.sliced-plane-list__num--action {
    cursor: pointer;
}

.sliced-plane-list__num--action:hover {
    background: var(--bg-surface-hover);
}

.sliced-plane-list__num--action:focus-visible {
    outline: 2px solid var(--color-accent, var(--border-strong));
    outline-offset: -2px;
}

.sliced-plane-list__action {
    flex: 0 0 auto;
    text-align: right;
}

.sliced-plane-list__empty {
    font-size: var(--text-sm);
    color: var(--text-muted);
    padding: var(--space-2) 0;
}