#bike-builder-app{min-height:100svh}
.builder-shell{min-height:100svh;display:flex;flex-direction:column;padding:0 clamp(1rem,2vw,1.75rem) clamp(1.25rem,3vw,2.25rem)}
.builder-header{min-height:5rem;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;flex:0 0 auto}
.builder-progress,.builder-exit{color:var(--nav);font-size:.75rem;line-height:1}.builder-progress{letter-spacing:.04em}
.builder-header-actions{justify-self:end;display:flex;align-items:center;gap:clamp(.75rem,2vw,1.25rem)}.builder-exit{transition:color 160ms ease}.builder-exit:hover{color:var(--foreground)}
.question-stage{width:min(100%,45rem);min-height:calc(100svh - 7.25rem);margin:0 auto;display:grid;grid-template-rows:1fr auto;animation:question-in 220ms ease both}
.builder-question{display:flex;min-height:0;flex-direction:column;justify-content:center;padding:clamp(2rem,5vh,4.5rem) 0 2rem}
.question-heading{max-width:43rem}.question-heading h1,.completion-screen h1,.results-heading h1{margin-top:.9rem;font-size:clamp(2.25rem,4.4vw,4rem);font-weight:400;letter-spacing:-.065em;line-height:.96;text-wrap:balance}
.question-support{margin-top:1.1rem;color:var(--body-copy);font-size:.9375rem;line-height:1.5}
.answer-list{display:grid;grid-template-columns:1fr;gap:0;margin-top:clamp(1.75rem,4vh,2.75rem);border-top:1px solid var(--line)}
.answer-option{width:100%;min-height:3.5rem;padding:.9rem .25rem;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;display:flex;align-items:center;justify-content:space-between;gap:1rem;text-align:left;font-size:.9375rem;cursor:pointer;transition:padding 150ms ease,background-color 150ms ease,color 150ms ease}
.answer-option:hover{padding-inline:.75rem;background:var(--surface);border-color:var(--nav)}.answer-option[aria-checked="true"]{padding-inline:.75rem;background:var(--selected);color:var(--selected-text)}
.answer-marker{width:.45rem;height:.45rem;flex:0 0 auto;border:1px solid currentColor;border-radius:50%;opacity:.4}.answer-option[aria-checked="true"] .answer-marker{background:currentColor;opacity:1}
.builder-navigation{min-height:4.5rem;margin-bottom:clamp(1.5rem,4vh,2.75rem);border-top:1px solid var(--line);display:flex;align-items:flex-end;justify-content:space-between}
.example-build-button{justify-self:end;min-width:12.5rem;min-height:2.75rem;margin-top:-1.5rem;padding:.75rem 1.25rem;border:1px solid var(--line);border-radius:.25rem;background:transparent;color:var(--foreground);font-size:.8125rem;cursor:pointer;transition:border-color 150ms ease,background-color 150ms ease}
.example-build-button:hover{border-color:var(--foreground);background:var(--surface)}
.text-button{padding:.75rem 0;border:0;background:none;color:var(--nav);font-size:.8125rem;cursor:pointer}
.continue-button{min-width:8.5rem;min-height:2.75rem;padding:.75rem 1.25rem;border:1px solid var(--foreground);border-radius:.25rem;background:var(--foreground);color:var(--background);font-size:.8125rem;cursor:pointer;transition:opacity 150ms ease,background-color 150ms ease}
.continue-button:disabled{opacity:.22;cursor:not-allowed}.continue-button:not(:disabled):hover{opacity:.72}
.height-control{margin-top:clamp(2.5rem,7vh,5rem)}.unit-switch{display:flex;gap:.4rem}.unit-switch button{padding:.45rem .65rem;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--muted);font-size:.75rem;cursor:pointer}
.unit-switch button.active{border-color:var(--line);background:var(--surface);color:var(--foreground)}
.height-field{width:fit-content;margin-top:1rem;display:flex;align-items:baseline;gap:.75rem;border-bottom:1px solid var(--nav)}
.height-field input{width:8rem;padding:.25rem 0;border:0;outline:0;background:transparent;color:var(--foreground);font-size:clamp(3.75rem,9vw,6.5rem);font-weight:400;letter-spacing:-.07em;line-height:1}.height-field input::placeholder{color:var(--line)}
.height-field span:last-child{color:var(--muted);font-size:.875rem}.imperial-fields{display:flex;gap:1.5rem}.imperial-fields .height-field input{width:5rem}
.metric-height{width:min(100%,35rem);margin-top:1.25rem}.compact-height-field{min-width:10rem;margin:0;padding:.65rem .9rem;border:1px solid var(--line);border-radius:.35rem;align-items:center}.compact-height-field:focus-within{border-color:var(--foreground)}
.compact-height-field input{width:6.5rem;padding:0;font-size:2rem;letter-spacing:-.045em;line-height:1}.height-slider-label{margin-top:2rem;display:block}
.height-slider{width:100%;height:1.5rem;margin:0;appearance:none;background:transparent;cursor:pointer}.height-slider::-webkit-slider-runnable-track{height:2px;border-radius:999px;background:var(--line)}
.height-slider::-webkit-slider-thumb{width:1.125rem;height:1.125rem;margin-top:-.5rem;appearance:none;border:2px solid var(--background);border-radius:50%;background:var(--foreground);box-shadow:0 0 0 1px var(--foreground)}
.height-slider::-moz-range-track{height:2px;border-radius:999px;background:var(--line)}.height-slider::-moz-range-thumb{width:1.125rem;height:1.125rem;border:2px solid var(--background);border-radius:50%;background:var(--foreground);box-shadow:0 0 0 1px var(--foreground)}
.slider-range{margin-top:.25rem;display:flex;justify-content:space-between;color:var(--muted);font-size:.6875rem}
.completion-screen{flex:1;width:min(100%,45rem);margin:0 auto;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding-bottom:4rem}.completion-screen>p:not(.eyebrow){max-width:31rem;margin-top:1.35rem;color:var(--body-copy);font-size:.9375rem;line-height:1.55}.completion-screen .continue-button{margin-top:2.25rem}
.results-screen{width:min(100%,52rem);margin:auto;padding:clamp(2rem,5vh,4rem) 0}.results-heading{margin-bottom:1.75rem}.results-heading>p:last-child{max-width:36rem;margin-top:1.1rem;color:var(--body-copy);font-size:.9375rem;line-height:1.55}
.answer-summary{margin-bottom:clamp(3.5rem,8vh,6rem);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.answer-summary summary{padding:.85rem 0;color:var(--muted);font-size:.75rem;cursor:pointer;list-style-position:inside}
.build-summary{border-top:1px solid var(--line)}.build-summary div{min-height:3.25rem;padding:.75rem 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(6rem,.35fr) 1fr;align-items:center;gap:1rem}.build-summary div:last-child{border-bottom:0}
.build-summary dt{color:var(--muted);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase}.build-summary dd{font-size:.9375rem}
.build-sheet{border-top:1px solid var(--line)}.recommendation-section{padding:clamp(2.25rem,5vw,3.75rem) 0;border-bottom:1px solid var(--line)}.recommendation-category{color:var(--muted);font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.recommendation-value{margin-top:1rem}.recommendation-value h2{margin:0;font-size:clamp(1.65rem,3vw,2.35rem);font-weight:400;letter-spacing:-.045em;line-height:1.05}.recommendation-explanation{max-width:42rem;margin-top:1.15rem;color:var(--body-copy);font-size:.9375rem;line-height:1.6}
.specification-list{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}.specification-list div{min-width:0}.specification-list dt{color:var(--muted);font-size:.6875rem;letter-spacing:.07em;text-transform:uppercase}.specification-list dd{margin-top:.55rem;font-size:clamp(1.1rem,2vw,1.4rem);letter-spacing:-.025em;line-height:1.2}
.results-footer{margin-top:2.5rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}.results-footer p{color:var(--body-copy);font-size:.8125rem}
.component-checklist{margin-top:clamp(4.5rem,10vh,7.5rem)}.component-checklist-heading{padding-bottom:1.5rem;display:flex;align-items:flex-end;justify-content:space-between;gap:2rem}.component-checklist-heading h2{max-width:30rem;margin:.8rem 0 0;font-size:clamp(1.75rem,3vw,2.5rem);font-weight:400;letter-spacing:-.045em;line-height:1.05}
.build-completeness{flex:0 0 auto;color:var(--foreground);font-size:.8125rem;line-height:1.45;text-align:right}.build-completeness span{display:block;color:var(--muted);font-size:.6875rem;letter-spacing:.07em;text-transform:uppercase}
.component-list{margin:0;padding:0;border-top:1px solid var(--line);list-style:none}.component-row{min-height:5.25rem;padding:1rem 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:2.75rem minmax(9rem,.42fr) 1fr;align-items:center;gap:1rem}
.component-number{color:var(--muted);font-size:.6875rem;letter-spacing:.06em}.component-name h3{margin:0;font-size:.9375rem;font-weight:400}.component-row>p{color:var(--body-copy);font-size:.875rem;line-height:1.45}
.component-state-note{max-width:42rem;margin:0 0 1.25rem;color:var(--body-copy);font-size:.875rem;line-height:1.5}.component-status-line{display:flex;align-items:center;flex-wrap:wrap;gap:.25rem;margin-top:.35rem}
.component-status{display:inline-flex;align-items:baseline;gap:.45rem;font-size:.875rem;color:var(--body-copy)}.status-dot{display:inline-block;flex:0 0 .375rem;width:.375rem;height:.375rem;border-radius:50%;background:#858581}.status-dot[data-tone="ready"]{background:#43835b}.status-dot[data-tone="waiting"]{background:#a97419}.status-dot[data-tone="conflict"]{background:#bd4545}
[data-theme="dark"] .status-dot[data-tone="ready"]{background:#80b58f}[data-theme="dark"] .status-dot[data-tone="waiting"]{background:#d5ab59}[data-theme="dark"] .status-dot[data-tone="conflict"]{background:#dc7b7b}
.information-button{width:2rem;height:2rem;display:inline-grid;place-items:center;padding:0;border:0;background:none;color:var(--body-copy);cursor:pointer;flex:0 0 auto}.information-button span{display:grid;place-items:center;width:1.1rem;height:1.1rem;border:1px solid currentColor;border-radius:50%;font:.75rem Georgia,serif}.information-button:hover,.information-button[aria-expanded="true"]{color:var(--foreground)}
.technical-panel{grid-column:2/-1;min-width:0;margin-top:.5rem;padding:clamp(1rem,3vw,1.5rem);border:1px solid var(--line);background:var(--surface)}.technical-panel header{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}.technical-panel h4{margin:0;font-size:1rem;font-weight:500}.technical-close{padding:.5rem 0;border:0;background:none;color:var(--body-copy);font-size:.875rem;cursor:pointer}.technical-panel h5{margin:1.25rem 0 .4rem;font-size:.875rem;font-weight:600}.technical-panel p,.technical-panel li{color:var(--body-copy);font-size:1rem;line-height:1.55}.technical-panel ul{margin:0;padding-left:1.1rem}.technical-panel li+li{margin-top:.5rem}.technical-panel a{text-decoration:underline;text-underline-offset:.2em;overflow-wrap:anywhere}
@keyframes question-in{from{opacity:0;transform:translateY(.35rem)}to{opacity:1;transform:translateY(0)}}
@media(max-width:48rem){.builder-header{min-height:4.5rem}.question-stage{min-height:calc(100svh - 5.75rem)}.builder-question{justify-content:flex-start;padding-top:clamp(2.5rem,8vh,5rem)}}
@media(max-width:38rem){.builder-shell{padding-inline:1rem}.answer-list{margin-top:2rem}.question-heading h1,.completion-screen h1,.results-heading h1{font-size:clamp(2.15rem,10.5vw,3.2rem)}.builder-navigation{position:sticky;bottom:0;margin-bottom:0;padding-bottom:max(0rem,env(safe-area-inset-bottom));background:var(--background)}.example-build-button{width:100%;margin-top:.75rem}.results-footer{align-items:flex-start;flex-direction:column}.results-footer .continue-button{width:100%}.specification-list{grid-template-columns:1fr;gap:1.25rem}.component-checklist-heading{align-items:flex-start;flex-direction:column;gap:1rem}.build-completeness{text-align:left}.component-row{grid-template-columns:2rem 1fr;gap:.75rem}.component-row>p{grid-column:2}.imperial-fields{gap:1rem}}