/* === Analytics.CSS =========================================================
 *
 * Self-contained. Sections 1-3 are duplicated from publish.css on purpose:
 * /analytics/ must not depend on /publish/, which is headed for its own repo.
 * If you change a token here, change it there too — or don't, they're allowed
 * to drift now.
 *
 *   1. Design tokens
 *   2. Base
 *   3. Shared chrome — gate, bars, buttons, status, segmented, sheet
 *   4. Dashboard — layout, cards, panels, rows, charts, pills
 *   5. Motion
 * ------------------------------------------------------------------------ */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
  --bg: #f7f6f4;
  --surface: #e6e6e6;
  --ink: #3a3a3a;
  --muted: #545454;
  --rule: #cbc9c5;
  --focus: #4846af;
  --publish: #0d6144;
  --draft: #854a00;
  --danger: #b42318;
  --on-publish: #ffffff;

  --radius: 10px;
  --ui: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --bar-pad: 0.3rem;
  --bar-control: 34px;

  --chart-h: 116px;
  --chart-h-short: 68px;
  --gap: 0.75rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --surface: #141414;
    --ink: #e5e4db;
    --muted: #969696;
    --rule: #303030;
    --focus: #22a6b3;
    --publish: #2ea37a;
    --draft: #d08a2c;
    --danger: #e5675c;
    --on-publish: #04150f;
  }
}


/* ==========================================================================
   2. BASE
   ========================================================================== */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 var(--ui);
  -webkit-text-size-adjust: 100%;
}

button { font: inherit; cursor: pointer; }

:where(a, button, input, textarea, summary):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}


/* ==========================================================================
   3. SHARED CHROME
   ========================================================================== */

/* --- auth gate ---------------------------------------------------- */

.gate {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--bg);
}

.gate[hidden] { display: none; }

.gate-card {
  width: 100%;
  max-width: 22rem;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  text-align: center;
}

.gate-card h1 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  color: var(--ink);
}

.gate-note {
  margin: 0 0 1.25rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.gate-note.is-error { color: var(--danger); }
.gate .btn { width: 100%; }

.gate .btn-publish {
  background: var(--focus);
  color: #ffffff;
}

@media (prefers-color-scheme: dark) {
  .gate .btn-publish { color: #04150f; }
}

/* --- sticky bars -------------------------------------------------- */

.bar {
  position: sticky;
  z-index: 10;
  background: var(--surface);
  border-color: var(--rule);
  border-style: solid;
  border-width: 0;
}

.bar-top { top: 0; border-bottom-width: 1px; }
.bar-bottom { bottom: 0; border-top-width: 1px; }

.bar-inner {
  max-width: 64rem;
  margin: 0 auto;
  padding: var(--bar-pad) 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.bar-top .bar-inner {
  padding-top: max(var(--bar-pad), env(safe-area-inset-top, 0px));
}

.bar-bottom .bar-inner {
  padding-bottom: max(var(--bar-pad), env(safe-area-inset-bottom, 0px) - 1rem);
}

.bar .btn,
.bar .ghost { min-height: var(--bar-control); }

.bar-top .bar-nav {
  padding-top: 0;
  padding-bottom: 0.4rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.bar-nav .segmented { flex: none; }

/* --- title block -------------------------------------------------- */

.commit-path {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.3;
  padding-left: 0.7rem;
  border-left: 3px solid var(--publish);
}

.commit-repo { display: block; color: var(--muted); }

.commit-file {
  display: block;
  color: var(--ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* --- buttons ------------------------------------------------------ */

.btn {
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-weight: 600;
}

.btn-publish { background: var(--publish); color: var(--on-publish); }
.btn[disabled] { opacity: 0.45; cursor: default; }

.ghost {
  min-height: 40px;
  padding: 0 0.75rem;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  white-space: nowrap;
}

.actions { display: flex; gap: 0.5rem; flex: none; }

/* --- status line -------------------------------------------------- */

.status {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--muted);
}

.status.is-error { color: var(--danger); }
.status.is-good { color: var(--publish); }

/* --- segmented control -------------------------------------------- */

.segmented {
  display: inline-flex;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}

.seg {
  min-height: 40px;
  padding: 0 0.9rem;
  background: transparent;
  color: var(--muted);
  border: 0;
}

.seg + .seg { border-left: 1px solid var(--rule); }
.seg.is-on { background: var(--ink); color: var(--surface); }
.segmented-sm .seg { min-height: 34px; font-size: 0.875rem; }

/* --- page shell --------------------------------------------------- */

.sheet {
  max-width: 46rem;
  margin: 0 auto;
  padding: 1rem 1rem 2rem;
}

.sheet-wide { max-width: 64rem; }

/* --- disclosure --------------------------------------------------- */

.raw summary {
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--muted);
  min-height: 44px;
  display: flex;
  align-items: center;
}

.raw[hidden] { display: none; }

.raw pre {
  margin: 0;
  padding: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.8125rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}


/* ==========================================================================
   4. DASHBOARD
   ========================================================================== */

/* --- view switching ----------------------------------------------- */

.view[hidden] { display: none; }

.is-loading { opacity: 0.5; }

/* --- multi-column layout ------------------------------------------ */

.grid-2,
.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--gap);
}

@media (min-width: 44rem) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 56rem) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 64rem) {
  .grid-3 { grid-template-columns: 1fr 1fr 1fr; }
}

/* --- headline cards ----------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--gap);
  margin-bottom: 1.25rem;
}

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.8rem 0.9rem;
}

.card-label {
  margin: 0 0 0.4rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.card-value {
  margin: 0;
  font-family: var(--mono);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.05;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.card-sub {
  margin: 0.3rem 0 0;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--muted);
}

.card.is-alert { border-color: var(--danger); }
.card.is-alert .card-value { color: var(--danger); }
.card.is-good .card-value { color: var(--publish); }

/* --- panels ------------------------------------------------------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.9rem;
  margin-bottom: 1.25rem;
}

.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.panel-head h2 {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
}

.panel-note,
.sub-note {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--muted);
}

.panel-foot {
  margin: 0.75rem 0 0;
  padding-top: 0.65rem;
  border-top: 1px solid var(--rule);
  font-size: 0.8125rem;
  color: var(--muted);
}

.sub {
  margin: 1.25rem 0 0.15rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.sub-note { margin-bottom: 0.5rem; }
.sub-note code { font-family: var(--mono); }

/* --- data rows ---------------------------------------------------- */

.rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rows > li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.15rem 0.75rem;
  padding: 0.5rem 0.1rem;
}

.rows > li + li { border-top: 1px solid var(--rule); }

.row-key {
  min-width: 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.row-key a { color: inherit; }

.row-val {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.row-sub {
  grid-column: 1 / -1;
  font-size: 0.75rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.meter {
  grid-column: 1 / -1;
  height: 3px;
  margin-top: 0.15rem;
  border-radius: 999px;
  background: var(--bg);
  overflow: hidden;
}

.meter i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--focus);
}

.meter.is-danger i { background: var(--danger); }
.meter.is-publish i { background: var(--publish); }
.meter.is-draft i { background: var(--draft); }

.empty {
  margin: 0;
  padding: 0.65rem 0.1rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

/* --- bar charts ---------------------------------------------------
   Heights are set from JS one CSS property at a time, which CSP allows.
   Never set them via an inline style attribute or style.cssText.        */

.chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: var(--chart-h);
  padding-top: 0.25rem;
}

.chart-short { height: var(--chart-h-short); }

.chart .col {
  position: relative;
  flex: 1 1 0;
  min-width: 2px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.chart .col-fill {
  width: 100%;
  min-height: 1px;
  border-radius: 2px 2px 0 0;
  background: var(--focus);
}

.chart .col-sub {
  width: 100%;
  border-radius: 0 0 2px 2px;
  background: var(--publish);
}

.chart .col-sub.is-danger { background: var(--danger); }

.chart-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 0.35rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--muted);
}

.legend {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 0.6rem 0 0;
  font-size: 0.75rem;
  color: var(--muted);
}

.swatch {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 2px;
  display: inline-block;
}

.swatch-focus { background: var(--focus); }
.swatch-danger { background: var(--danger); margin-left: 0.75rem; }
.swatch-publish { background: var(--publish); margin-left: 0.75rem; }

/* --- pills -------------------------------------------------------- */

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.pill {
  padding: 0.25rem 0.7rem;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.8125rem;
}


/* ==========================================================================
   5. MOTION
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .btn,
  .ghost,
  .seg { transition: background-color 0.15s ease, color 0.15s ease; }

  .chart .col-fill,
  .chart .col-sub,
  .meter i { transition: height 0.25s ease, width 0.25s ease; }
}