/* ============================================================
   Beija-Flor Divino — design system from the Claude Design doc
   Palette drawn from the emblem: magenta lotus, cyan star,
   white heart, rainbow hummingbird wings.
   ============================================================ */
:root {
  --magenta: #cf1f8f;
  --cyan: #1ca6cc;
  --plum: #4a3444;
  --ink-soft: #6a5563;
  --muted: #8a7183;
  --soft: #b598ac;
  --faint: #cbb2c3;
  --bg: #fdfaf8;
  --card: #ffffff;
  --card-border: #f2e8ee;
  --line: #f0e4ec;
  --chip-border: #ecd7e6;
  --hero-tint: #fbeef6;
  --brand-ink: #9c4d84;
  --brand-sub: #a98aa0;
  --row-hover: #fbeef6;
  --pdf: #c0472f;
  --doc: #2b579a;
  --shadow-card: 0 6px 20px rgba(74, 52, 68, .07);
  --shadow-card-hover: 0 16px 36px rgba(74, 52, 68, .16);
  --font-head: 'Quicksand', sans-serif;
  --font-body: 'Public Sans', sans-serif;
  --font-mono: 'Space Mono', monospace;

  /* The page column. Every surface that holds content lines up with it, so the
     home page, the detail pages, the admin and the footer share one width. */
  --page-w: 1180px;
  --page-pad: 30px;
  /* For edge-to-edge bars (topbar, admin nav): keeps the background full-bleed
     while the contents sit on the same column as .container. */
  --bar-pad: max(var(--page-pad), (100% - var(--page-w)) / 2 + var(--page-pad));
}

* { box-sizing: border-box; }
/* Layout rules below set display on flex/grid blocks, which would otherwise
   out-specify the UA [hidden] rule and leave "hidden" elements visible. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--plum);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* keep footer pinned to bottom on short pages */
}
/* Reserve room for the sticky player only while it's visible, so short pages
   keep the footer flush with the bottom of the viewport. The room is taken out
   of the footer's own padding rather than the body's: padding under the body
   would show the page background below the footer, leaving a pale gap between
   the footer and the player at the end of a scroll. */
body:has(#player:not([hidden])) .footer { padding-bottom: 118px; }
/* body is a flex column (above), and auto side-margins on a flex item suppress
   stretching: the column would size to fit its own contents, so a sparse search
   page ended up narrower than a full grid. Pinning children to 100% lets
   max-width settle every page on the same column. */
body > * { width: 100%; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 700; margin: 0; }
.mono { font-family: var(--font-mono); }
button { font-family: inherit; cursor: pointer; }

/* ---------- Topbar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--bar-pad); background: #fff; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
}
.brand { display: flex; align-items: center; gap: 13px; }
.brand-mark { width: 48px; height: 48px; border-radius: 50%; display: block; flex: none; }
.brand-words { display: flex; flex-direction: column; line-height: 1; font-family: var(--font-head); }
.brand-pre { font-size: 11px; font-weight: 500; letter-spacing: .04em; color: var(--brand-sub); margin-bottom: 2px; }
.brand-name { font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: var(--brand-ink); white-space: nowrap; }
.topnav { display: flex; align-items: center; gap: 24px; font-size: 14px; color: var(--muted); flex-wrap: wrap; }
.topnav a.on { color: var(--magenta); font-weight: 600; }
.topnav a:hover { color: var(--magenta); }
.lang-toggle { display: inline-flex; gap: 2px; border: 1px solid var(--chip-border); border-radius: 20px; padding: 3px; }
.lang-toggle a { padding: 3px 10px; font-size: 12px; border-radius: 20px; }
.lang-toggle a.on { background: var(--magenta); color: #fff; font-weight: 600; }
/* Language dropdown (desktop topbar) */
.lang-dd { position: relative; }
.lang-dd-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--chip-border); background: #fff; border-radius: 20px;
  padding: 5px 12px; font-size: 12px; font-weight: 600; color: var(--muted);
}
.lang-dd-btn:hover { color: var(--magenta); }
.lang-dd-btn svg { width: 10px; height: 6px; transition: transform .15s ease; }
.lang-dd-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.lang-dd-menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 160px;
  background: var(--card); border: 1px solid var(--card-border); border-radius: 14px;
  box-shadow: var(--shadow-card-hover); padding: 6px; z-index: 45;
}
.lang-dd-menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 12px; border-radius: 9px; font-size: 13px; color: var(--ink-soft);
}
.lang-dd-menu a:hover { background: var(--row-hover); color: var(--magenta); }
.lang-dd-menu a.on { color: var(--magenta); font-weight: 600; }
.lang-dd-menu a.on::after { content: '✓'; }
.btn-pill {
  background: var(--magenta); color: #fff !important; padding: 8px 18px; border-radius: 20px;
  font-weight: 600; font-size: 13px; display: inline-block; border: none;
}
.btn-pill:hover { filter: brightness(1.08); }
.btn-pill.outline { background: #fff; color: var(--magenta) !important; border: 1.5px solid #f0cfe4; }
.btn-pill.cyan { background: var(--cyan); }
.rainbow { height: 3px; background: linear-gradient(90deg, #e23b2e, #f18a2a, #f2c53d, #5ab24e, #2ba6dd, #cf1f8f); }

/* ---------- Mobile nav drawer ---------- */
.nav-burger {
  display: none; align-items: center; justify-content: center;
  background: none; border: 0; padding: 6px; margin: -6px; color: var(--brand-ink);
}
.nav-burger svg { width: 26px; height: 26px; display: block; }
/* Sits above the topbar (40) but below the modal (60) / queue sheet (62) /
   player (63) so those keep working if they're ever open together. */
.nav-drawer { position: fixed; inset: 0; z-index: 58; pointer-events: none; }
.nav-drawer-scrim {
  position: absolute; inset: 0; background: rgba(74, 52, 68, .35);
  opacity: 0; transition: opacity .25s ease;
}
.nav-drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(300px, 84vw);
  background: var(--card); border-left: 1px solid var(--line);
  box-shadow: -12px 0 40px rgba(74, 52, 68, .18);
  transform: translateX(105%); transition: transform .28s cubic-bezier(.32, .72, .34, 1);
  display: flex; flex-direction: column; gap: 22px; padding: 18px 22px 24px;
}
/* the emblem's rainbow, echoed on the drawer's leading edge */
.nav-drawer-panel::before {
  content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, #e23b2e, #f18a2a, #f2c53d, #5ab24e, #2ba6dd, #cf1f8f);
}
.nav-drawer.open { pointer-events: auto; }
.nav-drawer.open .nav-drawer-scrim { opacity: 1; }
.nav-drawer.open .nav-drawer-panel { transform: none; }
.nav-drawer-head { display: flex; align-items: center; justify-content: space-between; }
.nav-drawer-head .brand-mark { width: 38px; height: 38px; }
.nav-drawer-close { background: none; border: 0; padding: 6px; margin: -6px; color: var(--muted); }
.nav-drawer-close:hover { color: var(--magenta); }
.nav-drawer-close svg { width: 22px; height: 22px; display: block; }
.nav-drawer-links {
  display: flex; flex-direction: column;
  font-family: var(--font-head); font-size: 17px; font-weight: 600; color: var(--ink-soft);
}
.nav-drawer-links a { padding: 12px 2px; border-bottom: 1px solid var(--line); }
.nav-drawer-links a.on { color: var(--magenta); }
.nav-drawer .lang-toggle { align-self: flex-start; }
.nav-drawer .lang-toggle a { padding: 6px 14px; font-size: 13px; }
.nav-drawer .btn-pill { align-self: flex-start; }
@media (min-width: 761px) { .nav-drawer { display: none; } }

/* ---------- Hero ---------- */
.hero {
  position: relative; padding: 44px var(--page-pad) 40px; text-align: center;
  background: radial-gradient(120% 90% at 50% 0%, var(--hero-tint) 0%, var(--bg) 60%);
}
.hero.small { padding: 34px var(--page-pad) 26px; }
.hero-logo { width: 330px; max-width: 60%; height: auto; display: block; margin: 0 auto 18px; }
.hero.small .hero-logo { width: 240px; margin-bottom: 14px; }
.hero-kicker { font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--cyan); margin-bottom: 14px; }
.hero h1 { font-weight: 600; font-size: 38px; line-height: 1.15; margin: 0 auto 14px; max-width: 640px; }
.hero.small h1 { font-size: 32px; }
.hero p { font-size: 15px; max-width: 520px; margin: 0 auto; color: var(--muted); }

/* ---------- Layout ---------- */
.container { max-width: var(--page-w); margin: 0 auto; padding: 22px var(--page-pad) 60px; }
.container-pad { max-width: var(--page-w); margin: 0 auto; padding: 14px var(--page-pad); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 10px 0 18px; }
.section-head h2 { font-size: 28px; }
.section-head .sub { font-size: 12px; color: var(--soft); margin-top: 6px; }
.centers-head { margin-top: 44px; }

/* ---------- Search ---------- */
.searchbox {
  display: flex; align-items: center; gap: 10px; background: #fff;
  border: 1px solid var(--chip-border); border-radius: 26px; padding: 10px 18px;
  min-width: 340px; box-shadow: 0 3px 12px rgba(74, 52, 68, .06);
}
.searchbox.center { max-width: 420px; margin: 18px auto 0; }
.searchbox .s-icon { color: var(--magenta); font-size: 16px; }
.searchbox input { border: none; outline: none; flex: 1; font-size: 14px; font-family: var(--font-body); color: var(--plum); background: transparent; }
.searchbox input::placeholder { color: var(--soft); }
.s-kbd { font-size: 10px; color: var(--faint); border: 1px solid #eee2ec; border-radius: 5px; padding: 2px 6px; }

/* ---------- Chips ---------- */
.chips { display: flex; gap: 8px; margin: 8px 0 20px; flex-wrap: wrap; }
.chip {
  background: #fff; border: 1px solid var(--chip-border); color: var(--muted);
  font-size: 12px; padding: 8px 16px; border-radius: 20px; font-family: var(--font-body);
}
.chip.on { background: var(--plum); color: #fff; border-color: var(--plum); }
#variant-chips .chip.on { background: var(--magenta); border-color: var(--magenta); }
.chip:hover:not(.on) { border-color: var(--soft); }

/* ---------- Cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card {
  background: var(--card); border: 1px solid var(--card-border); border-radius: 18px;
  overflow: hidden; box-shadow: var(--shadow-card);
  transition: transform .2s ease, box-shadow .2s ease; display: block;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.card-img { height: 174px; overflow: hidden; }
.card-img.sm { height: 120px; }
.card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-ph {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--hero-tint), #e9f5fa);
}
.card-ph.alt { background: linear-gradient(135deg, #e9f5fa, var(--hero-tint)); }
.card-ph span { font-family: var(--font-head); font-weight: 700; font-size: 44px; color: var(--magenta); opacity: .45; }
.card-body { padding: 16px 18px 18px; }
.card-title { font-family: var(--font-head); font-weight: 600; font-size: 19px; }
.card-title.sm { font-size: 16px; }
.card-sub { font-size: 11px; color: var(--soft); margin-top: 5px; }

/* ---------- Center cards ---------- */
.center-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.gcard {
  background: var(--card); border: 1px solid var(--card-border); border-radius: 18px;
  overflow: hidden; box-shadow: var(--shadow-card); transition: transform .2s ease, box-shadow .2s ease;
}
.gcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.gcard-img { position: relative; height: 150px; }
.gcard-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gcard-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(74,52,68,0), rgba(74,52,68,.55)); }
.gcard-name {
  position: absolute; left: 16px; bottom: 12px; right: 16px;
  font-family: var(--font-head); font-weight: 700; font-size: 20px; color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.gcard-body { padding: 14px 18px; font-size: 11px; color: var(--soft); }

/* ---------- Breadcrumbs ---------- */
/* full-bleed white bar, crumb text on the same column as .container */
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--soft); background: #fff; border-bottom: 1px solid var(--line); max-width: none; padding: 14px var(--bar-pad); }
.crumbs a:hover { color: var(--magenta); }
.crumbs .here { color: var(--magenta); }

/* ---------- Collection hero ---------- */
.col-hero {
  max-width: var(--page-w); margin: 0 auto; padding: 28px var(--page-pad) 22px;
  display: flex; gap: 22px; align-items: center; flex-wrap: wrap;
  background: radial-gradient(120% 120% at 0% 0%, var(--hero-tint) 0%, var(--bg) 55%);
}
.col-hero-img { width: 100px; height: 100px; border-radius: 18px; overflow: hidden; flex: 0 0 auto; box-shadow: 0 8px 22px rgba(74,52,68,.18); }
.col-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.col-hero h1 { font-size: 34px; margin: 0 0 8px; }
.col-hero > div:nth-child(2) { flex: 1; min-width: 220px; }
.kicker { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); margin-bottom: 8px; }
.sub { font-size: 12px; color: var(--soft); }

/* ---------- Row list ---------- */
.rowlist { padding: 4px 0 10px; }
.row {
  display: flex; align-items: center; gap: 16px; padding: 12px;
  border-radius: 14px; transition: background .15s ease;
}
.row:hover { background: var(--row-hover); }
.row-img { width: 66px; height: 66px; border-radius: 12px; overflow: hidden; flex: 0 0 auto; }
.row-img img { width: 100%; height: 100%; object-fit: cover; }
.row-main { flex: 1; min-width: 0; }
.row-title { font-family: var(--font-head); font-weight: 600; font-size: 18px; }
.row-sub { font-size: 11px; color: var(--soft); margin-top: 4px; }
.row-badge { font-size: 11px; color: var(--muted); background: #f3e7f0; border-radius: 12px; padding: 5px 11px; white-space: nowrap; }
.row-arrow { color: var(--faint); font-size: 20px; }

/* ---------- Hinário / center detail hero ---------- */
.detail-hero { position: relative; height: 320px; border-bottom: 1px solid var(--line); }
.detail-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
div.detail-cover span { font-size: 90px; }
.detail-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(74,52,68,.05) 0%, rgba(74,52,68,.32) 45%, rgba(74,52,68,.85) 100%); }
.detail-text { position: absolute; left: 0; right: 0; bottom: 24px; }
.detail-text > * { max-width: var(--page-w); margin-left: auto; margin-right: auto; padding: 0 var(--page-pad); }
.kicker-light { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #fff; opacity: .85; margin-bottom: 8px; }
.detail-text h1 { font-size: 44px; margin: 0 auto 6px; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.sub-light { font-size: 12px; color: rgba(255,255,255,.9); }
.sub-light span { margin-right: 14px; }

/* hinário hero with floating book cover */
.detail-hero-inner {
  position: absolute; left: 0; right: 0; bottom: 22px;
  max-width: var(--page-w); margin: 0 auto; padding: 0 var(--page-pad);
  display: flex; align-items: flex-end; gap: 22px;
}
.book-cover {
  width: 128px; height: 172px; border-radius: 8px; overflow: hidden; flex: 0 0 auto;
  border: 2px solid rgba(255,255,255,.9); box-shadow: 0 14px 34px rgba(0,0,0,.5); background: #fff;
  transition: box-shadow .2s ease;
}
.book-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.book-cover .card-ph span { font-size: 44px; }
.detail-text-inline { flex: 1; min-width: 0; padding-bottom: 6px; }
.detail-text-inline h1 { font-size: 44px; margin: 0 0 6px; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.collection-hero { height: 260px; }

/* collection row portrait covers */
.row-cover { width: 58px; height: 78px; border-radius: 8px; overflow: hidden; flex: 0 0 auto; box-shadow: 0 3px 10px rgba(74,52,68,.14); }
.row-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.row-cover .card-ph span { font-size: 24px; }

/* minmax(0, …): a plain fr track grows to its min-content, and the recording
   picker's nowrap title can push that past the viewport on phones. */
.detail-grid { max-width: var(--page-w); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
/* No recordings: the files pane is the only column and spans the full width */
.detail-grid.files-only { grid-template-columns: minmax(0, 1fr); }
.detail-left { padding: 26px var(--page-pad); border-right: 1px solid var(--line); }
.detail-right { padding: 26px var(--page-pad); }
.label { font-size: 11px; color: var(--soft); margin-bottom: 10px; }
.detail-desc { color: var(--ink-soft); font-size: 14px; max-width: 640px; }

/* shared player controls */
.pl-btn {
  width: 44px; height: 44px; border-radius: 50%; background: var(--magenta); color: #fff;
  display: flex; align-items: center; justify-content: center; padding: 0; border: none; flex: 0 0 auto;
  -webkit-tap-highlight-color: transparent;
  transition: transform .1s ease, filter .1s ease;
}
.pl-btn:active { transform: scale(.92); filter: brightness(1.15); }
.pl-btn:focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; }
.pl-btn svg { width: 20px; height: 20px; display: block; fill: currentColor; }
.pl-btn .pl-ico-pause, .pl-btn.playing .pl-ico-play { display: none; }
.pl-btn.playing .pl-ico-pause { display: block; }
.pl-bar { height: 5px; background: var(--line); border-radius: 3px; overflow: hidden; cursor: pointer; }
.pl-progress { width: 0; height: 100%; background: linear-gradient(90deg, var(--magenta), var(--cyan)); }

/* tracklist */
.tracklist { list-style: none; margin: 0; padding: 0; }
.tracklist li {
  display: flex; justify-content: space-between; padding: 10px 6px;
  border-bottom: 1px solid #f5ecf1; font-size: 14px; color: var(--muted); cursor: pointer;
  border-radius: 6px;
}
.tracklist li:hover { background: var(--row-hover); }
.tracklist li.playing { background: var(--hero-tint); color: var(--magenta); font-weight: 600; }
.tracklist .tno { font-family: var(--font-mono); margin-right: 12px; color: var(--faint); }
.tracklist li.playing .tno, .tracklist li.playing .tdur { color: var(--magenta); }
.tracklist .tdur { font-family: var(--font-mono); color: var(--faint); }
.tracklist .tright { display: flex; align-items: center; gap: 12px; }
.tracklist .tdl {
  color: var(--faint); font-size: 15px; line-height: 1; opacity: .5;
  padding: 2px 4px; border-radius: 6px;
}
.tracklist li:hover .tdl, .tracklist li.playing .tdl { opacity: 1; }
.tracklist .tdl:hover { color: var(--magenta); background: #fff; }
.tracklist li.playing .tdl { color: var(--magenta); }

/* recording picker + download-the-whole-recording button, one row above the tracklist */
.rec-bar { display: flex; align-items: center; gap: 12px; margin: 8px 0 14px; flex-wrap: wrap; }
.rec-bar #rec-zip { margin-left: auto; flex: none; }
.rec-single { font-size: 13px; color: var(--muted); }
.btn-pill.sm { padding: 6px 14px; font-size: 12px; }
.btn-pill .dl-ico { margin-right: 4px; }
/* The ZIP is built on the fly, so the click and the browser's download bar are
   seconds apart: the button spins for that gap. */
.btn-pill.loading { pointer-events: none; opacity: .8; }
.btn-pill .dl-spin { display: none; }
.btn-pill.loading .dl-ico { display: none; }
.btn-pill.loading .dl-spin {
  display: inline-block; width: 11px; height: 11px; margin-right: 6px; vertical-align: -1px;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  animation: spin .7s linear infinite;
}

/* ---------- Dropdown ---------- */
.dd { position: relative; min-width: 0; }
.dd-btn {
  display: inline-flex; align-items: center; gap: 10px; max-width: 100%;
  background: #fff; border: 1px solid var(--chip-border); border-radius: 20px;
  padding: 7px 14px; font-size: 13px; color: var(--plum); font-family: var(--font-body);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.dd-btn:hover { border-color: var(--soft); }
.dd.open .dd-btn { border-color: var(--magenta); box-shadow: 0 0 0 3px rgba(207, 31, 143, .10); }
.dd-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-caret { font-size: 14px; color: var(--soft); transition: transform .22s ease, color .15s ease; }
.dd.open .dd-caret { transform: rotate(180deg); color: var(--magenta); }
.dd-menu {
  position: absolute; top: calc(100% + 7px); left: 0; z-index: 30;
  min-width: 100%; width: max-content; max-width: min(340px, 80vw);
  padding: 6px; background: #fff; border: 1px solid var(--card-border);
  border-radius: 14px; box-shadow: var(--shadow-card-hover);
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.97); transform-origin: top left;
  transition: opacity .16s ease, transform .24s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .24s;
}
.dd.open .dd-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.dd-item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%;
  padding: 9px 12px; border: 0; border-radius: 10px; background: none; text-align: left;
  font-family: var(--font-body); font-size: 13px; color: var(--muted); white-space: nowrap;
  min-width: 0;
  /* the items trail the menu in, one after the other */
  opacity: 0; transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease, background .15s ease, color .15s ease;
}
.dd.open .dd-item { opacity: 1; transform: none; transition-delay: calc(60ms + var(--i, 0) * 35ms); }
.dd.open .dd-item:hover { background: var(--row-hover); color: var(--plum); }
.dd-item.on { background: var(--hero-tint); color: var(--magenta); font-weight: 600; }
/* Long recording titles must ellipsize, not widen the menu: the closed menu is
   only visibility-hidden, so anything wider than the viewport still creates
   horizontal page scroll on mobile. */
.dd-item > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dd-item .dd-sub { font-size: 11px; color: var(--faint); flex: 0 0 auto; }
.dd-item.on .dd-sub { color: var(--magenta); }

/* files column */
.files-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.files-head h3 { font-size: 20px; font-weight: 600; }
.version-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.vtab { font-size: 11px; border: 1px solid var(--chip-border); padding: 4px 9px; border-radius: 14px; color: var(--soft); }
.vtab.on { background: var(--magenta); color: #fff; border-color: var(--magenta); }
.format-cards { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.format-card {
  flex: 1; min-width: 130px; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 16px; text-align: center;
}
.fmt-badge { font-family: var(--font-mono); color: #fff; font-size: 10px; padding: 4px 7px; border-radius: 4px; }
.fmt-badge.pdf { background: var(--pdf); }
.fmt-badge.doc { background: var(--doc); }
.format-size { font-size: 13px; margin: 10px 0 4px; }
.format-actions { font-size: 12px; color: var(--magenta); }
.format-actions a:hover { text-decoration: underline; }
.history-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-top: 6px; }
.history-lines { font-size: 13px; color: var(--muted); line-height: 1.6; }

/* per-variant version history */
.ver-caption { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.vtag { font-size: 11px; color: var(--soft); }
.vtag.current { color: var(--magenta); }
.ver-meta { font-size: 12px; color: var(--muted); }
.ver-history { margin-top: 20px; }
.hist-label { margin-bottom: 0; cursor: pointer; display: flex; align-items: center; gap: 7px; list-style: none; }
.hist-label::-webkit-details-marker { display: none; }
.hist-label::after { content: '▾'; font-size: 9px; transition: transform .15s ease; }
.ver-history[open] .hist-label::after { transform: rotate(180deg); }
.hist-label:hover { color: var(--muted); }
.ver-block { border-top: 1px dashed var(--line); padding-top: 14px; margin-top: 14px; }
.ver-block .format-card { background: var(--bg); }

/* other centers' versions — tail of the files column, one row per version */
.other-versions { margin-top: 48px; }
.other-versions h3 { font-size: 20px; font-weight: 600; margin-bottom: 10px; }
/* pull the rows' own padding back out so the covers line up with the column */
.other-versions .rowlist { margin-inline: -12px; padding-bottom: 0; }
.other-versions .row-title { font-size: 16px; }

/* ---------- Documents ---------- */
.doclist { display: flex; flex-direction: column; gap: 10px; }
.docrow {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; flex-wrap: wrap;
}
.docrow-title { font-size: 14px; font-weight: 500; }
.docrow-sub { font-size: 11px; color: var(--soft); }
.docrow-files { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
/* Accordion documents (more than one file): collapsed row, per-variant lines */
.docrow-acc { display: block; padding: 0; }
.docrow-sum {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 14px; cursor: pointer; list-style: none; flex-wrap: wrap;
}
.docrow-sum::-webkit-details-marker { display: none; }
.docrow-sum .docrow-main { flex: 1; min-width: 0; }
.docrow-sum:hover .docrow-title { color: var(--magenta); }
.docrow-hint { font-size: 10px; color: var(--soft); }
.docrow-caret { color: var(--soft); font-size: 11px; transition: transform .15s ease; }
.docrow-acc[open] .docrow-caret { transform: rotate(90deg); }
.docrow-variants { border-top: 1px solid var(--line); padding: 14px 16px 2px; }
.docvar-sec .format-cards { margin-bottom: 14px; }
/* Cards sit on the white row — tint them like the hinário history cards */
.docrow-variants .format-card { background: var(--bg); flex: 0 1 200px; }
.docvar-label { margin-bottom: 6px; }
.filechip { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; }
.filechip-lang { font-size: 10px; color: var(--soft); }
.filechip-act { color: var(--magenta); font-size: 12px; }
.filechip-act:hover { text-decoration: underline; }

/* ---------- Links bar (center) ---------- */
.linksbar { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 16px; }

/* ---------- Footer ---------- */
.footer { background: var(--plum); color: #f3e7f0; padding: 28px 0; margin-top: auto; }
.footer-row { max-width: var(--page-w); margin: 0 auto; padding: 0 var(--page-pad); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.footer-title { font-family: var(--font-head); font-weight: 600; font-size: 17px; }
.footer-links { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.footer-pill { border: 1px solid rgba(255,255,255,.15); padding: 7px 14px; border-radius: 20px; opacity: .7; }
.footer-pill:hover { border-color: rgba(255,255,255,.4); opacity: 1; }
.footer-sub { margin-top: 18px; font-size: 12px; opacity: .55; }

.empty { color: var(--soft); }

/* ---------- Sticky player ---------- */
/* Tops the stack: above the queue sheet's backdrop (55) and the preview
   modal's scrim (60), so the transport stays visible and usable behind both. */
/* `hidden` stays the state flag, but the player opts out of the global
   `[hidden] { display: none !important }` (line 43): it has to stay laid out to
   slide out of view rather than vanish. visibility takes it out of the a11y
   tree once the slide finishes. */
.player {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 63;
  background: #fff; border-top: 1px solid var(--line);
  box-shadow: 0 -10px 30px rgba(74,52,68,.12);
  display: flex; align-items: center; gap: 14px; padding: 10px 22px;
  transform: translateY(0);
  transition: transform .28s cubic-bezier(.22, .61, .36, 1), visibility 0s linear 0s;
}
.player[hidden] {
  display: flex !important;
  transform: translateY(100%); visibility: hidden;
  transition: transform .28s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .28s;
}
.pl-main { flex: 1; min-width: 0; }
.pl-meta { font-size: 10px; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-title { font-family: var(--font-head); font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-time { font-size: 11px; color: var(--soft); white-space: nowrap; }
.pl-skip { background: none; border: none; color: var(--muted); font-size: 15px; padding: 6px; }
.pl-skip:hover { color: var(--magenta); }
.pl-meta a:hover { color: var(--magenta); text-decoration: underline; }
.pl-title a:hover { color: var(--magenta); }
.pl-count { background: none; border: none; font: inherit; color: inherit; padding: 0; cursor: pointer; }
.pl-count:hover { color: var(--magenta); text-decoration: underline; }
#pl-list[aria-expanded="true"] { color: var(--magenta); }

/* ---------- Queue sheet (slides up from the bottom, over the player) ---------- */
/* Above the preview modal (60) — the player's queue button stays reachable
   while a preview is open, so the sheet must land in front of it. */
.pl-sheet {
  position: fixed; inset: 0; z-index: 62;
  visibility: hidden; transition: visibility 0s linear .26s;
}
.pl-sheet.open { visibility: visible; transition-delay: 0s; }
.pl-sheet-backdrop {
  position: absolute; inset: 0; background: rgba(74, 52, 68, .35);
  opacity: 0; transition: opacity .26s ease;
}
.pl-sheet.open .pl-sheet-backdrop { opacity: 1; }
.pl-sheet-box {
  position: absolute; left: 50%; bottom: var(--pl-h, 66px);
  width: min(460px, 100%); max-height: min(58vh, 520px);
  background: #fff; border: 1px solid var(--line); border-bottom: none;
  border-radius: 16px 16px 0 0; box-shadow: 0 -14px 40px rgba(74, 52, 68, .22);
  display: flex; flex-direction: column; overflow: hidden;
  transform: translate(-50%, calc(100% + var(--pl-h, 66px)));
  transition: transform .26s cubic-bezier(.22, .61, .36, 1);
}
.pl-sheet.open .pl-sheet-box { transform: translate(-50%, 0); }
.pl-sheet-head {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 14px 10px 12px 18px; border-bottom: 1px solid var(--line);
}
.pl-sheet-head::before {
  content: ''; position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 36px; height: 4px; border-radius: 2px; background: var(--line);
}
.pl-sheet-titles { flex: 1; min-width: 0; }
.pl-sheet-kicker { font-size: 10px; color: var(--soft); }
.pl-sheet-src {
  font-family: var(--font-head); font-weight: 600; font-size: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pl-sheet-src a:hover { color: var(--magenta); text-decoration: underline; }
.pl-queue { overflow-y: auto; padding: 6px 14px 14px; overscroll-behavior: contain; }
.pl-queue li { border-bottom: none; padding: 9px 8px; }

/* ---------- Preview modal ---------- */
.modal { position: fixed; inset: 0; z-index: 60; background: rgba(74,52,68,.55); display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal-box { background: #fff; border-radius: 16px; width: min(920px, 100%); height: min(86vh, 1100px); display: flex; flex-direction: column; overflow: hidden; }
.modal-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.modal-title { flex: 1; font-family: var(--font-head); font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal iframe { flex: 1; border: none; width: 100%; }
/* DOCX preview: docx-preview renders paginated markup into this scroll box. */
.preview-doc { flex: 1; overflow: auto; background: #eceae7; overscroll-behavior: contain; }
.preview-doc[hidden] { display: none !important; }
.preview-doc.is-loading, .preview-doc.is-error {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--font-mono); font-size: 13px; color: var(--muted); text-align: center; padding: 0 20px;
}
.preview-doc.is-loading::before {
  content: ''; width: 34px; height: 34px; border-radius: 50%;
  border: 4px solid var(--chip-border); border-top-color: var(--magenta);
  animation: spin 1s linear infinite;
}
.preview-doc .docx-wrapper { background: transparent; padding: 18px 12px; }
.preview-doc .docx-wrapper > section.docx { box-shadow: 0 4px 18px rgba(0, 0, 0, .18); margin-bottom: 18px; }
.preview-doc.pdf-pages { padding: 18px 12px; }
.preview-doc div.pdf-page {
  display: block; margin: 0 auto 18px; background: #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .18); max-width: 100%;
}
.preview-doc div.pdf-page canvas { display: block; width: 100%; height: auto; }
/* Maximized: fill the viewport, but stop short of the player bar when it's up
   (--pv-pl-h is the player's height, set by player.js) so it stays usable. */
.modal.is-max { padding: 0; inset: 0 0 var(--pv-pl-h, 0px) 0; transition: inset .28s cubic-bezier(.22, .61, .36, 1); }
.modal.is-max .modal-box { width: 100%; height: 100%; max-width: none; border-radius: 0; }
#preview-max svg { width: 18px; height: 18px; display: block; fill: currentColor; }
#preview-max .pv-ico-min, .modal.is-max #preview-max .pv-ico-max { display: none; }
.modal.is-max #preview-max .pv-ico-min { display: block; }

/* ---------- Cover lightbox (hinário page) ---------- */
/* Clicking the floating book cover zooms it to full size: the image FLIPs from
   the cover's spot (start transform set inline by hinario.js) while the scrim
   fades. z 70: above the preview modal (60) and player (63), below admin (80). */
.book-cover.zoomable { cursor: zoom-in; }
.book-cover.zoomable:hover { box-shadow: 0 18px 44px rgba(0,0,0,.62); }
.cover-lb {
  position: fixed; inset: 0; z-index: 70; cursor: zoom-out;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(74,52,68,0); transition: background .3s ease;
}
.cover-lb:focus { outline: none; }
.cover-lb.open { background: rgba(74,52,68,.72); }
.cover-lb img {
  max-width: min(calc(100vw - 48px), 620px); max-height: 86vh;
  display: block; border-radius: 12px; border: 2px solid rgba(255,255,255,.9);
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
  transform-origin: top left;
  transition: transform .34s cubic-bezier(.22,.61,.36,1), opacity .34s ease;
}
@media (prefers-reduced-motion: reduce) {
  .cover-lb, .cover-lb img { transition: none; }
}

/* ---------- Admin ---------- */
.admin-wrap { max-width: var(--page-w); margin: 0 auto; padding: 24px var(--page-pad) 80px; }
.admin-nav { display: flex; gap: 18px; align-items: center; padding: 12px var(--bar-pad); background: #fff; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--muted); flex-wrap: wrap; }
.admin-nav a.on { color: var(--magenta); font-weight: 600; }
.admin-nav a:hover { color: var(--magenta); }
.admin-nav .spacer { flex: 1; }
.admin-title { font-size: 26px; margin: 18px 0 14px; }
.panel { background: #fff; border: 1px solid var(--card-border); border-radius: 14px; padding: 18px 20px; margin-bottom: 18px; box-shadow: var(--shadow-card); }
.panel h3 { font-size: 17px; font-weight: 600; margin-bottom: 12px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); }
.field.full { grid-column: 1 / -1; }
.field input[type="text"], .field input[type="email"], .field input[type="password"], .field input[type="number"], .field input[type="url"],
.field select, .field textarea {
  border: 1px solid var(--chip-border); border-radius: 9px; padding: 9px 12px; font-size: 14px;
  font-family: var(--font-body); color: var(--plum); background: var(--bg); outline: none;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--magenta); }
.field textarea { min-height: 74px; resize: vertical; }
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.btn-row { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.btn-danger { background: none; border: 1px solid #f1c7c0; color: var(--pdf); padding: 7px 15px; border-radius: 18px; font-size: 12px; }
.btn-danger:hover { background: #fdf1ef; }
.btn-ghost { background: none; border: 1px solid var(--chip-border); color: var(--muted); padding: 7px 15px; border-radius: 18px; font-size: 12px; display: inline-block; }
.btn-ghost:hover { border-color: var(--soft); }
table.list { width: 100%; border-collapse: collapse; font-size: 13px; }
table.list th { text-align: left; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--soft); padding: 8px; border-bottom: 1px solid var(--line); }
table.list td { padding: 9px 8px; border-bottom: 1px solid #f5ecf1; vertical-align: middle; }
table.list tr:hover td { background: var(--row-hover); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat { background: #fff; border: 1px solid var(--card-border); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow-card); }
.stat .n { font-family: var(--font-head); font-weight: 700; font-size: 26px; color: var(--magenta); }
.stat .l { font-size: 11px; color: var(--soft); font-family: var(--font-mono); }
.tag { font-size: 10px; font-family: var(--font-mono); padding: 3px 8px; border-radius: 10px; background: #f3e7f0; color: var(--muted); }
.tag.admin { background: var(--magenta); color: #fff; }
.auth-card { max-width: 400px; margin: 60px auto; background: #fff; border: 1px solid var(--card-border); border-radius: 18px; padding: 30px; box-shadow: var(--shadow-card-hover); }
.auth-card h1 { font-size: 24px; margin-bottom: 4px; }
.auth-card .sub { margin-bottom: 18px; }
.auth-card .field { margin-bottom: 12px; }
.error-note { background: #fdf1ef; border: 1px solid #f1c7c0; color: var(--pdf); border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 14px; }
.note { background: var(--hero-tint); border: 1px solid var(--chip-border); border-radius: 10px; padding: 10px 14px; font-size: 13px; color: var(--ink-soft); }
.code { font-family: var(--font-mono); font-size: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; word-break: break-all; display: block; }
.inline-form { display: inline; }
.version-block { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; background: var(--bg); }
.version-block .vhead { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }

/* --- Hymn-book variants (variant-first files panel) --- */
.add-variant-form {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1px dashed var(--line); border-radius: 12px; padding: 10px 14px; margin-bottom: 16px;
}
.av-label { flex: 0 0 auto; }
.av-lang { width: 220px; }
.variant-block .vhead { margin-bottom: 0; }
.variant-toggle {
  flex: 1; display: flex; align-items: center; gap: 9px; min-width: 0;
  background: none; border: 0; padding: 4px 2px; cursor: pointer; text-align: left; color: inherit; font: inherit;
}
.variant-toggle:hover .variant-caret { color: var(--magenta); }
.variant-toggle strong { font-size: 14px; }
.variant-caret { color: var(--soft); font-size: 11px; transition: transform .15s ease; }
.variant-block:has(.variant-body:not([hidden])) .variant-caret { transform: rotate(90deg); }
.variant-body { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.variant-settings-form {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px dashed var(--line);
}
.variant-upload-fields { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.variant-upload-fields .target-select { flex: 0 0 auto; }
.variant-upload-fields .notes-input { flex: 1; min-width: 200px; }
.ver-row { margin-top: 12px; }
.ver-caption { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; flex-wrap: wrap; }
.ver-caption .ver-meta { font-size: 11px; color: var(--soft); }
.ver-caption .ver-notes { flex: 1; min-width: 180px; padding: 5px 9px; font-size: 12px; }
.ver-row .list { margin-top: 0; }

/* Image focus (pan/zoom) needs clipped frames everywhere images render */
.gcard-img, .detail-hero, .acard-img { overflow: hidden; }

/* ============================================================
   Admin — content browser, drag & drop, dropzones, image widgets
   ============================================================ */
.acrumbs { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--soft); margin: 16px 0 0; flex-wrap: wrap; }
.acrumbs a:hover { color: var(--magenta); }
.acrumbs .here { color: var(--magenta); }
.ahead { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.ahead .admin-title { margin: 12px 0 10px; }
.ahead-actions { margin-top: 0; }
.asec { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--soft); margin: 18px 2px 10px; }
.asec-hint { text-transform: none; letter-spacing: 0; color: var(--faint); }
.panel-hint { font-size: 11px; color: var(--soft); font-weight: 400; }
.btn-ghost.on { border-color: var(--magenta); color: var(--magenta); }

/* --- admin cards grid --- */
.acard-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.acard {
  position: relative; background: var(--card); border: 1px solid var(--card-border); border-radius: 14px;
  overflow: hidden; box-shadow: var(--shadow-card); cursor: pointer; user-select: none;
  transition: transform .15s ease, box-shadow .15s ease, outline-color .15s ease;
  outline: 2px solid transparent;
}
.acard:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.acard.dragging { opacity: .45; }
.acard-img { height: 110px; position: relative; }
.acard-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acard-img .card-ph span { font-size: 30px; }
.acard-kind {
  position: absolute; left: 8px; top: 8px; font-family: var(--font-mono); font-size: 9px;
  background: rgba(255,255,255,.88); color: var(--muted); border-radius: 8px; padding: 2px 7px;
}
.acard-kind.draft { background: var(--pdf); color: #fff; }
.acard-body { padding: 10px 12px 12px; }
.acard-title { font-family: var(--font-head); font-weight: 600; font-size: 14px; line-height: 1.3; }
.acard-sub { font-size: 10px; color: var(--soft); margin-top: 3px; }
.acard-acts {
  position: absolute; right: 6px; top: 6px; display: none; gap: 4px;
}
.acard:hover .acard-acts { display: flex; }
.acard-acts button {
  border: none; border-radius: 8px; background: rgba(255,255,255,.92); color: var(--plum);
  width: 26px; height: 26px; font-size: 13px; box-shadow: 0 2px 8px rgba(74,52,68,.25);
}
.acard-acts button:hover { background: var(--magenta); color: #fff; }
.acard-check {
  position: absolute; left: 8px; top: 8px; z-index: 2; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 1.5px solid var(--chip-border); color: transparent;
  display: none; align-items: center; justify-content: center; font-size: 12px;
}
.selecting .acard[data-no-select] { opacity: .35; pointer-events: none; }
.selecting .acard .acard-check { display: flex; }
.selecting .acard .acard-acts { display: none !important; }
.selecting .acard .acard-kind { display: none; }
.acard.selected { outline-color: var(--magenta); }
.acard.selected .acard-check { background: var(--magenta); border-color: var(--magenta); color: #fff; }

/* --- bulk bar --- */
.bulkbar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 20px; z-index: 70;
  background: var(--plum); color: #fff; border-radius: 30px; padding: 10px 16px;
  display: flex; align-items: center; gap: 12px; box-shadow: 0 14px 40px rgba(74,52,68,.4);
}
.bulkbar .mono { font-size: 12px; }
.bulkbar .btn-danger { background: #fff; }
.bulkbar .btn-ghost { color: #eee; border-color: rgba(255,255,255,.35); }

/* --- dropzones --- */
.dropzone {
  border: 1.5px dashed var(--chip-border); border-radius: 12px; padding: 18px 16px;
  text-align: center; font-size: 13px; color: var(--muted); background: var(--bg);
  cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.dropzone:hover { border-color: var(--soft); }
.dropzone.dz-over { border-color: var(--magenta); background: var(--hero-tint); color: var(--magenta); }
.dropzone.dz-busy { border-style: solid; border-color: var(--cyan); color: var(--cyan); cursor: progress; }
.dropzone.dz-slim { padding: 10px 14px; flex: 1; min-width: 220px; }
.dz-form { margin: 6px 0 14px; }
.dz-form-fields { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.dz-form-fields input, .inline-edit {
  border: 1px solid var(--chip-border); border-radius: 9px; padding: 8px 11px; font-size: 13px;
  font-family: var(--font-body); color: var(--plum); background: #fff; outline: none;
}
.dz-form-fields input:focus, .inline-edit:focus { border-color: var(--magenta); }
.dz-btn { cursor: pointer; }
.drop-hint { outline: 2px dashed var(--magenta); outline-offset: 2px; border-radius: 8px; background: var(--hero-tint); }

/* --- toast --- */
.toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 90; background: var(--plum); color: #fff;
  border-radius: 12px; padding: 10px 16px; font-size: 13px; opacity: 0; transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease; max-width: 340px;
}
.toast.show { opacity: 1; transform: none; }
.toast.error { background: var(--pdf); }

/* --- admin modal --- */
.amodal { z-index: 80; }
.amodal-box {
  position: relative;
  background: #fff; border-radius: 16px; width: min(460px, 100%); max-height: 86vh;
  display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.3);
}
/* Busy state: the whole modal is disabled and covered while an operation runs. */
.amodal-box.is-busy { pointer-events: none; }
.amodal-busy {
  position: absolute; inset: 0; z-index: 5; border-radius: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: rgba(255,255,255,.78); backdrop-filter: blur(3px);
  font-family: var(--font-mono); font-size: 13px; color: var(--muted); text-align: center; padding: 0 20px;
}
.amodal-busy-spin {
  width: 42px; height: 42px; border-radius: 50%;
  border: 4px solid var(--chip-border); border-top-color: var(--magenta);
  animation: spin 1s linear infinite;
}
.amodal-box-wide { width: min(640px, 100%); }
.amodal-body { padding: 16px 18px 18px; overflow-y: auto; }
.amodal-body .field { margin-bottom: 12px; }
.amodal-close { border: none; }
.modal-hint { font-size: 10px; color: var(--soft); }
.move-select { font-family: var(--font-body); font-size: 13px; }
.move-select option { padding: 4px 6px; }
.gen-attach-list { font-size: 11px; color: var(--soft); margin-top: 6px; word-break: break-all; }

/* --- image widgets --- */
.imgw-row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; }
.imgw { flex: 1; min-width: 220px; max-width: 380px; }
.imgw-label { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.imgw-hint { font-size: 10px; color: var(--faint); }
.imgw-frame {
  position: relative; border-radius: 12px; overflow: hidden; background: var(--bg);
  border: 1px solid var(--card-border); cursor: grab; width: 100%;
}
.imgw-frame.panning { cursor: grabbing; }
.imgw-frame img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.imgw-frame.dz-over { outline: 2px dashed var(--magenta); outline-offset: -2px; }
.imgw-frame.dz-over .imgw-drophint { display: flex; }
.imgw-drophint {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  background: rgba(251,238,246,.85); color: var(--magenta); font-size: 13px; font-weight: 600;
  pointer-events: none;
}
.imgw-empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--faint); font-size: 12px; font-family: var(--font-mono);
}
.imgw-spinner {
  position: absolute; inset: 0; background: rgba(255,255,255,.6);
}
.imgw-spinner::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px;
  border: 3px solid var(--chip-border); border-top-color: var(--magenta); border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.imgw-tools { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
/* The zoom slider takes the full row so Change / Generate / Use cover / Remove
   stay together on one line even in a narrow column. */
.imgw-zoom { flex: 1 0 100%; accent-color: var(--magenta); }
.imgw-tools button { padding: 6px 11px; font-size: 11px; white-space: nowrap; }
.imgw-status { font-size: 10px; color: var(--cyan); }

/* --- AI generate modal: preview / busy / refine --- */
.gen-preview { margin: 0 0 14px; }
.gen-preview-img {
  display: block; width: 100%; max-height: 340px; object-fit: contain;
  border-radius: 10px; background: rgba(0,0,0,.04);
}
.gen-usecurrent, .gen-usecover {
  display: flex; align-items: center; gap: 8px; margin: 2px 0 12px;
  font-size: 13px; color: var(--muted); cursor: pointer;
}
.gen-usecurrent input, .gen-usecover input { accent-color: var(--magenta); }

/* --- tracks & recordings --- */
.tracklist-admin { margin-top: 10px; }
.trow {
  display: flex; align-items: center; gap: 10px; padding: 5px 6px; border-radius: 9px;
  background: #fff; border: 1px solid transparent; margin-bottom: 3px;
}
.trow:hover { border-color: var(--chip-border); }
.trow.dragging { opacity: .45; }
/* Hymn number(s): editable, and wide enough for a merged pair ("12-13"). */
.trow-no {
  width: 62px; flex: none; text-align: center; font-size: 12px;
  padding: 6px 4px; color: var(--muted); font-family: var(--font-mono);
}
.trow-no::placeholder { color: var(--faint); }
.trow-title { flex: 1; min-width: 0; }
.tracklist-hint { margin: 0 0 8px; line-height: 1.5; }
.tracklist-hint b { color: var(--muted); font-weight: 600; }
.trow-meta { font-size: 11px; color: var(--soft); width: 60px; text-align: right; }
.rec-title { font-weight: 600; min-width: 220px; }
.rec-year { width: 72px; }
.version-block.dragging { opacity: .45; }
.doccat-grip { cursor: grab; color: var(--faint); font-size: 14px; padding: 0 2px; }
.doccat-grip:active { cursor: grabbing; }

/* recordings list — compact rows; track editing happens in a modal */
.rec-list { margin-top: 6px; }
.rec-row {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; margin-bottom: 6px;
  border: 1px solid var(--line); border-radius: 11px; background: var(--bg);
}
.rec-row:hover { border-color: var(--chip-border); }
.rec-row.dragging { opacity: .45; }
.rec-row-title { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-row-year { width: 52px; color: var(--soft); }
.rec-row-count { white-space: nowrap; }
.rec-edit .form-grid { margin-bottom: 4px; }
.rec-edit-foot { justify-content: flex-end; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }

/* --- documents manager --- */
.docs-admin .doclist-admin { min-height: 8px; margin: 6px 0; }
.docrow-admin {
  padding: 6px 8px; border: 1px solid var(--line);
  border-radius: 10px; background: #fff; margin-bottom: 5px;
}
.docrow-admin.dragging { opacity: .45; }
.docrow-head { display: flex; align-items: center; gap: 10px; }
.docrow-toggle { flex: 0 0 auto; }
.docrow-admin:has(.docrow-body:not([hidden])) .docrow-head .variant-caret { transform: rotate(90deg); }
.docrow-body { margin-top: 8px; padding: 10px 8px 6px; border-top: 1px solid var(--line); }
.docrow-body .add-variant-form { margin-bottom: 12px; }
.docrow-body .variant-block { background: var(--bg); }
.doc-titles { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.doc-title-lang { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; color: var(--soft); }
.doc-title-lang .inline-edit { width: 260px; }
.doc-title { flex: 1; border: 1px solid transparent; border-radius: 8px; padding: 6px 9px; font-size: 13px; font-family: var(--font-body); color: var(--plum); background: transparent; outline: none; }
.doc-title:hover, .doc-title:focus { border-color: var(--chip-border); background: #fff; }
.docrow-files { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.doccat { border: 1px solid var(--line); border-radius: 12px; background: var(--bg); padding: 8px 10px; margin: 8px 0; }
.doccat.dragging { opacity: .45; }
.doccat-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 2px; border-radius: 8px; }
.doccat-name { font-family: var(--font-head); font-weight: 600; font-size: 14px; color: var(--plum); border: 1px solid transparent; border-radius: 8px; padding: 5px 9px; background: transparent; outline: none; min-width: 140px; }
.doccat-name:hover, .doccat-name:focus { border-color: var(--chip-border); background: #fff; }
.doccat-count { font-size: 10px; color: var(--soft); }
.doccat-acts { display: flex; gap: 6px; margin-left: auto; align-items: center; }
.doccat-body { padding: 2px 4px 2px 18px; }
.doccat-list { min-height: 4px; }

/* --- public doc categories --- */
.doc-cat { margin: 18px 0; }
.doc-cat-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.doc-cat-name { font-family: var(--font-head); font-weight: 700; font-size: 19px; }
.doc-cat-count { font-size: 11px; color: var(--faint); }
.doc-cat-nest { margin-left: 22px; border-left: 2px solid var(--line); padding-left: 18px; }

@media (max-width: 1000px) { .acard-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .acard-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .center-grid { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
  /* Stacked, the files/versions pane leads: the tracklist runs to 50+ rows and
     would otherwise bury the book downloads under a full screen of scrolling. */
  .detail-right { order: 1; border-bottom: 1px solid var(--line); }
  .detail-grid.files-only .detail-right { border-bottom: none; }
  .detail-left { order: 2; border-right: none; }
  .searchbox { min-width: 0; width: 100%; }
}
/* Below ~760px the nav collapses into the drawer; the burger is all the bar
   needs, so the full wordmark stays visible next to the emblem. */
@media (max-width: 760px) {
  .topnav { display: none; }
  .nav-burger { display: inline-flex; }
}
@media (max-width: 580px) {
  /* One gutter for the whole page: every surface reads --page-pad. */
  :root { --page-pad: 16px; }
  .card-grid { grid-template-columns: 1fr; }
  .topbar { padding-block: 12px; }
  .brand-mark { width: 40px; height: 40px; }
  .brand { gap: 10px; }
  .brand-pre { font-size: 10px; }
  .brand-name { font-size: 18px; }
  .detail-text h1 { font-size: 32px; }
  .detail-text-inline h1 { font-size: 30px; }
  .book-cover { width: 92px; height: 124px; }
  .detail-hero-inner { gap: 14px; }
  .hero h1 { font-size: 28px; }
  /* keep the player one row: the progress bar already tells the time */
  .player { gap: 6px; padding: 8px 12px; }
  .pl-time { display: none; }
  .pl-skip { padding: 6px 3px; }
}

/* ---------- PWA install recommendation ---------- */
/* Small card anchored to the bottom. Above the player (63) and modals (60/62)
   but below toasts (90). Slides up when .show lands. */
.pwa-install {
  position: fixed; left: 50%; bottom: 16px; transform: translate(-50%, 12px);
  z-index: 85; width: min(420px, calc(100vw - 24px));
  opacity: 0; transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.pwa-install.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.pwa-card {
  position: relative; display: flex; gap: 14px; align-items: flex-start;
  background: var(--card); border: 1px solid var(--card-border); border-radius: 16px;
  box-shadow: var(--shadow-card-hover); padding: 16px 18px;
}
.pwa-icon { width: 48px; height: 48px; border-radius: 12px; flex: none; }
.pwa-main { flex: 1; min-width: 0; }
.pwa-title { font-family: var(--font-head); font-weight: 700; font-size: 15px; }
.pwa-body { font-size: 13px; color: var(--ink-soft); margin-top: 3px; }
.pwa-steps { font-size: 13px; color: var(--ink-soft); margin-top: 3px; }
.pwa-steps-title { font-weight: 600; color: var(--plum); }
.pwa-steps ol { margin: 6px 0 0; padding-left: 18px; }
.pwa-steps li { margin: 4px 0; }
.pwa-ios-icon { color: var(--cyan); font-weight: 700; }
.pwa-actions { display: flex; gap: 8px; margin-top: 10px; }
.pwa-btn {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 7px 16px; border-radius: 18px; border: 0;
  background: var(--magenta); color: #fff;
}
.pwa-btn-later { background: none; color: var(--muted); }
.pwa-btn-later:hover { color: var(--magenta); }
.pwa-close {
  position: absolute; top: 8px; right: 10px; background: none; border: 0;
  font-size: 18px; line-height: 1; color: var(--soft); cursor: pointer; padding: 4px;
}
.pwa-close:hover { color: var(--magenta); }

/* ---------- Page transitions ---------- */
/* A plain crossfade between pages. This covers real full loads; PJAX swaps
   get the same default crossfade via document.startViewTransition in vt.js.
   Browsers without support just navigate normally. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}