/* =====================================================================
 * siteBar.css: the InFlight top bar on every page of the site.
 *
 * The same bar as the live map (appChrome.js) and the Flight Center
 * (flight-center.html): a glass island across the top, the brand on the
 * left, then the page's own search and controls, then the page's links as
 * a bar of icons over labels, and the Menu that reaches every page.
 * siteBar.js fills in the icons and the Menu; each page writes its own
 * <header class="sb" data-page="..."> with what is relevant to it.
 * ===================================================================== */
.sb {
    --sb-glass: rgba(26, 26, 28, 0.9);
    --sb-solid: rgba(28, 28, 30, 0.97);
    --sb-raised: rgba(255, 255, 255, 0.07);
    --sb-raised-2: rgba(255, 255, 255, 0.12);
    --sb-stroke: rgba(255, 255, 255, 0.10);
    --sb-text: #fff;
    --sb-text-2: rgba(235, 235, 245, 0.62);
    --sb-text-3: rgba(235, 235, 245, 0.36);
    --sb-accent: #0a84ff;
    position: sticky;
    top: calc(16px + env(safe-area-inset-top, 0px));
    z-index: 1000;
    width: min(1400px, calc(100% - 32px));
    height: 62px;
    margin: calc(16px + env(safe-area-inset-top, 0px)) auto 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px 0 14px;
    border-radius: 31px;
    background: var(--sb-glass);
    -webkit-backdrop-filter: blur(28px) saturate(170%);
    backdrop-filter: blur(28px) saturate(170%);
    border: 0.5px solid var(--sb-stroke);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
    color: var(--sb-text);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.2;
    -webkit-font-smoothing: antialiased;
    text-align: left;
}
.sb, .sb * { box-sizing: border-box; }
.sb a { color: inherit; text-decoration: none; }
.sb button { font: inherit; color: inherit; cursor: pointer; }
.sb svg { flex: none; }
.sb [hidden] { display: none !important; }

/* ---- brand */
.sb-brand { display: flex; align-items: center; gap: 10px; flex: none; min-width: 0; margin-right: 8px; }
.sb-brand img { width: 30px; height: 30px; object-fit: contain; flex: none; display: block; }
.sb-brand-txt { display: flex; flex-direction: column; justify-content: center; line-height: 1; }
.sb-brand-txt b { font-size: 14px; font-weight: 900; letter-spacing: .16em; color: #fff; white-space: nowrap; text-transform: uppercase; }
.sb-brand-txt i { margin-top: 4px; font-style: normal; font-size: 8px; font-weight: 700; letter-spacing: .42em; color: var(--sb-text-2); white-space: nowrap; text-transform: uppercase; }
.sb-label { display: none; font-size: 15px; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* ---- the page's search */
.sb-search {
    position: relative; flex: 1 1 auto; min-width: 0; max-width: 560px;
    display: flex; align-items: center; gap: 10px;
    height: 46px; padding: 0 12px 0 16px; border-radius: 23px;
    background: var(--sb-raised); cursor: text; transition: background .15s ease;
}
.sb-search:focus-within { background: var(--sb-raised-2); }
.sb-search > svg, .sb-search > .ic, .sb-search > i { width: 20px !important; height: 20px !important; color: var(--sb-text-2); flex: none; position: static !important; transform: none !important; }
.sb-search > span.ic { display: grid; place-items: center; }
.sb-search > span.ic svg { width: 100%; height: 100%; }
.sb .sb-search input {
    flex: 1 1 auto; min-width: 0; width: auto; height: 100%;
    padding: 0; margin: 0; border: 0 !important; border-radius: 0; outline: 0 !important;
    background: none !important; color: var(--sb-text) !important;
    font: inherit; font-size: 16px; letter-spacing: -0.01em; caret-color: var(--sb-accent);
    box-shadow: none !important;
}
.sb .sb-search input::placeholder { color: var(--sb-text-2); opacity: 1; }
.sb .sb-search input::-webkit-search-cancel-button { display: none; }
.sb-kbd { flex: none; font: 600 11px/1 -apple-system, system-ui, sans-serif; color: var(--sb-text-3); border: 0.5px solid var(--sb-stroke); border-radius: 6px; padding: 4px 6px; }
.sb-search:focus-within .sb-kbd, .sb-search:has(input:not(:placeholder-shown)) .sb-kbd { display: none; }
@media (pointer: coarse) { .sb-kbd { display: none; } }

.sb-fill { flex: 1 1 auto; }

/* ---- the page's own controls */
.sb .sb-btn {
    flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; min-width: 40px; padding: 0 14px; border-radius: 20px;
    border: 0; background: var(--sb-raised); color: var(--sb-text);
    font-size: 13px; font-weight: 600; white-space: nowrap; text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.sb .sb-btn:hover { background: var(--sb-raised-2); }
.sb .sb-btn.icon { width: 40px; padding: 0; }
.sb .sb-btn[aria-pressed="false"] { color: var(--sb-text-2); }
.sb .sb-btn.primary { background: #fff; color: #000; }
.sb .sb-btn.primary:hover { background: #e6e6e6; }
.sb .sb-btn svg, .sb .sb-btn i { width: 16px; height: 16px; font-size: 14px; }
/* An account button with the pilot's picture or initials at its start. */
.sb .sb-btn.has-avatar { padding: 0 14px 0 7px; }
.sb .sb-btn.has-avatar > :first-child { width: 26px; height: 26px; border-radius: 50%; flex: none; }
.sb-mobile { display: none !important; }

/* ---- the page's links: icons over labels in one raised pill */
.sb-nav { flex: none; display: flex; height: 46px; padding: 3px; border-radius: 23px; background: var(--sb-raised); }
.sb .sb-item {
    position: relative; flex: none; width: 68px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    padding: 3px 0 2px; border: 0; border-radius: 20px; background: none;
    color: var(--sb-text-2); text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.sb .sb-item:hover { color: #fff; }
.sb .sb-item.is-on, .sb .sb-item.active, .sb .sb-item[aria-current="page"], .sb .sb-item[aria-expanded="true"] { background: var(--sb-raised-2); color: #fff; }
.sb .sb-item:active { transform: scale(.95); }
.sb-ic { display: grid; place-items: center; width: 22px; height: 20px; }
.sb-ic svg { width: 19px; height: 19px; }
.sb .sb-item > span:not(.sb-ic) { font-size: 10.5px; font-weight: 500; line-height: 12px; white-space: nowrap; max-width: 64px; overflow: hidden; text-overflow: ellipsis; }
.sb .sb-item.is-on > span:not(.sb-ic), .sb .sb-item.active > span:not(.sb-ic), .sb .sb-item[aria-current="page"] > span:not(.sb-ic) { font-weight: 650; }

/* ---- the Menu: every page of the site */
.sb-menu { position: relative; flex: none; display: flex; }
.sb-menu-panel {
    position: absolute; top: calc(100% + 14px); right: -3px; z-index: 5;
    width: 270px; max-height: calc(100vh - 110px); overflow: auto;
    padding: 8px; border-radius: 22px;
    background: var(--sb-solid);
    -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%);
    border: 0.5px solid var(--sb-stroke);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
    transform-origin: top right;
    animation: sb-pop .18s cubic-bezier(.2, .8, .2, 1);
}
@keyframes sb-pop { from { opacity: 0; transform: scale(.96) translateY(-4px); } }
.sb-menu-h { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--sb-text-3); padding: 8px 10px 6px; }
.sb-menu-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 7px 10px; border: 0; border-radius: 14px; background: none; color: var(--sb-text); text-align: left; }
.sb-menu-item:hover, .sb-menu-item:focus-visible { background: var(--sb-raised); outline: 0; }
.sb-menu-item[aria-current="page"] { background: var(--sb-raised); }
.sb-menu-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--sb-raised-2); color: #fff; flex: none; }
.sb-menu-ic svg { width: 17px; height: 17px; }
.sb-menu-item[aria-current="page"] .sb-menu-ic { background: var(--sb-accent); }
.sb-menu-t { display: flex; flex-direction: column; min-width: 0; }
.sb-menu-t b { font-size: 14.5px; font-weight: 600; }
.sb-menu-t small { font-size: 12px; color: var(--sb-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-menu-sep { height: 0.5px; background: var(--sb-stroke); margin: 6px 8px; }
.sb-menu-foot { display: flex; gap: 14px; padding: 6px 10px 4px; font-size: 12px; }
.sb-menu-foot a { color: var(--sb-text-3) !important; }
.sb-menu-foot a:hover { color: var(--sb-text-2) !important; }

/* ---- a row under the bar (a page's phone search, say) */
.sb-row { display: none; flex: 1 0 100%; padding: 0 0 10px; }
.sb-row.show { display: block; }
.sb:has(.sb-row.show) { flex-wrap: wrap; height: auto; padding-top: 8px; padding-bottom: 0; row-gap: 8px; }

/* ---- narrower desktops: the links lose their labels */
@media (max-width: 1099px) {
    .sb .sb-item { width: 48px; }
    .sb .sb-item > span:not(.sb-ic) { display: none; }
    .sb-ic svg { width: 21px; height: 21px; }
    .sb .sb-btn .sb-btn-l { display: none; }
    .sb .sb-btn:has(.sb-btn-l) { width: 40px; padding: 0; }
}
/* ---- phones */
@media (max-width: 759px) {
    .sb {
        top: calc(8px + env(safe-area-inset-top, 0px));
        margin-top: calc(8px + env(safe-area-inset-top, 0px));
        margin-bottom: 14px;
        width: calc(100% - 16px);
        height: 56px; border-radius: 28px; padding: 0 5px 0 12px; gap: 6px;
    }
    .sb-brand { margin-right: 0; }
    .sb-brand-txt, [data-sb-wide] { display: none !important; }
    .sb-label { display: block; }
    .sb > .sb-search { display: none; }
    .sb-row .sb-search { display: flex; max-width: none; }
    .sb-mobile { display: inline-flex !important; }
    /* A page whose search is the point of it keeps it on a phone, as a
       second row of the bar. */
    .sb.sb-search-row { flex-wrap: wrap; height: auto; padding: 5px 5px 8px 12px; row-gap: 6px; }
    .sb.sb-search-row > .sb-search { display: flex; order: 99; flex: 1 0 100%; max-width: none; height: 42px; margin-right: 3px; }
    .sb .sb-btn { height: 40px; }
    .sb-nav { height: 44px; }
    .sb .sb-item { width: 44px; }
    .sb-menu-panel { position: fixed; top: calc(72px + env(safe-area-inset-top, 0px)); right: 8px; left: auto; width: min(300px, calc(100vw - 16px)); }
}
@media (max-width: 380px) {
    .sb-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .sb-menu-panel { animation: none; }
}