/* Transactions workpaper: filters, totals bar, ledger table, pager, and the right-side record inspector. Tokens only. */

/* ---- built-in views */
.viewbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-4); }
.viewbar__item {
  padding: 0.3rem 0.9rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill);
  background: var(--color-surface); color: var(--color-text-secondary); font-size: var(--text-sm); font-weight: 500; text-decoration: none;
}
.viewbar__item:hover { background: var(--color-surface-sunken); color: var(--color-text); text-decoration: none; }
.viewbar__item[aria-current="page"] { background: var(--color-accent-soft); border-color: var(--color-accent); color: var(--color-accent); font-weight: 650; }
.viewbar__hint { margin-left: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }

/* ---- filters */
.filters { display: grid; gap: var(--space-2); margin-top: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.filters__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.field { display: grid; gap: 2px; font-size: var(--text-xs); color: var(--color-text-muted); min-width: 9rem; }
.field--grow { flex: 1 1 16rem; }
.field input, .field select {
  padding: 0.4rem 0.55rem;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: var(--text-sm);
}
.field input::placeholder { color: var(--color-text-muted); }
.filters__actions { display: flex; gap: var(--space-2); }
.filters__more summary { cursor: pointer; font-size: var(--text-xs); color: var(--color-text-secondary); width: max-content; }
.filters__more[open] summary { margin-bottom: var(--space-2); }

/* ---- totals bar */
.totals {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-5);
  margin-top: var(--space-3); padding: var(--space-2) var(--space-4);
  background: var(--color-surface-sunken); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  font-size: var(--text-sm); color: var(--color-text-secondary);
}
.totals .num { display: inline; text-align: left; color: var(--color-text); }
.totals__count { margin-right: auto; }
.totals__label { color: var(--color-text-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; }

/* ---- ledger table */
.table-wrap { margin-top: var(--space-3); overflow-x: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.ledger { font-size: var(--table-text); }
.ledger tbody tr { transition: background 0.1s; }
.ledger tbody tr:hover { background: var(--color-surface-sunken); cursor: pointer; }
.ledger tbody tr.is-selected { background: var(--color-accent-soft); box-shadow: inset 3px 0 0 var(--color-accent); }
.sort { color: inherit; text-decoration: none; }
.sort:hover { color: var(--color-text); text-decoration: none; }
.sort__mark { margin-left: 0.3em; font-size: 0.65em; }
.row-link { font-weight: 600; }
.tag { display: inline-block; padding: 0 0.4rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); font-size: 0.6875rem; color: var(--color-text-secondary); white-space: nowrap; }
.tag--warn { border-color: var(--color-warning); color: var(--color-warning); }

.pager { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-4); font-size: var(--text-sm); }
.pager .button[aria-disabled="true"] { opacity: 0.5; cursor: default; }

/* ---- record inspector: a drawer that leaves the table visible and usable behind it */
.inspector {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 40;
  width: min(36rem, 100vw);
  display: flex; flex-direction: column;
  background: var(--color-surface-raised);
  border-left: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-overlay);
  animation: inspector-in 0.16s ease-out;
}
.inspector[hidden] { display: none; }
#inspector-body { display: flex; flex-direction: column; min-height: 0; flex: 1; }
#inspector-body .inspector__scroll { flex: 1; overflow-y: auto; }
@keyframes inspector-in { from { transform: translateX(1.5rem); } to { transform: none; } }

.inspector__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-4) var(--space-3); border-bottom: 1px solid var(--color-border); }
.inspector__kicker { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.inspector__title { font-size: var(--text-lg); outline: none; }


.kv--tight { gap: 2px var(--space-3); font-size: var(--text-xs); }
.kv dd.wrap { overflow-wrap: anywhere; }
.num-inline { font-variant-numeric: tabular-nums lining-nums; }
.evidence { padding: var(--space-3); margin-bottom: var(--space-2); background: var(--color-surface-sunken); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.evidence__title { font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-2); }
.evidence__id { margin-top: var(--space-2); font-family: var(--font-mono); font-size: 0.6875rem; color: var(--color-text-muted); overflow-wrap: anywhere; }
.unavailable { font-size: var(--text-xs); color: var(--color-text-muted); font-style: italic; margin-top: var(--space-1); }
.timeline--compact .timeline__item { grid-template-columns: 8rem 1fr; padding-inline: 0; }

.ledger tbody tr:focus-within { outline: 2px solid var(--color-focus); outline-offset: -2px; }

/* ---- room: the table yields low-priority columns as its own width shrinks (including when the inspector takes the right side) */
.workpaper { container-type: inline-size; container-name: workpaper; }
@container workpaper (max-width: 68rem) { .tier-1 { display: none; } }
@container workpaper (max-width: 44rem) {
  .ledger td, .ledger th { padding-inline: 0.45rem; }
  .ledger .badge { padding-inline: 0.45rem; }
}
@container workpaper (max-width: 56rem) { .tier-2 { display: none; } }

/* On wide screens the open inspector takes its own column, so the table is beside it rather than underneath it. */
@media (min-width: 1200px) {
  .app:has(#inspector:not([hidden])) .app__main { margin-right: min(36rem, 100vw); }
  .app:has(#inspector:not([hidden])) .topbar { padding-right: var(--space-4); }
}
@media (max-width: 760px) {
  .totals { gap: var(--space-1) var(--space-3); }
  .inspector { width: 100vw; border-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .inspector, .app__main { animation: none; transition: none; } }

/* ---- inspector cards: one restrained visual language for every section */
.hero { padding: var(--space-4); border-bottom: 1px solid var(--color-border); }
.hero__label { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.hero__value { font-size: var(--text-display); font-weight: 650; line-height: 1.15; text-align: left; }
.hero__text { margin-top: var(--space-1); color: var(--color-text-secondary); font-size: var(--text-sm); }
.inspector__id { display: grid; gap: var(--space-1); justify-items: start; }
.inspector__scroll { display: flex; flex-direction: column; gap: var(--space-3); padding-bottom: var(--space-6); }
.inspector__scroll > .hero { margin-bottom: calc(-1 * var(--space-1)); }

.icard { margin: 0 var(--space-4); padding: var(--space-3) var(--space-4); background: var(--color-surface-sunken); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.icard__title { font-size: var(--text-xs); font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: var(--space-2); }
.icard__sub { font-size: var(--text-xs); margin: var(--space-3) 0 var(--space-1); color: var(--color-text-secondary); }
/* a quiet card is the same card (same fill, border, radius, padding and heading); only its content is quieter */
.icard--quiet .quiet-row, .icard--quiet .quiet-text { color: var(--color-text-muted); }
.quiet-row { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); padding: 2px 0; }
.quiet-text { font-size: var(--text-sm); color: var(--color-text-muted); }
.evidence--attention { background: var(--color-surface); border-color: var(--color-border-strong); }

.icard--disclosure { padding: 0; }
.icard--disclosure summary { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-4); cursor: pointer; list-style: none; }
.icard--disclosure summary::-webkit-details-marker { display: none; }
.icard--disclosure summary .icard__title { margin: 0; grid-column: 1; }
.icard__toggle { grid-column: 2; font-size: var(--text-xs); color: var(--color-accent); white-space: nowrap; }
.icard__toggle .when-open { display: none; }
.icard--disclosure[open] .when-open { display: inline; }
.icard--disclosure[open] .when-closed { display: none; }
.digest { grid-column: 1 / -1; display: grid; gap: 2px; font-size: var(--text-sm); color: var(--color-text-secondary); }
.digest__label { color: var(--color-text-secondary); }
.digest__value { color: var(--color-text); font-weight: 500; }
.digest__line--missing { color: var(--color-text-muted); font-style: italic; }
.icard--disclosure[open] .digest { display: none; }
.icard__detail { padding: 0 var(--space-4) var(--space-3); border-top: 1px solid var(--color-border); padding-top: var(--space-3); }

/* ---- ledger sizing
   One line is one row, always. Fixed layout: the compact accounting columns (invoice, date, SKU, sales, commissionable, rate, commission, status) have
   default widths (`.col-<key>`); the descriptive ones (customer, item, rule / rate source, exclusion reason) have none and share what is left. Nothing in a
   row wraps. Descriptive text that does not fit is cut with an ellipsis (its full text is in the cell title and the inspector); identifiers, dates,
   rates, amounts and the status badge are never cut: their columns are wide enough by default and cannot be dragged below a minimum. If the window is
   genuinely too narrow, low-priority columns drop out first (container query) and the table then scrolls sideways rather than wrapping anything.
   Users can drag column edges (static/js/resizable-table.js); nothing is remembered, and saved views will later carry widths. */
.ledger { table-layout: fixed; width: 100%; min-width: 40rem; }
.ledger th, .ledger td { padding: 0.4rem 0.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ledger td.num, .ledger td.cell-id, .ledger td.cell-date, .ledger td.cell-status { overflow: visible; text-overflow: clip; }
.ledger th { position: relative; overflow: visible; background: var(--color-surface); }
.ledger th .sort { display: block; overflow: hidden; text-overflow: ellipsis; font-size: 0.6875rem; letter-spacing: 0.03em; }   /* headers are set a touch smaller so the full label shows at normal widths */
.cell-sub { color: var(--color-text-muted); font-size: var(--text-xs); }
.ledger .cell-status .tag { margin-left: 0.3rem; }
.tag--dot { min-width: 1.15rem; padding-inline: 0.3rem; text-align: center; font-weight: 700; }

/* default widths for the compact columns; the descriptive ones are left without one so they flex.
   Sized for real data: a twelve-character document number, a MM-DD-YYYY date, a long Sky Castle SKU, seven-figure amounts, and the full
   COMMISSIONABLE header (with its sort arrow). */
.col-invoice { width: 7rem; }
.col-date { width: 5.75rem; }
.col-sku { width: 7.5rem; }
.col-sales { width: 6.5rem; }
.col-commissionable { width: 9rem; }
.col-rate { width: 3.75rem; }
.col-commission { width: 7.25rem; }
.col-status { width: 8.25rem; }

/* drag handle on a column's right edge (added by resizable-table.js) */
.col-resizer { position: absolute; top: 0; right: 0; width: 9px; height: 100%; cursor: col-resize; touch-action: none; z-index: 2; }      /* inside its header, so no layout gets a stray scrollbar */
.col-resizer::after { content: ""; position: absolute; right: 3px; top: 22%; height: 56%; width: 1px; background: var(--color-border-strong); }
.col-resizer:hover::after, .col-resizer:focus-visible::after, .col-resizer.is-dragging::after { width: 2px; right: 3px; background: var(--color-accent); }
.ledger th:last-child .col-resizer { right: 0; }      /* the last handle stays inside the table so it never adds a scrollbar */
.col-resizer:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
body.is-col-resizing { cursor: col-resize; user-select: none; }


/* ---- exceptions workbench */
.viewbar__count { margin-left: 0.35rem; padding: 0 0.4rem; border-radius: var(--radius-pill); background: var(--color-surface-sunken); font-size: 0.6875rem; font-weight: 700; }
.viewbar__item[aria-current="page"] .viewbar__count { background: var(--color-surface); }
.state--compact { margin-block: var(--space-4); }
.stat__link { color: inherit; text-decoration: none; }
.stat__link:hover { color: var(--color-accent); text-decoration: underline; }

/* default widths for the compact exception columns; exception, customer, SKU / item and resolution flex */
.col-x-status { width: 6.5rem; }
.col-x-blocking { width: 7rem; }
.col-x-invoice { width: 7rem; }
.col-x-amount { width: 6.5rem; }
.col-x-detected { width: 8.25rem; }
.exceptions td.cell-text .row-link { color: inherit; font-weight: 600; }
.exceptions td.cell-text .row-link:hover { color: var(--color-accent); }
.exceptions td.cell-id { overflow: visible; text-overflow: clip; }
.ledger.exceptions { min-width: 34rem; }

/* inspector pieces used by the exception drawer */
.inspector__code { font-size: var(--text-xs); color: var(--color-text-muted); }
.inspector__badges { display: flex; gap: var(--space-2); margin-top: var(--space-1); }
.icard__text { font-size: var(--text-sm); color: var(--color-text); margin-bottom: var(--space-2); }
.icard__text--muted { color: var(--color-text-muted); font-size: var(--text-xs); }
.notice { margin: 0 var(--space-4); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border-strong); border-left-width: 4px; border-radius: var(--radius-md); font-size: var(--text-sm); }
.notice--success { background: var(--color-success-soft); border-left-color: var(--color-success); color: var(--color-text); }
.notice--error { margin: 0 0 var(--space-3); background: var(--color-danger-soft); border-left-color: var(--color-danger); color: var(--color-text); }
.resolve { display: grid; gap: var(--space-3); }
.resolve .field { min-width: 0; }
.resolve .field em { font-style: normal; color: var(--color-text-muted); margin-left: 0.3em; }
.resolve textarea { padding: 0.4rem 0.55rem; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); font: inherit; font-size: var(--text-sm); resize: vertical; }
.action-help { margin: 0; display: grid; gap: var(--space-1); font-size: var(--text-xs); color: var(--color-text-muted); }
.action-help dt { font-weight: 650; color: var(--color-text-secondary); margin-top: var(--space-1); }
.action-help dd { margin: 0; }
.mini { font-size: var(--text-xs); }
.mini th { text-align: left; font-weight: 600; color: var(--color-text-muted); padding: 0.25rem 0.4rem 0.25rem 0; border-bottom: 1px solid var(--color-border); white-space: nowrap; }
.mini td { padding: 0.25rem 0.4rem 0.25rem 0; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.mini .num { text-align: right; padding-right: 0; }
.table-wrap--plain { border: 0; background: transparent; margin-top: var(--space-2); }
.inspector .history { margin: 0 var(--space-4); background: var(--color-surface-sunken); border-radius: var(--radius-md); box-shadow: none; --history-slot: 3.75rem; }
.inspector .history .panel__title { font-size: var(--text-xs); letter-spacing: 0.06em; }
.inspector .history[open] .timeline__item { padding-inline: var(--space-4); }

/* contextual remediation inside the exception drawer */
.notice--warning { background: var(--color-warning-soft); border-left-color: var(--color-warning); color: var(--color-text); }
.remediation { display: grid; gap: var(--space-3); min-width: 0; }
.remediation .notice { margin: 0; }
.remediation .mini { width: 100%; table-layout: fixed; }
.remediation .mini th, .remediation .mini td { overflow-wrap: anywhere; }
.callout { padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border-strong); border-left: 4px solid var(--color-info, var(--color-border-strong)); border-radius: var(--radius-md); background: var(--color-surface-sunken); font-size: var(--text-sm); }
.callout--warning { border-left-color: var(--color-warning); background: var(--color-warning-soft); }
.callout--scope { border-left-color: var(--color-warning); background: var(--color-warning-soft); }
.check { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-xs); color: var(--color-text-secondary); }
.check input { margin-top: 0.15rem; }
.field__hint { margin: calc(-1 * var(--space-2)) 0 0; }
.plain-list { margin: var(--space-1) 0 0; padding-left: 1.1rem; }
.preview { display: grid; gap: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--color-border); }
.preview .kv dd > div { overflow-wrap: anywhere; }
.icard__more { margin-top: var(--space-3); border-top: 1px solid var(--color-border); padding-top: var(--space-2); }
.icard__more > summary { cursor: pointer; font-size: var(--text-xs); color: var(--color-text-secondary); margin-bottom: var(--space-2); }
.remediation-slot { min-height: 2rem; }

/* reports archive */
.col-r-version { width: 5.5rem; }
.col-r-status { width: 7.25rem; }
.col-r-generated { width: 9.75rem; }
.col-r-run { width: 9rem; }
.col-r-rules { width: 4.5rem; }
.col-r-integrity { width: 7rem; }
.col-r-format { width: 6.75rem; }
.col-r-action { width: 10.5rem; }
.ledger.reports { min-width: 24rem; }
.ledger.reports tbody tr { height: 2.5rem; }
.ledger td.cell-action { overflow: visible; text-overflow: clip; text-align: right; }
.button--compact { padding: 0.15rem 0.6rem; font-size: var(--text-xs); }
.button-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.archive-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-4); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-left-width: 4px; border-radius: var(--radius-md); background: var(--color-surface); font-size: var(--text-sm); }
.archive-status--success { border-left-color: var(--color-success); }
.archive-status--danger { border-left-color: var(--color-danger); }
.archive-status--neutral { border-left-color: var(--color-border-strong); }
.archive-status__text { color: var(--color-text); }
.archive-status__text.muted { color: var(--color-text-muted); font-size: var(--text-xs); }
.archive-problem { margin: var(--space-2) 0 0; }
@container workpaper (max-width: 44rem) { .tier-n { display: none; } .col-r-action { width: 5.5rem; } }   /* the archive check yields only beside an open drawer; the page banner still reports a failed check */

/* report preview page */
.preview-page { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.preview-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); }
.preview-bar__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
.preview-bar__name { font-size: var(--text-base, 1rem); margin: 0; }
.preview-note { color: var(--color-text-muted); font-size: var(--text-xs); margin: 0; }
.preview-frame { width: 100%; height: 70vh; min-height: 28rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface-sunken); }

/* worksheet preview (archived Excel reports) */
.sheet-tabs { display: flex; flex-wrap: wrap; gap: var(--space-1); border-bottom: 1px solid var(--color-border); margin-top: var(--space-1); }
.sheet-tab { padding: 0.3rem 0.7rem; border: 1px solid var(--color-border); border-bottom: 0; border-radius: var(--radius-md) var(--radius-md) 0 0; font-size: var(--text-xs); color: var(--color-text-secondary); background: var(--color-surface-sunken); text-decoration: none; white-space: nowrap; }
.sheet-tab[aria-current="page"] { background: var(--sheet-paper); color: var(--sheet-ink); font-weight: 650; border-color: var(--color-border-strong); }
.pv-scroll { overflow: auto; max-height: 68vh; background: var(--sheet-paper); color: var(--sheet-ink); border: 1px solid var(--color-border-strong); border-radius: 0 var(--radius-md) var(--radius-md) var(--radius-md); }
.pv-scroll:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.pv { border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 0.8125rem; color: var(--sheet-ink); }
.pv td { padding: 0.15rem 0.45rem; height: 1.45rem; white-space: nowrap; overflow: hidden; text-overflow: clip; border-right: 1px solid var(--sheet-grid); border-bottom: 1px solid var(--sheet-grid); background: var(--sheet-paper); vertical-align: middle; font-variant-numeric: tabular-nums lining-nums; }
.pv td.pv-right { text-align: right; }
.pv td.pv-center { text-align: center; }
.pv td.pv-left { text-align: left; }
.pv td.pv-wrap { white-space: pre-line; line-height: 1.2; }
.pv td.pv-bold { font-weight: 700; }
.pv td.pv-italic { font-style: italic; }
.pv td.pv-size-9 { font-size: 0.6875rem; }
.pv td.pv-size-12 { font-size: 0.9375rem; }
.pv td.pv-size-14 { font-size: 1.0625rem; }
.pv td.pv-ink-white { color: var(--sheet-white); }
.pv td.pv-fill-navy { background: var(--sheet-navy); }
.pv td.pv-fill-grey { background: var(--sheet-grey); }
.pv td.pv-fill-gold { background: var(--sheet-gold); }
.pv td.pv-fill-green { background: var(--sheet-green); }
.pv td.pv-fill-salmon { background: var(--sheet-salmon); }
.pv td.pv-red { color: var(--sheet-red); }
.pv td.pv-pass { background: var(--sheet-green); color: var(--sheet-pass-ink); font-weight: 700; }
.pv td.pv-fail { background: var(--sheet-salmon); color: var(--sheet-fail-ink); font-weight: 700; }
.pv td.pv-na { color: var(--sheet-fail-ink); background: var(--sheet-salmon); font-style: italic; }
.pv td.pv-frozen { position: sticky; top: 0; z-index: 2; box-shadow: 0 1px 0 var(--sheet-grid); }
.pv td.pv-frozen-col { position: sticky; left: 0; z-index: 1; }
.pv td.pv-frozen.pv-frozen-col { z-index: 3; }
.preview-warning { margin: var(--space-2) 0; }
.preview-technical { margin-top: var(--space-1); font-size: var(--text-xs); }
.preview-technical summary { cursor: pointer; }

.pv-w-4 { width: 42px; }
.pv-w-5 { width: 49px; }
.pv-w-6 { width: 56px; }
.pv-w-7 { width: 63px; }
.pv-w-8 { width: 70px; }
.pv-w-9 { width: 77px; }
.pv-w-10 { width: 84px; }
.pv-w-11 { width: 91px; }
.pv-w-12 { width: 98px; }
.pv-w-13 { width: 105px; }
.pv-w-14 { width: 112px; }
.pv-w-15 { width: 119px; }
.pv-w-16 { width: 126px; }
.pv-w-17 { width: 133px; }
.pv-w-18 { width: 140px; }
.pv-w-19 { width: 147px; }
.pv-w-20 { width: 154px; }
.pv-w-21 { width: 161px; }
.pv-w-22 { width: 168px; }
.pv-w-23 { width: 175px; }
.pv-w-24 { width: 182px; }
.pv-w-25 { width: 189px; }
.pv-w-26 { width: 196px; }
.pv-w-27 { width: 203px; }
.pv-w-28 { width: 210px; }
.pv-w-29 { width: 217px; }
.pv-w-30 { width: 224px; }
.pv-w-31 { width: 231px; }
.pv-w-32 { width: 238px; }
.pv-w-33 { width: 245px; }
.pv-w-34 { width: 252px; }
.pv-w-35 { width: 259px; }
.pv-w-36 { width: 266px; }
.pv-w-37 { width: 273px; }
.pv-w-38 { width: 280px; }
.pv-w-39 { width: 287px; }
.pv-w-40 { width: 294px; }
.pv-w-41 { width: 301px; }
.pv-w-42 { width: 308px; }
.pv-w-43 { width: 315px; }
.pv-w-44 { width: 322px; }
.pv-w-45 { width: 329px; }
.pv-w-46 { width: 336px; }
.pv-w-47 { width: 343px; }
.pv-w-48 { width: 350px; }
.pv-w-49 { width: 357px; }
.pv-w-50 { width: 364px; }
.pv-w-51 { width: 371px; }
.pv-w-52 { width: 378px; }
.pv-w-53 { width: 385px; }
.pv-w-54 { width: 392px; }
.pv-w-55 { width: 399px; }
.pv-w-56 { width: 406px; }
.pv-w-57 { width: 413px; }
.pv-w-58 { width: 420px; }
.pv-w-59 { width: 427px; }
.pv-w-60 { width: 434px; }

/* commission rules workspace */
.rules-context { margin-top: var(--space-4); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-left: 4px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); font-size: var(--text-sm); display: grid; gap: var(--space-1); }
.rules-context__line { margin: 0; }
.rules-context__line--note { color: var(--color-text-muted); font-size: var(--text-xs); }
.rules-saved { margin: var(--space-3) 0 0; }
.viewbar--status { margin-top: var(--space-2); }
.rules-actions { margin-left: auto; }
.ledger.rules { min-width: 22rem; }
.ledger.rules tbody tr { height: 2.5rem; }
.rules-context__facts { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: var(--text-xs); color: var(--color-text-secondary); }
.rules-context__facts b { color: var(--color-text-muted); font-weight: 600; margin-right: 0.25rem; }
.ledger.rules td.cell-text { text-overflow: ellipsis; }
.col-q-treatment { width: 9.75rem; }
.col-q-rate, .col-q-standard { width: 7.5rem; }
.col-q-starts { width: 6rem; }
.col-q-ends { width: 6.5rem; }
.col-q-status { width: 6rem; }
.col-q-vstatus { width: 9rem; }
.col-q-family { width: 8rem; }
.col-q-version { width: 13.5rem; }   /* "September 2026 Rules · update 2 of 3" */
.col-q-created { width: 6.5rem; }
.col-q-by { width: 8.5rem; }
.col-q-runs { width: 8rem; }
/* Rules tables: short, predictable fields are bounded. Names take a modest share; the Reason / Note column takes everything that is left, so the business text a
   Finance user reads is cut only when the page is genuinely narrow. */
.col-q-name { width: 24%; }
.col-q-customer { width: 21%; }
.col-q-applies { width: 11%; }
.col-q-what { width: 18%; }
@container workpaper (max-width: 68rem) { .col-q-name { width: 30%; } .col-q-customer { width: 28%; } .col-q-applies { width: 14%; } }
/* Beside the open drawer there is little room: the descriptive columns share what is left instead of holding a percentage of it. */
@container workpaper (max-width: 44rem) { .col-q-name, .col-q-customer, .col-q-applies, .col-q-what { width: auto; } }

/* the close workflow (Overview and finalization) */
.close-state { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-4); border-left: 4px solid var(--color-border-strong); }
.close-state--ok { border-left-color: var(--color-success); }
.close-state--final { border-left-color: var(--color-success); }
.close-state--progress { border-left-color: var(--color-warning); }
.close-state__main { flex: 1 1 22rem; min-width: 0; }
.close-state__next { flex: 0 1 22rem; min-width: 14rem; display: grid; gap: var(--space-2); }
.close-state__label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); }
.close-state__title { font-size: 1.5rem; margin: var(--space-1) 0; }
.close-state__sentence { margin: 0 0 var(--space-1); font-size: var(--text-sm); }
.close-state__sentence--note, .close-state__why { color: var(--color-text-muted); font-size: var(--text-xs); margin: 0; }
.close-form { display: grid; gap: var(--space-2); }
.needs { list-style: none; margin: 0; padding: 0; }
.needs__item { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr auto; gap: var(--space-3); align-items: center; padding: var(--space-2) var(--space-4); border-top: 1px solid var(--color-border); font-size: var(--text-sm); }
.needs__name { font-weight: 650; }
.needs__why { color: var(--color-text); }
@media (max-width: 52rem) { .needs__item { grid-template-columns: 1fr; gap: var(--space-1); } }
.final-kv dt { min-width: 11rem; }
.final-notice { margin-top: var(--space-3); }
.evidence-panel > summary { cursor: pointer; list-style: none; }
.finalize { display: grid; gap: var(--space-3); margin-top: var(--space-4); max-width: 52rem; }
.finalize__back { margin: 0; }
.finalize .plain-list { list-style: disc; padding-left: 1.25rem; display: grid; gap: var(--space-1); font-size: var(--text-sm); }
.finalize-form { margin-top: var(--space-3); }

/* sign-in, access refusals and Settings > Users & access */
.auth-page { min-height: 100vh; background: var(--color-bg, var(--color-surface-sunken)); }
.auth { display: grid; gap: var(--space-5); justify-items: center; align-content: start; padding: 12vh var(--space-4) var(--space-6); }
.auth__brand { display: grid; gap: 2px; justify-items: center; text-align: center; }
.auth__name { font-weight: 700; font-size: 1.25rem; }
.auth__sub { color: var(--color-text-muted); font-size: var(--text-xs); }
.auth__card { width: min(24rem, 100%); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg, var(--radius-md)); background: var(--color-surface); display: grid; gap: var(--space-3); }
.auth__title { font-size: 1.125rem; margin: 0; }
.auth__form { display: grid; gap: var(--space-3); }
.auth__form .field { min-width: 0; }
.auth__message { margin: 0; }
.auth__note, .auth__text { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.auth__text { font-size: var(--text-sm); color: var(--color-text); }
.topbar__user { display: grid; line-height: 1.15; text-align: right; }
.topbar__name { font-size: var(--text-sm); font-weight: 600; }
.topbar__role { font-size: var(--text-xs); color: var(--color-text-muted); }
.topbar__signout { margin: 0; }
.recorded-as { margin: 0; }
.settings { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.settings__crumb { font-size: var(--text-xs); color: var(--color-text-muted); }
.settings__title { margin: 0; font-size: 1.5rem; }
.settings__lead { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: var(--text-sm); max-width: 48rem; }
.inline-form { display: flex; gap: var(--space-2); align-items: center; margin: 0; }
.inline-form select { min-width: 10rem; }
.access td, .access th { white-space: nowrap; }
.access-add { max-width: 32rem; }

/* the life of a period (checkpoint 10A): freshness strip, rules line, start page */
.freshness { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-4); padding: var(--space-4); border-left: 4px solid var(--color-border-strong); align-items: start; }
.freshness--ok { border-left-color: var(--color-success); }
.freshness--warning { border-left-color: var(--color-warning); }
.freshness--fail { border-left-color: var(--color-danger); }
.freshness__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: 1.15rem; margin: var(--space-1) 0; }
.freshness__sentence { margin: 0 0 var(--space-2); font-size: var(--text-sm); }
.freshness__facts { display: grid; gap: 2px; margin: 0; font-size: var(--text-xs); }
.freshness__facts > div { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.freshness__facts dt { color: var(--color-text-muted); min-width: 8rem; }
.freshness__facts dd { margin: 0; }
.freshness__side { display: grid; gap: var(--space-2); }
.freshness__hint { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.freshness__hint--warn { color: var(--color-text); background: var(--color-warning-soft, transparent); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm, 4px); }
.freshness__rules { display: grid; gap: var(--space-1); }
.freshness__rules-line { margin: 0; font-size: var(--text-sm); }
.freshness .inline-form { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
@container workpaper (max-width: 72rem) { .freshness { grid-template-columns: 1fr 1fr; } .freshness__rules { grid-column: 1 / -1; } }
@media (max-width: 52rem) { .freshness { grid-template-columns: 1fr; } }
.start-period { max-width: 46rem; margin-top: var(--space-4); }
.start-period__title { font-size: 1.35rem; margin: 0 0 var(--space-2); }
.start-period__lead, .start-period__rules { font-size: var(--text-sm); margin: 0 0 var(--space-3); }
.start-period .close-form { max-width: 24rem; margin-top: var(--space-3); }

/* review of newer rules */
.freshness__notice { margin: var(--space-1) 0 0; font-size: var(--text-xs); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm, 4px); background: var(--color-info-soft); color: var(--color-text); }
.rules-switch { max-width: 56rem; margin-top: var(--space-4); }
.rules-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin: var(--space-3) 0; }
.rules-compare__col { border: 1px solid var(--color-border); border-radius: var(--radius-md, 6px); padding: var(--space-3); }
.rules-compare__col--new { border-color: var(--color-info); }
.rules-compare__col h3 { margin: var(--space-1) 0; font-size: 1.15rem; }
.rules-impact { display: flex; flex-wrap: wrap; gap: var(--space-5); margin: var(--space-2) 0 var(--space-3); }
.rules-impact dt { font-size: var(--text-xs); color: var(--color-text-muted); }
.rules-impact dd { margin: 0; font-size: 1.25rem; font-weight: 650; }
.rules-impact__title { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin: var(--space-4) 0 0; }
.rules-switch__form { max-width: 34rem; margin-top: var(--space-3); }
.rules-switch__form textarea { width: 100%; }
.field__help { font-size: var(--text-xs); color: var(--color-text-muted); }
@media (max-width: 52rem) { .rules-compare { grid-template-columns: 1fr; } }

/* an explicit choice (never pre-selected) with each option's effect written out */
.choice { border: 1px solid var(--color-border); border-radius: var(--radius-md, 6px); padding: var(--space-2) var(--space-3); margin: 0 0 var(--space-2); display: grid; gap: var(--space-2); }
.choice legend { font-size: var(--text-sm); font-weight: 600; padding: 0 var(--space-1); }
.choice legend em { font-weight: 400; font-size: var(--text-xs); color: var(--color-text-muted); }
.choice__option { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-sm); cursor: pointer; }
.choice__option input { margin-top: 3px; }
.choice__help { display: block; font-size: var(--text-xs); color: var(--color-text-muted); }
.callout--effect { border-left-color: var(--color-info); background: var(--color-info-soft); }

/* manual adjustments in the exception drawer */
.adjustment { border: 1px solid var(--color-border); border-radius: var(--radius-md, 6px); padding: var(--space-2) var(--space-3); margin: var(--space-2) 0; }
.adjustment--withdrawn { opacity: 0.7; }
.adjustment--proposed { border-left: 4px solid var(--color-warning); }
.adjustment--approved { border-left: 4px solid var(--color-success); }
.adjustment__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

/* Working draft of the commission rules */
.rules-draft { max-width: 72rem; margin-top: var(--space-4); }
.draft-label { font-size: 1.15rem; margin: var(--space-2) 0; }
.draft-banner { margin-bottom: var(--space-3); }
.draft-edits__conflict { background: var(--color-danger-bg); }
.draft-edits__problem { color: var(--color-danger); }
.draft-blocker { color: var(--color-danger); }
.draft-discard summary, .draft-discard-all summary { cursor: pointer; display: inline-block; }
.draft-discard-all { margin-top: var(--space-4); }
.draft-history li { margin-bottom: var(--space-2); }
.inline-form { display: flex; gap: var(--space-2); align-items: end; margin-top: var(--space-2); flex-wrap: wrap; }
.draft-edits, .draft-impact { width: 100%; border-collapse: collapse; }
.draft-edits th, .draft-edits td, .draft-impact th, .draft-impact td { padding: var(--space-2) var(--space-3); text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border); }
.draft-edits th, .draft-impact th { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 600; }
.draft-edits td.num, .draft-impact td.num, .draft-impact th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Product picker */
.product-results { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: var(--space-1); }
.product-results__item { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; padding: var(--space-1) 0; border-bottom: 1px solid var(--color-border); }
.product-results__name { font-weight: 600; }
.product-results__meta, .product-results__full { color: var(--color-text-muted); font-size: var(--text-xs); }
.product-fix { margin-top: var(--space-3); }

/* Working Draft: period cards */
.draft-periods { display: grid; gap: var(--space-3); margin: var(--space-2) 0 var(--space-4); }
.draft-period { border: 1px solid var(--color-border); border-radius: var(--radius-md, 6px); padding: var(--space-3); }
.draft-period--ok { border-left: 4px solid var(--color-success); }
.draft-period--warning { border-left: 4px solid var(--color-warning); }
.draft-period__head { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; }
.draft-period__head h4 { margin: 0; font-size: 1.05rem; }
.draft-period__figures { display: flex; flex-wrap: wrap; gap: var(--space-5); margin: var(--space-2) 0; }
.draft-period__figures dt { font-size: var(--text-xs); color: var(--color-text-muted); }
.draft-period__figures dd { margin: 0; font-size: 1.25rem; font-weight: 650; }
.draft-period__status { margin: var(--space-1) 0; }
.draft-period__more { margin: var(--space-1) 0; font-size: var(--text-sm); }
.draft-evidence { margin-top: var(--space-4); }

.digest__action { font-size: var(--text-xs); margin-left: var(--space-2); }
.evidence__action { margin: var(--space-2) 0 0; }