/* Airport Speed Mate interactive demo — synced to investor deck (TOC-forward) */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

.tai {
  --apron: #10151E;
  --surface: #19202C;
  --raised: #222B3A;
  --line: #2E3849;
  --line-soft: #232C3B;
  --hivis: #FFB020;
  --clear: #2ED3A7;
  --stop: #FF5A5F;
  --info: #59A5F5;
  --ink: #EDF1F7;
  --ink-2: #B6C1D2;
  --ink-mute: #7C8AA0;

  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --sign: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  background: var(--apron);
  color: var(--ink);
  font-family: var(--body);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  line-height: 1.5;
}
.tai *, .tai *::before, .tai *::after { box-sizing: border-box; }
.tai :focus-visible { outline: 2px solid var(--hivis); outline-offset: 2px; border-radius: 4px; }

.tai-top {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px;
  background: linear-gradient(180deg, #151C27, #10151E);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.tai-mark {
  font-family: var(--sign); font-weight: 700; font-size: 22px;
  letter-spacing: .04em; line-height: 1;
}
.tai-mark span { color: var(--hivis); }
.tai-station {
  font-family: var(--mono); font-size: 11px; color: var(--ink-mute);
  letter-spacing: .1em; text-transform: uppercase;
  padding-left: 14px; border-left: 1px solid var(--line);
}
.tai-clock {
  margin-left: auto; display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 13px; color: var(--ink-2);
}
.tai-live {
  width: 7px; height: 7px; border-radius: 50%; background: var(--clear);
  box-shadow: 0 0 0 0 rgba(46,211,167,.6); animation: taiPulse 2.4s infinite;
}
@keyframes taiPulse {
  0% { box-shadow: 0 0 0 0 rgba(46,211,167,.55); }
  70% { box-shadow: 0 0 0 7px rgba(46,211,167,0); }
  100% { box-shadow: 0 0 0 0 rgba(46,211,167,0); }
}
.tai-ai-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 18px; border-radius: 4px; background: var(--hivis);
  color: #16130C; font-family: var(--mono); font-size: 9px; font-weight: 700;
  flex-shrink: 0;
}

.tai-nav {
  display: flex; gap: 0; overflow-x: auto; background: #131924;
  border-bottom: 1px solid var(--line);
}
.tai-nav button {
  flex: 1 0 auto; min-width: 148px; text-align: left;
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 11px 16px 10px; cursor: pointer; color: var(--ink-mute);
  font-family: var(--body); transition: color .15s, background .15s;
}
.tai-nav button:hover { background: #172030; color: var(--ink-2); }
.tai-nav button.on { color: var(--ink); border-bottom-color: var(--hivis); background: #1A2331; }
.tai-nav .q {
  display: block; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--hivis);
  margin-bottom: 3px; opacity: .85;
}
.tai-nav .t { font-family: var(--sign); font-size: 17px; font-weight: 600; letter-spacing: .02em; }

.tai-body { padding: 20px 18px 24px; min-height: 540px; }
.tai-panel { display: none; animation: taiIn .3s ease both; }
.tai-panel.on { display: block; }
@keyframes taiIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.tai-asked {
  border-left: 2px solid var(--hivis); padding: 2px 0 2px 13px; margin-bottom: 18px;
}
.tai-asked .lbl {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-mute); display: block; margin-bottom: 3px;
}
.tai-asked .qz { font-family: var(--sign); font-size: 22px; font-weight: 600; letter-spacing: .01em; }
.tai-asked .ans { font-size: 13px; color: var(--ink-2); margin-top: 5px; max-width: 74ch; }

.tai-h { font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-mute); margin: 0 0 10px; }

.tai-flight {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: 10px; padding: 13px 15px; margin-bottom: 10px;
  transition: border-color .2s, background .2s;
}
.tai-flight[data-risk="high"] { border-color: rgba(255,90,95,.4); background: #1E1A20; }
.tai-flight[data-risk="med"]  { border-color: rgba(255,176,32,.38); background: #1D1E20; }
.tai-flight[data-risk="done"] { opacity: .55; }

.tai-fhead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 11px; }
.tai-code { font-family: var(--mono); font-weight: 600; font-size: 16px; letter-spacing: .04em; }
.tai-route { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.tai-meta { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); letter-spacing: .04em; }
.tai-verdict { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.tai-chip {
  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 3px; white-space: nowrap;
}
.tai-chip.ok   { color: var(--clear); background: rgba(46,211,167,.11); }
.tai-chip.warn { color: var(--hivis); background: rgba(255,176,32,.13); }
.tai-chip.bad  { color: var(--stop);  background: rgba(255,90,95,.13); }
.tai-chip.off  { color: var(--ink-mute); background: rgba(124,138,160,.13); }

.tai-track { position: relative; height: 110px; margin: 0 0 4px; }
.tai-lane { position: absolute; inset: 0; }
.tai-seg {
  position: absolute; height: 11px; border-radius: 2px;
  display: flex; align-items: center; padding: 0 5px; overflow: hidden;
  font-family: var(--mono); font-size: 8px; letter-spacing: .01em; white-space: nowrap;
  border: 1px solid transparent;
}
.tai-seg.plan  { background: transparent; border: 1px dashed var(--line); color: var(--ink-mute); }
.tai-seg.done  { background: rgba(46,211,167,.16); border-color: rgba(46,211,167,.35); color: #9BEBD3; }
.tai-seg.act   { background: rgba(89,165,245,.18); border-color: rgba(89,165,245,.45); color: #B8D9FB; }
.tai-seg.late  { background: rgba(255,90,95,.22); border-color: rgba(255,90,95,.6); color: #FFB3B5; }
.tai-seg.crit  { background: rgba(255,176,32,.2); border-color: rgba(255,176,32,.55); color: #FFD98A; }
.tai-seg.late.blink, .tai-seg.crit.blink { animation: taiBlink 1.8s ease-in-out infinite; }
@keyframes taiBlink { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

.tai-now { position: absolute; top: 11px; height: 90px; width: 1px; background: var(--hivis); }
.tai-now::after {
  content: 'NOW'; position: absolute; top: -10px; left: 3px;
  font-family: var(--mono); font-size: 8px; letter-spacing: .1em; color: var(--hivis);
}
.tai-scale {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 9px; color: var(--ink-mute); letter-spacing: .06em;
}
.tai-reco {
  margin-top: 10px; padding: 10px 11px; border-radius: 6px;
  background: rgba(255,176,32,.07); border: 1px solid rgba(255,176,32,.24);
  font-size: 12.5px; color: #FFE0A8;
}
.tai-reco-hd { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 6px; }
.tai-reco b { color: var(--hivis); font-weight: 700; }
.tai-reco .rec { color: var(--ink-2); margin-top: 5px; }
.tai-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.tai-actions button {
  font-family: var(--body); font-size: 11.5px; padding: 6px 12px; border-radius: 6px; cursor: pointer;
}
.tai-actions .primary { background: var(--hivis); color: #16130C; border: 0; font-weight: 700; }
.tai-actions .secondary { background: transparent; color: var(--ink-2); border: 1px solid var(--line); }
.tai-resolved {
  margin-top: 10px; padding: 9px 11px; border-radius: 6px;
  background: rgba(46,211,167,.08); border: 1px solid rgba(46,211,167,.3);
  font-size: 12.5px; color: #C9F5E3;
}

.tai-stats { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.tai-stat {
  flex: 1 1 130px; background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: 9px; padding: 11px 13px;
}
.tai-stat .n { font-family: var(--mono); font-size: 23px; font-weight: 700; line-height: 1.1; }
.tai-stat .l {
  font-family: var(--mono); font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-mute); margin-top: 4px;
}

.tai-bar { margin-bottom: 13px; }
.tai-bar .row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.tai-bar .nm { font-size: 13px; }
.tai-bar .vl { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.tai-bar .rail { height: 8px; background: #1C2430; border-radius: 4px; overflow: hidden; }
.tai-bar .fill { height: 100%; border-radius: 4px; transition: width .9s cubic-bezier(.2,.7,.3,1); }
.tai-cause {
  display: flex; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px;
}
.tai-cause:last-child { border-bottom: 0; }
.tai-cause .rank {
  font-family: var(--mono); font-size: 11px; color: var(--hivis); flex-shrink: 0; padding-top: 2px;
}
.tai-cause .txt { color: var(--ink-2); }
.tai-cause .txt b { color: var(--ink); font-weight: 700; display: block; }

.tai-comms-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tai-ch-hd { font-family: var(--body); font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.tai-ch-hd.wa { color: #7BE3A8; }
.tai-ch-hd.wv { color: #C4A6F5; }
.tai-ch-hd.tm { color: #A9A6F5; }
.tai-ch-panel {
  border: 1px solid var(--line-soft); border-radius: 10px; overflow: hidden; background: #151C27;
}
.tai-ch-top { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); display: flex; gap: 10px; align-items: center; background: var(--surface); }
.tai-ch-icon {
  width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center;
  font-family: var(--body); font-weight: 700; font-size: 13px; flex-shrink: 0;
}
.tai-ch-icon.wa { background: rgba(123,227,168,.16); color: #7BE3A8; }
.tai-ch-icon.wv { background: rgba(196,166,245,.18); color: #C4A6F5; }
.tai-ch-icon.tm { background: rgba(169,166,245,.18); color: #A9A6F5; }
.tai-ch-name { font-size: 13px; font-weight: 700; }
.tai-ch-sub { font-family: var(--mono); font-size: 9.5px; color: var(--ink-mute); letter-spacing: .06em; text-transform: uppercase; margin-top: 1px; }
.tai-ch-msgs { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.tai-msg2 {
  background: var(--raised); border-radius: 8px; padding: 10px 12px; font-size: 12.5px; border-left: 2px solid var(--line);
}
.tai-msg2.flag { border-left-color: var(--stop); }
.tai-msg2.fix { border-left-color: var(--clear); }
.tai-msg2 .who { font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.tai-msg2 .bd { color: var(--ink-2); }
.tai-msg2 .bd b { color: var(--ink); font-weight: 700; }
.tai-msg2 .stamp { font-family: var(--mono); font-size: 9.5px; color: var(--ink-mute); margin-top: 6px; }

.tai-flow { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; }
.tai-col { display: flex; flex-direction: column; gap: 8px; }
.tai-src {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: 8px;
  padding: 9px 11px; font-size: 12.5px;
}
.tai-src .s { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-mute); display: block; margin-top: 2px; }
.tai-core {
  background: linear-gradient(180deg, #2A2114, #1E1B16);
  border: 1px solid rgba(255,176,32,.4); border-radius: 10px;
  padding: 18px 16px; text-align: center; min-width: 132px;
}
.tai-core .nm { font-family: var(--sign); font-size: 20px; font-weight: 700; letter-spacing: .02em; }
.tai-core .nm span { color: var(--hivis); }
.tai-core .sub { font-family: var(--mono); font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--hivis); margin-top: 4px; opacity: .8; }
.tai-note {
  margin-top: 16px; padding: 11px 13px; border-radius: 8px;
  background: rgba(46,211,167,.06); border: 1px solid rgba(46,211,167,.22);
  font-size: 12.5px; color: #A8E9D5;
}

.tai-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; }
.tai-chat {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: 10px;
  display: flex; flex-direction: column; height: 430px; overflow: hidden;
}
.tai-chat-hd {
  padding: 10px 13px; border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 8px;
}
.tai-chat-hd .ttl { font-size: 13px; font-weight: 700; }
.tai-chat-hd .sub { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
.tai-log { flex: 1; overflow-y: auto; padding: 13px; display: flex; flex-direction: column; gap: 11px; }
.tai-turn { max-width: 86%; font-size: 13px; }
.tai-turn.me { align-self: flex-end; background: var(--raised); border-radius: 9px 9px 2px 9px; padding: 8px 11px; }
.tai-turn.ai { align-self: flex-start; display: flex; gap: 8px; }
.tai-turn.ai .bd3 {
  background: #151C27; border: 1px solid var(--line-soft);
  border-radius: 2px 9px 9px 9px; padding: 9px 12px; color: var(--ink-2); white-space: pre-wrap;
}
.tai-turn.ai .bd3 b { color: var(--ink); font-weight: 700; }
.tai-chips { display: flex; gap: 6px; padding: 0 13px 10px; flex-wrap: wrap; }
.tai-chips button {
  background: #1C2532; border: 1px solid var(--line); color: var(--ink-2);
  font-family: var(--mono); font-size: 10.5px; padding: 5px 9px; border-radius: 20px; cursor: pointer;
}
.tai-chips button:hover { border-color: var(--hivis); color: var(--ink); }
.tai-ask { display: flex; gap: 8px; padding: 11px 13px; border-top: 1px solid var(--line-soft); }
.tai-ask input {
  flex: 1; background: #131924; border: 1px solid var(--line); color: var(--ink);
  border-radius: 7px; padding: 9px 11px; font-family: var(--body); font-size: 13px;
}
.tai-ask input::placeholder { color: var(--ink-mute); }
.tai-ask button {
  background: var(--hivis); color: #16130C; border: 0; border-radius: 7px;
  padding: 9px 15px; font-weight: 700; font-size: 13px; cursor: pointer;
}
.tai-ask button:disabled { opacity: .45; cursor: not-allowed; }

.tai-side { display: flex; flex-direction: column; gap: 12px; }
.tai-card {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: 10px; padding: 13px 15px;
}
.tai-card .ttl { font-family: var(--sign); font-size: 18px; font-weight: 600; margin-bottom: 3px; }
.tai-card .dsc { font-size: 12.5px; color: var(--ink-mute); margin-bottom: 11px; }
.tai-btn {
  width: 100%; background: #1C2532; border: 1px solid var(--line); color: var(--ink);
  border-radius: 7px; padding: 9px; font-family: var(--body); font-size: 13px; cursor: pointer;
}
.tai-btn:hover { border-color: var(--hivis); }
.tai-btn:disabled { opacity: .5; cursor: not-allowed; }
.tai-out {
  margin-top: 11px; padding: 11px; background: #131924; border: 1px solid var(--line-soft);
  border-radius: 7px; font-size: 12px; color: var(--ink-2); white-space: pre-wrap;
  max-height: 250px; overflow-y: auto; font-family: var(--mono); line-height: 1.55;
}
.tai-save { display: flex; justify-content: space-between; padding: 7px 0;
  border-bottom: 1px solid var(--line-soft); font-size: 12.5px; }
.tai-save:last-child { border-bottom: 0; }
.tai-save .v { font-family: var(--mono); color: var(--clear); }
.tai-bignum { text-align: center; padding: 10px 0 4px; }
.tai-bignum .n { font-family: var(--mono); font-size: 34px; font-weight: 700; color: var(--hivis); }
.tai-bignum .l { font-size: 11.5px; color: var(--ink-mute); margin-top: 2px; }

.tai-foot {
  padding: 11px 18px; border-top: 1px solid var(--line); background: #131924;
  font-family: var(--mono); font-size: 10px; letter-spacing: .05em; color: var(--ink-mute);
  display: flex; gap: 14px; flex-wrap: wrap;
}
.tai-dot { color: var(--hivis); }

@media (max-width: 820px) {
  .tai-split { grid-template-columns: 1fr; }
  .tai-flow { grid-template-columns: 1fr; }
  .tai-comms-cols { grid-template-columns: 1fr; }
  .tai-chat { height: 380px; }
}
@media (prefers-reduced-motion: reduce) {
  .tai *, .tai *::before, .tai *::after { animation: none !important; transition: none !important; }
}