:root{color-scheme:light;--bg:#f8f8fc;--panel:#fff;--text:#272536;--muted:#6c6b7d;--line:#e9e8f1;--accent:#6350e9;--soft:#f0ecff;--swim:#43aedc;--rest:#efa358;--repeat:#8b70e8;--section:#60b67a;--instruction:#d880b2;font:16.8px/1.5 system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--text);background:var(--bg)}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit;color:inherit}button,a{touch-action:manipulation}button{cursor:pointer;border:1px solid var(--button-border);border-radius:7px;background:var(--panel);padding:8px 12px;white-space:normal}button:hover{border-color:var(--accent)}button:disabled{opacity:.55;cursor:default}.primary{background:var(--accent);color:#fff;border-color:var(--accent)}a{color:var(--accent)}input,select,textarea{width:100%;min-width:0;border:1px solid #d9d7e5;border-radius:7px;background:#fff;padding:8px 10px}input[type=checkbox]{width:17px;height:17px;flex-shrink:0;accent-color:var(--accent)}textarea{min-height:90px;resize:vertical}label{display:grid;gap:5px;font-size:14.4px;color:var(--muted)}h1,h2,h3,p{margin:0}h2{font-size:20.4px;font-weight:600}h3{font-size:16.8px;font-weight:600}b,strong{font-weight:600}small,.hint{font-size:14.4px;color:var(--muted)}.app{max-width:1440px;margin:auto}.appbar{padding:18px 26px;display:flex;align-items:center;gap:18px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}.brand img{display:block;width:155px;height:42px;object-fit:contain}.beta{font-size:14.4px;color:var(--muted)}nav{display:flex;flex-wrap:wrap;gap:7px}.appbar nav{margin-left:auto}main{max-width:1240px;margin:auto}.heading{padding:24px 26px;display:flex;justify-content:space-between;align-items:center;gap:20px}.heading>div:first-child{flex:1}.heading input{font-size:27.6px;font-weight:600;border-color:transparent;background:transparent;padding:0;max-width:750px}.heading input:hover{border-color:var(--line)}#saveStatus{font-size:14.4px;color:var(--muted);margin-top:6px}.stats{display:flex;gap:14px;align-items:center;white-space:nowrap;color:var(--muted);flex-wrap:wrap}.stats strong{color:var(--accent);font-size:21.6px}.workoutsettings{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:0 26px 20px;border-bottom:1px solid var(--line)}.workoutsettings label{min-width:100px}.workoutsettings>span{font-size:14.4px;color:var(--muted)}#timingState{margin-left:auto}.workspace{display:grid;grid-template-columns:var(--workout-palette-width,196px) minmax(0,1fr);border-bottom:1px solid var(--line)}.palette{padding:24px 17px;background:var(--panel);border-right:1px solid var(--line)}.palette h2{font-size:16.8px}.palette button{display:flex;align-items:center;gap:8px;text-align:left;width:100%;margin-top:12px;border:1px solid var(--edge);border-left-width:4px;background:var(--block-header-fill)}.palette label{margin-top:24px}.canvas{padding:22px;min-width:0}.canvasbar,.sectionheading{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}.canvasbar>div{display:flex;gap:6px}.selectiontools{display:flex;margin-inline-start:var(--workout-palette-width,0px);align-items:center;gap:6px;flex-wrap:wrap;padding:4px 0 6px;font-size:14.4px}.selectiontools button{padding:5px 9px}.selectiontools select{inline-size:160px;max-inline-size:100%;font-size:14.4px}.block{--edge:var(--swim);border:1px solid var(--edge);border-left-width:4px;border-radius:10px;padding:8px;background:color-mix(in srgb,var(--edge) 9%,white);min-width:0}.block[data-type=rest]{--edge:var(--rest)}.block[data-type=repeat]{--edge:var(--repeat)}.block[data-type=section]{--edge:var(--section)}.block[data-type=instruction]{--edge:var(--instruction)}#blocks,.children{display:grid;gap:12px}.children{margin-top:8px;padding-left:13px;min-width:0}.blockheader{display:flex;align-items:stretch;border:1px solid transparent;border-radius:7px;background:var(--block-header-fill);min-width:0}.blockheader:hover{border-color:var(--edge)}.blockheader:focus-within{outline:2px solid var(--accent);outline-offset:2px}.details{flex:1;min-width:0;border:0;background:transparent;text-align:left;padding:12px;display:flex;gap:10px;align-items:center}.details:hover{border:0}.details .words{flex:1;min-width:0;overflow-wrap:anywhere}.details strong{display:block}.details small{display:block;margin-top:3px}.typeicon{font-size:13.2px;font-weight:600;color:color-mix(in srgb,var(--edge) 68%,#222);min-width:22px}.pill{font-size:13.2px;padding:3px 6px;border-radius:4px;background:#fff9;color:#565268;white-space:nowrap}.drag{border:0;background:transparent;padding:10px 7px;cursor:grab;color:#686475}.drag:active{cursor:grabbing}.leaf{padding:0;background:var(--block-header-fill);border-radius:7px}.leaf>.blockheader{background:transparent;border:0}.leaf>.blockheader:hover{box-shadow:inset 0 0 0 1px var(--edge)}.block.disabled,.block.disabled .block{--edge:#909399!important}.block.disabled .pill{background:#e0e1e3;color:#53565d}.empty{padding:24px;border:1px dashed #c9c5dc;border-radius:8px;color:var(--muted);text-align:center}.children .empty{padding:12px;font-size:14.4px}.hint{margin-top:14px}.exportpanel{padding:24px 26px;background:var(--panel)}.sectionheading p{font-size:14.4px;color:var(--muted);margin-top:4px}.sectionheading label{min-width:210px}.tracklist{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:9px}.track{padding:12px;text-align:left;display:grid;gap:5px;border-radius:9px;overflow-wrap:anywhere}.track.selected{background:var(--soft);border-color:var(--accent)}.track span{color:var(--accent);font-size:14.4px}.track small{display:block}.trackdetail{font-size:14.4px;background:var(--bg);border:1px solid var(--line);padding:12px;border-radius:7px;margin-top:12px}.exportsettings{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:20px 0}.check{display:flex;align-items:center;gap:8px;font-size:15.6px}.exportbuttons{display:flex;gap:9px;align-items:center;flex-wrap:wrap}#audioStatus{margin-top:14px;font-size:15.6px}audio{width:100%;margin-top:12px}.appfooter{padding:20px 26px;font-size:14.4px;color:var(--muted);display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap}.errors{padding:15px 26px;background:#fff0ed;border-block:1px solid #efc3bd}.errors button{display:block;text-align:left;background:transparent;border:0;color:#92392b;padding:5px 0;font-size:15.6px}dialog{--edge:var(--swim);padding:24px;width:min(620px,calc(100% - 28px));max-height:calc(100% - 32px);border:1px solid var(--edge);border-top-width:4px;border-radius:14px;background:color-mix(in srgb,var(--edge) 25%,white);box-shadow:0 25px 100px #30294d44;color:var(--text)}dialog::backdrop{background:#211b354d;backdrop-filter:blur(3px)}#musicDialog{--edge:var(--repeat);width:min(760px,calc(100% - 28px))}.dialogheading{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:20px}.dialogheading h2{font-size:26.4px;margin-top:5px}.dialogheading small{font-size:13.2px;letter-spacing:.06em}.dialogheading>button{font-size:26.4px;padding:0;width:33px;height:33px;flex-shrink:0}.enablecontrol{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14.4px;color:#595667;margin-bottom:18px}.enablecontrol button{padding:7px 11px;border-color:var(--edge)}.tabs{border-bottom:1px solid #0001;padding-bottom:12px;margin-bottom:18px}.tabs button{border:0;background:#fff9;padding:7px 11px;font-size:14.4px}.tabs button.active{background:var(--accent);color:#fff}.fieldgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.full{grid-column:1/-1}#blockFields>label,#blockFields>details,#blockFields>p{margin-top:14px}#blockFields>.fieldgrid{margin-top:14px}.help{font-size:14.4px;color:#5a566a;margin-top:12px}.dialogfooter{display:flex;justify-content:flex-end;gap:9px;border-top:1px solid #0001;padding-top:18px;margin-top:22px}.formerror{color:#8f2e22;background:#fff8;padding:10px;border-radius:6px;margin-top:14px}details{border-top:1px solid #0001;padding-top:10px}summary{cursor:pointer;font-size:15.6px;font-weight:600;margin-bottom:12px}.segment{display:grid;grid-template-columns:95px 1fr 34px;gap:7px;margin:9px 0;align-items:end}.segment button{padding:8px}.file{display:flex;gap:8px;align-items:center;border:1px solid #0001;background:#fffb;border-radius:7px;padding:10px;margin-top:8px;flex-wrap:wrap}.file .filetext{flex:1;min-width:160px;overflow-wrap:anywhere}.file small{display:block;margin-top:3px}.file button{padding:5px 8px;font-size:14.4px}.file.missing{border-color:#b06930}.filetools{display:flex;gap:5px;flex-wrap:wrap}#musicStatus{font-size:14.4px;margin-top:13px}.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#29233a;color:#fff;padding:12px 18px;border-radius:8px;max-width:calc(100% - 28px);z-index:10;box-shadow:0 5px 25px #0003}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:780px){.heading{align-items:flex-start;flex-direction:column;gap:12px}.stats{font-size:14.4px}.workspace{grid-template-columns:140px minmax(0,1fr)}.palette{padding:20px 12px}.canvas{padding:18px 12px}.children{padding-left:8px}.appbar{padding:15px}.appbar nav{margin-left:0}.heading,.workoutsettings,.exportpanel{padding-inline:17px}.typeicon{display:none}.details{padding:10px 8px}.drag{padding:10px 5px}}
@media(max-width:520px){.workspace{display:block}.palette{border-right:0;border-bottom:1px solid var(--line);padding:15px}.palette #palette{display:flex;gap:6px;flex-wrap:wrap}.palette button{width:auto;margin:8px 0 0;padding:7px 9px;font-size:14.4px}.palette label{margin-top:12px}.fieldgrid{grid-template-columns:1fr}.full{grid-column:auto}.children{padding-left:5px}.block{padding:6px}.leaf{padding:0}.pill{font-size:12px}.tracklist{grid-template-columns:1fr 1fr}.workoutsettings{gap:10px}.workoutsettings label{min-width:85px}#timingState{margin-left:0}.dialogheading h2{font-size:22.8px}dialog{padding:18px}.heading input{font-size:24px}.segment{grid-template-columns:72px 1fr 33px}}
@media(pointer:coarse){button{min-height:44px}input,select,textarea{font-size:19.2px}}
.examplenote{padding:12px 26px;border-bottom:1px solid var(--line);background:var(--panel);font-size:14.4px;color:var(--muted)}#examplesDialog{--edge:var(--repeat)}.examplenotation{margin-top:18px;font-weight:600;overflow-wrap:anywhere}@media(max-width:520px){.examplenote{padding:12px 17px}}

/* Keep selection separate from hover and preserve the settings shell across tabs. */
.block.selected > .blockheader{outline:2px solid var(--accent);outline-offset:2px}
/* The header already outlines the block when its edit button receives focus. */
.blockheader > .details:focus-visible{outline:none}
#blockDialog{height:min(760px,calc(100dvh - 32px));max-height:calc(100dvh - 32px);overflow:hidden}
#blockForm{height:100%;min-height:0;display:flex;flex-direction:column;overflow-y:auto}
#blockForm > .dialogheading,#blockForm > .enablecontrol,#blockForm > .tabs,#blockForm > .dialogfooter,#blockError{flex-shrink:0}
#blockForm > .dialogheading > div:first-child{flex:1}
#dialogTitle{padding:5px 9px;border-color:var(--button-border);font:inherit}
#blockForm > .tabs{display:flex;flex-wrap:wrap;gap:6px}
#blockFields{flex:1;min-height:min(9rem,30dvh);overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;padding:3px 6px 6px 3px}
#blockForm > .dialogfooter{margin-top:12px}



.blocklisten{align-self:center;margin:6px 8px 6px 0;padding:7px 10px;background:#ffffff99;border-color:transparent;color:var(--accent);flex-shrink:0}
.previewfield{display:flex;align-items:flex-end;gap:8px;margin-top:14px;min-width:0}.previewfield>label{flex:1;min-width:0}.previewfield>.check{align-self:center}.fieldlisten{flex-shrink:0;padding:8px 10px;background:#ffffff99;color:var(--accent)}
.fieldgrid>.previewfield,.segment .previewfield{margin-top:0}
.blockpreview{flex-shrink:0;height:104px;border-top:1px solid #0001;padding-top:8px;margin-top:10px}.blockpreview>div{display:flex;align-items:center;gap:8px;justify-content:space-between}.blockpreview span{font-size:13.2px;line-height:1.3;max-height:30px;overflow:auto}.blockpreview button{padding:4px 8px;font-size:14.4px}.blockpreview audio{height:36px;margin-top:6px}

.blockpreview audio:not([src]){visibility:hidden}

/* Drag destinations occupy stable space so starting a drag does not move blocks. */
.block,.blockheader{position:relative}
.containerdrop,.workoutdrop{border:1px dashed #c9c5dc;border-radius:7px;text-align:center;font-size:13.2px;color:var(--muted);padding:7px 10px;min-height:32px}
.containerdrop:not(.emptydrop){visibility:hidden}
.emptydrop{padding:17px 10px}
.workoutdrop{margin-top:2px;padding:13px 10px;min-height:46px}
.is-dragging .containerdrop{visibility:visible}
.is-dragging .workoutdrop,.is-dragging .containerdrop{border-color:var(--accent);background:var(--soft)}
.dragging-block{opacity:.45}
.drop-inside{outline:2px solid var(--accent);outline-offset:2px;background:#e4ddff!important;color:var(--accent)}
.drop-before>.blockheader{box-shadow:0 -3px 0 var(--accent)}
.drop-after>.blockheader{box-shadow:0 3px 0 var(--accent)}
.drop-before>.blockheader::before,.drop-after>.blockheader::after{position:absolute;right:5px;z-index:2;content:attr(data-drop-label);background:var(--accent);color:white;border-radius:4px;padding:2px 7px;font-size:13.2px;pointer-events:none}
.drop-before>.blockheader::before{content:'Move before this block';top:-15px}
.drop-after>.blockheader::after{content:'Move after this block';bottom:-15px}

.drag{touch-action:none;user-select:none;-webkit-user-drag:none}.is-dragging{user-select:none;cursor:grabbing}.is-dragging *{cursor:grabbing!important}

.palette [data-add]{touch-action:none;user-select:none;-webkit-user-drag:none;cursor:grab}.palette .dragging-palette{opacity:.45;cursor:grabbing}
:is(.block,.palette button,#addTarget,#addTarget option){--block-header-fill:color-mix(in srgb,var(--edge) 25%,white)}
.palette button:not(:disabled):hover{box-shadow:inset 0 0 0 1px var(--edge)}
.palette .typeicon{display:grid;place-items:center;flex:0 0 22px;line-height:1}
@supports (appearance:base-select) and selector(::picker(select)){
 #addTarget,#addTarget::picker(select){appearance:base-select}
 #addTarget,#addTarget option{
  --edge:var(--section-edge);
  --destination-fill:var(--workout-banner);
  background:var(--destination-fill);
  border:1px solid var(--edge);
  border-inline-start-width:4px;
 }
 #addTarget:is(:has(option[data-destination=section]:checked),:has(option[data-destination=repeat]:checked)),
 #addTarget option:is([data-destination=section],[data-destination=repeat]){
  --destination-fill:var(--block-header-fill);
 }
 #addTarget:has(option[data-destination=section]:checked),#addTarget option[data-destination=section]{--edge:var(--section)}
 #addTarget:has(option[data-destination=repeat]:checked),#addTarget option[data-destination=repeat]{--edge:var(--repeat)}
 #addTarget{gap:4px;align-items:center;padding-inline:6px;min-height:36px}
 #workoutSection #addTarget>button{display:contents}
 #addTarget::picker(select){
  inline-size:max-content;
  min-inline-size:anchor-size(width);
  max-inline-size:min(24rem,calc(100vw - 24px));
  max-block-size:min(22rem,50dvh);
  border:1px solid var(--button-border);
  border-radius:7px;
  padding:4px;
  background:var(--panel);
 }
 #addTarget option,#addTarget selectedcontent{display:flex;align-items:center;gap:6px;min-width:0}
 #addTarget option{padding:6px;border-radius:4px;overflow-wrap:anywhere}
 #addTarget option+option{margin-top:3px}
 #addTarget option:is(:hover,:focus-visible){box-shadow:inset 0 0 0 1px var(--edge)}
 #addTarget option::checkmark{order:1;margin-inline-start:auto}
 #addTarget selectedcontent .destination-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
.is-dragging .drop-before[data-drop-label="Add before this block"]>.blockheader::before{content:'Add before this block'}.is-dragging .drop-after[data-drop-label="Add after this block"]>.blockheader::after{content:'Add after this block'}

/* Page Header, Workout Title box, Workout Header, Workout Body and Block Palette. */
:root{--page-header-height:67px;--title-box-height:160px;--editor-sticky-top:calc(var(--page-header-height) + var(--title-box-height))}
html{scroll-padding-top:calc(var(--editor-sticky-top) + 100px);overflow-anchor:none}
.appbar{position:sticky;top:0;z-index:50;padding-block:12px}
.workouttitlebox{position:sticky;top:var(--page-header-height);z-index:40;background:var(--bg);border-bottom:1px solid var(--line)}
.heading{padding-block:10px;gap:12px}
.heading>div:first-child{min-width:0}
.titlelabel{display:block;font-size:13.2px;margin-bottom:4px;color:var(--muted)}
.titleinput{position:relative;max-width:750px}
.heading .titleinput input{display:block;width:100%;max-width:none;padding:6px 34px 6px 10px;border:1px solid #d9d7e5;border-radius:7px;background:var(--panel);font-size:26.4px}
.heading .titleinput input:hover{border-color:var(--accent)}
.titleinput>span{position:absolute;right:11px;top:50%;transform:translateY(-50%);color:var(--accent);font-size:24px;pointer-events:none}
.workoutsettings{padding-bottom:12px;border-bottom:0;gap:16px}
.palette{position:sticky;top:var(--editor-sticky-top);align-self:start;max-height:calc(100dvh - var(--editor-sticky-top));overflow-y:auto;overscroll-behavior:contain;padding-top:12px;z-index:25}
.canvas{padding-top:0}
.workoutheader{position:sticky;top:var(--editor-sticky-top);z-index:30;background:var(--bg);padding:12px 0 6px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.workoutheader .canvasbar{margin-bottom:4px}

.editor-scrolled .workoutsettings>label{display:none}
.editor-scrolled .workoutsettings{padding-bottom:5px;gap:12px}

.editor-scrolled .palette,.editor-scrolled .workoutheader{padding-top:8px}
.editor-scrolled .palette button{margin-top:8px}
.editor-scrolled .palette label{margin-top:12px}
@media(max-width:780px){
 .heading{gap:6px}
 .heading>div:first-child{width:100%}
 .heading .titleinput input{font-size:22.8px}
 .stats{gap:10px}
 .workoutsettings{gap:10px}
 .workoutsettings>label{min-width:82px;flex:1}
 #timingState{margin-left:0}
 .palette{padding-inline:10px}
 .palette label{margin-top:14px}
 .workoutheader{padding-top:12px}
 .editor-scrolled .workoutsettings #timingState{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
 .editor-scrolled .workoutsettings{flex-wrap:nowrap}
}

.palettecolumn{min-width:0;background:var(--panel)}
.palette{position:static;width:100%}
.workoutheader-slot{height:var(--workout-header-height,99px);margin-bottom:10px}
.workoutheader{position:relative;top:auto;margin-bottom:0}
.editor-workspace-pinned .palette{position:fixed;top:var(--editor-sticky-top);left:var(--palette-left);width:var(--palette-width);transform:translateY(var(--palette-scroll-offset,0px))}
.editor-workspace-pinned .workoutheader{position:fixed;top:var(--editor-sticky-top);left:var(--workout-header-left);width:var(--workout-header-width);transform:translateY(var(--workout-header-scroll-offset,0px))}

/* Keep lower-page controls clear of the pinned palette. */
.exportpanel,.errors{margin-left:170px}
.exportpanel .sectionheading label{min-width:0;width:min(210px,100%)}
@media(max-width:780px){
 .exportpanel,.errors{margin-left:140px}
 .appbar{gap:7px 10px;padding-inline:12px}
 .appbar .brand img{width:135px;height:36px}
 .appbar .beta{font-size:12px}
 .appbar nav{gap:4px}
 .appbar nav button{font-size:14.4px;padding:6px 8px}
 .workoutheader .canvasbar>div button{font-size:14.4px;padding:6px 8px}
}

@media(max-width:520px){
 .palettecolumn{min-height:var(--palette-height,0px)}
 .palette{padding:12px 10px 8px}
 .palette #palette{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;gap:5px;margin-top:6px}
 .palette #palette button{flex:0 0 auto;margin:0;font-size:13.2px;padding:6px 8px;white-space:nowrap}
 .palette label{display:flex;align-items:center;gap:8px;margin-top:4px}
 .palette label select{width:auto;flex:1;max-width:230px;padding-block:5px}
 .editor-scrolled .palette h2{display:none}
 .editor-scrolled .palette #palette{margin-top:0}
 .exportpanel,.errors{margin-left:0}
 html{scroll-padding-top:calc(var(--editor-sticky-top) + var(--palette-height) + 100px)}
}

@media(max-width:520px){
 .appbar nav{width:100%;flex-wrap:nowrap;overflow-x:auto}
 .appbar nav button{flex-shrink:0;font-size:13.2px;padding-inline:5px}
 .palette #palette{scrollbar-width:thin}
 .palette label select{font-size:14.4px}


}

/* Tighten spacing without scaling text or controls when scrolling. */
.stats{gap:10px}
.audiotiming{display:grid;gap:0;white-space:normal}
#timingState{margin:0;font-size:14.4px;color:var(--muted)}
.workoutsettings{gap:12px}
.editor-scrolled .workoutsettings{padding:0}
@media(max-width:780px){.audiotiming{min-width:0}}

/* A themed, explicit backup choice before replacing the workout. */
#newWorkoutDialog{--edge:var(--repeat);width:min(640px,calc(100% - 28px))}
#newWorkoutDialog .backupsummary{margin-top:18px;padding:14px;border:1px solid #fff9;border-radius:9px;background:#ffffff70}
.backupsummary>small{font-size:13.2px;letter-spacing:.06em}
.backupsummary>strong{display:block;margin-top:4px;overflow-wrap:anywhere}
.backupsummary>p{margin-top:8px;font-size:14.4px;color:var(--muted)}
#newWorkoutDialog .dialogfooter{flex-wrap:wrap}
@media(max-width:520px){#newWorkoutDialog .dialogfooter>button{width:100%}}

/* Help links retain normal navigation semantics and leave editor drafts open. */
.navlink{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border:1px solid var(--line);border-radius:7px;background:var(--panel);padding:8px 12px;text-decoration:none;color:inherit}
.navlink:hover{border-color:var(--accent)}
.dialogactions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.dialogactions>button,.dialogactions>a{font:inherit;font-size:26.4px;padding:0;width:33px;height:33px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid var(--button-border);border-radius:7px;background:var(--panel);text-decoration:none;color:inherit}
.dialogactions>a:hover{border-color:var(--accent)}
a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:780px){.appbar .navlink{font-size:14.4px;padding:6px 8px}}
@media(max-width:520px){.appbar .navlink{flex-shrink:0;font-size:13.2px;padding-inline:5px}}
@media(pointer:coarse){.dialogactions>button,.dialogactions>a{min-height:44px;min-width:44px}}

/* Keep validation messages beside the block name, wrapping within narrow cards. */
.blockname{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;min-width:0}
.blockname>strong{flex:0 1 auto;min-width:0}
.blockerrors{display:inline-flex;align-items:baseline;gap:6px;flex:1 1 200px;min-width:0;font-size:14.4px;line-height:1.4;color:#92392b;font-weight:500;text-align:left;overflow-wrap:anywhere}
.blockerrors[hidden]{display:none}
.blockerroricon{flex-shrink:0;color:#946000;font-size:19.2px}
.blockerrormessages{min-width:0}
.blockerrormessages>span{display:block}
.dialogheading>div:first-child{min-width:0}
.dialogblockerrors{margin-top:8px;font-size:15.6px;max-height:min(8rem,18dvh);overflow-y:auto;overscroll-behavior:contain}

:root{--metronome:#2d9b9a}.block[data-type=metronome]{--edge:var(--metronome)}.rhythmsummary,.rhythmreview{font-size:14.4px;overflow-wrap:anywhere;background:#ffffff99;border:1px solid #0002;border-radius:6px;padding:10px;margin-top:12px}.rhythmreview label{margin-top:10px}#rhythmReviewDialog{--edge:var(--metronome)}#rhythmOmissions{max-height:45vh;overflow:auto}#rhythmOmissions li{margin:10px 0;overflow-wrap:anywhere}.rhythmcount{display:block;font-size:14.4px;color:var(--muted);margin-top:4px}

.rhythmreview pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13.2px;max-height:200px;overflow:auto}

/* Block navigation sits directly below Help and Close, in the same button style. */
.dialogactions.blockdialogactions{display:grid;grid-template-columns:repeat(2,44px);gap:8px}

/* Four-section editor with persistent section shortcuts. */
:root{--section-rail-width:140px}
.editor-layout{display:grid;grid-template-columns:var(--section-rail-width) minmax(0,1fr);gap:16px;padding:12px 16px 0}
.editor-content{min-width:0}.sectionnav{position:sticky;top:calc(var(--editor-sticky-top) + 12px);align-self:start;display:flex;flex-direction:column;gap:8px;max-height:calc(100dvh - var(--editor-sticky-top) - 24px);overflow-y:auto;padding:8px;background:var(--panel);border:1px solid var(--line);border-radius:9px;z-index:35}
.sectionnav a{display:block;padding:10px 8px;border-radius:6px;text-decoration:none;overflow-wrap:anywhere;line-height:1.4;font-weight:600}.sectionnav a:hover,.sectionnav a[aria-current=location]{background:var(--soft)}
.editor-section{padding:18px;background:var(--panel);border:1px solid var(--line);border-radius:10px;margin-bottom:18px}.editor-section>h2{margin-bottom:16px}
#settingsSection .workoutsettings{padding:0;gap:16px}.editor-scrolled #settingsSection .workoutsettings>label{display:grid}.editor-scrolled #settingsSection #musicSummary{display:block}
#settingsSection .workoutsettings{flex-wrap:wrap}
.voice-setting{display:flex;align-items:flex-end;gap:8px;max-width:100%}
.voice-setting label{min-width:0}
#voiceSampleStatus{flex-basis:100%}
#voiceSampleStatus:empty{display:none}
.workout-section{--workout-palette-width:196px;min-width:0;border:1px solid var(--line);border-radius:10px;margin-bottom:18px}
.workout-section>.workoutheader-slot{margin-bottom:0}.workoutheader{padding:12px 16px 6px;border-radius:9px 9px 0 0}
.workspace{border-bottom:0}.canvas{padding:16px;min-height:180px}.palettecolumn{min-width:0;min-height:var(--palette-height,0px)}
.editor-workspace-pinned .palette{top:calc(var(--editor-sticky-top) + var(--workout-header-height));max-height:calc(100dvh - var(--editor-sticky-top) - var(--workout-header-height))}
.editor-workspace-pinned .workoutheader{top:var(--editor-sticky-top)}
.editor-content>.exportpanel,.editor-content>.errors{margin-left:0}.editor-content>.exportpanel{padding:18px;border:1px solid var(--line);border-radius:10px}
#workoutPlaylistContent .library-selections{padding-left:22px}#workoutPlaylistContent .library-selections li{overflow-wrap:anywhere;padding:6px 0}#workoutPlaylistContent .library-selections button{margin-left:6px}.playlist-summary{color:var(--muted);margin-bottom:12px}.playlist-empty{padding:14px;border:1px dashed var(--line);border-radius:7px;color:var(--muted);margin-top:12px}
.editor-section,.workout-section,#exportSection{scroll-margin-top:calc(var(--editor-sticky-top) + 12px)}
@media(max-width:780px){:root{--section-rail-width:112px}.editor-layout{gap:10px;padding-inline:10px}.sectionnav{padding:5px}.sectionnav a{padding:9px 5px;font-size:14.4px}.workout-section{--workout-palette-width:184px}.workspace{grid-template-columns:var(--workout-palette-width,184px) minmax(0,1fr)}}
@media(max-width:520px){:root{--section-rail-width:80px}.editor-layout{gap:6px;padding-inline:5px}.sectionnav{padding:3px}.sectionnav a{padding:8px 3px;font-size:13.2px}.editor-section,.editor-content>.exportpanel{padding:12px}.workout-section{--workout-palette-width:0px}.workspace{display:block}.canvas{padding:10px}.palettecolumn{min-height:var(--palette-height,0px)}.workoutheader{padding-inline:10px}.workoutheader .canvasbar>div button{padding:5px}.workoutheader .canvasbar{gap:5px}.editor-workspace-pinned .palette{max-height:min(160px,calc(100dvh - var(--editor-sticky-top) - var(--workout-header-height) - 30px))}.workoutsettings>label{min-width:0}.sectionnav{max-height:calc(100dvh - var(--editor-sticky-top) - 12px)}}

.canvas>.examplenote{padding:10px;margin-bottom:12px}

/* Section banners and shortcuts share one colour per section. */
:root{--settings-banner:#dcecfb;--playlist-banner:#ece1fb;--workout-banner:#d8f0df;--export-banner:#fff0c9}
#saveStatus:empty{display:none}
#settingsSection,.sectionnav a[href="#settingsSection"]{--section-banner:var(--settings-banner)}
#workoutPlaylistSection,.sectionnav a[href="#workoutPlaylistSection"]{--section-banner:var(--playlist-banner)}
#workoutSection,.sectionnav a[href="#workoutSection"]{--section-banner:var(--workout-banner)}
#exportSection,.sectionnav a[href="#exportSection"]{--section-banner:var(--export-banner)}
.editor-section>h2{margin:-18px -18px 16px;padding:12px 18px;background:var(--section-banner);border-radius:9px 9px 0 0;color:var(--text)}
.workoutheader{background:var(--workout-banner)}
.sectionnav a,.sectionnav a:hover,.sectionnav a[aria-current=location]{background:var(--section-banner);color:var(--text);border:1px solid transparent}
.sectionnav a[aria-current=location]{box-shadow:inset 0 0 0 2px var(--section-edge)}
@media(max-width:520px){.editor-section>h2{margin:-12px -12px 16px;padding:12px}}

/* Allow the final section to align below pinned chrome even on tall screens. */
#exportSection{min-height:calc(100dvh - var(--editor-sticky-top) - 12px)}
/* Strengthen white and translucent-white controls without changing block colours. */
:root{--button-border:#8b8d9b}
.appbar .navlink,.enablecontrol button,.fieldlisten,.blocklisten{border-color:var(--button-border)}
.tabs button:not(.active){border:1px solid var(--button-border)}

/* Keep playback actions clear of the final row and its focus outline. */
#workoutPlaybackSettings{display:grid;gap:12px;margin:12px 0}
#workoutPlaybackSettings>button{justify-self:start;max-width:100%}
#backgroundMP3Settings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:12px;min-inline-size:0;margin:0;padding:12px;border:1px solid var(--button-border);border-radius:7px}
#backgroundMP3Settings:disabled{background:#f0f0f2;border-color:#c9c9ce}
#backgroundMP3Settings:disabled label{color:#65656d}
#backgroundMP3Settings :disabled{background:#e7e7eb;color:#65656d}
#workoutPlaybackStatus{margin:0 0 12px;color:#8f2e22;font-size:14.4px}
#workoutPlaybackStatus:empty{display:none}
@media(max-width:520px){
 #backgroundMP3Settings{gap:6px;padding:8px}
 #backgroundMP3Settings input,#backgroundMP3Settings select{padding-inline:4px;font-size:14.4px}
}
/* Give the four sections and their shortcuts the block-style coloured edge. */
#settingsSection,.sectionnav a[href="#settingsSection"]{--section-edge:#4785b5}
#workoutPlaylistSection,.sectionnav a[href="#workoutPlaylistSection"]{--section-edge:#8b70c6}
#workoutSection,.sectionnav a[href="#workoutSection"]{--section-edge:#4b9663}
#exportSection,.sectionnav a[href="#exportSection"]{--section-edge:#ba8b25}
.editor-section,.workout-section,.editor-content>.exportpanel{border:1px solid var(--section-edge);border-left-width:4px}
.sectionnav a,.sectionnav a:hover,.sectionnav a[aria-current=location]{border:1px solid var(--section-edge);border-left-width:4px}

/* Block settings share one row; tabs scroll horizontally on narrow dialogs. */
.blocksettingsbar{gap:8px;align-items:center;padding-bottom:12px;border-bottom:1px solid #0001}
.blocksettingsbar>.tabs{flex:1;min-width:0;display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;scrollbar-width:thin;margin:0;padding:0;border:0}
.blocksettingsbar>.tabs>button{flex-shrink:0}
.blocksettingsbar>#toggleEnabled{flex-shrink:0;margin-left:auto}
/* Align the pinned Workout bounding box with the section-menu bounding box. */
:root{--workout-sticky-top:calc(var(--editor-sticky-top) + 12px)}
.sectionnav{top:var(--workout-sticky-top)}
.editor-workspace-pinned .workoutheader{top:var(--workout-sticky-top)}
.editor-workspace-pinned .palette{top:calc(var(--workout-sticky-top) + var(--workout-header-height));max-height:calc(100dvh - var(--workout-sticky-top) - var(--workout-header-height))}
@media(max-width:520px){.editor-workspace-pinned .palette{max-height:min(160px,calc(100dvh - var(--workout-sticky-top) - var(--workout-header-height) - 30px))}}

/* Keep the coloured section frame attached to its pinned header. */
:is(.editor-workspace-pinned #workoutSection,.section-header-pinned){border-color:transparent}
:is(.editor-workspace-pinned #workoutSection,.section-header-pinned)::before{content:"";position:fixed;box-sizing:border-box;pointer-events:none;z-index:31;border:1px solid var(--section-edge);border-left-width:4px;border-radius:10px}
.editor-workspace-pinned #workoutSection::before{left:var(--workout-frame-left);top:var(--workout-frame-top);width:var(--workout-frame-width);height:var(--workout-frame-height)}
.section-header-pinned::before{left:var(--section-frame-left);top:var(--workout-sticky-top);width:var(--section-frame-width);height:var(--section-frame-height)}
/* Cover scrolled content in the twelve-pixel gap above the pinned header. */
:is(.editor-workspace-pinned #workoutSection,.section-header-pinned)::after{content:"";position:fixed;pointer-events:none;z-index:32;top:var(--editor-sticky-top);height:12px;background:var(--bg)}
.editor-workspace-pinned #workoutSection::after{left:var(--workout-frame-left);width:var(--workout-frame-width)}
.section-header-pinned::after{left:var(--section-frame-left);width:var(--section-frame-width)}

:is(#settingsSection,#workoutPlaylistSection,#workoutSection,#exportSection) button:not(.details,.drag,[data-add]){
 background-color:color-mix(in srgb,var(--section-banner) 45%,white);
 border-color:var(--section-edge);
}
:is(#settingsSection,#workoutPlaylistSection,#workoutSection,#exportSection) button:not(.details,.drag,[data-add],:disabled):hover{
 background-color:color-mix(in srgb,var(--section-banner) 75%,white);
}
:is(#settingsSection,#workoutPlaylistSection,#workoutSection,#exportSection) button.primary{
 color:var(--text);
}
#exportSection button.track.selected{background-color:var(--section-banner);box-shadow:inset 0 0 0 1px var(--section-edge)}

audio.waveform-active{display:none}
.preview-waveform{margin-top:12px}
.waveform-timeline{position:relative;display:grid;gap:8px;isolation:isolate}
.waveform-lane{position:relative;min-width:0;background:#e7f2f8;border-radius:6px;overflow:hidden;color:#215b7a}
.waveform-mp3{background:#f0eafd;color:#6546a2}
.waveform-tracks{background:#f0eafd;color:#432974}
.waveform-blocks{background:#f2f3f7;color:var(--text)}
.waveform-exports{background:var(--export-banner);color:var(--text)}
.waveform-ruler{background:#edf0f5;color:var(--text)}
.waveform-ruler-scale{position:relative;height:27px;border-top:1px solid #a9adba;font-variant-numeric:tabular-nums}
.waveform-ruler-tick{position:absolute;top:0;padding-top:5px;white-space:nowrap}
.waveform-ruler-tick::before{content:"";position:absolute;top:0;left:0;height:5px;border-left:1px solid #767c8e}
.waveform-ruler .waveform-ruler-tick span{padding:0;transform:translateX(-50%)}
.waveform-ruler .waveform-ruler-tick[data-edge=start] span{transform:none;padding-left:3px}
.waveform-ruler .waveform-ruler-tick[data-edge=end] span{transform:translateX(-100%);padding-right:3px}
.waveform-ruler-tick[data-edge=end]::before{left:-1px}
.waveform-lane>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.waveform-track-strip{position:relative;height:calc(23px * var(--timeline-depth,1))}
.waveform-track-strip .waveform-track-segment{position:absolute;top:calc(23px * var(--timeline-level,0));height:23px;padding:1px 0;text-indent:3px;box-shadow:inset 1px 0 var(--segment-edge),inset -1px 0 var(--segment-edge);background:color-mix(in srgb,var(--segment-color) 35%,white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.waveform-tracks{--segment-color:#a58ad9;--segment-edge:#6546a2}
.waveform-exports{--segment-color:var(--section-edge);--segment-edge:var(--section-edge)}
.waveform-blocks .waveform-track-segment{--segment-edge:var(--segment-color)}
.waveform-tracks .waveform-track-segment:nth-child(even),.waveform-exports .waveform-track-segment:nth-child(even){background:color-mix(in srgb,var(--segment-color) 55%,white)}
.waveform-track-strip .waveform-point{min-width:2px;background:var(--segment-color)}
.waveform-lane span{display:block;font-size:13.2px;font-weight:600;padding:1px 8px}
.waveform-lane svg{display:block;width:100%;height:32px;background:linear-gradient(currentColor,currentColor) center/100% 1px no-repeat}
.waveform-peaks,.waveform-markers{fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke}
.waveform-markers{stroke:#234052;stroke-dasharray:2 2;opacity:.75}
.waveform-playhead{position:absolute;inset-block:0;left:var(--playhead,0%);width:2px;background:#241952;pointer-events:none}
.waveform-timeline input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:none}
.waveform-timeline:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.waveform-controls{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin-top:8px;font-size:14.4px}
.waveform-controls button{padding:5px 8px}
.waveform-controls [data-jump-color=cue]{--jump-color:var(--instruction)}
.waveform-controls [data-jump-color=block]{--jump-color:var(--section)}
.waveform-controls [data-jump-color=mp3]{--jump-color:var(--section-edge,#ba8b25)}
.waveform-controls button[data-jump-color],#exportSection .waveform-controls button[data-jump-color]{
 background-color:color-mix(in srgb,var(--jump-color) 28%,white);
 border-color:color-mix(in srgb,var(--jump-color) 75%,#333);
}
.waveform-controls [data-play]{display:grid;place-items:center;flex:0 0 44px;width:44px}
.waveform-controls [data-play] svg{width:1.5em;height:1.5em;fill:currentColor}
.waveform-controls label{display:flex;align-items:center;gap:4px}
.waveform-controls input{width:70px;padding:0;accent-color:var(--accent)}
.blockpreview:has(.preview-waveform:not([hidden])){height:auto;max-height:48%;overflow:auto}
.blockpreview>.preview-waveform{display:block}

@media(pointer:coarse){.palette [data-add]{touch-action:auto}.waveform-timeline input{touch-action:pan-y}}
@media(max-width:520px){#backgroundMP3Settings{grid-template-columns:minmax(0,1fr)}}

#saveConflictActions:not([hidden]){display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.4rem}

.block-selection-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
#blockSelectionLabel {
  margin: 0;
  color: var(--muted);
  font-size: 14.4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#clearBlockSelection { padding: 4px 8px; font-size: 14.4px; }
.selectiontools button[data-action=up], .selectiontools button[data-action=down] { inline-size: 34px; }
.selectiontools button:disabled, .selectiontools select:disabled, #clearBlockSelection:disabled {
  color: var(--muted);
  background: var(--bg);
  border-color: var(--line);
  opacity: .65;
  cursor: not-allowed;
}

/* The slot stays in the document when a header pins to the section menu. */
.section-header-slot {
  height: var(--section-header-height, auto);
  margin: -18px -18px 16px;
}
.section-header {
  padding: 12px 18px;
  background: var(--section-banner);
  border-radius: 9px 9px 0 0;
}
.exportheader { border-bottom: 1px solid var(--line); }
#exportTitle { margin: 0 0 6px; }
.section-header-pinned .section-header {
  position: fixed;
  top: var(--workout-sticky-top);
  left: var(--section-header-left);
  width: var(--section-header-width);
  z-index: 29;
}
@media (max-width: 520px) {
  .section-header-slot { margin: -12px -12px 16px; }
  .section-header { padding: 12px; }
}
.exportbuttons #export { inline-size: min(11.5rem, 100%); }
.exportbuttons #download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: min(14.5rem, 100%);
  padding: 8px 12px;
  border: 1px solid var(--section-edge);
  border-radius: 7px;
  color: var(--text);
  background: var(--panel);
  text-align: center;
  text-decoration: none;
}
.exportbuttons button:disabled, .exportbuttons #download[aria-disabled=true] {
  color: var(--muted);
  background: var(--bg);
  border-color: var(--line);
  opacity: .65;
  cursor: not-allowed;
}