@import url("../../config/tokens/tokens.generated.css");

.sr-roadmap-header h1 { font-family: var(--font-family-display); color: var(--color-secondary); }
.sr-roadmap-summary { display: flex; flex-wrap: wrap; gap: var(--space-m); list-style: none; padding: 0; }
.sr-roadmap-summary li {
  font-family: var(--font-family-body);
  font-size: 13px;
  color: var(--color-text-secondary);
  background: var(--color-primary-light);
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--radius-small);
}

.sr-roadmap-step { margin-bottom: var(--space-xl); }
.sr-roadmap-step h3 { font-family: var(--font-family-display); color: var(--color-secondary); }
.sr-roadmap-step p { font-family: var(--font-family-body); color: var(--color-text-primary); max-width: 75ch; }

.sr-document-list__override { color: var(--color-text-secondary); font-size: 14px; margin-top: var(--space-xs); }

.sr-checklist-group label { display: flex; align-items: center; gap: var(--space-s); min-height: 44px; }

.sr-roadmap-province-notes details {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  padding: var(--space-s) var(--space-m);
  margin-bottom: var(--space-s);
}
.sr-roadmap-province-notes summary { cursor: pointer; font-weight: 600; }

.sr-annotation--tip {
  background: var(--color-primary-light);
  border-left: 3px solid var(--color-tip);
  padding: var(--space-s);
}

@media (max-width: 767px) {
  .sr-split-column-region { display: block; }
  .sr-sticky-rail-region { position: static; }
}

/* --- UI Sprint 3: reading-experience polish ------------------------------------ */

.sr-roadmap-header { background: var(--color-background); padding-bottom: var(--space-l); }

.sr-roadmap-step__eyebrow {
  font-family: var(--font-family-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-xs);
}

.sr-roadmap-step__guidance p {
  font-family: var(--font-family-body);
  color: var(--color-text-primary);
  max-width: 75ch;
  line-height: 1.65;
}

.sr-roadmap-step__guidance-list {
  font-family: var(--font-family-body);
  color: var(--color-text-primary);
  max-width: 75ch;
  line-height: 1.65;
  padding-left: var(--space-l);
  margin: 0 0 var(--space-m);
}
.sr-roadmap-step__guidance-list ul {
  margin-top: var(--space-xs);
  padding-left: var(--space-l);
}
.sr-roadmap-step__guidance-list li {
  margin-bottom: var(--space-xs);
}

.sr-roadmap-step__supporting-block {
  margin-top: var(--space-l);
  padding-top: var(--space-l);
  border-top: 1px solid var(--color-border);
}
.sr-roadmap-step__supporting-block h4 {
  font-family: var(--font-family-body);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  margin-bottom: var(--space-s);
}

.sr-roadmap-document-grid,
.sr-roadmap-resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-m);
}

/* FIX (Final QA Follow-up Sprint, TIE #1): "Al haber mas texto extiende
   la tarjeta hacia el ancho y no hacia abajo." TIE's fee-790-012
   Official Resource card now carries a much longer description (both
   TIE fee options spelled out) -- with auto-fill/minmax the grid still
   reserves several narrow tracks based on the container's width
   regardless of how much text one card holds, so the card was rendering
   narrow-and-tall. `data-official-resource-id` is already rendered on
   every Official Resource Card by its own `id` prop (no schema/JS
   change needed), so this single card is targeted precisely: it spans
   every column, extending horizontally instead of downward. The mobile
   override below already collapses this grid to one column, so this
   card behaves identically to every other card on narrow viewports --
   inherently mobile-safe, no separate mobile rule needed. */
.sr-roadmap-resource-grid [data-official-resource-id="fee-790-012"] {
  grid-column: 1 / -1;
}

/* Progressive disclosure (Checklist categories, Province notes) */
.sr-roadmap-collapsible {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  padding: var(--space-m);
  margin-bottom: var(--space-m);
  background: var(--color-surface);
}
.sr-roadmap-collapsible summary {
  cursor: pointer;
  font-family: var(--font-family-body);
  font-weight: 600;
  color: var(--color-secondary);
  list-style: none;
}
.sr-roadmap-collapsible summary::-webkit-details-marker { display: none; }
.sr-roadmap-collapsible summary::before {
  content: "\25B8";
  display: inline-block;
  margin-right: var(--space-xs);
  transition: transform 200ms ease;
}
.sr-roadmap-collapsible[open] summary::before { transform: rotate(90deg); }
.sr-roadmap-collapsible > *:not(summary) { margin-top: var(--space-m); }

.sr-roadmap-annotations { margin-top: var(--space-xl); }
.sr-roadmap-annotations .sr-callout { margin-bottom: var(--space-s); }

.sr-roadmap-faq { margin-top: var(--space-xl); }

@media (max-width: 767px) {
  .sr-roadmap-document-grid,
  .sr-roadmap-resource-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .sr-roadmap-collapsible summary::before {
    transition: none;
  }
}

/* --- Document Experience & Premium Content Sprint --------------------------- */

.sr-roadmap-step__supporting-caption {
  font-size: 13px;
  color: var(--color-muted);
  font-style: italic;
  margin: -4px 0 var(--space-s);
}

.sr-roadmap-step__continue {
  display: inline-block;
  margin-top: var(--space-l);
  padding-top: var(--space-m);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-family-body);
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}
.sr-roadmap-step__continue:hover { text-decoration: underline; }

.sr-roadmap-premium-hooks { opacity: 0.85; }
.sr-roadmap-premium-hooks__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-m);
}
.sr-roadmap-premium-hook {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-medium);
  padding: var(--space-m);
  background: var(--color-background);
}
.sr-roadmap-premium-hook__title { font-family: var(--font-family-body); font-weight: 600; margin: 0 0 var(--space-xs); }
.sr-roadmap-premium-hook__badge {
  display: inline-block;
  font-size: 11px;
  color: var(--color-muted);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 2px 8px;
  margin-bottom: var(--space-xs);
}
.sr-roadmap-premium-hook__desc { font-size: 13px; color: var(--color-text-secondary); margin: 0; }

@media (max-width: 767px) {
  .sr-roadmap-premium-hooks__grid { grid-template-columns: 1fr; }
}

/* --- Global Roadmap Localization Sprint --- */
.sr-roadmap-language-notice {
  background: var(--color-primary-light);
  color: var(--color-secondary);
  font-family: var(--font-family-body);
  font-size: 13px;
  padding: var(--space-s) var(--space-m);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

/* --- Product Polish Sprint: root cause fix for the desktop layout shift -------
 *
 * ROOT CAUSE (measured, not guessed): `.sr-split-column-region` (the
 * frozen Stage 7 primitive) gives the rail a fixed 260px and lets
 * `[data-region="main"]` fill ALL remaining flex space -- on a wide
 * viewport this makes `main` far wider than `.sr-reading-column`'s own
 * 820px cap. Since the reading column centers itself WITHIN `main`
 * (not within the page), the extra slack lands asymmetrically to its
 * left, visually shifting the whole reading experience rightward --
 * exactly the reported symptom.
 *
 * The rail/content RATIO itself is already correct (260px rail vs a
 * content block including gap+reading-column ≈ 1112px total => the
 * rail is ~23% of that block, matching the requested 20-25% / 75-80%
 * split). The fix is only to stop `main` from growing wider than the
 * reading column actually needs, by capping the WHOLE split-column
 * block at the presentation layer (this file) and centering the block
 * itself on the page -- never touching the frozen Stage 7 primitive
 * (`layouts/_primitives/primitives.css`), which other layouts may
 * legitimately depend on remaining unconstrained.
 */
@media (min-width: 1024px) {
  .sr-roadmap-content-page .sr-split-column-region {
    max-width: calc(260px + var(--space-xl) + var(--reading-column-max));
    margin-left: auto;
    margin-right: auto;
  }
}

/* --- Product Polish Sprint: breadcrumb hierarchy ------------------------------- */
.sr-roadmap-breadcrumb-bar {
  display: flex;
  align-items: center;
  gap: var(--space-l);
  padding: var(--space-s) var(--space-m);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}
.sr-roadmap-back-to-guides {
  font-family: var(--font-family-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  flex-shrink: 0;
}
.sr-roadmap-back-to-guides:hover { text-decoration: underline; }
.sr-roadmap-breadcrumb-trail {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: var(--space-xs);
  font-family: var(--font-family-body);
  font-size: 13px;
  flex-wrap: wrap;
}
.sr-roadmap-breadcrumb-trail li:not(:last-child)::after {
  content: "\203A";
  margin-left: var(--space-xs);
  color: var(--color-muted);
}
.sr-roadmap-breadcrumb-trail a { color: var(--color-text-secondary); text-decoration: none; }
.sr-roadmap-breadcrumb-trail a:hover { color: var(--color-primary); text-decoration: underline; }
.sr-roadmap-breadcrumb-trail li[aria-current="page"] { color: var(--color-text-primary); font-weight: 600; }

.sr-roadmap-fee-disclaimer {
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--color-muted);
  font-style: italic;
  margin: 0;
}

/* --- Product Polish Sprint: sidebar ScrollSpy, hover, Hero-to-content transition --- */

/* ScrollSpy reading-position indicator -- deliberately distinct from
   the frozen component's own aria-current="step" styling, since this
   is a public-mode reading aid, never member completion. */
.sr-roadmap-navigation__link--reading {
  background: var(--color-primary-light);
  border-radius: var(--radius-small);
}
.sr-roadmap-navigation__link {
  transition: background 200ms ease, color 200ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .sr-roadmap-navigation__link { transition: none; }
}

/* More breathing room between the Hero and the first step -- avoids
   the "abrupt jump" (point 6). */
.sr-section-stack > .sr-roadmap-section:first-child {
  margin-top: var(--space-xl);
  padding-top: var(--space-l);
  border-top: 1px solid var(--color-border);
}

/* Subtle fade-in for each step as it enters the viewport -- point 10,
   "nada exagerado". Respects prefers-reduced-motion globally. */
.sr-roadmap-step {
  animation: sr-roadmap-step-fade-in 350ms ease both;
}
@keyframes sr-roadmap-step-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .sr-roadmap-step { animation: none; }
}

/* --- Product Content Sprint: Interactive CUE Companion (EX-18/Modelo 790/Cita Previa) --- */
.sr-roadmap-companion-guide {
  margin-top: var(--space-m);
  border-color: var(--color-primary-light);
}
.sr-roadmap-companion-guide summary {
  color: var(--color-primary);
}
.sr-roadmap-companion-guide__intro {
  color: var(--color-text-secondary);
  font-size: 14px;
}
.sr-roadmap-companion-guide__section {
  margin-top: var(--space-m);
  padding-top: var(--space-m);
  border-top: 1px solid var(--color-border);
}
.sr-roadmap-companion-guide__section h5 {
  font-family: var(--font-family-body);
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 var(--space-s);
}
.sr-roadmap-companion-guide__note {
  font-size: 13px;
  color: var(--color-text-secondary);
  font-style: italic;
}
.sr-roadmap-companion-guide__field {
  margin-bottom: var(--space-m);
}
.sr-roadmap-companion-guide__field-name {
  font-weight: 600;
  font-size: 14px;
  margin: 0 0 var(--space-xs);
}
.sr-roadmap-companion-guide__field dl,
.sr-roadmap-companion-guide__kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-xs) var(--space-m);
  margin: 0;
  font-size: 13px;
}
.sr-roadmap-companion-guide__field dt,
.sr-roadmap-companion-guide__kv dt {
  color: var(--color-muted);
  text-transform: capitalize;
  white-space: nowrap;
}
.sr-roadmap-companion-guide__field dd,
.sr-roadmap-companion-guide__kv dd {
  margin: 0;
  color: var(--color-text-primary);
}
.sr-roadmap-companion-guide__disclaimer {
  margin-top: var(--space-m);
  padding-top: var(--space-s);
  border-top: 1px solid var(--color-border);
  font-size: 12px;
  color: var(--color-muted);
  font-style: italic;
}

@media (max-width: 767px) {
  .sr-roadmap-companion-guide__field dl,
  .sr-roadmap-companion-guide__kv {
    grid-template-columns: 1fr;
  }
}

/* --- Settlement Roadmaps Foundation: locked-roadmap panel ---------------------
 * Occupies the same rail position/width as the real ToC (260px, per
 * the frozen Stage 7 flex rule) so a locked roadmap's layout
 * proportions stay visually identical to a published one. */
.sr-roadmap-locked-panel {
  padding: var(--space-l);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-medium);
  background: var(--color-background);
  text-align: center;
}
.sr-roadmap-locked-panel__icon {
  display: block;
  font-size: 28px;
  margin-bottom: var(--space-s);
}
.sr-roadmap-locked-panel__title {
  font-family: var(--font-family-display);
  font-weight: 700;
  color: var(--color-secondary);
  margin: 0 0 var(--space-xs);
}
.sr-roadmap-locked-panel__message {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0;
}