/* ==========================================================================
   Atlas of Wales — privacy interface

   Two pieces, both namespaced:

     .atlas-consent-*        the preferences dialog (assets/atlas-consent-ui.js).
                             Modal, but only ever opened deliberately from a
                             "Privacy choices" control.
     .atlas-privacy-nudge    the non-modal first-visit card
                             (assets/atlas-privacy-bootstrap.js). Informational.

   The blocking first-visit consent notice, and its two equal-weight choice
   buttons, were removed on 2026-07-28 with the opt-in model.

   Palette follows the canonical location-page tokens (deep green ground, warm
   gold accent, cream text) so the panel reads as part of the Atlas rather than
   a bolted-on consent banner. Tokens are declared locally rather than inherited,
   because this file must work on any page that later loads it.

   Deliberately cheap to paint: no backdrop blur, no large shadow, no continuous
   animation, no fixed heights. A privacy dialog that costs a frame on a weak
   phone is a worse privacy dialog.

   Namespace: .atlas-consent-*
   ========================================================================== */

.atlas-consent {
    --ac-night: #20372c;
    --ac-ink: #1a2c21;
    --ac-cream: #f8efd8;
    --ac-gold: #e3c47e;
    --ac-muted: rgba(250, 241, 218, 0.78);
    --ac-quiet: rgba(250, 241, 218, 0.56);
    --ac-faint: rgba(250, 241, 218, 0.12);
    --ac-border: rgba(228, 196, 122, 0.3);
}

/* ---- backdrop ----------------------------------------------------------
   A flat wash, not a blur. backdrop-filter forces the compositor to sample
   and blur everything behind the dialog every frame, which is exactly the
   cost a low-end phone cannot afford — and it buys nothing here, because the
   panel is opaque. */

.atlas-consent-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    background: rgba(12, 22, 17, 0.66);
}

.atlas-consent-backdrop[hidden] { display: none; }

/* ---- panel -------------------------------------------------------------
   No fixed height anywhere: the panel is sized by its content and capped by
   the viewport, so long or translated copy scrolls inside instead of
   overflowing. dvh first (mobile browser chrome), vh as the fallback. */

.atlas-consent-panel {
    width: min(540px, 100%);
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
    padding: 24px 24px 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    background: var(--ac-ink);
    border: 1px solid var(--ac-border);
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
    color: var(--ac-cream);
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.55;
    overscroll-behavior: contain;
    /* Native controls inside a dark panel: without this the unchecked checkbox
       paints as a white OS box and reads as a foreign element. Cheaper and more
       robust than replacing it with a custom control. */
    color-scheme: dark;
}

@media (min-width: 720px) {
    .atlas-consent-backdrop { align-items: center; padding: 24px; }
    .atlas-consent-panel {
        border-radius: 14px;
        border-bottom: 1px solid var(--ac-border);
        padding-bottom: 20px;
    }
}

/* ---- text -------------------------------------------------------------- */

.atlas-consent-panel__eyebrow {
    margin: 0 0 6px;
    color: var(--ac-gold);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.atlas-consent-panel__title {
    margin: 0 0 8px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.32rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.atlas-consent-panel__desc {
    margin: 0 0 16px;
    color: var(--ac-muted);
    font-size: 0.92rem;
}

.atlas-consent-panel__desc a,
.atlas-consent-link {
    color: var(--ac-gold);
    text-underline-offset: 3px;
}

/* ---- notes (browser signal, storage, no-provider) ----------------------- */

.atlas-consent-note {
    margin: 0 0 16px;
    padding: 11px 13px;
    background: rgba(250, 241, 218, 0.04);
    border-left: 2px solid var(--ac-border);
    border-radius: 0 6px 6px 0;
    color: var(--ac-muted);
    font-size: 0.86rem;
}

.atlas-consent-note[hidden] { display: none; }

/* A browser privacy signal is in force — stated, not alarmed. */
.atlas-consent-note--signal { border-left-color: var(--ac-gold); }

.atlas-consent-note--provider { margin: 14px 0 0; }

/* ---- views -------------------------------------------------------------- */

.atlas-consent-view[hidden] { display: none; }

/* ---- toggle rows ------------------------------------------------------- */

.atlas-consent-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid var(--ac-faint);
}

.atlas-consent-row:last-of-type { border-bottom: 1px solid var(--ac-faint); }

.atlas-consent-row__text { flex: 1 1 auto; min-width: 0; }

.atlas-consent-row__label {
    display: block;
    margin: 0 0 2px;
    font-size: 0.95rem;
    font-weight: 600;
}

.atlas-consent-row__hint {
    display: block;
    color: var(--ac-muted);
    font-size: 0.84rem;
}

/* A locked row: always-on necessary storage, or an unsupported category. */
.atlas-consent-row--locked .atlas-consent-row__label,
.atlas-consent-row--locked .atlas-consent-row__hint { color: var(--ac-quiet); }

/* Aligned to the label line, like the checkbox — not centred against a hint
   that may run to three lines. */
.atlas-consent-row__state {
    flex: 0 0 auto;
    align-self: flex-start;
    margin-top: 2px;
    color: var(--ac-quiet);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Native checkbox, restyled — no custom control, no JS-driven widget, nothing
   to animate. The touch target is the associated <label>, which spans the row's
   full label line: the box itself is only the visual affordance. */
.atlas-consent-toggle {
    flex: 0 0 auto;
    align-self: flex-start;
    width: 22px;
    height: 22px;
    margin: 2px 0 0;
    accent-color: var(--ac-gold);
    cursor: pointer;
}

.atlas-consent-row__label[for] {
    display: inline-block;
    min-height: 24px;
    padding: 2px 0;
    cursor: pointer;
}

.atlas-consent-toggle:disabled { cursor: not-allowed; opacity: 0.5; }

/* ---- buttons ----------------------------------------------------------- */

.atlas-consent-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.atlas-consent-btn {
    flex: 1 1 auto;
    min-height: 44px;
    padding: 11px 18px;
    border-radius: 8px;
    border: 1px solid var(--ac-border);
    background: transparent;
    color: var(--ac-cream);
    font: inherit;
    font-size: 0.92rem;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.atlas-consent-btn--primary {
    background: var(--ac-gold);
    border-color: var(--ac-gold);
    color: #22301f;
    font-weight: 600;
}

/* Tertiary text-style action (Cancel). */
.atlas-consent-btn--quiet {
    flex: 0 0 auto;
    min-height: 0;
    padding: 6px 0;
    border: 0;
    background: none;
    color: var(--ac-quiet);
    font-size: 0.88rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.atlas-consent-btn:hover { border-color: var(--ac-gold); }
.atlas-consent-btn--primary:hover { background: #efd5a2; }
.atlas-consent-btn--quiet:hover { color: var(--ac-cream); border: 0; }

.atlas-consent-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.atlas-consent-btn:disabled:hover { border-color: var(--ac-border); background: var(--ac-gold); }

/* Secondary row: the privacy-page link under the actions. */
.atlas-consent-actions--secondary {
    align-items: center;
    gap: 8px 16px;
    margin-top: 14px;
    font-size: 0.88rem;
}

/* ---- status (accessible announcement) ----------------------------------- */

.atlas-consent-status {
    margin: 12px 0 0;
    color: var(--ac-quiet);
    font-size: 0.84rem;
    min-height: 0;
}

.atlas-consent-status:empty { margin: 0; }

/* ---- focus ------------------------------------------------------------- */

.atlas-consent-btn:focus-visible,
.atlas-consent-toggle:focus-visible,
.atlas-consent-panel a:focus-visible {
    outline: 2px solid var(--ac-gold);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ---- motion ------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
    .atlas-consent-panel {
        animation: atlas-consent-rise 0.24s ease-out both;
    }
}

@keyframes atlas-consent-rise {
    from { transform: translateY(12px); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .atlas-consent-panel { animation: none; }
    .atlas-consent-btn { transition: none; }
}

/* ---- narrow screens ----------------------------------------------------
   Nothing here sets a height, so browser zoom and long translated strings
   simply make the panel scroll. */

@media (max-width: 480px) {
    .atlas-consent-panel { padding: 20px 16px 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
    .atlas-consent-panel__title { font-size: 1.24rem; }
    .atlas-consent-note { padding: 10px 12px; }
    .atlas-consent-row { gap: 12px; }

    /* A status chip beside a three-line hint reads as a collision at 360px.
       Give it its own line under the text instead. Rows with a control keep
       the control beside the label. */
    .atlas-consent-row--stated { flex-wrap: wrap; }
    .atlas-consent-row--stated .atlas-consent-row__text { flex: 1 1 100%; }
    /* On its own line it may wrap freely; only the beside-text layout needs
       nowrap to avoid an ugly two-line chip. */
    .atlas-consent-row--stated .atlas-consent-row__state { margin-top: 8px; white-space: normal; }
}

/* Very narrow (360px and below): the secondary row wraps rather than
   squeezing the touch targets. */
@media (max-width: 380px) {
    .atlas-consent-actions--secondary { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ==========================================================================
   Privacy navigation — the "Privacy choices" control and the utility bar

   Added when the foundation was wired into production. Two pieces only:

   1. .atlas-privacy-choices — the control that reopens the preferences panel.
      It is a real <button>, because it performs an action rather than going to
      a page. That is also why it needs styling at all: every footer here styles
      its links with an `a` selector (`.site-footer a`, `.foot__in > a`,
      `.policy-footer a`), which a <button> never matches. So the button is reset
      to nothing and then given its own footer's link colour — the values are
      copied from each footer's existing link rule, not invented, so the control
      reads as one more item in the row rather than a new kind of thing.

      Three context rules rather than `color: inherit`: the containers are
      deliberately quieter than their links (the town footer's comment records
      why — 0.38 failed AA), so inheriting the container would make this control
      the one illegible item in the row.

   2. .atlas-privacy-bar — for the six production pages with no link footer at
      all (landing, the three county Atlases, 404, My Places). One quiet centred
      line, not a new footer section.
   ========================================================================== */

.atlas-privacy-choices {
    /* A button carries chrome no footer wants; take it all off first. */
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    color: rgba(250, 241, 218, 0.5);
    cursor: pointer;
    transition: color 0.2s ease;
}

.atlas-privacy-choices:hover { color: rgba(250, 241, 218, 0.82); }

.atlas-privacy-choices:focus-visible {
    outline: 2px solid rgba(228, 196, 122, 0.6);
    outline-offset: 3px;
    border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .atlas-privacy-choices { transition: none; }
}

/* Per-footer link colour. Each value is the one already used by that footer's
   own link rule. */
.site-footer .atlas-privacy-choices { color: rgba(250, 241, 218, 0.5); }
.site-footer .atlas-privacy-choices:hover { color: rgba(250, 241, 218, 0.82); }

/* The town footer gives its links a 46px touch target; the control matches it
   so the row keeps one baseline and one tap height. */
.foot__in .atlas-privacy-choices {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    color: rgba(248, 239, 216, 0.74);
}
.foot__in .atlas-privacy-choices:hover { color: rgba(248, 239, 216, 0.88); }

.policy-footer .atlas-privacy-choices { color: var(--quiet, rgba(250, 241, 218, 0.56)); }
.policy-footer .atlas-privacy-choices:hover { color: rgba(250, 241, 218, 0.86); }

/* ---- utility bar (pages with no link footer) ---------------------------- */

.atlas-privacy-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 14px;
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
    background: #12241c;
    border-top: 1px solid rgba(250, 241, 218, 0.08);
    color: rgba(250, 241, 218, 0.56);
    font-family: inherit;
    font-size: 0.78rem;
    letter-spacing: 0.01em;
    text-align: center;
}

/* The same hairline dot separator the footers use, so the bar reads as the
   established pattern rather than a new one. */
.atlas-privacy-bar > * + *::before {
    content: "\00b7";
    margin-right: 14px;
    color: rgba(250, 241, 218, 0.24);
}

.atlas-privacy-bar a {
    color: rgba(250, 241, 218, 0.72);
    text-decoration: none;
    transition: color 0.2s ease;
}

.atlas-privacy-bar a:hover { color: rgba(250, 241, 218, 0.92); }

.atlas-privacy-bar a:focus-visible {
    outline: 2px solid rgba(228, 196, 122, 0.6);
    outline-offset: 3px;
    border-radius: 2px;
}

.atlas-privacy-bar .atlas-privacy-choices { color: rgba(250, 241, 218, 0.72); }
.atlas-privacy-bar .atlas-privacy-choices:hover { color: rgba(250, 241, 218, 0.92); }

@media (prefers-reduced-motion: reduce) {
    .atlas-privacy-bar a { transition: none; }
}

/* Sitting inside a centred content block rather than spanning the page (404,
   whose body is a centring row flex). It keeps the same items and separators
   and simply stops pretending to be a full-width band. */
.atlas-privacy-bar--inline {
    margin-top: 34px;
    padding: 14px 0 0;
    background: none;
    border-top: 1px solid rgba(250, 241, 218, 0.1);
}

/* ==========================================================================
   First-visit nudge — .atlas-privacy-nudge

   Built by assets/atlas-privacy-bootstrap.js. It replaces the blocking consent
   notice: statistics already run, so this only tells the visitor and points at
   the panel. Everything modal about the old notice is deliberately absent —
   there is no backdrop element to style, nothing sets `inert`, nothing locks
   `body` overflow, and nothing here traps focus.

   Placement rules it must obey on the map page:
     - bottom-LEFT, clear of the bottom-right feedback/soundscape cluster and the
       bottom-centre nav dock;
     - ABOVE the Mapbox logo, which also occupies the bottom-left corner
       (`.mapboxgl-ctrl-bottom-left`, ~29px tall). Measured at 1900x1000 the card
       overlapped it at `bottom: 16px`, so the offset clears the control's own
       height rather than guessing;
     - z-index below the map controls, so it can never sit over one;
     - the card is the only thing on screen: the map keeps every drag, wheel and
       tap outside these ~320px.

   Cheap to paint, like the panel: no backdrop blur, no continuous animation,
   no fixed height, no timer.
   ========================================================================== */

.atlas-privacy-nudge {
    position: fixed;
    left: max(16px, env(safe-area-inset-left, 0px));
    /* Clears the two things that own the bottom edge, measured rather than guessed:
       the Mapbox logo strip (~29px) and, on the map page, the bottom-centre nav dock
       (20px up, ~52px tall, so 72px from the bottom). 88px clears the taller with a
       gap. Deliberately VERTICAL clearance — the dock is centred, so its left edge
       moves with viewport width and no horizontal offset is safe at every size. */
    bottom: max(88px, calc(env(safe-area-inset-bottom, 0px) + 88px));
    z-index: 24;                       /* under .nav-dock (28) and .map-key (25) */
    box-sizing: border-box;
    width: min(320px, calc(100vw - 32px));
    padding: 14px 16px 12px;
    border: 1px solid rgba(228, 196, 122, 0.3);
    border-radius: 12px;
    background: #20372c;
    color: #f8efd8;
    font-family: var(--sans, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif);
    /* No box-shadow and no backdrop-filter, same as the panel: a card that costs
       a frame on a weak phone is a worse card. The border and the opaque ground
       are enough separation over the map. */
}

.atlas-privacy-nudge__title {
    margin: 0 0 4px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.atlas-privacy-nudge__body {
    margin: 0 0 10px;
    color: rgba(250, 241, 218, 0.78);
    font-size: 0.84rem;
    line-height: 1.45;
}

.atlas-privacy-nudge__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
    font-size: 0.82rem;
}

/* Both actions are quiet text controls. Neither is filled: there is no decision
   being weighted here, because there is no decision — the card is information. */
.atlas-privacy-nudge__link,
.atlas-privacy-nudge__dismiss {
    padding: 4px 0;
    border: 0;
    background: none;
    color: #e3c47e;
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.atlas-privacy-nudge__dismiss { color: rgba(250, 241, 218, 0.56); }

.atlas-privacy-nudge__link:hover { color: #f0d69c; }
.atlas-privacy-nudge__dismiss:hover { color: rgba(250, 241, 218, 0.86); }

.atlas-privacy-nudge__link:focus-visible,
.atlas-privacy-nudge__dismiss:focus-visible {
    outline: 2px solid #e3c47e;
    outline-offset: 3px;
    border-radius: 4px;
}

/* The entrance lives only here, so a reduced-motion visitor gets the card
   already in place rather than a shortened animation. */
@media (prefers-reduced-motion: no-preference) {
    .atlas-privacy-nudge {
        animation: atlas-privacy-nudge-in 0.24s ease-out both;
    }
}

@keyframes atlas-privacy-nudge-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* Mobile: the map's bottom edge belongs to the discovery sheet peek, so sit
   above it and span the width minus gutters. 44px touch targets. */
@media (max-width: 760px) {
    .atlas-privacy-nudge {
        left: max(12px, env(safe-area-inset-left, 0px));
        right: max(12px, env(safe-area-inset-right, 0px));
        /* Full width here, so it meets whatever else owns the bottom-right corner.
           Measured: the Mapbox attribution row is 44px tall on the map page, and the
           feedback trigger sits 18px up and is 46px tall on a guide page (its top
           edge 64px from the bottom). 76px clears the taller of the two with a 12px
           gap. Both are floating controls, so the card must sit above them, not on
           them. */
        bottom: max(76px, calc(env(safe-area-inset-bottom, 0px) + 76px));
        width: auto;
    }

    .atlas-privacy-nudge__actions { gap: 4px 18px; }

    .atlas-privacy-nudge__link,
    .atlas-privacy-nudge__dismiss {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* No `discovery-sheet-active` rule here any more. That class is set only by
   index.html, and the map page now places this card itself — as the upper half of
   the bottom-right stack above the soundscape invite, positioned from a measured
   offset. A rule here would out-specify that (0,2,1 beats 0,1,1) and silently
   stretch the card. See index.html's "Bottom-right notification stack" block. */