/*
 * The one site shell: the header and footer every public page wears (hub consolidation phase 2,
 * 2026-10-03). The markup is written into each page by tools/site-shell.cjs; this is its only
 * stylesheet. Self-contained on purpose: the apps catalogue and some pages load no design tokens,
 * so every token has its design-tokens.css value as the fallback. Served at
 * /messaging-platform/hub/css/site-shell.css; hub-navigation.css imports it for the app landings.
 */
@import url('/messaging-platform/hub/css/fonts.css');

.site-header {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--bg, #0b1120) 88%, transparent);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--border, rgba(148, 163, 184, .14));
    font-family: 'Manrope', 'Manrope Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.site-header .site-header__inner {
    display: flex; align-items: center; gap: 24px;
    max-width: 1200px; margin: 0 auto; padding: 0 24px; min-height: 64px;
}
/* 44px tall here, not in a page's CSS: hub-product pages never load ui.css, so their logo was 28px (L1). */
.site-header .brand {
    display: inline-flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px;
    color: var(--text, #eef2f8); font-weight: 800; font-size: 17px; letter-spacing: -.2px; text-decoration: none;
}
.site-header .brand:hover { text-decoration: none; color: var(--text, #eef2f8); }
.site-header .brand svg { width: 28px; height: 28px; flex: 0 0 28px; }
.site-header .site-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.site-header .site-nav > a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px;
    color: var(--text-body, #c4cede); font-size: 15px; font-weight: 600; text-decoration: none;
}
.site-header .site-nav > a:hover { color: var(--text, #eef2f8); background: var(--surface-2, #16203a); text-decoration: none; }
.site-header .site-nav > a[aria-current="page"] { color: var(--accent, #2dd4bf); }
.site-header .site-nav > a.site-nav__cta {
    margin-left: 8px; padding: 0 18px; background: var(--accent, #2dd4bf); color: #0b1120;
}
/* Teal, like every page's own primary button (was the token rust, the one orange button on a teal site). */
.site-header .site-nav > a.site-nav__cta:hover { background: color-mix(in srgb, var(--accent, #2dd4bf) 85%, #fff); color: #0b1120; }
.site-header .nav-toggle {
    display: none; align-items: center; justify-content: center; margin-left: auto;
    width: 44px; height: 44px; flex: 0 0 44px; border-radius: 8px; cursor: pointer;
    background: transparent; color: var(--text, #eef2f8); border: 1px solid var(--border-strong, rgba(148, 163, 184, .28));
}
.site-header .nav-toggle svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }

@media (max-width: 1000px) {
    .site-header .site-header__inner { flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; gap: 12px; }
    .site-header .nav-toggle { display: inline-flex; }
    .site-header .site-nav {
        display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 4px; margin: 0;
        padding: 10px; border: 1px solid var(--border-strong, rgba(148, 163, 184, .28)); border-radius: 12px;
        background: var(--surface-1, #101827);
    }
    .site-header[data-open="true"] .site-nav { display: flex; }
    .site-header .site-nav > a.site-nav__cta { margin: 6px 0 0; justify-content: center; }
}
@media (max-width: 360px) {
    .site-header .site-header__inner { padding-left: 16px; padding-right: 16px; }
    .site-header .brand { font-size: 15px; }
}

/* The demo <-> product strip above the footer (site-shell.cjs pairStrip, plan P2). */
.site-shell-pair {
    margin-top: 48px; border-top: 1px solid var(--border, rgba(148, 163, 184, .14));
    background: var(--surface-1, #101827); color: var(--text-body, #c4cede);
    font-family: 'Manrope', 'Manrope Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 15px;
}
.site-shell-pair__inner { max-width: 1200px; margin: 0 auto; padding: 18px 24px; }
.site-shell-pair p { margin: 0; }
.site-shell-pair a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--brand-ink, #7ee8dc); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.site-shell-pair + * .site-shell-footer, .site-shell-pair + .site-shell-footer { margin-top: 0; }
.site-shell-footer {
    margin-top: 64px; border-top: 1px solid var(--border, rgba(148, 163, 184, .14));
    background: var(--bg, #0b1120); color: var(--text-muted, #8a97ab);
    font-family: 'Manrope', 'Manrope Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 14px;
}
.site-shell-footer .site-shell-footer__inner { max-width: 1200px; margin: 0 auto; padding: 48px 24px 28px; }
.site-shell-footer .site-shell-footer__cols {
    display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 32px;
}
.site-shell-footer .brand {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--text, #eef2f8);
    font-weight: 800; font-size: 16px; text-decoration: none;
}
.site-shell-footer .brand svg { width: 26px; height: 26px; flex: 0 0 26px; }
.site-shell-footer .site-shell-footer__about p { margin: 12px 0 0; max-width: 32ch; line-height: 1.55; }
.site-shell-footer .site-shell-footer__about ul { margin-top: 8px; }
.site-shell-footer h2 {
    margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--text, #eef2f8);
}
.site-shell-footer ul { list-style: none; margin: 0; padding: 0; }
.site-shell-footer li a {
    display: inline-flex; align-items: center; min-height: 36px; min-width: 44px; color: var(--text-muted, #8a97ab); text-decoration: none;
    /* min-width: "Apps" was 32.7px in Manrope and under 32px in the system face, on a view where
       Manrope missed first paint (font-display: optional), 2026-10-05. */
}
.site-shell-footer li a:hover { color: var(--text, #eef2f8); text-decoration: underline; text-underline-offset: 4px; }
.site-shell-footer .site-shell-footer__legal {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
    margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--border, rgba(148, 163, 184, .14)); font-size: 13px;
}
@media (max-width: 900px) {
    .site-shell-footer .site-shell-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-shell-footer .site-shell-footer__about { grid-column: 1 / -1; }
}
@media (pointer: coarse) { .site-shell-footer li a { min-height: 44px; } }

/* --- The account chip (js/profile-chip.js), which the shell puts on every page --------------------
   Was in landing.css, which the hub, Games and Pricing do not load, so there the initial and the name
   ran together unstyled ("Hhaitham..."); it lives with the shell that injects it (2026-10-05). */
.site-nav .mp-chip { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.site-nav .mp-chip__initial {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--brand-subtle, rgba(45, 212, 191, .14)); color: var(--brand-ink, #7ee8dc);
    font-size: 12px; font-weight: 700; line-height: 1;
}
/* A display name can be anything, so it truncates rather than push the nav wider than the page. */
.site-nav .mp-chip__name { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; }
/* At 320px the chip plus the brand is too wide for the header row: the initial stays, the name goes. */
@media (max-width: 380px) {
    .site-nav .mp-chip__name { display: none; }
    .site-nav .mp-chip { padding: 6px 8px; }
}