.tools-map, .tools-map__dialog { --tm-paper: var(--paper); --tm-ink: var(--ink); --tm-blue: var(--blue); --tm-line: var(--line); color: var(--tm-ink); }
.map-preview { margin: 24px 0; border-block: 1px solid var(--line); }
.map-preview > summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 18px 0; gap: 16px; font-size: 15px; font-weight: 600; list-style: none; }
.map-preview > summary::-webkit-details-marker { display: none; }
.map-preview > summary .expand-mark { font-size: 22px; }
.map-preview:not(.motion-disclosure)[open] > summary .expand-mark { font-size: 0; }
.map-preview:not(.motion-disclosure)[open] > summary .expand-mark::after { content: '−'; font: 22px var(--mono); }
.map-preview .tools-map { margin-bottom: 20px; }
.tools-map__frame { border: 1px solid var(--tm-line); background: var(--tm-paper); overflow: hidden; }
.tools-map__toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px 16px; padding: 12px; border-bottom: 1px solid var(--tm-line); }
.tools-map__title { font: 500 12px/1.4 var(--mono); color: var(--muted); }
.tools-map__controls { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.tools-map__control { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid transparent; background: transparent; color: var(--tm-blue); cursor: pointer; font: 500 12px/1 var(--mono); transition: background-color 150ms ease, transform 150ms cubic-bezier(.25,.46,.45,.94); }
.tools-map__control:first-child, .tools-map__control:nth-child(2) { font: 400 22px/1 var(--mono); }
.tools-map__control--expand { border-color: var(--tm-line); margin-left: 4px; }
.tools-map__control:active { transform: scale(.97); background: var(--map-active); }
.tools-map__control[aria-pressed="true"] { background: var(--map-active); }
.tools-map__control[hidden] { display: none; }
.tools-map__control:focus-visible, .map-preview > summary:focus-visible { outline: 2px solid var(--tm-blue); outline-offset: 2px; }
.tools-map__viewport { height: 380px; position: relative; overflow: hidden; isolation: isolate; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; background: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px), var(--tm-paper); background-size: 24px 24px; }
.tools-map__viewport:focus-visible { outline: 2px solid var(--tm-blue); outline-offset: -3px; }
.tools-map__viewport.is-dragging { cursor: grabbing; }
.tools-map__viewport::after { content: ''; position: absolute; z-index: 5; pointer-events: none; inset: 0; background: linear-gradient(90deg, var(--map-fade), transparent 22px, transparent calc(100% - 22px), var(--map-fade)); }
.tools-map__scene { position: absolute; inset: 0 auto auto 0; transform-origin: 0 0; contain: layout paint style; will-change: transform; }
.tools-map__connections { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.tools-map__path, .tools-map__path-underlay { fill: none; vector-effect: non-scaling-stroke; }
.tools-map__path-underlay { stroke: var(--tm-paper); stroke-width: 5px; }
.tools-map__path { stroke: var(--map-wire); stroke-width: 1px; }
.tools-map__edge.is-secondary .tools-map__path { stroke-dasharray: 3 5; opacity: .5; }
.tools-map__edge.is-active .tools-map__path { stroke: var(--tm-blue); stroke-width: 1.4px; }
.tools-map__arrowhead { fill: var(--tm-blue); }
.tools-map__edge-label { display: none; }
.tools-map__signal { fill: oklch(65% .14 65); stroke: var(--tm-paper); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.tools-map__node { position: absolute; display: flex; flex-direction: column; justify-content: flex-start; padding: 22px; border: 1px solid var(--map-node-line); background: var(--map-node); color: var(--tm-ink); text-align: left; font: inherit; cursor: pointer; overflow: hidden; z-index: 1; border-radius: 0; -webkit-tap-highlight-color: transparent; }
.tools-map__node.is-selected { outline: 2px solid var(--tm-blue); outline-offset: 4px; z-index: 2; }
.tools-map__node:focus-visible { outline: 3px solid var(--tm-blue); outline-offset: 5px; }
.tools-map__node-title { display: block; font-size: 22px; line-height: 1.3; font-weight: 650; letter-spacing: -.025em; margin: 8px 0 12px; }
.tools-map__node-eyebrow { font: 11px/1.5 var(--mono); color: var(--tm-blue); }
.tools-map__node-summary { font-size: 15px; line-height: 1.5; }
.tools-map__node-points, .tools-map__node-secret { display: none; }
.tools-map__node.is-locked { pointer-events: none; contain: paint; border-color: var(--line); background: var(--map-locked); }
.tools-map__node.is-locked > * { display: none; }
.tools-map__node.is-locked::before { content: ''; position: absolute; inset: 24px; background: linear-gradient(oklch(70% .02 263 / .35), oklch(70% .02 263 / .35)) 0 0 / 68% 9px no-repeat, linear-gradient(oklch(70% .02 263 / .24), oklch(70% .02 263 / .24)) 0 24px / 84% 6px no-repeat, linear-gradient(oklch(70% .02 263 / .24), oklch(70% .02 263 / .24)) 0 40px / 55% 6px no-repeat; filter: blur(4px); }
.tools-map[data-map="project"] .tools-map__node, .tools-map__dialog .tools-map__node[data-node^="project-"] { display: grid; place-content: center; }
.tools-map__node[data-node^="project-"] .tools-map__node-title { font-size: 20px; line-height: 1.4; text-wrap: balance; margin: 0; }
.tools-map__node[data-node^="project-"] .tools-map__node-eyebrow, .tools-map__node[data-node^="project-"] .tools-map__node-summary { display: none; }
.tools-map__detail { display: grid; grid-template-columns: 100px 1fr; align-items: baseline; gap: 12px 20px; padding: 20px; border-top: 1px solid var(--tm-line); background: var(--map-detail); }
.tools-map__detail-title { font-size: 18px; line-height: 1.4; letter-spacing: -.025em; }
.tools-map__detail-summary { margin: 0; font-size: 13px; line-height: 1.6; max-width: 65ch; }
.tools-map__footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 12px 16px; border-top: 1px solid var(--tm-line); font: 10px/1.5 var(--mono); color: var(--muted); }
.tools-map__zoom { color: var(--tm-blue); margin-left: auto; font-variant-numeric: tabular-nums; }
.tools-map__coordinate { color: var(--muted); }
.tools-map__dialog { max-width: none; max-height: none; width: 100dvw; height: 100dvh; margin: 0; padding: 0; border: 0; color: var(--tm-ink); background: var(--paper); }
.tools-map__dialog::backdrop { background: oklch(20% .02 263 / .25); }
.tools-map__dialog .tools-map__frame { height: 100%; display: grid; grid-template-rows: auto minmax(0,1fr) auto auto; border: none; }
.tools-map__dialog .tools-map__viewport { height: auto; min-height: 0; touch-action: none; }
.tools-map__dialog .tools-map__toolbar { padding-top: max(12px, env(safe-area-inset-top)); padding-inline: max(16px, env(safe-area-inset-left)); }
.tools-map__dialog .tools-map__footer { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
@media (hover: hover) and (pointer: fine) { .tools-map__control:hover { background: var(--map-hover); } .tools-map__node:hover { border-color: var(--tm-blue); } }
@media (max-width: 720px) { .tools-map__viewport { height: 340px; } .tools-map__toolbar { padding: 10px; gap: 6px; } .tools-map__title { display: none; } .tools-map__controls { width: 100%; justify-content: space-between; gap: 2px; } .tools-map__control { padding-inline: 9px; } .tools-map__detail { grid-template-columns: 1fr; padding: 16px; gap: 8px; } .tools-map__detail-title { font-size: 17px; } .tools-map__footer { font-size: 9px; padding: 10px; } .tools-map__hint { flex-basis: 100%; } .tools-map__dialog .tools-map__detail-summary { max-height: 4.8em; overflow-y: auto; } }
@media (prefers-reduced-motion: reduce) { .tools-map__control { transition: none; } .tools-map__signal { display: none; } }
@media (forced-colors: active) { .tools-map__frame, .tools-map__node, .tools-map__control { border: 1px solid CanvasText; } .tools-map__path { stroke: CanvasText; } .tools-map__arrowhead { fill: CanvasText; } }