/* Tutorial images and controls remain legible on the computer and at the bench. */
.tutorials-page > .row-between { align-items: start; }
.tutorials-page > .row-between p { max-width: 68ch; margin-top: 12px; }
.tutorials-page .path { gap: 20px; padding: 12px 0 22px; }
.tutorials-page .path-hdr { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; row-gap: 8px; }
.tutorials-page .path-hdr .small { grid-column: 2; }
.tutorial-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }
.tutorial-grid .lcard-img { height: auto; aspect-ratio: 16 / 10; }
.tutorial-grid .lcard-img img { object-fit: contain; }
.lcard-summary { font-size: 13px; line-height: 1.5; color: var(--text2); }
.lcard-body { gap: 10px; padding: 17px; }
.lcard-body b { font-size: 16px; }
.lcard-body .pills { margin: 3px 0 7px; }
.lesson .crumbs { flex-wrap: wrap; line-height: 1.6; }
.lesson-grid { grid-template-columns: minmax(0, 1fr) 310px; gap: 28px; }
.lesson-main { gap: 23px; }
.lesson .step { flex-direction: column; gap: 18px; padding: 20px; }
.lesson .step-img { width: 100%; height: auto; aspect-ratio: 16 / 10; max-height: 480px; background: var(--deep); }
.lesson .step-img img { object-fit: contain; }
.lesson .step-body { gap: 12px; }
.lesson .step-body p { font-size: 15px; line-height: 1.7; max-width: 72ch; }
.lesson .step-body > .row:last-child { padding-top: 4px; }
.lesson .chapters { flex-wrap: wrap; overflow: visible; }
.lesson .chapter { height: auto; min-height: 38px; white-space: normal; text-align: left; padding: 8px 12px; }
.tutorial-files { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.tutorial-files h2 { font-size: 18px; line-height: 1.35; }
.tutorial-files .form-err { margin: 0; }
.tutorial-offset { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; border: 1px solid var(--blue-line); border-radius: 10px; background: var(--blue-soft); }
.tutorial-offset .seg { display: flex; flex-direction: column; width: 100%; padding: 0; gap: 6px; background: transparent; border: 0; }
.tutorial-offset .seg button { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 12px; font: 500 14px/1.3 var(--font); text-align: left; border: 1px solid var(--line); border-radius: 7px; color: var(--text); background: var(--surface); transition: background .2s, border-color .2s, box-shadow .2s; }
.tutorial-offset .seg button:hover { border-color: var(--offset-ink); }
.tutorial-offset .seg button.on { border-color: var(--offset-ink); background: color-mix(in srgb, var(--offset-color) 12%, var(--surface)); box-shadow: inset 3px 0 0 var(--offset-ink); }
.tutorial-offset .radio.on { border-color: var(--offset-ink); }
.tutorial-offset .radio.on::after { background: var(--offset-ink); }
.tutorial-file-list { display: flex; flex-direction: column; gap: 20px; }
.tutorial-file { display: flex; flex-direction: column; gap: 12px; }
.tutorial-file + .tutorial-file { border-top: 1px solid var(--line); padding-top: 20px; }
.tutorial-file-preview { display: block; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--deep); }
.tutorial-file-preview img { width: 100%; aspect-ratio: 16 / 10; object-fit: contain; }
.tutorial-file h3 { font-family: var(--font); font-size: 14px; line-height: 1.5; font-weight: 600; margin-bottom: 5px; }
.tutorial-file-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tutorial-file-actions .btn { white-space: normal; text-align: left; height: auto; min-height: 38px; }
.tutorial-file-software .tutorial-file-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
.tutorial-file-software .tutorial-file-actions .btn { width: 100%; justify-content: flex-start; }
.software-file-label { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; color: var(--blue); font: 600 19px/1.3 var(--font); }
.software-file-label svg { width: 22px; height: 22px; }
.software-file-label small { font: 500 10px/1.3 var(--font); letter-spacing: .06em; border: 1px solid var(--blue-line); border-radius: 4px; padding: 3px 5px; }
.bench-body { align-items: start; grid-template-columns: minmax(0, 1fr) 380px; }
.bench-stage { position: sticky; top: 20px; aspect-ratio: 16 / 10; min-height: 0; max-height: calc(100vh - 110px); }
.bench-image { display: flex; width: 100%; min-width: 0; cursor: zoom-in; }
.bench-stage .chip-dark { pointer-events: none; }
/* A step with no picture: the stage sends to its moment in the video. */
.bench-text { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px 24px; text-align: center; }
.bench-text p { max-width: 28ch; font-size: 22px; line-height: 1.35; color: var(--text2); text-wrap: balance; }
.bench-side { padding-top: 4px; }
.bench-side h1 { font-size: 27px; line-height: 1.22; }
.bench-side .lead { line-height: 1.7; }
.bench-actions { margin: 3px 0 0; }
.bench-side .tutorial-files { margin-top: 8px; }
.bench-side .tutorial-file { flex-direction: row; align-items: start; }
.bench-side .tutorial-file-preview { flex: 0 0 88px; }
.bench-side .tutorial-file > div { min-width: 0; }
.bench-side .tutorial-file-software { flex-direction: column; }
.bench-foot .thumbs { display: flex; overflow-x: auto; padding-bottom: 6px; }
.bench-foot .thumb { flex: 0 0 116px; height: 78px; }
.bench-foot .thumb img { object-fit: contain; }
.bench-image-dialog { width: min(1440px, 96vw); max-width: 96vw; max-height: 96vh; margin: auto; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); }
.bench-image-dialog::backdrop { background: rgba(7,15,27,.82); }
.bench-image-dialog form { display: flex; justify-content: end; margin-bottom: 12px; }
.bench-image-dialog img { width: 100%; height: auto; max-height: 82vh; object-fit: contain; }
.downloads-page > .row-between p { margin-top: 10px; max-width: 70ch; }
.download-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 22px; }
.download-grid .dl { display: flex; flex-direction: row; min-width: 0; }
.download-preview { display: block; background: var(--deep); }
.download-grid .download-preview { width: 32%; flex: 0 0 32%; display: flex; align-items: center; padding: 10px; }
.download-grid .download-preview img { width: 100%; height: auto; max-height: 260px; object-fit: contain; border-radius: 6px; }
.download-grid .dl-fitting { grid-column: 1 / -1; }
.download-grid .dl-fitting .download-preview { flex-basis: 190px; width: 190px; padding: 18px; }
/* The supplied Light and Ultra renders have the same 844 px silhouette width.
   Place both on a 977 x 917 stage, correcting Light's shorter canvas and its
   32 px bottom margin against Ultra's 104 px, without stretching or cropping. */
.download-grid .calibrator-preview, .tutorial-file-preview.calibrator-preview { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 12px; background: var(--surface2); }
.calibrator-stage { display: block; position: relative; width: 100%; aspect-ratio: 977 / 917; }
.calibrator-preview .calibrator-stage img { display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: auto; max-height: none; aspect-ratio: auto; border-radius: 0; background: transparent; }
.calibrator-preview .calibrator-light img { width: 94.2682%; bottom: 7.8517%; }
.calibrator-fitting { aspect-ratio: 1; }
.preview-offset { display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: var(--offset-ink); font-size: 12px; font-weight: 600; }
/* Offset hues follow the owner's renders. Darker ink keeps labels readable
   in the light theme; names and the selected radio remain visible in both. */
[data-offset="tight"] { --offset-color: #d98c8c; --offset-ink: #a44348; }
[data-offset="standard"] { --offset-color: #7bb7b3; --offset-ink: #246d6a; }
[data-offset="loose"] { --offset-color: #a2bc6d; --offset-ink: #506d28; }
[data-theme="dark"] [data-offset="tight"] { --offset-ink: #eea2a2; }
[data-theme="dark"] [data-offset="standard"] { --offset-ink: #8acac5; }
[data-theme="dark"] [data-offset="loose"] { --offset-ink: #b7d184; }
.offset-label { display: inline-flex; align-items: center; gap: 9px; }
.offset-swatch { display: inline-block; width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: var(--offset-color); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--offset-ink) 45%, transparent); }
.offset-value { color: var(--offset-ink); }
.downloads-page .dl-body { padding: 24px; gap: 12px; min-width: 0; }
.downloads-page .dl-body > b { font-size: 19px; line-height: 1.35; }
.downloads-page .dl-body > .small { font-size: 14px; line-height: 1.65; }
.downloads-page .dl-body > .row { flex-wrap: wrap; gap: 8px; margin-top: 5px; }
.downloads-page .dl-body .btn { white-space: normal; text-align: left; }
.downloads-page .dl-body > .mono:empty { display: none; }
.downloads-page .dl-software .software-file-label { font-size: 24px; padding-bottom: 14px; margin-bottom: 2px; border-bottom: 1px solid var(--line); }
.offset-prompt, .offset-pick .offset-prompt { display: inline-flex; align-items: center; gap: 8px; color: var(--blue); font: 600 13px/1.35 var(--font); margin-bottom: 6px; }
.offset-prompt svg { width: 17px; height: 17px; }
.tutorial-offset .offset-prompt { margin: 0; }
.offset-pick { border: 2px solid var(--blue-line); position: relative; box-shadow: 0 5px 20px color-mix(in srgb, var(--blue) 7%, transparent); }
.offset-pick.needs-choice, .tutorial-offset.needs-choice { animation: offset-attention 3.8s ease-in-out 3; }
.offset-pick .offsets { margin-top: 6px; gap: 14px; }
.offsets .off { padding: 18px; min-height: 104px; border-radius: 10px; gap: 8px; transition: border-color .22s, background .22s, box-shadow .22s, transform .22s; }
.offsets .off:hover { border-color: var(--offset-ink); transform: translateY(-2px); box-shadow: 0 5px 15px color-mix(in srgb, var(--offset-color) 18%, transparent); }
.offsets .off b { font: 600 15px/1.3 var(--font); text-transform: none; letter-spacing: 0; }
.offsets .off.on { border-color: var(--offset-ink); background: color-mix(in srgb, var(--offset-color) 12%, var(--surface)); box-shadow: inset 0 -3px 0 var(--offset-ink); }
.offsets .off .radio.on { border-color: var(--offset-ink); }
.offsets .off .radio.on::after { background: var(--offset-ink); }
.offset-pick.is-chosen { border-color: var(--line); }
@keyframes offset-attention {
  0%, 100% { border-color: var(--blue-line); box-shadow: 0 0 0 0 transparent; }
  45% { border-color: var(--blue); box-shadow: 0 0 0 5px color-mix(in srgb, var(--blue) 9%, transparent), 0 7px 25px color-mix(in srgb, var(--blue) 12%, transparent); }
  75% { border-color: var(--red-line); box-shadow: 0 0 0 2px color-mix(in srgb, var(--red) 5%, transparent); }
}
@media (max-width: 1100px) {
  .lesson-grid { grid-template-columns: minmax(0, 1fr) 270px; gap: 20px; }
  .bench-body { grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; }
}
@media (max-width: 900px) {
  .download-grid { grid-template-columns: 1fr; }
  .lesson-grid, .bench-body { grid-template-columns: 1fr; }
  .lesson-side { border-top: 1px solid var(--line); padding-top: 22px; }
  .lesson-side .tutorial-file { flex-direction: row; align-items: start; }
  .lesson-side .tutorial-file-preview { flex: 0 0 150px; }
  .lesson-side .tutorial-file-software { flex-direction: column; }
  .bench-stage { position: relative; top: 0; aspect-ratio: 16 / 10; max-height: none; }
  .bench-side .tutorial-file-preview { flex-basis: 140px; }
}
@media (max-width: 600px) {
  .tutorial-grid { grid-template-columns: 1fr; }
  .tutorials-page .path-hdr { grid-template-columns: 1fr; gap: 7px; }
  .tutorials-page .path-hdr .small { grid-column: 1; }
  .lesson .step { padding: 14px; }
  .lesson .step-img { aspect-ratio: 16 / 10; }
  .lesson .step-body h3 { font-size: 19px; line-height: 1.35; }
  .lesson-side .tutorial-file-preview, .bench-side .tutorial-file-preview { flex-basis: 100px; }
  .bench-hdr { height: auto; min-height: 62px; flex-wrap: wrap; gap: 9px; padding: 12px; }
  .bench-hdr b { flex: 1; min-width: 150px; line-height: 1.45; }
  .bench-hdr .right { margin-left: 0; }
  .bench-stage .chip-dark { display: none; }
  .bench-side h1 { font-size: 25px; }
  .bench-foot .thumb { flex-basis: 95px; height: 65px; }
  .bench-foot .thumb .mono { display: block; }
  .bench .nav-arrow { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .tutorial-grid .lcard { transition: none; }
  .offset-pick.needs-choice, .tutorial-offset.needs-choice { animation: none; }
  .offsets .off, .tutorial-offset .seg button { transition: none; }
  .offsets .off:hover { transform: none; }
}

/* The kit gate (js/kit.js, owner 2026-10-07): a lesson the Worker left out
   for a laboratory with no kit keeps its card, with a lock that says what
   opens it, and the pages show the way to link the order. */
.tag.kit-tag { background: var(--surface); color: var(--text); border: 1px solid var(--line); }
.tag.kit-tag svg { width: 11px; height: 11px; }
.lcard.is-locked .lcard-img img { filter: saturate(.35); opacity: .78; }
.kit-lock { display: flex; flex-direction: row; align-items: flex-start; gap: 14px; background: var(--accent-soft); border-color: var(--accent-line); border-radius: 14px; padding: 16px 20px; }
.kit-lock-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--surface); border: 1px solid var(--accent-line); color: var(--accent); }
.kit-lock-icon svg { width: 16px; height: 16px; }
.kit-lock-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kit-lock-body p { margin: 0; font-size: 14px; color: var(--text2); }
.kit-lock-actions { gap: 10px; margin-top: 4px; align-items: center; }
.tutorials-page .kit-lock { margin: 4px 0 18px; }
.lesson.is-locked .kit-cover .tag.kit-tag { align-self: flex-start; }
.kit-bench .kit-lock { max-width: 560px; text-align: left; }
.home-kit .home-status svg { width: 12px; height: 12px; vertical-align: -1px; }
@media (max-width: 768px) {
  .kit-lock { padding: 14px 16px; }
}

/* Two methods side by side (js/methods.js, owner 2026-10-08: Flex, plaster
   only or with silicone). On a narrow screen only the column of the method
   chosen is shown, under the switch. */
.methods { display: flex; flex-direction: column; gap: 16px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface2); scroll-margin-top: 90px; }
.methods-hdr { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; }
.methods-hdr h3 { font-size: 20px; line-height: 1.3; text-wrap: balance; }
.methods-hdr p { margin-top: 6px; max-width: 62ch; line-height: 1.6; }
.methods-hdr .seg > button { cursor: pointer; font-size: 12px; padding: 9px 14px; }
.methods-hdr .seg > button.on { background: var(--text); color: var(--surface); }
.methods-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.method-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); transition: border-color .2s, box-shadow .2s; scroll-margin-top: 90px; }
.method-col.is-chosen { border-color: var(--accent-line); box-shadow: inset 0 3px 0 var(--accent); }
.method-hdr { display: flex; flex-direction: column; gap: 8px; padding: 4px 4px 2px; }
.method-hdr h3 { font-size: 18px; line-height: 1.3; }
.method-hdr p { font-size: 14px; line-height: 1.6; color: var(--text2); }
.method-hdr .btn { align-self: flex-start; }
.methods .steps { gap: 12px; }
.lesson .methods .step { padding: 14px; gap: 14px; }
.lesson .methods .step-body h3 { font-size: 17px; line-height: 1.35; }
.lesson .methods .step-body p { font-size: 14px; line-height: 1.65; }
[data-only][hidden], [data-only-not][hidden] { display: none !important; }
.bench-method { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid var(--accent-line); border-radius: 12px; background: var(--accent-soft); }
.bench-method .row { gap: 10px 14px; align-items: center; }
@media (max-width: 720px) {
  .methods { padding: 14px; }
  .methods-grid { grid-template-columns: 1fr; }
  .method-col:not(.is-chosen) { display: none; }
  .methods-hdr .seg { width: 100%; }
  .methods-hdr .seg > button { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .method-col { transition: none; }
}