/* The rounding guide's graphics (blog/how-wattlas-rounds.html), drawn from
   real figures. Site colours only: the accent for solar and "rounded up",
   the link blue for "rounded down". */

.rounding-figure {
  margin: 28px 0;
  padding: 22px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.rounding-figure figcaption {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-muted);
  margin-top: 14px;
}

.rounding-figure__svg {
  display: block;
  width: min(100%, 460px);
  height: auto;
  margin: 0 auto;
  font-family: 'IBM Plex Sans', sans-serif;
  color: var(--ink);
}

.rounding-figure__svg--receipt,
.rounding-figure__svg--narrow {
  width: min(100%, 380px);
}

/* The drift chart */
.rf-label {
  font-size: 11px;
  fill: var(--ink-muted);
}
.rf-solar {
  fill: var(--accent);
  opacity: 0.85;
}
.rf-axis {
  stroke: var(--hairline);
  stroke-width: 1.5;
}
.rf-up {
  fill: var(--accent);
}
.rf-up-stem {
  stroke: var(--accent);
  stroke-width: 2;
}
.rf-down {
  fill: var(--link);
}
.rf-down-stem {
  stroke: var(--link);
  stroke-width: 2;
}
.rf-zero {
  fill: var(--ink-muted);
  opacity: 0.5;
}
.rf-run {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linejoin: round;
}
.rf-run-end {
  fill: var(--ink);
}
.rf-big {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  font-weight: 500;
  fill: var(--ink);
}
.rf-note,
.rf-tick,
.rf-key {
  font-size: 10.5px;
  fill: var(--ink-muted);
}

/* The receipt */
.rc-paper {
  fill: var(--surface);
  stroke: var(--hairline);
  stroke-width: 1.5;
  filter: drop-shadow(0 6px 14px rgba(27, 36, 86, 0.1));
}
.rc-head {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  fill: var(--ink-muted);
}
.rc-rule {
  stroke: var(--hairline);
  stroke-width: 1.5;
}
.rc-rule--dash {
  stroke-dasharray: 4 4;
}
.rc-item,
.rc-sum {
  font-size: 14px;
  fill: var(--ink);
}
.rc-sum {
  fill: var(--ink-muted);
}
.rc-amt {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 16px;
  fill: var(--ink);
}
.rc-exact {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  fill: var(--ink-muted);
}
.rc-total {
  font-size: 17px;
  font-weight: 600;
  fill: var(--ink);
}
.rc-total--amt {
  font-family: 'IBM Plex Mono', monospace;
  fill: var(--accent);
}

/* The digits that fall off */
.rl-lab {
  font-size: 14px;
  font-weight: 600;
  fill: var(--ink);
}
.rl-sub,
.rl-note {
  font-size: 12px;
  font-weight: 400;
  fill: var(--ink-muted);
}
.rl-num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 28px;
}
.rl-keep {
  fill: var(--ink);
}
.rl-drop {
  fill: var(--accent);
}
.rl-unit {
  font-size: 15px;
  fill: var(--ink-muted);
}
.rl-rule {
  stroke: var(--hairline);
  stroke-width: 1;
}