/* Flight-data hub (/data). Bars use classes w0..w100: the CSP forbids inline styles. */
.hubnav { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.hubnav a { font-size: .88rem; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; background: var(--card); }
.hubnav a.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.crumbs { font-size: .82rem; color: var(--ink-2); margin: 10px 0 0; }
.crumbs a { color: var(--ink-2); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 16px 0; }
.kpi { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.kpi b { display: block; font-size: 1.7rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi span { font-size: .85rem; color: var(--ink-2); }
.kpi.alert { background: #fff1ec; border-color: #f3b9a6; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar { height: 9px; min-width: 70px; background: var(--paper); border-radius: 5px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--amber); }
.bar.red i { background: var(--red); }
.w0 { width: 0 } .w5 { width: 5% } .w10 { width: 10% } .w15 { width: 15% } .w20 { width: 20% } .w25 { width: 25% }
.w30 { width: 30% } .w35 { width: 35% } .w40 { width: 40% } .w45 { width: 45% } .w50 { width: 50% } .w55 { width: 55% }
.w60 { width: 60% } .w65 { width: 65% } .w70 { width: 70% } .w75 { width: 75% } .w80 { width: 80% } .w85 { width: 85% }
.w90 { width: 90% } .w95 { width: 95% } .w100 { width: 100% }
.days { display: grid; grid-template-columns: repeat(auto-fill, minmax(30px, 1fr)); gap: 3px; align-items: end; height: 120px; margin: 10px 0 4px; }
.days div { background: var(--amber); border-radius: 3px 3px 0 0; min-height: 2px; }
.h0 { height: 2px } .h5 { height: 5% } .h10 { height: 10% } .h15 { height: 15% } .h20 { height: 20% } .h25 { height: 25% }
.h30 { height: 30% } .h35 { height: 35% } .h40 { height: 40% } .h45 { height: 45% } .h50 { height: 50% } .h55 { height: 55% }
.h60 { height: 60% } .h65 { height: 65% } .h70 { height: 70% } .h75 { height: 75% } .h80 { height: 80% } .h85 { height: 85% }
.h90 { height: 90% } .h95 { height: 95% } .h100 { height: 100% }
.tag.major { background: #ffd9cf; }
.lookup { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; }
.lookup label { display: grid; gap: 4px; font-weight: 600; font-size: .9rem; }
.lookup input { font: inherit; padding: 12px; border: 1.5px solid var(--line); border-radius: 10px; }
.result-box { border-left: 5px solid var(--amber); background: var(--paper); padding: 14px 18px; border-radius: 10px; margin: 16px 0; }
.result-box.good { border-color: var(--green); }
.result-box.bad { border-color: var(--red); }
.snippet { font: .85rem/1.4 var(--mono); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 12px; white-space: pre-wrap; word-break: break-all; }
.hubsrc { margin-top: 26px; }
@media (max-width: 560px) { .lookup { grid-template-columns: 1fr; } }