/* Adaptive shell only: the same controls, model and playback survive resizing. */
.workspace > *, .app-header > *, .brand > div, .info-content, .learning-launch > * { min-width: 0; }
.brand h1, .info-content, .workflow-controls, .stage-controls { overflow-wrap: anywhere; }
.responsive-model-dock, .responsive-jump-nav { display: none; }
.responsive-view-tools > summary { display: none; }
.responsive-view-tools { position: absolute; inset: 0; pointer-events: none; }
.responsive-view-tools .view-buttons { pointer-events: auto; }
.responsive-view-tools > summary:focus-visible { outline: 3px solid #ad765d; outline-offset: 3px; }

@media (pointer: coarse) {
  button, select, input[type="search"] { min-height: 44px; }
  select, input[type="search"] { font-size: 16px; }
  input[type="range"] { min-height: 32px; }
}

@media (max-width: 1199px) {
  .app-header { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; height: auto; min-height: 80px; gap: 8px 16px; padding: 12px 20px; }
  .brand { min-width: 0; }
  .brand h1 { line-height: 1.4; }
  .magazine-nav { grid-column: 1 / -1; grid-row: 2; justify-content: center; margin: 0; gap: 28px; }
  .magazine-nav a { display: flex; align-items: center; min-height: 36px; }
  .app-header #open-manual { grid-column: 2; grid-row: 1; }
  .language-picker { grid-column: 3; grid-row: 1; margin: 0; }
  .language-picker > span { display: none; }
  button, select, input[type="search"] { min-height: 44px; }
  select, input[type="search"], #magazine-model, #part-search, #workflow-step, #workflow-speed, #lesson-speed, #sequence-type { font-size: 16px; }
  input[type="checkbox"] { width: 19px; height: 19px; }
  input[type="range"] { min-height: 32px; }
  .responsive-model-dock { display: block; border-bottom: 1px solid var(--line); background: #fcfbf7; padding: 12px 20px; }
  .responsive-model-dock .magazine-picker { display: grid; grid-template-columns: minmax(210px, 1fr) minmax(0, 2fr); gap: 4px 20px; align-items: start; border: 0; padding: 0; margin: 0; }
  .responsive-model-dock .magazine-picker > .eyebrow { display: none; }
  .responsive-model-dock .magazine-picker > label { grid-column: 1; margin: 0 0 3px; font-size: .75rem; }
  .responsive-model-dock #magazine-model { grid-column: 1; grid-row: 2 / 4; margin: 0; }
  .responsive-model-dock #magazine-scope { grid-column: 2; grid-row: 1 / 3; margin: 0; min-height: 0; -webkit-line-clamp: 2; line-height: 1.55; }
  .responsive-model-dock .magazine-picker > details { grid-column: 2; grid-row: 3; }
  .responsive-model-dock .magazine-picker > details > summary { min-height: 28px; display: list-item; }
  .responsive-model-dock .magazine-picker > details p { margin: 5px 0; }
  .workspace { min-height: 0; grid-template-columns: 196px minmax(0, 1fr) 290px; }
  .parts-panel, .info-panel { max-height: min(1000px, calc(100dvh - 24px)); position: sticky; top: 0; min-height: 0; }
  .parts-panel { grid-column: 1; grid-row: 1; padding-top: 18px; }
  .stage-panel { grid-column: 2; grid-row: 1; min-height: 0; height: auto; max-height: none; }
  .stage-panel #viewport { min-height: 460px; flex: 1 0 460px; }
  .info-panel { grid-column: 3; grid-row: 1; }
  .view-modes { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 8px; gap: 4px; }
  .view-modes button { min-width: 0; padding: 8px 4px; line-height: 1.3; }
  .learning-launch { margin: 0 8px 8px; gap: 6px; padding: 8px; }
  .learning-launch button { flex: 1 1 120px; min-width: 0; padding: 8px; font-size: .8rem; line-height: 1.4; }
  .learning-launch .learning-context, .learning-launch p span { white-space: normal; }
  .workflow-controls { padding: 14px; }
  .workflow-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workflow-buttons button { padding: 9px 5px; min-width: 0; font-size: .8rem; }
  .workflow-top { flex-wrap: wrap; gap: 5px; }
  .workflow-options { gap: 9px; }
  .workflow-options label, .toggle-row label { min-height: 44px; }
  #workflow-reference { margin-left: 0; }
  .info-tabs { padding: 9px 7px; gap: 3px; }
  .info-tabs button { padding: 8px 3px; line-height: 1.3; }
  .free-magazine .info-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .info-content { padding: 20px 16px; }
  .part-row { min-height: 44px; }
  .part-row button { min-height: 44px; }
  .part-row .expand-part { flex-basis: 30px; width: 30px; }
  .source-links button, .selection-actions button, .catalog-tools button { min-height: 44px; }
  .source-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .model-boundary, .workflow-boundary, .lesson-boundary { line-height: 1.7; }
  .stage-controls { padding: 14px; }
  .app-footer { gap: 7px; line-height: 1.6; flex-wrap: wrap; }
  .parts-panel, .info-panel, .stage-panel { scroll-margin-top: 62px; }
}

@media (min-width: 700px) and (max-width: 1023px) {
  .workspace { grid-template-columns: minmax(0, 1fr) minmax(270px, 36%); }
  .stage-panel { grid-column: 1; grid-row: 1; border-bottom: 1px solid var(--line); }
  .stage-panel #viewport { min-height: 450px; flex-basis: 450px; }
  .info-panel { grid-column: 2; grid-row: 1; max-height: 900px; }
  .parts-panel { grid-column: 1 / -1; grid-row: 2; position: static; max-height: none; border: 0; border-top: 1px solid var(--line); padding: 22px; }
  .parts-panel #part-search { max-width: 500px; }
  .parts-panel .catalog-tools { max-width: 500px; }
  .parts-panel #parts-list { columns: 2; column-gap: 25px; }
  .parts-panel .part-section, .parts-panel .part-row { break-inside: avoid; }
  .parts-panel .list-footer { max-width: 500px; }
  .learning-launch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .learning-launch .beginner-entry { grid-column: 1 / -1; }
  .free-magazine .learning-launch { display: flex; }
}

@media (max-width: 1023px) {
  .responsive-jump-nav { display: flex; justify-content: center; gap: 6px; padding: 5px 12px; background: #f7f5ef; border-bottom: 1px solid var(--line); }
  .responsive-jump-nav a { flex: 1; max-width: 240px; display: flex; justify-content: center; align-items: center; min-height: 44px; font-size: .85rem; border: 1px solid var(--line); border-radius: 6px; background: #fcfbf7; color: var(--ink); }
  .responsive-view-tools { inset: auto 10px 38px auto; z-index: 5; pointer-events: auto; }
  .responsive-view-tools > summary { display: flex; align-items: center; justify-content: center; cursor: pointer; list-style: none; min-height: 44px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 6px; background: #fffef9f2; font-size: .8rem; box-shadow: 0 2px 9px #30342e12; }
  .responsive-view-tools > summary::-webkit-details-marker { display: none; }
  .responsive-view-tools > summary::after { content: "＋"; padding-left: 10px; }
  .responsive-view-tools[open] > summary::after { content: "−"; }
  .responsive-view-tools .view-buttons { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; width: min(280px, calc(100vw - 32px)); margin-top: 5px; padding: 6px; background: #fcfbf7f5; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 4px 15px #30342e16; }
  .responsive-view-tools .view-buttons button, html[lang="en"] .responsive-view-tools .view-buttons button { min-height: 44px; width: auto; min-width: 0; font-size: .8rem; padding: 8px 5px; }
  .model-label { max-width: min(190px, 50vw); }
}

@media (max-width: 699px) {
  .app-header { grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; padding: 10px 12px; }
  .brand { grid-column: 1 / -1; grid-row: 1; gap: 10px; }
  .brand-mark { width: 36px; height: 38px; flex: 0 0 36px; }
  .brand h1, html[lang="en"] .brand h1 { font-size: 1rem; margin: 0; line-height: 1.35; }
  .brand p { display: none; }
  .magazine-nav { display: none; }
  .app-header #open-manual { grid-column: 1; grid-row: 2; justify-self: start; padding: 8px 0; font-size: .85rem; }
  .language-picker { grid-column: 2; grid-row: 2; }
  .language-picker select { min-width: 95px; }
  .responsive-model-dock { padding: 10px 12px; }
  .responsive-model-dock .magazine-picker { display: block; }
  .responsive-model-dock .magazine-picker > label { margin-bottom: 5px; }
  .responsive-model-dock #magazine-model { display: block; min-height: 46px; }
  .responsive-model-dock #magazine-scope { margin: 7px 0 0; min-height: 0; -webkit-line-clamp: 2; font-size: .71rem; }
  .responsive-model-dock .magazine-picker > details { margin-top: 2px; }
  .responsive-model-dock .magazine-picker > details > summary { min-height: 30px; padding: 5px 0; }
  .responsive-jump-nav { position: sticky; top: 0; z-index: 12; padding: 5px 10px; }
  .workspace { display: flex; flex-direction: column; min-height: 0; }
  .stage-panel { order: 0; width: 100%; height: auto; min-height: 0; max-height: none; }
  .parts-panel { order: 2; position: static; max-height: none; min-height: 0; padding: 20px 12px; border: 0; border-top: 1px solid var(--line); overflow: visible; scrollbar-gutter: auto; }
  .info-panel { order: 1; position: static; max-height: none; min-height: 0; border: 0; border-top: 1px solid var(--line); overflow: visible; scrollbar-gutter: auto; }
  .view-modes { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 7px 8px; }
  .view-modes button { font-size: .75rem; padding: 8px 3px; }
  .free-magazine .view-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .learning-launch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 8px 6px; padding: 7px; }
  .learning-launch .beginner-entry { grid-column: 1 / -1; }
  .learning-launch button { font-size: .82rem; }
  .learning-launch small { display: none; }
  .free-magazine .learning-launch { display: flex; min-height: 48px; }
  .stage-panel #viewport { min-height: 340px; height: clamp(340px, 59svh, 540px); flex: 0 0 clamp(340px, 59svh, 540px); }
  .stage-caption { top: 9px; left: 12px; right: 12px; max-width: none; gap: 4px; }
  .stage-caption span:first-child { font-size: .76rem; }
  .stage-caption span:last-child { font-size: .68rem; max-width: 100%; line-height: 1.4; }
  .stage-instructions { left: 12px; right: 12px; bottom: 11px; font-size: .65rem; line-height: 1.5; }
  .stage-instructions #render-state { display: none; }
  .workflow-controls, #lesson-controls, .stage-controls { padding: 13px 12px; }
  .workflow-top { gap: 4px; }
  .workflow-top > span:last-child { font-size: .68rem; line-height: 1.5; }
  #workflow-phase { min-height: 0; font-size: .8rem; margin: 10px 0; }
  .workflow-buttons { gap: 7px; }
  .workflow-buttons button { font-size: .82rem; }
  .workflow-options { font-size: .78rem; }
  .workflow-options select { padding: 7px; }
  .workflow-range-label { font-size: .78rem; }
  .workflow-boundary, .model-boundary { font-size: .71rem; }
  .toggle-row { gap: 8px 16px; font-size: .82rem; }
  .toggle-row .quiet { min-height: 44px; }
  .info-tabs { position: static; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 9px 8px; }
  .free-magazine .info-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .info-tabs button, html[lang="en"] .info-tabs button { font-size: .76rem; min-height: 46px; padding: 8px 2px; }
  .info-content { padding: 20px 16px; margin: 0; max-width: none; }
  #parts-list { display: block; columns: auto; }
  .part-row { padding: 4px; gap: 6px; }
  .part-row button { font-size: .88rem; }
  .part-row small { font-size: .72rem; }
  .part-row .expand-part { flex-basis: 38px; width: 38px; }
  .child-row { margin-left: 12px; }
  .child-row button { font-size: .82rem; }
  .app-footer { padding: 14px 12px; font-size: .72rem; }
}

@media (max-width: 1023px) and (max-height: 560px) and (orientation: landscape) {
  .stage-panel { align-self: start; }
  .app-header { padding: 6px 12px; min-height: 60px; }
  .brand p, .magazine-nav, .responsive-model-dock #magazine-scope, .responsive-model-dock .magazine-picker > details { display: none; }
  .responsive-model-dock { padding: 6px 12px; }
  .responsive-model-dock .magazine-picker { display: flex; align-items: center; gap: 12px; }
  .responsive-model-dock .magazine-picker > label { margin: 0; white-space: nowrap; }
  .responsive-model-dock #magazine-model { flex: 1; min-width: 0; max-width: 550px; }
  .responsive-jump-nav { padding-top: 3px; padding-bottom: 3px; }
  .view-modes { padding-top: 5px; padding-bottom: 5px; }
  .learning-launch { padding: 5px; margin-bottom: 3px; display: flex; }
  .learning-launch button { flex-basis: 0; font-size: .75rem; }
  .learning-launch .beginner-entry { flex: 1.3; }
  .stage-panel #viewport { height: max(250px, 66svh); min-height: 250px; flex: 0 0 max(250px, 66svh); }
  .stage-caption span:last-child, .stage-instructions { display: none; }
  .responsive-view-tools { bottom: 10px; }
  .workflow-top > span:last-child, .model-boundary, .workflow-boundary, .lesson-boundary { display: none; }
}