/* ==========================================================================
   THE MAP  (internal: Self-Locator)
   --------------------------------------------------------------------------
   No palette is invented here. Every colour reads a token from the site's
   :root in adios-global.css, with the sheet's own hex as the fallback so The
   Map still looks right if it is ever rendered somewhere that stylesheet has
   not loaded.

   Reused from the design system:
     tokens      --cream --sand --parchment --stone --terracotta --clay
                 --dusk --midnight --btn-gradient --ember
                 --serif-display --serif-body --sans
     components  .aag-section-label   -> .asl-eyebrow
                 .aag-section-title   -> .asl-question-title / .asl-headline
                 .aag-journey-card    -> .asl-option  (hover lift removed, the
                                         audience must not depend on hover)
                 .aag-lu-strip        -> .asl-body    (parchment, 3px terracotta
                                         left rule)
                 .aag-section-label   -> .asl-echo (tracking reduced, see note)
                 .aag-journey-card    -> .asl-card
                 .aag-btn-primary     -> .asl-btn
     motion      .care-slide from the Sanctuary player, opacity 0.5s ease

   Every selector carries two classes so the .aag-landing reset
   (`.aag-landing * { margin:0; padding:0 }`, specificity 0,1,0) cannot
   flatten it if The Map is ever placed on the landing page.

   Breakpoints 768 and 480, matching adios-global.css.
   ========================================================================== */

.asl {
    /* Overridden inline per render from the Fade setting. */
    --asl-fade: 500ms;

    --asl-cream:      var(--cream,      #FAF6EC);
    --asl-sand:       var(--sand,       #F5EFE0);
    --asl-parchment:  var(--parchment,  #EDE4CE);
    --asl-stone:      var(--stone,      #D6C9AF);
    --asl-terracotta: var(--terracotta, #C2623F);
    --asl-clay:       var(--clay,       #A3482A);
    --asl-ember:      var(--ember,      #8B3A20);
    --asl-dusk:       var(--dusk,       #4A3728);
    --asl-midnight:   var(--midnight,   #2C1F15);

    --asl-serif:  var(--serif-display, 'Playfair Display', Georgia, serif);
    --asl-body-f: var(--serif-body,    'Cormorant Garamond', Georgia, serif);
    --asl-sans:   var(--sans,          'Lato', 'Helvetica Neue', Arial, sans-serif);

    --asl-btn-bg: var(--btn-gradient, linear-gradient(135deg, #C76E48, #B85D3D));

    display: block;
    max-width: 760px;
    margin: 0 auto;
    padding: 0 1.5rem;
    box-sizing: border-box;
    font-family: var(--asl-sans);
    color: var(--asl-dusk);
}

.asl *,
.asl *::before,
.asl *::after { box-sizing: border-box; }

/* The stack the panels live in. Position context for the crossfade, which
   parks the outgoing panel on top of the incoming one for one beat. */
.asl .asl-panels {
    position: relative;
}

.asl .asl-panel {
    opacity: 1;
    transition: opacity var(--asl-fade) ease;
}

.asl .asl-panel[hidden] { display: none; }

/* Held by the script for the length of one crossfade only. */
.asl .asl-panel.is-fading { opacity: 0; }

.asl .asl-panel.is-leaving {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    pointer-events: none;
}

/* The panel area eases to the incoming panel's height so the swap reads as a page
   settling rather than a jump. Height is set and cleared by the script. */
.asl .asl-panels.is-measuring {
    overflow: hidden;
    transition: height var(--asl-fade) ease;
}

.asl .asl-panel:focus { outline: none; }

/* --------------------------------------------------------------------------
   QUESTION
   -------------------------------------------------------------------------- */

.asl .asl-eyebrow {
    font-family: var(--asl-sans);
    font-weight: 300;
    font-size: 0.72rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--asl-terracotta);
    margin: 0 0 1rem;
}

.asl .asl-question-title {
    font-family: var(--asl-serif);
    font-size: clamp(2rem, 3.5vw, 2.9rem);
    font-weight: 400;
    line-height: 1.15;
    color: var(--asl-midnight);
    margin: 0 0 1rem;
    padding: 0;
}

.asl .asl-lede {
    font-family: var(--asl-sans);
    font-weight: 300;
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--asl-dusk);
    opacity: 0.8;
    margin: 0 0 2.5rem;
}

/* The three quiet headings. .aag-section-label treatment: small Lato, wide
   tracking, uppercased by CSS so the source stays sentence case. Understated
   on purpose, they are section headers and not badges. No numbering, no
   severity signal, no icons, and all three read exactly alike. */
.asl .asl-group {
    margin-bottom: 2.4rem;
}

.asl .asl-group:last-child {
    margin-bottom: 0;
}

.asl .asl-group-label {
    font-family: var(--asl-sans);
    font-weight: 400;
    font-size: 0.75rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--asl-clay);
    margin: 0 0 1rem;
    padding: 0 0 0.7rem;
    border-bottom: 1px solid var(--asl-stone);
}

.asl .asl-options {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.9rem;
}

.asl .asl-option-item { margin: 0; padding: 0; }

/* .aag-journey-card, without the translateY hover. Deliberately large: the
   audience skews older and is often on a phone in a bad moment. */
.asl .asl-option {
    display: flex;
    align-items: center;
    min-height: 88px;
    padding: 1.5rem 1.6rem;
    background: var(--asl-cream);
    border: 1px solid var(--asl-parchment);
    border-left: 3px solid var(--asl-stone);
    border-radius: 3px;
    font-family: var(--asl-body-f);
    font-size: 1.3rem;
    line-height: 1.5;
    color: var(--asl-midnight);
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.asl .asl-option:hover,
.asl .asl-option:focus-visible {
    background: var(--asl-sand);
    border-color: var(--asl-parchment);
    border-left-color: var(--asl-terracotta);
    color: var(--asl-midnight);
    text-decoration: none;
}

.asl .asl-option:focus-visible {
    outline: 2px solid var(--asl-terracotta);
    outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   RESPONSE
   -------------------------------------------------------------------------- */

.asl .asl-headline {
    font-family: var(--asl-serif);
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 400;
    line-height: 1.25;
    color: var(--asl-midnight);
    margin: 0 0 1.8rem;
    padding: 0;
}

/* .aag-lu-strip treatment. */
.asl .asl-body {
    background: var(--asl-parchment);
    border-left: 3px solid var(--asl-terracotta);
    padding: 1.8rem 2rem;
    margin: 0 0 2rem;
    font-family: var(--asl-body-f);
    font-size: 1.35rem;
    line-height: 1.85;
    color: var(--asl-dusk);
}

/* The option they tapped. .aag-section-label treatment: small, terracotta,
   uppercased by CSS so the source stays sentence case.

   NOTE the tracking. The section-label treatment uses 0.3em, which is right for
   a two word label and close to unreadable across a seventy character sentence,
   especially for an audience that skews older. 0.14em keeps the treatment
   recognisably the same and keeps the sentence readable. */
.asl .asl-echo {
    font-family: var(--asl-sans);
    font-weight: 400;
    font-size: 0.76rem;
    letter-spacing: 0.14em;
    line-height: 1.7;
    text-transform: uppercase;
    color: var(--asl-terracotta);
    margin: 0 0 1rem;
    padding: 0 0 0.9rem;
    border-bottom: 1px solid var(--asl-stone);
}

/* Continues the body. No bold, no bullets, no heading styling, same ink. */
.asl .asl-why-label {
    font-family: var(--asl-body-f);
    font-size: 1.35rem;
    line-height: 1.85;
    color: var(--asl-dusk);
    margin: 0;
    padding: 0;
}

.asl .asl-why {
    font-family: var(--asl-body-f);
    font-size: 1.35rem;
    line-height: 1.85;
    color: var(--asl-dusk);
    margin: 0 0 2.5rem;
    padding: 0;
}

/* Destination card. Shows what the button opens, before it is clicked. */
.asl .asl-card {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    background: var(--asl-cream);
    border: 1px solid var(--asl-parchment);
    border-left: 3px solid var(--asl-stone);
    border-radius: 3px;
    padding: 1.1rem 1.3rem;
    margin: 0 0 1.6rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.asl .asl-card:hover {
    background: var(--asl-sand);
    border-left-color: var(--asl-terracotta);
    text-decoration: none;
    color: inherit;
}

.asl .asl-card-thumb {
    flex: 0 0 76px;
    width: 76px;
    line-height: 0;
}

.asl .asl-card-thumb img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
    border-radius: 2px;
}

.asl .asl-card-text { display: flex; flex-direction: column; gap: 0.3rem; }

.asl .asl-card-title {
    font-family: var(--asl-serif);
    font-size: 1.1rem;
    line-height: 1.35;
    color: var(--asl-midnight);
}

.asl .asl-card-line {
    font-family: var(--asl-sans);
    font-weight: 300;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--asl-dusk);
    opacity: 0.8;
}

.asl .asl-action { margin: 0 0 2.5rem; padding: 0; }

/* .aag-btn-primary. */
.asl .asl-btn {
    display: inline-block;
    background: var(--asl-btn-bg);
    color: var(--asl-cream);
    font-family: var(--asl-sans);
    font-weight: 400;
    font-size: 0.82rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    line-height: 1.4;
    padding: 20px 40px;
    border-radius: 4px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(181, 96, 63, 0.28);
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

.asl .asl-btn:hover,
.asl .asl-btn:focus-visible {
    background: var(--asl-ember);
    box-shadow: 0 12px 28px rgba(181, 96, 63, 0.35);
    color: var(--asl-cream);
    text-decoration: none;
}

.asl .asl-btn:focus-visible {
    outline: 2px solid var(--asl-dusk);
    outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   THE SECOND OFFER  (entries 1 and 2)
   Subordinate to the course card above it, on purpose. No card chrome, just a
   hairline; a smaller thumbnail; the outlined button treatment rather than the
   filled one. It should read as an aside, not as a competing offer, so the
   course card and its terracotta button stay the dominant thing on the screen.
   Palette is the existing one, nothing new.
   -------------------------------------------------------------------------- */

.asl .asl-secondary {
    border-top: 1px solid var(--asl-stone);
    padding-top: 1.8rem;
    margin: 0 0 2.5rem;
}

.asl .asl-secondary-lead {
    font-family: var(--asl-sans);
    font-weight: 300;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--asl-dusk);
    opacity: 0.8;
    margin: 0 0 1.1rem;
    padding: 0;
}

/* No border, no fill. The hairline above is the only separation it gets. */
.asl .asl-secondary-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 1.1rem;
    text-decoration: none;
    color: inherit;
}

.asl .asl-secondary-card:hover { text-decoration: none; color: inherit; }

.asl .asl-secondary-thumb {
    flex: 0 0 56px;
    width: 56px;
    line-height: 0;
}

.asl .asl-secondary-thumb img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
    border-radius: 2px;
}

.asl .asl-secondary-text { display: flex; flex-direction: column; gap: 0.25rem; }

.asl .asl-secondary-title {
    font-family: var(--asl-sans);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.35;
    color: var(--asl-midnight);
}

.asl .asl-secondary-line {
    font-family: var(--asl-sans);
    font-weight: 300;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--asl-dusk);
    opacity: 0.8;
}

.asl .asl-secondary-action { margin: 0; padding: 0; }

/* The outlined treatment, the same one the form's submit uses. Quiet next to
   the filled terracotta button above it. */
.asl .asl-secondary-btn {
    display: inline-block;
    font-family: var(--asl-sans);
    font-weight: 400;
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--asl-clay);
    background: transparent;
    border: 1px solid var(--asl-stone);
    border-radius: 4px;
    padding: 13px 24px;
    min-height: 46px;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.asl .asl-secondary-btn:hover,
.asl .asl-secondary-btn:focus-visible {
    background: var(--asl-clay);
    border-color: var(--asl-clay);
    color: var(--asl-cream);
    text-decoration: none;
}

.asl .asl-secondary-btn:focus-visible {
    outline: 2px solid var(--asl-terracotta);
    outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   EMAIL BLOCK
   Quiet on purpose, and always below the button.
   -------------------------------------------------------------------------- */

.asl .asl-capture {
    border-top: 1px solid var(--asl-stone);
    padding-top: 2rem;
    margin-bottom: 2rem;
}

.asl .asl-capture-intro {
    font-family: var(--asl-sans);
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--asl-dusk);
    opacity: 0.85;
    margin: 0 0 1.2rem;
}

.asl .asl-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.asl .asl-field { display: flex; flex-direction: column; }

.asl .asl-label {
    font-family: var(--asl-sans);
    font-weight: 400;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--asl-clay);
    margin-bottom: 0.5rem;
}

.asl .asl-input {
    font-family: var(--asl-sans);
    font-weight: 300;
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--asl-midnight);
    background: var(--asl-cream);
    border: 1px solid var(--asl-stone);
    border-radius: 3px;
    padding: 14px 16px;
    min-height: 52px;
    width: 100%;
}

.asl .asl-input:focus {
    outline: 2px solid var(--asl-terracotta);
    outline-offset: 1px;
    border-color: var(--asl-terracotta);
}

.asl .asl-submit {
    font-family: var(--asl-sans);
    font-weight: 400;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--asl-clay);
    background: transparent;
    border: 1px solid var(--asl-clay);
    border-radius: 4px;
    padding: 16px 32px;
    min-height: 52px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.asl .asl-submit:hover,
.asl .asl-submit:focus-visible {
    background: var(--asl-clay);
    color: var(--asl-cream);
}

.asl .asl-submit:focus-visible {
    outline: 2px solid var(--asl-terracotta);
    outline-offset: 3px;
}

.asl .asl-submit[disabled] { opacity: 0.55; cursor: default; }

.asl .asl-consent {
    font-family: var(--asl-sans);
    font-weight: 300;
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--asl-dusk);
    opacity: 0.65;
    margin: 1rem 0 0;
}

.asl .asl-form-message {
    font-family: var(--asl-sans);
    font-weight: 300;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--asl-clay);
    margin: 0.8rem 0 0;
    min-height: 1px;
}

/* --------------------------------------------------------------------------
   BACK
   Always visible, never worded or styled as undoing a mistake.
   -------------------------------------------------------------------------- */

.asl .asl-back-wrap { margin: 0; padding: 0; }

.asl .asl-back {
    display: inline-block;
    font-family: var(--asl-sans);
    font-weight: 300;
    font-size: 0.88rem;
    letter-spacing: 0.06em;
    color: var(--asl-dusk);
    opacity: 0.75;
    text-decoration: none;
    border-bottom: 1px solid var(--asl-stone);
    padding: 12px 0 3px;
    transition: color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.asl .asl-back:hover,
.asl .asl-back:focus-visible {
    opacity: 1;
    color: var(--asl-terracotta);
    border-color: var(--asl-terracotta);
    text-decoration: none;
}

.asl .asl-back:focus-visible {
    outline: 2px solid var(--asl-terracotta);
    outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   LIVE REGION, and the visually hidden note on the file buttons
   -------------------------------------------------------------------------- */

.asl .asl-announce,
.asl .asl-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   BREAKPOINTS
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .asl { padding: 0 1.2rem; }
    .asl .asl-why-label, .asl .asl-why { font-size: 1.25rem; }
    .asl .asl-card { gap: 1rem; padding: 1rem; }
    .asl .asl-card-thumb { flex-basis: 62px; width: 62px; }
    .asl .asl-secondary-thumb { flex-basis: 48px; width: 48px; }
    .asl .asl-secondary-btn { display: block; text-align: center; }
    .asl .asl-fields { grid-template-columns: 1fr; }
    .asl .asl-body { padding: 1.5rem 1.4rem; font-size: 1.25rem; }
    .asl .asl-submit { width: 100%; }
    .asl .asl-btn { display: block; text-align: center; }
}

@media (max-width: 480px) {
    .asl .asl-option { padding: 1.3rem 1.2rem; font-size: 1.2rem; }
    .asl .asl-lede { margin-bottom: 2rem; }
    .asl .asl-group { margin-bottom: 2rem; }
    .asl .asl-echo { letter-spacing: 0.1em; font-size: 0.72rem; }
    .asl .asl-group-label { letter-spacing: 0.22em; }
}

/* --------------------------------------------------------------------------
   REDUCED MOTION
   Matches the player and the dashboard: the swap still happens, instantly.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .asl .asl-panel,
    .asl .asl-panels.is-measuring,
    .asl .asl-option,
    .asl .asl-btn,
    .asl .asl-back,
    .asl .asl-secondary-btn,
    .asl .asl-submit { transition: none; }
}