/* gotreego — structural stylesheet.
   Structure only: nesting, guide line (opt-in), chevron, focus ring, level
   buttons.
   Every colour is currentColor or a --gtg-* variable with a neutral default,
   so a host skins the tree with one class of its own (Tree.CSSClass) and
   never has to fight these rules. */

.gtg {
  --gtg-indent: 0.7rem;        /* padding-left of a child list (after the guide) */
  --gtg-guide-x: 0.79rem;      /* guide line offset: under the parent chevron's centre */
  --gtg-guide: color-mix(in oklab, currentColor 12%, transparent);
  --gtg-row-hover: color-mix(in oklab, currentColor 7%, transparent);
  --gtg-focus: currentColor;
  --gtg-chevron: color-mix(in oklab, currentColor 50%, transparent);
  --gtg-row-pad-y: 0.2rem;
  --gtg-row-pad-x: 0.35rem;
  --gtg-row-gap: 0.4rem;
  --gtg-row-radius: 0.375rem;
  --gtg-sel-wash: color-mix(in oklab, currentColor 8%, transparent);
  --gtg-cell-gap: 0.5rem;      /* between cells of one row (Col) */
}

.gtg-tree,
.gtg-children { list-style: none; margin: 0; padding: 0; }

/* Indent each level. margin-left puts the group under the parent chevron's
   centre; padding-left is the indent.

   The guide line down the group is opt-in (Tree.Guides) — the border stays
   1px and transparent when it is off, so switching it never moves a row. */
.gtg-children {
  margin-left: var(--gtg-guide-x);
  padding-left: var(--gtg-indent);
  border-left: 1px solid transparent;
}

.gtg-guides .gtg-children { border-left-color: var(--gtg-guide); }

.gtg-node { margin: 0; }

/* The row: chevron · content. Native <details> collapses; the chevron rotates
   on [open]. The UA marker is hidden — the chevron is ours. */
.gtg-row {
  display: flex; align-items: center; gap: var(--gtg-row-gap);
  padding: var(--gtg-row-pad-y) var(--gtg-row-pad-x);
  border-radius: var(--gtg-row-radius);
  min-width: 0;
}
summary.gtg-row { list-style: none; cursor: pointer; user-select: none; }
summary.gtg-row::-webkit-details-marker { display: none; }
summary.gtg-row:hover { background: var(--gtg-row-hover); }

.gtg-chevron {
  flex: none;
  color: var(--gtg-chevron);
  transition: transform .15s ease;
}
.gtg-d[open] > summary .gtg-chevron { transform: rotate(90deg); }

/* A leaf that has no chevron still lines up its content with the branch text
   above it: reserve the chevron column. Only for the default leaf box —
   OnDrawLeaf callers own their own geometry. */
.gtg-leaf > .gtg-row { margin-left: calc(14px + var(--gtg-row-gap)); }

/* Columns (Tree.Col). GEOMETRY ONLY — the per-column widths are generated per
   tree and scoped by its id, so they travel with the markup rather than with
   this sheet; what lives here is what every columned tree shares.

   The cells container sits AFTER the chevron and the checkbox, never around
   them: a host that draws a card on the row draws it on this box, and the tick
   box must stay outside that card. */
.gtg-cols .gtg-cells {
  display: flex; align-items: center; gap: var(--gtg-cell-gap);
  flex: 1 1 auto; min-width: 0;
}
.gtg-cols .gtg-cell { display: flex; align-items: center; min-width: 0; flex: 0 1 auto; }

/* A cell that IS a link. The row owns role="treeitem" and the tab stop; this
   is a mouse target (middle click, open in a new tab) that inherits the row's
   type and colour so it does not read as a second thing. */
.gtg-a {
  color: inherit; text-decoration: none; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* …and its twin for a row with nowhere to go: a real button, undressed. */
.gtg-a-off {
  font: inherit; text-align: inherit; padding: 0; border: 0;
  background: transparent; color: inherit; cursor: pointer;
}

/* RowClickSelects: a row that ticks on click has to look and behave like a
   target. Branch rows already do (summary carries both below); leaves do not,
   and without user-select a drag across a file name would highlight text and
   still end in a tick. Gated on the attribute, so a tree that did not opt in
   keeps its text selectable. */
.gtg[data-gtg-sel-rowclick="leaf"] .gtg-leaf > .gtg-row,
.gtg[data-gtg-sel-rowclick="both"] .gtg-leaf > .gtg-row {
  cursor: pointer; user-select: none;
}

/* Keyboard focus. Only :focus-visible, so a mouse click leaves no ring. */
.gtg [role="treeitem"]:focus { outline: none; }
.gtg [role="treeitem"]:focus-visible {
  outline: 2px solid var(--gtg-focus);
  outline-offset: -2px;
  border-radius: var(--gtg-row-radius);
}

/* The bar above the tree: "select all" + count (SelectAll) and/or the level
   buttons (Levels). Rendered only when it has something to show. */
.gtg-bar {
  display: flex; align-items: center; gap: .5rem;
  padding: .3rem var(--gtg-row-pad-x);
}
/* The level group never wraps and never shrinks: it is a fixed row of small
   targets, and a bar that grows a second line when the pane narrows moves every
   row below it. In a squeeze the bar's caption gives way instead — it truncates,
   which is what a caption is for. */
.gtg-levels { display: inline-flex; align-items: center; gap: .3rem; flex: none; }
.gtg-levels-label { font-size: .72rem; opacity: .6; margin-right: .1rem; white-space: nowrap; }
.gtg-sel-count { font-size: .72rem; opacity: .7; font-variant-numeric: tabular-nums; }
.gtg-bar-caption { min-width: 0; display: inline-flex; align-items: center; gap: .4rem; }
.gtg-level-btn {
  min-width: 1.5rem; height: 1.5rem; padding: 0 .35rem;
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: .72rem; font-variant-numeric: tabular-nums; line-height: 1;
  border: 1px solid color-mix(in oklab, currentColor 20%, transparent);
  border-radius: .3rem;
  background: transparent; color: inherit; cursor: pointer;
}
/* The fallback is not decoration: with HTMLParts the group can sit in the
   host's own heading, outside .gtg, where --gtg-row-hover is not declared and
   the hover would silently resolve to nothing. Declared here rather than on
   .gtg-levels so a host skin's own value still wins. */
.gtg-level-btn:hover { background: var(--gtg-row-hover, color-mix(in oklab, currentColor 7%, transparent)); }
.gtg-level-btn.gtg-level-active {
  color: var(--gtg-level-active-fg, #fff);
  background: var(--gtg-level-active-bg, #334155);
  border-color: var(--gtg-level-active-bg, #334155);
}

/* Selection (Selection()). The label is the click target — a little larger
   than the box itself, so a tick does not need pixel aim. The input's own
   look is NOT set here: the host skins it (daisyUI .checkbox, native, …). */
.gtg-chk {
  flex: none; display: inline-flex; align-items: center;
  padding: .1rem .15rem; margin: -.1rem 0; cursor: pointer;
}
.gtg-chk > input { cursor: pointer; margin: 0; }
/* A non-selectable node keeps the checkbox column, so labels stay aligned:
   an invisible, disabled input of the host's exact checkbox size. */
.gtg-chk-none { cursor: default; }
.gtg-chk-none > input { visibility: hidden; cursor: default; }
/* A ticked leaf gets a faint wash, so a long selection reads at a glance. */
.gtg-leaf > .gtg-row:has(> .gtg-chk > .gtg-sel:checked) { background: var(--gtg-sel-wash); }