/* ============================================================
   The Paddock - "Plan it with Rory" onboarding journey.
   A full-viewport living scene (canvas) with a linen question dock,
   bunting progress, and Rory the pixel-art guide.

   Palette
     night   #0E1B14   deep green-black
     veld    #2E4A33   grass
     straw   #E8C97A   dry-season gold
     amber   #F2A65A   low sun
     rust    #D96A48   msasa coral (accent)
     linen   #FBF6EC   tent canvas (surfaces)
     ink     #1C2620   text on linen
   Type: Georgia (questions + Rory's voice) over the system sans (controls).
   ============================================================ */

.journey {
    --jr-night: #0E1B14;
    --jr-veld: #2E4A33;
    --jr-straw: #E8C97A;
    --jr-amber: #F2A65A;
    --jr-rust: #D96A48;
    --jr-linen: #FBF6EC;
    --jr-linen-deep: #F1E8D6;
    --jr-ink: #1C2620;
    --jr-ink-soft: #4C5A4E;
    --jr-brand: #1F3D2A;
    --jr-serif: Georgia, 'Times New Roman', serif;
    --jr-sans: -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    position: fixed;
    inset: 0;
    overflow: hidden;
    background: var(--jr-night);
    font-family: var(--jr-sans);
    color: var(--jr-ink);
}

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

.journey button { font: inherit; cursor: pointer; }
.journey :focus-visible {
    outline: 2px solid var(--jr-straw);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ------------ scene + grain ------------ */

.jr-scene {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
}

/* ------------ backdrop photography (#4/#5) ------------ */

/* Real Rooney's event photos behind the journey. Two layers crossfade per chapter; the whole
   backdrop brightens as answers land (--jr-reveal 0 → 1), keeping the "slowly building
   background" feel with real photography. Sits over the canvas scene, under the grain. */
.jr-photo {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    background: var(--jr-night);
}

.jr-photo-layer {
    position: absolute;
    inset: -2.5%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.05);
    transition: opacity 1.2s ease, transform 16s linear;
    filter: brightness(calc(0.55 + 0.42 * var(--jr-reveal, 0)))
        saturate(calc(0.82 + 0.24 * var(--jr-reveal, 0)));
    will-change: opacity, transform;
}

.jr-photo-on { opacity: 1; transform: scale(1); }

/* Legibility scrim - heavier at the top (chrome) and bottom (dock), easing as the plan builds */
.jr-photo-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(8, 14, 10, 0.6) 0%,
            rgba(8, 14, 10, 0.18) 28%,
            rgba(8, 14, 10, 0.22) 58%,
            rgba(8, 14, 10, 0.78) 100%);
    opacity: calc(1 - 0.3 * var(--jr-reveal, 0));
}

.jr-grain {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.05;
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.55) 0.5px, transparent 0.6px),
        radial-gradient(rgba(0, 0, 0, 0.5) 0.5px, transparent 0.6px);
    background-size: 3px 3px, 5px 5px;
    background-position: 0 0, 1px 2px;
}

/* ------------ chrome ------------ */

.jr-chrome {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem clamp(1rem, 2.5vw, 1.75rem);
    background: linear-gradient(180deg, rgba(8, 14, 10, 0.55), rgba(8, 14, 10, 0));
    pointer-events: none;
}

.jr-chrome > * { pointer-events: auto; }

.jr-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--jr-linen);
}

.jr-brand-mark {
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    border-radius: 7px;
    background: var(--jr-brand);
    color: var(--jr-straw);
    font-family: var(--jr-serif);
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 0 0 1px rgba(232, 201, 122, 0.35);
}

.jr-brand-name {
    font-family: var(--jr-serif);
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.jr-chrome-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.jr-signout { display: inline-flex; margin: 0; }

.jr-chrome-link {
    appearance: none;
    border: 0;
    background: transparent;
    color: rgba(251, 246, 236, 0.85);
    font-size: 0.8125rem;
    padding: 0.4rem 0.65rem;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.jr-chrome-link:hover {
    background: rgba(251, 246, 236, 0.14);
    color: var(--jr-linen);
}

/* ------------ bunting progress ------------ */

.jr-bunting {
    position: absolute;
    top: 3.4rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    gap: clamp(0.35rem, 1.2vw, 0.8rem);
    padding: 0.45rem 1.1rem 0.2rem;
}

/* the rope */
.jr-bunting::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0.45rem;
    height: 14px;
    border-top: 2px solid rgba(251, 246, 236, 0.5);
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    pointer-events: none;
}

.jr-flag {
    appearance: none;
    border: 0;
    padding: 0;
    width: clamp(13px, 1.6vw, 19px);
    height: clamp(18px, 2.2vw, 26px);
    background: rgba(251, 246, 236, 0.22);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transition: background-color 0.25s ease, transform 0.25s ease;
    transform-origin: top center;
}

.jr-flag:nth-child(odd) { transform: rotate(2.5deg); }
.jr-flag:nth-child(even) { transform: rotate(-2deg); }

.jr-flag-done { background: var(--jr-straw); }
.jr-flag-done:nth-child(3n) { background: var(--jr-rust); }
.jr-flag-done:nth-child(3n+1) { background: var(--jr-linen); }

.jr-flag-current {
    background: var(--jr-amber);
    animation: jr-flag-wave 1.6s ease-in-out infinite;
}

.jr-flag:disabled { cursor: default; }
.jr-flag:not(:disabled):hover { transform: scale(1.18); }

@keyframes jr-flag-wave {
    0%, 100% { transform: rotate(3deg); }
    50% { transform: rotate(-3deg); }
}

/* ------------ Rory ------------ */

/* Rory is a waist-up bust who leans over the dock's top edge, presenting each question.
   The wrapper holds still and carries the clip line at the card edge; the sprite inside
   translates up through it on entrance, so he rises from BEHIND the card. */
.jr-rory {
    position: absolute;
    /* --jr-rory-x is set once by journey.js: Rory holds a single post at the dock's left
       edge so his bubbles and the ask bar never travel sideways mid-conversation. */
    left: var(--jr-rory-x, clamp(10px, 2.5%, 26px));
    bottom: calc(100% - 10px);
    z-index: 2;
    pointer-events: none;
    /* generous on top/sides; lets the 10px lean-over show below the card edge at rest */
    clip-path: inset(-40px -40px -14px -40px);
}

.jr-rory-sprite {
    width: clamp(104px, 11.5vw, 168px);
    height: clamp(104px, 11.5vw, 168px);
    background-repeat: no-repeat;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    filter: drop-shadow(0 8px 12px rgba(5, 10, 6, 0.3));
}

/* entrance: hidden below the card edge… */
.jr-rory-entering { clip-path: inset(-40px -40px 10px -40px); }
.jr-rory-entering .jr-rory-sprite { transform: translateY(88%); }

/* …rising up through it */
.jr-rory-arrived {
    clip-path: inset(-40px -40px -14px -40px);
    transition: clip-path 0.9s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.jr-rory-arrived .jr-rory-sprite {
    transform: translateY(0);
    transition: transform 0.9s cubic-bezier(0.2, 0.9, 0.3, 1);
}

/* ------------ speech bubbles ------------ */

/* The conversation stack: live bubble at the bottom, retired lines (ghosts) floating
   above it, fading with age. Anchored just above the ask bar; grows upward. */
.jr-bubbles {
    position: absolute;
    left: calc(var(--jr-rory-x, clamp(10px, 2.5%, 26px)) + clamp(104px, 11.5vw, 168px) + 14px);
    bottom: calc(100% + 46px);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    max-width: min(460px, calc(100% - var(--jr-rory-x, clamp(10px, 2.5%, 26px)) - clamp(104px, 11.5vw, 168px) - 34px));
    pointer-events: none;
    transition: left 0.9s cubic-bezier(0.3, 0.8, 0.3, 1);
}

.jr-bubbles > * { pointer-events: auto; }

.jr-bubble {
    position: relative;
    width: max-content;
    max-width: 100%;
    background: var(--jr-linen);
    color: var(--jr-ink);
    border-radius: 14px;
    border-bottom-left-radius: 3px;
    padding: 0.8rem 1rem 0.85rem;
    box-shadow: 0 10px 28px rgba(5, 10, 6, 0.35);
    cursor: pointer;
}

/* The single retired line: smaller, quieter - hover to read in full. */
.jr-bubble-ghost {
    cursor: default;
    opacity: 0.45;
    padding: 0.55rem 0.8rem 0.6rem;
    transition: opacity 0.45s ease;
}

.jr-bubble-ghost:hover { opacity: 1; }

.jr-bubble-ghost .jr-bubble-text { font-size: clamp(0.78rem, 1.1vw, 0.92rem); }

/* The client's own question, echoed into the thread. */
.jr-bubble-user {
    align-self: flex-end;
    background: var(--jr-brand);
    color: var(--jr-linen);
    border-radius: 14px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 14px;
}

.jr-bubble-user::after { display: none; }

.jr-bubble-user .jr-bubble-text { font-style: normal; }

.jr-bubble::after {
    content: '';
    position: absolute;
    left: 18px;
    bottom: -9px;
    width: 16px;
    height: 16px;
    background: var(--jr-linen);
    clip-path: polygon(0 0, 100% 0, 12% 100%);
}

.jr-bubble-text {
    margin: 0;
    font-family: var(--jr-serif);
    font-style: italic;
    font-size: clamp(0.9rem, 1.25vw, 1.05rem);
    line-height: 1.45;
    /* sayAppend() joins a chapter's opener + reaction with blank lines in one bubble */
    white-space: pre-line;
}

.jr-bubble-typing .jr-bubble-text::after {
    content: '▌';
    font-style: normal;
    color: var(--jr-rust);
    animation: jr-caret 0.85s steps(1) infinite;
}

@keyframes jr-caret { 50% { opacity: 0; } }

.jr-bubble-pop { animation: jr-bubble-pop 0.3s ease-out; }

@keyframes jr-bubble-pop {
    from { transform: translateY(6px) scale(0.96); opacity: 0.4; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

/* ------------ the dock ------------ */

.jr-dock {
    position: absolute;
    left: 50%;
    bottom: clamp(1rem, 3.5vh, 2.4rem);
    transform: translateX(-50%);
    z-index: 4;
    width: min(700px, calc(100vw - 2rem));
    max-height: min(72vh, 640px);
    display: flex;
    background: rgba(251, 246, 236, 0.96);
    border-radius: 18px;
    box-shadow:
        0 24px 60px rgba(4, 9, 5, 0.45),
        0 2px 0 rgba(255, 255, 255, 0.4) inset;
    backdrop-filter: blur(6px);
}

/* canvas stitching */
.jr-dock::after {
    content: '';
    position: absolute;
    inset: 7px;
    border: 1.5px dashed rgba(28, 38, 32, 0.18);
    border-radius: 12px;
    pointer-events: none;
}

.jr-dock-inner {
    width: 100%;
    /* fixed height so the dock holds still between chapters - content scrolls, the shell
       (and Rory, anchored to it) never shifts. The vh clamp keeps short laptops usable.
       Tall enough that the date and map chapters fit whole, with no internal scroll. */
    height: min(520px, 64vh);
    padding: 1.3rem clamp(1.1rem, 3vw, 1.9rem) 1.25rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

/* The welcome and finale cards are one-offs (no question-to-question shifting to fight)
   and can run taller than the locked height - let them size naturally so their CTAs
   never hide below a scroll. */
.jr-dock-welcome .jr-dock-inner,
.jr-dock-finale .jr-dock-inner { height: auto; }

/* Chapter transitions animate the CONTENT, not the dock shell - Rory and his bubble are
   anchored to the shell and must hold still while questions swap beneath him. */
.jr-dock-enter .jr-dock-inner { animation: jr-dock-enter 0.42s cubic-bezier(0.2, 0.9, 0.3, 1); }

@keyframes jr-dock-enter {
    from { transform: translateY(14px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Busy state dims the question content only - Rory keeps talking at full strength. */
.jr-dock-busy .jr-dock-inner { opacity: 0.75; pointer-events: none; }

.jr-dock-eyebrow {
    margin: 0 0 0.3rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--jr-rust);
}

.jr-dock-title {
    margin: 0 0 0.9rem;
    font-family: var(--jr-serif);
    font-weight: 700;
    font-size: clamp(1.3rem, 2.6vw, 1.75rem);
    line-height: 1.18;
    letter-spacing: -0.01em;
    color: var(--jr-ink);
}

/* Sticky: when a chapter's content outgrows the dock's fixed height, the confirm row
   pins to the bottom of the scroll area so the primary action is never out of reach.
   The row itself stays transparent - a translucent background here would stack over the
   already-translucent dock and read as a whiter band around the button. A short gradient
   above the row instead fades any scrolling content out before it reaches the button. */
.jr-dock-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    position: sticky;
    bottom: -1.25rem;
    padding: 0.55rem 0;
    background: transparent;
}

.jr-dock-actions::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 1.4rem;
    background: linear-gradient(to top, var(--jr-linen), rgba(251, 246, 236, 0));
    pointer-events: none;
}

.jr-dock-actions:empty { margin-top: 0; padding: 0; }
.jr-dock-actions:empty::before { display: none; }

/* ------------ buttons & chips ------------ */

.jr-btn {
    appearance: none;
    border: 0;
    border-radius: 999px;
    padding: 0.6rem 1.25rem;
    font-weight: 600;
    font-size: 0.9rem;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.jr-btn:active { transform: translateY(1px); }

.jr-btn-primary {
    background: var(--jr-brand);
    color: var(--jr-linen);
    box-shadow: 0 6px 16px rgba(15, 30, 20, 0.35);
}

.jr-btn-primary:hover { background: #16301F; }

.jr-btn-lg { padding: 0.75rem 1.6rem; font-size: 0.975rem; }

.jr-btn-ghost {
    background: transparent;
    color: var(--jr-brand);
    box-shadow: inset 0 0 0 1.5px rgba(31, 61, 42, 0.35);
}

.jr-btn-ghost:hover { background: rgba(31, 61, 42, 0.07); }

.jr-chip {
    appearance: none;
    border: 1.5px solid rgba(28, 38, 32, 0.22);
    background: var(--jr-linen);
    color: var(--jr-ink-soft);
    border-radius: 999px;
    padding: 0.32rem 0.8rem;
    font-size: 0.8125rem;
    font-weight: 600;
    transition: border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}

.jr-chip:hover, .jr-chip[aria-pressed="true"] {
    border-color: var(--jr-brand);
    color: var(--jr-brand);
    background: rgba(31, 61, 42, 0.06);
}

/* ------------ option cards ------------ */

.jr-cards {
    display: grid;
    gap: 0.55rem;
}

.jr-cards-sm { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.jr-cards-md { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
.jr-cards-lg { grid-template-columns: repeat(3, 1fr); }

.jr-card {
    appearance: none;
    text-align: left;
    border: 1.5px solid rgba(28, 38, 32, 0.14);
    border-radius: 12px;
    background: var(--jr-linen-deep);
    padding: 0.7rem 0.75rem 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    min-height: 64px;
    transition: transform 0.13s ease, border-color 0.13s ease, background-color 0.13s ease, box-shadow 0.13s ease;
}

.jr-card:hover {
    transform: translateY(-2px);
    border-color: rgba(31, 61, 42, 0.5);
    box-shadow: 0 8px 18px rgba(20, 32, 22, 0.16);
}

.jr-card-on {
    border-color: var(--jr-brand);
    background: #E9F0E6;
    box-shadow: 0 0 0 1.5px var(--jr-brand) inset;
}

/* Ask-Rory recommendation: his hint badges the card he'd pick */
.jr-card-pick {
    position: relative;
    border-color: var(--jr-rust);
    box-shadow: 0 0 0 1.5px var(--jr-rust) inset, 0 6px 16px rgba(217, 106, 72, 0.18);
}

.jr-card-pick::after {
    content: "Rory's pick";
    position: absolute;
    top: -0.55rem;
    right: 0.5rem;
    font-family: var(--jr-sans);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--jr-linen);
    background: var(--jr-rust);
    border-radius: 999px;
    padding: 0.14rem 0.5rem;
    pointer-events: none;
}

.jr-card-icon {
    width: 26px;
    height: 26px;
    color: var(--jr-rust);
    margin-bottom: 0.15rem;
}

.jr-card-icon svg { width: 100%; height: 100%; }

.jr-card-on .jr-card-icon { color: var(--jr-brand); }

.jr-card-label {
    font-weight: 650;
    font-size: 0.875rem;
    line-height: 1.2;
    color: var(--jr-ink);
}

.jr-card-desc {
    font-size: 0.74rem;
    line-height: 1.3;
    color: var(--jr-ink-soft);
}

.jr-cards-lg .jr-card { min-height: 104px; padding: 0.9rem 0.9rem 0.8rem; }
.jr-cards-lg .jr-card-icon { width: 32px; height: 32px; }
.jr-cards-lg .jr-card-label { font-size: 0.95rem; }

/* ------------ fields ------------ */

.jr-field {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    min-width: 0;
}

.jr-field-label {
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--jr-ink-soft);
}

.jr-input {
    appearance: none;
    width: 100%;
    border: 1.5px solid rgba(28, 38, 32, 0.22);
    border-radius: 10px;
    background: #FFFDF7;
    color: var(--jr-ink);
    padding: 0.55rem 0.7rem;
    font-size: 0.95rem;
    font-family: var(--jr-sans);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.jr-input:focus {
    outline: none;
    border-color: var(--jr-brand);
    box-shadow: 0 0 0 3px rgba(31, 61, 42, 0.14);
}

.jr-textarea { resize: vertical; min-height: 96px; line-height: 1.5; }

.jr-input-lg { font-size: 1.05rem; padding: 0.7rem 0.9rem; }

/* ------------ name chapter (#3) ------------ */

.jr-name { display: flex; flex-direction: column; gap: 0.6rem; }

/* ------------ finale email capture (#2) ------------ */

.jr-finale-email {
    margin-top: 0.9rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(28, 38, 32, 0.12);
}

.jr-finale-email-hint {
    margin: 0.4rem 0 0;
    font-size: 0.78rem;
    color: var(--jr-ink-soft);
    font-style: italic;
    font-family: var(--jr-serif);
}

/* ------------ date chapter ------------ */

/* Sized so multi-day toggle + calendar + readout all fit inside the dock without the
   card scrolling: tight gaps, vh-clamped day cells (see .jr-cal-day). */
.jr-date { display: flex; flex-direction: column; gap: 0.55rem; }

.jr-date-multi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.jr-date-multi-label {
    font-family: var(--jr-serif);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--jr-ink);
}

/* Yes/no segmented toggle with the answer written on the buttons. */
.jr-toggle {
    display: inline-flex;
    border: 1.5px solid rgba(28, 38, 32, 0.22);
    border-radius: 999px;
    background: var(--jr-linen);
    padding: 2px;
    gap: 2px;
}

.jr-toggle-opt {
    appearance: none;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--jr-ink-soft);
    padding: 0.28rem 0.9rem;
    font-size: 0.8125rem;
    font-weight: 650;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.jr-toggle-opt[aria-pressed="true"] {
    background: var(--jr-brand);
    color: var(--jr-linen);
}

/* Inline calendar - always open, so no native popup ever covers the confirm button. */
.jr-cal {
    border: 1.5px solid rgba(28, 38, 32, 0.14);
    border-radius: 12px;
    background: #FFFDF7;
    padding: 0.6rem 0.65rem 0.7rem;
}

.jr-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}

.jr-cal-title {
    font-family: var(--jr-serif);
    font-size: 0.98rem;
    color: var(--jr-ink);
}

.jr-cal-nav {
    appearance: none;
    border: 1.5px solid rgba(28, 38, 32, 0.2);
    background: transparent;
    color: var(--jr-ink-soft);
    border-radius: 8px;
    width: 30px;
    height: 30px;
    font-size: 1.1rem;
    line-height: 1;
    display: inline-grid;
    place-items: center;
    transition: border-color 0.12s ease, color 0.12s ease, background-color 0.12s ease;
}

.jr-cal-nav:not(:disabled):hover {
    border-color: var(--jr-brand);
    color: var(--jr-brand);
    background: rgba(31, 61, 42, 0.06);
}

.jr-cal-nav:disabled { opacity: 0.35; cursor: default; }

.jr-cal-week,
.jr-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.jr-cal-week span {
    text-align: center;
    font-size: 0.62rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--jr-ink-soft);
    padding-bottom: 0.25rem;
}

.jr-cal-day {
    appearance: none;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--jr-ink);
    font-size: 0.85rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    height: clamp(26px, 3.6vh, 32px);
    transition: background-color 0.12s ease, color 0.12s ease;
}

.jr-cal-day:not(:disabled):hover { background: rgba(31, 61, 42, 0.1); }

.jr-cal-day:disabled { color: rgba(28, 38, 32, 0.28); cursor: default; }

.jr-cal-today { box-shadow: inset 0 0 0 1.5px rgba(217, 106, 72, 0.55); }

.jr-cal-picked {
    background: var(--jr-brand);
    color: var(--jr-linen);
}

.jr-cal-picked:not(:disabled):hover { background: var(--jr-brand); }

.jr-cal-inrange { background: rgba(31, 61, 42, 0.14); }

.jr-date-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.jr-date-readout {
    font-family: var(--jr-serif);
    font-size: 0.92rem;
    color: var(--jr-ink);
}

.jr-date-season {
    margin: 0;
    font-family: var(--jr-serif);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--jr-ink-soft);
}

/* ------------ guest slider ------------ */

.jr-guests { display: flex; flex-direction: column; gap: 0.8rem; }

.jr-guests-readout {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.jr-guests-count {
    font-family: var(--jr-serif);
    font-weight: 700;
    font-size: clamp(2.6rem, 6vw, 3.6rem);
    line-height: 1;
    color: var(--jr-brand);
    font-variant-numeric: tabular-nums;
    min-width: 3ch;
}

.jr-guests-word {
    font-size: 1rem;
    color: var(--jr-ink-soft);
    font-weight: 600;
}

.jr-guests-quip {
    margin-left: auto;
    font-family: var(--jr-serif);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--jr-rust);
}

.jr-quip-pop { animation: jr-quip 0.35s ease-out; }

@keyframes jr-quip {
    from { transform: translateY(5px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.jr-range {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 34px;
    background: transparent;
}

.jr-range::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--jr-brand), var(--jr-amber) 70%, var(--jr-rust));
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}

.jr-range::-moz-range-track {
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--jr-brand), var(--jr-amber) 70%, var(--jr-rust));
}

.jr-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 28px;
    height: 28px;
    margin-top: -10px;
    border-radius: 50%;
    background: var(--jr-linen);
    border: 3px solid var(--jr-brand);
    box-shadow: 0 3px 8px rgba(10, 20, 12, 0.4);
    cursor: grab;
    transition: transform 0.1s ease;
}

.jr-range::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.12); }

.jr-range::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--jr-linen);
    border: 3px solid var(--jr-brand);
    box-shadow: 0 3px 8px rgba(10, 20, 12, 0.4);
    cursor: grab;
}

.jr-guests-presets {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

/* ------------ address ------------ */

.jr-address-wrap { display: flex; flex-direction: column; gap: 0.55rem; }

.jr-addr-modes { display: flex; gap: 0.4rem; flex-wrap: wrap; }

.jr-addr-modes .jr-chip[aria-selected="true"] {
    border-color: var(--jr-brand);
    color: var(--jr-linen);
    background: var(--jr-brand);
}

.jr-address {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem 0.7rem;
}

.jr-field-span { grid-column: 1 / -1; }

/* Address search above the map: suggestions overlay the map so picking a place never
   changes the card's height - the whole pane stays fixed-size, no internal scroll. */
.jr-map-search {
    position: relative;
    margin-bottom: 0.55rem;
}

.jr-map-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1200;                   /* above the Leaflet panes AND its zoom/attribution controls (z 1000) */
    background: var(--jr-linen);
    border: 1.5px solid rgba(28, 38, 32, 0.22);
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(5, 10, 6, 0.3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.jr-map-result {
    appearance: none;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 0.55rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.jr-map-result:hover, .jr-map-result:focus-visible { background: rgba(31, 61, 42, 0.08); }

.jr-map-result + .jr-map-result { border-top: 1px solid rgba(28, 38, 32, 0.1); }

.jr-map-result-name {
    font-size: 0.875rem;
    font-weight: 650;
    color: var(--jr-ink);
}

.jr-map-result-detail {
    font-size: 0.75rem;
    color: var(--jr-ink-soft);
}

.jr-map-result-none {
    margin: 0;
    padding: 0.6rem 0.8rem;
    font-family: var(--jr-serif);
    font-style: italic;
    font-size: 0.85rem;
    color: var(--jr-ink-soft);
}

/* Leaflet pin picker (#6) - height budgeted so search + map + locality field all fit the
   dock with no internal scroll. */
.jr-map {
    height: clamp(180px, 28vh, 240px);
    border-radius: 12px;
    border: 1.5px solid rgba(28, 38, 32, 0.22);
    overflow: hidden;
    background: var(--jr-linen-deep);
    cursor: crosshair;
}

/* Keep the map's own zoom + attribution controls beneath the search suggestions dropdown,
   so a suggestion list overlapping the map is never obscured by the +/- buttons. */
.jr-map .leaflet-top,
.jr-map .leaflet-bottom { z-index: 400; }

.jr-map-hint {
    margin: 0.45rem 0 0.6rem;
    font-family: var(--jr-serif);
    font-style: italic;
    font-size: 0.85rem;
    color: var(--jr-ink-soft);
}

[data-pane="pin"][hidden] { display: none; }

/* ------------ welcome ------------ */

.jr-dock-welcome { width: min(620px, calc(100vw - 2rem)); }

.jr-welcome {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.jr-welcome-portrait {
    flex: none;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: var(--jr-veld) url('/rory_happy.png') center 18% / 150% auto no-repeat;
    box-shadow: 0 0 0 3px var(--jr-linen), 0 0 0 4.5px rgba(31, 61, 42, 0.4);
}

.jr-welcome-speech { min-width: 0; }

.jr-welcome-speech p {
    margin: 0 0 0.55rem;
    font-family: var(--jr-serif);
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--jr-ink);
}

.jr-welcome-sig {
    font-style: italic;
    color: var(--jr-ink-soft);
}

.jr-langs {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(28, 38, 32, 0.12);
}

.jr-langs-label {
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--jr-ink-soft);
}

.jr-langs-row { display: inline-flex; gap: 0.35rem; flex-wrap: wrap; }

.jr-lang {
    appearance: none;
    border: 1.5px solid rgba(28, 38, 32, 0.2);
    background: transparent;
    color: var(--jr-ink-soft);
    border-radius: 999px;
    padding: 0.3rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    transition: all 0.12s ease;
}

.jr-lang-on {
    background: var(--jr-brand);
    border-color: var(--jr-brand);
    color: var(--jr-linen);
}

/* ------------ finale ------------ */

.jr-dock-finale { width: min(740px, calc(100vw - 2rem)); }

.jr-summary {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 0.5rem;
}

.jr-summary-chip {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    background: var(--jr-linen-deep);
    border: 1.5px solid rgba(28, 38, 32, 0.12);
    border-radius: 11px;
    padding: 0.55rem 0.7rem;
    min-width: 0;
}

.jr-summary-icon {
    flex: none;
    width: 22px;
    height: 22px;
    color: var(--jr-rust);
}

.jr-summary-icon svg { width: 100%; height: 100%; }

.jr-summary-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.jr-summary-text small {
    font-size: 0.66rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--jr-ink-soft);
}

.jr-summary-text strong {
    font-size: 0.85rem;
    color: var(--jr-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jr-finale-hint {
    margin: 0.8rem 0 0;
    font-size: 0.8rem;
    color: var(--jr-ink-soft);
    font-style: italic;
    font-family: var(--jr-serif);
}

/* ------------ Ask Rory (inline) ------------ */

/* Slim pill in the gap between the live bubble and the dock's top edge. */
.jr-ask {
    position: absolute;
    left: calc(var(--jr-rory-x, clamp(10px, 2.5%, 26px)) + clamp(104px, 11.5vw, 168px) + 14px);
    bottom: calc(100% + 7px);
    z-index: 3;
    display: flex;
    gap: 0.4rem;
    width: min(460px, calc(100% - var(--jr-rory-x, clamp(10px, 2.5%, 26px)) - clamp(104px, 11.5vw, 168px) - 34px));
    transition: left 0.9s cubic-bezier(0.3, 0.8, 0.3, 1);
}

.jr-ask input {
    flex: 1;
    min-width: 0;
    border: 0;
    border-radius: 999px;
    padding: 0.42rem 0.95rem;
    background: rgba(14, 27, 20, 0.66);
    color: var(--jr-linen);
    font: inherit;
    font-size: 0.85rem;
    box-shadow: 0 4px 14px rgba(4, 9, 5, 0.3), 0 0 0 1px rgba(232, 201, 122, 0.28);
    backdrop-filter: blur(4px);
}

.jr-ask input::placeholder { color: rgba(251, 246, 236, 0.55); font-style: italic; }

.jr-ask input:focus {
    outline: none;
    box-shadow: 0 4px 14px rgba(4, 9, 5, 0.3), 0 0 0 1.5px var(--jr-straw);
}

.jr-ask button {
    border: 0;
    border-radius: 999px;
    background: var(--jr-brand);
    color: var(--jr-linen);
    font-weight: 600;
    font-size: 0.8125rem;
    padding: 0 0.95rem;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(4, 9, 5, 0.3);
}

.jr-ask button:hover { filter: brightness(1.12); }

/* ------------ veil / toast / noscript ------------ */

.jr-veil {
    position: absolute;
    inset: 0;
    z-index: 9;
    display: grid;
    place-items: center;
    background:
        radial-gradient(ellipse at 30% 80%, rgba(242, 166, 90, 0.12), transparent 55%),
        linear-gradient(180deg, #0A1410, #0E1B14 60%, #122218);
    color: var(--jr-linen);
    text-align: center;
    padding: 1.5rem;
}

.jr-veil[hidden] { display: none; }

.jr-veil-state { max-width: 420px; display: flex; flex-direction: column; align-items: center; gap: 0.7rem; }

.jr-veil-state h1 {
    font-family: var(--jr-serif);
    font-size: 1.5rem;
    margin: 0;
}

.jr-veil-state p { margin: 0; color: rgba(251, 246, 236, 0.75); font-size: 0.95rem; line-height: 1.5; }

.jr-veil .jr-btn-ghost { color: var(--jr-straw); box-shadow: inset 0 0 0 1.5px rgba(232, 201, 122, 0.5); }
.jr-veil .jr-btn-ghost:hover { background: rgba(232, 201, 122, 0.12); }

.jr-veil-spinner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid rgba(232, 201, 122, 0.25);
    border-top-color: var(--jr-straw);
    animation: jr-spin 0.9s linear infinite;
}

@keyframes jr-spin { to { transform: rotate(360deg); } }

.jr-toast {
    position: absolute;
    top: 4.6rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    background: rgba(14, 27, 20, 0.92);
    color: var(--jr-linen);
    border-radius: 999px;
    padding: 0.5rem 1.1rem;
    font-size: 0.85rem;
    box-shadow: 0 10px 26px rgba(4, 9, 5, 0.5), 0 0 0 1px rgba(232, 201, 122, 0.25);
    animation: jr-rise-in 0.2s ease-out;
    max-width: min(480px, calc(100vw - 2rem));
    text-align: center;
}

@keyframes jr-rise-in {
    from { transform: translate(-50%, 10px); opacity: 0; }
    to { transform: translate(-50%, 0); opacity: 1; }
}

.jr-noscript {
    position: absolute;
    inset: 0;
    z-index: 11;
    display: grid;
    place-content: center;
    text-align: center;
    background: var(--jr-night);
    color: var(--jr-linen);
    padding: 2rem;
}

.jr-noscript h1 { font-family: var(--jr-serif); }

/* ------------ responsive ------------ */

@media (max-width: 860px) {
    .jr-rory-sprite { width: 104px; height: 104px; }

    /* Small screens: Rory holds his post on the left - no room to stroll. */
    .jr-rory { left: 10px !important; }

    .jr-bubbles {
        left: 118px !important;
        bottom: calc(100% + 44px);
        max-width: calc(100% - 130px) !important;
    }

    .jr-ask {
        left: 118px !important;
        bottom: calc(100% + 6px);
        width: calc(100% - 130px) !important;
    }
}

@media (max-width: 720px) {
    .jr-dock {
        left: 0;
        right: 0;
        bottom: 0;
        transform: none;
        width: 100%;
        border-radius: 18px 18px 0 0;
        max-height: 62vh;
    }

    .jr-cards-sm { grid-template-columns: repeat(2, 1fr); }
    .jr-cards-md { grid-template-columns: repeat(2, 1fr); }
    .jr-cards-lg { grid-template-columns: 1fr 1fr; }

    .jr-address { grid-template-columns: 1fr; }

    .jr-brand-name { display: none; }

    .jr-bunting { top: 3rem; }

    /* Small screens: keep only the freshest ghost so the stack doesn't swallow the scene. */
    .jr-bubble-ghost { display: none; }
    .jr-bubbles .jr-bubble-ghost:nth-last-child(2) { display: block; }

    .jr-welcome { flex-direction: column; align-items: center; text-align: center; }

    .jr-guests-quip { margin-left: 0; width: 100%; }

    /* Continue action sits on the right for one-handed thumb reach. The primary button
       spans the row (rightmost when a ghost "skip" shares the line); a lone ghost link
       still reads as secondary above it. */
    .jr-dock-actions { justify-content: flex-end; }
    .jr-dock-actions .jr-btn-primary {
        order: 2;
        margin-left: auto;
        flex: 1 1 auto;
        justify-content: center;
    }
    .jr-dock-actions .jr-btn-ghost {
        order: 1;
        flex: 0 0 auto;
    }
}

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

@media (prefers-reduced-motion: reduce) {
    .journey *, .journey *::before, .journey *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}