/* =====================================================================
   LoanWise Hub - administrative dashboard
   Layered on Bootstrap 5.3. No web fonts, no CDN: the Content-Security-Policy
   in config/app.php permits 'self' only, and the platform has to work on a
   machine with no internet connection.
   ===================================================================== */

:root {
    --lwh-sidebar-width: 264px;
    --lwh-topbar-height: 58px;

    --lwh-ink:          #14181f;
    --lwh-ink-muted:    #5a6472;
    --lwh-line:         #e3e7ee;
    --lwh-surface:      #ffffff;
    --lwh-canvas:       #f5f7fa;
    --lwh-sidebar-bg:   #131a26;
    --lwh-sidebar-ink:  #a9b4c6;
    --lwh-sidebar-hover:#1d2736;
    --lwh-accent:       #1266f1;
    --lwh-accent-soft:  #e8f0ff;

    --lwh-radius:       10px;
    --lwh-radius-sm:    7px;
    --lwh-shadow:       0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .07);
    --lwh-shadow-lg:    0 4px 6px -2px rgba(16, 24, 40, .03), 0 12px 16px -4px rgba(16, 24, 40, .08);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-bs-theme="light"]) {
        --lwh-ink:         #e6eaf2;
        --lwh-ink-muted:   #9aa5b6;
        --lwh-line:        #262d3a;
        --lwh-surface:     #171c26;
        --lwh-canvas:      #0f131b;
        --lwh-accent-soft: #16233b;
    }
}

html, body { height: 100%; }

body {
    background: var(--lwh-canvas);
    color: var(--lwh-ink);
    font-size: .9375rem;
    -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------ shell */

.lwh-shell { display: flex; min-height: 100vh; }

.lwh-sidebar {
    width: var(--lwh-sidebar-width);
    flex: 0 0 var(--lwh-sidebar-width);
    background: var(--lwh-sidebar-bg);
    color: var(--lwh-sidebar-ink);
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1045;
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: transform .18s ease;
}

.lwh-sidebar::-webkit-scrollbar { width: 6px; }
.lwh-sidebar::-webkit-scrollbar-thumb { background: #2b3546; border-radius: 3px; }

.lwh-main {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: var(--lwh-sidebar-width);
    display: flex;
    flex-direction: column;
}

@media (max-width: 991.98px) {
    .lwh-sidebar { transform: translateX(-100%); }
    .lwh-sidebar.is-open { transform: translateX(0); box-shadow: var(--lwh-shadow-lg); }
    .lwh-main { margin-left: 0; }
    .lwh-backdrop {
        position: fixed; inset: 0; background: rgba(10, 14, 20, .5);
        z-index: 1040; backdrop-filter: blur(1px);
    }
}

/* ------------------------------------------------------------- brand mark */

.lwh-brand {
    display: flex; align-items: center; gap: .625rem;
    padding: 1rem 1.125rem;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    color: #fff; text-decoration: none;
    position: sticky; top: 0; background: var(--lwh-sidebar-bg); z-index: 2;
}

.lwh-brand:hover { color: #fff; }

.lwh-brand__mark {
    width: 32px; height: 32px; flex: 0 0 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #1266f1, #0a3f9e);
    display: grid; place-items: center;
    font-weight: 700; font-size: .8125rem; color: #fff; letter-spacing: -.02em;
}

.lwh-brand__name { font-weight: 600; font-size: .9375rem; line-height: 1.15; }
.lwh-brand__env  { font-size: .6875rem; color: #6f7f97; letter-spacing: .04em; text-transform: uppercase; }

/* --------------------------------------------------------------- nav list */

.lwh-nav { padding: .625rem .625rem 2rem; }

.lwh-nav__heading {
    font-size: .6875rem; text-transform: uppercase; letter-spacing: .07em;
    color: #63718a; padding: .875rem .625rem .375rem; font-weight: 600;
}

.lwh-nav__link {
    display: flex; align-items: center; gap: .625rem;
    padding: .4375rem .625rem;
    border-radius: var(--lwh-radius-sm);
    color: var(--lwh-sidebar-ink);
    text-decoration: none;
    font-size: .875rem;
    line-height: 1.3;
    transition: background .12s ease, color .12s ease;
}

.lwh-nav__link:hover { background: var(--lwh-sidebar-hover); color: #e9eef7; }

.lwh-nav__link.active {
    background: var(--lwh-accent);
    color: #fff;
    font-weight: 500;
}

.lwh-nav__link.active .lwh-nav__icon { opacity: 1; }

.lwh-nav__icon { width: 18px; flex: 0 0 18px; opacity: .75; display: inline-grid; place-items: center; }
.lwh-nav__icon svg { width: 16px; height: 16px; }

.lwh-nav__count {
    margin-left: auto;
    background: rgba(255,255,255,.14); color: #fff;
    border-radius: 999px; padding: .0625rem .4375rem;
    font-size: .6875rem; font-weight: 600; line-height: 1.4;
}

.lwh-nav__link.active .lwh-nav__count { background: rgba(0,0,0,.22); }
.lwh-nav__count--alert { background: #d64545; color: #fff; }

/* ---------------------------------------------------------------- topbar */

.lwh-topbar {
    height: var(--lwh-topbar-height);
    background: var(--lwh-surface);
    border-bottom: 1px solid var(--lwh-line);
    display: flex; align-items: center; gap: .75rem;
    padding: 0 1.125rem;
    position: sticky; top: 0; z-index: 1030;
}

.lwh-topbar__title { font-weight: 600; font-size: .9375rem; margin: 0; }
.lwh-topbar__crumb { font-size: .75rem; color: var(--lwh-ink-muted); }

.lwh-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--lwh-accent-soft); color: var(--lwh-accent);
    display: grid; place-items: center;
    font-size: .75rem; font-weight: 600;
}

/* --------------------------------------------------------------- content */

.lwh-content { padding: 1.25rem 1.125rem 3rem; flex: 1 1 auto; }

@media (min-width: 1400px) {
    .lwh-content { padding-left: 1.75rem; padding-right: 1.75rem; }
}

.lwh-page-head {
    display: flex; flex-wrap: wrap; gap: .75rem;
    align-items: flex-start; justify-content: space-between;
    margin-bottom: 1.125rem;
}

.lwh-page-head h1 { font-size: 1.3125rem; font-weight: 600; margin: 0 0 .1875rem; letter-spacing: -.01em; }
.lwh-page-head p  { margin: 0; color: var(--lwh-ink-muted); font-size: .8125rem; max-width: 68ch; }

/* ------------------------------------------------------------------ cards */

.lwh-card {
    background: var(--lwh-surface);
    border: 1px solid var(--lwh-line);
    border-radius: var(--lwh-radius);
    box-shadow: var(--lwh-shadow);
}

.lwh-card__head {
    padding: .8125rem 1rem;
    border-bottom: 1px solid var(--lwh-line);
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}

.lwh-card__title { font-size: .875rem; font-weight: 600; margin: 0; }
.lwh-card__sub   { font-size: .75rem; color: var(--lwh-ink-muted); margin: .125rem 0 0; }
.lwh-card__body  { padding: 1rem; }
.lwh-card__foot  { padding: .6875rem 1rem; border-top: 1px solid var(--lwh-line); background: var(--lwh-canvas); }
.lwh-card__foot:last-child { border-radius: 0 0 var(--lwh-radius) var(--lwh-radius); }

/* -------------------------------------------------------------- stat tile */

.lwh-stat { display: flex; flex-direction: column; gap: .3125rem; }
.lwh-stat__label { font-size: .75rem; color: var(--lwh-ink-muted); font-weight: 500; }
.lwh-stat__value { font-size: 1.5rem; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; }
.lwh-stat__meta  { font-size: .75rem; color: var(--lwh-ink-muted); }
.lwh-stat__delta { font-size: .75rem; font-weight: 600; }
.lwh-stat__delta--up   { color: #157347; }
.lwh-stat__delta--down { color: #b02a37; }

/* ----------------------------------------------------------------- tables */

.lwh-table { margin: 0; font-size: .8125rem; }
.lwh-table > :not(caption) > * > * { padding: .5625rem .75rem; }

.lwh-table thead th {
    background: var(--lwh-canvas);
    font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--lwh-ink-muted); font-weight: 600;
    border-bottom: 1px solid var(--lwh-line); white-space: nowrap;
}

.lwh-table tbody tr:hover { background: var(--lwh-accent-soft); }
.lwh-table td.num, .lwh-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.lwh-table .mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .75rem; }

.lwh-table-wrap { overflow-x: auto; }

/* --------------------------------------------------------------- elements */

.lwh-empty { padding: 2.5rem 1rem; text-align: center; color: var(--lwh-ink-muted); }
.lwh-empty__icon { font-size: 1.75rem; opacity: .35; margin-bottom: .5rem; }

.mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.num  { font-variant-numeric: tabular-nums; }

.lwh-kv { display: grid; grid-template-columns: minmax(140px, 34%) 1fr; gap: .4375rem .875rem; font-size: .8125rem; }
.lwh-kv dt { color: var(--lwh-ink-muted); font-weight: 500; }
.lwh-kv dd { margin: 0; }

.lwh-masked {
    font-family: ui-monospace, monospace;
    letter-spacing: .04em;
    background: var(--lwh-canvas);
    border: 1px dashed var(--lwh-line);
    border-radius: 4px;
    padding: .0625rem .375rem;
    font-size: .75rem;
}

/* A rule the platform enforces, shown where it applies. */
.lwh-rule {
    border-left: 3px solid var(--lwh-accent);
    background: var(--lwh-accent-soft);
    padding: .625rem .8125rem;
    border-radius: 0 var(--lwh-radius-sm) var(--lwh-radius-sm) 0;
    font-size: .8125rem;
}
.lwh-rule--warn   { border-left-color: #cc8a00; background: #fff8e6; }
.lwh-rule--danger { border-left-color: #d64545; background: #fdeceb; }
.lwh-rule__ref {
    font-size: .6875rem; font-weight: 600; letter-spacing: .03em;
    color: var(--lwh-ink-muted); text-transform: uppercase;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-bs-theme="light"]) .lwh-rule--warn   { background: #2b2411; }
    :root:not([data-bs-theme="light"]) .lwh-rule--danger { background: #2c1618; }
}

/* Timeline for state transitions and case history. */
.lwh-timeline { list-style: none; margin: 0; padding: 0 0 0 1.375rem; position: relative; }
.lwh-timeline::before {
    content: ""; position: absolute; left: .3125rem; top: .375rem; bottom: .375rem;
    width: 2px; background: var(--lwh-line);
}
.lwh-timeline__item { position: relative; padding: 0 0 1rem; font-size: .8125rem; }
.lwh-timeline__item::before {
    content: ""; position: absolute; left: -1.375rem; top: .3125rem;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--lwh-surface); border: 2px solid var(--lwh-accent);
}
.lwh-timeline__item--muted::before { border-color: var(--lwh-line); }
.lwh-timeline__when { font-size: .6875rem; color: var(--lwh-ink-muted); }

/* Bars for distribution charts drawn without a plotting library. */
.lwh-bar { height: 6px; border-radius: 3px; background: var(--lwh-line); overflow: hidden; }
.lwh-bar__fill { height: 100%; border-radius: 3px; background: var(--lwh-accent); }

/* Delinquency bucket colours, consistent everywhere they appear. */
.bucket-current    { --bucket: #157347; }
.bucket-dpd_1_7    { --bucket: #7aa116; }
.bucket-dpd_8_30   { --bucket: #cc8a00; }
.bucket-dpd_31_60  { --bucket: #dd6b20; }
.bucket-dpd_61_90  { --bucket: #d64545; }
.bucket-dpd_90_plus{ --bucket: #8b1a1a; }
.bucket-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bucket, #999); display: inline-block; }

/* ------------------------------------------------------------------ forms */

.form-label { font-size: .8125rem; font-weight: 500; margin-bottom: .3125rem; }
.form-text  { font-size: .75rem; }
.form-control, .form-select { font-size: .875rem; }
.lwh-required::after { content: " *"; color: #d64545; }

.lwh-strength { display: flex; gap: 3px; margin-top: .375rem; }
.lwh-strength__seg { height: 4px; flex: 1; border-radius: 2px; background: var(--lwh-line); }
.lwh-strength__seg.on-1 { background: #d64545; }
.lwh-strength__seg.on-2 { background: #dd6b20; }
.lwh-strength__seg.on-3 { background: #cc8a00; }
.lwh-strength__seg.on-4 { background: #157347; }

/* --------------------------------------------------------------- sign-in */

.lwh-auth {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background:
        radial-gradient(1100px 480px at 12% -10%, rgba(18, 102, 241, .16), transparent 62%),
        radial-gradient(900px 420px at 100% 108%, rgba(10, 63, 158, .14), transparent 60%),
        var(--lwh-canvas);
}

.lwh-auth__panel { width: 100%; max-width: 424px; }

.lwh-auth__card {
    background: var(--lwh-surface);
    border: 1px solid var(--lwh-line);
    border-radius: 14px;
    box-shadow: var(--lwh-shadow-lg);
    padding: 1.75rem;
}

.lwh-auth__brand { display: flex; align-items: center; gap: .625rem; justify-content: center; margin-bottom: 1.25rem; }
.lwh-auth__brand .lwh-brand__mark { width: 38px; height: 38px; flex-basis: 38px; font-size: .9375rem; }

.lwh-code-input {
    font-family: ui-monospace, monospace;
    font-size: 1.5rem;
    letter-spacing: .55em;
    text-align: center;
    padding-left: .55em;
}

.lwh-qr { display: grid; place-items: center; padding: .875rem; background: #fff; border-radius: var(--lwh-radius); border: 1px solid var(--lwh-line); }
.lwh-qr svg { max-width: 100%; height: auto; }

.lwh-secret {
    font-family: ui-monospace, monospace;
    font-size: .8125rem;
    word-break: break-all;
    background: var(--lwh-canvas);
    border: 1px solid var(--lwh-line);
    border-radius: var(--lwh-radius-sm);
    padding: .5rem .625rem;
    letter-spacing: .04em;
}

.lwh-recovery-codes {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .375rem;
    font-family: ui-monospace, monospace; font-size: .8125rem;
}
.lwh-recovery-codes span {
    background: var(--lwh-canvas); border: 1px solid var(--lwh-line);
    border-radius: 5px; padding: .3125rem .5rem; text-align: center;
}

/* ----------------------------------------------------------------- print */

/* =====================================================================
   The breadcrumb
   ===================================================================== */

.lwh-crumbs { font-size: .75rem; line-height: 1.2; margin-bottom: .125rem; }
.lwh-crumbs ol {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; align-items: center; gap: .25rem;
}
.lwh-crumbs li { display: flex; align-items: center; gap: .25rem; min-width: 0; }
.lwh-crumbs li + li::before {
    content: "\203A";                 /* a single angle quote, not an image */
    color: var(--lwh-ink-faint, #9aa3ad);
    font-size: .8125rem;
    line-height: 1;
}
.lwh-crumbs a {
    color: var(--lwh-ink-muted); text-decoration: none;
    border-radius: 3px; padding: 0 .0625rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 16rem;
}
.lwh-crumbs a:hover, .lwh-crumbs a:focus-visible { color: var(--lwh-accent); text-decoration: underline; }
.lwh-crumbs [aria-current="page"] span { color: var(--lwh-ink-soft); font-weight: 500; }

/* =====================================================================
   The printed letterhead
   ---------------------------------------------------------------------
   Hidden on screen, and the first thing on every printed page.  A print
   with no letterhead is a sheet of paper nobody can act on, because
   nobody can tell who issued it or what dates it covers.
   ===================================================================== */

.lwh-letterhead, .lwh-print-foot { display: none; }


/* ------------------------------------------------------ letterhead admin */

.lwh-logo-preview {
    border: 1px dashed var(--lwh-line);
    border-radius: var(--lwh-radius-sm, 6px);
    padding: .75rem;
    min-height: 5.5rem;
    display: flex; align-items: center; justify-content: center;
    background: #fff;
}
.lwh-logo-preview img { max-height: 4rem; max-width: 100%; object-fit: contain; }
.lwh-logo-preview--empty { color: var(--lwh-ink-faint, #9aa3ad); font-size: .8125rem; }

/* A frame roughly the proportions of A4, so the preview reads as a sheet of
   paper rather than as another dashboard card. */
.lwh-sheet {
    background: #e9ecef;
    padding: 1.5rem;
    border-radius: var(--lwh-radius);
    display: flex; justify-content: center;
}
.lwh-sheet__inner {
    background: #fff;
    width: 100%;
    max-width: 210mm;
    padding: 14mm 12mm;
    box-shadow: 0 2px 12px rgba(15, 23, 42, .12);
}
.lwh-sheet__sample {
    font-size: .75rem; color: var(--lwh-ink-faint, #9aa3ad);
    border-left: 2px solid var(--lwh-line); padding-left: .625rem; margin: 1.25rem 0 .75rem;
}

/* The preview shows the printed letterhead on screen, so the print-only
   rules are repeated here rather than duplicated by hand in the markup. */
.lwh-letterhead--preview { display: block; }
.lwh-letterhead--preview .lwh-letterhead__band { display: block; text-align: center; }
.lwh-letterhead--preview .lwh-letterhead__logo {
    display: block; margin: 0 auto .625rem;
    max-height: 20mm; max-width: 70mm; object-fit: contain;
}
.lwh-letterhead--preview .lwh-letterhead__org { text-align: center; }
.lwh-letterhead--preview .lwh-letterhead__name {
    font-size: 1.25rem; font-weight: 700; color: #1f3a5f; line-height: 1.15; letter-spacing: -.01em;
}
.lwh-letterhead--preview .lwh-letterhead__legal   { font-size: .75rem; color: #444; margin-top: .125rem; }
.lwh-letterhead--preview .lwh-letterhead__contact { font-size: .75rem; color: #333; margin-top: .25rem; }
.lwh-letterhead--preview .lwh-letterhead__licence {
    font-size: .75rem; color: #333; margin-top: .125rem; font-weight: 600;
}
.lwh-letterhead--preview .lwh-letterhead__rule {
    border-bottom: 2px solid #1f3a5f; margin: .75rem 0 .625rem;
}
.lwh-letterhead--preview .lwh-letterhead__note {
    text-align: center; font-size: .75rem; color: #444; margin: -.25rem 0 .625rem;
}
.lwh-letterhead--preview .lwh-letterhead__doc { text-align: center; }
.lwh-letterhead--preview .lwh-letterhead__title {
    font-size: 1.0625rem; font-weight: 700; margin: 0;
    text-transform: uppercase; letter-spacing: .02em;
}
.lwh-letterhead--preview .lwh-letterhead__path  { font-size: .6875rem; color: #666; margin-top: .125rem; }
.lwh-letterhead--preview .lwh-letterhead__meta {
    width: 100%; border-collapse: collapse; font-size: .6875rem; margin-top: .5rem;
    border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;
}
.lwh-letterhead--preview .lwh-letterhead__meta th {
    text-align: left; font-weight: 600; color: #555; padding: .25rem .75rem .25rem 0;
    white-space: nowrap; width: 1%; text-transform: uppercase; letter-spacing: .03em; font-size: .625rem;
}
.lwh-letterhead--preview .lwh-letterhead__meta td { padding: .25rem 1.5rem .25rem 0; color: #111; }

.lwh-print-foot--preview {
    display: block; border-top: 2px solid #1f3a5f;
    margin-top: 1.25rem; padding-top: .5rem; text-align: center;
}
.lwh-print-foot--preview .lwh-print-foot__note {
    font-size: .75rem; color: #222; font-weight: 600;
}
.lwh-print-foot--preview .lwh-print-foot__confidential {
    font-size: .6875rem; color: #555; margin-top: .1875rem;
    max-width: 34rem; margin-left: auto; margin-right: auto;
}
.lwh-print-foot--preview .lwh-print-foot__issued {
    font-size: .6875rem; color: #666; margin-top: .25rem;
}
.lwh-print-foot--preview .lwh-print-foot__contact { display: block; margin-top: .0625rem; }

/* =====================================================================
   Print
   ---------------------------------------------------------------------
   The screen and the page are different media with different jobs.  On
   screen the navigation, the filters and the buttons are the point; on
   paper every one of them is noise around a table somebody needs to
   read, initial and file.
   ===================================================================== */

@page {
    size: A4;
    /* The top margin is deep enough to hold the running header, which is
       fixed and therefore painted into it on every sheet. */
    margin: 22mm 12mm 14mm 12mm;
}

@media print {

    /* --- what does not belong on paper ---------------------------- */

    .lwh-sidebar,
    .lwh-topbar,
    .lwh-backdrop,
    .lwh-skip,
    .lwh-no-print,
    .lwh-filters,
    .lwh-crumbs,
    .btn,
    .dropdown-menu,
    .alert-dismissible .btn-close,
    .pagination,
    .form-control,
    .form-select,
    nav[aria-label="Pagination"],
    footer.lwh-no-print {
        display: none !important;
    }

    /* --- the page itself ------------------------------------------ */

    html, body {
        background: #fff !important;
        color: #000;
        font-size: 9.5pt;
        line-height: 1.35;
    }

    .lwh-shell { display: block; }

    /* The whole printout sits in one bordered frame, centred in the page
       box: letterhead, content and footer inside one border. It is what
       makes a run of sheets read as one document, and it gives the reader
       an edge to see that nothing was trimmed off in printing.

       The frame goes on .lwh-main rather than on the content, because the
       footer is a sibling of the content and belongs inside the border
       with it. The top bar and the on-screen footer are already hidden
       above, so nothing else is caught by it. */
    .lwh-main {
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 186mm !important;
        padding: 5mm 5mm 4mm !important;
        border: .8pt solid #1f3a5f;
    }

    .lwh-content { padding: 0 !important; max-width: none !important; }

    /* Colours are information here - a red negative, a warning badge -
       so they are kept rather than dropped by the browser's default. */
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    /* --- the letterhead ------------------------------------------- */

    .lwh-letterhead { display: block; margin-bottom: 6mm; }

    /* Centred, and stacked rather than side by side. A letterhead is
       centred on paper; it also means a platform with no logo uploaded
       yet prints a band that simply closes up rather than one with a
       hole where the logo should be. */
    .lwh-letterhead__band {
        display: block;
        text-align: center;
    }

    .lwh-letterhead__logo {
        display: block;
        margin: 0 auto 2.5mm;
        max-height: 20mm; max-width: 70mm;
        object-fit: contain;
    }

    .lwh-letterhead__org { text-align: center; }

    .lwh-letterhead__name {
        font-size: 15pt; font-weight: 700; letter-spacing: -.01em;
        color: #1f3a5f; line-height: 1.15;
    }
    .lwh-letterhead__legal   { font-size: 8pt; color: #444; margin-top: .5mm; }
    .lwh-letterhead__contact { font-size: 8pt; color: #333; margin-top: 1mm; }
    .lwh-letterhead__licence { font-size: 8pt; color: #333; margin-top: .5mm; font-weight: 600; }

    .lwh-letterhead__rule {
        border-bottom: 1.2pt solid #1f3a5f;
        margin: 3mm 0 2.5mm;
    }

    .lwh-letterhead__note {
        text-align: center; font-size: 7.5pt; color: #444;
        margin: -1mm 0 2.5mm;
    }

    /* The document's own title, centred under the organisation's. */
    .lwh-letterhead__doc { margin-bottom: 2mm; text-align: center; }
    .lwh-letterhead__title {
        font-size: 12.5pt; font-weight: 700; margin: 0; color: #111;
        text-transform: uppercase; letter-spacing: .02em;
    }
    .lwh-letterhead__path { font-size: 7.5pt; color: #666; margin-top: .5mm; }

    .lwh-letterhead__meta {
        width: 100%; border-collapse: collapse; font-size: 7.5pt;
        border-top: .4pt solid #ccc; border-bottom: .4pt solid #ccc;
    }
    .lwh-letterhead__meta th {
        text-align: left; font-weight: 600; color: #555;
        padding: 1mm 3mm 1mm 0; white-space: nowrap; width: 1%;
        text-transform: uppercase; letter-spacing: .03em; font-size: 6.5pt;
    }
    .lwh-letterhead__meta td { padding: 1mm 6mm 1mm 0; color: #111; }

    /* --- what carries across the sheets ----------------------------
       The full letterhead heads the document, which is what a letterhead
       is. What has to repeat on every sheet is the thing a reader needs
       in order to make sense of page four on its own: the column
       headings, which display:table-header-group repeats above.

       There is deliberately no running header band. It would have to be
       position:fixed, and a fixed element cannot reserve space - so on a
       full page it prints over the first row of the table, and pushed
       into the page margin to avoid that, Chrome clips it away entirely.
       Both were tried. Page numbers and a date on every sheet are
       available from the browser's own print dialog, which places them
       correctly because it owns the page box. */

    /* The footer stays in the flow rather than fixed. A fixed footer
       cannot reserve space, so on a full page it prints on top of the
       last rows - and a note that obscures a figure is worse than a note
       that appears once at the end. Page numbering is left to the
       browser's own print options, which do it correctly. */
    .lwh-print-foot {
        display: block;
        border-top: .8pt solid #1f3a5f;
        margin-top: 5mm; padding-top: 2mm;
        text-align: center;
    }
    .lwh-print-foot__note {
        font-size: 7.5pt; color: #222; font-weight: 600;
    }
    .lwh-print-foot__confidential {
        font-size: 6.5pt; color: #555; margin-top: .8mm;
        max-width: 150mm; margin-left: auto; margin-right: auto;
    }
    .lwh-print-foot__issued {
        font-size: 6.5pt; color: #666; margin-top: 1.2mm;
    }
    .lwh-print-foot__contact { display: block; margin-top: .4mm; }

    /* --- content -------------------------------------------------- */

    .lwh-page-head { display: block; margin-bottom: 3mm; }
    .lwh-page-head h1 { display: none; }        /* the letterhead already says it */
    .lwh-page-head p  { font-size: 8pt; color: #444; max-width: none; }

    .lwh-card {
        border: .5pt solid #bbb !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        break-inside: auto;
        margin-bottom: 4mm;
        background: #fff !important;
    }

    .lwh-card__head {
        border-bottom: .5pt solid #ddd;
        padding: 2mm 3mm;
        background: #f4f6f8 !important;
    }
    .lwh-card__title { font-size: 9.5pt; font-weight: 700; margin: 0; }
    .lwh-card__sub   { font-size: 7.5pt; color: #555; margin: .5mm 0 0; }
    .lwh-card__body  { padding: 2.5mm 3mm; }

    /* Tables are the reason most of these pages get printed at all. */
    .lwh-table-wrap { overflow: visible !important; }

    table { width: 100%; border-collapse: collapse; font-size: 8pt; }

    /* Repeat the column names at the top of every page: a fifth page of
       figures with no headings is a page that has to be read next to the
       first one. */
    thead { display: table-header-group; }
    tfoot { display: table-footer-group; }

    /* Never split a row across a page break. */
    tr { break-inside: avoid; page-break-inside: avoid; }

    /* Every cell bordered on all four sides, not only underneath. A
       figure in a wide table is read across a row and down a column, and
       horizontal rules alone leave the eye nothing to follow sideways. */
    table { border: .5pt solid #98a4b0 !important; }

    th, td {
        padding: 1.2mm 2mm !important;
        border: .4pt solid #b9c1c9 !important;
        vertical-align: top;
    }

    thead th {
        background: #eef1f4 !important;
        border-bottom: .8pt solid #98a4b0 !important;
        font-size: 7pt; text-transform: uppercase; letter-spacing: .03em;
        color: #333; font-weight: 700;
    }

    /* Zebra striping is a screen affordance; on paper it costs toner and
       makes a photocopy harder to read. */
    .table-striped > tbody > tr:nth-of-type(odd) > * { background: transparent !important; }

    /* Keep a heading with the rows it introduces. */
    h1, h2, h3, h4, .lwh-card__head { break-after: avoid; page-break-after: avoid; }

    .badge {
        border: .4pt solid #999 !important;
        color: #000 !important;
        background: transparent !important;
        font-weight: 600;
        padding: .2mm 1mm !important;
    }

    /* The stat tiles across the top of a report carry the totals, so they
       print - but as a compact row rather than as cards. */
    .lwh-stat { border: .4pt solid #ccc !important; padding: 2mm !important; }

    /* Long values must wrap rather than disappear off the edge. */
    td, th { word-break: break-word; overflow-wrap: anywhere; }

    /* An empty state on paper should say so rather than print a blank. */
    .lwh-empty { border: .4pt dashed #bbb; padding: 4mm; text-align: center; color: #555; }
    .lwh-empty__icon { display: none; }

    /* Links print as text: a printed page cannot be clicked, and a page
       full of underlined blue is harder to read. */
    a { color: #000 !important; text-decoration: none !important; }

    /* Anything the screen collapsed must be open on paper. */
    details { display: block; }
    details > summary { display: none; }
    .collapse { display: block !important; height: auto !important; }
}

/* --------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* --------------------------------------------------- focus visibility
   WCAG 2.1 AA (NFR-USE-050): a visible focus indicator on every interactive
   element, not only on the ones Bootstrap styles. */

a:focus-visible, button:focus-visible, .form-control:focus-visible,
.form-select:focus-visible, .lwh-nav__link:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--lwh-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

.lwh-nav__link:focus-visible { outline-color: #7fb0ff; }

/* Skip link for keyboard users. */
.lwh-skip {
    position: absolute; left: -9999px; top: 0; z-index: 2000;
    background: var(--lwh-accent); color: #fff; padding: .625rem 1rem;
    border-radius: 0 0 var(--lwh-radius-sm) 0; text-decoration: none;
}
.lwh-skip:focus { left: 0; color: #fff; }

/* =====================================================================
   Utilities
   ---------------------------------------------------------------------
   These exist because the Content Security Policy forbids inline styles
   and always will.  A nonce can authorise a <style> element but there is
   no such thing as a nonced style="..." attribute, so every fixed piece
   of presentation in this application is a class, and only a genuinely
   computed value (a bar width, a product's brand colour) is emitted as a
   rule inside a nonced <style> block.

   The alternative was 'unsafe-inline' on style-src, which would have made
   the policy's own promise false on every page of a regulated lending
   platform.  A dozen utility classes is a small price.
   ===================================================================== */

.fs-tiny      { font-size: .6875rem; }
.fs-small     { font-size: .75rem; }
.fs-medium    { font-size: .875rem; }
.fs-stat      { font-size: 1.25rem; }
.w-auto-sm    { width: auto; }
.cursor-pointer { cursor: pointer; }
.pre-wrap     { white-space: pre-wrap; }
.measure      { max-width: 44ch; }
.measure-wide { max-width: 68ch; }
.truncate-220 { max-width: 220px; }
.col-share    { width: 22%; }
.col-actions  { width: 1%; white-space: nowrap; }
.col-narrow   { width: 8rem; }
.tabular      { font-variant-numeric: tabular-nums; }

/* A small round swatch carrying a product's configured brand colour.  The
   colour itself arrives through a generated rule, never an attribute. */
.lwh-swatch {
    display: inline-block; vertical-align: middle;
    width: 9px; height: 9px; border-radius: 50%;
    margin-right: .5rem; background: var(--lwh-ink-muted);
}

/* Filter bar above a table. */
.lwh-filters {
    display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
    padding: .75rem 1rem; border-bottom: 1px solid var(--lwh-line);
}
.lwh-filters .form-control, .lwh-filters .form-select { width: auto; min-width: 9rem; }
.lwh-filters__search { flex: 1 1 16rem; min-width: 12rem; }

/* Definition rows inside a detail panel. */
.lwh-detail-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem 1.5rem;
}

/* A quiet inline label for a figure that needs its unit spelled out. */
.lwh-unit { color: var(--lwh-ink-muted); font-size: .6875rem; margin-left: .25rem; }

/* Charge lines in a Key Facts statement: the total must read as a total. */
.lwh-kfs { width: 100%; }
.lwh-kfs td { padding: .375rem 0; border-bottom: 1px dashed var(--lwh-line); }
.lwh-kfs td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.lwh-kfs tr:last-child td { border-bottom: none; border-top: 2px solid var(--lwh-ink); font-weight: 600; }

/* The error page widens when the debug trace is shown. */
.lwh-auth__panel--wide { max-width: 860px; }

/* --------------------------------------------------- second-batch utilities */

/* A slimmer bar, for a share shown inside a table row rather than on its own. */
.lwh-bar--slim { height: 4px; }
.lwh-bar--tall { height: 10px; }

/* Denser table rows, for reference data read in bulk rather than scanned. */
.lwh-table--tight > :not(caption) > * > * { padding: .375rem .625rem; }

/* Semantic fills, so a bar can carry meaning without an inline style. */
.lwh-bar__fill--good { background: #157347; }
.lwh-bar__fill--warn { background: #cc8a00; }
.lwh-bar__fill--bad  { background: #b02a37; }

/* A quiet grid of small figures, used by the report and product screens. */
.lwh-figures { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.lwh-figure { border: 1px solid var(--lwh-line); border-radius: .5rem; padding: .625rem .75rem; }
.lwh-figure__label { display: block; font-size: .6875rem; text-transform: uppercase;
    letter-spacing: .05em; color: var(--lwh-ink-muted); }
.lwh-figure__value { display: block; font-size: 1.0625rem; font-weight: 600;
    font-variant-numeric: tabular-nums; }
.lwh-figure__meta { display: block; font-size: .6875rem; color: var(--lwh-ink-muted); }

/* Column width helpers for the wider operational tables. */
.col-money   { width: 8.5rem; }
.col-when    { width: 10rem; }
.col-state   { width: 9rem; }

/* ------------------------------------------------------------------
   Exports
   ------------------------------------------------------------------ */
.lwh-export-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
    gap: .75rem;
}

.lwh-export-card {
    border: 1px solid var(--lwh-line);
    border-radius: var(--lwh-radius);
    padding: .875rem 1rem;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.lwh-export-card h3 { font-size: .9375rem; margin: 0; }
.lwh-export-card p  { font-size: .8125rem; color: var(--lwh-ink-soft); margin: 0; }
.lwh-export-card__formats { display: flex; gap: .375rem; flex-wrap: wrap; margin-top: auto; }

.lwh-export-badge {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .1rem .4rem;
    border-radius: 999px;
    border: 1px solid var(--lwh-line);
    color: var(--lwh-ink-soft);
}

.lwh-export-section {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--lwh-ink-soft);
    margin: 1.5rem 0 .5rem;
}

/* =====================================================================
   Messaging
   ===================================================================== */

.lwh-threads { list-style: none; margin: 0; padding: 0; }
.lwh-threads li + li { border-top: 1px solid var(--lwh-line); }

.lwh-thread {
    display: flex; align-items: flex-start; gap: .75rem;
    padding: .75rem 1rem; text-decoration: none; color: inherit;
}
.lwh-thread:hover { background: var(--lwh-canvas); }
.lwh-thread--unread { background: rgba(18, 102, 241, .04); }

.lwh-thread__avatar {
    flex: 0 0 auto;
    width: 2.25rem; height: 2.25rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #1f3a5f; color: #fff;
    font-size: .75rem; font-weight: 600; letter-spacing: .01em;
}
.lwh-thread__avatar--group  { background: #4a5f7a; }
.lwh-thread__avatar--record { background: #2f6f5a; }

.lwh-thread__main { flex: 1 1 auto; min-width: 0; }
.lwh-thread__top  { display: flex; align-items: baseline; gap: .5rem; }
.lwh-thread__name { font-weight: 600; font-size: .875rem; }
.lwh-thread--unread .lwh-thread__name { font-weight: 700; }
.lwh-thread__when { margin-left: auto; font-size: .6875rem; color: var(--lwh-ink-faint, #9aa3ad); white-space: nowrap; }
.lwh-thread__preview {
    display: block; font-size: .8125rem; color: var(--lwh-ink-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: .125rem;
}
.lwh-thread__who  { font-weight: 500; color: var(--lwh-ink-soft); }
.lwh-thread__meta { display: block; margin-top: .25rem; }
.lwh-thread__badge {
    flex: 0 0 auto; align-self: center;
    min-width: 1.375rem; padding: .0625rem .375rem;
    border-radius: 999px; background: var(--lwh-accent); color: #fff;
    font-size: .6875rem; font-weight: 700; text-align: center;
}

.lwh-directory { list-style: none; margin: 0; padding: 0; max-height: 26rem; overflow-y: auto; }
.lwh-directory li + li { border-top: 1px solid var(--lwh-line); }
.lwh-directory form { margin: 0; }
.lwh-directory__person {
    display: flex; align-items: center; gap: .625rem; width: 100%;
    padding: .5rem .25rem; background: none; border: 0; text-align: left; color: inherit;
}
button.lwh-directory__person:hover { background: var(--lwh-canvas); }

.lwh-member-picker { max-height: 20rem; overflow-y: auto; }

/* --- the thread itself --------------------------------------------- */

.lwh-chat { display: flex; flex-direction: column; }
.lwh-chat__scroll {
    height: 60vh; min-height: 22rem; overflow-y: auto;
    padding: 1rem; background: var(--lwh-canvas);
    display: flex; flex-direction: column; gap: .5rem;
}

.lwh-msg { display: flex; }
.lwh-msg--own { justify-content: flex-end; }

.lwh-msg__bubble {
    max-width: 78%;
    background: #fff; border: 1px solid var(--lwh-line);
    border-radius: 12px; padding: .5rem .75rem;
}
.lwh-msg--own .lwh-msg__bubble { background: #e8f0fe; border-color: #cfe0fb; }
.lwh-msg--gone .lwh-msg__bubble { background: #f5f6f7; border-style: dashed; color: var(--lwh-ink-faint, #9aa3ad); }

.lwh-msg__who  { font-size: .6875rem; font-weight: 700; color: #1f3a5f; margin-bottom: .125rem; }
.lwh-msg__body { font-size: .8125rem; line-height: 1.45; word-break: break-word; }
.lwh-msg__note {
    margin-top: .25rem; font-size: .6875rem; color: #8a6d3b;
    background: #fdf6e3; border-radius: 5px; padding: .25rem .375rem;
}
.lwh-msg__foot {
    display: flex; align-items: center; gap: .5rem;
    margin-top: .25rem; font-size: .625rem; color: var(--lwh-ink-faint, #9aa3ad);
}
.lwh-msg__remove {
    background: none; border: 0; padding: 0; font-size: .625rem;
    color: var(--lwh-ink-faint, #9aa3ad); text-decoration: underline;
}
.lwh-msg__remove:hover { color: var(--lwh-danger, #b42318); }

.lwh-msg--system {
    justify-content: center;
    font-size: .6875rem; color: var(--lwh-ink-faint, #9aa3ad);
    background: transparent; padding: .125rem 0;
}

.lwh-chat__compose {
    display: flex; gap: .5rem; align-items: flex-end;
    padding: .75rem 1rem; border-top: 1px solid var(--lwh-line);
}
.lwh-chat__compose textarea { resize: vertical; font-size: .875rem; }

@media print {
    .lwh-chat__scroll { height: auto; overflow: visible; background: #fff; }
    .lwh-msg__bubble  { max-width: 100%; border: .4pt solid #ccc; }
    .lwh-chat__compose, .lwh-msg__remove { display: none !important; }
}

/* =====================================================================
   API reference

   A reference is read in two ways: skimmed for the one endpoint somebody
   needs, and printed to be handed to a developer.  The method label is
   coloured because that is what the eye lands on when skimming; it keeps a
   border rather than relying on colour alone, so it still reads on a black
   and white printout and to somebody who cannot separate the two greens.
   ===================================================================== */

.lwh-api-notes { margin: 0; }
.lwh-api-notes dt {
    font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--lwh-ink-soft); font-weight: 600;
}
.lwh-api-notes dd {
    margin: .125rem 0 .625rem; font-size: .8125rem; color: var(--lwh-ink-muted);
}
.lwh-api-notes dd:last-child { margin-bottom: 0; }

.lwh-api-jump { display: flex; flex-wrap: wrap; gap: .375rem; }
.lwh-api-jump a {
    font-size: .75rem; text-decoration: none;
    padding: .1875rem .5rem; border-radius: 999px;
    border: 1px solid var(--lwh-line); color: var(--lwh-ink-muted);
}
.lwh-api-jump a:hover { background: var(--lwh-canvas); color: var(--lwh-ink); }

.lwh-api-method {
    display: inline-block; min-width: 3.25rem; text-align: center;
    font-size: .625rem; font-weight: 700; letter-spacing: .05em;
    padding: .0625rem .375rem; border-radius: .25rem;
    border: 1px solid currentColor;
}
.lwh-api-method--get    { color: #0b6b4f; }
.lwh-api-method--post   { color: #8a4b00; }
.lwh-api-method--put,
.lwh-api-method--patch  { color: #1a4fa0; }
.lwh-api-method--delete { color: var(--lwh-danger, #b42318); }

.lwh-api-table td:first-child { width: 22rem; white-space: nowrap; }
.lwh-api-table .mono { font-size: .75rem; }

@media print {
    .lwh-api-jump { display: none; }
    .lwh-api-table td:first-child { width: auto; }
    .lwh-api-method { border: .4pt solid #444; color: #000; }
}

/* =====================================================================
   Permission matrix

   A grid of several hundred checkboxes has one job: let somebody find the
   wrong grant and fix it in the same glance. So the role names are written
   down the columns rather than abbreviated to initials - AGENT and AUDITOR
   both abbreviate to "A", and two columns labelled "A" in a table about who
   holds what is worse than a tall header.
   ===================================================================== */

.lwh-matrix thead th { vertical-align: bottom; }

.lwh-matrix thead th:first-child { min-width: 18rem; }

.lwh-matrix__role {
    display: block;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    margin: 0 auto .25rem;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .01em;
    max-height: 11.5rem;
    overflow: hidden;
}

.lwh-matrix__abbr {
    display: block;
    font-size: .625rem;
    letter-spacing: .04em;
    color: var(--lwh-ink-soft);
}

.lwh-matrix__holders {
    display: block;
    font-size: .625rem;
    color: var(--lwh-ink-faint, #9aa3ad);
}

.lwh-matrix__section th { background: var(--lwh-canvas); }

.lwh-matrix tbody tr:hover td { background: rgba(18, 102, 241, .04); }

.lwh-matrix td.is-saving  { opacity: .45; }
.lwh-matrix td.is-saved   { background: rgba(11, 107, 79, .12); }

.lwh-matrix__box { cursor: pointer; }
.lwh-matrix__box:disabled { cursor: not-allowed; opacity: .35; }

/* The one place this dashboard speaks while you work: a save confirmation
   that does not move the grid you are working in. */
.lwh-toast {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%);
    z-index: 1080;
    max-width: min(34rem, calc(100vw - 2rem));
    padding: .5rem .875rem;
    border-radius: .5rem;
    font-size: .8125rem;
    color: #fff;
    background: #1f2933;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25);
}
.lwh-toast.is-error { background: var(--lwh-danger, #b42318); }

@media print {
    .lwh-matrix__role { writing-mode: horizontal-tb; transform: none; font-size: 6pt; }
    .lwh-matrix thead th:first-child { min-width: 0; }
}

/* =====================================================================
   Show the password

   The control sits inside the field rather than beside it, so the form's
   rhythm does not change on the screens that have a password and the ones
   that do not. It is a real button: focusable, reachable by keyboard, and
   labelled, because "the eye" is meaningless to a screen reader.
   ===================================================================== */

.lwh-reveal { position: relative; display: block; }

.lwh-reveal > .form-control { padding-right: 2.5rem; }

.lwh-reveal__toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--lwh-ink-soft);
    cursor: pointer;
    border-radius: 0 .375rem .375rem 0;
}
.lwh-reveal__toggle:hover  { color: var(--lwh-ink); }
.lwh-reveal__toggle:focus-visible {
    outline: 2px solid var(--lwh-accent);
    outline-offset: -2px;
}
.lwh-reveal__toggle svg { width: 1rem; height: 1rem; }

/* The small variant used inside cards and modal bodies. */
.lwh-reveal > .form-control-sm { padding-right: 2.125rem; }
.lwh-reveal:has(> .form-control-sm) .lwh-reveal__toggle { width: 2.125rem; }
.lwh-reveal:has(> .form-control-sm) .lwh-reveal__toggle svg { width: .875rem; height: .875rem; }

@media print { .lwh-reveal__toggle { display: none; } }

/* =====================================================================
   The printable registration form

   A record laid out to be read aloud and checked, rather than worked at.
   Label on the left at a fixed width so the eye runs straight down them;
   value on the right; an em dash where nothing was recorded, because a
   blank cell on a signed form is ambiguous - it could mean "none" or it
   could mean somebody forgot to ask.
   ===================================================================== */

.lwh-form-table th[scope="row"] {
    width: 15rem;
    font-weight: 600;
    color: var(--lwh-ink-muted);
    white-space: normal;
}
.lwh-form-blank { color: var(--lwh-ink-faint, #9aa3ad); }

.lwh-signatures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 2rem 2.5rem;
    margin-top: 2.5rem;
}
.lwh-signature__line { border-bottom: 1px solid var(--lwh-ink-muted); height: 2.25rem; }
.lwh-signature__label {
    font-size: .6875rem; color: var(--lwh-ink-soft);
    text-transform: uppercase; letter-spacing: .04em; margin-top: .375rem;
}

@media print {
    .lwh-form-table th[scope="row"] { width: 52mm; font-size: 8pt; }
    .lwh-form-blank { color: #999; }

    /* Signature blocks must never straddle a page break: half a ruled
       line at the foot of one sheet and a caption at the head of the
       next is not something anybody can sign. */
    .lwh-signatures {
        gap: 6mm 10mm; margin-top: 12mm;
        break-inside: avoid; page-break-inside: avoid;
    }
    .lwh-signature__line { border-bottom: .5pt solid #333; height: 11mm; }
    .lwh-signature__label { font-size: 6.5pt; color: #444; margin-top: 1mm; }
}

/* =====================================================================
   Collapsible navigation sections

   Thirty items across five headings, all open at once, is a wall rather
   than a menu. Each section now folds, and the one containing the
   current screen arrives open - so a person's own context is in front
   of them and everything else is out of the way.

   With no JavaScript every panel is open, which is what the menu did
   before: the script folds it, it is not what makes it work.
   ===================================================================== */

.lwh-nav__heading--toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.lwh-nav__chev {
    width: .75rem;
    height: .75rem;
    flex: 0 0 auto;
    opacity: .55;
    transition: transform .15s ease;
}
.lwh-nav__heading--toggle.is-open .lwh-nav__chev { transform: rotate(180deg); }
.lwh-nav__heading--toggle:hover .lwh-nav__chev  { opacity: 1; }

.lwh-nav__heading--toggle:focus-visible {
    outline: 2px solid var(--lwh-accent);
    outline-offset: -2px;
    border-radius: .25rem;
}

/* Collapsed by default only once the script has said so, so that a
   browser with no JavaScript never hides anything it cannot reopen. */
.lwh-nav--folding .lwh-nav__group { display: none; }
.lwh-nav--folding .lwh-nav__group.is-open { display: block; }

@media print { .lwh-nav__group { display: block !important; } }