/* ==========================================================================
   TUNG: the homepage welcome (templates/partials/_tung_guide.html)

   The LAUNCHER is an espresso arch window in the bottom-right corner with
   Tung's face in it, and his one-time offer above it. The LAYER is the walk
   itself: the page dims, an arch of light opens over the element being
   introduced (a double gold outline, like the logo), a dotted flight path
   carries a small plane from his card to it, and the card holds the copy.
   Tung stands in his own arch window on the card's top edge.

   Motion follows docs/ELITE_MOTION_AND_ICONS.md: Unfold for the offer and
   the goodbye, Arch Light for the spotlight (the controller runs Dusk,
   Travel and Dawn), one Glint on arrival, a Flight Path for the line, and
   Tung's own tg-* keyframes. Nothing breathes on a loop except his two
   idle motions, and only while the walk is open.

   1. Launcher   2. Layer and veil   3. Card   4. Facts and doors
   5. Controls   6. Tung   7. Phone   8. Reduced motion
   ========================================================================== */

/* Tung has the bottom-right corner on the homepage, so the floating Elite
   Desk button steps aside here (his last stop offers it instead). It stays
   in the DOM: the script beside it in base.html opens the composer for
   every data-ask-local link on the page and returns early without it. */
#askLocalFab { display: none !important; }

.lg {
    --lg-panel: var(--c-bg, #ffffff);
    --lg-gold: var(--c-brand-gold, #2563eb);
    --lg-gold-ink: var(--c-link, #1d4ed8);
    --lg-tint: var(--c-bg-alt, #ffffff);
    --lg-tint-2: var(--c-bg-alt-2, #f4f4f5);
    --lg-espresso: var(--c-espresso, #0f1a2c);
    --lg-glide: var(--et-ease-glide, cubic-bezier(.45, 0, .25, 1));
    --lg-rise: var(--et-ease-rise, cubic-bezier(.16, .84, .30, 1));
    --lg-settle: var(--et-ease-settle, cubic-bezier(.33, 0, .2, 1));
    /* A sheet over a dimmed page: a hairline, a near shadow and a long one. */
    --lg-lift:
        0 0 0 1px rgba(17, 12, 9, .07),
        0 6px 16px rgba(17, 12, 9, .12),
        0 28px 70px -12px rgba(17, 12, 9, .42);
}

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

/* A small 34 x 39 arch (half its first size, the owner's call): round top,
   flat feet, on espresso, with a gold hairline set just inside the edge.
   The ::after below keeps the touch target at 44px. */
.lg-avatar {
    position: relative;
    display: block;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 17px;
    background: var(--lg-espresso);
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(37, 99, 235, .28),
                0 10px 24px -8px rgba(17, 12, 9, .5);
    transition: box-shadow 260ms var(--lg-glide);
}
.lg-avatar::before {
    content: "";
    position: absolute;
    inset: 2px;
    z-index: 2;
    border: 1px solid var(--lg-gold);
    border-radius: 15px;
    pointer-events: none;
}
.lg-avatar::after { content: ""; position: absolute; inset: -5px; }
.lg-avatar:hover,
.lg-avatar:focus-visible {
    box-shadow: 0 0 0 1px rgba(37, 99, 235, .55),
                0 14px 30px -10px rgba(17, 12, 9, .55);
}
.lg-avatar:focus-visible { outline: 3px solid rgba(37, 99, 235, .9); outline-offset: 4px; }

.lg-avatar-face {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    background: radial-gradient(120% 90% at 50% 18%, #3a2c22 0%, var(--lg-espresso) 70%);
}
.lg-avatar-face svg { display: block; width: 100%; height: 100%; }

/* The one Glint, traced round the arch a few seconds after the page loads. */
.lg-avatar-glint {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

/* The label beside the window, on hover or keyboard focus. */
.lg-avatar-tip {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    padding: 8px 14px;
    border-radius: var(--r-pill, 980px);
    background: var(--lg-espresso);
    color: var(--c-on-dark, #ffffff);
    font-size: var(--t-small, .875rem);
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .35);
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms linear;
}
.lg-avatar:hover .lg-avatar-tip,
.lg-avatar:focus-visible .lg-avatar-tip { opacity: 1; }
.lg-launcher.has-hello .lg-avatar-tip { display: none; }

/* The offer, unfolding above the window: a small note, not a panel. */
.lg-hello {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    width: min(224px, calc(100vw - 32px));
    padding: 12px 12px 11px;
    border-radius: 14px;
    background: var(--lg-panel);
    color: var(--c-ink, #0f1a2c);
    box-shadow: var(--lg-lift);
    border-top: 2px solid var(--lg-gold);
    animation: et-unfold 380ms var(--lg-rise) backwards;
}
.lg-hello[hidden] { display: none; }
.lg-hello-title {
    margin: 0 0 3px;
    font-family: var(--f-brand, serif);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.25;
    color: var(--c-ink, #0f1a2c);
}
.lg-hello-text {
    margin: 0 0 10px;
    font-size: .8125rem;
    line-height: 1.4;
    color: var(--c-muted, #4f5a6b);
    text-wrap: pretty;
}
.lg-hello-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.lg-hello .lg-btn { min-height: 34px; padding: 6px 12px; font-size: .8125rem; }

/* The goodbye: a short line in espresso and gold that unfolds, waits, and
   folds away again. */
.lg-bye {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    width: max-content;
    max-width: min(224px, calc(100vw - 32px));
    margin: 0;
    padding: 8px 12px;
    border-radius: 12px;
    background: var(--lg-espresso);
    color: var(--c-on-dark, #ffffff);
    font-size: var(--t-small, .875rem);
    font-weight: 500;
    line-height: 1.35;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .4), 0 12px 28px -10px rgba(17, 12, 9, .5);
    animation: et-unfold 380ms var(--lg-rise) backwards;
}
.lg-bye[hidden] { display: none; }
.lg-bye.is-leaving { animation: et-unfold 380ms var(--lg-settle) reverse forwards; }

/* The cookie notice spans the foot of a small screen: yield to it. */
@media (max-width: 600px) {
    body:has(#cookiePopup.show) .lg-launcher { opacity: 0; pointer-events: none; }
}
/* A phone tab bar owns the strip at the bottom; the controller adds
   is-lifted when one is on the page. */
@media (max-width: 767px) {
    .lg-launcher.is-lifted { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* 2. LAYER AND VEIL ====================================================== */
/* Above the fixed header, so the veil can dim it and open its light on the
   language button. */
.lg-layer {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    pointer-events: none;
    opacity: 0;
    transition: opacity 280ms linear;
}
.lg-layer[hidden] { display: none; }
.lg-layer.is-open { opacity: 1; }
/* Finish: the light has grown to fill the screen; the layer lets go. */
.lg-layer.is-finishing { opacity: 0; transition-duration: 600ms; }

/* Takes every click outside the card, so the page cannot be used through
   the veil. Transparent: the dimming is the veil's own path. */
.lg-backdrop {
    position: absolute;
    inset: 0;
    pointer-events: auto;
}

.lg-veil {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}
.lg-veil-fill { fill: rgba(17, 12, 9, .7); }

/* The arch of light: an outer gold edge and a finer one 6px inside. */
.lg-ring { stroke: var(--lg-gold); stroke-width: 2; }
.lg-ring-in { stroke: var(--c-gold-light, #93c5fd); stroke-width: .75; stroke-opacity: .6; }

/* The flight path: gold beads drawn from the card to the light. */
.lg-line {
    stroke: var(--c-gold-light, #93c5fd);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 0 9;
}
.lg-line-reveal {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 640ms var(--lg-glide);
}
.lg-veil.is-drawn .lg-line-reveal { stroke-dashoffset: 0; }
.lg-veil.is-instant .lg-line-reveal { transition: none; }

/* The plane rides the path; the controller moves it, so it carries no
   transition of its own. */
.lg-plane {
    color: var(--c-gold-light, #93c5fd);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    opacity: 0;
    transition: opacity 160ms linear;
}
.lg-veil.is-drawn .lg-plane { opacity: 1; }

/* 3. CARD ================================================================ */
/* Tung's window sits on the card's top edge, half above it; the bubble
   holds everything else. The controller moves the card with transform. */
.lg-card {
    position: absolute;
    left: 0;
    top: 0;
    width: 360px;
    max-width: calc(100vw - 20px);
    display: flex;
    flex-direction: column;
    pointer-events: auto;
    opacity: 0;
    transform: translate(0, 0);
    transition: transform 520ms var(--lg-glide), opacity 280ms linear;
    outline: none;
}
.lg-layer.is-open .lg-card { opacity: 1; }
.lg-card.is-instant { transition: opacity 280ms linear; }

.lg-tung {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    align-self: flex-start;
    width: 76px;
    height: 76px;
    margin: 0 0 -52px 16px;
    border-radius: 50%;
    overflow: hidden;
    background: radial-gradient(120% 80% at 50% 12%, #3a2c22 0%, var(--lg-espresso) 72%);
    box-shadow: 0 0 0 1px rgba(37, 99, 235, .35), 0 10px 22px -10px rgba(17, 12, 9, .55);
}
.lg-tung::before {
    content: "";
    position: absolute;
    inset: 3px;
    z-index: 1;
    border: 1.5px solid var(--lg-gold);
    border-radius: 35px;
    pointer-events: none;
}
/* He sits inside the circle, shown from the chest up. */
.lg-tung svg {
    position: absolute;
    left: 4px;
    bottom: -18px;
    width: 68px;
    height: 85px;
}

.lg-bubble {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: min(46vh, 420px);
    border-radius: var(--r-lg, 22px);
    background: var(--lg-panel);
    color: var(--c-ink, #0f1a2c);
    box-shadow: var(--lg-lift);
    overflow: hidden;
}
.lg-bubble-head,
.lg-actions,
.lg-cta { flex: 0 0 auto; }

/* Beside Tung's window: the stop's name, the count, the close button. */
.lg-bubble-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 8px 10px 0 106px;
}
.lg-eyebrow {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--lg-gold-ink);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.2;
}
.lg-eyebrow .et-i { flex: 0 0 auto; width: 16px; height: 16px; color: var(--c-bronze, #1d4ed8); }
.lg-eyebrow-text { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.lg-count {
    flex: 0 0 auto;
    color: var(--c-muted, #4f5a6b);
    font-size: var(--t-micro, .75rem);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.lg-close {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--lg-tint);
    color: var(--c-muted, #4f5a6b);
    font-size: .875rem;
    cursor: pointer;
    transition: background 200ms linear, color 200ms linear;
}
.lg-close:hover { background: var(--lg-tint-2); color: var(--c-ink, #0f1a2c); }
.lg-close:focus-visible { outline: 3px solid rgba(37, 99, 235, .9); outline-offset: 2px; }

/* The stop's copy, cloned in from the data articles. New words fade in
   over 180ms; nothing slides. */
.lg-content {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px 18px 0;
    transition: opacity 180ms linear;
    scrollbar-width: thin;
    scrollbar-color: rgba(165, 122, 53, .45) transparent;
}
.lg-content h2 {
    margin: 0 0 6px;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: -.005em;
    color: var(--c-ink, #0f1a2c);
    text-wrap: balance;
    outline: none;
}
.lg-content p {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.45;
    color: var(--c-muted, #4f5a6b);
    text-wrap: pretty;
}

/* 4. FACTS AND DOORS ===================================================== */
/* Three small tiles in one row: an icon over two or three words. */
.lg-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin: 12px 0 2px;
    padding: 0;
    list-style: none;
}
.lg-facts li {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 9px 9px 10px;
    border-radius: 12px;
    background: var(--lg-tint);
    color: var(--c-ink-2, #1c2b45);
    font-size: var(--t-micro, .75rem);
    font-weight: 500;
    line-height: 1.3;
}
.lg-facts .et-i { width: 18px; height: 18px; color: var(--c-bronze, #1d4ed8); }
/* The first stop lists scripts, not facts: a row of light tokens. */
.lg-facts-lang { display: flex; flex-wrap: wrap; gap: 6px; }
.lg-facts-lang li {
    padding: 5px 11px;
    border-radius: var(--r-pill, 980px);
    font-size: .8125rem;
    color: var(--c-ink, #0f1a2c);
}

/* The last stop's two doors, pinned by the controller just above the
   controls so they never scroll out of sight. */
.lg-cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 0;
    padding: 12px 18px 0;
}
.lg-cta .lg-btn { min-width: 0; min-height: 42px; padding: 9px 12px; }
.lg-cta .lg-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 5. CONTROLS ============================================================ */
/* One row under a hairline: Back, the five arch marks, Continue. */
.lg-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 14px;
    padding: 12px 18px 16px;
    border-top: 1px solid var(--c-line, #e5e5e7);
}
.lg-rail {
    display: flex;
    flex: 0 1 auto;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 0;
}
/* Back and Continue keep their full size; the marks give way first. */
.lg-actions .lg-btn { flex: 0 0 auto; padding-left: 14px; padding-right: 14px; }
.lg-rail-step {
    position: relative;
    flex: 0 1 20px;
    min-width: 13px;
    width: 20px;
    height: 28px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
/* Each mark is a tiny arch: outlined ahead, gold behind, espresso now. */
.lg-rail-step::after {
    content: "";
    position: absolute;
    left: 50%;
    margin-left: -5px;
    top: 8px;
    width: 10px;
    height: 12px;
    box-sizing: border-box;
    border: 1.5px solid rgba(165, 122, 53, .45);
    border-radius: 5px 5px 1.5px 1.5px;
    background: transparent;
    transition: background 200ms linear, border-color 200ms linear;
}
.lg-rail-step:hover::after { border-color: var(--c-bronze, #1d4ed8); }
.lg-rail-step.is-done::after { background: var(--lg-gold); border-color: var(--lg-gold); }
.lg-rail-step.is-current::after { background: var(--c-ink, #0f1a2c); border-color: var(--c-ink, #0f1a2c); }
.lg-rail-step:focus-visible { outline: none; }
.lg-rail-step:focus-visible::after { outline: 3px solid rgba(37, 99, 235, .9); outline-offset: 2px; }
/* The number stays for screen readers, which read the tab's label. */
.lg-rail-num {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.lg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 8px 16px;
    border: 0;
    border-radius: var(--r-pill, 980px);
    font-family: inherit;
    font-size: var(--t-small, .875rem);
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 200ms linear, color 200ms linear;
}
.lg-btn:hover { text-decoration: none; }
/* The one action: gold with ink words, never white on gold. */
.lg-btn-primary { background: var(--lg-gold); color: var(--c-ink, #0f1a2c); }
.lg-btn-primary:hover { background: #1d4ed8; color: #fff; }
.lg-btn-ghost { background: var(--lg-tint); color: var(--c-ink, #0f1a2c); }
.lg-btn-ghost:hover { background: var(--lg-tint-2); color: var(--c-ink, #0f1a2c); }
.lg-btn:active { transform: translateY(1px); }
.lg-btn:focus-visible { outline: 3px solid rgba(37, 99, 235, .9); 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] .et-i { display: none; }
/* The first stop has nothing behind it: Back keeps its place in the row. */
.lg-card.is-first [data-lg-back] { visibility: hidden; }

/* 6. TUNG ================================================================ */
/* Pivots, in the drawing's own units (see the rig note in the partial). */
.tg-torso,
.tg-bow { transform-origin: 64px 160px; }
.tg-head,
.tg-head-bow { transform-origin: 64px 96px; }
.tg-upper-r { transform-origin: 88px 108px; }
.tg-fore-r { transform-origin: 96px 128px; }
.tg-upper-l { transform-origin: 40px 108px; }
.tg-fore-l { transform-origin: 32px 128px; }

/* Where he is looking and presenting: set by the controller, eased with
   the settle curve, never past the shoulder. */
.lg-tung .tg-upper-r { transform: rotate(var(--tg-upper-r, 0deg)); }
.lg-tung .tg-fore-r { transform: rotate(var(--tg-fore-r, 0deg)); }
.lg-tung .tg-upper-l { transform: rotate(var(--tg-upper-l, 0deg)); }
.lg-tung .tg-fore-l { transform: rotate(var(--tg-fore-l, 0deg)); }
.lg-tung .tg-head { transform: rotate(var(--tg-head, 0deg)); }
.lg-tung .tg-pupils { transform: translate(var(--tg-look-x, 0px), var(--tg-look-y, 0px)); }
.lg-tung .tg-upper-r,
.lg-tung .tg-fore-r,
.lg-tung .tg-upper-l,
.lg-tung .tg-fore-l,
.lg-tung .tg-head,
.lg-tung .tg-pupils { transition: transform 520ms cubic-bezier(.25, .8, .25, 1); }

/* Idle, only while the walk is open: a slow sway from the base and, out of
   step with it, a breath in the shoulders. */
.lg-layer.is-open .lg-tung .tg-torso { animation: tg-settle 7.2s var(--lg-glide) infinite; }
.lg-layer.is-open .lg-tung .tg-shoulders { animation: tg-inhale 4.6s var(--lg-glide) infinite; }
@keyframes tg-settle {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(.8deg); }
}
@keyframes tg-inhale {
    0%, 100% { transform: translateY(0); }
    45% { transform: translateY(-.6px); }
}

/* A blink: the lids drop for 110ms (the controller times them). */
.lg-tung .tg-lids { transition: transform 50ms linear; }
.lg-tung.is-blink .tg-lids { transform: translateY(3.2px); }

/* Speech: the controller picks a mouth shape every 120 to 180ms; the brows
   lift once as each stop begins. The two open shapes are drawn at opacity
   0, so the rig rests on its smile anywhere it is shown. */
.lg-tung[data-mouth="o"] .tg-m-o,
.lg-tung[data-mouth="wide"] .tg-m-wide { opacity: 1; }
.lg-tung[data-mouth="o"] .tg-m-rest,
.lg-tung[data-mouth="wide"] .tg-m-rest { opacity: 0; }
.lg-tung .tg-brows { transition: transform 120ms var(--lg-settle); }
.lg-tung.is-brows .tg-brows { transform: translateY(-1px); }

/* The welcome, 2100ms, no overshoot: right hand to the chest, a small bow,
   then an open palm that says "this way". */
.lg-tung.is-welcome .tg-upper-r { animation: tg-welcome-upper 2100ms var(--lg-settle) 1; }
.lg-tung.is-welcome .tg-fore-r { animation: tg-welcome-fore 2100ms var(--lg-settle) 1; }
.lg-tung.is-welcome .tg-head-bow { animation: tg-welcome-head 2100ms var(--lg-settle) 1; }
.lg-tung.is-welcome .tg-bow { animation: tg-welcome-bow 2100ms var(--lg-settle) 1; }
@keyframes tg-welcome-upper {
    0% { transform: rotate(0deg); }
    24%, 52% { transform: rotate(20deg); }
    62% { transform: rotate(6deg); }
    90%, 100% { transform: rotate(-35deg); }
}
@keyframes tg-welcome-fore {
    0% { transform: rotate(0deg); }
    24%, 52% { transform: rotate(110deg); }
    62% { transform: rotate(40deg); }
    90%, 100% { transform: rotate(-10deg); }
}
@keyframes tg-welcome-head {
    0%, 24% { transform: rotate(0deg); }
    38% { transform: rotate(5deg); }
    52%, 100% { transform: rotate(0deg); }
}
@keyframes tg-welcome-bow {
    0%, 24% { transform: rotate(0deg); }
    38% { transform: rotate(2deg); }
    52%, 100% { transform: rotate(0deg); }
}

/* The last stop (is-finale): both forearms open outward, palms up, framing
   him the way the arch frames the logo. The controller sets the angles. */

/* 7. PHONE =============================================================== */
@media (max-width: 767px) {
    /* The card docks at the foot of the screen as a sheet, above any tab
       bar, and Tung's window rides on its top edge. */
    .lg-card.is-docked {
        left: 10px;
        right: 10px;
        top: auto;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        width: auto;
        max-width: none;
        transform: none !important;
        transition: opacity 280ms linear;
    }
    .lg-card.is-docked.is-lifted { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
    .lg-card.is-docked .lg-tung { width: 64px; height: 64px; margin: 0 0 -42px 14px; border-radius: 32px; }
    .lg-card.is-docked .lg-tung::before { border-radius: 29px; }
    .lg-card.is-docked .lg-tung svg { left: -3px; width: 70px; height: 88px; }
    .lg-card.is-docked .lg-bubble { max-height: min(54vh, 430px); }
    .lg-card.is-docked .lg-bubble-head { min-height: 42px; padding: 6px 8px 0 88px; }
    .lg-content { padding: 8px 16px 0; }
    .lg-content h2 { font-size: 1.125rem; }
    .lg-content p { font-size: .875rem; line-height: 1.42; }
    .lg-facts { margin-top: 10px; }
    .lg-facts li { padding: 8px 8px 9px; gap: 5px; }
    .lg-facts .et-i { width: 16px; height: 16px; }
    .lg-cta { padding: 10px 16px 0; }
    /* The last stop keeps the sheet short: its doors replace the tiles. */
    .lg-bubble:has(> .lg-cta) .lg-facts { display: none; }
    .lg-actions { margin-top: 12px; padding: 10px 16px 12px; }
    /* Touch targets keep their size when the type gets smaller. */
    .lg-btn { min-height: 44px; }
    .lg-cta .lg-btn { min-height: 44px; }
    .lg-hello .lg-btn { min-height: 36px; }
    .lg-rail-step { height: 44px; }
    .lg-rail-step::after { top: 16px; }
    .lg-close { position: relative; width: 44px; height: 44px; background: transparent; isolation: isolate; }
    .lg-close::before {
        content: "";
        position: absolute;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--lg-tint);
        z-index: -1;
    }
}

/* A short landscape phone: the copy gives way, 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-facts { display: none; }
    .lg-card.is-docked .lg-bubble { max-height: 64vh; }
}

@media (max-width: 360px) {
    .lg-count { display: none; }
    .lg-btn { padding: 8px 12px; }
}

/* 8. REDUCED MOTION ====================================================== */
/* Tung stands at rest and smiles; the light, the card and the path jump
   straight to where they belong. The controller reads the same setting. */
@media (prefers-reduced-motion: reduce) {
    .lg-hello,
    .lg-bye,
    .lg-bye.is-leaving,
    .lg-layer.is-open .lg-tung .tg-torso,
    .lg-layer.is-open .lg-tung .tg-shoulders,
    .lg-tung.is-welcome .tg-upper-r,
    .lg-tung.is-welcome .tg-fore-r,
    .lg-tung.is-welcome .tg-head-bow,
    .lg-tung.is-welcome .tg-bow { animation: none; }
    .lg-layer,
    .lg-card,
    .lg-content,
    .lg-line-reveal,
    .lg-plane,
    .lg-avatar,
    .lg-avatar-tip,
    .lg-rail-step::after,
    .lg-btn,
    .lg-close,
    .lg-tung .tg-upper-r,
    .lg-tung .tg-fore-r,
    .lg-tung .tg-upper-l,
    .lg-tung .tg-fore-l,
    .lg-tung .tg-head,
    .lg-tung .tg-pupils,
    .lg-tung .tg-lids,
    .lg-tung .tg-brows { transition: none; }
    .lg-line-reveal { stroke-dashoffset: 0; }
    .lg-plane { opacity: 1; }
}