:root{color-scheme:dark;--ink:#08131c;--surface:#10232e;--teal:#55e6c1;--coral:#ff8a73;--mist:#d9e9e7;--muted:#aac4c5;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--ink);color:var(--mist)}*{box-sizing:border-box}body{margin:0;background:linear-gradient(125deg,#08131c,#12303a);min-height:100dvh}button,input,textarea,select{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer;min-height:44px;border:0;border-radius:14px;padding:10px 14px;background:#173440;color:var(--teal)}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible{outline:2px solid var(--teal);outline-offset:3px}a{color:var(--teal)}h1,h2,p{margin:0}h1{font-size:28px;font-weight:850}h2{font-size:20px}small,.muted{color:var(--muted)}.top{padding:calc(14px + env(safe-area-inset-top)) 18px 14px;display:flex;align-items:center;gap:8px;position:sticky;top:0;background:#0b1c26f5;z-index:5}.top .heading{flex:1;min-width:0}.eyebrow{font-size:12px;font-weight:800;letter-spacing:1.5px;color:var(--teal)}.top button{padding:8px;background:transparent;font-size:12px;font-weight:750}.content{max-width:780px;margin:auto;padding:8px 18px calc(120px + env(safe-area-inset-bottom))}.stack{display:grid;gap:12px}.search{display:flex;border:1px solid #547078;border-radius:18px;margin:16px 0 18px;overflow:hidden}.search input{border:0;background:transparent;margin:0}.search button{color:#ff5252;background:transparent}.card{background:#10232ee0;border-radius:20px;padding:18px;display:flex;align-items:center;gap:15px}.card .body{flex:1;min-width:0;text-align:left}.card .title{font-size:19px;font-weight:750;color:#ff8a80;overflow-wrap:anywhere}.artist{color:#9e9e9e;font-size:14px;margin-top:4px}.bpm{font-weight:750;text-align:right}.bpm small{display:block;font-size:10px}.key{border-radius:14px;min-width:54px;min-height:54px;display:grid;place-items:center;font-weight:850;font-size:22px;color:white}.card button{background:transparent;padding:4px;min-width:30px}.card[role=button]{cursor:pointer}.badge{color:var(--coral);font-size:10px;font-weight:800}.bottom{position:fixed;bottom:0;left:0;right:0;display:flex;padding:8px 18px calc(8px + env(safe-area-inset-bottom));background:#10232ef5;z-index:6;gap:10px}.bottom button{flex:1;background:transparent;color:var(--muted);font-size:12px;display:grid;justify-items:center;gap:4px}.bottom button span{font-size:22px;line-height:1}.bottom .active{background:#214b4a;color:var(--teal)}.fab{position:fixed;bottom:calc(90px + env(safe-area-inset-bottom));right:max(18px,calc((100vw - 780px)/2));background:var(--teal);color:var(--ink);font-weight:750;box-shadow:0 6px 24px #0006;padding:16px 22px}.empty{text-align:center;padding:50px 16px;display:grid;gap:10px}.empty .symbol{color:var(--teal);font-size:52px}.login{max-width:440px;margin:12dvh auto;padding:24px;display:grid;gap:20px}.login h1{font-size:34px}.login form{display:grid;gap:16px}label{display:grid;gap:8px;color:var(--muted);font-size:14px}input,textarea,select{width:100%;background:#10232e;color:var(--mist);border:1px solid #547078;border-radius:14px;padding:14px;min-height:48px}textarea{resize:vertical;line-height:1.6}.primary{background:var(--teal);color:var(--ink);font-weight:750}.danger{color:#ff6b73}.tabs{display:flex;overflow-x:auto;background:#0b1c26;position:sticky;top:0;z-index:4;border-bottom:1px solid #29424d}.tabs button{flex:1;border-radius:0;background:transparent;color:var(--muted);white-space:nowrap}.tabs .active{color:var(--teal);border-bottom:3px solid var(--teal)}.reader{height:100dvh;display:flex;flex-direction:column}.reader .top{position:relative}.reader .reader-scroll{flex:1;overflow:auto;padding:20px 18px 120px;overscroll-behavior:contain;touch-action:manipulation}.reader pre{font-family:ui-monospace,SFMono-Regular,monospace;font-size:22px;line-height:1.6;margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.reader pre.no-wrap{white-space:pre;overflow-wrap:normal;width:max-content;min-width:100%}.reader .reader-footer{position:fixed;bottom:0;left:0;right:0;background:#10232ef5;padding:8px 12px calc(8px + env(safe-area-inset-bottom));display:grid;gap:6px;z-index:6}.reader-controls{display:flex;gap:6px;align-items:center}.reader-controls button{flex:1;padding:8px}.reader-controls input{width:80px;padding:0;min-height:32px}.reader.collapsed .top,.reader.collapsed .tabs{display:none}.reader-title{font-size:22px}.reader .meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding-top:8px}.pill{border-radius:30px;background:#173440;padding:5px 12px;font-size:13px}.editor{display:grid;gap:18px;margin-top:18px}.editor textarea{min-height:55dvh;font-family:ui-monospace,monospace}.conflict{border:1px solid #ff6b73;background:#3a2630;padding:16px;border-radius:18px;display:grid;gap:10px;margin:12px 0}.actions{display:flex;gap:8px;flex-wrap:wrap}.section-label{margin:20px 0 10px;color:var(--teal);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:1px}.list-row{display:flex;gap:10px;align-items:center;background:#10232e;border-radius:16px;padding:12px}.list-row .song-link{flex:1;text-align:left;background:transparent;color:#ff8a80;min-width:0}.list-row.done .song-link{text-decoration:line-through;opacity:.7}.list-row input{width:24px;min-height:24px;accent-color:var(--teal)}.list-row button{padding:6px;min-width:36px}.reorder{touch-action:none;cursor:grab}.dragging{outline:2px solid var(--teal);opacity:.7}.file-card{display:grid;gap:10px;overflow-wrap:anywhere}.file-card audio{width:100%}dialog{background:#10232e;color:var(--mist);border:1px solid #365763;border-radius:24px;max-width:calc(100vw - 32px);width:440px;padding:22px;max-height:85dvh}dialog::backdrop{background:#0009}dialog h2{margin-bottom:16px}dialog form,.dialog-stack{display:grid;gap:14px}dialog .picker{max-height:50dvh;overflow:auto;display:grid;gap:8px}#notice{position:fixed;left:18px;right:18px;bottom:calc(160px + env(safe-area-inset-bottom));max-width:650px;margin:auto;background:#25444d;color:var(--mist);border-radius:16px;padding:14px;z-index:20;box-shadow:0 5px 30px #0006}#notice:empty{display:none}.loading{padding:30px}.history-event{border-bottom:1px solid #29424d;padding:12px 0}.record-indicator{color:#ff6b73;font-size:26px;text-align:center}.desktop-link{font-size:13px}.status{margin:8px 0;font-size:12px;color:var(--muted)}@media(orientation:landscape) and (max-height:550px){.reader .reader-footer{background:transparent}.reader .reader-footer button{background:#10232ecc}.reader .top{padding-top:8px}.reader-controls{justify-content:center}}@media(min-width:800px){.bottom{justify-content:center}.bottom button{max-width:260px}.reader .reader-scroll{padding-left:max(18px,calc((100vw - 1000px)/2))}.login{margin-top:8dvh}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* Text editing fills the viewport below the title and tabs, including when the keyboard resizes it. */
.song-edit-screen{height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.song-edit-screen>.top,.song-edit-screen>.tabs{flex-shrink:0;position:static}
.song-edit-screen>.content{width:100%;flex:1;min-height:0;overflow:auto;padding-bottom:env(safe-area-inset-bottom)}
.song-edit-screen>.text-editor-content{display:flex;flex-direction:column;overflow:hidden}
.text-editor-content>.editor{flex:1;min-height:0;display:flex;flex-direction:column;margin-top:8px}
.text-editor-content .editor>label{flex:1;min-height:0;display:flex;flex-direction:column}
.text-editor-content .editor textarea{flex:1;min-height:0;resize:none}
.list-row{min-width:0;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.list-row[data-drop]{box-shadow:inset 0 3px var(--teal)}
.project-choice{display:flex;align-items:center;gap:10px;margin:8px 0}
.project-choice input{width:24px;min-height:24px;accent-color:var(--teal)}

.text-editor-content .editor textarea{white-space:pre;overflow-wrap:normal;overflow:auto}

/* The reader keeps its controls full-width while its song list and text sit side by side. */
.reader-body{display:flex;flex:1;min-height:0;overflow:hidden}
.reader .reader-scroll{min-width:0;padding-bottom:20px}
.reader .reader-footer{position:relative;flex-shrink:0}
.reader-song-list{flex:0 0 36%;max-width:260px;min-width:0;overflow:auto;background:#10232e;border-right:1px solid #365763;padding:6px;overscroll-behavior:contain}
.sidebar-heading{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--teal);padding:4px}
.sidebar-heading strong{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-heading button{padding:6px;min-width:32px}
.condensed-song{display:flex;align-items:center;gap:3px;min-height:44px}
.condensed-song>button{flex:1;min-width:0;text-align:left;background:transparent;color:var(--coral);border-radius:8px;padding:6px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:650}
.condensed-song>button[aria-current=true]{background:#214b4a;box-shadow:inset 3px 0 var(--teal)}
.condensed-song.done>button{opacity:.6;text-decoration:line-through}
.condensed-song input{flex:0 0 24px;width:24px;min-height:24px;margin:0;accent-color:var(--teal)}
.condensed-song .key{flex:0 0 28px;min-width:28px;min-height:28px;font-size:12px;border-radius:10px}
.display-settings{flex-shrink:0;padding:4px 12px;background:#0b1c26}
.display-settings>.pill{min-height:36px;padding:4px 12px;border:1px solid #365763}
#setlist-display-options{padding:6px 0}
#setlist-display-options:not([hidden]){display:flex;flex-wrap:wrap;gap:6px 16px}
#setlist-display-options label{display:flex;align-items:center;gap:8px;white-space:nowrap}
#setlist-display-options input{width:24px;min-height:24px;accent-color:var(--teal)}
.list-row .song-link strong,.list-row .song-link .artist{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.reader-list-header{position:sticky;top:0;background:var(--surface);z-index:1;padding-bottom:6px}
#reader-search{min-height:40px;padding:8px;font-size:14px;white-space:nowrap}
.condensed-song[hidden]{display:none}
.reader-no-matches{padding:10px 4px;font-size:13px;white-space:nowrap}
/* The reader header toggles its buttons on double-tap; holding the song text opens the song menu instead of selecting text. */
.reader > .top{touch-action:manipulation}
.reader .reader-scroll pre{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.reader-menu button{width:100%}
/* Lead vocal pill: the singer's first initial, next to the key pill. */
.lead-pill{flex:0 0 auto;display:inline-grid;place-items:center;min-width:30px;height:30px;padding:0 8px;border-radius:15px;background:#173440;color:var(--teal);font-weight:850;font-size:15px}
.list-row .lead-pill{min-width:36px;height:36px;border-radius:18px;font-size:17px}
.condensed-song .lead-pill{min-width:28px;height:28px;font-size:12px}
/* Undo toast after removing a song from a list. */
#notice.undo{display:flex;align-items:center;justify-content:space-between;gap:12px}
#notice.undo button{min-height:40px;padding:6px 14px;background:var(--teal);color:var(--ink);font-weight:800}