/* piece-me: an iOS shell in matte black and bone (DESIGN.md). Frank Ruhl Libre is the artist's words only; the interface
   is the system face. Sizes are in rem off the root, which follows the iPhone's text-size setting (-apple-system-body). */
@font-face { font-family: 'Frank Ruhl Libre'; font-weight: 300 900; font-display: swap; src: url(/fonts/FrankRuhlLibre-hebrew.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Frank Ruhl Libre'; font-weight: 300 900; font-display: swap; src: url(/fonts/FrankRuhlLibre-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: light dark;
  /* planes: the page, cells one step up, raised chrome; sheets have their own pair (elevated, as iOS does) */
  --bg: light-dark(#f6f4ef, #0b0b0b);
  --cell: light-dark(#ffffff, #161616);
  --raised: light-dark(#ece9e2, #222222);
  --sheet: light-dark(#f6f4ef, #1c1c1c);
  --sheet-cell: light-dark(#ffffff, #2a2a2a);
  --ink: light-dark(#111111, #ece7de);
  --ink-2: light-dark(#57534d, #a39e95);
  --ink-3: light-dark(#6b6760, #918c84);
  --on-ink: light-dark(#f6f4ef, #0b0b0b);
  --hair: light-dark(rgb(17 17 17 / .16), rgb(236 231 222 / .16));
  --fill: light-dark(rgb(17 17 17 / .06), rgb(236 231 222 / .09));
  /* code colors, one job each (DESIGN.md, The One Job Rule) */
  --act: light-dark(#1f4fd6, #7fa2ff);
  --failed: light-dark(#c42b22, #ff6b5e);
  --listen: light-dark(#7a5c00, #f2c230);
  --listen-block: light-dark(#e5b91f, #f2c230);
  --ai: light-dark(#5b46d6, #b9a9ff);
  --material: light-dark(rgb(246 244 239 / .8), rgb(11 11 11 / .74));
  --material-up: light-dark(rgb(255 255 255 / .82), rgb(36 36 36 / .78));
  --shadow: light-dark(0 6px 24px rgb(17 17 17 / .14), 0 0 0 .5px rgb(236 231 222 / .14));
  --scrim: rgb(0 0 0 / .42);
  --lift: 0 3px 8px rgb(0 0 0 / .12);
  --sleeve: #0b0b0b; --sleeve-quiet: #5f5b55; --sleeve-ink: #ece7de;  /* the sleeve is black in both themes */
  --r-mark: 4px; --r-art: 8px; --r-control: 10px; --r-cell: 12px; --r-float: 16px; --r-sheet: 22px;
  --hairline: .5px;
  --serif: 'Frank Ruhl Libre', serif;
  --sans: system-ui, -apple-system, sans-serif;
  /* the iOS text styles, relative to Body (17px at the default setting) */
  --fs-large: 2rem; --fs-title: 1.294rem; --fs-body: 1rem; --fs-callout: .941rem;
  --fs-sub: .882rem; --fs-foot: .765rem; --fs-code: .706rem; --fs-tab: .66rem;
  --fs-words: 1.235rem; --fs-transcript: 1.118rem; --fs-compose: 1.176rem;
  /* motion: iOS's decelerating sheet curve and its standard ease */
  --ease: cubic-bezier(.25, .1, .25, 1); --ease-out: cubic-bezier(.32, .72, 0, 1); --ease-in: cubic-bezier(.4, 0, 1, 1);
  --t-press: 120ms; --t: 240ms; --t-push: 350ms; --t-sheet: 440ms;
  /* the fixed chrome stacks from these, in CSS and in common.js */
  --tabs-h: calc(50px + env(safe-area-inset-bottom)); --mini-h: max(60px, 3.6rem); --float-gap: 8px;  /* the mini player grows with the text size */
  --gutter: 16px; --column: 640px;
}
@media (max-resolution: 1dppx) { :root { --hairline: 1px; } }
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
/* Page changes (common.js, #33): deeper slides in from the leading edge (the left, in Hebrew) over the page it came from,
   which drifts a little and dims; back slides it away. Never a cross-fade, which showed one page's rows through the
   other's. Tabs and same-level moves don't animate; the tab bar holds still. */
nav.tabs { view-transition-name: tabs; }
html[data-vt] main * { view-transition-name: none !important; }  /* a work's parts glide only when rearranged in place */
html[data-vt]::view-transition-old(root), html[data-vt]::view-transition-new(root) {
  animation: var(--t-push) var(--ease-out) both; mix-blend-mode: normal; background: var(--bg); }  /* the snapshots leave it out */
html[data-vt=push]::view-transition-new(root) { animation-name: page-in; }
html[data-vt=push]::view-transition-old(root) { animation-name: page-under; }
html[data-vt=pop]::view-transition-old(root) { animation-name: page-out; z-index: 1; }
html[data-vt=pop]::view-transition-new(root) { animation-name: page-back; }
@keyframes page-in { from { transform: translateX(-100%); } }
@keyframes page-out { to { transform: translateX(-100%); } }
@keyframes page-under { to { transform: translateX(30%); filter: brightness(.9); } }
@keyframes page-back { from { transform: translateX(30%); filter: brightness(.9); } }

/* ─────────────────────────────────────────────────────────────────────────────────────────────────────── base ── */
* { box-sizing: border-box; }
[hidden] { display: none !important; }  /* author display rules (e.g. .mini flex) must not beat hidden */
html { font-size: 17px; font: -apple-system-body; background: var(--bg); -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent;
  scrollbar-color: var(--ink-3) transparent; }
body { margin: 0; font-family: var(--sans); font-size: var(--fs-body); line-height: 1.3; color: var(--ink); background: var(--bg); caret-color: var(--ink); }
::selection { background: color-mix(in srgb, var(--act) 32%, transparent); }
main { max-width: calc(var(--column) + 2 * var(--gutter)); margin: 0 auto;
  padding: 8px max(var(--gutter), env(safe-area-inset-right)) calc(var(--tabs-h) + 32px) max(var(--gutter), env(safe-area-inset-left)); }
body:has(.mini:not([hidden])) main { padding-bottom: calc(var(--tabs-h) + var(--mini-h) + 2 * var(--float-gap) + 32px); }
body:not(:has(header.top)) main:not(.login) { padding-top: calc(16px + env(safe-area-inset-top)); }
a { color: var(--act); text-underline-offset: .2em; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
svg { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--act); outline-offset: 2px; border-radius: var(--r-mark); }
.icon { width: 1.2em; height: 1.2em; flex: none; }

/* the two voices: the artist's words (serif, verbatim) and the AI's (sans, secondary, ✦ in violet) */
.mine { font-family: var(--serif); font-size: var(--fs-words); line-height: 1.45; text-wrap: pretty; overflow-wrap: anywhere; }  /* a pasted URL can't push the page sideways */
.ai { font-family: var(--sans); color: var(--ink-2); font-size: var(--fs-sub); line-height: 1.4; overflow-wrap: anywhere; }
.ai-line::before { content: '✦\00a0'; content: '✦\00a0' / ''; color: var(--ai); }  /* drawn, not read: AI is spoken as "AI:" */
.ai-block { margin: 24px 0; color: var(--ink-2); font-size: var(--fs-sub); line-height: 1.45; }
.ai-block .label { display: block; font-size: var(--fs-foot); color: var(--ink-2); margin-bottom: 6px; font-weight: 600; }
.ai-block ul { margin: 4px 0 0; padding-inline-start: 18px; }

/* ────────────────────────────────────────────────────────────────── bars: the top bar, large titles, the tab bar ── */
/* on a wide screen the bar's controls line up with the content column, not the window's edges */
header.top { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 4px;
  min-height: calc(44px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(4px, env(safe-area-inset-right), calc((100% - var(--column)) / 2 - 4px)) 0 max(4px, env(safe-area-inset-left), calc((100% - var(--column)) / 2 - 4px));
  transition: background-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
header.top.scrolled { background: var(--material); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 var(--hairline) 0 var(--hair); }
.bar-title { position: absolute; inset-inline: 72px; bottom: 0; height: 44px; display: grid; place-items: center; pointer-events: none;
  font-size: var(--fs-body); font-weight: 600; opacity: 0; transition: opacity var(--t) var(--ease); }
.bar-title span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
header.top.collapsed .bar-title { opacity: 1; }
.crumbs { display: flex; align-items: center; min-width: 0; font-size: var(--fs-body); }
.crumbs a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 8px; color: var(--act); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62vw; }
.crumbs a .icon { width: 12px; height: 20px; }
.crumbs .sep { color: var(--ink-3); flex: none; }
button.more { width: 44px; min-width: 44px; height: 44px; padding: 0; background: transparent; color: var(--act); }
button.more .icon, button.more svg { width: 30px; height: 30px; }
header.top > button.more { margin-inline-start: auto; }  /* the trailing edge, alone or beside a back link */
h1.large, main > h1, #work > h1, #note > h1 { font-size: var(--fs-large); line-height: 1.2; font-weight: 700; margin: 4px 0 4px; overflow-wrap: anywhere;
  text-align: match-parent; }  /* an English title keeps its direction but aligns with the Hebrew bar */

nav.tabs { position: fixed; bottom: 0; inset-inline: 0; z-index: 4; display: flex; justify-content: center; gap: 8px; height: var(--tabs-h);
  padding: 4px max(16px, calc((100% - var(--column)) / 2)) env(safe-area-inset-bottom); background: var(--material); -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%); box-shadow: 0 calc(-1 * var(--hairline)) 0 var(--hair); }
nav.tabs a { flex: 1 1 0; max-width: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 44px;
  color: var(--ink-3); text-decoration: none; font-size: min(var(--fs-tab), 12px); font-weight: 600; border-radius: var(--r-cell); }  /* like iOS, the tab bar doesn't grow with the text size */
nav.tabs a[aria-current=page] { color: var(--act); }
nav.tabs svg { width: 26px; height: 26px; flex: none; }
html.kb-open nav.tabs { display: none; }  /* only while the on-screen keyboard is up (common.js), not on mere focus */

/* ────────────────────────────────────────────────────────────────────────────────────────────── controls ── */
button, .btn { font: 600 var(--fs-body)/1.2 var(--sans); border: 0; border-radius: 999px; padding: 0 18px; min-height: 44px; cursor: pointer;
  background: var(--raised); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform var(--t-press) var(--ease), opacity var(--t-press) var(--ease); touch-action: manipulation; }
button.primary { background: var(--ink); color: var(--on-ink); }
button.plain, button.ghost { background: transparent; color: var(--act); font-weight: 500; padding: 0 10px; }
button.danger { color: var(--failed); }
button:active:not(:disabled), .btn:active { transform: scale(.97); opacity: .7; }
button:disabled { opacity: .4; cursor: default; }
button svg { width: 1.05em; height: 1.05em; flex: none; }
.btn:has(input:focus-visible) { outline: 2px solid var(--act); outline-offset: 2px; }
.row { display: flex; gap: 8px; margin: 12px 0; }
.row > * { flex: 1; min-width: 0; }

/* the segmented control */
.seg { display: flex; background: var(--raised); border-radius: var(--r-control); padding: 2px; margin: 16px 0; }
.seg button { flex: 1; min-height: 44px; padding: 4px 8px; border-radius: var(--r-art); background: transparent; color: var(--ink); font-size: var(--fs-sub); font-weight: 500; }
.seg button[aria-pressed=true] { background: var(--cell); font-weight: 600; box-shadow: var(--lift), 0 0 0 var(--hairline) var(--hair); }
.seg button:active:not(:disabled) { transform: none; }

/* fields */
/* a text field shows focus the iOS way: the caret, in the tint (no ring) */
textarea, input[type=search], input[type=password], input[type=text] { width: 100%; font: inherit; color: inherit; outline: none; caret-color: var(--act); }
textarea:focus-visible, input[type=search]:focus-visible, input[type=password]:focus-visible, input[type=text]:focus-visible { outline: none; }
textarea::placeholder, input::placeholder { color: var(--ink-3); opacity: 1; font-family: var(--sans); }  /* the app's words, not the artist's */
textarea { display: block; field-sizing: content; min-height: calc(3lh + 28px); max-height: 60vh; resize: none; border: 0; border-radius: var(--r-cell);
  background: var(--cell); padding: 14px 16px; font-family: var(--serif); font-size: var(--fs-compose); line-height: 1.55; }
input[type=search], input[type=password], input[type=text] { border: 0; border-radius: var(--r-control); background: var(--raised); padding: 10px 14px; min-height: 44px; margin: 8px 0; }
input[type=search]::-webkit-search-decoration { -webkit-appearance: none; }
details > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; list-style: none; }
details > summary::-webkit-details-marker { display: none; }

/* ────────────────────────────────────────────────────────────────────────────────── lists, status, tags ── */
.muted { color: var(--ink-2); font-size: var(--fs-foot); }
.type { color: var(--ink-2); font-size: var(--fs-foot); font-weight: 500; }
ul.list { list-style: none; margin: 0; padding: 0; }
ul.list > li { border-bottom: var(--hairline) solid var(--hair); }
ul.list a.item { display: block; padding: 12px 0; color: inherit; text-decoration: none; min-height: 44px; border-radius: var(--r-mark);
  transition: background-color var(--t-press) var(--ease); }
ul.list a.item:active { background: var(--fill); }
.title { font-weight: 600; }
.piece-link { display: flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; }
.work-title { font-size: var(--fs-body); font-weight: 600; }
.empty { color: var(--ink-2); text-align: center; padding: 48px 16px; font-size: var(--fs-callout); line-height: 1.45; }
ul.list > li.empty { border-bottom: 0; }
.banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; background: var(--cell); border-radius: var(--r-cell); padding: 12px 16px;
  margin: 12px 0; font-size: var(--fs-sub); line-height: 1.4; }
/* status: a small code block, then the word (DESIGN.md Chips) */
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-foot); font-weight: 500; color: var(--ink-2); vertical-align: middle; }
.chip::before { content: ''; width: 8px; height: 8px; background: var(--ink-3); flex: none; }
.chip.failed { color: var(--failed); }
.chip.failed::before { background: var(--failed); }
.chip.listen { color: var(--listen); }
.chip.listen::before { background: var(--listen-block); }
.chip.pending::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.chip.processing::before { animation: breathe 1.4s var(--ease) infinite alternate; }  /* a sign of life while it works */
@keyframes breathe { to { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .chip.processing::before { animation: none; } }
.new-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--act); margin-inline-end: 8px; vertical-align: middle; }
a.tag { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -12px 0;
  padding: 0 6px; color: var(--act); font-size: var(--fs-foot); text-decoration: none; }
.tags { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0 4px; direction: rtl; color: var(--ink-2); font-size: var(--fs-foot); }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; text-decoration: none; }

/* ────────────────────────────────────────────── the player: a take row, the mini player, Now Playing (the pulse) ── */
/* time and waveforms run left to right even in the Hebrew UI; play icons never mirror */
.take { display: flex; align-items: center; gap: 12px; direction: ltr; margin: 12px 0; }
.take .play { width: 44px; height: 44px; padding: 0; border-radius: 50%; flex: none; background: var(--raised); color: var(--ink); }
.take.playing .play { background: var(--ink); color: var(--on-ink); }
.take .wave { flex: 1; min-width: 0; width: 100%; height: 44px; touch-action: pan-y; cursor: pointer; overflow: visible; border-radius: var(--r-mark); }  /* shrinks, so the time stays on screen */
.wave path, .pulse path { fill: none; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.wave .p0, .pulse .p0 { stroke: var(--ink-3); stroke-width: 1; }
.wave .p1, .pulse .p1 { stroke: var(--ink); stroke-width: 2; }
.take .time, .mini .mpos { color: var(--ink-2); font-size: var(--fs-code); font-weight: 500; letter-spacing: .04em; font-variant-numeric: tabular-nums;
  white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
.mini { position: fixed; z-index: 5; inset-inline: var(--float-gap); bottom: calc(var(--tabs-h) + var(--float-gap)); max-width: var(--column); margin: 0 auto;
  height: var(--mini-h); display: flex; align-items: center; gap: 4px; padding: 0 6px 0 8px; border-radius: var(--r-float); background: var(--material-up);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: var(--shadow); }
.mini .mopen { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; background: transparent; padding: 0; border-radius: var(--r-control);
  color: inherit; text-align: start; justify-content: flex-start; font-weight: 400; }
.mini .mopen:active:not(:disabled) { transform: none; opacity: .7; }
.sleeve { width: 44px; height: 44px; flex: none; border-radius: var(--r-art); background: var(--sleeve); display: grid; place-items: center; padding: 0 5px;
  box-shadow: inset 0 0 0 var(--hairline) var(--hair); }  /* its edge, so a black sleeve still reads on the black page */
.sleeve svg { width: 100%; height: 22px; }
.sleeve .p0 { stroke: var(--sleeve-quiet); }
.sleeve .p1 { stroke: var(--sleeve-ink); stroke-width: 1.6; }
.mini .mt { flex: 1; min-width: 0; }
.mini .mtitle { display: block; font-weight: 600; font-size: var(--fs-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini .msub { display: block; color: var(--ink-2); font-size: var(--fs-foot); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini .pp { width: 44px; height: 44px; padding: 0; background: transparent; color: var(--ink); flex: none; }
.mini .pp svg { width: 24px; height: 24px; }
.mini .mpos { flex: none; padding: 0 2px; }

/* Now Playing: the playing take's pulse owns the sheet and is its scrubber; then −5s, play/pause, and the lines */
.np .sheet-body { gap: 0; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.np-scrub { position: relative; margin: 8px 0 0; height: 168px; border-radius: var(--r-float); background: var(--sleeve); padding: 24px 16px; direction: ltr;
  touch-action: none; cursor: pointer; }
.np-scrub svg { width: 100%; height: 100%; overflow: visible; }
.np-scrub .p0 { stroke: var(--sleeve-quiet); stroke-width: 1; }
.np-scrub .p1 { stroke: var(--sleeve-ink); stroke-width: 2.2; }
.np-times { display: flex; justify-content: space-between; direction: ltr; margin: 8px 2px 0; color: var(--ink-2); font-size: var(--fs-code);
  font-weight: 500; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.np-title { font-size: var(--fs-title); font-weight: 700; line-height: 1.25; margin: 16px 0 0; }
.np-sub { color: var(--ink-2); font-size: var(--fs-sub); margin-top: 2px; }
.np-ctl { display: flex; justify-content: center; align-items: center; gap: 40px; margin: 16px 0 8px; direction: ltr; }
.np-ctl button { background: transparent; color: var(--ink); padding: 0; width: 64px; height: 64px; }
.np-ctl .np-pp svg { width: 44px; height: 44px; }
.np-ctl .np-back svg { width: 34px; height: 34px; }
.np-lines { margin: 8px 0 0; border-top: var(--hairline) solid var(--hair); padding-top: 12px; max-height: 40dvh; overflow: auto; }
.np-line { font-family: var(--serif); font-size: var(--fs-words); line-height: 1.4; padding: 8px 0; color: var(--ink-3); cursor: pointer; border-radius: var(--r-mark);
  transform-origin: right center; transition: color var(--t) var(--ease), transform var(--t) var(--ease-out); }
.np-line[dir=ltr] { transform-origin: left center; }
/* the sung line: full ink, semibold and a step larger (by transform: nothing below it moves) */
.np-line.now { color: var(--ink); font-weight: 600; transform: scale(1.06); }
.np-close { position: absolute; top: 4px; inset-inline-end: 4px; width: 44px; height: 44px; padding: 0; background: transparent; color: var(--ink-2); z-index: 1; }
.np-close svg { width: 22px; height: 22px; }
@media (prefers-reduced-motion: reduce) { .np-line { transition: color var(--t) var(--ease); } .np-line.now { transform: none; } }
.np-line.melody { font-family: var(--sans); font-size: var(--fs-callout); color: var(--ink-2); }

/* ───────────────────────────────────────────────────────────────────────────── sheets (⋯, pickers, Now Playing) ── */
dialog.sheet { margin: auto auto 0; width: 100%; max-width: calc(var(--column) + 32px); max-height: calc(100dvh - env(safe-area-inset-top) - 16px);
  border: 0; padding: 0; background: transparent; color: var(--ink); overflow: visible; }
dialog.sheet::backdrop { background: var(--scrim); transition: opacity var(--t) var(--ease); }
dialog.sheet[open] .sheet-body { animation: sheet-rise var(--t-sheet) var(--ease-out); }
dialog.sheet[open]::backdrop { animation: fade-in var(--t) var(--ease); }
dialog.sheet.closing .sheet-body { transform: translateY(105%) !important; transition: transform 280ms var(--ease-in) !important; }
dialog.sheet.closing::backdrop { opacity: 0; }
.sheet-body { position: relative; display: flex; flex-direction: column; gap: 8px; max-height: inherit; overflow: auto; overscroll-behavior: contain;
  background: var(--sheet); border-radius: var(--r-sheet) var(--r-sheet) 0 0; padding: 6px 16px calc(16px + env(safe-area-inset-bottom)); outline: none; }
.grabber { flex: none; height: 24px; margin: 0 -16px; display: grid; place-items: center; touch-action: none; cursor: grab; }
.grabber::before { content: ''; width: 36px; height: 5px; border-radius: var(--r-mark); background: var(--ink-3); opacity: .55; }
/* the ⋯ actions: an inset list, the destructive one in red, Cancel apart */
.sheet-content { display: flex; flex-direction: column; border-radius: var(--r-cell); overflow: hidden; background: var(--sheet-cell); }
.sheet-content:not(:has(> button)) { background: transparent; border-radius: 0; overflow: visible; }
.sheet-content > button { width: 100%; justify-content: flex-start; border-radius: 0; min-height: 52px; padding: 0 16px; background: transparent;
  color: var(--act); font-weight: 400; font-size: var(--fs-body); }
.sheet-content > button + button, .sheet-title + button { box-shadow: inset 0 var(--hairline) 0 var(--hair); }
/* the action sheet's message (#42: which workspace): iOS's small centered line at the top of the group */
.sheet-title { margin: 0; padding: 12px 16px; text-align: center; font-size: var(--fs-foot); font-weight: 500; color: var(--ink-2); }
.sheet-content > button.danger { color: var(--failed); }
.sheet-content > button:active:not(:disabled) { transform: none; background: var(--fill); opacity: 1; }
.sheet-body > button[data-close] { width: 100%; min-height: 52px; border-radius: var(--r-cell); background: var(--sheet-cell); color: var(--act); font-weight: 600; }
.sheet-body > button[data-close]:active:not(:disabled) { transform: none; background: var(--fill); }
.sheet-body > .muted, .sheet-content > .muted { color: var(--ink-2); font-size: var(--fs-sub); line-height: 1.4; padding: 4px 4px 0; }
/* a form in place of the actions (#68, the profile): section-header labels over the picker's field and the segmented
   control, then the one primary button. In a sheet the chosen segment is a sheet cell, one step above the sheet. */
.sheet-content > form { display: flex; flex-direction: column; padding-bottom: 8px; }
.sheet-content > form :is(label, .label) { font-size: var(--fs-foot); font-weight: 600; color: var(--ink-2); padding: 12px 4px 0; }
.sheet-content > form .seg { margin: 8px 0; }
.sheet-content > form button.primary { margin-top: 16px; }
dialog.sheet .seg button[aria-pressed=true] { background: var(--sheet-cell); }
@keyframes sheet-rise { from { transform: translateY(100%); } }
@keyframes fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  dialog.sheet[open] .sheet-body { animation: fade-in var(--t) var(--ease); }
  dialog.sheet.closing .sheet-body { transform: none !important; opacity: 0; transition: opacity 160ms var(--ease) !important; }
}

/* the searchable work picker (move, merge) */
.picker { margin-top: 4px; border-radius: var(--r-cell); overflow: hidden; background: var(--sheet-cell); max-height: 46dvh; overflow-y: auto; }
.picker:empty { display: none; }
.picker > li { border-bottom: 0 !important; }
.picker > li + li { box-shadow: inset 0 var(--hairline) 0 var(--hair); }
.picker a.item { padding: 12px 16px; border-radius: 0; }
.picker .type { margin-inline-start: 6px; }
.picker li.muted { padding: 14px 16px; }

/* ────────────────────────────────────────────────────────────────────────────────────────────────── toast ── */
.toast { position: fixed; z-index: 6; inset-inline: 12px; bottom: calc(var(--tabs-h) + var(--float-gap)); max-width: 560px; margin: 0 auto;
  display: block; gap: 12px; padding: 12px 16px; border-radius: var(--r-float);
  background: var(--material-up); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  color: var(--ink); box-shadow: var(--shadow); font-size: var(--fs-callout); font-weight: 500; line-height: 1.35;
  animation: toast-in var(--t-sheet) var(--ease-out); transition: opacity var(--t) var(--ease), transform var(--t) var(--ease); }
.toast.out { opacity: 0; transform: translateY(8px); }
.toast a { color: var(--act); font-weight: 600; }
.toast:has(button) { display: flex; align-items: center; justify-content: space-between; gap: 12px; }  /* a message beside its button; a sentence stays one sentence */
.toast:has(#from-t) { padding-block: 8px; padding-inline-end: 8px; }
body:has(.mini:not([hidden])) .toast { bottom: calc(var(--tabs-h) + var(--mini-h) + 2 * var(--float-gap)); }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: fade-in var(--t) var(--ease); } .toast.out { transform: none; } }

/* ═══════════════════════════════════════════════ screens (each one reworked in its own commit, phase 4 of #27) ═══ */

/* Capture: the capture box, Save prominent and upload beside it, then the latest arrivals with their sleeves */
h1.large + textarea { margin-top: 12px; }
.compose { margin: 12px 0 0; }
.compose .primary { flex: 1; }
.compose .upload { flex: 0 0 auto; padding: 0 16px; }
.compose .upload .icon { width: 18px; height: 18px; }
/* Recording (#35): the microphone is a round secondary button; while it records, the row becomes עצירה (the one
   primary), the take drawing itself as the pulse at its playing weight, and the time */
.compose .rec { flex: 0 0 44px; padding: 0; }
.compose .rec .icon { width: 20px; height: 20px; }
.recording { align-items: center; gap: 12px; margin: 12px 0 0; }
.recording > .primary { flex: 0 0 auto; }
.recording .icon { width: 14px; height: 14px; }
.recording .live { flex: 1; min-width: 0; height: 40px; }
.recording .live svg { display: block; width: 100%; height: 40px; }
.recording .clock { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--ink-2); unicode-bidi: isolate; }
#msg:empty { height: 0; margin: 0; overflow: hidden; }  /* collapsed, not removed: the status region stays where VoiceOver listens */
#msg { margin: 8px 0 0; }
h2.section { font-size: var(--fs-foot); color: var(--ink-2); font-weight: 600; margin: 32px 0 4px; }
.captures > li { display: flex; align-items: center; gap: 8px; }
.captures .item { flex: 1; min-width: 0; display: flex !important; align-items: center; gap: 12px; padding: 10px 0 !important; }
.captures .sleeve.note { background: var(--raised); color: var(--ink-2); padding: 0; }
.captures .sleeve.note .icon { width: 20px; height: 20px; }
.captures .cap { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.captures .title, .captures .cap > .muted { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.captures .dur { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.captures .chip { margin-top: 2px; }
button.retry { flex: none; font-size: var(--fs-sub); padding: 0 14px; }

/* Browse and search: a search field under the large title, works as rows, hits grouped by work in the artist's words */
.search { position: relative; margin: 12px 0 8px; }
.search > .icon { position: absolute; inset-inline-start: 10px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--ink-3); pointer-events: none; }
.search input { margin: 0; padding-inline-start: 36px; }
#tagchip:empty { display: none; }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 4px 0 8px; padding: 0 10px 0 14px; border-radius: 999px;
  background: var(--raised); color: var(--act); font-size: var(--fs-sub); font-weight: 600; text-decoration: none; }
.filter-chip .icon { width: 16px; height: 16px; }
.work-row { display: grid !important; gap: 3px; padding: 12px 0 !important; }
.wr-top { display: flex; align-items: baseline; gap: 8px; }
.wr-top .work-title { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wr-top .when { flex: none; color: var(--ink-2); font-size: var(--fs-foot); }
.wr-top .new-dot { align-self: center; margin-inline-end: 0; }
.work-row .ai-line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.work-row .muted { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
/* a row's English title keeps its direction (punctuation) but aligns with the list, as iOS does in a Hebrew UI */
.work-row [dir], .hit-head [dir], .captures .cap [dir], .picker [dir] { text-align: match-parent; }
ul.list > li > .tags { margin: -4px 0 8px; }
/* 50 rows at a time: the ones below the screen aren't laid out until they near it (a faster first paint) */
#list > li { content-visibility: auto; contain-intrinsic-size: auto 96px; }
.hit-head { display: flex !important; align-items: baseline; gap: 8px; padding: 16px 0 4px !important; }
.hit-head .work-title { flex: 1; min-width: 0; }
a.hit { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; min-height: 44px; color: inherit; text-decoration: none; border-radius: var(--r-mark); }
a.hit:active { background: var(--fill); }
a.hit .mine { font-size: var(--fs-transcript); line-height: 1.45; }
a.hit .muted { display: flex; align-items: center; gap: 4px; }
a.hit .muted .icon { width: 12px; height: 12px; color: var(--act); }
a.hit .at { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
a.hit + a.hit { border-top: var(--hairline) solid var(--hair); }
a.hit.muted { color: var(--act); font-size: var(--fs-sub); flex-direction: row; align-items: center; }
mark { background: color-mix(in srgb, var(--act) 18%, transparent); color: inherit; border-radius: var(--r-mark); padding: 0 2px; }
ul.list > li:has(a.hit) { padding-bottom: 8px; }
button.more-row { width: 100%; margin: 16px 0; }

/* Work: words first. The title, the view switch and נגן הכל; the Sheet (parts, their takes as stacked pulses, the words);
   then the AI's summary and question below it */
.work-meta { margin-bottom: 4px; }
.banner .b-text { flex: 1; min-width: 12em; }
.banner .chip:empty { gap: 0; }
.banner details { flex-basis: 100%; color: var(--ink-2); font-size: var(--fs-foot); }
.banner details summary { min-height: 44px; color: var(--act); }
.banner code { display: block; white-space: pre-wrap; overflow-wrap: anywhere; font: var(--fs-code)/1.5 var(--sans); }
.sheet-tools { display: flex; align-items: center; gap: 12px; margin: 4px 0 8px; }
.sheet-tools button { flex: none; }
.sheet-tools .muted { color: var(--ink-3); }
ul.sheet > li { border-bottom: 0; }
.part { padding: 8px 0 16px; }
.part-head { margin: 4px 0 6px; }
.sheet-part { padding-block: 0 8px; border-top: var(--hairline) solid var(--hair); }
ul.sheet > li:first-child .sheet-part { border-top: 0; }
.solo-piece { border-top: 0; padding-top: 0; }
.sheet-part .part-head { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 8px 0 0; }
.sheet-part h2 { margin: 0; flex: 1; font-size: var(--fs-foot); font-weight: 600; color: var(--ink-2); }
.sheet-part h2 .label::before { content: '✦\00a0'; content: '✦\00a0' / ''; color: var(--ai); }
.sheet-part.on h2 { color: var(--ink); }
/* the part playing: its other lines step back a shade, the sung one stays full ink */
.sheet-part.on .line:not(:has(.now)) { color: var(--ink-2); }
.line { transition: color var(--t) var(--ease), background-color var(--t-press) var(--ease); }
.chip.new { color: var(--act); }
.chip.new::before { background: var(--act); }
.arrange { display: flex; gap: 0; flex: none; }
.arrange button { width: 44px; padding: 0; background: transparent; color: var(--ink-2); }
.arrange button svg { width: 20px; height: 20px; }
.arrange button:disabled { opacity: .25; }

/* the takes: each one a row with its pulse on a shared time scale; the shown one at double weight (DESIGN.md, the pulse) */
.takes { display: flex; flex-direction: column; margin: 2px 0 4px; }
/* the label column is fixed (the date under the take's name), so every pulse runs on one time scale and owns the row */
.takes button { display: grid; grid-template-columns: 5.5em 1fr; align-items: center; gap: 12px; width: 100%; min-height: 44px;
  padding: 0 4px; border-radius: var(--r-mark); background: transparent; color: var(--ink-2); font-weight: 500; font-size: var(--fs-foot); }
.takes button:active:not(:disabled) { transform: none; background: var(--fill); opacity: 1; }
.takes button[aria-pressed=true] { color: var(--ink); font-weight: 600; }
.tk-label { display: flex; flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.25; }
.tk-name { display: inline-flex; align-items: center; gap: 4px; text-align: start; white-space: nowrap; }
.tk-name .icon { width: 13px; height: 13px; color: var(--ink); }
.tk-when { color: var(--ink-3); font-size: var(--fs-code); white-space: nowrap; }
.tk-line { display: flex; direction: ltr; height: 26px; }
.tk-pulse { display: block; height: 100%; }
.tk-pulse svg { width: 100%; height: 100%; overflow: visible; }
.takes .p0 { stroke: var(--ink-3); stroke-width: 1; }
.takes .p1 { stroke: var(--ink); stroke-width: 2; }
.takes [aria-pressed=true] .p0 { stroke: var(--ink-2); stroke-width: 2; }
.takes.solo { padding: 0 4px; }
.takes.solo .tk-line { height: 22px; }
.takes-hint { margin: 2px 0 6px; font-size: var(--fs-foot); color: var(--ink-3); display: none; align-items: center; gap: 4px; }
.sheet-part.on .takes-hint { display: flex; }  /* said while it's true: when this part is the one playing */
.takes-hint .icon { width: 14px; height: 14px; }
.takes-hint.done { color: var(--ink); }
.keep { min-height: 44px; margin-top: 6px; font-size: var(--fs-sub); }
.keep .icon { width: 16px; height: 16px; }
.keep[aria-pressed=true] { background: var(--ink); color: var(--on-ink); }

/* the words */
.lines { margin: 2px 0 6px; }
.line { padding: 7px 0; cursor: pointer; border-radius: var(--r-mark); transition: background-color var(--t-press) var(--ease); }
.line:active { background: var(--fill); }
.words span, .line span { border-radius: var(--r-mark); }
.words span { cursor: pointer; }
.words span.now, .line span.now { text-decoration: underline double; text-decoration-thickness: 1px; text-underline-offset: .28em; }
.words span.unsure, .line span.unsure { color: var(--ink-2); text-decoration: underline dotted; text-underline-offset: .28em; }
.words span.unsure.now, .line span.unsure.now { color: var(--ink); text-decoration: underline double; }
.line.melody { font-family: var(--sans); color: var(--ink-2); font-size: var(--fs-callout); min-height: 44px; display: flex; align-items: center; gap: 6px; }
.line.melody .icon { width: 14px; height: 14px; color: var(--act); }
.line.melody .icon:first-child, .np-line.melody .icon { color: var(--ink-2); width: 16px; height: 16px; }
.np-line.melody { display: flex; align-items: center; gap: 6px; }
/* icons that sit inside a line of text stay in it (svg is display:block by default here) */
.icon.fwd { display: inline-block; width: .95em; height: .95em; vertical-align: -.12em; margin-inline: 3px; }
.toast .icon { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -.18em; }
.typed { white-space: pre-wrap; margin: 4px 0 8px; }
.part-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.part-foot a { color: var(--act); display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.part-foot .keep { margin: 0 auto 0 0; }

/* below the words: the AI (sans, secondary, ✦ in violet) */
.ai-glyph { color: var(--ai); }
#work > .ai-block { margin: 32px 0 0; padding-top: 16px; border-top: var(--hairline) solid var(--hair); }
#work > .ai-block + .ai-block { margin-top: 24px; padding-top: 0; border-top: 0; }
.q-card .q { color: var(--ink); font-size: var(--fs-body); line-height: 1.45; margin: 2px 0 12px; }
.q-about { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.chip-btn { min-height: 44px; padding: 0 16px; font-size: var(--fs-sub); font-weight: 500; }
.chip-btn svg { width: 12px; height: 12px; }
#reask { min-height: 44px; font-size: var(--fs-sub); margin-inline-start: -10px; }

/* Note: an inline title (a detail screen), the take's player, its words; the take's place in its work above them */
h1.note-title { font-size: var(--fs-title); line-height: 1.25; font-weight: 700; margin: 12px 0 2px; overflow-wrap: anywhere; }
#note > .title { color: var(--ink-2); font-size: var(--fs-callout); font-weight: 500; }
.piece-head { display: flex; align-items: center; gap: 12px; margin: 6px 0; }
.piece-head .muted { flex: 1; }
.siblings { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.siblings a.tag .icon, .tk-name .icon { width: 12px; height: 12px; margin-inline-start: 3px; }
#note .take { margin: 16px 0; }
#note .take .wave { height: 96px; }  /* the take's own page: its pulse at full scale */
#note details { margin-top: 16px; }
#note details > summary { gap: 6px; }
#note details > summary .chev { width: 16px; height: 16px; transition: rotate var(--t) var(--ease); }
#note details:not([open]) > summary .chev { rotate: 90deg; }
.words > div { border-radius: var(--r-mark); padding: 7px 0; }  /* a breath per row, as on the Sheet: a 44px target for keyboard and finger */
.crumbs .sep { display: inline-flex; align-items: center; }
.crumbs .sep .icon { width: 8px; height: 13px; color: var(--ink-3); scale: -1 1; }  /* points on, deeper (leftward in RTL) */
ul.list.picker a.extra { display: flex; align-items: center; gap: 8px; color: var(--act); }
.toast #from-t { flex: none; min-height: 44px; padding: 0 14px; }
.toast #from-t svg { width: 12px; height: 12px; }
.toast .found { overflow: hidden; text-overflow: ellipsis; }

/* Login: the app's sleeve, its name, one line, then the key and כניסה */
main.login { max-width: 400px; padding-top: calc(14vh + env(safe-area-inset-top)); text-align: center; }
main.login .app-mark { display: block; margin: 0 auto 20px; border-radius: var(--r-float); box-shadow: 0 0 0 var(--hairline) var(--hair); }
main.login h1 { margin: 0 0 8px; }
main.login > .muted { font-size: var(--fs-callout); line-height: 1.45; text-wrap: pretty; }
main.login form { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; text-align: start; }
main.login input[type=password] { background: var(--cell); min-height: 50px; margin: 0; }
main.login button.primary { min-height: 50px; }
main.login #err { color: var(--failed); margin-top: 12px; }

/* the tutorial (#10): a sheet of steps */
dialog.tour .sheet-body { padding-inline: 20px; }
.tour-shot { position: relative; margin: 4px 0 16px; border-radius: var(--r-cell); overflow: hidden; background: var(--sleeve); }
.tour-shot img { display: block; width: 100%; height: auto; max-height: 48dvh; object-fit: contain; object-position: top; }
.tour-box { position: absolute; border: 2px solid var(--sleeve-ink); border-radius: var(--r-control); box-shadow: 0 0 0 999px var(--scrim); }
.tour-icon { display: grid; place-items: center; height: 168px; background: var(--sleeve); color: var(--sleeve-ink); }
.tour-icon svg { width: 72%; height: 64px; }
dialog.tour h2 { font-size: var(--fs-title); font-weight: 700; line-height: 1.25; margin: 0 0 6px; outline: none; }
dialog.tour p { color: var(--ink-2); font-size: var(--fs-callout); line-height: 1.45; }
dialog.tour .glyph svg { display: inline-block; width: 1em; height: 1em; vertical-align: -.14em; }  /* ↑ ↓ ☆ ⋯ in a sentence */
.tour-dots { display: flex; justify-content: center; gap: 8px; margin: 16px 0; }
.tour-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--hair); }
.tour-dots i.on { background: var(--ink); }
.tour-nav { display: flex; gap: 8px; }
.tour-nav .primary { flex: 1; }

/* print: the Sheet in black on white */
@media print {
  html, body { background: #fff; color: #000; }
  header.top, nav.tabs, .mini, .toast, .seg, .sheet-tools, .ai-block, .takes, .takes-hint, .part-foot, .arrange, .banner, .empty, .chip, #work > .muted { display: none !important; }
  main { padding: 0; max-width: none; }
  h1 { color: #000; }
  .sheet-part { border: 0; margin: 0 0 14pt; padding: 0; break-inside: avoid; }
  .sheet-part h2, .line.melody, .sheet-part h2 .label::before { color: #000; }
  .line { padding: 0; }
  .line span.now { text-decoration: none; }
  .line span.unsure { color: #000; text-decoration: none; }
}