/* ==========================================================================
   Finance Nexus — Slate Monogram static stylesheet.

   spec: guided_tax_journey_2026-08-10.md §6.1 + AD-10 (static-first
   front end, dispatcher 2026-08-10): ONE committed hand-written
   stylesheet, no build step, no Tailwind dependency for the journey
   surfaces. Token values are binding per docs/design/handoff.md §3;
   typography per §4; primitives per §5; cross-cutting rules per §8
   (2px corners, hairline borders, dot statuses, tnum numerics).

   The Tailwind Play CDN remains loaded for LEGACY pages only (its
   removal is Phase 4); nothing in this file or the surfaces styled by
   it depends on the CDN.
   ========================================================================== */

/* --- Design tokens (handoff §3) — single source of truth. ------------- */
:root {
    --fn-slate:    #1C3D5A;
    --fn-slate-2:  #142D44;
    --fn-steel:    #3A6B8C;
    --fn-steel-2:  #5A8AAE;
    --fn-ink:      #0F1620;
    --fn-body:     #2A3340;
    --fn-muted:    #6B7685;
    --fn-rule:     #E5E8EC;
    --fn-rule-2:   #F1F3F6;
    --fn-fog:      #F5F6F8;
    --fn-paper:    #FAFAF7;
    --fn-brass:    #D4B896;
    --fn-ochre:    #B8824A;
    --fn-gain:     #2B6B4F;
    --fn-loss:     #9B3340;

    --fn-sans:  'Inter', system-ui, sans-serif;
    --fn-serif: 'IBM Plex Serif', serif;
    --fn-mono:  'JetBrains Mono', ui-monospace, monospace;
}

/* --- Preflight subset (what the markup was designed against) -------------
   Element-level reset mirroring the Tailwind preflight the pages have
   always rendered under. MUST stay at the top of the file: preflight
   rules like ``[type='button'] { background-color: transparent }``
   share (0,1,0) specificity with single-class primitives such as
   ``.fn-btn--primary`` — the primitives must come later in the cascade
   to win, exactly as Tailwind orders preflight before components.
   spec: guided_tax_journey_2026-08-10.md §9 Phase 4 D4.3 / AD-10. */
*, ::before, ::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: var(--fn-rule);
}
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; }
ol, ul { list-style: none; margin: 0; padding: 0; }
img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
button, input, optgroup, select, textarea {
    font-family: inherit; font-size: 100%; font-weight: inherit;
    line-height: inherit; color: inherit; margin: 0; padding: 0;
}
button, select { text-transform: none; }
button, [type='button'], [type='reset'], [type='submit'] {
    -webkit-appearance: button; background-color: transparent;
    background-image: none; cursor: pointer;
}
a { color: inherit; text-decoration: inherit; }
table { text-indent: 0; border-color: inherit; border-collapse: collapse; }
summary { display: list-item; }

/* --- Small shared utilities ------------------------------------------- */
.fn-eyebrow {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--fn-muted);
}
.fn-stack > * + * { margin-top: 0.5rem; }

/* --- Button (handoff §5) ------------------------------------------------ */
.fn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 2px;
    border: 1px solid transparent;
    font-family: var(--fn-sans);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    padding: 0.625rem 1rem;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.fn-btn:disabled { opacity: .5; cursor: not-allowed; }
.fn-btn--primary { background: var(--fn-slate); color: #fff; }
.fn-btn--primary:hover { background: var(--fn-slate-2); }
.fn-btn--secondary {
    background: #fff;
    color: var(--fn-body);
    border-color: var(--fn-rule);
}
.fn-btn--secondary:hover { border-color: var(--fn-slate); color: var(--fn-ink); }
.fn-btn--ghost { background: transparent; color: var(--fn-body); }
.fn-btn--ghost:hover { color: var(--fn-slate); }
.fn-btn--danger { background: var(--fn-loss); color: #fff; }
.fn-btn--danger:hover { opacity: .9; }
.fn-btn--sm { font-size: 12px; padding: 0.375rem 0.75rem; }

/* --- Status chip: dot + label, never a filled pill (handoff §5) --------- */
.fn-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 11.5px;
    color: var(--fn-body);
    white-space: nowrap;
}
.fn-chip__dot {
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: var(--fn-muted);
    flex-shrink: 0;
}
.fn-chip--active   .fn-chip__dot { background: var(--fn-gain); }
.fn-chip--attention .fn-chip__dot { background: var(--fn-ochre); }
.fn-chip--loss     .fn-chip__dot { background: var(--fn-loss); }
.fn-chip--neutral  .fn-chip__dot { background: var(--fn-muted); }

/* --- TypeTag (handoff §5): tracked uppercase, hairline, no fill --------- */
.fn-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.375rem;
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border: 1px solid var(--fn-rule);
    border-radius: 2px;
    color: var(--fn-muted);
}

/* --- KPICard (handoff §5) ---------------------------------------------- */
.fn-kpi {
    background: #fff;
    border: 1px solid var(--fn-rule);
    border-radius: 2px;
    padding: 1.25rem;
}
.fn-kpi__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}
.fn-kpi__delta { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--fn-muted); }
.fn-kpi__delta--gain { color: var(--fn-gain); }
.fn-kpi__delta--loss { color: var(--fn-loss); }
.fn-kpi__delta--attention { color: var(--fn-ochre); }
.fn-kpi__rule { height: 1px; background: var(--fn-rule); margin-bottom: 0.75rem; }
.fn-kpi__value {
    font-family: var(--fn-serif);
    font-size: 28px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--fn-ink);
}
.fn-kpi__hint { font-size: 11.5px; color: var(--fn-muted); margin-top: 0.5rem; }
.fn-kpi__hint a { color: var(--fn-slate); text-decoration: none; }
.fn-kpi__hint a:hover { color: var(--fn-slate-2); text-decoration: underline; }
.fn-kpi-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-bottom: 2rem;
}

/* --- PageHeader (handoff §5) ------------------------------------------- */
.fn-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.fn-page-header__crumbs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 11px;
    color: var(--fn-muted);
    margin-bottom: 0.5rem;
}
.fn-page-header__crumbs a { color: inherit; text-decoration: none; }
.fn-page-header__crumbs a:hover { color: var(--fn-slate); }
.fn-page-header__crumbs .is-current { color: var(--fn-body); }
.fn-page-header__eyebrow { margin-bottom: 0.5rem; color: var(--fn-ochre); }
.fn-page-header__title {
    font-family: var(--fn-serif);
    font-size: 30px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--fn-ink);
    margin: 0;
}
.fn-page-header__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* --- DataTable (handoff §5) -------------------------------------------- */
.fn-table-wrap {
    background: #fff;
    border: 1px solid var(--fn-rule);
    border-radius: 2px;
    overflow: hidden;
}
.fn-table { width: 100%; font-size: 13px; border-collapse: collapse; }
.fn-table thead { background: var(--fn-fog); }
.fn-table th {
    padding: 0.75rem 1rem;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fn-muted);
    text-align: left;
    border-bottom: 1px solid var(--fn-rule);
}
.fn-table th.is-right, .fn-table td.is-right { text-align: right; }
.fn-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--fn-rule-2);
    color: var(--fn-body);
}
.fn-table tr:last-child td { border-bottom: none; }
.fn-table .is-name { font-family: var(--fn-serif); font-size: 14px; color: var(--fn-ink); }
.fn-table .is-amount {
    font-family: var(--fn-serif);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* --- Toast (handoff §5): bottom-centre, dark-ink, optional Undo --------- */
.fn-toast-region {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
}
.fn-toast {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    background: var(--fn-ink);
    color: #fff;
    font-size: 13px;
    border-radius: 2px;
    padding: 0.625rem 1rem;
    box-shadow: 0 8px 24px rgba(15, 22, 32, 0.35);
}
.fn-toast__undo { color: var(--fn-brass); font-weight: 500; text-decoration: none; }
.fn-toast__undo:hover { text-decoration: underline; }
.fn-toast__close {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.6);
    display: inline-flex;
}
.fn-toast__close:hover { color: #fff; }

/* --- Work row (spec §6.3 / C10): title + ONE chip + ONE CTA ------------- */
.fn-work-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fff;
    border: 1px solid var(--fn-rule);
    border-radius: 2px;
    padding: 0.75rem 1rem;
}
.fn-work-row__main { min-width: 0; flex: 1; }
.fn-work-row__title {
    display: block;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--fn-ink);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
a.fn-work-row__title:hover { color: var(--fn-slate); }
.fn-work-row__sub {
    display: block;
    font-size: 12px;
    color: var(--fn-muted);
    margin-top: 0.125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fn-work-row__count {
    font-size: 11px;
    color: var(--fn-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.fn-work-row__cta { flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.375rem; }
/* Phase-12 reconciliation severity tints (numbers live in the drill-in). */
.fn-work-row--recon-block { background: rgba(155, 51, 64, 0.05); }
.fn-work-row--recon-warn  { background: rgba(184, 130, 74, 0.05); }

/* --- Deliverables board + close/reopen (spec §9 Phase 7 D7.1/D7.2) ------ */
.fn-work-row__actions {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.fn-board { margin-top: 1rem; }
.fn-close-controls {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.fn-dialog {
    border: 1px solid var(--fn-rule);
    border-radius: 2px;
    padding: 1.25rem 1.5rem;
    max-width: 34rem;
    width: calc(100% - 2rem);
    background: #fff;
    color: var(--fn-ink);
}
.fn-dialog::backdrop { background: rgba(31, 41, 51, 0.45); }
.fn-dialog__title {
    font-family: var(--fn-serif, Georgia, serif);
    font-size: 18px;
    margin-bottom: 0.5rem;
}
.fn-dialog__body { font-size: 13px; color: var(--fn-body); }
.fn-dialog__actions {
    margin-top: 1rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}
/* Reopen dependency tree (cascading-reversals rule: name everything). */
.fn-tree { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.fn-tree li {
    position: relative;
    padding: 0.375rem 0 0.375rem 1.25rem;
    font-size: 13px;
    color: var(--fn-body);
    border-left: 2px solid var(--fn-rule);
    margin-left: 0.375rem;
}
.fn-tree li::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 0.85rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--fn-loss);
}
.fn-tree__detail {
    display: block;
    font-size: 11.5px;
    color: var(--fn-muted);
    margin-top: 0.125rem;
}

/* --- Journey cards (spec §6.2) ------------------------------------------ */
.fn-card {
    background: #fff;
    border: 1px solid var(--fn-rule);
    border-radius: 2px;
    margin-bottom: 1.5rem;
}
.fn-card--fog { background: var(--fn-fog); }
.fn-card__header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
}
.fn-card__header--ruled { border-bottom: 1px solid var(--fn-rule-2); }
.fn-card__header-main { min-width: 0; flex: 1; }
.fn-card__title {
    font-family: var(--fn-serif);
    font-size: 18px;
    line-height: 1.3;
    color: var(--fn-ink);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fn-card__body { padding: 1rem; }
.fn-card__link {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--fn-slate);
    text-decoration: none;
    flex-shrink: 0;
}
.fn-card__link:hover { color: var(--fn-slate-2); }
.fn-icon-btn {
    background: none;
    border: none;
    padding: 0.375rem;
    cursor: pointer;
    color: var(--fn-muted);
    display: inline-flex;
}
.fn-icon-btn:hover { color: var(--fn-ink); }
.fn-icon-btn svg { transition: transform .15s ease; }
.fn-icon-btn.is-flipped svg { transform: rotate(180deg); }

/* The ONE elevated next action (dispatcher refinement #2). */
.fn-next-action {
    margin: 0 1rem 1rem;
    padding: 0.875rem 1rem;
    background: #fff;
    border: 1px solid var(--fn-rule);
    border-radius: 2px;
}
.fn-next-action__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.fn-next-action__title {
    font-size: 14px;
    font-weight: 500;
    color: var(--fn-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Plain secondary/completed list rows inside a card. */
.fn-card-list {
    list-style: none;
    margin: 0;
    padding: 0 1.25rem 0.75rem;
}
.fn-card-list > li + li { margin-top: 0.5rem; }
.fn-card-list__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 12.5px;
    color: var(--fn-body);
}
.fn-card-list__row--muted { color: var(--fn-muted); }
.fn-card-list__label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}
.fn-card-list__label > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fn-card-list__link { font-size: 11.5px; color: var(--fn-slate); text-decoration: none; flex-shrink: 0; }
.fn-card-list__link:hover { color: var(--fn-slate-2); }
.fn-dot {
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    flex-shrink: 0;
    background: var(--fn-muted);
}
.fn-dot--gain { background: var(--fn-gain); }
.fn-dot--ochre { background: var(--fn-ochre); }
.fn-dot--loss { background: var(--fn-loss); }

/* Native-details collapsible (AD-10 #4: prefer native behaviours). */
.fn-details > summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 12px;
    color: var(--fn-muted);
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.fn-details > summary::-webkit-details-marker { display: none; }
.fn-details > summary:hover { color: var(--fn-body); }
.fn-details > summary .fn-details__chev { transition: transform .15s ease; display: inline-flex; }
.fn-details[open] > summary .fn-details__chev { transform: rotate(90deg); }
.fn-details__body { margin-top: 0.5rem; }

/* --- Progress ring (server-rendered SVG, zero JS) ----------------------- */
.fn-ring {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.fn-ring__label {
    position: absolute;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    color: var(--fn-body);
}

/* --- FY checklist page (spec §6.2) -------------------------------------- */
.fn-stage { margin-bottom: 1.5rem; }
.fn-stage__head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.625rem;
}
.fn-stage__head h2 { margin: 0; font-weight: 400; }
.fn-stage__empty { font-size: 12.5px; color: var(--fn-muted); padding: 0 0.25rem; }
.fn-progress-line {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    font-size: 12.5px;
    color: var(--fn-body);
}
.fn-progress-line .is-strong { font-weight: 500; color: var(--fn-ink); }
.fn-progress-line .tnum { font-variant-numeric: tabular-nums; }

/* The Close gate — eSuperfund "Action Required" (spec §6.2). */
.fn-gate {
    background: #fff;
    border: 1px solid rgba(184, 130, 74, 0.4);
    border-radius: 2px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
}
.fn-gate__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--fn-ochre);
    margin-bottom: 0.375rem;
}
.fn-gate__list { list-style: none; margin: 0; padding: 0; }
.fn-gate__list > li + li { margin-top: 0.25rem; }
.fn-gate__list > li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 12.5px;
    color: var(--fn-body);
}
.fn-gate__bullet {
    width: 4px;
    height: 4px;
    border-radius: 9999px;
    background: var(--fn-ochre);
    flex-shrink: 0;
}

/* --- Prior-FY history strip (spec §6.2) --------------------------------- */
.fn-strip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.fn-strip__label { margin-right: 0.25rem; }
.fn-strip__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--fn-rule);
    border-radius: 2px;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    color: var(--fn-body);
    text-decoration: none;
    transition: border-color .15s ease;
}
.fn-strip__chip:hover { border-color: var(--fn-slate); }
.fn-strip__chip--closed { border-color: rgba(43, 107, 79, 0.4); color: var(--fn-gain); }
.fn-strip__chip--closed:hover { border-color: var(--fn-gain); }

/* --- Styleguide scaffolding --------------------------------------------- */
.fn-sg { max-width: 56rem; }
.fn-sg section { margin-bottom: 2.5rem; }
.fn-sg .fn-eyebrow { display: block; margin-bottom: 0.75rem; }
.fn-sg-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* ==========================================================================
   Journey utility layer (spec: guided_tax_journey_2026-08-10.md §9
   Phase 4 D4.3 + §7 R14 "legacy Tailwind utility classes migrate to
   fn.css screen-by-screen").

   Hand-written static equivalents of the utility classes the JOURNEY
   surfaces (dashboard, tax-years, inbox, styleguide) and the shared app
   chrome (layouts/app.html sidebar/topbar, entity switcher, feedback
   button, modals/drawers they include) actually use — so those pages
   depend ONLY on this committed stylesheet and render identically with
   the Tailwind Play CDN blocked. Class names intentionally match the
   Play CDN's so legacy pages (where the CDN still loads, later in the
   cascade with identical values) are unaffected. Colour values are the
   Slate Monogram tokens (base.html tailwind.config mirror).
   ========================================================================== */

/* --- Display / position -------------------------------------------------- */
.block { display: block; }
.hidden { display: none; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.inset-y-0 { top: 0; bottom: 0; }
.top-0 { top: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.bottom-5 { bottom: 1.25rem; }
.bottom-20 { bottom: 5rem; }
.right-5 { right: 1.25rem; }
.z-10 { z-index: 10; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

/* --- Flexbox -------------------------------------------------------------- */
.flex-1 { flex: 1 1 0%; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.shrink-0 { flex-shrink: 0; }
.gap-1 { gap: 0.25rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.125rem; }
.space-y-1 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.25rem; }
.space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem; }
.divide-y > :not([hidden]) ~ :not([hidden]) { border-top-width: 1px; }
.divide-rule-2 > :not([hidden]) ~ :not([hidden]) { border-color: var(--fn-rule-2); }

/* --- Sizing --------------------------------------------------------------- */
.min-h-screen { min-height: 100vh; }
.h-full { height: 100%; }
.w-full { width: 100%; }
.min-w-0 { min-width: 0; }
.w-3\.5 { width: 0.875rem; }
.w-4 { width: 1rem; }
.w-5 { width: 1.25rem; }
.w-8 { width: 2rem; }
.w-12 { width: 3rem; }
.w-16 { width: 4rem; }
.w-64 { width: 16rem; }
.w-\[2px\] { width: 2px; }
.h-3\.5 { height: 0.875rem; }
.h-4 { height: 1rem; }
.h-5 { height: 1.25rem; }
.h-8 { height: 2rem; }
.h-12 { height: 3rem; }
.h-14 { height: 3.5rem; }
.h-\[18px\] { height: 18px; }
.min-w-\[1\.25rem\] { min-width: 1.25rem; }
.max-h-64 { max-height: 16rem; }
.max-h-72 { max-height: 18rem; }
.max-h-\[90vh\] { max-height: 90vh; }
.max-w-xs { max-width: 20rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }

/* --- Margin --------------------------------------------------------------- */
.-ml-2 { margin-left: -0.5rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-auto { margin-left: auto; }
.mr-1 { margin-right: 0.25rem; }
.mx-3 { margin-left: 0.75rem; margin-right: 0.75rem; }
.mt-0\.5 { margin-top: 0.125rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-1\.5 { margin-top: 0.375rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }

/* --- Padding -------------------------------------------------------------- */
.p-2 { padding: 0.5rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-5 { padding-bottom: 1.25rem; }
.pl-4 { padding-left: 1rem; }
.pr-3 { padding-right: 0.75rem; }
.pt-3 { padding-top: 0.75rem; }
.pt-6 { padding-top: 1.5rem; }
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

/* --- Typography ----------------------------------------------------------- */
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-\[9\.5px\] { font-size: 9.5px; }
.text-\[10px\] { font-size: 10px; }
.text-\[10\.5px\] { font-size: 10.5px; }
.text-\[11px\] { font-size: 11px; }
.text-\[12\.5px\] { font-size: 12.5px; }
.text-\[13px\] { font-size: 13px; }
.text-\[14px\] { font-size: 14px; }
.text-\[17px\] { font-size: 17px; }
.text-\[18px\] { font-size: 18px; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.italic { font-style: italic; }
.underline { text-decoration-line: underline; }
.uppercase { text-transform: uppercase; }
.tracking-tight { letter-spacing: -0.025em; }
.tracking-wider { letter-spacing: 0.05em; }
.leading-none { line-height: 1; }
.whitespace-nowrap { white-space: nowrap; }
.tabular-nums { font-variant-numeric: tabular-nums; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-disc { list-style-type: disc; }
.list-inside { list-style-position: inside; }
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* --- Text colours (Slate Monogram tokens) --------------------------------- */
.text-white { color: #fff; }
.text-ink { color: var(--fn-ink); }
.text-body { color: var(--fn-body); }
.text-muted { color: var(--fn-muted); }
.text-slate { color: var(--fn-slate); }
.text-slate-2 { color: var(--fn-slate-2); }
.text-steel-2 { color: var(--fn-steel-2); }
.text-brass { color: var(--fn-brass); }
.text-gain { color: var(--fn-gain); }
.text-loss { color: var(--fn-loss); }
.text-rule { color: var(--fn-rule); }

/* --- Backgrounds ----------------------------------------------------------- */
.bg-white { background-color: #fff; }
.bg-fog { background-color: var(--fn-fog); }
.bg-paper { background-color: var(--fn-paper); }
.bg-slate { background-color: var(--fn-slate); }
.bg-brass { background-color: var(--fn-brass); }
.bg-gain\/10 { background-color: rgba(43, 107, 79, 0.1); }
.bg-ink\/30 { background-color: rgba(15, 22, 32, 0.3); }
.bg-ink\/40 { background-color: rgba(15, 22, 32, 0.4); }
.bg-ink\/50 { background-color: rgba(15, 22, 32, 0.5); }
.bg-white\/\[0\.08\] { background-color: rgba(255, 255, 255, 0.08); }

/* --- Borders ---------------------------------------------------------------- */
.border { border-width: 1px; }
.border-b { border-bottom-width: 1px; }
.border-b-2 { border-bottom-width: 2px; }
.border-t { border-top-width: 1px; }
.border-rule { border-color: var(--fn-rule); }
.border-slate { border-color: var(--fn-slate); }
.border-gain { border-color: var(--fn-gain); }
.border-white\/10 { border-color: rgba(255, 255, 255, 0.1); }
.border-white\/15 { border-color: rgba(255, 255, 255, 0.15); }
.rounded { border-radius: 2px; }
.rounded-full { border-radius: 9999px; }
.rounded-t-lg { border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; }

/* --- Effects / interaction -------------------------------------------------- */
.shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.shadow-md { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); }
.opacity-50 { opacity: 0.5; }
.opacity-60 { opacity: 0.6; }
.cursor-not-allowed { cursor: not-allowed; }
.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.rotate-180 { transform: rotate(180deg); }
.translate-x-0 { transform: translateX(0); }
.-translate-x-full { transform: translateX(-100%); }
.ring-2 { box-shadow: 0 0 0 2px var(--fnu-ring-color, rgba(28, 61, 90, 0.5)); }
.ring-brass\/50 { --fnu-ring-color: rgba(212, 184, 150, 0.5); }

/* --- State variants ---------------------------------------------------------- */
.hover\:bg-fog:hover { background-color: var(--fn-fog); }
.hover\:bg-rule:hover { background-color: var(--fn-rule); }
.hover\:bg-ink:hover { background-color: var(--fn-ink); }
.hover\:bg-slate-2:hover { background-color: var(--fn-slate-2); }
.hover\:bg-brass\/90:hover { background-color: rgba(212, 184, 150, 0.9); }
.hover\:bg-gain\/20:hover { background-color: rgba(43, 107, 79, 0.2); }
.hover\:bg-white\/\[0\.04\]:hover { background-color: rgba(255, 255, 255, 0.04); }
.hover\:text-body:hover { color: var(--fn-body); }
.hover\:text-ink:hover { color: var(--fn-ink); }
.hover\:text-slate:hover { color: var(--fn-slate); }
.hover\:text-slate-2:hover { color: var(--fn-slate-2); }
.hover\:text-white:hover { color: #fff; }
.focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
.focus\:border-slate:focus { border-color: var(--fn-slate); }
.focus\:ring-2:focus { box-shadow: 0 0 0 calc(2px + var(--fnu-ring-offset, 0px)) var(--fnu-ring-color, rgba(28, 61, 90, 0.5)); }
.focus\:ring-slate:focus { --fnu-ring-color: var(--fn-slate); }
.focus\:ring-offset-1:focus { --fnu-ring-offset: 1px; }
.disabled\:opacity-50:disabled { opacity: 0.5; }
.disabled\:opacity-60:disabled { opacity: 0.6; }
.empty\:hidden:empty { display: none; }
.file\:bg-fog::file-selector-button { background-color: var(--fn-fog); }
.file\:border-0::file-selector-button { border-width: 0; }
.file\:mr-3::file-selector-button { margin-right: 0.75rem; }
.file\:px-2::file-selector-button { padding-left: 0.5rem; padding-right: 0.5rem; }
.file\:py-1::file-selector-button { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.file\:rounded::file-selector-button { border-radius: 2px; }
.file\:text-body::file-selector-button { color: var(--fn-body); }
.file\:text-xs::file-selector-button { font-size: 0.75rem; line-height: 1rem; }
.hover\:file\:bg-rule:hover::file-selector-button { background-color: var(--fn-rule); }

/* --- Onboarding wizard (spec: guided_tax_journey_2026-08-10.md §9
       Phase 5 D5.1 — journey surface, fn.css only; design-loop partial
       per AD-9, built from the handoff primitives) ----------------------- */
.fn-wizard { max-width: 44rem; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }
.fn-wizard__brand { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; }
.fn-steps { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin: 1.1rem 0 1.6rem; }
.fn-steps__item {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--fn-muted);
}
.fn-steps__item--current { color: var(--fn-ink); font-weight: 600; }
.fn-steps__item--done { color: var(--fn-gain); }
.fn-field { margin-bottom: 1rem; }
.fn-label {
    display: block; font-size: 0.72rem; font-weight: 500;
    letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--fn-muted); margin-bottom: 0.35rem;
}
.fn-input {
    display: block; width: 100%; border: 1px solid var(--fn-rule);
    border-radius: 2px; background: #fff; padding: 0.5rem 0.75rem;
    font-size: 0.875rem; color: var(--fn-ink);
}
.fn-input:focus { outline: none; border-color: var(--fn-slate); }
.fn-choice {
    display: block; border: 1px solid var(--fn-rule); border-radius: 2px;
    background: #fff; padding: 1rem 1.25rem; text-decoration: none;
    color: var(--fn-body); transition: border-color .15s ease;
    margin-bottom: 0.6rem;
}
.fn-choice:hover { border-color: var(--fn-slate); }
.fn-choice__title { font-family: var(--fn-serif); font-size: 1rem; color: var(--fn-ink); margin-bottom: 0.2rem; }
.fn-choice__hint { font-size: 0.8125rem; color: var(--fn-muted); }
.fn-radio-row { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.3rem 0; font-size: 0.875rem; }
.fn-banner {
    border: 1px solid var(--fn-rule); border-left: 3px solid var(--fn-ochre);
    background: #fff; padding: 0.6rem 0.9rem; font-size: 0.85rem;
    margin-bottom: 1rem; border-radius: 2px;
}
.fn-banner--error { border-left-color: var(--fn-loss); color: var(--fn-loss); }

/* --- Responsive variants (order matters: these must come last so the
       breakpoint override wins the same-specificity cascade) --------------- */
@media (min-width: 640px) {
    .sm\:flex-row { flex-direction: row; }
    .sm\:items-center { align-items: center; }
    .sm\:justify-between { justify-content: space-between; }
    .sm\:max-w-md { max-width: 28rem; }
    .sm\:p-6 { padding: 1.5rem; }
    .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
    .sm\:rounded-lg { border-radius: 0.5rem; }
}
@media (min-width: 1024px) {
    .lg\:hidden { display: none; }
    .lg\:ml-64 { margin-left: 16rem; }
    .lg\:p-8 { padding: 2rem; }
    .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
    .lg\:translate-x-0 { transform: translateX(0); }
}

/* ==========================================================================
   THE app shell — five words wide.

   spec: docs/plans/simplify_2026-10-17.md §3.1 rule 1 (one page shape:
   sidebar + card list), rule 2 (home is the books) and rule 3 (top nav
   is exactly five words with the exceptions count beside Books).
   spec: notes/briefs/plan_fe_shell_2026-10-17.md scope items 1 + 2.

   Hand-written rather than composed from Tailwind utilities, and NOT
   optional politeness: app/static/vendor/tailwind-3.4.17.min.css is a
   PURGED build (52KB) generated from the templates as they stood, so
   utilities the old shell never used — top-14, w-56, pt-14, lg:ml-56,
   w-44, w-60, gap-2.5, top-1.5 — are simply absent from it, and a
   shell built on them would lay out wrongly with no error anywhere.
   Regenerating that artifact needs node + network + a build step, which
   AD-10 and this package's brief both forbid. So the new chrome is
   styled here, which is where AD-10 wanted the journey surfaces all
   along: /static/fn.css alone must lay the shared chrome out.
   ========================================================================== */

/* --- Top bar (rule 3) ---------------------------------------------------- */
.fn-shell__topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 40;
    height: 3.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1rem;
    background: var(--fn-slate);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #B8C5D4;
}
.fn-shell__burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem; height: 2.25rem;
    margin-left: -0.5rem;
    border-radius: 2px;
    color: #B8C5D4;
    flex-shrink: 0;
}
.fn-shell__burger:hover { background: rgba(255, 255, 255, 0.08); }
.fn-shell__burger svg { width: 1.25rem; height: 1.25rem; }

.fn-shell__brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
    text-decoration: none;
}
.fn-shell__brand-name {
    display: none;
    font-family: var(--fn-serif);
    font-size: 16px;
    letter-spacing: -0.01em;
    color: #fff;
    line-height: 1;
}

/* The five words. ``.fn-shell__nav`` is hidden below the lg breakpoint,
   where the section aside carries them instead. */
.fn-shell__nav { display: none; align-items: center; gap: 0.125rem; margin-left: 0.75rem; }
.fn-shell__word {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 13px;
    border-radius: 2px;
    color: #B8C5D4;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}
.fn-shell__word:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.fn-shell__word.is-active { background: rgba(255, 255, 255, 0.08); color: #fff; }
.fn-shell__word.is-active::after {
    content: "";
    position: absolute;
    left: 0.75rem; right: 0.75rem; bottom: -1px;
    height: 2px;
    background: var(--fn-brass);
}
/* The exceptions count — beside Books, nowhere else (rule 3). */
.fn-shell__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 18px;
    padding: 0 0.375rem;
    border-radius: 9999px;
    background: var(--fn-brass);
    color: var(--fn-slate);
    font-size: 10px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.fn-shell__spacer { flex: 1 1 auto; min-width: 0; }
/* One entity switcher in the document, so a test that clicks it by
   test id is never ambiguous. */
.fn-shell__entity { width: 11rem; min-width: 0; flex-shrink: 1; }

.fn-shell__new {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
    padding: 0.5rem 0.75rem;
    border-radius: 2px;
    background: var(--fn-brass);
    color: var(--fn-slate);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}
.fn-shell__new:hover { opacity: .9; }
.fn-shell__new.is-active { box-shadow: 0 0 0 2px rgba(212, 184, 150, 0.5); }
.fn-shell__new svg { width: 1rem; height: 1rem; }
.fn-shell__new-label { display: none; }

/* --- User menu (everything that is not one of the five words) ------------ */
.fn-shell__user { position: relative; flex-shrink: 0; }
.fn-shell__user-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem 0.25rem 0.25rem;
    border-radius: 2px;
}
.fn-shell__user-btn:hover { background: rgba(255, 255, 255, 0.08); }
.fn-shell__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem; height: 2rem;
    border-radius: 9999px;
    background: var(--fn-brass);
    color: var(--fn-slate);
    font-family: var(--fn-serif);
    font-size: 14px;
}
.fn-shell__caret { width: 0.875rem; height: 0.875rem; color: var(--fn-steel-2); transition: transform .15s ease; }
.fn-shell__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    width: 15rem;
    z-index: 50;
    background: var(--fn-slate);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    box-shadow: 0 10px 25px rgba(15, 22, 32, 0.35);
    padding: 0.25rem 0;
}
.fn-shell__menu-id { padding: 0.5rem 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.fn-shell__menu-name { font-size: 12.5px; font-weight: 500; color: #fff; }
.fn-shell__menu-email { font-size: 10.5px; color: var(--fn-steel-2); }
.fn-shell__menu-name, .fn-shell__menu-email {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fn-shell__menu-link {
    display: block;
    padding: 0.5rem 0.75rem;
    font-size: 12.5px;
    color: #B8C5D4;
    text-decoration: none;
}
.fn-shell__menu-link:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.fn-shell__menu-link--ruled { border-top: 1px solid rgba(255, 255, 255, 0.1); }

/* --- Section aside (rule 1's sidebar) ------------------------------------
   Kept a fixed dark-slate column: the shared chrome must lay out off
   this stylesheet alone (tests/e2e/test_static_asset_sovereignty.py
   asserts an <aside> that is position:fixed on the slate token), and
   the entity-switcher / user-card partials are styled for on-dark. */
.fn-shell__aside {
    position: fixed;
    top: 3.5rem; bottom: 0; left: 0;
    z-index: 30;
    width: 14rem;
    background: var(--fn-slate);
    color: #B8C5D4;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .2s ease-in-out;
}
.fn-shell__aside.is-open { transform: translateX(0); }
.fn-shell__aside-head { padding: 1.25rem 1rem 0.75rem; }
.fn-shell__aside-eyebrow {
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fn-steel-2);
}
.fn-shell__aside-title {
    display: block;
    margin-top: 0.375rem;
    font-family: var(--fn-serif);
    font-size: 16px;
    color: #fff;
    line-height: 1;
    text-decoration: none;
}
.fn-shell__aside-title:hover { color: var(--fn-brass); }
.fn-shell__aside-nav { padding: 0 0.5rem 1.5rem; }
.fn-shell__aside-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.5rem 0.5rem 0.75rem;
    margin-bottom: 0.125rem;
    font-size: 13px;
    border-radius: 2px;
    color: #B8C5D4;
    text-decoration: none;
}
.fn-shell__aside-link:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.fn-shell__aside-link.is-active { background: rgba(255, 255, 255, 0.08); color: #fff; }
.fn-shell__aside-link.is-active::before {
    content: "";
    position: absolute;
    left: 0; top: 0.375rem; bottom: 0.375rem;
    width: 2px;
    background: var(--fn-brass);
}
.fn-shell__aside-label { flex: 1 1 0%; }
.fn-shell__aside-count { font-size: 11px; color: var(--fn-brass); font-variant-numeric: tabular-nums; }

.fn-shell__scrim {
    position: fixed;
    inset: 0;
    z-index: 20;
    background: rgba(15, 22, 32, 0.5);
}

/* --- Main column --------------------------------------------------------- */
.fn-shell__main { padding-top: 3.5rem; min-height: 100vh; }
.fn-shell__pagehead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 3rem;
    padding: 0 1rem;
    background: #fff;
    border-bottom: 1px solid var(--fn-rule);
}
.fn-shell__pagetitle {
    font-family: var(--fn-serif);
    font-size: 18px;
    letter-spacing: -0.01em;
    color: var(--fn-ink);
}
.fn-shell__content { padding: 1rem; }

/* --- Section pages (rule 1: sidebar + card list) ------------------------- */
.fn-section__intro { font-size: 13.5px; color: var(--fn-muted); max-width: 46rem; margin-bottom: 1.25rem; }
.fn-section__cards { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
.fn-section__card {
    display: block;
    border: 1px solid var(--fn-rule);
    border-radius: 2px;
    background: #fff;
    padding: 1rem 1.25rem;
    text-decoration: none;
    transition: border-color .15s ease;
}
.fn-section__card:hover { border-color: var(--fn-slate); }
.fn-section__card-top { display: flex; align-items: baseline; gap: 0.5rem; }
.fn-section__card-title {
    font-family: var(--fn-serif);
    font-size: 15px;
    color: var(--fn-ink);
    margin-bottom: 0.25rem;
}
.fn-section__card-count {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--fn-ochre);
    margin-left: auto;
}
/* One plain sentence per card — rule 1. */
.fn-section__card-sentence { font-size: 12.5px; color: var(--fn-muted); line-height: 1.5; }

/* --- Books home (rule 2) ------------------------------------------------- */
.fn-books__decide {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid var(--fn-rule);
    border-left: 3px solid var(--fn-ochre);
    border-radius: 2px;
    background: #fff;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 14px;
    color: var(--fn-ink);
    text-decoration: none;
}
.fn-books__decide:hover { border-color: var(--fn-slate); border-left-color: var(--fn-ochre); }
.fn-books__decide-count { font-variant-numeric: tabular-nums; font-weight: 500; }
.fn-books__decide-go { margin-left: auto; font-size: 12px; color: var(--fn-slate); }
.fn-books__reports { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.fn-books__report { border: 1px solid var(--fn-rule); border-radius: 2px; background: #fff; }
.fn-books__report-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem;
    padding: 0.75rem 1rem; border-bottom: 1px solid var(--fn-rule-2);
}
.fn-books__report-title { font-family: var(--fn-serif); font-size: 15px; color: var(--fn-ink); }
.fn-books__report-period { font-size: 11px; color: var(--fn-muted); }
.fn-books__report-body { padding: 0.25rem 0.5rem 0.5rem; overflow-x: auto; }

/* --- Exceptions queue (rule 7 — the Xero reconcile shape) ---------------- */
.fn-queue__head {
    display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap;
    margin-bottom: 0.75rem;
}
.fn-queue__count { font-size: 13px; color: var(--fn-body); }
.fn-queue__count-n { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--fn-ink); }
.fn-queue__filters { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; margin-bottom: 1rem; }
.fn-queue__filter {
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--fn-rule);
    border-radius: 9999px;
    background: #fff;
    font-size: 12px;
    color: var(--fn-body);
    text-decoration: none;
}
.fn-queue__filter:hover { background: var(--fn-fog); }
.fn-queue__filter.is-active { background: var(--fn-slate); border-color: var(--fn-slate); color: #fff; }

/* One line per row: the bank/document line on the LEFT, what the app
   makes of it on the RIGHT, one primary action. */
.fn-queue__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    align-items: center;
    border: 1px solid var(--fn-rule);
    border-radius: 2px;
    background: #fff;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
}
.fn-queue__left { min-width: 0; }
.fn-queue__date { font-size: 11px; color: var(--fn-muted); font-variant-numeric: tabular-nums; }
.fn-queue__title {
    display: block;
    font-size: 13.5px;
    color: var(--fn-ink);
    text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fn-queue__title:hover { color: var(--fn-slate); text-decoration: underline; }
.fn-queue__right { min-width: 0; }
.fn-queue__suggestion-label {
    font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fn-muted);
}
.fn-queue__suggestion { font-size: 12.5px; color: var(--fn-body); }
.fn-queue__blockers { font-size: 11.5px; color: var(--fn-ochre); margin-top: 0.125rem; }
.fn-queue__action { display: flex; align-items: center; gap: 0.5rem; }
.fn-queue__empty {
    border: 1px solid var(--fn-rule); border-radius: 2px; background: #fff;
    padding: 2rem; text-align: center; color: var(--fn-muted); font-size: 13.5px;
}
/* A refused decision's reason. Sits under the row it was refused for
   (or at the top of the list when that row is gone — see
   pages/shell/_exceptions_list.html). --fn-loss, the same token the
   queue uses for anything that went against the user. */
.fn-queue__refusal {
    margin: 0.25rem 0 0; padding: 0.375rem 0.625rem;
    font-size: 12.5px; color: var(--fn-loss);
    background: #FBF3F4; border-left: 2px solid var(--fn-loss);
    border-radius: 0 2px 2px 0;
}
.fn-queue__refusal--loose { margin: 0 0 0.75rem; }
.fn-queue__bulk { font-size: 12px; color: var(--fn-muted); margin-bottom: 0.75rem; }
.fn-queue__bulk a { color: var(--fn-slate); }

/* The row-level resolve panel (FE-2 scope 4). It is a SIBLING of
   .fn-queue__row inside .fn-queue__item, because the row is a 3-column
   grid above 640px and a panel inside it would become a fourth cell. */
.fn-queue__item { margin-bottom: 0.5rem; }
.fn-queue__item .fn-queue__row { margin-bottom: 0; }
.fn-queue__panel:empty { display: none; }
.fn-panel {
    border: 1px solid var(--fn-rule);
    border-top: none;
    border-radius: 0 0 2px 2px;
    background: var(--fn-fog);
    padding: 0.875rem 1rem 1rem;
}
.fn-panel__head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 0.75rem;
}
.fn-panel__title { font-size: 13px; font-weight: 500; color: var(--fn-ink); }
.fn-panel__close {
    border: 0; background: none; cursor: pointer; line-height: 1;
    font-size: 18px; color: var(--fn-muted); padding: 0 0.25rem;
}
.fn-panel__close:hover { color: var(--fn-ink); }
.fn-panel__sub {
    font-size: 12px; color: var(--fn-muted); margin: 0.125rem 0 0.75rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fn-panel__note { font-size: 12.5px; color: var(--fn-body); margin: 0 0 0.75rem; }
.fn-panel__pair { margin: 0 0 0.875rem; font-size: 12.5px; color: var(--fn-body); }
.fn-panel__pair > div { display: flex; justify-content: space-between; gap: 1rem; }
.fn-panel__pair dt { color: var(--fn-muted); }
.fn-panel__pair dd { margin: 0; }
.fn-panel__actions {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 0.5rem; margin-top: 0.75rem; flex-wrap: wrap;
}
.fn-panel .fn-input { margin-bottom: 0; }

@media (min-width: 640px) {
    .fn-shell__brand-name { display: inline; }
    .fn-shell__new-label { display: inline; }
    .fn-shell__entity { width: 14rem; }
    .fn-shell__pagehead { padding: 0 1.5rem; }
    .fn-shell__content { padding: 1.5rem; }
    .fn-section__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fn-queue__row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 1rem; }
}
@media (min-width: 1024px) {
    .fn-shell__topbar { padding: 0 1.5rem; }
    .fn-shell__burger { display: none; }
    .fn-shell__nav { display: flex; }
    .fn-shell__aside { transform: translateX(0); }
    .fn-shell__scrim { display: none; }
    .fn-shell__main { margin-left: 14rem; }
    .fn-shell__pagehead { padding: 0 2rem; }
    .fn-shell__content { padding: 2rem; }
    .fn-books__reports { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The drawer's section list — the five words, for viewports where the
   top nav is hidden. Without it the drawer showed only the current
   section's cards and a phone could not reach the other four sections
   at all (judge round 1, finding 1). Hidden at >=1024px, where
   .fn-shell__nav carries them in the top bar.
   spec: docs/plans/simplify_2026-10-17.md §3.1 rule 3. */
.fn-shell__aside-sections {
    display: block;
    padding: 1.25rem 0.5rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.fn-shell__aside-sections .fn-shell__aside-eyebrow { padding: 0 0.75rem 0.375rem; }
.fn-shell__aside-sections .fn-shell__aside-nav { padding: 0; }
@media (min-width: 1024px) {
    .fn-shell__aside-sections { display: none; }
}