/*
 * Making the groups VISIBLE as groups in the legacy sidebar (1.11.1).
 *
 * Owner, 2026-09-24: "some slight indentation and possibly an hr before
 * project on the left menu to actually visually see the groups." Two rules
 * and nothing else:
 *
 *   1. EVERY ROW UNDER A SECTION HEADER IS INSET BY ONE TOKEN. The inset
 *      is a margin on the row, so the row's own box moves and everything
 *      inside it - the status light first - moves with it by exactly the
 *      same amount in every band. The light column therefore stays one
 *      straight line down the whole list. HEADERS DO NOT MOVE: the
 *      alignment measured for every band header (gutter at x=8, label at
 *      x=54) is untouched.
 *
 *   2. ONE VERTICAL RHYTHM (issue #897; Joe (ccsliinc), 2026-09-27: "hr's
 *      do not have matching spacing above and below. veritcal spacing is
 *      not uniform", "title and first ssession below touch", "layouts
 *      should probably have an hr and spacing fixed as well"). Three
 *      tokens, nothing per element:
 *        --sidebar-band-gap     between two bands, a flex `row-gap` on the
 *                               list and on the PROJECTS body (28px cozy
 *                               and detailed, 16px compact - the values the
 *                               old per-band margins had);
 *        --sidebar-heading-gap  between a heading and the first thing in
 *                               its body, so a heading never touches its
 *                               first row;
 *        --sidebar-row-gap      between two rows of one band (4px, 1px
 *                               compact), a `row-gap` on the band body, so
 *                               no margin trails the last row;
 *        --sidebar-divider      the hairline colour.
 *      A DIVIDER sits under PINNED, under LAYOUTS, above and below COMPANIES, and above PROJECTS: a
 *      hairline on its own absolute layer, exactly centred in the band
 *      gap. The band it rides on gives the hairline its one pixel
 *      (`margin-top: 1px`), so the space above it and below it are both
 *      exactly half the gap - an even gap around a 1px line cannot
 *      otherwise split evenly.
 *
 * Loads AFTER session-sidebar-groups.css and session-sidebar-density.css.
 */

@layer components {
:root {
    /* THE ONE TREE STEP (Joe (ccsliinc), 2026-10-09: "it needs to look like a tree ... not lined up"). Every level of the
     * drawer (a band, a company, a nested company, a project, a nested project, the agents fold, a Layout's members)
     * starts exactly one step right of its parent, and the step is applied in ONE rule (the body rule below), so depth
     * N starts at N x this. 8px is the chevron glyph's offset inside its gutter (gutter 22 - pad 4 - glyph 10), so a
     * child's left edge sits directly under its parent's chevron. */
    --sidebar-tree-step: var(--oc-space-2);
    /* The drawer's vertical rhythm (issue #897), see the file header. */
    --sidebar-band-gap: 28px;
    --sidebar-heading-gap: 6px;
    --sidebar-row-gap: var(--oc-space-1);
    /* The gap between the marks, light and name inside an agent row's main line; the pack rows (PackSection.svelte) read it too. */
    --sidebar-row-main-gap: 5px;
    /* Softer than the panel line (Joe, 2026-10-14, #1775: "the hrs between the sections need to be lighter"): half the
     * panel line over whatever ground the theme paints, so it follows every theme. Row hairlines keep --oc-line-faint. */
    --sidebar-divider: color-mix(in srgb, var(--oc-line-panel) 50%, transparent);
    /* The lighter hairline between two companies: a minor break, clearly below a band divider. */
    --sidebar-divider-minor: color-mix(in srgb, var(--sidebar-divider) 55%, transparent);
    /* The space between the things IN a heading row - chevron, light, a
     * group's picked icon (issue #769), name - a flex `gap` on
     * `.session-sidebar-group__header` (session-sidebar-groups.css). One
     * token, so the icon sits exactly as far from the name as the light
     * sits from the icon. */
    --sidebar-heading-inline-gap: 6px;
}

.session-sidebar-panel[data-density="compact"] {
    --sidebar-band-gap: var(--oc-space-4);
    --sidebar-heading-gap: var(--oc-space-1);
    --sidebar-row-gap: 1px;
}

/* THE ONLY INDENT IN THE TREE. A body is its heading's children: the rows, the nested project bands, the agents fold,
 * the child companies. Nesting in the DOM stacks one step per level, so no row, heading or divider carries a depth
 * number or a margin of its own. A headingless leader band adds no level (its row is a sibling of the headings). */
.session-sidebar-group > .session-sidebar-group__body,
.session-sidebar-layout__members {
    padding-inline-start: var(--sidebar-tree-step);
}

.session-sidebar-leader > .session-sidebar-group__body {
    padding-inline-start: 0;
}

/* A band's body is a column whose rows are spaced by a gap, not by a
 * margin under each row, so nothing trails the last row and the space
 * under a band is exactly the band gap. The row margins this replaces are
 * the same sizes (session-sidebar-rows.css 4px, compact 1px). */
.session-sidebar-group > .session-sidebar-group__body {
    display: flex;
    flex-direction: column;
    row-gap: var(--sidebar-row-gap);
}

.session-sidebar-group > .session-sidebar-group__body > .session-sidebar-row {
    margin-bottom: 0;
}

/* A folded Layout's member list is empty and draws nothing; out of the
 * column it takes no gap either. */
.session-sidebar-layout__members:empty {
    display: none;
}

.session-sidebar-list,
.session-sidebar-companies > .session-sidebar-group__body,
.session-sidebar-groups-block > .session-sidebar-group__body,
.session-sidebar-projects > .session-sidebar-group__body,
.session-sidebar-group[data-group="layouts"] > .session-sidebar-group__body {
    row-gap: var(--sidebar-band-gap);
}

/* LAYOUTS spaces its entries like PROJECTS does. An expanded Layout's member
 * list is a sibling in that body, so it pulls back up to sit tight under its
 * own Layout row (the ordinary row gap) instead of taking the band gap. */
.session-sidebar-group[data-group="layouts"] > .session-sidebar-group__body > .session-sidebar-layout__members {
    margin-top: calc(var(--sidebar-row-gap) - var(--sidebar-band-gap));
}

/* The heading-to-body gap, only when the body holds something: a folded
 * band's empty body must not grow a gap under its heading. */
.session-sidebar-group > .session-sidebar-group__body:has(> *) {
    padding-top: var(--sidebar-heading-gap);
}

.session-sidebar-group[data-group="pinned"] + .session-sidebar-group,
.session-sidebar-group[data-group="layouts"] + .session-sidebar-group,
.session-sidebar-group[data-group="terminals"] + .session-sidebar-group,
.session-sidebar-group[data-group="browsers"] + .session-sidebar-group,
.session-sidebar-group + .session-sidebar-projects,
.session-sidebar-group + .session-sidebar-companies,
.session-sidebar-group + .session-sidebar-groups-block,
.session-sidebar-companies + .session-sidebar-group,
.session-sidebar-groups-block + .session-sidebar-group,
.session-sidebar-projects + .session-sidebar-projects {
    position: relative;
    margin-top: 1px;
}

.session-sidebar-group[data-group="pinned"] + .session-sidebar-group::before,
.session-sidebar-group[data-group="layouts"] + .session-sidebar-group::before,
.session-sidebar-group[data-group="terminals"] + .session-sidebar-group::before,
.session-sidebar-group[data-group="browsers"] + .session-sidebar-group::before,
.session-sidebar-group + .session-sidebar-projects::before,
.session-sidebar-group + .session-sidebar-companies::before,
.session-sidebar-group + .session-sidebar-groups-block::before,
.session-sidebar-companies + .session-sidebar-group::before,
.session-sidebar-groups-block + .session-sidebar-group::before,
.session-sidebar-projects + .session-sidebar-projects::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--sidebar-band-gap) / -2 - 1px);
    border-top: 1px solid var(--sidebar-divider);
    pointer-events: none;
}

/* TWO COMPANIES SIDE BY SIDE (owner, 2026-10-09: "on left bar, hrs between companies should be skinnier it blends them
 * in with the large group differences"; Joe, same day: "not as wide"): the same 1px hairline, inset from both sides on the
 * right by the tree step and on the left by the level it sits at, so it is a shorter minor break beside the full-width group dividers. THE LINE BETWEEN A COMPANY'S OWN
 * FOLDERS AND ITS NESTED COMPANY (Joe, 2026-10-09: "needs to be at a width which coincides with its level") follows the same
 * rule: the nested company's wrapper already sits one `--sidebar-tree-step` further in per level (the parent body's
 * padding), so `left: 0` lands at the right depth with no per-level number. */
.session-sidebar-company + .session-sidebar-company::before,
.session-sidebar-company .session-sidebar-group + .session-sidebar-company::before {
    left: 0;
    right: var(--sidebar-tree-step);
    border-top-color: var(--sidebar-divider-minor);
}

/* A GROUPING HEADING IS SMALL GREY TEXT WITH A HAIRLINE TO ITS RIGHT (owner, 2026-10-07: "change the
 * grouping headings to small grey text with a hr line to the right"). PINNED, LAYOUTS, COMPANIES, a
 * hand-made group, ROGUE AGENTS, TERMINALS, BROWSERS and ORPHANED PROJECTS, read off the heading row's
 * own `data-band-kind` (`reserved` or `group`); a real company heading (`company`) or a project heading
 * (`project`) keeps its own look. The grey is the muted text tier, never the accent; a group's
 * user-picked colour still wins (session-sidebar-colours.css), and hover keeps the shared accent. */
.session-sidebar-group > .session-sidebar-group__headerrow:is([data-band-kind="reserved"], [data-band-kind="group"]) > .session-sidebar-group__header {
    font-size: 0.72em;
    font-weight: normal;
    letter-spacing: 0.4px;
    text-transform: lowercase;
}

.session-sidebar-group > .session-sidebar-group__headerrow:is([data-band-kind="reserved"], [data-band-kind="group"]) > .session-sidebar-group__header:not(:hover, :focus-visible) {
    color: var(--oc-text-muted);
}

.session-sidebar-group > .session-sidebar-group__headerrow:is([data-band-kind="reserved"], [data-band-kind="group"]) > .session-sidebar-group__header::after {
    content: "";
    flex: 1 1 auto;
    min-width: var(--oc-space-3);
    border-top: 1px solid var(--sidebar-divider);
}

/* COMPANY HEADINGS (issue #1338): two company wrappers sit side by side, so the band hairline above
 * (the rules above also list `.session-sidebar-projects + .session-sidebar-projects`) divides one
 * company from the next; an empty company's quiet line. */
.session-sidebar-company__empty {
    padding: var(--oc-space-1) var(--oc-space-2) var(--oc-space-1) var(--sidebar-gutter);
    font-family: var(--font-mono);
    /* The size of ITS OWN heading, so the line reads as part of it (Adam (Adoom666), 2026-10-14: "smaller like the section
     * heading font size and darker like a sleeping agent"): a company heading is 0.8em, and the flat bands' (terminals,
     * browsers, groups) 0.72em, set by the rule below. The look is an asleep row's: the row name's colour at 0.55. */
    font-size: 0.8em;
    color: var(--oc-text-primary);
    opacity: 0.55;
}

.session-sidebar-group:has(> .session-sidebar-group__headerrow:is([data-band-kind="reserved"], [data-band-kind="group"])) > .session-sidebar-group__body > .session-sidebar-company__empty {
    font-size: 0.72em;
}

}

/* SWARM LEADERS (issue #1371): Alpha, a company agent and a project agent wear a rank insignia (one chevron, two chevrons, a
 * star: shape, not a text badge) in the accent, and a 2px accent edge on the row; the headingless band that holds Alpha's row
 * or a company agent's row adds no spacing of its own. Tokens only, so every theme keeps working. */
@layer components {
  .session-sidebar-leader {
      margin: 0;
  }
  .session-sidebar-row[data-leader] {
      box-shadow: inset 2px 0 0 var(--oc-orange);
  }
  .session-sidebar-row-leader {
      display: inline-flex;
      flex: 0 0 auto;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
      margin-right: var(--oc-space-1);
      color: var(--oc-orange);
  }
}