/* 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;

  /* 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 */

/* Deep navy gradient lifted from the homepage hero, so opening the CMS
   feels like the same product as the website rather than a bolted-on tool. */
.masthead {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--s-3);
  background: linear-gradient(135deg, #00396F 0%, var(--navy) 45%, #0A5FA8 100%);
  color: #fff;
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-4) var(--s-3);
  margin-bottom: var(--s-3);
  position: relative;
  overflow: hidden;
}
/* Faint oversized brandmark, echoing the watermark on the site's hero. */
.masthead::after {
  content: "";
  position: absolute; right: -40px; top: -60px;
  width: 320px; height: 320px;
  background: radial-gradient(circle at 30% 30%, rgba(107,196,232,.16), transparent 62%);
  pointer-events: none;
}
.masthead h1 {
  font-size: 46px; line-height: 1.0; margin-top: 8px;
  color: #fff; letter-spacing: -0.035em;
}
.masthead .eyebrow { color: var(--sky); }
.masthead .who { color: rgba(255,255,255,.72); }
.masthead-right { display: flex; align-items: center; gap: var(--s-1); }
.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); }

.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; }

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;
}

.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 { flex-direction: column; align-items: flex-start; }
  .masthead h1 { font-size: 32px; }
  .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"); }