:root {
    --ferry-panel: rgba(7, 23, 32, .96);
    --ferry-panel-strong: #071720;
    --ferry-line: rgba(184, 226, 239, .15);
    --ferry-accent: #41d9d0;
    --ferry-text: #eef8fa;
    --ferry-muted: #8ea8b0;
    --ferry-dock-height: 62px;
}

.ferry-app-header .ferry-planner-link {
    padding: 8px 10px;
    color: #a8c0c7;
    border: 1px solid rgba(181, 229, 241, .16);
    border-radius: 10px;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .08em;
    text-decoration: none;
}
.ferry-app-header .ferry-planner-link:hover { color: #fff; border-color: rgba(65, 217, 208, .5); }
.ferry-app-header .stop-suggestions {
    top: calc(100% + 8px);
    min-width: 100%;
    margin: 0;
    color: var(--ferry-text);
    background: rgba(7, 18, 27, .98);
    border-color: var(--ferry-line);
    box-shadow: 0 20px 56px rgba(0, 0, 0, .42);
}
.ferry-app-header .stop-suggestions button { color: var(--ferry-text); }
.ferry-app-header .stop-suggestions button:hover,
.ferry-app-header .stop-suggestions button:focus { background: rgba(65, 217, 208, .11); }
.ferry-app-header .stop-suggestions small { color: var(--ferry-muted); }

body.ferries-map-page { height: var(--ferry-viewport-height, 100dvh); overflow: hidden; color: var(--ferry-text); background: #071720; }
.ferries-map-page > main { height: var(--ferry-app-height, calc(100dvh - 56px)); }
.ferry-map-app { position: relative; height: 100%; min-height: 360px; isolation: isolate; overflow: hidden; background: #0a2832; }

.transit-explorer.is-map-app { position: absolute; z-index: 1; inset: 0; max-width: none; margin: 0; padding: 0; }
.transit-explorer.is-map-app .explorer-heading,
.transit-explorer.is-map-app .explorer-toolbar,
.transit-explorer.is-map-app .map-layer-switcher { display: none; }
.transit-explorer.is-map-app .explorer-frame { display: block; width: 100%; height: 100%; min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
.transit-explorer.is-map-app .explorer-map-wrap,
.transit-explorer.is-map-app .transit-map { width: 100%; height: 100%; }
.transit-explorer.is-map-app .map-pulse-status { right: 14px; bottom: 14px; background: rgba(7, 18, 27, .92); border-color: var(--ferry-line); }
.transit-explorer.is-map-app .explorer-panel {
    position: absolute;
    z-index: 720;
    top: 14px;
    right: 14px;
    bottom: 14px;
    width: min(410px, calc(100% - 28px));
    height: auto;
    min-height: 0;
    padding: 26px;
    color: var(--ferry-text);
    background: radial-gradient(circle at 100% 0, rgba(65, 217, 208, .1), transparent 34%), var(--ferry-panel-strong);
    border: 1px solid var(--ferry-line);
    border-radius: 18px;
    box-shadow: 0 18px 55px rgba(0, 0, 0, .42);
    opacity: 0;
    pointer-events: none;
    transform: translateX(calc(100% + 28px));
    transition: opacity .2s ease, transform .25s ease;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}
.transit-explorer.is-map-app.is-panel-open .explorer-panel { opacity: 1; pointer-events: auto; transform: none; }

.ferry-map-sidebar {
    position: absolute;
    z-index: 710;
    top: 14px;
    bottom: 14px;
    left: 14px;
    width: min(430px, 36vw);
    min-width: 340px;
    padding: 20px 18px 18px;
    overflow: auto;
    color: var(--ferry-text);
    background: var(--ferry-panel);
    border: 1px solid var(--ferry-line);
    border-radius: 18px;
    box-shadow: 0 18px 55px rgba(0, 0, 0, .42);
    backdrop-filter: blur(14px) saturate(125%);
    scrollbar-width: thin;
    scrollbar-color: rgba(123, 164, 176, .35) transparent;
    transition: opacity .2s ease, transform .25s ease;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}
.ferry-map-sidebar.is-hidden { opacity: 0; pointer-events: none; transform: translateX(calc(-100% - 28px)); }
.ferry-sidebar-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.ferry-sidebar-head .eyebrow { margin-bottom: 4px; color: var(--ferry-accent); font-size: 10px; }
.ferry-sidebar-head h1 { margin: 0; font-size: 25px; line-height: 1.15; letter-spacing: -.035em; }
.ferry-sidebar-close {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    display: grid;
    padding: 0;
    color: #d7e7ec;
    background: rgba(255, 255, 255, .055);
    border: 1px solid var(--ferry-line);
    border-radius: 10px;
    cursor: pointer;
    font-size: 22px;
    place-items: center;
}
.ferry-sidebar-intro { margin: 10px 0 15px; color: var(--ferry-muted); font-size: 11px; line-height: 1.5; }

.journey-search.ferry-panel-search {
    display: flex;
    max-width: none;
    margin: 0;
    padding: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
    color: var(--ferry-text);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.ferry-panel-search label {
    min-height: 61px;
    gap: 2px;
    padding: 9px 12px;
    background: rgba(0, 0, 0, .2);
    border: 1px solid var(--ferry-line);
    border-radius: 12px;
}
.ferry-panel-search label:focus-within { border-color: rgba(65, 217, 208, .58); box-shadow: 0 0 0 3px rgba(65, 217, 208, .08); }
.ferry-panel-search label > span { color: #78949c; font-size: 8px; }
.ferry-panel-search input { color: var(--ferry-text); font-size: 13px; }
.ferry-panel-search input::placeholder { color: #78929a; }
.ferry-panel-search .journey-arrow { position: absolute; z-index: 1; top: 51px; right: 16px; color: var(--ferry-accent); font-size: 13px; }
.ferry-panel-search > button {
    min-height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2px;
    padding: 0 15px;
    color: #05201e;
    background: var(--ferry-accent);
    border-radius: 11px;
}
.ferry-panel-search .stop-suggestions { top: calc(100% + 5px); color: var(--ferry-text); background: #071720; border-color: var(--ferry-line); }
.ferry-panel-search .stop-suggestions button { color: var(--ferry-text); }
.ferry-panel-search .stop-suggestions button:hover,
.ferry-panel-search .stop-suggestions button:focus { background: rgba(65, 217, 208, .1); }
.ferry-panel-search .stop-suggestions small { color: var(--ferry-muted); }
.ferry-map-sidebar .search-status { min-height: 14px; margin: 5px 0 2px; color: #ffc1b8; font-size: 10px; }

.ferry-panel-section { margin: 15px -18px 0; border-top: 1px solid var(--ferry-line); }
.ferry-panel-section-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 18px 8px; color: #8da7af; font-size: 9px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.ferry-panel-section-head a { color: var(--ferry-accent); font-size: 8px; text-decoration: none; }
.ferry-network-list > a,
.ferry-line-list > a {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 49px;
    padding: 8px 18px;
    color: var(--ferry-text);
    border-bottom: 1px solid rgba(184, 226, 239, .08);
    text-decoration: none;
}
.ferry-network-list > a:hover,
.ferry-network-list > a.is-current,
.ferry-line-list > a:hover { background: linear-gradient(90deg, rgba(65, 217, 208, .12), rgba(65, 217, 208, .02)); }
.ferry-network-list > a.is-current { box-shadow: inset 3px 0 var(--ferry-accent); }
.ferry-network-list a > i { width: 9px; height: 9px; background: #667d84; border: 2px solid rgba(255, 255, 255, .2); border-radius: 50%; }
.ferry-network-list a.is-live > i { background: #39e3a4; box-shadow: 0 0 12px rgba(57, 227, 164, .75); }
.ferry-network-list a > span { display: flex; min-width: 0; flex-direction: column; }
.ferry-network-list strong { font-size: 12px; }
.ferry-network-list small { overflow: hidden; margin-top: 2px; color: var(--ferry-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.ferry-network-list b { color: var(--ferry-accent); font-size: 8px; letter-spacing: .07em; }
.ferry-line-list > a { grid-template-columns: 42px minmax(0, 1fr) auto; font-size: 10px; }
.ferry-line-list .route-badge { font-size: 9px; }
.ferry-line-list b { color: var(--ferry-muted); }

.ferry-map-dock {
    position: absolute;
    z-index: 760;
    bottom: 14px;
    left: 50%;
    height: var(--ferry-dock-height);
    display: grid;
    grid-template-columns: repeat(3, minmax(95px, 1fr));
    padding: 5px;
    color: var(--ferry-muted);
    background: rgba(7, 18, 27, .95);
    border: 1px solid var(--ferry-line);
    border-radius: 17px;
    box-shadow: 0 14px 38px rgba(0, 0, 0, .4);
    backdrop-filter: blur(12px);
    transform: translateX(-50%);
}
.ferry-map-dock button { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 13px; color: inherit; background: transparent; border: 0; border-radius: 12px; cursor: pointer; font-size: 9px; font-weight: 750; }
.ferry-map-dock button:hover,
.ferry-map-dock button.is-active { color: #eef8fa; background: rgba(65, 217, 208, .13); }
.ferry-map-dock svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ferry-map-dock i { display: inline-grid; min-width: 17px; height: 17px; margin-left: 2px; color: #05201e; background: var(--ferry-accent); border-radius: 9px; font-size: 8px; font-style: normal; place-items: center; }

.stop-panel-head h3 { margin-bottom: 5px; font-size: clamp(25px, 2.2vw, 34px); }
.stop-location-meta { margin: 0; color: var(--ferry-muted); font-size: 10px; }
.stop-route-badges { display: flex; min-height: 28px; flex-wrap: wrap; gap: 6px; margin: 13px 0 10px; }
.stop-route-badges .route-badge { min-width: 32px; padding: 5px 7px; font-size: 9px; }
.stop-route-badges > span:not(.route-badge) { color: var(--ferry-muted); font-size: 10px; }
.stop-board-freshness { display: flex; align-items: center; gap: 7px; min-height: 31px; padding: 7px 9px; color: #8da6ad; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.07); border-radius: 9px; font-size: 8px; }
.stop-board-freshness i { width: 7px; height: 7px; flex: 0 0 auto; background: #6f858b; border-radius: 50%; }
.stop-board-freshness strong { color: #c4d6da; font-size: 9px; }
.stop-board-freshness span { margin-left: auto; }
.stop-board-freshness.is-live { color: #8bcfbd; background: rgba(57,227,164,.075); border-color: rgba(57,227,164,.14); }
.stop-board-freshness.is-live i { background: #39e3a4; box-shadow: 0 0 10px rgba(57,227,164,.7); }
.stop-board-freshness.is-live strong { color: #8ff0cb; }
.stop-map-instruction { display: flex; align-items: center; gap: 10px; margin-top: 9px; padding: 9px 10px; color: #bcd0d4; background: linear-gradient(90deg, rgba(65,217,208,.12), rgba(65,217,208,.035)); border: 1px solid rgba(65,217,208,.16); border-radius: 9px; }
.stop-map-instruction > i { display: grid; width: 24px; height: 24px; flex: 0 0 auto; color: #052a2c; background: var(--ferry-accent); border-radius: 50%; font-size: 9px; font-style: normal; font-weight: 900; place-items: center; }
.stop-map-instruction span { display: flex; flex-direction: column; font-size: 8px; }
.stop-map-instruction strong { margin-bottom: 1px; color: #e8f7f8; font-size: 9px; }
.stop-board-section { margin-top: 17px; }
.stop-board-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.stop-board-title .eyebrow { margin: 0; color: #8ca5ab; font-size: 8px; }
.stop-board-title > span { display: grid; min-width: 19px; height: 19px; color: #06262a; background: var(--ferry-accent); border-radius: 10px; font-size: 8px; font-weight: 900; place-items: center; }
.stop-board-row { position: relative; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 9px; min-height: 60px; padding: 9px 8px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.07); border-radius: 10px; }
.stop-board-row + .stop-board-row { margin-top: 6px; }
.stop-board-destination { display: flex; min-width: 0; flex-direction: column; }
.stop-board-destination strong { overflow: hidden; color: #edf7f8; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.stop-board-destination small { overflow: hidden; margin-top: 2px; color: #78939a; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.stop-board-times { display: flex; align-items: center; gap: 10px; }
.stop-board-times > * { display: flex; min-width: 42px; flex-direction: column; color: #b6c8cc; font-size: 10px; font-style: normal; }
.stop-board-times small { margin-bottom: 2px; color: #718c93; font-size: 6px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.stop-board-times strong.is-live { color: var(--ferry-accent); }
.stop-board-times em { color: #80989e; font-size: 8px; font-style: normal; }
.stop-board-delay { position: absolute; right: 8px; bottom: 4px; padding: 1px 4px; color: #9fb5ba; background: transparent; border-radius: 4px; font-size: 6px; font-weight: 850; }
.stop-board-delay.is-late { color: #ffd26e; background: rgba(255,195,68,.08); }
.stop-board-delay.is-early { color: #86dff0; }
.stop-board-delay.is-on-time { color: #72e1b7; }
.stop-board-row.is-cancelled { opacity: .62; }
.stop-board-empty { margin: 0; padding: 12px; color: #789199; background: rgba(255,255,255,.035); border-radius: 9px; font-size: 9px; }
.stop-approaching-vessel { width: 100%; display: flex; align-items: center; gap: 11px; margin-top: 10px; padding: 11px; color: #e9f8f8; background: rgba(65,217,208,.09); border: 1px solid rgba(65,217,208,.22); border-radius: 11px; text-align: left; }
button.stop-approaching-vessel { cursor: pointer; }
.stop-approaching-vessel > i { width: 11px; height: 11px; flex: 0 0 auto; background: #41d9d0; border: 3px solid #eaffff; border-radius: 50%; box-shadow: 0 0 0 4px rgba(65,217,208,.15); }
.stop-approaching-vessel > span { display: flex; min-width: 0; flex-direction: column; }
.stop-approaching-vessel small { color: #7de5dd; font-size: 7px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.stop-approaching-vessel strong { margin-top: 2px; font-size: 11px; }
.stop-approaching-vessel em { margin-top: 2px; color: #9bb5ba; font-size: 8px; font-style: normal; }
.stop-approaching-vessel.is-missing { color: #9cb0b5; background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.08); }
.stop-approaching-vessel.is-missing > i { background: #6e858c; border-color: #a3b4b8; box-shadow: none; }
.stop-board-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 14px; padding: 4px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); border-radius: 10px; }
.stop-board-tabs button { min-height: 34px; color: #819ba2; background: transparent; border: 0; border-radius: 7px; cursor: pointer; font-size: 8px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.stop-board-tabs button.is-active { color: #05272d; background: var(--ferry-accent); }
.stop-board-section[hidden] { display: none; }

.map-journey-stop { position: relative; display: grid; width: 24px; height: 24px; color: #b20f30; background: #fff; border: 3px solid #d91f3d; border-radius: 50% 50% 50% 8px; box-shadow: 0 5px 16px rgba(70,0,15,.38); box-sizing: border-box; font-size: 8px; font-weight: 950; transform: rotate(-45deg); place-items: center; }
.map-journey-stop::before { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(217,31,61,.3); border-radius: 50%; }
.map-journey-stop.is-start,
.map-journey-stop.is-destination { width: 34px; height: 34px; color: #fff; background: #d91f3d; border: 4px solid #fff; font-size: 11px; box-shadow: 0 0 0 4px rgba(217,31,61,.3), 0 7px 20px rgba(70,0,15,.46); }
.map-journey-stop.is-destination { background: #a9082a; }
.map-journey-stop.is-start::before,
.map-journey-stop.is-destination::before { display: none; }
.map-journey-stop { line-height: 1; }
.map-journey-stop > * { transform: rotate(45deg); }
.map-journey-stop.is-start,
.map-journey-stop.is-destination,
.map-journey-stop.is-intermediate { text-indent: 0; }
.smp-actv-icon { background: none !important; border: 0 !important; }
.smp-actv-marker { --actv-bearing: 0deg; position: relative; display: block; width: 48px; height: 48px; filter: drop-shadow(0 3px 4px rgba(0,0,0,.5)); }
.smp-actv-ferry { position: absolute; inset: 3px; width: 42px; height: 42px; overflow: visible; transform: rotate(var(--actv-bearing)); transform-origin: center; transition: transform .35s linear; }
.smp-actv-hull { fill: #087f7c; stroke: #f4ffff; stroke-width: 2.2; stroke-linejoin: round; }
.smp-actv-deck { fill: #dffbfa; stroke: #075f5d; stroke-width: 1.3; }
.smp-actv-window { fill: #075f5d; }
.smp-actv-stern { fill: none; stroke: #f4ffff; stroke-width: 1.7; stroke-linecap: round; }
.smp-actv-marker b { position: absolute; right: -3px; bottom: -1px; display: grid; min-width: 22px; height: 20px; padding: 0 4px; color: #fff; background: #075f5d; border: 2px solid #fff; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,.38); font: 800 10px/1 system-ui, sans-serif; letter-spacing: -.03em; place-items: center; }
.ferry-live-marker.is-selected { filter: drop-shadow(0 0 8px rgba(65,217,208,.95)) drop-shadow(0 3px 5px rgba(0,0,0,.65)); }
.ferry-live-marker.is-route-vessel { filter: drop-shadow(0 0 9px rgba(255,61,91,.95)) drop-shadow(0 3px 5px rgba(0,0,0,.65)); }
.ferry-live-marker.is-route-vessel .smp-actv-hull { fill: #b20f30; }
.ferry-live-marker.is-route-vessel .smp-actv-deck { fill: #ffe3e8; stroke: #78051f; }
.ferry-live-marker.is-route-vessel .smp-actv-window { fill: #78051f; }
.ferry-live-marker.is-route-vessel b { background: #d91f3d; }
.journey-live-vessel { display: flex; width:100%; align-items: center; gap: 10px; margin: -7px 0 18px; padding: 11px 12px; color: #dcebed; background: rgba(217,31,61,.13); border: 1px solid rgba(255,80,105,.25); border-radius: 10px; text-align:left; }
button.journey-live-vessel { cursor:pointer; }
.journey-live-vessel > i { width: 12px; height: 12px; flex: 0 0 auto; background: #ef3655; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 4px rgba(239,54,85,.18); }
.journey-live-vessel > span { display: flex; min-width: 0; flex-direction: column; }
.journey-live-vessel small { color: #ff8999; font-size: 7px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.journey-live-vessel strong { margin-top: 2px; font-size: 9px; }
.journey-live-vessel.is-waiting { color: #a8bdc2; background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
.journey-live-vessel.is-waiting > i { background: #6e858c; box-shadow: none; }
.journey-live-vessel.is-waiting small { color: #7f989e; }

@media (max-width: 900px) {
    .ferry-app-header .ferry-planner-link { display: none; }
    .ferry-map-sidebar { width: min(390px, calc(100% - 28px)); min-width: 0; }
    .transit-explorer.is-map-app .explorer-panel { width: min(390px, calc(100% - 28px)); }
}

@media (max-width: 720px) {
    body.ferries-map-page { height: auto; min-height: var(--ferry-viewport-height, 100dvh); overflow-x: hidden; overflow-y: auto; }
    .ferries-map-page > main { height: auto; min-height: var(--ferry-app-height, calc(100dvh - 56px)); }
    .ferry-map-app { display: flex; height: auto; min-height: 0; flex-direction: column; overflow: visible; background: #071720; }
    .ferry-map-sidebar {
        position: relative;
        z-index: 3;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        width: auto;
        height: auto;
        max-height: none;
        min-width: 0;
        padding: 16px 14px 14px;
        overflow: visible;
        border: 0;
        border-bottom: 1px solid var(--ferry-line);
        border-radius: 0 0 20px 20px;
        box-shadow: 0 12px 30px rgba(0,0,0,.25);
        opacity: 1;
        transform: none !important;
    }
    .ferry-sidebar-head { padding: 0; }
    .ferry-sidebar-head h1 { font-size: clamp(25px, 8vw, 36px); }
    .ferry-sidebar-close,
    .ferry-sidebar-intro,
    .ferry-panel-section,
    .ferry-map-dock { display: none; }
    .journey-search.ferry-panel-search { margin-top: 11px; }
    .ferry-panel-search label { min-height: 58px; padding: 8px 12px; }
    .ferry-panel-search input { font-size: 16px; }
    .ferry-panel-search .journey-arrow { top: 48px; }
    .ferry-panel-search > button { min-height: 50px; font-size: 11px; }
    .transit-explorer.is-map-app {
        position: relative;
        z-index: 1;
        inset: auto;
        order: 2;
        height: auto;
        overflow: visible;
    }
    .transit-explorer.is-map-app .explorer-frame { display: flex; height: auto; flex-direction: column; overflow: visible; }
    .transit-explorer.is-map-app .explorer-map-wrap { height: clamp(360px, 51vh, 510px); flex: 0 0 auto; }
    .transit-explorer.is-map-app .transit-map { height: 100%; }
    .transit-explorer.is-map-app .explorer-panel,
    .transit-explorer.is-map-app.is-showing-vessel .explorer-panel {
        position: relative;
        z-index: 2;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        width: calc(100% - 16px);
        height: auto;
        max-height: none;
        margin: 8px 8px calc(18px + env(safe-area-inset-bottom, 0px));
        padding: 18px 16px;
        overflow: visible;
        border-radius: 16px;
        box-shadow: 0 12px 32px rgba(0,0,0,.28);
        opacity: 0;
        transform: translateY(12px);
    }
    .transit-explorer.is-map-app.is-panel-open .explorer-panel { opacity: 1; transform: none; }
    .transit-explorer.is-map-app:not(.is-panel-open) .explorer-panel { display: none; }
    .transit-explorer.is-map-app .map-pulse-status { right: 8px; bottom: 8px; left: 8px; justify-content: center; }
    .ferry-app-header .stop-suggestions { position: fixed; top: 62px; right: 8px; left: 8px; max-height: 60vh; }
}

@media (max-width: 420px) {
    .ferry-app-header .smp-live { gap: 4px; }
    .ferry-app-header [data-header-live-status] { display: none; }
    .transit-explorer.is-map-app .explorer-map-wrap { height: clamp(350px, 49vh, 460px); }
}

.journey-time-mode { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:0 0 3px; padding:4px; border:1px solid rgba(255,255,255,.08); border-radius:10px; background:rgba(255,255,255,.035); }
.journey-time-mode legend { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.journey-time-mode label { min-height:0 !important; padding:0 !important; border:0 !important; background:transparent !important; }
.journey-time-mode input { position:absolute; opacity:0; pointer-events:none; }
.journey-time-mode span { display:block; padding:7px 8px; color:#769198; border-radius:7px; font-size:8px; font-weight:850; text-align:center; text-transform:uppercase; cursor:pointer; }
.journey-time-mode input:checked + span { color:#05272d; background:var(--ferry-accent); }
.journey-when { display:grid; grid-template-columns:1fr 112px; gap:6px; }
.ferry-panel-search .journey-when label { min-height:45px; }
.journey-quick-times { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
.ferry-panel-search .journey-quick-times button { min-height:30px; padding:0 5px; color:#839ca2; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:7px; font-size:8px; }
.ferry-panel-search .journey-quick-times button.is-active { color:#06272d; background:var(--ferry-accent); border-color:var(--ferry-accent); }
.journey-live-vessel p { margin:3px 0 0; color:#b7cbd0; font-size:8px; }
.journey-alternatives { display:flex; gap:6px; margin:10px 0 14px; padding-bottom:3px; overflow-x:auto; scrollbar-width:none; }
.journey-alternatives::-webkit-scrollbar { display:none; }
.journey-alternatives button { min-width:100px; padding:8px 9px; color:#9bb2b7; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.08); border-radius:9px; text-align:left; cursor:pointer; }
.journey-alternatives button.is-active { color:#ecffff; background:rgba(53,212,204,.13); border-color:rgba(53,212,204,.38); }
.journey-alternatives small,.journey-alternatives strong { display:block; }
.journey-alternatives small { color:var(--ferry-accent); font-size:7px; text-transform:uppercase; }
.journey-alternatives strong { margin-top:3px; font-size:10px; }
.journey-navigation { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; margin-top:14px; }
.journey-navigation button { padding:9px 6px; color:#b7cbd0; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.08); border-radius:8px; font-size:8px; font-weight:850; cursor:pointer; }
.journey-alert { margin:10px 0; padding:10px 11px; color:#ffe7b1; background:rgba(255,174,46,.1); border:1px solid rgba(255,174,46,.25); border-radius:9px; }
.journey-alert small,.journey-alert strong,.journey-alert span { display:block; }
.journey-alert small { color:#ffc45d; font-size:7px; font-weight:900; text-transform:uppercase; }
.journey-alert strong { margin-top:3px; font-size:10px; }
.journey-alert span { margin-top:3px; color:#c7b990; font-size:8px; }
.map-journey-legs article.is-walk .leg-index { color:#092a31; background:#bed0d3; }
.map-journey-legs article.is-walk { border-style:dashed; }
.route-refresh-note { margin:0 0 10px; padding:7px 9px; color:#06272d; background:#ffd166; border-radius:7px; font-size:8px; font-weight:850; }
.journey-options { margin: 2px 0; padding: 0; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.07); border-radius: 10px; }
.journey-options > summary,
.journey-detail-disclosure > summary,
.vessel-tech-disclosure > summary { display: flex; align-items: center; justify-content: space-between; padding: 10px 11px; color: #c8dadd; cursor: pointer; font-size: 8px; font-weight: 850; list-style: none; }
.journey-options > summary::-webkit-details-marker,
.journey-detail-disclosure > summary::-webkit-details-marker,
.vessel-tech-disclosure > summary::-webkit-details-marker { display: none; }
.journey-options > summary::after,
.journey-detail-disclosure > summary::after,
.vessel-tech-disclosure > summary::after { content: "+"; color: var(--ferry-accent); font-size: 14px; }
.journey-options[open] > summary::after,
.journey-detail-disclosure[open] > summary::after,
.vessel-tech-disclosure[open] > summary::after { content: "−"; }
.journey-options > summary small { margin-left: auto; margin-right: 8px; color: #7f989e; font-size: 7px; }
.journey-options > :not(summary) { margin-right: 7px; margin-left: 7px; }
.journey-options > :last-child { margin-bottom: 7px; }
.journey-detail-disclosure,
.vessel-tech-disclosure { margin-top: 10px; border: 1px solid rgba(255,255,255,.075); border-radius: 9px; }
.journey-detail-disclosure .map-journey-legs { margin: 0 8px 8px; }
.vessel-tech-disclosure .vessel-tech { margin: 0 8px 8px; }

@media (max-width: 720px) {
    .journey-alternatives { position:sticky; z-index:2; top:-1px; padding:7px 0; background:#071923; }
}

/* Timetable-first entry: the map is an optional journey tool, never the landing surface. */
body.ferries-map-page { height: auto; min-height: 100dvh; overflow-x: hidden; overflow-y: auto; background: #071720; }
.ferries-map-page > main { height: auto; min-height: calc(100dvh - 56px); }
.ferry-map-app.is-timetable-first { height: auto; min-height: calc(100dvh - 56px); padding: 26px 18px 56px; overflow: visible; background: radial-gradient(circle at 50% -20%, rgba(65,217,208,.14), transparent 38%), #071720; }
.ferry-timetable-shell { width: min(100%, 760px); margin: 0 auto; }
.ferry-map-app.is-timetable-first .ferry-map-sidebar { position: relative; z-index: 20; inset: auto; width: 100%; min-width: 0; padding: 26px; overflow: visible; background: linear-gradient(145deg, rgba(12,37,47,.98), rgba(6,22,31,.98)); border-radius: 22px; box-shadow: 0 24px 64px rgba(0,0,0,.34); }
.ferry-map-app.is-timetable-first .ferry-sidebar-head h1 { font-size: clamp(31px, 6vw, 47px); letter-spacing: -.045em; }
.ferry-map-app.is-timetable-first .ferry-sidebar-intro { max-width: 520px; margin: 8px 0 18px; color: #9fb5bb; font-size: 12px; }
.ferry-region-facts { display: flex; flex-wrap: wrap; gap: 7px; margin: -4px 0 17px; }
.ferry-region-facts span { display: inline-flex; min-height: 27px; align-items: center; gap: 6px; padding: 4px 9px 4px 5px; color: #a9c0c5; background: rgba(255,255,255,.035); border: 1px solid rgba(184,226,239,.1); border-radius: 999px; font-size: 8px; font-weight: 800; }
.ferry-region-facts i { display: grid; min-width: 20px; height: 18px; padding: 0 3px; color: #06272d; background: #a9ddd9; border-radius: 999px; font-size: 7px; font-style: normal; letter-spacing: .03em; place-items: center; }
.ferry-region-facts .is-source { color: #b8eeea; background: rgba(65,217,208,.07); border-color: rgba(65,217,208,.17); }
.ferry-region-facts .is-source i { background: var(--ferry-accent); }
.ferry-map-app.is-timetable-first .ferry-panel-search label { min-height: 70px; padding: 11px 15px; border-radius: 15px; }
.ferry-map-app.is-timetable-first .ferry-panel-search label > span { font-size: 9px; }
.ferry-map-app.is-timetable-first .ferry-panel-search input { font-size: 17px; font-weight: 750; }
.ferry-map-app.is-timetable-first .ferry-panel-search .journey-arrow { top: 60px; right: 20px; }
.ferry-map-app.is-timetable-first .ferry-panel-search > button[type="submit"] { min-height: 54px; margin-top: 5px; border-radius: 13px; font-size: 12px; font-weight: 900; }
.ferry-map-app.is-timetable-first .ferry-panel-search > .ferry-map-choice { min-height: 44px; justify-content: center; gap: 8px; margin-top: 0; color: #a9c3c8; background: transparent; border: 1px solid rgba(184,226,239,.13); font-size: 9px; }
.ferry-map-app.is-timetable-first .ferry-panel-search > .ferry-map-choice:hover { color: #eaffff; background: rgba(65,217,208,.07); }

.ferry-quick-start { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(184,226,239,.12); }
.ferry-quick-start-head .eyebrow { margin: 0 0 3px; color: var(--ferry-accent); font-size: 8px; }
.ferry-quick-start-head h2 { margin: 0 0 11px; color: #edf8f9; font-size: 18px; }
.ferry-nearby-button { width: 100%; display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 10px; min-height: 62px; padding: 10px 12px; color: #e8f6f7; background: rgba(255,255,255,.045); border: 1px solid rgba(184,226,239,.1); border-radius: 13px; cursor: pointer; text-align: left; }
.ferry-nearby-button > span:first-child { display: grid; width: 34px; height: 34px; color: #05272d; background: var(--ferry-accent); border-radius: 50%; font-size: 19px; place-items: center; }
.ferry-nearby-button > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; }
.ferry-nearby-button strong { font-size: 11px; }
.ferry-nearby-button small { margin-top: 3px; color: #809aa1; font-size: 8px; }
.ferry-nearby-button b { color: var(--ferry-accent); font-size: 16px; }
.ferry-recent-trips { margin-top: 15px; }
.ferry-recent-trips > p { margin: 0 0 7px; color: #718c93; font-size: 8px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.ferry-recent-trips button { width: 100%; display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 9px 12px; color: #dcebed; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.065); border-radius: 11px; cursor: pointer; text-align: left; }
.ferry-recent-trips button + button { margin-top: 6px; }
.ferry-recent-trips button span { display: flex; min-width: 0; align-items: center; gap: 7px; }
.ferry-recent-trips button strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.ferry-recent-trips button small { color: #66838a; font-size: 8px; }
.ferry-recent-trips button b { color: var(--ferry-accent); }
.ferry-secondary-links { display: flex; justify-content: center; gap: 8px; margin-top: 18px; color: #506e76; font-size: 8px; }
.ferry-secondary-links a { color: #7f9ba2; text-decoration: none; }

.ferry-map-app.is-timetable-first .transit-explorer.is-map-app { position: relative; z-index: 10; inset: auto; margin-top: 14px; overflow: visible; }
.ferry-map-app.is-timetable-first .transit-explorer.is-map-app .explorer-frame { display: flex; height: auto; flex-direction: column; gap: 12px; overflow: visible; }
.ferry-map-app.is-timetable-first .transit-explorer.is-map-app .explorer-map-wrap { position: relative; order: 2; height: min(62vh, 540px); min-height: 390px; overflow: hidden; border: 1px solid rgba(184,226,239,.14); border-radius: 18px; box-shadow: 0 20px 55px rgba(0,0,0,.28); }
.ferry-map-app.is-timetable-first .transit-explorer.is-map-app.is-map-collapsed .explorer-map-wrap { display: none; }
.ferry-map-app.is-timetable-first .transit-explorer.is-map-app .explorer-panel,
.ferry-map-app.is-timetable-first .transit-explorer.is-map-app.is-showing-vessel .explorer-panel { position: relative; z-index: 1; inset: auto; order: 1; width: 100%; max-height: none; padding: 22px; overflow: visible; border-radius: 18px; opacity: 0; pointer-events: none; transform: translateY(8px); }
.ferry-map-app.is-timetable-first .transit-explorer.is-map-app.is-panel-open .explorer-panel { opacity: 1; pointer-events: auto; transform: none; }
.ferry-map-app.is-timetable-first .transit-explorer.is-map-app:not(.is-panel-open) .explorer-panel { display: none; }
.ferry-map-app.is-timetable-first .transit-explorer.is-map-app .transit-map { height: 100%; }
.ferry-map-app.is-timetable-first .transit-explorer.is-map-app .explorer-toolbar { top: 66px; right: 10px; left: 10px; display: flex; width: auto; }
.ferry-context-map-head { position: absolute; z-index: 650; top: 10px; right: 10px; left: 10px; min-height: 47px; display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 8px 13px; color: #edf8f9; background: rgba(7,23,32,.94); border: 1px solid rgba(184,226,239,.16); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.ferry-context-map-head > div { display: flex; min-width: 0; flex-direction: column; }
.ferry-context-map-head .eyebrow { margin: 0 0 2px; color: var(--ferry-accent); font-size: 7px; }
.ferry-context-map-head strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.ferry-context-map-head button { width: 32px; height: 32px; flex: 0 0 auto; color: #d8e8eb; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); border-radius: 9px; cursor: pointer; font-size: 18px; }
.panel-map-action { width: 100%; min-height: 42px; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 0 0; color: #9de8e2; background: rgba(65,217,208,.07); border: 1px solid rgba(65,217,208,.18); border-radius: 9px; cursor: pointer; font-size: 8px; font-weight: 900; }

@media (max-width: 720px) {
    .ferry-map-app.is-timetable-first { min-height: calc(100dvh - 56px); padding: 0 0 calc(24px + env(safe-area-inset-bottom, 0px)); }
    .ferry-timetable-shell { width: 100%; }
    .ferry-map-app.is-timetable-first .ferry-map-sidebar { padding: 17px 14px 18px; border: 0; border-bottom: 1px solid rgba(184,226,239,.12); border-radius: 0 0 21px 21px; box-shadow: 0 14px 34px rgba(0,0,0,.28); }
    .ferry-map-app.is-timetable-first .ferry-sidebar-head h1 { font-size: clamp(31px, 9vw, 39px); }
    .ferry-map-app.is-timetable-first .ferry-sidebar-intro { display: block; margin: 5px 0 14px; font-size: 10px; }
    .ferry-region-facts { gap: 5px; margin: -2px 0 13px; }
    .ferry-region-facts span { min-height: 25px; padding-right: 7px; font-size: 7px; }
    .ferry-map-app.is-timetable-first .ferry-panel-search label { min-height: 64px; padding: 10px 12px; }
    .ferry-map-app.is-timetable-first .ferry-panel-search input { font-size: 16px; }
    .ferry-map-app.is-timetable-first .ferry-panel-search .journey-arrow { top: 55px; }
    .ferry-map-app.is-timetable-first .ferry-panel-search .stop-suggestions { z-index: 1200; max-height: min(48vh, 390px); overflow-y: auto; }
    .ferry-quick-start { margin-top: 16px; padding-top: 15px; }
    .ferry-quick-start-head h2 { font-size: 16px; }
    .ferry-map-app.is-timetable-first .transit-explorer.is-map-app { margin: 10px 8px 0; }
    .ferry-map-app.is-timetable-first .transit-explorer.is-map-app .explorer-map-wrap { height: min(66vh, 520px); min-height: 410px; border-radius: 16px; }
    .ferry-map-app.is-timetable-first .transit-explorer.is-map-app .explorer-panel,
    .ferry-map-app.is-timetable-first .transit-explorer.is-map-app.is-showing-vessel .explorer-panel { width: 100%; margin: 0; padding: 18px 14px; border-radius: 15px; }
    .ferry-map-app.is-timetable-first .transit-explorer.is-map-app .explorer-toolbar { top: 64px; overflow-x: auto; }
    .ferry-context-map-head { top: 8px; right: 8px; left: 8px; }
    .ferry-map-app.is-timetable-first .map-pulse-status { right: 8px; bottom: 8px; left: 8px; }
}

@media (max-width: 360px) {
    .ferry-map-app.is-timetable-first .ferry-map-sidebar { padding-right: 10px; padding-left: 10px; }
    .ferry-map-app.is-timetable-first .ferry-sidebar-head h1 { font-size: 30px; }
    .ferry-map-app.is-timetable-first .ferry-panel-search label { min-height: 60px; }
    .ferry-nearby-button small { max-width: 220px; }
}