/* The World roadmap pages (/roadmap/): the timeline drawn on the drafting sheet, the three paths, the atlas.
   Loaded after app.css, whose tokens, header, cards and chips these pages share. */

:root {
  --now: 51.04%;     /* today on the 1986-2066 axis; scripts/roadmap.py keeps it in step with AS_OF */
  --tl-h: 504px;     /* the timeline's height: four group rows and nine lanes; kept in step by scripts/roadmap.py */
  --g-tech: #3468B0; --g-reg: #1E9A8A; --g-cert: #8A4E9C; --g-com: #4D9A50;
}
.rm [hidden] { display: none !important; }
.ev-m a, .tp-src, .snap-src a, .path-anchors a, .rb-card a, .method a { overflow-wrap: anywhere; }   /* long source domains wrap on phones */

.g-tech { --gc: var(--g-tech); } .g-reg { --gc: var(--g-reg); } .g-cert { --gc: var(--g-cert); } .g-com { --gc: var(--g-com); }
.f-eu { --fc: #3468B0; } .f-un { --fc: #1E9A8A; } .f-us { --fc: #8A4E9C; } .f-china { --fc: #DD7A35; } .f-india { --fc: #4D9A50; }
.f-gcc { --fc: #8C6D3F; } .f-eaeu { --fc: #A04F78; } .f-national { --fc: #C08514; } .f-import { --fc: #B6C3D3; }
.p-record { --pc: var(--ink); } .p-faster { --pc: #1E9A8A; } .p-announced { --pc: #3468B0; } .p-slower { --pc: #B07A10; }

.sw, .fs { display: inline-block; flex: none; width: 0.7rem; height: 0.7rem; border-radius: 2px; background: var(--gc); }
.fs { background: var(--fc); border-radius: 3px; }
.pw { display: inline-block; flex: none; width: 1.1rem; height: 3px; border-radius: 2px; background: var(--pc); }
.chip .n { font-size: 0.8rem; font-weight: 600; opacity: 0.65; }
.chip[aria-pressed="true"] .n, .chip[aria-current="page"] .n { opacity: 0.8; }
.chip[aria-current="page"] { background: var(--navy); border-color: var(--navy); color: #fff; }

/* Head and the market strip */
.rm-head { margin-top: 1.75rem; }
.rm-kicker { font-size: 0.95rem; font-weight: 650; color: var(--ink-3); margin-bottom: 0.4rem; }
.rm-kicker a { color: var(--ink-2); }
.rm-head .lead { max-width: 62ch; margin-top: 0.6rem; }
.rm-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 1.4rem 0 0; }
.rm-strip .chip { min-height: 2.4rem; }
.rm-grp { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.rm-reg { margin-left: 0.6rem; font-size: 0.8rem; font-weight: 700; color: var(--ink-3); white-space: nowrap; }

/* The vehicle filter */
.rm-tl { margin-top: 1.5rem; }
.rm-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 0.75rem; }
.rm-filter-l { font-size: 0.875rem; font-weight: 700; color: var(--ink-3); margin-right: 0.2rem; }
.rm-filter .chip { min-height: 2.4rem; }

/* The timeline, on the drafting sheet */
.tl.sheet { background-image: none; padding: 0.9rem 1rem 1rem; }
.tl-cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.4rem 1.5rem; margin: 0 0 0.6rem; font-size: 0.875rem; color: var(--ink-2); }
.tl-cap b { color: var(--navy); }
.tl-key { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; color: var(--ink-3); }
.tl-key i { display: inline-block; height: 0.95rem; margin-left: 0.4rem; border-radius: 1px; }
.tl-key i:first-child { margin-left: 0; }
.tl-key .k-past { width: 0.28rem; background: var(--navy); }
.tl-key .k-ahead { width: 0.55rem; border: 1.5px solid var(--navy); background: var(--paper); }
.tl-key .k-draft { width: 0.55rem; border: 1.5px dashed var(--navy); background: var(--paper); }

.tl-body { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); }
.tl-labels { border-right: 1px solid #C9D5E3; }
.tl-sp { height: 48px; }
.tl-g { display: flex; align-items: center; height: 26px; padding-left: 0.5rem; border-left: 3px solid var(--gc); font-size: 0.8rem; font-weight: 750; color: var(--gc); background: color-mix(in srgb, var(--gc) 8%, transparent); }
.tl-l { display: flex; align-items: center; height: 40px; padding: 0 0.5rem 0 0.95rem; font-size: 0.875rem; font-weight: 600; font-stretch: 87.5%; line-height: 1.12; color: var(--ink-2); }
.tl-l .short { display: none; }

.tl-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; border-radius: 2px; }
.tl-scroll:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 4px; }
.tl-inner { position: relative; min-width: 100%; }
.tl-head { display: grid; grid-template-columns: var(--now) minmax(0, 1fr); align-items: end; height: 26px; font-size: 0.8rem; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.tl-rec { min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: right; padding: 0 0.6rem 0.25rem 0; }
.tl-fut { min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: 0 0 0.25rem 0.6rem; border-left: 2px solid var(--dawn-deep); }
.tl-fut b { margin-right: 0.6rem; color: var(--dawn-deep); font-weight: 750; }
.tl-axis { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); height: 22px; font-size: 0.75rem; font-weight: 650; font-stretch: 87.5%; color: var(--ink-3); }
.tl-axis span { padding: 0.15rem 0 0 0.25rem; border-left: 1px solid #C9D5E3; }
.tl-axis span:first-child { border-left: 0; padding-left: 0.1rem; }
.tl-axis .end { position: absolute; right: 0; top: 0; padding: 0.15rem 0.1rem 0 0; border: 0; }
.tl-svg { display: block; width: 100%; height: var(--tl-h); touch-action: pan-x pan-y; }

.tl-ahead { fill: rgb(232 160 112 / 0.08); }
.tl-gband { fill: color-mix(in srgb, var(--gc) 8%, transparent); }
.tl-dec { stroke: rgb(22 41 74 / 0.11); stroke-width: 1; pointer-events: none; }
.tl-sep { stroke: rgb(22 41 74 / 0.06); stroke-width: 1; pointer-events: none; }
.tl-now { stroke: var(--dawn-deep); stroke-width: 2; pointer-events: none; }
.tl-hit { fill: transparent; }
.mk { cursor: pointer; transition: opacity 0.15s ease; }
.mk.st-past { fill: var(--gc); }
.mk.st-ahead, .mk.st-draft { fill: var(--paper); stroke: var(--gc); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.mk.st-draft { stroke-dasharray: 3 2; }
.mk.off { opacity: 0.12; pointer-events: none; }
.mk.on { stroke: var(--navy); stroke-width: 2.6; stroke-dasharray: none; vector-effect: non-scaling-stroke; }
.mk.st-past.on { fill: var(--navy); }
.mk-beyond { fill: none; stroke: var(--ink-3); stroke-width: 1.5; vector-effect: non-scaling-stroke; pointer-events: none; }

/* The selected event */
.tl-panel { margin-top: 0.75rem; display: grid; gap: 0.4rem; }
.tp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; font-size: 0.85rem; color: var(--ink-2); }
.tp-lane { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 650; }
.tp-lane::before { content: ""; width: 0.65rem; height: 0.65rem; border-radius: 2px; background: var(--gc); }
.tp-date { font-weight: 750; color: var(--navy); }
.tp-st, .ev-b { display: inline-flex; align-items: center; padding: 0.08rem 0.5rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.tp-st.st-past { background: rgb(255 255 255 / 0.7); color: var(--ink-3); }
.st-ahead.tp-st, .ev-b.st-ahead { background: rgb(232 160 112 / 0.22); color: #8A4513; }
.st-draft.tp-st, .ev-b.st-draft { border: 1px dashed #8A4513; color: #8A4513; }
.tp-title { font-size: clamp(1.1rem, 2vw, 1.3rem); font-weight: 700; line-height: 1.25; color: var(--navy); }
.tp-detail { max-width: 72ch; color: var(--ink-2); }
.tp-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1rem; font-size: 0.875rem; color: var(--ink-3); }
.tp-src { color: var(--ink-2); font-weight: 600; }
.tp-conf { font-size: 0.8rem; }
.tp-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.3rem; }
.tp-list { margin-left: auto; font-size: 0.875rem; font-weight: 600; color: var(--ink-2); }

/* Every event, lane by lane */
.ev-jump { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.ev-lanes { columns: 2 30rem; column-gap: 1rem; }
.ev-lane { break-inside: avoid; margin-bottom: 1rem; }
.ev-lane .h3 { display: flex; align-items: center; gap: 0.55rem; }
.ev-grp { margin-left: auto; font-size: 0.8rem; font-weight: 600; color: var(--ink-3); }
.ev-list { margin-top: 0.4rem; }
.ev { display: grid; grid-template-columns: 4.4rem minmax(0, 1fr); gap: 0.75rem; padding: 0.7rem 0.35rem; border-top: 1px solid var(--hairline); border-radius: 0.4rem; scroll-margin-top: 6rem; }
.ev:first-child, .ev.lead { border-top: 0; }
.ev time { padding-top: 0.08rem; font-size: 0.9rem; font-weight: 750; font-stretch: 87.5%; color: var(--navy); }
.ev.st-ahead time, .ev.st-draft time { color: #8A4513; }
.ev:target { background: rgb(232 160 112 / 0.16); }
.ev-t { font-weight: 650; line-height: 1.3; color: var(--ink); }
.ev-b { margin-left: 0.45rem; vertical-align: 0.08em; }
.ev-d { margin-top: 0.2rem; font-size: 0.925rem; color: var(--ink-2); }
.ev-m { display: flex; flex-wrap: wrap; gap: 0.15rem 0.9rem; margin-top: 0.3rem; font-size: 0.8rem; color: var(--ink-3); }
.ev-m a { color: var(--ink-2); font-weight: 600; }
.ev-none, .ev-filtered { margin-top: 0.5rem; font-size: 0.9rem; color: var(--ink-3); }
.ev.folded { display: none; }
.ev-more { margin-top: 0.6rem; }

/* Where a market stands today */
.snap { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1.1rem 1.6rem; }
.snap-i h3 { font-size: 0.85rem; font-weight: 750; color: var(--ink-3); }
.snap-i p { margin-top: 0.2rem; font-size: 0.95rem; }
.rb-row { display: grid; gap: 1rem; margin-top: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .rb-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; } }
.rb-card .h3 { display: flex; align-items: center; gap: 0.5rem; }
.rb-card p { margin-top: 0.45rem; }
.rb-card a, .snap-src a, .method a { color: var(--ink-2); }
.snap-src summary, .at-fams summary { cursor: pointer; font-weight: 650; color: var(--navy); }
.snap-src ul { margin-top: 0.6rem; display: grid; gap: 0.3rem; font-size: 0.875rem; }

/* Three paths to 2066 */
.fan-head p { margin-top: 0.3rem; max-width: 70ch; }
.fan-scroll { overflow-x: auto; margin-top: 0.5rem; }
.fan-svg { display: block; width: 100%; min-width: 32rem; max-width: 50rem; height: auto; margin: 0 auto; }
.fan-grid { stroke: var(--grid); stroke-width: 1; }
.fan-yl { font-size: 14px; font-weight: 600; fill: var(--ink-3); }
.fan-xl { font-size: 13px; font-weight: 650; fill: var(--ink-3); }
.fan-hatch { stroke: rgb(22 41 74 / 0.08); stroke-width: 3; }
.fan-now { stroke: var(--dawn-deep); stroke-width: 1.5; stroke-dasharray: 4 3; }
.fan-today { font-size: 13px; font-weight: 700; fill: var(--dawn-deep); }
.fan-line { fill: none; stroke: var(--pc); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.fan-line:not(.p-record) { stroke-dasharray: 7 5; }
.fan-pt { fill: var(--pc); stroke: #fff; stroke-width: 1.5; }
.fan-lab { font-size: 14px; font-weight: 750; fill: var(--pc); }
.paths { display: grid; gap: 1rem; margin-top: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.path .h3 { display: flex; align-items: center; gap: 0.55rem; }
.path-sub { margin-top: 0.15rem; font-size: 0.9rem; font-weight: 650; color: var(--ink-2); }
.path-sum { margin-top: 0.6rem; font-size: 0.925rem; color: var(--ink-2); }
.path-anchors { margin-top: 0.75rem; }
.path-anchors li { display: grid; grid-template-columns: 2.9rem minmax(0, 1fr); gap: 0.5rem; padding: 0.5rem 0; border-top: 1px solid var(--hairline); font-size: 0.875rem; color: var(--ink-2); }
.path-anchors b { color: var(--navy); }
.path-anchors a { color: var(--ink-3); font-weight: 600; }
.path-66 { margin-top: 0.8rem; padding: 0.75rem 0.85rem; border: 1px dashed #B9C7DA; border-radius: 0.75rem; background: rgb(255 255 255 / 0.5); font-size: 0.9rem; color: var(--ink-2); }
.path-66 b { display: block; margin-bottom: 0.2rem; font-size: 0.8rem; color: var(--ink-3); }
.pl { margin-top: 1rem; }
.pl-intro { margin-top: 0.3rem; }
.pl-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.9rem 0 1rem; }
.pl-block + .pl-block { margin-top: 1.5rem; }
.js .pl-h { display: none; }
.pl-h { margin-bottom: 0.6rem; }
.pl-cols { display: grid; gap: 1rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.pl-col h4 { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; color: var(--navy); }
.pl-col p { margin-top: 0.35rem; font-size: 0.925rem; color: var(--ink-2); }

/* Every country's rulebook */
.at-stats { margin-bottom: 1rem; }
.at-legend { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.at-mapwrap { margin-top: 0.9rem; }
.at-map { display: block; width: 100%; height: auto; }
.mc { fill: var(--fc); stroke: #FFFFFF; stroke-width: 0.6; vector-effect: non-scaling-stroke; transition: opacity 0.15s ease; cursor: pointer; }
.mc.nodata { fill: #E3E9F0; cursor: default; }
.mc.dot { stroke-width: 1; }
.at.filtering .mc:not(.hit) { opacity: 0.16; }
.mc.cur { stroke: var(--navy); stroke-width: 1.6; }
.at-info { min-height: 3.2em; margin-top: 0.6rem; font-size: 0.925rem; color: var(--ink-2); }
.at-info b { color: var(--navy); }
.at-info a { margin-left: 0.4rem; font-weight: 650; color: var(--ink-2); }
.at-fams { margin-top: 0.6rem; }
.at-fams ul { display: grid; gap: 0.4rem; margin-top: 0.6rem; font-size: 0.875rem; color: var(--ink-2); }
.at-fams li { display: flex; align-items: baseline; gap: 0.5rem; }
.at-fams b { color: var(--navy); white-space: nowrap; }
.at-tools { display: flex; flex-wrap: wrap; align-items: end; gap: 0.75rem 1.25rem; margin: 1.25rem 0 0.75rem; }
.at-tools label { display: grid; gap: 0.3rem; font-size: 0.8rem; font-weight: 700; color: var(--ink-3); }
.at-tools input, .at-tools select { min-height: 2.6rem; padding: 0.4rem 0.9rem; border: 1px solid #C9D5E3; border-radius: 999px; background: var(--glass-strong); font: inherit; font-size: 0.95rem; color: var(--ink); }
.at-tools input { width: min(16rem, 70vw); }
.at-count { margin-left: auto; font-size: 0.875rem; color: var(--ink-3); }
.at-tablecard { padding: 0.4rem 0.6rem; }
.at-tablecard .table-wrap { max-height: min(42rem, 78vh); overflow: auto; overscroll-behavior: contain; }
.at-table thead th { position: sticky; top: 0; z-index: 1; background: #F5F8FB; box-shadow: inset 0 -1px 0 var(--hairline); }
.rm .stat .value { font-variant-numeric: normal; }
.rm th { font-size: 0.8rem; text-transform: none; letter-spacing: 0; }
.at-table { min-width: 58rem; }
.at-table td { font-size: 0.875rem; color: var(--ink-2); }
.at-table td:first-child b { display: block; color: var(--ink); }
.at-table td:first-child a { color: var(--navy); }
.at-table td:nth-child(2) { white-space: nowrap; }
.at-table td:nth-child(2) .fs { margin-right: 0.4rem; vertical-align: -0.05em; }
.at-table td:last-child a { color: var(--ink-3); font-weight: 600; }
.at-reg { display: block; font-size: 0.8rem; color: var(--ink-3); }
.yes { color: var(--good); font-weight: 650; } .no { color: var(--ink-3); }

/* Twenty markets */
.mkt-reg { margin: 1.4rem 0 0.6rem; font-size: 1rem; font-weight: 700; color: var(--ink-2); }
.mkt-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); }
.mkt .h3 { font-size: 1.1rem; }
.mkt-rb { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.3rem; font-size: 0.85rem; font-weight: 600; color: var(--ink-2); }
.mkt-n { margin-top: 0.15rem; font-size: 0.85rem; color: var(--ink-3); }
.mkt-next { margin-top: 0.65rem; padding-top: 0.6rem; border-top: 1px solid var(--hairline); font-size: 0.875rem; color: var(--ink-2); }
.mkt-next span { display: block; font-size: 0.8rem; font-weight: 700; color: var(--ink-3); }
.mkt-next time { white-space: nowrap; font-weight: 700; color: #8A4513; }

.method p { max-width: 78ch; }
.method p + p { margin-top: 0.6rem; }
.method .h3 + p { margin-top: 0.5rem; }

.rm-foot-links { display: inline-flex; flex-wrap: wrap; gap: 0.4rem 1rem; }

/* Tablets and phones */
@media (max-width: 400px) { .rm .hdr-right { display: none; } }
@media (max-width: 1100px) {
  /* the market strip becomes one row that scrolls sideways */
  .rm-strip { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); }
  .rm-strip::-webkit-scrollbar { display: none; }
  .rm-strip .chip { flex: none; }
  .rm-grp { flex-wrap: nowrap; }
}
@media (max-width: 1000px) {
  .tl-body { grid-template-columns: 9.5rem minmax(0, 1fr); }
  .tl-l { font-size: 0.8125rem; }
  .tl-fut .long { display: none; }
}
@media (max-width: 720px) {
  .rm-about { display: none; }
  .rm-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); }
  .rm-filter::-webkit-scrollbar { display: none; }
  .rm-filter .chip, .rm-filter-l { flex: none; }
  .tl.sheet { padding: 0.75rem 0.6rem 0.8rem; }
  .tl-body { grid-template-columns: 5.6rem minmax(0, 1fr); }
  .tl-g { padding-left: 0.35rem; font-size: 0.75rem; }
  .tl-l { padding-left: 0.5rem; font-size: 0.8rem; }
  .tl-l .long { display: none; }
  .tl-l .short { display: inline; }
  .tl-inner { min-width: 40rem; }
  .tl-rec { font-size: 0.75rem; }
  .tp-list { margin-left: 0; }
  .ev { grid-template-columns: 3.9rem minmax(0, 1fr); gap: 0.6rem; }
  .at-count { margin-left: 0; }
}