/* ══════════════════════════════════════════════════════════════════════════
   MDH CONTEXT TAB — SCOPED STYLESHEET (#panel-mdh + landing "About" block)
   Every selector is prefixed (#panel-mdh, .mdh-*, .abt-*) so nothing leaks into
   the rest of the site, which is styled by style.css.

   TABLE OF CONTENTS
     1.  Panel tokens (--mdh-* pillar palette) + sub-tab navigation
     2.  Pillar-block layout (per-tab overrides under #panel-mdh)
     3.  Intro banners + editorial section primitives (.mdh-page-*, .mdh-block)
     4.  Definition cards
     5.  About-this-project layout (.abt-*)
     6.  Why-now / WEF / trajectory cards
     7.  Stats, tactic cards, buckets, topics
     8.  Charts, Switzerland/legal, references
     9.  Topic modal + reference popover
     10. Responsive overrides

   COLOUR RULE: pillar accents come from the --mdh-* tokens defined on #panel-mdh
   (block 1); brand hues come from the :root tokens in style.css (--navy,
   --groseille, --canard, ...). No hard-coded hexes in rule bodies.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. PANEL TOKENS + SUB-TAB NAV ───────────────────────────────────────── */
#panel-mdh{
  /* Pillar accents = EPFL brand hues (Rose = M, Acier = D, Mont Rose = HS,
     Zinzolin = AI, Perle = governance, Canard = Switzerland). Each M/D/H pillar
     keeps exactly TWO lighter tints: --X2 (medium) for pill borders + gradient
     ends, and --X-lt (pale, ~99% white) for card/evidence backgrounds. The pale
     tints are the only near-white shades on the site outside plain white.
     AI/governance/Switzerland are not M/D/H, so they carry base + one pale only. */
  --mdh-m:#ED6E9C;  --mdh-m2:#F4A3BF;  --mdh-m-lt:#FFF9FB;
  --mdh-d:#4F8FCC;  --mdh-d2:#8BB5DE;  --mdh-d-lt:#F9FBFF;
  --mdh-hs:#F39869; --mdh-hs2:#F7BC9E; --mdh-hs-lt:#FFFBF6;
  /* Text-safe pillar colours. The tints above are chart FILL colours: as small
     text on near-white they measure ~2.1-2.8:1, below the 4.5:1 minimum. These
     on-chart equivalents (Groseille / Canard / Marron) clear it (6.3 / 5.3 /
     10.4:1) while staying the same hue family. Use for `color:`; keep the tints
     for fills, borders and dots (3:1 non-text threshold). */
  --mdh-m-txt:#B51F1F;  --mdh-d-txt:#007480;  --mdh-hs-txt:#5B3428;
  --mdh-ai:#5C2483; --mdh-ai-lt:#FBF8FE;
  --mdh-gov:#CAC7C7; --mdh-gov-lt:#ffffff;
  --mdh-sw:#007480; --mdh-sw-bg:#453A4C;
  --mdh-intro:#C2DDB0;
  --mdh-ink:#453A4C; --mdh-ink2:#453A4C; --mdh-mute:#453A4C; --mdh-faint:#CAC7C7;
  --mdh-border:rgba(69,58,76,.2); --mdh-rule:rgba(69,58,76,.08);
  --mdh-card:#ffffff; --mdh-surface:#ffffff;
  font-family:var(--sans);
  font-size:16.5px;line-height:1.6;color:var(--mdh-ink);
}
:is(#panel-mdh,#panel-glossary) sup.ref{font-size:12px;font-weight:700;opacity:.65;vertical-align:super;margin-left:1px;cursor:pointer;color:var(--zinzolin);text-decoration:underline;text-underline-offset:2px}
:is(#panel-mdh,#panel-glossary) sup.ref:hover{opacity:1}
#panel-mdh b{font-weight:600}

/* ── MDH Context symbol banner (CSS-art, EPFL-recoloured) ────────────────────
   A field of maths/logic/Greek symbols. The glyphs that PULSE are all M, D or H
   letters, cycling on staggered timers; the static ones stay as symbols. Adapted
   from the Uiverse.io "Matrix" pattern, Copyright (c) 2026 rikku94-lab (Rohit
   Kumar Raj), MIT (full notice in CREDITS.md): same grid, same 12 prime-ish
   nth-child timers and four-stage pulse, but the original's blue/cyan/pink is
   replaced by the MDH pillar colours (Rose -> Acier -> Mont Rose -> white).
   Sized to match the Mapping EPFL flashlight hero, with the page title and its
   description on a plate inside it. Field is decorative and clipped. */
.mdh-symbol-banner{
  position:relative;height:230px;border-radius:12px;overflow:hidden;
  margin:20px 0 18px;
  /* Shared with the Research Directions, Funding and Takeaways banners; the
     rationale for the scrim lives with the token in style.css. */
  background:var(--banner-bg);
}
.mdh-sym-field{
  position:absolute;inset:0;z-index:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(36px,100%),1fr));
  grid-auto-rows:36px;align-content:start;justify-content:center;overflow:hidden;
  font-family:"Courier New",Courier,monospace;font-size:28px;
  /* Resting state: bright white. Only the M/D/H glyphs carry colour, and only as
     they pulse - but the plain symbols still need to glow, or half the field
     sits inert and greys the whole banner down. */
  color:rgba(255,255,255,.62);
}
.mdh-sym-field > span{
  text-align:center;line-height:1;-webkit-user-select:none;user-select:none;
  /* Two-stop white halo: tight core + wide bloom, the shape that reads as neon. */
  text-shadow:0 0 4px rgba(255,255,255,.75),0 0 12px rgba(255,255,255,.35);
  transition:color .5s,text-shadow .5s;
}
/* The original's 12 prime-ish timers, at the original cadence eased off 1.2x
   (2.05-4.25s cycles; the original ran 1.7-3.55s).
   An earlier pass slowed these ~3.5x because 215 glyphs pulsing on short cycles
   made the field strobe; that left it looking frozen instead, so the slowdown is
   reverted and the strobe is held off by the spread delays below plus the wide
   white plateau in the keyframes (a flare that fades rather than blinks).
   Every span these hit is an M/D/H letter
   (see the generator in site/partials/mdh.html), so the pulsing glyphs spell the
   three pillars and the rest of the field stays static symbols. */
.mdh-sym-field > span:nth-child(19n+2){animation:mdh-sym-pulse 2.5s ease-in-out infinite 0.12s}
.mdh-sym-field > span:nth-child(29n+1){animation:mdh-sym-pulse 3.0s ease-in-out infinite 0.55s}
.mdh-sym-field > span:nth-child(11n){animation:mdh-sym-pulse 2.15s ease-in-out infinite 0.85s}
.mdh-sym-field > span:nth-child(37n+10){animation:mdh-sym-pulse 3.85s ease-in-out infinite 1.1s}
.mdh-sym-field > span:nth-child(41n+1){animation:mdh-sym-pulse 2.75s ease-in-out infinite 0.3s}
.mdh-sym-field > span:nth-child(17n+9){animation:mdh-sym-pulse 2.05s ease-in-out infinite 1.5s}
.mdh-sym-field > span:nth-child(23n+18){animation:mdh-sym-pulse 3.2s ease-in-out infinite 0.95s}
.mdh-sym-field > span:nth-child(31n+4){animation:mdh-sym-pulse 4.0s ease-in-out infinite 0.06s}
.mdh-sym-field > span:nth-child(43n+20){animation:mdh-sym-pulse 2.7s ease-in-out infinite 1.3s}
.mdh-sym-field > span:nth-child(13n+6){animation:mdh-sym-pulse 2.35s ease-in-out infinite 1.8s}
.mdh-sym-field > span:nth-child(53n+5){animation:mdh-sym-pulse 3.6s ease-in-out infinite 0.4s}
.mdh-sym-field > span:nth-child(47n+15){animation:mdh-sym-pulse 4.25s ease-in-out infinite 0.65s}
/* Each pillar gets its own keyframe so the letter starts and rests in ITS OWN
   colour (M Rose, D Acier, H Mont Rose) rather than every glyph starting pink.
   The four-stage shape of the original is kept: dim -> mid -> white -> mid.
   Neon comes from CONTRAST, not from new hues: the pillar colours are the EPFL
   chart values untouched, and the glow instead gets (a) a higher resting alpha,
   (b) a white-hot glyph core at peak, and (c) a three-stop halo that spreads far
   wider than the letter, which is what makes a tube sign look lit. The white
   peak holds 50-65% instead of hitting a single instant, so the flare is legible
   at these speeds.
   The peak is a TINTED white, not #fff: mixed 32% back toward the pillar's own
   hue via color-mix, so a flaring M still reads as Rose and an H as Mont Rose
   rather than every letter bleaching to the same white. The tint is derived from
   the chart token, so no off-chart hex is introduced. */
@keyframes mdh-pulse-m{
  0%,100%{color:rgba(237,110,156,.92);text-shadow:0 0 8px var(--mdh-m),0 0 16px rgba(237,110,156,.5)}
  30%{color:var(--mdh-m);text-shadow:0 0 10px var(--mdh-m),0 0 22px var(--mdh-m),0 0 36px rgba(237,110,156,.55)}
  50%,65%{color:color-mix(in srgb,var(--mdh-m) 32%,#fff);text-shadow:0 0 7px color-mix(in srgb,var(--mdh-m) 45%,#fff),0 0 18px var(--mdh-m),0 0 34px var(--mdh-m),0 0 54px rgba(237,110,156,.7)}
  85%{color:var(--mdh-m);text-shadow:0 0 10px var(--mdh-m),0 0 22px var(--mdh-m),0 0 36px rgba(237,110,156,.55)}
}
@keyframes mdh-pulse-d{
  0%,100%{color:rgba(79,143,204,.92);text-shadow:0 0 8px var(--mdh-d),0 0 16px rgba(79,143,204,.5)}
  30%{color:var(--mdh-d);text-shadow:0 0 10px var(--mdh-d),0 0 22px var(--mdh-d),0 0 36px rgba(79,143,204,.55)}
  50%,65%{color:color-mix(in srgb,var(--mdh-d) 32%,#fff);text-shadow:0 0 7px color-mix(in srgb,var(--mdh-d) 45%,#fff),0 0 18px var(--mdh-d),0 0 34px var(--mdh-d),0 0 54px rgba(79,143,204,.7)}
  85%{color:var(--mdh-d);text-shadow:0 0 10px var(--mdh-d),0 0 22px var(--mdh-d),0 0 36px rgba(79,143,204,.55)}
}
@keyframes mdh-pulse-h{
  0%,100%{color:rgba(243,152,105,.92);text-shadow:0 0 8px var(--mdh-hs),0 0 16px rgba(243,152,105,.5)}
  30%{color:var(--mdh-hs);text-shadow:0 0 10px var(--mdh-hs),0 0 22px var(--mdh-hs),0 0 36px rgba(243,152,105,.55)}
  50%,65%{color:color-mix(in srgb,var(--mdh-hs) 32%,#fff);text-shadow:0 0 7px color-mix(in srgb,var(--mdh-hs) 45%,#fff),0 0 18px var(--mdh-hs),0 0 34px var(--mdh-hs),0 0 54px rgba(243,152,105,.7)}
  85%{color:var(--mdh-hs);text-shadow:0 0 10px var(--mdh-hs),0 0 22px var(--mdh-hs),0 0 36px rgba(243,152,105,.55)}
}
/* Route each letter to its pillar's keyframe. The nth-child rules above set the
   duration/delay via the shared `mdh-sym-pulse` name, so re-point that name per
   pillar here: animation-name wins from the more specific class selector. */
.mdh-sym-field > span.pm{animation-name:mdh-pulse-m}
.mdh-sym-field > span.pd{animation-name:mdh-pulse-d}
.mdh-sym-field > span.ph{animation-name:mdh-pulse-h}
/* A letter the timers did NOT select sits static in its own pillar colour. It
   still carries a coloured halo (not the default white one), so an unlit letter
   reads as a dimmed tube rather than as a grey symbol. */
.mdh-sym-letter.pm{color:rgba(237,110,156,.88);text-shadow:0 0 7px rgba(237,110,156,.75),0 0 15px rgba(237,110,156,.4)}
.mdh-sym-letter.pd{color:rgba(79,143,204,.88);text-shadow:0 0 7px rgba(79,143,204,.75),0 0 15px rgba(79,143,204,.4)}
.mdh-sym-letter.ph{color:rgba(243,152,105,.88);text-shadow:0 0 7px rgba(243,152,105,.75),0 0 15px rgba(243,152,105,.4)}
/* The M/D/H glyphs are bolder so they read as letters against the symbols. */
.mdh-sym-letter{font-weight:800}
/* Title + description plate, matching the Mapping EPFL hero's plate. */
.mdh-sym-headline{position:absolute;left:22px;top:22px;z-index:1;margin:0;
  max-width:min(56%,540px);
  /* Shared with the other banner plates; the rationale lives with the token
     in style.css. This one needs the opacity most: the glyph field behind it
     is the brightest backdrop on the site, and at 0.62 it showed through and
     left the description sitting on a mottled, pulsing surface. */
  background:var(--banner-plate);border:1px solid rgba(255,255,255,.14);
  border-radius:12px;padding:16px 20px;}
.mdh-sym-headline .page-headline-title{color:#fff}
.mdh-sym-headline .mdh-sym-lead{color:rgba(255,255,255,.9);font-size:16px;
  line-height:1.5;margin:6px 0 0}
/* The "What you will find" intro is mirrored into the banner plate above, so the
   in-panel copy would be a duplicate. Keep it in the DOM (it stays the source of
   truth that syncBannerLead reads) but hide it visually. */
/* SCOPED TO #panel-mdh ONLY. This also covered #panel-glossary, and the reason
   given for hiding it - syncBannerLead mirrors the text into the banner plate -
   does not hold there: syncBannerLead reads "#panel-mdh .mdh-tab-panel.active"
   and writes "#mdh-sym-lead", and the Glossary has no banner at all. So the
   Glossary's intro was hidden here and mirrored nowhere: maintained copy that
   rendered on no page. */
#panel-mdh .mdh-tab-intro{display:none}
@media (max-width:700px){
  .mdh-symbol-banner{height:auto;min-height:210px}
  .mdh-sym-headline{position:static;max-width:none;margin:12px;left:auto;top:auto}
}

/* ── "Sections" navigation, rendered as the first content section (not a top
   banner). Eyebrow + toggle on the right, tiles below. ── */
.mdh-subtab-section{
  padding:8px 0 32px;
  border-bottom:4px solid var(--navy, var(--ardoise));
  margin:0 0 36px;
}
.mdh-subtab-section-hd{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
  flex-wrap:wrap;
}
.mdh-subtab-section-hd .mdh-page-eyebrow{margin:0}
body.track-research .mdh-subtab-section-hd .mdh-guide-toggle{display:none}

.mdh-subtab-tiles{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:10px;
  background:transparent;
  margin:0 0 28px;
  padding:0;
  width:100%;
}
@media (max-width: 1200px){.mdh-subtab-tiles{grid-template-columns:repeat(3, 1fr)}}
@media (max-width: 700px){.mdh-subtab-tiles{grid-template-columns:repeat(2, 1fr)}}

/* Placeholder shown when a not-yet-built audience view is selected. */
.mdh-wip{padding:64px 24px;text-align:center}
.mdh-wip-inner{font-family:var(--sans);font-size:24px;font-weight:800;color:var(--ardoise);letter-spacing:0.3px}
.mdh-wip-sub{margin-top:10px;font-family:var(--sans);font-size:16px;line-height:1.5;color:rgba(69,58,76,0.78)}
.mdh-wip-sub b{color:var(--ardoise)}

/* Per-section title shown under the switcher, above the intro banner. Sits on
   the dark Ardoise page background, so the text is white. */
.mdh-section-title{
  font-family:var(--display);
  font-size:22px;
  font-weight:800;
  color:var(--ardoise);
  letter-spacing:0.2px;
  margin:4px 0 14px;
}

.mdh-subtile{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-start;
  padding:14px 16px 16px;
  text-align:left;
  background:var(--ardoise);
  border:none;
  border-radius:12px;
  cursor:pointer;
  font-family:var(--sans);
  color:#fff;
  transition:background 0.15s,border-color 0.15s,transform 0.15s,color 0.15s;
}
.mdh-subtile:hover{transform:translateY(-2px);filter:brightness(1.12)}
/* Active tile: EPFL Groseille red fill, white text. Unmistakable selection. */
.mdh-subtile.active{background:var(--groseille);color:#fff;border-color:var(--groseille)}
.mdh-subtile-title{
  font-size:13.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1.4px;
  line-height:1.25;
}
.mdh-subtile-desc{
  font-size:13.5px;
  line-height:1.5;
  color:rgba(255,255,255,0.78);
  margin-top:4px;
}
.mdh-subtile.active .mdh-subtile-desc{color:rgba(255,255,255,0.85)}

/* ── 2. PILLAR-BLOCK LAYOUT (per-tab overrides under #panel-mdh) ──────────── */

/* MDH Context matches the other subpages: the switcher moved to the nav-bar subtab
   row, so the in-panel tiles and per-panel section title are hidden, and the boxed
   intro becomes a plain lead line under the shared "MDH Context - {sub}" title. */
#panel-mdh .mdh-subtab-tiles{display:none}
:is(#panel-mdh,#panel-glossary) .mdh-section-title{display:none}
:is(#panel-mdh,#panel-glossary) .mdh-tab-intro{background:none;border:none;padding:0;margin:0 0 22px}
/* The Glossary has no sub-tab row between its header and its intro, so the intro sat flush against
   the header. */
#panel-glossary #mdh-tgloss > .mdh-tab-intro{padding-top:40px}
:is(#panel-mdh,#panel-glossary) .mdh-tab-intro-title{display:none}
:is(#panel-mdh,#panel-glossary) .mdh-tab-intro-body{font-family:var(--sans);font-size:16px;line-height:1.55;color:rgba(69,58,76,0.85)}
/* It ran the full 1184px; other page intros stop near 700px (2026-09-14). */
#panel-glossary .mdh-tab-intro-body{max-width:none}
/* Pillar blocks read like the shared section pattern: drop the white wrapper and the
   card chrome, put a thick ardoise divider above each, and make the subtitle a big
   M/D/H-coloured heading (Patterns x Misinformation in pink, x Disinformation in
   acier, x Hate speech in orange). Content sits flat below, like the other pages. */
:is(#panel-mdh,#panel-glossary) .mdh-tab-card{background:none;border:none;border-radius:0;padding:0}
#panel-mdh .mdh-tac{background:none;border:none;border-radius:0;overflow:visible;margin:48px 0 0}
#panel-mdh .mdh-tac-hd{background:none;border-top:4px solid var(--ardoise);padding:40px 0 0;margin:0 0 16px;cursor:pointer;position:relative}
#panel-mdh .mdh-tac-hd:focus-visible{outline:2px solid var(--canard);outline-offset:3px}
#panel-mdh .mdh-tac-type{font-size:22px;font-weight:800;letter-spacing:.2px;text-transform:none;margin-bottom:4px}
/* Collapse triangle to the left of the pillar subtitle, in the pillar's own colour. */
#panel-mdh .mdh-tac-type::before{content:"";display:inline-block;margin-right:12px;border-left:6px solid transparent;border-right:6px solid transparent;border-top:7px solid currentColor;vertical-align:middle;transition:transform .2s}
#panel-mdh .mdh-tac-hd.mdh-tac-collapsed .mdh-tac-type::before{transform:rotate(-90deg)}
/* The survey deep-dive block that used to sit here is gone: both surveys are
   ordinary topics now, in the hate speech buckets their charts answer, and
   their charts are drawn inside the topic card. */
/* Separation line above each pillar section takes that pillar's M/D/H colour. */
#panel-mdh .mdh-tac.m .mdh-tac-hd{border-top-color:var(--mdh-m)}
#panel-mdh .mdh-tac.d .mdh-tac-hd{border-top-color:var(--mdh-d)}
#panel-mdh .mdh-tac.hs .mdh-tac-hd{border-top-color:var(--mdh-hs)}
#panel-mdh .mdh-tac.ai .mdh-tac-hd{border-top-color:var(--mdh-ai)}
/* No card border; instead a pillar-coloured line separates each item in a bucket list. */
#panel-mdh .mdh-bucket .mdh-topic{padding-bottom:12px;margin-bottom:12px;border-bottom:1.5px solid var(--mdh-border)}
#panel-mdh .mdh-bucket .mdh-topic:last-child{padding-bottom:0;margin-bottom:0;border-bottom:none}
#panel-mdh .mdh-bucket.m .mdh-topic{border-bottom-color:var(--mdh-m)}
#panel-mdh .mdh-bucket.d .mdh-topic{border-bottom-color:var(--mdh-d)}
#panel-mdh .mdh-bucket.hs .mdh-topic{border-bottom-color:var(--mdh-hs)}
#panel-mdh .mdh-bucket.ai .mdh-topic{border-bottom-color:var(--mdh-ai)}
/* Number callouts: the big number takes the pillar's M/D/H colour. */
#panel-mdh .mdh-tac.m .mdh-substat-n,#panel-mdh .mdh-bucket.m .mdh-substat-n,#panel-mdh .mdh-bucket.m .mdh-bucket-feat-n{color:var(--mdh-m-txt)}
#panel-mdh .mdh-tac.d .mdh-substat-n,#panel-mdh .mdh-bucket.d .mdh-substat-n,#panel-mdh .mdh-bucket.d .mdh-bucket-feat-n{color:var(--mdh-d-txt)}
#panel-mdh .mdh-tac.hs .mdh-substat-n,#panel-mdh .mdh-bucket.hs .mdh-substat-n,#panel-mdh .mdh-bucket.hs .mdh-bucket-feat-n{color:var(--mdh-hs-txt)}
#panel-mdh .mdh-tac.ai .mdh-substat-n,#panel-mdh .mdh-bucket.ai .mdh-substat-n,#panel-mdh .mdh-bucket.ai .mdh-bucket-feat-n{color:var(--mdh-ai)}
/* Vulnerable-communities items: top + bottom rule in the pillar colour. */
#panel-mdh .mdh-bucket-impacted .mdh-topic{padding:10px 0;border-top:1.5px solid var(--mdh-border);border-bottom:1.5px solid var(--mdh-border)}
#panel-mdh .mdh-bucket-impacted.m .mdh-topic{border-top-color:var(--mdh-m);border-bottom-color:var(--mdh-m)}
#panel-mdh .mdh-bucket-impacted.d .mdh-topic{border-top-color:var(--mdh-d);border-bottom-color:var(--mdh-d)}
#panel-mdh .mdh-bucket-impacted.hs .mdh-topic{border-top-color:var(--mdh-hs);border-bottom-color:var(--mdh-hs)}
#panel-mdh .mdh-bucket-impacted.ai .mdh-topic{border-top-color:var(--mdh-ai);border-bottom-color:var(--mdh-ai)}
#panel-mdh .mdh-tac.m .mdh-tac-hl,#panel-mdh .mdh-tac.d .mdh-tac-hl,#panel-mdh .mdh-tac.hs .mdh-tac-hl,#panel-mdh .mdh-tac.ai .mdh-tac-hl{font-size:16.5px;font-weight:600;color:var(--ink-muted)}
#panel-mdh .mdh-tac-body{padding:0}

.mdh-intro-text{font-size:16px;line-height:1.55;color:var(--mdh-ink);margin-bottom:24px;padding:14px 18px;background:#ffffff;border:2px solid var(--perle);border-radius:12px}
.mdh-intro-text strong{color:var(--ardoise);font-weight:700}
.mdh-intro-text u{text-decoration:none}
.mdh-intro-text em{font-style:normal;font-weight:700;color:var(--ardoise)}
.mdh-tab-panel{display:none}
.mdh-tab-panel.active{display:block;margin-top:12px}
/* The intro banner sits above this white box (lifted out by buildMdhMap), both at content width. */
.mdh-tab-card{padding:18px;border:3px solid var(--perle);border-radius:12px;background:#ffffff}

/* ── Plain horizontal divider used between sections ── */
.mdh-divider{border:none;border-top:1px solid var(--perle);margin:40px 0;width:100%}

/* ── 3. INTRO BANNERS + EDITORIAL SECTION PRIMITIVES ─────────────────────── */

/* ── Phantom-style editorial layout for the Overview sub-tab ──
   Compact hero (no big image) + sections with bold title + body. Eyebrow uses
   the landing-page .ph-eyebrow recipe (Arial / 700 / canard / uppercase /
   letter-spacing 3.5px) just bigger. */
.mdh-page-hero{
  padding:4px 0 28px;
  border-bottom:1px solid var(--perle);
  margin-bottom:36px;
  max-width:none;
}
/* Identical recipe to .ph-eyebrow on the landing page, just a larger font. */
.mdh-page-eyebrow{
  font-family:var(--sans);
  font-size:22px;
  font-weight:700;
  letter-spacing:3.5px;
  text-transform:uppercase;
  color:var(--canard);
  margin:0 0 22px;
}
.mdh-page-hero-title{
  font-family:var(--display);
  font-size:30px;
  font-weight:700;
  letter-spacing:-0.6px;
  line-height:1.18;
  color:var(--ardoise);
  margin:0 0 18px;
  max-width:none;
}
.mdh-page-hero-lede{
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.6;
  color:rgba(69,58,76,0.78);
  margin:0;
  max-width:none;
}

/* Sections are bands with their own ground, the way the homepage does it, so
   the page reads as a sequence rather than as one column cut by rules. Odd
   sections are white, even ones take the Perle wash; the nth-of-type keeps
   that true no matter how many sections a subtab ends up with. */
/* The panel body is a child of a .band, which caps every child at the measure.
   Lift that cap here so the sections can run edge to edge; each section then
   re-applies the measure to its own contents below. */
#panel-mdh-body,#panel-glossary-body{max-width:none}
.mdh-page-section{padding:56px var(--gutter);margin:0 calc(var(--gutter) * -1)}
.mdh-page-section:nth-of-type(odd){background:#fff}
.mdh-page-section:nth-of-type(even){background:var(--ground)}
.mdh-page-section > *{max-width:var(--measure);margin-inline:auto}
.mdh-page-section-hd{margin-bottom:28px}
/* Same eyebrow as every section head on the homepage. Scoped to #panel-mdh
   because the panel sits inside a .band, and `.band p` (0,1,1) outranks a bare
   class (0,1,0) - the eyebrows rendered as body text until this was raised. */
:is(#panel-mdh,#panel-glossary) .mdh-eyebrow{font-family:var(--sans);font-size:12.5px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--groseille);margin:0 0 14px}
#panel-mdh .mdh-subblock > .mdh-eyebrow{margin-top:8px}
.mdh-page-section-title{
  font-family:var(--display);
  font-size:30px;
  font-weight:600;
  letter-spacing:-0.015em;
  line-height:1.08;
  color:var(--ardoise);
  margin:0 0 14px;
  max-width:none;
}
.mdh-page-section-lede{
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.6;
  color:rgba(69,58,76,0.78);
  margin:0;
  /* No cap. This used to be 760px, chosen so a 16.5px line ran about 72 characters, inside the
     45-75 band typography research treats as readable. It made every lede visibly narrower than
     the cards, tables and lists directly beneath it in the same section, and that mismatch reads
     as a mistake rather than as a measure. Section content is capped at --measure by
     `.mdh-page-section > *`, so the lede now runs to the same width as everything it introduces. */
}
/* Removing the cap above was not enough on its own. The panel sits inside a .band, and
   `.band p` in style.css (0,1,1) carries max-width:80ch and outranks a bare class (0,1,0), so
   every lede kept rendering at 858px. Same specificity trap the eyebrow rule documents further
   up this file. Scoped to the panel to beat it. */
:is(#panel-mdh,#panel-glossary) .mdh-page-section-lede{max-width:none}
.mdh-page-section-body{font-family:var(--sans)}

/* "What you will find on this page" — compact Perle box (EPFL var(--perle)),
   small red title (groseille), short body. Sits at top of each sub-tab. */
.mdh-tab-intro{
  background:#ffffff;
  padding:14px 20px;
  margin:0 0 12px;
  display:block;
  border-radius:12px;
}
.mdh-tab-intro-show{display:block}      /* explicit override; cancels older display:none */
.mdh-tab-intro-title{
  font-family:var(--sans);
  font-size:15px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--groseille);
  margin:0 0 8px;
}
.mdh-tab-intro-body{
  font-family:var(--sans);
  font-size:15px;
  line-height:1.55;
  color:var(--ardoise);
  margin:0;
}

/* (Older Phantom-style .mdh-tab-intro rule removed — the new Perle box above takes effect.) */

/* ── 4. DEFINITION CARDS ─────────────────────────────────────────────────── */

/* Definition cards: aligned internal blocks via CSS subgrid so the Quote / Note /
   Examples / Swiss law rows start and end at the same Y across all 3 cards. */
.mdh-def-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:auto auto auto auto auto;     /* Title, Examples, Official, Note, Swiss law */
  gap:14px;
}
/* On narrow screens the 3 definition cards used to stack into one very tall
   column. Instead, turn them into a horizontal scroll-snap row: the reader
   swipes card-to-card (touch + keyboard native, no autoplay, no JS). This is
   the one "carousel-like" pattern UX research endorses because it is fully
   user-controlled. Each card snaps to the start and takes ~85% of the viewport
   so the next one peeks, signalling there is more to swipe. */
.mdh-def-card{
  display:grid;
  grid-template-rows:subgrid;
  grid-row:span 5;
  padding:0 !important;
  overflow:hidden;
}
.mdh-def-hd{margin:0;padding:14px 16px}
.mdh-def-block{padding:14px 16px;border-top:1px solid rgba(69,58,76,0.08)}
.mdh-def-card > .mdh-def-hd + .mdh-def-block{border-top:none}
/* No separator line between the "Definition we will use" block and the "Note" below it */
.mdh-def-quote-block + .mdh-def-block{border-top:none}

/* Official definition block: pastel background per pillar, no left border */
.mdh-def-card.m  .mdh-def-quote-block{background:var(--mdh-m-lt)}
.mdh-def-card.d  .mdh-def-quote-block{background:var(--mdh-d-lt)}
.mdh-def-card.hs .mdh-def-quote-block{background:var(--mdh-hs-lt)}
.mdh-def-quote-block{border-top:none}
.mdh-def-quote-block .mdh-def-quote{
  border-left:none !important;
  border:none !important;
  border-radius:0 !important;
  background:transparent !important;
  padding:0 !important;
  margin:0 !important;
}
.mdh-def-lbl{
  font-family:var(--sans);
  font-size:12px;
  font-weight:700;
  letter-spacing:1.8px;
  text-transform:uppercase;
  color:var(--ink-muted);
  margin:0 0 8px;
}
.mdh-def-card.m  .mdh-def-lbl{color:var(--mdh-m-txt)}
.mdh-def-card.d  .mdh-def-lbl{color:var(--mdh-d-txt)}
.mdh-def-card.hs .mdh-def-lbl{color:var(--mdh-hs-txt)}
.mdh-def-block .mdh-def-txt{margin:0}
.mdh-def-block .mdh-pills{margin:0}
.mdh-def-block .mdh-def-legal{padding:0;background:transparent;border:none;margin-top:0}
.mdh-def-card.m  .mdh-def-legal-block{background:var(--mdh-m-lt)}
.mdh-def-card.d  .mdh-def-legal-block{background:var(--mdh-d-lt)}
.mdh-def-card.hs .mdh-def-legal-block{background:var(--mdh-hs-lt)}

/* (Earlier duplicate of .mdh-tab-intro removed; the canonical Perle styling is above.) */

/* ── Homogeneous section block (Overview etc.) ──
   Same wrapper for every section: clean title + optional lede + body.
   No backgrounds, no eyebrows - just consistent typography and spacing. */
.mdh-block{margin:0 0 4px 0}
.mdh-block-title{
  font-family:var(--display);
  font-size:20px;
  font-weight:700;
  color:var(--ardoise);
  letter-spacing:-0.4px;
  line-height:1.22;
  margin:0 0 16px;
}
.mdh-block-lede{
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.6;
  color:rgba(69,58,76,0.78);
  margin:0 0 24px;
}
.mdh-block-body{font-family:var(--sans)}
/* Sub-section heading inside a block (e.g. inside Why-now). Smaller than the
   block title, still hard-edge and consistent. */
.mdh-subblock-title{
  font-family:var(--sans);
  
  font-weight:700;
  color:var(--ardoise);
  
  text-transform:uppercase;
  letter-spacing:1.5px;
  font-size:15px;
  margin:32px 0 16px;
  padding-bottom:8px;
  border-bottom:1px solid var(--perle);
}
.mdh-block-body > .mdh-subblock-title:first-child{margin-top:0}

/* Why-MDH narrative items: heading + paragraph, generous spacing between items */
.mdh-rationale-item + .mdh-rationale-item{margin-top:8px}
.mdh-rationale-item p{font-family:var(--sans);font-size:16px;line-height:1.65;color:rgba(69,58,76,0.92);margin:0}
.mdh-rationale-item .mdh-subblock-title{margin-top:24px}
.mdh-rationale-item:first-child .mdh-subblock-title{margin-top:0}

/* ── Uniform card format ──
   2px solid border on ALL sides (per-pillar colour for categorical cards,
   neutral grey otherwise). No border-radius, no box-shadow, consistent padding. */
.mdh-def-card,
.mdh-traj-card,
.mdh-wef,
.abt-card,
.mdh-whois-card{
  border-radius:12px;
  border:2px solid var(--perle);
  background:#fff;
  padding:18px;
  overflow:hidden;
}
.mdh-def-card{padding:0}     /* def-cards have inner sub-blocks with their own padding */
.mdh-traj-card.m,.mdh-def-card.m{border-color:var(--mdh-m)}
.mdh-traj-card.d,.mdh-def-card.d{border-color:var(--mdh-d)}
.mdh-traj-card.hs,.mdh-def-card.hs{border-color:var(--mdh-hs)}
.abt-card.c1{border-color:var(--rose)}
.abt-card.c2{border-color:var(--acier)}
.abt-card.c3{border-color:var(--mont-rose)}
.abt-card.c4{border-color:var(--zinzolin)}
.abt-card.c5{border-color:var(--canard)}
.abt-card.frame{border-color:var(--zinzolin)}
/* Why-now framing cards: three different EPFL brand colors */
/* Washed, not outlined, like the homepage cards. Carotte and Leman are 3.2:1
   and 3.0:1 as text on white, both under the 4.5:1 AA floor, so the labels are
   Ardoise and the colour lives in the fill where contrast does not apply.
   Zinzolin (10.3:1) could carry its label, but one rule beats three. */
.abt-card.frame-carotte{border:none;background:#FDF0E6}
.abt-card.frame-leman{border:none;background:#E6F6F5}
.abt-card.frame-zinzolin{border:none;background:#EFEAF3}
.abt-card.frame-carotte .abt-card-lbl,
.abt-card.frame-leman .abt-card-lbl,
.abt-card.frame-zinzolin .abt-card-lbl{color:var(--ardoise)}

/* Why-now alignment: the two columns (WEF left, 3 framings right) share the
   same height. Within the right column the framings stack 1-2-3 with equal
   gaps so the visual rhythm matches the WEF table height. */
.mdh-major-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch;margin-bottom:8px}
@media (max-width:1000px){.mdh-major-grid{grid-template-columns:1fr}}
.mdh-major-grid > .mdh-wef{height:100%;display:flex;flex-direction:column}
.mdh-major-grid > .mdh-wef .mdh-wef-tbl{flex:1}
.mdh-framings{display:grid;grid-template-rows:repeat(3,1fr);gap:14px;align-items:stretch;height:100%}
.mdh-framings .abt-card{height:100%;display:flex;flex-direction:column}
@media (max-width:1000px){.mdh-framings{grid-template-rows:auto;grid-template-columns:1fr}}
.mdh-wef{border-color:var(--marron)}
.mdh-wef .mdh-wef-title{color:var(--marron)}
.mdh-wef thead th{border-bottom-color:var(--marron)}
.mdh-whois-card{border-color:var(--zinzolin)}
.mdh-whois-card.peace{border-color:var(--canard)}
.mdh-whois-card.frame{border-color:var(--groseille)}

/* section heading */
.mdh-sh{display:flex;align-items:center;gap:12px;margin:28px 0 16px;white-space:nowrap}
.mdh-sh:first-child{margin-top:0}
.mdh-sh-bar{width:4px;height:16px;border-radius:4px;flex-shrink:0;background:var(--mdh-rule)}
.mdh-sh.lm .mdh-sh-bar{background:var(--mdh-m)}
.mdh-sh.ld .mdh-sh-bar{background:var(--mdh-d)}
.mdh-sh.lhs .mdh-sh-bar{background:var(--mdh-hs)}
.mdh-sh.lai .mdh-sh-bar{background:var(--mdh-ai)}
.mdh-sh-txt{font-size:15px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mdh-ink)}
.mdh-sh.lm .mdh-sh-txt{color:var(--mdh-m-txt)}
.mdh-sh.ld .mdh-sh-txt{color:var(--mdh-d-txt)}
.mdh-sh.lhs .mdh-sh-txt{color:var(--mdh-hs-txt)}
.mdh-sh.lai .mdh-sh-txt{color:var(--mdh-ai)}
.mdh-sh::after{content:'';flex:1;height:1px;background:var(--mdh-rule)}

/* Intro cards: What is it / Who are we / Why us */
.mdh-intro-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px}
.mdh-intro-card{border-radius:12px;border:3px solid var(--perle);background:#ffffff;padding:16px 18px;display:flex;flex-direction:column}
.mdh-intro-card.mdh-intro-what{border-color:var(--leman)}
.mdh-intro-card.mdh-intro-who{border-color:var(--zinzolin)}
.mdh-intro-card.mdh-intro-why{border-color:var(--rose)}
.mdh-intro-hd{font-size:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.mdh-intro-card.mdh-intro-what .mdh-intro-hd{color:var(--canard)}
.mdh-intro-card.mdh-intro-who .mdh-intro-hd{color:var(--zinzolin)}
.mdh-intro-card.mdh-intro-why .mdh-intro-hd{color:var(--ardoise)}
.mdh-intro-body{font-size:15px;line-height:1.55;color:var(--mdh-ink)}
.mdh-intro-body u em{text-decoration:underline;font-style:italic;font-weight:600;color:var(--zinzolin)}
@media (max-width:1000px){.mdh-intro-row{grid-template-columns:1fr}}

/* ── 5. ABOUT-THIS-PROJECT LAYOUT (.abt-*) ───────────────────────────────── */

/* ── About this project — visual layout (hero + sections) ── */
#panel-about{font-family:var(--sans);color:var(--ardoise)}
#panel-about-body{padding:0 4px}

.abt-hero{position:relative;border-radius:12px;overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center;padding:14px;min-height:260px;margin-bottom:14px}
.abt-hero-bg{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;opacity:1}
/* SDG icons in a 2x2 grid under the hero */
.abt-sdg-grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:12px;justify-items:center}
.abt-sdg-grid img{width:100%;max-width:140px;aspect-ratio:1/1;border-radius:4px;object-fit:cover;display:block}
@media (max-width:1000px){.abt-sdg-grid img{max-width:110px}}

/* Top row: Projects & goals (left) + Hero with SDGs above and below (right) */
/* The photo rail on the right is gone (the SDG goals moved up beside the
   title), so the cards now use the full width: one wide, then two. */
.abt-top-grid{display:block;margin-bottom:18px}
.abt-top-left,.abt-top-right{display:flex;flex-direction:column}
.abt-cards-stack{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
.abt-cards-stack .abt-card.c1{grid-column:1 / -1}
@media (max-width:820px){.abt-cards-stack{grid-template-columns:1fr}}
.abt-cards-stack .abt-card{flex:1}
@media (max-width:1000px){.abt-top-grid{grid-template-columns:1fr;gap:14px}.abt-hero{min-height:240px}.abt-sdg-row img{width:74px;height:74px}}

.abt-section-title{font-size:15px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:#fff;background:var(--ardoise);padding:7px 14px;border-radius:4px;margin:30px 0 16px;display:inline-block}

/* Cards — unified format (used for Projects & goals, Why us boxes, Why us stats) */
.abt-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.abt-cards.abt-cards-4{grid-template-columns:repeat(4,1fr)}
.abt-cards.abt-cards-5{grid-template-columns:repeat(5,1fr)}
/* Box (border/radius/bg/padding) comes from the uniform-card rule above; here
   only the layout that's specific to .abt-card. */
.abt-card{display:flex;flex-direction:column;gap:10px}
.abt-card.c1{border-color:var(--rose)}
.abt-card.c2{border-color:var(--acier)}
.abt-card.c3{border-color:var(--mont-rose)}
.abt-card.c4{border-color:var(--zinzolin)}
.abt-card.c5{border-color:var(--canard)}
.abt-card-lbl{font-size:16.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;line-height:1.3}
.abt-card.c1 .abt-card-lbl{color:var(--rose-txt)}
.abt-card.c2 .abt-card-lbl{color:var(--acier-txt)}
.abt-card.c3 .abt-card-lbl{color:var(--mont-rose-dark)}
.abt-card.c4 .abt-card-lbl{color:var(--zinzolin)}
.abt-card.c5 .abt-card-lbl{color:var(--canard)}
.abt-card p{font-size:16px;line-height:1.55;color:var(--ardoise);margin:0}
@media (max-width:1200px){.abt-cards.abt-cards-5{grid-template-columns:repeat(3,1fr)}}
@media (max-width:1000px){.abt-cards,.abt-cards.abt-cards-4,.abt-cards.abt-cards-5{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.abt-cards,.abt-cards.abt-cards-4,.abt-cards.abt-cards-5{grid-template-columns:1fr}}

/* Five axes */
.abt-axes{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:8px}
.abt-axis{padding:14px;border:2px solid;border-radius:12px;background:#fff;display:flex;flex-direction:column;gap:6px;min-height:130px}
.abt-axis.a1{border-color:var(--canard)}
.abt-axis.a2{border-color:var(--mont-rose)}
.abt-axis.a3{border-color:var(--rose)}
.abt-axis.a4{border-color:var(--zinzolin)}
.abt-axis.a5{border-color:var(--acier)}
.abt-axis h4{font-size:15px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin:0;line-height:1.3}
.abt-axis.a1 h4{color:var(--canard)}
.abt-axis.a2 h4{color:var(--mont-rose-txt)}
.abt-axis.a3 h4{color:var(--rose-txt)}
.abt-axis.a4 h4{color:var(--zinzolin)}
.abt-axis.a5 h4{color:var(--acier-txt)}
.abt-axis p{font-size:16px;line-height:1.55;margin:0;color:var(--ardoise)}
@media (max-width:1000px){.abt-axes{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.abt-axes{grid-template-columns:1fr}}


/* Who we are */
.abt-whois{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:8px;align-items:stretch}
.abt-whois-card:first-child{grid-column:1 / -1}
@media(max-width:860px){.abt-whois{grid-template-columns:1fr}}
.abt-whois-card{padding:26px 28px;background:#fff;border:1px solid var(--border);border-radius:12px}
.abt-method{max-width:none}
.abt-method p{font-size:16px;line-height:1.6;color:var(--ardoise);margin:0 0 12px}
.abt-method .abt-build-date{font-size:13.5px;color:var(--taupe);opacity:.8;margin-top:4px}


.abt-whois-card h3{font-size:15px;font-weight:800;color:var(--ardoise);margin:0 0 10px;letter-spacing:.08em;text-transform:uppercase}


.abt-whois-card p{font-size:16px;line-height:1.55;color:var(--ardoise);margin:0}
/* Emphasis carries weight, not colour: the card already has a colour, and a
   second one inside the prose competed with it. */
.abt-whois-card em{color:inherit;font-style:normal;font-weight:600}
.abt-whois-card p + p{margin-top:10px}
.abt-whois-card .abt-cite{font-size:13.5px;line-height:1.45;color:var(--ardoise);opacity:.75;margin-top:12px;padding-top:10px;border-top:1px solid var(--perle)}
.abt-whois-card a{color:var(--groseille);text-decoration:underline;text-underline-offset:2px}
.abt-whois-card a:hover{color:var(--zinzolin)}
@media (max-width:1000px){.abt-whois{grid-template-columns:1fr}}

/* Why us — differentiation */
.abt-differ-text{padding:18px 20px;background:#fff;border:2px solid var(--ardoise);border-radius:12px;margin-bottom:14px}
.abt-differ-text p{font-size:16px;line-height:1.55;color:var(--ardoise);margin:0 0 10px}
.abt-differ-text p:last-of-type{margin-bottom:0}
.abt-differ-text strong{color:var(--ardoise);font-weight:700}
.abt-differ-list{list-style:none;padding:0;margin:6px 0 12px;display:flex;flex-direction:column;gap:8px}
.abt-differ-list li{font-size:15px;line-height:1.55;color:var(--ardoise);padding-left:18px;position:relative}
.abt-differ-list li::before{content:"";position:absolute;left:0;top:10px;width:7px;height:7px;border-radius:50%;background:var(--ardoise)}
.abt-differ-list li strong{color:var(--ardoise);font-weight:800}
.abt-differ-boxes{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:8px}
.abt-differ-box{padding:14px 14px;background:#fff;border:2px solid var(--ardoise);border-radius:12px;display:flex;flex-direction:column;gap:6px}
.abt-differ-lbl{font-size:15px;font-weight:800;color:var(--ardoise);letter-spacing:.02em}
.abt-differ-desc{font-size:13.5px;line-height:1.45;color:var(--ardoise)}
@media (max-width:1000px){.abt-differ-boxes{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.abt-differ-boxes{grid-template-columns:1fr}}

.abt-callout{background:var(--ardoise);color:#fff;padding:18px 24px;border-radius:12px;font-size:16.5px;line-height:1.55;font-weight:500;margin-bottom:28px;border:2px solid var(--ardoise)}

/* Foundational paper citation block (matches .abt-whois-card format) */
.abt-paper{padding:18px 20px;background:#ffffff;border:2px solid var(--zinzolin);border-radius:12px}
.abt-paper h3{font-size:16px;font-weight:800;color:var(--zinzolin);margin:0 0 10px;letter-spacing:.06em;text-transform:uppercase}
.abt-paper-body{font-size:15px;line-height:1.55;color:var(--ardoise)}
.abt-paper-body strong{color:var(--zinzolin)}
.abt-paper-body em{font-style:italic;font-weight:600}
.abt-paper-body a{color:var(--zinzolin);text-decoration:underline;text-underline-offset:2px}
.abt-paper-body a:hover{color:var(--groseille)}

/* ── 6. WHY-NOW / WEF / TRAJECTORY CARDS ─────────────────────────────────── */

/* Why now block */
.mdh-whynow{margin-bottom:28px}
.mdh-whynow-hd{font-size:15px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:#fff;background:var(--ardoise);padding:7px 14px;border-radius:4px;margin:0 0 14px;display:inline-block}
.mdh-whynow-intro{font-size:16px;line-height:1.55;color:var(--mdh-ink);margin-bottom:14px}
.mdh-whynow-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.mdh-whynow-tile{padding:16px 18px;border-radius:12px;border:2px solid var(--perle);background:#fff;display:flex;flex-direction:column;gap:6px}
.mdh-whynow-tile.m{border-color:var(--mdh-m)}
.mdh-whynow-tile.d{border-color:var(--mdh-d)}
.mdh-whynow-tile.hs{border-color:var(--mdh-hs)}
.mdh-whynow-n{font-size:22px;font-weight:800;line-height:1.15;color:var(--ardoise)}
.mdh-whynow-tile.m .mdh-whynow-n{color:var(--mdh-m)}
.mdh-whynow-tile.d .mdh-whynow-n{color:var(--mdh-d)}
.mdh-whynow-tile.hs .mdh-whynow-n{color:var(--mdh-hs)}
.mdh-whynow-t{font-size:16px;line-height:1.5;color:var(--mdh-ink)}

/* Why now — trajectory cards (escalation over time) */
/* Sub-heading inside Why now? (between WEF banner / framings / trajectories) */
.mdh-subhd{font-size:13.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ardoise);margin:22px 0 12px;display:flex;align-items:center;gap:10px}
.mdh-subhd::after{content:'';flex:1;height:1px;background:var(--perle)}

/* Recognised-as-a-threat 2-column layout: WEF (left) + framings (right, stacked) */
.mdh-major-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:8px;align-items:start}
.mdh-major-grid .mdh-wef{margin-bottom:0}
@media (max-width:1000px){.mdh-major-grid{grid-template-columns:1fr}}

/* Framing cards — stacked when in major-grid; each keeps its own frame colour
   (carotte / leman / zinzolin), border + label, via the .frame-* rules above. */
.mdh-framings{display:flex;flex-direction:column;gap:12px}

.mdh-traj{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:0}
/* Box comes from the uniform-card rule; only the flex layout is specific here. */
.mdh-traj-card{display:flex;flex-direction:column;gap:12px}
.mdh-traj-card.m{border-color:var(--mdh-m)}
.mdh-traj-card.d{border-color:var(--mdh-d)}
.mdh-traj-card.hs{border-color:var(--mdh-hs)}
.mdh-traj-tag{font-size:15px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ardoise);line-height:1.3}
.mdh-traj-card.m .mdh-traj-tag{color:var(--mdh-m)}
.mdh-traj-card.d .mdh-traj-tag{color:var(--mdh-d)}
.mdh-traj-card.hs .mdh-traj-tag{color:var(--mdh-hs)}
.mdh-traj-flow{display:flex;align-items:flex-end;gap:6px;flex-wrap:wrap}
.mdh-traj-stage{display:flex;flex-direction:column;align-items:flex-start;gap:0;line-height:1}
.mdh-traj-n{font-size:22px;font-weight:800;color:var(--ardoise);opacity:.55;line-height:1.05}
.mdh-traj-stage.end .mdh-traj-n{font-size:32px;opacity:1}
.mdh-traj-card.m .mdh-traj-stage.end .mdh-traj-n{color:var(--mdh-m)}
.mdh-traj-card.d .mdh-traj-stage.end .mdh-traj-n{color:var(--mdh-d)}
.mdh-traj-card.hs .mdh-traj-stage.end .mdh-traj-n{color:var(--mdh-hs)}
.mdh-traj-yr{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ardoise);opacity:.6;margin-top:3px}
.mdh-traj-arrow{font-size:19px;font-weight:800;color:var(--ardoise);opacity:.4;padding-bottom:4px}
.mdh-traj-note{font-size:15px;line-height:1.45;color:var(--ardoise);margin-top:auto}
@media (max-width:1000px){.mdh-traj{grid-template-columns:1fr}}
@media (max-width:1000px){.mdh-whynow-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.mdh-whynow-grid{grid-template-columns:1fr}}

/* WEF banner */
/* Box + border colour (marron) come from the uniform-card rules; keep only the spacing. */
.mdh-wef{margin-bottom:14px}
.mdh-wef-title{font-size:15px;font-weight:800;color:var(--zinzolin);margin:0 0 14px;letter-spacing:.08em;text-transform:uppercase;line-height:1.4}

/* WEF table — simple, colored lines + text only */
.mdh-wef-tbl{width:100%;border-collapse:collapse;table-layout:fixed}
.mdh-wef-tbl th,.mdh-wef-tbl td{padding:12px 12px;text-align:center;background:#fff}
.mdh-wef-tbl thead th{font-size:16px;font-weight:800;letter-spacing:.1em;color:var(--ardoise);padding:10px 12px 10px;border-bottom:3px solid var(--zinzolin);position:relative}
.mdh-wef-tbl tbody td .mdh-wef-rank{color:var(--groseille)}
.mdh-wef-tbl tbody td .mdh-wef-rank-sm{color:var(--marron)}
.mdh-wef-rowlbl{font-size:13.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ardoise);text-align:left !important;padding-left:6px !important;width:170px}
.mdh-wef-rowlbl span{display:block;font-weight:600;opacity:.6;letter-spacing:.05em;margin-top:2px}
.mdh-wef-cell-note{font-size:13.5px;font-style:italic;color:var(--ardoise);opacity:.7;margin-top:6px;line-height:1.35}
.mdh-wef-rank{font-size:36px;font-weight:800;line-height:1}
.mdh-wef-rank-sm{font-size:22px;font-weight:800;line-height:1}
.mdh-wef-st{font-size:13.5px;color:var(--mdh-ink);margin-bottom:10px}
.mdh-wef-note{font-size:13.5px;color:var(--mdh-ink);opacity:.7;font-style:italic}
.mdh-wef-quote{margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--perle);font-size:16px;color:var(--ardoise);font-style:italic;line-height:1.55}
.mdh-wef-quote-src{font-style:normal;font-size:15px;color:var(--ardoise);margin-top:5px;text-align:right;display:block}

/* definitions */
.mdh-def-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:4px}
/* Box comes from the uniform-card rule (which also sets padding:0 for def-cards). */
.mdh-def-card.m{border-color:var(--mdh-m)}
.mdh-def-card.d{border-color:var(--mdh-d)}
.mdh-def-card.hs{border-color:var(--mdh-hs)}
.mdh-def-stripe{height:5px}
.mdh-def-card.m .mdh-def-stripe{background:var(--mdh-m)}
.mdh-def-card.d .mdh-def-stripe{background:var(--mdh-d)}
.mdh-def-card.hs .mdh-def-stripe{background:var(--mdh-hs)}
.mdh-def-hd{padding:13px 16px 11px}
.mdh-def-card.m .mdh-def-hd{background:var(--mdh-m-lt)}
.mdh-def-card.d .mdh-def-hd{background:var(--mdh-d-lt)}
.mdh-def-card.hs .mdh-def-hd{background:var(--mdh-hs-lt)}
.mdh-def-name{font-size:20px;font-weight:700;margin-bottom:5px}
.mdh-def-card.m .mdh-def-name{color:var(--mdh-m)}
.mdh-def-card.d .mdh-def-name{color:var(--mdh-d)}
.mdh-def-card.hs .mdh-def-name{color:var(--mdh-hs)}
.mdh-def-tag{display:inline-block;font-size:13.5px;font-weight:600;padding:2px 9px;border-radius:12px}
.mdh-def-card.m .mdh-def-tag{background:var(--mdh-m-txt);color:#fff}
.mdh-def-card.d .mdh-def-tag{background:var(--mdh-d-txt);color:#fff}
.mdh-def-card.hs .mdh-def-tag{background:var(--mdh-hs-txt);color:#fff}
.mdh-def-body{padding:13px 16px}
.mdh-def-txt{font-size:16px;line-height:1.65;margin-bottom:11px;color:var(--mdh-ink)}
.mdh-def-quote{font-size:16px;font-style:italic;color:var(--mdh-ink);padding:10px 13px;border:1px solid var(--perle);border-radius:4px;margin:6px 0 14px;line-height:1.55;background:rgba(69,58,76,.04)}
.mdh-def-card.m .mdh-def-quote{border-color:var(--mdh-m);background:var(--mdh-m-lt)}
.mdh-def-card.d .mdh-def-quote{border-color:var(--mdh-d);background:var(--mdh-d-lt)}
.mdh-def-card.hs .mdh-def-quote{border-color:var(--mdh-hs);background:var(--mdh-hs-lt)}
.mdh-def-qsrc{font-style:normal;font-size:13.5px;color:var(--mdh-ink);display:block;margin-top:4px}
.mdh-pills{display:flex;flex-wrap:wrap;gap:5px}
.mdh-pill{font-size:13.5px;padding:2px 9px;border-radius:12px;border:1px solid}
.mdh-def-card.m .mdh-pill{border-color:var(--mdh-m2);color:var(--mdh-m);background:var(--mdh-m-lt)}
.mdh-def-card.d .mdh-pill{border-color:var(--mdh-d2);color:var(--mdh-d);background:var(--mdh-d-lt)}
.mdh-def-card.hs .mdh-pill{border-color:var(--mdh-hs2);color:var(--mdh-hs);background:var(--mdh-hs-lt)}
/* Swiss law callout: small uppercase label + clean body text. Overrides the
   <u><em>Swiss law:</em></u> markup in the YAML so it stops looking like a
   typewriter footnote. */
.mdh-def-legal{font-size:13.5px;line-height:1.6;color:var(--mdh-ink);margin-top:14px;padding:14px 16px;border-radius:0;border:none;border-top:1px solid rgba(69,58,76,0.10);position:relative}
.mdh-def-card.m  .mdh-def-legal{background:var(--mdh-m-lt);border-top-color:var(--mdh-m)}
.mdh-def-card.d  .mdh-def-legal{background:var(--mdh-d-lt);border-top-color:var(--mdh-d)}
.mdh-def-card.hs .mdh-def-legal{background:var(--mdh-hs-lt);border-top-color:var(--mdh-hs)}
.mdh-def-legal b{color:var(--mdh-ink)}
/* Strip the ugly underline + italic on "Swiss law:" and restyle as a clean
   uppercase label that breaks onto its own line. */
.mdh-def-legal u,
.mdh-def-legal em{
  text-decoration:none;
  font-style:normal;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1.8px;
  font-size:12px;
  display:block;
  margin-bottom:8px;
  color:var(--ink-muted);
}
.mdh-def-card.m  .mdh-def-legal u, .mdh-def-card.m  .mdh-def-legal em{color:var(--mdh-m)}
.mdh-def-card.d  .mdh-def-legal u, .mdh-def-card.d  .mdh-def-legal em{color:var(--mdh-d)}
.mdh-def-card.hs .mdh-def-legal u, .mdh-def-card.hs .mdh-def-legal em{color:var(--mdh-hs)}

/* ── 7. STATS · TACTIC CARDS · BUCKETS · TOPICS ──────────────────────────── */

/* stats grid */
.mdh-stats-intro{font-size:16px;color:var(--mdh-ink);margin-bottom:14px}
.mdh-stat-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(185px,100%),1fr));gap:12px;margin-bottom:4px}
.mdh-sc{padding:15px 16px;border-radius:12px;background:var(--mdh-card);border:1px solid;}
.mdh-sc.m{border-color:var(--mdh-m);background:var(--mdh-m-lt)}
.mdh-sc.d{border-color:var(--mdh-d);background:var(--mdh-d-lt)}
.mdh-sc.hs{border-color:var(--mdh-hs);background:var(--mdh-hs-lt)}
.mdh-sc-n{font-size:24px;font-weight:800;line-height:1;margin-bottom:6px;letter-spacing:-.02em}
.mdh-sc.m .mdh-sc-n{color:var(--mdh-m)}
.mdh-sc.d .mdh-sc-n{color:var(--mdh-d)}
.mdh-sc.hs .mdh-sc-n{color:var(--mdh-hs)}
.mdh-sc-t{font-size:16px;line-height:1.6;color:var(--mdh-ink)}
.mdh-sc-tab{display:inline-block;font-size:13.5px;font-weight:600;padding:1px 7px;border-radius:4px;margin-top:6px;letter-spacing:.04em;text-transform:uppercase;background:var(--mdh-surface);color:var(--mdh-ink2);border:1px solid var(--mdh-border)}

/* tactic cards */
.mdh-tac{border-radius:12px;overflow:hidden;background:var(--mdh-card);border:2px solid var(--ardoise);margin-bottom:14px}
.mdh-tac.m{border-color:var(--mdh-m)}
.mdh-tac.d{border-color:var(--mdh-d)}
.mdh-tac.hs{border-color:var(--mdh-hs)}
.mdh-tac.ai{border-color:var(--mdh-ai)}
.mdh-tac.gov{border-color:var(--mdh-gov)}
/* Legacy .mdh-rationale wrapper styles removed; the new .mdh-block + .mdh-rationale-item structure handles layout. */
.mdh-tac-stripe{display:none}
.mdh-tac.m .mdh-tac-stripe{background:linear-gradient(90deg,var(--mdh-m),var(--mdh-m2))}
.mdh-tac.d .mdh-tac-stripe{background:linear-gradient(90deg,var(--mdh-d),var(--mdh-d2))}
.mdh-tac.hs .mdh-tac-stripe{background:linear-gradient(90deg,var(--mdh-hs),var(--mdh-hs2))}
.mdh-tac.ai .mdh-tac-stripe{background:linear-gradient(90deg,var(--mdh-ai),var(--mdh-ai))}
.mdh-tac.gov .mdh-tac-stripe{background:linear-gradient(90deg,var(--mdh-gov),var(--perle))}
.mdh-tac-hd{padding:13px 16px 11px}
.mdh-tac.m .mdh-tac-hd{background:var(--mdh-m-lt)}
.mdh-tac.d .mdh-tac-hd{background:var(--mdh-d-lt)}
.mdh-tac.hs .mdh-tac-hd{background:var(--mdh-hs-lt)}
.mdh-tac.ai .mdh-tac-hd{background:var(--mdh-ai-lt)}
.mdh-tac.gov .mdh-tac-hd{background:var(--mdh-gov-lt)}
.mdh-tac-type{font-size:13.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;margin-bottom:5px}
.mdh-tac.m .mdh-tac-type{color:var(--mdh-m)}
.mdh-tac.d .mdh-tac-type{color:var(--mdh-d)}
.mdh-tac.hs .mdh-tac-type{color:var(--mdh-hs)}
.mdh-tac.ai .mdh-tac-type{color:var(--mdh-ai)}
.mdh-tac.gov .mdh-tac-type{color:var(--ardoise)}
.mdh-tac-hl{font-size:19px;font-weight:700;line-height:1.25;color:var(--mdh-ink)}
.mdh-tac.m .mdh-tac-hl,.mdh-tac.d .mdh-tac-hl,.mdh-tac.hs .mdh-tac-hl{font-size:13.5px;font-weight:600}
.mdh-tac-body{padding:13px 16px}
.mdh-tac-txt{font-size:16px;line-height:1.7;color:var(--mdh-ink);margin-bottom:10px}
.mdh-tac-evid{padding:9px 12px;border-radius:4px;font-size:16px;line-height:1.6;margin-bottom:7px;color:var(--mdh-ink)}
.mdh-tac.m .mdh-tac-evid{background:var(--mdh-m-lt);border:1px solid var(--mdh-m)}
.mdh-tac.d .mdh-tac-evid{background:var(--mdh-d-lt);border:1px solid var(--mdh-d)}
.mdh-tac-evid.hs{background:var(--mdh-hs-lt);border:1px solid var(--mdh-hs)}
.mdh-tac-evid-title{font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.mdh-tac.m .mdh-tac-evid-title{color:var(--mdh-m)}
.mdh-tac.d .mdh-tac-evid-title{color:var(--mdh-d)}
.mdh-tac.hs .mdh-tac-evid-title{color:var(--mdh-hs)}
.mdh-tac-src{font-size:13.5px;color:var(--mdh-ink);margin-top:7px;font-style:italic}
.mdh-tac-full{grid-column:1/-1}
.mdh-tac-evid-wide{grid-column:1/-1}
.mdh-tac-evid-tall{grid-row:span 2}

/* Switzerland landscape block: unthemed card with theme-coloured dots per item */
.mdh-tac-landscape{border:1px solid var(--mdh-mute)}
.mdh-tac-landscape .mdh-tac-stripe{background:linear-gradient(90deg,var(--mdh-mute),var(--mdh-faint))}
.mdh-tac-landscape .mdh-tac-hd{background:rgba(30,29,27,.04)}
.mdh-tac-landscape .mdh-tac-type{color:var(--mdh-ink2)}
.mdh-ls-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mdh-ls-item{display:grid;grid-template-columns:12px 1fr;align-items:start;gap:10px;padding:10px 12px;background:#ffffff;border-radius:4px;font-size:15px;line-height:1.5;color:var(--mdh-ink)}
.mdh-ls-wide{grid-column:1/-1}
.mdh-ls-dot{width:10px;height:10px;border-radius:50%;margin-top:6px;background:var(--mdh-mute)}
.mdh-ls-m .mdh-ls-dot{background:var(--mdh-m)}
.mdh-ls-d .mdh-ls-dot{background:var(--mdh-d)}
.mdh-ls-hs .mdh-ls-dot{background:var(--mdh-hs)}
.mdh-ls-text sup.ref{font-size:12px;vertical-align:super;opacity:.65;margin-left:1px}
@media (max-width:720px){.mdh-ls-grid{grid-template-columns:1fr}}

.mdh-tac-stat-row{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.mdh-tac-mini{flex:1;min-width:100px;padding:8px 10px;border-radius:4px;text-align:center;background:var(--mdh-m-lt)}
.mdh-mini-n{color:var(--mdh-m);font-size:26px;font-weight:800;line-height:1;margin-bottom:3px}
.mdh-tac-mini-t{font-size:13.5px;color:var(--mdh-ink);line-height:1.3}

/* pattern buckets (Origin / Spread / Impact) - horizontal 3-column layout */
.mdh-bucket-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.mdh-bucket{background:#ffffff;border-radius:12px;padding:10px 12px;min-height:80px}
.mdh-bucket-hd{font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.13em;padding:4px 8px 5px;margin-bottom:10px;border-radius:4px;display:inline-block;color:#fff;background:var(--ardoise)}
.mdh-bucket-empty{opacity:.55}
.mdh-bucket-placeholder{font-size:13.5px;font-style:italic;color:var(--mdh-ink2);padding:8px 0}
.mdh-bucket-intro{position:relative;font-size:13.5px;font-style:italic;color:var(--mdh-ink2);line-height:1.45;margin:0 0 10px;padding:6px 8px 6px 10px;border:1px solid var(--mdh-rule);background:#fff;border-radius:4px}
.mdh-bucket-intro::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--mdh-rule);border-radius:4px 0 0 4px}

/* cards within bucket columns stack vertically */
.mdh-bucket .mdh-tac-evid{margin-bottom:10px}
.mdh-bucket .mdh-tac-evid:last-child{margin-bottom:0}

/* sub_stats: stack vertically in narrow columns */
.mdh-substats-col{flex-direction:column}

/* disinformation tactics grid (used outside buckets) */
.mdh-tactics-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mdh-substats{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.mdh-substats .mdh-substat{flex:1 1 120px;min-width:0}
.mdh-substat{flex:1;text-align:center;padding:6px 4px;border-radius:4px;background:var(--mdh-d-lt)}
.mdh-substat-n{font-size:20px;font-weight:800;color:var(--mdh-d);line-height:1}
.mdh-substat-t{font-size:13.5px;color:var(--mdh-ink);margin-top:2px}
.mdh-tac.m .mdh-substat{background:var(--mdh-m-lt)}
.mdh-tac.m .mdh-substat-n{color:var(--mdh-m)}
.mdh-tac.hs .mdh-substat{background:var(--mdh-hs-lt)}
.mdh-tac.hs .mdh-substat-n{color:var(--mdh-hs)}

/* hate-speech grid */
.mdh-hs-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.mdh-hs-n{font-size:20px;font-weight:800;color:var(--mdh-hs);line-height:1;margin-bottom:5px}

/* cross-reference links from cards 1-4 to survey charts in card 5 */
.mdh-xref{position:relative;display:block;margin-top:10px;padding:7px 10px 7px 12px;font-size:13.5px;font-style:italic;line-height:1.45;color:var(--mdh-ink);background:var(--perle);border:1px solid var(--ardoise);border-radius:4px}
/* On a card it is an aside at the foot, not a boxed callout mid-page. */
#mdh-modal-overlay .c2card .mdh-xref{background:none;border:none;border-top:1px solid rgba(69,58,76,.14);
  border-radius:0;padding:14px 0 0 12px;margin:18px 0 0;font-size:12.5px;line-height:1.55;
  color:var(--ink-muted)}
#mdh-modal-overlay .c2card .mdh-xref em{font-style:normal;font-weight:600;color:var(--ink-muted)}
.mdh-xref::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--ardoise);border-radius:4px 0 0 4px}
.mdh-xref em{font-style:normal;font-weight:600}

/* Survey charts inside a topic card. A section carrying `bars` rather than
   `body` is drawn as a bar chart in the card's More Details accordion, in the
   row a prose section would take, so a survey is a topic like any other.

   One series, so one fill. Every bar on both surveys is Mont Rose, the hate
   speech pillar's own colour, and nothing is encoded in hue: the charts used to
   cycle Mont Rose / Carotte / Rose / Zinzolin / Acier / Canard by position,
   which put six categorical colours on one category and coloured the titles
   with them as well. Colour follows the entity, and the entity is the pillar.
   Mont Rose is 2.21:1 on white, under the 3:1 a fill needs to carry meaning on
   its own, so every bar prints its value: the number is what is read and the
   length is the comparison beside it. */
.mdh-charts-note{font-size:12.5px;line-height:1.5;color:var(--ink-muted);margin:10px 0 0}
.mdh-chart{min-width:0}
.mdh-chart-body{display:flex;flex-direction:column;gap:5px}
.mdh-bar-row{display:grid;grid-template-columns:minmax(120px,1.25fr) minmax(80px,1.6fr) 46px;
  align-items:center;gap:10px;font-size:15px;color:var(--mdh-ink);line-height:1.35;
  padding:3px 5px;margin:0 -5px;border-radius:6px;transition:background .12s ease}
.mdh-bar-row:hover{background:rgba(69,58,76,.05)}
.mdh-bar-label{white-space:normal;min-width:0}
.mdh-bar-track{position:relative;height:14px;background:rgba(243,152,105,.12);border-radius:0 4px 4px 0}
/* Square at the baseline, 4px round at the data end, so the zero point is a
   straight edge and the length is not flattered by a rounded start. */
.mdh-bar-fill{position:absolute;top:0;left:0;height:100%;background:var(--mont-rose);
  border-radius:0 4px 4px 0;transition:width .6s ease-out}
.mdh-bar-val{text-align:right;font-weight:700;color:var(--ardoise);font-size:15px;
  font-variant-numeric:tabular-nums}
/* The card is one narrow column on a phone, so the label takes its own line
   rather than squeezing the track to nothing. Two columns, not three: the third
   was left over from the old three-column rule and held 40px of dead air at the
   right edge, which pulled the value away from the bar it belongs to. */
@media (max-width:640px){
  .mdh-bar-row{grid-template-columns:1fr 44px;gap:8px;font-size:13.5px}
  .mdh-bar-label{grid-column:1/-1;margin-bottom:2px}
  .mdh-bar-row > .mdh-bar-track{grid-column:1/2}
  .mdh-bar-row > .mdh-bar-val{grid-column:2/3}
}

/* AI tab */
.mdh-ai-call{padding:14px 18px;border:3px solid var(--perle);border-radius:12px;font-size:16px;line-height:1.55;margin-bottom:24px;color:var(--mdh-ink);background:#ffffff}
.mdh-ai-call b{color:var(--mdh-ink)}
.mdh-ai-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;margin-bottom:4px}
.mdh-ai-block{background:var(--mdh-ai-lt);border-radius:12px;padding:10px 12px;border:1px solid rgba(92,36,131,.18);margin-bottom:8px}
.mdh-ai-src{font-size:13.5px;font-weight:700;font-style:italic;color:var(--mdh-ai);margin-bottom:8px}
.mdh-tac.ai .mdh-tac-evid{background:rgba(92,36,131,.09);border:1px solid var(--mdh-ai)}
.mdh-ai-n{font-size:30px;font-weight:800;color:var(--mdh-ai);line-height:1;margin-bottom:4px}
.mdh-ai-lbl{font-size:13.5px;font-weight:700;color:var(--mdh-ai);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.mdh-sev-row{display:flex;gap:7px;margin:6px 0 8px}
.mdh-sev-tier{flex:1;text-align:center;padding:7px 3px;border-radius:4px;background:rgba(92,36,131,.12)}
.mdh-sev-n{font-size:20px;font-weight:800;color:var(--mdh-ai);line-height:1}
.mdh-sev-t{font-size:13.5px;margin-top:2px}

/* Theme color overrides for AI tab dimension cards */
.mdh-t-m{color:var(--mdh-m) !important}
.mdh-t-d{color:var(--mdh-d) !important}
.mdh-t-hs{color:var(--mdh-hs) !important}
.mdh-t-ai{color:var(--mdh-ai) !important}
.mdh-blk-m{background:var(--mdh-m-lt);border-color:var(--mdh-m2)}
.mdh-blk-d{background:var(--mdh-d-lt);border-color:var(--mdh-d2)}
.mdh-blk-hs{background:var(--mdh-hs-lt);border-color:var(--mdh-hs2)}
.mdh-blk-ai{background:var(--mdh-ai-lt);border-color:rgba(92,36,131,.18)}
.mdh-tac.m .mdh-tac-evid{background:var(--mdh-m-lt);border:1px solid var(--mdh-m)}
.mdh-tac.d .mdh-tac-evid{background:var(--mdh-d-lt);border:1px solid var(--mdh-d)}
.mdh-tac.hs .mdh-tac-evid{background:var(--mdh-hs-lt);border:1px solid var(--mdh-hs)}
.mdh-tb-m{background:rgba(168,58,50,.12)}
.mdh-tb-d{background:rgba(69,58,76,.12)}
.mdh-tb-hs{background:rgba(138,90,43,.12)}
.mdh-tb-ai{background:rgba(92,36,131,.12)}

/* Switzerland - legal */
.mdh-legal-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:14px;align-items:start}
.mdh-lc{border-radius:12px;overflow:hidden;background:var(--mdh-card);}
.mdh-lc-top{height:4px}
.mdh-lc:nth-child(1) .mdh-lc-top{background:var(--mdh-m)}
.mdh-lc:nth-child(2) .mdh-lc-top{background:var(--mdh-d)}
.mdh-lc:nth-child(3) .mdh-lc-top{background:var(--mdh-hs)}
.mdh-lc-hd{padding:9px 14px 8px;border-bottom:1px solid var(--mdh-rule)}
.mdh-lc:nth-child(1) .mdh-lc-hd{background:var(--mdh-m-lt)}
.mdh-lc:nth-child(2) .mdh-lc-hd{background:var(--mdh-d-lt)}
.mdh-lc:nth-child(3) .mdh-lc-hd{background:var(--mdh-hs-lt)}
.mdh-lc-name{font-size:13.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.mdh-lc:nth-child(1) .mdh-lc-name{color:var(--mdh-m)}
.mdh-lc:nth-child(2) .mdh-lc-name{color:var(--mdh-d)}
.mdh-lc:nth-child(3) .mdh-lc-name{color:var(--mdh-hs)}
.mdh-lc-body{padding:11px 14px;font-size:16px;line-height:1.7;color:var(--mdh-ink)}
.mdh-lc-note{font-size:15px;color:var(--mdh-ink);font-style:italic;margin-top:7px;padding-top:7px;border-top:1px solid var(--mdh-rule)}
.mdh-gap-tags{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}
.mdh-gt{font-size:13.5px;padding:2px 9px;border-radius:4px;background:var(--mdh-hs-lt);color:var(--mdh-hs);border:1px solid var(--mdh-hs2);font-weight:500}
.mdh-warn{margin-top:9px;padding:8px 11px;border-radius:4px;background:var(--mdh-hs-lt);border:1px solid var(--mdh-hs);font-size:15px;color:var(--mdh-hs);line-height:1.6}

/* Switzerland - bottom grid */
.mdh-sw-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:4px;align-items:start}
.mdh-sw-stack{display:flex;flex-direction:column;gap:14px}
.mdh-sw-card{border-radius:12px;overflow:hidden;background:var(--mdh-card);}
.mdh-sw-card-top{height:4px;background:var(--mdh-sw)}
.mdh-sw-card-hd{padding:9px 14px 8px;background:var(--mdh-sw-bg);border-bottom:1px solid var(--mdh-rule)}
.mdh-sw-card-name{font-size:13.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mdh-sw)}
.mdh-sw-card-body{padding:12px 14px;font-size:16px;line-height:1.7;color:var(--mdh-ink)}
.mdh-bul{font-size:16px;line-height:1.65;color:var(--mdh-ink);display:flex;gap:8px;padding:3px 0}
.mdh-bul::before{content:"-";color:var(--mdh-faint);flex-shrink:0;font-size:16.5px;line-height:1.2}
.mdh-sstat{display:flex;gap:8px;align-items:flex-start;padding:5px 10px;border-radius:4px;background:var(--mdh-sw-bg);border:1px solid var(--ardoise);margin-bottom:5px;font-size:16px;line-height:1.55;color:#fff}
.mdh-sstat-n{font-size:16.5px;font-weight:800;color:var(--mdh-sw);white-space:nowrap;flex-shrink:0}
.mdh-verify{background:var(--mdh-m-lt);border:1px solid var(--mdh-m);border-radius:4px;padding:7px 11px;margin-top:7px;font-size:15px;color:var(--mdh-ink);line-height:1.5}
.mdh-verify-tag{font-size:13.5px;font-weight:700;color:var(--mdh-m);text-transform:uppercase;letter-spacing:.06em}
.mdh-sfooter{padding:14px 0 4px;text-align:center;font-size:15px;color:var(--mdh-ink);margin-top:14px}

/* ── 8. CHARTS · SWITZERLAND / LEGAL · REFERENCES ────────────────────────── */

/* references */
.mdh-refs-intro{font-size:16px;color:var(--mdh-ink);margin-bottom:20px;line-height:1.65}
.mdh-refs-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 28px}
.mdh-ri{font-size:15px;line-height:1.6;color:var(--mdh-ink);display:flex;gap:6px;padding:3px 0;border-bottom:1px solid var(--mdh-rule)}
.mdh-rn{font-weight:700;flex-shrink:0;min-width:32px;color:var(--zinzolin)}
.mdh-ri a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* ── new topic-list bucket shape (used by Patterns × Misinformation) ── */
.mdh-bucket-row-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:start;margin-bottom:14px}
.mdh-bucket-row-4 .mdh-bucket{padding:12px}
.mdh-bucket-row-4 .mdh-bucket-hd{display:block;width:100%;text-align:left;margin-bottom:12px}
.mdh-bucket-row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:start;margin-bottom:14px}
.mdh-bucket-row-3 .mdh-bucket{padding:12px}
.mdh-bucket-row-3 .mdh-bucket-hd{display:block;width:100%;text-align:left;margin-bottom:12px}
/* Beyond EPFL sets these columns on a white band, where the white column box does not show, so its
   12px side padding put the header bars and rows 12px in from the band's text edge (2026-09-14). */
#beyond-gov .mdh-bucket{padding-left:0;padding-right:0}
/* Governance carries a fourth, internal-only bucket (see renderBucketsGovernance in
   mdh-buckets.js). It is display:none for the public, so the row stays a 3-column grid and
   the public layout is unchanged; once body.internal-unlocked reveals it, the grid widens to
   4 so the extra column sits beside the others rather than wrapping under them. */

/* topic = expandable <details>, styled like disinfo evidence cards */
/* Idea 1: borderless striped list, flush rows, alternating two tints of the pillar colour */
.mdh-topic{margin-bottom:0;border-radius:0;border:none;background:#ffffff}
.mdh-topic.m{background:var(--mdh-m-lt)}
.mdh-topic.d{background:var(--mdh-d-lt)}
.mdh-topic.hs{background:var(--mdh-hs-lt)}
.mdh-topic.gov{background:var(--mdh-gov-lt)}
.mdh-topic.m:nth-of-type(even),
.mdh-topic.d:nth-of-type(even),
.mdh-topic.hs:nth-of-type(even),
.mdh-topic.gov:nth-of-type(even){background:#ffffff}
.mdh-topic:hover{filter:brightness(0.97)}
.mdh-topic-summary{flex:1;list-style:none;cursor:pointer;padding:9px 12px;font-size:15px;line-height:1.4;font-weight:600;display:flex;flex-direction:column;gap:2px;position:relative;padding-right:32px;color:var(--ardoise)}
.mdh-topic-summary::-webkit-details-marker{display:none}
.mdh-topic-summary::after{content:'+';position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:19px;font-weight:700;transition:transform .15s}
.mdh-topic.m .mdh-topic-summary::after{color:var(--mdh-m)}
.mdh-topic.d .mdh-topic-summary::after{color:var(--mdh-d)}
.mdh-topic.hs .mdh-topic-summary::after{color:var(--mdh-hs)}
.mdh-topic.gov .mdh-topic-summary::after{color:var(--ardoise)}
.mdh-topic[open] > .mdh-topic-summary::after{content:'−'}
.mdh-topic-id{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,monospace;font-size:13.5px;font-weight:700;letter-spacing:.04em;padding:1px 6px;border-radius:4px;margin-right:6px;color:#ffffff;vertical-align:1px}
.mdh-topic.m .mdh-topic-id{background:var(--mdh-m)}
.mdh-topic.d .mdh-topic-id{background:var(--mdh-d)}
.mdh-topic.hs .mdh-topic-id{background:var(--mdh-hs)}
.mdh-topic.gov .mdh-topic-id{background:var(--mdh-gov);color:var(--ardoise)}
.mdh-topic-label-text{font-size:15px;font-weight:600;color:var(--ardoise)}
.mdh-topic-findings{padding:8px 14px 13px;font-size:16px;line-height:1.65;color:var(--mdh-ink);border-top:1px dashed var(--mdh-rule)}
.mdh-topic-findings .mdh-substats{margin-top:10px}
.mdh-topic-findings ul{margin:6px 0 0 18px;padding:0}
.mdh-topic-xrefs{margin-top:10px;padding-top:8px;border-top:1px dotted var(--mdh-rule);font-size:13.5px;line-height:1.5;color:var(--mdh-ink2)}
.mdh-topic-xrefs-label{font-weight:600;color:var(--ardoise);margin-right:6px}
.mdh-xref-link{display:inline-block;cursor:pointer;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,monospace;font-size:13.5px;font-weight:700;padding:1px 6px;margin:0 4px 2px 0;border-radius:4px;background:var(--perle);color:var(--ardoise);border:1px solid var(--mdh-rule);text-decoration:none}
.mdh-xref-link:hover{background:var(--perle);border-color:var(--perle)}

/* highlight target on cross-ref jump */
.mdh-topic.mdh-topic-flash{animation:mdh-topic-flash-anim 1.6s ease-out}
@keyframes mdh-topic-flash-anim{0%{}100%{}}

/* featured stats strip at bucket bottom */
.mdh-bucket-feat{margin-top:14px;padding:14px 0 2px;background:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));gap:10px;align-items:stretch}
.mdh-bucket-feat-item{display:flex;flex-direction:column;gap:5px;padding:12px 14px;border-radius:12px;background:#fff}
.mdh-tac.m .mdh-bucket-feat-item{background:var(--mdh-m-lt)}
.mdh-tac.d .mdh-bucket-feat-item{background:var(--mdh-d-lt)}
.mdh-tac.hs .mdh-bucket-feat-item{background:var(--mdh-hs-lt)}
.mdh-bucket-feat-n{font-size:24px;font-weight:800;color:var(--mdh-ink);letter-spacing:-.01em;line-height:1}
.mdh-bucket-feat-t{font-size:13.5px;color:var(--mdh-ink);line-height:1.35}

/* horizontal full-width Most-impacted band (pure white) */
.mdh-bucket-impacted{margin-top:6px;padding:14px 16px;border-radius:12px;background:#ffffff;border:none}
.mdh-tac.m .mdh-bucket-impacted{border-color:var(--mdh-m)}
.mdh-tac.d .mdh-bucket-impacted{border-color:var(--mdh-d)}
.mdh-tac.hs .mdh-bucket-impacted{border-color:var(--mdh-hs)}
.mdh-bucket-impacted .mdh-bucket-hd{margin-bottom:12px}
.mdh-topic-list-horiz{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:10px}
.mdh-topic-list-horiz .mdh-topic{margin-bottom:0}
.mdh-bucket-footer{margin-top:12px;padding-top:10px;border-top:1px solid var(--mdh-rule);font-size:13.5px;line-height:1.5;color:var(--mdh-ink2)}

/* ── A1: Start-here intro paragraph (top of MDH Context tab) ── */
/* Sits above the sub-tab nav. Cancels the nav's negative top margin so they don't overlap. */
/* Lives directly on the dark page background: white body text, pearl-pink title. */
/* Toggle button (lives in .mdh-subtab-actions row above). Phantom-style outline. */
.mdh-guide-toggle{font-family:var(--sans);font-size:13.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;background:transparent;color:var(--canard);border:1px solid var(--canard);padding:8px 14px;cursor:pointer;transition:background .15s,color .15s}
.mdh-guide-toggle:hover{background:var(--canard);color:#fff}
body.track-research .mdh-guide-toggle{display:none}

/* ── C2: bucket-key legend (Patterns / AI / Switzerland sub-tabs) ── */
.mdh-blgnd{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:12px 0 18px;padding:10px 14px;background:#fff;border:1px solid var(--mdh-rule);border-radius:4px;font-size:13.5px}
.mdh-blgnd-hd{font-size:13.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--zinzolin)}
.mdh-blgnd-item{display:inline-flex;align-items:center;gap:6px;line-height:1.3}
.mdh-blgnd-key{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,monospace;font-size:13.5px;font-weight:700;padding:1px 6px;border-radius:4px;background:var(--ardoise);color:#fff;min-width:14px;text-align:center}
.mdh-blgnd-lbl{color:var(--mdh-ink)}
.mdh-blgnd-note{flex-basis:100%;font-size:13.5px;color:var(--mdh-ink2);line-height:1.5;padding-top:4px;border-top:1px dotted var(--mdh-rule)}
.mdh-blgnd-note code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,monospace;font-size:13.5px;background:var(--perle);border:1px solid var(--mdh-rule);border-radius:4px;padding:0 4px}

/* ── C3: cross-section xref looks slightly different to signal "leaves this sub-tab" ── */
.mdh-xref-link.mdh-xref-ext{background:var(--soufre);border-color:var(--chartreuse)}
.mdh-xref-link.mdh-xref-ext:hover{background:var(--soufre);border-color:var(--chartreuse)}

/* ── D1: governance jurisdiction chip ── */
.mdh-topic-jur{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,monospace;font-size:12px;font-weight:700;letter-spacing:.04em;padding:1px 6px;border-radius:4px;margin-right:6px;color:#fff;vertical-align:1px}
.mdh-topic-jur-eu{background:var(--acier)}
.mdh-topic-jur-ch{background:var(--groseille)}
.mdh-topic-jur-int{background:var(--canard)}
.mdh-topic-jur-ind{background:var(--marron)}
.mdh-blgnd-gov .mdh-topic-jur{margin-right:0}

/* ── D2: References reverse-lookup ("Used in:" line) ── */
.mdh-ri{align-items:flex-start}
.mdh-ri-body{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.mdh-ri-used{font-size:13.5px;line-height:1.5;color:var(--mdh-ink2);padding-top:3px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.mdh-ri-used-label{font-weight:600;color:var(--ardoise);margin-right:2px}
.mdh-ri-more{font-size:13.5px;color:var(--mdh-ink2);font-style:italic}
.mdh-ri-used .mdh-xref-link{font-size:12px;padding:0 5px;margin:0}
/* The badges and "+N more" are buttons now, so the keyboard reaches them (A39, A40, 2026-09-14). These
   put back what a button's own styles take away. */
button.mdh-xref-link{line-height:1.5;appearance:none}
button.mdh-xref-link:focus-visible,button.mdh-ri-more:focus-visible{outline:2px solid var(--canard);outline-offset:2px}
button.mdh-ri-more{appearance:none;background:none;border:none;padding:0;font-family:inherit;line-height:inherit;
  text-decoration:underline;text-underline-offset:2px;cursor:pointer}
button.mdh-ri-more:hover{color:var(--ardoise)}
/* A citation reached by Tab shows where focus is (A16, 2026-09-14). */
sup.ref[role="button"]:focus-visible{outline:2px solid var(--canard);outline-offset:1px;border-radius:2px}

/* ── 10. RESPONSIVE OVERRIDES ────────────────────────────────────────────── */

/* responsive */
@media(max-width:1500px){
  #panel-mdh .mdh-bucket-row-4{grid-template-columns:repeat(2,1fr)}
  #panel-mdh .mdh-bucket-row-3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:880px){
  #panel-mdh .mdh-legal-row{grid-template-columns:1fr}
  /* Definition cards: instead of one very tall stacked column, make them a
     horizontal scroll-snap row the reader swipes card-to-card. Fully
     user-driven (touch + keyboard), no autoplay, no JS - the only
     "carousel-like" pattern UX research endorses. ~85% width so the next peeks.
     #panel-mdh scope matches the base rule's specificity so these win; the
     inner rules cancel the desktop subgrid/row-span. */
  #panel-mdh .mdh-def-row{
    display:flex;
    grid-template-columns:none;
    grid-template-rows:none;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-left:2px;
    padding-bottom:10px;
  }
  #panel-mdh .mdh-def-row > .mdh-def-card{
    flex:0 0 85%;
    scroll-snap-align:start;
    display:flex;
    flex-direction:column;
    grid-template-rows:none;
    grid-row:auto;
  }
  #panel-mdh .mdh-ai-grid,#panel-mdh .mdh-sw-grid,#panel-mdh .mdh-tactics-grid,#panel-mdh .mdh-hs-grid,#panel-mdh .mdh-refs-grid{grid-template-columns:1fr}
  #panel-mdh .mdh-bucket-row,#panel-mdh .mdh-bucket-row-4,#panel-mdh .mdh-bucket-row-3{grid-template-columns:1fr}
  #panel-mdh .mdh-topic-list-horiz{grid-template-columns:1fr}
  #panel-mdh .mdh-wef-yr-row{grid-template-columns:1fr}
}

/* ── 9. TOPIC MODAL + REFERENCE POPOVER ──────────────────────────────────── */

/* ── Thematic-card (new shape) — collapsed appearance + modal trigger ── */
.mdh-topic-modal-trigger{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;text-align:left;padding:10px 12px;margin:0;border:none;border-radius:0;background:#fff;color:var(--mdh-ink);cursor:pointer;font-family:inherit;font-size:16px;line-height:1.45;transition:filter .1s}
.mdh-topic-modal-trigger:hover{filter:brightness(0.96)}
.mdh-topic-modal-trigger:focus{outline:2px solid var(--zinzolin);outline-offset:2px}
/* Pillar accent applied via border-color, not stripe thickness, so all four
   sides of the box are 1px and symmetric. The colour identifies the pillar;
   the geometry stays uniform. */
.mdh-topic-modal-trigger.m{border-color:var(--mdh-m)}
.mdh-topic-modal-trigger.d{border-color:var(--mdh-d)}
.mdh-topic-modal-trigger.hs{border-color:var(--mdh-hs)}
.mdh-topic-modal-trigger.gov{border-color:var(--mdh-gov)}
/* (.mdh-topic-modal-cue removed: the topic-card '+' indicator now comes from
   the shared .mdh-topic-summary::after rule, so we have one '+' not two.) */

/* ── Purple chip — source ambiguous on M vs D ── */
.mdh-topic-jur-purple{background:var(--zinzolin);color:#fff}

/* ── Modal overlay + panel ── */
.mdh-modal-overlay{--mdh-m:#ED6E9C;--mdh-m2:#F4A3BF;--mdh-d:#4F8FCC;--mdh-d2:#8BB5DE;--mdh-hs:#F39869;--mdh-hs2:#F7BC9E;--mdh-ai:#5C2483;--mdh-gov:#CAC7C7;--mdh-ink:#453A4C;--mdh-ink2:#453A4C;--mdh-rule:rgba(69,58,76,.08);position:fixed;inset:0;background:rgba(20,18,26,.55);display:flex;align-items:center;justify-content:center;z-index:200;padding:24px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.mdh-modal{position:relative;background:#fff;max-width:920px;width:100%;max-height:90vh;border-radius:12px;box-shadow:0 16px 48px rgba(0,0,0,.35);display:flex;flex-direction:column;overflow:hidden;animation:mdh-modal-in .18s ease-out}
@keyframes mdh-modal-in{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}
/* Pillar-accent stripe rendered as a top pseudo-element so the modal box stays
   fully and symmetrically rounded (no asymmetric border-top). */
.mdh-modal.m::before,
.mdh-modal.d::before,
.mdh-modal.hs::before,
.mdh-modal.gov::before{content:'';position:absolute;left:0;right:0;top:0;height:5px;border-radius:12px 12px 0 0}
.mdh-modal.m::before{background:var(--mdh-m)}
.mdh-modal.d::before{background:var(--mdh-d)}
.mdh-modal.hs::before{background:var(--mdh-hs)}
.mdh-modal.gov::before{background:var(--mdh-gov)}
.mdh-modal-header{display:flex;align-items:flex-start;gap:14px;padding:18px 22px 12px;border-bottom:1px solid var(--mdh-rule)}
.mdh-modal-title{flex:1;font-size:19px;font-weight:700;line-height:1.35;color:var(--mdh-ink)}
.mdh-modal-bucket{display:inline-block;font-size:13.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--zinzolin);background:var(--perle);padding:2px 8px;border-radius:4px;margin-right:8px;vertical-align:2px}
.mdh-modal-close{background:none;border:none;font-size:28px;line-height:1;color:var(--mdh-ink2);cursor:pointer;padding:0 4px;font-family:inherit;flex-shrink:0}
.mdh-modal-close:hover{color:var(--mdh-ink)}
.mdh-modal-body{padding:18px 22px;overflow-y:auto;font-size:15px;line-height:1.65;color:var(--mdh-ink);flex:1}
.mdh-modal-body ul{margin:6px 0 0 18px;padding:0}
.mdh-modal-body li{margin:4px 0}
.mdh-modal-body sup.ref{cursor:pointer;color:var(--zinzolin);font-weight:700}
.mdh-modal-briefly{margin-bottom:14px}
.mdh-modal-briefly-body{font-size:16px;line-height:1.6;color:var(--mdh-ink)}
.mdh-modal-general{margin-bottom:14px;padding-bottom:14px;border-bottom:1px dotted var(--mdh-rule)}
.mdh-modal-substats{margin:14px 0 0;padding:14px 0 0;border-top:1.5px solid var(--mdh-rule)}
.mdh-modal-substats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:10px;margin-top:6px}
.mdh-modal-substat{display:flex;flex-direction:column;gap:2px;padding:6px 0;background:none;border:none}
.mdh-modal-substat-n{font-size:19px;font-weight:800;color:var(--zinzolin);line-height:1.15}
.mdh-modal.m .mdh-modal-substat-n{color:var(--mdh-m)}
.mdh-modal.d .mdh-modal-substat-n{color:var(--mdh-d)}
.mdh-modal.hs .mdh-modal-substat-n{color:var(--mdh-hs)}
.mdh-modal-substat-t{font-size:13.5px;color:var(--mdh-ink2);line-height:1.35}
.mdh-modal-section{margin-top:14px;padding-top:10px}
.mdh-modal-section-heading{font-size:15px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--zinzolin);margin-bottom:6px;border-left:3px solid var(--mdh-d);padding-left:8px}
.mdh-modal.m .mdh-modal-section-heading{border-left-color:var(--mdh-m);color:var(--groseille)}
.mdh-modal.hs .mdh-modal-section-heading{border-left-color:var(--mdh-hs);color:var(--groseille)}
.mdh-modal-section-body{padding-left:11px}
/* Card title, Briefly heading, section headings and reference [N] superscripts all take
   the card's M/D/H section colour: Rose (M), Acier (D), Mont Rose (HS). Key numbers
   (.mdh-modal-substat-n) already follow the section colour. */
.mdh-modal.m .mdh-modal-title,
.mdh-modal.m .mdh-modal-section-heading,
.mdh-modal.m .mdh-modal-briefly .mdh-modal-mini-heading,
.mdh-modal.m .mdh-modal-body sup.ref{color:var(--mdh-m)}
.mdh-modal.d .mdh-modal-title,
.mdh-modal.d .mdh-modal-section-heading,
.mdh-modal.d .mdh-modal-briefly .mdh-modal-mini-heading,
.mdh-modal.d .mdh-modal-body sup.ref{color:var(--mdh-d)}
.mdh-modal.hs .mdh-modal-title,
.mdh-modal.hs .mdh-modal-section-heading,
.mdh-modal.hs .mdh-modal-briefly .mdh-modal-mini-heading,
.mdh-modal.hs .mdh-modal-body sup.ref{color:var(--mdh-hs)}
/* Bullet lead-ins: bold instead of italic + underlined (leaves standalone <em> emphasis intact) */
.mdh-modal-body u{text-decoration:none}
.mdh-modal-body u em{font-style:normal;font-weight:700}
/* Per-card restyle preview (Outrage card only); generalise on approval. */
.mdh-modal.mdh-modal-restyle .mdh-modal-title{color:var(--mdh-ink)}
.mdh-modal-restyle.m .mdh-modal-substats .mdh-modal-mini-heading{color:var(--mdh-m)}
.mdh-modal-restyle.d .mdh-modal-substats .mdh-modal-mini-heading{color:var(--mdh-d)}
.mdh-modal-restyle.hs .mdh-modal-substats .mdh-modal-mini-heading{color:var(--mdh-hs)}
/* Numbers stay Ardoise and smaller; section titles smaller, no left rule */
.mdh-modal.mdh-modal-restyle .mdh-modal-substat-n{font-size:16.5px}
.mdh-modal.mdh-modal-restyle .mdh-modal-section-heading{font-size:13.5px;border-left:none;padding-left:0;color:var(--mdh-ink)}
/* Modal header: align the id + M/D badges with the card name */
.mdh-modal-title{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
/* "Deeper dive" card wrapping all section subtitles (restyle preview) */
.mdh-modal-restyle .mdh-modal-deepdive{border:none;border-top:1.5px solid var(--mdh-rule);border-radius:0;padding:14px 0 0;margin-top:14px}
.mdh-modal.m .mdh-modal-deepdive .mdh-modal-mini-heading{color:var(--mdh-m)}
.mdh-modal.d .mdh-modal-deepdive .mdh-modal-mini-heading{color:var(--mdh-d)}
.mdh-modal.hs .mdh-modal-deepdive .mdh-modal-mini-heading{color:var(--mdh-hs)}
.mdh-modal-deepdive .mdh-modal-section:first-of-type{margin-top:8px}
/* M/D/H separation lines between Briefly / Key numbers / Deeper dive. */
.mdh-modal.m .mdh-modal-substats,.mdh-modal.m .mdh-modal-deepdive{border-top-color:var(--mdh-m)}
.mdh-modal.d .mdh-modal-substats,.mdh-modal.d .mdh-modal-deepdive{border-top-color:var(--mdh-d)}
.mdh-modal.hs .mdh-modal-substats,.mdh-modal.hs .mdh-modal-deepdive{border-top-color:var(--mdh-hs)}
/* Deeper-dive summary: clickable heading with a pillar-coloured collapse triangle. */
.mdh-modal-deep-summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;margin-bottom:0}
.mdh-modal-deep-summary::-webkit-details-marker{display:none}
.mdh-modal-deep-summary::before{content:"";flex:none;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid currentColor;transform:rotate(-90deg);transition:transform .2s}
.mdh-modal-deepdive[open] .mdh-modal-deep-summary::before{transform:rotate(0)}
.mdh-modal-deep-body{margin-top:10px}
/* Modal breadcrumb (section / bucket) + topic-id badge */
.mdh-modal-crumb{font-size:13.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;margin-bottom:4px}
.mdh-modal.m .mdh-modal-crumb{color:var(--mdh-m)}
.mdh-modal.d .mdh-modal-crumb{color:var(--mdh-d)}
.mdh-modal.hs .mdh-modal-crumb{color:var(--mdh-hs)}
.mdh-modal-id{display:inline-block;font-size:13.5px;font-weight:800;padding:1px 6px;border-radius:4px;color:#fff;margin-right:6px;vertical-align:2px;background:var(--ardoise)}
.mdh-modal.m .mdh-modal-id{background:var(--mdh-m)}
.mdh-modal.d .mdh-modal-id{background:var(--mdh-d)}
.mdh-modal.hs .mdh-modal-id{background:var(--mdh-hs)}
.mdh-modal-scope,.mdh-modal-seealso,.mdh-modal-sources{margin-top:16px;padding-top:12px;border-top:1px dotted var(--mdh-rule);font-size:13.5px;color:var(--mdh-ink2)}
.mdh-modal-mini-heading{font-size:13.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ardoise);margin-right:6px;display:block;margin-bottom:6px}
.mdh-modal-sources sup.ref{margin-right:4px}
.mdh-modal-seealso ul{margin:2px 0 0 18px}
@media(max-width:640px){
  .mdh-modal-overlay{padding:8px}
  .mdh-modal{max-height:96vh}
  .mdh-modal-header,.mdh-modal-body{padding-left:14px;padding-right:14px}
}

/* ── Reference popover (preview a cited reference inline) ── */
.mdh-ref-popover{
  position:fixed;z-index:300;background:#fff;
  border:1px solid var(--mdh-border);border-radius:12px;
  box-shadow:0 12px 32px rgba(20,18,26,.22);
  max-width:440px;max-height:60vh;overflow-y:auto;
  font-size:15px;line-height:1.55;color:var(--mdh-ink);
  padding:14px 16px 12px;
  animation:mdh-ref-pop-in .14s ease-out;
}
@keyframes mdh-ref-pop-in{from{transform:translateY(4px);opacity:0}to{transform:translateY(0);opacity:1}}
.mdh-ref-pop-close{
  position:absolute;top:4px;right:6px;background:none;border:none;
  font-size:20px;line-height:1;color:var(--mdh-ink2);cursor:pointer;
  padding:2px 6px;font-family:inherit;opacity:.6;
}
.mdh-ref-pop-close:hover{opacity:1;color:var(--mdh-ink)}
.mdh-ref-pop-list{display:flex;flex-direction:column;gap:12px}
.mdh-ref-pop-entry{display:flex;gap:10px;align-items:flex-start}
.mdh-ref-pop-entry + .mdh-ref-pop-entry{padding-top:10px;border-top:1px dotted var(--mdh-rule)}
.mdh-ref-pop-num{
  flex-shrink:0;font-weight:800;color:var(--zinzolin);
  font-size:13.5px;padding-top:1px;min-width:34px;
}
/* min-width:0 and overflow-wrap let a long URL break inside the popover. Without them the flex item
   grew to the URL's full width and the text ran out of the box and off the right of the screen. */
.mdh-ref-pop-text{flex:1;min-width:0;overflow-wrap:anywhere;font-size:13.5px;line-height:1.55}
.mdh-ref-pop-text a{color:var(--zinzolin);text-decoration:underline;text-underline-offset:2px}
.mdh-ref-pop-text a:hover{color:var(--groseille,var(--groseille))}
/* The citation text is the link to References: body colour, a quiet underline. */
.mdh-ref-pop-open{color:inherit !important;text-decoration:underline !important;
  text-decoration-color:rgba(69,58,76,.35) !important;text-underline-offset:2px}
.mdh-ref-pop-open:hover{color:var(--zinzolin) !important;text-decoration-color:currentColor !important}
.mdh-ref-pop-missing .mdh-ref-pop-text{color:var(--mdh-ink2)}
/* Bottom-sheet variant for narrow viewports */
.mdh-ref-popover.mdh-ref-popover-sheet{
  left:0;right:0;bottom:0;top:auto;
  max-width:none;max-height:70vh;
  border-radius:12px 12px 0 0;
  padding:18px 18px 22px;
  box-shadow:0 -8px 32px rgba(20,18,26,.28);
}

/* YAML-defined intro content merged inside the unified intro banner.
   Separated from the standard body by a thin Perle-dotted divider so the
   reader sees two distinct pieces (skill's eye-catch lede + tab-specific
   context) but inside one styled card, not two stacked boxes. */
.mdh-tab-intro-extra{
  font-family:var(--sans);
  font-size:15px;
  line-height:1.6;
  color:var(--ardoise);
  margin-top:12px;
  padding-top:12px;
  border-top:1px dotted rgba(69,58,76,.25);
}
.mdh-tab-intro-extra :first-child{margin-top:0}
.mdh-tab-intro-extra :last-child{margin-bottom:0}

/* Reading-guide note appended below the intro body, used by Patterns / AI /
   Switzerland tabs to explain the purple M/D ambiguity chip. Subtle so it
   doesn't compete with the main lede. */
.mdh-tab-intro-note{
  font-family:var(--sans);
  font-size:13.5px;
  line-height:1.5;
  color:var(--ardoise);
  margin:10px 0 0;
  padding-top:8px;
  border-top:1px dotted rgba(69,58,76,.22);
}
.mdh-tab-intro-note .mdh-topic-jur{
  display:inline-block;font-size:12px;font-weight:800;
  padding:1px 5px;border-radius:4px;letter-spacing:.05em;
  vertical-align:middle;line-height:1.3;margin:0 1px;
}
.mdh-tab-intro-note .mdh-topic-jur-purple{
  background:rgba(92,36,131,.12);color:var(--zinzolin);border:1px solid rgba(92,36,131,.45);
}

/* ── Ask the Research: the chat sub-tab (mdh-tchat) ─────────────────────────
   Markup comes from mdhTabChat() in panel-mdh.js, behaviour from panel-chat.js.
   Colours are the EPFL tokens only: Canard for the assistant, Ardoise for the
   reader, Perle for every rule. */
#panel-mdh .mdh-chat{display:flex;flex-direction:column;gap:14px;max-width:860px}
#panel-mdh .mdh-chat-head{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between}
#panel-mdh .mdh-chat-aud{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
#panel-mdh .mdh-chat-aud-label{font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ardoise);opacity:.6;margin-right:2px}
#panel-mdh .mdh-chat-aud-btn{font-family:var(--sans);font-size:13.5px;font-weight:700;color:var(--ardoise);
  background:#fff;border:1.5px solid var(--perle);border-radius:999px;padding:5px 13px;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s}
#panel-mdh .mdh-chat-aud-btn:hover{border-color:var(--ardoise)}
#panel-mdh .mdh-chat-aud-btn.active{background:var(--ardoise);color:#fff;border-color:var(--ardoise)}
#panel-mdh .mdh-chat-reset{font-family:var(--sans);font-size:13.5px;font-weight:700;color:var(--ardoise);
  background:none;border:none;cursor:pointer;text-decoration:underline;opacity:.7}
#panel-mdh .mdh-chat-reset:hover{opacity:1}

#panel-mdh .mdh-chat-thread{display:flex;flex-direction:column;gap:14px;min-height:0;max-height:52vh;overflow-y:auto}
#panel-mdh .mdh-chat-thread:empty{display:none}
#panel-mdh .mdh-chat-msg{display:flex;gap:10px;align-items:flex-start}
#panel-mdh .mdh-chat-msg-user{justify-content:flex-end}
#panel-mdh .mdh-chat-avatar{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--canard);
  color:#fff;font-size:13.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
#panel-mdh .mdh-chat-bubble{border-radius:12px;padding:11px 15px;font-size:16px;line-height:1.55;max-width:82%}
#panel-mdh .mdh-chat-msg-user .mdh-chat-bubble{background:var(--ardoise);color:#fff;border-bottom-right-radius:3px}
#panel-mdh .mdh-chat-msg-assistant .mdh-chat-bubble{background:#fff;color:var(--ardoise);
  border:1px solid var(--perle);border-bottom-left-radius:3px}
#panel-mdh .mdh-chat-bubble p{margin:0 0 8px}
#panel-mdh .mdh-chat-bubble p:last-child{margin-bottom:0}
#panel-mdh .mdh-chat-ref{color:var(--canard);font-weight:700;font-size:12px;cursor:pointer}
#panel-mdh .mdh-chat-error{color:var(--groseille)}
#panel-mdh .mdh-chat-thinking{display:flex;gap:5px;align-items:center;padding:14px 15px}
#panel-mdh .mdh-chat-dot{width:6px;height:6px;border-radius:50%;background:var(--perle);
  animation:mdhChatDot 1.3s infinite ease-in-out}
#panel-mdh .mdh-chat-dot:nth-child(2){animation-delay:.18s}
#panel-mdh .mdh-chat-dot:nth-child(3){animation-delay:.36s}
@keyframes mdhChatDot{0%,60%,100%{opacity:.3}30%{opacity:1}}
@media (prefers-reduced-motion:reduce){#panel-mdh .mdh-chat-dot{animation:none;opacity:.6}}

/* The display rules below would otherwise beat the UA stylesheet's [hidden],
   so the chips and the sources block need it restated. */
#panel-mdh .mdh-chat-chips[hidden],#panel-mdh .mdh-chat-cits[hidden]{display:none}
#panel-mdh .mdh-chat-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
#panel-mdh .mdh-chat-chips-label{font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ardoise);opacity:.6;width:100%}

/* The starter questions, laid out as the site's own bucket grid: one row per
   pillar in its own colour, one column per bucket. The pillar tokens above
   (--mdh-m / -m2 / -m-lt and friends) do the colouring, so the picker reads as
   the same M/D/H system used everywhere else on this tab. */
#panel-mdh .mdh-chat-grid{display:grid;gap:6px;overflow-x:auto}
#panel-mdh .mdh-chat-grid-row{
  display:grid;grid-template-columns:minmax(132px,auto) repeat(5,minmax(104px,1fr));gap:6px;align-items:center}
#panel-mdh .mdh-chat-rowlabel{display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;font-weight:700;color:var(--ardoise);white-space:nowrap}
#panel-mdh .mdh-chat-pill{display:inline-flex;align-items:center;justify-content:center;
  width:19px;height:19px;border-radius:4px;color:#fff;font-size:13.5px;font-weight:700;flex-shrink:0}
#panel-mdh .mdh-chat-p-m  .mdh-chat-pill{background:var(--mdh-m)}
#panel-mdh .mdh-chat-p-d  .mdh-chat-pill{background:var(--mdh-d)}
#panel-mdh .mdh-chat-p-hs .mdh-chat-pill{background:var(--mdh-hs)}
#panel-mdh .mdh-chat-p-m  .mdh-chat-chip{background:var(--mdh-m-lt);border-color:var(--mdh-m2)}
#panel-mdh .mdh-chat-p-d  .mdh-chat-chip{background:var(--mdh-d-lt);border-color:var(--mdh-d2)}
#panel-mdh .mdh-chat-p-hs .mdh-chat-chip{background:var(--mdh-hs-lt);border-color:var(--mdh-hs2)}
#panel-mdh .mdh-chat-p-m  .mdh-chat-chip:hover{background:#fff;border-color:var(--mdh-m)}
#panel-mdh .mdh-chat-p-d  .mdh-chat-chip:hover{background:#fff;border-color:var(--mdh-d)}
#panel-mdh .mdh-chat-p-hs .mdh-chat-chip:hover{background:#fff;border-color:var(--mdh-hs)}
#panel-mdh .mdh-chat-grid .mdh-chat-chip{text-align:center;padding:8px 6px;font-size:13.5px;border-radius:12px}
#panel-mdh .mdh-chat-cross{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:4px}
#panel-mdh .mdh-chat-cross .mdh-chat-chips-label{width:100%}
#panel-mdh .mdh-chat-chip-cross{border-style:dashed}
@media (max-width:720px){
  #panel-mdh .mdh-chat-grid-row{grid-template-columns:1fr 1fr;gap:6px}
  #panel-mdh .mdh-chat-rowlabel{grid-column:1/-1;margin-top:6px}
}

#panel-mdh .mdh-chat-chip{font-family:var(--sans);font-size:13.5px;color:var(--ardoise);text-align:left;
  background:#fff;border:1px solid var(--perle);border-radius:999px;padding:7px 14px;cursor:pointer;
  transition:border-color .15s,background .15s}
#panel-mdh .mdh-chat-chip:hover{border-color:var(--canard);background:var(--mdh-sw-lt,#F5FBFB)}

#panel-mdh .mdh-chat-cits{border-top:1px solid var(--perle);padding-top:12px}
#panel-mdh .mdh-chat-cits-title{font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ardoise);opacity:.6;margin-bottom:8px}
#panel-mdh .mdh-chat-cits-list{display:flex;flex-direction:column;gap:10px}
#panel-mdh .mdh-chat-cit{display:flex;gap:9px;font-size:13.5px;line-height:1.5}
#panel-mdh .mdh-chat-cit-num{flex-shrink:0;font-weight:700;color:var(--canard)}
#panel-mdh .mdh-chat-cit-title{font-weight:600;color:var(--ardoise)}
#panel-mdh .mdh-chat-cit-quote{margin:4px 0 0;padding-left:10px;border-left:2px solid var(--perle);
  color:var(--taupe);opacity:.85;font-style:italic}
#panel-mdh .mdh-chat-cit-title a{color:var(--canard);text-decoration:none}
#panel-mdh .mdh-chat-cit-title a:hover{text-decoration:underline}
#panel-mdh .mdh-chat-cit-host{font-size:13.5px;font-weight:400;color:var(--taupe);opacity:.7}
#panel-mdh .mdh-chat-trunc{margin:8px 0 0;font-size:13.5px;color:var(--taupe);opacity:.85;font-style:italic}

#panel-mdh .mdh-chat-form{display:flex;gap:10px;align-items:flex-end}
#panel-mdh .mdh-chat-input{flex:1;font-family:var(--sans);font-size:16px;line-height:1.5;color:var(--ardoise);
  background:#fff;border:1.5px solid var(--perle);border-radius:12px;padding:11px 14px;resize:none;
  min-height:44px;max-height:160px}
#panel-mdh .mdh-chat-input:focus{outline:none;border-color:var(--canard)}
#panel-mdh .mdh-chat-send{font-family:var(--sans);font-size:15px;font-weight:700;color:#fff;
  background:var(--canard);border:none;border-radius:12px;padding:12px 22px;cursor:pointer;transition:opacity .15s}
#panel-mdh .mdh-chat-send:hover{opacity:.88}
#panel-mdh .mdh-chat-send:disabled{opacity:.45;cursor:default}
#panel-mdh .mdh-chat-note{font-size:13.5px;color:var(--taupe);opacity:.75;margin:0}

@media (max-width:640px){
  #panel-mdh .mdh-chat-bubble{max-width:100%}
  #panel-mdh .mdh-chat-thread{max-height:none}
}

/* ── Glossary (mdh-tgloss, in its own #panel-glossary tab) ──
   ONE striped table, not 40-odd floating cards. The list was set as homepage
   cards (12px radius, 12px gap, 22px/26px padding, a pillar wash on the three
   harms) and that treatment does not survive its own success: at 42 entries the
   gaps alone ran to half a screen, and the washed rows clumped into blocks of
   one colour wherever two harms happened to sort next to each other.

   So: rows sit flush in a single rounded, clipped block and alternate, every
   one of them, on .alt. The stripe is applied in JS (setGlossarySearch), not by
   :nth-child, because a filtered-out row is display:none and STILL counts for
   nth-child - searching would leave two same-coloured rows touching.

   The pillar colour did not disappear with the washes, it moved to the term
   itself. That keeps M, D and H identifiable without a full-width block of
   colour breaking the alternation the rest of the list reads by. */
:is(#panel-mdh,#panel-glossary) .mdh-gloss-list{margin:0;display:block;
  border-radius:12px;overflow:hidden;background:#fff}
:is(#panel-mdh,#panel-glossary) .mdh-gloss-item{margin:0;padding:13px 20px;border:none;
  background:transparent}
:is(#panel-mdh,#panel-glossary) .mdh-gloss-item[hidden]{display:none}
/* The stripe. .alt is set by setGlossarySearch on every second VISIBLE row. */
:is(#panel-mdh,#panel-glossary) .mdh-gloss-item.alt{background:var(--ground)}
/* The band underneath decides the list's ground, keyed off the same
   nth-of-type that gives the band its own ground, so the two cannot disagree:
   a white band takes a Perle-based list, a Perle band takes a white one. */
:is(#panel-mdh,#panel-glossary) .mdh-page-section:nth-of-type(odd) .mdh-gloss-list{background:var(--ground)}
:is(#panel-mdh,#panel-glossary) .mdh-page-section:nth-of-type(odd) .mdh-gloss-item.alt{background:#fff}
:is(#panel-mdh,#panel-glossary) .mdh-page-section:nth-of-type(even) .mdh-gloss-list{background:#fff}
:is(#panel-mdh,#panel-glossary) .mdh-page-section:nth-of-type(even) .mdh-gloss-item.alt{background:var(--ground)}
/* Serif term, muted sans definition. */
:is(#panel-mdh,#panel-glossary) .mdh-gloss-term{margin:0 0 3px;font-family:var(--display);font-size:16.5px;
  font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--ardoise)}
/* NO pillar marker on a row. The three harms carried their colour as a row wash
   first, which clumped the list into blocks of one colour and broke the
   alternation; then as a 7px dot, which alternated cleanly but was one more
   thing to decode on a page whose job is to stop the reader decoding. Every
   entry that belongs to a pillar says so in its own first sentence, so the mark
   was never carrying the meaning on its own. The list is one uniform stripe. */
:is(#panel-mdh,#panel-glossary) .mdh-gloss-def{margin:0;font-size:16px;line-height:1.55;max-width:none;color:rgba(69,58,76,.78)}
/* Inline, not a line of its own: at this row count a separate source line cost
   a whole extra row of height each time, and a source is a parenthetical. */
:is(#panel-mdh,#panel-glossary) .mdh-gloss-src{font-size:13.5px;color:var(--ink-muted)}
@media (min-width:720px){
  :is(#panel-mdh,#panel-glossary) .mdh-gloss-item{display:grid;grid-template-columns:210px 1fr;gap:22px;align-items:baseline}
  :is(#panel-mdh,#panel-glossary) .mdh-gloss-term{margin:0}
}

/* ── Search box ──
   Sits directly on the band, not in a box of its own: it is one control, and a
   card around it would be a second surface above the surface it filters. */
#panel-glossary .gloss-tools,#panel-mdh .gloss-tools{display:flex;align-items:center;gap:14px;
  margin:0 0 14px;flex-wrap:wrap}
#panel-glossary .gloss-search-input,#panel-mdh .gloss-search-input{flex:1 1 260px;min-width:0;
  font-family:var(--sans);font-size:15px;color:var(--ardoise);
  padding:10px 14px;border:1px solid rgba(69,58,76,.2);border-radius:10px;background:#fff}
#panel-glossary .gloss-search-input::placeholder,#panel-mdh .gloss-search-input::placeholder{color:var(--ink-muted)}
#panel-glossary .gloss-search-input:focus,#panel-mdh .gloss-search-input:focus{outline:2px solid var(--zinzolin);
  outline-offset:1px;border-color:transparent}
#panel-glossary .gloss-count,#panel-mdh .gloss-count{font-family:var(--sans);font-size:13.5px;
  font-weight:600;color:var(--ink-muted);white-space:nowrap}
#panel-glossary .gloss-empty,#panel-mdh .gloss-empty{margin:16px 0 0;font-family:var(--sans);font-size:15px;
  color:var(--ink-muted)}
/* On a phone the count is pushed to the right edge, which is exactly where the
   floating back-to-top button sits: it landed on top of it. Give the count its
   own line there instead of shrinking the search field to make room. */
@media (max-width:560px){
  #panel-glossary .gloss-tools,#panel-mdh .gloss-tools{display:block}
  #panel-glossary .gloss-search-input,#panel-mdh .gloss-search-input{width:100%}
  #panel-glossary .gloss-count,#panel-mdh .gloss-count{display:block;margin-top:8px}
}

/* ── Placing the work: two columns ──
   The two scales side by side, because each only reads as a scale when its
   three values are seen together, and because reading one against the other is
   the point: closeness says what the work is about, stage says what it does.
   Inside a column the row goes back to stacked (term over definition): 210px of
   term column does not fit in half the measure. */
/* The Glossary as a dictionary (G1 A, 2026-09-14): a letter bar under the search, each letter a
   heading, terms in one column with the source on its own quiet line. One column and darker rules since
   the owner's review the same day: two columns made a reader zigzag, and the .12 rules hardly showed. */
#panel-glossary .gloss-az{display:flex;flex-wrap:wrap;gap:3px;margin:14px 0 6px}
#panel-glossary .gloss-az-l{min-width:30px;padding:5px 0;text-align:center;font-family:var(--sans);font-size:14px;
  font-weight:700;line-height:1.2;border:none;border-radius:5px;background:#fff;color:var(--ardoise);cursor:pointer}
#panel-glossary button.gloss-az-l:hover{background:var(--ardoise);color:#fff}
#panel-glossary .gloss-az-l.is-off,#panel-glossary button.gloss-az-l:disabled{background:none;color:rgba(69,58,76,.28);cursor:default}
/* The letter bar stays under the site header while the list scrolls, and lights the letter whose
   section is under it (A43, 2026-09-14). It sat in the flow above the list, so after a jump to M it was
   3000px out of view. The ground is the section's white, so rows pass under it rather than through. */
#panel-glossary .gloss-az{position:sticky;top:var(--main-top,137px);z-index:5;background:#fff;
  margin:14px 0 6px;padding:8px 0;box-shadow:0 1px 0 rgba(69,58,76,.14)}
#panel-glossary button.gloss-az-l.is-current{background:var(--groseille);color:#fff}
#panel-glossary .gloss-letter{scroll-margin-top:calc(var(--main-top,137px) + 60px)}
/* On a phone the bar is one row that scrolls sideways, not three rows of letters eating the screen, and
   it moves up to the top while the header is tucked away (ui.js sets body.chrome-tucked). */
@media (max-width:700px){
  #panel-glossary .gloss-az{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;transition:top .25s ease}
  #panel-glossary .gloss-az::-webkit-scrollbar{display:none}
  #panel-glossary .gloss-az-l{flex:none}
  body.chrome-tucked #panel-glossary .gloss-az{top:0}
}
/* The Disclaimer's Why lands on this heading, clear of the fixed header (A26, 2026-09-14). */
#panel-mdh #mdh-broaden{scroll-margin-top:calc(var(--main-top,137px) + 16px)}
#panel-glossary .gloss-letter{display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px;padding:26px 0;
  border-top:1px solid rgba(69,58,76,.42);scroll-margin-top:150px}
#panel-glossary .gloss-letter[hidden]{display:none}
#panel-glossary .gloss-letter-hd{margin:0;font-family:var(--display);font-size:40px;line-height:1;font-weight:600;color:var(--groseille)}
#panel-glossary .gloss-letter-list{margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:0;align-items:start}
#panel-glossary #gloss-list .mdh-gloss-item{display:block;padding:16px 0;background:none}
#panel-glossary #gloss-list .gloss-letter-list > .mdh-gloss-item:first-child{padding-top:0}
#panel-glossary #gloss-list .gloss-letter-list > .mdh-gloss-item:not([hidden]) ~ .mdh-gloss-item:not([hidden]){border-top:1px solid rgba(69,58,76,.2)}
#panel-glossary #gloss-list .mdh-gloss-item[hidden]{display:none}
#panel-glossary #gloss-list .mdh-gloss-term{margin:0 0 4px;font-size:18px}
#panel-glossary #gloss-list .mdh-gloss-def{margin:0;font-size:15.5px;line-height:1.55;max-width:none}
#panel-glossary #gloss-list .mdh-gloss-src{display:block;margin:6px 0 0;font-size:13px;line-height:1.45;color:var(--ink-muted)}
@media (max-width:760px){
  #panel-glossary .gloss-letter{grid-template-columns:44px minmax(0,1fr)}
  #panel-glossary .gloss-letter-hd{font-size:30px}
}
#panel-glossary .gloss-cols,#panel-mdh .gloss-cols{display:grid;gap:26px}
@media (min-width:820px){
  #panel-glossary .gloss-cols,#panel-mdh .gloss-cols{grid-template-columns:1fr 1fr;gap:32px}
}
#panel-glossary .gloss-col-eb,#panel-mdh .gloss-col-eb{margin:0 0 6px;font-family:var(--sans);font-size:12.5px;
  font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-muted)}
#panel-glossary .gloss-col-hd,#panel-mdh .gloss-col-hd{margin:0 0 2px;font-family:var(--display);
  font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--ardoise)}
#panel-glossary .gloss-col-note,#panel-mdh .gloss-col-note{margin:0 0 12px;font-family:var(--sans);
  font-size:15px;color:var(--ink-muted)}
:is(#panel-mdh,#panel-glossary) .gloss-list-stack .mdh-gloss-item{padding:14px 18px}
@media (min-width:720px){
  :is(#panel-mdh,#panel-glossary) .gloss-list-stack .mdh-gloss-item{display:block}
  :is(#panel-mdh,#panel-glossary) .gloss-list-stack .mdh-gloss-term{margin:0 0 3px}
}
/* The two scale cards: white rows with a hairline between them. Striped rows took the band's grey
   on every second line and melted into the section behind them (2026-09-14). */
:is(#panel-mdh,#panel-glossary) .gloss-list-stack .mdh-gloss-item{background:#fff}
:is(#panel-mdh,#panel-glossary) .gloss-list-stack .mdh-gloss-item + .mdh-gloss-item{border-top:1px solid rgba(69,58,76,.1)}

/* The vocabulary band carries one long list, so it needs less air above and
   below it than a band of prose does. */
:is(#panel-mdh,#panel-glossary) .mdh-gloss-sec{padding-top:44px;padding-bottom:44px}
:is(#panel-mdh,#panel-glossary) .mdh-gloss-sec .mdh-page-section-hd{margin-bottom:20px}

/* MDH tab load states (skeleton while the big chunk downloads, error on failure) */
#panel-mdh-body .mdh-skeleton,#panel-glossary-body .mdh-skeleton{padding:60px 20px;text-align:center;color:var(--taupe);opacity:.6;font-size:16.5px}
#panel-mdh-body .mdh-load-error,#panel-glossary-body .mdh-load-error{padding:48px 20px;text-align:center}
#panel-mdh-body .mdh-load-error p,#panel-glossary-body .mdh-load-error p{font-size:16.5px;color:var(--ardoise);margin:0 0 16px}
#panel-mdh-body .mdh-load-retry,#panel-glossary-body .mdh-load-retry{font-family:var(--sans);font-size:15px;font-weight:700;color:#fff;background:var(--ardoise);border:none;border-radius:12px;padding:9px 18px;cursor:pointer}


/* ══ Homepage card treatment (option 5) ══════════════════════════════════
   The card IS the colour, at 8% on white, so there is no border, no rule and
   no bar: only a change of surface. Full-strength colour appears once, in the
   label, set as an eyebrow.

   Accents are Canard, Zinzolin and Marron. NOT Rose / Acier / Mont Rose,
   which these cards used to carry: those three are --mdh-m / --mdh-d /
   --mdh-hs, so "The Problem" was wearing the Misinformation colour and
   "The Goal" the Hate-speech colour while meaning neither.

   Scoped to .abt-cards-stack and .abt-whois-card. The .abt-card.frame-*
   variants on the MDH pages keep their own look.                          */
:root{
  /* About this project: the MDH pillar colours, at 8% on the white ground. */
  --wash-rose:#FEF3F7;      /* Rose      #ED6E9C at 8% on white */
  --wash-acier:#F1F6FB;     /* Acier     #4F8FCC at 8% on white */
  --wash-montrose:#FEF7F3;  /* Mont Rose #F39869 at 8% on white */
}
.abt-cards-stack .abt-card{
  border:none;
  border-radius:12px;
  padding:26px 28px 28px;
  gap:0;
}
.abt-cards-stack .abt-card.c1{background:var(--wash-rose)}
.abt-cards-stack .abt-card.c2{background:var(--wash-acier)}
.abt-cards-stack .abt-card.c3{background:var(--wash-montrose)}

/* Eyebrow, not a heading: small, letterspaced, uppercase, in the accent. */
.abt-cards-stack .abt-card-lbl{
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  line-height:1.3;
  margin:0 0 14px;
}
/* NOTE: as 12.5px text on white these are Rose 3.0:1, Acier 3.4:1 and
   Mont Rose 2.2:1, all under the 4.5:1 AA floor for small text. They are the
   MDH pillar colours and were asked for by name; swapping the three labels to
   Ardoise fixes it and leaves the washes carrying the colour. */
.abt-cards-stack .abt-card.c1 .abt-card-lbl{color:var(--rose-txt)}
.abt-cards-stack .abt-card.c2 .abt-card-lbl{color:var(--acier-txt)}
.abt-cards-stack .abt-card.c3 .abt-card-lbl{color:var(--mont-rose-dark)}
.abt-cards-stack .abt-card p{font-size:16px;line-height:1.6;color:rgba(69,58,76,.86);margin:0}

/* Who we are: the same card, with its heading brought into line with every
   other card heading on the site (serif, sentence case) instead of 15px
   uppercase bold. */
.abt-whois-card{
  border:none;
  padding:26px 28px 28px;
}
/* These three sit on the grey ground rather than on white, so the wash runs at
   12% instead of 8%: against #F6F5F5 an 8% tint separates by hue alone and the
   Marron card in particular reads as flat. Same three accents, same colours,
   only the mix changes. */
:root{
  /* Same three MDH colours as About, rotated one place so no card sits on the
     same pillar as the card in its position above. Mixed at 12% rather than 8%
     because this section is on the grey ground: 8% here separates by only 12
     (summed RGB) against 21-27 for the same wash on white, which reads flat. */
  --wash-acier-12:#EAF2F9;    /* Acier     #4F8FCC at 12% on white */
  --wash-montrose-12:#FEF3ED; /* Mont Rose #F39869 at 12% on white */
  --wash-rose-12:#FDEEF3;     /* Rose      #ED6E9C at 12% on white */
}
.abt-whois-card:nth-child(1){background:var(--wash-acier-12)}
.abt-whois-card:nth-child(2){background:var(--wash-montrose-12)}
.abt-whois-card:nth-child(3){background:var(--wash-rose-12)}
.abt-whois-card h3{
  font-family:var(--sans);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  line-height:1.3;
  margin:0 0 14px;
}
.abt-whois-card:nth-child(1) h3{color:var(--acier-txt)}
.abt-whois-card:nth-child(2) h3{color:var(--mont-rose-txt)}
.abt-whois-card:nth-child(3) h3{color:var(--rose-txt)}
.abt-whois-card p{font-size:16px;line-height:1.6;color:rgba(69,58,76,.86)}
/* Highlights take the card's own accent rather than each card choosing one. */
.abt-whois-card em{font-style:normal;font-weight:600}
/* Emphasis inside the prose stays ink, matching the About cards, which colour
   their label and leave the body alone. */
.abt-whois-card .abt-cite{border-top-color:var(--ink-muted)}


/* ── Track record: three entries as a timeline, not a paragraph. The year is
   the anchor, so it leads in serif and the eye can scan 2024 / 2025 / 2026
   down the left edge. ── */
.abt-record{list-style:none;margin:0;padding:0}
.abt-record li{display:grid;grid-template-columns:46px 1fr;gap:16px;
  padding:14px 0;border-top:1px solid rgba(69,58,76,.14)}
.abt-record li:first-child{border-top:none;padding-top:0}
.abt-record li:last-child{padding-bottom:0}
.abt-record-yr{font-family:var(--sans);font-size:16px;font-weight:700;
  line-height:1.55;color:var(--ardoise)}
/* Flex-wrap, so the Upcoming tag and its link wrap as whole items and start flush left. Inline, the
   tag's margin-left became a stray indent when it wrapped on a phone (2026-09-14). */
.abt-record-t{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:9px;font-size:16px;font-weight:600;color:var(--ardoise);margin-bottom:3px}
/* The only entry that has not happened yet. Groseille, and set as a label
   rather than as more bold text, so it reads as a status and not as part of
   the event's name. */
.abt-whois-card .abt-record-up{font-style:normal;font-size:12.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--groseille)}
/* A quiet parenthetical, not a second call to action: the row already has one
   emphasis (Upcoming) and the event band below is the destination anyway. */
.abt-whois-card a.abt-record-see{font-size:13.5px;font-weight:400;color:var(--ink-soft);
  text-decoration:none;white-space:nowrap}
.abt-whois-card a.abt-record-see:hover{text-decoration:underline}
.abt-record-b{font-size:16px;line-height:1.55;color:rgba(69,58,76,.86)}

/* ── The four things the platform does. Numbered, no boxes: it is a sequence,
   not four separate objects. ── */
.abt-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin:34px 0 0}
@media (max-width:900px){.abt-steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.abt-steps{grid-template-columns:1fr}}
.abt-step{border-top:2px solid var(--perle);padding:16px 0 0}
.abt-step-n{font-family:var(--display);font-size:26px;font-weight:600;line-height:1;
  color:var(--perle-txt);display:block;margin-bottom:8px}
.abt-step-t{font-size:12.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  display:block;margin-bottom:8px}
/* One ink for the four steps, numbers in Groseille (owner, 2026-09-16): four different colours read as decoration. */
.abt-step .abt-step-t{color:var(--ardoise)}
/* The four step numbers each carry a colour, the titles stay dark (owner, 2026-09-16). One ink
   everywhere had made the section read flat; colour on the large 01 to 04 is where the eye lands
   first, and the text stays easy to read. Text-safe darkened values of Rose, Acier, Mont Rose and
   Zinzolin, the four this section used before. */
/* 01 to 03 take the colours of the three cards above them, by token, so a step and its card always
   match; 03 was a dark orange and now matches "The platform" (owner, 2026-09-16). */
.abt-step:nth-child(1) .abt-step-n{color:var(--rose-txt)}
.abt-step:nth-child(2) .abt-step-n{color:var(--acier-txt)}
.abt-step:nth-child(3) .abt-step-n{color:var(--mont-rose-dark)}
.abt-step:nth-child(4) .abt-step-n{color:var(--zinzolin)}
.abt-step p{font-size:16px;line-height:1.55;color:rgba(69,58,76,.86);margin:0}


/* ── The domains each card covers. Not chips: a chip is a container, and a
   container around two words is decoration pretending to be structure. These
   are set on hairlines instead, the same device the track record uses, so the
   three cards share one rhythm. Left-aligned sans in two columns since
   2026-09-14, like the principles list below: centred serif made it the one list
   on the page set differently. ── */
.abt-tags{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;
  margin:14px 0 26px;padding:12px 0;
  border-top:1px solid rgba(69,58,76,.16);
  border-bottom:1px solid rgba(69,58,76,.16)}
.abt-tags li{font-family:var(--sans);font-size:15px;font-weight:400;
  line-height:1.4;color:var(--ardoise)}
@media (max-width:560px){.abt-tags{grid-template-columns:1fr}}

/* ── The paper's four principles: numbered, because the paper numbers them. ── */
.abt-principles{list-style:none;counter-reset:pr;display:grid;
  grid-template-columns:1fr 1fr;gap:10px 18px;margin:14px 0 0;padding:0}
.abt-principles li{counter-increment:pr;display:grid;grid-template-columns:20px 1fr;
  gap:8px;font-size:15px;line-height:1.4;color:var(--ardoise)}
.abt-principles li::before{content:counter(pr,decimal-leading-zero);
  font-family:var(--display);font-size:15px;font-weight:600;color:var(--ink-muted)}
@media (max-width:560px){.abt-principles{grid-template-columns:1fr}}

/* Outbound link at the foot of a card, same cosmetic as the Learn more on the
   event band so every link on the homepage reads the same way. */
.abt-link{margin:16px 0 0}
.abt-link a{font-size:13.5px;font-weight:600;color:var(--groseille);text-decoration:none;
  border-bottom:1px solid rgba(181,31,31,.4)}
.abt-link a:hover{border-bottom-color:var(--groseille)}


/* EssentialTech card: text left, the nexus infographic right. Same SVG the
   flyers use, so the two deliverables show the same diagram. */
.abt-etc-grid{display:grid;grid-template-columns:1fr 236px;gap:40px;align-items:start}
/* Reading measure for the About page's prose. These paragraphs sit in wide
   single-column blocks, so at 1440 they ran 90 to 109 characters a line against
   the 50-75 the eye tracks comfortably. Capping the line length does not move
   the left edge or the block's own width. */
.abt-etc-grid p,.abt-card p,.abt-whois-card p{max-width:min(78ch,100%)}
.abt-nexus{width:100%;height:auto;display:block}
@media (max-width:820px){.abt-etc-grid{grid-template-columns:1fr;gap:22px}
  .abt-nexus{max-width:236px;margin:0 auto}}


/* ══ Definitions: full-width stacked entries (replaces the three-card row) ══
   Left, the pillar letter, large, in the serif. It is the only coloured thing
   on the row: a second coloured device beside the quote competed with it.
   Right column holds At a glance and the Swiss-law disclosure. The Note, where
   one exists, runs the full width beneath both. ══ */
#panel-mdh .mdh-def-row{display:block}
#panel-mdh .mdh-def-entry{display:grid;grid-template-columns:78px 1fr 1fr;gap:36px;
  padding:34px 0;border-top:1px solid rgba(69,58,76,.16)}
#panel-mdh .mdh-def-entry:first-child{border-top:none;padding-top:0}
#panel-mdh .mdh-def-ini{font-family:var(--display);font-size:66px;font-weight:600;line-height:.8}
#panel-mdh .mdh-def-entry.m  .mdh-def-ini{color:var(--mdh-m)}
#panel-mdh .mdh-def-entry.d  .mdh-def-ini{color:var(--mdh-d)}
#panel-mdh .mdh-def-entry.hs .mdh-def-ini{color:var(--mdh-hs)}
#panel-mdh .mdh-def-entry .mdh-def-name{font-family:var(--display);font-size:24px;font-weight:400;
  letter-spacing:-.01em;margin:0 0 3px;color:var(--ardoise)}
#panel-mdh .mdh-def-entry .mdh-def-tag{font-family:var(--display);font-style:italic;
  font-size:16.5px;font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--ink-muted);display:block;line-height:1.35}
/* Note spans both content columns, clear of the letter's gutter. */
#panel-mdh .mdh-def-note{grid-column:1 / -1;margin-top:10px;padding-top:24px;
  border-top:1px solid rgba(69,58,76,.16)}
/* Narrow: stack.
   These rules existed already and never once fired. They were written as
   .mdh-def-entry (0,1,0) against a base rule of #panel-mdh .mdh-def-entry
   (1,1,0), and a media query changes nothing about specificity: the id-scoped
   three-column grid won at every width. On a phone the entry was still
   78px + 1fr + 1fr, which left the quoted definition a few words per line.
   Written at the same specificity as what they are overriding, they work.
   The big letter goes rather than stacking above the name: it is decorative
   (aria-hidden) and the name underneath already opens with the same letter in
   the same pillar colour, so hiding it costs nothing and saves a whole row. */
@media (max-width:900px){
  #panel-mdh .mdh-def-entry{grid-template-columns:1fr;gap:18px}
  #panel-mdh .mdh-def-note{grid-column:auto}
  #panel-mdh .mdh-def-ini{display:none}
}

/* Every block says what it is: which one was the definition was not obvious. */
#panel-mdh .mdh-b{margin:0 0 22px}
#panel-mdh .mdh-b:last-child{margin-bottom:0}
#panel-mdh .mdh-b-lbl{font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--groseille);margin:0 0 10px}
#panel-mdh .mdh-q{font-family:var(--display);font-style:italic;font-size:19px;line-height:1.45;
  margin:0;color:var(--ardoise)}
/* Same as .mdh-def-qsrc, the source style used everywhere else. */
#panel-mdh .mdh-q-src{font-style:normal;font-size:13.5px;color:var(--mdh-ink);margin:4px 0 0}
#panel-mdh .mdh-def-note p{font-size:15px;line-height:1.6;color:rgba(69,58,76,.86);margin:0}

/* max-content on the question column puts the answer immediately after the
   longest question rather than against the far edge of the column. */
#panel-mdh .mdh-glance{display:grid;grid-template-columns:max-content auto;
  gap:6px 22px;margin:0;font-size:15px}
#panel-mdh .mdh-glance dt{color:rgba(69,58,76,.78)}
#panel-mdh .mdh-glance dd{margin:0;font-weight:600;text-align:left;color:var(--ardoise)}

/* Swiss law is reference material a reader consults, not something they read
   through, so it opens on demand. */
#panel-mdh .mdh-legal{margin:20px 0 0}
#panel-mdh .mdh-legal summary{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--groseille);cursor:pointer;list-style:none}
#panel-mdh .mdh-legal summary::-webkit-details-marker{display:none}
#panel-mdh .mdh-legal summary::after{content:' +'}
#panel-mdh .mdh-legal[open] summary::after{content:' \2212'}
#panel-mdh .mdh-legal > div{font-size:13.5px;line-height:1.55;color:rgba(69,58,76,.8);margin-top:8px}
#panel-mdh .mdh-legal u, #panel-mdh .mdh-legal em{font-style:normal;text-decoration:none;font-weight:600;color:var(--ardoise)}

/* ══ Related definitions ══ */
#panel-mdh .mdh-related{margin:40px 0 0;padding-top:30px;border-top:2px solid rgba(69,58,76,.16)}
#panel-mdh .mdh-related-defs{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin:0 0 34px}
/* Same fault as .mdh-def-entry above: written a class short of the base rule it
   overrides, so the two columns held at every width. */
@media (max-width:900px){#panel-mdh .mdh-related-defs{grid-template-columns:1fr}}
#panel-mdh .mdh-rel-term{font-family:var(--display);font-size:20px;font-weight:600;margin:0 0 12px;color:var(--ardoise)}
#panel-mdh .mdh-rel-note{font-size:15px;line-height:1.6;color:rgba(69,58,76,.86);margin:14px 0 0}

/* The comparison. Two bands: the tests that separate the three, then the
   examples that fall into one and not the others. */
#panel-mdh .mdh-cmp{width:100%;border-collapse:collapse;font-size:15px}
#panel-mdh .mdh-cmp th, #panel-mdh .mdh-cmp td{text-align:left;padding:11px 14px;vertical-align:top}
#panel-mdh .mdh-cmp thead th{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.01em;
  border-bottom:2px solid rgba(69,58,76,.16);padding-bottom:9px;color:var(--ardoise)}
#panel-mdh .mdh-cmp tbody th{font-weight:400;color:rgba(69,58,76,.78);width:34%}
#panel-mdh .mdh-cmp tbody tr{border-top:1px solid rgba(69,58,76,.1)}
#panel-mdh .mdh-cmp-tests td{font-weight:600;color:var(--ardoise)}
#panel-mdh .mdh-cmp-cases{border-top:2px solid rgba(69,58,76,.16)}
#panel-mdh .mdh-cmp-cases th{font-family:var(--display);font-size:16px;color:var(--ardoise)}
#panel-mdh .mdh-cmp-cases td{text-align:center;font-size:15px}
#panel-mdh .mdh-cmp-cases td.on{background:rgba(69,58,76,.04)}

/* What the broadened pillar takes in. A two-column list on hairlines, the same
   treatment the homepage uses for domain lists. */
#panel-mdh .mdh-scope{margin:0 0 30px}
#panel-mdh .mdh-scope-list{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);
  gap:0 32px;margin:0;padding:0}
#panel-mdh .mdh-scope-list li{font-family:var(--display);font-size:16.5px;line-height:1.35;
  color:var(--ardoise);padding:9px 0;border-top:1px solid rgba(69,58,76,.16)}
@media (max-width:1100px){#panel-mdh .mdh-scope-list{grid-template-columns:1fr 1fr}}
@media (max-width:700px){#panel-mdh .mdh-scope-list{grid-template-columns:1fr}}

#panel-mdh .mdh-hc-note{font-size:15px;line-height:1.6;color:rgba(69,58,76,.86);
  margin:0 0 22px;max-width:none}
#panel-mdh .mdh-def-note .mdh-b + .mdh-b{margin-top:22px}

/* Block eyebrows take the pillar colour, per entry. Not the pillar hues
   themselves: Rose, Acier and Mont Rose measure 2.9, 3.4 and 2.2:1 as text on
   white, all under the 4.5:1 AA floor. These are the text-safe equivalents the
   panel already defines for exactly this purpose (--mdh-m-txt Groseille,
   --mdh-d-txt Canard, --mdh-hs-txt Marron), same hue family, all passing. */
#panel-mdh .mdh-def-entry.m  .mdh-b-lbl{color:var(--mdh-m-txt)}
#panel-mdh .mdh-def-entry.d  .mdh-b-lbl{color:var(--mdh-d-txt)}
#panel-mdh .mdh-def-entry.hs .mdh-b-lbl{color:var(--mdh-hs-txt)}
#panel-mdh .mdh-def-entry.m  .mdh-legal summary{color:var(--mdh-m-txt)}
#panel-mdh .mdh-def-entry.d  .mdh-legal summary{color:var(--mdh-d-txt)}
#panel-mdh .mdh-def-entry.hs .mdh-legal summary{color:var(--mdh-hs-txt)}
/* The tag now leads the definition column. */
#panel-mdh .mdh-def-entry .mdh-def-tag{margin:8px 0 22px;padding:0;background:none}

/* Yes / No / Could be are colour-coded once, in the --ans-yes / --ans-maybe
   block further down this file. An earlier copy of those three rules lived here
   with the same selectors, so it lost on source order and had been dead for some
   time while still describing colours (Canard, Marron) the table no longer used.
   Removed rather than kept in sync. */
/* H eyebrow in orange rather than Marron: Marron sits too far from Mont Rose,
   the pillar hue. Carotte is the chart's closest true orange. It is 3.2:1 on
   white, under the 4.5:1 AA floor, and is used here on the client's call. */
#panel-mdh .mdh-def-entry.hs .mdh-b-lbl{color:var(--carotte-txt)}
#panel-mdh .mdh-def-entry.hs .mdh-legal summary{color:var(--carotte-txt)}

/* The eyebrows take the pillar hues themselves rather than the text-safe
   substitutes. Rose is 2.9:1 and Acier 3.4:1 as text on white, both under the
   4.5:1 AA floor; used on the client's call, and the block labels are
   navigational rather than load-bearing text. */
#panel-mdh .mdh-def-entry.m  .mdh-b-lbl,
#panel-mdh .mdh-def-entry.m  .mdh-legal summary{color:var(--mdh-m)}
#panel-mdh .mdh-def-entry.d  .mdh-b-lbl,
#panel-mdh .mdh-def-entry.d  .mdh-legal summary{color:var(--mdh-d)}

/* Initials in the pillar colour, on the name itself. The letters are large
   enough to read as marks rather than as text, so the true pillar hues are
   used here rather than the text-safe substitutes. */
#panel-mdh .mdh-ini{color:inherit;font-weight:600}

/* Swiss law reads as a block like the others now, not a disclosure. */
#panel-mdh .mdh-legal-body{font-size:13.5px;line-height:1.55;color:rgba(69,58,76,.8)}
#panel-mdh .mdh-legal-body u,#panel-mdh .mdh-legal-body em{font-style:normal;
  text-decoration:none;font-weight:600;color:var(--ardoise)}
/* The comparison answers use the At a glance colour code, set once in the
   --ans-yes / --ans-maybe block below. The duplicate of those three rules that
   used to sit here was overridden by it and has been removed. */
/* The table sits inside the full-width block, so it gets the whole measure. */
#panel-mdh .mdh-def-note .mdh-cmp{margin-top:4px}

/* ══ Glossary click-to-define ══
   A term defined in the Glossary, marked where it appears in prose. A dotted
   underline rather than a link colour: it is not navigation, the definition
   opens in place. */
.gloss-term{font:inherit;color:inherit;background:none;border:none;padding:0;
  cursor:pointer;border-bottom:1px dotted rgba(69,58,76,.5)}
.gloss-term:hover,.gloss-term.open{border-bottom-style:solid;
  border-bottom-color:var(--groseille);color:var(--groseille)}
.gloss-pop .mdh-gloss-src{display:block;margin-top:6px;font-size:12.5px;
  color:var(--ink-muted)}

/* ══ Why we broaden the H pillar ══
   Its own band, so it reads as an argument about the taxonomy rather than a
   footnote to one definition. The alternating nth-of-type rule above gives it
   its ground automatically. */
/* A note under the three definition cards, qualifying them: the pillars are one
   way to cut this up and the IFRC cuts it another way. 13.5px is the site's meta
   step, the size used for captions and source lines, so it reads as an aside to
   the cards rather than as a fourth definition. */
#panel-mdh .mdh-def-note{font-size:13.5px;line-height:1.55;color:var(--ink-muted);
  margin:18px auto 0;max-width:var(--measure)}
#panel-mdh .mdh-def-note em{font-style:italic}
#panel-mdh .mdh-def-note strong{color:var(--ardoise)}

#panel-mdh .mdh-broaden-list{list-style:none;margin:0 0 20px;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:0 32px}
#panel-mdh .mdh-broaden-list li{font-size:15px;line-height:1.55;color:rgba(69,58,76,.86);
  padding:14px 0 0;border-top:2px solid rgba(69,58,76,.16)}
#panel-mdh .mdh-broaden-list strong{color:var(--ardoise);font-weight:600}
@media (max-width:900px){#panel-mdh .mdh-broaden-list{grid-template-columns:1fr}}
#panel-mdh .mdh-broaden-close{font-family:var(--display);font-size:19px;line-height:1.45;
  color:var(--ardoise);margin:0 0 28px;max-width:none}


/* ── Fixes ──────────────────────────────────────────────────────────────
   1. The review flag was painting over the answer colours. Inside a cell that
      has set a colour, the flag defers to it: the point of the flag is to mark
      new wording for review, not to repaint semantic colour. */
#panel-mdh .mdh-glance dd .new-copy,
#panel-mdh .mdh-glance-2 td .new-copy,
#panel-mdh .mdh-cmp-tests td .new-copy{color:inherit}

/* 2. These three set margin:0, which cancelled the margin-inline:auto that
      centres every other child of the section, so they sat at the padding edge
      while the head and the table sat at the measure. */
#panel-mdh .mdh-def-note,
#panel-mdh .mdh-broaden-close{margin-left:auto;margin-right:auto}

/* 3. At a glance reads as a table: a rule per row, and the answer in its own
      column, so the three pillars line up down the page. */
#panel-mdh .mdh-glance{display:grid;grid-template-columns:max-content 1fr;gap:0;margin:0;font-size:15px}
#panel-mdh .mdh-glance dt,
#panel-mdh .mdh-glance dd{padding:9px 0;border-top:1px solid rgba(69,58,76,.16)}
#panel-mdh .mdh-glance dt{color:rgba(69,58,76,.78)}
#panel-mdh .mdh-glance dd{margin:0;font-weight:600;text-align:left;padding-left:24px}

.gloss-pop-src{display:block;margin-top:8px;font-size:12.5px;color:var(--ink-muted)}
.gloss-pop-src a{color:inherit}

/* Yes / No / qualified. Leman is the greenest green on the chart that is not
   a pillar colour; Marron is its brown. Both avoid Rose, Acier and Mont Rose,
   which mean M, D and H. Contrast on white: Leman 3.0:1, Groseille 6.6:1,
   Marron 10.7:1. Leman is under the AA floor and is used on the client's call
   for a greener green; the word carries the meaning either way. */


/* ── Answer colours ─────────────────────────────────────────────────────
   Off-chart, by agreement: the EPFL palette has no legible true green (Leman
   2.99:1, Chartreuse ~1.6:1) and no ochre at all, only Carotte, which is the
   H pillar's neighbour. These two are matched in intensity to each other.

   --ans-maybe is a brownish orange rather than the darker #96620F it was: it
   now has to sit in the same H table as the No red and be told apart from it at
   a glance, which a near-black brown could not do. #A56A12 is 4.5:1 on white,
   still on the AA floor.
   Measured on white with tools/dev/contrast.mjs: #4E8317 4.58:1, #A56A12
   4.50:1, Groseille 6.60:1, so all three now clear the AA floor for normal text.
   The green was #5C9A1B until 2026-09-02; the figure recorded for it here was
   3.9:1 but it measures 3.45:1, so it was failing by more than the note said.
   #4E8317 is the same hue one step darker, chosen as the lightest value that
   passes, so it still reads as the chart's green next to the No red. ── */
:root{--ans-yes:#4E8317;--ans-maybe:#A56A12}
#panel-mdh .mdh-glance dd.a-yes,
#panel-mdh .mdh-cmp-tests td.a-yes{color:var(--ans-yes)}
#panel-mdh .mdh-glance dd.a-no,
#panel-mdh .mdh-cmp-tests td.a-no{color:var(--groseille)}
#panel-mdh .mdh-glance dd.a-maybe,
#panel-mdh .mdh-cmp-tests td.a-maybe{color:var(--ans-maybe)}

/* The qualifier that decides the row, in the row label. */
#panel-mdh .mdh-cmp-cases th strong{font-weight:600;color:var(--ardoise)}

/* The glossary panel is a .mdh-ref-popover, so it inherits the citation
   popover's frame, shadow and animation. Only its contents are styled here. */
.gloss-pop .gloss-pop-term{font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--groseille);margin:0 0 8px}
.gloss-pop .gloss-pop-body{font-size:15px;line-height:1.55;color:var(--mdh-ink)}
.gloss-pop .gloss-pop-src{margin:10px 0 0;font-size:12.5px;color:var(--ink-muted)}
.gloss-pop .gloss-pop-src a{color:inherit}


/* ══ Why we use MDH, and Why now ═════════════════════════════════════════
   Both sections predate the current type scale. The rules below bring them
   onto it without touching a word of their content. ══ */

/* -- The rationale cards. Wash, no border, eyebrow label, serif nothing: these
      are prose blocks, so they stay in the sans. -- */
#panel-mdh .mdh-rationale .abt-card,
#panel-mdh .abt-cards .abt-card{border:none;border-radius:12px;padding:24px 26px 26px}
#panel-mdh .abt-cards .abt-card-lbl{font-family:var(--sans);font-size:12.5px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;line-height:1.3;margin:0 0 12px}
#panel-mdh .abt-cards .abt-card p{font-size:15px;line-height:1.6;color:rgba(69,58,76,.86);margin:0}

/* -- The trajectory figures. The number is the content, so it is set in the
      serif at display size, the way every other figure on the site now is.
      The figures stay in ink: Rose, Acier and Mont Rose measure 2.9, 3.4 and
      2.2:1, so a 40px number in them would be the least legible thing on the
      page. The pillar colour goes on the rule above the card instead, where it
      is a mark and not text. The earlier values in each run are held at 40%
      opacity so the direction of travel reads before the digits do. -- */
#panel-mdh .mdh-traj{gap:26px}
#panel-mdh .mdh-traj-card{gap:10px;padding:22px 0 0;border-top:2px solid rgba(69,58,76,.16)}
#panel-mdh .mdh-traj-card.m{border-top-color:var(--mdh-m)}
#panel-mdh .mdh-traj-card.d{border-top-color:var(--mdh-d)}
#panel-mdh .mdh-traj-card.hs{border-top-color:var(--mdh-hs)}
#panel-mdh .mdh-traj-tag{font-family:var(--sans);font-size:12.5px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;line-height:1.35;color:var(--ink-muted)}
#panel-mdh .mdh-traj-card.m .mdh-traj-tag,
#panel-mdh .mdh-traj-card.d .mdh-traj-tag,
#panel-mdh .mdh-traj-card.hs .mdh-traj-tag{color:var(--ink-muted)}
#panel-mdh .mdh-traj-flow{align-items:baseline;gap:10px}
#panel-mdh .mdh-traj-n{font-family:var(--display);font-size:26px;font-weight:600;
  opacity:.4;color:var(--ardoise);line-height:1}
#panel-mdh .mdh-traj-stage.end .mdh-traj-n{font-size:40px;opacity:1}
#panel-mdh .mdh-traj-yr{font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:.12em;color:var(--ink-muted)}
#panel-mdh .mdh-traj-arrow{color:var(--ink-muted);font-size:16px}
#panel-mdh .mdh-traj-note{font-size:15px;line-height:1.55;color:rgba(69,58,76,.86)}

/* -- Sub-block spacing, so the two halves of Why now read as two moves. -- */
#panel-mdh .mdh-subblock + .mdh-subblock{margin-top:44px}

/* Seven cards across three columns gave 31 characters a line. Two columns is
   nearer the 45-75 band without making the section much taller. */
#panel-mdh .abt-cards{grid-template-columns:1fr 1fr}
@media (max-width:820px){#panel-mdh .abt-cards{grid-template-columns:1fr}}

/* The sub-tab panel carried a 12px top margin, which showed as a strip of page
   ground under the intro columns. Each section inside pads itself, so the panel
   needs none. */
/* .mdh-tab-panel.active carries margin-top:12px for the sub-tab switcher it
   used to sit under. Neither of these two has a switcher above it, and the 12px
   let the band's ground show as a strip under the header. The Glossary needs
   its own selector: its panel is in #panel-glossary-body, not #mdh-panels. */
#mdh-panels > .mdh-tab-panel,
#panel-glossary-body > .mdh-tab-panel{margin-top:0}


/* A cell that does not apply now says why. Set small and quiet so the dots stay
   the thing the eye finds first, and the reasons are there when a reader stops
   on a row. */
#panel-mdh .mdh-cmp-cases td.off{font-size:13.5px;line-height:1.4;color:var(--ink-muted);
  text-align:left;font-style:italic}
#panel-mdh .mdh-cmp-cases td.on{font-size:16.5px}


/* ══ Why we broaden the H pillar: three lists ═════════════════════════════
   Replaces the comparison grid. The third column is the argument, so it is the
   only one whose rule is Groseille; the first two are quiet by comparison. */
#panel-mdh .mdh-broaden-lists{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  margin:0 auto;max-width:var(--measure);align-items:stretch}
/* Washed cards, as on the homepage: the ground carries the distinction, so
   there is no rule and no border. The washes are the same three the framing
   cards in Why now use, which keeps one card vocabulary across the page. */
#panel-mdh .mdh-bl{padding:24px 26px 26px;border-top:none;border-radius:10px}
/* The same three tints as the arguments in "Why we use MDH", at the same 4% on
   white, in a different order: Marron, Canard, Zinzolin here against Canard,
   Zinzolin, Marron there. Each card's tint is the accent already on its title
   and its bullets. */
/* Marron #5B3428 at 11%. 18% made this card visibly heavier than the other
   two; 11% lands it at 15 points of separation from the ground, between
   Canard at 16 and Zinzolin at 12, so the three read at one weight. */
#panel-mdh .mdh-bl.is-hs{background:#EDE9E7}
#panel-mdh .mdh-bl.is-mal{background:#E6F1F2}
#panel-mdh .mdh-bl.is-gap{background:#EFE9F3}
#panel-mdh .mdh-bl-h{font-family:var(--sans);font-size:12.5px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;margin:0 0 8px}
/* The eyebrow takes its card's colour, the same accent as that card's
   bullets. Carotte and Leman are 3.25 and 2.99 to 1 and cannot carry text,
   so the warm card uses Marron 10.7 and the cool one Canard 5.5. */
#panel-mdh .mdh-bl.is-hs  .mdh-bl-h{color:var(--marron)}
#panel-mdh .mdh-bl.is-mal .mdh-bl-h{color:var(--canard)}
#panel-mdh .mdh-bl.is-gap .mdh-bl-h{color:var(--zinzolin)}
/* One accent per card, each clearing AA: Marron 10.7, Canard 5.5, Zinzolin 10.3. */
#panel-mdh .mdh-bl.is-mal .mdh-bl-list li::before{background:var(--canard)}
/* The descriptor sits on one line across all three columns, so it gets a fixed
   minimum height rather than pushing each list to a different start. */
#panel-mdh .mdh-bl-sub{font-size:13.5px;line-height:1.5;color:var(--ink-muted);
  margin:0 0 18px;font-style:italic;min-height:3em}
#panel-mdh .mdh-bl-list{list-style:none;margin:0;padding:0}
#panel-mdh .mdh-bl-list li{font-size:16px;line-height:1.45;padding:0 0 0 20px;
  margin:0 0 14px;position:relative}
#panel-mdh .mdh-bl-list li::before{content:'';position:absolute;left:2px;top:.55em;
  width:6px;height:6px;border-radius:50%;background:var(--marron)}
#panel-mdh .mdh-bl.is-gap .mdh-bl-list li::before{background:var(--zinzolin)}
#panel-mdh .mdh-bl-list li:last-child{margin-bottom:0}
#panel-mdh .mdh-bl-why{display:block;font-size:12.5px;line-height:1.45;font-style:italic;
  color:var(--ink-muted);margin-top:5px}
#panel-mdh .mdh-bl-foot{font-size:13.5px;line-height:1.55;color:var(--ink-muted);
  margin:16px 0 0;padding-top:13px;border-top:1px solid rgba(69,58,76,.12)}
@media (max-width:980px){
  #panel-mdh .mdh-broaden-lists{grid-template-columns:1fr;gap:34px}
}


/* ══ Why we use MDH: the Definitions device ═══════════════════════════════
   Same grid and same 66px serif numeral as #panel-mdh .mdh-def-entry above, so
   the two sections read as one page. Scoped to #panel-mdh because the panel
   sits inside a .band and `.band p` (0,1,1) outranks a bare class. */
/* Full measure, like the grid and the closing statement below it. The 78ch
   reading cap that used to be here made this one paragraph visibly narrower than
   everything it introduces, which read as a mistake rather than as a measure. */
#panel-mdh .mdh-rat-prov{font-size:16px;line-height:1.6;color:var(--ink-muted);
  margin:0 auto 34px;max-width:var(--measure)}
#panel-mdh .mdh-rat-prov strong{color:var(--ardoise);font-weight:600}
#panel-mdh .mdh-rat{display:grid;grid-template-columns:1fr 1fr;gap:14px;
  margin:0 auto;max-width:var(--measure);align-items:stretch}
/* Numeral and heading share a baseline on one row, the body runs under both.
   The numeral comes down from 66px: beside its heading rather than in a column
   of its own, 66 was taller than the two lines it sat next to. */
/* A card, but barely: each accent at 4% on white rather than the 8-12% the
   other cards on the page use, so the tint reads as a faint tone rather than as
   a colour. The accent itself stays on the numeral and the heading, where it
   clears AA: Canard 5.5, Zinzolin 10.3, Marron 10.7. */
#panel-mdh .mdh-rat-entry{padding:26px 30px 28px;border:none;border-radius:10px;
  text-align:left}
#panel-mdh .mdh-rat-entry.a-canard{background:#F5F9FA}
#panel-mdh .mdh-rat-entry.a-zinzolin{background:#F9F6FA}
#panel-mdh .mdh-rat-entry.a-marron{background:#F9F7F7}
#panel-mdh .mdh-rat-entry.a-groseille{background:#FDF6F6}
#panel-mdh .mdh-rat-entry.a-canard   .mdh-rat-h{color:var(--canard)}
#panel-mdh .mdh-rat-entry.a-zinzolin .mdh-rat-h{color:var(--zinzolin)}
#panel-mdh .mdh-rat-entry.a-marron   .mdh-rat-h{color:var(--marron)}
#panel-mdh .mdh-rat-entry.a-groseille .mdh-rat-h{color:var(--groseille)}
#panel-mdh .mdh-rat-h{font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;line-height:1.5;margin:0 0 10px}
#panel-mdh .mdh-rat-b{font-size:16px;line-height:1.62;color:rgba(69,58,76,.86)}
/* A link inside an argument (to Deeper dive): the text's colour, underlined (2026-09-14). */
#panel-mdh .mdh-rat-b a{color:inherit;text-decoration:underline;text-underline-offset:2px}
#panel-mdh .mdh-rat-close{margin:38px auto 0;max-width:var(--measure);
  padding-top:26px;border-top:2px solid var(--ardoise)}
#panel-mdh .mdh-rat-close-h{font-family:var(--display);font-size:22px;font-weight:600;
  letter-spacing:-.01em;margin:0 0 10px;color:var(--ardoise)}
#panel-mdh .mdh-rat-close-b{font-size:16px;line-height:1.62;color:rgba(69,58,76,.86);
  max-width:none}
@media (max-width:900px){#panel-mdh .mdh-rat{grid-template-columns:1fr;gap:26px}}


/* ══ Why now: the ranking beside the framing cards ════════════════════════
   One ground under the whole WEF argument, the same Perle wash the intro
   section splits on, with the three cards beside it on white. The cards
   distribute over the full height so the two columns finish level: the WEF
   column is the taller content, so it is tightened rather than the cards
   being padded out. */
/* calc(50% - 4px), not 1fr 1fr: the 8px rule sits inside the right column, so an
   even split puts its centre 4px past the midline. Pulling the left column back
   by half the rule lands the divider exactly on 50%, where the ramp and note
   columns split below it. */
#panel-mdh .mdh-wf{display:grid;gap:0;align-items:stretch;
  grid-template-columns:calc(50% - 4px) 1fr;margin:0 auto;max-width:var(--measure)}
/* The cards are the taller column, so the ranking distributes over the height
   rather than being tightened into it: squeezing the table only moved the void
   to the bottom of the grey pane. */
#panel-mdh .mdh-wf-main{background:transparent;display:flex;flex-direction:column;
  padding:0 48px 0 0;align-self:stretch}
#panel-mdh .mdh-wf-main > .mdh-wef{flex:1;display:flex;flex-direction:column;gap:14px}
#panel-mdh .mdh-wf-main > .mdh-wef > .mdh-wef-head{margin-bottom:0}
/* The only division is one hairline. The three cards carry their own washes,
   which is separation enough without a second ground behind them. */
/* The divider runs the whole row: align-items:stretch on the grid makes the
   column full height, so the border spans it rather than stopping at the last
   card. align-content distributes the cards inside that height. */
#panel-mdh .mdh-wf-cards{background:transparent;display:grid;gap:12px;
  align-content:space-between;padding:0 0 0 48px;border-left:8px solid #fff;
  align-self:stretch}
#panel-mdh .mdh-wf-cards .abt-card{margin:0}
/* Tightened so the ranking column does not overrun the three cards. */
#panel-mdh .mdh-wf-main .mdh-wef-title{font-size:16.5px;line-height:1.35;margin:0 0 16px}
#panel-mdh .mdh-wf-main .mdh-wef-tbl th,
#panel-mdh .mdh-wf-main .mdh-wef-tbl td{padding:12px 10px}
#panel-mdh .mdh-wf-main .mdh-wef-quote{margin-top:6px;padding-top:0;font-size:16px;
  line-height:1.5;font-style:italic;color:var(--marron)}

/* ══ Why now: each trajectory beside its own note ═════════════════════════ */
#panel-mdh .mdh-wf-traj{display:grid;gap:26px;margin:0 auto;max-width:var(--measure)}
#panel-mdh .mdh-wf-bar{height:16px}
#panel-mdh .mdh-wf-t{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start;
  padding-top:22px;border-top:1px solid rgba(69,58,76,.14)}
#panel-mdh .mdh-wf-t:first-child{border-top:none;padding-top:0}
/* The plot title carries the pillar colour; the pillar is not named again. */
#panel-mdh .mdh-wf-t-tag{font-family:var(--display);font-size:19px;font-weight:600;
  line-height:1.25;margin:0 0 16px;color:var(--ardoise)}
#panel-mdh .mdh-wf-rows{display:grid;gap:8px}
#panel-mdh .mdh-wf-r{display:grid;grid-template-columns:56px 1fr 96px;gap:16px;align-items:center}
#panel-mdh .mdh-wf-y{font-size:12.5px;font-weight:700;letter-spacing:.1em;color:var(--ink-muted)}
#panel-mdh .mdh-wf-bar{height:16px;background:rgba(69,58,76,.07);border-radius:2px;overflow:hidden}
#panel-mdh .mdh-wf-bar span{display:block;height:100%;border-radius:2px}
#panel-mdh .mdh-wf-t.m  .mdh-wf-bar span{background:var(--mdh-m2)}
#panel-mdh .mdh-wf-t.d  .mdh-wf-bar span{background:var(--mdh-d2)}
#panel-mdh .mdh-wf-t.hs .mdh-wf-bar span{background:var(--mdh-hs2)}
#panel-mdh .mdh-wf-v{font-family:var(--display);font-size:19px;font-weight:600;opacity:.5}
#panel-mdh .mdh-wf-v.end{font-size:28px;opacity:1}
/* Body size and colour, as .mdh-rat-b. At 13.5px and 80% it was the one prose block on the Overview
   set smaller and fainter than the rest (2026-09-14). */
#panel-mdh .mdh-wf-t-r{font-size:16px;line-height:1.62;color:rgba(69,58,76,.86)}
#panel-mdh .mdh-wf-t-r b{color:var(--ardoise);font-weight:600}
@media (max-width:980px){
  #panel-mdh .mdh-wf,#panel-mdh .mdh-wf-t{grid-template-columns:1fr;gap:22px}
  /* Stacked, the 48px gap and the 8px divider pushed the cards 56px right (2026-09-14). */
  #panel-mdh .mdh-wf-main{padding:0}
  #panel-mdh .mdh-wf-cards{padding:0;border-left:0}
}


/* ══ The WEF block, as drafted ════════════════════════════════════════════
   Marron on the label, the ranks and the quote: 10.7:1, so it holds at any
   size. The claim is the headline; what M and D outrank is support and sits
   lighter beneath it. */
#panel-mdh .mdh-wef-eyebrow{font-family:var(--display);font-size:20px;font-weight:600;
  letter-spacing:-.01em;text-transform:none;color:var(--ardoise);margin:0 0 8px}
#panel-mdh .mdh-wef-head{font-family:var(--sans);font-size:16px;font-weight:400;
  line-height:1.55;letter-spacing:0;color:rgba(69,58,76,.86);margin:0 0 4px;max-width:52ch}
#panel-mdh .mdh-wef-sub{color:var(--ink-muted)}
#panel-mdh .mdh-wef-tbl{width:100%;border-collapse:collapse}
#panel-mdh .mdh-wef-tbl th,
#panel-mdh .mdh-wef-tbl td{text-align:left;padding:12px 10px;
  border-top:1px solid rgba(69,58,76,.16)}
#panel-mdh .mdh-wef-tbl thead th{border-top:none;font-family:var(--sans);font-size:12px;
  font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-muted);
  padding-bottom:8px}
#panel-mdh .mdh-wef-tbl thead th span{display:block;font-size:12px;letter-spacing:.1em;
  color:var(--ink-muted);margin-top:3px}
#panel-mdh .mdh-wef-tbl tbody th{font-family:var(--display);font-size:20px;font-weight:600;
  color:var(--ardoise);width:24%}
#panel-mdh .mdh-wef-tbl tbody tr.is-now th{color:var(--taupe)}
#panel-mdh .mdh-wef-rk{font-family:var(--display);font-size:26px;font-weight:600;
  color:var(--marron);width:30%}
#panel-mdh .mdh-wef-tbl .mdh-wef-note td{border-top:none;padding-top:0;font-size:12.5px;
  font-style:italic;color:var(--ink-muted)}
/* No rule above the quote: it belongs to the table it follows, and a line
   between them was reading as a separation rather than a join. */
#panel-mdh .mdh-wef-quote{margin:0;padding:0;border-top:none;
  font-family:var(--display);font-style:italic;font-size:16px;line-height:1.5;
  color:var(--marron)}
#panel-mdh .mdh-wef-quote cite{display:block;margin-top:8px;font-family:var(--sans);
  font-style:normal;font-size:12.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-muted)}


/* ── Neutralise the old .mdh-wef card inside the new grey column ──────────
   The block used to be a bordered white card with a Zinzolin rule under the
   header. Inside .mdh-wf-main it sits on the section's own ground, so the
   frame, the fill and that rule all have to go: two grounds plus a border is
   the thing this layout exists to avoid. These win on specificity rather than
   by editing the old rules, which are still used by the Patterns tabs. */
#panel-mdh .mdh-wf-main .mdh-wef{margin:0;border:none;border-radius:0;
  background:transparent;box-shadow:none;padding:0}
#panel-mdh .mdh-wf-main .mdh-wef-tbl th,
#panel-mdh .mdh-wf-main .mdh-wef-tbl td{background:transparent;text-align:left}
#panel-mdh .mdh-wf-main .mdh-wef-tbl thead th{border-bottom:none;
  border-top:none;font-size:12px;font-weight:700;letter-spacing:.13em;
  color:var(--ink-muted)}
#panel-mdh .mdh-wf-main .mdh-wef-tbl tbody th,
#panel-mdh .mdh-wf-main .mdh-wef-tbl tbody td{border-top:1px solid rgba(69,58,76,.16)}
#panel-mdh .mdh-wf-main .mdh-wef-tbl{table-layout:auto}


/* The three framing-card titles take the same eyebrow as every section label on
   the homepage and this page, rather than the 17.5px/900 heading they carried:
   they are labels on a card, not headings in their own right. */
#panel-mdh .mdh-wf-cards .abt-card-lbl{font-family:var(--sans);font-size:12.5px;
  font-weight:700;letter-spacing:.15em;text-transform:uppercase;line-height:1.35;
  color:var(--ardoise);margin:0 0 10px}


/* ── Sub-blocks inside Why now ────────────────────────────────────────────
   Groseille is the eyebrow before a section title. These are labels one level
   down, so they take a quiet Ardoise and earn their separation from a rule
   above them instead of from colour. */
#panel-mdh .mdh-subblock{margin-top:44px;padding-top:40px;border-top:8px solid #fff}
#panel-mdh .mdh-subblock:first-child{margin-top:0;padding-top:0;border-top:none}


/* Part labels inside a section: a serif numeral and a plain title, one level
   below the section's own Groseille eyebrow and clearly not the same thing. */
#panel-mdh .mdh-part{display:flex;align-items:baseline;gap:14px;margin:0 0 24px;
  font-family:var(--display);font-size:20px;font-weight:600;color:var(--ardoise)}
#panel-mdh .mdh-part-n{font-family:var(--display);font-size:15px;font-weight:600;
  color:var(--ink-muted);letter-spacing:.06em}


/* The three framing cards take the pillar colours as washes, in the order the
   argument now runs. Each is its pillar at 12% on white, so the hue is legible
   as Rose / Acier / Mont Rose without any of them carrying text: at full
   strength they are 2.87, 3.42 and 2.21 to 1. */
#panel-mdh .abt-card.frame-rose{border:none;background:#FDEEF3}
#panel-mdh .abt-card.frame-acier{border:none;background:#EAF2F9}
#panel-mdh .abt-card.frame-montrose{border:none;background:#FEF3ED}
/* Each label takes its card's pillar, in the text-safe form the stylesheet
   already defines for exactly this: Rose, Acier and Mont Rose are 2.87, 3.42 and
   2.21 to 1, so --mdh-m-txt (Groseille 6.6), --mdh-d-txt (Canard 5.5) and
   --mdh-hs-txt (Marron 10.7) stand in for them wherever the pillar has to
   carry type. */
#panel-mdh .abt-card.frame-rose .abt-card-lbl{color:var(--mdh-m-txt)}
#panel-mdh .abt-card.frame-acier .abt-card-lbl{color:var(--mdh-d-txt)}
#panel-mdh .abt-card.frame-montrose .abt-card-lbl{color:var(--mdh-hs-txt)}


/* The cross-flow argument is the long one and the one the other two support, so
   it takes the full width and the remaining two share the row beneath it. */
#panel-mdh .mdh-rat-entry:first-child{grid-column:1 / -1}
/* The lead argument keeps the full width; its body is capped so a centred
   paragraph does not run the whole 1240px. */
#panel-mdh .mdh-rat-entry:first-child .mdh-rat-b{max-width:96ch}


/* ══ Ask the Research: treatment A, editorial ═════════════════════════════
   The last framed widget on these two tabs, unframed. Scoped to #panel-mdh
   because the panel sits inside a .band and `.band p` (0,1,1) outranks a bare
   class. */
/* The panel takes the ground of Definitions and context, #fff, and the answer
   takes the ground of Why we broaden the H pillar, the Perle wash, so the reply
   reads as a different section from the question rather than as a bubble. */
/* Scoped to the chat sub-tab, not the panel: .mdh-tab-card also wraps the whole
   Overview, so a #panel-mdh rule here painted that too and left its bottom
   padding hanging under the page as an empty white strip. */
#mdh-tchat .mdh-tab-card{background:#fff;border:none;border-radius:0;box-shadow:none;
  padding:34px var(--gutter);margin:0 calc(var(--gutter) * -1)}
#panel-mdh .mdh-chat-thread{background:var(--ground);padding:30px 34px;margin:0 0 26px}
#panel-mdh .mdh-chat-thread:empty{display:none}
#panel-mdh .mdh-chat-cits{background:var(--ground);padding:18px 34px 26px;margin:-26px 0 26px}
#mdh-tchat .mdh-chat{max-width:var(--measure);margin:0 auto}

/* The audience selector reads as a control, not as navigation. */
#panel-mdh .mdh-chat-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0 0 26px;padding:0;border:none;background:none}
#panel-mdh .mdh-chat-aud{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#panel-mdh .mdh-chat-aud-label{font-family:var(--sans);font-size:12.5px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-muted)}
#panel-mdh .mdh-chat-aud-btn{font-family:var(--sans);font-size:13.5px;padding:7px 14px;
  border-radius:20px;border:1px solid rgba(69,58,76,.14);background:#fff;
  color:rgba(69,58,76,.86);cursor:pointer}
#panel-mdh .mdh-chat-aud-btn.active{background:var(--ardoise);border-color:var(--ardoise);
  color:#fff;font-weight:600}
#panel-mdh .mdh-chat-reset{margin-left:auto;border:none;background:none;font-size:12px;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);
  cursor:pointer;padding:0}

/* The field is a rule, not a box. */
#panel-mdh .mdh-chat-form{display:flex;align-items:baseline;gap:16px;
  border:none;border-bottom:2px solid var(--ardoise);border-radius:0;background:none;
  padding:0 0 12px;margin:0 0 10px}
#panel-mdh .mdh-chat-input{flex:1;border:none;border-radius:0;background:none;outline:none;
  box-shadow:none;resize:none;overflow:hidden;min-height:0;
  font-family:var(--display);font-size:22px;font-weight:400;line-height:1.35;
  color:var(--ardoise);padding:0}
#panel-mdh .mdh-chat-input::placeholder{color:var(--ink-muted)}
#panel-mdh .mdh-chat-send{border:none;border-radius:0;background:none;padding:0;
  font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--canard);cursor:pointer;white-space:nowrap}
#panel-mdh .mdh-chat-send:hover{color:var(--ardoise)}
#panel-mdh .mdh-chat-note{font-size:13.5px;line-height:1.55;color:var(--ink-muted);
  margin:0 0 34px}

/* The starter questions are a grid, three pillars against five buckets, so they
   are set as one: the initial in its pillar colour, the buckets as quiet fills
   that take Canard on hover. */
#panel-mdh .mdh-chat-chips{margin:0 0 34px;padding:0;border:none;background:none}
#panel-mdh .mdh-chat-chips-label{display:block;font-family:var(--sans);font-size:12.5px;
  font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ardoise);margin:0 0 16px}
#panel-mdh .mdh-chat-grid{display:block}
/* The row label is ONE span holding the initial and the name, not two, so it
   needs one column: a 34px + 150px pair left the name overflowing its cell and
   colliding with the first bucket. The rows also stop short of the full measure
   and take their pillar as a wash, so the three read as a table of three
   pillars rather than as five loose buttons a line. */
#panel-mdh .mdh-chat-grid{max-width:940px}
#panel-mdh .mdh-chat-grid-row{display:grid;grid-template-columns:190px repeat(5,1fr);
  gap:8px;align-items:center;padding:10px 12px;border-top:none;
  border-radius:8px;margin-bottom:6px}
#panel-mdh .mdh-chat-grid-row:nth-of-type(1){background:#FDEEF3}
#panel-mdh .mdh-chat-grid-row:nth-of-type(2){background:#EAF2F9}
#panel-mdh .mdh-chat-grid-row:nth-of-type(3){background:#FEF3ED}
#panel-mdh .mdh-chat-rowlabel{display:flex;align-items:baseline;gap:10px;
  font-family:var(--display);font-size:16px;font-weight:600;color:var(--ardoise)}
#panel-mdh .mdh-chat-rowlabel > :first-child{font-size:22px;font-weight:600;line-height:1}
#panel-mdh .mdh-chat-grid-row:nth-of-type(1) .mdh-chat-rowlabel > :first-child{color:var(--mdh-m)}
#panel-mdh .mdh-chat-grid-row:nth-of-type(2) .mdh-chat-rowlabel > :first-child{color:var(--mdh-d)}
#panel-mdh .mdh-chat-grid-row:nth-of-type(3) .mdh-chat-rowlabel > :first-child{color:var(--mdh-hs)}
#panel-mdh .mdh-chat-grid-row > button,
#panel-mdh .mdh-chat-grid-row .mdh-chat-chip{font-family:var(--sans);font-size:12.5px;
  padding:7px 10px;border-radius:6px;border:none;background:rgba(255,255,255,.72);
  color:var(--ardoise);cursor:pointer;text-align:left;line-height:1.3}
#panel-mdh .mdh-chat-grid-row > button:hover,
#panel-mdh .mdh-chat-grid-row .mdh-chat-chip:hover{background:var(--canard);color:#fff}
/* Cross-cutting row retired. */
#panel-mdh .mdh-chat-cross{display:none}

/* Sources sit under the answer as a numbered list, so a citation mark in the
   text resolves on the same screen instead of in a separate bordered block. */
#panel-mdh .mdh-chat-cits{border:none;border-radius:0;background:var(--ground);
  padding:6px 34px 26px;margin:-26px 0 26px}
#panel-mdh .mdh-chat-cits-title{font-family:var(--sans);font-size:12.5px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-muted);margin:0 0 14px}


/* The Marron review flag wraps every string in these cards, so it was painting
   the titles and the body brown and overriding the per-card accents. Inside the
   comparison the flag inherits instead, exactly as it already does in the
   glance table. */
#panel-mdh .mdh-bl .new-copy,
#panel-mdh .mdh-bl-h .new-copy,
#panel-mdh .mdh-bl-sub .new-copy,
#panel-mdh .mdh-bl-list .new-copy,
#panel-mdh .mdh-bl-why .new-copy,
#panel-mdh .mdh-def-note .new-copy,
:is(#panel-mdh,#panel-glossary) .mdh-page-section-title .new-copy{color:inherit}
/* Body text in the cards is Ardoise; only the title carries the accent. */
#panel-mdh .mdh-bl-list li{color:var(--ardoise)}


/* ══ At a glance: sized to its content ════════════════════════════════════
   The table was stretching to whatever column it sat in, so a two-word answer
   like "Sometimes" ended up half a page from its question. max-content on both
   tracks lets it size to the longest question and the longest answer, and the
   whole thing then caps well short of the column. Hairlines between rows so the
   three answers can be read down as a column. */
#panel-mdh .mdh-glance{grid-template-columns:max-content max-content;
  column-gap:0;max-width:100%;width:max-content}
/* The gutter is padding on the answer, not a grid gap: a gap breaks the row
   rule in two, so the line ran under the question, stopped, and started again
   under the answer. As padding the rule crosses the whole row. */
#panel-mdh .mdh-glance dt{padding:7px 0;border-top:1px solid rgba(69,58,76,.12)}
/* Longhand, not the shorthand: a later padding shorthand was resetting the
   28px gutter back to zero. */
#panel-mdh .mdh-glance dd{padding:7px 0 7px 28px;border-top:1px solid rgba(69,58,76,.12)}
#panel-mdh .mdh-glance dt:first-of-type,
#panel-mdh .mdh-glance dt:first-of-type + dd{border-top:none;padding-top:0}

/* ── At a glance, split form (the H pillar only) ──
   Same type, same hairlines, same answer colours as .mdh-glance above: it must
   read as the same device, because the two sit one under the other down the
   page and a reader compares them. The only difference is that the answer is
   two columns instead of one, because the heading above it names two things.

   width:max-content for the same reason the <dl> uses it: the table was
   stretching to whatever column it sat in and pushing the answers half a page
   from their questions. */
#panel-mdh .mdh-glance-2{border-collapse:collapse;margin:0;font-size:15px;
  width:max-content;max-width:100%}
/* The column heads are the two halves of the pillar. Set as the same small
   uppercase label the rest of the page uses for a column name, not as body
   type, so they read as headings for what is under them rather than as a first
   row of answers. */
#panel-mdh .mdh-glance-2 thead th{font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);
  text-align:left;padding:0 0 7px 28px;white-space:nowrap}
#panel-mdh .mdh-glance-2 tbody th{font-weight:400;text-align:left;color:rgba(69,58,76,.78);
  padding:7px 0;border-top:1px solid rgba(69,58,76,.12)}
#panel-mdh .mdh-glance-2 td{font-weight:600;text-align:left;color:var(--ardoise);
  padding:7px 0 7px 28px;border-top:1px solid rgba(69,58,76,.12);white-space:nowrap}
/* The head row carries the rule for the first body row, so the body row must
   not draw a second one on top of it. */
#panel-mdh .mdh-glance-2 thead td,
#panel-mdh .mdh-glance-2 thead th{border-top:none}
#panel-mdh .mdh-glance-2 td.a-yes{color:var(--ans-yes)}
#panel-mdh .mdh-glance-2 td.a-no{color:var(--groseille)}
#panel-mdh .mdh-glance-2 td.a-maybe{color:var(--ans-maybe)}
/* Narrow: the question column is the one that can give, so let it wrap and
   drop the answer gutter rather than let the table scroll. */
@media (max-width:600px){
  #panel-mdh .mdh-glance-2{width:100%}
  #panel-mdh .mdh-glance-2 tbody th{white-space:normal;padding-right:12px}
  #panel-mdh .mdh-glance-2 thead th,
  #panel-mdh .mdh-glance-2 td{padding-left:14px}
}


/* The name the pillar is being read as, in Mont Rose, the H pillar colour.
   Only this one: the lede also bolds "malinformation", which is a different
   pillar and must not take the accent. Note Mont Rose is 2.21:1 on the Perle
   ground, so this is the one piece of body type on the page below AA; the
   text-safe stand-in for the same pillar is --mdh-hs-txt, Marron 10.7:1. */
#panel-mdh .mdh-def-note strong.th{color:var(--mdh-hs)}


/* ══ Patterns x MDH: the matrix is the page ═══════════════════════════════
   Buckets are hidden until a cell is chosen, then the one bucket opens beneath
   the grid at full width in the split view: topics left, that bucket's evidence
   right, on the 8px white rule the Overview uses. The 2-up bucket row is
   dropped only while a single bucket is showing, so nothing is squeezed. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-bucket{display:none}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .mdh-bucket-row{display:block}
/* The split view this block styled is gone: the opened bucket is editorial rows
   now, styled at the end of this file. Only one of its rules still fired, the
   44px + 8px inset on .mdh-bucket-feat, and it was pushing the leftover-figures
   strip 52px out of line with the rows above it. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .mdh-bucket-feat-item{display:grid;grid-template-columns:auto 1fr;gap:14px;
  align-items:baseline;padding:11px 0;border-top:1px solid rgba(69,58,76,.14)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .mdh-bucket-feat-item:first-child{border-top:none;padding-top:0}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .mdh-bucket-feat-n{font-family:var(--display);font-size:26px;font-weight:600;line-height:1}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .mdh-bucket.m .mdh-bucket-feat-n{color:var(--mdh-m-txt)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .mdh-bucket.d .mdh-bucket-feat-n{color:var(--mdh-d-txt)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .mdh-bucket.hs .mdh-bucket-feat-n{color:var(--mdh-hs-txt)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .mdh-bucket-feat-t{font-size:13.5px;line-height:1.45;color:var(--ink-muted)}

/* The grid. Cells are buttons, and the chosen one keeps an Ardoise outline. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-index{margin:0 0 26px;display:block}/* The key: what each column means, before the grid asks the reader to choose. */
/* Two sections, so two grounds, alternating the way the Overview's bands do:
   How to read this page on the ground wash, Pick a pillar and a question on
   white. The band-white class was being outranked on this tab, so both were
   rendering rgb(246,245,245) and the seam had no value change at all. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-index .pat-keysec{background:#fff}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-index .pat-gridsec{background:var(--ground)}:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx{display:grid;grid-template-columns:150px repeat(5,1fr);gap:8px;
  background:transparent}
/* The house eyebrow: 12.5px, .15em, and full-strength Ardoise. At .45 alpha
   these read 2.33:1, the palest type on the tab. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-h{font-family:var(--sans);font-size:12.5px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ardoise);align-self:start;
  padding:0 0 6px;line-height:1.3;background:none;border:none;text-align:left;
  cursor:pointer;border-radius:6px}
/* These are controls, so they have to look like controls. A colour shift alone
   read as decoration and the click felt like a no-op. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-h,:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-name{transition:background .15s ease,color .15s ease}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-h:hover .pat-mx-bn,:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-name:hover .pat-mx-pn{color:var(--groseille)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-h:hover,:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-name:hover{background:rgba(181,31,31,.07)}
/* Only the word turns Groseille when chosen. The pillar initial keeps its pillar
   colour and the question letter keeps the bucket brown, so the two alphabets
   the key teaches stay legible in the selected state. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-h.is-sel .pat-mx-bn,:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-name.is-sel .pat-mx-pn{
  color:var(--groseille);box-shadow:inset 0 -2px 0 var(--groseille)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-h.is-sel,:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-name.is-sel{background:rgba(181,31,31,.07)}
/* The question letter sits above its name, so the column reads letter then
   question the way the key teaches it. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-bk{display:block;font-family:var(--display);font-size:20px;
  font-weight:600;line-height:1;color:var(--zinzolin);letter-spacing:0;
  text-transform:none;margin:0 0 6px}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-h{display:block}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-h{padding:6px 8px;margin:0 -8px -6px}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-name{padding:8px 10px;margin:0 0 0 -10px}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-h:focus-visible,:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-name:focus-visible{
  outline:3px solid var(--canard);outline-offset:2px}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-name{display:flex;align-items:baseline;gap:10px;font-family:var(--display);
  font-size:16px;font-weight:600;color:var(--ardoise);background:none;border:none;
  padding:0;text-align:left;cursor:pointer;border-radius:6px}
/* On Deeper dive the pillar names are labels, with no hover ground to make room for, so they start where
   the page starts. The -10px pulled them left of the column, and to 4px from the edge of a phone. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-name.is-static{margin-left:0}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-ini{font-family:var(--display);font-size:22px;font-weight:600;line-height:1}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-name.m .pat-mx-ini{color:var(--mdh-m)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-name.d .pat-mx-ini{color:var(--mdh-d)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-name.hs .pat-mx-ini{color:var(--mdh-hs)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-c{display:block;border:none;border-radius:8px;padding:11px 10px;
  font-family:var(--sans);font-size:12.5px;line-height:1.3;color:var(--ardoise);
  cursor:pointer;text-align:left}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-c b{display:block;font-family:var(--display);font-size:20px;font-weight:600;
  line-height:1;margin-bottom:4px}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-lbl{display:none;font-size:12px;font-weight:600;line-height:1.3;
  color:var(--ardoise);margin-bottom:3px}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-n{display:block;font-size:12px;color:rgba(69,58,76,.78)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-c.m{background:#FDEEF3}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-c.d{background:#EAF2F9}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-c.hs{background:#FEF3ED}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-c.is-empty{background:rgba(69,58,76,.04);cursor:default}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-c:hover{outline:2px solid rgba(69,58,76,.35)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-c.is-sel{outline:2px solid var(--ardoise)}
/* Focusing the cell that is already chosen used to change only the offset, so
   the keyboard ring was invisible on it. Canard separates the two states. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-c:focus-visible{outline:3px solid var(--canard);outline-offset:2px}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-c.is-sel:focus-visible{outline:3px solid var(--canard);outline-offset:3px}:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-cross.is-sel{outline:2px solid var(--ardoise)}/* One column below 1000px, so the shared column headers can no longer label
   anything: each cell names its own question instead. */
@media (max-width:1000px){:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx{grid-template-columns:1fr}
  :is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-lbl{display:block}
  /* The headers stop being column labels here, but they are still the only way
     to pick a whole question, so they become a wrapped row of chips. */
  :is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-h{grid-column:1;display:inline-block;width:auto;
    border:1px solid rgba(69,58,76,.2);border-radius:999px;padding:6px 12px;margin:0}
  :is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-name{grid-column:1;margin-top:14px}}
/* On phones the five headings stacked into a 330px list before the grid, and each cell already
   names its question, so they go (2026-09-14). */
@media (max-width:720px){
  :is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-h,
  #mdh-tall .pat-mx .pat-mx-h.is-static{display:none}
}


/* The three sections sit in the page chrome, so the index no longer needs its
   own furniture: bands, eyebrows and serif titles come from mdh-page-section. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-index .mdh-page-section{padding:56px var(--gutter);margin:0 calc(var(--gutter) * -1)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-index .mdh-page-section > *{max-width:var(--measure);margin-inline:auto}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-keysec .pat-key-l{max-width:var(--measure);margin:0 auto}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-gridsec .pat-mx{max-width:var(--measure);margin:0 auto}


/* Nothing but the three index sections until a cell is chosen: the pillar
   blocks, their headlines, charts and bars live outside the buckets, so hiding
   the buckets alone left them on screen. The standalone Bucket key goes too,
   its content is in the How to read this page section now. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-pillar{display:none}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-pillar.is-open{display:block}/* The page's own Bucket key stays, and sits inside How to read this page rather
   than loose above the pillar blocks. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .mdh-blgnd{display:block;max-width:var(--measure);margin:22px auto 0;
  padding-top:20px;border-top:1px solid rgba(69,58,76,.14)}


/* Ask the Research: no Perle type. Perle is 1.7:1 on white, so it is a rule and
   a wash colour, never text. Anything in the chat panel that inherited it takes
   Ardoise instead. */
#mdh-tchat [style*="--perle"],
#mdh-tchat .mdh-chat-note,
#mdh-tchat .mdh-chat-cit-quote,
#mdh-tchat .mdh-chat-cits-title{color:var(--ink-muted)}
#mdh-tchat .abt-step-n,
#mdh-tchat .mdh-chat-aud-label{color:var(--ardoise)}


/* Ask the Research: the matrix reads as a table. A header row names the five
   buckets once; each cell carries the question it puts in the box. */
#panel-mdh .mdh-chat-grid-row.is-head{background:none;padding-bottom:6px;margin-bottom:2px}
#panel-mdh .mdh-chat-colh{font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);
  align-self:end;line-height:1.3}
/* Your question and the starter grid sit on white, as in treatment A. */
#mdh-tchat .mdh-chat-form,
#mdh-tchat .mdh-chat-chips{background:#fff}


/* Treatment A, exactly: the field comes before the starter questions, not after
   them, and each block carries its part label. The live markup renders chips
   before the form, so flex order puts them in the drafted sequence without
   touching the builder. */
#mdh-tchat .mdh-chat{display:flex;flex-direction:column}
#mdh-tchat .mdh-chat-head{order:1}
#mdh-tchat .mdh-chat-form{order:2}
#mdh-tchat .mdh-chat-note{order:3}
#mdh-tchat .mdh-chat-chips{order:4}
#mdh-tchat .mdh-chat-thread{order:5}
#mdh-tchat .mdh-chat-cits{order:6}
#mdh-tchat .mdh-chat-form::before{content:'Write your question...';display:block;
  width:100%;font-family:var(--display);font-size:20px;font-weight:600;
  color:var(--ardoise);margin:0 0 16px}
#mdh-tchat .mdh-chat-chips::before{content:'...Or start from one of these';
  display:block;font-family:var(--display);font-size:20px;font-weight:600;
  color:var(--ardoise);margin:26px 0 16px}
#mdh-tchat .mdh-chat-form{flex-wrap:wrap}
#mdh-tchat .mdh-chat-chips-label{display:none}


/* Ask the Research, final pass.
   - the part labels lose their numbers: two blocks do not need numbering
   - Ask was Perle (1.7:1 on white), which read as a disabled button; Ardoise
     since 2026-09-14
   - the five column headers go Ardoise, they are the table's axis
   - the M/D/H row labels sit on a plain ground, no pillar wash
   - the corpus note goes Ardoise */

#panel-mdh .mdh-chat-send{color:var(--ardoise)}
#panel-mdh .mdh-chat-send:hover{color:var(--canard)}
#panel-mdh .mdh-chat-colh{color:var(--ardoise)}
#panel-mdh .mdh-chat-grid-row{background:none}
#panel-mdh .mdh-chat-grid-row .mdh-chat-rowlabel{background:none}
#panel-mdh .mdh-chat-pill{background:none;color:inherit;padding:0}
#panel-mdh .mdh-chat-note{color:var(--ardoise)}


/* The M/D/H letter is type, not a chip: the coloured square behind it was
   hiding the pillar colour it is meant to show. Raised above the rules that set
   that background. */
#panel-mdh .mdh-chat-grid .mdh-chat-rowlabel .mdh-chat-pill{background:none;
  padding:0;border-radius:0;width:auto;height:auto;min-width:0;box-shadow:none;
  font-family:var(--display);font-size:22px;font-weight:600;line-height:1}
/* Keyed off the row position, not the class: .mdh-chat-p-m also matches
   .mdh-chat-p-mXX style prefixes in the cascade here, which is why M was
   rendering Acier and D Mont Rose. Rows are always M, D, H in that order. */
#panel-mdh .mdh-chat-grid .mdh-chat-grid-row:not(.is-head):nth-of-type(2) .mdh-chat-pill{color:var(--mdh-m)}
#panel-mdh .mdh-chat-grid .mdh-chat-grid-row:not(.is-head):nth-of-type(3) .mdh-chat-pill{color:var(--mdh-d)}
#panel-mdh .mdh-chat-grid .mdh-chat-grid-row:not(.is-head):nth-of-type(4) .mdh-chat-pill{color:var(--mdh-hs)}

/* The two part labels in Groseille, the eyebrow colour this page uses. */
#mdh-tchat .mdh-chat-form::before,
#mdh-tchat .mdh-chat-chips::before{color:var(--groseille)}


/* Pillar colours set from the row's own class and forced, because every
   position-based and specificity-based attempt so far has been outranked
   somewhere in the cascade. m -> Rose, d -> Acier, hs -> Mont Rose. */
#panel-mdh .mdh-chat-p-m  .mdh-chat-pill{color:var(--mdh-m) !important;background:none !important}
#panel-mdh .mdh-chat-p-d  .mdh-chat-pill{color:var(--mdh-d) !important;background:none !important}
#panel-mdh .mdh-chat-p-hs .mdh-chat-pill{color:var(--mdh-hs) !important;background:none !important}
/* The label must sit above the grid, so the container stacks its children. */
#mdh-tchat .mdh-chat-chips{display:block}

/* Both part labels take the eyebrow: 12.5px, 700, .15em, uppercase, Groseille. */
#mdh-tchat .mdh-chat-form::before,
#mdh-tchat .mdh-chat-chips::before{font-family:var(--sans) !important;
  font-size:12.5px !important;font-weight:700 !important;letter-spacing:.15em !important;
  text-transform:uppercase !important;color:var(--groseille) !important}

/* Row grounds keyed to the row class and forced: each pillar at 12% on white,
   Rose / Acier / Mont Rose in that order. The letters were right all along; the
   line behind them was the mismatch. */
#panel-mdh .mdh-chat-grid-row.mdh-chat-p-m{background:#FDEEF3 !important}
#panel-mdh .mdh-chat-grid-row.mdh-chat-p-d{background:#EAF2F9 !important}
#panel-mdh .mdh-chat-grid-row.mdh-chat-p-hs{background:#FEF3ED !important}
#panel-mdh .mdh-chat-grid-row.is-head{background:none !important}
#panel-mdh .mdh-chat-grid-row{border-radius:8px;padding:10px 12px;margin-bottom:6px}

/* Each cell shows its question (S1, 2026-09-14), so the grid takes the full measure and a
   narrower label column, and the cells of a row share one height. On phones the header goes
   and each pillar becomes a list: five columns were cut off at 400px. */
#panel-mdh .mdh-chat-grid{max-width:none}
#panel-mdh .mdh-chat-grid-row{grid-template-columns:150px repeat(5,minmax(0,1fr));align-items:stretch}
#panel-mdh .mdh-chat-grid-row .mdh-chat-rowlabel{align-self:center}
#panel-mdh .mdh-chat-grid-row .mdh-chat-chip{font-size:13px;line-height:1.35;padding:8px 10px}
@media (max-width:720px){
  #panel-mdh .mdh-chat-grid-row.is-head{display:none}
  #panel-mdh .mdh-chat-grid-row{grid-template-columns:minmax(0,1fr);gap:6px}
  #panel-mdh .mdh-chat-grid-row .mdh-chat-rowlabel{align-self:start;margin:2px 0 4px}
}


/* Patterns: the bucket key as one poster row. Five cards, each carrying its
   letter code, its name and what it answers, so the key reads at a glance
   instead of as a definition list plus a separate legend elsewhere. */
/* The standalone Bucket key is now inside this section. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .mdh-blgnd{display:none}
@media (max-width:1000px){:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-key-g{grid-template-columns:1fr 1fr}}


/* The explainer under the five cards: two columns, one for the letters and one
   for what the grid does. */
@media (max-width:900px){:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-how{grid-template-columns:1fr;gap:26px}}


/* -- Patterns: how to read this page, treatment A ------------------------- */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-an-code .p{color:var(--mdh-m)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-an-code .b{color:var(--marron)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-an-code .n{color:var(--canard)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-an-code .dot{color:var(--ink-muted)}:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-an-leg.is-p{border-color:var(--mdh-m)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-an-leg.is-b{border-color:var(--marron)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-an-leg.is-n{border-color:var(--canard)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-an-row{display:grid;grid-template-columns:1fr 1fr;gap:34px;
  padding-top:24px;border-top:1px solid rgba(69,58,76,.14)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-an-h{font-family:var(--sans);font-size:12.5px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ardoise);margin:0 0 14px}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-sw{display:grid;gap:9px}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-sw-i{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:baseline}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-sw-k{font-family:var(--display);font-size:22px;font-weight:600;line-height:1}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-sw-i.m .pat-sw-k{color:var(--mdh-m)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-sw-i.d .pat-sw-k{color:var(--mdh-d)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-sw-i.hs .pat-sw-k{color:var(--mdh-hs)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-sw-i.is-bucket .pat-sw-k{color:var(--zinzolin)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-sw-t{font-size:14.5px;line-height:1.4;color:var(--ardoise)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-sw-t span{display:block;font-size:13.5px;color:var(--ink-muted)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-an-foot{max-width:var(--measure);margin:22px auto 0;font-size:15px;
  line-height:1.6;color:rgba(69,58,76,.8)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-an-foot b{color:var(--ardoise);font-weight:600}
@media (max-width:900px){:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-an-row{grid-template-columns:1fr}}


/* The code is a precision, not the headline: inline in the closing sentence at
   text size rather than a 56px specimen above everything. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-index .mdh-page-section > .pat-nav{max-width:var(--measure);margin:0 auto 30px;
  font-size:16.5px;line-height:1.65;color:rgba(69,58,76,.82)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-code{font-family:var(--display);font-size:19px;font-weight:600;
  white-space:nowrap;padding:0 2px}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-code .p{color:var(--mdh-m)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-code .b{color:var(--zinzolin)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-code .n{color:var(--canard)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-code .p-d{color:var(--mdh-d)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-code .s{color:var(--ink-muted)}
/* In the key's sentence a code is set like the codes on the topic rows, in the text's own size, so it no
   longer opens up the line spacing of its paragraph (A36, 2026-09-14). */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-an-foot .pat-code{font-family:var(--sans);font-size:.92em;font-weight:700;
  letter-spacing:.03em;padding:0}


/* Three columns: pillars, questions, and the code built from both. The middle
   column carries five items against three, so it takes the extra width. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-an-row{grid-template-columns:.85fr 1.1fr 1.65fr;gap:38px;align-items:start}
/* Deeper dive: pillars and questions only (DD3 B, 2026-09-14). */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-an-row.is-two{grid-template-columns:.85fr 1.1fr}

/* How the grid works (DD2 A, 2026-09-14): five steps behind the i beside the grid title, each picture cut from
   the live grid and scaled to the card. A sheet from the bottom on a phone. */
#mdh-tall .mdh-page-section-title .gw-open{margin-left:8px;position:relative;top:-4px;vertical-align:middle}
#mdh-tall .gw-overlay{position:fixed;inset:0;z-index:620;background:rgba(69,58,76,.45);display:flex;
  align-items:center;justify-content:center;padding:16px}
#mdh-tall .gw-card{position:relative;width:min(640px,100%);max-height:calc(100vh - 32px);overflow:auto;background:#fff;
  border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.3);padding:20px 22px 14px;color:var(--ardoise);font-family:var(--sans)}
#mdh-tall .gw-pic{position:relative;overflow:hidden;background:var(--ground);border-radius:10px;padding:12px;margin:10px 0 14px}
#mdh-tall .gw-pic > *{transform-origin:top left}
#mdh-tall .gw-two{display:flex;gap:10px;align-items:flex-start}
#mdh-tall .gw-pic .gw-row{outline:3px solid var(--groseille);outline-offset:1px}
#mdh-tall .gw-pic .gw-col{box-shadow:0 0 0 3px var(--canard)}
#mdh-tall .gw-n{margin:0;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--groseille)}
#mdh-tall .gw-card .fh-title{margin:2px 36px 6px 0}
#mdh-tall .gw-body p{margin:0 0 8px;font-size:14.5px;line-height:1.55}
#mdh-tall .gw-body .pat-an-foot{max-width:none;margin:0;font-size:14.5px}
#mdh-tall .gw-keys{margin:6px 0 0;padding:0;list-style:none;font-size:13.5px;line-height:1.5}
#mdh-tall .gw-keys li{margin:0 0 4px}
#mdh-tall .gw-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding-top:12px;
  border-top:1px solid rgba(69,58,76,.12)}
#mdh-tall .gw-back,#mdh-tall .gw-next{border:0;background:none;padding:4px 2px;font-family:var(--sans);font-size:14px;
  font-weight:700;color:var(--canard);cursor:pointer}
#mdh-tall .gw-back:disabled{color:#CAC7C7;cursor:default}
#mdh-tall .gw-dots{display:flex;gap:7px}
#mdh-tall .gw-dot{width:9px;height:9px;border-radius:50%;border:0;padding:0;background:#D9D5D8;cursor:pointer}
#mdh-tall .gw-dot[aria-current="step"]{background:var(--groseille)}
@media (max-width:700px){
  #mdh-tall .gw-overlay{align-items:flex-end;padding:0}
  #mdh-tall .gw-card{width:100%;border-radius:16px 16px 0 0;max-height:88vh}
}

/* The open sets begin with the way back to the grid (DD5 A); on a phone they are tabs, one set shown (DD6 B). */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-cmp{scroll-margin-top:150px}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-gridsec{scroll-margin-top:110px}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-cmp > .pat-back,:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-cmp > .pat-tabs{grid-column:1/-1}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-back{justify-self:start;border:0;background:none;padding:2px 0;font-family:var(--sans);
  font-size:14px;font-weight:700;color:var(--canard);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-tabs{display:flex;gap:6px;overflow-x:auto;padding:2px 0 8px}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-tabs button{flex:none;border:0;border-radius:999px;background:#F4F2F2;padding:6px 12px;
  font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ardoise);cursor:pointer}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-tabs button[aria-selected="true"]{background:var(--ardoise);color:#fff}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-cmp.is-tabbed > .pat-bucket.is-tab-off{display:none}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-an-foot{max-width:none;margin:0;font-size:14.5px;line-height:1.6}
@media (max-width:1000px){:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-an-row{grid-template-columns:1fr;gap:26px}}


/* == The opened bucket: editorial rows =====================================
   patterns-open-draft.html treatment 3: one row per topic, the code in the left
   column and that topic's figure beside it on a pillar rule. The code is
   colour-split into pillar / question / index by patterns-index.js. Every live
   chip and card property is reset here, since copying the draft's rules alone
   leaves them underneath. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-bucket.is-open{display:block;background:none!important;
  border:none;border-radius:0;padding:26px 0 0;border-top:1px solid rgba(69,58,76,.16)}
/* The bucket head, in the Overview's shape: Groseille eyebrow, 30px serif
   title, the pillar in its own colour and the bucket in Ardoise. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-bucket.is-open .mdh-bucket-hd{display:block;background:none;
  padding:0;margin:0 0 26px;letter-spacing:normal;text-transform:none;
  font-family:var(--sans);font-size:16px;font-weight:400;color:var(--ardoise)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pb-eyebrow{display:block;font-family:var(--sans);font-size:12.5px;
  font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--groseille);margin:0 0 12px}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pb-title{display:block;font-family:var(--display);font-size:30px;
  font-weight:600;letter-spacing:-.015em;line-height:1.1}
/* The code carries the colour; the words stay Ardoise. Three colours across a
   30px serif title was shouting, and the pillar is already named in the code. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pb-p{color:var(--ardoise)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pb-x{color:var(--ink-muted);padding:0 6px}
/* The set's own code, in the same three colours as the topic codes below it. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pb-code{font-family:var(--display);font-weight:600}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pb-cp.m{color:var(--mdh-m)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pb-cp.d{color:var(--mdh-d)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pb-cp.hs{color:var(--mdh-hs)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pb-cs{color:var(--ink-muted)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pb-cb{color:var(--zinzolin)}
/* A colon after the code since 2026-09-14 (A31): the long dash here was the only one on the site. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pb-dash{color:var(--ink-muted);padding:0 12px 0 1px}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pb-b{color:var(--ardoise)}

/* == The opened bucket: contents-list rows (draft R2) ======================
   Code left, claim centre, that topic's own figure hard right on the same
   baseline. Hairlines at 10% so they organise without being seen. Nothing is
   added to or removed from what each row says; this is the same content, set
   quieter and tighter (93px a row against the previous 126). */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-bucket.is-open > .mdh-topic{width:100%;display:grid;
  grid-template-columns:100px minmax(0,1fr) 250px;column-gap:24px;row-gap:0;
  align-items:baseline;text-align:left;cursor:pointer;border:none;
  border-bottom:1px solid rgba(69,58,76,.1);background:none!important;
  box-shadow:none!important;border-radius:0!important;margin:0!important;
  padding:18px 0;transition:background .18s ease}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-bucket.is-open > .mdh-topic:last-of-type{border-bottom:none}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-bucket.is-open > .mdh-topic:hover{background:rgba(69,58,76,.03)!important}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-bucket.is-open > .mdh-topic > *{grid-column:2;min-width:0}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-bucket.is-open > .mdh-topic > .mdh-topic-id{grid-column:1}

/* The code steps back: sans, small, tracked, so the claim leads the row. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-bucket.is-open .mdh-topic-id{display:block!important;
  font-family:var(--sans)!important;font-size:12px!important;font-weight:700!important;
  letter-spacing:.06em!important;line-height:1.5!important;background:none!important;
  padding:0!important;margin:0!important;border:none!important;border-radius:0!important;
  color:var(--ink-muted)!important;white-space:nowrap}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-bucket.m  .mdh-topic-id .pc-p{color:var(--mdh-m)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-bucket.d  .mdh-topic-id .pc-p{color:var(--mdh-d)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-bucket.hs .mdh-topic-id .pc-p{color:var(--mdh-hs)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-bucket.is-open .mdh-topic-id .pc-p.is-m{color:var(--mdh-m)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-bucket.is-open .mdh-topic-id .pc-p.is-d{color:var(--mdh-d)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-bucket.is-open .mdh-topic-id .pc-b{color:var(--zinzolin)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-bucket.is-open .mdh-topic-id .pc-n{color:var(--canard)}
/* The code says M/D now, so the inline chip repeats it. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .mdh-topic-jur-purple{display:none}

/* The claim carries the row: serif, 20px, and it takes the accent on hover so
   the whole row reads as one target. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-bucket.is-open .mdh-topic-label-text{display:block!important;
  font-family:var(--display)!important;font-size:20px!important;font-weight:500!important;
  line-height:1.35!important;letter-spacing:-.01em!important;color:var(--ardoise)!important;
  background:none!important;padding:0!important;margin:0!important;
  transition:color .15s ease}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-bucket.is-open > .mdh-topic:hover .mdh-topic-label-text{
  color:var(--groseille)!important}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-bucket.is-open .mdh-topic-summary{display:block!important;
  font-family:var(--display)!important;background:none!important;
  border:none!important;border-radius:0!important;padding:0!important;margin:0!important}
/* The "+" affordance is dropped: the whole row is the target, and the lede now
   says so, so the glyph was only taking the width the claim wanted. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-bucket.is-open .mdh-topic-summary::after{content:none!important;display:none!important}

/* The figure sits hard right on the claim's baseline, its caption beneath it. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-bucket.is-open > .mdh-topic > .pat-ev{grid-column:3;
  display:block;text-align:right;align-self:baseline;max-width:250px;
  padding:0;margin:0;border:none;background:none!important;
  border-radius:0!important;box-shadow:none!important}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-bucket.is-open .mdh-bucket-feat-n{display:block!important;
  font-family:var(--display)!important;font-size:22px!important;font-weight:600!important;
  line-height:1.2!important;letter-spacing:normal!important;white-space:nowrap;
  background:none!important;padding:0!important;margin:0!important}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-bucket.m  .mdh-bucket-feat-n{color:var(--mdh-m)!important}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-bucket.d  .mdh-bucket-feat-n{color:var(--mdh-d)!important}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-bucket.hs .mdh-bucket-feat-n{color:var(--mdh-hs)!important}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-bucket.is-open .mdh-bucket-feat-t{display:block!important;
  font-family:var(--sans)!important;font-size:12px!important;font-weight:400!important;
  line-height:1.4!important;color:var(--ink-muted)!important;
  background:none!important;padding:0!important;margin:3px 0 0!important}

/* A topic with no number of its own drops the third track rather than leaving
   a hole on the right. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-bucket.is-open > .mdh-topic.pat-noev{grid-template-columns:100px minmax(0,1fr) 250px}

/* The column names, on the same tracks as the rows beneath them. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-bucket.is-open .pat-rowhead{display:grid;
  grid-template-columns:100px minmax(0,1fr) 250px;column-gap:24px;
  padding:0 0 10px;border-bottom:1px solid rgba(69,58,76,.16);margin:0 0 2px;
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-muted)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-bucket.is-open .pat-rowhead > span:last-child{text-align:right}

@media (max-width:900px){
  :is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-bucket.is-open .pat-rowhead{display:none}
  :is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-bucket.is-open > .mdh-topic,
  :is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-bucket.is-open > .mdh-topic.pat-noev{grid-template-columns:80px minmax(0,1fr)}
  :is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-bucket.is-open > .mdh-topic > .pat-ev{grid-column:2;text-align:left;
    max-width:none;margin-top:8px}
  /* Repeated with :not(.pat-compare) because the non-compare rule further down
     pins the evidence column to 380px at (1,6,0), which beat the (1,5,0) above
     and left the evidence stuck at a fixed 380px inside a column that is now the
     full width of a phone. Same declaration, matching specificity. */
  :is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on:not(.pat-compare) .pat-bucket.is-open > .mdh-topic > .pat-ev{
    max-width:none}
  :is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-bucket.is-open .mdh-bucket-feat-t{margin-top:2px!important}
}


/* The figure takes its pillar's colour. Rose, Acier and Mont Rose are 2.87,
   3.42 and 2.21 to 1, well under AA, where Groseille was 6.6: applied as asked,
   recorded here so the trade is visible. The rule beside it matches, forced,
   since the pillar-keyed rules were being outranked. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-bucket.m  .mdh-bucket-feat-n{color:var(--mdh-m)!important}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-bucket.d  .mdh-bucket-feat-n{color:var(--mdh-d)!important}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-bucket.hs .mdh-bucket-feat-n{color:var(--mdh-hs)!important}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-bucket.m  .pat-ev{border-left-color:var(--mdh-m)!important}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-bucket.d  .pat-ev{border-left-color:var(--mdh-d)!important}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-bucket.hs .pat-ev{border-left-color:var(--mdh-hs)!important}


/* The pillar header inside each block, its orange rule and its standfirst are
   dropped: the bucket head above already names the pillar and the question. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-pillar .mdh-tac-hd{display:none!important}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-pillar .mdh-tac-type,
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-pillar .mdh-tac-hl,
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-pillar .mdh-tac-sub{display:none!important}
/* .pat-pillar IS .mdh-tac, so the descendant form of this reset never matched. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-pillar{border-top:none!important;padding-top:0!important}
/* The opened set is its own band, in the page's own band system: full-bleed
   white against the grid's ground, with the content held to the same measure so
   its left edge still lines up with the grid that opened it. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-pillar.is-open{background:#fff;max-width:none;
  padding:56px var(--gutter);margin:0 calc(var(--gutter) * -1)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-pillar.is-open > *{max-width:var(--measure);margin-inline:auto}
/* One family for identifier objects: the jurisdiction tag was the only element
   on the tab pulling in a third stack. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .mdh-topic-jur{font-family:var(--sans);letter-spacing:.12em}
/* The separators between the parts of a code stay quiet. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pc-s{color:var(--ink-muted)}


/* == Topic card, draft C2: summary open, detail one row per section ========
   Every section heading is visible from the start so the list works as a
   contents page, and each row opens in place. No content is folded away that
   was not already there; only its default state changes. */
.mdh-modal-claim{margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--mdh-rule)}
.mdh-modal-claim-h{font-family:var(--display);font-size:19px;font-weight:600;
  line-height:1.35;margin:0 0 8px;color:var(--mdh-ink)}
.mdh-modal-claim-b{font-size:15px;line-height:1.65;color:rgba(69,58,76,.85)}
.mdh-modal-claim-b ul{margin:0;padding-left:20px}

.mdh-modal-deep-label{margin:24px 0 2px}
.mdh-modal-acc{border-bottom:1px solid rgba(69,58,76,.12)}
/* Explicit tracks rather than flex: a flex line sized the heading from its own
   text and pushed the chevron past the row, so every accordion scrolled
   sideways by 3px. Grid tracks cannot do that. */
.mdh-modal-acc > summary{list-style:none;cursor:pointer;display:grid;
  grid-template-columns:22px minmax(0,1fr) 18px;column-gap:12px;align-items:baseline;
  padding:13px 0;font-family:var(--display);font-size:16px;font-weight:500;
  line-height:1.35;color:var(--mdh-ink);transition:color .15s ease}
.mdh-modal-acc > summary::-webkit-details-marker{display:none}
.mdh-modal-acc > summary::marker{content:''}
.mdh-modal-acc > summary:hover,.mdh-modal-acc[open] > summary{color:var(--groseille)}
.mdh-modal-acc > summary:focus-visible{outline:3px solid var(--canard);outline-offset:2px;border-radius:4px}
.mdh-modal-acc-k{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.1em;
  color:var(--ink-muted)}
/* basis 0, not auto: with auto the heading sized itself from its own text and
   pushed the chevron 3px past the row, so every accordion scrolled sideways. */
.mdh-modal-acc-h{min-width:0;overflow-wrap:anywhere}
.mdh-modal-acc-c{min-width:0;color:var(--canard);font-size:13.5px;text-align:right;
  transition:transform .2s ease}
.mdh-modal-acc,.mdh-modal-acc-sum{min-width:0;max-width:100%}
.mdh-modal-acc > .mdh-modal-section-body{overflow-wrap:anywhere}
.mdh-modal-acc[open] .mdh-modal-acc-c{transform:rotate(90deg)}
.mdh-modal-acc > .mdh-modal-section-body{padding:0 0 16px 34px}


/* == Topic card: header, rail and step-through =============================
   The position line, the code in the same three colours the row uses, and a
   serif title. The two pills are gone: the code already said both things. */
.mdh-modal-crumb{font-family:var(--sans);font-size:12px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-muted);margin:0 0 12px}
.mdh-modal-code{font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:.06em;margin:0 0 8px}
.mdh-modal-code .pc-b{color:var(--marron)}
.mdh-modal-code .pc-n{color:var(--canard)}
.mdh-modal-code .pc-s{color:var(--ink-muted)}
.mdh-modal-code .pc-p.is-m,.mdh-modal.m .mdh-modal-code .pc-p{color:var(--mdh-m)}
.mdh-modal-code .pc-p.is-d,.mdh-modal.d .mdh-modal-code .pc-p{color:var(--mdh-d)}
.mdh-modal.hs .mdh-modal-code .pc-p{color:var(--mdh-hs)}
.mdh-modal-restyle .mdh-modal-title{font-family:var(--display);font-size:26px;
  font-weight:600;line-height:1.18;letter-spacing:-.012em;color:var(--mdh-ink)}
.mdh-modal-restyle .mdh-modal-id,.mdh-modal-restyle .mdh-modal-bucket{display:none}

/* The summary and the numbers carry no labels: they are self-evident, and the
   labels were the loudest thing on the card. */
.mdh-modal-substats{background:var(--mdh-m-wash,#FDEEF3);border-radius:10px;
  padding:18px 20px;border-top:none;margin:18px 0 0}
.mdh-modal.d .mdh-modal-substats{background:#EAF2F9}
.mdh-modal.hs .mdh-modal-substats{background:#FEF3ED}

/* Two columns once there is enough to jump between. */
.mdh-modal-split{display:grid;grid-template-columns:190px minmax(0,1fr);gap:34px;align-items:start}
.mdh-modal-rail{position:sticky;top:0}
.mdh-modal-rail-h{font-size:12px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-muted);margin:0 0 10px}
.mdh-modal-rail-a{display:block;width:100%;text-align:left;background:none;border:none;
  border-left:2px solid rgba(69,58,76,.12);padding:6px 0 6px 12px;font-family:var(--sans);
  font-size:12.5px;line-height:1.45;color:rgba(69,58,76,.75);cursor:pointer}
.mdh-modal-rail-a:hover,.mdh-modal-rail-a.is-on{color:var(--groseille);
  border-left-color:var(--groseille);font-weight:600}
.mdh-modal-rail-a:focus-visible{outline:3px solid var(--canard);outline-offset:2px}

/* Step to the topic either side, without going back to the grid. */
.mdh-modal-step{display:flex;justify-content:space-between;gap:20px;
  padding:15px 26px;border-top:1px solid var(--mdh-rule);background:var(--ground)}
.mdh-modal-step-b{display:flex;align-items:center;gap:9px;background:none;border:none;
  padding:0;cursor:pointer;font-family:var(--sans);font-size:13.5px;color:rgba(69,58,76,.75);
  text-align:left;max-width:44%}
.mdh-modal-step-b.is-next{flex-direction:row-reverse;text-align:right}
.mdh-modal-step-b:hover{color:var(--groseille)}
.mdh-modal-step-b span[aria-hidden]{color:var(--canard);font-size:16.5px}
.mdh-modal-step-b:focus-visible{outline:3px solid var(--canard);outline-offset:3px;border-radius:4px}
@media (max-width:900px){
  .mdh-modal-split{grid-template-columns:1fr}
  .mdh-modal-rail{position:static;display:none}
}



/* == Topic card = draft C2, copied ========================================
   source/docs/reference/card-collapsible-draft.html, rule for rule, scoped to
   the overlay. The old .mdh-modal-* card rules no longer apply: the markup
   uses the draft's class names. */
#mdh-modal-overlay .c2card{background:#fff;border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column;max-height:76vh;
  font-family:var(--sans);font-size:16.5px;line-height:1.6;color:var(--ardoise)}
#mdh-modal-overlay .c2card .hd{padding:22px 38px 20px;
  border-bottom:1px solid rgba(69,58,76,.14);flex:0 0 auto}
#mdh-modal-overlay .c2card .hd .top{display:flex;align-items:center;
  justify-content:space-between;gap:16px;margin:0 0 10px}
#mdh-modal-overlay .c2card .pos{font-size:12px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-muted)}
/* "1 of 6" never splits over two lines (A35, 2026-09-14). */
#mdh-modal-overlay .c2card .pos-n{white-space:nowrap}
#mdh-modal-overlay .c2card .x{background:none;border:none;font-size:22px;
  color:var(--ink-muted);cursor:pointer;line-height:1}
#mdh-modal-overlay .c2card .code{font-family:var(--sans);font-weight:700;
  letter-spacing:.06em;font-size:12px}
#mdh-modal-overlay .c2card .code .pc-b{color:var(--zinzolin)}
#mdh-modal-overlay .c2card .code .pc-n{color:var(--canard)}
#mdh-modal-overlay .c2card .code .pc-s{color:var(--ink-muted)}
#mdh-modal-overlay .c2card .code .pc-p.is-m{color:var(--mdh-m)}
#mdh-modal-overlay .c2card .code .pc-p.is-d{color:var(--mdh-d)}
#mdh-modal-overlay .c2card.m .code .pc-p{color:var(--mdh-m)}
#mdh-modal-overlay .c2card.d .code .pc-p{color:var(--mdh-d)}
#mdh-modal-overlay .c2card.hs .code .pc-p{color:var(--mdh-hs)}
#mdh-modal-overlay .c2card h3{font-family:var(--display);font-size:26px;font-weight:600;
  line-height:1.18;margin:8px 0 0;letter-spacing:-.012em;color:var(--ardoise)}
#mdh-modal-overlay .c2card .scroll{overflow-y:auto;padding:24px 38px 28px}
#mdh-modal-overlay .c2card .brief{font-size:16px;line-height:1.7;
  color:rgba(69,58,76,.85);margin:0 0 24px;max-width:70ch}
#mdh-modal-overlay .c2card .stats{display:grid;grid-template-columns:repeat(4,1fr);
  gap:18px;padding:18px 20px;margin:0 0 24px;background:#FDEEF3;border-radius:10px}
#mdh-modal-overlay .c2card.d .stats{background:#EAF2F9}
#mdh-modal-overlay .c2card.hs .stats{background:#FEF3ED}
#mdh-modal-overlay .c2card .stats .n{font-family:var(--display);font-size:22px;
  font-weight:600;line-height:1.15;color:var(--mdh-m)}
#mdh-modal-overlay .c2card.d .stats .n{color:var(--mdh-d)}
#mdh-modal-overlay .c2card.hs .stats .n{color:var(--mdh-hs)}
#mdh-modal-overlay .c2card .stats .t{font-size:12px;line-height:1.45;
  color:var(--ink-muted);margin-top:5px}
#mdh-modal-overlay .c2card .claim{font-family:var(--display);font-size:19px;
  font-weight:600;line-height:1.35;margin:0 0 6px;padding:0 0 18px;
  border-bottom:1px solid rgba(69,58,76,.14);color:var(--ardoise)}
#mdh-modal-overlay .c2card .claimbody{font-size:15px;line-height:1.65;
  color:rgba(69,58,76,.85);margin:14px 0 0}
#mdh-modal-overlay .c2card .claimbody ul{margin:0;padding-left:20px}
#mdh-modal-overlay .c2card .dive-h{font-size:12px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-muted);margin:20px 0 4px}
#mdh-modal-overlay .c2card details{border-bottom:1px solid rgba(69,58,76,.1)}
#mdh-modal-overlay .c2card summary{list-style:none;cursor:pointer;display:flex;
  align-items:baseline;gap:12px;padding:13px 0;font-weight:500;color:var(--ardoise);
  font-family:var(--display);font-size:16px;line-height:1.6}
#mdh-modal-overlay .c2card summary::-webkit-details-marker{display:none}
#mdh-modal-overlay .c2card summary::marker{content:''}
#mdh-modal-overlay .c2card summary:hover{color:var(--groseille)}
#mdh-modal-overlay .c2card details[open] summary{color:var(--groseille)}
#mdh-modal-overlay .c2card summary:focus-visible{outline:3px solid var(--canard);
  outline-offset:2px;border-radius:4px}
#mdh-modal-overlay .c2card summary .k{font-family:var(--sans);font-size:12px;
  font-weight:700;letter-spacing:.1em;color:var(--ink-muted);min-width:22px;flex:0 0 auto}
#mdh-modal-overlay .c2card summary .chev{margin-left:auto;color:var(--canard);
  font-size:14.5px;transition:transform .2s;flex:0 0 auto}
#mdh-modal-overlay .c2card details[open] summary .chev{transform:rotate(90deg)}
#mdh-modal-overlay .c2card .in{padding:0 0 16px 34px;font-size:15px;
  line-height:1.65;color:rgba(69,58,76,.85)}
#mdh-modal-overlay .c2card .in ul{margin:0;padding-left:18px}
#mdh-modal-overlay .c2card .srcline{font-size:13.5px;color:var(--ink-muted);
  margin:20px 0 0;padding-top:16px;border-top:1px solid rgba(69,58,76,.14);line-height:1.6}
#mdh-modal-overlay .c2card .srcline b{font-weight:600;color:var(--ardoise)}
#mdh-modal-overlay .c2card .foot{flex:0 0 auto;display:flex;justify-content:space-between;
  gap:20px;padding:15px 38px;border-top:1px solid rgba(69,58,76,.14);background:var(--ground)}
#mdh-modal-overlay .c2card .step{display:flex;align-items:center;gap:9px;font-size:13.5px;
  color:var(--canard);font-weight:600;cursor:pointer;background:none;border:none;
  padding:0;text-align:left;max-width:44%;font-family:var(--sans)}
#mdh-modal-overlay .c2card .step .lbl{font-weight:400;color:rgba(69,58,76,.75)}
#mdh-modal-overlay .c2card .step.next{flex-direction:row-reverse;text-align:right}
#mdh-modal-overlay .c2card .step:hover .lbl{color:var(--groseille)}
#mdh-modal-overlay .c2card .step:focus-visible{outline:3px solid var(--canard);
  outline-offset:3px;border-radius:4px}
@media (max-width:900px){
  #mdh-modal-overlay .c2card .stats{grid-template-columns:repeat(2,1fr)}
  #mdh-modal-overlay .c2card .hd,#mdh-modal-overlay .c2card .scroll,
  #mdh-modal-overlay .c2card .foot{padding-left:22px;padding-right:22px}
}
/* The draft's flex summary lets its chevron sit a hair past the row; these
   three add no visual change, they just stop the 2px sideways scroll. */
#mdh-modal-overlay .c2card details,
#mdh-modal-overlay .c2card summary{min-width:0;max-width:100%}
#mdh-modal-overlay .c2card summary{flex-wrap:nowrap;overflow-wrap:anywhere}
#mdh-modal-overlay .c2card .in{overflow-wrap:anywhere}


/* == Compare mode: one question, three pillars side by side ================
   Choosing a column lays the three open sets in three tracks and drops the
   figure column, so the topics can be read against each other. Hidden pillars
   are display:none, so they never take a track. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-compare .pat-stage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:26px;align-items:start}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-compare .pat-index{grid-column:1 / -1}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-compare .pat-pillar.is-open{min-width:0;max-width:none;margin-inline:0;
  padding:26px 22px;background:#fff;border-radius:10px}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-compare .pat-pillar.is-open > *{max-width:none}
/* Condensed rows: no figure, no column names, tighter rhythm. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-compare .pat-bucket.is-open .pat-rowhead{display:none}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-compare .pat-bucket.is-open > .mdh-topic,
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-compare .pat-bucket.is-open > .mdh-topic.pat-noev{
  grid-template-columns:minmax(0,1fr);row-gap:4px;padding:13px 0;column-gap:0}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-compare .pat-bucket.is-open > .mdh-topic > .pat-ev{display:none}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-compare .pat-bucket.is-open > .mdh-topic > *{grid-column:1}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-compare .pat-bucket.is-open .mdh-topic-id{margin:0 0 3px!important}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-compare .pat-bucket.is-open .mdh-topic-label-text{font-size:16px!important;
  line-height:1.32!important}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-compare .pat-bucket.is-open .pb-title{font-size:19px}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-compare .pat-bucket.is-open .pb-eyebrow{font-size:12px;margin-bottom:8px}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-compare .pat-bucket.is-open .mdh-bucket-hd{margin-bottom:16px}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-compare .mdh-bucket-footer{font-size:12px;line-height:1.5}
@media (max-width:1100px){
  :is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-compare .pat-stage{grid-template-columns:1fr}
  :is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-compare .pat-index{grid-column:1}
}

/* The opened set is a new section, so it announces itself with a ground change
   and a pillar-coloured rule, not a hairline you have to look for. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-pillar.is-open{border-top:4px solid var(--perle)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-pillar.is-open.m{border-top-color:var(--mdh-m)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-pillar.is-open.d{border-top-color:var(--mdh-d)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-pillar.is-open.hs{border-top-color:var(--mdh-hs)}
/* Compare mode: the three sets sit as white cards on the ground wash, so the
   whole strip reads as one new section and each pillar as one column in it. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-compare .pat-stage{background:var(--ground);
  padding:40px var(--gutter);margin:0 calc(var(--gutter) * -1)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-compare .pat-pillar.is-open{border-top-width:4px;box-shadow:0 1px 3px rgba(69,58,76,.06)}

/* Two corrections to compare mode.
   1. The misinformation block carries .mdh-tac-full, whose full-bleed width and
      negative margins overrode its grid track, so it spanned all three and only
      two columns were visible.
   2. The section rule needs !important: an earlier reset zeroes border-top on
      .pat-pillar with !important, which was silently eating it. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-compare .pat-stage > .pat-pillar.is-open{width:auto!important;
  max-width:none!important;margin-inline:0!important;padding-left:22px!important;
  padding-right:22px!important}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-pillar.is-open{border-top:4px solid var(--perle)!important}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-pillar.is-open.m{border-top-color:var(--mdh-m)!important}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-pillar.is-open.d{border-top-color:var(--mdh-d)!important}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-pillar.is-open.hs{border-top-color:var(--mdh-hs)!important}
/* It was grid-column, not width: .mdh-tac-full spans 1/-1, which in the compare
   grid meant the misinformation block took all three tracks and the other two
   were pushed onto a second row, so only two columns ever showed. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-compare .pat-stage > .pat-pillar.is-open{grid-column:auto!important}

/* The normal rows take compare mode's rhythm: it reads better and fits far more
   on screen. The figure column stays, it just stops setting the row height. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on:not(.pat-compare) .pat-bucket.is-open > .mdh-topic,
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on:not(.pat-compare) .pat-bucket.is-open > .mdh-topic.pat-noev{
  padding:13px 0;column-gap:20px}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on:not(.pat-compare) .pat-bucket.is-open .mdh-topic-label-text{
  font-size:16.5px!important;line-height:1.32!important}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on:not(.pat-compare) .pat-bucket.is-open .mdh-bucket-feat-n{
  font-size:19px!important;line-height:1.2!important}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on:not(.pat-compare) .pat-bucket.is-open .mdh-bucket-feat-t{
  font-size:12px!important;line-height:1.4!important;margin-top:2px!important}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on:not(.pat-compare) .pat-bucket.is-open .pat-rowhead{padding-bottom:8px}

/* No coloured top rule, no rounded card, no shadow. The pillar is already named
   and coloured by the code in each set's title (M.R, D.R, H.R), so repeating it
   as a bar on a floating card was decoration doing nothing. Columns are divided
   the way the rest of this page divides things: a hairline. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-pillar.is-open{border-top:none!important}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-compare .pat-stage{background:#fff;padding:44px var(--gutter) 40px}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-compare .pat-stage > .pat-pillar.is-open{background:none;border-radius:0;
  box-shadow:none;padding:0 26px!important;border-left:1px solid rgba(69,58,76,.14)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-compare .pat-stage > .pat-pillar.is-open:first-of-type{
  border-left:none;padding-left:0!important}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-compare .pat-stage > .pat-pillar.is-open:last-of-type{padding-right:0!important}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-compare .pat-stage{column-gap:0}
/* :first-of-type counted a hidden sibling ahead of the first column, so it kept
   a divider it should not have. The adjacent-sibling form only ever paints
   between two visible columns. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-compare .pat-stage > .pat-pillar.is-open{border-left:none;
  padding-left:0!important;padding-right:26px!important}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-compare .pat-stage > .pat-pillar.is-open + .pat-pillar.is-open{
  border-left:1px solid rgba(69,58,76,.14);padding-left:26px!important}


/* == Compare: any two to five sets, side by side ==========================
   The open sets are moved into one row, so a question column, a pillar row and
   a hand-picked handful all lay out the same way. The card is back, without the
   coloured bar on top. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-cmp{display:grid;gap:8px;align-items:start;
  background:var(--ground);padding:40px var(--gutter);margin:0 calc(var(--gutter) * -1)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-cmp > .pat-bucket.is-open{display:block;background:#fff;border-radius:10px;
  padding:24px 22px!important;margin:0!important;border:none;border-top:none;
  min-width:0;max-width:none;box-shadow:0 1px 3px rgba(69,58,76,.06)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-compare .pat-stage{display:block;background:none;padding:0;margin:0}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-compare .pat-pillar{display:none!important}
/* Condensed inside a column: no figure, no column names. Only a real comparison: one borrowed
   set (.pat-cmp-single, Deeper dive) keeps the normal open-set layout with its figures. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-cmp:not(.pat-cmp-single) .pat-rowhead{display:none}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-cmp:not(.pat-cmp-single) .pat-bucket.is-open > .mdh-topic,
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-cmp:not(.pat-cmp-single) .pat-bucket.is-open > .mdh-topic.pat-noev{
  grid-template-columns:minmax(0,1fr)!important;column-gap:0;row-gap:4px;padding:12px 0}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-cmp:not(.pat-cmp-single) .pat-bucket.is-open > .mdh-topic > .pat-ev{display:none}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-cmp:not(.pat-cmp-single) .pat-bucket.is-open > .mdh-topic > *{grid-column:1}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-cmp:not(.pat-cmp-single) .mdh-topic-id{margin:0 0 3px!important}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-cmp:not(.pat-cmp-single) .mdh-topic-label-text{font-size:16px!important;line-height:1.32!important}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-cmp:not(.pat-cmp-single) .pb-title{font-size:19px}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-cmp:not(.pat-cmp-single) .pb-eyebrow{font-size:11px;margin-bottom:8px}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-cmp:not(.pat-cmp-single) .mdh-bucket-hd{margin-bottom:14px}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-cmp:not(.pat-cmp-single) .mdh-bucket-footer{font-size:12px;line-height:1.5}
@media (max-width:1100px){:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-cmp{grid-template-columns:1fr!important}}


/* The compare card needs !important: the editorial-row block sets
   background:none!important on every open set, which was eating the white. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-cmp > .pat-bucket.is-open{background:#fff!important;border-radius:10px!important;
  box-shadow:0 1px 3px rgba(69,58,76,.06)!important;border:none!important}
/* The caveat is one statement about the whole comparison, so it is said once
   underneath it rather than repeated at the foot of every column. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-cmp:not(.pat-cmp-single) .mdh-bucket-footer{display:none}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-cmp-note{grid-column:1 / -1;margin:22px 0 0;padding-top:16px;
  border-top:1px solid rgba(69,58,76,.16);font-size:12.5px;line-height:1.55;
  color:var(--ink-muted);font-style:italic}


/* Related topics: named, and each one opens that card. */
#mdh-modal-overlay .c2card .relline{font-size:13.5px;color:var(--ink-muted);
  margin:12px 0 0;line-height:1.6}
#mdh-modal-overlay .c2card .relline b{font-weight:600;color:var(--ardoise);margin-right:10px}
#mdh-modal-overlay .c2card .rel{background:none;border:none;padding:0;margin-right:14px;
  font-family:var(--sans);font-size:13.5px;color:var(--canard);cursor:pointer;
  border-bottom:1px solid rgba(0,116,128,.35);line-height:1.5}
#mdh-modal-overlay .c2card .rel:hover{color:var(--groseille);border-bottom-color:var(--groseille)}
#mdh-modal-overlay .c2card .rel:focus-visible{outline:3px solid var(--canard);outline-offset:2px}
/* One rule between More Details and the first row, not two: the label carried a
   border of its own on top of the first disclosure's. */
#mdh-modal-overlay .c2card .dive-h{border:none;padding:0}
#mdh-modal-overlay .c2card details:first-of-type{border-top:none}
#mdh-modal-overlay .c2card .in > ul:first-child,
#mdh-modal-overlay .c2card .in > :first-child{margin-top:0}

/* A single set has room to spare, so the figure column takes it: a caption that
   fits on one or two lines stops setting the row height, and the gaps between
   topics close up. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on:not(.pat-compare) .pat-bucket.is-open > .mdh-topic,
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on:not(.pat-compare) .pat-bucket.is-open > .mdh-topic.pat-noev,
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on:not(.pat-compare) .pat-bucket.is-open .pat-rowhead{
  grid-template-columns:88px minmax(0,1fr) 380px;column-gap:22px}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on:not(.pat-compare) .pat-bucket.is-open > .mdh-topic > .pat-ev{max-width:380px}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on:not(.pat-compare) .pat-bucket.is-open .mdh-bucket-feat-t{
  font-size:12px!important;line-height:1.35!important}

/* A topic with no figure of its own drops the third track for real. Two earlier
   attempts at this declared the same three tracks as the base rule, so the
   380px stayed reserved and empty. Invisible on Patterns, where 6 of 88 topics
   are affected; it would be 26 of 91 on the AI tab. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on:not(.pat-compare) .pat-bucket.is-open > .mdh-topic.pat-noev{
  grid-template-columns:88px minmax(0,1fr)!important}


/* ══ The same treatment on AI x MDH and Switzerland x MDH ═════════════════
   Everything above is now scoped to the three panels rather than to Patterns
   alone. What follows is only what the two new tabs need and Patterns has no
   use for: the tab marker in the codes, the bucket intro, and the one Swiss
   cell that has an explanation but no topics. */

/* The tab prefix names the page, not the pillar, so it stays in the muted grey
   rather than taking a pillar colour: P in P.M.W.1, AI in AI.D.Y.7, S in
   S.D.W.1. All three tabs emit one now, Patterns included. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-bucket.is-open .mdh-topic-id .pc-a{color:var(--ink-muted)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pb-ca{color:var(--ink-muted)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-code .a{color:var(--ink-muted)}
/* The topic card copies the row's code markup verbatim, so the prefix arrives
   there too and needs the same grey; without this it inherited full Ardoise and
   the tab letters were the loudest part of the code. */
#mdh-modal-overlay .c2card .code .pc-a{color:var(--ink-muted)}

/* The bucket intro is a cross-tab pointer. All 15 AI buckets and all 15 Swiss
   buckets open with one, sending the reader to the Patterns set the same
   question answers globally before the qualifying evidence starts; Patterns
   buckets carry none.

   Set as a standfirst it read as throat-clearing: Ardoise at .72 on white is
   4.69:1, quieter than the rows under it, so the one instruction on the page
   that leaves the page was the least visible thing on it. It is a signpost, so
   it is built like one: the Ground wash lifts it off the white band, the Canard
   rule on the leading edge marks it as a direction rather than a finding.

   THIS IS NOT A CARD, and it used to be drawn as one: a Ground fill, a Perle
   border, an 8px radius and a 4px Canard stripe down the leading edge. The old
   note here argued the asymmetric stripe was deliberate because "it is an
   arrow". That was the tell. A signpost sentence is not a finding and should
   not wear the same furniture as one, and the site has a card language already
   (white, 10-12px radius, even border) that this matched none of, so it read as
   a fourth kind of box on a page that has enough.

   So: no fill, no border, no radius, and the arrow is now literally an arrow.
   The sentence sits as prose in the flow, one glyph marking it as a pointer. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-bucket.is-open > .mdh-bucket-intro{
  display:block;position:relative;font-size:15px;font-style:normal;line-height:1.6;
  color:var(--ink-muted);max-width:none;margin:2px 0 24px;padding:0 0 0 23px;
  background:none;border:0;border-radius:0}
/* The base rule draws a 2px stripe here as an absolutely positioned block. It is
   reset to a glyph rather than hidden, so the marker survives in one place
   instead of being removed and re-added somewhere else. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-bucket.is-open > .mdh-bucket-intro::before{
  display:block;content:"\2192";position:absolute;left:0;top:0;bottom:auto;
  width:auto;height:auto;background:none;border-radius:0;
  color:var(--ink-muted);font-size:15px;line-height:1.6;font-style:normal}
/* The set being pointed at takes the weight, so the sentence says where to go
   before it is read. Not Canard: nothing here is clickable, and the site uses
   Canard for things that are. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-bucket.is-open > .mdh-bucket-intro em{
  font-style:italic;font-weight:600;color:var(--ardoise)}

/* Side by side the intros are the tallest thing in each column, so the signpost
   keeps its wash and its rule at column width on a tighter box: 12.5px, less
   padding.

   The 3-line clamp that used to do this job is gone. It never clamped: this
   Chrome blockifies display:-webkit-box to flow-root once line-clamp is set, so
   the rule degraded to a bare overflow:hidden and cut the fourth line in half
   inside the bottom padding. What it was cutting on Switzerland x
   Misinformation x Who is behind it was the clause naming where the Swiss
   producer evidence actually lives, which is the only content that cell has.
   Four lines of 12.5px is ~19px more than the clipped box was: cheap. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-cmp:not(.pat-cmp-single) .pat-bucket.is-open > .mdh-bucket-intro{
  font-size:12.5px;line-height:1.5;margin:0 0 16px;max-width:none;
  padding:0 0 0 20px}
/* The arrow keeps the room the sentence leaves it and the size of the sentence's first line. The box padding
   this used to set put the text back over the arrow. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-cmp:not(.pat-cmp-single) .pat-bucket.is-open > .mdh-bucket-intro::before{
  font-size:12.5px;line-height:1.5}

/* Switzerland x Misinformation x Who is behind it has no topics and an intro
   saying why: no Swiss evidence on who spreads misinformation, and the Swiss
   producer evidence sits under Disinformation. Rendered as the inert square a
   zero cell gets, that sentence would be unreachable, so the cell keeps its
   button and opens its pointer. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-c.is-empty.is-pointer{cursor:pointer}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-c.is-empty b{color:var(--ink-muted)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-c.is-empty .pat-mx-n{color:var(--ink-muted)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-bucket.is-open > .mdh-bucket-placeholder{
  display:block;font-size:14.5px;font-style:italic;color:var(--ink-muted);
  padding:14px 0 0;border-top:1px solid rgba(69,58,76,.14);max-width:none}

/* The widened figure column was declared unmediated, so it outranked the 900px
   stack and the claim column resolved to 0px on a phone: every finding wrapped
   one word per line. This has to come last to win. */
@media (max-width:900px){
  :is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on:not(.pat-compare) .pat-bucket.is-open > .mdh-topic,
  :is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on:not(.pat-compare) .pat-bucket.is-open > .mdh-topic.pat-noev,
  :is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on:not(.pat-compare) .pat-bucket.is-open .pat-rowhead{
    grid-template-columns:72px minmax(0,1fr)!important;column-gap:16px}
  :is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-bucket.is-open > .mdh-topic > .pat-ev{
    grid-column:2!important;max-width:none!important;text-align:left!important;margin-top:8px}
  :is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall).pat-on .pat-bucket.is-open .pat-rowhead > span:last-child{display:none}
}


/* == Cross-tab reach from the cell ========================================
   source/docs/reference/cross-tab-draft.html, Option 1. Every cell on a grid
   tab carries the other two layers' counts as chips on its lower edge, so the
   join the content asserts 30 times becomes one click from wherever you are.

   The cell stops being one control. It was a <button>, a button cannot contain
   a button, and the chips are buttons, so it is a container now with the count
   as a primary target inside it. Three things had to be rebuilt around that:
   the click target keeps the full width of the cell (the padding moved from the
   container onto its two children), the focus ring moved from the container to
   the target and turned inward so it is not clipped by the cell edge, and
   aria-pressed moved with it. Tab order inside a cell reads count, then the two
   chips, so a keyboard reader crosses the grid the way the eye does. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-c{padding:0;cursor:default}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-go,
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-void{display:block;width:100%;margin:0;
  padding:11px 10px 4px;background:none;border:none;border-radius:8px;
  font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;text-align:left}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-go{cursor:pointer}
/* Inward, because an outset ring on a target that fills the cell is cut off by
   the cell's own edge. Canard against the Ardoise selection outline, which is
   the separation the grid already draws between chosen and focused. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-go:focus-visible{outline:3px solid var(--canard);
  outline-offset:-3px}

/* The chip row is held open whether the chips are visible or not: only opacity
   changes, so hovering a cell never reflows the row it sits in. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-pulls{display:flex;gap:5px;margin:0 10px;
  padding:8px 0 9px;border-top:1px solid rgba(69,58,76,.14);opacity:1;
  transition:opacity .14s ease}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-c:hover .pat-mx-pulls,
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-c:focus-within .pat-mx-pulls,
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-c.is-sel .pat-mx-pulls{opacity:1}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-pull{display:inline-flex;align-items:center;gap:4px;
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.06em;line-height:1;
  border:1px solid rgba(69,58,76,.28);background:rgba(255,255,255,.72);
  color:rgba(69,58,76,.8);border-radius:999px;padding:5px 8px;cursor:pointer;
  white-space:nowrap;transition:background .13s ease,border-color .13s ease,color .13s ease}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-pull:hover{border-color:var(--ardoise);
  color:var(--ardoise);background:#fff}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-pull-n{font-weight:600;opacity:.72}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-pull.is-zero{opacity:.55}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-pull.is-none{opacity:.35;cursor:default}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-pull:focus-visible{outline:2px solid var(--canard);
  outline-offset:2px}
/* Each layer keeps one colour wherever it is named, chip or layer button:
   Marron for Patterns, Canard for AI, Groseille for Switzerland. Zinzolin is
   not among them; on these tabs it means "question letter" and nothing else. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-pull.patterns .pat-pull-k{color:var(--marron)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-pull.ai .pat-pull-k{color:var(--canard)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-pull.switzerland .pat-pull-k{color:var(--groseille)}
/* Deeper dive: the key to the layer codes as the grid's first row (DD1 B, 2026-09-14), over the five
   question columns, in the colours the cells use. Its own class: .pat-lay-k is the code inside a cell. On
   the one-column phone grid it runs the column, one layer per line. */
#mdh-tall .pat-mx .pat-lay-key{grid-column:2/-1;display:flex;flex-wrap:wrap;gap:4px 24px;margin:0 0 4px;
  padding:0 0 10px;border-bottom:1px solid rgba(69,58,76,.14);font-family:var(--sans);font-size:12.5px;
  line-height:1.45;color:var(--ink-body)}
@media (max-width:1000px){#mdh-tall .pat-mx .pat-lay-key{grid-column:1/-1;flex-direction:column;gap:6px}}
#mdh-tall .pat-key-i b{font-weight:700;font-size:11.5px;letter-spacing:.06em;margin-right:6px}
#mdh-tall .pat-key-i strong{font-weight:600;color:var(--ardoise)}
#mdh-tall .pat-key-i.patterns b{color:var(--marron)}
#mdh-tall .pat-key-i.ai b{color:var(--canard)}
#mdh-tall .pat-key-i.switzerland b{color:var(--groseille)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-pull.is-on{background:var(--ardoise);
  border-color:var(--ardoise);color:#fff;opacity:1}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-pull.is-on .pat-pull-k{color:#fff}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-pull.is-on .pat-pull-n{opacity:.85}

/* The cap, said before it is hit. One cell across all three layers is 3 of 5,
   so a second cell across all three needs 6 and is refused; refusing silently
   reads as a control that broke. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-cap{max-width:var(--measure);margin:16px auto 0;
  font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--ink-muted)}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-cap b{font-family:var(--display);font-size:16.5px;
  font-weight:600;color:var(--ardoise);margin-right:3px}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-cap.is-full,
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-cap.is-full b{color:var(--groseille)}


/* == All layers: one grid, three counts per cell ===========================
   cross-tab-draft.html sub-option 2C. The three grids are the same 15 cells
   three times over, so they collapse back into 15 and each cell carries three
   counts, each its own button: 45 targets in the footprint of 15.

   The column headers and the pillar names are labels here, not controls. A
   whole question across three layers is 9 columns and a whole pillar row 15,
   against a cap of 5, so rather than teach a control that always refuses the
   tab does not offer one, the same reason the chips are not drawn on the header
   and pillar buttons of the three grid tabs. */
#mdh-tall .pat-mx-lay .pat-mx-c{padding:9px 9px 8px}
#mdh-tall .pat-lays{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
#mdh-tall .pat-lay{display:block;border:none;border-radius:6px;background:rgba(255,255,255,.66);
  padding:8px 4px 7px;cursor:pointer;text-align:center;font-family:var(--sans);
  transition:background .13s ease,box-shadow .13s ease}
#mdh-tall .pat-lay:hover{background:#fff;box-shadow:inset 0 0 0 1.5px rgba(69,58,76,.4)}
#mdh-tall .pat-lay:focus-visible{outline:3px solid var(--canard);outline-offset:1px}
#mdh-tall .pat-lay-k{display:block;font-family:var(--sans);font-size:11px;font-weight:700;
  letter-spacing:.1em;line-height:1;margin:0 0 4px}
#mdh-tall .pat-lay.patterns .pat-lay-k{color:var(--marron)}
#mdh-tall .pat-lay.ai .pat-lay-k{color:var(--canard)}
#mdh-tall .pat-lay.switzerland .pat-lay-k{color:var(--groseille)}
/* The how-to names the three layers in the colours their counts carry above (decision 21d). */
#mdh-tall .pat-layline{display:block;margin:8px 0}
#mdh-tall .pat-layline-k{display:inline-block;min-width:2.4em;font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.15em}
#mdh-tall .pat-layline-k.patterns{color:var(--marron)}
#mdh-tall .pat-layline-k.ai{color:var(--canard)}
#mdh-tall .pat-layline-k.switzerland{color:var(--groseille)}
#mdh-tall .pat-lay-v{display:block;font-family:var(--display);font-size:16.5px;font-weight:600;
  line-height:1;color:var(--ardoise)}
#mdh-tall .pat-lay.is-zero .pat-lay-v{color:var(--ink-muted)}
#mdh-tall .pat-lay.is-none{opacity:.35;cursor:default;background:rgba(255,255,255,.4)}
#mdh-tall .pat-lay.is-on{background:var(--ardoise);box-shadow:none}
#mdh-tall .pat-lay.is-on .pat-lay-k,#mdh-tall .pat-lay.is-on .pat-lay-v{color:#fff}
/* The cell outline on this tab means "one of my three layers is open", so it
   has to be quieter than the single-layer grids' selection: three cells lit at
   once is the normal state here, not the exception. */
#mdh-tall .pat-mx-c.is-sel{outline:2px solid rgba(69,58,76,.5)}
#mdh-tall .pat-mx-h.is-static,#mdh-tall .pat-mx-name.is-static{cursor:default}
#mdh-tall .pat-mx-h.is-static:hover,#mdh-tall .pat-mx-name.is-static:hover{background:none}
#mdh-tall .pat-mx-h.is-static:hover .pat-mx-bn,
#mdh-tall .pat-mx-name.is-static:hover .pat-mx-pn{color:inherit}
@media (max-width:1000px){
  /* The headers become chips on the grid tabs because they are still the only
     way to pick a whole question there. Here they are labels, so they stay
     labels. */
  #mdh-tall .pat-mx-h.is-static{display:block;width:auto;border:none;padding:0;margin:14px 0 0}
}


/* The chips are the only way to discover cross-layer reach, and hiding them
   until hover put the whole feature behind a gesture nobody is told to make.
   They are always on now; hover and selection still lift them. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-pulls{opacity:1!important}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-c:hover .pat-pull,
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-c:focus-within .pat-pull{
  border-color:var(--ink-muted);background:#fff}

/* Related cards read pillar - bucket - title, the pillar in its own colour so
   a cross-pillar link is visible as one at a glance. */
#mdh-modal-overlay .c2card .rel{display:block;text-align:left;margin:0 0 6px}
#mdh-modal-overlay .c2card .rel-p{font-weight:700}
#mdh-modal-overlay .c2card .rel-p.m{color:var(--mdh-m)}
#mdh-modal-overlay .c2card .rel-p.d{color:var(--mdh-d)}
#mdh-modal-overlay .c2card .rel-p.hs{color:var(--mdh-hs)}
#mdh-modal-overlay .c2card .rel-b{color:var(--ink-muted)}
#mdh-modal-overlay .c2card .rel-s{color:var(--ink-muted);padding:0 6px}

/* The cell names its own intersection, so the code is learned from the grid
   itself rather than assembled from the two axes. */
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-code{display:block;font-family:var(--sans);
  font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--ink-muted);margin:0 0 3px}
:is(#mdh-t2,#mdh-tai,#mdh-t3,#mdh-tall) .pat-mx-c.is-sel .pat-mx-code{color:var(--groseille)}

/* References tab. Uses the page-section head recipe (groseille eyebrow, display
   title) so the bibliography reads as a section of the site rather than a list
   bolted onto the end. It sits in the page column like every other section (L1 A, 2026-09-14): it used
   to opt out and run edge to edge, which put its head 260px left of the page title at 1920px. The
   column is 1240px wide, room enough for the two-column list. */
.mdh-refs-intro{margin:10px 0 0;color:var(--mdh-ink2);font-size:15px;line-height:1.6}
.mdh-refs-note{margin-block:8px 0;font-size:13px;line-height:1.5;color:var(--ink-muted)}

/* Two columns across the band. 208 entries stacked one-per-row leaves most of the
   page empty and forces a long scroll; a bibliography is short repeated blocks, which
   is what CSS columns are for. column-fill:auto would balance the two halves but needs
   a fixed height, so the default balanced fill is left alone. */
.mdh-rt-cols{
  margin-top:26px;column-count:2;column-gap:56px;
  column-rule:1px solid var(--mdh-rule)
}
.mdh-rt-item{
  break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:10px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--mdh-rule);
  font-size:15px;line-height:1.5;color:var(--mdh-ink)
}
.mdh-rt-n{
  font-family:var(--sans);font-weight:700;color:var(--groseille);white-space:nowrap;
  font-variant-numeric:tabular-nums;font-size:13.5px
}
.mdh-rt-cite{min-width:0}
/* The search hides entries; display:grid above would otherwise override [hidden]. */
.mdh-rt-item[hidden]{display:none}
#panel-mdh .mdh-refs-tools{margin-block:22px 0}
/* The citation is the link. Underlined on the title only and in the rule colour, so a
   page of 208 entries reads as a bibliography rather than a wall of blue. */
.mdh-rt-a{color:inherit;text-decoration:underline;text-decoration-color:var(--mdh-rule);
  text-underline-offset:3px;text-decoration-thickness:1px}
.mdh-rt-a:hover{color:var(--groseille);text-decoration-color:currentColor}
.mdh-rt-a:focus-visible{outline:2px solid var(--canard);outline-offset:2px}
.mdh-rt-item:target{background:rgba(0,0,0,.05)}

/* "Used in" sits under its citation as quiet metadata. */
.mdh-rt-item .mdh-ri-used{margin-top:5px;font-size:12px;color:var(--mdh-ink2);display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center}
.mdh-rt-item .mdh-ri-used-label{font-weight:600;color:var(--ardoise)}

/* One column below the point where two would each be too narrow to set a citation. */
@media (max-width:900px){
  .mdh-rt-cols{column-count:1;column-rule:0}
}

/* ---------------------------------------------------------------------------
   Figure marks (site/js/figure-marks.js, spec in figure-forms-draft.html)

   A thin mark under a stat tile's number: a fill for a share, bars for a
   comparison, before and after for a change, dots for a small fraction. The
   parser draws only values the tile already prints, so about half the tiles
   carry no mark at all and that is correct.

   Labels are hidden inside stat tiles: the tile's own number line already
   prints every value the bars encode, so repeating them there is noise in a
   120px column. The markup keeps them for wider surfaces and for screen
   readers to skip (the mark itself is aria-hidden, the number is the text).
   --------------------------------------------------------------------------- */
.fig-mark{margin-top:7px}
.fig-fill{height:6px;border-radius:3px;background:rgba(69,58,76,.10);overflow:hidden}
.fig-fill i{display:block;height:100%;border-radius:0 3px 3px 0;background:var(--mdh-d)}
.fig-dots{display:flex;gap:3px;flex-wrap:wrap;justify-content:center}
.fig-dots i{width:7px;height:7px;border-radius:50%;background:rgba(69,58,76,.16)}
.fig-dots i.on{background:var(--mdh-d)}
.fig-paired,.fig-change{display:grid;gap:2px}
.fig-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px}
.fig-row i{display:block;height:6px;border-radius:0 3px 3px 0;background:var(--mdh-d)}
.fig-row.ghost i{background:rgba(69,58,76,.22)}
.fig-row span{font-size:11px;line-height:1.2;color:var(--ink-muted);white-space:nowrap}
.mdh-substat .fig-row span,.mdh-bucket-feat-item .fig-row span{display:none}

/* pillar colour, mirroring the .mdh-substat-n rules above */
#panel-mdh .mdh-tac.m .fig-fill i,#panel-mdh .mdh-bucket.m .fig-fill i,
#panel-mdh .mdh-tac.m .fig-row i,#panel-mdh .mdh-bucket.m .fig-row i,
#panel-mdh .mdh-tac.m .fig-dots i.on,#panel-mdh .mdh-bucket.m .fig-dots i.on{background:var(--mdh-m)}
#panel-mdh .mdh-tac.hs .fig-fill i,#panel-mdh .mdh-bucket.hs .fig-fill i,
#panel-mdh .mdh-tac.hs .fig-row i,#panel-mdh .mdh-bucket.hs .fig-row i,
#panel-mdh .mdh-tac.hs .fig-dots i.on,#panel-mdh .mdh-bucket.hs .fig-dots i.on{background:var(--mdh-hs)}
#panel-mdh .mdh-tac.ai .fig-fill i,#panel-mdh .mdh-bucket.ai .fig-fill i,
#panel-mdh .mdh-tac.ai .fig-row i,#panel-mdh .mdh-bucket.ai .fig-row i,
#panel-mdh .mdh-tac.ai .fig-dots i.on,#panel-mdh .mdh-bucket.ai .fig-dots i.on{background:var(--mdh-ai)}
#panel-mdh .mdh-tac.m .fig-row.ghost i,#panel-mdh .mdh-bucket.m .fig-row.ghost i,
#panel-mdh .mdh-tac.hs .fig-row.ghost i,#panel-mdh .mdh-bucket.hs .fig-row.ghost i,
#panel-mdh .mdh-tac.ai .fig-row.ghost i,#panel-mdh .mdh-bucket.ai .fig-row.ghost i{background:rgba(69,58,76,.22)}

/* ── Overview: Does research treat them together? ─────────────────────────────
   Two inline-SVG line charts side by side, stacked below 900px. The pillar
   colours carry the size chart; the second chart is not about pillars, so it
   uses Canard (solid) and Zinzolin (dashed), and the dash keeps the two lines
   apart for a reader who cannot tell the hues. */
#panel-mdh .rs-figs{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
@media (max-width:900px){#panel-mdh .rs-figs{grid-template-columns:1fr}}
/* Side by side, the two figures share their rows, so Chart 2's two-line title and legend no longer
   push its plot below Chart 1's (2026-09-14). */
@media (min-width:901px){
  #panel-mdh .rs-figs{grid-template-rows:auto auto auto 1fr}
  /* .rs-figs > .rs-fig, one step more specific than the base .rs-fig rule below it. */
  #panel-mdh .rs-figs > .rs-fig{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;align-content:start}
}
#panel-mdh .rs-fig{margin:0;min-width:0;display:flex;flex-direction:column;background:#fff;
  border-radius:12px;padding:22px 22px 18px}
#panel-mdh .rs-title{font-family:var(--display);font-size:20px;line-height:1.3;font-weight:600;
  color:var(--ardoise);margin:0 0 12px}
#panel-mdh .rs-eyebrow{display:block;margin:0 0 6px;font-family:var(--sans);font-size:12.5px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;line-height:1.4;color:var(--ink-muted)}
#panel-mdh .rs-legend{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;
  gap:6px 18px;font-size:13px;line-height:1.4;color:var(--ink-body)}
#panel-mdh .rs-legend li{display:flex;align-items:center;gap:8px}
#panel-mdh .rs-key{display:inline-block;flex:none;width:24px;border-top:3px solid var(--rs-c)}
#panel-mdh .rs-key.dash{border-top-style:dashed}
#panel-mdh .rs-svg{display:block;width:100%;height:auto;max-width:100%;overflow:visible}
#panel-mdh .rs-svg .rs-gl{stroke:rgba(69,58,76,.16);stroke-width:1;stroke-dasharray:2 4}
#panel-mdh .rs-svg .rs-ax{stroke:rgba(69,58,76,.4);stroke-width:1}
#panel-mdh .rs-svg .rs-tick{font-family:var(--sans);font-size:13px;fill:var(--ink-muted)}
#panel-mdh .rs-svg .rs-line{fill:none;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
#panel-mdh .rs-svg .rs-dot{stroke-width:2}
#panel-mdh .rs-svg .rs-end{font-family:var(--sans);font-size:14px;font-weight:600;fill:var(--ardoise)}
#panel-mdh .rs-caption{font-size:13.5px;line-height:1.55;color:var(--ink-body);margin:14px 0 0}
/* One card size on the Overview. Its cards had four paddings (18, 22, 24 and 26px tops) and two
   radii (10 and 12px); they take the definition cards' padding and the 12px radius (2026-09-14). */
#panel-mdh #mdh-t1 :is(.abt-card.frame,.mdh-bl,.mdh-rat-entry,.rs-fig){padding:24px 26px 26px;border-radius:12px}
/* Hover or tap a year (2026-09-14): a dashed rule at that year and a note with each line's value,
   white so the pillar keys keep their colours. */
#panel-mdh .rs-hold{position:relative}
/* The last year, still being indexed (C11 A): a light column, a dashed step, hollow points. */
#panel-mdh .rs-svg .rs-partial{fill:rgba(69,58,76,.06)}
#panel-mdh .rs-svg .rs-line-partial{stroke-dasharray:3 4}
#panel-mdh .rs-key-band{display:inline-block;flex:none;width:18px;height:12px;border-radius:2px;background:rgba(69,58,76,.12)}
#panel-mdh .rs-tip-note{display:block;margin-top:4px}
#panel-mdh .rs-svg .rs-hit{fill:transparent;cursor:crosshair}
#panel-mdh .rs-svg .rs-cross{stroke:var(--ardoise);stroke-width:1;stroke-dasharray:3 3;opacity:0;pointer-events:none}
#panel-mdh .rs-hold.is-on .rs-cross{opacity:.55}
#panel-mdh .rs-tip{position:absolute;left:0;top:0;z-index:2;pointer-events:none;opacity:0;
  width:max-content;max-width:min(300px,100%);background:#fff;border:1px solid rgba(69,58,76,.16);
  border-radius:8px;box-shadow:0 6px 18px rgba(69,58,76,.14);padding:8px 11px;
  font-family:var(--sans);font-size:13px;line-height:1.45;color:var(--ardoise);transition:opacity .12s}
#panel-mdh .rs-hold.is-on .rs-tip{opacity:1}
#panel-mdh .rs-tip-row{display:flex;align-items:baseline;gap:8px;margin-top:4px}
#panel-mdh .rs-tip-row .rs-key{width:14px;transform:translateY(-4px)}
#panel-mdh .rs-tip-dim{color:var(--ink-muted)}
@media (prefers-reduced-motion:reduce){#panel-mdh .rs-tip{transition:none}}
/* margin-inline stays auto and the width is the column's, so the note starts where the charts above it do. A
   0 in the shorthand had pulled it to the band's edge, 260px left of them at 1920px. */
#panel-mdh .rs-source{font-size:13px;line-height:1.5;color:var(--ink-muted);margin:16px auto 0;max-width:var(--measure)}
#panel-mdh .rs-more{margin-top:12px;background:#fff;
  border-radius:10px;padding:0 18px}
#panel-mdh .rs-more > summary{cursor:pointer;padding:14px 0;font-size:14px;font-weight:600;color:var(--canard)}
#panel-mdh .rs-more[open] > summary{border-bottom:1px solid rgba(69,58,76,.1)}
#panel-mdh .rs-table-wrap{overflow-x:auto;padding:12px 0 16px}
#panel-mdh .rs-table{border-collapse:collapse;width:100%;min-width:640px;font-size:13.5px;color:var(--ink-body)}
#panel-mdh .rs-table th,#panel-mdh .rs-table td{padding:7px 10px;text-align:right;
  border-bottom:1px solid rgba(69,58,76,.08);white-space:nowrap}
#panel-mdh .rs-table thead th{font-weight:600;color:var(--ardoise);vertical-align:bottom;white-space:normal;line-height:1.35}
#panel-mdh .rs-table .rs-yr{text-align:left;font-weight:600;color:var(--ardoise)}
#panel-mdh .rs-methods{padding:12px 0 16px;font-size:14px;line-height:1.6;color:var(--ink-body)}
#panel-mdh .rs-methods ul{margin:0;padding-left:18px}
#panel-mdh .rs-methods li{margin:0 0 8px}
/* rs-phone-text: the SVG scales down with the card, so on a phone its 13px labels render near 9px.
   Larger user-unit sizes bring them back to about 11 to 12px on a 400px screen. */
@media (max-width:520px){#panel-mdh .rs-svg .rs-tick{font-size:17px}#panel-mdh .rs-svg .rs-end{font-size:18px}}

/* ── References: one measure for the whole page ────────────────────────────
   Fixed 2026-09-16. `.mdh-page-section > *` holds every child to var(--measure)
   and centres it, which is what puts the heading and the reference columns on
   the same left edge. Two children escaped it: `.gloss-tools` writes a shorthand
   `margin`, which resets margin-inline to 0, and the note is a <p> that other
   rules widen. So the search row started 52px to the LEFT of the list and ended
   short of it, and the note ran wider than both: three left edges and three
   right edges on one page. Stated once here, after both. */
#panel-mdh .mdh-refs-section > .mdh-refs-tools,
#panel-mdh .mdh-refs-section > .mdh-refs-note,
#panel-mdh .mdh-refs-section > .gloss-empty{max-width:var(--measure);margin-inline:auto;width:100%;}