/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */
:root {
    --blue: #0064b4;
    --blue-dark: #004a87;
    --blue-light: #e6f0fa;
    --green: #2e8b57;
    --red: #c0392b;
    --orange: #e67e22;
    --gray-50: #f8f9fa;
    --gray-100: #e9ecef;
    --gray-200: #dee2e6;
    --gray-400: #adb5bd;
    --gray-600: #6c757d;
    --gray-800: #343a40;
    --radius: 8px;
    --shadow: 0 2px 8px rgba(0,0,0,.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--gray-50);
    color: var(--gray-800);
    line-height: 1.5;
}

/* ------------------------------------------------------------------ */
/* Navigation                                                          */
/* ------------------------------------------------------------------ */
nav {
    background: var(--blue);
    color: #fff;
    padding: .75rem 1.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,.15);
}

.nav-inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: .5px;
}

.nav-links a {
    color: rgba(255,255,255,.85);
    text-decoration: none;
    margin-left: 1.5rem;
    font-weight: 500;
    transition: color .15s;
}
.nav-links a:hover { color: #fff; }

/* Country selector in nav */
.country-selector {
    display: inline-block;
    margin: 0;
}
.country-selector select {
    background: rgba(255,255,255,.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 4px;
    padding: .3rem .5rem;
    font-size: .85rem;
    cursor: pointer;
}
.country-selector select option {
    background: var(--blue-dark);
    color: #fff;
}

/* ------------------------------------------------------------------ */
/* Main                                                                */
/* ------------------------------------------------------------------ */
main {
    max-width: 900px;
    margin: 2rem auto;
    padding: 0 1rem;
}

/* ------------------------------------------------------------------ */
/* Flash messages                                                      */
/* ------------------------------------------------------------------ */
.flashes { margin-bottom: 1.5rem; }

.flash {
    padding: .75rem 1rem;
    border-radius: var(--radius);
    margin-bottom: .5rem;
    font-size: .9rem;
}
.flash.success { background: #d4edda; color: #155724; }
.flash.error   { background: #f8d7da; color: #721c24; }

/* ------------------------------------------------------------------ */
/* Search page                                                         */
/* ------------------------------------------------------------------ */
.search-container {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2.5rem;
    text-align: center;
}

.search-container h1 {
    font-size: 1.75rem;
    color: var(--blue);
}

.subtitle {
    color: var(--gray-600);
    margin: .25rem 0 2rem;
}

.search-container form {
    max-width: 420px;
    margin: 0 auto;
    text-align: left;
}

.form-group { margin-bottom: 1rem; }

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: .35rem;
    font-size: .9rem;
}

.form-group input[type="text"] {
    width: 100%;
    padding: .65rem .85rem;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius);
    font-size: 1rem;
    transition: border-color .15s;
}
.form-group input[type="text"]:focus {
    outline: none;
    border-color: var(--blue);
}

/* Autocomplete */
.autocomplete-wrap { position: relative; }

.autocomplete-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 2px solid var(--blue);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    max-height: 200px;
    overflow-y: auto;
    z-index: 10;
    display: none;
}
.autocomplete-list.visible { display: block; }

.autocomplete-item {
    padding: .6rem .85rem;
    cursor: pointer;
    font-size: .95rem;
}
.autocomplete-item:hover { background: var(--blue-light); }

/* Swap button */
.swap-btn-wrap {
    text-align: center;
    margin: .25rem 0;
}
.swap-btn-wrap button {
    background: none;
    border: 2px solid var(--gray-200);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
    cursor: pointer;
    color: var(--gray-600);
    transition: all .15s;
}
.swap-btn-wrap button:hover {
    border-color: var(--blue);
    color: var(--blue);
}

/* Primary button */
.btn-primary {
    display: inline-block;
    background: var(--blue);
    color: #fff;
    border: none;
    padding: .7rem 1.5rem;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
    width: 100%;
    margin-top: .5rem;
}
.btn-primary:hover { background: var(--blue-dark); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }

.btn-secondary {
    display: inline-block;
    background: var(--gray-100);
    color: var(--gray-800);
    border: none;
    padding: .6rem 1.2rem;
    border-radius: var(--radius);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s;
    margin-top: 1.5rem;
}
.btn-secondary:hover { background: var(--gray-200); }

/* ------------------------------------------------------------------ */
/* Result page                                                         */
/* ------------------------------------------------------------------ */
.result-container {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2.5rem;
}

.result-container h1 {
    font-size: 1.5rem;
    color: var(--blue);
}

/* Station cards (departure / arrival) */
.station-card {
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    text-align: center;
}

.departure-card {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    padding: .75rem 1rem;
    margin-top: 1rem;
}

.arrival-card {
    background: var(--blue-light);
    border: 2px solid var(--blue);
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

/* Compact departure layout */
.departure-compact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.departure-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--gray-800);
}

.departure-platforms {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: wrap;
}

.departure-sep {
    color: var(--gray-400);
    margin: 0 .15rem;
}

.station-card-label {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: .25rem;
}
.departure-card .station-card-label { color: #1b5e20; }
.arrival-card .station-card-label { color: var(--blue-dark); }

.station-card-name {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: .6rem;
}
.departure-card .station-card-name { color: #1b5e20; }
.arrival-card .station-card-name { color: var(--blue-dark); }

.station-card-platform {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: .5rem;
}
.station-card-platform + .station-card-platform {
    padding-top: .5rem;
    border-top: 1px solid rgba(0,0,0,.08);
}

/* Platform row: left side | number | right side */
.platform-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-top: .5rem;
}
.platform-row + .platform-row {
    padding-top: .5rem;
    border-top: 1px solid rgba(0,100,180,.1);
}

.platform-left,
.platform-right {
    flex: 1;
    min-width: 0;
}
.platform-left {
    text-align: right;
    padding-right: .75rem;
}
.platform-right {
    text-align: left;
    padding-left: .75rem;
}

/* Legacy dest-label kept for compatibility */
.dest-label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--blue-dark);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: .6rem;
}

.dest-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.dest-platform {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    font-size: 1.6rem;
    font-weight: 800;
}

.dest-side {
    font-size: 1.15rem;
    font-weight: 700;
    padding: .5rem 1rem;
    border-radius: var(--radius);
    white-space: nowrap;
}
.dest-side.venstre { background: #fff3e0; color: #e65100; }
.dest-side.høyre   { background: #e8f5e9; color: #2e7d32; }
.dest-side.ukjent  { background: #fff9c4; color: #f57f17; }

/* Route tabs (multiple alternatives) */
.route-tabs {
    display: flex;
    gap: .5rem;
    margin: 1rem 0;
    flex-wrap: wrap;
}

.route-tab {
    padding: .5rem 1rem;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius);
    background: #fff;
    cursor: pointer;
    font-size: .9rem;
    font-weight: 600;
    color: var(--gray-600);
    transition: all .15s;
}
.route-tab:hover {
    border-color: var(--blue);
    color: var(--blue);
}
.route-tab.active {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}
.route-tab small {
    font-weight: 400;
    opacity: .8;
}

.route-panel {
    display: none;
}
.route-panel.active {
    display: block;
}

/* Route details toggle (intermediate stops) */
.route-details {
    margin: .75rem 0;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 0 1rem;
}
.route-details summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--gray-600);
    font-size: .9rem;
    padding: .75rem 0;
    list-style: none;
}
.route-details summary::-webkit-details-marker { display: none; }
.route-details summary::before {
    content: '\25B6';
    display: inline-block;
    margin-right: .5rem;
    font-size: .7rem;
    transition: transform .15s;
}
.route-details[open] summary::before {
    transform: rotate(90deg);
}
.route-details summary:hover { color: var(--blue); }

/* Timeline */
.route-timeline { margin: 1rem 0 2rem; }

.stop {
    display: flex;
    gap: 1rem;
    min-height: 90px;
}
.stop.last { min-height: auto; }

.stop-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 24px;
    flex-shrink: 0;
}

.dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--blue);
    border: 3px solid var(--blue-light);
    flex-shrink: 0;
}
.stop.first .dot { background: var(--green); border-color: #d4edda; }
.stop.last  .dot { background: var(--red);   border-color: #f8d7da; }

.line {
    width: 3px;
    flex-grow: 1;
    background: var(--gray-200);
    margin: 4px 0;
}

.stop-info { padding-bottom: 1.25rem; }

.stop-name {
    font-weight: 700;
    font-size: 1.05rem;
}

.stop-details {
    margin-top: .35rem;
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

/* Badges */
.badge {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 4px;
    font-size: .8rem;
    font-weight: 600;
}

.badge.platform { background: var(--blue-light); color: var(--blue); }
.badge.muted    { background: var(--gray-100);   color: var(--gray-600); }

.badge.side.venstre { background: #fff3e0; color: #e65100; }
.badge.side.høyre   { background: #e8f5e9; color: #2e7d32; }
.badge.side.ukjent  { background: #fff9c4; color: #f57f17; }

.url-link {
    text-decoration: none;
    font-size: 1rem;
    margin-left: .25rem;
    opacity: .7;
    transition: opacity .15s;
}
.url-link:hover { opacity: 1; }

/* Train visual */
.train-visual {
    margin-top: .75rem;
    max-width: 260px;
}

.train-car {
    display: flex;
    align-items: stretch;
    height: 44px;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid var(--gray-200);
}

.car-body {
    flex: 1;
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    color: var(--gray-600);
    font-weight: 600;
}

.door {
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: var(--gray-100);
    transition: background .2s;
}
.door.active {
    background: #fff3e0;
    border: 2px solid #e65100;
    margin: -2px;
    border-radius: 4px;
}
.door.active.right {
    background: #e8f5e9;
    border-color: #2e7d32;
}

.platform-label {
    display: flex;
    justify-content: space-between;
    margin-top: .25rem;
}

.arrow-label {
    font-size: .75rem;
    font-weight: 600;
}
.arrow-label.left  { color: #e65100; }
.arrow-label.right { color: #2e7d32; text-align: right; width: 100%; }

/* ------------------------------------------------------------------ */
/* Admin page                                                          */
/* ------------------------------------------------------------------ */
.admin-container { }

.admin-container h1 {
    font-size: 1.5rem;
    color: var(--blue);
    margin-bottom: 1.5rem;
}

.admin-section {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.admin-section h2 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--gray-100);
}

.help-text {
    color: var(--gray-600);
    font-size: .85rem;
    margin: -.5rem 0 1rem;
}

/* Inline form */
.inline-form {
    display: flex;
    gap: .75rem;
}

.inline-form input[type="text"] {
    flex: 1;
    padding: .55rem .75rem;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius);
    font-size: .95rem;
}
.inline-form input:focus { outline: none; border-color: var(--blue); }

.inline-form .btn-primary { width: auto; margin-top: 0; }

/* Connection form */
.connection-form { }

.conn-row {
    display: flex;
    align-items: end;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.conn-station { flex: 1; }

.conn-station label, .conn-direction label {
    display: block;
    font-weight: 600;
    font-size: .85rem;
    margin-bottom: .3rem;
}

.conn-station select, .connection-form select, .connection-form input[type="number"] {
    width: 100%;
    padding: .55rem .75rem;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius);
    font-size: .95rem;
    background: #fff;
}
.connection-form select:focus, .connection-form input:focus {
    outline: none;
    border-color: var(--blue);
}

.conn-arrow {
    font-size: 1.5rem;
    color: var(--gray-400);
    padding-bottom: .4rem;
}

.conn-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1rem;
}

.conn-direction {
    background: var(--gray-50);
    padding: 1rem;
    border-radius: var(--radius);
}

.conn-direction h3 {
    font-size: .9rem;
    color: var(--blue);
    margin-bottom: .75rem;
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}

.connection-form .btn-primary { width: auto; }

/* Table */
.table-wrap { overflow-x: auto; }

table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

th {
    text-align: left;
    padding: .6rem .75rem;
    background: var(--gray-50);
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--gray-600);
}

td {
    padding: .6rem .75rem;
    border-top: 1px solid var(--gray-100);
}

.col-action { width: 70px; text-align: right; }
.col-action-wide { width: 280px; text-align: right; }

.edit-row {
    display: inline-flex;
    gap: .4rem;
    align-items: center;
}
.edit-row-del {
    display: inline-flex;
    margin-left: .4rem;
}
.input-sm {
    padding: .25rem .4rem;
    border: 1px solid var(--gray-200);
    border-radius: 4px;
    font-size: .8rem;
    width: 60px;
}
select.input-sm { width: 90px; }
select.side-select.venstre { background: #fff3e0; }
select.side-select.høyre   { background: #e8f5e9; }
select.side-select.ukjent  { background: #fff9c4; }
.btn-save {
    background: var(--green);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: .8rem;
    font-weight: 600;
    padding: .3rem .6rem;
}
.btn-save:hover { background: #256d46; }

.btn-danger {
    background: var(--red);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: .8rem;
    font-weight: 600;
    transition: background .15s;
}
.btn-danger:hover { background: #a93226; }
.btn-sm { padding: .3rem .6rem; }

/* Stop cards (admin editors) */
.stop-cards {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.stop-card {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: .85rem 1rem;
}

.stop-card-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .5rem;
}

.stop-card-name {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--blue-dark);
}

.stop-card-dir {
    color: var(--gray-600);
    font-size: .85rem;
}

.stop-card-current {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .6rem;
}

.stop-card-edit {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    padding-top: .5rem;
    border-top: 1px dashed var(--gray-200);
}

.stop-card-edit label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--gray-600);
}

/* Platform entries (multiple per direction card) */
.platform-entries { }

.platform-entry {
    padding: .5rem 0;
    border-top: 1px solid var(--gray-100);
}
.platform-entry:first-child { border-top: none; }

.platform-entry-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.platform-entry-actions {
    display: flex;
    gap: .35rem;
    flex-shrink: 0;
}

.btn-edit-toggle {
    background: var(--gray-100);
    color: var(--gray-600);
    border: 1px solid var(--gray-200);
    border-radius: 4px;
    cursor: pointer;
    font-size: .75rem;
    padding: .2rem .5rem;
    font-weight: 600;
}
.btn-edit-toggle:hover { background: var(--gray-200); color: var(--gray-800); }

/* Always-visible add form */
.stop-card-add {
    padding: .6rem 0 0;
    border-top: 2px dashed var(--gray-200);
    margin-top: .5rem;
}

.stop-card-add-form {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.stop-card-add-form label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--gray-600);
}

.btn-cancel {
    background: var(--gray-100);
    color: var(--gray-600);
    border: 1px solid var(--gray-200);
    border-radius: 4px;
    cursor: pointer;
    font-size: .8rem;
    padding: .3rem .6rem;
}
.btn-cancel:hover { background: var(--gray-200); }

/* Insert station between stops */
.insert-station-row {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .25rem 0;
}

.btn-insert-between {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px dashed var(--gray-300, #ced4da);
    background: #fff;
    color: var(--gray-600);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
    line-height: 1;
}
.btn-insert-between:hover {
    border-color: var(--blue);
    color: var(--blue);
    background: var(--blue-light);
}

.insert-station-form {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    flex-wrap: wrap;
}
.insert-station-form .autocomplete-wrap {
    min-width: 220px;
    flex: 1;
}
.insert-station-form .insert-station-input {
    width: 100%;
    padding: .4rem .65rem;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius);
    font-size: .9rem;
}
.insert-station-form .insert-station-input:focus {
    outline: none;
    border-color: var(--blue);
}
.insert-station-form .btn-sm {
    margin-top: 2px;
}

/* Dest card: multiple platforms spacing */
.dest-main-extra {
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid rgba(0,100,180,.15);
}

/* Out of service station rows */
tr.station-oos td:first-child { color: var(--gray-400); text-decoration: line-through; }

/* Out of service label in editors */
.oos-label {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--gray-600);
    cursor: pointer;
    margin-left: auto;
    white-space: nowrap;
}
.oos-label input { cursor: pointer; }

/* OOS row with checkbox + URL */
.oos-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: .35rem;
}

/* Muted stop card when out of service */
.stop-card-oos { opacity: .55; }
.stop-card-oos .stop-card-name { text-decoration: line-through; }

/* Clickable station name in table */
.station-name-link {
    color: var(--blue);
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
}
.station-name-link:hover {
    text-decoration: underline;
    color: var(--blue-dark);
}

/* Station URL in table */
.station-url-link {
    font-size: .8rem;
    color: var(--blue);
    word-break: break-all;
}

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
    font-size: .9rem;
}
.pagination a {
    color: var(--blue);
    text-decoration: none;
    font-weight: 600;
}
.pagination a:hover { text-decoration: underline; }
.pagination span { color: var(--gray-600); }

/* Route search row */
.route-search-row {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}
.route-search-row .autocomplete-wrap { flex: 1; min-width: 180px; }
.route-search-row label {
    display: block;
    font-weight: 600;
    font-size: .85rem;
    margin-bottom: .3rem;
}
.route-search-row input[type="text"] {
    width: 100%;
    padding: .55rem .75rem;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius);
    font-size: .95rem;
}
.route-search-row input:focus { outline: none; border-color: var(--blue); }
.route-search-arrow {
    font-size: 1.4rem;
    color: var(--gray-400);
    padding-bottom: .5rem;
}
.route-search-row .btn-primary {
    width: auto;
    margin: 0;
    white-space: nowrap;
    align-self: flex-end;
    margin-bottom: 1px;
}

/* Admin autocomplete inputs */
.admin-section .autocomplete-wrap input[type="text"] {
    width: 100%;
    padding: .55rem .75rem;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius);
    font-size: .95rem;
}
.admin-section .autocomplete-wrap input:focus { outline: none; border-color: var(--blue); }

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 600px) {
    .search-container, .result-container, .admin-section {
        padding: 1.5rem 1rem;
    }
    .conn-row { flex-direction: column; }
    .conn-arrow { transform: rotate(90deg); text-align: center; }
    .conn-details { grid-template-columns: 1fr; }
    .inline-form { flex-direction: column; }
    .inline-form .btn-primary { width: 100%; }

    /* Smaller arrival card on mobile */
    .dest-platform {
        width: 44px;
        height: 44px;
        font-size: 1.25rem;
    }
    .dest-side {
        font-size: .95rem;
        padding: .4rem .6rem;
    }
    .platform-left { padding-right: .4rem; }
    .platform-right { padding-left: .4rem; }
    .station-card-name { font-size: 1.1rem; }
    .result-container h1 { font-size: 1.25rem; }
}