/* ==========================================================================
   archive.css — shared chrome for the archive pages.

   The archive is a grab bag: a 1999 weblog pastiche, a System 7 desktop, two
   trail checklists, half a dozen games. Each page keeps its own look. This
   sheet only supplies the parts they should share — the back bar, focus
   rings, touch targets, motion preferences — so every token is namespaced
   --ar-* and every rule is scoped to an .ar-* class. Nothing here can reach
   into a page's own styles.
   ========================================================================== */

:root {
    --ar-bar-bg: #f5f5f5;
    --ar-bar-fg: #666666;
    --ar-bar-fg-strong: #111111;
    --ar-bar-border: #e0e0e0;
    --ar-accent: #ff3300;
    --ar-focus: #ff3300;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ar-bar-bg: #17171b;
        --ar-bar-fg: #9a9aa2;
        --ar-bar-fg-strong: #ededed;
        --ar-bar-border: #2b2b33;
        --ar-accent: #ff5c33;
        --ar-focus: #ff7a5c;
    }
}

:root[data-theme="dark"] {
    --ar-bar-bg: #17171b;
    --ar-bar-fg: #9a9aa2;
    --ar-bar-fg-strong: #ededed;
    --ar-bar-border: #2b2b33;
    --ar-accent: #ff5c33;
    --ar-focus: #ff7a5c;
}

/* --------------------------------------------------------------------------
   Back bar. Sits at the top of every archive page, above whatever the page
   itself draws, so there is always a way home. Pages that centre their body
   with flex get `position: sticky` rather than a static block, which would
   otherwise be swallowed by the centring.
   -------------------------------------------------------------------------- */

.ar-bar {
    position: sticky;
    top: 0;
    z-index: 9999;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 10px 20px;
    background-color: var(--ar-bar-bg);
    border-bottom: 1px solid var(--ar-bar-border);
    font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 1px;
    text-transform: uppercase;
    -webkit-font-smoothing: antialiased;
}

.ar-bar a,
.ar-bar button {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 0;
    color: var(--ar-bar-fg);
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-decoration: none;
    background: none;
    border: 0;
    cursor: pointer;
}

.ar-bar a:hover,
.ar-bar button:hover {
    color: var(--ar-accent);
}

.ar-bar .ar-here {
    color: var(--ar-bar-fg-strong);
    font-weight: 400;
    letter-spacing: 0.5px;
    text-transform: none;
}

.ar-bar .ar-spacer {
    margin-left: auto;
}

/* On a narrow phone all three items will not sit on one line, and the bar
   wrapping to two rows costs more vertical space than the page label is
   worth. The two links are what matter; the label goes. */
@media (max-width: 480px) {
    .ar-bar .ar-here {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Focus. Several of these pages drive their whole interface from divs with
   click handlers; anything focusable gets a visible ring so the keyboard
   path is real rather than theoretical.
   -------------------------------------------------------------------------- */

.ar-bar a:focus-visible,
.ar-bar button:focus-visible,
[data-ar-focus] :focus-visible {
    outline: 2px solid var(--ar-focus);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Touch. Coarse pointers get 44px minimum hit areas on anything marked as a
   control, which is the smallest target that reliably works with a thumb.
   -------------------------------------------------------------------------- */

@media (pointer: coarse) {

    .ar-touch button,
    .ar-touch [role="button"],
    .ar-touch input[type="checkbox"],
    .ar-touch input[type="radio"] {
        min-height: 44px;
        min-width: 44px;
    }

    .ar-touch input[type="checkbox"],
    .ar-touch input[type="radio"] {
        min-height: 24px;
        min-width: 24px;
        transform: scale(1.4);
    }
}

/* Stops double-tap-to-zoom stealing taps on game boards and canvases. */
.ar-nozoom {
    touch-action: manipulation;
}

/* --------------------------------------------------------------------------
   Motion. Honour the OS setting everywhere — several of these pages animate
   continuously, which is exactly what the preference exists to stop.
   -------------------------------------------------------------------------- */

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

    .ar-motion,
    .ar-motion *,
    .ar-motion *::before,
    .ar-motion *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Visually hidden, still read aloud. Used for live regions and cell labels. */
.ar-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}