/* Fonts: load css/fonts.css (self-hosted) before this file. */

/* FlightCast component styles. Framework-neutral: plain classes on semantic HTML.
   Every value comes from tokens.css (generated from tokens.json). */

body { background: var(--bg-scope); color: var(--text-paper); font-family: var(--font-body); margin: 0; }
.fc-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; padding: var(--space-4); }
.fc-col { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); max-width: 390px; }
.fc-label { font-family: var(--font-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }

/* Focus: one ring for everything */
.fc-btn:focus-visible, .fc-chip:focus-visible, .fc-tab:focus-visible, .fc-strip:focus-visible, .fc-input:focus-visible,
.fc-select:focus-visible, .fc-switch:focus-visible, .fc-seg button:focus-visible, .fc-stepper button:focus-visible,
.fc-answer:focus-visible, .fc-link:focus-visible, .fc-nav a:focus-visible {
  outline: var(--border-active) solid var(--amber); outline-offset: 2px;
}

/* ---------- Button ---------- */
.fc-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--button-h); padding: 0 var(--space-5);
  border-radius: var(--radius-ui); border: var(--border-hair) solid transparent; font-family: var(--font-body); font-size: 15px; font-weight: 600;
  cursor: pointer; text-decoration: none; white-space: nowrap; }
.fc-btn--primary { background: var(--amber); color: var(--on-amber); }
.fc-btn--primary:hover { background: var(--amber-hover); }
.fc-btn--secondary { background: transparent; color: var(--text-paper); border-color: var(--line); font-weight: 500; }
.fc-btn--secondary:hover { background: var(--bg-strip); }
.fc-btn--text { background: transparent; color: var(--amber); height: var(--touch-min); padding: 0 var(--space-2); }
.fc-btn--text:hover { color: var(--amber-hover); }
.fc-btn--danger { background: transparent; color: var(--red); border-color: var(--red); font-weight: 500; }
.fc-btn--sm { height: 40px; padding: 0 var(--space-3); font-size: 13px; }
.fc-btn--block { width: 100%; }
.fc-btn:disabled, .fc-btn[aria-disabled="true"] { background: transparent; color: var(--text-faint); border-color: var(--line); border-style: dashed; cursor: not-allowed; }
.fc-btn[aria-busy="true"] { cursor: progress; }
.fc-btn[aria-busy="true"]::before { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: fc-spin 0.8s linear infinite; }
@keyframes fc-spin { to { transform: rotate(360deg); } }
.fc-link { color: var(--amber); font-size: 13px; }
.fc-link:hover { color: var(--amber-hover); }

/* ---------- Filter chip ---------- */
.fc-chips { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; }
.fc-chip { flex: 0 0 auto; height: var(--chip-h); padding: 0 14px; border-radius: var(--radius-ui); border: var(--border-hair) solid var(--line);
  background: transparent; color: var(--text-paper); font-family: var(--font-body); font-size: 13px; cursor: pointer; }
.fc-chip:hover { background: var(--bg-strip); }
.fc-chip[aria-pressed="true"] { background: var(--amber); border-color: var(--amber); color: var(--on-amber); font-weight: 600; }
.fc-chip--sort { font-family: var(--font-mono); font-size: 11px; height: 32px; padding: 0 10px; }

/* ---------- Confidence badge (inline) ---------- */
.fc-conf { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-ui);
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; }
.fc-conf--high { background: var(--amber); color: var(--on-amber); }
.fc-conf--med { border: var(--border-outline) solid var(--amber); color: var(--amber); }
.fc-conf--low { border: var(--border-outline) dashed var(--low); color: var(--low-text); }
.fc-conf--none { border: var(--border-outline) dotted var(--line); color: var(--text-faint); }

/* ---------- Forecast strip ---------- */
.fc-strip { display: grid; grid-template-columns: var(--strip-code-w) minmax(0, 1fr) var(--strip-badge-w); background: var(--bg-strip);
  border: var(--border-hair) solid var(--line); border-left: var(--border-signal) solid var(--amber); color: var(--text-paper); text-decoration: none; }
a.fc-strip:hover { background: var(--bg-strip-selected); }
.fc-strip[aria-current="true"] { background: var(--bg-strip-selected); }
.fc-strip__code { padding: 10px 8px; border-right: var(--border-hair) solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.fc-strip__country { font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 22px; }
.fc-strip__shop { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); }
.fc-strip__body { padding: 10px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fc-strip__name { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-strip__meta { font-family: var(--font-mono); font-size: 11px; line-height: 16px; color: var(--text-muted); }
.fc-strip__value { font-family: var(--font-mono); font-size: 11px; line-height: 16px; }
.fc-strip__badge { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; }
.fc-strip__pct { font-family: var(--font-mono); font-size: 21px; line-height: 24px; font-weight: 700; }
.fc-strip__level { font-family: var(--font-mono); font-size: 10px; line-height: 14px; font-weight: 700; letter-spacing: 0.04em; }
.fc-strip--high .fc-strip__badge { background: var(--amber); color: var(--on-amber); }
.fc-strip--med .fc-strip__badge { border: var(--border-outline) solid var(--amber); color: var(--amber); }
.fc-strip--low { border-left-style: dashed; border-left-color: var(--low); }
.fc-strip--low .fc-strip__badge { border: var(--border-outline) dashed var(--low); color: var(--low-text); }
.fc-strip__warn { color: var(--red); }
.fc-strip--loading .fc-strip__country, .fc-strip--loading .fc-strip__name, .fc-strip--loading .fc-strip__meta, .fc-strip--loading .fc-strip__pct {
  color: transparent; background: var(--line); border-radius: var(--radius-ui); animation: fc-pulse 1.4s ease-in-out infinite; }
.fc-strip--loading { border-left-color: var(--line); }
@keyframes fc-pulse { 50% { opacity: 0.45; } }

/* ---------- App bar + dual clock ---------- */
.fc-appbar { display: flex; align-items: center; justify-content: space-between; padding: 14px var(--space-4); border-bottom: var(--border-hair) solid var(--line); background: var(--bg-scope); }
.fc-appbar__brand { display: flex; align-items: center; gap: 10px; }
.fc-appbar__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 26px; letter-spacing: 0.04em; text-transform: uppercase; }
.fc-clock { display: flex; flex-direction: column; align-items: flex-end; font-family: var(--font-mono); font-size: 12px; line-height: 1.35; }
.fc-clock__local { color: var(--text-faint); }
.fc-back { display: inline-flex; align-items: center; gap: 6px; min-height: var(--touch-min); color: var(--text-paper); text-decoration: none; font-size: 14px; }

/* ---------- Tab bar (phone) ---------- */
.fc-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--border-hair) solid var(--line); background: var(--bg-frame); }
.fc-tab { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0 14px; color: var(--text-muted); text-decoration: none;
  font-family: var(--font-mono); font-size: 11px; border-top: var(--border-active) solid transparent; margin-top: -1px; position: relative; }
.fc-tab[aria-current="page"] { color: var(--amber); border-top-color: var(--amber); }
.fc-tab__count { position: absolute; top: 6px; left: calc(50% + 8px); min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; background: var(--amber); color: var(--on-amber); font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.fc-tab--flying { color: var(--cyan); }

/* ---------- Side nav (≥1024px) ---------- */
.fc-nav { display: flex; flex-direction: column; gap: 4px; background: var(--bg-frame); padding: var(--space-4); width: 220px; box-sizing: border-box; }
.fc-nav a { display: flex; align-items: center; gap: 12px; height: var(--touch-min); padding: 0 15px; color: var(--text-muted); text-decoration: none; font-family: var(--font-mono); font-size: 13px; border-left: 3px solid transparent; }
.fc-nav a[aria-current="page"] { background: var(--bg-strip); color: var(--amber); border-left-color: var(--amber); padding-left: 12px; }

/* ---------- Profile summary ---------- */
.fc-profile { display: flex; justify-content: space-between; align-items: center; min-height: 40px; padding: 0 12px; border: var(--border-hair) solid var(--line);
  color: var(--text-paper); text-decoration: none; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; }
.fc-profile__edit { color: var(--amber); }

/* ---------- Chance bars ---------- */
.fc-chance { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-1); align-items: end; height: 92px; }
.fc-chance__col { display: flex; flex-direction: column; align-items: stretch; gap: 4px; height: 100%; justify-content: flex-end; }
.fc-chance__bar { box-sizing: border-box; min-height: 6px; }
.fc-chance__bar--high { background: var(--amber); }
.fc-chance__bar--med { border: var(--border-outline) solid var(--amber); }
.fc-chance__bar--low { border: var(--border-outline) dashed var(--low); }
.fc-chance__label { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); text-align: center; }
.fc-chance__col[aria-current="true"] .fc-chance__label { color: var(--amber); }

/* ---------- Departure card ---------- */
.fc-dep { background: var(--bg-strip); border: var(--border-hair) solid var(--line); border-left: var(--border-signal) solid var(--amber); display: flex; flex-direction: column; }
.fc-dep--low { border-left-style: dashed; border-left-color: var(--low); }
.fc-dep__main { display: grid; grid-template-columns: 36px minmax(0, 1fr) var(--strip-badge-w); }
.fc-dep__rank { display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 15px; font-weight: 700; border-right: var(--border-hair) solid var(--line); }
.fc-dep__rank--first { color: var(--amber); }
.fc-dep__info { padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.fc-dep__times { font-family: var(--font-mono); font-size: 17px; font-weight: 700; }
.fc-dep__meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.fc-dep__why { font-size: 13px; }
.fc-dep__action { display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border: 0; border-top: var(--border-hair) solid var(--line);
  background: transparent; color: var(--amber); font-family: var(--font-body); font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; }
.fc-dep__action[aria-pressed="true"] { color: var(--on-amber); background: var(--amber); }

/* ---------- Flight panel ---------- */
.fc-flight { border: var(--border-hair) solid var(--cyan); background: var(--bg-flight); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.fc-flight__head { display: flex; justify-content: space-between; align-items: center; color: var(--cyan); font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; }
.fc-flight__time { font-family: var(--font-mono); font-size: 30px; line-height: 30px; font-weight: 700; }
.fc-flight__sub { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.fc-flight__track { position: relative; height: 4px; background: var(--line); }
.fc-flight__fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--cyan); }
.fc-flight--banner { flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px; font-family: var(--font-mono); font-size: 12px; color: var(--cyan); text-decoration: none; }

/* ---------- Status tags ---------- */
.fc-tag { display: inline-block; padding: 3px 8px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; border-radius: var(--radius-ui); }
.fc-tag--armed { background: var(--amber); color: var(--on-amber); }
.fc-tag--risk { border: var(--border-outline) solid var(--red); color: var(--red); }
.fc-tag--airborne { border: var(--border-outline) solid var(--cyan); color: var(--cyan); }
.fc-tag--done { border: var(--border-outline) solid var(--line); color: var(--text-muted); }

/* ---------- Alert card ---------- */
.fc-alert { background: var(--bg-strip); border: var(--border-hair) solid var(--line); border-left: var(--border-signal) solid var(--amber); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.fc-alert--risk { border-left-color: var(--red); }
.fc-alert__head { display: flex; justify-content: space-between; align-items: center; }
.fc-alert__title { display: inline-flex; align-items: baseline; gap: 8px; }
.fc-alert__plan { font-family: var(--font-mono); font-size: 16px; font-weight: 700; }
.fc-alert__note { font-size: 13px; }
.fc-alert--risk .fc-alert__note { color: var(--red); }

/* ---------- Bottom sheet ---------- */
.fc-scrim { position: absolute; inset: 0; background: var(--bg-scrim); z-index: var(--z-sheet); }
.fc-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: var(--z-sheet); background: var(--bg-strip); border-top: var(--border-active) solid var(--amber);
  padding: 22px var(--space-4) 28px; display: flex; flex-direction: column; gap: var(--space-4); }
.fc-sheet__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 30px; }
.fc-answers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.fc-answer { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 64px; border-radius: var(--radius-ui);
  font-family: var(--font-body); font-size: 17px; font-weight: 700; cursor: pointer; background: transparent; color: var(--text-paper); }
.fc-answer small { font-family: var(--font-mono); font-size: 10px; font-weight: 400; }
.fc-answer--yes { background: var(--amber); color: var(--on-amber); border: 0; }
.fc-answer--partly { border: var(--border-outline) solid var(--amber); color: var(--amber); }
.fc-answer--no { border: var(--border-outline) dashed var(--low); }

/* ---------- Form controls ---------- */
.fc-field { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--text-faint); text-transform: uppercase; }
.fc-input, .fc-select { height: var(--input-h); padding: 0 12px; background: var(--bg-strip); color: var(--text-paper); border: var(--border-hair) solid var(--line);
  border-radius: var(--radius-ui); font-family: var(--font-body); font-size: 15px; box-sizing: border-box; text-transform: none; letter-spacing: 0; }
.fc-input::placeholder { color: var(--text-faint); }
.fc-input[aria-invalid="true"] { border-color: var(--red); }
.fc-field__error { color: var(--red); font-family: var(--font-body); font-size: 12px; text-transform: none; letter-spacing: 0; }
.fc-input--mono { font-family: var(--font-mono); }
.fc-switch { flex: 0 0 52px; width: 52px; height: 30px; border-radius: var(--radius-ui); border: var(--border-outline) solid var(--low); background: transparent; padding: 3px;
  display: flex; justify-content: flex-start; cursor: pointer; box-sizing: border-box; }
.fc-switch::after { content: ""; width: 20px; height: 20px; background: var(--low); }
.fc-switch[aria-checked="true"] { background: var(--amber); border-color: var(--amber); justify-content: flex-end; }
.fc-switch[aria-checked="true"]::after { background: var(--on-amber); }
.fc-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border: var(--border-hair) solid var(--line); }
.fc-seg button { height: var(--touch-min); border: 0; border-left: var(--border-hair) solid var(--line); background: transparent; color: var(--text-paper); font-family: var(--font-body); font-size: 13px; cursor: pointer; }
.fc-seg button:first-child { border-left: 0; }
.fc-seg button[aria-checked="true"] { background: var(--amber); color: var(--on-amber); font-weight: 600; }
.fc-stepper { display: inline-flex; align-items: center; border: var(--border-hair) solid var(--line); }
.fc-stepper button { width: var(--touch-min); height: var(--touch-min); border: 0; background: transparent; color: var(--text-paper); font-size: 20px; cursor: pointer; }
.fc-stepper button:disabled { color: var(--line); cursor: not-allowed; }
.fc-stepper output { min-width: 48px; text-align: center; font-family: var(--font-mono); font-size: 18px; font-weight: 700; }
.fc-setting { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.fc-setting__text { display: flex; flex-direction: column; gap: 2px; }
.fc-setting__hint { font-size: 12px; color: var(--text-faint); }

/* ---------- Disclosure table ---------- */
.fc-disclosure { width: 100%; border-collapse: collapse; font-size: 13px; border: var(--border-hair) solid var(--line); }
.fc-disclosure caption { text-align: left; padding: 0 0 6px; font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.06em; }
.fc-disclosure th { text-align: left; font-weight: 500; color: var(--text-muted); padding: 9px 10px; width: 44%; }
.fc-disclosure td { padding: 9px 10px; }
.fc-disclosure tr + tr th, .fc-disclosure tr + tr td { border-top: var(--border-hair) solid var(--line); }
.fc-disclosure td mark { background: transparent; color: var(--amber); font-weight: 600; }

/* ---------- Stat grid ---------- */
.fc-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: var(--border-hair) solid var(--line); }
.fc-stat { background: var(--bg-strip); padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.fc-stat__label { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); text-transform: uppercase; }
.fc-stat__value { font-family: var(--font-mono); font-size: 15px; }
.fc-stat__value--accent { color: var(--amber); }

/* ---------- Banners, toast, empty ---------- */
.fc-banner { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; font-size: 13px; line-height: 19px; border: var(--border-hair) solid var(--line); background: var(--bg-strip); }
.fc-banner--stale { border-color: var(--red); color: var(--text-paper); }
.fc-banner--stale .fc-banner__icon { color: var(--red); }
.fc-banner--info { border-style: dashed; color: var(--text-muted); }
.fc-banner--flight { border-color: var(--cyan); background: var(--bg-flight); }
.fc-banner__icon { flex: 0 0 18px; }
.fc-toast { display: inline-flex; align-items: center; gap: var(--space-3); padding: 12px 14px; background: var(--text-paper); color: var(--bg-scope); font-size: 14px; font-weight: 500; border-radius: var(--radius-ui); }
.fc-toast button { background: transparent; border: 0; color: var(--bg-scope); font-family: var(--font-mono); font-size: 12px; font-weight: 700; text-decoration: underline; cursor: pointer; min-height: var(--touch-min); }
.fc-empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-5); border: var(--border-hair) dashed var(--line); }
.fc-empty__title { margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: 700; }
.fc-empty__text { margin: 0; font-size: 13px; color: var(--text-muted); }

/* ---------- Split-flap digits (landing time / headline figures) ---------- */
.fc-flap { display: inline-flex; gap: 3px; font-family: var(--font-mono); font-size: 20px; font-weight: 700; }
.fc-flap__cell { position: relative; background: var(--bg-scope); padding: 4px 6px; border-radius: var(--radius-ui); }
.fc-flap__cell::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--bg-strip); }
.fc-flap__cell--flip { animation: fc-flip 180ms ease-in; transform-origin: 50% 50%; }
@keyframes fc-flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }

@media (prefers-reduced-motion: reduce) {
  .fc-flap__cell--flip, .fc-strip--loading *, .fc-btn[aria-busy="true"]::before { animation: none !important; }
}