/* Page shell, topbar, stepper, sticky elements.
 *
 * Content layout that's specific to one page lives in pages/<page>.css.
 * Shared chrome lives here.
 */

/* ── Page shell ────────────────────────────────────────────────── */

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

.page__main {
    flex: 1;
    width: 100%;
    max-width: var(--page-w);
    margin: 0 auto;
    padding: var(--s-7) var(--s-5);
}

/* ── Topbar ──────────────────────────────────────────────────── */

.topbar {
    height: var(--topbar-h);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 10;
    /* Full viewport width — brand on the left, user cluster on the
       right. Page-width-cap rule does NOT apply to chrome. Slightly
       generous horizontal padding so the logo + avatar sit a touch
       in from the hard viewport edge. */
    width: 100%;
    padding: 0 var(--s-7);
    display: flex;
    align-items: center;
    gap: var(--s-6);
}

/* Left and right are equal flex twins so the center band (nav or
   stepper) sits at the true horizontal middle of the viewport. */
.topbar__left {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    min-width: 0;
}

.topbar__brand {
    /* Hosts an <img> — keep the anchor a flex container so the logo
       vertically centers inside the topbar's row. The font properties
       are a defensive fallback for any path that still renders text
       inside the brand link (e.g., asset failure showing alt text). */
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    font-size: var(--text-base);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--ink);
}

.topbar__brand:hover { text-decoration: none; }

.topbar__logo {
    display: block;
    height: 25px;
    width: auto;
}

.topbar__center {
    /* The stepper or flat-nav inside is centered within this band;
       the equal-flex left/right twins make that the viewport center. */
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
}

.topbar__right {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--s-3);
    font-size: var(--text-sm);
    min-width: 0;
}

/* ── User avatar menu ────────────────────────────────────────────
   The whole user cluster collapsed into one avatar circle; the panel
   is a <details> popover (CSP-safe native toggle, JS only closes it
   on outside click / Escape — see js/components/user_menu.js). */

.user-menu {
    position: relative;
}

.user-menu__trigger {
    list-style: none;          /* hide the details marker */
    cursor: pointer;
    display: inline-flex;
    border-radius: var(--r-pill);
}
.user-menu__trigger::-webkit-details-marker { display: none; }
.user-menu[open] .user-menu__trigger .user-menu__avatar,
.user-menu__trigger:hover .user-menu__avatar {
    box-shadow: 0 0 0 3px var(--primary-soft);
}

.user-menu__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--r-pill);
    background: linear-gradient(135deg, #6366f1, var(--primary));
    color: #ffffff;
    font-size: var(--text-sm);
    font-weight: 600;
    user-select: none;
    transition: box-shadow 120ms ease;
}

.user-menu__avatar--lg {
    width: 40px;
    height: 40px;
    font-size: var(--text-base);
}

.user-menu__panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 260px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--s-3);
    z-index: 30;
}

.user-menu__identity {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-2);
}

.user-menu__who {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.user-menu__name {
    font-weight: 600;
    color: var(--ink);
}

.user-menu__email {
    color: var(--ink-muted);
    font-size: var(--text-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu__sep {
    height: 1px;
    background: var(--border-soft);
    margin: var(--s-2) 0;
}

.user-menu__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-1) var(--s-2);
}
.user-menu__row-label { color: var(--ink-muted); }
.user-menu__row-value { color: var(--ink); font-weight: 500; }

.user-menu__item {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    width: 100%;
    padding: var(--s-2);
    border: 0;
    border-radius: var(--r-md);
    background: transparent;
    color: var(--ink);
    font-size: var(--text-sm);
    text-align: left;
    cursor: pointer;
}
.user-menu__item:hover {
    background: var(--surface-3);
    text-decoration: none;
}
.user-menu__item svg { color: var(--ink-muted); flex-shrink: 0; }

.user-menu__logout-form { margin: 0; }

/* Account settings popup — companion to the avatar menu (markup in
   components/_account_modal.html, behaviour in user_menu.js). Reuses
   the shared .modal chrome; only the field stack is bespoke. */
.account-modal__panel {
    max-width: 420px;
}

.account-modal__body {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}

.account-modal__field {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

.account-modal__label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--ink);
}

.account-modal__hint {
    line-height: 1.4;
}

/* ── Flat nav ────────────────────────────────────────────────────
   Reference-mockup treatment: base-size links with breathing room,
   a soft pill on hover, and the active link in primary with a short
   rounded underline sitting just under the text. */

.flat-nav {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--text-base);
}

.flat-nav a {
    position: relative;
    color: var(--ink-muted);
    font-weight: 500;
    padding: 8px 14px;
    border-radius: var(--r-md);
    transition: background 120ms ease, color 120ms ease;
}

.flat-nav a:hover {
    background: var(--surface-3);
    color: var(--ink);
    text-decoration: none;
}

.flat-nav a.is-current {
    color: var(--primary);
    font-weight: 600;
}
.flat-nav a.is-current:hover {
    background: transparent;
    color: var(--primary);
}
.flat-nav a.is-current::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;
    height: 2px;
    border-radius: var(--r-pill);
    background: var(--primary);
}

/* ── Stepper (wizard mode) ───────────────────────────────────── */

.stepper {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--text-sm);
}

.stepper__node {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-muted);
}

.stepper__dot {
    width: 18px;
    height: 18px;
    border-radius: var(--r-pill);
    border: 2px solid var(--border);
    background: var(--surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-muted);
    transition: background 120ms, border-color 120ms, color 120ms;
}

.stepper__node.is-done .stepper__dot {
    background: var(--success);
    border-color: var(--success);
    color: #ffffff;
}
.stepper__node.is-done {
    color: var(--ink);
}
.stepper__node.is-done a {
    color: var(--ink);
    text-decoration: none;
}
/* Back-nav step link — it's chrome, not prose. Don't let the global
   a:hover underline turn it into a glitchy text link. */
.stepper__node.is-done a:hover {
    color: var(--primary);
    text-decoration: none;
}

.stepper__node.is-current .stepper__dot {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
    box-shadow: 0 0 0 4px var(--primary-soft);
}
.stepper__node.is-current {
    color: var(--ink);
    font-weight: 500;
}

.stepper__connector {
    width: 36px;
    height: 1px;
    background: var(--border);
}
.stepper__connector.is-done {
    background: var(--success);
}

/* Bell stub (action-items M6) — inert until notifications ship. */
.topbar__bell {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--r-md);
    color: var(--ink-muted);
    cursor: default;
}
.topbar__bell:hover {
    background: var(--surface-3);
}

/* Wide variant for the v3 action-items home (mockups/v3 .home-wrap:
   1280px). Pages opt in via the main_class block. */
.page__main--wide {
    max-width: 1280px;
    padding: var(--s-5) var(--s-6) var(--s-9);
}

/* Full-bleed app shell: no max-width, no padding, and the main fills
   the viewport below the topbar so a page can own its own scroll
   regions (the ops chat agent's rail + thread). */
/* App-shell pages that own their own scroll regions (the ops chat
   agent). Both halves are required:

   - ``.page--fixed`` pins the shell to the viewport. A ``height`` on the
     main alone does nothing, because ``.page__main`` is ``flex: 1``
     (flex-basis 0), so the flex algorithm sizes it from the container
     and a specified height is ignored.
   - ``min-height: 0`` + ``overflow: hidden`` on the main stop a tall
     child from stretching the flex item, which is what makes the PAGE
     scroll instead of the page's inner panes. */
.page--fixed {
    height: 100vh;
    min-height: 0;
    overflow: hidden;
}

/* Full width, but otherwise an ordinary page: keeps the standard
   padding and lets the PAGE scroll. Distinct from --flush, which also
   drops padding and hands scrolling to the page's own panes — that is
   for app shells (the ops chat agent), not for a wide document. */
.page__main--full {
    max-width: none;
}

.page__main--flush {
    max-width: none;
    padding: 0;
    min-height: 0;
    overflow: hidden;
}

/* Notifications bell popover (Phase 1) — same pattern as .user-menu. */
.notif-menu {
    position: relative;
}
.notif-menu__trigger {
    list-style: none;
    cursor: pointer;
}
.notif-menu__trigger::-webkit-details-marker {
    display: none;
}
.notif-menu .topbar__bell {
    position: relative;
    cursor: pointer;
}
.notif-menu[open] .topbar__bell,
.notif-menu__trigger:hover .topbar__bell {
    background: var(--surface-3);
    color: var(--ink);
}
.notif-menu__dot {
    position: absolute;
    top: 6px;
    right: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--danger);
    box-shadow: 0 0 0 2px var(--surface);
}
.notif-menu__panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 340px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--s-2);
    z-index: 40;
}
.notif-menu__head {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-muted);
    padding: 6px 10px 8px;
}
.notif-menu__item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 9px 10px;
    border-radius: var(--r-md);
    text-decoration: none;
    color: inherit;
}
a.notif-menu__item:hover {
    background: var(--surface-2);
}
.notif-menu__icon {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: var(--r-md);
    display: grid;
    place-items: center;
    background: var(--surface-3);
    color: var(--ink-muted);
}
.notif-menu__item--attention .notif-menu__icon {
    background: var(--danger-soft);
    color: var(--danger);
}
.notif-menu__text {
    flex: 1;
    min-width: 0;
}
.notif-menu__title {
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.35;
}
.notif-menu__body {
    font-size: var(--text-xs);
    color: var(--ink-muted);
    margin-top: 1px;
}
.notif-menu__empty {
    padding: 14px 10px;
    font-size: var(--text-sm);
    color: var(--muted-2);
}

/* Plan-quota bar inside the account menu. */
.user-menu__quotabar {
    height: 4px;
    border-radius: var(--r-pill);
    background: var(--surface-3);
    /* sits directly under the Investigations row — inset to the row's
       horizontal padding, tight to the value above (2026-07-10). */
    margin: 0 var(--s-2) 6px;
    overflow: hidden;
}
.user-menu__quotabar i {
    display: block;
    height: 100%;
    border-radius: var(--r-pill);
    background: var(--primary);
    transition: width 300ms ease;
}
.user-menu__quotabar i.is-hot {
    background: var(--danger);
}
.notif-menu__when {
    font-size: 10.5px;
    color: var(--muted-2);
    margin-top: 2px;
}