/* public/css/process-board.css
   2026-09-29 (/process "Plokštė"): gyva spausdintinė plokštė (core/process/boardSvg.js + public/js/process-board.js).
   Visi kintamieji su pb- priešdėliu ir galioja tik .pb sekcijose. Tamsi paletė kaip visoje svetainėje, erų spalvos kaip
   paveikslėlių generavime (praeitis - gintarinė, dabartis - šalta balta-mėlyna, ateitis - violetinė-cianinė). */
.pb {
  --pb-panel: #11171c;
  --pb-line: #22303a;
  --pb-mask: #0d161c;
  --pb-trace: #7d8c96;
  --pb-trace-dim: #2c3b45;
  --pb-gold: #c9a24f;
  --pb-silk: #aeb9c1;
  --pb-ink: #e6ebee;
  --pb-muted: #8a969e;
  --pb-amber: #f2a84b;
  --pb-ice: #bfe0ff;
  --pb-cyan: #62e0f5;
  --pb-ok: #52da8d;
  --pb-stop: #ff5c61;
  --pb-warn: #f2c14b;
  --pb-era: var(--pb-ice);
}

.pb-js[hidden] { display: none !important; }

.pb-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 1.2rem 0 1rem; }
.pb-nights { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--pb-line); border-radius: 8px; overflow: hidden; }
.pb-night, .pb-replay { font-family: monospace; font-size: 13px; color: var(--pb-ink); background: var(--pb-panel); border: 0; padding: 9px 14px; }
.pb-night + .pb-night { border-left: 1px solid var(--pb-line); }
.pb-night[aria-pressed="true"] { background: #1b2630; color: #fff; box-shadow: inset 0 -2px 0 var(--pb-era); }
.pb-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; background: var(--pb-muted); }
.pb-dot-published { background: var(--pb-ok); }
.pb-dot-blocked { background: var(--pb-stop); }
.pb-dot-error, .pb-dot-abandoned { background: var(--pb-warn); }
.pb-replay { border: 1px solid var(--pb-line); border-radius: 8px; }
.pb-replay:hover, .pb-night:hover { background: #18222a; }
.pb-clock { margin-left: auto; font-family: monospace; display: flex; align-items: baseline; gap: 10px; }
.pb-clock-label { font-size: 11px; letter-spacing: .12em; color: var(--pb-muted); }
.pb-clock-time { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--pb-era); }

.pb-stage { perspective: 1700px; margin: 0 0 1rem; }
.pb-tilt { position: relative; border-radius: 14px; overflow: hidden; background: var(--pb-mask); border: 1px solid #1c2831;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8);
  transform: rotateX(var(--pb-rx, 0deg)) rotateY(var(--pb-ry, 0deg)); transform-origin: 50% 60%; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.pb-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pb-board { position: relative; }
.pb-board svg { display: block; width: 100%; height: auto; }
.pb-board.tall { display: none; }
.pb-dof { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(8, 11, 14, .5), rgba(8, 11, 14, 0) 26%, rgba(8, 11, 14, 0) 82%, rgba(8, 11, 14, .35)); }
@media (max-width: 899px) {
  .pb-board.wide { display: none; }
  .pb-board.tall { display: block; }
  .pb-clock { margin-left: 0; }
}
@media (max-width: 520px) {
  .pb-nights { display: flex; width: 100%; }
  .pb-night { flex: 1; padding: 9px 6px; font-size: 12px; white-space: nowrap; }
}

.pb-status { font-family: monospace; font-size: 13.5px; color: #cdd6db; min-height: 1.6em; margin: 0 0 1rem; }
.pb-status b { color: var(--pb-era); }
.pb-status.stopped b { color: var(--pb-stop); }
.pb-status a { color: var(--pb-ice); }

.pb-info { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; margin: 0 0 1rem; }
@media (max-width: 899px) { .pb-info { grid-template-columns: minmax(0, 1fr); } }
.pb-card { background: var(--pb-panel); border: 1px solid var(--pb-line); border-radius: 12px; padding: 16px 16px 14px; min-width: 0; }
.pb-card h3 { font-family: monospace; font-size: 15px; margin: 0 0 12px; color: #ddd; }
.pb-kind { font-family: monospace; font-size: 11px; letter-spacing: .12em; color: var(--pb-muted); }
.pb-details h4 { font-family: monospace; font-size: 20px; letter-spacing: .04em; margin: 2px 0 8px; color: #eee; }
.pb-details h4 small { font-weight: 400; font-size: 14px; color: var(--pb-muted); }
.pb-details .proc-body { padding: 0; }
.pb-night-line { font-family: monospace; font-size: 12.5px; color: var(--pb-muted); margin: 10px 0 0; }
.pb-night-line b { color: var(--pb-ink); }
.pb-note { font-family: monospace; font-size: 12.5px; color: #c7d0d5; margin: 10px 0 0; padding: 9px 11px; border-left: 2px solid var(--pb-era); background: #0e1418; }

.pb-bar { display: flex; height: 24px; border-radius: 6px; overflow: hidden; background: #0c1216; border: 1px solid var(--pb-line); }
.pb-bar span { height: 100%; min-width: 2px; }
.pb-bar .pb-cut { background: repeating-linear-gradient(135deg, rgba(255, 92, 97, .25) 0 6px, transparent 6px 12px); flex: 1; }
.pb-legend { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 14px; font-family: monospace; font-size: 12.5px; }
.pb-legend li { display: flex; align-items: center; gap: 8px; color: #c7d0d5; min-width: 0; }
.pb-legend i { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.pb-legend .v { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--pb-ink); white-space: nowrap; }
.pb-total { font-family: monospace; font-size: 12.5px; color: var(--pb-muted); margin: 10px 0 0; }
.pb-total b { color: var(--pb-ink); }

.pb-month { margin: 0 0 1rem; }
.pb-month table { width: 100%; border-collapse: collapse; font-family: monospace; font-size: 13px; }
.pb-month td { padding: 6px 0; border-top: 1px solid var(--pb-line); color: #c3ccd2; }
.pb-month td:last-child { text-align: right; font-variant-numeric: tabular-nums; color: var(--pb-ink); }

.proc-all { margin: 0 0 1rem; }
.proc-all > summary { font-family: monospace; color: #aaa; padding: 8px 0; }

/* SVG */
.pb svg text { font-family: monospace; }
.pb .silk { fill: var(--pb-silk); opacity: .8; }
.pb-pin, .pb-cap { fill: var(--pb-gold); opacity: .9; }
.pb-icon { color: var(--pb-silk); }
.pb-icon path { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pb-ctl { fill: none; stroke: var(--pb-trace-dim); stroke-width: 1.8; stroke-linecap: round; }
.pb-mem { fill: none; stroke: var(--pb-trace); stroke-opacity: .55; stroke-width: 1.6; stroke-dasharray: 5 6; }
.pb-memlabel, .pb-banklabel, .pb-lanelabel { letter-spacing: 1.5px; }
.pb-route-bed { fill: none; stroke: #0a1015; stroke-width: 7; stroke-linecap: round; }
.pb-route { fill: none; stroke: var(--pb-trace); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pb-via { fill: #0a1015; stroke: var(--pb-gold); stroke-width: 1.6; opacity: .8; }
.pb-lit, .pb-litglow { fill: none; stroke: var(--pb-era); stroke-linecap: round; stroke-dasharray: 0 100000; }
.pb-lit { stroke-width: 2.2; }
.pb-litglow { stroke-width: 7; opacity: .45; }
.pb-trail { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: 0; stroke-dasharray: 60 100000; }
.pb-halo { fill: var(--pb-era); opacity: 0; }
.pb-pulse { fill: #fff; opacity: 0; }
.pb-bank { fill: rgba(10, 16, 21, .72); stroke: var(--pb-silk); stroke-opacity: .35; stroke-dasharray: 3 4; }
.pb .chip:focus { outline: none; }
.pb .chip .face { fill: #141d23; stroke: #34444f; stroke-width: 1.2; transition: stroke .35s, fill .35s; }
.pb-cpu .face { stroke: #33434e; }
.pb-cpu-face { animation: pb-breathe 4.5s ease-in-out infinite; }
.pb-cpu-name { font-weight: 700; fill: #0e2640; }
.pb-cpu-small { fill: #2a4a66; }
@keyframes pb-breathe { 50% { opacity: .82; } }
.pb .chip .glow { fill: var(--pb-era); opacity: 0; transition: opacity .35s; }
.pb .pb-lane .face { fill: #121b21; stroke: var(--pb-lane); stroke-opacity: .55; }
.pb .pb-lane .glow { fill: var(--pb-lane); }
.pb-lanebar { fill: var(--pb-lane); }
.pb-name { font-weight: 700; fill: var(--pb-ink); letter-spacing: .5px; }
.pb .dur { fill: var(--pb-muted); }
.pb .chip.active .glow { opacity: .9; }
.pb .chip.done .glow { opacity: .25; }
.pb .chip.active .face, .pb .chip.done .face { stroke: var(--pb-era); }
.pb .pb-lane.active .face, .pb .pb-lane.done .face { stroke: var(--pb-lane); stroke-opacity: 1; }
.pb .chip.done .dur, .pb .chip.active .dur, .pb .pb-side.done { fill: var(--pb-era); }
.pb .pb-lane.done .dur, .pb .pb-lane.active .dur { fill: var(--pb-lane); }
.pb .chip.sel .face { stroke: #fff; stroke-width: 1.6; }
.pb .chip:focus-visible .face { stroke: #fff; stroke-width: 2; }
.pb .pb-fuse .tube { fill: rgba(160, 190, 210, .08); stroke: #4d5f6b; }
.pb .filament { fill: none; stroke: var(--pb-silk); stroke-width: 1.4; opacity: .85; }
.pb .pb-fuse.done .tube { stroke: var(--pb-ok); fill: rgba(82, 218, 141, .12); }
.pb .pb-fuse.active .tube { stroke: var(--pb-era); }
.pb .pb-fuse.blown .tube { stroke: var(--pb-stop); fill: rgba(255, 92, 97, .18); }
.pb .pb-fuse.blown .filament { stroke: var(--pb-stop); stroke-dasharray: 6 5; }
.pb .pb-fuse.skipped, .pb .chip.unreached { opacity: .38; }
.pb-bridge-body { fill: #20303a; stroke: #4d5f6b; }
.led-glow { fill: var(--pb-ok); opacity: 0; }
.led-core { fill: #26323a; transition: fill .4s; }
.pb-led.published .led-core, .pb-led.published .led-glow { fill: var(--pb-ok); }
.pb-led.blocked .led-core, .pb-led.blocked .led-glow { fill: var(--pb-stop); }
.pb-led.error .led-core, .pb-led.error .led-glow, .pb-led.abandoned .led-core, .pb-led.abandoned .led-glow { fill: var(--pb-warn); }
.pb-led.published .led-glow, .pb-led.blocked .led-glow, .pb-led.error .led-glow, .pb-led.abandoned .led-glow { opacity: .9; }

@media (prefers-reduced-motion: reduce) {
  .pb-cpu-face { animation: none; }
  .pb-tilt { transition: none; }
}