/* One page scroll, at every width and text size. Media keep their full ratio. */
html { scroll-padding-top:64px; scroll-padding-bottom:140px; }
body, body[data-debug-level="simple"] { overflow:visible; }
body main, body[data-debug-level="simple"] main {
  width:min(1180px,100%); height:auto; min-height:100dvh; overflow:visible;
  margin:0 auto; padding:calc(62px + env(safe-area-inset-top)) 12px calc(142px + env(safe-area-inset-bottom));
}
body .panel, body[data-debug-level="simple"] .wizard-step {
  width:100%; height:auto; min-height:0; max-height:none; overflow:visible;
  margin:0; padding:16px; min-width:0;
}
button, .button, summary, select, input:not([type=checkbox]):not([type=range]) { min-height:44px; }
button, .button { min-width:44px; }
summary { cursor:pointer; padding:10px 4px; }
input[type=checkbox] { width:22px; height:22px; flex-shrink:0; }
input, select, textarea { min-width:0; font-size:16px; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.wizard-step-heading { min-height:44px; padding:0; }
.marker-heading { height:auto; flex-wrap:wrap; gap:8px; }
.marker-heading .wizard-step-heading { padding:0; }
#import-form { height:auto; }
#beta-notice { white-space:normal; overflow:visible; text-align:left; font-size:13px; }
.import-submit.simple-hide { display:block !important; }
#selected-video-name { white-space:normal; overflow-wrap:anywhere; }
#import-progress { display:grid; justify-content:stretch; gap:8px; text-align:left; }
#upload-progress { width:100%; height:14px; accent-color:var(--accent); }
#upload-phase, #upload-details { margin:0; }
.project-tools { margin:0 0 16px; padding:12px; border:1px solid var(--line); border-radius:10px; }
.project-tools .actions { display:flex; flex-wrap:wrap; gap:8px; }
.queue-panel { margin:12px 0; padding:12px; border:1px solid var(--accent); border-radius:10px; }
#marker-video { height:auto; width:100%; max-height:65dvh; object-fit:contain; }
.transport-controls { grid-template-columns:repeat(auto-fit,minmax(44px,1fr)); }
.transport-controls button { padding:8px 2px; }
.marker-primary-actions.actions { grid-template-columns:1fr auto; min-height:0; gap:8px; margin:8px 0; }
.marker-navigation-core { grid-column:1; grid-template-columns:44px minmax(60px,96px) 44px; gap:8px; }
.marker-primary-actions #add-manual-marker { width:80px; height:60px; min-height:60px; font-size:36px; border-radius:14px; }
.marker-primary-actions .marker-trash { grid-column:2; width:44px; min-width:44px; min-height:44px; }
.manual-marker-list { max-width:100%; }
.manual-marker-row > span:first-child { display:grid !important; text-align:left; }
.manual-marker-track, .marker-scrubber { min-height:44px; }
.manual-marker, .manual-marker::before { min-height:44px; }
.selected-marker-panel { padding:10px; grid-template-columns:minmax(0,1fr); }
body[data-debug-level="simple"] .selected-marker-panel:not(.hidden) { display:grid !important; }
.selected-marker-panel h3, .selected-marker-panel .eyebrow { font-size:14px; }
.selected-marker-panel .actions { flex-wrap:wrap; }
.marker-footer-actions { flex-wrap:wrap; gap:8px; }
#calibration-step .canvas-wrap { height:auto; min-height:0; margin:10px 0; }
#calibration-canvas { width:100%; min-width:0; height:auto; max-height:none; }
.calibration-toolbar { grid-template-columns:repeat(auto-fit,minmax(76px,1fr)); }
#calibration-loupe { position:fixed; z-index:70; width:112px; height:112px; border-radius:50%; border:3px solid #fff; box-shadow:0 4px 22px #000a; pointer-events:none; background:#252a27; }
#analysis-step { display:flex; flex-direction:column; gap:8px; }
#analysis-step > .wizard-step-heading { order:-3; }
#analysis-step > #live-debug { order:-2; margin:0; padding:0; }
body[data-debug-level="simple"] #analysis-step #live-digital-board { width:min(100%,620px); height:auto; min-width:0; max-height:none; margin:auto; }
.review-workspace { display:flex; flex-direction:column; height:auto; min-height:0; margin:8px 0; }
.review-pane { order:0; height:auto; padding:10px; overflow:visible; }
body[data-debug-level="simple"] .move-list, .move-list { display:flex; order:1; max-height:none; gap:8px; overflow-x:auto; }
.move-row { flex:0 0 180px; min-height:48px; }
.review-visual-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:12px; }
#digital-board, .review-camera-frame { display:block; width:100%; height:auto; max-height:none; margin:0; aspect-ratio:1; }
.review-camera-frame img { display:block; width:100%; height:100%; max-height:none; object-fit:contain; }
.review-nav { flex-wrap:wrap; gap:6px; }
body[data-debug-level="simple"] .review-nav .simple-hide { display:block !important; }
.review-nav { display:grid; grid-template-columns:44px 44px minmax(0,1fr) 44px 44px; }
#review-undo { grid-column:1 / -1; }
.review-details-scroll { max-height:none; overflow:visible; }
#undo-correction { display:inline-block !important; }
#export-step { overflow:visible; }
.export-options { grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); }
.export-options .export-toggle { min-height:44px; padding:7px; font-size:14px; }
.export-primary-actions { flex-wrap:wrap; }
.overlay-preview { width:min(100%,420px); max-height:none; }
.overlay-preview[data-layout=PORTRAIT] { width:min(100%,420px); }
.master-video-preview { width:min(100%,720px); max-height:none; }
.master-video-preview video { object-fit:contain; }
.master-video-preview[data-layout=VERTICAL] { width:min(100%,360px); }
.board-palette .palette-preset { width:44px; height:44px; }
.clock-options { margin:10px 0; border:1px solid var(--line); border-radius:10px; padding:8px; }
.clock-options .marker-setup-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.clock-options .cadence-plus { display:none; }
.clock-options .cadence-label { grid-column:1/-1; }
.step-help { width:min(520px,calc(100% - 24px)); max-height:calc(100dvh - 32px); overflow:auto; color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px; }
.step-help::backdrop { background:#0009; }
.step-help .dialog-close { float:right; }
.wizard-navigation li button { width:44px; height:44px; min-width:44px; min-height:44px; }
.wizard-navigation ol { gap:2px; }
.wizard-navigation { grid-template-columns:44px minmax(0,1fr) 44px; gap:4px; }
.error { white-space:pre-wrap; overflow-wrap:anywhere; }
@media(max-width:760px) {
  body .panel { padding:12px; }
  .review-visual-pair { grid-template-columns:minmax(0,1fr); }
  .review-visual-pair > * { min-width:0; }
  .export-metadata[data-mode=media] .player-metadata-grid { grid-template-columns:1fr 1fr; }
  .export-metadata[data-mode=media] label { font-size:13px; }
  #export-step[data-export-kind=MASTER] .theme-picker { max-height:none; }
  .export-move-navigation #export-first-move, .export-move-navigation #export-last-move { display:block; }
  .export-move-navigation { grid-template-columns:44px 44px minmax(0,1fr) 44px 44px; }
  .pgn-output-field textarea { height:150px; }
  .review-mode-tabs { display:none; }
}
@media(max-width:380px) {
  .wizard-navigation ol { display:grid; grid-template-columns:repeat(3,44px); }
}

#filming-guide {margin:0 0 12px;padding:12px;border:1px solid var(--line);border-radius:12px;text-align:left}
#filming-guide[hidden] {display:none}
#filming-guide img {display:block;width:min(100%,640px);height:auto;margin:auto;aspect-ratio:1448/1086}
#filming-guide label {display:flex;align-items:center;gap:10px;min-height:44px}
#reopen-filming-guide {justify-self:start;margin-bottom:8px}
body[data-debug-level="simple"] .transport-controls,
.transport-controls {display:grid;grid-template-columns:repeat(7,minmax(0,1fr));width:min(100%,560px);margin:8px auto;gap:4px}
.transport-controls button {min-width:0;min-height:44px;font-size:15px;padding:6px 0}
body[data-debug-level="simple"] #marker-step > .speed-control,
#marker-step > .speed-control {display:grid;width:min(100%,320px);margin:8px auto 12px;box-sizing:border-box;padding:0 12px;gap:4px}
.speed-control input {width:100%;min-height:32px;margin:0}
body[data-debug-level="simple"] .marker-primary-actions.actions,
.marker-primary-actions.actions {display:flex;justify-content:center;width:100%;margin:10px 0}
.marker-navigation-core {display:grid;grid-template-columns:64px 88px 64px;gap:12px;align-items:center;justify-content:center}
.marker-navigation-core button {width:64px;min-height:56px;font-size:28px}
.marker-primary-actions #add-manual-marker {width:88px;height:64px;min-height:64px;font-size:40px}
.marker-auxiliary-actions {display:flex;justify-content:flex-end;gap:8px;margin:8px 0}
.marker-auxiliary-actions button {min-width:44px;min-height:44px}
.review-pane {position:relative}
.review-loading-note {position:absolute;z-index:3;top:12px;left:12px;right:12px;background:var(--panel);padding:8px;border:1px solid var(--accent);border-radius:8px;box-shadow:0 2px 12px #0006}
.review-loading-note button {margin-left:12px}
.review-pending .candidate-chips,.review-pending .board-correction-panel,.review-pending #digital-board {pointer-events:none}
#progress-bar.indeterminate {width:30%!important;animation:media-progress 1.5s ease-in-out infinite alternate}
@media(prefers-reduced-motion:reduce){#progress-bar.indeterminate{animation:none;width:100%!important;opacity:.4}}

#overlay-export-format-control { display:block; max-width:40rem; margin-inline:auto; }
#overlay-export-format-control.hidden { display:none; }
#overlay-export-format-control select { min-height:44px; max-width:100%; }
#overlay-export-format-control p { text-align:left; line-height:1.4; }

#auto-marker-panel { border:1px dashed #c6a76d; border-radius:10px; padding:12px; margin-block:12px; }
.auto-proposal-strip { max-width:100%; }
.auto-proposal { border:2px dashed #c6a76d; padding:12px; min-width:0; }
.auto-proposal .actions { display:flex; flex-wrap:wrap; }
.auto-proposal input { width:100%; }
#auto-marker-panel button { min-height:44px; }
#auto-marker-panel { min-width:0; max-width:100%; padding:12px; border:1px solid #c6a76d; border-radius:12px; }
#auto-marker-panel .actions { display:flex; flex-wrap:wrap; gap:8px; }
#auto-marker-panel button { white-space:normal; overflow-wrap:anywhere; max-width:100%; }
#auto-marker-panel progress { width:100%; }
#auto-proposal-index { display:flex; flex-wrap:wrap; gap:6px; max-height:144px; overflow-y:auto; margin:12px 0; }
#auto-proposal-index [aria-pressed="true"] { border:2px solid #957131; }
.auto-frame-note { font-size:.875rem; }
.auto-frame-preview { display:block; width:100%; max-width:384px; aspect-ratio:1; object-fit:contain; margin:10px 0; border-radius:8px; }
.auto-frame-preview:not([src]) { display:none; }