/* ============================================================================
   Radix — one visual system across landing, dashboard, and studio.
   Metaphor: radiographs on a backlit lightbox. Everything visual is exposure
   on film. Two accents only: finding-red is pathology, amber is interaction.
   ========================================================================== */

:root{
  /* structure */
  --void:#07080C;          /* the unlit panel */
  --panel:#0D1117;
  --panel-2:#12171F;
  --rule:#1C232D;
  --rule-lit:#2B3542;

  /* radiographic density ramp: unexposed -> bright bone */
  --bone-0:#161D25;
  --bone-1:#39454F;
  --bone-2:#7B8894;
  --bone-3:#E9F0F5;

  /* the two reserved accents */
  --finding:#FF4D6D;       /* pathology, and only pathology */
  --amber:#FFB020;         /* interaction, selection, active tool */

  /* text */
  --text:#D6DFE7;
  --dim:#66727E;
  --faint:#3A4550;

  --mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --rail:56px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--void); color:var(--text); font-family:var(--sans);
  font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--amber);color:var(--void)}

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--mono); font-size:10px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--dim);
}
.display{
  font-weight:700; letter-spacing:-.035em; line-height:.98;
  font-feature-settings:"ss01";
}
.mono{font-family:var(--mono)}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- app chrome: persistent left rail ---------- */
.rail{
  position:fixed; left:0; top:0; bottom:0; width:var(--rail);
  background:var(--void); border-right:1px solid var(--rule);
  display:flex; flex-direction:column; align-items:center;
  padding:14px 0; gap:4px; z-index:50;
}
.rail .mark{
  width:30px; height:30px; margin-bottom:14px; display:grid; place-items:center;
  color:var(--void); background:var(--amber); font-family:var(--mono);
  font-weight:700; font-size:15px; border-radius:3px;
}
.rail a.nav{
  width:38px; height:38px; display:grid; place-items:center; color:var(--dim);
  border-radius:5px; position:relative; transition:color .12s, background .12s;
}
.rail a.nav:hover{color:var(--text); background:var(--panel)}
.rail a.nav.on{color:var(--amber)}
.rail a.nav.on::before{
  content:""; position:absolute; left:-14px; top:8px; bottom:8px; width:2px;
  background:var(--amber);
}
.rail a.nav svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6}
.rail .tip{
  position:absolute; left:46px; white-space:nowrap; background:var(--panel-2);
  border:1px solid var(--rule-lit); padding:3px 8px; font-family:var(--mono);
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--text);
  opacity:0; pointer-events:none; transform:translateX(-4px); transition:.12s;
}
.rail a.nav:hover .tip{opacity:1; transform:translateX(0)}
.rail .foot{margin-top:auto; font-family:var(--mono); font-size:8px; color:var(--faint);
  writing-mode:vertical-rl; letter-spacing:.2em}

.app{margin-left:var(--rail)}

/* ---------- primitives ---------- */
.panel{background:var(--panel); border:1px solid var(--rule)}
.h-label{
  font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--dim); font-weight:400; margin:0;
}
.btn{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; padding:7px 14px; border:1px solid var(--rule-lit);
  background:transparent; color:var(--dim); cursor:pointer; transition:.12s;
}
.btn:hover{border-color:var(--amber); color:var(--amber)}
.btn.solid{background:var(--amber); border-color:var(--amber); color:var(--void)}
.btn.solid:hover{filter:brightness(1.08)}
.btn:focus-visible,a:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* density chip used in legends */
.chip{display:inline-block;width:10px;height:10px;vertical-align:middle}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}