/* topbar.css — part 2 of 6 of the app stylesheet.
   Holds: the sticky top bar: brand, badge, version link, actions, hamburger.

   ORDER MATTERS. These files were cut out of a single app.css at line boundaries with the
   sequence preserved, so concatenating them in the order index.html links them reproduces the
   original byte for byte — which is what makes the cascade provably unchanged. Equal-specificity
   rules still resolve by source order, so reordering the <link> tags can change rendering.

   The names describe what ended up in each part, not a design: the original file interleaved
   the top bar, layout and per-feature rules, and moving rules to where they belong is a separate
   pass that this split exists to make possible. Palette is in theme.css, linked first. */
    /* Sticky, so the tenant name, security dot, notifications and New Project stay reachable down a
       long board. It already had its own background, border and shadow, so nothing new is needed to
       stop content showing through.
       - `top` follows the update banner, which is `position: fixed; top: 0` and reserves no space:
         without this the banner would sit permanently on top of the bar instead of only at scroll-top.
       - `--z-topbar` sits above every page-level dropdown so a menu can't be painted over the bar, and
         below `--z-overlay` so a modal still covers it. The nav drawer and its scrim are above it again.
         The whole ladder is listed in order at the top of this file.
       - `--header-h` is published by trackHeaderHeight() in app.js, because the bar WRAPS: its height
         depends on viewport width and the tenant's logo shape, so anything offsetting against it has to
         measure rather than assume. */
    header {
      position: sticky; top: var(--banner-h, 0px); z-index: var(--z-topbar);
      padding: 14px clamp(24px, 3vw, 56px); border-bottom: 1px solid var(--line);
      display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
      background: var(--panel); box-shadow: var(--shadow);
    }
    .brand-icon { width: 36px; height: 36px; border-radius: 50%; display: block; flex: 0 0 auto; }
    /* Per-instance logo shape (brand contract "logo_shape"). Circle = a round mark, cropped square.
       Rect = a wordmark: keep the aspect ratio, don't crop, don't force a round mask. */
    .brand-icon.logo-circle { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
    .brand-icon.logo-rect { height: 32px; width: auto; max-width: 190px; border-radius: 6px;
      object-fit: contain; }
    header h1 { font-size: 19px; margin: 0; font-weight: 600; }
    #title { font-family: 'Quicksand', system-ui, sans-serif; font-weight: 700; color: var(--brand); letter-spacing: .2px; }
    .badge {
      font-size: 12px; color: var(--muted); border: 1px solid var(--line);
      padding: 2px 8px; border-radius: 999px;
    }
    .badge.demo { color: var(--warn); border-color: var(--warn); }
    .ver { font-size: 11px; color: var(--muted); opacity: 0.7; letter-spacing: 0.02em; }
    a.ver { text-decoration: none; cursor: pointer; }
    a.ver:hover { opacity: 1; color: var(--accent); text-decoration: underline; }
    .header-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
    /* Hamburger: permanent as of 6.70.0, at the head of the bar because it toggles the sidebar rather
       than a menu of actions, and the sidebar is collapsed by default. */
    .menu-toggle {
      display: inline-flex; flex: 0 0 auto;
      align-items: center; justify-content: center;
      width: 38px; height: 38px; padding: 0; font-size: 18px; line-height: 1;
      background: var(--panel-2); color: var(--text);
      border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
    }
    .menu-toggle:hover { border-color: var(--brand-bright); color: var(--brand); }
    .menu-toggle[aria-expanded="true"] { border-color: var(--brand-bright); color: var(--brand); background: var(--panel); }
    /* Settings gear (6.89.0), the rightmost thing in the header — a utility action after the primary
       ones, which is also where "New Project" used to sit before it moved onto the project screens.
       Modelled on .notif-bell: a 36px circle, currentColor icon, muted until hover. It carries `.scope`
       for the router's sake, and `setScope` toggles `.active` on every `.scope` — so the active state is
       styled here rather than inherited, because the rail's version is scoped `.railnav .scope.active`
       and would never apply to a button in the header. */
    .settings-gear { display: inline-flex; align-items: center; justify-content: center;
      width: 36px; height: 36px; padding: 0; border-radius: 50%; background: transparent;
      color: var(--text); border: 1px solid var(--line); cursor: pointer; }
    /* It sets display, so the bare `hidden` attribute needs the reassert — the gear ships hidden and is
       revealed by Settings.init(). */
    .settings-gear[hidden] { display: none; }
    .settings-gear:hover { color: var(--brand); border-color: var(--brand-bright); }
    .settings-gear.active { color: #fff; background: var(--accent); border-color: var(--accent); }