/* ════ <style> ════ */
    /* ── Academic reskin (2026-07): scholarly serif display + sober navy accents ── */
    :root {
      --c-cobalt-soft: #EEF1F7;   /* navy-tinted surface (was #EAF0FC) */
      --c-cobalt-line: #CCD6E6;   /* navy-tinted hairline (was #C8D8F8) */
    }
    /* Serif for display headings → gravitas; body/data stay sans/mono */
    h1, h2, .font-serif {
      font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
      letter-spacing: -0.012em;
    }
    /* Serif reads best a touch lighter than the sans extrabold */
    h1.font-extrabold, h2.font-extrabold { font-weight: 700; }

    /* ── Grain: fixed, pointer-events-none, never on scroll containers ── */
    #grain {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.70' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
    }

    /* ── Scroll reveal ── */
    .reveal {
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 0.72s cubic-bezier(0.16, 1, 0.3, 1),
                  transform 0.72s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .reveal.visible { opacity: 1; transform: translateY(0); }

    /* ── Stagger helpers ── */
    .d1 { transition-delay: 80ms; }
    .d2 { transition-delay: 160ms; }
    .d3 { transition-delay: 240ms; }
    .d4 { transition-delay: 320ms; }
    .d5 { transition-delay: 400ms; }
    .d6 { transition-delay: 480ms; }
    .d7 { transition-delay: 560ms; }
    .d8 { transition-delay: 640ms; }

    /* ── Chart draw ── */
    .draw {
      stroke-dasharray: 600;
      stroke-dashoffset: 600;
      animation: drawPath 2.4s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
    }
    @keyframes drawPath {
      to { stroke-dashoffset: 0; }
    }

    /* ── Nav link underline ── */
    .nl { position: relative; }
    .nl::after {
      content: '';
      position: absolute;
      bottom: -2px; left: 0;
      width: 0; height: 1px;
      background: #1E2C48;
      transition: width 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .nl:hover::after { width: 100%; }

    /* ── Card hover ── */
    .card {
      transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1),
                  box-shadow 0.38s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .card:hover {
      transform: translateY(-3px);
      box-shadow: 0 20px 48px -12px rgba(0,0,0,0.07);
    }

    /* ── Selection ── */
    ::selection { background: #C8D8F8; color: #1E2C48; }

    /* ── Scrollbar ── */
    ::-webkit-scrollbar { width: 4px; }
    ::-webkit-scrollbar-track { background: #FAFAF8; }
    ::-webkit-scrollbar-thumb { background: #D4D2CC; border-radius: 4px; }

    /* ── Mobile menu overlay ── */
    #mobile-menu {
      display: none; position: fixed; inset: 0; z-index: 45;
      background: rgba(17,17,16,0.96); backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      flex-direction: column; align-items: center; justify-content: center; gap: 2rem;
    }
    #mobile-menu.open { display: flex; }
    .ham-line { display: block; width: 16px; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform 0.22s cubic-bezier(0.16,1,0.3,1), opacity 0.22s; }
    #ham-btn.is-open .ham-line:nth-child(1) { transform: translateY(5px) rotate(45deg); }
    #ham-btn.is-open .ham-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
    #ham-btn.is-open .ham-line:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

    /* ── Loading skeleton ── */
    @keyframes shimmer { 0%{background-position:-400px 0} 100%{background-position:400px 0} }
    .skel {
      display: inline-block;
      background: linear-gradient(90deg,rgba(0,0,0,.05) 25%,rgba(0,0,0,.10) 50%,rgba(0,0,0,.05) 75%);
      background-size: 400px 100%; animation: shimmer 1.4s ease-in-out infinite;
      border-radius: 6px; color: transparent !important; user-select: none; min-width: 4ch;
    }
    .skel-dark {
      background: linear-gradient(90deg,rgba(255,255,255,.07) 25%,rgba(255,255,255,.13) 50%,rgba(255,255,255,.07) 75%);
      background-size: 400px 100%; animation: shimmer 1.4s ease-in-out infinite;
      border-radius: 6px; color: transparent !important;
    }

    /* ── Error banner ── */
    #error-banner {
      display: none; position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
      z-index: 200; background: #1E2C48; color: white; font-size: 12px;
      padding: 10px 18px; border-radius: 99px; gap: 12px; align-items: center;
      box-shadow: 0 8px 32px -8px rgba(0,0,0,.4);
    }
    #error-banner.show { display: flex; }

    /* ── CSS palette variables ── */
    :root {
      --c-canvas: #FAFAF8; --c-ink: #1E2C48; --c-secondary: #6B6A67;
      /* Channel triplets so Tailwind can build alpha variants (text-secondary/55,
         bg-ink/[0.06]…). It cannot split a var() colour, so those utilities were
         silently absent from the compiled CSS until 2026-09-06. */
      --c-ink-rgb: 30 44 72; --c-secondary-rgb: 107 106 103;
      --c-cobalt-soft: #EAF0FC; --c-cobalt-line: #C8D8F8;
    }
    .dark {
      --c-canvas: #0F0F0E; --c-ink: #EDECE8; --c-secondary: #9B9A97;
      --c-ink-rgb: 237 236 232; --c-secondary-rgb: 155 154 151;
      --c-cobalt-soft: rgba(26,58,107,0.14); --c-cobalt-line: rgba(26,58,107,0.28);
    }
    /* ── Dark mode overrides ── */
    .dark body { background-color: #0F0F0E; }
    /* bg-white cards → elevated dark surface */
    .dark .bg-white  { background-color: #1C1C1A !important; }
    .dark .bg-white\/50 { background-color: rgba(28,28,26,0.5) !important; }
    /* bg-ink uses var(--c-ink) which flips to cream — keep it dark and fix text */
    .dark .bg-ink { background-color: #171716 !important; }
    /* inside bg-ink: labels that used text-secondary on white now need lighter treatment */
    .dark .bg-ink .text-secondary\/55,
    .dark .bg-ink .text-secondary\/50,
    .dark .bg-ink .text-secondary\/45,
    .dark .bg-ink .text-secondary\/40 { color: rgba(155,154,151,0.88) !important; }
    /* bg-white cards in dark mode: subtle label boost so they're not too faint */
    .dark .bg-white .text-secondary\/55 { color: rgba(175,174,170,0.84) !important; }
    .dark .bg-white .text-secondary\/50 { color: rgba(175,174,170,0.82) !important; }
    .dark .bg-white .text-secondary\/45 { color: rgba(175,174,170,0.78) !important; }
    .dark .bg-white .text-secondary\/40 { color: rgba(175,174,170,0.76) !important; }
    /* cobalt badge bg: already uses CSS var, works fine */
    .dark nav { background-color: rgba(20,20,19,0.92) !important; border-color: rgba(255,255,255,0.08) !important; }
    .dark .nl::after { background: #EDECE8; }
    .dark [class*="border-ink"], .dark [class*="border-black"] { border-color: rgba(255,255,255,0.07) !important; }
    .dark [class*="divide-black"] > * + * { border-color: rgba(255,255,255,0.06) !important; }
    .dark ::-webkit-scrollbar-track { background: #0F0F0E; }
    .dark ::-webkit-scrollbar-thumb { background: #3A3A38; }
    .dark #grain { opacity: 0.02; }

    /* ── Chat widget ── */
    #chat-panel {
      transform: translateY(12px) scale(0.97);
      opacity: 0;
      pointer-events: none;
      transition: transform 0.28s cubic-bezier(0.16,1,0.3,1),
                  opacity 0.22s ease;
    }
    #chat-panel.chat-open {
      transform: translateY(0) scale(1);
      opacity: 1;
      pointer-events: auto;
    }
    #chat-messages { scroll-behavior: smooth; }
    .chat-bubble-ai {
      background: #F3F4F6;
      color: #1E2C48;
      border-radius: 4px 18px 18px 18px;
    }
    .chat-bubble-user {
      background: #1A3A6B;
      color: #fff;
      border-radius: 18px 18px 4px 18px;
      margin-left: auto;
    }
    .dark #chat-panel { background-color: #1C1C1A; border-color: rgba(255,255,255,0.07); }
    .dark .chat-bubble-ai { background: #2A2A28; color: #EDECE8; }
    @keyframes typingDot {
      0%,60%,100% { opacity: 0.2; transform: translateY(0); }
      30% { opacity: 1; transform: translateY(-3px); }
    }
    .typing-dot { animation: typingDot 1.2s ease-in-out infinite; }
    .typing-dot:nth-child(2) { animation-delay: 0.2s; }
    .typing-dot:nth-child(3) { animation-delay: 0.4s; }
  

/* ════ <style id="paper-reskin"> ════ */
    /* ── Paper reskin (2026-08): warm editorial cream + slate ink + gold/coral/teal accents.
       Inspired by print data-journalism; light mode only — .dark palette untouched. ── */
    html:not(.dark) {
      --c-canvas: #F9F3E7;
      --c-ink: #1E2C48;
      --c-secondary: #647082;
      --c-ink-rgb: 30 44 72;
      --c-secondary-rgb: 100 112 130;
      --c-cobalt-soft: #E8EAF1;
      --c-cobalt-line: #CBD3E2;
    }
    html:not(.dark) body { background-color: #F9F3E7; }
    html:not(.dark) .bg-white { background-color: #FEFCF6 !important; }
    html:not(.dark) .bg-white\/88 { background-color: rgba(254,252,246,0.90) !important; }
    html:not(.dark) .bg-white\/50 { background-color: rgba(254,252,246,0.55) !important; }
    html:not(.dark) [class*="border-ink"], html:not(.dark) [class*="border-black"] { border-color: rgba(30,44,72,0.11) !important; }
    html:not(.dark) [class*="divide-black"] > * + * { border-color: rgba(30,44,72,0.09) !important; }

    /* Section kickers: gold editorial labels */
    html:not(.dark) .uppercase.bg-cobalt-soft.rounded-full {
      background-color: #F6E9CB !important;
      border-color: #E1CB9C !important;
      color: #7D5D1B !important;
    }

    /* Semantic accents: neon → editorial coral / teal / gold */
    html:not(.dark) .text-rose-500   { color: #C24A36 !important; }
    html:not(.dark) .text-rose-300   { color: #E89B88 !important; }
    html:not(.dark) .bg-rose-50      { background-color: #F8E7E0 !important; }
    html:not(.dark) .border-rose-200 { border-color: #E7C3B6 !important; }
    html:not(.dark) .text-emerald-600   { color: #1F6F55 !important; }
    html:not(.dark) .text-emerald-300   { color: #86C7AC !important; }
    html:not(.dark) .bg-emerald-50      { background-color: #E6EFE7 !important; }
    html:not(.dark) .border-emerald-200 { border-color: #C2DACB !important; }
    html:not(.dark) .text-amber-500   { color: #A8791F !important; }
    html:not(.dark) .text-amber-300   { color: #E3C27D !important; }
    html:not(.dark) .bg-amber-50      { background-color: #F6ECD5 !important; }
    html:not(.dark) .border-amber-200 { border-color: #E3CFA3 !important; }

    /* Chrome details on paper */
    html:not(.dark) ::selection { background: #EFDFBB; color: #1E2C48; }
    html:not(.dark) ::-webkit-scrollbar-track { background: #F9F3E7; }
    html:not(.dark) ::-webkit-scrollbar-thumb { background: #D8CBB2; }
    html:not(.dark) .card:hover { box-shadow: 0 20px 48px -12px rgba(30,44,72,0.10); }
    html:not(.dark) .nl::after { background: #1E2C48; }
    html:not(.dark) .chat-bubble-ai { background: #F2ECDD; color: #1E2C48; }
  

/* ════ <style id="apple-type"> ════ */
    /* ── Apple-style text logic (2026-08): SF/Inter, bold tight headlines, calm body ── */
    :root { --font-apple: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
    body, .font-sans { font-family: var(--font-apple); }
    h1, h2, h3, h4, h5, .font-serif {
      font-family: var(--font-apple) !important;
      font-feature-settings: "cv05", "cv11";
    }
    h1, h1.font-extrabold { font-weight: 700; letter-spacing: -0.030em; line-height: 1.05; }
    h2, h2.font-extrabold { font-weight: 700; letter-spacing: -0.022em; line-height: 1.08; }
    h3, h4 { font-weight: 600; letter-spacing: -0.012em; }
    p { line-height: 1.5; }
    .font-bold { font-weight: 600; }
    .font-extrabold { font-weight: 700; }
    a.bg-ink, button.bg-ink, a.bg-cobalt, button.bg-cobalt { font-weight: 600; letter-spacing: -0.005em; }
    .tracking-tight { letter-spacing: -0.018em; }
  

/* ════ <style id="editorial-edition"> ════ */
    /* ── Editorial edition (2026-08): print-newspaper geometry — masthead, rules,
       sharp corners, overline kickers. Differentiates from generic soft-card templates. ── */

    /* Masthead: flat full-width bar with brand-navy top rule, replaces floating pill */
    header.fixed { top: 0 !important; left: 0 !important; right: 0 !important; padding: 0 !important; }
    header.fixed nav {
      width: 100% !important; max-width: 100% !important;
      border-radius: 0 !important;
      border: 0 !important;
      border-top: 3px solid #1A3A6B !important;
      border-bottom: 1px solid rgba(30,44,72,0.16) !important;
      box-shadow: none !important;
      padding: 0.85rem clamp(1.25rem, 4vw, 3rem) !important;
      background: rgba(249,243,231,0.94) !important;
    }
    .dark header.fixed nav { background: rgba(20,20,19,0.94) !important; border-top-color: #4A6FA5 !important; }

    /* Print geometry: sharp corners everywhere that isn't a genuine dot */
    [class*="rounded-2xl"], [class*="rounded-3xl"], [class*="rounded-xl"],
    [class*="rounded-lg"], [class*="rounded-[0.75rem]"], [class*="rounded-[1"] { border-radius: 2px !important; }
    a[class*="rounded-full"], button[class*="rounded-full"] { border-radius: 3px !important; }

    /* Kickers: pill chips → editorial overline labels with a gold rule */
    .uppercase.bg-cobalt-soft.rounded-full {
      background: transparent !important;
      border: 0 !important;
      border-top: 2px solid #C99B3F !important;
      border-radius: 0 !important;
      padding: 0.55rem 0 0 0 !important;
      color: #1A3A6B !important;
      letter-spacing: 0.17em !important;
    }
    .dark .uppercase.bg-cobalt-soft.rounded-full { color: #B7C6DE !important; border-top-color: #C99B3F !important; }

    /* Cards: flat sheets, no hover-lift theatrics, slightly firmer hairlines */
    .card:hover { transform: none !important; box-shadow: none !important; }
    html:not(.dark) .card:hover { border-color: rgba(30,44,72,0.28) !important; }

    /* Tables: dotted agate rules like newsprint listings */
    [class*="divide-black"] > * + * { border-top-style: dotted !important; }

    /* Headlines: a notch tighter and larger contrast, page feels typeset */
    h2 { letter-spacing: -0.026em; }
  
    /* Economist-style chart frames: white chart cards dissolve into the paper —
       a rule + slug + source line remain. Navy panels keep their boxes. */
    html:not(.dark) .bg-white.card:has(svg[data-spark*='"k":"std"']),
    html:not(.dark) .bg-white:has(svg[data-spark*='"k":"dual"']),
    html:not(.dark) .bg-white:has(svg[data-spark*='"k":"axis"']) {
      background: transparent !important;
      border: 0 !important;
      border-top: 2px solid rgba(30,44,72,0.45) !important;
      border-radius: 0 !important;
      box-shadow: none !important;
    }

    /* Front-page dateline */
    #dateline {
      margin: 78px auto 0;
      max-width: 80rem;
      padding: 12px clamp(1.25rem, 4vw, 3rem) 10px;
      display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
      font-size: 10.5px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
      color: rgba(30,44,72,0.7);
      border-bottom: 3px double rgba(30,44,72,0.35);
    }
    #dateline .dl-brand b { color: #1A3A6B; }
    .dark #dateline { color: rgba(237,236,232,0.55); border-bottom-color: rgba(255,255,255,0.25); }
    .dark #dateline .dl-brand b { color: #B7C6DE; }
    @media (max-width: 640px) { #dateline { flex-direction: column; gap: 2px; } }

    #spark-tip {
      position: fixed; z-index: 300; pointer-events: none; opacity: 0;
      transition: opacity 0.12s ease;
      font-family: "DM Mono", monospace; font-size: 10.5px; letter-spacing: 0.02em;
      background: #FEFCF6; color: #1E2C48;
      border: 1px solid rgba(30,44,72,0.35); border-radius: 2px;
      padding: 3px 8px; box-shadow: 0 4px 14px -4px rgba(30,44,72,0.25);
      white-space: nowrap;
    }
    .dark #spark-tip { background: #1C1C1A; color: #EDECE8; border-color: rgba(255,255,255,0.25); }

    /* Unified charts: every non-mini line chart spans the full row at a uniform height */
    [class*="grid"] > *:has(svg[data-spark*='"k":"std"']),
    [class*="grid"] > *:has(svg[data-spark*='"k":"dual"']),
    [class*="grid"] > *:has(svg[data-spark*='"k":"axis"']) { grid-column: 1 / -1; }
    div:has(> svg[data-spark*='"k":"std"']), div:has(> svg[data-spark*='"k":"dual"']) { height: 88px !important; width: 100% !important; }
    div:has(> svg[data-spark*='"k":"axis"']) { height: 170px !important; width: 100% !important; }

/* ════ <style id="motion"> ════ */
  /* ── Motion layer (2026-09) ──────────────────────────────────────────────
     Restrained, purposeful movement only: it marks the latest reading, draws a
     series once on arrival, and flags a number that just changed. Everything
     here is switched off wholesale under prefers-reduced-motion. */

  /* Halo behind the most recent point — a slow breath, not a strobe.
     scale() rather than animating r: the geometry properties are patchier
     across engines, and the sparks' viewBox is 1:1 with pixels so it is exact. */
  .spark-pulse {
    transform-box: fill-box;
    transform-origin: center;
    animation: sparkPulse 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  }
  @keyframes sparkPulse {
    0%   { transform: scale(0.55); opacity: 0.30; }
    70%  { transform: scale(1.45); opacity: 0;    }
    100% { transform: scale(1.45); opacity: 0;    }
  }

  /* Series draw-on. pathLength="1" normalises the dash units, so one rule
     works for a 13-point chart and a 262-point one alike. */
  .spark-draw {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: sparkDraw 1.15s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  @keyframes sparkDraw { to { stroke-dashoffset: 0; } }

  /* Area fill, end dot and value label follow the line in rather than
     appearing under a half-drawn curve. */
  .spark-fade { opacity: 0; animation: sparkFade 0.5s ease-out 0.75s forwards; }
  @keyframes sparkFade { to { opacity: 1; } }

  /* A figure that just changed gets one quiet lift; direction tints it. */
  .val-flash { animation: valFlash 0.85s cubic-bezier(0.16, 1, 0.3, 1); }
  .val-up    { animation: valFlashUp 0.85s cubic-bezier(0.16, 1, 0.3, 1); }
  .val-down  { animation: valFlashDown 0.85s cubic-bezier(0.16, 1, 0.3, 1); }
  @keyframes valFlash {
    0%   { transform: translateY(0.14em); opacity: 0.35; }
    100% { transform: translateY(0);      opacity: 1;    }
  }
  @keyframes valFlashUp {
    0%   { transform: translateY(0.14em); opacity: 0.35; color: #2E8B6E; }
    60%  { color: #2E8B6E; }
    100% { transform: translateY(0);      opacity: 1;    }
  }
  @keyframes valFlashDown {
    0%   { transform: translateY(0.14em); opacity: 0.35; color: #D95744; }
    60%  { color: #D95744; }
    100% { transform: translateY(0);      opacity: 1;    }
  }

  /* "Datos en vivo" earns a heartbeat. */
  #dl-live {
    display: inline-block; width: 5px; height: 5px; margin-right: 5px;
    border-radius: 50%; background: #2E8B6E; vertical-align: middle;
    animation: livePulse 2.4s ease-in-out infinite;
  }
  @keyframes livePulse {
    0%, 100% { opacity: 1;    box-shadow: 0 0 0 0    rgba(46,139,110,0.55); }
    50%      { opacity: 0.55; box-shadow: 0 0 0 4px  rgba(46,139,110,0);    }
  }

  /* Fiscal bars rise from the baseline as the card arrives. */
  #fiscal-bars .bar-grow {
    transition: height 0.72s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* ── Reduced motion ──────────────────────────────────────────────────────
     The site had no guard at all: scroll-reveal, card lift and chart draw all
     ran regardless. Everything resolves to its finished state instead. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
    .reveal { opacity: 1 !important; transform: none !important; }
    .card:hover { transform: none !important; }
    .spark-pulse { opacity: 0.14 !important; transform: none !important; }
    .spark-draw  { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
    .spark-fade  { opacity: 1 !important; }
    #dl-live { animation: none !important; }
  }

/* ════ <style id="navigation"> ════ */
  /* ── Navigation layer (2026-09-08) ───────────────────────────────────────
     The page is 20 sections and ~30.000 px; the nav pill carried 8 links, so
     thirteen sections — the entire data core — could only be reached by
     scrolling. Two affordances fix that without removing anything: an index
     that says where you are and jumps anywhere, and a peek clamp that keeps
     the tall sections scannable until you ask for the rest.
     Plain CSS, not Tailwind utilities: this block must not depend on a
     rebuild picking up new classes. */

  /* Scroll progress — the "how much is left" signal the page never had */
  #scroll-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0;
    background: var(--c-cobalt, #1A3A6B); z-index: 150;
    transition: width 90ms linear; pointer-events: none;
  }

  /* Index launcher. Bottom-LEFT: the chat owns bottom-right. */
  #idx-fab {
    position: fixed; bottom: 1.5rem; left: 1.5rem; z-index: 141;
    display: inline-flex; align-items: center; gap: .55rem;
    max-width: min(20rem, calc(100vw - 6rem));
    padding: .6rem .9rem .6rem .75rem;
    background: #fff; color: #1E2C48;
    border: 1px solid rgba(30,44,72,0.12); border-radius: 999px;
    box-shadow: 0 4px 24px -6px rgba(0,0,0,0.22);
    font: 600 12px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s;
  }
  #idx-fab:hover { background: #1A3A6B; color: #fff; border-color: #1A3A6B; }
  #idx-fab svg { width: 15px; height: 15px; flex: none; }
  #idx-current {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    letter-spacing: -0.01em;
  }
  .dark #idx-fab { background: #1C1C1A; color: #EDECE8; border-color: rgba(255,255,255,0.18); }

  #idx-panel {
    position: fixed; bottom: 5.25rem; left: 1.5rem; z-index: 142;
    width: min(21rem, calc(100vw - 3rem));
    max-height: min(30rem, calc(100vh - 9rem)); overflow-y: auto;
    background: #fff; border: 1px solid rgba(30,44,72,0.10);
    border-radius: 1.15rem; box-shadow: 0 12px 48px -10px rgba(0,0,0,0.28);
    padding: .85rem .35rem .6rem;
  }
  .dark #idx-panel { background: #1C1C1A; border-color: rgba(255,255,255,0.14); }
  #idx-panel .idx-group {
    font: 600 9.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .16em; text-transform: uppercase;
    color: rgba(30,44,72,0.42); padding: .75rem .95rem .3rem;
  }
  .dark #idx-panel .idx-group { color: rgba(237,236,232,0.42); }
  #idx-panel .idx-group:first-child { padding-top: .15rem; }
  #idx-panel a {
    display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
    padding: .42rem .95rem; border-radius: .6rem;
    font: 500 12.5px/1.35 ui-sans-serif, system-ui, -apple-system, sans-serif;
    color: #1E2C48; text-decoration: none; transition: background .12s, color .12s;
  }
  .dark #idx-panel a { color: #EDECE8; }
  #idx-panel a:hover { background: rgba(26,58,107,0.07); }
  .dark #idx-panel a:hover { background: rgba(255,255,255,0.07); }
  #idx-panel a.on { background: #1A3A6B; color: #fff; }
  #idx-panel a .idx-n {
    font: 400 9.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    color: rgba(30,44,72,0.32); flex: none;
  }
  #idx-panel a.on .idx-n { color: rgba(255,255,255,0.55); }
  .dark #idx-panel a .idx-n { color: rgba(237,236,232,0.35); }

  /* Peek clamp: a tall section shows its opening screen and says how much
     more there is. Nothing is removed from the DOM — Ctrl+F still finds it
     once expanded, and the control states the cost of expanding. */
  section.peek { position: relative; max-height: 860px; overflow: hidden; }
  section.peek::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 130px;
    /* Held back to the lower third: at full height the wash sat over the navy
       panels and read as a card fading to white rather than a page continuing. */
    background: linear-gradient(to bottom, rgba(249,243,231,0) 0%,
                rgba(249,243,231,0.55) 46%, var(--c-paper, #F9F3E7) 88%);
    pointer-events: none;
  }
  .dark section.peek::after {
    background: linear-gradient(to bottom, rgba(17,17,16,0) 0%,
                rgba(17,17,16,0.55) 46%, #111110 88%);
  }
  .peek-more {
    position: absolute; bottom: 1.15rem; left: 50%; transform: translateX(-50%);
    z-index: 2; display: inline-flex; align-items: center; gap: .45rem;
    padding: .5rem 1.05rem; background: #fff; color: #1A3A6B;
    border: 1px solid rgba(26,58,107,0.22); border-radius: 999px;
    box-shadow: 0 3px 16px -4px rgba(0,0,0,0.18);
    font: 600 11.5px/1 ui-sans-serif, system-ui, -apple-system, sans-serif;
    cursor: pointer; transition: background .15s, color .15s;
  }
  .peek-more:hover { background: #1A3A6B; color: #fff; }
  .dark .peek-more { background: #1C1C1A; color: #EDECE8; border-color: rgba(255,255,255,0.2); }
  .peek-more .peek-h {
    font: 400 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; opacity: .6;
  }

  /* Two-up charts on a wide canvas. The editorial rule forces every non-mini
     chart to span its whole grid row, which on a 1340px page means one chart
     per screen-third of scrolling. Inside an explicitly two-column grid that
     is a waste: the engine draws at container size, so a chart reads fine at
     ~650px. Narrow screens keep the full-row rule. */
  @media (min-width: 768px) {
    /* :has() matches descendants, so a grid nested inside a grid cell also
       matches — un-spanning that wrapper leaves half the row empty and squeezes
       the real chart cards inside it to a quarter width (this is what broke
       #fiscal). Only un-span cells that are not themselves grid containers;
       a wrapper keeps its full-row span so the grid inside it gets the whole
       width to pair within. */
    .md\:grid-cols-2 > *:not([class*="grid-cols"]):has(svg[data-spark*='"k":"axis"']),
    .md\:grid-cols-2 > *:not([class*="grid-cols"]):has(svg[data-spark*='"k":"std"']),
    .md\:grid-cols-2 > *:not([class*="grid-cols"]):has(svg[data-spark*='"k":"dual"']) {
      grid-column: auto !important;
    }
  }

  @media (max-width: 640px) {
    #idx-fab { bottom: 1.1rem; left: 1.1rem; padding: .55rem .8rem .55rem .65rem; }
    #idx-panel { bottom: 4.6rem; left: 1.1rem; }
    section.peek { max-height: 720px; }
  }
  @media print {
    #scroll-progress, #idx-fab, #idx-panel, .peek-more { display: none !important; }
    section.peek { max-height: none !important; overflow: visible !important; }
    section.peek::after { display: none !important; }
  }
  @media (prefers-reduced-motion: reduce) {
    #scroll-progress { transition: none; }
  }

/* ════ <style id="dark-contrast"> ════ */
  /* ── Dark-mode contrast (2026-09-14 audit, E7) ─────────────────────────────
     text-cobalt compiles to a literal #1A3A6B with no dark variant, so in dark
     mode every navy label and figure sat at about 1.5:1 on the near-black
     ground — the "Qué se puede y qué no se puede concluir" callout labels, the
     RCA values, the by-president table. Child cells inherit the fixed colour, so
     one rule reaches them too. Scoped to .dark only: light mode is untouched. */
  .dark .text-cobalt { color: #9DB8E8 !important; }
  /* Navy bars in the ranked lists (RCA profile, arrears mix, openness peers)
     need the same lift; h-3 keeps this off the cobalt buttons and chips, whose
     white text would lose contrast on a lighter fill. */
  .dark .h-3.bg-cobalt { background-color: #6F93CF !important; }
  /* Some JS-built cells set navy inline (style="color:#1A3A6B" in the
     by-president rates), which no class rule reaches; a stylesheet !important
     outranks a plain inline style. Matched case-insensitively, with and without
     the space after the colon. */
  .dark [style*="color:#1a3a6b" i],
  .dark [style*="color: #1a3a6b" i] { color: #9DB8E8 !important; }
  /* Fiscal bar value labels: dark green at 60% on near-black measured 1.9:1. */
  .dark .text-emerald-700\/60 { color: rgba(110, 231, 183, 0.8) !important; }

/* ════ <style id="lang-blocks"> ════ */
  /* Blocks too long for the data-t dictionary (the methodology table) ship in
     both languages; setLang() stamps <html lang>, and this shows one. */
  html[lang="en"] [data-lang="es"], html:not([lang="en"]) [data-lang="en"] { display: none !important; }

/* ════ additions 2026-09-15 (audit I5, N1–N8) ════ */
  /* Plain CSS like the navigation layer: none of this may depend on a
     Tailwind rebuild noticing a class. */

  /* I5 · top navigation follows IDX_DOMAINS; the scrollspy marks the domain
     you are reading. */
  #top-nav a.on { color: #1E2C48; font-weight: 600; }
  .dark #top-nav a.on { color: #EDECE8; }
  #mobile-menu a.on { color: var(--c-cobalt-line, #C9D6EE); }

  /* N2 · what changed */
  .chg-row { display: flex; gap: .5rem; overflow-x: auto; padding: .15rem 0 .45rem;
             scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .chg-chip { flex: none; display: flex; flex-direction: column; gap: 3px; min-width: 9.25rem;
              padding: .6rem .8rem; border: 1px solid rgba(30,44,72,.10); border-radius: .8rem;
              background: #fff; color: #1E2C48; text-decoration: none;
              transition: border-color .15s, background .15s; }
  .chg-chip:hover, .chg-chip:focus-visible { border-color: #1A3A6B; }
  .chg-l { font: 600 9.5px/1.2 ui-sans-serif, system-ui, sans-serif; letter-spacing: .08em;
           text-transform: uppercase; color: rgba(30,44,72,.74); white-space: nowrap; }
  .chg-v { font: 700 15px/1.15 "DM Mono", ui-monospace, monospace; letter-spacing: -.01em; white-space: nowrap; }
  .chg-d { font: 500 10.5px/1.2 "DM Mono", ui-monospace, monospace; color: rgba(30,44,72,.74); white-space: nowrap; }
  .chg-t { color: rgba(30,44,72,.66); }
  .dark .chg-chip { background: #1C1C1A; color: #EDECE8; border-color: rgba(255,255,255,.14); }
  .dark .chg-chip:hover { border-color: #9DB8E8; }
  .dark .chg-l, .dark .chg-d { color: rgba(237,236,232,.62); }
  .dark .chg-t { color: rgba(237,236,232,.62); }

  /* small labelled chips: REM error by year, FX restriction periods */
  .yr-chips { display: flex; flex-wrap: wrap; gap: .35rem .45rem; }
  .yr-chip { display: inline-flex; align-items: baseline; gap: .4rem; padding: .22rem .5rem;
             border-radius: .45rem; background: rgba(30,44,72,.045);
             font: 500 11px/1.25 "DM Mono", ui-monospace, monospace; color: rgba(30,44,72,.72); }
  .yr-chip b { font-weight: 700; }
  .yr-chip-t { font-family: ui-sans-serif, system-ui, sans-serif; color: rgba(30,44,72,.72); }
  .dark .yr-chip { background: rgba(255,255,255,.06); color: rgba(237,236,232,.78); }
  .dark .yr-chip-t { color: rgba(237,236,232,.6); }

  /* N5 · maturity wall: one stacked bar per year */
  .mat-row { display: grid; grid-template-columns: 7.25rem 1fr 3.25rem; gap: .6rem; align-items: center; }
  .mat-year { font-size: 12px; color: rgba(30,44,72,.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mat-bar { display: flex; height: .8rem; border-radius: 2px; overflow: hidden; background: rgba(30,44,72,.045); }
  .mat-bar i { display: block; height: 100%; }
  .mat-p { background: #1A3A6B; }
  .mat-m { background: #C99B3F; }
  .mat-val { font: 600 11px/1 "DM Mono", ui-monospace, monospace; text-align: right; color: rgba(30,44,72,.78); }
  .dark .mat-year, .dark .mat-val { color: rgba(237,236,232,.76); }
  .dark .mat-bar { background: rgba(255,255,255,.06); }
  .dark .mat-p, .dark .sw-navy { background: #6F93CF !important; }
  .sw { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; vertical-align: -1px; }

  /* N2 · changelog */
  .clog-item { padding: .7rem 0; }
  .clog-item summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .8rem; cursor: pointer;
                       list-style: none; font-size: 12.5px; color: rgba(30,44,72,.78); }
  .clog-item summary::-webkit-details-marker { display: none; }
  .clog-item summary::before { content: "▸"; color: rgba(30,44,72,.35); font-size: 10px; }
  .clog-item[open] summary::before { content: "▾"; }
  .clog-v { font: 700 12px/1 "DM Mono", ui-monospace, monospace; color: #1A3A6B; }
  .clog-d { font: 500 11px/1 "DM Mono", ui-monospace, monospace; color: rgba(30,44,72,.7); }
  .clog-body { margin: .55rem 0 .1rem 1rem; display: flex; flex-direction: column; gap: .4rem;
               font-size: 11.5px; color: rgba(30,44,72,.86); line-height: 1.7; }
  .clog-body b { font-weight: 600; color: rgba(30,44,72,.8); margin-right: .25rem; }
  .clog-body code { font: 500 10.5px/1 "DM Mono", ui-monospace, monospace; padding: .12rem .35rem; border-radius: .3rem;
                    background: rgba(30,44,72,.05); white-space: nowrap; }
  .clog-body code.add { background: rgba(46,139,110,.12); }
  .clog-body code.rev { background: rgba(201,155,63,.16); }
  .clog-body a { color: #1A3A6B; text-decoration: underline; text-underline-offset: 2px; }
  .dark .clog-item summary, .dark .clog-body { color: rgba(237,236,232,.72); }
  .dark .clog-v, .dark .clog-body a { color: #9DB8E8; }
  .dark .clog-d { color: rgba(237,236,232,.5); }
  .dark .clog-body b { color: rgba(237,236,232,.85); }
  .dark .clog-body code { background: rgba(255,255,255,.07); }

  /* N8 · permalink and CSV on every card. Desktop: floating, shown on hover or
     keyboard focus, so no card gets taller. Touch: in the flow, and only on
     cards that have a CSV — a link button on all ~90 cards would add screens
     of scroll to the page this navigation layer was built to shorten. */
  .card[data-tools] { position: relative; }
  .card-tools { display: flex; gap: .3rem; justify-content: flex-end; z-index: 5; }
  .ct-btn { display: inline-flex; align-items: center; gap: .3rem; padding: .28rem .55rem;
            border: 1px solid rgba(30,44,72,.14); border-radius: 999px; background: #fff; color: #1E2C48;
            font: 600 10.5px/1 ui-sans-serif, system-ui, sans-serif; text-decoration: none; cursor: pointer; }
  .ct-btn:hover, .ct-btn:focus-visible { border-color: #1A3A6B; color: #1A3A6B; }
  .ct-btn svg { width: 11px; height: 11px; }
  .bg-ink .ct-btn, .dark .ct-btn { background: #1C1C1A; color: #EDECE8; border-color: rgba(255,255,255,.2); }
  @media (hover: hover) {
    .card-tools { position: absolute; top: .6rem; right: .7rem; opacity: 0; transition: opacity .15s; }
    .card:hover > .card-tools, .card:focus-within > .card-tools { opacity: 1; }
  }
  @media (hover: none) {
    .card-tools { margin-top: .35rem; }
    .card-tools:not(.has-csv) { display: none; }
  }
  .card.card-target { animation: card-target 2.4s ease-out 1; }
  @keyframes card-target { 0%, 35% { box-shadow: 0 0 0 3px #C99B3F; } 100% { box-shadow: 0 0 0 3px rgba(201,155,63,0); } }
  @media (prefers-reduced-motion: reduce) { .card.card-target { animation: none; box-shadow: 0 0 0 3px #C99B3F; } }
  /* the fixed header would cover a card reached by its permalink */
  .card[id] { scroll-margin-top: 6rem; }
  /* Between the tablet breakpoint and 1024px the pill carries ten links:
     tighten it rather than let it spill (measured 24px over at 800px). */
  @media (min-width: 768px) and (max-width: 1100px) {
    #top-nav { gap: .62rem; }
    #top-nav .nl { font-size: 11.5px; }
    header nav { gap: .9rem !important; padding-left: .9rem !important; padding-right: .9rem !important; }
  }
  /* the Historia / Lab links are text-cobalt/70, a literal navy with no dark
     variant — nearly invisible on the dark pill */
  .dark #top-nav .text-cobalt\/70 { color: rgba(157,184,232,.88) !important; }
  .dark #top-nav .text-cobalt\/70:hover { color: #C9D8F2 !important; }

/* ════ chart sources (2026-09-15) ════ */
  /* Every figure carries its source directly below it, as an academic figure
     does. The label comes from CSS, so the element's text is only the source
     itself and the label follows <html lang>. Darker than the old faint grey:
     a source nobody can read is not a citation.
     (Its first deploy got the old stylesheet cached under the new stamp on www
     while the deployment propagated; deploy.sh now ships files before pages.) */
  .chart-src { margin-top: .5rem; font: 400 10.5px/1.55 "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
               color: rgba(30,44,72,.74); letter-spacing: 0; }
  .chart-src::before { content: "Fuente: "; font-weight: 600; }
  html[lang="en"] .chart-src::before { content: "Source: "; }
  .dark .chart-src { color: rgba(237,236,232,.6); }
  .bg-ink .chart-src, .dark .bg-ink .chart-src { color: rgba(255,255,255,.52); }

/* ════ readable text (2026-09-15) ════ */
  /* The faint greys were the secondary colour at 20–55% opacity: most small
     labels, notes and sources measured below 3:1. Every tier now clears the
     WCAG thresholds on the paper and on the dark cards (computed, not eyeballed:
     faint ≥ 4.6:1, middle ≥ 5.6:1, body ≥ 7:1; large display text ≥ 3.1:1),
     while keeping the order of emphasis. :not(:hover) leaves hover colours alone. */
  html:not(.dark) .text-secondary\/20:not(:hover), html:not(.dark) .text-secondary\/25:not(:hover), html:not(.dark) .text-secondary\/30:not(:hover), html:not(.dark) .text-secondary\/35:not(:hover), html:not(.dark) .text-secondary\/40:not(:hover), html:not(.dark) .text-secondary\/45:not(:hover) { color: #6B6A67; }
  html:not(.dark) .text-secondary\/50:not(:hover), html:not(.dark) .text-secondary\/55:not(:hover), html:not(.dark) .text-secondary\/60:not(:hover) { color: #61605E; }
  html:not(.dark) .text-secondary\/70:not(:hover), html:not(.dark) .text-secondary\/75:not(:hover), html:not(.dark) .text-secondary\/80:not(:hover) { color: #52524F; }
  html:not(.dark) .text-ink\/40:not(:hover), html:not(.dark) .text-ink\/45:not(:hover) { color: rgb(30 44 72 / 0.67); }
  html:not(.dark) .text-ink\/\[0\.22\]:not(:hover) { color: rgb(30 44 72 / 0.53); }
  .text-white\/20:not(:hover), .text-white\/25:not(:hover), .text-white\/30:not(:hover), .text-white\/35:not(:hover), .text-white\/40:not(:hover) { color: rgb(255 255 255 / 0.50); }
  .text-white\/50:not(:hover), .text-white\/55:not(:hover) { color: rgb(255 255 255 / 0.58); }
  .dark .text-secondary\/20:not(:hover), .dark .text-secondary\/25:not(:hover), .dark .text-secondary\/30:not(:hover), .dark .text-secondary\/35:not(:hover), .dark .text-secondary\/40:not(:hover), .dark .text-secondary\/45:not(:hover) { color: rgb(var(--c-secondary-rgb, 155 154 151) / 0.83); }
  .dark .text-secondary\/50:not(:hover), .dark .text-secondary\/55:not(:hover), .dark .text-secondary\/60:not(:hover) { color: rgb(var(--c-secondary-rgb, 155 154 151) / 0.95); }
  .dark .text-secondary\/70:not(:hover), .dark .text-secondary\/75:not(:hover), .dark .text-secondary\/80:not(:hover) { color: rgb(var(--c-secondary-rgb, 155 154 151) / 1.00); }

/* ════ readable text, second pass (2026-09-15) ════ */
  /* Signal colours (gains, losses, warnings) were tuned for large numbers and
     fail as small text. Same hue: darker on paper, lighter in dark mode. */
  html:not(.dark) .text-emerald-700\/60, html:not(.dark) .text-emerald-500, html:not(.dark) .text-emerald-600 { color: #047857; }
  html:not(.dark) .bg-ink .text-emerald-500, html:not(.dark) .bg-ink .text-emerald-600 { color: #34D399; }
  html:not(.dark) .text-amber-600, html:not(.dark) [style*="d97706" i] { color: #92400E !important; }
  html:not(.dark) .text-rose-500 { color: #A8392A; }
  html:not(.dark) .bg-ink .text-rose-500 { color: #F29A89; }
  html:not(.dark) .text-ink\/50:not(:hover) { color: rgb(30 44 72 / .74); }
  html:not(.dark) .yr-chip b[style*="D95744" i] { color: #A63A28 !important; }
  html:not(.dark) .yr-chip b[style*="2E8B6E" i] { color: #1F6B54 !important; }
  .dark .yr-chip b[style*="D95744" i] { color: #F29A89 !important; }
  .dark .yr-chip b[style*="2E8B6E" i] { color: #6FD3B1 !important; }
  .dark .text-amber-700, .dark [style*="b45309" i] { color: #F59E0B !important; }
  .dark .text-emerald-700, .dark [style*="047857" i] { color: #34D399 !important; }
  .dark #top-nav .nl:not(.on):not(:hover) { color: rgba(237,236,232,.68); }
  .dark [class*="bg-rose-50"].text-rose-500, .dark [class*="bg-rose-50"] .text-rose-500 { color: #BE123C !important; }
  .dark [class*="bg-emerald-50"].text-emerald-600, .dark [class*="bg-emerald-50"] .text-emerald-600 { color: #047857 !important; }

/* ════ readable text, third pass (2026-09-15) ════ */
  /* Measured leftovers. The older !important palette above still set the rose and
     amber text and beat the tiers on the dark cards; the light chips (amber-50,
     president chips) keep their pale ground in dark mode, so their text must stay
     dark; the footer links were cobalt on the dark canvas; the pale-blue stripes
     inside the white cards stayed pale in dark mode. */
  html:not(.dark) .text-rose-500 { color: #A8392A !important; }
  html:not(.dark) .text-amber-500 { color: #86600F !important; }
  html:not(.dark) .bg-ink .text-emerald-500, html:not(.dark) .bg-ink .text-emerald-600,
  html:not(.dark) .bg-cobalt .text-emerald-500, html:not(.dark) .bg-cobalt .text-emerald-600 { color: #34D399 !important; }
  html:not(.dark) .bg-ink .text-rose-500, html:not(.dark) .bg-cobalt .text-rose-500 { color: #F29A89 !important; }
  html:not(.dark) .bg-ink .text-amber-500, html:not(.dark) .bg-cobalt .text-amber-500 { color: #FBBF24 !important; }
  html:not(.dark) .text-emerald-600\/80 { color: #047857; }
  .dark .text-emerald-600\/80 { color: #34D399; }
  html:not(.dark) .text-ink\/60:not(:hover) { color: rgb(30 44 72 / .72); }
  html:not(.dark) .text-cobalt\/70:not(:hover) { color: rgb(26 58 107 / .8); }
  .dark .text-cobalt\/70:not(:hover) { color: rgba(157,184,232,.88); }
  .bg-cobalt .text-white\/20:not(:hover), .bg-cobalt .text-white\/25:not(:hover), .bg-cobalt .text-white\/30:not(:hover), .bg-cobalt .text-white\/35:not(:hover), .bg-cobalt .text-white\/40:not(:hover), .bg-cobalt .text-white\/50:not(:hover), .bg-cobalt .text-white\/55:not(:hover), .bg-cobalt .chart-src { color: rgb(255 255 255 / .66); }
  .dark .text-ink\/40:not(:hover) { color: rgb(237 236 232 / .62); }
  .dark .text-ink\/\[0\.22\]:not(:hover) { color: rgb(237 236 232 / .42); }
  .dark [class*="bg-[rgba(232,234,241"] { background-color: rgba(255,255,255,.035) !important; }
  .dark [class*="bg-amber-50"].text-amber-500, .dark [class*="bg-amber-50"] .text-amber-500,
  .dark [class*="bg-amber-50"].text-amber-600, .dark [class*="bg-amber-50"] .text-amber-600 { color: #92400E !important; }
  .dark [style*="b45309" i][style*="fffbeb" i] { color: #92400E !important; }
  /* News source badges: the brand colour is kept, darkened on paper and lightened
     in dark mode until it clears 4.6:1 (computed in app.js, --src-l / --src-d). */
  .news-src { color: var(--src-l); }
  .dark .news-src { color: var(--src-d); }

/* ════ error reports (2026-09-15) ════ */
  /* Plain CSS, not Tailwind classes: the dialog is built in app.js and the
     compiled tw.css only carries the classes that appear in the markup. */
  #report-ov { position: fixed; inset: 0; z-index: 2147482000; display: flex; align-items: center; justify-content: center;
    padding: 24px 16px; overflow-y: auto; background: rgba(15, 20, 30, .48); backdrop-filter: blur(2px); }
  #report-ov .rp-panel { width: 100%; max-width: 440px; padding: 24px; border-radius: 20px; background: #FEFCF6;
    color: #1E2C48; box-shadow: 0 24px 60px -20px rgba(15, 20, 30, .45); font-family: inherit; }
  #report-ov h2 { margin: 0 0 6px; font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
  #report-ov .rp-ctx { margin: 0 0 14px; font-size: 12.5px; color: #52524F; }
  #report-ov label { display: block; margin: 12px 0 6px; font-size: 12px; font-weight: 600; color: #52524F; }
  #report-ov textarea, #report-ov input { width: 100%; padding: 10px 12px; border: 1px solid #C3C9D4; border-radius: 12px;
    background: #FFFFFF; color: #1E2C48; font: inherit; font-size: 13.5px; resize: vertical; }
  #report-ov textarea::placeholder, #report-ov input::placeholder { color: #6B6A67; opacity: 1; }
  #report-ov .rp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
  #report-ov .rp-note { margin: 12px 0 0; font-size: 11.5px; line-height: 1.55; color: #52524F; }
  #report-ov .rp-note a { color: #1A3A6B; }
  #report-ov .rp-status { min-height: 18px; margin: 8px 0 0; font-size: 12.5px; color: #1E2C48; }
  #report-ov .rp-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
  #report-ov .rp-row button { padding: 10px 18px; border-radius: 12px; border: 1px solid transparent; font: inherit;
    font-size: 13px; font-weight: 600; cursor: pointer; }
  #report-ov .rp-cancel { background: transparent; border-color: #C3C9D4; color: #1E2C48; }
  #report-ov .rp-send { background: #1E2C48; color: #FFFFFF; }
  #report-ov .rp-send:disabled { opacity: .75; cursor: progress; }
  #report-ov :focus-visible { outline: 2px solid #1A3A6B; outline-offset: 2px; }
  .dark #report-ov .rp-panel { background: #1C1C1A; color: #EDECE8; }
  .dark #report-ov .rp-ctx, .dark #report-ov label, .dark #report-ov .rp-note { color: rgba(237, 236, 232, .76); }
  .dark #report-ov textarea, .dark #report-ov input { background: #141413; border-color: rgba(237, 236, 232, .22); color: #EDECE8; }
  .dark #report-ov textarea::placeholder, .dark #report-ov input::placeholder { color: rgba(237, 236, 232, .58); }
  .dark #report-ov .rp-note a { color: #9DB8E8; }
  .dark #report-ov .rp-status { color: #EDECE8; }
  .dark #report-ov .rp-cancel { border-color: rgba(237, 236, 232, .25); color: #EDECE8; }
  .dark #report-ov .rp-send { background: #EDECE8; color: #0F0F0E; }
  .dark #report-ov :focus-visible { outline-color: #9DB8E8; }
  /* The link-styled trigger inside the About paragraph. */
  .em-report { border: 0; background: none; padding: 0; font: inherit; color: #1A3A6B; text-decoration: underline;
    text-underline-offset: 2px; cursor: pointer; }
  .dark .em-report { color: #9DB8E8; }
  @media (max-width: 420px) { #report-ov .rp-row { flex-direction: column-reverse; } #report-ov .rp-row button { width: 100%; } }