:root {
    --bg: #f8f9fa;
    --surface-lowest: #ffffff;
    --surface-low: #f3f4f5;
    --surface: #edeeef;
    --surface-high: #e7e8e9;
    --surface-highest: #e1e3e4;
    --outline: #7c7483;
    --primary: #310065;
    --primary-container: #4a148c;
    --secondary: #b7004d;
    --secondary-dim: #ffb2bf;
    --on-surface: #191c1d;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Manrope", sans-serif;
    color: #ffffff;
    background-color: #0c1028;
    background-image: url("../Picture/container-ship-sailing-calm-ocean-sunset.jpg");
    background-position: center 72%;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: scroll;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    isolation: isolate;
    overflow-x: hidden;
}

html {
    font-size: 16px;
}

body.is-embed-mode {
    background-attachment: scroll;
}

body.is-embed-mode .top-nav-shell {
    display: none;
}

body.is-embed-mode .hero-shell {
    min-height: auto;
}

body.is-embed-mode .hero-title-copy {
    max-width: min(100%, 980px);
}

body.is-embed-mode .hero-search-panel {
    width: 100%;
    max-width: 100%;
}

body.is-embed-mode main {
    width: 100%;
    max-width: none;
}

body.is-embed-mode .footer-shell {
    padding-left: clamp(1rem, 2vw, 1.5rem);
    padding-right: clamp(1rem, 2vw, 1.5rem);
}

body.is-embed-mode .footer-shell .max-w-\[1720px\] {
    width: 100%;
    max-width: none;
}

.top-nav-shell {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 88;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(220, 205, 248, 0.08) 100%);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    box-shadow: 0 10px 32px rgba(31, 21, 52, 0.18);
}

.top-nav-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    min-height: 4.5rem;
}

.top-nav-brand {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    color: rgba(255, 255, 255, 0.96);
    text-shadow: 0 2px 10px rgba(32, 15, 58, 0.28);
}

.top-nav-brand-logo-shell {
    min-height: 3.6rem;
    padding: 0.12rem 0.16rem;
    border-radius: 0.9rem;
}

.top-nav-brand-logo {
    display: block;
    width: auto;
    height: clamp(3.3rem, 7.2vw, 5rem);
    max-width: min(78vw, 32rem);
    object-fit: contain;
    transform: translateZ(0);
    filter:
        drop-shadow(0 0 0.85px rgba(255, 255, 255, 0.88))
        drop-shadow(0 0 6px rgba(233, 215, 255, 0.5))
        drop-shadow(0 0 12px rgba(188, 126, 237, 0.34));
}

.top-nav-actions {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.track-shipment-btn {
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 0.65rem;
    background: linear-gradient(90deg, rgba(66, 24, 128, 0.96) 0%, rgba(49, 0, 101, 0.96) 100%);
    color: #ffffff;
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    padding: 0.55rem 1.05rem;
    box-shadow: 0 10px 20px rgba(36, 13, 70, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.track-shipment-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(36, 13, 70, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.top-nav-link {
    position: relative;
    padding-bottom: 0.22rem;
}

.top-nav-link.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.22rem;
    height: 2px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.76);
}

body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
}

body::before {
    z-index: -2;
    background: none;
    filter: none;
}

body::after {
    display: none;
}

.material-symbols-outlined {
    font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
}

.hero-shell {
    isolation: isolate;
    overflow: visible;
    border-radius: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    margin: 0;
    max-width: none;
    min-height: 640px;
}

.glass-header {
    background: rgba(252, 248, 251, 0.9);
    backdrop-filter: blur(20px);
}

.hero-global-shade {
    position: absolute;
    inset: 0;
    background: none;
    pointer-events: none;
}

.hero-nav-link {
    color: rgba(255, 255, 255, 0.76);
    font-size: 1.02rem;
    font-weight: 700;
    text-decoration: none;
    transition: color 200ms ease;
}

.hero-nav-link:hover,
.hero-nav-link.is-active {
    color: #ffffff;
}

.hero-lead {
    font-size: 1.95rem;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.16);
}

.hero-lead-spacer {
    pointer-events: none;
    user-select: none;
}

.hero-lead-spacer::before {
    content: "Real-time access to our global vessel network. Precision-curated logistics data for the modern trade professional.";
    display: block;
    visibility: hidden;
}

.hero-bg-image {
    object-position: center 62%;
    transform: scale(1.03);
    transform-origin: center center;
    filter: saturate(1.12) contrast(1.08) brightness(0.95);
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.hero-data-grid {
    background-image:
        linear-gradient(rgba(215, 186, 255, 0.14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(215, 186, 255, 0.14) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.5;
    mix-blend-mode: screen;
    -webkit-mask-image: radial-gradient(ellipse at center, black 24%, transparent 82%);
            mask-image: radial-gradient(ellipse at center, black 24%, transparent 82%);
}

.hero-gradient-layer {
    background:
        radial-gradient(circle at 50% -4%, rgba(255, 178, 191, 0.38), transparent 27%),
        linear-gradient(180deg, rgba(49, 0, 101, 0.26) 0%, rgba(49, 0, 101, 0.56) 42%, rgba(25, 28, 29, 0.86) 78%, rgba(25, 28, 29, 0.95) 100%);
}

.hero-title {
    text-shadow: 0 8px 22px rgba(0, 0, 0, 0.44);
    line-height: 0.92;
}

.hero-title-line {
    display: block;
    letter-spacing: 0.028em;
    word-spacing: 0.085em;
    transform: translateZ(0);
}

.hero-title-line-top {
    margin-bottom: 0.08em;
}

.hero-title-line-bottom {
    background-size: 160% 160%;
}

.hero-title-logo-row {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(1rem, 2.2vw, 2.75rem);
}

.hero-title-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.remotion-float {
    animation: none;
    will-change: auto;
}

.hero-title-line-bottom.remotion-float {
    animation-delay: 0.28s;
}

.hero-floating-logo.remotion-float {
    animation-delay: 0.14s;
}

@keyframes remotionBob {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }
    25% {
        transform: translate3d(0, -8px, 0);
    }
    50% {
        transform: translate3d(0, -2px, 0);
    }
    75% {
        transform: translate3d(0, 6px, 0);
    }
}

.scanline-effect {
    position: relative;
    overflow: hidden;
}

.scanline-effect::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(rgba(255, 255, 255, 0) 52%, rgba(215, 186, 255, 0.2) 52.2%, rgba(255, 255, 255, 0) 52.4%);
    background-size: 100% 4px;
    mix-blend-mode: screen;
    opacity: 0.55;
}

.hero-title-primary {
    display: inline-block;
    color: #ffffff;
}

.hero-title-gradient {
    display: inline-block;
    background: linear-gradient(90deg, #ffe5ea 0%, #ffb2bf 44%, #d7baff 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.hero-title-glow {
    letter-spacing: 0.025em;
    word-spacing: 0.04em;
    text-shadow:
        0 6px 18px rgba(18, 10, 28, 0.56),
        0 0 22px rgba(241, 214, 255, 0.38),
        0 0 44px rgba(176, 117, 255, 0.26),
        0 0 62px rgba(183, 0, 77, 0.18);
}

.hero-title-outline {
    -webkit-text-stroke: 1px rgba(242, 230, 255, 0.2);
}

.logo-highlight-shell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    filter:
        drop-shadow(0 0 2px rgba(255, 255, 255, 0.95))
        drop-shadow(0 0 16px rgba(218, 164, 255, 0.66))
        drop-shadow(0 0 30px rgba(176, 117, 255, 0.52));
}

.hero-floating-logo {
    flex: 0 0 auto;
    align-self: flex-start;
    margin-top: 0.2rem;
    margin-right: -1rem;
    padding: 0.15rem 0.35rem;
}

.glass-panel {
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border: 1px solid rgba(255, 255, 255, 0.34);
    box-shadow: 0 20px 44px rgba(8, 10, 16, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

    .logo-highlight-shell.logo-highlight-boost {
        filter:
        drop-shadow(0 0 3px rgba(255, 255, 255, 0.98))
        drop-shadow(0 0 14px rgba(255, 255, 255, 0.44))
        drop-shadow(0 0 24px rgba(218, 164, 255, 0.76))
        drop-shadow(0 0 38px rgba(176, 117, 255, 0.64))
        drop-shadow(0 0 52px rgba(183, 0, 77, 0.34));
    }

.hero-search-panel {
    position: relative;
    background: linear-gradient(130deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.12) 55%, rgba(255, 255, 255, 0.08) 100%);
    border: 1px solid rgba(255, 255, 255, 0.38);
    backdrop-filter: blur(20px) saturate(115%);
    -webkit-backdrop-filter: blur(20px) saturate(115%);
    box-shadow: 0 18px 36px rgba(8, 10, 18, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.42);
    transition: max-height 260ms ease, padding 260ms ease, opacity 220ms ease, transform 260ms ease, box-shadow 220ms ease;
    transform-origin: top center;
    will-change: max-height, transform;
}

.hero-search-panel > :not(:first-child) {
    transition: opacity 180ms ease, transform 220ms ease;
}

body.route-search-collapsed .hero-search-panel {
    max-height: 4.65rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    overflow: hidden;
    opacity: 0.72;
    cursor: ns-resize;
}

body.route-search-collapsed .hero-search-panel::after {
    content: "Hover to edit filters";
    position: absolute;
    right: 1.4rem;
    top: 1.35rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    pointer-events: none;
}

body.route-search-collapsed .hero-search-panel > :not(:first-child) {
    opacity: 0;
    transform: translateY(-0.55rem);
    pointer-events: none;
}

body.route-search-collapsed .hero-search-panel:hover,
body.route-search-collapsed .hero-search-panel:focus-within {
    max-height: 34rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    overflow: visible;
    opacity: 1;
    cursor: default;
    box-shadow: 0 20px 40px rgba(8, 10, 18, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

body.route-search-collapsed .hero-search-panel:hover::after,
body.route-search-collapsed .hero-search-panel:focus-within::after {
    opacity: 0;
}

body.route-search-collapsed .hero-search-panel:hover > :not(:first-child),
body.route-search-collapsed .hero-search-panel:focus-within > :not(:first-child) {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.hero-search-panel label {
    color: rgba(255, 255, 255, 0.84);
}

.hero-search-panel .search-select,
.hero-search-panel .hero-route-select {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.34);
    color: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 6px 18px rgba(10, 12, 24, 0.2);
}

.search-select {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.12);
    color: #f5f1ff;
    font-weight: 700;
    min-height: 3.1rem;
    padding: 0.75rem 2.8rem 0.75rem 1rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.hero-route-select {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 4px 14px rgba(10, 12, 18, 0.32);
    min-height: 2.95rem;
}

.hero-route-select option {
    color: #15243a;
    background: #f7fbff;
}

#schedule_date {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.2);
    color-scheme: dark;
}

#schedule_date::-webkit-datetime-edit,
#schedule_date::-webkit-datetime-edit-text,
#schedule_date::-webkit-datetime-edit-month-field,
#schedule_date::-webkit-datetime-edit-day-field,
#schedule_date::-webkit-datetime-edit-year-field {
    color: #f5f1ff;
}

#schedule_date::-webkit-calendar-picker-indicator {
    opacity: 0.9;
    filter: invert(100%) sepia(2%) saturate(17%) hue-rotate(220deg) brightness(107%) contrast(88%);
}

.search-select::placeholder {
    color: rgba(255, 255, 255, 0.58);
}

.hero-search-panel .search-select::placeholder {
    color: rgba(255, 255, 255, 0.64);
}

.search-select:focus {
    border: 1px solid rgba(255, 255, 255, 0.42);
    outline: none;
    box-shadow: 0 0 0 3px rgba(171, 215, 255, 0.28);
}

.select-icon {
    position: absolute;
    right: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: rgba(255, 255, 255, 0.64);
}

.hero-search-panel .select-icon {
    color: rgba(255, 255, 255, 0.72);
}

#filter_message {
    color: rgba(255, 255, 255, 0.72);
    transition: color 200ms ease;
}

.hero-search-panel #filter_message {
    color: rgba(255, 255, 255, 0.78);
}

.hero-route-horizontal {
    display: grid;
    grid-template-columns: minmax(190px, 1.2fr) minmax(190px, 1.2fr) minmax(150px, 0.9fr) minmax(130px, 0.85fr) minmax(170px, 1fr) auto;
    gap: 0.78rem;
    align-items: end;
}

.hero-route-field {
    min-width: 0;
}

.searchable-route-select {
    position: relative;
}

.searchable-route-select-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.searchable-route-select-input {
    padding-right: 2.85rem;
}

.searchable-route-select-menu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 140;
    padding: 0.45rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(17, 27, 44, 0.96);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(16px);
    max-height: 18rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform-origin: top center;
}

.searchable-route-select-menu.is-open-up {
    transform: translateY(calc(-100% - 0.1rem));
    transform-origin: bottom center;
}

.searchable-route-select-menu[hidden] {
    display: none !important;
}

.searchable-route-select-option {
    width: 100%;
    border: 0;
    border-radius: 0.8rem;
    background: transparent;
    color: rgba(255, 255, 255, 0.88);
    text-align: left;
    font-weight: 700;
    padding: 0.7rem 0.85rem;
    transition: background-color 160ms ease, color 160ms ease;
}

.searchable-route-select-option:hover,
.searchable-route-select-option.is-active {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.searchable-route-select-empty {
    padding: 0.75rem 0.85rem;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.92rem;
    font-weight: 600;
}

.hero-route-horizontal .search-select,
.hero-route-horizontal .hero-route-select {
    min-height: 3rem;
}

.hero-route-search-btn {
    min-height: 3rem;
    white-space: nowrap;
    border-radius: 0.85rem;
    background: linear-gradient(90deg, #d10061 0%, #b5004d 100%);
    box-shadow: 0 10px 24px rgba(192, 19, 103, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.hero-route-search-btn:hover {
    background: linear-gradient(90deg, #e11571 0%, #c10056 100%);
}

.hero-route-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.hero-route-footer #filter_message {
    margin: 0;
}

#filter_message.is-error {
    color: #ffd5d5;
}

/* `.schedule-table { width: max-content }` used to live here. It was the reason
   the table refused to shrink and cut the CARRIER column off. It is now dead
   twice over — the >=641px block sets width:100%, the <=640px card block sets
   display:block — so it is gone rather than left to mislead. */

.table-scroll-shell {
    overflow-x: auto;
    overflow-y: auto;
    max-height: min(74vh, 700px);
    scrollbar-gutter: stable both-edges;
    overscroll-behavior: contain;
    contain: layout paint;
}

.table-scroll-shell::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.table-scroll-shell::-webkit-scrollbar-track {
    background: transparent;
}

.table-scroll-shell::-webkit-scrollbar-thumb {
    border-radius: 9999px;
    background: rgba(109, 80, 143, 0.36);
    border: 2px solid transparent;
    background-clip: content-box;
}

.table-scroll-shell::-webkit-scrollbar-thumb:hover {
    background: rgba(109, 80, 143, 0.52);
    background-clip: content-box;
}

.active-voyage-glass {
    margin-top: 0.45rem;
    padding: 1rem;
    background: rgba(245, 245, 248, 0.9);
    border: 1px solid rgba(134, 123, 155, 0.28);
    box-shadow: 0 14px 28px rgba(26, 18, 44, 0.16);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

body.is-embed-mode {
    font-size: clamp(13px, 0.45vw + 7px, 16px);
}

body.is-embed-mode .hero-title-line-top,
body.is-embed-mode .hero-title-line-bottom {
    font-size: clamp(2.7rem, 4.8vw, 4.8rem);
}

body.is-embed-mode .hero-lead {
    font-size: clamp(1rem, 1.35vw, 1.55rem);
}

body.is-embed-mode .hero-search-panel,
body.is-embed-mode .active-voyage-glass {
    transform: none;
}

.active-voyage-glass .table-scroll-shell {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(138, 122, 166, 0.2);
    border-radius: 1.25rem;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.active-voyage-glass > div:first-child {
    background: rgba(246, 246, 249, 0.95);
    border-bottom: 1px solid rgba(134, 123, 155, 0.22);
    border-radius: 1.25rem 1.25rem 0 0;
}

.active-voyage-glass > div:first-child h2 {
    color: #2f0f4f;
    text-shadow: none;
}

#table_search {
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.24);
    color: #ffffff;
}

#table_search::placeholder {
    color: rgba(255, 255, 255, 0.58);
}

#record_count {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

.records-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.05rem;
    flex-wrap: wrap;
}

.records-head-left {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.records-live-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.34rem 0.7rem;
    border-radius: 9999px;
    background: rgba(145, 87, 205, 0.34);
    border: 1px solid rgba(214, 188, 245, 0.56);
    color: #f5e8ff;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    font-weight: 800;
    text-transform: uppercase;
    white-space: nowrap;
}

.records-head-right {
    display: flex;
    align-items: center;
    gap: 0.62rem;
    margin-left: auto;
    width: min(100%, 520px);
}

.records-icon-btn {
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 170ms ease, background-color 170ms ease;
}

.records-icon-btn:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.22);
}

.records-icon-btn .material-symbols-outlined {
    font-size: 20px;
}

.active-voyage-glass .schedule-table thead th {
    background: linear-gradient(180deg, #8d55c0 0%, #7245a3 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.active-voyage-glass #table_search {
    border: 1px solid rgba(169, 161, 186, 0.36);
    background: rgba(255, 255, 255, 0.84);
    color: #5a4a70;
}

.active-voyage-glass #table_search::placeholder {
    color: rgba(123, 112, 147, 0.55);
}

.active-voyage-glass #record_count {
    background: rgba(235, 234, 241, 0.95);
    border: 1px solid rgba(198, 190, 217, 0.8);
    color: #7a7484;
}

@media (min-width: 1024px) {
    #results_section.active-voyage-glass {
        padding: 1.15rem;
    }

    .active-voyage-glass > div:first-child {
        padding: 1.35rem 1.5rem;
    }

    .active-voyage-glass .table-scroll-shell {
        border-radius: 1.4rem;
        max-height: min(78vh, 760px);
    }

    .active-voyage-glass > div:first-child h2 {
        font-size: 1.6rem;
    }

    .active-voyage-glass #table_search {
        padding: 0.9rem 1.05rem;
        font-size: 1rem;
    }

    .active-voyage-glass #table_search::placeholder {
        font-size: 1rem;
    }

    .schedule-table th,
    .schedule-table td {
        padding: 0.78rem 0.92rem;
    }

    .schedule-table thead th {
        font-size: 0.88rem;
    }

    .header-pill {
        font-size: 0.88rem;
    }

    .vessel-name {
        font-size: 1.02rem;
    }

    .voyage-code {
        font-size: 0.72rem;
    }

    .cell-main {
        font-size: 0.88rem;
    }

    .route-direction {
        font-size: 0.94rem;
    }

    /* History column sizing and the two row buttons live in the responsive block
       at the end of this file, derived from --row-btn and --row-btn-icon so the
       cell, the buttons and their glyphs can't drift apart. */

    .records-live-pill {
        font-size: 0.76rem;
    }

    .records-head-right {
        width: min(100%, 540px);
    }
}

@media (max-width: 1365px) {
    body.is-embed-mode .hero-title-logo-row {
        gap: 1rem;
    }

    body.is-embed-mode .hero-title {
        font-size: clamp(2.8rem, 4.4vw, 4.6rem);
    }

    body.is-embed-mode .hero-search-panel {
        padding: 1.1rem;
    }

    body.is-embed-mode .records-head-right {
        width: min(100%, 100%);
    }

    body.is-embed-mode .records-head {
        gap: 0.75rem;
    }
}

@media (max-width: 1024px) {
    body.is-embed-mode .hero-search-panel {
        padding: 0.95rem;
    }

    body.is-embed-mode .active-voyage-glass {
        padding: 0.75rem;
    }

    body.is-embed-mode .active-voyage-glass > div:first-child {
        padding: 1rem 1rem;
    }

    body.is-embed-mode .schedule-table th,
    body.is-embed-mode .schedule-table td {
        padding: 0.66rem 0.72rem;
    }
}

.schedule-table thead th {
    position: sticky;
    top: 0;
    z-index: 20;
    background: linear-gradient(180deg, #4a148c 0%, #310065 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    border-right: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-size: 0.82rem;
    letter-spacing: 0.065em;
    white-space: nowrap;
    overflow-wrap: normal;
}

.schedule-table thead th:last-child {
    border-right: none;
}

.header-pill {
    display: inline;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    border: 0;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.065em;
    box-shadow: none;
    text-shadow: none;
    white-space: nowrap;
}

.history-cell {
    text-align: center;
    width: 88px;
    min-width: 88px;
    position: relative;
    vertical-align: top;
}

.row-action-stack {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.34rem;
    flex-wrap: nowrap;
}

.history-cell-additions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
}

.history-delta {
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1;
    color: #e39b00;
    white-space: nowrap;
}

.history-btn {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(124, 116, 128, 0.32);
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.72);
    color: #6a6076;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(63, 48, 82, 0.12);
    transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

/* Both row buttons share one glyph size. They used to be 20px and 18px, which
   read as the second icon being off rather than simply smaller. */
.history-btn .material-symbols-outlined,
.copy-row-btn .material-symbols-outlined {
    font-size: var(--row-btn-icon);
}

.history-btn:hover,
.history-btn:focus-visible {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(124, 116, 128, 0.5);
    box-shadow: 0 2px 8px rgba(63, 48, 82, 0.16);
    outline: none;
}

.history-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

.copy-row-btn {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    border: 1px solid rgba(145, 109, 179, 0.28);
    border-radius: 9999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(244, 237, 252, 0.94) 100%);
    color: #6c477f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(76, 43, 108, 0.1);
    transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease;
    flex: 0 0 auto;
}


.copy-row-btn:hover,
.copy-row-btn:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(145, 109, 179, 0.46);
    box-shadow: 0 4px 12px rgba(76, 43, 108, 0.16);
    outline: none;
}

.copy-row-btn.is-copied {
    background: linear-gradient(180deg, rgba(233, 255, 246, 0.98) 0%, rgba(214, 247, 230, 0.98) 100%);
    border-color: rgba(46, 146, 95, 0.34);
    color: #1f7d50;
}

.vessel-block {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    align-items: center;
    column-gap: 0.48rem;
    width: 100%;
    min-width: 0;
}

.vessel-status-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.16rem;
    width: 1.5rem;
    padding-top: 0;
}

.vessel-copy {
    min-width: 0;
}

.vessel-name-inline {
    display: block;
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.status-mini-badge {
    width: 1.22rem;
    min-width: 1.22rem;
    height: 1.22rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.01em;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.78), 0 4px 10px rgba(43, 18, 66, 0.18);
}

.status-mini-badge-placeholder {
    width: 1.22rem;
    height: 1.22rem;
    display: inline-block;
}

.status-mini-badge.code-e {
    background: #e0a100;
}

.status-mini-badge.code-d {
    background: #de4f55;
}

.status-mini-badge.code-a {
    background: #22a06b;
}

.status-mini-badge.code-m {
    background: #64748b;
}

.status-mini-badge.code-f {
    background: #22a06b;
}

.status-mini-badge.code-r {
    background: #8a4de8;
}

.history-popover {
    position: fixed;
    z-index: 96;
    width: min(384px, 90vw);
    max-height: min(66vh, 470px);
    padding: 0.52rem 0.56rem 0.62rem;
    border-radius: 0.82rem;
    border: 1px solid rgba(106, 72, 137, 0.24);
    background: linear-gradient(180deg, #fbfcff 0%, #f5f1fb 100%);
    box-shadow: 0 9px 22px rgba(40, 17, 60, 0.2);
    overflow: hidden;
}

.history-popover-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.46rem;
}

.history-popover-head-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.08rem;
    min-width: 0;
}

.history-heading-line {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
}

.history-popover-head-right {
    display: flex;
    align-items: center;
    gap: 0.34rem;
}

.history-popover-title {
    margin: 0;
    color: #3a175d;
    font-size: 0.86rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.16;
    white-space: nowrap;
    flex: 0 0 auto;
}

.history-popover-subtitle {
    margin: 0;
    color: #5a4a70;
    font-size: 0.79rem;
    font-weight: 700;
    line-height: 1.16;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-popover-subtitle:empty {
    display: none;
}

.history-last-updated {
    margin: 0.32rem 0 0;
    padding-top: 0.28rem;
    border-top: 1px solid rgba(118, 93, 146, 0.18);
    color: #d14a35;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.16;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    text-align: left;
}

.history-port-chip {
    padding: 0.14rem 0.42rem;
    border-radius: 9999px;
    background: #a8ead1;
    color: #327a65;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.history-popover-note {
    display: none;
}

.history-popover-note span {
    display: block;
    line-height: 1.24;
}

.history-close-btn {
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 9999px;
    background: rgba(75, 40, 109, 0.12);
    color: #4b286d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.history-events {
    margin-top: 0.32rem;
    display: flex;
    flex-direction: column;
    gap: 0.34rem;
    max-height: min(48vh, 320px);
    overflow-y: auto;
    padding-right: 0.08rem;
}

.history-empty {
    font-size: 0.72rem;
    color: #6f5d84;
    padding: 0.42rem 0.34rem;
}

.history-timeline {
    position: relative;
}

.history-event {
    position: relative;
    display: grid;
    grid-template-columns: 16px 1fr;
    gap: 0.36rem;
}

.history-event::before {
    content: "";
    position: absolute;
    top: 14px;
    bottom: -8px;
    left: 7px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(146, 173, 229, 0.8), rgba(218, 231, 252, 0.2));
}

.history-event:last-child::before {
    display: none;
}

.history-node {
    width: 14px;
    height: 14px;
    border-radius: 9999px;
    color: #ffffff;
    font-size: 0.46rem;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.08rem;
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.84);
}

.history-node.code-o { background: #2d7fc0; }
.history-node.code-e { background: #e0a100; }
.history-node.code-d { background: #de5a3f; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.84), 0 0 0 4px rgba(222, 90, 63, 0.26); }
.history-node.code-a { background: #22a06b; }
.history-node.code-m { background: #64748b; }
.history-node.code-r { background: #8a4de8; }
.history-node.code-f { background: #22a06b; }

.history-event-card {
    border-radius: 0.46rem;
    border: 0;
    background: transparent;
    padding: 0;
}

.history-event-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.32rem;
}

.history-event-title {
    color: #4d5f84;
    font-size: 0.73rem;
    font-weight: 800;
    line-height: 1.2;
}

.history-event-meta {
    color: #8f9ab2;
    font-size: 0.61rem;
    font-weight: 700;
    white-space: nowrap;
}

.history-event-summary {
    margin-top: 0.08rem;
    color: #8d99b0;
    font-size: 0.61rem;
    font-weight: 700;
}

.history-event-details {
    margin-top: 0.08rem;
    padding-left: 0.1rem;
    border-left: 1px solid rgba(171, 128, 214, 0.22);
}

.history-detail-line {
    color: #5f6f8a;
    font-size: 0.61rem;
    line-height: 1.24;
    margin-top: 0.05rem;
}

.history-detail-line.is-vessel-old {
    color: #6a7391;
}

.history-detail-line.is-vessel-new {
    border: 1px solid rgba(221, 87, 87, 0.5);
    background: rgba(255, 237, 237, 0.8);
    color: #b44747;
    border-radius: 0.24rem;
    padding: 0.06rem 0.22rem;
}

.schedule-table th,
.schedule-table td {
    padding: 0.62rem 0.68rem;
    vertical-align: middle;
}

@media (min-width: 768px) {
    .schedule-table th,
    .schedule-table td {
        padding: 0.66rem 0.8rem;
    }
}

.schedule-table td,
.schedule-table th {
    white-space: normal;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

.schedule-table thead th {
    white-space: nowrap;
    overflow-wrap: normal;
}

.schedule-table td:nth-child(2),
.schedule-table th:nth-child(2) {
    white-space: nowrap;
}

.schedule-table td:nth-child(3),
.schedule-table th:nth-child(3),
.schedule-table td:nth-child(4),
.schedule-table th:nth-child(4),
.schedule-table td:nth-child(8),
.schedule-table th:nth-child(8),
.schedule-table td:nth-child(9),
.schedule-table th:nth-child(9) {
    white-space: nowrap;
}

/* Column widths are NOT declared here. Every width/min-width/max-width for the
   schedule columns lives in exactly two places, both at the end of this file:
   the "Responsive schedule table" block for >=641px and the card block for
   <=640px. Re-adding a width here would be overridden by both and read as dead. */

.schedule-table .col-history-header,
.schedule-table .history-cell {
    padding-left: var(--hist-pad);
    padding-right: var(--hist-pad);
    text-align: center;
    white-space: nowrap;
}

.schedule-table .col-vessel-cell {
    padding-left: 0.85rem;
    padding-right: 0.95rem;
}

.schedule-table .col-stuffing-header,
.schedule-table .col-stuffing-cell {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.schedule-table .col-carrier-header,
.schedule-table .col-carrier-cell {
    padding-left: var(--hist-pad);
    padding-right: var(--hist-pad);
}

.schedule-table .col-stuffing-header .header-pill,
.schedule-table .col-carrier-header .header-pill {
    font-size: 0.7rem;
    letter-spacing: 0.07em;
}

.schedule-table .col-stuffing-cell .cell-main,
.schedule-table .col-carrier-cell .cell-main {
    font-size: 0.72rem;
    line-height: 1.08;
}

.schedule-table tbody tr {
    --row-bg: rgba(255, 255, 255, 0.92);
    background: var(--row-bg);
    transition: box-shadow 180ms ease, background-color 180ms ease;
    position: relative;
    cursor: pointer;
}

.schedule-table tbody td {
    background: var(--row-bg);
    transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
    color: #4a2e70;
}

.active-voyage-glass .schedule-table tbody tr {
    --row-bg: rgba(255, 255, 255, 0.95);
}

.active-voyage-glass .schedule-table tbody td {
    color: #5a4a84;
    text-shadow: none;
}

.schedule-table tbody tr:hover {
    --row-bg: rgba(246, 238, 255, 0.96);
    background: var(--row-bg);
    box-shadow: inset 0 0 0 1px rgba(96, 44, 157, 0.24), 0 10px 22px rgba(96, 44, 157, 0.2);
}

.schedule-table tbody tr:hover td {
    background: linear-gradient(90deg, rgba(246, 236, 255, 0.7), rgba(252, 245, 255, 0.66));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58), inset 0 -1px 0 rgba(116, 67, 173, 0.14);
}

.active-voyage-glass .schedule-table tbody tr:hover {
    --row-bg: rgba(245, 239, 251, 0.98);
    box-shadow: inset 0 0 0 1px rgba(146, 120, 183, 0.24), 0 6px 14px rgba(63, 45, 97, 0.14);
}

.active-voyage-glass .schedule-table tbody tr:hover td {
    background: linear-gradient(90deg, rgba(245, 239, 251, 0.98), rgba(251, 247, 255, 0.98));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(184, 164, 216, 0.24);
}

.active-voyage-glass .schedule-table tbody tr:hover td,
.active-voyage-glass .schedule-table tbody tr:hover td * {
    color: #4b2f78 !important;
}

.active-voyage-glass .schedule-table tbody tr:hover .vessel-name,
.active-voyage-glass .schedule-table tbody tr:hover .vessel-name-inline {
    color: #45206d !important;
    text-shadow: none;
}

.schedule-table tbody tr:hover td:first-child {
    box-shadow: inset 2px 0 0 rgba(96, 44, 157, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.82), inset 0 -1px 0 rgba(116, 67, 173, 0.2);
}

.schedule-table tbody tr:hover td:last-child {
    box-shadow: inset -2px 0 0 rgba(96, 44, 157, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.82), inset 0 -1px 0 rgba(116, 67, 173, 0.2);
}

.schedule-table tbody tr:hover .vessel-name,
.schedule-table tbody tr:hover .cell-main {
    color: #5a3a87;
}

.schedule-table tbody tr:hover .voyage-code {
    color: #b4498b;
}

.schedule-table thead th:first-child,
.schedule-table tbody td:first-child {
    position: sticky;
    left: 0;
}

.schedule-table thead th:first-child {
    z-index: 24;
}

.schedule-table tbody td:first-child {
    z-index: 8;
    font-weight: 800;
}

/* Divider for the pinned column, deliberately 1px. A wider gradient band was
   tried and read as a grey streak down the table: it painted over the row
   separators and greyed the outer edge of the copy button. */
.schedule-table thead th:first-child::after,
.schedule-table tbody td:first-child::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    pointer-events: none;
    background: var(--pin-divider);
}

.vessel-name {
    display: block;
    color: #53317f;
    font-family: "Manrope", sans-serif;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.18;
}

.voyage-code {
    display: block;
    margin-top: 0.12rem;
    color: #9659bb;
    font-size: 0.64rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.14;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cutoff-datetime {
    white-space: nowrap;
}

.cell-main.cell-etd,
.cell-main.cell-eta,
.cell-main.route-origin.cell-etd,
.cell-main.route-destination.cell-eta {
    color: #5b179f;
    font-weight: 900;
    text-shadow: 0 0 10px rgba(91, 23, 159, 0.16);
}

.active-voyage-glass .cell-main.cell-etd,
.active-voyage-glass .cell-main.cell-eta,
.active-voyage-glass .cell-main.route-origin.cell-etd,
.active-voyage-glass .cell-main.route-destination.cell-eta {
    color: #5b179f;
}

.cell-main {
    display: block;
    color: #4f2f7a;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.16;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.route-origin,
.route-destination {
    display: block;
    padding: 0;
    border-radius: 0;
    border: none;
}

.route-origin {
    background: transparent;
    color: #4f2f7a;
}

.route-destination-wrap {
    display: flex;
    align-items: center;
    gap: 0.34rem;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.route-direction {
    flex: 0 0 auto;
    color: #4f2f7a;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1;
}

.route-destination {
    background: transparent;
    color: #4f2f7a;
    flex: 1 1 auto;
    min-width: 0;
}

.active-voyage-glass .vessel-name,
.active-voyage-glass .cell-main,
.active-voyage-glass .route-origin,
.active-voyage-glass .route-direction,
.active-voyage-glass .route-destination {
    color: #5a4a84;
}

.active-voyage-glass .vessel-name {
    color: #63489c;
    text-shadow: none;
}

.active-voyage-glass .schedule-table tbody tr:hover .cell-etd,
.active-voyage-glass .schedule-table tbody tr:hover .cell-eta,
.schedule-table tbody tr:hover .cell-etd,
.schedule-table tbody tr:hover .cell-eta {
    color: #5b179f !important;
}

.active-voyage-glass .voyage-code {
    color: #bb6ea6;
}

.footer-shell {
    margin-top: auto;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 -8px 24px rgba(8, 10, 18, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.24);
    backdrop-filter: blur(16px) saturate(118%);
    -webkit-backdrop-filter: blur(16px) saturate(118%);
}

.footer-links {
    flex-wrap: wrap;
    justify-content: center;
}

.footer-shell .max-w-\[1720px\] {
    align-items: center;
}

.footer-shell .max-w-\[1720px\] > div:first-child {
    justify-content: center;
}

.footer-shell a,
.footer-shell .inline-flex.items-start {
    text-align: center;
}

.footer-shell .inline-flex.items-start {
    align-self: center;
    justify-content: center;
}

.schedule-table tbody tr:hover .cell-main.route-origin {
    color: #5a3a87;
}

.schedule-table tbody tr:hover .cell-main.route-destination {
    color: #5a3a87;
}

@media (max-width: 767px) {
    /* The fixed column widths that used to sit here were dead: the >=641px block
       and the <=640px card block both come later and override every one of them.
       Only the type-scale tweaks below still do anything. */

    .schedule-table .col-vessel-cell {
        padding-left: 0.62rem;
        padding-right: 0.72rem;
    }

    .vessel-name {
        font-size: 0.82rem;
    }

    .voyage-code {
        font-size: 0.6rem;
        letter-spacing: 0.1em;
    }

    .vessel-block {
        grid-template-columns: 1.15rem minmax(0, 1fr);
        column-gap: 0.28rem;
    }

    .vessel-status-slot {
        width: 1.15rem;
    }

    .route-origin,
    .route-destination {
        padding: 0.2rem 0.48rem;
        font-size: 0.7rem;
    }

    .route-direction {
        font-size: 0.8rem;
    }
}

.cell-sub {
    display: block;
    margin-top: 0.15rem;
    color: rgba(124, 116, 128, 0.9);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.status-track {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.5rem;
}

.status-step {
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.62rem;
    font-weight: 800;
    border: 1px solid rgba(124, 116, 128, 0.2);
}

.status-step.is-active {
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 4px rgba(124, 116, 128, 0.2);
}

.status-step.status-o {
    background: #0369a1;
}

.status-step.status-e {
    background: #d97706;
}

.status-step.status-d {
    background: #b91c1c;
}

.status-step.status-r {
    background: #4f46e5;
}

.status-step.status-f {
    background: #15803d;
}

.status-caption {
    margin-top: 0.35rem;
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    font-weight: 700;
}

.loading-row,
.error-row {
    text-align: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.78);
}

.error-row {
    color: #b91c1c;
}

@media (max-width: 1024px) {
    .top-nav-brand-logo {
        height: clamp(3rem, 8.6vw, 4.35rem);
        max-width: min(84vw, 26rem);
    }

    .top-nav-actions {
        gap: 0.6rem;
    }

    .track-shipment-btn {
        padding: 0.5rem 0.82rem;
        font-size: 0.8rem;
    }

    .hero-title {
        font-size: 4.1rem;
    }

    .hero-title-line {
        letter-spacing: 0.022em;
        word-spacing: 0.06em;
    }

    .hero-title-logo-row {
        gap: 0.9rem;
    }

    .hero-lead {
        font-size: 1.3rem;
    }

    .search-select {
        min-height: 2.85rem;
        padding: 0.68rem 2.55rem 0.68rem 0.9rem;
    }

    .select-icon {
        right: 0.75rem;
    }

    .hero-route-horizontal {
        grid-template-columns: repeat(3, minmax(170px, 1fr));
    }

    .hero-route-search-btn {
        grid-column: 2 / span 2;
    }

}

@media (max-width: 900px) {
    .hero-title-logo-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.65rem;
    }

    .hero-floating-logo {
        align-self: flex-end;
        margin-top: 0;
        margin-right: -0.35rem;
    }

    .records-head-right {
        margin-left: 0;
        width: 100%;
    }

}

@media (max-width: 640px) {
    body.route-search-collapsed .hero-search-panel {
        max-height: 4.2rem;
        padding-top: 0.85rem;
        padding-bottom: 0.85rem;
        opacity: 0.88;
        cursor: default;
    }

    body.route-search-collapsed .hero-search-panel::after {
        content: "Scroll up to edit filters";
        top: 1rem;
        right: 1rem;
        font-size: 0.58rem;
        letter-spacing: 0.04em;
    }

    body.route-search-collapsed .hero-search-panel:hover > :not(:first-child),
    body.route-search-collapsed .hero-search-panel:focus-within > :not(:first-child) {
        pointer-events: none;
    }

    .table-scroll-shell {
        overflow: visible;
        max-height: none;
        border: 0;
        background: transparent;
    }

    .schedule-table,
    .schedule-table thead,
    .schedule-table tbody,
    .schedule-table tr,
    .schedule-table td {
        display: block;
        width: 100%;
    }

    .schedule-table thead {
        display: none;
    }

    .schedule-table tbody {
        display: grid;
        gap: 0.6rem;
    }

    .schedule-table tbody tr {
        border: 1px solid rgba(148, 124, 184, 0.18);
        border-radius: 0.86rem;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 8px 16px rgba(43, 28, 71, 0.07);
        transform: none !important;
    }

    .schedule-table tbody td {
        display: grid;
        grid-template-columns: minmax(5.45rem, 6rem) minmax(0, 1fr);
        gap: 0.52rem;
        align-items: start;
        padding: 0.54rem 0.68rem;
        border-bottom: 1px solid rgba(141, 123, 170, 0.12);
        background: transparent !important;
        box-shadow: none !important;
        white-space: normal;
    }

    .schedule-table tbody td::before {
        content: attr(data-label);
        color: #8a6fa8;
        font-size: 0.55rem;
        font-weight: 900;
        letter-spacing: 0.06em;
        line-height: 1.15;
        text-transform: uppercase;
    }

    .schedule-table tbody td:last-child {
        border-bottom: 0;
    }

    .schedule-table tbody td:first-child {
        position: static;
        left: auto;
        z-index: auto;
    }

    .schedule-table tbody td:first-child::after {
        display: none;
    }

    .schedule-table tbody tr:hover {
        box-shadow: 0 10px 22px rgba(43, 28, 71, 0.08);
    }

    /* The desktop column widths would squeeze a card row down to one letter per
       line ("N A M P H A T"), so clear them along with the history column. */
    .history-cell,
    .schedule-table .col-vessel-cell,
    .schedule-table .col-stuffing-cell,
    .schedule-table .col-carrier-cell {
        width: auto;
        min-width: 0;
        max-width: none;
    }

    .history-cell::before {
        align-self: center;
    }

    .row-action-stack {
        flex-direction: row;
        justify-content: center;
        gap: 0.34rem;
        flex-wrap: nowrap;
    }

    .history-btn,
    .copy-row-btn {
        width: 30px;
        min-width: 30px;
        height: 30px;
        min-height: 30px;
    }

    .copy-row-btn {
        padding: 0;
    }

    .vessel-block {
        grid-template-columns: 1.15rem minmax(0, 1fr);
        column-gap: 0.42rem;
    }

    .vessel-status-slot {
        width: 1.15rem;
        gap: 0.12rem;
        padding-top: 0;
    }

    .vessel-name-inline,
    .cell-main,
    .cutoff-datetime,
    .route-destination-wrap {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }

    .route-destination-wrap {
        align-items: flex-start;
        gap: 0.28rem;
    }

    .route-direction {
        margin-top: 0.08rem;
    }

    .vessel-name {
        font-size: 0.76rem;
        line-height: 1.12;
    }

    .cell-main,
    .cutoff-datetime,
    .route-origin,
    .route-destination {
        font-size: 0.7rem;
        line-height: 1.12;
    }

    .top-nav-inner {
        min-height: 4rem;
    }

    .top-nav-brand-logo-shell {
        min-height: 3.2rem;
    }

    .top-nav-brand-logo {
        height: clamp(2.7rem, 11vw, 3.55rem);
        max-width: min(88vw, 18rem);
        filter:
            drop-shadow(0 0 0.7px rgba(255, 255, 255, 0.86))
            drop-shadow(0 0 5px rgba(233, 215, 255, 0.46))
            drop-shadow(0 0 9px rgba(188, 126, 237, 0.3));
    }

    .track-shipment-btn {
        font-size: 0.74rem;
        padding: 0.45rem 0.64rem;
    }

    .hero-title {
        font-size: 2.6rem;
    }

    .hero-title-line {
        letter-spacing: 0.016em;
        word-spacing: 0.04em;
    }

    .hero-lead {
        font-size: 1rem;
    }

    .search-select {
        min-height: 2.72rem;
    }

    .status-step {
        width: 1.42rem;
        height: 1.42rem;
    }

    .hero-route-horizontal {
        grid-template-columns: 1fr;
        gap: 0.7rem;
    }

    .hero-route-search-btn {
        grid-column: auto;
        width: 100%;
    }

    .hero-route-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .records-head-left {
        width: 100%;
        justify-content: space-between;
    }

    .records-live-pill {
        font-size: 0.58rem;
    }

    .records-head-right {
        width: 100%;
    }

    .records-icon-btn {
        width: 2.2rem;
        height: 2.2rem;
    }

    .hero-route-footer #reset_filters {
        width: 100%;
    }

    .hero-floating-logo {
        margin-bottom: 0.25rem;
    }

    .hero-shell {
        background-position: center, center, 66% 76%;
    }

}

/* ==========================================================================
   Responsive schedule table
   --------------------------------------------------------------------------
   body is display:flex, so <main> was a flex item with the default
   min-width:auto and inflated to the table's max-content width (~1760px) at
   every viewport. body{overflow-x:hidden} then clipped the excess, which is
   why CARRIER was unreachable — not merely off-screen — on smaller screens.
   Everything below depends on that first fix.

   Above ~1180px the table fits with no scrolling at all. Below it, the shell
   scrolls horizontally by exactly the shortfall, with HISTORY pinned left and
   CARRIER pinned right. Words are never broken mid-word at any width.
   The <=640px card layout further down owns small screens and is untouched.
   ========================================================================== */

main {
    width: 100%;
    min-width: 0;
}

#results_section,
#results_section .table-scroll-shell {
    min-width: 0;
    max-width: 100%;
}

.schedule-table {
    --row-btn: 34px;
    --row-btn-gap: 5px;
    --hist-pad: 0.42rem;
    --hist-col: calc(var(--row-btn) * 2 + var(--row-btn-gap) + var(--hist-pad) * 2);
    --col-vessel-min: 8.5rem;
    --row-btn-icon: 20px;
    --pin-divider: rgba(148, 124, 184, 0.38);
}

/* The header band is purple, so the same dark hairline would vanish into it. */
.schedule-table thead th {
    --pin-divider: rgba(255, 255, 255, 0.26);
}

@media (min-width: 641px) {

    /* The two row buttons had no flex-shrink guard, so the flex row squashed
       the 36px history button down to 25px — an oval with an off-centre icon.
       The column now sizes from the buttons instead of the other way round. */
    .row-action-stack {
        gap: var(--row-btn-gap);
    }

    .row-action-stack > button {
        flex: 0 0 auto;
    }

    .history-btn,
    .copy-row-btn {
        width: var(--row-btn);
        min-width: var(--row-btn);
        height: var(--row-btn);
        min-height: var(--row-btn);
    }

    .schedule-table .col-history-header,
    .schedule-table .history-cell {
        width: var(--hist-col);
        min-width: var(--hist-col);
        max-width: var(--hist-col);
        padding-left: var(--hist-pad);
        padding-right: var(--hist-pad);
    }

    /* Fluid table. Auto layout sizes each column to at least its longest word,
       so wrapping never lands inside a word ("YOKOHAM A", "7 day s"). */
    .schedule-table {
        width: 100%;
        min-width: 0;
        table-layout: auto;
    }

    .schedule-table th,
    .schedule-table td,
    .schedule-table thead th,
    .schedule-table th:nth-child(2), .schedule-table td:nth-child(2),
    .schedule-table th:nth-child(3), .schedule-table td:nth-child(3),
    .schedule-table th:nth-child(4), .schedule-table td:nth-child(4),
    .schedule-table th:nth-child(8), .schedule-table td:nth-child(8),
    .schedule-table th:nth-child(9), .schedule-table td:nth-child(9),
    .schedule-table .cell-main,
    .schedule-table .vessel-name,
    .schedule-table .vessel-name-inline,
    .schedule-table .cutoff-datetime,
    .schedule-table .header-pill {
        white-space: normal;
        overflow-wrap: normal;
        word-break: normal;
    }

    /* Drop the hard floors and fixed widths that together forced 1685px of
       max-content regardless of viewport. */
    .schedule-table th:nth-child(3), .schedule-table td:nth-child(3),
    .schedule-table th:nth-child(4), .schedule-table td:nth-child(4),
    .schedule-table th:nth-child(8), .schedule-table td:nth-child(8),
    .schedule-table th:nth-child(9), .schedule-table td:nth-child(9) {
        min-width: 0;
    }

    /* These three beat `.schedule-table thead th { white-space: nowrap }` on class
       count, so they have to opt back into wrapping explicitly. */
    .schedule-table .col-vessel-header,
    .schedule-table .col-vessel-cell,
    .schedule-table .col-stuffing-header,
    .schedule-table .col-stuffing-cell,
    .schedule-table .col-carrier-header,
    .schedule-table .col-carrier-cell {
        white-space: normal;
    }

    /* Vessel still needs a floor or it collapses under the longer route names. */
    .schedule-table .col-vessel-header,
    .schedule-table .col-vessel-cell {
        min-width: var(--col-vessel-min);
    }

    /* "7 days" reads badly split across two lines. */
    .schedule-table th:nth-child(5),
    .schedule-table td:nth-child(5) {
        white-space: nowrap;
    }

    /* Wrap the vessel name instead of truncating it to "S… W… - 0…". */
    .vessel-name-inline,
    .voyage-code {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
    }

    .schedule-table thead th,
    .schedule-table thead th .header-pill {
        line-height: 1.18;
    }

    /* CARRIER pinned right, mirroring HISTORY pinned left, so both stay
       readable while the middle of the table scrolls under them. */
    .schedule-table thead th:last-child,
    .schedule-table tbody td:last-child {
        position: sticky;
        right: 0;
    }

    .schedule-table thead th:last-child {
        z-index: 24;
    }

    .schedule-table tbody td:last-child {
        z-index: 8;
    }

    /* Row backgrounds are 92% opaque, so scrolled columns ghosted through the two
       pinned ones. Stacking the same tint twice reaches ~99% without changing it. */
    .schedule-table tbody td:first-child,
    .schedule-table tbody td:last-child {
        background-image: linear-gradient(var(--row-bg), var(--row-bg)), linear-gradient(var(--row-bg), var(--row-bg));
    }

    /* Mirrors the 1px divider on the pinned HISTORY column. */
    .schedule-table thead th:last-child::before,
    .schedule-table tbody td:last-child::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 1px;
        height: 100%;
        pointer-events: none;
        background: var(--pin-divider);
    }
}

/* ==========================================================================
   Sortable / filterable column headers
   ========================================================================== */

/* Keep the label on the first row and the sort/filter controls stable on the
   second row so header content stays aligned within narrow columns. */
.th-tools {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.32rem;
    min-width: 0;
}

.th-ctrl {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.1rem;
    flex: 0 0 auto;
    min-height: 1.35rem;
}

.th-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
    cursor: pointer;
    transition: color 150ms ease;
}

.th-sort-label {
    flex: 1 1 auto;
    min-width: 0;
}

.th-sort-mini {
    flex: 0 0 auto;
    width: 1.35rem;
    height: 1.35rem;
    justify-content: center;
    border-radius: 0.34rem;
}

.th-sort-mini:hover {
    background: rgba(255, 255, 255, 0.18);
}

.th-sort:hover,
.th-filter:hover {
    color: #ffe6b3;
}

.th-sort-icon {
    flex: 0 0 auto;
    font-size: 15px;
    line-height: 1;
    opacity: 0.42;
    transition: opacity 150ms ease;
}

.th-sort:hover .th-sort-icon {
    opacity: 0.85;
}

.th-filter {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    padding: 0;
    border: 0;
    border-radius: 0.34rem;
    background: transparent;
    color: inherit;
    opacity: 0.42;
    cursor: pointer;
    transition: opacity 150ms ease, background-color 150ms ease;
}

.th-filter:hover,
.th-filter[aria-expanded="true"] {
    opacity: 1;
    background: rgba(255, 255, 255, 0.18);
}

.th-filter .material-symbols-outlined {
    font-size: 15px;
    line-height: 1;
}

.schedule-table th.is-sorted .th-sort-icon,
.schedule-table th.is-sorted .header-pill {
    color: #ffd166;
    opacity: 1;
}

.schedule-table th.is-filtered .th-filter {
    opacity: 1;
    color: #ffd166;
}

.schedule-table th.is-sorted,
.schedule-table th.is-filtered {
    box-shadow: inset 0 -2px 0 rgba(255, 209, 102, 0.75);
}

/* Count badge on the header's clear-filters button. */
.records-icon-btn {
    position: relative;
}

.records-icon-btn.is-active {
    border-color: rgba(255, 209, 102, 0.6);
    background: rgba(255, 209, 102, 0.2);
}

.records-icon-badge {
    position: absolute;
    top: -0.3rem;
    right: -0.3rem;
    min-width: 1.05rem;
    height: 1.05rem;
    padding: 0 0.2rem;
    border-radius: 999px;
    background: #ffd166;
    color: #3b1d63;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1.05rem;
    text-align: center;
}

/* --- per-column filter popover (moved to <body>, positioned in JS) --- */

/* Tailwind's .hidden sits in an earlier stylesheet, so it loses to the display
   declared here on equal specificity — re-assert it. */
.th-filter-popover.hidden {
    display: none;
}

.th-filter-popover {
    position: fixed;
    z-index: 98;
    display: flex;
    flex-direction: column;
    width: min(280px, 92vw);
    max-height: min(60vh, 420px);
    border-radius: 0.82rem;
    border: 1px solid rgba(106, 72, 137, 0.24);
    background: linear-gradient(180deg, #fbfcff 0%, #f5f1fb 100%);
    box-shadow: 0 9px 22px rgba(40, 17, 60, 0.2);
    overflow: hidden;
}

.thf-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0.7rem 0.45rem;
}

.thf-title {
    font-family: "Manrope", sans-serif;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #4a148c;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.thf-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 0;
    border-radius: 0.4rem;
    background: rgba(74, 20, 140, 0.08);
    color: #4a148c;
    cursor: pointer;
}

.thf-close:hover {
    background: rgba(74, 20, 140, 0.16);
}

.thf-close .material-symbols-outlined {
    font-size: 16px;
}

.thf-search {
    position: relative;
    padding: 0 0.7rem 0.5rem;
}

.thf-search input {
    width: 100%;
    padding: 0.4rem 1.8rem 0.4rem 0.6rem;
    border-radius: 0.55rem;
    border: 1px solid rgba(106, 72, 137, 0.26);
    background: #ffffff;
    color: #35205a;
    font-size: 0.76rem;
    font-weight: 600;
}

.thf-search input:focus {
    outline: none;
    border-color: rgba(106, 72, 137, 0.6);
    box-shadow: 0 0 0 3px rgba(150, 96, 200, 0.18);
}

.thf-search .material-symbols-outlined {
    position: absolute;
    right: 1.1rem;
    top: 0.42rem;
    font-size: 16px;
    color: rgba(74, 20, 140, 0.45);
    pointer-events: none;
}

.thf-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* Stop the page from scrolling on once this list hits either end. */
    overscroll-behavior: contain;
    padding: 0 0.35rem;
}

.thf-option {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.28rem 0.35rem;
    border-radius: 0.42rem;
    color: #3d2663;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
}

.thf-option:hover {
    background: rgba(106, 72, 137, 0.1);
}

.thf-option input {
    flex: 0 0 auto;
    width: 0.86rem;
    height: 0.86rem;
    accent-color: #6a2fa0;
}

.thf-option span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.thf-empty {
    padding: 0.6rem 0.45rem;
    color: rgba(61, 38, 99, 0.65);
    font-size: 0.74rem;
    font-weight: 600;
}

.thf-foot {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.7rem 0.6rem;
    border-top: 1px solid rgba(106, 72, 137, 0.16);
}

.thf-btn {
    flex: 1 1 auto;
    padding: 0.34rem 0.4rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(106, 72, 137, 0.26);
    background: rgba(255, 255, 255, 0.9);
    color: #4a148c;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.thf-btn:hover {
    background: rgba(106, 72, 137, 0.12);
}

.thf-btn-primary {
    border-color: transparent;
    background: linear-gradient(180deg, #6a2fa0 0%, #4a148c 100%);
    color: #ffffff;
}

.thf-btn-primary:hover {
    background: linear-gradient(180deg, #7c3cb5 0%, #571aa1 100%);
}