/* Budget Unlocked — visual language ported from the design file.
   Palette and type scale are taken directly from it; the layout is rebuilt as
   real CSS rather than the inline styles the design tool emits. */

:root {
  --paper:        #f9f9f9;
  --ink:          #1a1c1c;
  /* The dark surface is warmer and lighter than --ink, so a card sitting on the
     page reads as a panel rather than as a block of body text gone inverse. */
  --surface-dark: #2e2f2b;
  --body:         rgba(26, 28, 28, 0.75);
  --muted-body:   rgba(26, 28, 28, 0.62);
  --muted:        rgba(26, 28, 28, 0.55);
  --rule:         rgba(26, 28, 28, 0.08);
  --hairline:     rgba(26, 28, 28, 0.07);
  --pill:         #efefef;
  --pill-hover:   #e6e6e6;
  --pill-ink:     rgba(26, 28, 28, 0.6);
  --hover:        #f3f3f3;
  --accent:       #096b53;
  --accent-dark:  #075943;
  --signal:       #ee4900;   /* section labels, category bars, flags */

  /* On the dark surface. Orange at page weight is too dim against #2e2f2b, so
     labels and glyphs there step up to a lighter tint of the same hue. */
  --on-dark:       #cdd8dc;
  --on-dark-label: #ff7a3d;
  --on-dark-glyph: #ff9a5c;
  --on-dark-quiet: rgba(249, 249, 249, 0.5);

  --up-bg:      rgba(9, 107, 83, 0.12);
  --up-fg:      #096b53;
  --down-bg:    rgba(238, 73, 0, 0.10);
  --down-fg:    #ee4900;
  --flat-bg:    #f3f3f3;
  --flat-fg:    rgba(26, 28, 28, 0.55);
  --warn-bg:    rgba(238, 73, 0, 0.08);
  --warn-fg:    #ee4900;

  --card-shadow: 0 2px 24px rgba(26, 28, 28, 0.04);

  --shell: 920px;
  --sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  /* Figures are set in the body face now rather than a monospace one — the
     design carries no mono. Tabular numerals do the column-alignment work the
     monospace was there for. */
  --mono: var(--sans);
}

/* The panels that hold a table or a chart lift off the page very slightly. The
   strips and the small cards in a grid do not — a shadow on every white box
   flattens the distinction it exists to draw. */
.money-stat, .borrow-table, .revised-table, .ministry-table,
.price-table, .deadline-table {
  box-shadow: var(--card-shadow);
}

/* Everything that was monospaced is a figure in a column that gets scanned
   downwards, so it keeps fixed-width digits without a fixed-width face. */
.kpi-value, .delta, .flow-figure, .flow-split-pct, .borrow-figure,
.ministry-amount, .money-stat-value, .revised-figure, .price-duty,
.highlight-amount, .highlight-rank, .item-score {
  font-variant-numeric: tabular-nums;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }
a:hover { color: var(--accent-dark); }
::selection { background: var(--signal); color: var(--paper); }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(249, 249, 249, 0.75);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--rule);
}

.header-row {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.brand { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.brand-name {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.brand-cycle { font-size: 12.5px; color: var(--muted); font-weight: 500; }

.methodology-link {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 500;
  text-decoration: none;
}
.methodology-link:hover { color: var(--ink); }

.tabs {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 24px 12px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.tab {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 20px;
  border: 1px solid transparent;
  cursor: pointer;
  background: var(--pill);
  color: var(--pill-ink);
}

.tab:hover { background: var(--pill-hover); }
.tab[aria-current="true"] { background: var(--ink); color: var(--paper); }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* A class selector outranks the user-agent rule behind the `hidden` attribute,
   so any element styled with `display` must restore it explicitly or `hidden`
   silently stops working. This one is global rather than per-class: the page
   hides a dozen things this way and none of them should have to remember. */
[hidden] { display: none !important; }

.filters {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 24px 12px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.filter {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid transparent;
  cursor: pointer;
  background: var(--pill);
  color: var(--pill-ink);
}
.filter:hover { background: var(--pill-hover); }
.filter[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.filter:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ----------------------------------------------------------------- intro */

main { display: block; }

.intro {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 28px 24px 8px;
}

.intro-text {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted-body);
  margin: 0 0 4px;
  max-width: 640px;
}

.kpi-strip {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 16px;
  font-size: 12.5px;
}

.kpi-value {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}
.kpi-label { color: var(--muted); margin-left: 6px; }

.review-banner {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--warn-bg);
  color: var(--warn-fg);
  font-size: 12.5px;
  font-weight: 600;
}

/* --------------------------------------------------- budget in one line */

.summary-section {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 8px 24px 0;
}

.summary-card {
  background: var(--surface-dark);
  color: var(--paper);
  border-radius: 20px;
  padding: 20px 24px;
}

.summary-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-dark-label);
  margin-bottom: 8px;
}

/* The one place the serif carries running prose rather than a name: this is the
   sentence the whole page reduces to, and it is set to be read, not scanned. */
.summary-focus {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.5;
  font-weight: 500;
  margin: 0 0 14px;
  max-width: 680px;
}

.summary-priorities {
  list-style: none;
  counter-reset: priority;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 8px;
  max-width: 760px;
}

.summary-priorities li {
  counter-increment: priority;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--on-dark);
  display: flex;
  gap: 10px;
}

.summary-priorities li::before {
  content: counter(priority);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--on-dark-glyph);
  border: 1px solid rgba(255, 122, 61, 0.45);
  border-radius: 5px;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.summary-bullets {
  display: grid;
  padding-top: 14px;
  border-top: 1px solid rgba(249, 249, 249, 0.14);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 20px;
}

.summary-bullet {
  font-size: 13px;
  line-height: 1.5;
  color: var(--on-dark);
  display: flex;
  gap: 8px;
}

.summary-bullet::before {
  content: "\2022";
  color: var(--signal);
  flex-shrink: 0;
}

.summary-sources {
  margin: 14px 0 0;
  font-size: 11.5px;
  color: var(--on-dark-quiet);
}

/* -------------------------------------------------------- key highlights */

.highlights-section {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 24px 24px 4px;
}

.highlights-note { font-size: 12px; color: var(--muted); }

/* A grid rather than a scroller: ten items that each open to several
   paragraphs do not belong in a horizontal strip. Two columns where there is
   room, one where there is not — and an open card spans the full width so its
   detail is not squeezed into half of it. */
.highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 10px;
  align-items: start;
}

.highlight.open { grid-column: 1 / -1; }

.highlight {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
}

.highlight:hover { border-color: var(--accent); }
.highlight.open { border-color: var(--accent); }

.highlight-head {
  width: 100%;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  text-align: left;
  background: none;
  border: none;
  padding: 13px 15px;
  font: inherit;
  cursor: pointer;
}

.highlight-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.highlight-rank {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--on-dark-glyph);
  background: var(--surface-dark);
  border-radius: 6px;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.highlight-body { flex: 1; min-width: 0; }

.highlight-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}

.highlight-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.highlight-theme { font-size: 12px; color: var(--muted); }

.highlight-amount {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--up-bg);
  color: var(--up-fg);
}

.highlight-detail {
  padding: 0 15px 14px 49px;
  border-top: 1px solid var(--rule);
  margin-top: -1px;
}

.highlight-plain-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 13px 0 4px;
}

.highlight-plain {
  font-size: 14px;
  line-height: 1.6;
  color: var(--body);
  margin: 0;
}

/* The first heading sits right under the card's own border. */
.highlight-detail > .highlight-plain-label:first-child { margin-top: 12px; }

.highlight-term {
  font-size: 13px;
  line-height: 1.55;
  color: var(--body);
  background: var(--hover);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 6px;
}

.highlight-term strong { color: var(--ink); }

.highlight-source { margin-top: 10px; }

.highlight-source summary {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  list-style: none;
}

.highlight-source summary::-webkit-details-marker { display: none; }
.highlight-source summary::before { content: "▸ "; }
.highlight-source[open] summary::before { content: "▾ "; }
.highlight-source summary:hover { color: var(--accent-dark); }

.highlight-quote {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted-body);
  margin: 8px 0 6px;
}

.highlight-cite { font-size: 11.5px; color: var(--muted); }

/* ------------------------------------------------------------------ list */

.list-section {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 20px 24px 12px;
  scroll-margin-top: 96px;
}

.list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px 4px;
  flex-wrap: wrap;
}

/* Section labels carry the accent orange now rather than sitting muted. They are
   the only thing marking where one section ends and the next begins on a page
   with no rules between them, so they have to be findable at a glance. */
.list-heading {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--signal);
}

.link-button {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
}
.link-button:hover { color: var(--accent-dark); }

.items { display: flex; flex-direction: column; }

/* Clears the sticky header when a highlight jumps to a row. */
.item { border-bottom: 1px solid var(--rule); scroll-margin-top: 108px; }

.item-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 8px;
  cursor: pointer;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  font-family: inherit;
  color: inherit;
}
.item-row:hover { background: var(--hover); }
.item-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.item-score {
  width: 30px;
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-align: center;
}

.item-main { flex: 1; min-width: 0; }

.item-title {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}

.item-meta {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 3px;
}

.item-side {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.delta {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 6px;
  white-space: nowrap;
}
.delta.up      { background: var(--up-bg);   color: var(--up-fg); }
.delta.down    { background: var(--down-bg); color: var(--down-fg); }
.delta.neutral { background: var(--flat-bg); color: var(--flat-fg); }

.chevron {
  font-size: 13px;
  color: var(--muted);
  transition: transform 0.15s;
  display: inline-block;
}
.item.open .chevron { transform: rotate(90deg); }

/* -------------------------------------------------------------- expanded */

.detail { padding: 4px 8px 26px 52px; max-width: 760px; }

.detail-block { margin-bottom: 16px; }

.detail-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 5px;
}

.detail-text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--body);
  margin: 0;
}

.glossary {
  background: var(--hover);
  border-radius: 16px;
  padding: 12px 16px;
  margin-bottom: 16px;
}

.glossary-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.glossary-item {
  font-size: 13px;
  line-height: 1.5;
  color: var(--body);
  margin-bottom: 3px;
}
.glossary-item strong { color: var(--ink); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 7px 12px;
}

.chip-name { font-size: 13px; font-weight: 600; color: var(--ink); }

.chip-tag {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}
/* Two opposite tags can sit next to each other in one chip row, and this palette
   has a single favourable hue and a single adverse one — so they take one each
   rather than the two orange tints they would otherwise both land on. */
.chip-tag.may_benefit       { background: var(--up-bg);   color: var(--up-fg); }
.chip-tag.may_face_pressure { background: var(--down-bg); color: var(--down-fg); }
.chip-tag.mixed             { background: var(--flat-bg); color: var(--flat-fg); }

.chip-companies {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.5;
}

.sources { margin-top: 4px; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.sources a { text-decoration: none; }
.sources a:hover { text-decoration: underline; }

.toggle-row { display: flex; justify-content: center; padding: 20px 0 4px; }

.pill-button {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  background: var(--pill);
  border: none;
  border-radius: 20px;
  cursor: pointer;
  padding: 10px 20px;
}
.pill-button:hover { background: var(--pill-hover); }

.empty { color: var(--muted); font-size: 13.5px; padding: 24px 8px; }

/* ------------------------------------------------------------ methodology */

.methodology {
  max-width: var(--shell);
  margin: 24px auto 0;
  padding: 44px 24px 64px;
  border-top: 1px solid var(--rule);
}

.methodology .list-heading { margin-bottom: 10px; }

/* The evidence strip. Numerals carry this, so they are set large and in the
   ink colour while their labels stay quiet — the opposite of the prose below,
   which is uniform grey and was the reason the page read as undifferentiated. */
.method-evidence {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px 28px;
  margin: 22px 0 30px;
  padding: 22px 24px;
  background: var(--pill);
  border-radius: 10px;
}

.method-stat { display: flex; flex-direction: column; gap: 3px; }

.method-stat-value {
  font-size: 27px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.method-stat-label {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--muted);
}

.method-evidence-note {
  grid-column: 1 / -1;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted-body);
}

/* The source list. A three-column row — what it is for, what it is called,
   how long it runs — so the set can be scanned rather than read. */
.method-sources { margin-bottom: 34px; }

.method-sources-label,
.methodology-grid-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 10px;
}

.method-doc-list { border-top: 1px solid var(--hairline); }

.method-doc {
  display: grid;
  grid-template-columns: 132px 1fr auto;
  gap: 16px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--hairline);
}

.method-doc-role {
  font-size: 11.5px;
  color: var(--muted);
}

/* min-width:0 so a long bilingual cover title wraps inside its column instead
   of forcing the grid wider than the page. */
.method-doc-main { min-width: 0; }

.method-doc-name {
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.4;
}

/* The cover title, often bilingual. Kept small and quiet: it is there to be
   copied into a search box, not read. */
.method-doc-official {
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
}

.method-doc-pages {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.methodology-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px 30px;
  font-size: 13px;
  line-height: 1.62;
  color: var(--muted-body);
}

/* Each block's lead-in becomes a heading on its own line. As inline bold it
   ran straight into the sentence, so ten blocks read as one grey slab. */
.methodology-grid > div > strong:first-child {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

@media (max-width: 620px) {
  .method-doc { grid-template-columns: 1fr auto; }
  .method-doc-role { grid-column: 1 / -1; color: var(--signal); }
  .method-stat-value { font-size: 23px; }
}

@media (max-width: 620px) {
  .detail { padding-left: 8px; }
  .item-side { flex-direction: column; align-items: flex-end; gap: 4px; }
}

/* ------------------------------------------------------------- money flow */

.money-stats {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 24px 24px 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.money-stat {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 16px 18px;
}

.money-stat-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 6px;
}

.money-stat-value {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
}

.money-stat-detail {
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted-body);
  margin-top: 2px;
}

.money-flows {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 28px 24px 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
}

.money-column .list-heading { margin-bottom: 14px; }

.flow-row { margin-bottom: 13px; }

.flow-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.flow-label { font-size: 13px; font-weight: 600; color: var(--ink); }

.flow-figure {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  flex-shrink: 0;
}

.flow-track {
  height: 7px;
  background: var(--pill);
  border-radius: 4px;
  overflow: hidden;
}

.flow-fill { height: 100%; border-radius: 4px; }
/* Two hues, not two shades: money arriving and money leaving are different
   kinds of fact, and the columns sit side by side. */
.flow-fill.in  { background: var(--accent); }
.flow-fill.out { background: var(--ink); }

.flow-note {
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  margin: 5px 0 0;
}

/* ------------------------------------------------------- deficit ratios */

.deficit-section {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 16px 24px 0;
}

.deficit-section .kpi-strip { margin-top: 0; }

.deficit-trend {
  font-size: 11.5px;
  font-weight: 600;
  margin-left: 8px;
  white-space: nowrap;
}
/* A shrinking deficit is the favourable direction, so it takes the same green
   the rest of the page uses for favourable — the arrow alone would be
   ambiguous, since "down" is good here and bad on a spending row. */
.deficit-trend.down { color: var(--up-fg); }
.deficit-trend.up   { color: var(--down-fg); }

/* ------------------------------------------ borrowing split, on the row */

.flow-split {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--muted);
}

.flow-split-pct { font-family: var(--mono); font-weight: 600; color: var(--ink); }
.flow-split-link { font-size: 11.5px; font-weight: 600; white-space: nowrap; }

/* --------------------------------------------------- who it borrows from */

.borrow-section {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 28px 24px 0;
  /* Cleared by the sticky header when the split link jumps here. */
  scroll-margin-top: 96px;
}

.borrow-section .list-heading { margin-bottom: 6px; }
.borrow-section .intro-text { margin-bottom: 14px; }

.borrow-table {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 16px 18px;
}

.borrow-row {
  display: grid;
  grid-template-columns: 200px 1fr 118px;
  align-items: center;
  column-gap: 12px;
  margin-bottom: 13px;
}
.borrow-row:last-child { margin-bottom: 0; }

.borrow-label { font-size: 12.5px; font-weight: 600; line-height: 1.3; }

.borrow-type {
  display: inline-block;
  margin-top: 3px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 16px;
}
.borrow-type.domestic { background: var(--up-bg);   color: var(--up-fg); }
.borrow-type.external { background: var(--warn-bg); color: var(--warn-fg); }

.borrow-track {
  height: 14px;
  background: var(--hover);
  border-radius: 4px;
  overflow: hidden;
}

.borrow-fill { height: 100%; background: var(--accent); border-radius: 4px; }
/* Money moving the other way — a channel repaying more than it raises. Striped
   rather than solid, so it cannot be read as an ordinary contribution. */
.borrow-fill.negative {
  background: repeating-linear-gradient(
    45deg, var(--pill-hover), var(--pill-hover) 3px, #fafafa 3px, #fafafa 6px);
}

.borrow-figure {
  text-align: right;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  line-height: 1.35;
}

.borrow-amount { color: var(--muted); font-size: 11.5px; font-weight: 500; }

.borrow-note {
  grid-column: 1 / -1;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  margin: 5px 0 2px;
}

/* -------------------------------------------------- promised vs revised */

.revised-section {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 30px 24px 0;
}

.revised-section .list-head { margin: 0 0 6px; }
.revised-section .intro-text { margin-bottom: 14px; max-width: 680px; }

.revised-table {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
}

.revised-head,
.revised-row {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 0.9fr;
  gap: 8px;
  padding: 12px 16px;
  align-items: center;
}

.revised-head {
  background: var(--hover);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 10px 16px;
}

.revised-row { border-top: 1px solid var(--pill); }

.revised-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}

.revised-ministry { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

.revised-figure {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--muted-body);
}

.revised-row .delta { font-size: 12px; padding: 2px 8px; }

@media (max-width: 620px) {
  .borrow-row { grid-template-columns: 1fr 106px; }
  .borrow-label-cell { grid-column: 1 / -1; }

  /* The two figures stack under the name rather than shrinking to unreadable
     columns; the header row has nothing left to label, so it goes. */
  .revised-head { display: none; }
  .revised-row { grid-template-columns: 1fr auto; row-gap: 6px; }
  .revised-scheme { grid-column: 1 / -1; }
  .revised-figure::before {
    content: attr(data-label) " ";
    font-family: var(--sans);
    font-size: 11px;
    color: var(--muted);
  }
}

.money-note-section {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 22px 24px 0;
}

.money-note {
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
  max-width: 720px;
}

/* ---------------------------------------------------------- by ministry */

.ministry-section {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 30px 24px 48px;
}

.ministry-section .list-heading { margin-bottom: 6px; }
.ministry-section .intro-text { margin-bottom: 14px; }

.ministry-table {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 16px 18px;
}

.ministry-row {
  display: grid;
  grid-template-columns: 186px 1fr 132px;
  align-items: center;
  column-gap: 12px;
  margin-bottom: 13px;
}
.ministry-row:last-child { margin-bottom: 0; }

.ministry-label {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.ministry-track {
  height: 16px;
  background: var(--hover);
  border-radius: 4px;
  overflow: hidden;
}

.ministry-fill { height: 100%; background: var(--signal); border-radius: 4px; }

/* The figure must not wrap: "₹19.73 lakh crore" broken across two lines reads
   as two numbers, and the column exists to be scanned down. */
.ministry-amount {
  text-align: right;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  line-height: 1.35;
}

.ministry-share { color: var(--muted); font-size: 11.5px; font-weight: 500; }

/* Spans all three columns so it sits under the bar it qualifies rather than
   pushing the label column wider for every row that has no note. */
.ministry-note {
  grid-column: 1 / -1;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  margin: 5px 0 2px;
}

@media (max-width: 620px) {
  .ministry-row { grid-template-columns: 1fr 124px; }
  .ministry-label { grid-column: 1 / -1; }
}

/* --------------------------------------------------------- price changes */

.prices-section {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 24px 24px 56px;
}

.prices-section .list-heading { margin-bottom: 6px; }
.prices-section .intro-text { margin-bottom: 12px; }

.prices-caveat {
  margin: 0 0 18px;
  padding: 11px 15px;
  /* The token rule is a hairline tuned for 1px borders; at 3px it disappears
     rather than reading as a spine. */
  border-left: 3px solid rgba(26, 28, 28, 0.15);
  background: #fff;
  border-radius: 0 8px 8px 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted-body);
  max-width: 640px;
}

.prices-section .filters { padding: 0 0 16px; max-width: none; }

.price-table {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
}

/* Three columns, not four. The item description is the only thing here a
   reader is actually scanning, so it gets the room the repeated "why" column
   was wasting. */
.price-head,
.price-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px 104px;
  gap: 16px;
  align-items: baseline;
}

.price-head {
  padding: 11px 20px 11px 34px;
  background: var(--flat-bg);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* Rows are separated, not boxed. A hairline this light reads as "next item in
   the list"; the heavier rule above a group heading reads as "new section".
   When both were 1px of the same colour, a heading looked like another row. */
.price-row {
  padding: 13px 20px 13px 34px;
  border-top: 1px solid var(--hairline);
}
.price-row:hover { background: var(--hover); }

.price-item {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.5;
}

.price-duty {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--muted-body);
  line-height: 1.5;
}

.price-dir {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 5px;
  white-space: nowrap;
}
.price-dir.cheaper  { background: var(--up-bg);   color: var(--up-fg); }
.price-dir.costlier { background: var(--down-bg); color: var(--down-fg); }
/* A row the government moved but a buyer will not feel. It has to sit in the
   same column as the other two — a reader searching for silicon needs to find
   it and be told nothing changed — and it must not read as either of them. */
.price-dir.unchanged { background: var(--flat-bg); color: var(--flat-fg); }

/* The schedule's own headings, carrying the reason once for the rows beneath
   rather than on every one of them. */
.price-group {
  padding: 15px 20px 13px 34px;
  border-top: 2px solid var(--rule);
  background: var(--flat-bg);
  position: relative;
}
.price-group:first-child { border-top: none; }

/* A gold spine down the heading, continued as an indent on the rows it owns,
   so the eye can see where a group starts and stops without reading. */
.price-group::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 15px;
  bottom: 13px;
  width: 3px;
  border-radius: 2px;
  background: var(--signal);
}

/* The first row under a heading needs no divider — the heading already ended. */
.price-group + .price-row { border-top: none; }

.price-group-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.price-group-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}

.price-group-count {
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
}

.price-group-reason {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted-body);
  margin-top: 4px;
  max-width: 620px;
}

.price-cite { font-size: 11px; color: var(--muted); margin-top: 5px; }

/* Below this the three columns stop fitting: a 224-character item description
   next to two narrow columns leaves the description a few words wide. */
@media (max-width: 700px) {
  .price-head { display: none; }

  .price-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    padding: 13px 16px 13px 28px;
  }

  .price-item { grid-column: 1; }
  .price-dir-cell { grid-column: 2; grid-row: 1; justify-self: end; }
  .price-duty { grid-column: 1 / -1; }

  .price-group { padding: 14px 16px 12px 28px; }
  .price-group::before { left: 16px; }
}

.price-reaches {
  display: inline-block;
  margin-left: 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--warn-bg);
  color: var(--warn-fg);
  vertical-align: 1px;
  white-space: nowrap;
}

.price-ref {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.45;
}

/* The sentence under an item that has no rate to show: what the measure
   actually does, or the date it starts. Set darker than the filing reference
   above — this is the substance of the row, not its footnote. */
.price-note {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted-body);
  margin-top: 5px;
  line-height: 1.5;
  max-width: 60ch;
}

/* --------------------------------------------------------------- personas */

/* Sits under the tabs, inside the sticky header, because it applies to all of
   them. Set quieter than the tab row it hangs off: this is a refinement of what
   you are looking at, not a change of what you are looking at. */
.persona-bar {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 10px 24px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  border-top: 1px solid var(--rule);
}

.persona-prompt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* Allowed to share the line with the prompt and wrap internally. Left as a
   plain flex item it wraps whole, which orphans "Show me what affects:" on a
   line of its own the moment the chips are a few pixels too wide. */
.persona-options {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
}

/* Outlined rather than filled, so a persona chip is never mistaken for the
   selected tab above it or the selected category below it. */
.persona {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--rule);
  background: #fff;
  color: var(--pill-ink);
  cursor: pointer;
}
.persona:hover { border-color: var(--accent); color: var(--ink); }
.persona[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.persona:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* What the filter is actually doing, spelled out. A count per tab, because the
   question it answers is "is there anything for me on the others". Boxed in the
   warning tint rather than set as plain text: it is the one thing on the page
   saying you are not looking at all of the budget. */
/* Sized to the shell minus its gutter, so the box's edges line up with the
   content of every section below it rather than with the header's outer edge. */
.persona-active {
  max-width: calc(var(--shell) - 48px);
  margin: 0 auto 12px;
  padding: 9px 14px;
  background: var(--warn-bg);
  border-radius: 8px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.persona-active-text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--warn-fg);
}
.persona-active-text strong { font-weight: 700; }

.persona-clear {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 0;
  border: none;
  background: none;
  color: var(--warn-fg);
  text-decoration: underline;
  cursor: pointer;
}
.persona-clear:hover { color: var(--ink); }
.persona-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 620px) {
  .persona-bar { padding: 10px 16px 12px; }
  .persona-active { max-width: calc(100% - 32px); }
}

/* -------------------------------------------------------------- deadlines */

.deadlines-section {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 28px 24px 56px;
}

.deadline-table {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
}

.deadline-head,
.deadline-row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) 150px 110px minmax(0, 1.6fr);
  gap: 16px;
  align-items: baseline;
}

.deadline-head {
  padding: 11px 20px;
  background: var(--flat-bg);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.deadline-row {
  padding: 15px 20px;
  border-top: 1px solid var(--hairline);
}
.deadline-row:hover { background: var(--hover); }

.deadline-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.45;
}

.deadline-source { font-size: 11px; color: var(--muted); margin-top: 4px; }

/* A date is words as much as digits, so it keeps proportional numerals while the
   figure columns take tabular ones — "2 February 2026" on a fixed-width grid
   comes out stretched into three separate things to read. */
.deadline-when { line-height: 1.5; font-variant-numeric: normal; }

/* The date it replaced, where the document states one — struck through as well
   as arrowed, so the pair reads as one change rather than as two dates to keep
   track of. */
.deadline-old {
  font-size: 12px;
  color: var(--muted);
  text-decoration: line-through;
}

.deadline-arrow { font-size: 12px; color: var(--muted); line-height: 1; }

.deadline-new { font-size: 13.5px; font-weight: 600; color: var(--ink); }

.deadline-status {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 5px;
  white-space: nowrap;
  background: var(--flat-bg);
  color: var(--flat-fg);
}
/* More time is good news, less time is not, and a date merely starting is
   neither — the same three-state palette the deltas use. */
.deadline-status.extended,
.deadline-status.continued,
.deadline-status.window   { background: var(--up-bg);   color: var(--up-fg); }
/* This palette has one adverse hue where the old one had two, so a closing
   window and a date merely starting would come out the same orange. The ring
   keeps them apart: outlined is a date running out, plain tint is one arriving. */
.deadline-status.expiring,
.deadline-status.apply_by {
  background: var(--down-bg);
  color: var(--down-fg);
  box-shadow: inset 0 0 0 1px rgba(238, 73, 0, 0.35);
}
.deadline-status.effective { background: var(--warn-bg); color: var(--warn-fg); }

.deadline-note {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted-body);
}

/* ------------------------------------------------------- source evidence */

/* Deliberately quiet. The evidence is there for the reader who doubts a claim,
   and a badge loud enough to be noticed by everyone else would read as the site
   congratulating itself on having done its job. */
.verified {
  margin-top: 8px;
}

.verified-mark {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}

.verified-mark::-webkit-details-marker { display: none; }

.verified-mark::before {
  content: "✓";
  color: var(--accent);
  font-size: 10.5px;
}

.verified-mark.corrected::before {
  content: "±";
  color: var(--signal);
}

.verified-mark:hover { color: var(--ink); }

.verified[open] .verified-mark { margin-bottom: 6px; }

.verified-quote {
  margin: 0;
  padding-left: 10px;
  border-left: 2px solid var(--rule);
  font-size: 12px;
  line-height: 1.6;
  color: var(--body);
}

.verified-cite {
  display: block;
  margin-top: 4px;
  padding-left: 12px;
  font-size: 11px;
  font-style: normal;
  color: var(--muted);
}

@media (max-width: 780px) {
  .deadline-head { display: none; }

  .deadline-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
    padding: 15px 16px;
  }

  .deadline-what { grid-column: 1; }
  .deadline-row > div:nth-child(3) { grid-column: 2; grid-row: 1; justify-self: end; }
  .deadline-when { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px;
                   flex-wrap: wrap; }
  .deadline-note { grid-column: 1 / -1; }
}