/* Train App Styles */

* {
    -webkit-tap-highlight-color: transparent;
}

/* Utility Classes */
.hidden {
    display: none !important;
}

:root {
    /* Brand palette (logo colours) */
    --color-accent: #e55d2f;      /* primary accent - delays, urgency, anything needing attention */
    --color-accent-soft: #e6b9cf; /* secondary accent - soft highlights */
    --color-brand-dark: #332a0f;  /* primary dark - text, dots, dark buttons */

    /* Colors */
    --color-blue-primary: #0437F2;
    --color-blue-dark: #304e91;
    --color-blue-light: #3d5fa3;
    --color-orange: #F97316;
    --color-red: #EF4444;
    --color-green: #7ED321;

    /* Text */
    --text-primary: #FFFFFF;
    --text-muted: #E0E0E0;
    --text-dark: #332a0f;
    --text-dark-muted: #6B7280;
    
    /* Backgrounds */
    --bg-page: #e55d2f;
    --bg-card: #FAF9F6;
    --bg-card-hover: #F0EFE9;
    
    /* Borders - Clear Hierarchy */
    --border-thin: 0px solid rgba(0, 0, 0, 0.08);      /* Subtle dividers */
    --border-normal: 0px solid rgba(0, 0, 0, 0.12);    /* Standard borders */
    --border-emphasis: 0px solid rgba(0, 0, 0, 0.2);   /* Interactive elements */
    
    /* Layout */
    --squircle-radius: 16px;
    --radius-pill: 20px;
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Trash drop zone: dropping a favorite chip here deletes it. Targeted by
   ID (not the shared .drop-zone class) so it keeps its own round-button
   look instead of inheriting the dashed-rectangle drop-zone styling. */
#delete-station-zone {
    transition: all 0.2s ease;
    position: relative;
}

/* Invisible, generously-sized hit area so desktop drag-over (and the
   equivalent touch check in JS) activates the trash zone a bit BEFORE the
   dragged chip actually visually reaches the small icon, not only once
   they overlap exactly. Kept tight on the right so it doesn't swallow
   drag-overs meant for the "+" button sitting right next to it. */
#delete-station-zone::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    bottom: -20px;
    right: 0;
}

#delete-station-zone.drag-over {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: var(--color-red) !important;
    transform: scale(1.1);
}

#delete-station-zone.drag-over i {
    color: var(--color-red) !important;
}

/* Install / Share buttons */
#install-app-btn:hover,
#share-route-btn:hover {
    background: var(--bg-card-hover) !important;
    border-color: rgba(0, 0, 0, 0.25) !important;
}

/* Reset Button */
#reset-app:hover {
    opacity: 1 !important;
    border-color: var(--color-red);
    color: var(--color-red);
    transform: translateY(-1px);
}

#reset-app:active {
    transform: translateY(0);
}

#refresh:hover,
#toggle-auto-refresh:hover {
    opacity: 1 !important;
    border-color: var(--text-dark-muted);
    transform: translateY(-1px);
}

#refresh:active,
#toggle-auto-refresh:active {
    transform: translateY(0);
}

/* Favorite Station Chips */
.favorite-chip {
    background: var(--bg-card);
    border: var(--border-normal);
    border-radius: var(--squircle-radius);
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-dark);
    cursor: grab;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    user-select: none;
    touch-action: none;
    position: relative;
}

.favorite-chip:hover {
    background: var(--bg-card-hover);
    border-color: rgba(0, 0, 0, 0.25);
    transform: translateY(-2px) translateZ(0);
}

.favorite-chip:active {
    cursor: grabbing;
    transform: translateY(-1px) scale(0.98);
}

.favorite-chip.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.favorite-chip .drag-handle {
    opacity: 0.4;
    transition: opacity 0.2s ease;
    font-size: 1rem;
    line-height: 1;
    color: var(--text-dark);
    margin-left: -0.25rem;
}

.favorite-chip:hover .drag-handle {
    opacity: 0.7;
}

.touch-clone {
    /* IMPORTANT: this clone reuses the .favorite-chip class for its look,
       which carries `transition: all 0.3s ...`. Since the clone's transform
       is updated every animation frame while dragging, that inherited
       transition made the browser animate TOWARD each new finger position
       instead of jumping there instantly - the drag felt sluggish/laggy on
       mobile even though the underlying RAF-driven movement code was fine.
       Killing the transition here is what actually fixes the lag. */
    transition: none !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    pointer-events: none;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    perspective: 1000px;
    -webkit-perspective: 1000px;
}

/* Drop Zones - empty ("Træk station her") is a dashed, unfilled outline so
   it reads as a slot waiting for something to be dropped on it, the same
   language as any drag target. Once a station is set, .has-station below
   switches it to a solid card like everything else in the list. */
.drop-zone {
    transition: all 0.3s ease;
    min-width: 0; /* Allow flex items to shrink below content size */
    background: transparent;
    border-radius: var(--squircle-radius);
    corner-shape: squircle;
    box-shadow: none;
    position: relative;
}

.drop-zone span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.drop-zone.drag-active {
    animation: pulse-border 1.5s ease-in-out infinite;
    border-style: dashed !important;
}

@keyframes pulse-border {
    0%, 100% {
        border-color: rgba(64, 63, 63, 0.15);
    }
    50% {
        border-color: #e55d2f;
    }
}

.drop-zone.drag-over {
    background: rgba(223, 97, 91, 0.08) !important;
    border: 2px dashed #332a0f !important;
    transform: scale(1.02);
    animation: none;
}

.drop-zone.has-station {
    background: var(--bg-card);
}

/* Padding matches the departure cards' own horizontal inset below
   (.overflow-x-auto's 0.5rem + .departure-group's 0.625rem), so the Fra/Til
   row lines up edge-to-edge with the departure cards under it. */
.station-selector-wrapper {
    padding: 1rem 1.125rem 0.5rem;
}

.station-selector {
    display: flex;
    align-items: stretch;
    gap: 0.625rem;
}

/* flex: 1 (no max-width) so the two pickers fill the same total width as
   the departure cards below, instead of sitting as two narrow, centered
   boxes. */
.station-picker {
    padding: 0.5rem 1rem 0.625rem;
    text-align: center;
}

.station-picker-label {
    display: block;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #a1a1a1;
    margin-bottom: 0.125rem;
}

.station-picker-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: #332a0f;
}

.station-swap-btn {
    /* .station-selector stretches its flex children by default so the two
       pickers always match height - the button has a fixed size instead,
       so it needs its own alignment to actually land in the middle. */
    align-self: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #332a0f;
    border: none;
    color: var(--bg-card);
    box-shadow: 0 4px 12px -3px rgba(64, 63, 63, 0.35);
    transition: all 0.2s ease;
}

.station-swap-btn:hover {
    transform: rotate(180deg);
    box-shadow: 0 6px 16px -3px rgba(64, 63, 63, 0.4);
}

.station-swap-btn svg {
    color: var(--bg-card);
}

/* Help Text */
.drag-help-text {
    font-size: 0.75rem;
    color: var(--text-dark-muted);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.8;
}

.drag-help-text i {
    font-size: 1rem;
}

/* Animated Arrow Hint */
.arrow-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 10;
    animation: fadeOut 3s ease-in-out forwards;
}

.arrow-hint svg {
    width: 80px;
    height: 80px;
    opacity: 0.6;
    animation: bounce-arrow 2s ease-in-out infinite;
}

@keyframes bounce-arrow {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

/* Tutorial Overlay */
.tutorial-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.tutorial-content {
    background: var(--bg-card);
    border-radius: var(--squircle-radius);
    padding: 2rem;
    max-width: 500px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.4s ease-out;
}

@keyframes slideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.tutorial-content h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tutorial-content .tutorial-steps {
    margin: 1.5rem 0;
}

.tutorial-step {
    display: flex;
    align-items: start;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 1rem;
    background: var(--bg-page);
    border-radius: var(--squircle-radius);
    border: var(--border-thin);
}

.tutorial-step:last-child {
    margin-bottom: 0;
}

.tutorial-step-number {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: var(--text-dark);
    color: var(--bg-card);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
}

.tutorial-step-content h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.25rem;
}

.tutorial-step-content p {
    font-size: 0.875rem;
    color: var(--text-dark-muted);
    line-height: 1.5;
}

.tutorial-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.tutorial-actions button {
    flex: 1;
    padding: 0.75rem 1.5rem;
    border-radius: var(--squircle-radius);
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    cursor: pointer;
}

.tutorial-btn-primary {
    background: var(--text-dark);
    color: var(--bg-card);
    border: 2px solid var(--text-dark);
}

.tutorial-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.tutorial-btn-secondary {
    background: transparent;
    color: var(--text-dark);
    border: var(--border-normal);
}

.tutorial-btn-secondary:hover {
    background: var(--bg-page);
}

/* Flat Visual States */
.btn-primary {
    background: transparent;
    color: var(--text-dark);
    border-radius: var(--radius-pill);
    font-weight: 600;
    border: var(--border-emphasis);
    transition: all 0.2s ease;
}

.btn-primary:hover {
    background: var(--bg-card-hover);
    border-color: rgba(0, 0, 0, 0.2);
}

.btn-secondary {
    background: transparent;
    border: var(--border-emphasis);
    color: var(--text-dark);
    border-radius: var(--radius-pill);
    transition: all 0.2s ease;
}

.btn-secondary:hover {
    background: var(--bg-card-hover);
    border-color: rgba(0, 0, 0, 0.2);
}

/* No outer frame any more - #departures-card is just the page background,
   and the station pickers, departure groups etc. inside it are the only
   things that actually look like cards. */
.card {
    background: var(--bg-page);
    border-radius: var(--squircle-radius);
    corner-shape: squircle;
    border: none;
    box-shadow: none;
    transition: all 0.2s ease;
}

/* Enhanced Loading States - the tog.nu "dot" mark (an <img>, see
   showLoadingState/showStationManagerSearchLoading in train-app.js)
   spinning in place, instead of a generic border-ring spinner. */
.spinner {
    width: 32px;
    height: 32px;
    display: inline-block;
    animation: spin 1s linear infinite;
}

.skeleton {
    background: linear-gradient(90deg, var(--bg-page) 25%, var(--border-white-light) 50%, var(--bg-page) 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: 4px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Enhanced Interactive Elements */
.station-search-container {
    position: relative;
    background: var(--bg-card);
    border-radius: 0;
    border: none;
    border-bottom: var(--border-thin);
    transition: all 0.3s ease;
}

.station-search-container:focus-within {
    border-bottom-color: var(--border-medium);
}

.station-search-container input {
    color: var(--text-dark) !important;
}

.station-search-container input::placeholder {
    color: var(--text-dark-muted) !important;
}

/* Station Manager Panel - a layer that drops in from the very top and lays
   itself OVER the logo/button row (position:absolute against #favorites-
   section, which is position:relative) instead of pushing it down like the
   rest of the page would. #favorites-chips-row below gets pushed down
   separately, by exactly the extra height the panel needs beyond that
   covered row, via updateStationPanelSpacing() in train-app.js - so the
   commuter's existing favourite stations stay visible the whole time
   they're adding a new one. Opens/closes with the same show/hide .hidden
   toggle as everything else in the app; the slideDown animation just makes
   the appearance feel a bit less abrupt.
   Full-bleed left/right (edge to edge, no rounding) via the standard
   absolute-positioning trick: left:50% + width:100vw + translateX(-50%),
   which centers a full-viewport-width box on the same horizontal center as
   its (narrower, padded) containing block. */
.station-panel {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    z-index: 50;
    background: var(--bg-card);
    border: none;
    border-radius: 0;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.25);
}

/* Pushed down by updateStationPanelSpacing() while the panel is open, with
   a transition so it slides out of the way instead of jumping. */
#favorites-chips-row {
    transition: margin-top 0.25s ease;
}

.station-panel:not(.hidden) {
    animation: slideDown 0.25s ease-out;
}

@keyframes slideDown {
    /* translateX(-50%) has to be repeated in every step - .station-panel
       already relies on it for horizontal centering (see above), and a
       keyframe's transform value replaces the base rule's entirely rather
       than adding to it, so leaving it out would snap the panel off-center
       for the duration of the animation. */
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Station Search Results */
#station-search-results {
    background: var(--bg-card);
    border-radius: var(--squircle-radius);
    border: var(--border-normal);
    margin-top: 0.75rem;
    max-height: 50vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#station-search-results.hidden {
    display: none;
}

/* Enhanced Table Design */
.departures-table {
    background: transparent;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

/* The journey timeline: an open dot marks the departure, a filled dot
   marks the arrival, joined by a solid line - same visual language as a
   ride-hailing trip card, so which time is which is obvious without a
   label. Built as a list of rows (departure, any expanded intermediate
   stops, arrival); each row carries its OWN line segment(s) right next to
   its own dot - real, separate elements, not one line running behind
   everything with the dots visually covering bits of it. That's what
   guarantees the line actually stops before a dot instead of just being
   hidden under it: there's a genuine gap in the layout, not an illusion. */
.journey-timeline {
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
}

.timeline-row {
    display: flex;
    align-items: stretch;
    gap: 0.625rem;
}

.timeline-row-track {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 10px;
    flex-shrink: 0;
}

.timeline-row-content {
    flex: 1;
    min-width: 0;
    /* Widened so the centered duration badge (see .timeline-duration-badge)
       gets real air above and below it, not just enough room to float
       between the departure/arrival rows - mellemstop rows override this
       back down to their own tighter spacing. */
    padding-bottom: 2.25rem;
}

.timeline-row:last-child .timeline-row-content {
    padding-bottom: 0;
}

/* Solid, not dashed - a solid line looks identical regardless of how short
   a given segment is (a dashed BORDER, by contrast, restarts its own
   dash/gap rhythm on every separate element, and a short segment - a
   tightly-packed mellemstop row - doesn't always get a full dash/gap
   cycle, so it used to read as a different, denser kind of line). Fills
   whatever's left of its row (flex:1) below the dot, with a small margin
   on the dot-facing side so the line never actually touches a dot. */
.timeline-line-segment {
    flex: 1;
    width: 2px;
    background: #a1a1a1;
    opacity: 0.5;
    margin-top: 3px;
}

/* Mellemstop only: the segment ABOVE the dot. Its height is set precisely
   in pixels by alignMidDots (train-app.js), not flex-grown, so the dot
   below it lands exactly level with its own station name - CSS margin/flex
   centering kept breaking the moment a station's row could be either one
   line (a plain stop) or two (a skiftestation: name + transfer detail)
   using the exact same markup. */
.timeline-line-segment-before {
    flex: 0 0 auto;
    margin-top: 0;
    margin-bottom: 3px;
}

.timeline-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    /* Roughly centers the dot on the first line of its row's own text
       (text-xl/leading-tight for the two main stops) instead of on the
       row's full height. */
    margin-top: 5px;
}

.timeline-dot-start {
    background: var(--bg-card);
    border: 2px solid #332a0f;
    box-sizing: border-box;
}

.timeline-dot-end {
    background: #332a0f;
}

.timeline-dot-mid {
    width: 6px;
    height: 6px;
    background: #a1a1a1;
    margin-top: 0;
}

/* Duration/stop-count/transfer-count caption: a normal line under the
   departure time now, not floated over the connector line - floating it
   over "the middle" broke the moment the arrival row grew taller (train
   name + transfer note moved under it), since the true middle no longer
   lined up with any actual gap. This can never overlap anything, since it
   just takes its own space in the flow like everything else here. */
/* Centered in the gap between the departure and arrival dot, not stacked
   under the departure time - now that the train/transfer line lives
   outside .journey-timeline entirely, the arrival row stays just as short
   as the departure row, so this can float without risking the arrival row
   growing taller and getting overlapped (the reason it used to be
   in-flow). When stops are expanded there's a full list below it instead
   of just one gap, so it pins near the departure dot rather than trying to
   center on the now much taller container. */
.timeline-duration-badge {
    position: absolute;
    left: calc(10px + 0.625rem);
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.688rem;
    line-height: 1.3;
    color: #a1a1a1;
    white-space: nowrap;
}

/* Sits right below the departure time text (text-xl/leading-tight ~1.75rem
   tall) instead of centered - when expanded there's a full stop list below
   it, not just one gap to float in, and top:0 here would land right on top
   of the departure time itself since both start flush with the container. */
.journey-timeline.expanded .timeline-duration-badge {
    top: 2.25rem;
    transform: none;
}

/* "X stop" - the toggle that expands the timeline into a dot + row per
   intermediate stop. Styled as a dotted underline so it reads as
   interactive without competing with the rest of the (already dashed)
   timeline. */
.stops-toggle {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}

.stops-toggle-icon {
    font-size: 12px !important;
    vertical-align: -2px;
}

/* Mellemstop-rækker: altid i markup'et, skjult som standard - .expanded på
   .journey-timeline (sat af toggleStopList) er det eneste der styrer om de
   vises, så klikket bare skifter en klasse frem for at bygge markup om. */
.timeline-row.timeline-mid {
    display: none;
}

.journey-timeline.expanded .timeline-row.timeline-mid {
    display: flex;
}

/* Afstanden mellem mellemstop-rækkerne - prikkens placering er nu uafhængig
   af denne (den måles og sættes i pixel af alignMidDots), så dette styrer
   udelukkende hvor tæt stopnavnene pakkes, ikke noget om centrering. */
.timeline-row.timeline-mid .timeline-row-content {
    padding: 0.1875rem 0;
}

/* "Afgang om" (venstre kort): en blød fade hver gang tallet rent faktisk
   skifter (hvert 15. sekund tæt på afgang, se formatTimeToDeparture), i
   stedet for at hoppe direkte til den nye værdi - se updateCurrentTime. */
.departure-time-value {
    transition: opacity 0.18s ease, color 0.3s ease;
}

.departure-time-value.updating {
    opacity: 0.3;
}

.timeline-stop-time-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.375rem;
}

/* Lives outside .journey-timeline now (see createDepartureGroup), as a
   plain sibling under the card - so it's flush with the card's own left
   edge by default, no indent to escape any more. */
.timeline-train-info {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    margin-top: 0.375rem;
}

.timeline-train-info .truncate {
    max-width: 100%;
    min-width: 0;
}

/* "Skift ved ..." - same text size as the train line above it, so the two
   read as one consistent block instead of the transfer note looking like a
   different, heavier piece of UI. */
.timeline-transfer-line {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #e55d2f;
    margin-top: 0.25rem;
}

/* Same transfer note, but reused inline under the interchange station's own
   row in the expanded stop list - stays put under that station's name
   instead of also being pulled flush-left, and a notch lighter since it's
   now a secondary detail under an already-small stop name. */
.timeline-transfer-line-inline {
    width: 100%;
    margin-left: 0;
    margin-top: 0.125rem;
    font-weight: 500;
}

.info-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: transparent;
    border: none;
    padding: 0;
    color: #a1a1a1;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.2s ease, background 0.2s ease;
}

.info-toggle-btn:hover,
.info-toggle-btn.active {
    color: #332a0f;
    background: var(--color-accent-soft);
}

/* Info panel: togets Note (retning/kørselsdage/udstyr) og evt. aktive
   driftsbeskeder - skjult som standard, åbnes via info-ikonet. */
.departure-info-panel {
    margin-top: 0.625rem;
    padding-top: 0.625rem;
    border-top: 1px dashed rgba(64, 63, 63, 0.12);
    font-size: 0.75rem;
    color: #6b6a6a;
}

.info-leg + .info-leg {
    margin-top: 0.5rem;
}

.info-leg-train {
    font-weight: 600;
    color: #332a0f;
    margin-bottom: 0.25rem;
}

.info-notes {
    list-style: disc;
    padding-left: 1.125rem;
    margin: 0;
}

.info-notes li {
    margin-bottom: 0.125rem;
}

.info-messages {
    margin-top: 0.5rem;
}

.info-message + .info-message {
    margin-top: 0.5rem;
}

.info-message-header {
    font-weight: 600;
    color: #e55d2f;
}

.info-message-text {
    margin-top: 0.125rem;
}

.departures-table td {
    padding: 0;
    border: none;
    color: var(--text-dark);
    vertical-align: top;
}

/* Each departure is a group of three cards - the meta card (train/
   destination) on top, then "afgår om + spor" and the journey timeline
   side by side below - kept tightly together as one group by spacing
   alone (no outer border), while each card keeps its own subtle border,
   radius and shadow. */
#departures-card .overflow-x-auto {
    background: var(--bg-page);
    padding: 0.75rem 0.5rem;
}

/* No spacer row between departures any more - this vertical padding (top
   of one group + bottom of the next) is the entire gap between two
   departure groups. Halved top/bottom vs. the horizontal inset, to pack
   departures closer together now that each is only two cards tall. */
.departure-group {
    padding: 0.375rem 0.625rem;
}

/* A departure card that's just expired (0:00 for 30s+) fades out instead of
   snapping away - see removeDepartureRow in train-app.js. */
.departure-group-row.departure-removing .departure-group {
    transition: opacity 0.35s ease;
    opacity: 0;
}

.departure-card {
    background: var(--bg-card);
    border-radius: var(--squircle-radius);
    corner-shape: squircle;
    padding: 0.75rem 1.125rem;
    transition: box-shadow 0.2s ease;
}

/* "Afgår om + Spor" and the journey timeline side by side, with the same
   34/66 split the columns used to have - kept close together, as part of
   the same group. */
.departure-cards-row {
    display: flex;
    gap: 0.25rem;
}

/* Only the outer corners of the pair are rounded (left card's left side,
   right card's right side) - the two touching inner corners stay square,
   so the pair reads as one continuous card split by a thin gap instead of
   two separate rounded cards with the page background pinching through
   between them. */
.departure-card-left {
    flex: 0 0 34%;
    min-width: 0;
    border-radius: var(--squircle-radius) 0 0 var(--squircle-radius);
}

.departure-card-right {
    flex: 1;
    min-width: 0;
    border-radius: 0 var(--squircle-radius) var(--squircle-radius) 0;
}

.departure-card:hover {
    
}


/* Status Indicators */
.status-on-time {
    color: var(--color-green);
    font-weight: 600;
}

.status-delayed {
    color: var(--color-orange);
    font-weight: 600;
}

.status-cancelled {
    color: var(--color-red);
    font-weight: 600;
    text-decoration: line-through;
}

/* Toast Notifications */
.toast {
    position: fixed;
    top: 1rem;
    right: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-white-light);
    border-radius: var(--squircle-radius);
    padding: 1rem 1.5rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    z-index: 1000;
}

.toast.success {
    border-left: 4px solid var(--color-green);
}

.toast.error {
    border-left: 4px solid var(--color-red);
}

.toast.warning {
    border-left: 4px solid var(--color-orange);
}

/* Accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.focus-visible {
    outline: 2px solid var(--text-dark);
    outline-offset: 2px;
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    :root {
        --border-white-light: #000000;
        --text-muted: #000000;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    body {
        font-size: 14px;
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    .container {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        padding-top: 0.5rem !important;
    }
    
    .card {
        border-radius: var(--squircle-radius);
        margin-bottom: 0.5rem;
    }
    
    .station-selector-wrapper {
        padding: 0.75rem 0.875rem 0.375rem;
    }

    .station-picker {
        padding: 0.5rem 0.75rem 0.625rem;
    }

    .station-picker-name {
        font-size: 0.813rem;
    }
    
    /* Table adjustments for mobile */
    .departures-table {
        font-size: 0.875rem;
    }

    #departures-card .overflow-x-auto {
        padding: 0.5rem 0.375rem;
    }

    .departure-group {
        padding: 0.28rem 0.5rem;
    }

    .departure-card {
        padding: 0.625rem 0.875rem;
    }

    /* The journey timeline (Afgang - Varighed - Ankomst) is the more
       crowded of the two cards - give it a floor so it never gets
       squeezed into illegibility (the table scrolls horizontally instead). */
    .departure-card-right {
        min-width: 200px;
    }

    /* Departure time styling */
    .departures-table td .text-lg {
        font-size: 1.125rem;
    }

    .departures-table td .text-xs {
        font-size: 0.7rem;
    }

    /* Compact header */
    #header-origin,
    #header-destination {
        font-size: 0.875rem !important;
    }
    
    .material-icons.text-sm {
        font-size: 1rem !important;
    }
    
    #refresh {
        padding: 0.375rem !important;
    }
    
    /* Table footer */
    .px-6 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Make overflow scroll instead of hidden */
    .overflow-x-auto {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .btn-swap {
        width: 56px;
        height: 56px;
    }
}

/* Very small screens */
@media (max-width: 480px) {
    .departure-card-left {
        flex: 0 0 32%; /* Afgår om + Spor */
    }

    .departure-group {
        padding: 0.28rem 0.4375rem;
    }

    .departure-card {
        padding: 0.5625rem 0.75rem;
    }

    .departure-cards-row {
        gap: 0.375rem;
        margin-top: 0.375rem;
    }

    .departure-card-right {
        min-width: 180px;
    }

    /* The timeline track doesn't need to compete for space on very
       narrow screens */
    .timeline-row-track {
        width: 8px;
    }

    .timeline-duration-badge {
        left: calc(8px + 0.625rem);
    }
}