/* Page-specific styles for self-employed-tax-calculator-app.html.
   Shared layout, colours and components live in brand-shared.css (the
   whole site) and calculator-shared.css (every calculator) — this file
   only holds what's unique to this calculator. The two-column layout is
   the shared .layout-split; the headline is PAYE's .result-card, the
   breakdown is table.tax-table and the doughnut is .split-wrap. */

  /* The doughnut key as written in the page, before the script draws it
     (the script colours each dot itself). */
  .calc-shell .legend-dot.k-loan { background: var(--loan); }

  /* Unlike the other breakdowns, this one has a word cell ("Treated as
     paid") that is better wrapped than kept on one line, which would leave
     the wordy labels beside it too little room. */
  .calc-shell table.tax-table td { white-space: normal; }

  /* ---- When you pay ----
     The January figure is the one that catches people out in their first
     year, so it gets a box of its own above the dated list. */
  .calc-shell .jan-box {
    padding: 14px 16px;
    border-radius: 3px;
    background: var(--warn-soft);
    border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--line));
    border-inline-start: 3px solid var(--warn);
  }
  .calc-shell .jan-box .k { color: var(--warn); }
  .calc-shell .jan-v {
    font-size: clamp(1.5rem, 4vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-top: 2px;
    overflow-wrap: anywhere;
  }
  .calc-shell .jan-note { margin: 4px 0 0; font-size: var(--text-small); color: var(--ink); }

  .calc-shell .timeline {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    font-size: var(--text-read);
  }
  .calc-shell .timeline li {
    display: grid;
    grid-template-columns: 9.5em minmax(0, 1fr) auto;
    gap: 4px 14px;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
  }
  .calc-shell .timeline li:last-child { border-bottom: 0; }
  .calc-shell .timeline .tl-date { font-weight: 700; white-space: nowrap; }
  .calc-shell .timeline .tl-what { color: var(--ink-soft); }
  .calc-shell .timeline .tl-amt { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: end; }
  .calc-shell .timeline li.tl-key .tl-amt,
  .calc-shell .timeline li.tl-key .tl-date { color: var(--warn); }
  @media (max-width: 560px) {
    .calc-shell .timeline li { grid-template-columns: minmax(0, 1fr) auto; }
    .calc-shell .timeline .tl-what { grid-column: 1 / -1; grid-row: 2; }
  }