/* The operator page: a page of numbers on brand.css. Big figures, hairline
   dividers, one accent for bars and lines, ink for the step that matters,
   tabular digits everywhere. Labels are sentence case, never tiny capitals. */

.ops { background: var(--paper); }
.ops .site-header .shell { gap: var(--s-4); }
.brand { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.version { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ops-nav { display: flex; align-items: center; gap: var(--s-3); }
.range { margin: 0; }
.range-tab { font-variant-numeric: tabular-nums; }

.section-title { font-size: var(--t-lg); letter-spacing: -.02em; }
.sub-title { font-size: var(--t-sm); font-weight: 600; color: var(--ink); margin: 0 0 var(--s-2); }
.ops .label { font-size: var(--t-xs); font-weight: 550; color: var(--ink-3); letter-spacing: 0; }

/* Lead figures: four numbers divided by hairlines, not boxed. */
.lead { padding-block: var(--s-6); border-bottom: var(--border); }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tile { display: flex; flex-direction: column; gap: 10px; padding: 2px var(--s-5) 0; border-left: var(--border); }
.tile:first-child { padding-left: 0; border-left: 0; }
.tile strong { font-size: 52px; font-weight: 550; color: var(--ink); letter-spacing: -.045em; line-height: .95; font-variant-numeric: tabular-nums; }
.tile .under { font-size: var(--t-xs); line-height: 1.5; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.block { padding-block: var(--s-6); border-bottom: var(--border); }
.block > .section-title { margin-bottom: var(--s-5); }
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-5); }
.stamp { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* Funnel: name, bar, count, share of the step above. */
.funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.step { display: grid; grid-template-columns: 160px minmax(0, 1fr) 64px 48px; align-items: center; column-gap: 18px; }
.step-label { font-size: var(--t-sm); color: var(--ink); }
.track { display: block; height: 10px; background: var(--paper-3); border-radius: var(--r-full); overflow: hidden; }
.fill { display: block; height: 100%; background: var(--accent); border-radius: var(--r-full); }
.fill.is-last { background: var(--ink); }
.step-count { text-align: right; font-size: var(--t-md); font-weight: 550; color: var(--ink); font-variant-numeric: tabular-nums; }
.step-rate { text-align: right; font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* Sparklines. */
.sparks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.spark { display: grid; gap: 10px; margin: 0; padding: var(--s-4); border: var(--border); border-radius: var(--r-lg); }
.spark .head { display: flex; align-items: baseline; gap: 12px; }
.spark .total { margin-left: auto; font-size: var(--t-xl); font-weight: 550; color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.spark .today { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.spark svg { display: block; width: 100%; height: 46px; overflow: visible; }
.spark .axis { stroke: var(--line); stroke-width: 1; }
.spark .line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark .wash { fill: var(--accent); fill-opacity: .08; stroke: none; }
.spark .tick { stroke: var(--accent); stroke-width: 1; stroke-opacity: .35; }
.spark .end { fill: var(--accent); stroke: var(--paper); stroke-width: 2; }

/* The tail of anonymous events: a time and a sentence. */
.feed { list-style: none; margin: 0; padding: 0; border: var(--border); border-radius: var(--r-lg); overflow: hidden; }
.feed li { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: baseline; gap: var(--s-4); padding: 10px var(--s-4); font-size: var(--t-sm); color: var(--ink); }
.feed li + li { border-top: var(--border); }
.feed .ago { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.feed .none { display: block; color: var(--ink-3); }

.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); margin: 0 0 var(--s-6); }
.figures.wide { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.figure { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.figure strong { font-size: 40px; font-weight: 550; color: var(--ink); letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.figure span { font-size: var(--t-xs); line-height: 1.5; color: var(--ink-3); }

.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: flex; align-items: baseline; gap: 14px; padding-block: 9px; font-size: var(--t-sm); color: var(--ink); border-bottom: var(--border); }
.rows li:last-child { border-bottom: 0; }
.rows .name { font-family: var(--font-mono); font-size: var(--t-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rows .count { margin-left: auto; font-variant-numeric: tabular-nums; }
.rows .sub { color: var(--ink-3); font-size: var(--t-2xs); font-variant-numeric: tabular-nums; }
.rows .none { color: var(--ink-3); border-bottom: 0; }

.foot-note { margin: var(--s-5) 0 var(--s-8); font-size: var(--t-2xs); line-height: 1.8; color: var(--ink-3); max-width: 760px; }

.gate { padding-block: var(--s-9) var(--s-10); }
.gate h1 { font-size: var(--t-3xl); letter-spacing: var(--track-heading); margin: 0 0 var(--s-3); }
.gate p { font-size: var(--t-sm); color: var(--ink-3); }

@media (max-width: 900px) {
  .tile strong { font-size: 44px; }
  .sparks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step { grid-template-columns: 130px minmax(0, 1fr) 56px 44px; column-gap: 14px; }
}
@media (max-width: 700px) {
  .ops .site-header .shell { height: auto; flex-wrap: wrap; padding-block: 12px; row-gap: 10px; }
  .version { display: none; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) 0; }
  .tile { padding: 2px 0 0 var(--s-4); }
  .tile:nth-child(odd) { padding-left: 0; border-left: 0; }
  .tile strong { font-size: 36px; }
  .step { grid-template-columns: minmax(0, 1fr) 46px; column-gap: 12px; row-gap: 7px; }
  .step-label { grid-column: 1 / -1; }
  .step-count { grid-column: 1; text-align: left; font-size: var(--t-sm); order: 3; }
  .track { grid-column: 1 / -1; }
  .step-rate { grid-column: 2; order: 4; }
  .sparks, .pair, .figures { grid-template-columns: minmax(0, 1fr); }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feed li { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
}