/* ============================================================
   Clavesa — /analytics.html page-specific styles.
   Layers on top of styles.css; reuses its tokens + shared
   classes (.section, .card, .code, .term, .btn, …). Only the
   bits unique to this page live here.
   ============================================================ */

/* ---------- hero: privacy hook ---------- */
.ahero__foot .pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 12px; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 11px; background: var(--paper);
}
.ahero__foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }

/* ---------- live stats ---------- */
.live { border-top: 1px solid var(--line); }
.live[hidden] { display: none; }
.live__head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 34px; }
.live__note {
  font-family: var(--mono); font-size: 12.5px; color: var(--ink-dim);
  display: inline-flex; align-items: center; gap: 8px;
}
.live__note .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 0 rgba(52,211,153,.5); animation: livepulse 2.4s ease-out infinite;
}
@keyframes livepulse {
  0%   { box-shadow: 0 0 0 0 rgba(52,211,153,.45); }
  70%  { box-shadow: 0 0 0 9px rgba(52,211,153,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.stat {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 24px 22px 22px; display: flex; flex-direction: column; gap: 6px;
}
.stat__num {
  font-family: var(--serif); font-weight: 460; font-size: clamp(32px, 4.4vw, 46px);
  line-height: 1; letter-spacing: -0.02em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat__label {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-dim);
}

.toplists { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.toplist {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 22px 22px 18px;
}
.toplist h3 {
  font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 16px;
}
.toplist__list { display: flex; flex-direction: column; gap: 11px; }
.toplist__row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; position: relative; }
.toplist__bar {
  grid-column: 1 / -1; height: 6px; border-radius: 999px; background: var(--line-2);
  overflow: hidden; margin-top: 2px;
}
.toplist__fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.toplist__k { font-family: var(--mono); font-size: 13px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toplist__v { font-family: var(--mono); font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
.toplist__flag { margin-right: 7px; }
.toplist__empty { font-size: 14px; color: var(--ink-dim); }

/* ---------- how-to: numbered steps ---------- */
.steps { margin-top: 48px; display: flex; flex-direction: column; gap: 20px; }
.step {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 22px; align-items: start;
}
.step__marker {
  width: 52px; height: 52px; border-radius: 14px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 24px; font-weight: 500; color: var(--accent-dk);
  background: var(--accent-sf); border: 1px solid var(--line);
}
.step__content { min-width: 0; }
.step__title {
  font-family: var(--serif); font-weight: 460; font-size: 23px; letter-spacing: -0.015em;
  margin-bottom: 8px;
}
.step__lead { color: var(--ink-soft); font-size: 15.5px; max-width: 66ch; }
.step__lead + .code, .step__lead + .term, .step__note + .code { margin-top: 18px; }
.step .code, .step .term { margin-top: 18px; }
.step__note {
  margin-top: 16px; font-size: 14px; color: var(--ink-dim);
  border-left: 2px solid var(--line); padding-left: 14px; line-height: 1.55;
}
.step__note strong { color: var(--ink-soft); font-weight: 600; }
.step__note code { font-size: 12.5px; background: var(--bg-band); padding: 1px 5px; border-radius: 4px; color: var(--ink-soft); }

/* code blocks on this page carry a plain (unhighlighted) body variant that
   keeps mono + the dark surface but doesn't need per-token spans */
.code__body--plain { white-space: pre; }
.code__body .cm { color: var(--code-dim); }   /* comments / dim */
.code__body .st { color: #c3e88d; }            /* strings */
.code__body .kw { color: #c792ea; }
.code__body .fn { color: #82aaff; }
.code__body .fl { color: #f4bf4f; }            /* flags */

/* ---------- closing CTA band ---------- */
.recipe__cta { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 14px; }
.recipe__grid { margin-top: 44px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.recipe__card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px 24px;
}
.recipe__card h3 { font-family: var(--sans); font-weight: 560; font-size: 17px; margin-bottom: 8px; }
.recipe__card p { font-size: 14.5px; color: var(--ink-soft); margin-bottom: 16px; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recipe__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .toplists { grid-template-columns: minmax(0, 1fr); }
  .step { grid-template-columns: 42px minmax(0, 1fr); gap: 16px; }
  .step__marker { width: 42px; height: 42px; font-size: 20px; border-radius: 12px; }
  .step__title { font-size: 20px; }
  .steps { margin-top: 30px; gap: 26px; }
  .stat__num { font-size: 30px; }
}

/* Let inner code/terminal boxes scroll rather than stretch the page. */
.stats > *, .toplists > *, .recipe__grid > *, .step__content { min-width: 0; }