:root {
    --background: #000000;
    --text: #fff200;
    --muted: #d9cf00;
    --line: rgba(255, 242, 0, 0.24);
    --row-hover: rgba(255, 242, 0, 0.065);
    --row-height: 58px;
    color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: var(--background);
    color: var(--text);
    font-family: "Arial Narrow", "Roboto Condensed", Arial, Helvetica, sans-serif;
}

body { height: 100dvh; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.screen {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    background: var(--background);
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 18px 24px 14px;
    border-bottom: 1px solid var(--line);
}

.airport-title { min-width: 0; }

h1 {
    margin: 0;
    overflow: hidden;
    color: var(--text);
    font-size: clamp(27px, 3vw, 48px);
    /* Leave enough vertical room for accented capitals such as Å. */
    line-height: 1.08;
    font-weight: 650;
    letter-spacing: 0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.airport-title p {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: clamp(15px, 1.4vw, 21px);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.topbar-actions {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-shrink: 0;
}

.tool-group,
.direction-toggle {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--text);
    border-radius: 7px;
    background: #050505;
}

.tool-button,
.toggle-button {
    border: 0;
    padding: 10px 16px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font-weight: 750;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.flight-search-control + .tool-button,
.tool-group > .tool-button + .tool-button,
.direction-toggle .toggle-button + .toggle-button {
    border-left: 1px solid var(--line);
}

.tool-button:hover,
.tool-button:focus-visible,
.toggle-button:hover,
.toggle-button:focus-visible {
    background: rgba(255, 242, 0, 0.12);
    outline: 2px solid var(--text);
    outline-offset: -2px;
}

.tool-button.is-active,
.toggle-button.is-active {
    color: #000000;
    background: var(--text);
}

.flight-search-control {
    display: flex;
    align-items: stretch;
}

.flight-search-close-button {
    display: none;
    min-width: 42px;
    padding-left: 12px;
    padding-right: 12px;
    border-right: 1px solid var(--line);
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
}

.flight-search-control.is-open .flight-search-close-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.flight-search-input-shell {
    width: 0;
    min-width: 0;
    display: flex;
    overflow: hidden;
    transition: width 180ms ease;
}

.flight-search-control.is-open .flight-search-input-shell {
    width: clamp(190px, 21vw, 340px);
}

.flight-search-input-shell input {
    width: 100%;
    min-width: 0;
    border: 0;
    border-right: 1px solid var(--line);
    padding: 8px 12px;
    background: #090900;
    color: var(--text);
    outline: none;
}

.flight-search-input-shell input::placeholder { color: #aaa300; }
.flight-search-input-shell input:focus { box-shadow: inset 0 0 0 2px var(--text); }

.clock-block {
    min-width: 132px;
    color: var(--text);
    text-align: right;
}

.clock-block time {
    display: block;
    font-size: clamp(40px, 5vw, 70px);
    line-height: 0.82;
    font-weight: 300;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.045em;
}

.board {
    min-height: 0;
    overflow: hidden;
}

.search-hint {
    min-height: 34px;
    padding: 8px 24px;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 242, 0, 0.08);
    color: var(--text);
    font-size: 14px;
    font-weight: 650;
    letter-spacing: 0.02em;
}

.flight-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.flight-table col.time-column { width: 8%; }
.flight-table col.gate-column { width: 7%; }
.flight-table col.airline-column { width: 10%; }
.flight-table col.flight-column { width: 11%; }
.flight-table col.route-column { width: 39%; }
.flight-table col.departure-column,
.flight-table col.arrival-column { display: none; width: 0; }
.flight-table col.status-column { width: 25%; }

.flight-table th.departure-column,
.flight-table td.departure-column,
.flight-table th.arrival-column,
.flight-table td.arrival-column { display: none; }

.flight-table.arrivals-mode col.time-column { width: 9%; }
.flight-table.arrivals-mode col.airline-column { width: 10%; }
.flight-table.arrivals-mode col.flight-column { width: 11%; }
.flight-table.arrivals-mode col.route-column { width: 48%; }
.flight-table.arrivals-mode col.gate-column { width: 4%; }
.flight-table.arrivals-mode col.status-column { width: 18%; }
.flight-table.arrivals-mode th.gate-column,
.flight-table.arrivals-mode td.gate-column {
    padding-left: 4px;
    padding-right: 4px;
    text-align: right;
}

.flight-table.search-mode col.time-column { width: 7%; }
.flight-table.search-mode col.gate-column { display: table-column; width: 6%; }
.flight-table.search-mode col.airline-column { width: 8%; }
.flight-table.search-mode col.flight-column { width: 10%; }
.flight-table.search-mode col.route-column { display: none; width: 0; }
.flight-table.search-mode col.departure-column,
.flight-table.search-mode col.arrival-column { display: table-column; width: 24%; }
.flight-table.search-mode col.status-column { width: 21%; }
.flight-table.search-mode th.route-column,
.flight-table.search-mode td.route-column { display: none; }
.flight-table.search-mode th.departure-column,
.flight-table.search-mode td.departure-column,
.flight-table.search-mode th.arrival-column,
.flight-table.search-mode td.arrival-column,
.flight-table.search-mode th.gate-column,
.flight-table.search-mode td.gate-column { display: table-cell; }

.flight-table th,
.flight-table td { min-width: 0; }

.flight-table thead th {
    height: 44px;
    padding: 8px 12px;
    border-bottom: 2px solid var(--text);
    color: var(--text);
    font-size: clamp(14px, 1.35vw, 20px);
    font-style: italic;
    font-weight: 600;
    text-align: left;
}

.flight-table thead th:first-child,
.flight-table tbody td:first-child { padding-left: 24px; }
.flight-table thead th:last-child,
.flight-table tbody td:last-child { padding-right: 24px; }
.status-heading { text-align: right !important; }

.flight-row {
    height: var(--row-height);
    border-bottom: 1px solid var(--line);
    color: var(--text);
    font-size: clamp(17px, 1.75vw, 27px);
}

.flight-row:hover { background: var(--row-hover); }
.flight-row td {
    height: var(--row-height);
    padding: 5px 12px;
    vertical-align: middle;
}

.time,
.gate,
.flight-number {
    color: var(--text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.time {
    display: inline-block;
    font-weight: 750;
}
.time-primary {
    font-size: 1em;
    line-height: 1;
}
.time-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1px;
    line-height: 1;
}
.time-original {
    position: relative;
    color: var(--muted);
    font-size: 0.7em;
    font-weight: 600;
    text-decoration: none;
}
.time-original::after {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    top: 50%;
    height: 2px;
    background: var(--text);
    transform: translateY(-50%);
    pointer-events: none;
}
.time-updated {
    font-size: 1em;
    font-weight: 850;
}
.gate { font-weight: 650; }
.flight-number { font-weight: 600; }
.airline-cell { overflow: hidden; }

.airline-mark {
    width: min(92px, 100%);
    min-height: 30px;
    display: inline-grid;
    place-items: center;
}

.airline-logo {
    display: block;
    width: auto;
    max-width: 92px;
    height: auto;
    max-height: 32px;
    object-fit: contain;
}

.airline-badge {
    width: min(88px, 100%);
    min-height: 30px;
    display: inline-grid;
    place-items: center;
    padding: 4px 8px;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    font-size: clamp(13px, 1.15vw, 18px);
    font-weight: 850;
    letter-spacing: 0.06em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.airline-badge[hidden],
.airline-logo[hidden] { display: none; }
.airline-sas { background: linear-gradient(135deg, #3467b3, #16418d); }
.airline-norwegian { background: linear-gradient(135deg, #ef4e72, #c7194d); }
.airline-wideroe { background: linear-gradient(135deg, #62b777, #237f4a); }
.airline-klm { background: linear-gradient(135deg, #54b9db, #1382b4); }
.airline-lufthansa { background: linear-gradient(135deg, #f2c320, #d59e00); color: #142452; text-shadow: none; }
.airline-ba { background: linear-gradient(135deg, #38538d, #a52138); }
.airline-airfrance { background: linear-gradient(135deg, #f4f4f4, #d9dce6); color: #17366d; text-shadow: none; }
.airline-finnair { background: linear-gradient(135deg, #f3f6ff, #bfcce8); color: #173b84; text-shadow: none; }
.airline-icelandair { background: linear-gradient(135deg, #f3b131, #d8851a); color: #263c68; text-shadow: none; }

.route,
.status { overflow: hidden; }
.route strong,
.status strong {
    display: block;
    overflow: hidden;
    color: var(--text);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.route small,
.status small {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    color: var(--muted);
    font-size: clamp(11px, 1vw, 15px);
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.status { text-align: right; }
.status-good strong,
.status-warn strong,
.status-bad strong,
.status-neutral strong { color: var(--text); }

.message-row td {
    height: 180px;
    padding: 30px;
    color: var(--muted);
    font-size: 20px;
    text-align: center;
}

.footer {
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 7px 24px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 12px;
    letter-spacing: 0.02em;
}
#sourceNotice.demo { color: var(--text); }

.airport-modal {
    width: min(1100px, calc(100vw - 36px));
    max-width: none;
    height: min(88dvh, 820px);
    max-height: calc(100dvh - 36px);
    padding: 0;
    overflow: hidden;
    border: 2px solid var(--text);
    border-radius: 10px;
    background: #000000;
    color: var(--text);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.9);
}
.airport-modal::backdrop { background: rgba(0, 0, 0, 0.82); }
.airport-modal-shell {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
}
.airport-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 24px 14px;
    border-bottom: 1px solid var(--line);
}
.airport-modal-header h2 {
    margin: 0;
    font-size: clamp(28px, 3vw, 44px);
    line-height: 1;
}
.airport-modal-header p {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 15px;
}
.modal-close {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border: 1px solid var(--text);
    border-radius: 50%;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font-size: 34px;
    line-height: 1;
}
.modal-close:hover,
.modal-close:focus-visible {
    background: var(--text);
    color: #000000;
    outline: none;
}
.airport-search { display: block; padding: 14px 24px; }
.airport-search input {
    width: 100%;
    border: 1px solid var(--text);
    border-radius: 6px;
    padding: 11px 14px;
    background: #080800;
    color: var(--text);
    font-size: 18px;
    outline: none;
}
.airport-search input::placeholder { color: #aaa300; }
.airport-search input:focus { box-shadow: 0 0 0 2px var(--text); }
.airport-modal-content {
    min-height: 0;
    overflow: auto;
    padding: 0 24px 24px;
    scrollbar-color: var(--text) #111100;
}
.airport-section + .airport-section { margin-top: 22px; }
.airport-section h3 {
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 14px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.airport-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 34px;
    row-gap: 2px;
}
.airport-grid-featured { margin-bottom: 4px; }
.airport-option {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border: 0;
    border-bottom: 1px solid rgba(255, 242, 0, 0.48);
    padding: 8px 4px 7px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font-size: clamp(16px, 1.55vw, 22px);
    text-align: left;
}
.airport-option-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.airport-option small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.airport-option:hover,
.airport-option:focus-visible {
    background: rgba(255, 242, 0, 0.12);
    outline: 1px solid var(--text);
    outline-offset: -1px;
}
.airport-option.is-selected {
    color: #000000;
    background: var(--text);
}
.airport-option.is-selected small { color: #282500; }
.airport-no-results {
    margin: 50px 0;
    color: var(--muted);
    font-size: 18px;
    text-align: center;
}

.visually-hidden {
    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;
}

@media (max-width: 1050px) {
    .topbar { gap: 12px; padding-left: 16px; padding-right: 16px; }
    .topbar-actions { gap: 8px; }
    .tool-button,
    .toggle-button { padding-left: 11px; padding-right: 11px; }
    .flight-search-control.is-open .flight-search-input-shell { width: 180px; }
    .clock-block { min-width: 102px; }
    .airport-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .topbar { align-items: flex-start; }
    .airport-title p { display: none; }
    .topbar-actions { flex-wrap: wrap; }
    .clock-block { order: -1; width: 100%; }
    .clock-block time { font-size: 42px; }
    .flight-search-control.is-open .flight-search-input-shell { width: 150px; }
    .airport-grid { grid-template-columns: 1fr; }
    .flight-table thead th,
    .flight-row td { padding-left: 7px; padding-right: 7px; }
    .flight-table thead th:first-child,
    .flight-table tbody td:first-child { padding-left: 12px; }
    .flight-table thead th:last-child,
    .flight-table tbody td:last-child { padding-right: 12px; }
}