/* ============================================================================
   Site Intel — redesign mockups
   Built on the product's real tokens (src/styles/tokens.css). Nothing here
   invents a palette: the violet identity, the semantic ramp and the type scale
   are the ones already shipping. What changes is hierarchy, density and rhythm.
   ========================================================================== */

:root{
  --bg:#0e0b11; --bg-elev:#140f18; --panel:#19131e; --panel2:#1e1825; --panel-hover:#27202f;
  --text:#f3f2f5; --muted:#aba1b5; --muted2:#8b7c9c;
  --accent:#9266f7; --accent-hover:#a78bfa; --accent-soft:rgba(146,102,247,.16);
  --good:#34d399; --warn:#fbbf24; --bad:#f5546f; --info:#7cc4ff;
  --line:#2f2639; --line-soft:#261f2e;
  --r:16px; --r-sm:12px; --r-xs:8px; --pill:999px;
  --rail:232px;
  --2xs:.75rem; --xs:.8125rem; --sm:.875rem; --base:1rem; --lg:1.125rem; --xl:1.375rem;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--text);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:var(--base); line-height:1.5; letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent-hover); outline-offset:2px; border-radius:6px}

/* ---------- mockup chrome: makes clear this is not the live product ------- */
.mockbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:9px 18px; background:#1a1030; border-bottom:1px solid #3a2a6b;
  font-size:var(--xs);
}
.mockbar b{color:#c9b6ff; letter-spacing:.06em; text-transform:uppercase; font-size:var(--2xs)}
.mockbar span{color:#9e8fd0}
.mockbar nav{margin-left:auto; display:flex; gap:4px; flex-wrap:wrap}
.mockbar nav a{
  text-decoration:none; color:#c9b6ff; padding:5px 11px; border-radius:var(--pill);
  border:1px solid transparent; font-weight:600;
}
.mockbar nav a:hover{border-color:#4a3a80}
.mockbar nav a[aria-current]{background:#2a1c52; border-color:#5a45a0; color:#fff}

/* ---------- app shell ---------- */
.shell{display:flex; min-height:calc(100vh - 44px)}
.rail{
  width:var(--rail); flex:0 0 var(--rail); padding:22px 14px;
  border-right:1px solid var(--line-soft); display:flex; flex-direction:column; gap:22px;
}
.brand{font-weight:800; font-size:var(--lg); letter-spacing:-.02em; padding:0 8px 0}
.brand span{color:var(--accent-hover); font-weight:600; font-size:var(--sm)}
.rgroup{display:flex; flex-direction:column; gap:2px}
.rhead{font-size:var(--2xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted2); padding:0 8px 7px}
.rlink{
  display:flex; align-items:center; gap:9px; min-height:38px; padding:0 10px;
  border-radius:9px; text-decoration:none; color:var(--muted); font-size:var(--sm); font-weight:500;
}
.rlink:hover{background:var(--panel-hover); color:var(--text)}
.rlink[aria-current]{background:var(--accent-soft); color:var(--text); font-weight:600}
.rlink .badge{
  margin-left:auto; min-width:20px; text-align:center; font-size:var(--2xs); font-weight:700;
  padding:1px 6px; border-radius:var(--pill); background:var(--bad); color:#fff;
}
.main{flex:1; min-width:0; padding:26px 30px 80px; max-width:1320px}

/* ---------- page head ---------- */
.phead{margin-bottom:22px}
.ptitle{font-size:var(--xl); font-weight:700; letter-spacing:-.02em; margin:0 0 5px}
.psub{color:var(--muted); font-size:var(--sm); margin:0; max-width:70ch}

/* ---------- primitives ---------- */
.card{background:linear-gradient(180deg,var(--panel2),var(--panel) 62%); border:1px solid var(--line); border-radius:var(--r); padding:18px 20px}
.card.tight{padding:14px 16px}
.stack{display:flex; flex-direction:column; gap:14px}
.row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.eyebrow{font-size:var(--2xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted2)}
.quiet{color:var(--muted); font-size:var(--sm)}
.num{font-variant-numeric:tabular-nums}

.btn{
  font:inherit; font-size:var(--sm); font-weight:600; color:var(--text);
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:9px 14px; cursor:pointer; white-space:nowrap; text-decoration:none;
  display:inline-flex; align-items:center; gap:7px; min-height:40px;
}
.btn:hover{background:var(--panel-hover)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn.primary:hover{background:var(--accent-hover); border-color:var(--accent-hover)}
.btn.ghost{background:transparent; color:var(--muted)}
.btn.sm{min-height:32px; padding:5px 10px; font-size:var(--xs)}

.chip{
  display:inline-flex; align-items:center; gap:6px; font-size:var(--2xs); font-weight:600;
  padding:3px 9px; border-radius:var(--pill); border:1px solid currentColor; white-space:nowrap;
}
.chip.ok{color:var(--good)} .chip.warn{color:var(--warn)} .chip.bad{color:var(--bad)}
.chip.info{color:var(--info)} .chip.mute{color:var(--muted2)}
.chip .mark{font-size:10px; line-height:1}

.field{
  width:100%; font:inherit; font-size:16px; color:var(--text);
  background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:0 14px; min-height:48px;
}
.field::placeholder{color:var(--muted2)}

table.data{width:100%; border-collapse:collapse; font-size:var(--xs)}
table.data th{
  text-align:left; font-size:var(--2xs); font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted2); padding:0 .6rem .7rem; white-space:nowrap;
}
table.data td{padding:.62rem .6rem; border-top:1px solid var(--line-soft); vertical-align:middle}
table.data tr:hover td{background:var(--panel-hover)}
.scroll{overflow-x:auto}

/* delta + spark */
.delta{font-size:var(--xs); font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap}
.delta.up{color:var(--good)} .delta.down{color:var(--bad)} .delta.flat{color:var(--muted2)}
.spark{display:block}

/* score pill: number carries a band word, never colour alone */
.score{display:inline-flex; align-items:baseline; gap:7px}
.score b{font-size:var(--lg); font-weight:800; font-variant-numeric:tabular-nums; line-height:1}
.score small{font-size:var(--2xs); color:var(--muted2); font-weight:600; text-transform:uppercase; letter-spacing:.05em}

/* annotation callouts explaining a change */
.why{
  border-left:3px solid var(--accent); background:rgba(146,102,247,.07);
  border-radius:0 var(--r-sm) var(--r-sm) 0; padding:12px 16px; margin:0 0 18px;
  font-size:var(--sm); color:var(--muted); line-height:1.55;
}
.why b{color:var(--text); font-weight:600}

@media (max-width:1000px){
  .rail{display:none}
  .main{padding:20px 16px 70px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}