/* The component sets cumulative indentation on each item so split and regular
   rows share the same hierarchy geometry. */

.pf-tree, .pf-tree__children { list-style:none; margin:0; padding:0; }
.pf-tree__section + .pf-tree__section { margin-top:var(--sp-2); padding-top:var(--sp-2);
  border-top:var(--stroke-1) solid var(--color-border); }

.pf-tree__row { position:relative; display:flex; align-items:center; gap:var(--sp-2);
  width:100%; min-height:var(--control-size-sm);
  padding:var(--sp-1) var(--sp-2) var(--sp-1) var(--pf-ind, var(--sp-5));
  border:0; border-radius:var(--radius-sm); background:none;
  font:inherit; font-size:var(--fs-sm); line-height:var(--lh-tight);
  color:var(--color-text); text-align:left; text-decoration:none; cursor:pointer; }
.pf-tree__row:hover { background:var(--color-secondary-50); color:var(--color-text);
  text-decoration:none; }
.pf-tree__row:focus-visible { outline:var(--stroke-2) solid var(--color-focus-ring);
  outline-offset:calc(-1 * var(--stroke-2)); }

/* Borders supplement path and selection fills so state is not colour-only. */
.pf-tree__row.is-path, .pf-tree__split.is-path {
  background:var(--color-gray-100);
  border-left:var(--stroke-3) solid var(--color-secondary-300);
  padding-left:calc(var(--pf-ind, var(--sp-5)) - var(--stroke-3)); }
/* The split wrapper owns state borders; its inner row must not duplicate them. */
.pf-tree__split.is-path { padding-left:0; }
.pf-tree__split.is-path > .pf-tree__row { border-left:0; background:none;
  padding-left:var(--pf-ind, var(--sp-5)); }
.pf-tree__row.is-active, .pf-tree__split.is-active {
  background:var(--color-secondary-100); font-weight:var(--fw-bold);
  border-left:var(--stroke-3) solid var(--color-text-light);
  padding-left:calc(var(--pf-ind, var(--sp-5)) - var(--stroke-3)); }
.pf-tree__split.is-active { padding-left:0; }
.pf-tree__split.is-active > .pf-tree__row { border-left:0; font-weight:var(--fw-bold);
  background:none; padding-left:var(--pf-ind, var(--sp-5)); }

/* Chevrons stay outside the label flow so rows align whether foldable or not. */
.pf-tree__fold, .pf-tree__chev-slot {
  position:absolute; left:calc(var(--pf-ind, var(--sp-5)) - 20px); top:0; bottom:0;
  width:20px; display:flex; align-items:center; justify-content:center;
  margin:0; padding:0; border:0; background:none; color:var(--color-text-light); }
.pf-tree__fold { cursor:pointer; border-radius:var(--radius-sm); }
.pf-tree__fold:hover { color:var(--color-text); background:var(--color-secondary-100); }
.pf-tree__fold:focus-visible { outline:var(--stroke-2) solid var(--color-focus-ring);
  outline-offset:calc(-1 * var(--stroke-2)); }
.pf-tree__chev-slot { pointer-events:none; }
.pf-tree__chev { flex:none; transition:transform var(--duration-fast); }
.pf-tree__fold[aria-expanded="true"] .pf-tree__chev,
.pf-tree__row[aria-expanded="true"] > .pf-tree__chev-slot .pf-tree__chev { transform:rotate(90deg); }
@media (prefers-reduced-motion:reduce) { .pf-tree__chev { transition:none; } }

/* Choosing a record and unfolding it are two intentions, so they get two
   controls: a data table carries up to 75 fields, and selecting it must not mean
   tipping all of them into the rail. */
.pf-tree__split { position:relative; display:flex; align-items:center;
  border-radius:var(--radius-sm); }
.pf-tree__split:hover { background:var(--color-secondary-50); }
.pf-tree__split > .pf-tree__row { flex:1; min-width:0; }
.pf-tree__split > .pf-tree__row:hover { background:none; }

.pf-tree__ico { flex:none; width:var(--sp-4); height:var(--sp-4); color:var(--color-text-muted); }
.pf-tree__row.is-active .pf-tree__ico { color:var(--color-text-800); }
.pf-tree__label { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
/* This component uses a bare, right-aligned count; legacy explorers add brackets. */
.pf-tree__section .pf-tree__n::before,
.pf-tree__section .pf-tree__n::after { content:none; }
.pf-tree__n { flex:none; margin-left:auto; padding-left:var(--sp-2);
  font-size:var(--fs-xs); color:var(--color-text-muted); font-variant-numeric:tabular-nums; }
.pf-tree__row.is-active .pf-tree__n { color:var(--color-text-700); }

/* A finger needs a bigger target than a mouse (WCAG 2.5.8). The gutter grows
   with it, so the ladder still lands where the component computed it. */
@media (pointer:coarse) {
  .pf-tree__row { min-height:var(--target-min); padding-block:var(--sp-2-5); }
  .pf-tree__fold, .pf-tree__chev-slot { width:var(--target-min);
    left:calc(var(--pf-ind, var(--sp-5)) - var(--target-min)); }
}

/* Draw the selected branch guide on the component's own indentation axis. */
.pf-tree__section .pf-tree__children { position:relative; }
.pf-tree__section .pf-tree__children::before { content:none; }
.pf-tree__section .pf-tree__children:has(.is-active, .is-path)::after {
  content:""; position:absolute; z-index:var(--z-local-base);
  top:0; height:calc(100% - var(--control-size-sm) / 2);
  left:calc(var(--pf-ind, var(--sp-5)) - 10px);
  width:var(--stroke-1); background:var(--color-secondary-200); }
/* Rows cover the guide; fold controls remain clickable above rows. */
.pf-tree__section .pf-tree__row, .pf-tree__section .pf-tree__split {
  position:relative; z-index:var(--z-local-content); }
.pf-tree__section .pf-tree__fold { z-index:var(--z-local-control); }