/* ============================================================
   Jabocide Feed
   Death, Cancer, and Injury Headlines
   ============================================================ */

/* ============================================================
   NEWSROOM / TERMINAL STYLE
   Dense • Information-heavy • Professional

   v1.1 patch log:
     - global [hidden] display guard (fixes clear-search button)
     - search input 16px (prevents iOS Safari focus-zoom)
     - .result-status styles (live region from app.js)
     - light-theme contrast: --muted lifted to AA, story-time
       and category-count moved to tokens
     - dark --faint lifted to AA
     - hover states gated behind (hover: hover)
     - .search-icon made SVG-ready
     - .logo margin reset (h1-safe)
   ============================================================ */

:root {
    color-scheme: light dark;

    /* light theme */

    --bg: #f5f6f7;
    --surface: #ffffff;

    --text: #16191d;
    --text-secondary: #454b53;

    /* AA on both --bg (~4.8:1) and --surface (~5.2:1).
       Was #737a83, which failed for 9-10px text. */
    --muted: #666d76;
    --faint: #9ba1a8;

    --border: #dfe2e6;
    --border-light: #eaedef;

    --blue: #1769aa;
    --blue-dark: #0d4f83;
    --blue-light: #edf5fb;

    --green: #16834b;
    --red: #b42318;
    --red-light: #fdf1f0;

    --max-width: 1100px;

    --header-height: 52px;
}


/* ============================================================
   RESET
   ============================================================ */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    background: var(--bg);
    color: var(--text);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px;
    line-height: 1.45;

    font-feature-settings:
        "kern" 1;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


/* ============================================================
   HIDDEN STATE GUARD
   ============================================================ */

/*
   Author display rules (flex, grid, inline-flex) override the
   browser's default [hidden] { display: none }. This restores
   the expected behavior for EVERY hidden element — the
   clear-search button, end-of-archive, no-results, loading —
   no matter what display rule it carries.
*/

[hidden] {
    display: none !important;
}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

.visually-hidden {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);

    white-space: nowrap;

    border: 0;
}


.skip-link {
    position: fixed;

    top: 8px;
    left: 8px;

    z-index: 9999;

    padding:
        9px
        13px;

    background: var(--blue);
    color: #ffffff;

    border-radius: 3px;

    font-size: 12px;
    font-weight: 700;

    text-decoration: none;

    transform:
        translateY(-150%);

    transition:
        transform 0.15s ease;
}


.skip-link:focus {
    transform:
        translateY(0);
}


/* ============================================================
   FOCUS / INTERACTION
   ============================================================ */

a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline:
        2px solid var(--blue);

    outline-offset: 2px;
}


button {
    -webkit-tap-highlight-color: transparent;
}


::selection {
    color: #ffffff;
    background: var(--blue);
}


/* ============================================================
   HEADER
   ============================================================ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;

    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: var(--header-height);

    padding:
        0
        max(
            18px,
            calc((100vw - var(--max-width)) / 2)
        );

    background:
        rgba(255, 255, 255, 0.97);

    border-bottom:
        1px solid #cfd3d7;

    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.04);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}


/* ============================================================
   LOGO
   ============================================================ */

.logo {
    /* Resets h1 default margins if the logo becomes an <h1>. */
    margin: 0;

    display: inline-flex;
    align-items: center;

    min-width: 0;
    min-height: 44px;

    flex-shrink: 1;

    color: #111418;

    text-decoration: none;

    font-size: 17px;
    font-weight: 800;

    letter-spacing: 0.14em;
    text-transform: uppercase;
}


.logo::after {
    content: "";

    width: 5px;
    height: 5px;

    flex: 0 0 5px;

    margin-left: 7px;

    background: var(--blue);

    border-radius: 50%;
}


/* ============================================================
   STATUS
   ============================================================ */

.header-status {
    display: flex;
    align-items: center;

    flex: 0 0 auto;

    gap: 7px;

    color: var(--muted);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    white-space: nowrap;
}


.status-dot {
    width: 6px;
    height: 6px;

    flex: 0 0 6px;

    background: #8d949c;

    border-radius: 50%;
}


.status-dot.active {
    background: var(--green);

    box-shadow:
        0 0 0 2px rgba(22, 131, 75, 0.12);
}


.status-dot.stale {
    background: #c98516;

    box-shadow:
        0 0 0 2px rgba(201, 133, 22, 0.12);
}


.status-dot.offline {
    background: var(--red);

    box-shadow:
        0 0 0 2px rgba(180, 35, 24, 0.12);
}


/* ============================================================
   MAIN
   ============================================================ */

main {
    width: 100%;
    max-width: var(--max-width);

    margin: 0 auto;

    padding:
        0
        18px
        70px;
}


main:focus {
    outline: none;
}


/* ============================================================
   FEED CONTROLS
   ============================================================ */

.feed-controls {
    position: sticky;

    top: var(--header-height);

    z-index: 900;

    background:
        rgba(245, 246, 247, 0.98);

    border-bottom:
        1px solid var(--border);

    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.025);

    backdrop-filter:
        blur(6px);

    -webkit-backdrop-filter:
        blur(6px);
}


/* ============================================================
   RESULT STATUS
   ============================================================ */

/*
   Live region fed by app.js in filtered (search / category)
   views. display:none when empty, so browse mode has no gap.
*/

.result-status {
    padding:
        10px
        7px
        0;

    color: var(--muted);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}


.result-status:empty {
    display: none;
}


/* ============================================================
   SEARCH
   ============================================================ */

.search-wrapper {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 38px;

    padding:
        0
        7px;

    border-bottom:
        1px solid var(--border-light);
}


/*
   Sized as a flex-centered box for the inline SVG icon.
   stroke="currentColor" on the SVG picks up this color.
*/

.search-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 25px;

    flex: 0 0 25px;

    color: var(--muted);

    user-select: none;
}


.search-input {
    flex: 1;

    min-width: 0;
    height: 36px;

    padding:
        0
        7px;

    border: 0;
    outline: 0;

    background: transparent;

    color: var(--text);

    font-family: inherit;

    /*
       16px is the iOS Safari zoom threshold — anything smaller
       triggers focus-zoom on iPhone. Do not lower this.
    */
    font-size: 16px;
    font-weight: 600;
}


.search-input::placeholder {
    color: #9ba1a8;

    font-weight: 500;
}


.search-input:focus::placeholder {
    color: #b3b8bd;
}


.search-input::-webkit-search-cancel-button {
    display: none;
}


.clear-search {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    flex: 0 0 32px;

    padding: 0;

    border: 0;

    border-radius: 3px;

    background: transparent;

    color: #777f87;

    font-family:
        Arial,
        sans-serif;

    font-size: 18px;
    font-weight: 400;

    cursor: pointer;

    transition:
        color 0.12s ease,
        background-color 0.12s ease;
}


@media (hover: hover) {

    .clear-search:hover {
        color: var(--blue);

        background:
            rgba(23, 105, 170, 0.05);
    }

}


.clear-search:active {
    background:
        rgba(23, 105, 170, 0.09);
}


/* ============================================================
   CATEGORY FILTER
   ============================================================ */

.category-filter {
    display: flex;
    align-items: center;

    gap: 0;

    width: 100%;

    min-height: 35px;

    overflow-x: auto;

    padding:
        0
        4px;

    background: transparent;

    border: 0;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;

    overscroll-behavior-x: contain;
}


.category-filter::-webkit-scrollbar {
    display: none;
}


.category-button {
    position: relative;

    display: inline-flex;
    align-items: center;

    flex: 0 0 auto;

    gap: 5px;

    min-height: 35px;

    padding:
        0
        12px;

    border: 0;

    border-radius: 2px;

    background: transparent;

    color: #727980;

    font-family: inherit;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.07em;

    text-transform: uppercase;

    cursor: pointer;

    transition:
        color 0.12s ease,
        background-color 0.12s ease;
}


@media (hover: hover) {

    .category-button:hover {
        color: var(--blue);

        background:
            rgba(23, 105, 170, 0.04);
    }

}


.category-button:active {
    background:
        rgba(23, 105, 170, 0.08);
}


.category-button.active,
.category-button[aria-pressed="true"] {
    color: var(--blue);
}


.category-button.active::after,
.category-button[aria-pressed="true"]::after {
    content: "";

    position: absolute;

    left: 9px;
    right: 9px;
    bottom: 0;

    height: 2px;

    background: var(--blue);
}


/* Moved from #9ba1a8 (2.4:1) to the AA-passing muted token. */

.category-count {
    color: var(--muted);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 0;

    font-variant-numeric:
        tabular-nums;
}


.category-button.active .category-count {
    color: var(--blue);
}


/* ============================================================
   FEED
   ============================================================ */

.feed {
    width: 100%;

    min-height: 1px;
}


/* ============================================================
   DAY
   ============================================================ */

.day {
    padding-top: 27px;

    scroll-margin-top:
        calc(
            var(--header-height) + 90px
        );
}


.day:first-child {
    padding-top: 20px;
}


.day-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;

    min-height: 29px;

    margin-bottom: 0;

    padding:
        0
        7px
        7px;

    border-bottom:
        2px solid #252a30;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(0, 0, 0, 0.012)
        );
}


.day-title {
    margin: 0;

    color: #1b1f24;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.day-count {
    color: var(--muted);

    font-size: 10px;
    font-weight: 700;

    white-space: nowrap;

    font-variant-numeric:
        tabular-nums;
}


/* ============================================================
   STORIES
   ============================================================ */

.stories {
    width: 100%;
}


/* ============================================================
   STORY
   ============================================================ */

.story {
    display: grid;

    grid-template-columns:
        63px
        minmax(0, 1fr);

    column-gap: 15px;

    min-height: 64px;

    padding:
        10px
        8px;

    background: var(--surface);

    border-bottom:
        1px solid var(--border-light);

    transition:
        background-color 0.1s ease;
}


@media (hover: hover) {

    .story:hover {
        background: #f7fafc;
    }

}


/* :active stays ungated — tap feedback is wanted on touch. */

.story:active {
    background: #eef5fa;
}


.story:last-child {
    border-bottom-color:
        var(--border);
}


/* ============================================================
   STORY TIME
   ============================================================ */

/* Moved from #858c94 (3.4:1 on white) to the AA token. */

.story-time {
    display: block;

    padding-top: 2px;

    color: var(--muted);

    font-size: 10px;
    font-weight: 600;

    font-variant-numeric:
        tabular-nums;

    white-space: nowrap;
}


/* ============================================================
   STORY CONTENT
   ============================================================ */

.story-content {
    min-width: 0;
}


.story-title {
    display: block;

    margin:
        0
        0
        4px;

    color: #15191d;

    font-size: 14px;
    font-weight: 700;

    line-height: 1.3;

    letter-spacing: -0.005em;

    overflow-wrap: break-word;
}


.story-title a {
    color: inherit;

    text-decoration: none;

    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}


@media (hover: hover) {

    .story-title a:hover {
        color: var(--blue);
    }

}


.story-title a:focus-visible {
    color: var(--blue);
}


/* ============================================================
   STORY META
   ============================================================ */

.story-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 5px;

    min-height: 14px;

    color: var(--muted);

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 0.025em;
}


.story-category {
    color: var(--blue);

    font-weight: 700;

    text-transform: uppercase;
}


/* ============================================================
   NEW STORY INDICATOR
   ============================================================ */

.new-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-right: 7px;

    padding:
        2px
        5px;

    border:
        1px solid #a9c8df;

    border-radius: 2px;

    color: var(--blue-dark);

    background: var(--blue-light);

    font-family: inherit;

    font-size: 7px;
    font-weight: 900;

    line-height: 1;

    letter-spacing: 0.08em;

    vertical-align: middle;

    white-space: nowrap;

    user-select: none;
}


/* ============================================================
   LOAD ERROR
   ============================================================ */

.load-error {
    display: flex;
    flex-direction: column;

    align-items: flex-start;

    gap: 5px;

    margin-top: 10px;

    padding:
        12px
        14px;

    color: #8f3027;

    background: var(--red-light);

    border:
        1px solid #edcbc7;

    font-size: 10px;
}


.load-error strong {
    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.04em;

    text-transform: uppercase;
}


.load-error span {
    color: #9b625d;
}


.load-error button {
    min-height: 30px;

    margin-top: 3px;

    padding:
        0
        10px;

    border:
        1px solid #d9a9a4;

    border-radius: 2px;

    background: #ffffff;

    color: #8f3027;

    font-family: inherit;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.05em;

    text-transform: uppercase;

    cursor: pointer;

    transition:
        background-color 0.12s ease,
        border-color 0.12s ease;
}


@media (hover: hover) {

    .load-error button:hover {
        background: #fff8f7;

        border-color:
            #c98780;
    }

}


.load-error button:disabled {
    opacity: 0.6;

    cursor: wait;
}


/* ============================================================
   NO RESULTS
   ============================================================ */

.no-results {
    padding:
        55px
        10px;

    color: #8a9198;

    text-align: center;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.07em;

    text-transform: uppercase;
}


.no-results::before {
    content: "—";

    display: block;

    margin-bottom: 8px;

    color: #c1c6cb;
}


/* ============================================================
   LOADING
   ============================================================ */

.loading {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    min-height: 90px;

    color: var(--muted);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}


.loading::before {
    content: "";

    width: 11px;
    height: 11px;

    flex: 0 0 11px;

    border:
        2px solid #d7dce1;

    border-top-color:
        var(--blue);

    border-radius: 50%;

    animation:
        jabocide-spin 0.7s linear infinite;
}


.loading.hidden {
    display: none;
}


@keyframes jabocide-spin {

    to {
        transform: rotate(360deg);
    }

}


/* ============================================================
   LOAD MORE SENTINEL
   ============================================================ */

.load-more-sentinel {
    width: 100%;
    height: 1px;

    pointer-events: none;

    user-select: none;
}


/* ============================================================
   END OF ARCHIVE
   ============================================================ */

.end {
    position: relative;

    padding:
        42px
        0;

    color: #8a9198;

    text-align: center;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.end::before {
    content: "";

    display: block;

    width: 45px;
    height: 1px;

    margin:
        0
        auto
        14px;

    background: #c9ced3;
}


/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    max-width: var(--max-width);

    margin: 0 auto;

    padding:
        17px
        18px;

    color: var(--muted);

    border-top:
        1px solid #d5d9dd;

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 0.03em;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 700px) {

    .site-header {
        padding:
            0
            15px;
    }


    main {
        padding:
            0
            12px
            60px;
    }


    .day {
        padding-top: 24px;
    }


    .story {
        grid-template-columns:
            54px
            minmax(0, 1fr);

        column-gap: 12px;

        padding:
            10px
            6px;
    }


    .story-title {
        font-size: 14px;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 500px) {

    :root {
        --header-height: 48px;
    }


    .site-header {
        min-height: var(--header-height);

        padding:
            0
            12px;
    }


    .logo {
        min-height: 44px;

        height: 48px;

        font-size: 15px;
    }


    .logo::after {
        width: 4px;
        height: 4px;

        flex-basis: 4px;

        margin-left: 5px;
    }


    .header-status {
        gap: 6px;

        font-size: 8px;
    }


    .status-dot {
        width: 5px;
        height: 5px;

        flex-basis: 5px;
    }


    main {
        padding:
            0
            9px
            50px;
    }


    .feed-controls {
        top: var(--header-height);
    }


    .search-wrapper {
        min-height: 36px;
    }


    .search-input {
        height: 36px;

        /* iOS zoom threshold — see note in base rule. */
        font-size: 16px;
    }


    .category-filter {
        min-height: 36px;
    }


    .category-button {
        min-height: 36px;

        padding:
            0
            10px;

        font-size: 8px;
    }


    .category-button.active::after,
    .category-button[aria-pressed="true"]::after {
        left: 7px;
        right: 7px;
    }


    .category-count {
        font-size: 7px;
    }


    .day:first-child {
        padding-top: 16px;
    }


    .day-header {
        min-height: 27px;

        padding:
            0
            5px
            6px;
    }


    .day-title {
        font-size: 10px;
    }


    .day-count {
        font-size: 9px;
    }


    .story {
        grid-template-columns:
            43px
            minmax(0, 1fr);

        column-gap: 9px;

        min-height: 59px;

        padding:
            9px
            5px;
    }


    .story-time {
        padding-top: 1px;

        font-size: 9px;
    }


    .story-title {
        margin-bottom: 4px;

        font-size: 14px;

        line-height: 1.35;
    }


    .story-meta {
        font-size: 8px;
    }


    .new-indicator {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        margin-right: 5px;

        padding:
            2px
            4px;

        font-size: 6px;

        line-height: 1;

        letter-spacing: 0.06em;

        vertical-align: middle;

        white-space: nowrap;
    }


    .loading {
        min-height: 75px;

        font-size: 9px;
    }


    .end {
        padding:
            34px
            0;
    }


    .site-footer {
        padding:
            15px
            12px;

        font-size: 8px;
    }

}


/* ============================================================
   VERY SMALL SCREENS
   ============================================================ */

@media (max-width: 360px) {

    .logo {
        font-size: 13px;

        letter-spacing: 0.1em;
    }


    .header-status {
        gap: 5px;

        font-size: 7px;
    }


    .story {
        grid-template-columns:
            40px
            minmax(0, 1fr);

        column-gap: 8px;
    }


    .story-title {
        font-size: 13px;
    }


    .story-time {
        font-size: 8px;
    }


    .new-indicator {
        margin-right: 4px;

        padding:
            2px
            3px;

        font-size: 6px;
    }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

        scroll-behavior: auto !important;
    }

}


/* ============================================================
   DARK MODE
   ============================================================ */

@media (prefers-color-scheme: dark) {

    :root {
        --bg: #0d0f11;
        --surface: #15181c;

        --text: #f1f3f5;
        --text-secondary: #c1c7cd;
        --muted: #8e969e;

        /* Lifted from #626a72 (~3.2:1) to pass AA on dark
           surfaces where used at small sizes (category counts,
           input placeholders). */
        --faint: #7a828c;

        --border: #292e34;
        --border-light: #20252a;

        --blue: #55a8e8;
        --blue-dark: #8bc8f3;
        --blue-light: #152536;

        --green: #3ac77b;
        --red: #f06b61;
        --red-light: #291817;
    }


    body {
        background: var(--bg);
        color: var(--text);
    }


    /* --------------------------------------------------------
       HEADER
       -------------------------------------------------------- */

    .site-header {
        background:
            rgba(13, 15, 17, 0.96);

        border-bottom-color:
            var(--border);

        box-shadow:
            0 1px 3px rgba(0, 0, 0, 0.25);
    }


    .logo {
        color: #f4f5f6;
    }


    /* --------------------------------------------------------
       FEED CONTROLS
       -------------------------------------------------------- */

    .feed-controls {
        background:
            rgba(13, 15, 17, 0.96);

        border-bottom-color:
            var(--border);

        box-shadow:
            0 1px 2px rgba(0, 0, 0, 0.2);
    }


    .search-wrapper {
        border-bottom-color:
            var(--border-light);
    }


    .search-icon {
        color: var(--muted);
    }


    .search-input {
        color: var(--text);
    }


    .search-input::placeholder {
        color: var(--faint);
    }


    .search-input:focus::placeholder {
        color: #4f575f;
    }


    .clear-search {
        color: var(--muted);
    }


    @media (hover: hover) {

        .clear-search:hover {
            color: var(--blue);

            background:
                rgba(85, 168, 232, 0.08);
        }

    }


    .clear-search:active {
        background:
            rgba(85, 168, 232, 0.14);
    }


    /* --------------------------------------------------------
       CATEGORIES
       -------------------------------------------------------- */

    .category-button {
        color: var(--muted);
    }


    @media (hover: hover) {

        .category-button:hover {
            color: var(--blue);

            background:
                rgba(85, 168, 232, 0.07);
        }

    }


    .category-button:active {
        background:
            rgba(85, 168, 232, 0.12);
    }


    .category-button.active,
    .category-button[aria-pressed="true"] {
        color: var(--blue);
    }


    .category-button.active::after,
    .category-button[aria-pressed="true"]::after {
        background: var(--blue);
    }


    .category-count {
        color: var(--faint);
    }


    .category-button.active .category-count,
    .category-button[aria-pressed="true"] .category-count {
        color: var(--blue);
    }


    /* --------------------------------------------------------
       DAY HEADERS
       -------------------------------------------------------- */

    .day-header {
        border-bottom-color:
            #c8cdd2;

        background:
            linear-gradient(
                to bottom,
                transparent,
                rgba(255, 255, 255, 0.015)
            );
    }


    .day-title {
        color: #e5e8eb;
    }


    .day-count {
        color: var(--muted);
    }


    /* --------------------------------------------------------
       STORIES
       -------------------------------------------------------- */

    .story {
        background: var(--surface);

        border-bottom-color:
            var(--border-light);
    }


    @media (hover: hover) {

        .story:hover {
            background: #191d22;
        }

    }


    .story:active {
        background: #1d2329;
    }


    .story:last-child {
        border-bottom-color:
            var(--border);
    }


    .story-time {
        color: var(--muted);
    }


    .story-title {
        color: #f1f3f5;
    }


    .story-title a:focus-visible {
        color: var(--blue);
    }


    @media (hover: hover) {

        .story-title a:hover {
            color: var(--blue);
        }

    }


    .story-meta {
        color: var(--muted);
    }


    .story-category {
        color: var(--blue);
    }


    /* --------------------------------------------------------
       NEW INDICATOR
       -------------------------------------------------------- */

    .new-indicator {
        border-color:
            #285477;

        color:
            var(--blue-dark);

        background:
            var(--blue-light);
    }


    /* --------------------------------------------------------
       LOADING
       -------------------------------------------------------- */

    .loading {
        color: var(--muted);
    }


    .loading::before {
        border-color:
            #30363d;

        border-top-color:
            var(--blue);
    }


    /* --------------------------------------------------------
       NO RESULTS
       -------------------------------------------------------- */

    .no-results {
        color: var(--muted);
    }


    .no-results::before {
        color: #4b535b;
    }


    /* --------------------------------------------------------
       END OF ARCHIVE
       -------------------------------------------------------- */

    .end {
        color: var(--muted);
    }


    .end::before {
        background:
            #3a4148;
    }


    /* --------------------------------------------------------
       LOAD ERROR
       -------------------------------------------------------- */

    .load-error {
        color: #f08b82;

        background:
            var(--red-light);

        border-color:
            #59312d;
    }


    .load-error span {
        color: #b77a74;
    }


    .load-error button {
        border-color:
            #70413c;

        background:
            #181311;

        color:
            #f08b82;
    }


    @media (hover: hover) {

        .load-error button:hover {
            background:
                #211816;

            border-color:
                #8a514a;
        }

    }


    /* --------------------------------------------------------
       FOOTER
       -------------------------------------------------------- */

    .site-footer {
        color: var(--muted);

        border-top-color:
            var(--border);
    }

}


/* ============================================================
   SEARCH META (fallback)
   ============================================================ */

/*
   Only used when #resultStatus is absent from the HTML.
   app.js prefers the live region; this is the safety net.
*/

.search-meta {
    padding:
        10px
        7px
        0;

    color: var(--muted);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}



/* ============================================================
   STATS VIEW  (v1.3)
   ============================================================ */

/* ============================================================
   STATS TOGGLE — header nav item, left-aligned beside the logo
   ============================================================ */

.stats-toggle {
    display: inline-flex;
    align-items: center;

    flex: 0 0 auto;

    /* Absorbs all free space to its right: Stats hugs the logo,
       Live is pinned to the far right. No centering, ever. */
    margin-right: auto;

    /* Full-height tap target, in the header's rhythm. */
    min-height: var(--header-height);

    padding:
        0
        22px;

    border: 0;

    background: transparent;

    color: var(--muted);

    font-family: inherit;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    cursor: pointer;

    transition:
        color 0.12s ease;
}


.stats-toggle.active,
.stats-toggle[aria-pressed="true"] {
    color: var(--blue);
}


@media (hover: hover) {

    .stats-toggle:hover {
        color: var(--blue);
    }

}


@media (max-width: 500px) {

    .stats-toggle {
        padding:
            0
            16px;

        font-size: 9px;
    }

}


.stats {
    padding-top: 20px;
}


.stats-head {
    padding:
        0
        7px
        12px;

    border-bottom:
        2px solid #252a30;
}


.stats-title {
    margin: 0;

    color: #1b1f24;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.stats-sub {
    margin: 3px 0 0;

    color: var(--muted);

    font-size: 10px;
    font-weight: 700;

    font-variant-numeric:
        tabular-nums;
}


.stats-note {
    padding:
        40px
        7px;

    color: var(--muted);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}


.stats-section {
    margin-top: 24px;
}


.stats-section-title {
    margin: 0 0 6px;

    padding:
        0
        7px
        7px;

    border-bottom:
        2px solid #252a30;

    color: #1b1f24;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.stats-item {
    padding:
        7px
        7px
        0;
}


.stats-item-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;

    gap: 10px;
}


.stats-label {
    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;

    color: var(--text-secondary);

    font-size: 11px;
    font-weight: 600;
}


.stats-value {
    color: var(--muted);

    font-size: 10px;
    font-weight: 700;

    font-variant-numeric:
        tabular-nums;
}


.stats-track {search-
    height: 4px;

    margin-top: 5px;

    background: var(--border-light);

    border-radius: 2px;

    overflow: hidden;
}


.stats-fill {
    height: 100%;

    background: var(--blue);

    border-radius: 2px;
}


/* Dark mode: invert the section rules, same as .day-header. */

@media (prefers-color-scheme: dark) {

    .stats-head,
    .stats-section-title {
        border-bottom-color:
            #c8cdd2;
    }


    .stats-title,
    .stats-section-title {
        color: #e5e8eb;
    }

}

#searchInput:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: -3px;
}


/* ============================================================
   Time period bar — layout via .period-row, which the JS builds
   around the search cluster + bar. No page markup changes.
   ============================================================ */

:root {
    --accent: #2563eb;
    --accent-contrast: #ffffff;
}

/* Flex row the JS creates around search + period bar */
.period-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
}
.period-search {              /* JS marks the search element */
    flex: 1 1 14rem;
    min-width: 0;
}

#periodFilter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    margin-left: auto;        /* right-aligned — meaningful now */
}

/* Desktop: pill buttons */
.period-button {
    appearance: none;
    -webkit-appearance: none;
    padding: .32rem .85rem;
    border: 1px solid rgba(128, 128, 128, .4);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: .85rem;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.period-button:hover {
    background: rgba(128, 128, 128, .12);
    border-color: rgba(128, 128, 128, .65);
}
.period-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}
.period-button.active {
    background: var(--accent, #2563eb);
    border-color: var(--accent, #2563eb);
    color: var(--accent-contrast, #ffffff);
    font-weight: 600;
}

/* Mobile: dropdown on the SAME line as the search */
#periodSelect { display: none; }
@media (max-width: 640px) {
    .period-button { display: none; }

    .period-search {
        flex: 1 1 0;          /* shrinks so the dropdown fits */
        min-width: 0;
    }
    #periodFilter {
        flex: 0 0 auto;
        flex-wrap: nowrap;
    }
    #periodSelect {
        display: block;
        width: auto;
        max-width: 150px;
        padding: .4rem .5rem;
        border: 1px solid rgba(128, 128, 128, .4);
        border-radius: 8px;
        background: transparent;
        color: inherit;
        font: inherit;
        font-size: .9rem;
    }
}

/* "Continue into <wider period>" button at a scope edge */
.period-extend {
    appearance: none;
    padding: .45rem 1rem;
    border: 1px solid rgba(128, 128, 128, .4);
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.period-extend:hover { background: rgba(128, 128, 128, .12); }