/* The stall return calculator (assets/roi-calc.js), drawn into the one post
   that carries <div class="roi-calc">. Built from the site's own tokens so it
   reads as part of the article: the .facts box's ground and border, the
   inputs' quiet inset, and the verdict in the product's own colours. */
.roi-calc {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--ground); padding: 22px; margin: 2em 0;
}
.roi-calc h3 { margin: 0 0 6px; font-size: 1.15rem; }
.roi-calc .roi-hint { font-size: .9rem; color: var(--ink-2); margin: 0 0 18px; }
.roi-grid { display: grid; gap: 18px; }
@media (min-width: 720px) { .roi-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.roi-calc fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.roi-calc legend {
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600; margin-bottom: 10px; padding: 0;
}
.roi-field { display: block; margin-bottom: 12px; }
.roi-field > span:first-child { display: block; font-size: .88rem; color: var(--ink-2); margin-bottom: 5px; }
.roi-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.roi-field, .roi-input { min-width: 0; }
.roi-input {
  display: flex; align-items: center; background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px; padding: 0 12px;
}
.roi-input:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); }
.roi-input i { font-style: normal; color: var(--ink-3); font-size: .95rem; }
.roi-input input {
  flex: 1; min-width: 0; width: 100%; border: 0; outline: 0; background: transparent;
  font: 500 1rem/1 'IBM Plex Mono', ui-monospace, monospace; color: var(--ink);
  padding: 11px 8px; height: 44px;
}
.roi-count input { padding-left: 0; }
.roi-calc select {
  width: 100%; height: 44px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); padding: 0 12px; font: inherit; font-size: 1rem; color: var(--ink);
}
.roi-out { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 18px; }
.roi-out dl { display: grid; gap: 14px; margin: 0 0 16px; }
@media (min-width: 620px) { .roi-out dl { grid-template-columns: 1fr 1fr; } }
.roi-out dt { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.roi-out dd { margin: 4px 0 0; font: 600 1.35rem/1.2 'IBM Plex Mono', ui-monospace, monospace; color: var(--ink); }
.roi-out dd small { display: block; font: 400 .84rem/1.4 'Instrument Sans', sans-serif; color: var(--ink-3); margin-top: 3px; }
.roi-verdict { margin: 0; padding: 12px 16px; border-radius: 10px; font-size: .95rem; color: var(--ink-2); background: var(--surface); border-left: 3px solid var(--ink-3); }
.roi-verdict b { color: var(--ink); margin-right: 4px; }
.roi-book, .roi-paid { border-left-color: var(--ok-ink); }
.roi-early, .roi-watch { border-left-color: var(--gold); }
.roi-reconsider { border-left-color: var(--alert); }