/* Circl analytics dashboard.
   Laid out as a card grid of independent panels, so a metric that fails to
   compute takes its own tile down and nothing else. */
:root{
  --bg:#F3F2F1; --card:#FFFFFF; --line:#E1DFDD; --text:#201F1E; --dim:#605E5C;
  --faint:#8A8886; --blue:#0078D4; --green:#2A8A43; --red:#C4314B; --amber:#B7791F;
}
*{box-sizing:border-box}
/* Restated because several rules below set `display`, which outranks the
   browser's own [hidden] rule. Without this the sign-in card stays on screen
   after signing in and the dashboard loads underneath it, which reads as the
   button doing nothing. */
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--text);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif}
.loading,.empty{color:var(--faint);padding:40px 24px;font-size:13px}

/* sign in */
#login{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#1B1A19}
.login{width:320px;background:#fff;border-radius:6px;padding:32px;display:flex;flex-direction:column;gap:6px}
.login-mark{width:150px;margin:0 auto 20px;display:block}
.login h1{font-size:20px;margin:0}
.login .sub{margin:0 0 16px;color:var(--faint);font-size:12px}
.login label{font-size:11px;font-weight:600;color:var(--dim);display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.login input{border:1px solid #8A8886;border-radius:2px;padding:10px 12px;font:inherit}
.login input:focus{outline:none;border-color:var(--blue)}
.login button{background:var(--blue);color:#fff;border:0;border-radius:2px;padding:11px;font:inherit;font-weight:600;cursor:pointer}
.err{color:var(--red);font-size:12px;min-height:16px;margin:8px 0 0}

/* chrome: fixed sidebar, scrolling main */
#app{display:flex;min-height:100vh}
.sidebar{width:232px;min-width:232px;background:#fff;border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.side-head{padding:20px 16px 16px;border-bottom:1px solid var(--line)}
.side-head img{width:100%;max-width:172px;display:block;margin-bottom:8px}
.side-sub{font-size:10px;font-weight:600;letter-spacing:.9px;text-transform:uppercase;color:var(--faint)}
.side-project{padding:14px 16px 10px;border-bottom:1px solid var(--line)}
.side-project label{display:block;font-size:10px;font-weight:600;letter-spacing:.8px;
  text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.side-project select{width:100%;font:inherit;font-weight:600;color:var(--text);
  border:1px solid var(--line);border-radius:3px;padding:7px 9px;background:#fff;cursor:pointer}
.nav{flex:1;padding:10px 0;overflow-y:auto}
.nav-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:9px 16px 9px 13px;border:0;border-left:3px solid transparent;background:none;
  font:inherit;font-size:13px;color:var(--dim);cursor:pointer}
.nav-item:hover{background:#F3F2F1;color:var(--text)}
.nav-item.active{background:#EFF6FC;color:var(--blue);border-left-color:var(--blue);font-weight:600}
.nav-item svg{width:16px;height:16px;flex:0 0 auto}
.side-foot{padding:10px 12px;border-top:1px solid var(--line);display:flex;
  flex-direction:column;gap:7px}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{background:#fff;border-bottom:1px solid var(--line);padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.crumb{font-size:12px;color:var(--faint)}
.crumb span{margin:0 2px}
.top h1{font-size:21px;margin:2px 0 0;font-weight:600;letter-spacing:-.3px}
.top-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.synced{font-size:12px;color:var(--faint)}
.who{font-size:11px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ghost{background:#fff;border:1px solid var(--line);border-radius:3px;padding:6px 12px;
  font:inherit;font-size:12px;cursor:pointer;color:var(--dim)}
.ghost:hover:not(:disabled){border-color:var(--blue);color:var(--blue)}
.ghost:disabled{opacity:.5;cursor:default}

/* grid of panels */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:16px;padding:20px 24px;align-items:start}
.card{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:16px 18px 18px}
.card.wide{grid-column:span 2}
.card header{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  border-bottom:2px solid #8764B8;padding-bottom:7px;margin-bottom:14px}
.card h2{font-size:15px;margin:0;font-weight:600}
.src{font-size:11px;color:var(--faint);font-family:ui-monospace,Menlo,monospace}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:14px}
.tile-l{font-size:11.5px;color:var(--dim);margin-bottom:4px}
.tile-v{font-size:24px;font-weight:600;letter-spacing:-.5px;color:var(--blue);
  display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.tile-s{font-size:11px;color:var(--faint);margin-top:2px}
.delta{font-size:12px;font-weight:600}
.delta.up{color:var(--green)}
.delta.down{color:var(--red)}

.chartrow{margin-top:18px}
.chart-t{font-size:11.5px;color:var(--dim);margin-bottom:6px}
.spark{width:100%;height:92px;display:block}

.gauge{position:relative;width:170px;margin:0 auto}
.gauge svg{width:100%;display:block}
.gauge-mid{position:absolute;inset:auto 0 4px;text-align:center}
.gauge-v{display:block;font-size:22px;font-weight:600}
.gauge-l{font-size:11px;color:var(--faint)}

.donut-wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.donut{position:relative;width:132px;flex:0 0 auto}
.donut svg{width:100%;display:block}
.donut-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.donut-mid strong{font-size:19px;font-weight:600}
.donut-mid span{font-size:10px;color:var(--faint)}
.legend{list-style:none;margin:0;padding:0;flex:1;min-width:130px;display:flex;flex-direction:column;gap:6px}
.legend li{display:flex;align-items:center;gap:8px;font-size:12.5px}
.legend .dot{width:9px;height:9px;border-radius:2px;flex:0 0 auto}
.legend .k{flex:1;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.legend .v{font-weight:600}

.note{font-size:11.5px;color:var(--faint);line-height:1.6;margin:14px 0 0}
.warn{background:#FDF6E7;border:1px solid #F0DFB8;border-radius:4px;padding:11px 13px;
  font-size:12.5px;color:#7A5B12;line-height:1.6;margin-bottom:14px}
.warn code{font-family:ui-monospace,Menlo,monospace;font-size:11.5px}
.foot{padding:8px 24px 28px;font-size:11.5px;color:var(--faint)}

@media (max-width:900px){
  /* The rail becomes a strip across the top: a 216px column on a phone leaves
     nothing for the cards it is meant to be navigating. */
  #app{flex-direction:column}
  .sidebar{width:auto;min-width:0;height:auto;position:static;flex-direction:row;
    align-items:center;gap:10px;overflow-x:auto;padding:8px 10px}
  .side-head,.side-project{border:0;padding:0 6px}
  .side-head img{width:132px;margin:0}
  .side-sub{display:none}
  .side-project label{display:none}
  .nav{display:flex;padding:0;flex:0 0 auto}
  .nav-item{border-left:0;border-bottom:3px solid transparent;white-space:nowrap;padding:8px 12px}
  .nav-item.active{border-left-color:transparent;border-bottom-color:var(--blue)}
  .side-foot{border:0;flex-direction:row;padding:0 6px;margin-left:auto}
  .card.wide{grid-column:span 1}
  .grid{padding:16px;grid-template-columns:1fr}
  .top{padding:12px 16px}
}

/* ── Home ─────────────────────────────────────────────────────────────────
   Deliberately the least dense page in the dashboard. One number you actually
   care about, the shape of the last month, six figures, and a list of what is
   waiting. Everything else lives behind the rail. */
.hero{grid-column:1/-1;background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:26px 28px;display:flex;gap:34px;align-items:center;flex-wrap:wrap}
.hero-main{flex:0 0 auto;min-width:200px}
.hero-k{font-size:12px;color:var(--dim);letter-spacing:.3px}
.hero-v{font-size:52px;line-height:1.05;font-weight:600;letter-spacing:-1.6px;color:var(--text);margin:4px 0 8px}
.hero-s{font-size:13px;color:var(--faint)}
.hero-chart{flex:1;min-width:280px}

.kpis{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:8px;padding:14px 16px}
.kpi-l{font-size:11.5px;color:var(--dim);margin-bottom:5px}
.kpi-v{font-size:26px;font-weight:600;letter-spacing:-.6px;color:var(--blue);
  display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}

.attn{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.attn a{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:5px;
  text-decoration:none;color:inherit}
.attn a:hover{background:#F3F2F1}
.attn-v{font-size:19px;font-weight:600;color:var(--amber);min-width:38px}
.attn-l{font-size:13px;color:var(--dim)}
.all-clear{margin:0;padding:14px 2px;color:var(--green);font-size:13.5px;font-weight:500}

/* simple data table */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;font-size:11px;font-weight:600;letter-spacing:.5px;
  text-transform:uppercase;color:var(--faint);padding:0 8px 8px;border-bottom:1px solid var(--line)}
.tbl td{padding:8px;border-bottom:1px solid #F3F2F1;color:var(--dim)}
.tbl td:first-child{color:var(--text)}
.tbl td.num{text-align:right;font-variant-numeric:tabular-nums}
.tbl tr:last-child td{border-bottom:0}

/* Window switcher. A segmented control rather than a dropdown: three options
   that people flip between constantly should be one click, not two. */
.range{display:inline-flex;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:#fff}
.rb{background:none;border:0;border-right:1px solid var(--line);padding:6px 13px;
  font:inherit;font-size:12px;color:var(--dim);cursor:pointer}
.rb:last-child{border-right:0}
.rb:hover:not(.on){background:#F3F2F1;color:var(--text)}
.rb.on{background:#EFF6FC;color:var(--blue);font-weight:600}