/* ============================================================
   Gantry — app chrome (top nav, account, banners, layout)
   ============================================================ */

.cg-app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ---------- App footer ---------- */
/* Carries the licence-mandated "Data notices" link (PROD-746) — see AppFoot in
   app.jsx for why it can't be dropped. `margin-top: auto` pins it to the bottom
   of the `.cg-app` flex column on short pages without ever overlaying content;
   on the full-height explore surface it simply falls below the fold. Hairline
   only, no fill — structure is carried by lines, not shadows or bands. */
.cg-app-foot {
    margin-top: auto;
    border-top: 1px solid var(--line);
    padding: 14px 22px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--fg-4);
}
.cg-app-foot nav {
    display: flex;
    gap: 18px;
    margin-left: auto;
    align-items: center;
}
.cg-app-foot a {
    color: var(--fg-4);
    text-decoration: none;
    transition: color .15s var(--ease);
}
.cg-app-foot a:hover {
    color: var(--fg);
}

/* ---------- Top nav ---------- */
/* Editorial 2026-08-04: flat ink-on-paper bar — no frosted blur, structure
   carried by the single hairline. Heights are untouched (the explore drawer
   geometry keys off the 57px bar). */
.cg-topnav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
}
.cg-topnav-inner {
    max-width: 1640px;
    margin: 0 auto;
    padding: 10px 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: nowrap;
}
.cg-brand {
    flex: 0 0 auto;
}
.cg-nav {
    flex: 0 0 auto;
}
.cg-topnav-search {
    flex: 1 1 320px;
    min-width: 0;
}
.cg-topnav-right {
    flex: 0 0 auto;
    margin-left: auto;
}
.cg-nav-link {
    white-space: nowrap;
}

/* ---------- Floating section bar (Trends · Map · Lists · Watching) ---------- */
/* Fixed at the top-right of the four graph screens, the mirror of the map's
   filters bar at the top-left (explore.css .cg-filtersbar: same offsets, same
   z-index, same sandbox-banner adjustment). A hairline capsule on the page
   ground, the active view in ink. It is fixed rather than in the page flow so
   it sits in the same place on the map (where there is no flow) and on the
   scrolling pages; those pages get extra top padding (below) so a title never
   runs under it. */
.cg-sectionbar {
    position: fixed;
    top: 69px;   /* 57px nav + 12px */
    right: 12px;
    z-index: 8;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
}
[data-sandbox="true"] .cg-sectionbar { top: 108px; } /* 96px banner+nav + 12px */
.cg-sectionbar-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border: 0;
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--fg-3);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s var(--ease), background-color .15s var(--ease);
}
.cg-sectionbar-link:hover { color: var(--fg); }
.cg-sectionbar-link[data-active="true"] {
    background: var(--fg);
    color: var(--bg);
}
.cg-sectionbar-link[data-active="true"] .cg-nav-badge {
    border-color: var(--bg);
    color: var(--bg);
}
.cg-sectionbar-link:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}
@media (max-width: 720px) {
    .cg-sectionbar-link span { display: none; }
    .cg-sectionbar-link { padding: 6px 9px; }
}

/* ---------- Nav badge (the Watching item's unread total) ---------- */
/* Gold hairline, ink text: brand is an accent, never a fill. Stays visible
   when the nav collapses to icons (it sits outside .cg-nav-label). */
.cg-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 16px;
    padding: 0 5px;
    margin-left: 2px;
    border: 1px solid var(--brand);
    border-radius: var(--r-pill);
    color: var(--brand-text);
    font-size: 10px;
    line-height: 1;
    letter-spacing: .02em;
    animation: cg-nav-badge-pop .35s var(--ease) both;
}
.cg-nav-link[data-active="true"] .cg-nav-badge { color: var(--brand-text); }
@keyframes cg-nav-badge-pop {
    0%   { transform: scale(.7); opacity: 0; }
    60%  { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .cg-nav-badge { animation: none; }
}

.cg-search-title .cg-search-watch { margin-left: 8px; }

/* ---------- Search clear button ---------- */
.cg-search-clear {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-3);
    border: 1px solid var(--line);
    color: var(--fg-3);
    cursor: pointer;
    padding: 0;
}
.cg-search-clear:hover {
    color: var(--fg);
    background: var(--bg-hover);
}

/* ---------- Search overlay ---------- */
.cg-search-overlay {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    z-index: 80;
    max-height: 540px;
    overflow-y: auto;
    padding: 4px;
}
.cg-search-group {
    padding: 4px 0;
}
.cg-search-group-label {
    padding: 10px 12px 6px;
    display: flex;
    align-items: center;
}
.cg-search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: 0;
    color: var(--fg);
    border-radius: var(--r-sm);
    cursor: pointer;
    text-align: left;
}
.cg-search-item.active {
    background: var(--bg-hover);
}
.cg-search-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    color: var(--fg-3);
}
.cg-search-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cg-search-title {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cg-search-title mark,
.cg-search-sub mark {
    background: color-mix(in oklab, var(--brand) 35%, transparent);
    color: var(--fg);
    padding: 0 1px;
    border-radius: var(--r-sm);
}
.cg-search-sub {
    font-size: 11px;
    color: var(--fg-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cg-search-empty {
    padding: 36px 20px;
    text-align: center;
    color: var(--fg-3);
}
.cg-search-foot {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 14px;
    border-top: 1px solid var(--line);
    margin-top: 6px;
    font-size: 11px;
    color: var(--fg-4);
    position: sticky;
    bottom: 0;
    background: var(--bg-2);
}
.cg-search-foot kbd {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10px;
    padding: 1px 5px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--fg-3);
    background: var(--bg-1);
    margin-right: 3px;
}

/* The narrow-viewport rules for this bar live at the END of the top-nav
   section ("Responsive top nav"), not here — see the comment there. */

/* The brand button is a positioning shell ONLY — it holds <GantryLogo/>, and
   the lockup's geometry (mark size, gap, baseline) belongs to the design
   system. The old `.cg-brand-mark` tile + `.cg-brand-text` wordmark rules that
   lived here were removed 2026-08-06: pairing a bare mark with a locally
   styled <span>gantry</span> is what let this nav drift off the real logo the
   marketing site renders. Do not restyle the lockup from here. */
.cg-brand {
    display: inline-flex;
    align-items: center;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    /* Frame strokes and wordmark take the theme ink; the chevron is
       var(--brand) inside the SVG — an all-brand color here would flatten
       the two-tone mark. */
    color: var(--fg);
}

.cg-nav {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    /* Editorial: quiet text links, no boxed control strip. */
    padding: 0;
    background: transparent;
    border-radius: 0;
    border: 0;
}

.cg-topnav-search-wrap {
    position: relative;
    flex: 1 1 360px;
    min-width: 0;
    max-width: 460px;
}
.cg-topnav-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px 0 12px;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    height: 36px;
    width: 100%;
    color: var(--fg-3);
    transition:
        border-color 0.15s var(--ease),
        background 0.15s var(--ease);
}
.cg-topnav-search[data-open="true"] {
    border-color: var(--line-strong);
    background: var(--bg-2);
}
.cg-topnav-input {
    background: transparent;
    border: 0;
    outline: none;
    flex: 1;
    /* A flex item's min-width defaults to `auto`, and an <input>'s intrinsic
       minimum is its `size` attribute (~20 characters) — so without this the
       field refuses to shrink and pushes the whole bar wider than a phone
       viewport, taking the account chip off-screen with it. */
    min-width: 0;
    font-size: 13px;
    color: var(--fg);
}
.cg-topnav-input::placeholder {
    color: var(--fg-4);
}
.cg-kbd {
    font-family: var(--font-mono);
    font-size: 10px;
    padding: 2px 6px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--fg-3);
    background: var(--bg-2);
}

.cg-topnav-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cg-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--r-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-1);
    border: 1px solid var(--line);
    color: var(--fg-2);
    cursor: pointer;
    transition:
        background 0.15s,
        color 0.15s;
}
.cg-icon-btn:hover {
    background: var(--bg-hover);
    color: var(--fg);
}

/* ---------- Account chip ---------- */
.cg-account-wrap {
    position: relative;
}
.cg-account {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px 4px 5px;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--fg);
    cursor: pointer;
    height: 36px;
}
.cg-account:hover {
    background: var(--bg-hover);
}
.cg-account-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
    min-width: 0;
    max-width: 200px;
}
.cg-account-name {
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.cg-account-org {
    font-size: 10.5px;
    color: var(--fg-3);
    font-family: var(--font-mono);
    letter-spacing: 0.03em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.cg-account-org > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.cg-plan-pill {
    display: inline-block;
    font-size: 9px;
    padding: 1px 5px;
    border-radius: var(--r-pill);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid var(--line);
    color: var(--fg-2);
}
.cg-plan-pill.sandbox {
    color: var(--warn);
    border-color: color-mix(in oklab, var(--warn) 40%, var(--line));
}
.cg-plan-pill.production {
    color: var(--good);
    border-color: color-mix(in oklab, var(--good) 40%, var(--line));
}
.cg-plan-pill.owner {
    color: var(--brand-text);
    border-color: color-mix(in oklab, var(--brand) 40%, var(--line));
}

.cg-account-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 260px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 6px;
    box-shadow: var(--shadow-lg);
    z-index: 60;
}
.cg-account-menu-head {
    padding: 12px 12px 14px;
}
.cg-menu-item {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: transparent;
    border: 0;
    color: var(--fg);
    border-radius: var(--r-sm);
    font-size: 13px;
    cursor: pointer;
}
.cg-menu-item:hover {
    background: var(--bg-hover);
}
.cg-menu-item.danger {
    color: var(--bad);
}

/* ---------- Responsive top nav ----------
   THIS BLOCK MUST STAY BELOW EVERY BASE RULE IT OVERRIDES. A media query adds
   no specificity, so an equal-specificity base rule further down the file beats
   it at every viewport — which is precisely what had been happening (found
   2026-07-29): the block sat above `.cg-account-text { display: flex }` and
   the brand wordmark rule, so on a phone the account chip never collapsed, kept its
   name + org + plan pills at full width, and squeezed the search field down to
   nothing. Add new breakpoint rules HERE. */
@media (max-width: 1280px) {
    .cg-topnav-inner {
        gap: 10px;
        padding: 10px 14px;
    }
    .cg-topnav-search {
        max-width: 280px;
    }
}
@media (max-width: 980px) {
    /* Icon-only nav */
    .cg-nav-label {
        display: none;
    }
    .cg-nav-link {
        padding: 7px 9px;
    }
    .cg-account-text {
        max-width: 140px;
    }
}
@media (max-width: 720px) {
    /* Avatar-only account chip. The name/org/plan-pill stack is the widest
       thing in the bar and the least useful on a phone — you know who you are
       signed in as; you cannot search without a search field. The chip stays
       the SAME button with the same menu and a 36px tap target, so tapping the
       avatar still opens the menu, whose header repeats the name and email.
       The identity is also on the button's `title`/`aria-label`. */
    .cg-account-text {
        display: none;
    }
    .cg-account {
        padding: 0;
        width: 36px;
        gap: 0;
        justify-content: center;
    }
    /* The disclosure chevron goes with the text it was pointing at — the only
       direct <svg> child of the chip (the avatar is a <span>). */
    .cg-account > svg {
        display: none;
    }
    /* What the space is FOR: let the field take the whole remainder of the
       bar rather than sit at its desktop measure. */
    .cg-topnav-search-wrap {
        max-width: none;
        /* Basis 0, not auto: take a share of the leftover space rather than
           starting from the desktop 360px measure and overflowing. */
        flex: 1 1 0;
    }
    .cg-topnav-search {
        max-width: none;
    }
    /* No hardware keyboard to press ⌘K with. */
    .cg-kbd {
        display: none;
    }
    /* The results panel is anchored to the field, and a field sharing a phone
       bar with the nav is far too narrow to read a result in — names clipped
       to a single letter. Pin it to the viewport instead; it is `fixed` so it
       escapes the wrap's width entirely, and the bar is 57px tall. */
    .cg-search-overlay {
        position: fixed;
        top: 61px;
        left: 8px;
        right: 8px;
        max-height: calc(100vh - 80px);
    }
    /* Mark-only lockup on a phone bar — same responsive treatment the
       marketing nav uses (surfaces/www/site.css hides .logo-word too). */
    .cg-brand .cg-lockup .logo-word {
        display: none;
    }
}

/* ---------- Sandbox banner ---------- */
.cg-sandbox-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 22px;
    background: color-mix(in oklab, var(--warn) 8%, var(--bg-1));
    border-bottom: 1px solid color-mix(in oklab, var(--warn) 25%, var(--line));
    position: sticky;
    top: 57px;
    z-index: 40;
}

/* ---------- Page layout ---------- */
.cg-page {
    max-width: 1640px;
    margin: 0 auto;
    /* 28px of air under the top bar — a page title used to start flush
       against it. */
    padding: 28px 22px 64px;
    width: 100%;
}
/* On the screens that carry the floating section bar the page starts below
   it (bar bottom ≈ 103px from the viewport top; the nav is 57px). */
[data-sectionbar="true"] .cg-page { padding-top: 60px; }
/* Page display titles take the editorial serif; body/UI text stays sans. */
.cg-page h1 {
    font-family: var(--font-serif);
    font-size: 32px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin: 0 0 6px;
}
.cg-page .cg-page-sub {
    color: var(--fg-3);
    font-size: 14px;
    margin-bottom: 28px;
}

/* ---------- Empty / placeholder screens ---------- */
.cg-stub {
    margin: 80px auto;
    max-width: 720px;
    text-align: center;
    padding: 60px 30px;
    border: 1px dashed var(--line-2);
    border-radius: var(--r-lg);
    background: var(--bg-1);
}
.cg-stub h2 {
    margin: 0 0 12px;
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.005em;
}
.cg-stub p {
    color: var(--fg-3);
}