/* ============================================================
   roadmap.css — a warm, paper-inspired public roadmap
   ============================================================ */
.roadmap-page {
  position: relative;
  min-height: 100dvh;
  padding: calc(var(--nav-h) + 64px) 0 104px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(59, 130, 246, .055), transparent 34%),
    var(--bg0);
}

.roadmap-page__glow {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(110px);
  pointer-events: none;
  opacity: .13;
}

.roadmap-page__glow--blue { top: 190px; left: -270px; background: #3b82f6; }
.roadmap-page__glow--warm { top: 560px; right: -300px; background: #f59e0b; opacity: .08; }

.roadmap-container {
  position: relative;
  z-index: 1;
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
}

.roadmap-hero {
  max-width: 720px;
  margin: 0 auto 80px;
  text-align: center;
}

.roadmap-hero__eyebrow,
.roadmap-section__kicker {
  display: inline-block;
  color: var(--accent-hi);
  font-size: .7rem;
  font-weight: 650;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.roadmap-hero__title {
  margin: 14px 0 16px;
  color: var(--text);
  font-size: clamp(2.35rem, 6vw, 4.25rem);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.04;
}

.roadmap-hero__lead {
  max-width: 610px;
  margin: 0 auto;
  color: var(--muted);
  font-size: clamp(.98rem, 2vw, 1.08rem);
  line-height: 1.8;
}

.roadmap-impulse-mark { width: 19px; height: 19px; }
.roadmap-impulse-mark--emphasized { stroke-width: 2.1; }

.roadmap-section { margin-top: 88px; }
.roadmap-section:first-of-type { margin-top: 0; }

.roadmap-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
  padding: 0 4px;
}

.roadmap-section__head h2 {
  margin: 7px 0 6px;
  color: var(--text);
  font-size: clamp(1.55rem, 3vw, 2rem);
  line-height: 1.2;
  letter-spacing: -.025em;
}

.roadmap-section__head p { color: var(--muted); font-size: .88rem; }

.roadmap-section__count {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  flex: 0 0 35px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .72rem;
  background: var(--bg1);
  border: 1px solid var(--border);
  border-radius: 50%;
}

.roadmap-grid { display: grid; gap: 18px; }
.roadmap-grid--progress { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.roadmap-grid--planned { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.roadmap-card {
  --card-accent: var(--accent-hi);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 238px;
  overflow: hidden;
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--card-accent) 4%, transparent), transparent 48%),
    #10161e;
  border: 1px solid color-mix(in srgb, var(--card-accent) 18%, var(--border));
  border-radius: 17px;
  box-shadow: 0 18px 50px rgba(0,0,0,.14);
  animation: roadmap-card-in .45s var(--ease) both;
  animation-delay: min(calc(var(--card-order) * 55ms), 330ms);
  transition: transform var(--mid), border-color var(--mid), box-shadow var(--mid);
}

.roadmap-card--improvement { --card-accent: #a78bfa; }
.roadmap-card--fix { --card-accent: #fb7185; }

.roadmap-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--card-accent) 35%, var(--border));
  box-shadow: 0 22px 60px rgba(0,0,0,.22);
}

@keyframes roadmap-card-in {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: translateY(0); }
}

.roadmap-card__fold {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 33px;
  height: 33px;
  background: linear-gradient(225deg, var(--bg0) 48%, color-mix(in srgb, var(--card-accent) 12%, var(--bg2)) 50%);
  border-bottom-left-radius: 8px;
  pointer-events: none;
}

.roadmap-card__head { padding: 21px 22px 0; }
.roadmap-card__body { flex: 1; padding: 18px 22px 22px; }

.roadmap-category {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 9px;
  color: var(--accent-hi);
  font-size: .62rem;
  font-weight: 650;
  letter-spacing: .075em;
  text-transform: uppercase;
  background: rgba(59,130,246,.09);
  border: 1px solid rgba(96,165,250,.16);
  border-radius: 999px;
}

.roadmap-category--improvement { color: #c4b5fd; background: rgba(139,92,246,.09); border-color: rgba(167,139,250,.17); }
.roadmap-category--fix { color: #fda4af; background: rgba(244,63,94,.08); border-color: rgba(251,113,133,.16); }

.roadmap-card__title {
  padding-right: 8px;
  color: var(--text);
  font-size: 1.04rem;
  line-height: 1.4;
  letter-spacing: -.018em;
}

.roadmap-card__description,
.roadmap-released__description {
  margin-top: 11px;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.72;
  overflow-wrap: anywhere;
}

.roadmap-card__description.md-content p,
.roadmap-released__description.md-content p { margin: 0 0 .65rem; line-height: inherit; }
.roadmap-card__description.md-content p:last-child,
.roadmap-released__description.md-content p:last-child { margin-bottom: 0; }
.roadmap-card__description.md-content ul,
.roadmap-released__description.md-content ul { margin: .55rem 0; padding-left: 1.15rem; list-style: disc; }
.roadmap-card__description.md-content li,
.roadmap-released__description.md-content li { margin-bottom: .25rem; }

.roadmap-card__foot {
  padding: 14px 16px;
  border-top: 1px solid rgba(255,255,255,.055);
}

.roadmap-impulse-wrap {
  position: relative;
  display: inline-flex;
  max-width: 100%;
}

.roadmap-impulse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  color: var(--muted);
  font-size: .73rem;
  font-weight: 600;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: color var(--fast), border-color var(--fast), background var(--fast), transform var(--fast);
}

.roadmap-impulse-tooltip {
  position: absolute;
  z-index: 4;
  bottom: calc(100% + 11px);
  left: 0;
  width: max-content;
  max-width: min(280px, calc(100vw - 64px));
  padding: 10px 12px;
  color: color-mix(in srgb, var(--text) 82%, var(--muted));
  font-size: .69rem;
  font-weight: 450;
  line-height: 1.55;
  text-align: left;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  background: #171e28;
  border: 1px solid color-mix(in srgb, var(--card-accent) 24%, var(--border));
  border-radius: 11px;
  box-shadow: 0 14px 34px rgba(0,0,0,.32);
  transform: translateY(4px);
  transition: opacity var(--fast), transform var(--fast);
}

.roadmap-impulse-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 22px;
  width: 8px;
  height: 8px;
  background: #171e28;
  border-right: 1px solid color-mix(in srgb, var(--card-accent) 24%, var(--border));
  border-bottom: 1px solid color-mix(in srgb, var(--card-accent) 24%, var(--border));
  transform: translateY(-4px) rotate(45deg);
}

.roadmap-impulse-wrap:hover .roadmap-impulse-tooltip,
.roadmap-impulse-wrap:focus-within .roadmap-impulse-tooltip {
  opacity: 1;
  transform: translateY(0);
}

.roadmap-impulse:hover:not(:disabled) {
  color: var(--accent-hi);
  background: rgba(59,130,246,.07);
  border-color: rgba(96,165,250,.28);
  transform: translateY(-1px);
}

.roadmap-impulse:hover:not(:disabled) .roadmap-impulse-mark { transform: translate(1px, -1px); }
.roadmap-impulse .roadmap-impulse-mark { width: 17px; height: 17px; transition: transform var(--fast); }
.roadmap-impulse__divider { color: var(--muted2); }
.roadmap-impulse__count { min-width: 1ch; font-family: var(--font-mono); }
.roadmap-impulse.is-pending { opacity: .68; }
.roadmap-impulse.is-done { color: #93c5fd; background: rgba(59,130,246,.09); border-color: rgba(96,165,250,.2); }
.roadmap-impulse.is-done .roadmap-impulse-mark { stroke-width: 2.1; }
.roadmap-impulse:disabled { cursor: default; }

.roadmap-section--released { margin-top: 94px; }
.roadmap-arrived {
  background: rgba(13,17,23,.58);
  border: 1px solid var(--border);
  border-radius: 17px;
}

.roadmap-arrived summary {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 82px;
  padding: 17px 20px;
  list-style: none;
  cursor: pointer;
}

.roadmap-arrived summary::-webkit-details-marker { display: none; }
.roadmap-arrived__check {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  color: #86efac;
  background: rgba(34,197,94,.08);
  border: 1px solid rgba(34,197,94,.13);
  border-radius: 12px;
}
.roadmap-arrived__check svg { width: 18px; height: 18px; }
.roadmap-arrived__copy { display: flex; flex: 1; min-width: 0; flex-direction: column; }
.roadmap-arrived__copy strong { color: color-mix(in srgb, var(--text) 84%, var(--muted)); font-size: .9rem; }
.roadmap-arrived__copy small { color: var(--muted2); font-size: .71rem; }
.roadmap-arrived__count { color: var(--muted2); font-family: var(--font-mono); font-size: .72rem; }
.roadmap-arrived__chevron { width: 17px; height: 17px; color: var(--muted2); transition: transform var(--mid); }
.roadmap-arrived[open] .roadmap-arrived__chevron { transform: rotate(180deg); }

.roadmap-arrived__list { padding: 0 20px 20px; }
.roadmap-released {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding: 20px 2px;
  border-top: 1px solid var(--border);
}
.roadmap-released__content { flex: 1; min-width: 0; }
.roadmap-released__title { margin-top: 10px; color: color-mix(in srgb, var(--text) 82%, var(--muted)); font-size: .9rem; line-height: 1.45; }
.roadmap-released__description { max-width: 780px; color: var(--muted2); }
.roadmap-released__impulses { display: flex; align-items: center; gap: 6px; padding-top: 3px; color: var(--muted2); font-family: var(--font-mono); font-size: .68rem; }
.roadmap-released__impulses .roadmap-impulse-mark { width: 14px; height: 14px; }

.roadmap-empty {
  max-width: 520px;
  margin: 30px auto 0;
  padding: 72px 24px;
  text-align: center;
  color: var(--muted);
}
.roadmap-empty__icon { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 18px; color: var(--accent-hi); background: rgba(59,130,246,.08); border: 1px solid rgba(96,165,250,.14); border-radius: 16px; }
.roadmap-empty__icon .roadmap-impulse-mark { width: 24px; height: 24px; }
.roadmap-empty h2 { margin-bottom: 8px; color: var(--text); font-size: 1.1rem; }
.roadmap-empty p { font-size: .85rem; }

@media (max-width: 900px) {
  .roadmap-grid--planned { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .roadmap-page { padding: calc(var(--nav-h) + 44px) 0 78px; }
  .roadmap-container { width: min(100% - 30px, 1120px); }
  .roadmap-hero { margin-bottom: 60px; }
  .roadmap-hero__title { font-size: clamp(2.2rem, 12vw, 3.25rem); }
  .roadmap-section { margin-top: 68px; }
  .roadmap-section__head { align-items: flex-start; }
  .roadmap-grid--progress,
  .roadmap-grid--planned { grid-template-columns: 1fr; }
  .roadmap-card { min-height: 0; }
  .roadmap-impulse-wrap { width: 100%; }
  .roadmap-impulse { width: 100%; }
  .roadmap-section--released { margin-top: 72px; }
  .roadmap-arrived summary { min-height: 76px; padding: 15px; }
  .roadmap-arrived__copy small { display: none; }
  .roadmap-arrived__list { padding: 0 15px 15px; }
  .roadmap-released { gap: 12px; padding: 18px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .roadmap-card { animation: none; transition: border-color var(--fast); }
  .roadmap-card:hover { transform: none; }
  .roadmap-impulse,
  .roadmap-impulse .roadmap-impulse-mark,
  .roadmap-impulse-tooltip,
  .roadmap-arrived__chevron { transition: none; }
}