/* LAYOUT LAB (preview only). Options are switched with body[data-layout] = a | b | c. No attribute = current live design. */

/* shared by A, B, C: readable measure, ~66 characters, centered. Library stays wide for its card grid. */
body[data-layout] .panel:not(#p-library) > :not(.hero) { max-width: 720px; margin-left: auto; margin-right: auto; }
body[data-layout] .panel:not(#p-library) .prose p { max-width: none; }
body[data-layout] .prose > p:first-child { font-size: 1.14em; line-height: 1.55; }
body[data-layout] .tag { margin-bottom: 22px; }

/* A: Roomier. Same page, more air, lead sentence of every step stands out so skimmers can stop there. */
body[data-layout="a"] .step { padding: 38px 0; gap: 18px; }
body[data-layout="a"] .step-body > h3 + p { font-weight: 600; font-size: 1.06em; }
body[data-layout="a"] .step-body p { margin-bottom: 1.15em; }
body[data-layout="a"] .step h3 { font-size: clamp(22px, 3.4vw, 28px); }

/* B and C: each step is its own card, so the page reads as a stack of small things, not one long scroll. */
body[data-layout="b"] .steps, body[data-layout="c"] .steps { display: grid; gap: 14px; margin-top: 22px; }
body[data-layout="b"] .step, body[data-layout="c"] .step {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px 24px;
  grid-template-columns: 34px minmax(0, 1fr); gap: 16px; box-shadow: 0 1px 0 rgba(0,0,0,.03);
}
body[data-layout="b"] .step:last-child, body[data-layout="c"] .step:last-child { border-bottom: 1px solid var(--line); }
body[data-layout="b"] .step.done, body[data-layout="c"] .step.done { background: var(--sun-soft); }
body[data-layout="b"] .step h3, body[data-layout="c"] .step h3 { font-size: clamp(20px, 3vw, 24px); }
body[data-layout="b"] .step-body > h3 + p, body[data-layout="c"] .step-body > h3 + p { font-weight: 600; }
body[data-layout="b"] .ess, body[data-layout="c"] .ess { border-left: 6px solid var(--sun); border-radius: 12px; }
@media (max-width: 520px) {
  body[data-layout="b"] .step, body[data-layout="c"] .step { padding: 18px 16px 20px; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; border-radius: 14px; }
}

/* C: fold-outs. First paragraph always visible; the rest opens on tap. */
.more { display: block; }
.morebtn2 { display: none; }
body[data-layout="c"] .more:not(.open) { display: none; }
body[data-layout="c"] .morebtn2 {
  display: inline-flex; align-items: center; gap: 8px; margin: 22px 0 0;
  font: 700 14px/1 var(--font-ui); color: var(--storm); background: none; border: 1.5px solid var(--line);
  border-radius: 999px; padding: 10px 16px; cursor: pointer;
}
body[data-layout="c"] .morebtn2::after { content: "+"; font-size: 18px; line-height: 1; }
body[data-layout="c"] .morebtn2[aria-expanded="true"]::after { content: "\2212"; }
@media print { .more { display: block !important; } .morebtn2 { display: none !important; } }

/* even spacing around Keep reading: 22px above in both states, and the card padding below */
body[data-layout="c"] .step-body > p:first-of-type { margin-bottom: 1em; }
body[data-layout="c"] .more:not(.open) + .morebtn2 { margin-top: 6px; }
body[data-layout="c"] .more.open { margin-top: 0; }
body[data-layout="c"] .more.open + .morebtn2 { margin-top: 22px; }

/* "keep" paragraphs stay visible when a step is folded */
.only-c { display: none; }
body[data-layout="c"] .only-c { display: inline; }
body[data-layout="c"] .not-c { display: none; }
.keep { background: var(--sun-soft); border-radius: 10px; padding: 10px 14px; font-size: .95em; }

.note.keep.dl { background: var(--surface); padding: 18px 22px; font-size: 1em; }
#res-note { scroll-margin-top: calc(var(--hdr, 96px) + var(--chips, 56px) + 8px); }