/* timeline: the archive, scoped under .dataset-timeline. Written new for the timeline surface, 2026-08-19, in the register of dataset-ledger.css: tokens resolve from system.css in both themes, so there is no dark block here; the theme stamps data-theme on before first paint and everything below follows it. Everything is scoped so the timeline cannot reach the chrome and the chrome cannot reach the timeline. The colour key is this surface's OWN legend, stated on the page: the shared hues carry per-surface meanings across the datasets (on the ledger red means a non-EU jurisdiction; here it marks an enforcement step), and each page says what its colours mean rather than borrowing a sentence from another page. Shape first, colour second, per the marker scale's own rule: every event type gets a marker SHAPE as well as a hue, so the reading survives a reader who cannot separate red from green. proposal, political-agreement hollow circle, steel the text is in motion adoption, entry-into-force filled circle, steel the instrument is law application filled circle, green obligations bind delay, amendment diamond, amber a later act moves or changes it withdrawal, repeal dashed circle, slate the instrument leaves the stage guidance small dot, slate non-binding enforcement square, red an enforcement step (gate ruling 4) */ .dataset-timeline *{box-sizing:border-box} .dataset-timeline .wrap{max-width:1100px;margin:0 auto;padding:22px 20px 56px} .dataset-timeline h1, .dataset-timeline h2, .dataset-timeline h3{font-family:var(--head)} .dataset-timeline a{color:var(--steel-deep)} .dataset-timeline :focus-visible{outline:3px solid var(--steel-deep);outline-offset:2px} .dataset-timeline .hero{padding:20px 24px;background:var(--paper);border:1px solid var(--edge)} .dataset-timeline h1{margin:0 0 4px;font-size:clamp(2rem,4.2vw,3.7rem);line-height:.94;letter-spacing:-.01em} .dataset-timeline .kicker{margin:0 0 8px;font-family:var(--head);font-size:1.15rem;color:var(--steel-deep);letter-spacing:normal;text-transform:none} .dataset-timeline .subtitle{max-width:1000px;font-size:1.05rem;color:var(--muted);line-height:1.5;margin:0} .dataset-timeline .crosslink{margin:10px 0 0;font-size:.92rem;color:var(--muted)} .dataset-timeline .toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:18px 0 6px} .dataset-timeline .group{display:flex;flex-wrap:wrap;gap:7px;align-items:center;background:var(--paper);border:1px solid var(--edge);padding:7px 9px} .dataset-timeline .group .lbl{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);margin-right:2px} .dataset-timeline button{font:inherit;appearance:none;border:1px solid var(--edge);padding:7px 13px;background:var(--paper);color:var(--ink);cursor:pointer;transition:transform .12s,background .12s,color .12s} .dataset-timeline button:hover{transform:translateY(-1px)} .dataset-timeline button[aria-pressed="true"]{background:var(--steel-deep);color:#fff} .dataset-timeline select{font:inherit;border:1px solid var(--edge);background:var(--paper);color:var(--ink);padding:6px 8px;max-width:300px} .dataset-timeline input[type="search"]{font:inherit;border:1px solid var(--edge);background:var(--paper);color:var(--ink);padding:7px 11px;min-width:240px} .dataset-timeline input[type="search"]::placeholder{color:var(--quiet)} .dataset-timeline .hint{font-size:.88rem;color:var(--muted);margin:10px 2px 6px;line-height:1.45;max-width:1000px} .dataset-timeline .hint b{color:var(--ink)} .dataset-timeline .tally{font-size:.82rem;color:var(--faint);margin:0 2px 14px;font-variant-numeric:tabular-nums} /* ---------- the stream ---------- One rail, year headings on the rule, events hung off the rail. The rail is a border on the list rather than a drawn element, so it cannot drift from the markers that sit on it. */ .dataset-timeline .year{margin:26px 0 0;font-size:1.6rem;letter-spacing:.14em;border-top:2px solid var(--ink);padding-top:10px;color:var(--ink)} .dataset-timeline .events{list-style:none;margin:10px 0 0;padding:2px 0 6px 26px;border-left:2px solid var(--hair);position:relative} .dataset-timeline .event{position:relative;background:var(--paper);border:1px solid var(--edge);padding:12px 14px;margin:0 0 12px} .dataset-timeline .event:target{outline:3px solid var(--steel);outline-offset:2px} .dataset-timeline .event.flash{outline:3px solid var(--steel);outline-offset:2px} /* The marker sits ON the rail: the list is padded 26px and the rail border is its left edge, so a 12px marker centred at -26px minus half its width lands astride the line. */ .dataset-timeline .mk{position:absolute;top:16px;left:-33px;width:12px;height:12px;border:2.5px solid var(--steel);background:var(--paper);border-radius:50%} .dataset-timeline .t-adoption > .mk, .dataset-timeline .t-entry-into-force > .mk{background:var(--steel-deep);border-color:var(--steel-deep)} .dataset-timeline .t-application > .mk{background:var(--up);border-color:var(--up)} .dataset-timeline .t-delay > .mk, .dataset-timeline .t-amendment > .mk{background:var(--both);border-color:var(--both);border-radius:0;transform:rotate(45deg)} .dataset-timeline .t-withdrawal > .mk, .dataset-timeline .t-repeal > .mk{background:var(--paper);border-color:var(--none);border-style:dashed} .dataset-timeline .t-guidance > .mk{width:8px;height:8px;left:-31px;top:18px;background:var(--none);border-color:var(--none)} .dataset-timeline .t-enforcement > .mk{background:var(--down);border-color:var(--down);border-radius:0} .dataset-timeline .evhead{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline} .dataset-timeline .date{font-family:var(--head);font-size:1.05rem;font-weight:700;color:var(--ink);letter-spacing:.01em} .dataset-timeline .chip{font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;padding:2px 8px;border:1px solid currentColor} /* The type chip repeats the marker's hue so the two cannot disagree, and carries the exact vocabulary word so the grouping never hides the type. */ .dataset-timeline .chip.type{color:var(--steel-deep)} .dataset-timeline .t-application .chip.type{color:var(--up)} .dataset-timeline .t-delay .chip.type, .dataset-timeline .t-amendment .chip.type{color:var(--both)} .dataset-timeline .t-withdrawal .chip.type, .dataset-timeline .t-repeal .chip.type, .dataset-timeline .t-guidance .chip.type{color:var(--none)} .dataset-timeline .t-enforcement .chip.type{color:var(--down)} .dataset-timeline .chip.grade{color:var(--none)} .dataset-timeline .chip.grade.verified{color:var(--up)} /* A reported grade is a limitation the reader is owed at a glance; dashed is the site's own device for "the record stops here". */ .dataset-timeline .chip.grade.reported{color:var(--both);border-style:dashed} /* A date that has not happened yet is a schedule, not a record. */ .dataset-timeline .chip.ahead{color:var(--faint);border-style:dotted} .dataset-timeline .evkick{margin:7px 0 0;font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;color:var(--faint)} .dataset-timeline .evtitle{margin:2px 0 0;font-size:1.45rem;line-height:1.1} .dataset-timeline .evsum{margin:7px 0 0;font-size:.92rem;line-height:1.5;color:var(--ink-body);max-width:78ch} /* "What it does not bind": the column nobody else publishes, so it is the one block inside a card that gets its own rule and ground. Steel, not a verdict colour: a boundary is a finding, not a failure. */ .dataset-timeline .nt{margin:10px 0 0;padding:8px 11px;border-left:5px solid var(--steel-deep);background:var(--none-bg);font-size:.85rem;line-height:1.45;color:var(--ink-body);max-width:78ch} .dataset-timeline .nt b{display:block;font-size:.64rem;text-transform:uppercase;letter-spacing:.08em;color:var(--steel-deep);margin:0 0 3px} .dataset-timeline .evsrc{margin:9px 0 0;font-size:.78rem;line-height:1.5;color:var(--faint)} .dataset-timeline .evsrc a{font-weight:700;text-decoration:none} .dataset-timeline .evsrc a:hover{text-decoration:underline} .dataset-timeline .evrel{margin:4px 0 0;font-size:.78rem;line-height:1.5;color:var(--faint)} .dataset-timeline .evrel a{text-decoration:none;font-weight:700} .dataset-timeline .evrel a:hover{text-decoration:underline} .dataset-timeline .empty{padding:18px;border:2px dashed var(--none);color:var(--muted);font-size:.95rem;margin-top:16px} .dataset-timeline .empty button{margin-left:10px} .dataset-timeline .loaderr{padding:18px;border:2px dashed var(--down);color:var(--down);font-size:.95rem;margin-top:16px} /* ---------- legend ---------- */ .dataset-timeline .legend{margin-top:24px;padding:16px 20px;border:1px solid var(--edge);background:var(--paper)} .dataset-timeline .legend h2{margin:0 0 8px;font-size:1.45rem} .dataset-timeline .legend p{font-size:.92rem;line-height:1.5;margin:.45rem 0;color:var(--muted)} .dataset-timeline .legend p b{color:var(--ink)} .dataset-timeline .legkey{display:flex;flex-wrap:wrap;gap:14px 22px;margin:8px 0 12px} .dataset-timeline .legkey span{display:inline-flex;align-items:center;gap:8px;font-size:.86rem;color:var(--muted)} /* legend swatches repeat the marker geometry exactly, so the key cannot drift from the rail */ .dataset-timeline .lmk{flex:none;width:12px;height:12px;border:2.5px solid var(--steel);background:var(--paper);border-radius:50%} .dataset-timeline .lmk.made{background:var(--steel-deep);border-color:var(--steel-deep)} .dataset-timeline .lmk.binds{background:var(--up);border-color:var(--up)} .dataset-timeline .lmk.moved{background:var(--both);border-color:var(--both);border-radius:0;transform:rotate(45deg)} .dataset-timeline .lmk.gone{border-color:var(--none);border-style:dashed} .dataset-timeline .lmk.soft{width:8px;height:8px;background:var(--none);border-color:var(--none)} .dataset-timeline .lmk.teeth{background:var(--down);border-color:var(--down);border-radius:0} .dataset-timeline footer{margin-top:18px;font-size:.85rem;color:var(--faint);line-height:1.5;padding:0 4px} .dataset-timeline footer a{color:var(--steel-deep)} /* ---------- the player (Phase 5) ---------- The horizontal strip: the same filtered stream in a second geometry. The axis is true to scale inside each segment (density is the finding; 2022 to 2024 should read as a wall) and a silence longer than the fold threshold in timeline.js collapses behind a dashed seam that names the years it removes. Every position, width and height arrives from timeline.js as an inline style, and the card width as the --pcw variable, so script and sheet cannot disagree on the geometry. Edge fading is mask-image on the scroll container itself, per the brief: no overlay elements, so pointer handling stays clean and both themes fade to their own ground. */ /* The flex-end column glues the axis to the box's bottom edge, which is what lets dynamic zoom trim the height: the empty sky above a sparse stretch is what gets cropped, never the axis, and the height transition makes the strip breathe as density comes and goes. */ .dataset-timeline .player{position:relative;overflow-x:auto;overflow-y:hidden;margin-top:6px;border:1px solid var(--edge);background:var(--paper);cursor:grab; display:flex;flex-direction:column;justify-content:flex-end;transition:height .3s ease; -webkit-mask-image:linear-gradient(to right,transparent 0,#000 36px,#000 calc(100% - 36px),transparent 100%); mask-image:linear-gradient(to right,transparent 0,#000 36px,#000 calc(100% - 36px),transparent 100%)} .dataset-timeline .player.dragging{cursor:grabbing;user-select:none} .dataset-timeline .player .empty{margin:16px} .dataset-timeline .ptrack{position:relative} .dataset-timeline .paxline{position:absolute;left:0;right:0;bottom:44px;border-top:2px solid var(--hair)} .dataset-timeline .ptick{position:absolute;bottom:39px;width:2px;height:12px;background:var(--hair)} .dataset-timeline .pyear{position:absolute;bottom:16px;transform:translateX(-50%);font-size:.74rem;color:var(--faint);font-variant-numeric:tabular-nums} .dataset-timeline .pstem{position:absolute;width:2px;background:var(--hair);pointer-events:none} /* the fold is a visible cut, never a silent one: dashed edges, and the label names the span. Both this label and the today label live in the bottom band beside the axis, because dynamic zoom crops the strip from the top and a label up there would vanish first. */ .dataset-timeline .pseam{position:absolute;top:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:74px;border-left:2px dashed var(--none);border-right:2px dashed var(--none);background:var(--none-bg)} .dataset-timeline .pseam b{writing-mode:vertical-rl;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--faint)} .dataset-timeline .ptoday{position:absolute;top:0;bottom:0;border-left:2px solid var(--steel)} .dataset-timeline .ptoday b{position:absolute;bottom:16px;left:7px;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--steel-deep)} /* axis markers repeat the rail marker geometry exactly, the same discipline as the legend swatches: change these with the .mk rules above or the shapes lie */ .dataset-timeline .pmk{position:absolute;width:12px;height:12px;border:2.5px solid var(--steel);background:var(--paper);border-radius:50%;transform:translate(-50%,50%);pointer-events:none} .dataset-timeline .pmk.t-adoption,.dataset-timeline .pmk.t-entry-into-force{background:var(--steel-deep);border-color:var(--steel-deep)} .dataset-timeline .pmk.t-application{background:var(--up);border-color:var(--up)} .dataset-timeline .pmk.t-delay,.dataset-timeline .pmk.t-amendment{background:var(--both);border-color:var(--both);border-radius:0;transform:translate(-50%,50%) rotate(45deg)} .dataset-timeline .pmk.t-withdrawal,.dataset-timeline .pmk.t-repeal{border-color:var(--none);border-style:dashed} .dataset-timeline .pmk.t-guidance{width:8px;height:8px;background:var(--none);border-color:var(--none)} .dataset-timeline .pmk.t-enforcement{background:var(--down);border-color:var(--down);border-radius:0} /* the compact card: date, chip, instrument, title, nothing else; the full card lives in the detail panel below the strip. The type chip colours above key off .t-* on the card. */ /* Compact card type is sized in px rather than rem, deliberately: the strip's height is the sum of its lane heights, and a rem here would let the root font decide how tall the wall gets. The detail panel below keeps the site's rem scale; only the miniature is pinned. */ .dataset-timeline .pcard{position:absolute;width:var(--pcw,200px);display:block;text-align:left;padding:7px 9px;line-height:1.2} .dataset-timeline .pcard .pdate{display:block;font-family:var(--head);font-weight:700;font-size:13px;color:var(--ink)} .dataset-timeline .pcard .prow{display:block;margin-top:3px} .dataset-timeline .pcard .chip{font-size:10px;padding:1px 5px;letter-spacing:.04em;vertical-align:middle;white-space:nowrap} .dataset-timeline .pcard .pinst{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);margin-left:6px;vertical-align:middle} .dataset-timeline .pcard .ptitle{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:3px;font-size:13px;line-height:1.25;color:var(--ink-body)} .dataset-timeline .pcard.sel{outline:3px solid var(--steel);outline-offset:2px} .dataset-timeline #zoomIn,.dataset-timeline #zoomOut{padding:7px 11px;font-weight:700} .dataset-timeline .phint{font-size:.82rem;color:var(--muted);margin:8px 2px 0;line-height:1.45} .dataset-timeline .pdetail{margin-top:12px} .dataset-timeline .pdetail .devent{position:relative;background:var(--paper);border:1px solid var(--edge);padding:12px 96px 12px 14px} .dataset-timeline .pdetail .close{position:absolute;top:10px;right:10px;z-index:1} @media (prefers-reduced-motion:reduce){ .dataset-timeline *{animation-duration:.01ms !important;transition-duration:.01ms !important} } @media (max-width:560px){ .dataset-timeline .wrap{padding:14px 12px 40px} .dataset-timeline .hero{padding:16px 15px} .dataset-timeline .events{padding-left:18px} .dataset-timeline .mk{left:-25px} .dataset-timeline .t-guidance > .mk{left:-23px} .dataset-timeline input[type="search"]{min-width:0;width:100%} .dataset-timeline select{max-width:100%} .dataset-timeline .pdetail .devent{padding-right:14px} .dataset-timeline .pdetail .close{position:static;float:right;margin:0 0 6px 10px} }