/* ==========================================================================
   Income Tax Checklist
   The client-facing year-end return. One TOPIC per screen: the question that
   opens the topic sits at the top, and answering Yes reveals its follow-ups
   underneath — the app's reveal-in-place behaviour, not a jump to a new page.
   Everything on screen is built by src/js/tax-checklist.js from
   src/data/tax-checklist/<year>.json. Nothing here is per-question.
   ========================================================================== */

.tc {
  max-width: 800px;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* ----- progress ----- */

.tc-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tc-progress__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-base);
}

.tc-progress__where { color: var(--color-text); }
.tc-progress__count { color: var(--color-text-muted); }

.tc-progress__track {
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-bg-subtle);
  overflow: hidden;
}

.tc-progress__bar {
  height: 100%;
  width: 0;
  border-radius: var(--radius-full);
  background: var(--color-text);
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ----- the screen ----- */

.tc-screen {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-8);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.tc-screen__intro {
  margin: 0;
  color: var(--color-text-muted);
}

/* ----- one question ----- */

.tc-q {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tc-q__title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: var(--leading-body);
}

.tc-q__req {
  color: var(--color-text-muted);
  font-weight: var(--weight-regular);
}

.tc-q__help {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  white-space: pre-line;
}

/* Controls take the width they need, not the width of the card — a Yes/No
   stretched across 700px reads as two buttons rather than one choice. */
.tc-q > .chip-row,
.tc-q > .tx-dd,
.tc-q > .frange { align-self: flex-start; }

.tc-q > input.input { max-width: 420px; }

.tc-q__error {
  margin: 0;
  color: var(--color-danger);
  font-size: var(--text-sm);
}

.tc-q--missing .tc-q__title { color: var(--color-danger); }

/* The follow-ups a gate reveals. A hairline rule ties them to the question
   above without boxing them in — a box inside a box reads as a second screen. */
.tc-kids {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-left: var(--space-4);
  padding-left: var(--space-6);
  border-left: var(--border-width) solid var(--color-border);
}

.tc-kids--in {
  animation: tcReveal 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes tcReveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ----- composite fields (name/email, address) ----- */

.tc-parts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.tc-parts .field--wide { grid-column: 1 / -1; }

/* ----- statement ----- */

.tc-statement {
  white-space: pre-line;
}

/* ----- navigation ----- */

/* Back / Next sit clear of the card, not tucked under its edge (Peter, 29 Jul). */
.tc-nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.tc-nav__spacer { flex: 1; }

.tc-saved {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* ----- review + submit ----- */

.tc-review {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.tc-review__sec {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.tc-answer {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: var(--border-width) solid var(--color-border);
}

.tc-answer__q { flex: 1; color: var(--color-text-muted); }
.tc-answer__a { flex: 0 1 40%; }
.tc-answer__a--empty { color: var(--color-text-muted); }

.tc-answer__edit {
  flex: none;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
  text-decoration: underline;
  cursor: pointer;
}

@media (max-width: 640px) {
  .tc-screen { padding: var(--space-6); }
  .tc-kids { margin-left: 0; padding-left: var(--space-4); }
  .tc-parts { grid-template-columns: minmax(0, 1fr); }
  .tc-nav { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .tc-kids--in { animation: none; }
  .tc-progress__bar { transition: none; }
}

/* The €300 moment at the end of the review (Peter, 14 Aug) — the estimate first,
   the flat fee second, both plain sentences; the figures are the only dark ink. */
.tc-pay { margin-top: 28px; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.tc-pay p { margin: 0; font-size: var(--text-base); color: var(--color-text-muted); line-height: var(--leading-body); }
.tc-pay strong { font-weight: var(--weight-regular); color: var(--color-text); font-variant-numeric: tabular-nums; }