/* Anka Billing — Editorial style (UI_VISUAL_SPEC.md + UI_DASHBOARD_SPEC.md v2).
   Serif tabular figures for every number; sans for everything else. One
   accent. Hairline borders. Status is coloured text, never a filled chip.
   Sentence case. Two weights only (400, 500). */

:root {
    --accent: #2E5AAC;
    --ink: #1A1A1A;
    --ink-muted: #5B5F66;
    --bg: #FFFFFF;
    --border: #E4E4E7;

    --green: #1E7B34;
    --blue: #2E5AAC;

    /* A light blue drawn from the accent — used for the owner tiles' edge, so
       they read as a set without the border competing with the figures. */
    --accent-border: #C3D4EE;
    --accent-border-strong: #9DB8E2;
    --accent-surface: #EEF2FA;

    /* Amber — amendment 1 (lighter than the original mock). */
    --amber-surface: #FDF6EB;
    --amber-border: #EFE0C6;
    --amber-text: #8A5308;
    --amber-figure: #B4700F;

    /* Elevation — amendment 2, scoped exception to "no shadows" (§1). Only
       used where explicitly listed: pipeline tiles, the need-action block,
       and the three page-level card containers. */
    --elevation-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-weight: 400;
    line-height: 1.5;
}

.figure {
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
}

h1, h2, h3 { font-weight: 500; margin: 0; }

a { color: inherit; text-decoration: none; }

/* ---- top nav --------------------------------------------------------- */

.nav {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 1rem 2rem;
    border-bottom: 0.5px solid var(--border);
}

.nav .brand {
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    font-size: 1.25rem;
    font-weight: 500;
    margin-right: auto;
}

.nav .links { display: flex; gap: 1.5rem; }

.nav .links a {
    color: var(--ink-muted);
    font-size: 0.9375rem;
}

.nav .links a.active {
    color: var(--accent);
    font-weight: 500;
}

.nav .user {
    color: var(--ink-muted);
    font-size: 0.875rem;
}

/* ---- page --------------------------------------------------------- */

.page {
    max-width: 72rem;
    margin: 0 auto;
    padding: 2rem;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.page-header h1 {
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    font-size: 2rem;
}

.page-header .month-sub {
    color: var(--ink-muted);
    font-size: 0.9375rem;
    margin-top: 0.375rem;
}

.month-state {
    font-size: 0.9375rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    text-align: right;
}

.month-state.open { color: var(--green); }
.month-state.locked { color: var(--ink-muted); }

.lock-action {
    display: block;
    margin-left: auto;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
}

.lock-action[disabled] {
    background: var(--border);
    color: var(--ink-muted);
    cursor: not-allowed;
}

/* ---- needs-action block (elevated, amber) --------------------------- */

.needs-action {
    background: var(--amber-surface);
    border: 0.5px solid var(--amber-border);
    border-radius: 8px;
    box-shadow: var(--elevation-shadow);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

.needs-action .count {
    font-size: 2.25rem;   /* large enough that AA "large text" applies to --amber-figure */
    color: var(--amber-figure);
    margin-right: 0.5rem;
}

.needs-action .label {
    font-size: 1.125rem;
    color: var(--amber-text);
    font-weight: 500;
}

.needs-action .sub {
    display: block;
    margin-top: 0.25rem;
    color: var(--amber-text);
    font-size: 0.875rem;
}

/* ---- queue (page-level card container, elevated; rows inside are not) */

.queue-card {
    background: #fff;
    border: 0.5px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--elevation-shadow);
    margin-bottom: 2rem;
    overflow: hidden;
}

.queue-columns {
    display: grid;
    grid-template-columns: 2fr 0.5fr 1fr 1fr 1fr 1.25fr 1fr 1.4fr;
    gap: 0.75rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
    border-bottom: 0.5px solid var(--border);
}

.queue-group-header {
    padding: 0.5rem 1.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ink-muted);
    background: #FAFAFA;
    border-bottom: 0.5px solid var(--border);
}

.queue-row {
    display: grid;
    grid-template-columns: 2fr 0.5fr 1fr 1fr 1fr 1.25fr 1fr 1.4fr;
    gap: 0.75rem;
    align-items: center;
    padding: 0.875rem 1.25rem;
    border-bottom: 0.5px solid var(--border);
}

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

.queue-row:hover { background: #FAFAFA; }

.queue-row a.row-link {
    position: absolute;
    inset: 0;
}

.queue-row { position: relative; }

.queue-row:focus-within { outline: 2px solid var(--accent); outline-offset: -2px; }

.client-name { font-weight: 500; }
.client-code { color: var(--ink-muted); font-size: 0.8125rem; margin-left: 0.375rem; }

.owner-name { color: var(--ink-muted); font-size: 0.875rem; }

.status-word { font-size: 0.9375rem; font-weight: 500; }
.status-not_started { color: var(--ink-muted); }
.status-sent_back { color: var(--amber-text); }
.status-blocked { color: var(--amber-text); }
.status-submitted { color: var(--blue); }
.status-ops_approved { color: var(--amber-text); }
.status-finance_approved { color: var(--green); }

.next-action { font-size: 0.875rem; color: var(--ink-muted); }

.age-label {
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    font-variant-numeric: tabular-nums;
    font-size: 0.875rem;
    color: var(--ink-muted);   /* age is a pressure signal, not an SLA breach — never red */
}

.why-label { color: var(--ink-muted); font-size: 0.8125rem; font-style: italic; }

/* ---- pipeline strip: individually elevated tiles with gaps ------------ */

.pipeline-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.pipeline-strip.neutral-row { margin-bottom: 2rem; }

.pipeline-tile {
    border-radius: 8px;
    border: 0.5px solid var(--border);
    box-shadow: var(--elevation-shadow);
    background: #fff;
    padding: 1rem 1.25rem;
}

.pipeline-tile.amber {
    background: var(--amber-surface);
    border-color: var(--amber-border);
}

.pipeline-tile .count {
    font-size: 1.75rem;
    display: block;
}

.pipeline-tile.amber .count { color: var(--amber-figure); }
.pipeline-tile:not(.amber) .count { color: var(--ink); }

.pipeline-tile .label {
    font-size: 0.9375rem;
    font-weight: 500;
    margin-top: 0.25rem;
}

.pipeline-tile.amber .label { color: var(--amber-text); }

.pipeline-tile .sub {
    display: block;
    font-size: 0.8125rem;
    color: var(--ink-muted);
    margin-top: 0.125rem;
}

.pipeline-tile.amber .sub { color: var(--amber-text); }

/* ---- panels: Outstanding queue (above) + Ownership -------------------- */

.panels-heading {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
    margin-bottom: 0.75rem;
}

.ownership-card {
    background: #fff;
    border: 0.5px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--elevation-shadow);
    padding: 0.5rem 1.25rem;
}

.ownership-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 0;
    border-bottom: 0.5px solid var(--border);
}

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

.ownership-name { flex: 1; font-weight: 500; }

.ownership-outstanding {
    font-size: 1.125rem;
    color: var(--amber-figure);
    white-space: nowrap;
}

.ownership-outstanding .label {
    font-family: -apple-system, "Segoe UI", Arial, sans-serif;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--amber-text);
    margin-left: 0.25rem;
}

.ownership-bar-wrap { flex: 1.5; }

.ownership-complete {
    font-size: 0.8125rem;
    color: var(--ink-muted);
    display: block;
    margin-bottom: 0.25rem;
}

.ownership-bar {
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
}

.ownership-bar-fill {
    height: 100%;
    background: var(--accent);
}

/* ---- conservation line -------------------------------------------- */

.conservation {
    font-size: 0.8125rem;
    color: var(--ink-muted);
    margin: 0.75rem 0 1.5rem;
}

.conservation.discrepancy {
    color: var(--amber-text);
    font-weight: 500;
}

/* ---- misc -------------------------------------------------------- */

.money { font-size: 1rem; }
.section-gap { margin-top: 2rem; }

.two-col {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

/* ==== client entry screen (UI_VISUAL_SPEC §3) ========================= */

.back-link {
    display: inline-block;
    color: var(--ink-muted);
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
}
.back-link:hover { color: var(--accent); }

.client-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

.client-header h1 {
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    font-size: 1.875rem;
}

.client-header .client-code-big {
    color: var(--ink-muted);
    font-size: 1.125rem;
    margin-left: 0.5rem;
}

.client-header .meta {
    color: var(--ink-muted);
    font-size: 0.9375rem;
    margin-top: 0.375rem;
}

.client-total {
    text-align: right;
    white-space: nowrap;
}

.client-total .amount {
    font-size: 2rem;
    display: block;
}

.client-total .caption {
    font-size: 0.8125rem;
    color: var(--ink-muted);
}

/* working-days bar — accent-tinted, per §3 */
.working-days-bar {
    background: #F4F7FC;
    border: 0.5px solid #D8E2F2;
    border-radius: 8px;
    padding: 0.875rem 1.25rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.working-days-bar label { font-size: 0.9375rem; font-weight: 500; }

.working-days-bar .hint {
    color: var(--ink-muted);
    font-size: 0.8125rem;
}

.working-days-bar input {
    width: 4.5rem;
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    font-variant-numeric: tabular-nums;
    font-size: 1rem;
    padding: 0.375rem 0.5rem;
    border: 0.5px solid var(--border);
    border-radius: 6px;
}

/* one card per billing line */
.line-card {
    background: #fff;
    border: 0.5px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--elevation-shadow);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
}

.line-card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1rem;
}

.line-card-title { font-size: 1.0625rem; font-weight: 500; }

.line-card-basis {
    color: var(--ink-muted);
    font-size: 0.875rem;
    margin-left: 0.5rem;
    font-weight: 400;
}

.line-card-amount {
    font-size: 1.25rem;
    white-space: nowrap;
}

.line-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    align-items: flex-end;
}

.field { display: flex; flex-direction: column; gap: 0.25rem; }

.field label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
}

.field input, .field textarea {
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    font-variant-numeric: tabular-nums;
    font-size: 0.9375rem;
    padding: 0.4375rem 0.625rem;
    border: 0.5px solid var(--border);
    border-radius: 6px;
    background: #fff;
}

.field input:focus, .field textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: -1px;
}

.field.wide { flex: 1; min-width: 16rem; }
.field.wide input {
    font-family: -apple-system, "Segoe UI", Arial, sans-serif;
    width: 100%;
}

.field-hint { font-size: 0.75rem; color: var(--ink-muted); }

.calc-note {
    margin-top: 0.875rem;
    font-size: 0.8125rem;
    color: var(--ink-muted);
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    font-variant-numeric: tabular-nums;
}

.period-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    align-items: flex-end;
    padding: 0.75rem 0;
    border-bottom: 0.5px solid var(--border);
}
.period-row:last-of-type { border-bottom: none; }

.add-period {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 0.875rem;
    cursor: pointer;
    padding: 0.5rem 0;
}

.section-head {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
    margin: 2rem 0 0.75rem;
}

.simple-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    background: #fff;
    border: 0.5px solid var(--border);
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.negative { color: #B3261E; }

/* fixed bottom action bar */
.action-bar {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 2rem;
    background: #fff;
    border-top: 0.5px solid var(--border);
    margin: 2rem -2rem 0;
}

.unsaved-flag {
    color: var(--amber-text);
    font-size: 0.875rem;
    margin-right: auto;
}

.unsaved-flag:empty { margin-right: auto; }

.btn {
    border-radius: 6px;
    padding: 0.5rem 1.125rem;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    border: 0.5px solid var(--border);
    background: #fff;
    color: var(--ink);
    font-family: inherit;
}

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.sealed-note {
    background: #FAFAFA;
    border: 0.5px solid var(--border);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    color: var(--ink-muted);
    font-size: 0.9375rem;
}

.locked-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 0.5px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--elevation-shadow);
    overflow: hidden;
}

.locked-table th {
    text-align: left;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
    font-weight: 400;
    padding: 0.625rem 1.25rem;
    border-bottom: 0.5px solid var(--border);
}

.locked-table td {
    padding: 0.75rem 1.25rem;
    border-bottom: 0.5px solid var(--border);
    font-size: 0.9375rem;
}

.locked-table tr:last-child td { border-bottom: none; }
.locked-table td.num { text-align: right; }

.locked-table tfoot td {
    font-weight: 500;
    border-top: 0.5px solid var(--border);
}

/* ==== governance screen (UI_VISUAL_SPEC §4) =========================== */

.gov-tabs {
    display: flex;
    gap: 1.5rem;
    border-bottom: 0.5px solid var(--border);
    margin-bottom: 1.75rem;
}

.gov-tabs a {
    padding: 0.5rem 0 0.75rem;
    font-size: 0.9375rem;
    color: var(--ink-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.gov-tabs a.active {
    color: var(--accent);
    font-weight: 500;
    border-bottom-color: var(--accent);
}

.gov-card {
    background: #fff;
    border: 0.5px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--elevation-shadow);
    margin-bottom: 1rem;
    overflow: hidden;
}

.gov-row {
    display: grid;
    grid-template-columns: 1.6fr 1.2fr 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 0.875rem 1.25rem;
    border-bottom: 0.5px solid var(--border);
}
.gov-row:last-child { border-bottom: none; }

.gov-row-head {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
    background: #FAFAFA;
}

.history-list {
    padding: 0.25rem 1.25rem 0.875rem 1.25rem;
    border-bottom: 0.5px solid var(--border);
    background: #FCFCFD;
}

.history-item {
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
    font-size: 0.8125rem;
    color: var(--ink-muted);
    padding: 0.1875rem 0;
}

.history-item .who { color: var(--ink); min-width: 9rem; }
.history-item .when {
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    font-variant-numeric: tabular-nums;
}
.history-item.is-current .who { font-weight: 500; }

.unassigned { color: var(--amber-text); font-weight: 500; }

.pill-status {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pill-status.live { color: var(--green); }
.pill-status.retired { color: var(--ink-muted); }
.pill-status.future { color: var(--accent); }

.inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    align-items: center;
    padding: 0.875rem 1.25rem;
    background: #FCFCFD;
    border-bottom: 0.5px solid var(--border);
}

.inline-form select,
.inline-form input {
    font-family: inherit;
    font-size: 0.875rem;
    padding: 0.4375rem 0.625rem;
    border: 0.5px solid var(--border);
    border-radius: 6px;
    background: #fff;
}

.inline-form input[type="number"],
.inline-form input[type="date"],
.inline-form input[type="month"] {
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    font-variant-numeric: tabular-nums;
}

.btn-sm {
    font-size: 0.8125rem;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    border: 0.5px solid var(--border);
    background: #fff;
    cursor: pointer;
    font-family: inherit;
}

.btn-sm.primary { background: var(--accent); border-color: var(--accent); color: #fff; }

.gov-intro {
    color: var(--ink-muted);
    font-size: 0.9375rem;
    margin-bottom: 1.25rem;
    max-width: 46rem;
}

.preview-table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.preview-table th, .preview-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 0.5px solid var(--border);
    font-size: 0.9375rem;
    text-align: left;
}
.preview-table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
    font-weight: 400;
}
.preview-table td.num { text-align: right; }

/* ==== statement / print view (blueprint §7) =========================== */

#printarea {
    background: #fff;
    max-width: 46rem;
    margin: 0 auto;
}

.stmt-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 0.5px solid var(--border);
    margin-bottom: 1.5rem;
}

.stmt-entity {
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    font-size: 1.125rem;
    font-weight: 500;
}

.stmt-meta { color: var(--ink-muted); font-size: 0.875rem; margin-top: 0.25rem; }

.stmt-client {
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    font-size: 1.5rem;
}

.stmt-total-box { text-align: right; white-space: nowrap; }
.stmt-total-box .amount { font-size: 1.75rem; display: block; }
.stmt-total-box .caption { font-size: 0.8125rem; color: var(--ink-muted); }

.stmt-provisional {
    background: var(--amber-surface);
    border: 0.5px solid var(--amber-border);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    color: var(--amber-text);
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

.stmt-lob { margin-bottom: 1.5rem; }

.stmt-lob-name {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
    padding-bottom: 0.375rem;
    border-bottom: 0.5px solid var(--border);
    margin-bottom: 0.25rem;
}

.stmt-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    padding: 0.5rem 0;
    align-items: baseline;
}

.stmt-item-label { font-size: 0.9375rem; }
.stmt-item-detail { color: var(--ink-muted); font-size: 0.8125rem; }

.stmt-item-amount {
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    font-variant-numeric: tabular-nums;
    font-size: 0.9375rem;
    text-align: right;
}

.stmt-subtotal {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    padding: 0.5rem 0 0;
    border-top: 0.5px solid var(--border);
    font-size: 0.875rem;
    color: var(--ink-muted);
}

.stmt-subtotal .figure { color: var(--ink); }

.stmt-grand {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--ink);
    font-size: 1.125rem;
    font-weight: 500;
    margin-top: 0.5rem;
}

/* Negatives read as negative: red AND a minus sign, never colour alone
   (colour is never the only carrier of meaning — §6 accessibility). */
.amount-negative { color: #B3261E; }

.stmt-adjustment-note {
    color: var(--ink-muted);
    font-size: 0.8125rem;
    font-style: italic;
}

.stmt-footer {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 0.5px solid var(--border);
    color: var(--ink-muted);
    font-size: 0.75rem;
}

@media print {
    /* Print/Save-as-PDF is first-class, not an afterthought (§7). */
    .no-print { display: none !important; }
    body { background: #fff; }
    .page { padding: 0; max-width: none; }
    #printarea { max-width: none; box-shadow: none; }
    .stmt-provisional {
        border: 1px solid #999;
        background: #fff;
        color: #000;
    }
    a { text-decoration: none; color: inherit; }
    .stmt-lob { break-inside: avoid; page-break-inside: avoid; }
    @page { margin: 18mm; }
}

/* ==== month picker (UI_DASHBOARD_SPEC §5 — [month] in the top bar) ===== */

.month-picker {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    margin-right: 1.25rem;
}

.month-picker label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
}

.month-picker select {
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    font-variant-numeric: tabular-nums;
    font-size: 0.9375rem;
    padding: 0.3125rem 0.5rem;
    border: 0.5px solid var(--border);
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
}

.month-picker select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* Clients directory. Only two rules are new here: everything else reuses
   .locked-table, .status-*, and .unassigned, so this screen inherits the
   same status vocabulary as the dashboard rather than growing its own. */
.client-lifecycle {
    color: var(--ink-muted);
    font-size: 0.875rem;
}
.client-lifecycle::before { content: "— "; }

.client-note-amber {
    background: var(--amber-surface);
    border: 0.5px solid var(--amber-border);
    color: var(--amber-text);
    border-radius: 8px;
    padding: 0.75rem 1.25rem;
    margin: 0 0 1.5rem;
    font-size: 0.9375rem;
}
.client-note-amber a { color: var(--amber-text); }

/* Divergence checker (§4A.3). The alarm is the one legitimately red thing
   on the dashboard: it means a sealed month no longer recomputes to what
   was sealed, which outranks every routine pressure signal. */
.divergence-alarm {
    background: #FBEDEC;
    border: 0.5px solid #E7C4C1;
    color: #B3261E;
    border-radius: 8px;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1.5rem;
    font-size: 0.9375rem;
}
.divergence-alarm a { color: #B3261E; font-weight: 500; }

.divergence-bad { color: #B3261E; }
.divergence-ok { color: var(--green); }

.divergence-line {
    border-left: 3px solid var(--border);
    padding: 0.25rem 0 0.25rem 1rem;
    margin: 0.75rem 0;
}
.divergence-line.unexplained { border-left-color: #B3261E; }
.divergence-line.explained { border-left-color: var(--green); }

.divergence-ruling {
    color: var(--ink-muted);
    font-size: 0.875rem;
    margin: 0.25rem 0 0;
}

/* Projected / billed columns on the queue row. Tabular figures so the two
   money columns line up down the page and can be compared at a glance —
   which is the entire reason they sit next to each other. */
.queue-row .num, .queue-columns .num { text-align: right; }
.figure-sm {
    font-variant-numeric: tabular-nums;
    font-size: 0.9375rem;
}
.muted-dash { color: var(--ink-muted); }
.unpriced-flag { color: var(--amber-text); cursor: help; }

/* Owner reduced to initials: at 20 rows the full names cost more width than
   they earn, and the row is already identified by the client. Full name
   stays in the title attribute. */
.owner-name { cursor: default; }
.unpriced-note { color: var(--amber-text); cursor: help; }

/* ---- Dashboard board layout ------------------------------------------
   Replaces the twenty-row grid with a short "Outstanding" list beside an
   ownership panel. The list carries only what needs action, because a
   twenty-row table buries the six rows that matter among fourteen that
   are already done. */

.close-badge {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.75rem;
    background: var(--ink);
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 0.3rem 0.6rem;
    border-radius: 5px;
}
.close-badge.overdue { background: #B3261E; }

.tile-strip {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    border: 0.5px solid var(--border);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    margin-bottom: 1.75rem;
}

.tile {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 1rem 1.125rem;
    border-right: 0.5px solid var(--border);
}
.tile:last-child { border-right: none; }
.tile .count { font-size: 1.75rem; line-height: 1.1; }
.tile .label { font-size: 0.875rem; font-weight: 500; }
.tile .sub { font-size: 0.75rem; color: var(--ink-muted); line-height: 1.35; }

/* Only the two tiles that represent work nobody has picked up get colour.
   Colouring all six would make none of them mean anything. */
.tile.urgent { background: var(--amber-surface); }
.tile.urgent .count, .tile.urgent .label { color: var(--amber-text); }
.tile.bad .count { color: #B3261E; }
.tile.done .count { color: var(--ink-muted); }

.board {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

.board-card {
    background: #fff;
    border: 0.5px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--elevation-shadow);
    overflow: hidden;
}

.board-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.875rem 1.25rem;
    border-bottom: 0.5px solid var(--border);
}
.board-head h2 { font-size: 1rem; font-weight: 500; margin: 0; }
.board-meta { font-size: 0.75rem; color: var(--ink-muted); }
.board-empty { padding: 1.5rem 1.25rem; color: var(--ink-muted); margin: 0; }

.board-group {
    padding: 0.5rem 1.25rem;
    background: #FAFAFA;
    border-bottom: 0.5px solid var(--border);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--amber-text);
}

.task {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 0.5px solid var(--border);
}
.task:last-child { border-bottom: none; }

.task-title { margin-bottom: 0.15rem; }
.task-owner { font-size: 0.8125rem; color: var(--ink-muted); margin-bottom: 0.5rem; }
.task-actions { display: flex; gap: 0.5rem; align-items: center; }

.task-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    text-align: right;
    white-space: nowrap;
}
.task-figures {
    font-size: 0.8125rem;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}
.task-side .why-label { font-size: 0.75rem; max-width: 18rem; white-space: normal; }

/* Buttons on a row are small and quiet; the one that advances the workflow
   is the only one that carries the accent. */
a.btn-sm, .task-actions .btn-sm {
    display: inline-block;
    font-size: 0.8125rem;
    padding: 0.3rem 0.7rem;
    border: 0.5px solid var(--border);
    border-radius: 5px;
    background: #fff;
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
}
a.btn-sm:hover, .task-actions .btn-sm:hover { background: #FAFAFA; }
.btn-go { border-color: var(--accent); color: var(--accent); font-weight: 500; }

.owner-block { padding: 0.875rem 1.25rem; border-bottom: 0.5px solid var(--border); }
.owner-block:last-child { border-bottom: none; }
.owner-line { display: flex; justify-content: space-between; align-items: baseline; }
.owner-ratio { font-size: 0.9375rem; }
.owner-detail { font-size: 0.75rem; color: var(--ink-muted); margin: 0.15rem 0 0.5rem; }
.owner-warn { font-size: 0.75rem; color: var(--amber-text); margin-top: 0.5rem; }

/* ---- Board polish, matching Sanjiv's mockup --------------------------
   The structure was right but the styling was undersized and undifferentiated:
   every group header the same amber, every button the same grey, tiles too
   short to read at a glance. These override the earlier board rules. */

/* Brand and nav: the wordmark carries weight, the rule under the nav sets
   the page off from it. */
.nav { padding: 1.125rem 2.5rem; }
.nav .brand { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; }
.brand-soft { font-weight: 400; color: var(--ink-muted); }
.nav .links a.active {
    color: var(--accent);
    border-bottom: 2px solid var(--accent);
    padding-bottom: 0.35rem;
}

.page { max-width: 76rem; padding: 2.25rem 2.5rem; }
.page-header h1 { font-size: 2.25rem; letter-spacing: -0.01em; }
.page-header .month-sub { font-size: 0.9375rem; margin-top: 0.5rem; }
.page-header .month-sub strong { color: var(--ink); }
.month-sub .money { color: var(--ink); font-weight: 500; }

.close-badge {
    font-size: 0.8125rem;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    position: relative;
    top: -0.35rem;
}

/* Tiles: tall enough that the figure is the thing you see first. */
.tile-strip { margin-bottom: 2rem; }
.tile { padding: 1.375rem 1.375rem 1.5rem; gap: 0.3rem; }
.tile .count { font-size: 2.25rem; font-weight: 400; letter-spacing: -0.02em; }
.tile .label { font-size: 0.9375rem; font-weight: 600; }
.tile .sub { font-size: 0.8125rem; }

/* Colour carries meaning: amber = nobody has started, red = stuck on the
   client, grey = finished. The middle of the chain stays plain ink, because
   work moving through review is not a problem. */
.tile.urgent .count { color: var(--amber-text); }
.tile.urgent .label { color: var(--amber-text); }
.tile.bad .count, .tile.bad .label { color: #B3261E; }
.tile.done .count, .tile.done .label { color: var(--ink-muted); }

/* Group headers: red where the row is stuck, grey where it is simply
   moving. Making all three amber, as before, meant none of them read as
   more urgent than the others. */
.board-group {
    padding: 0.6rem 1.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--ink-muted);
    background: #FBFBFB;
}
.board-group.stuck { color: #B3261E; }
.board-group.waiting { color: var(--amber-text); }

.board-head { padding: 1rem 1.25rem; }
.board-head h2 { font-size: 1.0625rem; font-weight: 600; }

.task { padding: 1rem 1.25rem; }
.task .client-name { font-weight: 600; font-size: 0.9375rem; }
.task-owner { font-size: 0.8125rem; margin-bottom: 0.625rem; }

/* A coloured dot ahead of the status word: the colour is the fast signal,
   the word is the confirmation. Never colour alone. */
.status-word::before {
    content: "● ";
    font-size: 0.7em;
    vertical-align: 0.15em;
}
.task-side .status-word { font-weight: 600; font-size: 0.875rem; }
.task-side .age-label { font-size: 0.8125rem; }

/* One primary action per row in the accent, everything else quiet. The old
   rules gave every button the same grey border, so nothing said "this is
   the thing to click". */
a.btn-sm, .task-actions .btn-sm {
    font-size: 0.8125rem;
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
}
.btn-go, a.btn-lead {
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 500;
}
.btn-go:hover, a.btn-lead:hover { background: #F4F7FD; }

/* Ownership: a real bar, thick enough to read across the room. */
.ownership-bar-wrap {
    flex: none;
    height: 6px;
    background: #EEE;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 0.125rem;
}
.ownership-bar-fill { background: var(--accent); border-radius: 3px; }
.ownership-name { font-weight: 600; font-size: 0.9375rem; }
.owner-ratio { font-size: 1rem; font-weight: 500; }
.owner-block { padding: 1rem 1.25rem; }

/* The accent rules above lost to `.task-actions .btn-sm` on specificity, so
   every button rendered the same grey and no row said which action was the
   point of it. Matching the specificity rather than reaching for !important. */
.task-actions .btn-go,
.task-actions .btn-lead,
.task-actions a.btn-lead,
.task-actions button.btn-go {
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 500;
}
.task-actions .btn-go:hover,
.task-actions .btn-lead:hover { background: #F4F7FD; }

/* Month operations — carry forward, bulk approve, reopen. Deliberately quiet:
   these sit below the board's own figures and must not compete with them. */
.month-ops {
    margin: 1.25rem 0;
    border: 0.5px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.month-ops .inline-form:last-child { border-bottom: none; }

.board-note {
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: var(--amber-surface, #FDF6EB);
    border: 0.5px solid var(--amber-border, #EFE0C6);
    color: var(--amber-text, #8A5308);
    font-size: 0.9375rem;
}

.unlock-form { display: flex; gap: 0.5rem; align-items: center; justify-content: flex-end; }
.unlock-form input[type="text"] {
    font-family: inherit; font-size: 0.875rem; padding: 0.375rem 0.625rem;
    border: 0.5px solid var(--border); border-radius: 6px; width: 11rem;
}

/* Editing on a reference screen sits behind a toggle, closed by default. A form
   open on every row states an intention nobody has formed — a prefilled month
   against forty live rates reads as though each were already scheduled to
   change, which is exactly how the rate card was misread. */
.row-edit { margin-top: 0.375rem; }
.row-edit > summary {
    cursor: pointer;
    font-size: 0.8125rem;
    color: var(--accent);
    list-style: none;
    display: inline-block;
    padding: 0.125rem 0;
    user-select: none;
}
.row-edit > summary::-webkit-details-marker { display: none; }
.row-edit > summary::before { content: "▸ "; font-size: 0.75rem; }
.row-edit[open] > summary::before { content: "▾ "; }
.row-edit > summary:hover { text-decoration: underline; }
.row-edit .inline-form { border-radius: 6px; margin-top: 0.375rem; }
.row-edit .inline-form:last-child { border-bottom: none; }

.card-add { padding: 0 1.25rem 0.875rem; }

/* Vs-previous-month. The old app's whole "trend" reduced to this comparison,
   so it lives on the board rather than as a screen of its own. */
.compare-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 0.875rem 1.25rem;
    margin-bottom: 1rem;
    background: #fff;
    border: 0.5px solid var(--border);
    border-radius: 8px;
}
.compare-strip .label {
    color: var(--ink-muted);
    font-size: 0.8125rem;
    margin: 0 0.375rem;
}
.compare-amount { font-size: 1.25rem; }
.compare-delta .figure.up { color: var(--good, #1D6F42); }
.compare-delta .figure.down { color: var(--bad, #A8362B); }

/* Q&A — the discussion about why a figure is what it is, kept beside it. */
.qa-message {
    padding: 0.625rem 0.875rem;
    border-left: 2px solid var(--border);
    margin-bottom: 0.5rem;
    background: #FCFCFD;
    border-radius: 0 6px 6px 0;
}
.qa-message > div:last-child { margin-top: 0.25rem; white-space: pre-wrap; }
.qa-dot {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.0625rem 0.4375rem;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 600;
}
.qa-form { margin-top: 0.75rem; }
.qa-form textarea {
    width: 100%;
    font-family: inherit;
    font-size: 0.9375rem;
    padding: 0.5rem 0.625rem;
    border: 0.5px solid var(--border);
    border-radius: 6px;
    resize: vertical;
}
.qa-recipients {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin: 0.5rem 0;
}

/* A person's book. Reached by clicking an owner's name anywhere it appears. */
.lob-chip {
    display: inline-block;
    padding: 0.1875rem 0.5rem;
    margin: 0 0.375rem 0.375rem 0;
    border: 0.5px solid var(--border);
    border-radius: 999px;
    font-size: 0.8125rem;
    color: var(--ink-muted);
    background: #fff;
}
.task-owner a, .ownership-name a { color: inherit; text-decoration: none; }
.task-owner a:hover, .ownership-name a:hover { color: var(--accent); text-decoration: underline; }

/* The audit table has five columns, not the four .gov-row assumes — reusing
   that grid dropped "Change" onto a second line. Given its own grid rather
   than widening .gov-row, which every other governance table depends on. */
.audit-row {
    grid-template-columns: 10rem 9rem 1fr 6rem 1.4fr;
}
@media (max-width: 900px) {
    .audit-row { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* ---- Owner tiles -----------------------------------------------------------
   One raised tile per hub leader; the whole surface is the link to their book.
   Elevation is a scoped exception in this design language — these were asked
   for specifically, so they extend the pipeline tiles rather than drift from
   them. The depth is carried by two stacked shadows (a tight contact shadow
   plus a soft ambient one) rather than a single blur, which is what stops it
   reading as a flat grey halo; hover lifts, and :active genuinely presses back
   down, because a tile that only ever rises doesn't feel like a button. */
.owner-tiles {
    display: grid;
    gap: 0.75rem;
    padding: 0.875rem;
}

.owner-tile {
    display: block;
    padding: 0.875rem 1rem;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--accent-border);
    text-decoration: none;
    color: inherit;
    box-shadow:
        0 1px 1px rgba(20, 32, 48, 0.05),
        0 2px 6px -2px rgba(20, 32, 48, 0.09);
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.owner-tile:hover {
    transform: translateY(-2px);
    border-color: var(--accent-border-strong);
    box-shadow:
        0 2px 3px rgba(20, 32, 48, 0.06),
        0 10px 20px -6px rgba(20, 32, 48, 0.16);
}

/* Pressed: the shadow collapses to a contact line, but the tile does NOT move.
   The hover lift is applied before the press and stays put for its duration, so
   the element's geometry never changes between mousedown and mouseup — a tile
   that shifts under the cursor mid-click can deliver the two halves of the click
   to different elements, and the whole point of this tile is that clicking
   anywhere on it works. Depth is carried by the shadow alone here. */
.owner-tile:active {
    box-shadow: 0 1px 1px rgba(20, 32, 48, 0.12);
}

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

/* The one genuinely behind reads as such without colour doing the work alone —
   the warning line below spells it out. */
.owner-tile.is-behind { border-left: 3px solid var(--amber-figure); }

.owner-tile-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.owner-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--accent-surface);
    color: var(--accent);
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    flex: none;
}

.owner-tile-name { flex: 1; font-weight: 600; font-size: 0.9375rem; }

.owner-tile-foot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    margin-top: 0.375rem;
}

.owner-billed { font-size: 0.875rem; white-space: nowrap; }

/* Motion is decoration here; anyone who has asked for less should not get it. */
@media (prefers-reduced-motion: reduce) {
    .owner-tile { transition: none; }
    .owner-tile:hover { transform: none; }
}