.roadmap {
  --roadmap-border: #dedfd8;
  --roadmap-surface: #fff;
  --roadmap-soft: #f5f6f0;
  --roadmap-muted: #5b6156;
  --roadmap-accent: #344c2a;
}

.roadmap [hidden] { display: none !important; }
.roadmap .roadmap-attribution { max-width: 65ch; color: var(--roadmap-muted); font-size: .9rem; }
.roadmap .roadmap-totals { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; font-weight: 700; }
.roadmap .roadmap-totals span { color: #a3aa9a; }
.roadmap .roadmap-library { padding-top: 0; }
.roadmap .roadmap-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.1rem 1.3rem;
  margin-bottom: 2.5rem;
  padding: clamp(1.2rem, 3vw, 2rem);
  border: 1px solid var(--roadmap-border);
  border-radius: 1.2rem;
  background: var(--roadmap-soft);
}
.roadmap .roadmap-search-field,
.roadmap .roadmap-control-actions,
.roadmap .roadmap-filter-count { grid-column: 1 / -1; }
.roadmap .roadmap-controls label { display: block; margin-bottom: .5rem; font-size: .9rem; font-weight: 700; }
.roadmap .roadmap-controls input,
.roadmap .roadmap-controls select {
  width: 100%;
  min-width: 0;
  min-height: 3rem;
  padding: .8rem;
  border: 1px solid #a6ad9e;
  border-radius: .5rem;
  background: #fff;
  color: #20271d;
  font: inherit;
}
.roadmap .roadmap-controls input:focus-visible,
.roadmap .roadmap-controls select:focus-visible,
.roadmap summary:focus-visible,
.roadmap a:focus-visible,
.roadmap button:focus-visible { outline: 3px solid #729c5b; outline-offset: 3px; }
.roadmap .roadmap-control-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1rem; }
.roadmap .roadmap-control-actions .button { cursor: pointer; }
.roadmap .roadmap-control-actions .text-link { padding: .7rem .25rem; border: 0; background: transparent; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
.roadmap .roadmap-filter-count { margin: 0; color: var(--roadmap-muted); font-size: .9rem; }
.roadmap .roadmap-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); align-items: start; gap: 2.5rem; }
.roadmap .roadmap-sidebar { position: sticky; top: 6.5rem; max-height: calc(100vh - 8rem); overflow-y: auto; padding: .25rem .9rem .25rem .25rem; }
.roadmap .roadmap-sidebar-group { border-top: 1px solid var(--roadmap-border); }
.roadmap .roadmap-sidebar-group summary { padding: .9rem .1rem; font-size: .9rem; font-weight: 700; cursor: pointer; }
.roadmap .roadmap-sidebar-group ul { display: grid; gap: .25rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.roadmap .roadmap-sidebar-group a { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; padding: .5rem .65rem; border-radius: .4rem; color: #3a4433; font-size: .85rem; line-height: 1.5; text-decoration: none; }
.roadmap .roadmap-sidebar-group a:hover,
.roadmap .roadmap-sidebar-group a[aria-current="location"] { background: #eaf0e3; color: #24361b; }
.roadmap .roadmap-sidebar-group small { flex-shrink: 0; color: var(--roadmap-muted); }
.roadmap .roadmap-content { min-width: 0; }
.roadmap .roadmap-section { margin: 0 0 1.5rem; overflow: clip; border: 1px solid var(--roadmap-border); border-radius: 1rem; background: var(--roadmap-surface); scroll-margin-top: 7rem; }
.roadmap .roadmap-section-summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.3rem; list-style: none; cursor: pointer; }
.roadmap .roadmap-section-summary h2 { flex: 1; margin: 0; font-size: clamp(1.2rem, 2vw, 1.6rem); line-height: 1.35; }
.roadmap .roadmap-section-meta { flex-shrink: 0; color: var(--roadmap-muted); font-size: .75rem; }
.roadmap .roadmap-section-summary::after,
.roadmap .topic-summary::after { content: "+"; flex-shrink: 0; width: 1.4rem; color: var(--roadmap-accent); font-size: 1.4rem; font-weight: 400; text-align: center; }
.roadmap .roadmap-section[open] > .roadmap-section-summary::after,
.roadmap .topic-card[open] > .topic-summary::after { content: "−"; }
.roadmap .roadmap-section-summary::-webkit-details-marker,
.roadmap .topic-summary::-webkit-details-marker { display: none; }
.roadmap .roadmap-section-body { padding: 0 1.3rem 1.3rem; }
.roadmap .roadmap-section-description { margin: 0 0 1.2rem; color: var(--roadmap-muted); font-size: .95rem; line-height: 1.6; }
.roadmap .roadmap-focus { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 1.5rem; font-size: .8rem; }
.roadmap .roadmap-focus > span:first-child { color: var(--roadmap-muted); }
.roadmap .trend-pill,
.roadmap .source-pill { display: inline-block; padding: .25rem .6rem; border: 1px solid var(--roadmap-border); border-radius: 2rem; background: var(--roadmap-soft); color: #3b4931; font-size: .75rem; font-weight: 600; }
.roadmap .topic-card { margin-bottom: .8rem; border: 1px solid var(--roadmap-border); border-radius: .7rem; background: #fff; scroll-margin-top: 7rem; }
.roadmap .topic-card:last-child { margin-bottom: 0; }
.roadmap .topic-card[open] { border-color: #a3b596; }
.roadmap .topic-summary { display: flex; align-items: center; gap: .8rem; padding: 1rem; list-style: none; cursor: pointer; font-size: .95rem; font-weight: 700; line-height: 1.5; }
.roadmap .topic-summary > span:first-child { flex: 1; }
.roadmap .topic-meta { flex-shrink: 0; color: var(--roadmap-muted); font-size: .75rem; font-weight: 500; }
.roadmap .topic-body { padding: 0 1rem 1rem; }
.roadmap .resource-list { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.roadmap .resource-item { display: grid; gap: .55rem; padding: 1rem; border-radius: .5rem; background: var(--roadmap-soft); overflow-wrap: anywhere; }
.roadmap .resource-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; }
.roadmap .resource-title { font-size: .9rem; font-weight: 700; line-height: 1.5; }
.roadmap .resource-description { margin: 0; color: var(--roadmap-muted); font-size: .85rem; line-height: 1.6; }
.roadmap .resource-badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.roadmap .resource-link { color: #34582a; font-size: .8rem; line-height: 1.6; text-decoration: underline; text-underline-offset: .2em; overflow-wrap: anywhere; }
.roadmap .resource-link:hover { color: #1c3714; }
.roadmap .roadmap-note,
.roadmap .roadmap-empty { margin: 0 0 1.5rem; padding: 1.5rem; border: 1px dashed var(--roadmap-border); border-radius: .7rem; background: var(--roadmap-soft); }

@media (max-width: 1000px) {
  .roadmap .roadmap-layout { grid-template-columns: 1fr; }
  .roadmap .roadmap-sidebar { display: none; }
}
@media (max-width: 600px) {
  .roadmap .roadmap-controls { grid-template-columns: minmax(0, 1fr); padding: 1rem; }
  .roadmap .roadmap-section-summary { padding: 1rem; }
  .roadmap .roadmap-section-body { padding: 0 .8rem .8rem; }
  .roadmap .topic-summary { flex-wrap: wrap; gap: .4rem; padding: .85rem; }
  .roadmap .topic-summary > span:first-child { flex-basis: calc(100% - 2rem); }
  .roadmap .topic-summary .topic-meta { order: 3; flex-basis: 100%; }
  .roadmap .topic-body { padding: 0 .65rem .65rem; }
  .roadmap .resource-item { padding: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .roadmap * { scroll-behavior: auto; }
}