/* Peta pikiran (mind map) & rencana kerja (peta langkah). */

/* ---------- Mind map ---------- */
.mapview { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 380px; }
.map-tools { position: absolute; z-index: 3; top: .6rem; right: .6rem; display: flex; gap: .3rem; align-items: center; padding: .25rem; border-radius: 12px; background: color-mix(in oklab, var(--surface) 82%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--line-soft); box-shadow: var(--shadow-soft); }
.map-canvas { flex: 1; width: 100%; min-height: 340px; display: block; cursor: grab; touch-action: none; opacity: 0; transition: opacity .35s var(--ease); background:
  radial-gradient(60% 60% at 30% 30%, color-mix(in oklab, var(--accent-2) 7%, transparent), transparent 70%); border-radius: var(--r-md); }
.map-canvas.ready { opacity: 1; }
.map-canvas:active { cursor: grabbing; }

.mm-link { stroke-width: 2; opacity: .55; transition: opacity var(--t); }
.mm-link[data-depth="1"] { stroke: var(--accent); }
.mm-link[data-depth="2"] { stroke: color-mix(in oklab, var(--accent-2) 80%, var(--accent)); }
.mm-link[data-depth="3"] { stroke: var(--accent-2); }
.mm-link[data-depth="4"], .mm-link[data-depth="5"] { stroke: color-mix(in oklab, var(--accent-2) 55%, var(--ink-3)); }

.mm-node { cursor: default; }
.mm-node.has-kids { cursor: pointer; }
.mm-box { fill: var(--surface-2); stroke: var(--line); stroke-width: 1.5; transition: filter var(--t), fill var(--t); }
.mm-node:hover .mm-box { filter: brightness(1.08); }
.mm-text { fill: var(--ink); font: 600 14px var(--font); pointer-events: none; }
.mm-node.d0 .mm-box { fill: var(--accent); stroke: none; filter: drop-shadow(0 8px 18px color-mix(in oklab, var(--accent) 45%, transparent)); }
.mm-node.d0 .mm-text { fill: var(--ink-on-accent); font-weight: 800; font-size: 16px; }
.mm-node.d1 .mm-box { fill: color-mix(in oklab, var(--accent-2) 82%, #000 0%); stroke: none; }
.mm-node.d1 .mm-text { fill: #fff; }
.mm-node.d2 .mm-box { fill: color-mix(in oklab, var(--accent-2) 20%, var(--surface)); stroke: var(--accent-2); }
.mm-node.d3 .mm-box, .mm-node.d4 .mm-box, .mm-node.d5 .mm-box { fill: var(--surface); stroke: var(--line); }
.mm-toggle { cursor: pointer; }
.mm-toggle circle { fill: var(--surface); stroke: var(--accent); stroke-width: 1.4; }
.mm-toggle text { fill: var(--accent-ink); font: 700 12px var(--mono); pointer-events: none; }
.mm-toggle .mm-count { fill: var(--ink-3); font: 600 11px var(--font); text-anchor: start; }

/* ---------- Rencana kerja ---------- */
.planview { padding: 1.1rem 1.2rem 1.6rem; overflow-y: auto; height: 100%; }
.plan-head { position: sticky; top: -1.1rem; z-index: 2; padding: .2rem 0 .9rem; margin: -.2rem 0 .4rem; background: linear-gradient(var(--surface) 70%, transparent); }
.plan-head-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.plan-head h3 { margin: 0 0 .5rem; font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.02em; }
.plan-pct { font-size: var(--fs-xl); font-weight: 800; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.plan-head .meter { height: 8px; }
.plan-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; margin-top: .6rem; font-size: var(--fs-xs); color: var(--ink-2); }
.pl-chip { display: inline-flex; align-items: center; gap: .35rem; }
.pl-chip i { width: 9px; height: 9px; border-radius: 50%; }
.pl-chip.done i { background: var(--ok); } .pl-chip.doing i { background: var(--accent); } .pl-chip.todo i { background: var(--ink-3); } .pl-chip.blocked i { background: var(--danger); }

.plan-steps { list-style: none; margin: 0; padding: 0; }
.plan-step { position: relative; display: flex; align-items: flex-start; gap: .65rem; padding: .5rem 0 .5rem calc(var(--lvl, 0) * 1.5rem); }
.plan-step .ps-node { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1.5px solid var(--line); color: var(--ink-3); z-index: 1; transition: background var(--t), color var(--t), border-color var(--t); }
.plan-step::before { content: ""; position: absolute; left: calc(var(--lvl, 0) * 1.5rem + 13px); top: 1.7rem; bottom: -.5rem; width: 2px; background: var(--line); }
.plan-step:last-child::before { display: none; }
.plan-step.done .ps-node { background: color-mix(in oklab, var(--ok) 20%, transparent); border-color: var(--ok); color: var(--ok); }
.plan-step.doing .ps-node { background: color-mix(in oklab, var(--accent) 22%, transparent); border-color: var(--accent); color: var(--accent-ink); animation: plan-pulse 1.8s ease-in-out infinite; }
.plan-step.blocked .ps-node { background: color-mix(in oklab, var(--danger) 18%, transparent); border-color: var(--danger); color: var(--danger); }
@keyframes plan-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 45%, transparent); } 50% { box-shadow: 0 0 0 5px transparent; } }
.ps-label { flex: 1; min-width: 0; padding-top: .2rem; overflow-wrap: anywhere; }
.plan-step.done .ps-label { color: var(--ink-2); }
.ps-tag { flex: none; align-self: center; font-size: var(--fs-xs); padding: .1rem .5rem; border-radius: 99px; background: var(--surface-2); color: var(--ink-3); }
.plan-step.doing .ps-tag { background: var(--accent-soft); color: var(--accent-ink); }
.plan-step.blocked .ps-tag { background: color-mix(in oklab, var(--danger) 16%, transparent); color: var(--danger); }

@media (prefers-reduced-motion: reduce) { .plan-step.doing .ps-node { animation: none; } .map-canvas { transition: none; } }
:root[data-motion="reduce"] .plan-step.doing .ps-node { animation: none; }

/* ---------- Admin: konektor MCP ---------- */
.mcp-list { display: flex; flex-direction: column; gap: 1rem; }
.mcp-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 1rem 1.1rem; }
.mcp-card-head { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.mcp-detail { font-size: .78rem; color: var(--ink-2); margin-top: .3rem; }
.mcp-detail.err { color: var(--danger); }
.mcp-tools { margin-top: .9rem; border-top: 1px solid var(--line-soft); padding-top: .4rem; display: flex; flex-direction: column; }
.mcp-tool { display: flex; align-items: center; gap: .8rem; padding: .5rem .1rem; border-bottom: 1px solid var(--line-soft); transition: opacity var(--t); }
.mcp-tool:last-child { border-bottom: 0; }
.mcp-tool.off { opacity: .5; }
.mcp-tool-name { font-weight: 650; font-size: .86rem; }
.badge.ok { background: color-mix(in oklab, var(--ok) 18%, transparent); color: var(--ok); }
.badge.danger { background: color-mix(in oklab, var(--danger) 16%, transparent); color: var(--danger); }
@media (max-width: 640px) { .mcp-card-head { flex-direction: column; } .mcp-card-head .row { flex-wrap: wrap; } }