/* The pay rise page's own drawings: the raise/period switch, the before-and-after bars, the little
   extras, the inflation comparison, the Australian estimate and the scenario slider.

   Everything else — the navy hero, the accent boxes, the chips, the disclosures, the FAQ accordion —
   comes from styles.css and results.css. Scoped to .payrise-page, the body class this page opts into,
   so nothing here can reach another calculator. Every colour is a token, which is what gives both
   themes for free.

   The class names are this page's own. The shared sheets already own generic words like .row,
   .check and .formula, so anything specific to this page is named for the page. */

/* ---------------------------------------------------------------- The form */

.payrise-page .mode-chips { margin: 0 0 18px; }
.payrise-page .mode-chips .chip { min-height: 44px; }
.payrise-page .raise-block { margin-bottom: 16px; }
.payrise-page .raise-block .preset-row { margin-bottom: 12px; }
.payrise-page .row { margin-bottom: 4px; }
.payrise-page .row .field { margin-bottom: 12px; }

.payrise-page .advanced {
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 0 12px;
  margin: 4px 0 16px;
}
.payrise-page .advanced summary {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  padding: 10px 0;
}
.payrise-page .advanced .field { margin: 4px 0 12px; }

/* The two optional lenses sit in their own tinted blocks, so they read as extras rather than as
   another row of the form. */
.payrise-page .lens {
  background: var(--accent);
  border-radius: 12px;
  padding: 14px;
  margin: 14px 0;
}
.payrise-page .lens .check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.45;
  cursor: pointer;
}
.payrise-page .lens .check input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--highlight);
}
.payrise-page .lens .field { margin: 12px 0 0; }
.payrise-page .lens .hint { margin: 8px 0 0; }

.payrise-page .net-settings {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 12px 0;
  margin-top: 12px;
}
.payrise-page .net-settings .row { margin-bottom: 0; }
.payrise-page .net-settings .field { margin-bottom: 12px; }


/* ---------------------------------------------------------------- The results */

.payrise-page .results-empty { font-size: 0.9rem; line-height: 1.55; color: var(--muted); margin: 0 0 12px; }

/* The period chips: six small targets that wrap rather than scroll. */
.payrise-page .period-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 0; }
.payrise-page .period-chips .chip { min-height: 36px; }

.payrise-page .period-value {
  font-size: clamp(1.5rem, 3.5vw, 1.95rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--primary);
  margin: 14px 0 4px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.payrise-page .period-pair { font-size: 0.85rem; color: var(--muted); margin: 0; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------ Before and after */

/* Two bars on one scale: the current pay in ink, the addition in orange. The numbers sit beside the
   bars, so the difference never depends on seeing a colour. */
.payrise-page .before-after { display: grid; gap: 10px; margin-top: 4px; }
.payrise-page .ba-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.payrise-page .ba-label { font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.payrise-page .ba-track {
  display: flex;
  height: 18px;
  border-radius: 9px;
  background: var(--border);
  overflow: hidden;
}
.payrise-page .ba-fill { display: block; height: 100%; background: var(--primary); transition: width 220ms ease; }
.payrise-page .ba-extra { display: block; height: 100%; background: var(--highlight); transition: width 220ms ease; }
.payrise-page .ba-value {
  font-size: 0.8rem;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.payrise-page .ba-diff { font-size: 0.9rem; font-weight: 700; margin: 10px 0 0; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------ The little extras */

.payrise-page .extras { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.payrise-page .extra {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--accent);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.86rem;
  line-height: 1.45;
}
.payrise-page .extra.none { color: var(--muted); }
.payrise-page .extra-emoji { font-size: 1.05rem; line-height: 1; }
.payrise-page .extra-text strong { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------ Inflation */

.payrise-page .inflation-block { margin-top: 4px; }
.payrise-page .compare { display: grid; gap: 10px; margin: 10px 0 14px; }
.payrise-page .compare-row {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.payrise-page .compare-name { font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.payrise-page .compare-track { height: 12px; border-radius: 6px; background: var(--border); overflow: hidden; }
.payrise-page .compare-fill { display: block; height: 100%; transition: width 220ms ease; }
.payrise-page .compare-fill.is-nominal { background: var(--primary); }
.payrise-page .compare-fill.is-real { background: var(--highlight); }
.payrise-page .compare-value { font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.payrise-page .compare-line { font-size: 0.86rem; line-height: 1.55; margin: 0 0 8px; font-variant-numeric: tabular-nums; }
.payrise-page .compare-verdict { font-size: 0.88rem; font-weight: 600; line-height: 1.5; margin: 0; }

/* ------------------------------------------------ The Australian estimate */

.payrise-page .net-block { margin-top: 4px; }
.payrise-page .net-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 4px 0 12px; }
.payrise-page .net-figures > div {
  background: var(--accent);
  border-radius: 10px;
  padding: 10px 12px;
  min-width: 0;
}
.payrise-page .net-figures span { display: block; font-size: 0.72rem; color: var(--muted); margin-bottom: 3px; }
.payrise-page .net-figures strong { font-size: 0.92rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.payrise-page .net-figures .is-diff { border-inline-start: 3px solid var(--highlight); }

.payrise-page .net-rows { list-style: none; margin: 0 0 12px; padding: 0; }
.payrise-page .net-rows li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 0.85rem;
}
.payrise-page .net-rows li:last-child { border-bottom: 0; font-weight: 700; }
.payrise-page .net-rows strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.payrise-page .net-verdict { font-size: 0.88rem; font-weight: 600; line-height: 1.5; margin: 0 0 8px; }

/* ------------------------------------------------ The scenario */

.payrise-page .scenario {
  background: var(--accent);
  border-radius: 12px;
  padding: 16px;
  margin-top: 4px;
}
.payrise-page .scenario-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  margin: 0 0 2px;
}
.payrise-page .scenario-label output { font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; }
.payrise-page input[type="range"] {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  accent-color: var(--highlight);
  cursor: pointer;
}
.payrise-page input[type="range"]:focus-visible {
  outline: 2px solid var(--highlight);
  outline-offset: 3px;
  border-radius: 5px;
}
.payrise-page .scenario-line { margin: 6px 0 0; font-size: 0.86rem; line-height: 1.5; }
.payrise-page .scenario-line strong {
  display: block;
  font-size: 1.15rem;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.payrise-page .scenario .btn-secondary { margin-top: 10px; }

/* ------------------------------------------------ The prose sections */

.payrise-page .fact-list { display: grid; gap: 12px; }
.payrise-page .fact { background: var(--accent); border-radius: 12px; padding: 14px 16px; }
.payrise-page .fact h3 { font-size: 0.95rem; margin: 0 0 6px; }
.payrise-page .fact p { font-size: 0.88rem; line-height: 1.6; margin: 0; }
.payrise-page .how-list { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: 0.9rem; line-height: 1.6; }
.payrise-page .how-list li { margin-bottom: 0; }
.payrise-page .formula-wrap { display: grid; gap: 8px; margin: 12px 0; }
/* The shared .formula scrolls sideways; these are long enough that half of each would be off the
   edge of a phone, so here they wrap and the monospace face keeps them reading as formulas. */
.payrise-page .formula {
  margin: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
.payrise-page .formula-inline {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85em;
  background: var(--accent);
  border-radius: 4px;
  padding: 1px 5px;
}

/* ------------------------------------------------ Narrow screens */

@media (max-width: 600px) {
  .payrise-page .net-figures { grid-template-columns: minmax(0, 1fr); }
  .payrise-page .ba-row { grid-template-columns: minmax(0, 1fr) auto; }
  .payrise-page .ba-label { grid-column: 1; }
  .payrise-page .ba-value { grid-column: 2; }
  .payrise-page .ba-track { grid-column: 1 / -1; }
  .payrise-page .compare-row { grid-template-columns: minmax(0, 1fr) auto; }
  .payrise-page .compare-name { grid-column: 1; }
  .payrise-page .compare-value { grid-column: 2; }
  .payrise-page .compare-track { grid-column: 1 / -1; }
  .payrise-page .mode-chips .chip { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 380px) {
  .payrise-page .row { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .payrise-page .ba-fill,
  .payrise-page .ba-extra,
  .payrise-page .compare-fill { transition: none; }
}