/* ==================== CREDITS & LICENSES ====================
   Icons:  Lucide (https://lucide.dev), ISC License. Some Lucide icons are
           derived from Feather, MIT License (Copyright (c) 2013-2023 Cole Bemis).
           Full text: https://github.com/lucide-icons/lucide/blob/main/LICENSE
   Fonts:  Newsreader and Instrument Sans, provided via Google Fonts,
           SIL Open Font License 1.1 (https://openfontlicense.org).
   PDF engine: PDF.js (Mozilla and contributors), Apache License 2.0,
           loaded from the cdnjs content network.
   ============================================================ */

/* ==================== 1. THEME & VARIABLES ==================== */
/* ----- Light theme (default colors, shadow) ----- */
:root{
  --bg:#e9ecf2; --panel:#f6f7fa; --panel2:#ffffff; --line:#cfd4de; --ink:#1a1d26; --muted:#5f6778;
  --accent:#3f55e6; --accent-ink:#ffffff; --accent-soft:rgba(63,85,230,.12);
  --turn:#d97706; --turn-soft:rgba(251,185,40,.34); --play:#d6333f; --cred:#12907c; --cred-soft:rgba(18,144,124,.20);
  --stage:#dfe3ea; --block:#ffffff; --wave:#7c8bf0; --danger:#c4283a;
  --shadow:0 1px 2px rgba(20,24,40,.08),0 8px 24px rgba(20,24,40,.08);
  --glass-bg:linear-gradient(180deg,rgba(255,255,255,.76),rgba(244,246,252,.64)); --glass-edge:rgba(255,255,255,.7);
  --glass-shadow:0 6px 18px -10px rgba(10,14,30,.26),inset 0 1px 0 rgba(255,255,255,.8),inset 0 -1px 0 rgba(255,255,255,.35);
}

/* ----- Dark mode: follows the device setting ----- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#14171d; --panel:#1b1f27; --panel2:#232833; --line:#2f3542; --ink:#e8eaf0; --muted:#98a0b1;
    --accent:#8c9cff; --accent-ink:#10131c; --accent-soft:rgba(140,156,255,.16);
    --turn:#f59e3b; --turn-soft:rgba(255,176,46,.30); --play:#ff6a5f; --cred:#4fd1bd; --cred-soft:rgba(79,209,189,.26);
    --stage:#0d0f13; --block:#252b37; --wave:#6f7fe0; --danger:#ff7b8a;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
    --glass-bg:linear-gradient(180deg,rgba(40,46,66,.62),rgba(24,28,42,.56)); --glass-edge:rgba(255,255,255,.14);
    --glass-shadow:0 6px 18px -10px rgba(4,6,16,.38),inset 0 1px 0 rgba(255,255,255,.1),inset 0 -1px 0 rgba(255,255,255,.12);
  }
}

/* ----- Dark mode: forced via data-theme="dark" ----- */
:root[data-theme="dark"]{
  --bg:#14171d; --panel:#1b1f27; --panel2:#232833; --line:#2f3542; --ink:#e8eaf0; --muted:#98a0b1;
  --accent:#8c9cff; --accent-ink:#10131c; --accent-soft:rgba(140,156,255,.16);
  --turn:#f59e3b; --turn-soft:rgba(255,176,46,.30); --play:#ff6a5f; --cred:#4fd1bd; --cred-soft:rgba(79,209,189,.26);
  --stage:#0d0f13; --block:#252b37; --wave:#6f7fe0; --danger:#ff7b8a;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
  --glass-bg:linear-gradient(180deg,rgba(40,46,66,.62),rgba(24,28,42,.56)); --glass-edge:rgba(255,255,255,.14);
  --glass-shadow:0 6px 18px -10px rgba(4,6,16,.38),inset 0 1px 0 rgba(255,255,255,.1),inset 0 -1px 0 rgba(255,255,255,.12);
}

/* ==================== 2. BASE & RESET ==================== */
/* ----- Page, body and fonts ----- */
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px);height:100%}
*,*::before,*::after{box-sizing:inherit}
[hidden]{display:none!important}
body{margin:0;height:100%;background:var(--bg);color:var(--ink);
  font:14px/1.45 'Instrument Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}

/* ----- App grid: header / work area / timeline ----- */
.app{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-height:0}

/* ==================== 3. HEADER BAR ==================== */
/* ----- Header layout ----- */
.top{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--panel)}

/* ----- Logo / site name ----- */
.brand{display:flex;align-items:center;gap:10px;margin-right:6px}
.brand h1{font:500 22px/1 'Newsreader',Georgia,serif;font-style:italic;margin:0 0 0 2px;letter-spacing:.2px}

/* ----- File chips (loaded PDF / audio names) ----- */
.chips{display:flex;gap:8px;flex:0 1 auto;min-width:0;flex-wrap:nowrap;padding-right:4px}
.chips .chip{min-width:0;flex:0 1 auto}
.chips{margin-right:auto}
.brand h1 .home{color:inherit;text-decoration:none}
.title-pill{flex:0 1 220px;min-width:90px;max-width:340px;display:block;transition:flex-basis .5s var(--ease-out)}
.title-pill:focus-within{flex-basis:340px}
.title-pill input{width:100%;box-sizing:border-box;padding:6px 10px;border:1px solid transparent;border-radius:8px;background:none;color:var(--ink);font:500 15px/1.2 inherit;font-family:inherit;transition:border-color .2s var(--ease-color),background-color .2s var(--ease-color)}
.title-pill input:hover{border-color:var(--line)}
.title-pill input:focus{outline:none;border-color:var(--accent);background:var(--panel2)}
.title-pill input::placeholder{color:var(--muted)}
.top .btn{flex:none}
@media (max-width:1280px){.top #btnPdf span,.top #btnAudio span{display:none}.top #btnPdf,.top #btnAudio{padding-left:10px;padding-right:10px}}
.chip{display:inline-flex;align-items:center;gap:8px;padding:5px 10px;border-radius:999px;background:var(--panel2);border:1px solid var(--line);max-width:300px;font-size:13px}
.chip svg{width:15px;height:15px;flex:none;color:var(--muted)}
.chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip small{color:var(--muted);white-space:nowrap}
.chip.busy{border-color:var(--accent);color:var(--accent)}

/* ==================== 4. BUTTONS ==================== */
/* ----- Standard button: size, padding, colors ----- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:7px 13px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);cursor:pointer;white-space:nowrap;line-height:1.2}
.btn:hover{border-color:var(--muted)}
.btn:focus-visible,.icon-btn:focus-visible,input:focus-visible,select:focus-visible,.seg label:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.btn svg{width:16px;height:16px}

/* ----- Button variants: primary, disabled, small ----- */
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:transparent;font-weight:600}
.btn.primary:hover{filter:brightness(1.06)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.small{padding:4px 9px;font-size:13px;border-radius:7px}

/* ==================== 5. WORK AREA (STAGE & TRANSPORT) ==================== */
/* ----- Layout: stage column + side panel ----- */
.work{display:grid;grid-template-columns:minmax(0,1fr) 322px;gap:0;min-height:0}
.stage-col{display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:0;min-width:0;padding:14px 14px 10px 16px;gap:10px}

/* ----- Score preview stage ----- */
.stage-wrap{position:relative;background:var(--stage);border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:0;border:1px solid var(--line)}
#stage{display:block;flex:none;object-fit:contain}

/* ----- Intro / empty state text and buttons ----- */
.empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;gap:16px;background:var(--stage)}
.empty[hidden]{display:none}
.empty h2{font:500 clamp(24px,3.2vw,38px)/1.1 'Newsreader',Georgia,serif;margin:0;white-space:nowrap}
@media (max-width:520px){.empty h2{white-space:normal}}
.empty p{margin:0;color:var(--muted);max-width:46ch;text-wrap:balance}
.empty .empty-intro{max-width:none;white-space:nowrap}
.empty .empty-intro{line-height:1.6;margin-bottom:8px}
.empty .empty-intro .drop{display:block}
@media (max-width:700px){.empty .empty-intro{white-space:normal}.empty .empty-intro span{display:block}}
.empty ol{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:8px;text-align:left;counter-reset:s}
.empty li{counter-increment:s;display:flex;gap:10px;align-items:baseline;color:var(--muted)}
.empty li::before{content:counter(s);display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);font-size:12px;color:var(--ink);flex:none}
.empty .row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.empty .empty-note{margin-top:8px;font-size:13px}

/* ----- Transport controls: play, time, tap button ----- */
.transport{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.icon-btn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:9px;border:1px solid var(--line);background:var(--panel2);cursor:pointer}
.icon-btn:hover{border-color:var(--muted)}
.icon-btn svg{width:18px;height:18px;fill:currentColor}
.icon-btn.stroke svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon-btn.play{width:44px;height:36px;background:var(--accent);border-color:transparent;color:var(--accent-ink)}
.icon-btn[disabled]{opacity:.45;cursor:not-allowed}
.time{font-variant-numeric:tabular-nums;margin:0 8px 0 10px;min-width:140px}
.time b{font-weight:600}
.time span{color:var(--muted)}
.spacer{flex:1}
.info{color:var(--muted);font-size:13px}
.tapbtn{gap:8px}
kbd{font:inherit;font-size:11px;padding:1px 5px;border-radius:4px;border:1px solid var(--line);background:var(--panel);color:var(--muted)}

/* ==================== 6. SIDE PANEL (SETTINGS) ==================== */
/* ----- Panel container and groups ----- */
.panel{position:relative;border-left:1px solid var(--line);background:var(--panel);overflow:auto;padding:6px 16px 18px;min-height:0}
/* keep the panel's width steady when its scrollbar appears or disappears (e.g. when a group opens) */
@media (min-width:961px){
  .panel{overflow-x:hidden;overflow-y:scroll}
  @supports (scrollbar-gutter:stable){.panel{overflow-y:auto;scrollbar-gutter:stable}}
}
.group{padding:14px 0;border-bottom:1px solid var(--line)}
.group:last-child{border-bottom:0}
.group h3{margin:0 0 10px;font-size:14px;font-weight:600}
.group-head{position:relative;display:flex;align-items:center;gap:8px;margin:0 0 10px}
.group .group-head h3{margin:0}
.group-toggle{display:flex;align-items:center;margin-left:auto;cursor:pointer}
.group.off .group-head{margin-bottom:0}

/* ----- Form fields: labels, sliders, selects ----- */
.field{display:grid;gap:6px;margin-bottom:12px}
.field:last-child{margin-bottom:0}
.field label,.field .lbl{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--muted)}
.field output{color:var(--ink);font-variant-numeric:tabular-nums}
/* Sliders are drawn by the site instead of the browser, so they look the same whether or not the window is active
   (browsers gray out their own sliders after full screen, or when the window loses focus). --pct is the filled part. */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:20px;margin:0;padding:0;background:transparent;cursor:pointer;--pct:50%}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:99px;background:linear-gradient(to right,var(--accent) 0,var(--accent) var(--pct),var(--line) var(--pct),var(--line) 100%)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;margin-top:-6px;border-radius:50%;border:2px solid var(--panel);background:var(--accent);box-shadow:0 0 0 1px var(--accent),0 1px 3px rgba(0,0,0,.3)}
input[type=range]::-moz-range-track{height:4px;border-radius:99px;background:var(--line)}
input[type=range]::-moz-range-progress{height:4px;border-radius:99px;background:var(--accent)}
input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;border:2px solid var(--panel);background:var(--accent);box-shadow:0 0 0 1px var(--accent),0 1px 3px rgba(0,0,0,.3)}
input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}
select,input[type=text],textarea.autogrow{width:100%;padding:7px 9px;border-radius:8px;border:1px solid var(--line);background:var(--panel2)}
textarea.autogrow{display:block;resize:none;overflow:hidden;font:inherit;line-height:1.35;min-height:34px}
input.bad{border-color:var(--danger)}
/* style row under a credits line: optional font box, then Bold and Italic */
.line-style{display:flex;align-items:center;gap:6px}
.line-style .combo{flex:1;min-width:0}
.line-style .line-font{padding:5px 28px 5px 8px;font-size:13px}
.fmt-btn{flex:none;display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--panel2);color:var(--ink);cursor:pointer;font:inherit}
.fmt-btn:hover{border-color:var(--muted)}
.fmt-btn[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}

/* ----- Segmented radio buttons ----- */
.seg{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--panel2)}
.seg label{position:relative;z-index:1;display:block;text-align:center;padding:6px 4px;cursor:pointer;font-size:13px;color:var(--muted);border-right:1px solid var(--line)}
.seg label:last-child{border-right:0}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg input:checked+span{color:var(--ink)}
.seg label:has(input:checked){color:var(--ink)}
.field label.check{justify-content:flex-start;align-items:center;gap:8px;color:var(--ink);cursor:pointer}
.colorrow{display:flex;gap:8px;align-items:center}
.sub{margin-left:20px;padding-left:12px;border-left:2px solid var(--line)}
.field.sub{margin-top:-6px}

/* small heading that splits a group into parts (Shadows: page turn, center fold, under the score) */
.sub>.field:last-child{margin-bottom:0}
/* small notes under a control: tucked to the right and quieter, so they stay out of the way of the labels */
.group .hint{margin:0;font-size:11px;line-height:1.35;text-align:right}
#exportHint{margin-top:6px!important}
.group .hint.err,.group .hint.warn{text-align:left;font-size:12.5px}
.group .field>.hint:not(.err):not(.warn):not(#exportHint){margin-left:-12px}      /* notes run a little wider than the controls (but stay inside the panel's padding), so a short sentence stays on one line */
#shadowReset{margin-top:14px}
/* font box: type a name, or open the list of popular Google Fonts */
.combo{position:relative}
.combo input[type=text]{padding-right:28px}
.combo-btn{position:absolute;right:1px;top:1px;bottom:1px;width:28px;display:grid;place-items:center;padding:0;border:0;border-radius:0 7px 7px 0;background:none;color:var(--muted);cursor:pointer}
.combo-btn:hover{color:var(--ink)}
.combo-list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:40;max-height:210px;overflow:auto;margin:0;padding:4px;list-style:none;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow)}
.combo-list li{padding:6px 8px;border-radius:6px;font-size:13px;cursor:pointer}
.combo-list li:hover,.combo-list li.act{background:var(--accent-soft)}
.combo-list li[aria-selected="true"]{font-weight:600;color:var(--accent)}
/* small heading that splits a group into parts (Shadows: page turn, center fold, under the score) */
.subhead{margin:16px 0 8px;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--muted)}
.group-head+.subhead,.group-head+#turnShadowBlock>.subhead{margin-top:4px}
/* Video: Advanced */
.adv{margin:0 0 14px}
.adv summary{display:flex;align-items:center;gap:7px;padding:2px 0;font-size:13px;color:var(--muted);cursor:pointer;list-style:none}
.adv summary::-webkit-details-marker{display:none}
.adv summary::before{content:'';width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.adv[open] summary::before{transform:rotate(45deg)}
.adv summary:hover{color:var(--ink)}
.adv[open] summary{margin-bottom:10px}
@media (prefers-reduced-motion:reduce){.adv summary::before{transition:none}}

/* ----- Checkboxes, info (i) buttons and tooltips ----- */
.check-row{position:relative;display:flex;align-items:center;gap:8px}
.check-row .switch{margin-left:auto}
.field label.check:has(>.switch){flex-direction:row-reverse;justify-content:space-between}

/* ----- On / off switch (used for every toggle on the site) ----- */
input.switch{appearance:none;-webkit-appearance:none;flex:none;position:relative;width:38px;height:22px;margin:0;border:0;border-radius:999px;background:var(--line);box-shadow:inset 0 0 0 1px rgba(128,128,128,.22);cursor:pointer;transition:background-color .2s var(--ease-color)}
input.switch::before{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .4s var(--spring-press)}
input.switch:checked{background:var(--accent);box-shadow:none}
input.switch:checked::before{transform:translateX(16px)}
input.switch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){input.switch,input.switch::before{transition:none}}
.info-i{position:relative;flex:none;display:grid;place-items:center;width:18px;height:18px;padding:0;border:0;border-radius:50%;background:none;color:var(--muted);cursor:pointer;transition:color .2s var(--ease-color),background-color .2s var(--ease-color),transform .3s var(--spring-hover)}
.info-i svg{width:18px;height:18px;display:block}
.info-i .ring{fill:none;stroke:currentColor;stroke-width:1.4}
.info-i .dot{fill:currentColor}
.info-i .stem{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.info-i:hover,.info-i:focus-visible,.info-i[aria-expanded="true"]{color:var(--accent);background:var(--accent-soft);transform:scale(1.1)}
.tip{position:absolute;left:0;top:calc(100% + 6px);width:max-content;max-width:100%;z-index:30;padding:8px 11px;border-radius:10px;background:var(--ink);color:var(--bg);font-size:12.5px;line-height:1.4;box-shadow:var(--shadow);
  visibility:hidden;opacity:0;transform:translateY(4px);transition:opacity .22s var(--ease-ui),transform .28s var(--ease-ui),visibility 0s .22s}
.tip::before{content:'';position:absolute;left:0;right:0;top:-7px;height:7px}      /* a bridge, so the pointer can cross the gap from the (i) */
.info-i:hover+.tip,.info-i:focus-visible+.tip,.tip.open,.tip:hover{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.term{cursor:help;border-bottom:1px dotted currentColor;border-radius:3px}
.term:hover,.term:focus-visible{background:var(--accent-soft);outline:none}

/* ----- Glow highlight, color picker, hints ----- */
#turnField{padding:6px 8px;margin:-6px -8px 6px;border-radius:9px;transition:box-shadow .15s,background .15s}
#turnField.glow-ring{background:var(--accent-soft);box-shadow:0 0 0 2px var(--accent),0 0 18px 4px var(--accent)}
.colorrow[hidden]{display:none}
.colorrow input[type=color]{width:42px;height:34px;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--panel2);cursor:pointer}
.hint{font-size:12.5px;color:var(--muted);margin:6px 0 0}
.panel .btn.primary{width:100%;padding:10px 14px;margin-top:6px}

/* ==================== 7. TIMELINE ==================== */
/* ----- Timeline layout and toolbar ----- */
.timeline{border-top:1px solid var(--line);background:var(--panel);display:grid;grid-template-rows:auto 1fr;height:var(--tl-h);min-height:0}
.tl-bar{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:6px 16px;flex-wrap:wrap}
.tl-bar h2{margin:0;font-size:14px;font-weight:600}
/* the timeline help text lives in an (i) button, like the other info buttons, on every screen size */
.tl-info{display:block;margin-right:auto}
.tl-bar .hint{position:absolute;left:16px;top:calc(100% + 2px);width:max-content;max-width:min(560px,calc(100% - 32px));z-index:30;flex:none;min-width:0;padding:8px 11px;border-radius:10px;background:var(--ink);color:var(--bg);font-size:12.5px;line-height:1.4;box-shadow:var(--shadow);visibility:hidden;opacity:0;transform:translateY(4px);transition:opacity .22s var(--ease-ui),transform .28s var(--ease-ui),visibility 0s .22s}
.tl-bar .hint::before{content:'';position:absolute;left:0;right:0;top:-21px;height:21px}
.tl-bar .hint.warn::before{display:none}
.tl-info .info-i:hover+.hint,.tl-info .info-i:focus-visible+.hint,.tl-bar .hint.open,.tl-bar .hint:hover{visibility:visible;opacity:1;transform:none;transition-delay:0s}
/* warnings stay visible inline, since they need action */
.tl-info:has(.hint.warn){display:contents}
.tl-info:has(.hint.warn) .info-i{display:none}
.tl-bar .hint.warn{display:block;visibility:visible;opacity:1;transform:none;position:static;width:auto;max-width:none;flex:1;min-width:200px;padding:0;background:none;box-shadow:none;border-radius:0;color:var(--turn);font-size:12.5px}
.vsep{align-self:center;width:1px;height:20px;margin:0 4px;background:var(--line)}
.zoom{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px}
.zoom input{width:110px}
.tl-scroll{overflow-x:auto;overflow-y:hidden;position:relative;min-height:0;margin:0 0 0 0}
.tl-inner{position:relative;height:100%}
#tl{position:sticky;left:0;top:0;display:block;touch-action:pan-x}

/* ==================== 8. OVERLAYS, DIALOGS & MESSAGES ==================== */
/* ----- Toast message and drag-and-drop veil ----- */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;box-shadow:var(--shadow);max-width:min(560px,90vw);z-index:50;opacity:0;pointer-events:none;transition:opacity .25s var(--ease-ui)}
.toast.show{opacity:1}
.dropveil{position:fixed;inset:0;z-index:40;background:rgba(20,24,40,.62);display:none;align-items:center;justify-content:center;color:#fff;font:italic 500 32px 'Newsreader',Georgia,serif;pointer-events:none}
body.dragging .dropveil{display:flex}

/* ----- Dialog overlay ----- */
.exp-overlay{position:fixed;inset:0;z-index:60;background:var(--bg);display:grid;place-items:center;padding:16px;overflow:auto}
.exp-overlay[hidden]{display:none}
.dlg.wide{width:min(780px,94vw)}
#diagLog{width:100%;height:min(46vh,380px);font:12px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:10px;resize:vertical}

/* ----- Dialog box, buttons row, progress bar ----- */
.dlg .row{flex-wrap:wrap}
.dlg{width:min(480px,92vw);border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--ink);box-shadow:var(--shadow);padding:20px 22px;display:grid;gap:14px}
.dlg h2{margin:0;font:500 24px/1.1 'Newsreader',Georgia,serif}
.dlg p{margin:0;color:var(--muted)}
.bar{height:10px;border-radius:99px;background:var(--panel2);border:1px solid var(--line);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--accent)}
.dlg .row{display:flex;gap:10px;justify-content:flex-end}
.dlg .row .push-left{margin-right:auto}

/* ----- Choose pages dialog ----- */
.pages-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px;max-height:min(52vh,420px);overflow:auto;padding:4px}
.page-card{position:relative;display:grid;gap:6px;justify-items:center;padding:8px 8px 6px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);color:var(--ink);cursor:pointer}
.page-card:hover{border-color:var(--muted)}
.page-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.page-card canvas{display:block;width:100%;height:auto;background:#fff;border:1px solid rgba(0,0,0,.25);border-radius:3px}
.page-card .num{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.page-card .tick{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--accent);color:var(--accent-ink);box-shadow:0 1px 3px rgba(0,0,0,.35)}
.page-card .tick svg{width:12px;height:12px}
.page-card[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.page-card[aria-pressed="false"] canvas{opacity:.4}
.page-card[aria-pressed="false"] .tick{background:var(--panel2);color:transparent;border:1px solid var(--muted)}
.err{color:var(--danger)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ==================== 9. FILE CHIPS & SETTINGS MENU ==================== */
/* ----- File chip icon turns into a remove button on hover ----- */
.chip .chip-icon{position:relative;display:grid;place-items:center;width:18px;height:18px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;flex:none;color:var(--muted)}
.chip .chip-icon .ic{display:grid;place-items:center}
.chip .chip-icon .ic svg{display:block}
.chip .chip-icon .x{position:absolute;inset:0;display:none;place-items:center;border-radius:50%;background:var(--danger)}
.chip .chip-icon .x svg{width:10px;height:10px;color:#fff}
.chip .chip-icon:hover .ic,.chip .chip-icon:focus-visible .ic{opacity:0}
.chip .chip-icon:hover .x,.chip .chip-icon:focus-visible .x{display:grid}
/* the score chip's name opens the page picker */
.chip-main{display:inline-flex;align-items:center;gap:8px;min-width:0;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.chip:has(.chip-main:hover){border-color:var(--muted)}
.chip-main:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ----- Settings dropdown menu ----- */
.menu-wrap{position:relative}
.menu{position:absolute;right:0;top:calc(100% + 8px);min-width:230px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;z-index:80}
.menu-item{display:block;width:100%;text-align:left;padding:9px 11px;border:0;background:none;border-radius:8px;cursor:pointer;color:var(--ink)}
.menu-item:hover,.menu-item:focus-visible{background:var(--accent-soft)}
.menu-item.confirm{color:var(--danger);font-weight:600}
.hint.warn{color:var(--turn);font-weight:600}

/* ==================== 10. FULL-SCREEN MODE ==================== */
/* ----- Full-screen button ----- */
.fs-btn{position:absolute;right:10px;bottom:10px;z-index:6;display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:9px;background:rgba(0,0,0,.5);color:#fff;cursor:pointer;opacity:.7}
.fs-btn:hover,.fs-btn:focus-visible{opacity:1}
.fs-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fs-only{display:none!important}
:root{--tl-h:262px}
html.fs-lock,html.fs-lock body{overflow:hidden}

/* ----- Full-screen layout and overlay controls ----- */
.app.fs{position:fixed;inset:0;z-index:90;display:block;height:100vh;height:100dvh;background:#000}
.app.fs .top,.app.fs .panel,.app.fs .fs-btn{display:none!important}
.app.fs .work{display:block;height:100%}
.app.fs .stage-col{display:block;padding:0;height:100%}
.app.fs .stage-wrap{position:absolute;inset:0;border:0;border-radius:0;background:#000}
.app.fs{--fs-gap:12px;--fs-edge:calc(var(--fs-gap) + env(safe-area-inset-bottom,0px))}
.app.fs .transport{position:absolute;left:0;right:0;bottom:calc(var(--tl-h) + var(--fs-edge));z-index:20;padding:26px 16px 10px;background:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,.26) 55%,rgba(0,0,0,0));color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.85)}
.app.fs .transport .info,.app.fs .transport .time span{color:rgba(255,255,255,.78)}
.app.fs .fs-only{display:inline-flex!important}
.app.fs #btnShowEditor,.app.fs.fs-min #btnHideEditor{display:none!important}
.app.fs.fs-min #btnShowEditor{display:inline-flex!important}
.app.fs.fs-min .transport{bottom:0}
.app.fs.fs-min #bTap,.app.fs.fs-min .info{display:none}
.fs-only svg{width:15px;height:15px}
.app.fs .timeline{position:absolute;left:var(--fs-gap);right:var(--fs-gap);bottom:var(--fs-edge);z-index:20;overflow:hidden;border:1px solid var(--glass-edge);border-radius:18px;
  background:var(--glass-bg);-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);box-shadow:var(--glass-shadow)}
.app.fs .transport,.app.fs .timeline{opacity:0;pointer-events:none;transition:opacity .25s var(--ease-ui),transform .55s var(--ease-out),bottom .55s var(--ease-out),visibility 0s}
.app.fs.fs-min .timeline{transform:translateY(calc(100% + var(--fs-edge) + 8px));visibility:hidden;transition:opacity .25s var(--ease-ui),transform .55s var(--ease-out),visibility 0s .55s}
.app.fs.fs-active .transport,.app.fs.fs-active .timeline{opacity:1;pointer-events:auto}
.app.fs:not(.fs-active),.app.fs:not(.fs-active) *{cursor:none!important}
.app.fs .transport .btn,.app.fs .transport .icon-btn{background:rgba(18,20,28,.82);border-color:rgba(255,255,255,.28);color:#fff}
.app.fs .transport .icon-btn.play{background:var(--accent);border-color:transparent;color:var(--accent-ink)}
.app.fs .transport .tapbtn.on{background:var(--turn);border-color:transparent;color:#1a1d26}
.app.fs .transport kbd{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.88)}
@media (prefers-reduced-motion:reduce){.app.fs .transport,.app.fs .timeline{transition:none!important}}

/* ==================== 11. RESPONSIVE (TABLET & PHONE) ==================== */
@media (max-width:760px){
  .top{flex-wrap:wrap}
  .brand{margin-right:auto}
  .title-pill,.title-pill:focus-within{flex:1 1 160px;max-width:none;order:5}
  .chips{flex:0 1 auto;order:6;margin-right:0;max-width:100%}   /* on a phone the title and the two chips drop to a second row (the chips stay side by side) so nothing pushes the page sideways */
}
@media (max-width:960px){
  .vsep{display:none}
  html,body{height:auto;min-height:100%}
  .app{height:auto;min-height:100%;display:flex;flex-direction:column}
  .app>*,.stage-col,.panel{flex:none}
  .work{display:contents}
  .stage-col{order:1}
  .timeline{order:2}
  .panel{order:3}
  .app.fs .transport .info{display:none}
  .app.fs{--fs-gap:8px}
  .app.fs .timeline{border-radius:14px}
  .stage-wrap{height:min(62vw,420px)}
  .stage-col{grid-template-rows:auto auto}
  .stage-col{padding:14px 16px 10px}
  .panel{border-left:0;border-top:1px solid var(--line);padding:6px clamp(16px,5vw,40px) 24px}
  .panel .group,.panel .status{max-width:560px;margin-left:auto;margin-right:auto}
}

/* ----- Reduced-motion preferences ----- */
@media (prefers-reduced-motion:reduce){.toast,.bar i{transition:none}}

/* ==================== 12. DIALOG STACKING ORDER & EXPORT PREVIEW ==================== */
.exp-overlay.z-diag{z-index:70}
.exp-overlay.z-pdf{z-index:72}
.exp-overlay.z-audio{z-index:71}
.exp-overlay.z-io{z-index:73}
.exp-overlay.z-warn{z-index:75}
.exp-preview{width:100%;border-radius:8px;background:#000;max-height:240px}


/* ==================== 12. FIRST-RUN STATES & FOLDING GROUPS ==================== */
/* before a score is loaded the settings stay visible but dimmed and unusable */
.panel.locked .group{opacity:.45}
.status{display:flex;flex-wrap:wrap;gap:4px 16px;padding:10px 0 12px;font-size:13px;color:var(--muted);border-bottom:1px solid var(--line)}
.status .done{color:var(--ink)}
#exportHint:empty{display:none}
/* group headings fold their contents away */
.group-sum{display:none;margin:0;padding-left:13px;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.group.collapsed>.group-sum{display:block}
.group.collapsed>h3{margin-bottom:4px}
.group.collapsed .group-head{margin-bottom:4px}
.group.off>.group-sum{display:none}

/* ==================== 13. MOTION ==================== */
/* The motion language borrowed from franklindhansen.com: things rise a few pixels as they fade in (ease-out, about 0.6 to 0.9 s),
   hovers swell with a soft spring, presses squeeze with a small bounce, and state changes take about 0.28 s. */
:root{
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-ui:cubic-bezier(.2,.8,.2,1);
  --ease-color:cubic-bezier(.44,0,.56,1);
  --spring-hover:linear(0, 0.0217, 0.0751, 0.1465, 0.2266, 0.309, 0.3895, 0.4656, 0.5357, 0.5993, 0.656, 0.7062, 0.75, 0.7881, 0.821, 0.8493, 0.8734, 0.8939, 0.9113, 0.9259, 0.9383, 0.9487, 0.9574, 0.9647, 0.9707, 0.9758, 0.98, 0.9835, 1);      /* no bounce, 0.3 s */
  --spring-press:linear(0, 0.0223, 0.0791, 0.1576, 0.2478, 0.3426, 0.4364, 0.5257, 0.608, 0.6821, 0.7471, 0.8032, 0.8507, 0.8901, 0.9223, 0.9481, 0.9682, 0.9836, 0.9951, 1.0033, 1.0089, 1.0124, 1.0144, 1.0151, 1.015, 1.0143, 1.0132, 1.0119, 1);      /* a little bounce, 0.4 s */
}
@keyframes rise{from{opacity:0;transform:translateY(var(--rise,14px))}to{transform:none}}       /* no end opacity: a dimmed element must not flash to full and then drop */
@keyframes fade{from{opacity:0}}

/* buttons: color and border ease, hover swells, press squeezes */
.btn,.icon-btn,.fmt-btn{transition:transform .3s var(--spring-hover),background-color .2s var(--ease-color),border-color .2s var(--ease-color),box-shadow .3s var(--ease-ui),color .2s var(--ease-color),opacity .2s var(--ease-color),filter .2s var(--ease-color)}
@media (hover:hover){
  .btn:not(:disabled):hover{transform:scale(1.04);box-shadow:0 2px 8px rgba(17,17,17,.1);background-color:color-mix(in srgb,var(--ink) 5%,var(--panel2))}
  .btn.primary:not(:disabled):hover{background-color:var(--accent)}
  .icon-btn:not(:disabled):hover{transform:scale(1.08);box-shadow:0 2px 8px rgba(17,17,17,.1)}
  .panel .btn.primary:not(:disabled):hover{transform:scale(1.02)}
  .fmt-btn:hover{transform:scale(1.06)}
}
.btn:not(:disabled):active,.icon-btn:not(:disabled):active,.fmt-btn:active{transform:scale(.97);transition-duration:.4s;transition-timing-function:var(--spring-press);box-shadow:none}
.seg label{transition:background-color .2s var(--ease-color),color .2s var(--ease-color)}
select,input[type=text],textarea.autogrow,select:hover,input[type=text]:hover,textarea.autogrow:hover{border-color:var(--muted)}
.chip,.page-card{transition:border-color .2s var(--ease-color),background-color .2s var(--ease-color),transform .3s var(--spring-hover)}
@media (hover:hover){.page-card:hover{transform:scale(1.03)}}
.page-card:active{transform:scale(.97);transition-duration:.4s;transition-timing-function:var(--spring-press)}
.menu-item{transition:background-color .2s var(--ease-color)}
input[type=range]::-webkit-slider-thumb{transition:transform .3s var(--spring-hover)}
input[type=range]::-moz-range-thumb{transition:transform .3s var(--spring-hover)}
input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.15)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.05)}
input[type=range]:hover::-moz-range-thumb{transform:scale(1.15)}
.panel .group{transition:opacity .4s var(--ease-ui)}

/* the PDF chip opens the page chooser: the page count is underlined, and "Choose pages" slides out on hover */
.chip-main .pp{text-decoration:underline dotted;text-decoration-color:var(--muted);text-underline-offset:3px}
.chip:has(.chip-main:hover){background-color:color-mix(in srgb,var(--accent) 7%,var(--panel2))}
/* pop-ups fade and drift in */
.exp-overlay:not([hidden]){animation:fade .25s var(--ease-ui)}
.exp-overlay:not([hidden]) .dlg{animation:rise .5s var(--ease-out);--rise:12px}
.menu:not([hidden]){animation:rise .25s var(--ease-ui);--rise:-6px}
.combo-list:not([hidden]){animation:rise .2s var(--ease-ui);--rise:-4px}
.group-sum{animation:fade .3s var(--ease-ui)}

/* the page comes in: each part rises a little, one after another (only when the page first loads, or the intro text returns) */
@media (prefers-reduced-motion:no-preference){
  .top{animation:rise .7s var(--ease-out) backwards;--rise:10px}
  .stage-col{animation:rise .9s var(--ease-out) .06s backwards;--rise:18px}
  .timeline{animation:rise .8s var(--ease-out) .2s backwards;--rise:14px}
  .panel>*{animation:rise .7s var(--ease-out) backwards;--rise:12px}
  .panel>:nth-child(1){animation-delay:.14s}.panel>:nth-child(2){animation-delay:.19s}.panel>:nth-child(3){animation-delay:.24s}
  .panel>:nth-child(4){animation-delay:.29s}.panel>:nth-child(5){animation-delay:.34s}.panel>:nth-child(6){animation-delay:.39s}.panel>:nth-child(7){animation-delay:.44s}
  .empty>*{animation:rise .9s var(--ease-out) backwards;--rise:18px}
  .empty>:nth-child(2){animation-duration:.6s;animation-delay:.1s;--rise:12px}
  .empty>:nth-child(3){animation-duration:.6s;animation-delay:.2s;--rise:12px}
  .empty>:nth-child(4){animation-duration:.6s;animation-delay:.3s;--rise:12px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-delay:0s!important;transition-duration:.001s!important}
}


/* ==================== 14. HEADINGS, STATUS & SMOOTH STATES ==================== */
/* group headings are real buttons (so the keyboard can reach them); a switched-off group cannot be folded */
.fold-btn{display:flex;align-items:center;gap:7px;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;text-align:left}
.fold-btn::before{content:'';flex:none;width:6px;height:6px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:rotate(45deg) translate(-1px,-1px);transition:transform .3s var(--spring-hover),opacity .25s var(--ease-color),border-color .2s var(--ease-color)}
.group.collapsed .fold-btn::before{transform:rotate(-45deg)}
.fold-btn:hover::before{border-color:var(--ink)}
.fold-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.group.off .fold-btn{cursor:default}
.group.off .fold-btn::before{opacity:0}
/* the parts of a group keep their margins inside, so opening and closing never shifts anything at the start or the end */
.group-body,.sub,#turnShadowBlock,details.adv{display:flow-root}
.group-body>:first-child,.group-body>#turnShadowBlock>.subhead:first-child{margin-top:0}
.group>.group-head,.group>h3{transition:margin-bottom .45s cubic-bezier(.32,.72,0,1)}
/* the loading status */
.st{display:inline-flex;align-items:center;gap:7px;transition:color .3s var(--ease-color)}
.st-ic{width:15px;height:15px;flex:none;overflow:visible}
.st-c{fill:transparent;stroke:currentColor;stroke-width:1.5;transition:fill .3s var(--ease-color),stroke .3s var(--ease-color)}
.st-k{fill:none;stroke:var(--accent-ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:12;stroke-dashoffset:12;transition:stroke-dashoffset .45s var(--ease-out) .12s}
.st.done .st-c{fill:var(--accent);stroke:var(--accent)}
.st.done .st-k{stroke-dashoffset:0}
.st.done{color:var(--ink)}
.st.done .st-ic{animation:pop .5s var(--spring-press)}
@keyframes pop{from{transform:scale(.55)}to{transform:scale(1)}}
/* nothing in the timeline can be touched until there is a score */
.timeline .tl-scroll{transition:opacity .5s var(--ease-ui)}
.timeline.locked .tl-scroll{pointer-events:none;opacity:.5}
/* when a score arrives the parts wake up one after another, and the intro text and stage trade places */
.panel:not(.locked)>.group{transition-delay:calc(var(--gi,0) * .07s)}
.panel>.group:nth-child(2){--gi:0}.panel>.group:nth-child(3){--gi:1}.panel>.group:nth-child(4){--gi:2}.panel>.group:nth-child(5){--gi:3}.panel>.group:nth-child(6){--gi:4}.panel>.group:nth-child(7){--gi:5}
#stage.in{animation:fade .8s var(--ease-ui)}
.top .btn:not([hidden]){animation:rise .55s var(--ease-out) backwards;--rise:6px}
/* settings menu: keyboard shortcuts */
.keys{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:2px 6px 8px;padding:10px 12px;border-radius:10px;background:var(--panel);font-size:12.5px;align-items:center}
.keys[hidden]{display:none}
.keys dt{white-space:nowrap}
.keys dd{margin:0;color:var(--muted);white-space:nowrap}
.keys kbd{display:inline-block;min-width:20px;padding:1px 6px;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;background:var(--panel2);font:600 11.5px/1.5 inherit;text-align:center;color:var(--ink)}
.menu-keys::after{content:'';float:right;width:6px;height:6px;margin-top:6px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:rotate(45deg);transition:transform .3s var(--spring-hover)}
.menu-keys[aria-expanded="true"]::after{transform:rotate(-135deg) translate(-1px,-1px)}

/* the segmented control's glider */
.seg-pill{position:absolute;top:0;bottom:0;left:0;width:0;opacity:0;background:var(--accent-soft);pointer-events:none;transition:transform .45s var(--spring-press),width .45s var(--spring-press),opacity .2s var(--ease-color)}
/* full screen button: the corners swell for a moment, then settle a touch larger */
.fs-btn svg{transition:transform .4s var(--spring-hover)}
.fs-btn:hover svg,.fs-btn:focus-visible svg{animation:fsCorners 1.1s var(--ease-out) forwards}
@keyframes fsCorners{0%{transform:scale(1)}45%{transform:scale(1.16)}100%{transform:scale(1.08)}}

/* a disabled slider (the timeline zoom before there is a score) looks switched off, not just still */
input[type=range]:disabled{opacity:.4;cursor:not-allowed}
input[type=range]:disabled::-webkit-slider-thumb{transform:none}
.zoom:has(input:disabled){opacity:.6}

.panel .btn.wide{width:100%;margin-top:10px}

/* ==================== 15. EDITORS (Audio Editor, PDF Editor) ==================== */
.dlg.editor{width:min(820px,94vw);gap:16px}
.ed-head{display:flex;align-items:center;gap:10px}
.ed-head h2{margin:0;flex:1}
.ed-tools{display:flex;gap:6px}
.ed-lead{margin:-8px 0 0}
.ed-cols{display:grid;grid-template-columns:1.2fr 1fr;gap:24px}
@media (max-width:680px){.ed-cols{grid-template-columns:1fr;gap:16px}}
.ed-h{margin:0 0 10px;font-size:14px;font-weight:600}
.ae-wave{position:relative;height:150px}
.ae-wave canvas{display:block;width:100%;height:100%;touch-action:none}
.ae-bar{display:flex;align-items:center;gap:14px}
.ae-times{display:flex;flex-wrap:wrap;gap:4px 20px;color:var(--muted);font-variant-numeric:tabular-nums}
.ae-times b{color:var(--ink);font-weight:600}
.ed-sec .field:last-child{margin-bottom:0}

/* ----- PDF Editor ----- */
.pe-body{display:grid;grid-template-columns:minmax(0,1fr) 236px;gap:22px;align-items:start}
@media (max-width:700px){.pe-body{grid-template-columns:1fr}}
.pe-grid-wrap{max-height:min(54vh,440px);overflow:auto;border:1px solid var(--line);border-radius:12px;background:var(--panel2);padding:10px;overscroll-behavior:contain}
.pe-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:12px}
.pe-side .hint{margin:0 0 10px}
.pe-side .btn{margin-bottom:10px}
.pe .page-card{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;background:var(--panel)}
.pe .page-card:active{cursor:grabbing}
.pe .page-card canvas{pointer-events:none}
.pe-pos{position:absolute;bottom:6px;left:10px;display:grid;place-items:center;min-width:17px;height:17px;padding:0 4px;border-radius:99px;background:var(--ink);color:var(--bg);font-size:10.5px;font-weight:600;font-variant-numeric:tabular-nums;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.pe-tools{position:absolute;left:0;right:0;bottom:30px;display:flex;justify-content:center;gap:5px;opacity:0;transform:translateY(5px);transition:opacity .22s var(--ease-ui),transform .3s var(--spring-hover);pointer-events:none}
.pe .page-card:hover .pe-tools,.pe .page-card:focus-within .pe-tools{opacity:1;transform:none;pointer-events:auto}
@media (hover:none){.pe-tools{opacity:1;transform:none;pointer-events:auto}}
.pe-tools button{display:grid;place-items:center;width:26px;height:26px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--panel2);color:var(--ink);cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.2);transition:transform .3s var(--spring-hover),background-color .2s var(--ease-color),color .2s var(--ease-color)}
.pe-tools button svg{width:14px;height:14px}
.pe-tools button:hover{transform:scale(1.12);background:var(--accent-soft);color:var(--accent)}
.pe-tools button:active{transform:scale(.94)}
.pe .page-card.pe-hole{opacity:.35;border-style:dashed;border-color:var(--accent);background:var(--accent-soft)}
.pe .page-card.pe-hole>*{visibility:hidden}
.page-card.pe-ghost{position:fixed;z-index:200;margin:0;pointer-events:none;box-shadow:0 14px 34px rgba(10,14,30,.35);transform-origin:50% 50%;cursor:grabbing;background:var(--panel)}
.pe-ghost .pe-tools{display:none}
.hint.warn{color:var(--turn);font-weight:600}

.pe-side .ed-sec+.ed-sec{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.pe-wm .field{margin-bottom:12px}
.pe-wm .seg label{padding:6px 2px;font-size:12.5px}
.pe-wm #peWmBody>.hint{margin:0 0 10px}
.pe-wm input[type=text]{width:100%}
.pe-tools button[aria-pressed="false"]{opacity:.55}
.pe .dlg-scroll{max-height:none}

/* ==================== 16. FILE CHIPS (a steady size) ==================== */
/* the name is cut with an ellipsis, and on hover the small text (page count or length) trades places with the action, in the same space,
   so a chip never changes size and can never run into the buttons beside it */
.chip{max-width:240px}
.chip-main .chip-name{min-width:0;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip-main .pp-box{display:inline-grid;align-items:center;justify-items:start;overflow:visible}
.pp-box>small{grid-area:1/1;transition:opacity .25s var(--ease-color),transform .35s var(--ease-ui)}
.pp-box .pp-go{opacity:0;transform:translateY(6px);color:var(--accent);font-weight:500}
.chip-main:hover .pp,.chip-main:focus-visible .pp{opacity:0;transform:translateY(-6px)}
.chip-main:hover .pp-go,.chip-main:focus-visible .pp-go{opacity:1;transform:none}
@media (hover:none){.chip-main .pp{opacity:0}.chip-main .pp-go{opacity:1;transform:none}}

/* ----- Editor polish: titles with a first-open line, header rows with a toggle, steady PDF Editor size, watermark mode ----- */
.ed-h-row{display:flex;align-items:center;gap:8px;margin:0 0 10px}
.ed-h-row .ed-h{margin:0}
.exp-overlay{overscroll-behavior:contain}
/* (the page behind a window is kept still by a wheel guard in the script, so the page's own scrollbar never has to appear or disappear) */
.pe-main{min-width:0;display:grid;gap:8px;align-content:start}
.pe-mode-hint{margin:0}
.pe-grid-wrap{height:min(54vh,440px);max-height:none}
.pe-deg{display:none;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;font-size:13px;color:var(--muted)}
.pe-deg.shown{display:flex}
.pe-deg input{width:84px}
.pe-grid.wm-mode .page-card.wm-x{opacity:.4;cursor:default}
.pe-grid.wm-mode .pe-tools{display:none}

/* ----- PDF Editor side panels: Pages and Tools slide over to the Watermark tool and back ----- */
.pe-views{display:grid;overflow:hidden;position:relative}
.pe-view{grid-area:1/1;min-width:0;transition:transform .5s var(--ease-out),opacity .35s var(--ease-ui),visibility 0s linear 0s}
.pe-view .ed-sec+.ed-sec{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.pe-wm .field{margin-bottom:12px}
.pe-wm .seg label{padding:6px 2px;font-size:12.5px}
.pe-wm input[type=text]{width:100%}
.pe-wm .hint{margin:0 0 10px}
.pe-wm-actions{display:flex;gap:6px;flex-wrap:wrap}
.pe-wm-actions .btn{margin-bottom:0}
.pe-wm-actions .primary{margin-left:auto;width:auto;margin-top:0}
.pe-wm .ed-h-row .btn{margin-bottom:0}
.pe-grid.wm-mode .page-card.wm-x{opacity:.4;cursor:default}
.pe-grid.wm-mode .pe-tools{display:none}
.ed-lead.quip{color:var(--accent);font-style:italic}
.ed-lead{transition:color .3s var(--ease-ui)}
@media (prefers-reduced-motion:reduce){.pe-view{transition:none!important}}
.pe .page-card:has(.pe-pos) .num{margin-left:22px}

/* ----- Editor tidy-ups: a divider before Reset, room for focus rings, grid footer, gain ----- */
.ed-sep{width:1px;align-self:stretch;margin:2px 6px;background:var(--line)}
.pe-views{padding:4px;margin:-4px}
.ae-bar .push-right{margin-left:auto}
#aeGainField{margin-top:10px;transition:opacity .3s var(--ease-ui)}
#aeGainField.dim{opacity:.45}
.ed-head{flex-wrap:wrap}
.ed-head h2{white-space:nowrap}
.line-style.sub{display:flex}
.adv *,details.adv::details-content{box-sizing:border-box}
.pe-break{flex-basis:100%;height:0}
.pe-wm-actions{row-gap:8px}

.pe-bar{display:flex;align-items:center;gap:6px}
.pe-bar .btn{margin:0}
.pe-bar .hint{margin:0 0 0 auto}
.pe-wm-actions{flex-wrap:nowrap;align-items:center}
.pe-wm-actions .danger{margin-right:auto;color:var(--danger)}
.pe-wm-actions .primary{margin-left:0}
.pe-break{display:none}

/* ----- Polish: loading chips, editor open and close, tactile pages, audio hint, watermark row ----- */
.chip.busy{color:var(--ink);animation:breathe 1.6s var(--ease-ui) infinite alternate}
@keyframes breathe{from{border-color:var(--line)}to{border-color:var(--accent)}}
.chip .chip-icon.plain{cursor:default}
.chip .chip-icon .spin{width:15px;height:15px;color:var(--accent);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.chip-main.plain{cursor:default}
.chip.settle .chip-icon .ic,.chip.settle .pp-box{animation:settle .6s var(--ease-out) backwards}
@keyframes settle{from{opacity:0;transform:translateY(5px) scale(.9)}}
.exp-overlay:not([hidden]):not(.closing){animation:fade .28s var(--ease-ui)}
.exp-overlay.closing{opacity:0;transition:opacity .24s var(--ease-ui)}
.exp-overlay.closing .dlg{transform:translateY(10px) scale(.985);transition:transform .24s var(--ease-ui)}
.pe .page-card{will-change:transform}
@media (hover:hover){.pe .page-card:not(.pe-hole):not(.pe-ghost):hover{transform:translateY(-2px)}}
.pe .page-card:not(.pe-hole):not(.pe-ghost):active{transform:scale(.97);transition-duration:.4s;transition-timing-function:var(--spring-press)}
.pe-wm .line-style input{flex:1;min-width:0}
#peWmCancel{margin-left:auto}
.pe-wm-actions .danger[hidden]{display:none}
.norm-hint{min-height:1.4em}
.norm-to{display:inline-block;opacity:0;transform:translateX(-10px);transition:opacity .45s var(--ease-out) .08s,transform .55s var(--ease-out) .08s}
.norm-to.on{opacity:1;transform:none}
.norm-arrow{vertical-align:-1px;color:var(--accent);margin:0 5px}
.norm-arrow path{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .6s var(--ease-out) .12s}
.norm-to.on .norm-arrow path{stroke-dashoffset:0}
.norm-to b{color:var(--ink);font-weight:600}
@media (prefers-reduced-motion:reduce){.chip.busy,.chip .spin{animation:none}.norm-to,.norm-arrow path{transition:none}}

/* ----- Tactile touches: the settings gear turns, the menu grows from its corner, toasts rise ----- */
#btnSettings svg{transition:transform .7s var(--ease-out)}
@media (hover:hover){#btnSettings:hover svg{transform:rotate(30deg)}}
#btnSettings[aria-expanded="true"] svg{transform:rotate(90deg)}
.menu:not([hidden]){animation:menu-in .32s var(--ease-out);transform-origin:top right}
@keyframes menu-in{from{opacity:0;transform:translateY(-6px) scale(.96)}}
.toast{transform:translate(-50%,10px);transition:opacity .25s var(--ease-ui),transform .5s var(--ease-out)}
.toast.show{transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){#btnSettings svg,.toast{transition:none}.menu:not([hidden]){animation:none}}

/* ----- Premium, tactile finishing touches ----- */
::selection{background:var(--accent-soft);color:var(--ink)}
/* a switch's knob stretches under your finger, then springs back */
input.switch::before{transition:transform .45s var(--spring-press),width .25s var(--ease-out)}
input.switch:not(:disabled):active::before{width:23px}
input.switch:checked:not(:disabled):active::before{transform:translateX(11px)}
/* the main buttons catch a little light along their top edge and sink when pressed */
.btn.primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 1px 2px rgba(20,24,40,.16)}
.btn.primary:not(:disabled):hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 4px 12px rgba(30,40,110,.22)}
.btn.primary:not(:disabled):active{box-shadow:inset 0 1px 2px rgba(0,0,0,.18)}
.btn.primary:disabled{box-shadow:none}
/* chips and cards lift a hair on hover */
@media (hover:hover){.chip:not(.busy):hover{transform:translateY(-1px)}}
.chip{transition:border-color .2s var(--ease-color),background-color .2s var(--ease-color),transform .35s var(--spring-hover),box-shadow .3s var(--ease-ui)}
.chip:not(.busy):hover{box-shadow:0 3px 10px rgba(20,24,40,.08)}
.info-i{transition:color .2s var(--ease-color),transform .35s var(--spring-hover)}
@media (hover:hover){.info-i:hover{transform:scale(1.15)}}
/* dialogs sit on layered shadows, so they feel like they float */
.dlg{box-shadow:0 1px 2px rgba(16,20,40,.06),0 8px 24px rgba(16,20,40,.1),0 28px 70px rgba(16,20,40,.14)}
/* thin, quiet scrollbars */
.panel,.pe-grid-wrap,.exp-overlay,.tl-scroll{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--muted) 45%,transparent) transparent}
.panel::-webkit-scrollbar,.pe-grid-wrap::-webkit-scrollbar,.exp-overlay::-webkit-scrollbar{width:8px;height:8px}
.panel::-webkit-scrollbar-thumb,.pe-grid-wrap::-webkit-scrollbar-thumb,.exp-overlay::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--muted) 40%,transparent);border-radius:8px;border:2px solid transparent;background-clip:content-box}
.panel::-webkit-scrollbar-thumb:hover,.pe-grid-wrap::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--muted) 65%,transparent);background-clip:content-box}
@media (prefers-reduced-motion:reduce){input.switch::before{transition:none}.chip:hover{transform:none}}

/* ----- Header: the file controls stop where the settings panel begins; whole-pixel heights keep the canvases from shifting on hover ----- */
@media (min-width:961px){
  .top{display:grid;grid-template-columns:minmax(0,1fr) 322px;gap:0;padding:0;box-sizing:border-box;height:57px;flex-wrap:nowrap}
  .top-main{display:flex;align-items:center;gap:12px;padding:0 16px;min-width:0}
  .top>.menu-wrap{display:flex;align-items:center;justify-content:flex-end;padding:0 16px;border-left:1px solid var(--line);margin-left:0}
}
@media (max-width:960px){
  .top-main{display:contents}
}
.tl-bar{min-height:38px;padding-top:0;padding-bottom:0;box-sizing:border-box}
.adv[open]{margin-bottom:18px}

/* the page never grows a scrollbar while the entrance animations run (the timeline rises from 14px below) */
.app{overflow:clip}
.pe-side .btn.wide{margin:0;width:100%}

/* the wordmark's ink lines up with the video preview's edge and sits centered in the bar */
.brand h1{margin:0 0 0 1.33px}
@media (min-width:961px){.brand h1{position:relative;top:-.1px}}

/* ----- PDF Editor side views: Pages and Tools, Watermark and Resize glide over one another ----- */
.pe-views .pe-view{transform:translateX(26px);opacity:0;visibility:hidden;transition:transform .5s var(--ease-out),opacity .35s var(--ease-ui),visibility 0s linear .5s}
.pe-views[data-view="pages"] #peViewPages,.pe-views[data-view="wm"] #peViewWm,.pe-views[data-view="resize"] #peViewResize{transform:none;opacity:1;visibility:visible;transition:transform .5s var(--ease-out),opacity .35s var(--ease-ui),visibility 0s}
.pe-views:not([data-view="pages"]) #peViewPages{transform:translateX(-26px)}
.pe-side .btn.wide+.btn.wide{margin-top:8px}
.rz-now{margin:2px 0 12px;font-weight:600;font-size:14px;color:var(--ink)}
.rz-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rz-opt{display:grid;gap:1px;justify-items:start;text-align:left;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);color:var(--ink);cursor:pointer;font:inherit;transition:transform .3s var(--spring-hover),background-color .2s var(--ease-color),border-color .2s var(--ease-color),box-shadow .3s var(--ease-ui)}
.rz-opt b{font-size:13px;font-weight:600}
.rz-opt small{font-size:11px;color:var(--muted);min-height:1.2em}
@media (hover:hover){.rz-opt:hover{border-color:var(--muted);transform:translateY(-1px)}}
.rz-opt:active{transform:scale(.97);transition-duration:.4s;transition-timing-function:var(--spring-press)}
.rz-opt[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent) inset}
.rz-custom{display:none;align-items:center;gap:8px;margin-top:10px}
.rz-custom.shown{display:flex}
.rz-custom input{width:0;flex:1;min-width:0}
.rz-custom span{color:var(--muted);font-size:13px}
.keys{margin:0;background:var(--panel2)}
.dlg .keys{margin:0}
.rz-now{margin-bottom:14px}
.ed-h-row .btn{margin-bottom:0}

.ae-export{display:flex;align-items:center;gap:8px;min-width:0}
.ae-export select{width:auto;max-width:210px;padding:7px 28px 7px 10px;font-size:13px}
@media (max-width:520px){.ae-export{flex-wrap:wrap}}
.pe .row .btn svg,.editor .row .btn svg{width:16px;height:16px;flex:none}

/* ----- How it works, and a steady scrollbar ----- */
.dlg.how{max-height:calc(100vh - 32px);overflow:auto;grid-template-rows:auto auto minmax(0,1fr) auto}
.how-lead{font-size:14px;color:var(--ink)}
.how-body{display:grid;gap:14px;overflow:auto;padding-right:6px;min-height:0}
.how-body h3{margin:0 0 3px;font-size:13.5px;font-weight:600}
.how-body p{font-size:13.5px;line-height:1.5}

/* ----- Phones and small tablets only (the desktop layout above is untouched) ----- */
@media (max-width:960px){
  .top>.menu-wrap{order:2}
  .top>.btn{order:1}
}
@media (max-width:760px){
  /* header: the name on the left and the buttons on the right, then the title on a row of its own, then the file chips */
  .top{align-items:center;row-gap:10px;padding:10px 16px 12px}
  .title-pill,.title-pill:focus-within{flex:1 1 100%;order:5}
  .chips{flex:1 1 100%;order:6}
  /* timeline bar: a clean two-row grid instead of buttons wrapping wherever they land */
  .tl-bar{display:grid;grid-template-columns:auto auto 1fr auto auto;grid-template-areas:"ttl inf . und red" "spc spc spc zm zm";align-items:center;gap:8px;padding:8px 16px 10px;min-height:0}
  .tl-bar h2{grid-area:ttl}
  .tl-bar .tl-info{grid-area:inf;margin:0}
  .tl-bar #bUndo{grid-area:und}
  .tl-bar #bRedo{grid-area:red}
  .tl-bar #bSpace{grid-area:spc;justify-self:start}
  .tl-bar .zoom{grid-area:zm;justify-self:end}
  .tl-bar .vsep{display:none}
  .tl-bar .hint.warn{grid-column:1/-1}
}
/* touch screens: 16px text in fields stops iPhones zooming the page in when you tap one */
@media (hover:none) and (pointer:coarse){
  input[type=text],input[type=number],select,textarea,.title-pill input,.line-font{font-size:16px}
}

/* phones: the editor's side panel shows only the view in use (the others would leave a tall empty gap) */
@media (max-width:700px){
  .pe-views{display:block;overflow:visible;padding:0;margin:0}
  .pe-views .pe-view{display:none;transform:none;opacity:1;visibility:visible}
  .pe-views[data-view="pages"] #peViewPages,.pe-views[data-view="wm"] #peViewWm,.pe-views[data-view="resize"] #peViewResize{display:block}
}