/* Trace chip — the on-canvas breadcrumb while a sticky lineage trace is
   engaged. See js/trace-chip.js / issues #115 (born as a toolbar chip),
   #250 (moved onto the tree canvas).

   Pinned to the tree canvas's top-left corner as an absolute overlay: in
   the toolbar action group it collapsed behind the hamburger on phones,
   leaving an engaged trace with no visible indicator and no way out. The
   canvas overlay stays visible at every viewport width, clear of the FAB
   stack (bottom-left) and the zoom controls (bottom-right). Brass tinting
   + pill silhouette mirror .staging-chip (top-right of the same canvas) so
   trace reads as the same family of session-state indicators. Split into a body button
   (avatar + label, primary click = re-centre) and a dismiss button (`×`,
   clears the trace). The dismiss is a separate child element so its hit
   area can be tighter and its click never accidentally fires the
   re-centre. */

.trace-chip {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  z-index: var(--z-base);
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 2 * var(--space-md));
  border-radius: var(--radius-pill);
  background-color: var(--color-highlight-soft);
  color: var(--color-highlight-hover);
  border: 1px solid var(--color-highlight);
  box-shadow: var(--shadow-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  overflow: hidden;
  /* Subtle settle-in animation when the chip mounts. Honours
     prefers-reduced-motion via the at-rule below. */
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.trace-chip__body {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xxs) var(--space-xs) var(--space-xxs) var(--space-xxs);
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.trace-chip__body:hover {
  background-color: var(--color-surface);
}

.trace-chip__body:focus-visible {
  outline: 2px solid var(--color-highlight);
  outline-offset: -2px;
}

/* Avatar circle on the left. Mirrors panels.js's .panel__avatar fallback
   pattern: photo as background-image (set asynchronously through
   MV_Drive.applyImageBackground); initials sit underneath until the
   image lands. */
.trace-chip__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--color-surface);
  border: 1px solid var(--color-highlight);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 0.7rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-highlight-hover);
  letter-spacing: 0;
  text-transform: uppercase;
  flex-shrink: 0;
}

.trace-chip__label {
  white-space: nowrap;
  max-width: 16ch;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Kinship toggle (#126). A self-contained pill button inset between the
   body and the dismiss. It adopts the app's teal action colour
   (--color-accent) rather than the chip's brass, so the one *interactive*
   control reads as distinct from the brass session-state chip around it
   (#143; the old transparent + border-left segment was invisible-by-
   default). OFF is an outlined pill — white fill, teal border (~6:1
   against the pale-brass chip body, well past UI/UX RULE 6's 3:1) + teal
   label. ON fills solid teal with a surface-coloured label and an inset
   "pressed-in" shadow so the engaged state reads as actively held. Focus
   uses a *brass* ring — the opposite signature colour from the teal
   border — so the focus indicator can't be mistaken for the resting
   outline. aria-pressed drives the active-state styling so the visual +
   a11y state stay in sync. */
.trace-chip__kinship {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  margin: 2px;
  padding: var(--space-xxs) var(--space-xs);
  background-color: var(--color-surface);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-pill);
  color: var(--color-accent);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast),
    border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.trace-chip__kinship:hover {
  background-color: var(--color-accent-soft);
  border-color: var(--color-accent-hover);
  color: var(--color-accent-hover);
}

.trace-chip__kinship:focus-visible {
  outline: 2px solid var(--color-highlight);
  outline-offset: -3px;
}

.trace-chip__kinship[aria-pressed="true"] {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-surface);
  box-shadow: var(--shadow-inset-pressed);
}

.trace-chip__kinship[aria-pressed="true"]:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

.trace-chip__kinship-glyph {
  font-size: 1.05em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.trace-chip__dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-left: 1px solid var(--color-highlight);
  color: var(--color-highlight-hover);
  font-size: var(--font-size-md);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  align-self: stretch;
}

.trace-chip__dismiss:hover {
  background-color: var(--color-highlight);
  color: var(--color-surface);
}

.trace-chip__dismiss:focus-visible {
  outline: 2px solid var(--color-highlight);
  outline-offset: -2px;
}

/* On narrow viewports the kinship toggle goes glyph-only — hide the text
   but keep the checkbox glyph so the affordance stays. The label keeps its
   full 16ch budget: unlike the chip's old toolbar home (where it shared the
   row with Export / Sign out and clamped to 8ch), the canvas overlay has
   the whole viewport width to itself (#250). */
@media (max-width: 640px) {
  .trace-chip__kinship-text {
    display: none;
  }
}

/* Touch targets ≥ 44px per CLAUDE.md UI/UX RULE 2 — applied only on
   coarse-pointer devices so the compact desktop pill keeps its tight
   footprint. */
@media (hover: none) and (pointer: coarse) {
  .trace-chip__body {
    min-height: var(--touch-target-min);
    padding: var(--space-xs) var(--space-sm);
  }
  /* #147 — the kinship toggle was the one chip control still ~24px tall on
     touch. Same 44px floor as its siblings; the min-width keeps the ≤640px
     glyph-only pill comfortably tappable too. */
  .trace-chip__kinship {
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
    justify-content: center;
  }
  .trace-chip__dismiss {
    width: var(--touch-target-min);
    height: auto;
    min-height: var(--touch-target-min);
  }
}

@media (prefers-reduced-motion: reduce) {
  .trace-chip,
  .trace-chip__body,
  .trace-chip__kinship,
  .trace-chip__dismiss {
    transition: none;
  }
}