:root {
  --midnight: #071F2B;
  --deep-ink: #07161C;
  --sand: #F7F3EA;
  --surface: #FFFFFF;
  --elevated: #FCFCFA;
  --muted: #EDF1F2;
  --border: #D7E0E2;
  --slate: #425763;
  --teal: #0D7F72;
  --amber: #F6B73C;
  --verified-foreground: #075C52;
  --verified-background: #DDF6F1;
  --verified-border: #83BFB5;
  --research-foreground: #7A4D00;
  --research-background: #FFF3D6;
  --research-border: #E7C36B;
  --hold-foreground: #8E2430;
  --hold-background: #FCE8EB;
  --hold-border: #E3A9AF;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-control: 10px;
  --radius-card: 14px;
  --radius-panel: 18px;
  --radius-pill: 999px;
  --focus: var(--amber);
  --f-display: "Schibsted Grotesk", "Instrument Sans", system-ui, sans-serif;
  --f-ui: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --f-ar: "IBM Plex Sans Arabic", "Instrument Sans", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
}

* { box-sizing: border-box; }

html { background: var(--sand); color: var(--deep-ink); font-family: var(--f-ui); }
body { margin: 0; min-block-size: 100dvh; }
button, input, select { font: inherit; }
button, input[type="file"], select { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
button, input, select, .panel { transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease, box-shadow 180ms ease, opacity 180ms ease; }

.skip-link { background: var(--amber); color: var(--midnight); inset-inline-start: var(--space-4); padding: var(--space-3) var(--space-4); position: fixed; top: -100px; z-index: 50; }
.skip-link:focus { top: var(--space-4); }
.site-header { align-items: center; display: flex; gap: var(--space-4); justify-content: space-between; margin: 0 auto; max-inline-size: 1180px; padding: var(--space-6) clamp(20px, 4vw, 48px); }
.brand { align-items: center; color: var(--midnight); display: inline-flex; gap: 11px; min-block-size: 48px; text-decoration: none; }
.brand img { block-size: 44px; inline-size: 44px; }
.brand span { display: grid; gap: 1px; line-height: 1; }
.brand strong { font-size: 19px; letter-spacing: .03em; }
.brand small { font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.header-actions { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: end; }
.mode-badge { background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--slate); font-size: 12px; font-weight: 700; min-block-size: 32px; padding: 7px 12px; }
.language-control, .quiet-action { background: transparent; border: 1px solid var(--midnight); border-radius: var(--radius-pill); color: var(--midnight); font-weight: 700; min-block-size: 44px; padding: 0 18px; }
.language-control:hover, .quiet-action:hover { background: var(--muted); }

main { display: grid; gap: var(--space-8); margin: 0 auto; max-inline-size: 1060px; padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 48px) var(--space-16); }
.hero { display: grid; gap: var(--space-4); max-inline-size: 800px; }
.eyebrow { color: var(--teal); font-family: var(--f-mono); font-size: 12px; font-weight: 800; letter-spacing: .13em; margin: 0; text-transform: uppercase; }
h1, h2, h3, p { margin-block: 0; }
h1 { color: var(--midnight); font-family: var(--f-display); font-size: clamp(42px, 7vw, 76px); letter-spacing: -.05em; line-height: .98; }
h2 { color: var(--midnight); font-family: var(--f-display); font-size: clamp(24px, 3.4vw, 34px); letter-spacing: -.035em; line-height: 1.1; }
.lead { color: var(--slate); font-size: clamp(19px, 2.4vw, 25px); line-height: 1.45; max-inline-size: 760px; }

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-panel); box-shadow: 0 14px 32px rgb(7 31 43 / .06); padding: clamp(20px, 3vw, 32px); }
.panel-heading { align-items: flex-start; display: flex; gap: var(--space-4); justify-content: space-between; margin-block-end: var(--space-3); }
.panel p:not(.eyebrow) { color: var(--slate); line-height: 1.55; }
.authentication { display: grid; gap: var(--space-4); max-inline-size: 620px; }
.status-icon, .route-icon, .proof-icon, .flight-icon { align-items: center; background: var(--muted); border-radius: 50%; color: var(--midnight); display: inline-flex; flex: none; inline-size: 44px; justify-content: center; min-block-size: 44px; }
.status-icon { background: var(--teal); }
.status-icon span { background: var(--amber); border-radius: 50%; block-size: 12px; inline-size: 12px; }
.route-icon { background: var(--research-background); color: var(--research-foreground); }
.proof-icon { background: var(--verified-background); color: var(--verified-foreground); }
.flight-icon { background: var(--midnight); color: var(--sand); }
.icon { fill: none; block-size: 22px; inline-size: 22px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }

.stack { display: grid; gap: var(--space-3); }
label { color: var(--midnight); display: grid; font-size: 14px; font-weight: 700; gap: var(--space-2); }
input, select { background: var(--elevated); border: 1px solid var(--border); border-radius: var(--radius-control); color: var(--deep-ink); min-block-size: 48px; padding: 0 var(--space-3); width: 100%; }
input[type="file"] { align-items: center; display: flex; padding-block: var(--space-2); }
input[type="file"]::file-selector-button { background: var(--muted); border: 0; border-radius: 7px; color: var(--midnight); cursor: pointer; font-weight: 700; margin-inline-end: var(--space-3); min-block-size: 32px; padding: 0 var(--space-3); }
.field-help { color: var(--slate); font-size: 14px; line-height: 1.5; }
.primary-action, .secondary-action { align-items: center; border-radius: var(--radius-control); display: inline-flex; font-weight: 800; gap: var(--space-2); justify-content: center; min-block-size: 48px; padding: 0 var(--space-4); }
.primary-action { background: var(--teal); border: 1px solid var(--teal); color: var(--surface); }
.primary-action:hover:not(:disabled) { background: var(--verified-foreground); border-color: var(--verified-foreground); }
.secondary-action { background: var(--surface); border: 1px solid var(--teal); color: var(--teal); }
.secondary-action:hover:not(:disabled) { background: var(--verified-background); }
.form-message:empty { display: none; }
.form-message { border-radius: var(--radius-control); color: var(--slate); display: block; font-size: 14px; font-weight: 600; line-height: 1.45; padding: var(--space-3); }
.form-message.success { background: var(--verified-background); border: 1px solid var(--verified-border); color: var(--verified-foreground); }
.form-message.error { background: var(--hold-background); border: 1px solid var(--hold-border); color: var(--hold-foreground); }

.notice { border-radius: var(--radius-card); font-size: 15px; font-weight: 600; line-height: 1.5; padding: var(--space-4); }
.notice.modeled { background: var(--muted); border: 1px solid var(--border); color: var(--slate); }
.notice.hold { background: var(--hold-background); border: 1px solid var(--hold-border); color: var(--hold-foreground); }
.account-strip { align-items: center; display: flex; gap: var(--space-4); justify-content: space-between; margin-block-end: var(--space-6); }
.account-strip strong { color: var(--midnight); font-size: 17px; }
.portal-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portal-grid > * { min-inline-size: 0; }
.route-panel { grid-column: 1 / -1; }
.route-fields { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block: var(--space-6); }
.airport-choice { background: var(--elevated); border: 1px solid var(--border); border-radius: var(--radius-control); color: var(--midnight); display: grid; gap: var(--space-1); min-block-size: 76px; padding: var(--space-3); text-align: start; }
.airport-choice:hover { border-color: var(--teal); }
.airport-choice span { color: var(--slate); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.airport-choice strong { font-size: 16px; line-height: 1.25; }
.route-result:empty { display: none; }
.route-result { border-radius: var(--radius-card); display: grid; gap: var(--space-2); margin-block-end: var(--space-4); padding: var(--space-4); }
.route-result[data-status="research"] { background: var(--research-background); border: 1px solid var(--research-border); color: var(--research-foreground); }
.route-result[data-status="hold"], .route-result[data-status="not_available"] { background: var(--hold-background); border: 1px solid var(--hold-border); color: var(--hold-foreground); }
.route-result[data-status="enabled"] { background: var(--verified-background); border: 1px solid var(--verified-border); color: var(--verified-foreground); }
.route-result strong { font-size: 16px; }
.route-result p { color: inherit; }
.intent-actions { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.intent-actions .field-help { flex-basis: 100%; }
.two-columns { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ticket-list { display: grid; gap: var(--space-2); margin-block-start: var(--space-4); }
.ticket-list:empty { display: none; }
.ticket-item { align-items: start; background: var(--elevated); border: 1px solid var(--border); border-radius: var(--radius-control); display: grid; gap: var(--space-2); padding: var(--space-3); }
.ticket-item strong, .flight-result strong { color: var(--midnight); }
.ticket-item small { color: var(--slate); }
.ticket-state { border-radius: var(--radius-pill); color: var(--research-foreground); background: var(--research-background); border: 1px solid var(--research-border); font-size: 12px; font-weight: 800; justify-self: start; padding: 4px 8px; }
.flight-result:empty { display: none; }
.flight-result { display: grid; gap: var(--space-3); margin-block-start: var(--space-4); }
.flight-fact { background: var(--elevated); border: 1px solid var(--border); border-radius: var(--radius-control); display: grid; gap: var(--space-2); padding: var(--space-3); }
.flight-fact.stale, .flight-fact.unavailable { background: var(--research-background); border-color: var(--research-border); }
.flight-fact dl { display: grid; gap: var(--space-2); grid-template-columns: max-content 1fr; margin: 0; }
.flight-fact dt { color: var(--slate); font-size: 13px; }
.flight-fact dd { color: var(--midnight); font-family: var(--f-mono); font-variant-numeric: tabular-nums; margin: 0; overflow-wrap: anywhere; }
.help-panel { grid-column: 1 / -1; }
.help-panel ul { color: var(--slate); display: grid; gap: var(--space-2); line-height: 1.55; margin-block: var(--space-4) 0; padding-inline-start: 20px; }

dialog { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-panel); box-shadow: 0 24px 56px rgb(7 31 43 / .25); color: var(--deep-ink); inline-size: min(640px, calc(100vw - 32px)); max-block-size: min(720px, calc(100dvh - 32px)); padding: var(--space-6); }
dialog::backdrop { background: rgb(7 22 28 / .52); }
.picker-header { align-items: flex-start; display: flex; gap: var(--space-3); margin-block-end: var(--space-4); }
.icon-button { align-items: center; background: var(--muted); border: 1px solid var(--border); border-radius: 50%; color: var(--midnight); display: inline-flex; flex: none; inline-size: 44px; justify-content: center; min-block-size: 44px; padding: 0; }
.airport-results { display: grid; gap: var(--space-2); margin-block-start: var(--space-4); min-block-size: 72px; }
.airport-result { background: var(--elevated); border: 1px solid var(--border); border-radius: var(--radius-control); color: var(--midnight); display: grid; gap: var(--space-1); min-block-size: 60px; padding: var(--space-3); text-align: start; }
.airport-result:hover { border-color: var(--teal); }
.airport-result span { color: var(--slate); font-size: 13px; }
.airport-result bdi { font-family: var(--f-mono); font-size: 13px; }
.picker-empty { color: var(--slate); line-height: 1.5; padding: var(--space-3) 0; }

footer { border-top: 1px solid var(--midnight); color: var(--midnight); display: flex; font-size: 13px; font-weight: 700; gap: var(--space-3); justify-content: space-between; margin: 0 auto; max-inline-size: 1180px; padding: var(--space-6) clamp(20px, 4vw, 48px); width: 100%; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
html[dir="rtl"] { font-family: var(--f-ar); }
html[dir="rtl"] h1, html[dir="rtl"] h2 { font-family: var(--f-ar); }
html[dir="rtl"] .eyebrow { letter-spacing: 0; }
html[dir="rtl"] .icon { transform: scaleX(-1); }
html[dir="rtl"] .flight-icon .icon, html[dir="rtl"] .proof-icon .icon, html[dir="rtl"] .status-icon .icon { transform: none; }

@media (max-width: 760px) {
  .portal-grid { grid-template-columns: 1fr; }
  .route-fields, .two-columns { grid-template-columns: 1fr; }
  .account-strip { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 520px) {
  .site-header { align-items: flex-start; flex-direction: column; padding-block: var(--space-4); }
  .header-actions { justify-content: start; }
  .panel { padding: var(--space-4); }
  h1 { font-size: clamp(40px, 12vw, 56px); }
  footer { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}