/* Blog: article + index. Tokens from shared.css/pages.css (--rs-*). No new
   colors — reuses the design system. Only article-specific layout lives here. */

.blog-article {
  max-width: 880px;
  margin: 0 auto;
  /* top clears the 72px fixed nav plus breathing room; sides + bottom as before */
  padding: calc(72px + var(--rs-space-10)) var(--rs-space-5) var(--rs-space-24);
}
/* Reading measure stays ~76ch (upper bound of comfortable line length) for
   legibility; wide elements (tables, figures, callouts) use the full container
   and break out past the text column so they don't feel cramped. */
.blog-body > p,
.blog-body > h2,
.blog-body > h3,
.blog-body > ul,
.blog-body > ol,
.blog-body > blockquote {
  max-width: 76ch;
}
.blog-breadcrumb {
  font-size: var(--rs-text-sm);
  color: var(--rs-fg-tertiary);
  margin-bottom: var(--rs-space-6);
}
.blog-breadcrumb a { color: var(--rs-fg-secondary); text-decoration: none; }
.blog-breadcrumb a:hover { color: var(--rs-action-primary); }
.blog-breadcrumb span { margin: 0 var(--rs-space-2); }

.blog-header h1 {
  /* Article title: Inter + 3xl, lighter than landing H1s. Long-form reads
     better with a body-weight display than the heavy General Sans used on
     landings. Only affects blog articles. */
  font-family: var(--rs-font-sans);
  font-weight: var(--rs-weight-semibold);
  font-size: var(--rs-text-3xl);
  line-height: var(--rs-leading-tight);
  letter-spacing: -0.01em;
  color: var(--rs-fg-primary);
  margin: 0 0 var(--rs-space-3);
}
.blog-meta {
  font-size: var(--rs-text-sm);
  color: var(--rs-fg-tertiary);
  margin-bottom: var(--rs-space-10);
}
.blog-meta:has(+ .blog-eeat) { margin-bottom: var(--rs-space-3); }
.blog-eeat {
  font-size: var(--rs-text-sm);
  color: var(--rs-fg-tertiary);
  line-height: var(--rs-leading-relaxed);
  padding-left: var(--rs-space-4);
  border-left: 2px solid var(--rs-border-default);
  margin-bottom: var(--rs-space-10);
  max-width: var(--rs-content-reading, 68ch);
}

.blog-body {
  font-size: var(--rs-text-base);
  line-height: var(--rs-leading-relaxed);
  color: var(--rs-fg-secondary);
}
.blog-body h2 {
  font-family: var(--rs-font-sans);
  font-weight: 700;
  font-size: var(--rs-text-2xl);
  letter-spacing: -0.01em;
  color: var(--rs-fg-primary);
  margin: var(--rs-space-12) 0 var(--rs-space-4);
}
.blog-body h3 {
  font-size: var(--rs-text-xl);
  color: var(--rs-fg-primary);
  margin: var(--rs-space-8) 0 var(--rs-space-3);
}
.blog-body p { margin: 0 0 var(--rs-space-5); }
.blog-body a { color: var(--rs-action-primary); }
.blog-body ul, .blog-body ol { margin: 0 0 var(--rs-space-5) var(--rs-space-6); }
.blog-body li { margin-bottom: var(--rs-space-2); }
.blog-body blockquote {
  border-left: 3px solid var(--rs-action-primary);
  padding-left: var(--rs-space-5);
  margin: var(--rs-space-6) 0;
  color: var(--rs-fg-primary);
  font-style: italic;
}
.blog-body img { max-width: 100%; height: auto; border-radius: var(--rs-radius-lg); }

/* Tables: match the site's .tax-table finish (dark header, striped rows,
   rounded top, no grid lines). Astro renders markdown tables as bare <table>,
   so the scroll wrapper is applied to the table itself: it scrolls inside its
   own box on mobile and never widens the page. */
.blog-body table {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  margin: var(--rs-space-8) 0;
  font-size: var(--rs-text-sm);
  line-height: var(--rs-leading-snug);
  border-radius: var(--rs-radius-md);
  box-shadow: var(--rs-shadow-sm);
  -webkit-overflow-scrolling: touch;
}
.blog-body thead th {
  background: var(--rs-fg-primary);
  color: var(--rs-bg-surface);
  font: 700 var(--rs-text-xs)/1.3 var(--rs-font-sans);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: var(--rs-space-4) var(--rs-space-5);
  text-align: left;
  vertical-align: bottom;
  white-space: nowrap;
}
.blog-body tbody td {
  padding: var(--rs-space-4) var(--rs-space-5);
  border-bottom: 1px solid var(--rs-border-default);
  color: var(--rs-fg-secondary);
  vertical-align: top;
  min-width: 9rem;
}
.blog-body tbody td:first-child { font-weight: 600; color: var(--rs-fg-primary); white-space: nowrap; }
.blog-body tbody tr:nth-child(even) { background: var(--rs-bg-surface-alt); }
.blog-body tbody tr:hover td { background: var(--rs-ink-50); }
.blog-body tbody tr:last-child td { border-bottom: none; }
/* The "last verified" caption line under each table (rendered as <em>). */
.blog-body table + p em { font-size: var(--rs-text-sm); color: var(--rs-fg-tertiary); }

/* Inline diagrams (SVG/HTML in the markdown body). Apple-clean: flat, one
   accent, hierarchy from spacing. No raster, sharp at any DPI, themeable. */
.blog-figure { margin: var(--rs-space-10) 0; }
.blog-figure figcaption {
  margin-top: var(--rs-space-4);
  font-size: var(--rs-text-sm);
  color: var(--rs-fg-tertiary);
  line-height: var(--rs-leading-snug);
}

/* Tax-year bars: each country's year on a shared Jan-Dec scale, so the reader
   sees at a glance that the UK bar starts in April, Australia in July. */
.taxyear-scale {
  display: flex; justify-content: space-between;
  margin-left: 140px;
  font-size: var(--rs-text-xs); color: var(--rs-fg-tertiary);
  margin-bottom: var(--rs-space-3);
}
.taxyear-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--rs-space-3); }
.taxyear-bars li { display: grid; grid-template-columns: 140px 1fr; align-items: center; }
.taxyear-label { font: 600 var(--rs-text-sm)/1.2 var(--rs-font-sans); color: var(--rs-fg-primary); padding-right: var(--rs-space-3); }
.taxyear-track {
  position: relative;
  height: 30px;
  background: var(--rs-bg-surface-alt);
  border-radius: var(--rs-radius-sm);
  overflow: hidden;
}
.taxyear-fill {
  position: absolute; top: 0; bottom: 0;
  background: var(--rs-action-primary);
  border-radius: var(--rs-radius-sm);
}
.taxyear-note {
  position: absolute; left: var(--rs-space-3); top: 50%; transform: translateY(-50%);
  font: 600 var(--rs-text-xs)/1 var(--rs-font-sans);
  color: var(--rs-fg-on-accent);
  z-index: 1; white-space: nowrap;
}
@media (max-width: 560px) {
  .taxyear-scale { margin-left: 0; }
  .taxyear-bars li { grid-template-columns: 1fr; gap: 4px; }
  .taxyear-label { padding-right: 0; }
}

/* Tie-breaker cascade: numbered vertical steps with a connecting spine. */
.cascade-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.cascade-steps li {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--rs-space-4);
  padding: var(--rs-space-4) 0 var(--rs-space-5);
}
.cascade-steps li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 15px; top: 34px; bottom: -2px;
  width: 2px;
  background: var(--rs-border-default);
}
.cascade-n {
  grid-row: 1 / span 2;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--rs-radius-pill);
  background: var(--rs-action-primary);
  color: var(--rs-fg-on-accent);
  font: 700 15px/1 var(--rs-font-sans);
  position: relative; z-index: 1;
}
.cascade-t { font: 600 var(--rs-text-md)/1.3 var(--rs-font-sans); color: var(--rs-fg-primary); align-self: center; }
.cascade-d { grid-column: 2; font-size: var(--rs-text-sm); color: var(--rs-fg-secondary); line-height: var(--rs-leading-snug); margin-top: 2px; }

/* Ladder: counting -> documenting -> proving. Same rail as cascade; step 3 (proving)
   carries the "certified" green, the one place green means something. */
.ladder-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.ladder-steps li {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--rs-space-4);
  padding: var(--rs-space-4) 0 var(--rs-space-5);
}
.ladder-steps li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 15px; top: 34px; bottom: -2px;
  width: 2px;
  background: var(--rs-border-default);
}
.ladder-n {
  grid-row: 1 / span 2;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--rs-radius-pill);
  background: var(--rs-ink-a15);
  color: var(--rs-fg-secondary);
  font: 700 15px/1 var(--rs-font-sans);
  position: relative; z-index: 1;
}
.ladder-steps li:last-child .ladder-n {
  background: var(--rs-success-600, #059669);
  color: #fff;
}
.ladder-t { font: 600 var(--rs-text-md)/1.3 var(--rs-font-sans); color: var(--rs-fg-primary); align-self: center; }
.ladder-steps li:last-child .ladder-t { color: var(--rs-success-600, #059669); }
.ladder-d { grid-column: 2; font-size: var(--rs-text-sm); color: var(--rs-fg-secondary); line-height: var(--rs-leading-snug); margin-top: 2px; }

/* The argument in one view: 183 is the start, evidence is the end. */
.blog-flow { text-align: center; }
.blog-flow-lead {
  font-family: var(--rs-font-display);
  font-weight: var(--rs-weight-semibold);
  font-size: clamp(19px, 2.2vw, 24px);
  color: var(--rs-fg-primary);
  margin: 0 0 var(--rs-space-6);
}
.blog-flow-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--rs-space-3);
  text-align: left;
}
@media (max-width: 720px) { .blog-flow-steps { grid-template-columns: 1fr; } }
.blog-flow-steps li {
  position: relative;
  padding: var(--rs-space-4);
  border: 1px solid var(--rs-border-default);
  border-radius: 10px;
  background: var(--rs-bg-surface);
  display: flex; flex-direction: column; gap: 4px;
}
.blog-flow-steps li:last-child { border-color: var(--rs-success-600, #059669); }
.blog-flow-t {
  font: 600 var(--rs-text-md)/1.2 var(--rs-font-sans);
  color: var(--rs-fg-primary);
}
.blog-flow-t--end { color: var(--rs-success-600, #059669); }
.blog-flow-d { font-size: var(--rs-text-sm); color: var(--rs-fg-secondary); line-height: var(--rs-leading-snug); }

/* In-this-guide TOC: compact anchor block after the intro. */
.blog-toc {
  margin: var(--rs-space-8) 0;
  padding: var(--rs-space-5) var(--rs-space-6);
  border: 1px solid var(--rs-border-default);
  border-radius: var(--rs-radius-md, 12px);
  background: var(--rs-bg-surface);
}
.blog-toc-label {
  font-family: var(--rs-font-mono);
  font-size: var(--rs-text-xs, 12px);
  letter-spacing: var(--rs-tracking-wide);
  text-transform: uppercase;
  color: var(--rs-fg-tertiary);
  margin: 0 0 var(--rs-space-3);
}
.blog-toc ul {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--rs-space-2) var(--rs-space-6);
}
@media (max-width: 560px) { .blog-toc ul { grid-template-columns: 1fr; } }
.blog-toc a {
  font-size: var(--rs-text-sm);
  color: var(--rs-action-primary);
  text-decoration: none;
}
.blog-toc a:hover { text-decoration: underline; }

/* Calculator tool block: quiet, tool-intent, not an aggressive CTA. */
.blog-tool {
  margin: var(--rs-space-8) 0;
  padding: var(--rs-space-5) var(--rs-space-6);
  border: 1px solid var(--rs-border-default);
  border-radius: var(--rs-radius-md, 12px);
  background: var(--rs-ink-a06, rgba(30,64,175,0.06));
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--rs-space-4); flex-wrap: wrap;
}
.blog-tool-label {
  font-family: var(--rs-font-mono);
  font-size: var(--rs-text-xs, 12px);
  letter-spacing: var(--rs-tracking-wide);
  text-transform: uppercase;
  color: var(--rs-action-primary);
  margin: 0 0 4px;
}
.blog-tool-desc { margin: 0; font-size: var(--rs-text-base); color: var(--rs-fg-secondary); }
.blog-tool-cta {
  flex: none;
  font-weight: var(--rs-weight-semibold);
  font-size: var(--rs-text-sm);
  color: var(--rs-action-primary);
  text-decoration: none;
  white-space: nowrap;
}
.blog-tool-cta:hover { text-decoration: underline; }

/* Article hero image, below the title. Full content width, gently framed. */
.blog-hero { margin: var(--rs-space-6) 0 var(--rs-space-10); }
.blog-hero img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  border-radius: var(--rs-radius-md, 12px);
}

/* The certified record, shown once near the close: what "proving" looks like. */
.blog-proof-shot img {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--rs-border-default);
  border-radius: 12px;
  box-shadow: 0 20px 50px var(--rs-dark-a30);
}

/* Callouts: quiet bordered panels, not alarmist. Key fact + two-column split. */
.blog-callout {
  margin: var(--rs-space-8) 0;
  padding: var(--rs-space-5) var(--rs-space-6);
  border: 1px solid var(--rs-border-default);
  border-radius: var(--rs-radius-lg);
  background: var(--rs-bg-surface-alt);
}
.blog-callout .callout-label {
  font: 600 var(--rs-text-xs)/1.2 var(--rs-font-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rs-action-primary);
  margin: 0 0 var(--rs-space-2);
}
.blog-callout p:not(.callout-label) { margin: 0; font-size: var(--rs-text-base); color: var(--rs-fg-secondary); line-height: var(--rs-leading-relaxed); }
.blog-callout--key { border-left: 3px solid var(--rs-action-primary); }
.blog-callout--split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rs-space-6); }
.blog-callout--split div + div { border-left: 1px solid var(--rs-border-subtle); padding-left: var(--rs-space-6); }
@media (max-width: 560px) {
  .blog-callout--split { grid-template-columns: 1fr; gap: var(--rs-space-5); }
  .blog-callout--split div + div { border-left: none; padding-left: 0; border-top: 1px solid var(--rs-border-subtle); padding-top: var(--rs-space-5); }
}

/* FAQ accordion, matching the site's v2-faq pattern (closed by default,
   click to open). Rendered from frontmatter so it stays in sync with schema. */
.blog-faq { margin-top: var(--rs-space-16); }
.blog-faq > h2 {
  font-family: var(--rs-font-sans);
  font-weight: 700;
  font-size: var(--rs-text-2xl);
  letter-spacing: -0.01em;
  color: var(--rs-fg-primary);
  margin: 0 0 var(--rs-space-6);
}
.blog-faq-item {
  border-bottom: 1px solid var(--rs-border-subtle);
}
.blog-faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: var(--rs-space-5) var(--rs-space-8) var(--rs-space-5) 0;
  position: relative;
  font: 600 var(--rs-text-md)/1.4 var(--rs-font-sans);
  color: var(--rs-fg-primary);
}
.blog-faq-item summary::-webkit-details-marker { display: none; }
.blog-faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  font-size: 1.4em; font-weight: 400;
  color: var(--rs-action-primary);
  line-height: 1;
}
.blog-faq-item[open] summary::after { content: "\2212"; }
.blog-faq-a { padding: 0 0 var(--rs-space-5); }
.blog-faq-a p { margin: 0; font-size: var(--rs-text-base); color: var(--rs-fg-secondary); line-height: var(--rs-leading-relaxed); }

.blog-sources {
  margin-top: var(--rs-space-16);
  padding-top: var(--rs-space-6);
  border-top: 1px solid var(--rs-border-subtle);
  font-size: var(--rs-text-sm);
}
.blog-sources h2 { font-size: var(--rs-text-md); color: var(--rs-fg-primary); }
.blog-sources a { color: var(--rs-fg-secondary); }

/* Index */
.blog-index { max-width: 900px; margin: 0 auto; padding: var(--rs-space-16) var(--rs-space-5) var(--rs-space-24); }
.blog-index-head h1 { font-family: var(--rs-font-display); font-size: clamp(36px, 5vw, 48px); font-weight: var(--rs-weight-semibold); letter-spacing: var(--rs-tracking-snug); color: var(--rs-fg-primary); margin: 0 0 var(--rs-space-3); }
.blog-index-head p { font-size: var(--rs-text-lg); color: var(--rs-fg-secondary); margin-bottom: var(--rs-space-10); }

.blog-hubs { display: flex; flex-wrap: wrap; gap: var(--rs-space-2); margin-bottom: var(--rs-space-10); }
.hub-chip {
  font-size: var(--rs-text-sm);
  padding: var(--rs-space-2) var(--rs-space-4);
  border-radius: var(--rs-radius-pill);
  border: 1px solid var(--rs-border-default);
  color: var(--rs-fg-secondary);
  text-decoration: none;
  text-transform: capitalize;
}
.hub-chip.is-active, .hub-chip:hover { background: var(--rs-action-primary); color: var(--rs-fg-on-accent); border-color: var(--rs-action-primary); }

.blog-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--rs-space-5); }
.blog-card a {
  display: block;
  padding: var(--rs-space-6);
  border: 1px solid var(--rs-border-subtle);
  border-radius: var(--rs-radius-xl);
  text-decoration: none;
  background: var(--rs-bg-surface);
  transition: border-color var(--rs-duration-fast) var(--rs-ease-standard), box-shadow var(--rs-duration-fast) var(--rs-ease-standard);
}
.blog-card a:hover { border-color: var(--rs-action-primary); box-shadow: var(--rs-shadow-md); }
.blog-card-hub { font-size: var(--rs-text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--rs-action-primary); }
.blog-card h2 { font-size: var(--rs-text-xl); color: var(--rs-fg-primary); margin: var(--rs-space-2) 0; }
.blog-card p { color: var(--rs-fg-secondary); margin: 0 0 var(--rs-space-3); }
.blog-card time { font-size: var(--rs-text-sm); color: var(--rs-fg-tertiary); }

.blog-empty { color: var(--rs-fg-tertiary); }