/* #region zone:flights.v3-design — โทเคนและปุ่มสี่ชนิด */
@font-face {
  font-family: Geist;
  src: url('/flights/fonts/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/flights/fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: Anuphan;
  src: url('/flights/fonts/Anuphan.ttf') format('truetype');
  font-weight: 100 700;
  font-display: swap;
}
:root[data-ui='v3'] {
  color-scheme: light;
  --f3-bg: var(--u-page);
  --f3-card: var(--u-card);
  --f3-card2: var(--u-card-2);
  --f3-pop: var(--u-sheet);
  --f3-line: var(--u-border);
  --f3-faint: var(--u-border);
  --f3-shadow: var(--u-shadow-overlay);

  --f3-ink: #0b0b0b;
  --f3-muted: #61615f;

  --f3-accent: #00675b;
  --f3-accent-ink: #00594f;
  --f3-soft: #ddeee9;
  --f3-amber: #7d5200;
  --f3-amber-soft: #fbedc6;
  --f3-red: #a51e28;
  --f3-red-soft: #ffe4e5;
  --f3-hover: rgb(0 0 0 / 0.055);
  --f3-press: rgb(0 0 0 / 0.11);

  --f3-sans: Geist, Anuphan, system-ui, sans-serif;
  --f3-mono: 'Geist Mono', Anuphan, ui-monospace, monospace;
  --f3-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --f3-logo-size: 40px;
  --f3-logo-large: 48px;
  --f3-logo-gap: var(--space-3, 12px);
}
:root[data-ui='v3'][data-theme='dark'] {
  color-scheme: dark;

  --f3-ink: #f4f4f2;
  --f3-muted: #9d9d9a;

  --f3-accent: #33bfa9;
  --f3-accent-ink: #5fd3c0;
  --f3-soft: #0d2a25;
  --f3-amber: #ffc94d;
  --f3-amber-soft: #33270b;
  --f3-red: #ff9da4;
  --f3-red-soft: #3b1018;
  --f3-hover: rgb(255 255 255 / 0.075);
  --f3-press: rgb(255 255 255 / 0.14);
}
[data-ui='v3'] body {
  margin: 0;
  background: var(--f3-bg);
  color: var(--f3-ink);
}
[data-ui='v3'] .airline-mark {
  width: var(--f3-logo-size);
  height: var(--f3-logo-size);
  flex: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  font-size: 16px;
  color: color-mix(in srgb, var(--airline-color) 50%, #000);
}
[data-ui='v3'] .airline-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
[data-ui='v3'][data-theme='dark'] .airline-mark {
  color: color-mix(in srgb, var(--airline-color) 55%, #fff);
}
/* Only the bundled dark marks need a contrast surface; keep their original artwork. */
[data-ui='v3'][data-theme='dark']
  .airline-mark:has(
    img:is(
      [src$='/6E.png'],
      [src$='/AF.png'],
      [src$='/BA.png'],
      [src$='/CX.png'],
      [src$='/GA.png'],
      [src$='/KE.png'],
      [src$='/LH.png'],
      [src$='/MH.png'],
      [src$='/MU.png'],
      [src$='/NH.png'],
      [src$='/PG.png'],
      [src$='/QR.png']
    )
  ) {
  border-radius: 50%;
  background: #e7e7e4;
}
[data-ui='v3'] .wrap {
  max-width: 1264px;
  padding: 0 var(--u-space-4) 28px;
}
[data-ui='v3'] .wrap > .top,
[data-ui='v3'] #data-foot {
  display: none;
}
.f3-frame {
  position: relative;
  font: 15px/1.5 var(--f3-sans);
}
.f3-frame * {
  box-sizing: border-box;
}
.f3-frame [hidden] {
  display: none !important;
}
.f3-frame :is(h1, h2, h3, p) {
  margin: 0;
}
.f3-frame h1 {
  font-size: var(--u-text-2xl);
  line-height: 1.2;
  letter-spacing: -0.025em;
  font-weight: 600;
}
.f3-frame h2 {
  font-size: var(--u-text-lg);
  line-height: 1.3;
  font-weight: 600;
}
.f3-frame h3 {
  font-size: var(--u-text-sm);
  font-weight: 500;
}
.f3-frame button {
  -webkit-tap-highlight-color: transparent;
}
.f3-card {
  min-width: 0;
  padding: var(--u-space-4);
  background: var(--f3-card);
  border-radius: var(--u-radius-card);
}
.f3-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--u-space-2);
  min-height: 44px;
  margin-bottom: var(--u-space-2);
}
.f3-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--u-space-2);
  margin: var(--u-space-4) 0;
}
.f3-head .f3-note {
  grid-column: 1 / -1;
  margin: 0;
}
.f3-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--u-space-2);
}
.f3-grid,
.f3-col {
  display: grid;
  gap: var(--u-space-4);
  min-width: 0;
  align-content: start;
}
.f3-mono {
  font-family: var(--f3-mono);
  font-variant-numeric: tabular-nums;
}
.f3-count {
  padding: 2px var(--u-space-2);
  border-radius: var(--u-radius-pill);
  background: var(--f3-card2);
  font: 13px var(--f3-mono);
}
.f3-badge {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 18px;
  height: 18px;
  border-radius: var(--u-radius-pill);
  background: var(--f3-accent);
  color: var(--f3-bg);
  font: 600 11px/18px var(--f3-mono);
  text-align: center;
}
@media (min-width: 760px) {
  [data-ui='v3'] .wrap {
    padding: 0 var(--u-space-6) 40px;
  }
  .f3-head {
    margin: 28px 0 var(--u-space-5);
  }
  .f3-frame h1 {
    font-size: var(--u-text-2xl);
  }
  .f3-card {
    padding: var(--u-space-5);
    border-radius: var(--u-radius-card);
  }
}
/* #endregion */

/* #region zone:flights.v3-legacy-controls — รายละเอียดและกล่องเดิมใช้โทเคนและขนาดปุ่มร่วมกัน */
[data-ui='v3'] {
  --bg: var(--f3-bg);
  --fg: var(--f3-ink);
  --muted: var(--f3-muted);
  --dim: var(--f3-muted);
  --panel: var(--f3-card);
  --panel-raised: var(--f3-card2);
  --glass: var(--f3-pop);
  --glass-2: var(--f3-card2);
  --stroke: var(--f3-line);
  --line: var(--f3-line);
  --control-line: var(--f3-faint);
  --accent: var(--f3-accent);
  --on-accent: var(--f3-bg);
  --sans: var(--f3-sans);
  --accent-primary: var(--f3-accent);
  --accent-primary-soft: var(--f3-soft);
  --accent-secondary: var(--f3-accent);
  --accent-surface: var(--f3-soft);
  --surface-hover: var(--f3-hover);
  --status-airborne: var(--f3-accent-ink);
  --status-landed: var(--f3-accent-ink);
  --status-waiting: var(--f3-amber);
  --status-danger: var(--f3-red);
}
[data-ui='v3'] .btn {
  min-height: 44px;
  min-width: 44px;
  border-radius: var(--u-radius-pill);
  padding: 10px 18px;
  font: 500 15px/1.4 var(--f3-sans);
  background: transparent;
  color: var(--f3-ink);
  border: 1px solid var(--f3-faint);
}
[data-ui='v3'] .btn.primary {
  background: var(--f3-ink);
  color: var(--f3-bg);
  border-color: transparent;
}
[data-ui='v3'] .btn:disabled {
  opacity: 1;
  cursor: default;
}
[data-ui='v3'] .btn:hover {
  background: var(--f3-hover);
}
[data-ui='v3'] .btn.primary:enabled:hover {
  background: color-mix(in srgb, var(--f3-ink) 84%, var(--f3-bg));
}
[data-ui='v3'] .btn:active {
  background: var(--f3-press);
}
[data-ui='v3'] .btn.primary:active {
  background: color-mix(in srgb, var(--f3-ink) 72%, var(--f3-bg));
}
[data-ui='v3'] :is(.actions, .search-controls, .calendar-actions) {
  gap: var(--u-space-2);
}
[data-ui='v3'] dialog {
  color: var(--f3-ink);
  background: var(--f3-pop);
}
/* #endregion */