/**
 * Roadmap: a full-bleed dark stage (data-theme="dark" scopes the dark tokens to it in
 * both site themes) with an animated strand field you scroll sideways, details below.
 */

/* Full bleed: --rm-vw is the viewport minus the scrollbar, set by onRender. */
.rm-stage {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: var(--rm-vw, 100vw);
    margin: 16px 0 20px;
    background:
        radial-gradient(45% 60% at 8% 100%, var(--gn-stage-glow), transparent 70%),
        radial-gradient(35% 55% at 94% 0%, color-mix(in srgb, var(--gn-violet) 16%, transparent), transparent 70%),
        var(--gn-stage);
    color: var(--gn-stage-ink);
    border-block: 1px solid var(--gn-stage-line);
}

.rm-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 24px 0;
    font-family: var(--gn-mono);
    font-size: 0.7rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gn-stage-muted);
}

.rm-legend span::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 7px;
    border-radius: 50%;
}

.rm-legend .is-done::before { background: var(--gn-grad); }
.rm-legend .is-now::before { background: var(--gn-stage-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gn-violet) 45%, transparent); }
.rm-legend .is-planned::before { border: 1.5px solid var(--gn-violet); }
.rm-legend .is-exploring::before { border: 1.5px dashed var(--gn-stage-muted); }

/* ---------- strand field ---------- */
.rm-viz { position: relative; }
.rm.is-js .rm-viz { height: clamp(340px, 52vh, 540px); }

.rm-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }

.rm-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.rm-scroll::-webkit-scrollbar { display: none; }
.rm.is-js .rm-scroll { position: absolute; inset: 0; cursor: grab; overscroll-behavior-x: contain; }
.rm-scroll.is-dragging { cursor: grabbing; }
.rm-track { position: relative; height: 100%; }

/* Strands and quarters fade out at the screen edges without covering the stage glow. */
.rm.is-js .rm-canvas,
.rm.is-js .rm-scroll {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--rm-edge), #000 calc(100% - var(--rm-edge)), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 var(--rm-edge), #000 calc(100% - var(--rm-edge)), transparent);
}
.rm-viz { --rm-edge: 8vw; }

.rm-hint, .rm-arrows { display: none; }
.rm.is-js .rm-hint {
    display: block;
    position: absolute;
    left: max(24px, calc(50% - 576px));
    bottom: 20px;
    z-index: 3;
    font-family: var(--gn-mono);
    font-size: 0.7rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--gn-stage-muted);
}
.rm.is-js .rm-arrows {
    display: flex;
    gap: 6px;
    position: absolute;
    right: max(24px, calc(50% - 576px));
    bottom: 14px;
    z-index: 3;
}
.rm-arrows button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--gn-stage-line);
    background: color-mix(in srgb, var(--gn-stage) 70%, transparent);
    color: var(--gn-stage-ink);
    font: inherit;
    font-size: 1.1rem;
    cursor: pointer;
}
.rm-arrows button:hover { border-color: var(--gn-stage-muted); }

/* ---------- quarters ---------- */
/* Without JS the quarters are a plain wrapped row; with JS they sit on the strands. */
.article-body .rm-nodes,
.rm-nodes { display: flex; flex-wrap: wrap; gap: 4px 18px; list-style: none; margin: 0; padding: 20px 24px; }
.rm.is-js .rm-nodes { display: block; padding: 0; }
.rm.is-js .rm-node { position: absolute; transform: translate(-50%, -50%); z-index: 1; }
.rm-node { margin: 0; }

.rm-btn {
    appearance: none;
    position: relative;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    font: inherit;
}
.rm-btn:focus-visible,
.rm-arrows button:focus-visible { outline: 2px solid var(--gn-focus); outline-offset: 2px; }

.rm-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--gn-stage);
    border: 1.5px solid var(--gn-violet);
    transition: transform var(--gn-fast) var(--gn-ease), box-shadow var(--gn-fast) var(--gn-ease);
}
.is-done .rm-dot { background: var(--gn-grad); border-color: transparent; }
.is-exploring .rm-dot { border-style: dashed; border-color: var(--gn-stage-muted); }
.is-now .rm-dot {
    width: 16px;
    height: 16px;
    border: 0;
    background: var(--gn-stage-ink);
    animation: rmPulse 2.4s ease-out infinite;
}
@keyframes rmPulse {
    from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gn-violet) 65%, transparent); }
    to { box-shadow: 0 0 0 18px transparent; }
}

.rm-q {
    position: absolute;
    top: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: var(--gn-mono);
    font-size: 0.72rem;
    letter-spacing: .03em;
    color: var(--gn-stage-muted);
}
.rm-btn:hover .rm-dot,
.rm-btn[aria-pressed="true"] .rm-dot { transform: scale(1.35); box-shadow: 0 0 0 6px color-mix(in srgb, var(--gn-violet) 22%, transparent), 0 0 24px color-mix(in srgb, var(--gn-blue) 70%, transparent); }
.rm-btn:hover .rm-q,
.rm-btn[aria-pressed="true"] .rm-q { color: var(--gn-stage-ink); }
.rm-btn[aria-pressed="true"] .rm-q { font-weight: 600; }

/* ---------- detail panel ---------- */
.rm-panel { border-top: 1px solid var(--gn-stage-line); }
.rm-detail { max-width: 1200px; margin: 0 auto; padding: 28px 24px 34px; }
.rm.is-js .rm-detail { min-height: 240px; }
.rm-detail[hidden] { display: none; }
.rm.is-js .rm-detail:not([hidden]) { animation: rmIn 260ms var(--gn-ease); }
@keyframes rmIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.article-body .rm-kicker,
.rm-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    font-family: var(--gn-mono);
    font-size: 0.75rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--gn-stage-muted);
}
.rm-pill { padding: 2px 8px; border-radius: var(--gn-r-pill); border: 1px solid var(--gn-stage-line); color: var(--gn-stage-ink); }
.is-done .rm-pill { background: var(--gn-grad); border-color: transparent; color: var(--gn-stage-ink); }
.is-now .rm-pill { background: var(--gn-stage-ink); color: var(--gn-stage); border-color: transparent; }

.article-body .rm-title,
.rm-title { margin: 0 0 14px; font-size: 1.7rem; line-height: 1.2; letter-spacing: -0.02em; color: var(--gn-stage-ink); text-wrap: balance; }

.article-body .rm-list,
.rm-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 32px; margin: 0; padding: 0; list-style: none; }
.rm-list li { position: relative; padding-left: 18px; color: var(--gn-stage-muted); line-height: 1.55; min-width: 0; }
.rm-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--gn-grad); }

/* ---------- under the stage ---------- */
.article-body .rm-note,
.rm-note { font-size: 0.85rem; color: var(--gn-muted); text-align: left; }
.rm-cta { margin-top: 28px; padding: 22px 24px; border: 1px solid var(--gn-hairline); border-radius: var(--gn-r-card); background: var(--gn-surface); }
.article-body .rm-cta p { margin: 0; text-align: left; }
.article-body .rm-cta .rm-cta-title { font-weight: 700; color: var(--gn-ink); margin-bottom: 4px; }

@media (max-width: 720px) {
    .rm-legend { padding: 18px 16px 0; gap: 12px; }
    .rm-detail { padding: 22px 16px 26px; }
    .article-body .rm-list, .rm-list { grid-template-columns: 1fr; }
    .article-body .rm-title, .rm-title { font-size: 1.35rem; }
    .rm.is-js .rm-hint { display: none; }
    .rm-viz { --rm-edge: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    .is-now .rm-dot { animation: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--gn-violet) 45%, transparent); }
    .rm.is-js .rm-detail:not([hidden]) { animation: none; }
}