/* Focus owns its presentation. It does not use the legacy focus/layout classes. */ #focusModeOverlay { --score-paper:#f4f0e6; --score-ink:#292b27; --score-muted:#737467; --score-rule:#d5d0c2; --score-accent:#a54636; --score-serif:Baskerville,"Times New Roman",serif; --score-hebrew:var(--book-serif); --score-ui:"Helvetica Neue",Arial,sans-serif; box-sizing:border-box; position:fixed; inset:var(--performance-nav-top, 0px) 0 0 var(--performance-nav-left, 184px); z-index:1000; height:auto; width:auto; overflow:auto; background:var(--score-paper); color:var(--score-ink); padding:34px 66px 23px; display:flex; flex-direction:column; font:400 12px/1.5 var(--score-ui); text-align:start; isolation:isolate; border:0; border-radius:0; box-shadow:none; } :root:not(.light) #focusModeOverlay { --score-paper:#222620; --score-ink:#f1ecdf; --score-muted:#b6b9a9; --score-rule:#4b5145; --score-accent:#e2a18d; } #focusModeOverlay *,#focusModeOverlay *::before,#focusModeOverlay *::after { box-sizing:border-box; } #focusModeOverlay button { appearance:none; margin:0; min-width:0; min-height:0; padding:0; border:0; border-radius:0; background:none; color:inherit; font:inherit; text-transform:none; letter-spacing:normal; box-shadow:none; cursor:pointer; } #focusModeOverlay button:disabled { opacity:.45; cursor:default; } #focusModeOverlay :is(button,input,summary):focus-visible { outline:2px solid var(--score-accent); outline-offset:5px; } #focusModeOverlay [hidden] { display:none; } #focusModeOverlay p,#focusModeOverlay h2 { margin:0; } #focusModeOverlay .score-running { display:flex; justify-content:space-between; height:44px; flex:none; border-bottom:1px solid var(--score-ink); font:400 10px/16px var(--score-ui); letter-spacing:1.65px; text-transform:uppercase; } #focusModeOverlay .score-heading { display:flex; justify-content:space-between; align-items:center; margin-top:27px; min-height:58px; flex:none; gap:24px; } #focusModeOverlay h2 { font:400 36px/1.125 var(--score-serif); letter-spacing:-.7px; } #focusModeOverlay #bookFocusArtist { font-size:14px; line-height:17px; color:var(--score-muted); margin-top:7px; width:fit-content; } #focusModeOverlay .score-tools { display:flex; gap:24px; align-items:center; } #focusModeOverlay .score-tools>button { min-height:40px; } #focusModeOverlay details { position:relative; border:0; background:none; padding:0; margin:0; border-radius:0; } #focusModeOverlay summary { list-style:none; cursor:pointer; font-size:11px; color:var(--score-muted); min-height:32px; display:flex; align-items:center; } #focusModeOverlay summary::-webkit-details-marker { display:none; } #focusModeOverlay details[open]>summary { color:var(--score-accent); } #focusModeOverlay .score-popover { position:absolute; z-index:5; inset-inline-end:0; top:100%; width:min(460px,75vw); padding:20px; background:var(--score-paper); border:1px solid var(--score-rule); max-height:50vh; overflow:auto; } #focusModeOverlay #focusLyricIndex button { display:block; width:100%; text-align:start; padding:10px 0; border-bottom:1px solid var(--score-rule); font-size:15px; } #focusModeOverlay .score-spread { display:grid; grid-template-columns:140px minmax(0,1fr); gap:50px; margin:65px 48px 0; flex:none; } #focusModeOverlay .score-margin { padding-top:20px; } #focusModeOverlay .score-margin>:is(.score-folio,p,small) { display:none; } #focusModeOverlay .score-margin-label { display:block; margin-top:42px; font-size:10px; letter-spacing:1.8px; text-transform:uppercase; color:var(--score-accent); } #focusModeOverlay .score-sheet { padding-inline-start:43px; border-inline-start:1px solid var(--score-rule); min-width:0; } #focusModeOverlay #focusLyricsDisplay { display:block; overflow:visible; padding:0; margin:0; border:0; mask:none; } #focusModeOverlay [data-phrase] { display:block; text-align:start; width:100%; white-space:pre-wrap; overflow-wrap:anywhere; font:400 30px/1.4 var(--score-serif); color:var(--score-muted); } #focusModeOverlay [data-phrase]:disabled { opacity:1; } #focusModeOverlay [data-phrase=current] { position:relative; font:400 73px/1.15 var(--score-serif); letter-spacing:-1.4px; color:var(--score-ink); margin:28px 0; max-width:16ch; } #focusModeOverlay [data-phrase=current]::before { content:""; position:absolute; inset-inline-start:-45px; top:7px; bottom:8px; width:3px; background:var(--score-accent); } #focusModeOverlay #bookFocusGuidance { margin-top:43px; font:italic 19px/21px var(--score-serif); color:var(--score-accent); max-width:72ch; } #focusModeOverlay[data-state=empty] [data-phrase=current] { font-size:46px; max-width:25ch; margin-top:0; } #focusModeOverlay[data-state=opening] [data-phrase=current]::before,#focusModeOverlay[data-state=empty] [data-phrase=current]::before { display:none; } #focusModeOverlay[data-density=long] [data-phrase=current] { font-size:54px; max-width:32ch; } #focusModeOverlay[data-density=very-long] [data-phrase=current] { font-size:38px; max-width:48ch; } #focusModeOverlay .score-reading { display:flex; gap:24px; margin-top:22px; color:var(--score-muted); } #focusModeOverlay .score-reading button { min-height:36px; } #focusModeOverlay .score-transport { display:flex; align-items:center; gap:22px; border-top:1px solid var(--score-ink); min-height:102px; padding-top:0; margin-top:auto; flex:none; } #focusModeOverlay .score-transport-spacer { min-height:48px; flex:1; } #focusModeOverlay .score-transport-identity { width:175px; flex:none; } #focusModeOverlay #focusTransportSection { display:block; font-weight:500; font-size:13px; } #focusModeOverlay #focusTransportLine { display:block; margin-top:5px; color:var(--score-muted); font-size:11px; } #focusModeOverlay .score-section-jump { display:block; position:relative; width:100%; } #focusModeOverlay #focusSectionJump { display:flex; align-items:center; justify-content:space-between; gap:7px; width:100%; min-height:28px; padding:0; border:0; background:transparent; color:var(--score-ink); font:600 13px/1.25 var(--score-ui); cursor:pointer; text-align:start; } #focusModeOverlay #focusSectionJump:focus-visible { outline:1px solid var(--score-accent); outline-offset:4px; } #focusModeOverlay .score-section-menu { display:none; position:absolute; z-index:10; bottom:calc(100% + 12px); inset-inline-start:0; width:260px; padding:6px 0; border:1px solid var(--score-rule); background:var(--score-paper); box-shadow:0 16px 34px rgba(23,23,18,.16); } #focusModeOverlay .score-section-jump[data-open=true] .score-section-menu { display:block; } #focusModeOverlay .score-section-menu-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; padding:2px 8px 2px 12px; } #focusModeOverlay .score-section-menu-row:hover,#focusModeOverlay .score-section-menu-row:focus-within { background:color-mix(in srgb,var(--score-ink),transparent 95%); } #focusModeOverlay .score-section-menu button { min-height:34px; border:0; background:transparent; color:var(--score-ink); font:400 12px/1.3 var(--score-ui); text-align:start; cursor:pointer; } #focusModeOverlay .score-section-menu [data-focus-section-play] { padding:5px 7px; color:var(--score-accent); font-weight:600; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity 120ms ease; } #focusModeOverlay .score-section-menu-row:hover [data-focus-section-play],#focusModeOverlay .score-section-menu-row:focus-within [data-focus-section-play] { opacity:1; pointer-events:auto; } #focusModeOverlay .score-play-group { display:flex; gap:17px; align-items:center; flex:none; } #focusModeOverlay .score-play-group button { width:26px; height:44px; } #focusModeOverlay #focusPlayButton { width:48px; height:48px; border-radius:50%; background:var(--score-accent); color:var(--score-paper); display:grid; place-items:center; } #focusModeOverlay #focusPlayButton::before { content:"▶"; font-size:20px; padding-inline-start:3px; } #focusModeOverlay #focusPlayButton[data-icon=pause]::before { content:"Ⅱ"; padding:0; } #focusModeOverlay #focusRewindButton::before { content:none; } #focusModeOverlay #focusForwardButton::before { content:none; } #focusModeOverlay #focusTime { white-space:nowrap; font-size:11px; min-width:65px; } #focusModeOverlay #focusSeek { appearance:none; flex:1; min-width:90px; width:auto; height:20px; padding:0; margin:0; border:0; border-radius:0; background:transparent; accent-color:var(--score-accent); cursor:pointer; } #focusModeOverlay #focusSeek::-webkit-slider-runnable-track { height:2px; background:transparent; } #focusModeOverlay #focusSeek::-webkit-slider-thumb { appearance:none; height:6px; width:6px; margin-top:-2px; border-radius:50%; background:var(--score-accent); } #focusModeOverlay #focusSeek::-moz-range-track { height:2px; background:transparent; } #focusModeOverlay #focusSeek::-moz-range-thumb { height:6px; width:6px; border:0; border-radius:50%; background:var(--score-accent); } #focusModeOverlay #focusGuideVocalButton { min-height:40px; white-space:nowrap; font-size:11px; } #focusModeOverlay .score-tempo { display:flex; align-items:center; gap:8px; border-inline-start:1px solid var(--score-rule); padding-inline-start:20px; white-space:nowrap; } #focusModeOverlay .score-tempo>span { color:var(--score-muted); font-size:11px; } #focusModeOverlay .score-tempo strong { font-weight:400; font-size:11px; } #focusModeOverlay .score-tempo button { width:20px; height:36px; } #focusModeOverlay .score-record-controls { display:flex; align-items:center; gap:16px; border-inline-start:1px solid var(--score-rule); padding-inline-start:22px; } #focusModeOverlay #focusRecordButton { display:flex; gap:8px; align-items:center; min-height:42px; white-space:nowrap; font-size:11px; } #focusModeOverlay #focusRecordButton span { width:6px; height:6px; border-radius:50%; background:var(--score-accent); } #focusModeOverlay #focusRecordButton.is-recording { color:var(--score-accent); } #focusModeOverlay #focusRecordButton.is-recording span { border-radius:0; } #focusModeOverlay .score-recording-check { min-height:34px; padding:6px 0; color:var(--score-muted); font-size:11px; white-space:nowrap; } #focusModeOverlay .score-count-in { display:flex; align-items:center; gap:6px; color:var(--score-muted); font-size:11px; white-space:nowrap; } #focusModeOverlay .score-count-in select { appearance:none; border:0; border-bottom:1px solid var(--score-rule); border-radius:0; padding:4px 18px 4px 2px; color:var(--score-ink); background:transparent; font:inherit; } #focusModeOverlay #focusNotice { color:var(--score-accent); font-size:12px; text-align:end; min-height:0; } #focusModeOverlay #focusNotice:empty { display:none; } #focusModeOverlay .recording-setup-panel { position:absolute; inset:0; z-index:12; display:grid; place-items:center; padding:30px; background:color-mix(in srgb, var(--score-paper), transparent 10%); } #focusModeOverlay .recording-setup-panel.hidden { display:none; } #focusModeOverlay .recording-setup-card { width:min(680px, 100%); max-height:min(720px, calc(100vh - 60px)); overflow:auto; padding:28px; border:1px solid var(--score-rule); background:var(--score-paper); box-shadow:0 22px 70px rgba(20,20,16,.18); } #focusModeOverlay .recording-setup-head { display:flex; justify-content:space-between; gap:24px; padding-bottom:20px; border-bottom:1px solid var(--score-rule); } #focusModeOverlay .recording-setup-head .score-folio { display:block; margin-bottom:8px; } #focusModeOverlay .recording-setup-head h3 { margin:0 0 6px; font:400 28px/1.2 var(--score-serif); } #focusModeOverlay .recording-setup-head p { margin:0; color:var(--score-muted); font-size:12px; line-height:1.6; } #focusModeOverlay .recording-setup-head button { align-self:start; min-height:34px; padding:4px 10px; font-size:24px; } #focusModeOverlay .recording-setup-illustration { width:132px; height:94px; flex:0 1 132px; align-self:center; object-fit:contain; } #focusModeOverlay .recording-setup-device { display:grid; gap:8px; padding:20px 0 12px; } #focusModeOverlay .recording-setup-device>span,#focusModeOverlay .recording-level-check strong { font-size:13px; font-weight:600; } #focusModeOverlay .recording-setup-device select { width:min(100%, 390px); min-height:38px; padding:7px 10px; border:1px solid var(--score-rule); background:transparent; color:var(--score-ink); font:400 13px var(--score-ui); } #focusModeOverlay .recording-level-check { display:grid; gap:10px; padding:20px 0; border-block:1px solid var(--score-rule); } #focusModeOverlay .recording-level-check>div:first-child { display:grid; gap:5px; } #focusModeOverlay .recording-level-check span,#focusModeOverlay .recording-setup-status { margin:0; color:var(--score-muted); font-size:12px; line-height:1.55; } #focusModeOverlay .recording-meter { height:10px; overflow:hidden; background:var(--score-rule); } #focusModeOverlay .recording-meter span { display:block; width:0; height:100%; background:var(--score-accent); transition:width 60ms linear, background 100ms; } #focusModeOverlay .recording-meter[data-state=clipping] span { background:#b64637; } #focusModeOverlay .recording-meter[data-state=silence] span { background:var(--score-muted); } #focusModeOverlay .recording-headphone-reminder { margin:0; padding:14px 0; border-bottom:1px solid var(--score-rule); color:var(--score-accent); font-size:12px; line-height:1.55; } #focusModeOverlay .recording-setup-actions { display:flex; justify-content:end; padding-top:4px; } #focusModeOverlay .recording-setup-actions .primary { padding:10px 20px; background:var(--score-accent); color:var(--score-paper); } #focusModeOverlay[data-direction=rtl] .score-spread { grid-template-columns:minmax(0,1fr) 140px; } #focusModeOverlay[data-direction=rtl] .score-margin { grid-column:2; grid-row:1; } #focusModeOverlay[data-direction=rtl] .score-sheet { grid-column:1; grid-row:1; direction:rtl; } #focusModeOverlay[data-direction=rtl] [data-phrase] { font-family:var(--score-hebrew); font-size:31px; line-height:1.6; } #focusModeOverlay[data-direction=rtl] [data-phrase=current] { font-family:var(--score-hebrew); font-size:64px; line-height:1.35; letter-spacing:0; max-width:16ch; } #focusModeOverlay[data-direction=rtl] #bookFocusGuidance { font:400 21px/1.55 var(--score-hebrew); } #focusModeOverlay[data-direction=rtl] h2 { font-family:var(--score-hebrew); } #focusModeOverlay[data-direction=rtl][data-density=long] [data-phrase=current] { font-size:44px; } #focusModeOverlay[data-direction=rtl][data-density=very-long] [data-phrase=current] { font-size:32px; } @media(max-width:1484px) { #focusModeOverlay { padding:30px 46px 20px; } #focusModeOverlay .score-spread { margin:45px 28px 0; grid-template-columns:120px minmax(0,1fr); gap:38px; } #focusModeOverlay [data-phrase=current] { font-size:64px; } #focusModeOverlay .score-transport { gap:14px; } #focusModeOverlay .score-transport-identity { width:135px; } #focusModeOverlay .score-tempo { gap:4px; padding-inline-start:10px; } #focusModeOverlay .score-record-controls { padding-inline-start:12px; gap:10px; } } @media(max-width:1184px) { #focusModeOverlay { padding:24px 28px 16px; } #focusModeOverlay .score-spread { margin:36px 0 0; grid-template-columns:105px minmax(0,1fr); gap:24px; } #focusModeOverlay .score-sheet { padding-inline-start:28px; } #focusModeOverlay [data-phrase] { font-size:24px; } #focusModeOverlay [data-phrase=current] { font-size:52px; } #focusModeOverlay [data-phrase=current]::before { inset-inline-start:-30px; } #focusModeOverlay #bookFocusGuidance { font-size:18px; margin-top:30px; } #focusModeOverlay .score-transport { flex-wrap:wrap; gap:8px 18px; padding-top:14px; } #focusModeOverlay .score-transport-identity { width:115px; } #focusModeOverlay #focusSeek { min-width:220px; } #focusModeOverlay .score-tempo { border:0; } #focusModeOverlay .score-transport-spacer { min-height:32px; } #focusModeOverlay[data-direction=rtl] .score-spread { grid-template-columns:minmax(0,1fr) 105px; } #focusModeOverlay[data-direction=rtl] [data-phrase=current] { font-size:44px; } } @media(max-width:788px) { #focusModeOverlay { padding:20px; } #focusModeOverlay .score-running span:last-child { display:none; } #focusModeOverlay .score-tools { gap:12px; flex-wrap:wrap; justify-content:end; } #focusModeOverlay .score-spread,#focusModeOverlay[data-direction=rtl] .score-spread { display:block; margin-top:28px; } #focusModeOverlay .score-margin { padding:0 0 18px; } #focusModeOverlay .score-margin-label { display:none; } #focusModeOverlay [data-phrase=current] { font-size:42px; } #focusModeOverlay #focusSeek { min-width:100px; } #focusModeOverlay .score-transport-identity { width:100%; } } @media(prefers-reduced-motion:no-preference) { #focusModeOverlay button { transition:color 160ms; } } /* Semantic hidden state wins over the layout role, including native disclosures. */ #focusModeOverlay [hidden] { display:none!important; } #focusModeOverlay .score-seek { position:relative; flex:1; min-width:90px; height:20px; } #focusModeOverlay .score-seek::before,#focusModeOverlay #focusProgress { content:""; position:absolute; top:9px; height:2px; left:0; width:100%; background:var(--score-rule); } #focusModeOverlay #focusProgress { width:0; background:var(--score-accent); } #focusModeOverlay .score-seek #focusSeek { position:relative; width:100%; display:block; } #focusModeOverlay #focusGuideVocalButton span { color:var(--score-muted); margin-inline-end:7px; } #focusModeOverlay .score-tempo { display:block; padding-inline-start:22px; } #focusModeOverlay .score-tempo summary { gap:8px; min-height:40px; } #focusModeOverlay .score-tempo strong { color:var(--score-ink); } #focusModeOverlay .score-tempo .score-popover { top:auto; bottom:100%; width:190px; display:flex; align-items:center; justify-content:space-between; } @media(max-width:1184px) { #focusModeOverlay .score-seek { min-width:220px; } } #focusModeOverlay details:not([open])>.score-popover { display:none; } #focusModeOverlay .score-transport { position:sticky; bottom:0; background:var(--score-paper); z-index:2; } @media(max-width:1184px) { #focusModeOverlay[data-density=long] [data-phrase=current] { font-size:38px; } #focusModeOverlay[data-density=very-long] [data-phrase=current] { font-size:30px; } } /* The original folio composition governs both rehearsal and its supporting views. */ #focusModeOverlay [data-phrase=previous] { min-height:42px; } #focusModeOverlay [data-phrase=previous][data-missing=true] { visibility:hidden; } #focusModeOverlay .score-margin-label { font-weight:600; } #focusModeOverlay .score-transport { gap:28px; } #focusModeOverlay .score-play-group { gap:14.666px; } #focusModeOverlay #focusTime { min-width:0; width:57.38px; flex:none; } #focusModeOverlay #focusGuideVocalButton { width:101.91px; flex:none; font-size:12px; } #focusModeOverlay .score-tempo { width:119.6px; padding-inline-start:28px; flex:none; } #focusModeOverlay .score-tempo summary,#focusModeOverlay .score-tempo strong { font-size:12px; } #focusModeOverlay .score-record-controls { width:auto; flex:none; } #focusModeOverlay #focusRecordButton { width:auto; padding:0; flex:none; font-size:12px; } #focusModeOverlay .score-manual-transport { display:flex; align-items:center; gap:28px; min-height:102px; border-top:1px solid var(--score-ink); margin-top:auto; flex:none; position:sticky; bottom:0; background:var(--score-paper); z-index:3; } #focusModeOverlay .score-manual-transport>div { width:175px; flex:none; } #focusModeOverlay .score-manual-transport strong { display:block; font-size:13px; font-weight:500; } #focusModeOverlay .score-manual-transport small { display:block; color:var(--score-muted); margin-top:5px; font-size:11px; } #focusModeOverlay #focusPreviousPhrase,#focusModeOverlay #focusNextPhrase { min-height:48px; padding:12px 20px; font-size:13px; } #focusModeOverlay #focusPreviousPhrase { border:1px solid var(--score-rule); } #focusModeOverlay #focusNextPhrase { background:var(--score-accent); color:var(--score-paper); } #focusModeOverlay #scoreReadingPosition { flex:1; text-align:center; color:var(--score-muted); font-size:11px; } #focusModeOverlay #scoreAudioToggle { font-size:11px; color:var(--score-muted); min-height:36px; } #focusModeOverlay[data-reading=manual]:not([data-panel=setup]):not([data-panel=takes]) .score-transport { display:none; } #focusModeOverlay[data-reading=manual][data-audio-open=true]:not([data-panel=setup]):not([data-panel=takes]) .score-transport { display:flex; position:fixed; bottom:125px; left:66px; right:66px; min-height:82px; border-bottom:1px solid var(--score-rule); } #focusModeOverlay[data-direction=rtl] .score-margin-label { letter-spacing:0; } #focusModeOverlay[data-direction=rtl] [data-phrase=current] { letter-spacing:0; } #focusModeOverlay[data-direction=rtl] #bookFocusArtist { text-align:right; width:100%; } #focusModeOverlay[data-panel=setup] .score-spread,#focusModeOverlay[data-panel=takes] .score-spread, #focusModeOverlay[data-panel=setup] .score-manual-transport,#focusModeOverlay[data-panel=takes] .score-manual-transport { display:none; } #focusModeOverlay .score-menu { width:235px; } #focusModeOverlay .score-menu button { display:block; width:100%; padding:12px 0; text-align:start; font-size:14px; } #focusModeOverlay .score-menu button+button { border-top:1px solid var(--score-rule); } #focusModeOverlay #scoreToolsPage { display:grid; grid-template-columns:190px minmax(0,1fr); gap:44px; margin:56px 48px 0; flex:none; } #focusModeOverlay .score-tools-margin { border-inline-end:1px solid var(--score-rule); padding-inline-end:28px; } #focusModeOverlay .score-tools-margin h3 { font:400 29px/1.2 var(--score-serif); margin:20px 0 10px; } #focusModeOverlay .score-tools-margin p { color:var(--score-muted); font-size:12px; line-height:1.7; } #focusModeOverlay #scoreReturnToSong { text-align:start; margin-top:28px; min-height:44px; color:var(--score-accent); } #focusModeOverlay .score-tools-sheet { min-width:0; } #focusModeOverlay .score-tools-sheet h3 { font:400 29px/1.2 var(--score-serif); margin:0 0 24px; } #focusModeOverlay .score-setup-intro { max-width:470px; margin:-12px 0 22px; color:var(--score-muted); font-size:13px; line-height:1.6; } #focusModeOverlay .score-tools-sheet h4 { font:400 22px/1.3 var(--score-serif); } #focusModeOverlay .score-tools-sheet :is(section,details,div,label,p) { box-shadow:none; border-radius:0; background:transparent; } #focusModeOverlay .score-tools-sheet button,#focusModeOverlay .score-tools-sheet a { min-height:36px; padding:8px 12px; text-decoration:none; font:400 13px/1.4 var(--score-ui); color:var(--score-ink); display:inline-flex; align-items:center; gap:8px; } #focusModeOverlay .score-tools-sheet button.active,#focusModeOverlay .score-tools-sheet button[aria-pressed=true] { color:var(--score-accent); border-bottom:1px solid var(--score-accent); } #focusModeOverlay .score-tools-sheet button::before { content:none; } #focusModeOverlay .score-tools-sheet strong { font-weight:500; } #focusModeOverlay .score-tools-sheet input[type=range] { appearance:auto; padding:0; height:24px; accent-color:var(--score-accent); background:transparent; border:0; width:180px; max-width:100%; } #focusModeOverlay .score-tools-sheet input[type=checkbox] { accent-color:var(--score-accent); } #focusModeOverlay .score-arrangement>div:first-child { display:grid; grid-template-columns:1fr 1fr; column-gap:34px; } #focusModeOverlay .score-arrangement>div:first-child>div,#focusModeOverlay .score-arrangement>div:first-child>label,#focusModeOverlay .score-option { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:78px; border-bottom:1px solid var(--score-rule); flex-wrap:wrap; } #focusModeOverlay .score-arrangement em { display:block; font:400 11px/1.5 var(--score-ui); color:var(--score-muted); } #focusModeOverlay .score-key-setting { grid-row:span 2; align-items:start!important; padding-top:18px; } #focusModeOverlay .score-key-setting>div { display:grid; gap:12px; justify-items:end; } #focusModeOverlay .score-key-chord-controls { display:grid; gap:7px; width:min(100%, 320px); } #focusModeOverlay .score-key-chord-row { display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--score-muted); font-size:12px; } #focusModeOverlay .score-key-chord-row strong { color:var(--score-ink); margin-inline-start:5px; } #focusModeOverlay .score-key-chord-controls small { color:var(--score-muted); font-size:10px; line-height:1.45; text-align:end; } #focusModeOverlay .score-key-chord-button { color:var(--score-accent)!important; padding:4px 0!important; min-height:28px!important; } #focusModeOverlay .score-key-unavailable { color:var(--score-muted); font-size:11px; } #focusModeOverlay .score-stepper { display:flex; align-items:center; justify-content:flex-end; gap:8px; } #focusModeOverlay .score-stepper strong { min-width:128px; text-align:end; } #focusModeOverlay .score-transpose-presets { width:min(100%, 320px); text-align:end; } #focusModeOverlay .score-transpose-presets summary { display:inline-flex; } #focusModeOverlay .score-transpose-presets>div { display:flex; justify-content:flex-end; gap:4px; padding-top:6px; } #focusModeOverlay #openMixButton { justify-self:start; color:var(--score-accent); } #focusModeOverlay .score-summary { margin:28px 0; color:var(--score-muted); } #focusModeOverlay #studioPracticeSummary { white-space:normal; overflow:visible; display:flex; flex-wrap:wrap; gap:8px; font:400 12px/1.7 var(--score-ui); padding:0; border:0; } #focusModeOverlay #studioPracticeSummary>* { flex:none; min-width:0; } #focusModeOverlay .score-range { border-top:1px solid var(--score-ink); padding-top:10px; } #focusModeOverlay .score-tools-sheet summary { font-size:15px; color:var(--score-ink); min-height:44px; } #focusModeOverlay .score-range-body { padding-top:18px; } #focusModeOverlay #studioLyricsDisplay { max-height:270px; overflow:auto; padding:16px 0; border:0; margin:16px 0; mask:none; } #focusModeOverlay #studioLyricsDisplay .lyric-line { font:400 23px/1.6 var(--score-serif); text-align:start; padding:4px 12px; background:none; border:0; border-inline-start:2px solid transparent; border-radius:0; cursor:pointer; } #focusModeOverlay #studioLyricsDisplay .studio-range-selected { border-inline-start-color:var(--score-accent); } #focusModeOverlay #studioLyricsDisplay .active { color:var(--score-accent); } #focusModeOverlay #studioStatus { font-size:12px; line-height:1.7; color:var(--score-accent); margin-top:20px; } #focusModeOverlay #scoreTakes>section { border:0; padding:0; margin:0 0 32px; } #focusModeOverlay #scoreTakes p { font-size:12px; color:var(--score-muted); line-height:1.7; } #focusModeOverlay #scoreTakes label { display:flex; align-items:center; gap:20px; min-height:50px; flex-wrap:wrap; } #focusModeOverlay #scoreTakes :is(details,div[aria-label]) { margin:18px 0; } #focusModeOverlay #scoreTakes div:has(> #playTakeWithBackingButton) { display:flex; flex-wrap:wrap; gap:8px 20px; padding:18px 0; border-block:1px solid var(--score-rule); } #focusModeOverlay #scoreTakes #playTakeWithBackingButton { background:var(--score-accent); color:var(--score-paper); padding:12px 20px; } #focusModeOverlay .saved-take { display:flex; align-items:center; gap:20px; justify-content:space-between; padding:18px 0; border:0; border-top:1px solid var(--score-rule); } #focusModeOverlay .saved-take>span { min-width:0; } #focusModeOverlay .saved-take strong { display:block; font:400 20px/1.3 var(--score-serif); overflow-wrap:anywhere; white-space:normal; overflow:visible; max-width:none; } #focusModeOverlay .saved-take small { display:block; color:var(--score-muted); font-size:11px; margin-top:6px; white-space:normal; } #focusModeOverlay .saved-actions { display:flex; flex:none; gap:12px; } #focusModeOverlay .saved-section-title { display:block; font-size:11px; text-transform:uppercase; letter-spacing:1px; margin-top:20px; } @media(max-width:1484px) { #focusModeOverlay .score-transport { gap:18px; } #focusModeOverlay .score-transport-identity { width:135px; } #focusModeOverlay .score-tempo { width:105px; padding-inline-start:16px; } #focusModeOverlay .score-record-controls { padding-inline-start:16px; } } @media(max-width:1184px) { #focusModeOverlay .score-transport { display:grid; grid-template-columns:115px 240px 70px minmax(0,1fr); gap:12px 18px; padding:16px 0; } #focusModeOverlay .score-transport .score-seek { min-width:0; } #focusModeOverlay .score-transport #focusGuideVocalButton { grid-column:2; } #focusModeOverlay .score-transport .score-tempo { grid-column:3; width:auto; border:0; padding:0; } #focusModeOverlay .score-transport .score-record-controls { grid-column:4; width:auto; border:0; padding:0; justify-self:end; } #focusModeOverlay .score-manual-transport { gap:16px; } #focusModeOverlay .score-manual-transport>div { width:140px; } #focusModeOverlay #scoreToolsPage { margin:36px 0 0; grid-template-columns:150px minmax(0,1fr); gap:28px; } #focusModeOverlay .score-arrangement>div:first-child { display:block; } #focusModeOverlay[data-reading=manual][data-audio-open=true]:not([data-panel=setup]):not([data-panel=takes]) .score-transport { display:grid; left:28px; right:28px; } } #focusModeOverlay .score-arrangement { display:grid; grid-template-columns:1fr 1fr; column-gap:34px; } #focusModeOverlay .score-arrangement>div:first-child { grid-column:1/-1; } #focusModeOverlay .score-arrangement>#practiceStopButton { justify-self:start; } #focusModeOverlay .score-summary :is(strong,.studio-key-readout) { font:500 12px/1.7 var(--score-ui); color:var(--score-muted); } #focusModeOverlay .score-summary button { padding:0 4px; min-height:24px; } #focusModeOverlay .score-tools-sheet #studioPracticeSummary { gap:10px; } #focusModeOverlay .score-option { min-height:64px; } @media(max-width:1184px) { #focusModeOverlay .score-arrangement { display:block; } } #focusModeOverlay [data-phrase=previous] { display:flex; align-items:flex-end; height:42px; } #focusModeOverlay [data-phrase=previous][data-length=long] { font-size:22px; } #focusModeOverlay [data-phrase=previous][data-length=very-long] { font-size:16px; } #focusModeOverlay #studioLyricsDisplay button.lyric-line { display:block; width:100%; } #focusModeOverlay .score-tools-sheet input[type=range] { appearance:none; } #focusModeOverlay .score-tools-sheet input[type=range]::-webkit-slider-runnable-track { height:2px; background:var(--score-rule); } #focusModeOverlay .score-tools-sheet input[type=range]::-webkit-slider-thumb { appearance:none; width:8px; height:8px; margin-top:-3px; border-radius:50%; background:var(--score-accent); } #focusModeOverlay .score-tools-sheet input[type=range]::-moz-range-track { height:2px; background:var(--score-rule); } #focusModeOverlay .score-tools-sheet input[type=range]::-moz-range-thumb { width:8px; height:8px; border:0; border-radius:50%; background:var(--score-accent); } body:not(.take-ready) #focusModeOverlay #scoreTakes>section:first-child>:not(:first-child) { display:none; } #focusModeOverlay #scoreTakes>section:last-child { margin-bottom:0; } #focusModeOverlay .score-tools { flex:none; white-space:nowrap; } #focusModeOverlay .score-heading>div:first-child { min-width:0; } #focusModeOverlay #focusModeTitle { overflow-wrap:anywhere; } /* Keep expanded manual audio controls inside the same navigation-aware page. */ #focusModeOverlay[data-reading=manual][data-audio-open=true]:not([data-panel=setup]):not([data-panel=takes]) .score-transport { left:calc(var(--performance-nav-left, 184px) + 28px); right:28px; } /* Current Take workbench: restore intentional controls after the score-wide reset. */ #focusModeOverlay #scoreTakes .review-listen-row { display:flex; align-items:center; flex-wrap:wrap; gap:14px; min-height:86px; padding:18px 0; margin:0; border-bottom:1px solid var(--score-rule); } #focusModeOverlay #scoreTakes .review-listen-row .review-play-button { min-height:44px; padding:0 16px; border:1px solid var(--score-accent); background:var(--score-accent); color:var(--score-paper); font-weight:600; } #focusModeOverlay #scoreTakes .review-listen-row .review-play-button>span { font-size:10px; } #focusModeOverlay #scoreTakes .review-listen-row .review-listen-copy { display:grid; gap:2px; min-width:112px; } #focusModeOverlay #scoreTakes .review-listen-row .review-listen-copy strong { font:600 13px/1.3 var(--score-ui); } #focusModeOverlay #scoreTakes .review-listen-row .review-listen-copy span { color:var(--score-muted); font-size:11px; } #focusModeOverlay #scoreTakes .review-listen-row .review-mode-toggle { display:flex; gap:0; margin:0; border-bottom:1px solid var(--score-rule); } #focusModeOverlay #scoreTakes .review-listen-row .review-mode-toggle button { min-height:37px; padding:0 12px; border:0; border-bottom:2px solid transparent; color:var(--score-muted); font:500 13px/1.3 var(--score-ui); } #focusModeOverlay #scoreTakes .review-listen-row .review-mode-toggle button.active { border-bottom-color:var(--score-accent); color:var(--score-accent); } #focusModeOverlay #scoreTakes .review-adjustments { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(270px,.92fr); margin:0; } #focusModeOverlay #scoreTakes .review-adjustment-area { min-width:0; padding:26px 30px 26px 0; margin:0; } #focusModeOverlay #scoreTakes .review-adjustment-area+.review-adjustment-area { padding-right:0; padding-left:30px; border-left:1px solid var(--score-rule); } #focusModeOverlay #scoreTakes .review-area-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 18px; } #focusModeOverlay #scoreTakes .review-area-heading h4 { margin:0; color:var(--score-ink); font:400 22px/1.3 var(--score-serif); } #focusModeOverlay #scoreTakes .review-area-heading span { color:var(--score-muted); font-size:11px; } #focusModeOverlay #scoreTakes .review-align-area .take-sync-adjustments { display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin:0; } #focusModeOverlay #scoreTakes .review-align-area .take-sync-adjustments button { min-width:42px; min-height:36px; padding:4px 8px; border:1px solid var(--score-rule); background:transparent; color:var(--score-ink); font:500 12px/1 var(--score-ui); } #focusModeOverlay #scoreTakes .review-align-area .take-sync-adjustments button:last-child { margin-left:4px; color:var(--score-muted); } #focusModeOverlay #scoreTakes .review-align-area .take-sync-value { display:flex; align-items:center; min-height:36px; border:1px solid var(--score-ink); background:var(--score-paper); } #focusModeOverlay #scoreTakes .review-align-area .take-sync-value input { width:56px; min-height:34px; padding:4px 3px 4px 8px; border:0; background:transparent; color:var(--score-ink); font:600 13px/1 var(--score-ui); text-align:right; } #focusModeOverlay #scoreTakes .review-align-area .take-sync-value span { padding-right:8px; color:var(--score-muted); font-size:11px; } #focusModeOverlay #scoreTakes .review-align-area #takeSyncLabel { display:block; margin-top:11px; color:var(--score-muted); font-size:11px; line-height:1.4; } #focusModeOverlay #scoreTakes .review-align-area .take-volume-control { display:grid; grid-template-columns:auto minmax(110px,1fr); align-items:center; gap:12px; min-height:0; margin:18px 0 0; } #focusModeOverlay #scoreTakes .review-align-area .take-volume-control span { color:var(--score-ink); font-size:12px; white-space:nowrap; } #focusModeOverlay #scoreTakes .review-align-area .take-volume-control strong { color:var(--score-muted); font-weight:500; } #focusModeOverlay #scoreTakes .review-align-area .take-volume-control input { width:100%; } #focusModeOverlay #scoreTakes .review-effects-area .vocal-effects-panel { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px 14px; margin:0; padding:0 0 10px; border-top:1px solid var(--score-rule); border-bottom:1px solid var(--score-rule); } #focusModeOverlay #scoreTakes .review-effects-area .vocal-effects-panel summary { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; min-height:39px; color:var(--score-ink); font-size:12px; font-weight:600; } #focusModeOverlay #scoreTakes .review-effects-area .vocal-effects-panel summary::after { content:"Show effects +"; color:var(--score-accent); font-size:11px; font-weight:600; } #focusModeOverlay #scoreTakes .review-effects-area .vocal-effects-panel[open] summary::after { content:"Hide effects −"; } #focusModeOverlay #scoreTakes .review-effects-area .vocal-effects-panel label,#focusModeOverlay #scoreTakes .review-effects-area .vocal-effects-panel #resetVocalEffectsButton { min-width:0; min-height:34px; padding:0; border:0; color:var(--score-muted); font-size:11px; } #focusModeOverlay #scoreTakes .review-effects-area .vocal-effects-panel label span { display:flex; justify-content:space-between; gap:8px; margin-bottom:6px; } #focusModeOverlay #scoreTakes .review-effects-area .vocal-effects-panel input[type=range] { width:100%; } #focusModeOverlay #scoreTakes .review-effects-area .vocal-effects-panel #resetVocalEffectsButton { color:var(--score-accent); text-align:start; } #focusModeOverlay #scoreTakes .review-effects-note { margin:11px 0 0; color:var(--score-muted); font-size:11px; line-height:1.4; } #focusModeOverlay #scoreTakes .review-save-row { display:flex; align-items:center; justify-content:space-between; gap:22px; min-height:92px; margin:0; border-top:1px solid var(--score-rule); } #focusModeOverlay #scoreTakes .review-save-row .take-save-hint { max-width:430px; margin:0; color:var(--score-muted); font-size:11px; line-height:1.45; } #focusModeOverlay #scoreTakes .review-actions { display:flex; align-items:center; justify-content:end; gap:10px; margin:0; } #focusModeOverlay #scoreTakes .review-actions #saveTakeButton { min-height:38px; padding:0 8px; border:0; color:var(--score-muted); font-size:12px; } #focusModeOverlay #scoreTakes .review-actions .review-delete-button { min-width:auto; min-height:38px; padding:0 5px; border:0; color:var(--score-muted); font-size:16px; letter-spacing:1px; } #focusModeOverlay #scoreTakes .review-actions .review-delete-button:disabled { display:none; } #focusModeOverlay #scoreTakes .review-actions #savePerformanceButton { min-height:44px; padding:0 17px; border:1px solid var(--score-accent); background:var(--score-accent); color:var(--score-paper); font:600 13px/1.3 var(--score-ui); } #focusModeOverlay #scoreTakes .review-actions #savePerformanceButton:hover:not(:disabled) { background:color-mix(in srgb,var(--score-accent),var(--score-ink) 10%); } #focusModeOverlay #scoreTakes .review-workbench .take-review-note { margin:-1px 0 17px; color:var(--score-muted); font-size:11px; line-height:1.45; } #focusModeOverlay #scoreTakes .saved-history { margin:27px 0 0; border-top:1px solid var(--score-rule); } #focusModeOverlay #scoreTakes .saved-history details { padding:16px 0 0; margin:0; } #focusModeOverlay #scoreTakes .saved-history summary { display:flex; align-items:center; justify-content:space-between; gap:18px; color:var(--score-ink); font:400 18px/1.3 var(--score-serif); } #focusModeOverlay #scoreTakes .saved-history .saved-history-toggle { color:var(--score-accent); font:500 11px/1.3 var(--score-ui); } #focusModeOverlay #scoreTakes .saved-take { min-height:0; } #focusModeOverlay #scoreTakes .saved-performance .saved-actions .mini-button { min-width:108px; justify-content:center; } #focusModeOverlay #scoreTakes .saved-actions { flex-wrap:wrap; justify-content:flex-end; } #focusModeOverlay #scoreTakes .saved-actions .mini-button { min-width:auto; padding:0 9px; } #focusModeOverlay #scoreTakes .saved-actions .saved-manage-button { color:var(--score-muted); } #focusModeOverlay #scoreTakes .saved-actions .saved-delete-button { color:var(--score-accent); } @media(max-width:788px) { #focusModeOverlay .score-transport { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px 16px; position:relative; } #focusModeOverlay .score-transport-identity { width:auto; } #focusModeOverlay .score-transport #focusGuideVocalButton { grid-column:1; } #focusModeOverlay .score-transport .score-tempo { grid-column:2; } #focusModeOverlay .score-transport .score-record-controls { grid-column:2; justify-self:start; } #focusModeOverlay .score-heading { align-items:start; flex-wrap:wrap; } } /* Illustration is a companion to the score, never a backdrop to the words. */ #focusModeOverlay .score-illustration-art { width:100%; height:clamp(340px,56vh,740px); object-fit:contain; align-self:center; } #focusModeOverlay[data-illustrated=true] .score-spread { grid-template-columns:90px minmax(0,1fr) minmax(0,1.2fr); gap:32px; margin:38px 0 24px; align-items:center; } #focusModeOverlay[data-illustrated=true] .score-margin { grid-column:1; grid-row:1; } #focusModeOverlay[data-illustrated=true] .score-sheet { grid-column:2; grid-row:1; } #focusModeOverlay[data-illustrated=true] .score-illustration-art { grid-column:3; grid-row:1; } #focusModeOverlay[data-illustrated=true][data-direction=rtl] .score-spread { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) 90px; } #focusModeOverlay[data-illustrated=true][data-direction=rtl] .score-margin { grid-column:3; } #focusModeOverlay[data-illustrated=true][data-direction=rtl] .score-sheet { grid-column:2; } #focusModeOverlay[data-illustrated=true][data-direction=rtl] .score-illustration-art { grid-column:1; } :root:not(.light) #focusModeOverlay .score-illustration-art { filter:invert(1); opacity:.85; } @media(min-width:1185px) and (max-width:1484px) { #focusModeOverlay[data-illustrated=true] [data-phrase=current] { font-size:52px; margin-block:20px; } #focusModeOverlay[data-illustrated=true] [data-phrase]:not([data-phrase=current]) { font-size:24px; } #focusModeOverlay[data-illustrated=true] #bookFocusGuidance { margin-top:26px; } } @media(max-width:1184px) { #focusModeOverlay[data-illustrated=true] .score-spread { grid-template-columns:105px minmax(0,1fr); } #focusModeOverlay[data-illustrated=true][data-direction=rtl] .score-spread { grid-template-columns:minmax(0,1fr) 105px; } #focusModeOverlay[data-illustrated=true][data-direction=rtl] .score-margin { grid-column:2; } #focusModeOverlay[data-illustrated=true][data-direction=rtl] .score-sheet { grid-column:1; } #focusModeOverlay .score-illustration-art { display:none; } } @media(max-width:788px) { #focusModeOverlay[data-illustrated=true] .score-spread { display:block; } } #focusModeOverlay #scoreIllustrationArt[hidden] { display:none; } /* Preview the first lyric before its cue, without presenting it as active. */ #focusModeOverlay[data-state=opening] [data-phrase=current] { color:var(--score-muted, #74776c); } /* Explicit time-skip controls: readable labels and full-sized targets. */ #focusModeOverlay #focusRewindButton, #focusModeOverlay #focusForwardButton { width:auto; min-width:76px; min-height:44px; padding:8px 4px; font-size:13px; font-weight:500; color:var(--score-ink); white-space:nowrap; } #focusModeOverlay .score-play-group { gap:10px; } #focusModeOverlay #focusRewindButton:disabled, #focusModeOverlay #focusForwardButton:disabled { opacity:.4; } @media(max-width:600px) { #focusModeOverlay .score-play-group { grid-column:1 / -1; justify-content:center; } }