/* Agents › Map: a graph of threads (rectangles) and the agents in them, no time axis (Timeline has that). a2ea0's file; tokens from tokens.css only. */
.map{container-type:inline-size}
.map-tb{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);padding:var(--s3) var(--s5);border-bottom:1px solid var(--line)}
.map-tb .map-search{width:240px}
.map-sum{margin-left:auto;font-size:var(--fs-small);color:var(--ink-2)}
.map-sum b{color:var(--ink);font-weight:var(--w-bold)}
.map-bd{display:flex;flex-wrap:wrap;align-items:flex-start}
.map-chart{flex:999 1 640px;min-width:0;padding:var(--s4) var(--s5) var(--s5);display:flex;flex-direction:column;gap:var(--s3)}
.map-side{flex:0 1 352px;min-width:0;align-self:stretch;padding:var(--s5) var(--s5);background:var(--surface);border-left:1px solid var(--line);display:flex;flex-direction:column;gap:22px}


.lane-sw{width:8px;height:8px;border-radius:2px;background:var(--c);flex:none}


.map-rp{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s3) var(--s2) var(--s2);border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface)}
.map-rp-t{position:relative;flex:1;height:32px}
.map-rp-t::before{content:"";position:absolute;inset:15px 0 auto;height:3px;border-radius:2px;background:var(--sunken)}
.map-rp-f{position:absolute;left:0;top:15px;height:3px;border-radius:2px;background:var(--ink-3)}
.map-rp-h{position:absolute;top:8px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--surface);border:2px solid var(--ink);cursor:grab}
.map-rp-h[data-cut]{border-color:var(--accent)}

.figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--line);overflow:hidden}
.fig{padding:var(--s3) 14px;background:var(--surface);display:flex;flex-direction:column;gap:2px}
.fig>span{font-size:var(--fs-meta);color:var(--ink-3)}
.fig>b{font-size:24px;font-weight:var(--w-bold);line-height:var(--lh-tight)}
.fig>small{font-size:var(--fs-meta);color:var(--ink-2)}
.map-row{display:flex;align-items:center;gap:10px;min-height:36px;padding:6px 0;border-top:1px solid var(--line);font-size:var(--fs-small);color:var(--ink-2)}
.map-row:first-child{border-top:0}
.map-row>.r{margin-left:auto;color:var(--ink-3);font-size:var(--fs-meta)}
.map-bar{display:grid;grid-template-columns:120px minmax(0,1fr) 52px;align-items:center;gap:10px;height:28px;font-size:var(--fs-small)}
.map-bar>em{height:6px;border-radius:3px;background:var(--sunken);overflow:hidden}
.map-bar>em>i{display:block;height:100%;background:var(--ink-3)}
.map-bar>span{text-align:right;font-weight:var(--w-med)}
.map-now{padding:10px var(--s3);border-radius:var(--r-m);background:var(--sunken);font-size:var(--fs-small)}
.map-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:var(--s9) var(--s5);text-align:center;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface)}

@container (max-width:760px){
  .map-tb{padding:var(--s3);gap:var(--s2)}
  .map-tb .seg{flex:1 1 100%}.map-tb .seg button{flex:1;height:32px}
  .map-tb .map-search{flex:1;width:auto}.map-sum{display:none}
  .map-side{order:-1;flex:1 1 100%;padding:var(--s4) var(--s3);border-left:0;border-bottom:1px solid var(--line);gap:14px}
  .map-side [data-more]{display:none}
  .map-chart{padding:var(--s3)}
}

/* ---- beyond the handoff block ---- */
.map-search{position:relative;display:grid}
.map-search>.ic{position:absolute;left:10px;top:50%;width:16px;height:16px;margin-top:-8px;color:var(--ink-3);pointer-events:none}
.map-search>.input{padding-left:32px}
.map-sw{display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--fs-small);color:var(--ink-2);cursor:pointer}
.lane-sw[data-tone=other]{background:var(--ink-3)}
.map-rp-t{cursor:pointer;touch-action:none}
.map-rp-h:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.map-rp-c{min-width:64px;font-size:var(--fs-meta);color:var(--ink-3);text-align:right;white-space:nowrap}
.map-rp-c[data-cut]{color:var(--accent-ink);font-weight:var(--w-bold)}
.map-sh{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3)}
.map-sh h2{margin:0;font-size:var(--fs-body);font-weight:var(--w-bold)}
.map-sh small{font-size:var(--fs-meta);color:var(--ink-3)}
.map-sec{display:flex;flex-direction:column}
.map-sec>h3{margin:0 0 var(--s2);font-size:var(--fs-meta);font-weight:var(--w-bold);color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.map-sec>.btn{align-self:flex-start;margin-top:var(--s2)}
.map-rt{display:flex;flex-direction:column;min-width:0}
.map-rt small{font-size:var(--fs-meta);color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.map-id{font-family:var(--mono);font-weight:var(--w-bold);color:var(--ink);text-decoration:none}
.map-id:hover{text-decoration:underline}
.map-bar>.map-id,.map-bar>.map-dim{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-small)}
.map-dim{color:var(--ink-3)}
.map-idh{display:flex;align-items:center;gap:var(--s3)}
.map-idh-t{display:flex;flex-direction:column;min-width:0;flex:1}
.map-idh-t b{font:var(--w-bold) var(--fs-body) var(--mono)}
.map-idh-t small{font-size:var(--fs-meta);color:var(--ink-2)}
.map-idh .lane-sw{width:12px;height:12px}
.map-av{position:relative;flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--sunken);font:var(--w-bold) var(--fs-meta) var(--mono);color:var(--ink-2)}
.map-av>.sd{position:absolute;right:-1px;bottom:-1px;box-shadow:0 0 0 2px var(--surface)}
.map-now small{display:block;margin-top:2px;font-size:var(--fs-meta);color:var(--ink-3)}
.map-post{padding:6px 0;border-top:1px solid var(--line);font-size:var(--fs-small)}
.map-post:first-of-type{border-top:0}
.map-post>div{font-size:var(--fs-meta);color:var(--ink-3)}
.map-post>div b{font-family:var(--mono);color:var(--ink-2)}
.map-post p{margin:2px 0 0;color:var(--ink-2)}
.map-acts{display:flex;flex-wrap:wrap;gap:var(--s2)}
.map-empty h2{margin:0;font-size:var(--fs-body)}
.map-empty p{margin:0;max-width:52ch;font-size:var(--fs-small);color:var(--ink-2)}
.map-empty-ic{color:var(--ink-3)}
.map-empty-ic .ic{width:28px;height:28px}
.map-more-btn{display:none}
/* a display tile shows the areas only */
.map[data-tile] .map-chart{padding:var(--s2)}
@container (max-width:760px){
  .map-more-btn{display:inline-flex;align-self:flex-start}
  .map-side[data-open] [data-more]{display:flex}
  .map-sw{order:2}
  .map-tb .map-search{order:3;flex:1 1 100%}
}
/* With many areas the replay bar would sit below the fold: keep it pinned to the bottom of the view while the map scrolls. */
.map-rp{position:sticky;bottom:var(--s3);z-index:3}
.map[data-tile] .map-rp{position:static}

/* ---- the graph: Claude Design's hub-and-fan (~/designs/mesh-graph/GRAPH-HANDOFF.md). The person, 2026-11-04: "make it look good,
   intuitive, and not random and chaotic". Positions come from mesh-layout.js; this file only draws. */
.map-stage{position:relative;display:flex;flex-direction:column;height:clamp(420px,calc(100vh - 260px),900px);border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);overflow:hidden;
  --spoke:color-mix(in oklch,var(--ink-3) 42%,transparent)}
.map-cap{flex:none;padding:var(--s2) var(--s4);font-size:var(--fs-small);font-weight:var(--w-bold);color:var(--ink);border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.map-cap small{font-size:var(--fs-small);font-weight:400;color:var(--ink-3)}
.map-cap[data-cut]{color:var(--accent-ink)}
.map-cap[data-post]{font-weight:400;color:var(--ink-2)}
.map-cap[data-post] b{font-family:var(--mono);color:var(--accent-ink)}
.map-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}
.map-cv{position:relative;min-height:100%;font-size:12px;line-height:18px}
.map-svg,.map-fx{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.map-fx{z-index:2}
.map-cv>button,.map-cv>div:not(.map-hc){position:absolute;left:0;top:0;transition:transform .2s ease,opacity .12s ease,background-color .12s ease}
.map-cv>.map-in{opacity:0}
.map-sp{transition:d .2s ease}
/* the free view (Web, Orbit): the picture is fitted to the panel; wheel zooms, drag pans, a node can be dragged */
.map-scroll[data-free]{overflow:hidden;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.map-scroll[data-free]>.map-cv{transform-origin:0 0;transition:transform .35s ease}
.map-scroll[data-free] [data-body]{touch-action:none}
.map-scroll[data-drag]{cursor:grabbing}
.map-scroll[data-drag]>.map-cv,.map-scroll[data-drag]>.map-cv>*,.map-scroll[data-drag] .map-sp{transition:none}
.map-zoom{position:absolute;right:var(--s3);top:calc(var(--s2) * 2 + 20px);z-index:3;display:flex;gap:4px}
.map-zoom[hidden]{display:none}
.map-zoom>.btn{min-width:30px;justify-content:center;background:var(--surface)}
.map-cv[data-dim]>:is(.map-ag,.map-more,.map-old,.map-band):not([data-lit]){opacity:.25}
.map-cv[data-dim]>.map-card:not([data-lit]){opacity:.3}
.map-cv[data-dim] .map-sp:not([data-lit]){opacity:.25}

/* tier bands */
.map-band{display:flex;align-items:center;gap:var(--s2);height:20px;font-size:11px;font-weight:var(--w-bold);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);pointer-events:none}
.map-band::after{content:"";flex:1;height:1px;background:var(--line)}
.map-tsw{flex:none;width:8px;height:8px;border-radius:2px;background:var(--other)}
.map-tsw[data-tier=tier1]{background:var(--tier1)}.map-tsw[data-tier=tier2]{background:var(--tier2)}.map-tsw[data-tier=held]{background:var(--held)}

/* thread cards */
.map-card{display:flex;flex-direction:column;justify-content:flex-start;gap:2px;padding:9px 12px 0;margin:0;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit;text-align:left;cursor:pointer;overflow:hidden}
.map-card[data-tier=tier1]{border-color:var(--line-2)}
.map-card:hover{background:var(--hover)}
.map-card[data-sel]{border:2px solid var(--accent);background:var(--accent-bg);padding:8px 11px 0}
.map-card[data-sel] .map-cn{color:var(--accent-ink)}
.map-cr1,.map-cr2{display:flex;align-items:center;gap:6px;min-width:0}
.map-cn{flex:1;min-width:0;font:var(--w-bold) 13px/18px var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.map-cc{flex:none;font-size:13px;font-weight:var(--w-bold);font-variant-numeric:tabular-nums}
.map-cr2{font-size:12px;color:var(--ink-3)}
.map-cr2>em{flex:none;font-style:normal;font-weight:var(--w-bold);color:var(--bad-ink)}
.map-cm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.map-chip,.map-old{display:inline-flex;align-items:center;gap:3px;flex:none;height:16px;padding:0 5px;border-radius:4px;background:var(--sunken);font-size:11px;line-height:16px;color:var(--ink-2);white-space:nowrap}
.map-chip b,.map-old b{font-weight:var(--w-bold);color:var(--ink)}
.map-cb{position:absolute;left:12px;right:12px;bottom:7px;height:3px;border-radius:2px;background:var(--sunken);overflow:hidden}
.map-cb>i{display:block;height:100%;background:var(--ink-3)}
.map-cv[data-compact] .map-card{padding:6px 10px 0}
.map-cv[data-compact] .map-cn,.map-cv[data-compact] .map-cc{font-size:12px}
.map-cv[data-compact] .map-cb{left:10px;right:10px}
.map-cv[data-compact] .map-cb{bottom:6px}

/* agents: the glyph is the status, the row is the label */
.map-ag,.map-more{display:flex;flex-direction:column;align-items:stretch;padding:0 6px 0 var(--lx);margin:0;border:0;border-radius:6px;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer;min-height:18px}
.map-ag:hover{background:var(--hover)}
.map-ag[data-sel]{background:var(--accent-bg)}
.map-ag[data-sel] .map-aid{color:var(--accent-ink)}
.map-l1,.map-l2{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.map-aid{font:var(--w-bold) 12px/18px var(--mono);color:var(--ink)}
.map-am{color:var(--ink-3)}
.map-l2 .map-nl{color:var(--ink-2)}
.map-nl[data-tone=bad]{color:var(--bad-ink)}
.map-nl[data-tone=quiet]{color:var(--ink-3)}
.map-ag[data-ended] .map-aid,.map-ag[data-ghost] .map-aid{color:var(--ink-3)}
.map-gl{color:var(--ink-3)}
.map-ag>.map-g,.map-more>.map-g{position:absolute;left:10px;top:9px}
.map-pill{align-self:flex-start;height:18px;padding:0 8px;border:1px dashed var(--line-2);border-radius:9px;color:var(--ink-2);font-size:11px;line-height:16px}
.map-more:hover .map-pill{background:var(--hover)}
.map-old{position:absolute;height:24px;padding:0 8px;border:0;font:inherit;font-size:12px;cursor:pointer}
.map-old:hover{background:var(--hover)}

/* the glyph: shape and colour from the status (status.js) */
.map-g{--r:6px;display:inline-block;flex:none;width:calc(var(--r)*2);height:calc(var(--r)*2);margin:calc(var(--r)*-1) 0 0 calc(var(--r)*-1);border-radius:50%;background:var(--good);box-sizing:border-box;vertical-align:middle}
.map-legend .map-g,.map-hc .map-g{position:relative;margin:0}
.map-g[data-st=queue]{border-radius:2px;background:var(--warn)}
.map-g:is([data-st=quiet],[data-st=limited],[data-st=queued],[data-st=ghost],[data-st=more]){background:var(--surface);border:2px solid var(--quiet)}
.map-g[data-st=limited]{border-color:var(--warn)}
.map-g[data-st=queued]{border-color:var(--accent)}
.map-g:is([data-st=ghost],[data-st=more]){border-width:1.5px;border-color:var(--ink-3)}
.map-g[data-st=more]{border-style:dashed}
.map-g[data-st=stuck]{width:calc(var(--r)*2.67);height:calc(var(--r)*2.33);margin:calc(var(--r)*-1.33) 0 0 calc(var(--r)*-1.33);border-radius:0;background:var(--bad);clip-path:polygon(50% 0,100% 100%,0 100%)}
.map-g:is([data-st=failed],[data-st=killed]){width:calc(var(--r)*2.33);height:calc(var(--r)*2.33);margin:calc(var(--r)*-1.17) 0 0 calc(var(--r)*-1.17);border-radius:0;background:var(--bad);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.map-g[data-st=killed]{background:var(--quiet)}
.map-g:is([data-st=ended],[data-st=none]){width:calc(var(--r)*1.33);height:calc(var(--r)*1.33);margin:calc(var(--r)*-.67) 0 0 calc(var(--r)*-.67);background:var(--ended)}
.map-g[data-w]{box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--warden)}
.map-g[data-sel]{box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--accent)}
.map-g[data-w][data-sel]{box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--warden),0 0 0 5px var(--surface),0 0 0 7px var(--accent)}
/* running agents breathe (any status), reduced motion included (the person, 2026-11-03): a slow soft ring, no movement of the dot itself */
.map-ag:not([data-ghost]):not([data-ended])>.map-g{--ring:var(--good)}
.map-ag:not([data-ghost]):not([data-ended])>.map-g[data-st=queue]{--ring:var(--warn)}
.map-ag:not([data-ghost]):not([data-ended])>.map-g:is([data-st=quiet],[data-st=queued],[data-st=limited]){--ring:var(--quiet)}
.map-ag:not([data-ghost]):not([data-ended])>.map-g::after{content:"";position:absolute;inset:0;border-radius:50%;animation:map-breathe 2.4s ease-out infinite;pointer-events:none}
@keyframes map-breathe{from{box-shadow:0 0 0 0 color-mix(in oklch,var(--ring) 55%,transparent)}to{box-shadow:0 0 0 7px transparent}}

/* lines */
.map-sp{fill:none;stroke:var(--spoke);transition:stroke .4s ease,opacity .12s ease}
.map-sp[data-ended]{stroke:var(--line-2)}
.map-sp[data-dash]{stroke-dasharray:3 3}
.map-sp[data-hot]{stroke:var(--ink-2);transition-duration:.1s}
.map-sp[data-acc]{stroke:var(--accent);opacity:1}
.map-sp[data-post]{transition-duration:.1s}
.map-ln{fill:none;stroke:var(--accent);stroke-width:1.5}
.map-ln[data-ghost]{stroke-dasharray:4 4}
.map-ahd{fill:var(--accent)}
.map-dot{fill:var(--accent);stroke:var(--surface);stroke-width:2}

/* focus */
.map-cv>button:focus-visible{outline:2px solid var(--focus);outline-offset:2px;z-index:1}

/* the hover card */
.map-hc{position:absolute;left:0;top:0;z-index:4;display:flex;flex-direction:column;gap:6px;padding:var(--s3);border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--surface);box-shadow:0 6px 24px color-mix(in oklch,var(--ink) 14%,transparent);pointer-events:none;font-size:12px;line-height:17px;color:var(--ink-2)}
.map-hc[hidden]{display:none}
.map-hc-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.map-hc-h b{font:var(--w-bold) 13px var(--mono);color:var(--ink)}
.map-hc-h span{color:var(--ink-3)}
.map-hc-now{padding:6px 8px;border-radius:6px;background:var(--sunken);color:var(--ink)}
.map-hc small{color:var(--ink-3);font-size:11px}

/* the legend */
.map-legend{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;padding:var(--s2) var(--s4);border-top:1px solid var(--line);font-size:12px;color:var(--ink-3)}
.map-legend>span{display:inline-flex;align-items:center;gap:6px}
.map-k-w{display:inline-block;width:22px;height:0;border-top:3px solid var(--spoke)}
.map-k-bar{display:inline-block;width:22px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--ink-3) 55%,var(--sunken) 55%)}

/* a display tile: the graph only */
.map[data-tile] .map-stage{height:100%;min-height:200px;border:0;border-radius:0}
.map[data-tile] .map-chart{height:100%}
.map[data-tile] .map-legend{display:none}
@container (max-width:760px){
  .map-stage{height:clamp(380px,70vh,640px)}
  .map-cap{padding:var(--s2) var(--s3)}
  .map-legend{padding:var(--s2) var(--s3);gap:4px 12px}
}
@media (prefers-reduced-motion:reduce){.map-cv>*,.map-sp{transition:none}}

/* Layout toggle (Bands / Web / Orbit). The graph layouts draw their tiers as rings (orbit) and move everything over on a switch. */
.map-ring{fill:none;stroke:var(--line);stroke-dasharray:2 5}
.map-rt{font-size:10.5px;font-weight:var(--w-bold);letter-spacing:.05em;text-transform:uppercase;fill:var(--ink-3);text-anchor:middle}
.map-cv[data-move]>button,.map-cv[data-move]>div:not(.map-hc){transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .2s ease}
.map-cv[data-move]>.map-svg{animation:map-redraw .7s ease}
@keyframes map-redraw{0%,60%{opacity:0}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.map-cv[data-move]>*{transition:none;animation:none}}

.map-ho{fill:none;stroke:var(--ink-3);stroke-width:1.25}
.map-cv[data-dim] .map-ho{opacity:.25}
.map-ahg{fill:var(--ink-3)}