/* AI Use and Occupations on the site's own pages (27 Oct 2026). /css/site.css sets the bar, the
   page grid, the side column, type, figures and tables, exactly as on the post pages. This file
   adds only what the post pages do not have: the data tools (controls, charts, tabs, the
   observation dialog), in the same tokens. Data colours are the project's, as before. */

[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.aiu {
  --region-europe: #315ca3; --region-asia: #ae5429; --region-americas: #227968;
  --region-africa: #865092; --region-oceania: #896e19;
  --bar-1: #315ca3; --bar-2: #227968; --track: var(--grey-100);
}

/* ---------------------------------------------------------------- side column and head */

/* the project's pages: one per line on hairlines, as the contents are; the page you are on keeps its line dark */
.aiu-menu a { padding: 6px 0; }
/* the pages and the contents stay in view together while reading (his request, 27 Oct 2026). When both
   do not fit the window, the pages and the "Contents" heading stay whole and only the list of contents
   scrolls inside, following the section being read (app.js, followContents) */
@media (min-width: 1100px) {
  .aiu .side__contents { position: sticky; top: calc(var(--bar) + 2rem); align-self: start; max-height: calc(100vh - var(--bar) - 3rem); overflow: visible; }
  .aiu .side__contents > .side__block { flex: none; }
  .aiu .side__contents > nav[aria-labelledby="contents-title"] { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .aiu .side__contents > nav[aria-labelledby="contents-title"] > .toc { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .aiu .side .toc a { padding: 8px 0; }
}
.aiu-meta { margin: 0.2rem 0 0; color: var(--ink-3); font: 400 var(--fs-meta)/1.3 var(--sans); letter-spacing: 0.01em; }
.aiu .details dd a, .aiu .head-meta dd a { text-decoration: underline; text-decoration-thickness: var(--hair); text-decoration-color: var(--line-strong); text-underline-offset: 0.2em; }
.aiu .head-meta { grid-template-columns: minmax(0, 1fr); }
.aiu-context { display: flex; flex-direction: column; gap: 0.35rem; margin: 0.9rem 0 0; padding: 0; list-style: none; }
.aiu-context a { color: var(--ink-2); font: 400 var(--fs-meta)/1.3 var(--sans); letter-spacing: 0.01em; text-decoration: underline; text-decoration-thickness: var(--hair); text-decoration-color: var(--line-strong); text-underline-offset: 0.25em; }
.aiu-context a:hover { color: var(--ink); }
.contents-inline .aiu-context { margin: 0.2rem 0 0.8rem; }
.aiu .date a { text-decoration: underline; text-decoration-thickness: var(--hair); text-decoration-color: var(--line-strong); text-underline-offset: 0.25em; }
.aiu .contents-inline + .contents-inline { margin-top: 0; border-top: 0; }

/* ---------------------------------------------------------------- the essay body */

.aiu-essay ul:not(.links):not(.aiu-groups), .aiu-essay ol:not(.toc) { padding-left: 1.25rem; }
.aiu-essay li { margin-bottom: 0.45em; }
.aiu-essay li::marker { color: var(--ink-3); }
.aiu-essay .links li { margin-bottom: 0; }
.aiu-essay .links { margin: 0 0 1.375em; }
.aiu-essay h3 { margin-top: 1.6em; }
.aiu-note { color: var(--ink-2); }
.aiu-paper-title { font: 400 var(--fs-h3)/1.3 var(--serif); letter-spacing: -0.01em; }
.glossary-link { text-decoration-style: dotted !important; }

/* findings under hairlines: the term in the serif, its account in grey */
.aiu-points { margin: 0 0 1.375em; }
.aiu-points > div { padding: calc(var(--u) * 0.5) 0 calc(var(--u) * 0.55); border-top: var(--hair) solid var(--line); }
.aiu-points > div:last-child { border-bottom: var(--hair) solid var(--line); }
.aiu-points dt { font: 400 var(--fs-h3)/1.25 var(--serif); letter-spacing: -0.01em; }
.aiu-points dd { margin: 0.25rem 0 0; color: var(--ink-2); }

/* the five ways into the datasets */
.aiu-groups { margin: calc(var(--u) * 0.6) 0 1.375em; padding: 0; list-style: none; }
.aiu-groups > li { margin: 0; padding: calc(var(--u) * 0.55) 0 calc(var(--u) * 0.6); border-top: var(--hair) solid var(--line); }
.aiu-groups > li:last-child { border-bottom: var(--hair) solid var(--line); }
.aiu-groups h3 { margin: 0 0 0.3rem; font: 400 var(--fs-h3)/1.25 var(--serif); letter-spacing: -0.01em; }
.aiu-groups p { margin: 0 0 0.55rem; color: var(--ink-2); }
.aiu-groups .links { margin: 0; }


/* ---------------------------------------------------------------- figures */

/* the text column's paragraph spacing must not reach the figure's own lines */
.aiu-figure > .kicker { margin: 0 0 0.45rem; }
.aiu-figure > .figure__title { margin: 0 0 0.3rem; }
.aiu-figure > .figure__subtitle { margin: 0 0 calc(var(--u) * 0.5); }
.aiu-figure > .aiu-ratio { margin-bottom: 0; }
.aiu .figure__notes strong { font-weight: 500; }
.aiu-scale { margin: 0 0 0.6rem; color: var(--ink-3); font: 400 var(--fs-meta)/1.3 var(--sans); letter-spacing: 0.01em; }

/* bars with their value, on one scale */
.aiu-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.3rem 1rem; margin: 0 0 0.75rem; }
.aiu-bar > span { color: var(--ink-2); font: 400 var(--fs-small)/1.35 var(--sans); letter-spacing: 0.01em; }
.aiu-bar > strong { font: 500 var(--fs-small)/1.35 var(--sans); font-variant-numeric: tabular-nums; }
.aiu-track { grid-column: 1 / -1; height: 0.5rem; background: var(--track); }
.aiu-track > span { display: block; height: 100%; background: var(--bar-1); }
.aiu-track--alt > span { background: var(--bar-2); }

.aiu-ratio { display: flex; align-items: baseline; gap: 0.9rem; margin: calc(var(--u) * 0.6) 0 0; }
.aiu-ratio strong { font: 400 var(--fs-title)/1 var(--serif); letter-spacing: -0.01em; white-space: nowrap; }
.aiu-ratio span { color: var(--ink-2); font: 400 var(--fs-small)/1.35 var(--sans); letter-spacing: 0.01em; }

/* the published total and where it goes */
.aiu-accounting__source { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.8rem 1rem; background: var(--cat-surface); border: var(--hair) solid var(--cat-line); }
.aiu-accounting__source span { font: 400 var(--fs-small)/1.35 var(--sans); letter-spacing: 0.01em; }
.aiu-accounting__source strong, .aiu-accounting__parts strong { font: 400 var(--fs-h2)/1.1 var(--serif); letter-spacing: -0.01em; }
.aiu-accounting__parts { display: grid; grid-template-columns: minmax(0, 1fr) 1.5rem minmax(0, 1fr); align-items: center; gap: 0.75rem; padding: 0.8rem 1rem; background: var(--surface-2); border: var(--hair) solid var(--line); border-top: 0; }
.aiu-accounting__parts div { display: flex; flex-direction: column; gap: 0.25rem; }
.aiu-accounting__parts div span { color: var(--ink-2); font: 400 var(--fs-meta)/1.35 var(--sans); letter-spacing: 0.01em; }
.aiu-plus { color: var(--ink-3); font: 400 1.25rem/1 var(--sans); text-align: center; }

/* ---------------------------------------------------------------- controls and actions */

.aiu-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 0.6) var(--u); margin: 0; }
.aiu-controls--figure { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); margin-bottom: calc(var(--u) * 0.6); }
.control label, .chart-selection label { display: block; margin: 0 0 0.35rem; color: var(--ink-2); font: 400 var(--fs-meta)/1.3 var(--sans); letter-spacing: 0.01em; }
.aiu select, .aiu input[type="search"] {
  width: 100%; min-width: 0; padding: 0.5rem 0.6rem;
  border: 1px solid var(--line-strong); border-radius: 0; background: var(--surface); color: var(--ink);
  font: 400 var(--fs-small)/1.3 var(--sans); letter-spacing: 0.01em;
}
.aiu select:focus-visible, .aiu input:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.aiu-control-note { margin: calc(var(--u) * 0.6) 0 0; color: var(--ink-2); font: 400 var(--fs-meta)/1.45 var(--sans); letter-spacing: 0.01em; }
.aiu-control-note a { text-decoration: underline; text-decoration-thickness: var(--hair); text-underline-offset: 0.2em; }
.aiu-control-note .button { margin-left: 0.6rem; font-size: var(--fs-meta); }

/* every action is a quiet text link; there are no framed buttons on the site */
.aiu .button {
  padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer;
  font: 400 var(--fs-small)/1.3 var(--sans); letter-spacing: 0.01em;
  text-decoration: underline; text-decoration-thickness: var(--hair); text-decoration-color: var(--line-strong); text-underline-offset: 0.3em;
}
.aiu .button:hover { text-decoration-color: currentColor; }
.aiu .button:disabled { opacity: 0.4; cursor: default; text-decoration: none; }
.aiu .table-link {
  padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; text-align: left;
  font: inherit; text-decoration: underline; text-decoration-thickness: var(--hair); text-decoration-color: var(--line-strong); text-underline-offset: 0.2em;
}
.aiu .table-link:hover { text-decoration-color: currentColor; }

/* ---------------------------------------------------------------- the country results */

.aiu-results { margin-top: calc(var(--u) * 1.2); padding-top: calc(var(--u) * 0.6); border-top: var(--hair) solid var(--line); }
.aiu-results__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.aiu-results__head .figure__title { margin: 0; }
.aiu-results__head .figure__subtitle { margin: 0.15rem 0 0; }

.aiu-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--u); margin: calc(var(--u) * 0.75) 0; }
.aiu-stats strong { display: block; font: 400 var(--fs-h2)/1.1 var(--serif); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.aiu-stats span { display: block; margin-top: 0.25rem; color: var(--ink-2); font: 400 var(--fs-meta)/1.35 var(--sans); letter-spacing: 0.01em; }
.aiu-stats p { margin: 0; color: var(--ink-2); }
.aiu .context { margin: 0 0 var(--u); padding: 0.15rem 0 0.15rem 1rem; border-left: 2px solid var(--cat); color: var(--ink-2); font: 400 0.9375rem/1.5 var(--serif); }
.aiu .context a { text-decoration: underline; text-decoration-thickness: var(--hair); text-underline-offset: 0.2em; }

/* views as text tabs: the one shown is underlined */
.aiu-tabs { display: flex; flex-wrap: wrap; gap: 0 1.4rem; border-bottom: var(--hair) solid var(--line); }
.aiu-tabs [role="tab"] {
  margin-bottom: -1px; padding: 0.6rem 0; border: 0; border-bottom: 1px solid transparent; background: none; cursor: pointer;
  color: var(--ink-2); font: 400 var(--fs-small)/1.3 var(--sans); letter-spacing: 0.01em;
}
.aiu-tabs [role="tab"]:hover { color: var(--ink); }
.aiu-tabs [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }

.aiu-toolbar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 1.25rem; margin: calc(var(--u) * 0.6) 0; }
.aiu-toolbar .buttons { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; }
.aiu .subtle { color: var(--ink-2); font: 400 var(--fs-meta)/1.4 var(--sans); letter-spacing: 0.01em; }

/* the occupation chart: name, bar and share on one line, names as links to the observation */
.bar-list { margin: calc(var(--u) * 0.4) 0 calc(var(--u) * 0.6); }
.bar-row { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr) 3.75rem; gap: 0.9rem; align-items: center; padding: 0.32rem 0; }
.bar-row > span:first-child, .bar-row .table-link { font: 400 var(--fs-small)/1.35 var(--sans); letter-spacing: 0.01em; }
.bar-track { height: 0.6rem; background: var(--track); }
.bar-fill { height: 100%; min-width: 1px; background: var(--bar-1); }
.bar-value { text-align: right; font: 400 var(--fs-small)/1.3 var(--sans); font-variant-numeric: tabular-nums; }

.aiu .table-wrap + .table-scroll-hint, .table-scroll-hint { margin: 0.4rem 0 0; color: var(--ink-3); font: 400 var(--fs-meta)/1.3 var(--sans); letter-spacing: 0.01em; }
.aiu .table td.numeric, .aiu .table th.numeric { text-align: right; }
.aiu .table td.numeric { white-space: nowrap; }
.aiu .table th { vertical-align: bottom; }
.aiu .table .code-cell { white-space: nowrap; }
.aiu .table caption.sr-only { padding: 0; }
.status-pill { display: inline-block; padding: 0.05rem 0.4rem; border: var(--hair) solid var(--line); color: var(--ink-2); font: 400 0.75rem/1.4 var(--sans); letter-spacing: 0.01em; white-space: nowrap; }
.pagination { display: flex; align-items: baseline; gap: 1rem; margin: 0.75rem 0 0; color: var(--ink-2); font: 400 var(--fs-small)/1.3 var(--sans); }

#support-panel { padding-top: calc(var(--u) * 0.4); }
#support-panel h3 { margin: calc(var(--u) * 0.6) 0 0.3rem; font: 400 var(--fs-h3)/1.25 var(--serif); letter-spacing: -0.01em; }
#support-panel p { margin: 0 0 0.6rem; }
#support-panel a { text-decoration: underline; text-decoration-thickness: var(--hair); text-decoration-color: var(--line-strong); text-underline-offset: 0.2em; }
.completeness { height: 0.5rem; margin: 0 0 1rem; background: var(--track); }
.completeness > span { display: block; height: 100%; background: var(--bar-1); }

.figure-note { margin: calc(var(--u) * 0.6) 0 0; color: var(--ink-2); font: 400 var(--fs-meta)/1.45 var(--sans); letter-spacing: 0.01em; }
.figure-note a { text-decoration: underline; text-decoration-thickness: var(--hair); text-decoration-color: var(--line-strong); text-underline-offset: 0.2em; }
.region-status { color: var(--ink); }
.status-message { min-height: 1.2em; margin: 0.5rem 0 0; color: var(--ink-2); font: 400 var(--fs-meta)/1.4 var(--sans); letter-spacing: 0.01em; }
.empty { padding: var(--u); border: 1px dashed var(--line-strong); color: var(--ink-2); font: 400 var(--fs-small)/1.45 var(--sans); text-align: center; }
.empty h3 { margin: 0 0 0.35rem; color: var(--ink); font: 400 var(--fs-h3)/1.25 var(--serif); }
.loading { margin: 0; padding: var(--u) 0; color: var(--ink-3); font: 400 var(--fs-small)/1.4 var(--sans); }

/* a table of values under a figure opens like "Show the numbers" on the paper pages */
.aiu-figure details { margin-top: calc(var(--u) * 0.6); }
.aiu-figure details > summary {
  width: max-content; cursor: pointer; color: var(--ink-2);
  font: 400 var(--fs-small)/1.3 var(--sans); letter-spacing: 0.01em;
  text-decoration: underline; text-decoration-thickness: var(--hair); text-underline-offset: 0.3em;
}

/* ---------------------------------------------------------------- the scatter chart */

.region-filter { margin: 0 0 0.5rem; }
.region-filter-label { display: block; margin: 0 0 0.2rem; color: var(--ink-2); font: 400 var(--fs-meta)/1.3 var(--sans); letter-spacing: 0.01em; }
.region-legend { display: flex; flex-wrap: wrap; gap: 0 1.1rem; }
.region-legend button {
  padding: 0.35rem 0; border: 0; background: none; cursor: pointer; color: var(--ink-2);
  font: 400 var(--fs-small)/1.3 var(--sans); letter-spacing: 0.01em;
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: var(--hair); text-underline-offset: 0.3em;
}
.region-legend button:hover { color: var(--ink); text-decoration-color: var(--line-strong); }
.region-legend button[aria-pressed="true"] { color: var(--ink); text-decoration-color: currentColor; }
.region-legend button:disabled { opacity: 0.4; cursor: default; }
.region-legend button i { display: inline-block; width: 0.55rem; height: 0.55rem; margin-right: 0.4rem; border-radius: 50%; background: var(--region-color); vertical-align: 0.02em; }
.region-legend button span { display: inline; }
.region-legend .region-count { display: inline-block; margin-left: 0.3rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.interactive-chart { position: relative; }
.chart-selection { display: flex; align-items: center; gap: 0.75rem; margin: 0.4rem 0 0.2rem; }
.chart-selection label { margin: 0; white-space: nowrap; }
.chart-selection select { max-width: 20rem; }
.chart-axis-label, .chart-x-label { color: var(--ink-2); font: 400 var(--fs-meta)/1.3 var(--sans); letter-spacing: 0.01em; }
.chart-axis-label { margin: 0.9rem 0 0.35rem; }
.chart-x-label { margin-top: 0.15rem; text-align: center; }
.chart-canvas { position: relative; }
.chart-canvas > svg { display: block; max-width: 100%; overflow: visible; }
.chart-grid { stroke: var(--grey-200); stroke-width: 1; }
.chart-axis { stroke: var(--grey-500); }
.chart-diagonal { stroke: var(--grey-500); stroke-dasharray: 4 4; }
.chart-tick { fill: var(--ink-2); font: 400 12px var(--sans); }
.chart-point { cursor: pointer; fill-opacity: 0.8; stroke: #fff; stroke-width: 1; r: 5px; transition: r 0.12s, fill-opacity 0.12s; }
.chart-point.is-selected { r: 8px; fill-opacity: 1; stroke: var(--ink); stroke-width: 2; }
.chart-point[data-group="Europe"] { fill: var(--region-europe); }
.chart-point[data-group="Asia"] { fill: var(--region-asia); }
.chart-point[data-group="Americas"] { fill: var(--region-americas); }
.chart-point[data-group="Africa"] { fill: var(--region-africa); }
.chart-point[data-group="Oceania"] { fill: var(--region-oceania); }
.selected-point-label { fill: var(--ink); stroke: #fff; stroke-width: 4px; paint-order: stroke fill; stroke-linejoin: round; font: 500 13px var(--sans); }
.chart-tooltip, .floating-tooltip {
  position: absolute; z-index: 20; pointer-events: none; min-width: 12rem; max-width: 16rem; padding: 0.55rem 0.7rem;
  background: var(--surface); border: var(--hair) solid var(--line-strong); box-shadow: 0 4px 16px rgba(24, 24, 27, 0.08);
  color: var(--ink); font: 400 var(--fs-meta)/1.4 var(--sans); letter-spacing: 0.01em;
}
.floating-tooltip { position: fixed; }
.chart-tooltip strong, .floating-tooltip strong { display: block; margin-bottom: 0.15rem; font-weight: 500; }
.chart-tooltip dl { display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 0.8rem; margin: 0.3rem 0 0; }
.chart-tooltip dt { color: var(--ink-2); }
.chart-tooltip dd { margin: 0; font-variant-numeric: tabular-nums; }
.chart-keyboard-hint { margin: 0.6rem 0 0; color: var(--ink-3); font: 400 var(--fs-meta)/1.4 var(--sans); letter-spacing: 0.01em; }
.chart-inspector { min-height: 4.5rem; margin-top: 0.6rem; padding-top: 0.6rem; border-top: var(--hair) solid var(--line); color: var(--ink-2); font: 400 var(--fs-meta)/1.4 var(--sans); letter-spacing: 0.01em; }
.chart-inspector strong { color: var(--ink); font: 400 1rem/1.3 var(--serif); }
.chart-inspector p { margin: 0.2rem 0; }
.chart-inspector dl { display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 1rem; margin: 0.35rem 0; }
.chart-inspector dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.chart-inspector > a { font: 400 var(--fs-small)/1.3 var(--sans); text-decoration: underline; text-decoration-thickness: var(--hair); text-underline-offset: 0.3em; }

/* ---------------------------------------------------------------- one observation, opened from the chart or table */

#observation { width: calc(100% - 2rem); max-width: 40rem; max-height: 85vh; padding: calc(var(--u) * 0.9); border: var(--hair) solid var(--line-strong); background: var(--surface); color: var(--ink); }
#observation::backdrop { background: rgba(24, 24, 27, 0.4); }
#observation .close { float: right; }
#observation .eyebrow { margin: 0; color: var(--ink-2); font: 400 var(--fs-meta)/1.3 var(--sans); letter-spacing: 0.01em; }
#observation h2 { margin: 0.35rem 0 0.9rem; font: 400 var(--fs-h2)/1.15 var(--serif); letter-spacing: -0.01em; }
#observation dl { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 0.45rem 1rem; margin: 0 0 0.9rem; }
#observation dt { color: var(--ink-3); font: 400 var(--fs-meta)/1.45 var(--sans); letter-spacing: 0.01em; }
#observation dd { margin: 0; font: 400 0.9375rem/1.4 var(--serif); }
#observation .subtle { margin: 0 0 0.8rem; }
#observation .actions { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; }
#observation .actions a { font: 400 var(--fs-small)/1.3 var(--sans); text-decoration: underline; text-decoration-thickness: var(--hair); text-decoration-color: var(--line-strong); text-underline-offset: 0.3em; }

/* ---------------------------------------------------------------- layouts of controls and sections */

/* the map reads its colour ramp from the root, so the two ends live there */
:root { --map-low: 228 239 244; --map-high: 21 94 138; }

.aiu-controls--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aiu-controls--wide-middle { grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr) minmax(0, 1fr); }
.aiu-controls--search { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.aiu-controls + .aiu-controls { margin-top: calc(var(--u) * 0.6); }
.aiu-actions { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; margin: calc(var(--u) * 0.6) 0; }
.aiu-section { margin-top: calc(var(--u) * 1.4); }
.aiu-section > .prose > h2:first-child { margin-top: 0; }
.aiu-after { margin-top: calc(var(--u) * 0.9); }
.aiu-tool > .context, .aiu-tool > div.context { margin-top: calc(var(--u) * 0.6); }
.aiu .control + .subtle, .aiu-section > .subtle { margin: 0.5rem 0 0.6rem; }

/* a note set beside the reading, as the post pages set a quotation */
.aiu-aside { margin: 0 0 1.375em; padding: 0.15rem 0 0.15rem 1rem; border-left: 2px solid var(--cat); }
.aiu-aside strong { display: block; margin-bottom: 0.25rem; font: 400 var(--fs-h3)/1.25 var(--serif); letter-spacing: -0.01em; }
.prose .aiu-aside p { margin: 0; color: var(--ink-2); }

/* a pointer at the top of the catalogue: the pastel of the bar, as the post pages mark a reading step */
.aiu-callout { margin: 0 0 calc(var(--u) * 0.9); padding: 0.75rem 0.9rem; background: var(--cat-surface); border-left: 2px solid var(--cat-line); }
.aiu-callout p { margin: 0; font: 400 0.9375rem/1.5 var(--serif); }
.aiu-callout a { text-decoration: underline; text-decoration-thickness: var(--hair); text-underline-offset: 0.2em; }

/* ---------------------------------------------------------------- the world view */

.aiu-map { margin-top: calc(var(--u) * 0.9); }
.map-svg { display: block; width: 100%; height: auto; }
.map-country { stroke: #fff; stroke-width: 0.6; cursor: pointer; vector-effect: non-scaling-stroke; }
.map-country:hover { stroke: var(--ink); stroke-width: 1.4; }
.map-svg a:focus-visible { outline: none; }
.map-svg a:focus-visible path { stroke: var(--ink); stroke-width: 2.4; paint-order: stroke fill; }
.map-keyboard-help { margin: 0.7rem 0 0; color: var(--ink-2); font: 400 var(--fs-meta)/1.45 var(--sans); letter-spacing: 0.01em; }
.map-keyboard-help a { text-decoration: underline; text-decoration-thickness: var(--hair); text-underline-offset: 0.2em; }
#map-selection { min-height: 1.4em; margin: 0.25rem 0 0.4rem; }
.aiu-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.9rem; color: var(--ink-2); font: 400 var(--fs-meta)/1.3 var(--sans); letter-spacing: 0.01em; }
.legend-ramp { width: 10rem; height: 0.55rem; background: linear-gradient(to right, rgb(var(--map-low)), rgb(var(--map-high))); }
.aiu-legend i { display: inline-block; width: 0.75rem; height: 0.75rem; margin-right: 0.4rem; vertical-align: -0.1em; border: var(--hair) solid var(--line); }
#map-caption { margin-left: auto; }

/* the directory: one place per line on hairlines, three columns across the text column */
.directory-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--u); margin-top: calc(var(--u) * 0.3); }
.country-link { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding: 0.6rem 0; border-top: var(--hair) solid var(--line); text-decoration: none; }
.country-link strong { display: block; font: 400 1rem/1.3 var(--serif); }
.country-link small { display: block; margin-top: 0.15rem; color: var(--ink-3); font: 400 var(--fs-meta)/1.3 var(--sans); letter-spacing: 0.01em; }
.country-link .mass { color: var(--ink); font: 400 var(--fs-small)/1.3 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.country-link:hover strong { text-decoration: underline; text-decoration-thickness: var(--hair); text-underline-offset: 0.18em; }

/* ---------------------------------------------------------------- results written by the scripts */

.aiu-results > h2, #comparison-chart > h2 { margin: 0 0 0.3rem; font: 400 var(--fs-h3)/1.25 var(--serif); letter-spacing: -0.01em; }
.aiu-results > p, #comparison-chart > p { margin: 0 0 0.6rem; }
.aiu-results > p:not(.subtle):not(.empty):not(.loading) { font: 400 1rem/1.5 var(--serif); }

/* country comparison: each activity with one bar per country, on one scale */
.paired-row { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: 0.4rem var(--u); padding: 0.6rem 0; border-top: var(--hair) solid var(--line); }
.paired-row > .subtle { font: 400 var(--fs-small)/1.35 var(--sans); color: var(--ink); }
.paired-row > div { display: flex; flex-direction: column; gap: 0.35rem; }
.mini-label { display: flex; justify-content: space-between; gap: 1rem; color: var(--ink-2); font: 400 var(--fs-meta)/1.3 var(--sans); letter-spacing: 0.01em; }
.mini-label span:last-child { color: var(--ink); font-variant-numeric: tabular-nums; }
.pair-track { height: 0.5rem; background: var(--track); }
.pair-fill { height: 100%; background: var(--bar-1); }
.pair-fill.alt { background: #287b7b; }
.aiu .table.fixed-columns { table-layout: fixed; }
/* the allocation table: fixed shares of the text column, so names keep their width and nothing runs off the edge */
#allocation-table table { table-layout: fixed; }
#allocation-table :is(th, td):nth-child(1) { width: 7%; }
#allocation-table :is(th, td):nth-child(2) { width: 27%; }
#allocation-table :is(th, td):nth-child(n+3):nth-child(-n+6) { width: 12%; }
#allocation-table :is(th, td):nth-child(7) { width: 18%; }
#allocation-table td { overflow-wrap: break-word; }

/* the crosswalk: links one per line, the relation as a small label */
.crosswalk-link { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) 3.5rem; gap: 0.9rem; align-items: start; padding: 0.6rem 0; border-top: var(--hair) solid var(--line); font: 400 0.9375rem/1.45 var(--serif); }
.crosswalk-link a { text-decoration: underline; text-decoration-thickness: var(--hair); text-decoration-color: var(--line-strong); text-underline-offset: 0.2em; }
.crosswalk-link > span:last-child { color: var(--ink-3); font: 400 var(--fs-meta)/1.4 var(--sans); text-align: right; }
.badge { display: inline-block; padding: 0.05rem 0.4rem; border: var(--hair) solid var(--line); color: var(--ink-2); font: 400 0.75rem/1.4 var(--sans); letter-spacing: 0.01em; white-space: normal; }
#crosswalk-search-results { margin-top: calc(var(--u) * 0.6); }
#crosswalk-search-results > p { margin: 0 0 0.4rem; color: var(--ink-2); font: 400 var(--fs-small)/1.45 var(--sans); }
#crosswalk-search-results summary, .aiu-details > summary {
  width: max-content; cursor: pointer; color: var(--ink-2);
  font: 400 var(--fs-small)/1.3 var(--sans); letter-spacing: 0.01em;
  text-decoration: underline; text-decoration-thickness: var(--hair); text-underline-offset: 0.3em;
}
.crosswalk-search-list { max-height: 16rem; overflow: auto; margin: 0.5rem 0 0; padding: 0; list-style: none; }
.crosswalk-search-list li { padding: 0.4rem 0; border-top: var(--hair) solid var(--line); font: 400 var(--fs-small)/1.35 var(--sans); }
.crosswalk-search-list [aria-current="true"] { font-weight: 500; }

/* ---------------------------------------------------------------- the data catalogue and the datasets */

/* one table per row, as the research list sets one paper per row */
.aiu-entries { margin: calc(var(--u) * 0.3) 0 0; padding: 0; list-style: none; }
.aiu-entries > li { display: flex; flex-direction: column; gap: 0.4rem; padding: calc(var(--u) * 0.7) 0; border-top: var(--hair) solid var(--line); }
.aiu-entries > li:last-child { border-bottom: var(--hair) solid var(--line); }
.aiu-entries__title { margin: 0; font: 400 var(--fs-h3)/1.25 var(--serif); letter-spacing: -0.01em; }
.aiu-entries__title a { text-decoration: none; }
.aiu-entries__title a:hover { text-decoration: underline; text-decoration-thickness: var(--hair); text-underline-offset: 0.18em; }
.aiu-entries__text { margin: 0; color: var(--ink-2); font: 400 1rem/1.5 var(--serif); }
.aiu-entries .links { margin-top: 0.15rem; }

.aiu-details { margin: 0.4rem 0 0.6rem; }
.column-picker { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin: 0.6rem 0 0; padding: 0.7rem 0; border-top: var(--hair) solid var(--line); border-bottom: var(--hair) solid var(--line); }
.column-picker label { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--ink); font: 400 var(--fs-small)/1.3 var(--sans); letter-spacing: 0.01em; }
.column-picker input { accent-color: var(--ink); }
.dataset-preview th small, .aiu .table th small { display: block; margin-top: 0.2rem; color: rgba(255, 255, 255, 0.7); font: 400 0.6875rem/1.3 var(--mono); letter-spacing: 0; }
.dataset-preview { margin-top: 0.6rem; }

/* field definitions: the readable name and variable on the left, the definition beside it */
#field-dictionary dl { margin: calc(var(--u) * 0.4) 0 0; }
.dictionary-entry { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: 0.3rem var(--u); padding: 0.7rem 0; border-top: var(--hair) solid var(--line); }
.dictionary-entry:last-child { border-bottom: var(--hair) solid var(--line); }
.dictionary-entry dt strong { display: block; font: 400 1rem/1.35 var(--serif); }
.dictionary-entry dt code, .aiu code { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0; overflow-wrap: anywhere; }
.dictionary-entry dt code { display: block; margin-top: 0.2rem; color: var(--ink-2); }
.dictionary-entry dd { margin: 0; }
.dictionary-entry dd p { margin: 0 0 0.3rem; font: 400 0.9375rem/1.5 var(--serif); }
.dictionary-entry dd small { color: var(--ink-3); font: 400 var(--fs-meta)/1.3 var(--sans); }
.provenance { margin-top: calc(var(--u) * 1.2); }
.provenance p { margin: 0.5rem 0 0; color: var(--ink-2); font: 400 var(--fs-small)/1.5 var(--sans); overflow-wrap: anywhere; }
.provenance a { text-decoration: underline; text-decoration-thickness: var(--hair); text-underline-offset: 0.2em; }

/* ---------------------------------------------------------------- observation windows */

.period-window { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 0.4rem var(--u); padding: 0.75rem 0; border-top: var(--hair) solid var(--line); }
.period-window:last-of-type { border-bottom: var(--hair) solid var(--line); }
.period-window strong { display: block; font: 400 var(--fs-h3)/1.25 var(--serif); letter-spacing: -0.01em; }
.prose .period-window p { margin: 0 0 0.35rem; }
.period-bar { height: 0.5rem; margin: 0.35rem 0 0.5rem; background: var(--track); }
.period-bar span { display: block; height: 100%; background: var(--bar-1); }
#history-chart { margin: calc(var(--u) * 0.5) 0 1.375em; }
.prose .control { margin: calc(var(--u) * 0.4) 0 0; max-width: 100%; }

/* ---------------------------------------------------------------- glossary, references and the paper */

.aiu-glossary h2 { margin: calc(var(--u) * 1.1) 0 0.4rem; padding-top: calc(var(--u) * 0.45); font-size: var(--fs-h3); }
.aiu-bibliography .bibliography p, .aiu-paper .bibliography p { margin: 0 0 0.6rem; padding-left: 1.5rem; text-indent: -1.5rem; font-size: 0.9375rem; line-height: 1.5; }
.reference-anchor { display: block; scroll-margin-top: calc(var(--bar) + 2rem); }
.aiu-paper h2[id^="appendix-"] { margin-top: calc(var(--u) * 2.2); }
.publication-byline { margin: 0 0 1.375em; padding-bottom: calc(var(--u) * 0.6); border-bottom: var(--hair) solid var(--line); }
.prose .publication-byline p { margin: 0; }
.publication-byline .author-name { font: 400 var(--fs-h3)/1.3 var(--serif); }
.publication-byline .author-affiliation, .publication-byline .author-contact { color: var(--ink-2); font: 400 var(--fs-small)/1.5 var(--sans); }
.prose .publication-byline .publication-date { margin-top: 0.5rem; color: var(--ink-3); font: 400 var(--fs-meta)/1.3 var(--sans); }
.table-caption { margin: calc(var(--u) * 1.1) 0 0.35rem !important; }
.publication-table-wrap { margin-bottom: 1.375em; }
.publication-table .pub-number { text-align: right; font-variant-numeric: tabular-nums; }
.publication-table td.pub-number { white-space: nowrap; }
.publication-table { table-layout: fixed; }
.publication-cards { display: none; }
.paper-figure { margin: calc(var(--u) * 1.2) 0 calc(var(--u) * 1.4); }
.paper-figure img { display: block; width: 100%; height: auto; border: var(--hair) solid var(--line); background: var(--surface); }
.paper-figure figcaption { margin-top: calc(var(--u) * 0.5); color: var(--ink-2); font: 400 var(--fs-meta)/1.45 var(--sans); letter-spacing: 0.01em; }

/* the citation: the copy actions as text links, the BibTeX record in the code face on the light grey of code */
.citation-box { margin: calc(var(--u) * 0.6) 0 1.375em; padding: 0.75rem 0.9rem; border: var(--hair) solid var(--line); background: var(--surface-2); }
.citation-box pre { margin: 0.6rem 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 0.84rem/1.65 var(--mono); }
.citation-box code { font-size: inherit; }
.citation-box > a { font: 400 var(--fs-small)/1.3 var(--sans); }
#citation-human + .button { display: inline-block; margin: -0.6rem 0 1.375em; }

/* ---------------------------------------------------------------- narrower screens */

@media (max-width: 760px) {
  .aiu-controls, .aiu-controls--wide-middle, .aiu-controls--search { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aiu-controls--wide-middle > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paired-row, .dictionary-entry, .period-window { grid-template-columns: minmax(0, 1fr); }
  .crosswalk-link { grid-template-columns: 7rem minmax(0, 1fr); }
  .crosswalk-link > span:last-child { display: none; }
  #allocation-table table { min-width: 44rem; }
  #map-caption { margin-left: 0; }
  .aiu-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: calc(var(--u) * 0.6); }
  .bar-row { grid-template-columns: minmax(0, 42%) minmax(0, 1fr) 3.4rem; gap: 0.6rem; }
  .aiu-results__head { flex-wrap: wrap; }
  #observation dl { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
  #observation dd { margin-bottom: 0.4rem; }
}
@media (max-width: 480px) {
  .aiu-controls--figure, .aiu-controls--search { grid-template-columns: minmax(0, 1fr); }
  .directory-grid { grid-template-columns: minmax(0, 1fr); }
  .publication-table-wrap.has-mobile-cards, .publication-table-wrap.has-mobile-cards + .table-scroll-hint { display: none; }
  .publication-cards { display: block; margin: 0.6rem 0 1.375em; border-top: var(--hair) solid var(--line); }
  .publication-record { padding: 0.7rem 0; border-bottom: var(--hair) solid var(--line); }
  .publication-record h3 { margin: 0 0 0.5rem; font: 400 1rem/1.3 var(--serif); }
  .publication-record dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1rem; margin: 0; }
  .publication-record dt { color: var(--ink-3); font: 400 0.75rem/1.3 var(--sans); }
  .publication-record dd { margin: 0.15rem 0 0; font: 400 0.9375rem/1.3 var(--serif); font-variant-numeric: tabular-nums; }
  .chart-selection { flex-direction: column; align-items: stretch; gap: 0.35rem; }
  .chart-selection select { max-width: none; }
  .aiu-accounting__parts { grid-template-columns: minmax(0, 1fr); }
  .aiu-plus { text-align: left; }
}
@media print {
  .aiu-controls, .aiu-control-note, .aiu-tabs, .aiu-toolbar, .chart-selection, .chart-keyboard-hint, .chart-inspector, #observation { display: none !important; }
}