/* ==========================================================================
   Section8Housing.us — public design system
   Phase 1A. Replaces bootstrap.css, bootstrap-responsive.css, msg.css,
   custom.css and two jQuery-UI stylesheets on public pages (~196 KB, six
   requests) with this one file.

   The audience is people looking for housing assistance, often on an
   inexpensive phone, often under stress. That shapes every choice here:
   generous tap targets, real text instead of icons, no motion that isn't
   asked for, and nothing that resembles an application button unless it
   genuinely is one.

   Section 1 is the token layer. Everything below it should reference tokens
   rather than raw values.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
    /* --- Brand -----------------------------------------------------------
       Teal is inherited from the existing site so the redesign reads as the
       same organisation. It is deliberately not blue: US government sites use
       blue, and this site must not be mistaken for one. */
    --s8-brand:            #14625e;
    --s8-brand-dark:       #0e4a47;
    --s8-brand-light:      #e6f0ef;
    --s8-accent:           #7a4b00;   /* used only where teal would read as a link */

    /* --- Text ------------------------------------------------------------
       No token below 4.5:1 on its intended surface. There is deliberately no
       "muted grey" light enough to fail; --s8-text-soft is the lightest text
       permitted and measures 7.0:1 on white. */
    --s8-text:             #1a1c1e;
    --s8-text-soft:        #4a4f54;
    --s8-text-invert:      #ffffff;
    --s8-link:             #0b5c74;
    --s8-link-hover:       #073d4e;

    /* --- Surfaces --------------------------------------------------------- */
    --s8-bg:               #f6f7f8;
    --s8-surface:          #ffffff;
    --s8-surface-sunken:   #eef0f2;

    /* --- Borders ---------------------------------------------------------- */
    --s8-border:           #d3d8dd;
    --s8-border-strong:    #9aa3ab;

    /* --- Status ----------------------------------------------------------- */
    --s8-info-bg:          #e8f1f7;   --s8-info-border:    #2b6c8f;
    --s8-success-bg:       #e7f3ec;   --s8-success-border: #1c6b3c;
    --s8-warning-bg:       #fdf4e3;   --s8-warning-border: #8a5a00;
    --s8-error-bg:         #fdecec;   --s8-error-border:   #9b1c1c;

    /* --- Program classification ------------------------------------------
       Colour is only ever a reinforcement here. Every program badge states
       its meaning in words, because the difference between "administers
       vouchers" and "does not" decides whether an application is wasted, and
       that must survive greyscale, colour blindness and a cheap screen. */
    --s8-prog-hcv-bg:      #e7f3ec;   --s8-prog-hcv-border:   #1c6b3c;
    --s8-prog-both-bg:     #e8f1f7;   --s8-prog-both-border:  #2b6c8f;
    --s8-prog-ph-bg:       #fdf4e3;   --s8-prog-ph-border:    #8a5a00;
    --s8-prog-unk-bg:      #eef0f2;   --s8-prog-unk-border:   #5a6068;

    /* --- Typography -------------------------------------------------------
       System stack only. No webfont: a font file is 40-80 KB of render-
       blocking weight on a slow connection, to change the shape of letters
       that are already legible. */
    --s8-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;

    --s8-size-xs:   0.8125rem;  /* 13px — smallest permitted, used sparingly */
    --s8-size-sm:   0.875rem;   /* 14px */
    --s8-size-base: 1rem;       /* 16px — never smaller for body copy */
    --s8-size-lg:   1.125rem;
    --s8-size-xl:   1.375rem;
    --s8-size-2xl:  1.75rem;
    --s8-size-3xl:  2.125rem;

    --s8-leading-tight: 1.25;
    --s8-leading:       1.6;
    --s8-leading-loose: 1.75;

    --s8-weight-normal: 400;
    --s8-weight-medium: 600;
    --s8-weight-bold:   700;

    /* --- Spacing: a 4px scale --------------------------------------------- */
    --s8-space-1: 0.25rem;   --s8-space-2: 0.5rem;    --s8-space-3: 0.75rem;
    --s8-space-4: 1rem;      --s8-space-5: 1.5rem;    --s8-space-6: 2rem;
    --s8-space-7: 3rem;      --s8-space-8: 4rem;

    /* --- Layout ------------------------------------------------------------ */
    --s8-container:      72rem;
    --s8-container-text: 42rem;   /* ~70 characters, for article prose */
    --s8-gutter:         var(--s8-space-4);

    /* --- Borders and radii -------------------------------------------------- */
    --s8-radius:    6px;
    --s8-radius-sm: 4px;
    --s8-border-w:  1px;

    /* --- Elevation ----------------------------------------------------------
       One shadow, used only for genuinely floating things (the mobile menu and
       the consent dialog). Cards do not float. */
    --s8-shadow: 0 4px 16px rgba(16, 24, 32, 0.14);

    /* --- Focus ---------------------------------------------------------------
       A single visible ring, never removed. */
    --s8-focus:        #0b5c74;
    --s8-focus-offset: 2px;
    --s8-focus-width:  3px;

    /* --- Tap targets ---------------------------------------------------------
       WCAG 2.2 AA asks 24px; 44px is used for anything a thumb aims at. */
    --s8-tap-min: 44px;

    /* --- Layering -------------------------------------------------------------
       Every z-index in this file is one of these four. No ad-hoc values. */
    --s8-z-base:    1;
    --s8-z-sticky:  100;   /* site header */
    --s8-z-menu:    200;   /* mobile navigation panel */
    --s8-z-dialog:  300;   /* consent dialog */

    /* --- Motion ------------------------------------------------------------- */
    --s8-motion: 150ms ease;
}

/* Breakpoints are 40em (640px), 48em (768px), 64em (1024px). CSS custom
   properties cannot be used in media queries, so those numbers appear
   literally below and nowhere else. */

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

/* ==========================================================================
   2. RESET AND BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
    /* Never let a single wide child give the whole document a horizontal
       scrollbar. The old footer did exactly that with margin:-20px, on every
       page at every width above 768px. */
    max-width: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    max-width: 100%;
    overflow-x: hidden;      /* belt and braces; nothing should need it */
    background: var(--s8-bg);
    color: var(--s8-text);
    font-family: var(--s8-font);
    font-size: var(--s8-size-base);
    line-height: var(--s8-leading);
    -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
    margin: 0 0 var(--s8-space-3);
    line-height: var(--s8-leading-tight);
    font-weight: var(--s8-weight-bold);
    /* Long county and agency names must wrap, never overflow. */
    overflow-wrap: break-word;
}

h1 { font-size: var(--s8-size-2xl); }
h2 { font-size: var(--s8-size-xl); }
h3 { font-size: var(--s8-size-lg); }
h4 { font-size: var(--s8-size-base); }

@media (min-width: 48em) {
    h1 { font-size: var(--s8-size-3xl); }
}

p, ul, ol { margin: 0 0 var(--s8-space-4); }
ul, ol { padding-left: var(--s8-space-5); }
li { margin-bottom: var(--s8-space-2); }

a { color: var(--s8-link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--s8-link-hover); }

:focus-visible {
    outline: var(--s8-focus-width) solid var(--s8-focus);
    outline-offset: var(--s8-focus-offset);
    border-radius: var(--s8-radius-sm);
}

hr { border: 0; border-top: var(--s8-border-w) solid var(--s8-border); margin: var(--s8-space-6) 0; }

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */

.s8-container {
    width: 100%;
    max-width: var(--s8-container);
    margin-inline: auto;
    padding-inline: var(--s8-gutter);
}

@media (min-width: 48em) {
    :root { --s8-gutter: var(--s8-space-6); }
}

.s8-main { padding-block: var(--s8-space-5) var(--s8-space-7); }

.s8-prose { max-width: min(var(--s8-container-text), 100%); }
.s8-prose p, .s8-prose li { line-height: var(--s8-leading-loose); }

/* Content column beside an ad rail. Single column until there is genuinely
   room for both; the directory is the page, the rail is not. */
.s8-with-rail { display: grid; gap: var(--s8-space-6); }

/* Grid and flex items default to `min-width: auto`, which means a single wide
   descendant sizes the whole track. A 728x90 ad unit inside the prose column
   did exactly that and pushed the homepage 9px past a 390px viewport, even
   though the ad's own container already scrolled. `min-width: 0` lets the
   track shrink and leaves the overflow where it belongs: inside the ad slot. */
.s8-with-rail > * { min-width: 0; max-width: 100%; }

@media (min-width: 64em) {
    .s8-with-rail { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
}

.s8-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: var(--s8-z-dialog);
    padding: var(--s8-space-3) var(--s8-space-4);
    background: var(--s8-surface);
    color: var(--s8-link);
    font-weight: var(--s8-weight-medium);
}
.s8-skip-link:focus { left: var(--s8-space-3); top: var(--s8-space-3); }

/* ==========================================================================
   4. HEADER AND NAVIGATION
   ========================================================================== */

.s8-header {
    background: var(--s8-brand);
    color: var(--s8-text-invert);
    /* Not fixed. A fixed bar costs ~56px of a 320px-wide phone's screen on
       every scroll, and this site's pages are read, not navigated. */
    position: relative;
    z-index: var(--s8-z-sticky);
}

.s8-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s8-space-3);
    min-height: 56px;
    padding-block: var(--s8-space-2);
}

.s8-brandmark {
    color: var(--s8-text-invert);
    text-decoration: none;
    font-weight: var(--s8-weight-bold);
    font-size: var(--s8-size-lg);
    padding-block: var(--s8-space-2);
}
.s8-brandmark:hover { color: var(--s8-text-invert); text-decoration: underline; }
.s8-header :focus-visible { outline-color: #ffffff; }

.s8-navtoggle {
    display: inline-flex;
    align-items: center;
    gap: var(--s8-space-2);
    min-height: var(--s8-tap-min);
    padding: var(--s8-space-2) var(--s8-space-3);
    background: transparent;
    color: var(--s8-text-invert);
    border: var(--s8-border-w) solid rgba(255, 255, 255, 0.6);
    border-radius: var(--s8-radius-sm);
    font: inherit;
    font-weight: var(--s8-weight-medium);
    cursor: pointer;
}

@media (min-width: 48em) { .s8-navtoggle { display: none; } }

.s8-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--s8-space-1);
}

.s8-nav__link {
    display: block;
    padding: var(--s8-space-3);
    min-height: var(--s8-tap-min);
    color: var(--s8-text-invert);
    text-decoration: none;
    border-radius: var(--s8-radius-sm);
}
.s8-nav__link:hover { color: var(--s8-text-invert); background: rgba(255, 255, 255, 0.12); text-decoration: underline; }

/* Current page: an underline plus aria-current, never colour alone. */
.s8-nav__link[aria-current="page"] {
    background: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 -3px 0 #ffffff;
}

/* Mobile: the panel is in normal flow below the bar, so it pushes content
   down rather than covering it. Nothing is trapped underneath. */
@media (max-width: 47.99em) {
    .s8-nav {
        display: none;
        padding-bottom: var(--s8-space-3);
    }
    .s8-nav[data-open="true"] { display: block; }
    .s8-nav__list { flex-direction: column; gap: 0; }
    .s8-nav__link {
        border-top: var(--s8-border-w) solid rgba(255, 255, 255, 0.18);
        border-radius: 0;
        display: flex;
        align-items: center;
    }
}

/* ==========================================================================
   5. BREADCRUMBS
   ========================================================================== */

.s8-breadcrumb { margin-bottom: var(--s8-space-4); font-size: var(--s8-size-sm); }
.s8-breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;              /* long county names wrap instead of clipping */
    gap: var(--s8-space-1) var(--s8-space-2);
}
.s8-breadcrumb li { margin: 0; display: flex; align-items: center; gap: var(--s8-space-2); }
.s8-breadcrumb li + li::before { content: "›"; color: var(--s8-text-soft); }
.s8-breadcrumb [aria-current="page"] { color: var(--s8-text-soft); }

/* ==========================================================================
   6. PAGE HEADER AND CALLOUTS
   ========================================================================== */

.s8-pagehead { margin-bottom: var(--s8-space-5); }
.s8-pagehead__lede { font-size: var(--s8-size-lg); color: var(--s8-text); margin-bottom: 0; max-width: var(--s8-container-text); }

.s8-note {
    border-left: 4px solid var(--s8-info-border);
    background: var(--s8-info-bg);
    padding: var(--s8-space-3) var(--s8-space-4);
    border-radius: var(--s8-radius-sm);
    margin-bottom: var(--s8-space-5);
}
.s8-note > :last-child { margin-bottom: 0; }
.s8-note--warning { border-left-color: var(--s8-warning-border); background: var(--s8-warning-bg); }
.s8-note--success { border-left-color: var(--s8-success-border); background: var(--s8-success-bg); }
.s8-note--error   { border-left-color: var(--s8-error-border);   background: var(--s8-error-bg); }

.s8-meta { font-size: var(--s8-size-sm); color: var(--s8-text-soft); }

/* ==========================================================================
   7. AGENCY COMPONENT
   The directory's core. Replaces a three-column table that squeezed a name,
   a full address and a phone number into 33% each at 320px.
   ========================================================================== */

.s8-agencies { display: grid; gap: var(--s8-space-4); margin-bottom: var(--s8-space-6); }

.s8-agency {
    background: var(--s8-surface);
    border: var(--s8-border-w) solid var(--s8-border);
    border-radius: var(--s8-radius);
    padding: var(--s8-space-4);
}

.s8-agency__name {
    margin: 0 0 var(--s8-space-2);
    font-size: var(--s8-size-lg);
    overflow-wrap: break-word;   /* "Housing Authority of the City of ..." */
}

/* Contact details as a description list: a screen reader announces the pair,
   and the label survives when the value wraps to its own line. */
.s8-agency__details { margin: var(--s8-space-3) 0 0; display: grid; gap: var(--s8-space-2); }

@media (min-width: 40em) {
    .s8-agency__details { grid-template-columns: max-content minmax(0, 1fr); gap: var(--s8-space-2) var(--s8-space-4); }
}

.s8-agency__label { font-weight: var(--s8-weight-medium); color: var(--s8-text-soft); font-size: var(--s8-size-sm); }
.s8-agency__value { margin: 0; overflow-wrap: break-word; }

/* Phone stays a real link so it dials on a phone and copies on a desktop. */
.s8-agency__phone {
    font-variant-numeric: tabular-nums;
    display: inline-block;
    min-height: var(--s8-tap-min);
    line-height: var(--s8-tap-min);
}

.s8-agency__guidance {
    margin: var(--s8-space-3) 0 0;
    padding-top: var(--s8-space-3);
    border-top: var(--s8-border-w) solid var(--s8-border);
    font-size: var(--s8-size-sm);
    color: var(--s8-text);
}

/* --- Program badge -------------------------------------------------------
   Text first. The border and tint repeat what the words already say. */
.s8-program {
    display: inline-block;
    padding: var(--s8-space-1) var(--s8-space-3);
    border: var(--s8-border-w) solid var(--s8-prog-unk-border);
    border-left-width: 4px;
    border-radius: var(--s8-radius-sm);
    background: var(--s8-prog-unk-bg);
    color: var(--s8-text);
    font-size: var(--s8-size-sm);
    font-weight: var(--s8-weight-medium);
    line-height: 1.4;
    max-width: 100%;
    overflow-wrap: break-word;    /* never truncate a classification */
}
.s8-program--hcv_confirmed      { border-color: var(--s8-prog-hcv-border);  background: var(--s8-prog-hcv-bg); }
.s8-program--combined           { border-color: var(--s8-prog-both-border); background: var(--s8-prog-both-bg); }
.s8-program--public_housing_only{ border-color: var(--s8-prog-ph-border);   background: var(--s8-prog-ph-bg); }
.s8-program--unconfirmed        { border-color: var(--s8-prog-unk-border);  background: var(--s8-prog-unk-bg); }

/* ==========================================================================
   8. GEOGRAPHY LISTS
   ========================================================================== */

/* auto-fill rather than fixed breakpoints: the homepage lists 54 states and the
   larger states list dozens of counties, and a single column at 390px is a very
   long scroll before anything else on the page. This gives one column at 320px,
   two by ~390px, and more as space allows, without guessing at device widths. */
.s8-geolist {
    list-style: none;
    margin: 0 0 var(--s8-space-6);
    padding: 0;
    display: grid;
    gap: var(--s8-space-1);
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}

.s8-geolist li { margin: 0; }
.s8-geolist a {
    display: flex;
    align-items: center;
    min-height: var(--s8-tap-min);
    padding: var(--s8-space-2) var(--s8-space-3);
    border-radius: var(--s8-radius-sm);
    overflow-wrap: break-word;
}
.s8-geolist a:hover { background: var(--s8-surface-sunken); }

/* ==========================================================================
   9. CARDS, BUTTONS, FORMS
   ========================================================================== */

.s8-card {
    background: var(--s8-surface);
    border: var(--s8-border-w) solid var(--s8-border);
    border-radius: var(--s8-radius);
    padding: var(--s8-space-5);
}
.s8-card > :last-child { margin-bottom: 0; }


.s8-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--s8-tap-min);
    padding: var(--s8-space-3) var(--s8-space-5);
    border: var(--s8-border-w) solid var(--s8-brand);
    border-radius: var(--s8-radius-sm);
    background: var(--s8-brand);
    color: var(--s8-text-invert);
    font: inherit;
    font-weight: var(--s8-weight-medium);
    text-decoration: none;
    cursor: pointer;
}
.s8-btn:hover { background: var(--s8-brand-dark); border-color: var(--s8-brand-dark); color: var(--s8-text-invert); }
.s8-btn--secondary { background: var(--s8-surface); color: var(--s8-link); border-color: var(--s8-border-strong); }
.s8-btn--secondary:hover { background: var(--s8-surface-sunken); color: var(--s8-link-hover); }

.s8-field { margin-bottom: var(--s8-space-4); }
.s8-label { display: block; margin-bottom: var(--s8-space-2); font-weight: var(--s8-weight-medium); }
.s8-input, .s8-textarea {
    width: 100%;
    min-height: var(--s8-tap-min);
    padding: var(--s8-space-3);
    border: var(--s8-border-w) solid var(--s8-border-strong);
    border-radius: var(--s8-radius-sm);
    background: var(--s8-surface);
    color: var(--s8-text);
    font: inherit;
    font-size: var(--s8-size-base);   /* 16px stops iOS zooming on focus */
}
.s8-textarea { min-height: 10rem; resize: vertical; }
.s8-input[aria-invalid="true"], .s8-textarea[aria-invalid="true"] { border-color: var(--s8-error-border); border-width: 2px; }
.s8-error { margin-top: var(--s8-space-2); color: #8a1919; font-size: var(--s8-size-sm); font-weight: var(--s8-weight-medium); }

/* ==========================================================================
   10. ADVERTISING
   Deliberately labelled, visually separated, and never styled like a control.
   ========================================================================== */

.s8-ads { display: block; }
.s8-ads__label {
    display: block;
    margin-bottom: var(--s8-space-2);
    font-size: var(--s8-size-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--s8-text-soft);
}
.s8-ads__slot {
    border: var(--s8-border-w) dashed var(--s8-border-strong);
    border-radius: var(--s8-radius-sm);
    padding: var(--s8-space-2);
    background: var(--s8-surface-sunken);
    margin-bottom: var(--s8-space-4);
    overflow: hidden;
    /* Reserve the unit's height so the page does not jump when the ad
       arrives. Layout shift on a directory reads as a bait-and-switch. */
    min-height: 266px;
}

@media (max-width: 63.99em) {
    /* Below the two-column breakpoint the rail follows the directory, so an
       ad can never be the first thing between a visitor and an agency. */
    .s8-with-rail > .s8-ads { order: 2; }
}

/* ==========================================================================
   11. FOOTER
   ========================================================================== */

.s8-footer {
    /* The predecessor used `margin: -20px` to reach the viewport edge, which
       made every page 40px wider than the viewport and produced a horizontal
       scrollbar at every width from 768px up. Full-bleed comes from the
       element being a block in normal flow; the inner container handles the
       gutters. */
    margin: 0;
    background: var(--s8-brand);
    color: var(--s8-text-invert);
    padding-block: var(--s8-space-6);
}

.s8-footer a { color: #d6ecea; }
.s8-footer a:hover { color: var(--s8-text-invert); }
.s8-footer :focus-visible { outline-color: #ffffff; }

.s8-footer__disclosure {
    max-width: var(--s8-container-text);
    margin: 0 auto var(--s8-space-4);
    text-align: center;
}

.s8-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s8-space-2) var(--s8-space-4);
    font-size: var(--s8-size-sm);
}
.s8-footer__links li { margin: 0; }
.s8-footer__links a { display: inline-flex; align-items: center; min-height: var(--s8-tap-min); }

/* ==========================================================================
   12. UTILITIES
   ========================================================================== */

.s8-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.s8-mb-0 { margin-bottom: 0; }
.s8-mt-6 { margin-top: var(--s8-space-6); }

/* ==========================================================================
   13. ARTICLE, PAGINATION AND RESOURCE-LIST STYLES

   Phase 1B. The Bootstrap 2 compatibility shim that used to occupy this
   section is gone: all eleven templates that depended on it were migrated to
   the design system, so `container-fluid`, `row-fluid`, `span*`, `btn`,
   `control-group`, `controls`, `textfield`, `muted`, `clearfix`,
   `resource_item`, `thumbnail` and `clear` have no remaining public consumer.

   What follows is not the shim renamed. These are the few genuinely new
   patterns the migrated pages need — long-form article bodies and pagination —
   expressed in tokens.
   ========================================================================== */

/* Article bodies are stored HTML written years ago: arbitrary headings, lists,
   tables and images. These rules make that content readable without editing it. */
.s8-article > * { max-width: 100%; }
.s8-article h2 { margin-top: var(--s8-space-6); }
.s8-article h3 { margin-top: var(--s8-space-5); }
.s8-article img { height: auto; border-radius: var(--s8-radius-sm); }
.s8-article__image { float: none; display: block; margin-bottom: var(--s8-space-4); }

@media (min-width: 40em) {
    /* Float only where there is room for text beside it; at 320px a floated
       image leaves a column two words wide. */
    .s8-article__image { float: left; margin: 0 var(--s8-space-5) var(--s8-space-4) 0; max-width: 45%; }
}

/* Stored article HTML can contain wide tables. They scroll inside their own
   box rather than widening the page. */
.s8-article table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.s8-article td, .s8-article th {
    padding: var(--s8-space-3);
    border-bottom: var(--s8-border-w) solid var(--s8-border);
    text-align: left;
}

.s8-resource-link { font-weight: var(--s8-weight-medium); font-size: var(--s8-size-lg); }

.s8-pagination { margin-top: var(--s8-space-6); }
.s8-pagination ul, .s8-pagination .pagination {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: var(--s8-space-2);
}
.s8-pagination li { margin: 0; }
.s8-pagination a, .s8-pagination span {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--s8-tap-min); min-width: var(--s8-tap-min);
    padding: var(--s8-space-2) var(--s8-space-3);
    border: var(--s8-border-w) solid var(--s8-border-strong);
    border-radius: var(--s8-radius-sm);
    background: var(--s8-surface);
    text-decoration: none;
}
.s8-pagination .is-disabled {
    color: var(--s8-text-muted);
    background: var(--s8-surface-sunken);
    border-color: var(--s8-border);
}

.s8-pagination [aria-current="page"] {
    background: var(--s8-brand); color: var(--s8-text-invert); border-color: var(--s8-brand);
}

/* Banner ad slot: 728x90 units must never force the page wider than a phone. */
.s8-ads__slot--banner { min-height: 106px; max-width: 100%; overflow-x: auto; }
.s8-ads--banner { margin-block: var(--s8-space-6); }