/* Page-specific styles for stamp-duty-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. Structurally this is
   the same .calc-shell system as the other calculators, following the
   student loan calculator's two-column layout. */

  /* ---------- stamp-duty-calculator (scoped) ---------- */

  /* Colours this calculator adds to the shared set in calculator-shared.css
     (a name that appears in both takes this file's value). */
  .calc-shell {
    --surface: #ffffff;
    --growth: #0b6b4f;
    --growth-soft: #e6f4ee;
    --warn: #8a4b1f;
    --warn-soft: #fdf1e6;
  }
  @media (prefers-color-scheme: dark) {
    .calc-shell {
      --surface: #17212f;
      --growth: #2dd4a0;
      --growth-soft: #123227;
      --warn: #e0a878;
      --warn-soft: #2a1d12;
    }
  }

  .calc-shell .ad-rectangle::after { content: "(Responsive, up to 420x260)"; }

  /* Two columns, the same shape as the student loan and PAYE calculators:
     what you type on the left, what it works out on the right. See the
     student loan calculator's stylesheet for the full reasoning on the
     grid-template-rows: auto 1fr trick below — it's copied verbatim because
     the layout need is identical: a short input column, a sidebar ad
     sitting under it, and a taller results column beside both. */
  .calc-shell .layout {
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: 22px;
    align-items: start;
  }
  .calc-shell .layout > .col-inputs { grid-column: 1; grid-row: 1; }
  .calc-shell .layout > aside.rail { grid-column: 1; grid-row: 2; align-self: start; }
  .calc-shell .layout > .col-results { grid-column: 2; grid-row: 1 / span 2; }

  @media (max-width: 1080px) {
    .calc-shell .layout {
      grid-template-columns: 1fr;
      grid-template-rows: none;
    }
    .calc-shell .layout > .col-inputs,
    .calc-shell .layout > .col-results,
    .calc-shell .layout > aside.rail {
      grid-column: auto;
      grid-row: auto;
    }
    .calc-shell aside.rail { order: 3; }
  }

  .calc-shell .col > .card:first-child { margin-top: 0; }

  .calc-shell [hidden] { display: none !important; }
  .calc-shell .checks { display: grid; gap: 8px; }
  .calc-shell .check {
    cursor: pointer;
  }
  .calc-shell .check input { flex: none; }
  .calc-shell fieldset:last-of-type { margin-bottom: 0; }
  /* The rule now sits beside the legend text rather than above it (a ::after
     flex sibling, not a border), and fades out toward its far end rather
     than running solid the full width — reads as one heading-plus-rule
     object instead of a label with a line stranded under it. The fade holds
     solid to 80%: fading from the very start left it too faint to read as
     a rule at all against this page's pale line colour. */
  .calc-shell legend {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 0;
    padding-top: 14px;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 10px;
  }
  .calc-shell legend::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, var(--line) 0%, var(--line) 80%, transparent 100%);
  }

  .calc-shell .field { margin-bottom: 12px; }
  .calc-shell .field:last-child { margin-bottom: 0; }

  /* ---- the outcome, in colour ----
     Green only for the one genuinely unambiguous good outcome — nothing due
     at all, whether from first-time buyer relief or simply a low enough
     price. There is deliberately no matching red or amber for a large bill:
     a high figure here isn't a warning or a mistake, just the tax that
     applies, so it stays neutral rather than looking like something has
     gone wrong. Scoped to .outcome-hero rather than the first .stat-hero,
     same reasoning as the student loan calculator: the tile beside it is
     the total cost including the duty, and tinting that green on a large
     bill would be actively misleading. */
  .calc-shell .calc-reveal.is-nil .outcome-hero {
    background: linear-gradient(160deg, color-mix(in srgb, var(--growth) 13%, var(--surface)), var(--surface));
    border-color: color-mix(in srgb, var(--growth) 26%, var(--line));
  }
  .calc-shell .calc-reveal.is-nil #rDue { color: var(--growth); }

  .calc-shell table.breakdown {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    font-size: var(--text-read);
  }
  .calc-shell table.breakdown th, .calc-shell table.breakdown td {
    text-align: end;
    padding: 9px 10px;
    border-bottom: 1px solid var(--line);
  }
  .calc-shell table.breakdown th:first-child, .calc-shell table.breakdown td:first-child { text-align: start; }
  .calc-shell table.breakdown thead th {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-soft);
  }
  /* The first cell of each row is a row header (<th scope="row">), so a
     screen reader can say which row a figure belongs to. It keeps the look
     of an ordinary cell. */
  .calc-shell table.breakdown tbody th { font-weight: inherit; }
  .calc-shell table.breakdown tr.total td, .calc-shell table.breakdown tr.total th { border-top: 2px solid var(--line); border-bottom: 0; font-weight: 800; padding-top: 12px; }