/* JetBlue Virtual — the public roadmap (/roadmap/, ROADMAP P7-10).
   Layout and visual treatment from docs/design/roadmap-target.html (a Claude Design export — a
   reference, not code). Its inline styles became classes; its sample stops did not ship (every word
   on the page comes from the public section of docs/ROADMAP.md, lib/roadmap.js). Loaded after
   styles.css, which supplies the font, the header and the footer. Light only, like the home page.
   Motion only under prefers-reduced-motion: no-preference — nothing moves for anyone who asked. */

.rm {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 40px) clamp(16px, 4vw, 40px) 56px;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.5vw, 26px);
}

/* Per-bucket colours, carried from the design. */
[data-bucket="flown"] { --b-tint: #E4F7F3; --b-ink: #0B7A6B; --b-line: #3FD1B5; --b-bar: linear-gradient(90deg, #3FD1B5, #0B7A6B); }
[data-bucket="filed"] { --b-tint: #EAF3FF; --b-ink: #0B5FE0; --b-line: #7DB2FF; --b-bar: linear-gradient(90deg, #5B9BFF, #0B3F9E); }
[data-bucket="unfiled"] { --b-tint: #FFF4E0; --b-ink: #8A5A07; --b-line: #F2B544; --b-bar: linear-gradient(90deg, #F2B544, #C98A1B); }

/* --- The hero: the climb profile on navy ---------------------------------------- */
.rm-hero {
  position: relative;
  overflow: hidden;
  border-radius: clamp(22px, 3vw, 32px);
  background:
    radial-gradient(120% 90% at 85% 0%, #1A6AE8 0%, rgba(26, 106, 232, 0) 55%),
    linear-gradient(160deg, #0B3F9E 0%, #05204F 70%);
  box-shadow: 0 30px 60px -34px rgba(5, 32, 79, .85);
  padding: clamp(24px, 4.5vw, 52px) clamp(18px, 4.5vw, 52px) clamp(18px, 3vw, 30px);
  color: #fff;
}
.rm-hero-copy { max-width: 760px; }
.rm-hero h1 {
  font: 800 clamp(32px, 5.2vw, 58px)/1.04 var(--font);
  letter-spacing: -.025em;
  text-wrap: balance;
}
.rm-hero p {
  margin-top: 16px;
  font: 500 clamp(15px, 1.6vw, 18px)/1.6 var(--font);
  color: #CFE4FA;
  text-wrap: pretty;
}
.rm-legend { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rm-legend li {
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  padding: 8px 13px;
  font: 600 13px/1.2 var(--font);
  color: #E8F1FD;
}
.rm-legend svg { flex: none; }

/* The chart scrolls sideways inside the hero below 640 px — never the page. */
.rm-scroll {
  margin-top: clamp(14px, 2.5vw, 26px);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.rm-chart-wrap { min-width: 640px; padding: 4px 0; }
.rm-chart { width: 100%; height: auto; display: block; overflow: visible; }

/* Waypoints are links (Tab reaches them; Enter selects; arrows move between them). */
.wp { cursor: pointer; }
.wp:focus { outline: none; }
.wp-label { display: none; fill: #fff; font: 800 19px/1 var(--font); }
.wp.is-on .wp-label { display: inline; }
.wp-ring { fill: none; stroke: #fff; stroke-opacity: .5; stroke-width: 2; opacity: 0; }
.wp.is-on .wp-ring { opacity: 1; }
.wp:hover .wp-ring { opacity: .7; }
.wp-dot { transform-box: fill-box; transform-origin: center; }
.wp.is-on .wp-dot { transform: scale(1.3); }
/* The focus ring: amber, outside the selection ring, so focus and selection never look alike. */
.wp-focus { fill: none; stroke: #FFD66B; stroke-width: 3; opacity: 0; }
.wp:focus-visible .wp-focus { opacity: 1; }

/* --- The bucket cards ---------------------------------------------------------- */
.rm-buckets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px;
}
.rm-bucket {
  background: #fff;
  border: 1px solid #E6EDF7;
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 14px 30px -24px rgba(5, 32, 79, .45);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.rm-bucket-head { display: flex; align-items: center; gap: 12px; padding: 2px 4px; }
.rm-bucket-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--b-tint);
  color: var(--b-ink);
}
.rm-bucket-title { flex: 1; min-width: 0; }
.rm-bucket-tag { margin: 0; font: 800 12px/1 var(--font); letter-spacing: .12em; color: var(--b-ink); }
.rm-bucket-sub { font: 600 13px/1.3 var(--font); color: var(--muted); margin-top: 5px; }
.rm-bucket-count { font: 800 22px/1 var(--font); color: var(--navy); font-variant-numeric: tabular-nums; }
.rm-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rm-item {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 46px;
  padding: 9px 12px;
  border-radius: 13px;
  color: var(--ink);
}
.rm-item:hover { background: #F0F5FC; color: var(--ink); }
.rm-item.is-on { background: var(--b-tint); box-shadow: inset 0 0 0 1.5px var(--b-ink); }
.rm-item:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 2px; }
.rm-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex: none;
  background: #fff;
  border: 2.5px solid var(--b-line);
}
[data-bucket="flown"] .rm-dot { background: var(--b-line); }
.rm-name { flex: 1; min-width: 0; font: 700 14.5px/1.3 var(--font); color: #10233F; }
.rm-mark { font: 700 11.5px/1 var(--font); color: var(--blue-600); text-align: right; white-space: nowrap; }
[data-bucket="flown"] .rm-mark { color: var(--muted); }
[data-bucket="flown"] .rm-mark-here { color: var(--teal); }
.rm-mark-sub { display: block; margin-top: 4px; font-weight: 600; color: var(--muted); }

/* --- The selected stop ------------------------------------------------------------ */
.rm-stops { display: flex; flex-direction: column; }
.rm-panel {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid #E6EDF7;
  border-radius: 26px;
  box-shadow: 0 22px 44px -30px rgba(5, 32, 79, .55);
  scroll-margin-top: 90px;
}
.rm-bar { height: 6px; background: var(--b-bar); }
.rm-panel-body {
  padding: clamp(20px, 3.5vw, 36px);
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
  align-items: flex-end;
  justify-content: space-between;
}
.rm-panel-text { flex: 1 1 460px; min-width: 0; max-width: 720px; }
.rm-panel-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rm-tag {
  background: var(--b-tint);
  color: var(--b-ink);
  border-radius: 999px;
  padding: 7px 12px;
  font: 800 11.5px/1 var(--font);
  letter-spacing: .1em;
}
.rm-status { font: 600 14px/1.2 var(--font); color: var(--muted); }
.rm-title {
  margin-top: 16px;
  font: 800 clamp(24px, 3vw, 34px)/1.15 var(--font);
  letter-spacing: -.02em;
  color: var(--navy);
  text-wrap: balance;
}
.rm-detail { margin-top: 12px; font: 500 16px/1.6 var(--font); color: #2A3F5E; text-wrap: pretty; }
.rm-note { margin-top: 10px; font: 600 15px/1.5 var(--font); color: var(--b-ink); }
.rm-nav { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.rm-count { font: 700 12px/1 var(--font); letter-spacing: .1em; color: var(--muted); }
.rm-btns { display: flex; gap: 8px; }
.rm-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 13px;
  font: 700 14.5px/1 var(--font);
}
.rm-btn-prev { background: #EAF3FF; color: var(--blue-900); }
a.rm-btn-prev:hover { background: #D6E6FF; color: var(--blue-900); }
.rm-btn-next {
  background: linear-gradient(135deg, #0B5FE0, #0B3F9E);
  color: #fff;
  box-shadow: 0 10px 20px -12px rgba(11, 63, 158, .9);
}
a.rm-btn-next:hover { background: linear-gradient(135deg, #1A6AE8, #05204F); color: #fff; }
.rm-btn[aria-disabled="true"] { opacity: .45; cursor: default; }
.rm-btn:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 2px; }

/* --- Feedback ----------------------------------------------------------------- */
.rm-feedback {
  background: linear-gradient(150deg, #EAF3FF, #D6E6FF);
  border-radius: 24px;
  padding: clamp(18px, 3vw, 28px);
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.rm-feedback > div { min-width: 0; }
.rm-feedback-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--blue-600);
  box-shadow: 0 8px 18px -12px rgba(11, 63, 158, .8);
}
.rm-feedback-lead { font: 500 16px/1.5 var(--font); color: #10233F; text-wrap: pretty; }
.rm-feedback-lead strong { font-weight: 800; color: var(--navy); }
.rm-contact { font: 500 15px/1.5 var(--font); color: #2A3F5E; margin-top: 6px; overflow-wrap: anywhere; }
.rm-contact a { font-weight: 700; text-decoration: underline; }

.rm-foot { font: 500 13.5px/1.5 var(--font); color: var(--muted); }

/* Announces the selected stop to screen readers; never seen. */
.rm-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.rm-footer { padding: 24px var(--gutter); }
.rm-footer .footer-legal { margin: 0 auto; padding-top: 0; border-top: 0; }

@media (prefers-reduced-motion: no-preference) {
  .rm-item, .rm-btn { transition: background-color .15s, box-shadow .15s; }
  .wp-dot { transition: transform .2s; }
  .wp-ring { transition: opacity .2s; }
}