/* ============================================================
   PayrollUno — "clear ledger" design system, v3
   ------------------------------------------------------------
   Design intent: payroll software must feel PRECISE and CALM,
   and the public site must feel FRIENDLY without overselling.
   - Money is always monospaced with tabular numerals (.fig), so
     columns of figures line up like a real ledger.
   - One brand blue for actions, one amber accent used sparingly,
     green strictly for "good/active", red strictly for
     deductions/danger.
   - Cool paper background + white cards + hairline borders.

   ★ CUSTOMIZING THE THEME ★
   Every color in the app derives from the token block below.
   To re-theme the whole product (marketing site AND app), edit
   ONLY this :root block. Semantic names, not color names, so a
   rebrand never requires touching a page:
     --brand-*  = primary action color (buttons, links, focus)
     --accent   = small highlights (brand dot, marketing flourishes)
     --ok-*     = positive status (Active, Processed)
     --warn-*   = caution (Draft, warnings)
     --danger-* = deductions, destructive actions, errors
     --ink-*    = text     --paper/--card = surfaces   --hair = borders
   Fonts are SELF-HOSTED (wwwroot/fonts, @font-face below) since
   2026-07-11 — no Google Fonts request, so pages render identically
   with no internet and leak no visitor IPs to a third party. To
   change fonts: replace the woff2 files + @font-face blocks + the
   --ui / --mono tokens together.

   All class names are a stable contract with the Razor pages —
   restyle freely, but never rename without checking usages.
   ============================================================ */

/* ---- Self-hosted fonts (subset files from Google Fonts) ------
   Figtree ships as a VARIABLE font: one file covers weights
   400–800. IBM Plex Mono is static: one file per weight.
   unicode-range lets the browser skip the latin-ext files unless
   a page actually uses those characters (accented names, etc.). */
@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('fonts/figtree-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('fonts/figtree-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* ---- EDIT ME: palette ---------------------------------- */
    --ink:         #16233A;   /* navy-black text */
    --ink-soft:    #46566E;   /* secondary text */
    --ink-faint:   #63738C;   /* AA on card+paper (D-085; was #7E8DA4 at 3.4:1) */   /* hints, labels */
    --paper:       #F5F8FC;   /* app background (cool blue-grey) */
    --card:        #FFFFFF;

    --brand:       #2F6CC4;   /* cobalt blue — primary actions */
    --brand-deep:  #1F4E96;
    --brand-soft:  #5288D6;
    --brand-wash:  #E9F1FB;

    --navy:        #122442;   /* sidebar / marketing footer */
    --navy-deep:   #0C1930;

    --accent:      #F0A836;   /* warm amber — sparing highlights */
    --accent-wash: #FBF1DC;

    --ok:          #247B4C;   /* AA on --ok-wash (D-085) */   /* positive status */
    --ok-wash:     #E6F4EB;
    --warn:        #926418;   /* AA on --warn-wash (D-085; was 3.1:1) */   /* caution */
    --warn-wash:   #FAF1DE;
    --danger:      #BC443D;   /* AA on --danger-wash (D-085) */   /* deductions / destructive */
    --danger-wash: #FAECEB;

    --hair:        #E1E7EF;   /* hairline borders */
    --hair-soft:   #ECF1F7;

    /* ---- EDIT ME: type + shape ----------------------------- */
    --ui:   'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    --r: 14px;       /* card radius */
    --r-sm: 9px;
    --shadow:      0 1px 2px rgba(18,36,66,.05), 0 8px 24px rgba(18,36,66,.06);
    --shadow-lift: 0 2px 4px rgba(18,36,66,.06), 0 14px 36px rgba(18,36,66,.10);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--ui);
    background: var(--paper);
    color: var(--ink);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.015em; margin: 0; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-soft); }

::selection { background: var(--brand-wash); }

/* Keyboard accessibility: a visible ring on focused controls. */
:focus-visible { outline: 2px solid var(--brand-soft); outline-offset: 2px; }

/* …but not on headings: FocusOnNavigate (Routes.razor) programmatically
   focuses each page's h1 after navigation/refresh so screen readers
   announce the new page. The browser counts that as :focus-visible (no
   pointer was involved), which drew the ring above as a mystery blue box
   around every page title. The focus itself stays — only the ring goes;
   headings aren't interactive, so keyboard users lose nothing. */
h1:focus, h1:focus-visible { outline: none; }

/* Secondary/hint text used throughout pages. */
.sub { color: var(--ink-faint); font-size: .82rem; }

/* Money / figures — the signature treatment. Tabular numerals make
   digits equal width so amounts align vertically in tables. */
.fig {
    font-family: var(--mono);
    font-feature-settings: 'tnum' 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.fig-neg { color: var(--danger); }

/* ---------- App shell ---------- */
.shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 250px;
    flex-shrink: 0;
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 22px 16px;
    position: sticky;
    top: 0;
    height: 100vh;
    /* The nav scrolls on its own (2026-09-04). Without this the column
       is pinned to 100vh with no scroll of its own: a wheel over it
       falls through to the page, and on a short laptop viewport the
       bottom admin links + footer are simply cut off. With it, the
       wheel scrolls the nav while it has somewhere to go and then
       chains to the page — no overscroll-behavior:contain here on
       purpose, a nav that fits the viewport must still let the wheel
       reach the page or it feels dead. */
    overflow-y: auto;
    scrollbar-width: thin;                                  /* Firefox */
    scrollbar-color: rgba(255,255,255,.28) transparent;
}
/* WebKit/Blink: the global 10px paper-bordered scrollbar (further down)
   looks wrong on the navy column — slim, translucent thumb instead. */
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.28); border: 0; border-radius: 3px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.45); }
/* Brand + the hide-menu toggle on one row (spacing lives here now,
   not on .brand, so the two stay vertically centred on each other). */
.sidebar-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 0 20px 10px;
}
.brand {
    display: flex; align-items: baseline; gap: 2px;
    font-weight: 800; font-size: 1.2rem; letter-spacing: -0.02em;
}
.brand .dot { color: var(--accent); }

/* Inside the dark sidebar the toggle inverts to the light-on-navy scheme. */
.sidebar .sidebar-toggle {
    border-color: rgba(255,255,255,.22);
    color: rgba(255,255,255,.75);
}
.sidebar .sidebar-toggle:hover {
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.4);
    color: #fff;
}

/* Sidebar visibility is toggled from the topbar (MainLayout adds
   .sidebar-closed to .shell). display:none — not a transform — so the
   main column reflows to take the full width when the menu is hidden.
   THREE shell states since the mobile layout (2026-08-13):
     .sidebar-open   — user wants the nav visible
     .sidebar-closed — user hid it
     .sidebar-auto   — prerender, before the browser width is known:
                       desktop shows the column (this default), phones
                       keep the drawer closed (mobile block below).
   The desktop default is "visible", so only -closed needs a rule. */
.shell.sidebar-closed .sidebar { display: none; }

/* Desktop: in the pre-measure auto state the sidebar column is visible,
   so the topbar's hamburger (rendered for auto so phones always have
   it) must hide — two menu toggles at once is a glitch, not a feature.
   The backdrop only exists for the phone drawer. */
@media (min-width: 901px) {
    .shell.sidebar-auto .topbar .sidebar-toggle { display: none; }
    .nav-backdrop { display: none; }
}

.sidebar-toggle {
    background: none; border: 1px solid var(--hair); border-radius: var(--r-sm);
    width: 34px; height: 34px; flex-shrink: 0;
    font-size: 1rem; line-height: 1; color: var(--ink-soft);
    cursor: pointer; transition: background .12s, color .12s;
}
.sidebar-toggle:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav .eyebrow { font-size: .64rem; text-transform: uppercase; letter-spacing: .12em;
    color: rgba(255,255,255,.42); padding: 16px 11px 6px; }
.nav a, .nav-link {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 11px; border-radius: var(--r-sm);
    color: rgba(255,255,255,.75); font-weight: 500; font-size: .92rem;
    transition: background .12s, color .12s;
    border-left: 2px solid transparent;
}
.nav a:hover, .nav-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav a.active, .nav-link.active {
    background: var(--brand); color: #fff;
    border-left-color: var(--accent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}

/* Sidebar emphasis tiers (2026-08-12, tester feedback). Tier 1 is the
   ONE call-to-action (Run Payroll): solid amber fill, navy label —
   the loudest thing in the sidebar by design. Tier 2 (.nav-featured:
   Payroll History, Remittances) wears the hairline amber outline the
   CTA used to wear — clearly featured, clearly below the fill.
   Active keeps the standard --brand fill on all tiers so the
   current-page language stays consistent. MainLayout drops .nav-cta
   for access levels that can't run payroll (D-029). */
.nav-link.nav-cta {
    background: var(--accent);
    border: 1px solid var(--accent);
    border-left-width: 2px;      /* keep the shared active-marker geometry */
    padding: 8px 11px;           /* compensate the top/bottom border — rows stay aligned */
    color: var(--navy-deep);
    font-weight: 700;
}
.nav-link.nav-cta:hover { background: #F6B44E; color: var(--navy-deep); }
.nav-link.nav-cta.active { background: var(--brand); border-color: var(--accent); color: #fff; }

.nav-link.nav-featured {
    border: 1px solid rgba(240, 168, 54, .55);   /* --accent at 55% */
    border-left-width: 2px;
    padding: 8px 11px;
    color: #fff;
    font-weight: 600;
}
.nav-link.nav-featured:hover { background: rgba(240, 168, 54, .12); }
.nav-link.nav-featured.active { background: var(--brand); border-color: var(--accent); }

.sidebar .foot { margin-top: auto; font-size: .7rem; color: rgba(255,255,255,.38);
    padding: 12px 10px 4px; border-top: 1px solid rgba(255,255,255,.1); }

/* ---------- Main ---------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
    height: 60px; flex-shrink: 0;
    border-bottom: 1px solid var(--hair);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 32px;
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(8px);
    position: sticky; top: 0; z-index: 10;
}
.topbar .ctx { font-size: .82rem; color: var(--ink-soft); }
.topbar .ctx strong { color: var(--ink); font-weight: 700; }

/* ---------- Topbar user menu (D-081) — the ONE identity control:
   email ▾ opens Account + Sign out. A native <details> so it works
   before the circuit connects and needs no JS; the inline
   `open=false` on the links closes it across enhanced navigation
   (the MarketingShell dropdown lesson). ---------- */
.user-menu { position: relative; }
.user-menu > summary {
    list-style: none; cursor: pointer; user-select: none;
    display: flex; align-items: center; gap: 6px;
    padding: 6px 10px; border-radius: 8px;
    font-size: .82rem; color: var(--ink-soft);
}
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu > summary:hover { background: var(--hair-soft, #EEF2F7); color: var(--ink); }
.user-menu[open] > summary { background: var(--hair-soft, #EEF2F7); color: var(--ink); }
.user-menu .caret { font-size: .65rem; color: var(--ink-faint); }
.user-menu-panel {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
    min-width: 180px; padding: 6px;
    background: #fff; border: 1px solid var(--hair);
    border-radius: 10px; box-shadow: 0 10px 30px rgba(22,35,58,.12);
    display: flex; flex-direction: column;
}
.user-menu-panel a {
    display: block; padding: 8px 10px; border-radius: 7px;
    font-size: .85rem; color: var(--ink); text-decoration: none;
}
.user-menu-panel a:hover { background: var(--hair-soft, #EEF2F7); }
/* Menu items that are BUTTONS (the "?" menu's Report a problem) look
   identical to the link items. */
.user-menu-panel button {
    display: block; width: 100%; text-align: left;
    padding: 8px 10px; border-radius: 7px; border: 0; background: none;
    font: inherit; font-size: .85rem; color: var(--ink); cursor: pointer;
}
.user-menu-panel button:hover { background: var(--hair-soft, #EEF2F7); }
/* The "?" trigger — a quiet circle (D-084). */
.help-menu > summary { padding: 0; }
.help-glyph {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    border: 1px solid var(--hair); color: var(--ink-soft);
    font-size: .8rem; font-weight: 700;
}
.help-menu > summary:hover .help-glyph,
.help-menu[open] > summary .help-glyph { color: var(--ink); border-color: var(--ink-faint); }
/* The email truncates at EVERY width (long addresses were the main
   overflow driver on 900–1150px laptops once the D-090 search box
   joined the topbar); the cap just tightens as the viewport shrinks.
   Identity stays visible — hover/the menu shows the full address. */
.user-menu > summary .user-email {
    max-width: 220px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 1150px) {
    .user-menu > summary .user-email { max-width: 140px; }
}
@media (max-width: 900px) {
    .user-menu > summary .user-email { max-width: 110px; }
}
/* Full-bleed: pages use every pixel the sidebar leaves them (the old
   1120px cap made wide tables wrap their action buttons). */
.content { padding: 32px; width: 100%; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between;
    margin-bottom: 24px; gap: 16px; flex-wrap: wrap; }
.page-head .sub { color: var(--ink-faint); font-size: .9rem; margin-top: 4px; }

/* Run-detail actions (Payroll History): a COLUMN of two rows at every
   width (tester feedback 2026-08-14) — navigation (Back + View) on
   top, the "Download as:" group on its own line below. Right-aligned
   beside the H1 on desktop; the mobile block centers everything once
   the page-head stacks. Rows wrap internally — an unwrapped button
   row once forced the whole page to pan sideways on phones. */
.run-actions {
    display: flex; flex-direction: column; gap: 8px;
    align-items: flex-end;
    /* When the page-head wraps this column onto its own line, a lone
       flex line sits LEFT under space-between — auto margin keeps the
       group hugging the right edge instead. (The mobile block's
       flex-basis:100% + center overrides this on phones.) */
    margin-left: auto;
}
/* align-items:flex-start keeps button TOPS level — the .zip-stack is
   taller than its neighbours. */
.run-actions-row {
    display: flex; flex-wrap: wrap; gap: 8px;
    align-items: flex-start; justify-content: flex-end;
}
/* The "Download as:" label — optically aligned with the button text
   beside it (top-aligned rows put bare text at the buttons' top edge). */
.run-actions .run-actions-label { padding-top: 10px; }
/* ZIP button + its how-to-extract note as ONE flex item, so the note
   sits directly under the button it explains wherever the row wraps. */
.zip-stack { display: inline-flex; flex-direction: column; gap: 4px; align-items: center; }
.zip-stack .zip-help { font-size: .72rem; max-width: 210px; text-align: center; line-height: 1.4; }

/* ---------- Card ---------- */
.card {
    background: var(--card);
    border: 1px solid var(--hair);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    overflow: hidden;   /* table row hovers respect the rounded corners */
}
.card-pad { padding: 24px 26px; }
.card + .card { margin-top: 18px; }
/* Forms don't benefit from full-bleed the way tables do — unbounded
   two-column inputs on a wide monitor are a reading-width problem, so
   create/edit form cards cap themselves while the page stays full width. */
.card-form { max-width: 1000px; }

/* ---------- Table ---------- */
table.data { width: 100%; border-collapse: collapse; }

/* Horizontal scroll for tables wider than their card (e.g. the Run
   Payroll input grid with its many per-employee columns). The card
   itself clips overflow (rounded corners), so WIDE tables must be
   wrapped: <div class="table-scroll"><table class="data">…
   width:max-content lets the table grow to its natural width;
   min-width:100% keeps narrow tables filling the card as before. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table.data { width: max-content; min-width: 100%; }
table.data th {
    text-align: left; font-size: .67rem; text-transform: uppercase; letter-spacing: .09em;
    color: var(--ink-faint); font-weight: 700; padding: 12px 16px;
    border-bottom: 1px solid var(--hair);
    background: #F9FBFD;
    white-space: nowrap;
}
table.data td { padding: 13px 16px; border-bottom: 1px solid var(--hair-soft);
    font-size: .92rem; vertical-align: middle; }
table.data tr:last-child td { border-bottom: none; }
table.data tbody tr { transition: background .1s; }
table.data tbody tr:hover td { background: #F8FAFD; }
table.data tr.click { cursor: pointer; }
table.data tr.click:hover td { background: var(--brand-wash); }
/* Payroll history "All" view (D-096): a voided run and its reversal net
   to zero, so the pair steps back to secondary ink — never opacity, which
   would drag the row below the AA contrast D-085 tuned the tokens for. */
table.data tr.muted td { color: var(--ink-soft); }
.num { text-align: right; }
/* Plain .num is OUT-SPECIFIED on headers by `table.data th` (element+
   class beats lone class), so digit-column headers silently rendered
   left-aligned over right-aligned figures (tester report 2026-08-12).
   Sortable headers had their own patch (th.num .th-sort below); this
   is the general rule for plain <th class="num"> everywhere. */
table.data th.num { text-align: right; }
/* Action-button cells (Edit / YTD… / Delete): never let the buttons wrap
   onto a second line inside the row. */
table.data td.actions { white-space: nowrap; }

/* ---------- Sortable headers + list pager (audit B6) ---------- */
/* The whole header is a real <button> (keyboard for free), restyled
   to look exactly like the plain th text it replaces. */
table.data th .th-sort {
    background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit;
    display: inline-flex; align-items: center; gap: 5px;
}
table.data th .th-sort:hover { color: var(--ink-soft); }
/* Right-aligned digit columns keep their header flush right too. */
table.data th.num .th-sort { width: 100%; justify-content: flex-end; }
.sort-arrow { opacity: .4; font-size: .8em; }
.sort-arrow.on { opacity: 1; color: var(--brand); }

.pager {
    display: flex; justify-content: flex-end; align-items: center;
    gap: 10px; padding: 10px 14px;
    border-top: 1px solid var(--hair-soft);
}
.pager-range { font-size: .85rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* ---------- Buttons ---------- */
.btn {
    font-family: var(--ui); font-weight: 600; font-size: .9rem;
    padding: 9px 16px; border-radius: var(--r-sm); border: 1px solid transparent;
    cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
    transition: background .12s, border-color .12s, box-shadow .12s, transform .05s;
    text-decoration: none; line-height: 1.35; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.btn-primary {
    background: var(--brand);
    color: #fff;
    box-shadow: 0 1px 2px rgba(31,78,150,.35), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-primary:hover { background: var(--brand-deep); color: #fff; }

.btn-ghost { background: var(--card); border-color: var(--hair); color: var(--ink);
    box-shadow: 0 1px 2px rgba(18,36,66,.04); }
.btn-ghost:hover { background: var(--paper); border-color: #C6D0DE; color: var(--ink); }

/* Small + danger variants (previously copy-pasted into pages —
   defined once here so every page agrees). */
.btn-sm { padding: 5px 11px; font-size: .8rem; }
.btn-danger { color: var(--danger); }
.btn-danger:hover { border-color: var(--danger); background: var(--danger-wash); color: var(--danger); }
/* Back-navigation button: brand-outlined so "go back" stands out from
   the ghost action buttons around it without competing with the solid
   primary action (a tester couldn't find the ghost version at all). */
.btn-back { background: var(--brand-wash); border-color: var(--brand); color: var(--brand); }
.btn-back:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
/* Brand-accented row action — same look as .btn-back but its own name:
   "back" is navigation, this marks THE featured action in a row of
   ghosts (first use: the Paystubs… button on Employees, 2026-08-12). */
.btn-brand { background: var(--brand-wash); border-color: var(--brand); color: var(--brand); }
.btn-brand:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary.btn-danger {
    background: var(--danger);
    color: #fff; box-shadow: 0 1px 2px rgba(120,35,30,.35);
}
.btn-primary.btn-danger:hover { background: #A93B34; color: #fff; }

/* Danger zone: destructive actions live at the BOTTOM of an edit form,
   fenced off in a red-tinted box — never as a row button next to the
   everyday actions, where one slipped click could arm them (tester
   feedback 2026-07-14). The two-step confirmation still follows. */
.danger-zone {
    margin-top: 22px; padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
    border-radius: var(--r-sm);
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
}

/* ---------- Forms ---------- */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: .8rem; font-weight: 650; color: var(--ink-soft); margin-bottom: 6px; }
.field input, .field select {
    width: 100%; padding: 9px 12px; border: 1px solid var(--hair); border-radius: var(--r-sm);
    font-family: var(--ui); font-size: .92rem; background: var(--card); color: var(--ink);
    outline: none; transition: border-color .12s, box-shadow .12s;
}
.field input:hover, .field select:hover { border-color: #BECAD9; }
.field input:focus, .field select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); }
.field input::placeholder { color: #63738C;   /* AA placeholder (D-085) */ }
/* Money/number inputs read better in the ledger font. */
.field input[type="number"] { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.field .err { color: var(--danger); font-size: .78rem; margin-top: 5px; font-weight: 500; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }

/* Standalone label + control (used by inline pickers like the
   Remittances month selector, outside a .field wrapper). */
.field-label { display: block; font-size: .8rem; font-weight: 650; color: var(--ink-soft); margin-bottom: 6px; }
select.input, input.input {
    padding: 9px 12px; border: 1px solid var(--hair); border-radius: var(--r-sm);
    font-family: var(--ui); font-size: .92rem; background: var(--card); color: var(--ink);
    outline: none; min-width: 150px; transition: border-color .12s, box-shadow .12s;
}
select.input:hover, input.input:hover { border-color: #BECAD9; }
select.input:focus, input.input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); }

/* ---------- Pills ---------- */
/* Semantic status pills: ok = green (Active/Processed), warn = amber
   (Draft), danger = red (Voided), muted = grey, brand = blue. The old
   color-named classes (pill-pine/clay/gold) were renamed 2026-07-10. */
.pill {
    font-size: .7rem; font-weight: 700; padding: 3px 10px; border-radius: 100px;
    letter-spacing: .02em; display: inline-flex; align-items: center; gap: 5px;
    text-transform: uppercase;
}
.pill-ok { background: var(--ok-wash); color: var(--ok); }
.pill-muted { background: var(--hair-soft); color: var(--ink-soft); }
.pill-danger { background: var(--danger-wash); color: var(--danger); }
.pill-warn { background: var(--warn-wash); color: var(--warn); }
.pill-brand { background: var(--brand-wash); color: var(--brand); }
/* A status dot inside pills, e.g. Active. */
.pill-ok::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--ok); }

/* ---------- Empty state ---------- */
.empty { text-align: center; padding: 56px 24px; color: var(--ink-faint); }
.empty h3 { color: var(--ink); margin-bottom: 6px; font-size: 1.05rem; }
.empty p { margin: 0 auto 18px; max-width: 420px; }

/* ---------- Stat row ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
    background: var(--hair); border-radius: var(--r); overflow: hidden;
    border: 1px solid var(--hair); box-shadow: var(--shadow); }
.stat { background: var(--card); padding: 18px 20px; }
.stat .k { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em;
    color: var(--ink-faint); font-weight: 700; }
.stat .v { font-family: var(--mono); font-variant-numeric: tabular-nums;
    font-size: 1.4rem; font-weight: 500; margin-top: 6px; letter-spacing: -0.02em; }

/* ---------- Document (pay stub / PD7A) — the signature ---------- */
/* Styled like a paper cheque/statement: perforated top edge, dashed
   ledger lines, a heavy rule above the total. */
.doc {
    background: var(--card); border: 1px solid var(--hair); border-radius: var(--r);
    position: relative; overflow: hidden; box-shadow: var(--shadow);
    transition: box-shadow .15s;
}
.doc:hover { box-shadow: var(--shadow-lift); }
.doc::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px;
    background: repeating-linear-gradient(90deg, var(--hair) 0 7px, transparent 7px 14px);
}
.doc-body { padding: 28px 30px; }
.doc-row { display: flex; justify-content: space-between; align-items: baseline;
    padding: 9px 0; border-bottom: 1px dashed var(--hair); font-size: .95rem; }
.doc-row:last-child { border-bottom: none; }
.doc-row.total { border-top: 2px solid var(--ink); border-bottom: none;
    margin-top: 6px; padding-top: 14px; font-weight: 700; font-size: 1.02rem; }

/* ---------- Form validation + help ---------- */

/* Mandatory fields: labels with class="req" get a red asterisk. */
.field label.req::after, .field-label.req::after { content: " *"; color: var(--danger); font-weight: 700; }

/* Inputs that failed validation. */
.field input.invalid, .field select.invalid {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(192, 69, 62, .12);
}

/* ============================================================
   HELP TIPS (D-106 — replaces the D-045 focus-tied bubble)
   Markup is Components/Shared/HelpTip.razor (identical in both apps):
     <span class="tip-wrap">
       <button class="tip" popovertarget="tip-x">?</button>
       <span id="tip-x" popover class="tip-pop">
         <span class="tip-pop-head"> title + × </span>
         <span class="tip-pop-body"> the explanation </span>
       </span>
     </span>
   The bubble is a NATIVE POPOVER. The browser puts an open popover in
   the top layer — .table-scroll overflow, sticky headers and the drawer
   can never clip or cover it — and closes it on outside tap, Escape,
   or the × (a second popovertarget with action=hide). None of that
   needs JavaScript, which keeps PayRoar.Public zero-script.
   Why not the old bubble: it only lived while the ? had FOCUS and sat
   at the bottom of the LAYOUT viewport. On phones that meant it died
   the moment iOS moved focus (keyboard dismissing, the Done bar) and,
   while the keyboard was still collapsing, landed below the visual
   viewport — testers had to scroll to find it, and it never said
   which field it was about. A popover persists until dismissed and
   carries the field's name as its heading.
   Layout: ≤900px a BOTTOM SHEET over a dimmed backdrop (thumb reach,
   safe-area aware, no positioning guesswork); >900px a card ANCHORED
   under the ? where the browser has CSS anchor positioning (the
   invoker is the popover's implicit anchor — no anchor names needed),
   else centred in the viewport over a light backdrop.
   Duplicated verbatim in the other app's app.css — keep them in sync.
   ============================================================ */
.tip-wrap { display: inline; }
.tip {
    position: relative;               /* for the ::before touch target */
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; margin-left: 5px; padding: 0;
    border: 1px solid var(--hair); border-radius: 50%;
    background: var(--card);
    font-family: inherit; font-size: 10px; font-weight: 700; line-height: 1;
    color: var(--ink-faint);
    cursor: help; user-select: none; vertical-align: middle;
    transition: background .12s, color .12s, border-color .12s;
}
/* The 16px circle stays visually small; the tap target is ≥36px. */
.tip::before { content: ""; position: absolute; inset: -10px; }
.tip:hover, .tip:focus-visible,
.tip-wrap:has(.tip-pop:popover-open) > .tip {
    background: var(--brand-wash); color: var(--brand); border-color: var(--brand);
}
.tip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.tip-pop {
    /* Reset the UA popover box AND what the DOM parent would hand down —
       inherited properties still inherit into the top layer, and a
       .stat .k parent is uppercase/letter-spaced, a th is .67rem. */
    margin: auto; padding: 0; border: 1px solid var(--hair);
    width: min(360px, calc(100vw - 24px));
    background: var(--card); color: var(--ink);
    border-radius: 12px; box-shadow: 0 12px 32px rgba(22, 35, 58, .22);
    font-family: var(--ui); font-size: .84rem; font-weight: 400; line-height: 1.5;
    text-align: left; text-transform: none; letter-spacing: normal;
    white-space: normal; cursor: auto; user-select: text;
    overflow: auto;
}
.tip-pop:popover-open { display: block; animation: tip-pop .16s ease-out; }
.tip-pop::backdrop { background: rgba(22, 35, 58, .18); }
.tip-pop-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 14px 0;
}
.tip-pop-title { font-weight: 700; font-size: .86rem; color: var(--ink); }
.tip-pop-close {
    flex: none; width: 28px; height: 28px; margin: -4px -6px 0 0; padding: 0;
    border: 0; border-radius: 50%; background: transparent;
    color: var(--ink-faint); font-family: inherit; font-size: 20px; line-height: 1;
    cursor: pointer;
}
.tip-pop-close:hover, .tip-pop-close:focus-visible { background: var(--paper); color: var(--ink); }
.tip-pop-close:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.tip-pop-body { display: block; padding: 6px 14px 14px; color: var(--ink-soft); }

/* Desktop, browsers with CSS anchor positioning: sit under the ?,
   flipping above / leftward when the viewport edge is near. */
@supports (position-area: block-end) {
    @media (min-width: 901px) {
        .tip-pop {
            position: absolute; inset: auto; margin: 6px 0 0;
            position-area: block-end span-inline-end;
            position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
        }
        .tip-pop::backdrop { background: transparent; }
    }
}

/* Phones and tablets: a bottom sheet. */
@media (max-width: 900px) {
    .tip-pop {
        position: fixed; inset: auto 0 0 0; margin: 0;
        width: auto; max-height: 70dvh;
        border-radius: 16px 16px 0 0; border-bottom: 0;
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 0 -12px 40px rgba(9, 20, 40, .35);
    }
    .tip-pop:popover-open { animation: tip-sheet .2s ease-out; }
    .tip-pop::backdrop { background: rgba(9, 20, 40, .42); }
    .tip-pop-head { padding: 16px 18px 0; }
    .tip-pop-title { font-size: 1rem; }
    .tip-pop-body { padding: 8px 18px 20px; font-size: .95rem; }
    .tip-pop-close { width: 36px; height: 36px; margin: -8px -10px 0 0; font-size: 24px; }
}

@keyframes tip-pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes tip-sheet { from { opacity: .4; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tip-pop:popover-open { animation: none; } }
/* ---- Old browsers (D-107) ----------------------------------------
   No Popover API (Chrome/Edge <114, Safari/iOS <17, Firefox <125 —
   in practice iPhone 8/X on iOS 16, Windows 7/8.1 on Chrome 109,
   Big Sur Safari 16): the bubble can't open, so DEGRADE, don't hide —
   the explanation renders as a plain note right under its caption,
   the ? (which would do nothing) disappears, and the heading/× go
   too (the caption already names the field). Longer pages beat
   missing help. Must come AFTER the sheet/anchored rules above so
   `static` wins their `fixed`/`absolute`. */
@supports not selector(:popover-open) {
    .tip { display: none; }
    .tip-pop {
        display: block; position: static; inset: auto; width: auto; max-width: none;
        margin: 6px 0 4px; box-shadow: none; border-radius: 8px;
        background: var(--paper);
    }
    .tip-pop-head { display: none; }
    .tip-pop-body { padding: 8px 10px; font-size: .8rem; }
}

/* The outdated-browser notice (D-107): markup sits at the top of the
   anonymous layouts (Web's PublicLayout, Public's MarketingShell) and
   is INVISIBLE in any browser that can open a popover — the same
   feature test as above, so the notice and the fallback flip
   together. Zero JavaScript: it must work on the public site and
   before any circuit connects. */
.old-browser { display: none; }
@supports not selector(:popover-open) {
    .old-browser {
        display: block;
        background: var(--warn-wash); color: var(--warn);
        border-bottom: 1px solid #E8D9B4;
        padding: 10px 16px; font-size: .85rem; line-height: 1.45; text-align: center;
    }
}

/* ---------- Skip link (D-085, WCAG 2.4.1) — off-screen until a
   keyboard user Tabs onto it. ---------- */
.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    padding: 10px 16px; background: var(--card); color: var(--brand);
    border: 2px solid var(--brand); border-radius: 0 0 10px 0;
    font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------- Loading skeletons (D-084) — LoadingCard.razor ---------- */
.skel {
    height: 12px; border-radius: 6px; margin-bottom: 10px;
    background: linear-gradient(90deg, #E8EDF4 25%, #F4F7FB 50%, #E8EDF4 75%);
    background-size: 200% 100%;
    animation: skel-shimmer 1.2s ease-in-out infinite;
}
.skel-title { width: 40%; height: 16px; margin-bottom: 14px; }
.skel-short { width: 60%; margin-bottom: 0; }
@keyframes skel-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

/* ---------- Scrollbar (webkit) — quiet, matches the paper ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #C4CEDB; border-radius: 6px; border: 2px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background: #A9B5C6; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Print (roadmap B §F, finished by D-081): the browser's
   Print on any page should produce something an accountant could
   FILE — chrome gone, tables paginating with repeated headers, a
   printed letterhead line naming the company and date.
   .print-header is markup the record pages carry (pay-run detail,
   Remittances, Year-end): invisible on screen, the first line on
   paper. ---------- */
.print-header { display: none; }
@media print {
    /* Everything that is navigation, action, or transient state. */
    .sidebar, .topbar, .btn, .nav-backdrop, .toast-stack,
    .billing-banner, .list-toolbar, .chip-row, .pager,
    details.report-dialog, .print-hide { display: none !important; }
    body { background: #fff; }
    .shell { display: block; }
    .main, main { margin: 0; padding: 0; }
    .card, .doc { box-shadow: none; border: 1px solid #C4CEDB; }
    .content { padding: 0; max-width: none; }
    /* Wide tables scroll on screen (.table-scroll) — on paper the
       clip would amputate columns. Let them flow and paginate. */
    .table-scroll { overflow: visible !important; }
    table.data { width: 100%; }
    table.data thead { display: table-header-group; }  /* repeat per page */
    tr, .stat { break-inside: avoid; }
    .card { break-inside: auto; }                      /* long cards may split */
    a { color: inherit; text-decoration: none; }       /* links are ink on paper */
    .print-header {
        display: block; margin-bottom: 14px; padding-bottom: 8px;
        border-bottom: 2px solid #16233A; font-size: 12px;
    }
    .print-header strong { font-size: 15px; }
}

/* ============================================================
   APP SHELL — MOBILE (2026-08-13). One breakpoint story:
     ≤900px  — sidebar becomes a slide-in DRAWER over a dimmed
               backdrop; topbar compacts and wraps; touch targets
               grow; inputs go to 16px (below that iOS zooms the
               whole page on focus).
     ≤720px  — grids collapse, paddings tighten further.
   The 900px figure is mirrored in wwwroot/js/viewport.js — change
   them together.
   ============================================================ */
@media (max-width: 900px) {
    /* Belt-and-braces overflow guard: one un-wrapped button row used to
       force the WHOLE page wider than the phone (first mobile bug
       report, 2026-08-13 — the Payroll History actions). The real rows
       are fixed to wrap; this clip means any future stray row clips at
       the edge instead of panning the entire layout sideways. Inner
       wide content still scrolls — .table-scroll has its own overflow. */
    html, body { overflow-x: clip; }

    /* ---- The drawer ---- */
    .sidebar {
        position: fixed; left: 0; top: 0; bottom: 0; z-index: 40;
        height: 100dvh;              /* dvh: tracks the iOS collapsing URL bar */
        width: min(300px, 85vw);
        overflow-y: auto;
        /* The drawer is modal, so unlike the desktop column it does NOT
           chain: a flick that reaches the end of the nav must not drag
           the dimmed page along behind it (2026-09-04). */
        overscroll-behavior: contain;
        transform: translateX(-105%);
        transition: transform .22s ease;
        box-shadow: none;
    }
    /* Override the desktop display:none — the drawer must stay in the
       DOM (off-canvas) for the slide transition to have a start point. */
    .shell.sidebar-closed .sidebar { display: flex; }
    .shell.sidebar-open .sidebar {
        transform: none;
        box-shadow: 0 0 48px rgba(9, 20, 40, .45);
    }
    .nav-backdrop {
        position: fixed; inset: 0; z-index: 35;
        background: rgba(9, 20, 40, .45);
        animation: backdrop-in .2s ease;
        touch-action: none;   /* a drag on the dimmed area must not scroll the page under it */
    }
    /* Page scroll lock while the drawer is open. The open/closed state
       lives on .shell (not body), hence :has — supported everywhere the
       app supports; browsers without it just lose the lock, and the
       drawer's own overscroll-behavior still covers the common case. */
    body:has(.shell.sidebar-open) { overflow: hidden; }
    /* Thumb-sized nav rows while the sidebar is a touch surface. */
    .nav a, .nav-link { padding: 12px; font-size: 1rem; }
    .nav-link.nav-cta, .nav-link.nav-featured { padding: 11px 12px; }

    /* ---- Topbar: compact, two tidy rows ----
       Row 1: hamburger + the company switcher stretched edge-to-edge
       (it truncated at 52vw before — tester feedback 2026-08-13).
       Row 2: the action buttons, pushed to the RIGHT edge (a lone
       wrapped flex line sits left under space-between without the
       margin-left:auto). */
    .topbar {
        height: auto; min-height: 48px;
        padding: 6px 12px; gap: 4px 8px;
        flex-wrap: wrap;
    }
    .topbar .ctx { min-width: 0; }
    .topbar .topbar-left { flex: 1 1 100%; }
    .topbar .topbar-left .ctx { flex: 1; min-width: 0; }
    .topbar .topbar-left .ctx > span { width: 100%; }
    .topbar .topbar-right { margin-left: auto; }
    .hide-narrow { display: none !important; }
    .sidebar-toggle { width: 40px; height: 40px; font-size: 1.1rem; }
    /* .topbar prefix is LOAD-BEARING: the base select.company-switch
       rule (max-width: min(260px, 40vw)) is defined LATER in this file,
       so an equal-specificity mobile rule here would lose on source
       order and the switcher would stay truncated. */
    .topbar select.company-switch {
        flex: 1 1 auto; width: 100%; min-width: 0; max-width: none;
    }

    /* ---- Touch targets + iOS focus-zoom guard ---- */
    .btn { min-height: 42px; }
    .btn-sm { min-height: 36px; }
    .field input, .field select, select.input, input.input,
    select.company-switch, select.role-select, textarea {
        font-size: 16px;
    }

    /* Run-detail actions: once the page-head stacks (title above,
       actions below), CENTER the whole group — right-alignment only
       made sense beside the H1 (tester feedback 2026-08-14). */
    .run-actions { align-items: center; flex-basis: 100%; }
    .run-actions-row { justify-content: center; }
    /* "Download as:" heads its own line on phones, buttons below it —
       inline-beside-a-button read as part of the button row (tester
       feedback 2026-08-14). flex-basis:100% forces the wrap; the
       desktop padding-top that aligned it with button text would sit
       it off-center here. */
    .run-actions .run-actions-label {
        flex-basis: 100%; text-align: center; padding-top: 0;
    }

    /* ---- Tables: tighter cells; .table-scroll already provides the
       horizontal swipe for wide tables ---- */
    table.data th { padding: 10px 12px; }
    table.data td { padding: 11px 12px; }

    /* Toasts never wider than the phone. */
    .toast-stack { left: 18px; align-items: stretch; }
}
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 720px) {
    .stats { grid-template-columns: repeat(2, 1fr); }
    .grid-2 { grid-template-columns: 1fr; }
    .content { padding: 16px 14px; }
    .card-pad { padding: 18px 16px; }
    .page-head { margin-bottom: 18px; }
    h1 { font-size: 1.35rem; }
    .doc-body { padding: 20px 16px; }
    .danger-zone { padding: 12px 14px; }
    .pager { justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ============================================================
   MARKETING SITE (public pages: /, /pricing, /who-its-for,
   /for/{industry}, /login). Prefix: mk-. Shares the tokens above,
   so re-theming :root re-themes these pages too.
   ============================================================ */

/* The marketing body sits on the cool blue-grey paper, not white —
   white is reserved for cards and deliberate .mk-band-light bands, so
   sections alternate paper → white → navy instead of white-on-white. */
.mk { min-height: 100vh; display: flex; flex-direction: column; background: var(--paper); }

/* Full-width color bands. Usage: <section class="mk-band-light">
   <div class="mk-section">…</div></section> — the band paints the
   background edge-to-edge, the inner .mk-section keeps the content
   column. Same pattern as mk-hero / mk-honest / mk-cta. */
.mk-band-light { background: var(--card);
    border-top: 1px solid var(--hair-soft); border-bottom: 1px solid var(--hair-soft); }
.mk-band-dark { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%); }
.mk-band-dark .mk-h2 { color: #fff; }
.mk-band-dark .mk-eyebrow { color: var(--accent); }
.mk-band-dark .mk-tile { background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.14); box-shadow: none; }
.mk-band-dark .mk-tile h3 { color: #fff; }
.mk-band-dark .mk-tile p { color: rgba(255,255,255,.72); }
.mk-band-dark .mk-tile .ico { background: rgba(255,255,255,.12); color: var(--accent); }

/* ---------- Header ---------- */
.mk-header {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 18px 48px;
    border-bottom: 1px solid var(--hair-soft);
    background: rgba(255,255,255,.9); backdrop-filter: blur(8px);
    position: sticky; top: 0; z-index: 20;
}
.mk-wordmark { font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em; color: var(--ink); }
.mk-wordmark span { color: var(--accent); }
.mk-nav { display: flex; align-items: center; gap: 26px; }
.mk-nav a { color: var(--ink-soft); font-weight: 600; font-size: .92rem; }
.mk-nav a:hover, .mk-nav a.active { color: var(--brand); }
.mk-header .actions { display: flex; align-items: center; gap: 10px; }

/* Header dropdown ("Who it's for") — pure CSS: opens on hover or
   keyboard focus (focus-within covers tabbing), so it works even
   before Blazor's circuit connects. The panel's transparent top
   padding bridges the gap below the trigger, keeping :hover alive
   while the cursor travels down to the menu. */
.mk-dd { position: relative; }
.mk-dd-trigger {
    font-family: var(--ui); font-size: .92rem; font-weight: 600;
    color: var(--ink-soft); background: none; border: none; cursor: pointer;
    padding: 0; display: inline-flex; align-items: center; gap: 5px;
}
.mk-dd-trigger .caret { font-size: .68rem; }
.mk-dd:hover .mk-dd-trigger, .mk-dd:focus-within .mk-dd-trigger,
.mk-dd-trigger.active { color: var(--brand); }
.mk-dd-panel { position: absolute; top: 100%; left: -14px; padding-top: 12px;
    display: none; z-index: 30; }
.mk-dd:hover .mk-dd-panel, .mk-dd:focus-within .mk-dd-panel { display: block; }
.mk-dd-card { background: var(--card); border: 1px solid var(--hair);
    border-radius: var(--r-sm); box-shadow: var(--shadow-lift);
    padding: 8px; min-width: 230px; display: flex; flex-direction: column; }
.mk-dd-card a { padding: 9px 12px; border-radius: 7px; color: var(--ink);
    font-weight: 600; font-size: .9rem; }
.mk-dd-card a:hover { background: var(--brand-wash); color: var(--brand); }

/* ---------- Signed-out confirmation banner ----------
   Rendered once on "/" after /account/logout (cookie handshake — see
   Home.razor). Auto-dismisses: the animation holds it ~4s, then fades
   it out and hides it for good ("forwards" keeps the final frame).
   pointer-events none so it can never block clicks on the page. */
.mk-signout-banner {
    position: fixed; top: 78px; left: 50%;
    z-index: 15;                       /* under the sticky header (20) */
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--ok-wash); color: var(--ok);
    border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent);
    border-radius: 999px; padding: 9px 20px;
    font-size: .9rem; font-weight: 600;
    box-shadow: var(--shadow-lift);
    pointer-events: none;
    animation: mk-signout 4.5s ease forwards;
}
@keyframes mk-signout {
    0%   { opacity: 0; transform: translate(-50%, -10px); }
    8%   { opacity: 1; transform: translate(-50%, 0); }
    82%  { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, 0); visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
    /* No motion: appear in place, vanish at the end (step-end = no fade). */
    .mk-signout-banner { animation: mk-signout-static 4.5s step-end forwards; }
}
@keyframes mk-signout-static {
    0%   { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, 0); visibility: hidden; }
}

/* ---------- Shared section scaffolding ---------- */
.mk-section { max-width: 1080px; width: 100%; margin: 0 auto; padding: 72px 48px; }
.mk-section.tight { padding-top: 40px; padding-bottom: 40px; }
.mk-eyebrow { font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
    color: var(--brand); font-weight: 700; margin-bottom: 14px; }
.mk-h1 { font-size: 2.9rem; line-height: 1.08; letter-spacing: -0.03em; font-weight: 800; }
.mk-h2 { font-size: 1.9rem; line-height: 1.15; letter-spacing: -0.025em; font-weight: 800; margin-bottom: 12px; }
.mk-lede { font-size: 1.1rem; color: var(--ink-soft); max-width: 560px; line-height: 1.6; }
/* Amber underline flourish on key headings — the site's signature. */
.mk-underline { position: relative; display: inline-block; }
.mk-underline::after { content: ''; position: absolute; left: 2px; right: 2px; bottom: 4px;
    height: 10px; background: var(--accent-wash); z-index: -1; border-radius: 3px; }

.btn-lg { padding: 12px 22px; font-size: 1rem; }

/* ---------- Hero ---------- */
.mk-hero {
    background:
        radial-gradient(1000px 520px at 85% -10%, #D6E5F8 0%, transparent 65%),
        radial-gradient(700px 400px at -5% 110%, var(--accent-wash) 0%, transparent 60%),
        linear-gradient(180deg, var(--brand-wash) 0%, var(--paper) 100%);
    border-bottom: 1px solid var(--hair-soft);
}
.mk-hero .mk-section { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.mk-hero-copy p { margin: 18px 0 28px; }
.mk-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.mk-hero-note { margin-top: 14px; font-size: .82rem; color: var(--ink-faint); }

/* The hero visual: a stylized pay-stub card built from the .doc
   pattern — shows the product's actual output, not a stock photo. */
.mk-stub { max-width: 400px; justify-self: end; width: 100%; }
.mk-stub .doc-body { padding: 22px 26px; }
.mk-stub .who { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.mk-stub .who b { font-size: .95rem; }

/* ---------- Feature grid ---------- */
.mk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.mk-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.mk-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.mk-tile {
    background: var(--card); border: 1px solid var(--hair); border-radius: var(--r);
    box-shadow: var(--shadow); padding: 24px; transition: box-shadow .15s, transform .15s;
}
a.mk-tile { color: var(--ink); display: block; }
a.mk-tile:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); color: var(--ink); }
.mk-tile .ico { width: 38px; height: 38px; border-radius: 10px; background: var(--brand-wash);
    color: var(--brand); display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; margin-bottom: 14px; font-weight: 700; }
/* Inline SVG icons (Marketing/Icons.cs) inherit the .ico color. */
.ico svg { width: 20px; height: 20px; }
/* Pain tiles ("Sound familiar?") get an amber top edge — a visual cue
   that these are the problems, before the blue/white solutions. */
.mk-pains .mk-tile { border-top: 3px solid var(--accent); }
.mk-tile h3 { font-size: 1rem; margin-bottom: 8px; }
.mk-tile p { margin: 0; font-size: .88rem; color: var(--ink-soft); line-height: 1.55; }
.mk-tile .more { display: inline-block; margin-top: 12px; font-size: .85rem; font-weight: 700; color: var(--brand); }

/* ---------- Steps (how it works) ---------- */
.mk-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: step; }
.mk-step { position: relative; padding: 24px; background: var(--card);
    border: 1px solid var(--hair); border-radius: var(--r); box-shadow: var(--shadow); }
.mk-step::before {
    counter-increment: step; content: counter(step);
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--brand); color: #fff; font-weight: 800; font-size: .9rem;
    margin-bottom: 14px;
}
.mk-step h3 { font-size: 1rem; margin-bottom: 8px; }
.mk-step p { margin: 0; font-size: .88rem; color: var(--ink-soft); line-height: 1.55; }

/* ---------- The honesty strip — deliberate anti-overselling.
   Plain statements of what the product does NOT do yet. Keep it:
   it converts skeptics and sets expectations we can meet. ---------- */
.mk-honest { background: linear-gradient(180deg, var(--accent-wash) 0%, #FDF7EA 100%);
    border-top: 1px solid #F0E3C6; border-bottom: 1px solid #F0E3C6; }
.mk-honest .mk-section { padding-top: 48px; padding-bottom: 48px; }
.mk-honest ul { list-style: none; margin: 18px 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 28px; }
.mk-honest li { font-size: .92rem; color: var(--ink-soft); padding-left: 24px; position: relative; }
.mk-honest li::before { content: '—'; position: absolute; left: 0; color: var(--ink-faint); }

/* ---------- Checklists ---------- */
.mk-check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mk-check li { padding-left: 28px; position: relative; font-size: .95rem; color: var(--ink-soft); }
.mk-check li b { color: var(--ink); }
.mk-check li::before {
    content: '✓'; position: absolute; left: 0; top: 0;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--ok-wash); color: var(--ok);
    font-size: .7rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.mk-check li.no::before { content: '·'; background: var(--hair-soft); color: var(--ink-faint); font-size: 1rem; }

/* ---------- Pricing ---------- */
.mk-price-card {
    max-width: 460px; margin: 0 auto;
    background: var(--card); border: 2px solid var(--brand); border-radius: var(--r);
    box-shadow: var(--shadow-lift); padding: 34px 36px; text-align: center;
}
.mk-price-card .plan { font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
    color: var(--brand); font-weight: 800; }
.mk-price { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin: 16px 0 4px; }
.mk-price .amt { font-family: var(--mono); font-variant-numeric: tabular-nums;
    font-size: 3rem; font-weight: 600; letter-spacing: -0.04em; }
.mk-price .per { color: var(--ink-faint); font-size: .95rem; }
.mk-price-plus { color: var(--ink-soft); font-size: .98rem; margin-bottom: 22px; }
.mk-price-plus b { font-family: var(--mono); }
.mk-price-card .mk-check { text-align: left; margin: 24px 0 28px; }
.mk-fineprint { font-size: .8rem; color: var(--ink-faint); margin-top: 14px; }

/* ---------- FAQ ---------- */
.mk-faq { max-width: 720px; margin: 0 auto; }
.mk-faq details { background: var(--card); border: 1px solid var(--hair);
    border-radius: var(--r-sm); padding: 16px 20px; margin-bottom: 10px;
    box-shadow: var(--shadow); }
.mk-faq details[open] { border-color: var(--brand-soft); }
.mk-faq summary { font-weight: 700; cursor: pointer; font-size: .98rem; list-style: none;
    display: flex; justify-content: space-between; align-items: center; }
.mk-faq summary::after { content: '+'; color: var(--brand); font-weight: 600; font-size: 1.2rem; }
.mk-faq details[open] summary::after { content: '–'; }
.mk-faq details p { color: var(--ink-soft); font-size: .92rem; margin: 10px 0 4px; line-height: 1.6; }

/* ---------- Industry pages ---------- */
.mk-ind-hero { background:
    radial-gradient(900px 440px at 90% -20%, #D6E5F8 0%, transparent 62%),
    linear-gradient(180deg, var(--brand-wash) 0%, var(--paper) 100%);
    border-bottom: 1px solid var(--hair-soft); }
.mk-ind-hero .mk-section { padding-top: 56px; padding-bottom: 56px;
    display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }

/* The highlighted stub row — the line the industry page is selling. */
.doc-row.hi { background: var(--accent-wash); border-bottom: none;
    margin: 0 -12px; padding-left: 12px; padding-right: 12px; border-radius: 7px; }
.mk-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }

/* ---------- Big CTA band ---------- */
.mk-cta { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%); color: #fff; }
.mk-cta .mk-section { text-align: center; padding-top: 64px; padding-bottom: 64px; }
.mk-cta h2 { color: #fff; font-size: 1.9rem; letter-spacing: -0.025em; margin-bottom: 10px; }
.mk-cta p { color: rgba(255,255,255,.75); max-width: 520px; margin: 0 auto 26px; }

/* ---------- Footer ---------- */
.mk-footer { background: var(--navy-deep); color: rgba(255,255,255,.65); margin-top: auto; }
.mk-footer .mk-section { padding-top: 40px; padding-bottom: 40px;
    display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: center; }
.mk-footer .mk-wordmark { color: #fff; font-size: 1.1rem; }
.mk-footer nav { display: flex; gap: 12px 22px; flex-wrap: wrap; }
.mk-footer a { color: rgba(255,255,255,.65); font-size: .85rem; }
.mk-footer a:hover { color: #fff; }
.mk-footer .legal { font-size: .75rem; color: rgba(255,255,255,.4); width: 100%; }

/* ---------- Login ---------- */
.mk-login { flex: 1; display: flex; align-items: center; justify-content: center;
    padding: 48px 24px;
    background:
        radial-gradient(700px 380px at 75% -10%, var(--brand-wash) 0%, transparent 60%),
        var(--paper); }
.mk-login-card { width: 100%; max-width: 420px; background: var(--card);
    border: 1px solid var(--hair); border-radius: var(--r); box-shadow: var(--shadow-lift);
    padding: 40px 40px 32px; text-align: center; }
.mk-login-card .mk-wordmark { display: block; margin-bottom: 22px; }
.mk-login-card h1 { font-size: 1.35rem; margin-bottom: 8px; }
.mk-login-card .hint { color: var(--ink-soft); font-size: .9rem; margin: 0 0 24px; line-height: 1.55; }
/* One-shot failed-sign-in notice (cookie handshake — see OnRemoteFailure
   in AuthenticationSetup + Login.razor). Amber = attention, not danger:
   the user did nothing wrong. */
.mk-login-card .mk-login-notice { background: var(--warn-wash); color: var(--warn);
    border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
    border-radius: 8px; padding: 10px 14px; font-size: .88rem; font-weight: 600;
    text-align: left; margin: 0 0 18px; }
.mk-login-card .btn { width: 100%; justify-content: center; }
.mk-login-card .alt { margin-top: 18px; font-size: .85rem; color: var(--ink-faint); }
/* Request-access door (D-103): a wider card with a real form; the
   honeypot is parked off-screen (NOT display:none — some bots skip
   hidden inputs, few skip off-screen ones). */
.mk-access-card { max-width: 520px; text-align: left; }
.mk-access-card .mk-wordmark, .mk-access-card h1, .mk-access-card .hint { text-align: center; }
.mk-access-form .field textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--hair);
  border-radius: 8px; font: inherit; background: var(--card); color: var(--ink); resize: vertical; }
.mk-access-form .field textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); outline: none; }
.mk-access-form .cf-turnstile { margin: 4px 0 14px; }
.mk-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.mk-access-privacy { margin-top: 14px; font-size: .78rem; color: var(--ink-faint); text-align: center; }
.mk-login-foot { text-align: center; padding: 18px; font-size: .75rem; color: var(--ink-faint); }

/* ---------- Mobile menu (≤880px) ----------
   Pure CSS via <details> — like the desktop dropdown it must work
   before Blazor's circuit connects (marketing pages render statically).
   Hidden on desktop; replaces .mk-nav on phones so Pricing and the
   industry pages stay reachable (they used to just vanish). */
.mk-burger { display: none; position: relative; }
.mk-burger summary {
    list-style: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border: 1px solid var(--hair); border-radius: var(--r-sm);
    font-size: 1.15rem; color: var(--ink-soft);
    user-select: none;
}
.mk-burger summary::-webkit-details-marker { display: none; }
.mk-burger[open] summary { background: var(--brand-wash); color: var(--brand); border-color: var(--brand-soft); }
.mk-burger-panel {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 30;
    min-width: 230px; max-height: min(70vh, 480px); overflow-y: auto;
    background: var(--card); border: 1px solid var(--hair);
    border-radius: var(--r-sm); box-shadow: var(--shadow-lift);
    padding: 8px; display: flex; flex-direction: column;
}
.mk-burger-panel a { padding: 11px 12px; border-radius: 7px; color: var(--ink);
    font-weight: 600; font-size: .95rem; }
.mk-burger-panel a:hover { background: var(--brand-wash); color: var(--brand); }
.mk-burger-panel .group { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em;
    color: var(--ink-faint); font-weight: 700; padding: 12px 12px 4px; }

/* ---------- Marketing responsive ---------- */
@media (max-width: 880px) {
    .mk-header { padding: 12px 16px; gap: 12px; }
    .mk-nav { display: none; }   /* replaced by .mk-burger on phones */
    .mk-burger { display: block; }
    .mk-header .actions { gap: 8px; }
    /* "Sign in" lives in the burger menu on phones — one clear action
       (Get started) keeps the compact header from crowding. */
    .mk-header .actions .mk-signin { display: none; }
    .mk-section { padding-left: 22px; padding-right: 22px; padding-top: 48px; padding-bottom: 48px; }
    .mk-h1 { font-size: 2.1rem; }
    .mk-h2 { font-size: 1.5rem; }
    .mk-hero .mk-section, .mk-ind-hero .mk-section { grid-template-columns: 1fr; gap: 32px; }
    .mk-stub { justify-self: start; }
    .mk-grid, .mk-grid.cols-2, .mk-grid.cols-4, .mk-steps { grid-template-columns: 1fr; }
    .mk-pair { grid-template-columns: 1fr; }
    .mk-honest ul { grid-template-columns: 1fr; }
}

/* ---------- Toasts (audit §F save confirmations) ----------
   Rendered by Components/Shared/ToastHost.razor (one instance, in
   MainLayout). Bottom-right so they never cover the topbar actions or
   the feedback panel (top-right). Click dismisses; the service
   auto-dismisses after a few seconds. */
.toast-stack {
    position: fixed; right: 18px; bottom: 18px; z-index: 60;
    display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
}
.toast {
    display: flex; align-items: center; gap: 8px;
    background: var(--card); color: var(--ink);
    border: 1px solid var(--hair); border-left: 3px solid var(--ok);
    border-radius: var(--r-sm); box-shadow: var(--shadow-lift);
    padding: 10px 14px; font-size: 14px; font-weight: 600;
    cursor: pointer; user-select: none;
    animation: toast-in .18s ease-out;
}
.toast-check { color: var(--ok); font-weight: 700; }
@keyframes toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Topbar company switcher (audit §F) ---------- */
select.company-switch {
    font: inherit; font-weight: 700; color: var(--ink);
    background: var(--card); border: 1px solid var(--hair);
    border-radius: var(--r-sm); padding: 4px 8px;
    max-width: min(260px, 40vw); cursor: pointer;
}
select.company-switch:hover { border-color: var(--brand-soft); }

/* Members panel access-level dropdowns (D-029) — the compact cousin
   of .company-switch, sized to sit inside table rows and the add-row. */
select.role-select {
    font: inherit; font-size: .88rem; color: var(--ink);
    background: var(--card); border: 1px solid var(--hair);
    border-radius: var(--r-sm); padding: 4px 8px; cursor: pointer;
}
select.role-select:hover { border-color: var(--brand-soft); }

/* ---------- Employee portal (D-028) ----------
   The employee-facing side wears the same design system but a
   different shape: no sidebar, one centred column, big friendly
   stat cards. Phones first — most employees will open their stubs
   from a text or email on a phone. */
.portal-shell {
    min-height: 100vh;
    display: flex; flex-direction: column;
    background: var(--paper);
}
.portal-topbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    padding: 14px clamp(16px, 4vw, 28px);
    background: var(--card); border-bottom: 1px solid var(--hair);
}
.portal-brand {
    font-weight: 800; font-size: 1.1rem; color: var(--ink);
    display: flex; align-items: baseline; gap: 8px;
}
.portal-brand .dot { color: var(--accent); }
.portal-brand-sub { font-weight: 600; font-size: .85rem; color: var(--ink-faint); }
.portal-topbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.portal-topbar-email { color: var(--ink-faint); font-size: .82rem; }

.portal-main {
    width: 100%; max-width: 860px;
    margin: 0 auto; padding: clamp(16px, 4vw, 28px);
    flex: 1;
}
.portal-foot {
    text-align: center; color: var(--ink-faint); font-size: .78rem;
    padding: 18px; border-top: 1px solid var(--hair-soft);
}

.portal-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.portal-head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.portal-section-title { margin: 22px 0 10px; font-size: 1.05rem; }

/* Employment chooser cards (multi-employer logins). */
.portal-employments { display: flex; flex-direction: column; gap: 10px; }
.portal-employment-card {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; color: var(--ink);
}
.portal-employment-card:hover { box-shadow: var(--shadow-lift); color: var(--ink); }
.portal-chevron { color: var(--ink-faint); font-size: 1.3rem; margin-left: 8px; }

/* Stat cards: auto-fill grid — two-up on phones, more on desktop. */
.portal-stats {
    display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.portal-stat-value { font-size: 1.15rem; font-weight: 600; margin-top: 2px; }

.portal-notice {
    border-left: 3px solid var(--accent);
    margin-bottom: 14px;
}

.portal-claim { max-width: 560px; margin: 24px auto; }

/* "On file with your employer" read-only facts. */
.portal-facts { display: flex; gap: 28px; flex-wrap: wrap; }

/* Columns that don't earn their width on a phone. */
@media (max-width: 560px) {
    .portal-hide-sm { display: none; }
    .portal-topbar-email { display: none; }

    /* Marketing at true phone widths: full-width hero actions, cards
       lose the desktop-sized padding. */
    .mk-hero-actions .btn { flex: 1 1 auto; justify-content: center; }
    .mk-login-card { padding: 28px 22px 24px; }
    .mk-price-card { padding: 26px 20px; }
}

/* ---------- Help & FAQ (/help) ---------- */
.help-steps { margin: 8px 0 0; padding-left: 22px; }
.help-steps li { margin-bottom: 6px; }
.help-search-wrap { position: relative; }
.help-search {
    display: block; width: 100%; margin-top: 8px;
    padding: 10px 40px 10px 12px; /* right padding clears the ✕ button */
    border: 1px solid var(--hair); border-radius: var(--r-sm);
    font-family: var(--ui); font-size: 16px; /* ≥16px: no iOS focus-zoom */
    background: var(--card); color: var(--ink);
    outline: none; transition: border-color .12s, box-shadow .12s;
}
/* The browser's own ✕ inside type=search would double up with ours. */
.help-search::-webkit-search-cancel-button { display: none; }
.help-search-clear {
    position: absolute; right: 8px; top: calc(50% + 4px); transform: translateY(-50%);
    width: 26px; height: 26px; border: none; border-radius: 50%;
    background: var(--brand-wash); color: var(--brand);
    font-size: .8rem; line-height: 1; cursor: pointer;
}
.help-search-clear:hover { background: var(--brand); color: #fff; }
/* Search-hit highlight (the WhatsApp pattern): amber wash, keeps the
   ink color so highlighted words stay readable inside links/summaries. */
mark.hl {
    background: color-mix(in srgb, var(--accent) 38%, transparent);
    color: inherit; border-radius: 3px; padding: 0 1px;
}
.help-search:hover { border-color: #BECAD9; }
.help-search:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); }
.help-search::placeholder { color: #63738C;   /* AA placeholder (D-085) */ }
/* ---------- List search + filter toolbar (Companies/Employees) ----------
   Reuses the .help-search pieces above (the FAQ pioneered the pattern);
   flex-wrap keeps the row phone-safe (convention #14). The margin-top /
   ✕-offset overrides undo the label spacing Help's layout needs. */
.list-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-bottom: 10px; }
.list-toolbar .help-search-wrap { flex: 1 1 220px; max-width: 340px; }
.list-toolbar .help-search { margin-top: 0; }
.list-toolbar .help-search-clear { top: 50%; }
/* Chip groups (D-104): each .chip-row is ONE control — a soft container
   so a row's "All" visibly belongs to its own segment when two groups sit
   side by side (Status · SIN). Shrink-wrapped (fit-content) so two groups
   share a toolbar line and wrap as units on phones; tokens only, no new
   colours (D-085). Every .chip-row also carries role="group" + an
   aria-label from SharedCopy.ChipGroup* — the guard is CopyGuardTests. */
.chip-row {
    display: flex; flex-wrap: wrap; gap: 4px; width: fit-content; max-width: 100%;
    padding: 3px; border-radius: 12px; background: var(--hair-soft);
}
.chip-row .btn-ghost { border-color: transparent; }
/* Accordions: plain <details> — no JS, phone-safe. */
.faq-item { border-bottom: 1px solid var(--hair); }
.faq-item:last-child { border-bottom: none; }
.faq-item summary {
    cursor: pointer; padding: 11px 2px; font-weight: 600; font-size: .93rem;
    list-style-position: inside;
}
.faq-item summary:hover { color: var(--brand); }
.faq-item p { margin: 2px 2px 14px; padding-left: 18px; color: var(--ink-soft); line-height: 1.55; }

/* Setup-guide step list (docs/ONBOARDING.md) — born on the Dashboard
   card, reused verbatim by the floating SetupChecklist since D-089. */
.setup-steps { list-style: none; margin: 0; padding: 0; }
.setup-steps li { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; font-size: .93rem; }
.setup-steps li.done { color: var(--ink-faint); }
.setup-steps li.done span:not(.setup-mark) { text-decoration: line-through; }
.setup-mark {
    flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .78rem; font-weight: 700;
    background: var(--brand-wash); color: var(--brand);
}
.setup-steps li.done .setup-mark { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); text-decoration: none; }

/* ---- Topbar global search (D-090) ----
   Jump-to box in MainLayout's topbar. The panel drops below the input
   (absolute inside the relative wrap); the transparent backdrop makes
   any outside click close it. Hidden ≤900px — the mobile topbar has no
   room (same judgment as .hide-narrow); phone search is a later pass. */
.gsearch { position: relative; }
.gsearch-input {
    /* clamp, not a fixed 200px: the topbar has no wrap above 900px, so
       the search is the element that gives way on narrow laptops. */
    width: clamp(130px, 15vw, 200px); max-width: 30vw;
    padding: 7px 12px; font-size: .88rem;
    background: var(--card); color: var(--ink);
    border: 1px solid var(--hair); border-radius: 999px;
}
.gsearch-input:focus { outline: none; border-color: var(--brand); background: var(--card); }
.gsearch-backdrop { position: fixed; inset: 0; z-index: 55; }
.gsearch-panel {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 56;
    width: 320px; max-width: calc(100vw - 36px);
    background: var(--card); border: 1px solid var(--hair);
    border-radius: var(--r-sm); box-shadow: var(--shadow-lift);
    padding: 6px; max-height: 60vh; overflow-y: auto;
}
.gsearch-heading {
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--ink-faint);
    padding: 8px 10px 4px;
}
.gsearch-item {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 8px 10px; border: 0; border-radius: var(--r-sm);
    background: transparent; color: var(--ink);
    font-size: .9rem; text-align: left; cursor: pointer;
}
.gsearch-item:hover, .gsearch-item:focus-visible { background: var(--brand-wash); }
.gsearch-name { font-weight: 600; }
.gsearch-detail { margin: 0; margin-left: auto; font-size: .8rem; }
.gsearch-empty { margin: 0; padding: 10px; }
@media (max-width: 900px) {
    .gsearch { display: none; }
}

/* ---- Floating setup guide (D-089) ----
   Bottom-right Stripe-style onboarding widget rendered by MainLayout
   (Components/Shared/SetupChecklist.razor) until the first real pay
   run exists. z-index 50 = above page chrome (drawer 40), UNDER the
   toasts (60) — a transient toast may briefly cover it, which beats
   the guide covering a "saved" confirmation. */
.setup-float {
    position: fixed; right: 18px; bottom: 18px; z-index: 50;
}
/* The Report-a-problem dialog shares the right edge but lives inside
   the topbar's z-10 stacking context, so it can NEVER out-stack this
   root-level widget — on short viewports the guide painted over the
   dialog's submit area. Hide the guide while any dialog is open
   ([data-report-dialog] is the dialog panel's load-bearing hook). */
.shell:has([data-report-dialog]) .setup-float { display: none; }
/* With the mobile drawer open the page dims behind it (backdrop z-35);
   the guide drops below the backdrop so it dims with everything else
   instead of floating bright over the dimmed page. */
@media (max-width: 900px) {
    .shell.sidebar-open .setup-float { z-index: 30; }
}
.setup-float-card {
    width: 320px; max-width: calc(100vw - 36px);
    background: var(--card); color: var(--ink);
    border: 1px solid var(--hair); border-radius: var(--r-sm);
    box-shadow: var(--shadow-lift);
    padding: 14px 16px;
}
.setup-float-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 10px; margin-bottom: 8px;
}
.setup-float-title { font-weight: 700; }
.setup-float-min {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
    border: 1px solid var(--hair); background: transparent; color: var(--ink-soft);
    font-size: 1rem; font-weight: 700; line-height: 1; cursor: pointer;
}
.setup-float-min:hover { background: var(--brand-wash); color: var(--brand); }
.setup-float-bar {
    height: 6px; border-radius: 3px; background: var(--hair);
    overflow: hidden; margin-bottom: 8px;
}
.setup-float-bar-fill {
    height: 100%; border-radius: 3px; background: var(--ok);
    transition: width .25s ease;
}
.setup-float-note { font-size: .82rem; margin: 8px 0 0; }
.setup-float-pill {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--card); color: var(--ink);
    border: 1px solid var(--hair); border-radius: 999px;
    box-shadow: var(--shadow-lift);
    padding: 9px 16px; font-size: .9rem; font-weight: 700; cursor: pointer;
}
.setup-float-pill:hover { border-color: var(--brand); }
.setup-float-count {
    background: var(--brand-wash); color: var(--brand);
    border-radius: 999px; padding: 2px 8px; font-size: .78rem; font-weight: 700;
}
@media (max-width: 900px) {
    .setup-float { right: 12px; bottom: 12px; }
}

/* ---- In-page copy-edit panel (D-049 Phase 3) ----
   Slide-over on the right while an editor's "Edit text" toggle is on.
   Sits above page content but below toasts; full-width on phones. */
.copy-panel {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(430px, 100vw);
    background: var(--card);
    border-left: 1px solid var(--hair);
    box-shadow: -12px 0 28px rgba(15, 30, 50, .10);
    padding: 16px;
    overflow-y: auto;
    z-index: 60;
}
/* DOCKED on wide screens: .copy-editing on the shell reserves the
   panel's width, so it sits BESIDE the page instead of over it (the
   panel itself stays position:fixed — the margin just clears its
   spot). Below 1200px there's no width to give up, so it overlays.
   MainLayout also auto-collapses the nav sidebar in edit mode. */
.main { transition: margin-right .18s ease; }
@media (min-width: 1200px) {
    .shell.copy-editing .main { margin-right: min(430px, 100vw); }
    .shell.copy-editing .copy-panel { box-shadow: none; }
}
/* Title + search stay reachable while scrolling a long string list. */
.copy-panel-sticky {
    position: sticky; top: -16px;
    margin: -16px -16px 0; padding: 16px 16px 10px;
    background: var(--card);
    border-bottom: 1px solid var(--hair);
    z-index: 1;
}
.copy-panel-head {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
}
.copy-panel-row {
    border-top: 1px solid var(--hair);
    padding: 10px 0;
}
.copy-panel-row:first-of-type { border-top: 0; }

/* ---- Billing delinquency banner (§9.2, Phase 4) --------------
   Rendered by MainLayout for account owners while delinquent.
   flex-wrap so the action button drops to its own line on phones
   (the ≤900px overflow-x clip guard would otherwise crop it). */
.billing-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 16px;
    margin: 12px 16px 0;
    border-radius: 8px;
    font-size: .9rem;
    font-weight: 500;
}
.billing-banner.banner-warn {
    background: var(--warn-wash);
    color: var(--warn);
    border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
}
.billing-banner.banner-danger {
    background: var(--danger-wash);
    color: var(--danger);
    border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
}