/* Shared site chrome: header (.sh), footer (.sf), "Guides & help" (.sg), breadcrumb (.bc),
   "More apps" strip (.sm) and the apps hub (.hub).
   The markup is written into every page by tools/build_chrome.py from tools/apps.json.
   CSS-only changes need no rebuild.

   Every page also has its own older <style> with bare element rules (nav, footer, section,
   h2, p, a, ul, li). Everything below is scoped to a class and sets the properties those
   rules touch, so the chrome looks the same on every page whatever the page's own CSS says. */

html { scroll-padding-top: 84px; }

.sh, .sf, .sm, .sg, .bc, .hub {
    --c-bg: #0A0A0F; --c-surface: #151520; --c-surface2: #1E1E2E;
    --c-text: #F5F5F7; --c-text2: #A1A1AA; --c-text3: #71717A; --c-border: #2A2A3A;
    --c-gold: #E9B949;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
    line-height: 1.45; -webkit-font-smoothing: antialiased; text-align: left;
}
.sh *, .sf *, .sm *, .sg *, .bc *, .hub * { box-sizing: border-box; }
.sh a, .sf a, .sm a, .sg a, .hub a, .sh a:hover, .sf a:hover, .sm a:hover, .sg a:hover, .hub a:hover { text-decoration: none; }
.sh nav, .sf nav, nav.bc {
    position: static; top: auto; width: auto; z-index: auto;
    background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.sh ul, .sf ul { list-style: none; margin: 0; padding: 0; }
.sh li, .sf li { margin: 0; padding: 0; }
.sh summary { list-style: none; }
.sh summary::-webkit-details-marker { display: none; }
.sh :focus-visible, .sf :focus-visible, .sm :focus-visible, .sg :focus-visible, .bc :focus-visible, .hub :focus-visible {
    outline: 2px solid var(--a, var(--sh-accent, var(--c-gold))); outline-offset: 2px; border-radius: 8px;
}

/* App icons sit on a near-black page and some (B2Gaudio) are near-black themselves: a hairline keeps their shape. */
.sh-tab img, .sh-applink img, .sf-app-h img, .sm-card img, .hub-card-top img { box-shadow: 0 0 0 1px rgba(255,255,255,.12); }

/* ---------- Header: one row of app tabs ---------- */
.sh {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 64px;
    background: rgba(10, 10, 15, .92);
    -webkit-backdrop-filter: saturate(1.4) blur(20px); backdrop-filter: saturate(1.4) blur(20px);
    border-bottom: 1px solid var(--c-border); color: var(--c-text);
}
.sh-bar {
    max-width: 1160px; height: 100%; margin: 0 auto; padding: 0 20px;
    display: flex; align-items: stretch; gap: 14px;
}
.sh-nav { display: flex; align-items: stretch; flex: 1 1 auto; min-width: 0; }
/* The tabs scroll sideways when they don't fit (phones); navigation never needs JavaScript. */
.sh-strip {
    display: flex; align-items: stretch; gap: 2px; min-width: 0;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.sh-strip::-webkit-scrollbar { display: none; }
.sh-tab {
    position: relative; display: flex; align-items: center; gap: 9px; flex: none;
    padding: 0 12px;
    color: var(--c-text2); font-size: .93rem; font-weight: 600; letter-spacing: -.005em; white-space: nowrap;
    transition: color .15s, background .15s;
}
.sh-tab:hover { color: var(--c-text); background: rgba(255,255,255,.045); }
.sh-tab img { width: 24px; height: 24px; border-radius: 6px; flex: none; display: block; }
.sh-tab.is-current { color: #fff; }
.sh-tab.is-current::after, .sh-tab-all[aria-current]::after {
    content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px;
    border-radius: 3px 3px 0 0; background: var(--a);
}
.sh-tab-all { color: var(--c-text); font-size: .86rem; padding: 0 14px 0 4px; margin-right: 6px; }
.sh-tab-all::before {   /* divider between "All apps" and the app tabs */
    content: ""; position: absolute; right: -4px; top: 18px; bottom: 18px; width: 1px; background: var(--c-border);
}
.sh-tab-all[aria-current]::after { background: var(--c-text); left: 4px; }
.sh-grid { width: 18px; height: 18px; flex: none; fill: currentColor; display: block; }
.sh-short { display: none; }
.sh-pill {
    padding: 1px 6px; border-radius: 999px; border: 1px solid rgba(233,185,73,.5);
    color: var(--c-gold); font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; line-height: 1.5;
}
.sh-badge {
    display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
    border: 1px solid rgba(233,185,73,.45); color: var(--c-gold);
    font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    vertical-align: 2px; line-height: 1.6; white-space: nowrap;
}

/* More than six apps: the rest live under "More" (outside the scrolling strip so the panel isn't clipped). */
.sh-more { position: relative; display: flex; flex: none; }
.sh-more > summary {
    display: flex; align-items: center; gap: 6px; padding: 0 12px; cursor: pointer;
    color: var(--c-text2); font-size: .93rem; font-weight: 600;
}
.sh-more > summary:hover, .sh-more[open] > summary { color: var(--c-text); background: rgba(255,255,255,.045); }
.sh-caret { width: 10px; height: 10px; transition: transform .2s; }
.sh-more[open] .sh-caret { transform: rotate(180deg); }
.sh-more-panel {
    position: absolute; top: calc(100% + 8px); right: 0; width: 320px; padding: 8px; z-index: 2;
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
.sh-applink { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; color: var(--c-text); }
.sh-applink:hover { background: rgba(255,255,255,.06); }
.sh-applink img { width: 36px; height: 36px; border-radius: 9px; flex: none; }
.sh-applink b { display: block; font-size: .95rem; font-weight: 600; color: var(--c-text); }
.sh-applink small { display: block; font-size: .8rem; line-height: 1.35; color: var(--c-text2); }

.sh-cta {
    align-self: center; display: inline-flex; align-items: center; gap: 7px; flex: none;
    padding: 9px 16px; border-radius: 999px;
    background: var(--sh-accent); color: var(--sh-accent-text, #fff);
    font-size: .88rem; font-weight: 650; white-space: nowrap; line-height: 1.2;
    transition: filter .15s;
}
.sh-cta:hover { color: var(--sh-accent-text, #fff); filter: brightness(1.1); }
.sh-cta svg { width: 15px; height: 15px; fill: currentColor; flex: none; }
.sh-cta-short { display: none; }
.sh-soon {
    align-self: center; flex: none; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--c-border);
    color: var(--c-text2); font-size: .8rem; font-weight: 600; white-space: nowrap;
}

/* Tablets and phones: short names, and a fade on the right edge says "there's more, swipe". */
@media (max-width: 860px) {
    .sh-bar { padding: 0 12px; gap: 10px; }
    .sh-full { display: none; }
    .sh-short { display: inline; }
    .sh-tab { padding: 0 10px; gap: 7px; font-size: .9rem; }
    .sh-tab img { width: 22px; height: 22px; }
    .sh-tab-all { padding: 0 10px 0 2px; margin-right: 4px; }
    .sh-tab-all .sh-name { display: none; }
    .sh-tab-all[aria-current]::after { left: 2px; right: 8px; }
    .sh-strip {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
        padding-right: 22px;
    }
    .sh-strip[data-scrolled] {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
        mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
    }
    .sh-pill { display: none; }
}
@media (max-width: 480px) {
    .sh-cta-long { display: none; }
    .sh-cta-short { display: inline; }
    .sh-cta { padding: 9px 13px; }
    .sh-soon { padding: 6px 9px; font-size: .74rem; }
}
@media (max-width: 360px) {
    .sh-bar { padding: 0 8px; gap: 8px; }
    .sh-cta-short { display: none; }
    .sh-cta { padding: 9px 11px; }
    .sh-tab { padding: 0 8px; }
    .sh-soon { display: none; }
}

/* ---------- Breadcrumb (top of every app sub-page) ---------- */
nav.bc { display: block; margin: 0 0 22px; padding: 0; font-size: .88rem; line-height: 1.5; }
.bc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; row-gap: 2px; }
.bc li { display: inline-flex; align-items: center; margin: 0; padding: 0; color: #D4D4D8; font-size: .88rem; }
.bc a { color: var(--c-text2); text-decoration: none; }
.bc a:hover { color: var(--c-text); text-decoration: underline; text-decoration-color: var(--a); text-underline-offset: 3px; }
.bc-sep { margin: 0 9px; color: #52525B; }

/* ---------- "Guides & help" (each app's home page) ---------- */
.sg { display: block; margin: 0; padding: 72px 20px; border-top: 1px solid var(--c-border); background: none; text-align: left; }
.sg-inner { max-width: 1100px; margin: 0 auto; }
.sg-h { margin: 0 0 8px; padding: 0; color: var(--c-text); font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; text-align: center; }
.sg-sub { margin: 0 auto 32px; padding: 0; max-width: 600px; color: var(--c-text2); font-size: 1rem; text-align: center; }
.sg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.sg-card {
    display: flex; flex-direction: column; padding: 18px 20px;
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 14px;
    color: var(--c-text); transition: border-color .2s, transform .2s;
}
.sg-card:hover { border-color: var(--a); transform: translateY(-2px); }
.sg-card b { display: block; margin: 0 0 6px; color: var(--c-text); font-size: 1rem; font-weight: 650; line-height: 1.3; }
.sg-card small { display: block; color: var(--c-text2); font-size: .88rem; line-height: 1.5; }
.sg-go { display: block; margin-top: auto; padding-top: 12px; color: var(--a); font-size: .85rem; font-weight: 600; }
.sg-help { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.sg-link {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px;
    border: 1px solid var(--c-border); border-radius: 999px; color: var(--c-text); font-size: .92rem; font-weight: 600;
}
.sg-link:hover { border-color: var(--a); color: var(--c-text); }
.sg-link svg { width: 16px; height: 16px; color: var(--a); flex: none; }
@media (max-width: 600px) {
    .sg { padding: 56px 20px; }
    .sg-h { font-size: 1.6rem; }
}

/* ---------- Footer ---------- */
.sf {
    display: block; margin: 0; padding: 56px 20px 32px;
    background: #08080C; border-top: 1px solid var(--c-border);
    color: var(--c-text2); font-size: .9rem; text-align: left;
}
.sf-inner { max-width: 1160px; margin: 0 auto; }
.sf-top { display: flex; flex-wrap: wrap; gap: 40px; }
.sf-brand { flex: 1 1 220px; max-width: 300px; }
.sf-brand-link { display: inline-flex; align-items: center; gap: 10px; color: var(--c-text); font-weight: 650; font-size: 1rem; }
.sf-brand-link .sh-grid { width: 18px; height: 18px; color: var(--c-text2); }
.sf-brand p { margin: 12px 0 14px; padding: 0; color: var(--c-text2); font-size: .88rem; line-height: 1.5; }
.sf-brand-links a { display: inline-block; margin-right: 16px; color: var(--c-text2); font-size: .88rem; }
.sf-brand-links a:hover { color: var(--c-text); }
.sf-apps { flex: 3 1 560px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 28px 24px; }
.sf-app-h {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; padding: 0;
    color: var(--c-text); font-size: .92rem; font-weight: 650;
}
.sf-app-h a { color: var(--c-text); display: inline-flex; align-items: center; gap: 8px; }
.sf-app-h img { width: 22px; height: 22px; border-radius: 6px; }
.sf-app-h .sh-badge { margin-left: 0; }
.sf-app li a { display: inline-block; padding: 4px 0; color: var(--c-text2); font-size: .88rem; }
.sf-app li a:hover { color: var(--c-text); }
.sf-bottom {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
    margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--c-border);
}
.sf .copyright { margin: 0; padding: 0; color: var(--c-text3); font-size: .84rem; }
.sf-bottom a { color: var(--c-text3); font-size: .84rem; margin-left: 16px; }
.sf-bottom a:first-child { margin-left: 0; }
.sf-bottom a:hover { color: var(--c-text); }
@media (max-width: 600px) {
    .sf { padding: 44px 20px 28px; }
    .sf-apps { grid-template-columns: 1fr 1fr; flex-basis: 100%; }
    .sf-brand { max-width: none; }
}

/* ---------- "More apps" strip (app home pages) ---------- */
.sm { display: block; margin: 0; padding: 72px 20px; border-top: 1px solid var(--c-border); background: none; text-align: left; }
.sm-inner { max-width: 1100px; margin: 0 auto; }
.sm-h { margin: 0 0 8px; padding: 0; color: var(--c-text); font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; text-align: center; }
.sm-sub { margin: 0 auto 32px; padding: 0; max-width: 560px; color: var(--c-text2); font-size: 1rem; text-align: center; }
.sm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.sm-card {
    display: flex; gap: 14px; align-items: flex-start; padding: 18px;
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 16px;
    color: var(--c-text); transition: border-color .2s, transform .2s;
}
.sm-card:hover { border-color: var(--a); transform: translateY(-2px); }
.sm-card img { width: 52px; height: 52px; border-radius: 12px; flex: none; }
.sm-card b { display: block; color: var(--c-text); font-size: 1.02rem; font-weight: 650; margin-bottom: 2px; }
.sm-card small { display: block; color: var(--c-text2); font-size: .88rem; line-height: 1.45; }
.sm-card .sm-more { display: inline-block; margin-top: 8px; color: var(--a); font-size: .85rem; font-weight: 600; }
.sm-all { display: block; width: max-content; margin: 26px auto 0; color: var(--c-text2); font-size: .92rem; font-weight: 500; }
.sm-all:hover { color: var(--c-text); }

/* ---------- Apps hub (/apps.html) ---------- */
.hub { max-width: 1100px; margin: 0 auto; padding: 128px 20px 72px; color: var(--c-text); }
.hub-hero { text-align: center; margin: 0 auto 48px; max-width: 680px; }
.hub-icons { display: flex; justify-content: center; gap: 12px; margin: 0 auto 26px; }
.hub-icons img { width: 56px; height: 56px; border-radius: 13px; display: block; box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 14px 36px rgba(0,0,0,.45); }
.hub-hero h1 { margin: 0 0 12px; font-size: clamp(2rem, 5vw, 2.9rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: var(--c-text); }
.hub-hero p { margin: 0; color: var(--c-text2); font-size: 1.1rem; line-height: 1.6; }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.hub-card {
    position: relative; display: flex; flex-direction: column; padding: 26px;
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 20px; overflow: hidden;
}
.hub-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--a); }
.hub-card-top { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.hub-card-top img { width: 68px; height: 68px; border-radius: 16px; flex: none; }
.hub-card h2 { margin: 0 0 4px; padding: 0; font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; color: var(--c-text); line-height: 1.2; }
.hub-status { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; color: var(--c-text2); }
.hub-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #34C759; }
.hub-status.soon { color: var(--c-gold); }
.hub-status.soon::before { background: var(--c-gold); }
.hub-tagline { margin: 0 0 8px; color: var(--a); font-weight: 600; font-size: 1rem; }
.hub-summary { margin: 0 0 10px; color: var(--c-text2); font-size: .95rem; line-height: 1.6; }
.hub-platform { margin: 0 0 20px; color: var(--c-text3); font-size: .82rem; }
.hub-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.hub-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px;
    font-size: .9rem; font-weight: 650; line-height: 1.2;
}
.hub-btn svg { width: 16px; height: 16px; fill: currentColor; }
.hub-btn.primary { background: var(--a); color: var(--at, #fff); }
.hub-btn.primary:hover { filter: brightness(1.1); color: var(--at, #fff); }
.hub-btn.ghost { border: 1px solid var(--c-border); color: var(--c-text); }
.hub-btn.ghost:hover { border-color: var(--a); color: var(--c-text); }
.hub-btn.disabled { border: 1px dashed var(--c-border); color: var(--c-text3); cursor: default; }
.hub-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--c-border); }
.hub-links a { color: var(--c-text2); font-size: .85rem; }
.hub-links a:hover { color: var(--c-text); }
.hub-note { margin: 40px auto 0; max-width: 620px; text-align: center; color: var(--c-text3); font-size: .9rem; }
.hub-note a { color: var(--c-text2); text-decoration: underline; }
@media (max-width: 420px) {
    .hub { padding-top: 104px; }
    .hub-card { padding: 22px; }
    .hub-grid { grid-template-columns: 1fr; }
}