/* ==========================================================================
   LUCY, the guided introduction (templates/partials/_lucy_guide.html)

   Two pieces. The LAUNCHER is Lucy's face in the bottom-right corner (the
   corner Ask a Local used to hold on the homepage; the pill is hidden here
   and Lucy's last step offers Ask a Local instead) with the one-time hello
   bubble above it. The LAYER is the walk-through itself: a veil over the
   page with a hole cut around the element being explained, a dotted ring
   on that hole, a dotted line drawn from Lucy's speech bubble to it, and
   the bubble with the step's copy, a segmented progress bar and the
   controls. On a phone the bubble docks to the bottom of the screen and
   Lucy peeks over its top edge.

   The card is built to the site's own design system (design_system.css):
   an ivory panel with a real edge and a gold crown, the eyebrow-and-title
   pairing every section of the site uses, the coin medallion from the
   tile vocabulary, and one gold accent. It should read as the same hand
   that made the homepage, not as a browser dialog sitting on top of it.

   Colours are the tokens from base.html. Nothing here introduces a colour
   of its own except Lucy's skin and hair, which live in the SVG.

   1. Launcher   3. Veil, ring, line   5. Progress and controls
   2. Layer      4. Card               6. Lucy's poses   7. Phone, motion
   ========================================================================== */

/* This stylesheet loads on the homepage only, so this reaches the pill
   nowhere else. The button stays in the DOM (display, not removal): the
   script beside it in base.html is what opens the composer for every
   data-ask-local link on the page, and it bails out if the button is gone. */
#askLocalFab { display: none !important; }

/* The card's own vocabulary, so a value used in four places is stated once. */
.lg {
    --lg-panel: #fffdf7;              /* warm ivory, not the flat white of a dialog */
    --lg-panel-2: #fbf6e9;            /* the head, a shade deeper than the body */
    --lg-edge: rgba(29, 29, 31, .07);
    --lg-gold: var(--gold, #c9a227);
    --lg-gold-ink: var(--gold-ink, #8a6b12);
    --lg-tint: rgba(201, 162, 39, .09);
    --lg-tint-2: rgba(201, 162, 39, .16);
    --lg-spring: cubic-bezier(.22, 1, .36, 1);
    /* The panel edge: hairline, inner top highlight, and a long soft cast.
       The same recipe as --shadow-tile, carried further because this card
       floats over a dimmed page rather than sitting on one. */
    --lg-lift:
        0 0 0 1px var(--lg-edge),
        0 1px 0 rgba(255, 255, 255, .9) inset,
        0 2px 6px -2px rgba(20, 20, 25, .12),
        0 18px 40px -16px rgba(20, 20, 25, .32),
        0 40px 80px -40px rgba(20, 20, 25, .4);
}

/* 1. LAUNCHER ============================================================ */
.lg-launcher {
    position: fixed;
    right: max(18px, env(safe-area-inset-right, 0px));
    bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    z-index: 1150;
    display: block;
}
.lg-launcher[hidden] { display: none; }

/* Above 1400px, Back to top appears in this corner (responsive.css hides
   it below that). The two stack: Back to top keeps its place, Lucy sits
   directly above it, the way Ask a Local did. */
@media (min-width: 1401px) {
    .lg-launcher { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

.lg-avatar {
    position: relative;
    display: block;
    width: 54px;
    height: 54px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    /* A gold rim, a white keyline to lift it off any photograph, and a
       cast shadow with a gold bias so it belongs to the brand. */
    box-shadow: 0 0 0 1.5px var(--lg-gold),
                0 0 0 4px rgba(255, 255, 255, .92),
                0 6px 18px rgba(138, 107, 18, .22),
                0 12px 30px -8px rgba(10, 10, 11, .26);
    transition: transform 260ms var(--lg-spring), box-shadow 260ms ease;
}
.lg-avatar:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 0 0 1.5px var(--lg-gold),
                0 0 0 4px rgba(255, 255, 255, .92),
                0 10px 26px rgba(138, 107, 18, .3),
                0 20px 44px -10px rgba(10, 10, 11, .3);
}
.lg-avatar:active { transform: scale(.96); }
.lg-avatar:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }

/* A slow gold halo, so a visitor who has not noticed her does, once,
   without anything hopping around the corner of the page. */
.lg-avatar::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1.5px solid var(--lg-gold);
    opacity: 0;
    animation: lgAvatarPulse 5.5s ease-out infinite;
    pointer-events: none;
}
@keyframes lgAvatarPulse {
    0%       { transform: scale(1);    opacity: .5; }
    26%, 100% { transform: scale(1.5); opacity: 0; }
}
.lg-launcher.has-hello .lg-avatar::before { animation: none; }

/* The face is the same drawing as the big Lucy, cropped to her head. */
.lg-avatar-face {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: radial-gradient(circle at 50% 34%, #fffaf0 0%, var(--surface-warm, #fbf3d6) 100%);
}
.lg-avatar-face svg { display: block; width: 100%; height: 100%; }

/* A tiny waving hand on the rim: the one hint that she is here to help. */
.lg-avatar-badge {
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: var(--gradient-gold, linear-gradient(180deg, #e9cb62 0%, #c9a227 100%));
    color: #1d1d1f;
    font-size: .58rem;
    box-shadow: 0 0 0 2.5px #fff, 0 2px 5px rgba(138, 107, 18, .3);
    transform-origin: 70% 90%;
    animation: lgBadgeWave 6s ease-in-out infinite;
}
@keyframes lgBadgeWave {
    0%, 86%, 100% { transform: rotate(0); }
    89% { transform: rotate(-18deg); }
    92% { transform: rotate(14deg); }
    95% { transform: rotate(-12deg); }
    98% { transform: rotate(8deg); }
}

/* Hover label, from the button's own accessible name, to the left of the
   face since the face sits at the right edge. */
.lg-avatar::after {
    content: attr(aria-label);
    position: absolute;
    right: calc(100% + 13px);
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(20, 20, 24, .94);
    color: #fff;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: -.005em;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(10, 10, 11, .3);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease, transform 240ms var(--lg-spring);
}
.lg-avatar:hover::after,
.lg-avatar:focus-visible::after { opacity: 1; transform: translateY(-50%) translateX(0); }
/* Never both the hover label and the bubble. */
.lg-launcher.has-hello .lg-avatar::after { display: none; }

/* The hello bubble, above the face, hanging from the right edge. */
.lg-hello {
    position: absolute;
    right: 0;
    bottom: calc(100% + 14px);
    width: min(290px, calc(100vw - 32px));
    padding: 16px 17px 15px;
    border-radius: 20px;
    background: var(--lg-panel);
    color: var(--ink, #1d1d1f);
    box-shadow: var(--lg-lift);
    transform-origin: calc(100% - 18px) 100%;
    animation: lgPop 520ms var(--lg-spring) both;
    overflow: hidden;
}
.lg-hello[hidden] { display: none; }
/* The gold crown: the one mark that says this is ours. */
.lg-hello::before,
.lg-bubble::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg,
        rgba(201, 162, 39, 0) 0%, var(--gold-2, #e3c05a) 22%,
        var(--lg-gold) 50%, var(--gold-2, #e3c05a) 78%, rgba(201, 162, 39, 0) 100%);
}
.lg-hello-title {
    margin: 0 0 4px;
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--ink, #1d1d1f);
}
.lg-hello-text {
    margin: 0 0 13px;
    font-size: .845rem;
    line-height: 1.5;
    color: var(--ink-2, #6e6e73);
    text-wrap: pretty;
}
.lg-hello-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.lg-hello-tail {
    position: absolute;
    right: 18px;
    bottom: -6px;
    width: 13px;
    height: 13px;
    border-radius: 3px;
    background: var(--lg-panel);
    box-shadow: 1px 1px 0 var(--lg-edge);
    transform: rotate(45deg);
}
@keyframes lgPop {
    from { opacity: 0; transform: translateY(10px) scale(.93); }
    to   { opacity: 1; transform: none; }
}

/* The goodbye, same spot, a pill that lets itself out. */
.lg-bye {
    position: absolute;
    right: 0;
    bottom: calc(100% + 12px);
    margin: 0;
    padding: 9px 15px;
    border-radius: 999px;
    background: rgba(20, 20, 24, .95);
    color: #fff;
    font-size: .79rem;
    font-weight: 600;
    letter-spacing: -.005em;
    white-space: nowrap;
    box-shadow: 0 8px 22px rgba(10, 10, 11, .3);
    animation: lgPop 460ms var(--lg-spring) both;
}
.lg-bye[hidden] { display: none; }

/* The cookie banner spans the bottom of a small screen; yield to it, the
   same way Ask a Local does in base.html. */
@media (max-width: 600px) {
    body:has(#cookiePopup.show) .lg-launcher { opacity: 0; pointer-events: none; }
}
/* A phone bottom bar owns the strip below (the controller adds is-lifted
   when one is on the page, mirroring Ask a Local). */
@media (max-width: 767px) {
    .lg-launcher.is-lifted { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}

/* 2. LAYER =============================================================== */
/* Above the fixed header (which sits at the top of the z range) so the
   veil can dim it and cut the hole around the language button. Later in
   the document than the header, so equal z-index resolves in its favour. */
.lg-layer {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    pointer-events: none;
    opacity: 0;
    transition: opacity 300ms ease;
}
.lg-layer[hidden] { display: none; }
.lg-layer.is-open { opacity: 1; }

/* Catches every click that is not on the card, so the page underneath
   cannot be poked through the veil. Transparent: the dimming is the
   veil's own painted path, with its hole. */
.lg-backdrop {
    position: absolute;
    inset: 0;
    pointer-events: auto;
}

/* 3. VEIL, RING, LINE ==================================================== */
.lg-veil {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}
/* Warm ink rather than flat black: the site is gold and cream, and a cold
   grey veil over it reads as a legal interstitial. Slightly deeper than
   before, which is what makes the lit target read as lit. */
.lg-veil-fill { fill: rgba(16, 13, 8, .7); }

/* The ring around the lit thing. Marching dashes read as a selection
   marquee, a crop tool, something being cut out; this is meant to read as
   a light being held on the page. So: a clean gold edge with a soft glow,
   and one slow breath, which is the difference between "selected" and
   "look here". */
.lg-ring {
    stroke: var(--gold, #c9a227);
    stroke-width: 2;
    filter: drop-shadow(0 0 5px rgba(201, 162, 39, .55))
            drop-shadow(0 0 14px rgba(201, 162, 39, .28));
    animation: lgRingBreath 3s ease-in-out infinite;
}
@keyframes lgRingBreath {
    0%, 100% { opacity: .95; stroke-width: 2; }
    50%      { opacity: .7;  stroke-width: 1.6; }
}

/* The thread from Lucy's bubble to the lit thing.
   ONE leaning arc, not a two-axis elbow: the geometry is in drawLine(),
   and it is meant to read as a line a person drew to something, which is
   what an illustrated character calls for. Two strokes make the taper.
   The body carries the fade gradient (faint as it leaves the bubble, full
   weight across the middle); the tip is a finer stroke that survives to
   the point, so the thread narrows into the target instead of stopping
   with a blunt round end. It is drawn once and then simply stays. */
.lg-line {
    color: var(--gold, #c9a227);
    stroke: url(#lgLineFade);
    stroke-width: 2.6;
    stroke-linecap: round;
    filter: drop-shadow(0 0 5px rgba(201, 162, 39, .38));
}
.lg-line-tip {
    color: var(--gold, #c9a227);
    stroke: var(--gold, #c9a227);
    stroke-width: 1;
    stroke-linecap: round;
    opacity: .85;
}

.lg-line-reveal {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    stroke-linecap: round;
    transition: stroke-dashoffset 640ms cubic-bezier(.22, 1, .36, 1);
}
.lg-veil.is-drawn .lg-line-reveal { stroke-dashoffset: 0; }
.lg-veil.is-instant .lg-line-reveal { transition: none; }

.lg-line-dot,
.lg-line-halo {
    fill: var(--gold, #c9a227);
    opacity: 0;
    transition: opacity 240ms ease;
}
.lg-veil.is-drawn .lg-line-dot { opacity: 1; transition-delay: 520ms; }
.lg-veil.is-drawn .lg-line-halo {
    opacity: .28;
    transition-delay: 520ms;
    transform-box: fill-box;
    transform-origin: center;
    animation: lgHalo 1.8s ease-out infinite;
}
.lg-veil.is-instant .lg-line-dot,
.lg-veil.is-instant .lg-line-halo { transition: none; }
@keyframes lgHalo {
    0%   { transform: scale(.6); opacity: .38; }
    100% { transform: scale(2.1); opacity: 0; }
}

/* 4. CARD ================================================================ */
.lg-card {
    position: absolute;
    left: 0;
    top: 0;
    width: 330px;
    max-width: calc(100vw - 20px);
    display: flex;
    align-items: flex-end;
    pointer-events: auto;
    opacity: 0;
    transform: translate(0, 0);
    transition: transform 460ms cubic-bezier(.22, 1, .36, 1), opacity 280ms ease;
    outline: none;
}
.lg-layer.is-open .lg-card { opacity: 1; }
.lg-card.is-instant { transition: none; }

.lg-lucy {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    width: 62px;
    margin-right: -4px;
    margin-bottom: 3px;
}
.lg-lucy svg {
    display: block;
    width: 62px;
    height: 77px;
    overflow: visible;
    /* A soft cast, not a hard offset: she is lit by the same spotlight. */
    filter: drop-shadow(0 4px 10px rgba(10, 10, 11, .3));
}
/* She stands on something. Without this contact shadow she floats, which
   is the single biggest reason the old card read as pasted together. */
.lg-lucy::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 46px;
    height: 9px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
        rgba(10, 10, 11, .34) 0%, rgba(10, 10, 11, .14) 48%, rgba(10, 10, 11, 0) 72%);
    pointer-events: none;
}

.lg-bubble {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    /* A helper, never a wall of text. The whole point of this card is to
       point AT the page, so it is capped at roughly a third of the screen:
       the spotlight and the page around it stay the subject, and the copy
       is the only part that ever gives. */
    max-height: min(42vh, 380px);
    border-radius: 20px;
    background: var(--lg-panel);
    color: var(--ink, #1d1d1f);
    box-shadow: var(--lg-lift);
    overflow: hidden;
}
.lg-bubble-head,
.lg-rail,
.lg-actions { flex: 0 0 auto; }
.lg-bubble-tail {
    position: absolute;
    left: -5px;
    bottom: 38px;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: var(--lg-panel);
    box-shadow: -1px 1px 0 var(--lg-edge);
    transform: rotate(45deg);
    z-index: 2;
}

/* The head is a hairline row, not a band: a tinted strip with a rule under
   it added a whole block of furniture to a card that needs to be small. */
.lg-bubble-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 8px 0 14px;
}
.lg-count {
    color: var(--ink-3, #86868b);
    font-size: .595rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}
.lg-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-right: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ink-3, #86868b);
    font-size: .8rem;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease;
}
.lg-close:hover { background: rgba(29, 29, 31, .07); color: var(--ink, #1d1d1f); }
.lg-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* The step's copy, cloned in from the data articles. */
.lg-content {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px 14px 0;
    animation: lgContentIn 420ms var(--lg-spring) both;
    /* A quiet scrollbar, only when a step actually needs one. */
    scrollbar-width: thin;
    scrollbar-color: rgba(201, 162, 39, .45) transparent;
}
.lg-content::-webkit-scrollbar { width: 5px; }
.lg-content::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(201, 162, 39, .45);
}
@keyframes lgContentIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* Eyebrow and title, the site's own pairing: the step's name in small
   uppercase gold, then the headline. The medallion is a small mark on the
   eyebrow line rather than a 38px tile in its own column, which is where
   a surprising amount of the card's height used to go. */
.lg-title-row {
    display: block;
    margin-bottom: 5px;
}
.lg-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    border-radius: 7px;
    background: var(--coin-face, linear-gradient(158deg, #fdf7e4 0%, #f7ecc6 52%, #f2e2ae 100%));
    color: var(--lg-gold-ink);
    font-size: .56rem;
    box-shadow: 0 0 0 1px rgba(201, 162, 39, .3),
                0 1px 0 rgba(255, 255, 255, .8) inset;
}
.lg-eyebrow {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 2px;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--lg-gold-ink);
    line-height: 1;
}
.lg-eyebrow-text { flex: 0 0 auto; }
.lg-eyebrow::after {
    content: "";
    flex: 1 1 auto;
    max-width: 28px;
    height: 1px;
    background: linear-gradient(90deg, var(--ring-gold, rgba(201, 162, 39, .34)), rgba(201, 162, 39, 0));
}
.lg-content h2 {
    margin: 0;
    font-size: 1.04rem;
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: -.028em;
    color: var(--ink, #1d1d1f);
    text-wrap: balance;
    outline: none;
}
.lg-content p {
    margin: 0 0 8px;
    font-size: .835rem;
    line-height: 1.48;
    color: var(--ink-2, #6e6e73);
    text-wrap: pretty;
}

/* The facts, as one quiet line. These were three full-width tinted bars
   with a filled gold circle each: heavy furniture that repeated what the
   sentence above had already said, and the main reason the card grew to
   two thirds of a phone screen. They are now a single wrapped run of
   short facts, gold ticks, no boxes. Same words, a fifth of the height. */
.lg-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 3px 10px;
    margin: 0 0 2px;
    padding: 0;
    list-style: none;
}
.lg-chips li {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    color: var(--ink-2, #6e6e73);
    font-size: .745rem;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -.005em;
}
.lg-chips i {
    flex: 0 0 auto;
    color: var(--lg-gold);
    font-size: .62rem;
}

/* The language step lists four scripts: short tokens, so they read better
   side by side than as four full-width proof rows. */
/* Step 1 lists four scripts rather than four facts, and they carry no
   tick, so they keep a light pill to read as a set of choices. */
.lg-chips-inline { gap: 4px; }
.lg-chips-inline li {
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--lg-tint);
    color: var(--ink, #1d1d1f);
    font-size: .725rem;
    font-weight: 600;
    line-height: 1.3;
}

/* The last step is the only one that carries a promise line AND two
   doors. It gives up its run of facts to pay for them: at the moment of
   deciding, "free to ask, pay in cash after" is the fact that counts, and
   the three it replaces are all said again on the page behind. */
.lg-content:has(.lg-close-note) .lg-chips,
.lg-bubble:has(> .lg-close-note) .lg-content .lg-chips { display: none; }

/* The closing promise on the last step: the answer to "what does it cost
   me to find out". A tinted box here was one more heavy block on the very
   step that already carries two buttons, so it is a plain line with a
   green tick. */
.lg-close-note {
    display: flex;
    flex: 0 0 auto;
    align-items: baseline;
    gap: 6px;
    margin: 8px 14px 0;
    padding: 0;
    color: var(--ink-2, #6e6e73);
    font-size: .745rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -.005em;
    text-wrap: pretty;
}
.lg-close-note i {
    flex: 0 0 auto;
    color: var(--green, #1f8a5b);
    font-size: .68rem;
}

/* The last step's two doors. The controller lifts this out of the
   scrolling copy and pins it here, directly above the progress and the
   controls, so the buttons that begin a booking are never the part that
   scrolls out of sight. */
.lg-cta {
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
    margin: 0;
    padding: 9px 14px 0;
}
.lg-cta .lg-btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 36px;
    padding: 8px 10px;
    font-size: .79rem;
}
.lg-cta .lg-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 5. PROGRESS AND CONTROLS =============================================== */
/* The old rail carried five numbered nodes with two-line labels under
   them; at that size the labels wrapped, collided and could not be read,
   and they cost more vertical space than the whole body of the step. The
   step's name now lives in the eyebrow above, where it is legible, and
   progress becomes what progress should be: five segments that fill. Each
   is still a real tab button, so clicking straight to a step still works
   and the keyboard contract is unchanged. */
.lg-rail {
    position: relative;
    display: flex;
    gap: 4px;
    margin: 10px 14px 0;
}
/* The dotted track and its fill belong to the old node rail. The segments
   carry their own state now, so the track is retired rather than removed:
   the controller still writes a width to the fill. */
.lg-rail-track { display: none; }
.lg-rail-fill { display: none; }

.lg-rail-step {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 16px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
/* The visible segment is a bar inside a taller hit area, so the touch
   target stays comfortable while the mark stays slim. */
.lg-rail-step::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 6px;
    height: 3.5px;
    border-radius: 999px;
    background: rgba(29, 29, 31, .11);
    transition: background 300ms ease, transform 300ms var(--lg-spring);
}
.lg-rail-step:hover::after { background: rgba(29, 29, 31, .2); }
.lg-rail-step.is-done::after { background: var(--lg-gold); }
.lg-rail-step.is-current::after {
    background: var(--gradient-gold, linear-gradient(90deg, #e9cb62, #c9a227));
    transform: scaleY(1.5);
    box-shadow: 0 0 0 1px rgba(201, 162, 39, .28), 0 2px 8px rgba(201, 162, 39, .45);
    animation: lgSegGlow 2.4s ease-in-out infinite;
}
@keyframes lgSegGlow {
    0%, 100% { box-shadow: 0 0 0 1px rgba(201, 162, 39, .28), 0 2px 8px rgba(201, 162, 39, .45); }
    50%      { box-shadow: 0 0 0 1px rgba(201, 162, 39, .4),  0 2px 14px rgba(201, 162, 39, .6); }
}
.lg-rail-step:focus-visible { outline: none; }
.lg-rail-step:focus-visible::after { outline: 2px solid var(--gold); outline-offset: 3px; }
/* The node's number, tick and label are what the segments replace. They
   stay in the DOM for the controller and for screen readers, which read
   the button's aria-label, so they are taken out of the picture only. */
.lg-rail-dot,
.lg-rail-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Controls. */
.lg-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 9px 14px 12px;
}
.lg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 37px;
    padding: 8px 15px;
    border: 0;
    border-radius: 999px;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: transform 180ms var(--lg-spring), box-shadow 220ms ease,
                background 180ms ease, opacity 160ms ease;
}
.lg-btn i { font-size: .8em; }
.lg-btn-primary {
    background: var(--gradient-gold, linear-gradient(180deg, #e9cb62 0%, #c9a227 100%));
    color: #1d1d1f;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset,
                0 0 0 1px rgba(138, 107, 18, .18),
                0 4px 12px rgba(201, 162, 39, .34);
}
.lg-btn-primary:hover {
    transform: translateY(-1.5px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset,
                0 0 0 1px rgba(138, 107, 18, .22),
                0 9px 22px rgba(201, 162, 39, .44);
}
/* The forward arrow leans into the move, so Next feels like going on. */
.lg-btn-primary:hover i.fa-arrow-right { transform: translateX(2px); }
.lg-btn i.fa-arrow-right,
.lg-btn i.fa-arrow-left { transition: transform 200ms var(--lg-spring); }
.lg-btn-ghost:hover i.fa-arrow-left { transform: translateX(-2px); }
.lg-btn-ghost {
    background: rgba(29, 29, 31, .055);
    color: var(--ink, #1d1d1f);
    box-shadow: 0 0 0 1px rgba(29, 29, 31, .05);
}
.lg-btn-ghost:hover { background: rgba(29, 29, 31, .09); }
.lg-btn:active { transform: scale(.97); }
.lg-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.lg-btn[disabled] { opacity: .32; pointer-events: none; }

.lg-done-label { display: none; }
.lg-card.is-last .lg-next-label { display: none; }
.lg-card.is-last .lg-done-label { display: inline; }
.lg-card.is-last [data-lg-next] i { display: none; }
/* On the first step Back has nothing to go to; it stays for the shape of
   the row but steps out of the way of the eye. */
.lg-card.is-first [data-lg-back] { visibility: hidden; }

/* 6. LUCY'S POSES ======================================================== */
/* Idle: a breath, and a blink every few seconds. */
.lg-lucy .lg-l-body,
.lg-lucy .lg-l-head { animation: lgBreathe 3.8s ease-in-out infinite; }
.lg-lucy .lg-l-head { animation-delay: -.12s; }
@keyframes lgBreathe {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-1.4px); }
}
.lg-lucy .lg-l-eyes,
.lg-avatar .lg-l-eyes {
    transform-origin: 60px 60px;
    animation: lgBlink 5.2s ease-in-out infinite;
}
.lg-avatar .lg-l-eyes { animation-delay: -2.1s; }
@keyframes lgBlink {
    0%, 91%, 100% { transform: scaleY(1); }
    93.5%, 95.5%  { transform: scaleY(.08); }
}

/* Arms pivot at the shoulder. The angles come from the controller, which
   aims the nearer arm at the thing she is talking about. */
.lg-lucy .lg-l-arm-r { transform-origin: 83px 102px; }
.lg-lucy .lg-l-arm-l { transform-origin: 37px 102px; }
.lg-lucy .lg-l-arm {
    transition: transform 560ms cubic-bezier(.34, 1.45, .64, 1);
}
.lg-lucy.is-point-r .lg-l-arm-r { transform: rotate(var(--lg-arm-r, -84deg)); }
.lg-lucy.is-point-l .lg-l-arm-l { transform: rotate(var(--lg-arm-l, 84deg)); }
.lg-lucy.is-cheer .lg-l-arm-r { transform: rotate(-158deg); }
.lg-lucy.is-cheer .lg-l-arm-l { transform: rotate(158deg); }

/* Hello: a wave on arrival. */
.lg-lucy.is-waving .lg-l-arm-r {
    animation: lgWave 1.8s cubic-bezier(.45, .05, .55, .95) 1;
}
@keyframes lgWave {
    0%   { transform: rotate(0); }
    22%  { transform: rotate(-152deg); }
    38%  { transform: rotate(-126deg); }
    54%  { transform: rotate(-156deg); }
    70%  { transform: rotate(-128deg); }
    100% { transform: rotate(0); }
}

/* Talking: the mouth opens and closes for a moment, the head nods once. */
.lg-lucy .lg-l-mouth-open { opacity: 0; }
.lg-lucy.is-talking .lg-l-mouth-open { animation: lgTalkOpen 1.2s steps(1, end) 1; }
.lg-lucy.is-talking .lg-l-smile { animation: lgTalkSmile 1.2s steps(1, end) 1; }
.lg-lucy.is-talking .lg-l-head {
    transform-origin: 60px 84px;
    animation: lgNod 1.2s ease-in-out 1;
}
@keyframes lgTalkOpen  { 0%, 20%, 40%, 60%, 80% { opacity: 1; } 10%, 30%, 50%, 70%, 90%, 100% { opacity: 0; } }
@keyframes lgTalkSmile { 0%, 20%, 40%, 60%, 80% { opacity: 0; } 10%, 30%, 50%, 70%, 90%, 100% { opacity: 1; } }
@keyframes lgNod {
    0%, 100% { transform: rotate(0); }
    30%      { transform: rotate(2.4deg); }
    70%      { transform: rotate(-1.6deg); }
}

/* 7. PHONE =============================================================== */
@media (max-width: 767px) {
    /* The bubble becomes a sheet docked above the tab bar, and Lucy peeks
       over its top-left edge (her lower half sits behind the sheet). */
    .lg-card.is-docked {
        left: 10px;
        right: 10px;
        top: auto;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        width: auto;
        max-width: none;
        display: block;
        transform: none !important;
        transition: opacity 280ms ease;
    }
    .lg-card.is-docked.is-lifted { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
    .lg-card.is-docked .lg-lucy {
        position: absolute;
        z-index: 0;
        left: 10px;
        top: -44px;
        width: 54px;
        margin: 0;
    }
    .lg-card.is-docked .lg-lucy svg { width: 54px; height: 67px; }
    /* She is standing behind the sheet here, not on the veil. */
    .lg-card.is-docked .lg-lucy::after { display: none; }
    .lg-card.is-docked .lg-bubble { border-radius: 18px; }
    .lg-card.is-docked .lg-bubble-tail { display: none; }
    /* The counter clears her head, and stays left-aligned against it
       rather than drifting into the middle of the strip. */
    .lg-card.is-docked .lg-bubble-head { padding-left: 70px; }
    .lg-card.is-docked .lg-count { text-align: left; }
    /* On a phone the page behind matters even more, so the sheet keeps to
       a smaller share of the screen than it does on a desktop. */
    .lg-card.is-docked .lg-bubble { max-height: min(46vh, 360px); }
    .lg-content { padding: 6px 13px 0; }
    .lg-content h2 { font-size: 1rem; }
    .lg-content p { font-size: .82rem; margin-bottom: 7px; }
    .lg-chips li { font-size: .735rem; }
    .lg-cta { padding: 8px 13px 0; }
    .lg-close-note { margin: 7px 13px 0; }
    .lg-rail { margin: 9px 13px 0; }
    .lg-actions { padding: 8px 13px 11px; }
    /* Touch targets keep their size even though everything else shrank. */
    .lg-btn { min-height: 42px; }
    .lg-cta .lg-btn { min-height: 40px; }
    .lg-hello .lg-btn { min-height: 42px; }
}

/* A short phone in landscape, or a small window: the copy is what gives,
   never the controls. */
@media (max-height: 560px) and (max-width: 767px) {
    .lg-content p {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .lg-chips li:nth-child(n + 3) { display: none; }
    .lg-card.is-docked .lg-bubble { max-height: 62vh; }
}

@media (max-width: 380px) {
    .lg-chips li { font-size: .76rem; padding: 6px 9px; }
    .lg-cta { flex-direction: column; }
}

/* Nothing moves on its own for someone who asked it not to. The controller
   reads the same preference: the veil hole and the card jump instead of
   gliding, and no line is "drawn", it is simply there. */
@media (prefers-reduced-motion: reduce) {
    .lg-avatar-badge,
    .lg-avatar::before,
    .lg-hello,
    .lg-bye,
    .lg-ring,
    .lg-line-halo,
    .lg-content,
    .lg-rail-step.is-current::after,
    .lg-lucy .lg-l-body,
    .lg-lucy .lg-l-head,
    .lg-lucy .lg-l-eyes,
    .lg-avatar .lg-l-eyes,
    .lg-lucy.is-waving .lg-l-arm-r,
    .lg-lucy.is-talking .lg-l-mouth-open,
    .lg-lucy.is-talking .lg-l-smile,
    .lg-lucy.is-talking .lg-l-head { animation: none; }
    .lg-layer,
    .lg-card,
    .lg-line-reveal,
    .lg-line-dot,
    .lg-line-halo,
    .lg-rail-step::after,
    .lg-lucy .lg-l-arm,
    .lg-avatar,
    .lg-avatar::after,
    .lg-btn,
    .lg-btn i { transition: none; }
    .lg-line-reveal { stroke-dashoffset: 0; }
    .lg-line-dot { opacity: 1; }
    .lg-line-halo { opacity: .2; }
}