/* 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-logo-scale` is the brand contract's `logo_scale` as a multiplier, emitted server-side in
       shell_head so the first paint is already the right size. Unset = 1, so an instance that never
       touched it renders exactly as before. Safe to grow because the header has no fixed height: it wraps,
       and trackHeaderHeight() publishes the measured height (see the note at the top of this file). */
    .brand-icon { width: calc(36px * var(--brand-logo-scale, 1)); height: calc(36px * var(--brand-logo-scale, 1));
      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: calc(36px * var(--brand-logo-scale, 1));
      height: calc(36px * var(--brand-logo-scale, 1)); border-radius: 50%; object-fit: cover; }
    .brand-icon.logo-rect { height: calc(32px * var(--brand-logo-scale, 1)); width: auto;
      max-width: calc(190px * var(--brand-logo-scale, 1)); 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; }
    /* 44x17 measured. A link in the bar still needs a 24px-tall target. */
    a.ver { text-decoration: none; cursor: pointer; display: inline-flex; align-items: center;
      min-height: 24px; padding: 0 2px; }
    a.ver:not([href]) { cursor: default; }
    a.ver[href]:hover { opacity: 1; color: var(--accent); text-decoration: underline; }
    .header-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
    /* The header-indicator region adds no box of its own (7.368.0): each contributed indicator is a flex item
       of `.header-actions` beside the core ones, spaced by its gap. Holding two indicators, a plain span became
       one flex item and stacked its block children on top of each other. */
    [data-module-slot="topbar:indicators"] { display: contents; }
    /* 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. */
    /* The Settings gear (6.89.0), the rightmost thing in the header, is `.ui-icon-btn` since 7.397.0, with the
       bell. It is not a `.scope` button, so the router toggles `.active` on it directly; the component styles
       that state, and its [hidden] reassert is what keeps the gear hidden until Settings.init() reveals it. */

/* The Panels menu's explanation when the current screen does not offer the side column (7.89.0). Sits
   under the two checkboxes, which stay enabled-looking only when they can actually do something. */
/* A control that cannot act should say so before it is clicked, not after. */
.panels-indicator.panels-off .panels-btn { opacity: .7; }
#panels-popover .ui-field:has(input:disabled) { color: var(--muted); }