/* ===================================
   INVOICE CHECK: SPLIT BAR AND LEDGER
   The result part of the receipt card (invoice-check.css holds the rest): the bill as one bar of
   three segments with labels, and the compact ledger below it. Uses the component-local tokens
   of the `.tariff-invoice` section root. Labels of empty segments carry `hidden`.
   =================================== */

/* --- Split bar: the bill as health insurer | tariff | own share, labels on the bar ---
   Mobile first (375px is the base): the label row wraps, every label may break its name over
   several lines and is never wider than the card; the amounts stay on one line. Wider screens
   only enlarge the amounts (min-width query below). */
.tariff-invoice__split { display: grid; gap: 0; min-width: 0; }
.tariff-invoice__split-row { display: flex; flex-wrap: wrap; align-items: flex-end; min-width: 0; }
.tariff-invoice__split-row--below { align-items: flex-start; }

/* A label is a small name over a bold amount; a 2px tick ties it to its segment. The health
   label takes the width of its segment (inline), never less than its amount, so the tariff label
   starts above the tariff segment; the own-share label hangs from the right end of the bar. */
.tariff-invoice__split-label {
  position: relative;
  display: grid;
  gap: 1px;
  min-width: 0;
  max-width: 100%;
  padding: 0 10px 10px 0;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
/* display: grid would otherwise outrank the user-agent rule for the hidden attribute. */
.tariff-invoice__split-label[hidden] { display: none; }
.tariff-invoice__split-label::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2px;
  height: 10px;
  background: var(--tp-grey-ink);
}
/* Never narrower than its own text (no mid-word breaks), never more than half the bar. */
.tariff-invoice__split-label--health { flex: 0 0 auto; min-width: max-content; max-width: 50%; }
.tariff-invoice__split-label--insurer { flex: 1 1 0; }
.tariff-invoice__split-label--insurer::after { background: var(--tp-accent); }
.tariff-invoice__split-label--you {
  flex: 0 1 auto;
  margin-left: auto;
  padding: 10px 0 0 10px;
  text-align: right;
}
.tariff-invoice__split-label--you::after {
  top: 0;
  right: 0;
  left: auto;
  bottom: auto;
  background: var(--tp-ink);
}
.tariff-invoice__split-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tp-ink-3);
}
.tariff-invoice__split-amount {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.3px;
  white-space: nowrap;
  color: var(--tp-grey-ink);
}
.tariff-invoice__split-label--insurer .tariff-invoice__split-amount {
  font-size: 24px;
  letter-spacing: -0.5px;
  color: var(--tp-accent);
}
.tariff-invoice__split-label--you .tariff-invoice__split-amount { color: var(--tp-ink); }
@media (min-width: 481px) {
  .tariff-invoice__split-label { padding-right: 12px; }
  .tariff-invoice__split-label--you { padding-left: 12px; }
  .tariff-invoice__split-amount { font-size: 20px; }
  .tariff-invoice__split-label--insurer .tariff-invoice__split-amount { font-size: clamp(24px, 2.4vw, 30px); }
}

.tariff-invoice__bar {
  display: flex;
  height: 16px;
  border-radius: 999px;
  background: var(--tp-grey-tile);
  box-shadow: inset 0 0 0 1px var(--tp-line);
  overflow: hidden;
}
.tariff-invoice__bar i { display: block; height: 100%; transition: width 0.45s var(--tp-ease); }
.tariff-invoice__bar-health { background: color-mix(in srgb, var(--tp-grey-ink) 32%, var(--tp-grey-tile)); }
.tariff-invoice__bar-insurer { background: var(--tp-accent); }
.tariff-invoice__bar-you { background: var(--tp-ink); }
.tariff-invoice__bar i + i { box-shadow: inset 2px 0 0 var(--tp-paper); }

/* Ledger rows (compact on phones, a little more air from 481px) */
.tariff-invoice__ledger {
  display: grid;
  margin: 0;
  padding: 0 14px;
  border-radius: var(--tp-r-md);
  background: var(--tp-cream);
}
@media (min-width: 481px) {
  .tariff-invoice__ledger { padding: 0 18px; }
}
.tariff-invoice__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 15px;
}
.tariff-invoice__ledger .tariff-invoice__row { padding: 9px 0; border-bottom: 1px solid var(--tp-line); font-size: 14.5px; }
.tariff-invoice__ledger .tariff-invoice__row:last-child { border-bottom: 0; }
.tariff-invoice__row dt { color: var(--tp-ink-2); }
.tariff-invoice__row dd {
  margin: 0;
  font-weight: 700;
  white-space: nowrap;
  color: var(--tp-ink);
}

@media (prefers-reduced-motion: reduce) {
  .tariff-invoice__bar i {
    transition: none;
  }
}