/* 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); }
    /* Anywhere a price is shown with the coin glyph (.credit-cost wraps it),
       the coin is the one credit gold, regardless of the surrounding text
       color. Same token the topbar pill uses. */
    .credit-cost .cc-coin, .credit-cost svg { 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; }
/* Contextual credit recovery dialog. Native <dialog> provides focus trapping
   and keeps one shared recovery surface across the authenticated app. */
.crw { position:fixed; inset:0; width:min(92vw, 480px); max-height:calc(100dvh - 2rem); margin:auto; padding:0; border:0; border-radius:22px; color:var(--color-foreground); background:transparent; box-shadow:0 28px 80px rgba(15,23,42,.28); }
.crw::backdrop { background:rgba(15,23,42,.58); backdrop-filter:blur(3px); }
.crw-card { position:relative; overflow:auto; max-height:calc(100dvh - 2rem); padding:30px; border:1px solid var(--color-border); border-radius:22px; background:var(--color-surface); }
.crw-close { position:absolute; top:16px; right:16px; display:grid; place-items:center; width:36px; height:36px; border-radius:10px; color:var(--color-foreground-muted); }
.crw-close:hover { background:var(--color-surface-muted); color:var(--color-foreground); }
.crw-close svg { width:19px; height:19px; }
.crw-icon { display:grid; place-items:center; width:48px; height:48px; margin-bottom:18px; border-radius:14px; color:#ea580c; background:#fff1e8; }
.crw-icon svg { width:26px; height:26px; }
.crw-kicker { margin:0 0 5px; color:#ea580c; font-size:12px; font-weight:750; letter-spacing:.08em; text-transform:uppercase; }
.crw-title { margin:0; font-size:clamp(24px, 5vw, 30px); line-height:1.12; letter-spacing:-.025em; font-weight:750; }
.crw-description { margin:12px 0 0; color:var(--color-foreground-muted); font-size:15px; line-height:1.55; }
.crw-debt { display:grid; gap:4px; margin-top:16px; padding:13px 14px; border:1px solid #fed7aa; border-radius:12px; background:#fff7ed; color:#9a3412; font-size:13px; line-height:1.45; }
.crw-saved { display:flex; gap:9px; align-items:flex-start; margin-top:18px; padding:13px 14px; border-radius:12px; background:var(--color-surface-muted); color:var(--color-foreground); font-size:13px; line-height:1.45; }
.crw-saved svg { flex:0 0 auto; width:18px; height:18px; margin-top:1px; color:#059669; }
.crw-checkout-error { margin:14px 0 0; padding:10px 12px; border-radius:10px; background:#fff1f2; color:#be123c; font-size:13px; }
.crw-checkout-error:focus { outline:2px solid #fb7185; outline-offset:2px; }
.crw-actions { display:grid; gap:9px; margin-top:22px; }
.crw-primary { min-height:46px; padding:11px 18px; border-radius:12px; background:#ea580c; color:#fff; font-size:14px; font-weight:700; box-shadow:0 8px 20px rgba(234,88,12,.2); }
.crw-primary:hover { background:#c2410c; }
.crw-primary:disabled { cursor:wait; opacity:.7; }
.crw-secondary, .crw-adjust { min-height:40px; display:flex; align-items:center; justify-content:center; border-radius:10px; color:var(--color-foreground); font-size:14px; font-weight:650; text-decoration:none; }
.crw-secondary:hover, .crw-adjust:hover { background:var(--color-surface-muted); }
.crw-adjust { color:var(--color-foreground-muted); font-weight:550; }
.crw-trust { display:flex; justify-content:center; align-items:flex-start; gap:6px; margin:16px 0 0; color:var(--color-foreground-muted); font-size:11px; line-height:1.45; text-align:center; }
.crw-trust svg { flex:0 0 auto; width:14px; height:14px; margin-top:1px; }
.theme-black .crw-debt { border-color:#7c2d12; background:#2a160d; color:#fdba74; }
.theme-black .crw-icon { background:#2a160d; color:#fb923c; }
@media (max-width:520px) { .crw { width:calc(100vw - 20px); } .crw-card { padding:24px 18px 20px; border-radius:18px; } }
@media (prefers-reduced-motion:no-preference) { .crw[open] .crw-card { animation:crw-in .16s ease-out; } @keyframes crw-in { from { opacity:0; transform:translateY(8px) scale(.985); } } }