/*
 * Application components. Built from the Mobbin reference notes in
 * docs/design/refs/ — see each section header for the governing file.
 */

/* ============================================================== app shell ==
 * docs/design/refs/app-shell.md
 *
 * Sidebar and top bar are two separate 56px boxes whose bottom borders meet as
 * one line (Linear), so the sidebar can collapse without the top bar reflowing.
 */

.shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    min-height: 100vh;
    background: var(--bg);
}

html[data-nav="rail"] .shell { grid-template-columns: var(--sidebar-rail) 1fr; }

.sidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--bg-sunken);
    border-right: 1px solid var(--border);
    overflow: hidden;
    transition: width var(--t-base) var(--ease);
}

.sidebar__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: none;
    height: var(--topbar-height);
    padding: 0 var(--space-2) 0 var(--space-3);
    border-bottom: 1px solid var(--border);
}

.sidebar__mark {
    flex: none;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-control);
    background: var(--accent);
    color: var(--accent-fg);
    font-size: var(--text-sm);
    font-weight: 600;
    box-shadow: var(--inset-highlight);
}

.sidebar__name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Revealed on sidebar hover or keyboard focus only (Notion). */
.sidebar__collapse {
    flex: none;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: var(--radius-control);
    background: none;
    color: var(--fg-subtle);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.sidebar:hover .sidebar__collapse,
.sidebar__collapse:focus-visible { opacity: 1; }
.sidebar__collapse:hover { background: var(--grey-100); color: var(--fg); }

.sidebar__nav {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-2) 0 var(--space-4);
}

.sidebar__footer {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: 40px;
    padding: 0 var(--space-3);
    border-top: 1px solid var(--border);
    font-size: var(--text-sm);
    color: var(--fg-subtle);
}

/* Generous space above, tight below — what makes a long tree scannable (Notion). */
.nav__caption {
    display: flex;
    align-items: center;
    height: 24px;
    margin: var(--space-4) 0 var(--space-1);
    padding: 0 var(--space-4);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fg-subtle);
}

.nav__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    margin: 1px var(--space-2);
    padding: 0 var(--space-2);
    border-radius: var(--radius-control);
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--grey-700);
    white-space: nowrap;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.nav__item:hover {
    background: var(--grey-100);
    color: var(--fg);
    text-decoration: none;
    transition-duration: var(--t-instant);
}

.nav__item:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -1px;
}

.nav__item[aria-current="page"] {
    background: var(--accent-soft);
    color: var(--grey-900);
    font-weight: 600;
}

.nav__item[aria-current="page"]:hover { background: rgba(31, 95, 91, 0.12); }

/* 2px x 16px accent bar flush to the sidebar edge, outside the 8px inset. */
.nav__item[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: calc(var(--space-2) * -1);
    top: 50%;
    width: 2px;
    height: 16px;
    margin-top: -8px;
    border-radius: 0 2px 2px 0;
    background: var(--accent);
}

.nav__item[aria-current="page"] .nav__icon { color: var(--accent); }

.nav__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    color: var(--fg-subtle);
}

.nav__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav__count {
    flex: none;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--fg-subtle);
}

/* Rail: 40px squares, captions become dividers, labels are tooltips. */
html[data-nav="rail"] .sidebar__name,
html[data-nav="rail"] .nav__label,
html[data-nav="rail"] .nav__count,
html[data-nav="rail"] .sidebar__footer span:not(.sidebar__footer-code) {
    display: none;
}

html[data-nav="rail"] .sidebar__header { justify-content: center; padding: 0; }

html[data-nav="rail"] .nav__caption {
    height: 1px;
    margin: var(--space-2) var(--space-3);
    padding: 0;
    overflow: hidden;
    background: var(--border);
    text-indent: -999px;
}

html[data-nav="rail"] .nav__item {
    width: 40px;
    height: 40px;
    justify-content: center;
    margin: 2px 12px;
    padding: 0;
}

html[data-nav="rail"] .nav__icon { width: 20px; height: 20px; }
html[data-nav="rail"] .sidebar__footer { justify-content: center; padding: 0; }

/* The rail has no room for a disclosure: the group is its icon, and the
   children are unreachable until the sidebar is opened again. */
html[data-nav="rail"] .nav__caret,
html[data-nav="rail"] .nav__child { display: none; }

/* ------------------------------------------------------------ nav groups ---
 * A <details> so the open state is server-stated and JavaScript-free: it is
 * open because you are inside it, not because you clicked it last time
 * (docs/design/refs/navigation-and-scope.md).
 */

.nav__group { margin: 0; }
.nav__group > summary { cursor: pointer; list-style: none; }
.nav__group > summary::-webkit-details-marker { display: none; }

.nav__caret {
    flex: none;
    display: grid;
    place-items: center;
    color: var(--fg-subtle);
    transition: transform var(--t-fast) var(--ease);
}

.nav__group[open] > summary .nav__caret { transform: rotate(180deg); }

.nav__child {
    display: block;
    height: 28px;
    margin: 1px var(--space-2) 1px 34px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-control);
    font-size: var(--text-base);
    line-height: 28px;
    color: var(--fg-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav__child:hover { background: var(--grey-100); color: var(--fg); text-decoration: none; }
.nav__child:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }

.nav__child.is-current {
    color: var(--grey-900);
    font-weight: 600;
    background: var(--accent-soft);
}

/* The group's own row is never the accent bar — a child owns that. */
.nav__group > summary.nav__item[aria-current="page"]::before { display: none; }

/* One reused tooltip element, positioned by JS. Never the title attribute. */
.tooltip {
    position: fixed;
    z-index: 300;
    padding: 4px 8px;
    border-radius: 4px;
    background: var(--grey-900);
    color: var(--bg);
    font-size: var(--text-sm);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--t-fast) var(--ease);
}

[data-theme="dark"] .tooltip { background: var(--grey-200); color: var(--grey-900); }
.tooltip[data-show] { opacity: 1; }

/* ------------------------------------------------------------------ topbar */

.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: var(--topbar-height);
    padding: 0 var(--space-4);
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.topbar__crumbs {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    font-size: var(--text-base);
    color: var(--fg-subtle);
    white-space: nowrap;
}

.topbar__crumbs a { color: var(--fg-subtle); }
.topbar__crumbs a:hover { color: var(--fg); }
.topbar__crumbs .sep { color: var(--grey-300); }

.topbar__crumbs strong {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--fg);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A button dressed as an input. Clicking it, or pressing /, opens the palette. */
.topbar__search {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 280px;
    height: var(--control-height);
    padding: 0 var(--space-2) 0 var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--grey-100);
    color: var(--fg-subtle);
    font: inherit;
    font-size: var(--text-base);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.topbar__search:hover { background: var(--grey-50); border-color: var(--border-strong); }
.topbar__search-label { flex: 1 1 auto; text-align: left; }

@media (max-width: 1180px) {
    .topbar__search { width: var(--control-height); padding: 0; justify-content: center; }
    .topbar__search-label, .topbar__search kbd { display: none; }
}

/* Branch + FY as one segmented control split by a hairline. */
.context {
    display: flex;
    align-items: stretch;
    height: var(--control-height);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--bg);
    overflow: hidden;
}

.context__part {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-2) 0 var(--space-3);
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--text-base);
    color: var(--fg);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease);
}

.context__part + .context__part { border-left: 1px solid var(--border); }
.context__part:hover { background: var(--grey-50); }

.context__label {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fg-faint);
}

.context__value { font-weight: 500; }
.context__chevron { color: var(--fg-faint); }

/* A financial year other than the live one stays amber until switched back. */
.context__part--warn { background: var(--amber-bg); color: var(--amber); }
.context__part--warn:hover { background: var(--amber-bg); filter: brightness(0.98); }
.context__part--warn .context__label { color: var(--amber); }

@media (max-width: 1280px) {
    .context__label { display: none; }
}

.topbar__divider { flex: none; width: 1px; height: 24px; margin: 0 var(--space-1); background: var(--border); }

.icon-button {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--control-height);
    height: var(--control-height);
    border: 0;
    border-radius: var(--radius-control);
    background: none;
    color: var(--fg-muted);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.icon-button:hover { background: var(--grey-100); color: var(--fg); }

.icon-button__dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 0 2px var(--bg);
}

.avatar {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.avatar-button { display: grid; place-items: center; width: var(--control-height); height: var(--control-height); border: 0; background: none; border-radius: var(--radius-control); cursor: pointer; }
.avatar-button:hover { background: var(--grey-100); }

/* The pending "g" of a route chord. */
.chord-chip {
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 4px;
    background: var(--accent-soft);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
}

/* Sub-section tabs, so the sidebar never has to carry a third level (Stripe). */
.tabs {
    display: flex;
    align-items: stretch;
    gap: var(--space-4);
    height: 40px;
    margin: 0 0 var(--space-4);
    border-bottom: 1px solid var(--border);
}

.tabs__tab {
    display: flex;
    align-items: center;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--fg-subtle);
}

.tabs__tab:hover { color: var(--fg); text-decoration: none; }
.tabs__tab[aria-current] { color: var(--fg); font-weight: 600; border-bottom-color: var(--accent); }

/* ============================================================== palette ===
 * docs/design/refs/app-shell.md §8 — sits under the top bar, not centred.
 */

.palette-backdrop {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    justify-content: center;
    padding: 88px var(--space-4) var(--space-4);
    background: var(--scrim);
}

.palette {
    display: flex;
    flex-direction: column;
    width: 640px;
    max-width: 100%;
    max-height: 440px;
    background: var(--bg-raised);
    border-radius: var(--radius-modal);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.palette__input {
    flex: none;
    height: 48px;
    padding: 0 var(--space-4);
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: none;
    font-size: var(--text-lg);
    color: var(--fg);
}

.palette__input:focus { outline: 0; }
.palette__results { flex: 1 1 auto; overflow-y: auto; padding: var(--space-1); }

.palette__row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--control-height);
    padding: 0 var(--space-2);
    border-radius: var(--radius-control);
    font-size: var(--text-base);
    color: var(--fg);
    cursor: pointer;
}

.palette__row:hover,
.palette__row[aria-selected="true"] { background: var(--grey-100); text-decoration: none; transition: none; }
.palette__row-icon { flex: none; color: var(--fg-subtle); display: grid; place-items: center; }
.palette__row-context { margin-left: auto; font-size: var(--text-sm); color: var(--fg-subtle); }

.palette__caption {
    padding: var(--space-2) var(--space-2) var(--space-1);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fg-subtle);
}

.palette__footer {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: var(--control-height);
    padding: 0 var(--space-3);
    border-top: 1px solid var(--border);
    background: var(--bg-sunken);
    font-size: var(--text-xs);
    color: var(--fg-subtle);
}

.palette__empty { padding: var(--space-6); text-align: center; color: var(--fg-subtle); font-size: var(--text-base); }

/* ------------------------------------------------------------------- main */

.main { display: flex; flex-direction: column; min-width: 0; }

.page {
    flex: 1 1 auto;
    padding: var(--space-4) var(--space-6) var(--space-12);
}

.page__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: var(--pageheader-height);
    margin-bottom: var(--space-4);
}

.page__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xl);
    font-weight: 600;
    letter-spacing: var(--tracking-xl);
    line-height: 1.2;
}

.page__subtitle {
    margin-top: var(--space-1);
    max-width: 68ch;
    font-size: var(--text-base);
    color: var(--fg-subtle);
}

.page__actions { display: flex; align-items: center; gap: var(--space-2); flex: none; padding-top: 2px; }

/* A muted count beside a page title, so the number is not a heading. */
.count-pill {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: var(--grey-100);
    color: var(--grey-600);
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1;
}

.form-page { max-width: var(--form-max-width); }

/* ================================================================== cards ==*/

.card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: var(--space-4);
}

.card + .card { margin-top: var(--space-6); }

.card__header { margin-bottom: var(--space-4); }
.card__title { font-size: var(--text-md); font-weight: 600; letter-spacing: var(--tracking-base); }
.card__description { margin-top: 2px; font-size: var(--text-sm); color: var(--fg-subtle); max-width: 68ch; }

.card--flush { padding: 0; overflow: hidden; }

/* 12-column grid inside the form column, so a 6-char code is not full width. */
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-4); }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-8 { grid-column: span 8; }
.col-12 { grid-column: span 12; }

@media (max-width: 860px) {
    .grid > * { grid-column: span 12 !important; }
}

/* Sticky save bar: always present, so a JS-off submit still works. */
.form-footer {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    height: var(--topbar-height);
    margin-top: var(--space-6);
    padding: 0 var(--space-4);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm);
}

.form-footer__note { margin-right: auto; font-size: var(--text-sm); color: var(--fg-subtle); }

/* Error summary card at the top of a failed form. */
.alert {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    font-size: var(--text-base);
    margin-bottom: var(--space-4);
}

.alert--error { background: var(--red-bg); border-color: var(--red-border); color: var(--red); }
.alert--warn { background: var(--amber-bg); border-color: var(--amber-border); color: var(--amber); }
.alert--success { background: var(--green-bg); border-color: var(--green-border); color: var(--green); }
.alert--info { background: var(--blue-bg); border-color: var(--blue-border); color: var(--blue); }
.alert__title { font-weight: 600; }
.alert ul { margin: var(--space-2) 0 0; padding-left: var(--space-4); }
.alert a { color: inherit; text-decoration: underline; }

/* ================================================================= tables ==
 * docs/design/refs/data-table.md
 */

.toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--filterbar-height);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
}

/* The search field carries its own glyph rather than sitting beside one. */
.toolbar__field { position: relative; display: flex; align-items: center; }

.toolbar__field-icon {
    position: absolute;
    left: var(--space-2);
    display: grid;
    place-items: center;
    color: var(--fg-faint);
    pointer-events: none;
}

.toolbar__field input { padding-left: 30px; }

/* `input[type="search"]` in base.css is specificity (0,1,1), so a bare class
   would lose to its width:100%. Naming the element ties and wins on order. */
.toolbar__search,
input.toolbar__search { width: 260px; }
.toolbar__spacer { flex: 1 1 auto; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: 24px;
    padding: 0 var(--space-1) 0 var(--space-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: var(--bg);
    font-size: var(--text-sm);
    color: var(--fg-muted);
}

.chip__x {
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    color: var(--fg-faint);
}

.chip__x:hover { background: var(--grey-100); color: var(--fg); text-decoration: none; }

.table-wrap {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    /* Without this the square th corners poke through the rounded edge. */
    overflow: hidden auto;
}

table.dt {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-base);
}

table.dt th,
table.dt td {
    /* Fixed height with zero vertical padding, so a badge cannot grow a row. */
    height: var(--row-height);
    padding: 0 var(--space-3);
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--hairline);
    white-space: nowrap;
    line-height: 1;
}

/* Exactly one dark value per row creates the vertical scan line; everything
   else sits a step back. */
table.dt td { font-weight: 400; color: var(--grey-700); }

table.dt th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface-inset);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--fg-muted);
    border-bottom-color: var(--border);
}

table.dt th:first-child { border-top-left-radius: var(--radius-card); }
table.dt th:last-child { border-top-right-radius: var(--radius-card); }

table.dt tbody tr { transition: background var(--t-fast) var(--ease); }
table.dt tbody tr:hover { background: var(--grey-50); transition-duration: var(--t-instant); }
table.dt tbody tr:last-child td { border-bottom: 0; }

table.dt tbody tr.is-selected {
    background: var(--accent-softer);
    box-shadow: inset 2px 0 0 var(--accent);
}

table.dt td:first-child,
table.dt th:first-child { padding-left: var(--space-4); }
table.dt td:last-child,
table.dt th:last-child { padding-right: var(--space-4); }

/* Numeric columns need more right padding than text to look equally inset. */
.dt__num { text-align: right; font-variant-numeric: tabular-nums; padding-right: var(--space-4); }
th.dt__num { text-align: right; }
.dt__strong { font-weight: 500; color: var(--grey-900); }
.dt__meta { font-size: var(--text-sm); color: var(--fg-subtle); letter-spacing: var(--tracking-sm); }
.dt__null { color: var(--grey-300); }
.dt__zero { color: var(--fg-faint); }
.dt__code { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--fg-muted); }

table.dt td a {
    color: var(--grey-900);
    font-weight: 500;
    text-decoration-color: transparent;
    text-underline-offset: 2px;
}

table.dt td a:hover { text-decoration: underline; text-decoration-color: var(--grey-300); }

/* Row actions stay invisible until the row is touched, so a long list reads as
   data rather than as a wall of buttons. They remain keyboard reachable. */
.dt__actions { display: flex; justify-content: flex-end; gap: var(--space-1); }
.dt__actions .btn { opacity: 0; transition: opacity var(--t-fast) var(--ease); }
table.dt tbody tr:hover .dt__actions .btn,
.dt__actions .btn:focus-visible { opacity: 1; }

/* Sort is a link; all three states key off aria-sort set by the server. */
.dt__sort {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: inherit;
}

.dt__sort:hover { text-decoration: none; color: var(--fg); }
.dt__sort::after {
    content: "↕";
    font-size: 10px;
    opacity: 0;
    transition: opacity var(--transition);
}

.dt__sort:hover::after { opacity: 0.5; }
th[aria-sort] { background: var(--grey-100); color: var(--fg); }
th[aria-sort="ascending"] .dt__sort::after { content: "↑"; opacity: 1; color: var(--accent); }
th[aria-sort="descending"] .dt__sort::after { content: "↓"; opacity: 1; color: var(--accent); }

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: var(--filterbar-height);
    padding-top: var(--space-3);
    font-size: var(--text-base);
    color: var(--fg-muted);
}

.pagination__pages { display: flex; align-items: center; gap: var(--space-1); }

.pagination__page {
    display: grid;
    place-items: center;
    min-width: 28px;
    height: 28px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-control);
    color: var(--fg-muted);
}

.pagination__page:hover { background: var(--grey-100); text-decoration: none; }
.pagination__page[aria-current] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.pagination__gap { color: var(--fg-faint); padding: 0 var(--space-1); }
.pagination__page--off { color: var(--fg-faint); pointer-events: none; }

/* ================================================================ badges ==*/

.badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radius-micro);
    background: var(--grey-100);
    color: var(--fg-muted);
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    /* Optical: a badge sits a touch low against 13px text beside it. */
    position: relative;
    top: -0.5px;
}

/* Every badge carries a glyph, so colour is never the only signal. */
.badge--ok { background: var(--green-bg); color: var(--green); }
.badge--warn { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-border); }
.badge--danger { background: var(--red-bg); color: var(--red); }
.badge--info { background: var(--blue-bg); color: var(--blue); }
.badge--accent { background: var(--accent-soft); color: var(--accent); }

/* ============================================================ empty state ==
 * docs/design/refs/empty-states.md
 */

.empty {
    max-width: 360px;
    margin: 0 auto;
    padding: var(--space-12) var(--space-4);
    text-align: center;
}

.empty__glyph {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin: 0 auto var(--space-3);
    border: 1px solid var(--grey-300);
    border-radius: var(--radius-card);
    color: var(--grey-400);
}

.empty__title { font-size: var(--text-lg); font-weight: 600; }
.empty__help { margin: var(--space-1) 0 var(--space-4); font-size: var(--text-base); color: var(--fg-subtle); }

/* =================================================================== auth ==
 * docs/design/refs/auth-screens.md
 */

.auth {
    min-height: 100vh;
    background: var(--bg-sunken);
    padding: 12vh var(--space-4) var(--space-12);
}

.auth__card {
    width: 400px;
    max-width: 100%;
    margin: 0 auto;
    padding: var(--space-8);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
}

.auth__brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}

.auth__title { font-size: var(--text-xl); font-weight: 600; }
.auth__sub { margin-top: var(--space-1); font-size: var(--text-base); color: var(--fg-subtle); }
.auth__foot {
    width: 400px;
    max-width: 100%;
    margin: var(--space-4) auto 0;
    font-size: var(--text-sm);
    color: var(--fg-subtle);
    text-align: center;
}

/* ================================================== permission matrix =====
 * docs/design/refs/permission-matrix.md
 */

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

.matrix th,
.matrix td {
    height: var(--row-height);
    padding: 0 var(--space-3);
    border-bottom: 1px solid var(--hairline);
    text-align: left;
}

.matrix thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--grey-50);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--fg-muted);
    border-bottom-color: var(--border);
}

.matrix__entity td {
    background: var(--grey-50);
    font-weight: 600;
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fg-muted);
}

.matrix__perm { display: flex; flex-direction: column; gap: 1px; }
.matrix__action { font-weight: 500; }
.matrix__code { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-faint); }
.matrix__cell { width: 96px; text-align: center; }

/* Admin is locked: a muted tick, never an empty box. */
.matrix__locked { color: var(--fg-faint); }

/* ============================================================== audit log ==
 * docs/design/refs/audit-log.md
 */

.diff { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
.diff th, .diff td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--hairline); text-align: left; vertical-align: top; }
.diff th { font-size: var(--text-sm); font-weight: 600; color: var(--fg-muted); background: var(--grey-50); }
.diff__field { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--fg-muted); white-space: nowrap; }

/* The − / + prefixes carry the meaning; the tint only reinforces it. */
.diff__before { color: var(--fg-muted); text-decoration: line-through; }
.diff__before::before { content: "− "; font-family: var(--font-mono); text-decoration: none; display: inline-block; }
.diff__after { color: var(--fg); font-weight: 500; }
.diff__after::before { content: "+ "; font-family: var(--font-mono); color: var(--green); }

.kv { display: grid; grid-template-columns: 160px 1fr; gap: var(--space-2) var(--space-4); font-size: var(--text-base); }
.kv dt { color: var(--fg-subtle); }
.kv dd { margin: 0; }

/* ========================================================= settings rows ==
 * docs/design/refs/forms-and-settings.md
 */

.setting-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: 48px;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--hairline);
}

.setting-row:last-child { border-bottom: 0; }
.setting-row__text { flex: 1 1 auto; min-width: 0; }
.setting-row__label { font-size: var(--text-base); font-weight: 500; }
.setting-row__help { font-size: var(--text-sm); color: var(--fg-subtle); }
.setting-row__control { flex: none; width: 220px; display: flex; justify-content: flex-end; }

/* =================================================== flash / toast stack ==*/

.flash-stack {
    position: fixed;
    right: var(--space-6);
    bottom: var(--space-6);
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: 380px;
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--bg-raised);
    box-shadow: var(--shadow);
    font-size: var(--text-base);
}

.toast--success { border-left: 3px solid var(--green); }
.toast--error { border-left: 3px solid var(--red); }
.toast--info { border-left: 3px solid var(--blue); }
.toast--warn { border-left: 3px solid var(--amber); }
.toast__close { margin-left: auto; background: none; border: 0; color: var(--fg-faint); cursor: pointer; font-size: var(--text-md); }

/* ================================================================ modal ===*/

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: grid;
    place-items: start center;
    padding: 12vh var(--space-4) var(--space-4);
    background: var(--scrim);
}

.modal {
    width: 480px;
    max-width: 100%;
    background: var(--bg-raised);
    border-radius: var(--radius-modal);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.modal__header { padding: var(--space-4); border-bottom: 1px solid var(--border); }
.modal__title { font-size: var(--text-lg); font-weight: 600; }
.modal__body { padding: var(--space-4); font-size: var(--text-base); }
.modal__footer { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); background: var(--surface-inset); }

/* =============================================================== popover ==
 * docs/design/refs/app-shell.md §7 — 4px below the trigger, opacity only.
 */

.popover {
    position: absolute;
    z-index: 200;
    min-width: 200px;
    margin-top: var(--space-1);
    padding: var(--space-1);
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow);
    animation: popover-in var(--t-fast) var(--ease);
}

@keyframes popover-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .popover { animation: none; }
}

.popover--branch { width: 240px; }
.popover--fy { width: 160px; }
.popover--menu { width: 220px; }

.popover__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    height: var(--control-height);
    padding: 0 var(--space-2);
    border: 0;
    border-radius: var(--radius-control);
    background: none;
    font: inherit;
    font-size: var(--text-base);
    color: var(--fg);
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.popover__item:hover { background: var(--grey-100); text-decoration: none; transition: none; }
.popover__item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.popover__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Selected shows a teal check at the right, not a colour change alone. */
.popover__item[aria-selected="true"] { font-weight: 600; color: var(--fg); }
.popover__check { flex: none; color: var(--accent); }

.popover__caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-2) var(--space-1);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fg-subtle);
}

.popover__sep { height: 1px; margin: var(--space-1) 0; background: var(--border); }
.popover__meta { padding: var(--space-1) var(--space-2) var(--space-2); font-size: var(--text-sm); color: var(--fg-subtle); }

/* A secondary value on a popover row — a branch's code beside its name. */
/* A label sitting inside a filter bar, beside the control it names. */
.toolbar__inline {
    display: flex;
    align-items: center;
    font-size: var(--text-sm);
    color: var(--fg-subtle);
    white-space: nowrap;
}

.popover__meta-inline {
    flex: none;
    font-size: var(--text-xs);
    color: var(--fg-subtle);
    letter-spacing: var(--tracking-sm);
}

/* ========================================================== error pages ===*/

.error-page { max-width: 480px; margin: 0 auto; padding: var(--space-12) var(--space-4); text-align: center; }
.error-page__code { display: inline-block; margin-bottom: var(--space-3); padding: 2px var(--space-2); border-radius: var(--radius-pill); background: var(--grey-100); font-size: var(--text-sm); font-weight: 600; color: var(--fg-muted); }
.error-page__title { font-size: var(--text-2xl); font-weight: 600; }
.error-page__message { margin: var(--space-2) 0 var(--space-6); color: var(--fg-muted); }
.error-page__ref { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--fg-faint); }
.error-page__trace { margin-top: var(--space-6); padding: var(--space-3); max-height: 320px; overflow: auto; background: var(--grey-50); border: 1px solid var(--border); border-radius: var(--radius-card); font-family: var(--font-mono); font-size: var(--text-xs); text-align: left; white-space: pre-wrap; color: var(--fg-muted); }

/* ======================================================== misc / checklist */

.checklist { display: flex; flex-direction: column; }
.checklist__item { display: flex; align-items: center; gap: var(--space-3); min-height: 40px; border-bottom: 1px solid var(--hairline); font-size: var(--text-base); }
.checklist__item:last-child { border-bottom: 0; }
.checklist__mark { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; flex: none; font-size: 11px; font-weight: 700; }
.checklist__mark--done { background: var(--green-bg); color: var(--green); }
.checklist__mark--todo { background: var(--grey-100); color: var(--fg-faint); }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-3); }

.stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4) var(--space-4);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
}

.stat__head { display: flex; align-items: center; gap: var(--space-2); }

.stat__icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-control);
    background: var(--grey-100);
    color: var(--fg-subtle);
}

.stat__label { font-size: var(--text-sm); font-weight: 500; color: var(--fg-muted); }

.stat__value {
    font-size: var(--text-2xl);
    font-weight: 600;
    letter-spacing: var(--tracking-xl);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.stat__foot { font-size: var(--text-sm); color: var(--fg-faint); }

table.dt [data-select-row] { opacity: 0; transition: opacity var(--t-fast) var(--ease); }
table.dt tbody tr:hover [data-select-row],
table.dt [data-select-row]:focus-visible,
table.dt [data-select-row]:checked { opacity: 1; }

/* Skeleton: the chrome renders for real, only the values are bars. */
.sk-rows { animation: sk-pulse 1.6s ease-in-out infinite; }

@keyframes sk-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

.sk {
    display: block;
    height: 10px;
    margin: 13px 0;
    border-radius: var(--radius-micro);
    background: var(--grey-100);
}

.sk-rows tr:nth-child(5n + 1) .sk { width: 72%; }
.sk-rows tr:nth-child(5n + 2) .sk { width: 48%; }
.sk-rows tr:nth-child(5n + 3) .sk { width: 88%; }
.sk-rows tr:nth-child(5n + 4) .sk { width: 56%; }
.sk-rows tr:nth-child(5n + 5) .sk { width: 64%; }

@media (prefers-reduced-motion: reduce) {
    .sk-rows { animation: none; }
}

.no-js .js-only { display: none !important; }

/* ============================================================== utilities ==
 * Small single-purpose classes. These exist because our Content-Security-
 * Policy is `style-src 'self'` with no unsafe-inline (CLAUDE.md §11): a
 * style="..." attribute is blocked by the browser, so there are none anywhere
 * in the templates.
 */

.u-relative { position: relative; }
.u-ml-auto { margin-left: auto; }
.u-mt-2 { margin-top: var(--space-2); }
.u-mt-3 { margin-top: var(--space-3); }
.u-mt-6 { margin-top: var(--space-6); }
.u-m-0 { margin: 0; }
.u-text-left { text-align: left; }
.u-pointer { cursor: pointer; }

/* Element-qualified for the same specificity reason as .toolbar__search. */
.u-w-110, input.u-w-110, select.u-w-110 { width: 110px; }
.u-w-130, input.u-w-130, select.u-w-130 { width: 130px; }
.u-w-140, input.u-w-140, select.u-w-140 { width: 140px; }
.u-w-150, input.u-w-150, select.u-w-150 { width: 150px; }
.u-w-160, input.u-w-160, select.u-w-160 { width: 160px; }
.u-w-180, input.u-w-180, select.u-w-180 { width: 180px; }
.u-w-240 { max-width: 240px; }
.u-w-520 { max-width: 520px; }
.u-w-860 { max-width: 860px; }
.u-h-26, input.u-h-26 { height: 26px; }

/* A select that sits inside another control and borrows its chrome. */
.u-bare-select,
select.u-bare-select {
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    background: none;
}

/* A button that has to look exactly like a menu row. */
.u-menu-button {
    width: 100%;
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.u-avatar-button { padding-left: var(--space-1); }
.u-anchor-right { right: 0; top: 36px; }

.u-flush { border: 0; }
.u-flush-scroll { border: 0; border-radius: 0; max-height: 560px; }
.u-danger-border { border-color: var(--red-border); }

/* A list of reasons inside an alert — year end names every blocker at once,
   because finding them one at a time is the slowest way to close a year. */
.alert__list {
    margin: var(--space-1) 0 0;
    padding-left: var(--space-4);
}

.alert__list li { margin-top: 2px; }

.u-card-head-flush { padding: var(--space-4) var(--space-4) 0; margin-bottom: var(--space-3); }
.u-card-head-tight { padding: var(--space-4) var(--space-4) var(--space-3); }
.u-empty-tight { padding: var(--space-8) var(--space-4); }

/* ========================================================== line items ====
 * docs/design/refs/stock-screens.md — the grid IS the borders, so an editor
 * fills its cell and focus is drawn inset. Nothing ever reflows while typing.
 */

.u-mb-2 { margin-bottom: var(--space-2); }
.u-mb-4 { margin-bottom: var(--space-4); }

.lineitems td { padding: 0; }
.lineitems td:first-child { padding-left: var(--space-3); }
.lineitems .lineitems__no { width: 40px; color: var(--fg-faint); font-size: var(--text-sm); }

.lineitems td input,
.lineitems td select {
    width: 100%;
    height: calc(var(--row-height) - 1px);
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    padding: 0 var(--space-3);
}

.lineitems td input:focus,
.lineitems td select:focus {
    outline: 0;
    border: 0;
    box-shadow: inset 0 0 0 2px var(--accent);
}

.lineitems td input.dt__num { text-align: right; }
.lineitems tbody tr:hover { background: transparent; }

/* A row with nothing in it recedes, so the next empty row reads as an
   invitation rather than as data. */
.lineitems tr[data-line-row]:not(.is-filled) select:not(:focus),
.lineitems tr[data-line-row]:not(.is-filled) input:not(:focus) { color: var(--fg-faint); }

.lineitems [data-line-converted] { padding: 0 var(--space-3); white-space: nowrap; }

.dt__negative { color: var(--red); font-variant-numeric: tabular-nums; }


/* ========================================================== fulfilment ====
 * docs/design/refs/document-conversion.md — one bar over one figure, in four
 * placements. Widths are generated classes because our CSP forbids inline
 * styles (ADR-010).
 */

.fill { display: inline-flex; flex-direction: column; gap: 3px; min-width: 96px; }

.fill__bar {
    height: 3px;
    border-radius: 2px;
    background: var(--grey-100);
    overflow: hidden;
}

.fill__done { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.fill__text { font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--fg); }
.fill__total { color: var(--fg-faint); }

.fill--0 .fill__done, .fill__done.fill--0 { width: 0%; }
.fill--5 .fill__done, .fill__done.fill--5 { width: 5%; }
.fill--10 .fill__done, .fill__done.fill--10 { width: 10%; }
.fill--15 .fill__done, .fill__done.fill--15 { width: 15%; }
.fill--20 .fill__done, .fill__done.fill--20 { width: 20%; }
.fill--25 .fill__done, .fill__done.fill--25 { width: 25%; }
.fill--30 .fill__done, .fill__done.fill--30 { width: 30%; }
.fill--35 .fill__done, .fill__done.fill--35 { width: 35%; }
.fill--40 .fill__done, .fill__done.fill--40 { width: 40%; }
.fill--45 .fill__done, .fill__done.fill--45 { width: 45%; }
.fill--50 .fill__done, .fill__done.fill--50 { width: 50%; }
.fill--55 .fill__done, .fill__done.fill--55 { width: 55%; }
.fill--60 .fill__done, .fill__done.fill--60 { width: 60%; }
.fill--65 .fill__done, .fill__done.fill--65 { width: 65%; }
.fill--70 .fill__done, .fill__done.fill--70 { width: 70%; }
.fill--75 .fill__done, .fill__done.fill--75 { width: 75%; }
.fill--80 .fill__done, .fill__done.fill--80 { width: 80%; }
.fill--85 .fill__done, .fill__done.fill--85 { width: 85%; }
.fill--90 .fill__done, .fill__done.fill--90 { width: 90%; }
.fill--95 .fill__done, .fill__done.fill--95 { width: 95%; }
.fill--100 .fill__done, .fill__done.fill--100 { width: 100%; }

/* A document that produced or came from another. The 16px gutter glyph does
   the work two headings and a divider would otherwise do. */
.trail { display: flex; flex-direction: column; }

.trail__row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: 28px;
    font-size: var(--text-base);
}

.trail__dir { flex: none; width: 16px; text-align: center; color: var(--fg-faint); }
.trail__meta { margin-left: auto; font-size: var(--text-sm); color: var(--fg-subtle); }

/* The credit strip on a sales document. */
.credit-strip {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-card);
    font-size: var(--text-base);
    margin-bottom: var(--space-4);
}

.credit-strip--ok { background: var(--grey-50); color: var(--fg-muted); }
.credit-strip--near { background: var(--amber-bg); color: var(--amber); }
.credit-strip--over, .credit-strip--hold { background: var(--red-bg); color: var(--red); }
.credit-strip--cash_only { background: var(--blue-bg); color: var(--blue); }
.credit-strip__figure { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }

/* ============================================================== hub pages ===
 * Masters and Settings (docs/design/refs/navigation-and-scope.md).
 *
 * Grouped cards over a grid, ragged height by design — aligning the rows
 * across columns would mean padding the short groups with nothing.
 */

.hub {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--space-4);
    align-items: start;
}

.hub__group {
    padding: var(--space-3) 0 var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--bg-raised);
}

.hub__caption {
    margin: 0 0 var(--space-1);
    padding: 0 var(--space-4) var(--space-2);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fg-subtle);
}

.hub__row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    color: inherit;
    transition: background var(--t-fast) var(--ease);
}

.hub__row:hover { background: var(--grey-50); text-decoration: none; }
.hub__row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.hub__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-control);
    background: var(--grey-100);
    color: var(--fg-muted);
}

.hub__row:hover .hub__icon { background: var(--accent-soft); color: var(--accent); }

.hub__text { flex: 1 1 auto; min-width: 0; }

.hub__label {
    display: block;
    font-weight: 600;
    color: var(--fg);
}

.hub__blurb {
    display: block;
    margin-top: 1px;
    font-size: var(--text-sm);
    line-height: 1.4;
    color: var(--fg-subtle);
}

.hub__count {
    flex: none;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--fg-muted);
}

/* The chevron is the affordance, so it only firms up on approach. */
.hub__go { flex: none; color: var(--grey-300); }
.hub__row:hover .hub__go { color: var(--fg-muted); }

/* ======================================================= select dropdown ===
 * A native <select> draws its list with the operating system, which no
 * stylesheet can reach. select.js overlays this panel instead; the select
 * itself is untouched and still submits the form.
 */

.sel {
    position: fixed;
    z-index: 400;
    display: flex;
    flex-direction: column;
    max-height: 320px;
    padding: var(--space-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--bg-raised);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.sel__filter {
    flex: none;
    height: 30px;
    margin-bottom: var(--space-1);
}

.sel__list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    outline: none;
}

.sel__option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: 30px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-control);
    font-size: var(--text-base);
    color: var(--fg);
    cursor: pointer;
    white-space: nowrap;
}

.sel__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* One highlight, driven by the keyboard, so hovering the mouse and pressing
   Enter can never disagree about what is about to be chosen. */
.sel__option.is-active { background: var(--accent-soft); }
.sel__option.is-selected { font-weight: 600; }
.sel__option[aria-disabled="true"] { color: var(--fg-subtle); cursor: default; }

.sel__caption {
    padding: var(--space-2) var(--space-2) var(--space-1);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fg-subtle);
}

.sel__empty {
    padding: var(--space-3) var(--space-2);
    font-size: var(--text-sm);
    color: var(--fg-subtle);
}

/* ============================================================= calendar ===
 * datepicker.js. Our dates are dd-mm-yyyy text fields, so the input stays a
 * plain text box that anyone can type into and this sits beside it.
 */

.cal {
    position: fixed;
    z-index: 400;
    width: 248px;
    padding: var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--bg-raised);
    box-shadow: var(--shadow);
}

.cal__head {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
}

.cal__title {
    flex: 1 1 auto;
    text-align: center;
    font-size: var(--text-base);
    font-weight: 600;
}

.cal__nav {
    flex: none;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--fg-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.cal__nav:hover { background: var(--grey-100); color: var(--fg); }
.cal__nav:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.cal__days,
.cal__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.cal__days span {
    height: 22px;
    display: grid;
    place-items: center;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--fg-subtle);
}

.cal__day {
    height: 30px;
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--fg);
    font-size: var(--text-base);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.cal__day:hover { background: var(--grey-100); }
.cal__day:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Today is outlined, the selected day is filled — so "where am I" and "what
   did I choose" are never the same signal. */
.cal__day.is-today { box-shadow: inset 0 0 0 1px var(--border-strong); font-weight: 600; }

.cal__day.is-selected {
    background: var(--accent);
    color: #fff;
    font-weight: 600;
}

.cal__foot {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--hairline);
}

.cal__foot .btn { flex: 1 1 auto; justify-content: center; }

/* Live totals card (app/Views/partials/doc_totals.php).
   The card stays in the flow when empty so the form does not jump the moment a
   figure appears; only its wording swaps. */
.totals-card { max-width: 24rem; margin-left: auto; }
.totals-card__row { display: contents; }
.totals-card.is-empty .totals-card__kv { display: none; }
.totals-card:not(.is-empty) .totals-card__empty { display: none; }
.u-w-130 { width: 130px; }