/* Shared Backwerd workspace chrome: the Help, Feedback and About nav and the three dialogs.
   Pulse Pocket's laptop rules follow the shared rules. */
.workspace-actions { display:flex; align-items:center; gap:8px; margin-left:auto; flex:none; }
.workspace-actions button,.workspace-dialog-heading button { min-height:44px; padding:8px 14px; border:1px solid var(--line); border-radius:8px; background:var(--white); color:var(--ink); font:600 1rem var(--body); cursor:pointer; }
.workspace-actions button { position:relative; display:inline-flex; align-items:center; gap:6px; }
.workspace-actions svg { width:18px; height:18px; flex:none; }
.workspace-actions .ws-label { white-space:nowrap; }
/* Below 600px the icons carry the actions and each name is kept, visually hidden, for screen
   readers. Every button stays a 44px target, with 8px of padding around its icon. */
@media (max-width:599px) {
  .workspace-actions button { min-width:44px; justify-content:center; padding:8px; }
  .workspace-actions .ws-label { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
}
.workspace-actions button:focus-visible,.workspace-dialog :focus-visible { outline:3px solid var(--forest); outline-offset:3px; }
header .brs-home { margin-left:4px; }
.workspace-dialog { box-sizing:border-box; width:min(720px,calc(100% - 32px)); max-height:calc(100dvh - 32px); padding:22px; overflow:auto; overscroll-behavior:contain; border:2px solid var(--ink); border-radius:14px; background:var(--white); color:var(--ink); font:1rem/1.5 var(--body); }
.workspace-dialog::backdrop { background:rgba(0,0,0,.5); }
.workspace-dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
.workspace-dialog-heading h2 { margin:0; padding:0; border:0; color:inherit; font-family:var(--display); font-weight:800; font-size:1.6rem; line-height:1.1; text-transform:uppercase; }
.workspace-dialog [hidden] { display:none; }
.workspace-dialog p { margin:0 0 12px; }
.workspace-dialog a { color:var(--ink); text-underline-offset:3px; }
.workspace-dialog a:focus-visible { outline:3px solid var(--forest); outline-offset:2px; }
.workspace-dialog .dialog-links { display:flex; flex-wrap:wrap; column-gap:22px; row-gap:4px; margin:0 0 12px; }
.workspace-dialog .dialog-links a,.workspace-dialog .text-action { display:inline-flex; align-items:center; gap:6px; min-height:44px; font-weight:700; }
.workspace-dialog .dialog-links svg,.workspace-dialog .text-action svg { width:16px; height:16px; flex:none; }
.workspace-dialog .dialog-build,.workspace-dialog .dialog-copy { color:var(--ink-soft); font-size:.92rem; }
.workspace-dialog .dialog-copy { margin:12px 0 0; }
@media (max-width:700px) { .workspace-dialog { padding:16px; } }
@media print { .workspace-actions,.workspace-dialog { display:none; } }

/* Pulse Pocket local pilot: settings beside the music from iPad portrait upward.
   Transport stays in its existing bottom dock; view controls never change audio state. */
.view-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px;grid-column:1 / -1}
.view-tools .settings-toggle{display:flex;width:auto;min-width:130px}
.view-tools .mini{min-height:48px}
.device-display{margin-bottom:10px;border:1.5px solid var(--tan-line);border-radius:8px;background:var(--white);padding:6px 10px}
.device-display summary{cursor:pointer;min-height:44px;display:list-item;align-content:center;font-weight:700}
.device-options{display:grid;gap:10px;padding:8px 0}
.device-options .setting-help{padding:0}
.device-options select{width:100%}
.settings-body[inert],.settings-body[data-open="false"]{display:none!important}
.settings-card:has(.settings-body[inert]){display:none!important}
button,select,summary,.switch{touch-action:manipulation}
button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--forest);outline-offset:2px}
.switch{min-height:44px}
.sub-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
.sub-tabs button,.tip-btn,select,.link-btn{min-height:44px}
.tip-btn{min-width:44px;width:44px;height:44px}
.settings-card .panel h2{flex-wrap:wrap;gap:6px;letter-spacing:.08em}
.settings-card .h2-switch{margin-left:0}
.settings-card .cols{grid-template-columns:minmax(0,1fr)}
.settings-card .row{flex-wrap:wrap}
@media(min-width:701px){
  body{padding:8px 16px calc(var(--dock-h,84px) + 28px)}
  .wrap{max-width:1480px}
  .wrap>header.brand{margin-bottom:10px;padding-bottom:8px}
  .grid{grid-template-columns:minmax(0,1fr) clamp(260px,28vw,340px);grid-template-rows:auto auto minmax(250px,1fr);height:auto;min-height:calc(100dvh - var(--dock-h,84px) - 110px);gap:12px}
  .grid>.view-tools{grid-area:1 / 1 / 2 / 3}
  .grid>section.panel:first-of-type{grid-area:2 / 1 / 3 / 2}
  .grid>section.panel:nth-of-type(2){grid-area:3 / 1 / 4 / 2;min-height:250px}
  .grid>.settings-card{grid-area:2 / 2 / 4 / 3;overflow:visible}
  .settings-body[data-open="true"]{display:flex;flex-direction:column;position:sticky;top:8px;flex:none;max-height:var(--settings-h,70dvh);min-height:0}
  .settings-body>.cols{flex:1 1 auto;overflow-y:auto;min-height:0;padding:0 6px 8px 0}
  .device-display{flex:none;max-height:50%;overflow:auto}
  .phone-tabs{flex:none}
  .grid[data-panel-side="left"]{grid-template-columns:clamp(260px,28vw,340px) minmax(0,1fr)}
  .grid[data-panel-side="left"]>section.panel:first-of-type{grid-column:2}
  .grid[data-panel-side="left"]>section.panel:nth-of-type(2){grid-column:2}
  .grid[data-panel-side="left"]>.settings-card{grid-column:1}
  .grid[data-settings-open="false"]{grid-template-columns:minmax(0,1fr)}
  .grid[data-settings-open="false"]>.view-tools,.grid[data-settings-open="false"]>section.panel:nth-of-type(n){grid-column:1}
  .panel{padding:12px}
  .transport{gap:10px 16px}
  .grid .staff{padding-block:12px}
}
@media(min-width:701px) and (max-width:1000px){
  .transport{grid-template-columns:minmax(0,1fr)}
  .tempo-top{flex-wrap:wrap}
  .tempo-word{margin-left:0}
  .vol{grid-template-columns:auto minmax(0,1fr)}
  .beat-svg{zoom:1.1}
  .beat-cell{min-width:70px}
  header.brand{flex-wrap:wrap;row-gap:8px}
}
@media(max-width:700px){
  .grid>.view-tools{order:-1;position:relative;z-index:31;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:8px}
  .view-tools .mini{font-size:.9rem;padding:6px;min-width:0}
  .view-tools .settings-toggle{min-width:0;gap:8px;padding:6px}
  .settings-card{position:static}
  .settings-body[data-open="true"]{position:fixed;top:var(--settings-top,150px);left:12px;right:12px;bottom:calc(var(--dock-h,84px) + 12px);max-height:var(--settings-h,60dvh)!important;margin:0;z-index:32;overflow:auto}
  .settings-body>.cols{overflow:visible}
  .settings-card .phone-tabs{top:0}
}
.grid.notation-focus>section.panel:first-of-type{display:contents}
.grid.notation-focus>section.panel:first-of-type>.beat-lights,.grid.notation-focus>section.panel:first-of-type>.transport{display:none}
.grid.notation-focus>section.panel:nth-of-type(2){grid-row:2 / 4;grid-column:1 / -1}
.grid.notation-focus .staff{min-height:300px}
.classroom-display .panel h2{font-size:1rem;letter-spacing:.06em}
.classroom-display .rhythm-how{font-size:1rem}
.classroom-display .beat-svg{zoom:1.8}
.classroom-display .beat-cell{min-width:100px;gap:16px}
.classroom-display .beat-select{font-size:1.15rem}
.classroom-display button,.classroom-display select,.classroom-display summary,.classroom-display .switch{min-height:56px}
.classroom-display .tip-btn{min-width:56px;height:56px}
.classroom-display .dock-tempo .mini{width:56px;height:56px}
.classroom-display .dock-play{min-height:64px}
.classroom-display .dock-bar{max-width:760px;gap:16px}
.classroom-display .row,.classroom-display .tempo-controls{gap:12px}
@media(max-width:450px){.classroom-display .dock-bar{gap:8px}.classroom-display .dock-share{min-width:44px;width:44px}.classroom-display .dock-tempo{gap:4px}.classroom-display .dock-bpm{min-width:2.8rem}}
@media(prefers-reduced-motion:reduce){.settings-caret{transition:none}}
/* Targets are generous on every device; classroom sizing is an explicit choice. */
button,.chip{min-height:44px}
.light{min-width:44px;min-height:44px}
input[type=range]{min-height:44px}
@media(max-width:700px){.grid>.view-tools{position:sticky;top:8px;background:var(--warm-white)}}
/* Sound preferences belong to settings; tempo and beat accents remain next to the music. */
.transport{grid-template-columns:minmax(0,1fr)}
.sound-toggle{display:block}
.settings-card .vol,.settings-card .vol:not(.open){display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.settings-card .vol .switch,.settings-card .vol .wake-help{grid-column:auto}
.settings-card .vol>*{min-width:0}
.view-tools button[aria-pressed="true"]{background:var(--ink);color:var(--on-ink)}
.classroom-display .label-sm{font-size:1rem}
.classroom-display .timesig{font-size:3.4rem}
.classroom-display .dock-bpm b{font-size:2.2rem}
.classroom-display .beat-lights,.classroom-display .sub-tabs{gap:12px}
/* Direct note editing keeps full-size targets. */
.editing-notes .beat-cell{flex:0 0 auto;min-width:calc(var(--beat-w) + 8px)}
.editing-notes .beat-svg{width:var(--beat-w);height:auto}
.note-slot{cursor:pointer;outline:none}
.note-slot-target{stroke:#788fae;stroke-width:1;stroke-dasharray:3 2}
.note-slot[aria-pressed="false"] .note-slot-target{fill:rgba(146,166,193,.15);stroke:#4f4a47;stroke-dasharray:none}
.note-slot:focus-visible .note-slot-target{stroke:#567d46;stroke-width:3;stroke-dasharray:none}
#noteEditHelp{margin:0 0 12px;padding:0}

.view-tools button:disabled{opacity:.45;cursor:default}
/* Whole measures remain readable while phones edit one beat at full size. */
.staff{display:flex;flex-direction:column;gap:14px}
.measure-row{display:flex;align-items:stretch;gap:2px;min-width:max-content}
/* The wide staff centers its flex children. Fill its available width while
   retaining intrinsic overflow for dense, directly editable measures. */
@media(min-width:701px){.measure-row{align-self:stretch}}
.measure-row + .measure-row{border-top:2px solid #171717;padding-top:14px}
.beat-editor[hidden]{display:none}
.beat-editor{margin-top:14px;padding:14px;border:2px solid var(--ink);border-radius:8px;min-width:0}
.beat-editor-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.beat-editor-heading h3{margin:0;font-size:1rem}
.beat-editor-notes{overflow-x:auto;background:var(--paper);border-radius:6px;padding:8px;margin-bottom:10px}
.beat-editor-notes .beat-svg{width:auto;max-width:none;height:auto;display:block;margin:auto}
.beat-editor .beat-select{width:100%;max-width:none}
@media(max-width:700px){
 .staff.phone-measures{overflow-x:hidden;min-height:0;padding:10px 4px;mask-image:none;-webkit-mask-image:none}
 .phone-measures .measure-row{width:100%;min-width:0;gap:0}
 .phone-measures .timesig{font-size:1.6rem;margin:28px 3px 0 0}
 .phone-measures .ts-group{display:none}
 .phone-measures .beat-cell{flex:1 1 0;min-width:0;padding:0 2px}
 .beat-choice{display:flex;align-items:flex-start;justify-content:center;min-height:72px;width:100%;padding:6px 0;border:1px solid transparent;border-radius:5px;background:transparent;color:#171717}
 .beat-choice:hover,.beat-choice:focus-visible{border-color:#567d46;outline:2px solid #567d46;outline-offset:-2px}
 .beat-choice[aria-expanded="true"]{background:rgba(86,125,70,.12);border-color:#567d46}
 .phone-measures .beat-svg{width:calc(var(--beat-w) * var(--measure-scale,1));height:auto;flex:none}
 /* The whole-measure fit already spends the available phone width. Keep
    Classroom enlargement in the separate, scrollable selected-beat editor. */
 .classroom-display .phone-measures .beat-svg{zoom:1}
}
@media(max-width:700px){
 .grid.notation-focus .staff.phone-measures{min-height:0;flex:none}
 .phone-measures .beat-cell{gap:0}
}

.phone-beat-picker[hidden]{display:none}
.phone-beat-picker{display:flex;align-items:center;gap:10px;margin-top:12px}
.phone-beat-picker select{flex:1;min-width:0;font:inherit}
@media(max-width:700px){
 /* Reading and editing need the vertical space; primary transport stays docked. */
 .grid>.view-tools{position:relative;top:auto}
 #undoNoteEdit:disabled{display:none}
}

.beat-choice:disabled{cursor:default;opacity:1}

/* Size-review prototype: normal tablet music matches normal desktop music.
   Reading menus share their beat's width instead of setting its intrinsic
   width; dense notation and full-size edit targets still scroll naturally. */
@media(min-width:701px){
 .staff{--notation-zoom:1.4}
 .classroom-display .staff{--notation-zoom:1.8}
 .staff:not(.editing-notes) .beat-svg{zoom:var(--notation-zoom)}
 .staff:not(.editing-notes) .beat-cell{min-width:calc(var(--beat-w) * var(--notation-zoom) + 8px)}
 .staff:not(.editing-notes) .beat-select{width:0;min-width:100%;max-width:100%}
}

/* Local contextual-editor draft. The music remains an overview at every size. */
.staff{background:transparent;border:0;justify-content:center;overflow-x:hidden;mask-image:none!important;-webkit-mask-image:none!important}
.staff .measure-row{width:100%;min-width:0;justify-content:center;align-self:stretch}
.staff .beat-cell,.staff:not(.editing-notes) .beat-cell{flex:1 1 0;min-width:0;padding:0 2px}
.staff .beat-svg,.staff:not(.editing-notes) .beat-svg{zoom:1;width:calc(var(--beat-w) * var(--measure-scale,1));height:auto;flex:none}
.beat-choice{display:flex;align-items:center;justify-content:center;min-height:80px;width:100%;padding:6px 0;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--ink);cursor:pointer}
.beat-choice:hover,.beat-choice:focus-visible,.beat-choice[aria-expanded="true"]{border-color:var(--forest);outline-offset:2px;background:var(--paper-hit)}
.timesig,.timesig .ts-group{color:var(--ink)}
.measure-row + .measure-row{border-color:var(--line)}
.beat-editor{margin:0 0 12px;padding:12px;background:var(--white);border-color:var(--forest);flex:none;max-height:70%;overflow:auto}
.beat-editor-notes{background:transparent}
#beatEditorApply{width:100%;margin-top:12px;background:var(--ink);color:var(--on-ink)}
.dock-bar{grid-template-columns:minmax(90px,1fr) auto auto auto}
.dock-play,#dockTap,.dock-share{border-radius:8px}
@media(prefers-color-scheme:dark){.nh.active{fill:var(--brick-deep)}.beat-cell.playing-cell{background:rgba(220,160,130,.15)}}
@media(min-width:701px){
 .grid{min-height:0;height:calc(100dvh - var(--dock-h,84px) - 130px);grid-template-rows:auto auto minmax(150px,1fr)}
 .grid>section.panel:nth-of-type(2){min-height:0;display:flex;flex-direction:column}
 .grid>section.panel:nth-of-type(2) .staff{flex:1;min-height:0}
 .grid>section.panel:nth-of-type(2) .legend{flex:none}
 .settings-body[data-open="true"]{height:100%;max-height:var(--settings-h,70dvh)}
 .beat-editor-heading{flex-wrap:wrap}
}
@media(max-width:700px){
 .settings-body[data-open="true"]{top:auto;bottom:calc(var(--dock-h,84px) + 8px);border-radius:16px 16px 8px 8px;max-height:calc(100dvh - var(--dock-h,84px) - 28px)!important}
 .beat-editor{max-height:none}
 .grid>.view-tools{gap:6px}
 #workspaceFullscreen{display:none}
 .rhythm-how{display:none}
 body{padding-top:8px}
 header.brand{margin-bottom:8px;padding-bottom:8px}
 .grid{gap:10px}
 .panel{padding:10px}
 .legend{margin-top:8px}
}
@media(max-height:600px) and (min-width:701px), (min-width:701px) and (max-width:850px){.grid{height:auto;min-height:0}}
.classroom-display .grid{height:auto;min-height:0}
.music-views{display:flex;gap:8px;margin-bottom:10px;flex:none}
.music-views button{flex:1}
.music-views button[aria-pressed="true"]{background:var(--ink);color:var(--on-ink)}
.grid[data-music-view="circles"]>section.panel:nth-of-type(2){display:none}
.grid[data-music-view="circles"] .beat-lights{min-height:160px;align-items:center;justify-content:center}
.grid[data-music-view="circles"] .light{border-radius:50%;width:clamp(44px,8vw,100px);height:clamp(44px,8vw,100px)}
#beatEditorApply{position:sticky;bottom:0;z-index:1}
@media(min-width:701px){.beat-editor{max-height:none}.settings-body[data-open="true"]{overflow:auto}.settings-body>.cols{flex:1 0 auto;overflow:visible}}
.staff .measure-row{flex:0 0 auto;align-items:center}
.staff .timesig{align-self:center;margin-top:0}
.staff .beat-choice{min-height:100px}
.grid[data-music-view="circles"] .light{align-items:center}
.grid[data-music-view="circles"] .light-bar{width:75%;height:75%;border-radius:50%}
@media(prefers-color-scheme:dark){.nh.active{fill:var(--brick)}}
/* Main controls fit the viewport; supporting links remain available below. */
@media(min-width:701px){footer{margin-top:12px}}
@media(max-width:450px){
 .dock-bar{grid-template-columns:minmax(72px,1fr) auto 48px 44px;gap:8px}
 .dock-tempo button{display:none}
 .dock-bpm{min-width:44px}
 .dock-share{width:44px;min-width:44px;padding:0}
 #dockTap{padding:6px}
}
@media(max-width:700px) and (max-height:700px){
 .transport .tempo-controls .stepper,.transport #tap,.transport .sound-toggle{display:none}
 .beat-lights{display:none}
 .grid[data-music-view="circles"] .beat-lights{display:flex;min-height:70px}
 .grid .staff{padding-block:4px}
 .staff .beat-choice{min-height:76px}
 .panel h2{margin-bottom:6px;padding-bottom:6px}
 .bpm-num{font-size:2.4rem}
 .legend{font-size:.75rem}
}
@media(max-width:700px){
 .settings-body:has(.beat-editor:not([hidden])) > :not(.beat-editor){display:none}
 .settings-body:has(.beat-editor:not([hidden])){height:auto;padding:10px}
 .settings-body:has(.beat-editor:not([hidden])) .beat-editor{margin:0}
}
@media(max-width:700px) and (max-height:700px){
 .staff .beat-svg{max-height:76px}
 .staff .beat-choice{min-height:76px}
 .grid .staff{min-height:0;flex:none}
 .legend{margin-top:4px}
}
@media(max-width:700px) and (max-height:700px){.legend{display:none}}
.grid .staff{padding-block:4px}
.large-text-display .grid{height:auto;min-height:0;grid-template-rows:auto auto auto}
.large-text-display .grid>section.panel:nth-of-type(2) .staff{flex:none;min-height:240px;overflow:visible}
.large-text-display .phone-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.large-text-display .settings-body[data-open="true"]{max-height:var(--settings-h,70dvh);overflow:auto}
@media(max-width:700px){.large-text-display .dock-tempo{display:none}.large-text-display .dock-bar{grid-template-columns:minmax(0,1fr) auto auto}}
.beat-editor-notes .beat-svg{zoom:1}
/* Preview instructions live with the editor, leaving the overview uncluttered. */
#noteEditHelp{display:none}

/* A sheet's own close control stays reachable even when it covers its trigger. */
.settings-close-row{position:sticky;top:0;z-index:21;display:flex;justify-content:flex-end;flex:none;background:var(--white);padding:0 0 8px}
#settingsClose{min-height:44px}
@media(min-width:701px){.settings-close-row{display:none}}
/* Local embed-code draft: controls inherit the app's existing dialog behavior. */
#embedMarkup{display:block;width:100%;min-width:0;max-width:100%;margin:8px 0 12px;padding:10px;border:1px solid var(--line);border-radius:6px;background:var(--white);color:var(--ink);font:14px/1.5 monospace;resize:vertical}
#workspace-embed label{font-weight:700}
#embedHelp{font-size:1rem;color:var(--ink-soft)}

@media(max-width:700px){.settings-card .phone-tabs{top:var(--settings-close-h,52px)}}

@media(max-width:700px){.large-text-display .grid>.view-tools{grid-template-columns:1fr}}