/* ==========================================================================
   Control Panel — design tokens
   Nothing's information system printed on liquid glass. Structure, type and
   restraint come from the Thoughts Inform Music Machine; the material (blur,
   specular edge, depth) is the glass half. Edit values here to re-skin.
   ========================================================================== */
:root{
  /* Ground. Blue-biased near-black, not #000 — glass needs something to sit on. */
  --ink:#05060a;
  --ink-2:#080a11;

  /* Glass material */
  --glass:rgba(255,255,255,.045);
  --glass-2:rgba(255,255,255,.028);
  --glass-hi:rgba(255,255,255,.16);
  --line:rgba(255,255,255,.085);
  --line-soft:rgba(255,255,255,.045);

  --txt:#f1f2f7;
  --muted:#7b8090;
  --muted-2:#4c5162;

  /* Semantic. One red, one amber. Client colour is carried by dot glyphs. */
  --red:#ff2a2a;
  --amber:#ffb340;

  --mono:"Space Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --dot:"Doto","Space Mono",monospace;
  --sans:"Inter",ui-sans-serif,system-ui,sans-serif;

  --r:16px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--ink);color:var(--txt);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;min-height:100vh;position:relative;overflow-x:hidden;
}

/* Lit ground: soft blooms with the 22px dot grid over them. */
.ground{position:fixed;inset:0;z-index:0;pointer-events:none;}
.ground::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(60rem 40rem at 8% 92%, rgba(96,86,255,.16), transparent 62%),
    radial-gradient(52rem 36rem at 96% 6%, rgba(255,42,42,.09), transparent 60%),
    radial-gradient(44rem 30rem at 72% 108%, rgba(255,140,60,.07), transparent 58%),
    linear-gradient(180deg,var(--ink-2),var(--ink));
}
.ground::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:22px 22px;background-position:-1px -1px;
  mask-image:radial-gradient(120% 100% at 50% 0%,#000 30%,transparent 100%);
}

.glass{
  position:relative;
  background:linear-gradient(165deg,var(--glass),var(--glass-2));
  border:1px solid var(--line);border-radius:var(--r);
  backdrop-filter:blur(22px) saturate(1.5);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);
  box-shadow:0 24px 48px -28px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.03);
}
/* Specular top edge — the liquid-glass tell. */
.glass::before{
  content:"";position:absolute;left:14px;right:14px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--glass-hi) 22%,var(--glass-hi) 78%,transparent);
  pointer-events:none;
}

.micro{font-family:var(--mono);font-size:10px;letter-spacing:2.2px;text-transform:uppercase;color:var(--muted);}
.idx{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10px;
  letter-spacing:2.4px;text-transform:uppercase;color:var(--muted);}
.idx b{color:var(--red);font-weight:700;}
.idx .rule{flex:1;height:1px;background:var(--line);}

/* ---------- frame ---------- */
.app{position:relative;z-index:1;display:grid;grid-template-columns:236px 1fr;
  gap:18px;padding:18px;min-height:100vh;align-items:start;}

.rail{position:sticky;top:18px;padding:20px 16px;display:flex;flex-direction:column;
  gap:22px;max-height:calc(100vh - 36px);overflow:auto;}
.rail::-webkit-scrollbar{width:0;}

.brand{display:flex;align-items:center;gap:12px;}
.mark{width:36px;height:36px;border-radius:50%;flex:none;border:1px solid var(--line);
  display:grid;place-items:center;background:radial-gradient(circle at 50% 50%,rgba(255,42,42,.14),transparent 68%);}
.mark i{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 12px var(--red);display:block;}
.wordmark{font-family:var(--dot);font-weight:900;font-size:15px;letter-spacing:.8px;line-height:1.15;}
.wordmark span{display:block;font-family:var(--mono);font-weight:400;font-size:8.5px;
  letter-spacing:2.4px;color:var(--muted-2);margin-top:5px;}

.nav{display:flex;flex-direction:column;gap:2px;}
.nav button{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  padding:9px 11px;border-radius:9px;font:inherit;font-size:13px;color:var(--muted);
  background:none;border:1px solid transparent;cursor:pointer;text-align:left;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.nav button:hover{background:rgba(255,255,255,.05);color:var(--txt);}
.nav button:focus-visible{outline:2px solid var(--red);outline-offset:2px;}
.nav button[aria-current="true"]{
  color:var(--txt);
  background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.045));
  border-color:var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.13);
}
.nav .n{font-family:var(--mono);font-style:normal;font-size:10px;color:var(--muted-2);
  font-variant-numeric:tabular-nums;}
.nav button[aria-current="true"] .n{color:var(--red);}
.nav .n.hot{color:var(--red);}

.clients{display:flex;flex-direction:column;gap:1px;}
.client{display:flex;align-items:center;gap:11px;padding:8px 11px;border-radius:9px;
  cursor:pointer;border:1px solid transparent;background:none;width:100%;font:inherit;text-align:left;
  transition:background .15s ease;}
.client:hover{background:rgba(255,255,255,.045);}
.client[aria-current="true"]{background:rgba(255,255,255,.07);border-color:var(--line);}
.client .nm{font-size:12.5px;color:#c3c7d4;flex:1;line-height:1.25;}
.client .ct{font-family:var(--mono);font-size:10.5px;color:var(--muted-2);font-variant-numeric:tabular-nums;}
.client.hot .ct{color:var(--red);}
.client.hot .gl{color:var(--red);}

/* Client identity is a dot-matrix glyph, not a colour. Keeps the palette at
   one red and one amber no matter how many clients there are. */
.gl{display:grid;grid-template-columns:repeat(3,3px);gap:2px;flex:none;width:13px;color:#9aa0b2;}
.gl b{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.16;}
.gl b.on{opacity:1;}

.capture{margin-top:auto;padding:13px;border-radius:12px;
  border:1px dashed rgba(255,255,255,.16);background:rgba(255,255,255,.028);}
.capture .k{display:flex;align-items:center;justify-content:space-between;
  font-family:var(--mono);font-size:9.5px;letter-spacing:1.8px;color:var(--muted);text-transform:uppercase;}
.capture .k kbd{font-family:var(--mono);font-size:9px;color:var(--txt);border:1px solid var(--line);
  border-radius:4px;padding:2px 5px;background:rgba(255,255,255,.05);}
.capture p{margin:9px 0 0;font-size:11.5px;line-height:1.5;color:var(--muted-2);}

/* ---------- stage ---------- */
.stage{display:flex;flex-direction:column;gap:18px;min-width:0;}
.top{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:4px 4px 0;flex-wrap:wrap;}
.hello{font-family:var(--dot);font-weight:800;font-size:30px;letter-spacing:1.4px;line-height:1;margin:0;}
.hello em{font-style:normal;color:var(--muted-2);}
.sub{margin:9px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:2px;color:var(--muted);text-transform:uppercase;}
.live{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;
  letter-spacing:1.8px;color:var(--muted);text-transform:uppercase;}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--red);animation:pulse 1.9s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.22;}}
@media (prefers-reduced-motion:reduce){.pulse{animation:none;}}

.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
.stat{padding:16px 17px;}
.stat .lab{font-family:var(--mono);font-size:9.5px;letter-spacing:2px;color:var(--muted);text-transform:uppercase;}
.stat .val{font-family:var(--dot);font-weight:900;font-size:40px;line-height:1;margin-top:12px;font-variant-numeric:tabular-nums;}
.stat .note{margin-top:9px;font-size:11px;color:var(--muted-2);line-height:1.4;}
.stat.alarm{border-color:rgba(255,42,42,.36);background:linear-gradient(165deg,rgba(255,42,42,.11),rgba(255,42,42,.03));}
.stat.alarm .val{color:var(--red);}
.stat.alarm .lab{color:#ff9b9b;}
.stat.alarm .note{color:#d69a9a;}
.stat.warn .val{color:var(--amber);}

.cols{display:grid;grid-template-columns:1.25fr .95fr;gap:18px;align-items:start;}
.col{display:flex;flex-direction:column;gap:18px;min-width:0;}

.panel{padding:18px;}
.phead{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px;}
.ptitle{font-family:var(--dot);font-weight:800;font-size:14px;letter-spacing:2.2px;text-transform:uppercase;margin:0;}
.pmeta{font-family:var(--mono);font-size:9.5px;letter-spacing:1.6px;color:var(--muted-2);text-transform:uppercase;}

/* task rows */
.tasks{display:flex;flex-direction:column;}
.task{display:grid;grid-template-columns:16px 13px minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:11px 8px;border-top:1px solid var(--line-soft);border-radius:8px;transition:background .14s ease;}
.task:first-child{border-top:0;}
.task:hover{background:rgba(255,255,255,.04);}
.task.done .tname{color:var(--muted-2);text-decoration:line-through;}
.box{width:15px;height:15px;border-radius:5px;border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.03);cursor:pointer;flex:none;padding:0;
  transition:border-color .14s ease,background .14s ease;}
.task:hover .box{border-color:rgba(255,255,255,.45);}
.box:focus-visible{outline:2px solid var(--red);outline-offset:2px;}
.box[aria-checked="true"]{background:var(--red);border-color:var(--red);}
.box.pending{opacity:.45;cursor:progress;}
.tname{font-size:13.5px;line-height:1.35;color:#e6e8ef;min-width:0;}
.tflags{display:flex;align-items:center;gap:7px;flex:none;}
.chip{font-family:var(--mono);font-size:8.5px;letter-spacing:1.5px;text-transform:uppercase;
  padding:3px 7px;border-radius:5px;border:1px solid var(--line);color:var(--muted);white-space:nowrap;}
.chip.hi{color:var(--red);border-color:rgba(255,42,42,.4);background:rgba(255,42,42,.09);}
.chip.prog{color:var(--amber);border-color:rgba(255,179,64,.34);background:rgba(255,179,64,.08);}
.chip.nodate{color:var(--muted-2);border-style:dashed;}

/* dot-bar load chart */
.load{display:flex;flex-direction:column;gap:12px;}
.lrow{display:grid;grid-template-columns:13px minmax(0,1fr) 30px;gap:12px;align-items:center;}
.lname{font-size:12px;color:#c3c7d4;}
.bar{display:flex;gap:3px;align-items:center;margin-top:5px;flex-wrap:wrap;}
.bar i{width:5px;height:5px;border-radius:50%;background:#fff;opacity:.13;}
.bar i.f{opacity:.85;}
.bar.red i.f{background:var(--red);opacity:1;}
.lval{font-family:var(--mono);font-size:11px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;}

/* schedule */
.dhead{display:flex;align-items:center;gap:10px;padding:12px 0 8px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:2.2px;color:var(--muted);text-transform:uppercase;}
.dhead .rule{flex:1;height:1px;background:var(--line-soft);}
.dhead.today{color:var(--red);}
.ev{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;padding:8px;border-radius:8px;align-items:start;}
.ev:hover{background:rgba(255,255,255,.04);}
.ev .t{font-family:var(--mono);font-size:10.5px;color:var(--muted);padding-top:2px;font-variant-numeric:tabular-nums;}
.ev .s{font-size:12.5px;line-height:1.35;color:#e6e8ef;}
.ev .w{margin-top:5px;display:flex;gap:6px;flex-wrap:wrap;}
.ev.past .s,.ev.past .t{color:var(--muted-2);text-decoration:line-through;text-decoration-color:rgba(255,255,255,.2);}
.ev.clash{background:rgba(255,42,42,.06);box-shadow:inset 2px 0 0 var(--red);}

/* empty / not-connected states */
.stub{padding:22px 18px;border-radius:12px;text-align:center;
  border:1px dashed rgba(255,255,255,.14);background:rgba(255,255,255,.018);}
.stub .big{font-family:var(--dot);font-weight:800;font-size:13px;letter-spacing:2.4px;color:var(--muted);text-transform:uppercase;}
.stub p{margin:11px 0 14px;font-size:12px;line-height:1.55;color:var(--muted-2);}
.stub code{font-family:var(--mono);font-size:11px;color:#c3c7d4;background:rgba(255,255,255,.06);
  padding:2px 6px;border-radius:4px;}
.stub ol{margin:0;padding:0 0 0 18px;text-align:left;font-size:12px;line-height:1.7;color:var(--muted-2);}
.stub.err{border-color:rgba(255,42,42,.3);background:rgba(255,42,42,.05);}
.stub.err .big{color:#ff9b9b;}

.skel{height:13px;border-radius:4px;background:linear-gradient(90deg,
  rgba(255,255,255,.05),rgba(255,255,255,.11),rgba(255,255,255,.05));
  background-size:200% 100%;animation:sh 1.4s infinite;}
@keyframes sh{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
@media (prefers-reduced-motion:reduce){.skel{animation:none;}}

footer{padding:6px 4px 10px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:9.5px;letter-spacing:1.8px;color:var(--muted-2);text-transform:uppercase;}

@media (max-width:1080px){.cols{grid-template-columns:1fr;}.strip{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:820px){.app{grid-template-columns:1fr;}.rail{position:static;max-height:none;}}