/* ── Practicore brand tokens (ADR 0009) ───────────────────────────────── */
:root {
    --brand: #0A7C5B;          /* Practicore core green (brand pack 2026-06-18) */
    --brand-dark: #086349;     /* darker green for hover/active */
    --brand-navy: #032241;     /* brand primary navy (the "Practi" + P-mark) */
    --brand-lime: #69B948;     /* lime accent (ascending-bar highlight) */
    --text: #1d2b24;
    --muted: #5a6b62;          /* ≥4.5:1 on white for small text (WCAG AA) */
    --surface: #ffffff;
    --background: #f3f6f4;
    --danger: #b3372f;
    --warn: #8a5a00;           /* amber advisory text, ≥4.5:1 on white (WCAG AA) */
    --border: #dde5e0;
    --shadow: 0 10px 30px rgba(29, 43, 36, 0.10);
    /* Primary-button gradient — the desktop's Practicore.Brush.BrandGradient
       (Theme/Tokens.axaml): navy → green, horizontal, with a hover variant. */
    --brand-gradient: linear-gradient(90deg, #032241 0%, #0A7C5B 100%);
    --brand-gradient-hover: linear-gradient(90deg, #053361 0%, #0C8E68 100%);
}

* { box-sizing: border-box; }

/* Honour prefers-reduced-motion (web-layout.md §9): neutralise the drawer
   slide-over + every transition/animation for users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Skip-to-content link (web-layout.md §9): off-screen until focused, then it
   pins to the top-left so a keyboard user can jump past the nav rail. */
.skip-link {
    position: absolute; left: 0.5rem; top: -3rem; z-index: 1000;
    padding: 0.5rem 0.9rem; border-radius: 8px;
    background: var(--surface); color: var(--text);
    box-shadow: var(--shadow); transition: top 0.12s ease;
}
.skip-link:focus { top: 0.5rem; }

html, body {
    margin: 0;
    font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: var(--text);
    background: var(--background);
    -webkit-font-smoothing: antialiased;
}

h1:focus { outline: none; }

.app-root { min-height: 100vh; }

/* ── Wordmark ──────────────────────────────────────────────────────────── */
.wordmark { font-weight: 700; letter-spacing: -0.01em; color: var(--brand-navy); }
.wordmark-accent { color: var(--brand); }
.wordmark-lg { font-size: 2.4rem; }

/* Brand P-mark (brand pack 2026-06-18): the navy P with ascending green/blue
   bars. Sits left of the text wordmark in the shell header and above it on the
   login card. */
.brand-mark { display: block; width: auto; }
.brand-mark-sm { height: 1.5rem; }   /* shell header, beside the wordmark */
.brand-mark-lg { height: 4rem; margin: 0 auto 0.6rem; }   /* login / home card */
.brand-lockup { display: flex; align-items: center; gap: 0.5rem; }

/* ── Buttons & fields ──────────────────────────────────────────────────── */
.btn-primary {
    width: 100%;
    padding: 0.7rem 1rem;
    margin-top: 0.4rem;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: var(--brand-gradient);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: filter 0.12s ease, transform 0.06s ease, box-shadow 0.12s ease;
    box-shadow: 0 2px 6px rgba(12, 35, 64, 0.18);
}
.btn-primary:hover:not(:disabled) { background: var(--brand-gradient-hover); box-shadow: 0 4px 12px rgba(12, 35, 64, 0.24); }
.btn-primary:active:not(:disabled) { transform: translateY(1px); }
.btn-primary:disabled { opacity: 0.6; cursor: default; }

.btn-ghost {
    padding: 0.45rem 0.8rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--brand);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
}
/* Demoted permanent-delete in the remove-client drawer: a quiet, danger-coloured
   ghost so Archive (the primary) leads and hard delete reads as the rare option. */
.ws-delete-permanent { color: var(--danger); border-color: transparent; }
.ws-delete-permanent:hover { border-color: var(--danger); }
.btn-ghost:hover { border-color: var(--brand); }

/* Secondary button — a soft brand-tinted fill for a lead action that isn't the
   page's single gradient primary (e.g. "Edit details" on the client overview).
   Reads more prominently than .btn-ghost while sharing its size so the two sit
   level in the same action row. */
.btn-secondary {
    padding: 0.45rem 0.9rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--brand);
    background: rgba(10, 124, 91, 0.10);
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.btn-secondary:hover:not(:disabled) { background: rgba(10, 124, 91, 0.16); }
.btn-secondary:active:not(:disabled) { transform: translateY(1px); }
.btn-secondary:disabled { opacity: 0.6; cursor: default; }

.field { margin-bottom: 0.85rem; text-align: left; }
.field label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 0.3rem;
}
.control {
    width: 100%;
    padding: 0.6rem 0.7rem;
    font-size: 1rem;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 9px;
    outline: none;
}
.control:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(46, 139, 87, 0.15); }

/* Firm-formatted date picker (DatePicker.razor). A native <input type="date">
   renders its text in the browser's locale, which HTML can't restyle, so at
   rest we hide that text (color:transparent) and overlay a face showing the
   value in the firm's pattern (ADR 0087). The calendar picker icon is a
   separate pseudo-element, so it stays visible and clickable.

   On focus we reveal the native text and drop the face, so keyboard/segment
   editing is visible (the native editor only speaks the browser locale
   mid-edit; the firm pattern returns on blur). */
.date-picker { position: relative; display: inline-block; }
.date-picker > .control { color: transparent; }
.date-picker:focus-within > .control { color: var(--text); }
.date-picker:focus-within .date-picker-face { display: none; }
.date-picker-face {
    position: absolute;
    left: 0.7rem;               /* match .control padding-left */
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    color: var(--text);
    pointer-events: none;       /* clicks fall through to the input + its icon */
}
.date-picker-face.is-placeholder { color: var(--muted); }   /* empty-state hint reads as a placeholder */

/* Show/hide password toggle: a borderless text button overlaid at the right
   edge of the field; the input reserves room for it via padding-right. */
.password-wrap { position: relative; }
.password-wrap .control { padding-right: 3.6rem; }
.password-toggle {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    padding: 0.2rem 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
    background: none;
    border: none;
    cursor: pointer;
}
.password-toggle:hover { color: var(--brand); }
.password-toggle:focus-visible { outline: 2px solid var(--brand); border-radius: 5px; }

/* ── Auth screen ───────────────────────────────────────────────────────── */
.auth-screen, .tour-screen, .boot-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background:
        radial-gradient(1200px 500px at 50% -10%, rgba(46, 139, 87, 0.10), transparent),
        var(--background);
}
.auth-card {
    width: 100%;
    max-width: 380px;
    padding: 2rem 1.8rem;
    background: var(--surface);
    border-radius: 18px;
    box-shadow: var(--shadow);
    text-align: center;
}
.auth-brand { margin-bottom: 1.4rem; }
.auth-tagline {
    margin: 0.5rem 0 0;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    color: var(--muted);
}
.auth-tabs {
    display: flex;
    gap: 0.4rem;
    background: var(--background);
    border-radius: 10px;
    padding: 0.25rem;
    margin-bottom: 1.2rem;
}
.auth-tab {
    flex: 1;
    padding: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--muted);
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}
.auth-tab.active { color: var(--brand); background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.auth-error {
    margin: 0.9rem 0 0;
    padding: 0.6rem 0.7rem;
    font-size: 0.86rem;
    color: var(--danger);
    background: rgba(179, 55, 47, 0.08);
    border-radius: 8px;
}
.auth-info {
    margin: 0.9rem 0 0;
    padding: 0.6rem 0.7rem;
    font-size: 0.86rem;
    color: var(--brand);
    background: rgba(46, 139, 87, 0.08);
    border-radius: 8px;
}
.auth-heading { margin: 0.2rem 0 1rem; font-size: 1.05rem; font-weight: 700; text-align: center; }
/* Onboarding "Set up your access" role list — stack the practitioner-role
   checkboxes with breathing room instead of cramming them on one line. */
.onboarding-roles {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0.4rem auto 0.2rem;
    max-width: 16rem;
    text-align: left;
}
.onboarding-roles .role-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; }
/* A quiet, link-styled button (forgot-password, back-to-sign-in). A real <button>
   for keyboard/AT, painted as a link. */
.auth-link {
    display: block;
    width: 100%;
    margin: 0.8rem 0 0;
    padding: 0.3rem;
    font-size: 0.82rem;
    color: var(--brand);
    background: none;
    border: none;
    cursor: pointer;
    text-align: center;
}
.auth-link:hover { text-decoration: underline; }
.auth-foot { margin: 1.3rem 0 0; font-size: 0.68rem; color: var(--muted); }

/* ── Onboarding tour ───────────────────────────────────────────────────── */
.tour-card {
    width: 100%;
    max-width: 440px;
    padding: 2.2rem 2rem;
    background: var(--surface);
    border-radius: 18px;
    box-shadow: var(--shadow);
    text-align: center;
}
.tour-dots { display: flex; justify-content: center; gap: 0.4rem; margin-bottom: 1.6rem; }
.tour-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); transition: all 0.15s; }
.tour-dot.active { background: var(--brand); width: 22px; border-radius: 4px; }
.tour-body { min-height: 190px; }
.tour-icon { font-size: 3rem; }
.tour-body h2 { margin: 0.6rem 0 0.5rem; font-size: 1.4rem; }
.tour-body p { margin: 0 auto; max-width: 340px; color: var(--muted); line-height: 1.5; }
.tour-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 1.6rem; }
.tour-actions .btn-primary { width: auto; padding: 0.6rem 1.6rem; margin: 0; }

/* ── Shell ─────────────────────────────────────────────────────────────── */
.shell { min-height: 100vh; display: flex; flex-direction: column; }
.shell-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.4rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.shell-bar-left { display: flex; align-items: center; gap: 0.7rem; }
.shell-bar-right { display: flex; align-items: center; gap: 0.8rem; }
.shell-firm { font-size: 0.9rem; font-weight: 600; color: var(--muted); }

/* On-demand help "?" — a quiet round button beside the avatar. */
.shell-help {
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.95rem; font-weight: 700; color: var(--muted);
    background: transparent; border: 1px solid var(--border);
    border-radius: 50%; cursor: pointer; line-height: 1;
}
.shell-help:hover { color: var(--brand); border-color: var(--brand); }
.shell-help:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Help drawer body. */
.help-purpose { color: var(--text); margin: 0 0 1rem; line-height: 1.5; }
.help-subhead {
    font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--muted); margin: 0 0 0.5rem;
}
.help-actions { margin: 0; padding-left: 1.1rem; color: var(--text); line-height: 1.6; }
.help-actions li { margin-bottom: 0.25rem; }

/* Field-help "?" tip — a quiet inline affordance beside a field label. */
.form-field-label { display: inline-flex; align-items: center; gap: 0.35rem; }
.field-help { position: relative; display: inline-flex; }
.field-help-icon {
    width: 16px; height: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.68rem; font-weight: 700; line-height: 1;
    color: var(--muted); background: transparent;
    border: 1px solid var(--border); border-radius: 50%;
    cursor: help; padding: 0;
}
.field-help-icon:hover { color: var(--brand); border-color: var(--brand); }
.field-help-icon:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
/* Outer tip = positioned + a TRANSPARENT 6px top padding. The padding bridges the
   gap to the icon so the pointer never leaves the wrapper subtree on its way to the
   tip (WCAG 1.4.13 hoverable). The visible box is the inner element. */
.field-help-tip {
    position: absolute; left: 0; top: 100%; z-index: 50;
    padding-top: 6px;
}
.field-help-tip-box {
    display: block; width: max-content; max-width: 260px;
    padding: 0.5rem 0.65rem;
    font-size: 0.8rem; font-weight: 400; line-height: 1.4; color: var(--text);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 8px; box-shadow: var(--shadow);
    white-space: normal;
}

/* Account menu — the avatar is the button; the dropdown holds the view-as-role
   lens + sign out. */
.account-menu { position: relative; display: flex; align-items: center; }
.shell-avatar {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; font-weight: 700; color: #fff;
    background: var(--brand); border: none; border-radius: 50%; cursor: pointer;
}
.shell-avatar:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* Full-viewport transparent catcher so any outside click closes the menu. */
.account-backdrop { position: fixed; inset: 0; z-index: 40; background: transparent; }
.account-dropdown {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 41;
    min-width: 220px; padding: 0.4rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; box-shadow: var(--shadow);
}
.account-head { padding: 0.5rem 0.6rem 0.6rem; border-bottom: 1px solid var(--border); }
.account-name { font-size: 0.9rem; font-weight: 700; color: var(--text); }
.account-firm { font-size: 0.78rem; color: var(--muted); }
.account-section { padding: 0.35rem 0; }
.account-section + .account-section { border-top: 1px solid var(--border); }
.account-section-label {
    display: block;
    padding: 0.2rem 0.6rem; font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted);
}
/* The "View as" dropdown. */
.account-select {
    width: calc(100% - 1.2rem);
    margin: 0.15rem 0.6rem 0.35rem;
    padding: 0.4rem 0.5rem;
    font-size: 0.86rem; color: var(--text);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 8px; cursor: pointer;
}
.account-select:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.account-error {
    margin: 0 0.6rem 0.35rem;
    font-size: 0.8rem; color: var(--danger, #c0392b);
}
.account-item {
    display: flex; align-items: center; gap: 0.2rem;
    width: 100%; padding: 0.45rem 0.6rem;
    font-size: 0.86rem; text-align: left; color: var(--text);
    background: none; border: none; border-radius: 8px; cursor: pointer;
}
.account-item:hover { background: var(--surface-2, rgba(0,0,0,0.04)); }
.shell-body { flex: 1; display: flex; justify-content: center; padding: 2.4rem 1.4rem; }
.welcome-card {
    width: 100%;
    max-width: 620px;
    padding: 2.2rem;
    background: var(--surface);
    border-radius: 18px;
    box-shadow: var(--shadow);
}
.welcome-card h1 { margin: 0 0 0.6rem; font-size: 1.8rem; }
.welcome-sub { color: var(--muted); line-height: 1.55; margin: 0 0 1.6rem; }
.actor-grid {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 0.55rem 1rem;
    margin: 0 0 1.6rem;
    padding: 1.1rem 1.2rem;
    background: var(--background);
    border-radius: 12px;
}
.actor-grid dt { font-weight: 600; color: var(--muted); }
.actor-grid dd { margin: 0; font-weight: 600; }
.welcome-foot { font-size: 0.85rem; color: var(--muted); line-height: 1.5; margin: 0; }

/* ── Offline banner ────────────────────────────────────────────────────── */
.offline-banner {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 0.55rem 1rem;
    font-size: 0.85rem;
    text-align: center;
    color: #5a4500;
    background: #fff4cc;
    border-bottom: 1px solid #f0e2a8;
}

/* ── Client-scope chip (top bar) ───────────────────────────────────────── */
.scope-chip {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: 1.1rem;
    padding: 0.3rem 0.7rem;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid var(--border);
}
.scope-chip.firm { color: var(--muted); }
.scope-chip.client { color: var(--brand); border-color: var(--brand); background: rgba(10,124,91,0.07); }
.scope-dot { font-size: 0.6rem; }
.scope-clear {
    border: none; background: transparent; cursor: pointer;
    color: var(--muted); font-size: 0.85rem; padding: 0 0.1rem; line-height: 1;
}
.scope-clear:hover { color: var(--danger); }

/* ── Pane scaffold ─────────────────────────────────────────────────────── */
.shell-body-pane { justify-content: stretch; padding: 1.6rem 1.8rem; }
.pane {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    background: var(--surface);
    border-radius: 16px;
    box-shadow: var(--shadow);
    overflow: hidden;
}
.pane-head {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
    padding: 1.3rem 1.5rem 1rem;
    border-bottom: 1px solid var(--border);
}
.pane-title { margin: 0; font-size: 1.4rem; }
.pane-subtitle { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--muted); }
.pane-toolbar { flex-shrink: 0; }
.pane-search { width: 240px; padding: 0.45rem 0.6rem; font-size: 0.9rem; }
.pane-body { padding: 0.4rem 0 0; }

.muted-row { padding: 2rem 1.5rem; color: var(--muted); text-align: center; }
.danger-row { padding: 1.4rem 1.5rem; color: var(--danger); }

/* ── Client table ──────────────────────────────────────────────────────── */
.client-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.client-table thead th {
    text-align: left; padding: 0.55rem 1.5rem;
    font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--muted); border-bottom: 1px solid var(--border);
}
/* Sortable column header: a button painted to look like the th label, with a
   sort-direction glyph. Inherits the uppercase muted th styling. */
.th-sort {
    display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer;
    background: none; border: none; padding: 0; margin: 0;
    font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
}
.th-sort:hover { color: var(--brand); }
.th-sort.active { color: var(--text); }
.th-sort:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 3px; }
.th-sort-glyph { font-size: 0.85em; opacity: 0.55; }
.th-sort.active .th-sort-glyph { opacity: 1; color: var(--brand); }

.client-table tbody td { padding: 0.7rem 1.5rem; border-bottom: 1px solid var(--background); }
.client-table tbody tr { cursor: pointer; transition: background 0.1s; }
.client-table tbody tr:hover { background: var(--background); }
.client-table tbody tr.selected { background: rgba(10,124,91,0.08); }
/* A client with an open, past-due deadline shows red (Ilse 2026-06-16): a red
   left edge + a faint red wash, kept visible under hover/selected. */
.client-table tbody tr.has-overdue { background: rgba(179,55,47,0.07); box-shadow: inset 3px 0 0 var(--danger); }
.client-table tbody tr.has-overdue:hover { background: rgba(179,55,47,0.12); }
.client-table tbody tr.has-overdue.selected { background: rgba(179,55,47,0.13); }
.overdue-flag { color: var(--danger); font-weight: 600; font-size: 0.82rem; margin-left: 0.4rem; white-space: nowrap; }
.client-table .ref { color: var(--muted); font-variant-numeric: tabular-nums; }
.client-table .name { font-weight: 600; }
/* Name-as-link on the Birthdays glance: a plain button that reads as a link so the
   name is the click target (opens the client's workspace) without a whole-row action. */
.birthday-name-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--brand);
    cursor: pointer;
    text-align: left;
}
.birthday-name-link:hover { color: var(--brand-dark); text-decoration: underline; }
/* Birthdays is name-only clickable, so cancel the shared client-table whole-row
   pointer (the name-link keeps its own pointer); the row hover-highlight stays for
   scan-tracking. Without this the whole row reads as clickable when it isn't. */
.birthdays-table tbody tr { cursor: default; }
.client-table .muted { color: var(--muted); }
.client-table .row-actions { text-align: right; white-space: nowrap; }
.client-table .in-focus { color: var(--brand); font-weight: 600; font-size: 0.84rem; margin-right: 0.7rem; }
.row-edit {
    border: 1px solid var(--border); background: var(--surface); cursor: pointer;
    border-radius: 7px; padding: 0.25rem 0.7rem; font-size: 0.82rem; font-weight: 600; color: var(--brand);
}
.row-edit:hover { border-color: var(--brand); }

.pane-toolbar-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.pane-new { width: auto; padding: 0.5rem 1rem; margin: 0; font-size: 0.9rem; white-space: nowrap; }
.pane-doc { cursor: pointer; white-space: nowrap; }
.pane-doc.disabled { opacity: 0.6; pointer-events: none; }

/* ── Agenda toolbar + per-column header filters (filter rethink 2026-06-23) ──
   The list-view filters (status select · "Mine" chip · search box) moved off the
   toolbar into the column headers as funnel popovers, so the toolbar is just tabs
   + the primary CTA. The old .filter-cluster/.filter-label/.filter-chip/
   .filter-search rules were retired with them. */
/* Right zone: pin the create action hard right, away from the tabs. */
.toolbar-actions { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; }
/* Active-filter summary line above the grid: "Showing N of M" + Clear. Inset to
   the table's content gutter (1.5rem) so the lone "Clear filters" no longer floats
   orphaned at the pane edge. */
.filter-summary {
    display: flex; align-items: center; gap: 0.8rem;
    padding: 0.5rem 1.5rem; font-size: 0.85rem; color: var(--muted);
}
.filter-clear {
    padding: 0; font-size: 0.85rem; font-weight: 600; color: var(--brand);
    background: none; border: none; cursor: pointer; text-decoration: underline;
}
.filter-clear:hover { color: var(--brand-navy); }

/* Pane-level notice (overdue banner, transient "Added N obligation(s)…" feedback):
   a gutter wrapper so the notice lines up with the inset table content instead of
   bleeding to the gutterless .pane-body edge. Generic — any pane's top-of-body
   StatusLine/banner can sit in one. */
.pane-notice { padding: 0 1.5rem; }

/* Header funnel button + popover (FilterableHeader). The funnel sits beside the
   sort label; an engaged filter paints it brand-green. The popover anchors under
   the header cell and is dismissed by a transparent full-screen backdrop. */
.th-filterable { position: relative; }
.th-controls { display: inline-flex; align-items: center; gap: 0.35rem; }
.th-funnel {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.15rem; margin: 0; line-height: 0; cursor: pointer;
    background: none; border: none; border-radius: 4px; color: var(--muted); opacity: 0.65;
}
.th-funnel:hover { color: var(--brand); opacity: 1; background: var(--background); }
.th-funnel.active { color: var(--brand); opacity: 1; }
.th-funnel:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.th-filter-backdrop { position: fixed; inset: 0; z-index: 40; background: transparent; }
.th-filter-pop {
    position: absolute; top: 100%; left: 1.2rem; z-index: 41; margin-top: 0.25rem;
    min-width: 200px; max-width: 280px; padding: 0.7rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: var(--shadow); text-align: left;
}
.filter-pop-body { display: flex; flex-direction: column; gap: 0.45rem; }
.filter-pop-scroll { max-height: 260px; overflow-y: auto; }
/* Reset the inherited uppercase/letter-spaced th typography inside the popover. */
.filter-pop-body, .filter-pop-body * {
    text-transform: none; letter-spacing: normal; font-weight: 400;
}
.filter-pop-label { font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.filter-pop-radio, .filter-pop-check {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.88rem; color: var(--text); cursor: pointer;
}
.filter-pop-radio input, .filter-pop-check input { margin: 0; cursor: pointer; }
.filter-pop-clear {
    align-self: flex-start; margin-top: 0.15rem; padding: 0;
    font-size: 0.82rem; font-weight: 600; color: var(--brand);
    background: none; border: none; cursor: pointer; text-decoration: underline;
}
.filter-pop-clear:hover { color: var(--brand-navy); }

/* ── Form catalog (FormField / StatusLine / FormButtonRow) ─────────────── */
.form-stack { display: flex; flex-direction: column; gap: 0.2rem; }
.form-field { margin-bottom: 0.9rem; text-align: left; }
.form-field label {
    display: block; font-size: 0.8rem; font-weight: 600; color: var(--muted); margin-bottom: 0.3rem;
}
.form-field.has-error .control { border-color: var(--danger); }
.field-error { margin: 0.3rem 0 0; font-size: 0.8rem; color: var(--danger); }
/* Optional per-field explanation under the label (FormField Hint). */
.field-hint { margin: 0 0 0.35rem; font-size: 0.78rem; color: var(--muted); line-height: 1.35; }
/* Required marker (FormField Required). */
.field-required { color: var(--danger); margin-left: 0.15rem; }

/* FormGrid: pair related fields two-up on the desktop canvas, one column on
   tablet/narrow (web-layout.md §6.1). column-gap separates the pair; the fields
   keep their own bottom margin for the row gap. */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.2rem; }
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }

/* FormSection: an in-form heading group. */
.form-section { margin-bottom: 1rem; }
.form-section-title {
    margin: 0 0 0.5rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--muted);
}

.status-line { margin: 0.4rem 0 0.8rem; font-size: 0.86rem; padding: 0.55rem 0.7rem; border-radius: 8px; }
.status-line.danger { color: var(--danger); background: rgba(179,55,47,0.08); }
.status-line.muted { color: var(--muted); background: var(--background); }
.status-line.warn { color: var(--warn); background: rgba(214,158,46,0.12); }

/* Contained by default: the row sits inside whatever bordered card hosts it
   (comms-card / settings-card), so it never overflows the card's outline. Just
   top spacing — no negative margins. The drawer gets the full-bleed sticky footer
   below. (Previously the base WAS the drawer treatment, and every card had to undo
   it with its own override — comms-card never got one, breaking its outline next
   to Save. One rule now does the right thing for every host.) */
.form-button-row {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    margin: 0.6rem 0 0; padding: 0.6rem 0 0;
}
/* In a drawer, pin the row to the bottom of the scrolling body so Save/Create is
   always reachable on a long (10-field) form, spanning the drawer's 1.4rem padding
   full-bleed via negative margins (the only place those margins are correct). */
.drawer-body .form-button-row {
    position: sticky; bottom: 0;
    margin: 0.6rem -1.4rem 0; padding: 0.9rem 1.4rem;
    background: var(--surface); border-top: 1px solid var(--border);
}
.fbr-left { display: flex; align-items: center; gap: 0.7rem; }
.fbr-right { display: flex; align-items: center; gap: 0.6rem; }
.fbr-primary { width: auto; padding: 0.6rem 1.3rem; margin: 0; }
.dirty-pill { font-size: 0.8rem; color: var(--brand); font-weight: 600; }

/* ── Drawer (slide-over host) ──────────────────────────────────────────── */
.drawer-overlay {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(29,43,36,0.32);
    display: flex; justify-content: flex-end;
}
.drawer-panel {
    width: 100%; max-width: 440px; height: 100%;
    background: var(--surface); box-shadow: -10px 0 30px rgba(0,0,0,0.15);
    display: flex; flex-direction: column;
    animation: drawer-in 0.16s ease-out;
    /* The overlay is position:fixed but still DOM-nested where it was rendered — e.g.
       a RowActions confirm sits inside <td class="row-actions"> which sets
       white-space:nowrap. Reset it here so the dialog's text (message + title) wraps
       instead of running one long line that forces a horizontal scrollbar. */
    white-space: normal;
}
@keyframes drawer-in { from { transform: translateX(24px); opacity: 0.6; } to { transform: none; opacity: 1; } }
.drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--border);
}
.drawer-title { margin: 0; font-size: 1.2rem; }
.drawer-close { border: none; background: transparent; cursor: pointer; font-size: 1rem; color: var(--muted); }
.drawer-close:hover { color: var(--danger); }
.drawer-body { padding: 1.3rem 1.4rem; overflow-y: auto; }

/* ── Nav rail + content ────────────────────────────────────────────────── */
.shell-main { flex: 1; display: flex; min-height: 0; }
.nav-rail {
    width: 220px; flex-shrink: 0;
    background: var(--surface); border-right: 1px solid var(--border);
    padding: 1rem 0.7rem; overflow-y: auto;
}
.nav-section-label {
    font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--muted); padding: 0.9rem 0.6rem 0.35rem;
}
.nav-item {
    display: flex; align-items: center; gap: 0.6rem; width: 100%;
    padding: 0.5rem 0.6rem; margin-bottom: 0.1rem;
    font-size: 0.92rem; font-weight: 600; color: var(--text);
    background: transparent; border: none; border-radius: 9px; cursor: pointer;
    text-align: left;
}
.nav-item:hover { background: var(--background); }
.nav-item.active { background: rgba(10,124,91,0.10); color: var(--brand); }
/* Icons stay greyscale (currentColor=muted) even when the item is active —
   only the label/background carry the brand highlight. */
.nav-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; color: var(--muted); }
.nav-svg { display: block; }
/* Rail collapse toggle — lives in the header, to the LEFT of the wordmark. */
.nav-collapse {
    display: inline-flex; align-items: center; justify-content: center;
    border: none; background: transparent; cursor: pointer;
    color: var(--muted); font-size: 1.05rem; line-height: 1;
    padding: 0.25rem 0.45rem; border-radius: 7px;
}
.nav-collapse:hover { background: var(--background); color: var(--text); }
.nav-collapse:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.nav-rail.collapsed { width: 62px; }
.nav-rail.collapsed .nav-label,
.nav-rail.collapsed .nav-section-label { display: none; }
.nav-rail.collapsed .nav-item { justify-content: center; padding: 0.55rem; }
.shell-content { flex: 1; overflow-y: auto; padding: 1.6rem 1.8rem; min-width: 0; }
.shell-content .pane { margin: 0 auto; }

/* Install-the-autofill-extension nudge (ADR 0090). A quiet, dismissible strip at
   the top of the content — informative, not alarming, so it uses the brand-tinted
   surface rather than a warning colour. */
.ext-install-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 auto 1.2rem;
    padding: 0.7rem 1rem;
    background: rgba(46, 139, 87, 0.08);
    border: 1px solid var(--border);
    border-left: 3px solid var(--brand);
    border-radius: 8px;
    font-size: 0.88rem;
}
.ext-install-icon { font-size: 1.1rem; line-height: 1; }
/* "New" chip on a feature spotlight (reuses the banner surface). */
.spotlight-chip {
    flex: none; padding: 0.1rem 0.5rem; border-radius: 999px;
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    color: #fff; background: var(--brand);
}
.ext-install-text { flex: 1; color: var(--text); }
.ext-install-action {
    flex: none;
    font-weight: 600;
    color: var(--brand);
    text-decoration: none;
    white-space: nowrap;
}
.ext-install-action:hover { text-decoration: underline; }
/* Pending firm-invite prompt (cross-firm membership): one row per invite, the
   Accept action sitting to the right of each line. Reuses the banner surface. */
.pending-invite-list { flex: 1; display: flex; flex-direction: column; gap: 0.4rem; }
.pending-invite-row { display: flex; align-items: center; gap: 0.75rem; }
button.ext-install-action {
    background: none;
    border: none;
    cursor: pointer;
    font-size: inherit;
}
button.ext-install-action:disabled { color: var(--muted); cursor: default; text-decoration: none; }
.ext-install-dismiss {
    flex: none;
    background: none;
    border: none;
    color: var(--muted);
    font-size: 0.84rem;
    cursor: pointer;
    padding: 0.2rem 0.3rem;
    white-space: nowrap;
}
.ext-install-dismiss:hover { color: var(--text); }

/* ── Billing grace banner (warn-only non-payment nudge, Task B4) ────────── */
.billing-grace-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 auto 1.2rem;
    padding: 0.7rem 1rem;
    background: rgba(179, 55, 47, 0.08);
    border: 1px solid var(--border);
    border-left: 3px solid var(--danger);
    border-radius: 8px;
    font-size: 0.88rem;
}
.billing-grace-icon { font-size: 1.1rem; line-height: 1; }
.billing-grace-text { flex: 1; color: var(--text); }

/* ── Status chips + due dates ──────────────────────────────────────────── */
.chip {
    display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px;
    font-size: 0.76rem; font-weight: 600;
}
.chip-danger { color: var(--danger); background: rgba(179,55,47,0.10); }
.chip-ok { color: var(--brand); background: rgba(10,124,91,0.10); }
/* Pending/awaiting amber — routed through --warn like its sibling chips, not a
   raw hex (web-layout.md §7.1/§7.2; this is the canonical status amber). */
.chip-open { color: var(--warn); background: rgba(138, 90, 0, 0.10); }
.chip-muted { color: var(--muted); background: var(--background); }
.client-table .due { font-variant-numeric: tabular-nums; color: var(--muted); }
.client-table .due.overdue { color: var(--danger); font-weight: 600; }
.pane-filter { width: auto; padding: 0.45rem 0.6rem; font-size: 0.9rem; }

/* ── Tab toggle (within a pane toolbar) ────────────────────────────────── */
.tab-toggle { display: inline-flex; gap: 0.25rem; background: var(--background); border-radius: 9px; padding: 0.2rem; }
.tab {
    padding: 0.4rem 0.9rem; font-size: 0.88rem; font-weight: 600; color: var(--muted);
    background: transparent; border: none; border-radius: 7px; cursor: pointer;
}
.tab.active { color: var(--brand); background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.role-chip { margin-right: 0.3rem; }

/* ── Per-member role editor (inline expand row) ────────────────────────── */
.role-editor-row td { background: var(--surface-muted, #f6f8f7); }
.role-editor { padding: 0.6rem 0.2rem; display: flex; flex-direction: column; gap: 0.7rem; }
.role-editor-hint { margin: 0; color: var(--muted); font-size: 0.85rem; }
.role-checks { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; }
.role-check { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.role-check input { width: auto; margin: 0; }
/* Capability editor on the Roles tab — buckets grouped under their display area. */
.role-area { display: flex; flex-direction: column; gap: 0.35rem; }
.role-area-caption { margin: 0; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.03em;
    text-transform: uppercase; color: var(--muted); }
/* One-time invite code shown to the admin after creating an invite — big, mono,
   easy to copy/read aloud. */
.invite-code {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 1.3rem; font-weight: 700; letter-spacing: 0.06em; text-align: center;
    color: var(--brand); background: var(--background);
    border: 1px dashed var(--border); border-radius: 10px; padding: 0.8rem 1rem; user-select: all;
}
.role-editor-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
.role-editor-actions button { width: auto; }

/* ── Overview actions + compliance-pack picker ─────────────────────────── */
/* ── Document-backed fields, document-centric (ADR 0077 + UX panel) ─────── */
/* The DOCUMENT is the unit: each source shows ONCE in a Sources strip with open;
   every field it backs carries a quiet letter tag pointing at it. (The tax-year
   "temperature" colours were retired — temperature now means storage tier only,
   shown as the ❄ cold-storage badge via .doc-cold-badge.) */

.doc-sources { margin: 0 0 1.2rem; }
.doc-sources-label {
    display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 0.45rem;
}
.doc-sources-strip { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.doc-source-chip {
    display: inline-flex; align-items: center; gap: 0.5rem; width: auto;
    padding: 0.35rem 0.7rem; border: 1px solid var(--tc-bd, #d8e0db);
    border-radius: 10px; background: var(--tc-bg, #fff); color: var(--brand-dark);
    cursor: pointer; text-align: left;
}
.doc-source-chip:hover { filter: brightness(0.97); }
.doc-source-letter {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.35rem; height: 1.35rem; border-radius: 50%;
    background: var(--tc-fg, #555); color: #fff; font-weight: 700; font-size: 0.8rem;
}
.doc-source-name { font-weight: 600; font-size: 0.85rem; color: #2b3a33; }
.doc-source-date { font-size: 0.76rem; color: var(--muted); }
.doc-sources-hint { font-size: 0.78rem; color: var(--muted); margin: 0.5rem 0 0; }

/* Quiet per-field tag: a small document glyph + the letter of the source the value
   came from, so any backed value reads at a glance as "backed by document A". Keyed
   by colour to its Sources chip; shared by every backing tag (client field, address,
   contact). The glyph is what tells the practitioner the field is document-backed. */
.doc-fieldtag {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.2rem;
    height: 1.25rem; margin-left: 0.5rem; padding: 0 0.4rem; line-height: 1;
    border: 1px solid var(--tc-fg, #888); border-radius: 999px;
    background: var(--tc-bg, #fff); color: var(--tc-fg, #555);
    font-size: 0.72rem; font-weight: 700; cursor: pointer; vertical-align: middle;
}
.doc-fieldtag::before { content: "\01F4C4"; font-weight: 400; } /* 📄 document */
.doc-fieldtag:hover { background: var(--tc-fg, #555); color: #fff; }
.doc-edited {
    display: inline-block; margin-left: 0.4rem; padding: 0.02rem 0.4rem;
    border-radius: 999px; background: #fdf0e3; color: #9a5a00;
    font-size: 0.7rem; font-weight: 600; vertical-align: middle;
}

/* ── Labeled multi-valued contact points (ADR 0089) ────────────────────── */
.contacts { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; margin-top: 1.2rem; }
.contact-group-head { display: flex; align-items: center; justify-content: space-between; }
.contact-group-head h3 { margin: 0; font-size: 0.9rem; }
.contact-empty { font-size: 0.82rem; margin: 0.3rem 0 0; }
.contact-list { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.contact-row {
    display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 0.6rem; align-items: baseline;
    padding-bottom: 0.5rem; border-bottom: 1px solid var(--border, #eef2f0);
}
.contact-label { font-size: 0.75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.contact-primary {
    margin-left: 0.4rem; padding: 0 0.35rem; border-radius: 999px;
    background: #e3f3ea; color: #1f7a4d; font-size: 0.62rem; font-weight: 700; letter-spacing: 0;
}
.contact-value { grid-column: 1; font-weight: 600; color: #2b3a33; }
.contact-actions { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 0.3rem; align-items: center; }
.contact-remove { color: var(--danger, #c0392b); }
/* Contact-person cards: name+email+phone+note bundled under a role. */
.person-list { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.person-card {
    border: 1px solid var(--border, #e3e8e5); border-radius: 10px; padding: 0.6rem 0.8rem;
    display: flex; flex-direction: column; gap: 0.2rem;
}
.person-head { display: flex; align-items: center; justify-content: space-between; }
.person-name { font-weight: 700; color: #2b3a33; }
.person-line { font-size: 0.9rem; color: #2b3a33; }
.person-note { font-size: 0.82rem; color: var(--muted); font-style: italic; margin-top: 0.2rem; }
@media (max-width: 720px) { .contacts { grid-template-columns: 1fr; } }

/* ── Document viewer modal ──────────────────────────────────────────────── */
.doc-modal-backdrop {
    position: fixed; inset: 0; background: rgba(20, 30, 26, 0.55);
    display: flex; align-items: center; justify-content: center; z-index: 200; padding: 2rem;
}
.doc-modal {
    background: var(--surface, #fff); border-radius: 14px; width: min(900px, 95vw);
    max-height: 92vh; display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 12px 48px rgba(0,0,0,0.3);
}
.doc-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.8rem 1.1rem; border-bottom: 1px solid var(--border, #e3e8e5);
}
.doc-modal-title { font-weight: 700; }
.doc-modal-head .btn-ghost { width: auto; }
.doc-modal-body { padding: 1rem; overflow: auto; background: #f4f6f5; }
.doc-modal-pdf canvas, .doc-modal-img { max-width: 100%; height: auto; display: block; margin: 0 auto;
    box-shadow: 0 1px 6px rgba(0,0,0,0.15); }

/* Document review: two-pane (document left, imported-values rail right). Falls
   back to a single column on narrow screens. */
.doc-modal.is-review { width: min(1180px, 97vw); }
.doc-review-split { display: grid; grid-template-columns: 1fr 340px; gap: 1rem; align-items: start; }
@media (max-width: 880px) { .doc-review-split { grid-template-columns: 1fr; } }
.doc-review-rail { display: flex; flex-direction: column; gap: 0.5rem; }
.doc-review-rail h4 { margin: 0 0 0.2rem; font-size: 0.92rem; }
.doc-review-rail .muted { font-size: 0.82rem; }

/* One imported value: literal span (on document) vs imported vs current client. */
.import-row {
    text-align: left; width: 100%; background: var(--surface, #fff);
    border: 1px solid var(--border, #e3e8e5); border-radius: 10px;
    padding: 0.5rem 0.6rem; cursor: pointer; display: flex; flex-direction: column; gap: 0.25rem;
}
.import-row:hover, .import-row.is-selected { border-color: var(--brand, #0a7c5b); box-shadow: 0 1px 6px rgba(10,124,91,0.18); }
.import-row-wrap { display: flex; flex-direction: column; gap: 0.25rem; }
.import-row-actions { display: flex; justify-content: flex-end; }
.import-remove { font-size: 0.8rem; padding: 0.15rem 0.45rem; }
.import-row-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.import-field { font-weight: 600; font-size: 0.86rem; }
.import-compare { display: grid; grid-template-columns: auto 1fr; gap: 0.1rem 0.5rem; font-size: 0.8rem; }
.import-compare dt { color: var(--muted, #6b7770); }
.import-compare dd { margin: 0; word-break: break-word; }
.import-compare dd.is-empty { color: var(--muted, #6b7770); font-style: italic; }

/* Status pills, keyed to the read-time backing status. */
.import-pill { font-size: 0.7rem; font-weight: 600; padding: 0.05rem 0.45rem; border-radius: 999px; white-space: nowrap; }
.import-pill.insync   { background: #e6f4ec; color: #1d6b3f; }
.import-pill.diverged { background: #fdecea; color: #a3271b; }
.import-pill.pending  { background: #fff4e0; color: #8a5a00; }
.import-pill.imported { background: #eef1f0; color: #56635c; }

/* Highlight rectangles drawn over the rendered page (pdfviewer.js). */
.pdf-overlay { pointer-events: none; }
.pdf-hl { position: absolute; pointer-events: auto; border-radius: 2px; box-sizing: border-box;
    border: 1px solid transparent; transition: background 0.15s, border-color 0.15s; }
.pdf-hl-imported { background: rgba(10,124,91,0.16); border-color: rgba(10,124,91,0.5); }
.pdf-hl-insync   { background: rgba(10,124,91,0.16); border-color: rgba(10,124,91,0.5); }
.pdf-hl-diverged { background: rgba(196,52,38,0.16); border-color: rgba(196,52,38,0.55); }
.pdf-hl-pending  { background: rgba(214,140,0,0.16); border-color: rgba(214,140,0,0.55); }
.pdf-hl-active { box-shadow: 0 0 0 3px rgba(10,124,91,0.45); background: rgba(10,124,91,0.30); }

/* Region select (manual highlight → apply). While active the overlay captures
   the drag, and a rubber-band box tracks the selection. */
.doc-modal-pdf.is-selecting .pdf-overlay { pointer-events: auto; cursor: crosshair; }
.doc-modal-pdf.is-selecting .pdf-hl { pointer-events: none; } /* don't fight the drag */
.pdf-region-temp { position: absolute; border: 1.5px dashed var(--brand, #0a7c5b);
    background: rgba(10,124,91,0.12); pointer-events: none; }

/* Manual highlight → apply: the toggle + the small apply form in the rail. */
.import-add-btn { width: 100%; }
.import-apply { display: flex; flex-direction: column; gap: 0.5rem;
    border: 1px solid var(--brand, #0a7c5b); border-radius: 10px; padding: 0.6rem; background: #fff; }
.import-apply-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
.import-apply-actions .btn-primary, .import-apply-actions .btn-ghost { width: auto; }

.ws-overview-actions { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem; }
.ws-overview-actions .btn-primary { width: auto; }
/* Delete client/prospect reads as destructive. */
.ws-delete-client { color: var(--danger); }
.ws-apply-status { color: var(--brand-dark); font-size: 0.88rem; }
.pack-picker { display: flex; flex-direction: column; gap: 1rem; }
.pack-hint { margin: 0; color: var(--muted); font-size: 0.85rem; }
.pack-list { display: flex; flex-direction: column; gap: 0.5rem; }
.pack-option {
    display: flex; flex-direction: column; gap: 0.2rem; text-align: left;
    padding: 0.7rem 0.9rem; border: 1px solid var(--border, #d8e0db);
    border-radius: 9px; background: var(--surface, #fff); cursor: pointer; width: 100%;
}
.pack-option:hover { border-color: var(--brand); }
.pack-option.selected { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.pack-name { font-weight: 600; }
.pack-desc { color: var(--muted); font-size: 0.82rem; }
.pack-preview { border-top: 1px solid var(--border, #e3e8e5); padding-top: 0.8rem; }
.pack-preview h4 { margin: 0 0 0.5rem; font-size: 0.9rem; }
.pack-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.pack-items li { display: flex; flex-direction: column; gap: 0.1rem; }
.pack-item-title { font-weight: 600; font-size: 0.9rem; }
.pack-item-cadence { color: var(--muted); font-size: 0.8rem; }
.pack-item-first { color: var(--brand-dark); font-size: 0.78rem; }
.pack-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
.pack-actions button { width: auto; }

/* Inline token menu (spec 2026-06-24): the "{"-triggered picker under a name
   field. The wrapper is the positioning context; the list overlays below the
   input rather than pushing the form down. */
.token-menu { position: relative; }
.token-menu-list {
    position: absolute; left: 0; right: 0; top: calc(100% + 2px);
    z-index: 30; margin: 0; padding: 0.25rem; list-style: none;
    background: var(--surface, #fff); border: 1px solid var(--border, #d8e0db);
    border-radius: 9px; box-shadow: 0 6px 18px rgba(3, 34, 65, 0.12);
    max-height: 14rem; overflow-y: auto;
}
.token-menu-list li { margin: 0; }
.token-menu-item {
    display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem;
    width: 100%; text-align: left; padding: 0.4rem 0.55rem;
    background: none; border: none; border-radius: 6px; cursor: pointer; font-size: 0.88rem;
}
.token-menu-item:hover, .token-menu-item:focus { background: var(--brand-wash, #eef5f1); }
.token-menu-sample { color: var(--muted); font-variant-numeric: tabular-nums; }

/* Firm-setup deadline-pack manager: an entity list, so a sortable data table
   (web-layout.md §5) reusing .client-table — not a card grid. The head row keeps
   "New pack" auto-width (not the .btn-primary 100% default) beside "Show archived". */
.pack-manager-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.8rem;
}
.pack-manager-head .btn-primary { width: auto; }
.client-table tr.archived { opacity: 0.6; }

/* ── Client Comms tab (ADR 0084) ───────────────────────────────────────── */
.comms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
/* Billing tab right column: Disbursements stacked above the Billing-contact card,
   so the column fills beside the (taller) fee-structure form. */
.billing-right { display: flex; flex-direction: column; gap: 1rem; }
.comms-card {
    border: 1px solid var(--border, #e3e8e5); border-radius: 11px;
    padding: 1rem 1.1rem; background: var(--surface, #fff);
    display: flex; flex-direction: column; gap: 0.6rem;
}
.comms-card h3 { margin: 0 0 0.2rem; font-size: 0.95rem; }
.comms-hint { font-size: 0.82rem; margin: 0; }
.comms-history { grid-column: 1 / -1; }
.comms-optout { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; cursor: pointer; }
.comms-optout input { width: auto; margin: 0; }
.comms-actions { display: flex; justify-content: flex-end; }
.comms-actions button { width: auto; }
/* Reopened correspondence body — preserve the message's line breaks. */
.correspondence-body { margin: 0; white-space: pre-wrap; line-height: 1.45; font-size: 0.9rem; }
/* "Draft with AI" control above the message box. */
.comms-ai-draft {
    display: flex; align-items: flex-end; gap: 0.6rem;
    padding: 0.6rem 0.7rem; margin-bottom: 0.2rem;
    background: var(--background, #f4f7f5); border-radius: 9px;
}
.comms-ai-draft > :first-child { flex: 1; margin: 0; }
.comms-ai-draft button { width: auto; white-space: nowrap; }
@media (max-width: 720px) { .comms-grid { grid-template-columns: 1fr; } }

/* ── Compliance calendar parity bits ───────────────────────────────────── */
.overdue-banner {
    display: block; width: 100%; text-align: left; margin: 0 0 0.8rem;
    padding: 0.55rem 0.9rem; border: 1px solid #f1d9b6; border-radius: 9px;
    background: #fdf0e3; color: #9a5a00; font-weight: 600; font-size: 0.85rem; cursor: pointer;
}
.overdue-banner:hover { filter: brightness(0.98); }
.cal-recur { color: var(--brand); font-weight: 700; text-align: center; }
.when { white-space: nowrap; font-size: 0.82rem; }
/* Per-row actions (2026-06-17 redesign). The old ~140px ragged wall of up to 7
   buttons is gone: a row shows ONE stage-driven primary plus a "⋯ More actions"
   button; the full set lives in the detail drawer (opened by clicking the row or
   the ⋯). One line, right-aligned, no wrapping. */
.deadline-actions { display: flex; flex-wrap: nowrap; gap: 0.35rem; justify-content: flex-end; align-items: center; }
.deadline-actions .row-edit { padding: 0.2rem 0.6rem; margin: 0; font-size: 0.8rem; }
.row-primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.row-primary:hover { filter: brightness(1.05); border-color: var(--brand); }
.row-more { padding: 0.2rem 0.5rem; font-weight: 700; line-height: 1; color: var(--muted); }
.row-more:hover { color: var(--brand); }

/* ── Row actions: inline action + ⋯ overflow menu (web-layout.md §5.4) ──────
   One shared shape for every grid. The wrap keeps the inline button + kebab on
   one line and anchors the dropdown; the menu mirrors the account dropdown so it
   reads as a sibling surface. */
.row-action-wrap { position: relative; display: inline-flex; align-items: center; gap: 0.35rem; }
/* Kebab gets a ≥24px hit area (web-layout.md §9). */
.row-more { min-width: 1.7rem; min-height: 1.7rem; display: inline-flex; align-items: center; justify-content: center; }
/* The danger-tinted row trigger (renamed from the misused .contact-remove). */
.row-action-danger { color: var(--danger); }
.row-action-danger:hover { border-color: var(--danger); }
/* Transparent outside-click catcher (same idiom as .account-backdrop). */
.row-menu-backdrop { position: fixed; inset: 0; z-index: 40; background: transparent; }
.row-menu {
    /* Positioned `fixed` and placed by rowmenu.js so the menu floats over the page
       instead of being clipped by the pane-body's overflow. The top/left below are a
       fallback for the brief moment before the JS runs (or if it fails to load). */
    position: fixed; top: 0; left: 0; z-index: 41;
    min-width: 200px; padding: 0.4rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; box-shadow: var(--shadow);
    display: flex; flex-direction: column; gap: 0.1rem;
}
.row-menu-item {
    width: 100%; text-align: left; padding: 0.5rem 0.6rem;
    font-size: 0.86rem; font-weight: 600; color: var(--text);
    background: none; border: none; border-radius: 8px; cursor: pointer;
}
.row-menu-item:hover:not(:disabled) { background: var(--background); }
.row-menu-item.danger { color: var(--danger); }
.row-menu-item.danger:hover:not(:disabled) { background: rgba(179, 55, 47, 0.08); }
.row-menu-item:disabled { opacity: 0.5; cursor: default; }
/* Clicking anywhere on a row opens its detail drawer. */
.clickable-row { cursor: pointer; }
.client-table tbody tr.clickable-row:hover { background: var(--background); }

/* Deadlines list (Ilse 2026-06-17): Client → Deadline → Due, 6 columns that fit a
   narrow/zoomed viewport without a horizontal scrollbar. Scoped to this table so
   the ~9 other panes on .client-table keep their normal shape. */
/* Tighter horizontal padding than the default 1.5rem so 6 columns + an action
   button fit a narrow pane without a horizontal scrollbar. */
.deadlines-table tbody td, .deadlines-table thead th { padding-left: 0.8rem; padding-right: 0.8rem; }
.deadlines-table .client-cell {
    max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.deadlines-table .due { white-space: nowrap; }
.deadlines-table .due-date { display: block; font-variant-numeric: tabular-nums; }
.deadlines-table .due-when { display: block; font-size: 0.78rem; }
.recur-inline { color: var(--brand); font-weight: 700; margin-left: 0.3rem; }
/* On a narrow/zoomed viewport, drop the Assignee column (still in the drawer)
   rather than overflow into a horizontal scrollbar. */
@media (max-width: 1024px) {
    .deadlines-table .col-assignee { display: none; }
}

/* Per-row detail/action drawer. */
.detail-head { display: flex; flex-direction: column; gap: 0.1rem; }
.detail-title { font-weight: 700; font-size: 1.02rem; }
.detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.detail-actions { display: flex; flex-direction: column; gap: 0.4rem; }
.detail-actions .row-edit { width: 100%; text-align: left; padding: 0.45rem 0.7rem; }
/* Destructive "Remove schedule" action, set off from the everyday actions above. */
.detail-actions.detail-danger { margin-top: 0.5rem; padding-top: 0.6rem; border-top: 1px solid var(--border); }
.detail-dismiss { margin-top: 0.3rem; }
.client-table .due { white-space: nowrap; }
.quick-resched { display: flex; gap: 0.4rem; }
.quick-resched .row-edit { width: auto; }
.btn-destructive { background: var(--danger, #b3372f); }

/* ── Calendar month grid ───────────────────────────────────────────────── */
.cal-nav { display: flex; align-items: center; gap: 0.3rem; }
.cal-step { width: auto; padding: 0.3rem 0.6rem; }
.cal-month-label { font-weight: 600; min-width: 140px; text-align: center; font-size: 0.92rem; }
.cal-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
    background: var(--border); border: 1px solid var(--border); border-radius: 8px;
    overflow: hidden; margin: 0 1.5rem 1rem;
}
.cal-dow {
    background: var(--surface); padding: 0.4rem; text-align: center;
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted);
}
.cal-cell { background: var(--surface); min-height: 92px; padding: 0.35rem; overflow: hidden; }
.cal-cell.other { background: #fafbfc; }
.cal-cell.other .cal-date { color: var(--border); }
.cal-cell.today { box-shadow: inset 0 0 0 2px var(--brand); }
.cal-date { font-size: 0.78rem; font-weight: 600; color: var(--muted); }
/* Calendar event chips are <button>s (clicking opens the deadline detail
   drawer) — reset the native button chrome so they still read as chips. */
.cal-event {
    display: block; width: 100%; text-align: left; cursor: pointer; border: none;
    margin-top: 0.25rem; padding: 0.12rem 0.4rem; border-radius: 5px;
    font-size: 0.72rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    background: rgba(10,124,91,0.12); color: var(--brand);
}
.cal-event:hover { filter: brightness(0.97); }
.cal-event.overdue { background: rgba(179,55,47,0.12); color: var(--danger); }
.cal-event.done { background: var(--background); color: var(--muted); text-decoration: line-through; }
.cal-more {
    display: block; width: 100%; text-align: left; cursor: pointer; border: none; background: none;
    font-size: 0.68rem; color: var(--muted); margin-top: 0.1rem; padding: 0.05rem 0.4rem;
}
.cal-more:hover { color: var(--brand); }

/* ── Client workspace ──────────────────────────────────────────────────── */
.workspace-head { align-items: center; }
.ws-back { width: auto; padding: 0.3rem 0.7rem; margin-bottom: 0.45rem; font-size: 0.84rem; }
.workspace-body { padding: 1.3rem 1.5rem; }
.ws-overview { max-width: 560px; margin: 0; }
.tx-head { display: flex; align-items: center; gap: 0.9rem; padding: 0 1.5rem 0.6rem; }
.tx-title { font-size: 0.88rem; font-weight: 600; color: var(--muted); }
.tx-actions { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.tx-export-select { max-width: 11rem; }
.tx-delete { color: var(--danger); }
.client-table .num, .client-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tx-credit { color: var(--brand); font-weight: 600; }
.tx-debit { color: var(--text); }
.tx-desc { font-weight: 500; }

/* Side-by-side statement review (PDF + transactions) */
.stmt-split { display: flex; gap: 1rem; padding: 0 1.5rem 1rem; height: calc(100vh - 270px); min-height: 360px; }
.pdf-pane { flex: 1.05; overflow-y: auto; background: #eef1f4; border: 1px solid var(--border); border-radius: 10px; padding: 0.6rem; }
.pdf-page { display: block; margin: 0 auto 0.6rem; max-width: 100%; box-shadow: 0 1px 5px rgba(0,0,0,0.18); border-radius: 2px; }
.pdf-loading { padding: 1.4rem; color: var(--muted); text-align: center; }
.ws-docs-bar { padding: 0 1.5rem 0.8rem; display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
/* Coding-history helper line: align with the docs bar's 1.5rem left padding. */
.ws-coding-hint { padding: 0 1.5rem 0.8rem; }
.doc-upload-field { width: auto; padding: 0.45rem 0.6rem; font-size: 0.9rem; }
.ws-upload-err { color: var(--danger); font-size: 0.85rem; }
.ws-drop-note { color: var(--muted); font-size: 0.85rem; margin-left: auto; }
/* Drag-drop door (ADR 0078): the whole document area accepts attachments dragged
   out of a desktop mail client / file manager. The hint overlay + dashed outline
   appear only while a drag is over the area (JS toggles .is-dragover). */
.ws-docs-drop { position: relative; }
.ws-docs-drop.is-dragover { outline: 2px dashed var(--brand); outline-offset: -4px; border-radius: 8px; }
.ws-docs-drophint { display: none; }
.ws-docs-drop.is-dragover .ws-docs-drophint {
    display: flex; align-items: center; justify-content: center;
    position: absolute; inset: 0; z-index: 5; pointer-events: none;
    background: rgba(46, 139, 87, 0.08); border-radius: 8px;
    color: var(--brand); font-weight: 600;
}
/* Documents-tab file chips: each filed document, click to open. */
.ws-doc-files { display: flex; flex-wrap: wrap; gap: 0.4rem; }
/* Per-document "Manage" affordance + inline panel (Slice A). */
.ws-doc-file { display: flex; flex-direction: column; gap: 0.3rem; }
.ws-doc-file-row { display: flex; align-items: center; gap: 0.3rem; }
.doc-manage-toggle { font-size: 0.8rem; padding: 0.1rem 0.4rem; }
.doc-manage-panel {
    display: flex; flex-direction: column; gap: 0.5rem;
    padding: 0.6rem; border: 1px solid var(--border); border-radius: 8px;
    background: var(--surface); max-width: 22rem;
}
.doc-manage-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
.doc-manage-cold { display: flex; justify-content: flex-start; border-top: 1px solid var(--border); padding-top: 0.5rem; }
.doc-cold-badge { font-size: 0.72rem; color: var(--bar-blue, #053361); background: rgba(5,51,97,0.08); border-radius: 999px; padding: 0.05rem 0.4rem; margin-left: 0.3rem; }
.tx-pane { flex: 1; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; }
.tx-pane .client-table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); }
.tx-pane .client-table tbody td { padding: 0.45rem 0.9rem; font-size: 0.86rem; }
/* Editable category cell + learned-suggestion chip */
.tx-cat { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.tx-cat-input { min-width: 8rem; padding: 0.2rem 0.45rem; font-size: 0.82rem; }
.tx-suggest {
    border: 1px dashed var(--brand); color: var(--brand-dark); background: rgba(10,124,91,0.08);
    border-radius: 999px; padding: 0.1rem 0.55rem; font-size: 0.78rem; cursor: pointer; white-space: nowrap;
}
.tx-suggest:hover { background: rgba(10,124,91,0.16); }
@media (max-width: 720px) { .stmt-split { flex-direction: column; height: auto; } }

/* ── Settings ──────────────────────────────────────────────────────────── */
/* Firm-setup content fills the pane (desktop-first; the deadline-pack table and
   jurisdiction list want the width). Plain forms inside the cards cap themselves
   below so single inputs stay readable rather than stretching across the pane. */
.settings-stack { display: flex; flex-direction: column; gap: 1.2rem; padding: 1.3rem 1.5rem; }
.settings-card { padding: 1.2rem 1.3rem; border: 1px solid var(--border); border-radius: 12px; }
/* Forms read better in a column; tables (.client-table) and the space-between
   rows (.learned-recipe-row, .toggle-row) still fill the now-wider card. */
.settings-card .form-stack,
.settings-card > .form-field { max-width: 640px; }
/* The settings-card action row no longer needs a per-card override — the base
   .form-button-row is contained by default now (full-bleed sticky is drawer-only),
   so it sits cleanly inside the card outline here, in comms-card, and everywhere. */
.settings-card h2 { margin: 0 0 0.3rem; font-size: 1.05rem; }
.settings-help { margin: 0 0 0.9rem; font-size: 0.86rem; color: var(--muted); line-height: 1.5; }
.toggle-row { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; cursor: pointer; }
.toggle-row input { width: 1.1rem; height: 1.1rem; accent-color: var(--brand); }
/* Learned-recipe candidate row (confirm a layout Practicore can read). */
.learned-recipe-row { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
    padding: 0.55rem 0; border-top: 1px solid var(--border); }
.learned-recipe-info { display: flex; flex-direction: column; gap: 0.1rem; }
.learned-recipe-info .settings-help { margin: 0; }
.learned-recipe-row .btn-ghost { width: auto; flex: none; }

/* Active-sessions list (My Account). One row per live sign-in; the current one
   carries a small brand-tinted "This device" tag. */
.session-list { list-style: none; margin: 0 0 0.9rem; padding: 0; }
.session-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0; border-bottom: 1px solid var(--border); font-size: 0.88rem; }
.session-row:last-child { border-bottom: 0; }
.session-when { color: var(--muted); }
.session-current { margin-left: auto; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; color: var(--brand); background: var(--background); border: 1px solid var(--border); }

/* ── Accessibility: sr-only + visible focus ────────────────────────────── */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* A visible focus ring for keyboard users on every interactive surface. */
.btn-primary:focus-visible, .btn-ghost:focus-visible, .row-edit:focus-visible,
.nav-item:focus-visible, .pane-doc:focus-visible, .scope-clear:focus-visible,
.drawer-close:focus-visible, .auth-tab:focus-visible,
.cal-event:focus-visible, .cal-more:focus-visible,
.row-more:focus-visible, .row-menu-item:focus-visible,
.birthday-name-link:focus-visible,
.client-table tbody tr:focus-visible {
    outline: 2px solid var(--brand); outline-offset: 2px;
}
.client-table tbody tr:focus-visible { outline-offset: -2px; }
.pane-body { overflow-x: auto; } /* wide tables scroll rather than overflow the pane */

/* ── Responsive (PWA on a phone) ───────────────────────────────────────── */
@media (max-width: 720px) {
    .shell-bar { flex-wrap: wrap; gap: 0.5rem; padding: 0.7rem 1rem; }
    .scope-chip { margin-left: 0; order: 3; max-width: 100%; }
    .scope-chip .scope-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .shell-main { flex-direction: column; }
    /* The rail becomes a wrapping row of pills under the bar — every section is
       reachable without a sideways scroll that clips "Margins" → "argins". */
    .nav-rail {
        width: 100%; display: flex; flex-wrap: wrap; gap: 0.3rem;
        border-right: none; border-bottom: 1px solid var(--border); padding: 0.5rem 0.7rem;
    }
    /* The header collapse toggle drives a desktop-width rail; on a phone the rail
       is a wrapping pill row, so the toggle is meaningless — hide it. */
    .nav-collapse { display: none; }
    .nav-rail.collapsed { width: 100%; }
    .nav-rail.collapsed .nav-label { display: inline; }
    .nav-section-label { display: none; }
    .nav-item { width: auto; white-space: nowrap; margin: 0; }
    .shell-content { padding: 1rem; }
    .shell-content .pane { border-radius: 12px; }
    .pane-head { flex-direction: column; align-items: stretch; gap: 0.6rem; }
    .pane-toolbar-row { flex-wrap: wrap; }
    .pane-search { width: 100%; }
    .drawer-panel { max-width: 100%; }

    /* Shared tables (deadlines, audit, billing, …) keep their column shape but
       lose the roomy desktop padding so they don't overflow as hard; the
       pane-body's overflow-x:auto still lets a genuinely wide one scroll. */
    .client-table thead th { padding: 0.5rem 0.7rem; }
    .client-table tbody td { padding: 0.55rem 0.7rem; }

    /* Clients roster → one labelled card per client. The header row is hidden
       (each cell carries its own label via data-label), so 6 columns that never
       fit a phone width become a readable stack — no horizontal scroll, no name
       wrapping onto four lines. */
    .roster-table thead {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
    }
    .roster-table, .roster-table tbody, .roster-table tr, .roster-table td { display: block; width: 100%; }
    .roster-table tbody tr {
        margin: 0 0 0.7rem; padding: 0.3rem 0;
        border: 1px solid var(--border); border-radius: 12px;
    }
    .roster-table tbody tr:last-child { margin-bottom: 0; }
    .roster-table tbody td {
        display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
        padding: 0.4rem 0.9rem; border: none; text-align: right;
    }
    /* The cell's label, drawn from data-label, sits on the left of each row. */
    .roster-table tbody td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto; text-align: left;
        font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em;
        text-transform: uppercase; color: var(--muted);
    }
    /* Name = the card heading: full-width, larger, no label, left-aligned. */
    .roster-table tbody td.name {
        flex-wrap: wrap; justify-content: flex-start; text-align: left;
        font-size: 1.02rem; padding-top: 0.6rem;
    }
    .roster-table tbody td.name::before { display: none; }
    /* Actions row: buttons span the card, no label. */
    .roster-table tbody td.row-actions {
        justify-content: flex-start; flex-wrap: wrap; gap: 0.5rem; text-align: left;
        padding-top: 0.6rem;
    }
    .roster-table tbody td.row-actions::before { display: none; }
    .roster-table .row-edit { flex: 1 1 auto; }
}

/* ── Boot / loading ────────────────────────────────────────────────────── */
.boot-text, .auth-tagline { color: var(--muted); }
.boot-screen { flex-direction: column; gap: 0.6rem; }

/* ── Blazor framework bits (kept, recoloured) ──────────────────────────── */
.loading-progress {
    position: relative; display: block;
    width: 8rem; height: 8rem; margin: 20vh auto 1rem auto;
}
.loading-progress circle {
    fill: none; stroke: #e0e0e0; stroke-width: 0.6rem;
    transform-origin: 50% 50%; transform: rotate(-90deg);
}
.loading-progress circle:last-child {
    stroke: var(--brand);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}
.loading-progress-text {
    position: absolute; text-align: center; font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); }

#blazor-error-ui {
    background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,0.2);
    display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }
.blazor-error-boundary { background: var(--danger); padding: 1rem; color: white; }
.blazor-error-boundary::after { content: "An error has occurred."; }

/* Billing — disbursement quick-add row + status-filter select. */
.disb-add { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; flex-wrap: wrap; }
.disb-add .control { flex: 1; min-width: 8rem; }
.disb-add .disb-amount { flex: 0 0 7rem; }
.disb-add .disb-date { flex: 0 0 9.5rem; }
.disb-add button { width: auto; }
.billing-filter { width: auto; min-width: 11rem; }
.billing-ref { font-size: 0.8rem; margin-left: 0.3rem; }

/* ── Agenda Day-view (ADR 0086 triage list) ─────────────────────────────── */
/* Groups (Overdue / Today / This week / Scheduled / Outstanding). */
.agenda-group { margin-bottom: 1.2rem; }
/* Section heading: matches .form-section-title and .nav-section-label —
   small caps, letter-spaced, var(--muted). .overdue switches to --danger. */
.agenda-group-head {
    margin: 0 0 0.3rem;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--muted);
    padding: 0 1.5rem;
}
/* Overdue section header stays calm (muted) — the red lives on the row's status
   pill, not stacked across header + subtitle + pill (Ilse "too much red" 2026-07-01). */
.agenda-group-head.overdue { color: var(--muted); }

/* Stat tiles (StatTile.razor) — headline-count cards; the Agenda's "what needs my
   attention" strip lays two out in .agenda-tiles, but the tile itself is generic. */
.agenda-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; padding: 0.3rem 1.5rem 1.1rem; }
.stat-tile {
    display: flex; flex-direction: column; gap: 0.15rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--border); border-radius: 0.7rem;
    background: var(--surface);
}
.stat-tile-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.stat-tile-value { font-size: 1.9rem; font-weight: 700; line-height: 1.1; color: var(--brand-navy); }
.stat-tile-sub { font-size: 0.82rem; color: var(--muted); }
/* An emphasised tile keeps its big number navy (calm); only the small sub-line
   carries a single red cue (e.g. the Overdue tile's "oldest N days"). */
.stat-tile.alert .stat-tile-sub { color: var(--danger); }

/* Bar chart (WeekBarChart.razor) — a calm sparkline; the flagged bar is accented
   brand-green, empty bars a faint stub. */
.bar-chart {
    margin: 0 1.5rem 1.1rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--border); border-radius: 0.7rem;
    background: var(--surface);
}
.bar-chart-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.6rem; }
.bar-chart-total { font-size: 1.05rem; font-weight: 700; color: var(--brand-navy); }
.bar-chart-bars { display: flex; align-items: flex-end; gap: 0.55rem; height: 3.4rem; }
.bar-chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; height: 100%; }
/* Track = the full-height column the bar grows within (bars align to a baseline). */
.bar-chart-track { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.bar-chart-bar {
    width: 100%; border-radius: 0.35rem 0.35rem 0 0;
    background: var(--background);
    transition: height 0.2s;
}
/* A bar with a value is soft brand-green; the flagged (today) bar is the full
   accent, so "did I ship today" reads instantly. Empty bars stay a faint stub. */
.bar-chart-bar.has { background: rgba(10, 124, 91, 0.30); }
.bar-chart-bar.today.has { background: var(--brand); }
.bar-chart-label { font-size: 0.7rem; color: var(--muted); }
/* Each triage row is a two-line card (Ilse 2026-07-01, mirroring the marketing
   "what needs my attention today" mock): merged heading over a muted subtitle on
   the left, a status pill cluster trailing right. Bottom border separates items. */
.agenda-row {
    display: flex; align-items: center; gap: 0.85rem;
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--background);
    transition: background 0.1s;
}
/* Soft brand-tinted icon square — one calm tint for every row (kind glyph, not a
   second colour system), giving the list the marketing mock's left-edge rhythm. */
.agenda-icon {
    flex-shrink: 0;
    width: 2.25rem; height: 2.25rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 0.6rem;
    background: rgba(10, 124, 91, 0.10);
    color: var(--brand);
}
.agenda-icon svg { width: 1.15rem; height: 1.15rem; }
/* .clickable-row already sets cursor:pointer; this adds the hover wash. */
.agenda-row.clickable-row:hover { background: var(--background); }
/* Non-clickable info rows (reminders strip) — no pointer, slightly muted. */
.agenda-info { opacity: 0.82; }

/* Card body — grows to fill; min-width:0 lets the heading actually ellipsize
   inside the flex row instead of forcing the pill off the edge. */
.agenda-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.12rem; }
/* Heading = "Obligation · Client" as ONE truncating line. The client is a muted
   qualifier at regular weight (not a co-title), and the whole line ellipsizes as
   a unit — a long obligation name never wraps or shoves the client out of view. */
.agenda-heading { min-width: 0; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda-title { font-weight: 600; }
.agenda-sep { color: var(--muted); }
.agenda-client { color: var(--muted); font-weight: 400; }
/* Subtitle — the human due phrase / outstanding count. */
.agenda-sub { font-size: 0.82rem; color: var(--muted); line-height: 1.3; }
/* Inline kind marker (e.g. "Follow-up") ahead of the subtitle text. */
.agenda-tag { text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.04em; font-weight: 700; color: var(--muted); margin-right: 0.3rem; }
/* Status trail — the pill cluster + primary action, pinned right. */
.agenda-trail { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }
/* Day-nav control strip — aligns with .cal-nav in the month view. */
.agenda-day-nav { display: flex; align-items: center; gap: 0.3rem; }

/* ── Sub-tasks (ADR 0103 §9a) — the obligation's work breakdown in the detail
   drawer. Each row mirrors .agenda-row so a sub-task "quacks" like a full
   agenda item: flex, hover wash, grow-title, muted due, stage-driven action. */
.subtasks-section { margin-top: 1rem; }
.subtasks-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.subtask-row {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.45rem 0.2rem;
    border-bottom: 1px solid var(--background);
    transition: background 0.1s;
}
.subtask-row.clickable-row:hover { background: var(--background); }
.subtask-title { flex: 1; font-weight: 600; }
.subtask-due { font-size: 0.82rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.subtask-due.overdue { color: var(--danger); font-weight: 600; }
.subtask-add { padding: 0.5rem 0; }

/* ── Feedback: floating toasts (FeedbackHost/FeedbackToast) ────────────────
   The single fixed-position stack, bottom-right. Two live regions (polite +
   assertive) stack visually as one column. Tones reuse the same tints as
   .status-line so the palette stays consistent and AA-checked. */
.feedback-stack {
    position: fixed; bottom: 1.1rem; right: 1.1rem; z-index: 1200;
    display: flex; flex-direction: column; gap: 0.55rem;
    max-width: 26rem; pointer-events: none;
}
.feedback-region { display: flex; flex-direction: column; gap: 0.55rem; }
.feedback-toast {
    pointer-events: auto;             /* the stack is click-through; cards are not */
    display: flex; align-items: flex-start; gap: 0.55rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--border);
    border-left: 3px solid var(--brand-navy);   /* tone overrides below */
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 6px 18px rgba(12,35,64,0.16);
    font-size: 0.87rem; color: var(--text);
}
.feedback-toast-icon { font-weight: 700; line-height: 1.4; }
.feedback-toast-text { flex: 1; }
.feedback-toast-dismiss {
    border: none; background: transparent; cursor: pointer;
    color: var(--muted); font-size: 0.9rem; line-height: 1;
    padding: 0.1rem 0.2rem; border-radius: 5px;
}
.feedback-toast-dismiss:hover { color: var(--text); }
.feedback-toast-dismiss:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* ── Feedback: inline result banner (ResultBanner) ─────────────────────────
   Sits INSIDE a pane/form/wizard step — the richer sibling of .status-line. */
.result-banner {
    display: flex; gap: 0.6rem; align-items: flex-start;
    margin: 0.6rem 0 1rem; padding: 0.7rem 0.85rem;
    border: 1px solid var(--border);
    border-left: 3px solid var(--brand-navy);   /* tone overrides below */
    border-radius: 8px; background: var(--surface);
    font-size: 0.88rem;
}
.result-banner-icon { font-weight: 700; line-height: 1.4; }
.result-banner-body { flex: 1; }
.result-banner-headline { margin: 0; font-weight: 600; color: var(--text); }
.result-banner-reasons { margin: 0.35rem 0 0; padding-left: 1.1rem; color: var(--muted); }
.result-banner-reasons li { margin: 0.1rem 0; }
.result-banner-detail { margin-top: 0.4rem; color: var(--muted); }
.result-banner-actions { margin-top: 0.6rem; }
.result-banner-dismiss {
    border: none; background: transparent; cursor: pointer;
    color: var(--muted); font-size: 0.9rem; line-height: 1;
    padding: 0.1rem 0.2rem; border-radius: 5px;
}
.result-banner-dismiss:hover { color: var(--text); }
.result-banner-dismiss:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* ── Shared tones (toast + banner) ─────────────────────────────────────────
   Accent rule + tint + icon colour. Success uses --brand green (--brand-lime
   fails AA as small text); error/warn reuse the .status-line tints exactly. */
.feedback-toast.tone-success, .result-banner--success { border-left-color: var(--brand); background: rgba(10,124,91,0.07); }
.feedback-toast.tone-success .feedback-toast-icon, .result-banner--success .result-banner-icon { color: var(--brand); }
.feedback-toast.tone-error,   .result-banner--error   { border-left-color: var(--danger); background: rgba(179,55,47,0.08); }
.feedback-toast.tone-error   .feedback-toast-icon, .result-banner--error   .result-banner-icon { color: var(--danger); }
.feedback-toast.tone-warning, .result-banner--warning { border-left-color: var(--warn); background: rgba(214,158,46,0.12); }
.feedback-toast.tone-warning .feedback-toast-icon, .result-banner--warning .result-banner-icon { color: var(--warn); }
.feedback-toast.tone-info,    .result-banner--info    { border-left-color: var(--brand-navy); }
.feedback-toast.tone-info    .feedback-toast-icon, .result-banner--info    .result-banner-icon { color: var(--brand-navy); }

/* Entrance animation only when the user hasn't asked to reduce motion. */
@media (prefers-reduced-motion: no-preference) {
    .feedback-toast { animation: feedback-slide-in 0.16s ease-out; }
    @keyframes feedback-slide-in {
        from { opacity: 0; transform: translateY(0.4rem); }
        to   { opacity: 1; transform: none; }
    }
}

/* Narrow viewports: full-width stack with side margins. */
@media (max-width: 30rem) {
    .feedback-stack { left: 0.7rem; right: 0.7rem; max-width: none; }
}