/**
 * True cost comparison.
 *
 * Colours come from the theme tokens so it follows light and dark without
 * declaring a palette. The two cards are deliberately NOT styled as winner
 * and loser: the verdict strip below them says which is cheaper, and it is
 * allowed to say theirs.
 */

.tc { --tc-gap: clamp(18px, 2.6vw, 28px); max-width: 60rem; margin: 0 auto; }

.tc__fallback {
  border: 1px solid var(--line-2, #d7d9d6);
  background: var(--soft, #f4f3ef);
  padding: 20px;
}

.tc__block { margin-bottom: var(--tc-gap); }

.tc__h {
  font-family: var(--disp, inherit);
  font-weight: 400;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  margin: 0 0 10px;
}
.tc__help { color: var(--muted, #6b7073); font-size: .92rem; margin: 0 0 12px; }

/* ---- option buttons ---- */
.tc__opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.tc__opts--row { display: flex; flex-wrap: wrap; }

.tc__opt {
  font: inherit; text-align: left; cursor: pointer;
  padding: 15px 17px; min-height: 48px;
  border: 1px solid var(--line-2, #d7d9d6);
  background: var(--surface, #fff); color: var(--ink, #23282b);
  border-radius: 2px; transition: border-color .18s;
}
.tc__opt:hover { border-color: var(--teal, #159e9e); }
.tc__opt.is-on { border-color: var(--teal, #159e9e); box-shadow: inset 0 0 0 1px var(--teal, #159e9e); background: var(--teal-soft, rgba(21,158,158,.08)); }
.tc__opt b { display: block; font-family: var(--disp, inherit); font-weight: 400; font-size: 1.08rem; }
.tc__opt span { display: block; margin-top: 5px; font-size: .85rem; color: var(--muted, #6b7073); }
.tc__opt--sm { flex: 0 1 auto; padding: 12px 16px; font-size: .92rem; font-weight: 700; }

.tc__opt:focus-visible, .tc__check:focus-visible, .tc__price:focus-visible, .tc__cta:focus-visible {
  outline: 2px solid var(--teal-ink, #0f7d7d); outline-offset: 2px;
}

/* ---- price input ---- */
.tc__pricewrap { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.tc__cur { font-family: var(--mono, monospace); font-size: 1.5rem; color: var(--muted, #6b7073); }
.tc__price {
  font: inherit; font-family: var(--mono, monospace); font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  width: 100%; max-width: 12rem; padding: 10px 12px;
  border: 1px solid var(--line-2, #d7d9d6);
  background: var(--surface, #fff); color: var(--ink, #23282b); border-radius: 2px;
}

.tc__checks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tc__check {
  font: inherit; font-size: .88rem; cursor: pointer;
  padding: 10px 14px; min-height: 44px;
  border: 1px solid var(--line-2, #d7d9d6); border-radius: 999px;
  background: var(--surface, #fff); color: var(--muted, #6b7073);
}
.tc__check.is-on {
  border-color: var(--teal, #159e9e); color: var(--ink, #23282b);
  background: var(--teal-soft, rgba(21,158,158,.08)); font-weight: 700;
}

/* ---- result cards ---- */
.tc__out { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; margin-top: var(--tc-gap); }
.tc__card {
  border: 1px solid var(--line-2, #d7d9d6);
  background: var(--surface, #fff);
  padding: clamp(18px, 2.2vw, 24px);
  min-width: 0;
  /* The two cards carry different numbers of lines, so the totals have to be
     pinned to the bottom or they sit at different heights and stop being
     comparable at a glance, which is the entire job of this component. */
  display: flex;
  flex-direction: column;
}
.tc__card .tc__total { margin-top: auto; }
.tc__card--ours { border-color: var(--teal, #159e9e); box-shadow: inset 0 0 0 1px var(--teal, #159e9e); }
.tc__cardh {
  font-family: var(--disp, inherit); font-weight: 400;
  font-size: 1.1rem; margin: 0 0 14px;
  text-transform: uppercase; letter-spacing: .03em;
}

.tc__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--line, #e4e5e1); font-size: .92rem;
}
.tc__rl { min-width: 0; }
.tc__rl em {
  display: block; font-style: normal; font-size: .78rem;
  color: var(--muted, #6b7073); margin-top: 2px; line-height: 1.35;
}
.tc__rv { font-family: var(--mono, monospace); font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.tc__row.is-zero .tc__rv { font-weight: 400; font-family: var(--body, inherit); color: var(--muted, #6b7073); font-style: italic; }
.tc__row.is-soft .tc__rv { opacity: .8; }

.tc__total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-top: 14px; padding-top: 14px; border-top: 2px solid var(--ink, #23282b);
}
.tc__total span { font-size: .84rem; color: var(--muted, #6b7073); }
.tc__total b {
  font-family: var(--disp, inherit); font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ---- verdict ---- */
.tc__verdict {
  grid-column: 1 / -1;
  padding: 18px 20px; border-left: 3px solid var(--teal, #159e9e);
  background: var(--teal-soft, rgba(21,158,158,.08));
}
.tc__verdict.is-lose { border-left-color: var(--line-2, #d7d9d6); background: var(--soft, #f4f3ef); }
.tc__verdict b {
  display: block; font-family: var(--disp, inherit); font-weight: 400;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem); margin-bottom: 6px;
}
.tc__verdict span { font-size: .93rem; color: var(--char, #3a4043); line-height: 1.5; }

.tc__cta {
  grid-column: 1 / -1;
  display: inline-block; justify-self: start;
  font-weight: 700; text-decoration: none;
  padding: 14px 26px; min-height: 52px;
  background: var(--ink, #23282b); color: var(--surface, #fff); border-radius: 2px;
}
.tc__cta:hover { background: var(--teal-ink, #0f7d7d); }

.tc__fine {
  margin-top: 18px; font-size: .8rem; color: var(--muted, #6b7073);
  line-height: 1.5; max-width: 62ch;
}

@media (max-width: 480px) {
  .tc__opts--row { flex-direction: column; }
  .tc__opt--sm { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .tc__opt { transition: none; } }