/* Tokens live in tokens.css, imported ahead of this file by assets/app.js. */
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink);
       font: 400 15px/1.5 var(--f-sans);
       min-height: 100vh; display: flex; flex-direction: column;
       -webkit-font-smoothing: antialiased; }
main { flex: 1 0 auto; }
footer.site { margin-top: auto; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
/* `.container` is the name the redesign uses; `.wrap` is kept because six existing
   templates already emit it. Same rule, so the two can be mixed during the port. */
.wrap, .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
/* Icons — sized by the context that renders them, coloured by currentColor. */
.icon { width: 1em; height: 1em; flex: 0 0 auto; display: inline-block; vertical-align: middle; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: var(--s2); top: var(--s2); z-index: var(--z-skiplink); background: var(--card);
                   color: var(--ink); padding: var(--s2) var(--s3); border-radius: var(--r-md);
                   box-shadow: var(--sh-pop); font: var(--t-body); font-weight: 600; }

/* Aurora Australis Ambient Backdrop */
.aurora-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 520px;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background: var(--dark);
}
.aurora-mesh {
    position: absolute;
    inset: -60px;
    filter: blur(65px);
    opacity: 0.9;
    transform: translate3d(0, 0, 0);
    will-change: transform, opacity;
}
.aurora-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(45px);
    will-change: transform, opacity;
    mix-blend-mode: screen;
}
/* 1. Emerald green ribbon (classic southern lights curtain) */
.aurora-blob-1 {
    top: -12%;
    left: -8%;
    width: 55vw;
    height: 480px;
    background: radial-gradient(ellipse at center, rgba(16, 185, 129, 0.6) 0%, rgba(5, 150, 105, 0.35) 45%, transparent 75%);
    animation: aurora-drift-1 22s ease-in-out infinite alternate;
}
/* 2. Deep purple / violet ribbon (center nitrogen glow) */
.aurora-blob-2 {
    top: -18%;
    left: 28%;
    width: 60vw;
    height: 520px;
    background: radial-gradient(ellipse at center, rgba(124, 58, 237, 0.65) 0%, rgba(99, 102, 241, 0.38) 50%, transparent 75%);
    animation: aurora-drift-2 28s ease-in-out infinite alternate;
}
/* 3. Glacial cyan / arctic teal ribbon (right side) */
.aurora-blob-3 {
    top: -5%;
    right: -10%;
    width: 52vw;
    height: 460px;
    background: radial-gradient(ellipse at center, rgba(6, 182, 212, 0.55) 0%, rgba(14, 116, 144, 0.3) 45%, transparent 75%);
    animation: aurora-drift-3 25s ease-in-out infinite alternate;
}
/* 4. Deep royal indigo accent ribbon */
.aurora-blob-4 {
    top: 20%;
    left: 12%;
    width: 70vw;
    height: 440px;
    background: radial-gradient(ellipse at center, rgba(79, 70, 229, 0.5) 0%, rgba(168, 85, 247, 0.25) 50%, transparent 75%);
    animation: aurora-drift-4 34s ease-in-out infinite alternate;
}
@keyframes aurora-drift-1 {
    0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
    50% { transform: translate3d(8vw, 40px, 0) rotate(8deg) scale(1.15); }
    100% { transform: translate3d(-6vw, -20px, 0) rotate(-6deg) scale(0.95); }
}
@keyframes aurora-drift-2 {
    0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
    50% { transform: translate3d(-10vw, 30px, 0) rotate(-10deg) scale(1.1); }
    100% { transform: translate3d(7vw, -30px, 0) rotate(6deg) scale(1.05); }
}
@keyframes aurora-drift-3 {
    0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
    50% { transform: translate3d(-6vw, 45px, 0) rotate(12deg) scale(1.2); }
    100% { transform: translate3d(5vw, -15px, 0) rotate(-8deg) scale(0.9); }
}
@keyframes aurora-drift-4 {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(5vw, -35px, 0) scale(1.12); }
    100% { transform: translate3d(-7vw, 25px, 0) scale(0.95); }
}
@media (prefers-reduced-motion: reduce) {
    .aurora-blob { animation: none !important; }
}

/* Site header — frosted glass sticky bar */
header.site {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(7, 21, 41, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: none;
    color: var(--on-dark);
    padding-top: env(safe-area-inset-top, 0px);
}
.header-in { min-height: var(--header-h); display: flex; align-items: center; gap: var(--s6); }
.brand-block { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
header.site .brand { display: inline-flex; align-items: center; gap: var(--s2);
                     color: var(--on-dark); font-family: var(--f-brand); font-weight: 700;
                     font-size: 19px; line-height: 1.2; letter-spacing: -.02em; }
header.site .brand .icon { width: 28px; height: 32px; }
header.site .brand:hover { text-decoration: none; opacity: .85; }
header.site .site-nav { margin-left: auto; display: flex; gap: var(--s1); }
header.site .site-nav a { font: var(--t-nav); letter-spacing: .01em; color: var(--on-dark-2);
                          padding: 6px 11px; border-radius: var(--r-sm); white-space: nowrap;
                          transition: background .12s, color .12s; }
header.site .site-nav a:hover { color: var(--on-dark); text-decoration: none;
                                background: rgba(255, 255, 255, .06); }
header.site .site-nav a.active { background: var(--on-dark-3); color: var(--on-dark); font-weight: 600; }

/* Header dropdowns — the grouped nav and the language select share one
   mechanic: a <details> whose summary is styled like a nav pill and whose
   panel is a light card floated over the page (the disclosure controller
   adds outside-click/Escape closing). The panel is deliberately in the page
   palette, not the header's dark one: it overlaps page content, so it reads
   as part of the page layer. */
.nav-group, .lang-select { position: relative; }
.nav-group summary, .lang-select summary {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    list-style: none; font: var(--t-nav); letter-spacing: .01em;
    color: var(--on-dark-2); padding: 6px 11px; border-radius: var(--r-sm);
    white-space: nowrap; transition: background .12s, color .12s; }
.nav-group summary::-webkit-details-marker, .lang-select summary::-webkit-details-marker { display: none; }
.nav-group summary:hover, .lang-select summary:hover { color: var(--on-dark);
    background: rgba(255, 255, 255, .06); }
.nav-group summary.active { background: var(--on-dark-3); color: var(--on-dark); font-weight: 600; }
.nav-group[open] summary, .lang-select[open] summary { color: var(--on-dark);
    background: rgba(255, 255, 255, .1); }
.nav-group summary .icon-caret, .lang-select summary .icon-caret { width: 12px; height: 12px;
    transition: transform .12s; }
.nav-group[open] summary .icon-caret, .lang-select[open] summary .icon-caret { transform: rotate(180deg); }
.hdr-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: var(--z-sticky);
            min-width: 176px; padding: 6px; display: flex; flex-direction: column;
            background: var(--card); border: 1px solid var(--line);
            border-radius: var(--r-sm); box-shadow: var(--sh-pop); }
.nav-group .hdr-menu { left: 0; right: auto; }
/* The nav-pill colouring above (`header.site .site-nav a`) outguns a bare
   .hdr-menu selector, so the menu entries carry the header scope too — they
   sit on a light card and must read in the page palette, not the header's. */
.hdr-menu a, .hdr-menu .active,
header.site .site-nav .hdr-menu a { display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; border-radius: var(--r-xs); font: var(--t-nav); font-weight: 500;
    color: var(--ink); white-space: nowrap; }
.hdr-menu a:hover,
header.site .site-nav .hdr-menu a:hover { background: var(--wash); color: var(--ink);
    text-decoration: none; }
.hdr-menu .active, .hdr-menu a.active,
header.site .site-nav .hdr-menu a.active { font-weight: 600; background: var(--wash);
    color: var(--ink); }

/* The summary shows the current language under its own name, so the control
   is legible in that language. */
.lang-select { flex: 0 0 auto; }
.lang-select summary { background: var(--on-dark-3); color: var(--on-dark); }

/* The filter toggle. The checkbox is visually hidden rather than [hidden] so it
   keeps keyboard focus and an accessible name; the label in the header is the
   visible control, and :has() carries the state and focus ring across to it.
   On desktop :checked collapses the band; below 640px the media query flips it
   so :checked expands instead. */
.filters-open-state { position: absolute; width: 1px; height: 1px; margin: -1px;
                      padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); }
body:has(.filters-open-state:checked) .hdr-icon { background: rgba(255, 255, 255, .28); }
body:has(.filters-open-state:focus-visible) .hdr-icon { outline: 2px solid #fff; outline-offset: 2px; }
/* Square glyph button that toggles the filter band (see .filters-open-state). */
.hdr-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px;
            height: 34px; flex: 0 0 auto; border: 0; border-radius: var(--r-sm);
            background: var(--on-dark-3); color: var(--on-dark); cursor: pointer; font-size: 17px; }
.hdr-icon:hover { background: rgba(255, 255, 255, .2); }
@media (max-width: 900px) {
    :root { --header-actual-h: 96px; }
    /* Grouping cut the nav to three pills, so it wraps onto its own row
       instead of scrolling (a scroll container would clip the dropdown
       panels anyway). padding-block, not the shorthand: .header-in is also
       .container, whose horizontal gutter must survive or the brand sits
       flush against the edge. */
    .header-in { min-height: 0; padding-block: 10px; flex-wrap: wrap; gap: var(--s3); }
    header.site .tagline { display: none; }
    header.site .site-nav { margin-left: 0; order: 3; width: 100%; }
    /* Nav drops to its own row, so the switcher and the glyph share the top
       one with the brand. Either may be absent — the glyph only exists on the
       listing views, the switcher only on routed pages — so both claim the
       free space, and the second one gives it back when both are present
       (two auto margins would otherwise split it and strand the pair
       mid-header). */
    .lang-select, .hdr-icon { margin-left: auto; }
    .lang-select ~ .hdr-icon { margin-left: 0; }
}

/* SEO hub pages (operators, ships, months, regions, activities) */
.hub-wrap { padding-top: var(--s5); padding-bottom: var(--s8); }
.hub-intro { color: var(--muted); max-width: 760px; margin: 0 0 20px; }
.hub-description { max-width: 760px; margin: -8px 0 24px; font-size: 15px; line-height: 1.6; }
.hub-description p { margin: 0 0 10px; }
.hub-related h2 { font-size: 17px; margin: 26px 0 8px; }
.hub-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hub-links li { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-pill);
                padding: 6px 12px; font-size: 14px; }
.hub-links li a { color: var(--ink); font-weight: 500; }
.hub-links li a:hover { color: var(--accent); text-decoration: none; }
.hub-links .count { color: var(--muted); font-family: var(--f-mono); font-size: 11px;
                    font-variant-numeric: tabular-nums; margin-left: 4px; }
.hub-links.index { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.hub-links.index li { border-radius: var(--r-lg); padding: 12px 16px; display: flex;
                      justify-content: space-between; align-items: baseline; gap: 8px; }
.hub-cta { margin: 28px 0 0; font-weight: 600; }
.hub .cards { margin-top: 4px; }
.hub .pager { margin: 16px 0 0; }

/* Site footer — frosted dark glassmorphism bookending the aurora backdrop */
footer.site {
    position: relative;
    overflow: hidden;
    margin-top: var(--s16);
    padding: var(--s10) 0 var(--s8);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.22);
    color: var(--on-dark);
    z-index: 10;
}
.aurora-backdrop-footer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    background: var(--dark);
}
.aurora-backdrop-footer .aurora-blob-1 {
    top: -20%;
    left: -5%;
    width: 45vw;
    height: 360px;
}
.aurora-backdrop-footer .aurora-blob-2 {
    top: -25%;
    left: 25%;
    width: 50vw;
    height: 380px;
}
.aurora-backdrop-footer .aurora-blob-3 {
    top: -15%;
    right: -5%;
    width: 45vw;
    height: 350px;
}
.aurora-backdrop-footer .aurora-blob-4 {
    bottom: -20%;
    left: 10%;
    width: 60vw;
    height: 320px;
}
footer.site::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: rgba(7, 21, 41, 0.68);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    pointer-events: none;
}
.footer-in {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: var(--s8);
}
.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--s8);
}
.footer-brand-col {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
    max-width: 320px;
}
.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    color: var(--on-dark);
    font-family: var(--f-brand);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -.02em;
    text-decoration: none;
    transition: opacity .15s ease;
}
.footer-brand:hover {
    opacity: .85;
    text-decoration: none;
}
.footer-brand .icon {
    width: 28px;
    height: 32px;
    color: var(--on-dark);
}
.footer-tagline {
    font: var(--t-body);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--on-dark-2);
    margin: 0;
}
.footer-nav-grid {
    display: flex;
    gap: var(--s12);
    margin-left: auto;
}
.footer-col {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
    min-width: 120px;
}
.footer-heading {
    font: var(--t-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}
.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}
.footer-links li a {
    font: var(--t-body);
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    transition: color .15s ease, transform .15s ease;
    display: inline-block;
}
.footer-links li a:hover {
    color: #ffffff;
    text-decoration: none;
    transform: translateX(2px);
}
.footer-bottom {
    padding-top: var(--s6);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: var(--s3);
}
.footer-note {
    margin: 0;
    font: var(--t-body);
    font-size: 12px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.5);
    max-width: 760px;
}
.footer-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s4);
    flex-wrap: wrap;
    font: var(--t-body);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}
.footer-contact {
    margin: 0;
}
.footer-contact a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .15s ease;
}
.footer-contact a:hover {
    color: #ffffff;
}
.footer-copy {
    margin: 0;
    font-family: var(--f-mono);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
}

@media (max-width: 768px) {
    footer.site {
        margin-top: var(--s10);
        padding: var(--s8) 0 var(--s6);
    }
    .footer-top {
        flex-direction: column;
        gap: var(--s6);
    }
    .footer-brand-col {
        max-width: 100%;
    }
    .footer-nav-grid {
        margin-left: 0;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--s6);
    }
    .footer-meta-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--s2);
    }
}
@media (max-width: 480px) {
    .footer-nav-grid {
        grid-template-columns: 1fr;
        gap: var(--s5);
    }
}

/* FAQ hub + entry pages */
.faq h2 { font-size: 19px; margin: 28px 0 10px; }
.faq-intro { color: var(--muted); max-width: 720px; margin: 0 0 8px; }
.faq-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.faq-link { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
            padding: 12px 16px; }
.faq-link > a { font-weight: 600; font-size: 15px; color: var(--ink); }
.faq-link > a:hover { color: var(--accent); }
.faq-link .teaser { margin: 4px 0 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.faq-list.related .faq-link { padding: 10px 16px; }
.faq-entry .answer { max-width: 760px; font-size: 16px; line-height: 1.6; }
.faq-entry .answer p { margin: 0 0 12px; }
.faq-cta { margin: 20px 0 8px; font-weight: 600; }
.breadcrumbs { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--accent); }
main { padding: 24px 0 48px; }
/* Global typographic heading scale (h1 to h5) */
h1 { font: var(--t-h1); letter-spacing: -.015em; margin: 0 0 var(--s4); color: var(--ink); }
h2 { font: var(--t-h2); letter-spacing: -.01em; margin: 0 0 var(--s3); color: var(--ink); }
h3 { font: var(--t-h3); letter-spacing: -.01em; margin: 0; color: var(--ink); }
h4 { font: var(--t-h4); letter-spacing: -.005em; margin: 0; color: var(--ink); }
h5 { font: var(--t-h5); letter-spacing: .04em; text-transform: uppercase; margin: 0; color: var(--muted); }
.hub-related h2, .faq h2 { font-size: 22px; }
.page-sub { color: var(--muted); font-size: 15px; margin: -10px 0 18px; max-width: 720px; }

/* Packing checklist — ticked state is client-side (packing_list_controller);
   without JS the boxes still toggle, they just don't persist. */
.packing { max-width: 860px; }
.packing-intro { color: var(--muted); max-width: 720px; margin: 0 0 var(--s4); line-height: 1.55; }
.packing-toolbar { position: sticky; top: var(--s2); z-index: var(--z-sticky); display: flex;
                   flex-wrap: wrap; gap: var(--s3) var(--s5); align-items: center;
                   justify-content: space-between; background: var(--card);
                   border: 1px solid var(--line); border-radius: var(--r-lg);
                   padding: var(--s3) var(--s4); margin: 0 0 var(--s5); box-shadow: var(--sh-card); }
.packing-progress { flex: 1 1 220px; min-width: 200px; }
.packing-count { font: var(--t-num); font-variant-numeric: tabular-nums; color: var(--muted); }
.packing-count b { color: var(--ink); font-weight: 600; }
.packing-bar { height: 6px; border-radius: var(--r-pill); background: var(--bg); margin-top: var(--s2);
               overflow: hidden; }
.packing-bar-fill { height: 100%; width: 0; border-radius: inherit; background: var(--accent);
                    transition: width .25s ease; }
.packing-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }
.packing-actions .btn { font-size: 13px; padding: 8px 14px; }
.packing-tips { background: var(--accent-soft); border: 1px solid var(--accent-ring);
                border-radius: var(--r-lg); padding: var(--s4) var(--s5); margin: 0 0 var(--s6); }
.packing-tips h2 { font-size: 19px; margin: 0 0 var(--s2); }
.packing-tips ul { margin: 0; padding-left: 18px; }
.packing-tips li { margin: 0 0 var(--s2); font-size: 14px; line-height: 1.5; }
.packing-group { margin: 0 0 var(--s6); }
.packing-group h2 { font-size: 21px; margin: 0 0 var(--s3); }
.packing-group-count { margin-left: var(--s2); font: var(--t-num);
                       font-variant-numeric: tabular-nums; color: var(--muted); }
.packing-items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.packing-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); }
.packing-item > label { display: flex; gap: var(--s3); padding: 10px 14px; cursor: pointer; }
.packing-item input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; cursor: pointer;
                      accent-color: var(--accent); }
.packing-item-label { display: block; font-weight: 600; font-size: 14px; color: var(--ink); }
.packing-item-note { display: block; margin-top: 2px; font-size: 13px; color: var(--muted);
                     line-height: 1.45; }
.packing-item.done { background: var(--surface); }
.packing-item.done .packing-item-label { color: var(--muted); text-decoration: line-through; }
.packing-badge { display: inline-block; margin-left: var(--s1); padding: 1px 8px;
                 border-radius: var(--r-pill); font: var(--t-badge); color: var(--ok);
                 background: var(--ok-bg); border: 1px solid var(--ok-line); vertical-align: 1px; }
.packing-more { margin: var(--s2) 0 0; border: 1px dashed var(--line); border-radius: var(--r-lg);
                background: var(--surface); }
.packing-more summary { padding: 9px 14px; cursor: pointer; font-weight: 600; font-size: 13px;
                        color: var(--accent); list-style-position: inside; }
.packing-more[open] summary { border-bottom: 1px dashed var(--line); }
.packing-more p { margin: 0; padding: var(--s3) var(--s4); font-size: 13.5px; line-height: 1.6;
                  color: var(--ink-2); }

/* Packing promo — the "getting ready?" band on every voyage page */
.packing-promo { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); align-items: center;
                 justify-content: space-between; background: var(--accent-soft);
                 border: 1px solid var(--accent-ring); border-radius: var(--r-lg);
                 padding: var(--s4) var(--s5); margin: var(--s6) 0; }
.packing-promo h2 { font-size: 20px; margin: 0 0 var(--s1); }
.packing-promo p { margin: 0; font-size: 14px; color: var(--ink-2); max-width: 640px; }
.packing-promo .btn { flex: none; }

/* Error pages (templates/bundles/TwigBundle/Exception/) */
.error-page { max-width: 640px; margin: var(--s12) auto var(--s16); text-align: center; }
.error-code { margin: 0 0 var(--s2); font: 600 13px/1 var(--f-mono); letter-spacing: var(--ls-caps);
              color: var(--muted); }
.error-page h1 { font: 400 32px/1.2 var(--f-serif); letter-spacing: -.01em; margin: 0 0 var(--s3); }
.error-lead { margin: 0 0 var(--s6); color: var(--muted); font-size: 15px; line-height: 1.6; }
.error-actions { display: flex; gap: var(--s5); align-items: center; justify-content: center;
                 margin: 0; font-size: 14px; }
.error-links { text-align: left; }

/* Full-bleed bands.
   The listing views neutralise the container on <main> so the white filter strip
   can span the viewport, and each band re-establishes the 1280px measure itself.
   Preferred over the margin-inline: calc(50% - 50vw) trick because 100vw includes
   the scrollbar on Windows/Linux, and the usual fix — overflow-x: hidden on html —
   creates a scroll container that silently kills position: sticky in descendants. */
body.view-listing main,
body.page-ships main,
main:has(.filterbar) {
    padding: 0 0 var(--s16);
}
body.view-listing main > .wrap { max-width: none; padding: 0; }
.band-inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* Full-bleed sticky filterbar continuing the transparent backdrop */
.filterbar {
    position: sticky;
    top: var(--header-actual-h, 60px);
    z-index: 90;
    overflow-anchor: none;
    background: rgba(7, 21, 41, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: none;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    padding: var(--s2) 0 var(--s6);
}
.filterbar.is-collapsed,
.filterbar:has(.filterbar-collapsible.is-collapsed) {
    padding: var(--s2) 0 var(--s5);
}

/* Unify header and filterbar into ONE single seamless frosted glass backdrop.
   Eliminates subpixel rounding gaps, edge seams, and double-blur compositing artifacts in Chrome. */
body:has(.filterbar) header.site {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

body:has(.filterbar) .filterbar {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

body:has(.filterbar) .filterbar::before {
    content: "";
    position: absolute;
    top: calc(-1 * var(--header-actual-h, 60px) - env(safe-area-inset-top, 0px) - 60px);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(7, 21, 41, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    z-index: -1;
    pointer-events: none;
}

body:has(.filterbar) .ship-filterbar {
    box-shadow: none;
}

/* Page content below header/filters sits cleanly on top of the aurora backdrop */
main {
    position: relative;
    z-index: 10;
}
.results-band,
.hub-main,
.hub-wrap,
.editorial-wrap,
main:not(:has(.filterbar)) {
    position: relative;
    z-index: 10;
    background: var(--bg);
}
.results-band {
    display: flow-root;
}
.results-band,
.hub-main {
    padding: var(--s4) 0 0;
}

/* Frosted glass filter panel (like React Bits / macOS Big Sur glassmorphism) */
turbo-frame { display: block; }
.filters {
    --filter-pad-x: var(--s5);
    overflow-anchor: none;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--r-xl, 20px);
    padding: var(--s3) var(--filter-pad-x);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.2);
    color: var(--ink);
    display: flex;
    flex-direction: column;
}
.ship-filterbar {
    border-bottom: none;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    margin-bottom: 0;
}
@media (max-width: 768px) {
    .filters {
        --filter-pad-x: var(--s3);
        padding: var(--s3);
        border-radius: var(--r-lg);
    }
}

/* Filter panel header with toggle button, count and reset link */
.filterbar-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--s3);
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    transition: border-bottom-color .2s ease, padding-bottom .2s ease;
}
.filters.is-collapsed .filterbar-head,
.filters:has(.filterbar-collapsible.is-collapsed) .filterbar-head,
.ship-filterbar.is-collapsed .filterbar-head,
.ship-filterbar:has(.filterbar-collapsible.is-collapsed) .filterbar-head {
    padding-bottom: 0;
    border-bottom-color: transparent;
}
.filterbar-toggle {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    transition: opacity .15s ease;
}
.filterbar-toggle:hover { opacity: .85; }
.filterbar-icon { display: inline-flex; align-items: center; color: var(--accent); }
.filterbar-icon .icon { width: 16px; height: 16px; }
.filterbar-heading { font: var(--t-label); font-weight: 700; color: var(--ink); letter-spacing: var(--ls-label); }
.filterbar-chevron {
    display: inline-flex;
    align-items: center;
    color: var(--muted);
    transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1);
}
.filterbar-toggle[aria-expanded="false"] .filterbar-chevron {
    transform: rotate(-90deg);
}
.filterbar-meta {
    display: inline-flex;
    align-items: center;
    gap: var(--s4);
}
.filterbar-count {
    font-size: 13px;
    color: var(--muted);
    cursor: pointer;
    user-select: none;
    transition: color .15s ease;
}
.filterbar-count:hover { color: var(--ink); }
.filterbar-count b.num { color: var(--ink); font-family: var(--f-mono); font-weight: 700; }
.btn-reset {
    background: none; border: none; padding: 0; font: var(--t-body); font-size: 13px;
    font-weight: 500; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
    transition: color .15s ease;
}
.btn-reset:hover { color: var(--accent-hover); }
.reset-text-short { display: none; }

/* Collapsible container with smooth CSS Grid height transition */
.filterbar-collapsible {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    overflow: hidden;
    overflow-anchor: none;
    transition: grid-template-rows .28s cubic-bezier(0.2, 0, 0, 1), opacity .22s ease;
    will-change: grid-template-rows, opacity;
}
.filterbar-collapsible.is-collapsed {
    grid-template-rows: 0fr;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}
.filterbar-collapsible.is-expanded {
    grid-template-rows: 1fr;
    opacity: 1;
    pointer-events: auto;
    overflow: visible;
}
.filterbar-collapsible.is-collapsed .filterbar-body {
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
}
.filterbar-body {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s4);
    padding: var(--s4) 8px 0;
    transition: padding .28s cubic-bezier(0.2, 0, 0, 1);
}

/* Mobile filterbar internal scroll and collapsed default */
@media (max-width: 768px) {
    .count-extra {
        display: none !important;
    }
    .filterbar-head {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--s2);
        flex-wrap: nowrap;
        width: 100%;
    }
    .filterbar-toggle {
        flex: 0 0 auto;
        white-space: nowrap;
    }
    .filterbar-meta {
        display: flex;
        align-items: center;
        gap: var(--s2);
        flex: 1 1 auto;
        min-width: 0;
        justify-content: flex-end;
        flex-wrap: nowrap;
    }
    .filterbar-count {
        font-size: 12.5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;
    }
    .btn-reset {
        flex: 0 0 auto;
        font-size: 12px;
        white-space: nowrap;
    }
    .reset-text-full { display: none; }
    .reset-text-short { display: inline; }
    .filterbar-collapsible:not(.is-expanded) {
        grid-template-rows: 0fr;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
    }
    .filterbar-collapsible.is-expanded {
        grid-template-rows: 1fr;
        opacity: 1;
        overflow: visible;
        pointer-events: auto;
    }
    .filters:not(.is-expanded) .filterbar-head,
    .filters.is-collapsed .filterbar-head {
        margin: 0;
        padding: 0;
        border-bottom: none;
        box-shadow: none;
    }
    .filterbar-body {
        max-height: calc(100dvh - var(--header-actual-h, 56px) - 64px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        padding-right: 6px;
        padding-bottom: var(--s4);
    }
    .filterbar-collapsible.is-collapsed .filterbar-body,
    .filterbar-collapsible:not(.is-expanded) .filterbar-body {
        overflow: hidden;
        max-height: 0;
    }
    .filterbar-body::-webkit-scrollbar {
        width: 4px;
    }
    .filterbar-body::-webkit-scrollbar-track {
        background: transparent;
    }
    .filterbar-body::-webkit-scrollbar-thumb {
        background: rgba(15, 23, 42, 0.2);
        border-radius: 9999px;
    }
}

/* Compact month histogram slider widget */
.month-histogram-widget {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}
.range-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--s2);
}
.month-histogram-widget .range-head {
    margin-bottom: 40px;
}
.range-head .range-label { margin: 0; line-height: 18px; color: var(--muted); }
.range-head output.num {
    font-family: var(--f-mono);
    font-weight: 600;
    font-size: 13px;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}
.mhist-bars {
    display: flex;
    align-items: flex-end;
    justify-content: stretch;
    height: 34px;
    gap: 0;
    margin: 0 12px 0;
    border-bottom: none;
    padding-bottom: 0;
    overflow: visible;
}
.mhist-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    cursor: pointer;
    user-select: none;
    padding: 0;
    margin: 0;
    position: relative;
    transition: opacity .15s ease;
}
.mhist-col.is-active { opacity: 1; }
.mhist-col.is-dimmed { opacity: 0.35; }
.mhist-col:hover { opacity: 1; z-index: 25; }
.mhist-bar-wrap {
    width: 100%;
    height: 28px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}
.mhist-bar {
    width: 100%;
    background: var(--accent);
    border-radius: 1.5px 1.5px 0 0;
    transition: height .15s ease, background-color .15s ease;
}
.mhist-col.is-dimmed .mhist-bar { background: var(--line); }
.mhist-col:hover .mhist-bar {
    background: var(--accent-hover);
    filter: drop-shadow(0 0 4px rgba(0, 95, 204, 0.4));
}

/* Instant month hover tooltip on histogram bar columns */
.mhist-tooltip {
    position: absolute;
    bottom: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%) translateY(2px);
    background: rgba(7, 21, 41, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--r-pill);
    padding: 3px 9px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
    box-shadow: 0 4px 14px rgba(7, 21, 41, 0.28), 0 1px 3px rgba(0, 0, 0, 0.2);
    font-size: 11px;
    color: #ffffff;
    line-height: 1.3;
}
.mhist-tooltip strong {
    font-weight: 700;
    color: #ffffff;
}
.mhist-tooltip .mhist-tip-count {
    font-size: 10.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
}
.mhist-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 4px;
    border-style: solid;
    border-color: rgba(7, 21, 41, 0.94) transparent transparent transparent;
}
.mhist-tooltip.is-first {
    left: 0;
    transform: translateY(2px);
}
.mhist-tooltip.is-first::after {
    left: 10px;
    transform: none;
}
.mhist-tooltip.is-last {
    left: auto;
    right: 0;
    transform: translateY(2px);
}
.mhist-tooltip.is-last::after {
    left: auto;
    right: 10px;
    transform: none;
}
.mhist-col:hover .mhist-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.mhist-col:hover .mhist-tooltip.is-first {
    transform: translateY(0);
}
.mhist-col:hover .mhist-tooltip.is-last {
    transform: translateY(0);
}

.mhist-slider { margin: 0 12px; }

/* Custom range sliders (Month, Duration, Year, Price, Ships, Operators) */
/* Embossed track with inner shadow and bottom specular highlight */
.mhist-slider.noUi-target,
.custom-slider.noUi-target,
.price-range .noUi-target,
.ship-year-slider.noUi-target,
.operator-slider.noUi-target {
    height: 6px;
    border: none;
    box-shadow: inset 0 1px 2px rgba(7, 21, 41, 0.22),
                inset 0 0.5px 1px rgba(0, 0, 0, 0.15),
                0 1px 0 rgba(255, 255, 255, 0.85);
    background: rgba(15, 23, 42, 0.14);
    border-radius: 999px;
}
.mhist-slider .noUi-connect,
.custom-slider .noUi-connect,
.price-range .noUi-connect,
.ship-year-slider .noUi-connect,
.operator-slider .noUi-connect {
    background: var(--accent);
    box-shadow: none;
    border-radius: 999px;
}

/* Glass knob slider handles */
.mhist-slider .noUi-handle,
.custom-slider .noUi-handle,
.price-range .noUi-handle,
.ship-year-slider .noUi-handle,
.operator-slider .noUi-handle {
    width: 20px;
    height: 20px;
    right: -10px;
    top: -7px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.95);
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.75) 45%, rgba(225, 240, 255, 0.5) 75%, rgba(195, 220, 255, 0.35) 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 3px 8px rgba(7, 21, 41, 0.22),
                0 1px 3px rgba(7, 21, 41, 0.15),
                inset 0 1.5px 2px rgba(255, 255, 255, 1),
                inset 0 -1.5px 2px rgba(0, 95, 204, 0.18);
    cursor: grab;
    transition: transform .15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .15s ease, border-color .15s ease;
}

/* Glass knob center pip jewel */
.mhist-slider .noUi-handle::before,
.custom-slider .noUi-handle::before,
.price-range .noUi-handle::before,
.ship-year-slider .noUi-handle::before,
.operator-slider .noUi-handle::before {
    content: '';
    display: block !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0077e6, #004fad);
    box-shadow: 0 1px 2px rgba(0, 95, 204, 0.35), inset 0 0.5px 1px rgba(255, 255, 255, 0.7);
    pointer-events: none;
    transition: transform .15s ease, background .15s ease;
}

/* Glass knob specular light glint */
.mhist-slider .noUi-handle::after,
.custom-slider .noUi-handle::after,
.price-range .noUi-handle::after,
.ship-year-slider .noUi-handle::after,
.operator-slider .noUi-handle::after {
    content: '';
    display: block !important;
    position: absolute;
    top: 2.5px;
    left: 4px;
    width: 5px;
    height: 2.5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    transform: rotate(-30deg);
    pointer-events: none;
}

.mhist-slider .noUi-handle:hover,
.custom-slider .noUi-handle:hover,
.price-range .noUi-handle:hover,
.ship-year-slider .noUi-handle:hover,
.operator-slider .noUi-handle:hover {
    transform: scale(1.15);
    border-color: #ffffff;
    box-shadow: 0 4px 14px rgba(7, 21, 41, 0.28),
                0 0 0 4px rgba(0, 95, 204, 0.15),
                inset 0 1.5px 2px rgba(255, 255, 255, 1),
                inset 0 -1.5px 2px rgba(0, 95, 204, 0.25);
}

.mhist-slider .noUi-handle:active,
.custom-slider .noUi-handle:active,
.price-range .noUi-handle:active,
.ship-year-slider .noUi-handle:active,
.operator-slider .noUi-handle:active {
    transform: scale(1.22);
    cursor: grabbing;
    border-color: #ffffff;
    box-shadow: 0 5px 18px rgba(0, 95, 204, 0.35),
                0 0 0 5px rgba(0, 95, 204, 0.22),
                inset 0 1.5px 2px rgba(255, 255, 255, 1),
                inset 0 -1.5px 2px rgba(0, 95, 204, 0.35);
}

.mhist-slider .noUi-handle:active::before,
.custom-slider .noUi-handle:active::before,
.price-range .noUi-handle:active::before,
.ship-year-slider .noUi-handle:active::before,
.operator-slider .noUi-handle:active::before {
    transform: translate(-50%, -50%) scale(1.2);
    background: linear-gradient(135deg, #1f85f5, #005fcc);
}

.mhist-slider .noUi-handle:focus-visible,
.custom-slider .noUi-handle:focus-visible,
.price-range .noUi-handle:focus-visible,
.ship-year-slider .noUi-handle:focus-visible,
.operator-slider .noUi-handle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(0, 95, 204, 0.35),
                0 4px 12px rgba(7, 21, 41, 0.25),
                inset 0 1.5px 2px rgba(255, 255, 255, 1);
}

/* 2-Column Split Dashboard Layout */
.filters-split-layout {
    display: grid;
    grid-template-columns: 410px 1fr;
    gap: var(--s5);
    align-items: stretch;
}
.filters-col-numeric {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
    border-right: none;
    padding-right: 0;
}
.filters-numeric-sliders {
    display: flex;
    flex-direction: column;
    gap: var(--s4);
    margin-top: var(--s3);
}
.filters-col-facets {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
    min-width: 0;
}
.filters-top-row {
    width: 100%;
}
.filters-facets-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s3);
    align-items: end;
}

.filter-group { min-width: 0; }
.filters label, .filters .range-label {
    display: block; font: var(--t-label);
    text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--muted);
    margin-bottom: var(--s1);
}
.filters select, .filters input[type=text], .filters input[type=number] {
    width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--line);
    border-radius: var(--r-md); background: var(--surface); font: var(--t-body); color: var(--ink);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.filters select {
    appearance: none; -webkit-appearance: none; padding-right: 28px; cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2364748B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center;
}
.filters #f-q {
    padding-left: 34px;
    background: var(--surface) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E")
        no-repeat left 11px center;
}
.filters input::placeholder {
    color: var(--muted);
    opacity: 1;
}
.filters select:focus, .filters input:focus {
    outline: none; border-color: var(--accent); background: #ffffff;
    box-shadow: 0 0 0 3px var(--accent-ring);
}

.range-slider-item { min-width: 0; display: flex; flex-direction: column; }
.range-slider-item output { color: var(--accent); }
.range-slider-item .custom-slider { margin: var(--s2) 12px var(--s1); }
.range-slider-item.is-disabled {
    opacity: 0.55;
    pointer-events: none;
    cursor: not-allowed;
}
.range-slider-item.is-disabled output {
    color: var(--muted);
}
.range-slider-item.is-disabled .custom-slider {
    background: var(--line) !important;
    position: relative;
    border-radius: var(--r-pill);
    height: 6px;
}
.range-slider-item.is-disabled .custom-slider::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--muted);
    border: 2px solid #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* Bottom row: Fly & Cruise tag, Availability toggle, Region map modal trigger */
.filters-bottom-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--s3) var(--s5);
    padding-top: var(--s3);
    border-top: none;
    margin-top: auto;
}
.filters-bottom-row .region-map-host { margin-left: auto; }

/* Availability iOS-style switch */
.filters .check { justify-self: start; align-self: center; }
.filters .check-row { display: flex; align-items: center; gap: var(--s2); height: 20px; }
.filters .check-row span, .filters .check label {
    color: var(--ink); font: var(--t-body); font-size: 13px; font-weight: 500;
    margin: 0; text-transform: none; letter-spacing: 0; cursor: pointer;
}
.filters .check input { appearance: none; -webkit-appearance: none; position: relative;
    width: 34px; height: 20px; flex: 0 0 auto; border-radius: var(--r-pill);
    background: var(--line); cursor: pointer; transition: background .15s; }
.filters .check input::after { content: ''; position: absolute; top: 2px; left: 2px;
    width: 16px; height: 16px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .15s; }
.filters .check input:checked { background: var(--accent); }
.filters .check input:checked::after { transform: translateX(14px); }
.filters .check input:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }

/* Fly & Cruise single tag toggle */
.filters .tag-filter { min-width: 0; }
.filters .tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.filters .tag-toggle { position: relative; display: inline-flex; margin: 0; cursor: pointer;
    text-transform: none; letter-spacing: 0; font-weight: 400; }
.filters .tag-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.filters .tag-toggle span {
    display: inline-flex; align-items: center; gap: var(--s1);
    padding: 6px 14px; border-radius: var(--r-pill);
    background: var(--field-bg); border: 1px solid var(--line);
    font: var(--t-body); font-size: 13px; color: var(--ink-2);
    cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.filters .tag-toggle span small { color: var(--muted); font-family: var(--f-mono); }
.filters .tag-toggle:hover span { border-color: var(--muted); background: var(--line); }
.filters .tag-toggle input:checked + span {
    background: var(--accent); border-color: var(--accent-hover); color: #ffffff;
    box-shadow: 0 2px 8px var(--accent-ring);
}
.filters .tag-toggle input:checked + span small { color: rgba(255, 255, 255, 0.9); }
.filters .tag-toggle input:focus-visible + span { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

/* Filter by map button */
.map-btn, a.map-btn {
    display: inline-flex; align-items: center; gap: var(--s2);
    padding: 7px 14px; border-radius: var(--r-pill);
    background: var(--surface); border: 1px solid var(--line);
    color: var(--ink-2) !important; font: var(--t-body); font-size: 13px; font-weight: 500;
    cursor: pointer; text-decoration: none;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.map-btn:hover, a.map-btn:hover {
    background: var(--field-bg); border-color: var(--muted); color: var(--ink) !important;
}
.map-btn:focus-visible, a.map-btn:focus-visible {
    background: #ffffff;
    border-color: var(--accent);
    color: var(--ink) !important;
    text-decoration: none;
    box-shadow: 0 0 0 3px var(--accent-ring);
}
.map-btn .icon, a.map-btn .icon {
    width: 15px; height: 15px;
    color: var(--accent) !important;
    stroke: currentColor;
    transition: transform .15s ease, color .15s ease;
}
.map-btn:hover .icon, a.map-btn:hover .icon {
    color: var(--accent-hover) !important;
    transform: scale(1.1);
}
.map-btn .on-count {
    background: var(--accent); color: #ffffff;
    border-radius: var(--r-pill); font-size: 11px; line-height: 1; padding: 3px 7px;
    font-weight: 600;
}

/* Scoped to noscript submit */
.filters noscript button { background: var(--accent); color: var(--accent-ink); border: 0;
                  border-radius: var(--r-md); padding: 9px 18px; font: var(--t-body); cursor: pointer; }

@media (max-width: 1060px) {
    .filters-split-layout {
        grid-template-columns: 1fr;
        gap: var(--s4);
    }
    .filters-col-numeric {
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid var(--line);
        padding-bottom: var(--s4);
    }
}

@media (max-width: 768px) {
    .filters-facets-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 540px) {
    .filters-facets-grid {
        grid-template-columns: 1fr;
    }
    .filters-bottom-row { flex-direction: column; align-items: flex-start; }
    .filters-bottom-row .region-map-host { margin-left: 0; width: 100%; }
    .map-btn { width: 100%; justify-content: center; }
    .band-inner { padding: 0 var(--s4); }
}

@media (max-width: 640px) {
    /* Compare tray: one compact row — chips and hint are desktop luxuries. */
    .compare-tray .ct-chips, .compare-tray .ct-hint { display: none; }
    .compare-tray .wrap { flex-wrap: nowrap; gap: 10px; }
    .compare-tray .ct-actions { margin-left: auto; }
}

/* Phone portrait: two columns leave ~160px per field, which is not enough for
   values like "HX (Hurtigruten Expeditions)". One field per row instead. */
@media (max-width: 480px) {
    .filters { grid-template-columns: 1fr; }
}

/* Tom Select theme for filter dropdowns (single & multi) */
/* Instant styled shell before Tom Select takes over — eliminates blank delay and layout shift */
.filters select[multiple]:not(.tomselected),
.filters select[data-controller*="select"]:not(.tomselected),
.ship-filters select[data-controller*="select"]:not(.tomselected) {
    display: block !important;
    width: 100%;
    min-height: 38px;
    height: 38px;
    padding: 0 28px 0 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    font: var(--t-body);
    font-size: 13.5px;
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    background-color: var(--surface);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2364748B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.filters .ts-wrapper, .ship-filters .ts-wrapper { min-width: 0; width: 100%; position: relative; }
.filters .ts-control input, .ship-filters .ts-control input {
    height: auto; min-height: 0; font: var(--t-body); color: var(--ink);
}
.filters .ts-wrapper .ts-control,
.ship-filters .ts-wrapper .ts-control,
.filters .ts-wrapper.single .ts-control,
.ship-filters .ts-wrapper.single .ts-control,
.filters .ts-wrapper.multi .ts-control,
.ship-filters .ts-wrapper.multi .ts-control {
    min-height: 38px; height: 38px; padding: 0 28px 0 10px;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-md) !important; font: var(--t-body);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    background-color: var(--surface) !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2364748B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-position: right 10px center !important;
    color: var(--ink) !important; display: flex; align-items: center; cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
/* Suppress default TomSelect CSS triangle arrow on single-select */
.filters .ts-wrapper.single .ts-control::after,
.ship-filters .ts-wrapper.single .ts-control::after,
.filters .ts-control::after,
.ship-filters .ts-control::after {
    display: none !important;
    content: none !important;
}
.filters .ts-control input::placeholder,
.ship-filters .ts-control input::placeholder {
    color: var(--muted);
    opacity: 1;
    font: var(--t-body);
}
/* Multi-select control container when items are selected */
.filters .ts-wrapper.multi.has-items .ts-control,
.ship-filters .ts-wrapper.multi.has-items .ts-control {
    height: auto !important; min-height: 38px !important;
    padding: 4px 28px 4px 6px !important; flex-wrap: wrap; gap: 4px;
}
.filters .ts-wrapper.multi.has-items .ts-control input::placeholder,
.ship-filters .ts-wrapper.multi.has-items .ts-control input::placeholder {
    color: transparent !important;
    opacity: 0 !important;
}
.filters .ts-wrapper.multi.has-items:not(.focus) .ts-control input,
.ship-filters .ts-wrapper.multi.has-items:not(.focus) .ts-control input {
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
/* Multi-select pills: pure solid bg, solid text, no shadows, no borders */
.filters .ts-wrapper.multi .ts-control [data-value],
.filters .ts-wrapper.multi .ts-control > .item,
.ship-filters .ts-wrapper.multi .ts-control [data-value],
.ship-filters .ts-wrapper.multi .ts-control > .item {
    text-shadow: none !important;
    box-shadow: none !important;
    border: none !important;
    background-image: none !important;
    background: var(--accent-soft) !important;
    color: var(--accent-hover) !important;
    border-radius: var(--r-sm) !important;
    padding: 3px 6px 3px 8px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}
.filters .ts-wrapper.multi .ts-control > .item .remove,
.filters .ts-wrapper.multi .ts-control [data-value] .remove,
.ship-filters .ts-wrapper.multi .ts-control > .item .remove,
.ship-filters .ts-wrapper.multi .ts-control [data-value] .remove {
    text-shadow: none !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    color: var(--accent) !important;
    font-size: 13px !important;
    line-height: 1 !important;
    padding: 0 2px !important;
    cursor: pointer !important;
}
.filters .ts-wrapper.multi .ts-control > .item .remove:hover,
.filters .ts-wrapper.multi .ts-control [data-value] .remove:hover,
.ship-filters .ts-wrapper.multi .ts-control > .item .remove:hover,
.ship-filters .ts-wrapper.multi .ts-control [data-value] .remove:hover {
    background: transparent !important;
    color: var(--accent-hover) !important;
}
/* Single-select: robust item display and clean searching without label-jumping */
.filters .ts-wrapper.single .ts-control,
.ship-filters .ts-wrapper.single .ts-control {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: nowrap !important;
}
.filters .ts-wrapper.single .ts-control > .item,
.ship-filters .ts-wrapper.single .ts-control > .item {
    color: var(--ink) !important; font: var(--t-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%;
}
/* Hide .item ONLY while the dropdown is actively open for searching */
.filters .ts-wrapper.single.dropdown-active .ts-control > .item,
.ship-filters .ts-wrapper.single.dropdown-active .ts-control > .item {
    display: none !important;
}
/* When dropdown is not open, input is taken out of flow so .item has 100% width and is always visible */
.filters .ts-wrapper.single:not(.dropdown-active) .ts-control > input,
.ship-filters .ts-wrapper.single:not(.dropdown-active) .ts-control > input {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    pointer-events: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* When dropdown is open, input takes the full space for typing */
.filters .ts-wrapper.single.dropdown-active .ts-control > input,
.ship-filters .ts-wrapper.single.dropdown-active .ts-control > input {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
.filters .ts-wrapper.focus .ts-control,
.ship-filters .ts-wrapper.focus .ts-control {
    outline: none !important; border-color: var(--accent) !important; background-color: #ffffff !important;
    box-shadow: 0 0 0 3px var(--accent-ring) !important;
}
.ts-dropdown {
    border: 1px solid var(--line); border-radius: var(--r-md); font: var(--t-body);
    margin-top: 4px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); background: #ffffff;
    z-index: 10000;
}
.ts-dropdown .option {
    padding: 8px 12px; color: var(--ink); cursor: pointer; transition: background .12s, color .12s;
}
.ts-dropdown .option.active, .ts-dropdown .option:hover {
    background: var(--accent-soft); color: var(--accent);
}
.ts-dropdown .option.selected {
    background: var(--accent-soft); color: var(--accent); font-weight: 600;
}

/* Prevent mobile browsers (iOS Safari, Android Chrome/WebKit) from auto-zooming on input focus.
   Mobile browsers automatically zoom the viewport when focusing any input or select with
   font-size < 16px. Enforcing font-size: 16px on mobile viewports and touch devices stops
   auto-zoom while maintaining full accessibility (without disabling pinch-to-zoom). */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea,
    .filters select,
    .filters input[type=text],
    .filters input[type=number],
    .filters input[type=search],
    .filters input,
    .filters .ts-control,
    .filters .ts-control input,
    .filters .ts-wrapper.single .ts-control > .item,
    .ship-filters .ts-control,
    .ship-filters .ts-control input,
    .ship-filters .ts-wrapper.single .ts-control > .item,
    .filter-input-search,
    .ship-filter-item select,
    .meta-row .sorter select {
        font-size: 16px !important;
    }

    .filters input::placeholder,
    .filters .ts-control input::placeholder,
    .ship-filters .ts-control input::placeholder,
    .filter-input-search::placeholder {
        font-size: 16px !important;
    }
}

.region-dialog { max-width: min(96vw, 1040px); width: 100%; border: 0; padding: 0;
    border-radius: var(--r-lg); box-shadow: var(--sh-pop); color: var(--ink);
    background: var(--card); }
.region-dialog::backdrop { background: rgba(11, 29, 58, .45); }
.region-dialog-head { display: flex; align-items: center; justify-content: space-between;
    gap: var(--s4); padding: var(--s4) var(--s5) var(--s2); }
.region-dialog-head h2 { margin: 0; font: 400 20px/1.3 var(--f-serif); letter-spacing: -.01em; }
.dlg-x { display: inline-flex; align-items: center; justify-content: center; width: 30px;
    height: 30px; border: 0; border-radius: var(--r-sm); background: transparent;
    color: var(--muted); cursor: pointer; }
.dlg-x:hover { background: var(--bg); color: var(--ink); }
.dlg-x .icon { width: 17px; height: 17px; }
.region-map-body { padding: 0 var(--s3) var(--s3); overflow-x: auto; }
.region-map-body > svg { display: block; width: 100%; min-width: 860px; height: auto; }
.region-map .hint { margin: 6px 4px 2px; font-size: 12px; color: var(--muted); }

/* regions outside the map frames — pill toggles with the same data-region contract */
.region-map .far-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin: 10px 4px 0; }
.region-map .far-label { font-size: 12px; color: var(--muted); margin-right: 2px; }
.region-map .far-row .rg { display: inline-flex; align-items: baseline; gap: 5px;
    border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card);
    padding: 3px 11px; font-size: 12.5px; color: var(--ink); user-select: none; }
.region-map .far-row .rg small { font-size: 10.5px; color: var(--muted); }
.region-map .far-row .rg:hover, .region-map .far-row .rg:focus-visible {
    border-color: var(--accent); color: var(--accent); }
.region-map .far-row .rg.is-on { background: var(--accent); border-color: var(--accent);
    color: var(--accent-ink); }
.region-map .far-row .rg.is-on small { color: rgba(255, 255, 255, .75); }
.region-map .far-row .rg.is-off:not(.is-on) { color: var(--muted); background: transparent; }
.region-map .far-row .rg.is-off:not(.is-on) small { color: var(--muted); }

/* wildlife seen in the currently selected regions — links to /highlights/{slug} */
.region-map .map-wildlife { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin: 10px 4px 0; padding-top: 10px; border-top: 1px dashed var(--line); }
.region-map .wl-chip { display: inline-flex; border: 1px solid var(--line);
    border-radius: var(--r-pill); background: var(--card); padding: 3px 11px;
    font-size: 12.5px; color: var(--ink); }
.region-map .wl-chip:hover, .region-map .wl-chip:focus-visible {
    border-color: var(--accent); color: var(--accent); text-decoration: none; }

.region-map .panel { fill: #eaf2f7; stroke: var(--line); }
.region-map .land { fill: #dde8ee; stroke: #bfd2dd; stroke-width: 1.2; }
.region-map .isle { fill: #c6d8e2; stroke: #9fb9c9; stroke-width: 1; }
.region-map .crater { fill: #eaf2f7; }
.region-map .deco { fill: #a9bcc8; font-size: 11px; letter-spacing: .12em; }
.region-map .deco.big { font-size: 13px; }
.region-map .deco-line { fill: none; stroke: #c3d3dd; stroke-dasharray: 3 4; }
.region-map .inset-title { fill: var(--muted); font-size: 12.5px; font-weight: 600; }
.region-map text { font-size: 11px; fill: var(--ink); pointer-events: none; }
.region-map text.sm, .region-map .deco.sm { font-size: 9.5px; letter-spacing: 0; }
.region-map text .ct { font-size: 9px; font-weight: 700; fill: var(--muted); }

.region-map .rg { cursor: pointer; outline: none; }
.region-map .rg text { pointer-events: all; }
.region-map .rg .hit { fill: transparent; }
.region-map .rg .hitline { fill: none; stroke: transparent; stroke-width: 22; stroke-linecap: round; }
.region-map .rg .ring-hit { stroke-width: 12; }
.region-map .rg .lane-hit { stroke-width: 16; }
.region-map .rg .dot { fill: var(--accent); stroke: #fff; stroke-width: 1.5; }
.region-map .rg .zone { fill: var(--accent-soft); fill-opacity: .55; stroke: #aecbdd;
    stroke-dasharray: 4 3; }
.region-map .rg .shelf { fill: #f3f7fa; stroke: #aecbdd; stroke-dasharray: 4 3; }
.region-map .rg .lane { fill: none; stroke: #7ea8c4; stroke-width: 3; stroke-dasharray: 6 4;
    stroke-linecap: round; opacity: .7; }
.region-map .rg .armline { fill: none; stroke: var(--accent); stroke-width: 5;
    stroke-linecap: round; opacity: 0; }
.region-map .rg .latline { fill: none; stroke: #7ea8c4; stroke-width: 1.6; stroke-dasharray: 7 5; }
.region-map .rg .arm-hit { stroke-width: 26; }
.region-map .rg .chain-hit { stroke-width: 34; }

.region-map .rg:hover text, .region-map .rg:focus-visible text { fill: var(--accent); }
.region-map .rg:hover .dot { r: 6; }
.region-map .rg:hover .zone, .region-map .rg:focus-visible .zone { stroke: var(--accent);
    fill-opacity: .8; }
.region-map .rg:hover .isle { stroke: var(--accent); }
.region-map .rg:hover .clickland, .region-map .rg:focus-visible .clickland {
    fill: #cfe2ee; stroke: var(--accent); }
.region-map .rg:hover .armline { opacity: .35; }
.region-map .rg:hover .latline, .region-map .rg:hover .lane { stroke: var(--accent); opacity: 1; }
.region-map .rg:focus-visible .dot, .region-map .rg:focus-visible .isle { stroke: var(--accent);
    stroke-width: 2.5; }

.region-map .rg.is-on text { fill: var(--accent); font-weight: 700; }
.region-map .rg.is-on text .ct { fill: var(--accent); }
.region-map .rg.is-on .dot { r: 6.5; stroke: var(--accent); }
.region-map .rg.is-on .isle { fill: var(--accent); stroke: var(--accent); }
.region-map .rg.is-on .crater { fill: #fff; }
.region-map .rg.is-on .zone { fill: var(--accent); fill-opacity: .22; stroke: var(--accent);
    stroke-dasharray: none; }
.region-map .rg.is-on .shelf { stroke: var(--accent); stroke-dasharray: none; }
.region-map .rg.is-on .lane, .region-map .rg.is-on .latline { stroke: var(--accent);
    stroke-width: 4; opacity: 1; }
.region-map .rg.is-on .armline { opacity: .55; }
.region-map .rg.is-on .clickland { fill: #cfe2ee; stroke: var(--accent); stroke-width: 2; }

/* zero results under current filters: muted and inert (unless selected) */
.region-map .rg.is-off:not(.is-on) { pointer-events: none; }
.region-map .rg.is-off:not(.is-on) text { fill: var(--muted); }
.region-map .rg.is-off:not(.is-on) .dot { fill: #b9c6cf; }
.region-map .rg.is-off:not(.is-on) .isle { fill: #d4dfe6; stroke: #c2d0d9; }
.region-map .rg.is-off:not(.is-on) .zone,
.region-map .rg.is-off:not(.is-on) .shelf { fill-opacity: .25; stroke: #ccdae3; }
.region-map .rg.is-off:not(.is-on) .lane { stroke: #b9c6cf; }



/* Active filter chips (desktop only — on mobile, sticky filterbar already displays active state & reset) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.chips a.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-soft);
    color: var(--accent); border-radius: var(--r-pill); padding: 4px 12px; font-size: 13px; }
.chips a.chip b { font-weight: 600; }
.chips a.chip:hover { text-decoration: none; background: #d6e7f3; }
.chips a.chip .x { font-weight: 700; opacity: .7; }
.chips a.clear-all { font: var(--t-body); color: var(--muted); margin-left: 4px; }

@media (max-width: 768px) {
    .chips { display: none !important; }
}

/* Meta row: Number on page on left, view switch in center, sorting on right */
.meta-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
            margin: 18px 0 12px; }
.meta-row > .meta-left,
.meta-row > .meta-flank { justify-self: start; display: flex; align-items: center; }
.meta-row > .meta-center,
.meta-row > .view-switch { justify-self: center; display: flex; align-items: center; }
.meta-row > .meta-right,
.meta-row .meta-tools { justify-self: end; display: flex; align-items: center; }

/* The single <h1>, dressed as the design's plain result count. */
.results-h1 { margin: 0; font: var(--t-body); font-weight: 400; color: var(--muted); }
.results-h1.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; }
.results-h1 .num { font-family: var(--f-mono); font-variant-numeric: tabular-nums;
                   font-weight: 500; font-size: 14px; color: var(--ink); }
.meta-row .meta-tools { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }

/* List | Calendar | Timeline — segmented pill group */
.view-switch { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--r-md);
               background: #E7ECF4; font: var(--t-body); }
.view-switch a, .view-switch .current { padding: 5px 14px; border-radius: var(--r-sm); }
.view-switch .current { background: var(--card); color: var(--ink); font-weight: 600;
                        box-shadow: var(--sh-segment); }
.view-switch a { color: var(--muted); background: transparent; }
.view-switch a:hover { text-decoration: none; color: var(--ink); }
.meta-count { font: var(--t-body); color: var(--muted); font-size: 14px; }
.meta-count .num { font-family: var(--f-mono); font-weight: 600; color: var(--ink); }

/* Sorters: text-hugging clean dropdowns without all-caps */
.meta-row .sorter { display: flex; align-items: center; gap: 6px; font: var(--t-body);
                    color: var(--muted); font-size: 13px; }
.select-wrap { display: inline-flex; align-items: center; position: relative; cursor: pointer; }
.select-wrap .select-val { font-weight: 600; color: var(--ink); text-decoration: underline;
                           text-underline-offset: 3px; white-space: nowrap; pointer-events: none;
                           line-height: 1.2; text-transform: none; letter-spacing: normal; }
.select-wrap .sorter-caret { margin-left: 5px; width: 9px; height: 6px; color: var(--ink);
                             pointer-events: none; flex-shrink: 0; }
.select-wrap select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0;
                      cursor: pointer; appearance: none; -webkit-appearance: none;
                      font-size: 16px !important; }
.select-wrap:hover .select-val { color: var(--accent); }
.select-wrap:hover .sorter-caret { color: var(--accent); }
.select-wrap:has(select:focus-visible) .select-val { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Responsive adjustments for mobile viewports */
@media (max-width: 768px) {
    .filterbar,
    .filterbar.is-collapsed,
    .filterbar:has(.filterbar-collapsible.is-collapsed) {
        padding-top: var(--s3) !important;
        padding-bottom: var(--s5) !important;
    }
    .results-band,
    .hub-main {
        padding-top: var(--s3) !important;
    }
    .meta-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: var(--s3);
        margin: 0 0 var(--s4) !important;
    }
    .meta-row > .meta-center,
    .meta-row > .view-switch {
        order: 1;
        width: 100%;
        display: flex;
    }
    .meta-center .view-switch,
    .meta-row > .view-switch {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 3px !important;
        gap: 2px !important;
    }
    .view-switch a,
    .view-switch .current {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 8px 4px !important;
        font-size: 13.5px !important;
        text-align: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .meta-row > .meta-left {
        order: 2;
    }
    .meta-row > .meta-right,
    .meta-row .meta-tools {
        order: 3;
    }
}

/* Voyage cards
   The grid stays auto-fill rather than the prototype's fixed repeat(3, 1fr):
   at the 1232px inner width it yields exactly three columns, and it degrades to
   two and then one with no media query. Fixed columns are precisely why the
   prototype scrolls horizontally on a phone. */
/* min(320px, 100%) rather than a bare 320px: the floor would otherwise force a
   320px column inside a narrower container and push the card past the viewport
   on a 320px phone. */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
         gap: var(--s5); }
.vcard { position: relative; background: var(--card); border: 1px solid var(--line);
         border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-card);
         display: flex; flex-direction: column;
         transition: box-shadow .15s ease, transform .15s ease;
         content-visibility: auto;
         contain-intrinsic-size: auto 420px; }
.vcard:hover { box-shadow: var(--sh-card-hover); transform: translateY(-2px); }
.vcard-media { position: relative; aspect-ratio: 3 / 2; overflow: hidden;
               background: var(--photo-placeholder); }
/* Absolutely positioned so the photo can never size its own container. In flow,
   aspect-ratio is only a *preferred* height, while the flex item's automatic
   min-height is its content — so a 4:3 or 5:4 source stretched the box past 3:2
   and cards in the same row ended up with different image heights. Out of flow,
   the ratio always wins and object-fit crops. Same approach as .ecard > img. */
.vcard-media img { position: absolute; inset: 0; display: block;
                   width: 100%; height: 100%; object-fit: cover; }
.vcard-media.placeholder { display: flex; align-items: center; justify-content: center;
    background: linear-gradient(160deg, #DFEAF1, #F0F5F8); color: #A8BCC9; }
.vcard-media.placeholder .icon { width: 40px; height: 56px; opacity: .55; }
.vcard-scrim { position: absolute; inset: 0; background: var(--scrim-card); pointer-events: none; }
.vcard-body {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.vcard-by {
    margin-top: auto;
    margin-bottom: 14px;
    font: 500 12px/1.35 var(--f-sans);
    letter-spacing: 0.01em;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.vcard-by + .vcard-foot {
    margin-top: 0;
}
.vcard-by-item {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* The title's stretched link covers the whole card, so the real links inside the
   body have to be lifted above it or they stop being clickable. */
.vcard-by a {
    position: relative;
    z-index: 2;
    color: var(--ink-2);
    font-weight: 600;
    text-decoration: none;
    transition: color .15s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vcard-by a:hover {
    color: var(--accent);
    text-decoration: underline;
}
.vcard-by .sep {
    color: var(--muted);
    opacity: 0.5;
    margin: 0 2px;
    flex-shrink: 0;
}
.vcard-by .icon {
    width: 13px;
    height: 13px;
    margin-right: 2px;
    flex-shrink: 0;
    color: var(--muted);
}
.vcard-by .num {
    font-family: var(--f-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.vcard-by-capacity {
    white-space: nowrap;
    flex-shrink: 0;
}
.vcard-title {
    margin: 0 0 10px 0;
    font: 400 18px/1.35 var(--f-serif);
    letter-spacing: -.01em;
}
.vcard-title a { color: var(--ink); }
.vcard-title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.vcard-title a:hover { text-decoration: none; color: var(--accent); }
.vcard-dates, .vcard-port {
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font: var(--t-body);
    font-size: 13px;
    line-height: 1.4;
    color: var(--muted);
}
.vcard-port {
    margin-top: -4px;
    margin-bottom: 12px;
    font-size: 12.5px;
}
.vcard-dates .icon, .vcard-port .icon { width: 13px; height: 13px; color: var(--muted); }
.vcard-dates .num { font: var(--t-num); font-variant-numeric: tabular-nums; }
.vcard-tags {
    list-style: none;
    margin: 2px 0 14px 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.vcard-tags li {
    display: inline-flex;
    margin: 0;
    padding: 0;
}
.vcard-tag {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-size: 12px;
    line-height: 1.35;
    color: var(--ink-2);
    text-decoration: none;
    transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.vcard-tag .act-icon {
    font-size: 13px;
    line-height: 1;
}
a.vcard-tag:hover {
    background: var(--card);
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
}
.vcard-foot {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--s2);
}
.vcard-foot-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 2;
}
.vcard:hover .scard-action {
    background: var(--accent);
    color: var(--accent-ink);
    transform: translateX(2px);
}
.vcard-price .lbl {
    display: block;
    font: var(--t-label);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 2px;
}
.vcard-price b {
    display: block;
    font: var(--t-price);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.vcard-price small {
    display: block;
    margin-top: 2px;
    font: var(--t-body);
    font-size: 12px;
    color: var(--muted);
}
.vcard-price small .num {
    font-family: var(--f-mono);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
}

/* Editorial promo cards — same grid cell as .vcard, photo edge to edge, copy
   over a scrim at the bottom. */
.ecard { position: relative; display: flex; border-radius: var(--r-lg); overflow: hidden;
         min-height: 420px; background: var(--dark); box-shadow: var(--sh-card);
         transition: box-shadow .15s ease, transform .15s ease; }
.ecard:hover { box-shadow: var(--sh-card-hover); transform: translateY(-2px); }
.ecard > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ecard-scrim { position: absolute; inset: 0; background: var(--scrim-editorial); }
.ecard-body { position: relative; margin-top: auto; width: 100%; padding: var(--s5);
              display: grid; grid-template-columns: 1fr auto; align-items: end;
              gap: 0 var(--s3); color: var(--on-dark); }
.ecard-eyebrow { grid-column: 1; margin: 0 0 var(--s1); font: var(--t-caps);
                 text-transform: uppercase; letter-spacing: var(--ls-caps);
                 color: rgba(255, 255, 255, .6); }
.ecard-title { grid-column: 1; margin: 0 0 6px; font: 400 18px/1.2 var(--f-serif);
               letter-spacing: -.01em; }
.ecard-title a { color: var(--on-dark); }
.ecard-title a::after { content: ''; position: absolute; inset: 0; }
.ecard-title a:hover { text-decoration: none; }
.ecard-blurb { grid-column: 1; margin: 0; font: var(--t-body); color: rgba(255, 255, 255, .75); }
.ecard-go { grid-column: 2; grid-row: 1 / -1; align-self: end; display: inline-flex;
            align-items: center; justify-content: center; width: 34px; height: 34px;
            border-radius: 50%; background: rgba(255, 255, 255, .2); color: var(--on-dark); }
.ecard:hover .ecard-go { background: rgba(255, 255, 255, .32); }
.ecard-go .icon { width: 17px; height: 17px; }

/* Highlight detail page */
.editorial { max-width: 760px; margin: 0 auto; }
.editorial-eyebrow { margin: 0 0 var(--s2); font: var(--t-caps); text-transform: uppercase;
                     letter-spacing: var(--ls-caps); color: var(--accent); }
.editorial h1 { font: 400 34px/1.2 var(--f-serif); letter-spacing: -.015em; margin: 0 0 var(--s3); }
.editorial-lead { margin: 0 0 var(--s6); font-size: 17px; line-height: 1.6; color: var(--muted); }
.editorial-hero { margin: 0 0 var(--s6); }
.editorial-hero img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); }
.editorial-hero figcaption { margin-top: 6px; font-size: 12px; color: var(--muted); }
.editorial-hero figcaption a { color: var(--muted); text-decoration: underline; }
.editorial-body { font-size: 16px; line-height: 1.7; }
.editorial-body p { margin: 0 0 var(--s4); }
.editorial h2 { font: 400 24px/1.3 var(--f-serif); margin: var(--s10) 0 var(--s4); }
.editorial .cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.editorial .ecard { min-height: 300px; }

/* Wildlife blocks on hub/voyage pages — compact editorial cards */
.hub-wildlife, .voyage-wildlife { margin-top: var(--s8); }
.hub-wildlife h2, .voyage-wildlife h2 { font: 400 24px/1.3 var(--f-serif); margin: 0 0 var(--s4); }
.hub-wildlife .cards, .voyage-wildlife .cards {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.hub-wildlife .ecard, .voyage-wildlife .ecard { min-height: 300px; }

/* Ship filter bar on /ships page */
.ship-filters { display: grid; grid-template-columns: 1fr 1fr 1fr 1.3fr; gap: var(--s5); align-items: start; padding: var(--s2) 0 var(--s2); }
.ship-filter-item { min-width: 0; display: flex; flex-direction: column; }
.ship-filter-item label, .ship-filter-item .range-label {
    display: block; font: var(--t-label); text-transform: uppercase; letter-spacing: var(--ls-label);
    color: var(--muted); margin-bottom: var(--s1); height: 18px; line-height: 18px; }
.ship-filter-head { display: flex; justify-content: space-between; align-items: baseline; height: 18px; margin-bottom: var(--s1); }
.ship-filter-head .range-label { margin-bottom: 0; }
.ship-filter-head output { font-family: var(--f-mono); font-weight: 600; font-size: 13px; color: var(--accent); line-height: 18px; }
.ship-year-slider-wrap { height: 38px; display: flex; align-items: center; }
.ship-year-slider { width: 100%; margin: 0 12px; }
.ship-filter-item select { width: 100%; height: 38px; padding: 0 28px 0 12px; border: 1px solid var(--line);
                           border-radius: var(--r-md); background-color: var(--surface); font: var(--t-body);
                           color: var(--ink); appearance: none; -webkit-appearance: none; cursor: pointer;
                           box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
                           background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2364748B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
                           background-repeat: no-repeat; background-position: right 10px center;
                           transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.ship-filter-item select:focus { outline: none; border-color: var(--accent); background: #ffffff; box-shadow: 0 0 0 3px var(--accent-ring); }

.ship-empty-state { padding: var(--s10) var(--s4); text-align: center; background: var(--card);
                    border: 1px solid var(--line); border-radius: var(--r-lg); margin: var(--s6) 0; }
.ship-empty-state p { font-size: 16px; color: var(--muted); margin: 0 0 var(--s4); }
.btn-reset-large { background: var(--accent); color: var(--accent-ink); border: none; border-radius: var(--r-md);
                   padding: 8px 18px; font: var(--t-body); font-weight: 500; cursor: pointer;
                   transition: background .15s ease; }
.btn-reset-large:hover { background: var(--accent-hover); }
@media (max-width: 960px) {
    .ship-filters { grid-template-columns: 1fr 1fr; gap: var(--s4); }
}
@media (max-width: 600px) {
    .ship-filters { grid-template-columns: 1fr; gap: var(--s3); }
}

/* Ship cards on /ships list page */
.scard[hidden], .scard.is-hidden, .cards[hidden], .ship-empty-state[hidden] { display: none !important; }
.scard { min-height: 360px; }
.scard-specs { list-style: none; margin: 0 0 14px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.scard-specs li { font-size: 11px; line-height: 1.4; padding: 3px 8px; border-radius: var(--r-sm);
                  background: var(--bg); color: var(--ink-2); border: 1px solid var(--line);
                  display: inline-flex; align-items: center; gap: 4px; }
.badge-ice { position: relative; z-index: 2; background: var(--teal-bg); color: var(--teal);
             border: 1px solid var(--teal-line); font-weight: 600; cursor: help; border-radius: var(--r-sm);
             padding: 3px 8px; display: inline-flex; align-items: center; }
.badge-ice:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--teal); }
.badge-ice .ice-tooltip {
    position: absolute; bottom: calc(100% + 8px); left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--dark); color: var(--on-dark); font-family: var(--f-sans);
    font-size: 12px; font-weight: 400; line-height: 1.4; padding: 7px 11px;
    border-radius: var(--r-md); white-space: normal; width: max-content;
    max-width: 240px; box-shadow: var(--sh-pop); pointer-events: none;
    opacity: 0; visibility: hidden; transition: opacity .15s ease, transform .15s ease, visibility .15s;
    z-index: 20; text-align: center;
}
.badge-ice .ice-tooltip::after {
    content: ''; position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--dark);
}
.badge-ice:hover .ice-tooltip,
.badge-ice:focus-visible .ice-tooltip {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.scard-specs .num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.scard-departures { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.scard-departures .num { font-family: var(--f-mono); font-weight: 600;
                         font-variant-numeric: tabular-nums; color: var(--accent); }
.scard-action { display: inline-flex; align-items: center; justify-content: center;
                width: 28px; height: 28px; border-radius: var(--r-pill);
                background: var(--accent-soft); color: var(--accent);
                transition: transform .15s ease, background .15s ease, color .15s ease; }
.scard-action .icon { width: 14px; height: 14px; }
.scard:hover .scard-action { transform: translateX(2px); background: var(--accent);
                             color: var(--accent-ink); }

/* Operator filter bar on /operators page */
.operator-filters { display: grid; grid-template-columns: 1fr 1.2fr 1.2fr; gap: var(--s5); align-items: start; padding: var(--s2) 0 var(--s2); }
.operator-filter-item { min-width: 0; display: flex; flex-direction: column; }
.operator-filter-item label, .operator-filter-item .range-label {
    display: block; font: var(--t-label); text-transform: uppercase; letter-spacing: var(--ls-label);
    color: var(--muted); margin-bottom: var(--s1); height: 18px; line-height: 18px; }
.operator-filter-head { display: flex; justify-content: space-between; align-items: baseline; height: 18px; margin-bottom: var(--s1); }
.operator-filter-head .range-label { margin-bottom: 0; }
.operator-filter-head output { font-family: var(--f-mono); font-weight: 600; font-size: 13px; color: var(--accent); line-height: 18px; }
.operator-slider-wrap { height: 38px; display: flex; align-items: center; }
.operator-slider { width: 100%; margin: 0 12px; }
.filter-input-search {
    width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--line);
    border-radius: var(--r-md); background-color: var(--surface); font: var(--t-body);
    color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.filter-input-search:focus { outline: none; border-color: var(--accent); background: #ffffff; box-shadow: 0 0 0 3px var(--accent-ring); }
@media (max-width: 860px) {
    .operator-filters { grid-template-columns: 1fr 1fr; gap: var(--s4); }
    .operator-filter-item:first-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .operator-filters { grid-template-columns: 1fr; gap: var(--s3); }
    .operator-filter-item:first-child { grid-column: auto; }
}

/* Operator cards on /operators list page */
.ocard[hidden], .ocard.is-hidden, .operator-empty-state[hidden] { display: none !important; }
.ocard { min-height: 360px; }
.ocard .vcard-media.placeholder .icon { width: 44px; height: 44px; opacity: .45; }
.ocard-flag-badge {
    position: absolute; top: var(--s3); right: var(--s3);
    font-size: 20px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    z-index: 2; pointer-events: none; }
.ocard-flag-inline { display: inline-block; font-size: 17px; margin-left: 4px; vertical-align: baseline; }
.ocard-style { font-weight: 600; color: var(--usp); }

/* Regions Hub Page (/regions) & Activities Hub (/activities) */
.regions-hub,
.activities-hub {
    margin-bottom: var(--s12);
}
.hub-header {
    margin-bottom: var(--s5);
}

.act-category-jump {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s3);
    margin-top: var(--s5);
}
.act-jump-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: transform .15s ease, border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.act-jump-chip:hover {
    transform: translateY(-1px);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 3px 8px rgba(0, 102, 204, 0.12);
}
.act-jump-chip .chip-icon {
    font-size: 16px;
    line-height: 1;
}
.act-jump-chip .chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 7px;
    border-radius: var(--r-pill);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 11.5px;
    font-family: var(--f-mono);
    font-weight: 700;
}

.act-sections {
    display: flex;
    flex-direction: column;
    gap: var(--s10);
    margin-top: var(--s6);
}
.act-section {
    scroll-margin-top: 100px;
}
.act-section-head {
    margin-bottom: var(--s5);
}
.act-section-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}
.act-section-title-wrap .sec-icon {
    font-size: 24px;
    line-height: 1;
}
.act-section-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.01em;
}
.act-section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 9px;
    border-radius: var(--r-pill);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 12px;
    font-family: var(--f-mono);
    font-weight: 700;
}
.act-section-desc {
    margin: 6px 0 0;
    font-size: 14.5px;
    color: var(--ink-2);
    line-height: 1.5;
    max-width: 680px;
}

.regions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s6);
    grid-auto-flow: dense;
}
.activities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--s6);
}

/* Region & Activity Cards */
.rcard,
.acard {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--sh-card);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.rcard:hover,
.acard:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh-card-hover);
    border-color: rgba(0, 102, 204, 0.35);
}

.rcard-media,
.acard-media {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: var(--dark);
}
.rcard-media img,
.acard-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.rcard:hover .rcard-media img,
.acard:hover .acard-media img {
    transform: scale(1.04);
}
.rcard-scrim,
.acard-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15,23,42,0.1) 0%, rgba(15,23,42,0.65) 100%);
    pointer-events: none;
}
.rcard-badge-featured,
.acard-badge-featured {
    position: absolute;
    top: var(--s3);
    left: var(--s3);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    background: var(--usp);
    border-radius: var(--r-pill, 999px);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
    color: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    z-index: 2;
}
.rcard-tagline,
.acard-tagline {
    position: absolute;
    bottom: var(--s3);
    left: var(--s3);
    right: var(--s3);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
    z-index: 2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rcard-body,
.acard-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--s5);
    gap: var(--s3);
}
.rcard-top,
.acard-top {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.rcard-title,
.acard-title {
    font: 400 20px/1.3 var(--f-serif);
    letter-spacing: -.01em;
    margin: 0;
}
.rcard-title a,
.acard-title a {
    color: var(--ink);
    text-decoration: none;
}
.rcard-title a:hover,
.acard-title a:hover {
    color: var(--accent);
}
.acard-title .act-emoji {
    margin-right: 6px;
    font-size: 20px;
    line-height: 1;
    vertical-align: -2px;
}
.rcard-subtitle,
.acard-subtitle {
    font-family: var(--f-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--usp);
    margin-top: -2px;
    line-height: 1.4;
}
.rcard-desc,
.acard-desc {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ink-2);
    margin: 0;
}

/* Cross-linked Tags (Activities / Regions) */
.rcard-activities,
.acard-regions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 2px;
}
.rcard-activities-label,
.acard-regions-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}
.rcard-activity-pills,
.acard-region-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.rcard-activity-pills li,
.acard-region-pills li {
    display: inline-flex;
    margin: 0;
    padding: 0;
}
.rcard-activity-pill,
.acard-region-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-size: 12px;
    line-height: 1.3;
    color: var(--ink);
    text-decoration: none;
    transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
a.rcard-activity-pill:hover,
a.acard-region-pill:hover {
    background: var(--card);
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
}
.rcard-activity-pill .act-icon {
    font-size: 13px;
    line-height: 1;
}

/* Footer */
.rcard-foot,
.acard-foot {
    margin-top: auto;
    padding-top: var(--s4);
    border-top: 1px solid var(--line);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s3);
}
.rcard-action,
.acard-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--r-pill);
    background: var(--accent-soft);
    color: var(--accent);
    border: none;
    flex-shrink: 0;
    transition: transform .15s ease, background .15s ease, color .15s ease;
}
.rcard-action .icon,
.acard-action .icon {
    width: 14px;
    height: 14px;
}
.rcard:hover .rcard-action,
.rcard:hover .scard-action,
.acard:hover .acard-action,
.acard:hover .scard-action {
    background: var(--accent);
    color: var(--accent-ink);
    transform: translateX(2px);
}

/* Dynamic Editorial Bento Rhythm for Regions */
@media (min-width: 960px) {
    /* Hero Card 1 (Antarctic Peninsula) — Full-width panoramic gateway */
    .regions-grid > .rcard:first-child {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1.15fr 1fr;
    }
    .regions-grid > .rcard:first-child .rcard-media {
        height: 100%;
        min-height: 320px;
    }
    .regions-grid > .rcard:first-child .rcard-title {
        font-size: 26px;
    }
    .regions-grid > .rcard:first-child .rcard-desc {
        font-size: 15px;
        line-height: 1.6;
    }

    /* Asymmetrical wide feature cards (South Georgia, Ross Sea, Patagonia) */
    .regions-grid > .rcard:nth-child(4),
    .regions-grid > .rcard:nth-child(8),
    .regions-grid > .rcard:nth-child(13) {
        grid-column: span 2;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .regions-grid > .rcard:nth-child(4) .rcard-media,
    .regions-grid > .rcard:nth-child(8) .rcard-media,
    .regions-grid > .rcard:nth-child(13) .rcard-media {
        height: 100%;
        min-height: 280px;
    }
    .regions-grid > .rcard:nth-child(4) .rcard-title,
    .regions-grid > .rcard:nth-child(8) .rcard-title,
    .regions-grid > .rcard:nth-child(13) .rcard-title {
        font-size: 22px;
    }
}

@media (max-width: 959px) and (min-width: 641px) {
    .regions-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--s4);
    }
    .regions-grid > .rcard:first-child,
    .regions-grid > .rcard:nth-child(4),
    .regions-grid > .rcard:nth-child(13) {
        grid-column: span 2;
    }
}

@media (max-width: 640px) {
    .regions-grid {
        grid-template-columns: 1fr;
        gap: var(--s4);
    }
    .regions-grid > .rcard {
        grid-column: span 1 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .activities-grid {
        grid-template-columns: 1fr;
        gap: var(--s4);
    }
}

/* Seasonality Guide on /departures */
.seasonality-guide {
    margin: var(--s6) 0 var(--s8);
}
.seasonality-header {
    margin-bottom: var(--s4);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
}
.seasonality-title {
    font: 400 24px/1.25 var(--f-serif);
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0;
}
.season-filter-status {
    display: inline-flex;
    align-items: center;
    gap: var(--s3);
    padding: 5px 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    font-size: 13px;
    color: var(--ink-2);
}
.season-filter-status[hidden] {
    display: none !important;
}
.season-status-text strong {
    color: var(--ink);
}
.seasonality-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s4);
}
.season-block {
    border-radius: var(--r-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--sh-card);
    transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .2s ease, background-color .2s ease;
    cursor: pointer;
    user-select: none;
    position: relative;
    outline: none;
}
.season-block.season-early {
    background: #F2F8FC;
    border: 1px solid #D6E8F6;
}
.season-block.season-peak {
    background: #FAF7F0;
    border: 1px solid #EFE4CD;
}
.season-block.season-late {
    background: #F6F4FB;
    border: 1px solid #E4DDF4;
}

.season-block:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-card-hover);
}
.season-block.season-early:hover {
    border-color: #38BDF8;
    background: #EDF6FD;
}
.season-block.season-peak:hover {
    border-color: #F59E0B;
    background: #F6F2E7;
}
.season-block.season-late:hover {
    border-color: #8B5CF6;
    background: #F2EFF9;
}

.season-block:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--accent);
}

/* Active selected season filter states */
.season-block.is-active {
    transform: translateY(-2px);
}
.season-block.season-early.is-active {
    background: #E5F3FC;
    border-color: #0284C7;
    box-shadow: 0 0 0 2px var(--card), 0 0 0 4px #0284C7, var(--sh-card-hover);
}
.season-block.season-peak.is-active {
    background: #F5EEDB;
    border-color: #D97706;
    box-shadow: 0 0 0 2px var(--card), 0 0 0 4px #D97706, var(--sh-card-hover);
}
.season-block.season-late.is-active {
    background: #EFE8F9;
    border-color: #7C3AED;
    box-shadow: 0 0 0 2px var(--card), 0 0 0 4px #7C3AED, var(--sh-card-hover);
}

.season-art {
    position: relative;
    width: 100%;
    height: 145px;
    background: #0B1D3A;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.season-svg {
    display: block;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.season-block:hover .season-svg {
    transform: scale(1.03);
}
.season-body {
    padding: var(--s4) var(--s5) var(--s5);
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
}
.season-eyebrow {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 2px;
}
.season-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.season-dot.early { background: #0284C7; box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.2); }
.season-dot.peak { background: #D97706; box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.2); }
.season-dot.late { background: #7C3AED; box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2); }

.season-pill {
    font-family: var(--f-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.season-pill.early { color: #0284C7; }
.season-pill.peak { color: #D97706; }
.season-pill.late { color: #7C3AED; }

.season-name {
    margin: 0;
    font: 400 18px/1.3 var(--f-serif);
    letter-spacing: -0.01em;
    color: var(--ink);
}
.season-desc {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--muted);
    flex: 1;
}

.season-foot {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.season-action {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    transition: color .15s ease;
}
.season-early .season-action { color: #0284C7; }
.season-peak .season-action { color: #D97706; }
.season-late .season-action { color: #7C3AED; }

.season-action-idle { display: inline-flex; align-items: center; gap: 4px; }
.season-action-active { display: none; }

.season-block.is-active .season-action-idle { display: none; }
.season-block.is-active .season-action-active { display: inline-flex; font-weight: 700; }

.months-cards .mcard.is-hidden,
.months-cards .mcard[hidden] {
    display: none !important;
}

@media (max-width: 900px) {
    .seasonality-grid {
        grid-template-columns: 1fr;
        gap: var(--s3);
    }
    .season-block {
        display: grid;
        grid-template-columns: 180px 1fr;
    }
    .season-art {
        height: 100%;
        min-height: 145px;
    }
}
@media (max-width: 600px) {
    .season-block {
        display: flex;
        flex-direction: column;
    }
    .season-art {
        height: 130px;
    }
}

/* Month Cards (.mcard) on /departures */
.mcard {
    min-height: 250px;
}
.mcard-body {
    padding: var(--s5);
    display: flex;
    flex-direction: column;
    gap: var(--s3);
    height: 100%;
}
.mcard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--s3);
}
.mcard-title-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mcard-title {
    margin: 0;
    font: 400 22px/1.25 var(--f-serif);
    letter-spacing: -0.01em;
}
.mcard-title a {
    color: var(--ink);
    text-decoration: none;
}
.mcard-title a:hover {
    color: var(--accent);
}
.mcard-count {
    font-size: 13px;
    color: var(--muted);
}
.mcard-season-tag {
    font-family: var(--f-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--usp);
}
.mcard-season-tag.season-early,
.mcard-season-early .mcard-season-tag {
    color: #0369A1;
}
.mcard-season-tag.season-peak,
.mcard-season-peak .mcard-season-tag {
    color: var(--usp);
}
.mcard-season-tag.season-late,
.mcard-season-late .mcard-season-tag {
    color: #6D28D9;
}
.mcard-blurb {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink-2);
}
.mcard-badges {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.mcard-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-size: 12px;
    line-height: 1.3;
    color: var(--ink);
}
.mcard-badge-icon {
    font-size: 13px;
    line-height: 1;
}
.mcard:hover .scard-action {
    transform: translateX(2px);
    background: var(--accent);
    color: var(--accent-ink);
}

/* Ship hub: spec strip + curated gallery above the departures, cabin cards
   and rehosted deck plans below them */
.ship-overview { margin: 0 0 var(--s6); }
.ship-specs { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); margin: 0 0 var(--s4);
              padding: var(--s3) var(--s4); background: var(--card);
              border: 1px solid var(--line); border-radius: var(--r-lg); }
.ship-specs div { display: flex; flex-direction: column; gap: 2px; }
.ship-specs dt { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ship-specs dd { margin: 0; font-size: 15px; color: var(--ink); }
.ship-specs dd.num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.ship-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
                gap: var(--s3); }
.ship-photo { margin: 0; }
.ship-photo.is-lead { grid-column: 1 / -1; }
.ship-photo img { display: block; width: 100%; height: 240px; object-fit: cover;
                  border-radius: var(--r-lg); background: var(--photo-placeholder); }
.ship-photo.is-lead img { height: 400px; }
.ship-photo figcaption { margin-top: 4px; font-size: 11px; color: var(--muted); }
.ship-photo figcaption a { color: var(--muted); text-decoration: underline; }
.ship-cabins, .ship-decks { margin-top: var(--s8); }
.ship-cabins h2, .ship-decks h2 { font: 400 24px/1.3 var(--f-serif); margin: 0 0 var(--s4); }
.cabin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s4); }
.cabin-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.cabin-card > a > img,
.cabin-card > img { display: block; width: 100%; height: 170px; object-fit: cover;
                    background: var(--photo-placeholder); }
.cabin-body { padding: var(--s3) var(--s4) var(--s4); }
.cabin-body h3 { margin: 0 0 var(--s1); font: var(--t-title); }
.cabin-meta { margin: 0 0 var(--s2); font-size: 13px; color: var(--muted); }
.cabin-meta .num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.cabin-body p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.cabin-features { margin: var(--s2) 0 0; padding: 0; list-style: none;
                  font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.cabin-features li { padding-left: 18px; position: relative; }
.cabin-features li::before { content: ''; position: absolute; left: 2px; top: .55em;
                             width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.cabin-incabin { margin-top: var(--s3); border-top: 1px solid var(--line); padding-top: var(--s2); }
.cabin-incabin summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent);
                         list-style: none; display: flex; align-items: center; gap: 6px; }
.cabin-incabin summary::-webkit-details-marker { display: none; }
.cabin-incabin summary::after { content: '+'; font-family: var(--f-mono); }
.cabin-incabin[open] summary::after { content: '–'; }
.cabin-incabin ul { margin: var(--s2) 0 0; padding: 0; list-style: none;
                    font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.cabin-incabin li { padding-left: 18px; position: relative; }
.cabin-incabin li::before { content: ''; position: absolute; left: 2px; top: .55em;
                            width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.ship-departures { margin-top: var(--s8); }
.ship-departures-head { display: flex; align-items: baseline; justify-content: space-between;
                        gap: var(--s4); margin: 0 0 var(--s4); }
.ship-departures-head h2 { font: 400 24px/1.3 var(--f-serif); margin: 0; }
.ship-departures-all { font-size: 14px; white-space: nowrap; color: var(--accent); }
.deck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s4); }
.deck-plan { margin: 0; background: var(--card); border: 1px solid var(--line);
             border-radius: var(--r-lg); padding: var(--s3); }
.deck-plan img { display: block; width: 100%; height: auto; }
.deck-plan figcaption { margin-top: 6px; font-size: 12px; color: var(--muted); }
.deck-plan figcaption a { color: var(--muted); text-decoration: underline; }
.deck-pdf { display: inline-flex; align-items: center; padding: var(--s3) var(--s4);
            background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
            color: var(--accent); }

/* Status pills. The prototype only draws available and sold out; limited and
   unknown keep the same shape so all four VoyageStatus values stay legible. */
.badge { display: inline-flex; align-items: center; gap: 5px; font: var(--t-badge);
         padding: 3px 10px; border-radius: var(--r-pill); border: 1px solid transparent;
         white-space: nowrap; }
.badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.badge.available { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); }
.badge.limited { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.badge.sold_out { background: var(--bad-bg); color: var(--bad); border-color: var(--bad-line); }
.badge.unknown { background: var(--bg); color: var(--muted); border-color: var(--line); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags span { font-size: 12px; background: var(--bg); border-radius: var(--r-pill); padding: 2px 8px;
             color: var(--muted); }
.tags.addons span { background: var(--accent-soft); color: var(--accent); }

/* Calendar view */
.cal-months { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.cal-months a, .cal-months .current { padding: 6px 12px; border: 1px solid var(--line);
    border-radius: var(--r-pill); background: var(--card); font-size: 14px; color: var(--ink); }
.cal-months .current { background: var(--ink); color: #fff; border-color: var(--ink); }
.cal-months a:hover { text-decoration: none; background: var(--accent-soft); }
.cal-months small { font-size: 12px; opacity: .65; }

.calendar { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
            overflow: hidden; }
.cal-head, .cal-week { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-head div { padding: 8px 10px; font-size: 12px; text-transform: uppercase;
    letter-spacing: .04em; color: var(--muted); background: var(--bg);
    border-bottom: 1px solid var(--line); }
.cal-day { min-height: 112px; min-width: 0; padding: 6px; display: flex; flex-direction: column;
           gap: 4px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cal-week .cal-day:last-child { border-right: 0; }
.calendar .cal-week:last-child .cal-day { border-bottom: 0; }
.cal-day .d { font-size: 12px; color: var(--muted); }
.cal-day.out { background: var(--bg); }
.cal-day.out .d { opacity: .45; }
.cal-chip { display: block; background: var(--accent-soft); color: var(--accent);
            border-radius: var(--r-sm); padding: 3px 7px; font-size: 12px; line-height: 1.35; }
.cal-chip:hover { text-decoration: none; background: #d6e7f3; }
.cal-chip b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden;
              text-overflow: ellipsis; }
.cal-chip span { opacity: .85; font-family: var(--f-mono); font-size: 11px;
                 font-variant-numeric: tabular-nums; }
.cal-chip.limited { background: #fdf1de; color: var(--warn); }
.cal-chip.limited:hover { background: #f8e6c6; }
.cal-chip.sold_out { background: #fbe5e3; color: var(--bad); }
.cal-chip.sold_out:hover { background: #f6d6d3; }
.cal-more summary { cursor: pointer; font-size: 12px; color: var(--accent); list-style: none; }
.cal-more summary::-webkit-details-marker { display: none; }
.cal-more summary:hover { text-decoration: underline; }
.cal-more[open] summary { display: none; }
.cal-more .cal-chip { margin-top: 4px; }

/* Timeline (Gantt) view — rows are ships, bars are voyages */
.tl-scroll { overflow-x: auto; background: var(--card); border: 1px solid var(--line);
             border-radius: var(--r-lg); }
.timeline { --day-w: 32px; --ship-w: 200px;
            min-width: calc(var(--ship-w) + var(--days) * var(--day-w)); }
.tl-row { display: flex; border-bottom: 1px solid var(--line); }
.timeline .tl-row:last-child { border-bottom: 0; }
.tl-ship { flex: 0 0 var(--ship-w); position: sticky; left: 0; z-index: 2;
           background: var(--card); padding: 8px 12px; border-right: 1px solid var(--line); }
.tl-ship b { display: block; font-size: 13px; line-height: 1.3; }
.tl-ship small { color: var(--muted); font-size: 11px; }
.tl-head .tl-ship { background: var(--bg); font-size: 11px; text-transform: uppercase;
                    letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.tl-days { display: grid; grid-template-columns: repeat(var(--days), var(--day-w));
           flex: 1 0 auto; background: var(--bg); }
.tl-days div { padding: 8px 0 6px; font: var(--t-num); font-size: 11px;
               font-variant-numeric: tabular-nums; text-align: center; color: var(--muted); }
.tl-days div.we { background: rgba(20, 35, 46, .05); }
.tl-track { flex: 1 0 auto; padding: 4px 0;
    background-image: repeating-linear-gradient(to right,
        transparent 0, transparent calc(var(--day-w) - 1px),
        var(--line) calc(var(--day-w) - 1px), var(--line) var(--day-w));
    background-size: calc(var(--days) * var(--day-w)) 100%; background-repeat: no-repeat; }
.tl-lane { display: grid; grid-template-columns: repeat(var(--days), var(--day-w)); height: 32px; }
.tl-bar { display: flex; align-items: center; min-width: 0; margin: 2px;
          background: var(--accent-soft); color: var(--accent);
          border: 1px solid rgba(13, 92, 140, .3); border-radius: var(--r-sm);
          padding: 0 7px; font-size: 12px; }
.tl-bar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.tl-bar:hover { text-decoration: none; background: #d6e7f3; }
.tl-bar.limited { background: #fdf1de; color: var(--warn); border-color: rgba(178, 106, 0, .35); }
.tl-bar.limited:hover { background: #f8e6c6; }
.tl-bar.sold_out { background: #fbe5e3; color: var(--bad); border-color: rgba(179, 54, 45, .3); }
.tl-bar.sold_out:hover { background: #f6d6d3; }
.tl-bar.clip-s { border-top-left-radius: 0; border-bottom-left-radius: 0;
                 border-left-style: dashed; margin-left: 0; }
.tl-bar.clip-e { border-top-right-radius: 0; border-bottom-right-radius: 0;
                 border-right-style: dashed; margin-right: 0; }
.tl-hint { color: var(--muted); font-size: 13px; margin-top: 10px; }

/* Narrow screens: the grid degrades into a per-day agenda list */
.cal-agenda { display: none; }
@media (max-width: 720px) {
    .calendar { display: none; }
    .cal-agenda { display: block; }
    .agenda-day { margin-bottom: 16px; }
    .agenda-day h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
                     color: var(--muted); margin: 0 0 6px; }
    .agenda-item { display: flex; justify-content: space-between; align-items: center; gap: 12px;
        background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
        padding: 10px 12px; margin-bottom: 6px; color: var(--ink); }
    .agenda-item:hover { text-decoration: none; border-color: var(--accent); }
    .agenda-item .what { min-width: 0; }
    .agenda-item .what b { display: block; font-size: 15px; }
    .agenda-item .what small { display: block; color: var(--muted); font-size: 13px;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .agenda-item .price { font-weight: 700; font-size: 14px; white-space: nowrap; }
}

/* Pagination */
.pager { display: flex; gap: 8px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
.pager a, .pager span { padding: 6px 12px; border: 1px solid var(--line);
    border-radius: var(--r-md); background: var(--card); font: var(--t-num); font-size: 13px;
    font-variant-numeric: tabular-nums; }
.pager span.gap { border: 0; background: none; color: var(--muted); }
.pager span.current { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Offers table (voyage detail) */
table.offers {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-card);
}
table.offers th,
table.offers td {
    padding: 12px 14px;
    text-align: left;
    font-size: 14px;
    border-bottom: 1px solid var(--line);
    background: #ffffff;
    vertical-align: top;
}
table.offers th {
    background: #F8FAFC;
    font: var(--t-label);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}
table.offers tr:last-child td { border-bottom: 0; }
table.offers tr.best td { background: #f0f8f3; }
table.offers .best-tag { display: inline-block; font-size: 11px; font-weight: 700; color: var(--ok);
    text-transform: uppercase; letter-spacing: .04em; margin-left: 6px; }

/* Cabin offers rich layout: photos and descriptions */
.offer-cabin-cell { min-width: 260px; max-width: 440px; }
.offer-cabin-wrap { display: flex; align-items: flex-start; gap: 12px; }
.offer-cabin-thumb {
    position: relative; width: 76px; height: 56px; flex-shrink: 0;
    border-radius: var(--r-md); overflow: hidden; background: var(--surface);
    border: 1px solid var(--line); display: block; cursor: pointer;
}
.offer-cabin-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .2s ease;
}
.offer-cabin-thumb:hover img { transform: scale(1.06); }
.offer-cabin-thumb .thumb-zoom {
    position: absolute; bottom: 2px; right: 4px; font-size: 11px; color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85); opacity: 0; transition: opacity .15s ease;
}
.offer-cabin-thumb:hover .thumb-zoom { opacity: 1; }
.offer-cabin-info { flex: 1; min-width: 0; }
.offer-cabin-title {
    font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.3;
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.offer-cabin-meta {
    font-size: 12px; font-weight: 500; color: var(--muted); display: block; margin-top: 2px;
}
.offer-cabin-desc {
    font-size: 13px; line-height: 1.5; color: var(--ink-2); margin: 5px 0 0;
}
.offer-cabin-info .cabin-meta {
    margin: 2px 0 0; font-size: 12.5px; color: var(--muted);
}
.offer-cabin-info .cabin-meta .num {
    font-family: var(--f-mono); font-variant-numeric: tabular-nums;
}
.offer-cabin-info .cabin-features {
    margin: 6px 0 0; padding: 0; list-style: none;
    font-size: 12.5px; line-height: 1.5; color: var(--ink-2);
}
.offer-cabin-info .cabin-features li {
    padding-left: 16px; position: relative;
}
.offer-cabin-info .cabin-features li::before {
    content: ''; position: absolute; left: 2px; top: .55em;
    width: 4px; height: 4px; border-radius: 50%; background: var(--accent);
}
.offer-cabin-info .cabin-incabin {
    margin-top: 8px; border-top: 1px solid var(--line); padding-top: 6px;
}
.offer-cabin-info .cabin-incabin summary {
    cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--accent);
    list-style: none; display: flex; align-items: center; gap: 6px;
}
.offer-cabin-info .cabin-incabin summary::-webkit-details-marker { display: none; }
.offer-cabin-info .cabin-incabin summary::after { content: '+'; font-family: var(--f-mono); }
.offer-cabin-info .cabin-incabin[open] summary::after { content: '–'; }
.offer-cabin-info .cabin-incabin ul {
    margin: 6px 0 0; padding: 0; list-style: none;
    font-size: 12px; line-height: 1.5; color: var(--ink-2);
}
.offer-cabin-info .cabin-incabin li {
    padding-left: 16px; position: relative;
}
.offer-cabin-info .cabin-incabin li::before {
    content: ''; position: absolute; left: 2px; top: .55em;
    width: 4px; height: 4px; border-radius: 50%; background: var(--accent);
}

.offers-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 1024px) {
    table.offers th,
    table.offers td {
        padding: 8px 8px;
        font-size: 13px;
    }
    table.offers th {
        font-size: 10.5px;
        padding: 7px 8px;
    }
    .offer-cabin-cell {
        min-width: 150px;
        max-width: 250px;
    }
    .offer-cabin-thumb {
        width: 52px;
        height: 39px;
    }
    .offer-cabin-wrap {
        gap: 8px;
    }
    .offer-cabin-title {
        font-size: 13px;
    }
    .offer-cabin-desc {
        font-size: 11.5px;
        line-height: 1.4;
    }
    table.offers td:last-child .btn {
        padding: 7px 11px;
        font-size: 12.5px;
    }
}

@media (max-width: 880px) {
    table.offers {
        display: block;
        width: 100%;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
    }
    table.offers tbody {
        display: block;
        width: 100%;
    }
    table.offers thead {
        display: none;
    }
    table.offers tr {
        display: block;
        background: #ffffff;
        border: 1px solid var(--line);
        border-radius: var(--r-lg);
        margin-bottom: 14px;
        padding: 12px 16px;
        box-shadow: var(--sh-card);
    }
    table.offers tr.best {
        background: #f0f8f3;
        border-color: rgba(26, 122, 69, 0.35);
    }
    table.offers td {
        border: 0 !important;
        background: transparent !important;
        padding: 6px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 13.5px;
    }
    table.offers td.offer-cabin-cell {
        display: block;
        padding-bottom: 10px;
        margin-bottom: 6px;
        border-bottom: 1px solid var(--line) !important;
    }
    table.offers td[data-label]::before {
        content: attr(data-label);
        display: inline-block;
        font-size: 11.5px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--muted);
        flex-shrink: 0;
    }
    table.offers td.offer-cabin-cell::before {
        display: none;
    }
    table.offers td:last-child {
        padding-top: 10px;
        margin-top: 6px;
        border-top: 1px solid var(--line) !important;
        display: block;
    }
    table.offers td:last-child .btn {
        display: flex;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        justify-content: center;
        padding: 10px 16px;
    }
    table.offers td:empty { display: none; }
    .offer-cabin-cell { min-width: 0; max-width: 100%; }
    .offer-cabin-wrap { gap: 12px; }
    .offer-cabin-thumb { width: 84px; height: 62px; }
}

.btn { display: inline-flex; align-items: center; justify-content: center;
       background: var(--accent); color: #fff !important;
       border-radius: var(--r-md); padding: 10px 18px; font: var(--t-body); font-weight: 600;
       white-space: nowrap; transition: background-color .15s ease, transform .1s ease, box-shadow .15s ease;
       box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
.btn:hover { background: var(--accent-hover); text-decoration: none; opacity: 1;
             box-shadow: 0 2px 6px rgba(0, 95, 204, 0.25); }
.btn.ghost { background: transparent; color: var(--accent) !important; border: 1px solid var(--line); }
.btn.ghost:hover { border-color: var(--accent); opacity: 1; }
.btn.disabled { pointer-events: none; opacity: .45; cursor: default; }

/* Compare — card selector.
   The stretched link lives on .vcard-title (see the Voyage cards block); this pill
   sits above it at z-index 3, and the operator/ship links at z-index 2. */
.compare-check { position: absolute; top: var(--s2); right: var(--s2); z-index: 3;
    display: inline-flex; align-items: center; gap: 6px; font: var(--t-body);
    font-weight: 600; color: var(--ink);
    background: rgba(255, 255, 255, .92); border: 1px solid var(--line);
    border-radius: var(--r-pill);
    padding: 4px 10px 4px 7px; cursor: pointer; backdrop-filter: blur(2px); }
.compare-check:hover { border-color: var(--accent); }
.compare-check input { accent-color: var(--accent); margin: 0; cursor: pointer; }
.compare-check input:disabled { cursor: not-allowed; }
.compare-check:has(input:disabled) { opacity: .5; cursor: not-allowed; }

/* Compare — sticky tray */
.compare-tray { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
    background: var(--card); border-top: 1px solid var(--line);
    box-shadow: 0 -4px 20px rgba(20, 35, 46, .12); padding: 10px 0;
    padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
.compare-tray[hidden] { display: none; }
.compare-tray.pulse { animation: ct-pulse .4s ease; }
@keyframes ct-pulse { 0%, 100% { box-shadow: 0 -4px 20px rgba(20, 35, 46, .12); }
    40% { box-shadow: 0 -4px 24px rgba(179, 54, 45, .5); } }
.compare-tray .wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ct-lead { line-height: 1.2; }
.ct-lead b { font-size: 15px; }
.ct-hint { display: block; font-size: 12px; color: var(--muted); }
.ct-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; min-width: 0; }
.compare-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 220px;
    font-size: 12px; background: var(--accent-soft); color: var(--ink);
    border-radius: var(--r-pill); padding: 3px 4px 3px 10px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
.compare-chip-x { border: 0; background: none; cursor: pointer; font-size: 15px; line-height: 1;
    color: var(--muted); padding: 0 4px; }
.compare-chip-x:hover { color: var(--bad); }
.ct-actions { display: flex; gap: 8px; margin-left: auto; }

/* Compare — table page */
.compare-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.compare-head .count { color: var(--muted); font-size: 14px; }
.compare-empty svg { width: 56px; height: 56px; color: #a8bcc9; }
.compare-empty p { max-width: 420px; margin: 12px auto 20px; }
.compare-wrap { overflow-x: auto; margin: 16px 0; -webkit-overflow-scrolling: touch;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: 0 6px 18px rgba(20, 35, 46, .06); }
/* table-layout: fixed — every trip column gets the same width regardless of
   content (the min-width for N columns is set inline on the table) */
.compare-table { border-collapse: separate; border-spacing: 0; width: 100%; table-layout: fixed; }
/* row-label column stays put while the trip columns scroll under it */
.compare-table th[scope="row"] { position: sticky; left: 0; z-index: 2; background: var(--card);
    text-align: left; font-size: 12px; text-transform: uppercase;
    letter-spacing: .04em; color: var(--muted); font-weight: 600; white-space: nowrap;
    padding: 12px 14px 12px 16px; vertical-align: middle; width: 130px;
    border-bottom: 1px solid var(--line); box-shadow: 1px 0 0 var(--line); }
.compare-table td { border-left: 1px solid var(--line); border-bottom: 1px solid var(--line);
    padding: 12px 14px; vertical-align: top; font-size: 15px; overflow-wrap: anywhere; }
.compare-table tr:last-child :is(td, th) { border-bottom: 0; }
.compare-table .c-section :is(th, td) { background: var(--bg); padding-top: 8px; padding-bottom: 8px;
    font-size: 11px; }
.compare-table .c-photo td { vertical-align: bottom; border-bottom-color: transparent; padding-bottom: 4px; }
.compare-table .c-photo th { border-bottom-color: transparent; box-shadow: none; background: transparent; }
.c-thumb { display: block; width: 100%; height: 130px; border-radius: var(--r-md); overflow: hidden;
    background: var(--accent-soft); }
.c-thumb.placeholder { display: flex; align-items: center; justify-content: center; color: var(--accent); }
.c-thumb.placeholder svg { width: 44px; height: 44px; }
.c-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
.c-thumb:hover img { transform: scale(1.03); }
.c-overline { display: block; margin-top: 10px; font-size: 11px; text-transform: uppercase;
    letter-spacing: .05em; color: var(--muted); }
.c-title { display: block; margin-top: 2px; font-weight: 700; font-size: 15px; color: inherit; line-height: 1.3; }
.c-remove { display: inline-block; margin-top: 6px; font-size: 12px; color: var(--muted); }
.c-remove:hover { color: var(--bad); text-decoration: none; }
.c-price.is-best { background: #f0f8f3; }
.c-price b { font: var(--t-price); font-size: 18px; font-variant-numeric: tabular-nums; }
.c-price small { display: block; color: var(--muted); font-size: 12px; }
.val-tag { display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .03em; color: var(--ok);
    background: #e2f3ea; border-radius: var(--r-pill); padding: 1px 8px; }
td .val-tag { margin-left: 6px; }
.c-price .val-tag { display: block; width: fit-content; margin-left: 0; }
.c-route { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.compare-table .muted { color: var(--muted); }
.compare-table .tags { margin: 0; }
.c-actions .btn { display: block; text-align: center; }
.c-actions .btn + .btn { margin-top: 6px; }

/* Compare — "AI match" rows inside the table (filled by ai_compare_controller) */
.compare-table tr.c-ai-row :is(td, th) { background: #f3f9ff; }
.compare-table .c-ai-head th { color: var(--accent); }
.c-ai-intro { font-size: 13.5px; }
.c-ai-cell { font-size: 13.5px; }
.ai-headline { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--accent); }
.c-ai-cell ul { margin: 0 0 10px; padding-left: 16px; }
.c-ai-cell li { margin: 3px 0; }
.ai-ideal { margin: 0; font-size: 13px; color: var(--muted);
    border-top: 1px dashed #cfe0ed; padding-top: 8px; }
.ai-ideal b { color: var(--ink); font-weight: 600; }
.c-ai-tip { font-size: 13px; }
.c-ai-tip:not(:empty)::before { content: "💡 "; }
/* skeleton loaders shown in the AI cells while /compare/ai runs */
.ai-skeleton { display: grid; gap: 8px; padding: 2px 0; }
.ai-skeleton span { height: 11px; border-radius: var(--r-sm);
    background: linear-gradient(90deg, #dde9f2 25%, #eef5fa 45%, #dde9f2 65%);
    background-size: 200% 100%; animation: ai-shimmer 1.2s linear infinite; }
.ai-skeleton span:nth-child(2) { width: 82%; }
.ai-skeleton span:nth-child(3) { width: 64%; }
@keyframes ai-shimmer { to { background-position: -200% 0; } }

/* Compare — route map thumbnails (click to zoom via glightbox) */
.c-map { display: block; height: 110px; border: 1px solid var(--line); border-radius: var(--r-md);
    overflow: hidden; background: #fff; cursor: zoom-in; }
.c-map img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.c-map:hover { border-color: var(--accent); }

/* Price trend chart */
.price-trend { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 16px; margin: 8px 0 24px; }
.pt-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.price-trend h2 { margin: 0; font-size: 18px; }
.pt-sub { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.pt-delta { font-family: var(--f-mono); font-weight: 600; font-size: 15px;
             font-variant-numeric: tabular-nums; text-align: right; line-height: 1.25;
             white-space: nowrap; }
.pt-delta small { display: block; font-size: 11px; font-weight: 400; color: var(--muted); }
.pt-delta.down { color: var(--ok); }
.pt-delta.up { color: var(--bad); }
.pt-delta.flat { color: var(--muted); }
.pt-plot { position: relative; margin: 14px 0 0; }
.pt-chart { display: block; width: 100%; height: 120px; overflow: visible; }
.pt-line-now { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 3 4; opacity: .55;
               vector-effect: non-scaling-stroke; }
.pt-mark { position: absolute; transform: translate(-50%, calc(-100% - 8px)); white-space: nowrap;
           font-size: 11px; font-weight: 600; color: var(--ink); background: rgba(255, 255, 255, .92);
           border: 1px solid var(--line); border-radius: var(--r-sm); padding: 1px 6px; pointer-events: none; }
.pt-mark.below { transform: translate(-50%, 10px); }
.pt-mark.down { color: var(--ok); }
.pt-mark.up { color: var(--bad); }
.pt-axis { position: relative; height: 16px; margin: 2px 0 6px; font-size: 11px; color: var(--muted); }
.pt-axis span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.pt-axis .pt-axis-now { font-weight: 600; color: var(--accent); }
.pt-area { fill: var(--accent-soft); stroke: none; }
.pt-line { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke;
    stroke-linejoin: round; stroke-linecap: round; }
/* Dots are HTML overlays, not SVG circles: the chart SVG stretches with
   preserveAspectRatio="none", which would smear a <circle> into an ellipse. */
.pt-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent); transform: translate(-50%, -50%); }
.pt-dot-last { width: 10px; height: 10px; box-shadow: 0 0 0 2px var(--card); }
.pt-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
    font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 10px; }
.pt-foot b { color: var(--ink); }
.pt-note { margin: 8px 0 0; font-size: 12px; color: var(--muted); }

/* --- Redesigned Voyage Detail Page --- */

/* Hero Header with Conditional Photo */
.voyage-hero-header { margin: 12px 0 24px; }
.voyage-hero-header.has-photo {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 28px;
    align-items: center;
}
.voyage-hero-media {
    position: relative;
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--sh-card);
    border: 1px solid var(--line);
    background: var(--card);
}
.voyage-hero-media a { display: block; cursor: zoom-in; }
.voyage-hero-media img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform 0.25s ease;
}
.voyage-hero-media:hover img { transform: scale(1.02); }
.voyage-hero-body { display: flex; flex-direction: column; gap: 8px; }
.voyage-hero-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.voyage-hero-month-pill {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-soft);
    padding: 3px 10px;
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.15s ease;
}
.voyage-hero-month-pill:hover { background: rgba(0, 95, 204, 0.2); }
.voyage-hero-title {
    margin: 0;
    font: 400 32px/1.2 var(--f-serif);
    color: var(--ink);
    letter-spacing: -0.015em;
}
.voyage-hero-subtitle {
    margin: 0;
    font-size: 15px;
    color: var(--muted);
    line-height: 1.5;
}
.voyage-hero-subtitle strong { color: var(--ink); }
.voyage-hero-subtitle a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.15s ease;
}
.voyage-hero-subtitle a:hover {
    color: var(--accent-dark, #0f3044);
    text-decoration: underline;
}

/* Key Specifications Dashboard Card / Spec-Sheet */
.voyage-specs-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 0;
    box-shadow: var(--sh-card);
    margin: 0 0 32px;
    overflow: visible;
}
.specs-card-layout {
    display: grid;
    grid-template-columns: 1fr;
    background: var(--line);
    border-radius: 0;
    overflow: visible;
}
.voyage-specs-card.has-ship-photo .specs-card-layout {
    grid-template-columns: 1fr 240px;
    gap: 1px;
}
.specs-grid {
    display: grid;
    grid-template-columns: 1.55fr 1fr 1fr 1fr;
    gap: 1px;
    background: var(--line);
    border-radius: 0;
    overflow: visible;
}
.voyage-specs-card.has-ship-photo .specs-grid {
    border-radius: 0;
}
.spec-cell {
    background: var(--card);
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    position: relative;
    overflow: visible;
    border-radius: 0 !important;
}
.spec-cell:first-child,
.spec-cell:nth-child(4),
.spec-cell:nth-child(5),
.spec-cell:last-child {
    border-radius: 0 !important;
}
.spec-cell-price { background: var(--surface); }
.spec-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}
.spec-val {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
}
.spec-val a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.15s ease;
}
.spec-val a:hover {
    color: var(--accent-dark, #0f3044);
    text-decoration: underline;
}
.spec-subval {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--muted);
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 1px;
}
.spec-subval a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.15s ease;
}
.spec-subval a:hover {
    color: var(--accent-dark, #0f3044);
    text-decoration: underline;
}
.spec-cell-price .spec-val {
    font-size: 18px;
    line-height: 1.2;
}
.spec-cell-price .spec-val a.spec-price-link {
    color: var(--accent);
    text-decoration: none;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    transition: color .15s ease;
}
.spec-cell-price .spec-val a.spec-price-link:hover {
    color: var(--accent-dark, #0f3044);
    text-decoration: underline;
}
.spec-price-arrow {
    font-size: 14px;
    transition: transform .15s ease;
    display: inline-block;
    text-decoration: none;
}
.spec-cell-price .spec-val a.spec-price-link:hover .spec-price-arrow {
    transform: translateY(2px);
}
#offers {
    scroll-margin-top: 90px;
}

/* Ship Photo Card inside Specs Dashboard — Horizontal 16:10 ratio */
.specs-ship-card {
    background: var(--card);
    display: flex;
    flex-direction: column;
    position: relative;
    border-radius: 0;
    overflow: hidden;
}
.specs-ship-media {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--surface);
    aspect-ratio: 16 / 10;
    width: 100%;
}
.specs-ship-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.specs-ship-media:hover img {
    transform: scale(1.04);
}
.specs-ship-zoom {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: rgba(13, 27, 42, 0.7);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    padding: 3px 5px;
    border-radius: 4px;
    pointer-events: none;
}
.specs-ship-meta {
    padding: 6px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    background: var(--subtle-bg);
    border-top: 1px solid var(--line);
    margin-top: auto;
}
.specs-ship-name {
    font-weight: 700;
    font-size: 13px;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.specs-ship-link {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    flex-shrink: 0;
}
.specs-ship-link:hover {
    text-decoration: underline;
}

/* Ice class tooltip downward position inside specs table */
.voyage-specs-card .badge-ice {
    position: relative;
    z-index: 10;
}
.voyage-specs-card .badge-ice:hover,
.voyage-specs-card .badge-ice:focus-visible {
    z-index: 50;
}
.voyage-specs-card .badge-ice .ice-tooltip {
    bottom: auto;
    top: calc(100% + 8px);
    transform: translateX(-50%) translateY(-4px);
    z-index: 60;
}
.voyage-specs-card .badge-ice .ice-tooltip::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: var(--dark);
}
.voyage-specs-card .badge-ice:hover .ice-tooltip,
.voyage-specs-card .badge-ice:focus-visible .ice-tooltip {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    visibility: visible;
}

/* Route & Day-by-Day Itinerary Layout with Sticky Map on the Right */
.voyage-itinerary-section { margin: 0 0 36px; }
.voyage-itinerary-layout { display: block; }
.voyage-itinerary-layout.has-map {
    display: grid;
    grid-template-columns: 1fr minmax(260px, 350px);
    gap: 28px;
    align-items: start;
}
.voyage-itinerary-main { min-width: 0; }
.route-strip {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 20px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 12px 16px;
}
.route-strip-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.route-strip-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    margin-right: 2px;
}
.route-strip .route-points {
    margin-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.route-point-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 2px 8px;
}
.route-point-tag.is-endpoint {
    font-weight: 600;
    background: var(--card);
    border-color: var(--line-dark, #bcc5cf);
}
.route-point-icon {
    font-size: 12px;
    line-height: 1;
}
.tags.route-points .route-arrow,
.route-arrow {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 2px !important;
    box-shadow: none !important;
    color: var(--muted);
    margin: 0 1px;
    font-size: 13px;
    line-height: 1;
}
.route-disclaimer {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--muted);
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 6px;
}
.route-disclaimer-icon {
    font-style: normal;
    font-weight: 700;
    color: var(--accent);
}

.voyage-itinerary-sidebar {
    position: sticky;
    top: 90px;
    display: flex;
    justify-content: flex-end;
}
.itinerary-map-card {
    margin: 0;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--sh-card);
    padding: 8px;
    width: fit-content;
    max-width: 100%;
}
.itinerary-map-card a {
    display: block;
    cursor: zoom-in;
    line-height: 0;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: transparent;
}
.itinerary-map-card img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 480px;
    object-fit: contain;
    border-radius: var(--r-lg);
    background: transparent;
    transition: transform 0.2s ease;
}
.itinerary-map-card:hover img { transform: scale(1.02); }
.itinerary-map-card figcaption {
    padding: 8px 6px 2px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
}
.map-zoom-hint {
    font-size: 13px;
    color: var(--muted);
    transition: color 0.15s ease;
}
.itinerary-map-card:hover .map-zoom-hint {
    color: var(--accent);
}

.days { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
        margin: 0 0 24px; overflow: hidden; }
.days details { border-bottom: 1px solid var(--line); }
.days details:last-child { border-bottom: 0; }
.days summary { padding: 12px 16px; cursor: pointer; list-style: none; }
.days summary::-webkit-details-marker { display: none; }
.days summary::before { content: "▸ "; color: var(--muted); }
.days details[open] summary::before { content: "▾ "; }
.days p { margin: 0; padding: 0 16px 14px 32px; color: var(--muted); font-size: 15px; }

/* Activities Section (Consistent cards, brief info, new-tab links) */
.voyage-activities-section { margin: 0 0 40px; }
.voyage-activities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 16px;
}
.vact-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 18px 20px;
    box-shadow: var(--sh-card);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.vact-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(13, 27, 42, 0.08);
}
.vact-card-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.vact-icon {
    font-size: 24px;
    line-height: 1;
    padding: 8px;
    background: var(--surface);
    border-radius: var(--r-md);
    flex-shrink: 0;
}
.vact-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.vact-name {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.25;
}
.vact-status {
    font-size: 12px;
    font-weight: 600;
}
.vact-status.is-included { color: var(--ok); }
.vact-status.is-addon { color: var(--accent); }
.vact-blurb {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--muted);
    flex-grow: 1;
}
.vact-card-foot {
    margin-top: auto;
    padding-top: 6px;
}
.vact-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.vact-link:hover { text-decoration: underline; }

/* Expedition Context Section (Operator & Month on top, Regions full-width at bottom) */
.voyage-context-section { margin: 0 0 44px; }
.voyage-context-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 16px;
}
.vcontext-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 22px;
    box-shadow: var(--sh-card);
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
}
.vcontext-card.vcontext-regions {
    grid-column: 1 / -1;
}
.vcontext-badge {
    position: absolute;
    top: 14px;
    right: 18px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    background: var(--surface);
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--line);
}
.vcontext-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 70px;
}
.vcontext-icon {
    font-size: 26px;
    line-height: 1;
}
.vcontext-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.25;
}
.vcontext-sub {
    font-size: 12px;
    color: var(--accent);
    font-weight: 600;
}
.vcontext-desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--muted);
    flex-grow: 1;
}
.vcontext-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.vcontext-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 3px 8px;
    color: var(--ink-2);
}
.vcontext-regions-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    margin: 4px 0;
}
.vcontext-region-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.vcontext-region-item:hover {
    border-color: var(--accent);
    background: var(--card);
}
.vcontext-reg-thumb {
    width: 50px;
    height: 50px;
    border-radius: var(--r-md);
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--line);
}
.vcontext-reg-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.vcontext-reg-name {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
}
.vcontext-reg-name a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.15s ease;
}
.vcontext-reg-name a:hover {
    color: var(--accent-dark, #0f3044);
    text-decoration: underline;
}
.vcontext-reg-tagline {
    margin: 0;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.35;
}
.vcontext-foot {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}
.vcontext-cta {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.vcontext-cta:hover { text-decoration: underline; }

/* Responsive adjustments */
@media (max-width: 1024px) {
    .voyage-specs-card.has-ship-photo .specs-card-layout {
        grid-template-columns: 1fr;
    }
    .specs-ship-card {
        border-radius: 0;
        border-top: 1px solid var(--line);
    }
    .voyage-specs-card.has-ship-photo .specs-grid {
        border-radius: 0;
    }
}
@media (max-width: 960px) {
    .voyage-context-grid { grid-template-columns: 1fr; }
    .vcontext-card.vcontext-regions { grid-column: auto; }
}
@media (max-width: 860px) {
    .specs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .voyage-itinerary-layout.has-map {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .voyage-itinerary-sidebar {
        position: static;
        order: -1;
        justify-content: flex-start;
    }
    .itinerary-map-card {
        max-width: 100%;
        width: fit-content;
    }
    .itinerary-map-card img {
        max-height: 380px;
        width: auto;
        max-width: 100%;
    }
}
@media (max-width: 768px) {
    .voyage-hero-header.has-photo {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .voyage-hero-media img { height: 200px; }
    .voyage-hero-title { font-size: 26px; }
}
@media (max-width: 640px) {
    .voyage-context-grid { grid-template-columns: 1fr; }
    .specs-grid { grid-template-columns: 1fr; }
    .vcontext-regions-list { grid-template-columns: 1fr; }
}

.empty { text-align: center; color: var(--muted); padding: 48px 0; }

/* Sticky cheapest-offer bar (voyage detail) */
body.has-offer-bar main { padding-bottom: 96px; }
.offer-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 95;
    background: rgba(255, 255, 255, 0.68);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 -4px 24px rgba(7, 21, 41, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    padding: 12px 0;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
}
.offer-bar .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.offer-bar .from {
    line-height: 1.3;
}
.offer-bar .from-price-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.offer-bar .from-prefix {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--muted);
}
.offer-bar .from b {
    font-size: 21px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.offer-bar .from small {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
}
.offer-bar .btn {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--r-md);
}

/* Turbo progress bar */
.turbo-progress-bar { background: var(--accent); height: 3px; }

/* Loading state — Turbo puts [busy] on the frame while it fetches */
turbo-frame[busy] :is(.chips, .meta-row, .cards, .pager, .empty, .cal-months, .calendar, .cal-agenda, .tl-scroll) {
    opacity: .45; pointer-events: none; transition: opacity .2s ease; }
turbo-frame[busy]::after { content: ""; position: fixed; top: 50%; left: 50%;
    width: 36px; height: 36px; margin: -18px 0 0 -18px; z-index: 40;
    border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%;
    animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* The redesign adds card lifts, the tray pulse, the AI shimmer and the frame
   spinner — honour the OS preference to switch them off. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .vcard:hover, .ecard:hover { transform: none; }
}

/* Back-office: scrape board and login.
   Both used to carry their own inline <style> block with a private blue
   (#1055c9) that predated the token layer. Folded in here so the last hardcoded
   palette in the codebase is gone. */
.admin-scrape h1 { margin: 0 0 var(--s1); }
.admin-scrape .subtitle { color: var(--muted); font: var(--t-body); margin: 0 0 var(--s5); }
.admin-scrape table { width: 100%; border-collapse: collapse; font: var(--t-body);
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
    overflow: hidden; }
.admin-scrape th, .admin-scrape td { padding: var(--s2) var(--s3); text-align: left;
    vertical-align: top; border-bottom: 1px solid var(--line); }
.admin-scrape th { font: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase;
    color: var(--muted); background: var(--bg); white-space: nowrap; }
.admin-scrape td.num { text-align: right; font-family: var(--f-mono);
    font-variant-numeric: tabular-nums; }
.admin-scrape .muted { color: var(--muted); }
.admin-scrape .badge.success { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); }
.admin-scrape .badge.warning { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.admin-scrape .badge.failed { background: var(--bad-bg); color: var(--bad); border-color: var(--bad-line); }
.admin-scrape .badge.running { background: var(--accent-soft); color: var(--accent);
    border-color: rgba(0, 95, 204, .2); }
.admin-scrape .badge.never { background: var(--bg); color: var(--muted); border-color: var(--line); }
.admin-scrape details { max-width: 26rem; }
.admin-scrape details summary { cursor: pointer; color: var(--bad); }
.admin-scrape details ul { margin: var(--s1) 0 0; padding-left: 1.1rem; }
.admin-scrape details li { margin-bottom: var(--s1); overflow-wrap: anywhere; }
.admin-scrape .stats { color: var(--muted); font-size: 12px; }
.admin-scrape button { padding: 5px var(--s3); border: 1px solid var(--accent);
    border-radius: var(--r-sm); background: var(--card); color: var(--accent);
    font: var(--t-body); font-weight: 600; cursor: pointer; }
.admin-scrape button:hover:not([disabled]) { background: var(--accent); color: var(--accent-ink); }
.admin-scrape button[disabled] { border-color: var(--line); color: var(--muted); cursor: not-allowed; }
.admin-scrape .flash { padding: var(--s3) var(--s4); border-radius: var(--r-md);
    margin-bottom: var(--s4); font: var(--t-body); }
.admin-scrape .flash.success { background: var(--ok-bg); color: var(--ok); }
.admin-scrape .flash.warning { background: var(--warn-bg); color: var(--warn); }

.login-box { max-width: 22rem; margin: var(--s16) auto; background: var(--card);
    border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s8);
    box-shadow: var(--sh-card); }
.login-box h1 { margin: 0 0 var(--s5); font-size: 24px; }
.login-box label { display: block; margin: var(--s4) 0 var(--s1); font: var(--t-label);
    letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); }
.login-box input { width: 100%; height: 40px; padding: 0 var(--s3); border: 1px solid var(--line);
    border-radius: var(--r-md); font-size: 15px; color: var(--ink); }
.login-box input:focus { outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring); }
.login-box button { margin-top: var(--s6); width: 100%; padding: 10px; border: 0;
    border-radius: var(--r-md); background: var(--accent); color: var(--accent-ink);
    font-weight: 600; font-size: 15px; cursor: pointer; }
.login-box button:hover { opacity: .92; }
.login-box .error { background: var(--bad-bg); color: var(--bad); border: 1px solid var(--bad-line);
    padding: var(--s3) var(--s4); border-radius: var(--r-md); margin-bottom: var(--s4);
    font: var(--t-body); }

/* Legal / support pages */
.legal { max-width: 760px; }
.legal h2 { font-size: 19px; margin: 28px 0 10px; }
.legal p, .legal li { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.legal ul { padding-left: 20px; }
.legal code { font-family: var(--font-mono, ui-monospace, monospace); font-size: .92em; background: var(--field-bg); padding: 1px 5px; border-radius: 4px; }
.legal-meta { color: var(--muted); font-size: 13px; margin: -8px 0 16px; }
.legal-contact { margin: 16px 0 24px; }