/* Tell the browser to use dark native form controls (checkbox fills,
       select dropdowns, scrollbars) when the app is in a dark theme.
       Without this, unchecked checkboxes render with white fills even
       though the page is dark. */
    html.theme-black { color-scheme: dark; }

    /* ============ Consolidated top bar ============
       One bar (logo, project pill, sections, Tools, credits, avatar). The
       sections + Tools live in the top row at desktop and drop to a second-row
       .tb-subnav as the viewport narrows. Settings (theme + density) live in the
       avatar menu. Tokenized to UI density via the fawna-density-* classes. */
    :root { --tb-h: 56px; --tb-ctl: 32px; --tb-fs: 13px; --tb-r: 8px; --tb-rs: 6px; --chrome-h: var(--tb-h); }
    .fawna-density-slim  { --tb-h: 48px; --tb-ctl: 28px; --tb-fs: 12.5px; --tb-r: 7px; --tb-rs: 5px; }
    .fawna-density-large { --tb-h: 64px; --tb-ctl: 38px; --tb-fs: 14px;  --tb-r: 9px; --tb-rs: 7px; }
    @media (max-width: 740px) { :root { --chrome-h: calc(var(--tb-h) + 46px); } }

    /* Credit coin icon (#i-coins). Global so every dashboard page that prints a
       credit cost sizes it; without this the bare svg renders at its huge
       intrinsic size (e.g. in sc-pacing-cost). */
    .cc-coin { display: inline-block; width: 13px; height: 13px; flex: none; vertical-align: -2px; }

    .topbar { position: sticky; top: 0; z-index: 50; background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
    .tb { display: flex; align-items: center; gap: 12px; height: var(--tb-h); padding: 0 18px; font-size: var(--tb-fs); }
    .tb-sp { flex: 1 1 auto; min-width: 6px; }
    .tb-div { width: 1px; align-self: center; height: 24px; background: var(--color-border); flex-shrink: 0; }
    .tb-logo { display: inline-flex; align-items: center; flex-shrink: 0; }

    /* project pill (switcher + current name in one control) */
    .tb-dd { position: relative; flex-shrink: 0; }
    .tb-pill {
        display: inline-flex; align-items: center; gap: 8px; height: var(--tb-ctl); padding: 0 11px;
        border: 1px solid transparent; border-radius: var(--tb-rs);
        background: none; color: var(--color-foreground-muted);
        font: inherit; font-size: var(--tb-fs); font-weight: 500; cursor: pointer; max-width: 220px;
    }
    .tb-pill:hover { background: var(--color-surface-muted); color: var(--color-foreground); }
    .tb-fdr { width: 15px; height: 15px; opacity: 0.85; flex-shrink: 0; }
    .tb-pill-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tb-cv { width: 11px; height: 11px; opacity: 0.55; flex-shrink: 0; transition: transform 120ms; }
    .tb-rot { transform: rotate(180deg); }

    /* section nav + tools */
    .tbnav { display: flex; align-items: center; gap: 2px; min-width: 0; }
    .tb-navi {
        display: inline-flex; align-items: center; gap: 7px; height: var(--tb-ctl); padding: 0 11px;
        border-radius: var(--tb-rs); color: var(--color-foreground-muted); text-decoration: none;
        font-weight: 500; white-space: nowrap; border: 1px solid transparent;
        background: none; font: inherit; font-size: var(--tb-fs); cursor: pointer;
    }
    .tb-navi svg { width: 15px; height: 15px; opacity: 0.9; flex-shrink: 0; }
    .tb-navi:hover { background: var(--color-surface-muted); color: var(--color-foreground); }
    .tb-navi.is-active { background: var(--color-surface-muted); color: var(--color-foreground); font-weight: 600; }
    .tb-navi.is-disabled { opacity: 0.45; cursor: not-allowed; }
    .tb-navi.is-disabled:hover { background: none; color: var(--color-foreground-muted); }
    .tb-toolsbtn { gap: 5px; flex-shrink: 0; }
    .tb-toolsbtn .tb-cv { width: 11px; height: 11px; }
    .tb-sp2 { flex: 1 1 auto; }
    .tools-top, .sub-tools { display: inline-flex; }

    /* dropdown menus (project + tools) */
    .tb-menu {
        position: absolute; top: calc(100% + 6px); left: 0; min-width: 240px; z-index: 60;
        background: var(--color-surface); border: 1px solid var(--color-border);
        border-radius: 10px; box-shadow: 0 16px 40px -12px rgba(15, 23, 42, 0.28); padding: 6px;
    }
    .tb-menu-r { left: auto; right: 0; }
    .tb-menu-item {
        display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 9px;
        font-size: 13px; text-align: left; text-decoration: none; color: var(--color-foreground); border-radius: 6px;
    }
    .tb-menu-item:hover { background: var(--color-surface-muted); }
    .tb-menu-item svg { width: 15px; height: 15px; }
    .tb-menu-new { color: var(--color-accent); font-weight: 600; }
    .tb-menu-proj { justify-content: space-between; }
    .tb-menu-proj.is-current { background: var(--color-surface-muted); }
    .tb-menu-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tb-menu-meta { font-size: 10px; color: var(--color-foreground-subtle); flex-shrink: 0; }
    .tb-menu-sep { height: 1px; background: var(--color-border); margin: 5px 6px; }
    .tb-menu-cap { padding: 6px 9px 3px; font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-foreground-subtle); }
    .tb-menu-ic { width: 26px; height: 26px; border-radius: 6px; background: var(--color-surface-muted); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .tb-menu-ic svg { width: 15px; height: 15px; color: var(--color-accent); }
    .tb-menu-ic.plain svg { color: var(--color-foreground-muted); }
    .tb-badge { margin-left: auto; background: var(--color-danger); color: #fff; border-radius: 999px; font-size: 10px; font-weight: 700; padding: 0 6px; }

    /* credits pill */
    .tb-credits {
        display: inline-flex; align-items: center; gap: 6px; height: var(--tb-ctl); padding: 0 6px;
        color: var(--color-foreground); font-weight: 600; font-size: var(--tb-fs); text-decoration: none; flex-shrink: 0;
    }
    .tb-credits svg { width: 14px; height: 14px; color: var(--color-credit); }

    /* second-row subnav (narrow) */
    .tb-subnav { display: none; align-items: center; gap: 2px; height: 46px; padding: 0 18px; background: var(--color-surface); border-top: 1px solid var(--color-border); }

    /* avatar menu extras */
    .avm-credits { display: none; }
    .avm-credits .cc-buy { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--color-accent); }
    .avm-den.is-on { color: var(--color-foreground); font-weight: 600; }
    .avm-den .avm-chk { margin-left: auto; opacity: 0; }
    .avm-den.is-on .avm-chk { opacity: 1; color: var(--color-accent); }

    /* ===== responsive ladder (matches Eds-Docs/topbar-v1-responsive.html) ===== */
    @media (max-width: 1160px) {
        .tb-navi svg:not(.tb-cv) { display: none; }
        .tb-navi { padding: 0 9px; gap: 0; }
        .tb-toolsbtn { gap: 5px; }
    }
    @media (max-width: 1025px) {
        .tb-pill-nm { display: none; }
        .tb-pill { max-width: none; padding: 0 9px; }
    }
    @media (max-width: 860px) {
        .tb-credits { display: none; }
        .avm-credits { display: flex; }
    }
    @media (max-width: 740px) {
        .tb-nav-top, .tools-top, .tools-div { display: none; }
        .tb-subnav { display: flex; }
    }
    @media (max-width: 470px) {
        .tools-top, .tools-div { display: inline-flex; }
        .sub-tools, .sub-sp { display: none; }
        .tb-subnav { justify-content: center; }
    }
    @media (max-width: 440px) {
        .tb-logo a > span { display: none; }
    }
    @media (max-width: 400px) {
        .tb-subnav .tb-navi { font-size: 12px; }
    }

    /* ────────── App shell ──────────
       Full-height frame below the consolidated top bar; page content scrolls
       independently. Navigation lives in the top bar, so there is no sidebar. */
    .app-shell {
        height: calc(100vh - var(--chrome-h));
        overflow: hidden;
    }

    /* ────────── Page content wrapper ────────── */
    .app-content { min-width: 0; overflow-y: auto; height: 100%; }

    /* When the site-wide AI-down banner is showing it adds height the
       app-shell's fixed calc() doesn't account for, pushing the page past
       100vh and producing a second (outer) scrollbar on top of the content's
       own scroll. While paused, make the frame a flex column so the shell
       fills whatever height is left after the banner. No magic numbers, and
       it only applies while AI is down (the rest of the time nothing changes). */
    .ai-paused { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
    .ai-paused .app-shell { flex: 1 1 auto; height: auto; min-height: 0; }