/* Macro Lab: the one shared stylesheet (redesign of 2026-10, from Kasun's homepage mockup; step 15).
   Newsreader for headings and big numbers, Source Sans 3 to read, Schibsted Grotesk for the
   wordmark, all three served from /assets/; the system's monospace for codes. White paper, navy ink, a deep navy header and footer, one blue for data, links and
   hovers, red for one call to action per page (and errors), gold for the hero's search button.
   Light unless a viewer picks dark with the header's switch (the device's setting is not
   followed); every page and chart reads its colours from these tokens. */
/* the fonts, from /assets/ (site/fonts/subset.py cuts them to Latin and the weights used; the build
   adds ?v= to their urls) */
@font-face{font-family:"Newsreader";src:url(newsreader.woff2?v=df65476c6c) format("woff2");font-weight:500 700;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(source-sans-3.woff2?v=df65476c6c) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url(schibsted-wordmark.woff2?v=df65476c6c) format("woff2");font-weight:400 800;font-style:normal;font-display:block}
:root{
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F0F4FA; --surface-3:#F6F8FB; --tint:#DCE6F1;
  --line:#DCE4EE; --line-soft:#E8EDF3; --line-strong:#9FB3CB;
  --ink:#1E3A5F; --ink-2:#3D5677; --muted:#4A6588; --faint:#526A88;
  --navy:#0B2545; --navy-2:#173C66; --on-navy:#FFFFFF; --on-navy-2:#C3D2E3; --on-navy-3:#AFC2D8; --nav-mark:#3360A9;
  --brand:#3360A9; --brand-ink:#FFFFFF; --brand-soft:#E3EBF6;
  --accent:#C8321F; --gold:#F2B830; --gold-ink:#0B2545; --logo-arc:#C93A2B;
  --c1:#3360A9; --c1-soft:#C3D3E8; --c2:#0F8B8D; --c3:#D9822B; --c3-ink:#A65F14; --c4:#6A8F2E;
  --grid:#DCE4EE; --axis:#8FA3BC; --spark:#3360A9; --tip-bg:#1E3A5F; --tip-ink:#FFFFFF;
  --up:#3D5677; --down:#3D5677;
  --pill-a-bg:#1E3A5F; --pill-a-ink:#FFFFFF; --pill-c-bg:#DCE6F1; --pill-c-ink:#1E3A5F; --pill-s-bg:#FBE7D3; --pill-s-ink:#7A3F0B;
  --def:#B0304F; --def-a:.085;
  --sans:"Source Sans 3","Source Sans Pro","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --brandface:"Schibsted Grotesk",var(--sans);
  --mono:ui-monospace,"Cascadia Mono",Consolas,"Liberation Mono",monospace;
}
:root[data-theme="dark"]{
  --bg:#0D1724; --surface:#132033; --surface-2:#101C2C; --surface-3:#172739; --tint:#1C2E47;
  --line:#26384F; --line-soft:#1F3045; --line-strong:#3A5070;
  --ink:#E4ECF5; --ink-2:#C2CFDE; --muted:#9AABC0; --faint:#97A8BD;
  --navy:#081321; --navy-2:#15263A; --on-navy:#FFFFFF; --on-navy-2:#B5C5D8; --on-navy-3:#9DB1C8; --nav-mark:#6E9BDB;
  --brand:#8DB4EA; --brand-ink:#0D1724; --brand-soft:#1C2E47;
  --accent:#F08A78; --gold:#F2B830; --gold-ink:#0B2545; --logo-arc:#E5604F;
  --c1:#8DB4EA; --c1-soft:#2E4566; --c2:#4FC2C3; --c3:#E8A15C; --c3-ink:#E8A15C; --c4:#A9C66E;
  --grid:#26384F; --axis:#5A6F8A; --spark:#8DB4EA; --tip-bg:#E4ECF5; --tip-ink:#0D1724;
  --up:#C2CFDE; --down:#C2CFDE;
  --pill-a-bg:#C2D3EA; --pill-a-ink:#0D1724; --pill-c-bg:#22385A; --pill-c-ink:#D5E2F3; --pill-s-bg:#4A3220; --pill-s-ink:#F5C9A0;
  --def:#E8859B; --def-a:.15;
}
*{box-sizing:border-box}
html{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* on navy (the header, the hero, the footer) the ring is white: blue does not show there; the
   white boxes on the navy (the catalogue panel, the search box, Just updated) keep the blue */
header.top :focus-visible,.hero :focus-visible,footer.site :focus-visible{outline-color:var(--on-navy)}
header.top .panel :focus-visible,header.top .search :focus-visible,.hero .jupd :focus-visible{outline-color:var(--brand)}
/* inside the header's menu links (on a phone the menu scrolls, and its links fill the bar's height), and
   on the gold button */
nav.main .item > a:focus-visible{outline-offset:-3px}
.hsearch button:focus-visible{outline:2px solid var(--gold-ink);outline-offset:-5px}
.wrap{max-width:1280px;margin:0 auto;padding-inline:40px}
@media (max-width:760px){.wrap{padding-inline:20px}}
.num{font-variant-numeric:lining-nums tabular-nums}
[hidden]{display:none !important}   /* hidden wins over any display a class sets */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3,h4{font-family:var(--serif);letter-spacing:-.005em;text-wrap:balance}
h1{font-size:clamp(34px,4.4vw,46px);font-weight:600;line-height:1.06;margin:10px 0 14px}
h2{font-size:28px;font-weight:700;line-height:1.2;margin:0}
.lede{font-size:18px;color:var(--ink-2);max-width:40em;margin:0}
.muted{color:var(--muted)}
.more{font-size:15px;font-weight:600;color:var(--brand);text-decoration:none;white-space:nowrap}
.more:hover,.linkbtn:hover{text-decoration:underline;text-underline-offset:3px}
code{font-family:var(--mono);font-size:12.5px;background:var(--surface-2);padding:1px 6px;border-radius:2px;color:var(--ink-2)}
a code{color:var(--brand)}
/* an outlined "more" link at the right of a section's head: blue, square; .cta makes it the page's
   one red call to action (red is otherwise kept for errors) */
.btn-o{display:inline-block;color:var(--brand);border:1px solid var(--brand);background:var(--surface);padding:10px 22px;font-size:15px;
  text-decoration:none;white-space:nowrap}
.btn-o:hover{background:var(--brand);color:var(--surface)}
.btn-o.cta{color:var(--accent);border-color:var(--accent)}
.btn-o.cta:hover{background:var(--accent);color:var(--surface)}

/* ---- preview strip (the preview build only) ---------------------------------------------- */
.proto{background:#FFF7D6;color:#5A4A00;font-size:13px;text-align:center;padding:5px 16px}
:root[data-theme="dark"] .proto{background:#3A3312;color:#F1E3A0}

/* ---- header: the navy bar and its blue rule; the data catalogue opens a panel of every topic --- */
header.top{background:var(--navy);color:var(--on-navy);position:sticky;top:env(safe-area-inset-top,0px);z-index:20;
  border-bottom:3px solid var(--nav-mark)}
.topbar{position:relative;display:flex;align-items:stretch;gap:12px 40px;min-height:76px}
.logo{display:flex;align-items:center;text-decoration:none;color:var(--on-navy);white-space:nowrap}
/* the wordmark: "macr", a ring with a red arc for the o, "lab" in the light weight */
.wm{display:flex;align-items:baseline;font-family:var(--brandface);font-size:30px;font-weight:800;letter-spacing:-.04em;line-height:1}
/* the ring as the font's o: 22 of the svg's 24 is .554em across, its left edge where the o's is
   after the r, its foot .013em under the baseline (templates/wordmark.html) */
.wm svg{width:.604em;height:.604em;margin:0 .08em 0 -.02em;transform:translateY(.038em)}
.wm .wm-arc{stroke:var(--logo-arc)}
.wm-l{font-weight:400;margin-left:.133em}
nav.main{display:flex;align-items:stretch;gap:0 28px;flex:1 1 auto}
.item{display:flex}
.item > a{display:flex;align-items:center;font-size:16px;text-decoration:none;color:var(--on-navy);white-space:nowrap;
  border-bottom:3px solid transparent;border-top:3px solid transparent;margin-bottom:-3px}
.item:hover > a,.item:focus-within > a,.item > a.on{border-bottom-color:var(--gold)}
/* a menu item that opens a panel carries a chevron, turned up while the panel is open */
.item:has(.panel) > a::after{content:"";width:6px;height:6px;margin:-4px 0 0 10px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg);transition:transform .15s,margin .15s}
.item:has(.panel):hover > a::after,.item:has(.panel):focus-within > a::after{transform:rotate(-135deg);margin-top:3px}
.panel{display:none;position:absolute;left:0;right:0;top:100%;margin-top:3px;background:var(--surface);color:var(--ink);
  border-bottom:1px solid var(--line);box-shadow:0 18px 30px -18px rgba(11,37,69,.35)}
.item:hover .panel,.item:focus-within .panel{display:block}
.panel .cat{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 32px;padding-block:24px 26px}
.panel h3{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  margin:0;padding:12px 0 6px;border-top:2px solid var(--ink)}
.panel ul{list-style:none;margin:0;padding:0}
.panel li a{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--line-soft);text-decoration:none}
.panel li a:hover .n{color:var(--brand)}
.panel .n{font-family:var(--serif);font-size:16px;font-weight:600}
.panel .c{font-size:14px;font-weight:600;color:var(--muted)}
.panel .all{grid-column:1/-1;margin:16px 0 0;font-size:14.5px;color:var(--muted)}
.panel .all a{font-weight:600;color:var(--brand);text-decoration:none}
.panel .all a:hover{color:var(--brand)}
.item .short{display:none}
/* the right of the bar: search, the theme switch, Sign in (or Account) */
.tools{display:flex;align-items:center;gap:6px;margin-left:auto;min-width:0}
.s-open,.tgl,a.acct-i{display:grid;place-items:center;width:38px;height:38px;padding:0;background:none;border:0;border-radius:3px;
  color:var(--on-navy);cursor:pointer;flex-shrink:0}
.s-open:hover,.tgl:hover,.top.s-on .s-open{background:var(--navy-2)}
.s-open .i-x,.top.s-on .s-open .i-s{display:none}
.top.s-on .s-open .i-x{display:block}
.tgl{display:none}
.js .tgl{display:grid}
.tgl .sun,:root[data-theme="dark"] .tgl .moon{display:none}
:root[data-theme="dark"] .tgl .sun{display:block}
/* Sign in: a solid white button, the one filled thing in the bar; signed in, Account with its icon */
.tools .acct-o{margin-left:10px;flex-shrink:0;background:#FFFFFF;color:#0B2545;font-size:15px;font-weight:700;padding:10px 22px;
  border:1px solid #FFFFFF;text-decoration:none;white-space:nowrap}
.tools .acct-o:hover,.tools .acct-o.on{background:var(--gold);border-color:var(--gold);color:#0B2545}
.tools .acct-i{display:flex;align-items:center;gap:8px;width:auto;margin-left:10px;padding:0 16px 0 12px;border:1px solid rgba(255,255,255,.7);
  border-radius:0;font-size:15px;font-weight:700;text-decoration:none}
.tools .acct-i svg{width:17px;height:17px}
.tools .acct-i:hover,.tools .acct-i.on,.tools .acct-i[aria-expanded="true"]{background:#FFFFFF;color:#0B2545;border-color:#FFFFFF}
/* Sign in, or Account for a viewer signed in on this browser (.acct-in on <html>, set by the head's script) */
:root:not(.acct-in) .acct-i,.acct-in .acct-o{display:none}
/* the search box opens in the bar itself, left of the icon (which turns into a close cross); without
   scripts the icon goes to the search page */
.search{display:none;position:relative;align-items:center;gap:8px;width:340px;min-width:0;height:42px;padding:0 12px;
  background:var(--surface);color:var(--muted);border-radius:2px}
.top.s-on .search{display:flex}
.search input{border:0;background:transparent;font:inherit;font-size:15.5px;color:var(--ink);width:100%;min-width:0;outline:none}
.search .suggest{top:calc(100% + 10px);right:0;width:min(560px,calc(100vw - 32px))}
@media (max-width:1100px){.topbar{gap:12px 28px}nav.main{gap:0 22px}}
/* not room for the menu and the box side by side: the box takes the menu's place while it is open */
@media (min-width:861px) and (max-width:1240px){
  .top.s-on nav.main{display:none}
  .top.s-on .tools{flex:1 1 auto;margin-left:12px}
  .top.s-on .search{flex:1 1 auto;width:auto;max-width:560px;margin-left:auto}
}
/* tablets and phones: the wordmark and the tools on the first row, the menu on a row of its own
   under them, which scrolls sideways if it must; the header stays in place on phones. The search
   box takes the wordmark's place while it is open */
@media (max-width:860px){
  header.top{position:static}
  .topbar{flex-wrap:wrap;min-height:0;gap:0 8px}
  .logo{min-height:58px}
  .wm{font-size:26px}
  .tools{order:2}
  nav.main{order:3;flex:1 0 100%;min-width:0;overflow-x:auto;scrollbar-width:none;gap:0 22px;border-top:1px solid rgba(255,255,255,.12)}
  nav.main::-webkit-scrollbar{display:none}
  .item > a{min-height:44px;font-size:15.5px}
  .item:has(.panel) > a::after{display:none}
  .panel{display:none !important}
  .top.s-on .logo{display:none}
  .top.s-on .tools{flex:1 1 auto;min-height:58px;margin-left:0}
  .top.s-on .search{flex:1 1 auto;width:auto}
  .top.s-on .tgl{display:none}
  .search .suggest{left:0;right:auto;width:calc(100vw - 40px)}
  .tools .acct-o{padding:7px 14px;margin-left:4px}
  .tools .acct-i{margin-left:4px;padding:0 12px 0 10px;height:36px}
}
@media (max-width:400px){
  .wm{font-size:23px}
  .tools{gap:2px}
  .s-open,.tgl{width:34px}
  .tools .acct-o{padding:6px 10px;font-size:14px}
  .tools .acct-i{padding:0 10px 0 8px;gap:6px;font-size:14px}
  .item .long{display:none}
  .item .short{display:inline}
}
@media (max-width:349px){.tools .acct-i{padding:0;width:36px;justify-content:center}.tools .acct-i span{display:none}}

/* ---- footer ------------------------------------------------------------------------------- */
footer.site{background:var(--navy);color:var(--tint);margin-top:72px;font-size:15px}
:root[data-theme="dark"] footer.site{color:var(--on-navy-2)}
footer.site .wrap{display:flex;flex-direction:column;gap:36px;padding-block:52px 36px}
.f-cols{display:flex;flex-wrap:wrap;gap:36px 72px}
.f-about{flex:2 1 320px;min-width:0;display:flex;flex-direction:column;gap:14px}
.f-about .wm{font-size:28px}
.f-about p{margin:0;line-height:1.6;max-width:420px}
footer.site nav{flex:1 1 160px}
footer.site h2{font-family:var(--sans);margin:0 0 12px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--on-navy)}
footer.site ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
footer.site a{color:inherit;text-decoration:none}
footer.site a:hover{color:var(--on-navy);text-decoration:underline;text-underline-offset:3px}
footer.site .logo{color:var(--on-navy)}
footer.site .logo:hover{text-decoration:none}
.f-note{margin:0;padding-top:20px;border-top:1px solid rgba(255,255,255,.18);font-size:13px;line-height:1.6;color:var(--on-navy-3);max-width:900px}

/* ---- page heads ---------------------------------------------------------------------------- */
.crumbs{font-size:13.5px;color:var(--muted);padding-top:22px;display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{text-decoration:none;color:var(--brand)}
.crumbs a:hover{text-decoration:underline;text-underline-offset:3px}
.page-head{padding-block:4px 26px}
.page-head .lede{font-size:17px;max-width:44em}
.page-head .stats{margin:10px 0 0;font-size:14.5px;color:var(--muted)}
.page-head .stats .num{color:var(--ink-2);font-weight:700}
.ind-head{padding-block:4px 20px}
.section-h,.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin:48px 0 18px;flex-wrap:wrap}
.section-h p,.sec-h p{margin:4px 0 0;color:var(--muted);font-size:15px}

/* ---- homepage (redesign of 2026-10) --------------------------------------------------------- */
/* Popular: a pale blue strip of rounded pills under the header */
.pop{background:var(--tint)}
.pop .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-block:11px}
.pop-l{padding-right:8px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pop a{display:flex;align-items:center;padding:5px 14px;border:1px solid var(--line-strong);border-radius:999px;font-size:14px;font-weight:600;
  text-decoration:none;color:var(--ink)}
.pop a:hover{border-color:var(--brand);color:var(--brand)}
@media (max-width:760px){
  .pop .wrap{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .pop .wrap::-webkit-scrollbar{display:none}
  .pop a{white-space:nowrap}
}
/* the hero: navy, the title, search and facts on the left; Just updated on the right */
.hero{background:var(--navy);color:var(--on-navy)}
.hero-in{display:flex;flex-wrap:wrap;align-items:center;gap:40px 72px;padding-block:60px 64px}
.hero-l{flex:7 1 520px;min-width:0;display:flex;flex-direction:column;gap:20px}
.hero h1{margin:0;font-size:clamp(38px,4.6vw,54px);font-weight:600;line-height:1.06;letter-spacing:-.015em;color:var(--on-navy)}
.hero-lede{margin:0;font-size:19px;line-height:1.55;color:var(--on-navy-2);max-width:580px;text-wrap:pretty}
.hsearch{display:flex;max-width:620px;margin-top:6px;background:#FFFFFF}
.hsearch input{flex:1 1 auto;min-width:0;border:0;padding:0 18px;height:56px;font:inherit;font-size:17px;color:#1E3A5F;background:transparent;outline:none}
.hsearch input::placeholder{color:#5E7591}
.hsearch:focus-within{outline:2px solid var(--gold);outline-offset:2px}
.hsearch button{height:56px;padding:0 24px;border:0;background:var(--gold);color:var(--gold-ink);font:inherit;font-size:16px;font-weight:700;
  display:flex;align-items:center;gap:10px;cursor:pointer}
.hsearch button:hover{background:#FFC845}
.hero-facts{margin:8px 0 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);max-width:620px;display:flex;flex-wrap:wrap;gap:6px 22px;
  font-size:14px;color:var(--on-navy-3)}
.hero-r{flex:4 1 340px;min-width:0;display:flex;flex-direction:column;gap:12px}
.jupd{background:var(--surface);color:var(--ink);padding:18px 22px 16px}
.jupd h2{margin:0 0 6px;display:flex;align-items:center;gap:8px;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.jupd ul{list-style:none;margin:0;padding:0}
.jupd li + li a{border-top:1px solid var(--line-soft)}
.jupd a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:2px 12px;padding:10px 0;text-decoration:none;color:var(--ink)}
.jupd .l{font-weight:700}
.jupd a:hover .l{color:var(--brand)}
.jupd .v{font-family:var(--serif);font-size:22px;font-weight:600}
.jupd .w,.jupd .c{font-size:14px;color:var(--muted)}
.jupd .c{text-align:right;white-space:nowrap}
.jupd .asof{margin:4px 0 0;padding-top:10px;border-top:1px solid var(--line-soft);font-size:13px;color:var(--faint)}
@media (max-width:760px){.hero-in{padding-block:40px 44px;gap:32px}.hero-lede{font-size:17px}.hsearch button{padding:0 16px}}
/* a section on the pale blue band, and a section's head: serif title and line, the "more" link at the right */
.band{background:var(--surface-2)}
.band > .wrap{padding-block:44px 52px}
.sec-hd{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 24px;margin-bottom:22px}
.sec-hd h2{font-size:30px;font-weight:700;line-height:1.2}
.sec-hd p{margin:2px 0 0;color:var(--muted)}
/* Latest readings: six cards, each a figure, its change and period, and a sparkline (or a line under it) */
.rcards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
@media (max-width:1100px){.rcards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.rcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:400px){.rcards{gap:10px}.rcard{padding:14px 14px 12px}.rcard .v{font-size:30px}}
.rcard{display:flex;flex-direction:column;gap:4px;height:100%;background:var(--surface);border:1px solid var(--line);padding:16px 18px 14px;
  text-decoration:none;color:var(--ink)}
.rcard:hover{border-color:var(--line-strong)}
.rcard:hover .l{color:var(--brand)}
.rcard .l{font-size:15px;font-weight:700}
.rcard .v{font-family:var(--serif);font-size:34px;font-weight:600;line-height:1.1;margin-top:6px}
.rcard .c{font-size:14px;color:var(--muted)}
/* a figure's currency and scale, set small beside it: US$ 6.85 bn */
.rcard .v small,.jupd .v small{font-size:.58em;font-weight:600;color:var(--ink-2);margin-left:3px}
.rcard .f{margin-top:auto;padding-top:10px;font-size:14px;color:var(--faint);border-top:1px solid var(--line-soft)}
.rcard .sp{display:block;width:100%;height:36px;margin-top:auto;padding-top:8px;overflow:visible}
.rcard .sp path{fill:none;stroke:var(--spark);stroke-width:1.8;stroke-linejoin:round}
/* Featured: the lead article across two columns and two cards beside it, each with its chart; the
   cards as tall as the row */
.feat{padding-block:48px 56px}
.feat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.feat-grid > .lead{grid-column:span 2}
.fcard{border:1px solid var(--line);background:var(--surface);min-width:0}
.fcard > a{display:flex;flex-direction:column;height:100%;color:var(--ink);text-decoration:none}
.fcard:hover{border-color:var(--line-strong)}
.fcard:hover .t{color:var(--brand)}
.hfig{margin:0;background:var(--surface-3);border-bottom:1px solid var(--line);padding:18px 20px 12px}
.hfig.sm{padding:14px 16px 10px}
.hfig figcaption{display:flex;flex-direction:column;gap:2px}
.hfig .ft{font-family:var(--serif);font-size:18px;font-weight:600;line-height:1.25}
.hfig .fs{font-size:14px;color:var(--muted)}
.hfig .svgc-box{margin-top:8px}
.hfig .src{margin:2px 0 0;font-size:13px;color:var(--faint)}
.fcard .body,.ccard .body{display:flex;flex-direction:column;gap:6px;padding:14px 16px 18px}
.fcard.lead .body{gap:8px;padding:18px 20px 22px}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.pill{padding:2px 10px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.04em;background:var(--pill-c-bg);color:var(--pill-c-ink)}
.pill.analysis{background:var(--pill-a-bg);color:var(--pill-a-ink)}
.pill.snapshot{background:var(--pill-s-bg);color:var(--pill-s-ink)}
.fcard .t,.ccard .t{font-family:var(--serif);font-size:21px;line-height:1.22;font-weight:700}
.fcard.lead .t{font-size:28px;line-height:1.18;text-wrap:balance}
.fcard .x,.ccard .x{font-size:15px;line-height:1.55;color:var(--ink-2)}
.fcard.lead .x{font-size:16px;text-wrap:pretty}
@media (max-width:1100px){.feat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.feat-grid{grid-template-columns:minmax(0,1fr)}.feat-grid > .lead{grid-column:auto}.fcard.lead .t{font-size:24px}}
/* Charts: two cards on the band, each a chart in a white frame beside its finding */
.cband{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(520px,100%),1fr));gap:24px}
.ccard{background:var(--tint);padding:18px;display:flex;flex-wrap:wrap;gap:18px 22px}
.ccard .hfig{flex:1 1 260px;min-width:0;background:var(--surface);border:0;padding:14px 14px 10px}
.ccard .hfig figcaption{font-family:var(--serif);font-size:15px;font-weight:600;line-height:1.25}
.ccard .body{flex:1 1 200px;padding:0;gap:8px;color:var(--ink);text-decoration:none}
.ccard .t{font-size:22px;line-height:1.2}
.ccard .body:hover .t{color:var(--brand)}
:root[data-theme="dark"] .ccard{background:var(--surface-3)}
/* Browse by topic: the four groups, each topic in serif with what it holds under it */
.topics{padding-block:56px 68px}
.topics .sec-hd{margin-bottom:30px}
.topics .btn-o{background:none}
.tindex{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:32px 40px}
.tindex h3{margin:0 0 6px;padding-top:12px;border-top:2px solid var(--ink);font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.tindex ul{list-style:none;margin:0;padding:0}
.tindex li{padding:12px 0;border-bottom:1px solid var(--line-soft)}
.tindex li:last-child{border-bottom:0}
.tindex a{display:block;font-family:var(--serif);font-size:19px;font-weight:700;line-height:1.25;color:var(--ink);text-decoration:none}
.tindex a:hover{color:var(--brand)}
.tindex li span{display:block;margin-top:3px;font-size:14px;color:var(--muted)}

/* a byline ("By Kasun Herath"), and Macro Lab's signature under a chart: the wordmark, small */
.by{font-weight:700;font-family:var(--serif);color:var(--ink-2)}
.by .wm{font-size:16px;color:var(--ink)}

/* charts drawn as SVG by the build (svgchart.py), in the style of charts.js; each comes at three
   widths and the box shows the one that fits it */
.svgc-box{container-type:inline-size;margin-top:10px}
.svgc{display:none;width:100%;height:auto;overflow:visible;font-family:var(--sans);font-variant-numeric:tabular-nums}
.svgc.w{display:block}
@container (max-width:480px){.svgc.w{display:none}.svgc.n{display:block}}
@container (min-width:760px){.svgc.w{display:none}.svgc.x{display:block}}
/* a small card's chart (svgchart.CARD_SIZES) steps at its own widths */
.svgc-box.cs .svgc{display:none}
@container (max-width:390px){.svgc-box.cs .svgc.n{display:block}}
@container (min-width:390.02px) and (max-width:560px){.svgc-box.cs .svgc.w{display:block}}
@container (min-width:560.02px){.svgc-box.cs .svgc.x{display:block}}
.svgc .gr{stroke:var(--grid);stroke-width:1;stroke-dasharray:3 3}
.svgc .ax{stroke:var(--axis);stroke-width:1}
.svgc .yl{fill:var(--faint);font-size:13px;dominant-baseline:middle}
.svgc .xl{fill:var(--faint);font-size:12.5px;text-anchor:middle}
.svgc .tg{stroke:var(--ink);stroke-width:1.2;stroke-dasharray:6 4}
.svgc .tl,.svgc .pt{font-size:13px;paint-order:stroke;stroke:var(--surface-3);stroke-width:3px;stroke-linejoin:round}
.svgc .tl{fill:var(--ink);font-weight:600}
.svgc .pt{fill:var(--ink)}
.svgc .pt .b{font-weight:700}
.svgc .ln{fill:none;stroke:var(--c1);stroke-linejoin:round;stroke-linecap:round}
.svgc .dt{fill:var(--c1);stroke:var(--surface-3);stroke-width:2}
.svgc .ln.l1{stroke:var(--c3)}
.svgc .ln.l2{stroke:var(--c2)}
.svgc .dt.l1{fill:var(--c3)}
.svgc .dt.l2{fill:var(--c2)}
.svgc .nm{font-size:13px;font-weight:700;fill:var(--c1);paint-order:stroke;stroke:var(--surface-3);stroke-width:3px;stroke-linejoin:round}
.svgc .nm.l1{fill:var(--c3-ink)}
.svgc .nm.l2{fill:var(--c2)}
.svgc .ev{font-size:13px;font-weight:700;fill:var(--c1);dominant-baseline:middle}
.svgc .ev.l1{fill:var(--c3-ink)}
.svgc .ev.l2{fill:var(--c2)}
.svgc .mk{stroke:var(--ink-2);stroke-width:1;stroke-dasharray:3 3;opacity:.6}
.svgc .ml{font-size:12.5px;fill:var(--ink-2);paint-order:stroke;stroke:var(--surface-3);stroke-width:3px;stroke-linejoin:round}
.svgc .pk{fill:none;stroke:var(--ink);stroke-width:1.2}
.svgc .pl{stroke:var(--ink);stroke-width:.8}
/* bars: svgchart.hbars (an article's lead chart) and svgchart.vbars (the remittances chart) */
.svgc .br{fill:var(--c1)}
.svgc .br.lt{fill:var(--c1-soft)}
.svgc .br.ng{fill:var(--c2)}
.svgc .yn{fill:var(--ink-2);font-size:13.5px;dominant-baseline:middle}
.svgc.n .yn{font-size:12.5px}
.svgc .bg{fill:var(--surface-3)}
.svgc .bv{fill:var(--ink);font-size:13.5px;font-weight:600;dominant-baseline:middle}
/* a chart on a white ground (the Charts band, the headline page) */
.ccard .svgc .tl,.ccard .svgc .pt,.ccard .svgc .nm,.ccard .svgc .ml,.lead-c .svgc .tl,.lead-c .svgc .pt,.lead-c .svgc .nm,.lead-c .svgc .ml{stroke:var(--surface)}
.ccard .svgc .dt,.lead-c .svgc .dt{stroke:var(--surface)}

/* ---- the headline page (/data/headline/): tabs, then the lead chart beside the table --------- */
.tabs{display:flex;gap:28px;border-bottom:1px solid var(--line);margin-bottom:24px;overflow-x:auto;scrollbar-width:none}
.tabs button{font:inherit;font-size:16px;font-weight:600;color:var(--muted);background:none;border:0;padding:0 0 10px;
  border-bottom:3px solid transparent;margin-bottom:-1px;cursor:pointer;white-space:nowrap}
.tabs button[aria-selected="true"],.tabs button.on{color:var(--ink);font-weight:700;border-bottom-color:var(--brand)}
.tabs button:hover{color:var(--ink)}
.tabs button:focus-visible{outline-offset:-2px}     /* the strip scrolls, so it clips a ring outside the tab */
.lr{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:48px;margin-bottom:8px}
.js .lr:not(.on){display:none}
.lead h2{font-size:22px;font-weight:700;padding-bottom:8px;border-bottom:1px solid var(--ink);margin:0}
.lead h2 a{text-decoration:none}
.lead h2 a:hover{color:var(--brand)}
.lead .big{font-family:var(--serif);font-size:52px;font-weight:600;line-height:1;margin:16px 0 4px}
.lead .big small{font-family:var(--sans);font-size:18px;font-weight:400;color:var(--muted);margin-left:4px}
.lead .when{font-size:14px;color:var(--muted)}
.lead .svgc-box{margin-top:14px}
table.rd{width:100%;border-collapse:collapse;font-size:15px;align-self:start}
.rd th{font-size:13px;font-weight:600;color:var(--muted);text-align:right;padding:0 0 8px 16px;border-bottom:1px solid var(--ink);background:none;position:static}
.rd th:first-child{text-align:left;padding-left:0}
.rd td{padding:11px 0 11px 16px;border-bottom:1px solid var(--line-soft);text-align:right;vertical-align:middle;white-space:nowrap}
.rd td:first-child{padding-left:0;text-align:left;white-space:normal}
.rd tbody tr:hover td{background:var(--surface-2)}
.rd td a{text-decoration:none;font-weight:600}
.rd tr:hover td a{color:var(--brand)}
.rd .sp svg{display:block;width:120px;height:28px;margin-left:auto;overflow:visible}
.rd .v{font-weight:700}
.rd .v small{font-weight:400;color:var(--muted);font-size:12.5px;margin-left:3px}
.rd .c,.rd .p{color:var(--muted);font-size:14px}
.ar{font-size:10px;vertical-align:1px;color:var(--ink-2)}
.note{font-size:13.5px;color:var(--muted);margin:14px 0 0}
@media (max-width:900px){.lr{grid-template-columns:minmax(0,1fr);gap:32px}}
@media (max-width:600px){.lead .big{font-size:44px}}
/* phones: each reading a card, the name and its trend, then the value, the change and the period */
@media (max-width:640px){
  .rd thead{display:none}
  .rd,.rd tbody{display:block}
  .rd tr{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;grid-template-areas:"n n n s" "v c . p";gap:4px 12px;
    align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line-soft)}
  .rd td{padding:0;border:0;text-align:left}
  .rd td:first-child{grid-area:n;align-self:center}
  .rd .sp{grid-area:s;align-self:center}
  .rd .sp svg{width:96px;height:26px}
  .rd .v{grid-area:v}
  .rd .c{grid-area:c}
  .rd .p{grid-area:p;text-align:right}
  .rd tbody tr:hover td{background:none}
}

/* ---- shared data components ----------------------------------------------------------------- */
.frame{background:var(--surface);border:1px solid var(--line);border-radius:2px;margin-bottom:28px;min-width:0}
.frame-head{padding:18px 22px 0}
.frame-head h3{font-size:20px;font-weight:700;line-height:1.2;margin:0 0 4px}
.frame-head p{margin:0;color:var(--muted);font-size:14.5px;max-width:80ch}
.frame-foot{border-top:1px solid var(--line-soft);padding:10px 22px 12px;font-size:12.5px;color:var(--muted);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.frame-foot b{color:var(--ink-2);font-weight:600}
.frame-foot a{color:var(--ink-2)}
.frame-foot code{overflow-wrap:anywhere}
.s-tabs,.frame .tabs{display:flex;gap:0;border-bottom:1px solid var(--line);margin:0;padding-inline:10px;overflow-x:auto}
.s-tabs button,.frame .tabs button{font:inherit;font-size:14.5px;font-weight:500;color:var(--muted);background:none;border:0;border-bottom:3px solid transparent;
  padding:10px 12px;margin-bottom:-1px;cursor:pointer;white-space:nowrap}
.s-tabs button.on,.frame .tabs button.on{color:var(--ink);font-weight:700;border-bottom-color:var(--brand)}
.controls{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 22px 0}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:2px;overflow:hidden;flex-wrap:wrap}
.seg button:focus-visible{outline-offset:-3px}      /* inside the button: the group clips what is outside it */
.seg button,.seg a,.seg span{font:inherit;font-size:13.5px;font-weight:500;background:var(--surface);color:var(--ink-2);border:0;border-right:1px solid var(--line);
  padding:5px 11px;cursor:pointer;text-decoration:none;white-space:nowrap;line-height:18px}
.seg > :last-child{border-right:0}
.seg .on{background:var(--ink);color:var(--surface)}
.seg a:not(.on):hover,.seg button:not(.on):not(:disabled):hover{background:var(--surface-2)}
.seg .off,.seg button:disabled{color:var(--faint);background:var(--surface-2);cursor:not-allowed;text-decoration:line-through;text-decoration-color:var(--line)}
.legend{display:flex;gap:6px;flex-wrap:wrap}
.legend button{font:inherit;font-size:13px;display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line);border-radius:2px;padding:4px 10px;cursor:pointer;color:var(--ink)}
.legend button i{width:14px;height:3px;background:currentColor}
.legend button.off{color:var(--faint);opacity:.75}
.legend button.off i{background:var(--faint)}
.chart{position:relative;padding:8px 14px 4px 8px}
.chart svg{display:block;width:100%;overflow:visible}
.ec{width:100%;height:400px}
.ec-failed{display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;color:var(--muted);font-size:14px}
.tip,.ml-tip{font-size:13px}
.tip{position:absolute;pointer-events:none;background:var(--tip-bg);color:var(--tip-ink);border-radius:2px;padding:8px 10px;line-height:1.45;min-width:150px;box-shadow:0 6px 18px rgba(0,0,0,.18);z-index:5}
.tip .d,.ml-tip .d{font-weight:700;margin-bottom:3px}
.tip .r,.ml-tip .r{display:flex;justify-content:space-between;gap:14px}
.tip .r i,.ml-tip .r i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:0}
.pane{padding:14px 22px 18px}
.tbl{max-height:420px;overflow:auto;border:1px solid var(--line-soft)}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{padding:7px 12px;text-align:right;border-bottom:1px solid var(--line-soft);font-variant-numeric:tabular-nums;white-space:nowrap}
th:first-child,td:first-child{text-align:left}
thead th{position:sticky;top:0;background:var(--surface-2);font-weight:600;font-size:13px;color:var(--ink-2)}
td.wrap-cell{white-space:normal;text-align:left;color:var(--muted);font-size:13px;min-width:220px}
dl.src{display:grid;grid-template-columns:170px 1fr;gap:8px 18px;margin:0;font-size:14.5px;align-content:start}
dl.src dt{color:var(--muted)}
dl.src dd{margin:0;min-width:0}
@media (max-width:600px){dl.src{grid-template-columns:1fr}dl.src dt{margin-top:6px}}
.btn{display:inline-block;margin-top:10px;font:inherit;font-size:14px;font-weight:600;background:var(--ink);color:var(--surface);border:0;border-radius:2px;padding:6px 12px;cursor:pointer;text-decoration:none}
.badge{display:inline-block;font-size:12px;font-weight:700;color:var(--brand-ink);background:var(--brand);padding:1px 7px;vertical-align:1px}
.badge.quiet{color:var(--ink-2);background:var(--surface-2)}
.linkbtn{font:inherit;font-size:inherit;font-weight:600;color:var(--brand);background:none;border:0;padding:0;cursor:pointer}
.calc{font-size:12px;font-weight:600;color:var(--c3);background:var(--surface-2);padding:1px 6px;margin-left:6px;vertical-align:1px}
.chg{font-weight:600}
.chg.up,.chg.down{color:var(--ink-2)}
.list{display:flex;flex-direction:column;padding:10px 22px 16px}
.list > div{padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:14.5px;display:flex;flex-direction:column;gap:2px;min-width:0}
.list > div:last-child{border-bottom:0}
.list .s{font-size:13px;color:var(--muted)}
.list code{word-break:break-all;white-space:normal}
.bar-key{display:flex;gap:16px;font-size:13px;color:var(--muted);padding:0 22px 12px;flex-wrap:wrap}
.bar-key span{display:inline-flex;align-items:center;gap:6px}
.bar-key i{display:inline-block;width:12px;height:10px}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--tip-bg);color:var(--tip-ink);padding:10px 16px;border-radius:2px;font-size:14px;z-index:50;box-shadow:0 8px 24px rgba(0,0,0,.2);max-width:calc(100% - 32px)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- controls above a table (table and matrix pages) ---------------------------------------- */
.ctl{display:flex;flex-direction:column;gap:6px;min-width:0}
.ctl .lab{font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap}
.ctl .seg{align-self:flex-start}
.ctl select{font:inherit;font-size:13.5px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:2px;padding:0 8px;height:30px;min-width:0;max-width:320px}
.ctl .chk{height:30px}

/* ---- series page (redesign of 2026-10): one card with the chart and its values, then the rest ---- */
.s-crumbs{padding-top:18px;font-size:13.5px}
.s-crumbs a{color:var(--muted)}
.s-crumbs a:hover{color:var(--brand);text-decoration:none}
.s-crumbs [aria-current]{color:var(--ink)}
.s-body{display:flex;flex-direction:column;gap:28px;padding-top:14px}
/* the card: the chart at the left, the values at the right, the source and the actions under both;
   a blue rule along its top, as under the header */
.s-viz{display:grid;grid-template-columns:minmax(0,1fr) 310px;grid-template-areas:"plot vals" "foot foot";
  border:1px solid var(--line);border-top:3px solid var(--nav-mark);background:var(--surface);min-width:0}
.s-plot{grid-area:plot;min-width:0;padding:20px 24px 12px}
.s-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px 24px}
.s-head > div:first-child{min-width:0}
.s-head h1{margin:0;font-size:clamp(24px,2.6vw,32px);font-weight:700;line-height:1.15}
.s-sub{margin:4px 0 0;font-size:15px;color:var(--muted)}
.s-head .sv-row{margin:2px 0 0;flex-shrink:0}
.s-ctl{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 16px;margin-top:18px}
.s-ctl-r{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-left:auto}
.pills{display:flex;flex-wrap:wrap;gap:4px;background:var(--tint);padding:3px;border-radius:999px}
.pills[hidden]{display:none}
.pills a,.pills button,.pills span{padding:5px 13px;border:0;border-radius:999px;background:transparent;font:inherit;font-size:14px;color:var(--ink);
  text-decoration:none;cursor:pointer;white-space:nowrap;line-height:1.4}
.pills a:hover,.pills button:hover:not(.on){color:var(--brand)}
.pills .on{background:var(--surface);font-weight:700;box-shadow:0 1px 2px rgba(11,37,69,.12)}
.pills a span,.pills button span{padding:0}      /* a count inside a pill, not a pill of its own */
.pills .off{color:var(--faint);cursor:not-allowed;text-decoration:line-through;text-decoration-color:var(--line-strong)}
/* a dropdown: Base, Compare, Download; the menu under its button (over it, at the card's foot) */
.dd{position:relative}
.dd summary{display:flex;align-items:center;gap:7px;list-style:none;cursor:pointer;padding:6px 12px;border:1px solid var(--line-strong);
  font-size:14px;color:var(--ink);background:var(--surface);white-space:nowrap;user-select:none}
.dd summary::-webkit-details-marker{display:none}
.dd summary b{font-weight:700}
.dd summary:hover,.dd[open] summary{border-color:var(--ink)}
.dd[open] summary > svg:last-child{transform:rotate(180deg)}
.dd-m{position:absolute;right:0;top:calc(100% + 6px);z-index:15;min-width:100%;display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--line);box-shadow:0 12px 28px -10px rgba(11,37,69,.35);padding:6px 0}
.dd.up .dd-m{top:auto;bottom:calc(100% + 6px)}
.dd-m a,.dd-m span,.dd-m button{display:block;padding:8px 16px;font:inherit;font-size:14px;color:var(--ink);text-decoration:none;white-space:nowrap;
  background:none;border:0;text-align:left;cursor:pointer}
.dd-m a:hover,.dd-m button:hover{background:var(--surface-2);color:var(--brand)}
.dd-m .on{font-weight:700}
.dd-m .off{color:var(--faint);cursor:not-allowed;text-decoration:line-through}
.dd-m b{display:block;font-size:14.5px}
.dd-m a span,.dd-m button span{display:block;padding:0;font-size:12.5px;color:var(--muted);white-space:normal}
.dd.up .dd-m{min-width:270px}
.dd-cmp{padding:12px 14px;gap:8px;min-width:300px}
.dd-cmp label{font-size:13px;font-weight:600;color:var(--muted)}
.dd-cmp select{font:inherit;font-size:14px;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);height:36px;padding:0 8px;width:100%}
.dd-cmp .chk{color:var(--ink-2);font-weight:400}
.chk{display:inline-flex;align-items:center;gap:7px;font-size:14px;color:var(--ink-2);cursor:pointer}
.chk input{accent-color:var(--brand);margin:0}
.s-plot .chart{padding:14px 0 0}
.s-plot .ec{height:430px}
.cmp-legend{padding:12px 0 0}
.cmp-legend:empty{display:none}
.cmp-legend button b{font-weight:500;color:var(--muted);margin-left:2px}
.cmp-legend .main{cursor:default}
.cmp-legend button small{margin-left:5px;font-size:12px;color:var(--muted)}
.s-under{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:6px}
.s-span{font-size:14px;color:var(--muted)}
.s-asof{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);margin-left:auto}
.s-asof select{font:inherit;font-size:14px;color:var(--ink);border:1px solid var(--line-strong);background:var(--surface);height:32px;padding:0 8px}
/* the Values panel: the latest figure in a box, the newest readings, "All values" */
.s-vals{grid-area:vals;min-width:0;display:flex;flex-direction:column;background:var(--surface-2);border-left:1px solid var(--line);padding:20px 18px 14px}
.s-vals h2{margin:0 0 12px;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.s-latest{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--nav-mark);padding:12px 14px;margin-bottom:10px}
.s-latest .l{font-size:13px;color:var(--muted)}
.s-latest b{font-family:var(--serif);font-size:30px;font-weight:600;line-height:1.15}
.s-latest .c{font-size:13px;color:var(--ink-2)}
.s-vals .tbl{border:0;max-height:none;overflow:visible;flex:0 1 auto}
.s-vals.all .tbl{max-height:470px;overflow:auto;border-top:1px solid var(--line)}
.s-vals table{font-size:14px;background:none}
.s-vals thead th{background:var(--surface-2);font-size:12px;padding:6px 4px;color:var(--muted)}
.s-vals td{padding:6px 4px;border-bottom:1px solid var(--line)}
.s-vals td:first-child{color:var(--ink-2)}
.s-vals td:nth-child(2){font-weight:700}
.s-vals td:nth-child(3){color:var(--muted);font-size:13px}
.s-vals-f{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 12px;margin-top:10px;font-size:13.5px}
.s-vals-f .linkbtn{color:var(--brand);font-size:13.5px}
.tbl-tools{display:flex;align-items:center;gap:12px;color:var(--muted)}
.tbl-tools .linkbtn{color:var(--muted);font-weight:600}
.tbl-tools .linkbtn:hover{color:var(--brand)}
/* under both: where the figures come from, and Download, Share, Full screen as labelled buttons */
.s-foot{grid-area:foot;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;padding:14px 24px;
  border-top:1px solid var(--line);font-size:14px;color:var(--faint)}
.s-cite p{margin:0}
.s-cite p + p{margin-top:2px}
.s-cite b{color:var(--ink)}
.s-cite a{color:var(--brand);text-underline-offset:3px}
.s-cite code{overflow-wrap:anywhere}
.s-cite .linkbtn{font-size:14px;color:var(--brand)}
.s-acts2{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.s-act,.s-acts2 .dd summary{display:flex;align-items:center;gap:7px;padding:7px 14px;border:1px solid var(--line-strong);background:var(--surface);
  font:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;border-radius:999px}
.s-act:hover,.s-acts2 .dd summary:hover,.s-acts2 .dd[open] summary{border-color:var(--brand);color:var(--brand)}
.s-act[hidden]{display:none}
/* full screen: the chart alone across the screen, the source and the buttons under it */
.s-viz:fullscreen{overflow:auto;border:0;grid-template-columns:minmax(0,1fr);grid-template-areas:"plot" "foot";align-content:start}
.s-viz:fullscreen .s-vals{display:none}
.s-viz:fullscreen .ec{height:calc(100vh - 290px)}
/* About: a pale strip, the facts on one line, the rest under "Show more" */
.s-about{background:var(--surface-2);border:1px solid var(--line);padding:20px 24px 6px}
.s-about h2{margin:0 0 8px;font-size:22px}
.s-facts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 24px;font-size:14.5px}
.s-facts span{color:var(--muted);margin-right:4px}
.s-checkline{margin:6px 0 0;font-size:14.5px;color:var(--ink-2)}
.s-checkline a{color:var(--brand)}
.s-more2{margin-top:8px;border-top:1px solid var(--line)}
.s-more2 > summary{display:flex;justify-content:center;align-items:center;gap:6px;list-style:none;cursor:pointer;padding:10px 0 12px;
  font-size:14px;font-weight:600;color:var(--muted)}
.s-more2 > summary::-webkit-details-marker{display:none}
.s-more2 > summary:hover{color:var(--brand)}
.s-more2[open] > summary{order:2}
.s-more2[open] > summary svg{transform:rotate(180deg)}
.s-more2[open] > summary{font-size:0}
.s-more2[open] > summary::before{content:"Show less";font-size:14px}
.s-more-in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 40px;padding:8px 0 10px}
.s-more-in h3{margin:0 0 10px;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.s-more-in h3 ~ h3{margin-top:18px}
.s-more-in dl.src{grid-template-columns:150px minmax(0,1fr);gap:8px 16px;font-size:14.5px}
.s-more-in dl.src dd{overflow-wrap:anywhere}
.s-more-in dl.src a{color:var(--brand);text-underline-offset:3px}
.s-files{display:flex;flex-direction:column;gap:8px}
.s-file{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;padding:10px 14px;background:var(--surface);text-decoration:none;color:var(--ink)}
.s-file .t{font-weight:600;min-width:0;overflow-wrap:anywhere}
.s-file .w{font-size:13px;color:var(--muted)}
a.s-file:hover .t{color:var(--brand)}
.s-note{margin:0;font-size:14.5px;color:var(--ink-2)}
.s-revs{list-style:none;margin:8px 0 0;padding:0;font-size:14px}
.s-revs li{padding:6px 0;border-bottom:1px solid var(--line)}
.s-revs span{display:block;font-size:13px;color:var(--muted)}
/* Related series and articles: plain sections with cards */
.s-section h2{font-size:24px;margin:0 0 14px}
.s-rel{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.s-rel a{display:flex;flex-direction:column;gap:2px;height:100%;background:var(--surface);border:1px solid var(--line);padding:14px 16px;text-decoration:none;color:var(--ink)}
.s-rel .l{font-size:14px;font-weight:600;line-height:1.3}
.s-rel b{font-family:var(--serif);font-size:24px;font-weight:600;margin-top:4px}
.s-rel .w{font-size:13px;color:var(--muted)}
.s-rel a:hover{border-color:var(--line-strong)}
.s-rel a:hover .l{color:var(--brand)}
.s-rels{list-style:none;margin:12px 0 0;padding:0;font-size:13px;color:var(--muted)}
.s-rels li{margin:4px 0}
.s-rels code{word-break:break-all}
.s-arts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(360px,100%),1fr));gap:16px}
.s-art{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border:1px solid var(--line);text-decoration:none;color:var(--ink);background:var(--surface)}
.s-art .t{font-family:var(--serif);font-size:20px;font-weight:700;line-height:1.25}
.s-art:hover .t{color:var(--brand)}
.s-card{border:1px solid var(--line);background:var(--surface);min-width:0;scroll-margin-top:96px}
.s-card h2{font-size:22px;font-weight:700;margin:0 0 14px}
@media (max-width:1000px){.s-rel{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .s-viz{grid-template-columns:minmax(0,1fr);grid-template-areas:"plot" "vals" "foot"}
  .s-vals{border-left:0;border-top:1px solid var(--line)}
  .s-more-in{grid-template-columns:minmax(0,1fr)}
}
/* source discrepancies: counts by verdict, a pill to show one verdict, the most serious five first */
.ck-h{padding:22px 24px 4px}
.ck-h h2{margin:0}
.ck-h p{margin:4px 0 0;font-size:15px;color:var(--ink-2);max-width:720px}
.ck-f{display:none;flex-wrap:wrap;gap:8px;padding:14px 24px 4px}
.js .ck-f{display:flex}
.ck-f button{padding:5px 14px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.ck-f button:hover{border-color:var(--brand);color:var(--brand)}
.ck-f button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.ck-list{list-style:none;margin:0;padding:4px 24px 0}
.ck-list li{display:grid;grid-template-columns:170px 110px minmax(0,1fr) auto;align-items:baseline;gap:4px 16px;padding:13px 0;border-bottom:1px solid var(--line-soft)}
.ck-list li:last-child{border-bottom:0}
.js .s-checks:not(.all):not(.picked) .ck-list li.more{display:none}
.ck-list .w{font-weight:600;font-size:15px;white-space:nowrap}
.ck-list .x{margin:0;font-size:15px;min-width:0}
.ck-list .x b{font-weight:700}
.ck-list .x code{overflow-wrap:anywhere}
/* a check's verdict: a small dot and the words; red for an error, amber for rounding */
.ck-v{display:inline-flex;align-items:baseline;gap:7px;font-size:13.5px;color:var(--ink-2);white-space:nowrap}
.ck-v::before{content:"";flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--line-strong);transform:translateY(-1px)}
.ck-v.err::before{background:#C8321F}
.ck-v.warn::before{background:#D9822B}
.ck-dt{color:var(--brand);font-size:14px;white-space:nowrap}
.ck-db{grid-column:3/-1;font-size:13px;color:var(--muted)}
.ck-db p{margin:2px 0 0;overflow-wrap:anywhere}
.ck-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 20px;padding:12px 24px 16px;border-top:1px solid var(--line-soft);
  font-size:14px;color:var(--muted)}
.ck-foot .linkbtn{color:var(--brand);font-size:14px}
.js .s-checks.picked .ck-foot{display:none}
@media (max-width:760px){
  .s-plot{padding:16px 14px 10px}
  .s-head h1{font-size:23px}
  .s-plot .ec{height:300px}
  .s-ctl-r{margin-left:0}
  .s-vals{padding:16px 14px 12px}
  .s-foot{padding:12px 14px}
  .s-about{padding:16px 16px 4px}
  .s-more-in dl.src{grid-template-columns:minmax(0,1fr)}
  .s-more-in dl.src dt{margin-top:6px}
  .s-rel{grid-template-columns:minmax(0,1fr)}
  .ck-h,.ck-f,.ck-foot{padding-inline:16px}
  .ck-list{padding:4px 16px 0}
  .ck-list li{grid-template-columns:auto minmax(0,1fr) auto}
  .ck-list .x,.ck-db{grid-column:1/-1}
  .ck-dt{grid-column:3;grid-row:1}
  .pills{border-radius:18px}
  .dd-cmp{min-width:260px}
}

/* ---- catalogue and topic pages -------------------------------------------------------------- */
.bigsearch{display:flex;align-items:center;gap:10px;border:2px solid var(--ink);border-radius:3px;padding:10px 14px;background:var(--surface);max-width:640px;color:var(--muted);margin-top:22px}
.bigsearch input{border:0;background:transparent;font:inherit;font-size:16.5px;color:var(--ink);width:100%;outline:none}
#status{font-size:13.5px;color:var(--muted);min-height:20px;margin-top:8px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:0 32px}
.tile{display:flex;flex-direction:column;gap:2px;padding:12px 0;border-top:1px solid var(--line);text-decoration:none;color:inherit}
.tile .lab{font-size:15.5px;font-weight:600;color:var(--ink)}
.tile .val{font-size:26px;font-weight:700;font-family:var(--serif);line-height:1.1}
.tile .val small{font-size:13px;color:var(--muted);font-weight:500;margin-left:4px}
.tile .meta{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:var(--muted)}
.tile:hover .lab{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
details.fam{border-top:1px solid var(--ink);margin-bottom:8px}
details.fam > summary{list-style:none;cursor:pointer;padding:14px 0 12px;display:grid;grid-template-columns:1fr auto;gap:2px 16px}
details.fam > summary::-webkit-details-marker{display:none}
details.fam > summary b{font-size:21px;font-weight:700;font-family:var(--serif);line-height:1.2}
details.fam > summary .s{grid-column:1;font-size:14px;color:var(--muted)}
details.fam > summary .tog{grid-row:1/span 2;grid-column:2;align-self:center;width:9px;height:9px;margin:0 4px 4px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .15s}
details.fam[open] > summary .tog{transform:rotate(-135deg);margin-bottom:-4px}
details.fam > summary:hover .tog{border-color:var(--brand)}
details.fam > summary:hover b{color:var(--brand)}
details.fam .pane{padding:0 0 16px}
.rows td{vertical-align:top}
.rows td.name{white-space:normal;min-width:200px}
.rows td.name a{font-weight:600;color:var(--brand);text-decoration:none}
.rows td.name a:hover{text-decoration:underline;text-underline-offset:3px}
.rows td.name code{display:inline-block;margin-top:3px;font-size:11.5px;background:none;padding:0;color:var(--muted)}
.rows tr.tbl-title td{background:var(--surface-2);font-size:13px;font-weight:700;color:var(--ink-2);padding-top:9px}
.forms-links{display:flex;flex-wrap:wrap;row-gap:2px}
.forms-links a{font-size:13.5px;font-weight:500;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.forms-links a + a{border-left:1px solid var(--line);padding-left:9px;margin-left:9px}
.forms-links a:hover{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
/* the catalogue (redesign of 2026-10; site/mockups/step15-catalog/HANDOFF.md, frame catalog-c.html):
   the title row, one box that filters and searches, the sticky group line, a band a group, a card a
   topic */
.cat-head{padding-block:18px 0}
.cat-head .crumbs{padding:0 0 2px;font-size:13.5px}
.cat-head .crumbs a{color:var(--muted)}
.cat-head__t{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 32px}
.cat-head__t h1{font-size:40px;margin:6px 0 0}
.cat-head__t p{margin:0;font-size:15px;color:var(--muted)}
.cat-head__t p b{color:var(--ink);font-weight:700}
.cat-search{display:flex;margin-top:18px;min-height:58px;box-shadow:0 1px 3px rgba(11,37,69,.07)}
.cat-search__field{flex:1;display:flex;align-items:center;gap:12px;padding:0 12px 0 18px;border:1px solid var(--line-strong);border-right:0;
  background:var(--surface);color:var(--muted);min-width:0}
.cat-search:focus-within .cat-search__field{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.cat-search__field input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:17px;color:var(--ink);padding:14px 0}
.cat-search__field input::placeholder{color:var(--faint)}
.cat-search__field input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.cat-search__count{font-size:13px;font-weight:700;color:var(--brand);background:var(--brand-soft);padding:3px 10px;border-radius:999px;white-space:nowrap}
.cat-search__count.none{color:var(--def);background:none;border:1px solid var(--line)}
.cat-search__clear{border:0;background:none;color:var(--muted);cursor:pointer;padding:6px;display:flex;border-radius:50%}
.cat-search__clear:hover{color:var(--brand);background:var(--surface-2)}
.cat-search__key{font-family:var(--mono);font-size:12px;line-height:1.4;border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:3px;padding:1px 8px;color:var(--muted)}
.cat-search:focus-within .cat-search__key{display:none}
.cat-search__go{flex:none;border:0;background:var(--navy);color:#FFFFFF;font:inherit;font-weight:600;font-size:15.5px;padding:0 26px;display:flex;align-items:center;gap:10px;cursor:pointer}
.cat-search__go:hover{background:var(--navy-2)}
.cat-search__go:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
:root[data-theme="dark"] .cat-search__go{background:var(--brand);color:var(--brand-ink)}
.cat-search__hint{margin:8px 0 0;font-size:13.5px;color:var(--muted)}
/* the group line: sticky under the header, the group on screen marked */
.cat-groups{position:sticky;top:79px;z-index:5;background:var(--bg);margin-top:14px}
.cat-groups .wrap{display:flex;flex-wrap:nowrap;align-items:baseline;padding-block:12px;font-size:15px;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.cat-groups .wrap::-webkit-scrollbar{display:none}
.cat-groups.stuck{border-bottom:1px solid var(--line);box-shadow:0 2px 6px rgba(11,37,69,.06)}
.cat-groups__cap{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-right:14px}
.cat-groups a{color:var(--ink);text-decoration:none;font-weight:600;padding:2px 0;border-bottom:2px solid transparent}
.cat-groups a span{font-weight:400;color:var(--faint);margin-left:5px;font-size:14px}
.cat-groups i{flex:none;width:4px;height:4px;border-radius:50%;background:var(--line-strong);margin:0 14px;align-self:center}
.cat-groups a:hover{color:var(--brand)}
.cat-groups a.on{color:var(--brand);border-bottom-color:var(--brand)}
/* a band a group, pale and white in turn */
.cat-band{border-top:1px solid var(--line-soft);scroll-margin-top:130px}
.cat-band.alt{background:var(--surface-2)}
.cat-band > .wrap{padding-block:44px 48px}
.cat-band__h{display:flex;justify-content:space-between;align-items:baseline;gap:6px 20px;margin-bottom:20px;flex-wrap:wrap}
.cat-band__h h2{font-size:28px}
.cat-band__h p{margin:2px 0 0;color:var(--muted);font-size:15px}
.cat-band__h > span{font-size:15px;color:var(--muted)}
.cat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
/* a topic card */
.cat-card{border:1px solid var(--line);background:var(--surface);padding:20px 22px 16px;display:flex;flex-direction:column;min-width:0}
.cat-card h3{font-size:22px;font-weight:600;margin:0;line-height:1.2}
.cat-card h3 a{text-decoration:none;color:var(--ink)}
.cat-card h3 a:hover{color:var(--brand)}
.cat-card__n{margin:2px 0 0;font-size:14px;color:var(--faint)}
.cat-card__b{margin:8px 0 0;color:var(--muted);font-size:15px;line-height:1.45}
.cat-kf{display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:2px 14px;margin:14px 0 10px;padding:12px 0;border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);text-decoration:none;color:var(--ink)}
.cat-kf__l{grid-column:1/-1;font-size:13.5px;color:var(--muted)}
.cat-kf__v{font-family:var(--serif);font-size:26px;font-weight:600;line-height:1.1;white-space:nowrap}
.cat-kf__v small{font-size:.55em;margin-left:3px;font-weight:600;color:var(--ink-2)}
.cat-kf svg{grid-column:2;grid-row:2;width:96px;height:28px;align-self:center;overflow:visible}
.cat-kf__m{grid-column:1/-1;font-size:14px;color:var(--faint)}
.cat-kf:hover .cat-kf__v{color:var(--brand)}
.cat-tables{list-style:none;margin:0;padding:0}
.cat-tables li{display:grid;grid-template-columns:minmax(0,1fr) auto 56px;gap:0 12px;align-items:baseline;padding:7px 0;border-top:1px solid var(--line-soft);font-size:14.5px;scroll-margin-top:140px}
.cat-tables li:first-child{border-top:0}
.cat-tables a{color:var(--brand);text-decoration:none;font-weight:600;overflow-wrap:anywhere;grid-column:1}
.cat-tables a:hover{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.cat-tables .num{grid-column:3;text-align:right;color:var(--muted);font-size:14px}
.cat-tables li.dead a{color:var(--ink-2);font-weight:400}
.cat-tables__stp{grid-column:2;font-size:13px;color:var(--faint);white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.cat-tables__stp i{width:7px;height:7px;border-radius:50%;border:1.5px solid var(--faint)}
.js .cat-tables li[data-more]{display:none}
.js .cat-card.open .cat-tables li[data-more],.js .cat-card.filt .cat-tables li[data-more]{display:grid}
.cat-tables li.miss{display:none !important}
.cat-card__foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;padding-top:8px}
.cat-fold{display:none;align-items:center;gap:6px;background:none;border:0;padding:0;font:inherit;font-size:14.5px;font-weight:600;color:var(--brand);cursor:pointer}
.js .cat-fold{display:inline-flex}
.cat-fold:hover{text-decoration:underline;text-underline-offset:3px}
.cat-fold .c,.cat-card.open .cat-fold .o{display:none}
.cat-card.open .cat-fold .c{display:inline}
.cat-card.open .cat-fold svg{transform:rotate(180deg)}
.js .cat-card.filt .cat-fold{display:none}
.cat-card__open{font-size:14px;font-weight:600;color:var(--brand);text-decoration:none;margin-left:auto}
.cat-card__open:hover{color:var(--brand)}
/* "Looking for one series?" fills the empty slots of a group's last row */
.cat-find{grid-column:span var(--span,1);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;border:1px dashed var(--line-strong);padding:20px 28px}
.cat-find h3{font-size:22px;margin:0}
.cat-find p{margin:4px 0 14px;color:var(--muted)}
@media (max-width:1099px){.cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cat-find{grid-column:span 1}}
@media (max-width:860px){.cat-groups{top:0}}
@media (max-width:760px){.cat-band > .wrap{padding-block:32px}}
@media (max-width:599px){
  .cat-grid{grid-template-columns:minmax(0,1fr)}
  .cat-head__t h1{font-size:34px}
  .cat-search__go{width:58px;padding:0;justify-content:center}
  .cat-search__lbl,.cat-search__key,.cat-groups__cap{display:none}
  .cat-search__field{padding-left:14px}
}
/* phones: a topic's rows as cards, the forms as chips under the name */
@media (max-width:640px){
  .rows thead{display:none}
  .rows,.rows tbody,.rows tr.tbl-title,.rows tr.tbl-title td{display:block}
  .rows tr.rowx{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n n" "f f" "q l";gap:6px 16px;padding:12px;border-bottom:1px solid var(--line-soft)}
  .rows tr.rowx td{padding:0;border:0;min-width:0;white-space:normal}
  .rows tr.rowx td.name{grid-area:n}
  .rows tr.rowx td:nth-child(2){grid-area:f}
  .rows tr.rowx td:nth-child(3){grid-area:q;font-size:13.5px;text-align:left}
  .rows tr.rowx td:nth-child(4){grid-area:l;text-align:right;font-size:13.5px}
  .forms-links{gap:6px}
  .forms-links a{border:1px solid var(--line);border-radius:2px;padding:2px 8px}
  .forms-links a + a{border-left:1px solid var(--line);padding-left:8px;margin-left:0}
  .cat-topic-h{grid-template-columns:minmax(0,1fr)}
  .cat-topic-h .n{grid-row:auto;grid-column:1;margin-top:4px}
}

/* ---- articles: the list, an analysis with its "on this page" rail, a snapshot ---------------- */
.ar-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:13px;color:var(--muted)}
.pill.draft{background:transparent;color:var(--muted);border:1px dashed var(--line-strong);padding:1px 9px}
.al-rb .by,.al-lb .by{margin:0;font-size:13.5px}

/* the list: the newest as a card under a blue rule, the rest by month with a small chart */
.al-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 40px;flex-wrap:wrap;padding-bottom:22px}
.al-head h1{margin:10px 0 12px}
.al-head .lede{max-width:44em}
.al-count{margin:0 0 4px;font-size:14px;color:var(--muted)}
.al-count b{font-family:var(--serif);font-size:22px;color:var(--ink);font-weight:600}
.al-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-block:14px;border-top:1px solid var(--line);margin-bottom:22px}
.al-bar .pills button span{color:var(--muted);font-weight:500;margin-left:3px}
.al-sel{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.al-sel select{font:inherit;font-size:14px;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:2px;padding:6px 10px}
.al-list{padding-bottom:64px}
.al-lead{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);border:1px solid var(--line);border-top:3px solid var(--nav-mark);background:var(--surface);margin-bottom:8px}
.al-lead.no-fig{grid-template-columns:minmax(0,1fr)}
.al-lb{padding:28px 32px;display:flex;flex-direction:column;gap:12px;min-width:0}
.al-lb h2{font-size:32px;line-height:1.15;font-weight:600}
.al-lb h2 a,.al-row h3 a{color:var(--ink);text-decoration:none}
.al-lb h2 a:hover,.al-row h3 a:hover{color:var(--brand);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.al-lb .x{margin:0;font-size:17px;line-height:1.6;color:var(--ink-2)}
.al-go{margin-top:auto;padding-top:6px;font-weight:600;color:var(--brand);text-decoration:none;font-size:15px}
.al-go:hover{text-decoration:underline;text-underline-offset:3px}
.al-fig{margin:0;background:var(--surface-2);padding:12px 14px 10px;display:flex;flex-direction:column;gap:6px;min-width:0;align-self:start}
.al-fig figcaption{display:flex;flex-direction:column;gap:3px}
.al-fig .ft{font-family:var(--serif);font-size:18px;font-weight:600;line-height:1.25;color:var(--ink)}
.al-fig .fs{font-size:12.5px;line-height:1.4;color:var(--muted)}
.al-fig .svgc-box{margin-top:4px}
.al-lead .al-fig{align-self:stretch;border-right:1px solid var(--line);padding:22px 24px 18px}
.al-month{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:34px 0 0;padding-bottom:8px;border-bottom:1px solid var(--line-strong)}
.al-row{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding:22px 0;border-bottom:1px solid var(--line)}
.al-row.has-fig{grid-template-columns:minmax(0,1fr) 260px}
.al-rb{display:flex;flex-direction:column;gap:8px;min-width:0}
.al-row h3{font-size:24px;line-height:1.2;font-weight:600;margin:2px 0 0;max-width:30em}
.al-row .x{margin:0;font-size:16px;line-height:1.6;color:var(--ink-2);max-width:46em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.al-lead[hidden],.al-row[hidden],.al-month[hidden]{display:none}
.al-none{padding:28px 0;color:var(--muted)}
@media (max-width:900px){
  .al-lead{grid-template-columns:minmax(0,1fr)}
  .al-lead .al-fig{border-right:0;border-bottom:1px solid var(--line)}
  .al-lb{padding:20px 20px 22px}
  .al-lb h2{font-size:26px}
  .al-row.has-fig{grid-template-columns:minmax(0,1fr) 180px}
}
@media (max-width:640px){
  .al-head{align-items:flex-start}
  .al-row.has-fig{grid-template-columns:minmax(0,1fr)}
  .al-row .al-fig{display:none}
  .al-row h3{font-size:21px}
  .al-bar{gap:10px}
}

/* an article: the head over the text column, the rail at its left */
.art{display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:56px;align-items:start;padding-bottom:56px}
.ar-head{grid-column:2;padding-bottom:28px;max-width:860px}
.ar-head .crumbs{margin-bottom:18px}
.ar-head h1{margin:12px 0 16px;font-size:clamp(32px,4vw,46px);line-height:1.08}
.ar-stand{margin:0;font-size:20px;line-height:1.55;color:var(--ink-2);max-width:40em}
.ar-by{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap;margin-top:22px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ar-by p{margin:0;font-size:14px;color:var(--muted);line-height:1.6}
.ar-who b{color:var(--ink);font-weight:600}
.ar-acts{display:flex;gap:8px}
.ar-btn{font:inherit;font-size:14px;font-weight:600;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;padding:6px 14px;text-decoration:none;cursor:pointer}
.ar-btn:hover{border-color:var(--brand);color:var(--brand)}
.ar-upd{margin:12px 0 0;font-size:14px;color:var(--ink-2)}
.ar-upd i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--gold);margin-right:8px;vertical-align:1px}
.ar-upd a{color:var(--brand)}
.ar-rail{grid-column:1;grid-row:2;position:sticky;top:110px;display:flex;flex-direction:column;gap:2px;padding-top:4px}
.ar-rail .grp-h{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.ar-rail a{text-decoration:none;font-size:14px;line-height:1.35;color:var(--ink-2);padding:6px 10px;border-left:2px solid var(--line-soft)}
.ar-rail a:hover,.ar-rail a.on{color:var(--ink);border-left-color:var(--brand);background:var(--surface-2)}
.ar-toc{display:none}
.ar-story{grid-column:2;grid-row:2;min-width:0}
.ar-story section{scroll-margin-top:110px}
.ar-story h2{font-size:28px;font-weight:600;margin:46px 0 14px;max-width:26em}
.ar-story h3{font-size:21px;font-weight:700;margin:26px 0 8px}
.ar-story .prose{font-size:18px;line-height:1.7;color:var(--ink-2);max-width:40em;margin:0 0 20px}
.ar-story ul.prose{padding-left:1.2em}
.ar-story ul.prose li{margin-bottom:6px}
.ar-story > section:first-of-type > :first-child{margin-top:0}

/* a figure in the text: read from a series, a link to it */
.fig{font-variant-numeric:lining-nums}
a.fig{color:var(--ink);font-weight:600;font-variant-numeric:lining-nums tabular-nums;text-decoration:none;border-bottom:1px dotted var(--line-strong)}
a.fig:hover{color:var(--brand);border-bottom:1px solid var(--brand)}
.fig.bad{color:var(--c3);font-weight:700}
.f-check{border:1px solid var(--c3);background:var(--surface-2);padding:14px 18px;margin-bottom:22px;font-size:14.5px}
.f-check ul{margin:8px 0 0;padding-left:1.2em;color:var(--ink-2)}

/* a chart: the series and topic pages' card, a blue rule along its top */
.fchart{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--nav-mark);border-radius:0;margin:34px 0 30px}
.ar-lead .fchart{margin-top:0}
.fchart .frame-head{padding:20px 24px 0}
.fchart .frame-head h3{font-family:var(--serif);font-size:22px;font-weight:600;line-height:1.25;margin:0 0 4px}
.fchart .bar-key{padding:12px 24px 0}
.fchart .chart{padding:6px 16px 0}
.fchart .frame-foot{padding:10px 24px 12px;margin-top:6px}
.fchart .ec.line{height:360px}
.fchart .ec.bars{height:380px}

/* the data behind it: a fold, closed at first */
.ar-data{margin-top:48px}
.ar-fold{border:1px solid var(--line);background:var(--surface)}
.ar-fold summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;cursor:pointer;list-style:none;background:var(--surface-2)}
.ar-fold summary::-webkit-details-marker{display:none}
.ar-fold summary:hover{background:var(--tint)}
.ar-fold summary:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.ar-fh{display:flex;flex-direction:column;gap:3px;min-width:0}
.ar-fh h2{font-size:22px;margin:0}
.ar-fc{font-size:14px;color:var(--muted)}
.ar-fc b{font-weight:600;color:var(--ink-2)}
.ar-ft{flex:none;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--brand)}
.ar-ft::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.ar-fold[open] .ar-ft::after{transform:translateY(2px) rotate(-135deg)}
.ar-fold .hd,.ar-fold[open] .sh{display:none}
.ar-fold[open] .hd{display:inline}
.ar-fold[open] summary{border-bottom:1px solid var(--line)}
.ar-fb{padding:16px 20px 20px}
.ar-fb > p{margin:0 0 14px;font-size:15px;color:var(--muted)}
.ar-tw{border:1px solid var(--line);background:var(--surface);overflow-x:auto}
.ar-data table{width:100%;border-collapse:collapse;font-size:14.5px;table-layout:fixed}
.ar-data th{text-align:left;font-size:12.5px;font-weight:600;color:var(--muted);background:var(--surface-2);padding:10px 14px;border-bottom:1px solid var(--line-strong)}
.ar-data th:nth-child(2){width:120px}
.ar-data th:nth-child(3){width:170px}
.ar-data td{padding:9px 14px;border-bottom:1px solid var(--line-soft);vertical-align:baseline;color:var(--ink-2)}
.ar-data td:first-child{white-space:normal;overflow-wrap:anywhere}
.ar-data tr:last-child td{border-bottom:0}
.ar-data td a{color:var(--ink);font-weight:500;text-decoration:none}
.ar-data td a:hover{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.ar-data td small{display:block;font-size:13.5px;color:var(--faint);margin-top:1px}
.ar-data .num{text-align:right;font-weight:600;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.ar-data td.num small{display:none}
.ar-data th:last-child,.ar-data td:last-child{text-align:left;padding-left:24px}
.ar-new{display:inline-block;margin-left:6px;font-size:11.5px;font-weight:700;padding:0 7px;border-radius:999px;background:var(--pill-s-bg);color:var(--pill-s-ink)}

/* more to read */
.ar-more{margin-top:52px;padding-top:20px;border-top:1px solid var(--line-strong)}
.ar-more h2{font-size:22px;margin:0 0 16px}
.ar-mg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ar-mc{display:flex;flex-direction:column;gap:10px;padding:16px 18px 18px;border:1px solid var(--line);background:var(--surface);text-decoration:none;color:var(--ink)}
.ar-mc .ar-meta{gap:6px 8px}
.ar-mc b{font-family:var(--serif);font-size:18px;font-weight:600;line-height:1.3}
.ar-mc:hover{border-color:var(--line-strong)}
.ar-mc:hover b{color:var(--brand);text-decoration:underline;text-underline-offset:3px}

/* a snapshot: no rail, the chart straight after the byline */
.ar-snap{grid-template-columns:minmax(0,1fr);max-width:1040px}
.ar-snap .ar-head,.ar-snap .ar-story{grid-column:1;grid-row:auto}
.ar-snap .ar-lead .fchart{margin:0 0 30px}

@media (max-width:1000px){
  .art{grid-template-columns:minmax(0,1fr)}
  .ar-head,.ar-story{grid-column:1}
  .ar-story{grid-row:auto}
  .ar-rail{display:none}
  .ar-toc{display:block;grid-column:1;margin:0 0 26px;border:1px solid var(--line);background:var(--surface-2)}
  .ar-toc summary{padding:11px 16px;font-size:14px;font-weight:600;cursor:pointer}
  .ar-toc a{display:block;padding:7px 16px;border-top:1px solid var(--line-soft);font-size:14.5px;color:var(--ink-2);text-decoration:none}
  .ar-mg{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .ar-stand{font-size:18px}
  .ar-story .prose{font-size:17px}
  .ar-story h2{font-size:24px;margin-top:36px}
  .fchart .frame-head{padding:16px 16px 0}
  .fchart .bar-key{padding:10px 16px 0}
  .fchart .chart{padding:4px 6px 0}
  .fchart .frame-foot{padding:10px 16px 12px}
  .fchart .ec.line,.fchart .ec.bars{height:300px}
  .ar-by{align-items:flex-start}
  .ar-data th:nth-child(2){width:96px}
  .ar-data th:nth-child(3),.ar-data td:nth-child(3){display:none}
  .ar-data th,.ar-data td{padding-inline:12px}
  .ar-data td.num small{display:block;font-weight:400;color:var(--faint)}
}

/* ---- about and privacy: reading pages in the article's layout (.ar), and the 404 page ------- */
.rd{padding-top:22px}
.rd .ar-head{padding-bottom:22px;border-bottom:1px solid var(--line)}
.rd .ar-head .crumbs{padding-top:0;margin-bottom:14px}
.rd .ar-head h1{margin:0 0 14px}
.rd .ar-rail{padding-top:38px}
.rd .ar-story > section:first-of-type > h2{margin-top:36px}
.rd .ar-story h2{font-size:26px;margin:40px 0 12px}
.rd .ar-story .prose{font-size:17.5px}
.rd .ar-story a{color:var(--brand);text-underline-offset:3px}
.rd.ar-snap{max-width:none}
.rd.ar-snap .ar-head,.rd.ar-snap .ar-story{max-width:760px}
/* the notice: a pale band, set apart from the reading */
.rd-notice{margin-top:44px;padding:4px 24px 6px;background:var(--surface-2);border-left:3px solid var(--line-strong);max-width:748px}
.rd .ar-story .rd-notice h2{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:18px 0 8px}
.rd .ar-story .rd-notice .prose{font-size:16px;max-width:none}
@media (max-width:1000px){.rd .ar-toc{margin:22px 0 0}}
@media (max-width:640px){.rd .ar-story h2{font-size:23px}.rd .ar-story .prose{font-size:17px}.rd-notice{padding:2px 16px 4px}}

/* the 404 page: the head, then a card with a search box and the main pages */
.nf{padding-block:44px 72px}
.nf-head,.nf-card{max-width:920px}
.nf-head h1{margin:6px 0 14px}
.nf-code{margin:0;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.nf-head .lede + .lede{margin-top:10px}
.nf-card{margin-top:30px;border:1px solid var(--line);border-top:3px solid var(--nav-mark);background:var(--surface);padding:22px 24px 24px}
.nf-search{margin-top:0}
.nf-cap{margin:26px 0 8px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.nf-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px}
.nf-links a{display:flex;flex-direction:column;gap:2px;padding:12px 0;border-bottom:1px solid var(--line-soft);text-decoration:none;color:var(--ink)}
.nf-links b{font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.25}
.nf-links span{font-size:14px;color:var(--muted)}
.nf-links a:hover b{color:var(--brand)}
@media (max-width:760px){
  .nf{padding-block:28px 56px}
  .nf-card{padding:16px 14px 18px}
  .nf-links{grid-template-columns:minmax(0,1fr)}
  .nf-search .tp-search__go{width:auto;padding:0 18px}
}

/* ---- search: the header suggestions and the results page ------------------------------------ */
.suggest{position:absolute;top:calc(100% + 6px);right:0;width:min(560px,calc(100vw - 32px));max-height:min(70vh,560px);overflow:auto;
  background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:2px;box-shadow:0 12px 32px rgba(0,0,0,.16);z-index:30;padding:6px 0;text-align:left}
.sg{display:flex;flex-direction:column;gap:1px;padding:8px 14px;text-decoration:none;color:var(--ink);border-left:3px solid transparent}
.sg b{font-weight:600;font-size:14.5px;line-height:1.35}
.sg .t{font-size:13px;color:var(--ink-2)}
.sg .m{font-size:12.5px;color:var(--muted);line-height:1.5}
.sg .m code{font-size:11.5px;padding:0 4px;margin-right:4px;word-break:break-all}
.sg:hover,.sg[aria-selected="true"]{background:var(--surface-2);border-left-color:var(--brand)}
.sg.all{font-size:13.5px;font-weight:600;color:var(--brand);border-top:1px solid var(--line-soft);margin-top:4px;padding-top:10px}
.sg-note{padding:10px 14px;font-size:13.5px;color:var(--muted)}
@media (max-width:760px){.suggest{left:0;right:auto;width:100%}}
.sg mark{background:var(--brand-soft);color:var(--ink);padding:0 1px}
/* the results page (step 15): the title with what can be found at its right, the catalogue's box
   (.cat-search, without its button: results show as you type), then one card under a blue rule:
   pills and menus to filter, a section head with the columns' names, a row a result */
.sx-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 40px;flex-wrap:wrap;padding-bottom:22px}
.sx-head h1{margin:10px 0 12px}
.sx-head .lede{max-width:44em}
.sx-count{margin:0 0 4px;font-size:14px;color:var(--muted)}
.sx-count b{font-family:var(--serif);font-size:22px;color:var(--ink);font-weight:600}
.sx-box{margin-top:0}
.sx-box .cat-search__field{border-right:1px solid var(--line-strong)}
.sx-card{border:1px solid var(--line);border-top:3px solid var(--nav-mark);background:var(--surface);padding:4px 22px 6px;margin:14px 0 64px}
.sx-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;padding:12px 0 14px}
.sx-bar .pills button span{padding:0;color:var(--muted);font-weight:500;margin-left:3px}
.sx-bar .pills button:disabled{color:var(--faint);cursor:default}
.sx-fs{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin-left:auto}
.sx-sel{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.sx-sel select{font:inherit;font-size:14px;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:2px;padding:6px 10px;max-width:280px}
.sx-reset{border:0;background:none;padding:0;font:inherit;font-size:14px;font-weight:600;color:var(--brand);cursor:pointer}
.sx-reset:hover{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
/* a section's head and its rows share three columns: what it is, its topic, its years (or date) */
.sx-sec,.sx-r{display:grid;grid-template-columns:minmax(0,1fr) 210px 130px;column-gap:28px}
.sx-sec{align-items:end;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  padding:16px 0 8px;border-bottom:1px solid var(--line-strong)}
.sx-sec i{font-style:normal;letter-spacing:0;color:var(--faint);margin-left:4px}
.sx-sec .sx-tp{font-size:inherit;color:inherit;padding:0}
.sx-sec .sx-y{text-align:right}
#notehits .sx-rows{margin-bottom:12px}
.sx-rows{list-style:none;margin:0;padding:0}
.sx-rows li{border-bottom:1px solid var(--line)}
.sx-r{row-gap:4px;align-items:start;margin:0 -22px;padding:12px 22px;text-decoration:none;color:var(--ink)}
.sx-r:hover{background:var(--surface-3)}
.sx-r:focus-visible{outline:2px solid var(--brand);outline-offset:-2px;background:var(--surface-3)}
.sx-m{display:flex;flex-direction:column;gap:2px;min-width:0}
.sx-m b{font-weight:600;font-size:16px;line-height:1.35}
.sx-r:hover .sx-m b{color:var(--brand);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.sx-m .t{font-size:14px;color:var(--ink-2)}
.sx-m .x{font-size:14.5px;line-height:1.55;color:var(--ink-2);max-width:60em}
.sx-m .c{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;font-size:13px;color:var(--muted)}
.sx-m .c code{font-size:11.5px;word-break:break-all}
.sx-r mark{background:var(--brand-soft);color:inherit;padding:0 1px}
.sx-tp{font-size:14px;color:var(--ink-2);padding-top:1px}
.sx-y{text-align:right;white-space:nowrap}
.sx-y b{display:block;font-size:15px;font-weight:700;color:var(--ink)}
.sx-y span{font-size:13px;color:var(--muted)}
.sx-more{margin:0;padding:16px 0 12px;text-align:center}
.sx-more button{font:inherit;font-size:14.5px;font-weight:600;color:var(--brand);background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;padding:7px 20px;cursor:pointer}
.sx-more button:hover{border-color:var(--brand)}
/* nothing to list yet: what to type, with searches to try */
.sx-empty{padding:22px 0 10px;max-width:700px}
.sx-empty h2{font-size:24px;font-weight:600;margin:0 0 8px}
.sx-empty p{margin:0 0 16px;color:var(--ink-2)}
.sx-empty code{white-space:nowrap}
.sx-wait{color:var(--muted)}
.sx-try{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sx-try span{font-size:13px;color:var(--muted);margin-right:4px}
.sx-try a{border:1px solid var(--line);border-radius:999px;padding:4px 13px;font-size:14px;color:var(--ink-2);text-decoration:none;background:var(--surface)}
.sx-try a:hover{border-color:var(--brand);color:var(--brand)}
@media (max-width:1020px){.sx-sec,.sx-r{grid-template-columns:minmax(0,1fr) 170px 110px;column-gap:20px}}
/* phones: the topic under what it is, the years at the right */
@media (max-width:760px){
  .sx-head{align-items:flex-start}
  .sx-card{padding:2px 14px 4px}
  .sx-bar .pills{flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none;border-radius:999px}
  .sx-bar .pills button{padding:5px 9px;font-size:13.5px}
  .sx-fs{margin-left:0;flex-direction:column;align-items:stretch;gap:8px;width:100%}
  .sx-sel span{flex:0 0 72px}
  .sx-sel select{flex:1;max-width:none;min-width:0}
  .sx-sec,.sx-r{grid-template-columns:minmax(0,1fr) auto;column-gap:14px}
  .sx-sec .sx-tp{display:none}
  .sx-r{grid-template-areas:"m y" "tp y";margin:0 -14px;padding:12px 14px}
  .sx-r .sx-m{grid-area:m}
  .sx-r .sx-tp{grid-area:tp;font-size:13px;color:var(--muted);padding:0}
  .sx-r .sx-y{grid-area:y}
  .sx-r .sx-tp:empty{display:none}
  .sx-empty code{white-space:normal;word-break:break-all}
}
@media (max-width:380px){.sx-bar .pills{gap:2px}.sx-bar .pills button{padding:5px 7px}.sx-bar .pills button span{margin-left:2px}}

/* ---- topic landing pages and table pages (step 9): key figures, table cards, the tree, the matrix ---- */
/* a topic's landing page (redesign of 2026-10, direction A, site/mockups/step15-topic/topic-a.html):
   the title row, the chart beside its key figures, the filter box, the tables as cards in groups */
.tp{padding-bottom:24px}
.tp-t{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 40px;flex-wrap:wrap}
.tp-t h1{font-size:40px;margin:6px 0 6px}
.tp-t .lede{font-size:17px}
.tp-n{margin:0 0 4px;text-align:right;font-size:15px;color:var(--muted);line-height:1.5}
.tp-n b{color:var(--ink)}
.tp-n span{font-size:14px;color:var(--faint)}
.tp-lead{margin-top:26px;display:grid;grid-template-columns:minmax(0,1fr) 380px;border:1px solid var(--line);border-top:3px solid var(--nav-mark);background:var(--surface)}
.tp-chart{padding:22px 26px 18px;min-width:0}
.tp-fig{display:none;margin:0}
.tp-fig.on{display:block}
.tp-fig h2{font-size:21px;font-weight:600;margin:0;line-height:1.25}
.tp-sub{margin:2px 0 4px;font-size:13.5px;color:var(--muted)}
.tp-fig figcaption{margin:8px 0 0;font-size:13.5px;color:var(--faint)}
.tp-fig figcaption a{color:var(--brand)}
.tp-figs{border-left:1px solid var(--line);background:var(--surface-2);padding:10px 0;min-width:0}
.tp-cap{margin:8px 20px 6px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tp-kf{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 12px;align-items:baseline;border-left:3px solid transparent;
  padding:9px 18px 9px 17px;color:var(--ink);text-decoration:none}
.tp-kf:hover{background:var(--surface)}
.tp-kf.on{background:var(--surface);border-left-color:var(--brand)}
.tp-kf .l{font-size:14.5px;font-weight:600}
.tp-kf.on .l{color:var(--brand)}
.tp-kf .v{font-family:var(--serif);font-size:20px;font-weight:600;text-align:right;white-space:nowrap}
.tp-kf .v small{font-size:.6em;margin-left:2px;color:var(--ink-2)}
.tp-kf .m{grid-column:1/-1;font-size:13.5px;color:var(--faint)}
.tp-note{margin:10px 0 0;font-size:14px;color:var(--faint);max-width:70em}
/* the filter box: as the catalogue's, the button lists every matching series in the topic */
.tp-search{display:flex;margin-top:22px;min-height:58px;box-shadow:0 1px 3px rgba(11,37,69,.07)}
.tp-search__field{flex:1;display:flex;align-items:center;gap:12px;padding:0 12px 0 18px;border:1px solid var(--line-strong);border-right:0;
  background:var(--surface);color:var(--muted);min-width:0}
.tp-search:focus-within .tp-search__field{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.tp-search__field input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:17px;color:var(--ink);padding:14px 0}
.tp-search__field input::placeholder{color:var(--faint)}
.tp-search__field input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.tp-search__count{font-size:13px;font-weight:700;color:var(--brand);background:var(--brand-soft);padding:3px 10px;border-radius:999px;white-space:nowrap}
.tp-search__count.none{color:var(--def);background:none;border:1px solid var(--line)}
.tp-search__clear{border:0;background:none;color:var(--muted);cursor:pointer;padding:6px;display:flex;border-radius:50%}
.tp-search__clear:hover{color:var(--brand);background:var(--surface-2)}
.tp-search__key{font-family:var(--mono);font-size:12px;line-height:1.4;border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:3px;padding:1px 8px;color:var(--muted)}
.tp-search:focus-within .tp-search__key{display:none}
.tp-search__go{flex:none;border:0;background:var(--navy);color:#FFFFFF;font:inherit;font-weight:600;font-size:15.5px;padding:0 26px;display:flex;align-items:center;gap:10px;cursor:pointer}
.tp-search__go:hover{background:var(--navy-2)}
:root[data-theme="dark"] .tp-search__go{background:var(--brand);color:var(--brand-ink)}
.tp-hint{margin:8px 0 0;font-size:13.5px;color:var(--muted)}
.tp-hint a{color:var(--brand)}
#flat{margin-top:18px}
/* the groups and their table cards */
.tp-grp{margin-top:40px;scroll-margin-top:100px}
.tp-grp__h{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:16px}
.tp-grp h2{font-size:26px;font-weight:700;margin:0}
.tp-grp__h p{margin:3px 0 0;color:var(--muted);font-size:15px}
.tp-cards{display:grid;gap:18px}
.tp-cards.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tp-cards.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tp-card{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--surface);padding:18px 20px 16px;text-decoration:none;color:var(--ink);min-width:0}
.tp-card:hover{border-color:var(--line-strong);box-shadow:0 2px 8px rgba(11,37,69,.08)}
.tp-card:hover b{color:var(--brand)}
.tp-card b{font-family:var(--serif);font-size:20px;font-weight:600;line-height:1.25}
.tp-card .d{margin-top:6px;font-size:15px;color:var(--ink-2);line-height:1.45}
.tp-card .s{margin-top:10px;font-size:13.5px;color:var(--muted)}
.tp-card .src{margin-top:4px;font-size:13.5px;color:var(--faint);line-height:1.4}
.tp-card .go{margin-top:auto;padding-top:12px;font-size:14px;font-weight:600;color:var(--brand);display:inline-flex;align-items:center;gap:6px}
.tp-card.dead b{color:var(--ink-2)}
.tp-stp{margin-top:6px;font-size:13.5px;color:var(--faint);display:inline-flex;align-items:center;gap:6px}
.tp-stp i{width:7px;height:7px;border-radius:50%;border:1.5px solid var(--faint)}
.tp-card.miss{display:none}
.tp-fold{display:none;align-items:center;gap:6px;background:none;border:1px solid var(--brand);color:var(--brand);font:inherit;font-size:14.5px;padding:7px 16px;cursor:pointer;white-space:nowrap}
.js .tp-fold{display:inline-flex}
.tp-fold:hover{background:var(--brand);color:var(--surface)}
.tp-fold .c,.tp-grp.open .tp-fold .o{display:none}
.tp-grp.open .tp-fold .c{display:inline}
.tp-grp.open .tp-fold svg{transform:rotate(180deg)}
.js .tp-grp.folded:not(.open):not(.filt) .tp-cards{display:none}
.js .tp-grp.filt .tp-fold{display:none}
/* a table without a page of its own: its rows fold out under its card, across the row */
details.tp-card{cursor:default}
details.tp-card > summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;flex:1}
details.tp-card > summary::-webkit-details-marker{display:none}
details.tp-card[open]{grid-column:1/-1}
details.tp-card[open] > summary .go svg{transform:rotate(180deg)}
@media (max-width:1100px){.tp-lead{grid-template-columns:minmax(0,1fr) 320px}.tp-cards.c4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .tp-lead{grid-template-columns:minmax(0,1fr)}
  .tp-figs{border-left:0;border-top:1px solid var(--line)}
  .tp-cards.c3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tp-n{text-align:left}
}
@media (max-width:599px){
  .tp-t h1{font-size:34px}
  .tp-chart{padding:16px 14px 12px}
  .tp-cards.c3,.tp-cards.c4{grid-template-columns:minmax(0,1fr)}
  .tp-search__go{width:58px;padding:0;justify-content:center}
  .tp-search__lbl,.tp-search__key{display:none}
  .tp-search__field{padding-left:14px}
  .tp-grp__h{flex-wrap:wrap}
}
.flat{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.flat li{border-bottom:1px solid var(--line-soft)}
.flat a{display:flex;justify-content:space-between;gap:16px;padding:9px 0;text-decoration:none;font-size:14.5px}
.flat a b{font-weight:600;color:var(--brand)}
.flat a small{display:block;font-size:12.5px;color:var(--muted)}
.flat a > span:last-child{font-size:13px;color:var(--muted);white-space:nowrap}
.t-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 28px;margin:6px 0 16px}
.t-bar .acts{margin-left:auto;display:flex;gap:20px;align-items:center;padding-bottom:6px}
/* a table page (step 15, gate 5): the indicators as a list at the left, the chart of the one picked at the right */
.tx{display:grid;grid-template-columns:440px minmax(0,1fr);border:1px solid var(--line);border-top:3px solid var(--nav-mark);background:var(--surface)}
.tx-list{display:flex;flex-direction:column;min-width:0;background:var(--surface-2);border-right:1px solid var(--line)}
.tx-lh,.tx-row{display:grid;grid-template-columns:minmax(0,1fr) 74px 64px;gap:0 10px;align-items:baseline}
.tx-lh{padding:12px 16px 8px 19px;border-bottom:1px solid var(--line-strong);font-size:12.5px;font-weight:600;color:var(--muted)}
.tx-lh span:not(:first-child){text-align:right;line-height:1.2}
.tx-rows{flex:1 1 0;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.tx-rows[hidden],.tx-row[hidden]{display:none}
.tx-row{padding:8px 16px;border-left:3px solid transparent;border-bottom:1px solid var(--line-soft);cursor:pointer}
.tx-row:hover{background:var(--surface)}
.tx-row.on{background:var(--surface);border-left-color:var(--brand)}
.tx-row .l{display:flex;gap:6px;align-items:baseline;font-size:14px;line-height:1.3;min-width:0}
.tx-row a{color:var(--ink);text-decoration:none}
.tx-row a:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.tx-row.on a{color:var(--brand)}
.tx-row .v{text-align:right;font-weight:600;font-size:14px;white-space:nowrap;font-variant-numeric:tabular-nums}
.tx-row .v small{font-weight:400;color:var(--muted);font-size:11.5px;margin-left:3px}
.tx-row .c{text-align:right;color:var(--muted);font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums}
.tx-row.l0 .l{font-weight:700}
.tx-row.l1 .l{font-weight:600}
.tx-row.l2 .l{padding-left:calc(var(--d,1) * 22px)}
.tx-row.l2 a{color:var(--ink-2)}
.tx-row.l2.on a{color:var(--brand)}
.tx-row.old a,.tx-row.old .v{color:var(--muted)}
.tx-row .end{font-size:11px;font-weight:600;color:var(--muted);border:1px solid var(--line);padding:0 4px;white-space:nowrap}
.tx-tg{flex:none;display:inline-grid;place-items:center;width:17px;height:17px;border:1px solid var(--line-strong);border-radius:2px;background:var(--surface);
  color:var(--ink-2);font:inherit;font-size:12px;font-weight:400;line-height:1;padding:0;cursor:pointer;transform:translateY(2px)}
.tx-tg:hover{border-color:var(--brand);color:var(--brand)}
.tx-sec{margin:0;padding:14px 16px 6px 19px;font-size:12.5px;font-weight:700;color:var(--muted);border-bottom:1px solid var(--line)}
.tx-lf{display:flex;justify-content:space-between;align-items:center;padding:9px 16px 10px 19px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.tx-lf .linkbtn{font-size:13px}
.tx-plot{margin:0;padding:20px 26px 16px;min-width:0;display:flex;flex-direction:column}
.tx-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px 20px}
.tx-head h2{margin:0;font-size:24px;font-weight:600;line-height:1.2}
.tx-sub{margin:3px 0 0;font-size:14px;color:var(--muted)}
.tx-sub b{color:var(--ink);font-weight:600}
.tx-open{flex:none;font-size:14px;font-weight:600;color:var(--brand);text-decoration:none;padding-top:5px;white-space:nowrap}
.tx-open:hover{text-decoration:underline;text-underline-offset:3px}
.tx-show{margin:14px 0 0}
.tx-show .pills,.tx-under .pills{display:inline-flex}
.tx-plot .ec{height:440px;margin-top:6px}
.tx-under{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:4px}
.tx-plot figcaption{margin:auto 0 0;padding-top:10px;border-top:1px solid var(--line-soft);font-size:13.5px;color:var(--faint)}
.tx-under{margin-bottom:12px}
@media (max-width:1100px){.tx{grid-template-columns:380px minmax(0,1fr)}}
@media (max-width:860px){
  .tx{grid-template-columns:minmax(0,1fr)}
  .tx-plot{order:-1;padding:16px 14px 12px}
  .tx-list{border-right:0;border-top:1px solid var(--line)}
  .tx-rows{flex:none;max-height:420px}
  .tx-plot .ec{height:300px}
  .tx-head h2{font-size:20px}
}
@media (max-width:420px){.tx-lh,.tx-row{grid-template-columns:minmax(0,1fr) 72px 56px;gap:0 8px}.tx-row,.tx-lh{padding-right:12px}}
/* a short table (six indicators or fewer): the indicators as tabs across the top, each its name over
   its latest figure and change; the chart the full width under them */
.tx.few{grid-template-columns:minmax(0,1fr)}
.tx.few .tx-list{border-right:0;border-bottom:1px solid var(--line);border-top:0}
.tx.few .tx-lh,.tx.few .tx-lf{display:none}
.tx.few .tx-rows{flex:none;max-height:none;overflow:visible;display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}
@media (max-width:860px){.tx.few .tx-rows{grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr))}}
.tx.few .tx-rows[hidden]{display:none}
.tx.few .tx-sec{grid-column:1/-1}
.tx.few .tx-row{grid-template-columns:minmax(0,1fr) auto;align-content:start;gap:4px 12px;padding:12px 18px 11px;border-left:0;border-top:3px solid transparent;
  border-bottom:0;border-right:1px solid var(--line-soft)}
.tx.few .tx-row.on{border-top-color:var(--brand)}
.tx.few .tx-row .l{grid-column:1/-1}
.tx.few .tx-row .v{text-align:left}
.tx.few .tx-row .c:not(.none):not(:empty)::after{content:" on a year earlier*"}
.tx.few .tx-plot{order:0}
.tree{width:100%;border-collapse:collapse;font-size:14.5px}
.tree th{font-size:13px;font-weight:600;color:var(--muted);text-align:right;padding:0 0 8px 14px;border-bottom:1px solid var(--ink);background:none;position:static;white-space:nowrap}
.tree th:first-child{text-align:left;padding-left:0}
.tree td{padding:9px 0 9px 14px;border-bottom:1px solid var(--line-soft);text-align:right;white-space:nowrap;vertical-align:middle}
.tree td:first-child{text-align:left;padding-left:0;white-space:normal}
.tree td a{text-decoration:none;color:var(--ink)}
.tree td a:hover{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.tree .l0 td{font-weight:700}
.tree .l2 td:first-child{padding-left:26px}
.tree .l2 td{font-size:14px;color:var(--ink-2)}
.tree .sec td{padding-top:18px;font-size:12.5px;font-weight:700;color:var(--muted);border-bottom:1px solid var(--line);text-align:left}
.tree .tg{display:inline-grid;place-items:center;width:18px;height:18px;margin-right:6px;border:1px solid var(--line);border-radius:2px;background:var(--surface);cursor:pointer;vertical-align:-3px;color:var(--ink-2);font:inherit;font-size:12px;line-height:1;padding:0}
.js .tree tr.l2:not(.shown){display:none}
.tree .v{font-weight:600}
.tree .v small{font-weight:400;color:var(--muted);font-size:12px;margin-left:3px}
.tree .old td,.tree .old td a{color:var(--muted)}   /* a series that has stopped: its source publishes no more */
.tree .end{font-size:11.5px;font-weight:600;color:var(--muted);border:1px solid var(--line);padding:0 5px;margin-left:6px;vertical-align:1px;white-space:nowrap}
.tree td.c,.tree td.p{color:var(--muted);font-size:13.5px}
.tree .sp svg{display:block;width:96px;height:24px;margin-left:auto;overflow:visible}
.combo{display:none}
.combo.on{display:table-row-group}
@media (max-width:640px){
  .tree .sp,.tree th.sp,.tree .p,.tree th.p{display:none}
  .t-bar .acts{margin-left:0}
}
/* a matrix page (step 15): the grid in one card under a blue rule, the period shown and its size at
   its top; the names stay at the left while a wide grid scrolls; a phone shows one column beside the total */
.mx-card{border:1px solid var(--line);border-top:3px solid var(--nav-mark);background:var(--surface);min-width:0}
.mx-ch{display:flex;justify-content:space-between;align-items:baseline;gap:4px 20px;flex-wrap:wrap;padding:16px 20px 12px}
.mx-ch h2{font-size:24px;font-weight:600;line-height:1.2}
.mx-ch p{margin:0;font-size:13.5px;color:var(--muted)}
.mx-wrap{overflow-x:auto}
.mx{width:100%;border-collapse:collapse;font-size:14px}
.mx th{font-size:12.5px;font-weight:600;color:var(--muted);text-align:right;padding:10px 0 9px 10px;border-block:1px solid var(--line);border-bottom-color:var(--line-strong);
  vertical-align:bottom;white-space:normal;line-height:1.25;background:var(--surface-2);position:static}
.mx td{padding:8px 0 8px 10px;border-bottom:1px solid var(--line-soft);text-align:right;white-space:nowrap}
.mx th:first-child,.mx td:first-child{text-align:left;padding-left:20px;position:sticky;left:0;z-index:1}
.mx td:first-child{white-space:normal;min-width:220px;background:var(--surface)}
.mx th:last-child,.mx td:last-child{padding-right:20px}
.mx tbody tr:last-child td{border-bottom:0}
.mx tbody tr:not(.sec):hover td{background:var(--surface-3)}
.mx td a{text-decoration:none;color:inherit}
.mx td a:hover{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.mx .sl{font-weight:700;background:var(--surface-2)}
.mx th.sl{color:var(--ink-2)}
.mx .hd td{font-weight:700;color:var(--ink)}
.mx .l2 td:first-child{padding-left:42px;color:var(--ink-2)}
.mx .l2 td{color:var(--ink-2)}
.mx .sec td{padding-top:20px;font-size:12.5px;font-weight:700;color:var(--muted);border-bottom:1px solid var(--line)}
.mx td:first-child small{font-weight:400;color:var(--muted);font-size:12px;margin-left:4px}
.pick{display:none}
@media (max-width:760px){
  .pick{display:flex}
  .mx .pc{display:none}
  .mx .pc.sel{display:table-cell}
  .mx th:first-child,.mx td:first-child{min-width:0;position:static}
  .mx-ch{padding:14px 14px 10px}
  .mx-ch h2{font-size:21px}
  .mx th:first-child,.mx td:first-child{padding-left:14px}
  .mx th:last-child,.mx td:last-child{padding-right:14px}
  .mx .l2 td:first-child{padding-left:28px}
}
.inl-body{margin:10px 0 6px}
.inl-tools{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;margin-bottom:8px;font-size:13.5px;color:var(--muted)}
.inl-tools span{margin-right:auto}
.inl-body .tree{font-size:14px}
.inl-body .note{margin-top:10px}
.tree td.v{white-space:normal}
/* the credit ratings page (step 10; step 15): the count at the right of the title; one card under a
   blue rule, the chart at the left and each agency's latest rating at the right (picking one adds or
   removes its line); the history by agency under pills; the notes */
.cr-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 40px;flex-wrap:wrap;padding-bottom:26px}
.cr-head h1{margin:10px 0 12px}
.cr-head .lede{max-width:44em}
.cr-count{margin:0 0 4px;font-size:14px;color:var(--muted)}
.cr-count b{font-family:var(--serif);font-size:22px;color:var(--ink);font-weight:600;margin-right:4px}
.cr-card{display:grid;grid-template-columns:minmax(0,1fr) 340px;border:1px solid var(--line);border-top:3px solid var(--nav-mark);background:var(--surface)}
.cr-plot{margin:0;padding:20px 26px 14px;min-width:0;display:flex;flex-direction:column}
.cr-plot h2{font-size:24px;font-weight:600;line-height:1.2;margin:0}
.cr-sub{margin:3px 0 0;font-size:14px;color:var(--muted)}
.cr .cr-chart{height:440px;margin-top:8px}
.cr-marks{display:flex;flex-wrap:wrap;gap:4px 20px;font-size:13px;color:var(--muted);margin:2px 0 4px}
.cr-marks span{display:inline-flex;align-items:center;gap:6px}
.cr-marks svg{width:12px;height:12px;overflow:visible}
.cr-plot figcaption{display:flex;justify-content:space-between;gap:12px;margin-top:auto;padding-top:10px;border-top:1px solid var(--line-soft);font-size:13.5px;color:var(--faint)}
.cr-plot figcaption .by{white-space:nowrap}
.cr-now{border-left:1px solid var(--line);background:var(--surface-2);padding:10px 0 14px;min-width:0;display:flex;flex-direction:column}
.cr-cap{margin:8px 20px 6px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cr-key{display:flex;flex-direction:column}
.cr-key button{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:baseline;text-align:left;font:inherit;color:var(--ink);
  background:none;border:0;border-left:3px solid transparent;border-bottom:1px solid var(--line-soft);padding:12px 20px 12px 17px;cursor:pointer}
.cr-key button:last-child{border-bottom:0}
.cr-key button:hover{background:var(--surface)}
.cr-key button[aria-pressed="true"]{background:var(--surface);border-left-color:var(--k)}
.cr-key .n{font-size:15px;font-weight:600}
.cr-key .n i{display:inline-block;width:14px;height:3px;margin-right:8px;vertical-align:4px;background:var(--line-strong)}
.cr-key button[aria-pressed="true"] .n i{background:var(--k)}
.cr-key b{font-family:var(--serif);font-size:26px;font-weight:600;line-height:1.1;text-align:right;white-space:nowrap}
.cr-key .m{grid-column:1/-1;font-size:13px;color:var(--muted)}
.cr-tip{margin:auto 20px 0;padding-top:12px;font-size:13.5px;color:var(--faint)}
.cr-hb{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 24px;flex-wrap:wrap;margin:48px 0 14px}
.cr-hb h2{font-size:26px;margin:0}
.cr-hb p{margin:4px 0 0;font-size:14.5px;color:var(--muted)}
.cr-tabs button[aria-selected="true"]{background:var(--surface);font-weight:700;box-shadow:0 1px 2px rgba(11,37,69,.12)}
.cr-tabs button span{padding:0;margin-left:6px;color:var(--muted);font-weight:500}
.cr-tp{border:1px solid var(--line);background:var(--surface)}
.cr-table{width:100%;border-collapse:collapse;font-size:14.5px}
.cr-table th{font-size:12.5px;font-weight:600;color:var(--muted);text-align:left;padding:10px 14px 9px 0;border-bottom:1px solid var(--line-strong);background:var(--surface-2);position:static}
.cr-table td{text-align:left;white-space:normal;padding:9px 14px 9px 0;border-bottom:1px solid var(--line-soft);vertical-align:baseline;color:var(--ink-2)}
.cr-table tr:last-child td{border-bottom:0}
.cr-table th:first-child,.cr-table td:first-child{padding-left:20px}
.cr-table th:last-child,.cr-table td:last-child{padding-right:20px}
.cr-table td:first-child{width:9.5em;white-space:nowrap;font-variant-numeric:tabular-nums}
.cr-table td:nth-child(2){width:11em;white-space:nowrap;color:var(--ink)}
.cr-table b{font-weight:700}
.cr-table .o{color:var(--muted);font-size:13.5px}
.cr-table .s{text-align:right}
.cr-table .s a{color:var(--brand);text-decoration:none}
.cr-table .s a:hover{text-decoration:underline;text-underline-offset:3px}
.cr-about{margin:44px 0 64px;max-width:46em}
.cr-about h2{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--line-strong)}
.cr-about ul{margin:0;padding-left:18px;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.cr-about li{margin:0 0 6px}
.cr-about a{color:var(--brand);text-underline-offset:3px}
/* the yield curve page (step 17): the card shares the credit ratings page's frame (cr-card, cr-plot, cr-now) */
.yc .yc-chart{height:440px;margin-top:8px}
.yc-walk{display:flex;align-items:center;gap:12px;margin:4px 0 6px;font-size:13.5px;color:var(--muted)}
.yc-walk input[type=range]{flex:1;min-width:0;accent-color:var(--c1);margin:0;height:22px}
.yc-play{width:30px;height:30px;flex:none;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--ink);cursor:pointer}
.yc-play:hover{border-color:var(--ink-2)}
.yc-play .i-s,.yc-play.on .i-p{display:none}
.yc-play.on .i-s{display:block}
.yc-when{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink-2);min-width:9.5em}
.yc-latest{font:inherit;font-size:13px;padding:3px 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);cursor:pointer}
.yc-latest[hidden]{display:none}
.yc-cmp{display:flex;flex-wrap:wrap;gap:6px;padding:0 20px 12px}
.yc-cmp button{font:inherit;font-size:13.5px;line-height:1.3;padding:5px 11px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);cursor:pointer}
.yc-cmp button:hover{border-color:var(--ink-2)}
.yc-cmp button[aria-pressed=true]{border-color:var(--ink);background:var(--ink);color:var(--surface);font-weight:600}
.yc-any{display:flex;align-items:center;gap:8px;width:100%;margin-top:4px;font-size:13.5px;color:var(--muted)}
.yc-any input{font:inherit;font-size:13.5px;padding:4px 8px;border:1px solid var(--line);border-radius:2px;background:var(--surface);color:var(--ink);color-scheme:light dark}
.yc-us{display:flex;align-items:center;gap:8px;margin-top:6px}
.yc-us i{width:16px;height:0;border-top:2px dashed currentColor}
.yc-us[hidden]{display:none}
.yc-key li.us i{height:0;background:none;border-top:2px dashed var(--ink-2)}
.yc-key{list-style:none;margin:0 0 10px;padding:4px 20px 12px;border-bottom:1px solid var(--line-soft)}
.yc-key li{display:flex;align-items:center;gap:8px;font-size:14px;padding:4px 0}
.yc-key i{width:14px;height:3px;flex:none;background:var(--k)}
.yc-key b{font-weight:600}
.yc-key small{color:var(--muted);font-size:13px}
.yc-key button{margin-left:auto;font:inherit;font-size:16px;line-height:1;width:22px;height:22px;border:0;border-radius:50%;background:none;color:var(--muted);cursor:pointer}
.yc-key button:hover{background:var(--surface);color:var(--ink)}
.yc-figs{margin:0;padding:0 20px 8px}
.yc-tab{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.yc-tab th{font-size:12px;font-weight:600;color:var(--muted);text-align:right;padding:0 0 6px;border-bottom:1px solid var(--line-strong);white-space:nowrap}
.yc-tab td{text-align:right;padding:6px 0 5px;border-bottom:1px solid var(--line-soft);color:var(--ink);white-space:nowrap}
.yc-tab th:first-child,.yc-tab td:first-child{text-align:left;color:var(--ink-2)}
.yc-tab td:nth-child(2){font-weight:600}
.yc-tab td:nth-child(3){color:var(--muted)}
.yc-tab tfoot td{border-top:2px solid var(--line-strong);border-bottom:0;padding-top:8px;font-weight:600}
.yc-tab tfoot td:first-child{font-weight:500}
.yc-tab tfoot tr + tr td{border-top:1px solid var(--line-soft)}
.yc-tab tfoot small{display:block;font-size:12.5px;font-weight:400;color:var(--muted)}
.yc-two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.yc-hist{margin:0;min-width:0;border:1px solid var(--line);background:var(--surface);padding:16px 20px 12px;display:flex;flex-direction:column}
.yc-hist h3{margin:0 0 4px;font-size:18px;font-weight:600}
.yc-hist .ec{height:300px}
.yc-hist figcaption{display:flex;justify-content:space-between;gap:12px;margin-top:auto;padding-top:10px;border-top:1px solid var(--line-soft);font-size:13.5px;color:var(--faint)}
.yc-hist figcaption .by{white-space:nowrap}
.yc .cr-about{margin-top:40px}
/* the world rates page (step 18): the board, its folding groups, the range buttons, the Pink Sheet cards */
.wr-board{border:1px solid var(--line);border-top:3px solid var(--nav-mark);background:var(--surface);padding:6px 24px 14px}
.wr-tab{width:100%;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums}
.wr-tab thead th{font-size:12px;font-weight:600;color:var(--muted);text-align:right;padding:12px 0 8px 16px;border-bottom:1px solid var(--line-strong);white-space:nowrap}
.wr-tab thead th:first-child{text-align:left;padding-left:0}
.wr-tab td{text-align:right;padding:7px 0 7px 16px;border-bottom:1px solid var(--line-soft);color:var(--muted);white-space:nowrap;vertical-align:middle}
.wr-tab tbody th{text-align:left;font-weight:400;padding:7px 0;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.wr-tab tbody th a{color:var(--ink);font-weight:600;text-decoration:none}
.wr-tab tbody th a:hover{text-decoration:underline;text-underline-offset:3px}
.wr-tab tbody th > small{margin-left:8px;font-size:13.5px;color:var(--muted)}
.wr-tab .wr-v{color:var(--ink);font-weight:600}
.wr-tab .wr-d small{display:block;font-size:12px;color:var(--faint)}
.wr-tab tr.wr-g th{padding:14px 0 0;border-bottom:1px solid var(--line-strong)}
.wr-tab tr.wr-g button{display:flex;align-items:center;gap:8px;width:100%;padding:6px 0 7px;border:0;background:none;cursor:pointer;
  font:inherit;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:left;flex-wrap:wrap}
.wr-tab tr.wr-g button:hover{color:var(--ink)}
.wr-chev{flex:none;transition:transform .15s}
.wr-grp.wr-shut .wr-chev{transform:rotate(-90deg)}
.wr-n{display:none;margin-left:auto;white-space:nowrap;font-size:13px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--faint)}
.wr-grp.wr-shut .wr-n{display:inline}
.wr-grp.wr-shut tr:not(.wr-g){display:none}
.wr-all{float:right;margin-left:16px;font:inherit;font-size:13px;padding:3px 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);cursor:pointer}
.wr-all:hover{border-color:var(--ink-2)}
.wr-s{width:136px}
.wr-spark{display:block;margin-left:auto;overflow:visible}
.wr-spark polyline{fill:none;stroke:var(--c1);stroke-width:1.5;stroke-linejoin:round}
.wr-spark circle{fill:var(--c1)}
.wr-note{margin:12px 0 0;font-size:13.5px;color:var(--faint);max-width:52em}
.wr-note a{color:var(--brand);text-underline-offset:3px}
.wr-range{padding:0}
.wr-fs{margin:0 0 4px;font-size:13.5px;color:var(--muted)}
.wr .yc-two{row-gap:20px}
.wr-ch{margin:22px 0 10px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.wr-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.wr-key{list-style:none;display:flex;flex-wrap:wrap;gap:4px 16px;margin:4px 0 0;padding:0;font-size:13.5px;color:var(--ink-2)}
.wr-key li{display:flex;align-items:center;gap:6px}
.wr-key i{width:14px;height:3px;background:var(--k)}
.wr-c{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);background:var(--surface);padding:14px 16px 12px;color:var(--ink);text-decoration:none}
.wr-c:hover{border-color:var(--ink-2)}
.wr-cn{font-size:14.5px;font-weight:600}
.wr-cv{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}
.wr-cv small{margin-left:6px;font-size:13px;font-weight:400;color:var(--muted)}
.wr-cc{font-size:13.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.wr-cc small{color:var(--faint);font-size:12.5px}
.wr-c .wr-spark{margin:8px 0 0;width:100%;height:40px}
@media (max-width:760px){
  .wr-board{padding:4px 14px 12px;overflow-x:auto}
  .wr-tab{font-size:14px}
  .wr-tab tbody th > small{display:block;margin:0}
  .wr-s,.wr-tab td:nth-child(3),.wr-tab thead th:nth-child(3){display:none}
  .wr .yc-two{grid-template-columns:1fr}
  .wr-cards{grid-template-columns:1fr 1fr}
}
@media (max-width:460px){
  .wr-tab td,.wr-tab thead th{padding-left:10px}
  .wr-tab td:nth-child(4),.wr-tab thead th:nth-child(4){display:none}
  .wr-cards{grid-template-columns:1fr}
}
.wr .cr-about{margin-top:40px}
@media (max-width:900px){.yc-two{grid-template-columns:1fr}}
@media (max-width:560px){.yc .yc-chart{height:340px}.yc-when{min-width:0}.yc-hist .ec{height:260px}}
@media (max-width:1100px){.cr-card{grid-template-columns:minmax(0,1fr) 300px}}
@media (max-width:900px){
  .cr-card{grid-template-columns:minmax(0,1fr)}
  .cr-now{border-left:0;border-top:1px solid var(--line)}
  .cr-count{text-align:left}
}
@media (max-width:640px){
  .cr-head{align-items:flex-start}
  .cr-plot{padding:16px 14px 12px}
  .cr-plot h2{font-size:20px}
  .cr .cr-chart{height:340px}
  .cr-hb h2{font-size:23px}
  .cr-table{font-size:13.5px}
  .cr-table td,.cr-table th{padding-right:8px}
  .cr-table th:first-child,.cr-table td:first-child{padding-left:12px}
  .cr-table th:last-child,.cr-table td:last-child{padding-right:12px}
  .cr-table td:first-child,.cr-table td:nth-child(2){width:auto}
  .cr-table td:nth-child(2){white-space:normal}
  .cr-table .s a{overflow-wrap:anywhere}
  .cr-table .o{display:block;font-size:12.5px}
}

/* ---- accounts (step 11; step 15's look): the account pages (the header's links are in the header's section) ---- */
/* the small pages (account_card.html): one narrow card, centred, under a blue rule, the crumbs
   lined up with it; the fine print in a pale foot along its bottom */
.ac-page > *{max-width:520px;margin-inline:auto}
.ac{--pad:36px;margin-top:18px;border:1px solid var(--line);border-top:3px solid var(--nav-mark);background:var(--surface);padding:30px var(--pad) 28px}
.ac h1{font-size:34px;line-height:1.1;margin:0 0 12px}
.ac .lede{font-size:17px;line-height:1.55}
.ac-form{margin:24px 0 0}
.ac-form label{display:block;font-size:14px;font-weight:600;color:var(--ink-2);margin:0 0 6px}
.ac-field{display:flex;flex-direction:column;gap:12px}
.ac-field input{width:100%;min-width:0;font:inherit;font-size:17px;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:2px;padding:11px 12px}
.ac-field input::placeholder{color:var(--faint)}
.ac-field input:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:var(--brand)}
.ac-form .ac-go{display:block;width:100%}
/* the buttons: solid, as the header's Sign in (gold on hover); outlined beside it; red to delete */
.ac-go,.ac-alt,.ac-del{display:inline-block;font:inherit;font-size:15.5px;font-weight:700;line-height:1.3;border-radius:0;padding:11px 22px;
  cursor:pointer;text-decoration:none;text-align:center;overflow-wrap:anywhere}
.ac-go{background:var(--brand);color:var(--brand-ink);border:1px solid var(--brand)}
.ac-go:hover{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}
.ac-go:disabled,.ac-del:disabled{opacity:.6;cursor:wait}
.ac-alt{background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);font-weight:600}
.ac-alt:hover{border-color:var(--brand);color:var(--brand)}
.ac-del{background:var(--def);color:var(--brand-ink);border:1px solid var(--def)}
.ac-del:hover{filter:brightness(1.08)}
.ac-quiet{font:inherit;font-size:15px;font-weight:600;background:none;color:var(--brand);border:0;padding:0;cursor:pointer}
.ac-quiet:hover{text-decoration:underline;text-underline-offset:3px}
.ac-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:24px 0 0}
.ac-row form{margin:0}
.ac .ac-row > *{flex:1 1 auto}   /* in a card, buttons share the row and fill it when they wrap */
.ac .ac-row form > button{width:100%}
.ac-err{margin:12px 0 0;font-size:15px;font-weight:600;color:var(--def)}
.ac-who{font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.ac-note{margin:0;font-size:14.5px;color:var(--ink-2)}
.ac-small{font-size:14px;color:var(--muted);margin:18px 0 0;line-height:1.55}
.ac-small a{color:var(--brand);text-decoration:none}
.ac-small a:hover{text-decoration:underline;text-underline-offset:3px}
.ac-foot{margin:28px calc(-1 * var(--pad)) -28px;padding:16px var(--pad) 18px;background:var(--surface-2);border-top:1px solid var(--line)}
.ac-foot .ac-small{margin:8px 0 0}
.ac-foot a{text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.ac-foot > :first-child{margin-top:0}
/* Profile settings: the facts as rows, sign out, and Delete your account in the foot */
.ac-facts{margin:22px 0 0;border-top:1px solid var(--line)}
.ac-facts div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px}
.ac-facts dt{color:var(--muted);flex-shrink:0}
.ac-facts dd{margin:0;font-weight:600;text-align:right;overflow-wrap:anywhere;min-width:0}
.ac-facts a.ac-link{color:var(--brand);text-decoration:none}
.ac-facts a.ac-link:hover{text-decoration:underline;text-underline-offset:3px}
.ac-danger h2{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0}
.ac-danger p{margin:6px 0 0;font-size:14.5px;color:var(--ink-2)}
.ac-danger details{margin:12px 0 0}
.ac-danger summary{list-style:none;cursor:pointer;display:inline-block;font-size:15px;font-weight:600;color:var(--def)}
.ac-danger summary::-webkit-details-marker{display:none}
.ac-danger summary:hover{text-decoration:underline;text-underline-offset:3px}
.ac-danger details[open] summary{display:none}
.ac-confirm{background:var(--surface);border:1px solid var(--line);padding:14px 16px}
.ac-confirm p{margin:0;color:var(--ink)}
.ac-confirm .ac-row{margin-top:12px}
@media (max-width:760px){
  .ac{--pad:20px;padding-top:24px;margin-top:14px}
  .ac h1{font-size:30px}
}

/* saved series (step 13): Save on a series page and its popups, the account menu, Saved series */
.sv-row{margin:14px 0 0;position:relative}
.sv{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:15px;font-weight:600;background:var(--surface);color:var(--ink);border:1px solid var(--axis);padding:10px 18px;cursor:pointer}
.sv:hover{border-color:var(--accent);color:var(--accent)}
.sv[aria-pressed="true"]{color:var(--brand);border-color:var(--brand)}
.sv[aria-pressed="true"] svg{fill:currentColor}
.sv:disabled{opacity:.6;cursor:wait}
.sv-pop{position:absolute;left:0;top:calc(100% + 8px);z-index:30;width:340px;max-width:calc(100vw - 48px);background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:3px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:18px 20px}
.sv-pop h2{font-size:18px;margin:0 28px 6px 0}
.sv-pop p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.5}
.sv-pop .ac-row{margin-top:14px;gap:18px}
.sv-pop .ac-go{padding:10px 16px}
.sv-pop .ac-quiet{text-decoration:none}
.sv-pop .ac-small{margin-top:10px;font-size:13px}
.sv-pop-x{position:absolute;right:8px;top:8px;display:grid;place-items:center;width:30px;height:30px;background:none;border:0;border-radius:3px;color:var(--muted);cursor:pointer}
.sv-pop-x:hover{background:var(--surface-2);color:var(--ink)}
.toast a{color:inherit;font-weight:600;text-underline-offset:3px}
/* the menu under the header's account icon, at the header's right edge */
.acct-menu{position:absolute;right:calc(max(0px, (100% - 1280px) / 2) + 40px);top:calc(100% + 1px);z-index:60;min-width:210px;background:var(--surface);border:1px solid var(--line);border-radius:3px;box-shadow:0 10px 30px rgba(0,0,0,.2);padding:6px 0}
.acct-menu[hidden]{display:none}
@media (max-width:760px){.acct-menu{right:20px}}
.acct-menu a{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:10px 16px;color:var(--ink);text-decoration:none;font-size:15px;font-weight:500}
.acct-menu a:hover,.acct-menu a:focus-visible{background:var(--surface-2);color:var(--brand)}
.acct-menu a span{color:var(--muted);font-size:13.5px;font-weight:400}
/* the Saved series page: the head, then one card under a blue rule: the list at the left, the update
   emails setting in a pale panel at its right (under it below 1020 px) */
.sv-head{padding-bottom:22px}
.sv-head h1{margin:10px 0 12px}
.sv-head .lede{max-width:44em}
.sv-card{display:grid;grid-template-columns:minmax(0,1fr) 320px;border:1px solid var(--line);border-top:3px solid var(--nav-mark);background:var(--surface)}
.sv-main{padding:18px 24px 20px;min-width:0}
.sv-list td.x{width:1%;padding-left:12px}
.sv-x{display:grid;place-items:center;width:30px;height:30px;margin-left:auto;color:var(--faint);background:none;border:0;border-radius:3px;cursor:pointer}
.sv-x:hover{color:var(--def);background:var(--surface-2)}
.sv-list .badge{margin-left:8px}
.sv-list .t{display:block;font-size:13px;font-weight:400;color:var(--muted);margin-top:2px}
.sv-note{margin:12px 0 0;color:var(--muted);font-size:14px}
.sv-main .sv-note + .sv-note{margin-top:2px}
.sv-mail{padding:20px 24px 24px;border-left:1px solid var(--line);background:var(--surface-2);scroll-margin-top:84px}
.sv-mail h2{font-size:20px;margin:0 0 6px}
.sv-mail p.d{margin:0;font-size:14.5px;color:var(--ink-2)}
.sv-mail .pills{display:inline-flex;margin:16px 0 0}
.sv-empty p{margin:0;font-size:16px;color:var(--ink-2);max-width:36em}
.sv-empty ul{list-style:none;margin:16px 0 0;padding:0;border-top:1px solid var(--line);max-width:36em}
.sv-empty li{border-bottom:1px solid var(--line)}
.sv-empty a{display:block;padding:10px 0;font-weight:600;color:var(--brand);text-decoration:none}
.sv-empty a:hover{text-decoration:underline;text-underline-offset:3px}
.sv-out{max-width:520px;border:1px solid var(--line);border-top:3px solid var(--nav-mark);background:var(--surface);padding:24px 28px 26px}
.sv-out .ac-row{margin-top:18px}
@media (max-width:1020px){
  .sv-card{grid-template-columns:minmax(0,1fr)}
  .sv-mail{border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:760px){
  .sv-main{padding:6px 16px 18px}
  .sv-mail{padding:18px 16px 20px}
  .sv-out{padding:20px}
}
@media (max-width:640px){
  .sv-list tr{grid-template-columns:auto auto minmax(0,1fr) auto;grid-template-areas:"n n n s" "v c p x"}
  .sv-list .p{text-align:left}
  .sv-list td.x{grid-area:x;width:auto;padding:0;text-align:right}
}

/* ---- release calendar (step 14): the /calendar/ page ----------------------------------------- */
/* the page: a month grid of weekdays with a day pane, a year of small months, a list by week on phones */
.cal-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin:0 0 18px}
.cal-nav{display:flex;align-items:center;gap:4px}
.cal-nav h2{font-size:26px;margin:0 10px 0 0;min-width:8.6em}
.cal-nav button{font:inherit;width:34px;height:34px;display:grid;place-items:center;background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:2px;cursor:pointer}
.cal-nav button:hover:not(:disabled){border-color:var(--ink-2)}
.cal-nav button:disabled{opacity:.35;cursor:default}
.cal-nav .today{width:auto;padding:0 12px;font-size:14px;margin-left:8px}
.cal-key{display:flex;gap:6px;flex-wrap:wrap}
.cal-key button{font-size:13.5px;color:var(--ink-2)}
.cal-key button:not(.off) i{background:var(--k)}

.cal{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:32px;align-items:start}
.grid{border-top:1px solid var(--line);border-left:1px solid var(--line-soft)}
.grid .dow,.grid .wk{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.grid .dow span{font-size:13px;color:var(--muted);padding:8px 10px;border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line)}
.day{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:4px;min-height:122px;padding:8px 8px 10px;
  border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);cursor:pointer;position:relative;min-width:0}
.day:hover{background:var(--surface-2)}
.day:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.day .n{font-size:14px;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums;line-height:24px;height:24px;
  display:flex;align-items:center;gap:8px}
.day.out{cursor:default;background:none}
.day.past .n{color:var(--muted);font-weight:500}
.day.out .n{color:var(--faint);font-weight:400}
.day.is-today .n b{background:var(--brand);color:var(--brand-ink);min-width:24px;text-align:center;border-radius:2px;padding:0 4px}
.day.is-today .n small{font-size:12px;font-weight:600;color:var(--brand)}
.day.rc-sel{box-shadow:inset 0 0 0 2px var(--brand);background:var(--brand-soft)}
.rc-ev{font-size:12.5px;line-height:1.3;padding:3px 6px 4px 8px;border-left:3px solid var(--k);background:var(--surface-2);
  color:var(--ink);display:flex;justify-content:space-between;gap:6px;min-width:0}
.rc-ev{flex-direction:column;gap:0}
.rc-ev span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-ev b{font-weight:700;font-variant-numeric:tabular-nums;font-size:13px}
.day.rc-sel .rc-ev{background:var(--surface)}
.rc-ev.exp{background:none;border-left-style:dotted;color:var(--ink-2);padding-block:2px}
.rc-ev.hide{display:none}
.day.hol{background:repeating-linear-gradient(135deg,transparent 0 6px,var(--surface-2) 6px 7px);cursor:default}
.day .hn{font-size:12px;line-height:1.3;color:var(--muted)}
.rc-ev .mv{font-size:11.5px;color:var(--muted)}
.rc-more{font-size:12px;color:var(--muted);padding-left:11px}
.grid-note{font-size:13px;color:var(--muted);margin:10px 0 0}

.rc-pane{position:sticky;top:20px;border-top:3px solid var(--ink);padding-top:14px}
.rc-pane h3{font-size:22px;margin:0}
.rc-pane .rc-when{font-size:14px;color:var(--muted);margin:2px 0 18px}
.rel{padding:14px 0 16px;border-top:1px solid var(--line)}
.rel h4{font-size:17px;margin:0;display:flex;align-items:center;gap:9px}
.rel h4 i{width:10px;height:10px;background:var(--k);flex:none}
.rel .m{font-size:13px;color:var(--muted);margin:3px 0 10px 19px}
.rel table{width:calc(100% - 19px);margin-left:19px;border-collapse:collapse;font-size:14px}
.rel th{background:none;border:0;font-size:12px;font-weight:500;color:var(--muted);text-align:right;padding:0 0 4px}
.rel th:first-child{text-align:left}
.rel td{padding:5px 0;border-top:1px solid var(--line-soft);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rel td:first-child{text-align:left;white-space:normal;padding-right:8px}
.rel td a{color:var(--ink);text-decoration:none}
.rel td a:hover{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.rel td.a{font-weight:700;padding-left:10px}
.rel td.a.x{font-weight:500;color:var(--faint)}
.rel td.p{color:var(--muted);padding-left:10px}
.rel .rc-sp{display:block;width:96px;height:26px;margin-top:4px}
.rc-sp polyline{fill:none;stroke:var(--spark);stroke-width:1.4;stroke-linejoin:round}
.rc-sp circle{fill:var(--ink)}
.rel.exp .rc-sp circle{fill:var(--faint)}
.empty{font-size:15px;color:var(--ink-2);border-top:1px solid var(--line);padding-top:14px;margin:0}
.empty a{color:var(--brand)}

/* step 15: the calendar in one card under a blue rule, the day pane inside it at the right; Month /
   Year as pills, the topics as chips; "Coming up" and "Just released" under it; the dates' notes folded */
.cl-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 40px;flex-wrap:wrap;padding-bottom:26px}
.cl-head h1{margin:10px 0 12px}
.cl-head .lede{max-width:44em}
.cl-count{margin:0 0 4px;font-size:14px;color:var(--muted);line-height:1.7;text-align:right}
.cl-count b{font-family:var(--serif);font-size:20px;color:var(--ink);font-weight:600;margin-right:4px}
.cl-card{border:1px solid var(--line);border-top:3px solid var(--nav-mark);background:var(--surface);padding:18px 22px 20px}
.cl-card .cal-head{margin:0 0 12px;align-items:center}
.cal-nav h2{font-size:26px;min-width:7.6em}
.views button{font:inherit;font-size:14px;padding:5px 15px;border:0;border-radius:999px;background:transparent;color:var(--ink);cursor:pointer}
.views button:hover:not([aria-pressed="true"]){color:var(--brand)}
.views button[aria-pressed="true"]{background:var(--surface);font-weight:700;box-shadow:0 1px 2px rgba(11,37,69,.12)}
.cl-card .cal-key{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:12px 0 16px;border-top:1px solid var(--line-soft)}
.cl-kh{font-size:13px;color:var(--muted);margin-right:6px}
.cl-card .cal-key button{border-radius:999px;padding:4px 12px 4px 10px;font-size:13.5px;border-color:var(--line)}
.cl-card .cal-key button i{width:9px;height:9px;border-radius:50%}
.cl-card .cal-key button.off{background:var(--surface-2);text-decoration:line-through;text-decoration-color:var(--line-strong)}
.cl-card .cal{grid-template-columns:minmax(0,1fr) 340px;gap:0}
.cl-main{padding-right:24px;min-width:0}
.cl-card .rc-pane{border-top:0;border-left:1px solid var(--line);padding:2px 0 0 24px;align-self:stretch}
.cl-card .day{min-height:112px}
.cl-card .grid-note{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.grid-note span{display:inline-block;width:14px;height:10px;margin-left:8px}
.grid-note span:first-child{margin-left:0}
.grid-note .k1{background:var(--surface-2);border-left:3px solid var(--ink-2)}
.grid-note .k2{border-left:3px dotted var(--ink-2)}
.grid-note .k3{background:repeating-linear-gradient(135deg,transparent 0 3px,var(--line-strong) 3px 4px)}
.cl-card .year{padding-top:6px}
.is-year .cl-card .grid-note{display:none}
.cl-band{background:var(--surface-2);border-block:1px solid var(--line);padding:26px 0 30px;margin-top:40px}
.cl-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 48px}
.cl-col h2{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 4px;padding-bottom:8px;border-bottom:1px solid var(--line-strong)}
.cl-list{list-style:none;margin:0;padding:0}
.cl-list li{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.cl-dt{display:flex;flex-direction:column;align-items:center;line-height:1.05;padding:5px 0 4px;background:var(--surface);border:1px solid var(--line);font-variant-numeric:tabular-nums}
.cl-dt b{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--ink)}
.cl-dt span{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.cl-dt small{font-size:13px;color:var(--faint)}
.cl-dt.is-today{background:var(--brand);border-color:var(--brand)}
.cl-dt.is-today b,.cl-dt.is-today span,.cl-dt.is-today small{color:var(--brand-ink)}
.cl-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.cl-t a{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--ink);text-decoration:none;font-size:15.5px}
.cl-t a i{width:9px;height:9px;border-radius:50%;background:var(--k);flex:none}
.cl-t a:hover{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.cl-t > span{font-size:13px;color:var(--muted);padding-left:17px}
.cl-t em{font-style:normal}
.cl-v{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.cl-v b{display:block;font-size:16px;font-weight:700;color:var(--ink)}
.cl-v b.due{font-size:14px;font-weight:600;color:var(--faint)}
.cl-v span{font-size:12.5px;color:var(--muted)}
.cl-how{margin:18px 0 64px;max-width:860px}
.cl-how summary{cursor:pointer;padding:14px 0 6px;font-weight:600;color:var(--ink-2);font-size:15px}
.cl-how summary:hover{color:var(--brand)}
.cl-how p{margin:4px 0 0;font-size:14.5px;line-height:1.65;color:var(--muted)}
.cl-how a{color:var(--brand)}
@media (max-width:1020px){
  .cl-card .cal{grid-template-columns:minmax(0,1fr)}
  .cl-main{padding-right:0}
  .cl-card .rc-pane{border-left:0;border-top:1px solid var(--line);padding:16px 0 0;margin-top:16px}
}
@media (max-width:900px){.cl-two{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){
  .cl-head{align-items:flex-start}
  .cl-count{text-align:left}
  .cl-card{padding:14px 14px 16px;margin-inline:-6px}
  .cl-card .cal-key{padding:10px 0 4px}
  .cl-kh{display:none}
  .cl-card .grid-note,.cl-t em{display:none}
}
.is-year .cal,.is-year .grid-note,.is-year [data-go],.is-year .cal-nav .today{display:none}
.year{display:none;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 34px}
.is-year .year{display:grid}
.ym h3{all:unset;display:block;font-size:17px;font-weight:700;font-family:var(--serif);cursor:pointer;margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.ym h3:hover{color:var(--brand)}
.ym .g{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px}
.ym .g>span{font-size:11.5px;color:var(--muted);padding:0 0 3px 4px}
.yd{all:unset;box-sizing:border-box;height:40px;padding:3px 4px;display:flex;flex-direction:column;justify-content:space-between;
  font-size:12px;font-variant-numeric:tabular-nums;color:var(--ink-2);cursor:pointer;background:var(--surface-2)}
.yd:hover{box-shadow:inset 0 0 0 1px var(--ink-2)}
.yd:focus-visible{outline:2px solid var(--brand)}
.yd.none{background:none;cursor:default;color:var(--faint)}
.yd.none:hover{box-shadow:none}
.yd.blank{visibility:hidden}
.yd.past{color:var(--muted)}
.yd.hol{background:repeating-linear-gradient(135deg,transparent 0 4px,var(--line-soft) 4px 5px);color:var(--faint)}
.yd.is-today{background:var(--brand);color:var(--brand-ink);font-weight:700}
.yd .dots{display:flex;gap:2px;flex-wrap:wrap}
.yd .dots i{width:7px;height:7px;background:var(--k)}
.yd .dots i.e{background:none;box-shadow:inset 0 0 0 1.5px var(--k)}
.yd.is-today .dots i{box-shadow:0 0 0 1px var(--brand-ink)}
.year-note{grid-column:1/-1;font-size:13px;color:var(--muted);margin:0;display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.year-note i{display:inline-block;width:8px;height:8px;margin-right:6px;background:var(--ink-2);vertical-align:0}
.year-note i.e{background:none;box-shadow:inset 0 0 0 1.5px var(--ink-2)}
.rel .rc-src{font-size:12.5px;color:var(--muted);margin:8px 0 0 19px}
.rel .rc-src a{color:var(--brand)}
.cal-wrap{scroll-margin-top:84px}
.agenda{display:none}
.agenda h3{font-size:15px;color:var(--muted);font-weight:600;margin:26px 0 0;padding-bottom:8px;border-bottom:1px solid var(--line)}
.lrow{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:4px 14px;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.lrow .rc-dt{font-variant-numeric:tabular-nums;line-height:1.1}
.lrow .rc-dt b{display:block;font-size:24px;font-family:var(--serif)}
.lrow .rc-dt span{font-size:12.5px;color:var(--muted)}
.lrow.today .rc-dt b{color:var(--brand)}
.lrow .t{font-weight:600;display:flex;align-items:center;gap:8px}
.lrow .t i{width:9px;height:9px;background:var(--k);flex:none}
.lrow .m{font-size:13px;color:var(--muted);margin-left:17px}
.lrow .v{text-align:right;font-variant-numeric:tabular-nums;font-size:14px}
.lrow .v b{display:block}
.lrow .v span{font-size:12.5px;color:var(--muted)}
.lrow.hide{display:none}
.lrow.hol .t{font-weight:500;color:var(--muted)}

.cal-foot{margin:6px 0 56px;font-size:14px;color:var(--muted);max-width:52em}
.cal-foot a{color:var(--brand)}

@media (max-width:1020px){
  .cal{grid-template-columns:1fr}
  .year{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rc-pane{position:static}
}
@media (max-width:760px){
  .grid,.grid-note,.rc-pane,.cal-nav .today{display:none}
  .agenda{display:block}
  .year{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
  .cal-nav h2{font-size:22px;min-width:0;margin-right:auto}
  .cal-head{align-items:stretch;flex-direction:column;gap:14px}
}
@media (max-width:760px){.cal-nav h2{white-space:nowrap}}
@media (max-width:400px){.cal-nav h2{font-size:20px}.views button{padding:5px 11px}}

/* a currency before a figure (US$ 6.85 bn): after every unit rule, so it wins their margin */
.num small.pre,.v small.pre,.big small.pre{margin-left:0;margin-right:3px}