/* Keep the next useful action visible throughout the guided editor. */
html { scroll-padding-bottom: 160px; }
body[data-step] { padding-bottom: calc(140px + env(safe-area-inset-bottom)); }
body[data-step] header { height: 60px; }
body[data-step] footer { display: none; }
.flow-heading { margin-top: 18px; }
.flow-heading h1 { font-size: 28px; margin: 12px 0 6px; }
.flow-heading p { margin-bottom: 12px; }
body[data-step] main { padding-top: 18px; }
.flow-nav {
  position: fixed; inset: auto 0 0; z-index: 25;
  padding: 10px max(24px, calc((100vw - 1248px) / 2)) calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid #44523e; background: #151b18;
  box-shadow: 0 -8px 28px #0005;
}
.flow-nav p { margin: 0 0 7px; font-size: 14px; }
.flow-nav .flow-buttons { display: flex; align-items: stretch; gap: 10px; }
#stepActions { display: flex; align-items: stretch; gap: 10px; flex: 1; min-width: 0; }
.flow-nav button, .flow-nav a.download {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; margin: 0 !important; padding: 12px 18px;
  font-size: 16px; line-height: 1.25; width: auto;
}
#stepActions > * { flex: 1; }
#stepNext { flex: 1; }
#stepBack { flex: 0 0 auto; background: transparent; }
#stepActions #cancel { color: #ffd9a8; border-color: #876744; }
.quick-tools { grid-column: 1 / -1; min-width: 0; }
#selectionTools, #reviewCorrection {
  padding: 14px 18px; border: 1px solid #3d4b3f;
  border-radius: 12px; background: #1b231e;
}
#manualBallTools { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
#manualBallTools button { min-height: 46px; width: auto; margin: 0 !important; font-size: 15px; }
#manualBallTools .add-row { flex: 1; min-width: 220px; margin: 0; }
#manualBallTools .add-row select { min-height: 46px; }
#reviewCorrection { margin: 0; }
#correctionSteps { display: grid; grid-template-columns: minmax(160px, 1fr) auto; gap: 8px 16px; }
#correctionSteps h3 { display: none; }
#correctionHelp { grid-column: 1 / -1; margin: 0; font-size: 15px; line-height: 1.5; color: #b9c8bc; }
#correctionSteps .range-label { margin: 4px 0 0; grid-column: 1; }
#correctionBall { grid-column: 1; grid-row: 3; min-height: 46px; }
#cancelCorrection { grid-column: 2; grid-row: 3; margin: 0 !important; width: auto; }
#step3 .panel:first-child { padding-bottom: 0; border-bottom: 0; }
#selectHeading { display: none; }
#selectCount { margin: 0; font-size: 15px; color: #c6d8bc; }
#step3 .panel:last-child > .micro { display: none; }
#step4 .panel h2 { margin-top: 0; }
#step4 .micro { display: none; }
#breakTools { margin-top: 10px; }
#breakTools .muted { margin: 8px 0; }
#step5 .panel { border-bottom: 0; }
#step5 h2 { font-size: 18px; }
body[data-step='7'] main { display: block; max-width: 820px; }
body[data-step='7'] aside { width: 100%; }
#saveTools > .panel { padding: 24px; }
#saveHeading { margin: 0; font-size: 24px; }
#saveSummary { margin: 10px 0 16px; }
#exportFeedback { margin: 0; padding: 14px 16px; font-size: 16px; }
#saveWaiting { margin: 12px 0 0; font-size: 15px; }
#saveReady .file-info { margin: 12px 0 0; font-size: 14px; }
#exportDetails, #savePreview { margin-top: 16px; }
#exportDetails .export-options { padding: 6px 0 2px; justify-content: space-between; }
#savePreview .workspace { position: static; margin-top: 12px; box-shadow: none; }
#savePreview .viewer { height: 44svh; min-height: 200px; max-height: 500px; }
#savePreview .statusbar { display: none; }
#cancelExport { display: none !important; }
.project-details { margin: 0 24px 24px; }
.project-details .panel { padding: 0; border: 0; }
.project-details .muted { font-size: 15px !important; margin-top: 10px; }
.project-details .project-actions { margin-top: 12px; }
#styleTools .panel:first-child h2 { margin-top: 0; font-size: 18px; }
/* A compact header and a smaller preview leave room for the active tools. */
@media (max-width: 720px) {
  body[data-step] header { height: 46px; padding: 0 14px; }
  .brand { font-size: 28px; }
  .brand > span { font-size: 16px; }
  .studio { display: none; }
  .flow-heading { margin: 8px 0 0; padding: 0 14px; }
  .flow-top { min-height: 36px; }
  .step-jump select { min-height: 36px; padding: 6px 10px; max-width: 200px; }
  .flow-heading h1 { font-size: 23px; margin: 8px 0 5px; }
  .flow-heading p { font-size: 14px; line-height: 1.4; margin-bottom: 10px; }
  body[data-step] main { padding: 12px 10px 20px; }
  body[data-step] aside { margin-top: 10px; }
  body[data-step='2'] aside, body[data-step='7'] aside { margin-top: 0; }
  .quick-tools { width: 100%; margin-bottom: 10px; }
  #selectionTools, #reviewCorrection { padding: 10px; }
  #manualBallTools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  #manualBallTools button { font-size: 14px; padding: 10px 8px; }
  #manualBallTools .add-row { grid-column: 1 / -1; min-width: 0; }
  #manualBallTools .add-row select { font-size: 15px; }
  body[data-step] .viewer { height: 31svh; min-height: 170px; max-height: 360px; }
  body[data-step='1'] .viewer { height: auto; max-height: none; min-height: 0; }
  .transport { margin-top: 6px; padding: 4px 8px; }
  .statusbar { padding: 6px 2px; font-size: 13px; min-height: 0; }
  .flow-nav { padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); }
  .flow-nav p { font-size: 13px; line-height: 1.3; }
  .flow-nav .flow-buttons, #stepActions { gap: 8px; }
  .flow-nav button, .flow-nav a.download { min-height: 48px; font-size: 14px; padding: 10px 12px; }
  #stepBack { padding: 10px 8px; }
  #stepActions #shareVideo { flex: 0 1 120px; }
  #correctionHelp { font-size: 14px; }
  #correctionSteps { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; }
  #correctionSteps .range-label { font-size: 14px; }
  #correctionBall { font-size: 15px; }
  #cancelCorrection { padding: 10px; font-size: 14px; }
  .mode-cards { gap: 8px; }
  .mode-cards button { min-height: 76px; padding: 12px 14px; }
  .mode-cards button[aria-pressed=true] { padding: 11px 13px; }
  .mode-cards strong { font-size: 16px; margin-bottom: 4px; }
  .mode-cards span { font-size: 14px; line-height: 1.35; }
  #saveTools > .panel { padding: 18px 16px; }
  #saveHeading { font-size: 22px; }
  .project-details { margin: 0 16px 16px; }
  #savePreview .viewer { height: 33svh; min-height: 180px; }
  body.selecting .selection-bar {
    position: fixed; inset: auto 0 0; z-index: 30; max-height: 43svh;
    overflow-y: auto; margin: 0; padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    border-radius: 14px 14px 0 0; background: #20291c;
  }
  body.selecting .selection-actions { position: sticky; bottom: -12px; padding: 8px 0; background: #20291c; }
  body.selecting .selection-actions .primary { min-height: 48px; }
  body.selecting .viewer.marking { height: 40svh; min-height: 140px; }
  body.selecting .quick-tools { display: none; }
  body.selecting .transport { display: none; }
  body.selecting { padding-bottom: 46svh; }
}
@media (max-height: 520px) and (max-width: 720px) {
  .flow-heading p { display: none; }
  body[data-step] .viewer { height: 42svh; }
  body.selecting .selection-bar { max-height: 58svh; }
  body.selecting .selection-bar #selectionHelp, body.selecting .selection-bar small { display: none; }
}

#saveWaiting { display: none; }
#exportDetails #exportPanel { width: 100%; margin-top: 14px; }

#stepActions #shareVideo.mobile-save { flex: 1; }

/* The offer stays with the video, rather than inside a long tools panel. */
.render-preview-tools { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; padding:12px 14px; margin-bottom:10px; border:1px solid #49633c; border-radius:10px; background:#202c20; }
.render-preview-tools > div:first-child { flex:1; min-width:180px; }
.render-preview-tools strong { color:#d4ff72; font-size:16px; }
.render-preview-tools p { margin:4px 0 0; color:#b9c8b6; font-size:14px; line-height:1.4; }
.render-preview-actions { display:flex; gap:8px; flex-wrap:wrap; }
.render-preview-actions button { min-height:44px; font-size:14px; padding:10px 12px; }
#renderPreviewStatus { flex-basis:100%; margin:0; }
#renderPreviewStatus:empty { display:none; }
#renderPreviewProgress { flex-basis:100%; }
#renderedPreview { width:100%; height:100%; max-height:100%; object-fit:contain; position:relative; display:block; background:#080c0b; }
.rendered-preview .viewer-top, .rendered-preview .viewer-bottom { display:none; }
@media(max-width:720px) {
 .render-preview-tools { padding:10px 12px; gap:8px; }
 .render-preview-actions { flex:1; }
 .render-preview-actions button { flex:1; }
 .render-preview-tools > div:first-child { min-width:100%; }
}

/* Precision adjustment leaves the ball visible while the thumb moves the marker. */
.ball-adjust-grid { display:grid; grid-template-columns:144px minmax(0,1fr); gap:16px; align-items:center; }
.ball-pad { display:grid; grid-template:repeat(3,44px) / repeat(3,44px); gap:4px; width:140px; }
.ball-pad button { min-width:44px; min-height:44px; padding:0; font-size:23px; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; background:#34442b; border:1px solid #657b51; }
#ballUp { grid-area:1/2; } #ballLeft { grid-area:2/1; } #ballStick { grid-area:2/2; } #ballRight { grid-area:2/3; } #ballDown { grid-area:3/2; }
#ballStick { position:relative; border-radius:50%; background:#141e11; overflow:visible; cursor:grab; }
#ballStick:active { cursor:grabbing; }
#ballStickKnob { display:block; width:26px; height:26px; border-radius:50%; background:#d4ff72; margin:auto; border:3px solid #8eae56; pointer-events:none; box-shadow:0 2px 6px #0006; }
.ball-adjust-options label { display:block; font-size:14px; margin-bottom:6px; }
#ballMoveSpeed { width:100%; min-height:44px; padding:8px; font-size:14px; }
.ball-adjust-options #ballPadHelp { font-size:13px; line-height:1.4; margin-top:8px; }
.ball-size-buttons { display:grid; grid-template-columns:1fr 44px 72px 44px; align-items:center; gap:6px; margin-top:8px; }
.ball-size-buttons span { font-size:14px; }.ball-size-buttons button { min-height:44px; font-size:24px; padding:0; touch-action:none; user-select:none; -webkit-user-select:none; }
#ballSizeValue { font:14px monospace; text-align:center; color:#d4ff72; }
#ballSizeSlider { margin-top:6px; }#ballSizeSlider summary { cursor:pointer; font-size:14px; padding:10px 0; color:#b6c7aa; }
@media(max-width:720px) {
 body.selecting .selection-bar { max-height:56svh; padding-top:10px; }
 body.selecting .selection-bar #selectionHelp { font-size:13px; line-height:1.3; margin:3px 0 8px; }
 .ball-adjust-grid { gap:12px; grid-template-columns:140px minmax(0,1fr); }
 body.selecting .viewer.marking { height:32svh; min-height:130px; }
 body.selecting .selection-actions { margin-top:6px; }
 body.selecting { padding-bottom:59svh; }
 body.selecting #loupe { width:108px; height:108px; top:8px; left:8px; }
 body.selecting .viewer-top { display:none; }
}
@media(max-height:520px) and (max-width:720px) {
 body.selecting .selection-bar { max-height:65svh; }
 .ball-adjust-options #ballPadHelp { display:none; }
}

@media(max-width:720px) {
 body.fine-adjusting #selectionHelp, body.fine-adjusting #ballSizeSlider { display:none; }
}
@media(max-width:950px) and (max-height:520px) and (orientation:landscape) {
 body.selecting header, body.selecting .flow-heading { display:none; }
 body.selecting .selection-bar { position:fixed; left:auto; right:4px; top:4px; bottom:4px; width:52vw; max-height:calc(100svh - 8px); margin:0; padding:10px; overflow:auto; border-radius:12px; }
 body.selecting .workspace { width:calc(48vw - 20px); position:static; }
 body.selecting .viewer.marking { height:calc(100svh - 24px); max-height:none; min-height:120px; }
 body.selecting .transport, body.selecting .quick-tools, body.selecting aside { display:none; }
 body.selecting main { padding:8px; }
 body.selecting .selection-heading strong { font-size:14px; }
 body.selecting #selectionHelp, body.selecting #ballSizeSlider { display:none; }
 body.selecting .ball-adjust-grid { gap:8px; }
 body.selecting #ballPadHelp { display:none; }
}