/* UN Comtrade, server-rendered pages (redesign pilot).
   Layout follows un.org: grey brand bar with a 5px UN-blue rule, white masthead, main menu,
   content, dark-grey footer. Colours meet the UN enhanced-contrast rule (7:1 for text, see
   REDESIGN.md "Standards"). Only logical properties (inline/block) are used so the same rules
   work right-to-left for Arabic. Sizes are in rem so text can be enlarged to 400%. */

:root {
  --paper: #FFFFFF;
  --brandbar: #F2F2F2;
  --tint: #E6F4FB;
  --line: #D6D6D6;
  --field-border: #6B7075;
  --ink: #1A1C1E;
  --ink-soft: #4A4F54;
  --accent: #004B75;
  --accent-hover: #00314D;
  --on-accent: #FFFFFF;
  --un-blue: #009EDB;          /* decorative only: 3:1 on white */
  --amber: #C98A00;            /* decorative only */
  --analytical: #6B4600;       /* the Analytical data-type label, white text 8.4:1 */
  --estimate: #8A5A00;         /* estimated-value mark, 5.9:1 on white */
  --footer: #333333;
  --footer-soft: #D0D0D0;
  --new: #8A3209;
  --error: #A30000;
  --error-bg: #FDECEC;
  --row-alt: #F7F7F7;
  --focus: #004B75;
  --radius: 0.375rem;
  --wrap: 75rem;
  --measure: none;             /* longest line of running text: full width of the page (set e.g. 80ch to limit it) */
  --font: Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Roboto Condensed", "Arial Narrow", Roboto, Arial, sans-serif;
}

:lang(ar) { --font: "Segoe UI", Tahoma, "Noto Sans Arabic", "Noto Naskh Arabic", "Geeza Pro", sans-serif; --font-display: var(--font); }
:lang(zh) { --font: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", "Noto Sans CJK SC", "Hiragino Sans GB", sans-serif; --font-display: var(--font); }
/* Letter-spacing breaks Arabic joining and spoils CJK; uppercase doesn't exist in either. */
:lang(ar) *, :lang(zh) * { letter-spacing: 0 !important; text-transform: none !important; }
:lang(zh) body { line-height: 1.7; }
:lang(ar) body { line-height: 1.75; }

*, *::before, *::after { box-sizing: border-box; }
/* "hidden" always wins: components below set display (flex, grid...), which would otherwise show it. */
[hidden] { display: none !important; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 1rem; line-height: 1.55; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.2; margin: 0; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { max-inline-size: 100%; }
a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.15em; }
a:hover { color: var(--accent-hover); text-decoration-thickness: 0.12em; }
:focus-visible { outline: 0.1875rem solid var(--focus); outline-offset: 0.125rem; }
.un-footer :focus-visible { outline-color: #FFFFFF; }
main:focus, .nav:focus { outline: none; }
/* Headings and the error summary receive focus from script after a query; they aren't controls. */
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus, .error-summary:focus { outline: none; }
.icon { inline-size: 1em; block-size: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -0.125em; }
[dir="rtl"] .icon.flip { transform: scaleX(-1); }
.sprite { display: none; }
.email { white-space: nowrap; }
.keep-together { white-space: nowrap; }
/* A-Z site index */
.index-letters { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-block: 1rem 0.5rem; }
.index-letters a { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 2.75rem; min-block-size: 2.75rem; border: 1px solid var(--field-border); border-radius: var(--radius); font-weight: 700; text-decoration: none; }
.index-letters a:hover { background: var(--tint); }
.index-letter h2 { border-block-end: 1px solid var(--line); padding-block-end: 0.25rem; }
.index-list { display: flex; flex-direction: column; gap: 0.5rem; }
.index-context { color: var(--ink-soft); font-size: 0.875rem; margin-inline-start: 0.5rem; }
.index-list .tag { margin-inline-start: 0.5rem; }
.index-list .external { inline-size: 0.8rem; block-size: 0.8rem; margin-inline-start: 0.25rem; }
/* The "@" of an address, drawn here so the address is never written in the page (Site/SiteEmail.cs). */
.email-at::before { content: "@"; }
.visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { max-inline-size: var(--wrap); margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 48em) { .wrap { padding-inline: 1.5rem; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* Skip links */
/* Hidden until focused. Clipped rather than moved off-screen: inside the fixed brand bar an
   off-screen link would sit over the page and be measured against it by contrast checkers. */
.skip-links a { position: absolute; inset-inline-start: 1rem; inset-block-start: 0; z-index: 100; background: var(--accent); color: var(--on-accent); padding: 0.75rem 1rem; font-weight: 700; }
.skip-links a:not(:focus) { inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Brand bar */
.brandbar { background: var(--brandbar); border-block-end: 0.3125rem solid var(--un-blue); font-size: 0.8125rem; }
.brandbar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1.5rem; padding-block: 0.5rem; }
.brandbar a { color: var(--ink); text-decoration: none; }
.brandbar a:hover { text-decoration: underline; }
.welcome { display: inline-flex; align-items: center; gap: 0.5rem; }
.langs { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.langs a { display: inline-block; padding-block: 0.25rem; }
.langs a[aria-current="true"] { font-weight: 700; text-decoration: underline; text-decoration-thickness: 0.12em; }
.langs-nav { position: relative; }
.langs-toggle { font: inherit; font-size: 0.8125rem; align-items: center; gap: 0.4rem; min-block-size: 2.25rem; padding-inline: 0.5rem; background: none; border: 1px solid transparent; border-radius: var(--radius); color: var(--ink); cursor: pointer; }
.langs-toggle:hover { border-color: var(--field-border); }
.langs-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }
/* Small screens with JavaScript: one-line bar, languages in a drop-down list (as on un.org).
   Without JavaScript the list simply stays visible and wraps. */
@media (max-width: 47.99em) {
  .js .langs-toggle { display: inline-flex; }
  .js .langs { display: none; }
  .js .langs.is-open { display: flex; flex-direction: column; gap: 0; position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 0.5rem); z-index: 40; min-inline-size: 11rem; padding-block: 0.25rem; background: var(--brandbar); border: 1px solid var(--line); border-block-end: 0.3125rem solid var(--un-blue); box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.16); }
  .js .langs.is-open a { display: block; padding: 0.6rem 1rem; }
}
@media (min-width: 48em) { .langs-toggle { display: none !important; } }
/* As on un.org, the brand bar stays at the top while the page scrolls: on wide screens always, on
   small screens once JavaScript has folded it to one line. Not on very short viewports (e.g. 400%
   zoom, landscape phones), where it would cover too much of the page (WCAG 1.4.10). scroll-padding
   keeps skip-link and #anchor targets from landing under it. */
@media (min-height: 30em) {
  .js .brandbar { position: sticky; inset-block-start: 0; z-index: 30; }
  html.js { scroll-padding-block-start: 3.5rem; }
}
@media (min-width: 48em) and (min-height: 30em) {
  .brandbar { position: sticky; inset-block-start: 0; z-index: 30; }
  html { scroll-padding-block-start: 3.5rem; }
}

/* Masthead */
.masthead-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; padding-block: 1.25rem; }
.brand { display: flex; align-items: center; gap: 0.875rem; color: var(--ink); text-decoration: none; margin-inline-end: auto; }
.brand:hover { color: var(--ink); }
.brand:hover .brand-name { text-decoration: underline; }
.brand-mark { inline-size: 2.75rem; block-size: 2.75rem; color: var(--un-blue); }
.brand-text { display: flex; flex-direction: column; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.625rem; line-height: 1.1; }
.brand-sub { font-size: 0.875rem; color: var(--ink-soft); }

/* Buttons */
.btn { font: inherit; font-size: 0.9375rem; font-weight: 700; display: inline-flex; align-items: center; gap: 0.5rem; min-block-size: 2.75rem; padding: 0.55rem 1.25rem; border-radius: var(--radius); border: 2px solid var(--accent); text-decoration: none; cursor: pointer; line-height: 1.2; }
.btn-solid { background: var(--accent); color: var(--on-accent); }
.btn-solid:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.btn-ghost { background: var(--paper); color: var(--accent); }
.btn-ghost:hover { color: var(--accent-hover); border-color: var(--accent-hover); }
/* Disabled (not while busy, site.js .is-busy, which keeps its colours): greyed, with a "not allowed" cursor. */
.btn:disabled:not(.is-busy) { background: var(--tint); border-color: var(--line); color: var(--ink-soft); cursor: not-allowed; }
.btn-link { background: none; border-color: transparent; color: var(--accent); text-decoration: underline; padding-inline: 0.25rem; }

/* Main menu (Option A, mega menu) */
.nav { position: relative; z-index: 20; border-block: 1px solid var(--line); background: var(--paper); }
.nav-inner { display: flex; flex-wrap: wrap; align-items: stretch; }
.nav-toggle { font: inherit; font-weight: 700; display: inline-flex; align-items: center; gap: 0.5rem; min-block-size: 3rem; background: none; border: 0; color: var(--ink); cursor: pointer; padding: 0; }
.nav-toggle .icon { inline-size: 1.25rem; block-size: 1.25rem; }
.nav-list { display: flex; flex-wrap: wrap; gap: 0 0.25rem; }
.nav-section > summary, .nav-link { display: flex; align-items: center; gap: 0.4rem; min-block-size: 3.25rem; padding-inline: 0.875rem; font-weight: 500; color: var(--ink); text-decoration: none; cursor: pointer; border-block-end: 0.25rem solid transparent; list-style: none; }
.nav-section > summary::-webkit-details-marker { display: none; }
.nav-section > summary:hover, .nav-link:hover { border-block-end-color: var(--line); color: var(--ink); }
.nav-section.is-current > summary { border-block-end-color: var(--un-blue); font-weight: 700; }
.nav-section[open] > summary { background: var(--tint); border-block-end-color: var(--un-blue); font-weight: 700; }
.nav-section[open] .chevron { transform: rotate(180deg); }
.nav-link .external { inline-size: 0.875rem; block-size: 0.875rem; }

.mega { background: var(--paper); border-block-end: 1px solid var(--line); }
.mega-inner { display: grid; gap: 2rem; padding-block: 1.75rem 2rem; }
.mega-title { display: block; font-family: var(--font); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); padding-inline: 0.75rem; margin-block-end: 0.5rem; }
.mega-group ul { display: flex; flex-direction: column; gap: 0.25rem; }
.mega-link.is-parent { padding-block-end: 0.25rem; }
.mega-link.is-parent .mega-label { font-weight: 700; }
.mega-link.is-parent:hover .mega-label { text-decoration: none; color: var(--ink); }
.mega-group ul.mega-sub { gap: 0; margin-inline-start: 1rem; padding-inline-start: 0.25rem; border-inline-start: 2px solid var(--line); }
/* Under an item with an icon, the sub-list lines up with the item's text. */
.featured-parent > ul.mega-sub { margin-inline-start: 4.4rem; }
.mega-sub .mega-label, .featured .mega-sub .mega-label { font-weight: 500; }
.mega-sub .mega-link { min-block-size: 2.5rem; padding-block: 0.45rem; font-size: 0.9375rem; }
.mega-link { display: flex; gap: 0.875rem; align-items: flex-start; min-block-size: 2.75rem; padding: 0.6rem 0.75rem; border-inline-start: 0.25rem solid transparent; color: var(--ink); text-decoration: none; }
.mega-link:hover .mega-label { text-decoration: underline; color: var(--accent-hover); }
.mega-link.is-current { border-inline-start-color: var(--un-blue); background: var(--tint); }
.mega-link.is-soon { color: var(--ink-soft); }
.mega-link.is-soon .mega-icon { background: var(--brandbar); color: var(--ink-soft); }
.mega-icon { flex: none; inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--radius); background: var(--tint); color: var(--accent); display: grid; place-items: center; }
.mega-link.is-current .mega-icon { background: var(--paper); }
.mega-icon .icon { inline-size: 1.25rem; block-size: 1.25rem; }
.mega-text { display: flex; flex-direction: column; gap: 0.2rem; min-inline-size: 0; }
.mega-label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-weight: 500; }
.featured .mega-label { font-weight: 700; }
.mega-desc { font-size: 0.875rem; color: var(--ink-soft); line-height: 1.45; }
.mega-link .external { inline-size: 0.8rem; block-size: 0.8rem; }

.tag { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; font-weight: 500; line-height: 1.3; padding: 0.05rem 0.4rem; border: 1px solid var(--field-border); border-radius: 0.25rem; color: var(--ink-soft); white-space: nowrap; }
.tag .icon { inline-size: 0.75rem; block-size: 0.75rem; }
.tag-new { background: var(--new); border-color: var(--new); color: #FFFFFF; font-weight: 700; }
/* Releases (home, Recent releases): new in light blue, revised in light amber; text 7:1 or more on both */
.tag-release-new { background: #DCEEFA; border-color: #004B75; color: #003A5C; font-weight: 700; }
.tag-release-revised { background: #FFF1C2; border-color: #8A5A00; color: #4D3300; font-weight: 700; }

@media (min-width: 64em) {
  .nav-toggle { display: none !important; }
  .mega { position: absolute; inset-inline: 0; inset-block-start: 100%; box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.14); }
  .mega-4 { grid-template-columns: 1.2fr 1.2fr 1fr 1fr; }
  .mega-1, .mega-2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mega-3 { grid-template-columns: 1.2fr 1.2fr 1fr; }
  /* A section with one list: three columns filled top to bottom, so the order reads down each
     column (e.g. Metadata: notes, tables | data availability | correlation, survey). */
  .mega-1 .mega-group > ul { display: block; columns: 3; column-gap: 2rem; }
  .mega-1 .mega-group > ul > li { break-inside: avoid; margin-block-end: 0.25rem; }
  .mega-1 .mega-group { grid-column: 1 / -1; }
}
@media (max-width: 63.99em) {
  .nav-inner { flex-direction: column; align-items: stretch; }
  .nav-list { flex-direction: column; padding-block-end: 0.75rem; }
  .js .nav-list:not(.is-open) { display: none; }
  .nav-section > summary, .nav-link { justify-content: space-between; border-block-end: 1px solid var(--line); padding-inline: 0.5rem; }
  .nav-section.is-current > summary, .nav-section[open] > summary { border-inline-start: 0.25rem solid var(--un-blue); border-block-end-color: var(--line); }
  .mega-inner { padding: 0.75rem 0 1rem; gap: 1rem; }
}

/* Notices and errors */
.notice { margin-block: 1rem; padding: 0.875rem 1rem; background: var(--tint); border: 1px solid var(--line); border-radius: var(--radius); }
.notice-error { background: var(--error-bg); border-color: var(--error); border-inline-start-width: 0.25rem; }
/* Session warning (_SiteLayout, site.js): "Are you still there?" before the session ends, then "You have been logged out". */
.session-dialog { inline-size: min(32rem, calc(100vw - 2rem)); padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); }
.session-dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
.session-dialog h2 { font-size: 1.25rem; margin-block: 0 0.5rem; }
.session-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block-start: 1.25rem; }
.session-actions form { margin: 0; }
.error-summary { border: 0.1875rem solid var(--error); background: var(--error-bg); border-radius: var(--radius); padding: 1rem 1.25rem; margin-block-end: 1.5rem; }
.error-summary h2 { font-size: 1.25rem; color: var(--error); margin-block-end: 0.5rem; }
.error-summary ul { list-style: disc; padding-inline-start: 1.25rem; }
.error-summary a { color: var(--error); font-weight: 700; }
.field-error { color: var(--error); font-weight: 700; font-size: 0.9375rem; }

/* Page furniture */
.breadcrumb { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; font-size: 0.875rem; color: var(--ink-soft); padding-block: 1.25rem 0.5rem; }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-inline-start: 0.5rem; }
.eyebrow { display: block; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-block-end: 0.75rem; }
.lede { color: var(--ink-soft); max-inline-size: var(--measure); margin-block-end: 1.75rem; }
.section { padding-block: 3rem; }
.section > h2, .section-title { font-size: 1.75rem; margin-block-end: 0.5rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* Text pages (accessibility statement and similar) */
/* Inside .wrap, so the text starts at the same edge as the header and breadcrumb. */
.prose { max-inline-size: var(--measure); }
.prose h1 { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.5rem); margin-block-end: 0.75rem; }
.prose h2 { font-size: 1.5rem; margin-block: 2rem 0.6rem; }
.prose p { margin-block-end: 0.75rem; max-inline-size: var(--measure); }
.prose .bullets { list-style: disc; padding-inline-start: 1.5rem; display: flex; flex-direction: column; gap: 0.4rem; margin-block-end: 0.75rem; max-inline-size: var(--measure); }
.prose .reviewed { margin-block-start: 2.5rem; color: var(--ink-soft); font-size: 0.9375rem; }

/* Home: hero with HS code cards */
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 3rem; align-items: center; padding-block: 3rem; }
.hero h1 { font-size: clamp(2.125rem, 1.5rem + 2.6vw, 3.125rem); margin-block-end: 1rem; }
.hero .sub { font-size: 1.125rem; color: var(--ink-soft); max-inline-size: 52ch; margin-block-end: 1.75rem; }
.hero .sub p + p { margin-block-start: 0.75rem; }
.codes { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.5rem; background: var(--tint); border-radius: var(--radius); }
.code { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); align-items: center; gap: 1rem; background: var(--paper); border: 1px solid var(--line); border-inline-start: 0.3125rem solid var(--un-blue); border-radius: var(--radius); padding: 0.85rem 1rem; color: var(--ink); text-decoration: none; }
.code:hover { border-block-color: var(--accent); border-inline-end-color: var(--accent); }
.code:nth-child(2) { margin-inline-start: 1.5rem; border-inline-start-color: var(--amber); }
.code:nth-child(3) { margin-inline-start: 3rem; border-inline-start-color: var(--accent); }
.code .hs { font-family: var(--font-display); font-weight: 700; font-size: 1.75rem; font-variant-numeric: tabular-nums; direction: ltr; text-align: start; }
.code .hs small { display: block; font-family: var(--font); font-size: 0.6875rem; letter-spacing: 0.08em; color: var(--ink-soft); }
.code .name { font-weight: 500; color: var(--accent); text-decoration: underline; text-underline-offset: 0.15em; }
.code:hover .name { color: var(--accent-hover); }
.code .ch { display: block; font-size: 0.8125rem; color: var(--ink-soft); }
@media (max-width: 60em) { .hero .wrap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40em) { .code:nth-child(2), .code:nth-child(3) { margin-inline-start: 0; } }

.topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.topic a { display: flex; flex-direction: column; gap: 0.35rem; block-size: 100%; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.topic a:hover { border-color: var(--accent); }
.topic .tt { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--accent); text-decoration: underline; text-underline-offset: 0.15em; }
.topic a:hover .tt { color: var(--accent-hover); }
.topic .ex { font-size: 0.9375rem; color: var(--ink-soft); }
.topic .hsref { margin-block-start: auto; padding-block-start: 0.5rem; font-size: 0.8125rem; font-weight: 700; color: var(--ink-soft); }
@media (max-width: 60em) { .topics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40em) { .topics { grid-template-columns: minmax(0, 1fr); } }

.regions { background: var(--brandbar); border-block: 1px solid var(--line); }
.region-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; }
.region-list h3 { font-size: 1.125rem; margin-block-end: 0.5rem; padding-block-end: 0.4rem; border-block-end: 0.25rem solid var(--un-blue); }
.region-list ul { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9375rem; }
@media (max-width: 60em) { .region-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 40em) { .region-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.steps li { display: flex; flex-direction: column; gap: 0.5rem; }
.steps .n { inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%; border: 2px solid var(--accent); color: var(--accent); display: grid; place-items: center; font-weight: 700; font-size: 1.125rem; }
.steps h3 { font-size: 1.1875rem; }
.steps p { color: var(--ink-soft); font-size: 0.9375rem; max-inline-size: 36ch; }
@media (max-width: 48em) { .steps { grid-template-columns: minmax(0, 1fr); } }

.releases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2rem; border-block-start: 1px solid var(--line); }
.releases li { display: flex; gap: 0.75rem; align-items: baseline; padding-block: 0.875rem; border-block-end: 1px solid var(--line); }
.releases .what { display: block; font-weight: 700; }
.releases .when { display: block; font-size: 0.875rem; color: var(--ink-soft); }
@media (max-width: 60em) { .releases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40em) { .releases { grid-template-columns: minmax(0, 1fr); } }

/* Query forms */
.query { border: 1px solid var(--line); border-block-start: 0.3125rem solid var(--un-blue); border-radius: var(--radius); padding: 1.5rem; margin-block-end: 2rem; display: flex; flex-direction: column; gap: 1.5rem; }
.query-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.5rem 2.5rem; }
@media (max-width: 52em) { .query-grid { grid-template-columns: minmax(0, 1fr); } .query { padding: 1.25rem 1rem; } }
fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
legend, .label { font-weight: 700; font-size: 1rem; padding: 0; margin-block-end: 0.5rem; display: block; }
.hint { display: block; font-size: 0.875rem; color: var(--ink-soft); font-weight: 400; margin-block-end: 0.5rem; }
.checks { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.check { position: relative; display: inline-flex; }
.check input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.check label { display: inline-flex; align-items: center; gap: 0.4rem; min-block-size: 2.75rem; padding: 0.4rem 0.85rem; border: 1px solid var(--field-border); border-radius: var(--radius); background: var(--paper); cursor: pointer; font-variant-numeric: tabular-nums; }
.check label::before { content: ""; inline-size: 1rem; block-size: 1rem; border: 2px solid var(--field-border); border-radius: 0.2rem; flex: none; }
.check input:checked + label { background: #333333; border-color: #333333; color: #FFFFFF; font-weight: 700; }
/* The text takes the width it has in bold, selected or not: choosing an option doesn't move what follows
   (MBS's long "35: imports and exports..."). The bold copy is hidden, so it isn't read out. */
.check-text { display: inline-flex; flex-direction: column; }
.check-text::after { content: attr(data-text); content: attr(data-text) / ""; font-weight: 700; block-size: 0; overflow: hidden; visibility: hidden; }
.check input:checked + label::before { border-color: #FFFFFF; background: #FFFFFF; box-shadow: inset 0 0 0 0.2rem #333333; }
.check input:focus-visible + label { outline: 0.1875rem solid var(--focus); outline-offset: 0.125rem; }
.check label:hover { border-color: var(--ink); }
.has-error .check label, .has-error input[type="text"], .has-error select { border-color: var(--error); border-width: 2px; }
input[type="text"], select { font: inherit; inline-size: 100%; min-block-size: 2.75rem; padding: 0.5rem 0.75rem; border: 1px solid var(--field-border); border-radius: var(--radius); background: var(--paper); color: var(--ink); }
input[type="text"] { direction: ltr; text-align: start; }

/* Results */
.results-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 0.75rem 1.5rem; margin-block-end: 0.75rem; }
.results-head h2 { font-size: 1.5rem; }
.results-head p { color: var(--ink-soft); }
/* position: relative makes the wrapper the containing block of .visually-hidden text in the cells; otherwise
   that text is positioned against the page, escapes the scrolling box and makes the page very long. */
.table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table.data { border-collapse: collapse; inline-size: 100%; min-inline-size: 52rem; font-size: 0.9375rem; }
table.data caption { text-align: start; padding: 0.75rem 1rem; color: var(--ink-soft); font-size: 0.875rem; border-block-end: 1px solid var(--line); }
table.data th, table.data td { text-align: start; vertical-align: top; padding: 0.6rem 0.85rem; border-block-end: 1px solid var(--line); }
table.data thead th { background: var(--brandbar); font-size: 0.875rem; white-space: nowrap; }
table.data tbody tr:nth-child(even) { background: var(--row-alt); }
table.data .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data .nowrap { white-space: nowrap; }
table.data .code-cell { font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data th a { color: var(--ink); }
table.data th .icon { inline-size: 0.85rem; block-size: 0.85rem; }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-block-start: 1rem; }
.pager ul { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.pager a, .pager span.current { display: grid; place-items: center; min-inline-size: 2.75rem; min-block-size: 2.75rem; padding-inline: 0.5rem; border: 1px solid var(--field-border); border-radius: var(--radius); text-decoration: none; color: var(--ink); }
.pager a:hover { border-color: var(--ink); text-decoration: underline; }
.pager span.current { background: #333333; border-color: #333333; color: #FFFFFF; font-weight: 700; }
.empty { padding: 1.5rem; border: 1px dashed var(--field-border); border-radius: var(--radius); }

/* Footer (dark grey, mandatory per UN footer guideline) */
/* As on un.org: a 4px UN-blue line on top of the #333 footer. */
/* un.org: the site's links on #F2F2F2 (#454545 text, grey dots), then the #333 UN part under a 4px blue line. */
.site-footer { margin-block-start: 3rem; }
.footer-band { background: #F2F2F2; color: #454545; }
.footer-band a { color: #454545; text-decoration: none; }
.footer-band a:hover, .footer-band a:focus-visible, .footer-brand p a { text-decoration: underline; }
.un-footer { background: var(--footer); color: #FFFFFF; border-block-start: 0.25rem solid var(--un-blue); }
.un-footer a { color: #FFFFFF; }
.footer-top { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 2rem; padding-block: 2.5rem 3.75rem; }
.footer-name { font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; margin-block-end: 0.5rem; }
.footer-brand p { font-size: 0.9375rem; margin-block-end: 0.5rem; max-inline-size: 34ch; }
.footer-col h2 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-block-end: 0.875rem; }
.footer-col li { position: relative; padding-inline-start: 1.5rem; line-height: 1.5; }
.footer-col li + li { margin-block-start: 0.625rem; }
.footer-col li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.4em; inline-size: 0.6rem; block-size: 0.6rem; border-radius: 50%; background: #C4C4C4; }
.site-footer .external { inline-size: 0.75rem; block-size: 0.75rem; margin-inline-start: 0.25rem; vertical-align: -0.05em; }
.un-footer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.social { display: flex; gap: 1.75rem; }
.social a { display: flex; align-items: center; justify-content: center; min-inline-size: 2.75rem; min-block-size: 2.75rem; }
.social .icon { inline-size: 1.5rem; block-size: 1.5rem; }
/* The UN part of the footer, measured on un.org (bootstrap_un2 style.css): language-specific
   reverse logo 170px wide, 1px #5B5B5B divider, legal links in Roboto Medium 12px uppercase with
   0.77px tracking, separated by 3px grey bars. */
.un-footer .wrap { padding-block: 2rem 2.1rem; }
.un-brand { display: inline-block; }
.un-brand img { display: block; inline-size: 10.625rem; block-size: auto; }
.un-divider { border-block-start: 1px solid #5B5B5B; margin-block: 1rem 1.2rem; }
.legal { display: flex; flex-wrap: wrap; justify-content: flex-end; row-gap: 0.6rem; }
.legal li { padding-inline: 0.625rem 0.8rem; border-inline-end: 0.1875rem solid #808080; line-height: 1.1667; }
.legal li:last-child { padding-inline-end: 0; border-inline-end: 0; }
.legal a { font-family: var(--font); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.048rem; text-transform: uppercase; text-decoration: none; }
.legal a:hover, .legal a:focus-visible { text-decoration: underline; }
@media (max-width: 40em) { .legal { justify-content: flex-start; } }
@media (max-width: 60em) { .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40em) { .footer-top { grid-template-columns: minmax(0, 1fr); } }

/* Commodity picker island (Islands/src/commodity-picker.jsx) */
.picker { display: flex; flex-direction: column; gap: 0.75rem; }
.picker-combobox { display: flex; flex-direction: column; }
.picker-input { font: inherit; inline-size: 100%; min-block-size: 2.75rem; padding: 0.5rem 0.75rem; border: 1px solid var(--field-border); border-radius: var(--radius); background: var(--paper); color: var(--ink); }
.picker-combobox[data-invalid] .picker-input { border: 2px solid var(--error); }
.picker-input[data-focus-visible], .picker-input:focus-visible { outline: 0.1875rem solid var(--focus); outline-offset: 0.125rem; }
.picker-popover { inline-size: var(--trigger-width); max-block-size: 22rem; overflow: auto; background: var(--paper); border: 1px solid var(--field-border); border-radius: var(--radius); box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.16); }
.picker-list { padding: 0.25rem; outline: none; }
.picker-option { display: flex; gap: 0.75rem; align-items: baseline; padding: 0.55rem 0.75rem; border-radius: 0.25rem; cursor: pointer; outline: none; }
.picker-option[data-focused] { background: var(--tint); box-shadow: inset 0.25rem 0 0 var(--un-blue); }
.picker-code { font-weight: 700; font-variant-numeric: tabular-nums; min-inline-size: 4rem; direction: ltr; }
.picker-text { font-size: 0.9375rem; color: var(--ink-soft); }
.picker-empty { padding: 0.75rem; color: var(--ink-soft); }
.picker-taglist { display: flex; flex-wrap: wrap; gap: 0.5rem; outline: none; }
.picker-tag { display: inline-flex; align-items: center; gap: 0.25rem; padding-inline-start: 0.75rem; border: 1px solid #333333; background: #333333; color: #FFFFFF; border-radius: var(--radius); font-weight: 700; font-variant-numeric: tabular-nums; outline: none; }
.picker-tag[data-focus-visible] { outline: 0.1875rem solid var(--focus); outline-offset: 0.125rem; }
.picker-remove { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; background: none; border: 0; color: inherit; cursor: pointer; border-radius: var(--radius); }
.picker-remove svg { inline-size: 1rem; block-size: 1rem; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
.picker-remove[data-hovered] { background: #4D4D4D; }
.picker-remove[data-focus-visible] { outline: 0.1875rem solid #FFFFFF; outline-offset: -0.25rem; }

/* Content pages (reference tables, Labs, change log, license, subscriptions) */
.page-title { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.5rem); margin-block-end: 0.75rem; }

/* Data pages: the title with the data-type scale (Official / Analytical), and "About this data" under the lede */
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-block-end: 0.75rem; }
.page-head .page-title { margin: 0; }
.data-type { display: flex; flex-direction: column; gap: 0.375rem; align-items: flex-start; }
.data-type-label { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.data-type-scale { display: inline-flex; flex-wrap: wrap; border-radius: var(--radius); overflow: hidden; font-size: 0.9375rem; font-weight: 500; }
.data-type-scale > span { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; color: var(--ink-soft); background: var(--paper); }
.data-type-scale > .is-official { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.data-type-scale > .is-analytical { background: var(--analytical); color: var(--on-accent); font-weight: 700; }
.data-type-scale .icon { inline-size: 1.125rem; block-size: 1.125rem; }
.lede:has(+ .data-about) { margin-block-end: 0; }
.data-about { margin-block-end: 1.75rem; max-inline-size: var(--measure); }
.data-about > summary { cursor: pointer; color: var(--accent); font-weight: 500; min-block-size: 2.75rem; display: flex; align-items: baseline; gap: 0.625rem; padding-block: 0.625rem; }
/* A chevron: right (left in RTL) when closed, down when open. */
.data-about > summary::before { content: ""; flex: none; inline-size: 0.5rem; block-size: 0.5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-0.1em) rotate(-45deg); transition: transform 0.15s; }
[dir="rtl"] .data-about > summary::before { transform: translateY(-0.1em) rotate(135deg); }
.data-about[open] > summary::before { transform: translateY(-0.25em) rotate(45deg); }
.data-about > summary::-webkit-details-marker { display: none; }
.data-about > summary { list-style: none; }
.data-about > summary:hover { color: var(--accent-hover); text-decoration: underline; }
.data-about > p { padding-inline-start: 1.25rem; }
@media (min-width: 48rem) { .data-type { align-items: flex-end; } }
.section-tight { padding-block: 1.5rem; }
/* Home: topics close under the hero, releases straight after them (no inline styles: the CSP refuses them). */
.section.home-topics { padding-block-start: 1rem; }
.section.home-releases { padding-block-start: 0; }
.section-tight > h2 { font-size: 1.5rem; margin-block-end: 0.75rem; }
.section-intro { color: var(--ink-soft); max-inline-size: var(--measure); margin-block-end: 1rem; }
.aside-note { color: var(--ink-soft); font-size: 0.9375rem; max-inline-size: var(--measure); margin-block: 1rem; }
.prose-block > p, .prose-block > ul { max-inline-size: var(--measure); margin-block-end: 0.75rem; }
.bullets { list-style: disc; padding-inline-start: 1.5rem; display: flex; flex-direction: column; gap: 0.4rem; }
.link-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 0 2rem; border-block-start: 1px solid var(--line); }
.link-list li { display: flex; flex-direction: column; gap: 0.15rem; padding-block: 0.75rem; border-block-end: 1px solid var(--line); }
.link-list a { font-weight: 700; }
.link-list span { font-size: 0.9375rem; color: var(--ink-soft); }
table.data.compact { min-inline-size: 0; }
table.data .cell-note { display: block; font-weight: 400; font-size: 0.875rem; color: var(--ink-soft); }
table.data tbody th { font-weight: 700; }
.inline-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.inline-links a { display: inline-block; padding-block: 0.3rem; font-variant-numeric: tabular-nums; }
.pager .gap { display: grid; place-items: center; min-block-size: 2.75rem; }
.table-title { font-size: 1.1875rem; margin-block: 1.5rem 0.6rem; }

/* Filter / search box above a list */
.filter { margin-block-end: 1.5rem; max-inline-size: 40rem; }
.filter-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.filter-row input { flex: 1 1 14rem; inline-size: auto; }
.count { color: var(--ink-soft); margin-block-end: 1rem; }

/* Cards (Labs) */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 1.25rem; }
.card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.card-img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--brandbar); border-block-end: 1px solid var(--line); }
.card-body { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem 1.25rem 1.25rem; }
.card-body h3 { font-size: 1.1875rem; }
.card-body h3 .external { inline-size: 0.8rem; block-size: 0.8rem; margin-inline-start: 0.2rem; }
.card-meta { font-size: 0.875rem; font-weight: 500; color: var(--ink-soft); }
.card-body p:last-child { font-size: 0.9375rem; }
.callout { margin-block-start: 2.5rem; padding: 1.25rem 1.5rem; background: var(--tint); border-inline-start: 0.3125rem solid var(--un-blue); border-radius: var(--radius); }
.callout h2 { font-size: 1.25rem; margin-block-end: 0.4rem; }
.callout > p + p, .callout > ul, .callout > ul + p { margin-block-start: 0.6rem; }

/* Change log: versions list beside the releases */
.with-aside { display: grid; grid-template-columns: minmax(0, 1fr) 14rem; gap: 2.5rem; align-items: start; }
.with-aside > .toc { grid-column: 2; grid-row: 1; position: sticky; inset-block-start: 4.5rem; max-block-size: calc(100vh - 6rem); overflow-y: auto; }
.with-aside > :not(.toc) { grid-column: 1; grid-row: 1; }
.toc h2 { font-family: var(--font); font-size: 0.875rem; letter-spacing: 0.05em; text-transform: uppercase; margin-block-end: 0.5rem; }
.toc ul { border-inline-start: 1px solid var(--line); }
.toc a { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.4rem 0.75rem; text-decoration: none; color: var(--ink); }
.toc a:hover .toc-main { text-decoration: underline; }
.toc-main { font-weight: 500; }
.toc-sub { font-size: 0.8125rem; color: var(--ink-soft); white-space: nowrap; }
.timeline { display: flex; flex-direction: column; }
.timeline > li { padding-block: 1.25rem; border-block-end: 1px solid var(--line); }
.timeline > li:first-child { padding-block-start: 0; }
.timeline h2 { font-size: 1.375rem; }
.timeline section:focus { outline: none; }
.timeline-date { color: var(--ink-soft); font-size: 0.9375rem; margin-block: 0.15rem 0.6rem; }
.changes { display: flex; flex-direction: column; gap: 0.5rem; }
.changes li { display: flex; gap: 0.6rem; align-items: baseline; }
.changes .tag { flex: none; min-inline-size: 5.5rem; justify-content: center; }
.change-feature { border-color: var(--accent); color: var(--accent); }
.change-fix { border-color: var(--new); color: var(--new); }
@media (max-width: 52em) {
  .with-aside { grid-template-columns: minmax(0, 1fr); }
  .with-aside > .toc, .with-aside > :not(.toc) { grid-column: 1; grid-row: auto; }
  .with-aside > .toc { position: static; max-block-size: none; }
  .toc ul { display: flex; flex-wrap: wrap; gap: 0.25rem; border: 0; }
  .toc a { border: 1px solid var(--line); border-radius: var(--radius); min-block-size: 2.75rem; align-items: center; }
  .toc-sub { display: none; }
}

/* License */
.legal-text h2 { font-size: 1.25rem; }

/* Subscriptions */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-block-end: 1rem; }
.tier { padding: 1.25rem; border: 1px solid var(--line); border-block-start: 0.3125rem solid var(--field-border); border-radius: var(--radius); }
.tier-individual, .tier-institutional { border-block-start-color: var(--un-blue); }
.tier-institutional { background: var(--tint); }
.tier h2 { font-size: 1.25rem; margin-block-end: 0.4rem; }
.tier p { font-size: 0.9375rem; color: var(--ink-soft); }
.tier-premium { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.tier-suspended { border-color: var(--error); color: var(--error); font-weight: 700; }
table.plans td.no { color: var(--ink-soft); }
table.plans th:not(:first-child), table.plans td { inline-size: 24%; }
/* Four columns of text need room: on narrow screens the table scrolls inside its box instead of squeezing. */
table.data.plans { min-inline-size: 40rem; }
.shots { display: grid; gap: 1.5rem; margin-block: 1.25rem; }
.shot { margin: 0 0 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; max-inline-size: 52rem; }
.shot figcaption { font-weight: 500; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.shot img { display: block; inline-size: 100%; block-size: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.shot a { font-size: 0.875rem; align-self: flex-start; }
.sample { margin-block-start: 1.5rem; padding: 1.25rem 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--row-alt); }
.sample h3 { font-size: 1.25rem; margin-block: 0.25rem 0.5rem; }
.sample > p { max-inline-size: var(--measure); margin-block-end: 1rem; }
.sample .table-wrap { background: var(--paper); }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 0.75rem 1.5rem; margin: 0 0 1.25rem; }
.facts dt { font-size: 0.8125rem; font-weight: 700; color: var(--ink-soft); }
.facts dd { margin: 0; }
/* Profile: two per row, so a long email has the whole half to wrap in. */
@media (min-width: 36em) { .facts-pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.facts-pairs dd { overflow-wrap: anywhere; }
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.ways h3 { font-size: 1.125rem; margin-block-end: 0.4rem; }
.ways p { font-size: 0.9375rem; }
@media (max-width: 52em) {
  .tiers, .ways { grid-template-columns: minmax(0, 1fr); }
  .sample { padding: 1rem; }
}

/* Sign-in: account menu in the masthead */
.account-area { margin-inline-start: auto; position: relative; display: flex; align-items: center; gap: 0.5rem; }
.account details { position: relative; }
.account summary { list-style: none; cursor: pointer; }
.account summary::-webkit-details-marker { display: none; }
.account summary .tag:empty { display: none; }
.account details[open] .chevron { transform: rotate(180deg); }
.account-panel { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 0.5rem); z-index: 40; min-inline-size: 16rem; padding: 0.5rem 0; background: var(--paper); border: 1px solid var(--line); border-block-start: 0.3125rem solid var(--un-blue); border-radius: var(--radius); box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.16); }
.account-name { padding: 0.5rem 1rem 0.75rem; border-block-end: 1px solid var(--line); font-size: 0.875rem; color: var(--ink-soft); }
.account-name strong { display: block; color: var(--ink); font-size: 1rem; overflow-wrap: anywhere; }
.account-panel ul { display: flex; flex-direction: column; padding-block-start: 0.25rem; }
.account-panel a, .account-logout { display: flex; align-items: center; inline-size: 100%; min-block-size: 2.75rem; padding: 0.4rem 1rem; font: inherit; font-weight: 500; text-align: start; color: var(--accent); background: none; border: 0; cursor: pointer; text-decoration: none; }
.account-panel a:hover, .account-logout:hover { background: var(--tint); text-decoration: underline; }
.account-logout { border-block-start: 1px solid var(--line); margin-block-start: 0.25rem; }
@media (max-width: 40em) { .account-panel { inset-inline-end: auto; inset-inline-start: 0; } }

/* Notifications: the bell in the masthead, and the Notifications page */
.bell { position: relative; inline-size: 2.75rem; padding: 0; justify-content: center; }
.bell[aria-current="page"] { background: var(--tint); }
.bell-count { position: absolute; inset-block-start: -0.45rem; inset-inline-end: -0.45rem; min-inline-size: 1.35rem; block-size: 1.35rem; padding-inline: 0.3rem; border-radius: 0.7rem; background: var(--new); color: #FFFFFF; font-size: 0.75rem; font-weight: 700; line-height: 1.35rem; text-align: center; border: 2px solid var(--paper); font-variant-numeric: tabular-nums; }
.account-panel .account-count { margin-inline-start: auto; padding-inline: 0.45rem; border-radius: 0.7rem; background: var(--new); color: #FFFFFF; font-size: 0.75rem; font-weight: 700; line-height: 1.35rem; font-variant-numeric: tabular-nums; }
.notes-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-block: 1.75rem 0; padding-block-end: 0.75rem; border-block-end: 1px solid var(--line); }
.notes-toolbar .section-nav { margin: 0; }
.notes-empty { display: flex; align-items: center; gap: 0.6rem; padding-block: 2rem; color: var(--ink-soft); }
.notes-empty .icon { color: var(--accent); }
.note { padding: 1.25rem 0.75rem; border-block-end: 1px solid var(--line); border-inline-start: 0.3125rem solid transparent; }
.note-unread { border-inline-start-color: var(--new); background: linear-gradient(90deg, var(--tint), var(--paper) 60%); }
[dir="rtl"] .note-unread { background: linear-gradient(-90deg, var(--tint), var(--paper) 60%); }
.note-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--ink-soft); }
.note h2 { font-size: 1.25rem; margin-block: 0.35rem 0.3rem; }
.note-summary { color: var(--ink-soft); max-inline-size: 46rem; }
.note-details { margin-block-start: 0.6rem; }
.note-details summary { cursor: pointer; font-weight: 500; color: var(--accent); inline-size: fit-content; min-block-size: 2.75rem; display: flex; align-items: center; }
.note-body { margin-block-start: 0.4rem; padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); max-inline-size: 46rem; display: grid; gap: 0.75rem; overflow-wrap: anywhere; }
.note-body h3, .note-body h4 { font-size: 1.05rem; }
.note-body ul, .note-body ol { padding-inline-start: 1.25rem; display: grid; gap: 0.25rem; }
.note-body ul { list-style: disc; }
.note-body ol { list-style: decimal; }
.note-actions { margin-block-start: 0.75rem; }
.notes-invite { margin-block-end: 1.5rem; }
.notes-invite h2 { margin-block: 0 0.5rem; font-size: 1.25rem; }
.notes-invite ul { margin-block: 0.5rem 1rem; padding-inline-start: 1.25rem; list-style: disc; }
[data-notes-local-hint] { margin-block: 0.75rem 0; }
.notes-invite li + li { margin-block-start: 0.25rem; }
.notes-invite-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin: 0; }

/* My Comtrade > Saved searches and lists, My data deliveries */
.saved-table td, .saved-table th { vertical-align: top; }
.saved-table .row-head .tag { display: inline-block; margin-block-start: 0.25rem; }
.saved-values { margin: 0; display: grid; gap: 0.375rem; }
.saved-values div { display: grid; gap: 0.125rem; }
.saved-values dt { font-size: 0.875rem; font-weight: 700; }
.saved-values dd { margin: 0; overflow-wrap: anywhere; }
.saved-muted { display: block; color: var(--ink-soft); font-size: 0.875rem; }
.saved-table form { margin: 0; }
.saved-table .btn-small { white-space: nowrap; }
.status-done { font-weight: 700; }
.status-error { font-weight: 700; color: var(--error); }
/* My data deliveries: fits the page column (no sideways scroll above ~52rem, it scrolls below as the
   other tables); the query gets the room, times take two lines, status is narrow. */
table.data.deliveries-table { table-layout: fixed; min-inline-size: 52rem; }
.deliveries-table .col-query { inline-size: 44%; }
.deliveries-table .col-time { inline-size: 11%; }
.deliveries-table .col-status { inline-size: 9%; }
.deliveries-table .col-actions { inline-size: 14%; }
.deliveries-table thead th { white-space: normal; }
.deliveries-table th[aria-sort="ascending"] .icon { transform: rotate(180deg); }
.deliveries-table .saved-values div { grid-template-columns: minmax(6rem, 35%) 1fr; column-gap: 0.75rem; }

/* Signed-in pages (My profile, My API portal) */
.status { margin-block: 0.5rem 1rem; }
.status:empty { margin: 0; }
.status.is-error { color: var(--error); font-weight: 700; }
.btn-small { min-block-size: 2.5rem; padding-block: 0.3rem; padding-inline: 0.75rem; font-size: 0.875rem; }
.btn-danger { color: var(--error); }
.btn-danger:hover { color: var(--error); border-color: var(--error); }
ul.actions { list-style: none; }
.turnstile { margin-block: 1rem; min-block-size: 4.0625rem; }
.subs { display: flex; flex-direction: column; gap: 1.25rem; }
.sub { padding: 1.25rem 1.5rem; border: 1px solid var(--line); border-block-start: 0.3125rem solid var(--un-blue); border-radius: var(--radius); }
.sub-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.sub-head h2 { font-size: 1.375rem; }
.sub-head .tag { font-size: 0.875rem; }
.sub-head .state-active { border-color: #175A2C; color: #175A2C; font-weight: 700; }
.sub-meta { color: var(--ink-soft); font-size: 0.9375rem; margin-block: 0.25rem 1rem; }
.sub-meta:empty { display: none; }
.keys { display: flex; flex-direction: column; margin: 0; }
.key { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 0.5rem 1.5rem; padding-block: 0.85rem; border-block-start: 1px solid var(--line); }
.key dt { font-weight: 700; padding-block-start: 0.45rem; }
.key dd { margin: 0; display: flex; flex-direction: column; gap: 0.6rem; min-inline-size: 0; }
.key-value code { display: block; padding: 0.45rem 0.75rem; background: var(--row-alt); border: 1px solid var(--line); border-radius: var(--radius); font-size: 0.9375rem; overflow-wrap: anywhere; text-align: start; }
.key-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.confirm { padding: 0.85rem 1rem; background: var(--error-bg); border-inline-start: 0.25rem solid var(--error); border-radius: var(--radius); display: flex; flex-direction: column; gap: 0.6rem; }
@media (max-width: 40em) { .key { grid-template-columns: minmax(0, 1fr); } .sub { padding: 1rem; } }

/* Trade statistics form */
.query-section { display: flex; flex-direction: column; gap: 1rem; }
.query-section + .query-section { border-block-start: 1px solid var(--line); padding-block-start: 1.5rem; }
.query-section > h2 { font-size: 1.375rem; }
.choices-row { display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; align-items: flex-start; }
.choices-row select { inline-size: auto; min-inline-size: 16rem; max-inline-size: 100%; }
.choices-row > .field { flex: 1 1 20rem; max-inline-size: 36rem; }
/* Trade statistics: a label with its information button; the text shows on hover or focus. */
.label-row { display: flex; align-items: center; gap: 0.375rem; margin-block-end: 0.5rem; }
.label-row > .label, .label-row.label { margin: 0; }
.info { position: relative; display: inline-flex; }
.info-button { display: inline-flex; padding: 0.125rem; background: none; border: 0; border-radius: 50%; color: var(--accent); cursor: help; }
.info-button .icon { inline-size: 1.125rem; block-size: 1.125rem; }
.info-button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.info-text { display: none; position: absolute; z-index: 30; inset-block-start: calc(100% + 0.375rem); inset-inline-start: 0; inline-size: min(24rem, 80vw); padding: 0.625rem 0.8rem; background: var(--ink); color: var(--paper); border-radius: var(--radius); box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.16); font-size: 0.875rem; font-weight: 400; line-height: 1.45; }
.info:hover .info-text, .info:focus-within .info-text { display: block; }
.check input[type="radio"] + label::before { border-radius: 50%; }
.fields-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 2rem; }
.field { min-inline-size: 0; display: flex; flex-direction: column; }
/* A plain select in a .field lines up with the pickers next to it (.picker has a 6px gap under the label). */
.field .hint { margin-block-end: 0.4rem; }
.field-error { margin: 0 0 0.4rem; }
.more-options { margin: 0; padding: 0.875rem 1rem; background: var(--row-alt); border: 1px dashed var(--field-border); border-radius: var(--radius); }
.callout-row { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; margin-block: 0 1.5rem; }
.callout-row p { margin: 0; max-inline-size: 60rem; }
.picker-alt { display: block; font-size: 0.8125rem; color: var(--ink-soft); }
.picker-tag b { font-variant-numeric: tabular-nums; }
.fields-col { min-inline-size: 0; display: flex; flex-direction: column; gap: 1.5rem; }
@media (max-width: 52em) { .fields-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40em) { .fields-grid { grid-template-columns: minmax(0, 1fr); } .choices-row select { min-inline-size: 0; inline-size: 100%; } }
/* Trade statistics pickers: the chosen values are small tags inside the field, before the text box. */
.trade-form .picker { gap: 0.375rem; }
/* With the gap, 0.5rem under the label as everywhere (legends, dropdowns, the field before the script loads),
   so a picker's box lines up with the option buttons or dropdown next to it (Breakdown and "Aggregate by"). */
.trade-form .picker > .label-row { margin-block-end: calc(0.5rem - 0.375rem); }
.picker-box { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; min-block-size: 2.75rem; padding: 0.3125rem 0.375rem; border: 1px solid var(--field-border); border-radius: var(--radius); background: var(--paper); cursor: text; }
.picker-box:has(.picker-button) { padding-inline-end: 3.125rem; }
.picker-box .picker-combobox { display: contents; }
.picker-popover { inline-size: var(--box-width, var(--trigger-width)); }
.picker-box:has(.picker-input:focus-visible) { outline: 0.1875rem solid var(--focus); outline-offset: 0.125rem; }
.picker-box[data-invalid] { border: 2px solid var(--error); }
.picker-box input.picker-input { flex: 1 1 3rem; inline-size: 3rem; min-inline-size: 3rem; min-block-size: 2rem; padding: 0.125rem 0.375rem; border: 0; border-radius: 0; background: transparent; outline: none; }
.picker-box .picker-tags { display: contents; }
.picker-box .picker-taglist { display: contents; }
.picker-box .picker-tag { gap: 0.125rem; padding-inline-start: 0.5rem; border: 1px solid #9CC9E3; background: var(--tint); color: var(--ink); border-radius: 0.25rem; font-size: 0.875rem; font-weight: 400; line-height: 1.3; max-inline-size: 100%; }
.picker-box .picker-tag span[dir] { overflow-wrap: anywhere; padding-block: 0.125rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.picker-box .picker-tag b { font-weight: 700; }
.picker-box .picker-remove { flex: none; inline-size: 1.75rem; block-size: 1.75rem; color: var(--ink-soft); }
.picker-box .picker-remove svg { inline-size: 0.75rem; block-size: 0.75rem; }
.picker-box .picker-remove[data-hovered] { background: #CDE6F4; color: var(--ink); }
.picker-box .picker-remove[data-focus-visible] { outline: 0.1875rem solid var(--focus); outline-offset: -0.1875rem; }
.picker-button { position: absolute; inset-inline-end: 0; inset-block: 0; inline-size: 2.75rem; display: grid; place-items: center; background: none; border: 0; border-inline-start: 1px solid var(--line); color: var(--ink); cursor: pointer; }
.picker-button svg, .picker-link svg { inline-size: 1.1rem; block-size: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.picker-button[data-focus-visible] { outline: 0.1875rem solid var(--focus); outline-offset: -0.1875rem; }
.picker-popover { max-block-size: 20rem; }
.picker-option[data-disabled] { cursor: default; color: var(--ink-soft); }
/* My groups: names only (a group can hold 40 values), wider than the link that opens it. */
.picker-popover.picker-menu { inline-size: max-content; min-inline-size: 16rem; max-inline-size: min(28rem, calc(100vw - 2rem)); overflow-x: hidden; }
.picker-group { padding-block: 0.45rem; font-size: 0.875rem; line-height: 1.35; overflow-wrap: anywhere; }
/* My groups / Save as group, under the field */
.picker-groups { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.picker-link { font: inherit; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 0.25rem; min-block-size: 1.75rem; padding: 0; background: none; border: 0; color: var(--accent); text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer; }
.picker-link:hover { color: var(--accent-hover); }
.picker-link svg { inline-size: 0.9rem; block-size: 0.9rem; }
.picker-save { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.625rem 0.75rem; background: var(--row-alt); border-radius: var(--radius); }
.picker-save-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.picker-save-row input { flex: 1 1 10rem; inline-size: auto; min-block-size: 2.5rem; }
.picker-status { font-size: 0.875rem; color: var(--ink-soft); }

/* Trade statistics: saved searches and the result's actions */
.saved-row { display: flex; justify-content: flex-end; margin-block: -0.5rem 0.75rem; }
.menu-end .menu-list, .menu-end .menu-panel { inset-inline-start: auto; inset-inline-end: 0; }
/* Preview, Start again and the query's actions, in one row under the form */
.trade-form { margin-block-end: 1rem; }
.query-actions { align-items: flex-start; margin-block-end: 2rem; }
.actions-divider { align-self: stretch; inline-size: 1px; background: var(--line); }
.copy-status { flex-basis: 100%; margin: 0; font-weight: 700; color: var(--ink); }
.copy-status:empty { display: none; }
details.menu { position: relative; }
details.menu > summary { list-style: none; }
details.menu > summary::-webkit-details-marker { display: none; }
details.menu[open] > summary .chevron { transform: rotate(180deg); }
.menu-list, .menu-panel { position: absolute; inset-inline-start: 0; inset-block-start: calc(100% + 0.25rem); z-index: 20; min-inline-size: 14rem; background: var(--paper); border: 1px solid var(--field-border); border-radius: var(--radius); box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.16); }
.menu-list { padding: 0.25rem; }
.menu-list a { display: block; padding: 0.55rem 0.75rem; border-radius: 0.25rem; color: var(--ink); text-decoration: none; }
.menu-list a:hover, .menu-list a:focus-visible { background: var(--tint); box-shadow: inset 0.25rem 0 0 var(--un-blue); }
.menu-panel { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem; inline-size: min(24rem, calc(100vw - 2rem)); }
.menu-panel .btn { align-self: flex-start; }
input[type="email"] { font: inherit; inline-size: 100%; min-block-size: 2.75rem; padding: 0.5rem 0.75rem; border: 1px solid var(--field-border); border-radius: var(--radius); background: var(--paper); color: var(--ink); }
@media (max-width: 40em) { .menu-list, .menu-panel { position: static; margin-block-start: 0.25rem; inline-size: auto; box-shadow: none; } }

/* Trade statistics: preview of the query */
.preview { display: flex; flex-direction: column; gap: 0.75rem; margin-block-start: 2rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--line); }
/* Trade statistics: the query as a call to the public API. With scripts, opened by its button. */
html:not(.js) .api-call-toggle { display: none; }
.js .api-call:not(.is-open) { display: none; }
.api-call { display: flex; flex-direction: column; gap: 0.75rem; margin-block: 1.5rem; padding: 1.25rem 1.5rem; background: var(--paper); border: 1px solid var(--line); border-inline-start: 0.3125rem solid var(--un-blue); border-radius: var(--radius); }
.api-call > h3 { font-size: 1.25rem; }
.api-call > p { max-inline-size: var(--measure); }
.api-call-url { margin: 0; padding: 0.75rem 1rem; background: var(--row-alt); border: 1px solid var(--line); border-radius: var(--radius); font-size: 0.9375rem; white-space: pre-wrap; overflow-wrap: anywhere; text-align: left; }
.api-call-key { font-style: italic; color: var(--ink-soft); }
.api-call-key.is-set { font-style: normal; font-weight: 700; color: var(--ink); }
.api-call-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1rem; }
.api-call-key-field { display: flex; flex-direction: column; gap: 0.25rem; flex: 1 1 20rem; max-inline-size: 32rem; }
.api-call-key-field input { font: inherit; min-block-size: 2.75rem; padding: 0.5rem 0.75rem; border: 1px solid var(--field-border); border-radius: var(--radius); background: var(--paper); color: var(--ink); }
html:not(.js) .api-call-row { display: none; }
.searching { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.5rem; background: var(--tint); border: 1px solid #9CC9E3; border-inline-start: 0.3125rem solid var(--un-blue); border-radius: var(--radius); }
.searching-title { font-weight: 700; font-size: 1.0625rem; }
.spinner { flex: none; inline-size: 2rem; block-size: 2rem; border: 0.25rem solid #9CC9E3; border-block-start-color: var(--accent); border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* A form being sent (site.js): the button used shows a small spinner and keeps its colours. */
.btn.is-busy { cursor: progress; }
.btn .spinner { inline-size: 1rem; block-size: 1rem; border-width: 0.15rem; }
.btn-solid .spinner { border-color: rgba(255, 255, 255, 0.45); border-block-start-color: var(--on-accent); }
/* A download being prepared (site.js): the message after the menu, and the menus' links look unavailable. */
.download-status { display: flex; align-items: center; gap: 0.625rem; margin: 0.75rem 0; font-weight: 500; }
.download-status .spinner { inline-size: 1.25rem; block-size: 1.25rem; border-width: 0.1875rem; }
.is-downloading a[download][href*="handler=Download"] { opacity: 0.6; cursor: progress; }
.preview-count { color: var(--ink-soft); }
/* Estimated quantity or net weight (as on v1's grid). Darker than v1's yellow: 3:1 or more for the icon. */
.estimated { color: var(--estimate); margin-inline-end: 0.25rem; }
.preview-note { margin-block-start: 0.5rem; font-size: 0.875rem; color: var(--ink-soft); }
/* The preview stays in the page's column (scrolling sideways when it needs more room): smaller text,
   headings and text on several lines, numbers on one. */
.preview-wrap { max-block-size: 70vh; overflow: auto; }
.preview-limit { color: var(--ink); }
table.preview-table { font-size: 0.8125rem; }
table.preview-table th, table.preview-table td { padding: 0.5rem 0.375rem; }
table.preview-table thead th, table.preview-table thead th.num { position: sticky; inset-block-start: 0; z-index: 1; vertical-align: bottom; white-space: normal; }
table.preview-table td.preview-cmd { min-inline-size: 9rem; max-inline-size: 18rem; }
[dir="rtl"] .preview-desc { text-align: right; }
.preview-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: 0.8125rem; color: var(--ink-soft); }

/* Data availability and Bulk files */
input[type="date"], input[type="search"] { font: inherit; inline-size: 100%; min-block-size: 2.75rem; padding: 0.5rem 0.75rem; border: 1px solid var(--field-border); border-radius: var(--radius); background: var(--paper); color: var(--ink); }
.has-error input[type="date"] { border-color: var(--error); border-width: 2px; }
fieldset.fields-col { border: 0; margin: 0; padding: 0; gap: 0.75rem; }
fieldset.fields-col > legend { font-weight: 700; padding: 0; margin-block-end: 0.25rem; }
/* The pages of a section, side by side under the title. */
.section-nav { margin-block: -0.75rem 1.75rem; }
.section-nav ul { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.section-nav a { display: inline-block; padding: 0.4rem 0.85rem; border: 1px solid var(--field-border); border-radius: 999px; color: var(--accent); text-decoration: none; font-size: 0.9375rem; }
.section-nav a:hover { background: var(--tint); }
.section-nav a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
table.data th.row-head { font-weight: 400; }
.filter-row { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 1rem 1.25rem; }
.filter-row > div { flex: 1 1 10rem; }
.filter-row > .filter-search { flex: 2 1 16rem; }
.filter-row > .actions { flex: 0 0 auto; }
/* Time series: reporters by period; the reporter column stays in view while the periods scroll. */
.series-wrap { max-block-size: 75vh; overflow: auto; }
.series-table { min-inline-size: 0; inline-size: auto; }
.series-table thead th { position: sticky; inset-block-start: 0; z-index: 2; }
.series-table th.row-head, .series-table thead th:first-child { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--paper); min-inline-size: 12rem; }
.series-table thead th:first-child { z-index: 3; background: var(--brandbar); }
.series-table tbody tr:nth-child(even) th.row-head { background: var(--row-alt); }
.series-table th.series-period { text-align: center; font-variant-numeric: tabular-nums; }
.series-cell { text-align: center; padding-inline: 0.5rem; }
.series-cell.has-data { background: var(--tint); font-variant-numeric: tabular-nums; }
/* Colour of a cell: the classification the data was reported in (v1's colours). */
.cl-H0 { background: #FFCDD2 !important; } .cl-H1 { background: #F8BBD0 !important; } .cl-H2 { background: #CFD8DC !important; }
.cl-H3 { background: #D1C4E9 !important; } .cl-H4 { background: #FFECB3 !important; } .cl-H5 { background: #BBDEFB !important; }
.cl-H6 { background: #C8E6C9 !important; } .cl-S1 { background: #F4C5FC !important; } .cl-S2 { background: #C5FCD6 !important; }
.cl-S3 { background: #C5E6FC !important; } .cl-S4 { background: #FCE1C5 !important; } .cl-B4 { background: #B2EBF2 !important; }
.cl-B5 { background: #B2DFDB !important; } .cl-EB02 { background: #FFCCBC !important; } .cl-EB10 { background: #DCEDC8 !important; }
.cl-EB10S { background: #FFE0B2 !important; } .cl-other { background: var(--tint) !important; }
.series-icon { inline-size: 0.875rem; block-size: 0.875rem; vertical-align: -0.125rem; color: var(--ink); }
.cell-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.2rem; white-space: nowrap; color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 0.15em; }
.cell-menu > summary::-webkit-details-marker { display: none; }
.cell-menu { position: relative; }
.cell-menu-list { position: absolute; inset-block-start: calc(100% + 0.25rem); inset-inline-start: 50%; transform: translateX(-50%); z-index: 4; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.16); list-style: none; margin: 0; padding: 0.25rem; background: var(--paper); border: 1px solid var(--field-border); border-radius: var(--radius); text-align: start; }
.cell-menu-list a { display: block; padding: 0.375rem 0.5rem; white-space: nowrap; }
/* Data tools: a negative trade balance or discrepancy (the minus sign says it; the colour adds to it) */
table.data td.is-negative { color: var(--error); }
/* Trade matrix: "Explain with AI" and its answer */
.ai-explain { display: flex; flex-direction: column; gap: 0.75rem; margin-block: 0 1rem; }
.ai-explain form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.ai-explain-why { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background: var(--tint); border: 1px solid #9CC9E3; border-radius: var(--radius); font-size: 0.9375rem; font-weight: 500; }
.ai-explain-why .icon { color: var(--un-blue); inline-size: 1.125rem; block-size: 1.125rem; }
.ai-explanation { padding: 1.25rem 1.5rem; background: var(--paper); border: 1px solid var(--line); border-inline-start: 0.3125rem solid var(--un-blue); border-radius: var(--radius); }
.ai-explanation > h3 { font-size: 1.25rem; margin-block-end: 0.5rem; }
.ai-disclaimer { font-size: 0.875rem; color: var(--ink-soft); margin-block-end: 0.75rem; }
.ai-explanation-text h4 { font-size: 1.0625rem; margin: 1rem 0 0.375rem; }
.ai-explanation-text p, .ai-explanation-text ul, .ai-explanation-text ol { margin: 0 0 0.5rem; max-inline-size: var(--measure); }
/* API docs: getting started, products, the reference, the Swagger UI console */
.api-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 1.5rem; }
.api-steps > li { counter-increment: step; padding: 1rem 1.25rem; border: 1px solid var(--line); border-block-start: 0.3125rem solid var(--un-blue); border-radius: var(--radius); display: flex; flex-direction: column; gap: 0.5rem; min-inline-size: 0; }
.api-steps > li > h3 { font-size: 1.125rem; }
.api-steps > li > h3::before { content: counter(step) ". "; }
@media (max-width: 52em) { .api-steps { grid-template-columns: minmax(0, 1fr); } }
.api-code { margin: 0; padding: 0.625rem 0.875rem; background: var(--row-alt); border: 1px solid var(--line); border-radius: var(--radius); font-size: 0.875rem; white-space: pre-wrap; overflow-wrap: anywhere; text-align: left; }
.api-placeholder { font-style: italic; color: var(--ink-soft); }
.api-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.api-copy .api-code { align-self: stretch; }
.api-products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.api-product { padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; gap: 0.5rem; }
.api-product h3 { font-size: 1.125rem; }
.api-product-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-block-start: auto; font-size: 0.875rem; color: var(--ink-soft); }
.api-facts { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; margin: 0 0 1rem; }
.api-facts dt { font-weight: 700; }
.api-facts dd { margin: 0; overflow-wrap: anywhere; }
.api-endpoint { border: 1px solid var(--line); border-radius: var(--radius); margin-block-end: 0.5rem; }
.api-endpoint > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.625rem 0.875rem; }
.api-endpoint[open] > summary { border-block-end: 1px solid var(--line); background: var(--row-alt); }
.api-method { font-weight: 700; font-size: 0.8125rem; padding: 0.1rem 0.5rem; border-radius: 0.25rem; background: var(--accent); color: var(--on-accent); }
.api-path { font-weight: 700; overflow-wrap: anywhere; }
.api-summary { color: var(--ink-soft); }
.api-endpoint-body { display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem 0.875rem; }
.api-endpoint-body h4 { font-size: 1rem; margin: 0.25rem 0 0; }
table.data.api-params { min-inline-size: 0; }
.api-responses { margin: 0; padding-inline-start: 1.25rem; }
.api-answer > summary { cursor: pointer; color: var(--accent); font-weight: 700; }
.api-answer .api-code { margin-block-start: 0.5rem; max-block-size: 24rem; overflow: auto; white-space: pre; }
.api-console { margin-block-start: 0.5rem; }
.api-console-choice { display: flex; flex-direction: column; gap: 0.25rem; max-inline-size: 24rem; }
.api-console-choice[hidden] { display: none; }
/* Publication notes: the note, and its details in a disclosure */
.notes-table .note-cell { min-inline-size: 20rem; }
.notes-table .note-cell p { margin: 0; }
.note-details { margin-block-start: 0.375rem; }
.note-details > summary { cursor: pointer; color: var(--accent); font-weight: 700; }
.note-details dl { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; margin: 0.5rem 0 0; font-size: 0.875rem; }
.note-details dt { font-weight: 700; }
.note-details dd { margin: 0; }
.series-legends { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin-block-end: 0.75rem; }
.series-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; font-size: 0.875rem; }
.series-legend li { display: inline-flex; align-items: center; gap: 0.375rem; }
.series-swatch { display: inline-block; min-inline-size: 2.25rem; padding: 0.05rem 0.375rem; border-radius: 0.25rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.dashboard-frame { position: relative; inline-size: 100%; aspect-ratio: 4 / 3; max-block-size: 85vh; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-block-end: 2rem; }
.dashboard-frame iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }

/* Page not found (Pages/Site/NotFound): a cargo ship with 404 on its containers, gently bobbing. */
.nf { display: grid; gap: 1.5rem 3rem; align-items: center; padding-block: 2.5rem 3.5rem; }
@media (min-width: 48em) { .nf { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); } }
.nf h1 { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); margin-block-end: 0.75rem; }
.nf-art { inline-size: 100%; max-inline-size: 26rem; justify-self: center; }
@media (max-width: 47.99em) { .nf-art { order: -1; max-inline-size: 18rem; } }
.nf-ports-title { font-size: 1.125rem; margin-block: 2rem 0.75rem; }
.nf-ports { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.nf-ports a { display: inline-flex; align-items: center; min-block-size: 2.75rem; padding: 0.5rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: var(--tint); color: var(--accent); font-weight: 700; text-decoration: none; }
.nf-ports a:hover { border-color: var(--accent); text-decoration: underline; }
.nf-sun { fill: var(--amber); opacity: 0.35; }
.nf-gull { fill: none; stroke: var(--ink-soft); stroke-width: 2; stroke-linecap: round; }
.nf-cabin { fill: var(--paper); stroke: var(--accent); stroke-width: 2; }
.nf-window { fill: var(--un-blue); }
.nf-funnel { fill: var(--amber); }
.nf-box { stroke: rgba(0, 0, 0, 0.15); stroke-width: 1; }
.nf-box-1 { fill: var(--un-blue); }
.nf-box-2 { fill: var(--amber); }
.nf-box-3 { fill: var(--accent-hover); }
.nf-digit, .nf-q { fill: #FFFFFF; font-family: var(--font-display); font-weight: 700; text-anchor: middle; }
.nf-digit { font-size: 32px; }
.nf-q { font-size: 16px; }
.nf-hull { fill: var(--accent); }
.nf-stripe { stroke: var(--paper); stroke-width: 3; opacity: 0.6; }
.nf-wave-back { fill: var(--tint); }
.nf-wave-front { fill: var(--un-blue); opacity: 0.35; }
.nf-ship, .nf-drift { transform-box: fill-box; transform-origin: center; }
/* Premium only (Pages/Site/_PremiumOnly): the same ship, its middle container locked, a key floating by. */
.pm-key { fill: none; stroke: var(--amber); stroke-width: 4; stroke-linecap: round; }
.pm-door { stroke: rgba(255, 255, 255, 0.3); stroke-width: 1.5; }
.pm-shackle { fill: none; stroke: #FFFFFF; stroke-width: 3; }
.pm-lock { fill: #FFFFFF; }
@media (prefers-reduced-motion: no-preference) {
  .nf-ship { animation: nf-bob 3.2s ease-in-out infinite; }
  .nf-drift { animation: nf-drift 4.5s ease-in-out infinite; }
  .nf-wave-front { animation: nf-wave 6s linear infinite; }
}
@keyframes nf-bob { 50% { transform: translateY(-4px) rotate(-1deg); } }
@keyframes nf-drift { 50% { transform: translate(-4px, -3px) rotate(6deg); } }
@keyframes nf-wave { to { transform: translateX(40px); } }