/* "The misses stay on the page" (views/partials/record-block.ejs).
   One component on the landing and pricing pages. The dark terminal world:
   near-black ground, the tokens' own up / down / muted for the three ways a
   day can end, numbers in mono because they are counts. Every value has a
   fallback, since the pages that carry it link different token sheets.
   No motion: it is a record, not a moment. */
.rb {
  --rb-text: var(--tt-text, #F4F1EC);
  --rb-muted: var(--tt-text-muted, #A8A29B);
  --rb-dim: var(--tt-text-dim-text, #8A847C);
  --rb-line: var(--tt-border, rgba(244,241,236,0.10));
  --rb-up: var(--tt-up, #37D98A);
  --rb-down: var(--tt-down-text, #FF7E8E);
  --rb-down-fill: var(--tt-down, #FA5772);
  --rb-flat: rgba(244,241,236,0.28);
  padding: clamp(40px, 6vw, 72px) 20px;
  color: var(--rb-text);
  font-family: var(--tt-sans, 'Hanken Grotesk', system-ui, sans-serif);
  text-align: left;
}
.rb *, .rb *::before, .rb *::after { box-sizing: border-box; }
.rb ::selection { background: rgba(238,90,44,0.35); color: #fff; }
.rb-in {
  max-width: 1040px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px); align-items: center;
}
.rb-h {
  margin: 0 0 14px;
  font-family: var(--tt-display, 'Bricolage Grotesque', system-ui, sans-serif);
  font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em;
  color: var(--rb-text); text-wrap: balance;
}
.rb-p { margin: 0 0 18px; max-width: 46ch; font-size: 1.02rem; line-height: 1.55; color: var(--rb-muted); }
.rb-links { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.rb-links a {
  color: var(--tt-accent-text, #FF8A5C); font-weight: 700; font-size: .95rem;
  text-decoration: underline; text-decoration-color: rgba(238,90,44,0.45); text-underline-offset: 4px;
}
.rb-links a:hover { text-decoration-color: currentColor; }
.rb-links a:focus-visible { outline: 2px solid var(--tt-accent-text, #FF8A5C); outline-offset: 3px; border-radius: 4px; }

.rb-tally { border-left: 1px solid var(--rb-line); padding-left: clamp(22px, 4vw, 48px); }
.rb-n { margin: 0 0 14px; font-size: .95rem; color: var(--rb-muted); }
.rb-n b {
  display: block; margin-bottom: 2px;
  font-family: var(--tt-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: clamp(2.2rem, 4.4vw, 3.1rem); font-weight: 700; line-height: 1; letter-spacing: -0.02em;
  color: var(--rb-text); font-variant-numeric: tabular-nums;
}
.rb-bar { display: flex; gap: 2px; height: 10px; border-radius: 5px; overflow: hidden; background: rgba(244,241,236,0.06); }
.rb-bar i { display: block; height: 100%; min-width: 2px; }
.rb-bar .is-up { background: var(--rb-up); }
.rb-bar .is-flat { background: var(--rb-flat); }
.rb-bar .is-down { background: var(--rb-down-fill); }
.rb-legend {
  margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 4px 20px;
  font-size: .9rem; color: var(--rb-muted);
}
.rb-legend b { font-family: var(--tt-mono, ui-monospace, monospace); font-weight: 700; font-variant-numeric: tabular-nums; margin-right: 5px; }
.rb-legend .is-up b { color: var(--rb-up); }
.rb-legend .is-flat b { color: var(--rb-text); }
.rb-legend .is-down b { color: var(--rb-down); }
.rb-of { margin: 12px 0 0; font-size: .82rem; line-height: 1.5; color: var(--rb-dim); max-width: 48ch; }

@media (max-width: 760px) {
  .rb-in { grid-template-columns: minmax(0, 1fr); }
  .rb-tally { border-left: 0; padding-left: 0; border-top: 1px solid var(--rb-line); padding-top: 24px; }
}