/* The plan as a tech tree (js/plan-tree.js). Global, because the SVG is drawn by script, outside Blazor's scoped CSS.
   Ported from the vision's prototype (design/vision.html). One colour per track column. */
:root, [data-theme="light"] {
  --l-build: #4b6584; --l-store: #202124; --l-festivals: #2b7a73; --l-creators: #a3337f; --l-communities: #6b4cc9; --l-story: #b35214;
  --ptree-now: #e3dcfa;
}
[data-theme="dark"] {
  --l-build: #9db4d0; --l-store: #e8e9eb; --l-festivals: #63c2b8; --l-creators: #e489c7; --l-communities: #ad9bf6; --l-story: #f0995c;
  --ptree-now: #2b2648;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --l-build: #9db4d0; --l-store: #e8e9eb; --l-festivals: #63c2b8; --l-creators: #e489c7; --l-communities: #ad9bf6; --l-story: #f0995c;
    --ptree-now: #2b2648;
  }
}

.ptree { display: grid; gap: 10px; min-width: 0 }
.ptree__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px }
.ptree__fit { font: inherit; font-size: 13px; font-weight: 500; height: 30px; padding: 0 14px; border-radius: 100px; border: 0; background: var(--surface-1); color: var(--ink); cursor: pointer }
.ptree__fit[aria-pressed="true"] { background: var(--primary); color: var(--on-primary) }
.ptree__fit:focus-visible { outline: 2px solid var(--link); outline-offset: 2px }
.ptree__legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: 12px; color: var(--ink-muted); flex: 1 1 320px }
.ptree__stage { position: relative; min-width: 0 }
.ptree__canvas { scroll-padding-top: 64px; overflow: auto; border: 1px solid var(--hairline-soft); border-radius: 15px; background: var(--surface-raised); height: min(780px, calc(100vh - 230px)); min-height: 420px; min-width: 0 }
.ptree__canvas:focus-visible { outline: 2px solid var(--link); outline-offset: 2px }
.ptree__canvas svg { display: block }
.ptree__canvas .ptree-head { position: sticky; top: 0; z-index: 2 }
.ptree__canvas.fit svg { width: 100%; height: auto }

.ptree svg text { font-family: var(--font-sans); fill: var(--ink); font-size: 11px }
.ptree svg .mut { fill: var(--ink-muted) }
.ptree svg .ml { font-size: 12px; font-weight: 600 }
.ptree svg .nowt { font-weight: 600; fill: var(--ink) }
.ptree svg .lbl { font-size: 12px; font-weight: 600 }
.ptree svg .band-a { fill: var(--surface-1) }
.ptree svg .band-b { fill: var(--surface-raised) }
.ptree svg .band-now { fill: var(--ptree-now) }
.ptree svg .halo { paint-order: stroke; stroke: var(--surface-raised); stroke-width: 4px; stroke-linejoin: round }
.ptree svg .hdbg { fill: var(--surface-raised) }
.ptree svg .hdline { stroke: var(--hairline-soft); stroke-width: 1 }
.ptree svg .railbed { fill: var(--ink); opacity: .045 }
.ptree svg .hatch { fill: var(--ink); opacity: .2 }
.ptree svg .gateband.dim, .ptree svg .gateedge.dim, .ptree svg .gatepill.dim { opacity: .4 }
.ptree svg .gateedge { fill: none; stroke: var(--ink); stroke-width: 1.5 }
.ptree svg .gatepill rect { fill: var(--primary) }
.ptree svg .gatepill text { fill: var(--on-primary); font-size: 11px; font-weight: 600; letter-spacing: .05em }

/* a step takes clicks anywhere in its box (hexagon and label); the bands, rails and gates under it never do */
.ptree svg .node, .ptree svg .pvp-n { cursor: pointer; pointer-events: bounding-box }
.ptree svg .band-a, .ptree svg .band-b, .ptree svg .band-now, .ptree svg .railbed, .ptree svg .gateband, .ptree svg .gateedge, .ptree svg .xrest, .ptree svg .conn, .ptree svg .xlink, .ptree svg .xglow { pointer-events: none }
.ptree svg .node:focus { outline: none }
.ptree svg .node:focus-visible .shp, .ptree svg .node.sel .shp { stroke: var(--link) !important; stroke-width: 3px !important }
.ptree svg .hex { fill: var(--surface-raised); stroke-width: 2.5 }
.ptree svg .hex.st-done { fill: var(--surface-1) }
.ptree svg .hex.st-later { fill: var(--surface-1); stroke-opacity: .55 }
.ptree svg .off .shp { stroke-dasharray: 4 3 !important; fill: var(--surface-raised) !important; stroke: var(--ink-muted) !important }
.ptree svg .off text { fill: var(--ink-muted) }
.ptree svg .halo-act { fill: none; stroke: #d8a846; stroke-width: 3 }
.ptree svg .halo-next { fill: none; stroke: var(--warning); stroke-width: 1.5; stroke-dasharray: 3 3 }
.ptree svg .gl .ia { fill: var(--ic); opacity: .9 }
.ptree svg .gl .ib { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round }
.ptree svg .gl.lat .ia { opacity: .28 }
.ptree svg .gl.lat .ib { stroke: var(--ink-muted) }
.ptree svg .mk-done { fill: var(--success) }
.ptree svg .mk-act { fill: #d8a846 }
.ptree svg .mk-next, .ptree svg .mk-lat, .ptree svg .mk-off { fill: var(--surface-raised); stroke: var(--ink-muted); stroke-width: 1.2 }
.ptree svg .mk-on { fill: none; stroke: #ffffff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.ptree svg .mk-dot { fill: #2a2112 }
.ptree svg .mk-line { fill: none; stroke: var(--ink-muted); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round }

.ptree svg .conn { fill: none; stroke-width: 2.4; stroke-linecap: round; opacity: .9 }
.ptree svg .conn.dim { stroke-dasharray: 5 5; opacity: .4 }
.ptree svg .conn.on { stroke-width: 3.4; opacity: 1 }
.ptree svg .xrest { opacity: .7 }
.ptree svg .xlink { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round }
.ptree svg .xlink.on { stroke-width: 3.4 }
.ptree svg .xlink.dim { stroke-dasharray: 5 5; opacity: .45 }
.ptree svg .xplug { stroke: var(--surface-raised); stroke-width: 2 }
.ptree svg .xplug.dim { opacity: .45 }
.ptree svg .xglow { fill: none; stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; opacity: .18 }

/* before-and-after panel */
.ptree__path { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 3; max-height: min(64%, 470px); display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--surface-raised); border: 1px solid var(--hairline); border-radius: 14px; box-shadow: 0 14px 36px #0000002e; overflow: hidden }
.ptree__path[hidden] { display: none }
.ptree__path:focus { outline: none }
.ptree .pvp-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--hairline-soft) }
.ptree .pvp-top h3 { flex: 1 1 220px; min-width: 0; margin: 0; font-size: 15px; display: flex; flex-wrap: wrap; gap: 0 8px; align-items: baseline }
.ptree .pvp-top h3 span { font-size: 12px; font-weight: 500; color: var(--ink-muted) }
.ptree .pvp-x { font: inherit; font-size: 18px; line-height: 1; width: 30px; height: 30px; flex: none; border-radius: 50%; border: 0; background: var(--surface-1); color: var(--ink); cursor: pointer }
.ptree .pvp-x:focus-visible { outline: 2px solid var(--link); outline-offset: 2px }
.ptree .pvp-body { overflow: auto; min-height: 0; padding: 12px 16px 14px }
.ptree .pvp-body > svg { display: block; max-width: none }
.ptree svg .pe { fill: none; stroke-width: 1.6; opacity: .5; stroke-linecap: round }
.ptree svg .pe.near { stroke-width: 2.6; opacity: .95 }
.ptree svg .pe.dim { stroke-dasharray: 4 4 }
.ptree svg .pvp-n:focus { outline: none }
.ptree svg .pvp-n:hover .hex, .ptree svg .pvp-n:focus-visible .hex { stroke-width: 3.5 }
.ptree svg .pvp-ring { fill: none; stroke: var(--link); stroke-width: 2.5 }
.ptree svg .pvp-hd { font-size: 10px; font-weight: 600; letter-spacing: .06em; fill: var(--ink-muted) }
.ptree svg .pvp-lb { font-size: 12px; font-weight: 600 }
.ptree svg .pvp-lb.big { font-size: 14px }
.ptree svg .pvp-mt { font-size: 11px; fill: var(--ink-muted) }
.ptree svg .pvp-more { cursor: pointer }
.ptree svg .pvp-more rect { fill: var(--surface-1) }
.ptree svg .pvp-more text { font-size: 11px; font-weight: 500 }

@media (prefers-reduced-motion: reduce) { .ptree__canvas { scroll-behavior: auto } }