/* Shared by public and signed-in guides: preserve the captured UI's proportions. */
/* The moving guide is shared by the public reader and the signed-in help card. */
.help-article-body.migration-guide, body.bg-app .help-article-body.migration-guide { max-width:none; }
.migration-guide .migration-nav { display:flex; flex-wrap:wrap; gap:var(--space-3) var(--space-6); padding-block:var(--space-5); border-block:1px solid var(--border); font-size:var(--fs-sm); }
.migration-nav a { text-decoration:none; }
.migration-guide .migration-overline { margin:0 0 var(--space-3); color:var(--site-kicker,var(--gold-deep)); font-size:var(--fs-xs); font-weight:600; text-transform:uppercase; letter-spacing:.08em; }
.migration-guide h2, body.bg-app .help-article-body.migration-guide h2 { margin:0 0 var(--space-5); padding:0; border:0; font-family:var(--font-display); font-weight:var(--font-display-weight); font-size:clamp(30px,3.6vw,46px); line-height:1.12; letter-spacing:-.025em; text-wrap:balance; overflow-wrap:anywhere; }
.migration-guide h3, body.bg-app .help-article-body.migration-guide h3 { margin:0 0 var(--space-3); font-size:var(--fs-md,var(--fs-h3)); line-height:1.4; font-weight:600; }
.migration-guide p { margin:0 0 var(--space-4); line-height:1.75; }
.migration-guide :is(article,li) > p:last-child { margin-bottom:0; }
.migration-opening { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); align-items:center; gap:var(--space-8); margin-block:var(--space-8); }
.migration-opening-copy > p:not(.migration-overline) { max-width:48ch; color:var(--text-muted); }
.migration-guide .migration-fact { font-size:var(--fs-sm); }
.help-article-body.migration-guide .migration-button { max-width:100%; min-height:44px; white-space:normal; text-align:center; }
.migration-button .bg-icon { flex:none; }
.migration-guide .migration-screen { margin:0; min-width:0; padding:clamp(16px,2.7vw,32px); background:var(--stage-sage,var(--sand-100)); border-radius:var(--r-xl); }
.migration-screen img { display:block; width:100%; height:auto; border-radius:var(--r-md); box-shadow:var(--shadow-pop); }
.migration-screen figcaption { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-2) var(--space-4); margin-top:var(--space-4); color:var(--text-muted); font-size:var(--fs-xs); line-height:1.6; }
.migration-routes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-7); padding-block:var(--space-7); border-block:1px solid var(--border); }
.migration-routes article { min-width:0; }
.migration-routes p:not(.migration-overline), .migration-routes a { font-size:var(--fs-sm); }
.migration-guide .migration-small { margin-top:var(--space-4); color:var(--text-muted); font-size:var(--fs-sm); }
.migration-guide .migration-chapter { margin-top:clamp(64px,7vw,96px); }
.migration-section-head { display:flex; justify-content:space-between; align-items:flex-end; gap:var(--space-6); margin-bottom:var(--space-7); }
.migration-section-head > div { min-width:0; max-width:min(100%,64ch); }
.migration-section-head p:last-child { margin-bottom:0; color:var(--text-muted); }
.migration-section-head .migration-button { flex:none; margin-bottom:var(--space-1); }
.migration-guide .migration-sheet { margin:0; border:1px solid var(--border); border-radius:var(--r-xl); background:var(--bg-panel); overflow:hidden; box-shadow:var(--shadow-sm); }
.migration-sheet-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-4); padding:var(--space-5) var(--space-6); background:var(--sand-50); }
.migration-sheet-head strong { display:block; overflow-wrap:anywhere; font-size:var(--fs-sm); }
.migration-sheet-head small { display:block; margin-top:var(--space-1); font-size:var(--fs-xs); color:var(--text-muted); }
.migration-sheet-count { max-width:100%; padding:var(--space-2) var(--space-3); border:1px solid var(--border); border-radius:var(--r-pill); color:var(--text-muted); font-size:var(--fs-xs); }
.migration-table-scroll { max-width:100%; overflow-x:auto; scrollbar-width:thin; }
.migration-guide .migration-table-scroll table { width:100%; min-width:880px; margin:0; border-collapse:collapse; font-size:var(--fs-sm); text-align:left; line-height:1.6; }
.migration-table-scroll :is(th,td) { padding:var(--space-4) var(--space-5); border:0; border-bottom:1px solid var(--border); vertical-align:middle; white-space:nowrap; }
.migration-table-scroll thead th { font-size:var(--fs-xs); font-weight:600; background:var(--sand-25); }
.migration-table-scroll thead span { display:inline-block; margin-left:var(--space-2); color:var(--text-muted); font-size:var(--fs-xs); font-weight:400; }
.migration-table-scroll tbody th { font-weight:500; }
.migration-table-scroll tbody tr:nth-child(2) { background:var(--sand-25); }
.migration-empty { color:var(--text-muted); font-style:italic; }
.migration-sheet-foot { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-2) var(--space-5); padding:var(--space-4) var(--space-6); color:var(--text-muted); font-size:var(--fs-xs); line-height:1.6; }
.migration-sheet-foot > span:first-child { max-width:72ch; }
.migration-notes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-7); margin-top:var(--space-7); }
.migration-note-index { display:block; margin-bottom:var(--space-3); font-family:var(--font-display); font-size:var(--fs-figure-lg); color:var(--site-kicker,var(--gold-deep)); }
.migration-notes p, .migration-notes a { font-size:var(--fs-sm); }
.migration-csv { margin-top:var(--space-7); }
.migration-csv pre { max-width:100%; overflow-x:auto; padding:var(--space-5); border:1px solid var(--border); border-radius:var(--r-md); background:var(--sand-50); font-family:var(--font-mono); font-size:var(--fs-sm); line-height:1.8; }
.migration-guide .migration-steps { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-7); margin:0; padding:0; }
body.bg-app .migration-guide .migration-steps { margin:0; padding:0; }
.help-article-body.migration-guide .migration-steps > li { margin:0; padding:var(--space-6); border:1px solid var(--border); border-radius:var(--r-xl); background:var(--bg-panel); }
.migration-step-number { display:block; margin-bottom:var(--space-5); font-family:var(--font-display); font-size:clamp(36px,4vw,48px); color:var(--site-kicker,var(--gold-deep)); line-height:1; }
.migration-steps p { font-size:var(--fs-sm); }
.migration-boundaries { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-7); padding-block:var(--space-6); margin-top:var(--space-4); }
.migration-boundaries p { font-size:var(--fs-sm); color:var(--text-muted); }
.migration-boundaries strong { color:var(--ink); }
.migration-export-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 var(--space-8); align-items:start; }
.help-article-body.migration-guide .migration-export-grid .help-disclosure { margin:0; border-top:1px solid var(--border); border-bottom:0; }
.migration-export-grid summary { font-size:var(--fs-md,var(--fs-h3)); }
.migration-export-grid summary span { display:block; margin-top:var(--space-1); margin-left:var(--space-4); color:var(--text-muted); font-weight:400; font-size:var(--fs-sm); }
.migration-export-grid details > div { font-size:var(--fs-sm); }
.migration-guide .migration-finish { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-8); padding:clamp(24px,4vw,48px); border-radius:var(--r-xl); background:var(--stage-sage,var(--sand-100)); }
.migration-guide .migration-checklist { margin:0 0 var(--space-6); padding-left:var(--space-5); }
.migration-checklist li { margin-bottom:var(--space-4); line-height:1.75; font-size:var(--fs-sm); }
.migration-guide :is(.migration-table-scroll,pre):focus-visible { outline:2px solid var(--gold); outline-offset:calc(-1 * var(--space-1)); }
@media(max-width:1000px) {
 .migration-opening { grid-template-columns:minmax(0,1fr); gap:var(--space-6); }
 .migration-opening-copy { max-width:70ch; }
 .migration-opening-copy > p:not(.migration-overline) { max-width:none; }
 .migration-section-head { align-items:flex-start; flex-direction:column; }
}
@media(max-width:680px) {
 .migration-routes, .migration-notes, .migration-guide .migration-steps, .migration-boundaries, .migration-export-grid, .migration-guide .migration-finish { grid-template-columns:minmax(0,1fr); }
 .migration-routes, .migration-notes { gap:var(--space-6); }
 .migration-routes article + article { padding-top:var(--space-5); border-top:1px solid var(--border); }
 .migration-opening { margin-top:var(--space-6); }
 .migration-guide .migration-screen { padding:var(--space-2); }
 .migration-screen figcaption { padding:0 var(--space-2) var(--space-2); }
 .migration-sheet-head, .migration-sheet-foot { padding:var(--space-4); }
 .migration-sheet-head > span { max-width:100%; }
 .migration-note-index { margin-bottom:var(--space-2); }
 .migration-boundaries { gap:var(--space-3); }
 .migration-guide .migration-steps { gap:var(--space-4); }
 .migration-guide .migration-finish { gap:var(--space-5); }
}
.help-article-body .feature-shot { margin: var(--space-6) 0; max-width: 100%; }
.help-article-body .feature-shot img { display: block; width: auto; max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--r-md); }
.help-article-body .feature-shot figcaption { margin-top: var(--space-2); color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.6; }
/* a phone's screen at a phone's size (a 3x capture, shown at its own CSS width) */
.help-article-body .feature-shot--phone img { width: min(100%, 320px); }
.help-article-body .feature-shot a:focus-visible { outline: 2px solid var(--gold); outline-offset: var(--space-1); }

/* A reading surface and one shared section navigator, in either shell. */
.help-reader-grid { display: grid; grid-template-columns: minmax(0, 1fr) 230px; grid-template-areas: "body aside"; gap: clamp(32px, 5vw, 72px); align-items: start; }
.help-reader-grid > .help-article-body { grid-area: body; min-width: 0; }
.help-reader-aside { grid-area: aside; position: sticky; top: calc(var(--page-bar-h) + var(--space-8)); font-size: var(--fs-sm); max-height: calc(100dvh - var(--page-bar-h) - var(--space-8) - var(--space-8)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: var(--space-1); }
.help-reader-aside [hidden] { display: none !important; }
.help-toc { padding-bottom: var(--space-5); border-bottom: 1px solid var(--border); }
.help-toc summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-2); cursor: pointer; list-style: none; font-weight: 600; color: var(--ink); }
.help-toc summary::-webkit-details-marker { display: none; }
.help-toc[open] summary .bg-icon { transform: rotate(180deg); }
.help-toc ol { display: grid; gap: var(--space-3); list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.help-toc a { display: block; padding-left: var(--space-3); border-left: 2px solid var(--border); color: var(--text-muted); text-decoration: none; line-height: 1.5; }
.help-toc a:hover, .help-toc a[aria-current] { color: var(--gold-deep); border-color: var(--gold); }
.help-reader-aside :is(a, summary):focus-visible, .help-related a:focus-visible, .help-support a:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.help-topic-back { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-top: var(--space-5); color: var(--gold-deep); text-decoration: none; line-height: 1.6; }
.help-topic-back span { flex: 1; }
.help-topic-back strong { display: block; margin-top: var(--space-1); color: var(--ink); font-weight: 500; }
.help-topic-back > .bg-icon { flex: none; }
.help-related { margin-top: clamp(40px, 5vw, 64px); padding-top: var(--space-6); border-top: 1px solid var(--border); }
.help-related > div { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); }
.help-related h2 { margin: 0; color: var(--ink); font-size: var(--fs-lg); }
.help-related > div > a { font-size: var(--fs-sm); color: var(--gold-deep); text-underline-offset: 4px; }
.help-related ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin: var(--space-5) 0 0; padding: 0; list-style: none; }
.help-related li a { display: flex; align-items: start; justify-content: space-between; gap: var(--space-3); color: var(--ink); text-decoration: none; font-size: var(--fs-sm); line-height: 1.5; }
.help-related li a:hover { color: var(--gold-deep); text-decoration: underline; }
.help-related li .bg-icon { flex: none; color: var(--gold); }
.help-support { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--border); }
.help-support h2 { margin: 0; color: var(--ink); font-size: var(--fs-lg); }
.help-support .points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-5); }
.help-support .points p { margin: var(--space-1) 0 0; color: var(--text-muted); }
@media (max-width: 900px) {
    .help-reader-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "aside" "body"; gap: var(--space-6); }
    .help-reader-aside { position: static; max-height: none; overflow: visible; padding: 0; }
    .help-reader-aside .help-topic-back { display: none; }
    .help-reader-aside:has(.help-toc[hidden]) { display: none; }
    .help-toc { padding: var(--space-3) var(--space-4); background: var(--sand-50); border: 1px solid var(--border); border-radius: var(--r-md); }
    .help-toc ol { margin-bottom: var(--space-3); }
    .help-related ul { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
    .help-support .points { grid-template-columns: minmax(0, 1fr); }
}

/* The short brief gives a long guide a clear starting point in either shell. */
.help-article-body .help-brief { padding: var(--space-6); margin: var(--space-6) 0 var(--space-7); background: var(--sand-50); border: 1px solid var(--border); border-radius: var(--r-lg); }
.help-article-body .help-brief:first-child { margin-top: 0; }
.help-article-body .help-brief-label { margin: 0 0 var(--space-3); color: var(--gold-deep); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.help-article-body .help-brief > p:last-child { margin: 0; font-size: var(--fs-body); line-height: 1.7; }
.help-reader .page-head h1 { max-width: 20ch; text-wrap: balance; }
.help-reader .page-head .lead { max-width: 58ch; }
.help-reader .help-article-body > h2 { padding-top: var(--space-6); border-top: 1px solid var(--border); }
.help-article-body :is(a, summary):focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.help-article-body .feature-shot--review { margin-block:var(--space-6) var(--space-7); }
.help-article-body .feature-shot--review img { width:100%; box-shadow:var(--shadow-card, var(--shadow-pop)); }
.help-article-body .help-brief--quiet { padding:var(--space-3) 0; border:0; border-radius:0; background:none; color:var(--text-muted); }
.help-article-body .help-brief--quiet p { font-size:var(--fs-sm); }
.help-article-body .help-disclosure { margin-block:var(--space-4); border-block:1px solid var(--border); }
.help-article-body .help-disclosure + .help-disclosure { border-top:0; margin-top:calc(-1 * var(--space-4)); }
.help-article-body .help-disclosure summary { padding-block:var(--space-5); color:var(--ink); cursor:pointer; font-weight:600; line-height:1.5; }
.help-article-body .help-disclosure > div { padding-bottom:var(--space-5); }
.help-article-body .help-disclosure > div > :first-child { margin-top:0; }
.help-article-body .help-disclosure > div > :last-child { margin-bottom:0; }

/* Projects: a visual field guide, with whole columns at the app's reading size. */
.help-reader-grid--editorial { display:block; }
.help-reader-grid--editorial > .help-reader-aside { display:none; }
.help-article-body.project-guide, body.bg-app .help-article-body.project-guide { max-width:none; }
.help-editorial-header { padding-bottom:var(--space-7); }
.help-reader .help-editorial-header h1 { max-width:none; font-size:clamp(44px,5.5vw,72px); line-height:1.04; letter-spacing:-.035em; overflow-wrap:anywhere; }
.help-editorial-header h1 em { color:var(--gold-deep); font-weight:inherit; }
.help-reader .help-editorial-header .lead { max-width:52ch; }
.project-guide-nav { display:flex; flex-wrap:wrap; gap:var(--space-3) var(--space-6); padding-block:var(--space-5); border-block:1px solid var(--border); font-size:var(--fs-sm); }
.project-guide-nav a { text-decoration:none; }
.project-guide .project-chapter { margin-top:clamp(64px,7vw,104px); }
.project-guide .project-chapter--opening { margin-top:var(--space-8); }
.project-chapter-head { max-width:720px; margin-bottom:var(--space-7); }
.project-guide .project-overline { margin:0 0 var(--space-3); color:var(--gold-deep); font-size:var(--fs-xs); letter-spacing:.1em; font-weight:600; text-transform:uppercase; }
.project-guide .project-chapter h2, body.bg-app .project-guide .project-chapter h2 { margin:0 0 var(--space-5); padding:0; border:0; font-family:var(--font-display); font-size:clamp(32px,3.5vw,46px); font-weight:var(--font-display-weight); line-height:1.1; letter-spacing:-.03em; text-wrap:balance; }
.project-guide .project-chapter-head > p:last-child { font-size:var(--fs-md,var(--fs-body)); line-height:1.7; margin:0; color:var(--text-muted); }
.project-guide .project-proof { --proof-tone:var(--stage-sand,var(--sand-100)); margin:0; padding:clamp(20px,4vw,48px); border-radius:var(--r-xl); background:radial-gradient(100% 100% at 0 0, var(--bg-panel), transparent), var(--proof-tone); }
.project-guide .project-proof--sage { --proof-tone:var(--stage-sage,var(--sand-100)); }
.project-guide .project-proof--sky { --proof-tone:var(--stage-sky,var(--sand-100)); }
.project-guide .project-proof--overview { padding:var(--space-5); }
.project-proof-scroll { overflow-x:auto; scrollbar-width:thin; border-radius:var(--r-md); box-shadow:var(--shadow-pop); }
.project-proof-scroll a { display:block; }
.project-proof-scroll img { display:block; width:100%; height:auto; max-width:none; }
.project-guide .project-proof figcaption { display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--space-2) var(--space-5); margin-top:var(--space-5); color:var(--text-muted); font-size:var(--fs-sm); line-height:1.6; }
.project-proof figcaption > span { max-width:65ch; }
.project-proof figcaption a { flex:none; }
.project-explanations { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-8) clamp(28px,5vw,72px); margin-top:var(--space-8); }
.project-guide .project-explanations h3, body.bg-app .project-guide .project-explanations h3 { margin:0 0 var(--space-3); font-family:var(--font-display); font-size:clamp(22px,2.3vw,28px); font-weight:var(--font-display-weight); line-height:1.2; letter-spacing:-.015em; }
.project-explanations p { margin:0 0 var(--space-4); font-size:var(--fs-body); line-height:1.75; }
.project-guide .project-transition { margin-bottom:0; color:var(--text-muted); }
.project-transition strong { display:block; margin-bottom:var(--space-1); }
.project-reading-key { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-7); margin-top:var(--space-7); }
.project-reading-key p { margin:0; color:var(--text-muted); font-size:var(--fs-sm); line-height:1.7; }
.project-reading-key strong { display:block; margin-bottom:var(--space-2); }
.project-margin-note { padding:var(--space-5) 0 var(--space-5) var(--space-6); margin-top:var(--space-7); border-left:2px solid var(--gold); font-size:var(--fs-sm); color:var(--text-muted); line-height:1.7; }
.project-guide .project-chapter--text { padding-top:var(--space-8); border-top:1px solid var(--border); }
.project-quick-guide { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-7) var(--space-8); }
.project-guide .project-quick-guide h3 { font-size:var(--fs-body); margin:0 0 var(--space-3); }
.project-quick-guide p { font-size:var(--fs-sm); line-height:1.75; margin:0; }
.project-guide .help-disclosure { margin-top:var(--space-7); }
@media (max-width:720px) {
 .project-explanations, .project-reading-key, .project-quick-guide { grid-template-columns:minmax(0,1fr); }
 .project-guide .project-proof { padding:var(--space-4); }
 .project-proof-scroll img { min-width:760px; }
 .project-proof--overview .project-proof-scroll img { min-width:1120px; }
 .project-guide .project-proof figcaption { font-size:var(--fs-xs); }
 .project-guide-nav { gap:var(--space-3) var(--space-4); }
 .project-explanations { gap:var(--space-7); }
}