/* mod — kiosk dashboard in TwentyThree's web brand.
   Brief: twentythree.com dark sections as reference (racing green hero blocks, white type,
   spring green accent, NB International Pro at one weight, square corners, no shadows).
   Surface is Racing Green because this lives on an office TV, and Racing is the brand's own
   inverse surface. Tokens follow the twentythree-design skill (colors_and_type.css): the four
   brand hexes only; cards are a white wash on Racing (as the app kit's sidebar states), never a
   fifth colour. Edgy 3px card radius, tight -0.02em heading tracking, Rec Red for live state. */

@font-face { font-family: "TT"; src: url("/static/fonts/body.woff2") format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "TTmono"; src: url("/static/fonts/mono.woff2") format("woff2"); font-weight: 400; font-display: block; }

:root {
  /* twentythree-design tokens — do not add hexes */
  --t23-spring-green: #1EC95B;
  --t23-racing-green: #043623;
  --t23-mist-green: #EFF5F0;
  --t23-rec-red: #FA4646;
  --t23-white: #FFFFFF;
  --t23-radius-card: 3px;
  --t23-track-tight: -0.02em;

  --racing: var(--t23-racing-green);
  --spring: var(--t23-spring-green);
  --red: var(--t23-rec-red);
  --card: rgb(255 255 255 / 0.07);          /* white wash on Racing, like the app kit's nav states */
  --line: rgb(255 255 255 / 0.12);
  --ink: var(--t23-white);
  --ink-2: rgb(255 255 255 / 0.64);
  --ink-3: rgb(255 255 255 / 0.4);
  --font: "TT", "NB International Pro", "Helvetica Neue", Arial, sans-serif;
  --mono: "TTmono", "NB International Pro Mono", ui-monospace, monospace;
  --pad: 3rem;      /* page padding — the site's 48px step */
  --gap: 1.5rem;    /* half-step between cards */
}

html {
  /* 16px at 1920 wide; scales with the screen so a 4K TV isn't a postage stamp */
  font-size: clamp(12px, calc(100vw / 120), 28px);
  background: var(--racing);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; margin: 0; }
/* Kiosk: exactly one screen, never a scrollbar. Sizes below are budgeted for 1080p incl. the banner. */
body { height: 100vh; overflow: hidden; display: flex; flex-direction: column; padding: 1.5rem var(--pad) 2rem; gap: var(--gap); }
img, svg { display: block; }
ol, ul { list-style: none; padding: 0; }
h1, h2, h3 { font-weight: 400; }

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

.top { display: flex; align-items: center; justify-content: space-between; height: 3rem; }
.brand { display: flex; align-items: baseline; gap: 1.25rem; }
.brand__logo { height: 1.5rem; width: auto; align-self: center; }
.brand__title { font-size: 1.625rem; line-height: 1; color: var(--ink-2); }
.top__right { display: flex; align-items: center; gap: 2rem; }
.top__right .pulse { margin-right: -1.25rem; }
.clock { font-family: var(--mono); font-size: 1.625rem; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.health { display: flex; gap: 1.5rem; font-size: 1rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.health__item--bad { color: var(--red); }

.banner { background: var(--spring); color: var(--racing); font-size: 1.25rem; padding: 0.75rem 1.5rem; }
.banner[hidden] { display: none; }

/* --- layout: 12 columns, dense so the tall trend card gets flanked -------- */

.groups {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: min-content;
  grid-auto-flow: dense;
  gap: var(--gap);
  align-content: start;
}
.card { grid-column: span var(--span, 12); background: var(--card); border-radius: var(--t23-radius-card); padding: 1.25rem 1.5rem 1.5rem; min-width: 0; }
.card--stats { background: none; padding: 0; }
.card--trend { --span: 7; grid-row: span 2; }
.card--list { --span: 5; }

.card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.card__title { font-size: 1.625rem; line-height: 1.2; letter-spacing: var(--t23-track-tight); }
.hint { font-size: 1rem; color: var(--ink-2); white-space: nowrap; }

/* --- stat tiles: flat blocks, the site's "number card" ---------------------- */

.stats { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: var(--gap); }
.stat { background: var(--card); border-radius: var(--t23-radius-card); padding: 1.25rem 1.5rem 1.375rem; min-width: 0; }
.stat__label { font-size: 1.25rem; line-height: 1.2; color: var(--ink-2); display: flex; align-items: center; gap: 0.625rem; }
.stat__value { font-size: 3.5rem; line-height: 1; margin: 0.625rem 0; letter-spacing: var(--t23-track-tight); overflow-wrap: anywhere; color: var(--spring); } /* stat values on inverse = Spring Green (design system) */
.stat .hint { display: block; }
.stat--trend { display: grid; grid-template-columns: 1fr minmax(6rem, 38%); grid-template-areas: "label label" "value spark" "hint spark"; column-gap: 1rem; align-items: end; }
.stat--trend .stat__label { grid-area: label; }
.stat--trend .stat__value { grid-area: value; }
.stat--trend .hint { grid-area: hint; }
.stat--trend .spark--mini { grid-area: spark; height: 3.5rem; padding: 0; align-self: end; }
.stat--accent .spark__line { stroke: var(--racing); }
.stat--accent .spark__area { fill: var(--racing); fill-opacity: 0.14; }
.stat--accent { background: var(--spring); color: var(--racing); }
.stat--accent .stat__value { color: var(--racing); }
.stat--accent .stat__label, .stat--accent .hint { color: rgb(4 54 35 / 0.72); }
.stat--muted { background: none; border: 1px solid var(--line); }

.pulse { width: 0.625rem; height: 0.625rem; background: var(--red); border-radius: 50%; flex: none; animation: pulse 2.4s ease-in-out infinite; } /* live = Rec Red */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.pulse--off { animation: none; opacity: 0.35; }

/* --- ranked list rows ---------------------------------------------------------- */

.rows { display: flex; flex-direction: column; }
.row {
  display: grid;
  grid-template-columns: 1.75rem 1fr auto;
  grid-template-areas: "rank label value" ". bar bar";
  column-gap: 1rem;
  row-gap: 0.5rem;
  align-items: baseline;
  padding: 0.625rem 0;
  border-top: 1px solid var(--line);
  font-size: 1.375rem;
  line-height: 1.2;
}
.row:first-child { border-top: 0; padding-top: 0; }
.row__rank { grid-area: rank; font-family: var(--mono); color: var(--ink-3); font-size: 1rem; }
.row__label { grid-area: label; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__value { grid-area: value; font-variant-numeric: tabular-nums; }
.row__bar { grid-area: bar; height: 0.1875rem; background: var(--line); }
.row__bar > span { display: block; height: 100%; background: var(--spring); }
.row--empty { display: block; color: var(--ink-3); }
.row--other { color: var(--ink-2); }
.row--other .row__bar { visibility: hidden; }

/* --- trends: label + total + sparkline per page ---------------------------------- */

.trends { display: flex; flex-direction: column; }
.trend {
  display: grid;
  grid-template-columns: 1fr 6rem 6rem 15rem;   /* label+number | organic | paid | sparkline */
  gap: 2rem;
  align-items: center;
  padding: 0.625rem 0;
  border-top: 1px solid var(--line);
}
.trend:first-child { border-top: 0; padding-top: 0; }
.trend--head { padding: 0 0 0.5rem; border-top: 0; font-size: 1rem; color: var(--ink-2); }
.trend--head .trend__meta { font-size: 1rem; }
.trend__col { white-space: nowrap; }
.trend--head > .trend__col { padding-right: 3rem; text-align: right; }
.trend--head > .trend__col--share { padding-right: 0; text-align: left; }

/* share columns: one thin 0–100% track + percent per channel; the header names the column */
.share { display: flex; align-items: center; }
.share__track { flex: 1; }
.share__track { height: 0.25rem; background: var(--line); }
.share__track > span { display: block; height: 100%; background: var(--spring); }
.trend__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; min-width: 0; font-size: 1.375rem; line-height: 1.2; }
.trend__label { font-family: var(--mono); font-size: 1.125rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trend__total { font-variant-numeric: tabular-nums; }

.spark { position: relative; height: 2.5rem; padding-right: 3rem; }
.spark__svg { width: 100%; height: 100%; overflow: visible; }
.spark--mini { padding-right: 0; }
.spark__area { fill: var(--spring); fill-opacity: 0.12; }
.spark__line { fill: none; stroke: var(--spring); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark__dot {
  position: absolute; right: 3rem; width: 0.625rem; height: 0.625rem; margin: -0.3125rem -0.3125rem 0 0;
  background: var(--spring); border: 2px solid var(--racing); border-radius: 50%;
}
.spark__max, .spark__zero { position: absolute; right: 0; font-family: var(--mono); font-size: 0.875rem; line-height: 1; color: var(--ink-3); }
.spark__max { top: 0; }
.spark__zero { bottom: 0; }

/* --- feed: latest signups; new rows slide in from the top ----------------------------- */

.card--feed { --span: 5; }
.feed { display: flex; flex-direction: column; }
.feed__item {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem;
  padding: 0.75rem 0; border-top: 1px solid var(--line);
  animation: feed-in 480ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.feed__item:first-child { border-top: 0; padding-top: 0; }
.feed__who { display: flex; flex-direction: column; min-width: 0; font-size: 1.375rem; line-height: 1.2; }
.feed__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed__company { color: var(--ink-2); font-size: 1.125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed__meta { display: flex; flex-direction: column; align-items: flex-end; flex: none; font-size: 1rem; line-height: 1.4; color: var(--ink-2); text-align: right; }
.feed__webinar { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); }
.feed__time { font-variant-numeric: tabular-nums; }
@keyframes feed-in { from { opacity: 0; transform: translateY(-0.75rem); } to { opacity: 1; transform: none; } }

/* --- odometer digits ------------------------------------------------------------------ */
/* The slot's in-flow placeholder carries width + baseline; the column is painted over it and
   clipped with overflow:clip (not hidden — hidden would move the inline-block baseline). */

.odo { font-variant-numeric: tabular-nums; }
.odo__slot { position: relative; display: inline-block; line-height: 1; overflow: clip; vertical-align: baseline; }
.odo__ph { color: transparent; }
.odo__col { position: absolute; top: 0; left: 0; width: 100%; text-align: center; transform: translateY(calc(var(--d, 0) * -1em)); transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.odo__col i { display: block; height: 1em; line-height: 1; font-style: normal; }

@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } .feed__item { animation: none; } .odo__col { transition: none; } }