/* The Inflation Picture — visual alignment with the approved Budget Picture
   Paper & Wattle/editorial styling. TIP remains an independent subject experience.
   TBP reference: commonsensemoney/open-data-engine, apps/australian-budgets/product/
   (homepage.css, style-system.css, editorial.css, site-shell.css).
   Keep TIP's data marks, graphic hierarchy, calculation logic and page-specific layout.
*/
@font-face {
  font-family: "TIP Literata";
  src: url("/inflation/fonts/Literata.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  --paper:#f5f1e7;
  --surface:#fffdf7;
  --ink:#2b3328;
  --muted:#59604f;
  --line:#cecdbd;
  --accent:#445639;
  --tint:#e8e6d8;
  --soft:#e8e6d8;
  --gold:#ba8c27;
  --tip-heading:"TIP Literata",Georgia,serif;
  --tip-ui:Arial,Helvetica,sans-serif;
  --tip-focus:#a66d20;
}
html { scroll-padding-top:20px; }
body {
  background:var(--paper);
  color:var(--ink);
  font:16px/1.55 var(--tip-ui);
}
header,main,footer {
  max-width:1420px;
  padding-inline:44px;
}
.family-header {
  max-width:1420px;
  min-height:90px;
  padding-block:0;
  border-bottom:2px solid var(--ink);
}
.family-masthead {
  min-height:90px;
  align-items:center;
}
.family-masthead .brand {
  font:400 27px/1.2 var(--tip-heading);
  letter-spacing:-.035em;
  white-space:normal;
  min-height:44px;
  display:inline-flex;
  align-items:center;
}
.family-masthead .brand span { font-weight:400; }
.family-pages {
  background:transparent;
  border-bottom:1px solid var(--line);
}
.family-nav-inner {
  max-width:1420px;
  padding-inline:44px;
  gap:25px;
}
.family-pages a,
.family-pages a[aria-current=page] {
  font:13px/1.35 var(--tip-ui);
  min-height:52px;
  padding:15px 0 13px;
  border-bottom:2px solid transparent;
  text-decoration:none;
  white-space:nowrap;
  color:var(--muted);
}
.family-pages a[aria-current=page] {
  border-bottom-color:var(--accent);
  color:var(--ink);
  font-weight:700;
}
.family-pages a:hover { color:var(--ink); }
.family-subject-label {
  color:var(--accent);
  border-right:1px solid var(--line);
  font-size:10px;
}
.preview {
  background:var(--surface);
  color:var(--muted);
  border-bottom:1px solid var(--line);
  font:11px/1.4 var(--tip-ui);
  letter-spacing:.04em;
  padding:9px 20px;
}
h1,h2,h3,
.family-masthead .brand,
.graphic-heading h3,
.receipt-heading h3,
.capital-history h3,
.explore-invitation h3,
.faq summary {
  font-family:var(--tip-heading);
  font-weight:400;
}
h1 {
  font-size:clamp(40px,4.9vw,66px);
  line-height:1.04;
  letter-spacing:-.03em;
}
h2 { font-size:clamp(29px,3vw,38px);line-height:1.1;letter-spacing:-.025em; }
.page-intro { padding:32px 0 24px; }
.page-intro h1 { max-width:none; font-size:clamp(32px,3.3vw,46px); letter-spacing:-.025em; }
.page-intro p, .hero .intro { max-width:none; }
h3 { letter-spacing:-.015em; }
.eyebrow {
  font:700 11px/1.4 var(--tip-ui);
  letter-spacing:.12em;
  color:var(--accent);
}
.hero {
  gap:48px;
  padding:40px 0 39px;
  grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);
  align-items:center;
}
.hero .intro,
.page-intro p {
  font-size:17px;
  line-height:1.55;
}
.hero-number { padding-left:34px; }
.headline-pair .big,
.headline-pair .big.secondary,
.big,
.stat b,
.dollar-result,
.detail-name,
.capital-card strong,
.cumulative-total strong,
.tile em {
  font-family:var(--tip-heading);
  font-weight:400;
  font-variant-numeric:lining-nums tabular-nums;
}
.headline-pair .big { color:var(--accent); }
.headline-pair .big.secondary { color:#925132; }
.measure-title { font-size:14px; }
.note, .mini-kicker { color:var(--muted); }
section {
  padding:36px 0;
  border-top:1px solid var(--line);
}
.section-desc {
  font-size:15px;
  max-width:none;
  line-height:1.6;
}
.chart-heading {
  border-bottom:1px solid var(--line);
  font-size:13px;
  font-weight:600;
}
.chart-heading span { font-weight:400; }
.legend { color:var(--ink); }
.charts { gap:36px; }
.chart text { font-family:var(--tip-ui); fill:var(--muted); }
/* Controls mirror TBP's restrained square treatment, without changing behaviour. */
button,select,input { color:var(--ink); }
select,input {
  min-height:44px;
  border:1px solid var(--line);
  border-radius:2px;
  background:var(--surface);
}
.seg { border-color:var(--line);border-radius:2px;background:var(--surface); }
.seg button { border-radius:0;min-height:40px; }
.seg button.active,.chip.on { background:var(--accent);color:var(--surface); }
.chip {
  border-radius:2px;
  background:var(--surface);
  border-color:var(--line);
  min-height:40px;
}
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, summary:focus-visible {
  outline:3px solid var(--tip-focus);
  outline-offset:3px;
}
.graphic-path .crumb { color:var(--ink); }
.graphic-heading h3,.receipt-heading h3,.capital-history h3 { font-size:25px; }
.explore-detail,.detail { background:var(--surface);border-top:2px solid var(--accent); }
.data-table { font-size:14px;font-variant-numeric:tabular-nums; }
.data-table th {
  border-bottom:2px solid var(--ink);
  color:var(--muted);
}
.data-table td { padding-block:14px; }
.data-table tbody tr:hover { background:var(--soft); }
.data-table .category-button { color:var(--ink); }
.snapshot-receipt .receipt-parent,
.capital-card[aria-pressed=true],
.data-table tr[aria-current=true] { background:var(--soft); }
.capital-card strong { font-size:33px; }
.explore-invitation {
  background:var(--soft);
  border-top:2px solid var(--accent);
  padding:22px 26px;
}
.explore-invitation h3 { font-size:26px; }
.explore-invitation-link {
  background:var(--accent);
  color:var(--surface);
  min-height:44px;
  display:inline-flex;
  align-items:center;
}
.dollar-panel { background:var(--soft); }
.site-footer {
  max-width:1420px;
  border-top:2px solid var(--ink);
  padding:28px 44px 36px;
  margin-top:44px;
  color:var(--ink);
}
.site-footer>strong { font:400 24px/1.2 var(--tip-heading); }
.site-footer>p { max-width:780px; }
.site-footer .footer-links { gap:12px 24px; }
@media (max-width:1100px) {
  header,main,footer,
  .family-header,.family-nav-inner,.site-footer { padding-inline:26px; }
  .hero { gap:32px; }
  .hero-number { padding-left:24px; }
}
@media (max-width:900px) {
  .hero { grid-template-columns:minmax(0,1fr);gap:24px; }
  .hero-number { padding:22px 0 0;border-left:0;border-top:1px solid var(--line); }
}
@media (max-width:760px) {
  header,main,footer,
  .family-header,.family-nav-inner,.site-footer { padding-inline:20px; }
  .family-masthead { min-height:76px;padding:12px 0; }
  .family-masthead .brand { font-size:24px; }
  .family-nav-inner { gap:20px; }
  .family-pages a,.family-pages a[aria-current=page] { min-height:48px;padding-block:14px 12px; }
  .hero { padding-top:30px; }
  .hero .intro { font-size:16px; }
  h1 { font-size:clamp(36px,8vw,47px); }
  h2 { font-size:30px; }
  .page-intro { padding-top:26px; }
  .page-intro h1 { max-width:none; font-size:clamp(30px,7vw,39px); }
  .headline-pair .big,.headline-pair .big.secondary { font-size:clamp(46px,9vw,66px); }
  .charts { gap:24px; }
  section { padding:30px 0; }
  .site-footer { padding-block:26px 30px; }
  .explore-invitation { padding:20px; }
}
@media (max-width:420px) {
  .headline-pair>div { padding-right:12px; }
  .headline-pair>div+div { padding-left:14px; }
  .headline-pair .big,.headline-pair .big.secondary { font-size:clamp(42px,11vw,53px); }
  .headline-pair .big small,.headline-pair .big.secondary small { font-size:25px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .tile { transition:none; }
}

/* Exact structural parity with TBP's shared siteHeaderHTML/siteFooterHTML:
   one-row masthead with brand lock-up and main navigation; separate edition
   strip; consistent branded footer. Icons and subject links stay TIP-specific. */
header.tip-masthead {
  height:auto;
  min-height:90px;
  max-width:1420px;
  width:100%;
  margin:0 auto;
  padding:12px 44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border-bottom:2px solid var(--ink);
}
.tip-brand-lockup {
  display:inline-flex;
  flex:none;
  gap:12px;
  align-items:center;
  min-height:44px;
  text-decoration:none;
  color:var(--ink);
}
.tip-brand-square {
  display:block;
  width:38px;
  height:38px;
  padding:0;
  background:transparent url('/inflation/brand/tip-logo.svg') center / contain no-repeat;
  flex:none;
}
/* Retain the shared shell markup and dimensions; only the subject symbol changes. */
.tip-brand-square i { display:none; }
.tip-brand-words { display:flex; flex-direction:column;gap:7px; }
.tip-brand-wordmark {
  font:400 24px/1.2 var(--tip-heading);
  letter-spacing:-.4px;
  white-space:nowrap;
}
.tip-brand-rule {
  display:flex;
  width:100%;
  height:2px;
}
.tip-brand-rule i:nth-child(1) { flex:86;background:#315b68; }
.tip-brand-rule i:nth-child(2) { flex:82;background:#83a79b; }
.tip-brand-rule i:nth-child(3) { flex:83;background:#c8a969; }
.tip-brand-rule i:nth-child(4) { flex:89;background:#a2c3c7; }
.tip-main-nav {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
  gap:8px 22px;
  min-width:0;
}
.tip-main-nav a {
  min-height:44px;
  display:inline-flex;
  align-items:center;
  border-bottom:2px solid transparent;
  font:13px/1.4 var(--tip-ui);
  color:var(--ink);
  text-decoration:none;
}
.tip-main-nav a[aria-current="page"] {
  border-bottom-color:var(--accent);
  font-weight:700;
}
.tip-main-nav a:hover { border-bottom-color:var(--line); }
.tip-edition-bar {
  max-width:1420px;
  margin:0 auto;
  padding:12px 44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px 20px;
  flex-wrap:wrap;
  border-bottom:1px solid var(--line);
  font:12px/1.5 var(--tip-ui);
  color:var(--muted);
}
.tip-edition-state {
  background:var(--surface);
  border:1px solid var(--line);
  color:var(--ink);
  font-size:11px;
  padding:5px 10px;
  white-space:nowrap;
}
.site-footer.tip-footer {
  display:block;
  max-width:1420px;
  margin:44px auto 0;
  border-top:1px solid var(--line);
  padding:30px 44px 36px;
  color:var(--ink);
}
.tip-footer-wordmark {
  display:block;
  font:400 24px/1.2 var(--tip-heading);
  color:var(--ink);
}
.site-footer.tip-footer>p:not(.footer-edition) {
  max-width:none;
  margin:10px 0 0;
  font:12px/1.6 var(--tip-ui);
  color:var(--muted);
}
.tip-footer-links {
  display:flex;
  flex-wrap:wrap;
  gap:12px 24px;
  margin-top:12px;
  font:12px/1.4 var(--tip-ui);
}
.tip-footer-links a {
  display:inline-flex;
  min-height:44px;
  align-items:center;
  text-decoration:underline;
  text-underline-offset:4px;
}
.site-footer.tip-footer .footer-edition {
  padding-top:10px;
  margin-top:4px;
  font-size:11px;
  color:var(--muted);
}
@media(max-width:1100px) {
  header.tip-masthead {
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    padding:14px 26px;
  }
  .tip-main-nav { justify-content:flex-start; }
  .tip-edition-bar, .site-footer.tip-footer { padding-inline:26px; }
}
@media(max-width:760px) {
  header.tip-masthead { padding-inline:20px; }
  .tip-brand-wordmark { font-size:22px; }
  .tip-brand-square { width:34px;height:34px; }
  .tip-main-nav { gap:0 16px; }
  .tip-main-nav a { font-size:12px; }
  .tip-edition-bar,.site-footer.tip-footer { padding-inline:20px; }
}
@media(max-width:420px) {
  .tip-brand-wordmark { font-size:20px; }
  .tip-main-nav { gap:0 13px; }
  .tip-main-nav a { font-size:11px; }
}

/* On narrow phones the historic basis selector has long option labels.
   Allow its flex item and select to shrink instead of widening the whole page. */
@media (max-width:600px) {
  #essentials-history .section-top label {
    display:grid;
    width:100%;
    max-width:100%;
    min-width:0;
    gap:6px;
  }
  #essential-period {
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;
  }
}

/* Visual acceptance refinement after rendered comparison with live TBP.
   Match the compact TBP masthead/footer typographic hierarchy. */
@media (min-width:1101px) {
  header.tip-masthead {
    min-height:72px;
    padding-top:9px;
    padding-bottom:9px;
  }
}
.tip-footer-wordmark {
  font:700 14px/1.4 var(--tip-ui);
  letter-spacing:normal;
}
.tip-footer-links { font-size:11px; }
@media(max-width:760px) {
  .tip-main-nav {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    width:100%;
    gap:0 12px;
    justify-content:stretch;
  }
  .tip-main-nav a {
    white-space:normal;
    min-width:0;
    padding:9px 0;
    align-items:center;
    line-height:1.3;
  }
}

/* Override the older, more-specific footer selector; confirmed in browser QA. */
.site-footer.tip-footer > .tip-footer-wordmark {
  font:700 14px/1.4 var(--tip-ui);
  letter-spacing:normal;
}
@media(max-width:420px) {
  .tip-brand-wordmark { font-size:22px; }
}

/* Keyboard users must be able to scroll wide publisher tables on small screens. */
.table-wrap[tabindex="0"]:focus-visible {
  outline:3px solid var(--tip-focus);
  outline-offset:3px;
}
.table-wrap[tabindex="0"] { overscroll-behavior-x:contain; }

/* Active navigation marker is painted independently of the link's text box.
   The marker must never displace the selected page label vertically. */
.tip-main-nav a {
  position:relative;
  box-sizing:border-box;
  border-bottom:0;
  background-image:none;
}
.tip-main-nav a::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:transparent;
  pointer-events:none;
}
.tip-main-nav a[aria-current="page"]::after {
  background:var(--accent);
}
.tip-main-nav a:hover:not([aria-current="page"])::after {
  background:var(--line);
}

/* The active-state selector is more specific than the base link rule.
   Explicitly remove its legacy 2px border too. */
.tip-main-nav a[aria-current="page"],
.tip-main-nav a:hover {
  border-bottom:0;
}

/* Legacy inline page CSS added 8px bottom padding only to the active link.
   Reset selected and unselected link padding to identical values. */
.tip-main-nav a,
.tip-main-nav a[aria-current="page"] {
  padding-block:0;
}
@media(max-width:760px) {
  .tip-main-nav a,
  .tip-main-nav a[aria-current="page"] {
    padding-block:9px;
  }
}

/* Preserve the published name, while disclosing ABS category abbreviations inline. */
.nec-explainer { margin:12px 0 18px; line-height:1.55; }
abbr[title] { text-decoration:underline dotted; text-underline-offset:3px; cursor:help; }