/* Agent Constellation.
   The one screen in the group that is deliberately dark: it is a command view
   read in a dim office at 4am, not a document. Everything else Lonmar runs
   stays on white. */

*{margin:0;padding:0;box-sizing:border-box}
/* The `hidden` attribute is only a UA rule of `display:none`, so ANY class that
   sets display beats it. Both the sign-in gate and the side panels are flex
   containers, so without this they stayed on screen after being "hidden" —
   the gate floated over a signed-in console and an empty panel sat open. */
[hidden]{display:none !important}
:root{
  --bg:#1a1e25; --bg-2:#232830; --ink:#e8e6e1; --ink-2:#8b919b; --line:rgba(255,255,255,.09);
  --amber:#E2723B; --gold:#E8B44A; --good:#5BC46A; --bad:#E2495B; --calm:#4A9BE8;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:Inter,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
html,body{height:100%}
body{
  background:radial-gradient(ellipse 70% 60% at 50% 46%,#2c323d 0%,#232830 48%,#1a1e25 100%);
  color:var(--ink);font-family:var(--sans);overflow:hidden;
}

/* ── sign in ────────────────────────────────────────────────────────────── */
.gate{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;z-index:50}
.gatecard{
  width:min(400px,100%);background:rgba(28,32,40,.86);border:1px solid var(--line);
  border-radius:18px;padding:34px 30px;backdrop-filter:blur(14px);
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.gatemark{
  width:46px;height:46px;margin:0 auto 18px;border-radius:50%;
  background:radial-gradient(circle at 50% 42%,var(--gold),var(--amber) 62%,#8c3f18);
  box-shadow:0 0 0 8px rgba(226,114,59,.10),0 0 34px rgba(232,180,74,.42);
}
.gatecard h1{font-family:var(--serif);font-weight:300;font-size:31px;text-align:center;letter-spacing:.02em}
.gatecard>.muted{text-align:center;margin:2px 0 22px;letter-spacing:.16em;font-size:11px;text-transform:uppercase}
.muted{color:var(--ink-2)}
label{display:block;font-size:13px;color:var(--ink-2);margin-bottom:14px}
input{
  font:inherit;display:block;width:100%;margin-top:6px;padding:12px 13px;border-radius:10px;
  border:1px solid var(--line);background:rgba(255,255,255,.045);color:var(--ink);
}
input:focus{outline:2px solid var(--amber);outline-offset:1px;background:rgba(255,255,255,.07)}
.btn{
  font:inherit;font-weight:600;width:100%;padding:12px 18px;border-radius:10px;cursor:pointer;
  border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--ink);
}
.btn:disabled{opacity:.55;cursor:default}
.btn--primary{background:var(--amber);border-color:var(--amber);color:#1a1e25}
.btn--primary:hover:not(:disabled){background:#ef8149;border-color:#ef8149}
.err{color:#ff9a9a;font-size:13px;margin:0 0 12px}

/* ── stage ──────────────────────────────────────────────────────────────── */
.stagewrap{position:relative;width:100%;height:100vh;min-height:460px;overflow:hidden}
#sky{position:absolute;inset:0;width:100%;height:100%;display:block}
#nodes{position:absolute;inset:0}

.topbar{
  position:absolute;top:18px;right:22px;display:flex;align-items:center;gap:10px;
  font-size:11px;letter-spacing:.14em;color:var(--ink-2);text-transform:uppercase;z-index:8;
}
.topbar b{color:var(--ink);font-weight:600}
.stat{white-space:nowrap}
.sep{opacity:.35}
.lnk{
  font:inherit;font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-left:8px;
  background:none;border:0;color:var(--ink-2);cursor:pointer;border-bottom:1px solid transparent;
}
.lnk:hover{color:var(--ink);border-bottom-color:var(--ink-2)}
.hint{
  position:absolute;left:0;right:0;bottom:22px;text-align:center;font-size:12px;
  color:var(--ink-2);letter-spacing:.04em;z-index:7;pointer-events:none;
}

/* ── the core ───────────────────────────────────────────────────────────── */
.core{
  position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;
  border:0;background:none;cursor:pointer;z-index:9;
}
/* The sphere itself is painted on the canvas. What is left here is a hit area
   over it, plus the label — drawing a ring and a disc again would sit a flat
   circle on top of the thing it is meant to be. */
.core__ring{display:none}
.core__dot{display:none}
.core__label{
  position:absolute;left:0;right:0;bottom:-22px;text-align:center;font-size:10px;
  letter-spacing:.30em;color:var(--gold);text-transform:uppercase;
}
.core:hover .core__label{color:#f7dca4}

.core:focus-visible{outline:2px solid var(--gold);outline-offset:6px;border-radius:50%}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.12);opacity:.22}}

/* ── departments ────────────────────────────────────────────────────────── */
.dept{
  position:absolute;transform:translate(-50%,-50%);text-align:center;cursor:pointer;
  background:none;border:0;color:inherit;font:inherit;padding:8px 10px;border-radius:12px;
  transition:background .18s ease;
}
.dept:hover,.dept:focus-visible{background:rgba(255,255,255,.05);outline:none}
.dept__name{
  font-family:var(--serif);font-weight:400;font-size:16px;letter-spacing:.18em;
  text-transform:uppercase;white-space:nowrap;
}
.dept__sub{font-size:10.5px;color:var(--ink-2);margin-top:3px;white-space:nowrap}
.dept__bar{
  height:2px;border-radius:2px;margin:7px auto 0;width:36px;opacity:.75;
}
.dept__n{font-size:10px;color:var(--ink-2);margin-top:5px;letter-spacing:.1em}

/* ── panels ─────────────────────────────────────────────────────────────── */
.panel{
  position:fixed;top:0;right:0;height:100vh;width:min(470px,100%);z-index:40;
  background:rgba(24,28,35,.96);border-left:1px solid var(--line);
  backdrop-filter:blur(16px);display:flex;flex-direction:column;
  box-shadow:-24px 0 70px rgba(0,0,0,.45);
  animation:slidein .22s ease;
}
@keyframes slidein{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.panel__top{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:22px 22px 16px;border-bottom:1px solid var(--line);
}
.panel__top h2{font-family:var(--serif);font-weight:400;font-size:26px;letter-spacing:.04em}
.panel__top .muted{font-size:12px;margin-top:3px}
.x{
  font:inherit;font-size:24px;line-height:1;background:none;border:0;color:var(--ink-2);
  cursor:pointer;padding:2px 6px;border-radius:8px;
}
.x:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.panel__body{padding:20px 22px 40px;overflow-y:auto;flex:1}

.headline{font-family:var(--serif);font-size:22px;font-weight:400;line-height:1.3;margin:0 0 18px}
.sec{margin:0 0 20px}
.sec h3{
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);
  margin:0 0 8px;font-weight:600;
}
.sec p{font-size:14.5px;line-height:1.5;margin:0 0 5px}

.caught{list-style:none;margin:0 0 8px;padding:0}
.caught li{display:flex;gap:10px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}
.caught b{font-variant-numeric:tabular-nums;color:var(--gold);min-width:34px;font-size:17px}

.todo{list-style:none;margin:0;padding:0}
.todo li{padding:9px 0;border-bottom:1px solid var(--line)}
.todo .what{font-size:14px}
.todo .who{font-size:11.5px;color:var(--ink-2);margin-top:2px}
.todo .item{color:var(--gold)}

.moves{list-style:none;margin:0;padding:0;font-size:13.5px}
.moves li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line)}
.moves .d{font-variant-numeric:tabular-nums;white-space:nowrap}
.moves .up{color:var(--good)} .moves .down{color:var(--bad)}

.src{font-size:11.5px;color:var(--ink-2);line-height:1.5;margin-top:22px;
  padding-top:14px;border-top:1px solid var(--line)}

/* agents in a department */
.agent{padding:13px 0;border-bottom:1px solid var(--line)}
.agent__top{display:flex;align-items:baseline;gap:9px}
.agent__name{font-size:15px;font-weight:600}
.tag{
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;padding:2px 7px;border-radius:999px;
  border:1px solid var(--line);color:var(--ink-2);white-space:nowrap;
}
.tag--qc{border-color:rgba(74,155,232,.5);color:#8cc2f5}
.tag--lead{border-color:rgba(232,180,74,.5);color:var(--gold)}
.tag--planned{opacity:.7}
.agent__role{font-size:13px;color:var(--ink-2);line-height:1.45;margin-top:4px}
.agent__runs{font-size:11.5px;color:var(--ink-2);margin-top:4px;opacity:.85;font-family:ui-monospace,Menlo,monospace}
.agent__val{margin-left:auto;font-variant-numeric:tabular-nums;font-size:19px;font-weight:600}
.agent--planned{opacity:.52}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none}
.dot--live{background:var(--good);box-shadow:0 0 8px rgba(91,196,106,.8)}
.dot--planned{background:var(--ink-2);opacity:.6}

@media (max-width:760px){
  .dept__name{font-size:13px;letter-spacing:.12em}
  .dept__sub{display:none}
  .core{width:112px;height:112px;margin:-56px 0 0 -56px}
  .core__dot{width:52px;height:52px;margin:-26px 0 0 -26px}
  .panel{width:100%}
  .hint{font-size:11px;padding:0 20px}
}