/* Prolite Accounting (a subsidiary of Magnet Financial Services) brand layer.
   Values taken from the company website stylesheet. Variables first, thin overrides after. */
:root {
    /* S230 "Ledger Calm" (owner adopted 2026-10-19, DESIGN-REVIEW-2026-10-19 s.2): ink frame, blue everyday actions,
       gold only on money actions (.btn-money), green/amber/red only for status. */
    --brand-primary: #D2B583;       /* gold, money actions only: navy text on it 5.8:1; never text on white */
    --brand-primary-dark: #B85C12;  /* hover: white text on it 4.6:1 */
    --brand-secondary: #161514;     /* everyday buttons, focus ring: white text 6.4:1 */
    --brand-secondary-dark: #000000;
    --brand-link: #161514;          /* 7:1 on white */
    --brand-ink: #161514;
    --brand-text: #474747;
    --brand-muted: #5C5F66;         /* 5.4:1 on the #F7F5EF frame */
    --brand-surface: #F7F5EF;
    --brand-header-bg: #161514;     /* ink top bar (was royal blue #2B3AA1) */
    --brand-th-bg: var(--brand-surface);
    --brand-font-body: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --brand-font-heading: "Source Serif 4", Georgia, "Times New Roman", serif;

    --bs-primary: var(--brand-secondary);
    --bs-primary-rgb: 20, 22, 26;
    --bs-link-color: var(--brand-link);
    --bs-link-hover-color: var(--brand-ink);
    --bs-body-font-family: var(--brand-font-body);
    --bs-body-color: var(--brand-text);
}

body { background: var(--brand-surface); }

h1, h2, h3, h4, h5, h6 { font-family: var(--brand-font-heading); color: var(--brand-ink); }
.text-primary { color: var(--brand-link) !important; }

.btn-primary {
    --bs-btn-color: #fff; --bs-btn-bg: var(--brand-secondary); --bs-btn-border-color: var(--brand-secondary);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--brand-secondary-dark); --bs-btn-hover-border-color: var(--brand-secondary-dark);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--brand-secondary-dark); --bs-btn-active-border-color: var(--brand-secondary-dark);
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--brand-secondary); --bs-btn-disabled-border-color: var(--brand-secondary);
}
/* Gold, only where money moves: Create Paychecks (approve) and Mark remitted. */
.btn-money {
    --bs-btn-color: var(--brand-ink); --bs-btn-bg: var(--brand-primary); --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--brand-primary-dark); --bs-btn-hover-border-color: var(--brand-primary-dark);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--brand-primary-dark); --bs-btn-active-border-color: var(--brand-primary-dark);
    --bs-btn-disabled-color: var(--brand-ink); --bs-btn-disabled-bg: var(--brand-primary); --bs-btn-disabled-border-color: var(--brand-primary);
    --bs-btn-focus-shadow-rgb: 224, 144, 31;
}
.btn-outline-primary {
    --bs-btn-color: var(--brand-secondary); --bs-btn-border-color: var(--brand-secondary);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--brand-secondary); --bs-btn-hover-border-color: var(--brand-secondary);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--brand-secondary-dark); --bs-btn-active-border-color: var(--brand-secondary-dark);
    --bs-btn-disabled-color: var(--brand-secondary); --bs-btn-disabled-border-color: var(--brand-secondary);
}
.form-control:focus, .form-select:focus {
    border-color: var(--brand-secondary);
    box-shadow: 0 0 0 .2rem rgba(20, 22, 26, .25);
}
/* One focus ring on every interactive element: 2px blue with a 2px white offset. */
:focus-visible { outline: 2px solid #161514; outline-offset: 2px; box-shadow: 0 0 0 2px #fff; }

/* Table heads: pale frame, ink text, 12px uppercase, sticky. Numbers: tabular, right-aligned, never wrapped. */
.table > thead th { background: var(--brand-surface); color: var(--brand-ink); font-size: 12px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; position: sticky; top: 0; z-index: 1; border-bottom: 1px solid #D6DFEA; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* Header and footer */
.brand-nav { background: var(--brand-header-bg) !important; border-bottom: 3px solid var(--brand-primary) !important; }
.brand-nav .navbar-brand { color: #fff; font-family: var(--brand-font-heading); letter-spacing: .04em; }
.brand-nav .navbar-brand small { color: var(--brand-primary); font-family: var(--brand-font-body); letter-spacing: 0; }
.brand-nav .nav-link { color: #fff !important; }
.brand-nav .nav-link:hover, .brand-nav .nav-link:focus { color: #fff !important; text-decoration: underline; text-decoration-color: var(--brand-primary); text-underline-offset: .3em; }  /* gold text was 3.68:1 on royal */
.brand-nav .navbar-toggler { border-color: rgba(255, 255, 255, .4); filter: invert(1); }
.brand-footer { background: var(--brand-ink); color: #A8A7A6; }  /* light grey on ink, 6.0:1 */
.footer.brand-footer a { color: var(--brand-primary); }  /* two classes beat _Layout.cshtml.css a { #0077cc } (3.11:1) */

/* Run stepper (Enter/Review/Print), AA on the #F7F5EF page */
.stepper { display: flex; gap: 1rem; align-items: center; font-size: 0.9rem; color: #5C5F66; }
.stepper .step { padding: 0.5rem 1rem; }
.stepper .step.done { color: var(--po-green-bright); }
.stepper .step.active { color: #0066cc; font-weight: bold; border-bottom: 3px solid #0066cc; }
.stepper .arrow { color: #5C5F66; }
.btn-outline-secondary { --bs-btn-color: #5C5F66; --bs-btn-border-color: #5C5F66; --bs-btn-hover-bg: #5C5F66; --bs-btn-hover-border-color: #5C5F66; --bs-btn-active-bg: #5C5F66; }

/* /Members */
.members-summary { letter-spacing: .02em; }
.tier-row th { background: #F7F7F7; color: var(--brand-ink); font-family: var(--brand-font-heading); text-transform: uppercase;
               font-size: .75rem; letter-spacing: .08em; border-left: 4px solid var(--brand-primary-dark); }
.tier-row.tier-pending th { background: #FFF4E0; border-left-color: var(--brand-primary); }

/* Public landing page */
/* Hero: text on the left, line globe on the right. The colours are day or night by the Eastern clock (LandingInfo);
   this is the hero only, not a dark mode. Every text colour keeps at least 4.5:1 on both ends of its gradient. */
.landing-hero.hero-night {
    --hero-bg-solid: #0A1730; --hero-bg-end: #050A18; --hero-fg: #FFFFFF; --hero-lead: #F3F1EA;
    --hero-accent: #F4A330; --hero-muted: #B8C0CC; --globe-line: #7FA8E8; --globe-dot: #FFD34D;
}
.landing-hero.hero-day {
    --hero-bg-solid: #DCEBFA; --hero-bg-end: #FFF3D6; --hero-fg: #191919; --hero-lead: #333333;
    --hero-accent: #2A2D33; --hero-muted: #474747; --globe-line: #2A2D33; --globe-dot: #C46219;
}
.landing-hero {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 2rem;
    background: linear-gradient(135deg, var(--hero-bg-solid) 0%, var(--hero-bg-end) 100%); color: var(--hero-fg);
    border-bottom: 4px solid var(--brand-primary); border-radius: .75rem;
    padding: 3.5rem 3rem 3rem; margin: 1.5rem 0 2.5rem;
}
.landing-hero h1 { font-size: 3.5rem; color: var(--hero-fg); margin-bottom: 1rem; }
.landing-eyebrow { color: var(--hero-accent); text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; margin-bottom: .75rem; }
.landing-hero .lead { max-width: 34rem; margin: 0 0 1.75rem; color: var(--hero-lead); }
.landing-cta .btn { margin: .25rem .6rem .25rem 0; }
.btn-hero-outline {
    --bs-btn-color: var(--hero-fg); --bs-btn-border-color: var(--hero-fg);
    --bs-btn-hover-color: var(--hero-bg-solid); --bs-btn-hover-bg: var(--hero-fg); --bs-btn-hover-border-color: var(--hero-fg);
    --bs-btn-active-color: var(--hero-bg-solid); --bs-btn-active-bg: var(--hero-fg); --bs-btn-active-border-color: var(--hero-fg);
}
.landing-hero.hero-day .btn-primary { --bs-btn-border-color: var(--brand-primary-dark); }
.landing-hero-note { color: var(--hero-muted); font-size: .85rem; margin: 1rem 0 0; }
.hero-globe { text-align: center; }
#landing-globe { display: block; width: 100%; max-width: 26rem; height: auto; aspect-ratio: 1; margin: 0 auto; }
.hero-clock { color: var(--hero-muted); font-size: .8rem; margin: .5rem 0 .75rem; }
.landing-hero.hero-day .clock-night, .landing-hero.hero-night .clock-day { display: none; }
.motion-toggle { background: transparent; color: var(--hero-fg); border: 1px solid var(--hero-muted); border-radius: 2rem;
                 padding: .3rem 1rem; font-size: .8rem; }
.motion-toggle:hover, .motion-toggle[aria-pressed="true"] { background: var(--hero-fg); color: var(--hero-bg-solid); border-color: var(--hero-fg); }
.motion-toggle:focus-visible { outline: 3px solid var(--hero-accent); outline-offset: 2px; }

.landing-section { margin-bottom: 3rem; }
.landing-heading { font-size: 1.9rem; text-align: center; margin-bottom: .5rem; }
.landing-sub { text-align: center; max-width: 40rem; margin: 0 auto 1.5rem; }

/* Industry strip: one colour band per industry (colours in LandingInfo). Two identical sets; the track slides left by
   exactly one set, then repeats. Hover, keyboard focus or the Pause motion button stops it. */
.type-slider { overflow: hidden; border-radius: .75rem; }
.type-track { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; animation: type-scroll 45s linear infinite; }
.type-slider:hover .type-track, .type-slider:focus-within .type-track, .motion-paused .type-track { animation-play-state: paused; }
.industry-band { flex: 0 0 auto; min-width: 16rem; padding: 2.25rem 2rem; text-align: center; white-space: nowrap;
                 font-family: var(--brand-font-heading); font-size: 1.35rem; }
@keyframes type-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Feature cards (About page) */
.feature-card { height: 100%; padding: 1.5rem; background: #fff; border: 1px solid #e5e5e5; border-top: 4px solid var(--brand-primary);
                border-radius: .5rem; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); transition: transform .15s ease, box-shadow .15s ease; }
.feature-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, .12); }
.feature-card h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.feature-card p { margin: 0; }

/* "What it does" blocks: an icon tile in the block's own colour, the heading, one sentence, then the facts as tags. */
.feature-block { display: flex; gap: 1.25rem; align-items: flex-start; height: 100%; padding: 1.75rem; background: #fff; border: 1px solid #E4DFD5;
                 border-radius: 1rem; box-shadow: 0 1px 3px rgba(22, 21, 20, .06); transition: transform .2s ease, box-shadow .2s ease; }
.feature-block:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(22, 21, 20, .10); }
.feature-groups { display: grid; gap: 2.25rem; }
.feature-group__label { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: #8A6A35; margin: 0 0 .9rem;
                        display: flex; align-items: center; gap: .75rem; }
.feature-group__label::after { content: ""; flex: 1; height: 1px; background: #D9D2C2; }
.feature-icon { flex: 0 0 2.75rem; height: 2.75rem; border-radius: .75rem; background: rgba(210, 181, 131, .18); color: #8A6A35;
                display: flex; align-items: center; justify-content: center; }
.feature-icon svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.6;
                    stroke-linecap: round; stroke-linejoin: round; }
.feature-block h3 { font-size: 1.2rem; font-weight: 500; margin-bottom: .4rem; }
.feature-block p { margin: 0 0 .9rem; font-size: .95rem; line-height: 1.55; color: #5F5A54; }
.feature-tags { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.feature-tags li { font-size: .72rem; padding: .15rem .6rem; border-radius: 2rem; background: #F7F5F0; color: #5F5A54;
                   border: 1px solid #E4DFD5; }

.landing-status, .landing-contact { max-width: 46rem; margin-left: auto; margin-right: auto; }
.landing-contact { text-align: center; }

/* Public pages (Tour, Pricing, About, Contact): one bright band per page. Text colours keep at least 4.5:1 on each band. */
.page-hero { border-radius: 1rem; padding: 3rem 2rem 2.5rem; margin: 1.5rem 0 2rem; color: #F7F5F0; background: #161514; border-bottom: 3px solid #D2B583; }
.page-hero h1 { font-size: 2.75rem; color: inherit; margin-bottom: .75rem; }
.page-hero .lead { max-width: 42rem; margin: 0; color: inherit; }
.page-band { border-radius: .75rem; padding: 1.5rem; margin-bottom: 1.5rem; background: #F7F7F7; }
.page-band.band-offer { background: #FFF4E0; border-left: 6px solid var(--brand-primary-dark); }
.tour-step { display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem; margin-bottom: 1rem; background: #fff;
             border: 1px solid #e5e5e5; border-left: 6px solid #D2B583; border-radius: .5rem; }
.tour-number { flex: 0 0 2.5rem; height: 2.5rem; border-radius: 50%; background: #161514; color: #D2B583; font-weight: bold;
               display: flex; align-items: center; justify-content: center; }
.tour-step h2 { font-size: 1.2rem; margin-bottom: .35rem; }
.tour-step p { margin: 0; }
.price-estimate { font-family: var(--brand-font-heading); font-size: 2rem; color: var(--brand-ink); margin: 0; }

/* The published price: one dark card with the brand orange for the figures (orange on ink is over 8:1). */
.price-card { background: var(--brand-ink); color: #f2f2f2; border-radius: .75rem; border-top: 6px solid var(--brand-primary);
              padding: 2rem 2.25rem; box-shadow: 0 10px 28px rgba(0, 0, 0, .18); height: 100%; }
.price-card-eyebrow { color: var(--brand-primary); font-family: var(--brand-font-body); font-size: .8rem; font-weight: normal;
                      text-transform: uppercase; letter-spacing: .14em; margin-bottom: 1rem; }
.price-card-amount { font-family: var(--brand-font-heading); font-size: 3.5rem; line-height: 1; color: #fff; margin-bottom: .5rem; }
.price-card-plus { font-family: var(--brand-font-heading); font-size: 1.6rem; color: var(--brand-primary); margin-bottom: 1.5rem; }
.price-card-amount span, .price-card-plus span { font-family: var(--brand-font-body); font-size: .95rem; color: #d9d9d9; }
.price-card-subhead { font-size: 1rem; color: #fff; border-top: 1px solid rgba(255, 255, 255, .2); padding-top: 1.25rem; margin-bottom: .75rem; }
.price-card-list { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.price-card-list li { position: relative; padding: .3rem 0 .3rem 1.75rem; }
.price-card-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--brand-primary); font-weight: bold; }
.price-card-note { color: #d9d9d9; font-size: .85rem; margin-bottom: 0; }
.price-card-compact { max-width: 34rem; padding: 1.5rem 1.75rem; }
.price-card-compact .price-card-amount { font-size: 2.5rem; }
.price-card-compact .price-card-plus { font-size: 1.3rem; margin-bottom: 1rem; }
.price-card-compact .price-card-note { margin-bottom: 1rem; }

@media (max-width: 575.98px) {
    .landing-hero { padding: 2.5rem 1rem 2rem; }
    .landing-hero h1 { font-size: 2.25rem; }
    .industry-band { min-width: 12rem; padding: 1.5rem 1.25rem; font-size: 1.1rem; }
    .feature-block { padding: 1.25rem; gap: 1rem; }
    .page-hero { padding: 2rem 1rem 1.5rem; }
    .page-hero h1 { font-size: 2rem; }
    .price-card { padding: 1.5rem; }
    .price-card-amount { font-size: 2.5rem; }
    .type-track { animation-duration: 32s; }
}

/* Narrow screens: the globe drops under the text. */
@media (max-width: 991.98px) {
    .landing-hero { grid-template-columns: minmax(0, 1fr); text-align: center; }
    .landing-hero .lead { margin-left: auto; margin-right: auto; }
    .landing-cta .btn { margin: .25rem .3rem; }
    #landing-globe { max-width: 17rem; }
}

/* Reduced motion: the strip becomes a still grid of bands, the globe is one still drawing (landing.js), nothing needs pausing. */
@media (prefers-reduced-motion: reduce) {
    .type-track { animation: none; width: auto; flex-wrap: wrap; }
    .industry-band { flex: 1 1 16rem; }
    .industry-band[aria-hidden="true"] { display: none; }
    .feature-block, .feature-card { transition: none; }
    .feature-block:hover, .feature-card:hover { transform: none; }
    #motion-toggle { display: none; }
}

/* Request-access honeypot: off-screen, not display:none, so simple bots still fill it. */
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Support page: pricing banner linking to the Pricing page and its contact-sales section. */
.support-pricing { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem;
    background: var(--brand-ink); color: #f2f2f2; border-radius: .75rem; border-left: 6px solid var(--brand-primary);
    padding: 1.75rem 2rem; margin: 1rem 0 2rem; }
.support-pricing-text { flex: 1 1 22rem; }
.support-pricing-title { font-family: var(--brand-font-heading); font-size: 1.75rem; color: #fff; margin-bottom: .5rem; }
.support-pricing-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Ask Goldstream help panel (_HelpAssistant.cshtml): floating button bottom right, dark panel matching the price cards. */
.help-assistant { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1050; font-family: var(--brand-font-body); }
.help-assistant-toggle { display: flex; align-items: center; gap: .5rem; border: 0; border-radius: 2rem; padding: .6rem 1.1rem .6rem .6rem;
    background: var(--brand-ink); color: #fff; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25); font-size: .9rem; }
.help-assistant-toggle:hover { background: #1A3D66; }
.help-assistant-toggle-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem;
    border-radius: 50%; background: var(--brand-primary); color: var(--brand-ink); font-weight: bold; }
.help-assistant-panel { position: absolute; right: 0; bottom: calc(100% + .75rem); width: min(23rem, calc(100vw - 2.5rem));
    max-height: min(34rem, calc(100vh - 6rem)); display: flex; flex-direction: column; background: #fff; color: var(--brand-text);
    border-radius: .75rem; overflow: hidden; box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .3); }
.help-assistant-panel[hidden] { display: none; }
.help-assistant-header { display: flex; align-items: center; justify-content: space-between; background: var(--brand-ink);
    border-top: 4px solid var(--brand-primary); padding: .75rem 1rem; }
.help-assistant-title { font-family: var(--brand-font-heading); font-size: 1.15rem; color: #fff; margin: 0; }
.help-assistant-body { padding: 1rem; overflow-y: auto; font-size: .9rem; }
.help-assistant-intro { margin-bottom: .5rem; }
.help-assistant-questions { list-style: none; padding: 0; margin: .75rem 0 0; display: flex; flex-direction: column; gap: .4rem; }
.help-assistant-question { width: 100%; text-align: left; background: #faf6f0; border: 1px solid #eadfcf; border-radius: .5rem;
    padding: .45rem .7rem; color: var(--brand-ink); font-size: .85rem; }
.help-assistant-question:hover, .help-assistant-question:focus { border-color: var(--brand-primary); background: #fff4e3; }
.help-assistant-asked { font-weight: bold; color: var(--brand-ink); }
.help-assistant-nomatch { margin: .75rem 0 0; }
.help-assistant-cta { background: var(--brand-ink); color: #f2f2f2; padding: .85rem 1rem; font-size: .85rem; }
.help-assistant-cta-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
@media print { .help-assistant { display: none; } }
/* S228 (design review item 5): at 1400px+ the open panel docks as a right rail and the page gives up its width, so it never covers money.
   Below 1400px it stays the floating panel over the round "?" tab. */
:root { --ha-rail-w: 20rem; }
@media (min-width: 1400px) {
    body.ha-docked { padding-right: var(--ha-rail-w); }
    body.ha-docked .help-assistant-panel { position: fixed; top: 0; right: 0; bottom: 0; width: var(--ha-rail-w); max-height: none;
        border-radius: 0; border-left: 1px solid #d6dde6; box-shadow: -.25rem 0 1rem rgba(0, 0, 0, .08); }
    body.ha-docked .help-assistant-toggle { display: none; }
    body.ha-docked .help-assistant-body { flex: 1 1 auto; }
}

/* Site-wide polish (S208): page titles with a short brand rule, room between sections, account menu in brand colours. */
main > h1 { margin-bottom: 1.25rem; }
main > h1::after { content: ""; display: block; width: 3.5rem; height: 4px; margin-top: .6rem; border-radius: 2px; background: var(--brand-primary); }
main h2 { margin-top: 2rem; margin-bottom: .85rem; }
main > h1 + h2, main > h1 + p + h2 { margin-top: 1.25rem; }
.nav-pills { --bs-nav-pills-link-active-bg: var(--brand-ink); --bs-nav-pills-link-active-color: #fff; }
.nav-pills .nav-link.active { border-left: 4px solid var(--brand-primary); }
.card { border-color: #e7e2da; box-shadow: 0 1px 3px rgba(0, 0, 0, .05); }

/* Support page: contact details as a card. */
.support-contact { background: #fff; border: 1px solid #e7e2da; border-left: 4px solid var(--brand-primary); border-radius: .75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05); padding: 1.25rem 1.5rem .5rem; margin: 0 0 1.25rem; max-width: 46rem; }
.support-contact dt { color: var(--brand-ink); }
.support-icon { width: 1.15rem; height: 1.15rem; margin-right: .5rem; vertical-align: -.2rem; fill: none; stroke: var(--brand-primary-dark);
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Account (Identity) pages (S209): settings menu and form in cards, form fields wider. */
.area-identity main .col-lg-3 .nav-pills { background: #fff; border: 1px solid #e7e2da; border-radius: .75rem; padding: .5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05); margin-bottom: 1rem; }
.area-identity main .col-lg-3 .nav-pills .nav-link { border-radius: .5rem; }
.area-identity main .col-lg-9 { background: #fff; border: 1px solid #e7e2da; border-radius: .75rem; padding: 1.25rem 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05); }
.area-identity main .col-lg-9 > h3:first-child, .area-identity main .col-lg-9 > h4:first-child { margin-top: 0; }
@media (min-width: 992px) {
    .area-identity main .col-lg-9 .col-md-6 { width: 75%; }
}

/* App sidebar (S220, owner's Wave screenshot, 2026-10-18): white, pale blue accents, collapses to icons, slides in on small screens. */
:root { --side-w: 15rem; --side-rail: 4.25rem; --side-pale: #F3F1EA; --side-pale-strong: #D3E4FA; --side-blue: #161514; --side-ink: var(--brand-ink);
    --side-text: #33475B; --side-line: #E2EAF4; --app-bg: #F7F5EF;
    --po-green-dark: var(--brand-ink); --po-indigo: #161514; --po-green-bright: #13773A; }
.sidebar-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; margin-right: .5rem;
    border: 0; border-radius: .5rem; background: transparent; color: #fff; }
.sidebar-toggle:hover, .sidebar-toggle:focus-visible { background: rgba(255, 255, 255, .14); }
.sidebar-toggle svg { width: 1.35rem; height: 1.35rem; }
.app-body { display: flex; align-items: stretch; min-height: calc(100vh - 3.5rem); background: var(--app-bg); }
.app-main { flex: 1 1 auto; min-width: 0; padding-top: 1.5rem; }
.app-sidebar { flex: 0 0 var(--side-w); width: var(--side-w); background: #fff; border-right: 1px solid var(--side-line);
    position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto; overflow-x: hidden;
    padding: 1rem 0; transition: width .18s ease, flex-basis .18s ease; }
.side-nav, .side-sub { list-style: none; margin: 0; padding: 0; }
.side-link { display: flex; align-items: center; gap: .8rem; width: calc(100% - 1rem); margin: .15rem .5rem; padding: .6rem .9rem;
    border: 0; border-radius: 999px; background: transparent; color: var(--side-text); font-size: .95rem; text-align: left;
    text-decoration: none; white-space: nowrap; }
.side-link:hover, .side-sublink:hover, .side-sub .dropdown-item:hover { background: var(--side-pale); color: var(--side-ink); }
.side-link[aria-current="page"], .side-sublink[aria-current="page"] { background: var(--side-pale-strong); color: var(--side-ink); font-weight: 600; }
.side-group[aria-expanded="true"] { color: var(--side-ink); font-weight: 600; }
.side-icon, .side-chevron { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.side-icon { flex: 0 0 1.35rem; width: 1.35rem; height: 1.35rem; color: var(--side-blue); }
.side-chevron { width: 1rem; height: 1rem; margin-left: auto; transition: transform .18s ease; }
.side-group[aria-expanded="true"] .side-chevron { transform: rotate(90deg); }
.side-sub { padding: .1rem 0 .35rem 2.6rem; }
.side-sublink, .side-sub .dropdown-item { display: block; width: calc(100% - .5rem); margin: .1rem 0; padding: .4rem .9rem; border-radius: 999px;
    color: var(--side-text); font-size: .9rem; text-decoration: none; white-space: nowrap; background: transparent; }
.side-sub .dropdown-divider { display: none; }
.app-sidebar { padding-top: .25rem; }
.sidebar-collapse { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin: 0 .75rem .35rem auto;
    border: 1px solid var(--side-line); border-radius: 50%; background: #fff; color: var(--side-blue); }
.sidebar-collapse:hover, .sidebar-collapse:focus-visible { background: var(--side-pale); }
.sidebar-collapse svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
    transition: transform .18s ease; }
html.sidebar-collapsed .sidebar-collapse { margin-right: auto; }
html.sidebar-collapsed .sidebar-collapse svg { transform: rotate(180deg); }
.sidebar-backdrop { display: none; }
html.sidebar-collapsed .app-sidebar { flex-basis: var(--side-rail); width: var(--side-rail); }
html.sidebar-collapsed .side-label, html.sidebar-collapsed .side-chevron, html.sidebar-collapsed .side-sub { display: none; }
html.sidebar-collapsed .side-link { justify-content: center; padding: .6rem 0; }
@media (max-width: 991.98px) {
    .app-sidebar, html.sidebar-collapsed .app-sidebar { position: fixed; z-index: 1045; left: 0; top: 0; width: var(--side-w); height: 100vh;
        transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 0 24px rgba(16, 42, 80, .18); }
    html.sidebar-collapsed .side-label, html.sidebar-collapsed .side-chevron { display: inline; }
    html.sidebar-collapsed .side-chevron { display: block; }
    html.sidebar-collapsed .side-sub.show { display: block; }
    html.sidebar-collapsed .side-link { justify-content: flex-start; padding: .6rem .9rem; }
    html.sidebar-open .app-sidebar { transform: none; }
    html.sidebar-collapsed .sidebar-collapse { margin-right: .75rem; }
    html.sidebar-collapsed .sidebar-collapse svg { transform: none; }
    html.sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 1040; background: rgba(16, 42, 80, .35); }
    .app-main { padding-top: 1rem; }
}
@media print { .app-sidebar, .sidebar-toggle, .sidebar-backdrop { display: none !important; } .app-body { background: none; } }

/* Payroll review panel on Payroll Runs (S220). */
.po-card { background: #fff; border: 1px solid #E4E0D5; border-radius: .9rem; box-shadow: 0 2px 4px rgba(16, 42, 80, .05), 0 8px 24px rgba(16, 42, 80, .08); padding: 1.25rem 1.4rem; }
.payroll-overview { display: grid; gap: 1rem; }
.payroll-overview h2, .payroll-overview h3 { font-family: var(--brand-font-body); color: var(--side-ink); margin-top: 0; }
.po-row { display: grid; grid-template-columns: auto minmax(12rem, 1fr) minmax(15rem, 1fr); align-items: center; gap: 1.5rem; }
.po-row > .po-total { border-left: 1px solid var(--side-line); border-right: 1px solid var(--side-line); padding: 0 1.25rem; text-align: center; }
.po-dates { display: grid; grid-template-columns: repeat(4, 8.5rem); gap: .8rem; }
.po-date { display: flex; flex-direction: column; align-items: center; justify-content: space-between; min-height: 9.5rem; border: 1px solid #E4E0D5; border-radius: .6rem; overflow: hidden; background: #fff; padding-bottom: .9rem; box-shadow: 0 2px 6px rgba(16, 42, 80, .08); }
.po-date-label { align-self: stretch; text-align: center; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: .5rem .2rem; margin-bottom: .6rem; color: #fff; white-space: nowrap; }
.po-tile-light .po-date-label { background: var(--po-green-dark); }
.po-tile-dark .po-date-label { background: var(--po-indigo); }
/* S221: pay date or CRA remit date already passed. */
.po-tile-late { border-color: #F1B0A8; }
.po-tile-late .po-date-label { background: #B42318; }
.po-overdue-tag { background: #FDECEA; color: #B42318; font-weight: 700; margin-right: .4rem; }
.po-date-dow { font-size: .8rem; color: var(--side-text); }
.po-date-day { font-size: 2.4rem; line-height: 1.15; font-weight: 500; color: var(--side-ink); }
.po-date-year { font-size: .8rem; color: var(--side-text); }
.po-total-label { display: block; font-size: .9rem; font-weight: 400; color: #5C5F66; }
.po-total-value { display: block; font-size: 2.3rem; font-weight: 400; color: var(--po-green-bright); line-height: 1.2; margin: .2rem 0; }
.po-action { text-align: center; }
.po-status { margin-bottom: .9rem; }
.po-status-ok strong { color: #2E7D32; }
.po-status-todo strong { color: var(--side-ink); }
.po-btn { --bs-btn-color: #fff; --bs-btn-bg: var(--brand-secondary); --bs-btn-border-color: var(--brand-secondary); --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-secondary-dark); --bs-btn-hover-border-color: var(--brand-secondary-dark); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--brand-secondary-dark);
    border-radius: 999px; font-weight: 600; }
.po-badge { background: var(--side-pale-strong); color: var(--side-ink); font-weight: 500; }
.po-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.po-feature { display: flex; gap: .9rem; align-items: flex-start; }
.po-feature-icon { flex: 0 0 2.25rem; width: 2.25rem; height: 2.25rem; padding: .4rem; border-radius: .6rem; background: var(--side-pale); color: var(--side-blue); }
.po-active { background: #E8F6EE; color: #1E5E3A; font-weight: 600; }
.po-off { background: #FFF4E0; color: #7A4A00; font-weight: 600; }
.po-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.po-todo, .po-dates-list { list-style: none; padding: 0; margin: 0 0 .5rem; }
.po-todo li, .po-dates-list li { padding: .45rem 0; border-bottom: 1px solid var(--side-line); }
.po-todo li:last-child, .po-dates-list li:last-child { border-bottom: 0; }
.po-todo li::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .6rem; border-radius: 50%; background: var(--side-blue); }
.po-todo li.po-overdue::before { background: #B42318; }
.po-when { display: block; font-size: .82rem; color: #5C5F66; }
.po-what { display: block; font-size: 1.05rem; font-weight: 600; color: var(--side-ink); }
.po-note { display: block; font-size: .8rem; color: #7A5A00; }
.po-note-due { color: #B42318; }
@media (max-width: 1299.98px) {
    .po-row { grid-template-columns: 1fr 1fr; }
    .po-row > .po-dates { grid-column: 1 / -1; }
    .po-row > .po-total { border-left: 0; padding-left: 0; }
}
@media (max-width: 767.98px) {
    .po-row { grid-template-columns: 1fr; }
    .po-row > .po-total { border: 0; padding: 0; }
    .po-dates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .po-features, .po-lists { grid-template-columns: 1fr; }
    /* S221 phone: filters full width, only the next 3 important dates, links big enough to tap. */
    .run-filters > .form-select { flex: 1 1 100%; }
    .po-dates-list li:nth-child(n+4) { display: none; }
    .po-todo a, .po-feature a { display: inline-block; padding: .3rem 0; }
}
/* S222: the Ask bubble is a round "?" until clicked open, so it no longer covers buttons and totals. */
.help-assistant.ha-compact .help-assistant-toggle:not([aria-expanded="true"]) .help-assistant-toggle-label { display: none; }
.help-assistant.ha-compact .help-assistant-toggle:not([aria-expanded="true"]) { padding: .45rem; }
@media (max-width: 767.98px) { .help-assistant { right: .75rem; bottom: .75rem; } }
/* Gentle lift on hover; Things to do / Important dates fold up. */
.po-date { transition: transform .18s ease, box-shadow .18s ease; }
.po-date:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(16, 42, 80, .14); }
.po-collapse > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.po-collapse > summary::-webkit-details-marker { display: none; }
/* S223 (owner): a visible Hide / Show button with an arrow, not just a clickable title. */
.po-toggle { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; color: var(--side-blue); border: 1px solid #E4E0D5; border-radius: 999px; padding: .15rem .65rem; background: #fff; }
.po-collapse > summary:hover .po-toggle, .po-collapse > summary:focus-visible .po-toggle { background: var(--side-pale); }
.po-toggle::after { content: ""; width: .45rem; height: .45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-135deg); margin-top: .2rem; transition: transform .18s ease; }
.po-collapse:not([open]) > summary .po-toggle::after { transform: rotate(45deg); margin-top: -.2rem; }
.po-collapse[open] > summary .po-toggle::before { content: "Hide"; }
.po-collapse:not([open]) > summary .po-toggle::before { content: "Show"; }
/* S223 (owner): late-pay note under the date tiles, fainter than a Bootstrap danger alert. */
.po-late-note { grid-column: 1 / -1; background: #FFF8F7; border: 1px solid #F6D5D1; color: #8A1C12; border-radius: .5rem; padding: .5rem .75rem; font-size: .85rem; }
.po-collapse:not([open]) > summary h3 { margin-bottom: 0; }
@media print { .payroll-overview { display: none; } }
/* S225 (owner, design review gap 1): Review & Approve money summary and pre-flight. Text colours all 4.5:1 or better. */
.pf-title { font-family: var(--brand-font-body); font-size: 1rem; font-weight: 600; color: var(--side-ink); margin: 0 0 .75rem; }
.pf-sub { font-size: .85rem; font-weight: 400; color: #5C5F66; margin-left: .5rem; }
.pf-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; margin: 0 0 .75rem; }
.pf-figures dt { font-size: .8rem; font-weight: 400; color: #5C5F66; }
.pf-figures dd { margin: 0; }
.pf-num { font-size: 1.5rem; font-weight: 400; color: var(--side-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-cra { color: var(--side-blue); }
.pf-total { border-left: 1px solid var(--side-line); padding-left: 1rem; }
.pf-total .pf-num { color: var(--po-green-bright); }
/* Money Path (design doc s.6): client withdrawal, employee deposit, CRA remittance on one connected line; missed dates in red with words. */
.money-path { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 0; margin: 0; padding: 0; font-size: .9rem; color: var(--side-text); }
.money-path li { display: flex; flex-direction: column; padding: 0 1.25rem 0 0; margin-right: 1.25rem; border-right: 2px solid var(--side-line); }
.money-path li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.money-path .mp-label { font-size: .8rem; color: #5C5F66; }
.money-path strong { font-weight: 600; color: var(--side-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.money-path li.mp-late, .money-path li.mp-late strong { color: #B42318; }
.pf-checks { background: var(--side-pale); border: 1px solid var(--side-pale-strong); border-radius: .75rem; padding: 1rem 1.25rem; }
.pf-list { list-style: none; margin: 0; padding: 0; }
.pf-list li { display: flex; gap: .6rem; align-items: flex-start; padding: .3rem 0; color: var(--side-text); }
.pf-icon { flex: 0 0 1.4rem; height: 1.4rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 700; color: #fff; }
.pf-ok .pf-icon { background: #1E7A3E; }
.pf-warning .pf-icon { background: #8A5300; }
.pf-block .pf-icon { background: #B42318; }
.pf-block { color: #8A1C12; font-weight: 600; }
.pf-details { display: block; font-size: .85rem; color: #5C5F66; }
.pf-change { font-variant-numeric: tabular-nums; color: #5C5F66; white-space: nowrap; }
.pf-change-flag { color: #8A5300; font-weight: 600; }
.pf-modal-figures { list-style: none; padding: 0; margin: .5rem 0 .75rem; }
.pf-modal-figures li { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 0; font-variant-numeric: tabular-nums; }
@media (max-width: 767.98px) { .pf-total { border-left: 0; padding-left: 0; } .pf-num { font-size: 1.25rem; } }
@media print { .pf-summary, .pf-checks { display: none; } }
.page-hero--forest { background: #1A3C34; }