/* Tree overview minimap (#430).

   Sits directly above the zoom/centre cluster in the canvas's bottom-right
   corner — the viewport region (BUILD-NOTES → "Where controls live"), because
   an overview moves the *view*, never the family. It is stacked above the
   cluster rather than beside it so it never competes for width with the
   bottom-left FAB stack on a 375px phone.

   The vertical offset is the cluster's own height: three buttons + two 4px
   gaps + 4px padding + 1px border a side — 126px at the desktop 36px button,
   150px at the 44px touch button. A custom property keeps the sum in one
   place; the cluster is a fixed three-button set, so this is a constant, not
   a guess. */
.tree-container {
  --tree-controls-height: 126px;
}

.tree-minimap {
  position: absolute;
  right: var(--space-md);
  /* Above the zoom cluster and the quick-find row (#490), which stacks between
     them — the map is the top of the corner navigation stack. */
  bottom: calc(
    var(--space-md) + var(--tree-controls-height) + var(--space-xs)
    + var(--tree-quickfind-height, 0px) + var(--space-xs)
  );
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-xxs);
  padding: var(--space-xxs);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  z-index: var(--z-base);
}

.tree-minimap[hidden] {
  display: none;
}

/* Header row: what the silhouette is, plus the way to shut it. */
.tree-minimap__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  width: 100%;
  padding-left: var(--space-xs);
}

/* The house display voice — Fraunces italic, sentence case — not the
   uppercase letter-spaced caption every dashboard uses. The app reserves
   small-caps for progress lines, never for naming a thing. */
.tree-minimap__label {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Collapsed, the button IS the card — the label would double its width for a
   control the icon already explains. */
.tree-minimap--collapsed .tree-minimap__label {
  display: none;
}

.tree-minimap--collapsed .tree-minimap__header {
  padding-left: 0;
}

/* Collapse control. Expanded it is a quiet chevron tucked over the map;
   collapsed it becomes the whole card, wearing the same tile treatment as
   `.tree-controls__btn` so the two clusters read as one family of viewport
   controls. */
.tree-minimap__toggle {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.tree-minimap__toggle .icon,
.tree-minimap__toggle .icon svg {
  display: block;
  width: 16px;
  height: 16px;
}

.tree-minimap__toggle:hover,
.tree-minimap__toggle:focus-visible {
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
}

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

.tree-minimap__toggle:active {
  transform: scale(0.92);
}

/* Collapsed: the chevron's row is gone, so the button carries the card. */
.tree-minimap--collapsed .tree-minimap__toggle {
  width: 36px;
  height: 36px;
}

.tree-minimap--collapsed .tree-minimap__toggle .icon,
.tree-minimap--collapsed .tree-minimap__toggle .icon svg {
  width: 20px;
  height: 20px;
}

.tree-minimap--collapsed .tree-minimap__canvas {
  display: none;
}

.tree-minimap__canvas {
  display: block;
  width: 168px;
  height: 112px;
  border-radius: var(--radius-md);
  background-color: var(--color-bg);
  /* The same brass dot-grid the canvas itself wears, at a smaller pitch —
     the map reads as a scaled-down piece of the tree, not a foreign panel. */
  background-image: radial-gradient(circle at 1px 1px, rgba(13, 94, 74, 0.07) 1px, transparent 0);
  background-size: 8px 8px;
  cursor: pointer;
  /* All pointer input belongs to the map's own drag-to-jump; without this a
     touch drag scrolls or pinch-zooms the page instead. */
  touch-action: none;
}

.tree-minimap__canvas:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

/* One sage mark per person — the family's shape, not its detail. Softened,
   but only to 0.7: below that the marks fall under UI/UX RULE 6's 3:1 floor
   for meaningful UI, and the silhouette is the whole point of the card. */
.tree-minimap__dot {
  fill: var(--color-accent);
  opacity: 0.7;
}

/* A quick-find hit (#490). The same warm terracotta as the viewport frame, so
   "what I searched for" and "where I'm looking" read as one language against
   the sage family. A dot is 2.5×1.5 map units at its floor — far too small to
   change colour convincingly — so the stroke does the work: it fattens the
   mark to roughly twice its size without touching the silhouette's geometry. */
.tree-minimap__dot--marked {
  fill: var(--color-highlight);
  opacity: 1;
  stroke: var(--color-highlight);
  stroke-width: 1.6;
}

/* The visible canvas. A warm terracotta frame over a barely-there wash: it has
   to be findable at a glance without hiding the silhouette underneath. */
.tree-minimap__window {
  fill: var(--color-highlight);
  fill-opacity: 0.12;
  stroke: var(--color-highlight-hover);
  stroke-width: 1.5;
  pointer-events: none;
}

/* The on-canvas modes each pin their own bar to the bottom edge and hide the
   zoom cluster; the map goes with it, for the same reason — while arranging,
   painting, or watching the years, the bar is the only bottom-edge UI. */
.mv-arranging .tree-minimap,
.mv-painting .tree-minimap,
.mv-time-travelling .tree-minimap {
  display: none;
}

/* Touch-device-only sizing. See css/layout.css for the strategy note. */
@media (hover: none) and (pointer: coarse) {
  .tree-container {
    --tree-controls-height: 150px;
  }

  .tree-minimap__toggle,
  .tree-minimap--collapsed .tree-minimap__toggle {
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    touch-action: manipulation;
  }
}

/* Narrow viewports: a smaller card, so an opened map still leaves most of the
   canvas visible behind it. */
@media (max-width: 600px) {
  .tree-minimap__canvas {
    width: 132px;
    height: 88px;
  }
}

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

  .tree-minimap__toggle:active {
    transform: none;
  }
}