/* Siya By Heart, in the siya.si/works system: cream paper, near-black ink, one orange-red accent, Inter for text and
   JetBrains Mono for small uppercase labels. Mobile first: one column, thumb-sized controls, sheets from the bottom;
   on wider screens the column simply stays readable. */
:root{--bg:#f5f4ef;--card:#fff;--ink:#11110f;--mut:#67665f;--line:#d8d6ce;--acc:#ff5a36;--on:#fff;--ok:#1f8a52;--okbg:#e3f2e9;--bad:#c62828;--badbg:#fbe5e3;--warn:#a86412;--warnbg:#fbefdc;--hid:#ecebe5;--shadow:none;--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;--sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#11110f;--card:#1c1c19;--ink:#f5f4ef;--mut:#bdbdb7;--line:#34332e;--on:#11110f;--ok:#6fcf97;--okbg:#17291f;--bad:#ff8a7a;--badbg:#3a2220;--warn:#f0b65a;--warnbg:#33291a;--hid:#2a2a26}}
:root[data-theme=dark]{--bg:#11110f;--card:#1c1c19;--ink:#f5f4ef;--mut:#bdbdb7;--line:#34332e;--on:#11110f;--ok:#6fcf97;--okbg:#17291f;--bad:#ff8a7a;--badbg:#3a2220;--warn:#f0b65a;--warnbg:#33291a;--hid:#2a2a26}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.55 var(--sans)}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}
h1,h2,h3,p{margin:0}
h3{font-size:1.3rem;line-height:1.15;letter-spacing:-.02em;font-weight:700}
#app{max-width:640px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column}
/* header: like the works nav, translucent paper with a hairline */
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:6px;height:58px;padding:0 8px;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.ttl{flex:1;font-weight:700;font-size:15px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ttl::after{content:".";color:var(--acc)}
.ib{width:44px;height:44px;border-radius:50%;border:0;background:transparent;display:flex;align-items:center;justify-content:center;padding:0}
.ib:active{background:var(--hid)}
.ib[hidden]{visibility:hidden;display:flex!important}
.ic{width:1.3rem;height:1.3rem;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
#screen{flex:1;padding:18px 16px calc(48px + env(safe-area-inset-bottom));min-width:0}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px 16px;margin-bottom:12px}
.mut{color:var(--mut);font-size:.88rem}
.sp{height:12px}
/* buttons: pills; the main one is ink and turns accent on press, like .btn.fill on siya.si */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;padding:6px 20px;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:var(--card);font-weight:600;text-decoration:none;font-size:1rem;text-align:center;transition:background .15s,border-color .15s,color .15s}
.btn:hover,.btn:active{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.sec{background:var(--card);color:var(--ink);border-color:var(--line)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.sec:hover,.btn.ghost:hover,.btn.sec:active,.btn.ghost:active{background:transparent;color:var(--acc);border-color:var(--acc)}
.btn.sm{min-height:44px;width:auto;font-size:.9rem;padding:4px 16px}
.btn[disabled]{opacity:.4;pointer-events:none}
.row{display:flex;gap:8px;flex-wrap:wrap}.row>.btn{flex:1}
.stack{display:flex;flex-direction:column;gap:10px}
.link{background:none;border:0;padding:10px 2px;color:var(--mut);text-decoration:underline;text-underline-offset:3px;font-size:.9rem}
/* eyebrows: the works page's monospace labels */
.h4{font:600 12px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--mut);margin:24px 2px 10px}
.pill{display:inline-block;font:600 11px/1.6 var(--mono);letter-spacing:.04em;padding:1px 9px;border-radius:999px;background:var(--hid);color:var(--mut)}
/* lyrics */
.ly{font-size:1.2rem;line-height:1.6;letter-spacing:-.005em}
.ly .ln{padding:3px 6px;margin:0 -6px;border-radius:8px;transition:background .2s}
.ly .ln.cur{background:var(--warnbg)}
.ly .ln.new{color:var(--acc)}
.ly .echo{color:var(--mut);font-style:italic;font-size:.92em}
.ly .hidden-line{color:transparent;background:var(--hid);border-radius:8px;user-select:none}
.w-hid{display:inline-block;min-width:1.2em;border-bottom:2px solid var(--mut);color:transparent;line-height:1.1;margin:0 1px}
.w-hint{color:var(--acc)}
.ly .ok{color:var(--ok)}
.ly .miss{color:var(--bad);text-decoration:line-through;text-decoration-thickness:1.5px}
.ly .wrong{color:var(--warn);font-weight:700}
.ly .said{font:500 .72rem var(--sans);color:var(--warn);vertical-align:super;margin-left:2px}
.initials{letter-spacing:.06em}
/* songs and parts */
.part{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:1px solid var(--line);background:var(--card);border-radius:16px;padding:14px 16px;margin-bottom:8px;min-height:64px;text-decoration:none;color:inherit;transition:border-color .15s}
.part:hover,.part:active{border-color:var(--ink)}
.part .m{flex:1;min-width:0}.part .t{font-weight:600}.part .d{font-size:.85rem;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dots{display:flex;gap:4px;flex:none}.dots i{width:9px;height:9px;border-radius:50%;background:var(--hid)}.dots i.on{background:var(--acc)}
.due{font:600 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--acc)}
/* recorder */
.mic{width:96px;height:96px;border-radius:50%;border:0;background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center;margin:6px auto 4px}
.mic .ic{width:2.2rem;height:2.2rem}
.mic.on{background:var(--ink);color:var(--card);animation:pulse 1.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,90,54,.45)}100%{box-shadow:0 0 0 26px rgba(255,90,54,0)}}
.center{text-align:center}
.score{font-size:2.6rem;font-weight:800;letter-spacing:-.04em;line-height:1}
.bar2{height:6px;border-radius:3px;background:var(--hid);overflow:hidden}.bar2 i{display:block;height:100%;background:var(--acc);border-radius:3px}
.rate{display:flex;gap:8px}.rate button{flex:1;min-height:52px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-weight:600}
textarea,.txtin{width:100%;border:1px solid var(--line);border-radius:14px;padding:13px 14px;background:var(--bg);color:var(--ink);font:inherit}
textarea:focus,.txtin:focus{outline:none;border-color:var(--ink)}
textarea.lyin{min-height:240px;line-height:1.55}
.order button{display:block;width:100%;text-align:left;border:1px solid var(--line);background:var(--card);border-radius:14px;padding:12px 14px;margin-bottom:8px;font-size:1.05rem}
.order button.done{opacity:.35}.order button.bad{border-color:var(--bad);animation:shake .35s}
@keyframes shake{0%,100%{translate:0}25%{translate:-6px}75%{translate:6px}}
.steps{display:flex;gap:4px;margin:0 0 14px}.steps i{flex:1;height:4px;border-radius:2px;background:var(--hid)}.steps i.on{background:var(--acc)}
.sheet{position:fixed;left:50%;bottom:0;transform:translate(-50%,110%);width:100%;max-width:640px;max-height:85dvh;overflow:auto;background:var(--card);border-radius:22px 22px 0 0;border:1px solid var(--line);border-bottom:0;padding:20px 16px calc(20px + env(safe-area-inset-bottom));z-index:40;transition:transform .25s}
.sheet.show{transform:translate(-50%,0)}
.sheet h3{margin-bottom:4px}
.sheet .mut{margin-top:12px}
.scrim{position:fixed;inset:0;background:rgba(17,17,15,.4);opacity:0;pointer-events:none;transition:opacity .2s;z-index:39}.scrim.show{opacity:1;pointer-events:auto}
.seg{display:flex;background:var(--hid);border-radius:999px;padding:3px;margin:6px 0 14px}.seg button{flex:1;min-height:42px;border:0;background:transparent;border-radius:999px;font-weight:600;font-size:.9rem;color:var(--mut)}.seg button.on{background:var(--ink);color:var(--card)}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--ink);color:var(--card);padding:11px 18px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:50;max-width:calc(100vw - 32px);font-size:.95rem}.toast.show{opacity:1}
.kv{display:flex;justify-content:space-between;gap:10px;font-size:.92rem;padding:3px 0}
.loading{display:flex;gap:6px;align-items:center;justify-content:center;padding:14px;color:var(--mut)}.loading i{width:8px;height:8px;border-radius:50%;background:var(--acc);animation:blink 1s infinite}.loading i:nth-child(2){animation-delay:.15s}.loading i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,100%{opacity:.2}50%{opacity:1}}
details summary{cursor:pointer;font-weight:600}
@media (min-width:700px){#screen{padding:28px 20px 64px}.card{padding:22px 22px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* the song browser */
.intro{color:var(--mut);margin:2px 2px 14px;font-size:.98rem;line-height:1.45}
.browse-top{display:flex;gap:8px;align-items:center}
.browse-top .search{flex:1;min-width:0;height:44px;border-radius:999px;padding:0 18px;font-size:16px;background:var(--card);-webkit-appearance:none;appearance:none}   /* as tall as the pills; 16px so a phone does not zoom in */
.browse-top .btn{flex:none;white-space:nowrap}
@media (max-width:560px){.browse-top{flex-direction:column;align-items:stretch}.browse-top .btn{width:100%}.browse-top .search{flex:none}}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 0}
.chips button{min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:transparent;font:600 12px/1 var(--mono);letter-spacing:.06em;color:var(--mut)}
.chips button.on{background:var(--ink);border-color:var(--ink);color:var(--card)}
.part .end{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
/* six languages: a two-row grid instead of one squeezed row */
.seg.wrap{flex-wrap:wrap;border-radius:22px}.seg.wrap button{flex:1 0 30%}
/* a closed sheet is fully hidden, so it can never peek out behind a phone's toolbar */
.sheet{visibility:hidden;transition:transform .25s,visibility 0s .25s}.sheet.show{visibility:visible;transition:transform .25s}
.search::-webkit-search-cancel-button{filter:grayscale(1);opacity:.6}
/* privacy */
.plist{margin:0;padding-left:20px}.plist li{margin:6px 0;line-height:1.5}
.pill.on{background:var(--acc);color:#fff}
.row>.btn{padding-left:12px;padding-right:12px;line-height:1.2}
/* the brand line on the front of the app, like the works headings: heavy, tight, the accent on the second half */
.tagline{margin:6px 2px 14px}
.tagline p{font-size:clamp(34px,10vw,46px);line-height:1.02;font-weight:800;letter-spacing:-.04em}
.tagline em{font-style:normal;color:var(--acc)}
.tagline span{display:block;margin-top:8px;font:600 12px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
/* rows: the text is the link (stretched over the row), the heart is its own button */
.part{position:relative}
.part a.m{flex:1;min-width:0;color:inherit;text-decoration:none;outline:none}
.part a.m::after{content:"";position:absolute;inset:0;border-radius:16px}
.part a.m:focus-visible::after{box-shadow:0 0 0 2px var(--ink)}
.part .end{position:relative;pointer-events:none}
.heart{position:relative;z-index:1;flex:none;color:var(--mut)}
.heart.on{color:var(--acc)}.heart.on .ic{fill:var(--acc)}
.heart:active .ic{transform:scale(.85)}
/* three tabs: songs, standards, and a narrow one for my liked songs */
.seg.tabs button.liked{flex:0 0 auto;padding:0 16px;display:flex;align-items:center;justify-content:center;gap:6px}
.seg.tabs button.liked .ic{width:1.05rem;height:1.05rem}
.seg.tabs button.liked.on .ic{fill:var(--acc);stroke:var(--acc)}
/* the style filter: one row that scrolls sideways on a phone */
.chips.scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:-16px;margin-right:-16px;padding:0 16px}
.chips.scroll::-webkit-scrollbar{display:none}
.chips.scroll button{flex:none}
.seg.tabs button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 10px}
.seg.tabs .cnt{display:none}
@media (min-width:430px){.seg.tabs .cnt{display:inline}}
/* Siya's note at the top of the app: her voice, a little larger than the text, signed */
.siya-note{margin:8px 2px 16px;padding-left:14px;border-left:3px solid var(--acc)}
.siya-note p{font-size:1.25rem;line-height:1.35;font-weight:600;letter-spacing:-.015em}
.siya-note span{display:block;margin-top:8px;font:600 12px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
/* the three pills above the list: separate, like the works buttons; the chosen one is ink */
.pills{display:flex;gap:8px;margin:4px 0 14px;flex-wrap:wrap}
.pills button{min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-weight:600;font-size:.95rem;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.pills button.on{background:var(--ink);border-color:var(--ink);color:var(--card)}
.pills button.liked .ic{width:1.05rem;height:1.05rem}
.pills button.liked.on .ic{fill:var(--acc);stroke:var(--acc)}
.pills .cnt{display:none;opacity:.6;font-weight:500}
.pills .short{display:none}
@media (max-width:429px){.pills.many{gap:6px}.pills.many button{padding:0 10px}.pills.many button.liked{padding:0 12px}.pills.many .full{display:none}.pills.many .short{display:inline}}
.pills.scroll{overflow-x:auto;scrollbar-width:none;margin-left:-16px;margin-right:-16px;padding:0 16px}
.pills.scroll::-webkit-scrollbar{display:none}
.pills.scroll button{flex:none}
.col-intro{margin:0 2px 12px;font-size:.95rem;line-height:1.45}
@media (min-width:430px){.pills .cnt{display:inline}}
.siya-note{margin-bottom:20px}
/* one row on a phone: the two text pills share the space, the heart pill keeps its size */
.pills{flex-wrap:nowrap}
.pills button{flex:1 1 auto;min-width:0;justify-content:center;padding:0 12px;font-size:.9rem;overflow:hidden;text-overflow:ellipsis}
.pills button.liked{flex:0 0 auto;padding:0 14px}
/* the browser's footer: Siya's note, signed, then privacy */
.foot{margin-top:30px;padding-top:20px;border-top:1px solid var(--line)}
.foot p{font-size:1rem;line-height:1.5;color:var(--ink)}
.foot .sig{display:block;margin-top:8px;font:600 12px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.foot .plink{margin-top:10px}
/* the footer keeps the note's own look (bold, the orange rule, signed); no extra line above it */
.foot{border-top:0;padding-top:0;margin-top:34px}
.foot .siya-note{margin:0 2px 0}
.foot .plink{margin:14px 2px 0}
/* the hidden attribute always hides (a .btn's display: flex had kept a hidden button visible) */
[hidden]{display:none!important}
/* the microphone card on the one-screen recall: a little air around the button */
.card.center .mic{margin:4px auto 2px}
/* recording your voice: the full text, and the mic docked at the bottom of the screen while you read */
.rec-text{margin:10px 0 4px;font-size:1.1rem}
.rec-text .h4{margin:16px 0 4px}.rec-text .h4:first-child{margin-top:4px}
.rec-dock{position:sticky;bottom:0;z-index:2;margin:8px -16px -18px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--line);border-radius:0 0 18px 18px}
.rec-dock .mic{width:72px;height:72px;margin:0 auto 2px}.rec-dock .mic .ic{width:1.8rem;height:1.8rem}
/* the lyrics and chords buttons: side by side on wide screens, stacked on a phone (the chords label is long) */
@media (max-width:520px){.row.pair{flex-direction:column}.row.pair>.btn{width:100%}}
/* the voice fold-out: a small orange label with an arrow; closed it is one quiet line */
details.voice{padding-top:14px;padding-bottom:14px}
details.voice summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;font:600 12px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--acc);min-height:24px}
details.voice summary::-webkit-details-marker{display:none}
details.voice summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:2px;transition:transform .15s}
details.voice[open] summary::after{transform:rotate(225deg) translateY(-1px)}
details.voice .vb{margin-top:12px}
/* cards and song rows: white on the paper, no outline (her note); the corners as before. Buttons and pills keep theirs */
.card,.part{border:0}
.part:hover,.part:active{border-color:transparent}
/* under a song: edit and delete as two quiet links side by side */
.center.links{display:flex;justify-content:center;gap:22px;margin-top:10px}
/* the row under a song: backing tracks, then edit and delete as round icon pills */
.row.tools-row{flex-wrap:nowrap}
.row.tools-row>.btn{flex:1 1 auto}
.row.tools-row>.btn.icon{flex:0 0 52px;width:52px;padding:0}
.btn.icon .ic{width:1.25rem;height:1.25rem}
/* in a list row: your link as an icon beside the heart, above the row's own link */
.rowlink{position:relative;z-index:1;flex:none;color:var(--ink);margin-right:-6px}
.rowlink:hover,.rowlink:active{color:var(--acc)}
/* settings: air around the save and load pair, so it does not sit on Close */
.sheet .row{margin:10px 0 16px}
/* the microphone you hold: no selecting text or menus on a long press; "one moment" while it opens */
.mic.wait{opacity:.55}
/* word for word: the next screen comes by itself; a thin line fills the button meanwhile */
.btn.auto{position:relative;overflow:hidden}
.btn.auto::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--acc);transform-origin:left;animation:autogo 1.2s linear forwards}
@keyframes autogo{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.btn.auto::after{animation:none}}
/* section titles in the accent (the privacy screen) */
.h4.acc{color:var(--acc)}
/* the song browser: filters above the search, then the list */
.chips.filters{margin-top:0;margin-bottom:12px}
.chips.filters:empty{display:none}
.browse-list{margin-top:14px}
.browse-list>.h4:first-child{margin-top:18px}
/* the orange button (add your own song): white on the accent; ink on hover */
.btn.acc{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.acc:hover,.btn.acc:active{background:var(--ink);border-color:var(--ink);color:var(--card)}
/* the home screen: the name large and left, in line with the content; "By Heart." in orange */
.bar.home #back{display:none!important}
.bar.home .ttl{font-size:22px;letter-spacing:-.02em;padding-left:8px}
.bar.home .ttl .by{color:var(--acc)}
@media (min-width:700px){.bar.home .ttl{padding-left:12px}}
/* a screen comes in softly, object by object (delays set by the app); none when motion is reduced */
@keyframes softin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.soft{animation:softin .5s cubic-bezier(.2,.7,.2,1) both}
@media (prefers-reduced-motion:reduce){.soft{animation:none}}
/* practice time: three or four numbers, then minutes a day as thin columns (one series, the accent) */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:10px 8px;margin-bottom:16px}
.tile{display:flex;flex-direction:column;gap:2px;min-width:0}
.tile b{font-size:1.15rem;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.tile span{font-size:.8rem;color:var(--mut)}
.daychart .cols{display:flex;align-items:flex-end;gap:2px;height:110px;padding-top:18px}
.daychart .col{position:relative;flex:1;min-width:0;height:100%;display:flex;align-items:flex-end;justify-content:center;border:0;background:transparent;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.daychart .col i{display:block;width:100%;max-width:16px;background:var(--acc);border-radius:4px 4px 0 0}
.daychart .col i.zero{background:var(--line);border-radius:1px}
.daychart .col:hover i,.daychart .col:focus-visible i{opacity:.7}
.daychart .col:focus-visible{outline:none}
.daychart .col em{position:absolute;left:50%;transform:translateX(-50%);font:600 11px/1 var(--mono);font-style:normal;color:var(--mut);white-space:nowrap;pointer-events:none}
.daychart .col:first-child em{left:0;transform:none}.daychart .col:last-child em{left:auto;right:0;transform:none}
.daychart .ends{display:flex;justify-content:space-between;font-size:.75rem;color:var(--mut);margin-top:6px;border-top:1px solid var(--line);padding-top:6px}
.daychart .cap{font-size:.85rem;color:var(--mut);margin-top:6px;min-height:1.3em}
.bysong{display:block;color:inherit;text-decoration:none;padding:6px 0}
.bysong .bar2{margin-top:4px}
.part.prac .go{display:flex;transform:rotate(180deg);color:var(--mut)}
.part.prac .go .ic{width:1.1rem;height:1.1rem}
.tiles.four{grid-template-columns:1fr 1fr}
@media (min-width:560px){.tiles.four{grid-template-columns:repeat(4,1fr)}}
.tiles:last-child{margin-bottom:0}
/* by heart: a green check beside a part or a song, and a line on the song screen */
.okc{display:inline-flex;vertical-align:-.12em;margin-left:6px;color:var(--ok)}
.okc .ic{width:1.05em;height:1.05em;stroke-width:3}
.okline{display:flex;align-items:center;gap:2px;color:var(--ok);font-weight:600;font-size:.92rem;margin-bottom:10px}
.okline .okc{margin:0 4px 0 0}
/* "add a link" and "add a note", side by side; your notes as cards, a pencil to change one */
.addrow{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.addone{display:contents}
.card.note{display:flex;align-items:flex-start;gap:10px}
.card.note .nt{flex:1;min-width:0}
.card.note p{white-space:pre-wrap;overflow-wrap:anywhere;margin:0 0 6px}
.card.note .mut{font-size:.8rem}
.card.note .btn.icon{flex:none;width:44px;min-height:44px;padding:0;margin:-8px -6px 0 0}
/* a link pasted in the search: its site, then the button that reads the lyrics from it */
.linkcard .host{font:600 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-bottom:12px;overflow-wrap:anywhere}
/* a recording being checked: a spinner where the record button was */
.mic.busy{background:transparent;color:var(--acc);animation:none;opacity:1;cursor:default}
.spin{width:44px;height:44px;border-radius:50%;border:4px solid var(--hid);border-top-color:var(--acc);animation:spin .8s linear infinite}
.rec-dock .spin{width:38px;height:38px}
@keyframes spin{to{transform:rotate(360deg)}}
/* The Lyrics: a play button beside each part's name */
.rec-text .h4.plabel{display:flex;align-items:center;gap:2px}
.h4.plabel .ib{width:34px;height:34px;margin:-9px 0;color:var(--acc)}
.h4.plabel .ib .ic{width:15px;height:15px}
.mic-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.mic-row>.dl{justify-self:start}.mic-row>.dr{justify-self:end}
.mic-row .btn{width:auto;white-space:nowrap}
/* the search's placeholder names the list it searches; a little smaller so the sentence fits (typing stays 16px) */
.browse-top .search::placeholder{font-size:14px}