/* v2-atlas: the Current Atlas pages draw the site's components only: OBS.hd, the overview tiles (ext/overviews.css),
   the map tools, panels and tables (ext/maps.css), .files, .hub-note, .tagbtn, btn-* (styles.css) and the embedded-tool
   page (ext/blocks.css). The map sections, the download cards and the DC Watch frame (24 Oct) add the layout below, still on
   house parts and tokens. Everything is scoped to .at-* so V1 maps (ext/maps.css) are untouched. */

/* AI Innovations: the two downloads */
.mcards.at-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: var(--sp-controls) 0 0; padding: 0; }
/* the download cards: the tile's look with no hover (no lift, notch or corner arrow) */
.at-dlc { display: flex; flex-direction: column; gap: var(--sp-1); height: 100%; padding: var(--sp-3); border-radius: 24px; background: var(--surface); color: var(--ink); }
.at-dl .mcard p { padding-right: 0; font-size: 15px; }
.at-dl-go { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); margin-top: auto !important; padding-top: var(--sp-2) !important; }
.at-dl-note { display: inline-flex; align-items: center; gap: var(--sp-0-5); color: var(--b-ink-3); font-size: 13.5px; }
.at-dl-note .ico { width: 15px; height: 15px; }

/* one controls line above the map: filters left, download right */
.at-ctl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-1-5) var(--sp-2); margin-bottom: var(--sp-controls); }
.at-ctl-l { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); min-width: 0; }
.at-ctl-r { display: flex; gap: var(--sp-1); }

/* map ~60%, panel ~40%, both the map's height; the panel scrolls inside */
.at-split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--sp-grid); }
.at-map .mp-svg { border-radius: 24px; }
.at-map .mp-leg { position: absolute; left: var(--sp-1-5); bottom: var(--sp-1-5); max-width: calc(100% - var(--sp-3)); margin: 0; padding: var(--sp-1) var(--sp-1-5); border-radius: 14px; background: var(--b-surface); pointer-events: none; }
.at-side { display: flex; flex-direction: column; height: 0; min-height: 100%; min-width: 0; padding: var(--sp-card) var(--sp-card) 0; border-radius: 24px; background: var(--b-surface); }
.at-side .mp-ph-h { font-size: 22px; margin-bottom: var(--sp-1); }
/* The list scrolls under a full-width line, with its content on the figures' edges */
.at-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 calc(var(--sp-card) * -1); padding: var(--sp-0-5) var(--sp-card) var(--sp-card); border-top: 1px solid var(--b-rule); overscroll-behavior: contain; }
.at-side .mp-t th, .at-side .mp-t td, .at-card .mp-t th, .at-card .mp-t td { border-bottom: 0; }
.at-side .mp-t thead th { position: sticky; top: 0; background: var(--b-surface); }
.at-side .mp-t tr.is-sel th { font-weight: 600; }

/* the panel: a header row (name, and Clear when a country is picked), the figures strip, then the innovations as white rows */
.at-ph { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }
.at-clear { display: inline-flex; align-items: center; gap: var(--sp-0-5); flex: none; min-height: 32px; padding: 0 var(--sp-1-5) 0 var(--sp-1); border: 0; border-radius: 999px; background: none; color: var(--b-ink-2); font-family: inherit; font-weight: 500; font-size: 13.5px; line-height: 1; cursor: pointer; transition: background-color .15s, color .15s; }
.at-clear .ico { width: 14px; height: 14px; }
.at-clear:hover { background: var(--b-tint-50); color: var(--b-ink); }
.at-clear:focus-visible, .at-row:focus-visible { outline: 2px solid var(--b-primary); outline-offset: 2px; }
.at-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-1); margin: var(--sp-0-5) 0 var(--sp-2); padding: 0; }
.at-stats > div { display: flex; flex-direction: column-reverse; gap: 2px; padding: var(--sp-1-5); min-width: 0; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--b-rule); }  /* one outline card per figure */
.at-stats dt { color: var(--b-ink-3); font-size: 12px; line-height: 1.25; }
.at-stats dd { margin: 0; color: var(--b-ink); font: 500 24px/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.at-rows { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.at-rows > li + li { border-top: 1px solid var(--b-rule); }  /* rows split by a subtle line */
.at-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: var(--sp-1); margin: 0 calc(var(--sp-1-5) * -1); padding: var(--sp-2) var(--sp-1-5); border-radius: 10px; color: var(--b-ink); text-decoration: none; transition: background-color .15s; }
.at-row:hover { background: var(--b-tint-50); color: var(--b-ink); }
.at-row > .ico { position: absolute; right: var(--sp-1-5); bottom: var(--sp-2); width: 18px; height: 18px; color: var(--b-primary); opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; }
.at-row:hover > .ico, .at-row:focus-visible > .ico { opacity: 1; transform: none; }
.at-row-m { display: flex; align-items: center; gap: var(--sp-1); min-width: 0; color: var(--b-ink-3); font-size: 13px; line-height: 1.2; }
.at-flags { display: inline-flex; flex: none; }
.at-flags .tflag + .tflag { margin-left: -6px; }
.at-row-c { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 var(--sp-1) 0 7px; border-radius: 999px; background: var(--b-paper); color: var(--b-ink-2); font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; }
.at-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--b-ink-3); }
.at-pill:is([data-s="at-scale"], [data-s="in-force"])::before { background: var(--b-ink); }
.at-pill:is([data-s="scaling"], [data-s="adopted"])::before { background: var(--b-primary); }
.at-pill:is([data-s="pilot"], [data-s="draft"])::before { background: var(--b-map-2); }
.at-pill:is([data-s="paused"], [data-s="consultation"])::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--b-ink-3); }
.at-row-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; line-height: 1.35; font-weight: 500; }
.at-row-m .at-pill { margin-left: auto; }
.at-more { display: flex; justify-content: center; margin: var(--sp-1-5) 0 0; }
.at-seeall { display: inline-flex; align-items: center; gap: var(--sp-0-5); min-height: 36px; padding: 0 var(--sp-1-5); border: 0; border-radius: 999px; background: none; color: var(--b-primary); font-family: inherit; font-weight: 500; font-size: 14px; cursor: pointer; transition: background-color .15s; }
.at-seeall .ico { width: 16px; height: 16px; }
.at-seeall:hover { background: var(--b-tint-50); }
.at-seeall:focus-visible { outline: 2px solid var(--b-primary); outline-offset: 2px; }

/* Download: the lede under the heading, on the same left edge */
.hub-sec:has(.at-dl) .hub-sec-h { margin-bottom: 0; }
.hub-sec:has(.at-dl) .sec-lede { max-width: 38em; margin: var(--sp-head-desc) 0 0; text-align: left; }

/* AI Indices: numbered chips, then the comparison as its own card */
.mp-chips.at-chips { margin: 0 0 var(--sp-controls); }
.at-card { margin-top: var(--sp-grid); padding: var(--sp-card); border-radius: 24px; background: var(--b-surface); }
.at-card-h { margin: 0; font-size: 20px; font-weight: 500; }
.at-card .mp-note { margin: var(--sp-0-5) 0 var(--sp-2); }
.at-card .mp-cmp tr.on { background: none; }

/* Asia Policy Overview: the instruments as a timeline, newest first */

/* DC Watch: one framed card for the tool */
.hub-sec.at-dc-sec { padding-top: var(--sp-3); }
.at-frame { container-type: inline-size; overflow: hidden; border-radius: 24px; background: var(--b-surface); }
.at-frame-bar { display: flex; align-items: center; gap: 6px; padding: var(--sp-1) var(--sp-2); background: var(--b-surface-2); color: var(--b-ink-3); font: 500 12px/1 var(--font-mono); letter-spacing: .04em; }
.at-frame-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--b-rule-2); }
.at-frame-bar span { margin-left: var(--sp-1); }
/* the map fills its pane exactly (--r is the map's height over width), so no band shows under or over it */
.at-frame-if { display: block; width: 100%; height: calc((100cqw - 260px) * var(--r, .6)); border: 0; background: var(--b-paper); }
.at-frame-foot { display: flex; align-items: flex-start; gap: var(--sp-1); margin: 0; padding: var(--sp-1-5) var(--sp-2); color: var(--b-ink-3); font-size: 13.5px; }
.at-frame-foot .ico { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.at-frame-foot a, .at-link { color: var(--b-primary); }
.at-link { padding: 0; border: 0; background: none; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

@media (max-width: 960px) {
  .at-split { grid-template-columns: minmax(0, 1fr); }
  .at-side { height: auto; min-height: 0; max-height: 560px; }
}
@media (max-width: 640px) {
  .mcards.at-dl { grid-template-columns: minmax(0, 1fr); }
  .at-ctl-l > *, .at-ctl-r { flex: 1 1 100%; }
  .at-map .mp-leg { position: static; margin-top: var(--sp-1); padding: 0; background: none; }
  .at-frame-if { height: calc(100cqw * var(--r, .6) + 280px); }
  .at-stats > div { padding: var(--sp-1); }
  .at-stats dd { font-size: 20px; }
  .at-stats dt { font-size: 11px; }
  .at-row { padding: var(--sp-1-5); }
}

/* AI Innovations: the four selection criteria as a ticked list under the definition */
.at-qual { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: var(--sp-1-5) var(--sp-4); margin: var(--sp-3) 0 0; padding: 0; }
.at-qual li { display: flex; align-items: center; gap: var(--sp-1); color: var(--ink); font-weight: 500; }
.at-qual .ico { flex: none; width: 18px; height: 18px; color: var(--b-primary); }
@media (max-width: 640px) { .at-qual { grid-template-columns: 1fr; } }

/* AI Innovations definition: text, criteria and links on the left, the picture on the right */
.at-def { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: var(--sp-6); align-items: center; }
.at-def .list-more { justify-content: flex-start; margin-top: var(--sp-4); }
.at-def-art { width: 100%; max-width: 520px; justify-self: end; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.at-def-art .ad-map { overflow: visible; -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); }
.at-def-art .ad-map path { fill: var(--b-surface); stroke: rgba(var(--b-shadow), .22); stroke-width: 1; vector-effect: non-scaling-stroke; }
.at-def-art .ad-link { stroke: var(--b-primary); stroke-width: 1.4; stroke-dasharray: 3 5; opacity: .55; }
.at-def-art .ad-ring { fill: var(--b-primary); fill-opacity: .14; stroke: none; transform-box: fill-box; transform-origin: center; }
.at-def-art .ad-dot { fill: var(--b-primary); stroke: #fff; stroke-width: 2; }
.at-def-art .ad-card rect { fill: #fff; stroke: rgba(var(--b-shadow), .18); stroke-width: 1.2; filter: drop-shadow(0 8px 12px rgba(var(--b-shadow), .08)); }
.at-def-art .ad-ic { stroke: var(--ink); stroke-width: 1.5; fill: #fff; }
.at-def-art .ad-acc { stroke: var(--b-primary); stroke-width: 1.5; }
.at-def-art .ad-t { fill: var(--ink); stroke: none; font: 600 11px/1 var(--font-text); }
.at-def-art .ad-c { fill: var(--ink-3); stroke: none; font: 500 9.5px/1 var(--font-text); }
@media (prefers-reduced-motion: no-preference) {
  .at-def-art .ad-ring { animation: dm-ring 2.8s ease-out infinite; animation-delay: var(--d); }
  .at-def-art .ad-link { animation: ad-flow 3s linear infinite; }
}
@keyframes ad-flow { to { stroke-dashoffset: -16; } }
@media (max-width: 900px) { .at-def { grid-template-columns: 1fr; } .at-def-art { justify-self: center; max-width: 380px; } }

/* RAII4D glossary entry */
.ad-entry { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--sp-5); align-items: center; padding: clamp(var(--sp-3), 4vw, var(--sp-5)); border-radius: 32px; background: var(--surface); overflow: hidden; }
.ad-entry-t { min-width: 0; }
.ad-kicker { margin: 0; font-size: 14px; font-weight: 500; color: var(--b-primary); }
.ad-term { margin: var(--sp-1) 0 0; font: 500 clamp(2.4rem, 4.2vw, 3.4rem)/1 var(--font-display); letter-spacing: -0.045em; color: var(--ink); }
.ad-pos { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1-5); margin: var(--sp-1-5) 0 0; font-size: 17px; color: var(--ink-2); }
.ad-pos i { font-family: Georgia, 'Times New Roman', serif; color: var(--b-primary); }
.ad-senses { margin: var(--sp-4) 0 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: var(--sp-2); max-width: 58ch; }
.ad-senses li { counter-increment: s; display: grid; grid-template-columns: 28px minmax(0, 1fr); color: var(--ink); line-height: 1.6; }
.ad-senses li::before { content: counter(s) "."; font: 600 15px/1.6 var(--font-display); color: var(--b-primary); }
.ad-sub { margin: 0 0 var(--sp-1-5); font-size: 13.5px; font-weight: 500; color: var(--ink-3); }
.ad-eg { margin-top: var(--sp-4); }
.ad-eg ul { list-style: none; display: grid; gap: var(--sp-1); margin: 0; padding: 0; }
.ad-eg li { display: flex; align-items: center; gap: var(--sp-1-5); padding: var(--sp-1-5) var(--sp-2); border-radius: 14px; background: var(--paper); }
.ad-eg li img, .ad-eg li .tflag { flex: none; width: 20px; height: 20px; }
.ad-eg li span { flex: 1; font-weight: 500; color: var(--ink); }
.ad-eg li small { font-size: 13.5px; color: var(--ink-3); }
.ad-qual { margin-top: var(--sp-4); }
.ad-qual ul { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-1-5) var(--sp-3); margin: 0; padding: 0; }
.ad-qual li { display: flex; align-items: flex-start; gap: var(--sp-1); color: var(--ink); font-weight: 500; line-height: 1.4; }
.ad-tick { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: rgba(var(--b-map-rgb), .12); color: var(--b-primary); }
.ad-tick .ico { width: 13px; height: 13px; }
.ad-why { margin: var(--sp-4) 0 0; max-width: 58ch; color: var(--ink-2); line-height: 1.6; }
.ad-entry .list-more { justify-content: flex-start; margin-top: var(--sp-3); }
.ad-entry-art { display: grid; place-items: center; margin: calc(clamp(var(--sp-4), 5vw, var(--sp-8)) * -1) calc(clamp(var(--sp-4), 5vw, var(--sp-8)) * -1) calc(clamp(var(--sp-4), 5vw, var(--sp-8)) * -1) 0; padding: var(--sp-4); background: radial-gradient(90% 70% at 60% 45%, var(--paper), transparent 75%); }
.ad-entry-art .at-def-art { width: 100%; max-width: 640px; justify-self: center; }
@media (max-width: 900px) { .ad-entry { grid-template-columns: 1fr; } .ad-entry-art { margin: 0; padding: 0; } .ad-qual ul { grid-template-columns: 1fr; } }

.ad-desc { margin: var(--sp-2-5) 0 0; max-width: 60ch; color: var(--ink-2); line-height: 1.6; }
.ad-entry .ad-qual { margin-top: var(--sp-3); }
.ad-acts { display: flex; flex-wrap: wrap; gap: var(--sp-1-5); margin: var(--sp-4) 0 0; }

/* The live map: faint region, innovations popping up over their countries like notifications */
.ad-live { position: relative; width: 100%; aspect-ratio: 720 / 445;  /* the map's own proportions, so the notes sit on their countries */ }
.ad-live-map { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(transparent, #000 8%, #000 92%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(transparent, #000 8%, #000 92%, transparent); mask-composite: intersect; }  /* fades only at the edges */
.ad-live-map path { fill: var(--b-surface); stroke: rgba(var(--b-shadow), .3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ad-live-layer { position: absolute; inset: 0; }
.ad-note { position: absolute; width: 0; height: 0; }
.ad-ping { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--b-primary); box-shadow: 0 0 0 3px #fff; }
.ad-ping::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; background: var(--b-primary); opacity: .25; animation: dm-ring 2s ease-out infinite; }
.ad-toast { position: absolute; left: 12px; bottom: 10px; display: grid; gap: 2px; width: max-content; max-width: 200px; padding: 9px 11px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(var(--b-shadow), .08), 0 12px 24px -8px rgba(var(--b-shadow), .25);
  opacity: 0; transform: translateY(6px) scale(.96); transform-origin: bottom left; transition: opacity .35s ease, transform .45s cubic-bezier(.2, .9, .25, 1.15); }
.ad-note.is-left .ad-toast { left: auto; right: 12px; transform-origin: bottom right; }
.ad-note.is-below .ad-toast { bottom: auto; top: 10px; }
.ad-note.is-in .ad-toast { opacity: 1; transform: none; }
.ad-toast b { font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ad-toast small { font-size: 12px; color: var(--ink-3); }
.ad-note { opacity: 0; transition: opacity .3s; } .ad-note.is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ad-ping::after { animation: none; } .ad-toast { transition: none; } }

.at-row-t { padding-right: 28px; }  /* room for the hover arrow under the status pill */

/* Compared on every indicator: an even grid. The indicator column, then one equal column per country; each cell is a
   bar that fills its column and the value after it; rows split by a subtle line; the highest in a row in red */
.at-card .mp-tw { overflow-x: auto; border-radius: 16px; border: 1px solid var(--b-rule-2); }  /* the table in a rounded outline */
.at-card .mp-cmp { width: 100%; table-layout: fixed; border-collapse: collapse; }
.at-card .mp-cmp th[scope="col"]:first-child { width: 30%; }
.at-card .mp-cmp th, .at-card .mp-cmp td { padding: var(--sp-1-5) var(--sp-2-5); text-align: left; vertical-align: middle; }
.at-card .mp-cmp thead th { padding-top: var(--sp-1-5); font-size: 13.5px; font-weight: 500; color: var(--b-ink-2); background: var(--b-tile); }
.at-card .mp-cmp thead th.n { white-space: nowrap; }
.at-card .mp-cmp tbody tr + tr > * { border-top: 1px solid var(--b-rule); }
.at-card .mp-cmp th[scope="row"] { font-weight: 500; color: var(--b-ink); }
.at-card .mp-cmp tr.on > * { background: var(--b-tint-50); }
.at-card .mp-cmp td.n { display: table-cell; white-space: nowrap; }
.at-card .mp-cmp .mp-bar { width: calc(100% - 48px); max-width: 220px; height: 8px; margin-right: var(--sp-1-5); vertical-align: middle; }
.at-card .mp-cmp .mp-v { display: inline-block; min-width: 28px; font-variant-numeric: tabular-nums; color: var(--b-ink-2); }
.at-card .mp-cmp td.top .mp-v { color: var(--b-primary); font-weight: 600; }
@media (max-width: 760px) { .at-card .mp-cmp { min-width: 560px; } }

/* The white panels and cards on the brighter ground get a soft lift */
.at-side, .at-card, .at-dlc, .at-frame { box-shadow: 0 1px 2px rgba(var(--b-shadow), .04), 0 12px 32px -12px rgba(var(--b-shadow), .14); }

/* Asia Policy Overview: type chips on their own row under the controls; list rows like AI Innovations' with a type icon */
.at-types { margin: 0 0 var(--sp-controls); }
.at-row-ic { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 7px; background: var(--b-tile); color: var(--b-ink-2); }
.at-row-ic .ico { width: 13px; height: 13px; }