/* Payko design system.
   Derived from the stencilai.au / Synthetik theme: warm off-white ground, near-black
   ink and buttons, Inter for UI with Playfair Display italic as the editorial accent,
   18px radii, and the same light/dark token structure.

   Theme handling follows the three-state rule: tokens are defined on bare :root,
   redefined under prefers-color-scheme:dark guarded against an explicit light choice,
   and redefined again under [data-theme="dark"] so a manual toggle wins either way. */

:root {
  --bg: #FAF9F6;
  --bg-elev: #FFFFFF;
  --bg-subtle: #F3F2ED;

  /* Categorical chart palette. Lives on :root, not inside .viz, because more than one
     chart uses it - a page that referenced these from outside .viz got no colour at
     all and drew its lines with stroke:none. Validated for both surfaces. */
  --series-1: #2a78d6;  /* take-home        */
  --series-2: #eb6834;  /* income tax       */
  --series-3: #1baf7a;  /* Medicare levy    */
  --series-4: #eda100;  /* Medicare surcharge */
  --series-5: #e87ba4;  /* study loan       */
  --ink: #0F0F0F;
  --ink-2: #3F3F46;
  --muted: #565B66;
  --muted-2: #5C616C;
  --line: #E6E4DE;
  --line-2: #EDECE6;
  --accent: #1A1A1A;
  --accent-deep: #0F0F0F;
  --fill: #EFEEE9;
  --fill-2: #E2E0D9;

  /* Payko adds one semantic pair the stencil theme did not need: money in, money out. */
  --positive: #1F6F4A;
  --positive-fill: #E4F0E9;
  /* Darkened from #B4691F, which measured 4.22:1 on the white results card -
     below the 4.5:1 AA minimum, on the tax figures themselves. Now 4.86:1. */
  --deduct: #A85F1B;
  --deduct-fill: #F5E7D6;
  /* For text placed ON --deduct-fill, where --deduct itself is only 4.00:1. */
  --deduct-on-fill: #8B4E10;
  --deduct-line: #E8CFAF;

  --btn-bg: #0F0F0F;
  --btn-fg: #FFFFFF;
  --btn-ghost-line: #D9D7D0;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .04);
  --shadow: 0 4px 24px -8px rgba(16, 24, 40, .10), 0 1px 3px rgba(16, 24, 40, .05);
  --shadow-lg: 0 24px 60px -18px rgba(16, 24, 40, .20), 0 8px 24px -12px rgba(16, 24, 40, .12);

  --radius: 18px;
  --radius-sm: 12px;
  --maxw: 1180px;

  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0D0E0C;
    --bg-elev: #17181A;
    --bg-subtle: #141513;
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
    --ink: #F5F4EF;
    --ink-2: #D4D4D0;
    --muted: #A9AAB2;
    --muted-2: #9A9CA6;
    --line: #282A2C;
    --line-2: #232426;
    --accent: #ECEAE3;
    --accent-deep: #F4F2EB;
    --fill: #1D1E20;
    --fill-2: #242628;
    --positive: #6FD3A2;
    --positive-fill: #14251D;
    --deduct: #E0A567;
    --deduct-fill: #2A2118;
  --deduct-on-fill: #E0A567;
    --deduct-on-fill: #E0A567;
    --deduct-line: #3D3020;
    --btn-bg: #F4F2EB;
    --btn-fg: #0F0F0F;
    --btn-ghost-line: #33353A;
    --shadow: 0 4px 24px -8px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .4);
    --shadow-lg: 0 24px 60px -18px rgba(0, 0, 0, .6), 0 8px 24px -12px rgba(0, 0, 0, .5);
  }
}

:root[data-theme="dark"] {
  --bg: #0D0E0C;
  --bg-elev: #17181A;
  --bg-subtle: #141513;
  /* Dark steps of the categorical palette, validated against #17181A - not an
     automatic lightening of the light steps. */
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --ink: #F5F4EF;
  --ink-2: #D4D4D0;
  --muted: #A9AAB2;
  --muted-2: #9A9CA6;
  --line: #282A2C;
  --line-2: #232426;
  --accent: #ECEAE3;
  --accent-deep: #F4F2EB;
  --fill: #1D1E20;
  --fill-2: #242628;
  --positive: #6FD3A2;
  --positive-fill: #14251D;
  --deduct: #E0A567;
  --deduct-fill: #2A2118;
  --deduct-on-fill: #E0A567;
  --deduct-line: #3D3020;
  --btn-bg: #F4F2EB;
  --btn-fg: #0F0F0F;
  --btn-ghost-line: #33353A;
  --shadow: 0 4px 24px -8px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .4);
  --shadow-lg: 0 24px 60px -18px rgba(0, 0, 0, .6), 0 8px 24px -12px rgba(0, 0, 0, .5);
}

*, *::before, *::after { box-sizing: border-box; }

/* The `hidden` attribute must actually hide. The UA rule is only `[hidden]{display:none}`
   at specificity (0,1,0), so ANY class rule that sets display beats it. That is not
   hypothetical: `.field { display: block }` (raised again by Astro's scoping) left the
   0-250k salary slider fully rendered and draggable while the pay calculator was in
   hourly mode - dragging it set the HOURLY RATE to 125,000 and reported $312,000,000 of
   gross pay. Every `el.hidden = true` on this site depends on this one line. */
[hidden] { display: none !important; }

/* Only ever shown when the clipboard refuses. It exists so a failed copy still leaves
   the reader with selectable text rather than the word "failed". */
.copy-fallback {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink-2);
  font: 500 12.5px/1.5 var(--mono, ui-monospace, monospace);
  resize: vertical;
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 22px;
}

a { color: var(--ink); text-decoration-color: var(--line); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--bg-elev);
  color: var(--ink);
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  z-index: 100;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- header ---------- */

.site-header {
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: saturate(180%) blur(10px);
}

.brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-block: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.02em;
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--accent-deep);
  color: var(--bg);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 17px;
}
:root[data-theme="dark"] .brand-mark,
:root:not([data-theme="light"]) .brand-mark { color: var(--bg); }

.brand small {
  display: block;
  font-weight: 450;
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: 0;
}

.nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 14.5px;
}
.nav a { color: var(--muted); text-decoration: none; }
.nav a:hover { color: var(--ink); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 15.5px;
  font-family: inherit;
  padding: 14px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.btn-primary { background: var(--btn-bg); color: var(--btn-fg); box-shadow: var(--shadow); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--btn-ghost-line); }
.btn-ghost:hover { border-color: var(--ink); background: var(--bg-subtle); }

.btn-sm { padding: 11px 18px; font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn-primary:hover { transition: none; transform: none; }
}

/* Focus. Inputs style their wrapper rather than themselves, so outline is suppressed
   on the control - but that vanishes under forced colours, where a custom border is
   not guaranteed to render. :focus-visible restores a real ring for keyboard users
   without showing it on mouse clicks. */
:where(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (forced-colors: active) {
  .card, .input-money, select { border: 1px solid CanvasText; }
  .btn-primary { border: 1px solid ButtonText; }
}

/* ---------- type ---------- */

h1, h2, h3 { letter-spacing: -0.025em; line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(32px, 5vw, 52px); font-weight: 800; }
h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 700; }
h3 { font-size: 19px; font-weight: 650; }

.accent { font-family: var(--serif); font-style: italic; font-weight: 500; }

.lede { font-size: clamp(17px, 2vw, 19.5px); color: var(--muted); max-width: 62ch; }

.eyebrow {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Select chevron.
   The native arrow is small and jammed against the right edge, and it differs between
   browsers. This replaces it with one drawn at a readable size and inset from the edge,
   in the same ink as the rest of the control. The chevron is a data: URI, which the
   site's CSP permits under `img-src 'self' data:`. Two rules rather than a CSS variable,
   because a custom property cannot be interpolated inside a data URI. */
select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23565B66' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 20px 20px;
  /* Room for the chevron, so a long option never runs underneath it. */
  padding-right: 46px;
}

:root[data-theme="dark"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9AAB2' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9AAB2' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  }
}

/* Forced-colours mode paints its own control chrome; a bitmap chevron there is noise. */
@media (forced-colors: active) {
  select { background-image: none; padding-right: 13px; }
}

/* ---------- surfaces ---------- */

.card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow-sm);
}

/* A note/caveat card. Defined globally because it was defined per page, and the one
   page that forgot - the homepage - rendered the provisional-threshold notice with a
   0px gap above it, welded to the bottom row of the bracket table. Pages may still
   override the margin; the padding and measure hold everywhere. */
.note-card {
  margin-top: 2.6em;
  padding: 30px 32px;
}
.note-card h3:first-child { margin-top: 0; }
.note-card > p:last-child { margin-bottom: 0; }
/* These cards often sit full width under a wide table, which left the prose running
   140 characters a line. Cap the measure without narrowing the card. */
.note-card > p { max-width: 78ch; }

@media (max-width: 560px) {
  .note-card { padding: 22px 20px; }
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--fill);
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-2);
}

.pill-row { display: flex; flex-wrap: wrap; gap: 9px; }

/* A provisional value is one the ATO has not published for this year yet.
   It must always look different from a settled one. */
.provisional {
  background: var(--deduct-fill);
  border-color: var(--deduct-line);
  color: var(--deduct-on-fill);
}

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  margin-top: 72px;
  padding-block: 40px 56px;
  color: var(--muted);
  font-size: 14px;
}
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--ink); }

.footer-legal {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--line-2);
  font-size: 13px;
  line-height: 1.65;
  max-width: 76ch;
}

/* ---------------------------------------------------------------------------
   Responsive.

   Measured defect this fixes: at a 390px viewport the document was 629px wide
   and the whole page scrolled sideways. The header nav (six links, flex, no
   wrap) was 478px and would not compress, dragging the body with it.

   Rule: the page body must never scroll horizontally. Wide content scrolls
   inside its own container instead.
   --------------------------------------------------------------------------- */

/* Nav becomes a horizontally scrollable strip rather than forcing page width. */
@media (max-width: 900px) {
  .brand-row {
    flex-wrap: wrap;
    gap: 10px;
    padding-block: 13px;
  }

  /* Wrap onto a second line rather than scrolling. A scroll strip hid the last two
     links entirely with no affordance, which is worse than two tidy rows. */
  .nav {
    order: 3;
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    row-gap: 8px;
    column-gap: 18px;
    font-size: 14px;
  }
  .nav a { white-space: nowrap; padding-block: 2px; }

  .brand { font-size: 17.5px; }
  .brand small { font-size: 11.5px; }
  .brand-mark { width: 30px; height: 30px; font-size: 15px; }
}

@media (max-width: 640px) {
  .shell { padding-inline: 16px; }

  h1 { font-size: clamp(27px, 8vw, 34px); }
  h2 { font-size: clamp(21px, 5.5vw, 25px); }

  .lede { font-size: 16.5px; }

  /* Wide tables scroll inside themselves. The wrapper keeps the table element
     intact rather than switching it to display:block, which would strip the
     row/column semantics assistive technology relies on. */
  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-inline: -16px;
    padding-inline: 16px;
  }

  .site-footer { margin-top: 48px; padding-block: 30px 40px; }
  .card { padding: 20px 18px; }
}

/* Any table that would otherwise force the page wide gets its own scroll area.
   Applied at every width so a long currency string cannot break the layout. */
.table-scroll { max-width: 100%; overflow-x: auto; }
.table-scroll > table { min-width: 100%; }

/* ---------------------------------------------------------------------------
   Theme toggle
   --------------------------------------------------------------------------- */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  color: var(--muted);
  font: 600 13px var(--sans);
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.theme-toggle:hover { border-color: var(--ink); color: var(--ink); }

/* The icon is drawn in CSS so it costs no request and follows the theme colour. */
.theme-icon {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  position: relative;
  flex: 0 0 auto;
}
/* system: half filled. light: hollow with rays. dark: filled crescent. */
.theme-toggle[data-mode="system"] .theme-icon {
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
}
.theme-toggle[data-mode="light"] .theme-icon { background: transparent; }
.theme-toggle[data-mode="dark"] .theme-icon { background: currentColor; }

@media (max-width: 900px) {
  .theme-toggle { order: 2; padding: 6px 11px 6px 9px; font-size: 12.5px; }
  .theme-label { display: none; }
}

/* ---------------------------------------------------------------------------
   Action bar (share / copy / print / reset)
   --------------------------------------------------------------------------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid var(--btn-ghost-line);
  background: transparent;
  color: var(--ink-2);
  font: 600 13.5px var(--sans);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.action:hover { border-color: var(--ink); color: var(--ink); background: var(--bg-subtle); }
.action.is-done { border-color: var(--positive); color: var(--positive); }

@media (max-width: 400px) {
  .action { flex: 1 1 auto; justify-content: center; }
}

/* ---------------------------------------------------------------------------
   Print. People print a pay breakdown to take to a lender or an accountant, so
   the result has to survive on paper: no navigation, no controls, no dark theme.
   --------------------------------------------------------------------------- */

@media print {
  .site-header,
  .site-footer,
  .actions,
  .theme-toggle,
  .skip-link,
  .prevnext,
  .cta,
  .calc-form,
  .jur-grid,
  /* Navigation links to other pages. Unclickable on paper, so they are only a row of
     grey boxes between the answer and the working. */
  .pill-row,
  .band-grid,
  .rate-grid,
  .grid { display: none !important; }

  /* Force the light palette regardless of theme - dark backgrounds do not print. */
  :root, :root[data-theme="dark"] {
    --bg: #FFFFFF; --bg-elev: #FFFFFF; --bg-subtle: #FFFFFF;
    --ink: #000000; --ink-2: #1a1a1a; --muted: #444444;
    --line: #cccccc; --line-2: #dddddd;
    --deduct: #000000; --positive: #000000; --deduct-on-fill: #000000;
    --shadow: none; --shadow-sm: none; --shadow-lg: none;
  }

  body { font-size: 11.5pt; }
  .card { border: 1px solid #ccc !important; box-shadow: none !important; padding: 12pt; }
  .calc-wrap { display: block !important; }
  .results { break-inside: avoid; }
  article, .shell { max-width: none !important; padding: 0 !important; }

  /* Tables must not be clipped by the scroll container on paper. */
  .table-scroll { overflow: visible !important; margin: 0 !important; padding: 0 !important; }
  table { break-inside: auto; }
  tr { break-inside: avoid; }

  h1 { font-size: 20pt; }
  h2 { font-size: 14pt; break-after: avoid; }

  /* Expand link targets so a printed page is still traceable. */
  .answer a[href^="http"]::after,
  .note-card a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }

  /* A printed calculation needs to say where it came from and when. */
  .results::after {
    content: "Estimate only, not financial advice. payko.com.au";
    display: block;
    margin-top: 10pt;
    padding-top: 6pt;
    border-top: 1px solid #ccc;
    font-size: 9pt;
    color: #444;
  }
}

/* Touch targets. Measured 35x27 (toggle) and 36px high (actions) on a phone, both
   under the 44px minimum for reliable tapping. Grow them on coarse pointers only, so
   the desktop layout keeps its tighter proportions. */
@media (pointer: coarse), (max-width: 640px) {
  .action {
    min-height: 44px;
    padding-inline: 18px;
  }

  .theme-toggle {
    min-height: 44px;
    min-width: 44px;
    justify-content: center;
    padding: 0 12px;
  }

  /* The nav links sit in a wrapped strip; give them a real hit area too. */
  .nav a {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
  }
}

/* ---------------------------------------------------------------------------
   Sticky result bar. Phone-only: on wide screens the result sits beside the form
   and is always visible, so the bar would be noise.
   --------------------------------------------------------------------------- */

.sticky-result { display: none; }

@media (max-width: 800px) {
  .sticky-result {
    display: flex;
    align-items: center;
    gap: 10px;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 30;
    padding: 11px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--bg-elev);
    box-shadow: var(--shadow-lg);
    color: var(--ink);
    font-family: var(--sans);
    cursor: pointer;
    text-align: left;
    min-height: 52px;
    animation: sticky-in .22s ease-out;
  }
  .sticky-result[hidden] { display: none; }

  .sticky-label {
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    flex: 0 0 auto;
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sticky-value {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.02em;
    margin-left: auto;
  }

  .sticky-cue {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 650;
    color: var(--muted);
    border-left: 1px solid var(--line);
    padding-left: 10px;
  }

  /* Stop the bar covering the end of the page. */
  body.has-sticky-result .site-footer { padding-bottom: 84px; }

  @keyframes sticky-in {
    from { transform: translateY(12px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .sticky-result { animation: none; }
  }
}

@media print { .sticky-result { display: none !important; } }

/* ---------------------------------------------------------------------------
   Segmented control (period switcher)
   --------------------------------------------------------------------------- */

.segmented {
  display: flex;
  gap: 2px;
  padding: 3px;
  margin: 0 0 20px;
  background: var(--fill);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.seg {
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 6px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: 600 13px var(--sans);
  cursor: pointer;
  white-space: nowrap;
  transition: background .16s ease, color .16s ease;
}
.seg:hover { color: var(--ink); }

.seg.is-active {
  background: var(--bg-elev);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

@media (pointer: coarse), (max-width: 640px) {
  .seg { min-height: 40px; font-size: 12.5px; }
}

@media print { .segmented { display: none !important; } }

/* At 320px there is roughly 49px per segment but "Fortnightly" needs about 68px, so
   it was being clipped. Swap to short labels rather than truncating. The long label
   stays in the accessibility tree - the short one is aria-hidden - so the button is
   still announced as "Fortnightly" either way. */
.seg-short { display: none; }

@media (max-width: 360px) {
  .seg-long { display: none; }
  .seg-short { display: inline; }
  .seg { font-size: 12px; padding-inline: 4px; }
}

/* ---------------------------------------------------------------------------
   Where your pay goes - horizontal stacked bar (part-to-whole).
   Palette is the validated categorical order, slots assigned in fixed sequence
   and never cycled. Both modes were run through the palette validator against
   this site's own card surfaces (#FFFFFF light, #17181A dark): all hard checks
   pass. Light mode raises a contrast WARN on the lighter hues, which is relieved
   as the guidance requires - the legend carries a visible text label and value
   for every segment, and the full breakdown table sits directly above.
   --------------------------------------------------------------------------- */

.viz {
  --surface: var(--bg-elev);
  --series-1: #2a78d6;  /* take-home        */
  --series-2: #eb6834;  /* income tax       */
  --series-3: #1baf7a;  /* Medicare levy    */
  --series-4: #eda100;  /* Medicare surcharge */
  --series-5: #e87ba4;  /* study loan       */
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .viz {
    /* The same hues re-stepped for the dark surface, not an automatic flip. */
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
  }
}
:root[data-theme="dark"] .viz {
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
}

.viz-title {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}

.viz-bar {
  display: flex;
  /* The 2px separator is the SURFACE showing through, not a border on the mark. */
  gap: 2px;
  height: 22px;              /* <= 24px cap */
  border-radius: 4px;        /* rounded data-ends */
  overflow: visible;
}

.viz-seg {
  min-width: 2px;
  border-radius: 2px;
  transition: flex-grow .25s ease;
}
.viz-seg:first-child { border-radius: 4px 2px 2px 4px; }
.viz-seg:last-child  { border-radius: 2px 4px 4px 2px; }

.viz-seg[data-slot="1"] { background: var(--series-1); }
.viz-seg[data-slot="2"] { background: var(--series-2); }
.viz-seg[data-slot="3"] { background: var(--series-3); }
.viz-seg[data-slot="4"] { background: var(--series-4); }
.viz-seg[data-slot="5"] { background: var(--series-5); }

/* Legend. Always present: identity is never carried by colour alone. */
.viz-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.viz-key {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-2);        /* text tokens, never the series colour */
}

.viz-dot {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  flex: 0 0 auto;
}
.viz-dot[data-slot="1"] { background: var(--series-1); }
.viz-dot[data-slot="2"] { background: var(--series-2); }
.viz-dot[data-slot="3"] { background: var(--series-3); }
.viz-dot[data-slot="4"] { background: var(--series-4); }
.viz-dot[data-slot="5"] { background: var(--series-5); }

.viz-share { color: var(--muted); font-variant-numeric: tabular-nums; }

@media print {
  /* Fills do not print reliably; the legend and table carry the data on paper. */
  .viz-bar { display: none !important; }
  .viz-legend { color: #000 !important; }
}

@media (forced-colors: active) {
  .viz-seg { border: 1px solid CanvasText; }
}

/* Visually hidden, still announced. Defined globally on purpose: this was scoped
   per page, and the one page that used it without defining it rendered its chart
   description as visible body text. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
   Comparison bars (emphasis form): one series, the current jurisdiction picked
   out, the rest as context. Length carries the magnitude, so a colour ramp would
   be redundant encoding - a single accent plus a de-emphasis grey is the honest
   choice. Contrast checked against both surfaces: accent 4.42:1 light / 4.88:1
   dark, grey 3.45:1 / 3.38:1.
   --------------------------------------------------------------------------- */

.cmp {
  --cmp-accent: #2a78d6;
  --cmp-muted: #8C8A86;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cmp {
    --cmp-accent: #3987e5;
    --cmp-muted: #6A6C70;
  }
}
:root[data-theme="dark"] .cmp { --cmp-accent: #3987e5; --cmp-muted: #6A6C70; }

.cmp-title {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}

.cmp-rows { display: grid; gap: 8px; margin: 0; }

.cmp-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.cmp-name {
  font-size: 13px;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}
.cmp-row.is-current .cmp-name { color: var(--ink); font-weight: 650; }

/* Both are <span> in the markup, so they need an explicit box - width and height
   are ignored on an inline element, which rendered the bars completely invisible
   while the labels and values looked perfectly fine. */
.cmp-track { min-width: 0; display: block; }

.cmp-fill {
  display: block;
  height: 14px;                 /* well under the 24px cap */
  background: var(--cmp-muted);
  border-radius: 0 4px 4px 0;   /* rounded data-end, square at the baseline */
  transition: width .25s ease;
}
.cmp-row.is-current .cmp-fill { background: var(--cmp-accent); }

.cmp-value {
  font-family: var(--mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
}
.cmp-row.is-current .cmp-value { color: var(--ink); font-weight: 700; }

@media (max-width: 420px) {
  .cmp-row { grid-template-columns: 3.4rem minmax(0, 1fr) auto; gap: 8px; }
  .cmp-name, .cmp-value { font-size: 12px; }
}

@media (forced-colors: active) {
  .cmp-fill { border: 1px solid CanvasText; }
}

/* ---------------------------------------------------------------------------
   Salary slider. Exploration aid, not the primary control - the number field
   stays the source of truth and the readout.
   --------------------------------------------------------------------------- */

.slider-field { margin-top: -6px; }
.slider-field[hidden] { display: none; }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
  cursor: pointer;
  margin: 0;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: var(--fill-2);
}
input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: var(--fill-2);
}

/* 20px thumb: comfortably over the 44px target once the track padding is counted,
   and large enough to grab on a touch screen. */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--accent-deep);
  border: 2px solid var(--bg-elev);
  box-shadow: var(--shadow-sm);
}
input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 2px solid var(--bg-elev);
  border-radius: 50%;
  background: var(--accent-deep);
  box-shadow: var(--shadow-sm);
}

input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--ink); outline-offset: 2px; }
input[type="range"]:focus-visible::-moz-range-thumb { outline: 2px solid var(--ink); outline-offset: 2px; }

.slider-scale {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-top: -2px;
}

@media print { .slider-field { display: none !important; } }

/* Approved Payko wordmark, adaptive ink with lime smiling o */
.site-header .brand-mark{display:none}.site-header .brand>span:last-child{position:relative;display:block;padding-top:44px;font-size:0;min-width:190px}.site-header .brand>span:last-child::before,.site-header .brand>span:last-child::after{content:"";position:absolute;top:-3px;left:-6px;width:150px;height:50px}.site-header .brand>span:last-child::before{background:currentColor;mask:url("/payko-wordmark.svg?v=20260916-v3") center/contain no-repeat;-webkit-mask:url("/payko-wordmark.svg?v=20260916-v3") center/contain no-repeat}.site-header .brand>span:last-child::after{background:url("/payko-wordmark.svg?v=20260916-v3") center/contain no-repeat;clip-path:inset(0 11.5% 0 68.5%)}.site-header .brand small{font-size:11.5px}

/* v2 shared UI */
select{background-repeat:no-repeat!important;background-position:right 12px center!important;background-size:18px 18px!important;padding-right:36px!important}
.menu-toggle{display:none}.sticky-result .sticky-label{max-width:42%;font-size:10px}.sticky-result .sticky-value{font-size:17px}.site-header .nav[hidden]{display:none!important}
@media(max-width:700px){.site-header .brand-row{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-block:10px;min-height:76px}.site-header .brand{flex:1;min-width:0}.site-header .brand>span:last-child{min-width:170px;padding-top:37px}.site-header .brand>span:last-child::before,.site-header .brand>span:last-child::after{width:135px;height:45px;top:-5px}.site-header .brand small{font-size:9px}.site-header .theme-toggle{position:static;margin:0;order:3;flex:0 0 36px;width:36px;height:36px;min-width:36px}.site-header .theme-label{display:none}.site-header .menu-toggle{display:block;order:2;padding:9px 10px;min-height:40px;border:1px solid var(--line);border-radius:8px;background:var(--bg-elev);color:var(--ink);font:inherit;font-size:.75rem}.site-header .nav{order:4;flex-basis:100%;margin:0;gap:4px;align-items:stretch;flex-direction:column;padding:10px 0}.site-header.js-menu .nav:not(.nav-open){display:none}.site-header .nav a{padding:11px 8px;font-size:.9rem}.sticky-result{max-width:calc(100vw - 24px);bottom:max(12px,env(safe-area-inset-bottom))}.has-sticky-result{padding-bottom:84px}}
@media(min-width:701px){.site-header .nav{display:flex!important}}
@media print{.menu-toggle,.site-header .nav,.sticky-result{display:none!important}}

/* Select arrow in both themes */
select{appearance:none!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777c82' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-size:18px 18px!important;background-position:right 12px center!important}