/* Progressive enhancement for challenge write-ups. Everything is scoped to .solve. */
.solve-wrap.has-challenge-outline { max-width: 78rem; }

.solve-content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 12rem;
  gap: clamp(1.25rem, 2vw, 1.75rem);
  align-items: start;
  margin-top: 1.6rem;
}

.solve-main-column { min-width: 0; }
.solve-main-column .solve-label { margin-top: 0; }

/* Grid children with long preformatted content otherwise keep their max-content width
   and can slide underneath the sticky roadmap. Keep every block inside the article. */
.solve-main-column .solve-body,
.solve-main-column .admin-post-content,
.solve-main-column .admin-content-block,
.solve-main-column .solve-body > figure,
.solve-main-column .solve-body > pre {
  min-width: 0;
  max-width: 100%;
}

.solve-main-column .admin-content-block,
.solve-main-column .solve-body > figure,
.solve-main-column .solve-body > pre { width: 100%; }

.solve-outline {
  position: sticky;
  top: 5.5rem;
  width: 12rem;
  overflow: hidden;
  border: 1px solid rgb(148 163 184 / 13%);
  border-radius: 1rem;
  background: linear-gradient(180deg, rgb(13 18 27 / 92%), rgb(8 12 19 / 88%));
  padding: .78rem;
  box-shadow: 0 20px 50px rgb(0 0 0 / 18%);
  backdrop-filter: blur(16px);
}

.solve-outline-kicker {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .55rem;
  color: #8cffc1;
  font: 800 .68rem/1.2 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.solve-outline-kicker::before { width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgb(140 255 193 / 9%); content: ""; }

.solve-outline nav { position: relative; display: grid; gap: .16rem; }
.solve-outline nav::before { position: absolute; top: 1rem; bottom: 1rem; left: .69rem; width: 1px; background: rgb(148 163 184 / 16%); content: ""; }

.solve-outline-link {
  position: relative;
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: .5rem;
  align-items: start;
  border-radius: .7rem;
  padding: .46rem .38rem;
  color: #8e9bad;
  font-size: .69rem;
  line-height: 1.35;
  text-decoration: none;
  transition: color .16s ease, background .16s ease, transform .16s ease;
}
.solve-outline-link-index {
  position: relative;
  z-index: 1;
  display: grid;
  width: 1.2rem;
  height: 1.2rem;
  place-items: center;
  border: 1px solid rgb(148 163 184 / 22%);
  border-radius: 50%;
  background: #0d131c;
  color: #718096;
  font: 700 .5rem/1 "JetBrains Mono", ui-monospace, monospace;
}
.solve-outline-link-title { min-width: 0; padding-top: .1rem; }
.solve-outline-link:hover { background: rgb(255 255 255 / 3%); color: #e6edf7; transform: translateX(2px); }
.solve-outline-link.is-active { background: rgb(140 255 193 / 6%); color: #f3fff9; }
.solve-outline-link.is-active .solve-outline-link-index { border-color: #8cffc1; background: #8cffc1; color: #07130d; box-shadow: 0 0 0 4px rgb(140 255 193 / 9%); }
.solve-outline-link.is-flag { color: #72dda7; }

.solve-body .wu-section,
.solve-body .admin-content-section { scroll-margin-top: 7rem; }

.solve-body .wu-section {
  position: relative;
  margin-left: -.05rem;
  border-left: 1px solid rgb(148 163 184 / 12%);
  padding-left: 1.35rem;
  transition: border-color .18s ease;
}
.solve-body .wu-section::before {
  position: absolute;
  top: 1.75rem;
  left: -.31rem;
  width: .52rem;
  height: .52rem;
  border: 2px solid #0b1018;
  border-radius: 50%;
  background: #526174;
  content: "";
  transition: background .18s ease, box-shadow .18s ease;
}
.solve-body .wu-section.is-active-section { border-left-color: rgb(140 255 193 / 35%); }
.solve-body .wu-section.is-active-section::before { background: #8cffc1; box-shadow: 0 0 0 5px rgb(140 255 193 / 9%); }

.solve-body .admin-content-section.is-flag-section {
  border: 0;
  border-bottom: 1px solid rgb(140 255 193 / 22%);
  border-radius: 0;
  background: transparent;
  padding: 0 0 .72rem;
}

@media (max-width: 70rem) {
  .solve-wrap.has-challenge-outline { max-width: 58rem; }
  .solve-content-layout { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .solve-outline { position: static; order: -1; width: 100%; overflow-x: auto; border-radius: .85rem; padding: .6rem; scrollbar-width: none; }
  .solve-outline::-webkit-scrollbar { display: none; }
  .solve-outline-kicker { display: none; }
  .solve-outline nav { display: flex; width: max-content; gap: .25rem; }
  .solve-outline nav::before { display: none; }
  .solve-outline-link { display: flex; gap: .45rem; align-items: center; min-height: 2.3rem; padding: .42rem .58rem; white-space: nowrap; }
  .solve-outline-link:hover { transform: none; }
  .solve-outline-link-index { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; font-size: .5rem; }
  .solve-outline-link-title { padding: 0; }
}

@media (max-width: 40rem) {
  .solve-content-layout { margin-top: 1.1rem; }
  .solve-body .wu-section { margin-left: 0; padding-left: 1rem; }
  .solve-body .admin-content-section.is-flag-section { padding: 0 0 .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .solve-outline-link,
  .solve-body .wu-section,
  .solve-body .wu-section::before { transition: none; }
}