/* ==========================================================================
   IsItOpn?  —  public styles

   Mobile-first, no framework. Light and dark are both first-class.

   Colour contrast: every text colour below clears WCAG AA (4.5:1) against its
   own background, and the status dots clear 3:1 as non-text indicators. The
   dots are decorative regardless — the sentence next to them states the status
   in words, so nothing here depends on being able to tell green from red.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
    --page:        #d9dce1;
    --surface:     #ffffff;
    --surface-alt: #f4f6f8;
    --ink:         #1a1c1f;
    --ink-muted:   #5a6169;   /* 4.9:1 on white */
    --rule:        #d6dae0;

    --link:        #0b5fa5;   /* 6.4:1 on white */
    --link-hover:  #073f6f;

    --open:        #1b7f3b;   /* 5.1:1 on white */
    --closing:     #a85b00;   /* 5.0:1 on white */
    --closed:      #c02718;   /* 5.6:1 on white */

    --notice-bg:   #fff5e0;
    --notice-ink:  #6b4400;
    --ok-bg:       #e6f4ea;
    --ok-ink:      #14612f;
    --err-bg:      #fdeceb;
    --err-ink:     #96170c;

    --focus:       #0b5fa5;
    --radius:      6px;
    --tap:         44px;      /* minimum comfortable touch target */
}

/* A mouse can hit a much smaller control than a fingertip, and every pixel the
   header does not spend is another place in the list. Touch keeps its 44px. */
@media (pointer: fine) {
    :root { --tap: 34px; }
}

@media (prefers-color-scheme: dark) {
    :root {
        --page:        #0b0d10;
        --surface:     #16191d;
        --surface-alt: #1e2228;
        --ink:         #e9ebee;
        --ink-muted:   #a3acb6;   /* 7.2:1 on --surface */
        --rule:        #2b3037;

        --link:        #7fb8f0;   /* 7.6:1 on --surface */
        --link-hover:  #a9d0f7;

        --open:        #4cc46b;
        --closing:     #e5a33d;
        --closed:      #ff8074;

        --notice-bg:   #2b2415;
        --notice-ink:  #f0cd8a;
        --ok-bg:       #16281c;
        --ok-ink:      #8fdba6;
        --err-bg:      #2c1918;
        --err-ink:     #ffa79c;

        --focus:       #7fb8f0;
    }
}

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

body {
    margin: 0;
    padding: 0;
    background-color: var(--page);
    color: var(--ink);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 0.4em; }
h1 { font-size: 1.35rem; }
h2 { font-size: 1.1rem; }
h3 { font-size: 1rem; }
p  { margin: 0 0 0.6em; }
p:last-child { margin-bottom: 0; }

a { color: var(--link); }
a:hover { color: var(--link-hover); }

:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
    border-radius: 2px;
}

.muted { color: var(--ink-muted); }
.small { font-size: 0.85rem; }

.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;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--surface);
    color: var(--ink);
    padding: 0.75em 1em;
    z-index: 10;
}
.skip-link:focus {
    left: 0;
}

/* --------------------------------------------------------------------------
   Shell — the centred column from the original mock-up
   -------------------------------------------------------------------------- */
.wrapper {
    background-color: var(--surface);
    max-width: 860px;
    margin: 0 auto;
    min-height: 100vh;
}

.element {
    width: 100%;
    padding: 0.5em 0.8em;
}

/* Every row after the first gets a divider. */
.element + .element,
.results .element + .element,
main > *:first-child .element:first-child { border-top: 1px solid var(--rule); }

main { display: block; }
.results .result:first-child { border-top: 1px solid var(--rule); }

@media (min-width: 700px) {
    /* Clipped across, never down. overflow: hidden bought the rounded corners at
       the cost of the one thing on this page meant to hang past the bottom edge:
       the location list, which on a short page opens below where the wrapper
       ends and was being cut off there. Clipping only the x axis keeps nothing
       able to push the column sideways, and the corners are cut by the rows
       sitting on them instead — the footer is the row with a background of its
       own, and rounding both ends covers whichever row grows one later. */
    .wrapper {
        margin: 1rem auto;
        min-height: 0;
        border-radius: 10px;
        overflow-x: clip;
    }
    .wrapper > :first-child { border-radius: 10px 10px 0 0; }
    .wrapper > :last-child  { border-radius: 0 0 10px 10px; }

    .element { padding: 0.55em 1em; }
}

/* --------------------------------------------------------------------------
   Header — the wordmark, with the categories beside it
   -------------------------------------------------------------------------- */
/* One row: the wordmark, then the categories filling whatever is left of it.
   Baselines rather than centres, so the small links sit on the line of the
   large word instead of floating in the middle of its height. */
.site-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15em 0.7em;
}

.brand {
    font-size: 1.3rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--ink);
    letter-spacing: -0.01em;
    flex: 0 0 auto;
}
.brand-q { color: var(--open); }

/* Basis of zero, so the list never counts as too wide to sit beside the
   wordmark: a narrow screen wraps the links among themselves and keeps the
   first of them on the wordmark's line, rather than dropping the whole nav to
   a line of its own — which is the line this row exists to save. */
.categories {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-flow: row wrap;
    gap: 0.15em 0.6em;
    align-items: baseline;
    font-size: 0.92rem;
}
.categories a {
    text-decoration: none;
    padding: 0.15em 0.1em;
}
.categories a:hover { text-decoration: underline; }
.categories a[aria-current="page"] {
    font-weight: 700;
    color: var(--ink);
}

/* --------------------------------------------------------------------------
   The bar — what, near where, and the note explaining what "where" resolved to
   -------------------------------------------------------------------------- */
/* The form and the note it explains share a row wherever they both fit. The
   popup is positioned against this, so it cannot be what clips it. */
.location-bar {
    background: var(--surface-alt);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25em 0.8em;
    position: relative;
}

/* The two halves and the word between them read as one sentence, so they stay
   on one line until there is genuinely no room — and when there is not, the
   basis below lets the "where" half drop whole rather than shrink to nothing.
   Given the room, the bar takes the width and the note wraps under it: this is
   the control the screen is driven from. */
.find {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4em;
    font-size: 0.92rem;
    flex: 1 1 22em;
    min-width: 0;
}
.find label { color: var(--ink-muted); }
.find input[type="search"] { flex: 1 1 8em; min-width: 0; }

/* --------------------------------------------------------------------------
   Combobox — the location box and the list it owns
   -------------------------------------------------------------------------- */
.combo {
    flex: 1 1 12em;
    min-width: 0;
    display: flex;
}
.combo input[type="text"] { flex: 1 1 auto; min-width: 0; }

/* Positioned against the whole bar rather than the box it belongs to: the box
   is only as wide as the room left beside the label, which is not enough for
   "Current Location" and a hint to share a line. Dropping under the bar also
   means opening the list never reflows it or pushes the first result away. */
.combo-list {
    position: absolute;
    z-index: 20;
    top: calc(100% - 0.2em);
    left: 0.75em;
    right: 0.75em;
    max-width: 26em;
    margin: 0;
    padding: 0.2em 0;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: 0 6px 18px rgb(0 0 0 / 0.16);
    /* Long enough to be worth scrolling, short enough to leave some of the
       results behind it visible. */
    max-height: min(60vh, 20em);
    overflow-y: auto;
}
.combo-list[hidden] { display: none; }

/* Comfortable under a fingertip, and wide enough that the hint can sit hard
   right of the name rather than wrapping under it. */
.combo-option {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75em;
    padding: 0.5em 0.7em;
    min-height: var(--tap);
    cursor: pointer;
}
.combo-option[aria-selected="true"] {
    background: var(--surface-alt);
}
.combo-option:hover { background: var(--surface-alt); }

/* One line each. A place name long enough to wrap would push the row's own
   hint out of line with every other row's. */
.combo-value {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.combo-hint {
    color: var(--ink-muted);
    font-size: 0.85em;
    flex: 0 0 auto;
    white-space: nowrap;
}

/* The device and the map are the answers that cannot be typed, so they are
   ruled off from the ones that can. The rule is drawn by whichever place comes
   first rather than by the last action, so it holds however many actions there
   are and never hangs under an empty list. */
.combo-option.is-action { font-weight: 600; }
.combo-option.is-action + .combo-option:not(.is-action) {
    border-top: 1px solid var(--rule);
}

/* Narrow enough to share the row and wrap inside it, rather than claim one. */
.position-note {
    margin: 0;
    font-size: 0.85rem;
    color: var(--ink-muted);
    flex: 1 1 10em;
    text-align: right;
}

/* --------------------------------------------------------------------------
   The way out — one rung further at the bottom of the list
   -------------------------------------------------------------------------- */
.load-more {
    margin: 0;
    text-align: center;
    background: var(--surface-alt);
}
.load-more .button { width: 100%; }

/* Where the browser lands after a "look further": the first result that press
   brought in, or the control itself when it brought in nothing. Without the
   margin it would sit flush against the top edge, with no sign that anything
   came before it. */
#more {
    scroll-margin-top: 4rem;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
input[type="text"], input[type="search"], input[type="password"],
input[type="email"], input[type="url"], input[type="tel"], input[type="number"],
input[type="date"], input[type="time"], select, textarea {
    font: inherit;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 0.5em 0.6em;
    min-height: var(--tap);
}
textarea { min-height: 5em; }

input:focus, select:focus, textarea:focus { border-color: var(--focus); }

button, .button {
    font: inherit;
    font-weight: 600;
    color: #fff;
    background: var(--link);
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: 0.5em 0.9em;
    min-height: var(--tap);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
button:hover, .button:hover { background: var(--link-hover); color: #fff; }

@media (prefers-color-scheme: dark) {
    button, .button { color: #0b0d10; }
    button:hover, .button:hover { color: #0b0d10; }
}

button.secondary, .button.secondary {
    background: transparent;
    color: var(--link);
    border-color: var(--rule);
}
button.secondary:hover, .button.secondary:hover {
    background: var(--surface-alt);
    color: var(--link-hover);
}

/* --------------------------------------------------------------------------
   Results
   -------------------------------------------------------------------------- */
.results {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* One row, one line: dot, sentence, why-it-is-closed, distance hard right. */
.result {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 0.4em;
    padding-top: 0.35em;
    padding-bottom: 0.35em;
}
.result .label   { flex: 0 1 auto; min-width: 0; }
.result .reason  { flex: 0 1 auto; }
.result .distance {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--ink-muted);
    white-space: nowrap;
}

/* Search rows only — where the place actually is, since a search reaches past
   the area named in the bar and the bar stops answering "which town is this
   one in".

   It sits beside the distance so the right-hand edge stays one block of muted
   detail, and it does not shrink. A town clipped to "Chic…" is not a shorter
   answer, it is no answer, and it costs a whole row of the list to say it. The
   sentence on the left is what gives way instead: it is already prose and
   already wraps, so it loses a line rather than a fact. */
.result .place-where {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--ink-muted);
    white-space: nowrap;
}
.result .place-where + .distance { margin-left: 0; }

/* Status dot. Decorative: aria-hidden in the markup, meaning lives in the text. */
.color {
    width: 0.75em;
    height: 0.75em;
    border-radius: 50%;
    display: inline-block;
    background-color: var(--ink-muted);
    flex: 0 0 auto;
    margin-right: 0.15em;
    transform: translateY(-0.05em);
}
.color.open    { background-color: var(--open); }
.color.closing { background-color: var(--closing); }
.color.closed  { background-color: var(--closed); }

.label {
    display: inline;
    line-height: 1.35;
}

.place {
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
}
a.place { color: var(--link); }
a.place:hover { text-decoration: underline; }

/* The whole row is tappable on a phone without swallowing the inner controls. */
.result a.place::after {
    content: "";
    position: absolute;
    inset: 0;
}
.result .reltime,
.result .meta a { position: relative; z-index: 1; }

.meta {
    margin: 0.25em 0 0;
    font-size: 0.85rem;
    color: var(--ink-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0.35em;
    align-items: baseline;
}
.meta .sep { opacity: 0.6; }
.distance { font-variant-numeric: tabular-nums; }
.cat-tag { text-decoration: none; }
.cat-tag:hover { text-decoration: underline; }

.reason {
    margin: 0.25em 0 0;
    font-size: 0.85rem;
    color: var(--closing);
}
.result .reason { margin: 0; }

/* A counter still serving under a place that is shut. Only rows carrying one
   wrap: every other row is a single line whose sentence gives way before the
   distance does, and that behaviour is worth not touching. Indented to the width
   of the dot above it, so the two sentences read as the place and then a part of
   it rather than as two places. */
.result:has(.service-open) { flex-wrap: wrap; }
.result .service-open {
    flex: 1 0 100%;
    display: flex;
    align-items: baseline;
    gap: 0.15em;
    margin: 0.15em 0 0;
    padding-left: 0.9em;
    font-size: 0.9rem;
}

/* Relative time toggle — a real button so it works without a pointer. */
.reltime {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    min-height: 0;
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}
.reltime:hover { background: none; color: var(--link); }

/* A button is an atomic inline box: the browser may break the line on either
   side of it however tight the markup is, which left the sentence's full stop
   stranded on a line of its own. Nothing weaker holds it — not a word joiner
   between the two, not display:inline on the button — so the countdown and the
   stop share one unbreakable box. Both readings are short ("minute or less" is
   the longest), so nothing here can outgrow a phone. */
.reltime-tail { white-space: nowrap; }

@media (prefers-color-scheme: dark) {
    .reltime, .reltime:hover { color: inherit; }
    .reltime:hover { color: var(--link); }
}

/* --------------------------------------------------------------------------
   Location page
   -------------------------------------------------------------------------- */
.location-head .label { font-size: 1.1rem; }

.address a { font-size: 1.05rem; }

.map-links {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin: 0.6em 0;
    padding: 0;
}
.map-links .button { flex: 1 1 auto; }

/* The front-door pin and the street address, each with the same three apps.
   The heading and the line under it are what tell the two sets apart, so they
   sit tight against their own buttons and the sets stay clearly separated. */
.map-target h3 { margin: 0 0 0.1em; }
.map-target p { margin: 0; }
.map-target + .map-target { margin-top: 1em; }

/* Optional map. The iframe is lazy, so aspect-ratio reserves its space up
   front and the page does not jump when the tiles arrive. */
.map { margin: 0.6em 0; }

.map-frame {
    aspect-ratio: 16 / 10;
    max-height: 60vh;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface-alt);
}
.map-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.map-note { margin: 0.5em 0 0; }

/* --------------------------------------------------------------------------
   The drawn map — tile-map.js in place of a frame's contents

   Tiles are absolutely positioned <img>s; everything else floats over them.
   Lives here rather than in admin.css because both the location editor's
   front-door pin and the public location picker are drawn by the same file.
   -------------------------------------------------------------------------- */
.map-surface {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--surface-alt);
    cursor: grab;
    /* Panning is a drag, not a scroll — without this a touch drag scrolls the
       page out from under the map. */
    touch-action: none;
}
.map-surface.is-dragging { cursor: grabbing; }
.map-surface:focus-visible { outline: 3px solid var(--link); outline-offset: -3px; }

.map-layer {
    position: absolute;
    inset: 0;
}
.map-tile {
    position: absolute;
    width: 256px;
    height: 256px;
    user-select: none;
    -webkit-user-drag: none;
}

/* The box's bottom centre is the coordinate; the teardrop is drawn to end
   there, so what the pin points at is what gets saved. */
.map-pin {
    position: absolute;
    width: 24px;
    height: 25px;
    margin: -25px 0 0 -12px;
    padding: 0;
    border: 0;
    min-height: 0;
    background: none;
    cursor: grab;
}
.map-pin:hover { background: none; }
.map-pin::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0;
    width: 20px;
    height: 20px;
    background: var(--closed);
    border: 2px solid #fff;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 1px 4px rgb(0 0 0 / 0.45);
}
.map-pin::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 1px rgb(0 0 0 / 0.55);
}
.map-pin:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }

.map-zoom {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.map-zoom button {
    width: 2rem;
    min-height: 2rem;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--rule);
}
.map-zoom button:hover { background: var(--surface-alt); color: var(--ink); }

.map-credit {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0 0.35em;
    font-size: 0.68rem;
    background: var(--surface);
    border-top-left-radius: 4px;
}

/* --------------------------------------------------------------------------
   Picking a position on a map — place-picker.js, opened from the location box
   -------------------------------------------------------------------------- */

/* Pinned to the middle of the frame, because the middle of the frame is the
   answer. Ringed in white over dark and dark over white both, since it has to
   stay visible over map tiles rather than over the page. It never takes the
   pointer: a drag that starts on the crosshair pans the map like any other. */
.map-crosshair {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2.2rem;
    height: 2.2rem;
    margin: -1.1rem 0 0 -1.1rem;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgb(0 0 0 / 0.45), inset 0 0 0 2px var(--closed);
    pointer-events: none;
}
.map-crosshair::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5px;
    height: 5px;
    margin: -2.5px 0 0 -2.5px;
    border-radius: 50%;
    background: var(--closed);
    box-shadow: 0 0 0 1.5px #fff;
}

/* Wider than the map-app chooser above it: this one holds a map, and a map the
   size of a phone dialog is not one you can find your own street in. */
.place-picker {
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    padding: 1em;
    max-width: 34em;
    width: calc(100% - 2em);
    max-height: 90vh;
    overflow-y: auto;
}
.place-picker::backdrop { background: rgba(0, 0, 0, 0.5); }
.place-picker h2 { font-size: 1rem; margin: 0 0 0.2em; }
.place-picker-help {
    margin: 0 0 0.6em;
    font-size: 0.85rem;
    color: var(--ink-muted);
}
.place-picker .map-frame {
    aspect-ratio: 4 / 3;
    max-height: 60vh;
}
.place-picker-actions {
    display: flex;
    gap: 0.6rem;
    margin: 0.8em 0 0;
}
.place-picker-actions button { flex: 1 1 auto; }

/* Offered by map-chooser.js when a desktop click on the geo: address would
   otherwise go nowhere. Built from the map links above, never shown without
   scripting — a plain click on the address is unchanged in that case. It
   carries both sets of links, so it can scroll on a short window. */
.map-chooser {
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    padding: 1em;
    max-width: 20em;
    width: calc(100% - 2em);
    max-height: 85vh;
    overflow-y: auto;
}
.map-chooser::backdrop { background: rgba(0, 0, 0, 0.5); }
.map-chooser h2 { font-size: 1rem; }
.map-chooser h3 { font-size: 0.95rem; }
.map-chooser .map-links { flex-direction: column; margin: 0.4em 0 0; }
.map-chooser .map-target + .map-target { margin-top: 0.8em; }
.map-chooser .map-targets { margin-bottom: 0.8em; }
.map-chooser .button,
.map-chooser button { width: 100%; }

.phone .button { width: 100%; }

@media (min-width: 460px) {
    .phone .button { width: auto; }
}

.social {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75em;
    margin: 0.5em 0 0;
    padding: 0;
    font-size: 0.9rem;
}

.hours-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}
.hours-table th, .hours-table td {
    text-align: left;
    padding: 0.4em 0.2em;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}
.hours-table th {
    font-weight: 500;
    color: var(--ink-muted);
    white-space: nowrap;
    padding-right: 1em;
}
.hours-table tr:last-child th,
.hours-table tr:last-child td { border-bottom: 0; }
.hours-table .is-today th,
.hours-table .is-today td {
    font-weight: 700;
    color: var(--ink);
}
.today-tag {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--surface);
    background: var(--ink-muted);
    border-radius: 999px;
    padding: 0.05em 0.5em;
    margin-left: 0.4em;
    vertical-align: 0.1em;
}

.plain { list-style: none; margin: 0.3em 0; padding: 0; }
.plain li { padding: 0.15em 0; }

/* Which stretch of the year the table above belongs to, and the ones it does
   not. Set at the size of the notes around it: it qualifies the hours rather
   than competing with them. */
.season-now { margin-bottom: 0.4em; }
.season-ranges { font-size: 0.9rem; }

/* A month of resolved days behind a control, under the seven that answer almost
   every visit. Borrows the counters' disclosure, being the same offer. */
.more-days { margin-top: 0.7em; }
.more-days summary {
    font-size: 0.9rem;
    color: var(--link);
    cursor: pointer;
    width: fit-content;
}
.more-days summary:hover { color: var(--link-hover); }
.more-days .hours-table { margin-top: 0.5em; }

/* Counters and services — a pharmacy desk, a drive-up window. Each is the same
   sentence the page opens with, so it borrows the same dot and label; what it
   adds is a rule between them, because two counters with different answers have
   to be tellable apart at a glance. */
.services { margin: 0; }
.service { padding: 0.7em 0; }
.service + .service { border-top: 1px solid var(--rule); }
.service-line { margin: 0; display: flex; align-items: baseline; gap: 0.15em; }

/* The week behind a closed control: what is being looked up is almost always
   whether it is open now, which the line above has already answered. */
.service-week { margin-top: 0.3em; }
.service-week summary {
    font-size: 0.9rem;
    color: var(--link);
    cursor: pointer;
    width: fit-content;
}
.service-week summary:hover { color: var(--link-hover); }
.service-week .hours-table { margin-top: 0.3em; }

/* The status sentence above already names the next opening; this is only how
   far off it is, so it reads as a footnote to it. */
.reopens { margin-top: 0.4em; font-size: 0.9rem; }

.notice {
    margin: 0.6em 0 0;
    padding: 0.6em 0.75em;
    border-radius: var(--radius);
    background: var(--surface-alt);
    font-size: 0.9rem;
}
.notice-warn {
    background: var(--notice-bg);
    color: var(--notice-ink);
}

.flash { font-size: 0.95rem; }
.flash-ok    { background: var(--ok-bg);  color: var(--ok-ink); }
.flash-error { background: var(--err-bg); color: var(--err-ink); }

/* Two offers, each closed until it is taken up. The button carries the whole
   label, so the disclosure marker beside it would be a second thing to read
   saying nothing the button does not; display alone drops it everywhere but
   Safari, which wants the pseudo-element named. */
.report-forms { display: grid; gap: 0.6em; }
.report > summary { width: 100%; list-style: none; }
.report > summary::-webkit-details-marker { display: none; }

/* Open, the panel is what the press was for: the terms, the field, and the
   button that actually sends. It is filled where the trigger is outlined,
   which is the difference between opening this and committing to it. */
.report[open] > summary { margin-bottom: 0.6em; }
.report-form input[type="text"] { width: 100%; margin: 0.5em 0; }
.report-form button { width: 100%; }

@media (min-width: 560px) {
    /* Side by side, and each column sized by its own contents: an open panel
       must not stretch the closed button beside it into a tall empty box. */
    .report-forms { grid-template-columns: 1fr 1fr; align-items: start; }
    .report > summary,
    .report-form button { width: auto; }
}

.back-link { font-size: 0.95rem; }

.empty h1 { margin-bottom: 0.3em; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
    color: var(--ink-muted);
    font-size: 0.82rem;
    background: var(--surface-alt);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.2em 1em;
}
.site-footer p { margin: 0; }
.footer-stat strong { color: var(--ink); }
/* Hard right whether or not the stat line is beside it. */
.footer-admin { margin-left: auto; }

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