/* ==========================================================================
   Atlas of Wales — optional map tour

   ONE card component, used by both the invitation and every step, in ONE
   docked position per breakpoint. Only the halo moves.

   Layout of every card, top to bottom:
       header   MAP TOUR label  +  progress ("3 of 6")
       heading
       body     one or two short sentences
       example  optional compact teaching visual
       footer   Back  ·  Next/Done (emphasised)  ·  Skip tour (quiet, right)

   COST RULES, inherited from assets/atlas-consent.css: no backdrop-filter, no
   box-shadow, no continuous animation, no fixed heights. A card that costs a
   frame on a weak phone is a worse card.

   STACKING (measured against the real map, not assumed):
       20-31  ordinary map controls          30  .atlas-panel (stacking context
       24     invitation                         AND fixed-position containing
       34/35/36  dim / halo / card              block via backdrop-filter)
       44     .wm-field-sheet
       900/950 feedback   970 saved places   1200 consent dialog
   The tour therefore occupies 34-36: above every ordinary control and above
   .atlas-panel, BELOW .wm-field-sheet and every dialog above it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared shell — the invitation and the coach mark are the same component.
   Both are positioned by the same dock logic in map-tour.js, so neither can
   drift to "below search on one step, beside the panel on the next".
   -------------------------------------------------------------------------- */
.atlas-map-tour-card,
.atlas-map-tour-invite {
    position: fixed;
    box-sizing: border-box;
    width: 320px;
    padding: 13px 15px 11px;
    border: 1px solid rgba(228, 196, 122, 0.30);
    border-radius: 12px;
    background: #20372c;
    color: #f8efd8;
    font-family: var(--sans, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif);
}

.atlas-map-tour-card { z-index: 36; }
.atlas-map-tour-invite { z-index: 24; }   /* passive notice: never over a control */

.atlas-map-tour-card:focus { outline: none; }
.atlas-map-tour-card:focus-visible {
    outline: 2px solid rgba(243, 221, 162, 0.7);
    outline-offset: 3px;
}

/* Two states in which the card is in the DOM but not on screen. Both are
   deliberate, and both hold the notice slot (map-soundscape.js decides by DOM
   presence):
     .is-pending    created at boot, before the gates have been evaluated
     .is-dismissed  the visitor has acted; removal waits until their click or
                    gesture has finished — see the two-stage dismissal note in
                    map-tour.js
   display:none in both, so a card that is not on screen is also out of the
   accessibility tree and out of the tab order. */
.atlas-map-tour-invite.is-pending,
.atlas-map-tour-invite.is-dismissed { display: none; }

/* ---- header --------------------------------------------------------------
   One row: the component's own name, and where the visitor is in it. The
   progress lives here on every card, so its position never shifts. */
.atlas-map-tour-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px;
}

.atlas-map-tour-card__eyebrow,
.atlas-map-tour-card__progress {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    white-space: nowrap;
}

.atlas-map-tour-card__eyebrow { color: rgba(232, 198, 138, 0.62); }
.atlas-map-tour-card__progress { color: rgba(232, 198, 138, 0.82); }

/* ---- content ------------------------------------------------------------- */
.atlas-map-tour-card__title {
    margin: 0 0 4px;
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.005em;
}

.atlas-map-tour-card__body {
    margin: 0;
    font-size: 0.845rem;
    line-height: 1.42;
    color: rgba(248, 239, 216, 0.84);
}

/* ---- teaching visuals ----------------------------------------------------
   Compact, and inside the card, so the concept survives a step whose live
   target could not be resolved. */
.atlas-map-tour-card__example {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 9px;
    padding: 7px 9px;
    border: 1px solid rgba(228, 196, 122, 0.16);
    border-radius: 8px;
    background: rgba(10, 24, 19, 0.42);
    font-size: 0.79rem;
    color: rgba(248, 239, 216, 0.78);
}

/* Drawn to match the real count badge on the map: a small rounded square with
   a cream numeral, subordinate to the glyph it sits beside. */
.atlas-map-tour-badge {
    display: inline-grid;
    place-items: center;
    min-width: 19px;
    height: 17px;
    flex: 0 0 auto;
    padding: 0 4px;
    border: 1px solid rgba(228, 196, 122, 0.34);
    border-radius: 4px;
    background: rgba(3, 10, 11, 0.86);
    color: rgba(242, 223, 190, 0.94);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

/* The soundscape step carries the same Pixabay credit the standalone invitation
   does. Small and quiet, but never so faint it stops being readable — it is an
   attribution, not decoration. */
.atlas-map-tour-card__credit {
    margin: 8px 0 0;
    font-size: 0.72rem;
    line-height: 1.35;
    color: rgba(248, 239, 216, 0.62);
}

/* Icon key for the mobile "More map controls" step. Two columns now that
   Soundscape has its own step. Columns rather than stacked rows: stacked rows
   made this the tallest card in the set (235px at 394 / 234px at 360), which
   pushed it past the practical mobile budget and ate the map. Icon over label
   keeps each explanation in about 40px. */
.atlas-map-tour-card__keys {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3px 6px;
    align-items: start;
    margin-top: 8px;
    padding: 7px 8px;
    border: 1px solid rgba(228, 196, 122, 0.16);
    border-radius: 8px;
    background: rgba(10, 24, 19, 0.42);
    text-align: center;
}

.atlas-map-tour-card__key-icon {
    display: grid;
    place-items: center;
    width: 100%;
    height: 19px;
    color: rgba(243, 221, 162, 0.88);
}

.atlas-map-tour-card__key-icon svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Each label sits on the second implicit row, under its own icon. */
.atlas-map-tour-card__key-label {
    grid-row: 2;
    font-size: 0.72rem;
    line-height: 1.2;
    color: rgba(248, 239, 216, 0.78);
}

/* ---- footer --------------------------------------------------------------
   Back and the primary action group left; Skip tour sits apart on the right so
   it is never mistaken for the way forward. */
/* Wraps as whole buttons, never mid-label. The soundscape step carries four
   actions (Back / Play soundscape / Not now / Skip tour), which overflows 320px —
   without this they broke into 'Play / soundscape', 'Not / now', 'Skip / tour'. */
.atlas-map-tour-card__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin-top: 11px;
}

.atlas-map-tour-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    margin: 0;
    padding: 0 9px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: none;
    font: inherit;
    font-size: 0.83rem;
    white-space: nowrap;
    color: rgba(250, 241, 218, 0.66);
    cursor: pointer;
    transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.atlas-map-tour-card__btn:hover { color: rgba(250, 241, 218, 0.92); }

.atlas-map-tour-card__btn:focus-visible {
    outline: 2px solid rgba(243, 221, 162, 0.7);
    outline-offset: 2px;
}

/* The one emphasised action. A quiet filled pill, not a bright button — it has
   to read as the way forward without becoming the loudest thing on the map. */
.atlas-map-tour-card__btn--primary {
    padding: 0 15px;
    border-color: rgba(233, 199, 120, 0.36);
    background: rgba(233, 199, 120, 0.15);
    color: #f3dda2;
    font-weight: 600;
}

.atlas-map-tour-card__btn--primary:hover {
    background: rgba(233, 199, 120, 0.24);
    color: #fbe9bd;
}

.atlas-map-tour-card__btn--quiet {
    margin-left: auto;
    padding-right: 0;
    color: rgba(250, 241, 218, 0.48);
}

.atlas-map-tour-card__btn[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Dim — approximately 10%, not 28%. The halo carries the focus and the map has
   to stay legible underneath. pointer-events:none is load-bearing: it is what
   keeps the map pannable and every control clickable with no cut-out mask, no
   hole geometry and no hit-testing cost.
   -------------------------------------------------------------------------- */
.atlas-map-tour-dim {
    position: fixed;
    inset: 0;
    z-index: 34;
    pointer-events: none;
    background: rgba(3, 10, 11, 0.10);
}

/* Below 480px the card and halo already occupy most of the viewport, so a
   full-screen wash separates nothing while still costing a composited layer on
   the weakest hardware in the matrix. */
@media (max-width: 479px) {
    .atlas-map-tour-dim { display: none; }
}

/* --------------------------------------------------------------------------
   Halo — the only thing that moves between steps.
   Outline rather than box-shadow: it follows border-radius, costs no blur, and
   cannot bleed over neighbouring controls.
   -------------------------------------------------------------------------- */
.atlas-map-tour-halo {
    position: fixed;
    z-index: 35;
    pointer-events: none;
    border-radius: 12px;
    outline: 2px solid rgba(233, 199, 120, 0.55);
    outline-offset: 4px;
}

.atlas-map-tour-halo[hidden] { display: none; }

/* The restrained settle transition, used only when a visitor-selected county
   has settled and the map has gone idle. Everything else changes instantly. */
@media (prefers-reduced-motion: no-preference) {
    .atlas-map-tour-halo { transition: left 0.4s ease, top 0.4s ease, width 0.4s ease, height 0.4s ease; }
    .atlas-map-tour-card.is-settling { animation: atlas-map-tour-settle 0.4s ease both; }
    .atlas-map-tour-invite { animation: atlas-map-tour-in 0.22s ease-out both; }
}

@keyframes atlas-map-tour-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

@keyframes atlas-map-tour-settle {
    from { opacity: 0.35; }
    to   { opacity: 1; }
}

/* --------------------------------------------------------------------------
   The one visually-hidden live region. Announcements are short and never
   duplicate a card's own content — a focus move already announces that.
   -------------------------------------------------------------------------- */
.atlas-map-tour-live {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Phone: one bottom-docked card, full width inside 16px gutters. Never at the
   top of the viewport, never relocated between steps. Sizing is trimmed here
   so the tallest card (the numbered-marker step, which carries an example)
   stays close to 170px and leaves the map visible above it.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
    .atlas-map-tour-card,
    .atlas-map-tour-invite {
        left: max(16px, env(safe-area-inset-left, 0px));
        right: max(16px, env(safe-area-inset-right, 0px));
        width: auto;
        padding: 10px 12px 8px;
    }

    .atlas-map-tour-card__head { margin-bottom: 4px; }
    .atlas-map-tour-card__title { font-size: 0.92rem; margin-bottom: 3px; }
    .atlas-map-tour-card__body { font-size: 0.8rem; line-height: 1.34; }

    .atlas-map-tour-card__example {
        margin-top: 6px;
        padding: 5px 8px;
        font-size: 0.755rem;
    }

    .atlas-map-tour-card__keys {
        margin-top: 6px;
        padding: 5px 6px;
        gap: 2px 5px;
    }

    .atlas-map-tour-card__key-icon { height: 17px; }
    .atlas-map-tour-card__key-icon svg { width: 14px; height: 14px; }
    .atlas-map-tour-card__key-label { font-size: 0.685rem; }

    .atlas-map-tour-card__foot { margin-top: 6px; gap: 5px; }

    /* Comfortable on touch without letting the row grow the card. */
    .atlas-map-tour-card__btn { min-height: 36px; font-size: 0.8rem; }
}

/* Narrowest supported phone: the example row must stay legible, so the body
   loses a fraction rather than the visual. */
@media (max-width: 380px) {
    .atlas-map-tour-card__body { font-size: 0.8rem; }
    .atlas-map-tour-card__btn { padding: 0 7px; font-size: 0.8rem; }
    .atlas-map-tour-card__btn--primary { padding: 0 12px; }
}