/* =============================================================
RASFF Trends — fruit-risk.com
Operator-grade dashboard. Hairlines, tabular figures,
one rust accent. No shadows. The table is the hero.
============================================================= */
/* ---------- tokens ---------- */
:root {
/* warm-cool neutrals (slight hue tint avoids "default gray" feel) */
--paper: oklch(0.985 0.004 80); /* page bg, just off-white */
--ink: oklch(0.22 0.012 75); /* primary text */
--ink-soft: oklch(0.42 0.010 75); /* secondary text */
--ink-faint: oklch(0.58 0.008 75); /* tertiary, captions */
--rule: oklch(0.88 0.008 75); /* hairline rules */
--rule-strong: oklch(0.74 0.010 75); /* heavier rule under thead */
--row-hover: oklch(0.955 0.012 60); /* warm ghost on hover */
--row-zebra: oklch(0.975 0.005 75); /* very faint zebra */
/* one accent: rust. Used SPARINGLY. */
--accent: oklch(0.52 0.13 40); /* rust */
--accent-soft: oklch(0.52 0.13 40 / 0.10);
--accent-ring: oklch(0.52 0.13 40 / 0.35);
/* second hue, for per-entry detail fields only (how found, market, action,
result): facts about what happened, kept visibly apart from hazards. */
--detail: oklch(0.45 0.07 235); /* slate blue */
--detail-soft: oklch(0.45 0.07 235 / 0.09);
/* numerics: signed deltas keep their own muted hues */
--neg: oklch(0.46 0.09 25); /* deeper rust for negative */
--pos: oklch(0.42 0.06 150); /* desaturated forest for positive */
/* type stack — system only, no external fonts */
--sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--serif: ui-serif, Georgia, "Iowan Old Style", "Apple Garamond", Cambria, "Times New Roman", serif;
--mono: ui-monospace, "SF Mono", "JetBrains Mono", "IBM Plex Mono", Menlo, Consolas, monospace;
/* rhythm */
--col: clamp(960px, 92vw, 1240px);
--gutter: clamp(16px, 2.4vw, 28px);
}
/* ---------- reset, lite ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
background: var(--paper);
color: var(--ink);
font-family: var(--sans);
font-size: 14.5px;
line-height: 1.5;
font-feature-settings: "ss01", "cv11";
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
main {
width: var(--col);
margin: 0 auto;
padding: clamp(20px, 3vw, 36px) var(--gutter) 64px;
}
a {
color: var(--ink);
text-decoration: none;
border-bottom: 1px solid var(--rule);
transition: color 120ms ease, border-color 120ms ease;
}
a:hover { color: var(--accent); border-bottom-color: var(--accent); }
a:focus-visible {
outline: 2px solid var(--accent-ring);
outline-offset: 2px;
border-bottom-color: transparent;
}
h1, h2, h3 { font-weight: 500; letter-spacing: -0.005em; color: var(--ink); }
h1 { font-size: clamp(20px, 2vw, 26px); margin: 0 0 6px; }
h2 { font-size: 14px; margin: 32px 0 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); font-weight: 600; }
/* ---------- header ---------- */
.site-header {
width: var(--col);
margin: 0 auto;
padding: 22px var(--gutter) 18px;
display: grid;
grid-template-columns: 1fr auto;
align-items: baseline;
gap: 4px 24px;
border-bottom: 1px solid var(--rule-strong);
}
.site-header .logo {
font-family: var(--serif);
font-size: clamp(18px, 1.7vw, 22px);
font-weight: 500;
letter-spacing: -0.01em;
color: var(--ink);
border-bottom: none;
white-space: nowrap;
}
.site-header .logo:hover { color: var(--accent); }
.site-header .logo::before {
content: "";
display: inline-block;
width: 6px; height: 6px;
background: var(--accent);
margin-right: 10px;
vertical-align: 0.18em;
}
/* Masthead jurisdiction chip. Sits on the baseline of the wordmark; the
wordmark, not the flag, is what identifies the site to a screen reader. */
.site-header .logo .flag-chip {
vertical-align: -2px;
margin-right: 0.45em;
border: 1px solid var(--rule);
border-radius: 2px;
}
/* One line under the logo and nav, full width. It sat in the second grid
cell of the first column, right-aligned in two mono lines, and read as a
stray fragment in the middle of the header. */
.last-update {
grid-column: 1 / -1;
margin: 0;
font-size: 12px;
font-variant-numeric: tabular-nums;
color: var(--ink-faint);
text-align: left;
}
.last-update time { color: var(--ink-soft); }
/* ---------- filters ---------- */
.filters {
display: flex;
flex-wrap: wrap;
gap: 18px 28px;
padding: 18px 0 22px;
border-bottom: 1px solid var(--rule);
margin-bottom: 18px;
}
.filters label {
display: inline-flex;
flex-direction: column;
gap: 6px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.09em;
color: var(--ink-faint);
font-weight: 600;
}
.filters select,
.filters input {
font: inherit;
font-size: 14px;
text-transform: none;
letter-spacing: 0;
color: var(--ink);
background: transparent;
border: 1px solid var(--rule-strong);
border-radius: 0;
padding: 7px 10px;
min-width: 180px;
font-weight: 400;
transition: border-color 120ms ease, box-shadow 120ms ease;
appearance: none;
}
.filters select {
/* deliberate caret — rust chevron drawn in SVG, not the browser default */
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 28px;
cursor: pointer;
}
.filters input::placeholder { color: var(--ink-faint); }
.filters select:hover,
.filters input:hover { border-color: var(--ink-soft); }
.filters select:focus,
.filters input:focus,
.filters select:focus-visible,
.filters input:focus-visible {
outline: none;
border-color: var(--accent);
box-shadow: inset 0 -2px 0 0 var(--accent);
}
/* ---------- leaderboard ---------- */
.leaderboard {
width: 100%;
border-collapse: collapse;
font-size: 14px;
font-variant-numeric: tabular-nums;
}
.leaderboard thead th {
position: sticky;
top: 0;
background: var(--paper);
text-align: left;
font-weight: 600;
font-size: 11px;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--ink-soft);
padding: 10px 12px 10px 0;
border-bottom: 1px solid var(--rule-strong);
white-space: nowrap;
}
.leaderboard thead th:last-child { padding-right: 0; }
.leaderboard thead th[data-sort] {
cursor: pointer;
user-select: none;
position: sticky;
transition: color 120ms ease;
}
.leaderboard thead th[data-sort]::after {
content: "";
display: inline-block;
width: 0; height: 0;
margin-left: 6px;
vertical-align: 0.12em;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-top: 4px solid currentColor;
opacity: 0;
transition: opacity 120ms ease, transform 120ms ease;
}
.leaderboard thead th[data-sort]:hover {
color: var(--ink);
}
.leaderboard thead th[data-sort]:hover::after { opacity: 0.4; }
.leaderboard thead th[data-sort][aria-sort],
.leaderboard thead th[data-sort].is-sorted {
color: var(--accent);
/* rust underline ticks where the sort lives */
box-shadow: inset 0 -2px 0 0 var(--accent);
}
.leaderboard thead th[data-sort][aria-sort]::after,
.leaderboard thead th[data-sort].is-sorted::after { opacity: 1; }
.leaderboard thead th[data-sort][aria-sort="ascending"]::after,
.leaderboard thead th[data-sort].is-sorted-asc::after { transform: rotate(180deg); }
.leaderboard tbody td {
padding: 9px 12px 9px 0;
border-bottom: 1px solid var(--rule);
vertical-align: baseline;
}
.leaderboard tbody td:last-child { padding-right: 0; }
.leaderboard tbody tr:nth-child(even) td { background: var(--row-zebra); }
.leaderboard tbody tr {
transition: background-color 100ms ease;
position: relative;
}
.leaderboard tbody tr:hover td {
background: var(--row-hover);
}
.leaderboard tbody tr:hover td:first-child {
box-shadow: inset 2px 0 0 0 var(--accent);
}
/* origin column: tighter, slightly heavier */
.leaderboard tbody td:first-child {
font-weight: 500;
white-space: nowrap;
}
.leaderboard tbody td:first-child a {
border-bottom-color: transparent;
}
.leaderboard tbody tr:hover td:first-child a {
border-bottom-color: var(--accent);
color: var(--accent);
}
/* numeric columns: mono, tabular, right-aligned */
.leaderboard th.num,
.leaderboard td.num {
text-align: right;
font-family: var(--mono);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum", "zero";
letter-spacing: -0.005em;
padding-right: 0;
padding-left: 24px;
white-space: nowrap;
}
.leaderboard th.num { letter-spacing: 0.09em; } /* keep header tracked */
/* signed deltas: subtle hue, never aggressive */
.leaderboard td.num[data-trend="up"] { color: var(--neg); }
.leaderboard td.num[data-trend="down"] { color: var(--pos); }
/* em-dash placeholder */
.leaderboard td.num:empty::before,
.leaderboard td.num.is-dash { color: var(--ink-faint); }
/* ---------- detail page ---------- */
main.detail h1 {
font-family: var(--serif);
font-weight: 500;
font-size: clamp(22px, 2.4vw, 30px);
letter-spacing: -0.012em;
margin-top: 8px;
padding-bottom: 14px;
border-bottom: 1px solid var(--rule-strong);
}
main.detail h2:first-of-type { margin-top: 28px; }
main.detail p.lede {
margin: 14px 0 4px;
max-width: 64ch;
font-size: 15px;
line-height: 1.55;
color: var(--ink);
}
main.detail p a#back-link,
main.detail p a[href="/"] {
font-size: 12.5px;
color: var(--ink-faint);
letter-spacing: 0.02em;
border-bottom-color: transparent;
}
main.detail p a#back-link:hover,
main.detail p a[href="/"]:hover { color: var(--accent); }
.filter-context {
font-size: 12px;
color: var(--ink-faint);
margin-left: 0.5em;
font-family: var(--mono);
letter-spacing: 0.01em;
}
/* SVG bars — flat rust with grid baseline */
svg.bars {
display: block;
width: 100%;
max-width: 720px;
height: auto;
margin: 8px 0 24px;
background:
linear-gradient(to top, var(--rule) 1px, transparent 1px) bottom / 100% 20px repeat-x;
background-position-y: -1px;
}
svg.bars rect {
fill: var(--ink-soft);
transition: fill 120ms ease;
}
svg.bars rect:hover { fill: var(--accent); }
svg.bars .bar-zero .bar-value { opacity: 0.35; }
svg.bars rect.bar-placeholder { fill: var(--rule-strong); }
/* Stacked segments, where the jurisdiction publishes the split. Hazard keeps
the bar's existing weight; paperwork is the lighter tone, because it is the
lesser finding and should not out-shout a safety one at a glance. */
svg.bars rect.seg-hazard { fill: var(--ink-soft); }
svg.bars rect.seg-paperwork { fill: var(--rule-strong); }
svg.bars rect.seg-hazard:hover { fill: var(--accent); }
svg.bars rect.seg-paperwork:hover { fill: var(--accent); opacity: 0.55; }
.bars-legend {
display: flex;
flex-wrap: wrap;
gap: 0.3rem 1.1rem;
align-items: center;
margin: -16px 0 24px;
font-size: 0.72rem;
color: var(--ink-faint);
}
.bars-legend .swatch {
display: inline-block;
width: 0.8rem; height: 0.8rem;
margin-right: 0.3rem;
vertical-align: -0.1rem;
border: 1px solid var(--rule-strong);
}
.bars-legend .swatch-hazard { background: var(--ink-soft); }
.bars-legend .swatch-paperwork { background: var(--rule-strong); }
/* Market section segments (market_section.MARKET_GROUPS order): alerts,
information notifications, non-compliance, other — darkest first. */
svg.bars rect.seg-m0 { fill: var(--ink-soft); }
svg.bars rect.seg-m1 { fill: var(--rule-strong); }
svg.bars rect.seg-m2 { fill: var(--ink-faint); }
svg.bars rect.seg-m3 { fill: var(--accent-soft); }
svg.bars rect[class^="seg-m"]:hover { fill: var(--accent); }
.bars-legend .seg-m0 { background: var(--ink-soft); }
.bars-legend .seg-m1 { background: var(--rule-strong); }
.bars-legend .seg-m2 { background: var(--ink-faint); }
.bars-legend .seg-m3 { background: var(--accent-soft); }
/* entry lists — one row shape on every page (partials/entry.html.j2):
meta column (reference over date) | subject + one facts line | hazards.
The facts line is plain text with its separators in the markup, so the
only pills left in a row are the hazard chips and the type badge. */
ul.recent {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--rule);
}
ul.recent li {
display: grid;
grid-template-columns: 108px minmax(0, 1fr) auto;
/* A third, empty row takes up the height of a tall hazard stack, so the
date stays under the reference instead of drifting down the row. */
grid-template-rows: auto auto 1fr;
grid-template-areas:
"ref subj haz"
"date facts haz"
". . haz";
column-gap: 18px;
row-gap: 3px;
align-items: start;
padding: 10px 0 11px;
border-bottom: 1px solid var(--rule);
font-size: 13.5px;
}
ul.recent .ref {
grid-area: ref;
font-family: var(--mono);
font-variant-numeric: tabular-nums;
font-size: 12px;
color: var(--ink-soft);
letter-spacing: -0.005em;
line-height: 1.6;
white-space: nowrap;
}
ul.recent time {
grid-area: date;
font-family: var(--mono);
font-variant-numeric: tabular-nums;
font-size: 12px;
color: var(--ink-faint);
}
ul.recent .subj { grid-area: subj; color: var(--ink); max-width: 78ch; }
ul.recent .facts {
grid-area: facts;
font-size: 12.5px;
line-height: 1.5;
color: var(--ink-soft);
max-width: 88ch;
}
ul.recent .facts:empty { display: none; }
ul.recent .facts a { color: var(--ink-soft); }
ul.recent .facts a:hover { color: var(--accent); }
ul.recent .haz {
grid-area: haz;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-content: flex-start;
gap: 4px;
min-width: 0;
max-width: 260px;
}
ul.recent .haz-chip {
display: inline-block;
font-size: 11px;
letter-spacing: 0.02em;
color: var(--accent);
padding: 1px 7px;
border: 1px solid var(--accent-soft);
background: var(--accent-soft);
border-radius: 3px;
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
ul.recent .haz-chip.haz-more {
background: transparent;
color: var(--ink-faint);
border-color: var(--rule);
font-style: italic;
cursor: help;
}
ul.recent li:hover { background: var(--row-hover); }
/* What happened to the entry: text in the second hue, not pills. */
ul.recent .detail-chips { color: var(--detail); }
ul.recent .det-chip { overflow-wrap: anywhere; }
ul.recent .det-result { font-variant-numeric: tabular-nums; }
/* ---------- footer ---------- */
.site-footer {
width: var(--col);
margin: 24px auto 40px;
padding: 18px var(--gutter) 0;
border-top: 1px solid var(--rule-strong);
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
gap: 24px;
font-size: 12px;
color: var(--ink-faint);
line-height: 1.55;
}
.site-footer p { margin: 0; }
.caveat { max-width: 64ch; }
.src {
text-align: right;
font-family: var(--mono);
font-size: 11.5px;
letter-spacing: 0.01em;
}
.src a { color: var(--ink-soft); border-bottom-color: var(--rule-strong); }
.site-footer .family {
margin: 0.45rem 0 0;
color: var(--ink-soft);
}
.site-footer .family a {
color: var(--ink-soft);
border-bottom-color: var(--rule-strong);
}
/* ---------- responsive ---------- */
@media (max-width: 1024px) {
:root { --col: 100%; }
.site-header,
.site-footer,
main { width: 100%; }
}
@media (max-width: 768px) {
.site-header {
grid-template-columns: 1fr;
gap: 6px;
}
.last-update { text-align: left; }
.filters { gap: 12px 18px; }
.filters select,
.filters input { min-width: 0; width: 100%; }
.filters label { width: 100%; }
/* table: keep structure, scroll horizontally rather than reflow */
main { overflow-x: auto; }
.leaderboard { min-width: 720px; }
ul.recent li {
grid-template-columns: 1fr auto;
grid-template-rows: none;
grid-template-areas:
"ref date"
"subj subj"
"facts facts"
"haz haz";
row-gap: 4px;
}
ul.recent time { text-align: right; }
ul.recent .haz { justify-content: flex-start; max-width: none; }
.site-footer {
grid-template-columns: 1fr;
}
.src { text-align: left; }
}
/* ---------- print ---------- */
@media print {
body { background: white; color: black; }
.filters, .site-footer .src { display: none; }
.leaderboard tbody tr:hover td { background: transparent; }
a { color: black; border-bottom-color: transparent; }
}
/* ---------- a11y ---------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
transition-duration: 0ms !important;
animation-duration: 0ms !important;
}
}
::selection { background: var(--accent-soft); color: var(--ink); }
ul.recent .cat-chip {
display: inline-block; font-size: 0.74rem; padding: 1px 6px;
background: oklch(0.96 0.005 75); color: var(--ink-soft);
border: 1px solid var(--rule); border-radius: 3px;
margin-right: 6px; font-weight: 500;
font-variant: small-caps; letter-spacing: 0.02em;
}
.bars .bar-value {
font-size: 9px; font-family: var(--mono, ui-monospace, monospace);
fill: var(--ink); text-anchor: middle; font-variant-numeric: tabular-nums;
}
.bars .bar-label {
font-size: 8px; font-family: var(--sans);
fill: var(--ink-soft); text-anchor: middle;
}
/* ====================================================================
v1.1 layout — choropleth + RHS leaderboard
==================================================================== */
:root {
--country-no-data: oklch(0.94 0.003 250); /* cool pale gray, distinct from low-data red */
/* Hatch stroke for "has rejections, no value for the selected metric".
Same family as --country-no-data so it reads as an absence, textured so
it cannot be mistaken for one at a glance. */
--country-unrated-line: oklch(0.80 0.006 250);
--country-stroke: oklch(0.78 0.005 250);
--mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, monospace;
}
main.dashboard { padding: 0.5rem 1rem 1rem; max-width: 1400px; margin: 0 auto; }
/* Screen-reader-only helper used for the H1 on the dashboard. */
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Intro paragraph above the filter row. Two short paragraphs side-by-side on
desktop so they read as a single dense lead, stacked on narrow screens. */
.intro {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
font-size: 0.86rem;
line-height: 1.5;
color: var(--ink-soft);
padding: 0.4rem 0 0.6rem;
border-bottom: 1px solid var(--rule);
margin-bottom: 0.4rem;
}
.intro p { margin: 0; }
.intro strong { color: var(--ink); font-weight: 600; }
.intro em { font-style: normal; color: var(--accent); font-weight: 500; }
@media (max-width: 820px) {
.intro { grid-template-columns: 1fr; gap: 0.5rem; }
}
/* Byline under the data attribution */
.site-footer .byline {
display: inline-block;
margin-top: 0.3rem;
color: var(--ink-faint);
font-family: var(--sans);
letter-spacing: 0.02em;
}
form.filters {
display: flex; flex-wrap: wrap; gap: 0.5rem 1rem;
padding: 0.4rem 0 0.5rem; margin-bottom: 0.5rem;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
}
form.filters label {
display: inline-flex; flex-direction: column; gap: 0.1rem;
font-size: 0.74rem; color: var(--ink-soft); letter-spacing: 0.02em;
text-transform: uppercase;
}
form.filters select {
padding: 0.25rem 0.5rem; border: 1px solid var(--rule);
border-radius: 3px; background: var(--paper); color: var(--ink);
font-size: 0.88rem; font-family: var(--sans);
min-width: 8rem; cursor: pointer;
}
form.filters select:focus { outline: 2px solid var(--accent-ring); outline-offset: 1px; }
/* ---------- info popover (metrics help) ---------- */
form.filters label.metric-label .metric-label-row {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.info-wrap { position: relative; display: inline-flex; }
.info-btn {
/* small (i) button next to the Color-by label */
position: relative;
width: 14px; height: 14px;
border-radius: 50%;
border: 1px solid var(--ink-faint);
background: transparent;
color: var(--ink-faint);
font-family: var(--serif);
font-size: 10px;
font-weight: 600;
font-style: italic;
line-height: 1;
padding: 0;
cursor: help;
transition: color 120ms ease, border-color 120ms ease;
text-transform: none;
letter-spacing: 0;
}
/* A 26px tap target without a 26px circle. Padding would have inflated the
drawn circle (and, pulled back with a negative margin, hidden the full
stop that follows the button in the sentence); an inset pseudo-element
grows only the hit area, and clicks on it still land on the button.
WCAG 2.5.8 asks for 24x24. */
.info-btn::after {
content: "";
position: absolute;
inset: -6px;
}
.info-btn:hover, .info-btn:focus-visible {
color: var(--accent);
border-color: var(--accent);
outline: none;
}
.info-popover {
position: absolute;
top: calc(100% + 8px);
left: -10px;
z-index: 20;
width: min(320px, calc(100vw - 32px));
display: none;
padding: 0.65rem 0.75rem;
background: var(--paper);
border: 1px solid var(--rule-strong);
border-radius: 4px;
box-shadow: 0 6px 24px -8px oklch(0 0 0 / 0.18);
font-size: 0.78rem;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
color: var(--ink);
line-height: 1.5;
cursor: text;
}
.info-popover .info-row {
display: block;
padding: 0.18rem 0;
border-bottom: 1px solid var(--rule);
}
.info-popover .info-row:last-of-type { border-bottom: none; padding-bottom: 0.35rem; }
.info-popover strong {
color: var(--accent);
font-weight: 600;
margin-right: 0.2rem;
}
.info-popover .info-foot {
display: block;
margin-top: 0.45rem;
padding-top: 0.4rem;
border-top: 1px solid var(--rule);
color: var(--ink-faint);
font-size: 0.72rem;
font-style: italic;
}
.info-wrap:hover .info-popover,
.info-wrap:focus-within .info-popover { display: block; }
/* ---------- reading notes ---------- */
/* Closed by default and opened by the reader: the codes and conventions a
page shows but cannot explain inline without becoming an essay. Not the
hover popover used in the filter row — this is several paragraphs someone
wants to keep open while they read the data, and hover does not exist on a
touch screen. */
.reading-notes {
margin: 0.6rem 0 0.9rem;
border: 1px solid var(--rule);
border-radius: 4px;
background: var(--paper);
font-size: 0.82rem;
}
.reading-notes > summary {
cursor: pointer;
padding: 0.5rem 0.7rem;
color: var(--ink-soft);
font-size: 0.74rem;
letter-spacing: 0.06em;
text-transform: uppercase;
list-style: none;
}
.reading-notes > summary::-webkit-details-marker { display: none; }
.reading-notes > summary::before {
content: "+";
display: inline-block;
width: 1em;
font-family: var(--mono);
color: var(--accent);
}
.reading-notes[open] > summary::before { content: "\2212"; }
.reading-notes > summary:hover { color: var(--accent); }
.reading-notes > summary:focus-visible {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
.reading-notes dl {
margin: 0;
padding: 0 0.7rem 0.6rem;
border-top: 1px solid var(--rule);
}
.reading-notes .reading-row {
display: grid;
grid-template-columns: minmax(7.5rem, 11rem) 1fr;
gap: 0 1rem;
padding: 0.5rem 0;
border-bottom: 1px solid var(--rule);
}
.reading-notes .reading-row:last-child { border-bottom: none; padding-bottom: 0; }
.reading-notes dt {
font-weight: 600;
color: var(--accent);
}
.reading-notes dd {
margin: 0;
color: var(--ink-soft);
line-height: 1.55;
max-width: 68ch;
}
.reading-notes dd strong { color: var(--ink); font-weight: 600; }
@media (max-width: 640px) {
.reading-notes .reading-row { grid-template-columns: 1fr; gap: 0.15rem; }
}
/* ---------- dashboard grid ---------- */
/* The map and the leaderboard share one viewport row on desktop. The sidebar
is narrow (260 px) so it survives small laptop widths. Below 900 px the
layout stacks. */
.dashboard-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 260px;
gap: 1rem;
margin-top: 0.25rem;
}
@media (max-width: 900px) {
.dashboard-grid { grid-template-columns: 1fr; }
}
.map-pane {
background: var(--paper);
border: 1px solid var(--rule);
border-radius: 4px;
padding: 0.4rem;
position: relative;
}
/* ---------- choropleth ---------- */
/* Hard cap by viewport height: header (~70 px) + filters (~70 px) + map +
footer (~50 px) must fit a 768 px laptop screen. 58vh on 768 px ≈ 445 px,
leaving ~190 px for chrome. */
#choropleth {
width: 100%;
height: auto;
max-height: min(52vh, 480px);
display: block;
}
#choropleth .country {
transition: fill 240ms ease;
cursor: default;
outline: none;
}
#choropleth .country.has-data { cursor: pointer; }
/* The hatch fill is set in JS; this only softens the transition, which
cannot interpolate between a colour and a pattern. */
#choropleth .country.no-metric { transition: none; }
/* ---------- choropleth legend ---------- */
.choropleth-legend {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.3rem 1rem;
margin: 0.35rem 0 0;
font-size: 0.7rem;
color: var(--ink-faint);
}
.choropleth-legend .swatch {
display: inline-block;
width: 0.85rem;
height: 0.85rem;
margin-right: 0.3rem;
vertical-align: -0.15rem;
border: 1px solid var(--country-stroke);
}
.choropleth-legend .swatch-none { background: var(--country-no-data); }
.choropleth-legend .swatch-unrated {
background:
repeating-linear-gradient(45deg,
var(--country-unrated-line) 0 1.4px,
var(--country-no-data) 1.4px 5px);
}
#choropleth #hover-frame {
transition: none;
filter: drop-shadow(0 0 1px var(--paper));
}
/* ---------- tooltip ---------- */
.choropleth-tooltip {
position: absolute;
pointer-events: none;
background: var(--ink);
color: var(--paper);
padding: 0.5rem 0.7rem;
border-radius: 3px;
font-size: 0.78rem;
z-index: 10;
min-width: 200px;
transition: opacity 80ms ease;
}
.choropleth-tooltip[hidden] { display: none; }
.choropleth-tooltip strong { display: block; margin-bottom: 0.3rem; font-size: 0.86rem; }
.choropleth-tooltip dl {
margin: 0;
display: grid;
grid-template-columns: auto 1fr;
gap: 0.1rem 0.6rem;
}
.choropleth-tooltip dt { color: oklch(0.70 0.005 75); }
.choropleth-tooltip dd {
margin: 0;
font-family: var(--mono);
font-variant-numeric: tabular-nums;
text-align: right;
}
.choropleth-tooltip .tt-hint {
margin: 0.4rem 0 0;
font-size: 0.72rem;
color: oklch(0.70 0.005 75);
font-style: italic;
}
/* ---------- RHS leaderboard ---------- */
/* The leaderboard sits next to the map, scrolls inside its own pane, and
matches the map's max-height so the dashboard fits on one screen. */
.leaderboard-rhs {
max-height: min(52vh, 480px);
overflow-y: auto;
padding: 0.4rem 0.5rem 0.4rem 0.6rem;
border: 1px solid var(--rule);
border-radius: 4px;
background: var(--paper);
}
/* h2 since 2026-09-20 (it sits under a visually-hidden h1; an h3 skipped a
level). These rules are what give it the flex row and the small caps — on
the bare h2 fallback the heading and its metric label collided, reading
"TOP ORIGINSPER $1B US IMPORTS". */
.leaderboard-rhs h2 {
margin: 0 0 0.4rem;
font-size: 0.78rem;
color: var(--ink-soft);
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 600;
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.5rem;
border-bottom: 1px solid var(--rule);
padding-bottom: 0.35rem;
}
.leaderboard-rhs h2 .metric-label {
font-size: 0.7rem;
font-weight: 500;
color: var(--accent);
letter-spacing: 0.04em;
}
.leaderboard-rhs ol {
list-style: none;
padding: 0;
margin: 0;
counter-reset: rank;
}
.leaderboard-rhs li {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 0.5rem;
padding: 0.32rem 0.15rem;
border-bottom: 1px solid var(--rule);
font-size: 0.84rem;
cursor: pointer;
transition: background 120ms ease;
align-items: baseline;
counter-increment: rank;
}
.leaderboard-rhs li::before {
content: counter(rank);
color: var(--ink-faint);
font-family: var(--mono);
font-variant-numeric: tabular-nums;
font-size: 0.74rem;
min-width: 1.4rem;
text-align: right;
}
.leaderboard-rhs li:hover,
.leaderboard-rhs li:focus { background: var(--row-hover); outline: none; }
.leaderboard-rhs li .origin {
font-weight: 500;
color: var(--ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.leaderboard-rhs li .num {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
text-align: right;
color: var(--ink);
font-size: 0.86rem;
}
.leaderboard-rhs .hint {
font-size: 0.7rem;
color: var(--ink-faint);
margin-top: 0.5rem;
padding: 0 0.15rem;
}
/* What the ranking left out. Empty unless app.js fills it, and `:empty`
keeps it from reserving space on the common case where nothing was cut. */
.leaderboard-note {
font-size: 0.72rem;
line-height: 1.45;
color: var(--ink-soft);
margin: 0.55rem 0 0;
padding: 0 0.15rem;
}
.leaderboard-note:empty { display: none; }
/* ---------- stats pages: border rejections by notifying country ---------- */
.stats-table {
width: 100%;
border-collapse: collapse;
font-variant-numeric: tabular-nums;
margin: 0.75rem 0 2rem;
}
.stats-table thead th {
text-align: left;
border-bottom: 2px solid var(--rule-strong);
padding: 0.4rem 0.75rem;
font-weight: 600;
color: var(--ink-soft);
}
.stats-table tbody td,
.stats-table tfoot td {
border-bottom: 1px solid var(--rule);
padding: 0.4rem 0.75rem;
}
.stats-table tfoot td { font-weight: 600; border-bottom: none; }
.stats-table th.num, .stats-table td.num { text-align: right; }
.stats-table tbody tr:nth-child(even) td { background: var(--row-zebra); }
.stats-table tbody tr:hover td { background: var(--row-hover); }
.yoy-strip { color: var(--ink-soft); margin: 0 0 1rem; font-size: 0.95rem; }
.faq { margin-top: 2.5rem; border-top: 1px solid var(--rule); padding-top: 1rem; }
.faq h3 { margin: 1rem 0 0.2rem; font-size: 1rem; }
.faq p { margin-top: 0; color: var(--ink-soft); max-width: 60ch; }
.site-nav { margin: 0.25rem 0; }
.site-nav a { color: var(--accent); text-decoration: none; font-size: 0.95rem; }
.site-nav a:hover { text-decoration: underline; }
/* Related pages — cross-links between detail pages. Detail pages are the
site's main landing surface; without these they are terminal. */
.related-links {
margin-top: 2.5rem;
border-top: 1px solid var(--rule);
padding-top: 1rem;
}
.related-links h2 { margin: 0 0 0.75rem; }
.related-group { margin-bottom: 1.25rem; }
.related-group h3 {
margin: 0 0 0.35rem;
font-size: 0.9rem;
font-weight: 600;
color: var(--ink-soft);
text-transform: none;
}
.related-group ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.35rem 0.75rem;
}
.related-group li { margin: 0; }
.related-group a {
color: var(--accent);
text-decoration: none;
font-size: 0.95rem;
}
.related-group a:hover { text-decoration: underline; }
/* Week table: origin and category cells are now links into detail pages. */
.week .stats-table td a { color: var(--accent); text-decoration: none; }
.week .stats-table td a:hover { text-decoration: underline; }
/* ---------- watch-alert capture ---------- */
/* Sits directly under the page , above the data, so it is found without
scrolling — at the bottom it was effectively invisible. Because it now
precedes the content it has to stay SHORT: one row, no tall card, and the
accent spent only on the button, per the "one accent, used sparingly" rule. */
.watch {
max-width: var(--col);
margin: 0 auto 1.5rem;
padding: 0.7rem 0.9rem 0.75rem;
border: 1px solid var(--rule);
border-left: 3px solid var(--accent);
border-radius: 4px;
background: var(--row-zebra);
}
.watch-h {
margin: 0 0 0.5rem;
font-size: 0.95rem;
font-weight: 600;
color: var(--ink);
letter-spacing: -0.005em;
}
.watch-form {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
align-items: center;
position: relative;
}
.watch-form input[type="email"],
.watch-form select {
font: inherit;
font-size: 0.9rem;
color: var(--ink);
background: var(--paper);
border: 1px solid var(--rule-strong);
border-radius: 5px;
padding: 0.38rem 0.55rem;
}
.watch-form input[type="email"] { flex: 1 1 13rem; min-width: 0; }
.watch-form select { flex: 0 1 12rem; }
.watch-form input[type="email"]:focus-visible,
.watch-form select:focus-visible,
.watch-form button:focus-visible {
outline: 2px solid var(--accent-ring);
outline-offset: 1px;
}
.watch-form button {
font: inherit;
font-size: 0.9rem;
font-weight: 600;
color: var(--paper);
background: var(--accent);
border: 1px solid var(--accent);
border-radius: 5px;
padding: 0.38rem 0.85rem;
cursor: pointer;
white-space: nowrap;
}
.watch-form button:hover { filter: brightness(1.06); }
.watch-form button[disabled] { opacity: 0.6; cursor: progress; }
/* Honeypot: off-screen but focusable-by-bots, never display:none. */
.watch-hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
opacity: 0;
}
.watch-note {
flex: 1 0 100%;
margin: 0;
font-size: 0.85rem;
}
.watch-note:empty { display: none; }
.watch-note.ok { color: var(--pos); }
.watch-note.err { color: var(--neg); }
.watch-legal {
margin: 0.45rem 0 0;
font-size: 0.78rem;
color: var(--ink-faint);
}
/* Narrow screens: the button owns its own row rather than being squeezed. */
@media (max-width: 640px) {
.watch-form input[type="email"],
.watch-form select,
.watch-form button { flex: 1 1 100%; }
}
/* ---------- risk scale ----------
Where this origin sits among the others shipping the same commodity.
The sentence carries the fact; the bar only makes it glanceable, so it
stays quiet — one hairline track, one marker, no colour-coded alarm. */
.risk-scale {
margin: 0.4rem 0 0.9rem;
padding: 0;
max-width: 44rem;
}
.risk-line {
margin: 0 0 0.6rem;
font-size: 0.95rem;
line-height: 1.45;
}
.risk-line strong { color: var(--ink); }
.risk-scale.risk-higher .risk-line strong { color: var(--accent); }
.risk-bar {
position: relative;
height: 6px;
border-radius: 3px;
background: linear-gradient(to right, var(--rule), var(--accent-ring));
}
.risk-marker {
position: absolute;
top: -4px;
width: 2px;
height: 14px;
margin-left: -1px;
background: var(--ink);
}
.risk-ends {
display: flex;
justify-content: space-between;
margin: 0.35rem 0 0;
font-size: 0.75rem;
color: var(--ink-faint);
}
/* The breakdown table's rate column is the reason the table exists. */
.breakdown td.num { font-variant-numeric: tabular-nums; }
/* ---------- EU control-frequency note ----------
The regulatory counterpart to the observed rate. Quiet by default: it is
context for the numbers above it, not a headline of its own. */
.controls-note {
margin: 0.9rem 0 1.2rem;
padding: 0.6rem 0.85rem;
border: 1px solid var(--rule);
background: var(--row-zebra);
font-size: 0.9rem;
line-height: 1.5;
}
.controls-note p { margin: 0; }
.controls-note strong { color: var(--ink); }
/* Hazard | paperwork split on the leaderboard. Rendered only where the
jurisdiction publishes one — absent on rasff, where every hazard group is
kind "hazard" and it would read "N | 0" on every row. Muted, because it is
context for the selected metric rather than a competing figure. */
#leaderboard-list .split {
font-size: 0.78em;
color: var(--muted, #667);
white-space: nowrap;
margin-left: 0.4em;
}
#leaderboard-list .split i { font-style: normal; opacity: 0.45; padding: 0 0.15em; }
/* Four children (rank, origin, split, value) need four tracks. In the
three-track grid the value was pushed onto an implicit second row, so every
ranked origin rendered as two lines with its number orphaned below. */
.leaderboard-rhs ol.has-split li { grid-template-columns: auto 1fr auto auto; }
.leaderboard-rhs ol.has-split li .num { padding-left: 0.15rem; }
/* ——— Target size ————————————————————————————————————————————————————
Inline links inside a table row or a nav sit on a 15-17px line box, which
is a small target on a phone. The extra 4px above and below costs no
layout (the rows already have more leading than that) and lifts every
link in a dense table to a comfortable tap. */
.site-nav a,
.site-footer .explore a,
.stats-table td a,
.yoy-strip a,
ul.recent .notifier a {
padding-block: 4px;
}
.site-nav {
display: flex;
flex-wrap: wrap;
gap: 4px 18px;
}
/* ——— Page organisation, 2026-09-24 ——————————————————————————————————
spec: docs/superpowers/specs/2026-09-24-page-layout-reorg-design.md */
/* Back-links sit under the H1, muted: wayfinding, not content. Two links
are spaced by the layout, not by a separator glyph between them. */
main.detail p.back { margin: 10px 0 0; }
p.back, .link-row, .year-strip, nav.pager, p.latest-week {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.35rem 1.2rem;
}
.year-strip { color: var(--ink-soft); margin: 0 0 1rem; font-size: 0.95rem; gap: 0.35rem 0.9rem; }
.year-strip a, .link-row a, nav.pager a, p.latest-week a { padding-block: 4px; }
main.detail p.back a {
font-size: 12.5px;
color: var(--ink-faint);
border-bottom-color: transparent;
}
main.detail p.back a:hover { color: var(--accent); }
.featured-in {
margin: 10px 0 18px;
max-width: 88ch;
font-size: 13px;
color: var(--ink-faint);
}
.featured-in p { margin: 0 0 2px; }
.featured-in ul { margin: 0; padding: 0; list-style: none; }
.featured-in li { margin: 2px 0; }
.meta-date { color: var(--ink-faint); font-size: 12.5px; }
/* The one sentence that turns a download into a subscription. */
p.entries-watch {
margin: 10px 0 6px;
padding: 0.55rem 0.8rem;
background: var(--accent-soft);
border-radius: 4px;
max-width: 88ch;
}
p.entries-watch strong { font-weight: 600; color: var(--ink); }
p.entries-watch a { color: var(--accent); border-bottom-color: var(--accent-ring); }
/* Key figures: one quiet, headed block of labelled facts. Hairlines, no
tint and no side stripe, so the watch form below stays the one accented
box on the page. */
.key-figures {
margin: 20px 0 22px;
padding: 2px 0 12px;
border-top: 1px solid var(--rule-strong);
border-bottom: 1px solid var(--rule);
}
main.detail .key-figures h2 { margin: 14px 0 6px; }
.kf-sub {
margin: 0 0 8px;
font-size: 15px;
font-weight: 600;
color: var(--ink);
}
dl.kf { margin: 0; }
.kf-row {
display: grid;
grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
gap: 18px;
padding: 7px 0;
border-top: 1px solid var(--rule);
}
.kf-row:first-child { border-top: 0; }
.kf-row dt { font-weight: 600; font-size: 13.5px; color: var(--ink); }
.kf-row dd { margin: 0; max-width: 78ch; font-size: 14px; line-height: 1.5; }
.kf-row dd small, .kf-src { color: var(--ink-faint); font-size: 12.5px; }
.kf-note { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-faint); }
.risk-scale + dl.kf { border-top: 1px solid var(--rule); }
/* Data and downloads: the file, the watch link and the country report,
together at the end instead of scattered between sections. */
.downloads p { margin: 6px 0; max-width: 88ch; }
/* The plotted numbers under each chart, one click away. */
details.chart-data { margin: -14px 0 26px; font-size: 12.5px; }
.bars-legend + details.chart-data { margin-top: -12px; }
details.chart-data > summary {
display: inline-block;
cursor: pointer;
color: var(--ink-faint);
border-bottom: 1px dotted var(--rule-strong);
}
details.chart-data > summary:hover { color: var(--accent); }
details.chart-data > summary:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
details.chart-data .stats-table { max-width: 34rem; margin: 8px 0 0; font-size: 13px; }
/* Long top-N tables: ten rows, the rest a click away. The hidden rows stay
in the markup, so a crawler still reads the whole table. No script. */
table.capped tbody tr:nth-child(n+11) { display: none; }
.more-toggle:checked + table.capped tbody tr { display: table-row; }
.more-label {
display: inline-block;
margin: -1.4rem 0 2rem;
font-size: 13px;
color: var(--accent);
cursor: pointer;
border-bottom: 1px solid var(--rule);
}
.more-label .more-hide { display: none; }
.more-toggle:checked ~ .more-label .more-show { display: none; }
.more-toggle:checked ~ .more-label .more-hide { display: inline; }
.more-toggle:focus-visible ~ .more-label { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
/* A plain link list (404 page) — not an entry ledger. */
ul.links { margin: 0.5rem 0 0; padding-left: 1.1rem; }
ul.links li { margin: 0.35rem 0; }
@media (max-width: 768px) {
/* One scrolling row of nav, not three wrapped rows above the H1. */
.site-nav {
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
margin-inline: calc(-1 * var(--gutter));
padding-inline: var(--gutter);
}
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a { white-space: nowrap; }
}
@media (max-width: 640px) {
.kf-row { grid-template-columns: 1fr; gap: 2px; }
}