/* LAB Learning Studio v1.5: editorial, local-first interactions, no external assets. */
html { scroll-padding-top: calc(var(--header-h) + 18px); }
.side-rail { overflow-y: auto; overscroll-behavior: contain; }
.page h1, .page h2 { text-wrap: balance; }
.studio-page .section-heading { max-width: 880px; margin-bottom: clamp(24px,4vw,42px); }
.studio-page .section-heading h1 { max-width: 900px; }
.studio-page .section-heading p { max-width: 740px; }
.studio-card-action, .studio-goal-number, .studio-label, .studio-path-index { font-family: var(--font-mono); }
.studio-card-action, .studio-home-goal small { color: var(--accent); font-weight: 750; }
.studio-page .secondary-button, .studio-page .primary-button { white-space: normal; }
.studio-page [aria-current="true"] { cursor: default; }

/* The first screen now answers "what should I do?" before showing the whole syllabus. */
.home-page .home-hero { min-height: clamp(395px,49vh,600px); }
.home-page .home-hero__system { min-height: 260px; }
.home-page .home-hero__copy .section-heading h1 { max-width: 740px; line-height: 1.02; }
.studio-home-wayfinder { padding: clamp(28px,4vw,48px) 0 40px; border-bottom: 1px solid var(--line); }
.studio-home-wayfinder__head { display: flex; justify-content: space-between; align-items: end; gap: 22px; margin-bottom: 24px; }
.studio-home-wayfinder__head h2 { font-size: clamp(1.75rem,3vw,2.7rem); margin: 11px 0 9px; letter-spacing: -.048em; }
.studio-home-wayfinder__head p { max-width: 600px; font-size: 14px; margin: 0; }
.studio-home-wayfinder__head .quiet-link { flex: 0 0 auto; }
.studio-home-goals { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 9px; }
.studio-home-goal { min-width: 0; min-height: 150px; display: flex; flex-direction: column; align-items: start; justify-content: space-between; padding: clamp(14px,1.8vw,24px); background: var(--surface); border: 1px solid var(--line); transition: transform .18s ease,border-color .18s ease,background .18s ease; }
.studio-home-goal > span { font: 750 12px/1 var(--font-mono); color: var(--accent); }
.studio-home-goal strong { font-size: clamp(13px,1.2vw,17px); line-height: 1.2; }
.studio-home-goal small { font-size: 11px; }
.studio-home-goal:hover { transform: translateY(-3px); border-color: var(--accent); background: var(--bg-elevated); }
.studio-home-lab { display: grid; grid-template-columns: minmax(0,.65fr) minmax(0,1fr); align-items: center; gap: clamp(24px,4vw,55px); padding: clamp(36px,5vw,66px) 0; border-bottom: 1px solid var(--line); }
.studio-home-lab__intro h2 { max-width: 500px; margin: 16px 0; font-size: clamp(1.85rem,3.2vw,3.5rem); letter-spacing: -.055em; line-height: 1.05; }
.studio-home-lab__intro p { max-width: 500px; }
.studio-home-lab__intro .secondary-button { margin-top: 12px; }
.studio-home-lab .studio-compare { margin: 0; }
.studio-home-lab .studio-compare-head h2 { font-size: 1.3rem; }
.studio-home-next { padding: clamp(40px,6vw,80px) 0; display: flex; gap: 24px; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.studio-home-next h2 { font-size: clamp(1.8rem,3vw,3.1rem); max-width: 670px; margin: 10px 0; }
.studio-home-next p { max-width: 580px; margin: 0; }
.studio-home-next__actions { display: grid; align-content: center; justify-items: start; gap: 10px; min-width: 210px; }

/* Switchable learning goals. */
.studio-goal-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; }
.studio-goal-card { display: flex; flex-direction: column; gap: 12px; min-height: 226px; border: 1px solid var(--line); background: var(--surface); padding: clamp(16px,2vw,25px); transition: transform .16s ease, border-color .16s ease; }
.studio-goal-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.studio-goal-card.is-selected { border-color: var(--accent); box-shadow: inset 0 3px var(--accent); }
.studio-goal-number { color: var(--accent); font-size: 12px; }
.studio-goal-card strong { font-size: clamp(16px,1.4vw,19px); letter-spacing: -.025em; line-height: 1.22; }
.studio-goal-card p { font-size: 12px; line-height: 1.5; margin: 0; }
.studio-card-action { font-size: 11px; margin-top: auto; }
.studio-path-detail { display: grid; grid-template-columns: minmax(210px,.65fr) minmax(0,1.35fr); gap: clamp(28px,5vw,70px); padding: clamp(32px,5vw,60px) 0; border-bottom: 1px solid var(--line); }
.studio-path-header h2 { font-size: clamp(2rem,4vw,4.4rem); line-height: 1; letter-spacing: -.052em; margin: 18px 0; }
.studio-path-header p { max-width: 450px; }
.studio-path-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.studio-path-steps li { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.studio-path-index { color: var(--accent); font-size: 12px; }
.studio-path-steps li strong { display: block; font-size: clamp(14px,1.5vw,18px); }
.studio-path-steps li small { display: block; color: var(--text-3); margin-top: 4px; }
.studio-path-detail > .micro-note { grid-column: 2; margin: -6px 0 0; }
.studio-end-link { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 28px 0; }

/* Lesson and chapter examples. Reveal is deliberate; no automated content claims. */
.studio-compare { max-width: 950px; margin: 34px 0; border: 1px solid var(--line); background: var(--surface); padding: clamp(18px,2.8vw,30px); min-width: 0; }
.studio-compare-head h2 { font-size: clamp(1.45rem,2.3vw,2.1rem); margin: 12px 0 8px; }
.studio-compare-head p { margin-bottom: 22px; font-size: 13px; }
.studio-compare-grid { display: flex; gap: 10px; align-items: stretch; }
.studio-compare-grid > div { min-width: 0; flex: 1; padding: clamp(15px,2vw,23px); background: var(--bg-elevated); border: 1px solid var(--line); }
.studio-compare-grid > .studio-compare-best { border-color: color-mix(in srgb,var(--signal) 45%,var(--line)); background: color-mix(in srgb,var(--signal) 7%,var(--surface)); animation: studio-reveal .28s ease-out both; }
.studio-label { display: block; font-size: 11px; font-weight: 750; letter-spacing: .04em; color: var(--text-3); margin-bottom: 12px; }
.studio-label--good { color: var(--text); }
.studio-compare-grid p { color: var(--text); font-size: clamp(13px,1.25vw,15px); line-height: 1.7; margin: 0; overflow-wrap: anywhere; }
.studio-compare-why { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 14px; }
.studio-compare-why strong { font-size: 11px; }
.studio-compare-why p { color: var(--text-2); font-size: 12px; margin-top: 6px; }
.studio-compare-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.studio-inline-feedback { color: var(--text-3); font-size: 12px; }
.studio-compare--compact .studio-compare-head h2 { font-size: clamp(1.3rem,2vw,1.75rem); }
.studio-challenge { max-width: 950px; padding: clamp(20px,3vw,34px); background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); margin: 22px 0 44px; }
.studio-challenge-title h2 { font-size: clamp(1.4rem,2.6vw,2rem); margin: 12px 0; }
.studio-challenge-title p { max-width: 700px; }
.studio-response-label, .studio-field { display: grid; gap: 7px; }
.studio-response-label > span, .studio-field > span { font-size: 12px; font-weight: 750; }
.studio-response-label textarea { width: 100%; min-height: 116px; }
.studio-tip { border-top: 1px solid var(--line); margin-top: 16px; padding: 10px 0; }
.studio-tip summary { cursor: pointer; color: var(--text-2); font-weight: 650; font-size: 12px; }
.studio-tip p { margin: 8px 0; font-size: 12px; }
.studio-challenge-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.studio-challenge-feedback { color: var(--text-3); font-size: 12px; margin: 14px 0 0; }
.studio-challenge-actions button:disabled { opacity: .48; cursor: not-allowed; }
.studio-hub-cta, .studio-progress-sprints { display: flex; gap: 24px; align-items: center; justify-content: space-between; padding: clamp(22px,3vw,32px); border: 1px solid var(--line); background: var(--surface); margin: 28px 0 38px; }
.studio-hub-cta h2, .studio-progress-sprints h2 { font-size: clamp(1.35rem,2.1vw,2.1rem); margin: 10px 0; }
.studio-hub-cta p, .studio-progress-sprints p { max-width: 750px; font-size: 13px; margin: 0; }
.studio-hub-cta .button-row { flex: 0 0 auto; }
.studio-progress-sprints { margin: 20px 0; }

/* Interactive prompt maker. */
.studio-recipe-row, .studio-guide-picker { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 26px; }
.studio-recipe, .studio-guide-picker a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 15px; color: var(--text-2); background: var(--surface); border: 1px solid var(--line); border-radius: 2px; font-size: 13px; font-weight: 700; }
.studio-recipe.is-active, .studio-guide-picker a.is-active { color: var(--text); border-color: var(--accent); box-shadow: inset 0 -3px var(--accent); }
.studio-maker-grid { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(14px,3vw,38px); align-items: start; }
.studio-maker-form { min-width: 0; display: grid; gap: 16px; padding: clamp(20px,3vw,35px); background: var(--surface); border: 1px solid var(--line); }
.studio-field textarea { min-height: 78px; resize: vertical; }
.studio-maker-preview { position: sticky; top: calc(var(--header-h) + 16px); min-width: 0; background: var(--bg-elevated); border: 1px solid var(--line-strong); padding: clamp(17px,2.3vw,26px); }
.studio-preview-top { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; }
.studio-preview-top > span:last-child { color: var(--text-3); font-size: 11px; }
.studio-prompt-output { white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.65 var(--font-mono); color: var(--text); background: var(--surface); padding: clamp(16px,2vw,26px); border: 1px solid var(--line); margin: 20px 0 15px; max-height: 470px; overflow-y: auto; }
.studio-feedback { margin: 14px 0 0; font-size: 12px; }
.studio-check-strip { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 25px 0 clamp(38px,5vw,65px); }
.studio-check-strip strong { margin-right: 10px; font-size: 12px; }
.studio-check-strip span { padding: 9px 12px; font-size: 12px; border: 1px solid var(--line); background: var(--surface); }
.studio-after-lab { display: flex; justify-content: space-between; align-items: end; gap: 24px; border-top: 1px solid var(--line); padding: clamp(30px,5vw,55px) 0; }
.studio-after-lab h2 { font-size: var(--fs-5); margin: 12px 0; }
.studio-after-lab .button-row { flex: 0 0 auto; }

/* Illustrative tutorials: explicitly schematic, not copied product screenshots. */
.studio-guide-layout { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(22px,4vw,55px); align-items: start; border-block: 1px solid var(--line); padding: clamp(24px,4vw,50px) 0; }
.studio-guide-main h2 { font-size: clamp(2rem,4vw,3.6rem); margin: 15px 0; }
.studio-guide-main > p { max-width: 580px; }
.studio-step-buttons { display: grid; gap: 8px; margin-top: 26px; }
.studio-step-buttons button { width: 100%; display: grid; grid-template-columns: 32px 1fr; gap: 12px; text-align: left; align-items: center; min-height: 56px; background: var(--surface); border: 1px solid var(--line); padding: 12px 15px; }
.studio-step-buttons button.is-active { border-left: 3px solid var(--accent); padding-left: 13px; background: var(--accent-soft); }
.studio-step-buttons button span { font: 750 12px/1 var(--font-mono); color: var(--accent); }
.studio-step-buttons button strong { font-size: 13px; }
.studio-guide-status { margin: 18px 0 24px; min-height: 48px; color: var(--text); }
.studio-demo-browser { background: #1a1e23; color: #e8ebe9; border: 1px solid #484e54; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-2); }
.studio-demo-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #242930; color: #d2d3cf; border-bottom: 1px solid #454e55; padding: 12px 16px; font-size: 10px; }
.studio-demo-top span { color: #e88a74; letter-spacing: .38em; }
.studio-demo-top strong { font-weight: 700; }
.studio-demo-content { display: grid; gap: 12px; padding: clamp(16px,3vw,32px); }
.studio-demo-piece { min-height: 88px; display: flex; align-items: center; gap: 17px; padding: 18px; color: #b3b9be; border: 1px solid #414b52; background: #22282d; transition: border-color .25s ease,background .25s ease,transform .25s ease; }
.studio-demo-piece strong { display: block; font: 800 12px/1.4 var(--font-mono); letter-spacing: .05em; }
.studio-demo-piece small { display: block; margin-top: 5px; font-size: 12px; }
.studio-demo-dot { width: 31px; height: 31px; flex: 0 0 31px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #626d75; font: 750 12px/1 var(--font-mono); }
.studio-demo-browser[data-focus="menu"] .studio-demo-piece--menu, .studio-demo-browser[data-focus="input"] .studio-demo-piece--input, .studio-demo-browser[data-focus="reply"] .studio-demo-piece--reply { border-color: #ffae87; background: #31343a; color: #fff; transform: translateX(4px); }
.studio-demo-browser[data-focus="menu"] .studio-demo-piece--menu .studio-demo-dot, .studio-demo-browser[data-focus="input"] .studio-demo-piece--input .studio-demo-dot, .studio-demo-browser[data-focus="reply"] .studio-demo-piece--reply .studio-demo-dot { background: #ff704d; color: #1c1f21; border-color: #ff704d; }
.studio-visual-disclaimer { margin-top: 12px; font-size: 11px; }
.studio-guide-copy { padding: clamp(24px,5vw,50px) 0; }
.studio-guide-copy h2 { margin: 10px 0 18px; font-size: var(--fs-4); }
.studio-guide-example { max-width: 820px; background: var(--surface); border: 1px solid var(--line); padding: 24px; color: var(--text); line-height: 1.65; font-size: 14px; }

/* Real author projects, no invented testimonials or success figures. */
.studio-case-list { display: grid; gap: clamp(24px,5vw,56px); }
.studio-case { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); gap: clamp(22px,4vw,48px); padding: clamp(22px,3.4vw,38px); background: var(--surface); border: 1px solid var(--line); align-items: center; }
.studio-case:nth-child(even) .studio-case-body { order: 2; }
.studio-case-body h2 { font-size: clamp(2.25rem,4vw,4.2rem); letter-spacing: -.06em; margin: 18px 0 12px; }
.studio-case-body > p { font-size: 15px; max-width: 590px; }
.studio-case-flow { display: flex; flex-wrap: wrap; gap: 7px; margin: 24px 0; }
.studio-case-flow span { border: 1px solid var(--line); background: var(--bg-elevated); padding: 7px 10px; font: 700 10px/1.4 var(--font-mono); }
.studio-case-lesson { max-width: 500px; padding-left: 16px; border-left: 2px solid var(--accent); margin-bottom: 28px; }
.studio-case-lesson strong { font-size: 13px; }
.studio-case-lesson p { font-size: 13px; margin: 7px 0 0; }
.studio-case-visual { margin: 0; min-width: 0; }
.studio-case-visual img { display: block; width: 100%; aspect-ratio: 1.42/1; object-fit: cover; object-position: center; background: var(--surface-2); border: 1px solid var(--line); }
.studio-case-visual figcaption { font-size: 10px; color: var(--text-3); margin-top: 10px; }
.studio-case-mural { min-height: 330px; position: relative; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); place-items: center; gap: 18px; padding: clamp(22px,4vw,56px); background: #272927; overflow: hidden; border: 1px solid var(--line-strong); }
.studio-case-mural::before { content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 95%,#4b4b47 95%);background-size:42px 42px;opacity:.2; }
.studio-note { position: relative; width: 100%; min-height: 102px; display: grid; place-items: center; text-align: center; font-weight: 750; font-size: 13px; padding: 13px; color: #25241e; background: #f5e2a4; transform: rotate(-2deg); box-shadow: 1px 10px 15px #0003; }
.studio-note--b { background: #e2ebff; transform: rotate(2deg); }
.studio-note--c { background: #eedfdd; transform: rotate(-1deg); }
.studio-note--d { background: #d9eddc; transform: rotate(2deg); }

/* Responsive and motion. */
@keyframes studio-reveal { from {opacity:0;transform:translateY(8px);} to {opacity:1;transform:translateY(0);} }
@media (max-width: 1200px) { .studio-home-goals,.studio-goal-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 980px) {
 .studio-home-lab,.studio-maker-grid,.studio-guide-layout,.studio-path-detail { grid-template-columns: 1fr; }
 .studio-maker-preview { position: static; }
 .studio-path-detail > .micro-note { grid-column: 1; }
 .studio-home-next { align-items: start; }
}
@media (max-width: 767px) {
 .mobile-nav { grid-template-columns:repeat(6,minmax(0,1fr)); }
 .mobile-nav a { min-width: 0; }
 .mobile-nav small { font-size: 9px; letter-spacing:-.02em; }
 .mobile-nav span { font-size: 12px; }
 .studio-home-wayfinder__head, .studio-home-next, .studio-hub-cta, .studio-progress-sprints,.studio-after-lab { align-items: start; flex-direction: column; }
 .studio-home-next__actions { width: 100%; }
 .studio-home-next__actions .secondary-button { white-space: normal; }
 .studio-home-goals,.studio-goal-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .studio-home-goal { min-height: 130px; }
 .studio-goal-card { min-height: 200px; }
 .studio-case { grid-template-columns: 1fr; }
 .studio-case:nth-child(even) .studio-case-body { order: 0; }
 .studio-case-mural { min-height: 255px; }
 .studio-compare-grid { flex-direction: column; }
 .studio-recipe-row,.studio-guide-picker { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
 .studio-recipe,.studio-guide-picker a { justify-content: center; text-align: center; font-size: 12px; }
 .studio-path-steps li { grid-template-columns: 30px minmax(0,1fr); }
 .studio-path-steps li .secondary-button { grid-column:2; justify-self:start; }
 .studio-check-strip strong { flex-basis:100%; }
}
@media (max-width: 420px) {
 .studio-home-goals { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .studio-goal-grid { grid-template-columns: 1fr; }
 .studio-goal-card { min-height: 145px; }
 .studio-home-goal { padding: 13px; }
 .studio-check-strip span { width: 100%; }
 .studio-maker-form,.studio-maker-preview { padding: 16px; }
 .studio-prompt-output { font-size: 11px; }
 .studio-case-mural { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 15px; }
}
@media (prefers-reduced-motion: reduce) {
 .studio-home-goal,.studio-goal-card,.studio-demo-piece { transition:none; }
 .studio-home-goal:hover,.studio-goal-card:hover,.studio-demo-browser[data-focus] .studio-demo-piece { transform:none; }
 .studio-compare-grid > .studio-compare-best { animation:none; }
}
/* Make the choice visible sooner on narrow screens. */
@media (max-width: 767px) {
  .home-page .home-hero { padding: 32px 0 28px; }
  .home-page .home-hero__system { display: none; }
}
@media (max-width: 420px) {
  .context-copy strong { max-width: min(46vw,195px); }
}

/* Keep long prompt terminology within chapter cards on narrow screens. */
.activity-card__head h3 { overflow-wrap: anywhere; }