/* The family's fonts, tokens and base rules: paper and ink, a serif to read, pixel mono for labels.
   A site's stylesheet is this file, then its brand's skin (skins/<brand>.css), then its own rules (kit.py css()). */
/* Instrument Sans (reading, UI, plots and figures; variable, 400-700), Literata (titles: h1 and h2), Departure Mono
   (labels). Self-hosted, with their licences in fonts/. */
@font-face { font-family: "Instrument Sans"; src: url(/fonts/InstrumentSans-latin.woff2) format("woff2"); font-style: normal; font-weight: 400 700; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; src: url(/fonts/InstrumentSans-latin-ext.woff2) format("woff2"); font-style: normal; font-weight: 400 700; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Sans"; src: url(/fonts/InstrumentSans-italic-latin.woff2) format("woff2"); font-style: italic; font-weight: 400 700; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; src: url(/fonts/InstrumentSans-italic-latin-ext.woff2) format("woff2"); font-style: italic; font-weight: 400 700; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Literata; src: url(/fonts/literata-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Literata; src: url(/fonts/literata-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: Literata; src: url(/fonts/literata-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: Literata; src: url(/fonts/literata-600-normal.woff2) format("woff2"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "Departure Mono"; src: url(/fonts/DepartureMono-Regular.woff2) format("woff2"); font-display: swap; }
@property --i { syntax: "<integer>"; inherits: true; initial-value: 0; } /* an element's place in its group (js/motion.js stagger()): computed where it's set, then inherited */

:root {
  color-scheme: light;
  /* aluminium: a soft cool grey page (the owner: "#f1f3f5, subtle grey") around a lighter sheet (no cream) */
  --desk: #f1f3f5; --sheet: #ffffff; /* the sheet white: on #f1f3f5 a grey sheet vanished; the tinted shadow separates */ --thead: #e2e6ea; --glass: color-mix(in srgb, var(--desk) 96%, transparent); --blur: 20px; /* frosted bars: nearly opaque, a wide blur,
     so what passes under one is a faint even haze, not smudges (at 78% with 16 px a headline became dirty blots; checked at 92/8, 96/20, solid) */
  --ink: #101316; --text: #1b1f23; --mut: #4d555d; --faint: #5a636c; --ghost: #b8bfc6; /* bullets, empty marks */
  --line: #c6ccd2; --grid: #e2e6ea;
  /* signals: the base colour is text (4.5:1 on the sheet and the desk), -bg/-t a tint, -line the border of a tinted box,
     -ink text on the tint. --blue is the brand's accent (links, major titles, highlights): a skin sets its own */
  --blue: #2f43ff; --blue-d: #1a2bd6; --blue-t: #e3e7fb; --blue-line: #c5ccff; --blue-ink: #1e2a9e;
  --title: var(--ink); /* major titles (h1, section h2s): ink (the owner: "mark them as black"); the accent stays for marks and links */
  --ok: #007154; --ok-bg: #dcefe8; --ok-line: #b5e3d2; --ok-ink: #0b4d3b;
  --warn: #7a4f00; --warn-bg: #fbefc8; --bad: #b42d14; --bad-bg: #fbe1da;
  /* fills for squares, bars and marks (too light for text), and their text colours (4.5:1 on the sheet and the desk) */
  --red: #ff4d2e; --yellow: #ffb800; --green: #00a57a; --pink: #e0249a; --violet: #7c3aed; --amber: #f2a900; /* amber: a skin's accent */
  --red-tx: #b4361c; --yellow-tx: #8a5a00; --pink-tx: #b01f84; --violet-tx: #6d28d9;
  --on-fill: #fff; /* text and strokes on a saturated fill (a verdict's mark, a chart's bar): white here, dark at night */
  --hair: rgb(0 0 0 / .14); --shade: rgb(0 0 0 / .08); /* hairlines and soft shadows */
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* reading and headlines */
  --serif-t: Literata, Georgia, "Times New Roman", serif; /* titles (h1, h2): the owner's pick, 2026-09-28; never running text */
  --pix: "Departure Mono", ui-monospace, monospace;
  --mono: ui-monospace, "Cascadia Code", Consolas, "SFMono-Regular", monospace;
  --plot: var(--sans); /* plots and figures speak the site's type (the owner: "using different typography makes no sense") */
  --label: 11px/1.5 var(--pix); /* every label: uppercase, .02em */
  /* offset shadows under boxes: soft and tinted with the brand's accent, as old ethorns' blue ones (never solid black);
     --drop-blue a little stronger, for the box that matters most on a page (a search, a tool) */
  --drop: color-mix(in srgb, var(--blue) 18%, transparent); --drop-blue: color-mix(in srgb, var(--blue) 30%, transparent);
  /* sizes: every font size a site writes is one of these (kit.py css() fails on any other) */
  --fs-label: 11px; --fs-small: 13px; --fs-ui: 15px; --fs-body: 17px; --fs-lead: 19px; --fs-h3: 21px; --fs-h2: 26px;
  --fs-h1: clamp(28px, 3.6vw, 38px); --fs-display: clamp(36px, 5vw, 54px);
  --fs-poster: clamp(42px, 5.8vw, 80px); /* a page's one shout, poster-size: tufotopies' headline and its reveal */
  /* plots and figures (pgfplots, Ipe): a boxed axis with inward ticks, thin strokes, one dotted rule at most, light fills;
     the series start with the brand's accent (--p1), then red, amber, violet, green, grey, each also told by dash and marker */
  --plot-axis: var(--ink); --plot-axis-w: .8px; --plot-tick: 5px; --plot-grid: color-mix(in srgb, var(--ink) 18%, transparent); --plot-fill: 26%;
  --p1: var(--blue); --p2: #c8322a; --p3: #a86a00; --p4: #7a4fd6; --p5: #0a7d45; --p6: #6b7079;
  /* the reading column and its two gaps: --gap from a header to its content and between boxes, --section above a heading */
  --col: 800px; --gap: 28px; --section: 44px;
  --sheet-w: 840px; /* an inner page's sheet (kit.bar(), .sheet): a site whose column is the sheet sets none */
  --hd-h: 65px; /* the frozen header's height: an anchor lands this far down, plus 16 px (a site with another header sets its own) */
  --gutter: 12px; --hd-row: 56px; /* phones: the header's side gutter (the sheet's) and its row (--hd-h: the row and its line) */
}

/* ---------- what every page starts from ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; } /* a class that sets display would override it */
/* No caret in text you can't edit (the owner saw one after a heading): text stays selectable and copyable, only the
   blinking bar goes. Fields keep theirs. Trade-off: with caret browsing on (F7) the caret is invisible outside fields. */
html { -webkit-text-size-adjust: 100%; caret-color: transparent; scroll-padding-top: calc(var(--hd-h) + 16px); } /* an anchor lands clear of the frozen header */
:is(input, textarea, select, [contenteditable]:not([contenteditable=false])) { caret-color: auto; }
body { margin: 0; background: var(--desk); color: var(--text); font: var(--fs-body)/1.65 var(--sans); }
h1, h2 { font-family: var(--serif-t); } /* titles in Literata; a site's own title rules name var(--serif-t) too */
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-d); text-decoration: underline; }
/* a link in running text is underlined: its colour alone is too close to the text's (WCAG 1.4.1). Not in menus and
   contents lists (nav), nor links a site styles itself (a class) */
:is(p, li, dd):not(nav *) > a:not([class]) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* Controls are pressed, not read: a pointer over them, and clicking (twice) never selects their words, so nothing
   looks like a text box you could type in. Text in the page stays selectable; fields keep their caret. */
:where(button, summary, select, label, [role=button]) { cursor: pointer; -webkit-user-select: none; user-select: none; }
/* A frame label (menus, buttons, the language link) at one size in every language (kit.py same()): its longest
   translation sits invisibly in the same cell, so switching language moves nothing. Out of the accessibility tree. */
.same { display: inline-grid; }
.same > *, .same::after { grid-area: 1 / 1; }
.same::after { content: attr(data-twin); visibility: hidden; }
.px { font: var(--label); text-transform: uppercase; letter-spacing: .02em; } /* a label; a site may give its own label elements the same three lines */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* for screen readers only */

/* The skip link (kit.py skip_link()): the page's first link, out of sight until the keyboard reaches it. */
.skip { position: absolute; left: 16px; top: -64px; z-index: 60; padding: 10px 14px; background: var(--sheet); color: var(--ink);
  border: 1px solid var(--ink); box-shadow: 3px 3px 0 var(--drop); font: var(--label); text-transform: uppercase; letter-spacing: .02em; }
.skip:focus { top: 12px; }
.skip:hover { color: var(--ink); text-decoration: none; }

/* The reader's choices (js/prefs.js): the theme button a site places (kit.py theme_button()) says what a click turns
   on, after a half-filled disc that is the same in both themes (a filled square read as "dark mode is on"); it's shown
   only where prefs.js runs, which marks <html class=prefs>
   before the first paint, so nothing moves when it appears. And the hint that offers this page in the reader's
   language, in a corner, until it's dismissed. */
.theme { display: none; align-items: center; gap: 7px; min-height: 0; padding: 0; background: none; border: 0; box-shadow: none; color: inherit; cursor: pointer; }
.prefs .theme { display: inline-flex; }
.theme::before { content: ""; width: 9px; height: 9px; border: 1px solid currentColor; border-radius: 50%; background: linear-gradient(90deg, currentColor 50%, transparent 0); }
.theme .to-light { visibility: hidden; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme=light]) .theme .to-dark { visibility: hidden; }
:root:not([data-theme=light]) .theme .to-light { visibility: visible; }
}
:root[data-theme=dark] .theme .to-dark { visibility: hidden; }
:root[data-theme=dark] .theme .to-light { visibility: visible; }
.langhint { position: fixed; z-index: 50; right: 16px; bottom: 16px; display: flex; align-items: center; background: var(--sheet);
  border: 1px solid var(--ink); box-shadow: 3px 3px 0 var(--drop); font: var(--label); text-transform: uppercase; letter-spacing: .02em; }
.langhint a { padding: 10px 6px 10px 14px; }
.langhint button { align-self: stretch; width: 40px; padding: 0; background: none; border: 0; box-shadow: none; color: var(--mut); font: var(--fs-lead)/1 var(--sans); cursor: pointer; }
.langhint button:hover { color: var(--ink); }
/* phones: a line at the top of the page instead of a box over the text. prefs.js decides in the head and marks
   <html class=hint>, so the line's room is there from the first paint and nothing moves when the hint arrives */
@media (max-width: 640px) {
  .hint body { padding-top: 44px; }
  .langhint { position: absolute; inset: 0 0 auto; height: 44px; justify-content: space-between; border-width: 0 0 1px; border-color: var(--line); box-shadow: none; }
}

/* The family's button (a site may style its own .btn on top: these rules weigh nothing). Disabled, it says so. */
:where(.btn) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
  background: var(--blue); color: var(--sheet); border: 1px solid var(--blue); border-radius: 2px; font: 600 var(--fs-ui)/1.2 var(--sans); text-decoration: none; }
:where(.btn):hover { background: var(--blue-d); border-color: var(--blue-d); color: var(--sheet); text-decoration: none; }
a:where(.btn), a:where(.btn):hover { color: var(--sheet); text-decoration: none; } /* a link that is a button: its label, not the link colour */
:where(.btn):disabled, :where(.btn)[aria-disabled=true] { background: none; border-color: var(--line); color: var(--mut); cursor: not-allowed; }

/* The site-wide notice (kit.notice()): a band above the header on every page, in the caution colours, obvious but in the
   page's flow (it never sticks or covers anything). Its other languages' wording is drawn invisibly in the same cell
   (.tw), so the band has one height in every language and the language switch moves nothing. */
.notice { background: var(--warn-bg); border-bottom: 2px solid var(--warn); color: var(--ink); }
.notice p { display: grid; max-width: 1120px; margin: 0 auto; padding: 12px 20px; font-size: var(--fs-body); line-height: 1.5; text-align: center; text-wrap: pretty; }
.notice p > span { grid-area: 1 / 1; }
.notice b, .notice a { font-weight: 700; }
.notice a { color: color-mix(in srgb, var(--blue) 75%, var(--ink)); text-decoration: underline; text-underline-offset: 2px; }
/* a link that looks like one (the research: colour and underline); a quarter toward the ink keeps AA on the band in both themes */
.notice .tw { visibility: hidden; }
/* the line under a result (kit.result_note()): an estimate, an automated check, public data */
.rnote { margin: 10px 0 0; font-size: var(--fs-small); line-height: 1.5; color: var(--mut); }

/* The header (kit.header(); carbonode's base.html writes the same markup): one frozen row on frosted glass (a layer of
   its own: a filter on .hd would pin the side menu to the header, not the screen), the site's mark, its menus in label
   type and the language switch apart from them. It tightens once the page scrolls (motion.js stick(): .stuck). --hd-mark:
   the current page's underline. On phones, with a Menu button, the menus open from the side (js/prefs.js: .open). */
.hd { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line); transition: box-shadow .2s ease; }
.hd::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--glass); -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur)); }
.hd.stuck { box-shadow: 0 4px 2px -4px var(--shade); }
.hd .wrap { display: flex; align-items: center; gap: 20px; min-height: 64px; transition: min-height .2s ease; }
.hd.stuck .wrap { min-height: 52px; }
.hd .nav { display: flex; gap: 2px; margin-left: auto; }
.hd .nav a, .langs .lang { padding: 8px 10px; font: var(--label); text-transform: uppercase; letter-spacing: .02em; color: var(--ink); white-space: nowrap; }
.hd .nav a:hover { color: var(--blue); text-decoration: none; }
.hd .nav a[aria-current] { box-shadow: inset 0 -2px var(--hd-mark, var(--blue)); }
.hd .nav .same > span { justify-self: center; } /* each item centred in its width for every language */
.langs { display: flex; align-items: center; padding-left: 10px; border-left: 1px solid var(--line); } /* apart from the menus */
.langs .lang { min-width: 3.4em; padding-inline: 6px; text-align: center; color: var(--mut); } /* EN, ES, PT: one width */
.langs .lang:hover { color: var(--ink); text-decoration: none; }
.bar .langs .lang { padding-block: 0; } /* in the page's bar (eThorns): the bar keeps the family's height */
/* The Menu button (kit.header()'s on phones; eThorns' phone menu summary too): MENU and its state, + closed, − open, as a
   theme button names its state. The same on every site. */
.mbtn { display: inline-flex; align-items: center; gap: 8px; height: 36px; min-height: 0; padding: 0 10px; font: var(--label); text-transform: uppercase;
  letter-spacing: .02em; color: var(--ink); background: var(--sheet); border: 1px solid var(--ink); border-radius: 2px; box-shadow: none; }
.mbtn::after { content: "+"; font: var(--fs-ui) var(--pix); color: var(--faint); }
.mbtn[aria-expanded=true]::after, [open] > .mbtn::after { content: "−"; }
.mbtn:hover, .mbtn:active { background: var(--sheet); color: var(--ink); transform: none; box-shadow: none; } /* a site's button hover never fills it */
.hd .mbtn { display: none; }
@media (max-width: 900px) {
  :root { --hd-h: 57px; }
  .hd .wrap, .hd.stuck .wrap { gap: 12px; min-height: var(--hd-row); padding-inline: var(--gutter); } /* one row and one gutter on every site */
  .prefs .hd .mbtn { display: inline-flex; position: relative; z-index: 41; } /* above its panel (40), so a second tap closes it */
  /* open, the button stays on the panel's top edge: fixed where it sits in a header at the top (the notice band above
     the page would otherwise leave it floating over the list) */
  .prefs .hd.open .mbtn { position: fixed; top: calc((var(--hd-row) - 36px) / 2); right: var(--gutter); }
  .prefs .hd:has(.mbtn) .langs { margin-left: auto; border: 0; }
  .prefs .hd:has(.mbtn) .nav { position: fixed; z-index: 40; top: 0; right: 0; bottom: 0; width: min(300px, 82vw); flex-direction: column; gap: 0;
    margin: 0; padding: 64px 20px 20px; background: var(--sheet); border-left: 1px solid var(--line); box-shadow: -8px 0 24px var(--shade);
    overflow-y: auto; visibility: hidden; transform: translateX(100%); transition: transform .2s ease, visibility .2s; }
  .prefs .hd.open { z-index: 60; }
  .prefs .hd.open .nav { visibility: visible; transform: none; }
  .prefs .hd.open::after { content: ""; position: fixed; inset: 0; z-index: 30; background: color-mix(in srgb, var(--ink) 25%, transparent); } /* a tap closes */
  .prefs .hd:has(.mbtn) .nav a { padding: 14px 4px; border-bottom: 1px solid var(--line); }
  .prefs .hd:has(.mbtn) .nav a[aria-current] { box-shadow: inset 3px 0 var(--hd-mark, var(--blue)); padding-left: 12px; }
  .prefs .hd:has(.mbtn) .nav .same > span { justify-self: start; }
}

/* Offers (kit.py offer(), offers()): a product or plan with its price, shown even while it's closed. A closed one keeps
   its place and price, with a badge that says why and an action that's a waitlist or a disabled button. */
.offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.offer { display: flex; flex-direction: column; gap: 10px; padding: 20px; background: var(--sheet); border: 1px solid var(--line); border-radius: 2px; }
.offer :is(h2, h3) { margin: 0; font: 500 var(--fs-lead)/1.3 var(--serif-t); color: var(--ink); } /* a title: Literata, like every h2 */
.offer .price { margin: 0; font: 600 var(--fs-h2)/1.1 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.offer ul { margin: 0; padding-left: 1.1em; color: var(--text); font-size: var(--fs-ui); }
.offer .btn { align-self: flex-start; margin-top: auto; }
.offer .note { margin: 0; color: var(--mut); font-size: var(--fs-small); }
.offer .state { margin: 0; color: var(--warn); } /* why it's closed; its own class, so a site's badge can't restyle it */
.offer.closed { border-style: dashed; }
.offer .btn:disabled { border-style: dashed; box-shadow: none; transform: none; } /* closed like its card: nothing to press */

/* Ad slots (kit.py ad_slot): in the pages from the start, shown only once ads are switched on (<html class="ads">), at a
   fixed height so nothing jumps when they load. */
.ad { display: none; }
/* The page, one parent on every site (the owner: "all should be variations of the same parent"): "← parent" in a bar
   above the sheet (kit.bar()), then the sheet, which opens with its head (kit.head_block(): the label, the title, the
   intro, centred) and ends with the END rule (kit.rule()). Sites vary through tokens (--sheet-w); ethorns' reading
   column widens both to the column on desktops. */
.bar { display: flex; align-items: center; gap: 14px; max-width: var(--sheet-w); margin: 36px auto 16px; padding: 12px 0; font: var(--label);
  text-transform: uppercase; letter-spacing: .02em; color: var(--faint); }
.bar .up { color: var(--ink); } .bar .up:hover { color: var(--blue); text-decoration: none; }
.sheet { min-width: 0; max-width: var(--sheet-w); margin: 0 auto 24px; padding: 40px 56px 32px; overflow-wrap: break-word; background: var(--sheet);
  border: 1px solid var(--line); border-radius: 2px; }
:is(.sheet, .pagehead) > .meta { margin: 0; text-align: center; font: var(--label); text-transform: uppercase; letter-spacing: .02em; color: var(--ink); }
:is(.sheet, .pagehead) > h1 { margin: 10px 0; text-align: center; font: 400 var(--fs-h1)/1.12 var(--serif-t); letter-spacing: -.02em; color: var(--title); text-wrap: balance; }
:is(.sheet, .pagehead) > .dek { max-width: 580px; margin: 0 auto; text-align: center; color: var(--mut); text-wrap: pretty; }
/* a data view (a search, figures, a record: wide, no sheet) opens with the same head, start-aligned (head_block(start=True)) */
.pagehead.start > * { text-align: start; } .pagehead.start > .dek { max-width: 72ch; margin: 0; }
.rule { margin: var(--gap) 0 0; text-align: center; font: var(--label); text-transform: uppercase; letter-spacing: .02em; color: var(--faint); }
@media (max-width: 900px) {
  .bar { max-width: none; margin: 12px 12px 10px; padding: 4px 0; }
  .sheet { max-width: none; margin: 0 12px 24px; padding: 36px 20px 32px; }
}
/* A table marked by kit.stack(): on a phone each row is a block, its first cell the heading and the rest label and value
   (the column headings move onto the cells, so the head is kept for screen readers only). Desktops keep the table. */
@media (max-width: 700px) {
  table.stack, table.stack > tbody, table.stack > tbody > tr, table.stack > tbody > tr > td { display: block; width: auto; }
  table.stack > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.stack > tbody > tr { padding: 10px 12px; border-top: 1px solid var(--line); }
  table.stack > tbody > tr:first-child { border-top: 0; }
  table.stack > tbody > tr > td { padding: 3px 0; border: 0; }
  table.stack > tbody > tr > td:first-child { font-weight: 600; color: var(--ink); }
  table.stack > tbody > tr > td[data-label]::before { content: attr(data-label); display: block; font: var(--label); text-transform: uppercase;
    letter-spacing: .02em; color: var(--faint); }
}
/* Figures (kit.figure()): a drawing on a plate of grid paper, then its caption as a label. The drawing uses the .dg-* pens:
   type (mono, pix, the text face), ink, hairlines, the status colours, and --c (a chapter's or brand's colour: a tint,
   a line and a label in it; --ct for its text shade). Carbonode's charts are .fig too, without a plate. */
.fig { margin: var(--gap) 0 8px; }
.fig .plate { padding: 28px 16px; background: var(--sheet); border: 1px solid var(--line); border-radius: 2px;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 16px 16px; }
.fig .plate svg { display: block; max-width: 100%; height: auto; margin: 0 auto; overflow: visible; }
:where(.fig .plate) text { fill: var(--ink); font-family: var(--sans); }
.plate + figcaption { margin-top: 10px; text-align: center; font: var(--label); text-transform: uppercase; letter-spacing: .02em; color: var(--faint); }
.dg-mono { font-family: var(--mono); } .dg-pix { font-family: var(--pix); text-transform: uppercase; } .dg-serif { font-family: var(--sans); }
.dg-ink { fill: var(--ink); } .dg-mut { fill: var(--mut); } .dg-line { stroke: var(--ink); fill: none; }
.dg-ok { fill: var(--green); } .dg-warn { fill: var(--yellow); } .dg-bad { fill: var(--red); } .dg-na { fill: var(--ghost); }
.dg-okt { fill: var(--ok); } .dg-warnt { fill: var(--warn); } .dg-badt { fill: var(--bad); }
.dg-box { fill: var(--sheet); stroke: var(--ink); } /* before the tints, so a tinted box keeps its ink border */
.dg-tint-ok { fill: var(--ok-bg); } .dg-tint-warn { fill: var(--warn-bg); } .dg-tint-bad { fill: var(--bad-bg); }
.dg-edge-ok { stroke: var(--green); } .dg-edge-warn { stroke: var(--yellow); } .dg-edge-bad { stroke: var(--red); }
.dg-mark { fill: none; stroke: var(--sheet); } .dg-mark.warn { stroke: var(--ink); } /* the tick or cross on a status square */
.dg-plain { --c: var(--faint); --ct: var(--faint); }
.dg-tint { fill: color-mix(in srgb, var(--c) 14%, var(--sheet)); } .dg-cline { stroke: var(--ct, var(--c)); } .dg-clabel { fill: var(--ct, var(--c)); }
html.ads .ad { display: block; position: relative; height: 280px; margin: var(--section) 0 var(--gap); }
html.ads .ad::before { content: attr(data-label); position: absolute; top: -18px; left: 0; color: var(--faint); font: var(--label); text-transform: uppercase; letter-spacing: .02em; }
@media (max-width: 900px) { html.ads .ad { height: 250px; } }

/* The family's night, graphite: lifted, cool and not purple. The same tokens for readers whose system asks for dark, or
   who pick it with the theme button (kit.py theme_button()). A site opts in with kit.css(…, dark=True). Written once,
   as a prefers-color-scheme block: kit.css() also applies it under <html data-theme="dark"> and keeps it off under
   data-theme="light" (js/prefs.js). Text colours are 4.5:1 on the sheet and the desk. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme=light]) {
    color-scheme: dark;
    --desk: #2b2f35; --sheet: #353a41; --thead: #3e434a; --glass: color-mix(in srgb, var(--desk) 96%, transparent);
    --ink: #f1f3f5; --text: #e2e6ea; --mut: #b0b8c0; --faint: #aab2ba; --ghost: #4f565e; --line: #4a5058; --grid: #3e434a;
    --blue: #8c9cff; --blue-d: #b0bcff; --blue-t: #2e3552; --blue-line: #4a5590; --blue-ink: #d0d8ff;
    --ok: #2cd49e; --ok-bg: #1f3d34; --ok-line: #2f6e5a; --ok-ink: #9ff0d2;
    --warn: #f0bd5c; --warn-bg: #4a3a1c; --bad: #ff8a73; --bad-bg: #4a2a26;
    --red: #ff6a50; --yellow: #f5b025; --green: #2cd49e; --pink: #f06ac0; --violet: #a57dfb;
    --red-tx: #ff8a73; --yellow-tx: #f5c04a; --pink-tx: #f58ccf; --violet-tx: #bda0ff; --on-fill: #101316; 
    --hair: rgb(255 255 255 / .12); --shade: rgb(0 0 0 / .35); --drop: color-mix(in srgb, var(--blue) 22%, transparent); --drop-blue: color-mix(in srgb, var(--blue) 30%, transparent); 
    --p2: #ff7b72; --p3: #f0b54a; --p4: #b99bff; --p5: #5fd690; --p6: #a6abb5;
  }
}
:root[data-theme=dark] {
    color-scheme: dark;
    --desk: #2b2f35; --sheet: #353a41; --thead: #3e434a; --glass: color-mix(in srgb, var(--desk) 96%, transparent);
    --ink: #f1f3f5; --text: #e2e6ea; --mut: #b0b8c0; --faint: #aab2ba; --ghost: #4f565e; --line: #4a5058; --grid: #3e434a;
    --blue: #8c9cff; --blue-d: #b0bcff; --blue-t: #2e3552; --blue-line: #4a5590; --blue-ink: #d0d8ff;
    --ok: #2cd49e; --ok-bg: #1f3d34; --ok-line: #2f6e5a; --ok-ink: #9ff0d2;
    --warn: #f0bd5c; --warn-bg: #4a3a1c; --bad: #ff8a73; --bad-bg: #4a2a26;
    --red: #ff6a50; --yellow: #f5b025; --green: #2cd49e; --pink: #f06ac0; --violet: #a57dfb;
    --red-tx: #ff8a73; --yellow-tx: #f5c04a; --pink-tx: #f58ccf; --violet-tx: #bda0ff; --on-fill: #101316; 
    --hair: rgb(255 255 255 / .12); --shade: rgb(0 0 0 / .35); --drop: color-mix(in srgb, var(--blue) 22%, transparent); --drop-blue: color-mix(in srgb, var(--blue) 30%, transparent); 
    --p2: #ff7b72; --p3: #f0b54a; --p4: #b99bff; --p5: #5fd690; --p6: #a6abb5;
  }

/* Carbonode: public tenders in a store-like registry. Petrol for links and focus (the accent), amber for the brand,
   one colour per sector and a fixed one per country. Sector colours are text too: 4.5:1 on the sheet and the desk. */
:root {
  --paper2: var(--desk); --page: var(--thead);
  --acc: #0b5f7c; --acc-d: #084a61; --acc-t: #dde9ef; /* petrol: links, focus */
  --amber-d: #e09c00; --amber-t: #fbefc8; --drop-amber: rgb(242 169 0 / .5); /* the brand: buttons, highlights */
  --s1: var(--p6); --s2: var(--p1); /* chart series: everything else (grey) / energy & climate (the brand's petrol) */
  --r: 4px;
  --on-amber: #101316; /* text on the amber brand fill, dark in both themes */
  --heat: var(--acc); --on-heat: var(--on-fill); /* Markets' heat table: the fill at 100% and the text on its darkest cells */
  --blue: var(--acc); --blue-d: var(--acc-d); --blue-t: var(--acc-t);
}
/* sectors: --c fill and text, --t tint (a mix with the sheet, so it follows the theme) */
.s-energy { --c: #aa4308; } .s-climate { --c: #2f6b3f; } .s-water { --c: #1c699b; } .s-construction { --c: #9a3412; }
.s-it { --c: #4338ca; } .s-health { --c: #be123c; } .s-transport { --c: #52606f; } .s-education { --c: #6d28d9; }
.s-food { --c: #456e0d; } .s-security { --c: #334155; } .s-consulting { --c: #0e7068; } .s-all, .s-other { --c: var(--ink); }
[class*="s-"] { --t: color-mix(in srgb, var(--c) 12%, var(--sheet)); } .s-all, .s-other { --t: var(--grid); }
/* Markets' map and tables: a petrol ramp, low to high; no data, and "other" */
.mk { --mk-q0: #e4f0f5; --mk-q1: #b7d5e2; --mk-q2: #7fb2c9; --mk-q3: #3f87a8; --mk-q4: #0b5f7c; --mk-none: var(--grid); --mk-oth: var(--line); }
/* countries: fixed slots, never by rank */
.k-BR { --k: #2a78d6; } .k-CO { --k: #eb6834; } .k-PE { --k: #1baf7a; } .k-PY { --k: #eda100; }
.k-CA { --k: #e87ba4; } .k-DO { --k: #008300; } .k-EC { --k: #4a3aa7; } .k-MX { --k: #e34948; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme=light]) { --acc: #6ec0de; --acc-d: #9fd6ea; --heat: #276a86; --on-heat: var(--ink); --acc-t: #23404d; --amber-t: #4a3a12;
    --blue: var(--acc); --blue-d: var(--acc-d); --blue-t: var(--acc-t); }
:root:not([data-theme=light]) .s-energy { --c: #f5a766; }
:root:not([data-theme=light]) .s-climate { --c: #7fd49a; }
:root:not([data-theme=light]) .s-water { --c: #74b9ec; }
:root:not([data-theme=light]) .s-construction { --c: #f3977a; }
:root:not([data-theme=light]) .s-it { --c: #a3adff; }
:root:not([data-theme=light]) .s-health { --c: #ff8aa3; }
:root:not([data-theme=light]) .s-transport { --c: #b3bfcc; }
:root:not([data-theme=light]) .s-education { --c: #be9cff; }
:root:not([data-theme=light]) .s-food { --c: #a8d468; }
:root:not([data-theme=light]) .s-security { --c: #b6c2d3; }
:root:not([data-theme=light]) .s-consulting { --c: #5ed6cb; }
:root:not([data-theme=light]) [class*="s-"] { --t: color-mix(in srgb, var(--c) 16%, var(--sheet)); }
:root:not([data-theme=light]) .mk { --mk-q0: #2b4550; --mk-q1: #2f5f73; --mk-q2: #3f819c; --mk-q3: #5fb3d3; --mk-q4: #a9dcef; --mk-oth: var(--ghost); }
}
:root[data-theme=dark] { --acc: #6ec0de; --acc-d: #9fd6ea; --heat: #276a86; --on-heat: var(--ink); --acc-t: #23404d; --amber-t: #4a3a12;
    --blue: var(--acc); --blue-d: var(--acc-d); --blue-t: var(--acc-t); }
:root[data-theme=dark] .s-energy { --c: #f5a766; }
:root[data-theme=dark] .s-climate { --c: #7fd49a; }
:root[data-theme=dark] .s-water { --c: #74b9ec; }
:root[data-theme=dark] .s-construction { --c: #f3977a; }
:root[data-theme=dark] .s-it { --c: #a3adff; }
:root[data-theme=dark] .s-health { --c: #ff8aa3; }
:root[data-theme=dark] .s-transport { --c: #b3bfcc; }
:root[data-theme=dark] .s-education { --c: #be9cff; }
:root[data-theme=dark] .s-food { --c: #a8d468; }
:root[data-theme=dark] .s-security { --c: #b6c2d3; }
:root[data-theme=dark] .s-consulting { --c: #5ed6cb; }
:root[data-theme=dark] [class*="s-"] { --t: color-mix(in srgb, var(--c) 16%, var(--sheet)); }
:root[data-theme=dark] .mk { --mk-q0: #2b4550; --mk-q1: #2f5f73; --mk-q2: #3f819c; --mk-q3: #5fb3d3; --mk-q4: #a9dcef; --mk-oth: var(--ghost); }

/* Carbonode: a public-tender aggregator in the eThorns family. Paper and ink, one colour per sector, pixel labels as
   accents only. Readable first: a system sans for everything you scan, Literata for headlines. */
/* Tokens, fonts, the night, the sector and country colours: style-engine (vendor/style: base.css, dark.css,
   skins/carbonode.css), bundled with this file by app.py (kit.bundle()). Sizes are the family's --fs-* tokens. */

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--desk); color: var(--text); font: var(--fs-body)/1.55 var(--sans); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
a { color: var(--acc); text-decoration: none; }
a:hover { color: var(--acc-d); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
/* Controls are pressed, not read (as style-engine v1.3.0): a pointer, and clicking never selects their words. Titles,
   process numbers, buyers and amounts stay selectable; fields keep their caret. */
:where(button, summary, select, label, [role=button]) { cursor: pointer; -webkit-user-select: none; user-select: none; }
/* A header label at the size of its longest translation (base.html same()): switching language moves nothing */
.same { display: inline-grid; }
.same > *, .same::after { grid-area: 1 / 1; }
.same::after { content: attr(data-twin); visibility: hidden; }
.px, kbd { font: var(--fs-label)/1.4 var(--pix); text-transform: uppercase; letter-spacing: .02em; }
.vh, .hp { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding-inline: 24px; } /* sides only: main's own top and bottom padding holds */
.mono { font-family: var(--mono); }

/* ---------- header: the engine's (base.css .hd; base.html writes kit.header()'s markup) with the search in its row: logo, search,
   the menus, the languages. Narrower, stacked (see the end): only the search stays frozen ---------- */
.hd { --hd-mark: var(--amber); } /* the current page's underline, the amber of the brand's square */
.hd .wrap { height: 64px; } /* the landing's frozen search sits right under it (.hqw top: 64px) */
.brand { display: flex; align-items: center; gap: 9px; font: var(--fs-body) var(--pix); text-transform: uppercase; color: var(--ink); letter-spacing: .02em; }
.brand::before { content: ""; width: 12px; height: 12px; flex-shrink: 0; background: var(--amber); box-shadow: 0 0 0 1.5px var(--ink); }
.brand:hover { text-decoration: none; color: var(--ink); }
.hd .sq { flex: 1; max-width: 560px; }
.sq { display: flex; align-items: center; background: var(--sheet); border: 1px solid var(--ink); border-radius: var(--r); box-shadow: 2px 2px 0 var(--drop); }
.sq:focus-within { box-shadow: 3px 3px 0 var(--drop); outline: 2px solid var(--acc); outline-offset: 2px; }  /* the input itself has none (B-03) */
.sq input[type=search] { flex: 1; min-width: 0; min-height: 0; height: 40px; padding: 0 12px; border: 0; border-radius: var(--r) 0 0 var(--r); outline: 0;
  background: none; font: var(--fs-body) var(--sans); color: var(--ink); }
.sq button { width: 44px; min-height: 0; height: 40px; padding: 0; border: 0; border-left: 1px solid var(--line); border-radius: 0 var(--r) var(--r) 0;
  background: none; box-shadow: none; color: var(--ink); }
.sq button:hover { background: var(--paper2); transform: none; }

/* ---------- page type ---------- */
main { padding-top: 34px; padding-bottom: 64px; min-height: 60vh; }
.ph { margin-bottom: 22px; }
.ph h1, .hero h1 { font: 400 var(--fs-h1)/1.12 var(--serif-t); letter-spacing: -.02em; color: var(--title); text-wrap: balance; }
.ph .lead, .hero .lead { margin-top: 8px; max-width: 70ch; font-size: var(--fs-body); color: var(--mut); }
.eyebrow { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 18px; font: var(--fs-label) var(--pix); text-transform: uppercase; color: var(--ink); } /* a label in ink, as on every family site */
:is(.eyebrow, .meta) .live { color: var(--ok); } :is(.eyebrow, .meta) .live::before { content: "● "; }
.sh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 32px 0 12px; }
.sh h2 { font: 600 var(--fs-body)/1.3 var(--serif-t); color: var(--ink); }
main > h2, section > h2 { font: 500 var(--fs-h2)/1.25 var(--serif-t); letter-spacing: -.01em; color: var(--title); }
.sh h2 { margin: 0; }
.sh .n { margin-right: 8px; font: var(--fs-small) var(--pix); color: var(--faint); vertical-align: 3px; }
.sh .more { margin-left: auto; font-size: var(--fs-small); font-weight: 600; }
.more { margin-left: auto; font-size: var(--fs-ui); font-weight: 600; }
.muted { color: var(--mut); }

/* ---------- controls ---------- */
input, select, textarea, button { font: inherit; color: var(--ink); }
input[type=text], input[type=email], input[type=search], select, textarea { max-width: 100%; min-height: 44px; padding: 9px 12px; background: var(--sheet);
  border: 1px solid var(--ink); border-radius: var(--r); font: var(--fs-body) var(--sans); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--acc); outline-offset: 1px; }
input[type=checkbox], input[type=radio] { accent-color: var(--acc); width: 16px; height: 16px; margin: 0; flex-shrink: 0; }
button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 18px; background: var(--amber); color: var(--on-amber);
  border: 1px solid var(--ink); border-radius: var(--r); font: 600 var(--fs-ui) var(--sans); cursor: pointer; box-shadow: 3px 3px 0 var(--drop); text-decoration: none; white-space: nowrap; }
@media (hover: hover) { button:hover, .btn:hover { background: var(--amber-d); color: var(--on-amber); text-decoration: none; } } /* a tap on a phone leaves no fill */
button:active, .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--drop); }
button:disabled, button:disabled:hover { background: none; border-color: var(--line); color: var(--mut); box-shadow: none; transform: none; cursor: not-allowed; }
.wl button:disabled, .cf button:disabled, .cbar button:disabled { border-style: dashed; box-shadow: none; } /* sign-ups closed: dashed like the engine's closed offers, nothing to press (the bar's .btn.sm drop too) */
.btn.sec { background: var(--sheet); color: var(--ink); } .btn.sec:hover { background: var(--paper2); color: var(--ink); }
.btn.go { background: var(--ink); color: var(--sheet); } .btn.go:hover { background: var(--text); color: var(--sheet); }
.btn.sm { min-height: 36px; padding: 0 12px; font-size: var(--fs-ui); box-shadow: 2px 2px 0 var(--drop); }
.err { display: block; color: var(--bad); font-size: var(--fs-ui); }
[aria-invalid=true] { border-color: var(--bad) !important; }

/* sector tags, deadline badges, country keys */
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); font-weight: 500; color: var(--c, var(--ink)); white-space: nowrap; }
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; background: var(--c, var(--ink)); }
a.chip:hover { color: var(--c); }
/* deadline badge: the one place the pixel font shows up in lists; urgency is the dot + tint, the text stays ink */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 999px; font: var(--fs-label)/1.2 var(--pix); text-transform: uppercase;
  letter-spacing: .02em; color: var(--ink); white-space: nowrap; }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tone); }
.red { --tone: var(--bad); background: var(--bad-bg); } .amber { --tone: var(--warn); background: var(--warn-bg); }
.green { --tone: var(--ok); background: var(--ok-bg); } .grey { --tone: var(--faint); background: var(--grid); }
.kk { display: inline-block; flex-shrink: 0; width: 9px; height: 9px; margin-right: 6px; border-radius: 2px; background: var(--k, var(--faint)); }

/* the workbench: grid paper under an ink frame, its label sitting on the border line (from eThorns) */
.bench { position: relative; margin: 30px 0 8px; padding: 26px 22px 22px; border: 1px solid var(--ink); border-radius: var(--r);
  background-color: var(--sheet); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 16px 16px; }
.bench::before { content: attr(data-label); position: absolute; top: -8px; left: 14px; padding: 0 6px; background: var(--sheet);
  font: var(--fs-label)/16px var(--pix); text-transform: uppercase; color: var(--c, var(--ink)); }
.bench > * { position: relative; }
.bench h2 { margin: 0 0 6px; }

/* ---------- tender cards: three columns (two, one on phones), each classified: its sector and deadline on top ---------- */
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
/* a quiet card (the owner's pick): a hairline box with the family's soft tinted shadow, no coloured rule */
.tc { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 18px 20px; background: var(--sheet);
  border: 1px solid var(--line); border-radius: var(--r); box-shadow: 3px 3px 0 var(--drop); }
.tc .cls { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; font-size: var(--fs-small); }
.tc .sec { display: inline-flex; align-items: center; gap: 7px; min-width: 0; color: var(--mut); } /* the sector: a mark and its name */
.tc .sec::before { content: ""; width: 8px; height: 8px; flex-shrink: 0; background: var(--c); }
.tc .badge { padding: 0; background: none; border: 0; font: var(--fs-small) var(--sans); text-transform: none; letter-spacing: 0; } /* the deadline as text; its dot keeps the tone */
.tc .t { font-size: var(--fs-body); font-weight: 600; line-height: 1.35; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.tc .t::after { content: ""; position: absolute; inset: 0; } /* the whole card is the link */
.tc .tf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: auto 0 0; padding-top: 2px; font-size: var(--fs-small); color: var(--mut); }
.tc .tf > span:first-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.price { font-size: var(--fs-body); font-weight: 700; color: var(--ink); white-space: nowrap; }
.price small { margin-right: 4px; font: inherit; font-weight: 400; color: var(--mut); }
.price.none { font-size: var(--fs-small); font-weight: 400; font-style: normal; color: var(--mut); white-space: normal; }
.tc:hover { border-color: var(--ink); }
.tc:hover .t { color: var(--acc); }
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid { grid-template-columns: minmax(0, 1fr); } }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 20px; font-size: var(--fs-ui); color: var(--mut); }
.empty { padding: 36px 20px; text-align: center; color: var(--mut); background: var(--sheet); border: 1px dashed var(--line); border-radius: var(--r); }

/* ---------- search layout: filters | results ---------- */
.srch { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start; }
.facets { position: sticky; top: 140px; max-height: calc(100vh - 160px); overflow-y: auto; scrollbar-width: thin; padding-right: 4px; }
.facets h2 { margin: 0 0 12px; font: var(--fs-label) var(--pix); text-transform: uppercase; color: var(--ink); }
.fg { padding: 12px 0; border-top: 1px solid var(--line); }
.fg h3 { margin: 0 0 6px; font-size: var(--fs-small); font-weight: 700; color: var(--ink); }
.fg ul { list-style: none; margin: 0; padding: 0; }
.fg a { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: var(--r); font-size: var(--fs-ui); color: var(--ink); }
/* radio look: each group is one choice (a checkbox look promised multi-select, UX audit A-07) */
.fg a::before { content: ""; width: 14px; height: 14px; flex-shrink: 0; border: 1px solid var(--faint); border-radius: 50%; background: var(--sheet); }
.fg a[aria-current]::before { border-color: var(--ink); box-shadow: inset 0 0 0 3px var(--sheet); background: var(--ink); }
.fg a[aria-current] { font-weight: 600; }
.fg a span { margin-left: auto; font: var(--fs-label) var(--pix); color: var(--faint); }
.fg a:hover { background: var(--sheet); text-decoration: none; }
.fg li > a:not([class]) { text-decoration: none; } /* controls, not running text: the engine underlines links in lists */
.fg a .kk, .fg a .sw2 { margin: 0; }
.sw2 { width: 9px; height: 9px; border-radius: 2px; background: var(--c); flex-shrink: 0; }
.fm { display: none; }
.rbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 12px; }
.note { margin: 10px 0 0; font-size: var(--fs-small); color: var(--mut); }
.rbar .mt { flex-basis: 100%; margin: -6px 0 0; }
.rbar .sort { display: inline-flex; gap: 12px; font-size: var(--fs-small); }
.rbar .sort a { color: var(--mut); }
.rbar .sort a[aria-current] { color: var(--ink); font-weight: 700; }
.empty p { margin: 0 0 8px; }
.empty a { margin-right: 14px; font-weight: 600; }
.buy .al { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-ui); font-weight: 600; }
.mbar .btn { min-height: 44px; }  /* B-19 */
.bench.cf { max-width: 560px; margin: 24px auto; }
.bench.cf h1 { margin: 0 0 10px; font-size: var(--fs-h2); }
.bench.cf button { margin-top: 12px; }
.prose table { display: block; overflow-x: auto; }  /* weekly tables scrolled the whole page sideways on phones (A-13) */
main.app .srch > aside, main.app .srch > section { overscroll-behavior: contain; }  /* the list's end doesn't scroll the frame (A-18) */
@media (max-width: 640px) { .hubfig { display: none; } }  /* hubs: the list first on phones (A-09); the KPIs stay */
@media (max-height: 500px) { .hd { position: static; } }  /* landscape phones, 200% zoom: header + bar covered a third (B-11) */
html:has(.mbar) { scroll-padding-bottom: 72px; }
@media (max-width: 400px) {  /* Turnstile needs 300 px: no frame around the form on small phones (B-13) */
  .bench.wl { padding-inline: 0; border: 0; background: none; box-shadow: none; }
  .bench.wl::before { display: none; }
}
.rbar b { font-size: var(--fs-body); }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; background: var(--ink); color: var(--sheet); border-radius: 999px; font-size: var(--fs-small); }
.pill:hover { color: var(--sheet); background: var(--text); text-decoration: none; }
.rbar .alert { margin-left: auto; font-size: var(--fs-ui); font-weight: 600; }

/* ---------- home: a headline, one quiet number line, one list ---------- */
.hero { padding: 6px 0 2px; }
.hero h1 { max-width: 30ch; } /* Literata runs wider than the sans: two lines, not three */
.stat1 { margin-top: 10px; font-size: var(--fs-body); color: var(--mut); }
.stat1 b { color: var(--ink); font-weight: 700; }
.stat1 a { text-decoration: underline; }  /* a link in running text is told apart by more than colour */
/* AdSense auto ads insert fixed-width blocks: never wider than the page (sideways scroll at 1280 px, site QA 2026-09-27) */
ins.adsbygoogle { max-width: 100% !important; overflow: hidden; }
.hero.hs { padding: 28px 0 4px; text-align: center; }
.hero.hs h1 { margin: 0 auto; }
/* The landing's search: its full-width wrapper (.hqw) freezes under the header (static/site.js: .stuck) and the field
   tightens, 52 to 40 px, inside the wrapper's padding (22 + 52 = 17 + 40 + 17): the wrapper keeps its height, so nothing
   below moves. From 1024 px it freezes inside the header, between the logo (121 px) and the menus with the languages
   (449 px: measured, and the same in every language, since the labels' twins keep them one width). Below that it
   freezes under the header (at the top on phones, where the header's row has scrolled off) on a band of its glass. */
.hqw { position: sticky; top: 64px; z-index: 25; padding: 22px 0 0; }
.hq { max-width: 640px; margin: 0 auto; box-shadow: 3px 3px 0 var(--drop); transition: max-width .2s ease, box-shadow .2s ease; }
.hq input[type=search] { height: 52px; padding: 0 16px; font-size: var(--fs-body); transition: height .2s ease; }
.hq button { width: 56px; height: 52px; transition: height .2s ease; }
.hqw.stuck { padding: 17px 0; }
.hqw.stuck .hq { box-shadow: 2px 2px 0 var(--drop); }
.hqw.stuck .hq input[type=search], .hqw.stuck .hq button { height: 40px; }
@media (min-width: 1024px) { .hqw { top: -5px; } .hqw.stuck .hq { margin-left: 141px; max-width: min(560px, 100% - 610px); } }
@media (max-width: 1023px) {
  .hqw { margin-inline: -24px; padding-inline: 24px; }
  .hqw.stuck { background: var(--glass); -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur)); border-bottom: 1px solid var(--line); }
  .hqw.stuck .hq { max-width: none; }
}
@media (max-width: 640px) { .hqw { margin-inline: -12px; padding-inline: 12px; } } /* the phone gutter (12 px) */
.hs2 { padding-top: 0; }
/* Frozen headers of guides and alerts: once the page's title has scrolled under the header, a slim bar with it and the
   page's action (static/site.js: .on). Fixed, so nothing in the page moves. */
.cbar { position: fixed; z-index: 18; top: 64px; left: 0; right: 0; display: flex; align-items: center; gap: 14px;
  padding: 8px max(24px, (100vw - 1232px) / 2); background: var(--glass); -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur));
  border-bottom: 1px solid var(--line); visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .15s, transform .15s, visibility .15s; }
.cbar.on { visibility: visible; opacity: 1; transform: none; }
.cbar .t { flex: 1; min-width: 0; font-weight: 600; color: var(--title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cbar .btn { flex-shrink: 0; }
.more.below { margin: 18px 0 0; } .more.above { margin: 0 0 8px; }
.catgrid.gd { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .gd .ct i { background: color-mix(in srgb, var(--k) 15%, var(--sheet)); color: var(--ink); } .gd .kk { margin: 0; }
.catgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.ct { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); box-shadow: 3px 3px 0 var(--drop); }
.ct i { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--r); background: var(--t); color: var(--c); }
.ct b { display: block; font-size: var(--fs-ui); font-weight: 600; line-height: 1.25; }
.ct small { font-size: var(--fs-small); color: var(--mut); }
.ct:hover { border-color: var(--c); text-decoration: none; color: var(--ink); }
.band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px; align-items: center; margin-top: 56px; background-image: none; }
.offer { box-shadow: 3px 3px 0 var(--drop); } /* the alert tiers, like the cards */
.band p { color: var(--mut); }
.band form { display: flex; flex-wrap: wrap; gap: 10px; }
.band input { flex: 1 1 220px; } .band select { flex: 0 1 200px; }

/* ---------- tender page: product layout with a sticky "buy box" ---------- */
main > .bar { max-width: none; margin: 2px 0 16px; } /* the engine's bar (kit.bar()): on the data views it aligns with the wide column;
   2 px + main's 34 px put it where the family's bar sits (36 px), and 16 px above the sheet as everywhere */
.sheet > .buy { position: static; margin-top: 36px; } .sheet > .buy .btn { width: auto; align-self: flex-start; } /* a guide's country box, at the end of its sheet, on its column */
.plans { margin: 36px 0 12px; } .plans .offers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } /* /alerts: the plans on the desk */
.plans > .note { margin-top: 14px; color: var(--mut); }
.ag + .sheet { margin-top: 36px; } /* /alerts' questions: running text, on a sheet of their own (the example and the form stay on the desk) */
@media (max-width: 900px) { .plans .offers { grid-template-columns: minmax(0, 1fr); } }
main.app > .bar { margin-top: 16px; } /* Explore's frame starts 20 px down: the bar still lands at the family's 36 px */
@media (min-width: 901px) { main > .bar:has(+ .sheet) { max-width: var(--sheet-w); margin-inline: auto; } } /* over a reading page's sheet, its edge */
@media (max-width: 900px) { main > .bar { margin: 0 0 10px; } main > .sheet { margin-inline: 0; } } /* main keeps the family's 12 px gutter */
@media (max-width: 900px) { main:has(> .bar:first-child) { padding-top: 12px; } } /* on phones the bar sits 16 px under the header, as on every family site */
.th { max-width: 860px; margin-bottom: 20px; }
.th h1 { margin-top: 6px; font: 400 var(--fs-h2)/1.25 var(--serif-t); letter-spacing: -.01em; color: var(--title); overflow-wrap: anywhere; text-wrap: pretty; }
.th .buyer { margin-top: 6px; font-size: var(--fs-body); color: var(--ink); }
.pp { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 36px; align-items: start; }
.pp > .buy { grid-column: 2; grid-row: 1; }
.pp > article { grid-column: 1; grid-row: 1; min-width: 0; }
.tnote { margin-top: 8px; font-size: var(--fs-small); color: var(--mut); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tnote span { font-style: italic; color: var(--mut); }
.pp h2 { margin: 30px 0 10px; font: 600 var(--fs-body) var(--serif-t); color: var(--ink); }
.facts { width: 100%; border-collapse: collapse; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); }
.facts th { width: 36%; padding: 10px 14px; text-align: left; vertical-align: top; font-size: var(--fs-ui); font-weight: 600; color: var(--mut); background: var(--page); border-top: 1px solid var(--line); }
.facts td { padding: 10px 14px; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.facts tr:first-child th, .facts tr:first-child td { border-top: 0; }
.desc { white-space: pre-line; overflow-wrap: anywhere; color: var(--mut); max-width: 80ch; }
.buy { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 12px; padding: 20px; background: var(--sheet); border: 1px solid var(--ink);
  border-radius: var(--r); box-shadow: 6px 6px 0 var(--drop); }
.buy .px { color: var(--faint); }
.buy .btn { white-space: normal; text-align: center; line-height: 1.3; padding-block: 8px; } /* long labels wrap inside the box */
.buy .big { font-size: var(--fs-h2); font-weight: 700; line-height: 1.15; color: var(--ink); overflow-wrap: anywhere; }
.buy .big.none { font-size: var(--fs-body); font-weight: 400; font-style: italic; color: var(--mut); }
.buy .dl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--mut); }
.buy .btn { width: 100%; }
.srcl { font-size: var(--fs-small); line-height: 1.55; color: var(--mut); }
.srcl a { text-decoration: underline; }
.tlbar { position: relative; height: 10px; margin: 30px 0 10px; border-radius: 999px; background: var(--grid); }
.tlbar i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--acc); transform-origin: left; }
.tlbar b { position: absolute; top: -24px; transform: translateX(-50%); font: var(--fs-label) var(--pix); text-transform: uppercase; font-weight: 400; color: var(--acc); white-space: nowrap; }
.tl3 { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-ui); }
.tl3 span { display: flex; flex-direction: column; color: var(--mut); }
.tl3 b { font-size: var(--fs-small); color: var(--ink); }
.tl3 span:last-child { align-items: flex-end; text-align: right; }
.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r); font: var(--fs-small) var(--pix); color: var(--sheet); background: var(--ink); }

/* ---------- alerts, prose ---------- */
.mail { max-width: 620px; background: var(--sheet); border: 1px solid var(--ink); border-radius: var(--r); box-shadow: 6px 6px 0 var(--drop); overflow: hidden; }
.mail figcaption { padding: 7px 14px; font: var(--fs-label) var(--pix); text-transform: uppercase; color: var(--faint); background: var(--page); border-bottom: 1px solid var(--ink); }
.mh { display: flex; flex-direction: column; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.mh span { font-size: var(--fs-small); color: var(--faint); } .mh strong { font-weight: 700; }
.mr { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-bottom: 1px solid var(--grid); }
.mr > span { font-size: var(--fs-small); color: var(--faint); }
.mr a { font-weight: 600; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
.ag { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; margin-top: 30px; }
#plans { align-items: stretch; }  /* the account page links here; the page's scroll padding clears the frozen header */
.ag + h2 { margin-top: 44px; }  /* the alerts page's questions: clear of the column above whatever it ends with */
.checks { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.checks li { display: flex; gap: 10px; align-items: baseline; }
.checks li::before { content: "✓"; font-weight: 700; color: var(--ok); }
.wl { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.wl .fld { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; border: 0; }
.wl .fld > label { font-size: var(--fs-ui); font-weight: 600; color: var(--ink); }
.opt, .hint { font-size: var(--fs-small); font-weight: 400; color: var(--faint); }
.wl input[type=email], .wl input[type=text], .wl select, .wl textarea { width: 100%; }
.wl legend { padding: 0; margin-bottom: 2px; font-size: var(--fs-ui); font-weight: 600; color: var(--ink); }
.picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 16px; margin-top: 6px; }
.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.pp .bench.wl { margin-top: 8px; }  /* the account form, level with the plan box */
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-ui); line-height: 1.5; }
.consent input { margin-top: 3px; } .consent a { text-decoration: underline; }
.faq details { border-top: 1px solid var(--line); padding: 12px 0; }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 8px 0; display: flex; gap: 12px; justify-content: space-between; font-weight: 600; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: var(--fs-ui) var(--pix); color: var(--faint); }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 10px 0 0; color: var(--mut); max-width: 80ch; }
.prose { font-size: var(--fs-body); line-height: 1.7; } /* a reading page: the engine's .sheet sets its width */
.prose h2 { margin: 32px 0 8px; font: 500 var(--fs-h3) var(--serif-t); color: var(--title); }
.prose h3 { margin: 22px 0 6px; font-size: var(--fs-lead); color: var(--ink); }
.prose p, .prose ul, .prose ol { margin-bottom: 12px; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose a:not(.btn) { text-decoration: underline; } /* links in the text; not its buttons (the title bar's) */
.prose table { width: 100%; border-collapse: collapse; margin: 12px 0 18px; font-size: var(--fs-ui); }
.prose th, .prose td { padding: 8px 10px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { background: var(--page); }
.ph .more { margin-top: 10px; }
.more.wk { margin-top: 14px; }
  border-radius: var(--r); color: var(--ink); }
.buy .dl .chip { margin-right: auto; }
.buy .dl b { font-size: var(--fs-lead); color: var(--ink); }
.sum { margin: 22px 0 6px; padding: 16px 18px; background: var(--sheet); border: 1px solid var(--line); border-left: 3px solid var(--amber); border-radius: var(--r); }
.sum h2 { margin: 0 0 6px; }
.sum p { max-width: 72ch; font-size: var(--fs-body); line-height: 1.65; }
.sub { color: var(--mut); font-size: var(--fs-small); white-space: nowrap; }
.buy .sub { display: block; margin-top: 2px; }
.sub.why { white-space: normal; }  /* a sentence (the RUP reason): it wraps, or a phone's facts table outgrows the screen */
.gl { margin-top: 14px; }
.prose-in ul { padding-left: 1.2em; } .prose-in a { text-decoration: underline; }

/* ---------- footer ---------- */
.ft { border-top: 1px solid var(--line); background: var(--sheet); }
.ft .wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 24px; padding-top: 32px; padding-bottom: 36px; font-size: var(--fs-ui); }
.ft h2 { margin: 0 0 8px; font: var(--fs-label) var(--pix); text-transform: uppercase; color: var(--ink); }
.ft ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ft a { color: var(--mut); }
.ft .fd { color: var(--mut); max-width: 52ch; }
.ft .sup { max-width: 52ch; margin-top: 16px; padding: 14px 16px; background: var(--desk); border: 1px solid var(--line); border-left: 3px solid var(--amber); border-radius: var(--r); }
.ft .sup p { margin-bottom: 10px; color: var(--mut); }
.ft .sup .btn { color: var(--ink); }
.ft .made { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding-top: 14px; border-top: 1px solid var(--line); font: var(--fs-label) var(--pix); text-transform: uppercase; color: var(--faint); }

/* ---------- dashboards ---------- */
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 30px 0 0; border: 1px solid var(--ink); border-radius: 2px; background: var(--sheet); }
.kpis > div { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; border-left: 1px solid var(--line); min-width: 0; }
.kpis > div:first-child { border-left: 0; }
.kpis dt { font: var(--fs-label)/1.4 var(--pix); text-transform: uppercase; color: var(--faint); }
.kpis dd { font: 400 var(--fs-h2)/1.15 var(--sans); letter-spacing: -.02em; color: var(--ink); overflow-wrap: anywhere; }
.kpis dd.kn { font: var(--fs-small)/1.45 var(--sans); letter-spacing: normal; color: var(--mut); margin: 0; }  /* a figure's note: a dd, not a p (valid dl) */
.kpis .gr dd { color: var(--ok); }
.kpis .dl { font: var(--fs-label) var(--pix); text-transform: uppercase; }
.kpis .dl.up { color: var(--ok); } .kpis .dl.dn { color: var(--bad); }
.g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 40px; align-items: start; }
.fig { margin: 22px 0 8px; min-width: 0; }
.fig figcaption { margin-top: 10px; text-align: center; font: var(--fs-small)/1.45 var(--plot); color: var(--text); }
.fig figcaption b { color: var(--ink); font-weight: 400; }
.plotbox { padding: 18px 4px 12px; } /* no grid paper: the plot draws its own box (pgfplots) */
.fh { margin: 0 0 10px; font: italic var(--fs-small) var(--plot); color: var(--ink); }
.lg { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 10px; padding: 4px 8px; border: .6px solid var(--plot-axis);
  background: var(--sheet); font: var(--fs-small)/1.2 var(--plot); color: var(--ink); max-width: none !important; } /* a framed legend */
.sw { width: 14px; height: 8px; background: color-mix(in srgb, var(--s1) var(--plot-fill), var(--sheet)); box-shadow: inset 0 0 0 .6px var(--s1); }
.sw.s2 { margin-left: 12px; background: color-mix(in srgb, var(--s2) 55%, var(--sheet)); box-shadow: inset 0 0 0 .6px var(--s2); }
[data-tip] { position: relative; }
[data-tip]:hover::after { content: attr(data-tip); position: absolute; z-index: 5; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  padding: 4px 8px; background: var(--ink); color: var(--sheet); font: var(--fs-label)/1.4 var(--pix); text-transform: uppercase; white-space: nowrap; pointer-events: none;
  box-shadow: 3px 3px 0 var(--drop); }

.bars { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: var(--h) auto; column-gap: 10px; }
.bars .ya { position: relative; min-width: 24px; font: var(--fs-small)/1 var(--plot); color: var(--ink); text-align: right; }
.bars .ya span { position: absolute; right: 0; transform: translateY(-50%); }
.bars .ya span:nth-child(1) { top: 0; } .bars .ya span:nth-child(2) { top: 50%; } .bars .ya span:nth-child(3) { top: 100%; }
.plot { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); column-gap: 2px; align-items: end; height: var(--h);
  padding: 0 2px; border: var(--plot-axis-w) solid var(--plot-axis); --t: linear-gradient(var(--plot-axis), var(--plot-axis));
  /* the axis box: inward ticks on both sides at 0, 50 and 100 %, top and bottom at the middle; one dotted rule at the half */
  background: var(--t) 0 0 / var(--plot-tick) var(--plot-axis-w) no-repeat, var(--t) 0 50% / var(--plot-tick) var(--plot-axis-w) no-repeat,
    var(--t) 100% 0 / var(--plot-tick) var(--plot-axis-w) no-repeat, var(--t) 100% 50% / var(--plot-tick) var(--plot-axis-w) no-repeat,
    var(--t) 50% 100% / var(--plot-axis-w) var(--plot-tick) no-repeat, var(--t) 50% 0 / var(--plot-axis-w) var(--plot-tick) no-repeat,
    linear-gradient(90deg, var(--plot-grid) 50%, transparent 0) 0 50% / 4px .6px repeat-x; }
.col { height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.col:hover { background: var(--shade); }
.col:nth-child(-n+3)[data-tip]:hover::after { left: 0; transform: none; }
.col:nth-last-child(-n+3)[data-tip]:hover::after { left: auto; right: 0; transform: none; }
.cb { width: 100%; max-width: 22px; display: flex; flex-direction: column; gap: 0; transform-origin: bottom; }
.cb i { display: block; min-height: 1px; background: color-mix(in srgb, var(--k, var(--s1)) var(--plot-fill), var(--sheet)); box-shadow: inset 0 0 0 .6px var(--k, var(--s1)); }
.cb i.g { background: color-mix(in srgb, var(--s2) 55%, var(--sheet)); box-shadow: inset 0 0 0 .6px var(--s2); }
.xa { grid-column: 2; display: flex; justify-content: space-between; padding-top: 6px; font: var(--fs-small) var(--plot); color: var(--ink); }
.bars.mini { display: block; }
.bars.mini .plot { background: none; border-width: 0 0 var(--plot-axis-w); column-gap: 1px; }

.hb { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.hb li { display: grid; grid-template-columns: minmax(100px, 160px) minmax(0, 1fr) minmax(70px, auto); gap: 12px; align-items: center; padding: 5px 0; max-width: none; }
.hk { font-size: var(--fs-ui); line-height: 1.3; overflow-wrap: anywhere; }
.hk a { color: var(--ink); }
.ht { height: 10px; border-left: var(--plot-axis-w) solid var(--plot-axis); } /* an axis rule, no grey track */
.ht i { display: block; height: 100%; background: var(--c, var(--k, var(--s1))); transform-origin: left; }
.hv { font: var(--fs-small) var(--plot); text-align: right; white-space: nowrap; }
.hb .q .ht i { background: var(--acc); }


.scroll { overflow-x: auto; }
.heat { border-collapse: separate; border-spacing: 2px; width: 100%; font: var(--fs-small) var(--plot); font-variant-numeric: tabular-nums; }
.heat th { font-weight: 400; text-align: left; }
.heat thead th { padding: 0 2px 6px; vertical-align: bottom; font: 600 var(--fs-small)/1.25 var(--plot); }
.heat thead a { color: var(--ink); }
.heat tbody th { padding-right: 10px; font: var(--fs-ui) var(--sans); white-space: nowrap; }
.heat tbody th a { color: var(--ink); }
.heat td { height: 38px; min-width: 54px; text-align: center; color: var(--ink); background: color-mix(in oklab, var(--heat) var(--h), var(--paper2)); }
.heat td.dk { color: var(--on-heat); }

.smn { font-size: var(--fs-small); color: var(--mut); }
.smn b { font: 400 var(--fs-h1)/1 var(--sans); color: var(--ink); margin-right: 4px; }



/* ---------- sources ---------- */
.src { list-style: none; margin: 0; padding: 0; }
.src > li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 320px); gap: 16px 40px; padding: 26px 0; border-top: 1px solid var(--line); max-width: none; }
.src > li:last-child { border-bottom: 1px solid var(--line); }
.src > li { overflow-x: clip; }  /* the stamp lands scaled 1.7x: on phones it poked past the screen for half a second */
.eh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.eh h2 { margin: 0; font-size: var(--fs-h2); }
.eh .n { font: var(--fs-label) var(--pix); color: var(--faint); }
.ecn { font: var(--fs-label) var(--pix); text-transform: uppercase; color: var(--mut); }
.stamp { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 3px 8px; border: 1.5px solid currentColor; border-radius: 2px;
  font: var(--fs-label) var(--pix); text-transform: uppercase; transform: rotate(-2deg); }
.st-ok { color: var(--ok); background: var(--ok-bg); } .st-flaky, .st-stale { color: var(--warn); background: var(--warn-bg); }
.st-down { color: var(--bad); background: var(--bad-bg); } .st-off { color: var(--mut); background: var(--paper2); } .st-running { color: var(--acc); background: var(--acc-t); }
.enote { margin: 8px 0 0; font-style: italic; color: var(--mut); }
.ef { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); margin-top: 14px; border-top: 1px solid var(--line); }
.ef div { display: flex; flex-direction: column; gap: 2px; padding: 9px 14px 9px 0; border-bottom: 1px solid var(--grid); }
.ef dt { font: var(--fs-label) var(--pix); text-transform: uppercase; color: var(--faint); }
.ef dd { font-size: var(--fs-ui); line-height: 1.45; overflow-wrap: anywhere; }
.bad { color: var(--bad); }
.sub2 { display: block; font-size: var(--fs-small); }
.eq { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.eq .fh { margin: 4px 0 2px; color: var(--faint); }
.eq .hb li { grid-template-columns: 124px minmax(0, 1fr) 44px; padding: 2px 0; }
.eq .hk { font-size: var(--fs-ui); }
.eq .ht { height: 9px; }
.eq .none { font-size: var(--fs-ui); font-style: italic; color: var(--faint); }

h3.fh { margin-top: 30px; }

/* ---------- motion (skipped for people who ask for less) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .tc, .ct { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease; }
  .tc:hover, .ct:hover { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 color-mix(in srgb, var(--c, var(--k, var(--ink))) 35%, transparent); }
  button, .btn { transition: transform .08s ease, box-shadow .08s ease, background-color .15s ease; }
  button:not(.sq button):hover, .btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--drop); }
  .faq details[open] > p { animation: fade .25s ease; }
  /* charts draw themselves: columns grow from the baseline, bars from the left, stamps get stamped */
  .cb, .mk-bars .bar { animation: grow-y .5s cubic-bezier(.2, .7, .2, 1) both; }
  .ht i, .tlbar i { animation: grow-x .6s cubic-bezier(.2, .7, .2, 1) both; }
  .stamp { animation: stamp .45s cubic-bezier(.2, 1.8, .4, 1) .2s both; }
  .heat td { animation: fade .5s ease both; }
}
@keyframes fade { from { opacity: 0; } }
@keyframes grow-x { from { transform: scaleX(0); } }
@keyframes grow-y { from { transform: scaleY(0); } }
@keyframes stamp { from { opacity: 0; transform: scale(1.7) rotate(-10deg); } }

/* ---------- narrow screens ---------- */
@media (max-width: 900px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpis > div:nth-child(4) { border-left: 0; }
  .kpis > div:nth-child(n+4) { border-top: 1px solid var(--line); }
  .pp, .src > li { grid-template-columns: minmax(0, 1fr); }
  .buy { position: static; }
  .ft .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .srch { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .facets { display: none; }
  .fm { display: block; margin-bottom: 12px; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); }
  .fm summary { cursor: pointer; padding: 10px 14px; font-weight: 600; list-style: none; }
  .fm summary::-webkit-details-marker { display: none; }
  .fm .facets { display: block; position: static; max-height: none; padding: 0 14px 6px; }
  .g2, .ag, .band { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .wrap { padding-inline: 12px; } /* the family's phone gutter */
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis dd { font-size: var(--fs-h2); }
  .kpis > div, .kpis > div:nth-child(4) { border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
  .kpis > div:nth-child(odd) { border-left: 0; }
  .kpis > div:nth-child(-n+2) { border-top: 0; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .hb li { grid-template-columns: minmax(80px, 110px) minmax(0, 1fr) auto; gap: 8px; }
  .stamp { margin-left: 0; }
  .ft .wrap { grid-template-columns: minmax(0, 1fr); }
}
main > h1 { margin-bottom: 8px; font: 400 var(--fs-h1)/1.12 var(--serif-t); letter-spacing: -.02em; color: var(--title); text-wrap: balance; }
main > .lead { max-width: 70ch; margin-bottom: 8px; font-size: var(--fs-body); color: var(--mut); }
main > .mail { margin-top: 26px; }
.done h2 { margin-top: 0; }

/* ---------- browse line on Explore, reserved ad slots, the phone deadline bar ---------- */
.browse { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; overflow-x: auto; white-space: nowrap; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent); mask-image: linear-gradient(to right, black calc(100% - 28px), transparent); }
.browse::-webkit-scrollbar { display: none; }
.browse b { flex: none; font: var(--fs-label) var(--pix); text-transform: uppercase; color: var(--faint); }
.browse a { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; background: var(--sheet);
  border: 1px solid var(--line); border-radius: 999px; font-size: var(--fs-ui); color: var(--ink); }
.browse a:hover { border-color: var(--ink); text-decoration: none; }
.browse a:last-child { margin-right: 28px; }  /* clears the fade */
.browse .kk { margin: 0; }
.browse .n { font: var(--fs-label) var(--pix); color: var(--faint); }
@media (max-width: 640px) {  /* Explore on phones: the first result within ~300 px (coordinator, A-19) */
  .browse a { min-height: 44px; }
  .browse { margin-bottom: 10px; }
  main.app > .bar { display: none; } /* Explore: the logo is the way home; the first result stays within ~300 px */
  main.app .ph { margin-bottom: 12px; }
  .rbar .alert { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin-left: auto; }
  .rbar .alert .t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.adslot { min-height: 280px; margin: 24px 0; background: var(--paper2); border: 1px dashed var(--line); border-radius: var(--r); }
.adrow { grid-column: 1 / -1; }
.mbar { display: none; }
@media (max-width: 1100px) {  /* one column from here: key facts first, details after */
  .pp > .buy, .pp > article { grid-column: 1; grid-row: auto; }
}
@media (max-width: 900px) {
  .mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 10px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--sheet); border-top: 1px solid var(--ink);
    box-shadow: 0 -6px 18px var(--shade); font-size: var(--fs-small); color: var(--mut); }
  .mbar .btn { margin-left: auto; }
  .mbar span { white-space: nowrap; } /* the date and the badge: one line each */
  body:has(.mbar) { padding-bottom: 64px; }
}

@media (max-width: 640px) {  /* dashboards on phones: two small panels / two facts per row instead of one tall column */
  .ef { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Explore on desktop: header, title and filters stay put; the results scroll in their own column (the footer only comes
   into view after the last result). Phones keep one normal page scroll: nested scroll areas feel broken on touch. */
@media (min-width: 901px) {
  main.app { display: flex; flex-direction: column; height: calc(100dvh - 65px); min-height: 520px; padding-top: 20px; padding-bottom: 0; }
  main.app .ph { margin-bottom: 14px; }
  main.app .srch { flex: 1; min-height: 0; align-items: stretch; }
  main.app .srch > aside, main.app .srch > section { min-height: 0; overflow: hidden auto; scrollbar-width: thin; padding-bottom: 24px; }
  main.app .srch > section { padding-right: 6px; }  /* room for the row hover nudge */
  main.app .facets { position: static; max-height: none; overflow: visible; padding-right: 8px; }
  main.app .rbar { position: sticky; top: 0; z-index: 2; margin: 0; padding: 2px 0 12px; background: var(--desk); }
}

/* ---------- markets (Mercados): the BI page at the trends paths (web/markets.py, templates/markets.html) ---------- */
/* one sequential ramp for maps and the deadline strips (petrol, --acc-t to --acc); greys: nothing open / not covered */
.mk .q0 { --q: var(--mk-q0); } .mk .q1 { --q: var(--mk-q1); } .mk .q2 { --q: var(--mk-q2); } .mk .q3 { --q: var(--mk-q3); }
.mk .q4 { --q: var(--mk-q4); } .mk .q- { --q: var(--mk-none); } .mk .mk-oth { --q: var(--mk-oth); } .mk .s-none { --c: var(--faint); }
.mk-sum { max-width: 75ch; margin: 10px 0 0; }
.mk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 22px; padding: 10px 0; background: var(--desk); border-bottom: 1px solid var(--line); }
@media (min-width: 901px) { .mk-bar { position: sticky; top: 65px; z-index: 10; } }  /* under the frozen header; phones: it scrolls away */
.mk-fl { font: var(--fs-label) var(--pix); text-transform: uppercase; color: var(--faint); }
.mk-seg { display: flex; flex-wrap: wrap; gap: 4px; }
.mk .mk-seg button[aria-pressed], .mk .mk-chip { min-height: 40px; padding: 0 12px; gap: 6px; background: var(--sheet); border: 1px solid var(--line);
  box-shadow: none; transform: none; font: 500 var(--fs-ui) var(--sans); color: var(--ink); }
.mk .mk-seg button[aria-pressed]:hover { border-color: var(--ink); background: var(--sheet); transform: none; box-shadow: none; }
.mk .mk-seg button[aria-pressed=true], .mk .mk-seg button[aria-pressed=true]:hover { background: var(--ink); border-color: var(--ink); color: var(--sheet); }
.mk .mk-chip { background: var(--amber-t); border-color: var(--amber-d); }
.mk .mk-chip:hover { background: var(--amber-t); border-color: var(--ink); transform: none; box-shadow: none; }
.mk-seg .kk { margin: 0; }
.mk-bar select { min-height: 40px; padding: 6px 10px; font-size: var(--fs-ui); }
.mk .kpis { margin-top: 16px; }
.mk .dl { font: var(--fs-label) var(--pix); white-space: nowrap; } .mk .dl.up { color: var(--ok); } .mk .dl.dn { color: var(--bad); }
.mk-card { min-width: 0; margin: 16px 0; padding: 18px 20px 20px; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 3px 3px 0 var(--drop); }
.mk-card > h2 { font-size: var(--fs-h3); }
.mk-sub { max-width: 85ch; margin: 4px 0 14px; font-size: var(--fs-ui); color: var(--mut); }
.mk-g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; align-items: start; }
.mk-g2 .mk-g2 { gap: 26px 28px; }
.mk .lg { margin: 12px 0 0; gap: 6px 14px; }
.mk .lg > span { display: inline-flex; align-items: center; gap: 6px; }
.mk-sw { display: inline-block; width: 12px; height: 12px; border-radius: 2px; background: var(--q, currentColor); }
.mk-oth .mk-sw, .q- .mk-sw { box-shadow: inset 0 0 0 1px var(--line); }
.mk-empty { margin: 0; font-size: var(--fs-ui); color: var(--mut); }
.mk-faint { font: var(--fs-small) var(--sans); color: var(--faint); }
.mk svg { display: block; }
.mk-ax text, text.mk-ax { font: var(--fs-small) var(--plot); fill: var(--ink); }
.mk-ax line, .mk-ax .fr { fill: none; stroke: var(--plot-axis); stroke-width: var(--plot-axis-w); }
.mk-ax .half { stroke: var(--plot-grid); stroke-dasharray: 2 3; }
.mk-ax .ttl { fill: var(--mut); } .mk-ax .sup { font-size: var(--fs-label); } /* axis titles quieter than the numbers; the ·10ⁿ exponent */
/* the contract sizes' bins: a light fill of the brand's accent with a hairline (markets.js sizes()) */
.mk-bars .bar { fill: color-mix(in srgb, var(--p1) var(--plot-fill), var(--sheet)); stroke: var(--p1); stroke-width: .6; transform-box: fill-box; transform-origin: 50% 100%; }
.mk-bars .nn { font: var(--fs-small) var(--plot); fill: var(--ink); text-anchor: middle; pointer-events: none; }
.mk-tip { position: fixed; z-index: 50; max-width: 280px; padding: 7px 9px; background: var(--ink); color: var(--sheet); border-radius: var(--r);
  font: var(--fs-small)/1.4 var(--sans); pointer-events: none; box-shadow: 3px 3px 0 var(--drop); }
/* countries side by side */
.mk-cmp { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); }
.mk-cmp thead th { padding: 6px 8px; font: var(--fs-label) var(--pix); font-weight: 400; text-transform: uppercase; color: var(--faint); text-align: left;
  white-space: nowrap; border-bottom: 1px solid var(--ink); }
.mk-cmp tbody th { padding: 8px; text-align: left; font-weight: 500; color: var(--ink); white-space: nowrap; border-bottom: 1px solid var(--grid); }
.mk-cmp td { padding: 8px; white-space: nowrap; font: var(--fs-small) var(--plot); font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--grid); }
.mk-cmp tbody tr { cursor: pointer; }
.mk-cmp tbody tr:hover > * { background: var(--paper2); } .mk-cmp tr.sel > * { background: var(--amber-t); }
.mk-v { display: inline-block; min-width: 6ch; text-align: right; } .mk-cmp .m .mk-v { min-width: 10ch; }
.mk-b { display: inline-block; height: 8px; margin-left: 6px; vertical-align: middle; background: var(--k); border-radius: 0 2px 2px 0; }
.mk-spark polyline { fill: none; stroke: var(--k); stroke-width: 1.5; }
.mk-heat td { cursor: pointer; } .mk-heat td[aria-current] { outline: 2px solid var(--ink); outline-offset: -2px; }
.mk-heat tbody th small { font: var(--fs-label) var(--sans); color: var(--faint); }
.mk-heat tbody th .kk { vertical-align: 1px; }
/* concepts treemap: coloured by sector (.s-*) */
.mk-tree rect { fill: var(--c); } .mk-tree g:hover rect { opacity: .85; }
.mk-tree text { fill: var(--on-fill); font: 600 var(--fs-small) var(--sans); pointer-events: none; } .mk-tree .mk-tv { font: var(--fs-label) var(--plot); font-variant-numeric: tabular-nums; opacity: .92; }
/* maps */
.mk-maps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 24px; align-items: start; }
.mk-maps.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk-map svg { max-height: 540px; margin: 0 auto; }
.mk-map path { fill: var(--q, var(--mk-none)); stroke: var(--sheet); stroke-width: .7; }
.mk-map path[data-k] { cursor: pointer; }
.mk-map path[data-k]:hover, .mk-map path[data-k]:focus-visible { stroke: var(--ink); stroke-width: 1.6; outline: none; }
.mk-map path.on { stroke: var(--ink); stroke-width: 2.2; }
.mk-inset { fill: var(--sheet); stroke: var(--line); } .mk-map .mk-ins path { stroke: var(--faint); stroke-width: .4; }  /* tiny islands stay visible */
.mk-noreg { position: relative; } .mk-noreg p { position: absolute; inset: 42% 0 auto; text-align: center; font: var(--fs-label) var(--pix); text-transform: uppercase; color: var(--mut); }
/* deadline strips */
.mk-cal rect { fill: var(--q); } .mk-rl { font: var(--fs-small) var(--sans); fill: var(--ink); }
/* buyers and largest */
.mk-buy, .mk-big { list-style: none; margin: 0; padding: 0; }
.mk-buy li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 7px 0 8px; border-bottom: 1px solid var(--grid); font-size: var(--fs-ui); line-height: 1.35; }
.mk-buy a { color: var(--ink); overflow-wrap: anywhere; } .mk-buy .kk { vertical-align: 1px; }
.mk-bv { font: var(--fs-small) var(--plot); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.mk-buy i { grid-column: 1 / -1; display: block; height: 5px; margin-top: 5px; background: var(--k); border-radius: 0 2px 2px 0; }
.mk-big li { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; grid-template-areas: "v t b" "v m m"; gap: 3px 12px; align-items: start;
  padding: 10px 0; border-bottom: 1px solid var(--grid); font-size: var(--fs-ui); }
.mk-lv { grid-area: v; font: 600 var(--fs-ui) var(--plot); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk-big a { grid-area: t; font-weight: 600; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mk-big li.mk-empty { display: block; } .mk-big .badge { grid-area: b; } .mk-lm { grid-area: m; font-size: var(--fs-small); color: var(--mut); overflow-wrap: anywhere; } .mk-lm .kk { vertical-align: 1px; }
/* history: one line per year, the latest in amber */
/* the years: the latest in the brand's accent; told apart by colour, dash and marker (filled or open), as in print */
.mk-yr polyline { fill: none; stroke: currentColor; stroke-width: 1.2; } .mk-yr.y0 polyline { stroke-width: 1.6; }
.mk-yr.y2 polyline { stroke-dasharray: 5 3; } .mk-yr.y3 polyline { stroke-dasharray: 1.5 2.5; }
.mk-yr :is(circle, rect, path) { fill: currentColor; stroke: currentColor; stroke-width: 1; }
.mk-yr.y1 :is(circle, rect, path), .mk-yr.y3 :is(circle, rect, path) { fill: var(--sheet); }
#hist-lg { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; padding: 4px 8px; border: .6px solid var(--plot-axis); font: var(--fs-small) var(--plot); color: var(--ink); }
#hist-lg .mk-sw { width: 16px; height: 2px; border-radius: 0; }
/* years: every colour 4.5:1 or more on white (site QA 2026-09-27) */
.mk .y0 { color: var(--p1); } .mk .y1 { color: var(--p2); } .mk .y2 { color: var(--p3); } .mk .y3 { color: var(--p6); }
.hb.mk-bad .ht i { background: var(--bad); } .hb.mk-acc .ht i { background: var(--acc); }
@media (max-width: 900px) { .mk-g2, .mk-maps, .mk-maps.n2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .mk-card { padding: 14px 14px 16px; }
  .mk-hs { display: none; }
  .mk-big li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "v b" "t t" "m m"; }
}

/* ---------- the header up to 900 px (desktop layouts start at 901: main.app, .mk-bar): logo, languages and Menu in one row
   that scrolls off, then the search (the only row that stays frozen). The links open from the side (static/site.js;
   <html class="prefs"> means scripts run); without scripts they keep a row of their own. ---------- */
@media (max-width: 900px) {
  .hd { top: -88px; }  /* rows 1 and 2 (48 + 40 px) scroll off */
  .hd .wrap { display: grid; grid-template: "brand langs" 48px "nav nav" 40px "sq sq" auto / auto 1fr; gap: 0; height: auto; }
  .hd .brand { grid-area: brand; } .hd .langs { grid-area: langs; justify-self: end; border: 0; }
  .hd .nav { grid-area: nav; margin: 0 -10px; overflow-x: auto; scrollbar-width: none; }
  .hd .nav::-webkit-scrollbar { display: none; }
  .hd .sq { grid-area: sq; max-width: none; margin-bottom: 8px; }
  .prefs .hd { top: -48px; }  /* the one row of logo, languages and Menu scrolls off */
  .prefs .hd .wrap { grid-template: "brand langs menu" 48px "sq sq sq" auto / auto 1fr auto; }
  .hd { --hd-row: 48px; } /* its first row (the brand, the languages, the Menu button); the search row under it */
  .prefs .mbtn { grid-area: menu; margin-left: 8px; } /* the engine's button, in the header's grid */
  .prefs .hd .nav { justify-content: flex-start; } /* the side menu itself is the engine's (base.css, js/prefs.js) */
  .hqw { top: 0; }  /* the landing (no search row in the header): the frozen search takes the top */
  .cbar { top: 50px; padding-inline: 16px; }
  .cbar .t { display: none; } .cbar .btn { flex: 1; justify-content: center; } /* no room for both: the action stays */
}
@media (min-width: 901px) and (max-width: 1100px) {  /* one row still: tighter links, and the search gives way (Spanish needs 850 px) */
  .hd .wrap { gap: 14px; }
  .hd .sq { min-width: 0; }
  .hd .nav a { padding-inline: 6px; }
}
@media (max-width: 640px) {  /* phones without scripts: the four links spread across their row */
  .hd .nav { justify-content: space-between; margin: 0 -5px; }
  .hd .nav a { padding-inline: 5px; }
}

/* ---------- the methodology page (templates/method.html) ---------- */
.kpis.mk4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 22px 0 8px; }
@media (max-width: 900px) {  /* four tiles: two rows of two, not three and one */
  .kpis.mk4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis.mk4 > div { border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
  .kpis.mk4 > div:nth-child(odd) { border-left: 0; }
  .kpis.mk4 > div:nth-child(-n+2) { border-top: 0; }
}
.method .flow { list-style: none; padding: 0; margin: 14px 0 22px; counter-reset: flow; }
.method .flow li { position: relative; padding: 0 0 14px 46px; counter-increment: flow; }
.method .flow li::before { content: counter(flow, decimal-leading-zero); position: absolute; left: 0; top: 3px; padding: 2px 6px;
  border: 1px solid var(--ink); border-radius: 2px; background: var(--amber-t); font: var(--fs-small)/1.4 var(--pix); color: var(--ink); }
.method .flow li:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 30px; bottom: 2px; border-left: 1px dashed var(--faint); }
.method .flow b { color: var(--ink); }
.method .mt { margin: 18px 0; }
.method .mt summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.method caption { padding-bottom: 6px; text-align: left; font: var(--fs-label)/1.5 var(--pix); text-transform: uppercase; color: var(--faint); }
/* inline SVG bars (templates/_method.html): a 360-wide viewBox, capped so the text stays 10-17px */
.mc { display: block; width: 100%; max-width: 460px; height: auto; }
.mc .ml { font: 600 var(--fs-ui) var(--sans); fill: var(--ink); }
.mc .mv { font: var(--fs-small) var(--plot); font-variant-numeric: tabular-nums; fill: var(--mut); }
.mc .tr { fill: var(--line); }
.mc .r { fill: var(--s1); } .mc .c { fill: var(--s2); }
.mc g:hover .tr { fill: var(--line); }
@media (max-width: 640px) { .method .plotbox { padding: 12px 12px 8px; } }