:root {
  --bg: #f4f2ee;
  --surface: #ffffff;
  --surface-2: #faf9f6;
  --ink: #1c1f24;
  --ink-2: #4a505a;
  --ink-3: #7a808a;
  --line: #e2ded6;
  --line-2: #ece9e3;
  --accent: #1d3a6b;
  --accent-2: #2f5aa8;
  --accent-soft: #e8eef8;
  /* authority tags: ESMA navy, the EBA red, the ECB teal, the ESAs jointly violet */
  --auth-esma: #1d3a6b; --auth-esma-bg: #e8eef8; --auth-esma-line: #c9d5ea; --auth-eba: #8f1d1d; --auth-eba-bg: #f8eaea; --auth-eba-line: #ebcaca;
  --auth-ecb: #0f5c5c; --auth-ecb-bg: #e3f2f1; --auth-ecb-line: #bfdedb; --auth-joint: #5b3a8c; --auth-joint-bg: #f0eaf8; --auth-joint-line: #d9cdec;
  --hl: #fff4c7;
  --hl-line: #e6b400;
  --ok: #2e7d4f;
  --warn: #9a5b00;
  --warn-soft: #fbf0dc;
  --chip: #eef0f3;
  --shadow: 0 1px 2px rgba(20, 25, 35, .06);
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15171b; --surface: #1c1f24; --surface-2: #20242a; --ink: #e7e9ec; --ink-2: #b4b9c1; --ink-3: #848a94;
    --line: #2e333b; --line-2: #262a31; --accent: #9dbbf0; --accent-2: #b8cdf5; --accent-soft: #23304a;
    --auth-esma: #a9c2f2; --auth-esma-bg: #1f2a40; --auth-esma-line: #2e3d5c; --auth-eba: #f0a3a3; --auth-eba-bg: #3a1f22; --auth-eba-line: #57302f;
    --auth-ecb: #8fd6cf; --auth-ecb-bg: #17312f; --auth-ecb-line: #24504c; --auth-joint: #c9b2ef; --auth-joint-bg: #2b2340; --auth-joint-line: #42355f;
    --hl: #3d3517; --hl-line: #c99b10; --ok: #6fc193; --warn: #e2a64a; --warn-soft: #3a2e1a; --chip: #2a2f37;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #15171b; --surface: #1c1f24; --surface-2: #20242a; --ink: #e7e9ec; --ink-2: #b4b9c1; --ink-3: #848a94;
  --line: #2e333b; --line-2: #262a31; --accent: #9dbbf0; --accent-2: #b8cdf5; --accent-soft: #23304a;
    --auth-esma: #a9c2f2; --auth-esma-bg: #1f2a40; --auth-esma-line: #2e3d5c; --auth-eba: #f0a3a3; --auth-eba-bg: #3a1f22; --auth-eba-line: #57302f;
    --auth-ecb: #8fd6cf; --auth-ecb-bg: #17312f; --auth-ecb-line: #24504c; --auth-joint: #c9b2ef; --auth-joint-bg: #2b2340; --auth-joint-line: #42355f;
  --hl: #3d3517; --hl-line: #c99b10; --ok: #6fc193; --warn: #e2a64a; --warn-soft: #3a2e1a; --chip: #2a2f37;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--ink); font: 14px/1.45 var(--sans); display: flex; flex-direction: column; overflow: hidden; }
button { font: inherit; color: inherit; }
a { color: var(--accent-2); }

/* ---------- top bar ---------- */
.topbar { display: flex; align-items: center; gap: 12px; padding: 0 14px; height: 46px; background: var(--surface); border-bottom: 1px solid var(--line); flex: none; }
.brand { font-weight: 700; letter-spacing: -.01em; color: var(--accent); white-space: nowrap; }
.misp-link, .sx-link { font-weight: 600; color: var(--accent); border-color: color-mix(in srgb, var(--accent-2) 45%, transparent); flex: none; }
.crumbs { color: var(--ink-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.crumbs b { color: var(--ink); font-weight: 600; }
.topbar-note { margin-left: auto; color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.icon-btn { border: 1px solid var(--line); background: var(--surface); border-radius: 7px; width: 32px; height: 30px; display: grid; place-items: center; cursor: pointer; color: var(--ink-2); flex: none; }
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }

.app { flex: 1; display: flex; min-height: 0; }

/* ---------- sidebar ---------- */
#sidebar { width: 232px; flex: none; background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
body.sidebar-collapsed #sidebar { display: none; }
.side-search { padding: 8px; border-bottom: 1px solid var(--line-2); display: flex; gap: 6px; align-items: center; }
.side-search .icon-btn.small { width: 26px; height: 30px; font-size: 15px; }
.side-search input { width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); color: var(--ink); font: inherit; }
/* the list: the three groups' headings fixed at its top, the open group's acts scrolling beneath them */
#act-list { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.grp { padding: 10px 12px 2px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.grp-tabs { flex: none; border-bottom: 1px solid var(--line); }
/* the remit switch: ESMA's or the EBA's acts, one always shown */
.grp-switch { flex: none; display: flex; margin: 8px 10px 4px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.grp-sw { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; border: 0; background: var(--surface-2); padding: 7px 6px;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; cursor: pointer;
  --rc: var(--auth-esma); --rc-bg: var(--auth-esma-bg); --rc-line: var(--auth-esma-line); }
.grp-sw[data-grp="eba"] { --rc: var(--auth-eba); --rc-bg: var(--auth-eba-bg); --rc-line: var(--auth-eba-line); }
.grp-sw + .grp-sw { border-left: 1px solid var(--line); }
.grp-sw:hover { color: var(--ink); background: var(--chip); }
/* (the chosen remit in its authority's colours, ESMA's navy or the EBA's red, with a line along its bottom) */
.grp-sw[aria-pressed="true"] { background: var(--rc-bg); color: var(--rc); box-shadow: inset 0 -2px 0 var(--rc); }
/* (each count a small tag in its authority's colours, like the [ESMA] and [EBA] tags in the lists) */
.grp-sw .grp-n { font-size: 11px; font-weight: 700; line-height: 17px; padding: 0 6px; border: 1px solid var(--rc-line); border-radius: 4px;
  background: var(--rc-bg); color: var(--rc); font-variant-numeric: tabular-nums; }
.grp-sw[aria-pressed="true"] .grp-n { background: var(--surface); }
.grp-tab { display: flex; align-items: center; gap: 6px; width: 100%; border: 0; background: none; text-align: left; font-family: inherit; padding: 9px 12px 7px; cursor: pointer; user-select: none; border-bottom: 1px solid var(--line-2); }
.grp-tab:last-child { border-bottom: 0; }
.grp-tab:hover { background: var(--surface-2); color: var(--ink-2); }
.grp-tab[aria-expanded="true"] { color: var(--accent); background: var(--accent-soft); }
.grp-tab .chev { display: inline-block; width: 10px; font-size: 10px; transition: transform .12s; }
.grp-tab[aria-expanded="true"] .chev { transform: rotate(90deg); }
.grp-tab .grp-n { margin-left: auto; font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.grp-list { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 0 20px; }
.grp-hint { padding: 12px; font-size: 12px; color: var(--ink-3); }
.grp-sub.grp-sub-h { padding: 10px 12px 3px; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }
.side-act { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 3px 12px 3px 10px; border-left: 3px solid transparent; cursor: pointer; }
.side-act:hover { background: var(--surface-2); }
.side-act[aria-current="true"] { background: var(--accent-soft); border-left-color: var(--accent); }
.side-act .n { display: block; font-size: 10.5px; line-height: 1.25; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.side-act .s { display: block; font-weight: 600; font-size: 13px; color: var(--ink); line-height: 1.3; }
.side-act .note { display: block; font-size: 10.5px; color: var(--warn); margin-top: 1px; }
/* the rules of procedure made under the ESMA Regulation, listed beneath it */
.grp-sub { padding: 6px 12px 1px 22px; font-size: 10.5px; font-weight: 600; color: var(--ink-3); }
.side-act.side-sub { padding-left: 22px; }
.side-act.side-sub .s { font-weight: 500; font-size: 12.5px; }

/* ---------- panes ---------- */
#panes { flex: 1; display: flex; min-width: 0; padding: 8px; gap: 0; }
.pane { flex: 1 1 0; min-width: 220px; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; }
.gutter { flex: none; width: 8px; cursor: col-resize; position: relative; }
.gutter::after { content: ''; position: absolute; left: 3px; top: 45%; height: 36px; width: 2px; border-radius: 2px; background: var(--line); }
.gutter:hover::after, .gutter.drag::after { background: var(--accent-2); }
body.dragging { cursor: col-resize; user-select: none; }

.pane-head { padding: 9px 12px 8px; border-bottom: 1px solid var(--line); background: var(--surface); flex: none; }
.pane-label { min-height: 22px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.pane-num { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; background: var(--accent); color: var(--surface); font-size: 10px; letter-spacing: 0; }
.pane-title { font-weight: 600; font-size: 14.5px; margin: 3px 0 0; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.pane-title .sub { display: block; font-weight: 400; color: var(--ink-2); font-size: 12.5px; }
.pane-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 7px; }
.pane-tools:empty { display: none; }
.pane-body { flex: 1; overflow-y: auto; min-height: 0; position: relative; scroll-behavior: auto; }
/* (scaled with the window's width on wide screens — app.js sets --pane-zoom — and centred in it: a window wider than
   its text shows it as a page with even margins, not a column against the left edge; app.js marks a window "wide" past
   960px, so a laptop's windows are left as they were) */
.pane-body > * { zoom: var(--pane-zoom, 1); }
.pane-body.wide > * { max-width: 900px; margin-left: auto; margin-right: auto; }
.pane-body > .pdf-pages, .pane-body.wide > .pdf-pages { zoom: 1; max-width: none; }

.btn { border: 1px solid var(--line); background: var(--surface); border-radius: 6px; padding: 3px 9px; font-size: 12.5px; cursor: pointer; color: var(--ink-2); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.btn:hover { color: var(--ink); background: var(--surface-2); }
.btn[disabled] { opacity: .4; cursor: default; }
.btn.on { background: var(--accent-soft); color: var(--accent); border-color: transparent; font-weight: 600; }
select.btn { padding-right: 4px; max-width: 220px; }
/* (a viewer's version and article pickers take the room the header has, so "Consolidated 05.06.2026 — latest" and an
   article's title are not cut short; what still does not fit ends in "…", the whole text on hover) */
.pane-tools select.btn { flex: 1 1 200px; max-width: 100%; min-width: 0; text-overflow: ellipsis; }
.pane-tools select.btn.ver { flex: 0 1 auto; }   /* (the version keeps its natural width; the article picker takes the rest) */
.badge { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 99px; background: var(--chip); color: var(--ink-2); white-space: nowrap; }
.badge.ok { color: var(--ok); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.sep { flex: 1; }

.tabs { display: flex; gap: 2px; margin-top: 8px; border-bottom: 1px solid var(--line-2); margin-bottom: -8px; }
.tabs button { border: 0; background: none; padding: 6px 10px 7px; cursor: pointer; font-size: 13px; color: var(--ink-2); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

/* ---------- states ---------- */
.empty { padding: 28px 22px; color: var(--ink-2); max-width: 520px; }
.empty h3 { margin: 0 0 6px; font-size: 15px; color: var(--ink); }
.empty p { margin: 6px 0; }
.empty ul { padding-left: 18px; margin: 6px 0; }
.loading { padding: 24px; color: var(--ink-3); display: flex; gap: 10px; align-items: center; }
/* the loading indicator: the EU flag, its ring of twelve stars turning */
.loading::before { content: ''; flex: none; width: 33px; height: 22px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 36 24'><defs><polygon id='s' points='0.00,-2.30 0.56,-0.77 2.19,-0.71 0.90,0.29 1.35,1.86 0.00,0.95 -1.35,1.86 -0.90,0.29 -2.19,-0.71 -0.56,-0.77'/></defs><rect width='36' height='24' rx='2.2' fill='%23039'/><g fill='%23fc0'><use href='%23s' x='18.00' y='3.80'/><use href='%23s' x='22.10' y='4.90'/><use href='%23s' x='25.10' y='7.90'/><use href='%23s' x='26.20' y='12.00'/><use href='%23s' x='25.10' y='16.10'/><use href='%23s' x='22.10' y='19.10'/><use href='%23s' x='18.00' y='20.20'/><use href='%23s' x='13.90' y='19.10'/><use href='%23s' x='10.90' y='16.10'/><use href='%23s' x='9.80' y='12.00'/><use href='%23s' x='10.90' y='7.90'/><use href='%23s' x='13.90' y='4.90'/><animateTransform attributeName='transform' type='rotate' from='0 18 12' to='360 18 12' dur='4s' repeatCount='indefinite'/></g></svg>") center / 100% 100% no-repeat; }
@media (prefers-reduced-motion: reduce) { .loading::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 36 24'><defs><polygon id='s' points='0.00,-2.30 0.56,-0.77 2.19,-0.71 0.90,0.29 1.35,1.86 0.00,0.95 -1.35,1.86 -0.90,0.29 -2.19,-0.71 -0.56,-0.77'/></defs><rect width='36' height='24' rx='2.2' fill='%23039'/><g fill='%23fc0'><use href='%23s' x='18.00' y='3.80'/><use href='%23s' x='22.10' y='4.90'/><use href='%23s' x='25.10' y='7.90'/><use href='%23s' x='26.20' y='12.00'/><use href='%23s' x='25.10' y='16.10'/><use href='%23s' x='22.10' y='19.10'/><use href='%23s' x='18.00' y='20.20'/><use href='%23s' x='13.90' y='19.10'/><use href='%23s' x='10.90' y='16.10'/><use href='%23s' x='9.80' y='12.00'/><use href='%23s' x='10.90' y='7.90'/><use href='%23s' x='13.90' y='4.90'/></g></svg>"); } }
@keyframes spin { to { transform: rotate(360deg); } }
.error { margin: 16px; padding: 12px 14px; border-radius: 8px; background: var(--warn-soft); color: var(--warn); }

/* ---------- legal text ---------- */
.doc { font-family: var(--serif); font-size: 15px; line-height: 1.55; padding: 18px 22px 60px; color: var(--ink); max-width: 860px; }
.doc p { margin: 0 0 .6em; }
.doc table { border-collapse: collapse; max-width: 100%; }
.doc td, .doc th { vertical-align: top; padding: 2px 6px 2px 0; }
.doc img { max-width: 100%; }
.doc hr { border: 0; border-top: 1px solid var(--line); }
.doc .hd-date, .doc .hd-lg, .doc .hd-ti, .doc .hd-oj, .doc .oj-hd-date, .doc .oj-hd-lg, .doc .oj-hd-ti, .doc .oj-hd-oj { font-family: var(--sans); font-size: 12px; color: var(--ink-3); margin: 0; }
.doc .title-doc-first, .doc .title-doc-last, .doc .oj-doc-ti, .doc .doc-ti { text-align: center; font-weight: 600; font-size: 16px; margin: .4em 0; }
.doc .title-doc-oj-reference, .doc .reference, .doc .hd-modifiers, .doc .disclaimer { font-family: var(--sans); font-size: 12px; color: var(--ink-3); }
.doc .title-division-1, .doc .oj-ti-section-1, .doc .ti-section-1, .doc .title-annex-1, .doc .oj-ti-grseq-1, .doc .ti-grseq-1 { text-align: center; font-weight: 600; margin: 1.6em 0 .2em; letter-spacing: .02em; }
.doc .title-division-2, .doc .oj-ti-section-2, .doc .ti-section-2, .doc .title-annex-2 { text-align: center; font-style: italic; margin: 0 0 1em; }
.doc .title-article-norm, .doc .oj-ti-art, .doc .ti-art { text-align: center; font-style: italic; margin: 1.5em 0 .1em; }
.doc .stitle-article-norm, .doc .oj-sti-art, .doc .sti-art { text-align: center; font-weight: 600; margin: 0 0 .7em; }
.doc .norm { margin: 0 0 .55em; }
.doc .no-parag { float: left; min-width: 1.9em; }
.doc .inline-element { display: block; overflow: hidden; }
.doc .grid-container { display: grid; grid-template-columns: 2.4em 1fr; margin: .15em 0 .45em; }
.doc .grid-list-column-1 { grid-column: 1; }
.doc .grid-list-column-2 { grid-column: 2; }
.doc .modref, .doc .arrow { font-family: var(--sans); font-size: 11px; color: var(--ink-3); margin: .2em 0; }
.doc .modref a, .doc a.native { color: var(--ink-3); text-decoration: none; }
/* an article the consolidated text has deleted (markDeletedArticles): its number and title in grey, and what deleted it */
.doc .art-deleted .art-head, .doc .art-deleted .del-title { color: var(--ink-3); }
.doc .art-deleted .del-title:empty { display: none; }
/* "Share current view": the link, and what it opens */
.share-pop { position: fixed; z-index: 130; width: 430px; max-width: calc(100vw - 16px); padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 14px 40px rgba(20, 25, 35, .22); font: 13px/1.5 var(--sans); color: var(--ink); }
.share-pop[hidden] { display: none; }
.share-pop .share-t { font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.share-pop .share-t:last-child { margin-bottom: 0; }
.share-pop.empty { width: auto; }   /* (only "Nothing to share yet": as wide as that) */
.share-pop .share-list { display: grid; gap: 5px; margin-bottom: 10px; }
.share-pop .share-n { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 8px; border-radius: 5px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; }
.share-pop .share-row { display: flex; gap: 6px; }
.share-pop .share-url { flex: 1; min-width: 0; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); color: var(--ink-2); font: 12px ui-monospace, monospace; }
.share-pop .share-note { margin-top: 9px; color: var(--ink-3); font-size: 12px; }
/* the card on an amendment marker (▼M5 …): which act changed the text, how, and links */
.mark-card { position: fixed; z-index: 120; width: 310px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 10px 30px rgba(20, 25, 35, .2); font: 12.5px/1.45 var(--sans); color: var(--ink); }
.mark-card[hidden] { display: none; }
.mark-card .mc-head { font-weight: 600; margin-bottom: 3px; }
.mark-card .mc-key { margin-top: 6px; color: var(--ink-3); font-size: 11.5px; }
.mark-card .mc-links { margin-top: 6px; }
.doc .del-box { margin: 8px auto 4px; max-width: 30em; padding: 8px 12px; border: 1px dashed var(--line); border-radius: 8px; background: var(--surface-2); font: 13px/1.5 var(--sans); color: var(--ink-2); text-align: center; }
.doc .boldface, .doc .bold, .doc .oj-bold { font-weight: 600; }
.doc .italics, .doc .italic, .doc .oj-italic { font-style: italic; }
.doc .superscript, .doc .super, .doc .oj-super { vertical-align: super; font-size: .72em; }
.doc .footnote, .doc .note, .doc .oj-note { font-size: 12.5px; color: var(--ink-2); }
.doc .coj-normal, .doc .coj-count { margin: 0 0 .6em; }
.doc .coj-count { font-weight: 600; }

/* article affordances */
.doc .art-head { cursor: pointer; border-radius: 5px; transition: background .12s; }
.doc .art-head:hover { background: var(--accent-soft); color: var(--accent); }
.doc .art-head::after { content: ' ↗'; font-style: normal; font-family: var(--sans); font-size: 11px; color: var(--ink-3); opacity: 0; }
.doc .art-head:hover::after { opacity: 1; }
/* the article in focus: a slim, soft rail that fades out at both ends, instead of a hard bar */
.doc .art-block { position: relative; }
.doc .art-block.selected::before { content: ''; position: absolute; left: -16px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(to bottom, transparent 0, color-mix(in srgb, var(--accent) 65%, transparent) 14%, color-mix(in srgb, var(--accent) 65%, transparent) 86%, transparent 100%); }
.doc .art-block.flash { animation: flash 1.8s ease-out; }
@keyframes flash { 0% { background: var(--hl); } 100% { background: transparent; } }
.doc .para-hit { background: var(--hl); box-shadow: -8px 0 0 -5px var(--hl-line); border-radius: 3px; }

a.xref { color: var(--accent-2); text-decoration: none; border-bottom: 1px dotted currentColor; cursor: pointer; }
a.xref:hover { background: var(--accent-soft); border-bottom-style: solid; }
a.xref.act { border-bottom-style: solid; border-bottom-color: color-mix(in srgb, var(--accent-2) 35%, transparent); }

/* focused-article view in pane 2 */
.focus-banner { font-family: var(--sans); font-size: 12.5px; color: var(--ink-2); background: var(--surface-2); border-bottom: 1px solid var(--line-2); padding: 7px 22px; display: flex; gap: 8px; align-items: center; position: sticky; top: 0; z-index: 1; }

/* ---------- pane 3 lists ---------- */
.p3-ctx { padding: 10px 14px; border-bottom: 1px solid var(--line-2); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12.5px; color: var(--ink-2); background: var(--surface-2); }
.p3-ctx b { color: var(--ink); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.seg button { border: 0; background: var(--surface); padding: 3px 9px; font-size: 12px; cursor: pointer; color: var(--ink-2); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.chk { display: inline-flex; gap: 5px; align-items: center; font-size: 12px; cursor: pointer; }
.list { list-style: none; margin: 0; padding: 0; }
.list > .l2-head { margin: 14px 0 2px; padding: 0 14px 5px; border-bottom: 1px solid var(--line); font-size: 11.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-3); }
.list > .l2-head:first-child { margin-top: 4px; }
.item { padding: 11px 14px; border-bottom: 1px solid var(--line-2); }
.item:hover { background: var(--surface-2); }
.item .top { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.item .case { font-weight: 700; color: var(--ink); }
.item .date { color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; margin-left: auto; }
.item .parties { font-weight: 600; margin: 3px 0 2px; line-height: 1.35; }
.item .parties a { color: var(--ink); text-decoration: none; }
.item .parties a:hover { color: var(--accent-2); text-decoration: underline; }
.item .kw { color: var(--ink-2); font-size: 12.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.item .kw.open { -webkit-line-clamp: unset; }
.item .meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; align-items: center; }
.chip { font-size: 11.5px; padding: 1px 7px; border-radius: 5px; background: var(--chip); color: var(--ink-2); border: 0; cursor: default; white-space: nowrap; }
.chip.match { background: var(--hl); color: var(--ink); font-weight: 600; }
/* "cites parent Art. 17": the same yellow, outlined — its text cites the article (or paragraph) the provision is part of */
/* "close in meaning": neutral and dashed — the site's own inference, the weakest reason a document is listed */
.chip.near { background: transparent; color: var(--ink-3); border: 1px dashed var(--ink-3); padding: 0 6px; }
.chip.qa-deleted { background: var(--warn-soft); color: var(--warn); font-weight: 600; }
/* (an infringement case for failing to transpose a directive: grey, a caution about what kind of case it is) */
.chip.transpo { background: var(--chip); color: var(--ink-3); font-style: italic; }
/* (the text of a form EUR-Lex prints as an image, opened in its place by "Text of image" or by Find) */
.img-text { margin: 6px 0 14px; padding: 8px 12px; background: var(--surface-2); border-left: 3px solid var(--line); }
.chip.match.parent { background: transparent; box-shadow: inset 0 0 0 1px var(--hl-line, #e0c45c); font-weight: 500; }
button.chip { cursor: pointer; }
button.chip:hover { background: var(--accent-soft); color: var(--accent); }
.kind { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; }
.kind.CJ { background: #dfe9fb; color: #1d3a6b; }
.kind.TJ { background: #e3f1e8; color: #1f5c3a; }
.kind.CC { background: #f1e6f7; color: #5a2a73; }
.kind.CO, .kind.TO { background: #eef0f3; color: #4a505a; }
:root[data-theme="dark"] .kind, :root:not([data-theme="light"]) .kind { filter: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kind { background: var(--chip); color: var(--ink-2); } }
.item .links { display: flex; gap: 10px; margin-top: 6px; font-size: 12px; }
.item .links a { text-decoration: none; }
.item .links a:hover { text-decoration: underline; }
.subhead { padding: 12px 14px 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); background: var(--surface); position: sticky; top: 0; z-index: 1; border-bottom: 1px solid var(--line-2); }
.notice { margin: 10px 14px; padding: 9px 12px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--ink-2); font-size: 12.5px; }
.hubs { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px 20px; }
.hubs a { font-size: 12px; text-decoration: none; padding: 4px 9px; border-radius: 6px; border: 1px solid var(--line); color: var(--ink-2); }
.hubs a:hover { color: var(--accent); border-color: var(--accent-2); }
.l3-doc .title { font-weight: 600; line-height: 1.35; }
.l3-doc .title a { color: var(--ink); text-decoration: none; }
.l3-doc .title a:hover { color: var(--accent-2); text-decoration: underline; }
.tag { font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 4px; background: #e3f1e8; color: #1f5c3a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tag { background: #1f3527; color: #8fd3aa; } }
.filter-in { flex: 1; min-width: 120px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; font-size: 12.5px; }
.art-row { display: flex; gap: 8px; align-items: baseline; width: 100%; text-align: left; border: 0; background: none; padding: 7px 14px; cursor: pointer; border-bottom: 1px solid var(--line-2); }
.art-row:hover { background: var(--surface-2); }
.art-row .lbl { flex: 1; }
.art-row .tags { display: flex; gap: 3px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- recitals restored into consolidated texts ---------- */
.doc .recitals-box { margin: 14px 0 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.doc .recitals-box > summary { cursor: pointer; padding: 9px 12px; font-family: var(--sans); font-size: 13px; list-style: none; }
.doc .recitals-box > summary::-webkit-details-marker { display: none; }
.doc .recitals-box > summary::before { content: '▸ '; color: var(--accent-2); }
.doc .recitals-box[open] > summary::before { content: '▾ '; }
.doc .recitals-note { color: var(--ink-3); font-size: 12px; }
.doc .recitals-body { padding: 4px 16px 10px; border-top: 1px solid var(--line-2); }
.doc .recitals-body td { padding: 2px 8px 2px 0; }
/* stepping through the recitals of the act as adopted and of each act that amended it, with that act's facts */
.doc .rct-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--line-2); font-family: var(--sans); }
.doc .rct-pick { flex: 1 1 auto; min-width: 0; max-width: 520px; height: 28px; padding: 0 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font: 13px var(--sans); }
.doc .rct-step { flex: none; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--accent); font: 600 16px/1 var(--sans); cursor: pointer; }
.doc .rct-step:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); }
.doc .rct-step:disabled { color: var(--ink-3); opacity: .5; cursor: default; }
.doc .rct-pos { flex: none; font-size: 12px; color: var(--ink-3); }
.doc .rct-meta { padding: 10px 14px 12px; border-top: 1px solid var(--line-2); background: var(--surface); font-family: var(--sans); font-size: 13px; }
.doc .rct-meta:empty { display: none; }
.doc .rct-title { display: flex; align-items: baseline; gap: 8px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.doc .rct-m { flex: none; padding: 1px 6px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); font-size: 11.5px; font-weight: 700; }
.doc .rct-m.base { background: var(--chip); color: var(--ink-2); }
.doc .rct-facts { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; margin: 8px 0 0; }
.doc .rct-facts dt { color: var(--ink-3); }
.doc .rct-facts dd { margin: 0; color: var(--ink-2); }
.doc .rct-links { display: flex; align-items: center; gap: 14px; margin-top: 9px; font-size: 12.5px; }
.doc .rct-open { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-3); }
.doc .rct-open .ctx-win { margin-left: 2px; }
.doc .rct-links a { color: var(--accent); }

/* ---------- collapsible window 3 ---------- */
.pane { position: relative; }
.pane-label .icon-btn.small { margin-left: auto; width: 24px; height: 22px; font-size: 15px; line-height: 1; }
.p3-strip { display: none; flex: none; width: 34px; margin-left: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  box-shadow: var(--shadow); cursor: pointer; color: var(--ink-2); flex-direction: column; align-items: center; gap: 10px; padding: 10px 0; }
.p3-strip:hover { color: var(--accent); background: var(--accent-soft); }
.p3-strip .strip-label { writing-mode: vertical-rl; font-size: 12px; font-weight: 600; letter-spacing: .04em; }
body.p3-collapsed #p3, body.p3-collapsed .gutter[data-right="p3"] { display: none; }
body.p3-collapsed .p3-strip { display: flex; }

/* ---------- pin-cite button ---------- */
.cite-btn { position: absolute; z-index: 5; width: 20px; height: 20px; padding: 0; border: 1px solid var(--accent-2); border-radius: 5px;
  background: var(--surface); color: var(--accent); font: 700 12px/18px var(--serif); cursor: pointer; display: none;
  box-shadow: 0 1px 3px rgba(20, 25, 35, .15); }
.cite-btn.show { display: block; }
.cite-btn:hover { color: var(--surface); background: var(--accent-2); }
.cite-tip { position: absolute; z-index: 6; display: none; align-items: center; gap: 8px; padding: 5px 6px 5px 10px; max-width: calc(100% - 16px);
  background: var(--ink); color: var(--surface); border-radius: 7px; box-shadow: 0 4px 14px rgba(0,0,0,.18); font-size: 12.5px; }
/* the text a pin cite covers, while the § button is hovered */
.doc .cite-hl { background: var(--hl); box-shadow: 0 0 0 4px var(--hl), -4px 0 0 4px var(--hl-line); border-radius: 2px; }
.cite-tip.show { display: flex; }
.cite-tip .cite-text { font-weight: 600; user-select: all; }
.cite-tip .btn { background: transparent; color: var(--surface); border-color: color-mix(in srgb, var(--surface) 35%, transparent); padding: 1px 8px; }
.cite-tip .btn:hover { background: color-mix(in srgb, var(--surface) 15%, transparent); color: var(--surface); }

/* ---------- narrow screens: stack panes ---------- */
@media (max-width: 900px) {
  body { overflow: auto; }
  .app { flex-direction: column; }
  #sidebar { width: auto; max-height: 40vh; border-right: 0; border-bottom: 1px solid var(--line); }
  #panes { flex-direction: column; padding: 8px; gap: 8px; }
  .gutter { display: none; }
  .pane { min-width: 0; height: 78vh; flex: none; }
  .topbar-note { display: none; }
  .p3-strip { width: auto; margin: 0; flex-direction: row; justify-content: center; padding: 8px; }
  .p3-strip .strip-label { writing-mode: horizontal-tb; }
}

/* ---------- collapsible legislation list ---------- */
#side-rail { display: none; flex: none; width: 30px; border: 0; border-right: 1px solid var(--line); background: var(--surface); cursor: pointer;
  color: var(--ink-2); flex-direction: column; align-items: center; gap: 10px; padding: 12px 0; font: 600 12px var(--sans); }
#side-rail:hover { color: var(--accent); background: var(--accent-soft); }
/* (on a desktop the list opens over window 1, a drawer, and its rail stays: the windows keep their widths, so opening
   and closing it lays no act out again — pushing window 1 aside, the CRR's text was laid out at each frame of the slide,
   3 frames in 1.3 s where an empty window had 22) */
@media (min-width: 901px) {
  .app { position: relative; }
  #side-rail { display: flex; }
  #sidebar { position: absolute; top: 0; bottom: 0; left: 0; z-index: 30; box-shadow: 6px 0 24px -6px rgba(20, 25, 35, .22); }
  body.beckon #sidebar { position: absolute; }
}
#side-rail .rail-label { writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .03em; white-space: nowrap; overflow: hidden; max-height: 70vh; }
body.sidebar-collapsed #side-rail { display: flex; }

/* ---------- right-click menu ---------- */
.ctx-menu { position: fixed; z-index: 50; min-width: 250px; max-width: 380px; padding: 5px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 9px; box-shadow: 0 8px 28px rgba(20, 25, 35, .18); font-size: 13px; color: var(--ink); }
.ctx-menu[hidden] { display: none; }
/* it opens with a quick fade, not a cut */
.ctx-menu:not([hidden]) { animation: ctx-in .14s ease-out; }
@keyframes ctx-in { from { opacity: 0; transform: translateY(-3px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .ctx-menu:not([hidden]) { animation: none; } }
.ctx-head { padding: 5px 9px 6px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx-sep { height: 1px; background: var(--line-2); margin: 4px 2px; }
.ctx-item, .ctx-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 5px 9px; border: 0; background: none; border-radius: 6px;
  text-align: left; font: inherit; color: inherit; }
.ctx-item { cursor: pointer; }
.ctx-item:hover, .ctx-row:hover { background: var(--surface-2); }
.ctx-item:hover { color: var(--accent); }
.ctx-hint { margin-left: auto; color: var(--ink-3); font-size: 11.5px; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctx-wins { margin-left: auto; display: inline-flex; gap: 4px; }
.ctx-win { width: 24px; height: 22px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--accent); font: 700 11.5px var(--sans); cursor: pointer; }
.ctx-win:hover { background: var(--accent); color: var(--surface); border-color: var(--accent); }

/* ---------- find in window ---------- */
.find-bar { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--line); background: var(--surface-2); flex: none; }
.find-in { flex: 1; min-width: 80px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; }
.find-count { font-size: 12px; color: var(--ink-3); white-space: nowrap; min-width: 56px; }
mark.find-hit { background: var(--hl); color: inherit; border-radius: 2px; box-shadow: 0 0 0 1px var(--hl-line); }
mark.find-hit.cur { background: var(--hl-line); color: #000; }
@media (max-width: 900px) {
  #side-rail { width: auto; flex-direction: row; justify-content: center; padding: 8px; border-right: 0; border-bottom: 1px solid var(--line); }
  #side-rail .rail-label { writing-mode: horizontal-tb; transform: none; }
}

/* ---------- right-click menu: Level 2 / 3 / 4 groups ---------- */
.ctx-group { padding: 7px 9px 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); border-top: 1px solid var(--line-2); margin-top: 4px; }
.ctx-row.none > span:first-child { color: var(--ink-3); }
.ctx-count { display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 5px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 700; text-align: center; }
.ctx-row.none .ctx-count { background: var(--chip); color: var(--ink-3); }
.ctx-count.dot { background: none; color: var(--accent-2); font-size: 9px; padding: 0; min-width: 0; }

/* ---------- reference lists: Q&As, decisions ---------- */
.instr-note { padding: 6px 14px; font-size: 12px; color: var(--ink-3); border-bottom: 1px solid var(--line-2); line-height: 1.45; }
.kind.QA { background: #fff1d6; color: #7a4b00; }
.kind.BOA { background: #e9e3fb; color: #3d2a7a; }
.kind.ENF { background: #fde4e1; color: #8a1f14; }
.kind.REC { background: #e2f0e6; color: #1f5a33; }
.item .rec-of { font-size: 12px; color: var(--ink-2); }
.rec-weight { color: var(--ink-3); font-size: 12px; }
/* legislative history */
.kind.HIST { background: #fdebd3; color: #6a3500; }
.kind.MEMO { background: #fdebd3; color: #6a3500; }
.kind.IA { background: #e9e3fb; color: #3d2a7a; }
.kind.ESMA { background: #e8eef8; color: #1d3a6b; }
.hist-weight { margin: 8px 14px 0; font-size: 12px; color: #6a3500; background: #fdf3e4; border: 1px solid #f0d9b0; border-radius: 6px; padding: 6px 9px; }
:root[data-theme="dark"] .hist-weight { color: var(--warn); background: var(--warn-soft); border-color: transparent; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hist-weight { color: var(--warn); background: var(--warn-soft); border-color: transparent; } }
/* how an article changed: a summary strip, filters, one timeline card per provision */
.hx-head { padding: 10px 14px; border-bottom: 1px solid var(--line-2); }
.hx-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; font-size: 13.5px; }
.hx-sub { color: var(--ink-3); font-size: 12px; }
.hx-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin-top: 8px; }
.hx-proc { border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; font-size: 11.5px; display: flex; flex-direction: column; color: var(--ink-3); }
.hx-proc b { color: var(--ink); font-weight: 600; font-size: 12px; }
.hx-n { color: var(--accent); }
.hx-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.hx-filters button { font: inherit; font-size: 11.5px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: 12px; padding: 1px 10px; cursor: pointer; }
.hx-filters button.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-2); }
.hx-card { margin: 10px 14px; border: 1px solid var(--line); border-radius: 8px; }
.hx-ch { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--line-2); font-size: 12.5px; }
.hx-tl { padding: 6px 10px 8px 14px; }
.hx-row { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 10px; padding: 5px 0 5px 12px; border-left: 2px solid var(--line); position: relative; }
.hx-row::before { content: ''; position: absolute; left: -6px; top: 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--ink-3); box-sizing: border-box; }
.hx-row.cur { border-left-color: var(--ok); }
.hx-row.cur::before { background: var(--ok); border-color: var(--ok); }
.hx-when { font-size: 11.5px; color: var(--ink-3); line-height: 1.35; display: flex; flex-direction: column; }
.hx-when b { color: var(--ink); font-weight: 600; font-size: 12px; }
.hx-today { color: var(--ok); font-weight: 600; }
.hx-text { font-family: var(--serif); font-size: 13.5px; line-height: 1.6; }
.hx-text ins, .hx-side ins { background: var(--accent-soft); color: var(--accent); text-decoration: none; border-radius: 3px; padding: 0 2px; }
.hx-text del, .hx-side del { color: var(--ink-3); text-decoration: line-through; }
.hx-muted { font-size: 12px; color: var(--ink-3); padding-top: 2px; }
.hx-who { display: inline-block; margin-left: 6px; font-family: var(--sans); font-size: 11px; border-radius: 10px; padding: 0 7px; vertical-align: 1px; }
.hx-who.parl { background: #e9e3fb; color: #3d2a7a; }
.hx-who.later { background: #f1efe8; color: #444441; }
.hx-old summary { cursor: pointer; font-size: 12px; color: var(--ink-2); }
.hx-old summary b { font-weight: 600; }
.hx-old .hx-text { margin-top: 4px; color: var(--ink-2); }
.hx-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; font-family: var(--serif); font-size: 13px; line-height: 1.55; }
.hx-lab { display: block; font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.hx-foot { margin: 6px 14px 14px; font-size: 12px; color: var(--ink-3); }
.qa-topic { font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.qa-q, .qa-a { font-size: 13.5px; line-height: 1.55; margin-top: 10px; }
.qa-lab { display: block; margin-bottom: 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.qa-by { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.qa-q .qa-text { font-weight: 600; }
.qa-a .qa-answer { display: block; }
.qa-a .qa-answer.clamp { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.qa-answer > p:last-child, .qa-answer > ul:last-child { margin-bottom: 0; }
.qa-answer ul, .qa-answer ol { margin: .3em 0 .6em; padding-left: 1.4em; }
.item.qa details.fold { margin: 8px 0 0; }
.qa-detail { margin: 4px 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); overflow-wrap: anywhere; }
.item.qa details.fold p { margin: 4px 0; font-size: 12.5px; }
.linkish { border: 0; background: none; color: var(--accent-2); cursor: pointer; padding: 2px 0; font-size: 12px; }
.dec-subject { font-size: 13px; line-height: 1.5; margin-top: 4px; }
.dec-outcome { font-size: 12.5px; line-height: 1.45; margin-top: 4px; color: var(--ink-2); }
.result { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: var(--chip); color: var(--ink-2); }
.result.r-dismissed, .result.r-inadmissible { background: #eef0f3; color: #4a505a; }
.result.r-remitted, .result.r-suspended { background: #e3f1e8; color: #1f5c3a; }
.chip.parallel { outline: 1px dashed var(--ink-3); }

/* ---------- document reader (PDF) ---------- */
.pdfdoc { font-family: var(--serif); }
.pdfdoc .pdf-page { font: 600 10.5px var(--sans); color: var(--ink-3); border-top: 1px dashed var(--line); margin: 18px 0 8px; padding-top: 3px; text-align: right; }
.pdfdoc .pdf-page:first-child { margin-top: 0; border-top: 0; }
.pdfdoc .pdf-h { font-family: var(--sans); color: var(--ink); line-height: 1.3; margin: 1.1em 0 .5em; }
.pdfdoc h2.pdf-h { font-size: 18px; } .pdfdoc h3.pdf-h { font-size: 15.5px; } .pdfdoc h4.pdf-h { font-size: 14px; }
.pdfdoc p { margin: 0 0 .7em; }
.pdfdoc p[data-num] { padding-left: 2.2em; text-indent: -2.2em; }
.pdfdoc .pdf-li { margin-left: var(--ind, 0); padding-left: 1.6em; text-indent: -1.6em; margin-bottom: .35em; }
.pdfdoc .pdf-strong { font-weight: 600; }
.pdfdoc .pdf-conj { margin: -.2em 0 .5em; padding-left: 2.2em; font-style: italic; color: var(--ink-3); }
.pdfdoc h5.pdf-h { font-size: 13px; font-weight: 600; font-style: italic; margin: .9em 0 .35em; color: var(--ink-2); }
.pdfdoc .pdf-fn { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.pdf-pages { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 14px 12px 60px; background: var(--surface-2); min-height: 100%; }
.pdf-slot { position: relative; min-height: 400px; width: 100%; max-width: 900px; display: flex; justify-content: center; }
.pdf-slot canvas { box-shadow: 0 1px 6px rgba(0,0,0,.18); background: #fff; }
.pdf-slot-n { position: absolute; top: 4px; right: 8px; font: 600 11px var(--sans); color: var(--ink-3); }
.qa-answer p { margin: 0 0 .5em; }
.link-pair { display: inline-flex; gap: 4px; }
.link-pair .ext { color: var(--ink-3); }

/* the menu never runs off the screen: it scrolls if the window is short */
.ctx-menu { max-height: calc(100vh - 16px); overflow-y: auto; overscroll-behavior: contain; }
.ctx-count.wait { background: none; color: var(--ink-3); letter-spacing: 1px; }

/* ---------- cross-references outside legislation ---------- */
/* a bare "Article 25" linked to the act the text is filed under: an inference, shown as such */
a.xref.assumed { border-bottom-style: dashed; color: color-mix(in srgb, var(--accent-2) 75%, var(--ink-2)); }
/* a reference to an article this text no longer contains */
.instr-note.warn { background: var(--warn-bg, #fff4d6); color: var(--warn-ink, #7a4b00); border-bottom-color: #ecd9a0; }
/* the sections of a reader document, as a drop-down list */
.pdfdoc .gl-outline { display: flex; align-items: center; gap: 10px; margin: 10px 0 14px; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface-2); font-family: var(--sans); }
.pdfdoc .gl-outline .gl-outline-h { flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.pdfdoc .gl-sections { flex: 1 1 auto; min-width: 0; max-width: 100%; height: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font: 13px var(--sans); cursor: pointer; }
.pdfdoc .gl-sections:hover, .pdfdoc .gl-sections:focus-visible { border-color: var(--accent); }
.pdfdoc details.gl-fold { margin: 8px 0; }
.pdfdoc details.gl-fold > p { font-size: .95em; }
.pdfdoc p.pdf-quote { margin-left: 2.2em; padding-left: 12px; border-left: 3px solid var(--line); font-size: .93em; line-height: 1.5; color: var(--ink-2); }
.pdfdoc p.pdf-quote.numbered { padding-left: calc(12px + 2.2em); }
.pdfdoc .fn-ref { font-size: .72em; vertical-align: super; line-height: 0; padding: 0 1px; font-weight: 700; color: var(--accent); cursor: pointer; }
.pdfdoc .fn-ref:hover { text-decoration: underline; }
.pdfdoc .fn-ref.no-note { color: var(--ink-3); cursor: default; }
.fn-inline { margin: 4px 0 10px 2.2em; padding: 6px 10px; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 6px 6px 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.pdfdoc details.pdf-notes { margin: 18px 0 8px; }
.pdfdoc details.pdf-notes .pdf-fn { margin: 6px 10px; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.pdf-fn-no { display: inline-block; margin-right: 6px; font-weight: 700; color: var(--ink-3); }
.pdfdoc .pdf-num { display: inline-block; width: 2.2em; box-sizing: border-box; padding-right: .35em; text-indent: 0; text-align: right; font-weight: 600; color: var(--ink-3); }
.pdfdoc p.numbered { padding-left: 2.2em; text-indent: -2.2em; }
.doc .oj-meta { margin: 0 0 10px; padding: 0 0 8px; border-bottom: 1px solid var(--line-2); font: 600 11.5px var(--sans); letter-spacing: .03em; color: var(--ink-3); }
details.fold { margin: 6px 0; border: 1px solid var(--line-2); border-radius: 7px; background: var(--surface-2); font-size: 12.5px; }
details.fold > summary { cursor: pointer; padding: 5px 10px; color: var(--ink-3); font-weight: 600; }
details.fold[open] > summary { border-bottom: 1px solid var(--line-2); }
details.fold > :not(summary) { margin-left: 10px; margin-right: 10px; }
.art-acc { border-bottom: 1px solid var(--line-2); }
.art-acc > summary { display: flex; align-items: center; gap: 8px; padding: 9px 14px; cursor: pointer; list-style: none; }
.art-acc > summary::-webkit-details-marker { display: none; }
.art-acc > summary:hover { background: var(--surface-2); }
.art-acc .chev { display: inline-block; width: 12px; color: var(--ink-3); transition: transform .12s; }
.art-acc[open] > summary .chev { transform: rotate(90deg); }
.art-acc[open] > summary { background: var(--surface-2); font-weight: 600; }
.art-acc .lbl { flex: 1; }
.art-acc .acc-body { padding: 4px 14px 12px 34px; background: var(--surface-2); border-top: 1px solid var(--line-2); }
.art-acc .acc-body > .loading { padding: 10px 0; }
.art-acc .list.compact { margin: 0; }
.art-acc .list.compact .item { padding: 8px 0; border-bottom: 1px solid var(--line-2); background: none; }
.art-acc .list.compact .item:last-child { border-bottom: 0; }
.art-acc .acc-foot { display: flex; gap: 8px; margin-top: 8px; }
.doc-code { margin-left: auto; font: 600 11px var(--mono, ui-monospace, monospace); color: var(--ink-3); }
.meta-l { font-size: 11px; color: var(--ink-3); margin-right: 2px; }
.read-in { display: inline-flex; align-items: center; gap: 4px; }
.link-pair .read-in { margin-left: 2px; }
a.xref.self { border-bottom-style: solid; color: var(--ink-2); }
a.xref.unresolved { border-bottom-style: dotted; cursor: help; }
a.doc-ref { color: var(--accent); border-bottom: 1px dotted currentColor; text-decoration: none; }
.ctx-select { width: 100%; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; font-size: 12.5px; }
a.xref.missing { color: var(--ink-3); border-bottom-style: dotted; border-bottom-color: var(--ink-3); cursor: help; }

/* ---------- report a reference ---------- */
.flag-dlg { position: fixed; z-index: 80; right: 18px; bottom: 18px; width: min(380px, calc(100vw - 36px)); padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 40px rgba(20, 25, 35, .28); font-size: 13px; color: var(--ink); }
.flag-dlg h3 { margin: 0 0 6px; font-size: 15px; }
.flag-dlg .flag-ref { margin: 0 0 8px; color: var(--ink-2); overflow-wrap: anywhere; }
.flag-dlg .flag-choices { display: grid; gap: 4px; margin: 6px 0 8px; }
.flag-dlg textarea { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); font: inherit; resize: vertical; }
.flag-dlg .flag-status { min-height: 1.2em; margin: 4px 0; color: var(--ink-3); font-size: 12px; }
.flag-dlg .flag-buttons { display: flex; justify-content: flex-end; gap: 8px; }

.pdfdoc details.pdf-wide { margin: .8em 0; }

/* ---------- search bar ---------- */
.topbar .search { position: relative; display: flex; align-items: center; gap: 6px; flex: 0 1 250px; min-width: 200px; margin: 0 12px; transition: flex-basis .22s cubic-bezier(.2, .8, .2, 1); }
.topbar .search:focus-within, .topbar .search.has-value { flex-basis: 520px; }
.topbar .search input { flex: 1; min-width: 0; height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface-2); color: var(--ink); font: inherit; font-size: 13px; }
.topbar .search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.topbar .search .btn { height: 30px; padding: 0 12px; border-radius: 99px; font-size: 12px; white-space: nowrap; }
.topbar .search .btn.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.search-pop { position: absolute; z-index: 90; top: 36px; left: 0; width: min(680px, 94vw); max-height: min(72vh, 620px); overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 12px 40px rgba(20, 25, 35, .22); }
.search-pop[hidden] { display: none; }
.sr-gh { padding: 9px 14px 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.sr-row { display: flex; align-items: center; gap: 10px; padding: 7px 14px; cursor: pointer; font-size: 13px; }
.sr-row.sel { background: var(--surface-2); }
.sr-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sr-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-sub { font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-row mark { background: var(--hl); color: inherit; border-radius: 2px; padding: 0 1px; }
.sr-kind { flex: none; font-size: 10.5px; padding: 1px 8px; border-radius: 99px; background: var(--chip); color: var(--ink-2); white-space: nowrap; }
.sr-note { flex: none; font-size: 10.5px; color: var(--ink-3); }
.sr-wins { flex: none; display: inline-flex; gap: 4px; }
.sr-win { width: 22px; height: 22px; padding: 0; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--accent); font: 700 11px var(--sans); cursor: pointer; }
.sr-win:hover { background: var(--accent); color: var(--surface); border-color: var(--accent); }
.sr-empty { padding: 14px; color: var(--ink-2); font-size: 13px; }
/* Level 4: passages from the text of the decisions */
.sr-sh { display: flex; align-items: baseline; gap: 10px; padding: 6px 14px 2px; font-size: 11.5px; font-style: italic; color: var(--ink-3); }
.sr-wait { padding: 4px 14px 8px; font-size: 12px; color: var(--ink-3); }
.sr-snip { font-size: 12px; line-height: 1.45; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 1px; }
.sr-row:has(.sr-snip) { align-items: flex-start; }
.sr-row:has(.sr-snip) .sr-kind, .sr-row:has(.sr-snip) .sr-note, .sr-row:has(.sr-snip) .sr-wins { margin-top: 2px; }
.pdfdoc mark.ft-hit { background: var(--hl); color: inherit; border-radius: 2px; padding: 0 1px; }
.sr-tip-h { font-weight: 600; margin-bottom: 8px; }
.sr-tips { display: flex; flex-wrap: wrap; gap: 6px; }
.sr-tip { padding: 3px 10px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--ink-2); font: inherit; font-size: 12px; cursor: pointer; }
.sr-tip:hover { color: var(--accent); border-color: var(--accent); }
.sr-foot { display: flex; flex-wrap: wrap; gap: 14px; padding: 7px 14px; border-top: 1px solid var(--line-2); font-size: 11px; color: var(--ink-3); position: sticky; bottom: 0; background: var(--surface); }
.search-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); font-size: 12px; }
.search-filters[hidden] { display: none; }
.sf-group { margin: 0 2px 0 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.sf-group:first-child { margin-left: 0; }
.sf-check { display: inline-flex; align-items: center; gap: 5px; padding: 1px 6px; border-radius: 6px; color: var(--ink-2); font-size: 12px; cursor: pointer; user-select: none; }
.sf-check:hover { background: var(--surface); }
.sf-check input { margin: 0; accent-color: var(--accent); cursor: pointer; }
.sf-check b { font-weight: 600; font-size: 11px; color: var(--ink-3); }
.sr-row.opened { background: color-mix(in srgb, var(--accent-soft) 55%, transparent); }
.sr-opened { flex: none; font-size: 10.5px; color: var(--accent); white-space: nowrap; }
.sf-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border: 1px solid var(--line); border-radius: 99px; background: transparent; color: var(--ink-3); font: inherit; font-size: 12px; cursor: pointer; }
.sf-chip.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.sf-chip b { font-weight: 600; font-size: 11px; opacity: .8; }
.sf-all { margin-left: auto; border: 0; background: none; color: var(--accent-2); font: inherit; font-size: 12px; cursor: pointer; }
@media (max-width: 1500px) { .topbar-note { display: none; } }
@media (max-width: 900px) { .topbar .misp-link, .topbar .sx-link { display: none; } .topbar .search { flex-basis: 260px; } }

.search-ghost { position: absolute; left: 14px; top: 0; height: 30px; display: flex; align-items: center; gap: 0; font-size: 13px; font-weight: 500; color: color-mix(in srgb, var(--accent) 55%, transparent); pointer-events: none; overflow: hidden; }
.search-ghost[hidden] { display: none; }
.search-ghost .sg-lead { display: flex; align-items: center; height: 18px; line-height: 18px; }
.search-ghost .sg-word { position: relative; display: block; min-width: 92px; height: 18px; line-height: 18px; overflow: hidden; }
.search-ghost .sg-word > span { position: absolute; left: 0; top: 0; height: 18px; display: flex; align-items: center; line-height: 18px; white-space: nowrap; }
.search-ghost .sg-in { animation: sg-in .32s cubic-bezier(.2, .8, .2, 1) both; }
.search-ghost .sg-out { animation: sg-out .32s cubic-bezier(.4, 0, 1, 1) both; }
@keyframes sg-in { from { transform: translateY(110%); opacity: 0; filter: blur(2px); } to { transform: none; opacity: 1; filter: none; } }
@keyframes sg-out { from { transform: none; opacity: 1; } to { transform: translateY(-110%); opacity: 0; filter: blur(2px); } }

.topbar-spacer { flex: 1; }
.side-note { padding: 8px 12px 10px; border-top: 1px solid var(--line-2); font-size: 10.5px; line-height: 1.4; color: var(--ink-3); }

.sr-filters { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 14px; background: var(--surface); border-bottom: 1px solid var(--line-2); }
.sr-filters .sr-fl { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }

.pdfdoc .qa-doc-q { margin: 1.2em 0 .4em; padding: 8px 12px; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 8px 8px 0; }
.pdfdoc .qa-doc-q strong { color: var(--accent); }
.pdfdoc .qa-doc-a { margin: .3em 0 .7em 10px; padding-left: 12px; border-left: 3px solid var(--line); }
.pdfdoc .qa-doc-a strong { color: var(--ink-2); }
.pdfdoc .pdf-meta { margin: -.3em 0 .5em; font: 11.5px var(--sans); color: var(--ink-3); }


.pdfdoc .qa-in-q { margin-left: 0; padding-left: 12px; border-left: 3px solid var(--accent); background: var(--surface-2); }
.pdfdoc h4.qa-in-q { margin: 0; padding-top: 4px; padding-bottom: 2px; }
.pdfdoc p.qa-in-q { margin: 0; padding-top: 3px; padding-bottom: 4px; }
.pdfdoc .qa-doc-q + .qa-in-q { margin-top: 0; }

.info-btn { flex: none; width: 22px; height: 22px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink-3); font: italic 600 13px/1 Georgia, 'Times New Roman', serif; cursor: pointer; margin-left: 2px; }
.info-btn:hover, .info-btn.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.instr-note[hidden] { display: none; }

.ctx-win.static { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; margin: 0 2px; cursor: default; }
.ctx-win.static:hover { background: var(--surface); color: var(--accent); border-color: var(--line); }

/* At launch, with nothing open, the legislation list (or its rail) beckons until the reader picks something */
body.beckon #sidebar, body.beckon #side-rail { position: relative; z-index: 3; animation: beckon 2.6s ease-in-out infinite; }
@keyframes beckon {
  0%, 55%, 100% { transform: translateX(0); box-shadow: 0 0 0 0 transparent; }
  12% { transform: translateX(5px); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent), 8px 0 22px -8px color-mix(in srgb, var(--accent) 55%, transparent); }
  24% { transform: translateX(0); }
  32% { transform: translateX(2px); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent), 4px 0 14px -8px color-mix(in srgb, var(--accent) 40%, transparent); }
  40% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) { body.beckon #sidebar, body.beckon #side-rail { animation: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); } }

/* Q&As: one shape for every answer */
.qa-text p { margin: 0 0 .35em; }
.qa-text p:last-child { margin-bottom: 0; }
.qa-answer p.qa-li, .qa-text p.qa-li { padding-left: 1.6em; text-indent: -1.1em; }
.qa-answer p.qa-bullet { position: relative; text-indent: 0; padding-left: 1.4em; }
.qa-answer p.qa-bullet::before { content: '•'; position: absolute; left: .45em; color: var(--ink-3); }
.qa-answer p.qa-sub { margin: .9em 0 .3em; font-size: 12.5px; }
.qa-answer p.qa-sub:first-child { margin-top: 0; }
.qa-answer hr { border: 0; border-top: 1px dashed var(--line); margin: 1em 0; }
.qa-answer .fn-ref { font-size: .72em; vertical-align: super; line-height: 0; padding: 0 1px; font-weight: 700; color: var(--accent); cursor: help; }
.qa-answer p.qa-none { color: var(--ink-3); font-style: italic; }
.qa-q .qa-text p.qa-ctx { font-weight: 400; }
.qa-q .qa-text p.qa-ctx-h { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin-top: .6em; }
.ctx-win:disabled { opacity: .4; cursor: default; }
.ctx-win:disabled:hover { background: var(--surface); color: var(--accent); border-color: var(--line); }
.ctx-row .ctx-select { flex: 1; min-width: 0; }
.sr-foot .sr-bool { margin-left: auto; cursor: help; font-family: var(--mono, ui-monospace, monospace); letter-spacing: -.01em; }

/* the four parts of the site, as tabs at the top right; the one you are on joins the page below it. All four the same
   width and height, the one you are on marked by its colour and top line, not by standing taller */
.apptabs { display: flex; align-items: flex-end; align-self: stretch; gap: 3px; margin-left: 8px; flex: none; }
.apptab { position: relative; display: flex; align-items: center; justify-content: center; width: 130px; height: 34px; padding: 0 10px; margin-bottom: -1px;
  border: 1px solid var(--line); border-bottom: 0; border-radius: 9px 9px 0 0; background: var(--surface-2);
  color: var(--ink-2); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.apptab:hover { color: var(--ink); background: var(--chip); }
.apptab.on { background: var(--bg); color: var(--accent); font-weight: 600; z-index: 1; box-shadow: inset 0 2px 0 var(--accent-2); }
.apptab.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--bg); }
@media (max-width: 1100px) { .apptab { width: 118px; padding: 0 8px; font-size: 12px; } }
/* "Enforcement": one tab, a click opens its three pages (apptabs.js) */
button.apptab { font-family: inherit; cursor: pointer; gap: 6px; }
.apptab .caret { font-size: 10px; opacity: .7; transition: transform .15s; }
.apptab.open .caret { transform: rotate(180deg); }
.apptab.open:not(.on) { color: var(--ink); background: var(--chip); }
/* (each page in two lines, its name and what it holds: as wide as the longest description) */
.apptab-pop { position: fixed; z-index: 1000; width: 410px; padding: 4px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(20, 30, 50, .18); }
.apptab-pop a { display: grid; gap: 1px; padding: 7px 10px; border-radius: 7px; color: var(--ink); text-decoration: none; }
.apptab-pop a:hover, .apptab-pop a:focus-visible { background: var(--accent-soft); outline: none; }
.apptab-pop a b { font-size: 13.5px; font-weight: 600; }
.apptab-pop a.on b { color: var(--accent); }
.apptab-pop a.on b::after { content: ' ✓'; }
.apptab-pop a small { font-size: 11.5px; line-height: 1.4; color: var(--ink-3); }
.brand .brand-sub { color: var(--ink-2); font-weight: 600; }

/* amendments the consolidated text does not yet carry */
.amend-notice { margin: 10px 14px 4px; padding: 9px 12px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--ink-2); font-size: 12.5px; }
.amend-notice.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.amend-notice.warn > b:first-child { color: var(--warn); }
.amend-notice ul { margin: 4px 0 2px; padding-left: 18px; }
.amend-notice li { margin: 2px 0; }
.amend-notice .an-later { display: block; margin-top: 6px; }
.amend-notice:not(.warn) { font-size: 12px; padding: 7px 12px; }
.amend-flag { margin-left: 8px; font: 600 10.5px var(--sans); color: var(--warn); background: var(--warn-soft); border-radius: 99px; padding: 1px 8px; text-decoration: none; white-space: nowrap; vertical-align: middle; }
.amend-flag:hover { text-decoration: underline; }
.amend-flag.later { color: var(--ink-3); background: var(--chip); }
a.xref.amend-flag { text-decoration: none; border-bottom: 0; }
/* a thin line between the tabs and the page, under every tab */
.apptab { margin-bottom: 0; }
.apptab.on::after { display: none; }
.topbar { box-shadow: 0 1px 3px rgba(20, 25, 35, .05); }
/* the header of a consolidated text: the title once, plainly */
.doc .act-head { margin: 4px 0 10px; padding: 0 0 12px; border-bottom: 1px solid var(--line-2); text-align: left; }
.doc .act-head .ah-t { font-family: var(--serif); font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.doc .act-head .ah-s { font-family: var(--serif); font-size: 15px; line-height: 1.45; color: var(--ink-2); margin-top: 3px; }
.doc .act-head .ah-m { font-family: var(--sans); font-size: 12px; color: var(--ink-3); margin-top: 6px; }
#side-rail { animation: rail-in .25s ease-out; } @keyframes rail-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { #side-rail { animation: none; } }

/* the legislation list while it slides shut or open: clipped, its contents at full width */
#sidebar.sliding { overflow: hidden; }
#sidebar.sliding > * { min-width: 232px; }
body.sb-sliding .app { overflow: hidden; }
/* Q&A documents: each question and answer as a card, like the Q&As from ESMA's Q&A tool */
.pdfdoc .qa-card { margin: 14px 0; padding: 10px 14px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-family: var(--sans); }
.pdfdoc .qa-card .qa-top { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-3); }
.pdfdoc .qa-card .qa-subj { margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--ink-2); line-height: 1.4; }
.pdfdoc .qa-card .qa-q, .pdfdoc .qa-card .qa-a { font-size: 13.5px; line-height: 1.55; margin-top: 8px; }
.pdfdoc .qa-card .qa-text { font-weight: 600; color: var(--ink); }
.pdfdoc .qa-card .qa-text p, .pdfdoc .qa-card .qa-answer p { margin: 0 0 .5em; font-family: var(--sans); font-size: 13.5px; }
.pdfdoc .qa-card .qa-text p:last-child, .pdfdoc .qa-card .qa-answer > p:last-child { margin-bottom: 0; }
.pdfdoc .qa-card .qa-text .pdf-li, .pdfdoc .qa-card .qa-answer .pdf-li { margin-left: var(--ind, 1em); }
.pdfdoc .qa-card .pdf-page { margin: 6px 0; }
.pdfdoc .qa-card .qa-none { color: var(--ink-3); font-style: italic; }
.pdfdoc .qa-card .qa-top { font-weight: 600; }
.pdfdoc .qa-card .qa-top:empty { display: none; } .pdfdoc .qa-card .qa-top:empty + .qa-q { margin-top: 0; }
.info-btn { display: inline-flex; align-items: center; justify-content: center; cursor: help; } .info-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* a Q&A filed under another act that names the article shown */
.qa-cross { display: inline-block; font-size: 11px; font-weight: 600; color: var(--rel-ink); background: var(--rel-bg); border-radius: 5px; padding: 1px 7px; margin-bottom: 4px; }
/* phones: the tab strip scrolls sideways rather than widening the page */
@media (max-width: 820px) { .apptabs { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; } .apptabs::-webkit-scrollbar { display: none; } .apptab { flex: none; } }

/* questions of the consolidated Q&A documents, in the Q&A list */
.kind.QADOC { background: #fff1d6; color: #7a4b00; }
li.qa-docs-h { list-style: none; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); padding: 14px 14px 4px; border: 0; }
.qa-doc-name { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.qa-one { padding-top: 4px; }

/* web addresses printed in documents and Q&As; long ones wrap anywhere */
a.url { overflow-wrap: anywhere; }
.url-retired { overflow-wrap: anywhere; color: var(--ink-3); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink-3) 60%, transparent); }
.url-retired-note { font-size: .92em; color: var(--ink-3); font-style: normal; }

/* a deleted Q&A: ESMA's notice, then the answer as it was, set apart and greyed */
.qa-deleted-note { font-weight: 600; }
.qa-former { margin-top: 8px; padding-left: 12px; border-left: 2px solid var(--line); color: var(--ink-3); }
.qa-former-h { font: 700 11px/1.4 var(--sans, Inter, sans-serif); letter-spacing: .04em; text-transform: uppercase; font-style: normal; margin-bottom: 4px; }
.qa-former a { color: inherit; }

/* a reference within a document to its own article or paragraph (the rules of procedure): the target stays marked,
   and a button brings the reader back to where it was cited */
.pdfdoc .self-hit { background: var(--hl); box-shadow: -8px 0 0 -5px var(--hl-line); border-radius: 3px; }
.pdfdoc .flash { animation: flash 1.8s ease-out; }
.pdfdoc .self-hit.flash { animation: none; }
.self-back { position: absolute; right: 14px; bottom: 14px; z-index: 5; font: 600 12.5px var(--sans, Inter, sans-serif); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--accent); box-shadow: var(--shadow); cursor: pointer; }
.self-back:hover { border-color: var(--accent); }

/* Level 2 lists: what the act is about, then its short name and number */
.l2-topic a { font-weight: 600; }
.l2-name { font-size: 12px; color: var(--ink-3); margin-top: 1px; }

/* ---------- tables of data: one look everywhere (acts, Q&As, guidance, MISP); see tables.js ----------
   A rounded box that scrolls sideways on its own; sans-serif text a step smaller than the body; hairline rules
   between rows and columns; a tinted header row. Tables EUR-Lex uses only to lay out points keep no lines at all. */
.tbl-wrap { overflow-x: auto; max-width: 100%; margin: .75em 0 1.1em; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.tbl-wrap > table.tbl { width: 100%; margin: 0; border-collapse: collapse; font-family: var(--sans); font-size: 13px; line-height: 1.45; color: var(--ink); }
.tbl-wrap > table.tbl > * > tr > td, .tbl-wrap > table.tbl > * > tr > th,
.tbl-wrap > table.tbl > tr > td, .tbl-wrap > table.tbl > tr > th { padding: 7px 10px; vertical-align: top; text-align: left; border: 0; border-bottom: 1px solid var(--line-2); border-left: 1px solid var(--line-2); }
.tbl-wrap > table.tbl tr > :first-child { border-left: 0; }
.tbl-wrap > table.tbl tr:last-child > * { border-bottom: 0; }
.tbl-wrap > table.tbl tr.tbl-h > * { background: var(--surface-2); color: var(--ink-2); font-weight: 600; font-size: 12px; letter-spacing: .01em; border-bottom-color: var(--line); vertical-align: bottom; }
.tbl-wrap > table.tbl tr.tbl-h > * * { font-weight: inherit; }
.tbl-wrap > table.tbl td p, .tbl-wrap > table.tbl th p { margin: 0 0 .4em; text-indent: 0; text-align: left; }
.tbl-wrap > table.tbl td > :last-child, .tbl-wrap > table.tbl th > :last-child { margin-bottom: 0; }
/* a table inside a cell (EUR-Lex nests lettered points in a row) stays a layout table */
.tbl-wrap > table.tbl table { font-size: inherit; border-collapse: collapse; }
.tbl-wrap > table.tbl table td { border: 0; padding: 1px 6px 1px 0; }
.tbl-wrap > table.tbl img { max-width: none; }
/* an act's table of contents: a list with its labels in a quiet column */
table.tbl-toc { border-collapse: collapse; width: 100%; font-family: var(--sans); font-size: 12.5px; line-height: 1.4; }
table.tbl-toc td { padding: 4px 10px 4px 0; border-bottom: 1px solid var(--line-2); vertical-align: top; }
table.tbl-toc tr:first-child td { border-bottom-color: var(--line); font-weight: 600; color: var(--ink-2); letter-spacing: .04em; }
table.tbl-toc td:first-child:not(:only-child) { white-space: nowrap; color: var(--ink-3); width: 1%; }
table.tbl-toc td p { margin: 0; }

/* ---------- moving between the site's pages (the tabs at the top right) ---------- */
/* The new page fades in over the old rather than the window going blank; the top bar stays put, the marked tab changing
   in place (a moving tab carried its old label across, as if the tabs swapped places). (Browsers without cross-page
   transitions simply change page.) */
@view-transition { navigation: auto; }
/* (a transition name makes the top bar a layer of its own, and the page after it was drawn over what opens from it, such
   as the data-warning box: the bar is raised above the page) */
.topbar { view-transition-name: topbar; position: relative; z-index: 45; }
::view-transition-group(root) { animation-duration: .28s; }
::view-transition-old(root) { animation: none; }                 /* the old page stays solid under the new one: nothing blank shows through */
::view-transition-new(root) { animation: vt-in .32s cubic-bezier(.2, .8, .2, 1) both; }
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; }   /* laid over, not added (which would flash lighter) */
::view-transition-group(topbar) { animation: none; }
::view-transition-old(topbar), ::view-transition-new(topbar) { animation-duration: .22s; }
@keyframes vt-in { from { opacity: 0; } }                       /* in place: rising, it opened a thin gap under the top bar */
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* Q&A sources: the Q&A tool and ESMA's Q&A documents, labelled */
.doc-code.qa-code { margin-left: 0; }
.qa-docs-sub { font-weight: 400; text-transform: none; letter-spacing: 0; }
.qa-doc-ver { color: var(--ink-3); }
.qa-all-link { padding: 10px 4px 2px; font-size: 12.5px; }
/* Level 2: amending and correcting acts folded under the act they change */
.l2-count-more { font-weight: 400; color: var(--ink-3); font-size: 12px; }
details.l2-sub { margin: 5px 0 0; font-size: 12px; color: var(--ink-2); }
details.l2-sub > summary { cursor: pointer; color: var(--ink-3); list-style: none; display: inline-flex; gap: 5px; align-items: baseline; }
details.l2-sub > summary::before { content: '▸'; font-size: 10px; }
details.l2-sub[open] > summary::before { content: '▾'; }
details.l2-sub > summary::-webkit-details-marker { display: none; }
details.l2-sub ul { list-style: none; margin: 4px 0 2px; padding: 0 0 0 12px; border-left: 2px solid var(--line-2); }
details.l2-sub li { padding: 2px 0; line-height: 1.45; }
details.l2-sub .date { margin: 0 4px 0 0; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.l2-sub-topic { color: var(--ink-3); }
.l2-sub-ext { font-size: 11px; color: var(--ink-3); margin-left: 4px; }
/* Level 2 in the pipeline (not law yet) */
details.l2-pipe { margin: 4px 0 10px; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 8px; background: var(--surface-2); }
details.l2-pipe > summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.l2-pipe-note { font-size: 11.5px; color: var(--ink-3); margin: 4px 0 6px; line-height: 1.45; }
details.l2-pipe ul { list-style: none; margin: 0; padding: 0; }
details.l2-pipe li { padding: 6px 0; border-top: 1px solid var(--line-2); }
details.l2-pipe .l2-pipe-t { font-size: 12.5px; line-height: 1.45; margin: 3px 0; }
.badge.pipe { background: #fff1d6; color: #7a4b00; font-size: 10.5px; padding: 1px 7px; border-radius: 99px; font-weight: 600; }
@media (prefers-color-scheme: dark) { .badge.pipe { background: var(--warn-soft, #3a2e1a); color: var(--warn, #e2a64a); } }
details.l2-pipe .top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
details.l2-pipe .top .date { margin-left: 0; }
/* "Bugs & requests": a small island button in the top bar, and the note it opens */
.help-btn { flex: none; display: inline-flex; align-items: center; height: 28px; margin-left: 8px; padding: 0 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--ink-3); font: 500 12px var(--sans); cursor: pointer; white-space: nowrap; }
.help-btn:hover, .help-btn.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.brand + .help-btn { margin-left: 14px; }
.help-pop { position: fixed; z-index: 200; width: max-content; max-width: min(340px, calc(100vw - 16px)); padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 10px 30px rgba(20, 25, 35, .18); font-size: 13px; color: var(--ink-2); animation: help-in .14s ease-out; }
.help-pop[hidden] { display: none; }
.help-pop-t { font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.help-pop-l a { color: var(--accent-2); font-weight: 500; }
.help-copy { margin-top: 9px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface-2); color: var(--ink-2); font: 500 11.5px var(--sans); cursor: pointer; }
.help-copy:hover { color: var(--accent); border-color: var(--accent); }
@keyframes help-in { from { opacity: 0; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .help-pop { animation: none; } }
@media (max-width: 900px) { .help-btn { display: none; } }
/* an item's first line: what it is on the left; its date and the tags saying why it is listed ("cites Art. 25(4)",
   "linked to Art. 25") together on the right — on a narrow window they move to the next line together, still on the right */
.item .top > .side { margin-left: auto; display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; min-width: 0; }
.item .top > .side > .date { margin-left: 0; white-space: nowrap; }
/* why a document is listed, by who says so: its own text cites the provision (yellow, .chip.match); the publisher links or
   files it there — ESMA's rulebook, ESMA's Q&A tool, the Publications Office's case-law index (blue, .chip.link); it is
   connected indirectly — the same case, another act's Q&A, a parallel provision (purple, .chip.rel) */
:root { --link-bg: #e3edfb; --link-ink: #1f4b8f; --rel-bg: #efe9f8; --rel-ink: #5a3f8a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --link-bg: #1d2b40; --link-ink: #9cc0f0; --rel-bg: #2c2540; --rel-ink: #c3b2ea; } }
:root[data-theme="dark"] { --link-bg: #1d2b40; --link-ink: #9cc0f0; --rel-bg: #2c2540; --rel-ink: #c3b2ea; }
.chip.link { background: var(--link-bg); color: var(--link-ink); font-weight: 600; }
.chip.rel { background: var(--rel-bg); color: var(--rel-ink); font-weight: 600; }

/* a Commission document's cover and its folded table of contents */
.doc .com-cover { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 8px; padding: 14px 16px; margin: 4px 0 16px; background: var(--accent-soft); }
.doc .com-cover .cc-top { font-size: 12px; color: var(--ink-3); letter-spacing: .02em; }
.doc .com-cover .cc-title { font-size: 17px; font-weight: 650; line-height: 1.3; margin: 6px 0 4px; color: var(--ink); }
.doc .com-cover .cc-sub { font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.doc .com-cover .cc-rel { margin-top: 10px; font-size: 12px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.doc .com-cover .cc-rel a, .doc .com-cover .cc-rel span { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 1px 8px; color: var(--accent); text-decoration: none; }
.doc .com-cover .cc-rel span { color: var(--ink-3); }
.doc .com-toc { border: 1px solid var(--line); border-radius: 8px; margin: 0 0 18px; }
.doc .com-toc > summary { cursor: pointer; padding: 8px 12px; font-weight: 600; font-size: 13.5px; }
.doc .com-toc .ct-list { padding: 4px 12px 10px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.doc .com-toc .ct-jump { color: var(--accent); text-decoration: none; }
.doc .com-toc .ct-jump:hover { text-decoration: underline; }
.doc .flash:not(.art-block) { animation: flash 1.8s ease-out; }
.doc .com-cover .cc-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin-top: 10px; }
.doc .com-cover .cc-eyebrow + .cc-title { margin-top: 2px; }
.doc .com-cover .cc-rel .cc-lab { background: none; border: 0; padding: 0; color: var(--ink-3); }
.doc .com-toc .ct-n { font-weight: 400; color: var(--ink-3); }
.doc .com-toc .ct-jump.lv1 { font-weight: 600; margin-top: 4px; }
.doc .com-toc .ct-jump.lv2 { padding-left: 14px; }
.doc .com-toc .ct-jump.lv3 { padding-left: 28px; font-size: 12.5px; }
.item.hist .hd-ps { margin: 6px 0 2px; font-size: 13px; }
.item.hist .hd-ps > summary { cursor: pointer; color: var(--ink-2); }
.item.hist .hd-ps ul { margin: 4px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.item.hist .hd-ps .hd-role { color: var(--ink-3); font-size: 12px; }
/* (a document's other passages, under its strongest) */
.item.hist .hx-more { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--line); font-size: 13px; }
.item.hist .hx-more > summary { cursor: pointer; color: var(--accent); }
.item.hist .hx-sub { margin: 10px 0 4px 14px; padding-left: 12px; border-left: 2px solid var(--line); }
.doc .cd-h1 { font-weight: 650; font-size: 1.08em; margin: 1.6em 0 .6em; }
.doc .cd-h2 { font-weight: 600; margin: 1.2em 0 .4em; }
.doc .cd-h3 { font-weight: 600; font-style: italic; margin: 1em 0 .3em; }
.doc .cd-num { color: var(--ink-3); margin-right: .45em; font-weight: 500; }
.doc table.cd-table { border-collapse: collapse; font-size: 13px; margin: .6em 0 1em; width: 100%; }
.doc table.cd-table td { border: 1px solid var(--line); padding: 4px 6px; vertical-align: top; }
.doc table.cd-table tr:first-child td { background: var(--surface-2); font-weight: 600; }
.hx-stages { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.hx-stage-row { border: 1px solid var(--line); border-radius: 7px; padding: 6px 9px; }
.hx-stage-name { font-size: 12px; color: var(--ink-3); margin-bottom: 3px; }
.hx-stage-name b { color: var(--ink); font-weight: 600; }
.hx-stage-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 11.5px; }
.hx-step { display: inline-flex; flex-direction: column; line-height: 1.2; color: var(--ink-3); }
.hx-step b { color: var(--ink); font-weight: 600; }
.hx-sep { color: var(--ink-3); }
.doc p.cd-li { position: relative; padding-left: 1.6em; margin-left: 1.2em; }
.doc p.cd-li > .cd-mark { position: absolute; left: 0; }
/* a web address in a footnote or a paragraph breaks at the window's edge, not widening the window (a scrollbar under it) */
.doc p, .doc dd, .doc li { overflow-wrap: break-word; }/* who wrote what (the MISP tracker's colours): Parliament purple, the Council green, both teal, the trilogues grey */
.hx-text ins.ep, .hx-side ins.ep { background: #eeedfe; color: #3c3489; }
.hx-text ins.cn, .hx-side ins.cn { background: #eaf3de; color: #27500a; }
.hx-text ins.both, .hx-side ins.both { background: #e2f0f4; color: #1d5a6b; }
.hx-text ins.tr, .hx-side ins.tr { background: #f1efe8; color: #444441; }
.hx-who.cn { background: #eaf3de; color: #27500a; }
.hx-who.both { background: #e2f0f4; color: #1d5a6b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hx-text ins.ep, :root:not([data-theme="light"]) .hx-who.parl { background: #2c2540; color: #c3b2ea; } :root:not([data-theme="light"]) .hx-text ins.cn, :root:not([data-theme="light"]) .hx-who.cn { background: #1f3527; color: #8fd3aa; } :root:not([data-theme="light"]) .hx-text ins.both, :root:not([data-theme="light"]) .hx-who.both { background: #1d3640; color: #9fd0de; } :root:not([data-theme="light"]) .hx-text ins.tr { background: #2e2d2a; color: #d3d1c7; } }
:root[data-theme="dark"] .hx-text ins.ep, :root[data-theme="dark"] .hx-who.parl { background: #2c2540; color: #c3b2ea; }
:root[data-theme="dark"] .hx-text ins.cn, :root[data-theme="dark"] .hx-who.cn { background: #1f3527; color: #8fd3aa; }
:root[data-theme="dark"] .hx-text ins.both, :root[data-theme="dark"] .hx-who.both { background: #1d3640; color: #9fd0de; }
:root[data-theme="dark"] .hx-text ins.tr { background: #2e2d2a; color: #d3d1c7; }
.hx-key { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; font-size: 11.5px; color: var(--ink-3); }
.hx-key ins { text-decoration: none; border-radius: 3px; padding: 0 4px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hx-who.later { background: #2e2d2a; color: #d3d1c7; } }
:root[data-theme="dark"] .hx-who.later { background: #2e2d2a; color: #d3d1c7; }
.doc .cd-old { color: var(--ink-3); font-size: .85em; font-weight: 400; }

/* ---------- ESMA and EBA in one list ---------- */
/* who a document comes from: ESMA, the EBA, the ECB, or the ESAs jointly */
.auth-tag { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; line-height: 1.5; border: 1px solid transparent; }
.auth-esma { background: var(--auth-esma-bg); color: var(--auth-esma); border-color: var(--auth-esma-line); }
.auth-eba { background: var(--auth-eba-bg); color: var(--auth-eba); border-color: var(--auth-eba-line); }
.auth-ecb { background: var(--auth-ecb-bg); color: var(--auth-ecb); border-color: var(--auth-ecb-line); }
/* an ECB supervisory guide's standing, under its title */
.item .ecb-note { font-size: 12px; color: var(--ink-3); margin: 2px 0 4px; }
.auth-joint { background: var(--auth-joint-bg); color: var(--auth-joint); border-color: var(--auth-joint-line); }
/* EIOPA: outside the site's remit, named only on the Board of Appeal's decisions: neutral */
.auth-eiopa { background: var(--surface-2); color: var(--ink-2); border-color: var(--line); }
/* the strip above a list holding both authorities: All / ESMA n / EBA n */
.auth-strip { display: flex; align-items: center; gap: 8px; padding: 6px 14px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line-2); }
.auth-strip-l { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.auth-strip.one { gap: 6px; }
.auth-strip .auth-note { font-size: 12px; color: var(--ink-3); }
.auth-strip .seg button { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; }
/* each choice's count: a badge in its authority's colours (as the menu's counts), the total on All */
.auth-n { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; border: 1px solid transparent; font-size: 10.5px; font-weight: 700; line-height: 1.55; text-align: center; font-variant-numeric: tabular-nums; }
.auth-n.auth-all { background: var(--chip); color: var(--ink-2); }
/* (on the chosen button, whose own fill would swallow it: the badge on the page's ground, outlined) */
.auth-strip .seg button.on .auth-n { background: var(--surface); }
.auth-strip .seg button.on .auth-n.auth-all { border-color: var(--line); }
/* each authority's part of the list */
.auth-head { display: flex; align-items: center; gap: 8px; margin: 14px 0 4px; padding: 0 14px 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); border-bottom: 1px solid var(--line-2); }
.auth-head:first-of-type { margin-top: 6px; }
/* (All's total row, or one authority's heading merged into its count row: "[ESMA] 11 Q&As", the filter to the right) */
.p3-ctx.auth-ctx { background: none; gap: 8px; }
.p3-ctx.auth-ctx .filter-in { margin-left: auto; flex: 0 1 240px; }
/* (hidden in a window means hidden: a part's heading, counts and notes are flex boxes, which would otherwise show) */
.pane-body [hidden] { display: none !important; }

/* a Commission document's table wider than the window: scrolled in its own box */
.doc .cd-scroll { overflow-x: auto; max-width: 100%; }