/* Expected range card. Namespaced .rg-* so it cannot collide with style.css,
 * theme-v4.css or the other card modules. The band is printed in points as
 * well as drawn. */
.range-card { display: flex; flex-direction: column; gap: 6px; border-left: 4px solid #38bdf8; }
.range-card.rg-off { border-left-color: #334155; }
.rg-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rg-head .label { flex: 0 0 auto; }
.rg-meta { flex: 1 1 auto; text-align: right; font-size: 10px; color: var(--text-dimmer);
  font-variant-numeric: tabular-nums; }
.rg-row { display: grid; grid-template-columns: minmax(110px, 1fr) auto; grid-template-areas: "label figs" "track track";
  gap: 3px 10px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.rg-label { grid-area: label; font-size: 12px; font-weight: 600; color: var(--text); }
.rg-sub { display: block; font-size: 10px; font-weight: 400; color: var(--text-dimmer); }
.rg-figs { grid-area: figs; text-align: right; font-variant-numeric: tabular-nums; }
.rg-band { display: block; font-size: 14px; font-weight: 700; color: var(--text); }
.rg-med { display: block; font-size: 10px; color: var(--text-dim); }
.rg-track { grid-area: track; position: relative; height: 8px; border-radius: 4px; background: var(--bg-card-alt); }
.rg-fill { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: rgba(56, 189, 248, .45); }
.rg-tick { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: #e0f2fe; }
.rg-day { font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.rg-note { font-size: 11px; color: #fbbf24; }
.rg-foot { font-size: 10px; color: var(--text-dimmer); line-height: 1.45; margin: 4px 0 0; }
.rg-empty { font-size: 12px; color: var(--text-dimmer); }
.rg-details { margin-top: 4px; }
.rg-details summary { cursor: pointer; color: var(--text-dim); }
.rg-details summary:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
@media (max-width: 480px) {
  .rg-meta { text-align: left; flex-basis: 100%; }
}
