/* The page "Procurement in Kazakhstan in figures" (/xx/kazakhstan/), alternative A, approved on 28 October 2026 (review/redesign/pages/).
   After an Our World in Data topic page (ourworldindata.org/government-spending): a title band, a list of the sections on the page,
   then one numbered section per figure, each with its chart in a panel that carries the unit, the table, the note and the sources.
   Charts by web/charts.js; the closing band is web/pages/closing.css.
   Header, footer, phone survey bar and reveal safety: web/site.css and web/site.js. Colours only from tokens.css. */
/* ---------- 1. Title band on ink: the title, the reason, the three headline figures and their note ---------- */
.kz-top { padding: var(--cap-space-8) 0 var(--cap-space-7); }
.kicker { display: flex; align-items: center; gap: 12px; font: var(--cap-text-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cap-gold); }
.kicker::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--cap-gold); }
.kz-top h1 { margin-top: 20px; font: var(--cap-text-display); color: var(--cap-white); max-width: 16em; text-wrap: balance; }
.kz-lede { margin-top: var(--cap-space-4); max-width: 40em; color: var(--cap-ink-10); text-wrap: pretty; }
.kz-facts { margin: var(--cap-space-7) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--cap-space-5); }
.kz-fact { position: relative; margin: 0; padding-top: var(--cap-space-5); }
.kz-fact::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--cap-ink-60); transform-origin: 0 50%; }
.kz-fact::after { content: ""; position: absolute; top: -4px; left: 0; width: 9px; height: 9px; background: var(--cap-gold); }
.kz-fact dt { font: var(--cap-text-display); color: var(--cap-white); font-variant-numeric: lining-nums; white-space: nowrap; }
.kz-fact dd { margin: var(--cap-space-3) 0 0; font: var(--cap-text-small); color: var(--cap-ink-10); max-width: 22em; }
.kz-basis { margin-top: var(--cap-space-6); padding-top: var(--cap-space-5); border-top: 1px solid var(--cap-ink-80); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--cap-space-8); }
.kz-note { font: var(--cap-text-small); color: var(--cap-ink-10); max-width: 46em; text-wrap: pretty; }
.src-label { font: var(--cap-text-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cap-slate); }
.cap-dark .src-label { color: var(--cap-ink-20); }
.src-list { list-style: none; margin: var(--cap-space-1) 0 0; padding: 0; display: flex; flex-direction: column; }
.src-list a { display: inline-flex; align-items: center; min-height: 44px; font: var(--cap-text-small); text-wrap: balance; }

@media (prefers-reduced-motion: no-preference) {
  .kz-top .kicker, .kz-top h1, .kz-lede, .kz-fact, .kz-basis { animation: rise 520ms var(--ease-out) both; }
  .kz-top .kicker { animation-delay: 200ms; }
  .kz-top h1 { animation-delay: 260ms; }
  .kz-lede { animation-delay: 340ms; }
  .kz-fact:nth-child(1) { animation-delay: 520ms; }
  .kz-fact:nth-child(2) { animation-delay: 600ms; }
  .kz-fact:nth-child(3) { animation-delay: 680ms; }
  .kz-fact::before { animation: draw-x 700ms var(--ease-out) both; }
  .kz-fact:nth-child(1)::before { animation-delay: 560ms; }
  .kz-fact:nth-child(2)::before { animation-delay: 640ms; }
  .kz-fact:nth-child(3)::before { animation-delay: 720ms; }
  .kz-basis { animation-delay: 860ms; }
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes draw-x { from { transform: scaleX(0); } to { transform: none; } }

/* ---------- 2. On this page: the sections, as the topic page's section list ---------- */
.kz-toc { background: var(--cap-light); padding: var(--cap-space-7) 0; }
.toc-box { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--cap-space-8); align-items: start; }
.toc-head { font: var(--cap-text-h3); color: var(--cap-ink); }
.toc-lede { margin-top: var(--cap-space-2); font: var(--cap-text-small); color: var(--cap-slate); max-width: 24em; }
.toc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--cap-space-6); }
.toc-list li { border-top: 1px solid var(--cap-ink-20); }
.toc-list a { display: grid; grid-template-columns: 28px minmax(0, 1fr) 16px; column-gap: var(--cap-space-3); align-items: start; min-height: 44px; padding: 12px 0; font: 600 15px/22px var(--cap-font-sans); text-wrap: pretty; }
.toc-list a { text-decoration: none; }
.toc-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
.toc-list a:hover .toc-t, .toc-list a:focus-visible .toc-t { text-decoration-thickness: 2px; }
.toc-n { font-variant-numeric: tabular-nums; color: var(--cap-slate); }
.toc-list svg { margin-top: 3px; color: var(--cap-turquoise-deep); transition: transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .toc-list a:hover svg { transform: translateY(2px); } }

/* ---------- 3. One section per figure: number and claim on the left, the chart panel on the right ---------- */
.fig-sec { padding: var(--cap-space-8) 0; }
.fig-sec + .fig-sec > .cap-container::before, .blk-src + .blk-src .fig-sec > .cap-container::before { content: ""; display: block; height: 1px; background: var(--cap-ink-20); margin-bottom: var(--cap-space-8); grid-column: 1 / -1; }
.fig-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--cap-space-8); align-items: start; }
.fig-num { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 2px solid var(--cap-ink); font: var(--cap-text-small); font-weight: 700; line-height: 1; color: var(--cap-ink); font-variant-numeric: tabular-nums; }
.fig-head h2 { margin-top: var(--cap-space-4); font: var(--cap-text-h2); color: var(--cap-ink); text-wrap: pretty; }
.fig-panel { margin: 0; padding: var(--cap-space-6); background: var(--cap-light); --cap-cut: 24px; min-width: 0; }
.fig-unit { font: var(--cap-text-small); font-weight: 600; color: var(--cap-ink); margin-bottom: var(--cap-space-5); }
.fig-foot { margin-top: var(--cap-space-5); padding-top: var(--cap-space-4); border-top: 1px solid var(--cap-ink-20); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--cap-space-6); }
.fig-note { font: var(--cap-text-small); color: var(--cap-slate); text-wrap: pretty; }
.fig-foot .src-list { margin-top: 2px; }
.fig-foot--one { grid-template-columns: minmax(0, 1fr); }

/* Charts, drawn by /charts.js (as on the home page and the long survey page) */
.chart { position: relative; min-height: 120px; }
.chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
/* Figure 2 in the editorial layout of the approved home page (web/home.css .b3-plot): gridlines, axis break after 2017 */
.chart[data-layout="editorial"] { --chart-h: 260px; --chart-bar: 44px; min-height: var(--chart-h); }
.chart[data-layout="editorial"] .chart-tick { font-weight: 600; }
.chart-label { font: 600 15px/1 var(--cap-font-sans); }
.chart-value { font: 700 17px/1 var(--cap-font-sans); font-variant-numeric: tabular-nums; }
.chart-tick { font: 500 13px/1 var(--cap-font-sans); font-variant-numeric: tabular-nums; }
.chart-hit { cursor: default; outline: none; }
.chart-hit:focus-visible { stroke: var(--cap-turquoise-deep); stroke-width: 2; }
.chart-mark { transition: opacity 160ms ease; }
.chart-mark.is-hot { opacity: 0.82; }
@media (prefers-reduced-motion: no-preference) {
  .chart-mark { transform-box: fill-box; transition: transform 900ms var(--ease-out), opacity 160ms ease; }
  .chart-mark[data-dir="x"] { transform-origin: 0 50%; transform: scaleX(0); }
  .chart-mark[data-dir="y"] { transform-origin: 50% 100%; transform: scaleY(0); }
  .chart-svg .chart-value { opacity: 0; transition: opacity 400ms ease 500ms; }
  .chart-svg.is-in .chart-mark { transform: none; }
  .chart-svg.is-in .chart-value { opacity: 1; }
  .chart-svg.is-in .chart-mark { transition-delay: calc(var(--i, 0) * 120ms), 0ms; }
}
.chart-tip { position: absolute; top: 0; left: 0; z-index: 60; pointer-events: none; background: var(--cap-ink); color: var(--cap-white); padding: 8px 12px 9px; max-width: 280px; }
.chart-tip strong { display: block; font: 700 17px/1.2 var(--cap-font-sans); font-variant-numeric: tabular-nums; }
.chart-tip span { display: block; margin-top: 2px; font: 500 13px/1.35 var(--cap-font-sans); color: var(--cap-ink-20); }
.chart-tip[hidden] { display: none; }
:lang(kk) .chart-tip strong, :lang(kk) .chart-value { font-weight: 600; }
.fig-table { margin-top: var(--cap-space-3); }
.fig-table summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font: var(--cap-text-small); font-weight: 600; color: var(--cap-turquoise-deep); }
.fig-table .cap-table-wrap { margin-top: var(--cap-space-2); }
.fig-table .cap-table { width: 100%; background: var(--cap-white); }
.fig-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cap-table thead th { padding: 8px 12px; }
.cap-table tbody th { background: none; color: var(--cap-ink); font-weight: 500; padding: 8px 12px; border-bottom: 1px solid var(--cap-ink-20); }
.cap-table td { padding: 8px 12px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.cap-table th[scope="col"]:last-child { text-align: right; }
html:not(.has-charts) .fig-table { margin-top: 0; }
html:not(.has-charts) .chart { display: none; }

/* Figure 4: two figures from Samruk-Kazyna, each with a small drawing of its scale */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cap-space-6); }
.stat-value { font: var(--cap-text-display); color: var(--cap-ink); font-variant-numeric: lining-nums; }
.stat-label { margin-top: var(--cap-space-2); font: var(--cap-text-small); color: var(--cap-ink); max-width: 22em; }
.mini { list-style: none; margin: var(--cap-space-4) 0 0; padding: 0; display: grid; row-gap: 8px; }
.mini li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 10px; align-items: center; font: 600 13px/16px var(--cap-font-sans); color: var(--cap-slate); font-variant-numeric: tabular-nums; }
/* Each bar on a 0 to 4 scale (--f is the share of the track), its value printed at the end */
.mini b { display: flex; align-items: center; gap: 8px; min-width: 0; font: 700 15px/1 var(--cap-font-sans); color: var(--cap-ink); }
.mini i { display: block; flex: none; height: 22px; width: calc((100% - 48px) * var(--f)); background: var(--cap-ink); transform-origin: 0 50%; }
.mini .is-accent i { background: var(--cap-turquoise); }
.meter { display: block; height: 22px; margin-top: var(--cap-space-4); background: var(--cap-turquoise-30); border: 1px solid var(--cap-ink-60); }
.meter i { display: block; height: 100%; width: 85%; background: var(--cap-turquoise); transform-origin: 0 50%; }
@media (prefers-reduced-motion: no-preference) {
  .js-reveal [data-block]:not(.is-in) .mini i, .js-reveal [data-block]:not(.is-in) .meter i { transform: scaleX(0); }
  [data-block].is-in .mini i, [data-block].is-in .meter i { animation: draw-x 900ms var(--ease-out) both; }
  [data-block].is-in .mini li:nth-child(1) i { animation-delay: 300ms; }
  [data-block].is-in .mini li:nth-child(2) i { animation-delay: 420ms; }
  [data-block].is-in .meter i { animation-delay: 360ms; }
}

/* ---------- 4. The 2025 rules: the complaint deadlines and the advance as figures, the full answer below them ---------- */
.rules-figs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--cap-space-5); }
.rules-figs li { border-top: 2px solid var(--cap-ink); padding-top: var(--cap-space-4); }
.rules-figs li.is-accent { border-top-color: var(--cap-turquoise); }
.rf-n { font: var(--cap-text-display); color: var(--cap-ink); font-variant-numeric: lining-nums; }
.rf-u { margin-top: var(--cap-space-1); font: var(--cap-text-small); font-weight: 700; color: var(--cap-ink); }
.rf-l { margin-top: var(--cap-space-2); font: var(--cap-text-small); color: var(--cap-slate); text-wrap: pretty; }
.rules-text { margin-top: var(--cap-space-6); font: var(--cap-text-body); color: var(--cap-ink); text-wrap: pretty; max-width: 40em; }

/* ---------- Entry of each section: once, when it enters the viewport (the observer only adds .is-in) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal [data-block]:not(.is-in) .rv { opacity: 0; }
  [data-block].is-in .rv { animation: rise 560ms var(--ease-out) both; }
  [data-block].is-in .rv:nth-child(2) { animation-delay: 90ms; }
  [data-block].is-in .rv:nth-child(3) { animation-delay: 180ms; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
  .kz-basis { grid-template-columns: minmax(0, 1fr); row-gap: var(--cap-space-5); }
  .toc-box, .fig-row { grid-template-columns: minmax(0, 1fr); row-gap: var(--cap-space-5); }
  .toc-list { grid-template-columns: minmax(0, 1fr); }
  .fig-head h2 { max-width: 30em; }
}

/* ---------- Phone ---------- */
@media (max-width: 767px) {
  .kz-top { padding: var(--cap-space-6) 0 var(--cap-space-6); }
  .kz-top h1 { margin-top: var(--cap-space-3); }
  .kz-lede { margin-top: var(--cap-space-3); }
  .kz-facts { grid-template-columns: minmax(0, 1fr); row-gap: var(--cap-space-5); margin-top: var(--cap-space-6); }
  .kz-fact { padding-top: var(--cap-space-4); }
  .kz-fact dd { max-width: none; margin-top: var(--cap-space-2); }
  .kz-basis { margin-top: var(--cap-space-5); }
  .kz-toc { padding: var(--cap-space-6) 0; }
  .fig-sec { padding: var(--cap-space-7) 0; }
  .fig-sec + .fig-sec > .cap-container::before, .blk-src + .blk-src .fig-sec > .cap-container::before { margin-bottom: var(--cap-space-7); }
  .fig-row { row-gap: var(--cap-space-4); }
  .fig-sec + .fig-sec, .blk-src + .blk-src .fig-sec { padding-top: 0; }
  .chart[data-layout="editorial"] { --chart-h: 230px; --chart-bar: 36px; }
  .fig-head { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: var(--cap-space-3); align-items: start; }
  .fig-num { width: 32px; height: 32px; margin-top: 0; }
  .fig-head h2 { margin-top: 0; }
  .fig-panel { margin: 0 -16px; padding: var(--cap-space-5) var(--cap-space-4); --cap-cut: 16px; }
  .fig-foot { grid-template-columns: minmax(0, 1fr); row-gap: var(--cap-space-3); }
  .stats { grid-template-columns: minmax(0, 1fr); gap: var(--cap-space-5); }
  .rules-figs { grid-template-columns: minmax(0, 1fr); row-gap: var(--cap-space-4); }
  .rules-figs li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--cap-space-4); align-items: baseline; }
  .rules-figs .rf-l { grid-column: 1 / -1; }
  .rules-text { margin-top: var(--cap-space-5); }
}

/* Reduced motion: nothing moves, no animations and no transitions */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Russian and Kazakh: a long word in a section title (Квазигосударственные) breaks with a hyphen in the narrow column of 1024 to 1199 px */
.fig-head h2 { hyphens: manual; overflow-wrap: break-word; text-wrap: balance; }