/*
 * #wk-syspace: "You're standing in it." A 2007 window (Verdana, blue title bar, label/value tables)
 * in the middle of the modern page. The window's colors are fixed (the classic SySpace blues and
 * oranges from css/syspace.css), not the page theme, so it reads the same in light and dark.
 * Everything is scoped under #wk-syspace. Loaded after css/work.css by make-work.js.
 */
#wk-syspace{position:relative;padding:clamp(56px,9vw,112px) clamp(12px,4vw,32px);scroll-margin-top:72px}
#wk-syspace .wk-sy-desk{position:relative;max-width:900px;margin:0 auto;padding:clamp(14px,3.4vw,36px);border-radius:22px;
  background:
    radial-gradient(1px 1px at 12px 12px,rgba(120,140,170,.35) 98%,transparent) 0 0/24px 24px,
    linear-gradient(160deg,rgba(100,210,255,.08),rgba(95,150,255,.05) 60%,transparent);
  border:1px dashed var(--ln,rgba(255,255,255,.14))}
#wk-syspace .wk-sy-win{position:relative;margin:0 auto;border:3px solid #0831d9;border-top:0;border-radius:9px 9px 3px 3px;background:#ece9d8;
  font:12px/1.5 Verdana,Tahoma,Arial,sans-serif;color:#000;color-scheme:light;
  box-shadow:0 2px 0 #0a246a,0 34px 70px -26px rgba(0,0,0,.65),0 0 0 1px rgba(0,0,0,.25);overflow:hidden}
#wk-syspace .wk-sy-bar{display:flex;align-items:center;gap:8px;height:32px;padding:0 5px 0 8px;margin:0 -3px;
  background:linear-gradient(#3d95ff 0,#0a5fe0 9%,#0058e6 48%,#0a4fd0 88%,#083fa8 100%);color:#fff;
  border-radius:9px 9px 0 0;font:700 13px Trebuchet MS,Verdana,sans-serif;text-shadow:1px 1px 0 #0a246a;user-select:none}
#wk-syspace .wk-sy-dot{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#ffcc99 40%,#ff9933);box-shadow:0 0 0 1px #0a246a;flex:none}
#wk-syspace .wk-sy-title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#wk-syspace .wk-sy-ctl{display:flex;gap:3px}
#wk-syspace .wk-sy-ctl i{position:relative;width:22px;height:22px;border-radius:3px;border:1px solid #fff;
  background:linear-gradient(#5b9aff,#2562e3 55%,#1c4fc4)}
#wk-syspace .wk-sy-ctl i::before,#wk-syspace .wk-sy-ctl i::after{content:"";position:absolute;background:#fff}
#wk-syspace .wk-sy-min::before{left:5px;bottom:5px;width:9px;height:3px}
#wk-syspace .wk-sy-max::before{left:5px;top:5px;width:10px;height:10px;background:none;border:1px solid #fff;border-top-width:3px}
#wk-syspace .wk-sy-x{background:linear-gradient(#e98a6e,#d4492a 55%,#b93417)!important}
#wk-syspace .wk-sy-x::before,#wk-syspace .wk-sy-x::after{left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;transform:rotate(45deg)}
#wk-syspace .wk-sy-x::after{transform:rotate(-45deg)}
#wk-syspace .wk-sy-body{background:#fff;margin:0;padding:clamp(16px,3vw,28px);border-top:1px solid #0a246a}
#wk-syspace .wk-sy-h{margin:0 0 10px;font:900 clamp(26px,5.6vw,40px)/1.05 "Arial Black",Arial,Verdana,sans-serif;color:#003399;letter-spacing:-.02em;
  padding-bottom:8px;border-bottom:3px solid #ff9933}
#wk-syspace .wk-sy-p{margin:0 0 18px;max-width:64ch;color:#222}
#wk-syspace .wk-sy-join{display:inline-flex;align-items:center;min-height:44px;margin:0 0 18px;padding:0 14px;border:1px solid #003399;border-radius:4px;background:#003399;color:#fff;font-weight:700;text-decoration:none}
#wk-syspace .wk-sy-join:hover{background:#164bbb}
#wk-syspace .wk-sy-join:focus-visible{outline:2px solid #003399;outline-offset:3px}
#wk-syspace .wk-sy-h3{margin:22px 0 8px;padding:3px 8px;background:#ffcc99;color:#ff6600;font:700 12px Verdana,sans-serif;border-bottom:1px solid #000}
#wk-syspace table{border-collapse:collapse;width:100%}
#wk-syspace .wk-sy-strip{border:1px solid #6699cc}
#wk-syspace .wk-sy-strip th{width:27%;padding:7px 10px;background:#b1d0f0;color:#336699;font:700 12px Verdana,sans-serif;text-align:left;vertical-align:middle;border-bottom:1px solid #fff}
#wk-syspace .wk-sy-strip .wk-sy-val{width:21%;padding:5px 10px;background:#d5e8fb;border-bottom:1px solid #fff;vertical-align:middle}
#wk-syspace .wk-sy-val b{display:inline-block;font:900 22px/1 "Arial Black",Arial,sans-serif;color:#003399;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
#wk-syspace .wk-sy-val b[data-state="unavailable"]{font:700 13px Verdana,sans-serif;color:#cc0000;letter-spacing:0}
#wk-syspace .wk-sy-val b[data-state="loading"]{font:400 13px Verdana,sans-serif;color:#336699;letter-spacing:0}
#wk-syspace .wk-sy-val b[data-state="ok"]::after{content:"";display:inline-block;width:8px;height:8px;margin-left:8px;border-radius:50%;background:#2fb344;vertical-align:middle;box-shadow:0 0 0 0 rgba(47,179,68,.6);animation:wk-sy-pulse 2.2s ease-out infinite}
@keyframes wk-sy-pulse{0%{box-shadow:0 0 0 0 rgba(47,179,68,.55)}70%,100%{box-shadow:0 0 0 8px rgba(47,179,68,0)}}
#wk-syspace .wk-sy-note{padding:6px 10px;font-size:11px;color:#444;vertical-align:middle;border-bottom:1px solid #d5e8fb}
#wk-syspace .wk-sy-when{display:block;color:#666;font-size:10.5px}
#wk-syspace .wk-sy-status{display:flex;justify-content:space-between;gap:12px;padding:3px 10px;background:#ece9d8;border-top:1px solid #aca899;font-size:11px;color:#333}
#wk-syspace .wk-sy-zone{padding-left:16px;position:relative}
#wk-syspace .wk-sy-zone::before{content:"";position:absolute;left:0;top:3px;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#9fd0ff,#2562e3)}
#wk-syspace .wk-sy-flip{margin:30px 0 0;text-align:center}
#wk-syspace .wk-sy-flip .m-btn{min-width:min(100%,320px);animation:none}

@media (max-width:640px){
  #wk-syspace .wk-sy-strip,#wk-syspace .wk-sy-strip tbody,#wk-syspace .wk-sy-strip tr,#wk-syspace .wk-sy-strip th,#wk-syspace .wk-sy-strip td{display:block;width:auto!important}
  #wk-syspace .wk-sy-strip tr{border-bottom:1px solid #6699cc}
  #wk-syspace .wk-sy-ctl{display:none}
}
html[data-still] #wk-syspace .wk-sy-val b::after{animation:none!important}
@media (prefers-reduced-motion:reduce){#wk-syspace .wk-sy-val b::after{animation:none}}