/* ═══ Atlas Studio site kit · stats.css: "by the numbers", the top-right corner popout (pairs with stats.js) ═══
   A closed pill like the nav, pinned in the top-right corner (level with the nav's top, 14px in). A click
   pops a dark ceramic panel of real per-repo numbers out of it, down and to the left (stats.json, built
   by render/stats/build-stats.js from each public origin/master). Click, never hover.
   No fire here (per the brief: no fire on the right at all).
   The page palette (--ground, --ink, --fire...) is home.css's; the only new colours are the three
   product dots below, each taken from the product itself.
   ═════════════════════════════════════════════════════════════════════════════════════════════════════ */
.st{
  --st-helm:#9fb4cc;       /* Helm's accent (helm/ui/styles/tokens.css) */
  --st-quartz:#5f9bb8;     /* Quartz's logo (img/quartz-logo.svg) */
  --st-mantle:#5245ee;     /* Mantle's indigo (img/mantle-files.svg) */
  --st-w:304px;            /* stats.js fits it between the copy box's fire and the corner */
  --st-pop:cubic-bezier(.32,.72,0,1);
  /* the corner: level with the nav pill's top, the same inset from the right. Fixed boxes are laid out
     inside the scrollbar, so this is measured from the visible content edge. */
  position:fixed;top:14px;right:14px;z-index:50;
  display:flex;flex-direction:column;align-items:flex-end;pointer-events:none}
.st *{box-sizing:border-box}

/* ── the trigger: the nav's own capsule, holding one button-pill ── */
.st__btn{pointer-events:auto;display:inline-flex;align-items:center;margin:0;padding:5px;border:0;border-radius:999px;cursor:pointer;
  background:rgb(var(--glass-rgb) / .62);
  box-shadow:inset 0 0 0 1px rgb(var(--ink-rgb) / .08),inset 0 1px 0 rgb(var(--ink-rgb) / .10),
    0 1px 2px rgb(var(--shade-rgb) / .32),0 12px 30px -12px rgb(var(--shade-rgb) / .5);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  -webkit-tap-highlight-color:transparent}
.st__in{display:inline-flex;align-items:center;gap:9px;min-height:34px;padding:0 13px 0 12px;border-radius:999px;
  font:500 12.5px/1 var(--f-mono);letter-spacing:.01em;color:var(--ink-2);
  transition:background-color 160ms var(--e),color 160ms var(--e)}
@media (hover:hover){.st__btn:hover .st__in{background:rgb(var(--ink-rgb) / .07);color:var(--ink)}}
.st__btn:active .st__in{background:rgb(var(--ink-rgb) / .1)}
.st__btn:focus-visible{outline:2px solid var(--fire);outline-offset:3px;border-radius:999px}
.st__btn[aria-expanded="true"] .st__in{background:rgb(var(--ink-rgb) / .08);color:var(--ink)}
/* the glyph: three bars, the three repos' real line counts to scale (stats.js sets the heights) */
.st__g{width:12px;height:12px;flex:none;overflow:visible;color:var(--ink-3);transition:color 200ms var(--e)}
.st__g rect{fill:currentColor;transform-box:fill-box;transform-origin:50% 100%;transition:transform 380ms var(--st-pop)}
.st__btn[aria-expanded="true"] .st__g{color:var(--fire)}
.st__btn[aria-expanded="true"] .st__g rect:nth-child(1){transform:scaleY(.7)}
.st__btn[aria-expanded="true"] .st__g rect:nth-child(2){transform:scaleY(1.12)}
.st__btn[aria-expanded="true"] .st__g rect:nth-child(3){transform:scaleY(.86)}

/* ── the panel ── */
.st__panel{pointer-events:auto;position:relative;width:var(--st-w);max-height:calc(100vh - 80px);max-height:calc(100svh - 80px);
  overflow:auto;overscroll-behavior:contain;scrollbar-width:none;
  margin-top:8px;padding:15px 16px 14px;border-radius:16px;color:var(--ink);text-align:left;
  background:var(--cer);
  box-shadow:var(--cer-rim),0 2px 4px rgb(var(--shade-rgb) / .3),0 26px 60px -22px rgb(var(--shade-rgb) / .75);
  transform-origin:calc(100% - 40px) -8px;
  visibility:hidden;opacity:0;transform:translateY(-6px) scale(.94);
  transition:opacity 130ms ease-in,transform 160ms ease-in,visibility 0s linear 160ms}
.st__panel::-webkit-scrollbar{display:none}
.st.is-open .st__panel{visibility:visible;opacity:1;transform:none;
  transition:opacity 150ms ease-out,transform 300ms var(--st-pop),visibility 0s}
.st__panel:focus{outline:none}
.st__panel:focus-visible{outline:2px solid var(--fire);outline-offset:3px}

/* the rows slide up a hair, one after another */
.st__hd,.st__row,.st__tot,.st__how{opacity:0;transform:translateY(4px);transition:opacity 0s 160ms,transform 0s 160ms}
.st.is-open :is(.st__hd,.st__row,.st__tot,.st__how){opacity:1;transform:none;
  transition:opacity 240ms ease-out calc(var(--i,0) * 40ms + 40ms),transform 360ms var(--st-pop) calc(var(--i,0) * 40ms + 40ms)}

.st__hd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 13px}
.st__h,.st__key{margin:0;font:500 10.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.st__h{color:var(--ink-2)}
.st__key{display:flex;align-items:center;gap:6px;letter-spacing:.04em;text-transform:none}
.st__key i{display:block;width:10px;height:4px;border-radius:2px;background:var(--fire)}
.st__key i + i,.st__key span + i{margin-left:6px}
.st__key .st__k-t{background:var(--amber)}

.st__rows{margin:0;padding:0;list-style:none;display:grid;gap:15px}
.st__top{display:flex;align-items:baseline;gap:8px;min-width:0}
.st__dot{flex:none;align-self:center;width:7px;height:7px;border-radius:50%;background:var(--c,var(--fire));
  box-shadow:0 0 0 1px rgb(var(--ink-rgb) / .14)}
.st__name{font:620 14.5px/1.2 var(--f-sans);font-stretch:104%;color:var(--cream);white-space:nowrap}
.st__hash{font:500 11px/1 var(--f-mono);color:var(--fire-ink);text-decoration:none;white-space:nowrap;border-radius:4px}
.st__hash:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.st__hash:focus-visible{outline-offset:2px}
.st__age{font:400 11px/1 var(--f-mono);color:var(--ink-3);white-space:nowrap}
.st__n{margin-left:auto;font:500 15px/1.2 var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}

/* the bar: this repo's lines to the scale of the largest; code in fire, tests in amber */
.st__bar{display:flex;gap:2px;height:4px;margin:8px 0 7px;width:calc(var(--len,1) * 100%);
  clip-path:inset(0 100% 0 0);transition:clip-path 0s 160ms}
.st.is-open .st__bar{clip-path:inset(0 0 0 0);transition:clip-path 720ms cubic-bezier(.22,.61,.36,1) calc(var(--i,0) * 40ms + 60ms)}
.st__bar i{display:block;height:100%;border-radius:2px;background:var(--fire);min-width:2px}
.st__bar .st__bt{background:var(--amber)}

.st__m{display:flex;justify-content:space-between;gap:10px;margin:0;font:400 11px/1.55 var(--f-mono);color:var(--ink-3);white-space:nowrap}
.st__m b{font-weight:500;color:var(--ink-2)}

/* the totals: a raised plate, no rule */
.st__tot{margin:15px -8px 0;padding:10px 8px 9px;border-radius:10px;background:rgb(var(--ink-rgb) / .045)}
.st__tot .st__top{margin-bottom:5px}
.st__tot .st__name{font-weight:560;color:var(--ink-2)}

.st__how{margin:12px 0 0;font:400 10.5px/1.5 var(--f-mono);color:var(--ink-3);white-space:normal;text-wrap:pretty}
.st__err{margin:0;font:400 12px/1.5 var(--f-mono);color:var(--ink-2)}
.st__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){
  .st__panel,.st.is-open .st__panel{transform:none;transition:opacity 1ms,visibility 0s}
  .st__hd,.st__row,.st__tot,.st__how,.st.is-open :is(.st__hd,.st__row,.st__tot,.st__how){transform:none;opacity:1;transition:none}
  .st__bar,.st.is-open .st__bar{clip-path:none;transition:none}
  .st__in,.st__g,.st__g rect{transition:none}
}
@media (forced-colors:active){
  .st__btn,.st__panel{border:1px solid CanvasText}
  .st__bar i,.st__dot,.st__key i{forced-color-adjust:none}
}
@media print{.st{display:none}}

/* narrow screens: the trigger keeps its glyph and drops the words (they stay its accessible name) */
@media (max-width:520px){
  .st__l{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .st__in{padding:0 11px}
}