/* ikag_kit ui v1: the 2D interface kit for the IKAG Studio HQ (public site first; the local HQ app can load the same file).
   DESIGN PROPOSAL, not applied to the live site. Style truth: the story art (Headquarters V1, citadel, hatching day, "READY!" visor, GM arcade):
   inked comic outlines, dusk sky (plum / pink / amber), cyan holo light, the inverted-triangle emblem, pixel type on every in-world screen,
   angular cut corners like the building's beams. Everything is a class prefixed k- and reads its colours from the tokens below. */
:root{
  --k-ink:#0c0a17; --k-night:#15112a; --k-plum:#221b40; --k-panel:#1b1634; --k-raise:#2a2250; --k-line:#43377a;
  --k-paper:#f3ecdb; --k-dim:#aba3c9; --k-mute:#7c749c;
  --k-cy:#5fe6e6; --k-cy-deep:#1f8c96; --k-dusk:#f29bb0; --k-amber:#f6b55c; --k-gold:#e8c15a; --k-red:#f0506a; --k-green:#5fdc93;
  --k-display:'Chakra Petch','Barlow Condensed',system-ui,sans-serif; --k-pixel:'Silkscreen','Courier New',monospace; --k-body:system-ui,-apple-system,'Segoe UI',sans-serif;
  --k-cut:12px; --k-s1:4px; --k-s2:8px; --k-s3:12px; --k-s4:16px; --k-s5:24px; --k-s6:32px;
}
.k-root{color:var(--k-paper);font:15px/1.5 var(--k-body)}
.k-root *{box-sizing:border-box}

/* type scale */
.k-h1{font:700 34px/1.02 var(--k-display);letter-spacing:.01em;text-transform:uppercase;margin:0}
.k-h2{font:700 26px/1.05 var(--k-display);letter-spacing:.02em;text-transform:uppercase;margin:0}
.k-h3{font:700 18px/1.15 var(--k-display);letter-spacing:.02em;margin:0}
.k-label{font:400 11px/1.2 var(--k-pixel);letter-spacing:.06em;text-transform:uppercase;color:var(--k-cy)}
.k-label.gold{color:var(--k-gold)}.k-label.dim{color:var(--k-mute)}
.k-text{font:15px/1.5 var(--k-body);color:var(--k-paper);margin:0}.k-small{font:13px/1.45 var(--k-body);color:var(--k-dim);margin:0}

/* the inverted triangle: the studio's mark, used as bullet, live dot and marker */
.k-tri{display:inline-block;width:10px;height:9px;background:var(--k-cy);clip-path:polygon(0 0,100% 0,50% 100%);flex:none}
.k-tri.gold{background:var(--k-gold)}.k-tri.off{background:var(--k-red)}.k-tri.idle{background:var(--k-mute)}
.k-tri.live{animation:kPulse 1.6s ease-in-out infinite}
@keyframes kPulse{50%{opacity:.35}}

/* surface: inked outline, cut corners (top-left + bottom-right), hard comic shadow */
.k-surface{position:relative;background:var(--k-ink);padding:2px;clip-path:polygon(var(--k-cut) 0,100% 0,100% calc(100% - var(--k-cut)),calc(100% - var(--k-cut)) 100%,0 100%,0 var(--k-cut))}
.k-surface>.k-in{background:linear-gradient(180deg,var(--k-plum),var(--k-panel));padding:var(--k-s4);height:100%;clip-path:polygon(calc(var(--k-cut) - 1px) 0,100% 0,100% calc(100% - var(--k-cut) + 1px),calc(100% - var(--k-cut) + 1px) 100%,0 100%,0 calc(var(--k-cut) - 1px))}
.k-surface.line{background:var(--k-line)}.k-surface.cy{background:var(--k-cy)}.k-surface.gold{background:var(--k-gold)}
.k-shadow{filter:drop-shadow(4px 4px 0 #0c0a17cc)}
/* holo frame: corner brackets like the screens in the art */
.k-frame{position:relative}
.k-frame::before,.k-frame::after{content:"";position:absolute;width:16px;height:16px;border:2px solid var(--k-cy);pointer-events:none}
.k-frame::before{left:-5px;top:-5px;border-right:0;border-bottom:0}.k-frame::after{right:-5px;bottom:-5px;border-left:0;border-top:0}

/* buttons */
.k-btn{--c:var(--k-cy);display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:0;cursor:pointer;font:700 15px/1 var(--k-display);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;white-space:nowrap;color:var(--k-ink);background:var(--c);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);transition:transform .08s,filter .12s}
.k-btn:hover{filter:brightness(1.12)}.k-btn:active{transform:translate(1px,2px)}
.k-btn.gold{--c:var(--k-gold)}.k-btn.dusk{--c:var(--k-dusk)}
.k-btn.ghost{background:var(--k-raise);color:var(--k-paper);box-shadow:inset 0 0 0 2px var(--k-line)}.k-btn.ghost:hover{box-shadow:inset 0 0 0 2px var(--k-cy);color:var(--k-cy);filter:none}
.k-btn.sm{padding:7px 11px;font-size:13px}
.k-btn:disabled,.k-btn[aria-disabled=true]{background:var(--k-raise);color:var(--k-mute);cursor:default;filter:none;transform:none;box-shadow:none}
.k-btn:focus-visible,.k-tab:focus-visible,.k-card.click:focus-visible,.k-x:focus-visible,.k-input:focus-visible{outline:2px solid var(--k-gold);outline-offset:3px}
.k-x{width:36px;height:36px;display:grid;place-items:center;border:0;cursor:pointer;background:var(--k-raise);color:var(--k-paper);font:700 16px var(--k-display);box-shadow:inset 0 0 0 2px var(--k-line);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.k-x:hover{box-shadow:inset 0 0 0 2px var(--k-cy);color:var(--k-cy)}

/* top bar */
.k-nav{display:inline-flex;align-items:stretch;gap:2px;padding:2px;background:var(--k-ink);clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.k-tab{padding:11px 18px;border:0;cursor:pointer;background:var(--k-panel);color:var(--k-paper);font:600 15px/1 var(--k-display);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;position:relative}
.k-tab:hover{background:var(--k-raise);color:var(--k-cy)}
.k-tab.on{background:var(--k-cy);color:var(--k-ink)}.k-tab.on::after{content:"";position:absolute;left:50%;bottom:-2px;width:10px;height:7px;margin-left:-5px;background:var(--k-ink);clip-path:polygon(0 0,100% 0,50% 100%)}
.k-tab.cta{background:var(--k-gold);color:var(--k-ink)}.k-tab.cta:hover{filter:brightness(1.1)}

/* status chip + status list */
.k-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 10px 5px 8px;background:var(--k-panel);box-shadow:inset 0 0 0 2px var(--k-line);font:400 11px/1 var(--k-pixel);letter-spacing:.04em;text-transform:uppercase;color:var(--k-dim);white-space:nowrap}
.k-chip b{font:700 14px/1 var(--k-display);letter-spacing:.06em;color:var(--k-paper)}
.k-chip.work{box-shadow:inset 0 0 0 2px var(--k-cy-deep);color:var(--k-cy)}.k-chip.wait{box-shadow:inset 0 0 0 2px var(--k-gold);color:var(--k-gold)}.k-chip.off{color:var(--k-red)}.k-chip.idle b{color:var(--k-dim)}
.k-roster{display:grid;gap:4px;justify-items:end}
.k-roster .k-chip{font-size:12px;padding:7px 12px 7px 10px}.k-roster .k-chip b{font-size:16px;min-width:74px}

/* caption above a Smith + thought bubble + marker on an object */
.k-cap{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;background:var(--k-paper);color:var(--k-ink);font:600 13px/1.2 var(--k-display);letter-spacing:.03em;white-space:nowrap;position:relative;box-shadow:0 0 0 2px var(--k-ink),3px 3px 0 2px #0c0a17aa}
.k-cap::after{content:"";position:absolute;left:50%;bottom:-9px;margin-left:-6px;width:12px;height:8px;background:var(--k-paper);clip-path:polygon(0 0,100% 0,50% 100%);filter:drop-shadow(0 2px 0 var(--k-ink))}
.k-cap.video{background:var(--k-amber)}.k-cap.video::after{background:var(--k-amber)}
.k-cap small{font:400 10px/1 var(--k-pixel);opacity:.7}
.k-spot{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border:0;cursor:pointer;background:var(--k-ink);color:var(--k-cy);font:700 14px/1 var(--k-display);letter-spacing:.08em;text-transform:uppercase;box-shadow:inset 0 0 0 2px var(--k-cy),0 0 18px #5fe6e666;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.k-spot:hover{background:var(--k-cy);color:var(--k-ink)}.k-spot:hover .k-tri{background:var(--k-ink)}

/* cards */
.k-card{position:relative;background:var(--k-raise);box-shadow:inset 0 0 0 2px var(--k-line);padding:14px 16px;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.k-card.click{cursor:pointer;border:0;width:100%;text-align:left;color:inherit;font:inherit;display:block}.k-card.click:hover{box-shadow:inset 0 0 0 2px var(--k-cy)}
.k-card.work{box-shadow:inset 0 0 0 2px var(--k-cy-deep)}.k-card.work::before{content:"";position:absolute;left:0;top:10px;bottom:0;width:4px;background:var(--k-cy)}
.k-card.video.work{box-shadow:inset 0 0 0 2px #a8742c}.k-card.video.work::before{background:var(--k-amber)}
.k-row{display:flex;align-items:center;gap:10px}.k-row.top{align-items:flex-start}.k-row.between{justify-content:space-between}.k-grow{flex:1;min-width:0}
.k-tag{display:inline-block;padding:3px 6px;background:var(--k-ink);color:var(--k-cy);font:400 10px/1 var(--k-pixel);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.k-tag.gold{color:var(--k-gold)}.k-tag.dusk{color:var(--k-dusk)}
.k-steps{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:5px}
.k-steps li{display:flex;gap:8px;align-items:baseline;font:13px/1.4 var(--k-body);color:var(--k-dim)}.k-steps li::before{content:"";flex:none;width:7px;height:6px;background:var(--k-mute);clip-path:polygon(0 0,100% 0,50% 100%);transform:translateY(-1px)}
.k-steps li small{margin-left:auto;flex:none;font:400 10px/1 var(--k-pixel);color:var(--k-mute)}
.k-thumb{aspect-ratio:9/16;background:#000 center/cover;box-shadow:inset 0 0 0 2px var(--k-line);position:relative;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.k-thumb::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px;background:var(--k-ink);box-shadow:inset 0 0 0 2px var(--k-cy);border-radius:50%}
.k-thumb::before{content:"";position:absolute;z-index:1;left:50%;top:50%;margin:-8px 0 0 -5px;border:8px solid transparent;border-left:13px solid var(--k-cy);border-right:0}
.k-meter{height:8px;background:var(--k-red);box-shadow:0 0 0 2px var(--k-ink)}.k-meter i{display:block;height:100%;background:var(--k-green)}

/* side panel */
.k-panel{width:420px;max-width:100%;background:var(--k-ink);padding:0 0 0 3px;position:relative}
.k-panel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--k-cy),var(--k-dusk) 60%,var(--k-amber))}
.k-panel>.k-in{background:linear-gradient(180deg,var(--k-plum),var(--k-night));min-height:100%}
.k-panel-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:20px 22px 16px;border-bottom:2px solid var(--k-ink);background:var(--k-plum)}
.k-panel-b{padding:18px 22px 28px;display:grid;gap:18px}
.k-sec{display:grid;gap:10px}

/* activity panel */
.k-feed{width:400px;max-width:100%}
.k-feed ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:7px}
.k-feed li{display:flex;gap:8px;align-items:baseline;font:14px/1.4 var(--k-body);color:var(--k-paper)}.k-feed li b{font:700 14px/1 var(--k-display);letter-spacing:.06em}
.k-feed li.then{color:var(--k-dim)}.k-feed li .k-tri{transform:translateY(-1px)}

/* form */
.k-input{width:100%;padding:11px 12px;border:0;background:var(--k-ink);color:var(--k-paper);font:16px var(--k-body);box-shadow:inset 0 0 0 2px var(--k-line)}
.k-input::placeholder{color:var(--k-mute)}.k-input.err{box-shadow:inset 0 0 0 2px var(--k-red)}
.k-msg{padding:10px 12px;font:14px/1.4 var(--k-body);background:var(--k-ink);box-shadow:inset 3px 0 0 var(--k-cy)}.k-msg.ok{box-shadow:inset 3px 0 0 var(--k-green);color:var(--k-green)}.k-msg.err{box-shadow:inset 3px 0 0 var(--k-red);color:#ff9aab}.k-msg.soon{box-shadow:inset 3px 0 0 var(--k-mute);color:var(--k-dim)}

/* headline block + hint */
.k-hero{max-width:300px}.k-hero .k-h1{text-shadow:3px 3px 0 var(--k-ink)}.k-hero p{margin:8px 0 0;font:15px/1.45 var(--k-body);color:var(--k-paper);text-shadow:0 1px 8px #0c0a17}
.k-hint{display:inline-block;padding:6px 12px;background:#0c0a17cc;color:var(--k-dim);font:400 11px/1.2 var(--k-pixel);letter-spacing:.04em}
@media (prefers-reduced-motion:reduce){.k-tri.live{animation:none}.k-btn{transition:none}}