.center-head.center-head-roadmap,
#roadmapCenter {
  display: none;
}

body[data-agent="roadmap"] {
  --rm-accent-a: #54A8E8;
  --rm-accent-b: #54A8E8;
  --rm-accent: #54A8E8;
  --rm-card: color-mix(in srgb, var(--panel) 72%, var(--raise));
  --rm-inset: color-mix(in srgb, var(--raise) 82%, var(--void));
  --rm-quiet: color-mix(in srgb, var(--muted) 62%, var(--text));
}

body[data-agent="roadmap"] .workspace-main {
  grid-template-columns: minmax(0, 1fr);
}

body[data-agent="roadmap"] .rail,
body[data-agent="roadmap"] #beoordelaarCenter,
body[data-agent="roadmap"] #beoordelaarHistory,
body[data-agent="roadmap"] #calcCenter,
body[data-agent="roadmap"] .center-head-beoordelaar,
body[data-agent="roadmap"] .center-head-calc,
body[data-agent="roadmap"] .center-head-geschiedenis,
body[data-agent="roadmap"] .center-head-products,
body[data-agent="roadmap"] .center-head-product,
body[data-agent="roadmap"] .center-head-webshop,
body[data-agent="roadmap"] .center-head-onderzoeker,
body[data-agent="roadmap"] .center-head-dashboard,
body[data-agent="roadmap"] .center-head-ai-coach,
body[data-agent="roadmap"] .center-head-coaching,
body[data-agent="roadmap"] .center-head-actieplan,
body[data-agent="roadmap"] #productsCenter,
body[data-agent="roadmap"] #productDetailCenter,
body[data-agent="roadmap"] #webshopCenter,
body[data-agent="roadmap"] #onderzoekerCenter,
body[data-agent="roadmap"] #dashboardCenter,
body[data-agent="roadmap"] #aiCoachCenter,
body[data-agent="roadmap"] #coachingCenter,
body[data-agent="roadmap"] #actieplanCenter {
  display: none !important;
}

body[data-agent="roadmap"] .center-head.center-head-roadmap {
  display: flex;
  flex-wrap: wrap;
  position: static;
  align-items: center;
  justify-content: flex-start;
  width: min(1200px, 100%);
  max-width: 1200px;
  min-width: 0;
  box-sizing: border-box;
  margin: 0 auto 22px;
  gap: 16px 20px;
  padding: 0;
  overflow: visible;
}

body[data-agent="roadmap"] .center-head-roadmap > div:first-child {
  flex: 1 1 200px;
  min-width: min(100%, 180px);
  max-width: 100%;
}

body[data-agent="roadmap"] .center-head-roadmap .center-head-actions {
  flex: 0 1 auto;
  flex-wrap: wrap;
  align-items: center;
  flex-shrink: 1;
  min-width: 0;
  max-width: 100%;
}

body[data-agent="roadmap"] .center-head-roadmap .title,
body[data-agent="roadmap"] .center-head-roadmap .page-help-btn,
body[data-agent="roadmap"] .center-head-roadmap #roadmapEditBtn,
body[data-agent="roadmap"] .center-head-roadmap .rm-head-progress {
  position: static;
}

body[data-agent="roadmap"] .center-head-roadmap #roadmapEditBtn {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
  margin-top: 0;
  white-space: nowrap;
  overflow: visible;
}

body[data-agent="roadmap"] .center-head-roadmap .subtitle {
  margin-top: 10px;
}

body[data-agent="roadmap"] .center-head.center-head-roadmap.is-lesson {
  display: none;
}

body[data-agent="roadmap"]:has(#roadmapCenter.is-lesson) .center {
  overflow-x: hidden;
  overflow-y: auto;
}

body[data-agent="roadmap"] #roadmapCenter.is-lesson {
  width: min(100%, 1240px);
  min-width: 0;
  flex: 0 0 auto;
  height: auto;
  min-height: auto;
  max-height: none;
  padding: 0 12px 40px;
  overflow: visible;
  gap: 0;
  container-type: inline-size;
  container-name: rm-lesson;
}

body[data-agent="roadmap"] #roadmapCenter {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: min(1200px, 100%);
  max-width: 1200px;
  margin: 0 auto;
  min-width: 0;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
  gap: 14px;
  padding: 0 0 32px;
}

body[data-agent="roadmap"] #roadmapCenter:not(.is-lesson) {
  gap: 32px;
}

body[data-agent="roadmap"] #roadmapCenter:not(.is-lesson) > .rm-next,
body[data-agent="roadmap"] #roadmapCenter:not(.is-lesson) > .rm-search,
body[data-agent="roadmap"] #roadmapCenter:not(.is-lesson) > .rm-section-row,
body[data-agent="roadmap"] #roadmapCenter:not(.is-lesson) > .rm-section-label,
body[data-agent="roadmap"] #roadmapCenter:not(.is-lesson) > .rm-edit-bar,
body[data-agent="roadmap"] #roadmapCenter:not(.is-lesson) > .rm-banner,
body[data-agent="roadmap"] #roadmapCenter:not(.is-lesson) > .rm-error,
body[data-agent="roadmap"] #roadmapCenter:not(.is-lesson) > .rm-path {
  margin: 0;
}

.rm-head-progress {
  display: flex;
  position: static;
  flex: 1 1 240px;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  width: auto;
  min-width: min(100%, 220px);
  max-width: 320px;
  padding: 10px 12px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  text-align: left;
}

.rm-head-progress[hidden] {
  display: none !important;
}

.rm-module-head {
  display: flex;
  align-items: stretch;
  min-width: 0;
  max-width: 100%;
}

.rm-module-head .rm-module-toggle {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.rm-lesson-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}

.rm-lesson-row .rm-lesson {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.rm-mini {
  flex: 0 0 auto;
  align-self: center;
  min-height: 32px;
  margin: 0 8px 0 0;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.rm-edit-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin: 8px 0 0;
  min-width: 0;
  max-width: 100%;
}

.rm-edit-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.rm-add-lesson {
  margin: 4px 0 8px;
}

.rm-editor {
  position: static;
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  background: transparent;
}

.rm-editor-card {
  width: 100%;
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
  overflow: auto;
  margin: 8px 0 12px;
  padding: 22px 22px 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.rm-editor-card h2 {
  margin: 0;
  font-size: 22px;
}

.rm-editor-card label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
  min-width: 0;
  font-size: 13px;
  font-weight: 650;
}

.rm-editor-card input,
.rm-editor-card textarea,
.rm-editor-card select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--raise);
  color: inherit;
  font: inherit;
  font-weight: 500;
}

.rm-editor-card textarea {
  min-height: min(42vh, 480px);
  line-height: 1.6;
  resize: vertical;
}

.rm-editor-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.rm-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.rm-editor-actions .cta,
.rm-editor-actions .rm-ghost {
  width: auto;
  margin-top: 0;
  flex: 0 0 auto;
  white-space: nowrap;
}

.rm-editor-delete {
  margin-top: 18px;
}

.rm-head-kicker {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rm-head-count {
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.rm-head-pct {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.rm-track {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--raise) 65%, var(--line));
  overflow: hidden;
}

.rm-track.is-overall {
  width: 100%;
  max-width: 100%;
  height: 8px;
  margin-top: 6px;
}

.rm-track.is-module {
  width: 72px;
  height: 4px;
}

.rm-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #54A8E8;
  transition: width 200ms ease;
}

.rm-next {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  max-width: 720px;
  margin-top: 2px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--ice) 32%, var(--line));
  background:
    radial-gradient(480px 120px at 0% 0%, color-mix(in srgb, var(--ice) 16%, transparent), transparent 70%),
    var(--panel);
}

.rm-next-kicker {
  color: var(--ice);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

a.rm-link-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 8px 0;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--ice) 45%, var(--line));
  background: color-mix(in srgb, var(--ice) 16%, var(--raise));
  color: var(--text);
  font-weight: 650;
  text-decoration: none;
}

.rm-next-module {
  margin: 8px 0 0;
  color: var(--rm-quiet, var(--muted));
  font-size: 12px;
  font-weight: 600;
}

.rm-next h2 {
  margin: 8px 0 0;
  font-size: 20px;
  letter-spacing: -0.04em;
  line-height: 1.2;
}

.rm-next p {
  margin: 4px 0 0;
  color: var(--copy);
  font-size: 13px;
  line-height: 1.4;
}

.rm-next-meta {
  margin-top: 8px;
  color: var(--rm-quiet, var(--muted));
  font-size: 12px;
  font-weight: 600;
}

.rm-next .rm-track.is-module {
  width: 100%;
  max-width: 220px;
  height: 5px;
  margin-top: 10px;
}

.rm-next-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.rm-next .cta {
  min-height: 44px;
  padding: 10px 16px;
  transition: background 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.rm-next .cta:hover {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ice) 35%, transparent);
}

.rm-search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  margin-top: 0;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--raise);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.rm-next + .rm-search {
  margin-top: 0;
}

.rm-search:focus-within {
  border-color: color-mix(in srgb, var(--ice) 50%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ice) 14%, transparent);
}

.rm-search-icon {
  width: 18px;
  height: 18px;
  color: var(--muted);
  flex: none;
}

.rm-search-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.rm-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 0;
  font: inherit;
  font-size: 14px;
}

.rm-search input:focus-visible {
  outline: none;
}

.rm-search input::-webkit-search-decoration,
.rm-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.rm-section-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.rm-section-label {
  margin: 0;
  color: var(--rm-quiet, var(--muted));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rm-add-quiet {
  width: auto;
  min-height: 36px;
  margin: 0;
  padding: 6px 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.rm-path {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rm-module {
  position: relative;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--rm-card, var(--panel));
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.rm-module.is-open {
  background: color-mix(in srgb, var(--rm-card, var(--panel)) 86%, var(--raise));
}

.rm-module.is-current {
  border-color: color-mix(in srgb, var(--ice) 62%, var(--line));
  background: color-mix(in srgb, var(--ice) 8%, var(--rm-card, var(--panel)));
  box-shadow: inset 4px 0 0 var(--ice);
}

.rm-module.is-done {
  border-color: color-mix(in srgb, var(--testen) 28%, var(--line));
}

.rm-module.is-future {
  background: color-mix(in srgb, var(--rm-card, var(--panel)) 88%, var(--void));
}

.rm-lesson.is-locked {
  opacity: 0.55;
}

.rm-module.is-future .rm-module-copy strong,
.rm-module.is-future .rm-index {
  color: var(--rm-quiet, var(--text));
  font-weight: 650;
}

.rm-module-toggle,
.rm-lesson {
  pointer-events: auto;
}

.rm-module-toggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px 16px;
  align-items: start;
  width: 100%;
  min-height: 44px;
  padding: 20px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 16px;
  transition: background 180ms ease;
}

.rm-module-toggle:hover {
  background: color-mix(in srgb, var(--raise) 55%, transparent);
}

.rm-module.is-current .rm-module-toggle:hover {
  background: color-mix(in srgb, var(--ice) 8%, transparent);
}

.rm-module-toggle:focus-visible {
  outline: 2px solid var(--ice);
  outline-offset: -2px;
}

.rm-index {
  color: var(--ice);
  padding-top: 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rm-module.is-current .rm-index {
  color: var(--ice);
}

.rm-module-copy .rm-module-fase {
  display: block;
  color: var(--ice);
  background: var(--rm-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.rm-module-copy strong {
  display: block;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.rm-module.is-current .rm-module-copy strong {
  font-weight: 700;
}

.rm-module-titleline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.rm-module-meta {
  display: block;
  margin-top: 6px;
  color: var(--rm-quiet, var(--muted));
  font-size: 12px;
  font-weight: 600;
}

.rm-module-copy .rm-track.is-module {
  width: 100%;
  max-width: 240px;
  height: 5px;
  margin-top: 8px;
}

.rm-module.is-done .rm-track > span {
  background: var(--testen);
}

.rm-module-aside {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  align-self: center;
}

.rm-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  min-width: 92px;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.rm-badge.is-idle {
  color: color-mix(in srgb, var(--muted) 88%, var(--text));
  background: color-mix(in srgb, var(--muted) 10%, transparent);
}

.rm-badge.is-active {
  color: var(--ice);
  background: color-mix(in srgb, var(--ice) 12%, transparent);
}

.rm-badge.is-done {
  color: var(--testen);
  background: color-mix(in srgb, var(--testen) 12%, transparent);
}

.rm-chevron {
  width: 7px;
  height: 7px;
  flex: none;
  border-right: 1.6px solid var(--muted);
  border-bottom: 1.6px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 180ms ease;
  margin-top: -3px;
}

.rm-module.is-open .rm-chevron {
  transform: rotate(225deg);
  margin-top: 2px;
}

.rm-lessons {
  display: none;
  margin: 0 20px 20px;
  padding: 4px;
  list-style: none;
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  border-radius: 12px;
  background: var(--rm-inset, var(--raise));
}

.rm-module.is-open .rm-lessons {
  display: flex;
  flex-direction: column;
}

.rm-lessons > li + li {
  border-top: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
}

.rm-lesson {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px 10px;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 180ms ease, opacity 180ms ease;
}

.rm-lesson-copy {
  min-width: 0;
  flex: 0 1 auto;
}

.rm-lesson:hover,
.rm-lesson:focus-visible {
  background: color-mix(in srgb, var(--raise) 80%, transparent);
  outline: none;
}

.rm-lesson.is-now {
  background: color-mix(in srgb, var(--ice) 18%, var(--rm-inset, var(--raise)));
}

.rm-lesson.is-now:hover,
.rm-lesson.is-now:focus-visible {
  background: color-mix(in srgb, var(--ice) 16%, transparent);
}

.rm-lesson.is-done {
  opacity: 1;
}

.rm-lesson.is-done:hover,
.rm-lesson.is-done:focus-visible {
  opacity: 1;
}

.rm-check {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--muted) 50%, var(--line));
  display: grid;
  place-items: center;
}

.rm-lesson.is-now .rm-check {
  border-color: color-mix(in srgb, var(--ice) 60%, var(--line));
}

.rm-lesson.is-done .rm-check {
  border-color: color-mix(in srgb, var(--testen) 55%, var(--line));
  background: color-mix(in srgb, var(--testen) 14%, transparent);
  color: var(--testen);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.rm-num {
  color: var(--text);
  background: color-mix(in srgb, var(--ice) 14%, transparent);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rm-lesson strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.rm-lesson.is-now strong {
  font-weight: 700;
}

.rm-lesson em {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
  line-height: 1.35;
}

.rm-lesson small {
  width: 5.2rem;
  min-width: 5.2rem;
  color: var(--rm-quiet, var(--muted));
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}

.rm-lesson.is-done small {
  color: var(--testen);
}

.rm-lesson.is-now small {
  color: var(--ice);
}

.rm-lesson small:empty {
  overflow: hidden;
}

.rm-empty,
.rm-error {
  margin: 0;
  padding: 8px 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.rm-empty.is-search {
  max-width: 720px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--rm-card, var(--panel));
  color: var(--text);
}

.rm-hits {
  display: grid;
  gap: 8px;
  max-width: 720px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rm-hit {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--rm-card, var(--panel));
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.rm-hit:hover,
.rm-hit:focus-visible {
  border-color: color-mix(in srgb, var(--ice) 55%, var(--line));
  outline: none;
}

.rm-hit.is-locked {
  opacity: 0.72;
}

.rm-hit-top,
.rm-hit-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.rm-hit strong {
  font-size: 15px;
  font-weight: 650;
  line-height: 1.35;
}

.rm-hit-snippet {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.rm-hit mark,
.rm-lesson mark {
  background: color-mix(in srgb, var(--ice) 32%, transparent);
  color: var(--text);
  border-radius: 3px;
  padding: 0 2px;
}

.rm-hit .rm-track.is-module {
  width: 120px;
  max-width: 100%;
  height: 5px;
  margin-top: 0;
}

.rm-lock {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  max-width: 720px;
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--ice) 42%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--ice) 10%, var(--panel));
}

.rm-lock p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.4;
}

.rm-lock-go {
  border: 0;
  border-radius: 999px;
  background: var(--ice);
  color: #061018;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 12px;
  cursor: pointer;
}

.rm-lesson-kicker {
  margin: 0 0 4px;
  color: var(--ice);
  font-size: 12px;
  font-weight: 700;
}

.rm-error {
  color: var(--danger-text);
}

.rm-banner {
  margin: 0;
  padding: 10px 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
}

.rm-lesson-sticky {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel) 88%, var(--raise));
}

.rm-readbar {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  height: 52px;
  max-height: 52px;
  margin: 0 0 -52px;
  padding: 0 12px;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-100%);
  border: 0;
  background: color-mix(in srgb, var(--void) 90%, var(--panel));
}

.rm-readbar.is-on {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
  transform: none;
  border-bottom: 1px solid var(--line);
}

.rm-readbar .rm-back {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 4px 10px;
  font-size: 12px;
  white-space: nowrap;
}

.rm-readbar-title {
  flex: 1 1 0%;
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rm-readbar-pct {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.rm-lesson-sticky-meta {
  flex: 1 1 0%;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.rm-plate-kicker {
  color: var(--ice);
  background: var(--rm-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rm-plate-fase,
.rm-plate-module {
  min-width: 0;
  overflow-wrap: break-word;
}

.rm-plate-fase {
  margin-top: 2px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.rm-plate-module {
  color: var(--copy);
  font-size: 13px;
  font-weight: 600;
}

.rm-lesson-sticky-meta h1,
.rm-lesson-title-input {
  margin: 8px 0 0;
  min-width: 0;
  color: var(--text);
  font-size: clamp(22px, 2.8vw, 28px);
  letter-spacing: -0.04em;
  line-height: 1.2;
  font-weight: 700;
  overflow-wrap: break-word;
}

.rm-lesson-title-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0 0 6px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  font-family: inherit;
}

.rm-lesson-title-input:focus {
  outline: none;
  border-bottom-color: var(--ice);
}

.rm-lesson-admin {
  width: auto;
  margin-top: 14px;
}

.rm-lesson-editbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.rm-lesson-editbar .cta,
.rm-lesson-editbar .rm-ghost {
  width: auto;
  margin: 0;
  flex: 0 0 auto;
}

.rm-lesson-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.rm-lesson-field textarea {
  width: 100%;
  min-height: min(52vh, 560px);
  box-sizing: border-box;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--raise);
  color: var(--text);
  font: inherit;
  font-weight: 500;
  line-height: 1.55;
  resize: vertical;
}

.rm-lesson-preview {
  margin-top: 18px;
}

.rm-preview-label {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rm-overview-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
}
.rm-overview-link:hover,
.rm-overview-link:focus-visible {
  color: var(--text);
}
.rm-readbar .rm-overview-link {
  margin: 0;
  flex: 0 0 auto;
  font-size: 13px;
  white-space: nowrap;
}

.rm-back,
.rm-ghost {
  border: 1px solid var(--line);
  background: var(--raise);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 12px;
  min-height: 40px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease;
}

.rm-back {
  flex: 0 0 auto;
  width: auto;
  white-space: nowrap;
}

.rm-back:hover,
.rm-ghost:hover {
  border-color: color-mix(in srgb, var(--ice) 35%, var(--line));
}

.rm-back:focus-visible,
.rm-ghost:focus-visible,
.rm-copy:focus-visible,
.rm-next .cta:focus-visible,
.rm-complete:focus-visible {
  outline: 2px solid var(--ice);
  outline-offset: 1px;
}

.rm-lesson-layout {
  display: grid;
  grid-template-columns: minmax(0, 920px);
  justify-content: center;
  gap: 20px 32px;
  align-items: start;
  width: 100%;
}

.rm-lesson-layout.has-steps {
  grid-template-columns: minmax(0, 920px) 240px;
  justify-content: stretch;
  width: min(100%, 1192px);
  margin: 0 auto;
}

.rm-lesson-main {
  min-width: 0;
  max-width: 920px;
}

.rm-steps-aside {
  position: sticky;
  top: 12px;
  min-width: 0;
}

.rm-steps-nav {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
}

.rm-step-link {
  display: block;
  width: 100%;
  margin: 0;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}

.rm-step-link:hover,
.rm-step-link:focus-visible {
  color: var(--text);
  background: color-mix(in srgb, var(--ice) 8%, transparent);
}

.rm-step-link.is-current {
  color: var(--text);
  font-weight: 700;
  background: color-mix(in srgb, var(--ice) 14%, transparent);
}

.rm-steps-fold {
  display: none;
}

@container rm-lesson (max-width: 1000px) {
  .rm-lesson-layout,
  .rm-lesson-layout.has-steps {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }
  .rm-steps-aside { display: none; }
  .rm-steps-fold {
    display: block;
    margin: 12px 0 4px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--panel) 88%, var(--raise));
  }
  .rm-steps-fold summary {
    padding: 12px 14px;
    color: var(--text);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
  }
  .rm-steps-fold .rm-steps-nav { padding: 0 6px 8px; }
}

.rm-article {
  padding: 8px 0 8px;
}

.rm-lesson-progress {
  display: grid;
  gap: 2px;
  margin-top: 12px;
}

.rm-lesson-progress p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.rm-lesson-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
}

.rm-lesson-meta span + span::before {
  content: "·";
  margin-right: 12px;
  color: color-mix(in srgb, var(--muted) 70%, transparent);
}

.rm-lesson-sticky-meta .rm-track.is-module {
  width: 100%;
  max-width: 100%;
  margin-top: 10px;
}

.rm-md {
  margin-top: 4px;
  max-width: 920px;
  color: var(--copy);
  font-size: 16px;
  line-height: 1.7;
  overflow-wrap: anywhere;
  word-break: break-word;
  overflow-x: hidden;
}

.rm-md > * + * {
  margin-top: 10px;
}

.rm-step {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  min-width: 0;
  overflow-wrap: anywhere;
}

.rm-step + .rm-step {
  margin-top: 22px;
}

.rm-step-head {
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  min-width: 0;
}

.rm-step-label {
  display: block;
  color: var(--ice);
  background: var(--rm-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.rm-step-title,
.rm-md-step {
  margin: 0;
  color: var(--text);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.rm-step-body > * + * {
  margin-top: 8px;
}

.rm-md h1,
.rm-md h2,
.rm-md h3,
.rm-md h4 {
  color: var(--text);
  letter-spacing: -0.03em;
  line-height: 1.3;
  margin: 0;
  overflow-wrap: anywhere;
}

.rm-md h1 { font-size: 20px; }
.rm-md h2 { font-size: 18px; }
.rm-md h3,
.rm-md h4,
.rm-md-sub {
  font-size: 16px;
  font-weight: 650;
}

.rm-md p { margin: 0; }

.rm-md p.rm-md-action,
.rm-md p.rm-md-route {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--copy);
  font-weight: 400;
  overflow-wrap: anywhere;
}

.rm-md p.rm-md-note,
.rm-md-warn,
.rm-md-tip,
.rm-md-example,
.rm-md-checks {
  min-width: 0;
  padding: 2px 0 2px 12px;
  border: 0;
  border-left: 2px solid color-mix(in srgb, var(--ice) 55%, var(--line));
  border-radius: 0;
  background: transparent;
  color: var(--copy);
  overflow-wrap: anywhere;
}

.rm-md-prompt {
  min-width: 0;
  padding: 12px 12px 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--rm-inset);
  overflow-wrap: anywhere;
}

.rm-md-prompt {
  position: relative;
  padding-left: 18px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--rm-inset), var(--rm-inset)) padding-box,
    var(--rm-accent) border-box;
}

.rm-md-prompt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 2px;
  background: var(--rm-accent);
}

.rm-md-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  color: var(--ice);
  background: var(--rm-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.rm-md-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 1.5px;
  background: var(--rm-accent);
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: initial;
}

.rm-md-warn .rm-md-kicker::before {
  transform: rotate(45deg);
  border-radius: 1px;
}

.rm-md-prompt-kicker {
  color: var(--ice);
  background: var(--rm-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}

.rm-md-copybar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.rm-copy {
  border: 1px solid color-mix(in srgb, var(--ice) 40%, var(--violet));
  background: color-mix(in srgb, var(--ice) 10%, var(--raise));
  color: var(--text);
  border-radius: 8px;
  padding: 6px 10px;
  min-height: 32px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.rm-copy.is-copied {
  border-color: color-mix(in srgb, var(--testen) 45%, var(--line));
  color: var(--testen);
}

.rm-md-check {
  margin: 0;
  color: var(--text);
}

.rm-md-warn > * + *,
.rm-md-tip > * + *,
.rm-md-example > * + *,
.rm-md-checks > * + *,
.rm-md-prompt > * + * {
  margin-top: 8px;
}

.rm-md a {
  color: var(--ice);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.rm-md img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

.rm-md-gap {
  height: 0.2em;
}

.rm-md blockquote {
  margin: 0;
  padding: 10px 14px;
  border-left: 2px solid var(--line);
  background: transparent;
  border-radius: 0 12px 12px 0;
  overflow-wrap: anywhere;
}

.rm-md blockquote p {
  margin: 0;
}

.rm-md blockquote p + p {
  margin-top: 0.45em;
}

.rm-md table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.rm-md th,
.rm-md td {
  border: 1px solid var(--line);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.rm-md th {
  background: var(--raise);
  font-weight: 700;
}

.rm-md ul,
.rm-md ol {
  margin: 0;
  padding: 2px 4px 2px 1.35em;
}

.rm-md li + li { margin-top: 0.4em; }

.rm-md ul ul,
.rm-md ol ol,
.rm-md ul ol,
.rm-md ol ul {
  margin-top: 0.35em;
  padding: 0 0 0 1.2em;
}

.rm-md hr {
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  margin: 4px 0;
}

.rm-md pre {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--raise);
  overflow-x: auto;
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.55;
}

.rm-md pre code {
  background: none;
  padding: 0;
  overflow-wrap: anywhere;
}

.rm-md code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  background: var(--raise);
  border-radius: 6px;
  padding: 0.1em 0.35em;
  overflow-wrap: anywhere;
}

.rm-md strong { color: var(--text); font-weight: 700; }


.rm-lesson-footer {
  margin-top: 28px;
  padding: 0 0 8px;
}

.rm-lesson-footer-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 88%, var(--raise));
}

.rm-lesson-upnext {
  margin: 0;
  color: var(--copy);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.rm-lesson-footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.rm-lesson-footer-nav > :first-child {
  justify-self: start;
  min-height: 40px;
}

.rm-lesson-footer-nav .rm-ghost {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 8px 12px;
  font-size: 13px;
}

.rm-lesson-footer-nav .rm-complete {
  flex: 1 1 220px;
  justify-self: stretch;
  min-width: 0;
  min-height: 48px;
  padding: 12px 18px;
  font-size: 15px;
}

.rm-lesson-footer-nav > :last-child {
  justify-self: end;
  min-height: 40px;
}

.rm-undo {
  align-self: flex-start;
  min-height: 36px;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--muted);
}

.rm-lesson-coach {
  align-self: stretch;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--raise);
  color: var(--text);
  font-size: 15px;
  font-weight: 650;
  text-align: center;
}

.rm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.rm-complete {
  border: 1px solid color-mix(in srgb, var(--ice) 40%, var(--violet));
  background: color-mix(in srgb, var(--ice) 12%, var(--raise));
  color: var(--text);
  border-radius: 10px;
  padding: 11px 18px;
  min-height: 46px;
  min-width: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}

.rm-complete.is-done {
  border-color: var(--line);
  background: var(--raise);
  color: var(--muted);
}

.rm-complete:disabled,
.rm-ghost:disabled,
.rm-next .cta:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (max-width: 720px) {
  body[data-agent="roadmap"] .center {
    padding-left: 24px;
    padding-right: 24px;
  }
  body[data-agent="roadmap"] .center-head.center-head-roadmap {
    align-items: stretch;
    flex-direction: column;
    margin-bottom: 16px;
    gap: 12px;
    padding-left: 0;
    padding-right: 0;
  }
  body[data-agent="roadmap"] .center-head-roadmap > div:first-child {
    flex: 0 0 auto;
  }
  body[data-agent="roadmap"] .center-head-roadmap .center-head-actions {
    width: 100%;
  }
  body[data-agent="roadmap"] .center-head-roadmap #roadmapEditBtn {
    width: auto;
    max-width: 100%;
  }
  .rm-editor {
    justify-content: stretch;
  }
  .rm-editor-card {
    width: 100%;
    border-left: 0;
  }
  .rm-editor-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .rm-mini,
  .rm-editor-actions .cta,
  .rm-editor-actions .rm-ghost,
  .rm-editor-delete {
    min-height: 44px;
  }
  .rm-head-progress {
    align-items: stretch;
    text-align: left;
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
  }
  .rm-track.is-overall {
    width: 100%;
  }
  .rm-next {
    grid-template-columns: 1fr;
  }
  .rm-next-actions,
  .rm-next .cta {
    width: 100%;
  }
  .rm-next .rm-track.is-module {
    max-width: 100%;
  }
  .rm-module-toggle {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px 12px;
    padding: 16px;
  }
  .rm-module-copy .rm-track.is-module {
    max-width: 100%;
  }
  .rm-module-aside {
    grid-column: auto;
    justify-content: flex-end;
    flex-wrap: nowrap;
  }
  .rm-badge {
    min-width: 0;
  }
  .rm-lessons {
    margin: 0 12px 12px;
    padding: 2px;
  }
  .rm-lesson {
    min-height: 48px;
    padding: 10px 8px;
  }
  .rm-hits,
  .rm-lock,
  .rm-empty.is-search {
    max-width: none;
  }
  .rm-readbar {
    padding: 0 8px;
    gap: 8px;
  }
  .rm-lesson-sticky {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 12px;
    padding: 12px;
  }
  .rm-back {
    flex: 0 0 auto;
  }
  .rm-lesson-sticky-meta {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    text-align: left;
  }
  .rm-lesson-sticky-meta h1,
  .rm-lesson-title-input {
    font-size: 22px;
  }
  .rm-lesson-layout,
  .rm-lesson-layout.has-steps {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }
  .rm-steps-aside { display: none; }
  .rm-steps-fold {
    display: block;
    margin: 12px 0 4px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--panel) 88%, var(--raise));
  }
  .rm-steps-fold summary {
    padding: 12px 14px;
    color: var(--text);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
  }
  .rm-steps-fold .rm-steps-nav { padding: 0 6px 8px; }
  .rm-step { padding: 0; }
  .rm-lesson-footer-nav {
    display: flex;
    flex-direction: column;
  }
  .rm-lesson-footer-nav > :first-child,
  .rm-lesson-footer-nav > :last-child,
  .rm-lesson-footer-nav .rm-complete {
    width: 100%;
    justify-self: stretch;
  }
  .rm-lesson-coach {
    align-self: stretch;
    width: 100%;
  }
  body[data-agent="roadmap"] #roadmapCenter {
    padding-left: 0;
    padding-right: 0;
  }
  body[data-agent="roadmap"] #roadmapCenter.is-lesson {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }
}

.rm-status {
  margin-left: 8px;
  color: var(--muted);
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
}
.rm-module-desc {
  display: block;
  margin-top: 6px;
  color: var(--rm-quiet, var(--copy));
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.rm-edit-launch { margin: 0 0 12px; }
.rm-edit-launch .cta { width: auto; margin-top: 0; }
.rm-edit { display: grid; gap: 16px; }
.rm-edit-bar,
.rm-edit-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rm-edit-bar { justify-content: space-between; }
.rm-edit-bar h2,
.rm-edit-card h2,
.rm-edit-card h3 { margin: 0; }
.rm-edit .cta { width: auto; margin-top: 0; }
.rm-edit-card,
.rm-edit-step {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--rm-card, var(--panel));
}
.rm-edit label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.rm-edit input,
.rm-edit textarea,
.rm-edit select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--raise);
  color: inherit;
  font: inherit;
  font-weight: 500;
}
.rm-edit textarea { min-height: 96px; resize: vertical; }
.rm-edit-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

@media (max-width: 720px) {
  .rm-edit-row,
  .rm-edit-bar,
  .rm-edit-actions { display: grid; }
  .rm-edit .cta,
  .rm-edit .rm-ghost,
  .rm-edit-launch .cta { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .rm-track > span,
  .rm-chevron,
  .rm-lesson,
  .rm-module,
  .rm-module-toggle,
  .rm-search,
  .rm-next .cta,
  .rm-readbar {
    transition: none;
  }
}

body[data-agent="roadmap"] .center-head.center-head-roadmap {
  width: min(1120px, 100%);
  max-width: 1120px;
  margin-bottom: 10px;
  gap: 10px 16px;
}

body[data-agent="roadmap"] #roadmapCenter,
body[data-agent="roadmap"] #roadmapCenter.is-lesson {
  width: min(1120px, 100%);
  max-width: 1120px;
}

body[data-agent="roadmap"] #roadmapCenter:not(.is-lesson) {
  gap: 12px;
}

.rm-head-progress {
  max-width: 280px;
  padding: 8px 10px 10px;
}

.rm-module {
  width: 100%;
}

.rm-module.is-done {
  border-color: var(--line);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--testen) 55%, transparent);
}

.rm-module.is-current {
  border-color: color-mix(in srgb, var(--ice) 72%, var(--line));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ice) 42%, transparent);
}

.rm-module.is-done.is-current {
  border-color: color-mix(in srgb, var(--ice) 72%, var(--line));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ice) 42%, transparent);
}

.rm-next .cta {
  min-height: 48px;
  padding: 12px 22px;
  font-size: 16px;
  font-weight: 700;
}

.rm-edit-bar[data-rm-edit-bar] .cta,
.rm-lesson-editbar .cta,
.rm-edit-bar[data-rm-edit-bar] .rm-ghost,
.rm-lesson-editbar .rm-ghost {
  width: auto;
  flex: 0 0 auto;
}

.rm-edit-bar[data-rm-edit-bar],
.rm-lesson-editbar {
  position: static;
  z-index: 1;
  justify-content: flex-start;
  margin: 0 0 12px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 94%, var(--void));
}

.rm-edit-bar[data-rm-edit-bar] .cta,
.rm-edit-bar[data-rm-edit-bar] .rm-ghost {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 13px;
}

.rm-save-state {
  margin-left: auto;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.rm-save-state.is-dirty {
  color: color-mix(in srgb, var(--ice) 70%, var(--text));
}

.rm-grip {
  flex: 0 0 auto;
  align-self: center;
  width: 22px;
  min-height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background:
    radial-gradient(circle, var(--muted) 1.2px, transparent 1.4px) 4px 8px / 6px 6px,
    transparent;
  cursor: grab;
  opacity: 0;
}

.rm-lesson-row:hover .rm-grip,
.rm-module-head:hover .rm-grip,
.rm-grip:focus-visible,
#roadmapCenter.is-sorting .rm-grip {
  opacity: 1;
}

.rm-lesson-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.rm-more {
  position: relative;
  flex: 0 0 auto;
}

.rm-more-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 12;
  display: grid;
  min-width: 168px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.rm-more-menu[hidden] {
  display: none !important;
}

.rm-more-menu button {
  min-height: 36px;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}

.rm-more-menu button:hover,
.rm-more-menu button:focus-visible {
  background: color-mix(in srgb, var(--ice) 12%, transparent);
}

.rm-more-menu .is-danger {
  color: var(--danger-text);
}

.rm-grip:active { cursor: grabbing; }

.rm-lesson-row {
  flex-wrap: wrap;
  padding-right: 8px;
}

.rm-lessons .rm-editor-card {
  margin: 8px;
  padding: 12px 14px;
}

.rm-lessons .rm-editor-card h2 {
  font-size: 15px;
}

.rm-lesson-layout,
.rm-lesson-layout.has-steps,
.rm-lesson-layout.is-plain {
  display: block;
  width: min(100%, 44rem);
  max-width: 44rem;
  margin: 0 auto;
}

.rm-lesson-main,
.rm-article,
.rm-md {
  max-width: 44rem;
}

.rm-steps-aside,
.rm-steps-fold {
  display: none !important;
}

.rm-step + .rm-step {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
}

.rm-piece {
  margin: 16px 0;
  padding: 14px 16px 16px;
  border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 78%, var(--void));
}

.rm-kicker {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rm-piece.is-why .rm-kicker { color: var(--ice); }
.rm-piece.is-do .rm-kicker { color: var(--text); }
.rm-piece.is-links .rm-kicker { color: var(--violet, var(--ice)); }
.rm-piece.is-done .rm-kicker { color: var(--testen); }

.rm-visual {
  outline: none;
}

.rm-visual [contenteditable="true"],
h1[data-rm-lesson-title] {
  -webkit-touch-callout: none;
}

.rm-visual [contenteditable="true"]:focus,
h1[data-rm-lesson-title]:focus {
  outline: none;
  border-radius: 6px;
  background: color-mix(in srgb, var(--ice) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ice) 22%, transparent);
}

.rm-visual-tools {
  position: fixed;
  z-index: 30;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  width: 180px;
  max-width: calc(100vw - 16px);
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.rm-visual-tools[hidden] {
  display: none !important;
}

.rm-visual-tools button {
  width: 100%;
  min-height: 32px;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}

.rm-visual-tools button:hover,
.rm-visual-tools button:focus-visible {
  background: color-mix(in srgb, var(--ice) 14%, transparent);
}

.rm-link-pop input {
  min-height: 36px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--raise);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
}

.rm-link-pop {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.rm-link-pop[hidden] {
  display: none !important;
}

.rm-link-pop input {
  width: 100%;
  font-weight: 500;
}

@media (max-width: 720px) {
  body[data-agent="roadmap"] .center {
    padding-left: 12px;
    padding-right: 12px;
  }
  body[data-agent="roadmap"] #roadmapCenter,
  body[data-agent="roadmap"] .center-head.center-head-roadmap,
  .rm-module,
  .rm-lesson-layout,
  .rm-lesson-layout.is-plain,
  .rm-lesson-main,
  .rm-md {
    width: 100%;
    max-width: 100%;
  }
  .rm-edit-bar[data-rm-edit-bar],
  .rm-lesson-editbar {
    position: static;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .rm-save-state {
    margin-left: 0;
  }
  .rm-mini,
  .rm-grip,
  .rm-visual-tools button,
  .rm-edit-bar .cta,
  .rm-edit-bar .rm-ghost {
    min-height: 44px;
  }
  .rm-visual-tools {
    max-width: calc(100vw - 16px);
  }
  .rm-link-pop,
  .rm-link-pop input {
    width: 100%;
  }
}

.rm-home {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(220px, 320px);
  gap: 16px;
  align-items: end;
  width: 100%;
  min-width: 0;
}

.rm-home h2 {
  margin: 0;
  color: var(--text);
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.rm-home-next,
.rm-home-kicker,
.rm-home-count {
  margin: 8px 0 0;
}

.rm-home-next,
.rm-home-kicker {
  color: var(--muted);
  font-size: 14px;
}

.rm-home-count {
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
}

.rm-home .cta {
  width: 100%;
  min-height: 44px;
  margin-top: 12px;
  background: #54A8E8;
  color: #071018;
}

.rm-phases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.rm-phase-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  height: 100%;
  min-width: 0;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  color: var(--text);
  text-align: left;
  box-sizing: border-box;
}

button.rm-phase-card {
  font: inherit;
  cursor: pointer;
}

.rm-phase-card:focus-visible,
.rm-side-toggle:focus-visible,
.rm-side-lesson:focus-visible,
.rm-lessons-open:focus-visible {
  outline: 2px solid #54A8E8;
  outline-offset: 2px;
}

.rm-phase-top,
.rm-lesson-toolbar,
.rm-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.rm-phase-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: #54A8E8;
  background: rgba(84, 168, 232, 0.12);
}

.rm-phase-svg {
  width: 20px;
  height: 20px;
}

.rm-phase-status,
.rm-phase-kicker,
.rm-phase-count,
.rm-side-kicker,
.rm-side-count {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.rm-phase-card.is-active .rm-phase-status {
  color: #54A8E8;
}

.rm-phase-kicker,
.rm-phase-name,
.rm-phase-goal,
.rm-phase-count {
  display: block;
}

.rm-phase-name {
  color: var(--text);
  font-size: 18px;
  line-height: 1.25;
}

.rm-phase-goal {
  display: -webkit-box;
  min-height: 3.9em;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.rm-phase-card .rm-track.is-module,
.rm-side-toggle .rm-track.is-module,
.rm-lesson-sticky .rm-track.is-module {
  width: 100%;
  max-width: none;
  height: 6px;
}

.rm-phase-action {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: auto;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
}

.rm-phase-card.is-active .rm-phase-action {
  background: #54A8E8;
  color: #071018;
}

.rm-phase-card:not(.is-active) .rm-phase-action {
  visibility: hidden;
}

.rm-study {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  width: 100%;
  min-width: 0;
}

.rm-side {
  position: sticky;
  top: 0;
  width: 280px;
  max-height: calc(100dvh - 16px);
  overflow: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}

.rm-side-head p {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}

.rm-side-close,
.rm-lessons-open {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--raise);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.rm-side-phase + .rm-side-phase {
  margin-top: 4px;
}

.rm-side-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 4px 8px;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.rm-side-phase-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.rm-side-phase-copy strong,
.rm-side-lesson span:last-child {
  overflow-wrap: anywhere;
}

.rm-side-toggle .rm-track {
  grid-column: 1 / -1;
}

.rm-side-toggle::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
}

.rm-side-phase.is-open .rm-side-toggle::after {
  transform: rotate(-135deg);
}

.rm-side-phase:not(.is-open) .rm-side-lessons {
  display: none;
}

.rm-side-lessons {
  list-style: none;
  margin: 0;
  padding: 0 0 8px;
}

.rm-side-lesson {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.rm-side-lesson.is-current {
  background: rgba(84, 168, 232, 0.18);
  box-shadow: inset 2px 0 0 #54A8E8;
}

.rm-side-lesson.is-done .rm-side-mark {
  color: #54A8E8;
}

.rm-side-mark {
  display: inline-flex;
  flex: 0 0 18px;
  align-items: center;
  justify-content: center;
  width: 18px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.rm-side-mark svg {
  width: 14px;
  height: 14px;
}

.rm-lesson-toolbar {
  margin-bottom: 8px;
}

.rm-video {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 0 16px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  background: #000;
}

.rm-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.rm-md a {
  color: #54A8E8;
}

.rm-md-checks {
  margin: 16px 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid #54A8E8;
  border-radius: 12px;
  background: var(--panel);
}

.rm-lesson-done {
  margin: 0;
  color: #54A8E8;
  font-size: 14px;
  font-weight: 700;
}

@media (min-width: 761px) {
  .rm-lessons-open,
  .rm-side-close {
    display: none;
  }
}

@media (max-width: 760px) {
  .rm-home,
  .rm-phases,
  .rm-study {
    grid-template-columns: minmax(0, 1fr);
  }
  .rm-lessons-open {
    display: inline-flex;
    align-items: center;
  }
  .rm-side {
    position: fixed;
    inset: 0;
    z-index: 40;
    width: 100%;
    max-height: none;
    height: 100%;
    border-radius: 0;
    transform: translateX(-100%);
    visibility: hidden;
  }
  .rm-study.is-menu-open .rm-side {
    transform: none;
    visibility: visible;
  }
  .rm-lesson-footer-nav .rm-ghost,
  .rm-lesson-footer-nav .rm-complete,
  .rm-home .cta {
    width: 100%;
  }
}

.rm-student {
  width: 100%;
  min-width: 0;
}

.rm-back-overview {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

.rm-back-overview::before {
  content: "←";
  margin-right: 6px;
}

.rm-student .rm-search {
  margin: 0 0 12px;
}

.rm-student-title {
  margin: 6px 0 12px;
  color: var(--text);
  font-size: 28px;
  font-weight: 750;
  letter-spacing: -0.04em;
  line-height: 1.1;
  text-transform: uppercase;
}

.rm-board {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 250px;
  gap: 12px;
  align-items: start;
  width: 100%;
  min-width: 0;
}

.rm-board-phases,
.rm-board-next {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.rm-board-phases {
  max-height: calc(100dvh - 24px);
  overflow: auto;
  overscroll-behavior: contain;
}

.rm-board-phases-head,
.rm-phases-open,
.rm-phases-close {
  display: none;
}

.rm-board-phase,
.rm-board-lesson,
.rm-board-go,
.rm-phases-open,
.rm-phases-close {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.rm-board-phase,
.rm-board-progress,
.rm-board-stage,
.rm-board-upcoming {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}

.rm-board-phase {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 64px;
  padding: 10px;
  text-align: left;
}

.rm-board-phase.is-selected {
  border-color: #54A8E8;
  box-shadow: inset 0 0 0 1px #54A8E8;
}

.rm-board-phase-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: #54A8E8;
  background: rgba(84, 168, 232, 0.12);
}

.rm-board-phase-icon svg,
.rm-board-mark svg,
.rm-board-end svg,
.rm-board-play svg,
.rm-board-phase-meta svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rm-board-phase-copy,
.rm-board-lesson-title {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rm-board-phase-copy span,
.rm-board-time,
.rm-board-upcoming > p,
.rm-board-meta,
.rm-board-go small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.rm-board-phase-copy strong,
.rm-board-lesson-title,
.rm-board-upcoming h3 {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 14px;
  line-height: 1.25;
}

.rm-board-phase-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #54A8E8;
  font-size: 12px;
  font-weight: 700;
}

.rm-board-phase.is-locked .rm-board-phase-meta {
  color: var(--muted);
}

.rm-board-ring {
  width: 22px;
  height: 22px;
}

.rm-board-ring-track,
.rm-board-ring-value {
  fill: none;
  stroke-width: 2;
}

.rm-board-ring-track {
  stroke: rgba(84, 168, 232, 0.28);
}

.rm-board-ring-value {
  stroke: #54A8E8;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 10px 10px;
}

.rm-board-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.rm-board-progress,
.rm-board-stage,
.rm-board-upcoming {
  padding: 14px;
}

.rm-board-progress div:first-child,
.rm-board-phasehead,
.rm-board-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.rm-board-progress strong,
.rm-board-phasehead h3,
.rm-board-upcoming h3 {
  margin: 0;
  color: var(--text);
}

.rm-board-progress strong {
  font-size: 22px;
}

.rm-board-phasehead {
  align-items: flex-end;
  margin-bottom: 12px;
}

.rm-board-phasehead h3 {
  font-size: 18px;
}

.rm-board-phasehead p,
.rm-board-upcoming > p {
  margin: 4px 0 0;
}

.rm-board-lessons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rm-board-lesson {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto 22px;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 52px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  text-align: left;
}

.rm-board-lesson.is-done .rm-board-mark,
.rm-board-lesson.is-done .rm-board-end,
.rm-board-phase.is-done .rm-board-phase-meta {
  color: #54A8E8;
}

.rm-board-lesson.is-current {
  border-color: #54A8E8;
  background: rgba(84, 168, 232, 0.18);
}

.rm-board-lesson.is-current .rm-board-mark svg circle,
.rm-board-play svg circle,
.rm-board-lesson.is-current .rm-board-end svg circle {
  fill: #54A8E8;
  stroke: #54A8E8;
}

.rm-board-lesson.is-current .rm-board-mark svg path,
.rm-board-play svg path,
.rm-board-lesson.is-current .rm-board-end svg path {
  fill: #071018;
  stroke: none;
}

.rm-board-lesson.is-locked,
.rm-board-lesson:not(.is-current):not(.is-done) {
  color: var(--muted);
}

.rm-board-time {
  white-space: nowrap;
}

.rm-board-go {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  width: 100%;
  min-height: 72px;
  padding: 14px 36px 14px 16px;
  border: 0;
  border-radius: 14px;
  background: #54A8E8;
  color: #071018;
  font-weight: 750;
  text-align: left;
}

.rm-board-go span {
  font-size: 16px;
}

.rm-board-go small {
  color: #071018;
  opacity: 0.75;
}

.rm-board-go:not(.is-small)::after {
  content: "→";
  position: absolute;
  top: 16px;
  right: 14px;
  font-size: 18px;
}

.rm-board-go.is-small {
  align-items: center;
  min-height: 44px;
  margin-top: 12px;
  padding: 10px 14px;
  text-align: center;
}

.rm-board-go:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.rm-board-play {
  display: inline-flex;
  margin: 8px 0;
  color: #54A8E8;
}

.rm-board-play svg {
  width: 42px;
  height: 42px;
}

.rm-board-upcoming h3 {
  font-size: 18px;
}

.rm-board-meta {
  justify-content: flex-start;
  margin-top: 8px;
}

.rm-phases-open,
.rm-phases-close {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--raise);
  color: var(--text);
  font-weight: 700;
}

.rm-board-phase:focus-visible,
.rm-board-lesson:focus-visible,
.rm-board-go:focus-visible,
.rm-back-overview:focus-visible,
.rm-phases-open:focus-visible {
  outline: 2px solid #54A8E8;
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .rm-board {
    grid-template-columns: minmax(0, 1fr);
  }
  .rm-phases-open {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
  }
  .rm-board-phases-head,
  .rm-phases-close {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .rm-board-phases-head p {
    margin: 0;
    font-weight: 700;
  }
  .rm-board-phases {
    position: fixed;
    inset: 0;
    z-index: 40;
    max-height: none;
    padding: 16px;
    background: var(--void, #070811);
    transform: translateX(-100%);
    visibility: hidden;
  }
  .rm-board.is-phases-open .rm-board-phases {
    transform: none;
    visibility: visible;
  }
  .rm-board-next {
    position: static;
  }
}

@media (min-width: 901px) {
  body[data-agent="roadmap"] .center-head.center-head-roadmap {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto minmax(240px, 280px);
    align-items: center;
    width: 100%;
    max-width: none;
    margin: 0 0 8px;
    gap: 8px 16px;
  }

  body[data-agent="roadmap"] .center-head-roadmap > div:first-child {
    min-width: 0;
  }

  body[data-agent="roadmap"] .center-head-roadmap .subtitle {
    margin-top: 2px;
  }

  body[data-agent="roadmap"] .center-head-roadmap .center-head-actions {
    align-items: center;
  }

  body[data-agent="roadmap"] .rm-head-progress {
    width: 100%;
    max-width: none;
    margin: 0;
  }

  body[data-agent="roadmap"] #roadmapCenter,
  body[data-agent="roadmap"] #roadmapCenter.is-lesson {
    width: 100%;
    max-width: none;
  }

  body[data-agent="roadmap"] #roadmapCenter:not(.is-lesson) {
    gap: 8px;
  }

  .rm-back-overview {
    min-height: 22px;
  }

  .rm-student-title {
    margin: 0 0 8px;
    font-size: 22px;
  }

  .rm-student .rm-search {
    height: 36px;
    margin: 0 0 8px;
  }

  .rm-board {
    grid-template-columns: 300px minmax(0, 1fr) 300px;
    gap: 16px;
    align-items: start;
  }

  .rm-board-phases,
  .rm-board-next,
  .rm-board-main {
    gap: 8px;
  }

  .rm-board-phase {
    min-height: 0;
    padding: 7px 10px;
  }

  .rm-board-phase-copy strong,
  .rm-board-lesson-title {
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
  }

  .rm-board-lesson {
    min-height: 44px;
    padding: 4px 10px;
    align-items: center;
  }

  .rm-board-time,
  .rm-board-mark,
  .rm-board-end {
    align-self: center;
  }

  .rm-board-go {
    min-height: 56px;
    padding: 10px 32px 10px 14px;
  }
}


/* Lesson reading layout: one quiet column, with the catalogue available on demand. */
body[data-agent="roadmap"] #roadmapCenter.is-lesson {
  --rm-lesson-blue: #6690ff;
  --copy: #b9c7e3;
  --muted: #aab9d4;
  max-width: 1100px;
  margin-inline: auto;
}
.rm-study { grid-template-columns: minmax(0, 1fr); }
.rm-study .rm-side { display: none; }
.rm-study.is-menu-open .rm-side {
  display: block;
  position: fixed;
  inset: 64px 24px 24px auto;
  z-index: 40;
  width: min(360px, calc(100vw - 32px));
  height: auto;
  max-height: calc(100dvh - 88px);
  background: #0c1222;
  border: 1px solid #29344d;
  box-shadow: 0 20px 70px #0009;
  transform: none;
  visibility: visible;
}
.rm-study .rm-lessons-open, .rm-study .rm-side-close { display: inline-flex; align-items: center; }
.rm-lesson-toolbar { flex-direction: row-reverse; margin: 0 0 18px; }
.rm-lesson-sticky { padding: 0 0 22px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.rm-lesson-sticky-meta { position: relative; padding: 0; }
.rm-lesson-kicker { color: var(--rm-lesson-blue); font-size: 15px; }
.rm-lesson-sticky-meta h1 { margin: 4px 0 0; font-size: clamp(25px, 2.6vw, 36px); letter-spacing: -.025em; padding-right: 110px; }
.rm-lesson-admin { position: absolute; top: 0; right: 0; background: var(--rm-lesson-blue); color: #07101f; }
.rm-lesson-progress { margin-top: 10px; }
.rm-lesson-progress p { font-weight: 400; }
.rm-lesson-sticky-meta .rm-track.is-module { width: calc(100% - 58px); height: 9px; margin-top: 8px; background: #1b2439; }
.rm-lesson-sticky-meta .rm-track.is-module span { background: var(--rm-lesson-blue); }
.rm-lesson-percent { position: absolute; right: 0; bottom: -4px; color: var(--rm-lesson-blue); font-size: 15px; font-weight: 700; }
.rm-study .rm-article { padding-top: 10px; }
.rm-study .rm-md { max-width: none; font-size: 15px; line-height: 1.65; }
.rm-study .rm-md h2, .rm-study .rm-md h3 { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 18px; font-size: 20px; letter-spacing: -.015em; }
.rm-study .rm-md ol li::marker { color: var(--rm-lesson-blue); font-weight: 700; }
.rm-study .rm-md a { color: var(--rm-lesson-blue); }
.rm-lesson-footer { position: sticky; bottom: 0; z-index: 5; margin-top: 18px; padding-bottom: 8px; }
.rm-lesson-footer-inner { gap: 6px; padding: 10px 16px; background: #0d1323f5; border-radius: 12px; backdrop-filter: blur(16px); }
.rm-lesson-footer-nav { display: grid; grid-template-columns: 1fr 1.12fr 1fr 1.3fr; gap: 8px; }
.rm-lesson-footer-nav .rm-ghost, .rm-lesson-footer-nav .rm-complete { width: 100%; min-height: 36px; padding: 7px 10px; font-size: 12px; border-radius: 8px; }
.rm-lesson-footer-nav [data-rm-complete] { background: transparent; color: var(--text); border: 1px solid #2a3853; }
.rm-lesson-footer-nav [data-rm-finish] { background: var(--rm-lesson-blue); color: #07101f; border: 1px solid var(--rm-lesson-blue); }
.rm-lesson-coach { min-height: 34px; padding: 6px 10px; font-size: 12px; border-radius: 8px; background: transparent; }
.rm-lesson-footer-nav button:focus-visible, .rm-lesson-coach:focus-visible { outline: 2px solid var(--rm-lesson-blue); outline-offset: 3px; }
@media (max-width: 760px) {
  .rm-lesson-toolbar { gap: 12px; margin-bottom: 14px; }
  .rm-lesson-sticky-meta h1 { padding-right: 0; }
  .rm-lesson-admin { position: static; margin-top: 12px; }
  .rm-study .rm-md { font-size: 15px; }
  .rm-lesson-footer { position: static; }
  .rm-lesson-footer-nav { grid-template-columns: 1fr 1fr; }
  .rm-lesson-footer-nav .rm-ghost, .rm-lesson-footer-nav .rm-complete, .rm-lesson-coach { min-height: 44px; }
  .rm-study.is-menu-open .rm-side { inset: 12px; width: auto; max-height: calc(100dvh - 24px); }
}
.rm-study .rm-lesson-layout.is-plain,
.rm-study .rm-lesson-main,
.rm-study .rm-article { width: 100%; max-width: none; }
.rm-study .rm-step + .rm-step { margin-top: 16px; padding-top: 12px; }
.rm-study .rm-step-head .rm-step-title { border: 0; margin: 0; padding: 0; }


/* Calm roadmap overview, using the existing Office shell and typography. */
body[data-agent="roadmap"]:has(.rm-quiet) .center-head.center-head-roadmap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto 18px;
  gap: 16px;
}
body[data-agent="roadmap"]:has(.rm-quiet) .rm-head-progress { display: none; }
body[data-agent="roadmap"] #roadmapCenter:has(.rm-quiet) { max-width: 1100px; width: 100%; }
.rm-quiet { --rm-quiet-accent: #7793ff; display: flex; flex-direction: column; gap: 14px; }
.rm-quiet .rm-board-progress { padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.rm-quiet .rm-board-progress > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 600; }
.rm-quiet .rm-board-progress strong { font-size: 18px; }
.rm-quiet .rm-track.is-overall { height: 8px; width: 100%; margin-top: 10px; background: var(--raise); }
.rm-quiet .rm-track span { background: var(--rm-quiet-accent); }
.rm-quiet .rm-board-upcoming { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 20px; margin: 0; border: 1px solid color-mix(in srgb, var(--rm-quiet-accent) 35%, var(--line)); border-radius: 12px; background: var(--panel); }
.rm-quiet .rm-quiet-kicker { margin: 0 0 7px; color: var(--muted); font-size: 11px; font-weight: 650; letter-spacing: .045em; text-transform: uppercase; }
.rm-quiet .rm-board-upcoming h3 { margin: 0; color: var(--text); font-size: 20px; line-height: 1.3; }
.rm-quiet .rm-quiet-meta { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.rm-quiet .rm-board-go { flex: 0 0 auto; display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 24px; width: auto; min-width: 148px; min-height: 42px; padding: 10px 18px; border: 0; border-radius: 10px; background: linear-gradient(110deg, #6e9aff, #8580ff); color: #080d1c; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.rm-quiet .rm-board-go::after { content: none; }
.rm-quiet .rm-quiet-phases { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; }
.rm-quiet-phase { width: 100%; box-sizing: border-box; min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; }
.rm-quiet .rm-board-phase { display: grid; grid-template-columns: minmax(0, 1fr) auto 12px; gap: 16px; align-items: center; width: 100%; min-height: 50px; padding: 13px 18px; margin: 0; border: 0; border-radius: 0; background: transparent; color: var(--text); box-shadow: none; text-align: left; cursor: pointer; font: inherit; }
.rm-quiet .rm-board-phase.is-selected { border-bottom: 1px solid var(--line); }
.rm-quiet-phase-title { font-size: 15px; font-weight: 650; line-height: 1.35; }
.rm-quiet-count { color: var(--muted); font-size: 12px; font-weight: 400; white-space: nowrap; }
.rm-quiet-chevron { width: 7px; height: 7px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); }
.rm-quiet .is-selected .rm-quiet-chevron { transform: rotate(225deg); border-color: var(--rm-quiet-accent); }
.rm-quiet .rm-board-lessons { display: flex; flex-direction: column; gap: 2px; padding: 7px 12px 10px; margin: 0; list-style: none; }
.rm-quiet .rm-board-lesson { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 40px; padding: 9px 12px; border: 0; border-radius: 7px; background: transparent; color: var(--copy); text-align: left; cursor: pointer; box-shadow: none; }
.rm-quiet .rm-board-lesson-title { font-size: 14px; line-height: 1.4; font-weight: 400; }
.rm-quiet .rm-board-lesson.is-current { background: color-mix(in srgb, var(--rm-quiet-accent) 14%, var(--panel)); color: var(--text); box-shadow: inset 3px 0 var(--rm-quiet-accent); }
.rm-quiet .rm-board-lesson.is-locked { color: var(--muted); opacity: .8; }
.rm-quiet .rm-board-end { display: inline-flex; flex: 0 0 18px; color: var(--rm-quiet-accent); }
.rm-quiet .rm-board-end svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.rm-quiet .rm-board-phase:hover, .rm-quiet .rm-board-lesson:hover { background-color: color-mix(in srgb, var(--raise) 70%, transparent); }
.rm-quiet button:focus-visible { outline: 2px solid var(--rm-quiet-accent); outline-offset: -3px; }
.rm-quiet-search { margin: -2px 0; }
.rm-quiet-search summary { width: fit-content; margin-left: auto; padding: 4px 0; color: var(--muted); cursor: pointer; font-size: 12px; }
.rm-quiet-search .rm-search { margin: 8px 0 0; }
@media (max-width: 760px) {
  body[data-agent="roadmap"]:has(.rm-quiet) .center-head.center-head-roadmap { flex-wrap: wrap; gap: 10px; }
  .rm-quiet .rm-board-progress { padding: 12px; }
  .rm-quiet .rm-board-upcoming { flex-wrap: wrap; gap: 14px; padding: 16px; }
  .rm-quiet .rm-board-upcoming h3 { font-size: 18px; }
  .rm-quiet .rm-board-go { width: 100%; min-height: 44px; }
  .rm-quiet .rm-board-phase { padding: 12px; gap: 8px; grid-template-columns: minmax(0, 1fr) 12px; }
  .rm-quiet-phase-title { grid-column: 1; font-size: 14px; }
  .rm-quiet-count { grid-column: 1; grid-row: 2; }
  .rm-quiet-chevron { grid-column: 2; grid-row: 1 / 3; }
  .rm-quiet .rm-board-lessons { padding: 6px; }
  .rm-quiet .rm-board-lesson { min-height: 44px; padding: 10px; }
}

/* Lesson actions follow the text in the normal document flow. */
body[data-agent="roadmap"] #roadmapCenter.is-lesson { container-type: normal; }
body[data-agent="roadmap"] .rm-study .rm-lesson-footer {
  position: static;
  box-sizing: border-box;
  width: 100%;
  margin: 24px 0 0;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  background: var(--void, #03040a);
}

/* Compact lesson footer: context above, three aligned actions below. */
.rm-study .rm-lesson-footer-inner { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; border-radius: 12px 12px 0 0; }
.rm-footer-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; }
.rm-footer-meta .rm-lesson-upnext { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.rm-footer-status { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.rm-footer-status .rm-lesson-done { margin: 0; font-size: 12px; color: var(--muted); }
.rm-footer-status-action { border: 0; background: transparent; padding: 3px 0; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.rm-footer-status-action:hover { color: var(--text); }
.rm-study .rm-lesson-footer-nav { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr) minmax(200px, 1.4fr); gap: 10px; align-items: stretch; }
.rm-study .rm-lesson-footer-nav > button { width: 100%; margin: 0; min-height: 42px; font-size: 13px; }
.rm-study .rm-lesson-footer-nav .rm-footer-primary { background: var(--rm-lesson-blue); border-color: var(--rm-lesson-blue); color: #07101f; }
@media (max-width: 760px) {
  .rm-study .rm-lesson-footer-inner { padding: 10px 12px; gap: 8px; }
  .rm-footer-meta { align-items: flex-start; gap: 4px; flex-direction: column; }
  .rm-footer-meta .rm-lesson-upnext { max-width: 100%; font-size: 11px; }
  .rm-footer-status { width: 100%; justify-content: space-between; }
  .rm-study .rm-lesson-footer-nav { grid-template-columns: 1fr 1fr; gap: 8px; }
  .rm-study .rm-lesson-footer-nav > .rm-footer-primary { grid-column: 1 / -1; }
  .rm-study .rm-lesson-footer-nav > button { min-height: 42px; }
}


/* Editing uses the same calm column and phase rhythm as the student overview. */
body[data-agent="roadmap"] #roadmapCenter.is-editing { max-width: 1100px; width: 100%; margin-inline: auto; }
body:has(#roadmapCenter.is-editing) .center-head-roadmap { max-width: 1100px; width: 100%; margin-inline: auto; }
body:has(#roadmapCenter.is-editing) .rm-head-progress,
body:has(#roadmapCenter.is-editing) #roadmapEditBtn { display: none !important; }
.rm-editor-overview { display: flex; flex-direction: column; gap: 12px; width: 100%; min-width: 0; }
#roadmapCenter.is-editing .rm-edit-bar[data-rm-edit-bar] { display: flex; flex-wrap: wrap; position: sticky; top: 0; z-index: 30; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; margin: 0 0 16px; border: 1px solid var(--line); border-radius: 12px; background: #0d101cf5; backdrop-filter: blur(16px); box-sizing: border-box; }
.rm-edit-context { display: flex; flex-direction: column; gap: 4px; }
.rm-edit-context strong { font-size: 14px; }
.rm-edit-context .rm-save-state { margin: 0; font-size: 12px; font-weight: 400; }
.rm-edit-actions, .rm-edit-history { display: flex; align-items: center; gap: 8px; }
.rm-edit-history { padding-right: 10px; margin-right: 2px; border-right: 1px solid var(--line); }
.rm-edit-history .rm-ghost { min-width: 36px; font-size: 20px; padding: 4px 8px; }
#roadmapCenter .rm-edit-bar .cta, #roadmapCenter .rm-edit-bar .rm-ghost { margin: 0; min-height: 38px; border-radius: 9px; box-shadow: none; }
#roadmapCenter .rm-edit-bar .cta { background: #7793ff; color: #080d1c; }
.rm-editor-overview .rm-search { margin: 0; min-height: 42px; }
.rm-editor-overview .rm-section-row { margin: 0; }
.rm-editor-overview .rm-path { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; max-width: none; }
.rm-editor-overview .rm-module { padding: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: none; }
.rm-editor-overview .rm-module-head { align-items: center; padding: 0 10px; gap: 8px; }
.rm-editor-overview .rm-module-toggle { min-height: 60px; padding: 12px 4px; gap: 10px; }
.rm-editor-overview .rm-module-titleline strong { font-size: 15px; font-weight: 650; }
.rm-editor-overview .rm-module-copy { gap: 0; }
.rm-editor-overview .rm-module-desc,
.rm-editor-overview .rm-module-meta,
.rm-editor-overview .rm-track,
.rm-editor-overview .rm-badge,
.rm-editor-overview .rm-check { display: none; }
.rm-editor-overview .rm-index { color: var(--muted); font-size: 12px; min-width: 42px; }
.rm-editor-overview .rm-lessons { margin: 0; padding: 6px 10px 10px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
.rm-editor-overview .rm-lesson-row { flex-wrap: nowrap; padding: 0; border: 0; }
.rm-editor-overview .rm-lesson { min-height: 48px; padding: 10px 8px; border: 0; background: transparent; gap: 10px; }
.rm-editor-overview .rm-lesson:hover { background: #7793ff12; }
.rm-editor-overview .rm-lesson-copy strong { font-size: 14px; font-weight: 400; }
.rm-editor-overview .rm-num { padding: 0; background: none; color: var(--muted); font-weight: 400; }
.rm-editor-overview .rm-mini { margin: 0; border-radius: 8px; font-size: 12px; min-height: 34px; }
.rm-editor-overview .rm-grip { opacity: .5; }
.rm-editor-overview .rm-add-lesson { margin: 8px 0 0; font-size: 12px; }
.rm-editor-overview .rm-phase-edit { margin-right: 2px; }
#roadmapCenter.is-editing .rm-lesson-toolbar { margin-top: 12px; }
@media (max-width: 760px) {
  #roadmapCenter.is-editing .rm-edit-bar[data-rm-edit-bar] { padding: 10px; gap: 10px; }
  .rm-edit-actions { width: 100%; justify-content: flex-end; flex-wrap: wrap; }
  .rm-edit-history { margin-right: auto; }
  .rm-editor-overview .rm-module-head { gap: 4px; padding-inline: 6px; }
  .rm-editor-overview .rm-module-toggle { gap: 6px; }
  .rm-editor-overview .rm-module-titleline strong { font-size: 13px; }
  .rm-editor-overview .rm-lesson-tools { gap: 4px; }
  .rm-editor-overview .rm-lesson-tools .rm-grip { display: none; }
  .rm-editor-overview .rm-lesson { gap: 6px; padding-inline: 2px; }
  .rm-editor-overview .rm-lesson-copy strong { font-size: 13px; }
}
body:has(#roadmapCenter.is-editing) .center-head-roadmap { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
#roadmapCenter .rm-edit-bar .cta { border: 1px solid transparent; font: inherit; font-size: 13px; font-weight: 650; padding: 8px 14px; }

body:has(#roadmapCenter.is-editing) .center-head-roadmap.is-lesson { display: none !important; }


/* One continuous editable document, with no per-paragraph input boxes. */
.rm-visual[contenteditable="true"] { min-height: 180px; outline: none; border: 0; box-shadow: none; cursor: text; }
.rm-visual[contenteditable="true"]:focus { outline: none; background: transparent; box-shadow: none; }
.rm-visual[contenteditable="true"] [data-rm-block] { outline: none; box-shadow: none; }

/* No floating reading bar over the lesson content. */
.rm-study .rm-readbar { display: none; }
.rm-study .rm-lesson-sticky { position: static; }
.rm-study .rm-lesson-footer-inner { border-radius: 12px; }

/* Roadmap overview: one summary and a numbered learning route. */
.rm-quiet { gap: 28px; }
.rm-journey-summary { border: 1px solid color-mix(in srgb, var(--ice) 24%, var(--line)); border-radius: 20px; background: linear-gradient(120deg, color-mix(in srgb, var(--ice) 8%, var(--panel)), var(--panel) 70%); overflow: hidden; }
.rm-quiet .rm-journey-summary .rm-board-upcoming { padding: 28px 30px 22px; border: 0; border-radius: 0; background: transparent; }
.rm-quiet .rm-journey-summary .rm-board-upcoming h3 { font-size: clamp(21px, 2vw, 28px); letter-spacing: -.025em; }
.rm-quiet .rm-journey-summary .rm-board-progress { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 18px 30px 22px; background: transparent; }
.rm-quiet .rm-board-progress > div:first-child { font-size: 12px; font-weight: 400; color: var(--muted); }
.rm-quiet .rm-board-progress strong { font-size: 15px; color: var(--text); }
.rm-quiet .rm-track.is-overall { height: 4px; }
.rm-quiet .rm-track span { background: linear-gradient(90deg, var(--ice), #8b86ec); }
.rm-route-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.rm-route-heading h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.rm-route-heading p { margin: 5px 0 0; font-size: 13px; color: var(--muted); }
.rm-route-heading .rm-quiet-search { min-width: 110px; }
.rm-route-heading:has(details[open]) { flex-wrap: wrap; }
.rm-route-heading details[open] { width: 100%; }
.rm-quiet .rm-quiet-phases { gap: 12px; }
.rm-quiet-phase { border-radius: 14px; transition: border-color .15s ease; }
.rm-quiet-phase:hover, .rm-quiet-phase.is-open { border-color: color-mix(in srgb, var(--ice) 40%, var(--line)); }
.rm-quiet .rm-board-phase { grid-template-columns: 46px minmax(0,1fr) 100px 12px; padding: 18px 22px; gap: 18px; min-height: 86px; }
.rm-phase-number { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--raise); color: var(--muted); font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.rm-phase-copy { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rm-phase-label { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .09em; }
.rm-quiet-phase-title { font-size: 16px; font-weight: 550; }
.rm-quiet .rm-quiet-count { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; font-size: 11px; }
.rm-phase-meter { height: 3px; width: 70px; border-radius: 3px; overflow: hidden; background: var(--raise); }
.rm-phase-meter > span { display: block; height: 100%; background: var(--ice); opacity: .65; }
.rm-quiet .rm-board-phase.is-selected .rm-phase-number { color: var(--ice); border-color: var(--ice); background: color-mix(in srgb,var(--ice) 8%,var(--panel)); }
.rm-quiet .rm-board-lessons { padding: 10px 22px 16px 82px; }
.rm-quiet .rm-board-lesson { min-height: 46px; }
@media (max-width: 760px) {
 .rm-quiet { gap: 22px; }
 .rm-quiet .rm-journey-summary .rm-board-upcoming { padding: 22px 20px; }
 .rm-quiet .rm-journey-summary .rm-board-progress { padding: 16px 20px; }
 .rm-quiet .rm-board-phase { grid-template-columns: 36px minmax(0,1fr) 12px; gap: 12px; padding: 16px; }
 .rm-phase-number { width: 34px; height: 38px; border-radius: 9px; grid-column: 1; grid-row: 1 / 3; font-size: 13px; }
 .rm-phase-copy { grid-column: 2; grid-row: 1; }
 .rm-quiet-phase-title { font-size: 14px; }
 .rm-quiet .rm-quiet-count { grid-column: 2; grid-row: 2; align-items: flex-start; }
 .rm-phase-meter { display: none; }
 .rm-quiet-chevron { grid-column: 3; grid-row: 1 / 3; }
 .rm-quiet .rm-board-lessons { padding: 8px; }
}

/* A consistent route, from search to the individual lesson rows. */
.rm-route-heading .rm-route-search { width: min(360px, 100%); }
.rm-route-search .rm-search { margin: 0; min-height: 44px; border-radius: 12px; background: var(--panel); }
.rm-route-search .rm-search input { min-width: 0; font-size: 13px; }
.rm-route-results { min-width: 0; }
.rm-route-results .rm-section-row { margin: 0 0 14px; }
.rm-route-results .rm-hits { margin: 0; }
.rm-clear-search { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.rm-clear-search:hover { color: var(--text); border-color: var(--ice); }
.rm-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rm-quiet .rm-journey-summary { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(240px, 1fr); align-items: center; border-radius: 18px; }
.rm-quiet .rm-journey-summary .rm-board-upcoming { padding: 24px; }
.rm-quiet .rm-journey-summary .rm-board-progress { padding: 24px; border-top: 0; border-left: 1px solid var(--line); }
.rm-quiet .rm-journey-summary .rm-board-upcoming h3 { font-size: 23px; }
.rm-quiet .rm-quiet-phase { overflow: hidden; background: linear-gradient(120deg, #101421, var(--panel) 65%); }
.rm-quiet .rm-board-lessons { padding: 8px 20px 18px; gap: 6px; }
.rm-quiet .rm-board-lesson { display: grid; grid-template-columns: 36px minmax(0, 1fr) 22px; gap: 14px; min-height: 66px; padding: 12px 16px; border: 1px solid transparent; border-radius: 11px; transition: background .15s, border-color .15s; }
.rm-quiet .rm-board-lesson:hover { border-color: #6e8fff40; background: #728fff0c; }
.rm-lesson-index { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: #ffffff03; font-size: 12px; font-variant-numeric: tabular-nums; }
.rm-lesson-row-copy { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rm-quiet .rm-board-lesson-title { font-weight: 500; line-height: 1.4; }
.rm-lesson-row-meta { font-size: 11px; color: var(--muted); }
.rm-quiet .rm-board-lesson.is-done .rm-board-end { color: #8eafba; }
.rm-quiet .rm-board-lesson.is-current .rm-lesson-index { border-color: var(--ice); color: var(--ice); }
.rm-quiet .rm-board-end { justify-content: center; }
@media (max-width: 760px) {
  .rm-quiet .rm-journey-summary { grid-template-columns: 1fr; }
  .rm-quiet .rm-journey-summary .rm-board-progress { padding: 16px 20px; border-left: 0; border-top: 1px solid var(--line); }
  .rm-route-heading { align-items: stretch; flex-direction: column; gap: 16px; }
  .rm-route-heading .rm-route-search { width: 100%; }
  .rm-quiet .rm-board-lessons { padding: 6px 8px 12px; }
  .rm-quiet .rm-board-lesson { grid-template-columns: 30px minmax(0,1fr) 20px; padding: 10px; gap: 10px; }
  .rm-lesson-index { width: 30px; height: 32px; }
}


/* Lesson guidance uses the same restrained surfaces as the route overview. */
.rm-learning-goal { margin: 0 0 24px; padding: 22px 24px; border: 1px solid #6a8fff30; border-left: 3px solid #7b94fa; border-radius: 14px; background: linear-gradient(110deg,#758eff0c,transparent); }
.rm-learning-kicker { margin: 0 0 9px !important; color: var(--muted); font-size: 10px !important; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; }
.rm-learning-goal > p:not(.rm-learning-kicker) { margin: 0; color: var(--text); font-size: 17px; line-height: 1.5; }
.rm-tool-link { display: inline-flex; align-items: center; gap: 18px; margin-top: 16px; border: 1px solid #7e97ed40; border-radius: 9px; padding: 9px 13px; background: #7f98ed12; color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.rm-tool-link:hover { background: #7f98ed20; }
.rm-outline { margin: 0 0 26px; padding: 13px 0; border-block: 1px solid var(--line); }
.rm-outline summary, .rm-stuck summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.rm-outline .rm-steps-nav { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 12px; }
.rm-endcheck { margin: 30px 0 0; padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: #ffffff02; }
.rm-endcheck h2 { margin: 0 0 8px; font-size: 19px; letter-spacing: -.02em; }
.rm-endcheck > p:not(.rm-learning-kicker) { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 0 0 18px; }
.rm-endcheck-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; color: var(--copy); font-size: 14px; line-height: 1.6; cursor: pointer; }
.rm-endcheck-row + .rm-endcheck-row { border-top: 1px solid var(--line); }
.rm-endcheck-row input { margin: 5px 0 0; width: 16px; height: 16px; flex-shrink: 0; accent-color: #849aff; }
.rm-endcheck .rm-check-notice { color: #e5c08b !important; margin: 8px 0 0 !important; }
.rm-check-notice:empty { display: none; }
.rm-stuck { margin-top: 18px; border: 1px solid var(--line); padding: 16px 20px; border-radius: 12px; }
.rm-stuck[open] summary { margin-bottom: 16px; color: var(--text); }
.rm-stuck label { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; font-size: 12px; color: var(--muted); }
.rm-stuck select, .rm-stuck textarea { width: 100%; box-sizing: border-box; padding: 11px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 14px; }
.rm-stuck textarea { min-height: 90px; resize: vertical; }
.rm-updated-note { display: block; margin-top: 13px; color: #d1be90; font-size: 12px; line-height: 1.5; }
.rm-next-goal { margin: 8px 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
@media(max-width:760px) {
 .rm-learning-goal,.rm-endcheck { padding: 18px; }
 .rm-learning-goal > p:not(.rm-learning-kicker) { font-size: 16px; }
 .rm-tool-link { min-height: 42px; }
 .rm-stuck { padding: 16px; }
}