/* Public roadmap. All illustrations are lightweight, editable concepts. */
.roadmap-page { --rm-muted: #a8b7c5; --rm-line: #2c3e4d; --rm-blue: #9dcdf5; --rm-green: #aad7c6; background: #0a0a0a; }
.roadmap-page .rm-shell { max-width: 1120px; padding-top: 4.5rem; padding-bottom: 5rem; }
.roadmap-page .rm-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 4rem; align-items: center; margin-bottom: 2.6rem; }
.roadmap-page .rm-eyebrow { display: block; margin: 0 0 1rem; font-size: .75rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--rm-blue); }
.roadmap-page h1 { font-size: clamp(2.6rem, 5vw, 4rem); line-height: 1.08; letter-spacing: -.045em; margin-bottom: 1.4rem; font-weight: 700; }
.roadmap-page .rm-lead { max-width: 36rem; font-size: 1.075rem; line-height: 1.8; color: #bdc9d3; margin-bottom: 1.4rem; }
.roadmap-page .rm-updated { font-size: .8125rem; color: var(--rm-muted); }
.roadmap-page .rm-directions { position: relative; padding-left: 1.5rem; border-left: 1px solid #37556b; }
.roadmap-page .rm-directions-label { display: block; font-size: .75rem; color: var(--rm-muted); letter-spacing: .07em; text-transform: uppercase; margin-bottom: .65rem; }
.roadmap-page .rm-directions a { display: flex; align-items: center; gap: 1rem; color: #e1edf5; padding: 1.3rem 0; }
.roadmap-page .rm-directions a + a { border-top: 1px solid var(--rm-line); }
.roadmap-page .rm-directions a > span:last-child { margin-left: auto; color: var(--rm-blue); }
.roadmap-page .rm-directions svg { flex-shrink: 0; width: 44px; height: 44px; }
.roadmap-page .rm-directions strong { display: block; font-size: 1rem; line-height: 1.5; font-weight: 600; }
.roadmap-page .rm-directions small { display: block; font-size: .8125rem; color: var(--rm-muted); margin-top: .3rem; }
.roadmap-page .rm-directions a:hover strong { color: var(--rm-blue); }
.roadmap-page svg { fill: none; stroke: var(--rm-blue); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.roadmap-page .rm-note { display: flex; gap: 1.2rem; align-items: flex-start; background: #101a22; border: 1px solid var(--rm-line); border-radius: 8px; padding: 1.15rem 1.35rem; }
.roadmap-page .rm-note p { margin: 0; color: #bdc9d3; font-size: .875rem; line-height: 1.7; }
.roadmap-page .rm-status { display: inline-flex; align-items: center; gap: .45rem; padding: .25rem .6rem; font-size: .6875rem; line-height: 1.5; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; border: 1px solid #496451; border-radius: 4px; color: #c2dbc6; white-space: nowrap; }
.roadmap-page .rm-status::before { content: ''; width: 5px; height: 5px; border: 1px solid currentColor; border-radius: 50%; }
.roadmap-page .rm-section { padding: 4.8rem 0 0; }
.roadmap-page .rm-section-head { max-width: 43rem; margin-bottom: 1rem; }
.roadmap-page .rm-section-head .rm-eyebrow { margin-bottom: .65rem; }
.roadmap-page h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.25; letter-spacing: -.025em; margin-bottom: .9rem; }
.roadmap-page .rm-section-head p { font-size: 1rem; color: var(--rm-muted); line-height: 1.75; }
.roadmap-page .rm-feature { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 3.4rem; align-items: center; padding: 3rem 0; border-bottom: 1px solid var(--rm-line); }
.roadmap-page h3 { font-size: clamp(1.4rem, 2.5vw, 1.75rem); line-height: 1.3; letter-spacing: -.025em; margin: 1rem 0; }
.roadmap-page .rm-feature-copy p { color: var(--rm-muted); font-size: .9375rem; line-height: 1.8; margin: 0 0 .9rem; }
.roadmap-page .rm-benefit { display: block; margin-top: 1.2rem; font-size: .875rem; line-height: 1.6; color: #d7e5ed; padding-left: .8rem; border-left: 2px solid #6ca4c5; }
.roadmap-page .rm-concept { margin: 0; min-width: 0; padding: 1.3rem; background: #101922; border: 1px solid #314656; border-radius: 10px; }
.roadmap-page .rm-concept figcaption { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .4rem 1rem; color: #dce8f0; font-size: .8125rem; line-height: 1.5; margin-bottom: 1.4rem; }
.roadmap-page .rm-concept-label { font-size: .625rem; text-transform: uppercase; letter-spacing: .1em; color: #a2b5c5; }
.roadmap-page .rm-doc-label { display: block; color: var(--rm-muted); font-size: .625rem; line-height: 1.6; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; margin-bottom: .7rem; }
.roadmap-page .rm-reference-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) 26px minmax(0, 1fr); align-items: center; }
.roadmap-page .rm-document, .roadmap-page .rm-reference-card { padding: 1rem; border-radius: 6px; border: 1px solid #3b5367; background: #172532; min-width: 0; }
.roadmap-page .rm-document strong, .roadmap-page .rm-reference-card strong { display: block; font-size: .875rem; line-height: 1.5; color: #edf3f7; margin-bottom: .6rem; }
.roadmap-page .rm-document p, .roadmap-page .rm-reference-card p { font-size: .8125rem; line-height: 1.65; color: #c2ced8; margin: 0 0 1rem; }
.roadmap-page .rm-reference-card { background: #1c303f; border-color: #739bb8; }
.roadmap-page .rm-reference-card .rm-doc-label { color: #b2d2e8; }
.roadmap-page .rm-relation { display: flex; align-items: flex-start; gap: .45rem; color: #b0d9f5; font-size: .6875rem; line-height: 1.6; }
.roadmap-page .rm-relation svg { flex-shrink: 0; width: 14px; height: 14px; margin-top: 2px; }
.roadmap-page .rm-writing-line { display: block; width: 65%; height: 16px; border-bottom: 1px solid #536c7e; margin-top: .7rem; }
.roadmap-page .rm-writing-line::after { content: ''; display: block; height: 10px; width: 1px; background: var(--rm-blue); margin-left: auto; }
.roadmap-page .rm-inline-note { display: block; font-size: .6875rem; line-height: 1.6; color: #bfd6e5; padding-left: .6rem; border-left: 2px solid #7baccd; }
.roadmap-page .rm-connector { display: block; width: 26px; height: 32px; }
.roadmap-page .rm-diagram-summary { color: var(--rm-muted); font-size: .75rem; line-height: 1.6; margin: 1.1rem 0 0; }
.roadmap-page .rm-diagram-summary > span { color: var(--rm-blue); margin-right: .3rem; }
.roadmap-page .rm-split { background: #121b22; }
.roadmap-page .rm-split-layout { display: grid; grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr); background: #0e141b; border: 1px solid #3b5367; border-radius: 6px; overflow: hidden; }
.roadmap-page .rm-source-pane, .roadmap-page .rm-context-pane { padding: 1rem .9rem; min-width: 0; }
.roadmap-page .rm-split-layout strong { display: block; font-size: .8125rem; line-height: 1.6; color: #e0eaf1; margin-bottom: .85rem; }
.roadmap-page .rm-source-pane pre { background: none; padding: 0; margin: 0; color: #c9d6e1; font-size: .75rem; line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; }
.roadmap-page .rm-source-pane code { font: inherit; font-family: Consolas, monospace; }
.roadmap-page .rm-source-pane code span { color: #b6a4df; }
.roadmap-page .rm-divider { display: flex; justify-content: center; align-items: center; border-left: 1px solid #3b5367; border-right: 1px solid #3b5367; color: #9db8cb; background: #20313d; }
.roadmap-page .rm-context-pane { background: #192c30; }
.roadmap-page .rm-context-pane p { color: #c5d6d4; font-size: .75rem; line-height: 1.7; margin: 0; }
.roadmap-page .rm-context-pane .rm-doc-label { color: #accdc4; }
.roadmap-page .rm-context-pane .rm-secondary-label { margin-top: 1.2rem; margin-bottom: .4rem; }
.roadmap-page .rm-callouts { background: #141c22; }
.roadmap-page .rm-callout-list { display: grid; gap: .8rem; }
.roadmap-page .rm-callout { display: flex; align-items: flex-start; gap: .8rem; padding: .8rem 1rem; border: 1px solid #3d6158; border-left: 3px solid #89b9a8; border-radius: 4px; background: #1c302c; }
.roadmap-page .rm-callout svg { width: 19px; height: 19px; flex-shrink: 0; stroke: #b0d6c9; margin-top: 2px; }
.roadmap-page .rm-callout strong { display: block; color: #c8e4d9; font-size: .75rem; line-height: 1.5; margin-bottom: .2rem; }
.roadmap-page .rm-callout p { font-size: .8125rem; line-height: 1.6; color: #c9d6d5; margin: 0; }
.roadmap-page .rm-callout--warning { border-color: #6a5942; border-left-color: #b79a69; background: #322c23; }
.roadmap-page .rm-callout--warning strong, .roadmap-page .rm-callout--warning svg { color: #e0caa3; stroke: #e0caa3; }
.roadmap-page .rm-callout--example { border-color: #3d5c75; border-left-color: #88afcf; background: #1b2e3e; }
.roadmap-page .rm-callout--example strong, .roadmap-page .rm-callout--example svg { color: #b6d5ef; stroke: #b6d5ef; }
.roadmap-page .rm-integration-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.roadmap-page .rm-integration { min-width: 0; overflow: hidden; border: 1px solid var(--rm-line); border-radius: 10px; background: #101920; }
.roadmap-page .rm-integration-art { padding: 1.6rem 2rem 1.2rem; border-bottom: 1px solid var(--rm-line); background: #142431; }
.roadmap-page .rm-integration-art svg { width: 100%; max-height: 125px; display: block; stroke: #a6c9e1; }
.roadmap-page .rm-svg-panel { fill: #101c26; stroke: #617e93; }
.roadmap-page .rm-svg-accent { fill: #284653; stroke: #9bbebc; }
.roadmap-page .rm-integration-art > span { display: block; margin-top: .7rem; color: #b1c8d9; text-align: center; font-size: .6875rem; letter-spacing: .04em; }
.roadmap-page .rm-integration-body { padding: 1.8rem; }
.roadmap-page .rm-integration-body p { font-size: .9375rem; line-height: 1.8; color: var(--rm-muted); margin-bottom: 1rem; }
.roadmap-page .rm-integration-body .rm-integration-aim { color: #cedde7; font-size: .875rem; }
.roadmap-page .rm-text-link { display: inline-block; color: var(--rm-blue); font-size: .875rem; line-height: 1.65; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #476b88; }
.roadmap-page .rm-text-link:hover { color: #e0f1ff; text-decoration-color: currentColor; }
.roadmap-page .rm-closing { display: flex; align-items: flex-start; gap: 1.7rem; padding-top: 2.5rem; margin-top: 4rem; border-top: 1px solid var(--rm-line); }
.roadmap-page .rm-closing svg { flex-shrink: 0; width: 58px; height: 58px; }
.roadmap-page .rm-closing svg rect { fill: #172733; }
.roadmap-page .rm-closing h2 { font-size: 1.35rem; }
.roadmap-page .rm-closing p { font-size: .9375rem; color: var(--rm-muted); line-height: 1.8; max-width: 47rem; margin-bottom: 1rem; }
.roadmap-page [id] { scroll-margin-top: 7rem; }
.roadmap-page a:focus-visible { outline: 2px solid #afd9f9; outline-offset: 5px; border-radius: 3px; }
/* Workflow proposals: concrete directions and questions that still need study. */
.roadmap-page .rm-proposal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.roadmap-page .rm-proposal { min-width: 0; border: 1px solid var(--rm-line); border-radius: 10px; overflow: hidden; background: #101920; }
.roadmap-page .rm-proposal-art { margin: 0; padding: 1.5rem 1.8rem 1.1rem; background: #142431; border-bottom: 1px solid var(--rm-line); }
.roadmap-page .rm-proposal-art > svg { display: block; width: 100%; height: 120px; stroke: #a6c9e1; }
.roadmap-page .rm-proposal-art figcaption { color: #b1c8d9; font-size: .75rem; line-height: 1.65; text-align: center; margin-top: .8rem; }
.roadmap-page .rm-proposal-art--impact .rm-svg-accent { fill: #39332a; stroke: #c6b28c; }
.roadmap-page .rm-proposal--study .rm-proposal-art { background: #1c202c; }
.roadmap-page .rm-proposal--study .rm-proposal-art > svg { stroke: #bdb7d5; }
.roadmap-page .rm-proposal--study .rm-svg-accent { fill: #333345; stroke: #b5acca; }
.roadmap-page .rm-proposal-body { padding: 1.6rem 1.8rem 1.8rem; }
.roadmap-page .rm-proposal-body p { margin: 0 0 1rem; color: #bac7d2; font-size: .9375rem; line-height: 1.8; }
.roadmap-page .rm-proposal-body .rm-study-note { margin-bottom: 0; padding-top: 1rem; border-top: 1px solid var(--rm-line); font-size: .875rem; color: var(--rm-muted); }
.roadmap-page .rm-study-note strong { color: #d0dce5; font-weight: 600; }
.roadmap-page .rm-status--study { color: #d0c8e3; border-color: #655e7b; }
.roadmap-page .rm-status--study::before { border-radius: 1px; transform: rotate(45deg); }
.roadmap-page .rm-status--long-term { color: #d9c9aa; border-color: #71634e; }
.roadmap-page .rm-action-states { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; min-height: 120px; align-items: center; }
.roadmap-page .rm-action-state { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: .65rem .25rem; color: #c1cfdb; font-size: .6875rem; line-height: 1.5; text-align: center; border: 1px solid #4f596a; border-radius: 5px; background: #242c38; }
.roadmap-page .rm-action-state svg { width: 26px; height: 26px; stroke: currentColor; }
.roadmap-page .rm-action-state--relevant { color: #d5eaf4; border-color: #89b4cd; background: #2c4557; }
.roadmap-page .rm-action-state--unavailable { color: #a7b1be; border-style: dashed; background: #202632; }
.roadmap-page .rm-horizon { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; gap: 2.5rem; margin-top: 1.7rem; padding: 2rem; border: 1px dashed #71634e; border-radius: 10px; background: #181b1c; }
.roadmap-page .rm-horizon-copy p { color: #b8c2c8; font-size: .9375rem; line-height: 1.8; margin: 0 0 1rem; }
.roadmap-page .rm-horizon-copy p:last-child { margin-bottom: 0; }
.roadmap-page .rm-horizon-art { margin: 0; min-width: 0; }
.roadmap-page .rm-horizon-art svg { width: 100%; max-height: 205px; display: block; stroke: #acbcbf; }
.roadmap-page .rm-horizon-art .rm-svg-panel { fill: #18242a; stroke: #9aabaf; }
.roadmap-page .rm-horizon-art .rm-svg-accent { fill: #424036; stroke: #ccb88e; }
.roadmap-page .rm-horizon-art figcaption { margin-top: .8rem; color: #c4c2b5; font-size: .75rem; text-align: center; }
@media (max-width: 950px) {
  .roadmap-page .rm-hero { gap: 2rem; }
  .roadmap-page .rm-feature { grid-template-columns: minmax(0, 1fr); gap: 1.7rem; }
  .roadmap-page .rm-feature-copy { max-width: 40rem; }
  .roadmap-page .rm-concept { max-width: 40rem; width: 100%; }
}
@media (max-width: 700px) {
  .roadmap-page .rm-shell { padding-top: 2.5rem; padding-bottom: 3rem; }
  .roadmap-page .rm-hero { grid-template-columns: minmax(0, 1fr); gap: 2rem; margin-bottom: 2rem; }
  .roadmap-page .rm-directions { max-width: 32rem; }
  .roadmap-page .rm-note { flex-direction: column; gap: .8rem; padding: 1.1rem; }
  .roadmap-page .rm-section { padding-top: 3.5rem; }
  .roadmap-page .rm-feature { padding: 2rem 0; }
  .roadmap-page .rm-integration-grid { grid-template-columns: minmax(0, 1fr); }
  .roadmap-page .rm-integration-body { padding: 1.4rem; }
  .roadmap-page .rm-proposal-grid { grid-template-columns: minmax(0, 1fr); }
  .roadmap-page .rm-proposal-body { padding: 1.4rem; }
  .roadmap-page .rm-proposal-art { padding: 1.3rem 1.4rem 1rem; }
  .roadmap-page .rm-horizon { grid-template-columns: minmax(0, 1fr); padding: 1.4rem; gap: 1.5rem; }
  .roadmap-page .rm-horizon-art { width: 100%; max-width: 320px; justify-self: center; }
  .roadmap-page .rm-closing { gap: 1rem; margin-top: 3rem; }
  .roadmap-page .rm-closing svg { width: 38px; height: 38px; }
}
@media (max-width: 430px) {
  .roadmap-page .rm-concept { padding: 1rem; }
  .roadmap-page .rm-reference-layout { grid-template-columns: minmax(0, 1fr); }
  .roadmap-page .rm-connector { justify-self: center; transform: rotate(90deg); }
  .roadmap-page .rm-split-layout { grid-template-columns: minmax(0, 1fr); }
  .roadmap-page .rm-divider { display: none; }
  .roadmap-page .rm-context-pane { border-top: 1px solid #3b5367; }
  .roadmap-page .rm-source-pane pre { font-size: .8125rem; }
  .roadmap-page .rm-closing { flex-direction: column; }
  .roadmap-page .rm-action-states { grid-template-columns: minmax(0, 1fr); gap: .5rem; min-height: 0; }
  .roadmap-page .rm-action-state { flex-direction: row; text-align: left; gap: .8rem; padding: .55rem .8rem; font-size: .75rem; }
}