/* Tree switcher (#190) — the active tree's name in the toolbar doubles as a
   workspace-style switcher. Heritage palette tokens only. */

.tree-switcher {
  position: relative;
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
}

/* The trigger reads as the toolbar title (serif), with a chevron that signals
   it opens a menu. */
.tree-switcher__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  max-width: 100%;
  padding: var(--space-xxs) var(--space-xs);
  margin: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  font-family: var(--font-serif);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.tree-switcher__trigger:hover {
  background-color: var(--color-surface-alt);
}

/* Press feedback (RULE 9) — the surface deepens a touch while the chevron dips. */
.tree-switcher__trigger:active {
  background-color: var(--color-bg-tint);
}

.tree-switcher__trigger:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.tree-switcher__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The chevron leads the trigger's liveliness (#314): calm at rest, it warms to
   the brand green and flips on open. Resting tone is --color-text-muted (not the
   old faint, which fell under 3:1 on the linen toolbar — RULE 6). 0.9em, not
   the old 0.7em — at 0.7em the ▾ rendered as a near-invisible dot and the
   switcher read as a static title, not a menu (#391). */
.tree-switcher__chevron {
  flex-shrink: 0;
  font-size: 0.9em;
  line-height: 1;
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

/* Plush flip + a tiny press dip, only when motion is welcome (RULES 9, 10). The
   open-angle rotation itself lives outside this block, so reduced motion still
   snaps the chevron to the open state — just without the sweep. */
@media (prefers-reduced-motion: no-preference) {
  .tree-switcher__chevron {
    /* Explicit 200ms + the soft-decelerate bezier — --transition-base already
       carries its own `ease`, so pairing the two would be two timing functions
       in one transition (invalid, poisons the shorthand). */
    transition: transform 200ms var(--ease-out-soft),
                color var(--transition-fast);
  }
  .tree-switcher__trigger:active .tree-switcher__chevron {
    transform: scale(0.82);
  }
  .tree-switcher__trigger[aria-expanded="true"]:active .tree-switcher__chevron {
    transform: rotate(180deg) scale(0.82);
  }
}

/* Warms toward the brand green as the trigger is engaged — hover or keyboard
   focus — so it reads alive, not a flat 1995 glyph (RULE 13). The trigger keeps
   its own focus ring (RULE 5) untouched. */
.tree-switcher__trigger:hover .tree-switcher__chevron,
.tree-switcher__trigger:focus-visible .tree-switcher__chevron {
  color: var(--color-accent);
}

/* Open — flip to point up and hold the accent hue, tied to the trigger's
   aria-expanded (the menu's open state, set in js/tree-switcher.js). */
.tree-switcher__trigger[aria-expanded="true"] .tree-switcher__chevron {
  transform: rotate(180deg);
  color: var(--color-accent);
}

/* ---- menu --------------------------------------------------------------- */

.tree-switcher__menu {
  position: absolute;
  top: calc(100% + var(--space-xxs));
  left: 0;
  z-index: 60; /* above the toolbar (z 10) + panel (20), below modals (100) */
  min-width: 240px;
  max-width: min(320px, calc(100vw - 2 * var(--space-md)));
  padding: var(--space-xs);
  background-color: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.tree-switcher__section {
  padding: var(--space-xs) var(--space-sm) var(--space-xxs);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.tree-switcher__item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.tree-switcher__item:hover {
  background-color: var(--color-surface-alt);
}

.tree-switcher__item:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.tree-switcher__item--active {
  color: var(--color-accent);
  font-weight: var(--font-weight-medium);
}

.tree-switcher__check {
  flex-shrink: 0;
  width: 1.1em;
  text-align: center;
  color: var(--color-accent);
}

/* Label + optional sub-line ("Shared by …") stack vertically; the check + forget
   controls stay centred against the block. */
.tree-switcher__item-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.tree-switcher__item-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tree-switcher__item-sublabel {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-size-xs);
  /* Stays faint even on the active (accent-coloured) row — it's a who-shared-it
     hint, not the title. */
  color: var(--color-text-faint);
}

.tree-switcher__forget {
  flex-shrink: 0;
  padding: 0 var(--space-xxs);
  color: var(--color-text-faint);
  font-size: var(--font-size-md);
  line-height: 1;
  border-radius: var(--radius-sm);
  opacity: 0;
  cursor: pointer;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}

.tree-switcher__item:hover .tree-switcher__forget,
.tree-switcher__item:focus-within .tree-switcher__forget {
  opacity: 1;
}

.tree-switcher__forget:hover {
  color: var(--color-error);
}

/* Own-tree rename / delete controls (#60) — same subtle, hover-revealed pattern
   as the shared rows' forget. Two can sit on a row (rename + delete). */
.tree-switcher__manage {
  flex-shrink: 0;
  padding: 0 var(--space-xxs);
  color: var(--color-text-faint);
  font-size: var(--font-size-sm);
  line-height: 1;
  border-radius: var(--radius-sm);
  opacity: 0;
  cursor: pointer;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}

.tree-switcher__item:hover .tree-switcher__manage,
.tree-switcher__item:focus-within .tree-switcher__manage {
  opacity: 1;
}

.tree-switcher__manage:hover {
  color: var(--color-accent);
}

/* The delete control (the second manage glyph) warms to the error hue, marking
   it as the destructive one. */
.tree-switcher__manage:last-child:hover {
  color: var(--color-error);
}

.tree-switcher__manage:focus-visible {
  outline: none;
  opacity: 1;
  box-shadow: 0 0 0 2px var(--color-accent-soft);
}

.tree-switcher__divider {
  height: 1px;
  margin: var(--space-xs) var(--space-xxs);
  background-color: var(--color-border);
}

.tree-switcher__action {
  color: var(--color-accent);
  font-weight: var(--font-weight-medium);
}

.tree-switcher__action .tree-switcher__check {
  font-size: var(--font-size-sm);
}

/* Touch: comfortable hit areas, and the forget control always visible (no
   hover on coarse pointers). */
@media (hover: none) and (pointer: coarse) {
  .tree-switcher__trigger,
  .tree-switcher__item {
    min-height: var(--touch-target-min);
  }
  .tree-switcher__forget,
  .tree-switcher__manage {
    opacity: 1;
    padding: 0 var(--space-xs);
  }
}