:root {
    --ink: #183234;
    --ink-soft: #4f6464;
    --brand-950: #00281d;
    --brand-900: #004831;
    --brand-800: #006247;
    --brand-700: #087a5a;
    --brand-100: #cde9dc;
    --brand-50: #edf8f2;
    --coral: #e87551;
    --coral-dark: #c85838;
    --coral-soft: #fce7dc;
    --sand: #f5f2eb;
    --sand-deep: #ebe4d8;
    --paper: #fffefb;
    --white: #fff;
    --success: #2c795e;
    --success-soft: #e2f2e9;
    /* 5.0:1 trên --warning-soft — badge/kpi dùng cỡ chữ 10–11px nên cần đạt
       ngưỡng WCAG AA 4.5:1 (màu cũ #9b6726 chỉ đạt 4.32:1). */
    --warning: #8f5d20;
    --warning-soft: #fff1d9;
    --danger: #b34343;
    --danger-soft: #fae3e1;
    --info: #356c91;
    --info-soft: #e5f0f6;
    --line: #dedfd9;
    --line-soft: #ecece6;
    --shadow-sm: 0 2px 10px rgba(0, 72, 49, 0.07);
    --shadow-md: 0 14px 38px rgba(0, 72, 49, 0.13);
    --shadow-lg: 0 28px 70px rgba(0, 40, 29, 0.2);
    --radius-sm: 9px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --sidebar: 258px;
    --font-sans:
        "Google Sans", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP", system-ui,
        -apple-system, sans-serif;
    --font-serif:
        "Google Sans", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP", system-ui,
        -apple-system, sans-serif;
    --font-travel-serif:
        "Lora", "Noto Serif", "Yu Mincho", YuMincho, Georgia, "Times New Roman", serif;
}

/* P1: weather, Travel Care and transport itinerary surfaces. These use the
   existing calm operations palette and stay legible in both guest and staff
   shells. */
.p1-weather-ops {
    border: 1px solid color-mix(in srgb, var(--line) 72%, var(--brand-800) 28%);
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--paper) 92%, var(--brand-800) 8%),
        var(--paper)
    );
}

/* Weather reads cool/sky, Travel Care reads warm/care — so the two stacked
   cards no longer look identical. */
.p1-weather-card {
    position: relative;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--line-soft) 58%, var(--ocean-soft, #cfe6e2) 42%);
    background: linear-gradient(
        158deg,
        color-mix(in srgb, var(--ocean-soft, #e5f2f0) 58%, var(--paper)),
        var(--paper) 60%
    );
    box-shadow: var(--shadow-sm);
    animation: weather-card-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Content sits above the animated sky layer. */
.p1-weather-card > *:not(.p1-weather-card__sky) {
    position: relative;
    z-index: 1;
}

/* ── Animated sky layer ─────────────────────────────────────────────
   One decorative element per card; its look is driven by [data-weather]. */
.p1-weather-card__sky {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.85;
}

/* Drifting cloud shapes in the backdrop. */
.wx-cloud {
    position: absolute;
    width: 72px;
    height: auto;
    filter: blur(0.3px);
    will-change: transform;
    animation: wx-float 12s ease-in-out infinite;
}
.wx-cloud path {
    fill: #ffffff;
}
.wx-cloud--dark path {
    fill: #93a6bf;
}
.wx-cloud--a {
    top: 12%;
    left: 6%;
    width: 82px;
    opacity: 0.55;
    animation-duration: 13s;
}
.wx-cloud--b {
    top: 40%;
    right: 8%;
    width: 60px;
    opacity: 0.4;
    animation-duration: 17s;
    animation-delay: -5s;
}
.wx-cloud--c {
    top: 64%;
    left: 22%;
    width: 48px;
    opacity: 0.3;
    animation-duration: 21s;
    animation-delay: -9s;
}
.wx-cloud--d {
    top: 23%;
    right: 31%;
    width: 38px;
    opacity: 0.24;
    animation-duration: 19s;
    animation-delay: -12s;
}
.wx-cloud--e {
    top: 76%;
    right: 38%;
    width: 52px;
    opacity: 0.2;
    animation-duration: 23s;
    animation-delay: -17s;
}
.p1-weather-card[data-weather="STORM"] .wx-cloud--a {
    top: 10%;
    left: 10%;
    opacity: 0.6;
}
.p1-weather-card[data-weather="STORM"] .wx-cloud--b {
    top: 22%;
    right: 14%;
    width: 68px;
    opacity: 0.45;
}

/* Crisp sun disc for clear days (complements the CSS glow). */
.wx-sun {
    position: absolute;
    top: -22px;
    right: -14px;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffe294, #ffd062 52%, transparent 72%);
    opacity: 0.75;
    animation: wx-sun-pulse 5s ease-in-out infinite;
}

@keyframes wx-float {
    0%,
    100% {
        transform: translate(-9px, 0);
    }
    50% {
        transform: translate(9px, -3px);
    }
}
@keyframes wx-sun-pulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.65;
    }
    50% {
        transform: scale(1.08);
        opacity: 0.85;
    }
}

/* Sunny: a warm sun glow that breathes in the top-right corner.
   .card.* specificity so it wins over the mobile-cascade card override. */
.card.p1-weather-card[data-weather="SUNNY"] {
    background: linear-gradient(
        158deg,
        color-mix(in srgb, var(--gold-soft, #fff3cf) 55%, var(--paper)),
        var(--paper) 62%
    );
    border-color: color-mix(in srgb, var(--line-soft) 55%, #f3d489 45%);
}
.p1-weather-card[data-weather="SUNNY"] .p1-weather-card__sky {
    background: radial-gradient(
        120px 120px at 88% -10%,
        color-mix(in srgb, #ffd76a 70%, transparent),
        transparent 70%
    );
    animation: weather-sun-glow 4.5s ease-in-out infinite;
}

/* Storm: cool bluish wash with an occasional lightning flash. */
.card.p1-weather-card[data-weather="STORM"] {
    background: linear-gradient(
        158deg,
        color-mix(in srgb, #c9d6e6 45%, var(--paper)),
        var(--paper) 60%
    );
    border-color: color-mix(in srgb, var(--line-soft) 55%, #9fb2cc 45%);
}
.p1-weather-card[data-weather="STORM"] .p1-weather-card__sky {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, #ffffff 85%, transparent),
        transparent 55%
    );
    opacity: 0;
    animation: weather-lightning 6s steps(1, end) infinite;
}

/* Showers: soft raindrops drifting down (rain overlay for SHOWERS only). */
.p1-weather-card[data-weather="SHOWERS"] .p1-weather-card__sky {
    background-image:
        radial-gradient(
            1.6px 7px at 20% 0%,
            color-mix(in srgb, var(--brand-500, #3f8f7d) 45%, transparent),
            transparent
        ),
        radial-gradient(
            1.6px 7px at 55% 0%,
            color-mix(in srgb, var(--brand-500, #3f8f7d) 40%, transparent),
            transparent
        ),
        radial-gradient(
            1.6px 7px at 80% 0%,
            color-mix(in srgb, var(--brand-500, #3f8f7d) 45%, transparent),
            transparent
        );
    background-size: 100% 44px;
    opacity: 0.5;
    animation: weather-rain 1.1s linear infinite;
}

/* Partly cloudy: warm sun peeking through a light haze. */
.card.p1-weather-card[data-weather="PARTLY_CLOUDY"] {
    background: linear-gradient(
        158deg,
        color-mix(in srgb, var(--gold-soft, #fff3cf) 32%, var(--paper)),
        var(--paper) 58%
    );
    border-color: color-mix(in srgb, var(--line-soft) 62%, #ecd9a8 38%);
}
.p1-weather-card[data-weather="PARTLY_CLOUDY"] .p1-weather-card__sky {
    background: radial-gradient(
        90px 90px at 90% -12%,
        color-mix(in srgb, #ffd76a 55%, transparent),
        transparent 70%
    );
    animation: weather-sun-glow 5s ease-in-out infinite;
}
/* A smaller, dimmer sun for partly-cloudy vs the full sunny disc. */
.p1-weather-card[data-weather="PARTLY_CLOUDY"] .wx-sun {
    width: 68px;
    height: 68px;
    opacity: 0.55;
}

/* Cloudy: neutral overcast wash — clouds, no rain. */
.card.p1-weather-card[data-weather="CLOUDY"] {
    background: linear-gradient(
        158deg,
        color-mix(in srgb, #dbe3ea 42%, var(--paper)),
        var(--paper) 60%
    );
    border-color: color-mix(in srgb, var(--line-soft) 62%, #c2ccd6 38%);
}

/* Real scene on the compact/current weather card. A pale glass wash keeps all
   dynamic copy legible without hiding the destination photography. */
.card.p1-weather-card[data-weather][data-weather-scene] {
    border-color: rgba(255, 255, 255, 0.82);
    background-image:
        linear-gradient(
            105deg,
            rgba(255, 255, 255, 0.96) 0%,
            rgba(255, 255, 255, 0.88) 54%,
            rgba(244, 251, 248, 0.62) 100%
        ),
        var(--weather-scene-image);
    background-position: center;
    background-size: cover;
    box-shadow:
        0 18px 42px rgba(21, 75, 79, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
}
.p1-weather-card[data-weather-scene] .p1-weather-card__sky .wx-cloud,
.p1-weather-card[data-weather-scene] .p1-weather-card__sky .wx-sun,
.p1-weather-card[data-weather-scene] .p1-weather-card__sky .wx-flake {
    display: none;
}

/* Distinct icon-tile colour per condition, so the head glyph isn't one flat
   brand colour on every card. */
.p1-weather-card[data-weather="SUNNY"] .p1-weather-card__icon {
    color: #d98f1c;
    background: color-mix(in srgb, #ffe6a3 62%, white);
}
.p1-weather-card[data-weather="PARTLY_CLOUDY"] .p1-weather-card__icon {
    color: #c58a3a;
    background: color-mix(in srgb, #ffeccb 62%, white);
}
.p1-weather-card[data-weather="CLOUDY"] .p1-weather-card__icon {
    color: #6a7a88;
    background: color-mix(in srgb, #dbe4ec 64%, white);
}
.p1-weather-card[data-weather="SHOWERS"] .p1-weather-card__icon {
    color: #2f80c2;
    background: color-mix(in srgb, #cfe6f7 62%, white);
}
.p1-weather-card[data-weather="SNOW"] .p1-weather-card__icon {
    color: #4f9dc4;
    background: color-mix(in srgb, #d9eefa 64%, white);
}
.p1-weather-card[data-weather="STORM"] .p1-weather-card__icon {
    color: #6a5cd0;
    background: color-mix(in srgb, #e2ddf8 64%, white);
}

/* Snow: cool light wash with drifting flakes. */
.card.p1-weather-card[data-weather="SNOW"] {
    background: linear-gradient(
        158deg,
        color-mix(in srgb, #e6eef5 52%, var(--paper)),
        var(--paper) 60%
    );
    border-color: color-mix(in srgb, var(--line-soft) 58%, #c6d6e4 42%);
}
.p1-weather-card[data-weather="SNOW"] .wx-flake {
    position: absolute;
    top: -8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 3px rgb(120 150 180 / 35%);
    opacity: 0.85;
    animation: weather-snow 5.5s linear infinite;
}
.p1-weather-card[data-weather="SNOW"] .wx-flake--1 {
    left: 12%;
    animation-duration: 5s;
    animation-delay: -0.5s;
}
.p1-weather-card[data-weather="SNOW"] .wx-flake--2 {
    left: 28%;
    width: 5px;
    height: 5px;
    animation-duration: 6.5s;
    animation-delay: -2s;
}
.p1-weather-card[data-weather="SNOW"] .wx-flake--3 {
    left: 45%;
    animation-duration: 5.8s;
    animation-delay: -3.5s;
}
.p1-weather-card[data-weather="SNOW"] .wx-flake--4 {
    left: 62%;
    width: 4px;
    height: 4px;
    animation-duration: 7s;
    animation-delay: -1s;
}
.p1-weather-card[data-weather="SNOW"] .wx-flake--5 {
    left: 78%;
    animation-duration: 5.3s;
    animation-delay: -4s;
}
.p1-weather-card[data-weather="SNOW"] .wx-flake--6 {
    left: 90%;
    width: 5px;
    height: 5px;
    animation-duration: 6.2s;
    animation-delay: -2.5s;
}
@keyframes weather-snow {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }
    12% {
        opacity: 0.85;
    }
    100% {
        transform: translateY(240px) translateX(14px);
        opacity: 0;
    }
}

/* Weather glyph in the head gets a gentle life of its own. */
.p1-weather-card__icon {
    animation: weather-icon-bob 3.6s ease-in-out infinite;
}
.p1-weather-card[data-weather="SUNNY"] .p1-weather-card__icon .icon {
    animation: weather-icon-spin 14s linear infinite;
    transform-origin: center;
}
.p1-weather-card[data-weather="STORM"] .p1-weather-card__icon .icon {
    animation: weather-icon-shake 5s ease-in-out infinite;
}

/* Quick-stat tiles fade up in sequence after the card lands. */
.p1-weather-card__quickstats > div {
    animation: weather-stat-in 0.45s ease both;
}
.p1-weather-card__quickstats > div:nth-child(1) {
    animation-delay: 0.14s;
}
.p1-weather-card__quickstats > div:nth-child(2) {
    animation-delay: 0.22s;
}
.p1-weather-card__quickstats > div:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes weather-card-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes weather-stat-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes weather-sun-glow {
    0%,
    100% {
        opacity: 0.55;
        transform: scale(1);
    }
    50% {
        opacity: 0.95;
        transform: scale(1.12);
    }
}
@keyframes weather-rain {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 0 44px;
    }
}
@keyframes weather-lightning {
    0%,
    92%,
    100% {
        opacity: 0;
    }
    93%,
    96% {
        opacity: 0.9;
    }
    94% {
        opacity: 0.2;
    }
}
@keyframes weather-icon-bob {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}
@keyframes weather-icon-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
@keyframes weather-icon-shake {
    0%,
    88%,
    100% {
        transform: translateX(0) rotate(0deg);
    }
    90% {
        transform: translateX(-2px) rotate(-4deg);
    }
    92% {
        transform: translateX(2px) rotate(4deg);
    }
    94% {
        transform: translateX(-1px) rotate(-2deg);
    }
}
@media (prefers-reduced-motion: reduce) {
    .p1-weather-card,
    .p1-weather-card__sky,
    .p1-weather-card__icon,
    .p1-weather-card__icon .icon,
    .p1-weather-card__quickstats > div,
    .wx-cloud,
    .wx-sun,
    .wx-flake {
        animation: none !important;
    }
    .wx-flake {
        display: none;
    }
    .p1-weather-card__sky {
        opacity: 0.4;
    }
}

/* Flight editor (Back Office) — the drawer is grouped by purpose, not by
   whether a field is required: identity, then the two legs, then everything a
   guest will actually see, then one disclosure for the rare codeshare case.
   Optional fields stay beside the required field they describe (IATA next to
   its airport, gate next to its terminal) rather than being collected into a
   separate "optional" pile the operator would have to cross-reference. */
/* Arrangement board: one row per guest, so the whole trip can be audited at a
   glance. Guests already holding a flight are locked to IKIGAI_MANAGED by the
   API, so their row renders as a read-only badge instead of a live control. */
.flight-arrangement-board {
    margin-top: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--paper);
}
.flight-arrangement-board__head {
    padding: 15px 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    list-style: none;
}
.flight-arrangement-board__head::-webkit-details-marker {
    display: none;
}
.flight-arrangement-board[open] .flight-arrangement-board__head {
    border-bottom: 1px solid var(--line-soft);
}
.flight-arrangement-board__title {
    min-width: 0;
    display: grid;
    gap: 2px;
}
.flight-arrangement-board__title .eyebrow {
    margin: 0;
}
.flight-arrangement-board__title strong {
    color: var(--ink);
    font-size: 1rem;
}
.flight-arrangement-board__counts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.flight-arrangement-board__counts > .icon {
    width: 18px;
    height: 18px;
    margin-left: 2px;
    color: var(--ink-soft);
    transition: transform 0.18s ease;
}
.flight-arrangement-board[open] .flight-arrangement-board__counts > .icon {
    transform: rotate(180deg);
}
/* An explicit `display` on a direct child of <details> overrides the UA's
   display:none for the closed state, so the panel would never collapse. Scope
   every such rule to [open] and let the UA hide it otherwise. */
.flight-arrangement-board[open] > .flight-arrangement-board__body {
    padding: 14px 16px 16px;
    display: grid;
    gap: 12px;
}
.flight-arrangement-board__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.flight-arrangement-board__toolbar > .field-help {
    max-width: 62ch;
    margin: 0;
    font-size: 12.5px;
}
.flight-arrangement-board__search {
    flex: 0 1 260px;
}
.flight-arrangement-board__search .input {
    min-height: 40px;
}
.flight-arrangement-board__empty {
    margin: 0;
    padding: 18px 4px;
    color: var(--ink-soft);
    font-size: 13px;
    text-align: center;
}
.flight-arrangement-board form {
    display: grid;
    gap: 12px;
}
.flight-arrangement-board__actions {
    display: flex;
    justify-content: flex-end;
}
.flight-arrangement-board__actions > .button {
    width: auto;
    min-height: 42px;
    padding-inline: 18px;
}
.flight-arrangement-table__scroll {
    overflow-x: auto;
}
.flight-arrangement-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}
.flight-arrangement-table th,
.flight-arrangement-table td {
    padding: 14px 16px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--line-soft);
}
.flight-arrangement-table th:first-child,
.flight-arrangement-table td:first-child {
    padding-left: 12px;
}
.flight-arrangement-table th:last-child,
.flight-arrangement-table td:last-child {
    padding-right: 12px;
}
.flight-arrangement-table thead th {
    padding-block: 8px;
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.flight-arrangement-table tbody th {
    min-width: 150px;
    color: var(--ink);
    font-weight: 750;
}
.flight-arrangement-table tbody tr:last-child th,
.flight-arrangement-table tbody tr:last-child td {
    border-bottom: 0;
}
.flight-arrangement-table tr.is-managed {
    background: var(--brand-50);
}
.flight-arrangement-table__status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.flight-arrangement-table__status small {
    color: var(--ink-soft);
    font-size: 11px;
}
.flight-arrangement-table__status .select {
    min-width: 170px;
}
.flight-arrangement-table__muted {
    color: var(--ink-soft);
}
.flight-arrangement-table .input,
.flight-arrangement-table .select {
    min-height: 38px;
    margin: 0;
}
@media (max-width: 640px) {
    .flight-arrangement-board {
        padding: 13px 12px;
    }
    .flight-arrangement-table {
        min-width: 520px;
    }
}

#flight-form {
    gap: 16px;
}
#flight-form > .field-help {
    margin: 0;
    padding: 10px 12px;
    border-left: 3px solid var(--brand-300);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--brand-50);
}
.flight-form__block {
    min-width: 0;
    display: grid;
    gap: 12px;
    padding: 15px 16px 17px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--paper);
}
.flight-form__block-title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--brand-800);
    font-size: 13px;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.flight-form__block-title .icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}
/* Auto-fill panel. It reuses the block shell but is tinted so it reads as a
   tool acting on the form rather than another group of fields to fill in. */
.flight-lookup {
    min-width: 0;
    display: grid;
    gap: 10px;
    padding: 15px 16px 17px;
    border: 1px dashed var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-2, #f7f5ef);
}
.flight-lookup__title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--brand-800);
    font-size: 13px;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.flight-lookup__title .icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}
.flight-lookup > .field-help {
    margin: -4px 0 0;
}
.flight-lookup__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px;
}
/* The button drops onto its own row before the inputs get too narrow to read
   the flight number back. */
@media (max-width: 560px) {
    .flight-lookup__row {
        grid-template-columns: minmax(0, 1fr);
    }
}
.flight-lookup__row .button {
    min-height: 44px;
}
.flight-lookup__status:empty {
    display: none;
}
.flight-lookup__status {
    display: grid;
    justify-items: start;
    gap: 8px;
    padding: 9px 11px;
    border-radius: var(--radius-sm, 8px);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
}
.flight-lookup__status--busy {
    color: #5c6b67;
    background: #eef1f0;
}
.flight-lookup__status--done {
    color: #216146;
    background: #ecf7f0;
}
.flight-lookup__status--error {
    color: #8a2f24;
    background: #fdeeea;
}
.flight-lookup__conflict {
    margin: 0;
    font-weight: 700;
}
.flight-form__block > .field-help {
    margin: -4px 0 0;
    font-size: 12.5px;
}
.flight-form__block .field {
    margin: 0;
}
/* `.drawer--form .form-grid` (gap: 14px 16px) sits later in the file with the
   same specificity, so these need the #flight-form id to win. The row gap is
   matched to the surrounding stack gap; otherwise paired fields sit further
   apart vertically than the single fields above and below them. */
#flight-form .flight-form__block .form-grid {
    gap: 12px 14px;
}
.flight-form__block .field .field-help {
    margin: 0;
    color: var(--ink-soft);
    font-size: 11.5px;
    line-height: 1.35;
}
/* Each leg is one airport: name, code, clock, terminal, gate. */
.flight-form__leg {
    min-width: 0;
    margin: 0;
    padding: 13px 14px 15px;
    display: grid;
    /* Same 12px as the paired-field rows inside it, so the three rows of a leg
       are evenly spaced whether a row holds one field or two. */
    gap: 12px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    background: var(--brand-50);
}
.flight-form__leg > legend {
    padding: 0 6px;
    color: var(--brand-800);
    font-size: 13px;
    font-weight: 800;
}
.flight-form__leg .input {
    background: var(--white);
}
/* These two are self-contained panels, so they deliberately do NOT carry
   .companion-disclosure — that class adds `padding: 13px 0 0` plus a top
   border, which stacked on top of the summary's own padding and left a thick
   dead band above the first control. */
.flight-form__advanced {
    margin: 0;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    background: var(--paper);
}
.flight-form__advanced > summary {
    min-height: 46px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--ink-soft);
    cursor: pointer;
    font-size: 13px;
    font-weight: 750;
    list-style: none;
}
.flight-form__advanced > summary::-webkit-details-marker {
    display: none;
}
.flight-form__advanced > summary .icon {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    transition: transform 0.18s ease;
}
.flight-form__advanced[open] > summary {
    border-bottom: 1px solid var(--line-soft);
    color: var(--brand-800);
}
.flight-form__advanced[open] > summary .icon {
    transform: rotate(180deg);
}
.flight-form__advanced[open] > .flight-form__advanced-body {
    padding: 13px 16px 15px;
    display: grid;
    gap: 11px;
}
.flight-form__advanced-body > .field-help {
    margin: 0;
    font-size: 12.5px;
}
#flight-form .flight-form__advanced-body > .form-grid {
    gap: 11px 14px;
}
.flight-form__advanced .field {
    margin: 0;
}
.flight-form__block .choice-grid {
    gap: 8px;
}
.flight-form__block .choice {
    min-height: 38px;
    padding: 7px 10px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    background: var(--brand-50);
}

/* Passenger detail now lives inside the flight form and is saved by the same
   button, so it reads as a nested section rather than a second form. */
.flight-passenger-editor {
    display: grid;
    gap: 8px;
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
}
.flight-passenger-editor h4 {
    margin: 0;
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
}
.flight-passenger-disclosure {
    margin: 0;
    padding: 0;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    background: var(--brand-50);
}
.flight-passenger-disclosure > summary {
    min-height: 44px;
    padding: 11px 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--brand-800);
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 750;
    list-style: none;
}
.flight-passenger-disclosure > summary::-webkit-details-marker {
    display: none;
}
.flight-passenger-disclosure__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.flight-passenger-disclosure__meta {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}
.flight-passenger-disclosure__meta small {
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 700;
}
.flight-passenger-disclosure__meta .icon {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    color: var(--ink-soft);
    transition: transform 0.18s ease;
}
.flight-passenger-disclosure[open] > summary {
    border-bottom: 1px solid var(--line-soft);
}
.flight-passenger-disclosure[open] .flight-passenger-disclosure__meta .icon {
    transform: rotate(180deg);
}
.flight-passenger-disclosure[open] > .flight-passenger-fields {
    display: grid;
    gap: 11px;
    padding: 13px;
}
.flight-passenger-fields > .field-help {
    margin: 0;
    font-size: 12px;
}
/* Nested inside the "For guests" block, so it would otherwise inherit that
   block's 12px row gap and sit a pixel off from its own 11px stack. */
#flight-form .flight-passenger-fields .form-grid {
    gap: 11px 14px;
}
.flight-passenger-fields .field {
    margin: 0;
}
.flight-passenger-fields .input {
    background: var(--white);
}

@media (max-width: 640px) {
    .flight-form__block {
        padding: 13px 12px 15px;
    }
    .flight-form__leg {
        padding: 12px;
    }
    .flight-form__advanced[open] > .flight-form__advanced-body {
        padding-inline: 12px;
    }
}

/* Itinerary sub-tabs (Ngày hành trình / Chuyến bay). Previously split across a
   base block here and an override block near the end of the file; the two
   disagreed on padding, gap, background and the entire active treatment, so
   the first block's `.active` rule never rendered at all. Merged into the
   values that actually shipped, mobile rules included. */
/* Qualified with .day-tabs (always both classes in the markup) because the
   generic `.day-tabs` rule sits later in the file and would otherwise win the
   specificity tie on `gap`. `display`, `margin` and `overflow-x` are left to
   `.day-tabs` on purpose — it has always supplied them here. */
.itinerary-subtabs.day-tabs {
    width: fit-content;
    max-width: 100%;
    padding: 3px;
    gap: 2px;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: var(--paper);
}
.itinerary-subtabs .day-tab {
    min-width: 0;
    min-height: 40px;
    padding: 8px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: var(--ink-soft);
    font-weight: 700;
    white-space: nowrap;
    transition:
        background 0.15s ease,
        color 0.15s ease;
}
.itinerary-subtabs .day-tab .icon {
    width: 17px;
    height: 17px;
}
.itinerary-subtabs .day-tab:hover:not(.active) {
    color: var(--ink);
}
.itinerary-subtabs .day-tab.active {
    border-color: transparent;
    background: var(--brand-50);
    box-shadow: inset 0 -2px 0 var(--brand-700);
    color: var(--brand-900);
}
.itinerary-subtabs .day-tab.active .icon {
    color: var(--brand-700);
}
@media (max-width: 640px) {
    .itinerary-subtabs.day-tabs {
        width: 100%;
    }
    .itinerary-subtabs .day-tab {
        flex: 1 1 0;
        padding-inline: 10px;
    }
}
.flight-workspace {
    display: grid;
    gap: 12px;
}
.flight-workspace__row {
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.flight-workspace__row h2 {
    margin: 3px 0;
    color: var(--ink);
    font-size: 1rem;
}
.flight-workspace__row p:not(.eyebrow),
.flight-workspace__row small {
    color: var(--ink-soft);
}
.flight-workspace__actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}
.flight-workspace__actions .button--small {
    min-height: 44px;
}
.flight-delete-panel {
    margin-top: 18px;
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid color-mix(in srgb, var(--danger) 28%, var(--danger-soft));
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--danger-soft) 46%, var(--paper));
}
.flight-delete-panel > div {
    display: grid;
    gap: 3px;
}
.flight-delete-panel strong {
    color: var(--danger);
    font-size: 13px;
}
.flight-delete-panel small {
    color: var(--ink-soft);
    font-size: 12px;
    line-height: 1.4;
}
.flight-passenger-editor {
    display: grid;
    gap: 10px;
    margin-top: 20px;
}
.flight-passenger-editor h3 {
    margin: 0;
    color: var(--ink);
    font-size: 1rem;
}
.flight-passenger-disclosure {
    margin: 0;
}
@media (max-width: 420px) {
    .flight-workspace__row {
        align-items: stretch;
        flex-direction: column;
    }
    .flight-workspace__actions {
        justify-content: space-between;
    }
    .flight-delete-panel {
        align-items: stretch;
        flex-direction: column;
    }
    .flight-delete-panel .button {
        width: 100%;
    }
}

/* Immersive guest activity detail — the same itinerary image becomes a hero,
   while the practical information remains compact and easy to scan. */
.drawer--activity {
    width: min(600px, 100%);
    background: #f7f1e6;
}
.drawer--activity .drawer__header {
    padding: calc(18px + env(safe-area-inset-top)) 18px 18px;
    position: absolute;
    z-index: 5;
    inset: 0 0 auto;
    align-items: flex-start;
    border: 0;
    background: linear-gradient(180deg, rgba(3, 43, 36, 0.82), rgba(3, 43, 36, 0));
    box-shadow: none;
    backdrop-filter: none;
}
.drawer--activity .drawer__header > div {
    max-width: calc(100% - 60px);
}
.drawer--activity .drawer__header .eyebrow {
    margin-bottom: 5px;
    color: #d8f3e6;
    font-size: 9px;
    letter-spacing: 0.15em;
    text-shadow: 0 2px 8px rgba(0, 30, 24, 0.5);
}
.drawer--activity .drawer__header h2 {
    color: #fff;
    font-family: var(--font-travel-serif);
    font-size: clamp(22px, 6vw, 29px);
    font-weight: 600;
    line-height: 1.08;
    text-shadow: 0 3px 12px rgba(0, 30, 24, 0.62);
}
.drawer--activity .drawer__header .icon-button {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 1px solid rgba(255, 255, 255, 0.68);
    border-radius: 13px;
    color: #fff;
    background: rgba(8, 62, 50, 0.42);
    box-shadow: 0 7px 18px rgba(0, 35, 27, 0.2);
    backdrop-filter: blur(10px);
}
.drawer--activity .drawer__body {
    grid-row: 1 / -1;
    padding: 0;
    background: #f7f1e6;
}
.activity-detail__hero {
    height: clamp(250px, 67vw, 330px);
    position: relative;
    overflow: hidden;
    background: #d8c8a8;
}
.activity-detail__hero > img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transform: scale(1.015);
}
.activity-detail__hero-shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(1, 38, 31, 0.38) 0%, transparent 46%),
        linear-gradient(0deg, rgba(2, 49, 39, 0.6) 0%, transparent 42%);
}
.activity-detail__hero-meta {
    position: absolute;
    right: 18px;
    bottom: 31px;
    left: 18px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
}
.activity-detail__hero-meta > strong {
    min-height: 32px;
    padding: 7px 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(255, 255, 255, 0.48);
    border-radius: 10px;
    color: #fff;
    background: rgba(2, 57, 45, 0.48);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
    box-shadow: 0 7px 20px rgba(0, 30, 24, 0.15);
    backdrop-filter: blur(10px);
}
.activity-detail__hero-meta .icon {
    width: 15px;
    height: 15px;
}
.activity-detail__content {
    margin-top: -20px;
    padding: 20px 16px calc(28px + env(safe-area-inset-bottom));
    position: relative;
    z-index: 2;
    display: grid;
    gap: 12px;
    border-radius: 24px 24px 0 0;
    background:
        radial-gradient(circle at 100% 0%, rgba(212, 240, 227, 0.72), transparent 29%), #f7f1e6;
}
.activity-detail__card {
    padding: 16px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    border: 1px solid rgba(220, 201, 166, 0.55);
    border-radius: 18px;
    background: rgba(255, 253, 248, 0.92);
    box-shadow: 0 9px 23px rgba(82, 61, 31, 0.07);
}
.activity-detail__card-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(145deg, #13927a, #08604f);
    box-shadow: 0 8px 17px rgba(7, 100, 80, 0.17);
}
.activity-detail__card-icon .icon {
    width: 19px;
    height: 19px;
}
.activity-detail__card .eyebrow {
    margin: 1px 0 4px;
    color: #23806e;
    font-size: 8.5px;
    letter-spacing: 0.13em;
}
.activity-detail__card h3 {
    margin: 0 0 7px;
    color: #173f38;
    font-family: var(--font-travel-serif);
    font-size: 17px;
    font-weight: 650;
    line-height: 1.16;
}
.activity-detail__card p:not(.eyebrow) {
    margin: 0;
    color: #536c66;
    font-size: 12px;
    line-height: 1.55;
}
.activity-detail__card--location {
    background: linear-gradient(145deg, #fffdf8 0%, #f0faf6 100%);
}
.activity-detail__card--prepare {
    border-color: rgba(224, 186, 111, 0.43);
    background: linear-gradient(145deg, #fffaf0 0%, #fffdf8 52%, #eef8f4 100%);
}
.activity-detail__card--prepare .activity-detail__card-icon {
    color: #fff9e7;
    background: linear-gradient(145deg, #dda344, #b97728);
    box-shadow: 0 8px 17px rgba(178, 111, 34, 0.18);
}
.activity-detail__meeting {
    margin-top: 11px !important;
    padding: 10px 11px;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    border-radius: 12px;
    color: #355f56 !important;
    background: rgba(223, 243, 235, 0.72);
}
.activity-detail__meeting > .icon {
    width: 19px;
    height: 19px;
    color: #12806a;
}
.activity-detail__meeting small,
.activity-detail__meeting strong {
    display: block;
}
.activity-detail__meeting small {
    margin-bottom: 2px;
    color: #648078;
    font-size: 9px;
}
.activity-detail__meeting strong {
    color: #214b43;
    font-size: 11px;
}
.activity-detail__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.activity-detail__chips > span {
    min-height: 28px;
    padding: 6px 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid rgba(217, 193, 146, 0.48);
    border-radius: 9px;
    color: #425f59;
    background: rgba(255, 249, 234, 0.86);
    font-size: 10px;
    font-weight: 650;
}
.activity-detail__chips .icon {
    width: 14px;
    height: 14px;
    color: #16826c;
}
.activity-detail__update {
    padding: 13px 14px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(215, 151, 59, 0.32);
    border-radius: 16px;
    color: #684b26;
    background: #fff3d8;
}
.activity-detail__update > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #fff;
    background: #d39234;
}
.activity-detail__update p {
    margin: 3px 0 0;
    font-size: 11px;
}
.activity-detail__map {
    overflow: hidden;
    border: 1px solid rgba(25, 131, 108, 0.24);
    border-radius: 18px;
    background: #fffdf8;
    box-shadow: 0 11px 27px rgba(46, 76, 65, 0.09);
}
.activity-detail__map-head {
    padding: 13px 14px 12px;
}
.activity-detail__map-head .eyebrow {
    margin: 0 0 3px;
    color: #23806e;
    font-size: 8.5px;
    letter-spacing: 0.13em;
}
.activity-detail__map-head h3 {
    margin: 0;
    color: #173f38;
    font-family: var(--font-travel-serif);
    font-size: 15px;
    font-weight: 650;
    line-height: 1.2;
}
.activity-detail__map-frame {
    position: relative;
    min-height: 210px;
    background: linear-gradient(135deg, #dcefe8, #b9dcd5);
}
.activity-detail__map-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.7);
}
.activity-detail__map-frame iframe {
    width: 100%;
    height: 230px;
    display: block;
    border: 0;
}
.activity-detail__actions {
    padding-top: 2px;
    display: grid;
    gap: 9px;
}
.drawer--activity .activity-detail__actions .button {
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 10px 14px;
    justify-content: center;
    border-radius: 13px;
    font-size: 12px;
    font-weight: 750;
}
.drawer--activity .activity-detail__actions .schedule-card__route {
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, #075c49, #0a8068);
    box-shadow: 0 11px 23px rgba(5, 92, 73, 0.2);
}
.drawer--activity .activity-detail__actions .button .icon {
    width: 18px;
    height: 18px;
}
@media (max-width: 370px) {
    .activity-detail__hero {
        height: 240px;
    }
    .activity-detail__hero-meta {
        right: 13px;
        left: 13px;
    }
    .activity-detail__content {
        padding-right: 12px;
        padding-left: 12px;
    }
    .activity-detail__card {
        padding: 14px;
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 10px;
    }
    .activity-detail__card-icon {
        width: 34px;
        height: 34px;
    }
}

/* Itinerary chapter banner and editorial activity timeline. */
.guest-itinerary-title-banner {
    min-height: 108px;
    margin: 4px 0 18px;
    padding: 20px 64px;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    justify-content: center;
    border: 1px solid rgba(222, 187, 131, 0.3);
    border-radius: 20px;
    background-color: #fff4df;
    background-image: url("/media/guest/asset/banner_title.png");
    background-position: center;
    background-size: cover;
    box-shadow: 0 9px 24px rgba(105, 76, 37, 0.08);
}
.guest-itinerary-title-banner p {
    margin: 0 0 4px;
    color: #9b6438;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.11em;
}
.guest-itinerary-title-banner h3 {
    max-width: 190px;
    margin: 0;
    color: #0b5a4c;
    font-family: var(--font-travel-serif);
    font-size: clamp(24px, 7vw, 31px);
    font-style: italic;
    font-weight: 500;
    line-height: 0.94;
    text-wrap: balance;
}
.guest-itinerary-day > .schedule-timeline {
    overflow: visible;
}
.guest-itinerary-day .schedule-card {
    padding: 0 0 18px;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    column-gap: 20px;
    background: transparent;
}
.guest-itinerary-day .schedule-card::before {
    left: 60px;
    top: -18px;
    bottom: -18px;
    width: 1px;
    background: repeating-linear-gradient(to bottom, #58a998 0 5px, transparent 5px 9px);
}
.guest-itinerary-day .schedule-card:first-child::before {
    top: 13px;
}
.guest-itinerary-day .schedule-card:last-child::before {
    bottom: calc(100% - 13px);
}
.guest-itinerary-day .schedule-card::after {
    left: 55px;
    top: 7px;
    width: 12px;
    height: 12px;
    box-sizing: border-box;
    border: 2px solid #087765;
    background: #fbf5e9;
}
.guest-itinerary-day .schedule-card:last-child {
    padding-bottom: 4px;
}
.guest-itinerary-day .schedule-card__time {
    padding-top: 5px;
    padding-left: 0;
    align-items: flex-start;
    text-align: left;
}
.guest-itinerary-day .schedule-card time {
    color: #174f46;
    font-size: 13px;
    line-height: 1;
}
.guest-itinerary-day .schedule-card__end {
    color: #6c817c;
    font-size: 9px;
}
.guest-itinerary-day .schedule-card__panel {
    min-width: 0;
    min-height: 148px;
    padding: 11px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 82px;
    gap: 9px;
    border: 1px solid rgba(221, 200, 165, 0.62);
    border-radius: 19px;
    background: rgba(255, 253, 247, 0.94);
    box-shadow: 0 6px 17px rgba(91, 65, 31, 0.08);
}
.guest-itinerary-day .schedule-card__copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
/* Chip loại hoạt động đứng riêng một dòng phía trên tiêu đề: tiêu đề dài
   không còn bị bóp lại rồi rớt dòng lệch so với chip. */
.guest-itinerary-day .schedule-card__heading {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}
.guest-itinerary-day .schedule-card__heading h3 {
    min-width: 0;
    width: 100%;
    margin: 0;
    /* Trục chính giờ là dọc, nên flex-basis 180px của rule chung sẽ trở thành
       chiều cao. Ép về auto để tiêu đề chỉ cao đúng số dòng thực tế. */
    flex: 0 0 auto;
    color: #153f38;
    font-size: 13.5px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.guest-itinerary-day .schedule-card__status {
    margin: 5px 0 0;
    display: flex;
}
.guest-itinerary-day .schedule-card__status .badge {
    padding: 4px 8px;
    font-size: 8.5px;
}
.guest-itinerary-day .schedule-card__type {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1.4;
}
.guest-itinerary-day .schedule-card__type .icon {
    width: 12px;
    height: 12px;
}
.guest-itinerary-day .schedule-card__type--transport {
    color: #a5641f;
    background: #fbeede;
}
.guest-itinerary-day .schedule-card__type--activity {
    color: #146151;
    background: #e2f1ea;
}
.guest-itinerary-day .schedule-card__copy > p {
    margin-top: 7px;
    color: #5a716c;
    font-size: 10.75px;
    line-height: 1.42;
}
.guest-itinerary-day .schedule-card__meeting {
    margin-top: 5px;
    padding-top: 1px;
    display: block;
    font-weight: 500;
}
.guest-itinerary-day .schedule-card__meta {
    margin-top: 7px;
    gap: 4px;
}
.guest-itinerary-day .schedule-card__meta .tag {
    padding: 4px 6px;
    border-color: #ecdfc7;
    border-radius: 6px;
    color: #4f625e;
    background: #fff7e7;
    font-size: 8.5px;
    line-height: 1.2;
}
.guest-itinerary-day .schedule-card__actions {
    margin-top: auto;
    padding-top: 9px;
}
.guest-itinerary-day .schedule-card__primary-action,
.guest-itinerary-day .schedule-card__actions [data-activity-detail] {
    width: fit-content;
    min-height: 30px;
    padding: 5px 11px;
    border: 0;
    border-radius: 9px;
    color: #fff;
    background: linear-gradient(135deg, #0a806a, #05604f);
    font-size: 9.5px;
    line-height: 1;
    box-shadow: 0 5px 11px rgba(4, 98, 80, 0.2);
}
.guest-itinerary-day .schedule-card__primary-action .icon {
    width: 13px;
    height: 13px;
}
.guest-itinerary-day .schedule-card__image {
    width: 100%;
    height: 100%;
    min-height: 126px;
    max-height: 164px;
    display: block;
    align-self: stretch;
    border: 2px solid #e6bd73;
    border-radius: 14px;
    object-fit: cover;
    object-position: center;
    background: #efe4cd;
}
@media (max-width: 370px) {
    .guest-itinerary-title-banner {
        min-height: 100px;
        padding-right: 52px;
        padding-left: 54px;
    }
    .guest-itinerary-day .schedule-card {
        grid-template-columns: 47px minmax(0, 1fr);
        column-gap: 17px;
    }
    .guest-itinerary-day .schedule-card::before {
        left: 54px;
    }
    .guest-itinerary-day .schedule-card::after {
        left: 49px;
    }
    .guest-itinerary-day .schedule-card__panel {
        grid-template-columns: minmax(0, 1fr) 70px;
        gap: 7px;
        padding: 9px;
    }
    .guest-itinerary-day .schedule-card__heading h3 {
        font-size: 13px;
    }
}

/* Day tabs stay anchored while the selected itinerary day glides underneath. */
body.guest-itinerary-day-transitioning .guest-main {
    view-transition-name: none;
}
body.guest-itinerary-day-transitioning .guest-itinerary-day {
    view-transition-name: guest-itinerary-day-content;
}
body.guest-itinerary-day-transitioning .guest-itinerary-tabs {
    pointer-events: none;
}
body.guest-itinerary-day-transitioning .guest-main {
    overflow-x: clip;
}
::view-transition-group(guest-itinerary-day-content) {
    overflow: clip;
    animation: none;
}
::view-transition-old(guest-itinerary-day-content),
::view-transition-new(guest-itinerary-day-content) {
    background: transparent;
    mix-blend-mode: normal;
}
html[data-guest-itinerary-day-direction="forward"]::view-transition-old(
        guest-itinerary-day-content
    ) {
    animation: guest-itinerary-day-old-forward 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
html[data-guest-itinerary-day-direction="forward"]::view-transition-new(
        guest-itinerary-day-content
    ) {
    animation: guest-itinerary-day-new-forward 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
html[data-guest-itinerary-day-direction="back"]::view-transition-old(guest-itinerary-day-content) {
    animation: guest-itinerary-day-old-back 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
html[data-guest-itinerary-day-direction="back"]::view-transition-new(guest-itinerary-day-content) {
    animation: guest-itinerary-day-new-back 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes guest-itinerary-day-old-forward {
    to {
        transform: translate3d(-100%, 0, 0);
    }
}
@keyframes guest-itinerary-day-new-forward {
    from {
        transform: translate3d(100%, 0, 0);
    }
}
@keyframes guest-itinerary-day-old-back {
    to {
        transform: translate3d(100%, 0, 0);
    }
}
@keyframes guest-itinerary-day-new-back {
    from {
        transform: translate3d(-100%, 0, 0);
    }
}
.guest-itinerary-day--leaving-forward {
    animation: guest-itinerary-day-old-forward 130ms ease-in both;
}
.guest-itinerary-day--leaving-back {
    animation: guest-itinerary-day-old-back 130ms ease-in both;
}
.guest-itinerary-day--entering-forward {
    animation: guest-itinerary-day-new-forward 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.guest-itinerary-day--entering-back {
    animation: guest-itinerary-day-new-back 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@media (prefers-reduced-motion: reduce) {
    body.guest-itinerary-day-transitioning .guest-itinerary-day {
        view-transition-name: none;
    }
    .guest-itinerary-day--leaving-forward,
    .guest-itinerary-day--leaving-back,
    .guest-itinerary-day--entering-forward,
    .guest-itinerary-day--entering-back {
        animation: none;
    }
}

.p1-readiness-card {
    border: 1px solid color-mix(in srgb, var(--line-soft) 58%, var(--coral-soft, #ffd9c9) 42%);
    background: linear-gradient(
        158deg,
        color-mix(in srgb, var(--coral-soft, #fff0e9) 52%, var(--paper)),
        var(--paper) 58%
    );
    box-shadow: var(--shadow-sm);
}

/* These status labels are read-only badges. Reset the interactive task-board
   .status-chip base (white pill, border, pointer, hover-lift) they inherit. */
.p1-weather-card .status-chip,
.p1-readiness-card .status-chip {
    min-height: 0;
    border: 0;
    font-weight: 700;
    cursor: default;
    text-align: center;
    white-space: nowrap;
}
.p1-weather-card .status-chip:hover,
.p1-readiness-card .status-chip:hover {
    transform: none;
}
/* Re-assert the semantic badge colours at card scope: the interactive base
   forces background:white and wins on source order otherwise. */
.p1-weather-card .status-chip--muted,
.p1-readiness-card .status-chip--muted {
    color: var(--ink-soft);
    background: var(--surface-2, #f1f4f2);
}
.p1-weather-card .status-chip--success,
.p1-readiness-card .status-chip--success,
.p1-weather-card .status-chip--confirmed,
.p1-readiness-card .status-chip--confirmed {
    color: var(--success);
    background: color-mix(in srgb, var(--success-soft, #e4f4ee) 82%, white 18%);
}
.p1-weather-card .status-chip--warning,
.p1-readiness-card .status-chip--warning,
.p1-weather-card .status-chip--pending,
.p1-readiness-card .status-chip--pending,
.p1-weather-card .status-chip--needs_clarification,
.p1-readiness-card .status-chip--needs_clarification {
    color: var(--warning);
    background: color-mix(in srgb, var(--warning-soft, #fff3cf) 82%, white 18%);
}
.p1-weather-card .status-chip--not_available,
.p1-readiness-card .status-chip--not_available {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger-soft, #fff0f0) 82%, white 18%);
}

.p1-weather-card {
    display: grid;
    gap: 12px;
    padding: 16px;
    margin: 16px 0;
}

.p1-weather-card__head,
.p1-readiness-card__head,
.p1-weather-ops__head,
.commitment-admin-form__head,
.itinerary-group-summary__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.p1-weather-card__head h2,
.p1-readiness-card__head h2,
.p1-weather-ops__head h2 {
    margin: 2px 0 4px;
    font-size: clamp(1.08rem, 2vw, 1.35rem);
}
.p1-weather-card__head h2 {
    margin: 1px 0 0;
    font-size: clamp(1rem, 1.7vw, 1.18rem);
}

.p1-weather-card__head p,
.p1-readiness-card__head p,
.p1-weather-ops__head p {
    margin: 0;
}

.p1-weather-card__icon,
.p1-readiness-card__mark,
.itinerary-group-summary__head > span {
    display: inline-grid;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 14px;
    color: var(--brand-800);
    background: color-mix(in srgb, var(--ocean-soft, #e5f2f0) 78%, white 22%);
}
/* Smaller head tile on the guest weather card. */
.p1-weather-card__icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 12px;
}

.p1-weather-card__icon .icon,
.p1-readiness-card__mark .icon,
.itinerary-group-summary__head > span .icon {
    width: 22px;
    height: 22px;
}
.p1-weather-card__icon .icon {
    width: 20px;
    height: 20px;
}

.p1-weather-card__forecast {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.p1-weather-card__forecast > div {
    display: grid;
    gap: 2px;
    padding: 11px 13px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-2, #f5f7f6) 76%, var(--gold-soft, #fff5d8) 24%);
}

.p1-weather-card__forecast strong {
    font-size: 1.05rem;
}

.p1-weather-card__updated {
    color: var(--ink-soft);
    font-size: 0.78rem;
}

.p1-weather-card__source {
    color: var(--ink-soft);
    font-size: 0.78rem;
}

.p1-weather-card__source a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.p1-weather-card__forecast span,
.p1-weather-card__checklist,
.p1-weather-ops__head p,
.commitment-row small,
.commitment-admin-form__head strong {
    color: var(--ink-soft);
    font-size: 0.85rem;
}

.p1-weather-card__warning,
.p1-weather-card__checklist,
.p1-weather-ops__rows,
.commitment-list,
.commitment-admin-list {
    display: grid;
    gap: 9px;
}

.p1-weather-card__warning {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 0;
    padding: 11px 13px;
    border-radius: 10px;
    color: var(--danger);
    background: color-mix(in srgb, var(--danger-soft, #fff0f0) 84%, white 16%);
}

.p1-weather-card__checklist {
    padding-top: 3px;
}

.p1-weather-card__checklist ul {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.p1-weather-card__checklist li {
    display: flex;
    gap: 8px;
    align-items: center;
}

.p1-weather-card__checklist li .icon {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    color: var(--success, #2b7a68);
}

/* Morning Brief keeps the first read short: decision metrics, up to three
   preparation notes, then activity-aware slots. Supporting data stays in a
   native disclosure rather than becoming a dense hourly table. */
.p1-weather-morning-brief {
    display: grid;
    gap: 14px;
}

.p1-weather-morning-brief__metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.p1-weather-morning-brief__metrics > div {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--line-soft) 78%, var(--brand-100) 22%);
    border-radius: 10px;
    background: color-mix(in srgb, var(--paper) 84%, var(--brand-50) 16%);
}

.p1-weather-morning-brief__metrics span,
.p1-weather-brief h3,
.p1-weather-activities h3,
.p1-weather-details dt {
    color: var(--ink-soft);
    font-size: 0.76rem;
    font-weight: 700;
}

.p1-weather-morning-brief__metrics strong {
    overflow: hidden;
    font-size: 0.95rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.p1-weather-brief,
.p1-weather-activities {
    display: grid;
    gap: 8px;
}

.p1-weather-brief h3,
.p1-weather-activities h3 {
    margin: 0;
    color: var(--ink);
    font-size: 0.92rem;
}

.p1-weather-brief ul,
.p1-weather-activities ul {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.p1-weather-brief__advice {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 9px 10px;
    border-left: 3px solid var(--brand-700);
    border-radius: 0 9px 9px 0;
    color: var(--ink);
    background: color-mix(in srgb, var(--brand-50) 64%, var(--paper) 36%);
    font-size: 0.87rem;
}

.p1-weather-brief__advice--urgent {
    border-left-color: var(--danger);
    background: color-mix(in srgb, var(--danger-soft) 72%, var(--paper) 28%);
}

.p1-weather-brief__advice--rain {
    border-left-color: var(--info);
    background: color-mix(in srgb, var(--info-soft) 66%, var(--paper) 34%);
}

.p1-weather-brief__advice .icon {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-top: 2px;
}

.p1-weather-activities {
    padding-top: 2px;
}

.p1-weather-activities li {
    display: grid;
    grid-template-columns: 45px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 9px 0;
    border-top: 1px solid var(--line-soft);
}

.p1-weather-activities time {
    color: var(--brand-800);
    font-weight: 800;
}

.p1-weather-activities li > div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.p1-weather-activities strong {
    overflow: hidden;
    font-size: 0.9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.p1-weather-activities span {
    color: var(--ink-soft);
    font-size: 0.82rem;
}

.p1-weather-details {
    padding-top: 2px;
    border-top: 1px solid var(--line-soft);
}

.p1-weather-details summary {
    padding: 9px 0 3px;
    color: var(--brand-800);
    font-size: 0.88rem;
    font-weight: 800;
    cursor: pointer;
}

.p1-weather-details dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 8px 0 0;
}

.p1-weather-details dl > div {
    display: grid;
    gap: 1px;
}

.p1-weather-details dt,
.p1-weather-details dd {
    margin: 0;
}

.p1-weather-details dd {
    font-size: 0.9rem;
    font-weight: 700;
}

/* Short card: compact quick-stat strip under the forecast tiles. */
.p1-weather-card__quickstats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.p1-weather-card__quickstats > div {
    display: grid;
    gap: 1px;
    min-width: 0;
    padding: 7px 9px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--paper) 82%, var(--brand-50) 18%);
}
.p1-weather-card__quickstats span {
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-weight: 700;
}
.p1-weather-card__quickstats strong {
    overflow: hidden;
    font-size: 0.95rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.p1-weather-card__more {
    margin-top: 1px;
    min-height: 42px;
    padding-top: 9px;
    padding-bottom: 9px;
    font-size: 0.9rem;
}

/* Forecast detail drawer (opened from "Xem chi tiết dự báo"). */
.weather-detail {
    display: grid;
    gap: 18px;
}
.weather-detail__summary {
    display: grid;
    gap: 10px;
}
.weather-detail .p1-weather-morning-brief__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.weather-detail__sun-section {
    display: grid;
    gap: 8px;
}
.weather-detail__sun-section h3 {
    margin: 0;
    color: var(--ink);
    font-size: 0.92rem;
}
.weather-detail__sun {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}
.weather-detail__sun > div {
    display: grid;
    gap: 1px;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--line-soft) 78%, var(--brand-100) 22%);
    border-radius: 10px;
}
.weather-detail__sun dt {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.76rem;
    font-weight: 700;
}
.weather-detail__sun dd {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
}
.weather-detail .p1-weather-card__source {
    margin-top: 2px;
}

/* Photographic weather library. The raw WMO code is mapped to one of these
   eight scenes in app.js, covering every condition Open-Meteo can return. */
[data-weather-scene="sunny"] {
    --weather-scene-image: url("/media/guest/asset/weather/sunny.webp");
}
[data-weather-scene="partly-cloudy"] {
    --weather-scene-image: url("/media/guest/asset/weather/partly-cloudy.webp");
}
[data-weather-scene="overcast"] {
    --weather-scene-image: url("/media/guest/asset/weather/overcast.webp");
}
[data-weather-scene="fog"] {
    --weather-scene-image: url("/media/guest/asset/weather/fog.webp");
}
[data-weather-scene="drizzle"] {
    --weather-scene-image: url("/media/guest/asset/weather/drizzle.webp");
}
[data-weather-scene="rain"] {
    --weather-scene-image: url("/media/guest/asset/weather/rain.webp");
}
[data-weather-scene="snow"] {
    --weather-scene-image: url("/media/guest/asset/weather/snow.webp");
}
[data-weather-scene="storm"] {
    --weather-scene-image: url("/media/guest/asset/weather/storm.webp");
}

/* Guest weather drawer — an immersive, condition-aware scene. The data stays
   high-contrast while the decorative layers remain pointer-free. */
.drawer--weather {
    --weather-a: #72d5d0;
    --weather-b: #5f9bc0;
    --weather-deep: #27576b;
    --weather-glow: rgba(119, 226, 215, 0.42);
    width: min(620px, 100%);
    background:
        radial-gradient(circle at 14% 8%, var(--weather-glow), transparent 36%),
        linear-gradient(165deg, #f4fbf9 0%, #edf6f7 45%, #fffaf0 100%);
}
.drawer--weather[data-weather="SUNNY"] {
    --weather-a: #ffd76f;
    --weather-b: #f2a86d;
    --weather-deep: #267d93;
    --weather-glow: rgba(255, 203, 91, 0.44);
}
.drawer--weather[data-weather="CLOUDY"] {
    --weather-a: #a9c0cf;
    --weather-b: #718da3;
    --weather-deep: #304f63;
    --weather-glow: rgba(151, 190, 210, 0.4);
}
.drawer--weather[data-weather="SHOWERS"] {
    --weather-a: #68c8e8;
    --weather-b: #4b89c4;
    --weather-deep: #163e66;
    --weather-glow: rgba(83, 171, 229, 0.44);
}
.drawer--weather[data-weather="STORM"] {
    --weather-a: #8a82df;
    --weather-b: #554d9a;
    --weather-deep: #202550;
    --weather-glow: rgba(123, 108, 224, 0.46);
}
.drawer--weather[data-weather="SNOW"] {
    --weather-a: #c1edf3;
    --weather-b: #94b9dc;
    --weather-deep: #526d98;
    --weather-glow: rgba(176, 226, 243, 0.52);
}
.drawer--weather .drawer__header {
    border-bottom-color: rgba(255, 255, 255, 0.58);
    background:
        linear-gradient(110deg, rgba(255, 255, 255, 0.86), rgba(246, 253, 251, 0.68)),
        radial-gradient(circle at 82% 0%, var(--weather-glow), transparent 62%);
    box-shadow: 0 12px 34px rgba(24, 78, 91, 0.08);
    backdrop-filter: blur(22px) saturate(1.25);
}
.drawer--weather .drawer__header .eyebrow {
    color: color-mix(in srgb, var(--weather-deep) 78%, var(--brand-700));
    letter-spacing: 0.16em;
}
.drawer--weather .drawer__header h2 {
    color: #183d46;
    font-size: 24px;
}
.drawer--weather .drawer__header .icon-button {
    border-color: rgba(255, 255, 255, 0.84);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 8px 24px rgba(31, 78, 88, 0.1);
    backdrop-filter: blur(12px);
}
.drawer--weather .drawer__body {
    position: relative;
    background:
        radial-gradient(circle at 92% 5%, var(--weather-glow), transparent 31%),
        radial-gradient(circle at 5% 48%, rgba(255, 255, 255, 0.8), transparent 34%),
        linear-gradient(165deg, rgba(239, 249, 247, 0.72), rgba(255, 250, 240, 0.86));
}
.drawer--weather .drawer__body::before,
.drawer--weather .drawer__body::after {
    content: "";
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(2px);
}
.drawer--weather .drawer__body::before {
    top: 17%;
    right: -70px;
    width: 190px;
    height: 190px;
    border: 1px solid rgba(255, 255, 255, 0.68);
    box-shadow:
        0 0 0 26px rgba(255, 255, 255, 0.13),
        0 0 0 58px rgba(255, 255, 255, 0.07);
    animation: weather-luxe-orbit 10s ease-in-out infinite;
}
.drawer--weather .drawer__body::after {
    bottom: 4%;
    left: -52px;
    width: 132px;
    height: 132px;
    background: var(--weather-glow);
    opacity: 0.34;
    animation: weather-luxe-drift 8s ease-in-out infinite reverse;
}
.weather-detail {
    position: relative;
    isolation: isolate;
    display: grid;
    gap: 18px;
    padding-bottom: 18px;
}
.weather-detail > *:not(.weather-detail__ambient) {
    position: relative;
    z-index: 2;
}
.weather-detail__ambient {
    position: absolute;
    z-index: 0;
    top: -80px;
    right: -64px;
    left: -64px;
    height: 430px;
    overflow: hidden;
    opacity: 0.28;
    pointer-events: none;
}
.weather-detail__ambient .wx-cloud--a {
    top: 8%;
    left: -4%;
    width: 116px;
}
.weather-detail__ambient .wx-cloud--b {
    top: 33%;
    right: 2%;
    width: 90px;
}
.weather-detail__ambient .wx-cloud--c {
    top: 64%;
    left: 28%;
    width: 74px;
}
.weather-detail__orb {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 0 24px rgba(255, 255, 255, 0.72);
    animation: weather-luxe-drift 7s ease-in-out infinite;
}
.weather-detail__orb--a {
    top: 8%;
    right: 18%;
    width: 10px;
    height: 10px;
}
.weather-detail__orb--b {
    top: 42%;
    left: 10%;
    width: 6px;
    height: 6px;
    animation-delay: -2.4s;
}
.weather-detail__orb--c {
    top: 72%;
    right: 7%;
    width: 8px;
    height: 8px;
    animation-delay: -4.8s;
}
.weather-detail__hero {
    min-height: 236px;
    padding: 22px;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.46);
    border-radius: 28px;
    background:
        radial-gradient(circle at 14% 10%, var(--weather-a), transparent 42%),
        linear-gradient(145deg, var(--weather-b), var(--weather-deep));
    box-shadow:
        0 24px 54px color-mix(in srgb, var(--weather-deep) 30%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.36);
    color: white;
    animation: weather-luxe-hero-in 620ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.weather-detail__hero[data-weather-scene] {
    background-image: var(--weather-scene-image);
    background-position: center;
    background-size: cover;
}
.weather-detail__hero[data-weather-scene="sunny"],
.weather-detail__hero[data-weather-scene="partly-cloudy"],
.weather-detail__hero[data-weather-scene="fog"],
.weather-detail__hero[data-weather-scene="drizzle"] {
    background-image: var(--weather-scene-image);
}
.weather-detail__hero[data-weather-scene="storm"] {
    background-position: center 42%;
}
.weather-detail__hero::before,
.weather-detail__hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.weather-detail__hero::before {
    top: -84px;
    right: -58px;
    width: 210px;
    height: 210px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    box-shadow:
        0 0 0 24px rgba(255, 255, 255, 0.08),
        0 0 70px rgba(255, 255, 255, 0.22);
    animation: weather-luxe-pulse 6s ease-in-out infinite;
}
.weather-detail__hero::after {
    bottom: -70px;
    left: -46px;
    width: 170px;
    height: 170px;
    background: rgba(255, 255, 255, 0.09);
    filter: blur(1px);
}
.weather-detail__hero[data-weather-scene]::before,
.weather-detail__hero[data-weather-scene]::after,
.weather-detail__hero[data-weather-scene] .weather-detail__shimmer {
    display: none;
}
.weather-detail__scene {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    opacity: 0.72;
    pointer-events: none;
}
.weather-detail__hero[data-weather-scene] .weather-detail__scene {
    display: none;
}
.weather-detail__scene .wx-cloud path {
    fill: rgba(255, 255, 255, 0.84);
}
.weather-detail__scene .wx-cloud--dark path {
    fill: rgba(193, 204, 229, 0.8);
}
.weather-detail__scene .wx-cloud--a {
    top: 8%;
    left: -7%;
    width: 128px;
    opacity: 0.42;
}
.weather-detail__scene .wx-cloud--b {
    top: 47%;
    right: 5%;
    width: 94px;
    opacity: 0.3;
}
.weather-detail__scene .wx-cloud--c {
    top: 65%;
    left: 34%;
    width: 70px;
    opacity: 0.2;
}
.weather-detail__scene .wx-sun {
    top: -30px;
    right: -20px;
    width: 150px;
    height: 150px;
    opacity: 0.82;
}
.weather-detail__hero[data-weather="SHOWERS"] .weather-detail__scene {
    background-image: repeating-linear-gradient(
        104deg,
        transparent 0 23px,
        rgba(213, 242, 255, 0.48) 24px 26px,
        transparent 27px 49px
    );
    background-size: 100% 48px;
    animation: weather-rain 850ms linear infinite;
}
.weather-detail__hero[data-weather="STORM"] .weather-detail__scene {
    animation: weather-lightning 5s steps(1, end) infinite;
}
.weather-detail__hero[data-weather="SNOW"] .wx-flake {
    position: absolute;
    top: -8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.88);
    animation: weather-snow 5s linear infinite;
}
.weather-detail__shimmer {
    position: absolute;
    z-index: 1;
    inset: -40% auto -40% -55%;
    width: 34%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: skewX(-16deg);
    animation: weather-luxe-shimmer 7s ease-in-out infinite;
}
.weather-detail__hero-content,
.weather-detail__hero-meta {
    position: relative;
    z-index: 3;
    filter: drop-shadow(0 2px 5px rgba(0, 30, 36, 0.62));
}
.weather-detail__hero-content {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 15px;
}
.weather-detail__hero-content > div {
    min-width: 0;
}
.weather-detail__hero-icon {
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.46);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.2);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 10px 26px rgba(13, 57, 75, 0.16);
    backdrop-filter: blur(16px);
    animation: weather-icon-bob 3.4s ease-in-out infinite;
}
.weather-detail__hero-icon .icon {
    width: 34px;
    height: 34px;
    stroke-width: 1.8;
}
.weather-detail__hero .eyebrow {
    margin: 0 0 5px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 9px;
    letter-spacing: 0.16em;
}
.weather-detail__temperature {
    display: block;
    font-family: var(--font-serif);
    font-size: clamp(46px, 13vw, 62px);
    font-weight: 600;
    line-height: 0.95;
    letter-spacing: -0.06em;
    text-shadow: 0 8px 24px rgba(12, 54, 70, 0.2);
}
.weather-detail__hero h3 {
    margin: 7px 0 0;
    color: white;
    font-size: 18px;
    line-height: 1.15;
    overflow-wrap: anywhere;
    text-wrap: balance;
}
.weather-detail__hero-meta {
    min-width: 88px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(18px);
}
.weather-detail__hero-meta > .icon {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
}
.weather-detail__hero-meta span {
    display: grid;
    gap: 1px;
}
.weather-detail__hero-meta strong {
    font-size: 15px;
}
.weather-detail__hero-meta small {
    color: rgba(255, 255, 255, 0.78);
    font-size: 9px;
    white-space: nowrap;
}
.weather-detail__metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(138px, 100%), 1fr));
    gap: 12px;
}
.weather-detail__metrics--current {
    grid-template-columns: repeat(auto-fit, minmax(min(132px, 100%), 1fr));
}
.weather-detail__metric {
    --metric-accent: #178f77;
    --metric-soft: #e9f8f3;
    min-width: 0;
    min-height: 116px;
    padding: 15px;
    position: relative;
    display: grid;
    align-content: start;
    gap: 5px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--metric-accent) 16%, white);
    border-radius: 21px;
    background-color: var(--metric-soft);
    background-image: var(
        --metric-image,
        linear-gradient(145deg, #fff 0%, var(--metric-soft) 100%)
    );
    background-position: right top;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow:
        0 14px 30px color-mix(in srgb, var(--metric-accent) 13%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
    animation: weather-luxe-card-in 500ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.weather-detail__metric::before {
    content: "";
    position: absolute;
    top: 0;
    right: 15px;
    left: 15px;
    height: 4px;
    border-radius: 0 0 999px 999px;
    background: var(--metric-accent);
    opacity: 0.78;
}
.weather-detail__metric[data-weather-metric="feels-like"] {
    --metric-accent: #e8873d;
    --metric-soft: #fff4e8;
    --metric-image: url("/media/guest/asset/weather/metrics/feels-like.webp");
}
.weather-detail__metric[data-weather-metric="uv"] {
    --metric-accent: #7f70d8;
    --metric-soft: #f1efff;
    --metric-image: url("/media/guest/asset/weather/metrics/uv.webp");
}
.weather-detail__metric[data-weather-metric="rain"] {
    --metric-accent: #3c91c8;
    --metric-soft: #eaf6fc;
    --metric-image: url("/media/guest/asset/weather/metrics/rain.webp");
}
.weather-detail__metric[data-weather-metric="wind"] {
    --metric-accent: #168b75;
    --metric-soft: #e8f7f1;
    --metric-image: url("/media/guest/asset/weather/metrics/wind.webp");
}
.weather-detail__metric:nth-child(2) {
    animation-delay: 80ms;
}
.weather-detail__metric:nth-child(3) {
    animation-delay: 160ms;
}
.weather-detail__metric:nth-child(4) {
    animation-delay: 240ms;
}
.weather-detail__metric-icon {
    width: 38px;
    height: 38px;
    margin: 3px 0 2px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: var(--metric-accent);
    color: white;
    box-shadow: 0 7px 16px color-mix(in srgb, var(--metric-accent) 25%, transparent);
}
.weather-detail__metric-icon .icon {
    width: 19px;
    height: 19px;
}
.weather-detail__metric > span:not(.weather-detail__metric-icon) {
    color: #537177;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}
.weather-detail__metric strong {
    color: #183c46;
    font-family: var(--font-serif);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: anywhere;
}
.drawer--weather .weather-detail__current,
.drawer--weather .p1-weather-card__checklist,
.drawer--weather .p1-weather-brief,
.drawer--weather .p1-weather-activities,
.drawer--weather .weather-detail__sun-section {
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.76);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.65);
    box-shadow: 0 14px 34px rgba(35, 83, 91, 0.08);
    backdrop-filter: blur(16px);
}
.drawer--weather .weather-detail__current h3,
.drawer--weather .p1-weather-brief h3,
.drawer--weather .p1-weather-activities h3,
.drawer--weather .weather-detail__sun-section h3 {
    color: #183d46;
    font-size: 14px;
}
.drawer--weather .p1-weather-brief__advice {
    border-left: 0;
    border-radius: 13px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.52);
}
.drawer--weather .p1-weather-card__checklist {
    padding: 18px;
    border: 1px solid rgba(224, 194, 125, 0.36);
    background: linear-gradient(140deg, #fffaf0 0%, #f4fbf7 58%, #eaf7f2 100%);
    box-shadow: 0 16px 34px rgba(33, 84, 73, 0.1);
    backdrop-filter: none;
}
.drawer--weather .p1-weather-card__checklist > strong {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #174f43;
    font-family: var(--font-serif);
    font-size: 16px;
}
.drawer--weather .p1-weather-card__checklist > strong::before {
    content: "✦";
    width: 29px;
    height: 29px;
    display: grid;
    flex: 0 0 29px;
    place-items: center;
    border-radius: 10px;
    color: #fff8e4;
    background: linear-gradient(145deg, #0b7b60, #075541);
    box-shadow: 0 8px 16px rgba(5, 85, 65, 0.18);
}
.drawer--weather .p1-weather-card__checklist ul {
    gap: 8px;
}
.drawer--weather .p1-weather-card__checklist li {
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid rgba(13, 116, 89, 0.1);
    border-radius: 13px;
    color: #365d56;
    background: rgba(255, 255, 255, 0.72);
}
.drawer--weather .p1-weather-card__checklist li .icon {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
    padding: 3px;
    border-radius: 50%;
    color: white;
    background: #169676;
}
.drawer--weather .p1-weather-brief {
    position: relative;
    overflow: hidden;
    padding: 19px;
    border: 0;
    background: linear-gradient(145deg, #07513f 0%, #08705a 62%, #0d8068 100%);
    box-shadow: 0 20px 42px rgba(5, 71, 56, 0.22);
    backdrop-filter: none;
}
.drawer--weather .p1-weather-brief h3 {
    position: relative;
    z-index: 1;
    color: white;
    font-family: var(--font-serif);
    font-size: 17px;
}
.drawer--weather .p1-weather-brief ul {
    position: relative;
    z-index: 1;
    gap: 9px;
}
.drawer--weather .p1-weather-brief__advice {
    min-height: 48px;
    padding: 11px 12px;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.58);
    border-radius: 14px;
    color: #234d44;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 9px 20px rgba(1, 48, 38, 0.14);
}
.drawer--weather .p1-weather-brief__advice .icon {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    margin: 0;
    padding: 7px;
    border-radius: 10px;
    color: #126f5a;
    background: #e6f6f0;
}
.drawer--weather .p1-weather-brief__advice--rain .icon {
    color: #287daf;
    background: #e4f3fb;
}
.drawer--weather .p1-weather-brief__advice--urgent .icon {
    color: #b64a46;
    background: #fff0ed;
}
.drawer--weather .p1-weather-brief__advice--sun .icon,
.drawer--weather .p1-weather-brief__advice--heat .icon {
    color: #c97825;
    background: #fff1db;
}
.drawer--weather .p1-weather-activities li:first-child {
    border-top: 0;
}
.drawer--weather .weather-detail__sun > div {
    --sun-stat-accent: #dc8b35;
    --sun-stat-soft: #fff2de;
    min-width: 0;
    min-height: 94px;
    padding: 14px;
    position: relative;
    align-content: end;
    gap: 5px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--sun-stat-accent) 15%, white);
    border-radius: 17px;
    background: linear-gradient(145deg, #fff 0%, var(--sun-stat-soft) 100%);
    box-shadow: 0 11px 24px color-mix(in srgb, var(--sun-stat-accent) 11%, transparent);
}
.drawer--weather .weather-detail__sun > div::before {
    content: "";
    position: absolute;
    top: 0;
    right: 13px;
    left: 13px;
    height: 4px;
    border-radius: 0 0 999px 999px;
    background: var(--sun-stat-accent);
    opacity: 0.76;
}
.drawer--weather .weather-detail__sun > div[data-sun-stat="sunset"] {
    --sun-stat-accent: #8a6fc2;
    --sun-stat-soft: #f2edfb;
}
.drawer--weather .weather-detail__sun > div[data-sun-stat="sunshine"] {
    --sun-stat-accent: #e2a32f;
    --sun-stat-soft: #fff7dc;
}
.drawer--weather .weather-detail__sun > div[data-sun-stat="rain"] {
    --sun-stat-accent: #3e91bd;
    --sun-stat-soft: #eaf6fc;
}
.drawer--weather .weather-detail__sun-icon {
    position: absolute;
    top: 13px;
    right: 13px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: white;
    background: var(--sun-stat-accent);
    box-shadow: 0 8px 17px color-mix(in srgb, var(--sun-stat-accent) 22%, transparent);
}
.drawer--weather .weather-detail__sun-icon .icon {
    width: 18px;
    height: 18px;
}
.drawer--weather .weather-detail__sun dt {
    max-width: calc(100% - 38px);
    color: color-mix(in srgb, var(--sun-stat-accent) 60%, #355a55);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}
.drawer--weather .weather-detail__sun dd {
    color: #163f3a;
    font-family: var(--font-serif);
    font-size: 19px;
    font-weight: 750;
    line-height: 1.1;
    overflow-wrap: anywhere;
}
.drawer--weather .weather-detail__sun-section {
    padding: 18px;
    border: 1px solid rgba(229, 192, 111, 0.27);
    background: linear-gradient(140deg, #fffdf7 0%, #fff8ea 47%, #edf8f4 100%);
    box-shadow: 0 16px 36px rgba(91, 72, 34, 0.1);
    backdrop-filter: none;
}
.drawer--weather .weather-detail__sun-section h3 {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #174f43;
    font-family: var(--font-serif);
    font-size: 17px;
}
.drawer--weather .weather-detail__sun-section h3::before {
    content: "✦";
    width: 29px;
    height: 29px;
    display: grid;
    flex: 0 0 29px;
    place-items: center;
    border-radius: 10px;
    color: #fff9df;
    background: linear-gradient(145deg, #e4a43a, #c87929);
    box-shadow: 0 8px 16px rgba(198, 119, 39, 0.2);
}
.drawer--weather .weather-detail__sun {
    grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr));
    gap: 10px;
}
.drawer--weather .weather-detail__summary > .p1-weather-card__updated {
    width: fit-content;
    margin: -5px 6px 0;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.66);
    backdrop-filter: blur(10px);
}
.drawer--weather .p1-weather-card__source {
    width: fit-content;
    margin: 2px auto 0;
    padding: 7px 11px;
    border: 1px solid rgba(255, 255, 255, 0.74);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.58);
    box-shadow: 0 8px 22px rgba(34, 79, 88, 0.07);
    backdrop-filter: blur(12px);
}
@keyframes weather-luxe-hero-in {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
@keyframes weather-luxe-card-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes weather-luxe-shimmer {
    0%,
    66% {
        left: -55%;
        opacity: 0;
    }
    72% {
        opacity: 1;
    }
    88%,
    100% {
        left: 125%;
        opacity: 0;
    }
}
@keyframes weather-luxe-pulse {
    0%,
    100% {
        opacity: 0.7;
        transform: scale(0.96);
    }
    50% {
        opacity: 1;
        transform: scale(1.06);
    }
}
@keyframes weather-luxe-orbit {
    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }
    50% {
        transform: translate(-12px, 16px) rotate(8deg);
    }
}
@keyframes weather-luxe-drift {
    0%,
    100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-16px) scale(1.08);
    }
}
@media (max-width: 420px) {
    .weather-detail__hero {
        min-height: 218px;
        padding: 18px;
        border-radius: 24px;
    }
    .weather-detail__hero-content {
        gap: 11px;
    }
    .weather-detail__hero-icon {
        width: 52px;
        height: 52px;
        flex-basis: 52px;
        border-radius: 17px;
    }
    .weather-detail__hero-icon .icon {
        width: 29px;
        height: 29px;
    }
    .weather-detail__hero-meta {
        min-width: 78px;
        padding: 9px 10px;
    }
    .weather-detail__temperature {
        font-size: 46px;
    }
    .weather-detail__hero h3 {
        max-width: 145px;
        font-size: 15px;
    }
    .weather-detail__metrics--current {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .weather-detail__metrics--current .weather-detail__metric:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        min-height: 92px;
    }
    .weather-detail__metric {
        min-height: 102px;
        padding: 11px;
        border-radius: 16px;
    }
    .weather-detail__metric strong {
        font-size: 14px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .drawer--weather .drawer__body::before,
    .drawer--weather .drawer__body::after,
    .weather-detail__ambient .wx-cloud,
    .weather-detail__ambient .wx-sun,
    .weather-detail__ambient .wx-flake,
    .weather-detail__orb,
    .weather-detail__hero,
    .weather-detail__hero::before,
    .weather-detail__scene,
    .weather-detail__scene .wx-cloud,
    .weather-detail__scene .wx-sun,
    .weather-detail__scene .wx-flake,
    .weather-detail__shimmer,
    .weather-detail__hero-icon,
    .weather-detail__metric {
        animation: none !important;
    }
}

/* Journey overview entrance: the coastal backdrop remains alive after the
   page settles, while the heading, route and days arrive in travel order. */
.guest-shell--journey::before {
    transform: scale(1.015) translate3d(-0.35%, -0.2%, 0);
    transform-origin: 50% 28%;
    will-change: transform;
    animation: guest-journey-background-drift 26s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}
@keyframes guest-journey-background-drift {
    to {
        transform: scale(1.105) translate3d(0.85%, 0.55%, 0);
    }
}
.guest-main--journey-arriving .guest-journey__home,
.guest-main--journey-arriving .guest-journey__head .eyebrow,
.guest-main--journey-arriving .guest-journey__head h1,
.guest-main--journey-arriving .guest-journey__head > p,
.guest-main--journey-arriving .guest-journey-map__path,
.guest-main--journey-arriving .guest-journey-day {
    animation: guest-journey-item-arrive 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.guest-main--journey-arriving .guest-journey__home,
.guest-main--journey-arriving .guest-journey__head .eyebrow {
    animation-delay: 20ms;
}
.guest-main--journey-arriving .guest-journey__head h1 {
    animation-delay: 90ms;
}
.guest-main--journey-arriving .guest-journey__head > p {
    animation-delay: 170ms;
}
.guest-main--journey-arriving .guest-journey-map__path {
    animation-name: guest-journey-path-arrive;
    animation-delay: 260ms;
}
.guest-main--journey-arriving .guest-journey-day:nth-of-type(1) {
    animation-delay: 340ms;
}
.guest-main--journey-arriving .guest-journey-day:nth-of-type(2) {
    animation-delay: 470ms;
}
.guest-main--journey-arriving .guest-journey-day:nth-of-type(3) {
    animation-delay: 600ms;
}
.guest-main--journey-arriving .guest-journey-day:nth-of-type(4) {
    animation-delay: 730ms;
}
.guest-main--journey-arriving .guest-journey-day:nth-of-type(5) {
    animation-delay: 860ms;
}
.guest-main--journey-arriving .guest-journey-day:nth-of-type(6) {
    animation-delay: 990ms;
}
.guest-main--journey-arriving .guest-journey-day:nth-of-type(n + 7) {
    animation-delay: 1120ms;
}
@keyframes guest-journey-item-arrive {
    from {
        opacity: 0;
        filter: blur(4px) saturate(0.75);
        transform: translate3d(0, 22px, 0) scale(0.97);
    }
    to {
        opacity: 1;
        filter: blur(0) saturate(1);
        transform: translate3d(0, 0, 0) scale(1);
    }
}
@keyframes guest-journey-path-arrive {
    from {
        opacity: 0;
        filter: blur(2px);
        transform: scaleY(0.9);
        transform-origin: top center;
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: scaleY(1);
        transform-origin: top center;
    }
}
@media (prefers-reduced-motion: reduce) {
    .guest-shell--journey::before,
    .guest-main--journey-arriving .guest-journey__home,
    .guest-main--journey-arriving .guest-journey__head .eyebrow,
    .guest-main--journey-arriving .guest-journey__head h1,
    .guest-main--journey-arriving .guest-journey__head > p,
    .guest-main--journey-arriving .guest-journey-map__path,
    .guest-main--journey-arriving .guest-journey-day {
        animation: none !important;
    }
}

.status-chip--success,
.status-chip--confirmed {
    color: var(--success);
    background: color-mix(in srgb, var(--success-soft, #e4f4ee) 82%, white 18%);
}

.status-chip--warning,
.status-chip--needs_clarification,
.status-chip--pending {
    color: var(--warning);
    background: color-mix(in srgb, var(--warning-soft, #fff3cf) 82%, white 18%);
}

.status-chip--not_available {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger-soft, #fff0f0) 82%, white 18%);
}

.status-chip--muted {
    color: var(--ink-soft);
    background: var(--surface-2, #f1f4f2);
}

.p1-readiness-card {
    display: grid;
    gap: 16px;
    padding: 22px;
    margin: 20px 0;
}

.p1-readiness-card__head {
    align-items: center;
}

.p1-readiness-card__mark {
    color: var(--coral);
    background: color-mix(in srgb, var(--coral-soft, #fff0e9) 84%, white 16%);
}

.commitment-row {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 54px;
    padding: 10px 0;
    border-top: 1px solid var(--line);
}

.commitment-row__icon {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 9px;
    color: var(--brand-800);
    background: var(--surface-2, #f1f4f2);
}

.commitment-row__icon .icon {
    width: 16px;
    height: 16px;
}

.commitment-row strong,
.commitment-row small {
    display: block;
}

.commitment-row__help {
    margin-top: 8px;
}

.p1-weather-ops {
    display: grid;
    gap: 11px;
    margin: 16px 0 20px;
    padding: 15px 17px;
}

.p1-weather-ops__head {
    align-items: center;
}

/* Compact scale — this is a staff reference panel, not a hero card. */
.p1-weather-ops__head h2 {
    font-size: clamp(1rem, 1.5vw, 1.12rem);
}

.p1-weather-ops__head p {
    font-size: 0.8rem;
}

.p1-weather-ops__warning {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 8px;
    color: var(--warning);
    font-weight: 600;
}

.p1-weather-ops__rows {
    border-top: 1px solid var(--line);
}

.p1-weather-ops__row {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr) 84px auto;
    gap: 10px;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.85rem;
}
.p1-weather-ops__row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.p1-weather-ops__summary {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.p1-weather-ops__signals {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 8px;
    color: var(--ink-soft);
    font-size: 0.76rem;
}

/* Each signal = a small animated icon + its value chip. */
.p1-weather-ops__signal {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px 2px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-2, #f1f4f2) 70%, transparent);
}
.p1-weather-ops__signal .icon {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
}
.p1-weather-ops__signal--rain {
    color: color-mix(in srgb, var(--brand-700, #2f7d6b) 88%, var(--ink));
}
.p1-weather-ops__signal--rain .icon {
    color: var(--brand-600, #2f8f79);
    animation: ops-rain-bob 2.4s ease-in-out infinite;
}
.p1-weather-ops__signal--uv .icon {
    color: #d69a1c;
    transform-origin: center;
    animation: ops-uv-pulse 3.2s ease-in-out infinite;
}
.p1-weather-ops__signal--wind .icon {
    color: #4a8fb1;
    animation: ops-wind-sway 2.8s ease-in-out infinite;
}
@keyframes ops-rain-bob {
    0%,
    100% {
        transform: translateY(-1px);
    }
    50% {
        transform: translateY(1.5px);
    }
}
@keyframes ops-uv-pulse {
    0%,
    100% {
        transform: rotate(0deg) scale(1);
        opacity: 0.85;
    }
    50% {
        transform: rotate(45deg) scale(1.12);
        opacity: 1;
    }
}
@keyframes ops-wind-sway {
    0%,
    100% {
        transform: translateX(-1.5px);
    }
    50% {
        transform: translateX(1.5px);
    }
}
@media (prefers-reduced-motion: reduce) {
    .p1-weather-ops__signal .icon {
        animation: none !important;
    }
}

.itinerary-group-summary {
    display: grid;
    gap: 12px;
    margin-bottom: 12px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--line) 70%, var(--coral) 30%);
    border-radius: 14px;
    background: color-mix(in srgb, var(--paper) 88%, var(--coral-soft, #fff0e9) 12%);
}

.itinerary-group-summary__head {
    align-items: center;
}

.itinerary-group-summary__head strong,
.itinerary-group-summary__head small {
    display: block;
}

.itinerary-group-summary__head small {
    color: var(--ink-soft);
}

.itinerary-group-summary__routes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.itinerary-group-summary__routes span,
.schedule-card__type {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 999px;
    color: var(--ink);
    background: var(--surface-2, #f1f4f2);
    font-size: 0.7rem;
}

/* The per-card type tag repeats the group header, so keep it small and quiet. */
.schedule-card__type {
    gap: 4px;
    padding: 2px 7px;
    color: var(--ink-soft);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}
.schedule-card__type .icon {
    width: 12px;
    height: 12px;
}

/* The .card wrapper has no padding of its own, so the groups add their own. */
.schedule-timeline {
    padding: 6px 0 10px;
}

/* Guest day plan groups (Transport / Activities). Previously unstyled, which
   left a bare header and a floating count number. */
.itinerary-group {
    display: grid;
    gap: 12px;
    margin: 0 0 20px;
}
.itinerary-group:last-child {
    margin-bottom: 0;
}
.itinerary-group__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 16px;
    padding: 10px 0 12px;
    border-bottom: 1px solid var(--line-soft);
}
.itinerary-group__header > span:first-child {
    display: inline-grid;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 12px;
    color: var(--brand-800);
    background: color-mix(in srgb, var(--ocean-soft, #e5f2f0) 78%, white 22%);
}
.itinerary-group--transport .itinerary-group__header > span:first-child {
    color: var(--coral, #d96b45);
    background: color-mix(in srgb, var(--coral-soft, #fff0e9) 82%, white 18%);
}
.itinerary-group__header > span:first-child .icon {
    width: 20px;
    height: 20px;
}
.itinerary-group__header > div {
    min-width: 0;
}
.itinerary-group__header .eyebrow {
    margin: 0;
}
.itinerary-group__header h3 {
    margin: 2px 0 0;
    font-size: 1.05rem;
}
.itinerary-group__count {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    min-width: 28px;
    height: 28px;
    margin-left: auto;
    padding: 0 9px;
    border-radius: 999px;
    color: var(--brand-800);
    background: var(--brand-50, #e9f4f0);
    font-size: 0.85rem;
    font-weight: 700;
}
.itinerary-group__items {
    display: block;
}

.activity-type-field {
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--surface-2, #f1f4f2);
}

.transport-fields {
    display: grid;
    gap: 14px;
    margin: 4px 0 16px;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--line) 60%, var(--brand-200, #bfe0d6) 40%);
    border-radius: 12px;
    background: color-mix(in srgb, var(--paper) 92%, var(--ocean-soft, #e5f2f0) 8%);
}

.transport-fields[hidden] {
    display: none !important;
}

.transport-fields .form-grid {
    margin: 0;
}

.transport-fields legend {
    padding: 0 6px;
    color: var(--brand-800);
    font-size: 0.9rem;
    font-weight: 700;
}

/* Estimate action sits to the right, under the ETA field it feeds. */
.route-estimate-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 9px;
}

.route-estimate-actions button[hidden] {
    display: none;
}

/* A provider failure must remain close to the ETA control and clearly show
   that manual entry is still a valid recovery path. */
.transport-fields [data-route-estimate-result].field-help--notice {
    margin-top: 2px;
    margin-bottom: 2px;
}

.commitment-admin-form {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    background: var(--paper);
    box-shadow: var(--shadow-sm);
}

.commitment-admin-form__head {
    align-items: center;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line-soft);
}

.commitment-admin-form__head .eyebrow {
    margin: 0 0 2px;
}

.commitment-admin-form__head strong {
    font-size: 1rem;
    color: var(--ink);
}

.commitment-admin-form__meta {
    display: block;
    margin-top: 4px;
    color: var(--ink-soft);
    font-size: 0.78rem;
}

/* Read-only status badge — clear the interactive task-board chip base it
   otherwise inherits (white pill, border, pointer, hover-lift). */
.commitment-admin-form__head .status-chip {
    min-height: 0;
    border: 0;
    cursor: default;
    font-weight: 700;
}
.commitment-admin-form__head .status-chip:hover {
    transform: none;
}
.commitment-admin-form__head .status-chip--confirmed {
    color: var(--success);
    background: color-mix(in srgb, var(--success-soft, #e4f4ee) 82%, white 18%);
}
.commitment-admin-form__head .status-chip--pending,
.commitment-admin-form__head .status-chip--needs_clarification {
    color: var(--warning);
    background: color-mix(in srgb, var(--warning-soft, #fff3cf) 82%, white 18%);
}
.commitment-admin-form__head .status-chip--not_available {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger-soft, #fff0f0) 82%, white 18%);
}

/* Save action anchored to the end of the form, not stretched full width. */
.commitment-admin-form button[type="submit"] {
    justify-self: end;
}

@media (max-width: 680px) {
    .p1-weather-card,
    .p1-readiness-card,
    .p1-weather-ops {
        padding: 16px;
    }

    .p1-weather-ops__row {
        grid-template-columns: 1fr auto;
    }

    .p1-weather-ops__row > :nth-child(2) {
        grid-column: 1;
    }

    .p1-weather-ops__row > :nth-child(3),
    .p1-weather-ops__row > :nth-child(4) {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .p1-weather-ops__row > :nth-child(4) {
        align-self: end;
    }

    .commitment-row {
        grid-template-columns: 30px minmax(0, 1fr);
    }

    .commitment-row .status-chip {
        grid-column: 2;
        justify-self: start;
    }

    .p1-weather-morning-brief__metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .p1-weather-card--compact .p1-weather-morning-brief__metrics > div:nth-child(n + 3),
    .p1-weather-card--compact .p1-weather-brief__advice:nth-child(n + 3) {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .p1-weather-card,
    .p1-readiness-card,
    .itinerary-group-summary {
        transition: none;
    }
}

* {
    box-sizing: border-box;
}
[hidden] {
    display: none !important;
}
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    scrollbar-color: var(--brand-700) var(--brand-50);
    scrollbar-width: thin;
}
body {
    min-width: 320px;
    margin: 0;
    color: var(--ink);
    background: var(--sand);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}
body:has(.auth-page) {
    background: var(--paper);
}
* {
    scrollbar-color: var(--brand-700) var(--brand-50);
    scrollbar-width: thin;
}
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
*::-webkit-scrollbar-track {
    background: var(--brand-50);
}
*::-webkit-scrollbar-thumb {
    border: 2px solid var(--brand-50);
    border-radius: 999px;
    background: var(--brand-700);
}
*::-webkit-scrollbar-thumb:hover {
    background: var(--brand-900);
}
*::-webkit-scrollbar-corner {
    background: var(--brand-50);
}
button,
input,
textarea,
select {
    font: inherit;
}
button,
a {
    -webkit-tap-highlight-color: transparent;
}
button {
    color: inherit;
}
a {
    color: inherit;
}
img {
    display: block;
    max-width: 100%;
}
h1,
h2,
h3,
h4,
p {
    margin-top: 0;
}
h1,
h2,
h3 {
    letter-spacing: -0.025em;
}
h1 {
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.1;
}
h2 {
    font-size: clamp(22px, 2vw, 28px);
    line-height: 1.2;
}
h3 {
    font-size: 17px;
    line-height: 1.3;
}
:focus-visible {
    outline: 3px solid rgba(0, 72, 49, 0.42);
    outline-offset: 2px;
}

.skip-link {
    position: fixed;
    z-index: 999;
    top: -80px;
    left: 16px;
    padding: 12px 18px;
    background: var(--white);
    border-radius: 8px;
}
.skip-link:focus {
    top: 16px;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.muted {
    color: var(--ink-soft);
}
.danger-text {
    color: var(--danger);
}
.success-text {
    color: var(--success);
}
.nowrap {
    white-space: nowrap;
}
.grow {
    flex: 1;
}
.spacer {
    height: 20px;
}
.mobile-only {
    display: none;
}

.boot-screen {
    min-height: 100vh;
    display: grid;
    place-content: center;
    justify-items: center;
    background: radial-gradient(circle at 50% 30%, #fff 0, var(--sand) 48%, #e7e1d5 100%);
}
.brand-mark {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 10px;
    background: #fff;
    object-fit: cover;
    box-shadow: 0 1px 4px rgba(0, 40, 29, 0.16);
}
.brand-mark--large {
    width: 70px;
    height: 70px;
    border-radius: 18px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-md);
}
.boot-logo {
    width: 250px;
    max-width: 72vw;
    height: auto;
    margin-bottom: 8px;
}
.eyebrow {
    margin: 0 0 8px;
    color: var(--brand-700);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}
.loader {
    width: 28px;
    height: 28px;
    margin-top: 16px;
    border: 3px solid var(--brand-100);
    border-top-color: var(--coral);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.button {
    min-height: 44px;
    padding: 10px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: var(--brand-900);
    color: var(--white);
    font-weight: 750;
    line-height: 1.1;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform 0.16s,
        background 0.16s,
        box-shadow 0.16s;
}
.button:hover {
    background: var(--brand-800);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.button:active {
    transform: translateY(0);
}
.button:disabled {
    opacity: 0.48;
    cursor: not-allowed;
    transform: none;
}
.button--coral {
    background: var(--coral);
}
.button--coral:hover {
    background: var(--coral-dark);
}
.button--secondary {
    border-color: var(--line);
    background: var(--white);
    color: var(--ink);
}
.button--secondary:hover {
    background: var(--brand-50);
    border-color: var(--brand-100);
}
.button--ghost {
    border-color: transparent;
    background: transparent;
    color: var(--brand-800);
}
.button--ghost:hover {
    background: var(--brand-50);
    box-shadow: none;
}
.button--tinted {
    border-color: var(--brand-300);
    background: var(--brand-50);
    color: var(--brand-800);
}
.button--tinted:hover {
    border-color: var(--brand-700);
    background: var(--brand-100);
    color: var(--brand-900);
    box-shadow: none;
}
.button--danger {
    background: var(--danger);
}
.button--danger-soft {
    border-color: #efb8b8;
    background: var(--danger-soft);
    color: var(--danger);
}
.button--danger-soft:hover {
    border-color: var(--danger);
    background: #f9d9d7;
    color: #9f2f32;
}
.button--success {
    border-color: #acd8c6;
    background: var(--success-soft);
    color: #08684e;
}
.button--success:hover {
    border-color: var(--success);
    background: #ccebdd;
}
@keyframes page-enter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes status-attention {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(179, 67, 67, 0);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(179, 67, 67, 0.16);
    }
}
.page-content--enter {
    animation: page-enter 0.2s ease-out both;
}
.button--trip-create {
    margin-top: 12px;
    border-color: rgba(175, 202, 49, 0.58);
    background: #afca31;
    color: #163326;
    box-shadow: 0 8px 22px rgba(175, 202, 49, 0.2);
}
.button--trip-create:hover {
    background: #c6dd45;
    box-shadow: 0 10px 28px rgba(175, 202, 49, 0.3);
}
.button--small {
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 9px;
    font-size: 13px;
}
.button--wide {
    width: 100%;
}
.icon-button {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--paper);
    cursor: pointer;
    transition:
        background 0.16s,
        border-color 0.16s,
        transform 0.16s;
}
.icon-button:hover {
    border-color: var(--brand-100);
    background: var(--brand-50);
}
.icon-button:active {
    transform: translateY(1px);
}
.icon-button--quiet {
    width: 40px;
    height: 40px;
    border-color: var(--brand-100);
    background: var(--brand-50);
    color: var(--brand-800);
}
.icon-button--quiet .icon {
    width: 19px;
    height: 19px;
}
.icon-button--quiet.is-loading .icon {
    animation: spin 0.8s linear infinite;
}
.icon {
    width: 19px;
    height: 19px;
    display: block;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.button .icon {
    width: 17px;
    height: 17px;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 25px;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--brand-50);
    color: var(--brand-800);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.badge::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    content: "";
}
.badge--success {
    background: var(--success-soft);
    color: var(--success);
}
.badge--warning {
    background: var(--warning-soft);
    color: var(--warning);
}
.badge--danger {
    background: var(--danger-soft);
    color: var(--danger);
}
.badge--info {
    background: var(--info-soft);
    color: var(--info);
}
.badge--neutral {
    background: #eef0ed;
    color: #63706d;
}
.badge--outline {
    border: 1px solid currentColor;
    background: transparent;
}
.tag {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 4px 8px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--white);
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 700;
}

.field {
    display: grid;
    min-width: 0;
    gap: 7px;
}
.badge--attention {
    animation: status-attention 1.8s ease-in-out 2;
}
.field label,
.field-label {
    color: var(--ink);
    font-size: 13px;
    font-weight: 750;
}
.required::after {
    color: var(--danger);
    content: " *";
}
.input,
.select,
.textarea {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 11px 13px;
    border: 1px solid #ccd2ce;
    border-radius: 11px;
    background: var(--white);
    color: var(--ink);
    transition:
        border 0.15s,
        box-shadow 0.15s;
}
.select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23087a5a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
}
.select:hover {
    border-color: var(--brand-700);
}
.textarea {
    min-height: 108px;
    resize: vertical;
}
.input:focus,
.select:focus,
.textarea:focus {
    border-color: var(--brand-700);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(0, 72, 49, 0.16);
}
.input[readonly] {
    background: #f5f5f1;
    color: var(--ink-soft);
}
.field-help {
    margin: 0;
    color: var(--ink-soft);
    font-size: 12px;
}
.trip-name-fields {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    background: var(--paper);
}
.trip-name-fields > div:first-child {
    display: grid;
    gap: 4px;
}
.trip-name-fields > div:first-child > label {
    color: var(--ink);
    font-size: 13px;
    font-weight: 750;
}
.trip-name-fields .field label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.trip-name-fields .flag-circle {
    width: 18px;
    height: 18px;
}
/* Highlighted hint — draws the eye to an actionable instruction. */
.field-help--notice {
    display: flex;
    gap: 7px;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--warning, #b97a24) 32%, transparent);
    background: color-mix(in srgb, var(--warning-soft, #fff3cf) 55%, var(--paper));
    color: color-mix(in srgb, var(--warning, #b97a24) 72%, var(--ink));
    font-weight: 600;
    line-height: 1.45;
}
.field-help--notice::before {
    content: "!";
    display: inline-grid;
    place-items: center;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--warning, #b97a24);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}
.searchable-select {
    display: grid;
    gap: 8px;
}
.searchable-select__search {
    width: 100%;
}
.searchable-select .field-help {
    min-height: 18px;
    margin: 0;
}
.contact-pickup-fields {
    margin: 2px 0;
    padding: 22px 0 4px;
}
.contact-pickup-fields .field-help {
    margin: 0 0 20px;
    line-height: 1.55;
}
.contact-phones-field {
    padding: 14px;
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    background: var(--paper);
}
.contact-phone-input-list {
    display: grid;
    gap: 9px;
    margin-top: 8px;
}
.contact-phone-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: start;
    gap: 8px;
}
.contact-phone-input-row.is-single {
    grid-template-columns: minmax(0, 1fr);
}
.contact-phone-input-row .icon-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
}
.contact-phone-error {
    grid-column: 1 / -1;
    margin: -2px 0 0;
    line-height: 1.45;
}
.contact-phone-add {
    margin-top: 10px;
}
.contact-phones-field .field-help {
    margin: 9px 0 0;
}
.field-error {
    margin: 0;
    color: var(--danger);
    font-size: 12px;
    font-weight: 650;
}
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    /* Size each field to its own content so a helper line under one field
       does not stretch the input in the field beside it. */
    align-items: start;
}
.form-grid > * {
    min-width: 0;
}
.input[type="date"],
.input[type="datetime-local"] {
    min-width: 0;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}
.form-grid .span-2 {
    grid-column: 1 / -1;
}

@media (max-width: 640px) {
    .drawer .form-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .drawer .form-grid .span-2 {
        grid-column: auto;
    }
}
.choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.choice {
    position: relative;
}
.choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.choice label {
    min-height: 48px;
    padding: 11px 13px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--white);
    cursor: pointer;
}
.choice label::before {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    border: 2px solid #a6b1ad;
    border-radius: 50%;
    content: "";
}
.choice input:checked + label {
    border-color: var(--brand-700);
    background: var(--brand-50);
    box-shadow: inset 0 0 0 1px var(--brand-700);
}
.choice input:checked + label::before {
    border: 5px solid var(--brand-700);
    background: white;
}
.choice input:focus-visible + label {
    outline: 3px solid rgba(0, 72, 49, 0.42);
}
.activity-audience-field {
    margin: 4px 0 0;
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--brand-700) 20%, var(--line));
    border-radius: 16px;
    background: linear-gradient(145deg, var(--brand-50), var(--paper) 58%);
}
.activity-audience-field legend {
    padding: 0 7px;
    color: var(--brand-800);
    font-size: 14px;
    font-weight: 800;
}
.activity-audience-field > .field-help {
    max-width: 62ch;
    margin: 0 0 14px;
    line-height: 1.5;
}
.activity-audience-mode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.activity-audience-mode label {
    min-height: 76px;
    align-items: flex-start;
    padding: 14px;
}
.activity-audience-mode label > span {
    display: grid;
    gap: 3px;
    min-width: 0;
}
.activity-audience-mode label strong {
    color: var(--ink);
    font-size: 14px;
}
.activity-audience-mode label small {
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
}
.activity-audience-mode input:disabled + label {
    cursor: not-allowed;
    opacity: 0.52;
}
.activity-audience-list {
    display: grid;
    gap: 12px;
    margin-top: 12px;
    padding: 14px;
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    background: var(--white);
}
.activity-audience-list[hidden] {
    display: none;
}
.activity-audience-list__head {
    display: grid;
    gap: 2px;
}
.activity-audience-list__head strong {
    color: var(--ink);
    font-size: 13px;
}
.activity-audience-list__head span {
    color: var(--ink-soft);
    font-size: 12px;
    line-height: 1.4;
}
.activity-audience-guests {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.activity-audience-guest label {
    min-height: 46px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 650;
}
.activity-audience-guest label::before {
    border-radius: 5px;
}
.activity-audience-guest input:checked + label::before {
    border: 2px solid var(--brand-700);
    background: var(--brand-700);
    box-shadow: inset 0 0 0 3px var(--white);
}
@media (max-width: 520px) {
    .activity-audience-field {
        padding: 15px;
    }
    .activity-audience-mode-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}
.chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}
.chip-choice {
    position: relative;
}
.chip-choice input {
    position: absolute;
    opacity: 0;
}
.chip-choice label {
    min-height: 42px;
    padding: 9px 13px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.chip-choice input:checked + label {
    border-color: var(--brand-700);
    background: var(--brand-900);
    color: white;
}

.card {
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    background: var(--paper);
    box-shadow: var(--shadow-sm);
}
.card__header {
    padding: 18px 20px 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.card__body {
    padding: 18px 20px 20px;
}
.card__title {
    margin: 0;
    font-size: 16px;
}
.section-heading {
    margin-bottom: 18px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}
.section-heading h1,
.section-heading h2 {
    margin-bottom: 6px;
}
.section-heading p {
    margin: 0;
    color: var(--ink-soft);
}
.stack {
    display: grid;
    gap: 14px;
}
.inline {
    display: flex;
    align-items: center;
    gap: 10px;
}
.inline--wrap {
    flex-wrap: wrap;
}
.split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
/* Header dạng "tiêu đề + nút hành động": khi drawer hẹp, nút tự xuống dòng
   thay vì bóp hẹp phần tiêu đề/mô tả. */
.split--section-head {
    align-items: flex-start;
    flex-wrap: wrap;
    row-gap: 12px;
}
.split--section-head > div {
    flex: 1 1 220px;
    min-width: 0;
}
.split--section-head > .button {
    flex: 0 0 auto;
}

.auth-page {
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(420px, 0.9fr) minmax(520px, 1.1fr);
    background: var(--paper);
}
.auth-story {
    min-height: 100dvh;
    align-self: stretch;
    padding: clamp(38px, 6vw, 84px);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: white;
    background: var(--brand-950);
}
.auth-story::before {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 40, 29, 0.25), rgba(0, 40, 29, 0.88)),
        url("https://images.unsplash.com/photo-1583417319070-4a69db38a482?auto=format&fit=crop&w=1600&q=80")
            center/cover;
    opacity: 0.72;
    content: "";
}
.auth-story::after {
    position: absolute;
    width: 480px;
    height: 480px;
    left: -180px;
    bottom: -220px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    box-shadow:
        0 0 0 70px rgba(255, 255, 255, 0.04),
        0 0 0 140px rgba(255, 255, 255, 0.03);
    content: "";
}
.auth-story > * {
    position: relative;
    z-index: 1;
}
.auth-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 850;
    letter-spacing: 0.12em;
}
.auth-copy {
    max-width: 560px;
}
.auth-copy h1 {
    margin-bottom: 20px;
    color: #fffdf8;
    font-family: var(--font-serif);
    font-size: clamp(40px, 5vw, 68px);
    font-weight: 500;
    letter-spacing: -0.04em;
}
.auth-copy p {
    max-width: 500px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 17px;
}
.auth-quote {
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.66);
    font-size: 13px;
}
.auth-panel {
    min-height: 100dvh;
    padding: clamp(30px, 6vw, 90px);
    display: grid;
    place-content: center;
    background: radial-gradient(circle at 100% 0, var(--sand) 0, transparent 38%);
}
.auth-box {
    width: min(540px, 100%);
}
.auth-box h2 {
    margin-bottom: 8px;
    font-size: 30px;
}
.password-input {
    position: relative;
}
.password-input .input {
    padding-right: 54px;
}
.password-toggle {
    width: 44px;
    height: 44px;
    padding: 0;
    position: absolute;
    top: 50%;
    right: 5px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--brand-800);
    cursor: pointer;
    transform: translateY(-50%);
}
.password-toggle:hover,
.password-toggle:focus-visible {
    background: var(--brand-50);
}
.password-toggle .icon {
    width: 19px;
    height: 19px;
}
.role-grid {
    margin-top: 28px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.role-card {
    padding: 16px;
    min-height: 118px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--white);
    text-align: left;
    cursor: pointer;
    transition:
        border 0.16s,
        transform 0.16s,
        box-shadow 0.16s;
}
.role-card:hover {
    border-color: var(--brand-700);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.role-card strong {
    font-size: 14px;
}
.role-card > span:last-child {
    display: grid;
    gap: 2px;
}
.role-card small {
    display: block;
    color: var(--ink-soft);
}
.role-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--brand-50);
    color: var(--brand-800);
}
.auth-divider {
    margin: 28px 0 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #87918e;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
}
.auth-divider::before,
.auth-divider::after {
    flex: 1;
    height: 1px;
    background: var(--line);
    content: "";
}
.guest-demo {
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-radius: 14px;
    background: var(--coral-soft);
}
.guest-demo p {
    margin: 2px 0 0;
    color: #805340;
    font-size: 12px;
}

.staff-shell {
    --staff-sidebar-width: var(--sidebar);
    min-height: 100vh;
    padding-left: var(--staff-sidebar-width);
    background: #f3f4f0;
    transition: padding-left 260ms cubic-bezier(0.2, 0.75, 0.25, 1);
}
.sidebar {
    width: var(--staff-sidebar-width);
    height: 100dvh;
    position: fixed;
    z-index: 40;
    inset: 0 auto 0 0;
    padding: 22px 16px 18px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.82);
    background: var(--brand-950);
    transition:
        width 260ms cubic-bezier(0.2, 0.75, 0.25, 1),
        padding 260ms cubic-bezier(0.2, 0.75, 0.25, 1);
}
.sidebar > * {
    min-width: 0;
}
.sidebar-collapse-toggle {
    width: 36px;
    height: 36px;
    padding: 0;
    position: fixed;
    z-index: 55;
    top: 16px;
    left: calc(var(--staff-sidebar-width) - 18px);
    display: grid;
    place-items: center;
    border: 2px solid var(--white);
    border-radius: 50%;
    background: #afca31;
    color: var(--brand-950);
    box-shadow:
        0 0 0 3px rgba(175, 202, 49, 0.24),
        0 7px 18px rgba(0, 40, 29, 0.24);
    cursor: pointer;
    transition:
        left 260ms cubic-bezier(0.2, 0.75, 0.25, 1),
        background 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}
.sidebar-collapse-toggle:hover {
    border-color: var(--white);
    background: #c6dd45;
    box-shadow:
        0 0 0 4px rgba(175, 202, 49, 0.3),
        0 9px 22px rgba(0, 40, 29, 0.28);
    transform: scale(1.06);
}
.sidebar-collapse-toggle:focus-visible {
    outline: 3px solid rgba(0, 72, 49, 0.28);
    outline-offset: 3px;
}
.sidebar-collapse-toggle .icon {
    width: 15px;
    height: 15px;
    transition: transform 260ms cubic-bezier(0.2, 0.75, 0.25, 1);
}
.staff-shell.is-sidebar-collapsed {
    --staff-sidebar-width: 76px;
}
.staff-shell.is-sidebar-collapsed .sidebar {
    /* The compact rail is deliberately edge-to-edge: leaving the normal
       horizontal gutter here made the icon column look optically shifted. */
    padding-right: 0;
    padding-left: 0;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: visible;
}
.staff-shell.is-sidebar-collapsed .sidebar-brand {
    padding: 0;
    justify-content: center;
}
.staff-shell.is-sidebar-collapsed .sidebar-brand__name,
.staff-shell.is-sidebar-collapsed .trip-switcher,
.staff-shell.is-sidebar-collapsed .sidebar-label,
.staff-shell.is-sidebar-collapsed .nav-item > span:not(.nav-badge),
.staff-shell.is-sidebar-collapsed .user-chip__identity,
.staff-shell.is-sidebar-collapsed .user-chip > .avatar {
    display: none;
}
.staff-shell.is-sidebar-collapsed .sidebar-nav {
    padding-top: 16px;
    overflow-x: hidden;
}
.staff-shell.is-sidebar-collapsed .nav-item {
    width: 48px;
    min-height: 44px;
    margin-inline: auto;
    padding: 9px;
    position: relative;
    gap: 0;
    justify-content: center;
}
.staff-shell.is-sidebar-collapsed .nav-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    margin: 0;
    min-width: 17px;
    padding: 1px 4px;
    font-size: 9px;
    line-height: 1.25;
}
.staff-shell.is-sidebar-collapsed .sidebar-user {
    padding-inline: 0;
}
.staff-shell.is-sidebar-collapsed .user-chip {
    gap: 0;
    justify-content: center;
}
.staff-shell.is-sidebar-collapsed .user-chip__identity,
.staff-shell.is-sidebar-collapsed .user-chip > .avatar {
    width: 0;
    flex: 0 0 0;
    overflow: hidden;
}
.staff-shell.is-sidebar-collapsed .sidebar-user-menu__popover {
    right: auto;
    bottom: 0;
    left: calc(100% + 14px);
}
.staff-shell.is-sidebar-collapsed .sidebar-collapse-toggle .icon {
    transform: rotate(180deg);
}
.sidebar-brand__name,
.trip-switcher,
.sidebar-label,
.nav-item > span:not(.nav-badge),
.user-chip__identity,
.user-chip > .avatar {
    transition:
        opacity 160ms ease,
        transform 200ms cubic-bezier(0.2, 0.75, 0.25, 1),
        max-width 260ms cubic-bezier(0.2, 0.75, 0.25, 1);
}
.sidebar-brand__name,
.nav-item > span:not(.nav-badge),
.user-chip__identity {
    max-width: 180px;
    overflow: hidden;
    white-space: nowrap;
}
.staff-shell.is-sidebar-collapsed .sidebar-brand__name,
.staff-shell.is-sidebar-collapsed .nav-item > span:not(.nav-badge),
.staff-shell.is-sidebar-collapsed .user-chip__identity,
.staff-shell.is-sidebar-collapsed .user-chip > .avatar {
    display: block;
    max-width: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-8px);
}
.sidebar-brand {
    height: 50px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    gap: 11px;
    color: white;
    font-size: 14px;
    font-weight: 850;
    letter-spacing: 0.11em;
}
.trip-switcher {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 16px 0 22px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
}
.trip-switcher small {
    display: block;
    margin-bottom: 4px;
    color: rgba(255, 255, 255, 0.46);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}
.trip-switcher strong {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar-label {
    padding: 0 11px;
    margin-bottom: 7px;
    color: rgba(255, 255, 255, 0.38);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.sidebar-nav {
    width: 100%;
    display: grid;
    align-content: start;
    grid-auto-rows: min-content;
    gap: 4px;
    min-height: 0;
    padding-bottom: 14px;
    overflow-y: auto;
    scrollbar-width: none;
}
.sidebar-nav::-webkit-scrollbar {
    width: 0;
    height: 0;
}
.nav-item {
    min-height: 43px;
    padding: 9px 11px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
    font-weight: 680;
    text-align: left;
    cursor: pointer;
}
.nav-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: white;
}
.nav-item.active {
    background: rgba(255, 255, 255, 0.11);
    color: white;
}
.nav-item .icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}
.sidebar-user {
    margin-top: 4px;
    padding: 14px 8px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.user-chip {
    display: flex;
    align-items: center;
    gap: 10px;
}
.user-chip__identity {
    min-width: 0;
    flex: 1;
}
.avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: var(--brand-100);
    color: var(--brand-800);
    font-size: 13px;
    font-weight: 850;
}
.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sidebar-user strong {
    display: block;
    color: white;
    font-size: 12px;
}
.sidebar-user small {
    color: rgba(255, 255, 255, 0.45);
    font-size: 10px;
}
.sidebar-user-menu {
    position: relative;
}
.sidebar-user-menu__trigger {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.78);
    cursor: pointer;
}
.sidebar-user-menu__trigger:hover,
.sidebar-user-menu__trigger[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.14);
    color: white;
}
.sidebar-user-menu__popover {
    width: 190px;
    padding: 6px;
    position: absolute;
    z-index: 70;
    right: 0;
    bottom: calc(100% + 10px);
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--white);
    box-shadow: 0 14px 30px rgba(0, 40, 29, 0.2);
}
.sidebar-user-menu__popover button {
    width: 100%;
    min-height: 40px;
    padding: 8px 9px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--brand-800);
    font: inherit;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
}
.sidebar-user-menu__popover button:hover:not(:disabled) {
    background: var(--brand-50);
    color: var(--brand-900);
}
.sidebar-user-menu__popover button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.sidebar-user-menu__popover .icon {
    width: 16px;
    height: 16px;
}
.sidebar-user-menu__popover small {
    margin-left: auto;
    color: var(--ink-soft);
    font-size: 9px;
}
.sidebar-user-menu__popover [data-logout] {
    color: var(--danger);
}
.sidebar-user-menu__popover [data-logout]:hover:not(:disabled) {
    background: var(--danger-soft);
    color: var(--danger);
}

.staff-topbar {
    height: 68px;
    padding: 0 clamp(20px, 3vw, 40px);
    position: sticky;
    z-index: 30;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line-soft);
    background: rgba(255, 255, 255, 0.91);
    backdrop-filter: blur(18px);
}
.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ink-soft);
    font-size: 12px;
}
.breadcrumbs strong {
    color: var(--ink);
}
.topbar-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}
.language-picker {
    position: relative;
}
.language-picker__trigger {
    min-height: 36px;
    padding: 5px 9px 5px 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.75);
    color: var(--ink);
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}
.language-picker__trigger:hover,
.language-picker__trigger[aria-expanded="true"] {
    border-color: var(--brand-300);
    background: var(--brand-50);
}
.flag-circle {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.flag-circle svg {
    width: 100%;
    height: 100%;
    display: block;
}
.language-picker__trigger > .icon {
    width: 15px;
    height: 15px;
    color: var(--brand-700);
    stroke-width: 2.5;
}
.language-picker__menu {
    width: 176px;
    padding: 5px;
    position: absolute;
    z-index: 60;
    top: calc(100% + 8px);
    right: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--paper);
    box-shadow: var(--shadow-md);
}
.language-picker__menu button {
    width: 100%;
    min-height: 38px;
    padding: 7px 8px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
}
.language-picker__menu button:hover,
.language-picker__menu button.is-active {
    background: var(--brand-50);
    color: var(--brand-900);
}
.language-picker__menu button.is-unavailable {
    color: #81908b;
    cursor: not-allowed;
}
.language-picker__menu button.is-unavailable .flag-circle {
    opacity: 0.72;
}
.language-picker__menu button small {
    margin-left: auto;
    color: #83918c;
    font-size: 10px;
    font-weight: 650;
}
.language-picker__menu .icon {
    width: 15px;
    height: 15px;
    margin-left: auto;
}
.sync-state {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-soft);
    font-size: 11px;
}
.sync-state::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 3px var(--success-soft);
    content: "";
}
.sync-state .icon {
    width: 15px;
    height: 15px;
}
.staff-main {
    width: 100%;
    min-height: calc(100vh - 68px);
    padding: 30px clamp(20px, 3vw, 40px) 36px;
    background: #f3f4f0;
}
.mobile-topbar {
    display: none;
}

.trip-hero {
    margin-bottom: 22px;
    padding: 22px 24px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-radius: var(--radius-lg);
    color: white;
    background: linear-gradient(118deg, var(--brand-950), var(--brand-800));
    box-shadow: var(--shadow-md);
}
.trip-hero::after {
    width: 240px;
    height: 240px;
    position: absolute;
    right: -80px;
    top: -100px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    box-shadow:
        0 0 0 42px rgba(255, 255, 255, 0.04),
        0 0 0 84px rgba(255, 255, 255, 0.025);
    content: "";
}
.trip-hero > * {
    position: relative;
    z-index: 1;
}
.trip-hero .eyebrow {
    color: #f1b89a;
}
.trip-hero h1 {
    margin-bottom: 9px;
    font-size: clamp(24px, 2.6vw, 36px);
}
.trip-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    color: rgba(255, 255, 255, 0.67);
    font-size: 12px;
}
.trip-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}
.trip-hero__actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.trip-hero .button--secondary {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.kpi-grid {
    margin-bottom: 22px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}
.kpi-card {
    width: 100%;
    min-height: 132px;
    padding: 17px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    background: var(--paper);
    box-shadow: var(--shadow-sm);
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}
.kpi-card:hover {
    border-color: #c5d7d4;
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.kpi-card:focus-visible {
    outline: 3px solid rgba(0, 72, 49, 0.2);
    outline-offset: 2px;
}
.kpi-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.kpi-card__icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--brand-50);
    color: var(--brand-700);
}
.kpi-card--danger .kpi-card__icon {
    background: var(--danger-soft);
    color: var(--danger);
}
.kpi-card--warning .kpi-card__icon {
    background: var(--warning-soft);
    color: var(--warning);
}
.kpi-value {
    margin: 12px 0 2px;
    font-family: var(--font-serif);
    font-size: 31px;
    font-weight: 700;
    line-height: 1;
}
.kpi-label {
    margin: 0;
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 700;
}
.kpi-trend {
    color: var(--success);
    font-size: 10px;
    font-weight: 750;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(330px, 0.7fr);
    gap: 18px;
}
.dashboard-grid + .dashboard-grid {
    margin-top: 18px;
}
.workstreams-card {
    margin-top: 18px;
}
.workstreams-card .card__header {
    align-items: center;
    padding-bottom: 2px;
}
.workstreams-card .card__body {
    padding-top: 12px;
}
.workstream-row {
    padding: 16px 0;
}
.readiness {
    padding: 18px 20px;
}
.progress-track {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #e8ebe6;
}
.progress-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand-700), #51ad89);
    transition: width 0.25s;
}
.p0 {
    width: 0%;
}
.p10 {
    width: 10%;
}
.p20 {
    width: 20%;
}
.p30 {
    width: 30%;
}
.p40 {
    width: 40%;
}
.p50 {
    width: 50%;
}
.p60 {
    width: 60%;
}
.p70 {
    width: 70%;
}
.p80 {
    width: 80%;
}
.p90 {
    width: 90%;
}
.p100 {
    width: 100%;
}
.readiness-legend {
    margin-top: 13px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.legend-item strong {
    display: block;
    font-size: 16px;
}
.legend-item small {
    color: var(--ink-soft);
    font-size: 10px;
}
.timeline {
    position: relative;
}
.timeline-item {
    padding: 0 0 22px;
    position: relative;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 12px;
}
.timeline-item::before {
    width: 10px;
    height: 10px;
    position: absolute;
    left: 18px;
    top: 6px;
    border: 2px solid var(--paper);
    border-radius: 50%;
    background: var(--brand-700);
    box-shadow:
        0 0 0 4px var(--paper),
        0 0 0 5px var(--brand-100);
    content: "";
}
.timeline-item::after {
    width: 1px;
    position: absolute;
    left: 23px;
    top: 20px;
    bottom: -1px;
    background: var(--line);
    content: "";
}
.timeline-item:last-child::after {
    display: none;
}
.timeline-time {
    padding-left: 50px;
    color: var(--brand-800);
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.timeline-item strong {
    display: block;
    margin-bottom: 2px;
    font-size: 13px;
}
.timeline-item small {
    color: var(--ink-soft);
}
.issue-list {
    display: grid;
}
.issue-row {
    padding: 14px 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    border-bottom: 1px solid var(--line-soft);
    cursor: pointer;
}
.issue-row:last-child {
    border: 0;
}
.severity-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--info);
    box-shadow: 0 0 0 4px var(--info-soft);
}
.severity-dot.urgent {
    background: var(--danger);
    box-shadow: 0 0 0 4px var(--danger-soft);
}
.issue-row strong {
    display: block;
    margin-bottom: 2px;
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.issue-row small {
    color: var(--ink-soft);
    font-size: 10px;
}

.toolbar {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.toolbar__filters {
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}
.search {
    width: min(340px, 100%);
    position: relative;
}
.search .input {
    padding-left: 40px;
}
.search .icon {
    position: absolute;
    left: 13px;
    top: 13px;
    color: #7c8a86;
}
.toolbar .select {
    width: auto;
    min-width: 150px;
}
.table-wrap {
    overflow: auto;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    background: var(--paper);
    box-shadow: var(--shadow-sm);
}
.data-table {
    width: 100%;
    border-collapse: collapse;
}
.data-table th {
    padding: 12px 14px;
    position: sticky;
    top: 0;
    background: #f7f8f4;
    color: #71807c;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}
.data-table td {
    padding: 13px 14px;
    border-top: 1px solid var(--line-soft);
    font-size: 12px;
    vertical-align: middle;
}
.data-table tbody tr {
    cursor: pointer;
}
.data-table tbody tr:hover {
    background: var(--brand-50);
}
.data-table tbody tr.user-row--self,
.data-table tbody tr.user-row--self:hover {
    background: #e4f4ec;
}
.self-label {
    width: fit-content;
    margin-top: 3px;
    padding: 2px 7px;
    display: block;
    border-radius: 999px;
    background: var(--brand-900);
    color: var(--white);
    font-size: 9px;
    font-weight: 800;
    line-height: 1.45;
}
.self-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--brand-800);
    font-size: 11px;
    font-weight: 750;
    white-space: nowrap;
}
.self-action .icon {
    width: 15px;
    height: 15px;
}
.person-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 170px;
}
.person-cell .avatar {
    width: 34px;
    height: 34px;
}
.person-cell strong {
    display: block;
    font-size: 12px;
}
.person-cell small {
    color: var(--ink-soft);
    font-size: 10px;
}
.flag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.empty-state {
    min-height: 260px;
    padding: 40px;
    display: grid;
    place-content: center;
    justify-items: center;
    text-align: center;
}
.empty-state__icon {
    width: 54px;
    height: 54px;
    margin-bottom: 13px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: var(--brand-50);
    color: var(--brand-700);
}
.empty-state h3 {
    margin-bottom: 5px;
}
.empty-state p {
    max-width: 360px;
    color: var(--ink-soft);
}

.board-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}
.board-column {
    min-height: 0;
    padding: 12px;
    border-radius: var(--radius-md);
    background: #e9ece7;
    transition:
        background 0.16s,
        box-shadow 0.16s;
}
.board-column.is-drop-target {
    background: var(--brand-50);
    box-shadow: inset 0 0 0 2px var(--brand-700);
}
.board-column__title {
    padding: 4px 4px 12px;
    display: flex;
    justify-content: space-between;
    color: #5c6b67;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.task-card {
    margin-bottom: 10px;
    padding: 14px;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: var(--paper);
    box-shadow: var(--shadow-sm);
    cursor: grab;
    transition:
        box-shadow 0.16s,
        opacity 0.16s,
        transform 0.16s;
}
.task-card:hover {
    box-shadow: var(--shadow-md);
}
.task-card:active {
    cursor: grabbing;
}
.task-card.is-dragging {
    opacity: 0.45;
    transform: rotate(1deg);
}
.task-card__top {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.task-drag-handle {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--brand-50);
    color: var(--brand-700);
}
.task-drag-handle .icon {
    width: 16px;
    height: 16px;
}
.task-card h3 {
    margin-bottom: 8px;
    font-size: 13px;
}
.task-card p {
    margin-bottom: 12px;
    color: var(--ink-soft);
    font-size: 11px;
}
.task-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--ink-soft);
    font-size: 10px;
}
.pagination {
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--ink-soft);
    font-size: 13px;
}
.pagination__controls {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.pagination__size-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-soft);
    font-size: 12px;
    white-space: nowrap;
}
.pagination__size {
    width: 68px;
    min-height: 36px;
    padding: 6px 26px 6px 10px;
    border-radius: 9px;
    font-size: 12px;
}
.pagination .nice-select {
    width: 68px;
    flex: 0 0 68px;
}
.pagination .nice-select__menu {
    top: auto;
    right: 0;
    bottom: calc(100% + 6px);
    left: auto;
    width: 84px;
    min-width: 84px;
    max-height: 218px;
}
.pagination__actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.pagination__actions .icon-button {
    width: 40px;
    height: 40px;
}
.pagination__current {
    min-width: 82px;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    text-align: center;
}
.task-card.is-pending {
    opacity: 0.55;
    pointer-events: none;
}
.task-card__actions {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.task-card__actions .button {
    width: 100%;
}
.task-card__actions .status-chips {
    width: 100%;
}
.task-card__actions .status-chip {
    min-height: 35px;
}

.itinerary-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 18px;
}
.publish-banner {
    margin-bottom: 16px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid #f0cfab;
    border-radius: 13px;
    background: var(--warning-soft);
}
.publish-banner strong {
    display: block;
    font-size: 13px;
}
.publish-banner small {
    color: #8a643c;
}
.publish-banner--synced {
    border-color: #b9ddca;
    background: var(--success-soft);
}
.publish-banner--synced small {
    color: #267054;
}
.day-tabs {
    margin-bottom: 16px;
    display: flex;
    gap: 8px;
    overflow-x: auto;
}
.day-tabs--guest {
    margin: 2px 0 20px;
    padding-top: 18px;
    border-top: 1px solid var(--line-soft);
}
.day-tab {
    min-width: 90px;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    cursor: pointer;
}
.day-tab.active {
    border-color: var(--brand-700);
    background: var(--brand-900);
    color: white;
}
.day-tab span {
    display: block;
    font-size: 10px;
    opacity: 0.7;
}
.activity-editor-card {
    margin-bottom: 10px;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    border: 1px solid var(--line-soft);
    border-radius: 13px;
    background: var(--paper);
}
.activity-time {
    color: var(--brand-800);
    font-weight: 850;
}
.activity-time small {
    display: block;
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 500;
}
.activity-editor-card h3 {
    margin-bottom: 3px;
    font-size: 14px;
}
.activity-editor-card p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 11px;
}
.activity-editor-card__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    white-space: nowrap;
}
.preview-phone {
    width: 100%;
    max-width: 318px;
    margin: 0 auto;
    padding: 12px;
    position: relative;
    isolation: isolate;
    border-radius: 38px;
    background: linear-gradient(145deg, #10211e 0%, #263636 52%, #152421 100%);
    box-shadow:
        0 24px 48px rgba(22, 49, 44, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.preview-phone::before {
    width: 44%;
    height: 38%;
    position: absolute;
    z-index: -1;
    top: 12px;
    right: 12px;
    border-radius: 999px;
    background: rgba(161, 221, 201, 0.16);
    filter: blur(22px);
    content: "";
}
.preview-phone__screen {
    height: clamp(470px, 66vh, 610px);
    padding: 28px 16px 22px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    border-radius: 28px;
    background:
        radial-gradient(circle at 96% 3%, rgba(184, 230, 211, 0.45), transparent 34%),
        linear-gradient(180deg, #faf9f4 0%, var(--sand) 38%);
}
.preview-phone__notch {
    width: 70px;
    height: 17px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 0 0 12px 12px;
    background: #1f2b2c;
}
.preview-phone__status {
    min-height: 16px;
    margin: -14px 2px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--ink);
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
}
.preview-phone__status time {
    font-variant-numeric: tabular-nums;
}
.preview-phone__status-icons {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.preview-phone__signal {
    height: 9px;
    display: inline-flex;
    align-items: flex-end;
    gap: 1px;
}
.preview-phone__signal i {
    width: 2px;
    display: block;
    border-radius: 1px;
    background: currentColor;
}
.preview-phone__signal i:nth-child(1) {
    height: 3px;
}
.preview-phone__signal i:nth-child(2) {
    height: 6px;
}
.preview-phone__signal i:nth-child(3) {
    height: 9px;
}
.preview-phone__wifi {
    width: 14px;
    height: 12px;
    display: inline-block;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.75' stroke-linecap='round'%3E%3Cpath d='M4 9a12 12 0 0 1 16 0'/%3E%3Cpath d='M7.5 13a7 7 0 0 1 9 0'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E")
        center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.75' stroke-linecap='round'%3E%3Cpath d='M4 9a12 12 0 0 1 16 0'/%3E%3Cpath d='M7.5 13a7 7 0 0 1 9 0'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E")
        center / contain no-repeat;
}
.preview-phone__wifi::after {
    content: none;
}
.preview-phone__battery {
    width: 16px;
    height: 8px;
    position: relative;
    padding: 1px;
    display: inline-flex;
    border: 1.2px solid currentColor;
    border-radius: 2px;
}
.preview-phone__battery::after {
    width: 2px;
    height: 4px;
    position: absolute;
    top: 1px;
    right: -3px;
    border-radius: 0 1px 1px 0;
    background: currentColor;
    content: "";
}
.preview-phone__battery i {
    width: 72%;
    display: block;
    border-radius: 1px;
    background: currentColor;
}
.preview-phone h3 {
    margin: 0 0 8px;
    flex: 0 0 auto;
    font-family: var(--font-serif);
    font-size: 20px;
    line-height: 1.18;
    letter-spacing: -0.02em;
}
.preview-phone__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.preview-phone__header .eyebrow {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--brand-700);
    font-size: 10px;
    line-height: 1.35;
}
.preview-phone__live-dot {
    width: 6px;
    height: 6px;
    display: inline-block;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--coral);
    box-shadow: 0 0 0 4px rgba(241, 122, 77, 0.12);
    animation: preview-live-pulse 1.8s ease-in-out infinite;
}
.preview-phone__language-label {
    margin-top: 4px;
    display: block;
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 750;
}
.locale-switch--preview {
    padding: 3px;
    flex: 0 0 auto;
    gap: 2px;
    border-color: rgba(16, 83, 61, 0.14);
    border-radius: 13px;
    background-color: rgba(255, 255, 255, 0.76);
    box-shadow: 0 4px 12px rgba(26, 65, 55, 0.08);
}
.locale-switch--preview button {
    min-width: 34px;
    min-height: 34px;
    padding: 5px 6px;
    border-radius: 10px;
    font-size: 10px;
}
.locale-switch--preview button.active {
    box-shadow: 0 3px 7px rgba(3, 82, 58, 0.24);
}
.preview-phone__journey {
    margin: 14px 0 8px;
    padding: 7px 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid rgba(16, 83, 61, 0.1);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.62);
}
.preview-phone__journey span {
    color: var(--ink-soft);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.1em;
}
.preview-phone__journey strong {
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--mint);
    color: var(--brand-800);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}
.preview-phone__activities {
    min-height: 0;
    margin: 0 -4px 10px 0;
    padding: 2px 8px 2px 2px;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: 8px;
    scrollbar-gutter: stable;
}
.preview-phone__footer {
    flex: 0 0 auto;
    padding-top: 10px;
    border-top: 1px solid var(--line-soft);
}
.preview-activity {
    margin-top: 9px;
    padding: 11px;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 8px;
    border: 1px solid rgba(16, 83, 61, 0.06);
    border-radius: 15px;
    background: var(--white);
    box-shadow: 0 6px 16px rgba(24, 57, 50, 0.08);
}
.preview-activity.is-live {
    border-color: rgba(7, 134, 96, 0.3);
    box-shadow: 0 8px 18px rgba(12, 119, 84, 0.14);
}
.preview-activity__marker {
    width: 22px;
    height: 22px;
    margin-top: 1px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--mint);
    color: var(--brand-700);
    font-size: 8px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}
.preview-activity__body {
    min-width: 0;
}
.preview-activity time {
    display: block;
    color: var(--coral-dark);
    font-size: 10px;
    font-weight: 800;
}
.preview-activity strong {
    margin-top: 3px;
    display: block;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.32;
}
.preview-activity small {
    margin-top: 3px;
    display: block;
    overflow: hidden;
    color: var(--ink-soft);
    font-size: 10px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@keyframes preview-live-pulse {
    50% {
        opacity: 0.55;
        transform: scale(0.88);
    }
}
@media (prefers-reduced-motion: reduce) {
    .preview-phone__live-dot {
        animation: none;
    }
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.contact-card {
    padding: 18px;
}
.contact-card__person {
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.contact-card__person .avatar {
    width: 50px;
    height: 50px;
}
.contact-card h3 {
    margin: 0 0 3px;
}
.contact-card p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 11px;
}
.contact-info {
    display: grid;
    gap: 8px;
}
.contact-info > div {
    padding: 9px 0;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    border-top: 1px solid var(--line-soft);
    font-size: 11px;
}
.contact-info > div > span {
    color: var(--ink-soft);
}
.contact-info__phones {
    align-items: center;
}
.contact-phone-links {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}
.contact-phone-links a {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    gap: 6px;
    color: var(--brand-800);
    text-decoration: none;
}
.contact-phone-links__more {
    position: relative;
}
.contact-phone-links__more > summary {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    gap: 2px;
    padding: 0 7px;
    border: 1px solid var(--brand-100);
    border-radius: 999px;
    color: var(--brand-700);
    background: var(--brand-50);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    list-style: none;
    cursor: pointer;
}
.contact-phone-links__more > summary::-webkit-details-marker {
    display: none;
}
.contact-phone-links__more > summary .icon {
    width: 12px;
    height: 12px;
    transition: transform 160ms ease;
}
.contact-phone-links__more[open] > summary {
    border-color: var(--brand-700);
}
.contact-phone-links__more[open] > summary .icon {
    transform: rotate(180deg);
}
.contact-phone-links__menu {
    position: absolute;
    z-index: 4;
    top: calc(100% + 7px);
    right: 0;
    width: max-content;
    min-width: 184px;
    max-width: min(280px, calc(100vw - 48px));
    padding: 7px;
    display: grid;
    gap: 4px;
    border: 1px solid var(--brand-100);
    border-radius: 12px;
    background: var(--white);
    box-shadow: var(--shadow-md);
}
.contact-phone-links__menu a {
    min-height: 38px;
    padding: 8px 9px;
    border-radius: 8px;
    font-size: 11px;
}
.contact-phone-links__menu a:hover,
.contact-phone-links__menu a:focus-visible {
    background: var(--brand-50);
    outline: 0;
}
.contact-phone-links__menu .icon {
    width: 15px;
    height: 15px;
}
.contact-phone-links a > span {
    padding: 3px 6px;
    border-radius: 999px;
    color: var(--brand-700);
    background: var(--brand-50);
    font-size: 9px;
    font-weight: 800;
}

.insight-grid {
    margin-bottom: 18px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.mini-stat {
    padding: 17px;
}
.mini-stat strong {
    display: block;
    margin-bottom: 4px;
    font-family: var(--font-serif);
    font-size: 30px;
}
.mini-stat span {
    color: var(--ink-soft);
    font-size: 13px;
    line-height: 1.4;
}
.charts-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.bar-chart {
    display: grid;
    gap: 13px;
}
.bar-row {
    display: grid;
    grid-template-columns: 100px 1fr 26px;
    align-items: center;
    gap: 10px;
    font-size: 11px;
}
.bar-track {
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: #e7ebe7;
}
.bar-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand-700), #62b995);
}
.bar-fill.coral {
    background: linear-gradient(90deg, var(--coral), #f2b27d);
}
.recommendation {
    margin-top: 18px;
    padding: 20px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    border: 1px solid #c9ded9;
    border-radius: var(--radius-md);
    background: var(--brand-50);
}
.recommendation__icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: var(--brand-900);
    color: white;
}
.recommendation h3 {
    margin-bottom: 3px;
}
.recommendation p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 12px;
}

.report-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.report-assurance {
    margin-bottom: 16px;
    padding: 17px 20px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    border: 1px solid #b7d7ca;
    border-radius: 16px;
    background: linear-gradient(115deg, #e8f5ef, #f9fcf9 62%);
}
.report-assurance__icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--brand-900);
    color: white;
}
.report-assurance__icon .icon {
    width: 22px;
    height: 22px;
}
.report-assurance .eyebrow {
    margin-bottom: 3px;
}
.report-assurance strong {
    display: block;
    font-size: 16px;
}
.report-assurance p {
    margin: 3px 0 0;
    color: var(--ink-soft);
    font-size: 13px;
}
.report-assurance__stats {
    display: flex;
    gap: 18px;
}
.report-assurance__stats span {
    display: grid;
    gap: 2px;
    color: var(--ink-soft);
    font-size: 10px;
    white-space: nowrap;
}
.report-assurance__stats b {
    color: var(--brand-900);
    font-size: 17px;
}
.report-card {
    min-height: 246px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    border-color: #dbe4df;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}
.report-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.report-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.report-card__top .tag {
    font-size: 9px;
}
.report-icon {
    width: 42px;
    height: 42px;
    margin-bottom: 25px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--brand-50);
    color: var(--brand-700);
}
.report-card h3 {
    margin-bottom: 6px;
}
.report-card p {
    min-height: 54px;
    margin-bottom: 18px;
    color: var(--ink-soft);
    font-size: 14px;
    line-height: 1.55;
}
.report-card__foot {
    margin-top: auto;
    display: grid;
    gap: 11px;
}
.report-card__foot > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--ink-soft);
    font-size: 10px;
}
.report-card__foot > span .icon {
    width: 13px;
    height: 13px;
    color: var(--brand-700);
}
.report-principles {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.report-principles article {
    padding: 15px 17px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid var(--line-soft);
    border-radius: 13px;
    background: var(--paper);
}
.report-principles strong {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
}
.report-principles p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 13px;
    line-height: 1.45;
}

.audit-list {
    display: grid;
}
.audit-row {
    padding: 9px 0;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--line-soft);
}
.audit-row:last-child {
    border: 0;
}
.audit-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--brand-50);
    color: var(--brand-700);
}
.audit-row strong {
    display: block;
    font-size: 13px;
}
.audit-row small {
    color: var(--ink-soft);
    font-size: 11.5px;
    line-height: 1.4;
}
.is-hidden {
    display: none !important;
}

.ops-dashboard {
    display: grid;
    gap: 18px;
}
.ops-hero {
    margin-bottom: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
    gap: 18px;
}
.ops-greeting {
    min-height: 230px;
    padding: 26px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-radius: var(--radius-lg);
    color: white;
    background: linear-gradient(135deg, var(--brand-950), var(--brand-700));
}
.ops-greeting::after {
    width: 230px;
    height: 230px;
    position: absolute;
    top: -80px;
    right: -70px;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 50%;
    box-shadow: 0 0 0 40px rgba(255, 255, 255, 0.04);
    content: "";
}
.ops-greeting h1 {
    margin-bottom: 7px;
    font-size: 30px;
}
.ops-greeting p {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
}
.ops-greeting .ops-greeting__next {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 700;
}
.ops-greeting .ops-greeting__focus {
    max-width: 66ch;
    margin-top: 9px;
    font-size: 12px;
    line-height: 1.5;
}
.action-alerts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.action-alert {
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    background: var(--paper);
    box-shadow: var(--shadow-sm);
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}
.action-alert:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.action-alert:focus-visible {
    outline: 3px solid rgba(0, 72, 49, 0.2);
    outline-offset: 2px;
}
.action-alert strong {
    font-family: var(--font-serif);
    font-size: 34px;
}
.action-alert p {
    margin: 4px 0 0;
    color: var(--ink-soft);
    font-size: 11px;
}
.action-alert.danger {
    border: 1px solid #efc9c5;
    background: #fff9f7;
}
.action-alert.warning {
    border: 1px solid #ead9b8;
    background: #fffaf1;
}
.action-alert.success {
    grid-column: 1 / -1;
    min-height: 92px;
    padding-block: 14px;
    flex-direction: row;
    align-items: center;
    border-color: #c8e4d8;
    background: #f4fbf7;
}
.action-alert.success > div {
    margin-right: auto;
}
.action-alert.success strong {
    font-size: 28px;
}
.action-alert__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--brand-800);
    font-size: 11px;
    font-weight: 800;
}
.action-alert__link .icon {
    width: 14px;
    height: 14px;
}
.ops-priority-card .card__header {
    align-items: center;
}
.ops-summary {
    color: var(--ink-soft);
    font-size: 12px;
    white-space: nowrap;
}
.ops-summary span {
    margin-inline: 5px;
    color: var(--brand-300);
}
.ops-list {
    display: grid;
    gap: 10px;
}
.ops-item {
    padding: 15px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    border: 1px solid var(--line-soft);
    border-radius: 13px;
    background: var(--paper);
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}
.ops-item:hover {
    border-color: #c7d9d3;
    box-shadow: 0 6px 18px rgba(0, 40, 29, 0.06);
}
.ops-item.is-overdue {
    border-color: #efc9c5;
    background: #fffafa;
}
.ops-item__content {
    min-width: 0;
}
.ops-item__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
.ops-task-state {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--brand-50);
    color: var(--brand-700);
}
.ops-task-state .icon {
    width: 18px;
    height: 18px;
}
.check-toggle {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: 2px solid #b7c1bd;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}
.check-toggle.done {
    border-color: var(--success);
    background: var(--success);
    color: white;
}
.ops-item h3 {
    margin: 0 0 3px;
    font-size: 13px;
}
.ops-item p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 11px;
}

.drawer-backdrop {
    position: fixed;
    z-index: 90;
    inset: 0;
    background: rgba(0, 40, 29, 0.44);
    opacity: 0;
    animation: fade-in 0.18s forwards;
}
body.has-drawer {
    overflow: hidden;
}
body.has-legal-editor-modal {
    overflow: hidden;
    position: fixed;
    width: 100%;
}
body.has-legal-confirm-modal {
    overflow: hidden;
    position: fixed;
    width: 100%;
}
.drawer {
    width: min(560px, 100%);
    position: fixed;
    z-index: 100;
    inset: 0 0 0 auto;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    overscroll-behavior: contain;
    background: var(--paper);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    animation: slide-in 0.22s forwards;
}
@keyframes slide-in {
    to {
        transform: translateX(0);
    }
}
@keyframes fade-in {
    to {
        opacity: 1;
    }
}
.drawer__header {
    padding: 22px 26px 18px;
    position: relative;
    z-index: 2;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line-soft);
    background: rgba(255, 254, 251, 0.95);
    backdrop-filter: blur(12px);
}
.drawer__header h2 {
    margin: 0;
    font-size: 21px;
    line-height: 1.25;
}
.drawer__body {
    min-height: 0;
    padding: 24px 26px 32px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}
.drawer__body::-webkit-scrollbar {
    width: 0;
    height: 0;
}
.drawer__required-note {
    margin: 0 0 18px;
    color: var(--ink-soft);
    font-size: 12px;
}
.drawer__required-note span {
    color: var(--danger);
    font-weight: 800;
}
.drawer--form .survey-form {
    gap: 18px;
}
.drawer--form .form-grid {
    gap: 14px 16px;
}
.drawer.drawer--trip-editor {
    width: min(680px, 100%);
}
.drawer--trip-editor .form-message--info {
    padding: 14px 16px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    border-color: var(--brand-100);
    background: var(--brand-50);
}
.drawer--trip-editor .form-message--info svg {
    width: 20px;
    height: 20px;
    color: var(--brand-700);
}
.drawer--trip-editor .form-message--info strong {
    display: block;
    color: var(--ink);
}
.drawer--trip-editor .form-message--info p {
    margin: 3px 0 0;
}
.drawer .field {
    position: relative;
    padding-bottom: 19px;
    gap: 8px;
}
.drawer .field-help {
    line-height: 1.5;
}
.drawer .field-error[data-inline-error] {
    min-height: 16px;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    font-size: 11px;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.drawer .field-error[data-inline-error][hidden] {
    display: block;
    visibility: hidden;
}
.drawer .field.has-field-error {
    padding-bottom: 35px;
}
.drawer .field.has-field-error .field-error[data-inline-error] {
    min-height: 32px;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}
.drawer__footer {
    position: relative;
    margin-top: 12px;
    padding: 16px 0 calc(6px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 10px;
    border-top: 1px solid var(--line-soft);
    background: var(--paper);
}
/* Footer của drawer issue: hàng đáy cố định của drawer (ngoài vùng cuộn),
   luôn hiển thị. Nút chạy qua event delegation nên không cần nằm trong form. */
.drawer__footer--issue {
    z-index: 2;
    margin-top: 0;
    padding: 14px 26px calc(14px + env(safe-area-inset-bottom));
    box-shadow: 0 -10px 24px rgba(0, 40, 29, 0.07);
}
.drawer__footer > .button {
    min-height: 48px;
}
.drawer__footer > .button:only-child {
    grid-column: 1 / -1;
}
.drawer--detail .detail-section {
    padding: 20px 0;
}
.drawer--detail .detail-section:last-child {
    border-bottom: 0;
}
.drawer--detail .detail-section > h2 {
    font-size: 18px;
    line-height: 1.35;
}
.detail-section {
    padding: 18px 0;
    border-bottom: 1px solid var(--line-soft);
}
.detail-section:first-child {
    padding-top: 0;
}
.detail-section h3 {
    margin-bottom: 12px;
    color: var(--ink-soft);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}
.detail-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.detail-actions .button {
    width: 100%;
    min-height: 48px;
    margin: 0;
}
.detail-actions .detail-map-action {
    border: 1px solid var(--brand-300);
    background: linear-gradient(135deg, var(--brand-50), #f7fffb);
    color: var(--brand-800);
    box-shadow: none;
}
.detail-actions .detail-map-action:hover {
    border-color: var(--brand-600);
    background: var(--brand-100);
}
.detail-actions .schedule-card__route {
    border: 1px solid var(--brand-900);
    background: linear-gradient(135deg, var(--brand-900), var(--brand-700));
    color: var(--white);
    box-shadow: 0 10px 18px rgba(0, 72, 49, 0.18);
}
.detail-actions .button .icon {
    width: 20px;
    height: 20px;
}
.detail-actions .schedule-card__route .icon:last-child {
    width: 16px;
    height: 16px;
    margin-left: auto;
}
.credential-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}
.credential-summary .detail-value {
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--brand-50);
}
.credential-summary .detail-value strong {
    overflow-wrap: anywhere;
    word-break: break-word;
}
.detail-value span {
    display: block;
    color: var(--ink-soft);
    font-size: 12px;
    line-height: 1.35;
}
.detail-value strong {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    line-height: 1.4;
}
.guest-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 18px;
}
.guest-detail-header .person-cell strong {
    font-size: 15px;
}
.guest-detail-header .person-cell small {
    font-size: 12px;
}

.confirm-backdrop {
    position: fixed;
    z-index: 320;
    inset: 0;
    padding: 20px;
    display: grid;
    place-items: center;
    background: rgba(0, 34, 24, 0.42);
    backdrop-filter: blur(3px);
}
.confirm-dialog {
    width: min(430px, 100%);
    padding: 24px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--white);
    color: var(--ink);
    box-shadow: 0 24px 60px rgba(0, 40, 29, 0.28);
    animation: menuIn 0.16s ease-out;
}
.confirm-dialog__icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: var(--danger-soft);
    color: var(--danger);
}
.confirm-dialog h2 {
    margin: 0 0 7px;
    font-size: 19px;
}
.confirm-dialog p:not(.eyebrow) {
    margin: 0;
    color: var(--ink-soft);
    font-size: 13px;
    line-height: 1.5;
}
.confirm-dialog__actions {
    grid-column: 1 / -1;
    margin-top: 4px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.drawer-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
}

/* Guest access: primary action gets its own full-width row, the two
   supporting actions share the row below — no lonely wrapped button. */
.guest-access-actions__primary {
    grid-column: 1 / -1;
}

.toast-region {
    position: fixed;
    /* Feedback must remain readable above every modal/scrim (legal editor uses
       1100), especially when publishing fails and the editor is restored. */
    z-index: 1200;
    right: 20px;
    bottom: 20px;
    display: grid;
    gap: 8px;
    pointer-events: none;
}
.toast {
    width: min(440px, calc(100vw - 32px));
    padding: 13px 15px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--brand-950);
    color: white;
    box-shadow: var(--shadow-lg);
    animation: toast-in 0.2s ease-out;
    white-space: pre-line;
}
.toast--error {
    background: #7e2929;
}
@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
}

/* Guest PWA */
.guest-shell {
    min-height: 100vh;
    /* Reserve the fixed bottom navigation and floating companion lane. */
    padding-bottom: calc(154px + env(safe-area-inset-bottom));
    background: var(--sand);
}
.guest-shell--home {
    height: 100vh;
    height: 100dvh;
    padding-bottom: env(safe-area-inset-bottom);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: #f2dfbf;
}
.guest-shell--home .guest-bottom-nav {
    visibility: hidden;
}
.guest-shell--home::before {
    content: "";
    position: fixed;
    z-index: 0;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    height: 100lvh;
    pointer-events: none;
    background-image: url("/media/guest/asset/bg_home.png");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    transform: translateZ(0);
}
.guest-shell--home > .guest-main {
    position: relative;
    z-index: 1;
}
.guest-shell--explore-library {
    position: relative;
    isolation: isolate;
    background-color: #f7f1e3;
}
.guest-shell--explore-library::before {
    content: "";
    position: fixed;
    z-index: 0;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    height: 100lvh;
    pointer-events: none;
    background-image: url("/media/guest/asset/bg_blog.png");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    transform: translateZ(0);
}
.guest-shell--explore-library > .guest-main {
    position: relative;
    z-index: 1;
}
.guest-shell--explore-library .guest-topbar {
    background: rgba(250, 243, 229, 0.55);
    backdrop-filter: blur(7px) saturate(1.06);
}
.guest-shell--journey {
    position: relative;
    isolation: isolate;
    padding-bottom: 0;
    background-color: #0b2a24;
}
.guest-shell--journey::before {
    content: "";
    position: fixed;
    z-index: 0;
    /* Large-viewport ổn định: nền không co/scale lại khi bàn phím mở trên máy thật. */
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    height: 100lvh;
    pointer-events: none;
    background-image:
        linear-gradient(180deg, rgba(4, 30, 24, 0.35), rgba(4, 30, 24, 0.55)),
        url("/media/guest/asset/bg_login.png");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    transform: translateZ(0);
}
.guest-shell--journey > .guest-main {
    position: relative;
    z-index: 1;
    padding-bottom: env(safe-area-inset-bottom);
}
/* This screen is a full-bleed takeover: no topbar, bottom nav or Companion
   mascot — just the map and a way in (tap a day) or back (browser back). */
.guest-shell--journey .guest-topbar,
.guest-shell--journey .guest-bottom-nav {
    display: none;
}
body.guest-journey-active [data-iki-host] {
    display: none !important;
}
.guest-shell--help {
    position: relative;
    isolation: isolate;
    background-color: #f7f1e3;
}
.guest-shell--help::before {
    content: "";
    position: fixed;
    z-index: 0;
    top: 0;
    right: 0;
    left: 0;
    height: 430px;
    pointer-events: none;
    background-image: url("/media/guest/asset/bg_contact.png?v=2");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}
.guest-shell--help::after {
    content: "";
    position: fixed;
    z-index: 0;
    top: 0;
    right: 0;
    left: 0;
    height: 430px;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent 55%, #f7f1e3 96%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    mask-image: linear-gradient(to bottom, transparent 55%, #000 92%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 55%, #000 92%);
}
.guest-shell--help > .guest-main {
    position: relative;
    z-index: 1;
}
/* This heading sits directly on the busy photo (by design — no card behind
   it), so give it the same bold, tight "hero headline" treatment as the
   home page's greeting instead of the plain list-page heading weight. */
.guest-shell--help .guest-page-head h1 {
    color: #063f35;
    font-family: var(--font-travel-serif);
    font-size: clamp(31px, 7.5vw, 42px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.04em;
    text-wrap: balance;
}
.guest-shell--help .guest-page-head .eyebrow,
.guest-shell--explore-library .explore-library-hero .eyebrow {
    margin: 0 0 10px;
    color: #08735e;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.17em;
}
.guest-shell--help .guest-page-head > p:last-child,
.guest-shell--explore-library .explore-library-hero > p:last-child {
    max-width: 390px;
    color: #42645f;
    font-size: 15px;
    line-height: 1.45;
}
.guest-container {
    width: min(680px, 100%);
    margin: 0 auto;
    padding: 0 18px;
}
.guest-container--explore-library {
    width: min(720px, 100%);
}
.guest-topbar {
    height: calc(68px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 18px 0;
    position: sticky;
    z-index: 30;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(245, 242, 235, 0.9);
    backdrop-filter: blur(16px);
}
.guest-shell--home .guest-topbar {
    background: rgba(250, 243, 229, 0.2);
    backdrop-filter: blur(7px) saturate(1.06);
}
.guest-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--brand-900);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.12em;
}
.guest-brand .brand-mark {
    width: 32px;
    height: 32px;
    font-size: 16px;
}
.guest-brand__logo {
    width: 110px;
    height: 54px;
    display: block;
    flex: 0 0 auto;
    object-fit: contain;
}
.locale-switch {
    padding: 3px;
    display: flex;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.65);
}
.locale-switch button {
    min-height: 30px;
    padding: 5px 9px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 850;
    cursor: pointer;
}
.locale-switch button.active {
    background: var(--brand-900);
    color: white;
}
.locale-switch--flags {
    position: relative;
    display: block;
    border-radius: 11px;
}
.locale-select__trigger {
    min-width: 50px;
    min-height: 30px;
    padding: 5px 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 7px;
    cursor: pointer;
    list-style: none;
}
.locale-select__trigger::-webkit-details-marker {
    display: none;
}
.locale-select__trigger::marker {
    content: "";
}
.locale-select__chevron {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    fill: none;
    stroke: var(--brand-900);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 160ms ease;
}
.locale-select[open] .locale-select__chevron {
    transform: rotate(180deg);
}
.locale-select__menu {
    position: absolute;
    z-index: 120;
    top: calc(100% + 6px);
    right: 0;
    width: 46px;
    padding: 4px;
    display: grid;
    gap: 3px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 10px 28px rgba(15, 53, 45, 0.18);
}
.locale-switch--flags .locale-select__menu button {
    width: 38px;
    min-width: 38px;
    min-height: 32px;
    padding: 5px;
    display: inline-grid;
    place-items: center;
}
.locale-switch__flag {
    width: 26px;
    height: 18px;
    display: block;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: none;
}
.locale-switch--flags .locale-select__menu button.active .locale-switch__flag {
    box-shadow: none;
}
.locale-select__trigger:focus-visible,
.locale-switch--flags .locale-select__menu button:focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 2px;
}
.guest-main {
    padding-top: 18px;
}
.guest-main--home {
    padding-top: 14px;
}
.guest-greeting {
    flex: 0 0 auto;
    margin: 4px 0 12px;
}
.guest-greeting .eyebrow {
    color: var(--coral-dark);
}
.guest-greeting h1 {
    margin-bottom: 5px;
    font-family: var(--font-serif);
    font-size: clamp(26px, 7vw, 36px);
    font-weight: 500;
}
.guest-greeting p {
    color: var(--ink-soft);
}
.guest-home-intro {
    min-height: 146px;
    padding: 18px 4px 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
}
.guest-home-intro__copy {
    min-width: 0;
}
.guest-home-intro .eyebrow {
    margin: 0 0 7px;
    font-size: 11px;
    letter-spacing: 0.15em;
}
.guest-home-intro h1 {
    margin: 0 0 7px;
    font-size: clamp(29px, 7.8vw, 40px);
    line-height: 1.06;
    letter-spacing: -0.035em;
    text-wrap: balance;
}
.guest-home-intro .guest-home-intro__location {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    line-height: 1.35;
}
.guest-home-intro__location .icon {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    color: #6d8580;
}
.guest-home-grid {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 4px 0 0;
    perspective: 900px;
}
.guest-home-grid > * {
    flex: 1 1 0;
    min-height: 0;
}
.guest-home-grid__row {
    display: flex;
    gap: 8px;
}
.guest-home-grid__row > .guest-home-tile {
    flex: 1 1 0;
    min-width: 0;
}
.guest-home-tile {
    --scene-image: none;
    --scene-transform-from: scale(1.045) translate3d(-1%, -0.6%, 0);
    --scene-transform-to: scale(1.105) translate3d(1.4%, 0.8%, 0);
    --scene-duration: 16s;
    --scene-delay: 0s;
    --reveal-delay: 40ms;
    min-height: 56px;
    margin: 0;
    padding: 0;
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 20px;
    background: #173d34;
    box-shadow: 0 10px 24px rgba(20, 44, 37, 0.16);
    font-family: inherit;
    cursor: pointer;
    overflow: hidden;
    animation: guest-home-tile-reveal 720ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay) both;
    transition:
        transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 220ms ease,
        filter 220ms ease;
}
.guest-home-tile::before,
.guest-home-tile::after {
    content: "";
    position: absolute;
    pointer-events: none;
}
.guest-home-tile::before {
    z-index: 0;
    inset: -7%;
    background-image: var(--scene-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    transform: var(--scene-transform-from);
    will-change: transform;
    animation: guest-home-scene-drift var(--scene-duration) ease-in-out var(--scene-delay) infinite
        alternate;
}
.guest-home-tile::after {
    z-index: 1;
    inset: 0;
    background:
        radial-gradient(circle at 72% 18%, rgba(255, 244, 203, 0.13), transparent 38%),
        linear-gradient(180deg, rgba(2, 24, 19, 0.2), rgba(2, 24, 19, 0.4));
    opacity: 0.88;
    will-change: opacity;
    animation: guest-home-scene-atmosphere 7s ease-in-out var(--scene-delay) infinite alternate;
}
.guest-home-grid > :nth-child(1) {
    --reveal-delay: 40ms;
}
.guest-home-grid > :nth-child(2) .guest-home-tile {
    --reveal-delay: 130ms;
}
.guest-home-grid > :nth-child(3) {
    --reveal-delay: 220ms;
}
.guest-home-grid > :nth-child(4) .guest-home-tile {
    --reveal-delay: 310ms;
}
@keyframes guest-home-tile-reveal {
    from {
        opacity: 0;
        filter: saturate(0.7) brightness(0.76);
        clip-path: inset(0 0 100% 0 round 20px);
    }
    to {
        opacity: 1;
        filter: saturate(1) brightness(1);
        clip-path: inset(0 0 0 0 round 20px);
    }
}
@keyframes guest-home-scene-drift {
    from {
        transform: var(--scene-transform-from);
    }
    to {
        transform: var(--scene-transform-to);
    }
}
@keyframes guest-home-scene-atmosphere {
    from {
        opacity: 0.76;
    }
    to {
        opacity: 0.94;
    }
}
.guest-home-tile--trip-overview {
    --scene-image: url("/media/guest/asset/category_home/trip_overview.png");
    --scene-transform-from: scale(1.035) translate3d(-1.8%, -1%, 0);
    --scene-transform-to: scale(1.13) translate3d(2%, 1.2%, 0);
    --scene-duration: 12s;
    --scene-delay: -3s;
}
.guest-home-tile--fly {
    --scene-image: url("/media/guest/asset/category_home/fly.png");
    --scene-transform-from: scale(1.035) translate3d(-3%, 1.4%, 0);
    --scene-transform-to: scale(1.16) translate3d(2.8%, -1.6%, 0);
    --scene-duration: 9s;
    --scene-delay: -7s;
}
.guest-home-tile--weather {
    --scene-image: url("/media/guest/asset/category_home/weather.png");
    --scene-transform-from: scale(1.16) translate3d(3%, -1.7%, 0);
    --scene-transform-to: scale(1.035) translate3d(-2.8%, 1.5%, 0);
    --scene-duration: 10s;
    --scene-delay: -11s;
}
.guest-home-tile--explore {
    --scene-image: url("/media/guest/asset/category_home/explore.png");
    --scene-transform-from: scale(1.035) translate3d(-2.2%, -1.2%, 0);
    --scene-transform-to: scale(1.14) translate3d(2.3%, 1.4%, 0);
    --scene-duration: 11s;
    --scene-delay: -5s;
}
.guest-home-tile--info {
    --scene-image: url("/media/guest/asset/category_home/info.jpg");
    --scene-transform-from: scale(1.15) translate3d(2.8%, -1.4%, 0);
    --scene-transform-to: scale(1.035) translate3d(-3%, 1.6%, 0);
    --scene-duration: 9.5s;
    --scene-delay: -9s;
}
.guest-home-tile--help {
    --scene-image: url("/media/guest/asset/category_home/help.png");
    --scene-transform-from: scale(1.035) translate3d(-3%, 1.7%, 0);
    --scene-transform-to: scale(1.16) translate3d(2.8%, -1.5%, 0);
    --scene-duration: 10.5s;
    --scene-delay: -13s;
}
div.guest-home-tile {
    cursor: default;
}
.guest-home-tile:active {
    transform: scale(0.97);
}
.guest-home-tile:is(button):hover,
.guest-home-tile:is(button):focus-visible {
    box-shadow: 0 14px 30px rgba(20, 44, 37, 0.24);
    filter: saturate(1.08) brightness(1.04);
    transform: translateY(-2px) scale(1.012);
}
.guest-home-tile:is(button):hover .guest-home-tile__label,
.guest-home-tile:is(button):focus-visible .guest-home-tile__label {
    letter-spacing: 0.12em;
}
.guest-home-tile:is(button):focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.92);
    outline-offset: -5px;
}
.guest-home-tile:is(button):active {
    transform: scale(0.97);
}
div.guest-home-tile:active {
    transform: none;
}
.guest-home-tile__label {
    width: 100%;
    padding: 16px;
    display: flex;
    position: relative;
    z-index: 2;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.09em;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(0, 20, 15, 0.4);
    transition: letter-spacing 280ms ease;
}
.guest-home-tile--wide .guest-home-tile__label {
    font-size: 17px;
}
.guest-home-tile__label .icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}
@media (prefers-reduced-motion: reduce) {
    .guest-home-tile,
    .guest-home-tile::before,
    .guest-home-tile::after {
        animation: none !important;
    }
}
.guest-home-intro [data-guest-weather-summary="1"] {
    width: 112px;
    justify-self: end;
}
.guest-home-weather {
    width: 100%;
    min-height: 72px;
    padding: 10px 11px;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 7px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: 19px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 10px 28px rgba(91, 64, 32, 0.12);
    backdrop-filter: blur(12px);
    cursor: pointer;
    transition:
        transform 160ms ease,
        background 160ms ease,
        box-shadow 160ms ease;
}
.guest-home-weather > *:not(.guest-home-weather__scene) {
    position: relative;
    z-index: 1;
}
.guest-home-weather__scene {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0.72;
}
.guest-home-weather__scene .wx-cloud--a {
    top: 3%;
    left: -18%;
    width: 54px;
    opacity: 0.58;
}
.guest-home-weather__scene .wx-cloud--b {
    top: 47%;
    right: -12%;
    width: 44px;
    opacity: 0.48;
}
.guest-home-weather__scene .wx-cloud--c {
    top: 65%;
    left: 24%;
    width: 34px;
    opacity: 0.32;
}
.guest-home-weather__scene .wx-sun {
    top: -18px;
    right: -15px;
    width: 58px;
    height: 58px;
    opacity: 0.84;
}
.guest-home-weather[data-weather="SUNNY"] {
    border-color: rgba(244, 205, 108, 0.54);
    background: linear-gradient(145deg, rgba(255, 250, 229, 0.94), rgba(255, 239, 183, 0.88));
}
.guest-home-weather[data-weather="PARTLY_CLOUDY"] {
    background: linear-gradient(145deg, rgba(255, 250, 231, 0.94), rgba(229, 239, 241, 0.88));
}
.guest-home-weather[data-weather="CLOUDY"] {
    background: linear-gradient(145deg, rgba(244, 247, 247, 0.94), rgba(213, 224, 229, 0.9));
}
.guest-home-weather[data-weather="SHOWERS"] {
    background: linear-gradient(145deg, rgba(237, 248, 250, 0.95), rgba(190, 220, 233, 0.9));
}
.guest-home-weather[data-weather="SHOWERS"] .guest-home-weather__scene {
    background-image:
        radial-gradient(1.2px 6px at 18% 0%, rgba(49, 135, 185, 0.56), transparent),
        radial-gradient(1.2px 6px at 48% 0%, rgba(49, 135, 185, 0.48), transparent),
        radial-gradient(1.2px 6px at 78% 0%, rgba(49, 135, 185, 0.56), transparent);
    background-size: 100% 28px;
    animation: weather-rain 850ms linear infinite;
}
.guest-home-weather[data-weather="STORM"] {
    background: linear-gradient(145deg, rgba(226, 232, 244, 0.96), rgba(183, 192, 220, 0.92));
}
.guest-home-weather[data-weather="STORM"] .guest-home-weather__scene {
    animation: weather-lightning 5s steps(1, end) infinite;
}
.guest-home-weather[data-weather="SNOW"] {
    background: linear-gradient(145deg, rgba(248, 252, 255, 0.96), rgba(215, 232, 243, 0.92));
}
.guest-home-weather[data-weather="SNOW"] .guest-home-weather__scene .wx-flake {
    position: absolute;
    top: -8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 0 3px rgba(71, 111, 143, 0.32);
    animation: weather-snow 4s linear infinite;
}
.guest-home-weather[data-weather="SNOW"] .wx-flake--1 {
    left: 10%;
}
.guest-home-weather[data-weather="SNOW"] .wx-flake--2 {
    left: 27%;
    animation-delay: -1.5s;
}
.guest-home-weather[data-weather="SNOW"] .wx-flake--3 {
    left: 43%;
    animation-delay: -3s;
}
.guest-home-weather[data-weather="SNOW"] .wx-flake--4 {
    left: 61%;
    animation-delay: -0.8s;
}
.guest-home-weather[data-weather="SNOW"] .wx-flake--5 {
    left: 78%;
    animation-delay: -2.4s;
}
.guest-home-weather[data-weather="SNOW"] .wx-flake--6 {
    left: 91%;
    animation-delay: -3.5s;
}
.guest-home-weather:hover {
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 12px 30px rgba(91, 64, 32, 0.16);
    transform: translateY(-2px);
}
.guest-home-weather[data-weather][data-weather-scene] {
    border-color: rgba(255, 255, 255, 0.88);
    background-image:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(255, 255, 255, 0.69) 68%,
            rgba(255, 255, 255, 0.4) 100%
        ),
        var(--weather-scene-image);
    background-position: center;
    background-size: cover;
}
.guest-home-weather[data-weather][data-weather-scene]:hover {
    background-image:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.94) 0%,
            rgba(255, 255, 255, 0.72) 68%,
            rgba(255, 255, 255, 0.44) 100%
        ),
        var(--weather-scene-image);
}
.guest-home-weather[data-weather-scene] .guest-home-weather__scene {
    display: none;
}
.guest-home-weather:focus-visible {
    outline: 3px solid var(--brand-800);
    outline-offset: 3px;
}
.guest-home-weather__icon {
    width: 32px;
    height: 32px;
    grid-row: 1 / 3;
    align-self: center;
    display: grid;
    place-items: center;
    color: #dda022;
}
.guest-home-weather__icon .icon {
    width: 30px;
    height: 30px;
    stroke-width: 1.8;
}
.guest-home-weather__temperature {
    align-self: end;
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 650;
    line-height: 1;
    letter-spacing: -0.04em;
    white-space: nowrap;
}
.guest-home-weather__condition {
    align-self: start;
    overflow: hidden;
    display: -webkit-box;
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.2;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
/* Biến thể có nhãn ngày: badge nằm cạnh tiêu đề ngày trong lịch trình nên phải
   tự nói nó đang là ngày nào. Thêm một hàng nhãn phía trên nhiệt độ và ép mô tả
   xuống một dòng để chiều cao không phình ra. */
.guest-home-weather--dated {
    min-height: 84px;
    grid-template-rows: auto auto auto;
    row-gap: 1px;
}
.guest-home-weather--dated .guest-home-weather__icon {
    grid-row: 1 / 4;
}
.guest-home-weather--dated .guest-home-weather__condition {
    -webkit-line-clamp: 1;
}
/* Đủ specificity để thắng `.guest-day__title span` của tiêu đề ngày. */
.guest-home-weather .guest-home-weather__day {
    align-self: end;
    overflow: hidden;
    color: var(--brand-700);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* Ngày ngoài cửa sổ dự báo của nhà cung cấp: badge im lặng, không bấm được. */
.guest-home-weather--pending {
    cursor: default;
    opacity: 0.82;
}
.guest-home-weather--pending .guest-home-weather__temperature {
    color: var(--ink-soft);
}
/* Trạng thái chờ giữ đúng khung badge: khung cảnh nắng + mây trôi của
   PARTLY_CLOUDY, icon cloudSun và một vòng xoay nhỏ thay cho số nhiệt độ. */
.guest-home-weather--loading {
    cursor: default;
    pointer-events: none;
    box-shadow: 0 6px 18px rgba(91, 64, 32, 0.08);
}
.guest-home-weather--loading .guest-home-weather__icon {
    color: #e0a63a;
    animation: guest-weather-loading-breathe 2.1s ease-in-out infinite;
}
.guest-home-weather__spinner {
    width: 19px;
    height: 19px;
    align-self: end;
    margin-bottom: 2px;
    border: 2.5px solid rgba(19, 63, 55, 0.16);
    border-top-color: var(--brand-700);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.guest-home-weather--loading .guest-home-weather__condition {
    color: var(--ink-soft);
    opacity: 0.85;
}
@keyframes guest-weather-loading-breathe {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.72;
        transform: scale(0.94);
    }
}
[data-guest-weather-slot].is-weather-ready > * {
    animation: guest-weather-slot-appear 260ms ease both;
}
@keyframes guest-weather-slot-appear {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .guest-home-weather--loading .guest-home-weather__icon,
    [data-guest-weather-slot].is-weather-ready > * {
        animation: none !important;
    }
    /* Vòng xoay vẫn quay nhưng chậm hẳn: người dùng cần biết hệ thống đang chạy. */
    .guest-home-weather__spinner {
        animation-duration: 2.4s;
    }
}
.guest-home-weather[data-weather="CLOUDY"] .guest-home-weather__icon {
    color: #788891;
}
.guest-home-weather[data-weather="SHOWERS"] .guest-home-weather__icon,
.guest-home-weather[data-weather="SNOW"] .guest-home-weather__icon {
    color: #3187b9;
}
.guest-home-weather[data-weather="STORM"] .guest-home-weather__icon {
    color: #685ec2;
}
@media (prefers-reduced-motion: reduce) {
    .guest-home-weather__scene,
    .guest-home-weather__scene .wx-cloud,
    .guest-home-weather__scene .wx-sun,
    .guest-home-weather__scene .wx-flake {
        animation: none !important;
    }
}
@media (max-width: 360px) {
    .guest-home-intro {
        gap: 9px;
    }
    .guest-home-intro [data-guest-weather-summary="1"] {
        width: 100px;
    }
    .guest-home-weather {
        padding-inline: 8px;
        grid-template-columns: 28px minmax(0, 1fr);
        column-gap: 5px;
    }
    .guest-home-weather__icon,
    .guest-home-weather__icon .icon {
        width: 27px;
        height: 27px;
    }
    .guest-home-weather__temperature {
        font-size: 22px;
    }
}

/* Explore library — full-bleed destination story matching the mobile design.
   The article-detail screen keeps its reading surface; these rules only apply
   to the library while no article is open. */
.guest-shell--explore-library {
    min-height: 100vh;
    min-height: 100lvh;
    position: relative;
    isolation: isolate;
    padding-bottom: calc(86px + env(safe-area-inset-bottom));
    background: #17312f;
}

.guest-shell--explore-library::before {
    height: 100vh;
    height: 100lvh;
    background-image: url("/media/guest/asset/background/background.webp");
    background-position: center top;
    background-size: cover;
    filter: saturate(0.82) brightness(0.88);
}

.guest-shell--explore-library::after {
    content: "";
    width: 100%;
    height: 100%;
    min-height: 100vh;
    min-height: 100lvh;
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(6, 27, 28, 0.03) 0,
        rgba(10, 25, 27, 0.08) 36%,
        rgba(12, 23, 25, 0.46) 66%,
        rgba(11, 20, 22, 0.88) 100%
    );
}

.guest-shell--explore-library > .guest-topbar,
.guest-shell--explore-library > .guest-main,
.guest-shell--explore-library > .guest-bottom-nav {
    position: relative;
    z-index: 2;
}

.guest-shell--explore-library > .guest-topbar {
    width: min(430px, 100%);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    padding-right: 16px;
    padding-left: 16px;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.guest-shell--explore-library .guest-brand__logo {
    filter: drop-shadow(0 2px 5px rgba(255, 255, 255, 0.72));
}

.guest-shell--explore-library .guest-sync-button {
    display: none;
}

.guest-shell--explore-library .guest-topbar__actions > * {
    box-shadow: 0 5px 14px rgba(11, 49, 45, 0.12);
}

.guest-container--explore-library {
    width: min(430px, 100%);
}

.guest-shell--explore-library > .guest-main {
    min-height: calc(100vh - 75px);
    min-height: calc(100lvh - 75px);
    padding: calc(68px + env(safe-area-inset-top)) 16px 28px;
}

.guest-shell--explore-library .explore-featured-carousel {
    margin: 4px 12px 14px;
}

.guest-shell--explore-library .explore-featured-carousel__track {
    gap: 10px;
    margin: 0;
    padding: 0;
    scroll-padding-inline: 0;
}

.guest-shell--explore-library .explore-guest-featured {
    display: flex;
    margin: 0;
    border-radius: 13px;
    box-shadow: 0 12px 30px rgba(7, 30, 29, 0.2);
}

.guest-shell--explore-library .explore-guest-featured__button {
    display: flex;
    height: 100%;
    flex-direction: column;
    border: 0;
    border-radius: 13px;
    background: #fff;
}

.guest-shell--explore-library .explore-guest-featured__cover {
    width: 100%;
    height: 180px;
    flex: 0 0 180px;
    overflow: hidden;
}

.guest-shell--explore-library .explore-guest-featured__cover .explore-card-cover {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    background: linear-gradient(145deg, #d9f0f4, #9ed5d9);
}

.guest-shell--explore-library .explore-guest-featured__cover .explore-card-cover img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.guest-shell--explore-library .explore-guest-featured__ribbon {
    top: 12px;
    left: 12px;
    min-height: 24px;
    padding: 4px 11px;
    border-radius: 5px;
    color: #fff;
    background: #d7a91e;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
}

.guest-shell--explore-library .explore-guest-featured__body {
    min-height: 160px;
    display: flex;
    flex: 1;
    padding: 14px 16px 13px;
    flex-direction: column;
}

.guest-shell--explore-library .explore-guest-featured strong {
    min-height: 2.5em;
    max-height: 2.5em;
    display: -webkit-box;
    margin-bottom: 7px;
    overflow: hidden;
    color: #151b1a;
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.guest-shell--explore-library .explore-guest-featured small {
    min-height: 2.96em;
    max-height: 2.96em;
    display: -webkit-box;
    margin-bottom: 13px;
    overflow: hidden;
    color: #505a5b;
    font-size: 15px;
    line-height: 1.48;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.guest-shell--explore-library .explore-guest-featured__cta {
    margin-top: auto;
    padding: 0;
    gap: 4px;
    border-radius: 0;
    color: #086483;
    background: transparent;
    font-size: 13px;
    font-weight: 800;
}

.guest-shell--explore-library .explore-featured-carousel__dots {
    min-height: 13px;
    padding-top: 7px;
}

.guest-shell--explore-library .explore-featured-carousel__dot {
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.48);
}

.guest-shell--explore-library .explore-featured-carousel__dot.is-active {
    background: #fff;
    box-shadow: 0 0 0 2px rgba(8, 117, 148, 0.55);
}

.explore-guest-tags {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 28px 31px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.explore-guest-tags::-webkit-scrollbar {
    display: none;
}

.explore-guest-tag {
    min-height: 38px;
    flex: 0 0 auto;
    padding: 8px 17px;
    border: 1px solid rgba(255, 255, 255, 0.52);
    border-radius: 999px;
    color: #fff;
    background: rgba(248, 245, 238, 0.2);
    box-shadow: none;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    white-space: nowrap;
    cursor: pointer;
}

.explore-guest-tag.is-active {
    border-color: rgba(255, 255, 255, 0.92);
    color: #066583;
    background: rgba(255, 255, 255, 0.94);
}

.guest-shell--explore-library .explore-guest-list {
    gap: 15px;
    margin: 0;
}

.guest-shell--explore-library .explore-guest-row[hidden] {
    display: none;
}

.guest-shell--explore-library .explore-guest-row__button {
    min-height: 78px;
    align-items: center;
    gap: 10px;
    padding: 13px 15px 13px 17px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 18px;
    color: #063f59;
    background: rgba(247, 247, 244, 0.86);
    box-shadow: 0 8px 20px rgba(5, 26, 27, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.guest-shell--explore-library .explore-guest-row--current .explore-guest-row__button {
    border: 1.5px solid #6bbfd2;
    background: rgba(255, 255, 255, 0.97);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.55),
        0 9px 22px rgba(5, 38, 46, 0.16);
}

.guest-shell--explore-library .explore-guest-row--scheduled .explore-guest-row__button {
    background: rgba(239, 240, 238, 0.79);
}

.guest-shell--explore-library .explore-guest-row__body {
    justify-content: center;
}

.guest-shell--explore-library .explore-guest-row__meta {
    margin-bottom: 5px;
    gap: 7px;
    color: #39748d;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
}

.guest-shell--explore-library .explore-guest-row strong {
    color: #063f59;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -0.015em;
}

.explore-guest-row__end {
    min-width: 83px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.explore-guest-row__end > .icon {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    color: #207895;
}

.explore-guest-row__status {
    min-height: 25px;
    padding: 4px 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    color: #6a7b7d;
    background: rgba(255, 255, 255, 0.78);
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.explore-guest-row__status > span {
    width: 7px;
    height: 7px;
    display: block;
    border-radius: 50%;
    background: #99a4a5;
}

.explore-guest-row--complete .explore-guest-row__status > span {
    background: #388266;
}

.explore-guest-row--current .explore-guest-row__status {
    color: #087696;
    background: #e6f5f8;
}

.explore-guest-row--current .explore-guest-row__status > span {
    background: #087b9d;
}

.guest-shell--explore-library > .guest-bottom-nav {
    z-index: 4;
    background: rgba(255, 255, 255, 0.98);
}

@media (max-width: 370px) {
    .guest-shell--explore-library > .guest-main {
        padding-right: 12px;
        padding-left: 12px;
    }

    .guest-shell--explore-library .explore-featured-carousel {
        margin-right: 8px;
        margin-left: 8px;
    }

    .explore-guest-tags {
        margin-right: 20px;
        margin-left: 20px;
    }

    .guest-shell--explore-library .explore-guest-row strong {
        font-size: 16px;
    }

    .explore-guest-row__end {
        min-width: 74px;
    }
}

/* Guest Profile — beach hero and compact account cards from the approved
   mobile reference. The :has() scope keeps the Legal sub-page, which shares
   the "me" shell, on its reading layout. */
.guest-shell--me:has(.guest-profile-screen) {
    min-height: 100vh;
    padding-bottom: calc(75px + env(safe-area-inset-bottom));
    overflow-x: hidden;
    background: #f8f6ef;
}

.guest-shell--me:has(.guest-profile-screen)::before,
.guest-shell--me:has(.guest-profile-screen)::after {
    display: none;
    content: none;
}

.guest-shell--me:has(.guest-profile-screen) > .guest-topbar {
    width: min(430px, 100%);
    height: calc(72px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 18px 0;
    position: absolute;
    z-index: 35;
    top: 0;
    right: 0;
    left: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.guest-shell--me:has(.guest-profile-screen) .guest-brand__logo {
    width: 116px;
    height: 55px;
    filter: none;
}

.guest-shell--me:has(.guest-profile-screen) .guest-sync-button {
    display: none;
}

.guest-shell--me:has(.guest-profile-screen) .guest-topbar__actions {
    gap: 6px;
}

.guest-shell--me:has(.guest-profile-screen)
    .guest-accessibility-toggle
    > span:not(.guest-accessibility-toggle__glyph) {
    display: none;
}

.guest-shell--me:has(.guest-profile-screen) .guest-accessibility-toggle,
.guest-shell--me:has(.guest-profile-screen) .locale-switch--flags {
    border-color: rgba(255, 255, 255, 0.88);
    background: rgba(255, 255, 255, 0.85);
    color: #075f55;
    box-shadow: 0 5px 13px rgba(22, 76, 71, 0.13);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.guest-shell--me:has(.guest-profile-screen) .guest-accessibility-toggle {
    width: 41px;
    min-width: 41px;
    padding: 0;
    justify-content: center;
}

.guest-shell--me:has(.guest-profile-screen) .guest-accessibility-toggle__glyph {
    font-size: 15px;
}

.guest-main--me:has(.guest-profile-screen) {
    width: min(430px, 100%);
    max-width: 430px;
    padding: 0 0 16px;
    display: block;
}

.guest-profile-screen {
    min-height: 100vh;
    color: #073f59;
    background: #f8f6ef;
    font-family: var(--font-sans);
}

.guest-profile-hero {
    height: 286px;
    position: relative;
    overflow: hidden;
    border-radius: 0 0 23px 23px;
    background-image:
        linear-gradient(180deg, rgba(5, 58, 63, 0.02) 20%, rgba(4, 55, 59, 0.23) 100%),
        url("/media/guest/asset/background/bg_profile.webp");
    background-repeat: no-repeat;
    background-position: 62% center;
    background-size: cover;
}

.guest-profile-hero__identity {
    padding: 108px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.guest-profile-hero__avatar {
    width: 70px;
    height: 70px;
    position: relative;
    display: grid;
    place-items: center;
    overflow: visible;
    border: 2px solid #96c318;
    border-radius: 50%;
    background: rgba(244, 251, 245, 0.96);
    color: #075c51;
    font-size: 20px;
    font-weight: 800;
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.9),
        0 6px 15px rgba(4, 61, 56, 0.2);
}

.guest-profile-hero__avatar > span {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: inherit;
    background: linear-gradient(145deg, #eff9f3, #cfe9dc);
}

.guest-profile-hero__avatar img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: inherit;
    object-fit: cover;
}

.guest-profile-hero__avatar b {
    min-width: 33px;
    height: 20px;
    padding: 0 7px;
    position: absolute;
    right: -10px;
    bottom: -3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #a6cf16;
    color: #154b2e;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 2px 5px rgba(28, 74, 44, 0.18);
}

.guest-profile-hero h1 {
    margin: 13px 0 7px;
    color: #fff;
    font-family: var(--font-sans);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
    text-shadow: 0 2px 8px rgba(2, 47, 54, 0.35);
}

.guest-profile-hero__booking {
    min-height: 28px;
    padding: 5px 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 0;
    border-radius: 15px;
    background: rgba(93, 77, 67, 0.42);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.guest-profile-hero__booking .icon {
    width: 13px;
    height: 13px;
}

.guest-profile-content {
    padding: 1px 16px 31px;
}

.guest-profile-section {
    margin-top: 24px;
}

.guest-profile-ticket-section {
    padding: 17px 15px 9px;
    overflow: hidden;
    border: 1px solid rgba(228, 227, 221, 0.74);
    border-radius: 19px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 18px rgba(45, 64, 60, 0.08);
}

.guest-profile-ticket-section > h2 {
    margin-left: 0;
}

.guest-profile-section > h2 {
    margin: 0 0 11px 3px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #06405e;
    font-family: var(--font-sans);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
}

.guest-profile-section > h2 .icon {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    color: #087b9b;
    stroke-width: 1.9;
}

.guest-profile-screen .guest-profile-card {
    padding: 0;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(228, 227, 221, 0.74);
    border-radius: 19px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 18px rgba(45, 64, 60, 0.08);
}

.guest-profile-screen .guest-profile-card::before,
.guest-profile-screen .guest-profile-card::after {
    display: none;
    content: none;
}

.guest-profile-ticket {
    padding: 0 !important;
}

.guest-profile-ticket__row {
    min-height: 36px;
    padding: 7px 0;
    display: grid;
    grid-template-columns: minmax(70px, 28%) minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #ece9e3;
}

.guest-profile-ticket__row:last-child {
    border-bottom: 0;
}

.guest-profile-ticket__row > span {
    color: #7a8387;
    font-size: 13px;
}

.guest-profile-ticket__row > strong,
.guest-profile-ticket__row > button {
    min-width: 0;
    justify-self: end;
    color: #17272e;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    text-align: right;
}

.guest-profile-ticket__row > button {
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    background: transparent;
    color: #0b7898;
}

.guest-profile-ticket__row > button .icon {
    width: 15px;
    height: 15px;
    color: #65777d;
}

.guest-profile-survey__card {
    width: 100%;
    min-height: 82px;
    padding: 13px 12px;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto 17px;
    align-items: start;
    gap: 10px;
    border: 1px solid rgba(230, 229, 224, 0.8);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 7px 16px rgba(47, 68, 64, 0.07);
    color: #12313f;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.guest-profile-survey__icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    align-self: center;
    border-radius: 50%;
    color: #087694;
    background: #e5f7fa;
}

.guest-profile-survey__icon .icon {
    width: 23px;
    height: 23px;
}

.guest-profile-survey__copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.guest-profile-survey__copy strong {
    color: #12313f;
    font-size: 14px;
    font-weight: 700;
}

.guest-profile-survey__copy small {
    overflow: hidden;
    display: -webkit-box;
    color: #68787e;
    font-size: 10px;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.guest-profile-survey__status {
    min-height: 25px;
    padding: 5px 8px;
    align-self: start;
    margin-top: 0;
    border-radius: 999px;
    color: #9a5a1f;
    background: #fff0dc;
    font-size: 10px;
    font-weight: 750;
    white-space: nowrap;
}

.guest-profile-survey__status--complete {
    color: #17654f;
    background: #e2f3ea;
}

.guest-profile-survey__status--locked {
    color: #5f6d72;
    background: #eef1f0;
}

.guest-profile-survey__card > .icon:last-child {
    width: 17px;
    height: 17px;
    align-self: center;
    color: #758289;
}

.guest-profile-survey__card:focus-visible {
    outline: 3px solid #087694;
    outline-offset: 2px;
}

.guest-profile-contact-list {
    display: grid;
    gap: 10px;
}

.guest-profile-contact {
    min-height: 69px;
    padding: 9px 11px;
    display: grid;
    grid-template-columns: 45px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(230, 229, 224, 0.8);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 7px 16px rgba(47, 68, 64, 0.07);
}

.guest-profile-contact__avatar {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: #e8f6f7;
    color: #08738f;
    font-size: 12px;
    font-weight: 800;
}

.guest-profile-contact__avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.guest-profile-contact__identity {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.guest-profile-contact__identity strong {
    overflow: hidden;
    color: #12313f;
    font-size: 14px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guest-profile-contact__identity small {
    overflow: hidden;
    color: #68787e;
    font-size: 10px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guest-profile-contact__call {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e5f7fa;
    color: #087694;
}

.guest-profile-contact__call .icon {
    width: 20px;
    height: 20px;
}

.guest-profile-contact.is-emergency .guest-profile-contact__avatar {
    color: #c9251d;
    background: #ffe0dd;
}

.guest-profile-contact.is-emergency .guest-profile-contact__avatar .icon {
    width: 22px;
    height: 22px;
}

.guest-profile-contact.is-emergency .guest-profile-contact__identity small {
    color: #d34439;
}

.guest-profile-contact-empty {
    padding: 18px !important;
    color: #68787e;
    font-size: 12px;
    text-align: center;
}

.guest-profile-emergency {
    width: 100%;
    min-height: 53px;
    margin-top: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 14px;
    background: #c92518;
    color: #fff;
    font-size: 14px;
    font-weight: 750;
    box-shadow: 0 7px 15px rgba(178, 42, 28, 0.14);
}

.guest-profile-emergency .icon {
    width: 21px;
    height: 21px;
    stroke-width: 2.5;
}

.guest-profile-settings,
.guest-profile-legal {
    padding: 0 15px !important;
}

.guest-profile-setting {
    width: 100%;
    min-height: 56px;
    padding: 10px 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 18px;
    align-items: center;
    gap: 7px;
    border: 0;
    border-bottom: 1px solid #ebe8e2;
    border-radius: 0;
    background: transparent;
    color: #26383e;
    font-family: inherit;
    font-size: 13px;
    text-align: left;
}

.guest-profile-setting:last-child {
    border-bottom: 0;
}

button.guest-profile-setting {
    cursor: pointer;
}

.guest-profile-setting > span {
    min-width: 0;
}

.guest-profile-setting > em {
    color: #778187;
    font-style: normal;
    font-size: 12px;
    text-align: right;
}

.guest-profile-setting > .icon:last-child {
    width: 17px;
    height: 17px;
    color: #758289;
}

.guest-profile-legal {
    margin-top: 24px;
}

.guest-profile-legal .guest-profile-setting {
    grid-template-columns: 23px minmax(0, 1fr) 18px;
}

.guest-profile-legal .guest-profile-setting > .icon:first-child {
    width: 20px;
    height: 20px;
    color: #718087;
}

.guest-profile-documents {
    border-bottom: 1px solid #ebe8e2;
}

.guest-profile-documents > summary {
    list-style: none;
}

.guest-profile-documents > summary::-webkit-details-marker {
    display: none;
}

.guest-profile-documents[open] > summary > .icon:last-child {
    transform: rotate(90deg);
}

.guest-profile-documents__body {
    padding: 4px 0 16px;
}

.guest-profile-documents__body form {
    display: grid;
    gap: 11px;
}

.guest-profile-documents__body .guest-document-list-section {
    margin-top: 15px;
}

.guest-profile-logout {
    min-height: 50px;
    margin: 18px auto 3px;
    padding: 8px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    background: transparent;
    color: #d22b1e;
    font-size: 13px;
    font-weight: 600;
}

.guest-profile-logout .icon {
    width: 20px;
    height: 20px;
}

@media (max-width: 360px) {
    .guest-profile-content {
        padding-right: 12px;
        padding-left: 12px;
    }

    .guest-profile-hero h1 {
        font-size: 22px;
    }

    .guest-profile-section > h2 {
        font-size: 17px;
    }

    .guest-profile-ticket__row {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .guest-profile-survey__card {
        grid-template-columns: 42px minmax(0, 1fr) 17px;
    }

    .guest-profile-survey__icon {
        width: 42px;
        height: 42px;
    }

    .guest-profile-survey__status {
        display: none;
    }
}
.guest-hero {
    min-height: 290px;
    padding: 24px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 26px;
    color: white;
    background:
        linear-gradient(180deg, rgba(0, 40, 29, 0.28), rgba(0, 40, 29, 0.9)),
        linear-gradient(150deg, var(--brand-700), var(--brand-950));
    box-shadow: var(--shadow-md);
}
/* Shimmer skeleton shown over the hero until the video decodes (weak network). */
.guest-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        100deg,
        rgba(255, 255, 255, 0) 20%,
        rgba(255, 255, 255, 0.16) 50%,
        rgba(255, 255, 255, 0) 80%
    );
    background-size: 220% 100%;
    animation: asset-shimmer 1.5s ease-in-out infinite;
    opacity: 1;
    transition: opacity 420ms ease;
    pointer-events: none;
}
.guest-hero.is-media-ready::before {
    opacity: 0;
}
@keyframes asset-shimmer {
    from {
        background-position: 160% 0;
    }
    to {
        background-position: -60% 0;
    }
}
.guest-hero__video {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
    object-fit: cover;
    pointer-events: none;
}
.guest-hero__image {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
    object-fit: cover;
    pointer-events: none;
}
.guest-hero > :not(.guest-hero__video):not(.guest-hero__image) {
    position: relative;
    z-index: 2;
}
.guest-hero__label {
    width: fit-content;
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: 0.08em;
    backdrop-filter: blur(8px);
}
.guest-hero time {
    display: block;
    color: #ffd4bf;
    font-size: 12px;
    font-weight: 800;
}
.guest-hero h2 {
    margin: 6px 0 8px;
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 500;
}
.guest-hero p {
    margin: 0 0 15px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 13px;
}
.guest-hero--countdown {
    min-height: 326px;
}
.guest-hero__countdown {
    margin-bottom: 8px !important;
    color: #fff !important;
    font-family: var(--font-serif);
    font-size: clamp(30px, 9vw, 44px) !important;
    font-weight: 600;
    line-height: 1.03;
    letter-spacing: -0.035em;
}
.guest-hero__actions {
    display: flex;
    gap: 9px;
}
.guest-hero .button {
    background: var(--white);
    color: var(--brand-900);
}
.guest-hero .button--ghost {
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.09);
    color: white;
}
.guest-home-link-card,
.guest-home-post-trip {
    margin-top: 18px;
    padding: 20px;
    display: grid;
    gap: 14px;
    border: 1px solid var(--line-soft);
    border-radius: 22px;
    background: var(--white);
    box-shadow: var(--shadow-sm);
}
.guest-home-link-card {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
}
.guest-home-link-card__icon,
.guest-home-post-trip__icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--mint-100);
    color: var(--brand-700);
}
.guest-home-link-card strong,
.guest-home-post-trip h2 {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 600;
}
.guest-home-link-card p,
.guest-home-post-trip > p:not(.eyebrow) {
    margin: 4px 0 0;
    color: var(--ink-soft);
    font-size: 13px;
    line-height: 1.5;
}
.guest-home-post-trip {
    min-height: 300px;
    align-content: center;
    justify-items: start;
    background:
        radial-gradient(circle at 100% 0, rgba(224, 245, 235, 0.96), transparent 42%), var(--white);
}
.guest-home-post-trip__icon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
}
.guest-home-post-trip .eyebrow {
    margin: 4px 0 -6px;
    color: var(--brand-700);
}
.guest-home-post-trip h2 {
    margin: 0;
    font-size: clamp(28px, 8vw, 38px);
}
.guest-home-post-trip .button {
    margin-top: 4px;
}
@media (max-width: 480px) {
    .guest-hero--countdown {
        min-height: 288px;
    }
    .guest-home-link-card {
        grid-template-columns: 42px minmax(0, 1fr);
    }
    .guest-home-link-card .button {
        grid-column: 1 / -1;
        width: 100%;
    }
}
.guest-home-support {
    min-height: 144px;
    margin-top: 18px;
    padding: 14px 35% 14px 14px;
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: start;
    gap: 8px 11px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 22px;
    background-image: url("/media/guest/asset/bg_support.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    box-shadow: 0 10px 24px rgba(15, 53, 45, 0.2);
    color: #073f36;
}
.guest-home-support__icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(7, 91, 74, 0.18);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.82);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 6px 16px rgba(0, 37, 27, 0.14);
    color: #07664f;
}
.guest-home-support__icon .icon {
    width: 23px;
    height: 23px;
}
.guest-home-support__body {
    min-width: 0;
}
.guest-home-support .eyebrow {
    margin: 0 0 4px;
    color: #9b5e27;
    font-size: 8px;
}
.guest-home-support h2 {
    margin: 0;
    color: #073f36;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 650;
    line-height: 1.14;
    text-shadow:
        0 1px 2px rgba(255, 255, 255, 0.96),
        0 0 8px rgba(255, 255, 255, 0.72);
}
.guest-home-support p:not(.eyebrow) {
    margin: 5px 0 0;
    color: #073f36;
    font-size: 10px;
    font-weight: 650;
    line-height: 1.35;
    text-shadow:
        0 1px 1px #ffffff,
        0 0 5px #ffffff,
        0 0 12px rgba(255, 255, 255, 0.96);
}
.guest-home-support__button {
    min-height: 31px;
    grid-column: 2;
    justify-self: start;
    padding: 6px 12px;
    position: relative;
    z-index: 1;
    gap: 7px;
    border-radius: 9px;
    background: linear-gradient(135deg, #efc777, #f4dda5);
    box-shadow: 0 4px 10px rgba(0, 35, 26, 0.2);
    color: #174b3d;
    font-size: 10px;
    font-weight: 850;
}
.guest-home-support__button:hover {
    background: linear-gradient(135deg, #f4d38d, #f8e7bc);
    color: #174b3d;
}
.guest-hero.guest-home-post-trip {
    min-height: 328px;
    align-content: center;
    justify-items: start;
    gap: 10px;
    background:
        linear-gradient(180deg, rgba(0, 40, 29, 0.34), rgba(0, 40, 29, 0.9)),
        linear-gradient(150deg, var(--brand-700), var(--brand-950));
}
.guest-home-post-trip__sparkles {
    position: absolute;
    z-index: 2;
    top: 22px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #e9ffd8;
    pointer-events: none;
}
.guest-home-post-trip__sparkles span {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    animation: guest-post-sparkle 2.6s ease-in-out infinite;
}
.guest-home-post-trip__sparkles span:nth-child(2) {
    width: 34px;
    height: 34px;
    animation-delay: 420ms;
}
.guest-home-post-trip__sparkles span:nth-child(3) {
    animation-delay: 760ms;
}
@keyframes guest-post-sparkle {
    0%,
    100% {
        opacity: 0.55;
        transform: scale(0.88) translateY(0);
    }
    50% {
        opacity: 1;
        transform: scale(1.08) translateY(-4px);
    }
}
.guest-hero.guest-home-post-trip .guest-home-post-trip__icon {
    width: 54px;
    height: 54px;
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.16);
    color: #d2ffe4;
    box-shadow: 0 12px 28px rgba(0, 25, 17, 0.2);
    backdrop-filter: blur(10px);
}
.guest-hero.guest-home-post-trip h2 {
    color: white;
    max-width: 11ch;
    text-wrap: balance;
}
.guest-hero.guest-home-post-trip > p:not(.eyebrow) {
    max-width: 34ch;
    color: rgba(255, 255, 255, 0.82);
}
.guest-hero.guest-home-post-trip .eyebrow {
    color: #b7f0d2;
}
@media (prefers-reduced-motion: reduce) {
    .guest-home-post-trip__sparkles span {
        animation: none;
    }
}
@media (max-width: 480px) {
    .guest-home-support {
        padding: 14px 35% 14px 14px;
        border-radius: 22px;
    }
    .guest-home-support h2 {
        font-size: 16px;
    }
}
.guest-section {
    margin-top: 32px;
}
.guest-section__head {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.guest-section__head h2 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 550;
}
.guest-section__head button,
.guest-section__head a {
    border: 0;
    background: transparent;
    color: var(--brand-700);
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
    cursor: pointer;
}
.guest-timeline {
    padding: 5px 17px;
}
.guest-timeline .timeline-item {
    padding-top: 15px;
    padding-bottom: 15px;
    grid-template-columns: 54px 1fr;
    border-bottom: 1px solid var(--line-soft);
}
.guest-timeline .timeline-item:last-child {
    border: 0;
}
.guest-timeline .timeline-item::before,
.guest-timeline .timeline-item::after {
    display: none;
}
.guest-timeline .timeline-time {
    color: var(--coral-dark);
}
.guest-timeline .timeline-item p {
    margin: 3px 0 0;
    color: var(--ink-soft);
    font-size: 11px;
}
.guest-schedule-empty {
    min-height: 132px;
    padding: 22px;
    position: relative;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: 15px;
    overflow: hidden;
    border: 1px dashed rgba(0, 112, 77, 0.3);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(232, 247, 239, 0.9), rgba(255, 255, 255, 0.94)), var(--white);
    box-shadow: var(--shadow-sm);
}
.guest-schedule-empty::after {
    width: 160px;
    height: 160px;
    position: absolute;
    top: -98px;
    right: -58px;
    border: 1px solid rgba(0, 112, 77, 0.12);
    border-radius: 50%;
    box-shadow: 0 0 0 20px rgba(232, 247, 239, 0.38);
    content: "";
    pointer-events: none;
}
.guest-schedule-empty__icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--white);
    color: var(--brand-700);
    box-shadow: 0 6px 16px rgba(0, 55, 39, 0.08);
}
.guest-schedule-empty__icon .icon {
    width: 22px;
    height: 22px;
}
.guest-schedule-empty > div {
    min-width: 0;
    position: relative;
    z-index: 1;
}
.guest-schedule-empty .eyebrow {
    margin: 0 0 5px;
    font-size: 9px;
}
.guest-schedule-empty h2 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 20px;
    line-height: 1.18;
}
.guest-schedule-empty p:not(.eyebrow) {
    margin: 6px 0 0;
    color: var(--ink-soft);
    font-size: 12px;
    line-height: 1.5;
}
.guest-schedule-empty--upcoming,
.guest-schedule-empty--itinerary {
    min-height: 172px;
}
.guest-schedule-empty--itinerary {
    margin-top: 20px;
}
.pickup-card {
    padding: 18px;
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
}
.pickup-photo {
    width: 74px;
    height: 86px;
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    background: var(--brand-100);
}
.pickup-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pickup-photo.is-media-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            100deg,
            rgba(255, 255, 255, 0) 20%,
            rgba(255, 255, 255, 0.55) 50%,
            rgba(255, 255, 255, 0) 80%
        ),
        var(--brand-100);
    background-size: 220% 100%;
    animation: asset-shimmer 1.5s ease-in-out infinite;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .guest-hero::before,
    .pickup-photo.is-media-loading::after {
        animation: none;
    }
}
.pickup-photo__placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    background: linear-gradient(155deg, var(--brand-100), var(--brand-50) 65%);
    color: var(--brand-700);
}
.pickup-photo__placeholder .icon {
    width: 28px;
    height: 28px;
    stroke-width: 1.5;
}
.pickup-card h3 {
    margin-bottom: 2px;
    font-family: var(--font-serif);
    font-size: 21px;
}
.pickup-card p {
    margin-bottom: 8px;
    color: var(--ink-soft);
    font-size: 11px;
}
.pickup-details {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    color: var(--ink-soft);
    font-size: 11px;
}
.pickup-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
}
.update-banner {
    padding: 15px 17px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    border: 1px solid #efcfb7;
    border-radius: 14px;
    background: #fff6ed;
}
.update-banner__icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--coral-soft);
    color: var(--coral-dark);
}
.update-banner strong {
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
}
.update-banner p {
    margin: 0;
    color: #795f50;
    font-size: 11px;
}
.drawer .update-banner + #ai-suggest-form {
    margin-top: 24px;
}
.drawer #ai-suggest-form {
    gap: 20px;
}
.drawer #ai-suggest-form .field {
    padding-bottom: 0;
}
/* Keep Claude status and its configuration action in one deliberate row.
   The shared icon is block-level by default, which otherwise makes it look
   detached from its explanatory text below the drawer action bar. */
.drawer #ai-suggest-form + .field-help {
    margin-top: 12px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: var(--brand-50);
    line-height: 1.45;
}
.drawer #ai-suggest-form + .field-help > .icon {
    width: 18px;
    height: 18px;
    align-self: flex-start;
    margin-top: 1px;
}
.drawer #ai-suggest-form + .field-help > .button {
    flex: 0 0 auto;
    margin-left: auto;
}
.drawer #ai-token-form {
    margin-top: 24px;
}
.drawer #ai-token-form .drawer__footer {
    margin-top: 20px;
}
.help-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.help-card {
    min-height: 116px;
    padding: 17px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid var(--line-soft);
    border-radius: 16px;
    background: var(--paper);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    cursor: pointer;
}
.help-card .icon {
    color: var(--brand-700);
}
.help-card strong {
    display: block;
    font-size: 13px;
}
.help-card small {
    color: var(--ink-soft);
    font-size: 10px;
}
.help-card--emergency {
    border-color: #efc9c5;
    background: #fff9f7;
}
.help-card--emergency .icon {
    color: var(--danger);
}

.onboarding-checklist {
    margin-top: 20px;
}
.onboarding-checklist__card {
    /* Keep a real lower inset after the final checklist row.  The former
       negative list margin visually collapsed this space against the hero. */
    padding: 24px 22px 28px;
    position: relative;
    overflow: hidden;
    border-color: var(--brand-100);
}
.onboarding-checklist__card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--coral), var(--brand-700), #51ad89);
}
.onboarding-checklist__head {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.onboarding-checklist__head-label {
    display: flex;
    align-items: center;
    gap: 8px;
}
.onboarding-checklist__head-label .eyebrow {
    margin: 0;
}
.onboarding-checklist__spark {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    color: var(--coral-dark);
}
.onboarding-checklist__spark .icon {
    width: 16px;
    height: 16px;
}
.onboarding-checklist__head strong {
    flex: 0 0 auto;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--brand-50);
    color: var(--brand-800);
    font-size: 11px;
    font-weight: 800;
}
.onboarding-checklist__items {
    margin: 16px -6px 0;
    display: grid;
}
.onboarding-checklist__item {
    width: calc(100% + 12px);
    margin: 0 -6px;
    padding: 13px 6px;
    display: flex;
    align-items: center;
    gap: 13px;
    border: 0;
    border-radius: 12px;
    border-top: 1px solid var(--line-soft);
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
    transition:
        background 160ms ease,
        transform 160ms ease;
}
.onboarding-checklist__items > :first-child {
    border-top: 0;
}
.onboarding-checklist__item:not(:disabled):hover {
    background: var(--brand-50);
}
.onboarding-checklist__item:not(:disabled):active {
    transform: scale(0.99);
}
.onboarding-checklist__item:disabled {
    color: var(--ink-soft);
    font-weight: 550;
    cursor: default;
}
.onboarding-checklist__check {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--brand-50);
    color: var(--brand-700);
}
.onboarding-checklist__item.done .onboarding-checklist__check {
    background: var(--brand-700);
    color: var(--white);
}
.onboarding-checklist__check .icon {
    width: 17px;
    height: 17px;
}
.onboarding-checklist__item.done .onboarding-checklist__check .icon {
    width: 15px;
    height: 15px;
}
.onboarding-checklist__arrow {
    margin-left: auto;
    flex: 0 0 auto;
    color: var(--ink-soft);
}
.onboarding-checklist__arrow .icon {
    width: 16px;
    height: 16px;
}
.onboarding-checklist__later {
    min-height: 36px;
    margin: 14px 0 0 auto;
    padding: 8px 13px;
    display: flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--white);
    color: var(--ink-soft);
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 48, 34, 0.05);
    transition:
        border-color 160ms ease,
        background 160ms ease,
        color 160ms ease,
        transform 160ms ease;
}
.onboarding-checklist__later:hover {
    border-color: var(--brand-300);
    background: var(--brand-50);
    color: var(--brand-800);
    transform: translateY(-1px);
}
.onboarding-checklist__later:active {
    transform: translateY(0);
}
.guest-returning-tag {
    min-height: 22px;
    margin-left: 6px;
    padding: 3px 8px;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    border-radius: 999px;
    background: var(--brand-50);
    color: var(--brand-800);
    font-size: 10px;
    font-weight: 750;
    line-height: 1.2;
    white-space: nowrap;
}

/* Floating light pill nav — original cream/green palette, gently elevated. */
.guest-bottom-nav {
    position: fixed;
    z-index: 40;
    left: 50%;
    bottom: max(12px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    width: min(500px, calc(100% - 24px));
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 8px 6px;
    border: 1px solid rgba(218, 218, 211, 0.9);
    border-radius: 24px;
    background: rgba(255, 254, 251, 0.96);
    box-shadow: 0 12px 30px rgba(24, 40, 28, 0.16);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.guest-nav-item {
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 0;
    border: 0;
    background: transparent;
    color: #73807c;
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
    transition: color 180ms ease;
}
/* Icon sits in a pill wrapper so the active highlight stays centred. */
.guest-nav-item__icon {
    width: 46px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: transparent;
    transition:
        background 220ms ease,
        transform 220ms ease;
}
.guest-nav-item .icon {
    width: 21px;
    height: 21px;
    transition: color 200ms ease;
}
/* Keep icon + label above the active capsule. */
.guest-nav-item__icon,
.guest-nav-item__label {
    position: relative;
    z-index: 1;
}
.guest-nav-item:active {
    opacity: 0.82;
}

/* The active state makes one calm transition; it deliberately avoids a
   second idle bounce after the tap feedback has finished. */
.guest-nav-item.active {
    color: var(--brand-900);
}
.guest-nav-item.active::before {
    content: "";
    position: absolute;
    inset: 3px 8px;
    z-index: 0;
    border-radius: 15px;
    background: linear-gradient(
        160deg,
        var(--brand-50, #e9f4ee) 0%,
        color-mix(in srgb, var(--brand-100, #cfe8dd) 78%, var(--brand-50, #e9f4ee)) 100%
    );
    box-shadow:
        0 6px 14px rgba(0, 72, 49, 0.14),
        inset 0 0 0 1px rgba(0, 72, 49, 0.08);
    animation: nav-capsule-in 200ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}
/* Soft sheen sweeping across the capsule once on activation. */
.guest-nav-item.active::after {
    content: "";
    position: absolute;
    inset: 3px 8px;
    z-index: 0;
    border-radius: 15px;
    background: linear-gradient(
        115deg,
        transparent 30%,
        rgba(255, 255, 255, 0.55) 48%,
        transparent 66%
    );
    background-size: 220% 100%;
    animation: nav-sheen 420ms ease-out 40ms both;
    pointer-events: none;
}
.guest-nav-item.active .guest-nav-item__icon {
    color: var(--brand-800);
}
.guest-nav-item.active .icon {
    color: var(--brand-800);
    animation: nav-icon-pop 200ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}
.guest-nav-item.active .guest-nav-item__label {
    font-weight: 800;
}
@media (hover: hover) {
    .guest-nav-item:not(.active):hover {
        color: var(--brand-800);
    }
    .guest-nav-item:not(.active):hover .guest-nav-item__icon {
        background: rgba(0, 72, 49, 0.07);
        transform: translateY(-2px);
    }
}

/* Guest route loading — a lightweight island scene instead of a generic
   spinner. Floating UI stays hidden until the destination screen is ready. */
body.guest-route-loading .toast-region,
body.guest-route-loading [data-iki-host] {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
.guest-travel-loading {
    min-height: calc(100dvh - 172px - env(safe-area-inset-bottom));
    padding: 34px 18px 52px;
    display: grid;
    align-content: center;
    justify-items: center;
    position: relative;
    overflow: hidden;
    text-align: center;
}
.boot-screen--guest-travel {
    min-height: 100dvh;
    background:
        radial-gradient(circle at 80% 12%, rgba(255, 215, 126, 0.3), transparent 24%),
        linear-gradient(165deg, #fffaf0, #f5ead6);
}
.boot-screen--guest-travel .guest-travel-loading {
    width: 100%;
    min-height: 100dvh;
    box-sizing: border-box;
}
.guest-travel-loading::before {
    content: "";
    width: 300px;
    height: 300px;
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(112, 194, 174, 0.18), transparent 68%);
    transform: translate(-50%, -56%);
    pointer-events: none;
}
.guest-travel-loading__scene {
    width: min(246px, 74vw);
    height: 136px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.86);
    border-radius: 30px;
    background:
        linear-gradient(
            180deg,
            transparent 0 55%,
            rgba(255, 255, 255, 0.14) 56% 57%,
            transparent 58%
        ),
        linear-gradient(180deg, #b8e8e5 0 55%, #5dc6bf 56% 78%, #f2d8a5 79%);
    box-shadow:
        0 24px 52px rgba(29, 86, 75, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
}
.guest-travel-loading__sun {
    width: 45px;
    height: 45px;
    position: absolute;
    top: 17px;
    right: 23px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 35%, #fff4ad, #ffd261 55%, #f2a53a);
    box-shadow: 0 0 28px rgba(255, 197, 72, 0.62);
    animation: guest-loading-sun 2.8s ease-in-out infinite;
}
.guest-travel-loading__route {
    width: 112px;
    position: absolute;
    z-index: 2;
    top: 67px;
    left: 24px;
    border-top: 2px dashed rgba(7, 92, 75, 0.48);
    transform: rotate(-8deg);
}
.guest-travel-loading__plane {
    width: 29px;
    height: 29px;
    position: absolute;
    z-index: 3;
    top: 42px;
    left: 43px;
    display: grid;
    place-items: center;
    color: #075c4b;
    filter: drop-shadow(0 3px 5px rgba(0, 73, 58, 0.16));
    animation: guest-loading-flight 2.2s ease-in-out infinite;
}
.guest-travel-loading__plane .icon {
    width: 27px;
    height: 27px;
    transform: rotate(8deg);
}
.guest-travel-loading__island {
    width: 192px;
    height: 64px;
    position: absolute;
    z-index: 1;
    right: -47px;
    bottom: 22px;
    border-radius: 58% 42% 0 0;
    background:
        radial-gradient(circle at 35% 8%, #8fc370 0 6%, transparent 7%),
        linear-gradient(155deg, #68a66c, #276f59 72%);
    box-shadow: -16px 19px 0 rgba(246, 222, 174, 0.92);
    transform: rotate(-5deg);
}
.guest-travel-loading__logo {
    width: 142px;
    height: 48px;
    margin: 20px 0 2px;
    object-fit: contain;
}
.guest-travel-loading > .eyebrow {
    margin-bottom: 6px;
    color: #3d786b;
    font-size: 9px;
    letter-spacing: 0.18em;
}
.guest-travel-loading h2 {
    max-width: 290px;
    margin: 0;
    color: #153f38;
    font-family: var(--font-travel-serif);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
}
.guest-travel-loading__dots {
    margin-top: 14px;
    display: flex;
    gap: 6px;
}
.guest-travel-loading__dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #08745e;
    animation: guest-loading-dot 1.1s ease-in-out infinite;
}
.guest-travel-loading__dots span:nth-child(2) {
    animation-delay: 0.14s;
}
.guest-travel-loading__dots span:nth-child(3) {
    animation-delay: 0.28s;
}
@keyframes guest-loading-flight {
    50% {
        transform: translate(52px, -10px);
    }
}
@keyframes guest-loading-sun {
    50% {
        opacity: 0.78;
        transform: scale(1.08);
    }
}
@keyframes guest-loading-dot {
    50% {
        opacity: 0.3;
        transform: translateY(-4px);
    }
}
@media (prefers-reduced-motion: reduce) {
    .guest-travel-loading__plane,
    .guest-travel-loading__sun,
    .guest-travel-loading__dots span {
        animation: none !important;
    }
}
@keyframes nav-capsule-in {
    0% {
        opacity: 0;
        transform: scale(0.68);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes nav-sheen {
    0% {
        opacity: 0;
        background-position: 130% 0;
    }
    25% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        background-position: -40% 0;
    }
}
@keyframes nav-icon-pop {
    0% {
        opacity: 0.65;
        transform: scale(0.88);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
@media (prefers-reduced-motion: reduce) {
    .guest-nav-item.active::before,
    .guest-nav-item.active::after,
    .guest-nav-item.active .icon,
    .guest-main > * {
        animation: none;
    }
    .guest-nav-item.active::after {
        display: none;
    }
}

.guest-page-head {
    padding: 12px 0 20px;
}
.guest-page-head h1 {
    margin-bottom: 6px;
    font-family: var(--font-serif);
    font-weight: 500;
}
.guest-page-head p {
    margin: 0;
    color: var(--ink-soft);
}

/* ---- Destination guide ("Khám phá Phú Quốc") ---- */
.guide-head {
    padding-bottom: 12px;
}
/* Sticky jump-to menu: horizontal chip rail that scrollspy keeps in sync. */
.guide-jump {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    gap: 8px;
    margin: 0 -18px 4px;
    padding: 10px 18px;
    overflow-x: auto;
    scrollbar-width: none;
    background: color-mix(in srgb, var(--paper, #fffefb) 88%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line-soft);
}
.guide-jump::-webkit-scrollbar {
    display: none;
}
.guide-jump__chip {
    flex: 0 0 auto;
    padding: 7px 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    color: var(--ink-soft);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background 160ms ease,
        color 160ms ease,
        border-color 160ms ease,
        transform 120ms ease;
}
.guide-jump__chip:active {
    transform: scale(0.95);
}
.guide-jump__chip.active {
    border-color: var(--brand-800);
    background: var(--brand-900);
    color: var(--white);
}
.guide-body {
    display: grid;
    gap: 18px;
    padding: 14px 0 8px;
}
.guide-section {
    scroll-margin-top: 66px;
}
.guide-section > h2 {
    margin: 0 0 10px;
    font-family: var(--font-serif);
    font-size: 21px;
    font-weight: 500;
}
.guide-section p {
    margin: 0 0 10px;
    color: var(--ink);
    line-height: 1.6;
}
.guide-section p:last-child {
    margin-bottom: 0;
}
.guide-section ul {
    margin: 0 0 10px;
    padding-left: 20px;
    color: var(--ink);
    line-height: 1.6;
}
.guide-section ul:last-child {
    margin-bottom: 0;
}
.guide-section__img {
    width: 100%;
    height: 190px;
    margin: 4px 0 12px;
    object-fit: cover;
    border-radius: 16px;
    background: var(--brand-50);
}
.guide-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.guide-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--brand-50);
    color: var(--brand-800);
    font-size: 12px;
    font-weight: 700;
}
.guide-chip .icon {
    width: 14px;
    height: 14px;
}
.guide-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}
/* Spot card: image-led place card. */
.guide-spot {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    transition:
        box-shadow 200ms ease,
        transform 180ms ease;
}
.guide-spot .guide-section__img {
    height: 210px;
    margin: 0;
    border-radius: 0;
}
.guide-spot__body {
    padding: 16px 18px 18px;
}
.guide-spot__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}
.guide-spot__head h2 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 500;
}
.guide-spot__area {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--brand-700);
    font-size: 12px;
    font-weight: 700;
}
.guide-spot__area .icon {
    width: 14px;
    height: 14px;
}
.guide-spot__actions {
    margin-top: 14px;
}
/* Tip callout. */
.guide-tip {
    display: flex;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 18px;
    background: linear-gradient(150deg, var(--brand-50), var(--sand, #f6f4ec));
    border: 1px solid var(--brand-100);
}
.guide-tip__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: var(--white);
    color: var(--brand-700);
}
.guide-tip__body h2 {
    margin: 0 0 8px;
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 500;
}
@media (hover: hover) and (pointer: fine) {
    .guide-spot:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }
    .guide-jump__chip:hover:not(.active) {
        border-color: var(--brand-300);
        color: var(--brand-800);
    }
}
@media (prefers-reduced-motion: reduce) {
    .guide-jump__chip.active {
        scroll-behavior: auto;
    }
}
/* Back-office guide editor list. */
.guide-editor-list {
    display: grid;
    gap: 10px;
    margin-top: 8px;
}
.guide-editor-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    color: var(--ink-soft);
    font-size: 13px;
}
.guide-editor-summary strong {
    color: var(--ink);
}
.guide-editor-summary__translation {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 3px 9px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 12px;
}
.guide-editor-summary__translation.is-warning {
    background: var(--warning-soft);
    color: var(--warning);
}
.guide-editor-summary__translation.is-complete {
    background: var(--success-soft);
    color: var(--success);
}
.guide-editor-summary__translation.is-empty {
    background: var(--sand);
    color: var(--ink-soft);
}
.guide-editor-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--white);
}
.guide-editor-row__main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.guide-editor-row__text {
    min-width: 0;
}
.guide-editor-row__text strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.guide-editor-row__text small {
    display: block;
    margin-top: 2px;
    color: var(--ink-soft);
    font-size: 12px;
}
.guide-locale-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}
.guide-locale-pill {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.guide-locale-pill.is-complete {
    background: var(--success-soft);
    color: var(--success);
}
.guide-locale-pill.is-missing {
    background: var(--warning-soft);
    color: var(--warning);
}
.guide-editor-row__actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
}
@media (max-width: 640px) {
    .guide-editor-row {
        flex-direction: column;
        align-items: stretch;
    }
    .guide-editor-row__actions {
        justify-content: flex-end;
    }
    .guide-editor-summary {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Back-office guide composer. */
.guide-composer__intro {
    margin: 0 0 16px;
    color: var(--ink-soft);
    line-height: 1.55;
}
.drawer.drawer--guide-composer {
    width: min(960px, 100%);
}
.guide-kind-picker {
    margin: 0 0 18px;
    padding: 0;
    border: 0;
}
.guide-kind-picker legend {
    margin-bottom: 8px;
    font-weight: 800;
    font-size: 14px;
}
.guide-kind-picker__options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.guide-kind-option {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--white);
    cursor: pointer;
}
.guide-kind-option:has(input:checked) {
    border-color: var(--brand-700);
    background: var(--brand-50);
    box-shadow: inset 0 0 0 1px var(--brand-700);
}
.guide-kind-option input {
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--brand-700);
}
.guide-kind-option strong,
.guide-kind-option small {
    display: block;
}
.guide-kind-option strong {
    font-size: 13px;
}
.guide-kind-option small {
    margin-top: 3px;
    color: var(--ink-soft);
    font-size: 11px;
    line-height: 1.4;
}
.guide-composer__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    align-items: start;
    gap: 18px;
}
.guide-composer__fields {
    min-width: 0;
}
.guide-composer__translations,
.guide-composer__details {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--sand);
}
.guide-composer__details {
    display: grid;
    gap: 14px;
    margin-top: 14px;
}
.guide-composer__details .field,
.guide-composer__details .form-grid {
    margin: 0;
}
.guide-composer [data-guide-kinds][hidden] {
    display: none !important;
}
.guide-locale-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}
.guide-locale-tab {
    display: inline-flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-height: 40px;
    padding: 7px 9px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--ink-soft);
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 750;
}
.guide-locale-tab.is-active {
    border-color: var(--brand-300);
    color: var(--brand-800);
    background: var(--brand-50);
}
.guide-locale-tab small {
    color: inherit;
    font-size: 10px;
    font-weight: 800;
}
.locale-tab__name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.locale-tab__name > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.guide-locale-tab .flag-circle {
    width: 18px;
    height: 18px;
}
.guide-locale-panel__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.guide-locale-panel__head strong {
    font-size: 14px;
}
.guide-locale-panel__head small {
    color: var(--ink-soft);
    font-size: 11px;
    text-align: right;
}
.guide-rich-editor__label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
}
.guide-rich-editor__label label {
    margin: 0;
}
.guide-rich-editor__label small {
    color: var(--ink-soft);
    font-size: 11px;
}
.guide-rich-toolbar {
    display: flex;
    gap: 6px;
    margin-bottom: 7px;
}
.guide-rich-toolbar__button {
    display: inline-grid;
    width: 44px;
    min-height: 40px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    background: var(--white);
    cursor: pointer;
    font: inherit;
    font-size: 15px;
}
.guide-rich-toolbar__button--list {
    font-size: 22px;
    line-height: 1;
}
.guide-rich-toolbar__button:hover,
.guide-rich-toolbar__button:focus-visible {
    border-color: var(--brand-700);
    background: var(--brand-50);
    outline: none;
}
.guide-rich-editor {
    min-height: 136px;
    padding: 12px 13px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--ink);
    background: var(--white);
    line-height: 1.6;
    outline: none;
}
.guide-rich-editor:focus {
    border-color: var(--brand-700);
    box-shadow: 0 0 0 3px rgba(8, 122, 90, 0.14);
}
.guide-rich-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--ink-soft);
    pointer-events: none;
}
.guide-rich-editor p,
.guide-rich-editor ul {
    margin: 0 0 10px;
}
.guide-rich-editor p:last-child,
.guide-rich-editor ul:last-child {
    margin-bottom: 0;
}
.guide-rich-editor ul {
    padding-left: 20px;
}
.explore-rich-editor__label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
}
.explore-rich-editor__label label {
    margin: 0;
}
.explore-rich-editor__label small {
    color: var(--ink-soft);
    font-size: 11px;
}
.explore-rich-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 7px;
}
.explore-rich-toolbar__button,
.explore-rich-toolbar__color {
    display: inline-grid;
    width: 42px;
    min-height: 40px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    background: var(--white);
    cursor: pointer;
    font: inherit;
    font-size: 15px;
}
.explore-rich-toolbar__button--list {
    font-size: 16px;
    font-weight: 800;
}
.explore-rich-toolbar__button:hover,
.explore-rich-toolbar__button:focus-visible,
.explore-rich-toolbar__color:hover,
.explore-rich-toolbar__color:focus-visible {
    border-color: var(--brand-700);
    background: var(--brand-50);
    outline: none;
}
.explore-rich-toolbar__colors {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 3px;
    padding-left: 8px;
    border-left: 1px solid var(--line);
}
.explore-rich-toolbar__color {
    width: 30px;
    min-height: 30px;
    border-radius: 50%;
}
.explore-rich-toolbar__color span {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: currentColor;
}
.explore-rich-editor {
    min-height: 164px;
    padding: 12px 13px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--ink);
    background: var(--white);
    line-height: 1.65;
    outline: none;
}
.explore-rich-editor:focus {
    border-color: var(--brand-700);
    box-shadow: 0 0 0 3px rgba(8, 122, 90, 0.14);
}
.explore-rich-editor.is-invalid {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px var(--danger-soft);
}
.explore-rich-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--ink-soft);
    pointer-events: none;
}
.explore-rich-editor p,
.explore-rich-editor ul,
.explore-rich-editor ol {
    margin: 0 0 10px;
}
.explore-rich-editor p:last-child,
.explore-rich-editor ul:last-child,
.explore-rich-editor ol:last-child {
    margin-bottom: 0;
}
.explore-rich-editor ul,
.explore-rich-editor ol {
    padding-left: 22px;
}
.explore-rich-editor li > ul,
.explore-rich-editor li > ol {
    margin-top: 4px;
}
.explore-rich-editor ul ul {
    list-style-type: circle;
}
.explore-rich-editor ul ul ul {
    list-style-type: square;
}
.explore-rich-editor ol ol {
    list-style-type: lower-alpha;
}
[data-rich-color="brand"] {
    color: var(--brand-700);
}
[data-rich-color="ocean"] {
    color: #075985;
}
[data-rich-color="coral"] {
    color: #b83e38;
}
[data-rich-color="gold"] {
    color: #9a6700;
}
[data-rich-color="ink"] {
    color: var(--ink);
}
.guide-composer__advanced {
    margin-top: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--white);
}
.guide-composer__advanced summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 0 14px;
    color: var(--ink);
    cursor: pointer;
    font-size: 13px;
    font-weight: 750;
    list-style: none;
}
.guide-composer__advanced summary::-webkit-details-marker {
    display: none;
}
.guide-composer__advanced summary span {
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 600;
}
.guide-composer__advanced[open] summary {
    border-bottom: 1px solid var(--line);
}
.guide-composer__advanced .guide-composer__details {
    margin: 0;
    border: 0;
    border-radius: 0 0 14px 14px;
}
.guide-composer__preview {
    position: sticky;
    top: 10px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--white);
}
.guide-composer__preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 14px;
    border-bottom: 1px solid var(--line);
}
.guide-composer__preview-head .eyebrow {
    margin: 0 0 3px;
    font-size: 10px;
}
.guide-composer__preview-head strong {
    font-size: 13px;
}
.guide-preview-status {
    max-width: 140px;
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 700;
    text-align: right;
}
.guide-composer__preview-canvas {
    padding: 14px;
    background: var(--sand);
}
.guide-composer__preview-canvas .guide-section {
    margin: 0;
}
.guide-composer__preview-canvas .guide-section__img {
    max-height: 180px;
}

/* ---- Explore Pages: article-first editor and guest reader ---- */
.explore-admin-library {
    display: grid;
    gap: 18px;
}
.explore-admin-library__summary {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 15px;
    border: 1px solid var(--brand-100);
    border-radius: 14px;
    color: var(--brand-800);
    background: var(--brand-50);
}
.explore-admin-library__summary > span {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 11px;
    color: var(--white);
    background: var(--brand-700);
}
.explore-admin-library__summary strong,
.explore-admin-library__summary small {
    display: block;
}
.explore-admin-library__summary small {
    margin-top: 2px;
    color: var(--ink-soft);
}
.explore-admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-auto-rows: 1fr;
    align-items: stretch;
    gap: 18px;
}
.explore-admin-card {
    display: flex;
    height: 100%;
    min-width: 0;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}
.explore-card-cover {
    position: relative;
    display: grid;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    place-items: center;
    color: var(--brand-700);
    background:
        radial-gradient(circle at 78% 18%, var(--brand-100), transparent 34%),
        linear-gradient(145deg, var(--brand-50), var(--sand));
}
.explore-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 280ms ease;
}
.explore-card-cover__fallback {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border: 1px solid var(--brand-100);
    border-radius: 17px;
    background: color-mix(in srgb, var(--white) 78%, transparent);
}
.explore-card-cover__fallback svg {
    width: 25px;
    height: 25px;
}
.explore-card-cover img[hidden],
.explore-card-cover__fallback[hidden] {
    display: none;
}
.explore-admin-card__body {
    display: flex;
    flex: 1;
    min-width: 0;
    padding: 17px 18px 15px;
    flex-direction: column;
}
.explore-admin-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}
.explore-admin-card__tags {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.explore-admin-card__index {
    color: var(--brand-700);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.explore-admin-card__category {
    padding: 3px 9px;
    border-radius: 999px;
    color: var(--brand-700);
    background: var(--brand-50);
    font-size: 10px;
    font-weight: 800;
}
.explore-admin-card__featured {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    color: var(--coral-dark);
    background: var(--coral-soft);
    font-size: 10px;
    font-weight: 800;
}
.explore-admin-card__featured svg {
    width: 11px;
    height: 11px;
}
.explore-admin-card .explore-publication-status {
    min-height: 30px;
    padding: 5px 8px;
    font-size: 10px;
}
.explore-admin-card .explore-publication-status svg {
    width: 14px;
    height: 14px;
}
.explore-admin-card h2 {
    display: -webkit-box;
    min-height: 2.56em;
    margin: 0;
    overflow: hidden;
    font-family: var(--font-serif);
    font-size: 21px;
    font-weight: 550;
    line-height: 1.28;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.explore-admin-card__body > p {
    display: -webkit-box;
    min-height: 43px;
    margin: 8px 0 14px;
    overflow: hidden;
    color: var(--ink-soft);
    font-size: 13px;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.explore-admin-card__locales {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 700;
}
.explore-admin-card__locales svg {
    width: 14px;
    height: 14px;
    color: var(--brand-700);
}
.explore-admin-card__actions {
    display: flex;
    min-height: 59px;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-top: 1px solid var(--line-soft);
    background: var(--paper);
}
.explore-library-empty {
    display: grid;
    min-height: 320px;
    max-width: 720px;
    margin: 0 auto;
    padding: 44px 28px;
    place-items: center;
    align-content: center;
    border: 1px dashed var(--brand-100);
    border-radius: 22px;
    background: linear-gradient(145deg, var(--white), var(--brand-50));
    text-align: center;
}
.explore-library-empty__icon {
    display: grid;
    width: 60px;
    height: 60px;
    margin-bottom: 14px;
    place-items: center;
    border-radius: 19px;
    color: var(--white);
    background: var(--brand-700);
    box-shadow: 0 12px 28px rgba(0, 72, 49, 0.18);
}
.explore-library-empty__icon svg {
    width: 27px;
    height: 27px;
}
.explore-library-empty h2 {
    margin: 0;
    font-size: 22px;
}
.explore-library-empty p {
    max-width: 480px;
    margin: 8px 0 18px;
    color: var(--ink-soft);
    line-height: 1.55;
}
.explore-editor-heading .back-link {
    margin-bottom: 13px;
}
.drawer.drawer--explore-composer {
    width: min(1120px, 100%);
}
.explore-inline-editor {
    max-width: none;
}
.explore-inline-editor > .explore-composer > .button--wide {
    display: none;
}
.explore-editor-command-bar {
    position: sticky;
    z-index: 14;
    /* Clear the 68px desktop topbar instead of sliding beneath it. */
    top: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--white) 94%, transparent);
    box-shadow: 0 10px 22px rgba(28, 45, 42, 0.08);
    backdrop-filter: blur(14px);
}
.explore-editor-command-bar__status,
.explore-editor-command-bar__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.explore-editor-command-bar__actions {
    justify-content: flex-end;
}
/* Content : preview = 6 : 4, filling the full workspace width. */
.explore-inline-editor .explore-composer__layout {
    grid-template-columns: minmax(0, 6fr) minmax(360px, 4fr);
    gap: 28px;
}
.explore-image-input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    pointer-events: none;
}
.explore-media-picker {
    display: flex;
    align-items: center;
    gap: 10px;
}
/* Remove button — inline beside the dropzone, only shown once set. */
.explore-media-picker__remove {
    flex: 0 0 auto;
    align-self: stretch;
    display: none;
    place-items: center;
    width: 48px;
    border: 1px solid var(--danger-soft);
    border-radius: 12px;
    background: var(--danger-soft);
    color: var(--danger);
    cursor: pointer;
    transition:
        background 0.15s,
        border-color 0.15s;
}
.explore-media-picker.is-set .explore-media-picker__remove {
    display: grid;
}
.explore-media-picker__remove:hover,
.explore-media-picker__remove:focus-visible {
    border-color: var(--danger);
    background: #f6d3d0;
    outline: none;
}
.explore-media-picker__remove .icon {
    width: 18px;
    height: 18px;
}
/* The "+" chip only makes sense while empty; hide it once an image is set. */
.explore-media-picker.is-set .explore-media-picker__cta {
    display: none;
}
.explore-media-picker__drop {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
    min-height: 78px;
    padding: 12px 14px;
    border: 1.5px dashed var(--brand-300);
    border-radius: 14px;
    background: var(--brand-50);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition:
        border-color 0.15s,
        background 0.15s,
        box-shadow 0.15s;
}
.explore-media-picker__drop:hover,
.explore-media-picker__drop:focus-visible {
    border-color: var(--brand-700);
    background: var(--brand-100);
    outline: none;
    box-shadow: 0 0 0 3px rgba(8, 122, 90, 0.14);
}
.explore-media-picker.is-set .explore-media-picker__drop {
    border-style: solid;
    border-color: var(--line);
    background: var(--white);
}
.explore-media-picker__thumb {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 11px;
    border: 1px solid var(--line);
    overflow: hidden;
    background: var(--white);
    display: grid;
    place-items: center;
    color: var(--brand-700);
}
.explore-media-picker__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.explore-media-picker__thumb .icon {
    width: 22px;
    height: 22px;
}
.explore-media-picker__text {
    display: grid;
    gap: 3px;
    min-width: 0;
}
.explore-media-picker__title {
    font-weight: 750;
    font-size: 14px;
    color: var(--brand-800);
}
.explore-media-picker__hint {
    color: var(--ink-soft);
    font-size: 12px;
}
.explore-media-picker__cta {
    margin-left: auto;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--white);
    color: var(--brand-700);
}
.explore-media-picker.is-dragover .explore-media-picker__drop {
    border-style: solid;
    border-color: var(--brand-700);
    background: var(--brand-100);
    box-shadow: 0 0 0 3px rgba(8, 122, 90, 0.18);
}
/* Let the drop event land on the picker, not a child, while dragging. */
.explore-media-picker.is-dragover .explore-media-picker__drop * {
    pointer-events: none;
}
.explore-media-picker.is-loading .explore-media-picker__drop {
    opacity: 0.65;
    pointer-events: none;
}
/* Activity image picker: thumbnail + actions row, with a collapsible
   organization-wide library grid underneath. */
.activity-image-picker__row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.activity-image-picker__thumb {
    width: 64px;
    height: 64px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--brand-700);
    background: var(--brand-50);
}
.activity-image-picker__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.activity-image-picker__thumb--empty .icon {
    width: 24px;
    height: 24px;
}
.activity-image-picker__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.activity-image-picker__remove {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--danger-soft);
    border-radius: 10px;
    background: var(--danger-soft);
    color: var(--danger);
    cursor: pointer;
    transition:
        background 0.15s,
        border-color 0.15s;
}
.activity-image-picker__remove:hover,
.activity-image-picker__remove:focus-visible {
    border-color: var(--danger);
    background: #f6d3d0;
    outline: none;
}
.activity-image-picker__remove .icon {
    width: 17px;
    height: 17px;
}
.activity-image-picker.is-loading .activity-image-picker__actions button {
    opacity: 0.65;
    pointer-events: none;
}
.activity-image-picker__library {
    margin-top: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--sand);
}
.activity-image-picker__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 8px;
}
.activity-image-picker__item {
    aspect-ratio: 1;
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 10px;
    background: var(--white);
    cursor: pointer;
    transition: border-color 0.15s;
}
.activity-image-picker__item:hover,
.activity-image-picker__item:focus-visible {
    border-color: var(--brand-700);
    outline: none;
}
.activity-image-picker__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.explore-composer__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
    gap: 24px;
    align-items: start;
}
.explore-composer__basics,
.explore-composer__blocks {
    padding: 26px 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--white);
    box-shadow: var(--shadow-sm);
}
.explore-composer__start {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(310px, 0.95fr);
    gap: 22px;
    align-items: center;
    margin-bottom: 20px;
    padding: 22px 24px;
    border: 1px solid var(--brand-100);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--brand-50), var(--white));
}
.explore-composer__start .eyebrow {
    margin: 0 0 5px;
}
.explore-composer__start h2 {
    margin: 0;
    font-size: 20px;
}
.explore-composer__start > div > p:last-child {
    margin: 7px 0 0;
    color: var(--ink-soft);
    line-height: 1.55;
}
.explore-composer__steps {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.explore-composer__steps li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--white) 82%, transparent);
}
.explore-composer__steps span {
    display: grid;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    color: var(--white);
    background: var(--brand-700);
    font-size: 12px;
    font-weight: 800;
}
.explore-composer__steps strong,
.explore-composer__steps small {
    display: block;
}
.explore-composer__steps strong {
    font-size: 13px;
}
.explore-composer__steps small {
    margin-top: 2px;
    color: var(--ink-soft);
    font-size: 12px;
    line-height: 1.4;
}
.explore-composer__blocks {
    margin-top: 20px;
}
/* Breathing room between stacked fields inside the basics/locale panels. */
.explore-composer__basics [data-explore-locale-panel] .field + .field {
    margin-top: 18px;
}
.explore-composer__basics .field label,
.explore-composer__blocks .field label {
    margin-bottom: 2px;
    letter-spacing: 0.01em;
}
.explore-composer__settings {
    margin-top: 12px;
    border-top: 1px solid var(--line);
}
.explore-composer__settings summary {
    padding: 13px 0;
    color: var(--ink-soft);
    cursor: pointer;
    font-size: 13px;
    font-weight: 750;
}
.explore-composer__settings .field {
    margin-bottom: 12px;
}
.check-row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 10px 0;
    cursor: pointer;
}
.check-row input {
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--brand-700);
}
.check-row strong,
.check-row small {
    display: block;
}
.check-row small {
    margin-top: 3px;
    color: var(--ink-soft);
    font-size: 12px;
}
.explore-composer__blocks-head {
    position: sticky;
    z-index: 12;
    top: 10px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin: -10px -12px 4px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--white) 94%, transparent);
    box-shadow: 0 8px 20px rgba(28, 45, 42, 0.06);
    backdrop-filter: blur(14px);
}
.explore-inline-editor .explore-composer__blocks-head {
    /* Stay beneath the sticky article actions (68px topbar + 64px action bar). */
    top: 152px;
}
.explore-composer__blocks-head .eyebrow {
    margin: 0 0 3px;
}
.explore-composer__blocks-head h3 {
    margin: 0;
    font-size: 17px;
}
.explore-add-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}
.explore-block-editor {
    position: relative;
    margin-top: 10px;
    border: 1px solid var(--line);
    border-radius: 13px;
    overflow: hidden;
    background: var(--sand);
    transition:
        opacity 160ms ease,
        box-shadow 160ms ease;
}
.explore-block-editor > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 8px 10px 8px 13px;
    border-bottom: 1px solid var(--line);
    background: var(--white);
}
.explore-block-editor__actions {
    display: flex;
    gap: 3px;
}
.explore-block-editor__identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}
.explore-block-editor__drag {
    color: var(--ink-soft);
    background: transparent;
    cursor: grab;
}
.explore-block-editor__drag:active {
    cursor: grabbing;
}
.explore-block-editor__drag .icon {
    width: 19px;
    height: 19px;
}
.explore-block-editor__actions .icon-button {
    min-width: 44px;
    min-height: 44px;
}
.explore-block-editor.is-dragging {
    opacity: 0.42;
}
.explore-block-editor.is-drop-before {
    box-shadow: 0 -4px 0 var(--brand-700);
}
.explore-block-editor.is-drop-after {
    box-shadow: 0 4px 0 var(--brand-700);
}
[data-explore-block-list].is-drop-at-end {
    padding-bottom: 8px;
    box-shadow: inset 0 -3px 0 var(--brand-700);
}
.explore-block-editor__body {
    padding: 18px;
    display: grid;
    gap: 18px;
}
/* Callout title + body stack vertically instead of side by side. */
.explore-panel-stack {
    display: grid;
    gap: 16px;
}
/* Roomier inputs across the whole composer for easier scanning/editing. */
.explore-composer .input,
.explore-composer .textarea,
.explore-composer .select {
    padding: 13px 15px;
    border-radius: 12px;
}
.explore-composer .field {
    gap: 9px;
}
.explore-composer .input.is-invalid,
.explore-composer .textarea.is-invalid {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px var(--danger-soft);
}
.explore-block-editor__body .field:last-child,
.explore-block-editor__body .form-grid:last-child {
    margin-bottom: 0;
}
.explore-block-editor__body .form-grid > .field {
    align-content: start;
}
.explore-composer__preview {
    position: sticky;
    top: 10px;
    min-height: 180px;
    max-height: calc(100dvh - 120px);
    overflow: auto;
    border: 1px solid var(--brand-100);
    border-radius: var(--radius-md);
    background: var(--paper);
    box-shadow: var(--shadow-sm);
}
.explore-composer__preview .explore-article {
    padding: 22px 24px;
}
.explore-composer__preview-note {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 12px 14px;
    border-bottom: 1px solid var(--brand-100);
    color: var(--ink-soft);
    background: var(--white);
    font-size: 12px;
    line-height: 1.45;
}
.explore-composer__preview-note svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: var(--brand-700);
}
.explore-composer__preview-note.is-current {
    color: var(--brand-700);
    background: var(--brand-50);
}
.explore-composer__preview-note.is-pending {
    color: var(--coral-dark);
    border-bottom-color: var(--coral-soft);
    background: var(--coral-soft);
}
.explore-composer__preview .explore-article__cover {
    height: 130px;
}
.explore-composer__preview .explore-article__head h1 {
    font-size: 24px;
}
.explore-composer__preview .explore-article__jump {
    position: static;
    margin: 0 0 18px;
}
.explore-composer__preview .explore-article__jump-list {
    grid-template-columns: 1fr;
}
.explore-library-hero {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
    padding: 18px 0 4px;
}
.explore-library-hero h1 {
    margin: 0 0 10px;
    color: #063f35;
    font-family: var(--font-travel-serif);
    font-size: clamp(31px, 7.5vw, 42px);
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: -0.04em;
    text-wrap: balance;
}
.explore-guest-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 22px;
}
.explore-guest-featured {
    margin: 0 0 22px;
    border-radius: 18px;
    box-shadow: 0 8px 20px rgba(0, 72, 49, 0.09);
    transition:
        box-shadow 180ms ease,
        transform 180ms ease;
}
.explore-featured-carousel {
    min-width: 0;
    margin: 0 0 22px;
}
.explore-featured-carousel__track {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin: -6px;
    padding: 6px 6px 12px;
    overflow-x: auto;
    scroll-padding-inline: 6px;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}
.explore-featured-carousel__track::-webkit-scrollbar {
    display: none;
}
.explore-featured-carousel .explore-guest-featured {
    min-width: 0;
    flex: 0 0 100%;
    margin: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}
.explore-featured-carousel .explore-guest-featured__button {
    height: 100%;
}
.explore-featured-carousel__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 17px;
    padding-top: 8px;
}
.explore-featured-carousel__dot {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-700) 25%, var(--white));
    box-shadow: none;
    cursor: pointer;
    transition:
        background-color 220ms ease,
        box-shadow 220ms ease,
        transform 220ms ease;
}
.explore-featured-carousel__dot.is-active {
    background: var(--brand-700);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-100) 72%, transparent);
    transform: scale(1.08);
}
.explore-featured-carousel__dot:focus-visible {
    outline: 2px solid var(--brand-700);
    outline-offset: 3px;
}
.explore-guest-featured__button {
    display: block;
    position: relative;
    width: 100%;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: inherit;
    overflow: hidden;
    color: inherit;
    background: var(--white);
    box-shadow: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}
.explore-guest-featured__ribbon {
    position: absolute;
    z-index: 2;
    top: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    color: var(--white);
    background: var(--brand-900);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.03em;
}
.explore-guest-featured__ribbon svg {
    width: 13px;
    height: 13px;
    color: #ffd36d;
}
.explore-guest-featured__cover {
    display: block;
}
.explore-guest-featured__cover .explore-card-cover {
    aspect-ratio: 2.4 / 1;
    border-radius: 0;
}
.explore-guest-featured__body {
    display: block;
    padding: 12px 16px 14px;
}
.explore-guest-featured__meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    color: var(--brand-700);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.explore-guest-featured__meta svg {
    width: 14px;
    height: 14px;
}
.explore-guest-featured strong {
    display: block;
    margin-bottom: 5px;
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.28;
    overflow-wrap: anywhere;
}
.explore-guest-featured small {
    display: block;
    margin-bottom: 10px;
    color: var(--ink-soft);
    font-size: 12px;
    line-height: 1.45;
}
.explore-guest-featured__cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 999px;
    color: var(--white);
    background: var(--brand-900);
    font-size: 11px;
    font-weight: 800;
}
.explore-guest-featured__cta svg {
    width: 11px;
    height: 11px;
    transition: transform 160ms ease;
}
.explore-guest-featured__button:focus-visible {
    outline: 3px solid var(--brand-100);
    outline-offset: -2px;
}
.explore-guest-row__button {
    display: flex;
    width: 100%;
    align-items: stretch;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    color: inherit;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}
.explore-guest-row .explore-card-cover {
    width: 120px;
    align-self: stretch;
    flex: 0 0 auto;
    aspect-ratio: auto;
    border-radius: 14px;
}
.explore-guest-row__body {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    justify-content: center;
}
.explore-guest-row__meta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
    color: var(--brand-700);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.explore-guest-row__meta svg {
    width: 12px;
    height: 12px;
}
.explore-guest-row strong {
    display: -webkit-box;
    overflow: hidden;
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.32;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.explore-guest-row small {
    display: -webkit-box;
    margin-top: 4px;
    overflow: hidden;
    color: var(--ink-soft);
    font-size: 13px;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.explore-guest-row__button:focus-visible {
    outline: 3px solid var(--brand-100);
    outline-offset: -4px;
}
.explore-article__back {
    min-height: 30px;
    margin-bottom: 16px;
    padding: 0;
    gap: 8px;
    border-radius: 0;
    color: #9a711f;
    background: transparent;
    box-shadow: none;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.13em;
    line-height: 1;
    text-shadow: none;
    transition:
        transform 180ms ease,
        color 180ms ease;
}
.explore-article__back-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 50%;
    color: #fff3b4;
    background: rgba(5, 67, 55, 0.34);
    box-shadow: 0 5px 15px rgba(0, 24, 20, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.explore-article__back-icon .icon {
    width: 15px;
    height: 15px;
    display: block;
    stroke-width: 2.2;
}
.explore-article__back-label {
    white-space: nowrap;
}
.explore-article__back:hover,
.explore-article__back:focus-visible {
    color: #7e5b17;
    background: transparent;
    box-shadow: none;
    transform: translateX(-2px);
}
.explore-article__back:hover .explore-article__back-icon,
.explore-article__back:focus-visible .explore-article__back-icon {
    background: rgba(10, 104, 82, 0.62);
}
.explore-article__back:focus-visible {
    outline: 0;
}
.explore-article__back:focus-visible .explore-article__back-icon {
    outline: 2px solid rgba(8, 116, 93, 0.3);
    outline-offset: 2px;
}
.explore-article__head {
    margin-bottom: 20px;
}
.explore-article__cover {
    display: block;
    width: 100%;
    height: 230px;
    margin: 0 0 18px;
    border-radius: 20px;
    object-fit: cover;
    background: var(--brand-50);
}
.explore-article__head .eyebrow {
    margin-bottom: 7px;
}
.explore-article__head h1 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 26px;
    font-weight: 500;
    line-height: 1.18;
}
.explore-article__head > p:last-child {
    margin: 9px 0 0;
    color: var(--ink-soft);
    line-height: 1.55;
}
.explore-article__jump {
    position: relative;
    top: auto;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 3px;
    margin: 0 0 14px;
    padding: 7px;
    overflow: hidden;
    border: 1px solid var(--brand-100);
    border-radius: 14px;
    background:
        radial-gradient(
            circle at 100% 0,
            color-mix(in srgb, var(--brand-100) 72%, transparent),
            transparent 44%
        ),
        var(--brand-50);
    box-shadow: 0 6px 18px rgba(0, 65, 45, 0.06);
    backdrop-filter: none;
}
.explore-article__jump-head {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    min-height: 27px;
    min-width: 0;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.explore-article__jump-head:focus-visible {
    outline: 2px solid var(--brand-700);
    outline-offset: 2px;
    border-radius: 8px;
}
.explore-article__jump-icon {
    display: grid;
    width: 27px;
    height: 27px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 8px;
    color: var(--white);
    background: var(--brand-700);
    box-shadow: 0 6px 14px rgba(0, 92, 65, 0.16);
}
.explore-article__jump-icon svg {
    width: 14px;
    height: 14px;
}
.explore-article__jump-heading {
    display: grid;
    min-width: 0;
    gap: 0;
}
.explore-article__jump-heading small {
    display: none;
}
.explore-article__jump-heading strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 11px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.explore-article__jump-count {
    display: none;
}
.explore-article__jump-toggle {
    display: grid;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    margin-left: auto;
    place-items: center;
    border-radius: 7px;
    color: var(--brand-700);
    background: color-mix(in srgb, var(--white) 68%, transparent);
}
.explore-article__jump-toggle svg {
    width: 13px;
    height: 13px;
    transform: rotate(180deg);
    transition: transform 220ms ease;
}
.explore-article__jump.is-collapsed .explore-article__jump-toggle svg {
    transform: rotate(0deg);
}
.explore-article__jump-list-shell {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    transition:
        grid-template-rows 240ms cubic-bezier(0.4, 0, 0.2, 1),
        opacity 180ms ease;
}
.explore-article__jump.is-collapsed .explore-article__jump-list-shell {
    grid-template-rows: 0fr;
    opacity: 0;
    pointer-events: none;
}
.explore-article__jump-list {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    overflow: hidden;
}
.explore-article__jump .guide-jump__chip {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    width: 100%;
    min-width: 0;
    min-height: 28px;
    gap: 6px;
    padding: 3px 5px;
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--brand-100) 64%, transparent);
    border-radius: 8px;
    color: var(--ink);
    background: transparent;
    text-align: left;
    white-space: nowrap;
    box-shadow: none;
    transition:
        color 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease,
        transform 120ms ease;
}
.explore-article__jump-number {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 6px;
    color: var(--brand-700);
    background: var(--brand-50);
    font-size: 9px;
    font-variant-numeric: tabular-nums;
    font-weight: 850;
}
.explore-article__jump-label {
    overflow: hidden;
    font-size: 11.5px;
    font-weight: 750;
    line-height: 1.2;
    text-overflow: ellipsis;
}
.explore-article__jump .guide-jump__chip.active {
    border-color: color-mix(in srgb, var(--brand-100) 64%, transparent);
    color: var(--brand-900);
    background: color-mix(in srgb, var(--brand-100) 70%, var(--white));
    box-shadow: inset 3px 0 0 var(--brand-700);
}
.explore-article__jump .guide-jump__chip.active .explore-article__jump-number {
    color: var(--white);
    background: var(--brand-700);
}
.explore-article__jump .guide-jump__chip:focus-visible {
    outline: 3px solid var(--brand-100);
    outline-offset: 2px;
}
.explore-article__body {
    display: grid;
    gap: 18px;
    padding-bottom: 12px;
}
.explore-article__heading {
    scroll-margin-top: 68px;
    padding-top: 4px;
}
.explore-article__heading h2 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 500;
}
.explore-article__text p {
    margin: 0 0 10px;
    color: var(--ink);
    line-height: 1.7;
}
.explore-article__text p:last-child {
    margin-bottom: 0;
}
.explore-article__text ul,
.explore-article__text ol {
    margin: 0;
    padding-left: 21px;
    line-height: 1.7;
}
.explore-article__text li > ul,
.explore-article__text li > ol {
    margin-top: 4px;
}
.explore-article__text ul ul {
    list-style-type: circle;
}
.explore-article__text ul ul ul {
    list-style-type: square;
}
.explore-article__text ol ol {
    list-style-type: lower-alpha;
}
.explore-article__text a {
    color: var(--brand-700);
    font-weight: 750;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}
.explore-article__image {
    margin: 0;
}
.explore-article__image img {
    display: block;
    width: 100%;
    max-height: 380px;
    border-radius: 18px;
    object-fit: cover;
    background: var(--brand-50);
}
.explore-article__image-unavailable {
    display: grid;
    min-height: 180px;
    place-content: center;
    gap: 9px;
    padding: 24px;
    border: 1px dashed var(--brand-300);
    border-radius: 18px;
    background: var(--brand-50);
    color: var(--ink-soft);
    text-align: center;
}
.explore-article__image-unavailable .icon {
    width: 28px;
    height: 28px;
    margin: 0 auto;
    color: var(--brand-700);
}
.explore-article__image img[hidden],
.explore-article__image-unavailable[hidden] {
    display: none;
}
.explore-article__image figcaption {
    margin-top: 7px;
    color: var(--ink-soft);
    font-size: 12px;
    line-height: 1.45;
    text-align: center;
}
.explore-article__map {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--brand-100);
    border-radius: 16px;
    background: var(--brand-50);
}
.explore-article__map > div {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.explore-article__map .role-icon {
    color: var(--brand-700);
}
.explore-article__map strong,
.explore-article__map small {
    display: block;
}
.explore-article__map small {
    margin-top: 3px;
    overflow: hidden;
    color: var(--ink-soft);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.explore-article__button {
    display: flex;
    justify-content: flex-start;
    margin: 24px 0;
}
.explore-article__link-button {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    min-height: 56px;
    max-width: 100%;
    padding: 8px 11px 8px 8px;
    border-radius: 16px;
    color: var(--white);
    background: var(--brand-700);
    box-shadow: var(--shadow-sm);
    font-weight: 800;
    line-height: 1.25;
    text-decoration: none;
    transition:
        transform 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;
}
.explore-article__link-button:hover {
    color: var(--white);
    background: var(--brand-800);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.explore-article__link-button:focus-visible {
    outline: 3px solid var(--brand-300);
    outline-offset: 3px;
}
.explore-article__link-button-icon {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 11px;
    background: color-mix(in srgb, var(--white) 17%, transparent);
}
.explore-article__link-button-icon svg,
.explore-article__link-button-arrow svg {
    width: 18px;
    height: 18px;
}
.explore-article__link-button-label {
    overflow-wrap: anywhere;
}
.explore-article__link-button-arrow {
    display: grid;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    place-items: center;
    margin-left: 4px;
}
.explore-page-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}
.explore-publication-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--ink-soft);
    background: var(--white);
    font-size: 13px;
    font-weight: 750;
}
.explore-publication-status svg {
    width: 17px;
    height: 17px;
}
.explore-publication-status.is-current {
    border-color: var(--brand-100);
    color: var(--brand-700);
    background: var(--brand-50);
}
.explore-publication-status.is-pending {
    border-color: var(--coral-soft);
    color: var(--coral-dark);
    background: var(--coral-soft);
}
@media (prefers-reduced-motion: reduce) {
    .explore-article__link-button {
        transition: none;
    }
    .explore-article__link-button:hover {
        transform: none;
    }
}
.explore-article__callout {
    display: flex;
    gap: 11px;
    padding: 15px;
    border-radius: 16px;
    color: var(--ink);
    background: linear-gradient(135deg, var(--brand-50), var(--sand));
    border: 1px solid var(--brand-100);
}
.explore-article__callout > span {
    flex: 0 0 auto;
    color: var(--brand-700);
}
.explore-article__callout h2 {
    margin: 0 0 5px;
    font-size: 16px;
}
.explore-article__callout p {
    margin: 0;
    line-height: 1.6;
}
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 44px;
    margin: 0 0 10px;
    padding: 0;
    border: 0;
    color: var(--ink-soft);
    background: transparent;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
}
.back-link.explore-article__back,
.back-link.explore-article__back:hover,
.back-link.explore-article__back:focus-visible {
    color: var(--brand-700);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.17em;
}
@media (hover: hover) and (pointer: fine) {
    .explore-admin-card:hover,
    .explore-guest-row__button:hover {
        border-color: var(--brand-700);
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }
    .explore-guest-featured:hover {
        box-shadow: 0 10px 24px rgba(0, 72, 49, 0.12);
        transform: translateY(-2px);
    }
    .explore-guest-featured__button:hover {
        border-color: var(--brand-700);
        box-shadow: none;
        transform: none;
    }
    .explore-admin-card:hover .explore-card-cover img,
    .explore-guest-row__button:hover .explore-card-cover img,
    .explore-guest-featured__button:hover .explore-card-cover img {
        transform: scale(1.025);
    }
    .explore-guest-featured__button:hover .explore-guest-featured__cta svg {
        transform: translateX(3px);
    }
    .explore-article__jump .guide-jump__chip:hover:not(.active) {
        border-color: var(--brand-700);
        background: color-mix(in srgb, var(--white) 74%, transparent);
        box-shadow: none;
        transform: none;
    }
}
@media (max-width: 840px) {
    .explore-composer__layout,
    .explore-inline-editor .explore-composer__layout {
        grid-template-columns: minmax(0, 1fr);
    }
    .explore-composer__preview {
        position: static;
        max-height: none;
    }
    .explore-composer__start {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 640px) {
    .explore-editor-command-bar {
        align-items: stretch;
        flex-direction: column;
    }
    .explore-editor-command-bar__actions {
        justify-content: flex-start;
    }
    .explore-inline-editor .explore-composer__blocks-head {
        top: 218px;
    }
    .explore-page-actions {
        width: 100%;
        justify-content: flex-start;
    }
    .explore-admin-grid {
        grid-template-columns: 1fr;
    }
    .explore-admin-card__actions {
        flex-wrap: wrap;
    }
    .explore-composer__blocks-head {
        flex-direction: column;
    }
    .explore-add-menu {
        width: 100%;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: thin;
    }
    .explore-add-menu .button {
        flex: 0 0 auto;
    }
    .explore-article__head h1 {
        font-size: 22px;
    }
    .explore-article__cover {
        height: 190px;
    }
    .explore-article__jump-list {
        display: grid;
    }
    .explore-article__jump {
        padding: 7px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .explore-featured-carousel__track {
        scroll-behavior: auto;
    }
    .explore-featured-carousel__dot {
        transition: none;
    }
    .explore-admin-card,
    .explore-block-editor,
    .explore-guest-row__button,
    .explore-guest-featured,
    .explore-guest-featured__button,
    .explore-card-cover img,
    .explore-guest-featured__cta svg {
        transition: none;
    }
    .explore-admin-card:hover,
    .explore-guest-row__button:hover,
    .explore-guest-featured:hover,
    .explore-guest-featured__button:hover,
    .explore-admin-card:hover .explore-card-cover img,
    .explore-guest-row__button:hover .explore-card-cover img,
    .explore-guest-featured__button:hover .explore-card-cover img {
        transform: none;
    }
    .explore-article__jump .guide-jump__chip,
    .explore-article__jump-toggle svg,
    .explore-article__jump-list-shell {
        transition: none;
    }
    .explore-article__jump .guide-jump__chip:hover {
        transform: none;
    }
}
@media (max-width: 840px) {
    .guide-kind-picker__options,
    .guide-composer__layout {
        grid-template-columns: 1fr;
    }
    .guide-kind-picker__options {
        gap: 7px;
    }
    .guide-kind-option {
        min-height: 0;
    }
    .guide-composer__preview {
        position: static;
    }
}
@media (max-width: 480px) {
    .guide-locale-tabs {
        flex-wrap: wrap;
    }
    .guide-locale-tab {
        flex: 1 1 calc(50% - 6px);
    }
    .guide-locale-panel__head {
        align-items: flex-start;
        flex-direction: column;
    }
    .guide-locale-panel__head small {
        text-align: left;
    }
}
.guest-day {
    margin-bottom: 24px;
}
.guest-day__title {
    margin-bottom: 10px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
.guest-day__title h2 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 550;
}
.guest-day__title span {
    color: var(--ink-soft);
    font-size: 11px;
}
.schedule-card {
    padding: 16px 16px 18px;
    position: relative;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 12px;
}
.schedule-card::before {
    content: "";
    position: absolute;
    left: 83px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--line-soft);
}
.schedule-card::after {
    content: "";
    position: absolute;
    left: 77px;
    top: 19px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--paper);
    border: 3px solid var(--brand-700);
}
.schedule-card:first-child::before {
    top: 25px;
}
.schedule-card:last-child::before {
    bottom: calc(100% - 25px);
}
.schedule-card:last-child {
    padding-bottom: 2px;
}
.schedule-card__time {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.schedule-card time {
    color: var(--coral-dark);
    font-size: 13px;
    font-weight: 850;
}
.schedule-card__end {
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 700;
}
.schedule-card__end::before {
    content: "– ";
}
.schedule-card h3 {
    margin-bottom: 4px;
    font-family: var(--font-serif);
    font-size: 17px;
    font-weight: 600;
}
.schedule-card__content {
    min-width: 0;
}
.schedule-card__heading {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 6px 8px;
}
.schedule-card__heading h3 {
    flex: 1 1 180px;
    margin: 0;
}
.schedule-card__change-chip {
    min-height: 23px;
    padding: 3px 7px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid #efd5aa;
    border-radius: 999px;
    background: #fff5e5;
    color: #9b5d20;
    font-size: 10px;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
}
.schedule-card__change-chip .icon {
    width: 12px;
    height: 12px;
}
.schedule-card p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 11px;
}
.schedule-card__meta {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.schedule-card__actions {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.schedule-card__primary-action {
    min-height: 44px;
    padding-inline: 16px;
    background: var(--brand-800);
    color: var(--white);
    box-shadow: 0 5px 12px rgba(0, 72, 49, 0.14);
}
.schedule-card__primary-action:hover {
    background: var(--brand-900);
    color: var(--white);
}
.schedule-card__map-hint {
    width: 16px;
    height: 16px;
    display: inline-flex;
    margin: 0 5px 0 0;
    color: var(--brand-700);
    line-height: 1;
    vertical-align: middle;
    transform: translateY(1px);
}
.schedule-card__map-hint .icon {
    width: 16px;
    height: 16px;
}
.schedule-card__route {
    border-color: var(--brand-800);
    background: var(--brand-800);
    color: var(--white);
    box-shadow: 0 5px 12px rgba(0, 72, 49, 0.14);
}
.schedule-card__route .icon {
    width: 16px;
    height: 16px;
}
.schedule-card__details {
    border-color: var(--line);
    background: var(--white);
    color: var(--ink);
}
.schedule-card__map {
    border-color: var(--brand-200);
    background: var(--brand-50);
    color: var(--brand-800);
}
.schedule-card__route:hover {
    background: var(--brand-900);
    color: var(--white);
}
.schedule-card__actions [data-activity-detail] {
    border-color: var(--line);
    background: var(--white);
    color: var(--ink);
}
.schedule-card__actions [data-open-map] {
    border-color: var(--brand-200);
    background: var(--brand-50);
    color: var(--brand-800);
}
.change-note {
    margin-top: 10px;
    padding: 9px 11px;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    border-radius: 9px;
    background: var(--coral-soft);
    color: #8a4e38;
    font-size: 11px;
    font-weight: 650;
}
.change-note > .icon {
    width: 15px;
    height: 15px;
    margin-top: 1px;
    flex: 0 0 15px;
}
.change-note > span {
    min-width: 0;
    line-height: 1.4;
}

.guest-contact-list {
    display: grid;
    overflow: visible;
}
.guest-contact-section {
    margin-bottom: 28px;
}
.guest-contact {
    position: relative;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}
.guest-contact + .guest-contact {
    border-top: 1px solid var(--line-soft);
}
.guest-contact .avatar {
    width: 44px;
    height: 44px;
}
.guest-contact h3 {
    margin: 0 0 1px;
    font-size: 15px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.guest-contact p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 11px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.guest-contact__actions,
.emergency-phone-list {
    display: flex;
    align-items: center;
    gap: 7px;
}
.guest-contact__call {
    min-width: 72px;
    min-height: 40px;
    padding: 8px 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--brand-200);
    border-radius: 11px;
    color: var(--brand-800);
    background: var(--brand-50);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}
.guest-contact__call .icon {
    width: 17px;
    height: 17px;
}
.guest-contact__more {
    position: relative;
}
.guest-contact__more > summary {
    display: flex;
    width: 40px;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 1px solid var(--line);
    border-radius: 11px;
    color: var(--ink-soft);
    background: var(--white);
    font-size: 11px;
    font-weight: 800;
    list-style: none;
    cursor: pointer;
}
.guest-contact__more > summary::-webkit-details-marker {
    display: none;
}
.guest-contact__more > summary .icon {
    width: 13px;
    height: 13px;
    transition: transform 160ms ease;
}
.guest-contact__more[open] > summary {
    border-color: var(--brand-700);
    color: var(--brand-800);
    background: var(--brand-50);
}
.guest-contact__more[open] > summary .icon {
    transform: rotate(180deg);
}
.guest-contact__number-menu {
    position: absolute;
    z-index: 3;
    top: calc(100% + 7px);
    right: 0;
    width: min(250px, calc(100vw - 64px));
    padding: 7px;
    display: grid;
    gap: 4px;
    border: 1px solid var(--brand-100);
    border-radius: 13px;
    background: var(--white);
    box-shadow: var(--shadow-md);
}
.guest-contact__number-menu a {
    min-height: 42px;
    padding: 9px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 9px;
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}
.guest-contact__number-menu a:hover,
.guest-contact__number-menu a:focus-visible {
    background: var(--brand-50);
    outline: 0;
}
.guest-contact__number-menu .icon {
    width: 16px;
    height: 16px;
    color: var(--brand-700);
}
.emergency-phone-list {
    justify-content: flex-start;
}
.emergency-phone-list .button {
    min-height: 46px;
}
.emergency-panel {
    margin-bottom: 28px;
    padding: 18px;
    border-radius: 18px;
    background: var(--danger-soft);
}
.emergency-panel p {
    margin-bottom: 12px;
    color: #7c5551;
    font-size: 12px;
}
/* Shared "help hub" card: eyebrow + count badge row, then a colored icon
   aligned beside the title and description, followed by a full-width button. Used for both the
   emergency-contacts gateway and the quick-translate entry point on the
   guest Help page so the two read as one family with only the accent color
   (coral vs brand green) telling them apart. */
.guest-help-card {
    margin: 0 0 20px;
    padding: 18px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: 12px;
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
}
.guest-help-card__head {
    grid-column: 1 / -1;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.guest-help-card__head .eyebrow {
    margin: 0;
}
.guest-help-card__badge {
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.6);
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}
.guest-help-card__icon {
    width: 42px;
    height: 42px;
    grid-column: 1;
    grid-row: 2 / span 2;
    align-self: start;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: var(--white);
}
.guest-help-card__icon .icon {
    width: 21px;
    height: 21px;
}
.guest-help-card h2 {
    grid-column: 2;
    grid-row: 2;
    margin: 0 0 6px;
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 550;
    color: var(--ink);
}
.guest-help-card p:not(.eyebrow) {
    grid-column: 2;
    grid-row: 3;
    margin: 0 0 16px;
    color: var(--ink-soft);
    font-size: 13px;
    line-height: 1.5;
}
.guest-help-card__button {
    width: 100%;
    min-height: 48px;
    grid-column: 1 / -1;
    grid-row: 4;
    justify-content: center;
    white-space: nowrap;
}
.guest-help-card--danger {
    background: var(--danger-soft);
}
.guest-help-card--danger .eyebrow,
.guest-help-card--danger .guest-help-card__badge {
    color: var(--danger);
}
.guest-help-card--danger .guest-help-card__icon {
    background: var(--danger);
}
.guest-help-card--danger {
    margin-bottom: 14px;
    padding: 13px 14px;
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 10px;
    border-radius: 16px;
}
.guest-help-card--danger .guest-help-card__head {
    margin-bottom: 7px;
}
.guest-help-card--danger .guest-help-card__icon {
    width: 34px;
    height: 34px;
    grid-row: 2 / span 2;
    border-radius: 10px;
}
.guest-help-card--danger .guest-help-card__icon .icon {
    width: 17px;
    height: 17px;
}
.guest-help-card--danger h2 {
    margin: 0 0 7px;
    font-size: 16px;
    line-height: 1.15;
}
.guest-help-card--danger .guest-help-card__button {
    width: auto;
    min-height: 34px;
    grid-column: 2;
    grid-row: 3;
    justify-self: start;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
}
.guest-help-card--danger .guest-help-card__button .icon {
    width: 15px;
    height: 15px;
}
.guest-shell--help .guest-page-head {
    margin: 0 -18px;
    padding: 14px 28px 36px;
}
.guest-shell--help .guest-page-head h1 {
    margin-bottom: 10px;
}
.guest-shell--help .guest-page-head > p:last-child {
    max-width: 230px;
}
.guest-help-sheet {
    position: relative;
    z-index: 2;
    margin: -22px 0 0;
    padding: 20px 24px 0;
    border: 1px solid rgba(219, 214, 201, 0.78);
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow:
        0 -10px 28px rgba(30, 52, 46, 0.11),
        0 18px 34px rgba(30, 52, 46, 0.12);
}
.guest-shell--help .guest-help-sheet > .guest-section:first-child {
    margin-top: 0;
}
.guest-shell--help .guest-help-card {
    margin-bottom: 12px;
    padding: 13px 14px;
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 7px;
    border-radius: 16px;
}
.guest-shell--help .guest-help-card__head {
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 0;
}
.guest-shell--help .guest-help-card__icon {
    width: 34px;
    height: 34px;
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    border-radius: 10px;
}
.guest-shell--help .guest-help-card__icon .icon {
    width: 17px;
    height: 17px;
}
.guest-shell--help .guest-help-card h2 {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    margin: 0;
    font-size: 16px;
    line-height: 1.2;
}
.guest-shell--help .guest-help-card__button {
    width: auto;
    min-height: 34px;
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
}
.guest-shell--help .guest-help-card__button .icon {
    width: 15px;
    height: 15px;
}
.guest-shell--help .guest-help-card--danger .guest-help-card__button {
    grid-column: 2;
}
.guest-shell--help .guest-help-sheet > .guest-section,
.guest-shell--help .guest-help-sheet > .guest-support-cta {
    margin-bottom: 16px;
}
.guest-emergency-cta {
    position: fixed;
    z-index: 39;
    right: 50%;
    bottom: calc(92px + env(safe-area-inset-bottom));
    width: min(568px, calc(100% - 112px));
    margin: 0;
    transform: translateX(50%);
}
.guest-emergency-cta__button {
    width: 100%;
    min-height: 48px;
    padding: 10px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 14px;
    background: #004b40;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow: 0 8px 22px rgba(0, 75, 64, 0.28);
    backdrop-filter: blur(10px);
    font-size: 15px;
    font-weight: 800;
}
.guest-emergency-cta__button .icon {
    width: 19px;
    height: 19px;
}
@media (max-height: 740px) {
    .guest-shell--help .guest-page-head {
        padding-bottom: 24px;
    }
}
@media (max-width: 720px) {
    .guest-emergency-cta {
        width: min(576px, calc(100% - 104px));
    }
}
@media (max-width: 390px) {
    .guest-shell--help .guest-help-card--brand {
        grid-template-columns: 34px minmax(0, 1fr);
        grid-template-rows: auto auto auto;
    }
    .guest-shell--help .guest-help-card--brand .guest-help-card__button {
        grid-column: 2;
        grid-row: 3;
    }
    .guest-shell--help .guest-page-head {
        padding-right: 22px;
        padding-left: 22px;
    }
    .guest-help-sheet {
        padding-right: 20px;
        padding-left: 20px;
    }
    .guest-emergency-cta {
        width: calc(100% - 96px);
    }
}
.emergency-contact-list {
    display: grid;
    gap: 8px;
}
.emergency-contact {
    min-height: 58px;
    padding: 10px 10px 10px 12px;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(194, 71, 70, 0.2);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.48);
}
.emergency-contact__head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.emergency-contact__icon {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--danger);
    background: var(--danger-soft);
}
.emergency-contact__icon .icon {
    width: 17px;
    height: 17px;
}
.emergency-contact strong,
.emergency-contact small {
    display: block;
}
.emergency-contact strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.emergency-contact small {
    margin-top: 2px;
    overflow: hidden;
    color: #7c5551;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.emergency-contact .emergency-phone-list {
    justify-content: flex-end;
}
.emergency-contact .button {
    min-height: 44px;
    padding-inline: 11px;
    border-radius: 10px;
    white-space: nowrap;
}
.guest-contact__more--emergency {
    position: static;
}
.emergency-contact:has(.guest-contact__more--emergency[open]) {
    padding-bottom: 64px;
}
.guest-contact__more--emergency .guest-contact__number-menu {
    width: auto;
    min-width: 0;
    padding: 5px;
    top: auto;
    right: 10px;
    bottom: 9px;
    left: 12px;
}
.guest-contact__more--emergency .guest-contact__number-menu a {
    min-height: 40px;
}
.emergency-contact-list--drawer {
    gap: 12px;
}
.emergency-contact-list--drawer .emergency-contact {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(179, 67, 67, 0.16);
    border-radius: 16px;
    background: linear-gradient(160deg, var(--white), #fff6f5 130%);
    box-shadow: 0 6px 16px rgba(179, 67, 67, 0.08);
}
.emergency-contact-list--drawer .emergency-contact__icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
}
.emergency-contact-list--drawer .emergency-contact__icon .icon {
    width: 20px;
    height: 20px;
}
.emergency-contact-list--drawer .emergency-contact strong {
    font-size: 16px;
    font-weight: 750;
}
.emergency-contact-list--drawer .emergency-contact small {
    margin-top: 3px;
    color: var(--ink-soft);
    font-size: 12.5px;
}
.emergency-contact-list--drawer .emergency-contact strong,
.emergency-contact-list--drawer .emergency-contact small {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
}
.emergency-contact-list--drawer .emergency-phone-list {
    justify-content: flex-start;
    flex-wrap: wrap;
}
.emergency-contact-list--drawer .emergency-contact .button {
    min-height: 42px;
    padding: 7px 13px;
    border-radius: 12px;
    box-shadow: 0 6px 14px rgba(179, 67, 67, 0.22);
    font-size: 13px;
    line-height: 1.1;
    letter-spacing: 0.01em;
}
.emergency-contact-list--drawer .emergency-contact .button .icon {
    width: 16px;
    height: 16px;
}
.emergency-contact-note {
    margin: 12px 2px 0;
    color: var(--ink-soft);
    font-size: 12.5px;
    line-height: 1.5;
}
.guest-list-more {
    min-height: 46px;
    margin-top: 10px;
}
.guest-list-more .icon {
    width: 16px;
    height: 16px;
}
.guest-directory-preview,
.guest-issues-preview-card {
    overflow: hidden;
    padding: 0;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 24px rgba(39, 76, 67, 0.08);
}
.guest-directory-preview .guest-contact-list {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.guest-directory-preview .guest-list-more,
.guest-issues-preview-card .guest-list-more {
    width: calc(100% - 24px);
    min-height: 42px;
    margin: 0 12px 12px;
    border-radius: 10px;
}
.guest-issues-preview-card .guest-issues--preview {
    margin-top: 0;
    gap: 0;
}
.guest-issues-preview-card .guest-issue--preview {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.guest-issues-preview-card .guest-issue--preview + .guest-issue--preview {
    border-top: 1px solid var(--line-soft);
}
.guest-issues-preview-card .guest-issue--preview:hover,
.guest-issues-preview-card .guest-issue--preview:focus-visible {
    border-color: var(--line-soft);
    background: var(--brand-50);
    box-shadow: none;
}
.guest-issues--drawer {
    margin-top: 0;
}

.issue-form {
    padding: 20px;
}
.issue-form--drawer {
    padding: 0;
}
.issue-form__intro {
    margin: 0 0 20px;
    color: var(--ink-soft);
    font-size: 13px;
    line-height: 1.55;
}
.guest-support-cta {
    width: 100%;
    margin: 0 0 32px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.guest-support-cta__icon {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #b75337;
    background: var(--coral-soft);
}
.guest-support-cta__icon .icon {
    width: 22px;
    height: 22px;
}
.guest-support-cta__copy {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.guest-support-cta__copy strong {
    font-size: 15px;
    font-weight: 750;
    color: var(--ink);
}
.guest-support-cta__copy span {
    color: var(--ink-soft);
    font-size: 12px;
    line-height: 1.4;
}
.guest-support-cta > .icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--ink-soft);
}
.guest-support-cta--translate {
    margin: 0;
    border-color: rgba(88, 158, 134, 0.2);
    background: linear-gradient(135deg, rgba(229, 247, 239, 0.98), rgba(246, 242, 255, 0.98));
    box-shadow: 0 8px 22px rgba(39, 91, 76, 0.09);
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}
.guest-support-cta--translate .guest-support-cta__icon {
    color: #08745d;
    background: rgba(207, 239, 226, 0.96);
}
.guest-support-cta--translate:hover,
.guest-support-cta--translate:focus-visible {
    border-color: rgba(42, 139, 108, 0.35);
    box-shadow: 0 11px 26px rgba(39, 91, 76, 0.14);
    transform: translateY(-1px);
}
.guest-support-cta--translate:focus-visible {
    outline: 2px solid rgba(8, 116, 93, 0.3);
    outline-offset: 2px;
}
.issue-category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.category-choice {
    position: relative;
}
.category-choice input {
    position: absolute;
    opacity: 0;
}
.category-choice label {
    min-height: 78px;
    padding: 10px 7px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--white);
    font-size: 10px;
    font-weight: 750;
    text-align: center;
    cursor: pointer;
}
.category-choice label .icon {
    color: var(--brand-700);
}
.category-choice input:checked + label {
    border-color: var(--brand-700);
    background: var(--brand-50);
    box-shadow: inset 0 0 0 1px var(--brand-700);
}
.severity-choice {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
}
.severity-choice .choice label {
    justify-content: center;
    text-align: center;
}
.severity-choice .urgent input:checked + label {
    border-color: var(--danger);
    background: var(--danger-soft);
    box-shadow: inset 0 0 0 1px var(--danger);
}
.guest-issues {
    margin-top: 18px;
    display: grid;
    gap: 10px;
}
.guest-issues--preview {
    margin-top: 14px;
}
.guest-issue {
    padding: 15px;
}
.guest-issue--preview {
    width: 100%;
    display: grid;
    gap: 9px;
    appearance: none;
    border: 1px solid var(--line);
    color: var(--ink);
    background: var(--white);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.guest-issue--preview:hover,
.guest-issue--preview:focus-visible {
    border-color: var(--brand-300);
    box-shadow: var(--shadow-md);
    outline: 0;
}
.guest-issue--preview .guest-issue__head {
    width: 100%;
    margin: 0;
}
.guest-issue__description {
    display: block;
    color: var(--ink-soft);
    font-size: 12px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.guest-issue__preview-status {
    padding-top: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 1px solid var(--line-soft);
    color: var(--ink-muted);
    font-size: 11px;
    font-weight: 650;
}
.guest-issue__preview-status .tag {
    flex: 0 0 auto;
}
.guest-issue__preview-status .icon {
    width: 15px;
    height: 15px;
    margin-left: auto;
    color: var(--brand-700);
}
.guest-issue__head {
    margin-bottom: 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.guest-issue h3 {
    margin: 0;
    font-size: 13px;
}
.guest-issue p {
    margin: 0 0 10px;
    color: var(--ink-soft);
    font-size: 11px;
}
.guest-issue__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    min-height: 32px;
    margin: 16px 0 10px;
}
/* Read-only category/severity context shown in the edit drawer. */
.issue-edit-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}
.issue-edit-meta > div {
    flex: 1 1 140px;
    display: grid;
    gap: 3px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--brand-50);
}
.issue-edit-meta span {
    color: var(--ink-soft);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.issue-edit-meta strong {
    font-size: 14px;
}
.issue-edit-meta + .field-help {
    margin: 2px 0 18px;
}
.guest-issue__more {
    margin-top: 12px;
    border-top: 1px solid var(--line-soft);
}
.guest-issue__more > summary {
    padding: 10px 2px 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    list-style: none;
    color: var(--brand-700);
    font-size: 11px;
    font-weight: 750;
    cursor: pointer;
    user-select: none;
}
.guest-issue__more > summary::-webkit-details-marker {
    display: none;
}
.guest-issue__more > summary .icon {
    width: 15px;
    height: 15px;
    transition: transform 180ms ease;
}
.guest-issue__more[open] > summary .icon {
    transform: rotate(180deg);
}
.guest-issue__timeline {
    margin: 6px 0 2px;
    padding: 0 0 0 3px;
    position: relative;
    display: grid;
    gap: 14px;
    list-style: none;
}
.guest-issue__timeline::before {
    content: "";
    position: absolute;
    top: 7px;
    bottom: 7px;
    left: 7px;
    width: 1.5px;
    background: rgba(7, 130, 82, 0.2);
}
.guest-issue__timeline li {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--ink-soft);
    font-size: 13px;
}
.guest-issue__timeline li > span {
    width: 10px;
    height: 10px;
    margin-top: 4px;
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    border: 2px solid var(--white);
    border-radius: 999px;
    background: var(--brand-600);
    box-shadow: 0 0 0 2px rgba(7, 130, 82, 0.16);
}
.guest-issue__timeline strong,
.guest-issue__timeline small {
    display: block;
}
.guest-issue__timeline strong {
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
}
.guest-issue__timeline small {
    margin-top: 2px;
    color: var(--ink-muted);
    font-size: 12px;
}
.guest-issue__timeline-empty {
    color: var(--ink-muted);
    font-size: 12px;
}
.guest-issue__detail {
    margin: 10px 0 2px;
    display: grid;
    gap: 18px;
}
.guest-issue__detail-section {
    display: grid;
    gap: 10px;
}
.guest-issue__detail-section h4 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--brand-700);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.guest-issue__detail-section h4::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: var(--brand-600);
}
.guest-issue__update {
    margin: 0;
    padding: 14px 16px;
    border: 1px solid rgba(7, 130, 82, 0.14);
    border-radius: 14px;
    background: linear-gradient(160deg, var(--brand-50), var(--white) 120%);
    box-shadow: 0 4px 14px rgba(7, 130, 82, 0.07);
    color: var(--ink);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
}
.issue-progress {
    margin-top: 4px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}
.issue-progress span {
    padding-top: 7px;
    position: relative;
    color: #99a09d;
    font-size: 8px;
    font-weight: 800;
    text-align: center;
}
.issue-progress span::before {
    height: 3px;
    position: absolute;
    inset: 0 2px auto;
    border-radius: 3px;
    background: #e2e5e0;
    content: "";
}
.issue-progress span.done {
    color: var(--brand-700);
}
.issue-progress span.done::before {
    background: var(--brand-700);
}

.survey-shell {
    min-height: 100vh;
    background: var(--paper);
}
.survey-topbar {
    min-height: 68px;
    padding: 0 max(18px, env(safe-area-inset-left));
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line-soft);
}
.survey-container {
    width: min(680px, 100%);
    margin: 0 auto;
    padding: 34px 20px 80px;
}
.survey-progress {
    margin-bottom: 34px;
}
.survey-progress__meta {
    margin-bottom: 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 700;
}
.survey-step h1 {
    margin-bottom: 8px;
    font-family: var(--font-serif);
    font-size: clamp(30px, 7vw, 40px);
    font-weight: 500;
}
.survey-step > p {
    margin-bottom: 28px;
    color: var(--ink-soft);
}
.survey-form {
    display: grid;
    gap: 20px;
}
.survey-step > .update-banner {
    margin-bottom: 26px;
}
.survey-actions {
    margin-top: 34px;
    padding-top: 18px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 10px;
    border-top: 1px solid var(--line-soft);
}
.autosave-state {
    color: var(--ink-soft);
    font-size: 10px;
}

/* Guest detail polish: preserve a calm, legible touch layout under 430px. */
.guest-hero {
    padding: 26px;
}
.guest-hero time {
    line-height: 1.45;
}
.guest-hero__location {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    line-height: 1.45;
}
.guest-hero__location .icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}
.guest-hero__location span {
    min-width: 0;
    overflow-wrap: anywhere;
}
.guest-section__head {
    gap: 12px;
}
.guest-section__head button,
.guest-section__head a {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    white-space: nowrap;
}
.pickup-card {
    padding: 20px;
    gap: 17px;
}
.pickup-details {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 7px 13px;
}
.pickup-details span {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    line-height: 1.35;
}
.pickup-details span .icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}
.pickup-details span:last-child {
    overflow-wrap: anywhere;
}
.help-grid {
    gap: 12px;
}
.help-card {
    min-height: 146px;
    padding: 18px;
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    align-items: start;
    border-radius: 19px;
    text-align: left;
}
.help-card > span:first-child {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--brand-50);
}
.help-card > span:last-child {
    align-self: end;
    min-width: 0;
}
.help-card strong {
    font-size: 14px;
    line-height: 1.35;
}
.help-card small {
    min-height: 16px;
    font-size: 11px;
}
.help-card--emergency {
    background: linear-gradient(145deg, #fffafa, #fff5f2);
}
.help-card--emergency > span:first-child {
    background: #fff0ed;
}
.survey-actions > div:first-child {
    min-width: 0;
}
.autosave-state {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.35;
    white-space: nowrap;
}
.autosave-state .icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}
.guest-profile-card {
    padding: 22px;
    overflow: hidden;
    position: relative;
}
.guest-profile-card::before {
    width: 150px;
    height: 150px;
    position: absolute;
    top: -76px;
    right: -52px;
    border: 1px solid var(--brand-100);
    border-radius: 50%;
    box-shadow: 0 0 0 26px rgba(232, 247, 239, 0.58);
    content: "";
    pointer-events: none;
}
.guest-profile-card__identity {
    min-width: 0;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 13px;
}
.guest-profile-card__avatar {
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    font-size: 15px;
    box-shadow: 0 0 0 5px var(--brand-50);
}
.guest-profile-card__name {
    min-width: 0;
    flex: 1;
}
/* Icon-only logout pinned to the top-right of the identity row. */
.guest-profile-card__logout {
    flex: 0 0 auto;
    align-self: flex-start;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 12px;
}
.guest-profile-card__logout .icon {
    width: 18px;
    height: 18px;
}
.guest-profile-card__identity .eyebrow {
    margin: 0 0 3px;
    font-size: 9px;
}
.guest-profile-card__identity h2 {
    margin: 0 0 3px;
    font-size: 18px;
    line-height: 1.25;
}
.guest-profile-card__identity p:last-child {
    margin: 0;
    color: var(--ink-soft);
    font-size: 12px;
}
.guest-profile-card__divider {
    height: 1px;
    margin: 20px 0 15px;
    background: var(--line-soft);
}
.guest-profile-card__meta {
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.guest-profile-card__meta > div {
    min-width: 0;
    padding: 12px;
    display: grid;
    gap: 6px;
    border: 1px solid var(--line-soft);
    border-radius: 13px;
    background: rgba(250, 251, 248, 0.82);
}
.guest-profile-card__meta span {
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 750;
}
.guest-profile-card__meta strong {
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.guest-profile-card__actions {
    margin-top: 4px;
    position: relative;
    z-index: 1;
}
.guest-profile-card__actions .button {
    min-height: 44px;
}
/* The profile action and the optional onboarding shortcut are separate actions,
   not a single button group. */
.guest-profile-card > .button + .button {
    margin-top: 12px;
}

/* Guest experience: mobile-first, calm, and resilient on narrow screens. */
.guest-topbar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.guest-sync-button {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.72);
    color: var(--brand-700);
    cursor: pointer;
    transition:
        background 180ms ease,
        border-color 180ms ease,
        transform 180ms ease;
}
.guest-sync-button:hover {
    border-color: var(--brand-700);
    background: var(--brand-50);
}
.guest-sync-button:active {
    transform: scale(0.94);
}
.guest-sync-button .icon {
    width: 17px;
    height: 17px;
}
.guest-sync-button.is-loading .icon {
    animation: guest-refresh-spin 800ms linear infinite;
}
.guest-topbar__actions .guest-accessibility-toggle,
.guest-topbar__actions .guest-sync-button,
.guest-topbar__actions .locale-switch--flags {
    height: 38px;
    min-height: 38px;
    box-sizing: border-box;
    border-radius: 10px;
}
.guest-topbar__actions .guest-sync-button {
    width: 38px;
}
.guest-topbar__actions .locale-switch--flags {
    padding: 0;
}
.guest-topbar__actions .locale-select__trigger {
    height: 36px;
    min-height: 36px;
    padding: 5px 8px;
    box-sizing: border-box;
    border-radius: 9px;
}
.guest-main > * {
    animation: guest-content-enter 260ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}
.guest-main > :nth-child(2) {
    animation-delay: 45ms;
}
.guest-main > :nth-child(3) {
    animation-delay: 80ms;
}
.guest-main > :nth-child(4) {
    animation-delay: 115ms;
}
.guest-main > :nth-child(5) {
    animation-delay: 150ms;
}
@keyframes guest-content-enter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes guest-refresh-spin {
    to {
        transform: rotate(360deg);
    }
}
.guest-section__meta {
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 700;
}
.guest-timeline {
    padding: 5px 18px;
}
.guest-timeline .timeline-item {
    min-width: 0;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 0;
}
.guest-timeline .timeline-time {
    padding-left: 0;
    color: var(--coral-dark);
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
}
.guest-timeline .timeline-item > div {
    min-width: 0;
}
.guest-timeline .timeline-item strong {
    overflow-wrap: anywhere;
}
.guest-timeline .timeline-item p {
    overflow-wrap: anywhere;
    line-height: 1.45;
}
.guest-hero {
    isolation: isolate;
}
.guest-hero::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 31, 22, 0.18), rgba(0, 31, 22, 0.84));
    content: "";
}
.guest-hero__actions .button {
    min-height: 44px;
}
@media (prefers-reduced-motion: reduce) {
    .guest-hero__video {
        display: none;
    }
}
.help-card {
    min-height: 126px;
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Lift only on real pointer devices so a touch tap doesn't leave a stuck hover. */
@media (hover: hover) and (pointer: fine) {
    .help-card:hover {
        border-color: var(--brand-300);
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }
}
.help-card:active {
    transform: scale(0.97);
}
.help-card small {
    margin-top: 5px;
    display: block;
    font-size: 11px;
    line-height: 1.45;
}
.keep-link {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.5;
}
.keep-link > .icon {
    flex: 0 0 auto;
    margin-top: 1px;
}
.keep-link strong {
    display: block;
    margin-bottom: 1px;
    color: var(--ink);
    font-size: 12px;
}
.guest-day-tabs {
    margin: 0 -2px 18px;
    padding: 10px 2px 10px;
    position: sticky;
    top: calc(68px + env(safe-area-inset-top));
    z-index: 20;
    background: rgba(245, 242, 235, 0.92);
    border-bottom: 1px solid var(--line-soft);
    backdrop-filter: blur(14px);
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.guest-day-tabs::-webkit-scrollbar {
    display: none;
}
.guest-day-tab {
    min-width: 88px;
    min-height: 54px;
    padding: 8px 11px;
    display: grid;
    align-content: center;
    gap: 2px;
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.62);
    color: var(--ink-soft);
    text-align: left;
    cursor: pointer;
    transition:
        background 180ms ease,
        border-color 180ms ease,
        color 180ms ease,
        transform 180ms ease;
}
.guest-day-tab span {
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.05em;
}
.guest-day-tab strong {
    color: inherit;
    font-size: 12px;
}
.guest-day-tab.active {
    border-color: var(--brand-700);
    background: var(--brand-900);
    color: white;
    box-shadow: inset 0 -3px 0 var(--brand-300);
}
.guest-day-tab:active {
    transform: scale(0.97);
}
.guest-day__title {
    align-items: flex-end;
    gap: 14px;
}
.guest-day__title > div {
    min-width: 0;
}
.guest-day__title .eyebrow {
    margin: 0 0 3px;
    display: block;
}
.guest-day__title > span {
    max-width: 128px;
    text-align: right;
    line-height: 1.4;
}
.schedule-card {
    grid-template-columns: 62px minmax(0, 1fr);
}
.schedule-card time {
    white-space: nowrap;
}
.schedule-card h3,
.schedule-card p {
    overflow-wrap: anywhere;
}
.guest-contact .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.survey-stepper {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
}
.survey-stepper__item {
    min-width: 0;
    min-height: 58px;
    padding: 6px 3px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 4px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ink-soft);
    cursor: pointer;
    transition:
        background 180ms ease,
        color 180ms ease,
        transform 180ms ease;
}
.survey-stepper__item > span {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--white);
    color: inherit;
    font-size: 10px;
    font-weight: 850;
}
.survey-stepper__item > span .icon {
    width: 13px;
    height: 13px;
}
.survey-stepper__item small {
    width: 100%;
    overflow: hidden;
    font-size: 8px;
    font-weight: 750;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.survey-stepper__item.done,
.survey-stepper__item.active {
    color: var(--brand-800);
}
.survey-stepper__item.done > span {
    border-color: var(--brand-300);
    background: var(--brand-100);
}
.survey-stepper__item.active {
    background: var(--brand-50);
}
.survey-stepper__item.active > span {
    border-color: var(--brand-700);
    background: var(--brand-900);
    color: white;
    box-shadow: 0 4px 10px rgba(0, 72, 49, 0.18);
}
.survey-stepper__item:active {
    transform: scale(0.95);
}

/* --- Survey step & stepper motion ------------------------------------
   Bố cục dựng lại toàn bộ innerHTML mỗi bước, nên animation gắn vào phần
   tử mới sẽ tự chạy khi được chèn. Lớp survey-container--stepping chỉ
   xuất hiện khi thật sự chuyển bước (không phải render cùng bước). */
.survey-step {
    animation: survey-fade-in 260ms ease-out both;
}
.survey-container--forward .survey-step {
    animation: survey-slide-forward 340ms cubic-bezier(0.22, 0.72, 0.28, 1) both;
}
.survey-container--back .survey-step {
    animation: survey-slide-back 340ms cubic-bezier(0.22, 0.72, 0.28, 1) both;
}
@keyframes survey-fade-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes survey-slide-forward {
    from {
        opacity: 0;
        transform: translateX(32px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes survey-slide-back {
    from {
        opacity: 0;
        transform: translateX(-32px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
/* Thanh tiến trình chạy mượt từ % cũ sang % mới (JS đặt width ban đầu bằng
   inline style rồi đổi sang width đích ở frame sau — xem renderSurvey()). */
.survey-progress .progress-fill {
    transition: width 450ms cubic-bezier(0.22, 0.72, 0.28, 1);
}
/* Nút bước đang active nảy nhẹ; các bước đã xong hiện dấu tick mượt. */
.survey-container--stepping .survey-stepper__item.active > span {
    animation: survey-node-pop 380ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.survey-container--stepping .survey-stepper__item.done > span .icon {
    animation: survey-node-check 320ms ease-out both;
}
@keyframes survey-node-pop {
    0% {
        transform: scale(0.55);
    }
    60% {
        transform: scale(1.14);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes survey-node-check {
    from {
        opacity: 0;
        transform: scale(0.3);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.completion-page {
    min-height: 100vh;
    background: var(--sand);
}
.completion-hero {
    min-height: 410px;
    padding: 34px 22px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    color: white;
    /* Brand gradient is the instant placeholder shown under the video while it
       loads (weak network) — the video paints on top once ready. */
    background:
        linear-gradient(180deg, rgba(0, 40, 29, 0.32), rgba(0, 40, 29, 0.94)),
        linear-gradient(150deg, var(--brand-700), var(--brand-950));
}
.completion-hero__video {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
    object-fit: cover;
    pointer-events: none;
}
/* Dark scrim over the video so the white heading stays readable. */
.completion-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0, 40, 29, 0.3), rgba(0, 40, 29, 0.82));
    pointer-events: none;
}
/* Shimmer placeholder until the video decodes. */
.completion-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        100deg,
        rgba(255, 255, 255, 0) 20%,
        rgba(255, 255, 255, 0.16) 50%,
        rgba(255, 255, 255, 0) 80%
    );
    background-size: 220% 100%;
    animation: asset-shimmer 1.5s ease-in-out infinite;
    opacity: 1;
    transition: opacity 420ms ease;
    pointer-events: none;
}
.completion-hero.is-media-ready::before {
    opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
    .completion-hero::before {
        animation: none;
    }
    .completion-hero__video {
        display: none;
    }
}
.completion-hero__content {
    width: min(620px, 100%);
    position: relative;
    z-index: 2;
    margin: 0 auto;
}
/* Springy pop-in for the countdown number on the Thank-You page. */
.countdown-number {
    animation: countdown-pop 460ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes countdown-pop {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ---- Guest interaction polish ----
   Tactile press feedback everywhere (mobile), and hover lifts gated to real
   pointer devices so a touch tap never leaves a stuck :hover state. */
.category-choice label,
.chip-choice label,
.guest-issue__more > summary {
    transition:
        transform 120ms ease,
        border-color 160ms ease,
        background 160ms ease,
        color 160ms ease;
}
.category-choice label:active,
.chip-choice label:active,
.guest-issue__more > summary:active,
.guest-main .button:active,
.survey-container .button:active,
.completion-body .button:active,
.guest-profile-card__logout:active {
    transform: scale(0.96);
}
.guest-issue,
.pickup-card {
    transition:
        box-shadow 200ms ease,
        transform 180ms ease;
}
@media (hover: hover) and (pointer: fine) {
    .guest-issue:hover,
    .pickup-card:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }
}
.completion-hero h1 {
    margin-bottom: 10px;
    font-family: var(--font-serif);
    font-weight: 500;
}
.completion-hero p {
    color: rgba(255, 255, 255, 0.76);
}
.completion-body {
    width: min(620px, 100%);
    margin: -18px auto 0;
    padding: 0 18px 70px;
    position: relative;
    /* Sits above the hero's video/scrim layers (z-index 0/1) so the card that
       overlaps the hero bottom (-18px) is never covered by the video overlay. */
    z-index: 2;
}
.countdown-card {
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 16px;
}
.countdown-card strong {
    display: block;
    font-family: var(--font-serif);
    font-size: 25px;
}
.countdown-number {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: var(--brand-900);
    color: white;
    font-family: var(--font-serif);
    font-size: 27px;
}
.keep-link {
    margin-top: 14px;
    padding: 15px;
    border-radius: 13px;
    background: var(--warning-soft);
    color: #7d633e;
    font-size: 12px;
}

.offline-banner {
    padding: 8px 14px;
    position: sticky;
    z-index: 50;
    top: 0;
    background: var(--warning-soft);
    color: var(--warning);
    font-size: 11px;
    font-weight: 750;
    text-align: center;
}
.error-page {
    min-height: 100vh;
    padding: 30px;
    display: grid;
    place-content: center;
    justify-items: center;
    background: var(--sand);
    text-align: center;
}
.error-page .brand-mark {
    margin-bottom: 20px;
}
.error-page p {
    max-width: 440px;
    color: var(--ink-soft);
}

@media (max-width: 1180px) {
    .kpi-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .contact-grid,
    .report-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 901px) and (max-height: 720px) {
    .auth-panel {
        padding-top: 38px;
        padding-bottom: 56px;
        place-content: start center;
    }
}

@media (max-width: 900px) {
    .report-assurance {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .report-assurance__stats {
        grid-column: 1 / -1;
        padding-left: 60px;
    }
    .report-principles {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    :root {
        --sidebar: 224px;
    }
    .auth-page {
        grid-template-columns: 1fr;
    }
    .auth-story {
        min-height: 370px;
        padding: 38px;
    }
    .auth-copy h1 {
        font-size: 44px;
    }
    .auth-panel {
        padding: 45px 24px;
    }
    .dashboard-grid,
    .itinerary-layout,
    .ops-hero {
        grid-template-columns: 1fr;
    }
    .board-grid {
        grid-template-columns: 1fr;
    }
    .charts-grid {
        grid-template-columns: 1fr;
    }
    .insight-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 720px) {
    .desktop-only {
        display: none !important;
    }
    .mobile-only {
        display: initial;
    }
    .staff-shell {
        padding: 0;
        padding-bottom: 74px;
    }
    .sidebar,
    .staff-topbar,
    .sidebar-collapse-toggle {
        display: none;
    }
    .mobile-topbar {
        height: 62px;
        padding: 0 16px;
        position: sticky;
        z-index: 35;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid var(--line-soft);
        background: rgba(255, 255, 255, 0.93);
        backdrop-filter: blur(16px);
    }
    .mobile-topbar .brand-mark {
        width: 34px;
        height: 34px;
    }
    .mobile-topbar .language-picker__trigger {
        min-height: 38px;
        padding-inline: 8px;
    }
    .report-assurance {
        padding: 15px;
        grid-template-columns: auto minmax(0, 1fr);
    }
    .report-assurance__stats {
        padding-left: 0;
    }
    .pagination {
        align-items: flex-start;
        flex-direction: column;
    }
    .pagination__controls {
        width: 100%;
        justify-content: space-between;
    }
    .staff-main {
        min-height: calc(100vh - 62px);
        padding: 20px 14px 22px;
    }
    .staff-mobile-nav {
        height: 68px;
        padding-bottom: env(safe-area-inset-bottom);
        position: fixed;
        z-index: 45;
        inset: auto 0 0;
        display: flex;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        border-top: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(16px);
    }
    .staff-mobile-nav::-webkit-scrollbar {
        display: none;
    }
    .staff-mobile-nav .nav-item {
        flex: 0 0 auto;
        min-width: 66px;
        min-height: 60px;
        padding: 5px 6px;
        flex-direction: column;
        justify-content: center;
        gap: 3px;
        border-radius: 0;
        color: #74817d;
        font-size: 10.5px;
        line-height: 1.15;
        text-align: center;
    }
    .staff-mobile-nav .nav-item.active {
        background: transparent;
        color: var(--brand-900);
    }
    .trip-hero {
        padding: 20px;
        align-items: flex-start;
        flex-direction: column;
    }
    .trip-hero__actions {
        width: 100%;
    }
    .trip-hero__actions .button {
        flex: 1;
    }
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 9px;
    }
    .kpi-card {
        min-height: 116px;
        padding: 14px;
    }
    .kpi-value {
        font-size: 27px;
    }
    .dashboard-grid {
        gap: 12px;
    }
    .section-heading {
        align-items: flex-start;
        flex-direction: column;
    }
    .section-heading .button {
        width: 100%;
    }
    .section-heading > .inline {
        width: 100%;
        align-items: stretch;
        flex-wrap: wrap;
    }
    .section-heading > .inline .button {
        width: auto;
        flex: 1 1 140px;
    }
    .toolbar {
        align-items: stretch;
        flex-direction: column;
    }
    .toolbar__filters {
        align-items: stretch;
        flex-direction: column;
    }
    .search,
    .toolbar .select {
        width: 100%;
    }
    .table-wrap {
        border: 0;
        overflow: visible;
        background: transparent;
        box-shadow: none;
    }
    .data-table,
    .data-table tbody {
        display: grid;
        gap: 10px;
    }
    .data-table thead {
        display: none;
    }
    .data-table tr {
        padding: 14px;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 8px;
        border: 1px solid var(--line-soft);
        border-radius: 13px;
        background: var(--paper);
        box-shadow: var(--shadow-sm);
    }
    .data-table td {
        padding: 0;
        border: 0;
    }
    .data-table td[data-mobile-hidden] {
        display: none;
    }
    .data-table td::before {
        display: block;
        color: var(--ink-soft);
        font-size: 11px;
        font-weight: 750;
        content: attr(data-label);
    }
    .data-table .person-cell::before {
        display: none;
    }
    /* Ô nút thao tác (bảng Tài khoản) chiếm trọn chiều ngang thẻ trên mobile
       để 3 nút không bị dồn vào cột hẹp. */
    .data-table td.actions-cell {
        grid-column: 1 / -1;
    }
    .data-table td.actions-cell .inline--wrap {
        width: 100%;
    }
    .task-card {
        cursor: default;
    }
    .task-drag-handle {
        display: none;
    }
    .contact-grid,
    .report-grid {
        grid-template-columns: 1fr;
    }
    .form-grid {
        grid-template-columns: 1fr;
    }
    .form-grid .span-2 {
        grid-column: auto;
    }
    .recommendation {
        grid-template-columns: auto 1fr;
    }
    .recommendation .button {
        grid-column: 1 / -1;
    }
    .auth-story {
        min-height: 300px;
    }
    .auth-copy h1 {
        font-size: 36px;
    }
    .auth-copy p,
    .auth-quote {
        display: none;
    }
    .role-grid {
        grid-template-columns: 1fr 1fr;
    }
    .role-card {
        min-height: 105px;
    }
    .issue-category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .guest-container {
        padding: 0 14px;
    }
}

@media (max-width: 430px) {
    .auth-story {
        padding: 28px 22px;
    }
    .auth-panel {
        padding: 35px 18px;
    }
    .role-grid {
        grid-template-columns: 1fr;
    }
    .role-card {
        min-height: 82px;
        flex-direction: row;
        align-items: center;
    }
    .guest-demo {
        align-items: stretch;
        flex-direction: column;
    }
    .guest-demo .button {
        width: 100%;
    }
    .readiness-legend {
        grid-template-columns: repeat(2, 1fr);
    }
    .action-alerts {
        grid-template-columns: 1fr 1fr;
    }
    .insight-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .bar-row {
        grid-template-columns: 78px 1fr 22px;
    }
    .choice-grid {
        grid-template-columns: 1fr;
    }
    .survey-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }
    .survey-actions > div:first-child {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .survey-actions .autosave-state {
        justify-content: center;
        text-align: center;
    }
    .survey-actions .button {
        width: 100%;
    }
    .activity-editor-card {
        grid-template-columns: 58px minmax(0, 1fr);
    }
    .activity-editor-card__actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

.profile-page-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}
.profile-summary-card {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(240px, 0.8fr);
    align-items: center;
    gap: 20px;
    padding: 24px;
}
.profile-summary-card__avatar {
    width: 68px;
    height: 68px;
    font-size: 20px;
}
.profile-summary-card h2 {
    margin: 4px 0;
}
.profile-summary-card p {
    margin: 0 0 10px;
}
.profile-summary-card dl {
    margin: 0;
    display: grid;
    gap: 11px;
}
.profile-summary-card dl div {
    display: grid;
    gap: 3px;
}
.profile-summary-card dt,
.profile-summary-card dd {
    margin: 0;
}
.profile-summary-card dt,
.guest-document-row small {
    color: var(--ink-soft);
    font-size: 12px;
}
.profile-summary-card dd {
    font-weight: 650;
}
.profile-page-grid > .card:not(.profile-summary-card):not(.profile-trips-card) {
    display: flex;
}
.profile-page-grid > .card:not(.profile-summary-card):not(.profile-trips-card) .card__body,
.profile-page-grid > .card:not(.profile-summary-card):not(.profile-trips-card) .survey-form {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.profile-page-grid > .card:not(.profile-summary-card):not(.profile-trips-card) .survey-form {
    flex: 1;
}
.profile-page-grid
    > .card:not(.profile-summary-card):not(.profile-trips-card)
    .survey-form
    > .button {
    margin-top: auto;
}
.profile-trips-card {
    grid-column: span 2;
}
.profile-trip-list {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
    display: grid;
    gap: 10px;
}
.profile-trip-list li {
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.profile-trip-list li:last-child {
    border-bottom: 0;
}
.profile-trip-list span {
    color: var(--ink-soft);
    font-size: 13px;
}
.profile-page-grid .card__body > .field-help {
    margin: 10px 0 22px;
    line-height: 1.55;
}
.guest-documents {
    display: grid;
    gap: 18px;
}
.guest-document-upload {
    border: 1px dashed var(--brand-700);
    border-color: color-mix(in srgb, var(--brand-700) 38%, var(--line));
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    background: var(--brand-50);
    background: color-mix(in srgb, var(--brand-50) 56%, white);
}
.guest-document-upload .field {
    margin: 0;
}
.guest-document-upload .card__body {
    display: grid;
    gap: 16px;
}
.guest-document-upload .card__body > .eyebrow,
.guest-document-upload .card__body > h2,
.guest-document-upload .card__body > .field-help {
    margin: 0;
}
.guest-document-upload .card__body > .field-help {
    margin-bottom: 4px;
    line-height: 1.6;
}
.guest-document-upload form {
    display: grid;
    gap: 18px;
}
.guest-document-upload form .field {
    display: grid;
    gap: 8px;
}
.guest-document-upload .document-file-input + .document-dropzone + .field-help {
    display: none;
}
.guest-document-upload .button {
    min-height: 46px;
    white-space: nowrap;
}
.guest-document-upload > .button {
    width: 100%;
}
.guest-document-file {
    min-width: 0;
}
.document-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}
.input--uppercase {
    text-transform: uppercase;
}
.document-dropzone {
    width: 100%;
    min-height: 116px;
    margin-top: 8px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 13px;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    appearance: none;
    border: 2px dashed var(--brand-700);
    border-color: color-mix(in srgb, var(--brand-700) 48%, var(--line));
    border-radius: 13px;
    background: var(--brand-50);
    background: color-mix(in srgb, var(--brand-50) 42%, white);
    transition:
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}
.document-dropzone:hover,
.document-dropzone:focus-visible,
.document-dropzone.is-dragover {
    outline: none;
    border-color: var(--brand-700);
    background: color-mix(in srgb, var(--brand-50) 78%, white);
}
.document-dropzone.is-dragover {
    background: color-mix(in srgb, var(--brand-700) 10%, white);
    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--brand-700) 14%, transparent),
        0 10px 24px color-mix(in srgb, var(--brand-700) 16%, transparent);
    animation: document-dropzone-active 1.1s ease-in-out infinite;
}
.document-dropzone.has-file {
    border-style: solid;
    border-color: color-mix(in srgb, var(--brand-700) 62%, var(--line));
    background: color-mix(in srgb, var(--brand-50) 86%, white);
}
.document-dropzone__icon {
    display: grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    place-items: center;
    color: var(--brand-700);
    border-radius: 12px;
    background: white;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-700) 15%, transparent);
}
.document-dropzone__icon .icon {
    width: 21px;
    height: 21px;
}
.document-dropzone__copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}
.document-dropzone__copy strong {
    font-size: 14px;
}
.document-dropzone__copy small,
.document-dropzone__copy em {
    overflow: hidden;
    color: var(--ink-soft);
    font-size: 12px;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.document-dropzone__copy em {
    margin-top: 4px;
    color: var(--brand-700);
}
.guest-document-list {
    display: grid;
    gap: 10px;
}
.guest-document-list-section {
    display: grid;
    gap: 12px;
    padding-top: 4px;
}
.guest-document-list-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--line-soft);
}
.guest-document-list-heading h3,
.guest-document-list-heading h4 {
    margin: 0;
    color: var(--ink-soft);
    font-size: 12px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.guest-document-list-count {
    display: inline-grid;
    min-width: 26px;
    min-height: 26px;
    margin-top: 0;
    padding: 4px 8px;
    place-items: center;
    border-radius: 999px;
    background: var(--brand-50);
    color: var(--brand-800);
    font-size: 12px;
    font-weight: 800;
}
.guest-document-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--paper);
}
.guest-document-row > div:first-child {
    display: grid;
    gap: 4px;
    min-width: 0;
}
.guest-document-row strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.guest-document-row__type {
    color: var(--brand-700);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.guest-document-row__delete {
    flex: 0 0 auto;
    white-space: nowrap;
}
@media (max-width: 760px) {
    .profile-page-grid {
        grid-template-columns: 1fr;
    }
    .profile-summary-card,
    .profile-trips-card {
        grid-column: auto;
    }
    .profile-summary-card {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 14px;
    }
    .profile-summary-card dl {
        grid-column: 1 / -1;
        border-top: 1px solid var(--line);
        padding-top: 14px;
    }
    .guest-document-row {
        align-items: flex-start;
        flex-direction: column;
    }
    .guest-document-row .inline {
        width: 100%;
    }
    .guest-document-row .button {
        flex: 1;
    }
    /* Guest self-upload rows keep the delete button on the right of the card
       (not stacked full-width below like the staff drawer rows). */
    .guest-document-list-section .guest-document-row {
        align-items: center;
        flex-direction: row;
    }
    .guest-document-list-section .guest-document-row__delete {
        flex: 0 0 auto;
    }
}
/* On phones, collapse the destructive buttons to icon-only to save width while
   keeping them reachable (label lives in aria-label/title). */
@media (max-width: 560px) {
    .guest-issue__cancel,
    .guest-document-row__delete {
        width: 42px;
        min-width: 42px;
        padding-left: 0;
        padding-right: 0;
    }
    .guest-issue__cancel .button__label,
    .guest-document-row__delete .button__label {
        display: none;
    }
    .guest-issue__cancel .icon,
    .guest-document-row__delete .icon {
        margin: 0;
    }
}

@keyframes document-dropzone-active {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.015);
    }
}

.linked-task-list {
    display: grid;
    gap: 8px;
}
/* Placeholder khi chưa có công việc theo dõi: tách khỏi dòng mô tả phía trên
   bằng khoảng cách + khung nét đứt nhạt cho dễ phân biệt. */
.linked-task-empty {
    margin-top: 10px;
    padding: 12px 14px;
    border: 1px dashed var(--line);
    border-radius: 10px;
    background: var(--paper);
}
.linked-task-row,
.linked-issue-row {
    width: 100%;
    min-height: 48px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
    color: var(--ink);
    cursor: pointer;
    text-align: left;
    transition:
        border-color 180ms ease,
        background 180ms ease,
        transform 180ms ease;
}
.linked-task-row:hover,
.linked-issue-row:hover {
    border-color: var(--brand-400);
    background: var(--brand-50);
    transform: translateY(-1px);
}
.linked-task-row > span:nth-child(2),
.linked-issue-row > span:nth-child(2) {
    min-width: 0;
    display: grid;
    gap: 3px;
}
.linked-task-row strong,
.linked-issue-row strong,
.linked-task-row small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.linked-task-row small {
    color: var(--ink-soft);
}
.task-issue-context {
    margin-bottom: 6px;
    padding: 14px !important;
    border: 1px solid var(--brand-100) !important;
    border-radius: var(--radius-sm);
    background: var(--brand-50);
}
.form-message--info {
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid #e8c98f;
    border-radius: var(--radius-sm);
    background: var(--warning-soft);
    color: var(--ink-soft);
    font-size: 13px;
    line-height: 1.45;
}
@media (max-width: 560px) {
    .linked-task-row,
    .linked-issue-row {
        align-items: start;
    }
    .linked-task-row > span:first-child {
        grid-column: 1 / -1;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
.guest-login-box {
    width: 100%;
    margin: 78px auto 0;
    padding: 24px 24px 36px;
    gap: 16px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 14px;
    background: rgba(214, 230, 228, 0.24);
    box-shadow: 0 12px 30px rgba(35, 57, 53, 0.08);
    backdrop-filter: blur(10px) saturate(0.88);
    -webkit-backdrop-filter: blur(10px) saturate(0.88);
    text-align: left;
}
.guest-login-box .field {
    gap: 0;
}
.guest-login-input {
    position: relative;
}
.guest-login-input > .input {
    min-height: 52px;
    padding: 11px 16px 11px 48px;
    border: 1px solid rgba(255, 255, 255, 0.54);
    border-radius: 15px;
    color: #526366;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: none;
    font-size: 14px;
    font-weight: 400;
}
.guest-login-input > .input::placeholder {
    color: rgba(79, 94, 98, 0.72);
    opacity: 1;
}
.guest-login-input > .input:-webkit-autofill,
.guest-login-input > .input:-webkit-autofill:hover,
.guest-login-input > .input:-webkit-autofill:focus {
    -webkit-text-fill-color: #526366;
    caret-color: #526366;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.1);
    transition: background-color 9999s ease-out 0s;
}
.guest-login-input > .input:autofill {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #526366;
}
.guest-login-input__icon {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 17px;
    display: grid;
    place-items: center;
    color: #68777a;
    pointer-events: none;
    transform: translateY(-50%);
}
.guest-login-input__icon .icon {
    width: 21px;
    height: 21px;
    stroke-width: 1.8;
}
.password-input.guest-login-input .input {
    padding-right: 52px;
    padding-left: 48px;
}
.guest-login-box .password-toggle {
    color: #6d7d80;
}
.guest-login-box .password-toggle:hover,
.guest-login-box .password-toggle:focus-visible {
    color: #526366;
    background: rgba(255, 255, 255, 0.18);
}
.guest-login-submit {
    min-height: 52px;
    margin-top: 9px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18px;
    padding: 11px 18px;
    border: 0;
    border-radius: 15px;
    color: #ffffff;
    background: #197f9d;
    box-shadow: 0 7px 15px rgba(16, 80, 101, 0.2);
    font-size: 14px;
    font-weight: 600;
}
.guest-login-submit:hover,
.guest-login-submit:focus-visible {
    color: #ffffff;
    background: #126f8a;
}
.guest-login-submit .icon {
    width: 17px;
    height: 17px;
}
.guest-login-box .guest-login-scan {
    min-height: 20px;
    margin: 11px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    text-shadow: 0 1px 4px rgba(33, 62, 60, 0.2);
}
.guest-login-box .guest-login-scan .icon {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    stroke-width: 1.8;
}
.guest-landing {
    width: 100%;
    min-height: 100svh;
    padding: max(18px, env(safe-area-inset-top)) 16px 24px;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    background-color: #f6efe2;
    font-family: "Noto Sans JP", var(--font-sans);
}
.guest-landing::before {
    content: "";
    position: fixed;
    z-index: 0;
    /* Neo theo large-viewport (100lvh) thay vì inset:0. Trên điện thoại thật,
       inset:0 khiến tầng nền co theo visual viewport khi bàn phím mở → ảnh bị
       scale lại + giật. Chiều cao lvh cố định nên nền đứng yên. */
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    height: 100lvh;
    pointer-events: none;
    background-color: #dceff2;
    background-image: url("/media/guest/asset/background/background.webp");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    transform: translateZ(0);
}
.guest-landing::after {
    content: "";
    position: fixed;
    z-index: 0;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    height: 100lvh;
    pointer-events: none;
    transform: translateZ(0);
    background: linear-gradient(180deg, rgba(7, 43, 51, 0.12), rgba(16, 48, 45, 0.28));
}
.guest-landing > * {
    min-width: 0;
    position: relative;
    z-index: 1;
}
.guest-login-main {
    width: min(358px, 100%);
    min-height: 0;
    padding-top: 78px;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.guest-login-main > .boot-logo {
    width: 166px;
    max-width: 48vw;
    margin: 0 auto;
    filter: none;
}
.guest-login-destination {
    width: 100%;
    margin-top: 0;
    text-align: center;
}
.guest-login-destination .eyebrow {
    margin: 0;
    color: rgba(255, 255, 255, 0.98);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 5px rgba(27, 54, 52, 0.25);
}
.guest-login-destination h1 {
    margin: 1px 0 0;
    color: #ffffff;
    font-family: "Noto Sans JP", var(--font-sans);
    font-size: 32px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.07em;
    text-indent: 0.07em;
    text-shadow: 0 1px 5px rgba(27, 54, 52, 0.22);
}
.guest-login-destination > p:last-child {
    max-width: 300px;
    margin: 4px auto 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    text-wrap: balance;
    text-shadow: 0 1px 5px rgba(27, 54, 52, 0.24);
}
@keyframes guest-landing-reveal {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.guest-login-main > .boot-logo,
.guest-login-destination .eyebrow,
.guest-login-destination h1,
.guest-login-destination > p:last-child,
.guest-login-box,
.guest-login-magic {
    animation: guest-landing-reveal 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.guest-login-main > .boot-logo {
    animation-delay: 0ms;
}
.guest-login-destination .eyebrow {
    animation-delay: 90ms;
}
.guest-login-destination h1 {
    animation: guest-landing-reveal 700ms cubic-bezier(0.22, 1, 0.36, 1) 150ms both;
}
.guest-login-destination > p:last-child {
    animation-delay: 230ms;
}
.guest-login-box {
    animation-delay: 320ms;
}
.guest-login-magic {
    animation-delay: 420ms;
}
@media (prefers-reduced-motion: reduce) {
    .guest-login-destination h1 {
        animation: none;
    }
    .guest-login-destination h1::after {
        display: none;
    }
    .guest-login-main > .boot-logo,
    .guest-login-destination .eyebrow,
    .guest-login-destination h1,
    .guest-login-destination > p:last-child,
    .guest-login-box,
    .guest-login-magic {
        animation: none;
    }
}
.guest-landing__locale {
    position: fixed;
    z-index: 80;
    top: max(17px, env(safe-area-inset-top));
    right: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
/* Brand-tinted accent button so it stands apart from the outlined locale
   switch beside it. */
.guest-accessibility-toggle {
    min-height: 44px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1.5px solid color-mix(in srgb, var(--brand-700) 45%, var(--brand-100));
    border-radius: 12px;
    background: linear-gradient(
        160deg,
        var(--brand-50, #e9f4ee),
        color-mix(in srgb, var(--brand-100, #cfe8dd) 60%, var(--brand-50, #e9f4ee))
    );
    color: var(--brand-800);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 72, 49, 0.1);
    transition:
        transform 150ms ease,
        box-shadow 200ms ease,
        background 200ms ease;
}
.guest-accessibility-toggle:hover {
    box-shadow: 0 4px 12px rgba(0, 72, 49, 0.18);
    transform: translateY(-1px);
}
.guest-accessibility-toggle:active {
    transform: scale(0.95);
}
.guest-accessibility-toggle span {
    white-space: nowrap;
}
.guest-accessibility-toggle .icon {
    width: 17px;
    height: 17px;
}
/* Bigger "A+" text-size glyph — the button's clear affordance. */
.guest-accessibility-toggle__glyph {
    display: inline-flex;
    align-items: baseline;
    font-size: 19px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: -0.01em;
}
.guest-accessibility-toggle__glyph sup {
    top: -0.1em;
    margin-left: 1px;
    font-size: 0.68em;
    font-weight: 850;
}
.guest-accessibility-toggle[aria-pressed="true"] {
    border-color: var(--brand-900);
    background: var(--brand-800);
    color: var(--white);
    box-shadow: 0 4px 12px rgba(0, 72, 49, 0.28);
}
.guest-landing__locale .guest-accessibility-toggle {
    width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    justify-content: center;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.52);
    border-radius: 999px;
    background: rgba(248, 249, 247, 0.9);
    color: #1e5c50;
    box-shadow: 0 2px 8px rgba(23, 50, 47, 0.12);
}
.guest-landing__locale .guest-accessibility-toggle > span:last-child {
    display: none;
}
.guest-landing__locale .guest-accessibility-toggle__glyph {
    font-size: 14px;
}
.guest-landing__locale .locale-switch--flags {
    width: 64px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    box-sizing: border-box;
    border-color: rgba(255, 255, 255, 0.52);
    border-radius: 999px;
    background: rgba(248, 249, 247, 0.9);
    box-shadow: 0 2px 8px rgba(23, 50, 47, 0.12);
}
.guest-landing__locale .locale-select__trigger {
    width: 62px;
    height: 30px;
    min-height: 30px;
    padding: 4px 8px;
    box-sizing: border-box;
    border-radius: 999px;
}
.guest-landing__locale .locale-switch__flag {
    width: 22px;
    height: 15px;
}
.guest-login-magic {
    width: 100%;
    max-width: 330px !important;
    margin: 19px auto 0;
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.45;
    text-align: center;
    text-shadow: 0 1px 5px rgba(26, 53, 50, 0.38);
}
@media (max-height: 760px) {
    .guest-landing {
        padding-top: max(12px, env(safe-area-inset-top));
        padding-bottom: 12px;
    }
    .guest-login-main {
        padding-top: 34px;
    }
    .guest-login-main > .boot-logo {
        width: 142px;
    }
    .guest-login-destination .eyebrow {
        font-size: 17px;
        line-height: 1.35;
    }
    .guest-login-destination h1 {
        font-size: 28px;
        line-height: 1.3;
    }
    .guest-login-destination > p:last-child {
        margin-top: 2px;
        font-size: 12.5px;
        line-height: 1.4;
    }
    .guest-login-box {
        margin-top: 28px;
        padding: 18px 20px 22px;
        gap: 11px;
    }
    .guest-login-input > .input {
        min-height: 46px;
    }
    .guest-login-box .password-toggle {
        width: 40px;
        height: 40px;
    }
    .guest-login-submit {
        min-height: 46px;
        margin-top: 5px;
    }
    .guest-login-box .guest-login-scan {
        min-height: 18px;
        margin-top: 4px;
        font-size: 12px;
        line-height: 18px;
    }
    .guest-login-box .guest-login-scan .icon {
        width: 17px;
        height: 17px;
    }
    .guest-login-magic {
        margin-top: 11px;
        font-size: 10px;
        line-height: 1.35;
    }
}
.guest-login-support {
    width: min(358px, 100%);
    margin: 64px auto 0;
    text-align: left;
}
.guest-login-support__banner {
    min-height: 154px;
    padding: 14px 72px 14px 13px;
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.62);
    border-radius: 22px;
    background: rgba(241, 238, 233, 0.94);
    box-shadow: 0 10px 22px rgba(32, 52, 49, 0.2);
    color: var(--ink);
    cursor: pointer;
    list-style: none;
}
.guest-login-support__banner::-webkit-details-marker {
    display: none;
}
.guest-login-support__banner::marker {
    content: "";
}
.guest-login-support__icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #2f7f65;
    box-shadow: none;
    color: var(--white);
}
.guest-login-support__icon .icon {
    width: 24px;
    height: 24px;
}
.guest-login-support__copy {
    width: 190px;
    min-width: 0;
    display: block;
}
.guest-login-support__eyebrow {
    display: block;
    margin-bottom: 2px;
    color: #ec7955;
    font-size: 9px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0;
    text-shadow: none;
}
.guest-login-support h2 {
    margin: 0 0 3px;
    color: #003f56;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.28;
    text-shadow: none;
}
.guest-login-support__banner p {
    margin: 0;
    color: #354748;
    font-size: 9px;
    font-weight: 400;
    line-height: 1.35;
    text-shadow: none;
}
.guest-login-support__open {
    width: fit-content;
    min-height: 31px;
    margin-top: 8px;
    padding: 6px 13px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 999px;
    background: #ffd276;
    box-shadow: 0 3px 7px rgba(88, 67, 27, 0.12);
    color: #36351f;
    font-size: 10px;
    font-weight: 700;
}
.guest-login-support__open .icon {
    width: 13px;
    height: 13px;
    transition: transform 160ms ease;
}
.guest-login-support[open] .guest-login-support__open .icon {
    transform: rotate(90deg);
}
.guest-login-support__banner:focus-visible {
    outline: 3px solid var(--brand-500);
    outline-offset: 3px;
}
.guest-login-support__preview {
    width: 52px;
    height: 108px;
    position: absolute;
    top: 23px;
    right: 12px;
    display: block;
    border: 2px solid #174d68;
    background: #d8e9ea;
    box-shadow: 0 6px 10px rgba(37, 49, 47, 0.24);
    object-fit: cover;
    object-position: top center;
}
.guest-login-support__panel {
    margin-top: 10px;
    padding: 14px;
    border: 1px solid var(--brand-100);
    border-radius: 16px;
    background: rgba(245, 252, 248, 0.94);
    box-shadow: 0 8px 22px rgba(15, 53, 45, 0.12);
    backdrop-filter: blur(12px);
}
.guest-login-support__panel h3 {
    margin: 0 0 10px;
    color: var(--ink);
    font-size: 14px;
}
.guest-login-support__actions {
    display: grid;
    gap: 10px;
}
.guest-login-support__action {
    min-height: 52px;
    padding: 9px 12px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--brand-100);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.78);
    color: var(--ink);
    text-decoration: none;
    touch-action: manipulation;
}
.guest-login-support__action:hover,
.guest-login-support__action:focus-visible {
    border-color: var(--brand-700);
    background: var(--white);
}
.guest-login-support__action--primary {
    border-color: var(--brand-800);
    background: var(--brand-900);
    color: var(--white);
}
/* The generic hover turns the surface white — correct for the secondary
   (email) action, but it wiped out the dark primary button (white text on a
   now-white surface). The primary keeps a dark surface and just lightens. */
.guest-login-support__action--primary:hover,
.guest-login-support__action--primary:focus-visible {
    border-color: var(--brand-950);
    background: var(--brand-800);
    color: var(--white);
}
.guest-login-support__action-icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--brand-50);
    color: var(--brand-800);
}
.guest-login-support__action--primary .guest-login-support__action-icon {
    background: rgba(255, 255, 255, 0.18);
    color: var(--white);
}
.guest-login-support__action-icon .icon,
.guest-login-support__action > .icon {
    width: 17px;
    height: 17px;
}
.guest-login-support__action > span:nth-child(2) {
    min-width: 0;
    display: grid;
    gap: 1px;
}
.guest-login-support__action strong {
    font-size: 14px;
    font-weight: 800;
}
.guest-login-support__action small {
    color: var(--ink-soft);
    font-size: 12px;
    overflow-wrap: anywhere;
}
.guest-login-support__action--primary small {
    color: rgba(255, 255, 255, 0.82);
}
.guest-login-support__hours {
    margin-top: 11px !important;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    color: var(--ink-soft) !important;
    font-size: 12px !important;
}
.guest-login-support__hours .icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: var(--brand-800);
}
@media (max-height: 760px) {
    .guest-login-support {
        margin-top: 24px;
    }
    .guest-login-support__banner {
        min-height: 128px;
        padding: 10px 60px 10px 10px;
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 12px;
        border-radius: 18px;
    }
    .guest-login-support__icon {
        width: 42px;
        height: 42px;
    }
    .guest-login-support__icon .icon {
        width: 21px;
        height: 21px;
    }
    .guest-login-support__copy {
        width: 190px;
    }
    .guest-login-support__eyebrow {
        font-size: 8px;
        line-height: 1.3;
    }
    .guest-login-support h2 {
        margin-bottom: 2px;
        font-size: 12px;
        line-height: 1.25;
    }
    .guest-login-support__banner p {
        font-size: 8px;
        line-height: 1.3;
    }
    .guest-login-support__open {
        min-height: 27px;
        margin-top: 6px;
        padding: 5px 10px;
        font-size: 9px;
    }
    .guest-login-support__preview {
        width: 44px;
        height: 92px;
        top: 18px;
        right: 10px;
    }
}
.guest-qr-share {
    display: grid;
    grid-template-columns: minmax(180px, 256px) minmax(0, 1fr);
    align-items: center;
    gap: 22px;
    text-align: left;
}
.guest-qr-share > img {
    width: 100%;
    max-width: 256px;
    justify-self: center;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--white);
}
.guest-qr-share h3 {
    margin: 0 0 8px;
    font-size: 17px;
}
.guest-qr-share p {
    margin: 0 0 16px;
    color: var(--ink-soft);
}
.guest-qr-share__actions {
    display: grid;
    gap: 10px;
}
.guest-qr-share__actions .button {
    min-height: 44px;
}

/* A persistent, opt-in mode for guests who need larger, higher-contrast UI.
   The colour tokens belong here. Text scale overrides are intentionally kept
   at the end of this sheet, after every component's explicit font size. */
html.guest-accessibility-mode .guest-shell,
html.guest-accessibility-mode .guest-landing {
    --ink: #102728;
    --ink-soft: #294849;
    --line: #728485;
    --line-soft: #b8c4c4;
    --brand-50: #e6f5ed;
    line-height: 1.65;
}
html.guest-accessibility-mode .guest-shell .guest-page-head h1,
html.guest-accessibility-mode .guest-landing h1 {
    line-height: 1.25;
}

@media (max-width: 520px) {
    /* Hide only the text label on mobile — keep the "A+" glyph visible. */
    .guest-topbar .guest-accessibility-toggle span:not(.guest-accessibility-toggle__glyph) {
        display: none;
    }
    .guest-qr-share {
        grid-template-columns: 1fr;
    }
}

.preview-activity.is-live {
    outline: 2px dashed var(--coral, #e8865f);
    outline-offset: 2px;
    border-radius: 8px;
}
.board-column__tasks {
    min-height: 100px;
}
.board-column .empty-state {
    min-height: 100px;
    padding: 18px 12px;
}
.board-column .empty-state__icon {
    width: 42px;
    height: 42px;
    margin-bottom: 8px;
    border-radius: 12px;
}
.itinerary-editor-column {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 16px;
}
.itinerary-days-panel,
.itinerary-day-panel {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--line-soft);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: var(--shadow-sm);
}
.itinerary-panel-heading,
.selected-day-header,
.itinerary-activity-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}
.itinerary-panel-heading {
    margin-bottom: 16px;
}
.itinerary-panel-heading h2,
.selected-day-header h2,
.itinerary-activity-heading h3 {
    margin: 2px 0 4px;
    color: var(--ink);
}
.itinerary-panel-heading h2,
.selected-day-header h2 {
    font-size: 20px;
}
.itinerary-activity-heading h3 {
    font-size: 16px;
}
.itinerary-panel-heading p:not(.eyebrow),
.selected-day-header p:not(.eyebrow),
.itinerary-activity-heading p:not(.eyebrow) {
    margin: 0;
    color: var(--ink-soft);
    font-size: 12px;
    line-height: 1.5;
}
.itinerary-days-panel .day-tabs {
    margin: 0;
    padding: 2px 2px 4px;
    flex-wrap: nowrap;
}
.itinerary-days-panel .day-tab {
    min-width: 142px;
    min-height: 88px;
    padding: 12px 14px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
    text-align: left;
}
.itinerary-days-panel .day-tab strong {
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}
.itinerary-days-panel .day-tab small {
    width: 100%;
    overflow: hidden;
    font-size: 11px;
    opacity: 0.78;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.selected-day-header {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line-soft);
}
.selected-day-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}
.itinerary-activity-heading {
    margin: 18px 0 14px;
    align-items: center;
}
.itinerary-activity-heading__actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 9px;
}
.itinerary-activity-list {
    display: grid;
    gap: 10px;
    max-height: min(640px, 56vh);
    padding: 2px 8px 2px 2px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: 8px;
    scrollbar-gutter: stable;
}
.itinerary-activity-list .activity-editor-card {
    margin: 0;
}
.itinerary-activity-list:focus-visible,
.preview-phone__activities:focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 2px;
}
.activity-editor-card.is-live {
    border: 2px dashed var(--coral);
    background: #fffaf6;
    box-shadow: 0 0 0 3px rgba(239, 117, 79, 0.07);
}

@media (max-width: 720px) {
    .itinerary-days-panel,
    .itinerary-day-panel {
        padding: 14px;
    }
    .itinerary-panel-heading,
    .selected-day-header,
    .itinerary-activity-heading {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }
    .selected-day-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .itinerary-activity-heading__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }
    .selected-day-actions .button,
    .itinerary-activity-heading .button {
        width: 100%;
    }
    .itinerary-days-panel .day-tab {
        min-width: 126px;
    }
    .itinerary-activity-list {
        max-height: min(520px, 58vh);
        padding-right: 6px;
    }
    .preview-phone__screen {
        height: min(540px, 70vh);
    }
}
.trip-switcher .select {
    margin-top: 6px;
    width: 100%;
    font-size: 13px;
}
.trip-switcher .button {
    margin-top: 8px;
    width: 100%;
    color: rgba(255, 255, 255, 0.85);
}
.trip-switcher .button--trip-create {
    color: #163326;
}
.day-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.setup-card {
    margin-bottom: 22px;
    border-left: 4px solid var(--brand-700);
}
.setup-card .audit-row.setup-done {
    opacity: 0.55;
}
.tag--button {
    cursor: pointer;
    border: 1px dashed var(--brand-700);
    background: var(--brand-50);
    transition: background 0.15s;
}
.tag--button:hover {
    background: var(--brand-100);
}
.activity-editor-card.is-cancelled {
    opacity: 0.5;
}
.sync-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.status-chips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    gap: 6px;
}
.status-chips--actions {
    gap: 8px;
    margin-top: 14px;
}
.status-chip {
    text-align: center;
}
.status-chip.status-todo {
    border-color: #a6d9c8;
    color: var(--brand-800);
    background: var(--brand-50);
}
.status-chip.status-in_progress {
    border-color: #efd39a;
    color: #875b1f;
    background: var(--warning-soft);
}
.status-chip.status-blocked {
    border-color: #efbeb9;
    color: #9f3632;
    background: var(--danger-soft);
}
.status-chip.status-done {
    border-color: #b9ddca;
    color: #267054;
    background: var(--success-soft);
}
.status-chip {
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid #d6dcd8;
    border-radius: 999px;
    background: var(--white);
    color: #5a6d66;
    font-size: 12px;
    font-weight: 750;
    line-height: 1;
    cursor: pointer;
    transition:
        border-color 0.15s,
        color 0.15s,
        background 0.15s,
        transform 0.15s;
}
.status-chip:hover:not(:disabled) {
    border-color: var(--brand-700);
    color: var(--brand-800);
    transform: translateY(-1px);
}
.status-chip.is-active {
    cursor: default;
    color: #fff;
}
.status-chip.is-active.status-todo {
    background: var(--brand-800);
    border-color: var(--brand-800);
}
.status-chip.is-active.status-in_progress {
    background: #b97a24;
    border-color: #b97a24;
}
.status-chip.is-active.status-blocked {
    background: #b3403a;
    border-color: #b3403a;
}
.status-chip.is-active.status-done {
    background: #2e7d5b;
    border-color: #2e7d5b;
}

.preview-activity time {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--coral, #d96b45);
}
.preview-activity strong {
    display: block;
    margin: 3px 0 2px;
    line-height: 1.35;
}
.preview-activity small {
    display: block;
    line-height: 1.4;
}
.trip-switcher .select {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.trip-switcher .nice-select {
    min-width: 0;
}
.trip-switcher .nice-select__menu {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}
.trip-switcher .nice-select__option {
    min-height: 44px;
    padding: 10px 12px;
    line-height: 1.35;
    overflow-wrap: anywhere;
    white-space: normal;
}

.nice-select {
    position: relative;
}
.nice-select > select {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    opacity: 0;
    pointer-events: none;
}
.nice-select__trigger {
    display: flex;
    width: 100%;
    align-items: center;
    text-align: left;
    font: inherit;
}
.nice-select__label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nice-select__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 240;
    min-width: 100%;
    width: max-content;
    max-width: 320px;
    max-height: 280px;
    overflow: auto;
    padding: 6px;
    border: 1px solid #dde3df;
    border-radius: 13px;
    background: var(--white);
    box-shadow: 0 14px 34px rgba(0, 40, 29, 0.18);
    animation: menuIn 0.12s ease-out;
    scrollbar-width: none;
}
.nice-select__menu--up {
    top: auto;
    bottom: calc(100% + 6px);
}
.nice-select__menu::-webkit-scrollbar {
    width: 0;
    height: 0;
}
@keyframes menuIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.nice-select__option {
    display: flex;
    width: 100%;
    align-items: center;
    padding: 9px 11px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.nice-select__option:hover {
    background: var(--brand-50);
}
.nice-select__option.is-selected {
    background: var(--brand-900);
    color: #fff;
}
.nice-select__option.is-selected:hover {
    background: var(--brand-800);
}
.nice-select__option + .nice-select__option {
    margin-top: 2px;
}
/* Flag-aware selector: flag chip beside the language name, in trigger + list. */
.nice-select__label--flag {
    display: flex;
    align-items: center;
    gap: 8px;
}
.nice-select__label--flag .nice-select__label-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nice-select__option--flag {
    gap: 9px;
}
.nice-select__option--flag > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Fallback chip for a language with no bundled flag art: a neutral circle with
   the 2-letter country code. Pure CSS text, so it renders on every platform. */
.flag-circle--code {
    display: inline-grid;
    place-items: center;
    background: var(--brand-50);
    box-shadow: inset 0 0 0 1px var(--brand-100);
    color: var(--brand-800);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.no-special-requirements {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 650;
}
.no-special-requirements::before {
    content: "—";
}

.ai-suggestion {
    margin-top: 10px;
    padding: 13px 14px;
    border: 1px solid #e3e8e4;
    border-radius: 13px;
    background: var(--white);
    box-shadow: var(--shadow-sm);
}
.ai-suggestion .flag-list {
    margin-top: 8px;
}
.ai-reason {
    margin: 8px 0 0;
    padding: 8px 10px;
    border-radius: 9px;
    background: var(--brand-50);
    color: var(--brand-800);
    font-size: 12.5px;
    line-height: 1.45;
}
.ai-reason .icon {
    width: 13px;
    height: 13px;
}

.nav-badge {
    margin-left: auto;
    min-width: 20px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--coral, #d96b45);
    color: #fff;
    font-size: 10.5px;
    font-weight: 850;
    text-align: center;
}
.staff-mobile-nav .nav-badge {
    position: absolute;
    top: 4px;
    right: 14px;
    margin: 0;
}
.staff-mobile-nav .nav-item {
    position: relative;
}

.map-overlay {
    position: fixed;
    inset: 0;
    z-index: 260;
    display: flex;
    flex-direction: column;
    background: var(--paper, #f5f2eb);
    animation: menuIn 0.15s ease-out;
}
.map-overlay__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    padding-top: calc(12px + env(safe-area-inset-top));
    background: var(--white);
    border-bottom: 1px solid #e3e8e4;
}
.map-overlay__frame {
    flex: 1 1 auto;
    width: 100%;
    border: 0;
}
.map-overlay__foot {
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    background: var(--white);
    border-top: 1px solid #e3e8e4;
}

.quick-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid #e3e8e4;
    text-align: left;
    cursor: pointer;
}
.quick-link > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.quick-link strong,
.quick-link small {
    display: block;
}
.quick-link small {
    color: var(--ink-soft);
    line-height: 1.45;
}
.quick-link:hover {
    border-color: var(--brand-700);
    box-shadow: var(--shadow-md);
}
.quick-link .quick-link__arrow {
    margin-left: auto;
    color: var(--brand-700);
}
.ai-pick {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 11px 13px;
    border: 1px dashed var(--brand-700);
    border-radius: 11px;
    background: var(--brand-50);
    color: var(--ink);
    text-align: left;
    font-size: 13px;
    cursor: pointer;
}
.ai-pick:hover {
    background: var(--brand-100);
}
.ai-pick small {
    display: block;
    margin-top: 3px;
    color: var(--brand-800);
}
.ai-reason--swap {
    background: #fdf1e6;
    color: #8a5a1f;
}

/* Responsive hardening: preserve task flows while prioritising the primary action on touch. */
button,
.nav-item,
.guest-nav-item,
.help-card,
.quick-link,
.status-chip,
.tag--button,
.ai-pick {
    touch-action: manipulation;
}

@media (max-width: 720px) {
    .inline,
    .trip-hero__actions {
        width: 100%;
        flex-wrap: wrap;
    }
    .inline > .button,
    .inline > a.button,
    .trip-hero__actions > .button {
        flex: 1 1 180px;
    }
    .recommendation {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 12px;
        padding: 16px;
    }
    .recommendation .button {
        grid-column: 1 / -1;
        width: 100%;
    }
    .drawer {
        width: 100%;
    }
    .drawer__header {
        padding: calc(16px + env(safe-area-inset-top)) 16px 16px;
    }
    .drawer__body {
        padding: 20px 16px calc(24px + env(safe-area-inset-bottom));
    }
    .drawer__footer {
        grid-template-columns: 1fr;
        padding-bottom: calc(4px + env(safe-area-inset-bottom));
    }
    .drawer__footer--issue {
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    }
    .drawer__footer > .button:only-child {
        grid-column: auto;
    }
    .toast-region {
        right: 12px;
        bottom: calc(82px + env(safe-area-inset-bottom));
        left: 12px;
    }
    .toast {
        width: 100%;
    }
    .nice-select__menu {
        width: 100%;
        max-width: 100%;
    }
    .guest-hero__actions {
        width: 100%;
    }
    .guest-hero__actions .button {
        flex: 1 1 140px;
    }
    .ops-dashboard {
        gap: 14px;
    }
    .ops-greeting {
        min-height: 210px;
        padding: 22px;
    }
    .action-alerts {
        grid-template-columns: 1fr;
    }
    .action-alert.success {
        grid-column: auto;
    }
    .ops-priority-card .card__header {
        align-items: flex-start;
    }
    .ops-summary {
        white-space: normal;
    }
    .ops-item {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
    }
    .ops-item__actions {
        grid-column: 1 / -1;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .ops-item__actions .button {
        flex: 1 1 132px;
    }
}

@media (max-width: 430px) {
    .staff-main {
        padding-right: 12px;
        padding-left: 12px;
    }
    .guest-container,
    .survey-container {
        padding-right: 14px;
        padding-left: 14px;
    }
    .guest-hero {
        min-height: 270px;
        padding: 22px;
        border-radius: 20px;
    }
    .guest-hero h2 {
        font-size: 24px;
    }
    .guest-hero__actions .button {
        width: 100%;
        flex: 0 0 auto;
    }
    .guest-hero__actions {
        flex-direction: column;
    }
    .guest-topbar {
        padding-right: 14px;
        padding-left: 14px;
    }
    .guest-brand {
        gap: 7px;
        font-size: 10px;
    }
    .guest-sync-button {
        width: 38px;
        height: 38px;
    }
    .locale-switch button {
        min-height: 30px;
        padding-right: 7px;
        padding-left: 7px;
    }
    .guest-timeline {
        padding-right: 14px;
        padding-left: 14px;
    }
    .guest-timeline .timeline-item {
        grid-template-columns: 58px minmax(0, 1fr);
    }
    .guest-timeline .timeline-item strong {
        font-size: 12px;
    }
    .pickup-card {
        gap: 12px;
        grid-template-columns: 64px minmax(0, 1fr);
        padding: 15px;
    }
    .pickup-photo {
        width: 64px;
        height: 74px;
    }
    .pickup-card h3 {
        font-size: 18px;
    }
    .pickup-actions {
        gap: 8px;
    }
    .pickup-actions .button {
        min-width: 0;
        padding-right: 9px;
        padding-left: 9px;
        font-size: 12px;
    }
    .guest-day__title h2 {
        font-size: 19px;
    }
    .guest-day__title > span {
        max-width: 110px;
        font-size: 10px;
    }
    .schedule-card {
        grid-template-columns: 54px minmax(0, 1fr);
        gap: 9px;
        padding: 14px 14px 16px;
    }
    .schedule-card::before {
        left: 72px;
    }
    .schedule-card::after {
        left: 66px;
    }
    .survey-container {
        padding-top: 26px;
    }
    .survey-progress {
        margin-bottom: 25px;
    }
    .survey-stepper {
        gap: 6px;
    }
    .survey-stepper__item {
        min-height: 48px;
        padding: 4px 1px;
    }
    .survey-stepper__item small {
        display: none;
    }
    .help-grid {
        gap: 10px;
    }
    .help-card {
        min-height: 138px;
        padding: 15px;
    }
    .help-card > span:first-child {
        width: 36px;
        height: 36px;
    }
    .help-card strong {
        font-size: 13px;
    }
    .help-card small {
        font-size: 10px;
    }
    .guest-profile-card {
        padding: 20px;
    }
    .guest-profile-card__meta {
        gap: 8px;
    }
    .guest-profile-card__meta > div {
        padding: 10px;
    }
    .detail-grid,
    .drawer-actions {
        grid-template-columns: 1fr;
    }
    .guest-contact {
        grid-template-columns: 42px minmax(0, 1fr) auto;
        gap: 10px;
    }
    .guest-contact .avatar {
        width: 42px;
        height: 42px;
    }
}

@media (max-height: 540px) and (orientation: landscape) {
    .guest-topbar,
    .mobile-topbar {
        height: 54px;
    }
    .guest-main {
        padding-top: 10px;
    }
    .guest-greeting {
        margin-bottom: 12px;
    }
    .guest-hero {
        min-height: 230px;
    }
}

/* Guest page rhythm and itinerary geometry: keep timeline markers out of
   titles even when an imported activity has a long name. */
.onboarding-checklist + .guest-hero {
    margin-top: 32px;
}
.guest-main > .guest-profile-card + .guest-document-upload {
    margin-top: 32px;
}
.guest-main > .guest-document-upload + .legal-entry-card {
    margin-top: 32px;
}
.schedule-card {
    grid-template-columns: 62px minmax(0, 1fr);
    column-gap: 24px;
    row-gap: 12px;
}
.schedule-card::before {
    left: 85px;
}
.schedule-card::after {
    left: 78px;
    width: 16px;
    height: 16px;
    box-sizing: border-box;
}
.schedule-card__actions .button {
    min-height: 38px;
    padding: 7px 11px;
}
.schedule-card:last-child {
    padding-bottom: 18px;
}
.schedule-card p:empty {
    display: none;
}
.schedule-card div:has(> p:empty) .schedule-card__actions {
    margin-top: 8px;
}

/* Pre-trip hero: editorial countdown layout with a brighter right-hand veil. */
.guest-hero.guest-hero--countdown {
    min-height: 350px;
    padding: 20px 20px 12px;
    border-radius: 26px;
}
.guest-hero--countdown::after {
    background:
        radial-gradient(
            circle at 100% 10%,
            rgba(255, 247, 226, 0.28),
            rgba(255, 247, 226, 0.1) 30%,
            transparent 58%
        ),
        linear-gradient(
            90deg,
            rgba(0, 39, 30, 0.66),
            rgba(0, 39, 30, 0.38) 50%,
            rgba(0, 39, 30, 0.08)
        ),
        linear-gradient(180deg, rgba(0, 31, 22, 0.02), rgba(0, 31, 22, 0.62));
}
.guest-hero--countdown .guest-hero__label {
    min-height: 26px;
    padding: 5px 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 43, 33, 0.52);
    font-size: 9px;
    letter-spacing: 0.07em;
    box-shadow: 0 4px 14px rgba(0, 31, 22, 0.14);
}
.guest-hero--countdown .guest-hero__label .icon {
    width: 13px;
    height: 13px;
    color: #edc36f;
    stroke-width: 1.8;
}
.guest-hero--countdown .guest-hero__content {
    width: 100%;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.guest-hero--countdown .guest-hero__countdown {
    width: fit-content;
    margin: 0 0 7px !important;
    display: grid;
    justify-items: start;
    color: #fff !important;
    font-family: var(--font-travel-serif);
    letter-spacing: -0.035em;
}
.guest-hero__countdown-intro {
    font-size: 28px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.01em;
}
.guest-hero__countdown-number-row {
    min-height: 67px;
    display: flex;
    align-items: flex-end;
    gap: 0;
}
.guest-hero__countdown-number {
    color: #f4d49a;
    font-size: 70px;
    font-weight: 400;
    line-height: 0.88;
}
.guest-hero__countdown-unit {
    max-width: 130px;
    color: #fff;
    font-size: clamp(20px, 5.8vw, 27px);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}
.guest-hero__countdown-side {
    margin-left: 7px;
    padding-bottom: 3px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}
.guest-hero__countdown-spark {
    margin: 0;
    display: block;
    color: #f1c565;
    line-height: 0;
}
.guest-hero__countdown-spark .icon {
    width: 25px;
    height: 25px;
    stroke-width: 1.45;
}
.guest-hero--countdown .guest-hero__countdown--message {
    max-width: 300px;
    margin-bottom: 12px !important;
    font-size: clamp(29px, 8vw, 40px) !important;
    line-height: 1.05;
}
.guest-hero--countdown h2 {
    max-width: calc(100% - 12px);
    margin: 9px 0 10px;
    font-family: var(--font-travel-serif);
    font-size: clamp(20px, 5.4vw, 23px);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -0.012em;
}
.guest-hero--countdown .guest-hero__location {
    width: fit-content;
    max-width: 100%;
    min-height: 30px;
    margin: 0 0 12px;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 10px;
    background: rgba(0, 43, 33, 0.38);
    color: rgba(255, 255, 255, 0.82);
    font-size: 11px;
    backdrop-filter: blur(8px);
}
.guest-hero--countdown .guest-hero__location .icon {
    width: 15px;
    height: 15px;
}
.guest-hero--countdown .guest-hero__actions {
    width: fit-content;
    max-width: 100%;
}
.guest-hero--countdown .guest-hero__actions .button {
    width: auto;
    max-width: 100%;
    min-height: 31px;
    padding: 6px 12px;
    flex: 0 0 auto;
    border-color: rgba(255, 255, 255, 0.72);
    border-radius: 9px;
    color: var(--brand-900);
    font-size: 10px;
    box-shadow: 0 4px 10px rgba(0, 35, 26, 0.2);
}
.guest-hero--countdown .guest-hero__actions .button .icon {
    width: 13px;
    height: 13px;
}
.guest-hero--countdown .guest-hero__actions .button .icon:last-child {
    margin-left: auto;
    color: inherit;
}

/* In-trip hero shares the pre-trip card's editorial visual language while
   retaining the live activity and map actions. */
.guest-hero.guest-hero--in-trip {
    min-height: 350px;
    padding: 20px 20px 12px;
    border-radius: 26px;
}
.guest-hero--in-trip::after {
    background:
        radial-gradient(
            circle at 100% 10%,
            rgba(255, 247, 226, 0.24),
            rgba(255, 247, 226, 0.08) 30%,
            transparent 58%
        ),
        linear-gradient(
            90deg,
            rgba(0, 39, 30, 0.64),
            rgba(0, 39, 30, 0.34) 54%,
            rgba(0, 39, 30, 0.07)
        ),
        linear-gradient(180deg, rgba(0, 31, 22, 0.02), rgba(0, 31, 22, 0.66));
}
.guest-hero--in-trip .guest-hero__label {
    min-height: 26px;
    padding: 5px 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 43, 33, 0.52);
    font-size: 9px;
    letter-spacing: 0.07em;
    box-shadow: 0 4px 14px rgba(0, 31, 22, 0.14);
}
.guest-hero--in-trip .guest-hero__label .icon {
    width: 13px;
    height: 13px;
    color: #edc36f;
    stroke-width: 1.8;
}
.guest-hero--in-trip .guest-hero__content {
    width: 100%;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.guest-hero--in-trip time {
    color: #f2d099;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.4;
    text-shadow: 0 2px 8px rgba(0, 28, 22, 0.42);
}
.guest-hero--in-trip h2 {
    max-width: calc(100% - 12px);
    margin: 10px 0 11px;
    font-family: var(--font-travel-serif);
    font-size: clamp(24px, 6.5vw, 30px);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.018em;
    text-wrap: balance;
}
.guest-hero--in-trip .guest-hero__location {
    width: fit-content;
    max-width: 100%;
    min-height: 30px;
    margin: 0 0 13px;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 10px;
    background: rgba(0, 43, 33, 0.38);
    color: rgba(255, 255, 255, 0.84);
    font-size: 11px;
    backdrop-filter: blur(8px);
}
.guest-hero--in-trip .guest-hero__location .icon {
    width: 15px;
    height: 15px;
}
.guest-hero--in-trip .guest-hero__actions {
    width: fit-content;
    max-width: 100%;
    flex-flow: row wrap;
    gap: 8px;
}
.guest-hero--in-trip .guest-hero__actions .button {
    width: auto;
    max-width: 100%;
    min-height: 31px;
    padding: 6px 12px;
    flex: 0 0 auto;
    border-radius: 9px;
    font-size: 10px;
    box-shadow: 0 4px 10px rgba(0, 35, 26, 0.2);
}
.guest-hero--in-trip .guest-hero__actions .button--ghost {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(0, 43, 33, 0.34);
    color: #fff;
}
.guest-hero--in-trip .guest-hero__actions .button .icon {
    width: 13px;
    height: 13px;
}
.guest-hero--in-trip .guest-hero__actions .button .icon:last-child {
    color: inherit;
}

/* Home itinerary preview — a compact travel route rather than a plain table. */
.guest-today-section {
    margin-top: 28px;
}
.guest-home-help__head {
    margin-bottom: 12px;
}
.guest-home-help__head .eyebrow {
    margin: 0 0 4px;
    color: #2b8875;
    font-size: 8.5px;
    letter-spacing: 0.14em;
}
.guest-home-help .help-grid {
    gap: 12px;
}
.guest-home-help .home-help-card {
    min-height: 158px;
    padding: 15px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    border: 1px solid rgba(23, 133, 109, 0.2);
    border-radius: 22px;
    background:
        radial-gradient(circle at 100% 0, rgba(114, 202, 177, 0.24), transparent 43%),
        linear-gradient(150deg, rgba(250, 255, 252, 0.98), rgba(231, 247, 239, 0.94));
    box-shadow: 0 12px 28px rgba(24, 85, 70, 0.11);
    color: #17483e;
    text-align: left;
}
.guest-home-help .home-help-card::before {
    width: 92px;
    height: 92px;
    position: absolute;
    z-index: -1;
    top: -47px;
    right: -40px;
    border: 1px dashed rgba(37, 145, 120, 0.27);
    border-radius: 50%;
    content: "";
}
.guest-home-help .home-help-card--emergency {
    border-color: rgba(210, 84, 75, 0.22);
    background:
        radial-gradient(circle at 100% 0, rgba(244, 153, 142, 0.25), transparent 43%),
        linear-gradient(150deg, rgba(255, 252, 250, 0.98), rgba(255, 235, 231, 0.94));
    box-shadow: 0 12px 28px rgba(145, 65, 56, 0.1);
    color: #793f39;
}
.guest-home-help .home-help-card--emergency::before {
    border-color: rgba(210, 84, 75, 0.25);
}
.guest-home-help .home-help-card > .home-help-card__icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(21, 137, 111, 0.13);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    color: #13836d;
    box-shadow:
        0 7px 16px rgba(20, 105, 86, 0.12),
        inset 0 0 0 5px rgba(213, 242, 232, 0.7);
}
.guest-home-help .home-help-card--emergency > .home-help-card__icon {
    border-color: rgba(210, 84, 75, 0.13);
    background: rgba(255, 255, 255, 0.82);
    color: #d05a51;
    box-shadow:
        0 7px 16px rgba(145, 65, 56, 0.11),
        inset 0 0 0 5px rgba(255, 224, 220, 0.75);
}
.guest-home-help .home-help-card__icon .icon {
    width: 20px;
    height: 20px;
}
.guest-home-help .home-help-card > .home-help-card__body {
    min-width: 0;
    margin-top: 13px;
    padding-right: 24px;
    align-self: stretch;
}
.guest-home-help .home-help-card__eyebrow {
    margin: 0 0 5px;
    display: block;
    color: #278875;
    font-size: 7.5px;
    font-weight: 850;
    line-height: 1.25;
    letter-spacing: 0.1em;
}
.guest-home-help .home-help-card--emergency .home-help-card__eyebrow {
    color: #c75b52;
}
.guest-home-help .home-help-card strong {
    display: block;
    color: inherit;
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.25;
}
.guest-home-help .home-help-card .home-help-card__meta {
    min-height: 0;
    margin-top: 6px;
    display: block;
    color: #67847d;
    font-size: 9.5px;
    line-height: 1.35;
}
.guest-home-help .home-help-card--emergency .home-help-card__meta {
    color: #94645f;
}
.guest-home-help .home-help-card > .home-help-card__arrow {
    width: 28px;
    height: 28px;
    position: absolute;
    right: 13px;
    bottom: 13px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(21, 137, 111, 0.16);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.72);
    color: #13836d;
}
.guest-home-help .home-help-card--emergency > .home-help-card__arrow {
    border-color: rgba(210, 84, 75, 0.16);
    color: #d05a51;
}
.guest-home-help .home-help-card__arrow .icon {
    width: 14px;
    height: 14px;
}
.guest-today-section__head {
    margin: 0 2px 13px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
}
.guest-today-section__head .eyebrow {
    margin: 0 0 3px;
    color: #2b8875;
    font-size: 8.5px;
    letter-spacing: 0.14em;
}
.guest-today-section__head h2 {
    margin: 0;
    color: #153f38;
    font-family: var(--font-travel-serif);
    font-size: 25px;
    font-weight: 550;
    line-height: 1.05;
}
.guest-today-section__head > button {
    min-height: 32px;
    padding: 6px 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    border: 1px solid rgba(33, 132, 108, 0.18);
    border-radius: 9px;
    color: #08715d;
    background: rgba(239, 249, 244, 0.82);
    font-size: 10px;
    font-weight: 750;
    cursor: pointer;
}
.guest-today-section__head > button .icon {
    width: 13px;
    height: 13px;
}
.guest-today-route {
    padding: 8px 13px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(220, 198, 159, 0.52);
    border-radius: 22px;
    background:
        radial-gradient(circle at 100% 0, rgba(188, 229, 216, 0.32), transparent 34%),
        rgba(255, 253, 248, 0.94);
    box-shadow: 0 13px 30px rgba(77, 58, 29, 0.09);
}
.guest-today-route__path {
    width: 120px;
    height: calc(100% - 120px);
    position: absolute;
    z-index: 0;
    top: 60px;
    bottom: 60px;
    left: 50%;
    overflow: visible;
    pointer-events: none;
    transform: translateX(-50%);
}
.guest-today-route__path path {
    fill: none;
    stroke: rgba(42, 151, 128, 0.68);
    stroke-width: 1.5;
    stroke-dasharray: 4 5;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}
.guest-today-stop {
    min-height: 104px;
    padding: 12px 2px;
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}
.guest-today-stop__time {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    padding-right: 30px;
    color: #d75b3f;
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.guest-today-stop__marker {
    width: 56px;
    height: 56px;
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 3px solid #fff9e9;
    border-radius: 50%;
    background: #efe5cf;
    box-shadow:
        0 0 0 2px rgba(222, 181, 106, 0.86),
        0 7px 16px rgba(73, 56, 29, 0.18);
    transform: translateX(-30px);
}
.guest-today-stop__marker img {
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}
.guest-today-stop__copy {
    min-width: 0;
    grid-column: 3;
    grid-row: 1;
    text-align: left;
    transform: translateX(-30px);
}
.guest-today-stop__copy h3 {
    margin: 0;
    color: #173f38;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.guest-today-stop__copy p {
    margin: 4px 0 0;
    display: flex;
    align-items: flex-start;
    gap: 4px;
    color: #657b75;
    font-size: 10px;
    line-height: 1.35;
}
.guest-today-stop__copy p .icon {
    width: 12px;
    height: 12px;
    margin-top: 1px;
    flex: 0 0 12px;
    color: #2b8c78;
}
.guest-today-stop.is-reverse .guest-today-stop__time {
    grid-column: 3;
    justify-self: start;
    padding-right: 0;
    padding-left: 30px;
    text-align: left;
}
.guest-today-stop.is-reverse .guest-today-stop__copy {
    grid-column: 1;
    text-align: right;
    transform: translateX(30px);
}
.guest-today-stop.is-reverse .guest-today-stop__marker {
    transform: translateX(30px);
}
.guest-today-stop.is-reverse .guest-today-stop__copy p {
    justify-content: flex-end;
}
.guest-today-stop.is-reverse .guest-today-stop__next {
    margin-left: auto;
}
.guest-today-stop__next {
    width: fit-content;
    margin-bottom: 3px;
    display: block;
    color: #b67b2f;
    font-size: 7.5px;
    font-weight: 850;
    letter-spacing: 0.12em;
}
.guest-today-stop.is-next {
    background: transparent;
}
.guest-today-stop.is-next .guest-today-stop__marker {
    border-color: #159079;
    box-shadow:
        0 7px 15px rgba(7, 103, 82, 0.2),
        0 0 0 3px rgba(209, 239, 229, 0.9);
}
@media (max-width: 370px) {
    .guest-today-route {
        padding-inline: 8px;
    }
    .guest-today-route__path {
        width: 96px;
        height: calc(100% - 112px);
        top: 56px;
        bottom: 56px;
    }
    .guest-today-stop {
        min-height: 96px;
        grid-template-columns: minmax(0, 1fr) 50px minmax(0, 1fr);
        gap: 7px;
    }
    .guest-today-stop__marker {
        width: 48px;
        height: 48px;
        transform: translateX(-24px);
    }
    .guest-today-stop.is-reverse .guest-today-stop__marker {
        transform: translateX(24px);
    }
    .guest-today-stop__time {
        padding-right: 24px;
    }
    .guest-today-stop.is-reverse .guest-today-stop__time {
        padding-right: 0;
        padding-left: 24px;
    }
    .guest-today-stop__copy {
        transform: translateX(-24px);
    }
    .guest-today-stop.is-reverse .guest-today-stop__copy {
        transform: translateX(24px);
    }
    .guest-today-stop__copy h3 {
        font-size: 11.5px;
    }
    .guest-today-stop__copy p {
        font-size: 9px;
    }
    .guest-today-stop__time {
        font-size: 10.5px;
    }
}
@media (max-width: 430px) {
    .onboarding-checklist + .guest-hero,
    .guest-main > .guest-profile-card + .guest-document-upload,
    .guest-main > .guest-document-upload + .legal-entry-card {
        margin-top: 24px;
    }
    .schedule-card {
        grid-template-columns: 54px minmax(0, 1fr);
        column-gap: 22px;
        row-gap: 9px;
    }
    .schedule-card::before {
        left: 75px;
    }
    .schedule-card::after {
        left: 68px;
    }
}

/* ---- Privacy Policy & Terms of Service ---------------------------------- */
/* Ô đồng ý phải dễ đọc và không bao giờ tick sẵn (Nghị định 356/2025/NĐ-CP):
   nhãn nhiều dòng nên checkbox căn theo dòng đầu, không căn giữa khối. */
.consent-block {
    margin-top: 20px;
    padding: 18px;
    display: grid;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--paper);
}
.consent-block__head {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}
.consent-block__head h2 {
    margin: 2px 0 0;
    color: var(--brand-900);
    font-size: 17px;
    line-height: 1.35;
}
.consent-block__badge {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--brand-900);
    color: var(--brand-100);
}
.consent-block__version {
    margin: 6px 0 0;
    color: var(--ink-soft);
    font-size: 12px;
}

/* Lớp thông báo ngắn đặt trước ô tick: khách quét 5 dòng này trong ~15 giây,
   toàn văn vẫn cách một lần bấm. Icon căn theo dòng đầu vì mô tả nhiều dòng. */
.consent-summary {
    display: grid;
    gap: 14px;
}
.consent-summary__row {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}
.consent-summary__icon {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--brand-700);
}
.consent-summary__title {
    margin: 0;
    color: var(--brand-900);
    font-size: 14px;
    font-weight: 600;
}
.consent-summary__desc {
    margin: 2px 0 0;
    color: var(--ink-soft);
    font-size: 13px;
    line-height: 1.55;
}

.consent-decline {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--white);
}
.consent-decline > summary {
    min-height: 44px;
    padding: 11px 14px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--brand-800);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.consent-decline > summary::-webkit-details-marker {
    display: none;
}
.consent-decline > summary::after {
    margin-left: auto;
    color: var(--ink-soft);
    content: "+";
    font-size: 17px;
    font-weight: 400;
}
.consent-decline[open] > summary::after {
    content: "−";
}
.consent-decline > summary:focus-visible {
    outline: 3px solid rgba(0, 72, 49, 0.42);
    outline-offset: -3px;
}
.consent-decline__body {
    padding: 0 14px 13px;
    border-top: 1px solid var(--line-soft);
}
.consent-decline__body p {
    margin: 11px 0 0;
    color: var(--ink-soft);
    font-size: 13px;
    line-height: 1.6;
}
.consent-decline__body strong {
    color: var(--ink);
}

.consent-block__boxes {
    padding: 15px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--brand-50);
}
.consent-block__boxes-title {
    margin: 0 0 11px;
    color: var(--brand-900);
    font-size: 13px;
    font-weight: 600;
}
.consent-block__boxes .choice--consent:not(:last-child) {
    margin-bottom: 10px;
}
.choice--consent label {
    min-height: 48px;
    align-items: flex-start;
    padding: 14px;
    line-height: 1.55;
}
.choice--consent label::before {
    margin-top: 3px;
    border-radius: 5px;
}
.choice--consent input:checked + label::before {
    border: 2px solid var(--brand-700);
    background: var(--brand-700);
}
/* `.choice label` is a flex row, so the tag and the sentence must sit inside a
   single flex item — otherwise the tag becomes a sibling column and squeezes the
   text into a very tall, narrow block. */
.consent-text {
    min-width: 0;
    font-size: 13.5px;
    line-height: 1.55;
}
.consent-text strong {
    font-weight: 600;
}
.consent-tag {
    margin-right: 7px;
    padding: 2px 8px;
    display: inline-block;
    border-radius: 999px;
    background: var(--line-soft);
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: 2px;
}
/* 4.63:1 trên --coral-soft. Màu cũ --coral-dark chỉ đạt 3.55:1 — nhãn này cỡ
   10px in hoa nên phải đạt ngưỡng WCAG AA 4.5:1. */
.consent-tag--required {
    background: var(--coral-soft);
    color: var(--danger);
}
.consent-block__links {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: var(--ink-soft);
    font-size: 12px;
}
.consent-link {
    min-height: 40px;
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    color: var(--brand-800);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.consent-link:hover {
    border-color: var(--brand-700);
    background: var(--brand-50);
}
.consent-link:focus-visible {
    outline: 3px solid rgba(0, 72, 49, 0.42);
    outline-offset: 2px;
}

.legal-entry-card .field-help,
.legal-consent-card .field-help {
    margin-bottom: 14px;
}
.legal-consent-card__intro {
    max-width: 62ch;
    margin: 0 0 18px;
    color: var(--ink-soft);
    font-size: 14px;
    line-height: 1.55;
}
/* Legal is a reading page, not a dense settings form. Keep every block visually
   separate when it is rendered inside the Guest shell. */
.guest-main > .guest-page-head + .legal-consent-card {
    margin-top: 8px;
}
.guest-main > .legal-consent-card + .card,
.guest-main > .legal-consent-card + .day-tabs--legal {
    margin-top: 24px;
}
.guest-main > .day-tabs--legal {
    margin-bottom: 16px;
    padding: 4px 0;
}
.guest-main > .legal-document + .button {
    margin-top: 22px;
}
.legal-consent-card .card__body,
.legal-document .card__body {
    padding: 22px;
}
.legal-consent-row {
    padding: 16px 0;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    border-top: 1px solid var(--line-soft);
}
.legal-consent-row:first-of-type {
    border-top: 0;
}
.legal-consent-row__icon {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--brand-50);
    color: var(--brand-800);
}
.legal-consent-row strong {
    display: block;
    font-size: 14px;
    line-height: 1.4;
}
.legal-consent-row small {
    display: block;
    margin-top: 4px;
    color: var(--ink-soft);
    font-size: 13px;
    line-height: 1.45;
}
.legal-consent-card .button[data-set-retention-consent] {
    margin-top: 18px;
}
.legal-consent-card .button[data-set-retention-consent] + .field-help {
    margin: 16px 0 0;
    line-height: 1.55;
}

.legal-notice {
    margin: 0 0 14px;
    padding: 11px 13px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    border-radius: var(--radius-sm);
    background: var(--info-soft);
    color: var(--info);
    font-size: 12px;
    line-height: 1.5;
}
.legal-notice > .icon {
    flex: 0 0 auto;
    margin-top: 1px;
}
.legal-notice--warning {
    background: var(--warning-soft);
    color: var(--warning);
}

.legal-document__head {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line-soft);
}
.legal-document__head h2 {
    margin: 0 0 4px;
    font-size: 18px;
    line-height: 1.35;
}
.legal-document__meta {
    margin: 0;
    color: var(--ink-soft);
    font-size: 12px;
}
/* Thân văn bản pháp lý: dòng dài, đọc lâu — ưu tiên line-height thoáng và giới
   hạn độ rộng dòng để mắt không phải quét quá xa. */
.legal-body {
    max-width: 68ch;
    font-size: 14px;
    line-height: 1.7;
}
.legal-body h2,
.legal-body h3,
.legal-body h4 {
    margin: 22px 0 8px;
    color: var(--brand-900);
    line-height: 1.4;
}
.legal-body h2 {
    font-size: 16px;
}
.legal-body h3 {
    font-size: 14px;
}
.legal-body h4 {
    font-size: 13px;
}
.legal-body > *:first-child {
    margin-top: 0;
}
.legal-body p {
    margin: 0 0 10px;
}
.legal-toc {
    margin: 0 0 22px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    background: var(--brand-50);
}
.legal-toc summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 13px;
    cursor: pointer;
    color: var(--brand-900);
    font-weight: 700;
}
.legal-toc nav {
    padding: 0 13px 13px;
}
.legal-toc ol {
    display: grid;
    gap: 7px;
    margin: 0;
    padding-left: 20px;
}
.legal-toc a {
    color: var(--ink);
    text-decoration: none;
    line-height: 1.45;
}
.legal-toc a:hover,
.legal-toc a:focus-visible {
    color: var(--brand-800);
    text-decoration: underline;
}
.legal-toc__level-3 {
    margin-left: 12px;
}
.legal-toc__level-4 {
    margin-left: 24px;
}
.legal-body ul {
    margin: 0 0 12px;
    padding-left: 20px;
}
.legal-body li {
    margin-bottom: 5px;
}
.legal-table-scroll {
    margin: 0 0 14px;
    overflow-x: auto;
}
.legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.legal-table th,
.legal-table td {
    padding: 8px 10px;
    border: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}
.legal-table th {
    background: var(--brand-50);
    color: var(--brand-900);
    font-size: 12px;
}

.legal-public {
    min-height: 100vh;
    background: var(--sand);
}
.legal-public__head {
    padding: 14px max(16px, env(safe-area-inset-left)) 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
}
.legal-public__head .guest-brand {
    color: inherit;
    text-decoration: none;
}
.legal-public__main {
    max-width: 820px;
    margin: 0 auto;
    padding: 20px 16px calc(40px + env(safe-area-inset-bottom));
}
.legal-public__intro {
    margin: 4px 0 16px;
}
.legal-public__intro .eyebrow {
    margin: 0 0 6px;
}
.legal-public__intro h1 {
    margin: 0;
    font-size: clamp(24px, 5vw, 32px);
    line-height: 1.2;
    color: var(--brand-900, #003a2a);
}
.legal-gate {
    min-height: 100vh;
    background: var(--sand);
}
.legal-gate__main {
    width: min(100% - 32px, 760px);
    margin: 0 auto;
    padding: 42px 0 calc(42px + env(safe-area-inset-bottom));
}
.legal-gate__card h1 {
    margin: 4px 0 10px;
    font-size: clamp(25px, 4vw, 36px);
    line-height: 1.18;
}
.legal-gate__card > .card__body > p:not(.eyebrow):not(.field-help) {
    max-width: 64ch;
    color: var(--ink-soft);
    line-height: 1.6;
}
.legal-gate__links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 22px 0;
}
.legal-gate__form {
    margin-top: 8px;
}
.legal-gate__form .choice {
    margin-bottom: 10px;
}
.legal-gate__form .button {
    margin-top: 12px;
}
.legal-confirm-modal {
    position: fixed;
    z-index: 1100;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    overflow-y: auto;
    background: transparent;
}
/* Scrim + page blur live on a pseudo-element: putting backdrop-filter on the
   overlay itself makes it a backdrop root, which flattens the sticky action
   bar's own backdrop-filter to a solid colour instead of blurring the document. */
.legal-confirm-modal::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgb(20 43 42 / 48%);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    pointer-events: none;
}
.legal-confirm-modal__dialog {
    position: relative;
    width: min(100%, 720px);
    max-height: min(860px, calc(100dvh - 40px));
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--paper);
    box-shadow: 0 24px 72px rgb(18 37 35 / 28%);
}
.legal-confirm-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px 16px;
    border-bottom: 1px solid var(--line-soft);
}
.legal-confirm-modal__head h2 {
    margin: 2px 0 0;
    font-size: 24px;
}
.legal-confirm-modal__body {
    max-height: calc(min(860px, 100dvh - 40px) - 104px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 18px 22px 24px;
}
.legal-summary-cards {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}
.legal-summary-cards section {
    padding: 14px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    background: var(--sand);
}
.legal-summary-cards strong {
    color: var(--brand-900);
}
.legal-summary-cards p {
    margin: 5px 0 0;
    color: var(--ink-soft);
    font-size: 13px;
    line-height: 1.55;
}
.legal-confirm-modal__confirm-view > .button {
    margin-bottom: 14px;
}
.legal-modal-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 18px;
    padding: 4px;
    border: 1px solid var(--brand-100);
    border-radius: 14px;
    background: var(--brand-50);
    overflow-x: auto;
    scrollbar-width: none;
}
.legal-modal-tabs::-webkit-scrollbar {
    display: none;
}
.legal-modal-tab {
    flex: 1 0 max-content;
    min-width: max-content;
    min-height: 44px;
    padding: 8px 14px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--brand-800);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    cursor: pointer;
}
.legal-modal-tab.active {
    background: var(--brand-800);
    color: var(--white);
    box-shadow: 0 3px 8px rgb(0 72 49 / 22%);
}
.legal-reader-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    gap: 6px;
    padding: 5px;
    border-color: var(--brand-100);
    background: var(--brand-50);
}
.legal-reader-tabs .legal-modal-tab {
    min-width: 0;
    padding: 8px;
    overflow: hidden;
    color: var(--brand-800);
    font-size: 14px;
    line-height: 1;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.legal-reader-tabs .legal-modal-tab.active {
    background: var(--brand-800);
    color: var(--white);
    box-shadow: 0 3px 8px rgb(0 72 49 / 22%);
}
.legal-modal-document {
    padding: 2px 2px 8px;
}
.legal-modal-document__head {
    margin: 0 0 14px;
}
.legal-modal-document__head h3 {
    margin: 0 0 4px;
}
/* Overlays the bottom of the scrolling body from *outside* it, so the document
   text behind it is a real backdrop that backdrop-filter can blur. */
.legal-modal-details__actions {
    position: absolute;
    z-index: 2;
    inset: auto 0 0;
    display: grid;
    gap: 8px;
    box-sizing: border-box;
    padding: 20px 22px calc(20px + env(safe-area-inset-bottom));
    background: linear-gradient(
        to bottom,
        rgb(255 254 251 / 20%),
        rgb(255 254 251 / 48%) 45%,
        rgb(255 254 251 / 58%)
    );
    box-shadow: 0 -12px 26px rgb(24 50 52 / 8%);
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
}
.legal-modal-details__actions[hidden] {
    display: none;
}
/* Room to scroll the last paragraph clear of the floating action bar. */
.legal-confirm-modal__body:has(> [data-legal-details-view]:not([hidden])) {
    padding-bottom: calc(104px + env(safe-area-inset-bottom));
}
.legal-confirm-modal__form {
    display: grid;
    gap: 8px;
    margin-top: 16px;
}
.legal-confirm-modal__form .choice {
    margin: 0;
}
.legal-confirm-modal__form label.choice {
    min-height: 56px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--white);
    cursor: pointer;
}
.legal-confirm-modal__form label.choice input {
    position: static;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    margin: 1px 0 0;
    appearance: auto;
    opacity: 1;
    pointer-events: auto;
    accent-color: var(--brand-700);
}
.legal-confirm-modal__form label.choice::before {
    display: none;
}
.legal-confirm-modal__form label.choice:has(input:checked) {
    border-color: var(--brand-700);
    background: var(--brand-50);
    box-shadow: inset 0 0 0 1px var(--brand-700);
}
.legal-confirm-modal__form label.choice.has-error {
    border-color: var(--danger);
    background: var(--danger-soft);
    box-shadow: inset 0 0 0 1px var(--danger);
}
.legal-confirm-modal__form .form-message--error {
    margin: 0;
    padding: 11px 12px;
    border: 1px solid var(--danger);
    border-radius: var(--radius-sm);
    background: var(--danger-soft);
    color: var(--danger);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
}
.legal-confirm-modal__form .button[type="submit"] {
    margin-top: 4px;
}
.guest-main > .guest-page-head + .legal-reader {
    margin-top: 18px;
}
.guest-main--me > .guest-legal-page {
    position: relative;
    padding-top: 46px;
}
.guest-legal-page > .guest-page-head + .legal-reader {
    margin-top: 18px;
}
/* Đồng bộ tiêu đề với hero heading của các trang guest khác (Trợ giúp/Hồ sơ):
   dùng font travel-serif thay vì font base, để không lệch phông. */
.guest-legal-page .guest-page-head h1 {
    color: #063f35;
    font-family: var(--font-travel-serif);
    font-size: clamp(31px, 7.5vw, 42px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.04em;
    text-wrap: balance;
}
.guest-legal-page .guest-page-head .eyebrow {
    /* Lined up with the back button's own row instead of sitting in-flow
       above the heading, so it reads as a single top row with the button. */
    position: absolute;
    top: 14px;
    left: 55px;
    height: 25px;
    margin: 0;
    display: flex;
    align-items: center;
    color: #08735e;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.17em;
}
.guest-legal-page .guest-page-head > p:last-child {
    max-width: 390px;
    color: #42645f;
    font-size: 15px;
    line-height: 1.45;
}
.legal-reader {
    display: grid;
    gap: 16px;
}
.legal-reader-tabs {
    margin: 0;
}
.legal-reader .legal-document {
    margin: 0;
}
.legal-consent-management {
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    background: var(--paper);
}
.legal-consent-management > summary {
    min-height: 52px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--brand-900);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}
.legal-consent-management > summary::-webkit-details-marker {
    display: none;
}
.legal-consent-management > summary > .icon:last-child {
    margin-left: auto;
    transition: transform 180ms ease;
}
.legal-consent-management[open] > summary > .icon:last-child {
    transform: rotate(180deg);
}
.legal-consent-management__body {
    padding: 22px 24px 24px;
    border-top: 1px solid var(--line-soft);
}
.legal-consent-management__body .legal-consent-card {
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.legal-consent-management__body .legal-consent-card .card__body {
    padding: 0;
}
.legal-admin-card {
    margin-bottom: 22px;
}
.legal-admin-card .section-heading {
    align-items: center;
    gap: 28px;
    margin-bottom: 18px;
}
.legal-admin-card .card__body {
    padding: 26px 28px 28px;
}
.legal-admin-card .section-heading > div {
    min-width: 0;
}
.legal-admin-card .section-heading h2 {
    margin-bottom: 8px;
}
.legal-admin-card .section-heading p {
    line-height: 1.5;
}
.legal-admin-card > .card__body > .field-help {
    max-width: 920px;
    margin: 0 0 20px;
    padding: 12px 14px;
    border-left: 3px solid var(--brand-300);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--brand-50);
    font-size: 13px;
    line-height: 1.55;
}
.legal-admin-draft-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 8px 0 20px;
    padding: 16px 18px;
    border: 1px solid var(--brand-100);
    border-radius: var(--radius-md);
    background: var(--brand-50);
}
.legal-admin-draft-banner > div {
    min-width: 0;
}
.legal-admin-draft-banner .eyebrow {
    margin-bottom: 5px;
    color: var(--brand-700);
}
.legal-admin-draft-banner strong {
    display: block;
    margin-bottom: 4px;
    color: var(--ink);
}
.legal-admin-draft-banner p:last-child {
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.5;
}
.legal-admin-draft-banner .button {
    flex: 0 0 auto;
    white-space: nowrap;
}
.legal-admin-empty-state {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
    padding: 18px 20px;
    border: 1px dashed var(--line);
    border-radius: var(--radius-md);
    background: var(--white);
    color: var(--ink-soft);
}
.legal-admin-empty-state > svg,
.legal-admin-empty-state > .icon {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    color: var(--brand-700);
}
.legal-admin-empty-state strong {
    display: block;
    margin-bottom: 3px;
    color: var(--ink);
}
.legal-admin-empty-state p {
    margin: 0;
    line-height: 1.5;
}
.legal-publish-rules {
    margin: 0 0 22px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--sand);
}
.legal-publish-rules__heading {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--brand-700);
}
.legal-publish-rules__heading > .icon {
    flex: 0 0 auto;
    width: 21px;
    height: 21px;
    margin-top: 1px;
}
.legal-publish-rules__heading strong,
.legal-publish-rules__heading span {
    display: block;
}
.legal-publish-rules__heading strong {
    color: var(--ink);
}
.legal-publish-rules__heading span {
    margin-top: 3px;
    color: var(--ink-soft);
    font-size: 13px;
    line-height: 1.45;
}
.legal-publish-rules ul {
    display: grid;
    gap: 6px;
    margin: 12px 0 0 31px;
    padding: 0;
    color: var(--ink-soft);
    font-size: 13px;
    line-height: 1.5;
}
.legal-publish-rules li::marker {
    color: var(--brand-700);
}
.legal-admin-card .table-wrap {
    margin-top: 20px;
}
.legal-admin-card .data-table {
    table-layout: fixed;
}
.legal-admin-card .data-table th {
    padding: 14px 16px;
}
.legal-admin-card .data-table td {
    padding: 18px 16px;
    line-height: 1.5;
}
.legal-admin-card .data-table th:nth-child(1) {
    width: 9%;
}
.legal-admin-card .data-table th:nth-child(2) {
    width: 10%;
}
.legal-admin-card .data-table th:nth-child(3),
.legal-admin-card .data-table th:nth-child(4) {
    width: 8%;
}
.legal-admin-card .data-table th:nth-child(5) {
    width: 7%;
}
.legal-admin-card .data-table td:nth-child(6) {
    color: var(--ink-soft);
    overflow-wrap: anywhere;
}
@media (max-width: 1280px) {
    .legal-admin-card .data-table th:nth-child(5),
    .legal-admin-card .data-table td:nth-child(5) {
        display: none;
    }
}
@media (max-width: 720px) {
    .legal-admin-card .card__body {
        padding: 22px 18px 20px;
    }
    .legal-admin-card > .card__body > .field-help {
        margin-bottom: 16px;
    }
    .legal-admin-draft-banner {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }
    .legal-admin-draft-banner .button {
        width: 100%;
    }
    .legal-admin-empty-state {
        align-items: flex-start;
        padding: 16px;
    }
    .legal-publish-rules {
        padding: 15px;
    }
    .legal-consent-management__body {
        padding: 18px;
    }
    .legal-consent-card__intro {
        font-size: 13px;
    }
}
.legal-editor-modal {
    position: fixed;
    z-index: 1100;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    overflow-y: auto;
    background: rgb(20 43 42 / 38%);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.legal-editor-modal__dialog {
    width: min(100%, 1040px);
    max-height: calc(100dvh - 48px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--paper);
    box-shadow: 0 24px 72px rgb(18 37 35 / 28%);
}
.legal-editor-modal__head {
    padding: 20px 28px 16px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--line-soft);
}
.legal-editor-modal__head h2 {
    margin: 2px 0 6px;
}
.legal-editor-modal__head p:not(.eyebrow) {
    margin: 0;
    color: var(--ink-soft);
    font-size: 14px;
}
.legal-editor-modal__body {
    min-height: 0;
    overflow-y: auto;
    padding: 24px 28px 0;
}
.legal-editor-modal .legal-body-input {
    min-height: 360px;
}
.legal-editor-modal .drawer-actions {
    position: sticky;
    bottom: 0;
    z-index: 1;
    margin: 22px -28px 0;
    padding: 16px 28px calc(16px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line-soft);
    background: var(--paper);
    box-shadow: 0 -10px 24px rgb(0 40 29 / 7%);
}
.legal-editor-modal .drawer-actions .button {
    min-height: 48px;
}
.legal-draft-panel {
    margin: 6px 0 20px;
    padding: 16px;
    border: 1px solid var(--brand-100);
    border-radius: var(--radius-md);
    background: var(--brand-50);
}
.legal-draft-panel > .eyebrow {
    margin: 0 0 12px;
}
/* Toàn văn chính sách rất dài — dùng font đẳng khoảng để nhìn rõ cấu trúc
   markdown (bảng, gạch đầu dòng) khi Pháp lý dán nội dung vào. */
.legal-body-input {
    min-height: 320px;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 13px;
    line-height: 1.6;
    resize: vertical;
    white-space: pre;
    overflow-wrap: normal;
    overflow-x: auto;
}
.day-tabs--legal {
    flex-wrap: wrap;
}
.day-tabs--legal .day-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.day-tabs--legal .flag-circle {
    width: 18px;
    height: 18px;
}

/* Vùng chạm tối thiểu ~44px cho control chính trên cảm ứng. Đặt cuối file để
   thắng các rule cơ sở (.status-chip, .day-tab...) trong cascade. */
@media (max-width: 720px) {
    .button--small {
        min-height: 44px;
    }
    .status-chip {
        min-height: 40px;
    }
    .day-tab {
        min-height: 44px;
    }
    .icon-button--quiet {
        min-width: 44px;
        min-height: 44px;
    }
    .consent-link {
        min-height: 44px;
    }
    /* Ba lớp padding lồng nhau (block → boxes → label) làm dòng chữ trong ô tick
       hẹp lại trên điện thoại; thu gọn để câu đồng ý còn đủ rộng để đọc. */
    .consent-block {
        padding: 14px;
    }
    .consent-block__boxes {
        padding: 12px;
    }
    .choice--consent label {
        padding: 12px 11px;
    }
    .legal-gate__main {
        width: min(100% - 24px, 760px);
        padding-top: 24px;
    }
    .legal-gate__links .button {
        width: 100%;
    }
    .legal-confirm-modal {
        padding: 10px;
        align-items: end;
    }
    .legal-confirm-modal__dialog {
        max-height: calc(100dvh - 20px);
        border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-sm);
    }
    .legal-confirm-modal__head,
    .legal-confirm-modal__body {
        padding-left: 16px;
        padding-right: 16px;
    }
    .legal-confirm-modal__body {
        max-height: calc(100dvh - 112px);
    }
    .legal-modal-details__actions {
        padding-left: 16px;
        padding-right: 16px;
    }
    .legal-editor-modal {
        align-items: end;
        padding: 10px;
    }
    .legal-editor-modal__dialog {
        max-height: calc(100dvh - 20px);
        border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-sm);
    }
    .legal-editor-modal__head {
        padding: 18px 16px 14px;
    }
    .legal-editor-modal__head h2 {
        font-size: 21px;
    }
    .legal-editor-modal__body {
        padding: 18px 16px 0;
    }
    .legal-editor-modal .legal-body-input {
        min-height: 280px;
    }
    .legal-editor-modal .drawer-actions {
        grid-template-columns: 1fr;
        margin: 18px -16px 0;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    }
}

/* Keep P1 surfaces above the generic card rules on the mobile cascade.
   Matches the distinct cool/warm treatments at .card specificity so the
   generic .card{background:paper} rule cannot flatten them back to identical. */
.card.p1-weather-ops {
    border: 1px solid color-mix(in srgb, var(--line) 72%, var(--brand-800) 28%);
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--paper) 92%, var(--brand-800) 8%),
        var(--paper)
    );
}
.card.p1-weather-card {
    border: 1px solid color-mix(in srgb, var(--line-soft) 58%, var(--ocean-soft, #cfe6e2) 42%);
    background: linear-gradient(
        158deg,
        color-mix(in srgb, var(--ocean-soft, #e5f2f0) 58%, var(--paper)),
        var(--paper) 60%
    );
}
.card.p1-readiness-card {
    border: 1px solid color-mix(in srgb, var(--line-soft) 58%, var(--coral-soft, #ffd9c9) 42%);
    background: linear-gradient(
        158deg,
        color-mix(in srgb, var(--coral-soft, #fff0e9) 52%, var(--paper)),
        var(--paper) 58%
    );
}

/* =========================================================================
   P2.1 — Accessibility popover (text size + high contrast)
   ========================================================================= */
.guest-a11y {
    position: relative;
    display: inline-flex;
}
.guest-accessibility-toggle.is-active {
    border-color: var(--brand-900);
    background: var(--brand-800);
    color: var(--white);
    box-shadow: 0 4px 12px rgba(0, 72, 49, 0.28);
}
.guest-a11y__panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 200;
    width: min(300px, calc(100vw - 28px));
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--paper);
    box-shadow: var(--shadow-md);
    animation: guest-a11y-pop 180ms ease;
    transform-origin: top right;
}
@keyframes guest-a11y-pop {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
/* The panel is anchored to the "A+" button, which sits well left of the screen
   edge (refresh + language switch follow it). On narrow screens a right:0
   panel overflows the LEFT viewport edge and gets clipped. Below the topbar,
   pin it to the viewport with equal side gutters so it is always fully on
   screen. */
@media (max-width: 560px) {
    .guest-a11y__panel {
        position: fixed;
        top: calc(env(safe-area-inset-top) + 74px);
        left: 12px;
        right: 12px;
        width: auto;
    }
}
.guest-a11y__title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
    color: var(--ink);
}
.guest-a11y__title .icon {
    width: 18px;
    height: 18px;
    color: var(--brand-800);
}
.guest-a11y__group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.guest-a11y__group-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-soft);
}
.guest-a11y__sizes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.guest-a11y__size {
    min-height: 60px;
    padding: 8px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 1.5px solid var(--line);
    border-radius: 13px;
    background: var(--white);
    color: var(--ink);
    cursor: pointer;
    transition:
        transform 140ms ease,
        border-color 160ms ease,
        background 160ms ease;
}
.guest-a11y__size:hover {
    border-color: color-mix(in srgb, var(--brand-700) 45%, var(--brand-100));
}
.guest-a11y__size:active {
    transform: scale(0.95);
}
.guest-a11y__size-glyph {
    font-weight: 850;
    line-height: 1;
    color: var(--brand-800);
}
.guest-a11y__size--0 .guest-a11y__size-glyph {
    font-size: 17px;
}
.guest-a11y__size--1 .guest-a11y__size-glyph {
    font-size: 22px;
}
.guest-a11y__size--2 .guest-a11y__size-glyph {
    font-size: 28px;
}
.guest-a11y__size-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-soft);
}
.guest-a11y__size.is-active {
    border-color: var(--brand-900);
    background: var(--brand-50);
    box-shadow: 0 0 0 1.5px var(--brand-800) inset;
}
.guest-a11y__size.is-active .guest-a11y__size-name {
    color: var(--brand-900);
}
.guest-a11y__contrast {
    min-height: 48px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1.5px solid var(--line);
    border-radius: 13px;
    background: var(--white);
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 160ms ease,
        background 160ms ease;
}
.guest-a11y__contrast-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.guest-a11y__contrast-text .icon {
    width: 18px;
    height: 18px;
    color: var(--brand-800);
}
.guest-a11y__switch {
    position: relative;
    flex: none;
    width: 44px;
    height: 26px;
    border-radius: 999px;
    background: var(--line);
    transition: background 180ms ease;
}
.guest-a11y__switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
    transition: transform 180ms ease;
}
.guest-a11y__contrast.is-on {
    border-color: var(--brand-900);
    background: var(--brand-50);
}
.guest-a11y__contrast.is-on .guest-a11y__switch {
    background: var(--brand-800);
}
.guest-a11y__contrast.is-on .guest-a11y__switch::after {
    transform: translateX(18px);
}

/* Extra-large text is the second zoom step; see the `zoom` rules next to the
   larger-text mode above. */

/* High-contrast color overrides are consolidated after all guest components. */

/* =========================================================================
   P2.2 — Conversation translation
   ========================================================================= */
.guest-translate {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.guest-translate__loading {
    padding: 24px 0;
}
.guest-translate__langs {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: end;
    gap: 8px;
}
.guest-translate__lang {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-soft);
}
.guest-translate__lang .select {
    min-height: 48px;
}
.guest-translate__swap {
    width: 44px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    background: var(--white);
    color: var(--brand-800);
    cursor: pointer;
    transition:
        transform 200ms ease,
        background 160ms ease,
        border-color 160ms ease;
}
.guest-translate__swap:hover {
    border-color: color-mix(in srgb, var(--brand-700) 45%, var(--brand-100));
    background: var(--brand-50);
}
.guest-translate__swap:active {
    transform: rotate(180deg) scale(0.94);
}
.guest-translate__swap .icon {
    width: 20px;
    height: 20px;
}
.guest-translate__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.guest-translate__field-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
}
.guest-translate__textwrap {
    position: relative;
}
.guest-translate__text {
    min-height: 92px;
    padding-bottom: 30px;
    font-size: 17px;
    line-height: 1.5;
    resize: vertical;
}
.guest-translate__field-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.guest-translate__field-foot:empty {
    display: none;
}
.guest-translate__mic {
    min-height: 44px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1.5px solid color-mix(in srgb, var(--brand-700) 42%, var(--brand-100));
    border-radius: 999px;
    background: var(--white);
    color: var(--brand-800);
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition:
        transform 150ms ease,
        background 180ms ease,
        border-color 180ms ease;
}
.guest-translate__mic .icon {
    width: 19px;
    height: 19px;
}
.guest-translate__mic:hover {
    background: var(--brand-50);
}
.guest-translate__mic:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--surface-2, #f1f4f2);
}
.guest-translate__mic:disabled:hover,
.guest-translate__mic:disabled:active {
    background: var(--surface-2, #f1f4f2);
    transform: none;
}
.guest-translate__mic:active {
    transform: scale(0.95);
}
.guest-translate__mic.is-recording {
    border-color: var(--danger);
    background: var(--danger-soft);
    color: var(--danger);
    animation: guest-mic-pulse 1.4s ease-in-out infinite;
}
@keyframes guest-mic-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 40%, transparent);
    }
    50% {
        box-shadow: 0 0 0 8px transparent;
    }
}
.guest-translate__count {
    position: absolute;
    right: 12px;
    bottom: 9px;
    padding: 1px 6px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--paper) 80%, transparent);
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}
.guest-translate__mic-hint {
    flex: 1;
    min-width: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: var(--surface-2, #f1f4f2);
    font-size: 12px;
    line-height: 1.4;
    color: var(--ink-soft);
}
.guest-translate__mic-hint .icon {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--warning, #8f5d20);
}
.guest-translate__error {
    margin: -6px 0 0;
}
.guest-translate__error[hidden] {
    display: none;
}
.guest-translate__go .icon {
    width: 20px;
    height: 20px;
}
.guest-translate__go.is-loading {
    opacity: 0.75;
    pointer-events: none;
}
.guest-translate__result[hidden] {
    display: none;
}
/* Result: one scannable row per language — a circular locale badge, the
   language name, the text, and a replay control. The target row reads larger
   and bolder as the primary answer. */
.guest-translate__result-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line-soft);
    border-radius: 18px;
    overflow: hidden;
    background: var(--paper);
    box-shadow: var(--shadow-sm);
    animation: guest-translate-in 260ms ease;
}
@keyframes guest-translate-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.guest-translate__row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 16px;
}
.guest-translate__row + .guest-translate__row {
    border-top: 1px solid var(--line-soft);
}
.guest-translate__row--primary {
    background: color-mix(in srgb, var(--brand-50) 55%, var(--paper));
}
.guest-translate__badge {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    overflow: hidden;
    background: var(--sand);
    box-shadow: inset 0 0 0 1px var(--line-soft);
    line-height: 1;
}
.guest-translate__badge .flag-circle {
    width: 100%;
    height: 100%;
    box-shadow: none;
}
.guest-translate__badge .flag-circle--code {
    font-size: 15px;
    box-shadow: inset 0 0 0 1px var(--brand-100);
}
.guest-translate__row--primary .guest-translate__badge {
    background: var(--brand-50);
    box-shadow: inset 0 0 0 1px var(--brand-100);
}
.guest-translate__row-body {
    min-width: 0;
}
.guest-translate__row-lang {
    display: block;
    margin-bottom: 3px;
    font-size: 12px;
    font-weight: 800;
    color: var(--brand-800);
}
.guest-translate__row-text {
    margin: 0;
    font-size: 18px;
    line-height: 1.4;
    color: var(--ink);
    overflow-wrap: anywhere;
}
.guest-translate__row--primary .guest-translate__row-text {
    font-size: 23px;
    font-weight: 700;
    line-height: 1.35;
}
.guest-translate__replay {
    flex: none;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1.5px solid color-mix(in srgb, var(--brand-700) 40%, var(--brand-100));
    border-radius: 50%;
    background: var(--white);
    color: var(--brand-800);
    cursor: pointer;
    transition:
        transform 150ms ease,
        background 160ms ease,
        border-color 160ms ease;
}
.guest-translate__replay:hover {
    background: var(--brand-50);
    border-color: var(--brand-700);
}
.guest-translate__replay:active {
    transform: scale(0.92);
}
.guest-translate__replay .icon {
    width: 20px;
    height: 20px;
}
/* Playing state: filled + a soft pulsing ring so the guest sees it is active. */
.guest-translate__replay.is-speaking {
    border-color: var(--brand-800);
    background: var(--brand-800);
    color: var(--white);
    animation: guest-speak-pulse 1.3s ease-in-out infinite;
}
@keyframes guest-speak-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-700) 45%, transparent);
    }
    50% {
        box-shadow: 0 0 0 7px transparent;
    }
}
.guest-translate__safety {
    display: flex;
    gap: 10px;
    padding: 14px;
    border-radius: 14px;
    background: var(--info-soft);
    border: 1px solid color-mix(in srgb, var(--info) 26%, var(--info-soft));
}
.guest-translate__safety-icon {
    flex: none;
    color: var(--info);
}
.guest-translate__safety-icon .icon {
    width: 20px;
    height: 20px;
}
.guest-translate__safety p {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink);
}
.guest-translate__emergency-link {
    margin-top: 4px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border: 1.5px solid color-mix(in srgb, var(--danger) 55%, var(--danger-soft));
    border-radius: 999px;
    background: var(--danger-soft);
    color: var(--danger);
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition:
        transform 150ms ease,
        background 160ms ease,
        box-shadow 200ms ease;
}
.guest-translate__emergency-link .icon {
    width: 17px;
    height: 17px;
}
.guest-translate__emergency-link:hover {
    background: color-mix(in srgb, var(--danger) 16%, var(--danger-soft));
    box-shadow: 0 4px 12px color-mix(in srgb, var(--danger) 22%, transparent);
}
.guest-translate__emergency-link:active {
    transform: scale(0.97);
}
.guest-translate__blocked {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 22px 18px;
    text-align: center;
    border: 1px solid color-mix(in srgb, var(--danger) 26%, var(--danger-soft));
    border-radius: 18px;
    background: color-mix(in srgb, var(--danger-soft) 60%, var(--paper));
}
.guest-translate__blocked-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--danger);
    background: var(--white);
}
.guest-translate__blocked-icon .icon {
    width: 26px;
    height: 26px;
}
.guest-translate__blocked p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
    .guest-a11y__panel,
    .guest-translate__result-card {
        animation: none;
    }
    .guest-translate__mic.is-recording,
    .guest-translate__replay.is-speaking {
        animation: none;
    }
    .guest-translate__swap:active {
        transform: scale(0.94);
    }
}

@media (max-width: 400px) {
    .guest-translate__langs {
        grid-template-columns: 1fr;
    }
    .guest-translate__swap {
        justify-self: center;
        width: 52px;
        transform: rotate(90deg);
    }
    .guest-translate__swap:active {
        transform: rotate(270deg) scale(0.94);
    }
}

/* =========================================================================
   Guest access — read-only current info + reissue/danger actions
   ========================================================================= */
.guest-access__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.access-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.6;
}
.access-status .icon {
    width: 14px;
    height: 14px;
}
.access-status--ok {
    color: var(--success);
    background: var(--success-soft);
}
.access-status--warn {
    color: var(--warning);
    background: var(--warning-soft);
}
.access-status--muted {
    color: var(--ink-soft);
    background: var(--surface-2, #f1f4f2);
}
.guest-access__hint {
    margin: 6px 0 14px;
    font-size: 12px;
    line-height: 1.5;
}
.access-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.access-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    background: var(--white);
}
.access-row__info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.access-row__label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.access-row__value {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    overflow-wrap: anywhere;
}
.access-row__value--mono {
    font-family: ui-monospace, "SF Mono", "Roboto Mono", Menlo, monospace;
    font-size: 13px;
}
.access-row__actions {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.access-row__copy .icon {
    width: 15px;
    height: 15px;
}
.guest-access__danger {
    margin-top: 14px;
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--danger-soft));
    border-radius: 14px;
    background: color-mix(in srgb, var(--danger-soft) 45%, var(--paper));
}
.guest-access__danger-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.guest-access__danger-text strong {
    font-size: 13px;
    color: var(--danger);
}
.guest-access__danger-text small {
    font-size: 12px;
    line-height: 1.45;
    color: var(--ink-soft);
}
.guest-access__danger .button {
    flex: none;
}
@media (max-width: 520px) {
    .access-row {
        flex-direction: column;
        align-items: stretch;
    }
    .access-row__actions {
        justify-content: flex-start;
    }
    .guest-access__danger {
        flex-direction: column;
        align-items: stretch;
    }
    .guest-access__danger .button {
        width: 100%;
    }
}

/* =========================================================================
   IKI Companion — Back Office control surface
   ========================================================================= */
.companion-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    margin: 0 0 20px;
}
.companion-health {
    margin: 0 0 20px;
}
.companion-health__head,
.companion-health-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.companion-health__head {
    align-items: start;
}
.companion-health__head h2 {
    margin-bottom: 4px;
}
.companion-health-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px;
    margin-top: 14px;
}
.companion-health-row {
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    background: var(--paper);
}
.companion-health-row > span:last-child {
    color: var(--ink-soft);
    font-size: 11px;
    overflow-wrap: anywhere;
    text-align: right;
}
.companion-kpi {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 84px;
    padding: 15px 16px;
    border: 1px solid color-mix(in srgb, var(--brand-800) 18%, var(--line));
    border-radius: var(--radius-md);
    background: linear-gradient(145deg, var(--brand-50), var(--paper) 68%);
}
.companion-kpi strong {
    font-size: 26px;
    line-height: 1;
    color: var(--brand-900);
}
.companion-kpi span {
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 700;
    overflow-wrap: anywhere;
    text-transform: capitalize;
}
.companion-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}
.companion-grid > .card {
    min-width: 0;
}
.choice-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
}
.companion-choice {
    min-height: 32px;
}
.companion-result {
    display: grid;
    gap: 10px;
    margin-top: 14px;
    color: var(--ink-soft);
    font-size: 13px;
    line-height: 1.5;
}
.companion-result > article,
.companion-place {
    padding: 12px;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: var(--paper);
}
.companion-result p,
.companion-result ul,
.companion-place p {
    margin: 0;
}
.companion-explanation {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 10px 0 0;
}
.companion-explanation div {
    min-width: 0;
    padding: 7px 8px;
    border-radius: 8px;
    background: var(--brand-50);
}
.companion-explanation dt {
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}
.companion-explanation dd {
    margin: 3px 0 0;
    color: var(--ink);
    font-size: 12px;
    overflow-wrap: anywhere;
}
.companion-import {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
}
.companion-import summary {
    cursor: pointer;
    color: var(--brand-800);
    font-weight: 800;
}
.companion-import .survey-form {
    margin-top: 12px;
}
.companion-places {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}
.companion-place {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}
.companion-place > div:first-child {
    min-width: 0;
}
.companion-place strong {
    display: block;
    margin-top: 8px;
    color: var(--ink);
    font-size: 13px;
}
.companion-cohort {
    grid-column: 1 / -1;
}
.companion-cohort-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    max-height: 330px;
    gap: 8px;
    overflow: auto;
    padding: 4px;
    border-radius: 12px;
    background: var(--sand);
}
.companion-cohort-row {
    display: flex;
    gap: 10px;
    align-items: start;
    min-height: 52px;
    padding: 10px;
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    background: var(--paper);
    cursor: pointer;
}
.companion-cohort-row input {
    margin-top: 3px;
}
.companion-cohort-row span {
    display: grid;
    gap: 2px;
    min-width: 0;
}
.companion-cohort-row strong,
.companion-cohort-row small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.companion-cohort-row small {
    color: var(--ink-soft);
}
@media (max-width: 860px) {
    .companion-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 520px) {
    .companion-health__head,
    .companion-health-row {
        align-items: stretch;
        flex-direction: column;
    }
    .companion-health-row > span:last-child {
        text-align: left;
    }
    .companion-explanation {
        grid-template-columns: 1fr;
    }
    .companion-place {
        flex-direction: column;
    }
    .companion-place > .inline {
        width: 100%;
    }
    .companion-place .button {
        flex: 1;
    }
    .companion-cohort-list {
        grid-template-columns: 1fr;
    }
}

/* Guided IKI setup: the default surface for Trip PM and Ops. */
.companion-simple {
    display: grid;
    gap: 28px;
}
.companion-simple__hero {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    padding: 4px 0 8px;
}
.companion-simple__hero h1,
.companion-simple h2 {
    margin: 0;
    color: var(--ink);
}
.companion-simple__hero p,
.companion-simple__action p,
.companion-simple__grid p {
    margin: 8px 0 0;
    color: var(--ink-soft);
    line-height: 1.5;
}
.companion-simple__status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 7px 11px;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 800;
    background: var(--paper);
}
.companion-simple__status > span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ink-soft);
}
.companion-simple__status.is-on {
    border-color: color-mix(in srgb, var(--brand-700) 38%, var(--line));
    color: var(--brand-900);
    background: var(--brand-50);
}
.companion-simple__status.is-on > span {
    background: var(--brand-700);
}
.companion-simple__action .card__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 118px;
    padding: 24px 28px;
}
.companion-simple__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.companion-simple__grid .card__body {
    display: grid;
    gap: 10px;
    min-height: 144px;
    padding: 24px 20px;
}
.companion-simple__grid small {
    color: var(--ink-soft);
}
.companion-simple__service-ai .card__body {
    display: grid;
    gap: 16px;
    padding: 24px 28px;
}
.companion-simple + .companion-simple__service-ai {
    /* This System Admin card is a sibling of the launch surface, not a child.
       Give it the same section rhythm instead of letting two card edges touch. */
    margin-top: 28px;
}
.companion-simple__service-ai .eyebrow,
.companion-simple__service-ai h2,
.companion-simple__service-ai p {
    margin-top: 0;
}
.companion-simple__service-ai .eyebrow {
    margin-bottom: 8px;
}
.companion-simple__service-ai h2 {
    margin-bottom: 10px;
}
.companion-simple__service-ai p:not(.eyebrow) {
    max-width: 76ch;
    margin-bottom: 0;
    color: var(--ink-soft);
    line-height: 1.5;
}
.companion-simple__service-ai .field-help {
    margin: 10px 0 0;
}
.companion-simple__service-ai .card__body > div > .field-help {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    min-height: 40px;
    margin-top: 16px;
    padding: 8px 12px;
    border: 1px solid color-mix(in srgb, var(--brand-700) 35%, var(--line));
    border-radius: 999px;
    background: var(--brand-50);
    color: var(--brand-900);
    font-size: 14px;
    font-weight: 650;
}
.companion-simple__service-ai .card__body > div > .field-help strong {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: inherit;
}
.companion-simple__service-ai .card__body > div > .field-help strong::before {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--brand-700);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-700) 16%, transparent);
    content: "";
}
.companion-simple__service-ai .companion-disclosure {
    margin-top: 2px;
}
.companion-launch {
    display: grid;
    gap: 20px;
}
.companion-launch__hero {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    padding: 4px 0;
}
.companion-launch__hero h1,
.companion-guided-card h2 {
    margin: 0;
    color: var(--ink);
}
.companion-launch__hero p:last-child {
    max-width: 680px;
    margin: 8px 0 0;
    color: var(--ink-soft);
}
.companion-launch__status {
    display: flex;
    align-items: start;
    gap: 10px;
    width: min(100%, 340px);
    padding: 14px 16px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    background: var(--paper);
    box-shadow: var(--shadow-sm);
}
.companion-launch__status--live {
    border-color: color-mix(in srgb, var(--brand-700) 30%, var(--line));
    background: color-mix(in srgb, var(--brand-50) 70%, var(--paper));
}
.companion-launch__status-dot {
    width: 9px;
    height: 9px;
    flex: none;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--warning-600, #bf7b16);
}
.companion-launch__status--live .companion-launch__status-dot {
    background: var(--brand-700);
}
.companion-launch__status strong,
.companion-launch__status small {
    display: block;
}
.companion-launch__status small {
    margin-top: 3px;
    color: var(--ink-soft);
    line-height: 1.45;
}
.companion-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.companion-steps a {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    background: var(--paper);
}
.companion-steps a:hover,
.companion-steps a:focus-visible {
    border-color: var(--brand-600);
    background: var(--brand-50);
}
.companion-steps span,
.companion-step-label {
    color: var(--brand-800);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.companion-steps span {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: var(--paper);
    background: var(--brand-800);
}
.companion-guided-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}
.companion-guided-card {
    min-width: 0;
}
.companion-guided-card--wide {
    grid-column: 1 / -1;
}
.companion-guided-card .card__body {
    display: grid;
    gap: 14px;
}
.companion-step-label {
    margin: 0;
}
.companion-guest-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-height: 348px;
    overflow: auto;
    padding: 4px;
    border-radius: 12px;
    background: var(--sand);
}
.companion-guest-choice {
    display: flex;
    gap: 10px;
    align-items: start;
    min-height: 60px;
    padding: 11px;
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    background: var(--paper);
    cursor: pointer;
}
.companion-guest-choice:hover {
    border-color: color-mix(in srgb, var(--brand-700) 38%, var(--line));
}
.companion-guest-choice input {
    margin-top: 3px;
}
.companion-guest-choice span {
    display: grid;
    gap: 3px;
    min-width: 0;
}
.companion-guest-choice strong,
.companion-guest-choice small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.companion-guest-choice small {
    color: var(--ink-soft);
}
.companion-surfaces {
    margin: 0;
    padding: 13px;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
}
.companion-surfaces legend {
    padding: 0 5px;
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 800;
}
.companion-surfaces > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.companion-surface-choice {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 4px 9px;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    cursor: pointer;
    background: var(--paper);
}
.companion-surface-choice:has(input:checked) {
    border-color: color-mix(in srgb, var(--brand-700) 45%, var(--line));
    background: var(--brand-50);
}
.companion-disclosure {
    padding: 13px 0 0;
    border-top: 1px solid var(--line-soft);
}
.companion-disclosure summary {
    cursor: pointer;
    color: var(--brand-800);
    font-weight: 800;
}
.companion-disclosure > .field-help {
    margin: 10px 0 0;
}
.companion-disclosure .survey-form,
.companion-disclosure--nested > .two-col,
.companion-disclosure--nested > .field {
    margin-top: 12px;
}
.companion-disclosure--nested {
    margin-top: 2px;
}
.companion-content-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}
.companion-advanced {
    padding: 16px;
    border: 1px dashed var(--line);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--paper) 75%, var(--sand));
}
.companion-advanced-back {
    margin-bottom: 14px;
}
.companion-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
@media (max-width: 860px) {
    .companion-simple + .companion-simple__service-ai {
        margin-top: 20px;
    }
    .companion-simple__hero,
    .companion-simple__action .card__body {
        align-items: start;
        flex-direction: column;
    }
    .companion-simple__grid {
        grid-template-columns: 1fr;
    }
    .companion-launch__hero {
        align-items: start;
        flex-direction: column;
    }
    .companion-launch__status {
        width: 100%;
    }
    .companion-guided-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 520px) {
    .drawer #ai-suggest-form + .field-help {
        align-items: flex-start;
    }
    .drawer #ai-suggest-form + .field-help > .button {
        margin-left: 28px;
    }
    .companion-simple__service-ai .card__body {
        padding: 20px;
    }
    .companion-simple__service-ai .card__body > div > .field-help {
        width: 100%;
    }
    .companion-steps,
    .companion-guest-list {
        grid-template-columns: 1fr;
    }
    .companion-content-head {
        align-items: stretch;
        flex-direction: column;
    }
}
@media (prefers-reduced-motion: reduce) {
    .companion-steps a {
        scroll-behavior: auto;
    }
}
body[data-guest-document-upload="disabled"] .guest-document-upload {
    display: none;
}

/* Guest itinerary — island editorial layout. The banner and curved sand
   surface mirror the travel-poster composition while every label stays live. */
.guest-shell--itinerary {
    background: #fbf5e9;
}
.guest-shell--itinerary .guest-topbar {
    height: 56px;
    background: rgba(255, 251, 242, 0.98);
    box-shadow: 0 5px 18px rgba(74, 57, 30, 0.07);
    backdrop-filter: none;
}
.guest-shell--itinerary .guest-brand__logo {
    width: 118px;
    height: 48px;
}
.guest-main--itinerary {
    padding-top: 0;
}
.guest-shell--itinerary .guest-day-tabs {
    top: 0;
}
.guest-journey {
    padding: 20px 0 12px;
}
.guest-journey__head-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.guest-journey__home {
    width: 30px;
    height: 30px;
    padding: 0;
    flex: 0 0 30px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 50%;
    color: #fff3b4;
    background: rgba(5, 67, 55, 0.34);
    box-shadow: 0 5px 15px rgba(0, 24, 20, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
    transition:
        transform 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;
}
.guest-journey__home .icon {
    width: 16px;
    height: 16px;
}
.guest-journey__home:hover,
.guest-journey__home:focus-visible {
    background: rgba(10, 104, 82, 0.62);
    box-shadow: 0 7px 18px rgba(0, 24, 20, 0.28);
    transform: translateX(-2px);
}
.guest-journey__home:focus-visible {
    outline: 2px solid rgba(255, 245, 187, 0.92);
    outline-offset: 2px;
}
.guest-journey__head .eyebrow {
    margin: 0;
    color: #ffe2a0;
}
.guest-journey__head h1 {
    margin: 4px 0 6px;
    color: var(--white);
    font-size: clamp(28px, 7vw, 36px);
    line-height: 1.1;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.guest-journey__head p {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.guest-journey-map {
    margin-top: 12px;
    padding: 10px 0 20px;
    position: relative;
}
.guest-journey-map__path {
    /* Coordinates are computed in JS from each dot's actual rendered
       position (see hydrateGuestJourneyPath), in percentages of this exact
       box — so it must span the full map, not a centered sub-width, or the
       curve drifts away from the dots it's meant to connect. */
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: visible;
    pointer-events: none;
}
.guest-journey-map__path path {
    fill: none;
    stroke: rgba(255, 255, 255, 0.8);
    stroke-width: 1.6;
    stroke-dasharray: 5 6;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    animation: guest-journey-path-flow 8s linear infinite;
}
@keyframes guest-journey-path-flow {
    to {
        stroke-dashoffset: -44;
    }
}
.guest-journey-day {
    width: 100%;
    min-height: 158px;
    padding: 0;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
/* The dot sits on the cramped edge (near the screen border); the label
   is given the open side toward the middle of the screen instead of
   straddling the dot, so long titles grow into free space rather than
   clipping against the edge. */
.guest-journey-day.is-left {
    justify-content: flex-start;
    padding-left: 15%;
    padding-right: 24%;
}
.guest-journey-day.is-left .guest-journey-day__dot {
    order: 0;
}
.guest-journey-day.is-left .guest-journey-day__copy {
    order: 1;
    align-items: flex-start;
    text-align: left;
}
.guest-journey-day.is-right {
    justify-content: flex-end;
    padding-left: 24%;
    padding-right: 15%;
}
.guest-journey-day.is-right .guest-journey-day__copy {
    order: 0;
    align-items: flex-end;
    text-align: right;
}
.guest-journey-day.is-right .guest-journey-day__dot {
    order: 1;
}
/* Unlike every interior dot, the path's first and last points have no
   neighbor on one side, so the curve leaves/arrives at an angle instead of
   straight vertical — it sweeps right through the label's row there. Nudge
   just those two labels off that diagonal so the dashed line doesn't cut
   through the text. */
.guest-journey-day:first-of-type .guest-journey-day__copy {
    transform: translateY(-18px);
}
.guest-journey-day:last-of-type .guest-journey-day__copy {
    transform: translateY(18px);
}
.guest-journey-day__copy {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.guest-journey-day__copy strong {
    color: var(--white);
    font-family: var(--font-serif);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    overflow-wrap: anywhere;
}
.guest-journey-day__copy small {
    color: rgba(255, 255, 255, 0.88);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.guest-journey-day.is-today .guest-journey-day__copy strong {
    color: #fff5b8;
    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.5),
        0 0 15px rgba(255, 233, 139, 0.38);
}
.guest-journey-day__dot {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    position: relative;
    border-radius: 50%;
    background: var(--white);
    box-shadow:
        0 0 0 5px rgba(255, 255, 255, 0.22),
        0 4px 10px rgba(0, 0, 0, 0.35);
    animation: guest-journey-dot-glow 2.6s ease-in-out 0s infinite;
    transition: transform 160ms ease;
}
.guest-journey-day__dot::before,
.guest-journey-day__dot::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.guest-journey-day__dot::before {
    inset: -7px;
    border: 1.5px solid rgba(255, 244, 185, 0.92);
    opacity: 0;
    transform: scale(0.72);
    animation: none;
}
.guest-journey-day__dot::after {
    inset: 4px;
    background: #fff;
    box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.62);
    opacity: 0.5;
    animation: guest-journey-dot-white-spark 2.6s ease-in-out 0s infinite;
}
.guest-journey-day.is-today .guest-journey-day__dot {
    background: #fff3a9;
    box-shadow:
        0 0 0 6px rgba(255, 245, 183, 0.36),
        0 0 22px 8px rgba(255, 226, 118, 0.55),
        0 4px 10px rgba(0, 0, 0, 0.28);
    animation-name: guest-journey-current-dot;
    animation-duration: 2.6s;
    animation-delay: 0s;
}
.guest-journey-day.is-today .guest-journey-day__dot::before {
    animation: guest-journey-dot-ring 2.6s ease-out 0s infinite;
}
.guest-journey-day.is-today .guest-journey-day__dot::after {
    background: #fff7c7;
    box-shadow: 0 0 8px 2px rgba(255, 239, 154, 0.78);
    animation: guest-journey-dot-spark 2.6s ease-in-out 0s infinite;
}
@keyframes guest-journey-current-dot {
    0%,
    100% {
        box-shadow:
            0 0 0 6px rgba(255, 245, 183, 0.32),
            0 0 16px 5px rgba(255, 226, 118, 0.42),
            0 4px 10px rgba(0, 0, 0, 0.28);
    }
    50% {
        box-shadow:
            0 0 0 8px rgba(255, 245, 183, 0.42),
            0 0 26px 10px rgba(255, 226, 118, 0.68),
            0 4px 10px rgba(0, 0, 0, 0.24);
    }
}
@keyframes guest-journey-dot-glow {
    0%,
    100% {
        box-shadow:
            0 0 0 5px rgba(255, 255, 255, 0.18),
            0 0 8px 2px rgba(255, 255, 255, 0.1),
            0 4px 10px rgba(0, 0, 0, 0.35);
    }
    50% {
        box-shadow:
            0 0 0 6px rgba(255, 255, 255, 0.28),
            0 0 16px 5px rgba(255, 255, 255, 0.3),
            0 4px 10px rgba(0, 0, 0, 0.3);
    }
}
@keyframes guest-journey-dot-white-spark {
    0%,
    100% {
        opacity: 0.48;
        transform: scale(0.86);
    }
    50% {
        opacity: 0.92;
        transform: scale(1.08);
    }
}
@keyframes guest-journey-dot-ring {
    0%,
    4% {
        opacity: 0;
        transform: scale(0.72);
    }
    10% {
        opacity: 0.88;
    }
    28% {
        opacity: 0;
        transform: scale(1.7);
    }
    100% {
        opacity: 0;
        transform: scale(1.7);
    }
}
@keyframes guest-journey-dot-spark {
    0%,
    30%,
    100% {
        opacity: 0.28;
        transform: scale(0.72);
    }
    10% {
        opacity: 1;
        transform: scale(1.25);
    }
}
.guest-journey-day:hover .guest-journey-day__dot,
.guest-journey-day:focus-visible .guest-journey-day__dot {
    transform: scale(1.15);
}
.guest-journey-day:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 4px;
    border-radius: 12px;
}
@media (hover: hover) and (pointer: fine) {
    .guest-journey-day:hover .guest-journey-day__copy strong {
        text-decoration: underline;
        text-decoration-color: rgba(255, 255, 255, 0.6);
    }
}
@media (prefers-reduced-motion: reduce) {
    .guest-journey-map__path path,
    .guest-journey-day__dot,
    .guest-journey-day__dot::before,
    .guest-journey-day__dot::after {
        animation: none !important;
    }
}
.guest-itinerary-banner {
    height: clamp(150px, 41vw, 218px);
    margin: 0 -18px;
    position: relative;
    overflow: hidden;
    background: #c6e8e6;
}
.guest-itinerary-banner img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
}
.guest-itinerary-overview {
    min-height: 140px;
    margin: -90px -18px 0;
    padding: 35px 20px 12px;
    position: relative;
    z-index: 2;
    isolation: isolate;
}
.guest-itinerary-overview__curve {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: -1;
    pointer-events: none;
}
.guest-itinerary-overview__curve path {
    fill: #fbf5e9;
}
.guest-itinerary-overview > *:not(.guest-itinerary-overview__curve) {
    position: relative;
    z-index: 1;
}
.guest-itinerary-overview > .eyebrow {
    margin: 0 0 4px;
    display: flex;
    align-items: flex-start;
    gap: 5px;
    color: #315e54;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.1em;
}
.guest-itinerary-overview > .eyebrow .icon {
    width: 12px;
    height: 12px;
    margin-top: 1px;
}
.guest-itinerary-overview__meta {
    min-width: 0;
    display: grid;
    gap: 2px;
}
.guest-itinerary-overview__meta > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.guest-itinerary-overview__meta > strong {
    display: block;
    color: #2d796a;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 0.13em;
    line-height: 1.15;
}
.guest-itinerary-overview__title {
    display: flex;
    align-items: center;
}
.guest-itinerary-overview__title h1 {
    margin: 0;
    color: #063f35;
    font-family: var(--font-travel-serif);
    font-size: clamp(31px, 7.5vw, 42px);
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: -0.04em;
}
.guest-itinerary-overview > p:last-child {
    margin: 7px 0 0;
    color: #4c6c65;
    font-size: 12px;
}
.guest-itinerary-tabs {
    margin: 0 -10px 7px;
    padding: 7px 10px 8px;
    top: calc(56px + env(safe-area-inset-top));
    gap: 8px;
    border: 0;
    border-bottom: 0;
    background: #fbf5e9;
    box-shadow: none;
    backdrop-filter: none;
    scroll-padding-right: 18px;
}
.guest-itinerary-tabs::after {
    width: 10px;
    height: 1px;
    flex: 0 0 10px;
    content: "";
}
.guest-itinerary-tabs .guest-day-tab {
    min-width: 76px;
    min-height: 50px;
    padding: 7px 7px;
    flex: 1 0 76px;
    justify-items: center;
    border-color: #e8dfd1;
    border-radius: 13px;
    background: rgba(255, 252, 247, 0.9);
    color: #365850;
    text-align: center;
    box-shadow: 0 7px 18px rgba(64, 50, 27, 0.05);
}
.guest-itinerary-tabs .guest-day-tab span {
    font-family: var(--font-travel-serif);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-transform: none;
}
.guest-itinerary-tabs .guest-day-tab strong {
    font-size: 10px;
    font-weight: 750;
}
.guest-itinerary-tabs .guest-day-tab.active {
    border-color: #08735c;
    background: linear-gradient(145deg, #0b8067, #055d4b);
    color: white;
    box-shadow:
        0 10px 22px rgba(5, 100, 78, 0.2),
        inset 0 -3px 0 rgba(255, 255, 255, 0.12);
}
.guest-itinerary-day {
    margin-bottom: 0;
}
.guest-itinerary-day .guest-day__title {
    margin: 0 2px 11px;
    align-items: center;
}
.guest-itinerary-day__heading {
    min-width: 0;
    flex: 1 1 auto;
}
.guest-itinerary-day__heading-row {
    min-width: 0;
}
.guest-itinerary-day .guest-day__title .eyebrow {
    color: #2d8c79;
    font-size: 9px;
    letter-spacing: 0.14em;
}
.guest-itinerary-day .guest-day__title h2 {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #153f38;
    font-family: var(--font-travel-serif);
    font-size: clamp(17px, 4.8vw, 21px);
    line-height: 1.12;
}
.guest-itinerary-day .guest-day__title h2::after {
    content: "≋";
    color: #65b8a5;
    font-family: serif;
    font-size: 25px;
    font-weight: 400;
    line-height: 1;
    transform: rotate(-7deg);
}
.guest-itinerary-day__heading .guest-day__title h2::after,
.guest-itinerary-day__heading h2::after {
    display: none;
}
.guest-day__date {
    max-width: 126px;
    display: grid;
    gap: 2px;
    color: #56716b;
    text-align: right;
    line-height: 1.2;
}
.guest-day__date span {
    font-size: 10px;
}
.guest-day__date strong {
    color: #56716b;
    font-size: 9px;
    font-weight: 650;
}
.guest-itinerary-day .guest-day__date--single {
    max-width: none;
    margin-top: 5px;
    display: block;
    color: #56716b;
    font-size: 10px;
    font-weight: 650;
    line-height: 1.25;
    text-align: left;
}
.guest-itinerary-day__weather {
    width: 124px;
    min-width: 0;
    flex: 0 0 124px;
}
.guest-itinerary-day__weather [data-guest-weather-summary="1"] {
    width: 100%;
}
.guest-itinerary-day__weather .guest-home-weather {
    min-height: 74px;
    border-radius: 19px;
}
.guest-itinerary-day__weather .guest-home-weather--dated {
    min-height: 84px;
}
.guest-shell--itinerary [data-guest-weather-slot] {
    margin-top: 2px;
}
.guest-shell--itinerary .card.p1-weather-card[data-weather][data-weather-scene] {
    background-color: #d9efea;
    background-image: var(--weather-scene-image);
    background-position: center;
    background-size: cover;
}
.guest-shell--itinerary .p1-weather-card--current {
    --weather-copy: #123f37;
    --weather-muted: #315a53;
    --weather-accent: #087964;
    --weather-copy-shadow: 0 1px 1px rgba(255, 255, 255, 0.96), 0 2px 7px rgba(255, 255, 255, 0.72);
    min-height: 196px;
    margin: 0 0 20px;
    padding: 14px;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.84);
    border-radius: 21px;
    box-shadow: 0 16px 34px rgba(35, 91, 79, 0.14);
}
.guest-shell--itinerary .p1-weather-card--current[data-weather-scene="rain"],
.guest-shell--itinerary .p1-weather-card--current[data-weather-scene="storm"] {
    --weather-copy: #ffffff;
    --weather-muted: rgba(255, 255, 255, 0.9);
    --weather-accent: #b9f2df;
    --weather-copy-shadow: 0 1px 2px rgba(0, 24, 29, 0.9), 0 3px 10px rgba(0, 18, 25, 0.72);
}
.guest-shell--itinerary .p1-weather-card--current .p1-weather-card__head {
    min-height: 49px;
    align-items: start;
    gap: 8px;
}
.guest-shell--itinerary .p1-weather-card--current .p1-weather-card__head > .p1-weather-card__icon {
    display: none;
}
.guest-shell--itinerary .p1-weather-card--current .p1-weather-card__head > div {
    min-width: 0;
    flex: 1 1 auto;
    padding: 5px 2px;
    background: transparent;
    box-shadow: none;
    text-shadow: var(--weather-copy-shadow);
}
.guest-shell--itinerary .p1-weather-card--current .p1-weather-card__head .eyebrow {
    color: var(--weather-muted);
    font-size: 9px;
    letter-spacing: 0.1em;
}
.guest-shell--itinerary .p1-weather-card--current .p1-weather-card__head h2 {
    overflow: hidden;
    color: var(--weather-copy);
    font-family: var(--font-travel-serif);
    font-size: 17px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.guest-shell--itinerary .p1-weather-card--current .status-chip {
    min-height: 29px;
    padding: 6px 9px;
    border: 1px solid rgba(255, 255, 255, 0.62);
    border-radius: 999px;
    color: white;
    background: rgba(12, 133, 106, 0.72);
    backdrop-filter: blur(8px);
}
.guest-shell--itinerary .p1-weather-current {
    display: grid;
    grid-template-columns: minmax(92px, 1.25fr) repeat(2, minmax(64px, 0.72fr));
    align-items: end;
    gap: 7px;
}
.guest-shell--itinerary .p1-weather-current__temperature,
.guest-shell--itinerary .p1-weather-current__stat {
    min-width: 0;
    min-height: 61px;
    padding: 8px 6px;
    display: grid;
    align-content: end;
    border: 0;
    background: transparent;
    box-shadow: none;
    text-shadow: var(--weather-copy-shadow);
}
.guest-shell--itinerary .p1-weather-current__temperature strong {
    color: var(--weather-copy);
    font-family: var(--font-travel-serif);
    font-size: clamp(28px, 8vw, 38px);
    font-weight: 500;
    line-height: 0.9;
}
.guest-shell--itinerary .p1-weather-current__temperature span,
.guest-shell--itinerary .p1-weather-current__stat span {
    overflow: hidden;
    color: var(--weather-muted);
    font-size: 10.5px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.guest-shell--itinerary .p1-weather-current__temperature span {
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    text-shadow:
        0 1px 2px rgba(0, 35, 38, 0.9),
        0 3px 9px rgba(0, 24, 29, 0.72);
}
.guest-shell--itinerary .p1-weather-current__stat {
    grid-template-columns: 17px minmax(0, 1fr);
    column-gap: 4px;
}
.guest-shell--itinerary .p1-weather-current__stat > .icon {
    width: 15px;
    height: 15px;
    align-self: center;
    color: var(--weather-accent);
}
.guest-shell--itinerary .p1-weather-current__stat strong,
.guest-shell--itinerary .p1-weather-current__stat span {
    grid-column: 2;
}
.guest-shell--itinerary .p1-weather-current__stat strong {
    color: var(--weather-copy);
    font-size: 14px;
    white-space: nowrap;
}
.guest-shell--itinerary .p1-weather-card--current .p1-weather-card__updated {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 3px 0;
    overflow: hidden;
    color: var(--weather-muted);
    background: transparent;
    font-size: 10px;
    font-weight: 650;
    text-overflow: ellipsis;
    text-shadow: var(--weather-copy-shadow);
    white-space: nowrap;
}
.guest-shell--itinerary .p1-weather-card--current .p1-weather-card__more {
    width: fit-content;
    max-width: 100%;
    min-height: 40px;
    margin: 0 auto;
    padding: 9px 18px;
    display: flex;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(233, 218, 190, 0.88);
    border-radius: 14px;
    color: #204e45;
    background: rgba(255, 252, 244, 0.94);
    box-shadow: 0 7px 17px rgba(42, 64, 48, 0.09);
    font-family: var(--font-travel-serif);
    font-size: 14px;
}
.guest-shell--itinerary .p1-weather-card--current .p1-weather-card__more .icon:last-child {
    margin-left: 8px;
}
.guest-shell--itinerary
    .p1-weather-card--current[data-weather="SUNNY"]
    .p1-weather-card__sky
    .wx-sun,
.guest-shell--itinerary
    .p1-weather-card--current[data-weather="PARTLY_CLOUDY"]
    .p1-weather-card__sky
    .wx-sun {
    top: 35px;
    right: auto;
    left: 8px;
    width: 78px;
    height: 78px;
    display: block;
    background: none;
    opacity: 0.96;
    filter: drop-shadow(0 5px 13px rgba(222, 158, 48, 0.24));
}
.guest-shell--itinerary .p1-weather-card--current .p1-weather-card__sky .wx-sun::before,
.guest-shell--itinerary .p1-weather-card--current .p1-weather-card__sky .wx-sun::after {
    content: "";
    position: absolute;
    inset: 14%;
    border-radius: 50%;
}
.guest-shell--itinerary .p1-weather-card--current .p1-weather-card__sky .wx-sun::before {
    z-index: 1;
    background: radial-gradient(circle at 38% 35%, #fff5ae 0 12%, #ffd45f 46%, #f4a52f 100%);
    box-shadow: 0 0 22px rgba(255, 209, 82, 0.7);
}
.guest-shell--itinerary .p1-weather-card--current .p1-weather-card__sky .wx-sun::after {
    inset: -1%;
    background: repeating-conic-gradient(from 1deg, #ffd36a 0 7deg, transparent 7deg 24deg);
    -webkit-mask: radial-gradient(circle, transparent 0 55%, #000 57% 69%, transparent 71%);
    mask: radial-gradient(circle, transparent 0 55%, #000 57% 69%, transparent 71%);
}
.guest-shell--itinerary .p1-weather-card--current[data-weather="SUNNY"] .p1-weather-card__head,
.guest-shell--itinerary
    .p1-weather-card--current[data-weather="PARTLY_CLOUDY"]
    .p1-weather-card__head {
    padding-left: 72px;
}
.guest-itinerary-next {
    margin: 4px 2px 8px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
}
.guest-itinerary-next .eyebrow {
    margin: 0 0 2px;
    color: #2d8c79;
    font-size: 9px;
    letter-spacing: 0.14em;
}
.guest-itinerary-next h2 {
    margin: 0;
    color: #153f38;
    font-family: var(--font-travel-serif);
    font-size: 19px;
    font-weight: 600;
}
.guest-itinerary-next > span {
    padding: 5px 9px;
    flex: 0 0 auto;
    border-radius: 999px;
    color: #28715f;
    background: #e0f1e8;
    font-size: 9px;
    font-weight: 750;
}
.guest-itinerary-day > .schedule-timeline {
    margin-top: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
@media (max-width: 390px) {
    .guest-itinerary-tabs {
        gap: 6px;
    }
    .guest-itinerary-tabs .guest-day-tab {
        min-width: 72px;
        padding-inline: 5px;
        flex-basis: 72px;
    }
    .guest-itinerary-day__weather {
        width: 112px;
        flex-basis: 112px;
    }
    .guest-shell--itinerary .p1-weather-card--current[data-weather="SUNNY"] .p1-weather-card__head,
    .guest-shell--itinerary
        .p1-weather-card--current[data-weather="PARTLY_CLOUDY"]
        .p1-weather-card__head {
        padding-left: 62px;
    }
    .guest-shell--itinerary
        .p1-weather-card--current[data-weather="SUNNY"]
        .p1-weather-card__sky
        .wx-sun,
    .guest-shell--itinerary
        .p1-weather-card--current[data-weather="PARTLY_CLOUDY"]
        .p1-weather-card__sky
        .wx-sun {
        left: 2px;
        width: 70px;
        height: 70px;
    }
}

/* Guest bottom navigation — edge-to-edge travel dock. Routes and behaviour
   remain unchanged; the third slot is only elevated visually. */
.guest-shell {
    padding-bottom: calc(104px + env(safe-area-inset-bottom));
}
.guest-bottom-nav {
    left: 50%;
    right: auto;
    bottom: 0;
    width: min(680px, 100%);
    padding: 8px 8px calc(7px + env(safe-area-inset-bottom));
    overflow: visible;
    border: 0;
    border-top: 1px solid rgba(211, 199, 174, 0.82);
    border-radius: 0;
    background: rgba(255, 252, 244, 0.98);
    box-shadow: 0 -10px 28px rgba(62, 47, 25, 0.13);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.guest-bottom-nav .guest-nav-item {
    min-height: 56px;
    gap: 3px;
    padding: 2px 0 6px;
    color: #796f5c;
}
.guest-bottom-nav .guest-nav-item__icon {
    width: 38px;
    height: 28px;
    border-radius: 12px;
}
.guest-bottom-nav .guest-nav-item .icon {
    width: 20px;
    height: 20px;
}
.guest-bottom-nav .guest-nav-item.active {
    color: var(--brand-800);
}
.guest-bottom-nav .guest-nav-item.active::before,
.guest-bottom-nav .guest-nav-item.active::after {
    display: none;
}
.guest-bottom-nav .guest-nav-item:nth-child(3) {
    z-index: 2;
    transform: none;
}
.guest-bottom-nav .guest-nav-item:nth-child(3) .guest-nav-item__icon {
    width: 56px;
    height: 56px;
    box-sizing: border-box;
    border: 3px solid #fffaf0;
    border-radius: 50%;
    color: #ffffff;
    background: linear-gradient(145deg, #08775f, #004b3e);
    box-shadow:
        0 9px 19px rgba(0, 72, 55, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.guest-bottom-nav .guest-nav-item:nth-child(3) .icon,
.guest-bottom-nav .guest-nav-item:nth-child(3).active .icon {
    width: 27px;
    height: 27px;
    color: #ffffff;
    stroke-width: 1.8;
}
.guest-bottom-nav .guest-nav-item:nth-child(3) .guest-nav-item__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}
.guest-bottom-nav .guest-nav-item:nth-child(3):active {
    opacity: 1;
    transform: scale(0.95);
}
@media (hover: hover) {
    .guest-bottom-nav .guest-nav-item:not(.active):not(:nth-child(3)):hover .guest-nav-item__icon {
        background: rgba(0, 72, 49, 0.07);
        transform: translateY(-2px);
    }
}

/* Header belongs to the opening image: it scrolls away together with that
   image and never remains above the page content. */
.guest-shell--home,
.guest-shell--itinerary,
.guest-shell--help {
    position: relative;
}
.guest-shell--home .guest-topbar,
.guest-shell--itinerary .guest-topbar,
.guest-shell--flights .guest-topbar,
.guest-shell--help .guest-topbar {
    width: min(680px, 100%);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.guest-shell--home .guest-brand__logo,
.guest-shell--itinerary .guest-brand__logo,
.guest-shell--flights .guest-brand__logo,
.guest-shell--help .guest-brand__logo {
    filter: drop-shadow(0 2px 5px rgba(255, 255, 255, 0.74));
}
.guest-shell--home .guest-topbar__actions > *,
.guest-shell--itinerary .guest-topbar__actions > *,
.guest-shell--flights .guest-topbar__actions > *,
.guest-shell--help .guest-topbar__actions > * {
    box-shadow: 0 7px 18px rgba(36, 67, 52, 0.12);
}
.guest-main--home {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-top: calc(64px + env(safe-area-inset-top));
    padding-bottom: max(26px, env(safe-area-inset-bottom));
    box-sizing: border-box;
}
.guest-shell.guest-shell--home {
    padding-bottom: 0;
}
.guest-main--itinerary {
    padding-top: 0;
}
.guest-main--help {
    padding-top: calc(82px + env(safe-area-inset-top));
}
.guest-itinerary-banner {
    height: clamp(195px, 47vw, 246px);
}

/* Keep the guest chrome geometrically identical on every tab. Backgrounds may
   adapt to the opening artwork, but the logo and controls must never jump. */
.guest-shell .guest-topbar {
    height: calc(68px + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    padding-bottom: 0;
}
.guest-shell .guest-brand__logo {
    width: 110px;
    height: 54px;
    object-fit: contain;
    object-position: left center;
}
.guest-shell .guest-topbar__actions {
    min-height: 38px;
}

/* Guest navigation: keep the app chrome steady while the destination content
   glides a short distance. The restrained motion avoids a carousel-like jerk. */
.guest-bottom-nav {
    view-transition-name: guest-bottom-navigation;
}
/* The page-level slide replaces the former staggered child entrance. Running
   both at once made cards appear to shudder after the route had settled. */
.guest-main > * {
    animation: none !important;
}
body.guest-route-transitioning .guest-bottom-nav {
    pointer-events: none;
}
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}
::view-transition-group(root) {
    animation: none;
}
::view-transition-image-pair(root),
::view-transition-image-pair(guest-itinerary-day-content) {
    overflow: clip;
    isolation: isolate;
}
::view-transition-old(root),
::view-transition-new(root),
::view-transition-old(guest-itinerary-day-content),
::view-transition-new(guest-itinerary-day-content) {
    backface-visibility: hidden;
    will-change: transform;
}
/* Transition snapshots are painted above ordinary fixed elements. Keeping the
   dock in its own higher snapshot prevents sliding content from covering it. */
::view-transition-group(guest-bottom-navigation) {
    z-index: 50;
    animation: none;
}
::view-transition-old(guest-bottom-navigation),
::view-transition-new(guest-bottom-navigation) {
    animation: none;
    mix-blend-mode: normal;
}
html[data-guest-route-direction="forward"]::view-transition-old(root) {
    animation: guest-page-slide-old-forward 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
html[data-guest-route-direction="forward"]::view-transition-new(root) {
    animation: guest-page-slide-new-forward 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
html[data-guest-route-direction="back"]::view-transition-old(root) {
    animation: guest-page-slide-old-back 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
html[data-guest-route-direction="back"]::view-transition-new(root) {
    animation: guest-page-slide-new-back 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes guest-page-slide-old-forward {
    to {
        transform: translate3d(-16%, 0, 0);
    }
}
@keyframes guest-page-slide-new-forward {
    from {
        transform: translate3d(100%, 0, 0);
    }
}
@keyframes guest-page-slide-old-back {
    to {
        transform: translate3d(16%, 0, 0);
    }
}
@keyframes guest-page-slide-new-back {
    from {
        transform: translate3d(-100%, 0, 0);
    }
}
.guest-main--leaving-forward {
    animation: guest-page-slide-old-forward 130ms ease-in both;
}
.guest-main--leaving-back {
    animation: guest-page-slide-old-back 130ms ease-in both;
}
.guest-main--entering-forward {
    animation: guest-page-slide-new-forward 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.guest-main--entering-back {
    animation: guest-page-slide-new-back 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@media (prefers-reduced-motion: reduce) {
    .guest-main {
        view-transition-name: none;
    }
    .guest-main--leaving-forward,
    .guest-main--leaving-back,
    .guest-main--entering-forward,
    .guest-main--entering-back {
        animation: none;
    }
}

/* This base declaration intentionally sits after the generic drawer rule. */
.drawer.drawer--activity {
    width: min(600px, 100%);
    background: #f7f1e6;
}

/* Guest profile — coastal personal-information page. */
.guest-shell--me {
    position: relative;
    isolation: isolate;
    background: #f7f1e6;
}
.guest-shell--me::before {
    height: 430px;
    position: fixed;
    z-index: 0;
    top: 0;
    right: 0;
    left: 0;
    background-image: url("/media/guest/asset/bg_me.png");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    content: "";
    pointer-events: none;
}
.guest-shell--me::after {
    content: "";
    height: 430px;
    position: fixed;
    z-index: 0;
    top: 0;
    right: 0;
    left: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent 55%, #f7f1e6 96%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    mask-image: linear-gradient(to bottom, transparent 55%, #000 92%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 55%, #000 92%);
}
.guest-shell--me > .guest-topbar,
.guest-shell--me > .guest-main {
    position: relative;
    z-index: 1;
}
.guest-shell--me .guest-container {
    box-sizing: border-box;
}
.guest-shell--me .guest-topbar {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.guest-shell--me .guest-brand__logo {
    filter: drop-shadow(0 2px 5px rgba(255, 255, 255, 0.74));
}
.guest-main--me {
    padding-top: 0;
    display: flex;
    flex-direction: column;
}
.guest-main--me > .guest-page-head {
    min-height: 270px;
    margin: 0 -18px;
    padding: 62px 38px 92px;
    order: 1;
}
.guest-main--me > .guest-page-head .eyebrow {
    margin: 0 0 10px;
    color: #08735e;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.17em;
}
.guest-main--me > .guest-page-head h1 {
    margin: 0 0 10px;
    color: #063f35;
    font-family: var(--font-travel-serif);
    font-size: clamp(31px, 7.5vw, 42px);
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: -0.04em;
}
.guest-main--me > .guest-page-head p:last-child {
    max-width: 230px;
    color: #42645f;
    font-size: 15px;
    line-height: 1.45;
}
.guest-main--me > .guest-profile-card {
    width: 100%;
    min-width: 0;
    margin-top: -58px;
    padding: 26px;
    position: relative;
    z-index: 2;
    order: 2;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.84);
    border-radius: 28px;
    isolation: isolate;
    background:
        radial-gradient(circle at 93% 8%, rgba(7, 151, 91, 0.11), transparent 25%),
        radial-gradient(circle at 4% 88%, rgba(225, 178, 91, 0.1), transparent 25%),
        radial-gradient(circle, rgba(7, 132, 81, 0.045) 0 1px, transparent 1.2px) 0 0 / 22px 22px,
        linear-gradient(
            155deg,
            rgba(255, 255, 255, 0.96),
            rgba(249, 255, 252, 0.9) 55%,
            rgba(255, 250, 242, 0.92)
        );
    box-shadow: 0 20px 42px rgba(45, 72, 61, 0.14);
    backdrop-filter: blur(14px);
}
.guest-main--me > .guest-profile-card::before {
    width: 92px;
    height: 154px;
    top: 76px;
    right: -47px;
    z-index: 0;
    display: block;
    border: 1px solid rgba(7, 132, 81, 0.12);
    border-radius: 100% 0 100% 0;
    background: linear-gradient(
        102deg,
        transparent 49.2%,
        rgba(7, 132, 81, 0.09) 49.7%,
        rgba(7, 132, 81, 0.09) 50.3%,
        transparent 50.8%
    );
    box-shadow: none;
    transform: rotate(24deg);
}
.guest-main--me > .guest-profile-card::after {
    width: min(210px, 62%);
    aspect-ratio: 704 / 354;
    position: absolute;
    z-index: 0;
    top: 58%;
    left: 50%;
    background: url("/media/guest/asset/logo.png") center / contain no-repeat;
    content: "";
    opacity: 0.055;
    pointer-events: none;
    transform: translate(-50%, -50%);
}
.guest-main--me > .guest-profile-card > * {
    position: relative;
    z-index: 1;
}
.guest-main--me .guest-profile-card__identity {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
}
.guest-main--me .guest-profile-card__avatar {
    width: 60px;
    height: 60px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(26, 139, 113, 0.25);
    border-radius: 50%;
    background: linear-gradient(145deg, #eaf8f1, #ccebdd);
    color: #075744;
    font-family: var(--font-travel-serif);
    font-size: 20px;
    font-weight: 750;
    box-shadow:
        0 0 0 5px rgba(240, 250, 246, 0.94),
        0 8px 18px rgba(20, 102, 82, 0.12);
}
.guest-main--me .guest-profile-card__identity .eyebrow {
    margin-bottom: 6px;
    color: #148269;
    font-size: 9px;
    letter-spacing: 0.13em;
}
.guest-main--me .guest-profile-card__identity h2 {
    margin-bottom: 6px;
    color: #073f35;
    font-family: var(--font-travel-serif);
    font-size: 24px;
    font-weight: 650;
    line-height: 1.08;
}
.guest-main--me .guest-profile-card__identity p:last-child {
    color: #607b76;
    font-size: 12px;
    line-height: 1.4;
}
.guest-main--me > .guest-profile-card__logout-wide {
    width: 100%;
    margin-top: 12px;
    order: 6;
}
.guest-main--me .guest-profile-card__divider {
    margin: 24px 0 18px;
    background: rgba(22, 111, 91, 0.12);
}
.guest-main--me .guest-profile-card__meta {
    margin-bottom: 20px;
    gap: 12px;
}
.guest-main--me .guest-profile-card__meta > div {
    min-height: 92px;
    padding: 10px;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    column-gap: 9px;
    row-gap: 7px;
    border: 1px solid rgba(45, 111, 96, 0.16);
    border-radius: 16px;
    background: rgba(252, 253, 249, 0.82);
}
.guest-main--me .guest-profile-card__meta-icon {
    width: 20px;
    height: 20px;
    grid-column: 1;
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    align-self: center;
    color: #08735e;
}
.guest-main--me .guest-profile-card__meta-icon .icon {
    width: 17px;
    height: 17px;
}
.guest-main--me .guest-profile-card__meta-flag {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(45, 111, 96, 0.18);
}
.guest-main--me
    .guest-profile-card__meta
    > div
    > span:not(.tag):not(.guest-profile-card__meta-icon),
.guest-main--me .guest-profile-card__meta > div > strong,
.guest-main--me .guest-profile-card__meta > div > .tag {
    grid-column: 2;
}
.guest-main--me
    .guest-profile-card__meta
    > div
    > span:not(.tag):not(.guest-profile-card__meta-icon) {
    color: #607b76;
    font-size: 11px;
    font-weight: 650;
}
.guest-main--me .guest-profile-card__meta > div > strong {
    color: #073f35;
    font-size: 14px;
}
.guest-main--me .guest-profile-card__meta-chevron {
    width: 13px;
    height: 13px;
    margin-left: 6px;
    color: #0d6856;
    vertical-align: -1px;
}
.guest-main--me .guest-profile-card__meta-chevron path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.guest-main--me .guest-profile-card > .button,
.guest-main--me .guest-profile-card > .keep-link {
    width: 100%;
    min-height: 42px;
    padding: 8px 16px;
    margin-top: 0;
    border-radius: 12px;
    font-size: 13px;
}
.guest-main--me .guest-profile-card > [data-reopen-onboarding] {
    margin-top: 12px;
}
.guest-shell--me .guest-main--me > .legal-entry-card {
    width: 100%;
    min-width: 0;
    min-height: 238px;
    margin-top: 24px;
    order: 3;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 26px;
    background-color: #fbfbf7;
    background-image: url("/media/guest/asset/bd_rule.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    box-shadow: 0 16px 34px rgba(47, 79, 69, 0.11);
}
.guest-main--me .legal-entry-card .card__body {
    min-height: 238px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.guest-main--me .legal-entry-card .eyebrow {
    margin: 0 0 10px;
    color: #087d65;
    font-size: 9px;
    letter-spacing: 0.14em;
}
.guest-main--me .legal-entry-card h2 {
    max-width: 70%;
    margin: 0 0 12px;
    color: #073f35;
    font-family: var(--font-travel-serif);
    font-size: 24px;
    font-weight: 650;
    line-height: 1.12;
}
.guest-main--me .legal-entry-card .field-help {
    max-width: 64%;
    margin: 0 0 18px;
    color: #4c6963;
    font-size: 11px;
    line-height: 1.5;
}
.guest-main--me .legal-entry-card .button {
    width: min(100%, 330px);
    min-height: 46px;
    padding-inline: 16px;
    justify-content: center;
    border-color: rgba(7, 99, 80, 0.35);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.8);
    color: #074f40;
    white-space: normal;
    backdrop-filter: blur(5px);
}
.guest-main--me .legal-entry-card .button .icon {
    flex: 0 0 auto;
}
.guest-main--me .legal-entry-card .button::after {
    display: none;
    content: none;
}
.guest-shell--me .guest-main--me > .guest-document-upload {
    width: 100%;
    min-width: 0;
    margin-top: 24px;
    order: 4;
    border-style: solid;
    border-color: rgba(36, 126, 104, 0.18);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 12px 28px rgba(40, 74, 65, 0.08);
}
.guest-shell--me .guest-main--me > .keep-link {
    margin-top: 18px;
    order: 5;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(8px);
}
@media (max-width: 520px) {
    .guest-shell--me::before {
        height: 370px;
        background-position: 56% top;
    }
    .guest-shell--me::after {
        height: 370px;
    }
    .guest-shell--help::before,
    .guest-shell--help::after {
        height: 370px;
    }
    .guest-main--me > .guest-page-head {
        min-height: 235px;
        padding: 40px 22px 78px;
    }
    .guest-main--me > .guest-page-head h1 {
        font-size: clamp(30px, 8.5vw, 37px);
    }
    .guest-main--me > .guest-page-head p:last-child {
        max-width: 190px;
        font-size: 13px;
    }
    .guest-main--me > .guest-profile-card {
        margin-top: -48px;
        padding: 20px;
        border-radius: 24px;
    }
    .guest-main--me .guest-profile-card__identity {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 12px;
    }
    .guest-main--me .guest-profile-card__avatar {
        width: 52px;
        height: 52px;
        font-size: 18px;
    }
    .guest-main--me .guest-profile-card__identity h2 {
        font-size: 21px;
    }
    .guest-main--me .guest-profile-card__meta > div {
        min-height: 74px;
    }
    .guest-main--me .legal-entry-card .card__body {
        padding: 22px;
    }
    .guest-main--me .legal-entry-card h2 {
        max-width: 72%;
        font-size: 21px;
    }
    .guest-main--me .legal-entry-card .field-help {
        max-width: 68%;
        font-size: 10.5px;
    }
    .guest-main--me .legal-entry-card .button {
        font-size: 11px;
    }
}
@media (max-width: 340px) {
    .guest-main--me .guest-profile-card__meta {
        grid-template-columns: 1fr;
    }
}

/* Guest support request — an immersive coastal form. Only this dialog uses
   the supplied artwork; the shared Back Office and Guest drawers stay intact. */
.drawer-backdrop--guest-issue {
    background: rgba(5, 51, 43, 0.3);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.drawer.drawer--guest-issue {
    width: 100%;
    padding: clamp(28px, 5vw, 70px) clamp(22px, 5.5vw, 80px);
    inset: 0;
    grid-template-rows: auto minmax(0, 1fr);
    background-color: #f6f0e6;
    background-image: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    box-shadow: none;
    transform: none;
    animation: guest-issue-screen-in 240ms ease-out both;
}
@keyframes guest-issue-screen-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.drawer--guest-issue .drawer__header,
.drawer--guest-issue .drawer__body {
    width: min(1040px, 100%);
    box-sizing: border-box;
    border-color: rgba(255, 255, 255, 0.84);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px) saturate(1.08);
    -webkit-backdrop-filter: blur(16px) saturate(1.08);
}
.drawer--guest-issue .drawer__header {
    margin: auto auto 0;
    padding: clamp(28px, 3.2vw, 42px) clamp(28px, 4vw, 52px) clamp(24px, 2.8vw, 34px);
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.84);
    border-bottom: 0;
    border-radius: 46px 46px 0 0;
    box-shadow: 0 -20px 50px rgba(56, 74, 80, 0.1);
}
.drawer--guest-issue .drawer__header::after {
    height: 1px;
    position: absolute;
    right: clamp(28px, 4vw, 52px);
    bottom: 0;
    left: clamp(28px, 4vw, 52px);
    background: rgba(23, 84, 103, 0.15);
    content: "";
}
.drawer--guest-issue .drawer__header > div {
    min-width: 0;
    min-height: 88px;
    padding-left: 116px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.drawer--guest-issue .drawer__header > div::before {
    width: 86px;
    height: 86px;
    position: absolute;
    top: 50%;
    left: 4px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(23, 103, 127, 0.42);
    border-radius: 50%;
    color: #074456;
    background: linear-gradient(145deg, #edf5f8, #d8e8ed);
    box-shadow:
        0 0 0 9px rgba(238, 246, 248, 0.88),
        0 12px 28px rgba(18, 84, 104, 0.12);
    font-family: var(--font-travel-serif);
    font-size: 44px;
    font-weight: 650;
    line-height: 1;
    content: "?";
    transform: translateY(-50%);
}
.drawer--guest-issue .drawer__header .eyebrow {
    margin: 0 0 8px;
    color: #166881;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.17em;
}
.drawer--guest-issue .drawer__header h2 {
    max-width: 720px;
    color: #063948;
    font-family: var(--font-travel-serif);
    font-size: clamp(28px, 3.2vw, 41px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.02em;
    text-wrap: balance;
}
.drawer--guest-issue .drawer__header .icon-button {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    border-color: rgba(224, 91, 75, 0.3);
    border-radius: 20px;
    color: #df594d;
    background: rgba(255, 244, 241, 0.86);
    box-shadow: 0 10px 24px rgba(190, 77, 65, 0.08);
}
.drawer--guest-issue .drawer__header .icon-button:hover,
.drawer--guest-issue .drawer__header .icon-button:focus-visible {
    border-color: rgba(224, 91, 75, 0.55);
    background: #fff0ec;
}
.drawer--guest-issue .drawer__header .icon-button .icon {
    width: 25px;
    height: 25px;
    stroke-width: 2.2;
}
.drawer--guest-issue .drawer__body {
    margin: 0 auto auto;
    padding: 18px clamp(28px, 4vw, 52px) clamp(28px, 4vw, 48px);
    border: 1px solid rgba(255, 255, 255, 0.84);
    border-top: 0;
    border-radius: 0 0 46px 46px;
    box-shadow: 0 26px 58px rgba(56, 74, 80, 0.16);
}
.drawer--guest-issue .drawer__required-note {
    margin: 0 0 12px;
    color: #748489;
    font-size: 11px;
    text-align: right;
}
.drawer--guest-issue .issue-form--drawer {
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    gap: 18px;
}
.drawer--guest-issue .issue-form--drawer > .spacer {
    display: none;
}
.drawer--guest-issue .issue-form__intro {
    min-height: 76px;
    margin: 0;
    padding: 17px 20px 17px 68px;
    position: relative;
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    border: 1px solid rgba(221, 168, 70, 0.25);
    border-radius: 20px;
    color: #80571d;
    background: linear-gradient(110deg, #fff8e8, #fffaf1);
    font-size: 14px;
    line-height: 1.55;
}
.drawer--guest-issue .issue-form__intro::before {
    width: 38px;
    height: 38px;
    position: absolute;
    left: 17px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(199, 140, 43, 0.24);
    border-radius: 12px;
    color: #9b681c;
    background: #fff1cf;
    box-shadow: 0 7px 16px rgba(174, 117, 25, 0.08);
    font-family: var(--font-travel-serif);
    font-size: 23px;
    font-weight: 750;
    content: "!";
}
.drawer--guest-issue .issue-form--drawer > .field {
    min-width: 0;
    padding: 20px;
    align-content: start;
    gap: 12px;
    border: 1px solid rgba(44, 96, 112, 0.18);
    border-radius: 23px;
    background: rgba(253, 254, 251, 0.88);
}
.drawer--guest-issue .issue-form--drawer > .field:has(#issue-description) {
    grid-column: 1 / -1;
}
.drawer--guest-issue .issue-form--drawer .field-label,
.drawer--guest-issue .issue-form--drawer .field > label {
    color: #074052;
    font-family: var(--font-travel-serif);
    font-size: 18px;
    font-weight: 650;
    line-height: 1.25;
}
.drawer--guest-issue .issue-category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.drawer--guest-issue .category-choice label {
    min-height: 88px;
    padding: 11px 8px;
    gap: 9px;
    border-color: rgba(45, 96, 111, 0.18);
    border-radius: 17px;
    color: #31545f;
    background: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    font-weight: 750;
    transition:
        transform 160ms ease,
        border-color 160ms ease,
        background 160ms ease,
        box-shadow 160ms ease;
}
.drawer--guest-issue .category-choice label .icon {
    width: 21px;
    height: 21px;
    padding: 8px;
    box-sizing: content-box;
    border-radius: 12px;
    color: #085a73;
    background: #ebf4f7;
}
.drawer--guest-issue .category-choice input:checked + label {
    border-color: rgba(8, 90, 115, 0.68);
    color: #063948;
    background: #edf5f8;
    box-shadow:
        inset 0 0 0 1px rgba(8, 90, 115, 0.5),
        0 9px 18px rgba(12, 82, 103, 0.08);
}
.drawer--guest-issue .category-choice input:checked + label .icon {
    color: #ffffff;
    background: #116a85;
    box-shadow: 0 7px 14px rgba(10, 91, 116, 0.2);
}
.drawer--guest-issue .category-choice input:focus-visible + label,
.drawer--guest-issue .severity-choice input:focus-visible + label {
    outline: 3px solid rgba(8, 90, 115, 0.26);
    outline-offset: 2px;
}
.drawer--guest-issue .severity-choice {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.drawer--guest-issue .severity-choice .choice label {
    min-height: 88px;
    padding: 14px 12px;
    flex-direction: column;
    gap: 10px;
    border-color: rgba(45, 96, 111, 0.18);
    border-radius: 17px;
    color: #31545f;
    background: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    font-weight: 750;
}
.drawer--guest-issue .severity-choice .choice label::before {
    width: 21px;
    height: 21px;
    border-color: #8ca3aa;
}
.drawer--guest-issue .severity-choice .choice input:checked + label {
    border-color: rgba(8, 90, 115, 0.66);
    color: #063948;
    background: #edf5f8;
    box-shadow: inset 0 0 0 1px rgba(8, 90, 115, 0.48);
}
.drawer--guest-issue .severity-choice .urgent input:checked + label {
    border-color: rgba(211, 74, 66, 0.68);
    color: #a73e39;
    background: #fff0ec;
    box-shadow: inset 0 0 0 1px rgba(211, 74, 66, 0.5);
}
.drawer--guest-issue .severity-choice .urgent input:checked + label::before {
    border-color: #d34a42;
}
.drawer--guest-issue .issue-form--drawer .field-help {
    color: #6b7c81;
    font-size: 12px;
    line-height: 1.5;
}
.drawer--guest-issue #issue-description {
    min-height: 126px;
    padding: 15px 17px;
    border-color: rgba(45, 96, 111, 0.24);
    border-radius: 17px;
    color: #17363f;
    background: #fffefa;
    font-size: 14px;
    line-height: 1.55;
}
.drawer--guest-issue #issue-description:focus {
    border-color: #166881;
    box-shadow: 0 0 0 4px rgba(22, 104, 129, 0.12);
}
.drawer--guest-issue .issue-form--drawer > .button[type="submit"] {
    min-height: 58px;
    grid-column: 1 / -1;
    border-color: rgba(207, 74, 62, 0.22);
    border-radius: 18px;
    background: linear-gradient(135deg, #ee765f, #dc574c);
    box-shadow: 0 14px 28px rgba(208, 76, 63, 0.2);
    font-size: 15px;
    font-weight: 850;
}
.drawer--guest-issue .issue-form--drawer > .button[type="submit"]:hover,
.drawer--guest-issue .issue-form--drawer > .button[type="submit"]:focus-visible {
    background: linear-gradient(135deg, #e96955, #ca493f);
    box-shadow: 0 16px 32px rgba(196, 65, 53, 0.26);
}
@media (max-width: 800px) {
    .drawer.drawer--guest-issue {
        padding: max(14px, env(safe-area-inset-top)) 12px max(14px, env(safe-area-inset-bottom));
        background-position: center top;
    }
    .drawer--guest-issue .drawer__header {
        padding: 22px 20px 20px;
        border-radius: 29px 29px 0 0;
    }
    .drawer--guest-issue .drawer__header::after {
        right: 20px;
        left: 20px;
    }
    .drawer--guest-issue .drawer__header > div {
        min-height: 62px;
        padding-left: 78px;
    }
    .drawer--guest-issue .drawer__header > div::before {
        width: 58px;
        height: 58px;
        left: 2px;
        box-shadow:
            0 0 0 6px rgba(238, 246, 248, 0.88),
            0 9px 20px rgba(18, 84, 104, 0.12);
        font-size: 31px;
    }
    .drawer--guest-issue .drawer__header .eyebrow {
        margin-bottom: 5px;
        font-size: 9px;
    }
    .drawer--guest-issue .drawer__header h2 {
        font-size: clamp(23px, 6.8vw, 30px);
    }
    .drawer--guest-issue .drawer__header .icon-button {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
        border-radius: 15px;
    }
    .drawer--guest-issue .drawer__body {
        padding: 15px 18px 22px;
        border-radius: 0 0 29px 29px;
    }
    .drawer--guest-issue .issue-form--drawer {
        grid-template-columns: minmax(0, 1fr);
        gap: 13px;
    }
    .drawer--guest-issue .issue-form--drawer > .field:has(#issue-description),
    .drawer--guest-issue .issue-form--drawer > .button[type="submit"],
    .drawer--guest-issue .issue-form__intro {
        grid-column: 1;
    }
    .drawer--guest-issue .issue-form__intro {
        min-height: 66px;
        padding: 13px 14px 13px 54px;
        border-radius: 17px;
        font-size: 12px;
    }
    .drawer--guest-issue .issue-form__intro::before {
        width: 30px;
        height: 30px;
        left: 13px;
        border-radius: 10px;
        font-size: 18px;
    }
    .drawer--guest-issue .issue-form--drawer > .field {
        padding: 15px;
        gap: 10px;
        border-radius: 19px;
    }
    .drawer--guest-issue .issue-form--drawer .field-label,
    .drawer--guest-issue .issue-form--drawer .field > label {
        font-size: 16px;
    }
    .drawer--guest-issue .issue-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .drawer--guest-issue .category-choice label {
        min-height: 76px;
        border-radius: 14px;
        font-size: 11px;
    }
    .drawer--guest-issue .category-choice label .icon {
        width: 18px;
        height: 18px;
        padding: 6px;
        border-radius: 9px;
    }
    .drawer--guest-issue .severity-choice .choice label {
        min-height: 76px;
        border-radius: 14px;
        font-size: 11px;
    }
    .drawer--guest-issue #issue-description {
        min-height: 112px;
    }
    .drawer--guest-issue .issue-form--drawer > .button[type="submit"] {
        min-height: 52px;
        border-radius: 15px;
    }
}
@media (max-width: 380px) {
    .drawer--guest-issue .drawer__header {
        padding-right: 15px;
        padding-left: 15px;
    }
    .drawer--guest-issue .drawer__header > div {
        padding-left: 70px;
    }
    .drawer--guest-issue .drawer__header > div::before {
        width: 52px;
        height: 52px;
    }
    .drawer--guest-issue .drawer__header h2 {
        font-size: 22px;
    }
    .drawer--guest-issue .drawer__header .icon-button {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }
    .drawer--guest-issue .drawer__body {
        padding-right: 14px;
        padding-left: 14px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .drawer.drawer--guest-issue {
        animation: none;
    }
}

/* Final Guest support form: match the supplied clean mobile sheet. */
.drawer-backdrop--guest-issue {
    background: rgba(13, 29, 34, 0.38);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.drawer.drawer--guest-issue {
    width: min(430px, 100%);
    padding: 0;
    inset: 0 0 0 auto;
    isolation: isolate;
    grid-template-rows: auto minmax(0, 1fr);
    border-radius: 0 0 0 28px;
    background:
        radial-gradient(circle at 92% 8%, rgba(7, 117, 151, 0.11), transparent 24%),
        radial-gradient(circle at 4% 60%, rgba(225, 178, 91, 0.09), transparent 22%),
        radial-gradient(circle, rgba(7, 103, 132, 0.045) 0 1px, transparent 1.2px) 0 0 / 24px 24px,
        linear-gradient(160deg, #ffffff 0%, #fbfeff 47%, #fffaf4 100%);
    box-shadow: -16px 0 46px rgba(16, 41, 48, 0.16);
    transform: translateX(100%);
    animation: slide-in 0.22s forwards;
}
.drawer.drawer--guest-issue::before,
.drawer.drawer--guest-issue::after {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    content: "";
}
.drawer.drawer--guest-issue::before {
    width: 112px;
    height: 188px;
    top: 104px;
    right: -58px;
    border: 1px solid rgba(7, 103, 132, 0.12);
    border-radius: 100% 0 100% 0;
    background: linear-gradient(
        102deg,
        transparent 49.2%,
        rgba(7, 103, 132, 0.09) 49.7%,
        rgba(7, 103, 132, 0.09) 50.3%,
        transparent 50.8%
    );
    transform: rotate(24deg);
}
.drawer.drawer--guest-issue::after {
    width: min(290px, 70%);
    aspect-ratio: 704 / 354;
    top: 50%;
    left: 50%;
    background: url("/media/guest/asset/logo.png") center / contain no-repeat;
    opacity: 0.07;
    transform: translate(-50%, -50%);
}
.drawer--guest-issue .drawer__header,
.drawer--guest-issue .drawer__body {
    width: 100%;
    margin: 0;
    position: relative;
    z-index: 1;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.drawer--guest-issue .drawer__header {
    min-height: 0;
    padding: 17px 22px 10px;
    align-items: flex-start;
}
.drawer--guest-issue .drawer__header::after,
.drawer--guest-issue .drawer__header > div::before {
    display: none;
}
.drawer--guest-issue .drawer__header > div {
    min-height: 0;
    padding: 0;
    display: block;
}
.drawer--guest-issue .drawer__header .eyebrow {
    margin: 0 0 7px;
    display: flex;
    align-items: center;
    color: #076582;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.15em;
}
.drawer--guest-issue .drawer__header .eyebrow::before {
    display: none;
}
.drawer--guest-issue .drawer__header h2 {
    max-width: 330px;
    margin: 0;
    color: #07323f;
    font-family: var(--font-travel-serif);
    font-size: 28px;
    font-weight: 650;
    line-height: 1.05;
    letter-spacing: -0.035em;
}
.drawer--guest-issue .drawer__header .icon-button {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    margin-top: -5px;
    border: 1px solid #e1e9eb;
    border-radius: 16px;
    color: #17363f;
    background: rgba(251, 253, 253, 0.88);
    box-shadow: 0 7px 18px rgba(25, 60, 70, 0.05);
}
.drawer--guest-issue .drawer__header .icon-button:hover,
.drawer--guest-issue .drawer__header .icon-button:focus-visible {
    border-color: #cdd8db;
    color: #0a576f;
    background: #f5f9fa;
}
.drawer--guest-issue .drawer__header .icon-button .icon {
    width: 22px;
    height: 22px;
    stroke-width: 1.9;
}
.drawer--guest-issue .drawer__body {
    padding: 0 24px calc(22px + env(safe-area-inset-bottom));
}
.drawer--guest-issue .drawer__required-note {
    display: none;
}
.drawer--guest-issue .issue-form--drawer {
    padding: 0;
    display: block;
}
.drawer--guest-issue .issue-form--drawer > .spacer {
    display: none;
}
.drawer--guest-issue .issue-form__intro {
    min-height: 0;
    margin: 0 0 28px;
    padding: 0;
    display: grid;
    gap: 3px;
    border: 0;
    border-radius: 0;
    color: #66777c;
    background: transparent;
    font-size: 14px;
    font-weight: 450;
    line-height: 1.5;
}
.drawer--guest-issue .issue-form__intro::before {
    display: none;
}
.drawer--guest-issue .issue-form--drawer > .field {
    margin: 0 0 27px;
    padding: 0;
    display: grid;
    gap: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.drawer--guest-issue .issue-form--drawer > .field.has-field-error {
    padding-bottom: 34px;
}
.drawer--guest-issue .issue-form--drawer .field-label,
.drawer--guest-issue .issue-form--drawer .field > label {
    margin: 0 0 11px;
    display: flex;
    align-items: center;
    gap: 11px;
    color: #15353f;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 750;
    line-height: 1.25;
}
.drawer--guest-issue .issue-form__step-number {
    width: 21px;
    height: 21px;
    display: inline-grid;
    flex: 0 0 21px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, #077191, #005a76);
    box-shadow: 0 4px 10px rgba(0, 95, 124, 0.2);
    font-size: 12px;
    font-weight: 850;
}
.drawer--guest-issue .issue-category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 11px;
}
.drawer--guest-issue .category-choice label {
    min-height: 132px;
    padding: 16px 7px 18px;
    position: relative;
    gap: 16px;
    border: 1px solid #e4e6e7;
    border-radius: 17px;
    color: #15353f;
    background: #fff;
    box-shadow: 0 7px 15px rgba(29, 53, 60, 0.1);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.15;
}
.drawer--guest-issue .category-choice label .icon {
    width: 27px;
    height: 27px;
    padding: 15px;
    border-radius: 50%;
    box-sizing: content-box;
    color: #076784;
    background: linear-gradient(145deg, #eaf5f8, #f5f9fa);
    stroke-width: 1.9;
}
.drawer--guest-issue .category-choice input:checked + label {
    border-color: #056886;
    color: #15353f;
    background: linear-gradient(145deg, #f1f9fc, #ffffff);
    box-shadow:
        inset 0 0 0 1px #056886,
        0 8px 17px rgba(0, 88, 115, 0.13);
}
.drawer--guest-issue .category-choice input:checked + label::after {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 8px;
    right: 8px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #0a7798;
    box-shadow: 0 4px 9px rgba(0, 91, 119, 0.2);
    font-size: 14px;
    line-height: 1;
    content: "✓";
}
.drawer--guest-issue .category-choice input:checked + label .icon {
    color: #076784;
    background: #e2f2f7;
    box-shadow: none;
}
.drawer--guest-issue .severity-choice {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}
.drawer--guest-issue .severity-choice .choice label {
    height: 64px;
    min-height: 64px;
    padding: 7px 8px;
    box-sizing: border-box;
    position: relative;
    flex-direction: row;
    justify-content: flex-start;
    gap: 7px;
    border: 1px solid #f0ded8;
    border-radius: 17px;
    color: #15353f;
    background: #fff;
    box-shadow: 0 7px 15px rgba(29, 53, 60, 0.07);
    text-align: left;
}
.drawer--guest-issue .severity-choice .choice:first-child label {
    border-radius: 17px;
}
.drawer--guest-issue .severity-choice .choice label::before {
    display: none;
}
.drawer--guest-issue .severity-choice__icon {
    width: 38px;
    height: 38px;
    display: grid;
    flex: 0 0 38px;
    place-items: center;
    border-radius: 50%;
    color: #076784;
    background: #e4f3f8;
}
.drawer--guest-issue .severity-choice__icon .icon {
    width: 21px;
    height: 21px;
    stroke-width: 2;
}
.drawer--guest-issue .severity-choice__copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}
.drawer--guest-issue .severity-choice__copy strong {
    color: #076784;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}
.drawer--guest-issue .severity-choice__copy small {
    color: #30474e;
    font-size: 10.5px;
    font-weight: 500;
}
.drawer--guest-issue .severity-choice .urgent .severity-choice__icon {
    color: #f05a47;
    background: #ffebe7;
}
.drawer--guest-issue .severity-choice .urgent .severity-choice__copy strong {
    color: #f05a47;
}
.drawer--guest-issue .severity-choice .choice input:checked + label {
    z-index: 1;
    border-color: #076784;
    color: #15353f;
    background: linear-gradient(145deg, #f1f9fc, #fff);
    box-shadow:
        inset 0 0 0 1px #076784,
        0 8px 17px rgba(0, 88, 115, 0.12);
}
.drawer--guest-issue .severity-choice .choice input:checked + label::after {
    width: 19px;
    height: 19px;
    position: absolute;
    top: -7px;
    right: -6px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #0a7798;
    box-shadow: 0 4px 9px rgba(0, 91, 119, 0.2);
    font-size: 13px;
    font-weight: 850;
    line-height: 1;
    content: "✓";
}
.drawer--guest-issue .severity-choice .urgent input:checked + label {
    border-color: #f05a47;
    color: #15353f;
    background: #fff8f6;
    box-shadow:
        inset 0 0 0 1px #f05a47,
        0 8px 17px rgba(218, 74, 56, 0.12);
}
.drawer--guest-issue .severity-choice .urgent input:checked + label::after {
    background: #f05a47;
    box-shadow: 0 4px 9px rgba(218, 74, 56, 0.22);
}
.drawer--guest-issue .issue-form__description {
    margin-bottom: 0 !important;
}
.drawer--guest-issue .issue-form__description > label {
    margin-bottom: 5px !important;
}
/* The description field above zeroes its own bottom margin (it used to be
   the last field before the submit button), so the photo field below it
   needs its own top spacing instead of relying on that collapsed gap. */
.drawer--guest-issue .issue-form--drawer > .issue-photo-field {
    margin-top: 27px;
}
.drawer--guest-issue .issue-form--drawer .field-help {
    margin: 0 0 10px;
    color: #66777c;
    font-size: 12px;
    line-height: 1.45;
}
.drawer--guest-issue #issue-description {
    min-height: 111px;
    padding: 14px;
    border: 1px solid #e1e4e5;
    border-radius: 16px;
    color: #17363f;
    background: #fff;
    box-shadow: 0 7px 15px rgba(29, 53, 60, 0.08);
    font-size: 14px;
    line-height: 1.5;
}
.drawer--guest-issue #issue-description::placeholder {
    color: #9b9f9e;
}
.drawer--guest-issue #issue-description:focus {
    border-color: #076784;
    box-shadow: 0 0 0 3px rgba(7, 103, 132, 0.12);
}
.drawer--guest-issue .issue-form--drawer > .button[type="submit"] {
    min-height: 52px;
    margin-top: 12px;
    padding: 12px 20px;
    display: flex;
    grid-column: auto;
    gap: 12px;
    border: 0;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(105deg, #037091, #00546d);
    box-shadow: 0 9px 19px rgba(0, 82, 107, 0.22);
    font-size: 17px;
    font-weight: 800;
}
.drawer--guest-issue .issue-form--drawer > .button[type="submit"]:hover,
.drawer--guest-issue .issue-form--drawer > .button[type="submit"]:focus-visible {
    background: linear-gradient(105deg, #026684, #00485e);
    box-shadow: 0 11px 23px rgba(0, 74, 96, 0.28);
}
.drawer--guest-issue .issue-form--drawer > .button[type="submit"] .icon {
    width: 19px;
    height: 19px;
}
.drawer--guest-issue .issue-form__security {
    margin: 14px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #68787d;
    font-size: 12px;
    line-height: 1.35;
    text-align: center;
}
.drawer--guest-issue .issue-form__security .icon {
    width: 17px;
    height: 17px;
    color: #076784;
}
@media (max-width: 430px) {
    .drawer.drawer--guest-issue {
        border-radius: 0 0 28px 28px;
    }
}
@media (max-width: 360px) {
    .drawer--guest-issue .drawer__header,
    .drawer--guest-issue .drawer__body {
        padding-right: 18px;
        padding-left: 18px;
    }
    .drawer--guest-issue .drawer__header h2 {
        font-size: 28px;
    }
    .drawer--guest-issue .issue-category-grid {
        gap: 9px 8px;
    }
    .drawer--guest-issue .category-choice label {
        min-height: 120px;
        font-size: 12px;
    }
    .drawer--guest-issue .category-choice label .icon {
        width: 24px;
        height: 24px;
        padding: 12px;
    }
    .drawer--guest-issue .severity-choice .choice label {
        padding: 6px 7px;
        gap: 6px;
    }
    .drawer--guest-issue .severity-choice__icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }
    .drawer--guest-issue .severity-choice__copy strong {
        font-size: 12px;
    }
    .drawer--guest-issue .severity-choice__copy small {
        font-size: 10px;
    }
}
@media (max-width: 380px) {
    .drawer--guest-issue .drawer__header {
        padding-right: 14px;
        padding-left: 14px;
    }
}

/* Keep every surface scrollable while removing browser scrollbar chrome. */
html,
body,
* {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
*::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* Travel boot screen — moved out of an inline <style> in index.html so it is
   served from 'self' and no longer trips the strict CSP style-src. Applies
   only while <body class="app-booting"> before app.js hydrates. */
body.app-booting {
    margin: 0;
    overflow: hidden;
    background: #fbf5e9;
}
body.app-booting .skip-link,
body.app-booting .toast-region,
body.app-booting [data-iki-host] {
    display: none !important;
}
body.app-booting .boot-screen--travel {
    min-height: 100svh;
    padding: 24px;
    display: grid;
    place-content: center;
    justify-items: center;
    box-sizing: border-box;
    background:
        radial-gradient(circle at 80% 12%, rgba(255, 215, 126, 0.34), transparent 24%),
        linear-gradient(165deg, #fffaf0, #f5ead6);
}
body.app-booting .boot-travel__scene {
    width: min(250px, 72vw);
    height: 140px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 32px;
    background: linear-gradient(180deg, #b9e8e6 0 55%, #61c9c2 56% 76%, #f4dcae 77%);
    box-shadow: 0 24px 54px rgba(32, 91, 79, 0.18);
}
body.app-booting .boot-travel__scene::before {
    content: "";
    width: 46px;
    height: 46px;
    position: absolute;
    top: 18px;
    right: 24px;
    border-radius: 50%;
    background: #ffd36d;
    box-shadow: 0 0 28px rgba(255, 197, 72, 0.64);
}
body.app-booting .boot-travel__scene::after {
    content: "";
    width: 190px;
    height: 62px;
    position: absolute;
    right: -48px;
    bottom: 24px;
    border-radius: 55% 45% 0 0;
    background: #3e8d68;
    transform: rotate(-5deg);
}
body.app-booting .boot-travel__plane {
    position: absolute;
    z-index: 2;
    top: 42px;
    left: 46px;
    color: #075c4b;
    font-size: 27px;
    transform: rotate(9deg);
    animation: boot-flight 2.2s ease-in-out infinite;
}
body.app-booting .boot-travel__route {
    width: 105px;
    position: absolute;
    top: 65px;
    left: 25px;
    border-top: 2px dashed rgba(7, 92, 75, 0.46);
    transform: rotate(-8deg);
}
body.app-booting .boot-logo {
    width: 150px;
    margin: 22px 0 3px;
}
body.app-booting .boot-screen--travel .eyebrow {
    margin: 0 0 14px;
    color: #376d61;
    font:
        800 10px/1.2 system-ui,
        sans-serif;
    letter-spacing: 0.18em;
}
body.app-booting .boot-travel__dots {
    display: flex;
    gap: 6px;
}
body.app-booting .boot-travel__dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #08745e;
    animation: boot-dot 1.1s ease-in-out infinite;
}
body.app-booting .boot-travel__dots span:nth-child(2) {
    animation-delay: 0.14s;
}
body.app-booting .boot-travel__dots span:nth-child(3) {
    animation-delay: 0.28s;
}
@keyframes boot-flight {
    50% {
        transform: translate(48px, -10px) rotate(9deg);
    }
}
@keyframes boot-dot {
    50% {
        opacity: 0.3;
        transform: translateY(-4px);
    }
}
@media (prefers-reduced-motion: reduce) {
    body.app-booting .boot-travel__plane,
    body.app-booting .boot-travel__dots span {
        animation: none;
    }
}

/* Guest survey — shares the calm dotted, watermarked visual language of the
   support form while keeping every one of the six steps in one design system. */
.survey-shell {
    min-height: 100svh;
    position: relative;
    isolation: isolate;
    overflow-x: clip;
    color: #15353f;
    background:
        radial-gradient(circle at 92% 8%, rgba(7, 117, 151, 0.11), transparent 24%),
        radial-gradient(circle at 4% 60%, rgba(225, 178, 91, 0.09), transparent 22%),
        radial-gradient(circle, rgba(7, 103, 132, 0.045) 0 1px, transparent 1.2px) 0 0 / 24px 24px,
        linear-gradient(160deg, #ffffff 0%, #fbfeff 47%, #fffaf4 100%);
}
.survey-shell::before,
.survey-shell::after {
    position: fixed;
    z-index: -1;
    pointer-events: none;
    content: "";
}
.survey-shell::before {
    width: 150px;
    height: 250px;
    top: 120px;
    right: -72px;
    border: 1px solid rgba(7, 103, 132, 0.12);
    border-radius: 100% 0 100% 0;
    background: linear-gradient(
        102deg,
        transparent 49.2%,
        rgba(7, 103, 132, 0.09) 49.7%,
        rgba(7, 103, 132, 0.09) 50.3%,
        transparent 50.8%
    );
    transform: rotate(24deg);
}
.survey-shell::after {
    width: min(310px, 68vw);
    aspect-ratio: 704 / 354;
    top: 50%;
    left: 50%;
    background: url("/media/guest/asset/logo.png") center / contain no-repeat;
    opacity: 0.07;
    transform: translate(-50%, -50%);
}
.survey-topbar {
    width: min(720px, 100%);
    min-height: 70px;
    margin: 0 auto;
    padding: calc(16px + env(safe-area-inset-top)) 22px 10px;
    position: relative;
    z-index: 3;
    justify-content: space-between;
    border: 0;
    background: transparent;
}
.survey-topbar__copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}
.survey-topbar__copy span {
    color: #076582;
    font-size: 10px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.15em;
}
.survey-topbar__copy strong {
    color: #0b3b4a;
    font-family: var(--font-travel-serif);
    font-size: 19px;
    font-weight: 650;
    line-height: 1.15;
}
.survey-topbar .icon-button {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border: 1px solid #e1e9eb;
    border-radius: 16px;
    color: #17363f;
    background: rgba(251, 253, 253, 0.9);
    box-shadow: 0 7px 18px rgba(25, 60, 70, 0.06);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.survey-topbar .icon-button:hover,
.survey-topbar .icon-button:focus-visible {
    border-color: #bcced4;
    color: #085f7a;
    background: #f5f9fa;
}
.survey-topbar .icon-button .icon {
    width: 22px;
    height: 22px;
}
.survey-container {
    width: min(720px, 100%);
    margin: 0 auto;
    padding: 8px 20px calc(70px + env(safe-area-inset-bottom));
    position: relative;
    z-index: 1;
}

.survey-progress {
    margin: 0 0 20px;
    padding: 17px 18px 13px;
    border: 1px solid rgba(38, 98, 116, 0.13);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 10px 28px rgba(35, 66, 76, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.survey-progress__meta {
    margin-bottom: 11px;
    color: #4d6971;
    font-size: 11px;
    font-weight: 750;
}
.survey-progress__step,
.survey-progress__percent {
    display: inline-flex;
    align-items: center;
}
.survey-progress__step {
    gap: 7px;
}
.survey-progress__step .icon {
    width: 16px;
    height: 16px;
    color: #076582;
}
.survey-progress__percent {
    min-height: 27px;
    padding: 4px 9px;
    border-radius: 999px;
    color: #065e79;
    background: #eaf5f8;
    font-size: 10px;
    font-weight: 850;
}
.survey-progress .progress-track {
    height: 7px;
    overflow: visible;
    border: 0;
    background: #e6edef;
    box-shadow: inset 0 1px 2px rgba(14, 56, 69, 0.07);
}
.survey-progress .progress-fill {
    position: relative;
    background: linear-gradient(90deg, #077191, #3892ad);
    box-shadow: 0 3px 10px rgba(7, 113, 145, 0.24);
}
.survey-progress .progress-fill::after {
    width: 12px;
    height: 12px;
    position: absolute;
    top: 50%;
    right: -3px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #077191;
    box-shadow: 0 2px 8px rgba(7, 98, 126, 0.28);
    content: "";
    transform: translateY(-50%);
}
.survey-stepper {
    margin-top: 18px;
    position: relative;
    gap: 8px;
}
.survey-stepper::before {
    height: 2px;
    position: absolute;
    z-index: 0;
    top: 20px;
    right: 7.5%;
    left: 7.5%;
    background: linear-gradient(90deg, #c8dde4, #dce7ea);
    content: "";
}
.survey-stepper__item {
    min-height: 69px;
    padding: 0 2px;
    position: relative;
    z-index: 1;
    align-content: start;
    gap: 7px;
    border-radius: 14px;
    background: transparent;
}
.survey-stepper__item > span {
    width: 40px;
    height: 40px;
    position: relative;
    border: 2px solid #d7e1e4;
    background: rgba(255, 255, 255, 0.96);
    color: #788d93;
    box-shadow: 0 4px 10px rgba(30, 60, 69, 0.07);
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;
}
.survey-stepper__item > span .icon {
    width: 17px;
    height: 17px;
}
.survey-stepper__item > span b {
    width: 15px;
    height: 15px;
    position: absolute;
    right: -5px;
    bottom: -3px;
    display: grid;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 50%;
    color: #62767c;
    background: #edf2f3;
    font-size: 7px;
    line-height: 1;
}
.survey-stepper__item small {
    display: block;
    color: #71848a;
    font-size: 8px;
    font-weight: 750;
    line-height: 1.2;
}
.survey-stepper__item.done > span {
    border-color: #a8ced9;
    color: #08627e;
    background: #eaf5f8;
}
.survey-stepper__item.active {
    color: #074a5f;
    background: transparent;
}
.survey-stepper__item.active > span {
    border-color: #076582;
    color: #fff;
    background: linear-gradient(145deg, #077191, #00556f);
    box-shadow:
        0 0 0 5px rgba(7, 113, 145, 0.1),
        0 8px 18px rgba(7, 91, 116, 0.24);
    transform: translateY(-2px);
}
.survey-stepper__item.active > span b {
    color: #074a5e;
    background: #dff0f5;
}
.survey-stepper__item.active small {
    color: #074a5e;
    font-weight: 850;
}

.survey-step {
    padding: clamp(23px, 5vw, 34px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 18px 42px rgba(31, 62, 72, 0.11);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.survey-step__heading {
    margin-bottom: 26px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 0;
}
.survey-step__heading .eyebrow {
    margin: 0 0 9px;
    color: #076582;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.16em;
}
.survey-step h1 {
    margin: 0 0 9px;
    color: #07323f;
    font-family: var(--font-travel-serif);
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 650;
    line-height: 1.02;
    letter-spacing: -0.035em;
}
.survey-step__description {
    max-width: 490px;
    margin: 0;
    color: #60757b;
    font-size: 14px;
    line-height: 1.5;
}
.survey-step__icon {
    width: 62px;
    height: 62px;
    display: none;
    place-items: center;
    border: 1px solid rgba(24, 115, 143, 0.12);
    border-radius: 21px;
    color: #076582;
    background: linear-gradient(145deg, #eff7fa, #dfeef3);
    box-shadow: 0 10px 22px rgba(24, 91, 111, 0.1);
}
.survey-step__icon .icon {
    width: 28px;
    height: 28px;
}
.survey-step > .update-banner {
    margin: -4px 0 24px;
    border-color: rgba(18, 109, 137, 0.18);
    border-radius: 16px;
    background: linear-gradient(135deg, #f1f9fb, #fffaf1);
}
.survey-step > .update-banner .update-banner__icon {
    color: #085f79;
    background: #dfeff4;
}
.survey-step > .update-banner p {
    color: #556c73;
}
.survey-step .survey-form {
    gap: 19px;
}
.survey-step .field {
    gap: 9px;
}
.survey-step .field > label,
.survey-step .field > .field-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #183943;
    font-size: 13px;
    font-weight: 750;
}
.survey-field-label__icon {
    width: 24px;
    height: 24px;
    display: inline-grid;
    flex: 0 0 24px;
    place-items: center;
    border-radius: 8px;
    color: #076582;
    background: #ebf5f8;
}
.survey-field-label__icon .icon {
    width: 13px;
    height: 13px;
    stroke-width: 2;
}
.survey-step .input,
.survey-step .select,
.survey-step .textarea {
    min-height: 40px;
    padding: 7px 12px;
    border-color: rgba(38, 79, 91, 0.2);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.76);
    color: #17363f;
    box-shadow: 0 5px 14px rgba(30, 56, 64, 0.035);
}
.survey-step .textarea {
    min-height: 96px;
}
.survey-step .select {
    padding-right: 38px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23076582' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
}
.survey-summary {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
}
.survey-summary-row {
    min-height: 48px;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--white);
}
.survey-summary-row__icon {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    color: #076582;
}
.survey-summary-row__icon .icon {
    width: 18px;
    height: 18px;
}
.survey-summary-row__label {
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 600;
}
.survey-summary-row__value {
    color: #074a5f;
    font-size: 14px;
    font-weight: 750;
    text-align: right;
    overflow-wrap: anywhere;
}
.survey-summary-row--danger .survey-summary-row__icon {
    color: var(--danger);
}
.survey-summary-row--danger .survey-summary-row__value {
    color: var(--danger);
}
.survey-summary-note {
    padding: 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid #cde2e9;
    border-radius: 14px;
    background: #edf5f8;
    color: #0a546b;
}
.survey-summary-note > .icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin-top: 1px;
    color: #076582;
}
.survey-summary-note p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
}
.survey-select-wrap {
    width: 100%;
    position: relative;
}
.survey-select-wrap .select {
    background-image: none;
}
.survey-select-wrap > .icon {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    right: 12px;
    color: #076582;
    pointer-events: none;
    transform: translateY(-50%);
}
.survey-step .input:hover,
.survey-step .select:hover,
.survey-step .textarea:hover {
    border-color: rgba(7, 101, 130, 0.45);
}
.survey-step .input:focus,
.survey-step .select:focus,
.survey-step .textarea:focus {
    border-color: #076582;
    box-shadow:
        0 0 0 3px rgba(7, 101, 130, 0.12),
        0 7px 18px rgba(30, 56, 64, 0.05);
}
.survey-step .choice label,
.survey-step .chip-choice label {
    min-height: 40px;
    padding: 8px 13px;
    border-radius: 14px;
    border-color: rgba(38, 79, 91, 0.18);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 5px 13px rgba(30, 56, 64, 0.04);
}
.survey-step .choice:not(.choice--consent) label,
.survey-step .chip-choice label {
    position: relative;
    overflow: visible;
    padding-right: 32px;
}
.survey-step .choice:not(.choice--consent) label::before {
    display: none;
}
.survey-step .choice:not(.choice--consent) label::after,
.survey-step .chip-choice label::after {
    width: 20px;
    height: 20px;
    position: absolute;
    top: -7px;
    right: -6px;
    display: grid;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 50%;
    color: #fff;
    background: #077191;
    box-shadow: 0 4px 10px rgba(7, 88, 112, 0.24);
    content: "✓";
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.55);
    transition:
        opacity 160ms ease,
        transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.survey-step .choice:not(.choice--consent) input:checked + label::after,
.survey-step .chip-choice input:checked + label::after {
    opacity: 1;
    transform: scale(1);
}
.survey-step .choice input:checked + label {
    border-color: #076582;
    color: #074a5f;
    background: #ecf6f9;
    box-shadow:
        inset 0 0 0 1px #076582,
        0 7px 16px rgba(7, 88, 112, 0.09);
}
.survey-step .chip-choice input:checked + label {
    border-color: #076582;
    color: #074a5f;
    background: #ecf6f9;
    box-shadow:
        inset 0 0 0 1px #076582,
        0 7px 16px rgba(7, 88, 112, 0.09);
}
.survey-step .travel-document-fields {
    margin-top: 4px;
    padding: 19px;
    border: 1px solid rgba(35, 97, 116, 0.14);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(239, 247, 249, 0.9), rgba(255, 250, 242, 0.72));
}
.survey-step .travel-document-fields h2,
.survey-step .consent-block__head h2 {
    color: #07323f;
    font-family: var(--font-travel-serif);
    font-weight: 650;
}
.survey-step .travel-document-fields h2 {
    margin-bottom: 0;
    font-size: clamp(22px, 2vw, 28px);
}
.survey-step .card,
.survey-step .consent-block {
    border-color: rgba(38, 79, 91, 0.14);
    background: rgba(250, 252, 253, 0.82);
    box-shadow: none;
}
.survey-step .consent-block,
.survey-step .consent-block__boxes,
.survey-step .consent-decline {
    border-radius: 16px;
}
.survey-actions {
    margin-top: 26px;
    padding-top: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    justify-items: stretch;
    border-top: 0;
}
.survey-actions > div {
    width: 100%;
}
.survey-actions > div:first-child {
    order: 2;
    display: flex;
    justify-content: center;
}
.survey-actions > .inline {
    width: 100%;
    order: 1;
}
.survey-actions > .inline > .button {
    flex: 1 1 0;
}
.survey-actions .autosave-state {
    min-height: 30px;
    padding: 3px 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #496872;
    background: transparent;
    font-size: 10px;
    font-weight: 700;
}
.survey-actions .autosave-state .icon {
    width: 13px;
    height: 13px;
    color: #076582;
}
.survey-actions .button {
    min-height: 50px;
    padding-inline: 20px;
    border-radius: 14px;
}
.survey-actions .button:not(.button--secondary) {
    border-color: transparent;
    color: #fff;
    background: linear-gradient(100deg, #077191, #00526b);
    box-shadow: 0 9px 20px rgba(0, 85, 111, 0.2);
}
.survey-actions .button:not(.button--secondary):hover,
.survey-actions .button:not(.button--secondary):focus-visible {
    background: linear-gradient(100deg, #08637f, #00495f);
}
.survey-actions .button--secondary {
    border-color: rgba(34, 85, 100, 0.2);
    color: #31545f;
    background: rgba(255, 255, 255, 0.88);
}

@media (max-width: 520px) {
    .survey-topbar {
        min-height: 68px;
        padding-right: 16px;
        padding-left: 16px;
    }
    .survey-topbar__copy span {
        font-size: 9px;
    }
    .survey-topbar__copy strong {
        font-size: 17px;
    }
    .survey-topbar .icon-button {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }
    .survey-container {
        padding: 4px 13px calc(50px + env(safe-area-inset-bottom));
    }
    .survey-progress {
        margin-bottom: 14px;
        padding: 15px 14px 11px;
        border-radius: 19px;
    }
    .survey-stepper {
        gap: 4px;
    }
    .survey-stepper__item {
        min-height: 48px;
        padding: 0;
    }
    .survey-stepper__item > span {
        width: 35px;
        height: 35px;
    }
    .survey-stepper__item > span .icon {
        width: 15px;
        height: 15px;
    }
    .survey-stepper__item small {
        display: none;
    }
    .survey-stepper::before {
        top: 17px;
    }
    .survey-step {
        padding: 22px 17px;
        border-radius: 24px;
    }
    .survey-step__heading {
        margin-bottom: 23px;
        gap: 10px;
    }
    .survey-step__heading .eyebrow {
        margin-bottom: 7px;
        font-size: 8px;
    }
    .survey-step h1 {
        font-size: clamp(22px, 2vw, 28px);
    }
    .survey-step__description {
        font-size: 13px;
    }
    .survey-step__icon {
        width: 50px;
        height: 50px;
        border-radius: 17px;
    }
    .survey-step__icon .icon {
        width: 23px;
        height: 23px;
    }
    .survey-step .form-grid {
        gap: 16px;
    }
    .survey-step .choice-grid {
        gap: 8px;
    }
    .survey-step .choice label {
        padding: 8px 10px;
        font-size: 12px;
    }
    .survey-step .travel-document-fields {
        padding: 16px;
    }
    .survey-actions {
        margin-top: 22px;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        justify-content: stretch;
        justify-items: stretch;
    }
    .survey-actions > div {
        width: 100%;
    }
    .survey-actions > div:first-child {
        order: 2;
        text-align: center;
    }
    .survey-actions .inline {
        width: 100%;
        order: 1;
        display: flex;
        flex-wrap: nowrap;
    }
    .survey-actions .button {
        min-width: 0;
        flex: 1 1 0;
        padding-inline: 12px;
    }
}

@media (max-width: 350px) {
    .survey-step__icon {
        display: none;
    }
    .survey-step__heading {
        grid-template-columns: minmax(0, 1fr);
    }
    .survey-stepper__item > span {
        width: 32px;
        height: 32px;
    }
    .survey-stepper::before {
        top: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .survey-step,
    .survey-progress .progress-fill,
    .survey-stepper__item > span {
        animation: none;
        transition: none;
    }
}

/* Quick translation — the same light travel sheet as Guest support. */
.drawer-backdrop--guest-translate,
.drawer-backdrop--guest-contacts,
.drawer-backdrop--guest-issues,
.drawer-backdrop--guest-emergency {
    background: rgba(13, 34, 30, 0.38);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.drawer.drawer--guest-translate,
.drawer.drawer--guest-contacts,
.drawer.drawer--guest-issues,
.drawer.drawer--guest-emergency {
    width: min(430px, 100%);
    padding: 0;
    inset: 0 0 0 auto;
    isolation: isolate;
    grid-template-rows: auto minmax(0, 1fr);
    border-radius: 0 0 0 28px;
    background:
        radial-gradient(circle at 92% 8%, rgba(7, 151, 91, 0.11), transparent 24%),
        radial-gradient(circle at 4% 60%, rgba(225, 178, 91, 0.09), transparent 22%),
        radial-gradient(circle, rgba(7, 132, 81, 0.045) 0 1px, transparent 1.2px) 0 0 / 24px 24px,
        linear-gradient(160deg, #ffffff 0%, #fbfffd 47%, #fffaf4 100%);
    box-shadow: -16px 0 46px rgba(16, 48, 40, 0.16);
}
.drawer.drawer--guest-translate::before,
.drawer.drawer--guest-translate::after,
.drawer.drawer--guest-contacts::before,
.drawer.drawer--guest-contacts::after,
.drawer.drawer--guest-issues::before,
.drawer.drawer--guest-issues::after,
.drawer.drawer--guest-emergency::before,
.drawer.drawer--guest-emergency::after {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    content: "";
}
.drawer.drawer--guest-translate::before,
.drawer.drawer--guest-contacts::before,
.drawer.drawer--guest-issues::before,
.drawer.drawer--guest-emergency::before {
    width: 112px;
    height: 188px;
    top: 104px;
    right: -58px;
    border: 1px solid rgba(7, 132, 81, 0.12);
    border-radius: 100% 0 100% 0;
    background: linear-gradient(
        102deg,
        transparent 49.2%,
        rgba(7, 132, 81, 0.09) 49.7%,
        rgba(7, 132, 81, 0.09) 50.3%,
        transparent 50.8%
    );
    transform: rotate(24deg);
}
.drawer.drawer--guest-translate::after,
.drawer.drawer--guest-contacts::after,
.drawer.drawer--guest-issues::after,
.drawer.drawer--guest-emergency::after {
    width: min(280px, 68%);
    aspect-ratio: 704 / 354;
    top: 52%;
    left: 50%;
    background: url("/media/guest/asset/logo.png") center / contain no-repeat;
    opacity: 0.065;
    transform: translate(-50%, -50%);
}
.drawer--guest-translate .drawer__header,
.drawer--guest-translate .drawer__body,
.drawer--guest-contacts .drawer__header,
.drawer--guest-contacts .drawer__body,
.drawer--guest-issues .drawer__header,
.drawer--guest-issues .drawer__body,
.drawer--guest-emergency .drawer__header,
.drawer--guest-emergency .drawer__body {
    width: 100%;
    margin: 0;
    position: relative;
    z-index: 1;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.drawer--guest-translate .drawer__header,
.drawer--guest-contacts .drawer__header,
.drawer--guest-issues .drawer__header,
.drawer--guest-emergency .drawer__header {
    min-height: 0;
    padding: 17px 22px 10px;
    align-items: flex-start;
}
.drawer--guest-translate .drawer__header .eyebrow,
.drawer--guest-contacts .drawer__header .eyebrow,
.drawer--guest-issues .drawer__header .eyebrow,
.drawer--guest-emergency .drawer__header .eyebrow {
    margin: 0 0 7px;
    color: #078252;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.15em;
}
.drawer--guest-translate .drawer__header h2,
.drawer--guest-contacts .drawer__header h2,
.drawer--guest-issues .drawer__header h2,
.drawer--guest-emergency .drawer__header h2 {
    margin: 0;
    color: #073f35;
    font-family: var(--font-travel-serif);
    font-size: 28px;
    font-weight: 650;
    line-height: 1.05;
    letter-spacing: -0.035em;
}
.drawer--guest-translate .drawer__header .icon-button,
.drawer--guest-contacts .drawer__header .icon-button,
.drawer--guest-issues .drawer__header .icon-button,
.drawer--guest-emergency .drawer__header .icon-button {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    margin-top: -5px;
    border: 1px solid #e1ebe7;
    border-radius: 16px;
    color: #173f3b;
    background: rgba(251, 253, 252, 0.88);
    box-shadow: 0 7px 18px rgba(25, 70, 60, 0.05);
}
.drawer--guest-translate .drawer__body,
.drawer--guest-contacts .drawer__body,
.drawer--guest-issues .drawer__body,
.drawer--guest-emergency .drawer__body {
    padding: 18px 22px calc(22px + env(safe-area-inset-bottom));
}
.drawer--guest-translate .guest-translate {
    gap: 18px;
}
.drawer--guest-translate .guest-translate__langs {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
    align-items: end;
    gap: 5px;
}
.drawer--guest-translate .guest-translate__lang {
    min-width: 0;
    gap: 7px;
    color: #315e55;
    font-size: 13px;
    font-weight: 800;
}
.drawer--guest-translate .guest-translate__lang .nice-select {
    width: 100%;
    min-width: 0;
}
.drawer--guest-translate .guest-translate__lang .select,
.drawer--guest-translate .guest-translate__lang .nice-select__trigger {
    width: 100%;
    min-height: 44px;
    padding: 8px 28px 8px 9px;
    border-color: rgba(38, 91, 78, 0.2);
    border-radius: 13px;
    color: #173f3a;
    background-color: rgba(255, 255, 255, 0.78);
    box-shadow: 0 5px 14px rgba(30, 64, 55, 0.04);
    font-size: 11px;
}
.drawer--guest-translate .nice-select__label--flag {
    gap: 5px;
}
.drawer--guest-translate .nice-select__label--flag .flag-circle {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
}
.drawer--guest-translate .guest-translate__swap {
    width: 34px;
    height: 44px;
    border-color: transparent;
    border-radius: 13px;
    color: #078252;
    background: transparent;
    box-shadow: none;
    transform: none;
}
.drawer--guest-translate .guest-translate__swap:active {
    transform: rotate(180deg) scale(0.94);
}
.drawer--guest-translate .guest-translate__swap .icon {
    width: 17px;
    height: 17px;
}
.drawer--guest-translate .guest-translate__field {
    gap: 9px;
}
.drawer--guest-translate .guest-translate__field-label {
    color: #18433d;
    font-size: 13px;
    font-weight: 800;
}
.drawer--guest-translate .guest-translate__text {
    min-height: 116px;
    padding: 13px 14px 30px;
    border-color: rgba(38, 91, 78, 0.2);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 6px 15px rgba(30, 64, 55, 0.04);
    font-size: 15px;
}
.drawer--guest-translate .guest-translate__field-foot {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 9px;
}
.drawer--guest-translate .guest-translate__mic {
    min-height: 42px;
    padding: 0 14px;
    border-color: rgba(7, 130, 82, 0.28);
    color: #087653;
    background: rgba(255, 255, 255, 0.74);
}
.drawer--guest-translate .guest-translate__mic-hint {
    min-height: 42px;
    padding: 8px 12px;
    border-radius: 16px;
    color: #607871;
    background: rgba(239, 246, 243, 0.86);
    font-size: 10px;
}
.drawer--guest-translate .guest-translate__go {
    min-height: 50px;
    border-color: transparent;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(100deg, #078b59, #006b42);
    box-shadow: 0 9px 20px rgba(0, 104, 65, 0.2);
}
.drawer--guest-translate .guest-translate__safety {
    gap: 11px;
    padding: 14px;
    border: 1px solid rgba(35, 116, 94, 0.18);
    border-radius: 16px;
    background: rgba(237, 248, 244, 0.86);
}
.drawer--guest-translate .guest-translate__safety-icon {
    color: #087653;
}
.drawer--guest-translate .guest-translate__safety p {
    color: #41665f;
    font-size: 11px;
}
.drawer--guest-translate .guest-translate__emergency-link {
    justify-content: center;
    border-color: rgba(218, 80, 74, 0.32);
    background: #fff0ed;
}
.drawer--guest-translate .guest-translate__result-card {
    border-color: rgba(38, 91, 78, 0.16);
    background: rgba(255, 255, 255, 0.84);
}
@media (max-width: 380px) {
    .drawer--guest-translate .drawer__header,
    .drawer--guest-translate .drawer__body,
    .drawer--guest-contacts .drawer__header,
    .drawer--guest-contacts .drawer__body,
    .drawer--guest-issues .drawer__header,
    .drawer--guest-issues .drawer__body,
    .drawer--guest-emergency .drawer__header,
    .drawer--guest-emergency .drawer__body {
        padding-right: 14px;
        padding-left: 14px;
    }
    .drawer--guest-translate .guest-translate__langs {
        grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr);
        gap: 4px;
    }
    .drawer--guest-translate .guest-translate__swap {
        width: 32px;
    }
    .drawer--guest-translate .guest-translate__lang .select,
    .drawer--guest-translate .guest-translate__lang .nice-select__trigger {
        padding-right: 23px;
        padding-left: 7px;
        font-size: 10px;
    }
    .drawer--guest-translate .guest-translate__field-foot {
        grid-template-columns: 1fr;
    }
}
@media (prefers-reduced-motion: reduce) {
    .drawer.drawer--guest-translate,
    .drawer.drawer--guest-contacts,
    .drawer.drawer--guest-issues,
    .drawer.drawer--guest-emergency {
        animation: none;
    }
}

/* One typography system for the three primary guest section headers. */
.guest-main--me > .guest-page-head .eyebrow,
.guest-shell--help .guest-page-head .eyebrow,
.guest-shell--explore-library .explore-library-hero .eyebrow {
    margin: 0 0 10px;
    color: #08735e;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.17em;
}
.guest-home-intro h1,
.guest-main--me > .guest-page-head h1,
.guest-shell--help .guest-page-head h1,
.guest-shell--explore-library .explore-library-hero h1 {
    margin: 0 0 10px;
    color: #063f35;
    font-family: var(--font-travel-serif);
    font-size: clamp(29px, 7.4vw, 39px);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -0.035em;
    text-wrap: balance;
}
/* Home greeting follows the compact sans-serif title used by Lịch trình. */
.guest-home-intro h1 {
    font-family: var(--font-sans);
    font-weight: 700;
    letter-spacing: -0.02em;
}
.guest-main--me > .guest-page-head p:last-child,
.guest-shell--help .guest-page-head > p:last-child,
.guest-shell--explore-library .explore-library-hero > p:last-child {
    color: #42645f;
    font-size: 14px;
    line-height: 1.45;
}
.guest-shell--explore-library .explore-library-hero {
    gap: 0;
}

/* Support history — a calm, premium ticket surface with clear hierarchy. */
.guest-issues-section {
    margin-top: 28px;
    padding: 17px 14px 15px;
    border: 1px solid rgba(73, 142, 119, 0.16);
    border-radius: 24px;
    background:
        radial-gradient(circle at 92% 4%, rgba(218, 239, 231, 0.78), transparent 34%),
        linear-gradient(150deg, rgba(242, 250, 246, 0.98), rgba(255, 249, 239, 0.94));
    box-shadow: 0 13px 30px rgba(41, 81, 69, 0.1);
}
.guest-issues-section .guest-section__head {
    margin: 0 2px 14px;
    align-items: flex-end;
}
.guest-issues-section .guest-section__head .eyebrow {
    margin: 0 0 4px;
    color: #16826b;
    font-size: 9px;
    letter-spacing: 0.15em;
}
.guest-issues-section .guest-section__head h2 {
    color: #153f38;
    font-family: var(--font-travel-serif);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.08;
}
.guest-issues-section .guest-section__meta {
    min-height: 25px;
    padding: 5px 9px;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(46, 137, 108, 0.14);
    border-radius: 999px;
    color: #397064;
    background: rgba(255, 255, 255, 0.72);
    font-size: 10px;
    box-shadow: 0 4px 12px rgba(45, 88, 75, 0.06);
}
.guest-issues-section .guest-issues-preview-card {
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.guest-issues-section .guest-issues--preview {
    gap: 8px;
}
.guest-issues-section .guest-issue--preview {
    position: relative;
    padding: 14px;
    overflow: hidden;
    gap: 11px;
    border: 1px solid rgba(67, 126, 108, 0.13);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow:
        inset 3px 0 0 #65b9a0,
        0 7px 17px rgba(39, 77, 66, 0.07);
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}
.guest-issues-section .guest-issue--preview.guest-issue--urgent {
    box-shadow:
        inset 3px 0 0 #ee8d78,
        0 7px 17px rgba(92, 55, 43, 0.07);
}
.guest-issues-section .guest-issue--preview:hover,
.guest-issues-section .guest-issue--preview:focus-visible {
    border-color: rgba(30, 132, 102, 0.28);
    background: #fff;
    box-shadow:
        inset 3px 0 0 #41a98b,
        0 11px 24px rgba(39, 77, 66, 0.12);
    transform: translateY(-1px);
}
.guest-issues-section .guest-issue__head {
    align-items: center;
}
.guest-issue__reference {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.guest-issue__reference-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: inline-grid;
    place-items: center;
    border-radius: 9px;
    color: #08745d;
    background: #e3f4ed;
}
.guest-issue__reference-icon .icon {
    width: 14px;
    height: 14px;
}
.guest-issues-section .guest-issue__reference strong {
    overflow: hidden;
    color: #173f38;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.025em;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.guest-issues-section .guest-issue__head .badge {
    min-height: 23px;
    padding: 3px 8px;
    font-size: 9px;
}
.guest-issues-section .guest-issue__description {
    min-height: 42px;
    padding: 10px 11px;
    border-radius: 11px;
    color: #506c66;
    background: rgba(242, 247, 244, 0.78);
    font-size: 11.5px;
    line-height: 1.48;
}
.guest-issues-section .guest-issue__preview-status {
    padding: 2px 1px 0;
    border-top: 0;
    color: #456a62;
}
.guest-issues-section .guest-issue__preview-status > span:not(.badge) {
    font-weight: 700;
}
.guest-issues-section .guest-issue__preview-status > .icon {
    width: 16px;
    height: 16px;
    color: #08745d;
}
.guest-issues-section .guest-issues-preview-card .guest-list-more {
    min-height: 48px;
    margin: 9px 0 0;
    padding: 10px 16px;
    width: 100%;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(100deg, #07845f, #05694f);
    box-shadow: 0 8px 22px rgba(0, 75, 64, 0.28);
    backdrop-filter: blur(10px);
    font-size: 15px;
    font-weight: 800;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease;
}
.guest-issues-section .guest-issues-preview-card .guest-list-more:hover,
.guest-issues-section .guest-issues-preview-card .guest-list-more:focus-visible {
    box-shadow: 0 11px 23px rgba(5, 105, 79, 0.27);
    transform: translateY(-1px);
}

/* Full request list in the drawer: larger type and a three-step journey that
   reads instantly on mobile instead of looking like a tiny progress table. */
.drawer--guest-issues .guest-issues--drawer {
    gap: 15px;
}
.drawer--guest-issues .guest-issue {
    padding: 17px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(59, 128, 106, 0.16);
    border-radius: 20px;
    background:
        radial-gradient(circle at 100% 0, rgba(222, 243, 235, 0.76), transparent 34%),
        rgba(255, 255, 255, 0.94);
    box-shadow:
        inset 4px 0 0 #61b79c,
        0 11px 25px rgba(39, 78, 67, 0.1);
}
.drawer--guest-issues .guest-issue.guest-issue--urgent {
    background:
        radial-gradient(circle at 100% 0, rgba(255, 227, 220, 0.75), transparent 34%),
        rgba(255, 255, 255, 0.96);
    box-shadow:
        inset 4px 0 0 #ed8a74,
        0 11px 25px rgba(91, 57, 46, 0.1);
}
.drawer--guest-issues .guest-issue__head {
    margin: 0 0 12px;
    align-items: center;
}
.drawer--guest-issues .guest-issue__reference {
    min-width: 0;
}
.drawer--guest-issues .guest-issue__reference-icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    border-radius: 11px;
}
.drawer--guest-issues .guest-issue__reference-icon .icon {
    width: 17px;
    height: 17px;
}
.drawer--guest-issues .guest-issue h3 {
    overflow: hidden;
    color: #153f38;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.025em;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.drawer--guest-issues .guest-issue__head .badge {
    min-height: 27px;
    padding: 5px 9px;
    font-size: 10.5px;
}
.drawer--guest-issues .guest-issue > p {
    margin: 0 0 16px;
    padding: 12px 13px;
    border: 1px solid rgba(64, 126, 107, 0.1);
    border-radius: 13px;
    color: #45645d;
    background: rgba(245, 249, 247, 0.82);
    font-size: 14px;
    line-height: 1.52;
}
.drawer--guest-issues .issue-progress {
    margin: 3px 0 14px;
    padding: 0 4px;
    gap: 0;
}
.drawer--guest-issues .issue-progress span {
    min-width: 0;
    padding: 31px 4px 0;
    position: relative;
    color: #87948f;
    font-size: 10.5px;
    font-weight: 750;
    line-height: 1.25;
}
.drawer--guest-issues .issue-progress span::before {
    width: 17px;
    height: 17px;
    padding: 0;
    position: absolute;
    z-index: 2;
    top: 4px;
    left: 50%;
    display: grid;
    place-items: center;
    border: 3px solid #fff;
    border-radius: 50%;
    color: #fff;
    background: #d8dedb;
    box-shadow: 0 0 0 2px #d8dedb;
    content: "";
    font-size: 9px;
    line-height: 1;
    transform: translateX(-50%);
}
.drawer--guest-issues .issue-progress span::after {
    height: 3px;
    position: absolute;
    z-index: 1;
    top: 11px;
    right: calc(-50% + 10px);
    left: calc(50% + 10px);
    border-radius: 999px;
    background: #dfe5e2;
    content: "";
}
.drawer--guest-issues .issue-progress span:last-child::after {
    display: none;
}
.drawer--guest-issues .issue-progress span.done,
.drawer--guest-issues .issue-progress span.current {
    color: #08745d;
    font-weight: 850;
}
.drawer--guest-issues .issue-progress span.done::before {
    background: #0a8a6d;
    box-shadow: 0 0 0 2px rgba(10, 138, 109, 0.2);
    content: "✓";
}
.drawer--guest-issues .issue-progress span.done::after {
    background: linear-gradient(90deg, #0a8a6d, #62bea2);
}
.drawer--guest-issues .issue-progress span.current::before {
    background: #fff;
    box-shadow:
        0 0 0 2px #0a8a6d,
        0 0 0 6px rgba(10, 138, 109, 0.11);
    animation: guest-issue-current-step 2.4s ease-in-out infinite;
}
@keyframes guest-issue-current-step {
    50% {
        box-shadow:
            0 0 0 2px #0a8a6d,
            0 0 0 9px rgba(10, 138, 109, 0.05);
    }
}
.drawer--guest-issues .guest-issue__more {
    margin-top: 10px;
    padding-top: 0;
    border-top: 0;
}
.drawer--guest-issues .guest-issue__more > summary {
    min-height: 44px;
    padding: 10px 15px;
    justify-content: center;
    border: 1px solid rgba(29, 132, 101, 0.19);
    border-radius: 12px;
    color: #08745d;
    background: linear-gradient(135deg, #eaf7f2, #f5fbf8);
    box-shadow: 0 5px 13px rgba(32, 91, 73, 0.07);
    font-size: 13.5px;
    font-weight: 800;
}
.drawer--guest-issues .guest-issue__more > summary .icon {
    width: 17px;
    height: 17px;
}
.drawer--guest-issues .guest-issue__more[open] > summary {
    color: #fff;
    background: linear-gradient(100deg, #07845f, #05694f);
    box-shadow: 0 8px 18px rgba(5, 105, 79, 0.2);
}
.drawer--guest-issues .guest-issue__actions .button {
    min-height: 39px;
    font-size: 12px;
}
.drawer--guest-issues .guest-issue__detail-section h4 {
    font-size: 13px;
}
.drawer--guest-issues .guest-issue__timeline li,
.drawer--guest-issues .guest-issue__timeline small {
    font-size: 12.5px;
}
@media (prefers-reduced-motion: reduce) {
    .drawer--guest-issues .issue-progress span.current::before {
        animation: none;
    }
}

/* Journey overview -> daily itinerary. Keep the old screen painted while the
   selected day is prepared, then reveal the editorial blocks in sequence. */
body.guest-journey-detail-transitioning .guest-main {
    view-transition-name: guest-journey-detail-content;
}
body.guest-journey-detail-transitioning .guest-bottom-nav,
body.guest-journey-detail-transitioning [data-guest-journey-day] {
    pointer-events: none;
}
::view-transition-group(guest-journey-detail-content) {
    overflow: clip;
    animation: none;
}
::view-transition-old(guest-journey-detail-content),
::view-transition-new(guest-journey-detail-content) {
    background: #fbf5e9;
    backface-visibility: hidden;
    mix-blend-mode: normal;
    will-change: opacity, transform, filter;
}
::view-transition-old(guest-journey-detail-content) {
    animation: guest-journey-detail-old 440ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
::view-transition-new(guest-journey-detail-content) {
    animation: guest-journey-detail-new 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes guest-journey-detail-old {
    to {
        opacity: 0;
        filter: blur(2px);
        transform: translate3d(0, -12px, 0) scale(0.985);
    }
}
@keyframes guest-journey-detail-new {
    from {
        opacity: 0;
        filter: blur(4px);
        transform: translate3d(0, 24px, 0) scale(0.992);
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: translate3d(0, 0, 0) scale(1);
    }
}
.guest-main--journey-detail-leaving {
    animation: guest-journey-detail-old 150ms ease-in both;
}
.guest-main--journey-detail-entering {
    animation: guest-journey-detail-new 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* The itinerary hero keeps a quiet cinematic motion after the entrance has
   settled, matching the living photo treatment used on the home screen. */
.guest-itinerary-banner img {
    transform: scale(1.035) translate3d(-0.6%, -0.3%, 0);
    transform-origin: 48% 24%;
    will-change: transform;
    animation: guest-itinerary-banner-drift 20s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}
@keyframes guest-itinerary-banner-drift {
    to {
        transform: scale(1.13) translate3d(1.2%, 0.7%, 0);
    }
}

/* One-time staged entrance after choosing a day from the journey overview. */
.guest-main--itinerary-arriving > .guest-itinerary-banner,
.guest-main--itinerary-arriving > .guest-itinerary-overview,
.guest-main--itinerary-arriving > .guest-itinerary-tabs {
    animation: guest-itinerary-block-arrive 720ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
.guest-main--itinerary-arriving > .guest-itinerary-banner {
    animation-delay: 60ms !important;
}
.guest-main--itinerary-arriving > .guest-itinerary-overview {
    animation-delay: 150ms !important;
}
.guest-main--itinerary-arriving > .guest-itinerary-tabs {
    animation-delay: 260ms !important;
}
.guest-main--itinerary-arriving .guest-itinerary-day > .guest-day__title {
    animation: guest-itinerary-block-arrive 680ms cubic-bezier(0.16, 1, 0.3, 1) 350ms both;
}
.guest-main--itinerary-arriving .guest-itinerary-title-banner {
    animation: guest-itinerary-block-arrive 720ms cubic-bezier(0.16, 1, 0.3, 1) 440ms both;
}
.guest-main--itinerary-arriving .schedule-card {
    animation: guest-itinerary-card-arrive 680ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.guest-main--itinerary-arriving .schedule-card:nth-child(1) {
    animation-delay: 540ms;
}
.guest-main--itinerary-arriving .schedule-card:nth-child(2) {
    animation-delay: 630ms;
}
.guest-main--itinerary-arriving .schedule-card:nth-child(3) {
    animation-delay: 720ms;
}
.guest-main--itinerary-arriving .schedule-card:nth-child(4) {
    animation-delay: 810ms;
}
.guest-main--itinerary-arriving .schedule-card:nth-child(n + 5) {
    animation-delay: 900ms;
}
@keyframes guest-itinerary-block-arrive {
    from {
        opacity: 0;
        filter: blur(3px) saturate(0.82);
        transform: translate3d(0, 18px, 0) scale(0.988);
    }
    to {
        opacity: 1;
        filter: blur(0) saturate(1);
        transform: translate3d(0, 0, 0) scale(1);
    }
}
@keyframes guest-itinerary-card-arrive {
    from {
        opacity: 0;
        filter: blur(2px);
        transform: translate3d(18px, 12px, 0) scale(0.985);
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: translate3d(0, 0, 0) scale(1);
    }
}
@media (prefers-reduced-motion: reduce) {
    body.guest-journey-detail-transitioning .guest-main {
        view-transition-name: none;
    }
    .guest-main--journey-detail-leaving,
    .guest-main--journey-detail-entering,
    .guest-itinerary-banner img,
    .guest-main--itinerary-arriving > .guest-itinerary-banner,
    .guest-main--itinerary-arriving > .guest-itinerary-overview,
    .guest-main--itinerary-arriving > .guest-itinerary-tabs,
    .guest-main--itinerary-arriving .guest-itinerary-day > .guest-day__title,
    .guest-main--itinerary-arriving .guest-itinerary-title-banner,
    .guest-main--itinerary-arriving .schedule-card {
        animation: none !important;
    }
}

/* Guest picker inside the flight form. Descendant, not child: the picker now
   sits inside the "For guests" block. Its helper text moved into the markup so
   it can be translated — generated CSS content cannot go through sp(). */
#flight-form .field:has(input[name="tripGuestIds"]) {
    padding: 14px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    background: var(--brand-50);
}
#flight-form .field:has(input[name="tripGuestIds"]) > label {
    display: block;
    margin-bottom: 4px;
}
#flight-form .field:has(input[name="tripGuestIds"]) .choice-grid {
    gap: 8px;
}
#flight-form .field:has(input[name="tripGuestIds"]) .choice {
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
}
#flight-form .field:has(input[name="tripGuestIds"]) .choice label {
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--paper);
}
@media (max-width: 640px) {
    #flight-form .field:has(input[name="tripGuestIds"]) {
        padding: 12px;
    }
}

/* Guest flight information ------------------------------------------------
   The flight list and the flight detail are a sub-section of Lịch trình, so
   they reuse that screen's chrome — banner strip, cream curve header,
   travel-serif title — and the Lịch trình / Yêu cầu card language (warm off
   white panels, sand borders, soft shadow) on the same #fbf5e9 surface. The
   header photo is a band that the content sits below; it is deliberately not a
   full-bleed background, and the topbar and bottom nav stay in place so the
   traveler never loses their way out. */
/* Flights runs without the bottom navigation: it is a drill-down from the Home
   tile with its own back affordance, and the extra 80px of chrome competes with
   the check-in call to action at the foot of the detail screen. The escape
   hatches it removes are replaced by .guest-flight-support below, which also
   fixes the older gap — there was no route to Help from here at all. */
.guest-shell--flights {
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
    background: #fbf5e9;
}
.guest-shell--flights .guest-bottom-nav {
    display: none;
}
/* Fully opaque, not 0.98: flight numbers, times and gates scroll underneath
   this bar, and even a 2% bleed-through puts ghost digits behind the logo. A
   document screen wants a clean edge, not a frosted one. */
/* The header floats transparently over the hero, matching Lịch trình. It is
   absolute rather than sticky, so it scrolls away instead of staying to be
   scrolled under — which is what made an opaque band necessary before. */
.guest-main--flights {
    padding-top: 0;
}

/* --- Header band --------------------------------------------------------- */
/* Geometry copied from .guest-itinerary-banner (including its later override)
   so the two sibling screens open on the same horizon line. */
.guest-flights-banner {
    height: clamp(195px, 47vw, 246px);
    margin: 0 -18px;
    position: relative;
    overflow: hidden;
    background: #c6e8e6;
}
.guest-flights-banner img {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    display: block;
    object-fit: cover;
    object-position: center top;
}
/* Shimmer while the hero decodes, so a slow connection shows a sky-toned
   placeholder instead of a flat teal block that suddenly pops. It sits BEHIND
   the image rather than fading it in: if the class were ever left on — a JS
   error before hydrateGuestMedia, say — a foreground overlay would hide the
   hero for good, while this one simply gets painted over. */
.guest-flights-banner.is-media-loading::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(100deg, transparent 18%, rgba(255, 255, 255, 0.45) 50%, transparent 82%),
        linear-gradient(180deg, #bfe4f2, #d8eee6);
    background-size:
        220% 100%,
        100% 100%;
    animation: guest-flights-banner-shimmer 1.25s ease-in-out infinite;
    content: "";
}
@keyframes guest-flights-banner-shimmer {
    from {
        background-position:
            140% 0,
            0 0;
    }
    to {
        background-position:
            -40% 0,
            0 0;
    }
}
@media (prefers-reduced-motion: reduce) {
    .guest-flights-banner.is-media-loading::before {
        animation: none;
    }
}

/* --- Support route ------------------------------------------------------- */
.guest-flight-support {
    width: 100%;
    min-height: 60px;
    padding: 13px 14px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid rgba(221, 200, 165, 0.62);
    border-radius: 18px;
    background: rgba(255, 253, 247, 0.96);
    text-align: left;
    box-shadow: 0 5px 16px rgba(91, 65, 31, 0.06);
}
.guest-flight-support:hover,
.guest-flight-support:focus-visible {
    border-color: #cfe0d6;
    background: #fffdf8;
}
.guest-flight-support__icon {
    width: 36px;
    height: 36px;
    display: grid;
    flex: 0 0 36px;
    place-items: center;
    border-radius: 12px;
    color: #0b7d64;
    background: #e2f1ea;
}
.guest-flight-support__icon .icon {
    width: 18px;
    height: 18px;
}
.guest-flight-support__copy {
    min-width: 0;
    display: grid;
    flex: 1 1 auto;
    gap: 2px;
}
.guest-flight-support__copy strong {
    color: #153f38;
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.25;
}
.guest-flight-support__copy small {
    color: #6d827d;
    font-size: 11.5px;
    line-height: 1.35;
}
.guest-flight-support > .icon {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    color: #7d8f8a;
}
/* Cancelled or changed: this is the moment someone stops reading the times and
   starts looking for a person, so it is tinted to match the status badge and
   sits directly under the route instead of at the foot of the screen. */
.guest-flight-support--urgent {
    border-color: rgba(196, 74, 62, 0.42);
    background: #fdf1ef;
    box-shadow: 0 6px 18px rgba(150, 60, 50, 0.1);
}
.guest-flight-support--urgent .guest-flight-support__icon {
    color: #b5453a;
    background: #fbe3e0;
}
.guest-flight-support--urgent .guest-flight-support__copy strong {
    color: #8f2f26;
}
.guest-flight-support--urgent .guest-flight-support__copy small {
    color: #8a6460;
}
.guest-flight-support--urgent > .icon {
    color: #b5453a;
}

/* --- Loading skeleton ---------------------------------------------------- */
/* Every placeholder is a `.sk`: one shimmer definition, sized per role. The
   boxes sit at the same coordinates as the real content so nothing jumps when
   the data lands. */
.sk {
    display: block;
    border-radius: 7px;
    background: linear-gradient(100deg, #efe7d6 18%, #f8f2e6 50%, #efe7d6 82%);
    background-size: 220% 100%;
    animation: guest-flights-banner-shimmer 1.25s ease-in-out infinite;
}
.sk--line {
    height: 11px;
}
.sk--w40 {
    width: 40%;
}
.sk--w60 {
    width: 60%;
}
.sk--w80 {
    width: 80%;
}
.sk--w90 {
    width: 90%;
}
.sk--heading {
    width: 68%;
    height: 30px;
    margin: 9px 0 10px;
    border-radius: 10px;
}
.sk--mark {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 11px;
}
.sk--pill {
    width: 66px;
    height: 21px;
    flex: 0 0 66px;
    border-radius: 999px;
}
/* Matches the real endpoint stack: serif time + IATA code + date. */
.sk--time {
    width: 74px;
    height: 70px;
    border-radius: 9px;
}
.sk--path {
    width: 46px;
    height: 12px;
    align-self: center;
    border-radius: 999px;
}
.sk--action {
    width: 100%;
    height: 44px;
    border-radius: 13px;
}
/* Stand-ins for the group label ("CHIỀU ĐI · 1 chuyến bay") and the airport
   line under the journey strip. Without them the first card starts 26px too
   high and every card is short, so the list jumps when data lands. */
.sk--group {
    width: 46%;
    height: 10px;
    margin: 4px 2px 0;
}
.sk--airports {
    width: 74%;
    height: 12px;
    margin: -3px auto 12px;
}
.guest-flights-head > .sk {
    position: relative;
    z-index: 1;
}
.guest-flight-card--skeleton .guest-flight-card__airline-copy {
    width: 100%;
    gap: 5px;
}
.guest-flight-card--skeleton .guest-flight-card__journey {
    align-items: center;
}
.guest-flights-banner--loading {
    display: grid;
    place-items: center;
}
/* The plane crosses the banner, which on this screen is literally the sky. */
.guest-flights-loading__plane {
    position: relative;
    z-index: 1;
    color: rgba(255, 255, 255, 0.92);
    filter: drop-shadow(0 4px 10px rgba(8, 52, 76, 0.35));
    animation: guest-flights-loading-fly 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.guest-flights-loading__plane .icon {
    width: 34px;
    height: 34px;
}
@keyframes guest-flights-loading-fly {
    0% {
        opacity: 0;
        transform: translate3d(-72px, 14px, 0) rotate(-6deg);
    }
    18%,
    78% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate3d(72px, -14px, 0) rotate(-6deg);
    }
}
.guest-flights-loading__dots {
    margin-top: 12px;
    display: flex;
    gap: 6px;
}
.guest-flights-loading__dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #0b8067;
    opacity: 0.35;
    animation: guest-flights-loading-dot 1.1s ease-in-out infinite;
}
.guest-flights-loading__dots span:nth-child(2) {
    animation-delay: 0.14s;
}
.guest-flights-loading__dots span:nth-child(3) {
    animation-delay: 0.28s;
}
@keyframes guest-flights-loading-dot {
    0%,
    100% {
        opacity: 0.3;
        transform: translateY(0);
    }
    50% {
        opacity: 1;
        transform: translateY(-4px);
    }
}
@media (prefers-reduced-motion: reduce) {
    .sk,
    .guest-flights-loading__plane,
    .guest-flights-loading__dots span {
        animation: none;
    }
}

/* --- Load failure -------------------------------------------------------- */
.guest-load-error {
    margin: 28px auto;
    padding: 30px 24px;
    max-width: 420px;
    display: grid;
    justify-items: center;
    gap: 6px;
    border: 1px dashed rgba(221, 200, 165, 0.8);
    border-radius: 20px;
    background: rgba(255, 253, 247, 0.96);
    text-align: center;
}
.guest-load-error__icon {
    width: 46px;
    height: 46px;
    margin-bottom: 6px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: #a8443a;
    background: #fbe6e3;
}
.guest-load-error__icon .icon {
    width: 23px;
    height: 23px;
}
.guest-load-error h2 {
    margin: 0;
    color: #063f35;
    font-family: var(--font-travel-serif);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.02em;
}
.guest-load-error p {
    max-width: 34ch;
    margin: 0 0 6px;
    color: #6d827d;
    font-size: 12.5px;
    line-height: 1.5;
}
.guest-load-error__retry {
    min-height: 46px;
    padding-inline: 20px;
    border-radius: 14px;
}
/* Same photograph as Lịch trình, cooled toward sky. Flights is a sibling of
   that screen, not a copy of it, and a tinted overlay buys the distinction
   without shipping a second hero image on a travel-day connection. */
.guest-flights-banner::after {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(130% 78% at 76% -8%, rgba(150, 214, 238, 0.34), transparent 58%),
        linear-gradient(180deg, rgba(9, 52, 76, 0.3) 0%, rgba(9, 52, 76, 0.05) 40%, transparent 72%);
    content: "";
}
/* Floating over a bright photo, so it carries its own light: a frosted pill
   with the chevron set in a tinted disc. The disc gives the control a focal
   point at a glance — a flat bordered pill read as a text label, not a button. */
.guest-flights-back {
    min-height: 42px;
    padding: 5px 15px 5px 5px;
    position: absolute;
    z-index: 3;
    /* Clears the transparent header floating above it. */
    top: calc(72px + env(safe-area-inset-top));
    left: 18px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(255, 255, 255, 0.86);
    border-radius: 999px;
    background: rgba(255, 253, 248, 0.82);
    color: #0a5346;
    box-shadow:
        0 10px 24px rgba(8, 45, 38, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px) saturate(1.15);
    -webkit-backdrop-filter: blur(12px) saturate(1.15);
    transition:
        transform 160ms ease,
        background 160ms ease,
        box-shadow 160ms ease;
}
.guest-flights-back__mark {
    width: 32px;
    height: 32px;
    display: grid;
    flex: 0 0 32px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, #0b8067, #055d4b);
    box-shadow: 0 3px 8px rgba(5, 93, 75, 0.32);
}
.guest-flights-back__mark .icon {
    width: 16px;
    height: 16px;
    stroke-width: 2.4;
}
.guest-flights-back__label {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.guest-flights-back:hover,
.guest-flights-back:focus-visible {
    background: #fffdf8;
    box-shadow:
        0 12px 26px rgba(8, 45, 38, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.guest-flights-back:active {
    transform: scale(0.97);
}
@media (prefers-reduced-motion: reduce) {
    .guest-flights-back {
        transition: none;
    }
    .guest-flights-back:active {
        transform: none;
    }
}
.guest-flights-head {
    min-height: 140px;
    margin: -90px -18px 0;
    padding: 35px 20px 12px;
    position: relative;
    z-index: 2;
    isolation: isolate;
}
.guest-flights-head__curve {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: -1;
    pointer-events: none;
}
.guest-flights-head__curve path {
    fill: #fbf5e9;
}
/* The curve must stay out of this: it is absolutely positioned to paint behind
   the text, and forcing `position: relative` on it drops it into normal flow,
   where it eats its own height as blank cream above the eyebrow. */
.guest-flights-head > *:not(.guest-flights-head__curve) {
    position: relative;
    z-index: 1;
}
.guest-flights-head > .eyebrow {
    margin: 0 0 5px;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #2d796a;
    font-size: 9.5px;
    font-weight: 850;
    letter-spacing: 0.13em;
}
.guest-flights-head > .eyebrow .icon {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
}
.guest-flights-head > .eyebrow span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.guest-flights-head h1 {
    margin: 0;
    color: #063f35;
    font-family: var(--font-travel-serif);
    font-size: clamp(29px, 7.5vw, 40px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.04em;
    overflow-wrap: anywhere;
}
.guest-flights-head__lede {
    max-width: 330px;
    margin: 8px 0 0;
    color: #4c6c65;
    font-size: 12.5px;
    line-height: 1.45;
}
.guest-flights-head__meta {
    margin: 11px 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.guest-flights-head__meta .badge {
    padding: 5px 10px;
    font-size: 10px;
}
.guest-flights-head__operator {
    color: #4c6c65;
    font-size: 11.5px;
    font-weight: 700;
}

/* Entrance: two elements only. `.guest-main > *` is globally pinned to
   `animation: none`, hence the !important — the same escape the itinerary
   entrance uses. Reuses that screen's keyframe and easing so arriving at
   Chuyến bay feels like arriving at Lịch trình. */
.guest-main--flights-arriving > .guest-flights-banner,
.guest-main--flights-arriving > .guest-flights-head {
    animation: guest-itinerary-block-arrive 640ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
.guest-main--flights-arriving > .guest-flights-banner {
    animation-delay: 40ms !important;
}
.guest-main--flights-arriving > .guest-flights-head {
    animation-delay: 130ms !important;
}
/* Cards cascade in behind the header, reusing the Lịch trình keyframe and
   easing so the two screens arrive with one rhythm. Delays are capped like
   that screen's are: a traveler with eight flights should not wait through
   eight staggered steps to read the first departure time. */
.guest-main--flights-arriving .guest-flights-sheet > *:not(.guest-flights__group),
.guest-main--flights-arriving .guest-flights__group > * {
    animation: guest-itinerary-card-arrive 560ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
.guest-main--flights-arriving .guest-flights-sheet > *:nth-child(1) {
    animation-delay: 200ms !important;
}
.guest-main--flights-arriving .guest-flights-sheet > *:nth-child(2) {
    animation-delay: 260ms !important;
}
.guest-main--flights-arriving .guest-flights-sheet > *:nth-child(3) {
    animation-delay: 320ms !important;
}
.guest-main--flights-arriving .guest-flights-sheet > *:nth-child(n + 4) {
    animation-delay: 380ms !important;
}
/* Inside a direction group: its label, then its flights. */
.guest-main--flights-arriving .guest-flights__group:nth-child(1) > *:nth-child(1) {
    animation-delay: 200ms !important;
}
.guest-main--flights-arriving .guest-flights__group:nth-child(1) > *:nth-child(n + 2) {
    animation-delay: 260ms !important;
}
.guest-main--flights-arriving .guest-flights__group:nth-child(n + 2) > *:nth-child(1) {
    animation-delay: 330ms !important;
}
.guest-main--flights-arriving .guest-flights__group:nth-child(n + 2) > *:nth-child(n + 2) {
    animation-delay: 390ms !important;
}
@media (prefers-reduced-motion: reduce) {
    .guest-main--flights-arriving > .guest-flights-banner,
    .guest-main--flights-arriving > .guest-flights-head,
    .guest-main--flights-arriving .guest-flights-sheet > *,
    .guest-main--flights-arriving .guest-flights__group > * {
        animation: none !important;
    }
}

/* --- Content sheet ------------------------------------------------------- */
.guest-flights-sheet {
    display: grid;
    gap: 14px;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
}
.guest-flights__group {
    display: grid;
    gap: 10px;
}
.guest-flights__group h2 {
    margin: 4px 2px 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    color: #2d796a;
    font-size: 9.5px;
    font-weight: 850;
    letter-spacing: 0.13em;
}
.guest-flights__group h2 small {
    color: #7d8f8a;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Shared panel: the Lịch trình activity card / Yêu cầu card surface. */
.guest-flight-card,
.guest-flight-route,
.guest-flight-facts,
.guest-flight-empty {
    padding: 15px;
    border: 1px solid rgba(221, 200, 165, 0.62);
    border-radius: 20px;
    background: rgba(255, 253, 247, 0.96);
    box-shadow: 0 7px 20px rgba(91, 65, 31, 0.08);
}

/* --- Flight card --------------------------------------------------------- */
.guest-flight-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.guest-flight-card__airline {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 9px;
}
.guest-flight-card__airline-mark {
    width: 32px;
    height: 32px;
    display: grid;
    flex: 0 0 32px;
    place-items: center;
    border-radius: 11px;
    color: #0b7d64;
    background: #e2f1ea;
}
.guest-flight-card__airline-mark .icon {
    width: 16px;
    height: 16px;
}
.guest-flight-card__airline-copy {
    min-width: 0;
    display: grid;
    gap: 1px;
}
.guest-flight-card__airline-copy strong {
    color: #153f38;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: 0.01em;
}
.guest-flight-card__airline-copy small {
    overflow: hidden;
    color: #6d827d;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.guest-flight-card .badge {
    flex: 0 0 auto;
    padding: 4px 9px;
    font-size: 9.5px;
}
.guest-flight-card__journey {
    margin: 14px 0 13px;
    padding: 13px 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    border-radius: 15px;
    background: #fff7e7;
}
.guest-flight-card__point {
    min-width: 0;
    display: grid;
    gap: 2px;
}
.guest-flight-card__point--arrival {
    text-align: right;
}
.guest-flight-card__point strong {
    color: #10403a;
    font-family: var(--font-travel-serif);
    font-size: 26px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
}
.guest-flight-card__point strong sup {
    margin-left: 2px;
    color: #a5641f;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 800;
    vertical-align: super;
}
.guest-flight-card__point > span {
    color: #174f46;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
}
/* No IATA on this endpoint, so the slot holds a full airport name. */
.guest-flight-card__point--named > span {
    font-size: 11px;
    letter-spacing: 0;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.guest-flight-card__point small {
    overflow: hidden;
    color: #7d8f8a;
    font-size: 10.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.guest-flight-card__airports {
    margin: -3px 0 12px;
    padding: 0 2px;
    color: #94a29e;
    font-size: 11px;
    line-height: 1.4;
    text-align: center;
    text-wrap: balance;
}
.guest-flight-card__path {
    min-width: 62px;
    padding-top: 5px;
    display: grid;
    flex: 0 0 auto;
    justify-items: center;
    gap: 4px;
}
.guest-flight-card__path-track {
    width: 100%;
    height: 14px;
    position: relative;
    display: grid;
    place-items: center;
    color: #0b7d64;
}
.guest-flight-card__path-track::before {
    height: 1px;
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    background: repeating-linear-gradient(to right, #58a998 0 4px, transparent 4px 8px);
    content: "";
}
.guest-flight-card__path-track .icon {
    width: 15px;
    height: 15px;
    position: relative;
    padding: 0 3px;
    box-sizing: content-box;
    background: #fff7e7;
}
.guest-flight-card__path small {
    color: #7d8f8a;
    font-size: 10px;
    font-weight: 750;
    white-space: nowrap;
}
.guest-flight-card__action {
    width: 100%;
    min-height: 44px;
    border-radius: 13px;
    background: #fffdf8;
    font-size: 13.5px;
}
/* Cancelled is the one state that must be unmissable before the traveler
   leaves for the airport, so it also tints the panel edge. */
.guest-flight-card--cancelled {
    border-color: rgba(196, 74, 62, 0.42);
}
.guest-flight-card--cancelled .guest-flight-card__journey {
    background: #fdf1ef;
}
.guest-flight-card--cancelled .guest-flight-card__path-track .icon {
    background: #fdf1ef;
}
.guest-flight-card--cancelled .guest-flight-card__airline-mark {
    color: #b5453a;
    background: #fbe3e0;
}
.guest-flight-card--cancelled .guest-flight-card__point strong,
.guest-flight-card--cancelled .guest-flight-card__point > span {
    text-decoration: line-through;
    text-decoration-color: rgba(181, 69, 58, 0.55);
}
.guest-flight-card--completed {
    opacity: 0.86;
}

/* --- Detail: route timeline --------------------------------------------- */
.guest-flight-route {
    padding: 18px 16px;
    position: relative;
    display: grid;
    gap: 12px;
}
.guest-flight-route::before {
    width: 1px;
    position: absolute;
    top: 46px;
    bottom: 46px;
    left: 28px;
    background: repeating-linear-gradient(to bottom, #58a998 0 5px, transparent 5px 9px);
    content: "";
}
.guest-flight-route__leg {
    position: relative;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: start;
    column-gap: 14px;
}
.guest-flight-route__marker {
    width: 13px;
    height: 13px;
    margin: 4px auto 0;
    box-sizing: border-box;
    border: 2px solid #087765;
    border-radius: 50%;
    background: #fffdf7;
}
.guest-flight-route__leg--arrival .guest-flight-route__marker {
    background: #087765;
}
.guest-flight-route__body {
    min-width: 0;
    display: grid;
    gap: 5px;
}
.guest-flight-route__body > .eyebrow {
    margin: 0;
    color: #2d796a;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.13em;
}
.guest-flight-route__time {
    margin: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}
.guest-flight-route__time strong {
    color: #10403a;
    font-family: var(--font-travel-serif);
    font-size: 30px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
}
.guest-flight-route__time sup {
    margin-left: -5px;
    color: #a5641f;
    font-size: 11px;
    font-weight: 800;
    vertical-align: super;
}
.guest-flight-route__time span {
    color: #6d827d;
    font-size: 12px;
    font-weight: 700;
}
/* Shown only when the airline revised the time; the struck value is the
   original schedule so the traveler can see what moved. */
.guest-flight-route__time del {
    color: #97a6a2;
    font-size: 15px;
    font-weight: 650;
    text-decoration-thickness: 1.5px;
}
.guest-flight-route__airport {
    margin: 1px 0 0;
    display: grid;
    gap: 2px;
}
.guest-flight-route__airport b {
    color: #174f46;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.08em;
}
.guest-flight-route__airport span {
    color: #153f38;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}
.guest-flight-route__chips {
    margin: 4px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.guest-flight-route__chip {
    padding: 5px 9px;
    border: 1px solid #ecdfc7;
    border-radius: 8px;
    color: #4f625e;
    background: #fff7e7;
    font-size: 10.5px;
    font-weight: 750;
    line-height: 1.2;
}
.guest-flight-route__chip--pending {
    border-color: #e6e3da;
    color: #8d9a96;
    background: #f7f5ef;
}
/* Live coverage is per airport, so each leg states its own source. The two
   chips carry their label in text; colour only reinforces it. */
.guest-flight-route__chip--live {
    border-color: #bfdfcd;
    color: #216146;
    background: #ecf7f0;
}
.guest-flight-route__chip--scheduled {
    border-color: #dfe4e2;
    color: #5c6b67;
    background: #f2f5f4;
}
.guest-flight-route__duration {
    margin: 0;
    padding-left: 38px;
    position: relative;
    z-index: 1;
}
.guest-flight-route__duration span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border: 1px solid #cfe6dd;
    border-radius: 999px;
    color: #106452;
    background: #eaf6f1;
    font-size: 11px;
    font-weight: 800;
}
.guest-flight-route__duration .icon {
    width: 13px;
    height: 13px;
}

/* --- Detail: passenger facts ------------------------------------------- */
.guest-flight-facts__head {
    display: flex;
    align-items: center;
    gap: 11px;
}
.guest-flight-facts__icon {
    width: 36px;
    height: 36px;
    display: grid;
    flex: 0 0 36px;
    place-items: center;
    border-radius: 12px;
    color: #0b7d64;
    background: #e2f1ea;
}
.guest-flight-facts__icon .icon {
    width: 18px;
    height: 18px;
}
.guest-flight-facts__head .eyebrow {
    margin: 0 0 2px;
    color: #2d796a;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.13em;
}
.guest-flight-facts__head h2 {
    margin: 0;
    color: #063f35;
    font-family: var(--font-travel-serif);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.guest-flight-facts__grid {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.guest-flight-fact {
    min-width: 0;
    padding: 10px 11px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid #ecdfc7;
    border-radius: 13px;
    background: #fff7e7;
}
.guest-flight-fact__icon {
    width: 24px;
    height: 24px;
    display: grid;
    flex: 0 0 24px;
    place-items: center;
    border-radius: 8px;
    color: #0b7d64;
    background: rgba(255, 255, 255, 0.85);
}
.guest-flight-fact__icon .icon {
    width: 13px;
    height: 13px;
}
.guest-flight-fact__copy {
    min-width: 0;
    display: grid;
    gap: 1px;
}
.guest-flight-fact__copy span {
    color: #7d8f8a;
    font-size: 9.5px;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.guest-flight-fact__copy strong {
    color: #153f38;
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
/* Free-text facts (baggage) and a lone trailing fact take the full width, so
   nothing sits in a half column that is too narrow for its own value. */
.guest-flight-fact--wide,
.guest-flight-facts__grid > .guest-flight-fact:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}
.guest-flight-facts__note {
    margin: 12px 0 0;
    padding: 11px 12px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    border-left: 3px solid #0b8067;
    border-radius: 0 12px 12px 0;
    color: #3d5b55;
    background: #eef7f2;
    font-size: 12.5px;
    line-height: 1.5;
}
.guest-flight-facts__note .icon {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    margin-top: 2px;
    color: #0b7d64;
}

/* --- Detail: footer ---------------------------------------------------- */
.guest-flight-detail__checkin {
    min-height: 50px;
    border-radius: 15px;
}
.guest-flight-detail__updated {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #8d9a96;
    font-size: 11.5px;
}
.guest-flight-detail__updated .icon {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
}

/* --- Empty state ------------------------------------------------------- */
.guest-flight-empty {
    padding: 26px 22px;
    display: grid;
    justify-items: center;
    gap: 4px;
    border-style: dashed;
    text-align: center;
}
.guest-flight-empty__icon {
    width: 46px;
    height: 46px;
    margin-bottom: 6px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: #0b7d64;
    background: #e2f1ea;
}
.guest-flight-empty__icon .icon {
    width: 23px;
    height: 23px;
}
.guest-flight-empty .eyebrow {
    margin: 0;
    color: #2d796a;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.13em;
}
.guest-flight-empty h2 {
    margin: 0;
    max-width: 22ch;
    color: #063f35;
    font-family: var(--font-travel-serif);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-wrap: balance;
}
.guest-flight-empty p {
    max-width: 32ch;
    margin: 4px 0 0;
    color: #6d827d;
    font-size: 12.5px;
    line-height: 1.5;
}

@media (max-width: 380px) {
    .guest-flights-head h1 {
        font-size: 27px;
    }
    .guest-flight-card__journey {
        padding: 12px 10px;
        gap: 6px;
    }
    .guest-flight-card__point strong {
        font-size: 23px;
    }
    .guest-flight-card__path {
        min-width: 48px;
    }
    .guest-flight-facts__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (prefers-reduced-motion: no-preference) {
    .guest-flights-back,
    .guest-flight-card__action {
        transition:
            background 0.16s ease,
            border-color 0.16s ease,
            color 0.16s ease;
    }
}
/* Text scale enlarges type without zooming the guest interface. The rules sit
   after every guest component so compact labels such as itinerary dates and
   trip duration scale alongside normal body copy. */
html.guest-accessibility-mode .guest-shell,
html.guest-accessibility-mode .guest-landing {
    font-size: 18px;
    line-height: 1.65;
}
html.guest-accessibility-mode .guest-shell p,
html.guest-accessibility-mode .guest-landing p,
html.guest-accessibility-mode .guest-shell .field-help,
html.guest-accessibility-mode .guest-landing .field-help {
    font-size: 16px;
}
html.guest-accessibility-mode .guest-shell .button,
html.guest-accessibility-mode .guest-landing .button,
html.guest-accessibility-mode .guest-shell .input,
html.guest-accessibility-mode .guest-landing .input,
html.guest-accessibility-mode .guest-shell .select,
html.guest-accessibility-mode .guest-landing .select,
html.guest-accessibility-mode .guest-shell .textarea,
html.guest-accessibility-mode .guest-landing .textarea {
    min-height: 52px;
    font-size: 17px;
    line-height: 1.35;
}
html.guest-accessibility-mode .guest-shell .guest-nav-item__label,
html.guest-accessibility-mode .guest-shell .locale-switch button,
html.guest-accessibility-mode .guest-landing .locale-switch button {
    font-size: 12px;
}
html.guest-accessibility-mode .guest-shell .guest-topbar {
    height: calc(76px + env(safe-area-inset-top));
}
html.guest-accessibility-mode .guest-shell .guest-topbar__actions .guest-accessibility-toggle,
html.guest-accessibility-mode .guest-shell .guest-topbar__actions .guest-sync-button,
html.guest-accessibility-mode .guest-shell .guest-topbar__actions .locale-switch--flags {
    height: 44px;
    min-height: 44px;
}
html.guest-text-xl .guest-shell,
html.guest-text-xl .guest-landing {
    font-size: 21px;
}
html.guest-text-xl .guest-shell p,
html.guest-text-xl .guest-landing p,
html.guest-text-xl .guest-shell .field-help,
html.guest-text-xl .guest-landing .field-help {
    font-size: 19px;
}
html.guest-text-xl .guest-shell .button,
html.guest-text-xl .guest-landing .button,
html.guest-text-xl .guest-shell .input,
html.guest-text-xl .guest-landing .input,
html.guest-text-xl .guest-shell .select,
html.guest-text-xl .guest-landing .select,
html.guest-text-xl .guest-shell .textarea,
html.guest-text-xl .guest-landing .textarea {
    min-height: 58px;
    font-size: 19px;
}
html.guest-text-xl .guest-shell .guest-nav-item__label,
html.guest-text-xl .guest-shell .locale-switch button,
html.guest-text-xl .guest-landing .locale-switch button {
    font-size: 13px;
}
html.guest-text-xl .guest-shell .guest-topbar {
    height: calc(82px + env(safe-area-inset-top));
}
html.guest-text-xl .guest-shell .guest-topbar__actions .guest-accessibility-toggle,
html.guest-text-xl .guest-shell .guest-topbar__actions .guest-sync-button,
html.guest-text-xl .guest-shell .guest-topbar__actions .locale-switch--flags {
    height: 48px;
    min-height: 48px;
}

/* Itinerary carries the smallest guest-facing labels. Keep the date strip
   scrollable rather than shrinking text when the selected size is larger. */
html.guest-accessibility-mode .guest-shell .guest-day-tab {
    min-height: 60px;
}
html.guest-accessibility-mode .guest-shell .guest-day-tab span {
    font-size: 11px;
}
html.guest-accessibility-mode .guest-shell .guest-day-tab strong {
    font-size: 14px;
}
html.guest-accessibility-mode .guest-shell .guest-itinerary-tabs .guest-day-tab {
    min-width: 82px;
    min-height: 56px;
    flex-basis: 82px;
}
html.guest-accessibility-mode .guest-shell .guest-itinerary-tabs .guest-day-tab span {
    font-size: 17px;
}
html.guest-accessibility-mode .guest-shell .guest-itinerary-tabs .guest-day-tab strong {
    font-size: 12px;
}
html.guest-accessibility-mode .guest-shell .guest-itinerary-overview > .eyebrow,
html.guest-accessibility-mode .guest-shell .guest-itinerary-day .guest-day__title .eyebrow {
    font-size: 11px;
}
html.guest-accessibility-mode .guest-shell .guest-itinerary-overview__meta > strong {
    font-size: 10px;
}
html.guest-accessibility-mode .guest-shell .guest-itinerary-overview > p:last-child {
    font-size: 14px;
}
html.guest-accessibility-mode .guest-shell .guest-day__date span,
html.guest-accessibility-mode .guest-shell .guest-itinerary-day .guest-day__date--single {
    font-size: 12px;
}
html.guest-accessibility-mode .guest-shell .guest-day__date strong {
    font-size: 11px;
}
html.guest-accessibility-mode .guest-shell .guest-itinerary-day .schedule-card time {
    font-size: 15px;
}
html.guest-accessibility-mode .guest-shell .guest-itinerary-day .schedule-card__end,
html.guest-accessibility-mode .guest-shell .guest-itinerary-day .schedule-card__status .badge,
html.guest-accessibility-mode .guest-shell .guest-itinerary-day .schedule-card__meta .tag {
    font-size: 11px;
}
html.guest-text-xl .guest-shell .guest-day-tab {
    min-height: 68px;
}
html.guest-text-xl .guest-shell .guest-day-tab span {
    font-size: 13px;
}
html.guest-text-xl .guest-shell .guest-day-tab strong {
    font-size: 16px;
}
html.guest-text-xl .guest-shell .guest-itinerary-tabs .guest-day-tab {
    min-width: 92px;
    min-height: 64px;
    flex-basis: 92px;
}
html.guest-text-xl .guest-shell .guest-itinerary-tabs .guest-day-tab span {
    font-size: 20px;
}
html.guest-text-xl .guest-shell .guest-itinerary-tabs .guest-day-tab strong {
    font-size: 14px;
}
html.guest-text-xl .guest-shell .guest-itinerary-overview > .eyebrow,
html.guest-text-xl .guest-shell .guest-itinerary-day .guest-day__title .eyebrow {
    font-size: 13px;
}
html.guest-text-xl .guest-shell .guest-itinerary-overview__meta > strong {
    font-size: 12px;
}
html.guest-text-xl .guest-shell .guest-itinerary-overview > p:last-child {
    font-size: 16px;
}
html.guest-text-xl .guest-shell .guest-day__date span,
html.guest-text-xl .guest-shell .guest-itinerary-day .guest-day__date--single {
    font-size: 14px;
}
html.guest-text-xl .guest-shell .guest-day__date strong {
    font-size: 13px;
}
html.guest-text-xl .guest-shell .guest-itinerary-day .schedule-card time {
    font-size: 17px;
}
html.guest-text-xl .guest-shell .guest-itinerary-day .schedule-card__end,
html.guest-text-xl .guest-shell .guest-itinerary-day .schedule-card__status .badge,
html.guest-text-xl .guest-shell .guest-itinerary-day .schedule-card__meta .tag {
    font-size: 12.5px;
}

/* Flight times and airport information are time-critical in transit. */
html.guest-accessibility-mode .guest-shell .guest-flight-card__point strong {
    font-size: 27px;
}
html.guest-accessibility-mode .guest-shell .guest-flight-card__point > span {
    font-size: 14px;
}
html.guest-accessibility-mode .guest-shell .guest-flight-card__point small,
html.guest-accessibility-mode .guest-shell .guest-flight-card__path small {
    font-size: 12.5px;
}
html.guest-accessibility-mode .guest-shell .guest-flight-card__airports {
    font-size: 13px;
}
html.guest-accessibility-mode .guest-shell .guest-flight-card__airline-copy strong,
html.guest-accessibility-mode .guest-shell .guest-flight-fact__copy strong,
html.guest-accessibility-mode .guest-shell .guest-flight-support__copy strong {
    font-size: 15.5px;
}
html.guest-accessibility-mode .guest-shell .guest-flight-card__airline-copy small,
html.guest-accessibility-mode .guest-shell .guest-flight-support__copy small {
    font-size: 13px;
}
html.guest-accessibility-mode .guest-shell .guest-flight-route__time strong {
    font-size: 34px;
}
html.guest-accessibility-mode .guest-shell .guest-flight-route__time span,
html.guest-accessibility-mode .guest-shell .guest-flight-route__airport b {
    font-size: 14px;
}
html.guest-accessibility-mode .guest-shell .guest-flight-route__airport span {
    font-size: 16px;
}
html.guest-accessibility-mode .guest-shell .guest-flight-route__chip,
html.guest-accessibility-mode .guest-shell .guest-flight-route__duration span,
html.guest-accessibility-mode .guest-shell .guest-flight-fact__copy span {
    font-size: 12.5px;
}
html.guest-accessibility-mode .guest-shell .guest-flight-card__action {
    min-height: 48px;
    font-size: 15px;
}
html.guest-text-xl .guest-shell .guest-flight-card__point strong {
    font-size: 31px;
}
html.guest-text-xl .guest-shell .guest-flight-card__point > span {
    font-size: 16px;
}
html.guest-text-xl .guest-shell .guest-flight-card__point small,
html.guest-text-xl .guest-shell .guest-flight-card__path small {
    font-size: 14px;
}
html.guest-text-xl .guest-shell .guest-flight-card__airports {
    font-size: 15px;
}
html.guest-text-xl .guest-shell .guest-flight-card__airline-copy strong,
html.guest-text-xl .guest-shell .guest-flight-fact__copy strong,
html.guest-text-xl .guest-shell .guest-flight-support__copy strong {
    font-size: 17.5px;
}
html.guest-text-xl .guest-shell .guest-flight-card__airline-copy small,
html.guest-text-xl .guest-shell .guest-flight-support__copy small {
    font-size: 15px;
}
html.guest-text-xl .guest-shell .guest-flight-route__time strong {
    font-size: 39px;
}
html.guest-text-xl .guest-shell .guest-flight-route__time span,
html.guest-text-xl .guest-shell .guest-flight-route__airport b {
    font-size: 16px;
}
html.guest-text-xl .guest-shell .guest-flight-route__airport span {
    font-size: 18px;
}
html.guest-text-xl .guest-shell .guest-flight-route__chip,
html.guest-text-xl .guest-shell .guest-flight-route__duration span,
html.guest-text-xl .guest-shell .guest-flight-fact__copy span {
    font-size: 14px;
}
html.guest-text-xl .guest-shell .guest-flight-card__action {
    min-height: 54px;
    font-size: 17px;
}

@media (max-width: 560px) {
    html.guest-accessibility-mode .guest-a11y__panel {
        top: calc(env(safe-area-inset-top) + 86px);
    }
    html.guest-text-xl .guest-a11y__panel {
        top: calc(env(safe-area-inset-top) + 92px);
    }
}
@media (max-height: 540px) and (orientation: landscape) {
    html.guest-accessibility-mode .guest-shell .guest-topbar {
        height: calc(58px + env(safe-area-inset-top));
    }
    html.guest-accessibility-mode .guest-shell .guest-topbar__actions .guest-accessibility-toggle,
    html.guest-accessibility-mode .guest-shell .guest-topbar__actions .guest-sync-button,
    html.guest-accessibility-mode .guest-shell .guest-topbar__actions .locale-switch--flags {
        height: 40px;
        min-height: 40px;
    }
    html.guest-text-xl .guest-shell .guest-topbar {
        height: calc(62px + env(safe-area-inset-top));
    }
    html.guest-text-xl .guest-shell .guest-topbar__actions .guest-accessibility-toggle,
    html.guest-text-xl .guest-shell .guest-topbar__actions .guest-sync-button,
    html.guest-text-xl .guest-shell .guest-topbar__actions .locale-switch--flags {
        height: 44px;
        min-height: 44px;
    }
}
/* In-trip Home — Figma mobile dashboard. The beach is deliberately one
   continuous canvas behind every translucent card. */
.guest-shell--home:has(.guest-live-home) {
    width: 100%;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    padding-bottom: calc(78px + env(safe-area-inset-bottom));
    overflow: visible;
    background: #b9e4e6;
}
.guest-shell--home:has(.guest-live-home)::before {
    height: 100vh;
    height: 100dvh;
    position: fixed;
    background-image:
        linear-gradient(180deg, rgba(7, 89, 93, 0.01), rgba(246, 239, 227, 0.18)),
        url("/media/guest/asset/background/background.webp");
    background-position: center top;
    background-size: cover;
}
.guest-shell--home:has(.guest-live-home) .guest-topbar {
    height: calc(66px + env(safe-area-inset-top));
    padding-inline: 22px;
}
.guest-shell--home:has(.guest-live-home) .guest-brand__logo {
    width: 100px;
    height: 48px;
}
.guest-shell--home:has(.guest-live-home) .guest-sync-button {
    display: none;
}
.guest-shell--home:has(.guest-live-home) .guest-topbar__actions {
    gap: 6px;
}
.guest-shell--home:has(.guest-live-home) .guest-topbar__actions > * {
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 4px 13px rgba(19, 78, 72, 0.16);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}
.guest-shell--home:has(.guest-live-home) .guest-topbar__actions .guest-accessibility-toggle {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
}
.guest-shell--home:has(.guest-live-home)
    .guest-accessibility-toggle
    > span:not(.guest-accessibility-toggle__glyph) {
    display: none;
}
.guest-shell--home:has(.guest-live-home) .guest-accessibility-toggle__glyph {
    font-size: 15px;
}
.guest-shell--home:has(.guest-live-home) .guest-main--home {
    width: min(422px, 100%);
    height: auto;
    min-height: 0;
    padding: calc(66px + env(safe-area-inset-top)) 22px 28px;
    display: block;
}
body:has(.guest-live-home) [data-iki-host] {
    display: none !important;
}
.guest-live-home {
    width: 100%;
    color: #0a5870;
}
.guest-live-home__intro {
    min-height: 92px;
    padding: 10px 0 14px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.guest-live-home__intro > div:first-child {
    min-width: 0;
    padding-top: 4px;
}
.guest-live-home__intro h1 {
    margin: 0 0 4px;
    color: #fff;
    font-family: var(--font-travel-serif);
    font-size: clamp(20px, 5.8vw, 25px);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: 0.01em;
    text-shadow: 0 2px 10px rgba(14, 78, 80, 0.28);
}
.guest-live-home__intro p {
    margin: 0;
    color: rgba(255, 255, 255, 0.91);
    font-size: 13px;
    font-weight: 500;
    text-shadow: 0 2px 8px rgba(14, 78, 80, 0.26);
}
.guest-live-home__support {
    min-width: 92px;
    min-height: 38px;
    padding: 7px 12px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid rgba(255, 255, 255, 0.76);
    border-radius: 19px;
    color: #fff;
    background: linear-gradient(145deg, #f58a55, #eb6f48);
    box-shadow: 0 6px 16px rgba(177, 70, 36, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
    cursor: pointer;
}
.guest-live-home__support .icon {
    width: 17px;
    height: 17px;
    color: #fff;
}
.guest-live-home__support:hover {
    background: linear-gradient(145deg, #fa9560, #ed744c);
    box-shadow: 0 8px 18px rgba(177, 70, 36, 0.36);
}
.guest-live-home__support:focus-visible {
    outline: 3px solid #087a5a;
    outline-offset: 2px;
}
.guest-live-weather {
    min-height: 94px;
    margin: 0 0 14px;
    position: relative;
}
.guest-live-weather:has([data-guest-weather-slot][hidden]) {
    display: none;
}
.guest-live-weather [data-guest-weather-slot] {
    width: 100%;
}
.guest-live-weather__label {
    position: absolute;
    z-index: 3;
    top: 10px;
    left: 16px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-shadow: 0 2px 8px rgba(9, 60, 88, 0.28);
    text-transform: uppercase;
    pointer-events: none;
}
.guest-live-weather .guest-home-weather {
    min-height: 94px;
    padding: 29px 16px 10px;
    column-gap: 10px;
    grid-template-columns: 38px minmax(0, 1fr);
    grid-template-rows: auto auto;
    border-color: rgba(255, 255, 255, 0.7);
    border-radius: 22px;
    color: #fff;
    box-shadow: 0 10px 27px rgba(16, 71, 91, 0.2);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.guest-live-weather .guest-home-weather[data-weather="SUNNY"] {
    background: linear-gradient(145deg, #48b9e8 0%, #79d5ec 58%, #f7c35f 145%);
}
.guest-live-weather .guest-home-weather[data-weather="PARTLY_CLOUDY"] {
    background: linear-gradient(145deg, #4eadd6 0%, #80cde2 56%, #d5eef2 100%);
}
.guest-live-weather .guest-home-weather[data-weather="CLOUDY"] {
    background: linear-gradient(145deg, #718b9e 0%, #a7bac4 55%, #d6e1e4 100%);
}
.guest-live-weather .guest-home-weather[data-weather="SHOWERS"] {
    background: linear-gradient(145deg, #285d82 0%, #4b87a6 55%, #83b6c6 100%);
}
.guest-live-weather .guest-home-weather[data-weather="STORM"] {
    background: linear-gradient(145deg, #2c3555 0%, #4f5b79 58%, #7b839b 100%);
}
.guest-live-weather .guest-home-weather[data-weather="SNOW"] {
    background: linear-gradient(145deg, #6ca5c2 0%, #a8cfde 55%, #e7f3f6 100%);
}
.guest-live-weather .guest-home-weather:hover {
    box-shadow: 0 13px 30px rgba(16, 71, 91, 0.25);
}
.guest-live-weather .guest-home-weather__scene {
    display: block;
    opacity: 1;
}
.guest-live-weather .guest-home-weather__scene .wx-cloud {
    right: auto;
    left: -125px;
    width: 116px;
    filter: blur(0.2px) drop-shadow(0 8px 9px rgba(38, 83, 105, 0.12));
    animation-name: guest-home-cloud-drift;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.guest-live-weather .guest-home-weather__scene .wx-cloud--a {
    top: 8%;
    width: 126px;
    opacity: 0.48;
    animation-duration: 18s;
    animation-delay: -4s;
}
.guest-live-weather .guest-home-weather__scene .wx-cloud--b {
    top: 48%;
    width: 96px;
    opacity: 0.36;
    animation-duration: 24s;
    animation-delay: -15s;
}
.guest-live-weather .guest-home-weather__scene .wx-cloud--c {
    top: 67%;
    width: 68px;
    opacity: 0.27;
    animation-duration: 29s;
    animation-delay: -22s;
}
.guest-live-weather .guest-home-weather__scene .wx-cloud--d {
    top: 27%;
    width: 52px;
    opacity: 0.25;
    animation-duration: 20s;
    animation-delay: -10s;
}
.guest-live-weather .guest-home-weather__scene .wx-cloud--e {
    top: 76%;
    width: 42px;
    opacity: 0.2;
    animation-duration: 16s;
    animation-delay: -13s;
}
.guest-live-weather .guest-home-weather__scene .wx-sun {
    top: -38px;
    right: -20px;
    width: 142px;
    height: 142px;
    overflow: visible;
    background: radial-gradient(
        circle,
        #fff6bd 0 28%,
        #ffd75f 46%,
        rgba(255, 205, 72, 0.2) 68%,
        transparent 72%
    );
    opacity: 0.96;
}
.guest-live-weather .guest-home-weather__scene .wx-sun::before {
    content: "";
    position: absolute;
    inset: -24px;
    border-radius: 50%;
    background: repeating-conic-gradient(
        from 0deg,
        rgba(255, 240, 164, 0.62) 0deg 5deg,
        transparent 5deg 18deg
    );
    -webkit-mask: radial-gradient(circle, transparent 0 56%, #000 58% 100%);
    mask: radial-gradient(circle, transparent 0 56%, #000 58% 100%);
    animation: guest-home-sun-rays 16s linear infinite;
}
.guest-live-weather .guest-home-weather[data-weather="SHOWERS"] .guest-home-weather__scene {
    background-image: repeating-linear-gradient(
        105deg,
        transparent 0 25px,
        rgba(215, 241, 250, 0.6) 26px 28px,
        transparent 29px 44px
    );
    background-size: 52px 44px;
    animation: weather-rain 620ms linear infinite;
}
.guest-live-weather .guest-home-weather[data-weather="STORM"] .guest-home-weather__scene {
    animation: none;
}
.guest-live-weather .guest-home-weather[data-weather="STORM"] .guest-home-weather__scene::after {
    content: "";
    position: absolute;
    top: 18px;
    right: 24%;
    width: 24px;
    height: 54px;
    background: linear-gradient(#fff7b7, #ffd559);
    clip-path: polygon(44% 0, 100% 0, 65% 42%, 91% 42%, 17% 100%, 37% 57%, 8% 57%);
    filter: drop-shadow(0 0 10px rgba(255, 230, 109, 0.88));
    animation: guest-home-lightning 5s steps(1, end) infinite;
}
.guest-live-weather .guest-home-weather[data-weather] .guest-home-weather__icon {
    width: 38px;
    height: 38px;
    position: relative;
    z-index: 2;
    grid-row: 1 / 3;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 255, 255, 0.3);
    box-shadow:
        0 5px 14px rgba(23, 62, 86, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.guest-live-weather .guest-home-weather[data-weather] .guest-home-weather__icon .icon {
    width: 23px;
    height: 23px;
    color: #fff;
    filter: drop-shadow(0 2px 3px rgba(23, 62, 86, 0.34));
    stroke-width: 2.25;
}
.guest-live-weather .guest-home-weather__temperature {
    align-self: end;
    color: #fff;
    font-size: 27px;
    line-height: 0.95;
    text-shadow: 0 2px 9px rgba(9, 60, 88, 0.28);
}
.guest-live-weather .guest-home-weather__condition {
    align-self: start;
    color: rgba(255, 255, 255, 0.94);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.25;
    text-shadow: 0 2px 8px rgba(9, 60, 88, 0.25);
}
@keyframes guest-home-cloud-drift {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(550px);
    }
}
@keyframes guest-home-sun-rays {
    to {
        transform: rotate(1turn);
    }
}
@keyframes guest-home-lightning {
    0%,
    88%,
    92%,
    100% {
        opacity: 0;
    }
    89%,
    91% {
        opacity: 1;
    }
    90% {
        opacity: 0.22;
    }
}
@media (prefers-reduced-motion: reduce) {
    .guest-live-weather .guest-home-weather__scene .wx-cloud,
    .guest-live-weather .guest-home-weather__scene .wx-sun::before,
    .guest-live-weather
        .guest-home-weather[data-weather="STORM"]
        .guest-home-weather__scene::after {
        animation: none !important;
    }
}
.guest-live-card {
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 18px;
    background: rgba(247, 251, 249, 0.86);
    box-shadow: 0 8px 24px rgba(32, 90, 87, 0.09);
    backdrop-filter: blur(10px) saturate(1.05);
    -webkit-backdrop-filter: blur(10px) saturate(1.05);
}
.guest-live-progress {
    min-height: 137px;
    padding: 18px 17px 16px;
}
.guest-live-progress__status {
    margin-bottom: 14px;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #0a6d86;
    font-size: 12px;
    font-weight: 700;
}
.guest-live-progress__status > span {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: #278a72;
}
.guest-live-progress h2 {
    margin: 0;
    color: #093c58;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: 0.005em;
}
.guest-live-progress > p {
    margin: 2px 0 15px;
    overflow: hidden;
    color: #093c58;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.guest-live-progress__track {
    height: 4px;
    overflow: hidden;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.75);
}
.guest-live-progress__track .progress-fill {
    height: 100%;
    display: block;
    border-radius: inherit;
    background: #087d9b;
}
.guest-live-feature {
    width: 100%;
    height: 204px;
    margin: 25px 0 0;
    padding: 0;
    position: relative;
    overflow: hidden;
    display: block;
    border: 8px solid rgba(255, 255, 255, 0.88);
    border-radius: 21px;
    background: #d7e6df;
    box-shadow: 0 9px 25px rgba(24, 74, 70, 0.12);
    color: #fff;
    cursor: pointer;
    text-align: left;
}
.guest-live-feature > img,
.guest-live-feature__shade {
    position: absolute;
    inset: 0;
}
.guest-live-feature > img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.guest-live-feature__shade {
    background: linear-gradient(180deg, transparent 42%, rgba(5, 29, 31, 0.76));
}
.guest-live-feature__next {
    min-height: 28px;
    padding: 6px 13px;
    position: absolute;
    top: 11px;
    left: 11px;
    display: inline-flex;
    align-items: center;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.9);
    color: #087594;
    font-size: 11px;
    font-weight: 750;
}
.guest-live-feature__copy {
    position: absolute;
    right: 15px;
    bottom: 12px;
    left: 15px;
    display: grid;
    gap: 4px;
}
.guest-live-feature__copy > strong {
    overflow: hidden;
    color: #fff;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.18;
    text-shadow: 0 2px 8px rgba(0, 23, 26, 0.52);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.guest-live-feature__copy > span {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 11px;
    font-style: normal;
}
.guest-live-feature__copy time {
    font-weight: 700;
}
.guest-live-feature__copy em {
    font-style: normal;
}
.guest-live-feature__copy .icon {
    width: 14px;
    height: 14px;
}
.guest-live-feature__copy > span > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.guest-live-schedule {
    margin-top: 25px;
    padding: 18px 18px 15px;
}
.guest-live-section-title {
    width: 100%;
    min-height: 30px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 0;
    background: transparent;
    color: #0a6f8a;
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    text-align: left;
}
button.guest-live-section-title {
    cursor: pointer;
}
.guest-live-section-title > .icon {
    width: 18px;
    height: 18px;
    color: #397766;
}
.guest-live-schedule ol {
    margin: 12px -18px 0;
    padding: 0;
    list-style: none;
}
.guest-live-schedule__row {
    min-height: 63px;
    padding: 7px 18px;
    display: grid;
    grid-template-columns: 47px 12px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    color: #557482;
    transition:
        background 180ms ease,
        color 180ms ease;
}
.guest-live-schedule__row > time {
    align-self: center;
    color: #6c91a0;
    font-size: 12px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.guest-live-schedule__line {
    height: 100%;
    position: relative;
}
.guest-live-schedule__line::before,
.guest-live-schedule__line::after {
    position: absolute;
    left: 50%;
    content: "";
    transform: translateX(-50%);
}
.guest-live-schedule__line::before {
    width: 2px;
    top: -8px;
    bottom: -8px;
    background: #c3e1e9;
}
.guest-live-schedule__line::after {
    width: 9px;
    height: 9px;
    top: 50%;
    border-radius: 50%;
    background: #9dceda;
    box-shadow: 0 0 0 3px rgba(230, 246, 248, 0.9);
    transform: translate(-50%, -50%);
}
.guest-live-schedule__row:first-child .guest-live-schedule__line::before {
    top: 50%;
}
.guest-live-schedule__row:last-child .guest-live-schedule__line::before {
    bottom: 50%;
}
.guest-live-schedule__row > div {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.guest-live-schedule__row strong {
    min-width: 0;
    overflow: hidden;
    color: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.guest-live-schedule__icon,
.guest-live-schedule__avatar {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    color: #6296aa;
}
.guest-live-schedule__icon .icon {
    width: 19px;
    height: 19px;
}
.guest-live-schedule__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.guest-live-schedule__row.is-current {
    background: rgba(255, 255, 255, 0.74);
    color: #096e8c;
    box-shadow: 0 5px 15px rgba(31, 100, 103, 0.05);
}
.guest-live-schedule__row.is-current > time,
.guest-live-schedule__row.is-current strong {
    color: #096e8c;
    font-weight: 700;
}
.guest-live-schedule__row.is-current .guest-live-schedule__line::after {
    width: 12px;
    height: 12px;
    background: #0a7c9a;
    box-shadow: 0 0 0 4px rgba(233, 248, 250, 0.95);
}
.guest-live-schedule__empty {
    padding: 18px;
    color: #607d83;
    font-size: 13px;
}
.guest-live-pickup {
    margin-top: 25px;
    padding: 16px 17px;
}
.guest-live-pickup__eyebrow {
    margin: 0 0 10px;
    color: #0a6f8a;
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}
.guest-live-pickup__row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.guest-live-pickup__photo {
    width: 49px;
    height: 49px;
    flex: 0 0 49px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #d9ecea;
    box-shadow: 0 3px 10px rgba(16, 79, 76, 0.14);
}
.guest-live-pickup__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.guest-live-pickup__copy {
    min-width: 0;
    flex: 1 1 auto;
    display: grid;
}
.guest-live-pickup__copy strong {
    overflow: hidden;
    color: #113f57;
    font-size: 15px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.guest-live-pickup__copy > span {
    width: fit-content;
    margin-top: 3px;
    padding: 3px 7px;
    border-radius: 7px;
    background: #e8f4f5;
    color: #0c7189;
    font-size: 9px;
    font-weight: 700;
}
.guest-live-pickup__copy small {
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    color: #0a7690;
    font-size: 10px;
    font-weight: 650;
}
.guest-live-pickup__copy small .icon {
    width: 12px;
    height: 12px;
}
.guest-live-pickup__actions {
    display: flex;
    gap: 7px;
}
.guest-live-pickup__actions a,
.guest-live-pickup__actions button {
    width: 42px;
    height: 42px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #eef8f8;
    color: #0a708d;
    cursor: pointer;
}
.guest-live-pickup__actions a:last-child,
.guest-live-pickup__actions button:last-child {
    background: #087899;
    color: #fff;
}
.guest-live-pickup__actions .icon {
    width: 20px;
    height: 20px;
}
.guest-live-update {
    margin-top: 25px;
    padding: 18px 17px;
}
.guest-live-update .guest-live-section-title {
    font-size: 18px;
}
.guest-live-update .guest-live-section-title button {
    padding: 3px 0;
    border: 0;
    background: transparent;
    color: #0b748c;
    font-size: 10px;
    cursor: pointer;
}
.guest-live-update__item {
    min-height: 63px;
    margin-top: 10px;
    padding: 10px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    border: 1px solid rgba(211, 227, 225, 0.78);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.7);
}
.guest-live-update__item > span {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    display: grid;
    place-items: center;
    color: #087b98;
}
.guest-live-update__item .icon {
    width: 20px;
    height: 20px;
}
.guest-live-update__item p {
    min-width: 0;
    margin: 0;
    display: grid;
    gap: 4px;
}
.guest-live-update__item strong {
    color: #245364;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
}
.guest-live-update__item small {
    color: #8aa0a5;
    font-size: 10px;
}
.guest-live-help {
    margin-top: 25px;
    padding: 19px 18px 20px;
}
.guest-live-help h2 {
    margin: 0 0 14px;
    color: #0b6d86;
    font-size: 18px;
}
.guest-live-help > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
}
.guest-live-help button,
.guest-live-help a {
    min-width: 0;
    min-height: 44px;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 2px solid #0a7898;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.76);
    color: #0a6e8b;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.guest-live-help a,
.guest-live-help > div > *:last-child {
    border-color: #e77b61;
    background: #e77b61;
    color: #fff;
}
.guest-live-help .icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

/* Home uses the shared four-item dock; Support is opened from the Home CTA. */
.guest-shell--home:has(.guest-live-home) .guest-bottom-nav {
    visibility: visible;
    width: min(422px, 100%);
    min-height: calc(75px + env(safe-area-inset-bottom));
    padding: 7px 8px calc(5px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid rgba(220, 222, 216, 0.9);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -5px 18px rgba(24, 68, 67, 0.08);
}
.guest-shell--home:has(.guest-live-home) .guest-bottom-nav .guest-nav-item,
.guest-shell--home:has(.guest-live-home) .guest-bottom-nav .guest-nav-item:nth-child(3) {
    min-height: 58px;
    padding: 3px 2px;
    position: relative;
    display: flex;
    gap: 2px;
    color: #65777d;
    transform: none;
}
.guest-shell--home:has(.guest-live-home) .guest-bottom-nav .guest-nav-item__icon,
.guest-shell--home:has(.guest-live-home)
    .guest-bottom-nav
    .guest-nav-item:nth-child(3)
    .guest-nav-item__icon {
    width: 62px;
    height: 31px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: inherit;
    box-shadow: none;
}
.guest-shell--home:has(.guest-live-home) .guest-bottom-nav .guest-nav-item .icon,
.guest-shell--home:has(.guest-live-home) .guest-bottom-nav .guest-nav-item:nth-child(3) .icon,
.guest-shell--home:has(.guest-live-home)
    .guest-bottom-nav
    .guest-nav-item:nth-child(3).active
    .icon {
    width: 20px;
    height: 20px;
    color: currentColor;
    stroke-width: 1.9;
}
.guest-shell--home:has(.guest-live-home) .guest-bottom-nav .guest-nav-item__label,
.guest-shell--home:has(.guest-live-home)
    .guest-bottom-nav
    .guest-nav-item:nth-child(3)
    .guest-nav-item__label {
    width: auto;
    height: auto;
    position: static;
    overflow: hidden;
    clip: auto;
    clip-path: none;
    color: inherit;
    font-size: 9px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.guest-shell--home:has(.guest-live-home) .guest-bottom-nav .guest-nav-item.active {
    color: #087694;
}
.guest-shell--home:has(.guest-live-home)
    .guest-bottom-nav
    .guest-nav-item.active
    .guest-nav-item__icon {
    background: #e4f5f8;
}

@media (max-width: 360px) {
    .guest-shell--home:has(.guest-live-home) .guest-topbar,
    .guest-shell--home:has(.guest-live-home) .guest-main--home {
        padding-inline: 16px;
    }
    .guest-live-home__intro h1 {
        font-size: 19px;
    }
    .guest-live-progress h2 {
        font-size: 17px;
    }
    .guest-live-feature {
        height: 190px;
    }
    .guest-live-schedule,
    .guest-live-pickup,
    .guest-live-update,
    .guest-live-help,
    .guest-live-feature {
        margin-top: 20px;
    }
    .guest-live-pickup__actions a,
    .guest-live-pickup__actions button {
        width: 38px;
        height: 38px;
    }
}

html.guest-accessibility-mode .guest-live-schedule__row {
    min-height: 70px;
}
html.guest-text-xl .guest-live-schedule__row {
    min-height: 76px;
}

/* Home before departure and after the journey: support-first layout from the
   supplied mobile design, over the shared Phu Quoc background artwork. */
.guest-shell--support-home {
    width: 100%;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
    overflow: visible;
    background: url("/media/guest/asset/background/background.webp") center / cover fixed no-repeat;
}
.guest-shell--support-home::before {
    content: "";
    position: fixed;
    z-index: 0;
    inset: 0;
    display: block;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(224, 246, 247, 0.2) 0%,
        rgba(233, 242, 236, 0.32) 47%,
        rgba(236, 228, 213, 0.56) 100%
    );
    backdrop-filter: blur(2.5px) saturate(0.9);
    -webkit-backdrop-filter: blur(2.5px) saturate(0.9);
}
.guest-shell--support-home .guest-topbar {
    height: calc(66px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 28px 0;
    border-bottom: 0;
    background: transparent;
    box-shadow: none;
}
.guest-shell--support-home .guest-brand__logo {
    width: 109px;
    height: 52px;
    filter: none;
}
.guest-shell--support-home .guest-sync-button {
    display: none;
}
.guest-shell--support-home .guest-topbar__actions {
    gap: 7px;
}
.guest-shell--support-home .guest-topbar__actions > * {
    box-shadow: none;
}
.guest-shell--support-home .guest-topbar__actions .guest-accessibility-toggle {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    justify-content: center;
    border: 1px solid #dce9e5;
    border-radius: 50%;
    background: #f7faf8;
}
.guest-shell--support-home
    .guest-accessibility-toggle
    > span:not(.guest-accessibility-toggle__glyph) {
    display: none;
}
.guest-shell--support-home .guest-accessibility-toggle__glyph {
    font-size: 14px;
}
.guest-shell--support-home .locale-switch--flags {
    height: 34px;
    min-height: 34px;
    border-color: #e6ece9;
    border-radius: 18px;
    background: #fbfcfa;
}
.guest-shell--support-home .locale-select__trigger {
    height: 32px;
    min-height: 32px;
    border-radius: 17px;
}
.guest-shell--support-home .guest-main--home {
    width: min(422px, 100%);
    height: auto;
    min-height: 0;
    padding: calc(86px + env(safe-area-inset-top)) 28px 106px;
    display: block;
    box-sizing: border-box;
}
body:has(.guest-support-home) [data-iki-host] {
    display: none !important;
}
.guest-support-home {
    width: 100%;
    color: #073f58;
}
.guest-support-home__intro {
    min-height: 105px;
}
.guest-support-home__intro .eyebrow {
    margin: 0 0 8px;
    color: #087594;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
}
.guest-support-home__intro h1 {
    margin: 0 0 8px;
    color: #073b55;
    font-size: 27px;
    font-weight: 600;
    line-height: 1.16;
    letter-spacing: 0.01em;
}
.guest-support-home__intro > p:last-child {
    margin: 0;
    color: #41565d;
    font-size: 13px;
    line-height: 1.48;
}
.guest-support-home__sos {
    width: 100%;
    min-height: 53px;
    margin-top: 26px;
    padding: 11px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 13px;
    background: #e8795e;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 9px 23px rgba(174, 79, 57, 0.14);
    cursor: pointer;
}
.guest-support-home__sos .icon {
    width: 20px;
    height: 20px;
}
.guest-support-home__section {
    margin-top: 28px;
}
.guest-support-home__section h2 {
    margin: 0 0 12px;
    color: #073f58;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
}
.guest-support-home__quick > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.guest-support-home__quick-card {
    min-width: 0;
    min-height: 120px;
    padding: 17px 16px 13px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border: 0;
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.94);
    color: #073f58;
    font-family: inherit;
    text-align: left;
    box-shadow: 0 8px 22px rgba(33, 82, 76, 0.055);
    cursor: pointer;
}
.guest-support-home__quick-card > span {
    width: 39px;
    height: 39px;
    margin-bottom: 12px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e8f7f9;
    color: #087a98;
}
.guest-support-home__quick-card .icon {
    width: 21px;
    height: 21px;
    stroke-width: 2;
}
.guest-support-home__quick-card strong {
    overflow: hidden;
    max-width: 100%;
    color: #073f58;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.guest-support-home__quick-card small {
    margin-top: 4px;
    overflow: hidden;
    max-width: 100%;
    color: #52636a;
    font-size: 11px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.guest-support-home__section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.guest-support-home__section-head > button {
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: #087694;
    font-size: 10px;
    cursor: pointer;
}
.guest-support-home__request-empty {
    min-height: 232px;
    padding: 32px 20px 29px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 22px rgba(33, 82, 76, 0.055);
    text-align: center;
}
.guest-support-home__request-empty > span {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #f1efea;
    color: #78858a;
}
.guest-support-home__request-empty > span .icon {
    width: 25px;
    height: 25px;
    stroke-width: 1.5;
}
.guest-support-home__request-empty p {
    margin: 18px 0 20px;
    color: #4c5d63;
    font-size: 12px;
}
.guest-support-home__request-empty button,
.guest-support-home__request-create {
    min-height: 44px;
    padding: 9px 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 2px solid #087999;
    border-radius: 12px;
    background: #fff;
    color: #08718f;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}
.guest-support-home__request-empty button .icon,
.guest-support-home__request-create .icon {
    width: 16px;
    height: 16px;
}
.guest-support-home__request-list {
    overflow: hidden;
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 22px rgba(33, 82, 76, 0.055);
}
.guest-support-home__request-list > button:not(.guest-support-home__request-create) {
    width: 100%;
    min-height: 76px;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto 16px;
    align-items: center;
    gap: 9px;
    border: 0;
    border-bottom: 1px solid #e7ecea;
    background: transparent;
    color: #13475d;
    text-align: left;
    cursor: pointer;
}
.guest-support-home__request-list > button > span:first-child {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e8f7f9;
    color: #087a98;
}
.guest-support-home__request-list > button > span:nth-child(2) {
    min-width: 0;
    display: grid;
    gap: 3px;
}
.guest-support-home__request-list strong,
.guest-support-home__request-list small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.guest-support-home__request-list strong {
    font-size: 12px;
}
.guest-support-home__request-list small {
    color: #6a7b80;
    font-size: 10px;
}
.guest-support-home__request-list .guest-support-home__request-create {
    margin: 14px auto;
    display: flex;
}
.guest-support-home__contact-list {
    overflow: hidden;
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 22px rgba(33, 82, 76, 0.055);
}
.guest-support-home__contact-list > button {
    width: 100%;
    min-height: 80px;
    padding: 13px 15px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 12px;
    border: 0;
    border-bottom: 1px solid #e5e9e7;
    background: transparent;
    color: #073f58;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.guest-support-home__contact-list > button:last-child {
    border-bottom: 0;
}
.guest-support-home__contact-list > button > span:first-child {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e8f7f9;
    color: #087a98;
}
.guest-support-home__contact-list > button > span:first-child .icon {
    width: 20px;
    height: 20px;
}
.guest-support-home__contact-list > button > span:nth-child(2) {
    min-width: 0;
    display: grid;
    gap: 3px;
}
.guest-support-home__contact-list strong,
.guest-support-home__contact-list small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.guest-support-home__contact-list strong {
    color: #073f58;
    font-size: 13px;
    font-weight: 700;
}
.guest-support-home__contact-list small {
    color: #596b70;
    font-size: 9px;
}
.guest-support-home__contact-list > button > .icon {
    width: 17px;
    height: 17px;
    color: #77858a;
}

.guest-shell--support-home .guest-bottom-nav {
    visibility: visible;
    width: min(422px, 100%);
    min-height: calc(91px + env(safe-area-inset-bottom));
    padding: 14px 8px calc(12px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid #dfe6e3;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 -5px 18px rgba(24, 68, 67, 0.06);
}
.guest-shell--support-home .guest-bottom-nav .guest-nav-item,
.guest-shell--support-home .guest-bottom-nav .guest-nav-item:nth-child(3) {
    min-height: 58px;
    padding: 3px 2px;
    position: relative;
    display: flex;
    gap: 2px;
    color: #4f6066;
    transform: none;
}
.guest-shell--support-home .guest-bottom-nav .guest-nav-item__icon,
.guest-shell--support-home .guest-bottom-nav .guest-nav-item:nth-child(3) .guest-nav-item__icon {
    width: 56px;
    height: 30px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    box-shadow: none;
}
.guest-shell--support-home .guest-bottom-nav .guest-nav-item .icon,
.guest-shell--support-home .guest-bottom-nav .guest-nav-item:nth-child(3) .icon,
.guest-shell--support-home .guest-bottom-nav .guest-nav-item:nth-child(3).active .icon {
    width: 20px;
    height: 20px;
    color: currentColor;
    stroke-width: 1.9;
}
.guest-shell--support-home .guest-bottom-nav .guest-nav-item__label,
.guest-shell--support-home .guest-bottom-nav .guest-nav-item:nth-child(3) .guest-nav-item__label {
    width: auto;
    height: auto;
    position: static;
    overflow: hidden;
    clip: auto;
    clip-path: none;
    color: inherit;
    font-size: 9px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.guest-shell--support-home .guest-bottom-nav .guest-nav-item.active {
    color: #087694;
}

@media (max-width: 360px) {
    .guest-shell--support-home .guest-topbar,
    .guest-shell--support-home .guest-main--home {
        padding-right: 20px;
        padding-left: 20px;
    }
    .guest-support-home__intro h1 {
        font-size: 24px;
    }
    .guest-support-home__quick-card {
        min-height: 112px;
        padding-inline: 13px;
    }
}

/* Guest request form: share the green visual language of the support home. */
.drawer-backdrop--guest-issue {
    background: rgba(4, 43, 55, 0.46);
}

.drawer.drawer--guest-issue {
    background:
        radial-gradient(circle at 91% 7%, rgba(0, 116, 151, 0.18), transparent 26%),
        radial-gradient(circle at 3% 61%, rgba(73, 148, 171, 0.12), transparent 27%),
        radial-gradient(circle, rgba(0, 94, 123, 0.055) 0 1px, transparent 1.2px) 0 0 / 24px 24px,
        linear-gradient(155deg, #f8fcfd 0%, #edf5f8 52%, #f7fbfc 100%);
    box-shadow: -16px 0 46px rgba(3, 53, 68, 0.22);
}

.drawer.drawer--guest-issue::after {
    opacity: 0.095;
}

.drawer--guest-issue .drawer__header .eyebrow {
    color: #005e7b;
}

.drawer--guest-issue .drawer__header h2,
.drawer--guest-issue .issue-form--drawer .field-label,
.drawer--guest-issue .issue-form--drawer .field > label {
    color: #063b4b;
}

.drawer--guest-issue .drawer__header .icon-button {
    border-color: #cfe2e8;
    color: #074052;
    background: rgba(239, 247, 250, 0.94);
    box-shadow: 0 7px 18px rgba(2, 71, 92, 0.09);
}

.drawer--guest-issue .issue-form__step-number {
    background: linear-gradient(145deg, #0880a4, #005e7a);
    box-shadow: 0 4px 11px rgba(0, 91, 119, 0.25);
}

.drawer--guest-issue .category-choice label {
    border-color: #d5e4e9;
    color: #0a3a49;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(241, 248, 250, 0.98));
    box-shadow: 0 8px 18px rgba(8, 66, 84, 0.1);
}

.drawer--guest-issue .category-choice label .icon {
    color: #006b8b;
    background: linear-gradient(145deg, #dceff5, #edf6f9);
}

.drawer--guest-issue .category-choice input:checked + label {
    border-color: #007396;
    background: linear-gradient(145deg, #e7f5f9, #f7fcfd);
    box-shadow:
        inset 0 0 0 1px #007396,
        0 9px 19px rgba(0, 91, 119, 0.16);
}

.drawer--guest-issue .category-choice input:checked + label::after,
.drawer--guest-issue .severity-choice .choice input:checked + label::after {
    background: #077698;
}

.drawer--guest-issue .severity-choice .urgent input:checked + label::after {
    background: #f05a47;
}

.drawer--guest-issue .severity-choice .choice:not(.urgent) label {
    border-color: #cfe2e8;
    background: linear-gradient(145deg, #f9fcfd, #eef6f9);
}

.drawer--guest-issue .severity-choice .choice:not(.urgent) input:checked + label {
    border-color: #007396;
    background: linear-gradient(145deg, #e5f4f8, #f7fcfd);
    box-shadow:
        inset 0 0 0 1px #007396,
        0 8px 18px rgba(0, 91, 119, 0.15);
}

.drawer--guest-issue #issue-description {
    border-color: #cfdfe4;
    color: #0a3a49;
    background: rgba(252, 254, 255, 0.96);
    box-shadow: 0 8px 18px rgba(8, 66, 84, 0.09);
}

.drawer--guest-issue .issue-form--drawer > .button[type="submit"] {
    background: linear-gradient(105deg, #087ea2, #005e7b);
    box-shadow: 0 10px 22px rgba(0, 85, 111, 0.27);
}

.drawer--guest-issue .issue-form--drawer > .button[type="submit"]:hover,
.drawer--guest-issue .issue-form--drawer > .button[type="submit"]:focus-visible {
    background: linear-gradient(105deg, #077394, #00526b);
}

.drawer--guest-issue .issue-form__security,
.drawer--guest-issue .issue-form__security .icon {
    color: #2e6879;
}

/* Issue photos — Guest attaches evidence to a support request, staff reads it.
   Thumbnails are square so a portrait phone photo and a landscape one line up
   in the same grid without the row height jumping. */
.issue-photo-field .issue-photo-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
    margin-top: 10px;
}
.issue-photo-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.issue-photo-grid:empty {
    display: none;
}
.issue-photo-thumb {
    position: relative;
    width: 88px;
    height: 88px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--sand-deep);
}
.issue-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.issue-photo-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    color: var(--white);
    background: rgba(0, 31, 40, 0.72);
}
/* The visible control stays 30px so it does not cover the photo, but the
   touch target reaches the 44px minimum through this transparent extension. */
.issue-photo-remove::after {
    content: "";
    position: absolute;
    inset: -7px;
}
.issue-photo-remove .icon {
    width: 16px;
    height: 16px;
}
.issue-photo-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 88px;
    min-width: 88px;
    padding: 0 16px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    border: 1px dashed color-mix(in srgb, var(--brand-800) 42%, var(--line));
    background: var(--brand-50);
    color: var(--brand-900);
    font-size: 0.86rem;
    font-weight: 600;
    text-align: center;
}
.issue-photo-add:hover {
    background: var(--brand-100);
}
.issue-photo-add:focus-within {
    outline: 2px solid var(--brand-800);
    outline-offset: 2px;
}
.issue-photo-add[hidden] {
    display: none;
}
/* The guest issue drawer recolors to the app's blue accent instead of the
   shared green brand tokens, so this one usage of the photo picker needs its
   own override rather than touching --brand-* (other issue surfaces still
   use the shared green). */
.drawer--guest-issue .issue-photo-add {
    border-color: color-mix(in srgb, #004b62 42%, var(--line));
    background: #edf5f8;
    color: #003748;
}
.drawer--guest-issue .issue-photo-add:hover {
    background: #cde2e9;
}
.drawer--guest-issue .issue-photo-add:focus-within {
    outline-color: #004b62;
}
.issue-photo-status {
    margin: 8px 0 0;
    font-size: 0.82rem;
    color: var(--ink-soft);
}
.issue-photo-status:empty {
    display: none;
}
.issue-photo-status--error {
    color: var(--danger);
}
.issue-photo-attached,
.issue-photo-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}
.issue-photo-attached__item,
.issue-photo-gallery__item {
    display: block;
    width: 96px;
    height: 96px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--sand-deep);
}
.issue-photo-attached__item img,
.issue-photo-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 180ms ease;
}
.issue-photo-gallery__item:hover img {
    transform: scale(1.04);
}
.issue-photo-attached__item:focus-visible,
.issue-photo-gallery__item:focus-visible {
    outline: 2px solid var(--brand-800);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .issue-photo-attached__item img,
    .issue-photo-gallery__item img {
        transition: none;
    }
    .issue-photo-gallery__item:hover img {
        transform: none;
    }
}

/* QR image sign-in — an alternative to typing credentials on a phone at an
   airport. Presented under the form as a genuine second route, not a footnote. */
.guest-qr-login {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 380px;
    margin: 4px auto 0;
}
.guest-qr-login__divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--white);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.75;
}
.guest-qr-login__divider::before,
.guest-qr-login__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: currentColor;
    opacity: 0.4;
}
.guest-qr-login__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    cursor: pointer;
    margin: 0;
}
.guest-qr-login__button:focus-within {
    outline: 2px solid var(--white);
    outline-offset: 2px;
}
.guest-qr-login__hint {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
    text-align: center;
    color: var(--white);
    opacity: 0.9;
    /* Sits over a photograph; the landing scrim is darkest here but the image
       behind it still varies, so the shadow keeps the text readable. */
    text-shadow: 0 1px 3px rgba(0, 31, 29, 0.55);
}
.guest-qr-login__hint--error {
    color: var(--coral-soft);
    opacity: 1;
}

/* Explore metadata — theme tags and a place a Guest can navigate to. */
.explore-tag-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.explore-tag-option {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 13px;
    cursor: pointer;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    font-size: 0.85rem;
    color: var(--ink);
}
.explore-tag-option:has(input:checked) {
    border-color: var(--brand-800);
    background: var(--brand-50);
    color: var(--brand-900);
    font-weight: 600;
}
.explore-tag-option:has(input:disabled) {
    opacity: 0.45;
    cursor: not-allowed;
}
.explore-tag-option:focus-within {
    outline: 2px solid var(--brand-800);
    outline-offset: 2px;
}
.explore-tag-filter {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 0 10px;
    scrollbar-width: none;
}
.explore-tag-filter::-webkit-scrollbar {
    display: none;
}
.explore-tag-chip {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 15px;
    cursor: pointer;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink-soft);
    font-size: 0.85rem;
    font-family: inherit;
    white-space: nowrap;
}
.explore-tag-chip.is-active {
    border-color: var(--brand-800);
    background: var(--brand-900);
    color: var(--white);
    font-weight: 600;
}
.explore-article__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}
.explore-article__tag {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--brand-50);
    color: var(--brand-900);
    font-size: 0.76rem;
    font-weight: 600;
}

/* Explore visit card — the practical facts before deciding to go: what the
   place is called, when it is open, how long it takes to get there. Rows are
   independent so a half-filled card still reads as deliberate. */
.explore-visit {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 16px 0 0;
    padding: 6px 4px;
    list-style: none;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--paper);
    box-shadow: var(--shadow-sm);
}
.explore-visit__row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
}
.explore-visit__row + .explore-visit__row {
    border-top: 1px solid var(--line-soft);
}
.explore-visit__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    color: var(--brand-800);
}
.explore-visit__icon .icon {
    width: 19px;
    height: 19px;
}
.explore-visit__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.explore-visit__body strong {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
    overflow-wrap: anywhere;
}
.explore-visit__body small {
    font-size: 0.8rem;
    color: var(--ink-soft);
    overflow-wrap: anywhere;
}
.explore-visit__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    /* Touch target minimum — the only action on this card. */
    min-height: 44px;
    color: var(--brand-800);
    font-size: 0.85rem;
    font-weight: 600;
}
.explore-visit__link .icon {
    width: 15px;
    height: 15px;
}

/* Guest itinerary detail: full-bleed island timeline from the approved mockup. */
.guest-shell--itinerary:not(.guest-shell--journey) {
    /* The page itself never scrolls — only the activity list inside it does
       (see .guest-itinerary-day below) — so its height is pinned to the
       viewport instead of just floored at it, and there is no bottom padding
       to reserve: the scrollable list reserves its own clearance instead. */
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    position: relative;
    isolation: isolate;
    overflow-x: hidden;
    background: #b9dedc url("/media/guest/asset/background/Gradient.webp") center top / cover fixed
        no-repeat;
}

.guest-shell--itinerary:not(.guest-shell--journey)::before,
.guest-shell--itinerary:not(.guest-shell--journey)::after {
    position: fixed;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    content: "";
}

.guest-shell--itinerary:not(.guest-shell--journey)::before {
    background: url("/media/guest/asset/background/Gradient.webp") center top / cover no-repeat;
    transform: translateZ(0);
}

.guest-shell--itinerary:not(.guest-shell--journey)::after {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.16) 0%,
        rgba(255, 255, 255, 0.1) 46%,
        rgba(255, 255, 255, 0.14) 100%
    );
    backdrop-filter: blur(0.75px) saturate(0.99);
    -webkit-backdrop-filter: blur(0.75px) saturate(0.99);
}

.guest-shell--itinerary:not(.guest-shell--journey) > .guest-topbar,
.guest-shell--itinerary:not(.guest-shell--journey) > .guest-main,
.guest-shell--itinerary:not(.guest-shell--journey) > .guest-bottom-nav {
    position: relative;
    z-index: 2;
}

.guest-shell--itinerary:not(.guest-shell--journey) .guest-topbar {
    width: min(430px, 100%);
    height: calc(64px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 28px 0;
    top: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.guest-shell--itinerary:not(.guest-shell--journey) .guest-brand__logo {
    width: 112px;
    height: 49px;
    opacity: 1;
    filter: none;
}

.guest-shell--itinerary:not(.guest-shell--journey) .guest-sync-button {
    display: none;
}

.guest-shell--itinerary:not(.guest-shell--journey) .guest-topbar__actions {
    gap: 6px;
}

.guest-shell--itinerary:not(.guest-shell--journey) .guest-accessibility-toggle,
.guest-shell--itinerary:not(.guest-shell--journey) .locale-switch--flags {
    border-color: rgba(255, 255, 255, 0.58);
    background: rgba(236, 246, 243, 0.62);
    box-shadow: 0 5px 14px rgba(13, 81, 83, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.guest-main--itinerary {
    width: min(430px, 100%);
    min-height: calc(100dvh - 64px);
    padding: 0 0 calc(145px + env(safe-area-inset-bottom));
    background: transparent;
}

/* Journey overview keeps the bare rule above (its own page-level scroll is
   fine); the day-detail screen instead pins the header in place and hands
   scrolling to .guest-itinerary-day alone. */
.guest-shell--itinerary:not(.guest-shell--journey) .guest-main--itinerary {
    height: calc(100dvh - 64px - env(safe-area-inset-top));
    min-height: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.guest-itinerary-screen {
    min-height: calc(100dvh - 64px);
    position: relative;
    background: transparent;
}

.guest-shell--itinerary:not(.guest-shell--journey) .guest-itinerary-screen {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.guest-itinerary-screen .guest-itinerary-back {
    top: 7px;
    left: 35px;
    border: 1px solid rgba(255, 255, 255, 0.48);
    color: #285a67;
    background: rgba(238, 245, 242, 0.84);
    box-shadow: 0 5px 13px rgba(21, 78, 81, 0.09);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.guest-itinerary-heading {
    min-height: 40px;
    margin: -1px 29px 0;
    padding: 6px 18px;
    position: relative;
    display: grid;
    place-content: center;
    border-bottom: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    text-align: center;
    /* A flex item in .guest-itinerary-screen now — never let it get
       compressed to make room for the scrollable list below it. */
    flex-shrink: 0;
}

.guest-itinerary-heading h1 {
    margin: 0;
    color: #073f5b;
    font-family: var(--font-sans);
    font-size: 19px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.01em;
}

.guest-itinerary-heading p {
    width: 100%;
    max-width: 310px;
    margin: 0;
    position: absolute;
    top: calc(100% + 9px);
    left: 50%;
    overflow: hidden;
    color: #ffffff;
    font-size: 14px;
    font-weight: 750;
    line-height: 1.25;
    text-shadow: 0 1px 4px rgba(4, 54, 68, 0.72);
    text-overflow: ellipsis;
    transform: translateX(-50%);
    white-space: nowrap;
}

.guest-shell--itinerary:not(.guest-shell--journey) .guest-itinerary-tabs {
    width: 100%;
    margin: 50px 0 27px;
    padding: 0 30px 3px;
    position: relative;
    top: auto;
    z-index: 4;
    gap: 12px;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    scroll-padding-inline: 30px;
    /* A flex item in .guest-itinerary-screen now — never let it get
       compressed to make room for the scrollable list below it. */
    flex-shrink: 0;
}

.guest-shell--itinerary:not(.guest-shell--journey) .guest-itinerary-tabs::after {
    width: 30px;
    flex-basis: 30px;
}

.guest-shell--itinerary:not(.guest-shell--journey) .guest-itinerary-tabs .guest-day-tab {
    min-width: 73px;
    min-height: 36px;
    height: 36px;
    padding: 7px 14px;
    display: grid;
    flex: 0 0 73px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.48);
    border-radius: 999px;
    color: #285a67;
    background: rgba(238, 245, 242, 0.84);
    box-shadow: 0 5px 13px rgba(21, 78, 81, 0.09);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    text-align: center;
}

.guest-shell--itinerary:not(.guest-shell--journey) .guest-itinerary-tabs .guest-day-tab span {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 750;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
}

.guest-shell--itinerary:not(.guest-shell--journey) .guest-itinerary-tabs .guest-day-tab.active {
    border-color: rgba(14, 127, 157, 0.72);
    color: #fff;
    background: linear-gradient(150deg, #168aa8, #087493);
    box-shadow: 0 8px 16px rgba(4, 103, 133, 0.25);
}

.guest-shell--itinerary:not(.guest-shell--journey) .guest-itinerary-day {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    background: transparent;
    -webkit-overflow-scrolling: touch;
}

.guest-shell--itinerary:not(.guest-shell--journey) .guest-itinerary-day > .schedule-timeline {
    margin: 0;
    /* Bottom padding now lives here instead of on the page: this is the one
       element that actually scrolls, so it alone needs clearance to clear
       the floating route button once the last card comes into view. */
    padding: 0 26px calc(158px + env(safe-area-inset-bottom)) 16px;
    display: grid;
    gap: 23px;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.guest-shell--itinerary:not(.guest-shell--journey) .schedule-card {
    min-height: 100px;
    padding: 0;
    display: grid;
    grid-template-columns: 66px minmax(0, 1fr);
    position: relative;
    gap: 10px;
    column-gap: 10px;
    background: transparent;
}

.guest-shell--itinerary:not(.guest-shell--journey) .schedule-card[data-activity-detail] {
    cursor: pointer;
}

.guest-shell--itinerary:not(.guest-shell--journey)
    .schedule-card[data-activity-detail]:focus-visible {
    outline: 0;
}

.guest-shell--itinerary:not(.guest-shell--journey) .schedule-card::before {
    width: 1px;
    position: absolute;
    z-index: 0;
    top: 36px;
    bottom: -26px;
    left: 32px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.28);
    content: "";
}

.guest-shell--itinerary:not(.guest-shell--journey) .schedule-card:last-child::before {
    bottom: -38px;
}

.guest-shell--itinerary:not(.guest-shell--journey) .schedule-card::after {
    display: none;
}

.guest-shell--itinerary:not(.guest-shell--journey) .schedule-card__time {
    padding-top: 0;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 7px;
}

.guest-shell--itinerary:not(.guest-shell--journey) .schedule-card__time time {
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 1px 5px rgba(4, 57, 66, 0.54);
}

.guest-shell--itinerary:not(.guest-shell--journey) .schedule-card__dot {
    width: 12px;
    height: 12px;
    display: block;
    border: 2px solid rgba(255, 255, 255, 0.86);
    border-radius: 50%;
    background: #dbeeee;
    box-shadow: 0 2px 7px rgba(4, 67, 75, 0.18);
}

.guest-shell--itinerary:not(.guest-shell--journey) .schedule-card.is-current .schedule-card__dot {
    border-width: 3px;
    border-color: #fff;
    background: #1081a0;
    box-shadow:
        0 0 0 2px rgba(15, 128, 158, 0.68),
        0 3px 8px rgba(4, 67, 75, 0.24);
    animation: schedule-card-current-pulse 2.2s ease-in-out infinite;
}

@keyframes schedule-card-current-pulse {
    0%,
    100% {
        box-shadow:
            0 0 0 2px rgba(15, 128, 158, 0.68),
            0 3px 8px rgba(4, 67, 75, 0.24);
    }
    50% {
        box-shadow:
            0 0 0 6px rgba(15, 128, 158, 0.28),
            0 3px 10px rgba(4, 67, 75, 0.28);
    }
}

@media (prefers-reduced-motion: reduce) {
    .guest-shell--itinerary:not(.guest-shell--journey)
        .schedule-card.is-current
        .schedule-card__dot {
        animation: none;
    }
}

.guest-shell--itinerary:not(.guest-shell--journey) .schedule-card__panel {
    min-width: 0;
    min-height: 100px;
    height: 100px;
    padding: 11px 12px;
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 13px;
    background: rgba(235, 246, 247, 0.9);
    box-shadow: 0 7px 16px rgba(18, 76, 83, 0.13);
    backdrop-filter: blur(10px) saturate(0.92);
    -webkit-backdrop-filter: blur(10px) saturate(0.92);
    transition:
        transform 160ms ease,
        outline-color 160ms ease;
}

.guest-shell--itinerary:not(.guest-shell--journey)
    .schedule-card[data-activity-detail]:hover
    .schedule-card__panel {
    transform: translateY(-1px);
}

.guest-shell--itinerary:not(.guest-shell--journey)
    .schedule-card[data-activity-detail]:focus-visible
    .schedule-card__panel {
    outline: 2px solid rgba(16, 129, 160, 0.86);
    outline-offset: 2px;
}

.guest-shell--itinerary:not(.guest-shell--journey) .schedule-card.is-current .schedule-card__panel {
    border: 2px solid rgba(24, 159, 185, 0.75);
    padding: 10px 11px;
    background: rgba(235, 249, 250, 0.94);
    box-shadow:
        0 8px 18px rgba(8, 91, 105, 0.17),
        inset 0 0 0 1px rgba(255, 255, 255, 0.62);
}

/* Activities already left behind recede visually. Their outgoing timeline is
   removed so the active path begins at the current stop and only leads forward. */
.guest-shell--itinerary:not(.guest-shell--journey) .schedule-card.is-past::before {
    opacity: 0;
}

.guest-shell--itinerary:not(.guest-shell--journey) .schedule-card.is-past .schedule-card__time,
.guest-shell--itinerary:not(.guest-shell--journey) .schedule-card.is-past .schedule-card__panel {
    opacity: 0.58;
}

.guest-shell--itinerary:not(.guest-shell--journey) .schedule-card.is-past .schedule-card__panel {
    filter: saturate(0.55);
}

.guest-shell--itinerary:not(.guest-shell--journey) .schedule-card.is-past .schedule-card__dot {
    background: rgba(232, 241, 240, 0.78);
    box-shadow: none;
}

.guest-shell--itinerary:not(.guest-shell--journey) .schedule-card__image {
    width: 74px;
    height: 76px;
    min-height: 0;
    max-height: none;
    align-self: center;
    grid-column: 1;
    grid-row: 1;
    border: 0;
    border-radius: 7px;
    object-fit: cover;
    box-shadow: 0 3px 8px rgba(5, 68, 76, 0.13);
}

.guest-main--itinerary-arriving .guest-itinerary-screen .schedule-card {
    animation: none !important;
}

.guest-shell--itinerary:not(.guest-shell--journey) .schedule-card__copy {
    min-width: 0;
    min-height: 76px;
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: stretch;
    flex-direction: column;
    justify-content: space-between;
    gap: 4px;
}

.guest-shell--itinerary:not(.guest-shell--journey) .schedule-card__heading {
    min-width: 0;
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 7px;
}

.guest-shell--itinerary:not(.guest-shell--journey) .schedule-card__heading h3 {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: #083e59;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 850;
    line-height: 1.18;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guest-shell--itinerary:not(.guest-shell--journey) .schedule-card__current,
.guest-shell--itinerary:not(.guest-shell--journey) .schedule-card__updated {
    min-height: 21px;
    padding: 4px 7px;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    border-radius: 999px;
    color: #16758c;
    background: #d5eef1;
    font-size: 9px;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
}

.guest-shell--itinerary:not(.guest-shell--journey) .schedule-card__updated {
    color: #9a5a1c;
    background: #fff0d9;
}

.guest-shell--itinerary:not(.guest-shell--journey) .schedule-card__location {
    min-width: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    color: #416d78;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
}

.guest-shell--itinerary:not(.guest-shell--journey) .schedule-card__location .icon {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
    color: #33768a;
}

.guest-shell--itinerary:not(.guest-shell--journey) .schedule-card__location span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.guest-shell--itinerary:not(.guest-shell--journey) .schedule-card__primary-action {
    width: 100%;
    min-height: 22px;
    padding: 1px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    border: 0;
    border-radius: 0;
    color: #0a6985;
    background: transparent;
    box-shadow: none;
    font-size: 10px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.guest-shell--itinerary:not(.guest-shell--journey) .schedule-card__primary-action .icon {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
}

.guest-itinerary-route {
    width: min(358px, calc(100% - 56px));
    min-height: 52px;
    padding: 12px 20px;
    position: fixed;
    z-index: 42;
    right: 50%;
    bottom: calc(82px + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(110deg, #1684a3, #087795);
    box-shadow: 0 8px 18px rgba(3, 75, 99, 0.28);
    font-size: 14px;
    font-weight: 750;
    transform: translateX(50%);
    cursor: pointer;
}

.guest-itinerary-route .icon {
    width: 19px;
    height: 19px;
    fill: #fff;
    stroke: #fff;
    transform: rotate(-45deg);
}

.guest-shell--itinerary:not(.guest-shell--journey) > .guest-bottom-nav {
    width: min(390px, calc(100% - 24px));
    height: calc(66px + env(safe-area-inset-bottom));
    min-height: calc(66px + env(safe-area-inset-bottom));
    padding: 4px 6px max(3px, env(safe-area-inset-bottom));
    position: fixed;
    z-index: 41;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid rgba(222, 230, 227, 0.94);
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 -4px 16px rgba(12, 61, 68, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.guest-shell--itinerary:not(.guest-shell--journey) .guest-nav-item {
    min-height: 52px;
    padding: 3px 2px;
    gap: 2px;
    color: #53676d;
}

.guest-shell--itinerary:not(.guest-shell--journey) .guest-nav-item__icon {
    width: 54px;
    height: 29px;
}

.guest-shell--itinerary:not(.guest-shell--journey) .guest-nav-item .icon {
    width: 20px;
    height: 20px;
}

.guest-shell--itinerary:not(.guest-shell--journey) .guest-nav-item__label {
    font-size: 9px;
    font-weight: 550;
}

.guest-shell--itinerary:not(.guest-shell--journey) .guest-nav-item.active {
    color: #087a9a;
}

.guest-shell--itinerary:not(.guest-shell--journey) .guest-nav-item.active::before,
.guest-shell--itinerary:not(.guest-shell--journey) .guest-nav-item.active::after {
    inset: 2px 13px;
    border-radius: 13px;
}

.guest-shell--itinerary:not(.guest-shell--journey) .guest-nav-item.active::before {
    background: #e7f6f9;
    box-shadow: none;
}

@media (max-width: 360px) {
    .guest-shell--itinerary:not(.guest-shell--journey) .guest-topbar {
        padding-right: 18px;
        padding-left: 18px;
    }
    .guest-itinerary-heading {
        margin-right: 20px;
        margin-left: 20px;
    }
    .guest-shell--itinerary:not(.guest-shell--journey) .guest-itinerary-tabs {
        padding-right: 20px;
        padding-left: 20px;
        gap: 9px;
    }
    .guest-shell--itinerary:not(.guest-shell--journey) .guest-itinerary-day > .schedule-timeline {
        padding-right: 16px;
        padding-left: 16px;
    }
    .guest-shell--itinerary:not(.guest-shell--journey) .schedule-card {
        grid-template-columns: 60px minmax(0, 1fr);
        gap: 7px;
    }
    .guest-shell--itinerary:not(.guest-shell--journey) .schedule-card::before {
        left: 29px;
    }
    .guest-shell--itinerary:not(.guest-shell--journey) .schedule-card__panel {
        grid-template-columns: 66px minmax(0, 1fr);
        gap: 8px;
    }
    .guest-shell--itinerary:not(.guest-shell--journey) .schedule-card__image {
        width: 66px;
        height: 72px;
    }
    .guest-shell--itinerary:not(.guest-shell--journey) .schedule-card__heading h3 {
        font-size: 15px;
    }
    .guest-itinerary-route {
        width: calc(100% - 36px);
    }
}

/* Unified four-item guest navigation: every guest surface now uses the same
   compact, flat dock shown in the approved Home reference. */
.guest-shell:not(.guest-shell--journey) > .guest-bottom-nav {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: calc(75px + env(safe-area-inset-bottom));
    padding: 0 0 max(3px, env(safe-area-inset-bottom));
    position: fixed;
    z-index: 41;
    bottom: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
    border: 0;
    border-top: 1px solid rgba(220, 222, 216, 0.9);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 -5px 18px rgba(24, 68, 67, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.guest-shell:not(.guest-shell--journey) > .guest-bottom-nav .guest-nav-item,
.guest-shell:not(.guest-shell--journey) > .guest-bottom-nav .guest-nav-item:nth-child(3) {
    min-height: 58px;
    padding: 3px 2px;
    position: relative;
    gap: 2px;
    color: #65777d;
    transform: none;
}

.guest-shell:not(.guest-shell--journey) > .guest-bottom-nav .guest-nav-item__icon,
.guest-shell:not(.guest-shell--journey)
    > .guest-bottom-nav
    .guest-nav-item:nth-child(3)
    .guest-nav-item__icon {
    width: 62px;
    height: 31px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: inherit;
    box-shadow: none;
}

.guest-shell:not(.guest-shell--journey) > .guest-bottom-nav .guest-nav-item .icon,
.guest-shell:not(.guest-shell--journey) > .guest-bottom-nav .guest-nav-item:nth-child(3) .icon,
.guest-shell:not(.guest-shell--journey)
    > .guest-bottom-nav
    .guest-nav-item:nth-child(3).active
    .icon {
    width: 20px;
    height: 20px;
    color: currentColor;
    stroke-width: 1.9;
}

.guest-shell:not(.guest-shell--journey) > .guest-bottom-nav .guest-nav-item__label,
.guest-shell:not(.guest-shell--journey)
    > .guest-bottom-nav
    .guest-nav-item:nth-child(3)
    .guest-nav-item__label {
    width: auto;
    height: auto;
    position: static;
    overflow: hidden;
    clip: auto;
    clip-path: none;
    color: inherit;
    font-size: 9px;
    font-weight: 500;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guest-shell:not(.guest-shell--journey) > .guest-bottom-nav .guest-nav-item.active {
    color: #087694;
}

.guest-shell:not(.guest-shell--journey) > .guest-bottom-nav .guest-nav-item.active::before,
.guest-shell:not(.guest-shell--journey) > .guest-bottom-nav .guest-nav-item.active::after {
    display: none;
}

.guest-shell:not(.guest-shell--journey)
    > .guest-bottom-nav
    .guest-nav-item.active
    .guest-nav-item__icon {
    background: #e4f5f8;
}

/* Journey overview — full-screen island timeline from the approved design. */
.guest-shell--journey {
    min-height: 100vh;
    min-height: 100dvh;
    padding-bottom: calc(75px + env(safe-area-inset-bottom));
    position: relative;
    isolation: isolate;
    overflow-x: hidden;
    background: #315f69;
}

.guest-shell--journey::before {
    height: 100vh;
    height: 100lvh;
    background-image:
        linear-gradient(
            180deg,
            rgba(13, 73, 86, 0.2) 0%,
            rgba(17, 63, 70, 0.34) 47%,
            rgba(22, 32, 34, 0.7) 100%
        ),
        url("/media/guest/asset/background/background.webp");
    background-position: center top;
    background-size: cover;
    animation: none;
    transform: none;
}

.guest-shell--journey::after {
    position: fixed;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(10, 47, 54, 0.12), transparent 58%);
    content: "";
}

.guest-shell--journey > .guest-topbar {
    width: min(430px, 100%);
    height: calc(70px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 26px 0;
    position: relative;
    z-index: 3;
    top: 0;
    display: flex;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.guest-shell--journey .guest-brand__logo {
    width: 112px;
    height: 50px;
    opacity: 1;
    filter: none;
}

.guest-shell--journey .guest-sync-button {
    display: none;
}

.guest-shell--journey .guest-topbar__actions {
    gap: 6px;
}

.guest-shell--journey .guest-accessibility-toggle,
.guest-shell--journey .locale-switch--flags {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(240, 248, 247, 0.72);
    box-shadow: 0 5px 14px rgba(6, 55, 63, 0.16);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}

.guest-shell--journey > .guest-main--itinerary {
    width: min(430px, 100%);
    min-height: calc(100dvh - 70px);
    padding: 4px 24px calc(96px + env(safe-area-inset-bottom));
    position: relative;
    z-index: 2;
    background: transparent;
}

.guest-shell--journey .guest-journey {
    width: 100%;
    padding: 0;
    color: #fff;
}

.guest-journey__welcome {
    min-height: 76px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.guest-journey__welcome > div:first-child {
    min-width: 0;
    padding-top: 5px;
}

.guest-journey__welcome h2 {
    margin: 0 0 4px;
    color: #fff;
    font-family: var(--font-travel-serif);
    font-size: clamp(20px, 5.8vw, 25px);
    font-weight: 600;
    line-height: 1.16;
    letter-spacing: -0.015em;
    text-shadow: 0 2px 10px rgba(5, 48, 57, 0.38);
}

.guest-journey__welcome p {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    font-weight: 500;
    text-shadow: 0 2px 8px rgba(5, 48, 57, 0.34);
}

.guest-journey__welcome [data-guest-weather-slot] {
    flex: 0 0 auto;
}

.guest-journey__welcome .guest-home-weather {
    width: auto;
    min-width: 92px;
    min-height: 34px;
    padding: 6px 11px;
    gap: 5px;
    grid-template-columns: 16px auto auto;
    grid-template-rows: auto;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.62);
    border-radius: 18px;
    background: rgba(236, 247, 248, 0.58) !important;
    box-shadow: 0 5px 14px rgba(6, 55, 63, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.guest-journey__welcome .guest-home-weather__scene {
    display: none;
}

.guest-journey__welcome .guest-home-weather__icon,
.guest-journey__welcome .guest-home-weather__icon .icon {
    width: 16px;
    height: 16px;
}

.guest-journey__welcome .guest-home-weather__icon {
    grid-row: 1;
    align-self: center;
}

.guest-journey__welcome .guest-home-weather__temperature,
.guest-journey__welcome .guest-home-weather__condition {
    grid-row: 1;
    align-self: center;
    color: #fff;
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 1;
    text-shadow: 0 1px 5px rgba(5, 48, 57, 0.35);
}

.guest-journey__welcome .guest-home-weather__condition {
    max-width: 56px;
    overflow: hidden;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guest-shell--journey .guest-journey__head {
    padding-top: 14px;
}

.guest-shell--journey .guest-journey__head .eyebrow {
    margin: 0 0 7px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-shadow: 0 2px 8px rgba(5, 48, 57, 0.36);
}

.guest-shell--journey .guest-journey__head h1 {
    max-width: 340px;
    margin: 0 0 9px;
    color: #fff;
    font-family: var(--font-travel-serif);
    font-size: clamp(28px, 7.8vw, 34px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.02em;
    text-shadow: 0 3px 13px rgba(5, 40, 48, 0.48);
    text-wrap: balance;
}

.guest-shell--journey .guest-journey__head > p:last-child {
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 14px;
    line-height: 1.4;
    text-shadow: 0 2px 9px rgba(5, 40, 48, 0.44);
}

.guest-shell--journey .guest-journey-map {
    margin: 27px 0 0;
    padding: 0;
    position: relative;
}

.guest-shell--journey .guest-journey-map::before {
    display: none;
}

.guest-shell--journey .guest-journey-map__progress {
    width: 2px;
    height: 0;
    position: absolute;
    z-index: 0;
    left: 50%;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 0 7px rgba(255, 255, 255, 0.2);
    pointer-events: none;
    transform: translateX(-50%);
    transition: height 650ms ease;
}

.guest-shell--journey .guest-journey-map__progress[hidden] {
    display: none;
}

.guest-shell--journey .guest-journey-map__path {
    display: none;
}

.guest-shell--journey .guest-journey-day {
    width: 100%;
    min-height: 116px;
    padding: 0;
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr);
    align-items: center;
    gap: 0;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
}

.guest-shell--journey .guest-journey-day.is-left,
.guest-shell--journey .guest-journey-day.is-right {
    justify-content: stretch;
    padding-right: 0;
    padding-left: 0;
}

.guest-shell--journey .guest-journey-day__copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    transform: none;
}

.guest-shell--journey .guest-journey-day.is-right .guest-journey-day__copy {
    grid-column: 1;
    align-items: flex-end;
    padding-right: 3px;
    text-align: right;
}

.guest-shell--journey .guest-journey-day.is-left .guest-journey-day__copy {
    grid-column: 3;
    align-items: flex-start;
    padding-left: 3px;
    text-align: left;
}

.guest-shell--journey .guest-journey-day:first-of-type .guest-journey-day__copy,
.guest-shell--journey .guest-journey-day:last-of-type .guest-journey-day__copy {
    transform: none;
}

.guest-shell--journey .guest-journey-day__copy strong {
    color: #fff;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 650;
    line-height: 1.2;
    text-shadow: 0 2px 9px rgba(3, 38, 47, 0.58);
}

.guest-shell--journey .guest-journey-day__title {
    max-width: 100%;
    overflow: visible;
    color: rgba(255, 255, 255, 0.94);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.28;
    overflow-wrap: break-word;
    text-overflow: clip;
    text-shadow: 0 2px 9px rgba(3, 38, 47, 0.58);
    white-space: normal;
}

.guest-shell--journey .guest-journey-day__copy small {
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    font-weight: 450;
    line-height: 1.25;
    letter-spacing: 0;
    text-shadow: 0 2px 8px rgba(3, 38, 47, 0.58);
}

.guest-shell--journey .guest-journey-day__dot {
    width: 44px;
    height: 44px;
    grid-column: 2;
    grid-row: 1;
    place-self: center;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.88);
    border-radius: 50%;
    background: rgba(244, 248, 247, 0.94);
    color: #fff;
    box-shadow: 0 5px 13px rgba(4, 48, 57, 0.18);
    animation: none;
    transform: none;
}

.guest-shell--journey .guest-journey-day__dot::before {
    display: none;
}

.guest-shell--journey .guest-journey-day__dot::after {
    width: 8px;
    height: 8px;
    position: static;
    border-radius: 50%;
    background: #c7d1d3;
    box-shadow: none;
    opacity: 1;
    animation: none;
    content: "";
}

.guest-shell--journey .guest-journey-day__dot .icon {
    width: 19px;
    height: 19px;
    stroke-width: 2.4;
}

.guest-shell--journey .guest-journey-day.is-complete .guest-journey-day__dot {
    border-color: rgba(255, 255, 255, 0.72);
    background: #1987a8;
    box-shadow: 0 6px 14px rgba(4, 78, 99, 0.3);
}

.guest-shell--journey .guest-journey-day.is-complete .guest-journey-day__dot::after {
    display: none;
}

.guest-shell--journey .guest-journey-day.is-today .guest-journey-day__copy strong,
.guest-shell--journey .guest-journey-day.is-today .guest-journey-day__title {
    color: #fff;
    font-weight: 800;
    text-shadow: 0 2px 10px rgba(3, 38, 47, 0.68);
}

.guest-shell--journey .guest-journey-day.is-today .guest-journey-day__copy small {
    color: rgba(255, 255, 255, 0.9);
}

.guest-shell--journey .guest-journey-day.is-today .guest-journey-day__dot {
    border: 4px solid #a9d32c;
    background: #1987a8;
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.78),
        0 7px 16px rgba(4, 78, 99, 0.34);
    animation: guest-journey-current-beacon 1.8s ease-in-out infinite;
}

.guest-shell--journey .guest-journey-day.is-today .guest-journey-day__dot::before {
    inset: -10px;
    display: block;
    border: 2px solid rgba(202, 239, 77, 0.92);
    opacity: 0;
    animation: guest-journey-current-ring 1.8s ease-out infinite;
}

.guest-shell--journey .guest-journey-day.is-today .guest-journey-day__dot::after {
    width: 10px;
    height: 10px;
    display: block;
    background: #fff;
    box-shadow: none;
    animation: guest-journey-current-core 1.8s ease-in-out infinite;
}

@keyframes guest-journey-current-beacon {
    0%,
    100% {
        box-shadow:
            0 0 0 2px rgba(255, 255, 255, 0.72),
            0 7px 16px rgba(4, 78, 99, 0.34);
    }
    50% {
        box-shadow:
            0 0 0 4px rgba(255, 255, 255, 0.96),
            0 0 20px 7px rgba(202, 239, 77, 0.5),
            0 7px 16px rgba(4, 78, 99, 0.38);
    }
}

@keyframes guest-journey-current-ring {
    0% {
        opacity: 0.9;
        transform: scale(0.72);
    }
    70%,
    100% {
        opacity: 0;
        transform: scale(1.42);
    }
}

@keyframes guest-journey-current-core {
    0%,
    100% {
        opacity: 0.55;
        transform: scale(0.78);
    }
    50% {
        opacity: 1;
        transform: scale(1.18);
    }
}

.guest-shell--journey .guest-journey-day.is-upcoming {
    opacity: 0.82;
}

.guest-shell--journey .guest-journey-day:hover .guest-journey-day__dot,
.guest-shell--journey .guest-journey-day:focus-visible .guest-journey-day__dot {
    transform: scale(1.06);
}

.guest-shell--journey .guest-journey-day:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.82);
    outline-offset: 2px;
    border-radius: 12px;
}

.guest-shell--journey > .guest-bottom-nav {
    width: 100%;
    max-width: none;
    min-height: calc(75px + env(safe-area-inset-bottom));
    padding: 0 0 max(3px, env(safe-area-inset-bottom));
    position: fixed;
    z-index: 41;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 0;
    border-top: 1px solid rgba(220, 222, 216, 0.9);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 -5px 18px rgba(24, 68, 67, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.guest-shell--journey > .guest-bottom-nav .guest-nav-item,
.guest-shell--journey > .guest-bottom-nav .guest-nav-item:nth-child(3) {
    min-height: 58px;
    padding: 3px 2px;
    gap: 2px;
    color: #65777d;
    transform: none;
}

.guest-shell--journey > .guest-bottom-nav .guest-nav-item__icon,
.guest-shell--journey > .guest-bottom-nav .guest-nav-item:nth-child(3) .guest-nav-item__icon {
    width: 62px;
    height: 31px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: inherit;
    box-shadow: none;
}

.guest-shell--journey > .guest-bottom-nav .guest-nav-item .icon,
.guest-shell--journey > .guest-bottom-nav .guest-nav-item:nth-child(3) .icon,
.guest-shell--journey > .guest-bottom-nav .guest-nav-item:nth-child(3).active .icon {
    width: 20px;
    height: 20px;
    color: currentColor;
    stroke-width: 1.9;
}

.guest-shell--journey > .guest-bottom-nav .guest-nav-item__label,
.guest-shell--journey > .guest-bottom-nav .guest-nav-item:nth-child(3) .guest-nav-item__label {
    width: auto;
    height: auto;
    position: static;
    overflow: hidden;
    clip: auto;
    clip-path: none;
    color: inherit;
    font-size: 9px;
    font-weight: 500;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guest-shell--journey > .guest-bottom-nav .guest-nav-item.active {
    color: #087694;
}

.guest-shell--journey > .guest-bottom-nav .guest-nav-item.active::before,
.guest-shell--journey > .guest-bottom-nav .guest-nav-item.active::after {
    display: none;
}

.guest-shell--journey > .guest-bottom-nav .guest-nav-item.active .guest-nav-item__icon {
    background: #e4f5f8;
}

@media (max-width: 360px) {
    .guest-shell--journey > .guest-topbar {
        padding-right: 18px;
        padding-left: 18px;
    }

    .guest-shell--journey > .guest-main--itinerary {
        padding-right: 18px;
        padding-left: 18px;
    }

    .guest-shell--journey .guest-journey-day {
        grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
    }

    .guest-shell--journey .guest-journey-day__copy strong,
    .guest-shell--journey .guest-journey-day__title {
        font-size: 14px;
    }

    .guest-shell--journey .guest-journey-day__copy small {
        font-size: 12px;
    }
}

/* Contact photo picker — same mechanics as the activity image picker, but a
   headshot reads as a circle so it matches the avatar on the contact card. */
.contact-avatar-picker .activity-image-picker__thumb {
    border-radius: 50%;
    font-weight: 600;
    font-size: 1.05rem;
}
.contact-avatar-picker .activity-image-picker__thumb .icon {
    width: 24px;
    height: 24px;
}

/* Explore article detail — editorial destination story. */
.guest-shell--explore-article {
    min-height: 100vh;
    min-height: 100lvh;
    padding-bottom: calc(75px + env(safe-area-inset-bottom));
    background:
        radial-gradient(circle at 10% 42%, rgba(196, 225, 216, 0.38), transparent 32%), #eaf2ef;
}

.guest-container--explore-article {
    width: min(430px, 100%);
}

.guest-shell--explore-article > .guest-topbar {
    height: calc(60px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 17px 0;
    /* Scrolls away with the rest of the page instead of staying pinned —
       sticky positioning here was letting the article body paint over it. */
    position: static;
    border: 0;
    background: rgba(239, 245, 242, 0.98);
    box-shadow: none;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.guest-shell--explore-article .guest-brand__logo {
    width: 110px;
    height: 52px;
}

.guest-shell--explore-article .guest-sync-button {
    display: none;
}

.guest-shell--explore-article > .guest-main {
    padding: 0;
}

.guest-shell--explore-article .explore-article {
    overflow: hidden;
    color: #123f50;
    background: transparent;
}

.guest-shell--explore-article .explore-article__head {
    margin: 0;
}

.explore-article__hero {
    height: 220px;
    position: relative;
    overflow: hidden;
    background: #bedfe2;
}

.guest-shell--explore-article .explore-article__cover {
    width: 100%;
    height: 100%;
    margin: 0;
    display: block;
    border-radius: 0;
    object-fit: cover;
    background: #bedfe2;
}

.explore-article__cover-fallback {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: #17836f;
    background:
        linear-gradient(180deg, rgba(193, 232, 235, 0.62), rgba(152, 212, 213, 0.82)), #b9e1e3;
}

.explore-article__cover-fallback .icon {
    width: 34px;
    height: 34px;
}

.explore-article__hero::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 42% 0 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(4, 18, 20, 0.72));
}

.explore-article__hero-back {
    width: 29px;
    height: 25px;
    padding: 0;
    position: absolute;
    z-index: 3;
    top: 14px;
    left: 16px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 4px;
    color: #08718a;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 12px rgba(7, 34, 38, 0.12);
    cursor: pointer;
}

.explore-article__hero-back .icon {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.explore-article__hero-badge {
    max-width: calc(100% - 32px);
    min-height: 25px;
    padding: 4px 9px;
    position: absolute;
    z-index: 2;
    top: 14px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 4px;
    color: #08718a;
    background: rgba(255, 255, 255, 0.95);
    font-size: 11px;
    font-weight: 750;
    box-shadow: 0 4px 12px rgba(7, 34, 38, 0.12);
}

.explore-article__hero-back + .explore-article__hero-badge {
    max-width: calc(100% - 68px);
    left: 51px;
}

.explore-article__hero-badge > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.explore-article__hero-badge .icon {
    width: 13px;
    height: 13px;
}

.guest-shell--explore-article .explore-article__hero h1 {
    max-width: calc(100% - 32px);
    margin: 0;
    position: absolute;
    z-index: 2;
    right: 16px;
    bottom: 16px;
    left: 16px;
    color: #fff;
    font-family: var(--font-sans);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.22;
    letter-spacing: -0.025em;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.44);
}

.explore-article__intro {
    padding: 17px 16px 14px;
}

.explore-article__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.explore-article__tags span {
    min-height: 28px;
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    color: #277590;
    background: #e0f1f4;
    font-size: 11px;
    font-weight: 700;
}

.explore-article__intro h2 {
    margin: 0 0 10px;
    color: #06445e;
    font-family: var(--font-sans);
    font-size: 21px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -0.02em;
}

.explore-article__intro p {
    margin: 0;
    color: #293f43;
    font-size: 14px;
    line-height: 1.55;
}

.explore-article__intro > a {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #087596;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
}

.explore-article__content {
    padding: 0 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.guest-shell--explore-article .explore-article__jump {
    order: 1;
    margin: 0;
}

.guest-shell--explore-article .explore-article__body {
    order: 1;
    gap: 16px;
    padding: 0;
}

.guest-shell--explore-article .explore-article__heading {
    padding-top: 0;
}

.guest-shell--explore-article .explore-article__heading h2 {
    color: #06445e;
    font-family: var(--font-sans);
    font-size: 19px;
    font-weight: 800;
    line-height: 1.35;
}

.guest-shell--explore-article .explore-article__text p,
.guest-shell--explore-article .explore-article__text li {
    color: #293f43;
    font-size: 14px;
    line-height: 1.58;
}

.guest-shell--explore-article .explore-article__image img {
    border-radius: 15px;
}

.explore-article__place-card {
    order: 2;
    padding: 5px 16px;
    overflow: hidden;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 22px rgba(25, 68, 64, 0.09);
}

.explore-article__place-card > div {
    min-height: 46px;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    border-bottom: 1px solid #e4e2dc;
    color: #43515a;
    font-size: 13px;
}

.explore-article__place-card > div:first-child {
    color: #074c68;
    font-weight: 750;
}

.explore-article__place-card > div:last-child {
    border-bottom: 0;
}

.explore-article__place-card .icon {
    width: 18px;
    height: 18px;
    color: #6e7e84;
}

.explore-article__place-card > div:first-child .icon {
    color: #087e9e;
}

.explore-article__map-area {
    order: 3;
}

.explore-article__map-area > h2,
.explore-article__nearby > header h2 {
    margin: 0 0 10px;
    color: #06445e;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 800;
}

.explore-article__map-frame {
    height: 178px;
    overflow: hidden;
    border: 8px solid #fff;
    border-radius: 15px;
    background: #dce7e3;
    box-shadow: 0 7px 18px rgba(25, 69, 64, 0.08);
}

.explore-article__map-frame iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}

.explore-article__map-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 8px;
    color: #087694;
    background:
        linear-gradient(32deg, transparent 48%, rgba(255, 255, 255, 0.8) 49% 52%, transparent 53%),
        #dce7e3;
}

.explore-article__map-placeholder .icon {
    width: 28px;
    height: 28px;
}

.explore-article__map-legend {
    min-height: 30px;
    padding: 8px 4px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    color: #445b60;
    font-size: 10px;
}

.explore-article__map-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.explore-article__map-legend i {
    width: 8px;
    height: 8px;
    display: block;
    border-radius: 50%;
    background: #087e9e;
}

.explore-article__map-legend .is-coral i {
    background: #e67564;
}

.explore-article__nearby {
    order: 4;
}

.explore-article__nearby > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.explore-article__nearby > header button {
    padding: 0;
    border: 0;
    color: #20758f;
    background: transparent;
    font: inherit;
    font-size: 10px;
    cursor: pointer;
}

.explore-article__nearby-list {
    display: grid;
    grid-auto-columns: minmax(132px, 1fr);
    grid-auto-flow: column;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.explore-article__nearby-list::-webkit-scrollbar {
    display: none;
}

.explore-article__nearby-card {
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 13px;
    color: #06445e;
    background: #fff;
    box-shadow: 0 6px 15px rgba(24, 62, 60, 0.08);
    font: inherit;
    text-align: left;
    scroll-snap-align: start;
    cursor: pointer;
}

.explore-article__nearby-cover {
    height: 88px;
    position: relative;
    display: block;
    overflow: hidden;
}

.explore-article__nearby-cover .explore-card-cover {
    width: 100%;
    height: 100%;
    border-radius: 0;
}

.explore-article__nearby-cover .explore-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.explore-article__nearby-cover > small {
    padding: 3px 7px;
    position: absolute;
    top: 6px;
    left: 6px;
    border-radius: 4px;
    color: #fff;
    background: rgba(103, 87, 58, 0.58);
    font-size: 8px;
    backdrop-filter: blur(5px);
}

.explore-article__nearby-card > strong {
    min-height: 34px;
    padding: 8px 9px 9px;
    display: -webkit-box;
    overflow: hidden;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.explore-article__open-map {
    min-height: 53px;
    order: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 14px;
    color: #fff;
    background: #167d99;
    box-shadow: 0 9px 20px rgba(7, 91, 114, 0.22);
    font: inherit;
    font-size: 15px;
    cursor: pointer;
}

.explore-article__open-map .icon {
    width: 22px;
    height: 22px;
}

.guest-shell--explore-article > .guest-bottom-nav {
    background: rgba(255, 255, 255, 0.98);
}

.explore-composer__preview .explore-article__hero {
    height: 150px;
}

.explore-composer__preview .explore-article__intro,
.explore-composer__preview .explore-article__content {
    padding-right: 12px;
    padding-left: 12px;
}

.explore-composer__preview .explore-article__nearby {
    display: none;
}

@media (max-width: 360px) {
    .explore-article__hero {
        height: 205px;
    }

    .explore-article__intro,
    .explore-article__content {
        padding-right: 13px;
        padding-left: 13px;
    }

    .explore-article__intro h2 {
        font-size: 19px;
    }
}

/* Support hub ----------------------------------------------------------- */
body:has(.guest-shell--help) [data-iki-host] {
    background: #eaf2ef;
}

.guest-shell--help {
    min-height: 100vh;
    min-height: 100dvh;
    padding-bottom: calc(75px + env(safe-area-inset-bottom));
    color: #092f3d;
    background:
        radial-gradient(circle at 12% 38%, rgba(255, 255, 255, 0.38), transparent 28%),
        linear-gradient(180deg, #eef5f2 0%, #e7f0ed 100%);
}

.guest-shell--help::before,
.guest-shell--help::after {
    content: none;
}

.guest-shell--help > .guest-topbar {
    display: none;
}

.guest-shell--help > .guest-main--help {
    width: 100%;
    max-width: 680px;
    min-height: calc(100vh - 75px);
    min-height: calc(100dvh - 75px);
    margin: 0 auto;
    padding: 0 0 28px;
}

.guest-help-hub__header {
    min-height: calc(67px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 13px 0;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    align-items: center;
    background: rgba(238, 245, 242, 0.92);
}

.guest-help-hub__header > button {
    width: 44px;
    height: 44px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #087694;
    background: transparent;
    cursor: pointer;
}

.guest-help-hub__header > button .icon {
    width: 22px;
    height: 22px;
    stroke-width: 1.8;
}

.guest-help-hub__header h1 {
    margin: 0;
    color: #102b2c;
    font-family: var(--font-sans);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
}

.guest-help-hub {
    position: relative;
    padding: 46px 16px 26px;
}

.guest-help-hub__title {
    margin: 0 0 17px;
    color: #073f58;
    font-family: var(--font-sans);
    font-size: 23px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-align: center;
}

.guest-help-hub__sos {
    width: 100%;
    min-height: 56px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 0;
    border-radius: 17px;
    color: #fff;
    background: #c9251d;
    box-shadow: 0 9px 22px rgba(165, 44, 35, 0.13);
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
}

.guest-help-hub__sos .icon {
    width: 21px;
    height: 21px;
    stroke-width: 1.9;
}

.guest-help-hub__section {
    margin-top: 25px;
}

.guest-help-hub__section > h2,
.guest-help-hub__section-head h2 {
    color: #073f58;
    font-family: var(--font-sans);
    font-size: 19px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

.guest-help-hub__section > h2 {
    margin: 0 0 10px;
}

.guest-help-hub__section-head {
    min-height: 30px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.guest-help-hub__section-head h2 {
    margin: 0;
}

.guest-help-hub__section-head button {
    padding: 4px 0;
    border: 0;
    color: #087694;
    background: transparent;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.guest-help-hub__quick-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.guest-help-hub__quick-card {
    min-width: 0;
    min-height: 93px;
    padding: 15px 16px 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    border: 0;
    border-radius: 17px;
    color: #10373d;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 8px 20px rgba(42, 78, 73, 0.07);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.guest-help-hub__quick-icon {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    color: #087694;
}

.guest-help-hub__quick-icon .icon {
    width: 29px;
    height: 29px;
    stroke-width: 1.7;
}

.guest-help-hub__quick-card strong {
    max-width: 100%;
    color: #163538;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
}

.guest-help-hub__contacts {
    margin-top: 27px;
}

.guest-help-hub__contact-list,
.guest-help-hub__request-list {
    overflow: hidden;
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 8px 22px rgba(38, 76, 70, 0.07);
}

.guest-help-hub__contact {
    min-height: 76px;
    padding: 10px 16px;
    display: grid;
    grid-template-columns: 43px minmax(0, 1fr) 45px;
    align-items: center;
    gap: 11px;
    border-bottom: 1px solid #e2e3df;
}

.guest-help-hub__contact:last-child {
    border-bottom: 0;
}

.guest-help-hub__contact-avatar {
    width: 43px;
    height: 43px;
    overflow: hidden;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #087694;
    background: #e7f6f8;
    font-size: 12px;
    font-weight: 800;
}

.guest-help-hub__contact-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.guest-help-hub__contact-avatar .icon {
    width: 22px;
    height: 22px;
}

.guest-help-hub__contact-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.guest-help-hub__contact-copy strong,
.guest-help-hub__contact-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guest-help-hub__contact-copy strong {
    color: #173235;
    font-size: 14px;
    font-weight: 700;
}

.guest-help-hub__contact-copy small {
    display: flex;
    align-items: center;
    color: #6c797c;
    font-size: 10px;
    line-height: 1.3;
}

.guest-help-hub__contact-copy small .icon {
    width: 12px;
    height: 12px;
    margin: 0 2px 0 5px;
}

.guest-help-hub__call {
    width: 44px;
    height: 44px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #087694;
    background: #e7f6f9;
    text-decoration: none;
    cursor: pointer;
}

.guest-help-hub__call .icon {
    width: 20px;
    height: 20px;
    stroke-width: 1.9;
}

.guest-help-hub__contact.is-emergency .guest-help-hub__contact-avatar {
    color: #c9251d;
    background: #ffe0dd;
}

.guest-help-hub__contact.is-emergency .guest-help-hub__contact-copy small {
    color: #d34439;
}

.guest-help-hub__requests {
    margin-top: 25px;
}

.guest-help-hub__request {
    width: 100%;
    min-height: 75px;
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    border: 0;
    border-bottom: 1px solid #e2e3df;
    color: #173235;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.guest-help-hub__request:last-child {
    border-bottom: 0;
}

.guest-help-hub__request-meta,
.guest-help-hub__request-meta > span,
.guest-help-hub__request-title {
    min-width: 0;
    display: flex;
    align-items: center;
}

.guest-help-hub__request-meta {
    justify-content: space-between;
    gap: 12px;
}

.guest-help-hub__request-meta > span {
    gap: 8px;
}

.guest-help-hub__request-meta strong {
    color: #087694;
    font-size: 11px;
    font-weight: 700;
}

.guest-help-hub__request-meta em {
    min-height: 21px;
    padding: 3px 8px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    color: #3e7269;
    background: #e3f3ed;
    font-size: 9px;
    font-style: normal;
    font-weight: 700;
}

.guest-help-hub__request-meta em.is-progress {
    color: #6f6439;
    background: #f6f1dd;
}

.guest-help-hub__request-meta em.is-new {
    color: #367894;
    background: #e5f3f7;
}

.guest-help-hub__request-meta > small {
    flex: 0 0 auto;
    color: #8a9293;
    font-size: 9px;
}

.guest-help-hub__request-title {
    justify-content: space-between;
    gap: 10px;
    color: #273b3d;
    font-size: 13px;
    line-height: 1.3;
}

.guest-help-hub__request-title .icon {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    color: #a6b8bc;
}

.guest-help-hub__request-create {
    width: 100%;
    min-height: 46px;
    margin-top: 10px;
    padding: 9px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1.5px solid #087694;
    border-radius: 14px;
    color: #087694;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 7px 18px rgba(38, 76, 70, 0.05);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.guest-help-hub__request-create .icon {
    width: 17px;
    height: 17px;
    stroke-width: 2;
}

.guest-help-hub__request-empty {
    min-height: 135px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 17px;
    color: #6c797c;
    background: rgba(255, 255, 255, 0.98);
    text-align: center;
    box-shadow: 0 8px 22px rgba(38, 76, 70, 0.07);
}

.guest-help-hub__request-empty > span .icon {
    width: 26px;
    height: 26px;
}

.guest-help-hub__request-empty p {
    margin: 0;
    font-size: 13px;
}

.guest-help-hub__request-empty button {
    min-height: 34px;
    padding: 6px 13px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid #087694;
    border-radius: 11px;
    color: #087694;
    background: #fff;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.guest-help-hub__request-empty button .icon {
    width: 15px;
    height: 15px;
}

/* Every guest route shares the same four-item dock. */
.guest-shell:not(.guest-shell--journey) > .guest-bottom-nav,
.guest-shell--journey > .guest-bottom-nav {
    width: 100%;
    max-width: none;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 360px) {
    .guest-help-hub {
        padding-right: 13px;
        padding-left: 13px;
    }

    .guest-help-hub__quick-card {
        padding-right: 13px;
        padding-left: 13px;
    }

    .guest-help-hub__contact {
        padding-right: 13px;
        padding-left: 13px;
        grid-template-columns: 40px minmax(0, 1fr) 42px;
        gap: 9px;
    }

    .guest-help-hub__contact-avatar,
    .guest-help-hub__call {
        width: 40px;
        height: 40px;
    }
}

/* Shared authenticated-guest header. Every bottom-navigation screen uses the
   same logo + language treatment as the approved Profile reference. Display
   controls live in My Page > App settings. */
.guest-shell[class*="guest-shell--"] > .guest-topbar {
    width: min(430px, 100%);
    height: calc(68px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 16px 0;
    z-index: 35;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.guest-shell[class*="guest-shell--"] > .guest-topbar .guest-brand__logo {
    width: 112px;
    height: 52px;
    opacity: 1;
    object-fit: contain;
    object-position: left center;
    filter: none;
}

.guest-shell[class*="guest-shell--"] > .guest-topbar .guest-sync-button {
    display: none;
}

.guest-shell[class*="guest-shell--"] > .guest-topbar .guest-topbar__actions {
    min-height: 38px;
    gap: 6px;
}

.guest-shell[class*="guest-shell--"] > .guest-topbar .guest-accessibility-toggle,
.guest-shell[class*="guest-shell--"] > .guest-topbar .locale-switch--flags {
    height: 38px;
    min-height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.88);
    border-radius: 10px;
    color: #075f55;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 5px 13px rgba(22, 76, 71, 0.13);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.guest-shell[class*="guest-shell--"] > .guest-topbar .guest-accessibility-toggle {
    width: 38px;
    min-width: 38px;
    padding: 0;
    justify-content: center;
}

.guest-shell[class*="guest-shell--"]
    > .guest-topbar
    .guest-accessibility-toggle
    > span:not(.guest-accessibility-toggle__glyph) {
    display: none;
}

.guest-shell[class*="guest-shell--"] > .guest-topbar .guest-accessibility-toggle__glyph {
    font-size: 15px;
}

.guest-shell[class*="guest-shell--"] > .guest-topbar .locale-switch--flags {
    width: 64px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    box-sizing: border-box;
    border-color: rgba(255, 255, 255, 0.52);
    border-radius: 999px;
    background: rgba(248, 249, 247, 0.9);
    box-shadow: 0 2px 8px rgba(23, 50, 47, 0.12);
}

.guest-shell[class*="guest-shell--"] > .guest-topbar .locale-select__trigger {
    width: 62px;
    height: 30px;
    min-height: 30px;
    padding: 4px 8px;
    box-sizing: border-box;
    border-radius: 999px;
}

.guest-shell[class*="guest-shell--"] > .guest-topbar .locale-switch__flag {
    width: 22px;
    height: 15px;
}

.guest-shell--help > .guest-topbar {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
}

.guest-shell--help > .guest-main--help {
    min-height: calc(100vh - 143px - env(safe-area-inset-top));
    min-height: calc(100dvh - 143px - env(safe-area-inset-top));
}

/* One emergency bottom dialog shared by Home, Support and Profile. */
.drawer-backdrop--guest-bottom-sheet {
    background: rgba(3, 33, 29, 0.46);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.drawer.drawer--guest-bottom-sheet {
    width: min(430px, 100%);
    height: auto;
    max-height: calc(100dvh - 18px);
    inset: auto auto 0 50%;
    display: grid;
    grid-template-rows: auto minmax(0, auto);
    overflow: hidden;
    border-radius: 27px 27px 0 0;
    background: #fff;
    box-shadow: 0 -16px 42px rgba(7, 43, 37, 0.22);
    transform: translate(-50%, 100%);
    animation: guest-emergency-sheet-in 220ms ease-out forwards;
}

@keyframes guest-emergency-sheet-in {
    to {
        transform: translate(-50%, 0);
    }
}

.drawer--guest-bottom-sheet::before {
    width: 40px;
    height: 5px;
    position: absolute;
    z-index: 3;
    top: 9px;
    left: 50%;
    border-radius: 999px;
    background: #aebcc0;
    content: "";
    transform: translateX(-50%);
}

.drawer--guest-bottom-sheet .drawer__header {
    min-height: 0;
    padding: 31px 24px 11px;
    border: 0;
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.drawer--guest-bottom-sheet .drawer__header .eyebrow,
.drawer--guest-bottom-sheet .drawer__header .icon-button {
    display: none;
}

.drawer--guest-bottom-sheet .drawer__header h2 {
    margin: 0;
    color: #0b3744;
    font-family: var(--font-sans);
    font-size: 19px;
    font-weight: 800;
    line-height: 1.25;
}

.drawer--guest-bottom-sheet .drawer__body {
    padding: 10px 24px calc(16px + env(safe-area-inset-bottom));
    overflow-y: auto;
}

.guest-emergency-sheet__list {
    display: grid;
    gap: 8px;
}

.guest-emergency-sheet__contact {
    min-height: 57px;
    padding: 11px 15px;
    display: grid;
    grid-template-columns: 23px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    border-radius: 14px;
    color: #17383d;
    background: #f5f3ef;
    text-decoration: none;
}

.guest-emergency-sheet__contact.is-emergency {
    color: #e66f5e;
    background: #ffebe8;
}

.guest-emergency-sheet__contact .icon {
    width: 21px;
    height: 21px;
    stroke-width: 1.9;
}

.guest-emergency-sheet__contact strong {
    min-width: 0;
    overflow: hidden;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guest-emergency-sheet__contact:active {
    transform: scale(0.985);
}

.guest-emergency-sheet__empty {
    margin: 0;
    padding: 18px;
    border-radius: 14px;
    color: #627477;
    background: #f5f3ef;
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
}

.guest-profile-setting-sheet__list {
    display: grid;
    gap: 8px;
}

.guest-profile-setting-sheet__list--links {
    margin-top: 12px;
}

.guest-profile-setting-sheet__section + .guest-profile-setting-sheet__section {
    margin-top: 18px;
}

.guest-profile-setting-sheet__section-label {
    margin: 0 0 8px;
    color: #627477;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.guest-profile-setting-sheet__choice {
    width: 100%;
    min-height: 62px;
    padding: 10px 13px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 11px;
    border: 1px solid transparent;
    border-radius: 14px;
    color: #17383d;
    background: #f5f3ef;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.guest-profile-setting-sheet__choice.is-active {
    border-color: rgba(7, 132, 81, 0.34);
    background: #eaf6f0;
}

.guest-profile-setting-sheet__choice-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    color: #087694;
    background: #e5f4f5;
}

.guest-profile-setting-sheet__choice-icon .icon {
    width: 21px;
    height: 21px;
}

.guest-profile-setting-sheet__type {
    color: #087694;
    font-weight: 800;
    line-height: 1;
}

.guest-profile-setting-sheet__type--regular {
    font-size: 16px;
}

.guest-profile-setting-sheet__type--large {
    font-size: 20px;
}

.guest-profile-setting-sheet__type--xlarge {
    font-size: 24px;
}

.guest-profile-setting-sheet__choice-icon img {
    width: 28px;
    height: 20px;
    display: block;
    border-radius: 4px;
    object-fit: cover;
    box-shadow: 0 1px 5px rgba(20, 45, 41, 0.13);
}

.guest-profile-setting-sheet__choice-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.guest-profile-setting-sheet__choice-copy strong,
.guest-profile-setting-sheet__choice-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
}

.guest-profile-setting-sheet__choice-copy strong {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}

.guest-profile-setting-sheet__choice-copy small {
    color: #6d7d80;
    font-size: 10px;
    line-height: 1.35;
}

.guest-profile-setting-sheet__check {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: transparent;
}

.guest-profile-setting-sheet__choice.is-active .guest-profile-setting-sheet__check {
    background: #078451;
}

.guest-profile-setting-sheet__check .icon {
    width: 15px;
    height: 15px;
    stroke-width: 2.5;
}

.guest-profile-setting-sheet__info {
    margin-bottom: 12px;
    padding: 4px 14px;
    overflow: hidden;
    border-radius: 14px;
    background: #f5f3ef;
}

.guest-profile-setting-sheet__info > div {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid #e4e1db;
    color: #6e7d80;
    font-size: 12px;
}

.guest-profile-setting-sheet__info > div:last-child {
    border-bottom: 0;
}

.guest-profile-setting-sheet__info strong {
    color: #17383d;
    font-size: 13px;
}

/* Add-to-Home-Screen guide. iOS offers no install prompt to trigger, so this
   is the whole mechanism: the traveller reads it and performs the gesture
   themselves. Steps are numbered by the counter rather than in the markup, so
   the <ol> stays the single source of their order for a screen reader. */
.guest-push-guide__lead {
    margin: 0 0 14px;
    padding: 0 4px;
    color: #4f6464;
    font-size: 12.5px;
    line-height: 1.55;
}

.guest-push-guide {
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
    counter-reset: guest-push-step;
    list-style: none;
}

.guest-push-guide__step {
    padding: 14px 16px 14px 14px;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    border-radius: 14px;
    background: #f5f3ef;
    counter-increment: guest-push-step;
}

.guest-push-guide__step::before {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--brand-800);
    color: #fff;
    content: counter(guest-push-step);
    font-size: 13px;
    font-weight: 700;
}

.guest-push-guide__copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.guest-push-guide__copy strong {
    color: #17383d;
    font-size: 14px;
    line-height: 1.35;
}

.guest-push-guide__copy small {
    color: #4f6464;
    font-size: 12.5px;
    line-height: 1.6;
}

/* The glyphs sit inside the sentence, at the size iOS draws them, so the eye
   can match them against the real bar instead of decoding a description. */
.guest-push-guide__copy small .icon {
    width: 17px;
    height: 17px;
    margin: 0 1px;
    position: relative;
    top: 4px;
    color: var(--brand-800);
}

.guest-emergency-sheet__cancel,
.guest-profile-setting-sheet__cancel {
    width: 100%;
    min-height: 54px;
    margin-top: 20px;
    padding: 10px;
    border: 0;
    color: #2c373b;
    background: transparent;
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}

@media (max-width: 360px) {
    .drawer--guest-bottom-sheet .drawer__header,
    .drawer--guest-bottom-sheet .drawer__body {
        padding-right: 18px;
        padding-left: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .drawer.drawer--guest-bottom-sheet {
        animation-duration: 1ms;
    }
}

/* Guest request detail -------------------------------------------------- */
body:has(.guest-shell--request-detail) [data-iki-host] {
    background: #e8f0ed;
}

.guest-shell--request-detail {
    min-height: 100vh;
    min-height: 100dvh;
    padding-bottom: calc(75px + env(safe-area-inset-bottom));
    color: #123943;
    background:
        radial-gradient(circle at 93% 28%, rgba(255, 255, 255, 0.36), transparent 31%),
        linear-gradient(180deg, #e9f1ee 0%, #e4eeeb 100%);
}

.guest-shell--request-detail::before,
.guest-shell--request-detail::after,
.guest-shell--request-detail > .guest-topbar {
    display: none !important;
    content: none !important;
}

.guest-shell--request-detail > .guest-main--help {
    width: 100%;
    max-width: 430px;
    min-height: calc(100vh - 75px - env(safe-area-inset-bottom));
    min-height: calc(100dvh - 75px - env(safe-area-inset-bottom));
    margin: 0 auto;
    padding: 0 0 28px;
}

.guest-request-detail {
    min-height: inherit;
}

.guest-request-detail__header {
    min-height: calc(86px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 16px 0;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: center;
}

.guest-request-detail__header button {
    width: 42px;
    height: 42px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #35494e;
    background: transparent;
    cursor: pointer;
}

.guest-request-detail__header button .icon {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

.guest-request-detail__header h1 {
    margin: 0;
    overflow: hidden;
    color: #073f58;
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guest-request-detail__card {
    margin: 26px 16px 0;
    padding: 18px 16px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 10px 28px rgba(41, 80, 72, 0.06);
}

.guest-request-detail__status {
    min-height: 24px;
    padding: 4px 11px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    color: #776832;
    background: #faf1d8;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
}

.guest-request-detail__status.is-new {
    color: #367894;
    background: #e5f3f7;
}

.guest-request-detail__status.is-done {
    color: #367566;
    background: #e3f3ed;
}

.guest-request-detail__status.is-cancelled {
    color: #b74d43;
    background: #fde8e5;
}

.guest-request-detail__card h2 {
    margin: 9px 0 11px;
    color: #073f58;
    font-family: var(--font-sans);
    font-size: 19px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -0.015em;
}

.guest-request-detail__description {
    margin: 0;
    color: #3f5055;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.8;
}

.guest-request-detail__timeline-update {
    margin: 7px 0 7px;
    padding: 9px 10px;
    display: grid;
    gap: 3px;
    border-radius: 10px;
    color: #4d6265;
    background: #eef6f3;
    font-size: 11px;
    line-height: 1.5;
}

.guest-request-detail__timeline-update span {
    color: #087694;
    font-size: 10px;
    font-weight: 700;
}

.guest-request-detail__timeline-update small {
    color: #4d6265;
    font-size: 11px;
    line-height: 1.45;
}

.guest-request-detail__card h3 {
    margin: 22px 0 13px;
    color: #818b8e;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
}

.guest-request-detail__timeline {
    margin: 0;
    padding: 0;
    list-style: none;
}

.guest-request-detail__timeline-item {
    min-height: 58px;
    position: relative;
    display: grid;
    grid-template-columns: 17px minmax(0, 1fr);
    align-items: start;
    gap: 9px;
}

.guest-request-detail__timeline-item:not(:last-child)::after {
    width: 1px;
    position: absolute;
    top: 16px;
    bottom: 2px;
    left: 7px;
    border-left: 2px dashed #78c6e8;
    content: "";
}

.guest-request-detail__timeline-dot {
    width: 15px;
    height: 15px;
    position: relative;
    z-index: 1;
    margin-top: 2px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #efc35f;
}

.guest-request-detail__timeline-item.is-done .guest-request-detail__timeline-dot {
    background: #3f8b70;
}

.guest-request-detail__timeline-item.is-cancelled .guest-request-detail__timeline-dot {
    background: #e27266;
}

.guest-request-detail__timeline-dot .icon {
    width: 9px;
    height: 9px;
    stroke-width: 3;
}

.guest-request-detail__timeline-item > div {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.guest-request-detail__timeline-item time {
    color: #879094;
    font-size: 10px;
    line-height: 1.2;
}

.guest-request-detail__timeline-item strong {
    color: #0d4662;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
}

.guest-request-detail__call {
    width: 100%;
    min-height: 52px;
    margin-top: 6px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1.5px solid #087694;
    border-radius: 14px;
    color: #087694;
    background: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.guest-request-detail__call .icon {
    width: 20px;
    height: 20px;
    stroke-width: 1.9;
}

@media (max-width: 360px) {
    .guest-request-detail__card {
        margin-right: 13px;
        margin-left: 13px;
        padding-right: 14px;
        padding-left: 14px;
    }
}

/* ---- Place search (keyless OSM/Photon) + Leaflet map ------------------- */
.place-search {
    position: relative;
}
.place-search__menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 40;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    padding: 6px;
    max-height: 340px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.place-search__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: none;
    cursor: pointer;
    color: var(--ink);
    transition: background 0.12s ease;
}
.place-search__item:hover,
.place-search__item:focus-visible {
    background: var(--brand-50);
}
.place-search__pin {
    flex: 0 0 auto;
    display: inline-flex;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--brand-100);
    color: var(--brand-800);
    margin-top: 2px;
}
.place-search__pin svg {
    width: 15px;
    height: 15px;
}
.place-search__text {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
    min-width: 0;
}
.place-search__text strong {
    font-weight: 600;
}
.place-search__text small {
    color: var(--ink-soft);
    font-size: 0.82em;
    /* Wrap the address (up to two lines) instead of truncating with an ellipsis
       so the full location — ward, district, city — stays readable. */
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.place-map,
.live-map {
    margin-top: 10px;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
}

/* ---- Escort live console ------------------------------------------------ */
.live-share-card .card__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.live-share-head {
    display: flex;
    align-items: center;
    gap: 12px;
}
.live-share-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--brand-100);
    color: var(--brand-800);
}
.live-share-icon svg {
    width: 20px;
    height: 20px;
}
.live-share-status {
    margin: 2px 0 0;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.live-share-status::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ink-soft);
    flex: 0 0 auto;
}
.live-share-status--on {
    color: #0a7d55;
}
.live-share-status--on::before {
    background: #0a7d55;
    box-shadow: 0 0 0 4px rgba(10, 125, 85, 0.16);
    animation: live-pulse 1.6s ease-in-out infinite;
}
.live-share-status--pending {
    color: #b7791f;
}
.live-share-status--pending::before {
    background: #b7791f;
}
.live-share-status--error {
    color: var(--danger, #c0392b);
}
.live-share-status--error::before {
    background: var(--danger, #c0392b);
}
.live-share-status--off::before {
    background: var(--ink-soft);
}
@keyframes live-pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.45;
    }
}

.live-status-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.live-activity {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px 16px;
    margin-top: 12px;
    background: var(--paper);
}
.live-activity:first-of-type {
    margin-top: 0;
}
.live-activity__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.live-activity h3 {
    margin: 4px 0 0;
}
.live-activity .muted {
    margin: 4px 0 0;
}
.live-activity__tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78em;
    font-weight: 600;
    color: var(--brand-800);
    background: var(--brand-100);
    padding: 3px 9px;
    border-radius: 999px;
}
.live-activity__tag svg {
    width: 13px;
    height: 13px;
}
.live-activity__actions {
    margin-top: 12px;
}
/* The current leg is the escort's primary focus: emphasise it. */
.live-activity--current {
    border-color: var(--brand-300, var(--brand-100));
    border-left: 4px solid var(--brand-500, #0a7d55);
    background: var(--brand-50, #f3faf6);
}
.live-activity--current h3 {
    font-size: 1.15rem;
}
/* The next leg is highlighted but lighter than the current hero. */
.live-activity--next {
    border-color: var(--brand-200, var(--brand-100));
    border-left: 4px solid var(--brand-300, var(--brand-100));
}
/* Later legs: plain rows. */
.live-activity--upcoming {
    background: transparent;
}
/* Completed legs sink: compact, dimmed, out of the escort's way. */
.live-activity--done {
    background: transparent;
    border-style: dashed;
    opacity: 0.6;
    padding: 10px 14px;
}
.live-activity--done h3 {
    font-size: 0.95rem;
    font-weight: 600;
}
.live-activity--empty .muted {
    margin-top: 4px;
}
/* Sticky live header: position + big ETA stay pinned above the run-sheet so
   the escort always sees where the group is and how far to the destination. */
.live-sticky {
    position: sticky;
    top: 0;
    z-index: 6;
    margin: -4px -2px 8px;
    padding: 8px 2px;
    background: var(--paper);
}
.live-eta-big {
    margin-top: 8px;
    padding: 12px 16px;
    border-radius: 14px;
    background: var(--brand-50, #f3faf6);
    border: 1px solid var(--brand-100, #d7ece2);
    color: var(--brand-900, #063d2c);
}
.live-eta-big__label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--brand-800);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.live-eta-big__label svg {
    width: 15px;
    height: 15px;
}
.live-eta-big__stats {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-top: 4px;
}
.live-eta-big__stat {
    display: flex;
    align-items: baseline;
    gap: 5px;
}
.live-eta-big__stat strong {
    font-size: 2rem;
    line-height: 1;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.live-eta-big__stat small {
    font-size: 0.9rem;
    color: var(--ink-soft);
}
.live-eta-big__sep {
    font-size: 1.4rem;
    color: var(--brand-300, #9cccb6);
}
.live-map-card .eyebrow,
.live-activities-card .eyebrow {
    margin-bottom: 4px;
}
.live-manual {
    margin-top: 4px;
    border-top: 1px dashed var(--line);
    padding-top: 10px;
}
.live-manual > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--brand-800);
    list-style: none;
}
.live-manual > summary::-webkit-details-marker {
    display: none;
}
.live-manual > summary::before {
    content: "＋ ";
}
.live-manual[open] > summary::before {
    content: "− ";
}
.live-manual .place-search {
    margin-top: 8px;
}
.live-map-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 160px;
    padding: 24px;
    text-align: center;
    color: var(--ink-soft);
    border: 1px dashed var(--line);
    border-radius: 14px;
    background: var(--wash, #f6f8f7);
}
.live-map-empty svg {
    width: 26px;
    height: 26px;
    opacity: 0.7;
}
.live-day {
    margin-top: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}
.live-day:first-of-type {
    margin-top: 0;
}
/* Collapsible day header — a full-width tappable summary row. */
.live-day__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    cursor: pointer;
    list-style: none;
    background: var(--wash, #f6f8f7);
    user-select: none;
}
.live-day__summary::-webkit-details-marker {
    display: none;
}
.live-day__summary::after {
    content: "▾";
    margin-left: auto;
    color: var(--ink-soft);
    transition: transform 0.15s ease;
}
.live-day:not([open]) .live-day__summary::after {
    transform: rotate(-90deg);
}
.live-day__label {
    font-weight: 700;
    color: var(--ink);
}
.live-day__count {
    font-size: 0.8rem;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}
/* Legs sit inside the open day with even spacing. */
.live-day[open] > .live-activity {
    margin: 0 12px 12px;
}
.live-day[open] > .live-activity:first-of-type {
    margin-top: 12px;
}

/* Escort console on a phone: the live map is the primary surface, so it sticks
   under the topbar while the run-sheet scrolls; actions are big thumb targets. */
@media (max-width: 720px) {
    .live-share-card .card__body,
    .live-activities-card .card__body,
    .live-map-card .card__body {
        padding: 14px;
    }
    .live-map,
    .live-map-empty {
        height: 280px !important;
    }
    /* Pin the position + ETA below the sticky mobile topbar (62px). */
    .live-sticky {
        top: 62px;
        margin-inline: -14px;
        padding-inline: 14px;
    }
    .live-eta-big__stat strong {
        font-size: 2.2rem;
    }
    .live-share-status {
        font-size: 0.95rem;
    }
    /* Full-width, tall Start/End buttons — easy to hit while moving. */
    .live-activity__actions .button {
        width: 100%;
        min-height: 48px;
        font-size: 1rem;
    }
    .live-activity {
        padding: 13px 14px;
    }
    .live-activity--current h3 {
        font-size: 1.1rem;
    }
    .live-status-line {
        font-size: 0.9rem;
    }
    /* The manual-location search dropdown needs room above the bottom nav. */
    .live-manual .place-search__menu {
        max-height: 240px;
    }
}
.leaflet-container {
    font: inherit;
    border-radius: inherit;
}
/* Clean brand-colored teardrop pin (no external marker images needed). */
.map-pin__dot {
    display: block;
    width: 20px;
    height: 20px;
    border: 3px solid var(--paper);
    border-radius: 50% 50% 50% 0;
    background: var(--brand-700, #087a5a);
    transform: rotate(-45deg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* Accessibility: contrast mode changes text color only. Component borders,
   backgrounds, radii, shadows and spacing remain identical to standard mode. */
html.guest-contrast
    .guest-shell:not(.guest-shell--journey)
    .guest-main
    :is(h1, h2, h3, h4, h5, h6, strong, label, legend, dt),
html.guest-contrast .guest-landing :is(h1, h2, h3, h4, h5, h6, strong, label, legend, dt),
html.guest-contrast
    .drawer--guest-bottom-sheet
    :is(h1, h2, h3, h4, h5, h6, strong, label, legend, dt) {
    color: #082f2a !important;
}

html.guest-contrast
    .guest-shell:not(.guest-shell--journey)
    .guest-main
    :is(p, small, dd, time, li, td, th),
html.guest-contrast .guest-landing :is(p, small, dd, time, li),
html.guest-contrast .drawer--guest-bottom-sheet :is(p, small, dd, time, li) {
    color: #314f4a !important;
}

html.guest-contrast .guest-shell :is(input, select, textarea),
html.guest-contrast .drawer--guest-bottom-sheet :is(input, select, textarea),
html.guest-contrast .guest-profile-setting,
html.guest-contrast .guest-profile-setting-sheet__choice,
html.guest-contrast .guest-nav-item {
    color: #173d37 !important;
}

html.guest-contrast .guest-shell :is(input, textarea)::placeholder,
html.guest-contrast .drawer--guest-bottom-sheet :is(input, textarea)::placeholder,
html.guest-contrast .guest-profile-setting > em,
html.guest-contrast .guest-profile-setting-sheet__choice-copy small {
    color: #49635f !important;
}

/* Preserve light copy that already sits on photos or colored action buttons. */
html.guest-contrast .guest-live-home__intro h1,
html.guest-contrast .guest-profile-hero h1 {
    color: #ffffff !important;
}

html.guest-contrast .guest-live-home__intro p {
    color: rgba(255, 255, 255, 0.98) !important;
}

html.guest-contrast .guest-shell :is(button, a) :is(span, strong, small, p),
html.guest-contrast .drawer--guest-bottom-sheet :is(button, a) :is(span, strong, small, p) {
    color: inherit !important;
}

/* Components that carry their own copy colour rather than inheriting one:
   issue photo captions, Explore tags and visit cards. They were written as
   separate contrast rules elsewhere in this file, which is how contrast mode
   drifted back into changing borders and backgrounds. They belong here, under
   the same text-only rule as everything above. */
html.guest-contrast .issue-photo-add,
html.guest-contrast .issue-photo-status,
html.guest-contrast .explore-tag-chip,
html.guest-contrast .explore-visit__body small {
    color: var(--ink) !important;
}

html.guest-contrast .explore-article__tag,
html.guest-contrast .explore-visit__link {
    color: var(--brand-950) !important;
}

/* The hint is dimmed by opacity in standard mode, which no colour rule can
   reach. Restoring it to full opacity changes how legible the text is, not
   how the component is drawn. */
html.guest-contrast .guest-qr-login__hint {
    opacity: 1;
}

/* Legal confirmation is part of the survey journey, so it uses the same
   full-screen travel surface instead of looking like a modal over Profile. */
.legal-confirm-modal.legal-confirm-modal--survey-surface {
    display: block;
    padding: 0;
    isolation: isolate;
    overflow: hidden;
    color: #153f3a;
    background:
        radial-gradient(circle at 92% 8%, rgba(7, 151, 91, 0.11), transparent 24%),
        radial-gradient(circle at 4% 60%, rgba(225, 178, 91, 0.09), transparent 22%),
        radial-gradient(circle, rgba(7, 132, 81, 0.045) 0 1px, transparent 1.2px) 0 0 / 24px 24px,
        linear-gradient(160deg, #ffffff 0%, #fbfffd 47%, #fffaf4 100%);
}

.legal-confirm-modal--survey-surface::before,
.legal-confirm-modal--survey-surface::after {
    position: fixed;
    z-index: 0;
    pointer-events: none;
    content: "";
}

.legal-confirm-modal--survey-surface::before {
    width: 150px;
    height: 250px;
    inset: 120px -72px auto auto;
    border: 1px solid rgba(7, 132, 81, 0.12);
    border-radius: 100% 0 100% 0;
    background: linear-gradient(
        102deg,
        transparent 49.2%,
        rgba(7, 132, 81, 0.09) 49.7%,
        rgba(7, 132, 81, 0.09) 50.3%,
        transparent 50.8%
    );
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transform: rotate(24deg);
}

.legal-confirm-modal--survey-surface::after {
    width: min(310px, 68vw);
    aspect-ratio: 704 / 354;
    inset: 50% auto auto 50%;
    background: url("/media/guest/asset/logo.png") center / contain no-repeat;
    opacity: 0.07;
    transform: translate(-50%, -50%);
}

.legal-confirm-modal--survey-surface .legal-confirm-modal__dialog {
    width: min(720px, 100%);
    height: 100dvh;
    min-height: 100dvh;
    max-height: none;
    margin: 0 auto;
    padding: calc(68px + env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom));
    z-index: 1;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    box-sizing: border-box;
    overflow: visible;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.legal-confirm-modal--survey-surface .legal-confirm-modal__head {
    position: relative;
    padding: clamp(23px, 5vw, 34px) clamp(20px, 5vw, 34px) 15px;
    border: 0;
    border-radius: 28px 28px 0 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.legal-confirm-modal--survey-surface .legal-confirm-modal__head .eyebrow {
    margin: 0 0 9px;
    color: #078252;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.16em;
}

.legal-confirm-modal--survey-surface .legal-confirm-modal__head h2 {
    margin: 0;
    color: #073f35;
    font-family: var(--font-travel-serif);
    font-size: clamp(22px, 5vw, 28px);
    font-weight: 650;
    line-height: 1.02;
    letter-spacing: -0.035em;
}

.legal-confirm-modal--survey-surface .legal-confirm-modal__head > .icon-button {
    width: 46px;
    height: 46px;
    position: absolute;
    top: -52px;
    right: 0;
    border: 1px solid #e1ebe7;
    border-radius: 16px;
    color: #173f3b;
    background: rgba(251, 253, 252, 0.9);
    box-shadow: 0 7px 18px rgba(25, 70, 60, 0.06);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.legal-confirm-modal--survey-surface .legal-confirm-modal__body {
    min-height: 0;
    max-height: none;
    margin-top: -1px;
    padding: 8px clamp(20px, 5vw, 34px) clamp(23px, 5vw, 34px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 0;
    border-radius: 0 0 28px 28px;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.legal-confirm-modal--survey-surface .legal-summary-cards {
    gap: 10px;
    margin-bottom: 14px;
}

.legal-confirm-modal--survey-surface .legal-summary-cards section {
    padding: 15px;
    border-color: rgba(38, 116, 96, 0.1);
    border-radius: 16px;
    background: linear-gradient(135deg, #f2f7f4, #fffaf3);
}

.legal-confirm-modal--survey-surface .legal-summary-cards strong {
    color: #075e47;
}

.legal-confirm-modal--survey-surface .legal-summary-cards p {
    color: #607b76;
}

.legal-confirm-modal--survey-surface .legal-confirm-modal__form label.choice {
    border-color: rgba(38, 91, 78, 0.18);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 5px 14px rgba(30, 64, 55, 0.035);
}

.legal-confirm-modal--survey-surface .button:not(.button--secondary) {
    border-color: transparent;
    background: linear-gradient(100deg, #07915c, #006b42);
    box-shadow: 0 9px 20px rgba(0, 111, 68, 0.2);
}

.legal-confirm-modal--survey-surface .button--secondary {
    border-color: rgba(34, 100, 83, 0.2);
    color: #315f56;
    background: rgba(255, 255, 255, 0.88);
}

.legal-confirm-modal--survey-surface .legal-modal-details__actions {
    position: relative;
    inset: auto;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid rgba(38, 116, 96, 0.13);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 10px 28px rgba(35, 76, 65, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.legal-confirm-modal--survey-surface
    .legal-confirm-modal__body:has(> [data-legal-details-view]:not([hidden])) {
    padding-bottom: clamp(23px, 5vw, 34px);
}

@media (max-width: 520px) {
    .legal-confirm-modal--survey-surface .legal-confirm-modal__dialog {
        padding: calc(62px + env(safe-area-inset-top)) 13px calc(14px + env(safe-area-inset-bottom));
    }

    .legal-confirm-modal--survey-surface .legal-confirm-modal__head {
        padding: 22px 17px 14px;
        border-radius: 24px 24px 0 0;
    }

    .legal-confirm-modal--survey-surface .legal-confirm-modal__head > .icon-button {
        width: 44px;
        height: 44px;
        top: -46px;
        border-radius: 16px;
    }

    .legal-confirm-modal--survey-surface .legal-confirm-modal__body {
        padding: 8px 17px 22px;
        border-radius: 0 0 24px 24px;
    }
}