/* ============================================================================
   Geo Tag Photo page CSS (geo PRD 11 §10.2).

   Split out of components.css by PERF-D01 and loaded only on /geo-tag-photo/,
   through the `extra_css` key on that route's LAYOUT_VARIANTS row. Every rule
   here is scoped .page-geo (or a .geo-* class the geo template alone emits), so
   it reached no other route even when it shipped to all of them - the cost was
   render-blocking bytes, not bleed.

   Mobile-first, like the rest of assets/css/: the base rules are the phone
   layout and the only media query is min-width. useBuiltCss() globs
   assets/css/*.css, so this file is picked up by the freshness check with no
   registration. Page chrome, the hand-rolled map picker and the Nominatim
   place search.
   ========================================================================= */

/* The page uses the `hidden` attribute for every collapsed state, which the
   UA rule alone cannot enforce: .error-card sets display: flex and wins on
   specificity, so a hidden error card would paint. One rule instead of a
   `style.display` dance in JS. */
.page-geo [hidden] {
    display: none !important;
}

/* Shared by typed fields, unit selects, and the place-search group so the
   two cards do not ship two generations of input chrome. */
.page-geo {
    --geo-control-radius: calc(var(--border-radius) + 2px);
    --geo-control-border: color-mix(in srgb, var(--color-text) 18%, var(--color-border));
    --geo-control-inset: inset 0 1px 2px rgb(15 23 42 / 0.06);
    --geo-control-hover: color-mix(in srgb, var(--primary-color) 42%, var(--color-border));
}

.page-geo .main-layout--geo {
    display: block;
}

.page-geo .left-column {
    max-width: var(--content-max-width);
    width: 100%;
    margin-inline: auto;
}

/* Geo-only hero in #tagline-placeholder. Mirrors the shared tagline look but
   uses its own class names so home/edit/view .tagline-* stay untouched. */
.geo-tagline-section {
    color: #712fff;
    text-align: center;
    padding: 1rem 0.75rem;
    margin-top: 1rem;
    margin-bottom: 0.75rem;
    width: 100%;
}

.geo-tagline-container {
    max-width: var(--content-max-width);
    margin: 0 auto;
}

.geo-tagline-text {
    position: relative;
    display: inline-block;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    letter-spacing: -0.025em;
    background: linear-gradient(120deg,
        var(--tagline-clr-1) 0%,
        var(--tagline-clr-2) 25%,
        var(--tagline-clr-3) 50%,
        var(--tagline-clr-4) 75%,
        var(--tagline-clr-1) 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: geoTaglineGradientShift 7s ease-in-out infinite;
}

@keyframes geoTaglineGradientShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.page-geo .geo-section-title {
    font-size: 1.15rem;
    margin: 0 0 0.75rem;
}

/* Elevated card shell shared by the coordinate form, the map picker and the
   FAQ answers — same padding, border and layered shadow so the sections read
   as one surface language. */
.page-geo .geo-fields,
.page-geo .geo-map,
.page-geo .geo-answers {
    padding: 1.5rem 1.25rem;
    margin: 0.75rem 0 1.25rem;
    background: var(--card-background, var(--color-white));
    border: 1px solid var(--border-color, var(--color-border));
    border-radius: calc(var(--border-radius) + 4px);
    box-shadow:
        0 1px 2px rgb(15 23 42 / 0.04),
        0 10px 28px -6px rgb(15 23 42 / 0.14),
        0 24px 48px -16px rgb(15 23 42 / 0.12);
}

/* Centred section heading with a short accent rule — fields, map and FAQ
   titles share one treatment so the cards feel like one surface language. */
.page-geo .geo-fields__title,
.page-geo .geo-map__title,
.page-geo .geo-answers__title {
    text-align: center;
    font-size: clamp(1.15rem, 2.4vw, 1.35rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.3;
    color: var(--color-text, #0f172a);
    margin: 0;
    padding-bottom: 1.25rem;
}

.page-geo .geo-fields__title::after,
.page-geo .geo-map__title::after,
.page-geo .geo-answers__title::after {
    content: "";
    display: block;
    width: 2.5rem;
    height: 2px;
    margin: 0.75rem auto 0;
    background: var(--primary-color);
    border-radius: 1px;
}

/* One column on a phone. The pairs (value + unit) stay side by side at every
   width because splitting them reads as two unrelated controls.
   1.5rem row gap keeps stacked fields from feeling cramped on mobile. */
.page-geo .geo-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.page-geo .geo-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.page-geo .geo-label {
    display: flex;
    align-items: center;
    font-size: 1.05rem;
    font-weight: 600;
}

/* After Latitude's ? and outside the <label>, so a click follows the hash. */
.page-geo .geo-label-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 0.4rem;
    row-gap: 0.15rem;
}

.page-geo .geo-learn-coords {
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.3;
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.page-geo .geo-learn-coords:hover,
.page-geo .geo-learn-coords:focus-visible {
    color: var(--color-primary-dark, var(--color-primary));
}

.page-geo .geo-learn-coords:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Field "?" popups share .geo-switch-note chrome (light card, not the
   shared black overlay). Caret off so it reads as a note, not a bubble. */
.page-geo .geo-label .help-icon {
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-primary-light, #dbeafe) 55%, var(--card-background, #fff));
    border: 1px solid color-mix(in srgb, var(--primary-color) 18%, transparent);
    flex: 0 0 auto;
}

.page-geo .geo-label .help-icon:hover::after,
.page-geo .geo-label .help-icon:focus::after {
    content: attr(data-tooltip);
    left: auto;
    right: auto;
    inset-inline-start: 0;
    transform: none;
    top: calc(100% + 0.4rem);
    z-index: 30;
    box-sizing: border-box;
    min-width: 13.75rem;
    max-width: min(20rem, calc(100vw - 2.5rem));
    padding: 0.7rem 0.85rem;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.45;
    text-align: start;
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-primary-light, #dbeafe) 55%, var(--card-background, #fff));
    border: 1px solid color-mix(in srgb, var(--primary-color) 18%, transparent);
    border-radius: 8px;
}

.page-geo .geo-label .help-icon:hover::before,
.page-geo .geo-label .help-icon:focus::before {
    content: none;
}

.page-geo .geo-input,
.page-geo .geo-select {
    width: 100%;
    min-width: 0;
    /* 16px: anything smaller makes iOS Safari zoom the page on focus. */
    font-size: 1rem;
    /* 44px tap target, the same floor the nav drawer uses. */
    min-height: 44px;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--geo-control-border);
    border-radius: var(--geo-control-radius);
    background-color: var(--color-white);
    color: var(--color-text);
    box-shadow: var(--geo-control-inset);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Hints, not values: the field color is dark enough that the UA placeholder
   reads as a filled-in figure. Fade it; opacity: 1 stops Firefox stacking
   its default 0.54 on top of the mix. */
.page-geo .geo-input::placeholder {
    color: color-mix(in srgb, var(--color-text) 40%, transparent);
    opacity: 1;
}

/* The only control on this page that is not a single line. It inherits every
   .geo-input rule above - border, focus ring, invalid state - and needs four
   things on top: room to be a paragraph, the form's font rather than the UA's
   monospace default, comfortable line spacing, and a drag handle the visitor
   can use without the layout growing sideways. */
.page-geo .geo-textarea {
    min-height: 5.5rem;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
}

/* Native selects keep OS chrome; strip it so they share the field border. */
.page-geo .geo-select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 0.95rem;
    padding-inline-end: 2.1rem;
}

[dir="rtl"] .page-geo .geo-select {
    background-position: left 0.7rem center;
}

@media (hover: hover) {
    .page-geo .geo-input:hover:not(:focus, :focus-visible, .is-invalid),
    .page-geo .geo-select:hover:not(:focus, :focus-visible, .is-invalid) {
        border-color: var(--geo-control-hover);
    }
}

.page-geo .geo-input:focus,
.page-geo .geo-input:focus-visible,
.page-geo .geo-select:focus,
.page-geo .geo-select:focus-visible {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: inset 0 1px 2px rgb(15 23 42 / 0.06), 0 0 0 3px rgb(37 99 235 / 0.28);
}

.page-geo .geo-input.is-invalid {
    border-color: var(--color-error);
}

.page-geo .geo-input.is-invalid:focus,
.page-geo .geo-input.is-invalid:focus-visible {
    border-color: var(--color-error);
    box-shadow: inset 0 1px 2px rgb(15 23 42 / 0.06), 0 0 0 3px rgb(231 76 60 / 0.28);
}

@media (prefers-reduced-motion: reduce) {
    .page-geo .geo-input,
    .page-geo .geo-select {
        transition: none;
    }
}

.page-geo .geo-field-error {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.35;
    color: var(--color-error);
}

.page-geo .geo-field-error[hidden] {
    display: none;
}

.page-geo .geo-input-pair {
    display: flex;
    gap: 0.5rem;
}

.page-geo .geo-input-pair .geo-input {
    flex: 1 1 auto;
}

.page-geo .geo-input-pair .geo-select {
    flex: 0 0 auto;
    width: auto;
}

.page-geo .geo-switch {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color, var(--color-border));
}

.page-geo .geo-switch__row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.page-geo .geo-switch .toggle-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 44px;
    cursor: pointer;
    flex: 1 1 auto;
    min-width: 0;
}

.page-geo .geo-switch-text {
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-text);
    line-height: 1.35;
}

/* Always-visible On/Off explanation — replaces the old "?" tooltip. */
.page-geo .geo-switch-note {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0.65rem 0 0;
    padding: 0.7rem 0.85rem;
    font-size: 0.875rem;
    line-height: 1.45;
    background: color-mix(in srgb, var(--color-primary-light, #dbeafe) 55%, var(--card-background, #fff));
    border: 1px solid color-mix(in srgb, var(--primary-color) 18%, transparent);
    border-radius: 8px;
}

.page-geo .geo-switch-note__line--on {
    color: #166534;
}

.page-geo .geo-switch-note__line--off {
    color: #9a3412; /* deep amber — readable contrast vs On green */
}

/* One height for the live surface and for the placeholder that stands in for
   it, so loading the map does not resize the page under the visitor's thumb.
   Card chrome (padding / border / shadow) comes from the shared rule with
   `.geo-fields` above — do not restate margin-top here or the two cards drift. */
.page-geo .geo-map {
    --geo-map-height: 320px;
}

.page-geo .geo-map__panel {
    margin: 0;
}

/* Privacy copy sits inside the map card, separated like the strip switch
   note under the fields — not floating below the elevated shell. */
.page-geo .geo-map .geo-note--privacy {
    margin: 1rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color, var(--color-border));
}

/* Positioning context for the zoom overlay, which is a sibling of the surface
   rather than a child of it (GeoMapPicker#buildZoomControls). */
.page-geo .geo-map__host {
    position: relative;
}

/* Visible from page load, and it says what it costs. Tiles are fetched only
   when this is pressed; GeoMapPicker#build() replaces it on mount. */
.page-geo .geo-map__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    height: var(--geo-map-height);
    padding: 1.25rem;
    text-align: center;
    border: 1px dashed var(--color-border);
    border-radius: var(--border-radius);
    background: #e8e4dd;
}

/* `btn btn-primary` / `btn btn-secondary` paint nothing - anywhere on the site,
   not just here. Bootstrap was removed outright on 2026-09-18 (GEO-D44): the
   flag, the CDN link and both local theme stylesheets are gone, so those class
   names now match no rule at all. Anything leaning on them ships as a bare UA
   button, which is what the whole section below exists to stop. Blue for the two map helpers, red for the page
   action, green for the download - one meaning per colour. */
.page-geo .geo-map__load,
.page-geo .geo-search__submit {
    border: 0;
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

@media (hover: hover) {
    .page-geo .geo-map__load:hover,
    .page-geo .geo-search__submit:hover {
        background: var(--color-primary-dark);
    }
}

.page-geo .geo-map__load:active,
.page-geo .geo-search__submit:active {
    background: var(--color-primary-dark);
}

.page-geo .geo-map__load {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    padding-inline: 1.25rem;
    font-size: 1rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
}

.page-geo .geo-map__load:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
}

.page-geo .geo-map__placeholder-note {
    max-width: 30ch;
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--color-text-light);
}

/* The map viewport. A fixed height rather than an aspect ratio: the tile grid
   is computed from the measured box, and a box that resizes with its content
   would re-enter that computation on every pan. */
.page-geo .geo-map__surface {
    position: relative;
    width: 100%;
    height: var(--geo-map-height);
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background: #e8e4dd;
    /* Vertical page scroll stays with the page; horizontal drag is the map's.
       Without this a pan gesture fights the scroller on every phone. */
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
}

.page-geo .geo-map__tiles {
    position: absolute;
    inset: 0;
}

.page-geo .geo-map__tile {
    position: absolute;
    width: 256px;
    height: 256px;
    pointer-events: none;
    user-select: none;
}

/* The pin's point is its bottom centre, so the marker is offset by half its
   width and its full height - otherwise the coordinate sits under the middle
   of the pin and every pick is a few hundred metres north. */
.page-geo .geo-map__marker {
    position: absolute;
    width: 24px;
    height: 32px;
    margin-left: -12px;
    margin-top: -32px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-primary);
    cursor: grab;
    touch-action: none;
}

.page-geo .geo-map__marker svg {
    display: block;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

/* Overlaid on the map's top-right, the way every map does it, as one stacked
   pair. Absolute against .geo-map__host: the surface owns the pan/pinch
   pointer handlers, so these must not be inside it (GeoMapPicker). */
.page-geo .geo-map__zoom {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    border-radius: var(--border-radius);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.page-geo .geo-map__zoom-button {
    /* 44px is the floor the rest of this page's controls use, and this pair is
       pressed with a thumb on a moving map. */
    width: 44px;
    height: 44px;
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1;
    border: 0;
    border-radius: 0;
    background: var(--color-white);
    color: var(--color-text);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

/* A hairline between the two, not around them - they read as one control. */
.page-geo .geo-map__zoom-button + .geo-map__zoom-button {
    border-top: 1px solid var(--color-border);
}

/* Hover only where hovering exists: on a phone this rule would otherwise
   stick after the tap and leave the button looking pressed. */
@media (hover: hover) {
    .page-geo .geo-map__zoom-button:hover {
        background: var(--color-background);
    }
}

.page-geo .geo-map__zoom-button:active {
    background: var(--color-border);
}

.page-geo .geo-map__zoom-button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
    z-index: 1;
}

/* ODbL requires the attribution to stay visible. Small is fine; hidden is not,
   and neither is a colour that cannot be read (geo PRD 11 §10.5). */
.page-geo .geo-map__attribution,
.page-geo .geo-search__attribution {
    font-size: 0.75rem;
    margin: 0.4rem 0 0;
}

.page-geo .geo-map__attribution a,
.page-geo .geo-search__attribution a {
    color: var(--color-text-light);
    text-decoration: underline;
}

.page-geo .geo-search {
    margin-bottom: 0.75rem;
}

.page-geo .geo-search__label {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

/* Field and button are one control, with a single border and a single focus
   ring, rather than two boxes with a gap between them. Same tokens as
   `.geo-input` so the map card does not ship a second generation of chrome. */
.page-geo .geo-search__row {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--geo-control-border);
    border-radius: var(--geo-control-radius);
    background: var(--color-white);
    box-shadow: var(--geo-control-inset);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

@media (hover: hover) {
    .page-geo .geo-search__row:hover:not(:focus-within) {
        border-color: var(--geo-control-hover);
    }
}

.page-geo .geo-search__row:focus-within {
    border-color: var(--primary-color);
    box-shadow: inset 0 1px 2px rgb(15 23 42 / 0.06), 0 0 0 3px rgb(37 99 235 / 0.28);
}

@media (prefers-reduced-motion: reduce) {
    .page-geo .geo-search__row {
        transition: none;
    }
}

.page-geo .geo-search__input {
    flex: 1 1 auto;
    min-width: 0;
    /* 1rem is the floor that stops iOS Safari zooming the page on focus. */
    font-size: 1rem;
    min-height: 48px;
    padding: 0.5rem 0.75rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--color-text);
}

/* The group carries the ring; a second one inside it just looks broken. */
.page-geo .geo-search__input:focus,
.page-geo .geo-search__input:focus-visible {
    outline: none;
    box-shadow: none;
}

.page-geo .geo-search__submit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 48px;
    padding-inline: 1rem;
    border-radius: 0;
    /* Separated from the field by a rule, not a gap - it is the field's own
       action, not a second decision. */
    border-inline-start: 1px solid var(--geo-control-border);
}

.page-geo .geo-search__submit:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.page-geo .geo-search__submit .button-icon {
    font-size: 1rem;
    line-height: 1;
}

.page-geo .geo-search__results {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
}

.page-geo .geo-search__result {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 0.5rem 0.65rem;
    text-align: start;
    border: 1px solid var(--geo-control-border);
    border-radius: var(--geo-control-radius);
    background: var(--color-white);
    color: var(--color-text);
    cursor: pointer;
    /* A place name can be long; it wraps rather than widening the column. */
    overflow-wrap: anywhere;
}

.page-geo .geo-search__results li + li {
    margin-top: 0.35rem;
}

@media (hover: hover) {
    .page-geo .geo-search__result:hover {
        border-color: var(--color-primary);
    }
}

.page-geo .geo-search__result:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.page-geo .geo-search__status {
    font-size: 0.9rem;
    margin: 0.5rem 0 0;
}

.page-geo .geo-search__status--error {
    color: var(--color-error);
}

.page-geo .geo-search__place {
    font-size: 0.9rem;
    margin: 0.5rem 0 0;
    overflow-wrap: anywhere;
}

.page-geo .geo-search__place-label::after {
    content: ': ';
}

/* Both actions stack on a phone and sit full width - the layout protocol's
   rule for primary controls. The pair lives inside `.geo-fields`; kill the
   shared `.action-button-section` top margin so the 35px on the card is the
   only gap above and below the row. */
.page-geo .geo-actions {
    margin-top: 0;
    width: 100%;
}

.page-geo .geo-fields .action-button-card {
    margin-block: 35px;
}

.page-geo .geo-actions .action-button-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.page-geo .geo-actions .action-button {
    width: 100%;
    min-height: 48px;
}

/* `.action-button.primary-action` is the only styled action variant the site
   has - every other tool ships exactly one button. Geo is the first page with
   two, so the second one needs an appearance of its own; without this it is
   `border: none` over no background, i.e. a label floating on the page. */
.page-geo .geo-actions .action-button:not(.primary-action) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--color-white);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

@media (hover: hover) {
    .page-geo .geo-actions .action-button:not(.primary-action):hover:not(:disabled) {
        border-color: var(--color-text-light);
        background: var(--color-background);
    }
}

.page-geo .geo-actions .action-button:not(.primary-action):active:not(:disabled) {
    background: var(--color-light);
}

.page-geo .geo-actions .action-button:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
}

/* .action-button:disabled is opacity .8, which on a white-on-white secondary
   is still readable but gives no signal. Both actions wait on an upload, so
   the disabled state has to be obvious. */
.page-geo .geo-actions .action-button:disabled {
    opacity: 0.55;
}

.page-geo .geo-actions .button-icon svg {
    width: 1.15em;
    height: 1.15em;
    display: block;
}

/* Status/error/download live under the actions. The shared `.progress-text`
   is 12px (upload chrome); on this page it is the success line, so it needs
   body-adjacent size and readable colour rather than the muted micro label. */
.page-geo .geo-status .progress-text {
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--color-text);
    margin-top: 0.75rem;
}

/* The end of the flow. Same tap height as the action that produced it, but
   not a full-bleed bar: phone stays full-width (layout protocol), from 640px
   it shrinks to the content (`fit-content`) and centres. `display: flex` with
   `width: auto` still fills the column — that is why the old desktop rule
   never constrained it. `.page-geo [hidden]` (with !important) keeps it out
   until revealed — hence :not([hidden]) rather than a bare display. */
.page-geo .geo-download:not([hidden]) {
    display: flex;
}

.page-geo .geo-download {
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 52px;
    margin-top: 1rem;
    padding-inline: 1.25rem;
    font-size: 1.05rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.page-geo .geo-download:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

.page-geo .geo-download .button-icon {
    font-size: 1.15rem;
    line-height: 1;
}

.page-geo .geo-answers__q {
    font-size: 1.8rem;
    margin: 1.5rem 0 0.75rem;
    scroll-margin-top: 1.25rem;
}

.page-geo .geo-answers__title + .geo-answers__q {
    margin-top: 0;
}

.page-geo .geo-answers__a {
    font-size: 1.25rem;
    margin: 0 0 1rem;
    line-height: 1.65;
}

.page-geo .geo-answers__a:last-child {
    margin-bottom: 0;
}

.page-geo .geo-answers__video {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: 0.5rem auto 1.25rem;
    aspect-ratio: 16 / 9;
    background: var(--color-bg-secondary, #f1f5f9);
    border-radius: var(--geo-control-radius, 8px);
    overflow: hidden;
}

.page-geo .geo-answers__video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* --- Wider than a phone: two field columns, a taller map, side-by-side
       actions. Nothing above this line assumes any of it. --- */
@media (min-width: 640px) {
    /* The hero's desktop size. It was written the other way round - a 3.25rem
       base with a max-width query shrinking it - which is the one thing the
       MOBILE-FIRST BOUNDARY forbids below its line (tests/css_convention.test.php).
       Same two sizes, same breakpoint; only the direction changed, so a
       viewport of exactly 640px now takes the larger size rather than the
       smaller one. */
    .geo-tagline-section {
        padding: 1.5rem 1rem;
        margin-bottom: 1rem;
    }

    .geo-tagline-text {
        font-size: 3.25rem;
        line-height: 1.1;
    }

    .page-geo .geo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-geo .geo-map {
        --geo-map-height: 420px;
    }

    .page-geo .geo-actions .action-button-card {
        flex-direction: row;
        justify-content: center;
    }

    .page-geo .geo-actions .action-button {
        width: auto;
        min-width: 14rem;
    }

    .page-geo .geo-download {
        width: fit-content;
        min-width: 14rem;
        max-width: 100%;
        margin-inline: auto;
        padding-inline: 2rem;
    }
}

/* Matches the other single-column indexes: the column narrows once the layout
   has room, so the reading measure does not grow with the viewport. */
@media (min-width: 1025px) {
    .page-geo .left-column {
        width: 75%;
    }
}