/* Page-specific styles for paye-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. */

  /* ---------- uk-paye-salary-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;
    --brand-ink: #ffffff;
    --danger: #b4341f;
    --shadow: 0 1px 2px rgba(20,30,60,.06), 0 8px 24px rgba(20,30,60,.06);
    --maxw: 1180px;
  }
  @media (prefers-color-scheme: dark) {
    .calc-shell {
      --bg: #0e131c;
      --surface: #161d29;
      --brand-ink: #06101f;
      --danger: #ff7a63;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
    }
  }
  .calc-shell {
    font-size: 16px;
  }
  .calc-shell a { color: var(--brand); }
  .calc-shell .wrap { max-width: var(--maxw); }
  .calc-shell .ad-incontent::after { content: "(Responsive, 280px tall)"; }
  .calc-shell .ad-leaderboard { margin-block: 20px; }
  /* The same 20px gap as between any two cards, above and below. */
  .calc-shell .ad-incontent { min-height: 280px; margin-block: 20px; }
  /* Same leaderboard as #ad-top, just a smaller bottom margin since this one
     sits right above the page footer rather than more content below it. */
  .calc-shell #ad-bottom { margin-block: 20px 10px; }

  /* No padding here at all — every other calculator's main has none. The
     6px this used to carry on top made the gap under the top banner ad
     26px instead of the 20px it is everywhere else, and the 28px it used
     to carry on the bottom made the gap before the page disclaimer 46px
     instead of the 40px it is everywhere else. #main's own :focus outline
     is already suppressed below, so it wasn't holding room for either. */
  .calc-shell main { padding-block: 0; }
  .calc-shell .layout { display: block; }
  /* Form as one column on the left; results (headline + table) stacked on the right.
     grid-template-rows: auto 1fr is the same trick as the student loan and
     stamp duty calculators' .layout — see the student loan calculator's
     stylesheet for the full reasoning. It matters here because the prefill
     note is a direct child of this grid, before the form: left to auto-flow,
     a 3-item grid (note, form, results) across 2 columns places the note in
     column 1, pushes the form into column 2, and wraps the results into
     column 1 on a second row. Explicit placement keeps the note stacked
     above the form in the narrow column, the same place it sits on every
     other calculator, with the results column untouched beside both.

     row-gap is 0, not the usual 22px, because the two row tracks exist
     whether or not the note is showing — grid-template-rows: auto 1fr
     always creates both. With the note hidden its row is empty and
     auto-sizes to nothing, but a non-zero row-gap still opens up between
     it and the form's row regardless, leaving a dead 22px above the form
     that the results column doesn't have. Zero row-gap avoids that; the
     note's own bottom margin (brand-shared.css) supplies the visible
     spacing on the rare page load where the note actually shows. */
  .calc-shell .stack { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 22px; row-gap: 0; align-items: start; }
  .stack > * { min-width: 0; }
  .calc-shell .stack > .prefill-note { grid-column: 1; grid-row: 1; }
  .calc-shell .stack > #calc { grid-column: 1; grid-row: 2; }
  .calc-shell .stack > .calc-reveal { grid-column: 2; grid-row: 1 / span 2; }

  /* 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 fieldset legend {
    display: flex; align-items: center; gap: 14px; width: 100%;
    font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    color: var(--ink-soft); padding: 0; padding-top: 14px; margin-bottom: 10px;
  }
  .calc-shell fieldset legend::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, var(--line) 0%, var(--line) 80%, transparent 100%);
  }

  /* A field: its label, the control and any hint below it. How those
     look - grey labels and hints, the boxes, the brown glow - is shared
     with every calculator (calculator-shared.css); this is only the
     spacing between fields on this page.

     Most fields are a <div class="field"> with a <label for=…> inside, and
     the hint tied to the control with aria-describedby, so a screen reader
     reads the label as the field's name and the hint as extra detail rather
     than running the two together. The salary sacrifice rows keep a
     wrapping <label class="field"> because they are copied by script and
     have no ids to point a for= at; everything inside those is a <span>,
     which a <label> is allowed to hold (a <div> isn't). */
  .calc-shell .field { display: block; margin-bottom: var(--field-gap); }
  /* A standalone p.hint's margin-top is more specific than the .u-m-tight
     utility it's paired with here, so it would otherwise win and shrink the
     gap this note needs after the dashed "+ Add another sacrifice" button. */
  .calc-shell p.hint.u-m-tight { margin-top: 8px; }
  .calc-shell .row { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--field-gap-across); }
  /* display: grid above outranks the browser's own [hidden] rule, which left
     the Hours / Days per week row showing for a yearly salary even though
     toggleRateInputs() had hidden it. */
  .calc-shell .row[hidden] { display: none; }
  .calc-shell .row-3 { display: grid; grid-template-columns: 1.4fr 1fr; column-gap: var(--field-gap-across); }

  .calc-shell .checks { display: grid; gap: 8px; }

  /* ---------- Results ---------- */
  /* The take-home figure's box, label, figure and secondary line are the
     shared .headline-card pattern (calculator-shared.css) - one of the
     site's three ways of showing a headline result. Only what's unique to
     this calculator stays here: the "nothing changed, and that's correct"
     line below the figure. Quiet enough not to compete with the figure
     above it, close enough that it's read in the same glance — the full
     explanation still sits with the other notes. */
  .calc-shell .headline-card .year-note {
    margin: 8px 0 0;
    color: var(--ink-soft);
    font-size: var(--text-small);
    line-height: 1.35;
  }
  .calc-shell .headline-card .year-note[hidden] { display: none; }

  .calc-shell table.breakdown { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
  .calc-shell table.breakdown caption { text-align: start; font-weight: 700; padding: 4px 0 10px; }
  .calc-shell table.breakdown th, .calc-shell table.breakdown td { padding: 8px 6px; text-align: end; border-bottom: 1px solid var(--line); font-size: var(--text-read); }
  .calc-shell table.breakdown th:first-child, .calc-shell table.breakdown td:first-child { text-align: start; }
  .calc-shell table.breakdown thead th { color: var(--ink-soft); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; }
  /* 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.group td, .calc-shell table.breakdown tr.group th { font-weight: 700; }
  .calc-shell table.breakdown tr.sub th { padding-inline-start: 22px; font-weight: 400; color: var(--ink-soft); font-size: var(--text-small); }
  .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; font-size: 1rem; padding-top: 12px; }
  .calc-shell table.breakdown td.pos { color: var(--accent); }
  .calc-shell table.breakdown td.neg { color: var(--danger); }
  .calc-shell .table-scroll { -webkit-overflow-scrolling: touch; }
  @media (max-width: 560px) {
    .calc-shell table.breakdown th, .calc-shell table.breakdown td { padding: 8px 6px; font-size: var(--text-small); }
    .calc-shell table.breakdown thead th { letter-spacing: .02em; }
  }

  .calc-shell .stat-grid { margin-top: 16px; }
  .calc-shell .stat .v { font-variant-numeric: tabular-nums; }

  .calc-shell details.bands { margin-top: 14px; }
  .calc-shell details.bands summary { cursor: pointer; font-weight: 600; font-size: var(--text-read); }
  .calc-shell details.bands table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: var(--text-read); font-variant-numeric: tabular-nums; }
  .calc-shell details.bands td, .calc-shell details.bands th { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: end; }
  .calc-shell details.bands th:first-child, .calc-shell details.bands td:first-child { text-align: start; }
  .calc-shell details.bands tbody th { font-weight: inherit; }
  .calc-shell details.bands p { margin: 10px 0 0; font-size: var(--text-read); line-height: 1.5; color: var(--ink-soft); }

  /* The notes under the results are an ordinary .note, just a little
     further from the tiles above them. */
  .calc-shell #notes { margin-top: 16px; }

  @media (max-width: 1080px) {
    .calc-shell .stack { grid-template-columns: 1fr; grid-template-rows: none; }
    .calc-shell .stack > .prefill-note,
    .calc-shell .stack > #calc,
    .calc-shell .stack > .calc-reveal { grid-column: auto; grid-row: auto; }
  }
  @media (max-width: 720px) {
    .calc-shell .row-3 { grid-template-columns: 1fr; }
  }

  /* ---------- salary sacrifice rows ---------- */
  .calc-shell .sac-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    column-gap: var(--field-gap-across);
    row-gap: 0;
    align-items: start;
    /* No margin-bottom of its own: the row's last item (the "£ per ... "
       hint below) carries its own 12px margin-bottom, and that's already
       included in the grid's auto sizing - exactly how .row-3 gets its gap
       before Annual bonus, with no margin set on .row-3 itself either.
       Adding a margin here as well would stack a second 12px on top of
       that, leaving 24px between sacrifice rows instead of the 12px every
       other pair of fields uses. */
  }
  .calc-shell .sac-row label.field {
    /* Amount/Type would otherwise carry the usual 12px margin-bottom, which
       showed up as a much bigger gap above the hint than it had when the
       hint sat directly inside the Amount label. Zeroing it here and
       letting the hint's own margin-top (the shared .hint rule in
       calculator-shared.css) provide the gap instead keeps it tight. */
    margin-bottom: 0;
  }
  .calc-shell .sac-row .sac-hint {
    /* The hint used to live inside the Amount label, so it only ever had
       that field's column width to wrap in - too narrow once "before tax
       & NI" was added alongside the year/month toggle. Pulling it out to
       its own full-width row fixes that; margin-top is left to the shared
       .hint rule in calculator-shared.css rather than overridden here. */
    grid-column: 1 / -1;
    margin-bottom: 12px;
  }
  .calc-shell .sac-remove {
    /* Nudged down so it lines up with the inputs, not their labels. */
    margin-top: 26px;
    width: 30px; height: 30px;
    padding: 0;
    flex: none;
    /* Same dashed/transparent chrome as .btn-add below, so remove and add
       read as a matching pair of secondary actions. */
    border: 1px dashed var(--line);
    border-radius: 3px;
    background: transparent;
    color: var(--ink-soft);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
  }
  .calc-shell .sac-remove:hover { border-color: var(--danger); background: var(--surface-alt); color: var(--danger); }
  .calc-shell .btn-add {
    border: 1px dashed var(--line);
    background: transparent;
    color: var(--brand);
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 3px;
    cursor: pointer;
  }
  .calc-shell .btn-add:hover { border-color: var(--brand); background: var(--surface-alt); }

  /* Child Benefit stepper. */
  /* − [ n ] +, with the same border/background/focus as the other fields.
     Native spinners are hidden: they're tiny, look different in every
     browser and don't appear at all on phones, where the buttons matter most. */
  .calc-shell .stepper {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--line); border-radius: 3px;
    background: var(--surface-alt);
    overflow: hidden;
  }
  /* :focus-visible rather than :focus-within, so clicking − / + with a mouse
     doesn't leave a ring round the whole control - typing in the box, or
     tabbing onto a button, still shows it. */
  .calc-shell .stepper { transition: border-color .15s, box-shadow .15s; }
  .calc-shell .stepper:has(:focus-visible) {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  }
  .calc-shell .stepper input {
    width: 4.5em;
    margin-top: 0;
    border: 0; border-radius: 0; background: transparent;
    text-align: center;
    padding-inline: 4px;
    outline: none;
    -moz-appearance: textfield; appearance: textfield;
  }
  .calc-shell .stepper input::-webkit-inner-spin-button,
  .calc-shell .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
  .calc-shell .step-btn {
    flex: none;
    width: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--brand);
    font: inherit;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s;
  }
  .calc-shell .step-btn:first-child { border-inline-end: 1px solid var(--line); }
  .calc-shell .step-btn:last-child { border-inline-start: 1px solid var(--line); }
  .calc-shell .step-btn:hover:not(:disabled) { background: var(--surface); }
  .calc-shell .step-btn:focus-visible { outline: none; background: var(--surface); }
  .calc-shell .step-btn:disabled { color: var(--ink-soft); opacity: .4; cursor: default; }
  .calc-shell .reset-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

  /* On a phone the remove button drops to its own line, and the two
     fields share the row in fixed proportions: left to size itself, the
     Type dropdown's long option names squeezed Amount too narrow to show
     its figure. A long type name ends in "…" instead. */
  @media (max-width: 560px) {
    .calc-shell .sac-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
  }

  /* ---------- pay breakdown doughnut ---------- */
  .calc-shell .split-wrap {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 20px;
    align-items: center;
    margin-top: 4px;
    color: var(--ink-soft);
  }
  .calc-shell .split-wrap svg { width: 100%; height: auto; max-width: 200px; }
  .calc-shell .split-legend { list-style: none; margin: 0; padding: 0; }
  .calc-shell .split-legend li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: 8px;
    padding: 5px 0;
    font-size: var(--text-small);
    border-bottom: 1px solid var(--line);
  }
  .calc-shell .split-legend li:last-child { border-bottom: 0; }
  .calc-shell .legend-dot {
    width: 10px; height: 10px;
    border-radius: 2px;
    display: inline-block;
    transform: translateY(1px);
  }
  .calc-shell .legend-label { color: var(--ink); }
  .calc-shell .legend-value { font-variant-numeric: tabular-nums; white-space: nowrap; }

  @media (max-width: 620px) {
    .calc-shell .split-wrap { grid-template-columns: 1fr; justify-items: center; }
    .calc-shell .split-legend { width: 100%; }
  }