/* Shared Carnivore chrome. The operations-center tokens own the palette;
 * these aliases bridge legacy chrome to the same values used on home.
 * Session themes still own xterm colors. Inline theme variables on
 * #terminal-screen require explicit chrome rules for its prompt strip. */
:root,
[data-session-theme] {
    --cv-ground-chrome: var(--oc-ground-chrome);
    --cv-ground-page: var(--oc-ground-page);
    --cv-ground-panel: var(--oc-ground-panel);
    --cv-ground-raised: var(--oc-ground-raised);
    --cv-ground-card: var(--oc-ground-card);
    --cv-ground-titlerow: var(--oc-ground-titlerow);
    --cv-ground-hover: var(--oc-ground-hover);
    --cv-ground-field: var(--oc-ground-field);
    --cv-line-rule: var(--oc-line-rule);
    --cv-strip-edge: var(--oc-strip-edge);
    --cv-line-chrome: var(--oc-line-chrome);
    --cv-line-faint: var(--oc-line-faint);
    --cv-text-primary: var(--oc-text-primary);
    --cv-text-secondary: var(--oc-text-secondary);
    --cv-text-muted: var(--oc-text-muted);
    --cv-orange: var(--oc-orange);
    --cv-orange-bright: var(--oc-orange-bright);
}

/* Page chrome follows the selected global palette. Session scopes re-evaluate
 * the aliases above against their own manifest rather than inheriting colors
 * resolved on the root. Do not map --color-* back to --cv-*: that would create
 * a cycle now that opscenter tokens derive from the manifest vocabulary. */
html {
    background-color: var(--cv-ground-page);
}

/* ---------------------------------------------------------------------------
 * The header.
 *
 * THE TWO PIXEL ACCENT BAR IS THE SINGLE BIGGEST DIFFERENCE and it is not a
 * regression: every shipped theme paints it, at 1.5.0 and at 1.6.1 alike,
 * because .header carries `border-bottom: 2px solid var(--color-accent)`. A
 * chroma scan down the reference's header band peaks at 21, which is noise;
 * the shipped page peaks at 128, which is the accent. The Carnivore header
 * separates itself with a hairline instead.
 * ------------------------------------------------------------------------ */
.header {
    background: var(--cv-ground-chrome);
    border-bottom: 1px solid var(--cv-line-rule);
}

/* THE SESSION LIGHT IS NOT IN THE REFERENCE'S HEADER. The reference shows
 * the brand mark, the session name and the search glyph, and nothing between
 * the mark and the name; the shipped header puts #header-session-led there.
 * The light is not removed from the app, only from this one position: the
 * sidebar row for the same session still carries it, which is where the
 * reference reads status from. */
#header-session-led {
    display: none;
}

/* ---------------------------------------------------------------------------
 * The conversations sidebar. Its panel is the surface whose shipped tone is
 * furthest from the reference, because --color-bg-elevated is a light grey
 * under several themes where the reference is graphite. Geometry is
 * untouched: the row pitch the reference shows is the `compact` density this
 * app already has, a stored preference, not something this file could set.
 * ------------------------------------------------------------------------ */
.session-sidebar-panel {
    background: var(--cv-ground-chrome);
}

.session-sidebar-row {
    background: transparent;
}

/* Selection says exactly one thing and says it with the wash: an accent
 * tint the width of the row, sitting on the Carnivore graphite rather than
 * on a grey one. The 2px orange edge that used to run down the left of the
 * selected row went with the re-skin - a second accent mark on the same
 * state, and the only hard vertical bar left in the drawer. The regular-weight accent name provides a second selection cue. */
.session-sidebar-row[data-active='1'] {
    background: var(--color-accent-bg);
}

/* The prompt strip follows the owning cell's scope, including its border.
 *
 * THIS IS THE SECOND WRITER OF THAT STRIP'S GROUND, and it outranks the
 * first: `PromptHeader.svelte` scopes its own rule to a single class, and
 * an id plus a class beats that. So the two must name the SAME pair of
 * tokens or the component's styling is silently discarded on this screen -
 * which is exactly what happened when the strip was restyled as chrome on
 * 2026-09-21 and the page kept painting it in the terminal's own ground.
 * Change one, change both.
 *
 * IT HAPPENED AGAIN THE SAME DAY, ON THE OTHER PROPERTY. The strip's rule
 * was lit with the accent (`--oc-strip-edge`) and the terminal screen went
 * on drawing the neutral hairline, because `border-color` here outranks
 * the component's `border-bottom` shorthand just as `background` does.
 * Measured, not assumed: the border pixel read #1f2e30 before and after.
 * `box-shadow` is deliberately NOT listed below - this rule must stay
 * silent on it so the component keeps sole ownership of the glow. */
#terminal-screen .prompt-header {
    background: var(--cv-ground-card);
    border-color: var(--cv-strip-edge);
}

/* THE TABBED (inline) VARIANT'S GROUND IS THE TITLE ROW'S, NOT THE CARD'S
 * (owner, 2026-09-25, #606 follow-up): a MORE SPECIFIC rule than the one
 * above, an id plus two classes, so it wins for exactly this variant without
 * touching the floating (overlay) prompt header's card ground. Read
 * `PromptHeader.svelte`'s own comment on `.prompt-header-root--inline >
 * .prompt-header` first: the two must keep naming the SAME token pair, per
 * the note above, or this rule silently drifts from the component's again. */
#terminal-screen .prompt-header-root--inline > .prompt-header {
    background: var(--cv-ground-titlerow);
}

/* Owner reference, 2026-09-20: shared home and terminal typography and
 * controls. Colors above alias the operations-center tokens, so both pages
 * consume the same palette rather than maintaining separate copies. */
:is(.header h1, .session-sidebar-title) {
    font-family: var(--font-mono);
    font-weight: 400;
    letter-spacing: 0;
    color: var(--cv-orange);
}

.session-sidebar-title {
    font-size: 1.15rem;
}

/* Session names belong to their cells; the page header keeps the brand.
 * ABOVE 769px ONLY - the media query directly below reverses this pair
 * on a phone. Read both before changing either. */
body.ps-terminal-active #header-icon { display: inline-flex; }
body.ps-terminal-active :is(#header-title-text, #header-rename-pencil) {
    display: none;
}

/* EXCEPT ON A PHONE, WHERE THE PAIR IS THE OTHER WAY ROUND. Owner,
 * 2026-09-21: "remove the carnivore icon in the header and put the
 * session name there." The rule above is right on a desktop, where the
 * name is on the cell you are looking at and the header can afford to
 * be the brand. A phone shows one cell at a time with no room for a
 * name on it, and that bar already carried two catalog pills, three
 * tool icons, a drawer toggle and a kebab, so the brand was the one
 * thing on it naming nothing you were doing.
 *
 * NOTHING MOVES, THE PAIR JUST SWAPS. `#header-title-text` ALREADY
 * holds the session's own name on this screen - `setHeaderIdentity()`
 * in app.js writes it from `sessionDisplayName()` - so it only has to
 * be allowed to render. The rename pencil comes back with it, because a
 * name you can see and cannot correct is worse than no name at all.
 *
 * SAME FILE, SAME SPECIFICITY, LATER, and that is the load-bearing part.
 * Both selectors here are (1,0,1) plus the `:has()`, so an override
 * written in another stylesheet wins or loses purely on load order. The
 * first attempt put it in styles.css, which loads BEFORE this file: the
 * brand went on showing and the measured display stayed `inline-flex`.
 * Keeping both halves of the decision in one file is what stops that
 * being rediscovered. */
@media (max-width: 768px) {
    body.ps-terminal-active #header-icon { display: none; }
    body.ps-terminal-active #header-title-text { display: inline; }
    body.ps-terminal-active #header-rename-pencil {
        display: inline-flex;
    }
}

:is(.header .controls > button, .session-sidebar-toggle,
    .session-sidebar-pin) {
    background: transparent;
    border: 1px solid var(--cv-line-rule);
    border-radius: 4px;
    color: var(--cv-orange);
}

.session-sidebar-pin[aria-pressed="true"] {
    border-color: var(--cv-orange);
    background: var(--oc-orange-tint);
}

:is(.header .controls > button, .session-sidebar-toggle,
    .session-sidebar-pin):hover {
    background: var(--cv-ground-hover);
}

.header-menu-panel button {
    font-family: var(--font-mono);
    font-weight: 400;
    color: var(--cv-orange);
}

.session-sidebar-row[aria-selected="true"] .session-sidebar-row-name {
    font-weight: 400;
}

.config-editor-toggle--root .config-editor-root-label {
    font-weight: 400;
    color: var(--cv-orange);
}

.config-editor-toggle-glyph {
    color: var(--cv-orange);
}