/* Hope Media CMS
   Built on the Hope Church Design System (Edition 2026).
   Tokens below map directly to the guide — do not introduce colors,
   radii, or spacing values that are not in this block. */

:root {
  /* Brand */
  --sky:    #6BC4E8;
  --blue:   #0082CA;   /* primary */
  --bright: #00ABF8;   /* screen only */
  --navy:   #004A98;
  --brand-soft: #E6F4FB;

  /* Ink ramp */
  --ink-050: #F7F8F9;
  --ink-100: #EFF1F3;
  --ink-200: #E2E5E9;
  --ink-300: #CBD1D8;
  --ink-400: #A7B0BA;
  --ink-500: #7C8794;
  --ink-600: #5A6472;
  --ink-700: #414A57;
  --ink-800: #2A313B;
  --ink-900: #1A1F26;

  /* Semantic roles */
  --fg-1: var(--ink-900);
  --fg-2: #3D4550;   /* measured from hopejc.org body copy */
  --fg-3: var(--ink-500);
  --bg-tint: #F8F9FB;  /* measured from hopejc.org section bands */
  --border-hairline: var(--ink-200);

  /* Status — system feedback only, never decoration */
  --success: #2BA564;
  --warning: #E8A029;
  --danger:  #D64545;
  --success-soft: #E9F6EF;
  --warning-soft: #FDF2E0;
  --danger-soft:  #FBECEC;

  /* Type — Gotham is licensed. Drop the woff2 files into public/fonts/ and
     the @font-face block at the bottom picks them up automatically.
     Montserrat is the documented fallback. */
  --font: "Gotham", "Proxima Nova", "Montserrat", ui-sans-serif, system-ui, sans-serif;
  /* Display face for headings -- what hopejc.org uses for "Love God." */
  --font-display: "Gotham Ultra", "Gotham", "Proxima Nova", "Montserrat", ui-sans-serif, sans-serif;

  /* Radius */
  --r-xs: 4px; --r-sm: 6px; --r-md: 10px;
  --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;
  --ok: #0f7a4d; --ok-soft: #eef7f1; --ok-line: #bfe0cd;

  /* Space — 4pt grid */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px;
  --s-4: 32px; --s-5: 48px; --s-6: 64px; --s-7: 96px;

  /* Depth */
  --shadow-xs: 0 1px 2px rgba(26,31,38,.06);
  --shadow-sm: 0 1px 3px rgba(26,31,38,.08), 0 1px 2px rgba(26,31,38,.04);
  --shadow-lg: 0 12px 32px rgba(26,31,38,.12);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 120ms;
  --t-mid: 220ms;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-tint);
  color: var(--fg-1);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

/* Focus: 3px sky ring at 40%, 2px offset */
:where(button, input, select, textarea, a):focus-visible {
  outline: 3px solid rgba(107, 196, 232, .4);
  outline-offset: 2px;
}

.eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--blue); line-height: 1.2;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.03em;   /* site measures -2.2px at hero size */
  margin: 0;
  color: var(--ink-900);
}
/* The site pairs its display face with generous line-height on body copy. */
body { line-height: 1.62; }

.boot { min-height: 100vh; display: grid; place-items: center; color: var(--fg-3); }

.shell { max-width: 1200px; margin: 0 auto; padding: var(--s-4) var(--s-3) var(--s-7); }

/* ---------------------------------------------------------------- masthead */

/* Lifted verbatim from the site's hero (.hero-a-photo.fallback), so the CMS
   opens looking like the same product: the two radial glows over a 135deg
   navy-to-blue ramp, the brandmark bled off the bottom-right corner at 6%,
   and the dark strip along the foot. Values match assets/site.css -- if the
   website's hero is ever retuned, copy the numbers again rather than
   eyeballing them. */
.masthead {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  border-radius: var(--r-lg);
  margin-bottom: var(--s-3);
  background:
    radial-gradient(900px 400px at 18% 10%, rgba(107,196,232,0.22), transparent 62%),
    radial-gradient(700px 320px at 78% 120%, rgba(0,171,248,0.22), transparent 62%),
    linear-gradient(120deg, #001E48 0%, #00336B 48%, #004A98 100%);
}
/* The brandmark, bled off the corner exactly as on the homepage. */
.masthead::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image: url('https://www.hopejc.org/assets/icon-white.png');
  background-repeat: no-repeat;
  background-position: right -70px center;
  background-size: 340px auto;
  opacity: 0.09;
  pointer-events: none;
}
.masthead-inner {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-4) calc(var(--s-4) + 34px);
}
.masthead .brandmark { height: 30px; margin-bottom: var(--s-2); }
.masthead .eyebrow {
  color: var(--sky); font-size: 13px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 14px;
}
.masthead h1 {
  color: #fff; margin: 0;
  font-size: 64px; line-height: 0.96; letter-spacing: -0.025em; font-weight: 900;
}
.masthead h1 em { font-style: normal; color: var(--sky); }
.masthead-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.masthead .btn-primary { background: #fff; color: var(--navy); border-color: #fff; }
.masthead .btn-primary:hover { background: var(--sky); border-color: var(--sky); color: #00294F; }

/* The foot strip: same type treatment as the site's "GRAY, TENNESSEE" band. */
.masthead-foot {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px var(--s-4);
  background: linear-gradient(180deg, transparent 0%, rgba(0,18,40,0.55) 100%);
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 700; color: rgba(255,255,255,.85);
}
.masthead-foot span { white-space: nowrap; }
.masthead-foot .dim { color: rgba(255,255,255,.55); }

.who { font-size: 13px; color: var(--fg-3); margin-right: var(--s-1); }
.brandmark { height: 34px; width: auto; display: block; margin-bottom: var(--s-1); }

/* ---------------------------------------------------------------- controls */
/* Pills. Sentence case, always — never shout. */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid transparent; border-radius: var(--r-pill);
  padding: 11px 20px; font-weight: 700; font-size: 15px;
  cursor: pointer; background: transparent;
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.btn-primary { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn-primary:hover { background: var(--navy); border-color: var(--navy); }
/* The site's primary CTAs carry a trailing arrow that nudges on hover. */
.btn-primary::after { content: "→"; font-size: 15px; transition: transform var(--t-fast) var(--ease); }
.btn-primary:hover::after { transform: translateX(3px); }

.btn-secondary { color: var(--blue); border-color: var(--blue); background: #fff; }
.btn-secondary:hover { color: var(--navy); border-color: var(--navy); background: var(--brand-soft); }

.btn-ghost { color: var(--fg-2); border-color: var(--border-hairline); background: #fff; }
.btn-ghost:hover { color: var(--fg-1); border-color: var(--ink-300); }

/* On the navy masthead the standard ghost/secondary styles would disappear. */
.masthead .btn-ghost {
  background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.28);
}
.masthead .btn-ghost:hover { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.45); }
.masthead .btn-secondary {
  background: transparent; color: #fff; border-color: rgba(255,255,255,.55);
}
.masthead .btn-secondary:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }

.btn-danger { color: var(--danger); border-color: transparent; background: transparent; }
.btn-danger:hover { background: var(--danger-soft); }

.btn-sm { padding: 7px 14px; font-size: 14px; }

.icon-btn {
  border: 0; background: transparent; cursor: pointer; color: var(--fg-3);
  padding: 8px; border-radius: var(--r-sm); display: inline-flex;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.icon-btn:hover { color: var(--fg-1); background: var(--ink-100); }
.icon-btn svg { width: 20px; height: 20px; }

/* Lucide, outline style, 1.75 stroke at every size */
.lucide { stroke: currentColor; stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------ branch cards */

.branches { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }

.branch {
  text-align: left; background: #fff;
  border: 1px solid var(--border-hairline); border-radius: var(--r-lg);
  padding: 0; overflow: hidden; cursor: pointer; box-shadow: var(--shadow-xs);
  transition: border-color var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.branch:hover { border-color: var(--sky); box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.branch[aria-pressed="true"] { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }

/* The card wears its three most recent thumbnails, so the dashboard reads as
   a library at a glance rather than a nav menu. */
.strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ink-100); }
.strip div { aspect-ratio: 16/9; background: var(--ink-200) center/cover no-repeat; }
.strip div.blank { background: var(--brand-soft); }

.branch-body { padding: var(--s-2); }
.branch h2 { font-size: 21px; margin-bottom: var(--s-1); letter-spacing: -0.03em; }
.branch-stats { display: flex; gap: var(--s-2); font-size: 13px; color: var(--fg-3); }
.branch-stats b { color: var(--fg-1); font-weight: 700; }

/* --------------------------------------------------------------- work area */

.board {
  background: #fff; border: 1px solid var(--border-hairline);
  border-radius: var(--r-lg); margin-top: var(--s-3);
  overflow: hidden; box-shadow: var(--shadow-xs);
}

.board-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s-2); padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--border-hairline); flex-wrap: wrap;
}
.board-head h2 { font-size: 24px; letter-spacing: -0.03em; }
.board-tools { display: flex; gap: var(--s-1); align-items: center; flex-wrap: wrap; }

.filter, .search input {
  border: 1px solid var(--border-hairline); border-radius: var(--r-md);
  padding: 9px 13px; background: #fff; color: var(--fg-1);
  transition: border-color var(--t-fast) var(--ease);
}
.search input { min-width: 210px; }
.filter:hover, .search input:hover { border-color: var(--ink-300); }

.tabs { display: flex; gap: 2px; background: var(--ink-100); padding: 3px; border-radius: var(--r-pill); }
.tab {
  border: 0; background: transparent; padding: 7px 16px;
  border-radius: var(--r-pill); font-size: 14px; font-weight: 700;
  cursor: pointer; color: var(--fg-2);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.tab[aria-selected="true"] { background: #fff; color: var(--blue); box-shadow: var(--shadow-xs); }

/* -------------------------------------------------------------------- rows */

.row {
  display: grid; grid-template-columns: 120px 1fr auto auto;
  gap: var(--s-2); align-items: center;
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--border-hairline);
}
.row:last-child { border-bottom: 0; }
.row:hover { background: var(--ink-050); }
/* The whole row is the target now; the Edit button stays for keyboard and
   for anyone who expects an explicit control. */
.row--open { cursor: pointer; }
.row--open:focus-visible {
  outline: 2px solid var(--blue); outline-offset: -2px; background: var(--ink-050);
}

.thumb {
  width: 120px; aspect-ratio: 16/9; border-radius: var(--r-sm);
  object-fit: cover; background: var(--ink-200); display: block;
}
.thumb.blank { background: var(--brand-soft); }

.row-title { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.row-meta { font-size: 14px; color: var(--fg-3); margin-top: 2px; display: flex; gap: var(--s-2); flex-wrap: wrap; }
.row-meta .has { color: var(--blue); font-weight: 500; }
.row-actions { display: flex; gap: var(--s-1); }

.share-row { padding: var(--s-2) var(--s-3); background: var(--brand-soft);
  border-radius: var(--r-sm); margin: 0 0 var(--s-3); }
.share-row label { display: block; font-size: 13px; font-weight: 600;
  color: var(--fg-2); margin-bottom: 6px; }
.share-controls { display: flex; gap: var(--s-1); align-items: center; }
.share-controls .control { flex: 1; min-width: 0; font-size: 13px; }
.share-row .hint { margin: 6px 0 0; }
.yt-row { padding: var(--s-2) var(--s-3); border-top: 1px solid var(--line); }
.yt-row label { display: block; font-size: 13px; font-weight: 600;
  color: var(--ink); margin-bottom: 6px; }
.yt-controls { display: flex; gap: var(--s-1); align-items: center; }
.yt-controls .control { flex: 1; min-width: 0; font-size: 13px; }
.yt-row .hint { margin: 6px 0 0; }
.yt-bar { height: 4px; border-radius: 2px; background: var(--line);
  margin-top: 8px; overflow: hidden; }
.yt-bar span { display: block; height: 100%; background: var(--brand);
  transition: width .3s ease; }
.yt-panel { padding: var(--s-3); border: 1px solid var(--line);
  border-radius: var(--r-2); background: var(--surface); }
.yt-panel h3 { margin: 0 0 6px; font-size: 16px; }
.yt-panel p { margin: 0 0 var(--s-2); color: var(--muted); font-size: 14px; }
.yt-jobs { margin-top: var(--s-3); }
.yt-job { display: flex; justify-content: space-between; gap: var(--s-2);
  align-items: center; padding: 10px 0; border-top: 1px solid var(--line);
  font-size: 14px; }
.yt-job .meta { color: var(--muted); font-size: 13px; }
/* .row.user-row, not .user-row: the narrow-screen media query below restates
   the .row column template, and at equal specificity the later rule wins --
   which squeezed the name into the 96px thumbnail column. */
.row.user-row { grid-template-columns: 1fr auto; }

.status {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; padding: 6px 14px;
  border-radius: var(--r-pill); border: 1px solid transparent;
  cursor: pointer; background: transparent;
  transition: background var(--t-fast) var(--ease);
}
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.status.live { color: var(--success); background: var(--success-soft); }
.status.live::before { background: var(--success); }
.status.draft { color: #8A5E12; background: var(--warning-soft); }
.status.draft::before { background: var(--warning); }
.status.scheduled { color: var(--navy); background: var(--brand-soft); }
.status.scheduled::before { background: var(--blue); }

/* ------------------------------------------------------------ series cards */

.series-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); padding: var(--s-3); }
.series-card {
  border: 1px solid var(--border-hairline); border-radius: var(--r-md);
  overflow: hidden; background: #fff; box-shadow: var(--shadow-xs);
}
.series-card .art { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--ink-200); display: block; }
.series-card .art.blank { background: var(--brand-soft); }
.series-card .body { padding: var(--s-2); }
.series-card h3 { font-size: 18px; margin-bottom: 4px; }
.series-card p { margin: 0 0 var(--s-2); font-size: 14px; color: var(--fg-3); }

.empty { padding: var(--s-6) var(--s-3); text-align: center; color: var(--fg-2); }
.empty h3 { font-size: 22px; color: var(--fg-1); margin-bottom: var(--s-1); }
.empty p { margin: 0 0 var(--s-3); }

/* ------------------------------------------------------------------ dialog */

.scrim {
  position: fixed; inset: 0; background: rgba(0, 42, 84, .55);
  display: flex; justify-content: center; align-items: flex-start;
  padding: var(--s-5) var(--s-2); overflow: auto; z-index: 60;
}
.sheet {
  width: min(760px, 100%); background: #fff;
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden;
}
.sheet-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--s-3); border-bottom: 1px solid var(--border-hairline);
}
.sheet-head h2 { font-size: 24px; margin-top: 4px; }

/* ------------------------------------------------------------------ editor */

/* A sermon carries a lot: two large uploads, artwork, scheduling, YouTube,
   a share link. In a 760px modal that became a long scroll with no sense of
   place. The full page splits it the way the work actually divides -- what
   the item IS down the middle, what happens TO it down the side. */
.editor { max-width: 1240px; margin: 0 auto; padding: var(--s-3) var(--s-2) var(--s-5); }
.editor-top {
  display: flex; align-items: center; gap: var(--s-2);
  margin-bottom: var(--s-3); flex-wrap: wrap;
}
.crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.crumbs a { color: var(--blue); text-decoration: none; font-weight: 700; font-size: 15px; }
.crumbs a:hover { text-decoration: underline; }
.crumbs svg { width: 16px; height: 16px; stroke: var(--ink-300); fill: none; stroke-width: 2; flex: none; }
.crumbs .here {
  font-weight: 700; font-size: 15px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 46ch;
}
.editor-saved { font-size: 13px; color: var(--fg-3); }

.editor-grid { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: var(--s-3); align-items: start; }
@media (max-width: 1000px) { .editor-grid { grid-template-columns: 1fr; } }

.card {
  background: #fff; border: 1px solid var(--border-hairline);
  border-radius: var(--r-lg); padding: var(--s-3); margin-bottom: var(--s-3);
}
.card > h3 {
  margin: 0 0 var(--s-2); font-size: 17px; font-weight: 800; letter-spacing: -0.01em;
}
.card > h3 .opt { font-weight: 500; }
.card:last-child { margin-bottom: 0; }
.card .field:last-child { margin-bottom: 0; }

/* The sidebar follows you down a long form, so Publish is always reachable. */
.editor-side { position: sticky; top: var(--s-2); }
@media (max-width: 1000px) { .editor-side { position: static; } }
.editor-side .card { padding: var(--s-3); }
.side-actions { display: flex; flex-direction: column; gap: 10px; }
.side-actions .btn { justify-content: center; width: 100%; }
.side-meta { font-size: 13px; color: var(--fg-3); margin-top: var(--s-2); }
.side-danger { margin-top: var(--s-3); border-top: 1px solid var(--border-hairline); padding-top: var(--s-3); }

/* The editor's own form fills the page, so it must not carry the modal's padding. */
.editor form { padding: 0; }
/* A native file input carries an intrinsic width near 390px, which is wider
   than the 340px sidebar and pushed the whole page into horizontal scroll. */
input[type="file"] { max-width: 100%; }

/* Share and YouTube were single rows in the old 760px modal: a field beside
   its buttons. In the 340px sidebar that flex row squeezed the share URL to
   "https://h" and the privacy select to "Pr". Stack them, and drop the inner
   padding and heading the card now provides. */
.editor-side .share-controls,
.editor-side .yt-controls { flex-direction: column; align-items: stretch; gap: 8px; }
.editor-side .share-controls .btn,
.editor-side .yt-controls .btn { width: 100%; justify-content: center; }
.editor-side .share-row,
.editor-side .yt-row {
  padding: 0; margin: 0; background: none; border-top: 0; border-radius: 0;
}
.editor-side .share-row > label,
.editor-side .yt-row > label { display: none; }


form { padding: var(--s-3); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.field { margin-bottom: var(--s-2); }
.field > label {
  display: block; font-size: 13px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-3); margin-bottom: var(--s-1);
}
.field .hint { display: block; font-size: 14px; color: var(--fg-3); margin-top: var(--s-1); }
.opt { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink-400); }

.control {
  width: 100%; border: 1px solid var(--border-hairline); border-radius: var(--r-md);
  padding: 12px 14px; background: #fff;
  transition: border-color var(--t-fast) var(--ease);
}
.control:hover { border-color: var(--ink-300); }
.control:focus { border-color: var(--blue); }
textarea.control { min-height: 100px; resize: vertical; line-height: 1.55; }

/* Upload fields.
   The native <input type=file> is visually hidden rather than removed, so it
   keeps its keyboard focus and accessibility behaviour while the label
   provides the visible target. The whole label is clickable, and the JS adds
   real drag-and-drop -- which this component was named for but never had. */
.dropzone {
  border: 1.5px dashed var(--ink-300); border-radius: var(--r-md);
  background: var(--ink-050); transition: border-color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease);
}
.dropzone.is-over { border-color: var(--blue); background: var(--brand-soft); }
.dropzone.is-busy { border-style: solid; border-color: var(--ink-300); }
.dropzone.is-done { border-style: solid; border-color: var(--success); background: #fff; }

.dz-drop {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: var(--s-3) var(--s-2); cursor: pointer; text-align: center;
}
.dropzone.is-busy .dz-drop { cursor: default; opacity: .55; pointer-events: none; }

/* Visually hidden, still focusable. */
.dz-drop input[type=file] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.dz-drop input[type=file]:focus-visible + .dz-icon {
  outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px;
}
.dz-icon {
  width: 26px; height: 26px; stroke: var(--blue); stroke-width: 1.8;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.dz-title { font-size: 15px; font-weight: 600; color: var(--fg-1); }
.dz-or { font-weight: 400; color: var(--fg-3); }
.dz-sub { font-size: 13px; color: var(--fg-3); }

/* An author display rule beats the UA rule for [hidden], so the attribute
   alone would not hide this -- it has to be restated explicitly. */
.dz-file[hidden] { display: none; }
.dz-file {
  display: flex; align-items: center; gap: 8px;
  margin: 0 var(--s-2); padding: 8px 10px;
  background: #fff; border: 1px solid var(--border-hairline);
  border-radius: var(--r-sm); font-size: 13px; color: var(--fg-2);
}
.dz-file strong { font-weight: 600; color: var(--fg-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-file .dz-size { margin-left: auto; color: var(--fg-3); flex: none; }

/* Meters sit inside the dropzone, so they need their own inset. */
.dropzone .meter, .dropzone .meter-label,
.dropzone [data-audio-preview] { margin-left: var(--s-2); margin-right: var(--s-2); }
.dropzone .meter { margin-top: 10px; display: none; }
.dropzone.is-busy .meter, .dropzone.is-done .meter { display: block; }
.dropzone .meter-label:not(:empty) { padding-bottom: var(--s-2); }
.dropzone [data-audio-preview]:not(:empty) { padding-bottom: var(--s-2); }

.art-preview {
  margin-top: var(--s-2); width: 280px; max-width: 100%;
  aspect-ratio: 16/9; object-fit: cover; border-radius: var(--r-sm); display: block;
}

.havefile {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3); border: 1px solid var(--ok-line, var(--line));
  border-radius: var(--r-lg); background: var(--ok-soft, var(--ink-050));
}
.havefile__tick { width: 26px; height: 26px; flex: none; fill: none;
  stroke: var(--ok, #0f7a4d); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.havefile__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.havefile__text b { font-size: 15px; }
.havefile__text span { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.havefile audio { width: 100%; max-width: 320px; margin-top: 6px; }
@media (max-width: 560px) { .havefile { flex-wrap: wrap; } }

.meter { height: 8px; background: var(--ink-200); border-radius: var(--r-pill); overflow: hidden; margin-top: var(--s-2); }
.meter span { display: block; height: 100%; background: var(--blue); width: 0; transition: width var(--t-mid) var(--ease); }
.meter-label { font-size: 14px; color: var(--fg-3); margin-top: 6px; }
.meter-label.warn { color: #8A5E12; font-weight: 700; }

.yt-frame { margin-top: var(--s-2); width: 100%; aspect-ratio: 16/9; border: 0; border-radius: var(--r-sm); background: var(--ink-900); }
audio { width: 100%; margin-top: var(--s-1); }

.callout {
  border: 1px solid transparent; background: var(--brand-soft); color: var(--navy);
  padding: 13px 16px; border-radius: var(--r-md); font-size: 15px; margin-bottom: var(--s-2);
}
.callout.warn { background: var(--warning-soft); color: #8A5E12; }

.form-foot {
  display: flex; justify-content: flex-end; gap: var(--s-1);
  border-top: 1px solid var(--border-hairline); padding-top: var(--s-3); margin-top: var(--s-1);
}
.form-foot .left { margin-right: auto; }

/* ------------------------------------------------------------------ toasts */

.toasts { position: fixed; right: var(--s-3); bottom: var(--s-3); display: flex; flex-direction: column; gap: var(--s-1); z-index: 90; }
.toast {
  background: var(--navy); color: #fff; padding: 13px 18px;
  border-radius: var(--r-md); font-size: 15px; font-weight: 500;
  box-shadow: var(--shadow-lg); max-width: 400px;
  animation: rise var(--t-mid) var(--ease);
}
.toast.bad { background: var(--danger); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ mobile */
/* 44px minimum touch targets */

@media (max-width: 900px) {
  .branches, .series-grid { grid-template-columns: 1fr; }
  .pair { grid-template-columns: 1fr; }
  .row { grid-template-columns: 96px 1fr; row-gap: var(--s-1); }
  .thumb { width: 96px; }
  .row-actions, .row .status { grid-column: 2; justify-self: start; }
  .masthead-inner { flex-direction: column; align-items: flex-start; }
  .masthead h1 { font-size: 40px; }
  .masthead::before { background-size: 200px auto; }
  .masthead-foot { font-size: 11px; letter-spacing: .08em; }
  .masthead-foot .dim { display: none; }
  .shell { padding: var(--s-3) var(--s-2) var(--s-6); }
  .btn { padding: 12px 20px; min-height: 44px; }
  .icon-btn { min-width: 44px; min-height: 44px; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Real Gotham, served from hopejc.org -- the same files the church website
   loads, verified to allow cross-origin use. This is the actual brand
   typeface rather than a lookalike: Gotham Ultra for display headings,
   Gotham Book/Medium/Bold for everything else. Montserrat stays in the
   stack purely as a no-flash fallback if hopejc.org is ever unreachable. */
@font-face { font-family: "Gotham"; font-weight: 400; font-display: swap;
  src: url("https://www.hopejc.org/fonts/Gotham-Book.otf") format("opentype"); }
@font-face { font-family: "Gotham"; font-weight: 700; font-display: swap;
  src: url("https://www.hopejc.org/fonts/GOTHAM-BOLD.TTF") format("truetype"); }
@font-face { font-family: "Gotham"; font-weight: 900; font-display: swap;
  src: url("https://www.hopejc.org/fonts/GOTHAM-BLACK.TTF") format("truetype"); }
@font-face { font-family: "Gotham Ultra"; font-weight: 900; font-display: swap;
  src: url("https://www.hopejc.org/fonts/Gotham-Ultra.otf") format("opentype"); }