/* Boltring web — component styles from component-specs.md. Radius 0,
   1px hairlines, no shadow, no gradient. Figures tabular mono, prose STIX. */
@import url("tokens.css");

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bt-paper);
  color: var(--bt-ink);
  font-family: var(--bt-font-prose);
  font-size: var(--bt-type-body);
  line-height: var(--bt-type-body-lh);
}
.figure, .mono { font-family: var(--bt-font-figure); font-variant-numeric: tabular-nums; }
.micro {
  font-family: var(--bt-font-figure); font-size: var(--bt-type-micro);
  text-transform: uppercase; letter-spacing: var(--bt-track-micro);
  color: var(--bt-ink-faint);
}
a { color: var(--bt-signal-ink); text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--bt-signal); outline-offset: 2px; border-radius: 0; }

/* ---- chrome ---- */
.app-header {
  display: flex; align-items: center; gap: var(--bt-space-4);
  height: 56px; padding: 0 var(--bt-space-5);
  border-bottom: 1px solid var(--bt-rule);
}
.wordmark { font-family: var(--bt-font-figure); font-size: 20px; color: var(--bt-ink); font-weight: 500; }
.app-header .node-id { font-family: var(--bt-font-figure); font-size: 12px; color: var(--bt-ink-mute); }
.app-header .spacer { flex: 1; }
.app-header .credit { font-family: var(--bt-font-figure); font-variant-numeric: tabular-nums; }
.theme-toggle { background: none; border: 0; font-family: var(--bt-font-figure); font-size: 20px; cursor: pointer; color: var(--bt-ink); }

.wrap { max-width: var(--bt-page); margin: 0 auto; padding: var(--bt-space-6) var(--bt-space-5); }

/* ---- heartbeat strip (§2) ---- */
.heartbeat {
  display: flex; align-items: flex-start; gap: var(--bt-space-7);
  padding: var(--bt-space-5); border: 1px solid var(--bt-rule);
  background: var(--bt-paper-raise); flex-wrap: wrap;
}
.hb-block .micro { display: block; margin-bottom: var(--bt-space-1); }
.hb-next .time { font-family: var(--bt-font-figure); font-size: var(--bt-type-figure-lg); }
.hb-next .rel { font-family: var(--bt-font-figure); font-size: 13px; color: var(--bt-ink-mute); margin-left: var(--bt-space-2); }
.hb-matched .val { font-family: var(--bt-font-figure); font-size: 15px; }
.hb-state { display: flex; align-items: center; gap: var(--bt-space-2); }
.hb-state .marker { width: 3px; height: 3px; background: var(--bt-ink-faint); display: inline-block; }
.hb-state .marker.live { width: 8px; height: 8px; background: var(--bt-signal); }
.hb-state .label { font-family: var(--bt-font-figure); font-size: 13px; color: var(--bt-ink-mute); }
.hb-state.fail .label { color: var(--bt-claret); }
.hb-state.fail .marker { background: var(--bt-claret); width: 8px; height: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .hb-next .marker-pulse { animation: btPulse 3.2s ease-in-out infinite; }
}
@keyframes btPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* tick row (§3) */
.ticks { display: flex; align-items: center; gap: 5px; height: 14px; }
.tick { width: 1px; height: 8px; background: var(--bt-ink-faint); }
.tick.matched { width: 4px; height: 14px; background: var(--bt-signal); }

/* ---- panels ---- */
.panel { border: 1px solid var(--bt-rule); background: var(--bt-paper-raise); padding: var(--bt-space-5); margin-top: var(--bt-space-5); }
.panel.found { border-color: var(--bt-signal-rule); }
.section-title { font-family: var(--bt-font-figure); font-size: 13px; color: var(--bt-ink-mute); margin: 0 0 var(--bt-space-4); }

/* ---- tables ---- */
table { width: 100%; border-collapse: collapse; font-family: var(--bt-font-figure); font-variant-numeric: tabular-nums; font-size: 13px; }
th { text-align: left; font-size: var(--bt-type-micro); text-transform: uppercase; letter-spacing: var(--bt-track-micro); color: var(--bt-ink-faint); font-weight: 400; padding: var(--bt-space-2) var(--bt-space-3); border-bottom: 1px solid var(--bt-rule-strong); }
td { padding: var(--bt-space-3); border-bottom: 1px solid var(--bt-rule); height: 44px; }
td.num, th.num { text-align: right; }
tr.credit { background: var(--bt-signal-wash); }
tr.credit .ppm-chip { background: var(--bt-signal); color: var(--bt-paper); padding: 2px 6px; }
tr.credit .sats { color: var(--bt-signal-ink); }
tr.hold td { color: var(--bt-ink-faint); }

/* ---- meters (§6.5) ---- */
.meter { margin: var(--bt-space-4) 0; }
.meter .head { display: flex; justify-content: space-between; align-items: baseline; }
.meter .total { font-family: var(--bt-font-figure); font-size: var(--bt-type-figure-lg); }
.meter .ceiling { font-family: var(--bt-font-figure); font-size: 13px; color: var(--bt-ink-mute); }
.meter .track { position: relative; height: 4px; background: var(--bt-data); margin-top: var(--bt-space-2); }
.meter .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--bt-signal); }
.meter .fill.over { background: var(--bt-claret); }
.meter .tick-mark { position: absolute; top: -2px; bottom: -2px; width: 1px; background: var(--bt-rule-strong); }
.meter .note { font-family: var(--bt-font-figure); font-size: 13px; color: var(--bt-ink-mute); margin-top: var(--bt-space-2); }
.meter .note.breach { color: var(--bt-claret); }

/* two-meter row: routing ppm and coordination fee never summed */
.fee-line { font-family: var(--bt-font-figure); font-size: 13px; color: var(--bt-ink-mute); margin-top: var(--bt-space-3); padding-top: var(--bt-space-3); border-top: 1px solid var(--bt-rule); }

/* ---- buttons (§12) ---- */
.btn { font-family: var(--bt-font-figure); font-size: 13px; letter-spacing: 0.04em; height: 44px; padding: 0 var(--bt-space-5); border-radius: 0; cursor: pointer; border: 1px solid transparent; }
.btn.primary { background: var(--bt-ink); color: var(--bt-paper); border-color: var(--bt-ink); }
.btn.primary:hover { background: var(--bt-signal); border-color: var(--bt-signal); }
.btn.secondary { background: transparent; border-color: var(--bt-rule-strong); color: var(--bt-ink); }
.btn.secondary:hover { border-color: var(--bt-signal); }
.btn.destructive { background: transparent; border-color: var(--bt-claret); color: var(--bt-claret); }
.btn[disabled] { opacity: 0.6; cursor: default; }
input, select { font-family: var(--bt-font-figure); font-size: 13px; height: 44px; padding: 0 var(--bt-space-3); border: 1px solid var(--bt-rule); background: var(--bt-paper-raise); color: var(--bt-ink); border-radius: 0; }
input:focus, select:focus { border-color: var(--bt-signal); outline: none; }

/* ---- ring rail (phones) ---- */
.ring-rail { display: flex; flex-direction: column; }
.ring-rail-row { display: grid; grid-template-columns: 16px 1fr auto; gap: var(--bt-space-3); align-items: center; padding: var(--bt-space-2) 0; border-left: 1px solid var(--bt-rule-strong); margin-left: 6px; padding-left: var(--bt-space-4); }
.ring-rail-node { width: 13px; height: 13px; border: 1.25px solid var(--bt-rule-strong); background: var(--bt-paper); margin-left: -20px; }
.ring-rail-node.you { width: 17px; height: 17px; background: var(--bt-ink); border-color: var(--bt-ink); margin-left: -22px; }
.ring-rail-alias { font-family: var(--bt-font-figure); font-size: 12px; }
.ring-rail-leg { font-family: var(--bt-font-figure); font-size: 11px; color: var(--bt-ink-mute); }
.ring-rail-leg.credit { color: var(--bt-signal-ink); }
.ring-rail-row.closes .ring-rail-alias { color: var(--bt-ink-mute); }

svg { max-width: 100%; height: auto; }
.overflow-x { overflow-x: auto; }