/* =========================================================================
   Global AI Rankings — atlas layer
   -------------------------------------------------------------------------
   Loaded after components.css. Everything here belongs to the multi-register
   architecture: the hero instrument, the register grid, the domain explorer
   and the data-status badges.

   Direction. Three references were given — Palantir, Cohere, Anthropic — and
   they do not agree. What is taken from each:

     Palantir   the operating surface. Dense mono labels, hairline graticules,
                a dark plate that reads as an instrument rather than a mood.
     Anthropic  the warmth and the restraint. A paper that is warm rather than
                clinical, generous measure, almost no motion in the body.
     Cohere     the confidence to lead with a live graphic instead of a stock
                photograph.

   What is deliberately not taken: Cohere's gradient-and-blob layer. The
   institution's own brief rules out neon gradients and futuristic surfaces,
   and a research organization that renders like a product launch forfeits the
   thing it is selling. The boldness is spent once, on the hero instrument.
   ====================================================================== */

/* -------------------------------------------------------------------------
   1. Surfaces
   The plate is not a generic near-black. It is a cool chart ink with a blue
   cast, so the choropleth ramp sits on it as a continuation of the same
   material rather than as colour dropped onto neutral grey.
   ---------------------------------------------------------------------- */
.gai-plate {
	--atlas-graticule: #1A2E47;
	--atlas-signal: var(--wp--preset--color--signal);
	--atlas-band-1: #1D3A5C;
	--atlas-band-2: #2C5B85;
	--atlas-band-3: #4682AD;
	--atlas-band-4: #7FA9C9;
	--atlas-band-5: #C6D9EA;

	position: relative;
	background: var(--wp--preset--color--plate);
	color: var(--wp--preset--color--ink-inv);
	overflow: hidden;
}

/* Hairline field. Two rules only, at the measure the grid uses, so the plate
   reads as ruled paper rather than as a texture. */
.gai-plate::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(255,255,255,0.035) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
	background-size: 96px 96px;
	pointer-events: none;
}

/* -------------------------------------------------------------------------
   2. The hero instrument
   ---------------------------------------------------------------------- */
.gai-atlas {
	position: relative;
	z-index: 1;
	padding: clamp(56px, 7vw, 104px) 0 clamp(48px, 6vw, 88px);
}

.gai-atlas__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(32px, 4vw, 56px);
	align-items: center;
}

.gai-atlas__lede h1 {
	color: var(--wp--preset--color--ink-inv);
	margin: 0 0 24px;
	max-width: 15ch;
}

.gai-atlas__lede .gai-deck {
	color: var(--wp--preset--color--ink-inv-2);
	max-width: 46ch;
}

.gai-atlas__eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--signal);
	margin: 0 0 24px;
}

.gai-atlas__stage {
	position: relative;
	aspect-ratio: 1 / 1;
	max-width: 560px;
	margin-inline: auto;
	width: 100%;
}

/* Safari below 15 has no aspect-ratio. Without a fallback the stage computes to
   zero height, the canvas inside it collapses, and the instrument simply is not
   there — which reads as "the hero does not display on mobile" rather than as a
   layout bug. The padding hack restores the square; the modern rule wins
   wherever it is supported. */
@supports not (aspect-ratio: 1 / 1) {
	.gai-atlas__stage { height: 0; padding-bottom: 100%; }
	.gai-atlas__canvas { position: absolute; inset: 0; }
}

.gai-atlas__canvas {
	width: 100%;
	height: 100%;
	display: block;
	cursor: grab;
	touch-action: pan-y;
	border-radius: 50%;
}
.gai-atlas__canvas:focus-visible {
	outline: 2px solid var(--wp--preset--color--signal);
	outline-offset: 6px;
}

/* Readout. Sits on the plate as a corner annotation, the way a chart carries
   its own scale block. */
.gai-atlas__readout {
	position: absolute;
	left: 0;
	bottom: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--ink-inv-2);
	border-left: 2px solid var(--wp--preset--color--signal);
	padding-left: 12px;
	pointer-events: none;
}
.gai-atlas__readout b {
	display: block;
	color: var(--wp--preset--color--ink-inv);
	font-weight: 500;
	letter-spacing: 0.02em;
}
.gai-atlas__readout [data-atlas-code] {
	color: var(--wp--preset--color--signal);
}

/* Register switcher. These are the seven indices; the codes are the same ones
   used in the tables and profiles, so this doubles as the key. */
.gai-atlas__registers {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 32px;
}

.gai-register-btn {
	appearance: none;
	background: transparent;
	border: 1px solid var(--wp--preset--color--rule-inv);
	color: var(--wp--preset--color--ink-inv-2);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 8px 12px;
	cursor: pointer;
	transition: color var(--wp--custom--motion--fast) var(--wp--custom--motion--ease),
		border-color var(--wp--custom--motion--fast) var(--wp--custom--motion--ease);
}
.gai-register-btn:hover {
	color: var(--wp--preset--color--ink-inv);
	border-color: var(--wp--preset--color--ink-inv-2);
}
.gai-register-btn[aria-pressed="true"] {
	color: var(--wp--preset--color--plate);
	background: var(--wp--preset--color--signal);
	border-color: var(--wp--preset--color--signal);
}
.gai-register-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--signal);
	outline-offset: 2px;
}

@media (min-width: 900px) {
	.gai-atlas__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
		gap: clamp(40px, 5vw, 80px);
	}
	.gai-atlas__stage { margin-inline: 0; }
}

/* -------------------------------------------------------------------------
   3. Data-status badges
   The single most important component on the site. Six of the seven registers
   carry illustrative figures, and nothing here may be cited as measurement
   until that changes. The badge is not subtle on purpose.
   ---------------------------------------------------------------------- */
.gai-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	padding: 4px 9px;
	border: 1px solid currentColor;
	white-space: nowrap;
}
.gai-status::before {
	content: "";
	width: 5px;
	height: 5px;
	background: currentColor;
	border-radius: 50%;
}
.gai-status--illustrative { color: var(--wp--preset--color--signal); }
.gai-status--synthesis { color: var(--wp--preset--color--rise); }
.gai-plate .gai-status--synthesis,
.gai-section--ink .gai-status--synthesis { color: var(--wp--preset--color--rise-inv); }

.gai-statusnote {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	line-height: 1.7;
	color: var(--wp--preset--color--ink-2);
	border-left: 2px solid var(--wp--preset--color--signal);
	padding-left: 16px;
	max-width: 68ch;
	margin: 32px 0 0;
}
.gai-section--ink .gai-statusnote,
.gai-plate .gai-statusnote { color: var(--wp--preset--color--ink-inv-2); }

/* -------------------------------------------------------------------------
   4. The register grid — seven indices as a register, not as seven cards
   Rows, not tiles: this is a catalogue of what the institution maintains, and
   a catalogue is a list. Each row carries its code, its count and its status,
   which is exactly what a reader needs to decide whether to open it.
   ---------------------------------------------------------------------- */
.gai-registers {
	border-top: 1px solid var(--wp--preset--color--rule);
}

.gai-register {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 4px 20px;
	align-items: start;
	padding: 28px 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	text-decoration: none;
	color: inherit;
	transition: background var(--wp--custom--motion--fast) var(--wp--custom--motion--ease);
}
.gai-register:hover { background: var(--wp--preset--color--surface-alt); }
.gai-register:focus-visible {
	outline: 2px solid var(--wp--preset--color--signal);
	outline-offset: -2px;
}
/* A register with no page behind it renders as a div, not an anchor. It keeps
   the row's information and loses the affordances that promise a destination —
   no hover wash, no pointer. A row that looks clickable and 404s costs more
   trust than the click was worth. */
.gai-register--static { cursor: default; }
.gai-register--static:hover { background: none; }

.gai-register__code {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--signal);
	padding-top: 4px;
}

.gai-register__name {
	font-family: var(--wp--preset--font-family--sans);
	font-size: clamp(19px, 1.8vw, 23px);
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 0 0 6px;
	color: var(--wp--preset--color--ink);
}

.gai-register__summary {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 17px;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-2);
	margin: 0 0 14px;
	max-width: 62ch;
}

.gai-register__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--ink-3);
}

@media (min-width: 720px) {
	.gai-register { grid-template-columns: 56px minmax(0, 1fr) 200px; }
	.gai-register__meta { justify-content: flex-end; text-align: right; }
}

/* -------------------------------------------------------------------------
   5. Explorer register bar — switches the map and table between domains
   ---------------------------------------------------------------------- */
.gai-domainbar {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 28px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--wp--preset--color--rule-inv);
}

.gai-domainbar__btn {
	appearance: none;
	background: transparent;
	border: 1px solid transparent;
	color: var(--wp--preset--color--ink-inv-2);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	padding: 7px 12px;
	cursor: pointer;
}
.gai-domainbar__btn:hover { color: var(--wp--preset--color--ink-inv); }
.gai-domainbar__btn[aria-pressed="true"] {
	color: var(--wp--preset--color--ink-inv);
	border-color: var(--wp--preset--color--rule-inv);
	background: var(--wp--preset--color--ink-surface-2);
}
.gai-domainbar__btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--signal);
	outline-offset: 2px;
}
.gai-domainbar__code {
	color: var(--wp--preset--color--signal);
	margin-right: 7px;
}

/* -------------------------------------------------------------------------
   6. Entity profile header — one layout, seven classes of subject
   Named .gai-profile, not .gai-entity: that class is already the name cell in
   every ranking table, and reusing it turned each one into a grid container.
   ---------------------------------------------------------------------- */
.gai-profile {
	display: grid;
	gap: 32px;
	grid-template-columns: minmax(0, 1fr);
}

.gai-profile__rank {
	font-family: var(--wp--preset--font-family--sans);
	font-size: clamp(56px, 9vw, 104px);
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 0.86;
	color: var(--wp--preset--color--ink-inv);
	font-variant-numeric: tabular-nums;
}
.gai-profile__rank span {
	font-size: 0.28em;
	letter-spacing: 0.1em;
	font-family: var(--wp--preset--font-family--mono);
	color: var(--wp--preset--color--ink-inv-2);
	display: block;
	margin-bottom: 10px;
}

.gai-profile__pillars {
	display: grid;
	gap: 1px;
	background: var(--wp--preset--color--rule-inv);
	border: 1px solid var(--wp--preset--color--rule-inv);
}
.gai-profile__pillar {
	background: var(--wp--preset--color--ink-surface);
	padding: 18px 20px;
}
.gai-profile__pillar dt {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-inv-2);
	margin-bottom: 8px;
}
.gai-profile__pillar dd {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 28px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink-inv);
	font-variant-numeric: tabular-nums;
}
/* Score bar: the figure and its position on the 0–100 scale, together. A
   number without its scale is not a measurement. */
.gai-profile__bar {
	margin-top: 10px;
	height: 2px;
	background: var(--wp--preset--color--rule-inv);
}
.gai-profile__bar span {
	display: block;
	height: 100%;
	background: var(--wp--preset--color--signal);
}

@media (min-width: 860px) {
	.gai-profile { grid-template-columns: 200px minmax(0, 1fr); align-items: start; }
	.gai-profile__pillars { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Alternate register table. The map is bound to the national register only, so
   the six non-geographic registers render full width with no dead globe beside
   them. A muted column carries the entity's grouping — region, sector, class. */
.gai-explorer__grid--table {
	grid-template-columns: minmax(0, 1fr) !important;
}

.gai-cell-muted {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--ink-inv-2);
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
   7. Reduced motion
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.gai-register,
	.gai-register-btn,
	.gai-domainbar__btn { transition: none; }
}

/* -------------------------------------------------------------------------
   8. Unpublished movement
   The source publishes no rank-change column for most governments. An em dash
   in the muted tone reads as "no figure", which is the truth, where a grey zero
   would read as "no change", which is a claim we cannot make.
   ---------------------------------------------------------------------- */
.gai-delta--none,
.gai-ledger__delta--none,
.gai-globe__figure--none {
	color: var(--wp--preset--color--ink-3);
	font-variant-numeric: normal;
}
.gai-section--ink .gai-delta--none,
.gai-plate .gai-ledger__delta--none,
.gai-globe__figure--none { color: var(--wp--preset--color--ink-inv-2); }

/* -------------------------------------------------------------------------
   9. Development status flag
   Sits on every section head while the platform is provisional. Deliberately
   not subtle and deliberately not alarming: a reader scanning for a citable
   number should see it before they see the number, and a reader who already
   knows should be able to ignore it.
   ---------------------------------------------------------------------- */
.gai-devflag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--signal);
	border: 1px solid currentColor;
	padding: 3px 9px;
	white-space: nowrap;
	vertical-align: middle;
}
.gai-devflag::before {
	content: "";
	width: 5px;
	height: 5px;
	background: currentColor;
}

/* On a section head the flag follows the eyebrow on the same line, so it reads
   as part of the label rather than as a separate banner. */
.gai-eyebrow .gai-devflag,
.gai-atlas__eyebrow .gai-devflag { margin-left: 12px; }

/* Standing disclaimer under a data module. */
.gai-disclaimer {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	line-height: 1.7;
	color: var(--wp--preset--color--ink-2);
	border-top: 1px solid var(--wp--preset--color--rule);
	padding-top: 16px;
	margin-top: 32px;
	max-width: 78ch;
}
.gai-section--ink .gai-disclaimer,
.gai-plate .gai-disclaimer {
	color: var(--wp--preset--color--ink-inv-2);
	border-top-color: var(--wp--preset--color--rule-inv);
}

/* Licence attribution in the footer. Set below the disclaimer and one step
   quieter: it is a legal condition of using the pillar data, not a claim the
   institution is making about itself. It cannot be removed while that data is
   published — see inc/legal.php. */
.gai-footer__attribution {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12px;
	line-height: 1.7;
	color: var(--wp--preset--color--ink-inv-2);
	margin-top: 8px;
	max-width: 68ch;
}
.gai-footer__attribution a { font-size: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* -------------------------------------------------------------------------
   10. The instrument on a small screen
   Three problems at 380px, all of them the same problem: the hero was laid out
   for a wide column and simply stacked. Seven full-width register buttons cost
   ~270px of vertical space before the globe appears; the readout is absolutely
   positioned over a sphere that now fills the viewport width; and a square
   stage at full width pushes the ledger two screens down.
   ---------------------------------------------------------------------- */
@media (max-width: 767px) {
	/* One horizontal strip rather than seven stacked rows — the same idiom the
	   region filter already uses, so the two read as the same control. */
	.gai-atlas__registers {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		margin-inline: calc(var(--gai-gutter) * -1);
		padding-inline: var(--gai-gutter);
		padding-bottom: 4px;
		scroll-snap-type: x proximity;
	}
	.gai-atlas__registers::-webkit-scrollbar { display: none; }
	.gai-register-btn {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}

	/* The stage keeps its proportion but gives up the full width, so the ledger
	   stays reachable without a second scroll. */
	.gai-atlas__stage { max-width: 82vw; }

	/* Readout drops below the instrument. Over a viewport-width sphere it sat on
	   top of the point field and was unreadable against the lit face. */
	.gai-atlas__readout {
		position: static;
		margin: 20px auto 0;
		max-width: 82vw;
	}

	.gai-atlas { padding-top: clamp(32px, 8vw, 56px); }
	.gai-atlas__lede h1 { max-width: none; }
	.gai-atlas__grid { gap: 28px; }

	/* Full-width actions: two ghost buttons side by side wrap awkwardly and the
	   primary loses its weight. */
	.gai-atlas .gai-hero__actions { flex-direction: column; align-items: stretch; }
	.gai-atlas .gai-hero__actions .gai-btn { justify-content: center; }
}

/* The explorer's register bar is the same control as the hero's and gets the
   same treatment — seven wrapped buttons cost as much room there as here. */
@media (max-width: 767px) {
	.gai-domainbar {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		margin-inline: calc(var(--gai-gutter) * -1);
		padding-inline: var(--gai-gutter);
		padding-bottom: 12px;
		scroll-snap-type: x proximity;
	}
	.gai-domainbar::-webkit-scrollbar { display: none; }
	.gai-domainbar__btn { flex: 0 0 auto; scroll-snap-align: start; }

	/* Status badge and disclaimer wrap rather than push the table sideways. */
	.gai-status { white-space: normal; }
	.gai-disclaimer { font-size: 11px; }
}

/* The instrument is a pointer toy; on a coarse pointer the hint about dragging
   is the only affordance, so keep the label legible rather than decorative. */
@media (max-width: 767px) and (pointer: coarse) {
	.gai-atlas__readout { font-size: 13px; }
}