/* ============================================================
   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); }
/* Language dropdown (desktop topbar + mobile drawer) */
.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; cursor: pointer;
}
.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-dd { align-self: flex-start; }
.nav-drawer .lang-dd-btn { padding: 8px 14px; font-size: 13px; }
/* In the drawer the dropdown opens below-left of its trigger, not pinned to
   the topbar corner like the desktop version. */
.nav-drawer .lang-dd-menu { right: auto; left: 0; }
.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); }
/* "Private" — only ever rendered for staff who may read the document */
.doc-private-badge {
  display: inline-block; margin-left: 8px; padding: 2px 6px; border-radius: 4px;
  font-size: 9px; letter-spacing: .06em; text-transform: uppercase;
  background: var(--plum); color: #f3e7f0; vertical-align: 2px;
}
.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; }
.footer-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* "Add content" button reuses the footer-pill look but is a <button>. */
.guest-add-btn { background: none; color: inherit; font: inherit; font-size: 13px; cursor: pointer; opacity: .7; }
.guest-add-btn:hover { opacity: 1; border-color: rgba(255,255,255,.4); }
/* The click boots a session and lazy-loads admin.js + wizard.js, so the modal is
   a beat away: the ＋ becomes a spinner until the wizard (or password) opens. */
.guest-add-btn.loading { pointer-events: none; opacity: .55; }
.guest-add-btn .ga-spin { display: none; }
.guest-add-btn.loading .ga-ico { display: none; }
.guest-add-btn.loading .ga-spin {
  display: inline-block; width: 11px; height: 11px; vertical-align: -1px;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  animation: spin .7s linear infinite;
}

.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.
   position: relative so pdf-page offsetTop is measured against it (search). */
.preview-doc { flex: 1; overflow: auto; background: #eceae7; overscroll-behavior: contain; position: relative; }
.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%;
  position: relative; /* anchors the .pv-hlt search overlays */
}
.preview-doc div.pdf-page canvas { display: block; width: 100%; height: auto; }
/* In-document search: bar under the modal header + match highlights. */
.pv-search { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--line); }
.pv-search[hidden] { display: none !important; }
.pv-search input {
  flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 10px; font: inherit; font-size: 14px; outline: none; background: #fff;
}
.pv-search input:focus { border-color: var(--magenta); }
.pv-search-count { font-size: 12px; color: var(--muted); white-space: nowrap; min-width: 44px; text-align: center; }
#preview-search-btn svg, .pv-search .pl-skip svg { width: 18px; height: 18px; display: block; fill: currentColor; }
.preview-doc mark.pv-hit { background: #ffe063; color: inherit; padding: 0; }
.preview-doc mark.pv-hit.pv-cur { background: #ff9d2e; }
.pdf-page .pv-hlt { position: absolute; background: rgba(255, 213, 60, .45); border-radius: 2px; pointer-events: none; }
.pdf-page .pv-hlt.pv-cur { background: rgba(255, 145, 20, .5); box-shadow: 0 0 0 2px rgba(255, 145, 20, .6); }
/* 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); }
.nav-badge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--magenta); color: #fff; font-size: 11px; font-weight: 700; text-align: center; line-height: 18px; }
.wiz-review-banner { background: rgba(214,51,132,.09); border: 1px solid rgba(214,51,132,.3); color: var(--magenta); padding: 8px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 12px; }
.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; }
.setup-steps { list-style: none; display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; padding: 0; font-size: 12px; }
.setup-steps li { display: flex; align-items: center; gap: 7px; padding: 6px 14px 6px 8px; border: 1px solid var(--card-border); border-radius: 999px; color: var(--muted); background: #fff; }
.setup-steps li.on { border-color: var(--magenta); color: var(--magenta); font-weight: 600; }
.setup-steps li.done { color: var(--muted); }
.setup-step-no { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--card-border); color: #fff; font-weight: 600; }
.setup-steps li.on .setup-step-no { background: var(--magenta); }
.setup-steps li.done .setup-step-no { background: var(--magenta); }
.setup-steps li.done .setup-step-no::after { content: '✓'; }
.setup-steps li.done .setup-step-no { font-size: 0; }
.setup-steps li.done .setup-step-no::after { font-size: 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; }
/* Aligned rows — every field puts its label, control and hint on the same three
   subgrid rows, so the controls line up across a row however tall a neighbour's
   label or hint runs. Markup must be: .field-label, control, optional
   .field-hint. Without subgrid the fields keep the plain flex stacking. */
@supports (grid-template-rows: subgrid) {
  .form-grid.aligned > .field { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 5px; }
}
.field-hint { font-family: var(--font-mono); font-size: 10px; line-height: 1.5; color: var(--soft); }
.field-hint-lead { display: block; margin-bottom: 3px; color: var(--muted); }
/* Standalone admin input (outside a .field label) — invite email, list search… */
.a-input {
  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;
}
.a-input:focus { border-color: var(--magenta); }
.a-input::placeholder { color: var(--soft); }
/* Pill select — the website's dropdown look (mirrors .enr-lang-select): rounded
   pill, magenta-accented chevron and focus ring. Used for admin filters such as
   the activity-log center picker. */
.a-filter { display: flex; align-items: center; gap: 9px; }
.a-filter-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--soft); }
.a-select {
  appearance: none; -webkit-appearance: none;
  padding: 8px 32px 8px 15px; border-radius: 999px; border: 1px solid var(--chip-border);
  background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a7183' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 13px center;
  color: var(--plum); font-family: var(--font-body); font-size: 13px; cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.a-select:hover { border-color: var(--soft); }
.a-select:focus { outline: none; border-color: var(--magenta); box-shadow: 0 0 0 3px rgba(207, 31, 143, .1); }
.op-invite { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.op-invite .a-input { flex: 1 1 260px; min-width: 220px; }
.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); }
/* Enrollments search — reuses the shared .searchbox component */
.enr-searchform { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; }
.enr-searchform .searchbox { flex: 1 1 340px; max-width: 460px; }
.searchbox-clear {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; font-size: 16px; line-height: 1;
  color: var(--soft); text-decoration: none;
}
.searchbox-clear:hover { background: var(--row-hover); color: var(--magenta); }
/* Enrollment submissions card — searchable, paginated list */
.enr-subs-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.enr-subs-head h3 { font-size: 17px; font-weight: 600; }
.enr-search { flex: 0 1 300px; min-width: 200px; }
.enr-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
.enr-pager .enr-pageinfo { font-size: 12px; color: var(--soft); }
.enr-pager button:disabled { opacity: .4; cursor: default; }
/* Save action pinned to the bottom of the enrollment config modal (the modal
   body is the scroll container, so a sticky footer stays in reach). */
.enroll-save-bar {
  position: sticky; bottom: -18px; z-index: 2;
  margin: 22px -18px -18px; padding: 14px 18px;
  background: #fff; border-top: 1px solid var(--line);
}
/* Submission documents cell — one line per row: name + preview/download icons
   + a language switch (original answers ⇄ leader's translation). */
.enr-docs { text-align: right; white-space: nowrap; }
.enr-doc { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; margin-left: 16px; }
.enr-doc-name { font-size: 12px; color: var(--muted); margin-right: 1px; }
.enr-doc-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border: 1px solid var(--chip-border); border-radius: 8px; background: #fff; color: var(--muted);
  cursor: pointer; padding: 0;
}
.enr-doc-btn:hover { border-color: var(--magenta); color: var(--magenta); }
.enr-doc-btn svg { width: 15px; height: 15px; fill: currentColor; display: block; }
.enr-segs { display: inline-flex; vertical-align: middle; border: 1px solid var(--chip-border); border-radius: 8px; overflow: hidden; }
.enr-seg {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  padding: 4px 7px; border: none; background: #fff; color: var(--soft); cursor: pointer; line-height: 1.2;
}
.enr-seg + .enr-seg { border-left: 1px solid var(--chip-border); }
.enr-seg.on { background: var(--magenta); color: #fff; }
.enr-lang { font-size: 10px; color: var(--soft); text-transform: uppercase; letter-spacing: .04em; vertical-align: middle; }
.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; }
/* New-center invite: the "how to open a center" walkthrough sits above the
   sign-up form, so the card widens to give the 16:9 player room to breathe. */
.auth-card.wide { max-width: 560px; }
.auth-video { position: relative; aspect-ratio: 16 / 9; margin-bottom: 18px; border-radius: 12px; overflow: hidden; border: 1px solid var(--card-border); background: #000; }
.auth-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.auth-video-title { font-size: 13px; color: var(--ink-soft); margin-bottom: 8px; }
.error-note { background: #fdf1ef; border: 1px solid #f1c7c0; color: var(--pdf); border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 14px; }
.ok-note { background: #eef8f0; border: 1px solid #bfe3c8; color: #1f7a44; 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; }
/* The variant row mixes .a-input text fields with an .a-select dropdown; trim
   both to the panel's 13px scale so they end up the same height. */
.av-lang, .type-custom { padding: 8px 12px; font-size: 13px; }
.av-lang { width: 220px; }
.type-custom { width: 240px; }
.type-select { max-width: 220px; }

/* Language picker button — looks like a select, opens the languages dialog */
.lang-btn {
  display: inline-flex; align-items: center; gap: 7px; max-width: 300px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  padding: 7px 12px; font: inherit; font-size: 13px; cursor: pointer; color: inherit;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lang-btn::after { content: '▾'; font-size: 10px; color: var(--soft); }
.lang-btn:hover { border-color: var(--soft); }

/* Languages dialog */
.lang-dialog { display: flex; flex-direction: column; gap: 10px; }
.lang-search { width: 100%; }
.lang-options { max-height: 300px; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.lang-option {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  border-radius: 8px; cursor: pointer; font-size: 13px;
}
.lang-option:hover { background: var(--line); }
.lang-option.on { background: var(--line); }
.lang-option .lang-name { flex: 1; }
.lang-option .lang-code { font-size: 11px; color: var(--soft); }
.lang-dialog-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* Tag editor — chips + inline input, dropdown of already-used tags */
.tag-editor {
  position: relative; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px;
  min-width: 240px; max-width: 420px; min-height: 34px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  padding: 3px 8px; cursor: text;
}
.tag-editor:focus-within { border-color: var(--soft); }
.te-chips { display: contents; }
.te-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--plum); color: #fff; border-radius: 999px;
  padding: 2px 4px 2px 10px; font-size: 12px; line-height: 18px;
}
.te-chip-x {
  background: none; border: 0; color: inherit; opacity: .75; cursor: pointer;
  font: inherit; font-size: 13px; line-height: 1; padding: 2px 5px; border-radius: 50%;
}
.te-chip-x:hover { opacity: 1; background: rgba(255,255,255,.2); }
.te-input {
  flex: 1; min-width: 90px; border: 0 !important; outline: none; background: none;
  padding: 4px 2px !important; font: inherit; font-size: 13px;
}
.te-menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 180px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 4px; max-height: 220px; overflow: auto;
  display: flex; flex-direction: column;
}
.te-item {
  background: none; border: 0; text-align: left; padding: 7px 10px; border-radius: 7px;
  font: inherit; font-size: 13px; cursor: pointer; color: inherit;
}
.te-item:hover { background: var(--line); }
.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; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.variant-upload-fields .notes-input { flex: 1; min-width: 200px; }

/* Segmented toggle — radio pills (e.g. "add to current" vs "start new version") */
.seg { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--chip-border); border-radius: 999px; background: var(--bg); }
.seg input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.seg-opt {
  display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px;
  font-size: 13px; color: var(--muted); cursor: pointer; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.seg-opt:hover { color: var(--plum); }
.seg-opt:has(input:checked) { background: var(--magenta); color: #fff; }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--magenta); outline-offset: 2px; }

/* Older book versions fold away behind this toggle; only the current one shows */
.old-vers-toggle {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-mono, monospace); font-size: 12px; color: var(--soft);
}
.old-vers-toggle:hover { color: var(--magenta); }
.variant-body:has(.old-vers:not([hidden])) .old-vers-toggle .variant-caret { transform: rotate(90deg); }
.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; }
.dropzone.dz-big { padding: 38px 16px; font-size: 14px; }
.dz-form { margin: 6px 0 14px; }
.dz-form-fields { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
/* a captioned input: small label text above the field */
.dz-field { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; color: var(--soft); }
.dz-field.grow { flex: 1; min-width: 180px; }
.dz-field input { width: 100%; }
.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; }
/* chunked-upload progress (inside a busy dropzone) */
.dz-prog { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dz-prog-text { font-variant-numeric: tabular-nums; }
.dz-prog-bar {
  width: min(420px, 90%); height: 6px; border-radius: 3px;
  background: var(--chip-border); overflow: hidden;
}
.dz-prog-bar i { display: block; height: 100%; width: 0; background: var(--cyan); border-radius: 3px; transition: width .3s ease; }
.dz-prog-btns { display: flex; gap: 8px; }
.dz-prog-btns button {
  border: 1px solid var(--chip-border); background: #fff; color: var(--plum);
  border-radius: 9px; padding: 4px 12px; font-size: 12px; font-family: var(--font-body); cursor: pointer;
}
.dz-prog-btns button:hover { border-color: var(--soft); }
.dz-prog-btns button:disabled { opacity: .5; cursor: default; }
.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;
  pointer-events: auto; /* the box is pointer-events:none while busy — the overlay (pause/cancel) must still click */
}
.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;
}
/* Pinned to the modal's bottom, out of the flex flow so it doesn't hijack
   justify-content: without this the tip's auto top-margin would absorb all the
   free space and shove the spinner/status block to the top instead of center. */
.amodal-busy-tip {
  position: absolute; left: 20px; right: 20px; bottom: 12px; margin: 0 auto; max-width: 340px;
  font-size: 12px; color: var(--soft); line-height: 1.5;
  padding: 8px 12px; border-radius: 10px; background: var(--chip-bg, rgba(0,0,0,.04));
}
.amodal-busy-tip a {
  display: block; width: fit-content; margin: 6px auto 0;
  background: none; border: none; padding: 2px; color: var(--magenta) !important;
  font-weight: 600; text-decoration: none;
}
.amodal-busy-tip a:hover { text-decoration: underline; filter: none; }
/* Finite progress: the bar IS the brand rainbow, and <i> is a cover that
   slides right (left: NN%) to reveal it — the gradient never stretches. */
.amodal-busy-bar {
  position: relative; width: min(360px, 85%); height: 10px; border-radius: 5px;
  background: linear-gradient(90deg, #e23b2e, #f18a2a, #f2c53d, #5ab24e, #2ba6dd, #cf1f8f);
  overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.amodal-busy-bar i {
  position: absolute; top: 0; bottom: 0; right: 0; left: 0;
  background: var(--chip-border); transition: left .4s ease;
}
/* title above / stats below sit closer to the bar than the overlay's gap */
.amodal-busy-bar { margin: -6px 0; }
.amodal-busy-sub { font-size: 12px; color: var(--soft); font-variant-numeric: tabular-nums; }
.amodal-busy-btns { display: flex; gap: 10px; }
.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); }
/* confirm / alert / prompt dialogs (BFAdmin.confirm & friends) */
.dlg-msg { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0 0 4px; white-space: pre-line; }
.dlg-form .field { margin-top: 12px; }
.dlg-input { width: 100%; }
.dlg-btns { margin-top: 18px; }
.dlg-ok:disabled { opacity: .5; pointer-events: none; }
.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);
}
/* "Preview on site" affordance overlaid on the image itself (top-right). */
.imgw-preview-fab {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px; border: none; border-radius: 999px;
  background: rgba(0, 0, 0, .55); color: #fff; font-size: 11px; font-weight: 600;
  font-family: var(--font-body); line-height: 1; cursor: pointer;
  opacity: .9; transition: opacity .15s, background .15s;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.imgw-preview-fab:hover { opacity: 1; background: rgba(0, 0, 0, .78); }
.imgw-frame.dz-over .imgw-preview-fab { display: none; }
/* Nothing to preview on an empty slot. */
.imgw-frame:has(.imgw-empty) .imgw-preview-fab { display: none; }
.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-ref {
  display: flex; align-items: center; gap: 8px; margin: 2px 0 12px;
  font-size: 13px; color: var(--muted); cursor: pointer;
}
.gen-usecurrent input, .gen-ref input { accent-color: var(--magenta); }
.gen-refs .gen-ref { margin: 2px 0 6px; }
.gen-refs { margin: 0 0 12px; }
.gen-library { margin: 2px 0 12px; }
.gen-library-btn { font-size: 12px; }
.gen-library-list { font-size: 11px; color: var(--cyan); margin-top: 6px; }

/* --- on-site preview modal: page iframe with device-width switching --- */
.amodal-box.pvw-box {
  width: 96vw; max-width: none; height: 92vh;
  display: flex; flex-direction: column;
}
.pvw-box .amodal-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pvw { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.pvw-devices { display: flex; gap: 8px; flex: none; }
.pvw-dev { font-size: 12px; }
.pvw-dev.is-active { border-color: var(--magenta); color: var(--magenta); }
/* The stage clips the scaled iframe; the frame keeps its device width and is
   scaled down (transform) when wider than the stage. */
.pvw-stage {
  flex: 1; min-height: 0; overflow: hidden; position: relative;
  display: flex; justify-content: center; align-items: flex-start;
  background: var(--bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 10px;
}
/* Selector is more specific than `.modal iframe` (which sets flex:1 + width:100%)
   so flex:none wins and the JS-set inline width is honored. */
.pvw-stage .pvw-frame {
  flex: none; width: 1280px; border: 1px solid var(--card-border); border-radius: 8px;
  background: #fff; transform-origin: top center;
}

/* --- image picker: hinário images offered to a collection slot --- */
.imgpick .amodal-box-wide { width: min(760px, 100%); }
.imgpick-grid.ready {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px;
}
.imgpick-cell {
  display: block; padding: 0; border: 2px solid var(--card-border); border-radius: 10px;
  overflow: hidden; background: var(--bg); cursor: pointer; text-align: left;
}
.imgpick-cell:hover { border-color: var(--chip-border); }
.imgpick-cell.sel { border-color: var(--magenta); box-shadow: 0 0 0 2px rgba(214, 51, 132, .25); }
.imgpick-cell img { display: block; width: 100%; aspect-ratio: 15 / 9; object-fit: cover; }
.imgpick-cap {
  display: block; padding: 5px 8px; font-family: var(--font-mono); font-size: 10px;
  color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- 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; }
/* Play/pause preview: fixed width so ▶ ↔ ⏸ doesn't shift the row. */
.trow-play { flex: none; width: 34px; padding: 4px 0; text-align: center; border-radius: 9px; }
/* 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; }
/* Pinned to the bottom of the scrolling modal body: the negative bottom +
   margin let it cover the body's own 18px bottom padding, so tracks never
   peek out underneath while the list scrolls behind it. */
.rec-edit-foot {
  justify-content: flex-end; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
  position: sticky; bottom: -18px; z-index: 4;
  background: #fff; padding-bottom: 26px; margin-bottom: -18px;
}

/* --- 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); }
.doc-private { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; font-size: 10px; color: var(--soft); white-space: nowrap; cursor: pointer; }
.doc-private:has(input:checked) { color: var(--plum); font-weight: 600; }
.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; }
}

/* ================= "Add content" wizard ================= */
.nav-wizard { margin-left: auto; }
.wiz-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; min-height: 30px; }
.wiz-steps { font-size: 11px; color: var(--soft); flex: 1; }
.wiz-loading { padding: 30px 0; text-align: center; color: var(--soft); font-size: 13px; }
.wiz-note { font-size: 13px; color: var(--muted); margin: 4px 0 10px; }
.wiz-note-sep { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--chip-border); }
.wiz-choice {
  display: block; width: 100%; text-align: left; margin-bottom: 8px;
  background: var(--bg); border: 1px solid var(--chip-border); border-radius: 12px;
  padding: 12px 15px; cursor: pointer; color: var(--plum); font-family: var(--font-body);
}
.wiz-choice:hover { border-color: var(--magenta); background: #fff; }
.wiz-choice-title { display: block; font-size: 14px; font-weight: 600; }
.wiz-choice small { display: block; color: var(--soft); font-size: 12px; margin-top: 2px; }
.wiz-search {
  width: 100%; border: 1px solid var(--chip-border); border-radius: 9px; padding: 8px 12px;
  font-size: 13px; font-family: var(--font-body); color: var(--plum); background: #fff;
  outline: none; margin-bottom: 8px;
}
.wiz-list { max-height: 320px; overflow-y: auto; border: 1px solid var(--chip-border); border-radius: 10px; }
.wiz-item {
  display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: 9px 13px; font-size: 13px; color: var(--plum); font-family: var(--font-body);
  border-bottom: 1px solid var(--chip-border);
}
.wiz-item:last-child { border-bottom: none; }
.wiz-item:hover { background: var(--row-hover); }
.wiz-item-sub { font-size: 11px; color: var(--soft); }
.wiz-form { margin: 8px 0 12px; }
.wiz-form .field { margin-bottom: 12px; }
.checkline { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--plum); margin-bottom: 12px; cursor: pointer; }
.viswarn { margin: 4px 0 14px; padding: 8px 12px; border-radius: 10px; background: #fff8ec; border: 1px solid #f0d8a6; }
.viswarn p { margin: 0; font-size: 12.5px; color: #8a5a12; }
.viswarn p + p { margin-top: 4px; }
.wiz-actions { margin-top: 14px; }
.wiz-variant-block { border: 1px solid var(--chip-border); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.wiz-variant-block.wiz-block-active { border-color: var(--magenta); }
.wiz-block-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.wiz-block-title { font-size: 12px; font-weight: 600; color: var(--muted); }
.wiz-block-del { padding: 2px 9px; font-size: 11px; }
.wiz-block-fields { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.wiz-block-fields .field { flex: 1; min-width: 130px; margin-bottom: 0; }
.wiz-block-fields .checkline { margin-bottom: 0; align-self: flex-end; padding-bottom: 8px; }
.wiz-block-drop { font-size: 12px; text-align: left; }
.wiz-block-staged { cursor: default; }
.wiz-drop { margin-top: 14px; }
.wiz-staged {
  font-size: 12px; color: var(--muted); border: 1px dashed var(--chip-border); border-radius: 10px;
  padding: 10px 13px; margin-bottom: 12px; max-height: 160px; overflow-y: auto; line-height: 1.7;
}
.wiz-inline-new { display: flex; gap: 8px; margin-top: 10px; }
.wiz-inline-new input {
  flex: 1; border: 1px solid var(--chip-border); border-radius: 9px; padding: 8px 12px;
  font-size: 13px; font-family: var(--font-body); color: var(--plum); background: #fff; outline: none;
}
.wiz-images .imgw-row { display: flex; gap: 14px; flex-wrap: wrap; }
.wiz-success-head { font-size: 20px; font-weight: 600; color: var(--magenta); margin: 4px 0 12px; }
.wiz-success { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.wiz-success-item {
  display: block; padding: 9px 13px; border: 1px solid var(--chip-border); border-radius: 10px;
  font-size: 13px; color: var(--plum); background: var(--bg);
}
.wiz-success-item:hover { border-color: var(--magenta); }
.wiz-langs-slot { display: block; margin-top: 3px; }
.wiz-lang-btn { font-size: 12px; text-align: left; }
.wiz-lang-overlay {
  position: fixed; inset: 0; z-index: 90; background: rgba(58, 34, 52, 0.45);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.wiz-lang-box {
  background: #fff; border-radius: 14px; width: min(400px, 100%); max-height: 80vh;
  display: flex; flex-direction: column; gap: 10px; padding: 14px 16px;
  box-shadow: 0 18px 50px rgba(58, 34, 52, 0.35);
}
.wiz-lang-box .lang-options { flex: 1; }
.wiz-lang-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
.wiz-lang-foot .lang-code-preview { font-size: 11px; color: var(--soft); }
.wiz-block-default { margin: 0 0 0 auto; font-size: 12px; gap: 5px; }
/* wizard footer — the step's main action pinned to the dialog bottom */
.wiz-footer {
  position: sticky; bottom: -18px; z-index: 2;
  margin: 14px -18px -18px; padding: 12px 18px;
  background: #fff; border-top: 1px solid var(--chip-border);
  display: flex; align-items: center; gap: 8px;
}
.wiz-footer .wiz-skip { margin-left: auto; }
.wiz-rec-group { border: 1px solid var(--chip-border); border-radius: 12px; padding: 10px 14px; margin-bottom: 10px; }
.wiz-rec-files { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.wiz-rec-group .dz-form-fields { margin-bottom: 0; }
/* stage-1: the drop zone IS the stage; manual add is the quiet alternative */
.wiz-drop-hero { min-height: min(340px, 45vh); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 16px; text-align: center; padding: 30px 24px; }
.wiz-drop-hero .wiz-drop-sub { display: block; font-size: 12px; color: var(--soft); margin-top: 10px; max-width: 420px; line-height: 1.5; }
.wiz-manual { text-align: center; margin-top: 12px; }
.wiz-manual .btn-ghost { border: none; color: var(--soft); font-size: 12px; text-decoration: underline; }
.wiz-track { display: flex; gap: 8px; margin-bottom: 6px; }
.wiz-track-no { width: 64px; text-align: center; border: 1px solid var(--chip-border); border-radius: 9px; padding: 7px 8px; font-size: 12px; color: var(--plum); background: #fff; outline: none; }
.wiz-track-title { flex: 1; border: 1px solid var(--chip-border); border-radius: 9px; padding: 7px 11px; font-size: 13px; font-family: var(--font-body); color: var(--plum); background: #fff; outline: none; }
/* inline smart drop on the content pages */
.wiz-inline { display: flex; gap: 10px; align-items: stretch; margin: 4px 0 18px; }
.wiz-inline .wiz-page-drop { flex: 1; padding: 18px 20px; font-size: 14px; }
.wiz-inline .wiz-page-drop .wiz-drop-sub { display: block; font-size: 11px; color: var(--soft); margin-top: 5px; line-height: 1.5; }
.wiz-page-manual { white-space: nowrap; color: var(--soft); font-size: 12px; }
.wiz-item-prefer { background: var(--hero-tint); font-weight: 600; }
.wiz-file-chip {
  display: inline-block; margin: 2px 6px 2px 0; padding: 4px 10px;
  background: #fff; border: 1px solid var(--chip-border); border-radius: 14px;
  font-size: 12px; color: var(--plum); cursor: grab;
}
.wiz-file-chip:active { cursor: grabbing; }
.wiz-chip-hint { display: block; margin-top: 6px; font-size: 10px; }

/* ============================================================
   Participant enrollment (/f/<token>) — questionnaire + pledge
   ============================================================ */
.enr-body { display: block; background: var(--bg); }
.enr-top { text-align: center; padding: 34px 20px 0; }
.enr-emblem { width: 64px; height: 64px; }
.enr-org {
  font-family: var(--font-head); font-weight: 600; font-size: 13px;
  color: var(--brand-sub); letter-spacing: .04em; margin-top: 4px;
}
.enr-doc-title { font-family: var(--font-head); color: var(--magenta); font-size: 30px; margin: 4px 0 6px; }
.enr-for { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.enr-top .rainbow { max-width: 720px; margin: 0 auto; border-radius: 2px; }

.enr-wrap { max-width: 720px; margin: 0 auto; padding: 22px 16px 60px; }
.enr-card {
  background: var(--card); border: 1px solid var(--card-border); border-radius: 18px;
  box-shadow: var(--shadow-card); padding: 28px 30px 30px; position: relative;
}
.enr-foot { text-align: center; color: var(--faint); font-size: 12px; padding: 0 0 30px; }

/* progress */
.enr-progress { margin: 0 6px 14px; }
.enr-bar { height: 7px; background: var(--line); border-radius: 4px; overflow: hidden; }
.enr-bar i {
  display: block; height: 100%; width: 0; border-radius: 4px;
  background: linear-gradient(90deg, var(--magenta), var(--cyan));
  transition: width .4s ease;
}
[dir=rtl] .enr-bar i { background: linear-gradient(-90deg, var(--magenta), var(--cyan)); }
.enr-bar-label { font-size: 12px; color: var(--muted); margin-top: 5px; font-variant-numeric: tabular-nums; }

/* step pills */
.enr-steps { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.enr-step {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--chip-border);
  background: #fff; color: var(--muted); font-size: 12px; cursor: default; padding: 0;
}
.enr-step.done { background: var(--hero-tint); color: var(--magenta); border-color: var(--chip-border); cursor: pointer; }
.enr-step.on { background: var(--magenta); border-color: var(--magenta); color: #fff; font-weight: 700; }
.enr-step-title { font-family: var(--font-head); color: var(--plum); font-size: 22px; margin: 6px 0 18px; }

/* welcome */
.enr-dear { font-style: italic; color: var(--ink-soft); font-size: 16px; }
.enr-p { color: var(--ink-soft); font-size: 14.5px; }
.enr-save-note {
  background: var(--hero-tint); border: 1px solid var(--chip-border); border-radius: 12px;
  padding: 12px 16px; font-size: 13.5px; color: var(--plum);
}
.enr-langs { margin-top: 18px; }

/* fields */
.enr-field { margin-bottom: 20px; scroll-margin: 90px; }
.enr-field.enr-focus { animation: enr-glow 1.6s ease 1; border-radius: 10px; }
@keyframes enr-glow {
  0% { box-shadow: 0 0 0 6px rgba(207, 31, 143, .25); }
  100% { box-shadow: 0 0 0 6px rgba(207, 31, 143, 0); }
}
.enr-label { display: block; font-weight: 600; font-size: 14px; color: var(--plum); margin-bottom: 7px; }
.enr-req { color: var(--magenta); }
.enr-hint { font-size: 12.5px; color: var(--muted); margin: -3px 0 8px; }
.enr-subhead {
  font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--magenta);
  margin: 26px 0 14px; padding-top: 14px; border-top: 1px solid var(--line);
}
.enr-note {
  background: #fdf6ec; border: 1px solid #f3e2c8; border-radius: 12px;
  padding: 14px 16px; font-size: 12.5px; color: #7a6248; margin: 4px 0 20px;
}
.enr-input {
  width: 100%; padding: 10px 13px; border: 1px solid var(--chip-border); border-radius: 10px;
  font-family: var(--font-body); font-size: 14px; color: var(--plum); background: #fff;
}
.enr-input:focus { outline: none; border-color: var(--magenta); box-shadow: 0 0 0 3px rgba(207, 31, 143, .1); }
.enr-ta { resize: none; overflow: hidden; min-height: 52px; line-height: 1.5; }

/* chips & scales */
.enr-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.enr-chip {
  padding: 9px 18px; border-radius: 999px; border: 1px solid var(--chip-border);
  background: #fff; color: var(--plum); font-size: 13.5px; cursor: pointer;
  font-family: var(--font-body); transition: all .15s ease;
}
.enr-chip:hover { border-color: var(--soft); }
.enr-chip.on { background: var(--magenta); border-color: var(--magenta); color: #fff; font-weight: 600; }
.enr-chip-static { cursor: default; color: var(--muted); }
.enr-other-wrap { display: flex; gap: 8px; align-items: center; flex: 1; min-width: 200px; }
.enr-other { flex: 1; min-width: 120px; }
.enr-scale { display: flex; flex-wrap: wrap; gap: 6px; }
.enr-scale-btn {
  width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--chip-border);
  background: #fff; color: var(--plum); font-size: 14px; cursor: pointer; padding: 0;
}
.enr-scale-btn:hover { border-color: var(--soft); }
.enr-scale-btn.on { background: linear-gradient(135deg, var(--magenta), var(--cyan)); border-color: transparent; color: #fff; font-weight: 700; }

/* yes/no with conditional explanation */
.enr-yesno .enr-check-detail { margin-top: 10px; }
.enr-checkgroup-item .enr-check-detail { margin: 6px 0 4px 26px; }
/* checklists */
.enr-checklist { display: flex; flex-direction: column; gap: 7px; }
.enr-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--plum); cursor: pointer; }
.enr-check input { margin-top: 3px; accent-color: var(--magenta); width: 16px; height: 16px; flex-shrink: 0; }
.enr-check-detail { margin-top: 6px; }

/* medication block */
.enr-med-open { margin: 4px 0 6px; }
/* selected medications, listed on the form with their amount + frequency */
.enr-med-summary { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 4px; }
.enr-med-sel {
  border: 1px solid var(--chip-border); border-radius: 12px; background: #fff; padding: 10px 12px;
}
.enr-med-sel-head { display: flex; align-items: flex-start; gap: 10px; }
.enr-med-sel-name { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--plum); }
.enr-med-sel-rm {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: none;
  background: var(--row-hover); color: var(--plum); font-size: 18px; line-height: 1; cursor: pointer;
}
.enr-med-sel-rm:hover { background: var(--soft); color: #fff; }
.enr-med-item-detail { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.enr-med-item-detail .enr-input { flex: 1 1 130px; min-width: 0; padding: 8px 10px; font-size: 13px; }
.enr-med-confirm {
  margin-top: 14px;
  background: var(--hero-tint); border: 1px solid var(--chip-border); border-radius: 12px;
  padding: 12px 14px; font-weight: 600;
}
.enr-med-locked { opacity: .55; }
.enr-med-locked input { cursor: not-allowed; }
.enr-med-lock-hint { margin-top: 6px; color: var(--magenta); }

/* the medication modal (list + search) */
.enr-med-dialog { max-width: 560px; max-height: 82vh; }
.enr-med-dialog-head { font-size: 15px; font-weight: 700; color: var(--plum); }
.enr-med-dialog-list { flex: 1; gap: 2px; }
.enr-med-dialog-list .enr-med-item { padding: 9px 10px; border-radius: 8px; }
.enr-med-dialog-list .enr-med-item:hover { background: var(--row-hover); }
.enr-med-dialog-list .enr-med-item span { font-size: 13.5px; }
.enr-med-end {
  padding: 12px 10px 4px; text-align: center; font-size: 12.5px; color: var(--muted);
}
.enr-med-dialog-foot { display: flex; justify-content: flex-end; }

/* signature pad */
.enr-sig { margin: 18px 0 6px; }
.enr-sig-hint { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.enr-sig-pad {
  width: 100%; max-width: 560px; height: 170px; display: block;
  background: #fff; border: 1.5px dashed var(--soft); border-radius: 14px;
  touch-action: none; cursor: crosshair;
}
.enr-sig-clear { margin-top: 8px; }

/* pledge */
.enr-pl-phase { font-size: 17px; }
.enr-pl-col { margin-bottom: 14px; }
.enr-pl-head { font-weight: 700; font-size: 14px; color: var(--plum); margin-bottom: 6px; }
.enr-pl-item { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 7px; padding-inline-start: 6px; }

/* review */
.enr-rev-sec { margin-bottom: 18px; }
.enr-rev-title { font-family: var(--font-head); font-weight: 700; color: var(--magenta); font-size: 14px; margin-bottom: 6px; }
.enr-rev-row {
  display: flex; width: 100%; text-align: inherit; gap: 12px; justify-content: space-between;
  padding: 8px 12px; border: 1px solid transparent; border-radius: 10px; background: none;
  cursor: pointer; font-family: var(--font-body);
}
.enr-rev-row:hover { background: var(--row-hover); }
.enr-rev-row.miss { border-color: #f3c1c1; background: #fdf3f3; }
.enr-rev-q { font-size: 12.5px; color: var(--muted); flex: 1.4; }
.enr-rev-a { font-size: 12.5px; color: var(--plum); flex: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.enr-rev-a i { color: var(--faint); }
.enr-decl {
  margin-top: 22px; padding: 16px 18px; background: var(--hero-tint);
  border: 1px solid var(--chip-border); border-radius: 12px; font-size: 13.5px; color: var(--plum);
}
.enr-rev-return {
  position: fixed; bottom: 24px; inset-inline-end: 24px; z-index: 50;
  box-shadow: var(--shadow-card-hover);
}

/* nav & buttons */
.enr-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 26px; }
.enr-nav > :only-child { margin-inline-start: auto; }
.enr-primary {
  padding: 12px 30px; border-radius: 999px; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--magenta), #e0559f); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: 15px;
  box-shadow: 0 4px 14px rgba(207, 31, 143, .3); transition: all .15s ease;
}
.enr-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(207, 31, 143, .4); }
.enr-primary:disabled { opacity: .6; cursor: default; transform: none; }
.enr-ghost {
  padding: 12px 22px; border-radius: 999px; border: 1px solid var(--chip-border);
  background: #fff; color: var(--ink-soft); font-family: var(--font-body); font-size: 14px; cursor: pointer;
}
.enr-ghost:hover { border-color: var(--soft); }
.enr-milestone {
  text-align: center; font-family: var(--font-head); color: var(--brand-ink);
  font-size: 14px; margin-bottom: 16px;
}
.enr-error {
  margin-top: 14px; padding: 10px 14px; border-radius: 10px;
  background: #fdf3f3; border: 1px solid #f3c1c1; color: #a33; font-size: 13px;
}
.enr-flash {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 200;
  background: var(--plum); color: #fff; padding: 10px 22px; border-radius: 999px;
  font-size: 13.5px; box-shadow: var(--shadow-card-hover);
}

/* language dropdown (page header) */
.enr-lang-wrap {
  position: absolute; top: 16px; inset-inline-end: 18px;
  display: flex; align-items: center; gap: 6px;
}
.enr-top { position: relative; }
.enr-lang-label { font-size: 15px; }
.enr-lang-select {
  appearance: none; -webkit-appearance: none;
  padding: 8px 30px 8px 14px; border-radius: 999px; border: 1px solid var(--chip-border);
  background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a7183' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  color: var(--plum); font-family: var(--font-body); font-size: 13px; cursor: pointer;
}
[dir=rtl] .enr-lang-select {
  padding: 8px 14px 8px 30px;
  background-position: left 12px center;
}
.enr-lang-select:hover { border-color: var(--soft); }
.enr-lang-select:focus { outline: none; border-color: var(--magenta); box-shadow: 0 0 0 3px rgba(207, 31, 143, .1); }

/* country picker dialog */
.enr-country-btn { text-align: start; cursor: pointer; }
.enr-country-empty { color: var(--muted); }
.enr-dialog {
  position: fixed; inset: 0; z-index: 120; background: rgba(74, 52, 68, .45);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.enr-dialog-box {
  background: #fff; border-radius: 18px; padding: 16px; width: 100%; max-width: 380px;
  max-height: 70vh; display: flex; flex-direction: column; gap: 10px;
  box-shadow: var(--shadow-card-hover);
}
.enr-dialog-list { overflow-y: auto; display: flex; flex-direction: column; }
.enr-dialog-item {
  text-align: start; padding: 9px 12px; border: none; background: none; border-radius: 8px;
  font-family: var(--font-body); font-size: 14px; color: var(--plum); cursor: pointer;
}
.enr-dialog-item:hover { background: var(--row-hover); }
.enr-dialog-item.on { background: var(--hero-tint); color: var(--magenta); font-weight: 600; }

/* phone rows */
.enr-phones { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.enr-phone-row { display: flex; gap: 10px; align-items: center; width: 100%; flex-wrap: wrap; }
.enr-phone-num { flex: 1; min-width: 180px; max-width: 300px; direction: ltr; }
.enr-phone-wa { white-space: nowrap; }
.enr-phone-del { padding: 8px 12px; }
.enr-phone-add { font-size: 13px; padding: 8px 16px; }

/* resume overlay */
.enr-resume {
  position: fixed; inset: 0; z-index: 100; background: rgba(74, 52, 68, .45);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.enr-resume-box {
  background: #fff; border-radius: 18px; padding: 26px 30px; max-width: 420px;
  box-shadow: var(--shadow-card-hover); font-size: 14.5px; color: var(--plum);
}

/* done */
.enr-done { text-align: center; padding: 30px 0 20px; }
.enr-done-mark { font-size: 52px; }
.enr-done-title { font-family: var(--font-head); color: var(--magenta); margin: 10px 0 6px; }

@media (max-width: 560px) {
  .enr-card { padding: 20px 16px 24px; border-radius: 14px; }
  .enr-doc-title { font-size: 24px; }
  .enr-rev-row { flex-direction: column; gap: 2px; }
  .enr-scale-btn { width: 36px; height: 36px; }
}