/* Joer — accessibility bar, high contrast, dark theme and the accessibility page (eMAG 3.1, ch. 4).
   Shared by every page; loaded after site.css (and case.css) so it can override them. */

/* ---------- Bar ---------- */
/* Sticks to the top with the header right below it (site.css reads its height from --a11y-height).
   Under the fullscreen menu (z-index 4), which makes it inert while open */
.j-a11y {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 20px;
  text-transform: uppercase;
}
.j-a11y__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-24);
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}
.j-a11y ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px var(--space-18);
  margin: 0;
  padding: 0;
  list-style: none;
}
.j-a11y a,
.j-a11y button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-4) 2px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.j-a11y a:hover,
.j-a11y button:hover { text-decoration: underline; text-underline-offset: 3px; }
.j-a11y a:focus-visible,
.j-a11y button:focus-visible { outline: var(--rule-strong) solid var(--paper); outline-offset: 2px; }
.j-a11y a[aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; }
/* Shortcut number (accesskey) */
.j-a11y__key {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--space-4);
  border: var(--rule-hair) solid currentColor;
  font-size: 10px;
  line-height: 1;
}
.j-a11y svg { flex-shrink: 0; width: 16px; height: 16px; }

/* A− A A+ */
.j-a11y__text { display: inline-flex; align-items: center; gap: 2px; }
.j-a11y .j-a11y__text button {
  justify-content: center;
  min-width: 26px;
  padding: 2px var(--space-4);
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: none;
}
.j-a11y .j-a11y__text button:hover { text-decoration: none; background: color-mix(in srgb, var(--paper) 14%, transparent); }
.j-a11y .j-a11y__text button[aria-disabled="true"] { opacity: .5; cursor: default; background: none; }
.j-a11y__text .j-a11y-text-down { font-size: 12px; }
.j-a11y__text .j-a11y-text-reset { font-size: 14px; }
.j-a11y__text .j-a11y-text-up { font-size: 16px; }

/* Phones: short labels and no shortcut numbers (no accesskey on touch).
   The full text stays available to screen readers. */
.j-a11y__short { display: none; }
.j-a11y__menu-toggle { display: none !important; }
@media (max-width: 599px) {
  .j-a11y { font-size: 11px; }
  .j-a11y__inner { flex-wrap: nowrap; gap: var(--space-12); padding-top: var(--space-4); padding-bottom: var(--space-4); }
  .j-a11y ul { gap: 2px var(--space-12); }
  .j-a11y .j-a11y__text button { min-width: 22px; padding-inline: 2px; }
  .j-a11y__short { display: inline; }
  .j-a11y__key { display: none; }
  .j-a11y__long,
  .j-a11y__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* The features collapse into a menu opened by the "Acessibilidade" button (acessibilidade.js).
     Without JS (no .has-a11y-menu) they stay in the bar */
  .has-a11y-menu .j-a11y__menu-toggle { display: inline-flex !important; margin-left: auto; }
  .j-a11y__menu-toggle .j-a11y__menu-chevron { width: 14px; height: 14px; transition: rotate .25s ease; }
  .j-a11y.is-open .j-a11y__menu-chevron { rotate: 180deg; }
  .j-a11y.is-open { z-index: 6; }
  .has-a11y-menu .j-a11y__inner > ul:last-child {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100dvh - var(--a11y-height, 32px));
    overflow-y: auto;
    padding: var(--space-4) var(--gutter) var(--space-12);
    background: var(--ink);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--paper) 30%, transparent), 0 24px 40px -20px rgba(0, 0, 0, .6);
    font-size: 12px;
  }
  .has-a11y-menu .j-a11y.is-open .j-a11y__inner > ul:last-child { display: flex; }
  .has-a11y-menu .j-a11y__inner > ul:last-child > li + li { border-top: var(--rule-hair) solid color-mix(in srgb, var(--paper) 20%, transparent); }
  /* Full-width rows with readable labels and 44px touch targets */
  .has-a11y-menu .j-a11y__inner > ul:last-child > li > :is(a, button) {
    width: 100%;
    min-height: 44px;
    gap: var(--space-12);
    padding: var(--space-6) 0;
  }
  .has-a11y-menu .j-a11y__inner > ul:last-child .j-a11y__label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }
  /* A− A A+ get a caption and room to tap */
  .has-a11y-menu .j-a11y__inner > ul:last-child .j-a11y__text {
    display: flex;
    width: 100%;
    min-height: 44px;
    gap: var(--space-6);
  }
  .has-a11y-menu .j-a11y__inner > ul:last-child .j-a11y__text::before {
    content: "Tamanho do texto";
    content: "Tamanho do texto" / "";
    margin-right: auto;
  }
  .has-a11y-menu .j-a11y__inner > ul:last-child .j-a11y__text button { min-width: 40px; min-height: 36px; }
  .has-a11y-menu .j-a11y__inner > ul:last-child .j-a11y__text .j-a11y-text-reset { display: inline-flex; }
  /* Theme picker opens inline, inside the menu */
  .has-a11y-menu .j-palette__toggle .j-palette__chevron { margin-left: auto; }
  .has-a11y-menu .j-palette__menu {
    position: static;
    width: auto;
    padding: 0 0 var(--space-6);
    background: none;
    box-shadow: none;
  }
}
/* Very narrow screens: drop the "A" (A− already goes back to default) to keep one line */
@media (max-width: 359px) {
  .j-a11y__inner,
  .j-a11y ul { column-gap: var(--space-6); }
  .j-a11y__text .j-a11y-text-reset { display: none; }
}

/* ---------- Text size (A− A A+) ----------
   The site sets type in px, so the content scales with zoom, like browser zoom; bar and header keep their size */
html[data-text-size="1"] :is(main, .j-footer) { zoom: 1.125; }
html[data-text-size="2"] :is(main, .j-footer) { zoom: 1.25; }
html[data-text-size="3"] :is(main, .j-footer) { zoom: 1.5; }

/* ---------- Paused animations (eMAG 2.7 / 5.5) ---------- */
.is-motion-paused *,
.is-motion-paused *::before,
.is-motion-paused *::after { animation-play-state: paused !important; }
.is-motion-paused { scroll-behavior: auto; }

/* ---------- Dark theme ----------
   Same three colors: the page turns near-black and the accent becomes the text color.
   Orange on #141414 = 5.2:1; inverted elements use #141414 on orange (5.2:1). */
.is-dark {
  color-scheme: dark;
  --surface-page: #141414;
  --text-primary: var(--accent);
  --border-strong: var(--accent);
  --selection-bg: var(--accent);
  --selection-fg: #141414;
}
.is-dark a:focus-visible,
.is-dark button:focus-visible { outline-color: var(--accent); }
.is-dark .j-a11y { box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--accent) 25%, transparent); }
.is-dark .j-header-bar.is-scrolled { box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 25%, transparent), 0 8px 24px -12px #000; }
.is-dark .j-panel { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent); }
.is-dark .j-btn--solid { background: var(--accent); color: #141414; }
.is-dark .j-btn--solid:hover { background: var(--paper); color: var(--ink); }
.is-dark .j-btn--outline:hover { background: var(--accent); color: #141414; }
.is-dark .j-quote__text mark { background: var(--accent); color: #141414; }
.is-dark .j-work--invert .j-work-row:is(:hover, :focus-visible) { background: var(--accent); }
.is-dark .j-work--invert .j-work-row:is(:hover, :focus-visible) > span { color: #141414; }
/* Case pages */
.is-dark .j-pull { border-left-color: var(--accent); }
.is-dark .j-case-next__link:is(:hover, :focus-visible),
.is-dark .j-case-next__link:is(:hover, :focus-visible) .j-case-next__title { background: var(--accent); color: #141414; }

/* ---------- Color themes ----------
   A theme swaps the accent: every var(--accent) follows, and paper turns to sit beside it.
   "Ácido" is the default (no attribute) and opens in dark mode: paper ink on a near-black page (15.6:1),
   lime for labels, highlights and inverted elements (lime on the page 15.1:1, the page on lime 15.1:1).
   Rules stay dim gray so the lime is reserved for what matters. With dark mode off it is a lime page with near-black ink. */
html:not([data-palette]).is-dark {
  --surface-page: #090a08;
  --surface-panel: #10120f;
  --surface-media: #0b0c0a;
  --text-primary: var(--paper);
  --text-display: var(--accent);
  --text-on-panel: var(--paper);
  --text-hover: var(--accent);
  --border-strong: #3d4238;
  --border-on-panel: #3d4238;
  --hud-line: #2a2e27;
  --grid-line: color-mix(in srgb, var(--paper) 5%, transparent);
}
/* Panel copy reads in paper; the lime stays for labels and highlights */
html:not([data-palette]).is-dark .j-panel__bio { color: var(--text-on-panel); }
/* Light mode: paper vanishes on the lime page, so highlights, hovers and HUD marks ink in deep olive there (7.4:1) */
html:not([data-palette]):not(.is-dark) { --text-hover: #3b4a00; --text-accent: #3b4a00; }
html:not([data-palette]):not(.is-dark) :is(.j-on-panel, .is-menu-open .j-header-bar) { --text-hover: var(--paper); --text-accent: var(--accent); }
html:not([data-palette]):not(.is-dark) .j-highlight:not(:is(.j-panel, .j-manifesto, .j-acs-help__text) *) { color: #3b4a00; }

/* The original orange: a warmer graphite and a blush paper */
html[data-palette="laranja"] {
  --accent: #ff3d0f;
  --ink: #262626;
  --ink-deep: #1d1d1d;
  --paper: #f6d6cb;
}
/* "Mostarda Dark" opens in dark mode (acessibilidade.js): yellow on #141414 = 11.5:1, #141414 on yellow = 11.5:1.
   "Mostarda Light" shares its colors and opens in light mode: a yellow page with graphite ink (9.5:1). */
html:is([data-palette="mostarda"], [data-palette="mostarda-light"]) {
  --accent: #f5c800;
  --paper: #fff1b8;
}
/* Cream highlights vanish on the yellow page, so they ink in deep gold there (4.9:1) */
html:is([data-palette="mostarda"], [data-palette="mostarda-light"]):not(.is-dark) .j-highlight:not(:is(.j-panel, .j-manifesto, .j-acs-help__text) *) { color: #6e4c00; }
/* "Grafite Dark" is monochrome and opens in dark mode: light gray ink on a near-black graphite page (12.6:1), panels one step lighter (11.5:1).
   "Grafite Light" shares its colors and opens in light mode: a light gray page with graphite ink (10.3:1). */
html:is([data-palette="grafite"], [data-palette="grafite-light"]) {
  --accent: #d4d4d4;
  --paper: #fafafa;
}
html:is([data-palette="grafite"], [data-palette="grafite-light"]).is-dark {
  --surface-page: #121212;
  --ink: #1c1c1c;
  --ink-deep: #171717;
}
/* White highlights vanish on the light gray page, so they ink in mid graphite there (5.7:1) */
html:is([data-palette="grafite"], [data-palette="grafite-light"]):not(.is-dark) .j-highlight:not(:is(.j-panel, .j-manifesto, .j-acs-help__text) *) { color: #4d4d4d; }
/* "Blueprint" opens in dark mode: a technical-drawing blue page with white ink (7.9:1), pale blue lines and labels (5.6:1),
   panels one step deeper (9.5:1). With dark mode off it is a pale blue page with deep blue ink (7.8:1). */
html[data-palette="blueprint"] {
  --accent: #bfdcff;
  --ink: #123a7a;
  --ink-deep: #0e2f63;
  --paper: #ffffff;
}
html[data-palette="blueprint"].is-dark {
  --surface-page: #1d4f9e;
  --surface-panel: #18438a;
  --surface-media: #153c7c;
  --text-primary: var(--paper);
  --text-display: var(--accent);
  --text-on-panel: var(--paper);
  --text-hover: var(--accent);
  --grid-line: color-mix(in srgb, var(--paper) 10%, transparent);
  --hud-line: color-mix(in srgb, var(--paper) 30%, transparent);
}
/* White vanishes on the pale blue page, so highlights, hovers and HUD marks ink in blueprint blue there (5.6:1) */
html[data-palette="blueprint"]:not(.is-dark) { --text-hover: #1d4f9e; --text-accent: #1d4f9e; }
html[data-palette="blueprint"]:not(.is-dark) :is(.j-on-panel, .is-menu-open .j-header-bar) { --text-hover: var(--paper); --text-accent: var(--accent); }
html[data-palette="blueprint"]:not(.is-dark) .j-highlight:not(:is(.j-panel, .j-manifesto, .j-acs-help__text) *) { color: #1d4f9e; }
/* "Cobalto" opens in dark mode: a cobalt page with white ink (6.4:1), cream labels and highlights (5.8:1),
   graphite panels in cream (14.2:1). With dark mode off it is a cream page with graphite ink (14.2:1) and cobalt highlights (5.8:1). */
html[data-palette="cobalto"] {
  --accent: #f6f3ee;
  --ink: #222326;
  --ink-deep: #1b1c1f;
  --paper: #ffffff;
}
html[data-palette="cobalto"].is-dark {
  --surface-page: #1455d6;
  --text-primary: var(--paper);
  --text-display: var(--accent);
  --text-on-panel: var(--accent);
  --text-hover: var(--accent);
  --grid-line: color-mix(in srgb, var(--paper) 10%, transparent);
  --hud-line: color-mix(in srgb, var(--paper) 30%, transparent);
}
/* White vanishes on the cream page, so highlights, hovers and HUD marks ink in cobalt there (5.8:1) */
html[data-palette="cobalto"]:not(.is-dark) { --text-hover: #1455d6; --text-accent: #1455d6; }
html[data-palette="cobalto"]:not(.is-dark) :is(.j-on-panel, .is-menu-open .j-header-bar) { --text-hover: var(--paper); --text-accent: var(--accent); }
html[data-palette="cobalto"]:not(.is-dark) .j-highlight:not(:is(.j-panel, .j-manifesto, .j-acs-help__text) *) { color: #1455d6; }

/* "Yale Blue" opens in dark mode: a Yale blue page with lemon chiffon ink (10.2:1), deeper blue panels (11.6:1).
   With dark mode off it is a lemon chiffon page with Yale blue ink (10.2:1) and Yale blue panels. */
html[data-palette="yale"] {
  --accent: #faf0ca;
  --ink: #0d3b66;
  --ink-deep: #092c4d;
  --paper: #fff9e6;
}
html[data-palette="yale"].is-dark {
  --surface-page: #0d3b66;
  --surface-panel: #0a2f52;
  --surface-media: #092c4d;
  --text-primary: var(--accent);
  --text-display: var(--paper);
  --text-on-panel: var(--accent);
  --text-hover: var(--paper);
  --grid-line: color-mix(in srgb, var(--accent) 8%, transparent);
  --hud-line: color-mix(in srgb, var(--accent) 30%, transparent);
}
/* Paper vanishes on the lemon page, so highlights, hovers and HUD marks ink in Yale blue there (10.2:1) */
html[data-palette="yale"]:not(.is-dark) { --text-hover: #0d3b66; --text-accent: #0d3b66; }
html[data-palette="yale"]:not(.is-dark) :is(.j-on-panel, .is-menu-open .j-header-bar) { --text-hover: var(--paper); --text-accent: var(--accent); }
html[data-palette="yale"]:not(.is-dark) .j-highlight:not(:is(.j-panel, .j-manifesto, .j-acs-help__text) *) { color: #0d3b66; }

/* "Warm Red" opens in dark mode: an outer-space navy page with white ink (16:1), warm red labels and titles (5.2:1),
   panels one step lighter (white 13:1). With dark mode off it is a warm red page with navy ink (5.2:1) and navy panels. */
html[data-palette="warm-red"] {
  --accent: #ff4e45;
  --ink: #151c3f;
  --ink-deep: #0f1530;
  --paper: #ffffff;
}
html[data-palette="warm-red"].is-dark {
  --surface-page: #151c3f;
  --surface-panel: #1f2857;
  --surface-media: #0f1530;
  --text-primary: var(--paper);
  --text-display: var(--accent);
  --text-on-panel: var(--paper);
  --text-hover: var(--accent);
  --border-strong: color-mix(in srgb, var(--paper) 35%, transparent);
  --border-on-panel: color-mix(in srgb, var(--paper) 35%, transparent);
  --grid-line: color-mix(in srgb, var(--paper) 6%, transparent);
  --hud-line: color-mix(in srgb, var(--paper) 25%, transparent);
}
/* White vanishes on the red page, so highlights, hovers and HUD marks ink in navy there (5.2:1) */
html[data-palette="warm-red"]:not(.is-dark) { --text-hover: #151c3f; --text-accent: #151c3f; }
html[data-palette="warm-red"]:not(.is-dark) :is(.j-on-panel, .is-menu-open .j-header-bar) { --text-hover: var(--paper); --text-accent: var(--accent); }
html[data-palette="warm-red"]:not(.is-dark) .j-highlight:not(:is(.j-panel, .j-manifesto, .j-acs-help__text) *) { color: #151c3f; }

/* "Teal" opens in dark mode: a dark teal page with cream ink (7.8:1), golden pollen labels and titles (5.6:1),
   panels one step deeper (cream 9.2:1). With dark mode off it is a golden pollen page with teal ink (5.6:1) and teal panels. */
html[data-palette="teal"] {
  --accent: #ffca4b;
  --ink: #00555a;
  --ink-deep: #003d41;
  --paper: #fff4d6;
}
html[data-palette="teal"].is-dark {
  --surface-page: #00555a;
  --surface-panel: #004a4f;
  --surface-media: #003d41;
  --text-primary: var(--paper);
  --text-display: var(--accent);
  --text-on-panel: var(--paper);
  --text-hover: var(--accent);
  --border-strong: color-mix(in srgb, var(--paper) 35%, transparent);
  --border-on-panel: color-mix(in srgb, var(--paper) 35%, transparent);
  --grid-line: color-mix(in srgb, var(--paper) 7%, transparent);
  --hud-line: color-mix(in srgb, var(--paper) 25%, transparent);
}
/* Cream vanishes on the pollen page, so highlights, hovers and HUD marks ink in teal there (5.6:1) */
html[data-palette="teal"]:not(.is-dark) { --text-hover: #00555a; --text-accent: #00555a; }
html[data-palette="teal"]:not(.is-dark) :is(.j-on-panel, .is-menu-open .j-header-bar) { --text-hover: var(--paper); --text-accent: var(--accent); }
html[data-palette="teal"]:not(.is-dark) .j-highlight:not(:is(.j-panel, .j-manifesto, .j-acs-help__text) *) { color: #00555a; }

/* "Cyber Cyan" opens in dark mode: a midnight navy page with pale mint ink (16:1), cyber cyan labels and titles (12.3:1),
   panels one step lighter (mint 13:1). With dark mode off it is a cyan page with navy ink (12.3:1) and navy panels. */
html[data-palette="cyber"] {
  --accent: #00f5d4;
  --ink: #0b132b;
  --ink-deep: #070c1f;
  --paper: #e6fffa;
}
html[data-palette="cyber"].is-dark {
  --surface-page: #0b132b;
  --surface-panel: #131d3d;
  --surface-media: #070c1f;
  --text-primary: var(--paper);
  --text-display: var(--accent);
  --text-on-panel: var(--paper);
  --text-hover: var(--accent);
  --border-strong: color-mix(in srgb, var(--accent) 35%, transparent);
  --border-on-panel: color-mix(in srgb, var(--accent) 35%, transparent);
  --grid-line: color-mix(in srgb, var(--accent) 6%, transparent);
  --hud-line: color-mix(in srgb, var(--accent) 25%, transparent);
}
/* Mint vanishes on the cyan page, so highlights, hovers and HUD marks ink in navy there (12.3:1) */
html[data-palette="cyber"]:not(.is-dark) { --text-hover: #0b132b; --text-accent: #0b132b; }
html[data-palette="cyber"]:not(.is-dark) :is(.j-on-panel, .is-menu-open .j-header-bar) { --text-hover: var(--paper); --text-accent: var(--accent); }
html[data-palette="cyber"]:not(.is-dark) .j-highlight:not(:is(.j-panel, .j-manifesto, .j-acs-help__text) *) { color: #0b132b; }

/* "Âmbar" opens in dark mode: a navy page with cream ink (13.5:1), amber labels and titles (8.3:1),
   panels one step lighter (cream 11:1). With dark mode off it is an amber page with navy ink (8.3:1) and navy panels. */
html[data-palette="ambar"] {
  --accent: #fca311;
  --ink: #14213d;
  --ink-deep: #0e1830;
  --paper: #fff3dc;
}
html[data-palette="ambar"].is-dark {
  --surface-page: #14213d;
  --surface-panel: #1c2d54;
  --surface-media: #0e1830;
  --text-primary: var(--paper);
  --text-display: var(--accent);
  --text-on-panel: var(--paper);
  --text-hover: var(--accent);
  --border-strong: color-mix(in srgb, var(--paper) 35%, transparent);
  --border-on-panel: color-mix(in srgb, var(--paper) 35%, transparent);
  --grid-line: color-mix(in srgb, var(--paper) 6%, transparent);
  --hud-line: color-mix(in srgb, var(--paper) 25%, transparent);
}
/* Cream vanishes on the amber page, so highlights, hovers and HUD marks ink in navy there (8.3:1) */
html[data-palette="ambar"]:not(.is-dark) { --text-hover: #14213d; --text-accent: #14213d; }
html[data-palette="ambar"]:not(.is-dark) :is(.j-on-panel, .is-menu-open .j-header-bar) { --text-hover: var(--paper); --text-accent: var(--accent); }
html[data-palette="ambar"]:not(.is-dark) .j-highlight:not(:is(.j-panel, .j-manifesto, .j-acs-help__text) *) { color: #14213d; }

/* "Floresta" is bicolor and opens in dark mode: a forest green page with pomelo white ink (11.5:1), panels one step deeper (12.8:1).
   With dark mode off it is a pomelo white page with forest green ink (11.5:1) and forest panels. */
html[data-palette="floresta"] {
  --accent: #f9ffe3;
  --ink: #014421;
  --ink-deep: #012d16;
  --paper: #f9ffe3;
}
html[data-palette="floresta"].is-dark {
  --surface-page: #014421;
  --surface-panel: #013a1c;
  --surface-media: #012d16;
  --text-primary: var(--paper);
  --text-display: var(--accent);
  --text-on-panel: var(--paper);
  --text-hover: var(--accent);
  --border-strong: color-mix(in srgb, var(--paper) 35%, transparent);
  --border-on-panel: color-mix(in srgb, var(--paper) 35%, transparent);
  --grid-line: color-mix(in srgb, var(--paper) 6%, transparent);
  --hud-line: color-mix(in srgb, var(--paper) 25%, transparent);
}
/* Pomelo white vanishes on the pomelo page, so highlights, hovers and HUD marks ink in forest green there (11.5:1) */
html[data-palette="floresta"]:not(.is-dark) { --text-hover: #014421; --text-accent: #014421; }
html[data-palette="floresta"]:not(.is-dark) :is(.j-on-panel, .is-menu-open .j-header-bar) { --text-hover: var(--paper); --text-accent: var(--accent); }
html[data-palette="floresta"]:not(.is-dark) .j-highlight:not(:is(.j-panel, .j-manifesto, .j-acs-help__text) *) { color: #014421; }

/* "Lotus" opens in dark mode: a #141414 page with soft pink ink (14.6:1), lotus powder labels and titles (5.1:1),
   panels one step lighter (pink ink 13.3:1). With dark mode off it is a lotus powder page with #141414 ink (5.1:1) and #141414 panels. */
html[data-palette="lotus"] {
  --accent: #e65078;
  --ink: #141414;
  --ink-deep: #0c0c0c;
  --paper: #ffe4ec;
}
html[data-palette="lotus"].is-dark {
  --surface-page: #141414;
  --surface-panel: #1d1d1d;
  --surface-media: #0c0c0c;
  --text-primary: var(--paper);
  --text-display: var(--accent);
  --text-on-panel: var(--paper);
  --text-hover: var(--accent);
  --border-strong: color-mix(in srgb, var(--paper) 30%, transparent);
  --border-on-panel: color-mix(in srgb, var(--paper) 30%, transparent);
  --grid-line: color-mix(in srgb, var(--paper) 6%, transparent);
  --hud-line: color-mix(in srgb, var(--paper) 25%, transparent);
}
/* Pale pink vanishes on the lotus page, so highlights, hovers and HUD marks ink in #141414 there (5.1:1) */
html[data-palette="lotus"]:not(.is-dark) { --text-hover: #141414; --text-accent: #141414; }
html[data-palette="lotus"]:not(.is-dark) :is(.j-on-panel, .is-menu-open .j-header-bar) { --text-hover: var(--paper); --text-accent: var(--accent); }
html[data-palette="lotus"]:not(.is-dark) .j-highlight:not(:is(.j-panel, .j-manifesto, .j-acs-help__text) *) { color: #141414; }

/* ---------- Theme picker ----------
   Last item of the bar, in the top right corner. The list drops from the bar's right edge, over the header. */
.j-a11y__inner { position: relative; }
.j-a11y:has(.j-palette__toggle[aria-expanded="true"]) { z-index: 6; }
.j-palette__dot {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 0;
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--paper);
}
.j-a11y .j-palette__chevron { width: 14px; height: 14px; transition: rotate .25s ease; }
.j-palette__toggle[aria-expanded="true"] .j-palette__chevron { rotate: 180deg; }
.j-palette__menu {
  position: absolute;
  top: 100%;
  right: var(--gutter);
  display: grid;
  gap: 2px;
  width: min(280px, calc(100vw - 2 * var(--gutter)));
  padding: var(--space-6);
  background: var(--ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--paper) 30%, transparent), 0 24px 40px -20px rgba(0, 0, 0, .6);
}
.j-palette__menu[hidden] { display: none; }
.j-palette__list {
  --option-h: 52px;
  display: grid;
  gap: 2px;
  /* Five themes in view, the rest a scroll away */
  max-height: calc(5 * var(--option-h) + 4 * 2px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
}
.j-palette__list .j-palette__option { height: var(--option-h); scroll-snap-align: start; }
.j-palette__title { margin: 0; padding: var(--space-6) var(--space-12) var(--space-4); font-size: 11px; opacity: .7; }
.j-a11y .j-palette__option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-12);
  width: 100%;
  padding: var(--space-12);
  text-align: left;
}
.j-a11y .j-palette__option:hover { text-decoration: none; background: color-mix(in srgb, var(--paper) 12%, transparent); }
.j-a11y .j-palette__option:focus-visible { outline-offset: -2px; }
.j-palette__swatch {
  width: 40px;
  height: 28px;
  border-radius: 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--paper) 40%, transparent);
}
/* Each swatch shows its theme's page and ink, fixed so it never follows the current theme */
.j-palette__swatch--acido { background: linear-gradient(135deg, #090a08 0 50%, #c8f53b 50% 100%); }
.j-palette__swatch--laranja { background: linear-gradient(135deg, #ff3d0f 0 50%, #262626 50% 100%); }
.j-palette__swatch--mostarda { background: linear-gradient(135deg, #141414 0 50%, #f5c800 50% 100%); }
.j-palette__swatch--mostarda-light { background: linear-gradient(135deg, #f5c800 0 50%, #262626 50% 100%); }
.j-palette__swatch--grafite { background: linear-gradient(135deg, #121212 0 50%, #d4d4d4 50% 100%); }
.j-palette__swatch--grafite-light { background: linear-gradient(135deg, #d4d4d4 0 50%, #111310 50% 100%); }
.j-palette__swatch--blueprint { background: linear-gradient(135deg, #1d4f9e 0 50%, #ffffff 50% 100%); }
.j-palette__swatch--cobalto { background: linear-gradient(135deg, #1455d6 0 50%, #f6f3ee 50% 100%); }
.j-palette__swatch--yale { background: linear-gradient(135deg, #0d3b66 0 50%, #faf0ca 50% 100%); }
.j-palette__swatch--warm-red { background: linear-gradient(135deg, #151c3f 0 50%, #ff4e45 50% 100%); }
.j-palette__swatch--teal { background: linear-gradient(135deg, #00555a 0 50%, #ffca4b 50% 100%); }
.j-palette__swatch--cyber { background: linear-gradient(135deg, #0b132b 0 50%, #00f5d4 50% 100%); }
.j-palette__swatch--ambar { background: linear-gradient(135deg, #14213d 0 50%, #fca311 50% 100%); }
.j-palette__swatch--floresta { background: linear-gradient(135deg, #014421 0 50%, #f9ffe3 50% 100%); }
.j-palette__swatch--lotus { background: linear-gradient(135deg, #141414 0 50%, #e65078 50% 100%); }
.j-palette__name { display: grid; gap: 2px; min-width: 0; overflow: hidden; font-family: var(--font-body); font-size: 15px; font-weight: 800; text-transform: none; white-space: nowrap; text-overflow: ellipsis; }
.j-palette__name small { overflow: hidden; font-family: var(--font-mono); font-size: 11px; font-weight: 400; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; opacity: .7; }
.j-a11y .j-palette__check { visibility: hidden; color: var(--accent); }
.j-palette__option[aria-pressed="true"] .j-palette__check { visibility: visible; }
.j-palette__option[aria-pressed="true"] { background: color-mix(in srgb, var(--paper) 8%, transparent); }

/* ---------- Accessibility page ---------- */
.j-acs { padding-bottom: clamp(80px, 10vw, var(--space-140)); }
/* The closing question sits flush on the footer so the arrow lands on the seam */
.j-acs:has(> .j-acs-ask:last-child) { padding-bottom: 0; }
.j-acs-hero .j-hero__grid { padding-bottom: clamp(48px, 6vw, var(--space-88)); }
.j-acs-hero .j-hero__aside .j-btn { gap: var(--space-14); }

/* Index: numbered tiles that invert on hover, like the work list */
.j-acs-index {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-top: var(--rule-strong) solid var(--border-strong);
  border-left: var(--rule-strong) solid var(--border-strong);
  list-style: none;
}
.j-acs-index li { display: flex; border-right: var(--rule-strong) solid var(--border-strong); border-bottom: var(--rule-strong) solid var(--border-strong); }
.j-acs-index a {
  flex: 1;
  display: grid;
  align-content: space-between;
  gap: var(--space-24);
  min-height: 112px;
  padding: var(--space-14) var(--space-16) var(--space-16);
  font-size: clamp(15px, 1.3vw, 19px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  transition: background .25s ease, color .25s ease;
}
.j-acs-index a span { font-family: var(--font-mono); font-size: 12px; font-weight: 400; letter-spacing: 0; }
.j-acs-index a:hover { background: var(--ink); color: var(--accent); }
.j-acs-index a:focus-visible { outline-offset: -6px; }
@media (max-width: 900px) { .j-acs-index { grid-template-columns: repeat(2, minmax(0, 1fr)); } .j-acs-index a { min-height: 88px; } }

/* ---------- Adjustments panel ---------- */
.j-acs-adjust { padding-top: clamp(var(--space-56), 8vw, var(--space-112)); }
.j-acs-panel { grid-template-columns: minmax(0, 1fr); }
.j-acs-panel__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 6vw, 104px);
  line-height: .9;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.j-acs-panel button:focus-visible { outline-color: var(--paper); }

.j-acs-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(var(--space-12), 1.6vw, var(--space-24)); }
@media (max-width: 860px) { .j-acs-tiles { grid-template-columns: minmax(0, 1fr); } }
.j-acs-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-20);
  min-width: 0;
  padding: clamp(var(--space-20), 2.4vw, var(--space-32));
  border: var(--rule-strong) solid var(--border-on-panel);
  border-radius: 0;
  transition: background .35s ease, color .35s ease;
}
.j-acs-tile__top { display: flex; justify-content: space-between; align-self: stretch; padding-bottom: var(--space-12); border-bottom: var(--rule-hair) solid currentColor; }
.j-acs-tile__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 4.6vw, 72px);
  line-height: .92;
  text-transform: uppercase;
  color: var(--text-display);
  transition: color .35s ease;
}
.j-acs-tile p:not(.j-acs-tile__top) { margin: 0; max-width: 52ch; font-size: 16px; line-height: 1.55; font-weight: 500; text-wrap: pretty; }
.j-acs-tile > :last-child { margin-top: auto; }
/* An option that is on lights its tile up */
.j-acs-tile:has([aria-pressed="true"]),
html[data-text-size] #fonte { background: var(--accent); color: var(--ink); }
.j-acs-tile:has([aria-pressed="true"]) .j-acs-tile__title,
html[data-text-size] #fonte .j-acs-tile__title { color: var(--ink); }
.j-acs-tile:has([aria-pressed="true"]) button:focus-visible,
html[data-text-size] #fonte button:focus-visible { outline-color: var(--ink); }

/* On/off switch (high contrast, dark theme, animations) */
.j-acs-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  align-self: stretch;
  padding: var(--space-14) var(--space-14) var(--space-14) var(--space-20);
  border: var(--rule-strong) solid currentColor;
  background: none;
  color: inherit;
  font: 800 17px/1.2 var(--font-body);
  letter-spacing: -.01em;
  text-align: left;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.j-acs-switch__track {
  position: relative;
  flex: none;
  width: 60px;
  height: 32px;
  border: var(--rule-strong) solid currentColor;
  border-radius: 0;
}
.j-acs-switch__track::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 0;
  background: currentColor;
  transition: transform .35s cubic-bezier(.77, 0, .18, 1);
}
.j-acs-switch[aria-pressed="true"] .j-acs-switch__track { background: currentColor; }
.j-acs-switch[aria-pressed="true"] .j-acs-switch__track::after { transform: translateX(28px); background: var(--accent); }
.j-acs-switch:hover { background: var(--accent); color: var(--ink); }
.j-acs-switch[aria-pressed="true"]:hover { background: var(--ink); color: var(--accent); }
.j-acs-switch[aria-pressed="true"]:hover .j-acs-switch__track::after { background: var(--ink); }

/* Color previews: the site's colors next to each option */
.j-acs-samples { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-self: stretch; }
.j-acs-sample { display: grid; gap: 2px; padding: var(--space-14) var(--space-16); border-radius: 0; font-size: 15px; }
.j-acs-sample span { margin-bottom: var(--space-4); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; }
.j-acs-sample { background: var(--sample-bg); color: var(--sample-fg); }
.j-acs-sample u { color: var(--sample-link); text-underline-offset: 3px; }
/* Site and dark samples follow the current color theme, whichever mode is on (pages as set in the theme rules above) */
.j-acs-sample--site { --sample-bg: var(--accent); --sample-fg: var(--ink); --sample-link: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.j-acs-sample--contrast { --sample-bg: #000; --sample-fg: #fff; --sample-link: #fff333; }
.j-acs-sample--dark { --sample-bg: #141414; --sample-fg: var(--accent); --sample-link: var(--accent); }
html:not([data-palette]) .j-acs-sample--dark { --sample-bg: #090a08; --sample-fg: var(--paper); }
html:is([data-palette="grafite"], [data-palette="grafite-light"]) .j-acs-sample--dark { --sample-bg: #121212; }
html[data-palette="blueprint"] .j-acs-sample--dark { --sample-bg: #1d4f9e; --sample-fg: var(--paper); }

/* Text size: a four-step meter plus A− A A+ */
.j-acs-level { display: flex; align-items: flex-end; gap: var(--space-6); height: 40px; }
.j-acs-level span { width: 14px; border: var(--rule-strong) solid currentColor; transition: background .25s ease; }
.j-acs-level span:nth-child(1) { height: 16px; background: currentColor; }
.j-acs-level span:nth-child(2) { height: 24px; }
.j-acs-level span:nth-child(3) { height: 32px; }
.j-acs-level span:nth-child(4) { height: 40px; }
html[data-text-size] .j-acs-level span:nth-child(2),
html:is([data-text-size="2"], [data-text-size="3"]) .j-acs-level span:nth-child(3),
html[data-text-size="3"] .j-acs-level span:nth-child(4) { background: currentColor; }
.j-acs-text { display: flex; gap: var(--space-6); align-self: stretch; }
.j-acs-text button {
  flex: 1;
  display: grid;
  place-items: center;
  height: 60px;
  border: var(--rule-strong) solid currentColor;
  background: none;
  color: inherit;
  font-family: var(--font-body);
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.j-acs-text .j-a11y-text-down { font-size: 18px; }
.j-acs-text .j-a11y-text-reset { font-size: 24px; }
.j-acs-text .j-a11y-text-up { font-size: 30px; }
.j-acs-text button:hover { background: var(--accent); color: var(--ink); }
html[data-text-size] #fonte .j-acs-text button:hover { background: var(--ink); color: var(--accent); }
.j-acs-text button[aria-disabled="true"] { opacity: var(--opacity-dimmed); cursor: default; background: none !important; color: inherit !important; }

/* Animations: a running stripe the motion switch actually stops */
.j-acs-motion {
  align-self: stretch;
  height: var(--space-40);
  border-radius: 0;
  background: repeating-linear-gradient(-45deg, currentColor 0 12px, transparent 12px 28px);
  animation: j-acs-run 1.6s linear infinite;
}
@keyframes j-acs-run { to { background-position: 39.6px 0; } }
@media (prefers-reduced-motion: reduce) { .j-acs-motion { animation: none; } }

/* ---------- Sections: giant number, title, then content ---------- */
.j-acs-sec { padding-top: clamp(var(--space-72), 10vw, var(--space-160)); }
/* Closing question that leads into the footer CTA */
.j-acs-ask { padding-block: clamp(var(--space-56), 7vw, var(--space-112)) calc(clamp(96px, 10vw, 136px) / 2 + var(--space-32)); text-align: center; }
.j-acs-ask .j-acs-head__title { max-width: 16ch; margin-inline: auto; }
/* Orange arrow floating over the seam between the question and the footer CTA */
.j-acs-ask { position: relative; }
.j-acs-ask__arrow {
  --arrow-size: clamp(96px, 10vw, 136px);
  position: absolute;
  z-index: 2;
  left: calc(50% - var(--arrow-size) / 2);
  bottom: calc(var(--arrow-size) / -2);
  display: grid;
  place-items: center;
  width: var(--arrow-size);
  height: var(--arrow-size);
  border-radius: 0;
  background: var(--accent);
  color: var(--ink);
  animation: j-acs-float 2.4s ease-in-out infinite;
}
.j-acs-ask__arrow svg { width: 50%; height: 50%; }
.j-acs-ask__arrow:hover { animation-play-state: paused; }
.j-acs-ask__arrow:hover svg { translate: 0 4px; }
.j-acs-ask__arrow:focus-visible { outline-offset: 6px; }
@keyframes j-acs-float { 0%, 100% { translate: 0 -8px; } 50% { translate: 0 8px; } }
@media (prefers-reduced-motion: reduce) { .j-acs-ask__arrow { animation: none; } }
/* Dark stripe between sections: generous air above and below */
.j-acs-divider { padding-block: clamp(var(--space-88), 12vw, var(--space-180)) clamp(var(--space-16), 2vw, var(--space-32)); }
.j-acs-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "num title" "num lead";
  align-items: end;
  gap: var(--space-12) clamp(var(--space-20), 3vw, var(--space-56));
  padding-top: var(--space-24);
  margin-bottom: clamp(var(--space-40), 5vw, var(--space-72));
}
.j-acs-head__num {
  grid-area: num;
  align-self: start;
  font-family: var(--font-display);
  font-size: clamp(88px, 14vw, 240px);
  line-height: .8;
  color: var(--text-display);
}
.j-acs-head__title {
  grid-area: title;
  font-size: clamp(36px, 5.8vw, 96px);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.045em;
  text-wrap: balance;
}
/* No lead: the title sits on the number's baseline */
.j-acs-head:not(:has(.j-acs-head__lead)) { grid-template-areas: "num title"; }
.j-acs-head:not(:has(.j-acs-head__lead)) .j-acs-head__num { align-self: end; }
/* Paper numbers vanish on the light accent page, so they ink there like the stripes */
html:not(.is-dark) :is(.j-acs-head__num, .j-acs-cards__num) { color: var(--ink); }
.j-acs-head__lead { grid-area: lead; max-width: 640px; font-size: 17px; line-height: 1.55; font-weight: 500; }
@media (max-width: 560px) {
  .j-acs-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "num" "title" "lead"; }
  .j-acs-head:not(:has(.j-acs-head__lead)) { grid-template-areas: "num" "title"; }
  .j-acs-head__num { font-size: 88px; }
}

.j-acs-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-40) clamp(var(--space-32), 5vw, var(--space-88)); align-items: start; }
@media (max-width: 1000px) { .j-acs-split { grid-template-columns: minmax(0, 1fr); } }
.j-acs-stack { display: grid; gap: var(--space-20); }

.j-acs kbd {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  padding: 1px var(--space-6);
  border: var(--rule-hair) solid currentColor;
  border-bottom-width: 3px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  white-space: nowrap;
}

/* Shortcut keys as giant keycaps */
.j-acs-caps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-24); margin: 0; padding: 0; list-style: none; }
.j-acs-caps li { display: grid; gap: var(--space-16); align-content: start; font-size: 16px; line-height: 1.45; font-weight: 500; }
.j-acs-caps b { font-weight: 800; }
.j-acs .j-acs-cap {
  width: 100%;
  min-width: 0;
  max-width: 220px;
  aspect-ratio: 1;
  padding: 0;
  border: var(--rule-strong) solid currentColor;
  border-bottom-width: 14px;
  border-radius: 0;
  font-family: var(--font-display);
  font-size: clamp(72px, 9vw, 140px);
  line-height: 1;
}

/* Definition-style list: browsers */
.j-acs-list { width: 100%; margin: 0; padding: 0; list-style: none; border-top: var(--rule-strong) solid var(--border-strong); }
.j-acs-list li {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--space-6) var(--space-24);
  padding: var(--space-16) 0;
  border-bottom: var(--rule-hair) solid var(--border-strong);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
}
@media (max-width: 560px) { .j-acs-list li { grid-template-columns: minmax(0, 1fr); } }
.j-acs-note { max-width: 640px; padding-left: var(--space-20); border-left: var(--rule-strong) solid currentColor; font-size: 15px; line-height: 1.55; font-weight: 500; }

/* Replica of the accessibility bar, with numbered pins matching the list below */
.j-acs-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-14) var(--space-28);
  padding: var(--space-20) clamp(var(--space-20), 2.4vw, var(--space-32));
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  box-shadow: 0 32px 40px -28px rgba(0, 0, 0, .55);
}
.j-acs-bar span { display: inline-flex; align-items: center; gap: var(--space-6); }
.j-acs-bar i,
.j-acs-defs li::before {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 0;
  background: var(--accent);
  color: var(--ink);
  font: 400 11px/1 var(--font-mono);
}
.j-acs-bar kbd { font-size: 10px; }
.j-acs-defs {
  counter-reset: acs-def;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr));
  gap: var(--space-16);
  margin: var(--space-32) 0 0;
  padding: 0;
  list-style: none;
}
.j-acs-defs li {
  counter-increment: acs-def;
  display: grid;
  grid-template-columns: 24px minmax(0, 10em) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-6) var(--space-16);
  min-width: 0;
  padding: clamp(var(--space-20), 2.4vw, var(--space-28));
  border: var(--rule-strong) solid var(--border-strong);
  font-size: 16px;
  line-height: 1.45;
  font-weight: 500;
}
.j-acs-defs li::before { content: counter(acs-def); background: var(--ink); color: var(--accent); }
.is-dark .j-acs-defs li::before { background: var(--accent); color: #141414; }
.j-acs-defs b { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
@media (max-width: 560px) {
  .j-acs-defs li { grid-template-columns: 24px minmax(0, 1fr); }
  .j-acs-defs li span { grid-column: 2; }
}

/* Other features as cards */
.j-acs-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--space-24); margin: 0; padding: 0; list-style: none; }
.j-acs-cards li { display: grid; align-content: start; gap: var(--space-12); }
.j-acs-cards li::before {
  content: "";
  height: var(--space-16);
  margin-bottom: var(--space-12);
  background: repeating-linear-gradient(-45deg, var(--ink) 0 8px, transparent 8px 18px);
}
.is-dark .j-acs-cards li::before { background: repeating-linear-gradient(-45deg, var(--accent) 0 8px, transparent 8px 18px); }
/* Ink stripes vanish on the near-black page, so section dividers stripe in the accent too */
.is-dark .j-stripes--band.j-stripes--dark { background: repeating-linear-gradient(-45deg, var(--accent) 0 18px, transparent 18px 42px); }
.j-acs-cards__num { font-family: var(--font-display); font-size: 72px; line-height: .9; color: var(--text-display); }
.j-acs-cards h3 { margin: var(--space-12) 0 0; font-size: 24px; font-weight: 800; line-height: 1.1; letter-spacing: -.03em; }
.j-acs-cards p { font-size: 16px; line-height: 1.55; font-weight: 500; text-wrap: pretty; }

/* Standard: manifesto band */
.j-acs-band { margin-top: clamp(var(--space-72), 10vw, var(--space-160)); }
.j-acs-band .j-manifesto__label span { opacity: .55; }
.j-acs-band__note { margin-top: clamp(var(--space-32), 4vw, var(--space-56)); color: var(--paper); }
.j-acs-band__note a { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }

/* Report a problem */
.j-acs-help__body { display: grid; gap: clamp(var(--space-32), 4vw, var(--space-56)); justify-items: start; }
.j-acs-help__text { max-width: 1200px; font-size: clamp(32px, 4.6vw, 72px); line-height: 1; letter-spacing: -.04em; }
/* Blush on orange is too faint for text, so the highlight is set like the testimonials' marks */
.j-acs-help__text .j-highlight { padding: 0 .12em; background: var(--ink); color: var(--accent); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.is-dark .j-acs-help__text .j-highlight { background: var(--accent); color: #141414; }
.j-acs-contact { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.j-acs-contact .j-btn--outline { padding: var(--space-14) var(--space-26); font-size: 16px; gap: var(--space-12); }

/* Laws: rows that invert on hover */
.j-acs-laws { margin: 0; padding: 0; list-style: none; border-top: var(--rule-strong) solid var(--border-strong); }
.j-acs-law {
  display: grid;
  grid-template-columns: 120px minmax(0, 5fr) minmax(0, 6fr) auto;
  align-items: center;
  gap: var(--space-6) clamp(var(--space-16), 2vw, var(--space-32));
  padding: var(--space-20) clamp(0px, 1.4vw, var(--space-20));
  border-bottom: var(--rule-strong) solid var(--border-strong);
  transition: background .25s ease, color .25s ease;
}
.j-acs-law__kind { font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; }
.j-acs-law__num { font-family: var(--font-display); font-size: clamp(44px, 6vw, 96px); line-height: 1.05; }
.j-acs-law__desc { font-size: 16px; line-height: 1.45; font-weight: 600; }
.j-acs-law__arrow { font-size: 28px; transition: transform .35s cubic-bezier(.77, 0, .18, 1); }
.j-acs-law:is(:hover, :focus-visible) { background: var(--ink); color: var(--accent); }
.j-acs-law:hover .j-acs-law__arrow { transform: translate(4px, -4px); }
.j-acs-law:focus-visible { outline-offset: -4px; outline-color: var(--paper); }
@media (max-width: 760px) {
  .j-acs-law { grid-template-columns: minmax(0, 1fr) auto; }
  .j-acs-law__kind, .j-acs-law__num, .j-acs-law__desc { grid-column: 1; }
  .j-acs-law__arrow { grid-column: 2; grid-row: 1 / span 3; align-self: start; }
}

/* Privacy page: reuses the blocks above */
.j-pv-tiles { margin: 0; padding: 0; list-style: none; }
.j-pv-tiles .j-acs-tile > :last-child { margin-top: 0; }
.j-pv-note { margin-top: var(--space-32); }
.j-pv-inline { text-decoration: underline; text-underline-offset: 3px; }
.j-pv-text { max-width: 60ch; font-size: 16px; line-height: 1.55; font-weight: 500; }
.j-pv-keys code { font-family: var(--font-mono); font-size: 14px; font-weight: 400; overflow-wrap: anywhere; }
.j-pv-keys span { font-weight: 500; }
/* Wide table scrolls sideways on phones instead of the page */
.j-pv-scroll { overflow-x: auto; }
.j-pv-scroll:focus-visible { outline-offset: 4px; }
.j-pv-table { width: 100%; min-width: 640px; border-collapse: collapse; border-top: var(--rule-strong) solid var(--border-strong); font-size: 16px; line-height: 1.45; text-align: left; }
.j-pv-table th,
.j-pv-table td { padding: var(--space-16) var(--space-24) var(--space-16) 0; border-bottom: var(--rule-hair) solid var(--border-strong); vertical-align: top; }
.j-pv-table thead th { font-family: var(--font-mono); font-size: 13px; font-weight: 400; text-transform: uppercase; }
.j-pv-table tbody th { width: 26%; font-weight: 800; }
.j-pv-table td { font-weight: 500; }
.j-pv-table td:last-child { width: 30%; font-weight: 700; }

/* Dark theme on this page */
.is-dark .j-acs-index a:hover,
.is-dark .j-acs-law:is(:hover, :focus-visible) { background: var(--accent); color: #141414; }
.is-dark .j-acs-bar { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent); }

/* ---------- High contrast (eMAG 4.2) ----------
   Black background, white text, yellow #FFF333 underlined links, white lines and icons. */
.is-high-contrast,
.is-high-contrast body { background: #000 !important; }
.is-high-contrast *,
.is-high-contrast *::before,
.is-high-contrast *::after {
  background-color: #000 !important;
  background-image: none !important;
  color: #fff !important;
  -webkit-text-fill-color: currentColor !important;
  border-color: #fff !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.is-high-contrast a,
.is-high-contrast a *,
.is-high-contrast a:hover,
.is-high-contrast a:active { color: #fff333 !important; text-decoration: underline !important; }
.is-high-contrast :focus-visible { outline: 3px solid #fff333 !important; outline-offset: 3px !important; }
.is-high-contrast ::selection { background-color: #fff333 !important; color: #000 !important; }
.is-high-contrast .j-a11y { border-bottom: 1px solid #fff; }
.is-high-contrast .j-a11y__key { border-color: #fff333 !important; }
.is-high-contrast button { border: 1px solid #fff !important; }
.is-high-contrast .j-a11y button { border: 0 !important; }
.is-high-contrast .j-btn { border: 1px solid #fff !important; }
.is-high-contrast img { background-color: transparent !important; }
/* Inline spans in tight display type: a black box on the next line would cover the line above */
.is-high-contrast :is(.j-highlight, .j-word, .j-word > span) { background-color: transparent !important; }
/* Highlighted words keep standing out without color */
.is-high-contrast mark { text-decoration: underline 2px !important; text-underline-offset: 4px; }
/* Lines and shapes drawn with background */
.is-high-contrast .j-menu-toggle__lines::before,
.is-high-contrast .j-menu-toggle__lines::after,
.is-high-contrast .j-nav-link::after,
.is-high-contrast .j-acs-switch__track::after { background-color: #fff !important; }
.is-high-contrast .j-acs-switch[aria-pressed="true"] .j-acs-switch__track { background-color: #fff !important; }
.is-high-contrast .j-acs-switch[aria-pressed="true"] .j-acs-switch__track::after { background-color: #000 !important; }
.is-high-contrast .j-wa__layer { fill: #fff; }
.is-high-contrast .j-wa__ring { border: 1px solid #fff; }
.is-high-contrast .j-wa__badge,
.is-high-contrast .j-stripes--corner { border: 1px solid #fff; }
.is-high-contrast .j-stripes--band { height: 0; border-top: 1px solid #fff; }
.is-high-contrast .j-acs-ask__arrow { border: 1px solid #fff; }
.is-high-contrast .j-acs-cards li::before { height: 0; background: none; border-top: 1px solid #fff; }
/* Case pages: chart bars and diagram connectors */
.is-high-contrast .j-tally__bar { border: 1px solid #fff; }
.is-high-contrast .j-tally__bar > span { background-color: #fff !important; }
.is-high-contrast .j-flow__step::after,
.is-high-contrast .j-flow__hub::after { width: 2px; background-color: #fff !important; }
/* The "site colors" sample keeps showing the site's colors */
.is-high-contrast .j-acs-sample,
.is-high-contrast .j-acs-sample * { background-color: var(--sample-bg) !important; color: var(--sample-fg) !important; }
.is-high-contrast .j-acs-sample u { color: var(--sample-link) !important; }
.is-high-contrast .j-acs-sample--contrast { border: 1px solid #fff; }
/* Theme picker: the dot and swatches keep showing each theme's colors */
.is-high-contrast .j-palette__menu { border: 1px solid #fff; }
.is-high-contrast .j-palette__dot { background-color: var(--accent) !important; border: 1px solid #fff; }
.is-high-contrast .j-palette__swatch--laranja { background-image: linear-gradient(135deg, #ff3d0f 0 50%, #262626 50% 100%) !important; border: 1px solid #fff; }
.is-high-contrast .j-palette__swatch--mostarda { background-image: linear-gradient(135deg, #141414 0 50%, #f5c800 50% 100%) !important; border: 1px solid #fff; }
.is-high-contrast .j-palette__swatch--mostarda-light { background-image: linear-gradient(135deg, #f5c800 0 50%, #262626 50% 100%) !important; border: 1px solid #fff; }
.is-high-contrast .j-palette__swatch--grafite { background-image: linear-gradient(135deg, #121212 0 50%, #d4d4d4 50% 100%) !important; border: 1px solid #fff; }
.is-high-contrast .j-palette__swatch--grafite-light { background-image: linear-gradient(135deg, #d4d4d4 0 50%, #111310 50% 100%) !important; border: 1px solid #fff; }
.is-high-contrast .j-palette__swatch--blueprint { background-image: linear-gradient(135deg, #1d4f9e 0 50%, #ffffff 50% 100%) !important; border: 1px solid #fff; }
/* Accessibility page: meter steps, moving stripe and bar pins drawn in white */
.is-high-contrast .j-acs-level span:nth-child(1),
.is-high-contrast[data-text-size] .j-acs-level span:nth-child(2),
.is-high-contrast:is([data-text-size="2"], [data-text-size="3"]) .j-acs-level span:nth-child(3),
.is-high-contrast[data-text-size="3"] .j-acs-level span:nth-child(4) { background-color: #fff !important; }
.is-high-contrast .j-acs-motion { background-image: repeating-linear-gradient(-45deg, #fff 0 12px, transparent 12px 28px) !important; }
.is-high-contrast .j-acs-bar i,
.is-high-contrast .j-acs-defs li::before { border: 1px solid #fff; }
/* Essay card and architecture essay: drawings, notes and connectors in white */
.is-high-contrast :is(.j-essay-card__ctx, .j-essay-card__link) { stroke: #fff !important; }
.is-high-contrast .j-essay-card__ctx--core { fill: #fff !important; }
.is-high-contrast :is(.j-storm__note, .j-ctx__box, .j-ctx__swatch, .j-storm__legend i, .j-book__cover) { border: 1px solid #fff; }
.is-high-contrast .j-storm__line::before { background-color: #fff !important; }
.is-high-contrast .j-ctx__edge::before { background: #fff !important; width: 2px; }
.is-high-contrast .j-essay-card__label { fill: #fff !important; }
.is-high-contrast .j-essay-card__label--core { fill: #000 !important; }

/* The wordmark takes the theme's accent on dark pages; on light ones the page is the accent, so it stays inked */
.is-dark .j-wordmark__logo { color: var(--accent); }