/* MISP tracker — builds on the tokens in styles.css */
:root {
  --com: #2f5aa8; --com-soft: #e5edfa;
  --ep: #8a2b8f; --ep-soft: #f5e6f5;
  --cou: #0f7b6c; --cou-soft: #e0f2ef;
  --sev-high: #b42318; --sev-high-soft: #fdecea;
  --sev-med: #a15c00; --sev-med-soft: #fdf1dc;
  --sev-low: #5b6470; --sev-low-soft: #eef0f3;
  --st-support: #1f7a45; --st-mixed: #a15c00; --st-alternative: #b42318; --st-compromise: #2f5aa8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --com: #8fb1ee; --com-soft: #1f2c45; --ep: #d99bdc; --ep-soft: #3a2139; --cou: #6fd1bf; --cou-soft: #173631;
    --sev-high: #ff8a80; --sev-high-soft: #3d1c1a; --sev-med: #f0b35a; --sev-med-soft: #3a2c16; --sev-low: #aab1bb; --sev-low-soft: #2a2f37;
    --st-support: #6fc193; --st-mixed: #f0b35a; --st-alternative: #ff8a80; --st-compromise: #8fb1ee;
  }
}
:root[data-theme="dark"] {
  --com: #8fb1ee; --com-soft: #1f2c45; --ep: #d99bdc; --ep-soft: #3a2139; --cou: #6fd1bf; --cou-soft: #173631;
  --sev-high: #ff8a80; --sev-high-soft: #3d1c1a; --sev-med: #f0b35a; --sev-med-soft: #3a2c16; --sev-low: #aab1bb; --sev-low-soft: #2a2f37;
  --st-support: #6fc193; --st-mixed: #f0b35a; --st-alternative: #ff8a80; --st-compromise: #8fb1ee;
}

body.misp { overflow: hidden; }
.misp-app { flex: 1; display: flex; min-height: 0; }
#filters { width: 290px; flex: none; overflow-y: auto; background: var(--surface); border-right: 1px solid var(--line); padding: 12px 14px 40px; }
#main { flex: 1; overflow-y: auto; min-width: 0; }
#hero, #view { max-width: 1180px; margin: 0 auto; padding: 0 22px; }
#view { padding-bottom: 80px; }

/* ---------- filters ---------- */
.f-group { margin: 14px 0 0; }
.f-title { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 6px; display: flex; align-items: center; gap: 6px; }
.f-title button { margin-left: auto; font-size: 11px; border: 0; background: none; color: var(--accent-2); cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 500; }
.f-search { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--ink); font: inherit; }
.f-opt { display: flex; align-items: center; gap: 7px; font-size: 13px; padding: 3px 2px; cursor: pointer; border-radius: 5px; }
.f-opt:hover { background: var(--surface-2); }
.f-opt input { margin: 0; accent-color: var(--accent-2); }
.f-opt .n { margin-left: auto; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.f-opt.zero { opacity: .45; }
.f-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.f-chip { border: 1px solid var(--line); background: var(--surface); border-radius: 99px; padding: 3px 9px; font-size: 12px; cursor: pointer; color: var(--ink-2); }
.f-chip:hover { border-color: var(--accent-2); color: var(--ink); }
.f-chip.on { background: var(--accent-soft); border-color: transparent; color: var(--accent); font-weight: 600; }
.f-sub { margin-left: 22px; }
.f-more { font-size: 12px; border: 0; background: none; color: var(--accent-2); cursor: pointer; padding: 3px 2px; }
.active-filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0 0; font-size: 12.5px; color: var(--ink-2); }
.active-filters .f-chip { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.active-filters .f-chip::after { content: ' ×'; }

/* ---------- hero ---------- */
.hero-top { padding: 22px 0 6px; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; }
.hero-top h1 { margin: 0; font-size: 22px; letter-spacing: -.01em; }
.hero-top .props { display: flex; gap: 6px; flex-wrap: wrap; }
.prop-chip { font-size: 12px; padding: 3px 9px; border-radius: 6px; background: var(--chip); color: var(--ink-2); text-decoration: none; }
.prop-chip b { color: var(--ink); }
.inst-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0 4px; }
.inst-card { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--surface); border-top: 3px solid var(--c); }
.inst-card .who { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c); }
.inst-card .stage { font-size: 13px; margin-top: 3px; line-height: 1.4; }
.inst-card .next { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
/* procedure timeline: a snake that fits the page width */
.timeline { margin: 18px 0 6px; padding: 0 34px; --line-y: 34px; }
.tl-legend { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-end; font-size: 11.5px; color: var(--ink-3); margin: 0 -34px 4px 0; }
.tl-legend span { display: inline-flex; align-items: center; gap: 5px; }
.tl-legend i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.tl-legend .planned i { background: transparent; border: 1.5px dashed var(--ink-3); width: 7px; height: 7px; }
.tl-row { display: grid; position: relative; padding-bottom: 14px; }
.tl-row.rev { direction: rtl; }
.tl-row > * { direction: ltr; }
/* U-turns joining one row to the next */
.tl-row.turn-r::after, .tl-row.turn-l::after { content: ''; position: absolute; top: calc(var(--line-y) - 1.5px); height: calc(100% + 3px); width: 30px;
  border: 3px dashed var(--line); box-sizing: border-box; pointer-events: none; }
.tl-row.turn-r::after { right: -30px; border-left: 0; border-radius: 0 40px 40px 0; }
.tl-row.turn-l::after { left: -30px; border-right: 0; border-radius: 40px 0 0 40px; }
.tl-row.turn-done::after { border-style: solid; border-color: var(--accent-2); }
.tl-cell { position: relative; padding: calc(var(--line-y) + 16px) 6px 0; min-width: 0; }
.tl-row.rev .tl-cell { direction: rtl; }
.tl-row.rev .tl-cell > .tl-card { direction: ltr; }
/* line from this node to the next one (inline-start is the side the snake comes from) */
.tl-cell .seg { position: absolute; top: calc(var(--line-y) - 1.5px); inset-inline-start: 50%; width: 100%; height: 0; border-top: 3px dashed var(--line); }
.tl-cell .seg.to-edge { width: 50%; }
.tl-cell .seg.done { border-top-style: solid; border-top-color: var(--accent-2); }
.tl-cell .node { position: absolute; top: calc(var(--line-y) - 11px); inset-inline-start: calc(50% - 11px); width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font: 700 12px/1 var(--sans); color: #fff; background: var(--c); box-shadow: 0 0 0 3px var(--surface), 0 1px 4px rgba(0,0,0,.2); z-index: 1; }
.tl-cell.is-planned .node { background: var(--surface); border: 2px dashed var(--c); box-sizing: border-box; box-shadow: 0 0 0 3px var(--surface); }
.tl-today { position: absolute; top: calc(var(--line-y) - 30px); inset-inline-start: 0; transform: translateX(-50%); z-index: 2; font-size: 10.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--accent-2); padding: 2px 7px; border-radius: 99px; white-space: nowrap; }
.tl-row.rev .tl-today { transform: translateX(50%); }
.tl-today::after { content: ''; position: absolute; left: 50%; bottom: -4px; margin-left: -4px; border: 4px solid transparent; border-bottom: 0; border-top-color: var(--accent-2); }
.tl-card { height: 100%; box-sizing: border-box; padding: 7px 9px 8px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--c);
  font-size: 12px; line-height: 1.35; color: var(--ink-2); }
.tl-cell.is-planned .tl-card { border-style: dashed; border-top-style: dashed; background: transparent; }
.tl-date { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.tl-inst { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--c); margin: 1px 0 3px; }
.tl-what { overflow-wrap: anywhere; }

/* ---------- tabs ---------- */
.misp-tabs { position: sticky; top: 0; z-index: 3; background: var(--bg); display: flex; gap: 2px; border-bottom: 1px solid var(--line); padding: 0 22px; max-width: 1180px; margin: 10px auto 0; overflow-x: auto; }
.misp-tabs button { border: 0; background: none; padding: 10px 12px 9px; cursor: pointer; font-size: 13.5px; color: var(--ink-2); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.misp-tabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.misp-tabs .count { font-size: 11px; color: var(--ink-3); margin-left: 4px; font-weight: 400; }

/* ---------- common bits ---------- */
.lede { color: var(--ink-2); max-width: 820px; margin: 14px 0 6px; font-size: 13.5px; line-height: 1.5; }
.section-title { font-size: 15px; font-weight: 700; margin: 26px 0 10px; display: flex; align-items: baseline; gap: 10px; }
.section-title .sub { font-weight: 400; font-size: 12.5px; color: var(--ink-3); }
.inst { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 5px; white-space: nowrap; }
.inst.com { color: var(--com); background: var(--com-soft); }
.inst.ep { color: var(--ep); background: var(--ep-soft); }
.inst.cou { color: var(--cou); background: var(--cou-soft); }
.inst.rep { color: var(--cou); background: transparent; border: 1px dashed var(--cou); }
.sev { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 5px; }
.sev.high { color: var(--sev-high); background: var(--sev-high-soft); }
.sev.medium { color: var(--sev-med); background: var(--sev-med-soft); }
.sev.low { color: var(--sev-low); background: var(--sev-low-soft); }
.status { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; }
.status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status.support { color: var(--st-support); } .status.mixed { color: var(--st-mixed); } .status.alternative { color: var(--st-alternative); } .status.compromise { color: var(--st-compromise); }
.gdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--g, #999); vertical-align: middle; }
.act-badge { font-size: 11.5px; font-weight: 600; color: var(--ink-2); background: var(--chip); padding: 2px 7px; border-radius: 5px; white-space: nowrap; }
.action { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; background: var(--chip); color: var(--ink-2); }
.action.insert, .action.new, .action.ep-new { background: #e3f1e8; color: #1f5c3a; }
.action.delete { background: var(--sev-high-soft); color: var(--sev-high); }
.action.replace, .action.amend, .action.wording { background: var(--com-soft); color: var(--com); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .action.insert, :root:not([data-theme="light"]) .action.new, :root:not([data-theme="light"]) .action.ep-new { background: #1f3527; color: #8fd3aa; } }
.empty-note { padding: 30px 0; color: var(--ink-3); }

/* ---------- overview ---------- */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.theme-card { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 14px 16px 12px; cursor: pointer; transition: border-color .12s, box-shadow .12s; display: flex; flex-direction: column; gap: 8px; }
.theme-card:hover { border-color: var(--accent-2); box-shadow: var(--shadow); }
.theme-card h3 { margin: 0; font-size: 15px; }
.theme-card .desc { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.theme-card .stats { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--ink-2); }
.theme-card .stats b { color: var(--ink); font-variant-numeric: tabular-nums; }
.theme-card .council-line { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; }
.theme-card .top-issues { font-size: 12.5px; color: var(--ink-2); border-top: 1px solid var(--line-2); padding-top: 8px; margin-top: auto; }
.theme-card .top-issues div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 1px 0; }
.bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--line-2); }
.bar span { display: block; height: 100%; }
table.acts-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.acts-table th, .acts-table td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line-2); }
.acts-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 700; }
.acts-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.acts-table tbody tr { cursor: pointer; }
.acts-table tbody tr:hover { background: var(--surface-2); }

/* ---------- change list ---------- */
.list-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 16px 0 8px; font-size: 13px; color: var(--ink-2); }
.list-head .sep { flex: 1; }
.act-group-title { font-size: 13px; font-weight: 700; margin: 18px 0 6px; color: var(--ink-2); display: flex; gap: 8px; align-items: baseline; }
.act-group-title .n { font-weight: 400; color: var(--ink-3); font-size: 12px; }
.change { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); margin: 0 0 8px; }
.change > summary { list-style: none; cursor: pointer; padding: 10px 12px; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: start; }
.change > summary::-webkit-details-marker { display: none; }
.change[open] > summary { border-bottom: 1px solid var(--line-2); }
.change .c-title { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-weight: 600; font-size: 14px; }
.change .c-title .lbl { color: var(--ink); }
.change .c-sub { grid-column: 1; font-size: 12.5px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 5px 10px; align-items: center; }
.change .c-snip { grid-column: 1; font-size: 12.5px; color: var(--ink-3); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.4; }
.change .c-right { grid-row: 1 / span 3; grid-column: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.change .c-body { padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 14px; }
.c-section h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; display: flex; gap: 8px; align-items: center; color: var(--ink-2); }
.instr { font-size: 12.5px; color: var(--ink-2); margin: 0 0 6px; }
.legal { font-family: var(--serif); font-size: 14.5px; line-height: 1.55; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 8px; padding: 10px 14px; max-height: 420px; overflow: auto; }
.legal p { margin: 0 0 .5em; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.compare .col-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin-bottom: 4px; }
.amend { border: 1px solid var(--line-2); border-radius: 8px; padding: 9px 11px; margin: 0 0 8px; border-left: 3px solid var(--ep); }
.amend.rap { border-left-color: var(--ep); background: var(--ep-soft); }
.amend .a-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12.5px; margin-bottom: 6px; }
.amend .a-head b { font-weight: 700; }
.amend .a-loc { font-size: 12px; color: var(--ink-3); }
.amend .legal { font-size: 13.5px; max-height: 300px; padding: 8px 10px; background: var(--surface); }
.amend em { font-style: normal; background: color-mix(in srgb, var(--ep) 18%, transparent); border-radius: 2px; padding: 0 1px; }
.amend .before em { background: color-mix(in srgb, var(--sev-high) 16%, transparent); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--sev-high) 60%, transparent); }
.amend .just { font-size: 12.5px; color: var(--ink-2); margin-top: 6px; }
.amend .just summary { cursor: pointer; color: var(--ink-3); }
.flag-item { border-radius: 8px; padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--line-2); font-size: 13px; margin: 0 0 6px; }
.flag-item .f-detail { font-size: 12px; color: var(--ink-2); margin-top: 4px; font-family: var(--serif); }
.council-item { border-radius: 8px; padding: 9px 11px; background: var(--surface-2); border: 1px solid var(--line-2); border-left: 3px solid var(--cou); font-size: 13px; margin: 0 0 8px; }
.council-item .ci-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 4px; }
.council-item .ci-head b { font-size: 13.5px; }
.council-item .src { font-size: 11.5px; color: var(--ink-3); margin-top: 5px; }
.council-item .reported { margin-top: 6px; font-size: 12.5px; padding: 6px 8px; border: 1px dashed var(--cou); border-radius: 6px; }
.c-links { display: flex; flex-wrap: wrap; gap: 8px; }
.show-more { display: block; margin: 12px auto; }
.mandate { font-size: 12.5px; padding: 5px 8px; background: var(--surface-2); border-radius: 6px; margin: 0 0 4px; }

/* ---------- issues / council / parliament ---------- */
.check-card { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 12px 14px; margin: 0 0 10px; }
.check-card h3 { margin: 0 0 4px; font-size: 14.5px; display: flex; gap: 8px; align-items: center; }
.check-card .how { font-size: 12.5px; color: var(--ink-2); margin: 0 0 8px; }
.issue-row { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: start; padding: 7px 0; border-top: 1px solid var(--line-2); font-size: 13px; cursor: pointer; }
.issue-row:hover { background: var(--surface-2); }
.issue-row .what { color: var(--ink-2); }
.issue-row .what b { color: var(--ink); }
.council-full { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 12px 14px; margin: 0 0 10px; border-left: 4px solid var(--cou); }
.council-full h3 { margin: 0; font-size: 14.5px; }
.council-full .meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 12.5px; color: var(--ink-2); margin: 4px 0 6px; }
.council-full p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.group-bars { display: flex; flex-direction: column; gap: 5px; max-width: 640px; }
.group-bar { display: grid; grid-template-columns: 110px 1fr 60px; gap: 8px; align-items: center; font-size: 12.5px; }
.group-bar .track { height: 12px; background: var(--line-2); border-radius: 3px; overflow: hidden; display: flex; }
.group-bar .track span { display: block; height: 100%; }
.group-bar .num { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.statement { font-family: var(--serif); font-size: 14px; line-height: 1.55; max-height: 280px; overflow: auto; background: var(--surface-2); border-radius: 8px; padding: 10px 14px; border: 1px solid var(--line-2); }
.statement p { margin: 0 0 .6em; }
.src-list { font-size: 13px; }
.src-list li { margin: 0 0 6px; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 12px; color: var(--ink-2); align-items: center; }

/* ---------- clearer change cards & moves ---------- */
.change .c-title .ttl { font-weight: 500; color: var(--ink-2); }
.change .c-what { grid-column: 1; font-size: 13px; color: var(--ink); line-height: 1.4; }
.action.moved { background: #efe6fb; color: #5b2ea6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .action.moved { background: #2e2344; color: #c7a8f5; } }
table.moves-table { border-collapse: collapse; font-size: 12.5px; width: 100%; }
.moves-table th, .moves-table td { text-align: left; vertical-align: top; padding: 5px 8px; border-bottom: 1px solid var(--line-2); }
.moves-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.moves-table a { text-decoration: none; }

/* ---------- fines guide ---------- */
.fines-answer { max-width: 900px; font-size: 14px; line-height: 1.6; }
.fines-answer p { margin: 0 0 10px; }
.regime-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
table.regime-table { border-collapse: collapse; font-size: 12.5px; min-width: 1000px; width: 100%; }
.regime-table th, .regime-table td { text-align: left; vertical-align: top; padding: 9px 10px; border-bottom: 1px solid var(--line-2); line-height: 1.45; }
.regime-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); background: var(--surface-2); position: sticky; top: 0; }
.regime-table td:first-child { min-width: 180px; }
.regime-table tbody tr:hover { background: var(--surface-2); }
.regime-note { margin-top: 6px; font-size: 12px; color: var(--sev-med); }
.chip-col { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.chip-col .chip { text-align: left; white-space: normal; }

@media (max-width: 900px) {
  body.misp { overflow: auto; }
  .misp-app { flex-direction: column; }
  #filters { width: auto; max-height: none; border-right: 0; border-bottom: 1px solid var(--line); }
  #main { overflow: visible; }
  .inst-row { grid-template-columns: 1fr; }
  .compare { grid-template-columns: 1fr; }
  #hero, #view { padding: 0 16px; }
  .misp-tabs { padding: 0 16px; }
}

/* ---------- ESMA governance tab ---------- */
.gov-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin: 12px 0 14px; }
.gov-tile { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 10px 12px; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; border-top: 3px solid var(--accent-2); }
.gov-tile b { display: block; color: var(--ink); font-size: 13.5px; margin-bottom: 3px; }
.gov-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--ink-2); margin: 0 0 8px; }
.gov-legend span { display: inline-flex; align-items: center; gap: 5px; }
.gov-legend i { width: 12px; height: 12px; border-radius: 4px; background: var(--tag); }
.gov-legend .seat-key i { border-radius: 50%; width: 10px; height: 10px; }
.gov-pair { display: grid; grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr); align-items: start; gap: 6px; }
.gov-arrow-mid { align-self: center; font-size: 26px; color: var(--accent-2); text-align: center; font-weight: 700; }
.gov-fig { margin: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); padding: 10px 10px 6px; min-width: 0; }
.gov-fig.prop { background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface-2)); border-color: color-mix(in srgb, var(--accent-2) 35%, var(--line)); }
.gov-fig figcaption { display: flex; flex-direction: column; margin: 0 4px 6px; }
.gov-fig figcaption b { font-size: 14px; }
.gov-fig figcaption span { font-size: 11.5px; color: var(--ink-3); }
.gov-svg { width: 100%; height: auto; display: block; font-family: var(--sans); }
.gov-rect { fill: var(--surface); stroke: var(--line); stroke-width: 1.2; transition: stroke .15s, filter .15s; }
.gov-stripe { fill: var(--tag); }
.gov-box { cursor: pointer; outline: none; }
.gov-box:hover .gov-rect, .gov-box:focus-visible .gov-rect { stroke: var(--accent-2); stroke-width: 2; filter: drop-shadow(0 3px 6px rgba(20,25,35,.12)); }
.gov-box.picked .gov-rect { stroke: var(--accent-2); stroke-width: 2.6; }
.gov-box.tag-new .gov-rect { fill: color-mix(in srgb, var(--st-support) 9%, var(--surface)); stroke: var(--st-support); stroke-width: 1.8; }
.gov-box.tag-replaced .gov-rect, .gov-box.tag-abolished .gov-rect { stroke-dasharray: 5 3; }
.gov-box.ghost .gov-rect { fill: transparent; stroke: var(--st-alternative); stroke-dasharray: 5 4; }
.gov-box.ghost .gov-title { text-decoration: line-through; fill: var(--ink-3); }
.gov-title { font-size: 13px; font-weight: 700; fill: var(--ink); }
.gov-line { font-size: 10.8px; fill: var(--ink-2); }
.gov-tag { fill: var(--tag); }
.gov-tag-t { font-size: 9.5px; font-weight: 700; fill: #fff; letter-spacing: .04em; text-transform: uppercase; }
.gov-edge { fill: none; stroke: var(--ink-3); stroke-width: 1.6; }
.gov-edge.warn { stroke: var(--st-alternative); stroke-dasharray: 4 3; }
.gov-arrowhead { fill: var(--ink-3); }
.gov-elabel rect { fill: var(--surface); stroke: var(--line); }
.gov-elabel text { font-size: 10px; font-weight: 600; fill: var(--ink-2); }
.gov-elabel.warn text { fill: var(--st-alternative); }
.seat { stroke: var(--surface); stroke-width: 1.4; }
.seat.nca, .gov-legend i.nca { fill: var(--com); background: var(--com); }
.seat.indep, .gov-legend i.indep { fill: #d4a017; background: #d4a017; }
.seat.chair, .gov-legend i.chair { fill: var(--ink); background: var(--ink); }
.seat.nonvote, .gov-legend i.nonvote { fill: var(--surface); stroke: var(--ink-3); stroke-width: 1.3; background: var(--surface); border: 1.3px solid var(--ink-3); box-sizing: border-box; }
.seat-lbl { font-size: 9.5px; fill: var(--ink-3); }
.gov-card { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 12px 14px; margin: 0 0 10px; scroll-margin-top: 60px; transition: box-shadow .3s; }
.gov-card.flash { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2) 45%, transparent); }
.gov-card h3 { margin: 0 0 8px; font-size: 14.5px; }
.gov-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gov-col { border-radius: 8px; padding: 8px 10px; font-size: 12.8px; line-height: 1.45; }
.gov-col.cur { background: var(--surface-2); }
.gov-col.prop { background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface)); }
.gov-col-h { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.gov-col ul { margin: 0; padding-left: 16px; }
.gov-col li { margin: 0 0 6px; }
.gov-col li a { text-decoration: none; font-weight: 700; }
.gov-card .chip-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 8px; }
.gov-card .chip-row .instr { margin: 0 4px 0 0; }
.gov-card .chip, .src-list .chip { cursor: pointer; }
@media (max-width: 900px) {
  .gov-pair { grid-template-columns: minmax(0, 1fr); }
  .gov-arrow-mid { transform: rotate(90deg); }
  .gov-cols { grid-template-columns: 1fr; }
}

body.wide-view #view { max-width: 1440px; }
.filter-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 8px 0 12px; padding: 9px 12px; border-radius: 9px;
  background: var(--hl); border: 1px solid var(--hl-line); font-size: 13px; color: var(--ink); }
.filter-banner .f-chip { cursor: pointer; }
.filter-banner .btn { margin-left: auto; font-weight: 600; }
.compare.single { grid-template-columns: minmax(0, 1fr); }
.legal.struck { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--sev-high) 60%, transparent); color: var(--ink-2); }
/* the filter panel collapses to a strip with a button to bring it back */
#filters-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); }
#filters-rail:hover { color: var(--accent); background: var(--accent-soft); }
#filters-rail .rail-label { writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .04em; }
body.filters-collapsed #filters { display: none; }
body.filters-collapsed #filters-rail { display: flex; }
.f-title .f-hide { margin-left: auto; }
@media (max-width: 900px) {
  #filters-rail { width: auto; flex-direction: row; justify-content: center; padding: 8px; border-right: 0; border-bottom: 1px solid var(--line); }
  #filters-rail .rail-label { writing-mode: horizontal-tb; transform: none; }
}
.f-title button + .f-hide { margin-left: 12px; }
/* the tab strip is not a scroll box of its own (a sticky element that also scrolls jitters under the mouse wheel):
   on a narrow screen the tabs wrap onto a second line */
.misp-tabs { overflow: visible; flex-wrap: wrap; }
/* not pinned while scrolling: a sticky row in this scroll area wobbles in Chrome and Edge on scaled Windows displays */
.misp-tabs { position: relative; top: auto; }
.legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; }

/* the Changes tab: each change as a card, current law next to the proposal (the governance tab's format) */
.chg-card h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.chg-card h3 .ttl { font-weight: 400; color: var(--ink-2); }
.chg-card .gov-col-h { display: flex; align-items: center; gap: 6px; }
.chg-card .cc-link { text-decoration: none; font-weight: 700; }
.chg-card .cc-where { margin-left: auto; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-3); }
.chg-card .cc-instr { margin: 0 0 6px; font-size: 12px; }
.chg-card .cc-text { max-height: 340px; overflow: auto; }
.chg-card .cc-text .legal, .chg-card .legal.cc-text { background: none; border: 0; padding: 0; max-height: none; font-size: 13.5px; }
.chg-card .gov-col .instr { margin: 0; }

/* the Changes tab as a redline: the text in force with the Commission's deletions struck and additions underlined */
.chg-card .rl-box { border-radius: 8px; background: var(--surface-2); padding: 10px 14px 8px; }
.chg-card .rl-head { display: flex; align-items: baseline; gap: 10px; font-size: 12px; color: var(--ink-3); margin-bottom: 6px; }
.chg-card .rl-instr { font-style: italic; }
.chg-card .rl-key { margin-left: auto; white-space: nowrap; }
.chg-card .rl-key del, .chg-card .rl-key ins { padding: 0 4px; }
.chg-card .rl-text { background: none; border: 0; padding: 0; max-height: 420px; overflow: auto; font-size: 14px; }
.chg-card .rl-text p { margin: 0 0 .5em; }
/* track changes in the colour of the institution that proposes them, as Word colours each author: the Commission blue,
   the Council green, the Parliament purple (--tc); added words underlined, deleted words struck through with a thin line
   in that colour, the words themselves left dark enough to read */
:root { --tc: var(--com); }
.act-body .rl-chg.v-cou, .rl-key-row .k.cou { --tc: var(--cou); }
.act-body .rl-chg.v-ep, .rl-key-row .k.ep { --tc: var(--ep); }
.redline del, .chg-card .rl-key del, .rl-key-row del { color: var(--ink-2); background: color-mix(in srgb, var(--tc) 9%, transparent); text-decoration: line-through; text-decoration-color: var(--tc); text-decoration-thickness: 1px; }
.redline ins, .chg-card .rl-key ins, .rl-key-row ins { color: var(--tc); background: color-mix(in srgb, var(--tc) 12%, transparent); text-decoration: underline; text-decoration-color: var(--tc); text-underline-offset: 2px; }
.chg-card .rl-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line-2); }
.chg-card .rl-foot .instr { margin-right: auto; }

/* the amended acts as islands down the side (no panel), the search in the top bar */
#filters { width: 240px; background: none; border-right: 0; padding: 14px 10px 40px 16px; display: flex; flex-direction: column; gap: 5px; }
#filters .islands-h { display: flex; align-items: baseline; justify-content: space-between; margin: 4px 2px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
#filters .islands-h .linkish { font-size: 11.5px; text-transform: none; letter-spacing: 0; font-weight: 500; }
.act-island { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 7px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: 500 13px var(--sans); cursor: pointer; box-shadow: var(--shadow); }
.act-island:hover { border-color: color-mix(in srgb, var(--accent-2) 50%, var(--line)); }
.act-island .n { margin-left: auto; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.act-island.on { background: var(--accent-soft); border-color: var(--accent-2); color: var(--accent); }
.act-island.on .n { color: var(--accent); }
.act-island.zero { opacity: .45; }

/* ---------- the articles index beside the changes (its own scroll; no sticky positioning) ---------- */
#chg-index { width: 248px; flex: none; display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--line); background: var(--surface); }
#chg-index[hidden] { display: none; }
#chg-index .ix-head { padding: 14px 14px 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
#chg-index .ix-filter { margin: 0 12px 8px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); font: inherit; font-size: 12.5px; }
#chg-index .ix-scroll { flex: 1; overflow-y: auto; min-height: 0; padding: 0 6px 40px; }
#chg-index .ix-act { display: flex; justify-content: space-between; align-items: baseline; margin: 12px 8px 3px; font-size: 12px; font-weight: 700; color: var(--ink); }
#chg-index .ix-act .n { font-weight: 500; font-size: 11px; color: var(--ink-3); }
#chg-index .ix-list { list-style: none; margin: 0; padding: 0; }
#chg-index .ix-list button { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: baseline; width: 100%; text-align: left; border: 0; border-left: 3px solid transparent; border-radius: 0 6px 6px 0; background: none; padding: 3px 6px 3px 7px; cursor: pointer; font: inherit; font-size: 12.5px; color: var(--ink-2); line-height: 1.35; }
#chg-index .ix-list button:hover { background: var(--accent-soft); color: var(--ink); }
#chg-index .ix-art { font-weight: 600; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
#chg-index .ix-ttl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); }
#chg-index .ix-n { font-size: 10.5px; color: var(--ink-3); background: var(--surface-2); border-radius: 99px; padding: 0 6px; }
#chg-index li.on > button { background: var(--accent-soft); border-left-color: var(--accent); }
#chg-index li.on .ix-ttl { color: var(--ink-2); }
.chg-card.ix-flash { animation: ix-flash 1.6s ease-out; }
@keyframes ix-flash { 0% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); } 100% { box-shadow: 0 0 0 3px transparent; } }
@media (max-width: 1180px) { #chg-index { width: 210px; } }
@media (max-width: 900px) { #chg-index { display: none !important; } }

/* ---------- the act view: the text in force with the proposed changes marked up ---------- */
.page-island { font-weight: 600; }
#filters .islands-h { margin-top: 10px; }
.art-nav-box { margin: 2px 0 6px 6px; padding: 6px 0 4px 8px; border-left: 2px solid var(--accent-soft); display: flex; flex-direction: column; gap: 4px; }
.art-nav-box .ix-filter { margin: 0; padding: 5px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); font: inherit; font-size: 12.5px; }
.art-nav-chk { font-size: 12px; color: var(--ink-2); display: flex; align-items: center; gap: 5px; }
.art-nav { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow-y: auto; }
.art-nav button, .art-nav a { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: baseline; width: 100%; text-align: left; border: 0; border-left: 3px solid transparent; border-radius: 0 6px 6px 0; background: none; padding: 3px 6px 3px 7px; cursor: pointer; font: inherit; font-size: 12.5px; color: var(--ink-2); line-height: 1.35; }
.art-nav button:hover, .art-nav a:hover { background: var(--accent-soft); color: var(--ink); }
.art-nav .ix-art { font-weight: 500; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.art-nav li.chg .ix-art { font-weight: 700; color: var(--ink); }
.art-nav .ix-ttl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); }
.art-nav .ix-n { font-size: 10.5px; color: var(--accent); background: var(--accent-soft); border-radius: 99px; padding: 0 6px; }
.art-nav li.on > button, .art-nav li.on > a { background: var(--accent-soft); border-left-color: var(--accent); }
.act-head { margin: 18px 0 10px; }
.act-head h2 { margin: 0 0 2px; font-size: 22px; }
.rl-key-row { display: flex; gap: 10px; align-items: center; margin-top: 6px; font-size: 12px; }
.rl-key-row .k { display: inline-flex; align-items: center; gap: 4px; }
.rl-key-row .k b { font-weight: 600; color: var(--tc); margin-right: 2px; }
.rl-key-row del, .rl-key-row ins { padding: 0 4px; }
.act-body { font-family: var(--serif); font-size: 15px; line-height: 1.6; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 26px 30px; }
.act-body .art-sec { padding: 10px 0 6px; border-bottom: 1px solid var(--line-2); scroll-margin-top: 10px; }
.act-body .art-sec:last-child { border-bottom: 0; }
.act-body .art-h { font-family: var(--sans); font-size: 14px; margin: 6px 0; }
.act-body p { margin: 0 0 .55em; }
.act-body .rl-chg { margin: 4px 0 8px; padding: 4px 0 2px 10px; border-left: 3px solid var(--com, #2a78d6); border-radius: 0 4px 4px 0; background: color-mix(in srgb, var(--accent) 4%, transparent); }
.act-body .rl-chg.ins, .act-body .rl-chg.del { border-left-color: var(--tc); }
.act-body .rl-chg.note { border-left-color: var(--ink-3); }
.act-body .rl-chg .legal { background: none; border: 0; padding: 0; max-height: none; overflow: visible; font-size: inherit; }
.act-body .rl-new-art .art-h { color: var(--com); }
/* an article deleted: its text struck, in the colour of the version deleting it, the change blocks in it left as they are
   (a line-through set on a box runs through everything inside it, so it is set on the lines of the text in force) */
.act-body .rl-del-art { --dc: var(--com); } .act-body .rl-del-art.del-cou { --dc: var(--cou); } .act-body .rl-del-art.del-ep { --dc: var(--ep); }
.act-body .rl-del-art :is(p, td, li, .art-h):not(.rl-chg *):not(.rl-stack *):not(.div-h *) { text-decoration: line-through; text-decoration-color: var(--dc); color: color-mix(in srgb, var(--dc) 70%, var(--ink-3)); background: color-mix(in srgb, var(--dc) 5%, transparent); }
.act-body .ix-flash, .rl-chg.ix-flash { animation: ix-flash 1.6s ease-out; }
body.act-view #view { max-width: 980px; }
@media (max-width: 820px) { .act-body { padding: 6px 12px 20px; } }

/* versions: Commission / Council / Parliament / all three */
.ver-bar { display: inline-flex; margin: 10px 0 6px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); }
.ver-btn { font: inherit; font-size: 13px; padding: 6px 14px; border: 0; border-right: 1px solid var(--line); background: none; color: var(--ink-2); cursor: pointer; }
.ver-btn:last-child { border-right: 0; }
.ver-btn:hover { background: var(--line-2); }
.ver-btn.on { font-weight: 600; color: #fff; }
.ver-btn.com.on { background: var(--com); } .ver-btn.cou.on { background: var(--cou); } .ver-btn.ep.on { background: var(--ep); } .ver-btn.all.on { background: var(--ink-2); }
:root[data-theme="dark"] .ver-btn.on { color: #111; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ver-btn.on { color: #111; } }
.ver-note-box { font-size: 12.5px; color: var(--ink-2); max-width: 760px; }
.ver-note-box a { color: inherit; }
.vt.com { color: var(--com); } .vt.cou { color: var(--cou); } .vt.ep { color: var(--ep); }
.act-body .rl-chg { position: relative; }
.act-body .rl-chg.v-cou { background: color-mix(in srgb, var(--cou-soft) 55%, transparent); }
.act-body .rl-chg.v-ep { background: color-mix(in srgb, var(--ep-soft) 55%, transparent); }
.act-body .v-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 4px; font-family: var(--sans); font-size: 12px; }
.v-tag { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .02em; padding: 1px 7px; border-radius: 10px; }
.v-tag.com { color: var(--com); background: var(--com-soft); } .v-tag.cou { color: var(--cou); background: var(--cou-soft); } .v-tag.ep { color: var(--ep); background: var(--ep-soft); }
.v-amended { color: var(--ep); font-weight: 600; }
.act-body .rl-stack { margin: 4px 0 10px; padding: 2px 0 2px 8px; border-left: 2px dotted var(--line); }
.act-body .rl-stack > .rl-chg { margin: 3px 0; }
.act-body .rl-stack > .rl-chg.note { padding-top: 0; padding-bottom: 0; }
.act-body .rl-stack > .rl-chg.note .v-row { margin: 3px 0; }
.act-body .rl-chg.note.v-cou { border-left-color: var(--cou); } .act-body .rl-chg.note.v-ep { border-left-color: var(--ep); }
/* comment bubbles, as in the margin of a Word document */
.rl-cmt { font-family: var(--sans); font-size: 12px; }
.rl-cmt > summary { list-style: none; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; padding: 1px 8px 1px 6px; border-radius: 10px 10px 10px 2px; border: 1px solid currentColor; user-select: none; }
.rl-cmt > summary::-webkit-details-marker { display: none; }
.rl-cmt.cou > summary { color: var(--cou); background: var(--cou-soft); }
.rl-cmt.ep > summary { color: var(--ep); background: var(--ep-soft); }
.rl-cmt[open] > summary { box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 25%, transparent); }
.cmt-ico { display: inline-flex; }
.cmt-body { position: absolute; z-index: 30; right: 0; top: 26px; width: min(380px, calc(100vw - 48px)); max-height: 60vh; overflow: auto; padding: 10px 12px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-top: 3px solid var(--ink-3); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18); font-size: 13px; line-height: 1.5; }
.rl-cmt.cou .cmt-body { border-top-color: var(--cou); } .rl-cmt.ep .cmt-body { border-top-color: var(--ep); }
.cmt-title { font-weight: 600; margin-bottom: 4px; }
.cmt-am + .cmt-am { border-top: 1px solid var(--line-2); margin-top: 8px; padding-top: 8px; }
.cmt-am-h { font-weight: 600; }
.cmt-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding-bottom: 7px; margin-bottom: 7px; border-bottom: 1px solid var(--line-2); }
.cmt-grp { font: 600 11px/1.6 var(--sans); padding: 0 6px; border-radius: 4px; color: var(--ep); background: var(--ep-soft); }
.cmt-party { font-size: 12.5px; color: var(--ink-2); }
.cmt-just { margin: 4px 0 6px; white-space: pre-line; }
.cmt-src { display: inline-block; margin-top: 4px; font-size: 12px; color: var(--ink-2); }
@media (max-width: 640px) { .cmt-body { right: auto; left: -10px; } }

/* Fines: entity by entity, step by step */
.fx-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.fx-tab { font: inherit; font-size: 13px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink-2); cursor: pointer; }
.fx-tab:hover { border-color: var(--ink-3); }
.fx-tab.new::after { content: 'new'; margin-left: 6px; font-size: 10px; font-weight: 600; color: var(--com); }
.fx-tab.on { background: var(--com); border-color: var(--com); color: #fff; }
.fx-tab.on.new::after { color: inherit; opacity: .8; }
.fx-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px 10px; margin-bottom: 22px; }
.fx-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 10px; }
.fx-head h3 { margin: 0; font-size: 18px; }
.fx-status { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 10px; background: var(--line-2); color: var(--ink-2); }
.fx-status.new { background: var(--com-soft); color: var(--com); }
.fx-steps { width: 100%; border-collapse: collapse; font-size: 13.5px; line-height: 1.5; }
.fx-steps th, .fx-steps td { text-align: left; vertical-align: top; padding: 8px 10px; border-top: 1px solid var(--line-2); }
.fx-steps thead th { font-size: 12px; color: var(--ink-3); font-weight: 600; border-top: 0; }
.fx-steps tbody th { width: 150px; font-weight: 600; color: var(--ink); }
.fx-steps tbody td { width: calc(50% - 75px); }
.fx-steps tr.same td:last-child { color: var(--ink-3); }
.fx-cite { display: inline; font: inherit; font-size: 12.5px; padding: 0 5px; margin: 0 1px; border-radius: 4px; border: 0; cursor: pointer; text-decoration: none; white-space: nowrap; }
.fx-cite.law { background: var(--line-2); color: var(--ink); }
.fx-cite.prop { background: var(--com-soft); color: var(--com); }
.fx-cite.cou { background: var(--cou-soft); color: var(--cou); }
.fx-cite.ep { background: var(--ep-soft); color: var(--ep); }
.fx-cite:hover { text-decoration: underline; }
.fx-range, .fx-coeff table { border-collapse: collapse; margin: 6px 0; font-size: 12.5px; width: 100%; }
.fx-range td, .fx-coeff td, .fx-coeff th { padding: 3px 6px; border-top: 1px solid var(--line-2); vertical-align: top; }
.fx-coeff th { text-align: left; font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.fx-range td.num, .fx-coeff td.num { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.fx-coeff { display: grid; grid-template-columns: 1fr; gap: 2px; margin-bottom: 4px; }
.fx-others { display: grid; gap: 6px; margin: 12px 0 4px; font-size: 13px; }
.fx-other { display: flex; gap: 8px; align-items: baseline; padding: 6px 10px; border-radius: 6px; }
.fx-other.cou { background: color-mix(in srgb, var(--cou-soft) 60%, transparent); }
.fx-other.ep { background: color-mix(in srgb, var(--ep-soft) 60%, transparent); }
.fx-annex { margin-top: 14px; }
.fx-annex h4 { margin: 0 0 2px; font-size: 14px; }
.fx-key { margin: 12px 0 2px; font-size: 12px; }
@media (max-width: 760px) {
  .fx-steps, .fx-steps tbody, .fx-steps tr, .fx-steps th, .fx-steps td { display: block; width: auto !important; }
  .fx-steps thead { display: none; }
  .fx-steps tbody th { padding-bottom: 0; border-top: 1px solid var(--line); }
  .fx-steps tbody td { border-top: 0; padding-top: 4px; }
  .fx-steps tbody td:nth-of-type(1)::before { content: 'Today: '; font-weight: 600; color: var(--ink-3); }
  .fx-steps tbody td:nth-of-type(2)::before { content: 'Proposal: '; font-weight: 600; color: var(--com); }
}

/* the open act's articles: a column of their own, beside the panel of acts */
#art-col { width: 250px; flex: none; display: flex; flex-direction: column; min-height: 0; padding: 14px 8px 0 6px; border-right: 1px solid var(--line); }
#art-col[hidden] { display: none; }
#art-col .art-nav-box { flex: 1; min-height: 0; margin: 0; padding: 0; border-left: 0; }
#art-col .art-col-h { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 4px 2px 2px; }
#art-col .art-nav { flex: 1; max-height: none; min-height: 0; padding-bottom: 30px; }
@media (max-width: 900px) {
  #art-col { width: auto; max-height: 50vh; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px 14px; }
}

/* the act's heading, kept in view while reading */
#act-bar { position: fixed; z-index: 40; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(4px); border-bottom: 1px solid var(--line); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
#act-bar[hidden] { display: none; }
#act-bar .ab-in { max-width: 980px; margin: 0 auto; padding: 6px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
#act-bar .ab-title { font-size: 15px; }
#act-bar .ver-bar { margin: 0; }
#act-bar .ver-btn { padding: 4px 12px; }
#act-bar .rl-key-row { margin: 0; }
.act-body .rl-src { font-family: var(--sans); font-size: 12px; margin: 2px 0 6px; }

/* Fines, v2: act by act, steps as formulas */
.fx-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; margin: 4px 0 10px; }
.fx-act-h { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 10px; }
.fx-act-h h2 { margin: 0; font-size: 20px; }
.fx-sub { margin: -6px 0 10px; font-size: 12.5px; }
.fx-steps td.fx-n { width: 22px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.fx-steps tbody th { width: 170px; }
.fx-steps tbody td { width: auto; }
.fx-steps td.fx-law { width: 210px; }
.fx-steps td.fx-law .fx-cite { display: inline-block; margin: 0 0 4px; white-space: normal; text-align: left; }
.fx-st { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-3); }
.fx-st.new { color: var(--com); } .fx-st.changed, .fx-st.moved { color: #b26b00; } .fx-st.missing { color: #b42318; }
.fx-f { white-space: pre-line; color: var(--ink); }
.fx-now { margin-top: 4px; font-size: 12px; color: var(--ink-3); }
.fx-note { margin-top: 4px; font-size: 12px; color: #9a3412; }
.fx-cite .fx-mr { margin-left: 6px; font-size: 10.5px; opacity: .75; }
.fx-cite.new { background: var(--com-soft); color: var(--com); }
.fx-more { margin-top: 6px; font-size: 12.5px; }
.fx-more > summary { cursor: pointer; color: var(--ink-2); }
.fx-coeff { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fx-ex { margin: 12px 0 4px; padding: 8px 12px; border-left: 3px solid var(--com); background: color-mix(in srgb, var(--com-soft) 50%, transparent); font-size: 13px; }
.fx-ex ol { margin: 4px 0 0; padding-left: 20px; }
@media (max-width: 760px) {
  .fx-coeff { grid-template-columns: 1fr; }
  .fx-steps td.fx-n { display: none; }
  .fx-steps tbody td:nth-of-type(2)::before, .fx-steps tbody td:nth-of-type(3)::before { content: none; }
  .fx-steps td.fx-law { width: auto; }
}
.fx-steps .fx-range td:first-child { min-width: 150px; }
.fx-steps td.fx-law { width: 190px; }

/* titles, chapters and sections of the act */
.act-body .div-h { margin: 22px 0 4px; padding-top: 10px; text-align: center; font-family: var(--sans); }
.act-body .div-l { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.act-body .div-t { font-size: 14px; font-weight: 600; color: var(--ink); }
.act-body .div-h .rl-chg { text-align: left; font-family: var(--serif); }
.act-body .div-h.rl-del-div > .div-l, .act-body .div-h.rl-del-div > .div-t { text-decoration: line-through; text-decoration-color: var(--com); color: color-mix(in srgb, var(--com) 70%, var(--ink-3)); }

/* version toggles (any combination) */
.ver-btn { display: inline-flex; align-items: center; gap: 6px; }
.ver-chk { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border: 1.5px solid currentColor; border-radius: 3px; font-size: 10px; line-height: 1; opacity: .8; }
.ver-btn.on .ver-chk { opacity: 1; }
.act-body .rl-hide { display: none; }

/* Fines: the acts on one line, kept in view; entities collapsed */
.fx-tabs { flex-wrap: nowrap; overflow-x: auto; gap: 0; margin: 8px 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); scrollbar-width: thin; }
.fx-tab { flex: 1 0 auto; border: 0; border-right: 1px solid var(--line); border-radius: 0; padding: 6px 12px; white-space: nowrap; background: none; }
.fx-tab:last-child { border-right: 0; }
.fx-tab:hover { background: var(--line-2); }
.fx-tab.on { background: var(--com); color: #fff; }
.fx-tab.new::after { content: '•'; margin-left: 4px; font-size: 13px; }
#act-bar .fx-bar-in { max-width: none; padding: 6px 16px; }
#act-bar .fx-tabs { margin: 0; width: 100%; }
details.fx-card { padding: 0; }
details.fx-card > summary.fx-head { list-style: none; cursor: pointer; margin: 0; padding: 12px 16px; border-radius: 10px; }
details.fx-card > summary.fx-head::-webkit-details-marker { display: none; }
details.fx-card > summary.fx-head:hover { background: var(--line-2); }
details.fx-card[open] > summary.fx-head { border-bottom: 1px solid var(--line-2); border-radius: 10px 10px 0 0; }
details.fx-card > :not(summary) { margin-left: 16px; margin-right: 16px; }
details.fx-card > :last-child { margin-bottom: 12px; }
.fx-caret { width: 0; height: 0; border-left: 6px solid var(--ink-3); border-top: 5px solid transparent; border-bottom: 5px solid transparent; transition: transform .15s; align-self: center; }
details.fx-card[open] .fx-caret { transform: rotate(90deg); }
details.fx-card .fx-sub { margin-top: 10px; }
.fx-tab { flex: 1 1 auto; padding: 6px 8px; font-size: 12.5px; min-width: 0; }

/* proposed text laid out like the legal text: paragraphs, points and sub-points indented, markers hanging */
.redline p.rl-ind { padding-left: calc(var(--lvl, 0) * 2em + 2.3em); text-indent: -2.3em; }
.redline p.rl-cont { padding-left: calc(var(--lvl, 0) * 2em + 2.3em); }
.redline p.rl-head { text-align: center; font-style: italic; margin: .6em 0 .1em; }
.redline p.rl-head-t { font-style: normal; font-weight: 600; margin-top: 0; }
#act-bar .fx-bar-in { padding: 6px 0; }
#act-bar .fx-tabs { width: auto; flex: none; }
/* entity cards: the steps table stays inside the card; citations wrap inside their column */
details.fx-card > table.fx-steps { width: calc(100% - 32px); table-layout: fixed; }
.fx-steps th:first-child, .fx-steps td.fx-n { width: 28px; }
.fx-steps thead th:nth-child(2), .fx-steps tbody th { width: 150px; }
.fx-steps thead th:last-child, .fx-steps td.fx-law { width: 200px; }
.fx-steps td.fx-law .fx-cite { display: inline-block; max-width: 100%; box-sizing: border-box; white-space: normal; overflow-wrap: anywhere; }
/* a small "NEW" badge on acts with new ESMA fining powers */
.fx-tab.new::after { content: 'NEW'; display: inline-block; margin-left: 5px; padding: 0 4px; font-size: 8.5px; font-weight: 700; letter-spacing: .04em; line-height: 13px; vertical-align: 1px; border-radius: 3px; color: var(--com); background: var(--com-soft); }
.fx-tab.on.new::after { color: var(--com); background: #fff; }

/* in-page links that look like buttons (they are links so they can open in a new tab) */
a.act-island, a.fx-tab, a.chip, a.fx-cite, .art-nav a { text-decoration: none; color: inherit; box-sizing: border-box; }
a.act-island { color: var(--ink); }
a.act-island.on { color: var(--accent); background: var(--accent-soft); }
a.fx-tab { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink-2); }
a.fx-tab.on { color: #fff; }
a.fx-cite.new { color: var(--com); }
a.chip { display: inline-block; cursor: pointer; }

/* governance: legal-basis cards collapsed by default */
details.gov-card > summary.gov-sum { list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer; }
details.gov-card > summary.gov-sum::-webkit-details-marker { display: none; }
details.gov-card > summary.gov-sum h3 { margin: 0; }
details.gov-card[open] > summary.gov-sum { margin-bottom: 10px; }
details.gov-card[open] .fx-caret { transform: rotate(90deg); }

/* the article list while the act loads: placeholder rows with a soft shimmer */
.art-nav-skel { gap: 6px; }
.skel { display: block; border-radius: 6px; background: linear-gradient(90deg, var(--line) 0%, color-mix(in srgb, var(--line) 35%, var(--surface)) 50%, var(--line) 100%); background-size: 200% 100%; animation: skel-shimmer 1.4s ease-in-out infinite; animation-delay: var(--d, 0ms); }
.skel-input { height: 30px; border-radius: 7px; }
.skel-chk { height: 12px; width: 55%; margin: 2px 0 4px; }
.skel-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.skel-list li { display: flex; align-items: center; gap: 8px; padding: 0 6px 0 10px; animation: skel-in .3s ease-out both; animation-delay: var(--d, 0ms); }
.skel-list li .skel { animation-delay: var(--d, 0ms); }
.skel-num { width: 34px; height: 11px; flex: none; }
.skel-ttl { height: 11px; }
@keyframes skel-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes skel-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .skel, .skel-list li { animation: none; } }

/* governance: the key in a column to the right of the diagrams */
.gov-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: start; }
.gov-top .gov-legend { flex-direction: column; flex-wrap: nowrap; gap: 6px; margin: 34px 0 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); white-space: nowrap; }
.gov-legend-h { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.gov-top .gov-legend .gov-legend-h:not(:first-child) { margin-top: 8px; }
@media (max-width: 1000px) { .gov-top { grid-template-columns: minmax(0, 1fr); } .gov-top .gov-legend { flex-direction: row; flex-wrap: wrap; margin-top: 8px; white-space: normal; } }

/* governance: one diagram, current law <-> proposal */
.gov-one { margin: 0 0 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); padding: 12px 14px 8px; transition: background .5s; }
.gov-stage[data-view="prop"] { }
.gov-one:has(.gov-stage[data-view="prop"]) { background: color-mix(in srgb, var(--accent-soft) 40%, var(--surface-2)); }
.gov-one-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-bottom: 6px; }
.gov-tgl { position: relative; display: inline-flex; padding: 3px; border-radius: 999px; background: var(--line-2); border: 1px solid var(--line); }
.gov-tgl-b { position: relative; z-index: 1; font: 600 13px var(--sans); color: var(--ink-2); background: none; border: 0; padding: 6px 16px; border-radius: 999px; cursor: pointer; transition: color .3s; }
.gov-tgl-b[aria-pressed="true"] { color: #fff; }
.gov-tgl-pill { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px; background: var(--ink-2); box-shadow: 0 1px 3px rgba(0,0,0,.15); transition: transform .45s cubic-bezier(.3,.8,.2,1), background .45s; }
.gov-tgl:has([data-v="prop"][aria-pressed="true"]) .gov-tgl-pill { transform: translateX(100%); background: var(--accent-2, var(--com)); }
.gov-tgl-b { min-width: 168px; }
.gov-cap { display: flex; flex-direction: column; min-width: 0; }
.gov-cap b { font-size: 14px; }
.gov-cap span { font-size: 11.5px; color: var(--ink-3); }
.gov-one-h .gov-legend { margin: 0 0 0 auto; gap: 4px 12px; font-size: 11.5px; max-width: 520px; }
.gov-legend-sep { width: 1px; height: 12px; background: var(--line); }
.gov-stage { display: grid; }
.gov-stage > .gov-layer { grid-area: 1 / 1; min-width: 0; }
.gov-layer[aria-hidden="true"] { pointer-events: none; }
/* what moves */
.gov-layer .gov-box, .gov-layer .gov-elabel { transform-box: fill-box; transform-origin: center; transition: opacity .38s ease, transform .5s cubic-bezier(.25,.8,.25,1); transition-delay: calc(var(--i, 0) * 70ms); }
.gov-layer .gov-edge { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .45s ease, opacity .3s ease; transition-delay: calc(var(--i, 0) * 70ms + 120ms); }
.gov-layer .gov-edge.warn { stroke-dasharray: .012 .009; }
.gov-layer[aria-hidden="true"] .gov-box { opacity: 0; transform: translateY(6px) scale(.985); transition-delay: calc(var(--i, 0) * 40ms); }
.gov-layer[aria-hidden="true"] .gov-elabel { opacity: 0; transition-delay: 0ms; }
.gov-layer[aria-hidden="true"] .gov-edge { stroke-dashoffset: 1; opacity: 0; transition-delay: 0ms; }
.gov-layer[aria-hidden="true"] .gov-edge.warn { stroke-dashoffset: 0; }
/* the Management Board grows into the Executive Board; abolished bodies shrink away */
.gov-layer.prop[aria-hidden="true"] .gov-box[data-key="eb"] { transform: scaleX(.48); transform-origin: left center; opacity: 0; }
.gov-layer.prop .gov-box[data-key="eb"] { transform-origin: left center; }
.gov-layer.cur[aria-hidden="true"] .gov-box.tag-abolished, .gov-layer.cur[aria-hidden="true"] .gov-box.tag-replaced { transform: scale(.88); }
@media (prefers-reduced-motion: reduce) { .gov-layer *, .gov-tgl-pill, .gov-one { transition: none !important; } }
@media (max-width: 760px) { .gov-tgl-b { min-width: 0; padding: 6px 12px; } .gov-one-h .gov-legend { margin-left: 0; } }

/* page headings (no shared banner) */
#hero[hidden] { display: none; }
.page-h { margin: 22px 0 14px; }
.page-h h1, .act-title { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.act-title-sub { margin-left: 10px; font-size: 15px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.page-refs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 4px; font-size: 12px; color: var(--ink-3); }
.page-refs a { color: var(--ink-2); text-decoration: none; }
.page-refs a:hover { text-decoration: underline; }
.page-refs .com { color: var(--ink-3); }
.page-refs .sep { color: var(--line); }
.act-head .page-refs { margin-bottom: 4px; }

/* governance key: a slim vertical column outside the figure's right edge */
.gov-one { position: relative; }
.gov-key { flex-direction: column; flex-wrap: nowrap; gap: 5px; font-size: 11px; color: var(--ink-2); margin: 8px 0 0; }
.gov-key i { width: 10px; height: 10px; border-radius: 3px; }
.gov-key .gov-legend-h { font-size: 9.5px; margin-top: 2px; }
.gov-key .gov-legend-h:not(:first-child) { margin-top: 8px; }
@media (min-width: 1680px) {
  .gov-key { position: absolute; top: 58px; left: calc(100% + 14px); width: 120px; margin: 0; white-space: nowrap; }
}
@media (max-width: 1679px) {
  .gov-key { flex-direction: row; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
  .gov-key .gov-legend-h, .gov-key .gov-legend-h:not(:first-child) { margin: 0 0 0 4px; }
}
/* the empty tab strip (replaced by the left panel) was still drawing its bottom line */
#tabs[hidden] { display: none; }
/* the act heading: name, 'MISP amendments', the proposals in brackets */
.act-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.act-title .act-title-sub { margin-left: 0; }
.act-title-refs { font-size: 12px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; }
.act-title-refs a { color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
.act-title-refs a:hover { text-decoration-color: currentColor; }
.act-title-refs .sep { margin: 0 7px; color: var(--ink-3); flex: none; }
/* the act's text sits a little left of centre, closer to the article list */
body.act-view #view { margin-left: max(0px, calc((100% - 980px) / 4)); margin-right: auto; }

/* overview: where the package stands in the legislative procedure */
.lp { margin: 8px 0 24px; padding: 28px 24px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.lp-track { --gap: calc(100% / var(--n)); position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), 1fr); }
/* the rail behind the dots, and its filled part up to the current stage */
.lp-track::before, .lp-track::after { content: ''; position: absolute; top: 15px; left: calc(var(--gap) / 2); height: 3px; border-radius: 3px; }
.lp-track::before { right: calc(var(--gap) / 2); background: var(--line); }
.lp-track::after { width: calc(var(--gap) * var(--at)); background: linear-gradient(90deg, var(--st-support), var(--accent-2, var(--com))); transform-origin: left; animation: lp-fill .9s cubic-bezier(.3,.8,.2,1) both; }
@keyframes lp-fill { from { transform: scaleX(0); } }
.lp-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 0 6px; animation: lp-in .45s ease both; animation-delay: calc(var(--i) * 90ms); }
@keyframes lp-in { from { opacity: 0; transform: translateY(6px); } }
.lp-dot { position: relative; z-index: 1; width: 33px; height: 33px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 700; color: #fff; background: var(--surface); border: 3px solid var(--line); box-sizing: border-box; }
.lp-step.done .lp-dot { background: var(--st-support); border-color: var(--st-support); }
.lp-step.now .lp-dot { border-color: var(--accent-2, var(--com)); background: var(--surface); }
.lp-step.now .lp-dot::after { content: ''; width: 13px; height: 13px; border-radius: 50%; background: var(--accent-2, var(--com)); }
.lp-step.now .lp-dot::before { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid var(--accent-2, var(--com)); opacity: .35; animation: lp-pulse 2.2s ease-out infinite; }
@keyframes lp-pulse { 0% { transform: scale(.8); opacity: .5; } 100% { transform: scale(1.35); opacity: 0; } }
.lp-label { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.3; max-width: 180px; }
.lp-step.next .lp-label { color: var(--ink-3); font-weight: 500; }
.lp-when { font-size: 12px; color: var(--ink-3); }
.lp-here { position: absolute; top: -24px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-2, var(--com)); white-space: nowrap; }
.lp-lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 22px auto 0; max-width: 760px; }
.lp-lane { display: flex; gap: 10px; align-items: baseline; padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.lp-lane.ep { background: color-mix(in srgb, var(--ep-soft) 70%, transparent); }
.lp-lane.cou { background: color-mix(in srgb, var(--cou-soft) 70%, transparent); }
.lp-foot { margin: 16px 0 0; text-align: center; font-size: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .lp-step, .lp-track::after, .lp-step.now .lp-dot::before { animation: none; } }
@media (max-width: 760px) {
  .lp-track { grid-template-columns: 1fr; gap: 18px; }
  .lp-track::before, .lp-track::after { display: none; }
  .lp-step { flex-direction: row; text-align: left; gap: 12px; }
  .lp-here { position: static; order: 3; }
  .lp-lanes { grid-template-columns: 1fr; }
}
/* "We are here": drops in once the rail has filled, then floats gently over the current stage */
.lp-here { display: flex; flex-direction: column; align-items: center; top: -30px; opacity: 0; animation: lp-here-in .5s cubic-bezier(.3,.8,.2,1) .9s forwards, lp-here-bob 2.4s ease-in-out 1.4s infinite; }
.lp-here-caret { width: 0; height: 0; margin-top: 2px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--accent-2, var(--com)); }
@keyframes lp-here-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lp-here-bob { 0%, 100% { opacity: 1; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .lp-here { animation: none; opacity: 1; } }
@media (max-width: 760px) { .lp-here { flex-direction: row; } .lp-here-caret { display: none; } }
.lp { padding-top: 40px; }
/* "We are here" stays put (only the ring around the current stage pulses) */
.lp-here { animation: none; opacity: 1; }

/* pin cites: the cited paragraph highlighted on arrival; the small EUR-Lex arrow beside a proposed provision */
.redline p.pin-flash { animation: pin-flash 2.6s ease-out; border-radius: 4px; }
@keyframes pin-flash { 0%, 40% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2, var(--com)) 45%, transparent); background: color-mix(in srgb, var(--accent-2, var(--com)) 10%, transparent); } 100% { box-shadow: 0 0 0 3px transparent; background: transparent; } }
.fx-cite-wrap { display: inline-flex; align-items: flex-start; gap: 2px; max-width: 100%; }
.fx-out { flex: none; font-size: 12px; line-height: 1; padding: 3px 4px; border-radius: 4px; color: var(--ink-3); text-decoration: none; }
.fx-out:hover { color: var(--com); background: var(--com-soft); }
.fx-steps td.fx-law .fx-cite-wrap { margin-bottom: 4px; }
/* the link to the Commission's text beside a proposed provision: labelled, so it is clear what it opens */
.fx-cite-wrap { flex-wrap: wrap; align-items: center; gap: 3px; }
.fx-out { font-size: 11px; font-weight: 600; padding: 2px 6px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink-2); background: var(--surface); line-height: 1.3; }
.fx-out:hover { color: #fff; background: #1d3a6b; border-color: #1d3a6b; }

/* the proposals, read in the tracker */
.doc-island .n { font-size: 11px; }
.prop-box { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 18px 32px 40px; font-family: var(--serif); font-size: 15px; line-height: 1.6; margin-bottom: 40px; }
.prop-doc p { margin: 0 0 .55em; }
.prop-doc table { border-collapse: collapse; max-width: 100%; font-size: 13.5px; }
.prop-doc td, .prop-doc th { vertical-align: top; padding: 2px 6px; }
.prop-doc .Titrearticle, .prop-doc .ChapterTitle, .prop-doc .Sectiontitle, .prop-doc .SectionTitle { text-align: center; font-style: italic; margin-top: 1.4em; }
.prop-doc .Annexetitre, .prop-doc .Exposdesmotifstitre, .prop-doc .Typedudocument, .prop-doc .Titreobjet { text-align: center; font-weight: 600; margin-top: 1.4em; }
.prop-doc .ManualHeading1 { font-weight: 700; margin-top: 1.2em; font-family: var(--sans); font-size: 14px; }
.prop-doc .ManualHeading2 { font-weight: 600; margin-top: 1em; font-family: var(--sans); font-size: 13.5px; }
.prop-doc .Point0number, .prop-doc .Point0, .prop-doc .Considrant, .prop-doc .ManualConsidrant, .prop-doc .NumPar1, .prop-doc .ManualNumPar1 { padding-left: 2.4em; text-indent: -2.4em; }
.prop-doc .Point1letter, .prop-doc .Point1 { padding-left: 4.6em; text-indent: -2.2em; }
.prop-doc .Point2number, .prop-doc .Point2letter, .prop-doc .Point2 { padding-left: 6.8em; text-indent: -2.2em; }
.prop-doc .Text1 { padding-left: 2.4em; } .prop-doc .Text2 { padding-left: 4.6em; }
.prop-doc .num { display: inline-block; min-width: 2.2em; text-indent: 0; }
.prop-doc .Logo, .prop-doc .cpMarking { display: none; }
.prop-sep { border: 0; border-top: 2px dashed var(--line); margin: 30px 0; }
.prop-doc .pd-instr { border-left: 3px solid var(--com-soft); padding-right: 4px; }
.pd-link { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 9px; font: 600 11px/1.6 var(--sans); text-indent: 0; color: var(--com); background: var(--com-soft); text-decoration: none; white-space: nowrap; vertical-align: 1px; }
.pd-link:hover { background: var(--com); color: #fff; }
::highlight(pd-pin) { background-color: #ffe27a; color: inherit; }
.prop-doc .pd-flash { animation: pd-flash 2.6s ease-out; border-radius: 4px; }
@keyframes pd-flash { 0%, 40% { box-shadow: 0 0 0 4px color-mix(in srgb, #ffd23a 60%, transparent); } 100% { box-shadow: 0 0 0 4px transparent; } }
.doc-nav li.k-part > a .ix-art { font-weight: 700; color: var(--ink); }
.doc-nav li.k-sub > a { padding-left: 16px; }
.doc-nav li.k-annex > a .ix-art { font-weight: 700; color: var(--ink); }
/* a change's source: a small link at its top right */
.act-body .rl-chg { position: relative; }
.rl-src-link { position: absolute; top: 3px; right: 6px; font: 500 10.5px var(--sans); color: var(--ink-3); text-decoration: none; opacity: 0; transition: opacity .15s; padding: 1px 5px; border-radius: 4px; }
.rl-chg:hover > .rl-src-link, .rl-src-link:focus { opacity: 1; background: var(--surface); }
.rl-src-link:hover { color: var(--com); }
/* each proposed provision: the amended act's pincite, and under it the proposal's */
.fx-cite-pair { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; margin: 0 0 8px; }
.fx-cite-pair:last-child { margin-bottom: 0; }
.fx-cite.prop { display: inline-block; background: none; border: 1px solid color-mix(in srgb, var(--com) 30%, var(--line)); color: var(--ink-2); font-size: 11.5px; padding: 0 5px; }
.fx-cite.prop::before { content: 'Proposal: '; color: var(--ink-3); }
.fx-cite.prop:hover { background: var(--com-soft); color: var(--com); text-decoration: none; }
.fx-steps td.fx-law > .fx-cite.prop { margin-bottom: 4px; }
/* proposal outline: the proposal's own articles name the act they amend; the articles they insert sit under them */
#art-col .doc-nav { overflow-x: hidden; }
.doc-nav a { min-width: 0; }
.doc-nav li.k-mr { margin-top: 6px; }
.doc-nav li.k-mr > a .ix-art { font-weight: 700; color: var(--ink); }
.doc-nav li.k-mr > a .ix-ttl { font-weight: 600; color: var(--com); }
.doc-nav li.k-ins > a { padding-left: 18px; font-size: 12px; }
.doc-nav li.k-ins > a .ix-art { color: var(--ink-2); max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.doc-nav li.k-ins > a::before { content: '↳'; position: absolute; margin-left: -12px; color: var(--ink-3); }
.doc-nav li.k-ins > a { position: relative; }
.lp-dot svg { display: block; }
.lp-links { margin: 26px 0 0; text-align: center; font-size: 13px; color: var(--ink-3); display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 10px; }
.lp-links a { color: var(--com); text-decoration: none; font-weight: 600; }
.lp-links a:hover { text-decoration: underline; }
.lp-links .sep { color: var(--line); }
/* separators between inline links stay their own width (a sitewide .sep rule stretches them) */
.lp-links .sep, .page-refs .sep { flex: none; }
/* the stage circles always sit above the progress line (each step's entrance animation makes its own layer,
   which otherwise lets the line paint over the circle and the check mark) */
.lp-track::before, .lp-track::after { z-index: 0; }
.lp-step { z-index: 1; }
.lp-step.done .lp-dot, .lp-step.now .lp-dot { box-shadow: 0 0 0 4px var(--surface); }
.act-body .rl-missing { font-family: var(--sans); font-size: 12px; margin: 0 0 6px; }

/* The proposal reader on a narrow screen: long words and the change links wrap, a wide table scrolls inside its own
   box, and an outline heading too long for its line ends in an ellipsis — the page never scrolls sideways. */
.prop-doc { overflow-wrap: break-word; }
.doc-nav li.k-sub > a .ix-art { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
@media (max-width: 760px) {
  .pd-link { white-space: normal; }
}
/* a footnote (or the place that cites it) reached from a link in the text */
.note-flash { animation: pin-flash 2.6s ease-out; border-radius: 4px; }
/* a footnote, opened from its number in the text */
.fn-pop { position: fixed; z-index: 60; width: max-content; max-width: min(420px, calc(100vw - 16px)); padding: 9px 12px 10px; border-radius: 9px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 10px 28px rgba(0, 0, 0, .18); font: 13px/1.5 var(--sans); animation: fn-pop-in .14s ease-out; }
.fn-pop-h { margin-bottom: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.fn-pop-b { overflow-wrap: anywhere; }
.fn-pop-b a { color: var(--accent); }
@keyframes fn-pop-in { from { opacity: 0; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .fn-pop { animation: none; } }

/* ---------- new text: the "track change overlay" switch on the Council's and the Parliament's block ---------- */
.act-body .rl-chg .cmp { margin-left: auto; display: inline-flex; flex-direction: column; align-items: stretch; gap: 5px; padding: 6px 8px 7px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); font-family: var(--sans); }
.cmp-note { font: 600 10.5px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); text-align: center; }
.cmp-seg { display: flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; background: var(--surface); }
.cmp-b { flex: 1; justify-content: center; font: 500 11.5px var(--sans); border: 0; background: none; color: var(--ink-2); padding: 3px 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.cmp-b + .cmp-b { border-left: 1px solid var(--line); }
.cmp-b i { width: 7px; height: 7px; border-radius: 50%; background: var(--tc); }
.cmp-b.com { --tc: var(--com); } .cmp-b.cou { --tc: var(--cou); } .cmp-b.ep { --tc: var(--ep); }
.cmp-b[aria-pressed="true"] { background: var(--tc); color: var(--surface); }
.cmp-b[aria-pressed="true"] i { background: var(--surface); }
.cmp-b:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -2px; }
/* the other versions' edits on top of this one, each in its own colour: this version's words it lacks struck through
   with a thin line, its words this version lacks added; struck or added by both: see the shared marks below */
.act-body .redline .ov-com { --bc: var(--com); } .act-body .redline .ov-cou { --bc: var(--cou); } .act-body .redline .ov-ep { --bc: var(--ep); }
.act-body .redline ins.ov-cut { color: var(--ink-2); text-decoration: line-through; text-decoration-color: var(--bc); text-decoration-thickness: 1px; background: color-mix(in srgb, var(--bc) 10%, transparent); }
.act-body .redline ins.ov-add { color: var(--bc); text-decoration-color: var(--bc); background: color-mix(in srgb, var(--bc) 14%, transparent); }

/* ---------- an amendment in two or three versions: one redline, each version's edits in its colour ---------- */
.act-body .rl-chg.rl-comb { border-left-color: var(--ink-3); background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.act-body .rl-comb .v-row { gap: 4px 14px; }
.lay-who { display: inline-flex; align-items: center; gap: 6px; }
.act-body .redline .lay-com { --tc: var(--com); } .act-body .redline .lay-cou { --tc: var(--cou); } .act-body .redline .lay-ep { --tc: var(--ep); }
/* made (or, in an overlay, struck or added) by two or three: once, in dark text on grey, with a thin line under it in
   each one's colour, stacked Commission, Council, Parliament from the top; struck words with a thin grey line */
.rl-key-row .k.shared { --tc: var(--ink-2); }
.lay-multi.lay-cou.lay-ep, .rl-chg.v-com .ov-both { --l1: var(--cou); --l2: var(--ep); }
.lay-multi.lay-com.lay-ep, .rl-chg.v-cou .ov-both { --l1: var(--com); --l2: var(--ep); }
.lay-multi.lay-com.lay-cou, .rl-chg.v-ep .ov-both { --l1: var(--com); --l2: var(--cou); }
.act-body .redline :is(ins, del):is(.lay-multi, .ov-both), .rl-key-row .k.shared :is(ins, del) {
  color: var(--ink); text-decoration-color: var(--ink-2); text-decoration-thickness: 1px; padding-bottom: 5px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(var(--l1), var(--l1)) 0 calc(100% - 3px) / 100% 1.5px no-repeat, linear-gradient(var(--l2), var(--l2)) 0 100% / 100% 1.5px no-repeat, color-mix(in srgb, var(--ink-3) 9%, transparent); }
.act-body .redline :is(ins, del).lay-multi.lay-com.lay-cou.lay-ep, .rl-key-row .k.shared.three :is(ins, del) { padding-bottom: 7px;
  background: linear-gradient(var(--com), var(--com)) 0 calc(100% - 6px) / 100% 1.5px no-repeat, linear-gradient(var(--cou), var(--cou)) 0 calc(100% - 3px) / 100% 1.5px no-repeat, linear-gradient(var(--ep), var(--ep)) 0 100% / 100% 1.5px no-repeat, color-mix(in srgb, var(--ink-3) 9%, transparent); }
.act-body .redline :is(del.lay-multi, ins.ov-cut.ov-both), .rl-key-row .k.shared del { color: var(--ink-2); }
.act-body .redline :is(ins.lay-multi, ins.ov-add.ov-both), .rl-key-row .k.shared ins { text-decoration: none; }
.act-body .rl-chg.v-cou.chg, .act-body .rl-chg.v-ep.chg, .act-body .rl-chg.v-cou.note, .act-body .rl-chg.v-ep.note { border-left-color: var(--tc); }
/* a change block next to its paragraph's number (floated left in EUR-Lex's text): beside it, not drawn under it */
.act-body .rl-chg, .act-body .rl-stack { display: flow-root; }