/* Balanik: extras for the Black Friday planner and break-even orders calculators.
   Loaded after page.css. Uses only base.css tokens. */

/* Negative values in the result panel */
.calc__rows b.is-neg, .calc__big.is-neg { color: var(--coral-ink); }

.calc__out .calc__hint { margin-top: 12px; }

/* Small label under the big number */
.calc__sub { margin-top: 8px !important; font-size: var(--t-small); color: var(--fog); }

/* Bars in the break-even result */
.calc__out .saver__bars { margin: 22px 0 6px !important; }
.calc__out .saver__bar { grid-template-columns: 82px minmax(0, 1fr) auto; }
.calc__out .saver__bar--be .saver__track i { background: var(--ink); }
.calc__out .saver__bar--target .saver__track i { background: var(--mint-ink); }
.calc__out .saver__bar[hidden] { display: none; }

/* Add / remove extra fixed-cost rows */
.be-extra__row { display: flex; gap: 10px; align-items: center; }
.be-extra__row .calc__input { flex: 1; min-width: 0; }
.be-add, .be-extra__remove {
  height: 40px; padding: 0 16px; border: 1px solid var(--haze); border-radius: var(--r-pill); background: var(--paper);
  font: 500 var(--t-small)/1 var(--font); color: var(--storm); cursor: pointer; transition: border-color .2s var(--ease), color .2s var(--ease);
}
.be-add { justify-self: start; }
.be-add:hover, .be-extra__remove:hover { border-color: var(--violet); color: var(--violet); }
.be-add:focus-visible, .be-extra__remove:focus-visible { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px var(--lilac); }
.be-extra-list { display: contents; }

/* Narrow screens: keep the number fields readable at 375px */
@media (max-width: 639px) {
  .calc__out { padding: 22px 18px; }
  .calc__rows li { font-size: var(--t-small); }
}