/* The atlas's components, each defined once (item 92, stage 9; STYLEGUIDE.md 3.3). Every page
   loads this after tokens.css and before its own sheets. :where() keeps a component at no
   specificity, so a page's own rule for one of them still wins. */

/* The card: a surface with the card radius, its shadow by how far it stands off the page. Ten
   sheets wrote the three lines each time; a card's look changes here now. */
:where(.panel, .rank, .subview-section, .trendchart, .home-block, .panelframe, .opt-card, .jr-choose, .db2-tile, .is-pg){
  background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow-sm)}
:where(.sys-hover, .mapcard, .ph-card, details.ph-acc, .ph-tile, .ph-map, .ph-gaps .jr-card, .ph-nb .nb, .ph-table, .tb-peek, .wel-card, .welcome-strip, .is-load, .is-unpop){
  background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow)}
/* The finder card keeps its own rule in atlas.css: it is also a .dossier-card, whose rule a
   no-specificity card would lose to. */
:where(.sys-menu, .region-menu, .is-place, .mpicker .mlist, .bar-links, .vpick-menu, .mast-pages-list){
  background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow-lg)}
/* A tile is a small card: a tighter corner. */
:where(.db2-tile){border-radius:10px}

/* The pill: a round-ended button, one look (owner, 7 Oct 2026: «Unify the looks», after the map's
   chrome Stream 1 drew from prototype/switch.html). White with the strong hairline and soft ink;
   the second surface under the pointer; chosen, outlined in ink. The brand red marks a selection
   only (DESIGN.md), never a hover. The lens buttons keep the lens's own accent when chosen. */
:where(.sec-btn, .bar-menu-btn, .dimension-btn, .profile-chips button, .profile-next, .jr-gap-report-open, .jr-gap-report-send, .gp-kinds button, .btn, .passage-close, .bsheet-jump button, .trend-toggle, .network-mode, .network-chip, .brief-back, .home-return, .ph-fchip, .dp-chips button:not(.later), .sys-chip, .sys-x){
  border:1px solid var(--hairline-strong); border-radius:999px; background:var(--surface); color:var(--ink-soft); cursor:pointer}
:where(.sec-btn, .bar-menu-btn, .dimension-btn, .profile-chips button, .profile-next, .jr-gap-report-open, .jr-gap-report-send, .gp-kinds button, .btn, .passage-close, .bsheet-jump button, .trend-toggle, .network-mode, .network-chip, .brief-back, .home-return, .ph-fchip, .dp-chips button:not(.later), .sys-chip, .sys-x):hover{background:var(--surface-2); color:var(--ink)}
:where(.sec-btn[aria-pressed="true"], .dp-chips button[aria-pressed="true"], .profile-chips button[aria-pressed="true"], .gp-kinds button[aria-pressed="true"], .ph-fchip[aria-pressed="true"], .sys-chip[aria-pressed="true"]){
  background:var(--surface); border-color:var(--ink); color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); font-weight:600}

/* The segmented switch: one look (owner, 7 Oct 2026: «Unify the looks»), the one the map's Region ·
   World · Globe switch took from prototype/switch.html. A white track with the strong hairline;
   the options without a box, the second surface under the pointer, the chosen one outlined in ink.
   Each page keeps its own layout and sizes (the phone's 44 px touch target). */
:where(.opt-seg, .span-switch, .cx-modes, .cal-modes, .db2-pan-switch, .ph-seg, .mapswitch, .is-covsw){
  display:inline-flex; gap:2px; padding:3px; border:1px solid var(--hairline-strong); border-radius:999px; background:var(--surface)}
:where(.opt-seg button, .span-switch button, .cx-modes button, .cal-modes button, .db2-pan-switch button, .ph-seg button, .mapswitch-btn, .is-covsw button){
  border:0; border-radius:999px; background:none; color:var(--ink-soft); font-weight:600; cursor:pointer}
:where(.opt-seg button, .span-switch button, .cx-modes button, .cal-modes button, .db2-pan-switch button, .ph-seg button, .mapswitch-btn, .is-covsw button):hover{background:var(--surface-2); color:var(--ink)}
:where(.is-covsw button[aria-pressed="true"], .opt-seg button[aria-pressed="true"], .opt-seg button[aria-checked="true"], .opt-seg button[aria-selected="true"], .opt-seg button[aria-current="true"], .span-switch button[aria-pressed="true"], .span-switch button[aria-checked="true"], .span-switch button[aria-selected="true"], .span-switch button[aria-current="true"], .cx-modes button[aria-pressed="true"], .cx-modes button[aria-checked="true"], .cx-modes button[aria-selected="true"], .cx-modes button[aria-current="true"], .cal-modes button[aria-pressed="true"], .cal-modes button[aria-checked="true"], .cal-modes button[aria-selected="true"], .cal-modes button[aria-current="true"], .db2-pan-switch button[aria-pressed="true"], .db2-pan-switch button[aria-checked="true"], .db2-pan-switch button[aria-selected="true"], .db2-pan-switch button[aria-current="true"], .ph-seg button[aria-pressed="true"], .ph-seg button[aria-checked="true"], .ph-seg button[aria-selected="true"], .ph-seg button[aria-current="true"], .mapswitch-btn[aria-pressed="true"], .mapswitch-btn[aria-checked="true"], .mapswitch-btn[aria-selected="true"], .mapswitch-btn[aria-current="true"]){
  background:var(--surface); color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink)}

/* The badge: a small label in capitals (owner, 7 Oct 2026: «Unify the looks»). One size, weight,
   spacing and shape for every one of them; two neutral faces, filled for a category and outlined
   for a classification. The kind chip, the review badge and the year badge keep their own
   colours, which say what kind of number it is, that the review is open, and how old the reading is. */
:where(.jr-kind, .ph-chip, .ph-gaps .jr-kind, .ph-nb .nb-kind, .db2-chip, .overview-kind, .src-kind, .cal-cert, .cal-kind, .jr-mx-tag, .src-tier, .kindchip, .reviewbadge, .lg-year, .ph-tags>span){
  font-size:var(--t5); font-weight:600; letter-spacing:.06em; text-transform:uppercase; line-height:1.3;
  border-radius:999px; padding:2px 8px; white-space:nowrap}
:where(.jr-kind, .ph-chip, .ph-gaps .jr-kind, .ph-nb .nb-kind, .db2-chip){background:var(--surface-3); color:var(--ink-soft); border:0}
:where(.overview-kind, .src-kind, .src-tier, .cal-cert, .cal-kind, .jr-mx-tag){background:transparent; color:var(--muted); border:1px solid var(--hairline-strong); padding:1px 8px}

/* The skeleton: a shape where a value will be, breathing until it lands. `.skeleton` for new
   work (--text a line of type, --tile a card-sized block); the four waits the atlas already draws
   (the Data Table's, the home blocks', Country Trends' and the phone's) take the same look, one
   animation where there were two copies of it. Still under reduced motion. */
:where(.skeleton, .bwait i, .bwait b, .home-items.is-loading i, .db2-wait b, .db2-wait i, .ph-wait i){
  display:block; background:linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 45%, var(--surface) 90%);
  background-size:220% 100%; animation:skeletonWait 1.5s ease-in-out infinite}
:where(.skeleton){border-radius:7px}
:where(.skeleton--text){height:12px; width:min(560px, 80%)}
:where(.skeleton--tile){height:118px; border-radius:var(--radius)}
@keyframes skeletonWait{0%{background-position:120% 0}100%{background-position:-20% 0}}
@media (prefers-reduced-motion: reduce){
  :where(.skeleton, .bwait i, .bwait b, .home-items.is-loading i, .db2-wait b, .db2-wait i, .ph-wait i){animation:none; background:var(--surface-2)}
}

/* The keycap: a key named in the text («⌘K», «Esc», ↑ ↓), its bottom edge a little heavier, which
   is what makes a rectangle read as a key. `.keycap--press` is a key a reader can press: taller,
   darker under the pointer, pressed in on a click. */
:where(.keycap, .mast-kbd, .finder-keys kbd, .navpane-foot kbd, .fstep kbd){
  display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 4px; box-sizing:border-box;
  font:600 var(--t5)/1 var(--font-ui); letter-spacing:0; text-transform:none; color:var(--ink-soft);
  background:var(--surface); border:1px solid var(--line); border-bottom-width:2px; border-radius:3px}
:where(.keycap--press){height:26px; min-width:26px; padding:0 8px; border-bottom-width:3px; border-radius:7px; color:var(--muted); cursor:pointer}
:where(.keycap--press):hover{color:var(--ink); border-color:var(--hairline-strong)}
:where(.keycap--press):active{border-bottom-width:1px; transform:translateY(2px)}

/* The underline tabs (plan item 94, stage 5; prototype/switch.html): a strip of the views that
   share a category. Whole names, never cut; the chosen one bold over a 3px rule in the brand's
   red (decision 2: the chosen tab of a strip of tabs carries it), so not by colour alone; 40px
   targets. The WAI-ARIA tab pattern: role="tablist" on the strip, role="tab" with
   aria-selected on each. A strip longer than its row scrolls, and fades on the side with more
   (`.more-l`, `.more-r`, set by the script that knows the scroll); a mask reads only opacity,
   so any solid token draws it. */
:where(.tabs-u){display:flex; align-items:stretch; gap:2px; min-width:0; overflow-x:auto; scrollbar-width:none; scroll-padding:0 24px}
:where(.tabs-u)::-webkit-scrollbar{display:none}
:where(.tabs-u [role="tab"]){flex:none; min-height:40px; padding:0 8px; border:0; border-bottom:3px solid transparent;
  background:none; color:var(--ink-soft); font:inherit; font-size:var(--t4); white-space:nowrap; cursor:pointer}
:where(.tabs-u [role="tab"]):hover{color:var(--ink); background:var(--surface-2)}
:where(.tabs-u [role="tab"][aria-selected="true"]){color:var(--ink); font-weight:700; border-bottom-color:var(--brand)}
:where(.tabs-u [role="tab"]):focus-visible{outline:2px solid var(--focus); outline-offset:-3px}
:where(.tabs-u.more-r){-webkit-mask-image:linear-gradient(to right,var(--ink) calc(100% - 48px),transparent); mask-image:linear-gradient(to right,var(--ink) calc(100% - 48px),transparent)}
:where(.tabs-u.more-l){-webkit-mask-image:linear-gradient(to left,var(--ink) calc(100% - 48px),transparent); mask-image:linear-gradient(to left,var(--ink) calc(100% - 48px),transparent)}
:where(.tabs-u.more-l.more-r){-webkit-mask-image:linear-gradient(to right,transparent,var(--ink) 48px,var(--ink) calc(100% - 48px),transparent); mask-image:linear-gradient(to right,transparent,var(--ink) 48px,var(--ink) calc(100% - 48px),transparent)}

/* The field: a select or a search box, the look of the measure picker and the panel search that
   Stream 1 drew from prototype/switch.html (owner, 7 Oct 2026: «Unify the looks»). White, a line,
   the field corner, ink. Each keeps its own size and padding; the place bar's pickers (.jr-region)
   are a title, not a field, and stay as they are. */
:where(.mpicker .mpick, .bsheet-compare select, #briefFilter, .network-select, .primer-setting select, .dossier-compare select, .opt-select, .db2-pick select, .jr-compare select, .ph-find input, .ph-search-top input){
  background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:7px}

/* The table head: the column names over a table, in small muted capitals (owner, 7 Oct 2026:
   «Unify the looks»). The Data Table, the sources, the region page's tables, the tablet's table
   and the framing tables; each keeps its own background, border and padding. The framing table
   keeps its own size, which the Data Table's reading mode scales. */
:where(.bsheet thead th, .imp-table thead th, .jr-tbl th, .ph-table th, .dossier-framing .framing-table th){
  font-family:var(--font-ui); font-size:var(--t5); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}

/* The toast: a word that something happened, and gone again. One look on every device (owner,
   7 Oct 2026: «Unify the looks»): a white card with a line and a shadow, as the map's chrome is,
   ink on it. Where each stands and how it comes and goes stays with its own sheet. */
:where(.ph-toast){
  background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow);
  font-size:var(--t4); font-weight:600}

/* A country the page cannot show, said once at its top (item 91, 3.3). */
.page-stranger{margin:12px 16px;padding:8px 12px}
.page-toast{position:fixed;top:84px;left:50%;transform:translateX(-50%);z-index:90;max-width:min(560px,90vw);margin:0;padding:10px 14px}
/* The empty state: a view, panel or ranking with nothing to show (STYLEGUIDE.md 2.6). Its words
   muted; with a title, the title over its line in a column; standing alone in a list, framed by
   the strong hairline (item 92, stage 9j). The atlas's nine and the pages' eight wrote these lines each; where each
   stands and how large it is stays with its own rule. */
:where(.p-empty, .map-empty span:last-child, .rank-empty, .detail-empty span, .network-empty span, .chart-unavailable, .category-unavailable, .nodata, .bsheet-empty, .overview-empty, .home-empty, .cal-empty, .adm-empty, .ex-empty, .jr-empty, .ph-empty, .grid-empty, .grid-map.is-none){color:var(--muted)}
:where(.map-empty, .shell-panel .p-empty, .detail-empty, .network-empty, .chart-unavailable){display:flex; flex-direction:column}
:where(.map-empty b, .shell-panel .p-empty b, .detail-empty b){font-size:var(--t3)}
:where(.map-empty span:last-child, .detail-empty span){font-size:var(--t4); margin-top:3px}
:where(.rank-empty, .category-unavailable){border:1px solid var(--hairline-strong); border-radius:7px; font-size:var(--t4)}

/* The note: a short aside inside a card, on the third surface. The phone gave the gap card's
   note the brand's soft red, which marks a selection only (DESIGN.md). */
:where(.jr-gap-note, .ph-gaps .jr-gap-note){background:var(--surface-3); color:var(--ink); border-radius:7px}

/* The wait for the catalogue (item 91, 10.7). A page in German, French or Italian showed the
   template's English until the script had run. Its words now wait for the catalogue's pass
   (`data-i18n`, set by translateDocument), and show after 2 seconds whatever happens. */
html:not([lang="en"]):not([data-i18n]) [data-t]{visibility:hidden; animation:catalogueWait 0s 2s forwards}
@keyframes catalogueWait{to{visibility:visible}}

/* The map's colour per class, on every page (owner, 17 Oct 2026: the phone's and the tablet's maps in the map's
   own colours): atlas.css paints the Atlas's map with them, and map-fill.js fillToken reads them for a map drawn
   with fills (the map overview's small maps, the phone, the tablet). Moved from atlas.css, unchanged. */
.shell-country.trade-tier-0{fill:var(--trade-0)}.shell-country.trade-tier-1{fill:var(--trade-1)}
.shell-country.trade-tier-2{fill:var(--trade-2)}.shell-country.trade-tier-3{fill:var(--trade-3)}
.shell-country.trade-tier-4{fill:var(--trade-4)}
.shell-country.balance-surplus-0{fill:var(--surplus-0)}.shell-country.balance-surplus-1{fill:var(--surplus-1)}
.shell-country.balance-surplus-2{fill:var(--surplus-2)}.shell-country.balance-surplus-3{fill:var(--surplus-3)}
.shell-country.balance-surplus-4{fill:var(--surplus-4)}
.shell-country.balance-deficit-0{fill:var(--deficit-0)}.shell-country.balance-deficit-1{fill:var(--deficit-1)}
.shell-country.balance-deficit-2{fill:var(--deficit-2)}.shell-country.balance-deficit-3{fill:var(--deficit-3)}
.shell-country.balance-deficit-4{fill:var(--deficit-4)}
.shell-country.rights-tier-0{fill:var(--risk-0)}.shell-country.rights-tier-1{fill:var(--risk-1)}
.shell-country.rights-tier-2{fill:var(--risk-2)}.shell-country.rights-tier-3{fill:var(--risk-3)}
.shell-country.rights-tier-4{fill:var(--risk-4)}
.shell-country.align-tier-0{fill:var(--align-0)}.shell-country.align-tier-1{fill:var(--align-1)}
.shell-country.align-tier-2{fill:var(--align-2)}.shell-country.align-tier-3{fill:var(--align-3)}
.shell-country.align-tier-4{fill:var(--align-4)}.shell-country.align-tier-5{fill:var(--allyru-3)}
.shell-country.neutral-tier-0{fill:var(--neutral-0)}.shell-country.neutral-tier-1{fill:var(--neutral-1)}
.shell-country.neutral-tier-2{fill:var(--neutral-2)}.shell-country.neutral-tier-3{fill:var(--neutral-3)}
.shell-country.neutral-tier-4{fill:var(--neutral-4)}
.shell-country.allyus-tier-0{fill:var(--allyus-0)}.shell-country.allyus-tier-1{fill:var(--allyus-1)}.shell-country.allyus-tier-2{fill:var(--allyus-2)}.shell-country.allyus-tier-3{fill:var(--allyus-3)}.shell-country.allyus-tier-4{fill:var(--allyus-4)}
.shell-country.allycn-tier-0{fill:var(--allycn-0)}.shell-country.allycn-tier-1{fill:var(--allycn-1)}.shell-country.allycn-tier-2{fill:var(--allycn-2)}.shell-country.allycn-tier-3{fill:var(--allycn-3)}.shell-country.allycn-tier-4{fill:var(--allycn-4)}
.shell-country.allyru-tier-0{fill:var(--allyru-0)}.shell-country.allyru-tier-1{fill:var(--allyru-1)}.shell-country.allyru-tier-2{fill:var(--allyru-2)}.shell-country.allyru-tier-3{fill:var(--allyru-3)}.shell-country.allyru-tier-4{fill:var(--allyru-4)}
.shell-country.allyau-tier-0{fill:var(--allyau-0)}.shell-country.allyau-tier-1{fill:var(--allyau-1)}.shell-country.allyau-tier-2{fill:var(--allyau-2)}.shell-country.allyau-tier-3{fill:var(--allyau-3)}.shell-country.allyau-tier-4{fill:var(--allyau-4)}

/* The map's «Pages» menu in the masthead (item 153): the place bar's links, folded as the bar folds them. */
.mast-pages{position:relative}
.mast-pages>summary{list-style:none}
.mast-pages>summary::-webkit-details-marker{display:none}
/* Closed, the list is out of the layout and the tab order: a closed <details> still lays out its content in Chromium,
   and the masthead's own check (imprint.spec.js) found six links on screen that no click could reach. */
.mast-pages:not([open])>.mast-pages-list{display:none}
.mast-pages-list{position:absolute;right:0;top:calc(100% + 6px);z-index:60;display:flex;flex-direction:column;gap:2px;min-width:200px;padding:6px}
.mast-pages-list>a{padding:8px 10px;border-radius:7px;white-space:nowrap;color:var(--ink);text-decoration:none;font:500 var(--t4)/1.2 var(--font-ui)}
.mast-pages-list>a:hover{background:var(--surface-2)}

/* The Country tab's foot (item 159, stage 2): the star, the gaps and the Overview; and the report beside the figure. */
.panelmore{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:8px}
.panelmore .jr-star{border:1px solid var(--hairline-strong);border-radius:999px;background:var(--surface);color:var(--muted);cursor:pointer;padding:2px 8px}
.panelmore .jr-star[aria-pressed="true"]{color:var(--brand);border-color:var(--brand)}
.panelmore-link{color:var(--ink);font:500 var(--t4)/1.3 var(--font-ui)}
.report-row{margin:10px 0 0}
.report-open{border:0;background:none;padding:0;color:var(--muted);text-decoration:underline;cursor:pointer;font:inherit}
.report-form{display:grid;gap:6px;margin-top:6px}
.report-form textarea{width:100%;font:inherit}