/* content.css */
/* Page-level styles only: the links the marking engine inserts, the marks next to headings, and the page frame.
   Everything else lives in the Shadow DOM. */
a.eureka-link { color: var(--eureka-link-color, #3366cc); text-decoration: var(--eureka-link-decoration, none); cursor: pointer; }
a.eureka-link:hover { text-decoration: underline; }
/* EUR-Lex outlines every focused link; after a mouse click that rectangle would stay until the next click. Keyboard focus keeps it. */
a.eureka-link:focus:not(:focus-visible) { outline: none; }

/* The page frame (TESTING.md 1.4), as eureka-live did it (sites/eur-lex/eur-lex.js addSideBar): EUR-Lex's body margins
   and its centred, grey-banded column go and the text gets 50 px of air on both sides (.docHTMLpadding), whether the
   sidebar is open or hidden (the owner, round 3: Hide brought the grey bands back with the text touching them, since
   EUR-Lex's own TOC column, which gave the text its margin, is gone). The class eureka-page is set where that TOC is
   removed (layout.ts removeEurLexToc). While the sidebar is open the page also makes room on the right, and the sidebar
   casts a soft shade on the text (its own box-shadow); that hangs on eureka-sidebar-open, so Hide undoes it. */
html.eureka-sidebar-open { margin-right: var(--eureka-sidebar-width, 30%); }
html.eureka-page body { margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; background-color: #fff; }
html.eureka-page .Wrapper { margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; width: auto !important; background-color: #fff; position: relative; z-index: 1; }
html.eureka-page #docHtml { padding-left: 50px !important; padding-right: 50px !important; }
/* the legacy removed #docHtml's Bootstrap column class; undo what it sets instead */
html.eureka-page #docHtml.col-md-9 { width: auto !important; float: none !important; max-width: none !important; flex: none !important; }
/* Printing (TESTING.md 2.19): no sidebar, no collapsed tab, and the text gets the page's full width back. */
@media print {
  #eureka-host { display: none !important; }
  html.eureka-sidebar-open { margin-right: 0 !important; }
  html.eureka-page #docHtml { padding-left: 0 !important; padding-right: 0 !important; }
}

/* Terms with a translation notice (PLAN.md 4.5.e): the underline per severity and a small notice icon (Material
   "error": an exclamation mark in a circle, sidebar/icons.tsx NOTICE_PATH) raised after the term, never colour only.
   Not the "translate" icon, which is the cards' Compare languages button (owner, round 4: one icon, one meaning).
   The link's title says what it means before a click (mark.ts, app.tsx buildMarkTerms). */
a.eureka-link.eureka-notice-high, a.eureka-link.eureka-notice-medium, a.eureka-link.eureka-notice-low { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; }
a.eureka-link.eureka-notice-high { text-decoration-color: #b42318; text-decoration-style: solid; }
a.eureka-link.eureka-notice-medium { text-decoration-color: #a26a12; text-decoration-style: dashed; }
a.eureka-link.eureka-notice-low { text-decoration-color: #5b3d8f; text-decoration-style: dotted; }
a.eureka-link[class*="eureka-notice-"]::after {
  content: ""; display: inline-block; width: .8em; height: .8em; margin-left: 2px; vertical-align: super;
  background-color: #5b3d8f;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%20-960%20960%20960'%3E%3Cpath%20fill-rule%3D'evenodd'%20d%3D'M480-280q17%200%2028.5-11.5T520-320q0-17-11.5-28.5T480-360q-17%200-28.5%2011.5T440-320q0%2017%2011.5%2028.5T480-280Zm-40-160h80v-240h-80v240Zm40%20360q-83%200-156-31.5T197-197q-54-54-85.5-127T80-480q0-83%2031.5-156T197-763q54-54%20127-85.5T480-880q83%200%20156%2031.5T763-763q54%2054%2085.5%20127T880-480q0%2083-31.5%20156T763-197q-54%2054-127%2085.5T480-80Z'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%20-960%20960%20960'%3E%3Cpath%20fill-rule%3D'evenodd'%20d%3D'M480-280q17%200%2028.5-11.5T520-320q0-17-11.5-28.5T480-360q-17%200-28.5%2011.5T440-320q0%2017%2011.5%2028.5T480-280Zm-40-160h80v-240h-80v240Zm40%20360q-83%200-156-31.5T197-197q-54-54-85.5-127T80-480q0-83%2031.5-156T197-763q54-54%20127-85.5T480-880q83%200%20156%2031.5T763-763q54%2054%2085.5%20127T880-480q0%2083-31.5%20156T763-197q-54%2054-127%2085.5T480-80Z'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
a.eureka-link.eureka-notice-high::after { background-color: #b42318; }
a.eureka-link.eureka-notice-medium::after { background-color: #a26a12; }
/* A negated term ("non-cross-border users" for "cross-border user", PLAN.md 4.5.l) looks like any other link: no
   mark in the text (owner 2026-10-10: the raised not-equal sign was removed); the link's title and aria-label say it means the opposite
   of the defined term, and the card says so at the top. */
/* Printing (TESTING.md 2.19): links print as the text around them, no marks, no highlight. !important and the doubled
   class: EUR-Lex's own link rules (Bootstrap's a:hover / a:focus colours, same specificity as a.eureka-link) win ties
   over an extension's stylesheet, and a link that has the focus after a click kept its colour in the print preview. */
@media print {
  a.eureka-link.eureka-link, a.eureka-link.eureka-link:link, a.eureka-link.eureka-link:visited, a.eureka-link.eureka-link:hover, a.eureka-link.eureka-link:focus {
    color: inherit !important; text-decoration: none !important; outline: none !important; background: none !important; cursor: auto;
  }
  a.eureka-link.eureka-link::after, a.eureka-link.eureka-link::before { display: none !important; }
  .eureka-mark.eureka-mark { display: none !important; }
  .eureka-highlight.eureka-highlight { background-color: transparent !important; outline: none !important; }
}

/* The target of a deep link or of a card's link icon, for 2.5 s. */
.eureka-highlight { background-color: rgba(255, 213, 79, 0.45); outline: 2px solid rgba(162, 106, 18, 0.6); outline-offset: 2px; transition: background-color .4s; }
@media (prefers-reduced-motion: reduce) { .eureka-highlight { transition: none; } }

/* Next to an article heading (owner 2026-10-14): only the article info button (i) and the share mark after it, two
   circles of one size and stroke (sidebar/icons.tsx ringMark), the (i) 6 px after the heading's text, the share mark
   6 px after the (i). Buttons without text of their own (the glyphs are SVGs), so the heading's text, which the locator
   reads, stays as it is. Grey (#667085 on white, 4.8:1), the brand blue (#0086C9) on hover, focus and while open.
   On the heading's line: inline-flex boxes with line-height 0 and no taller than the line, so the line keeps its
   height; vertical-align: middle puts the box's centre on the x-height's middle, and translateY(-0.105em) of the
   heading's font size lifts it to the middle of the capitals' height ("Article 17"; Georgia (cap .693, x .481 em),
   Times New Roman (.662, .448) and the Pi's DejaVu / Liberation Serif all measure .10-.11 em in Chromium, 2026-10-14). */
button.eureka-mark {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 20px; height: 20px;
  margin: 0 0 0 6px; padding: 0; vertical-align: middle; position: relative; top: 0; transform: translateY(-0.105em);
  cursor: pointer; font-size: inherit; line-height: 0; letter-spacing: 0; text-transform: none; text-indent: 0;
  color: #667085; background: transparent; border: 0; border-radius: 50%;
}
button.eureka-mark svg { display: block; flex: none; width: 20px; height: 20px; overflow: visible; }
/* the brand blue on hover and focus and while open (the popover, the share panel); the sidebar's focus ring */
button.eureka-mark:hover, button.eureka-mark:focus-visible, button.eureka-mark[aria-expanded="true"] { color: #0086C9; }
button.eureka-mark:focus-visible { outline: 2px solid #0086C9; outline-offset: 2px; }
/* The article info button (content/articleinfo.tsx): the information symbol (circle, dot, stem); a red disc with a
   white glyph when a corrigendum corrects the article (#b42318, white on it 6.5:1; its label says so too), a darker
   red while open or under the pointer. */
button.eureka-mark-info.eureka-info-corrected, button.eureka-mark-info.eureka-info-corrected:focus-visible { color: #b42318; }
button.eureka-mark-info.eureka-info-corrected:hover, button.eureka-mark-info.eureka-info-corrected[aria-expanded="true"] { color: #8c1c13; }
button.eureka-mark-info.eureka-info-corrected .eureka-mark-ring { fill: currentColor; }
button.eureka-mark-info.eureka-info-corrected .eureka-mark-glyph { stroke: #ffffff; }
/* its popover: under the heading, in the page (positioned by script at the end of <body>), above the text and below
   the sidebar; system font, EUR-Lex's own rules undone where they reach (buttons, lists, headings) */
.eureka-article-popover {
  position: absolute; z-index: 2147482000; box-sizing: border-box; max-width: calc(100vw - 16px); padding: 10px 12px 12px;
  background: #ffffff; color: #1d2939; border: 1px solid #d0d5dd; border-radius: 10px; box-shadow: 0 8px 24px rgba(16, 24, 40, .18);
  font: 400 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; text-align: left; text-indent: 0;
}
.eureka-article-popover:focus { outline: none; }
.eureka-article-popover .eureka-pop-head { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.eureka-article-popover .eureka-pop-title { flex: 1; margin: 0; padding: 0; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.3; color: #475467; text-transform: none; letter-spacing: 0; }
.eureka-article-popover button { font: inherit; letter-spacing: 0; text-transform: none; margin: 0; cursor: pointer; }
.eureka-article-popover .eureka-pop-close { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 14px; background: transparent; color: #475467; font-size: 20px; line-height: 28px; }
.eureka-article-popover .eureka-pop-close:hover { background: #f2f4f7; color: #1d2939; }
.eureka-article-popover .eureka-pop-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.eureka-article-popover .eureka-pop-rows li { margin: 0; padding: 0; list-style: none; }
.eureka-article-popover .eureka-pop-rows li::before { content: none; }
.eureka-article-popover .eureka-pop-row {
  display: flex; align-items: baseline; gap: 8px; width: 100%; min-height: 32px; padding: 6px 8px; box-sizing: border-box;
  border: 0; border-radius: 6px; background: transparent; color: #0073ad; font-weight: 600; text-align: left;
}
.eureka-article-popover .eureka-pop-row:hover { background: #e0f2fe; color: #005f8f; }
.eureka-article-popover .eureka-pop-corrected { color: #b42318; }
.eureka-article-popover .eureka-pop-corrected:hover { background: #fff1f0; color: #8c1c13; }
.eureka-article-popover .eureka-pop-icon { flex: none; width: 16px; text-align: center; font-weight: 700; }
.eureka-article-popover button:focus-visible { outline: 2px solid #1f5fbf; outline-offset: 2px; }
/* the cards' language picker (sidebar/components/Card.tsx LanguagePicker), here with flags */
.eureka-article-popover .compare-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 8px; padding: 8px; border-radius: 6px; background: #f2f4f7; }
.eureka-article-popover .compare-picker-label { width: 100%; font-size: 12px; font-weight: 600; color: #475467; }
.eureka-article-popover .lang-chip {
  display: inline-flex; align-items: center; gap: 4px; min-width: 44px; height: 28px; padding: 0 6px; box-sizing: border-box;
  border: 1px solid #d0d5dd; border-radius: 14px; background: #ffffff; color: #1d2939; font-size: 12px; font-weight: 600;
}
.eureka-article-popover .lang-chip:hover { border-color: #0073ad; color: #0073ad; }
.eureka-article-popover .lang-chip.on { background: #0073ad; border-color: #0073ad; color: #ffffff; }
.eureka-article-popover .lang-flag { display: block; width: 18px; height: 12px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); }
.eureka-article-popover .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* The article compare (owner 2026-10-13, 2026-10-14; content/articlecompare.ts): the article (its #art_N wrapper, or a
   new row around the heading and its text) as columns side by side, the original first, each other language under its
   code and a close button. The row: the chip bar (sticky at its top), then the scroller of the columns (a snap point at
   each, a thin scrollbar). Every column, the original too, has ONE width (owner 2026-10-14):
   min(100%, max(560px, (the row - the gaps) / the number of columns)), the count in --eureka-acmp-n: two languages share
   a laptop's ~1200 px (588 px each), three or four an ultra-wide screen, more scroll at 560 px. Nothing inside can widen
   a column (min-width 0, long words break, tables and images at most its width); the same 16 px rule-and-gutter on
   each. On phones 90 % of the row each (web.css). The width in --eureka-acmp-col, for the flowing columns and the grid.
   Aligned rows (owner 2026-10-14): when the article splits into units (articleunits.ts), the scroller is a grid
   (.eureka-acmp-grid): one track per column of that width, the header row, then one auto row per unit key; each
   column's cell spans every row (its rule, its snap point) and the units' cells (.eureka-acmp-unit, placed inline) lie
   over it, inset by the rule and gutter, as flow roots so their margins stay inside and every cell of a row starts on
   its top line; a row is as tall as its tallest cell. */
.eureka-acmp-row { display: block; max-width: 100%; box-sizing: border-box;
  --eureka-acmp-col: min(100%, max(560px, calc((100% - (var(--eureka-acmp-n, 2) - 1) * 24px) / var(--eureka-acmp-n, 2)))); }
.eureka-acmp-scroll {
  display: flex; align-items: flex-start; gap: 24px; max-width: 100%; box-sizing: border-box;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; overscroll-behavior-x: contain;
}
.eureka-acmp-scroll > .eureka-acmp-cell {
  flex: 0 0 var(--eureka-acmp-col);
  min-width: 0; max-width: none; box-sizing: border-box; scroll-snap-align: start; overflow-wrap: anywhere;
  padding-left: 16px; border-left: 2px solid #e0f2fe;
}
.eureka-acmp-scroll.eureka-acmp-grid {
  display: grid; grid-template-columns: repeat(var(--eureka-acmp-n, 2), var(--eureka-acmp-col)); grid-auto-rows: auto;
  column-gap: 24px; row-gap: 0; align-items: stretch;
}
.eureka-acmp-grid > .eureka-acmp-cell { grid-row: 1 / -1; }
.eureka-acmp-grid > .eureka-acmp-unit { display: flow-root; min-width: 0; box-sizing: border-box; padding-left: 18px; overflow-wrap: anywhere; }
.eureka-acmp-cell table, .eureka-acmp-unit table { max-width: 100%; }
.eureka-acmp-cell img, .eureka-acmp-unit img { max-width: 100%; height: auto; }
/* the chips: one per column ("EN", "DE"), left-aligned, small; the columns in view highlighted (is-visible); a tap
   scrolls its column into view. Sticky at the row's top while the article scrolls by, on the page's white. */
.eureka-acmp-bar {
  position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 0; padding: 4px 0;
  background: #ffffff; font: 600 12px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; text-indent: 0;
}
button.eureka-acmp-chip {
  position: relative; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 36px; height: 22px;
  margin: 0; padding: 0 8px; border: 1px solid #d0d5dd; border-radius: 11px; background: #ffffff; color: #475467;
  font: inherit; letter-spacing: .04em; text-transform: none; cursor: pointer;
}
button.eureka-acmp-chip:hover { border-color: #0086C9; color: #005f8f; }
button.eureka-acmp-chip.is-visible { background: #e0f2fe; border-color: #7cd4fd; color: #005f8f; }
button.eureka-acmp-chip:focus-visible { outline: 2px solid #0086C9; outline-offset: 2px; }
.eureka-acmp-hint { margin: 2px 0 6px; color: #475467; font: 400 13px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; text-indent: 0; }
.eureka-acmp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; margin: 12px 0 4px;
  font: 600 12px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; text-indent: 0; }
.eureka-acmp-lang { padding: 1px 6px; border-radius: 9px; background: #e0f2fe; color: #005f8f; letter-spacing: .04em; }
button.eureka-acmp-close { width: 24px; height: 24px; margin: 0; padding: 0; border: 0; border-radius: 12px; background: transparent; color: #475467;
  font: 400 18px/24px system-ui, sans-serif; cursor: pointer; }
button.eureka-acmp-close:hover { background: #f2f4f7; color: #1d2939; }
button.eureka-acmp-close:focus-visible { outline: 2px solid #0086C9; outline-offset: 2px; }
.eureka-acmp-msg { margin: 8px 0; color: #475467; font: 400 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.eureka-acmp-error { color: #b42318; }
@media print {
  .eureka-article-popover, .eureka-acmp-col, .eureka-acmp-tr, .eureka-acmp-head, .eureka-acmp-bar, .eureka-acmp-hint { display: none !important; }
  .eureka-acmp-scroll { display: block !important; overflow: visible !important; }
  .eureka-acmp-orig, .eureka-acmp-unit { padding-left: 0 !important; border-left: 0 !important; }
}
/* Sharing (website/PLAN.md 11.7.a-b; owner 2026-10-14): the share mark is the (i)'s circle with the Material "share"
   glyph inside (button.eureka-mark above); open (aria-expanded, class is-open) while its panel is open in the sidebar
   (app.tsx shareMarksOpen). On EUR-Lex too: there it makes a eureka.legal link. */
button.eureka-mark-share.is-open { color: #0086C9; }

/* web.css */
/* The reader page's own styles (website/PLAN.md 11.3, 11.5), after content.css in dist/web/web.css. The page is the
   website's (or scripts/lex-spike.mjs's); the act keeps EUR-Lex's class names, so EUR-Lex's own act styles are not
   here: the act reads in the browser's defaults plus these. The phone layout (WL2, src/web/phone.ts) hangs on html.eureka-phone and the host's data-eureka-layout="phone". */
html.eureka-page body { margin: 0; font-family: Georgia, "Times New Roman", serif; line-height: 1.5; color: #1a1a1a; }
html.eureka-page #docHtml { max-width: 52em; margin: 0 auto; box-sizing: border-box; }
.eureka-lex-header { font-family: system-ui, sans-serif; padding: 10px 50px; border-bottom: 1px solid #ddd; display: flex; gap: 1em; align-items: baseline; flex-wrap: wrap; }
.eureka-lex-header .eureka-lex-brand { font-weight: 600; color: #3366cc; text-decoration: none; }
.eureka-lex-source { font-family: system-ui, sans-serif; font-size: .85em; color: #555; padding: 16px 50px 40px; border-top: 1px solid #ddd; }
#docHtml table { max-width: 100%; }
#docHtml img { max-width: 100%; height: auto; }
@media (max-width: 767px) {
  html.eureka-page #docHtml { padding-left: 16px !important; padding-right: 16px !important; }
  .eureka-lex-header, .eureka-lex-source { padding-left: 16px; padding-right: 16px; }
}

/* The phone layout (website/PLAN.md 11.5; src/web/phone.ts sets the class and the attribute below 768 px, Sheet.tsx is
   the sheet). The sidebar's host lies along the bottom, as tall as the sheet inside it; the page keeps its width and
   leaves room under the text for the sheet's 56 px bar. */
#eureka-host[data-eureka-layout="phone"] {
  top: auto !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: auto !important; height: auto !important;
}
html.eureka-phone { margin-right: 0 !important; }
html.eureka-phone body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
/* nothing wider than the screen: long words break, a table too wide scrolls inside itself */
html.eureka-phone #docHtml { overflow-wrap: anywhere; }
html.eureka-phone #docHtml table { display: block; max-width: 100%; overflow-x: auto; }
/* touch targets: a term or reference link is 44 px tall to the finger; vertical padding on an inline box changes no
   line, so the text does not move (and the desktop has none of it) */
html.eureka-phone a.eureka-link { padding-block: calc((44px - 1.2em) / 2); -webkit-tap-highlight-color: rgba(51, 102, 204, .15); }
/* the (i) and the share mark after an article heading: 28 px circles (owner 2026-10-14) in 44 px targets; negative
   margins keep the 6 px gaps and give the line no more than 20 px of height, so the heading's line does not grow
   (17 px text, 26 px lines); no hover look that would stick after a tap */
html.eureka-phone button.eureka-mark { width: 44px; height: 44px; margin: -12px -8px -12px -2px; }
html.eureka-phone button.eureka-mark svg { width: 28px; height: 28px; }
html.eureka-phone button.eureka-mark:hover { outline: none; }
html.eureka-phone button.eureka-mark:not([aria-expanded="true"]):not(:focus-visible):hover { color: #667085; }
html.eureka-phone button.eureka-mark-info.eureka-info-corrected:not([aria-expanded="true"]):hover { color: #b42318; }
/* the popover as wide as the screen allows with 44 px rows */
html.eureka-phone .eureka-article-popover .eureka-pop-row, html.eureka-phone .eureka-article-popover .lang-chip { min-height: 44px; }
html.eureka-phone .eureka-article-popover .eureka-pop-close { width: 44px; height: 44px; border-radius: 22px; }
/* the article compare on phones (owner 2026-10-14): no stacking; each column 90 % of the row, so the next language
   peeks in at the right edge; after the last one a spacer as wide as the rest (10 % less the gap), so the last too
   snaps to the row's start. The chips 32 px tall in 44 px targets; the swipe hint under them (articlecompare.ts). */
html.eureka-phone .eureka-acmp-scroll { gap: 16px; }
html.eureka-phone .eureka-acmp-scroll > .eureka-acmp-cell { flex: 0 0 90%; padding-left: 10px; }
html.eureka-phone .eureka-acmp-scroll::after { content: ""; flex: 0 0 calc(10% - 16px); align-self: stretch; }
/* aligned rows on phones: the same 90 % tracks and the spacer as a last track */
html.eureka-phone .eureka-acmp-row { --eureka-acmp-col: 90%; }
html.eureka-phone .eureka-acmp-scroll.eureka-acmp-grid { column-gap: 16px; grid-template-columns: repeat(var(--eureka-acmp-n, 2), 90%) calc(10% - 16px); }
html.eureka-phone .eureka-acmp-grid::after { grid-column: -2 / -1; grid-row: 1; }
html.eureka-phone .eureka-acmp-grid > .eureka-acmp-unit { padding-left: 12px; }
html.eureka-phone .eureka-acmp-bar { gap: 8px; padding: 6px 0; }
html.eureka-phone button.eureka-acmp-chip { min-width: 44px; height: 32px; border-radius: 16px; padding: 0 12px; font-size: 14px; }
html.eureka-phone button.eureka-acmp-chip::after { content: ""; position: absolute; inset: -6px 0; }
html.eureka-phone button.eureka-acmp-chip:hover { border-color: #d0d5dd; color: #475467; }
html.eureka-phone button.eureka-acmp-chip.is-visible:hover { border-color: #7cd4fd; color: #005f8f; }
html.eureka-phone button.eureka-acmp-close { width: 44px; height: 44px; border-radius: 22px; }
/* The compared article on a desktop (owner 2026-10-14: "Adding a translation to Article 17 should not change how wide
   Article 16 goes"): the text column (#docHtml, 52em with 50 px of air on each side, content.css) keeps its width; only
   the row breaks out of it, centred on the column, to the reading area (the viewport less the open sidebar,
   --eureka-reading-width; the body is that wide since <html> makes room for the sidebar) less the same 50 px on each
   side, never narrower than the column and never so wide that one language gets more than the column's text width
   (52em - 100px each, plus the 24 px gaps); more columns than fit scroll inside the row (content.css). Phones keep the
   row at the column's width (above). */
html.eureka-page { --eureka-reading-width: 100vw; }
html.eureka-page.eureka-sidebar-open { --eureka-reading-width: calc(100vw - var(--eureka-sidebar-width, 0px)); }
html.eureka-page:not(.eureka-phone) #docHtml .eureka-acmp-row {
  --eureka-acmp-w: max(100%, min(calc(var(--eureka-reading-width, 100%) - 100px),
    calc(var(--eureka-acmp-n, 2) * (52em - 100px) + (var(--eureka-acmp-n, 2) - 1) * 24px)));
  width: var(--eureka-acmp-w); max-width: none; margin-left: calc((100% - var(--eureka-acmp-w)) / 2);
}
@media print { html.eureka-page #docHtml .eureka-acmp-row { width: auto !important; margin-left: 0 !important; } }
/* no hover on a touch screen: the underline would stick after a tap */
@media (hover: none) {
  html.eureka-phone a.eureka-link:not([class*="eureka-notice-"]):hover { text-decoration: var(--eureka-link-decoration, none); }
}