/* ============================================================
   Org tree, indented outline.

   The previous tree was a centred graphical hierarchy: 2200px wide
   inside an 1134px scroller at 8 studios. Width there grows with the
   number of siblings, so at 500 studios it is a horizontal scroll of
   roughly 140,000px and no amount of styling saves it. This block
   replaces it with an indented outline, where width is a function of
   DEPTH, not of sibling count, and depth is fixed at six.

   Every selector is prefixed .otree. Nothing in app.css or v2.css is
   redefined, and the string "otree" appears in neither file.
   ============================================================ */

.otree {
  --otree-indent: 17px;
  --otree-row: 34px;
  font-size: 13px;
  position: relative;
}

/* the scroll container. Vertical only. A row is a flex line that
   shrinks its own text, so nothing here can ever scroll sideways. */
.otree__scroll {
  max-height: 560px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.otree__n {
  display: block;
}

/* ---------- the row ---------------------------------------- */

.otree__row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: var(--otree-row);
  padding: 4px 12px 4px 6px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  font: inherit;
  font-family: var(--font-ui);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.otree__row:hover {
  background: var(--surface-2);
}
.otree__n[tabindex="0"]:focus-visible .otree__row,
.otree__row:focus-visible {
  outline: 2px solid var(--plum);
  outline-offset: -2px;
}
.otree__n:focus {
  outline: none;
}
.otree__n:focus-visible > .otree__row {
  outline: 2px solid var(--plum);
  outline-offset: -2px;
}

/* the twisty. Always occupies its slot so labels line up whether or
   not a node has children. */
.otree__tw {
  flex: none;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}
.otree__tw svg {
  width: 12px;
  height: 12px;
  transition: transform 0.14s ease;
}
.otree__n[aria-expanded="true"] > .otree__row .otree__tw svg {
  transform: rotate(90deg);
}
.otree__tw--none svg {
  display: none;
}

.otree__row > .avatar {
  flex: none;
}

/* the leading glyph on a group or a studio row, where there is no
   avatar to carry the eye */
.otree__ic {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--muted);
}

.otree__nm {
  flex: 0 1 auto;
  min-width: 0;
  font-weight: 550;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.otree__rl {
  flex: 0 1 auto;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* pushed to the right edge so a column of counts reads as a column */
.otree__ct {
  flex: none;
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.otree__n[aria-expanded="true"] > .otree__row .otree__ct {
  background: none;
  border-color: transparent;
}

/* The destination. Expanding and opening are two different intentions,
   so they get two different targets: the row expands, this opens the
   thing the row names. Every node carries one, which is how the
   no dead ends rule is satisfied by construction rather than by
   somebody remembering to wire each row. */
.otree__go {
  flex: none;
  width: 22px;
  height: 22px;
  margin-left: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--muted);
  opacity: 0.4;
  cursor: pointer;
}
.otree__row:hover .otree__go,
.otree__n:focus-visible .otree__go {
  opacity: 1;
}
.otree__go:hover {
  background: var(--plum-050);
  color: var(--plum);
  opacity: 1;
}
.otree__go svg {
  width: 12px;
  height: 12px;
}
/* a leaf has no count badge to push it right, so it claims the gap */
.otree__n--person > .otree__row > .otree__go {
  margin-left: auto;
}

/* ---------- the levels ------------------------------------- */

.otree__n--root > .otree__row {
  min-height: 40px;
}
.otree__n--root > .otree__row .otree__nm {
  font-size: 14.5px;
  font-weight: 650;
}

.otree__n--studio > .otree__row .otree__nm {
  font-weight: 600;
}

/* a group heading is the quietest thing on the row, because it is a
   label for the people underneath rather than a person */
.otree__n--group > .otree__row .otree__nm {
  font-weight: 550;
  color: var(--ink-2);
  letter-spacing: 0.01em;
}

.otree__n--off > .otree__row .otree__nm,
.otree__n--off > .otree__row .otree__rl {
  color: var(--muted);
}
.otree__n--off > .otree__row .avatar {
  opacity: 0.55;
}

/* ---------- the group container and its spine -------------- */

.otree__g {
  display: none;
  position: relative;
}
.otree__n[aria-expanded="true"] > .otree__g {
  display: block;
}

/* the spine is drawn on the group, one line per level, which is why
   depth never changes the width of anything */
.otree__g::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 6px;
  left: var(--otree-spine, 19px);
  border-left: 1px solid var(--line-2);
}

/* ---------- search ------------------------------------------ */

.otree__hit > .otree__row {
  background: var(--plum-050);
}
.otree__hit > .otree__row .otree__nm {
  color: var(--plum);
}
.otree__n--dim {
  display: none;
}

.otree__more {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 4px 12px 4px 6px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--plum);
  cursor: pointer;
}
.otree__more:hover {
  background: var(--plum-050);
}

.otree__none {
  padding: 22px 16px;
  font-size: 13px;
  color: var(--muted);
}

/* ---------- the search field in the card head --------------- */

.otree__find {
  flex: 1;
  min-width: 0;
  max-width: 320px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 7px 11px;
}

/* ---------- phone ------------------------------------------- */

@media (max-width: 720px) {
  .otree {
    --otree-indent: 12px;
  }
  .otree__rl {
    display: none;
  }
  .otree__scroll {
    max-height: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .otree__tw svg {
    transition: none;
  }
}