/* Troiana — interactive concept map.
   Progressive enhancement of a nested <ul>: without JS the list renders as a
   plain outline (crawlable, readable); with JS it becomes a pannable,
   zoomable, collapsible node graph. Scoped to pages that load this file. */

.tmap { position: relative; }

/* The map wants every pixel of the column it can get. */
.prose .figure--map .figure__frame { padding: 16px; background: var(--canvas); }

/* -------------------- TOOLBAR -------------------- */
.tmap__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.tmap__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--graphite);
}
.tmap__tools { display: flex; align-items: center; gap: 6px; }
.tmap__btn {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--graphite);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  padding: 7px 13px;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.tmap__btn:hover { color: var(--ink); border-color: var(--wire-stroke); }
.tmap__btn:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.tmap__btn--icon { width: 32px; padding: 7px 0; text-align: center; font-size: 13px; line-height: 1; }

/* -------------------- STAGE -------------------- */
.tmap__stage {
  position: relative;
  height: clamp(460px, 64vh, 680px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background-color: var(--canvas);
  background-image: radial-gradient(var(--hairline) 1px, transparent 1px);
  background-size: 24px 24px;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y; /* vertical touch still scrolls the page */
}
.tmap__stage.is-panning { cursor: grabbing; }
.tmap__stage:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

.tmap__canvas {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  will-change: transform;
}

/* Beat .prose .figure svg { width:100%; height:auto } — this layer is positioned. */
.prose .figure .tmap__links,
.tmap__links {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: visible;
  pointer-events: none;
}
.tmap__link {
  fill: none;
  stroke: var(--wire-stroke);
  stroke-width: 1.25;
  opacity: 0.75;
  transition: stroke 0.18s ease, opacity 0.18s ease;
}
.tmap__link.is-lit { stroke: var(--signal); opacity: 1; stroke-width: 1.6; }

/* -------------------- NODES -------------------- */
.tmap__node {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.tmap__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  background: var(--canvas);
  color: var(--ink);
  cursor: default;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
button.tmap__chip, a.tmap__chip { cursor: pointer; }
button.tmap__chip:hover, a.tmap__chip:hover { border-color: var(--wire-stroke); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); }
.tmap__chip:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* Depth styling: root = ink, branches = signal, mid = paper card, leaves = quiet. */
.tmap__node[data-depth="0"] .tmap__chip {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--canvas);
  font-size: 15px;
  font-weight: 500;
  padding: 12px 18px;
}
.tmap__node[data-depth="1"] .tmap__chip {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--canvas);
  font-weight: 500;
}
.tmap__node[data-depth="1"] .tmap__chip:hover { box-shadow: 0 4px 16px rgba(46, 75, 255, 0.28); }
.tmap__node[data-depth="2"] .tmap__chip { background: var(--canvas); color: var(--ink); }
.tmap__node[data-depth="3"] .tmap__chip {
  background: var(--paper);
  color: var(--graphite);
  font-size: 13px;
  padding: 8px 12px;
}

/* Caret + hidden-child count on collapsible nodes. */
.tmap__caret {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  opacity: 0.65;
  transition: transform 0.22s ease;
}
.tmap__chip[aria-expanded="true"] .tmap__caret { transform: rotate(45deg); }
.tmap__count {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1;
  padding: 3px 6px;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.06);
  color: inherit;
  opacity: 0.75;
}
.tmap__node[data-depth="0"] .tmap__count,
.tmap__node[data-depth="1"] .tmap__count { background: rgba(255, 255, 255, 0.22); }

/* "Jump to the section" affordance on mapped nodes. */
.tmap__jump {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: var(--canvas);
  color: var(--graphite);
  font-size: 12px;
  text-decoration: none;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.18s ease, transform 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.tmap__node:hover .tmap__jump,
.tmap__node:focus-within .tmap__jump { opacity: 1; transform: scale(1); }
.tmap__jump:hover { color: var(--signal); border-color: var(--signal-soft); }
.tmap__jump:focus-visible { opacity: 1; transform: scale(1); outline: 2px solid var(--signal); outline-offset: 2px; }

/* Node that links straight to a section (leaf). */
a.tmap__chip--link:hover { color: var(--signal-ink); border-color: var(--signal-soft); }

/* -------------------- FULLSCREEN -------------------- */
body.tmap-locked { overflow: hidden; }
.tmap.is-full {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  background: var(--canvas);
  padding: clamp(16px, 3vw, 32px);
}
.tmap.is-full .tmap__stage {
  flex: 1 1 auto;
  height: auto;
  border-radius: var(--radius-md);
}
.tmap.is-full .tmap__eyebrow { display: block; }

.tmap__hint {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--muted-word);
}

/* -------------------- NO-JS FALLBACK + NARROW-SCREEN OUTLINE -------------------- */
.tmap__outline { margin: 0; }
.tmap.is-live .tmap__outline { display: none; }

/* Without JS, and on phones, the stage is just a box around a nested list. */
.tmap:not(.is-live) .tmap__hint { display: none; }
.tmap:not(.is-live) .tmap__stage {
  height: auto;
  cursor: auto;
  background-image: none;
  padding: var(--space-4);
  overflow: visible;
  touch-action: auto;
}
.tmap:not(.is-outline) .tmap__bar { display: flex; }
.tmap:not(.is-live):not(.is-outline) .tmap__bar { display: none; }

/* Interactive outline (phones): same tree, collapsible, no canvas. */
.tmap.is-outline .tmap__outline,
.tmap.is-outline .tmap__outline ul { list-style: none; padding: 0; margin: 0; }
.tmap.is-outline .tmap__outline ul {
  margin-left: 10px;
  padding-left: 14px;
  border-left: 1px solid var(--hairline);
}
.tmap.is-outline .tmap__outline li {
  position: relative;
  padding: 3px 0;
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink);
}
.tmap.is-outline .tmap__outline li > ul { display: none; }
.tmap.is-outline .tmap__outline li.is-open > ul { display: block; }
.tmap.is-outline .tmap__outline li > a { color: var(--signal-ink); text-decoration: none; border-bottom: 1px solid var(--hairline); }
.tmap.is-outline .tmap__outline li > a:hover { border-color: var(--signal-soft); }

/* Pan, zoom and fullscreen mean nothing without a canvas. */
.tmap.is-outline [data-map-action="fit"],
.tmap.is-outline [data-map-action="full"],
.tmap.is-outline [data-map-action="zoom-in"],
.tmap.is-outline [data-map-action="zoom-out"] { display: none; }

/* The twisty that opens a level. */
.tmap__twist {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  vertical-align: baseline;
  margin-right: 6px;
  padding: 4px 7px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--graphite);
  cursor: pointer;
}
.tmap__twist:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.tmap__twist[aria-expanded="true"] { background: var(--signal); border-color: var(--signal); color: var(--canvas); }
.tmap__twist[aria-expanded="true"] .tmap__caret { transform: rotate(45deg); }
.tmap.is-outline .tmap__outline > li > a,
.tmap.is-outline .tmap__outline > li > span { font-weight: 500; }

@media (max-width: 720px) {
  .tmap__stage { height: clamp(380px, 56vh, 480px); }
  .tmap__eyebrow { display: none; }
  .tmap__tools { width: 100%; justify-content: space-between; }
  .tmap__chip { font-size: 13px; padding: 9px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .tmap__chip, .tmap__caret, .tmap__jump, .tmap__link { transition: none; }
}