/* The header's brand, drawer-open stand-downs and hidden app controls.
 * (This file once also styled the configurable quicklink pills; they were
 * retired by #1285 and their rules are gone.)
 *
 * Loaded from client/index.html immediately after styles.css, so it
 * inherits --control-size and can still be overridden by the per-screen
 * files further down. Colour is the --oc-* palette.
 */

/* ---- The Carnivore brand in the header -------------------------------
 *
 * The wordmark image replaces a drawn glyph, and nothing else about the
 * control changes. It lives in this file rather than in styles.css
 * because that file is past the project's size guideline and must not
 * grow; the cascade works because this file is linked after styles.css
 * and none of the rules it overrides is more specific than what is
 * written here.
 *
 * IT IS SAME-ORIGIN UNDER /static, so the content security policy is
 * untouched: `default-src 'self'` already covers it and no directive had
 * to be relaxed.
 *
 * IT SHIPS A 2x SOURCE AND NO WIDTH ATTRIBUTE. The rendered size is
 * decided here, in CSS, and `srcset` only decides which file the browser
 * downloads - so a retina display gets the sharp asset at the same
 * layout size rather than an image twice as big.
 *
 * THE SIDEBAR TOGGLE IS NOT IN THIS FAMILY ANY MORE. It briefly carried
 * the same mark, sized by a `.session-sidebar-toggle__mark` rule here;
 * the owner asked for the plain three-strip hamburger back, so that
 * button is a drawn svg again and is styled entirely in
 * client/css/session-sidebar.css. The wordmark below is unaffected and
 * stays. */

/* The brand lockup, where the cloud mark and the app's name used to be
 * two separate things. `.header-icon` in styles.css sizes that slot as a
 * 1.2em SQUARE with a full-bleed image inside it, which would squash a
 * 344x40 wordmark to a smudge, so both axes are restated here: the
 * height is the design's 20px and the width is whatever the artwork's
 * own ratio makes it, about 172px.
 *
 * `flex-shrink: 0` is inherited from `.header-icon` and is load bearing,
 * not decorative: client/js/header-title-fit.js enumerates the h1's live
 * children and subtracts each one's outer width from the title's
 * middle-elision budget, and its doc comment states the invariant that
 * every such child is fixed-size. A shrinkable brand would make the
 * measured budget disagree with what the browser lays out, which is the
 * failure that once clipped a title mid-word with the full string still
 * in the DOM. */
/* ONE BRAND ON SCREEN AT A TIME. Owner, 2026-09-22: "only show the
 * Carnivore icon when the drawer is closed", and separately, the drawer's
 * own header now carries the wordmark in place of the word "agents".
 * Both visible at once is the same logo twice, so the header's copy
 * stands down whenever the drawer is showing.
 *
 * `body.ps-drawer-open` (web/src/lib/page-flags/), written by the drawer
 * controller in the same two lines that add and remove the panel's open class,
 * so the two cannot disagree. It replaced `body:has(.session-sidebar-panel--open)`,
 * a page-wide :has() that re-ran on every DOM insert (#1940).
 *
 * `visibility` rather than `display`, and this is load bearing:
 * client/js/header-title-fit.js measures every live child of the h1 and
 * subtracts each one's width from the session title's elision budget, on
 * the stated invariant that those children are fixed-size. `display:none`
 * would take this box out of layout, the measured budget would disagree
 * with what the browser actually lays out, and the title would clip
 * mid-word - the exact failure that file was written to fix. Hidden, it
 * still occupies its box and the arithmetic still holds. */
body.ps-drawer-open #header-icon {
    visibility: hidden;
    pointer-events: none;
}

/* THE DOCKED DRAWER'S OWN REOPEN HAMBURGER STANDS DOWN WHILE IT IS ALREADY
 * OPEN (#426). Owner, 2026-09-24: "in the desktop view, this carnivore icon
 * should not be there. That's just if the drawer is closed, then it should
 * be shown" - reported against the mark sitting in the app header just to
 * the RIGHT of the docked drawer, not the drawer's own wordmark inside it
 * (a first attempt at this issue hid #session-sidebar-brand instead; that
 * was the wrong element and is reverted).
 *
 * #session-sidebar-toggle is the hamburger that OPENS
 * #session-sidebar-panel from the terminal screen's shared header
 * (web/src/lib/drawer/controller.ts), and it carries a bare Carnivore claw mark
 * (.session-sidebar-toggle-mark, client/css/session-sidebar.css) as its
 * icon. Before docking existed the button stayed visible in every state on
 * purpose, because the only way the drawer showed at all was as an overlay
 * that physically covers this button's position while open. Docking (added
 * 2026-09-22, web/src/lib/drawer/pin.ts) made the drawer push
 * content aside instead of covering it, so above the docking width the
 * button sits in the clear to the drawer's right, showing a second claw
 * mark beside the drawer's own wordmark for as long as the drawer stays
 * open - the exact duplicate-brand shape the rule above already fixes for
 * #header-icon.
 *
 * SCOPED TO DESKTOP ONLY, same as the reverted rule above it: 701px is one
 * past MOBILE_MAX_PX in web/src/lib/drawer/pin.ts, the width at
 * which the drawer docks instead of overlaying. Below it the drawer is
 * still an overlay and already covers this button, so a phone's toggle is
 * untouched by this rule.
 *
 * `visibility`, not `display`, for the same reason as #header-icon above:
 * this button's 32px box is subtracted from the header title's elision
 * budget by client/js/header-title-fit.js, and `display: none` would pull
 * it out of layout without updating that measured budget. */
@media (min-width: 701px) {
    body.ps-drawer-open #session-sidebar-toggle {
        visibility: hidden;
        pointer-events: none;
    }
}

/* THE HEADER'S BRAND IS THE BARE MARK, NOT THE BOXED ICON. Owner:
 * "make it bigger with no border". carnivore-mark is the claw artwork on
 * transparency; carnivore-icon is the same claws inside a filled rounded
 * square, and that square is the "border" being objected to.
 *
 * `content` on a replaced element repaints the image without touching the
 * element, its alt or its accessible name, so the brand is still
 * announced from the button's own aria-label and neither the markup nor
 * app.js has a second spelling to keep in sync. It points at the 2x file
 * and draws it at 30px, which is sharp at every density and skips the
 * srcset negotiation `content` would otherwise bypass.
 *
 * AT EVERY WIDTH NOW, not only on a phone. The narrow-screen rule below
 * used to be the only place the lockup became a mark; the drawer having
 * taken over the wordmark makes that true everywhere. */
.header-icon--wordmark {
    width: 30px;
    height: 30px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: var(--oc-radius-sm);
}

.header-icon--wordmark img {
    content: url("/static/img/carnivore/carnivore-mark@2x.png");
    width: 30px;
    height: 30px;
}

.header-icon--wordmark:hover {
    opacity: 0.82;
}

@media (max-width: 640px) {
    /* THE LOCKUP BECOMES THE MARK, AND THE REASON IS MEASURED, NOT
     * TASTE. At 390px the header has 354px left once the drawer toggle
     * has taken its box. The right-hand cluster spends 205px of that
     * (two icon-only pills, the rule, the folder, the kebab, five 8px
     * gaps), which leaves 149px for the h1 - and the wordmark alone is
     * 155px at 18px tall. Shipped as-is it overflowed its own box, got
     * clipped mid-word to "CARNIV", and left the session name nowhere to
     * render at all, which on the terminal screen is the one thing the
     * header exists to tell you.
     *
     * So the phone gets the square mark instead. `content` on a replaced
     * element repaints the image without touching the element, its alt
     * or its accessible name, so the brand is still announced as
     * "Carnivore" and nothing in the markup or in app.js has a second
     * spelling to keep in sync. It points at the 2x file and draws it at
     * 28px, which is sharp on every phone density and skips the srcset
     * negotiation `content` would otherwise bypass. */
    .header-icon--wordmark,
    .header-icon--wordmark img {
        /* A touch smaller than the desktop 30px, for the same reason the
         * original narrow rule existed: the header has 354px to spend at
         * 390px wide and the session name is the thing it exists to
         * show. The ARTWORK no longer changes here - the base rule above
         * already draws the bare mark at every width. */
        width: 26px;
        height: 26px;
    }
}

/* ---- Moved into the drawer's bottom bar -----------------------------
 *
 * Owner, 2026-09-22: settings, the dashboard layout and logout belong in
 * the agents drawer, not in the app header's right-hand cluster (settings
 * and logout in its bottom bar, the dashboard layout in its button row). They are properties of the APP, and sitting beside the
 * session's own tools made them read as belonging to the conversation on
 * screen.
 *
 * HIDDEN, NOT DELETED. The buttons keep their ids, their markup and their
 * click handlers in client/js/app.js and client/js/header-menu.js; the
 * bar dispatches to those same functions rather than reimplementing any
 * of them (web/src/lib/drawer/bar.ts). So this is a presentation
 * change, one copy of each behaviour survives, and anything still calling
 * `settingsBtn.click()` keeps working.
 *
 * `display: none` is right here and NOT for the brand: these sit in
 * `.controls`, which header-title-fit.js does not enumerate - it measures
 * the h1's own children. Taking them out of layout is the point, since
 * the room they free is what the session title gets to use. */
#settingsBtn,
#logoutBtn,
#headerComponentsBtn {
    display: none;
}

/* THE BROWSER SCREEN IS NOT A SESSION (task manager item 439). While a page or remote browser row fills the center, the
 * session-scoped header controls (the session folder's file editor and this session's size-master crown) name nothing,
 * so they stand down, keyed on the screen being up exactly as `#terminal-screen.active` keys the session rows. The
 * title itself is repainted by web/src/lib/browser/center-nav.ts through setHeaderIdentity. */
body.ps-browser-screen .header :is(#configEditorBtn, #headerSizeMasterBtn) {
    display: none;
}