#roadmap-view {
  /* ── Design tokens ── */
  --rp-bg:       #F8F9FB;
  --rp-surface:  #FFFFFF;
  --rp-surface-2:#F3F5F8;
  --rp-border:   #E5E8EF;
  --rp-border-soft:#ECEEF3;
  --rp-accent:   #2563EB;
  --rp-accent-light:#EEF4FF;
  --rp-accent-mid:  #BFDBFE;
  --rp-text:     #0F172A;
  --rp-text-2:   #1E293B;
  --rp-muted:    #64748B;
  --rp-dim:      #94A3B8;
  --rp-success:  #059669;
  --rp-warn:     #D97706;
  --rp-danger:   #DC2626;
  --rp-panel-w:  270px;
  --rp-right-panel-w: 330px;
  --rp-radius:   10px;
  --rp-font:     "Inter","Segoe UI",system-ui,sans-serif;

  /* ── Typography scale ── */
  --fs-xs: 0.8rem;
  --fs-sm: 0.9rem;
  --fs-md: 1rem;
  --fs-lg: 1.2rem;
  --fs-xl: 1.5rem;

  display:none;
  position:fixed;
  top:calc(var(--header-height,90px) + var(--topbar-height,44px));
  left:0; right:0;
  bottom:calc(var(--footer-height,30px) + var(--footer-gap,10px));
  grid-template-columns:var(--rp-panel-w) 1fr var(--rp-right-panel-w);
  grid-template-rows:1fr;
  background:var(--rp-bg);
  z-index:10;
  overflow:hidden;
  font-family:var(--rp-font);
  color:var(--rp-text);
  font-size:var(--fs-sm);
  line-height:1.6;
}

#rp-left {
  background:var(--rp-surface);
  border-right:1px solid var(--rp-border);
  display:flex;
  flex-direction:column;
  overflow:hidden
}

#rp-left-header {
  padding:16px 16px 12px;
  border-bottom:1px solid var(--rp-border-soft);
  flex-shrink:0
}

#rp-left-header-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px
}

#rp-left-header-top h3 {
  font-size:0.9rem;
  font-weight:700;
  color:var(--rp-muted);
  letter-spacing:0.08em;
  text-transform:uppercase
}

#rp-overall-progress {
  flex-shrink:0
}

#rp-overall-label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:0.82rem;
  font-weight:600;
  color:var(--rp-muted);
  margin-bottom:5px
}

#rp-overall-pct {
  color:var(--rp-accent);
  font-weight:800
}

#rp-overall-track {
  height:5px;
  background:var(--rp-surface-2);
  border-radius:999px;
  overflow:hidden
}

#rp-overall-bar {
  height:100%;
  background:var(--rp-accent);
  border-radius:999px;
  width:0%;
  transition:width 0.4s ease
}

#rm-spa-filter-wrap {
  position:relative;
  margin-top:10px
}

#rm-spa-filter-btn {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:9px 12px;
  border:1px solid var(--rp-border);
  border-radius:10px;
  background:var(--rp-surface);
  color:var(--rp-text-2);
  font-size:0.88rem;
  font-weight:600;
  cursor:pointer;
  transition:border-color 0.15s;
  font-family:var(--rp-font)
}

#rm-spa-filter-btn:hover {
  border-color:var(--rp-accent-mid)
}

#rm-spa-filter-btn svg {
  flex-shrink:0;
  transition:transform 0.2s
}

#rm-spa-filter-wrap.open #rm-spa-filter-btn svg {
  transform:rotate(180deg)
}

#rm-spa-filter-dropdown {
  display:none;
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  right:0;
  background:var(--rp-surface);
  border:1px solid var(--rp-border);
  border-radius:10px;
  box-shadow:0 8px 24px rgba(15,23,42,0.10);
  z-index:40;
  overflow:hidden
}

#rm-spa-filter-wrap.open #rm-spa-filter-dropdown {
  display:block
}

.rm-filter-option {
  display:block;
  width:100%;
  padding:9px 14px;
  border:none;
  background:transparent;
  text-align:left;
  font-size:0.8rem;
  font-weight:600;
  color:var(--rp-text-2);
  cursor:pointer;
  font-family:var(--rp-font);
  transition:background 0.12s
}

.rm-filter-option:hover {
  background:var(--rp-surface-2)
}

.rm-filter-option.selected {
  color:var(--rp-accent);
  background:var(--rp-accent-light)
}

#rp-topic-scroll {
  flex:1;
  overflow-y:auto;
  padding:10px 10px 16px
}

.rm-topic-item {
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:10px 10px;
  border:none;
  border-radius:8px;
  background:transparent;
  text-align:left;
  cursor:pointer;
  transition:background 0.12s;
  border-left:2px solid transparent;
  font-family:var(--rp-font);
  margin-bottom:2px;
}

.rm-topic-item--beginner  { border-left-color:transparent; }
.rm-topic-item--intermediate { border-left-color:transparent; }
.rm-topic-item--advanced  { border-left-color:transparent; }

.rm-topic-item--beginner .rm-topic-num  { color:var(--rp-success); border-color:rgba(5,150,105,0.25); }
.rm-topic-item--intermediate .rm-topic-num { color:var(--rp-warn); border-color:rgba(217,119,6,0.25); }
.rm-topic-item--advanced .rm-topic-num  { color:var(--rp-danger); border-color:rgba(220,38,38,0.25); }

.rm-topic-item:hover { background:var(--rp-surface-2); }

.rm-topic-item.active {
  background:var(--rp-accent-light);
  border-left-color:var(--rp-accent);
}

.rm-topic-item.rm-topic-locked {
  opacity:0.45;
  cursor:not-allowed;
}

.rm-topic-num {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  min-width:28px;
  border-radius:7px;
  background:var(--rp-surface-2);
  color:var(--rp-muted);
  font-size:var(--fs-xs);
  font-weight:700;
  border:1px solid var(--rp-border);
}

.rm-topic-item.active .rm-topic-num {
  background:var(--rp-accent);
  color:#fff;
  border-color:var(--rp-accent);
}

.rm-topic-body {
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px
}

.rm-topic-name {
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--rp-text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.rm-topic-meta-row {
  display:flex;
  align-items:center;
  gap:6px;
}

.rm-topic-sub-count {
  font-size:var(--fs-xs);
  color:var(--rp-dim);
  font-weight:500;
}

.rm-topic-lock-icon {
  flex-shrink:0;
  color:var(--rp-dim);
  margin-left:auto
}

.rm-diff-pill {
  display:inline-flex;
  align-items:center;
  padding:1px 6px;
  border-radius:4px;
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:0.02em;
  text-transform:uppercase;
}

.rm-diff-pill--beginner    { background:#F0FDF4; color:#166534; }
.rm-diff-pill--intermediate { background:#FFFBEB; color:#92400E; }
.rm-diff-pill--advanced    { background:#FFF1F2; color:#9F1239; }

#rp-center {
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:var(--rp-bg)
}

#rp-center-scroll {
  flex:1;
  overflow-y:auto;
  padding:20px 24px 40px;
}

#roadmap-breadcrumb {
  display:none;
  align-items:center;
  gap:5px;
  font-size:var(--fs-xs);
  color:var(--rp-muted);
  font-weight:500;
  margin-bottom:14px;
}

#roadmap-breadcrumb svg { flex-shrink:0; }

#roadmap-breadcrumb-topic {
  color:var(--rp-accent);
  font-weight:600;
}

.rm-topic-header { margin-bottom:20px; }

.rm-topic-title {
  font-size:var(--fs-xl);
  font-weight:700;
  color:var(--rp-text);
  line-height:1.25;
  margin-bottom:6px;
  letter-spacing:-0.02em;
}

.rm-topic-description {
  font-size:var(--fs-md);
  color:var(--rp-muted);
  line-height:1.6;
  margin-bottom:10px;
}

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

.rm-meta-item {
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:var(--fs-xs);
  color:var(--rp-muted);
  font-weight:500;
}

.rm-level-section { margin-bottom:24px; }

.rm-level-header {
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
  padding-bottom:8px;
  border-bottom:1px solid var(--rp-border-soft);
}

.rm-level-label {
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
}

.rm-level-label--beginner    { color:var(--rp-success); }
.rm-level-label--intermediate { color:var(--rp-warn); }
.rm-level-label--advanced    { color:var(--rp-danger); }

.rm-level-count-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:1px 7px;
  border-radius:4px;
  font-size:var(--fs-xs);
  font-weight:600;
}

.rm-level-count-badge--beginner    { background:#F0FDF4; color:#166534; }
.rm-level-count-badge--intermediate { background:#FFFBEB; color:#92400E; }
.rm-level-count-badge--advanced    { background:#FFF1F2; color:#9F1239; }

/* ── Concept card — lightweight, divider-based ── */
.rm-concept-card {
  background:var(--rp-surface);
  border:1px solid var(--rp-border);
  border-radius:var(--rp-radius);
  margin-bottom:6px;
  overflow:hidden;
}

.rm-concept-card[open] { border-color:var(--rp-accent-mid); }

.rm-card-summary {
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 16px;
  cursor:pointer;
  list-style:none;
  user-select:none;
  background: var(--rp-surface);
  transition: background 0.12s;
}

.rm-card-summary::-webkit-details-marker { display:none; }

.rm-card-summary:hover { background: var(--rp-surface-2); }

.rm-concept-card[open] > .rm-card-summary {
  background: var(--rp-surface);
  border-bottom: 1px solid var(--rp-border-soft);
}

.rm-card-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  min-width:32px;
  border-radius:8px;
  font-size:1rem;
}

.rm-card-icon--beginner    { background:#F0FDF4; }
.rm-card-icon--intermediate { background:#FFFBEB; }
.rm-card-icon--advanced    { background:#FFF1F2; }

.rm-card-title-block {
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.rm-card-title {
  font-size:var(--fs-md);
  font-weight:600;
  color:var(--rp-text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.rm-card-subtitle {
  font-size:var(--fs-xs);
  color:var(--rp-muted);
  font-weight:500;
}

.rm-card-chevron {
  width:14px;
  height:14px;
  color:var(--rp-dim);
  flex-shrink:0;
  transition:transform 0.18s;
}

.rm-concept-card[open] .rm-card-chevron { transform:rotate(90deg); }

.rm-card-body {
  padding: 14px 18px 18px 18px;
  border-top: 1px solid var(--rp-border-soft);
}

.rm-card-divider {
  height:1px;
  background:var(--rp-border-soft);
  margin:10px 0;
}

.rm-section { padding-top:10px; }

.rm-section-title {
  display:flex;
  align-items:center;
  gap:5px;
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--rp-muted);
  letter-spacing:0.05em;
  text-transform:uppercase;
  margin-bottom:5px;
}

.rm-section-text {
  font-size:var(--fs-sm);
  color:var(--rp-text-2);
  line-height:1.65;
}

/* Tradeoff comparison — table instead of pills */
.rm-tradeoffs-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin-top:4px;
}

.rm-tradeoff-pill {
  padding:7px 10px;
  border-radius:6px;
  font-size:var(--fs-sm);
  font-weight:500;
  line-height:1.45;
  border:1px solid var(--rp-border);
  background:var(--rp-surface-2);
  color:var(--rp-text-2);
}

.rm-tradeoff-pill--a { border-left:2px solid var(--rp-accent); }
.rm-tradeoff-pill--b { border-left:2px solid var(--rp-muted); }

/* Checklist — clean list, no background blobs */
.rm-checklist {
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.rm-checklist li {
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:var(--fs-sm);
  color:var(--rp-text-2);
  line-height:1.55;
  padding:5px 0;
}

.rm-checklist li::before {
  content:"→";
  color:var(--rp-accent);
  font-weight:600;
  flex-shrink:0;
  margin-top:1px;
}

.rm-locked-level-banner {
  display:flex;
  align-items:center;
  gap:10px;
  background:#FEFCE8;
  border:1px solid #FDE68A;
  border-radius:8px;
  padding:10px 12px;
  font-size:var(--fs-sm);
  color:#78350F;
  margin-top:6px;
}

.rm-nav-btn {
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:8px 16px;
  border-radius:8px;
  border:1px solid var(--rp-border);
  background:var(--rp-surface);
  color:var(--rp-accent);
  font-size:var(--fs-sm);
  font-weight:600;
  cursor:pointer;
  transition:background 0.12s,border-color 0.12s;
  font-family:var(--rp-font);
}

.rm-nav-btn:hover {
  background:var(--rp-accent-light);
  border-color:var(--rp-accent-mid);
}

#rp-nav-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 24px;
  border-top:1px solid var(--rp-border);
  background:var(--rp-surface);
  flex-shrink:0;
}

#rp-nav-row .rm-nav-btn:disabled { opacity:0.3; cursor:not-allowed; }

#roadmap-empty-state {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:60px 24px;
  color:var(--rp-muted);
}

#roadmap-empty-state h4 {
  font-size:var(--fs-lg);
  font-weight:600;
  color:var(--rp-text-2);
  margin-bottom:8px;
}

#roadmap-empty-state p {
  font-size:var(--fs-sm);
  line-height:1.6;
  max-width:360px;
}

#rp-right {
  background:var(--rp-surface);
  border-left:1px solid var(--rp-border);
  display:flex;
  flex-direction:column;
  overflow:hidden
}

#rp-right-inner {
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:14px;
  overflow-y:auto;
  flex:1
}

.rp-card {
  background:linear-gradient(160deg,#f0f6ff 0%,#f8faff 60%,#ffffff 100%);
  border:1px solid var(--rp-accent-mid);
  border-radius:var(--rp-radius);
  overflow:hidden;
  box-shadow:0 1px 4px rgba(37,99,235,0.06)
}

.rp-card-head {
  padding:12px 14px 10px;
  border-bottom:1px solid var(--rp-accent-mid)
}

.rp-card-label {
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--rp-muted)
}

.rp-card-body {
  padding:12px 14px
}

#rp-xp-card {
  background:var(--rp-surface);
  border-color:var(--rp-accent-mid)
}

#rp-xp-card .rp-card-head {
  border-bottom-color:var(--rp-border-soft)
}

#rp-xp-card .rp-card-label {
  color:var(--rp-muted)
}

#rm-spa-xp-value {
  font-size:1.6rem;
  font-weight:800;
  color:var(--rp-accent);
  letter-spacing:-0.02em;
  line-height:1;
  margin-bottom:2px
}

#rp-xp-sublabel {
  font-size:var(--fs-xs);
  color:var(--rp-muted);
  font-weight:500;
  margin-bottom:10px
}

#rp-xp-level-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:var(--fs-xs);
  color:var(--rp-muted);
  font-weight:600;
  margin-bottom:5px
}

#rp-xp-track {
  height:5px;
  background:var(--rp-surface-2);
  border-radius:999px;
  overflow:hidden
}

#rm-spa-xp-bar {
  height:100%;
  background:var(--rp-accent);
  border-radius:999px;
  width:0%;
  transition:width 0.4s ease
}

#rm-spa-xp-sub {
  font-size:var(--fs-xs);
  color:var(--rp-muted);
  margin-top:5px;
  display:block
}

#rp-progress-card .rp-card-body {
  display:flex;
  align-items:center;
  gap:14px
}

#rp-ring-wrap {
  position:relative;
  width:80px;
  height:80px;
  flex-shrink:0
}

#rp-ring-svg {
  transform:rotate(-90deg);
  width:80px;
  height:80px
}

#rp-ring-track {
  fill:none;
  stroke:var(--rp-surface-2);
  stroke-width:6
}

#rm-spa-ring-fill {
  fill:none;
  stroke:var(--rp-accent);
  stroke-width:6;
  stroke-linecap:round;
  stroke-dasharray:220;
  stroke-dashoffset:220;
  transition:stroke-dashoffset 0.5s ease
}

#rp-ring-label {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center
}

#rm-spa-ring-text {
  font-size:var(--fs-md);
  font-weight:800;
  color:var(--rp-text);
  line-height:1
}

#rp-progress-stats {
  flex:1
}

#rp-progress-title {
  font-size:var(--fs-sm);
  font-weight:700;
  color:var(--rp-text);
  margin-bottom:3px
}

#rm-spa-ring-sublabel {
  font-size:var(--fs-xs);
  color:var(--rp-muted);
  font-weight:500
}

#rp-time-card .rp-card-body {
  display:flex;
  align-items:center;
  gap:10px
}

#rp-time-icon {
  width:32px;
  height:32px;
  min-width:32px;
  background:var(--rp-accent-light);
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--rp-accent)
}

#rp-time-value {
  font-size:var(--fs-lg);
  font-weight:700;
  color:var(--rp-text);
  line-height:1.1
}

#rp-time-sub {
  font-size:var(--fs-xs);
  color:var(--rp-muted);
  font-weight:500
}

#rm-spa-checklist-title {
  font-size:var(--fs-sm);
  font-weight:700;
  color:var(--rp-text)
}

#rm-spa-check-list {
  display:flex;
  flex-direction:column;
  gap:3px;
  margin-top:2px
}

.rm-check-item {
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  padding:6px 8px;
  border:none;
  border-radius:6px;
  background:transparent;
  cursor:pointer;
  text-align:left;
  font-family:var(--rp-font);
  font-size:var(--fs-sm);
  font-weight:500;
  color:var(--rp-text-2);
  transition:background 0.12s
}

.rm-check-item:hover {
  background:var(--rp-surface-2)
}

.rm-check-item.active {
  background:var(--rp-accent-light);
  color:var(--rp-accent)
}

.rm-check-box {
  width:16px;
  height:16px;
  min-width:16px;
  border-radius:5px;
  border:1.5px solid var(--rp-border);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--rp-surface);
  flex-shrink:0;
  transition:background 0.13s,border-color 0.13s
}

.rm-check-item.checked .rm-check-box {
  background:var(--rp-accent);
  border-color:var(--rp-accent)
}

.rm-inline-check {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:20px;
  height:20px;
  border:none;
  background:transparent;
  padding:0;
  cursor:pointer;
  border-radius:4px;
  z-index:2;
  position:relative
}

.rm-inline-check:hover .rm-check-box {
  border-color:var(--rp-accent);
  background:var(--rp-accent-light)
}

.rm-inline-check.checked .rm-check-box {
  background:var(--rp-accent);
  border-color:var(--rp-accent)
}

.rm-concept-card.rm-concept-card--done>summary .rm-card-title {
  text-decoration:line-through;
  color:var(--rp-dim)
}

.rm-concept-card.rm-concept-card--done {
  opacity:0.75
}

#rp-streak-card .rp-card-label {
  display:flex;
  align-items:center;
  gap:5px
}

#rm-spa-streak {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:4px;
  margin-top:10px
}

.rm-streak-day {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px
}

.rm-streak-dot {
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--rp-surface-2);
  border:1.5px solid var(--rp-border);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:var(--fs-xs);
  color:var(--rp-dim);
  font-weight:700;
  transition:background 0.15s,border-color 0.15s
}

.rm-streak-day.active .rm-streak-dot {
  border-color:var(--rp-accent-mid);
  background:var(--rp-accent-light);
  color:var(--rp-accent)
}

.rm-streak-day.done .rm-streak-dot {
  background:var(--rp-accent);
  border-color:var(--rp-accent);
  color:#fff
}

.rm-streak-day-label {
  font-size:var(--fs-xs);
  font-weight:600;
  color:var(--rp-dim);
  text-transform:uppercase
}

#rp-left-collapse,#rp-right-collapse {
  flex-shrink:0
}

#rp-right-header {
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px 10px;
  border-bottom:1px solid var(--rp-border-soft);
  flex-shrink:0;
  position:sticky;
  top:0;
  z-index:5;
  background:var(--rp-surface)
}

.rp-right-header-label {
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--rp-muted);
  letter-spacing:0.06em;
  text-transform:uppercase;
  flex:1;
  text-align:center
}

#roadmap-view.rp-left-collapsed {
  grid-template-columns:0 1fr var(--rp-right-panel-w)
}

#roadmap-view.rp-left-collapsed #rp-left {
  overflow:hidden;
  width:0;
  border-right:none
}

#roadmap-view.rp-right-collapsed {
  grid-template-columns:var(--rp-panel-w) 1fr 0
}

#roadmap-view.rp-right-collapsed #rp-right {
  overflow:hidden;
  width:0;
  border-left:none
}

.rp-floating-restore {
  position:fixed;
  top:50%;
  transform:translateY(-50%);
  z-index:20;
  width:28px;
  height:110px;
  border-radius:999px;
  border:1px solid #94a3b8;
  background:#cbd5e1;
  color:#0f172a;
  cursor:pointer;
  display:none;
  align-items:center;
  justify-content:center;
  font-size:1.5rem;
  font-weight:600;
  box-shadow:0 10px 18px rgba(15,23,42,0.12);
  transition:background 0.13s
}

.rp-floating-restore:hover {
  background:#b6c2d9;
  border-color:#64748b
}

.rp-floating-restore:not(.hidden) {
  display:flex
}

.rp-floating-restore--left {
  left:10px
}

.rp-floating-restore--right {
  right:10px
}

@media (max-width:900px) {
  #roadmap-view {
    grid-template-columns:0 1fr 0
  }
  #rp-left,#rp-right {
    display:none
  }

}

@media (max-width:1100px) {
  #roadmap-view {
    --rp-panel-w:240px
  }

}

/* -------------------------------------------------------------------------
   Blocks-v1 renderer styles (text / points / table / callout / case_study)
   ------------------------------------------------------------------------- */

.rm-blocks-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  color: var(--rp-text-2, #CBD5E1);
}

.rm-blocks-table thead tr {
  background: var(--rp-surface-2, #1E293B);
}

.rm-blocks-table th {
  padding: 7px 10px;
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rp-text-3, #94A3B8);
  border-bottom: 1px solid var(--rp-border, #334155);
  white-space: nowrap;
}

.rm-blocks-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--rp-border, #1E293B);
  vertical-align: top;
  line-height: 1.5;
}

.rm-blocks-table tbody tr:last-child td {
  border-bottom: none;
}

.rm-blocks-table tbody tr:hover {
  background: var(--rp-surface-2, #1E293B);
}

.rm-table-wrap {
  overflow-x: auto;
  margin-top: 8px;
  border-radius: 8px;
  border: 1px solid var(--rp-border, #334155);
}

.rm-callout {
  border-radius: 0 6px 6px 0;
  font-size: 0.82rem;
  line-height: 1.6;
}

.rm-case-study-card {
  border-radius: 8px;
  margin-top: 8px;
  font-size: 0.82rem;
  line-height: 1.6;
}

.rm-case-study-card strong {
  color: #F1F5F9;
}

.rm-case-study-card em {
  color: #93C5FD;
  font-style: italic;
}

.rm-blocks-table strong {
  color: var(--rp-text-1, #F1F5F9);
}

.rm-blocks-table em {
  color: #93C5FD;
  font-style: italic;
}

.rm-checklist li strong {
  color: var(--rp-text-1, #F1F5F9);
}

.rm-checklist li em {
  color: #93C5FD;
  font-style: italic;
}

/* =====================================================================
   BLOCKS-V2 — Clean, minimal renderer styles — LIGHT THEME
   Philosophy: whitespace over borders, type over decoration.
   Title: 0.85rem  |  Body text: 0.75rem  |  Color: #000000
   ===================================================================== */

/* ── Typography utilities ────────────────────────────────────────────── */
.rm-text-sm  { font-size: var(--fs-sm); line-height: 1.65; color: #000000; }
.rm-text-xs  { font-size: var(--fs-xs); line-height: 1.6;  color: #000000; }
.rm-w-medium { font-weight: 500; }
.rm-w-bold   { font-weight: 600; }

/* ── SVG icon baseline ───────────────────────────────────────────────── */
.rm-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: #6B7280;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

.rm-icon--chevron {
  transition: transform 0.18s ease;
  color: #9CA3AF;
}

details[open] > summary .rm-icon--chevron {
  transform: rotate(90deg);
}

/* ── Spacing primitives ──────────────────────────────────────────────── */
.rm-gap {
  height: 15px;
}

/* ── Section ─────────────────────────────────────────────────────────── */
.rm-section {
  padding: 0;
}

.rm-section-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6B7280;
  margin: 0 0 7px 0;
}

.rm-section-text {
  font-size: var(--fs-sm);
  color: #000000;
  margin: 0;
}

/* ── List ─────────────────────────────────────────────────────────────── */
.rm-list {
  margin: 0;
  padding: 0 0 0 16px;
  list-style: disc;
  color: #000000;
  font-size: var(--fs-sm);
}

.rm-list li {
  margin-bottom: 7px;
  padding-left: 2px;
}

.rm-list li:last-child { margin-bottom: 0; }

.rm-list li strong { color: #000000; font-weight: 600; }
.rm-list li em     { color: #1D4ED8; font-style: italic; }

/* ── Quick scan ───────────────────────────────────────────────────────── */
.rm-quick-scan {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-left: 2px;
}

.rm-qs-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #000000;
  font-size: var(--fs-sm);
  padding: 5px 10px;
}

.rm-qs-row .rm-icon {
  flex-shrink: 0;
  margin-top: 0;
  color: #6B7280;
}

.rm-qs-row strong { color: #000000; font-weight: 600; }

/* ── Definition card (replaces heavy card) ────────────────────────────── */
.rm-def-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px 12px 16px;
  border-left: 2px solid #3B82F6;
  background: #EFF6FF;
  border-radius: 0 6px 6px 0;
  margin: 4px 0;
}

.rm-def-card__icon {
  flex-shrink: 0;
  margin-top: 1px;
  color: #3B82F6;
}

.rm-def-card__icon .rm-icon { color: #3B82F6; }

.rm-def-card__text {
  font-size: var(--fs-sm);
  color: #000000;
  margin: 0;
}

.rm-def-card__text strong { color: #000000; font-weight: 600; }
.rm-def-card__text em     { color: #1D4ED8; font-style: italic; }

/* ── Alert (left-border only, no colored background) ─────────────────── */
.rm-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 0 10px 14px;
  background: transparent;
}

.rm-alert--warning {
  border-left: 2px solid #D97706;
}

.rm-alert--warning span { color: #000000; font-size: 0.75rem; }
.rm-alert--warning .rm-icon { color: #D97706; }
.rm-alert--warning strong { color: #000000; font-weight: 600; }

.rm-alert--info {
  border-left: 2px solid #3B82F6;
}

.rm-alert--info span { color: #000000; font-size: 0.75rem; }
.rm-alert--info .rm-icon { color: #3B82F6; }

.rm-alert--success {
  border-left: 2px solid #16A34A;
}
.rm-alert--success span { color: #000000; font-size: 0.75rem; }
.rm-alert--success .rm-icon { color: #16A34A; }

.rm-alert--danger {
  border-left: 2px solid #DC2626;
}
.rm-alert--danger span { color: #000000; font-size: 0.75rem; }
.rm-alert--danger .rm-icon { color: #DC2626; }

/* ── Story (collapsible real-world flow) ─────────────────────────────── */
.rm-story {
  border-top: 1px solid #E5E7EB;
  margin-top: 4px;
}

.rm-story__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.rm-story__header::-webkit-details-marker { display: none; }

.rm-story__company {
  font-size: 0.85rem;
  color: #000000;
  font-weight: 500;
}

.rm-story__badge {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1D4ED8;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-radius: 3px;
  padding: 1px 5px;
}

.rm-story__header .rm-icon--chevron { margin-left: auto; }

.rm-story__body {
  padding: 4px 0 10px 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rm-story-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.8rem;
  color: #000000;
}

.rm-story-idx {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  border: 1px solid #D1D5DB;
  border-radius: 50%;
  font-size: 0.62rem;
  font-weight: 600;
  color: #6B7280;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.rm-story-step strong { color: #000000; font-weight: 600; }

.rm-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.74rem;
  color: #3B82F6;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  margin-top: 4px;
}

.rm-link-btn:hover { color: #60A5FA; }
.rm-link-btn .rm-icon { color: currentColor; }

/* ── Expand / Accordion ──────────────────────────────────────────────── */
.rm-expand {
  border-top: 1px solid #E5E7EB;
  margin-top: 6px;
}

.rm-expand__trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #1D4ED8;
  background: #EFF6FF;
  border-radius: 6px;
  border: 1px solid #BFDBFE;
  list-style: none;
  user-select: none;
  margin-top: 6px;
  transition: background 0.12s, border-color 0.12s;
}

.rm-expand__trigger:hover {
  background: #DBEAFE;
  border-color: #93C5FD;
}

.rm-expand__trigger::-webkit-details-marker { display: none; }
.rm-expand[open] > .rm-expand__trigger {
  color: #1E40AF;
  background: #DBEAFE;
  border-color: #93C5FD;
  border-radius: 6px 6px 0 0;
}
.rm-expand__trigger .rm-icon--chevron { margin-left: auto; color: #3B82F6; }

.rm-expand__body {
  padding: 10px 14px 12px 14px;
  border: 1px solid #BFDBFE;
  border-top: none;
  border-radius: 0 0 6px 6px;
  background: #FAFCFF;
}

.rm-expand__body--rows {
  padding: 4px 14px 8px 14px;
}

.rm-acc-bullet-list {
  margin: 0;
  padding: 0 0 0 18px;
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rm-acc-bullet {
  font-size: var(--fs-sm);
  color: #374151;
  line-height: 1.65;
  padding-left: 2px;
}

/* Nested accordion rows — flat (no collapse per item) */
.rm-acc-row {
  border-top: 1px solid #F3F4F6;
}

.rm-acc-row:first-child { border-top: none; }

.rm-acc-row__q {
  display: flex;
  align-items: center;
  padding: 10px 4px 4px 4px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #000000;
  gap: 8px;
}

.rm-acc-row__a {
  padding: 2px 4px 12px 4px;
  font-size: var(--fs-sm);
  color: #000000;
  line-height: 1.7;
}

.rm-acc-row__a strong { color: #000000; font-weight: 600; }

/* ── Tabs ────────────────────────────────────────────────────────────── */
.rm-tabs {
  margin-top: 4px;
  border-top: 1px solid #E5E7EB;
}

.rm-tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #E5E7EB;
  overflow-x: auto;
}

.rm-tab-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 7px 12px 7px 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: #374151;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 0.12s;
  white-space: nowrap;
}

.rm-tab-btn:hover { color: #000000; }

.rm-tab-btn.active {
  color: #1D4ED8;
  border-bottom-color: #3B82F6;
}

.rm-tab-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.rm-tab-panels { padding: 0; }

.rm-tab-panel { display: none; padding: 10px 0 4px; }
.rm-tab-panel.active { display: block; }

/* ── Table ───────────────────────────────────────────────────────────── */
.rm-table-wrap {
  overflow-x: auto;
  margin-top: 8px;
}

.rm-table {
  width: 100%;
  border-collapse: collapse;
}

.rm-table th {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
  background: #1D4ED8;
  text-align: center;
  padding: 8px 12px;
  border-bottom: none;
  white-space: nowrap;
}

.rm-table td {
  font-size: var(--fs-sm);
  color: #000000;
  padding: 8px 12px;
  border-bottom: 1px solid #F3F4F6;
  vertical-align: top;
  line-height: 1.6;
  text-align: center;
}

.rm-table tr:last-child td { border-bottom: none; }
.rm-table td strong { color: #000000; font-weight: 600; }
.rm-table tbody tr:nth-child(even) { background: #F9FAFB; }
.rm-table tbody tr:hover { background: #EFF6FF; }


.rm-qs-item {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: #000000;
}

.rm-qs-item strong {
  color: #1D4ED8;
  font-weight: 700;
}

/* ── card ───────────────────────────────────────────────────────────── */
.rm-block-card {
  border-radius: 6px;
  padding: 12px 14px;
  margin: 6px 0;
  border: 1px solid #E5E7EB;
  background: #FFFFFF;
}

.rm-block-card--high {
  background: #EFF6FF;
  border-color: #BFDBFE;
}

.rm-block-card--medium {
  background: #F9FAFB;
  border-color: #E5E7EB;
}

.rm-block-card--low {
  background: #FFFFFF;
  border-color: #F3F4F6;
}

.rm-block-card__label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1D4ED8;
  margin-bottom: 6px;
}

.rm-block-card__body {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: #000000;
}

.rm-block-card__body strong { color: #000000; font-weight: 600; }
.rm-block-card__body em    { color: #1D4ED8; font-style: italic; }

/* ── alert (boxed) ──────────────────────────────────────────────────── */
.rm-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: var(--fs-md);
  line-height: 1.6;
  margin: 6px 0;
  background: transparent;
}

.rm-alert .rm-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.rm-alert--warning {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  color: #92400E;
}

.rm-alert--info {
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  color: #1E40AF;
}

.rm-alert--success {
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  color: #166534;
}

.rm-alert--danger {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #991B1B;
}

.rm-alert strong { color: inherit; font-weight: 700; }

/* ── story ──────────────────────────────────────────────────────────── */
.rm-story-wrap {
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  margin: 6px 0;
  overflow: hidden;
}

.rm-story-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  cursor: pointer;
  background: #F0F7FF;
  border-bottom: 1px solid #E5E7EB;
  list-style: none;
  user-select: none;
  transition: background 0.12s;
}

.rm-story-header:hover { background: #DBEAFE; }

.rm-story-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #000000;
  letter-spacing: 0.02em;
}

.rm-story-body {
  padding: 12px 14px;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rm-story-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: #000000;
}

.rm-story-num {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #1D4ED8;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.rm-story-step strong { color: #000000; font-weight: 600; }

.rm-story-cta {
  margin-top: 6px;
  align-self: flex-start;
  font-size: 0.75rem !important;
  padding: 6px 12px !important;
}

/* ── accordion ──────────────────────────────────────────────────────── */
.rm-accordion-wrap {
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  margin: 6px 0;
  overflow: hidden;
}

.rm-accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  cursor: pointer;
  background: #F0F7FF;
  border-bottom: 1px solid #BFDBFE;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #1D4ED8;
  list-style: none;
  user-select: none;
  transition: background 0.12s;
}

.rm-accordion-trigger:hover { background: #DBEAFE; }
.rm-accordion-trigger::-webkit-details-marker { display: none; }

.rm-accordion-panel {
  padding: 10px 14px;
  background: #FFFFFF;
}

.rm-acc-item {
  border-bottom: 1px solid #F3F4F6;
  margin: 0;
}

.rm-acc-item:last-child { border-bottom: none; }

.rm-acc-item-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  cursor: pointer;
  font-size: var(--fs-sm);
  color: #374151;
  list-style: none;
  user-select: none;
}

.rm-acc-item-trigger::-webkit-details-marker { display: none; }
.rm-acc-item[open] .rm-acc-item-trigger { color: #000000; }

.rm-acc-item-body {
  padding: 0 0 10px 8px;
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: #000000;
}

.rm-acc-item-body strong { color: #000000; font-weight: 600; }

.rm-acc-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
  color: #9CA3AF;
}

details[open] > summary .rm-acc-chevron,
.rm-accordion-wrap[open] > .rm-accordion-trigger .rm-acc-chevron {
  transform: rotate(90deg);
}

/* ── tabs (boxed) ───────────────────────────────────────────────────── */
.rm-tabs-wrap {
  margin: 6px 0;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  overflow: hidden;
}

.rm-tab-bar {
  display: flex;
  background: #F9FAFB;
  border-bottom: 1px solid #E5E7EB;
  gap: 0;
  overflow-x: auto;
}

.rm-tab-btn {
  flex-shrink: 0;
  padding: 8px 14px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: #6B7280;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.rm-tab-btn:hover { color: #000000; }

.rm-tab-btn.active {
  color: #1D4ED8;
  border-bottom-color: #3B82F6;
}

.rm-tab-panels {
  background: #FFFFFF;
}

.rm-tab-panel {
  display: none;
  padding: 14px 14px;
}

.rm-tab-panel.active { display: block; }

/* ── table (enhanced) ───────────────────────────────────────────────── */
.rm-table-wrap {
  overflow-x: auto;
  margin-top: 8px;
  border-radius: 6px;
}

.rm-blocks-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.rm-blocks-table th {
  background: #1D4ED8;
  color: #ffffff;
  font-weight: 600;
  text-align: center;
  padding: 8px 12px;
  border-bottom: none;
  white-space: nowrap;
}

.rm-blocks-table td {
  padding: 8px 12px;
  color: #000000;
  border-bottom: 1px solid #F3F4F6;
  vertical-align: top;
  line-height: 1.6;
  text-align: center;
}

.rm-blocks-table tr:last-child td { border-bottom: none; }
.rm-blocks-table tr:hover td      { background: #F9FAFB; }