/* S-meter module (web/smeter.js). Colours are CSS variables on .sm-root. */
.sm-root {
  --sm-bg: #f4f5f7; --sm-fg: #1c2230; --sm-dim: #5d667a; --sm-track: #d9dde5;
  --sm-green: #2f9e44; --sm-amber: #f59f00; --sm-red: #e03131; --sm-border: #c9cfdb;
  box-sizing: border-box; width: 100%; padding: 10px 16px 8px; background: var(--sm-bg); color: var(--sm-fg);
  border: 1px solid var(--sm-border); border-radius: 8px; font: 13px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  .sm-root:not([data-theme="light"]) {
    --sm-bg: #11151c; --sm-fg: #dfe4ee; --sm-dim: #98a1b3; --sm-track: #262d39;
    --sm-green: #51cf66; --sm-amber: #fcc419; --sm-red: #ff6b6b; --sm-border: #2f3846;
  }
}
.sm-root[data-theme="dark"] { --sm-bg: #11151c; --sm-fg: #dfe4ee; --sm-dim: #98a1b3; --sm-track: #262d39; --sm-green: #51cf66; --sm-amber: #fcc419; --sm-red: #ff6b6b; --sm-border: #2f3846; }
.sm-canvas { display: block; width: 100%; }
.sm-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 4px; }
.sm-big { font-size: 34px; font-weight: 700; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; min-width: 3.2em; }
.sm-num { font-size: 20px; font-variant-numeric: tabular-nums; color: var(--sm-dim); }
.sm-note { font-size: 11px; color: var(--sm-dim); min-height: 1.3em; }
.sm-note:empty { display: none; }
@media (max-width: 520px) { .sm-root { border-radius: 0; border-left: 0; border-right: 0; } .sm-big { font-size: 40px; } }