/* Australian Portfolio Lab — IYI look (per PLAN_PUBLIC_WEBSITE.md).
 * Tokens on :root; dark theme via data-theme (toggle) with
 * prefers-color-scheme as the default signal. */

:root {
  --bg: #FCF8ED; --card: #ffffff; --ink: #14212e; --ink2: #4e5a66;
  --line: #E8DFD0; --hero-bg: #00305B; --hero-ink: #ffffff;
  --hero-ink2: #C9D8E8; --accent: #C1A06B; --accent-ink: #2b2416;
  --mark: #0F4C85; --mark-strong: #00305B; --grid: #e7e2d6;
  --chip-bg: #FBF2E6; --focusring: #C1A06B;
  --s1: #6FA3DE; --s2: #A87B2F; --s3: #0E8A6D;
  --neg: #B3552E;
  --display: "Avenir Next", Avenir, Futura, "Trebuchet MS", sans-serif;
  --body: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
  --brand-face: Georgia, "Times New Roman", serif;
  /* Fixed brand-band tokens — deliberately NOT redefined per theme, so the
     light header is identical in light and dark (the logo's navy elements
     would vanish on a dark band). Matches the white header at
     inyourinterest.com.au. */
  --band-bg: #ffffff; --band-line: #E8DFD0; --band-ink: #00305B;
  --band-ink-hover: #001b33; --band-accent: #C1A06B;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #001528; --card: #062138; --ink: #F3EDDD; --ink2: #B9C6D4;
    --line: #12324e; --hero-bg: #00203D; --hero-ink: #ffffff;
    --hero-ink2: #C9D8E8; --accent: #C1A06B; --accent-ink: #201a0e;
    --mark: #83B7E6; --mark-strong: #C1A06B; --grid: #103050;
    --chip-bg: #0b2a44;
    --s1: #5793D8; --s2: #B07A24; --s3: #188F68;
    --neg: #D97A50;
  }
}
:root[data-theme="dark"] {
  --bg: #001528; --card: #062138; --ink: #F3EDDD; --ink2: #B9C6D4;
  --line: #12324e; --hero-bg: #00203D; --hero-ink: #ffffff;
  --hero-ink2: #C9D8E8; --accent: #C1A06B; --accent-ink: #201a0e;
  --mark: #83B7E6; --mark-strong: #C1A06B; --grid: #103050;
  --chip-bg: #0b2a44;
  --s1: #5793D8; --s2: #B07A24; --s3: #188F68;
  --neg: #D97A50;
}
:root[data-theme="light"] {
  --bg: #FCF8ED; --card: #ffffff; --ink: #14212e; --ink2: #4e5a66;
  --line: #E8DFD0; --hero-bg: #00305B; --hero-ink: #ffffff;
  --hero-ink2: #C9D8E8; --accent: #C1A06B; --accent-ink: #2b2416;
  --mark: #0F4C85; --mark-strong: #00305B; --grid: #e7e2d6;
  --chip-bg: #FBF2E6;
  --s1: #6FA3DE; --s2: #A87B2F; --s3: #0E8A6D;
  --neg: #B3552E;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body { background: var(--bg); color: var(--ink);
       font: 15px/1.55 var(--body); }

.ribbon { background: var(--accent); color: var(--accent-ink);
  text-align: center; font: 600 12.5px/1 var(--display);
  letter-spacing: .06em; padding: 7px 12px; }

/* Light brand band — full-width, fixed colours in both light and dark. */
.band { background: var(--band-bg); border-bottom: 1px solid var(--band-line); }
.nav { max-width: 1160px; margin: 0 auto; display: flex; align-items: center;
  gap: 24px; padding: 12px 22px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; text-decoration: none; }
.brand img { height: 52px; width: auto; display: block; }
.nav .links { margin-left: auto; display: flex; gap: 14px 20px;
  align-items: center; flex-wrap: wrap; justify-content: flex-end;
  font-family: var(--display); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; }
.nav .links a { color: var(--band-ink); text-decoration: none; }
.nav .links a:hover { color: var(--band-ink-hover); text-decoration: underline; }
.nav .links a.on { color: var(--band-ink);
  border-bottom: 2px solid var(--band-accent); padding-bottom: 3px; }
.nav .links a.on:hover { text-decoration: none; }
#themeToggle { background: transparent; border: 1.5px solid var(--band-ink);
  color: var(--band-ink); border-radius: 999px; padding: 6px 12px;
  font: 600 12px/1 var(--display); cursor: pointer; }
#themeToggle:hover { background: var(--band-ink); color: var(--band-bg); }

/* Mobile menu toggle — hidden on desktop, shown ≤640px. Styled to sit on the
   fixed light band exactly like #themeToggle (navy on white, both themes). */
#navToggle { display: none; align-items: center; gap: 8px;
  background: transparent; border: 1.5px solid var(--band-ink);
  color: var(--band-ink); border-radius: 999px; padding: 7px 13px;
  font: 600 12px/1 var(--display); letter-spacing: .06em; cursor: pointer; }
#navToggle:hover { background: var(--band-ink); color: var(--band-bg); }
#navToggle .nav-glyph { font-size: 15px; line-height: 1; }

@media (max-width: 640px) {
  .brand img { height: 40px; }
  #navToggle { display: inline-flex; margin-left: auto; }
  /* Collapse the nav links behind the button (full-width dropdown). Scoped to
     the sibling of #navToggle, so assumptions.html's single back-link — which
     has no toggle button — is left inline and untouched. */
  #navToggle ~ .links { display: none; width: 100%; margin-left: 0;
    gap: 0; padding-top: 4px; flex-direction: column; align-items: stretch;
    border-top: 1px solid var(--band-line); }
  #navToggle ~ .links.open { display: flex; }
  #navToggle ~ .links a,
  #navToggle ~ .links #themeToggle { display: block; width: 100%;
    text-align: left; padding: 13px 6px; border: 0;
    border-bottom: 1px solid var(--band-line); border-radius: 0;
    background: transparent; color: var(--band-ink); }
  #navToggle ~ .links a.on { border-left: 3px solid var(--band-accent);
    padding-left: 12px; }
  #navToggle ~ .links #themeToggle { border-bottom: 0; font-weight: 700; }
}

.hero { background: var(--hero-bg); color: var(--hero-ink);
  padding: 26px 0 30px; }
.hero-in { max-width: 1160px; margin: 0 auto; padding: 0 22px; }
.eyebrow { font-family: var(--display); font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 8px; }
.hero h1 { font-family: var(--display); font-weight: 700; margin: 0 0 12px;
  font-size: clamp(24px, 3.6vw, 36px); max-width: 40ch; text-wrap: balance; }
.headline { font-size: clamp(15.5px, 2vw, 18px); line-height: 1.55;
  max-width: 68ch; color: var(--hero-ink2); margin: 0; }
.headline strong { color: var(--hero-ink); }

.tabs { max-width: 1160px; margin: 18px auto 0; padding: 0 22px;
  display: flex; gap: 8px; flex-wrap: wrap; }
.tabs button { font: 600 13px/1.2 var(--display); padding: 10px 14px;
  border-radius: 999px; border: 1.5px solid var(--line);
  background: var(--card); color: var(--ink); cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--mark-strong);
  border-color: var(--mark-strong); color: #fff; }
:root[data-theme="dark"] .tabs button[aria-selected="true"],
[data-dark] .tabs button[aria-selected="true"] { color: #06121f; }
.tabs button.dim { opacity: .75; font-weight: 500; }
/* Responsive tab label: "How tax works" on desktop, "Tax" on mobile. */
.tabs .tshort { display: none; }
@media (max-width: 640px) {
  .tabs .tlong { display: none; }
  .tabs .tshort { display: inline; }
}
.tabs button:focus-visible, .chips button:focus-visible,
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--focusring); outline-offset: 2px; }
/* the brand band is fixed white in both themes; the gold ring reads
 * under 3:1 there, so focus on the band uses navy instead */
.band a:focus-visible, .band button:focus-visible {
  outline-color: #00305B; }

main { max-width: 1160px; margin: 16px auto 40px; padding: 0 22px;
  display: grid; grid-template-columns: minmax(280px, 26em) minmax(0, 1fr);
  gap: 18px; align-items: start; }
@media (max-width: 900px) { main { grid-template-columns: 1fr; } }
.slider-row { flex-wrap: wrap; }
.slider-row input[type="range"] { flex: 1 1 150px; min-width: 120px; }

.panel { display: grid; gap: 14px; }
.card { background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 16px 18px; }
.card h2 { font-family: var(--display); font-size: 15px; margin: 0 0 10px; }
.card h3 { font-family: var(--display); font-size: 14.5px; margin: 0 0 4px; }
.card h4 { font-family: var(--display); font-size: 13px; margin: 14px 0 4px; }
.sub { color: var(--ink2); font-size: 13px; margin: 0 0 12px; }
.note { color: var(--ink2); font-size: 12.5px; margin: 8px 0 0; }

.row { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 8px 0; }
.row label { font-size: 13.5px; }
input[type="number"], select { font: inherit; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 7px;
  padding: 6px 8px; max-width: 130px; font-variant-numeric: tabular-nums; }
input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--mark); }
.slider-row { display: flex; align-items: center; gap: 12px; margin: 6px 0; }
.slider-row input[type="range"] { flex: 1; accent-color: var(--mark);
  height: 30px; }
.slider-row input[type="number"] { max-width: 82px; }
.mixdot { width: 11px; height: 11px; border-radius: 3px; flex: none; }

.chips { display: flex; gap: 7px; flex-wrap: wrap; margin: 8px 0 2px; }
.chips button { font: 600 12px/1 var(--display); padding: 7px 11px;
  border-radius: 999px; border: 1.5px solid var(--line);
  background: var(--chip-bg); color: var(--ink); cursor: pointer; }
.chips button[aria-pressed="true"] { background: var(--mark); color: #fff;
  border-color: var(--mark); }
:root[data-theme="dark"] .chips button[aria-pressed="true"] { color: #06121f; }
.preset-sub { color: var(--ink2); font-size: 12.5px; margin: 6px 0 0; }

details.more { border-top: 1px dashed var(--line); padding-top: 10px; }
details.more summary { cursor: pointer; color: var(--ink2);
  font: 600 13px var(--display); }
details.more .row label { color: var(--ink2); }
.focus-note { font-size: 12px; color: var(--ink2); font-style: italic; }

.stage { display: grid; gap: 16px; min-width: 0; }
.stat-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px; }
@media (max-width: 700px) { .stat-row { grid-template-columns: 1fr; } }
.stat .big { font-family: var(--display); font-size: 30px; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.stat .lbl { color: var(--ink2); font-size: 12.5px; line-height: 1.45;
  margin-top: 3px; }

.chart-wrap { position: relative; }
.chart-wrap svg { width: 100%; height: auto; display: block; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; margin: 2px 0 8px;
  font-size: 13px; }
.legend .key { display: inline-flex; align-items: center; gap: 6px; }
.legend .swatch { width: 12px; height: 12px; border-radius: 3px; }
.tip { position: absolute; pointer-events: none; background: var(--card);
  color: var(--ink); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 11px; font-size: 12.5px; line-height: 1.5;
  box-shadow: 0 3px 14px rgba(0,0,0,.16); opacity: 0; max-width: 260px;
  font-variant-numeric: tabular-nums; z-index: 5; }
@media (prefers-reduced-motion: no-preference) {
  .tip { transition: opacity .12s ease; }
}
.takeaway { border-left: 4px solid var(--accent); }
.takeaway ul { margin: 4px 0 2px; padding-left: 20px; }
.takeaway li { margin: 7px 0; line-height: 1.55; }
details.tbl { font-size: 13px; margin-top: 10px; }
details.tbl summary { cursor: pointer; color: var(--ink2); }
.tbl-scroll { overflow-x: auto; }
table { border-collapse: collapse; margin-top: 10px; min-width: 480px;
  font-variant-numeric: tabular-nums; }
th, td { text-align: right; padding: 5px 12px;
  border-bottom: 1px solid var(--line); }
th:first-child, td:first-child { text-align: left; }
th { font-family: var(--display); font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink2); }

.cardactions { float: right; display: flex; gap: 8px; margin: -2px 0 6px 12px; }
.cardactions button { font: 600 11.5px/1 var(--display); padding: 7px 10px;
  border-radius: 999px; border: 1.5px solid var(--line);
  background: var(--chip-bg); color: var(--ink); cursor: pointer; }
.cardactions button:hover { border-color: var(--mark); }

button.info { width: 17px; height: 17px; border-radius: 50%; padding: 0;
  border: 1.5px solid var(--ink2); background: transparent;
  color: var(--ink2); font: italic 700 11px/1 Georgia, serif;
  cursor: pointer; flex: none; margin-left: 6px; vertical-align: 1px; }
button.info[aria-expanded="true"] { background: var(--mark); color: #fff;
  border-color: var(--mark); }
.tipnote { color: var(--ink2); font-size: 12.5px; line-height: 1.5;
  margin: 2px 0 8px; padding: 8px 10px; background: var(--chip-bg);
  border-radius: 8px; }

@media print {
  /* paper is white: force the light tokens even in dark mode (the app
   * also re-renders charts light around the print snapshot) */
  :root, :root[data-theme="dark"] {
    --bg: #fff; --card: #fff; --ink: #14212e; --ink2: #4e5a66;
    --line: #E8DFD0; --hero-bg: #fff; --hero-ink: #14212e;
    --hero-ink2: #4e5a66; --accent: #C1A06B; --accent-ink: #2b2416;
    --mark: #0F4C85; --mark-strong: #00305B; --grid: #e7e2d6;
    --chip-bg: #fff;
    --s1: #6FA3DE; --s2: #A87B2F; --s3: #0E8A6D;
    --neg: #B3552E;
  }
  .ribbon, .tabs, .panel, #themeToggle, #navToggle, .cardactions, details.tbl,
  .nav .links a { display: none !important; }
  main { display: block; }
  .card { border: none; box-shadow: none; padding: 0; }
  body { background: #fff; }
}

footer.site { border-top: 1px solid var(--line); margin-top: 8px;
  color: var(--ink2); font-size: 12.5px; line-height: 1.6; }
.foot-in { max-width: 1160px; margin: 0 auto; padding: 18px 22px 26px; }
.foot-in p { margin: 6px 0; max-width: 92ch; }
.foot-in a { color: var(--mark); }
/* Index footer: (a) and (b) side by side, AFSL line spans full width below.
   Single column (current order) under 900px. Column width bounds the lines,
   so the 92ch cap is dropped here to avoid fighting the two-column layout. */
@media (min-width: 900px) {
  .foot-cols { display: grid; grid-template-columns: 1fr 1fr;
    column-gap: 34px; }
  .foot-cols p { max-width: none; }
  .foot-cols .afsl { grid-column: 1 / -1; margin-top: 12px;
    padding-top: 12px; border-top: 1px solid var(--line); }
}