/* Extend the existing portfolio components without changing their global
   rules. The Experience entry spans its parent grid; the dedicated page reuses
   the established case-study layout, colors and native navigation behavior. */
.experience-migration {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(13rem, .35fr);
  gap: 36px;
  padding: 32px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--purple);
  background: var(--panel);
}
.experience-migration > div { min-width: 0; }
.experience-migration .eyebrow { font-size: .8125rem; line-height: 1.8; margin-bottom: 14px; }
.experience-migration h3 { font-size: 1.8rem; line-height: 1.35; margin-bottom: 18px; }
.experience-migration p:not(.eyebrow) { font-size: 1rem; line-height: 1.8; margin-bottom: 18px; }
.experience-migration .text-link { display: inline-block; font-size: 1rem; line-height: 1.7; min-height: 44px; padding-block: 9px; }
.experience-migration-facts { display: grid; align-content: center; gap: 22px; margin: 0; padding-left: 28px; border-left: 1px solid var(--line); }
.experience-migration-facts dt { font-size: .875rem; line-height: 1.7; color: var(--muted); }
.experience-migration-facts dd { margin: 4px 0 0; font-size: 2.4rem; line-height: 1.3; letter-spacing: -.035em; font-weight: 600; color: var(--purple); }
.experience-migration-facts > div + div dd { font-size: 1.7rem; color: var(--cyan); }

/* Extend the existing career-impact row without removing its earlier outcomes.
   Four desktop columns become two, then one, before the prose gets cramped. */
.impact-grid-with-migration { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.impact-grid-with-migration .impact-source a { color: var(--cyan); display: inline-block; min-height: 44px; text-decoration: underline; text-underline-offset: 4px; }

/* Each decision and flow label uses native HTML. The diagram deliberately avoids
   unverified tools, repository counts per path and claims about complete parity.
   All boxes size to their content, including at enlarged browser text settings. */
.migration-page .case-hero h1 { letter-spacing: -.035em; line-height: 1.15; }
.migration-page .case-context { border-color: var(--cyan); }
.migration-page .assessment-entry-link { display: inline-block; margin: 12px 0 0 22px; }
.migration-page .case-problem > div { min-width: 0; }
.migration-page .case-problem p:last-child { margin-bottom: 0; }
.migration-page .case-result > p:last-child { margin-bottom: 0; }
.migration-flow { margin: 38px 0 0; padding: 30px; background: var(--panel); border: 1px solid var(--line); }
.migration-flow figcaption { margin-bottom: 28px; }
.migration-flow figcaption h3 { font-size: 1.35rem; line-height: 1.5; margin-bottom: 12px; }
.migration-flow figcaption p { font-size: 1rem; line-height: 1.8; max-width: 880px; margin: 0; }
.migration-flow-node { padding: 22px; border: 1px solid #67507e; background: #171525; min-width: 0; text-align: center; }
.migration-flow-node strong { display: block; color: var(--ink); font-size: 1.125rem; line-height: 1.6; font-weight: 600; }
.migration-flow-node p:not(.migration-flow-label) { font-size: 1rem; line-height: 1.75; margin: 10px 0 0; }
.migration-flow .migration-flow-label { color: #c4afd8; font: .875rem/1.7 Consolas, monospace; letter-spacing: .025em; margin: 0 0 10px; }
.migration-flow-source, .migration-flow-destination { max-width: 38rem; margin-inline: auto; }
.migration-flow-interim { border-color: #6099ac; background: #10202a; }
.migration-flow-interim .migration-flow-label { color: var(--cyan); }
.migration-flow-destination { border-color: var(--purple); }
.migration-flow-validation { padding: 24px; background: #101c27; border: 1px solid #6099ac; text-align: center; }
.migration-flow-validation > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.migration-flow-validation > div p { font-size: 1rem; line-height: 1.75; margin: 0; }
.migration-flow-validation strong, .migration-flow-validation span { display: block; }
.migration-flow-validation strong { color: var(--ink); margin-bottom: 5px; }

/* Branch lines attach to the center of each flexible route box. The shared
   source and destination connect at the midpoint of each horizontal line.
   Connector elements are hidden from assistive technology; labels explain the
   relationships independently, and the mobile layout states the alternatives. */
.migration-flow-connector { position: relative; display: block; width: 2px; height: 32px; background: #8190a9; margin-inline: auto; }
.migration-flow-connector::after { content: ""; position: absolute; bottom: 2px; left: -3px; width: 8px; height: 8px; border-right: 2px solid #8190a9; border-bottom: 2px solid #8190a9; transform: rotate(45deg); }
.migration-flow-branches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; padding-block: 28px; position: relative; }
.migration-flow-branches::before, .migration-flow-branches::after { content: ""; position: absolute; left: calc(25% - 7px); right: calc(25% - 7px); height: 1px; background: #8190a9; }
.migration-flow-branches::before { top: 0; }
.migration-flow-branches::after { bottom: 0; }
.migration-flow-route { position: relative; }
.migration-flow-route::before, .migration-flow-route::after { content: ""; position: absolute; left: 50%; width: 1px; height: 28px; background: #8190a9; }
.migration-flow-route::before { top: -29px; }
.migration-flow-route::after { bottom: -29px; }
.migration-flow-alternative { display: none; }

/* Retain real table headers and row headers on every screen. Only this labeled
   region scrolls horizontally, so long cells stay readable at a 16px baseline. */
.migration-table-wrap { overflow-x: auto; max-width: 100%; scrollbar-color: #76618b #0c101e; }
.migration-table-wrap:focus-visible { outline: 3px solid var(--cyan); outline-offset: 5px; }
.migration-decision-table { width: 100%; min-width: 42rem; border-collapse: collapse; font-size: 1rem; line-height: 1.8; text-align: left; }
.migration-decision-table caption { text-align: left; color: var(--muted); font-size: 1rem; padding-bottom: 18px; }
.migration-decision-table th, .migration-decision-table td { padding: 20px; border: 1px solid var(--line); vertical-align: top; }
.migration-decision-table thead th { color: var(--cyan); background: #111c29; font-weight: 600; }
.migration-decision-table tbody th { width: 27%; color: var(--ink); background: #131522; font-weight: 500; }
.migration-decision-table td { color: var(--muted); }
.migration-decision-table td:nth-child(2) { width: 36%; }
.migration-validation-reference { margin-top: 30px; padding: 24px; border-left: 2px solid var(--cyan); background: #111b28; }
.migration-validation-reference h3 { font-size: 1.2rem; line-height: 1.5; margin-bottom: 12px; }
.migration-validation-reference p { font-size: 1rem; line-height: 1.8; margin-bottom: 12px; }
.migration-validation-reference .text-link { display: inline-block; min-height: 44px; padding-block: 9px; font-size: 1rem; line-height: 1.7; }
.article-narrative { max-width: 54rem; }
.article-narrative p, .article-takeaway p { font-size: 1.0625rem; line-height: 1.9; }
.article-narrative blockquote { margin: 30px 0 0; padding: 24px 28px; border-left: 3px solid var(--purple); background: #171525; color: var(--ink); font-size: 1.25rem; line-height: 1.7; }
.article-takeaway { margin-top: 34px; padding: 30px; border: 1px solid #67507e; background: #171525; }
.article-takeaway h3 { margin: 8px 0 16px; font-size: 1.45rem; line-height: 1.5; }
.article-takeaway p:last-child { margin-bottom: 0; }

/* Stack before long headings or enlarged copy create cramped columns. Avoid
   fixed widths on facts and keep the link's full label readable on mobile. */
@media (max-width: 62.5rem) {
  .impact-grid-with-migration { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}
@media (max-width: 48rem) {
  .experience-migration { grid-template-columns: minmax(0, 1fr); padding: 24px; gap: 24px; }
  .experience-migration h3 { font-size: 1.55rem; }
  .experience-migration-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: 0; border-top: 1px solid var(--line); padding: 22px 0 0; gap: 20px; }
  .migration-flow { padding: 22px 18px; }
  .migration-flow-node { padding: 20px 16px; }
  .migration-flow-branches { grid-template-columns: minmax(0, 1fr); padding: 18px 0; gap: 16px; border-block: 1px solid #8190a9; }
  .migration-flow-branches::before, .migration-flow-branches::after, .migration-flow-route::before, .migration-flow-route::after { content: none; }
  .migration-flow-alternative { display: block; text-align: center; font-size: .875rem; line-height: 1.7; margin: 0; }
  .migration-flow-validation { padding: 22px 18px; }
  .migration-flow-validation > div { grid-template-columns: minmax(0, 1fr); }
  .migration-validation-reference { padding: 22px; }
  .migration-page .assessment-entry-link { display: block; margin: 12px 0 0; width: fit-content; }
}
@media (max-width: 45rem) {
  .impact-grid-with-migration { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 24rem) {
  .experience-migration-facts { grid-template-columns: minmax(0, 1fr); }
}
@media print {
  .experience-migration, .migration-flow, .migration-decision-table tr { break-inside: avoid; }
  .migration-table-wrap { overflow: visible; }
  .migration-decision-table { min-width: 0; }
}