/* ---- shows (v1.2): a skill card opens a window with an animated walk-through of the field ---- */

/* the card is one big button */
.card-open{position:absolute;inset:0;z-index:2;margin:0;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.card-open:focus-visible{outline:1px solid var(--teal);outline-offset:3px}

/* the window */
dialog.show{width:min(1040px,calc(100vw - 32px));max-width:none;max-height:calc(100svh - 32px);margin:auto;padding:0;border:0;background:none;color:var(--text);overflow:visible}
dialog.show::backdrop{background:rgba(3,5,8,.76);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
@media (prefers-color-scheme:light){:root:not([data-tema=koyu]) dialog.show::backdrop{background:rgba(243,245,247,.7)}:root:not([data-tema=koyu]) .sw-win{box-shadow:0 24px 60px rgba(13,18,23,.16)}}
:root[data-tema=acik] dialog.show::backdrop{background:rgba(243,245,247,.7)}:root[data-tema=acik] .sw-win{box-shadow:0 24px 60px rgba(13,18,23,.16)}
.sw-win{position:relative;display:flex;flex-direction:column;max-height:calc(100svh - 32px);border:1px solid var(--hair);background:var(--menu);
  box-shadow:0 30px 80px rgba(0,0,0,.55);transform-origin:0 0}
/* corners and the beam sit on the dialog, outside the window's clip, so they can fly and draw it open */
.sw-cor{position:absolute;inset:0;z-index:3;pointer-events:none}
.sw-cor .br{position:absolute;width:22px;height:22px;margin:-1px}
.sw-cor .br.tl{left:0;top:0}.sw-cor .br.tr{right:0;top:0}.sw-cor .br.bl{left:0;bottom:0}.sw-cor .br.bri{right:0;bottom:0}
.sw-beam{position:absolute;left:0;right:0;top:50%;z-index:2;height:1px;margin-top:-.5px;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(var(--gt),0),var(--teal) 18%,var(--flare) 50%,var(--teal) 82%,rgba(var(--gt),0));
  box-shadow:0 0 12px 1px rgba(var(--g),calc(.55 * var(--gk)))}
dialog.show::backdrop{transition:opacity .3s}
@media (prefers-reduced-motion:no-preference){dialog.show[open]::backdrop{animation:swVeil .35s ease-out}}
@keyframes swVeil{from{opacity:0}}
dialog.show.kapan::backdrop{opacity:0}
.sw-bar{display:flex;align-items:center;gap:16px;padding:16px 16px 14px 24px;border-bottom:1px solid var(--hair)}
.sw-no{font:400 11px/1 var(--mono);letter-spacing:.18em;color:var(--mute)}
.sw-t{flex:1;margin:0;font:500 26px/1 "Rajdhani",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.sw-x{position:relative;display:grid;place-items:center;width:42px;height:42px;margin:0;padding:0;border:0;background:none;color:var(--dim);cursor:pointer;transition:color .25s}
.sw-x::before{content:"";position:absolute;inset:6px;border:1px solid var(--hair);transition:border-color .25s,inset .25s var(--out)}
.sw-x:hover,.sw-x:focus-visible{color:var(--tealx)}
.sw-x:hover::before,.sw-x:focus-visible::before{border-color:var(--teal);inset:3px}
.sw-x:focus-visible{outline:none}
.sw-x svg{width:16px;height:16px}
.sw-x path{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:square}
.sw-body{flex:1;min-height:0;padding:18px 24px 8px;overflow:auto}
.sw-foot{display:flex;align-items:center;gap:18px;min-height:62px;padding:12px 16px 14px 24px;border-top:1px solid var(--hair)}
.sw-cap{flex:1;margin:0;font:400 16px/1.5 var(--sans);color:var(--text)}
.sw-cap.in{animation:capIn .5s var(--out)}
@keyframes capIn{from{opacity:0;transform:translateY(6px)}}

/* the drawing: a track on top, two panels under it (stacked on narrow screens) */
.sw-svg{display:block;width:100%;height:auto;overflow:visible;font-family:"Geist Mono",ui-monospace,monospace}
.sw-pans{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:10px}
@media (max-width:700px){
  .sw-pans{grid-template-columns:1fr}
  .sw-trk [data-n] text{display:none} /* too small there: the caption names the step */
  .sw-body{padding:12px 14px 6px}.sw-bar{padding-left:16px}.sw-foot{padding-left:16px}
  .sw-t{font-size:21px}.sw-cap{font-size:15px}
}
.sw-svg text{white-space:pre}
.sw-line{fill:none;stroke:var(--hair);stroke-width:2}
.sw-lit{fill:none;stroke:var(--teal);stroke-width:2;filter:drop-shadow(0 0 4px rgba(var(--g),calc(.55 * var(--gk))))}
[data-n] rect{fill:var(--bg);stroke:rgba(var(--k),.18);transition:stroke .3s}
[data-n] path,[data-n] circle{fill:none;stroke:var(--dim);stroke-width:1.5;transition:stroke .3s}
[data-n] text{fill:var(--mute);font-size:12px;letter-spacing:.16em;text-transform:uppercase;text-anchor:middle;transition:fill .3s}
[data-n].on rect{stroke:var(--edge-on,rgba(var(--gt),.55))}
[data-n].on path,[data-n].on circle{stroke:var(--teal)}
[data-n].on text{fill:var(--ink)}
[data-n].act rect{stroke:var(--teal);filter:drop-shadow(0 0 8px rgba(var(--g),calc(.45 * var(--gk))))}
/* stage boxes are buttons: a click plays just that stage */
[data-n]{cursor:pointer;outline:none}
[data-n]:hover rect,[data-n]:focus-visible rect{stroke:var(--edge-hv,rgba(var(--gt),.7))}
[data-n]:focus-visible rect{stroke-width:2}
/* where the change is: a lock-on marker around the box (never over the icon) and a hot head on the lit line */
.sw-mk path{fill:none;stroke:var(--teal);stroke-width:1.6;filter:drop-shadow(0 0 4px rgba(var(--g),calc(.7 * var(--gk))))}
.sw-head{fill:var(--flare);filter:drop-shadow(0 0 5px rgba(var(--g),calc(.9 * var(--gk))))}
.sw-pf{fill:rgba(255,255,255,.015);stroke:rgba(var(--k),.12)}
.sw-ph{fill:var(--mute);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.sw-tl text{fill:var(--text);font-size:12.5px}
.sw-code text{fill:var(--mute);font-size:12.5px;transition:fill .2s}
.sw-code text.seen{fill:var(--text)}
.sw-scan{fill:var(--teal);filter:drop-shadow(0 0 6px rgba(var(--g),calc(.8 * var(--gk))))}
.sw-tl text.ok{fill:var(--tealx)}
.sw-vh{fill:var(--tealx);font-size:24px;letter-spacing:.02em}
.sw-vt{fill:var(--text);font-size:14px}
.sw-ok{fill:var(--tealx);font-size:14px}
.sw-gl{fill:none;stroke:var(--hair);stroke-width:2}
.sw-gd{fill:var(--bg);stroke:var(--dim);stroke-width:2}
.sw-gd.on{fill:var(--teal);stroke:var(--teal)}
.sw-bk{fill:rgba(var(--k),.08)}
.sw-bf{fill:var(--teal);filter:drop-shadow(0 0 6px rgba(var(--g),calc(.6 * var(--gk))))}
.sw-cells rect{fill:rgba(var(--k),.08)}
.sw-cells rect.ok{fill:var(--teal)}
.sw-reg{fill:none;stroke:rgba(var(--k),.14);stroke-dasharray:4 4}
.sw-lay{fill:rgba(var(--gt),.12);stroke:var(--edge-on,rgba(var(--gt),.6))}
.sw-del{fill:var(--mute);font-size:14px}
.sw-add{fill:var(--tealx);font-size:14px}
.sw-strike{fill:none;stroke:var(--mute);stroke-width:1.5;transform-box:fill-box;transform-origin:0 50%;transform:scaleX(0)}
.sw-pod rect{fill:rgba(255,255,255,.02);stroke:rgba(var(--k),.16);transition:fill .25s,stroke .25s}
.sw-pod text{fill:var(--dim);font-size:15px;text-anchor:middle;transition:fill .25s}
.sw-pod{transition:opacity .16s}
.sw-pod.go{opacity:.25}
.sw-pod.new rect{fill:rgba(var(--gt),.1);stroke:var(--teal)}
.sw-pod.new text{fill:var(--tealx)}
.sw-spark{fill:none;stroke:var(--teal);stroke-width:1.8;stroke-linejoin:round;filter:drop-shadow(0 0 4px rgba(var(--g),calc(.5 * var(--gk))))}
.sw-badge rect{fill:rgba(var(--gt),.12);stroke:var(--teal)}
.sw-badge text{fill:var(--tealx);font-size:13px;letter-spacing:.26em;text-transform:uppercase;text-anchor:middle}
@media (prefers-reduced-motion:no-preference){.sw-badge>*{animation:bdg 1.6s ease-in-out infinite}} /* not the group: its fade-in is inline */
@keyframes bdg{50%{opacity:.55}}
[data-v],[data-k="live"],[data-k="stats"],[data-k="img"],.sw-lay{will-change:opacity}