/* =====================================================================
 * Agents drawer COLOUR CODING (issue #694).
 *
 * Adam (Adoom666), 2026-09-26: "I want to color code the headings in the
 * drawer. TERMINALS one color with all the terminal sessions a shade of
 * the same color. then BROWSERS another color and all browser titles are
 * a shade of that color. and Project folder title colors just a bit
 * brighter grey. and PINNED another color. All Agent titles stay white /
 * dimmed for sleeping etc. Groups are given a random color ... throw in
 * cool stuff like gradients and animation options."
 *
 * THIS IS A RULED EXCEPTION TO THE ONE-ACCENT RULE (docs/DECISIONS.md,
 * 2026-09-26): the drawer's section, terminal, browser, pinned and group
 * colours are the only place several hues share one surface.
 *
 * ONE PALETTE, NAMED ONCE, BELOW. Every hue is an --oc-* token or a
 * color-mix() of two, re-declared at `[data-session-theme]` exactly as
 * web/src/opscenter/tokens.css re-derives the tokens themselves, so every
 * shipped theme repaints it. NO LITERAL. The keys match
 * src/core/session_group_style.py's COLOURS, GRADIENTS and ANIMATIONS,
 * which tests/test_session_group_style.py holds to this file.
 *
 * THE MECHANISM IS ONE INPUT, `--band-hue`. A section sets it (by its
 * data-group key, or a hand-made group's `data-group-colour`, stamped by
 * web/src/lib/drawer/group-color.ts); the heading paints in it,
 * and a TERMINALS or BROWSERS row name paints in `--band-shade`, the hue
 * pulled toward the primary text tier so a title stays readable. Agent
 * rows are never touched: they keep --oc-text-primary and the asleep dim.
 * ===================================================================== */

@layer components {
:root,
[data-session-theme] {
    --drawer-hue-cyan: var(--oc-cyan);
    --drawer-hue-violet: var(--oc-violet);
    --drawer-hue-yellow: var(--oc-yellow);
    --drawer-hue-green: var(--oc-green);
    --drawer-hue-coral: var(--oc-coral);
    --drawer-hue-orange: var(--oc-orange);
    --drawer-hue-teal: color-mix(in oklab, var(--oc-cyan) 50%, var(--oc-green));
    --drawer-hue-rose: color-mix(in oklab, var(--oc-coral) 55%, var(--oc-violet));
    --drawer-hue-gold: color-mix(in oklab, var(--oc-yellow) 60%, var(--oc-orange));
    /* LAYOUTS (issue #424, D40): "indigo" - a straight mix of the two hues
     * already claimed by TERMINALS (cyan) and BROWSERS (violet), so it
     * reads as its own thing between them rather than borrowing either. */
    --drawer-hue-indigo: color-mix(in oklab, var(--oc-cyan) 45%, var(--oc-violet));
}

/* ---- Which section wears which hue ---------------------------------- */

.session-sidebar-group[data-group="terminals"] { --band-hue: var(--drawer-hue-cyan); }
.session-sidebar-group[data-group="browsers"] { --band-hue: var(--drawer-hue-violet); }
.session-sidebar-group[data-group="pinned"] { --band-hue: var(--drawer-hue-yellow); }
.session-sidebar-group[data-group="layouts"] { --band-hue: var(--drawer-hue-indigo); }

.session-sidebar-group[data-group-colour="cyan"] { --band-hue: var(--drawer-hue-cyan); }
.session-sidebar-group[data-group-colour="violet"] { --band-hue: var(--drawer-hue-violet); }
.session-sidebar-group[data-group-colour="yellow"] { --band-hue: var(--drawer-hue-yellow); }
.session-sidebar-group[data-group-colour="green"] { --band-hue: var(--drawer-hue-green); }
.session-sidebar-group[data-group-colour="coral"] { --band-hue: var(--drawer-hue-coral); }
.session-sidebar-group[data-group-colour="orange"] { --band-hue: var(--drawer-hue-orange); }
.session-sidebar-group[data-group-colour="teal"] { --band-hue: var(--drawer-hue-teal); }
.session-sidebar-group[data-group-colour="rose"] { --band-hue: var(--drawer-hue-rose); }
.session-sidebar-group[data-group-colour="gold"] { --band-hue: var(--drawer-hue-gold); }

/* A GRADIENT OVERRIDES THE COLOUR: its first stop becomes `--band-hue`
 * (the chevron, hover and focus follow it) and its second `--band-hue-2`.
 * Declared after the colours at equal specificity, so it wins. */
.session-sidebar-group[data-group-gradient="ember"] {
    --band-hue: var(--drawer-hue-orange);
    --band-hue-2: var(--drawer-hue-yellow);
}
.session-sidebar-group[data-group-gradient="tide"] {
    --band-hue: var(--drawer-hue-cyan);
    --band-hue-2: var(--drawer-hue-green);
}
.session-sidebar-group[data-group-gradient="dusk"] {
    --band-hue: var(--drawer-hue-violet);
    --band-hue-2: var(--drawer-hue-coral);
}
.session-sidebar-group[data-group-gradient="neon"] {
    --band-hue: var(--drawer-hue-cyan);
    --band-hue-2: var(--drawer-hue-violet);
}

/* ---- The heading ----------------------------------------------------
 * Child combinators only: a hued section never bleeds into a section
 * nested below it. Hover and focus lift the hue toward the brightest
 * text tier instead of switching to the accent, so the heading still
 * reads as its own colour while it answers the pointer. Only a colour the
 * user PICKED paints a heading: PINNED, LAYOUTS, TERMINALS and BROWSERS
 * wear the quiet grey band heading (owner, 2026-10-07,
 * session-sidebar-band-structure.css) and keep their hue for row titles. */

.session-sidebar-group[data-group-colour]
    > .session-sidebar-group__headerrow > .session-sidebar-group__header {
    color: var(--band-hue);
}

.session-sidebar-group[data-group-colour]
    > .session-sidebar-group__headerrow > .session-sidebar-group__header:is(:hover, :focus-visible) {
    color: color-mix(in oklab, var(--band-hue) 60%, var(--oc-text-bright));
}

/* A PROJECT FOLDER'S HEADING, one tier brighter than the secondary grey
 * every other uncoloured heading keeps. ROGUE AGENTS is not a folder and
 * stays grey, and so does a project's `features (N)` sub-heading (`p:<id>:agents`, issue #1464). Hover and focus keep
 * the shared accent. */
.session-sidebar-group[data-group^="p:"]:not([data-group$=":agents"])
    > .session-sidebar-group__headerrow > .session-sidebar-group__header:not(:hover, :focus-visible) {
    color: var(--oc-text-primary);
}

/* ---- A PROJECT'S OR COMPANY'S OWN COLOUR (Joe (ccsliinc), 2026-10-11, "show colors") -----------------
 * Drawn only while the view menu's "show colors" tick is on: the shell then stamps `data-tint` and the colour as
 * `--sb-tint` on the heading row (a project's `#rrggbb`, or a company's hue on the oklch wheel). The NAME takes the
 * colour; there is no leading-edge mark (Joe (ccsliinc), 2026-10-16: "remove the vertical bar on left side"). Hover and
 * focus keep the shared lift of the heading text, which this leaves alone. */

.session-sidebar-group__headerrow[data-tint] .session-sidebar-group__label {
    color: var(--sb-tint);
}

/* ---- A PROJECT'S OWN COLOUR DRAWS A BLOCK (Adam (Adoom666), 2026-10-18) -----------------------------------
 * Replaces the folder-and-name tint: a project with a chosen colour wears a 1px outline in it around its WHOLE block
 * (heading and every row; a folded project, the heading alone), the same width and corner as a session row's own
 * ring, over a ground that is the colour mixed very lightly into the drawer ground, so every theme keeps its text
 * legible. The stamp is `data-block` plus `--sb-block` on the band; a project with NO chosen colour wears the default rgb(56,56,56) with no stamp at all (the :has() rule below); only a non-project band wears none. */

.session-sidebar-group:has(> .session-sidebar-group__headerrow[data-band-kind="project"]) {
    /* THE DEFAULT (Adam (Adoom666), 2026-10-18, "make 56/56/56 the default for all projects"): rgb(56,56,56), DATA like a
     * chosen color and not a theme color; mirrors palette.ts DEFAULT_PROJECT_COLOR. A chosen color's inline --sb-block wins. */
    --sb-block: var(--oc-project-block-default);
}

.session-sidebar-group[data-block],
.session-sidebar-group:has(> .session-sidebar-group__headerrow[data-band-kind="project"]) {
    --sb-block-pad: 5px;
    --sb-block-edge: 1px;
    border: var(--sb-block-edge) solid var(--sb-block);
    border-radius: var(--oc-radius-sm);
    background: color-mix(in srgb, var(--sb-block) var(--oc-project-block-mix, 9%), var(--oc-ground-panel));
    /* 5px OF AIR inside the outline on every side (Adam (Adoom666), 2026-10-18): the block grows OUTWARD by 5px (padding)
     * and the equal negative margin (padding plus the 1px border) keeps its contents, the rows included, at their exact x, y, width and height. */
    margin: calc(-1 * (var(--sb-block-pad) + var(--sb-block-edge)));
    padding: var(--sb-block-pad);
}

/* ---- Terminal, browser and Layout titles: a shade of their heading ----
 * Selecting a row changes only its background tint and border (see
 * session-sidebar-rows.css); the name keeps its own colour, selected or
 * not, so it never loses its terminal/browser/Layout identity. */

.session-sidebar-group:is([data-group="terminals"], [data-group="browsers"], [data-group="layouts"]) {
    --band-shade: color-mix(in oklab, var(--band-hue) 65%, var(--oc-text-primary));
}

.session-sidebar-group:is([data-group="terminals"], [data-group="browsers"], [data-group="layouts"])
    .session-sidebar-row .session-sidebar-row-name {
    color: var(--band-shade);
}

/* ---- ONE Layout's OWN colour (issue #821) -----------------------------
 * A hand-made group's colour paints its whole SECTION heading; a saved
 * Layout has no section of its own (many Layouts share the one LAYOUTS
 * heading), so its colour paints only THAT ROW's title text, stamped by
 * `web/src/lib/drawer/group-color.ts::layoutRowAttrs` straight onto the row
 * (`.session-sidebar-row[data-layout-colour]`), never the section. A
 * Layout with no style (still wearing the fixed "indigo" default,
 * src/core/layouts/style.py) carries no `data-layout-colour` at all and
 * keeps the section-wide shading rule above. THE TEXT-COLOUR AND
 * BACKGROUND-CLIP RULES BELOW ALSO MATCH `[data-kind="layout"]`
 * (redundant with `[data-layout-colour]` in practice - only a Layout row
 * ever carries the latter - but it raises the selector's specificity to
 * equal the section-wide rule's five simple selectors; a styled row's
 * rule then wins on SOURCE ORDER, since it is declared after). Dropping
 * `[data-kind="layout"]` from either would silently lose that tie and the
 * section-wide indigo shading would win regardless of the row's own
 * colour - this is exactly what shipped broken and was caught by
 * `scripts/verify_layouts_drawer.py` checks 20/21/21b. */

.session-sidebar-row[data-layout-colour="cyan"] { --row-hue: var(--drawer-hue-cyan); }
.session-sidebar-row[data-layout-colour="violet"] { --row-hue: var(--drawer-hue-violet); }
.session-sidebar-row[data-layout-colour="yellow"] { --row-hue: var(--drawer-hue-yellow); }
.session-sidebar-row[data-layout-colour="green"] { --row-hue: var(--drawer-hue-green); }
.session-sidebar-row[data-layout-colour="coral"] { --row-hue: var(--drawer-hue-coral); }
.session-sidebar-row[data-layout-colour="orange"] { --row-hue: var(--drawer-hue-orange); }
.session-sidebar-row[data-layout-colour="teal"] { --row-hue: var(--drawer-hue-teal); }
.session-sidebar-row[data-layout-colour="rose"] { --row-hue: var(--drawer-hue-rose); }
.session-sidebar-row[data-layout-colour="gold"] { --row-hue: var(--drawer-hue-gold); }

.session-sidebar-row[data-layout-gradient="ember"] {
    --row-hue: var(--drawer-hue-orange);
    --row-hue-2: var(--drawer-hue-yellow);
}
.session-sidebar-row[data-layout-gradient="tide"] {
    --row-hue: var(--drawer-hue-cyan);
    --row-hue-2: var(--drawer-hue-green);
}
.session-sidebar-row[data-layout-gradient="dusk"] {
    --row-hue: var(--drawer-hue-violet);
    --row-hue-2: var(--drawer-hue-coral);
}
.session-sidebar-row[data-layout-gradient="neon"] {
    --row-hue: var(--drawer-hue-cyan);
    --row-hue-2: var(--drawer-hue-violet);
}

.session-sidebar-row[data-kind="layout"][data-layout-colour] .session-sidebar-row-name {
    color: var(--row-hue);
}

.session-sidebar-row[data-layout-colour]:not([data-layout-gradient]) {
    --row-hue-2: var(--row-hue);
}

.session-sidebar-row[data-layout-colour] {
    --row-shine: color-mix(in oklab, var(--row-hue) 40%, var(--oc-text-bright));
}

.session-sidebar-row[data-kind="layout"]:is([data-layout-gradient], [data-layout-anim="shimmer"])
    .session-sidebar-row-name {
    background-image: linear-gradient(90deg, var(--row-hue), var(--row-hue-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* THE SHIMMER (issue #1821): the name is its flat hue until .band-fx (below) draws it in sliding slices of the gradient,
 * so only transform moves. Reads the same as the old 100deg gradient sliding behind background-clip: text. */
.session-sidebar-row[data-kind="layout"][data-layout-anim="shimmer"] .session-sidebar-row-name {
    position: relative;
    background: none;
    color: var(--row-hue);
    --fx-hue: var(--row-hue);
    --fx-hue2: var(--row-hue-2);
    --fx-shine: var(--row-shine);
}

.session-sidebar-row[data-kind="layout"][data-layout-anim="shimmer"] .session-sidebar-row-name:has(> .band-fx-host) {
    color: transparent;
}

.session-sidebar-row[data-layout-anim="pulse"] .session-sidebar-row-name {
    animation: drawer-band-pulse 2.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .session-sidebar-row[data-layout-anim] .session-sidebar-row-name {
        animation: none;
    }

    .band-fx,
    .band-fx > i::before {
        animation: none;
    }
}

/* ---- Group gradient and animation, on the label only ------------------
 * The label is painted through `background-clip: text`; the chevron keeps
 * `currentColor` (the band hue) because a transparent chevron would
 * vanish. `--band-shine` is the hue lifted toward the brightest text
 * tier, the travelling highlight of the shimmer. */

.session-sidebar-group[data-group-colour] {
    --band-shine: color-mix(in oklab, var(--band-hue) 40%, var(--oc-text-bright));
}

.session-sidebar-group[data-group-colour]:not([data-group-gradient]) {
    --band-hue-2: var(--band-hue);
}

.session-sidebar-group:is([data-group-gradient], [data-group-anim="shimmer"])
    > .session-sidebar-group__headerrow .session-sidebar-group__label {
    background-image: linear-gradient(90deg, var(--band-hue), var(--band-hue-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* THE SHIMMER (issue #1821), see the row rule above. The label is its flat hue until .band-fx draws it in
 * slices of the gradient. */
.session-sidebar-group[data-group-anim="shimmer"]
    > .session-sidebar-group__headerrow .session-sidebar-group__label {
    position: relative;
    background: none;
    color: var(--band-hue);
    --fx-hue: var(--band-hue);
    --fx-hue2: var(--band-hue-2);
    --fx-shine: var(--band-shine);
}

.session-sidebar-group[data-group-anim="shimmer"]
    > .session-sidebar-group__headerrow .session-sidebar-group__label:has(> .band-fx-host) {
    color: transparent;
}

.session-sidebar-group[data-group-anim="pulse"]
    > .session-sidebar-group__headerrow .session-sidebar-group__label {
    animation: drawer-band-pulse 2.8s ease-in-out infinite;
}

/* .band-fx-host: the still box the pauser observes (data-anim-host), so every window pauses and resumes together. .band-fx: the old band was a 250% wide gradient (hue, hue-2 at 38%, shine at 50%, hue-2 at 62%, hue) sliding right by 1.5
 * label widths in 4.5s, so over the label it is 2.5 label widths of piecewise linear colour. It is now 24 adjacent
 * WINDOWS (i, overflow hidden, positions --x and widths --k in label widths from the band's centre), each a flat slice of
 * that gradient (--c, sampled at its centre: 4 per long ramp, 8 per shine ramp, each side), over a copy of the name (its
 * ::before, data-t) that counter-translates by the same amount and timing, so the copy stays put and only the windows
 * move. Windows never overlap, so each pixel carries ONE layer of text (stacked copies fatten antialiased glyph edges: the
 * name itself is transparent while the windows exist). The wrapper's percent is the label's own width, so any width, a
 * truncated label included, travels the same fraction. Only transform moves, and nothing animated sits inside a filter,
 * mask or opacity node (same recipe as the xhigh sheen, effort-level.css). */
.band-fx-host {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.band-fx {
    position: absolute;
    inset: 0;
    pointer-events: none;
    animation: band-fx-travel 4.5s linear infinite;
}

.band-fx > i {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% + var(--x) * 100%);
    width: calc(var(--k) * 100%);
    overflow: hidden;
    font-style: normal;
}

.band-fx > i::before {
    content: attr(data-t);
    position: absolute;
    top: 0;
    left: calc(-1 * (0.5 + var(--x)) / var(--k) * 100%);
    width: calc(100% / var(--k) + 0.5px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--c);
    animation: band-fx-counter 4.5s linear infinite;
}

.band-fx > i:nth-child(1) { --x: -1.2500; --k: 0.2375; --c: color-mix(in srgb, var(--fx-hue2) 12.50%, var(--fx-hue)); }
.band-fx > i:nth-child(2) { --x: -1.0125; --k: 0.2375; --c: color-mix(in srgb, var(--fx-hue2) 37.50%, var(--fx-hue)); }
.band-fx > i:nth-child(3) { --x: -0.7750; --k: 0.2375; --c: color-mix(in srgb, var(--fx-hue2) 62.50%, var(--fx-hue)); }
.band-fx > i:nth-child(4) { --x: -0.5375; --k: 0.2375; --c: color-mix(in srgb, var(--fx-hue2) 87.50%, var(--fx-hue)); }
.band-fx > i:nth-child(5) { --x: -0.3000; --k: 0.0375; --c: color-mix(in srgb, var(--fx-shine) 6.25%, var(--fx-hue2)); }
.band-fx > i:nth-child(6) { --x: -0.2625; --k: 0.0375; --c: color-mix(in srgb, var(--fx-shine) 18.75%, var(--fx-hue2)); }
.band-fx > i:nth-child(7) { --x: -0.2250; --k: 0.0375; --c: color-mix(in srgb, var(--fx-shine) 31.25%, var(--fx-hue2)); }
.band-fx > i:nth-child(8) { --x: -0.1875; --k: 0.0375; --c: color-mix(in srgb, var(--fx-shine) 43.75%, var(--fx-hue2)); }
.band-fx > i:nth-child(9) { --x: -0.1500; --k: 0.0375; --c: color-mix(in srgb, var(--fx-shine) 56.25%, var(--fx-hue2)); }
.band-fx > i:nth-child(10) { --x: -0.1125; --k: 0.0375; --c: color-mix(in srgb, var(--fx-shine) 68.75%, var(--fx-hue2)); }
.band-fx > i:nth-child(11) { --x: -0.0750; --k: 0.0375; --c: color-mix(in srgb, var(--fx-shine) 81.25%, var(--fx-hue2)); }
.band-fx > i:nth-child(12) { --x: -0.0375; --k: 0.0375; --c: color-mix(in srgb, var(--fx-shine) 93.75%, var(--fx-hue2)); }
.band-fx > i:nth-child(13) { --x: 0.0000; --k: 0.0375; --c: color-mix(in srgb, var(--fx-shine) 93.75%, var(--fx-hue2)); }
.band-fx > i:nth-child(14) { --x: 0.0375; --k: 0.0375; --c: color-mix(in srgb, var(--fx-shine) 81.25%, var(--fx-hue2)); }
.band-fx > i:nth-child(15) { --x: 0.0750; --k: 0.0375; --c: color-mix(in srgb, var(--fx-shine) 68.75%, var(--fx-hue2)); }
.band-fx > i:nth-child(16) { --x: 0.1125; --k: 0.0375; --c: color-mix(in srgb, var(--fx-shine) 56.25%, var(--fx-hue2)); }
.band-fx > i:nth-child(17) { --x: 0.1500; --k: 0.0375; --c: color-mix(in srgb, var(--fx-shine) 43.75%, var(--fx-hue2)); }
.band-fx > i:nth-child(18) { --x: 0.1875; --k: 0.0375; --c: color-mix(in srgb, var(--fx-shine) 31.25%, var(--fx-hue2)); }
.band-fx > i:nth-child(19) { --x: 0.2250; --k: 0.0375; --c: color-mix(in srgb, var(--fx-shine) 18.75%, var(--fx-hue2)); }
.band-fx > i:nth-child(20) { --x: 0.2625; --k: 0.0375; --c: color-mix(in srgb, var(--fx-shine) 6.25%, var(--fx-hue2)); }
.band-fx > i:nth-child(21) { --x: 0.3000; --k: 0.2375; --c: color-mix(in srgb, var(--fx-hue2) 87.50%, var(--fx-hue)); }
.band-fx > i:nth-child(22) { --x: 0.5375; --k: 0.2375; --c: color-mix(in srgb, var(--fx-hue2) 62.50%, var(--fx-hue)); }
.band-fx > i:nth-child(23) { --x: 0.7750; --k: 0.2375; --c: color-mix(in srgb, var(--fx-hue2) 37.50%, var(--fx-hue)); }
.band-fx > i:nth-child(24) { --x: 1.0125; --k: 0.2375; --c: color-mix(in srgb, var(--fx-hue2) 12.50%, var(--fx-hue)); }

@keyframes band-fx-travel {
    from { transform: translateX(-75%); }
    to { transform: translateX(75%); }
}

@keyframes band-fx-counter {
    from { transform: translateX(75%); }
    to { transform: translateX(-75%); }
}

@keyframes drawer-band-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

/* REDUCED MOTION: no animation at all. A shimmer parks as its static
 * gradient, a pulse as the full-strength label. */
@media (prefers-reduced-motion: reduce) {
    .session-sidebar-group[data-group-anim]
        > .session-sidebar-group__headerrow .session-sidebar-group__label {
        animation: none;
    }
}

/* ---- The colour picker (web/src/lib/drawer/group-color.ts) -----
 * A free-floating popup, so it wears `popup-focus` for its edge and
 * ground and declares only its own layout here. Title strip, a small
 * tracked uppercase label in the accent as the one accent-coloured thing,
 * hairlines between regions, square swatches, focus a 2px cyan outline. */

.group-colour-picker {
    position: fixed;
    /* Above the open sidebar panel (1100), like the group menu it opens
     * from: both are body children, so only the number decides. */
    z-index: 1200;
    width: 216px;
    font-family: var(--font-mono);
    font-size: var(--oc-fs-label);
    color: var(--oc-text-primary);
    border-radius: var(--oc-radius-sm);
}

/* The strip is the shared `.modal-titlerow` (modal-titlerow.css); the label type is this picker's own. */
.group-colour-picker__title {
    color: var(--oc-orange);
    font-size: var(--oc-fs-micro);
    letter-spacing: var(--oc-tracking-label, 1.2px);
    text-transform: uppercase;
}

.group-colour-picker__region {
    padding: var(--oc-space-2) 10px;
    box-shadow: inset 0 -1px 0 var(--oc-line-faint);
}

.group-colour-picker__region:last-child {
    box-shadow: none;
}

.group-colour-picker__label {
    display: block;
    margin-bottom: 6px;
    color: var(--oc-text-muted);
    font-size: 9px;
    letter-spacing: var(--oc-tracking-label, 1.2px);
    text-transform: uppercase;
}

.group-colour-picker__swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.group-colour-picker__swatch {
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid var(--oc-line-panel);
    border-radius: 2px;
    background: var(--swatch);
    cursor: pointer;
}

.group-colour-picker__swatch--gradient {
    width: 38px;
    background: linear-gradient(90deg, var(--swatch), var(--swatch-2));
}

.group-colour-picker__swatch[aria-checked="true"] {
    border-color: var(--oc-text-bright);
    box-shadow: inset 0 0 0 1px var(--oc-ground-raised);
}

.group-colour-picker__options {
    display: flex;
    gap: var(--oc-space-1);
}

.group-colour-picker__option {
    flex: 1 1 0;
    min-height: 22px;
    padding: 0 6px;
    border: 1px solid var(--oc-line-panel);
    border-radius: 2px;
    background: transparent;
    color: var(--oc-text-secondary);
    font-family: inherit;
    font-size: var(--oc-fs-micro);
    text-transform: lowercase;
    cursor: pointer;
}

.group-colour-picker__option[aria-checked="true"] {
    border-color: var(--oc-cyan);
    color: var(--oc-text-bright);
}

/* ---- The group icon popup (web/src/lib/drawer/group-icon.ts) ---
 * Issue #769. The colour picker's sibling: the same `popup-focus` edge and
 * ground, the same `.group-colour-picker__title` strip (reused, not
 * restated), then ONE region holding the shared icon picker
 * (web/src/lib/icon-picker/, which carries its own look). As wide as the
 * picker's eight columns, never wider than the viewport less a gutter, so
 * the picker's cells shrink on a phone rather than overflowing it.
 *
 * THE BODY WEARS THE GROUP'S HUE. The picker sets no colour, so
 * `--icon-hue` (stamped by the popup as `var(--drawer-hue-<key>)`, the
 * palette above) is what every preview and the selected ring are drawn
 * in: the icon is shown in the colour the heading will draw it. */

.group-icon-picker {
    position: fixed;
    /* The colour picker's layer, for the colour picker's reason. */
    z-index: 1200;
    width: max-content;
    max-width: calc(100vw - 16px);
    font-family: var(--font-mono);
    font-size: var(--oc-fs-label);
    color: var(--oc-text-primary);
    border-radius: var(--oc-radius-sm);
}

.group-icon-picker__body {
    padding: var(--oc-space-2) 10px;
    color: var(--icon-hue, var(--oc-text-primary));
}

/* LAYOUTS IS HIDDEN BELOW 1024px (issue #424): below that width a Layout
 * stays open with every member in the phone tab strip instead (D46, the
 * terminal-page slice's own surface), so a drawer section that lists them
 * separately has nothing useful to add there. The same breakpoint the
 * terminal grid and PhoneTabs already switch on
 * (client/css/terminal-grid.css, web/src/opscenter/phone/PhoneTabs.svelte). */
@media (max-width: 1023px) {
    .session-sidebar-group[data-group="layouts"] {
        display: none;
    }
}