/* ==========================================================================
   ACCG Civic Affairs Foundation — Grant Portal
   Theme layer over Bootstrap 5.3. Load AFTER bootstrap.min.css.

   Design notes
   ------------
   The portal's one job is to make it unmistakable what a county still owes and
   when it is due. Everything here serves that: a navy structural rail, a paper
   ground tinted toward the brand rather than neutral grey, slab headings that
   read like an official form, and monospace for anything that is an identifier
   or an amount (reference numbers, dollars, deadlines) so they align and scan.

   The signature element is the docket rail (.docket) — the grant cycle rendered
   as a county records checklist. It is the one place this stylesheet is loud.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
    /* Brand ------------------------------------------------------------- */
    --ink:          #16233a;  /* navy-black — body text, never pure black    */
    --ink-2:        #47566e;  /* secondary text                              */
    --ink-3:        #7c8aa1;  /* placeholder / disabled                      */
    --navy:         #2c4b7c;  /* brand structural — sidebar, section heads   */
    --navy-deep:    #1e3557;  /* pressed / hover on navy                     */
    --navy-soft:    #3a5c92;  /* sidebar hover panel                         */
    --blue:         #2e8bc0;  /* action — links, primary buttons             */
    --blue-deep:    #24729e;
    --blue-wash:    #e8f2f9;  /* selected rows, info panels                  */
    --seal:         #b3242f;  /* required / overdue / destructive            */
    --seal-deep:    #8c1c25;  /* the view-as bar — darker so a button reads    */
    --seal-wash:    #fbecec;

    /* Status vocabulary — named for what they mean in this portal --------- */
    --verified:     #1f7a5c;  /* received / complete                         */
    --verified-wash:#e7f4ef;
    --pending:      #a8730f;  /* due soon / awaiting review                  */
    --pending-wash: #fdf3e0;

    /* Surfaces ----------------------------------------------------------- */
    --paper:        #f2f5f9;  /* page ground, cooled toward the navy         */
    --surface:      #ffffff;
    --surface-sunk: #f7f9fc;  /* table heads, inset panels                   */
    --rule:         #dfe6ef;  /* hairline borders                            */
    --rule-strong:  #c6d2e0;

    /* Type --------------------------------------------------------------- */
    --font-display: "Zilla Slab", Georgia, "Times New Roman", serif;
    --font-ui:      "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-data:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Space — 4px scale, kept tight; this is a work tool ------------------ */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 48px;
    --s-8: 64px;

    /* Shape — bureaucratic precision, not consumer-app softness ----------- */
    --radius:    6px;
    --radius-sm: 4px;
    --radius-lg: 10px;

    /* Elevation — reserved for things that float over the page ------------ */
    --lift:   0 1px 2px rgba(22, 35, 58, .06);
    --lift-2: 0 8px 24px -6px rgba(22, 35, 58, .18), 0 2px 6px rgba(22, 35, 58, .07);

    --sidebar-w: 248px;
    --topbar-h:  60px;

    /* Height of the view-as bar. Zero normally, so every rule below that offsets
       against it is a no-op until body.is-impersonating raises it. */
    --imp-h: 0px;

    --ease: cubic-bezier(.32, .72, .35, 1);
}

/* --------------------------------------------------------------------------
   2. Bootstrap variable overrides
   -------------------------------------------------------------------------- */

:root,
[data-bs-theme="light"] {
    --bs-body-bg:            var(--paper);
    --bs-body-color:         var(--ink);
    --bs-body-font-family:   var(--font-ui);
    --bs-body-font-size:     .9375rem;   /* 15px — dense forms read better   */
    --bs-body-line-height:   1.6;
    --bs-border-color:       var(--rule);
    --bs-border-radius:      var(--radius);
    --bs-border-radius-sm:   var(--radius-sm);
    --bs-border-radius-lg:   var(--radius-lg);

    --bs-primary:            #2e8bc0;
    --bs-primary-rgb:        46, 139, 192;
    --bs-secondary-rgb:      71, 86, 110;
    --bs-success:            #1f7a5c;
    --bs-success-rgb:        31, 122, 92;
    --bs-danger:             #b3242f;
    --bs-danger-rgb:         179, 36, 47;
    --bs-warning:            #a8730f;
    --bs-warning-rgb:        168, 115, 15;
    --bs-info-rgb:           44, 75, 124;

    --bs-link-color:         var(--blue-deep);
    --bs-link-color-rgb:     36, 114, 158;
    --bs-link-hover-color:   var(--navy);
    --bs-link-hover-color-rgb: 44, 75, 124;

    --bs-heading-color:      var(--ink);
    --bs-emphasis-color:     var(--ink);
    --bs-secondary-color:    var(--ink-2);
    --bs-tertiary-bg:        var(--surface-sunk);
    --bs-focus-ring-color:   rgba(46, 139, 192, .3);
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

* { -webkit-font-smoothing: antialiased; }

/* JS toggles conditional sections with the hidden attribute; nothing may
   out-specify it. */
[hidden] { display: none !important; }

body {
    font-family: var(--font-ui);
    background: var(--paper);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    padding-top: var(--imp-h);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -.005em;
    color: var(--ink);
}

h1, .h1 { font-size: 1.75rem; line-height: 1.25; }
h2, .h2 { font-size: 1.3125rem; line-height: 1.3; }
h3, .h3 { font-size: 1.125rem; line-height: 1.35; }
h4, .h4 { font-size: 1rem; line-height: 1.4; }

a { text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

hr { border-color: var(--rule); opacity: 1; }

/* Anything that is an identifier, an amount, or a date gets the data face.  */
.data,
.amount,
.ref {
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

.ref { color: var(--ink-2); font-size: .875em; }

.amount { font-weight: 500; }

/* Small caps label used above headings and over field groups.              */
.eyebrow {
    font-family: var(--font-data);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-2);
}

.muted { color: var(--ink-2); }

/* Visible, branded focus for keyboard users — never removed.               */
:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   4. App shell
   -------------------------------------------------------------------------- */

.shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    min-height: calc(100vh - var(--imp-h));
}

/* The view-as bar -------------------------------------------------------

   The one place the whole page chrome changes meaning, so it is allowed to be
   loud: deep seal, full bleed, fixed, and hatched so it is unmistakable even in
   a screenshot pasted into an email. It is deliberately NOT dismissible and NOT
   hidden in print — a page printed while viewing as someone else must carry the
   fact that it was.                                                          */

.impbar {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1090;              /* over the off-canvas sidebar and its scrim */
    height: var(--imp-h);
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: 0 var(--s-5);
    background: var(--seal-deep);
    background-image: repeating-linear-gradient(
        135deg,
        rgba(255, 255, 255, .05) 0 8px,
        transparent 8px 16px
    );
    color: #fff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .25);
}

.impbar__mark {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    flex: 0 0 auto;
    font-family: var(--font-data);
    font-size: .625rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .8);
}

.impbar__who {
    display: flex;
    align-items: baseline;
    gap: var(--s-2);
    min-width: 0;
    font-size: .875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.impbar__sub {
    font-family: var(--font-data);
    font-size: .75rem;
    color: rgba(255, 255, 255, .7);
}

.impbar__note {
    margin-left: auto;
    font-family: var(--font-data);
    font-size: .6875rem;
    color: rgba(255, 255, 255, .72);
    white-space: nowrap;
}

.impbar__stop { flex: 0 0 auto; margin: 0; }

.impbar__stop .btn {
    font-size: .75rem;
    font-weight: 600;
    padding: var(--s-1) var(--s-3);
    border-color: rgba(255, 255, 255, .5);
}

body.is-impersonating { --imp-h: 40px; }

@media (max-width: 767.98px) {
    .impbar { gap: var(--s-3); padding: 0 var(--s-3); }
    .impbar__mark span, .impbar__note { display: none; }
}

/* Sidebar ---------------------------------------------------------------- */

.sidebar {
    position: sticky;
    top: var(--imp-h);
    align-self: start;
    height: calc(100vh - var(--imp-h));
    display: flex;
    flex-direction: column;
    background: var(--navy);
    color: rgba(255, 255, 255, .82);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.sidebar__brand {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    height: var(--topbar-h);
    padding: 0 var(--s-4);
    flex: 0 0 auto;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    color: #fff;
}

.sidebar__brand:hover { text-decoration: none; color: #fff; }

.sidebar__mark {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--blue);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .8125rem;
    letter-spacing: -.02em;
}

.sidebar__wordmark {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .9375rem;
    line-height: 1.15;
}

.sidebar__wordmark small {
    display: block;
    font-family: var(--font-data);
    font-size: .625rem;
    font-weight: 400;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

.sidebar__nav {
    flex: 1 1 auto;
    padding: var(--s-4) var(--s-3) var(--s-5);
}

.sidebar__section {
    padding: var(--s-5) var(--s-3) var(--s-2);
    font-family: var(--font-data);
    font-size: .625rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .42);
}

.sidebar__section:first-child { padding-top: 0; }

.nav-link-side {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-2) var(--s-3);
    margin-bottom: 1px;
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, .82);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.4;
    transition: background .12s var(--ease), color .12s var(--ease);
}

.nav-link-side:hover {
    background: var(--navy-soft);
    color: #fff;
    text-decoration: none;
}

.nav-link-side.active {
    background: var(--navy-deep);
    color: #fff;
    font-weight: 500;
}

/* Red locator rule on the active item — the accent used to find your place. */
.nav-link-side.active::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--seal);
}

.nav-link-side i { width: 16px; font-size: .875rem; opacity: .75; text-align: center; }
.nav-link-side.active i { opacity: 1; }

/* Outstanding-item count on a nav row. */
.nav-link-side .count {
    margin-left: auto;
    font-family: var(--font-data);
    font-size: .6875rem;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 999px;
    background: var(--seal);
    color: #fff;
}

/* Collapsible group ------------------------------------------------------ */

.nav-group__toggle { cursor: pointer; width: 100%; text-align: left; background: none; border: 0; }
.nav-group__toggle .caret { margin-left: auto; font-size: .625rem; opacity: .6; transition: transform .18s var(--ease); }
.nav-group__toggle[aria-expanded="true"] .caret { transform: rotate(90deg); }
.nav-group__items { padding-left: var(--s-5); }
.nav-group__items .nav-link-side { font-size: .8125rem; padding-top: 5px; padding-bottom: 5px; }

.sidebar__foot {
    flex: 0 0 auto;
    padding: var(--s-3) var(--s-4);
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-family: var(--font-data);
    font-size: .625rem;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .45);
}

/* Topbar ----------------------------------------------------------------- */

.topbar {
    position: sticky;
    top: var(--imp-h);
    z-index: 20;
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: 0 var(--s-6);
    background: var(--surface);
    border-bottom: 1px solid var(--rule);
}

.topbar__crumbs {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: .8125rem;
    color: var(--ink-2);
    min-width: 0;
}

.topbar__crumbs a { color: var(--ink-2); }
.topbar__crumbs a:hover { color: var(--blue-deep); }
.topbar__crumbs .sep { color: var(--rule-strong); }
.topbar__crumbs .current { color: var(--ink); font-weight: 500; }

.topbar__cycle {
    margin-left: auto;
    font-family: var(--font-data);
    font-size: .6875rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-2);
    padding: var(--s-1) var(--s-2);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    background: var(--surface-sunk);
    white-space: nowrap;
}

.usermenu {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-size: .875rem;
    border: 0;
    background: none;
}

.usermenu:hover { background: var(--surface-sunk); text-decoration: none; }

.avatar {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.dropdown-menu {
    border-color: var(--rule);
    box-shadow: var(--lift-2);
    border-radius: var(--radius);
    padding: var(--s-1);
    font-size: .875rem;
}

.dropdown-item { border-radius: var(--radius-sm); padding: var(--s-2) var(--s-3); }
.dropdown-item:active { background: var(--blue); }

/* Main ------------------------------------------------------------------- */

.main { display: flex; flex-direction: column; min-width: 0; }

.content {
    flex: 1 1 auto;
    padding: var(--s-6);
    max-width: 1180px;
    width: 100%;
}

.content--wide { max-width: none; }

.page-head { margin-bottom: var(--s-6); }
.page-head h1 { margin: var(--s-1) 0 0; }
.page-head .lede { margin: var(--s-2) 0 0; color: var(--ink-2); max-width: 68ch; }

.page-head__row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-4);
    flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   5. Panels
   -------------------------------------------------------------------------- */

.panel {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: var(--lift);
    margin-bottom: var(--s-5);
}

.panel__head {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-5);
    border-bottom: 1px solid var(--rule);
}

.panel__head h2,
.panel__head h3 { margin: 0; font-size: 1rem; }
.panel__head .actions { margin-left: auto; display: flex; gap: var(--s-2); }

.panel__body { padding: var(--s-5); }
.panel__body > :last-child { margin-bottom: 0; }

.panel__foot {
    padding: var(--s-3) var(--s-5);
    border-top: 1px solid var(--rule);
    background: var(--surface-sunk);
    border-radius: 0 0 var(--radius) var(--radius);
    font-size: .8125rem;
    color: var(--ink-2);
}

/* Flush variant for tables that should meet the panel edge. */
.panel__body--flush { padding: 0; }

/* --------------------------------------------------------------------------
   6. The docket rail — signature element
   --------------------------------------------------------------------------
   The GCIP grant cycle is a genuine sequence with deadlines, so it is drawn as
   a county records docket: squared nodes, monospace stage numbers, a hairline
   spine, and the current stage opened to show exactly what is outstanding.
   -------------------------------------------------------------------------- */

.docket { list-style: none; margin: 0; padding: 0; }

.docket__stage {
    position: relative;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: var(--s-4);
    padding: 0 0 var(--s-5);
}

.docket__stage:last-child { padding-bottom: 0; }

/* The spine. */
.docket__stage:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 30px;
    bottom: 4px;
    width: 1px;
    background: var(--rule-strong);
}

.docket__node {
    position: relative;
    z-index: 1;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    border: 1px solid var(--rule-strong);
    background: var(--surface);
    font-family: var(--font-data);
    font-size: .6875rem;
    font-weight: 500;
    color: var(--ink-2);
}

.docket__body { padding-top: 3px; min-width: 0; }

.docket__title {
    display: flex;
    align-items: baseline;
    gap: var(--s-3);
    flex-wrap: wrap;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
}

.docket__meta {
    font-family: var(--font-data);
    font-size: .75rem;
    color: var(--ink-2);
    letter-spacing: .01em;
}

.docket__note { margin: var(--s-1) 0 0; font-size: .875rem; color: var(--ink-2); }

/* Done ------------------------------------------------------------------- */
.docket__stage--done .docket__node {
    background: var(--verified);
    border-color: var(--verified);
    color: #fff;
}
.docket__stage--done .docket__title { color: var(--ink-2); font-weight: 500; }
.docket__stage--done .docket__meta { color: var(--verified); }

/* Current ---------------------------------------------------------------- */
.docket__stage--current .docket__node {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(44, 75, 124, .12);
}
.docket__stage--current .docket__title { color: var(--ink); }

.docket__stage--current .docket__body {
    padding: var(--s-3) var(--s-4) var(--s-4);
    margin-top: -6px;
    background: var(--surface-sunk);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
}

/* Upcoming --------------------------------------------------------------- */
.docket__stage--todo .docket__node { border-style: dashed; }
.docket__stage--todo .docket__title,
.docket__stage--todo .docket__meta { color: var(--ink-3); }

/* Overdue ---------------------------------------------------------------- */
.docket__stage--overdue .docket__node {
    background: var(--seal);
    border-color: var(--seal);
    color: #fff;
}
.docket__stage--overdue .docket__meta { color: var(--seal); font-weight: 500; }

/* Outstanding items inside the current stage. */
.docket__items { list-style: none; margin: var(--s-3) 0 0; padding: 0; }

.docket__item {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-2) 0;
    border-top: 1px solid var(--rule);
    font-size: .875rem;
}

.docket__item:first-child { border-top: 0; padding-top: 0; }
.docket__item .tick { width: 16px; text-align: center; flex: 0 0 16px; }
.docket__item--done .tick { color: var(--verified); }
.docket__item--open .tick { color: var(--rule-strong); }
.docket__item--done .label { color: var(--ink-2); }
.docket__item .action { margin-left: auto; }

/* Entrance: one orchestrated moment on the dashboard, nothing else moves.   */
@media (prefers-reduced-motion: no-preference) {
    .docket--animate .docket__stage {
        opacity: 0;
        transform: translateY(6px);
        animation: docket-in .38s var(--ease) forwards;
    }
    .docket--animate .docket__stage:nth-child(1) { animation-delay: .02s; }
    .docket--animate .docket__stage:nth-child(2) { animation-delay: .08s; }
    .docket--animate .docket__stage:nth-child(3) { animation-delay: .14s; }
    .docket--animate .docket__stage:nth-child(4) { animation-delay: .20s; }
    .docket--animate .docket__stage:nth-child(5) { animation-delay: .26s; }
    .docket--animate .docket__stage:nth-child(6) { animation-delay: .32s; }
}

@keyframes docket-in {
    to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   7. Stat tiles
   -------------------------------------------------------------------------- */

.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--s-4);
    margin-bottom: var(--s-5);
}

.tile {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: var(--s-4);
    box-shadow: var(--lift);
}

.tile__label {
    font-family: var(--font-data);
    font-size: .6875rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-2);
}

.tile__value {
    font-family: var(--font-data);
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 1.1;
    margin-top: var(--s-2);
    color: var(--ink);
    letter-spacing: -.02em;
}

.tile__note { font-size: .8125rem; color: var(--ink-2); margin-top: var(--s-1); }

.tile--alert { border-color: var(--seal); }
.tile--alert .tile__value { color: var(--seal); }

/* --------------------------------------------------------------------------
   8. Forms
   -------------------------------------------------------------------------- */

.form-label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: var(--s-1);
}

.form-label .req { color: var(--seal); margin-left: 2px; }

.form-text { font-size: .8125rem; color: var(--ink-2); }

.form-control,
.form-select {
    border-color: var(--rule-strong);
    border-radius: var(--radius-sm);
    padding: 7px 11px;
    font-size: .9375rem;
    color: var(--ink);
    background-color: var(--surface);
    transition: border-color .12s var(--ease), box-shadow .12s var(--ease);
}

.form-control::placeholder { color: var(--ink-3); }

.form-control:focus,
.form-select:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(46, 139, 192, .16);
}

.form-control.is-invalid,
.form-select.is-invalid { border-color: var(--seal); }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(179, 36, 47, .15); }
.invalid-feedback { font-size: .8125rem; color: var(--seal); }

textarea.form-control { min-height: 96px; line-height: 1.55; }

.form-check-input { border-color: var(--rule-strong); }
.form-check-input:checked { background-color: var(--blue); border-color: var(--blue); }
.form-check-label { font-size: .9375rem; }

/* A titled group of related fields — the backbone of the long grant form.  */
.fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 var(--s-6);
}

.fieldset > legend {
    float: none;
    width: auto;
    display: flex;
    align-items: baseline;
    gap: var(--s-3);
    padding: 0 0 var(--s-3);
    margin: 0 0 var(--s-4);
    border-bottom: 1px solid var(--rule);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
}

.fieldset > legend .step {
    font-family: var(--font-data);
    font-size: .75rem;
    font-weight: 500;
    color: var(--blue-deep);
    padding: 2px 7px;
    border-radius: var(--radius-sm);
    background: var(--blue-wash);
}

/* Question rows ---------------------------------------------------------
   The application form is forty-four questions, twenty of them yes/no. Laying
   a short answer out beside its question, ledger-style, keeps the whole section
   scannable; only answers that need room (paragraphs, option lists) stack. */

.qrow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 300px);
    gap: var(--s-5);
    align-items: start;
    padding: var(--s-4) 0;
    border-top: 1px solid var(--rule);
}

.qrow:first-child { border-top: 0; padding-top: 0; }
.qrow[hidden] { display: none; }

.qrow__q .form-label { margin-bottom: 0; font-weight: 500; }
.qrow__q .form-text { margin-top: var(--s-1); }
.qrow__a { padding-top: 1px; }

/* Stacked: the control drops beneath the question and spans the row. */
.qrow--stack {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-3);
}

.qrow--stack .qrow__a { max-width: 100%; }

.qrow--invalid .form-label { color: var(--seal); }

/* A newly revealed conditional question announces itself, quietly. */
@media (prefers-reduced-motion: no-preference) {
    .qrow[data-show-when]:not([hidden]) {
        animation: qrow-in .22s var(--ease);
    }
}

@keyframes qrow-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

/* Choice cards -----------------------------------------------------------
   For a small set of mutually exclusive routes where each needs a sentence of
   explanation — a plain radio list buries the explanation. */

.choices { display: grid; gap: var(--s-3); }

.choice {
    display: flex;
    gap: var(--s-3);
    align-items: flex-start;
    padding: var(--s-4);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color .12s var(--ease), background .12s var(--ease);
}

.choice:hover { border-color: var(--blue); background: var(--surface-sunk); }

.choice.is-selected,
.choice:has(input:checked) {
    border-color: var(--navy);
    background: var(--blue-wash);
    box-shadow: inset 0 0 0 1px var(--navy);
}

.choice:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }

.choice .form-check-input { margin-top: 3px; flex: 0 0 auto; }
.choice__body { display: block; }
.choice__label { display: block; font-weight: 600; }
.choice__blurb { display: block; font-size: .875rem; color: var(--ink-2); margin-top: 2px; }

/* Segmented yes/no ------------------------------------------------------- */

.segmented {
    display: inline-flex;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface);
}

.segmented input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.segmented label {
    padding: 6px 20px;
    margin: 0;
    font-size: .875rem;
    font-weight: 500;
    color: var(--ink-2);
    cursor: pointer;
    user-select: none;
    transition: background .12s var(--ease), color .12s var(--ease);
}

.segmented label + input + label { border-left: 1px solid var(--rule-strong); }
.segmented label:hover { background: var(--surface-sunk); color: var(--ink); }

.segmented input:checked + label {
    background: var(--navy);
    color: #fff;
}

.segmented input:focus-visible + label {
    outline: 2px solid var(--blue);
    outline-offset: -2px;
}

/* Radio list with a reveal-on-select companion input. */
.radio-stack .form-check { padding: var(--s-1) 0 var(--s-1) 1.6em; }
.radio-stack__other { margin: var(--s-2) 0 var(--s-2) -1.6em; max-width: 200px; }

.input-group--money { max-width: 200px; }
.input-group-text {
    background: var(--surface-sunk);
    border-color: var(--rule-strong);
    color: var(--ink-2);
    font-family: var(--font-data);
    font-size: .875rem;
}

.form-control--sm { max-width: 120px; }

/* Intro sentence under a fieldset legend. */
.section-intro { margin: calc(var(--s-3) * -1) 0 var(--s-5); max-width: 68ch; font-size: .875rem; }

/* Running count of required answers, in the sticky save bar. */
.formbar__progress {
    font-size: .75rem;
    color: var(--ink-2);
    padding: 3px 9px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    background: var(--surface-sunk);
    white-space: nowrap;
}

/* Section progress marker in a fieldset legend. */
.fieldset > legend .done {
    margin-left: auto;
    font-family: var(--font-data);
    font-size: .6875rem;
    font-weight: 400;
    letter-spacing: .04em;
    color: var(--ink-2);
}

.fieldset > legend .done.is-complete { color: var(--verified); }

/* Computed total on the reimbursement form. Reads as an answer, not an input. */
.total-row { border-top: 2px solid var(--rule-strong); }
.total-row .form-label { font-weight: 600; }

.total-row__value {
    display: inline-block;
    font-family: var(--font-data);
    font-size: 1.375rem;
    font-weight: 500;
    letter-spacing: -.02em;
    color: var(--ink);
}

.total-row__value.is-zero { color: var(--ink-3); }

/* A typed signature should look like one. */
.signature {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-style: italic;
    max-width: 320px;
}

/* Sticky save bar for long forms. */
.formbar {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-5);
    margin: var(--s-6) calc(var(--s-6) * -1) calc(var(--s-6) * -1);
    background: var(--surface);
    border-top: 1px solid var(--rule);
    box-shadow: 0 -2px 10px rgba(22, 35, 58, .05);
}

.formbar .status { font-size: .8125rem; color: var(--ink-2); margin-right: auto; }

/* --------------------------------------------------------------------------
   9. Buttons
   -------------------------------------------------------------------------- */

.btn {
    --bs-btn-padding-y: 7px;
    --bs-btn-padding-x: 15px;
    --bs-btn-font-size: .875rem;
    --bs-btn-font-weight: 500;
    --bs-btn-border-radius: var(--radius-sm);
    transition: background-color .12s var(--ease), border-color .12s var(--ease), color .12s var(--ease);
}

.btn-primary {
    --bs-btn-bg: var(--blue);
    --bs-btn-border-color: var(--blue);
    --bs-btn-hover-bg: var(--blue-deep);
    --bs-btn-hover-border-color: var(--blue-deep);
    --bs-btn-active-bg: var(--blue-deep);
    --bs-btn-active-border-color: var(--blue-deep);
    --bs-btn-disabled-bg: var(--blue);
    --bs-btn-disabled-border-color: var(--blue);
}

/* Navy is the "commit" action: submit an application, approve an award.    */
.btn-navy {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--navy);
    --bs-btn-border-color: var(--navy);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--navy-deep);
    --bs-btn-hover-border-color: var(--navy-deep);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--navy-deep);
    --bs-btn-active-border-color: var(--navy-deep);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--navy);
    --bs-btn-disabled-border-color: var(--navy);
}

.btn-outline-secondary {
    --bs-btn-color: var(--ink);
    --bs-btn-border-color: var(--rule-strong);
    --bs-btn-hover-color: var(--ink);
    --bs-btn-hover-bg: var(--surface-sunk);
    --bs-btn-hover-border-color: var(--rule-strong);
    --bs-btn-active-color: var(--ink);
    --bs-btn-active-bg: var(--rule);
    --bs-btn-active-border-color: var(--rule-strong);
}

.btn-danger {
    --bs-btn-bg: var(--seal);
    --bs-btn-border-color: var(--seal);
    --bs-btn-hover-bg: #961d26;
    --bs-btn-hover-border-color: #961d26;
}

.btn-link { --bs-btn-color: var(--blue-deep); --bs-btn-hover-color: var(--navy); text-decoration: none; }
.btn-link:hover { text-decoration: underline; }

.btn-sm { --bs-btn-padding-y: 4px; --bs-btn-padding-x: 10px; --bs-btn-font-size: .8125rem; }

/* --------------------------------------------------------------------------
   10. Tables
   -------------------------------------------------------------------------- */

.table {
    --bs-table-bg: var(--surface);
    --bs-table-color: var(--ink);
    --bs-table-border-color: var(--rule);
    --bs-table-hover-bg: var(--blue-wash);
    --bs-table-hover-color: var(--ink);
    margin-bottom: 0;
    font-size: .875rem;
}

.table > thead th {
    background: var(--surface-sunk);
    border-bottom: 1px solid var(--rule);
    padding: var(--s-3) var(--s-4);
    font-family: var(--font-data);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-2);
    white-space: nowrap;
}

.table > tbody td {
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--rule);
    vertical-align: middle;
}

.table > tbody tr:last-child td { border-bottom: 0; }

/* A sticky header sticks to its nearest scroll container. Inside .table-scroll
   that is the div, not the page — so offsetting by the topbar height pushed the
   header down over the first row. Pin it to the top of whatever contains it. */
.table-sticky thead th { position: sticky; top: 0; z-index: 5; }

.table .num { text-align: right; font-family: var(--font-data); font-variant-numeric: tabular-nums; }
.table .nowrap { white-space: nowrap; }
.table .rowactions { text-align: right; white-space: nowrap; }

/* Wide tables scroll inside their panel, never the page. */
.table-scroll { overflow-x: auto; }

.table > thead th a { color: inherit; }
.table > thead th a:hover { color: var(--blue-deep); text-decoration: none; }

/* Filter bar above a staff table. */
.filters {
    display: flex;
    gap: var(--s-4);
    align-items: flex-end;
    flex-wrap: wrap;
}

.filters__field { min-width: 150px; }
.filters__field--grow { flex: 1 1 260px; }
.filters__actions { display: flex; gap: var(--s-2); }

/* Compliance matrix ------------------------------------------------------
   One row per county, one column per requirement. The point is to scan down a
   column and see who has not filed — so the cells are marks, not words. */

.matrix { font-size: .8125rem; }
.matrix th.rot { height: 116px; padding: 0; vertical-align: bottom; white-space: nowrap; }

.matrix th.rot > div {
    transform: translateX(14px) rotate(-60deg);
    transform-origin: bottom left;
    width: 26px;
}

.matrix th.rot span {
    border-bottom: 1px solid var(--rule);
    padding: 0 var(--s-2) 2px 0;
    font-family: var(--font-data);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: none;
    color: var(--ink-2);
}

.matrix td.cell { text-align: center; width: 38px; padding: var(--s-2) 0; }
.matrix .cell i { font-size: .9375rem; }
.matrix .cell--done i    { color: var(--verified); }
.matrix .cell--open i    { color: var(--rule-strong); }
.matrix .cell--overdue i { color: var(--seal); }
.matrix .cell--na        { color: var(--ink-3); }
.matrix tbody tr:hover .cell--open i { color: var(--ink-3); }

.matrix__legend {
    display: flex;
    gap: var(--s-4);
    flex-wrap: wrap;
    font-size: .8125rem;
    color: var(--ink-2);
}

.matrix__legend span { display: inline-flex; align-items: center; gap: 5px; }

/* --------------------------------------------------------------------------
   11. Status pills
   -------------------------------------------------------------------------- */

.badge-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-family: var(--font-ui);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .01em;
    border: 1px solid transparent;
}

.badge-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.badge-status.text-bg-success   { background: var(--verified-wash) !important; color: var(--verified) !important; border-color: rgba(31, 122, 92, .22); }
.badge-status.text-bg-warning   { background: var(--pending-wash) !important;  color: var(--pending) !important;  border-color: rgba(168, 115, 15, .24); }
.badge-status.text-bg-danger    { background: var(--seal-wash) !important;     color: var(--seal) !important;     border-color: rgba(179, 36, 47, .22); }
.badge-status.text-bg-info      { background: var(--blue-wash) !important;     color: var(--navy) !important;     border-color: rgba(44, 75, 124, .2); }
.badge-status.text-bg-secondary { background: var(--surface-sunk) !important;  color: var(--ink-2) !important;    border-color: var(--rule); }

/* --------------------------------------------------------------------------
   12. Documents
   -------------------------------------------------------------------------- */

.doclist { list-style: none; margin: 0; padding: 0; }

.docrow {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--rule);
}

.docrow:last-child { border-bottom: 0; }
.docrow:hover { background: var(--surface-sunk); }

.docrow__icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--blue-wash);
    color: var(--navy);
    font-size: .9375rem;
}

.docrow__icon--missing { background: var(--surface-sunk); color: var(--ink-3); }

.docrow__main { min-width: 0; flex: 1 1 auto; }
.docrow__name { font-weight: 500; word-break: break-word; }
.docrow__meta { font-family: var(--font-data); font-size: .75rem; color: var(--ink-2); }
.docrow__actions { display: flex; gap: var(--s-2); flex: 0 0 auto; }

/* Requirement rows -------------------------------------------------------
   One row per thing the county owes. The status mark runs down the left as a
   spine so the eye can find the open items without reading a word. */

.reqrow {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: var(--s-4);
    padding: var(--s-5);
    border-bottom: 1px solid var(--rule);
}

.reqrow:last-child { border-bottom: 0; }

.reqrow__mark { font-size: 1.0625rem; line-height: 1.4; text-align: center; }
.reqrow--done    .reqrow__mark { color: var(--verified); }
.reqrow--open    .reqrow__mark { color: var(--rule-strong); }
.reqrow--overdue .reqrow__mark { color: var(--seal); }

.reqrow--overdue { background: var(--seal-wash); }
.reqrow--done .reqrow__title { color: var(--ink-2); }

.reqrow__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-4);
    flex-wrap: wrap;
}

.reqrow__title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.reqrow__tag {
    margin-left: var(--s-2);
    font-family: var(--font-data);
    font-size: .625rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-2);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    padding: 1px 5px;
    vertical-align: 2px;
}

.reqrow__due {
    font-family: var(--font-data);
    font-size: .75rem;
    color: var(--ink-2);
    white-space: nowrap;
}

.reqrow--overdue .reqrow__due { color: var(--seal); font-weight: 500; }
.reqrow--done    .reqrow__due { color: var(--verified); }

.reqrow__blurb  { margin: var(--s-2) 0 0; font-size: .875rem; color: var(--ink-2); max-width: 72ch; }
.reqrow__detail { margin: var(--s-2) 0 0; font-size: .875rem; }
.reqrow__blank  { margin: var(--s-2) 0 0; font-size: .875rem; }

.doclist--inline { margin-top: var(--s-3); border: 1px solid var(--rule); border-radius: var(--radius); }
.doclist--inline .docrow { padding: var(--s-2) var(--s-3); }

.reqrow__upload {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-top: var(--s-3);
    flex-wrap: wrap;
}

.reqrow__upload .dropzone { flex: 1 1 240px; }

/* Drop zone -------------------------------------------------------------- */

.dropzone {
    display: block;
    padding: var(--s-6) var(--s-5);
    border: 1px dashed var(--rule-strong);
    border-radius: var(--radius);
    background: var(--surface-sunk);
    text-align: center;
    cursor: pointer;
    transition: border-color .14s var(--ease), background .14s var(--ease);
}

.dropzone:hover,
.dropzone.is-over {
    border-color: var(--blue);
    background: var(--blue-wash);
}

.dropzone__icon { font-size: 1.5rem; color: var(--navy); }
.dropzone__title { font-weight: 600; margin-top: var(--s-2); display: block; }
.dropzone__hint { font-size: .8125rem; color: var(--ink-2); margin-top: var(--s-1); display: block; }
.dropzone input[type="file"] { display: none; }

/* Slim variant: sits inline next to its Upload button on a checklist row. */
.dropzone--slim {
    padding: var(--s-3) var(--s-4);
    text-align: left;
}

.dropzone--slim .dropzone__title { margin-top: 0; font-size: .875rem; }
.dropzone--slim .dropzone__hint  { font-family: var(--font-data); font-size: .6875rem; }

/* Long-form content ------------------------------------------------------
   Policy and guidance pages are read, not scanned, so they get a measure and a
   rhythm of their own rather than the dense spacing the work screens use. */

.prose { max-width: 68ch; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }

.prose p,
.prose ul,
.prose ol { margin: 0 0 var(--s-4); line-height: 1.7; }

.prose h2 {
    font-size: 1.1875rem;
    margin: var(--s-7) 0 var(--s-3);
    padding-bottom: var(--s-2);
    border-bottom: 1px solid var(--rule);
}

.prose h3 { font-size: 1rem; margin: var(--s-5) 0 var(--s-2); }
.prose li { margin-bottom: var(--s-2); }
.prose li:last-child { margin-bottom: 0; }
.prose strong { font-weight: 600; }
.prose .lead { font-size: 1.0625rem; color: var(--ink-2); }

/* A fact worth not missing, inside prose. */
.note {
    border-left: 3px solid var(--blue);
    background: var(--blue-wash);
    padding: var(--s-3) var(--s-4);
    border-radius: 0 var(--radius) var(--radius) 0;
    margin: var(--s-5) 0;
    font-size: .9375rem;
}

.note--warn { border-left-color: var(--seal); background: var(--seal-wash); }
.note > :last-child { margin-bottom: 0; }

/* In-page contents for a long document. */
.toc {
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--surface-sunk);
    padding: var(--s-4) var(--s-5);
    margin-bottom: var(--s-6);
}

.toc__title {
    font-family: var(--font-data);
    font-size: .6875rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-2);
    margin-bottom: var(--s-2);
}

.toc ol { margin: 0; padding-left: var(--s-5); font-size: .9375rem; }
.toc li { margin-bottom: var(--s-1); }

/* FAQ accordion ---------------------------------------------------------- */

.faq { border-bottom: 1px solid var(--rule); }
.faq:last-child { border-bottom: 0; }
.faq[hidden] { display: none !important; }

.faq__q {
    list-style: none;
    cursor: pointer;
    padding: var(--s-4) var(--s-5);
    padding-right: var(--s-7);
    position: relative;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
}

.faq__q::-webkit-details-marker { display: none; }

/* Drawn rather than an icon-font glyph, so it does not depend on the icon
   stylesheet having loaded. */
.faq__q::after {
    content: "";
    position: absolute;
    right: var(--s-5);
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--ink-2);
    border-bottom: 2px solid var(--ink-2);
    transform: translateY(-70%) rotate(45deg);
    transition: transform .18s var(--ease);
}

.faq[open] .faq__q::after { transform: translateY(-30%) rotate(225deg); }
.faq__q:hover { background: var(--surface-sunk); }
.faq[open] .faq__q { background: var(--surface-sunk); }
.faq__a { padding: 0 var(--s-5) var(--s-5); font-size: .9375rem; }

/* Resource links -------------------------------------------------------- */

.reslist { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.rescard {
    display: flex;
    gap: var(--s-3);
    align-items: flex-start;
    padding: var(--s-4);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    transition: border-color .12s var(--ease), box-shadow .12s var(--ease);
}

a.rescard:hover { border-color: var(--blue); box-shadow: var(--lift); text-decoration: none; }

.rescard__icon {
    width: 34px; height: 34px; flex: 0 0 34px;
    display: grid; place-items: center;
    border-radius: var(--radius-sm);
    background: var(--blue-wash);
    color: var(--navy);
}

.rescard__name { font-weight: 600; }
.rescard__meta { font-family: var(--font-data); font-size: .6875rem; color: var(--ink-2); margin-top: 2px; }
.rescard--missing { opacity: .6; }
.rescard--missing .rescard__icon { background: var(--surface-sunk); color: var(--ink-3); }

/* Email template editing ------------------------------------------------- */

.template-body {
    font-family: var(--font-data);
    font-size: .8125rem;
    line-height: 1.7;
}

.email-preview {
    width: 100%;
    height: 520px;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: #f1f4f8;
}

/* A panel carrying a warning state, used by the email pause banner. */
.panel--alert { border-color: var(--seal); }

/* Video ----------------------------------------------------------------- */

.videoframe {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--ink);
    border-radius: var(--radius);
    overflow: hidden;
}

.videoframe iframe,
.videoframe video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.videomissing {
    display: grid;
    place-items: center;
    text-align: center;
    padding: var(--s-6);
    color: rgba(255, 255, 255, .75);
    font-size: .875rem;
}

/* --------------------------------------------------------------------------
   13. Alerts, empty states, misc
   -------------------------------------------------------------------------- */

.alert {
    border-radius: var(--radius);
    border-width: 1px;
    font-size: .875rem;
    padding: var(--s-3) var(--s-4);
}

.alert-success { background: var(--verified-wash); border-color: rgba(31, 122, 92, .25); color: #14563f; }
.alert-danger  { background: var(--seal-wash);     border-color: rgba(179, 36, 47, .25);  color: #8a1b24; }
.alert-warning { background: var(--pending-wash);  border-color: rgba(168, 115, 15, .28); color: #7a530a; }
.alert-info    { background: var(--blue-wash);     border-color: rgba(44, 75, 124, .22);  color: var(--navy); }

.empty {
    padding: var(--s-7) var(--s-5);
    text-align: center;
    color: var(--ink-2);
}

.empty__icon { font-size: 1.75rem; color: var(--rule-strong); }
.empty__title { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--ink); margin-top: var(--s-3); }
.empty__body { font-size: .875rem; margin: var(--s-2) auto 0; max-width: 46ch; }
.empty__action { margin-top: var(--s-4); }

/* Definition grid for read-only detail views. */
.deflist {
    display: grid;
    grid-template-columns: minmax(140px, 200px) minmax(0, 1fr);
    gap: 0;
    margin: 0;
}

.deflist dt {
    padding: var(--s-3) var(--s-4) var(--s-3) 0;
    border-bottom: 1px solid var(--rule);
    font-size: .8125rem;
    font-weight: 500;
    color: var(--ink-2);
}

.deflist dd {
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--rule);
    margin: 0;
    word-break: break-word;
}

.deflist dt:last-of-type,
.deflist dd:last-of-type { border-bottom: 0; }

/* --------------------------------------------------------------------------
   14. Sign-in pages
   -------------------------------------------------------------------------- */

.auth {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    background: var(--surface);
}

/* Left: the brand panel. Deep navy, one quiet statement, nothing else.      */
.auth__brand {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--s-7) var(--s-8);
    background: var(--navy);
    color: #fff;
}

.auth__mark {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
}

/* Sits on navy, so it must set its own colour — the base h1 rule is ink. */
.auth__statement {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.4vw, 2.125rem);
    font-weight: 600;
    line-height: 1.25;
    max-width: 20ch;
    margin: 0;
    color: #fff;
}

.auth__sub {
    margin-top: var(--s-4);
    color: rgba(255, 255, 255, .72);
    max-width: 42ch;
    font-size: .9375rem;
}

.auth__foot {
    font-family: var(--font-data);
    font-size: .6875rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

.auth__panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--s-7) var(--s-8);
}

.auth__form { width: 100%; max-width: 400px; margin: 0 auto; }
.auth__form h1 { font-size: 1.5rem; margin-bottom: var(--s-2); }
.auth__form .lede { color: var(--ink-2); margin-bottom: var(--s-5); }
.auth__form .btn { width: 100%; padding: 9px; font-size: .9375rem; }
.auth__aside { margin-top: var(--s-5); font-size: .875rem; color: var(--ink-2); text-align: center; }

/* --------------------------------------------------------------------------
   15. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
    .shell { grid-template-columns: minmax(0, 1fr); }

    .sidebar {
        position: fixed;
        inset: var(--imp-h) auto 0 0;
        width: var(--sidebar-w);
        z-index: 1045;
        transform: translateX(-100%);
        transition: transform .22s var(--ease);
        box-shadow: var(--lift-2);
    }

    .sidebar.is-open { transform: none; }

    .sidebar-scrim {
        position: fixed;
        inset: 0;
        z-index: 1040;
        background: rgba(22, 35, 58, .45);
        opacity: 0;
        pointer-events: none;
        transition: opacity .22s var(--ease);
    }

    .sidebar-scrim.is-open { opacity: 1; pointer-events: auto; }

    .content { padding: var(--s-5) var(--s-4); }
    .topbar  { padding: 0 var(--s-4); }
    .formbar { margin-left: calc(var(--s-4) * -1); margin-right: calc(var(--s-4) * -1); padding: var(--s-3) var(--s-4); }
}

@media (min-width: 992px) {
    .sidebar-toggle, .sidebar-scrim { display: none; }
}

@media (max-width: 767.98px) {
    .auth { grid-template-columns: minmax(0, 1fr); }
    .auth__brand { padding: var(--s-5) var(--s-4); }
    .auth__brand .auth__statement, .auth__brand .auth__sub, .auth__foot { display: none; }
    .auth__panel { padding: var(--s-6) var(--s-4); }

    .deflist { grid-template-columns: minmax(0, 1fr); }
    .deflist dt { border-bottom: 0; padding-bottom: 0; }
    .deflist dd { padding-top: var(--s-1); }

    .topbar__cycle { display: none; }
    .docket__stage { gap: var(--s-3); }
    .formbar { flex-wrap: wrap; }
    .formbar .btn { flex: 1 1 auto; }
}

/* --------------------------------------------------------------------------
   16. Motion & print
   -------------------------------------------------------------------------- */

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

@media print {
    .sidebar, .topbar, .formbar, .btn, .sidebar-scrim, .alert-dismissible .btn-close { display: none !important; }

    /* Kept: a printout made from inside someone else's account must say so. */
    .impbar { position: static; background: var(--seal-deep) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .impbar .btn { display: none !important; }
    .shell { grid-template-columns: minmax(0, 1fr); }
    .content { padding: 0; max-width: none; }
    .panel { border-color: #999; box-shadow: none; break-inside: avoid; }
    body { background: #fff; font-size: 11pt; }
    a[href]::after { content: ""; }
}