/*
  Admin System CSS
  ================
  Drop this into your project alongside admin.js.

  CSS variables used (define these in your :root or replace with hardcoded values):
    --primary       : your brand color (used for Save button bg)        e.g. #2563eb
    --border        : subtle border color                                e.g. #e5e7eb
    --bg-page       : your page background color                         e.g. #f9fafb
    --text-dark     : primary text color                                 e.g. #111827
    --text-muted    : secondary/muted text color                         e.g. #6b7280
    --r-full        : full-radius value for pill shapes                  e.g. 9999px

  The yellow accent (#ffd200) is used throughout for all admin UI chrome.
  Change this one color to rebrand the entire admin system.

  NOTE: the template's alert/notification bar is not used on this site — its
  markup, styles, JS and the --notif-h sticky offset were all removed.
*/


/* ════════════════════════════════════════════
   ADMIN TOGGLE BUTTON
   Place <button id="admin-toggle-btn"> in your footer.
   ════════════════════════════════════════════ */

.admin-toggle-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.35);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
  margin-top: 8px;
}
.admin-toggle-btn:hover {
  color: rgba(255,255,255,0.7);
  border-color: rgba(255,255,255,0.4);
}
.admin-mode .admin-toggle-btn {
  color: #ffd200;
  border-color: rgba(255,210,0,0.5);
}

/* Adjust for light-background footers: */
/* .admin-toggle-btn { border-color: rgba(0,0,0,0.12); color: rgba(0,0,0,0.3); } */


/* ════════════════════════════════════════════
   HEADER EXIT BUTTON
   Optional: <button id="admin-header-exit-btn"> in your header.
   Hidden by default — appears only in admin mode.
   ════════════════════════════════════════════ */

.admin-header-exit-btn {
  display: none;
  flex-shrink: 0;
}
.admin-mode .admin-header-exit-btn {
  display: flex;
  align-items: center;
  background: #ffd200;
  color: #1a1a1a;
  border: none;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 9999px;
  cursor: pointer;
  transition: background 0.2s;
}
.admin-mode .admin-header-exit-btn:hover {
  background: #f0c800;
}


/* ════════════════════════════════════════════
   ADMIN HEADER LINK — the sermon manager shortcut
   <a id="admin-sermons-link"> in the header, beside Exit Admin.
   Hidden by default; appears only in admin mode, exactly like the exit button.

   Deliberately OUTLINED where Exit Admin is solid, so the two are told apart at a
   glance: they sit side by side, one takes you to the editor and the other throws
   away your session, and those must not look alike.
   ════════════════════════════════════════════ */

.admin-header-link {
  display: none;
  flex-shrink: 0;
}
.admin-mode .admin-header-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  color: #1a1a1a;
  border: 2px solid #ffd200;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  /* Height pinned to the exit button's measured 26px rather than derived from padding:
     the two sit side by side, and a border plus an icon made this one 7px taller, so
     they visibly failed to line up. box-sizing keeps the border inside that 26px. */
  height: 26px;
  box-sizing: border-box;
  padding: 0 12px;
  line-height: 1;
  border-radius: 9999px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.admin-mode .admin-header-link:hover {
  background: #fff8d6;
  border-color: #f0c800;
}
.admin-mode .admin-header-link:focus-visible {
  outline: 2px solid #1a1a1a;
  outline-offset: 2px;
}
.admin-header-link svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
/* The header has nav + a Listen CTA + two admin controls. Below ~1100px drop the
   words and keep the icon, so nothing wraps or pushes Exit Admin off the row. */
@media (max-width: 1100px) {
  .admin-mode .admin-header-link { padding: 0 8px; gap: 0; font-size: 0; }
  .admin-mode .admin-header-link svg { width: 15px; height: 15px; }
}



/* ════════════════════════════════════════════
   ADMIN MODE BANNER
   Fixed top bar that appears when body.admin-mode is active.
   Uses ::before on <body> — no extra HTML needed.
   ════════════════════════════════════════════ */

.admin-mode::before {
  content: 'Admin Mode — click the pencil icon next to any section to edit it';
  display: block;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  background: #1a1a2e;
  color: #ffd200;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  padding: 7px 16px;
  letter-spacing: 0.03em;
}

/* On a local/dev host (body.admin-local, toggled by isLocalEnv() in admin.js),
   repurpose the admin banner as a loud red warning so edits here are never
   mistaken for live-site changes. Same height/position as the normal banner, so
   any sticky offsets below it are unaffected. Overrides content/colour only (not
   `display`), so the mobile-hide rule still wins. Production never matches. */
.admin-mode.admin-local::before {
  content: '⚠ Local dev site — changes here do NOT save to the live website';
  background: #b91c1c;
  color: #fff;
}

/* If you have a sticky header, offset it in admin mode so it clears the banner: */
/* .admin-mode .site-header { top: 34px; } */


/* ════════════════════════════════════════════
   EDIT GROUP CONTAINERS & TRIGGER BUTTON
   Groups are marked with data-egroup.
   The yellow pencil "Edit" button is injected by buildUI().
   ════════════════════════════════════════════ */

.admin-mode [data-egroup] {
  position: relative; /* so the absolute-positioned trigger button anchors here */
}

.admin-edit-trigger {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  align-items: center;
  gap: 6px;
  background: #ffd200;
  color: #1a1a1a;
  border: none;
  border-radius: 6px;
  padding: 6px 12px 6px 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  transition: background 0.15s, transform 0.15s;
}
.admin-edit-trigger svg { width: 14px; height: 14px; flex-shrink: 0; }
.admin-edit-trigger:hover { background: #e6bd00; transform: translateY(-1px); }
.admin-mode .admin-edit-trigger { display: inline-flex; }
/* While one section is being edited, hide all other triggers */
.admin-editing-active .admin-edit-trigger { display: none; }

/* ── Admin preview notes ──
   Admin-only callout that explains a conditional/dimmed "preview" section so
   editors don't mistake it for something visitors currently see. Hidden to
   visitors (and in SSR output) — only shows in admin mode. Place it as a
   SIBLING of the previewed element (not a child) so the preview's dimmed
   opacity doesn't cascade onto the note and fade the explanation too. */
.admin-preview-note { display: none; }
body.admin-mode .admin-preview-note {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 14px 0;
  padding: 9px 14px;
  background: #eef4fb;
  border: 1px dashed #9cc3e6;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
  color: #1d4e79;
}
.admin-preview-note svg { width: 16px; height: 16px; flex-shrink: 0; }
.admin-preview-note strong { font-weight: 800; }

/* When you dim a [data-egroup] section as an admin preview, exclude its Edit
   trigger from the fade — CSS opacity can't be undone on a descendant, so apply
   the dim to the content only:
     .my-preview-section > :not(.admin-edit-trigger) { opacity: 0.5; }
   The Edit button then stays full-strength while the content is faded. */

/* ── Active / inactive toggle switch ──
   Reusable on/off switch for managed item lists (job listings, staff, FAQs) so
   editors can show/hide an item without deleting it. Markup:
     <button class="admin-toggle-switch is-on" role="switch" aria-checked="true">
       <span class="admin-toggle-track"><span class="admin-toggle-knob"></span></span>
       <span class="admin-toggle-label">Active</span>
     </button>
   Add/remove the `is-on` class (and aria-checked) to reflect state. */
.admin-toggle-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
}
.admin-toggle-track {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: #cbd5e1;
  flex-shrink: 0;
  transition: background 0.18s ease;
}
.admin-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  transition: transform 0.18s ease;
}
.admin-toggle-switch.is-on .admin-toggle-track { background: #16a34a; }
.admin-toggle-switch.is-on .admin-toggle-knob { transform: translateX(16px); }
/* Fixed-width label so the control (and its row) doesn't shift between "Active"/"Inactive" */
.admin-toggle-label { min-width: 58px; text-align: left; color: #6b7280; transition: color 0.18s ease; }
.admin-toggle-switch.is-on .admin-toggle-label { color: #15803d; }


/* ════════════════════════════════════════════
   EDITABLE ELEMENT HIGHLIGHT
   Applied to elements with contentEditable during an active edit session.
   ════════════════════════════════════════════ */

/* Force font so pasted content can't inject external fonts or sizes */
.admin-editing,
.admin-editing * {
  font-family: inherit !important;
  font-size:   inherit !important;
}

/* Special case: buttons that become editable */
.btn.admin-editing {
  background: #fffbe6 !important;
  border-color: #ffd200 !important;
  color: #1a1a1a !important;
  box-shadow: none !important;
}

.admin-editing {
  outline: 2px dashed #ffd200 !important;
  outline-offset: 3px;
  border-radius: 3px;
  background: rgba(255,210,0,0.08) !important;
  cursor: text;
  min-height: 1em;
}


/* ════════════════════════════════════════════
   INLINE URL / PHONE INPUT ROW
   Injected below btn-type and tel-type fields during editing.
   ════════════════════════════════════════════ */

.admin-url-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
  padding: 8px 10px;
  background: #fffbe6;
  border: 1px solid #ffd200;
  border-radius: 6px;
  width: 100%;
  box-sizing: border-box;
}
.admin-url-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #7a6000;
}
.admin-url-input {
  font-size: 0.8rem;
  font-family: inherit;
  border: 1px solid #e0c800;
  border-radius: 4px;
  padding: 5px 8px;
  background: #fff;
  color: var(--text-dark, #111827);
  width: 100%;
  box-sizing: border-box;
  outline: none;
}
.admin-url-input:focus {
  border-color: #ffd200;
  box-shadow: 0 0 0 2px rgba(255,210,0,0.3);
}

/* Upload / Remove buttons on btn-type URL rows (data-eid-upload) */
.admin-url-actions {
  display: flex;
  gap: 8px;
  align-self: flex-start;
}
.admin-url-upload-btn,
.admin-url-remove-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: inherit;
  border-radius: 4px;
  padding: 5px 10px;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.admin-url-upload-btn {
  color: #1a1a1a;
  background: #ffd200;
  border: 1px solid #e0c800;
}
.admin-url-upload-btn:hover:not(:disabled) { background: #ffdd33; }
.admin-url-remove-btn {
  color: #b42318;
  background: #fff;
  border: 1px solid #f0c2bd;
}
.admin-url-remove-btn:hover:not(:disabled) { background: #fef2f1; }
.admin-url-upload-btn:disabled,
.admin-url-remove-btn:disabled { opacity: 0.6; cursor: default; }


/* ════════════════════════════════════════════
   ACTION BAR (Save / Cancel / Format)
   Fixed bottom-right bar, appended to body during an edit session.
   ════════════════════════════════════════════ */

.admin-action-bar {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  padding: 6px 10px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
}
.admin-bar-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.admin-bar-sep {
  width: 1px;
  align-self: stretch;
  background: var(--border, #e5e7eb);
  margin: 2px 2px;
}
.admin-bar-format { display: flex; gap: 2px; }
.admin-fmt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: none;
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
  color: var(--text-dark, #111827);
  transition: background 0.1s, border-color 0.1s;
}
.admin-fmt-btn:hover { background: var(--bg-page, #f9fafb); border-color: var(--border, #e5e7eb); }
.admin-fmt-btn[data-cmd="bold"]      { font-weight: 700; }
.admin-fmt-btn[data-cmd="italic"]    { font-style: italic; }
.admin-fmt-btn[data-cmd="underline"] { text-decoration: underline; }

/* Link / unlink buttons */
.admin-unlink-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 4px;
  background: none;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}
.admin-unlink-btn:hover { background: #fff0f0; border-color: #fed7d7; }
.admin-unlink-btn[hidden] { display: none; }

/* Rich-text link styles */
[data-eid-format="rich"] a { text-decoration: underline; }

body.admin-editing-active [data-eid] a[contenteditable="false"] {
  cursor: pointer;
  border-radius: 2px;
  outline: 1px dashed rgba(255,210,0,0.7);
}
body.admin-editing-active [data-eid] a.admin-link-selected {
  outline: 2px solid #ffd200;
  background: rgba(255,210,0,0.15);
}

/* Inline link row (shown inside the action bar when inserting a link) */
.admin-link-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.admin-link-row[hidden] { display: none; }
.admin-link-text-input {
  height: 28px;
  width: 130px;
  padding: 0 8px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 4px;
  font-size: 0.8rem;
  font-family: inherit;
  color: var(--text-dark, #111827);
  outline: none;
}
.admin-link-text-input:focus { border-color: var(--primary, #2563eb); }
.admin-link-input {
  height: 28px;
  width: 200px;
  padding: 0 8px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 4px;
  font-size: 0.8rem;
  font-family: inherit;
  color: var(--text-dark, #111827);
  outline: none;
}
.admin-link-input:focus { border-color: var(--primary, #2563eb); }
.admin-link-apply-btn,
.admin-link-cancel-btn {
  height: 28px;
  border: none;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}
.admin-link-apply-btn {
  padding: 0 10px;
  background: var(--primary, #2563eb);
  color: #fff;
}
.admin-link-cancel-btn {
  padding: 0 8px;
  background: var(--bg-page, #f9fafb);
  color: var(--text-dark, #111827);
  border: 1px solid var(--border, #e5e7eb);
}

.admin-bar-btns { display: flex; gap: 6px; }

.admin-save-btn,
.admin-cancel-btn {
  border: none;
  border-radius: 5px;
  padding: 5px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}
.admin-save-btn {
  background: var(--primary, #2563eb);
  color: #fff;
}
.admin-cancel-btn {
  background: var(--bg-page, #f9fafb);
  color: var(--text-dark, #111827);
  border: 1px solid var(--border, #e5e7eb);
}
.admin-save-btn:hover,
.admin-cancel-btn:hover { opacity: 0.85; }


/* ════════════════════════════════════════════
   TOAST NOTIFICATION
   Short-lived confirmation pill — appears centered at bottom.
   ════════════════════════════════════════════ */

.admin-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: #1a1a2e;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 10px 24px;
  border-radius: 99px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  z-index: 9999;
}
.admin-toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


/* ════════════════════════════════════════════
   PHOTO REPLACEMENT OVERLAY
   Wraps any <img data-eid-type="photo"> in admin mode.
   The wrap + button are injected by buildUI() — no extra HTML needed.
   ════════════════════════════════════════════ */

.admin-photo-wrap {
  position: relative;
  overflow: hidden; /* clips the image to any border-radius on the wrapper */
}
.admin-photo-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.admin-photo-btn {
  display: none;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(0,0,0,0.52);
  color: #fff;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  z-index: 20;
  transition: background 0.15s;
}
.admin-photo-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
/* Rendered (but invisible) in admin mode so it stays keyboard-focusable;
   revealed on wrap hover OR keyboard focus (was mouse-only via display:none — WCAG 2.1.1). */
body.admin-mode .admin-photo-btn { display: flex; }
body.admin-mode .admin-photo-wrap:hover .admin-photo-btn,
body.admin-mode .admin-photo-btn:focus-visible {
  opacity: 1;
  pointer-events: auto;
}
body.admin-mode .admin-photo-wrap:hover .admin-photo-btn:hover { background: rgba(0,0,0,0.68); }
.admin-photo-spinner {
  display: inline-block;
  width: 20px; height: 20px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: admin-spin 0.7s linear infinite;
}
@keyframes admin-spin { to { transform: rotate(360deg); } }


/* ════════════════════════════════════════════
   SOCIAL ICON BUTTONS
   Optional: if your footer has social links using the social-btn--empty pattern.
   ════════════════════════════════════════════ */

/* Hide icons with no URL set from regular visitors */
.social-btn--empty { display: none; }

/* In admin mode: show empty icons dimmed so admins can activate them */
.admin-mode .social-btn--empty {
  display: inline-flex;
  opacity: 0.4;
  filter: grayscale(0.5);
}
/* In admin mode the icon grows into a pill so the URL label fits beside it. The
   faint dark fill is for LIGHT backgrounds (contact card, subscribe cards), where
   the button's normal translucent-white fill is invisible; the footer overrides it
   back to ECC's translucent white below. */
.admin-mode .social-btn {
  display: inline-flex;
  width: auto;
  min-width: 38px;
  border-radius: var(--r-sm, 6px);
  padding: 0 10px;
  gap: 6px;
  background: rgba(15,23,42,0.06);
  pointer-events: none;   /* the span below re-enables its own pointer events */
}

/* The URL span inside each social link — hidden from visitors, revealed in admin
   mode as an editable label. This mirrors the ECC site exactly (style.css there):
   the link group carries data-egroup, so a pencil opens it and the URL is edited
   in place. Clearing the text hides that icon. (An earlier Right Start-only
   variant hid this span in BOTH modes and edited the URLs in a bespoke "Links"
   modal; that panel has been removed in favour of the ECC behaviour.) */
.social-url-text { display: none; }

/* ECC styles this label light-on-dark, because the ONLY place it has social links
   is the dark footer. Right Start shows them in three contexts — the dark footer,
   the white "Stay Connected" card on the contact page, and the white subscribe
   cards on the listen page — so the light colour cannot be the base rule: it left
   the URL invisible (white on white) wherever the background was light, and an
   admin could not see the value they were editing. Default to a readable dark
   slate and give the footer back ECC's exact treatment below. */
.admin-mode .social-url-text {
  display: inline;
  font-size: 0.7rem;
  color: #475569;
  white-space: nowrap;
  overflow: hidden;
  max-width: 160px;
  text-overflow: ellipsis;
  pointer-events: auto;
}

/* The dark footer — ECC's original treatment, unchanged. */
.admin-mode .site-footer .social-url-text { color: rgba(255,255,255,0.7); }
.admin-mode .site-footer .social-btn { background: rgba(255,255,255,0.1); }

/* The listen page's subscribe cards are tall and narrow rather than a row of
   icons, so the URL wraps under the label instead of ellipsising beside it. */
.admin-mode .subscribe-card .social-url-text {
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: 100%;
  margin-top: 4px;
}
.admin-mode .subscribe-card { pointer-events: none; }

.admin-mode .social-url-text.admin-editing {
  outline: 1px dashed #ffd200;
  outline-offset: 2px;
  border-radius: 2px;
  min-width: 120px;
  white-space: normal;
  overflow: visible;
  max-width: 200px;
}

/* Hold the label at its small size while it is being edited. The generic
   `.admin-editing, .admin-editing * { font-size: inherit !important }` above
   exists so pasted markup can't drag a foreign font size into a field — but on
   this 0.7rem label "inherit" means the PARENT's size, so clicking into a social
   URL blew the text up to full body size and reflowed the row. Same specificity
   trick the generic rule uses, one level deeper so it wins.
   (ECC carries the identical generic rule with no counter, so it has this bug
   too — deliberately NOT copied.) */
.admin-mode .social-url-text.admin-editing,
.admin-mode .social-url-text.admin-editing * {
  font-size: 0.7rem !important;
}


/* The "this is the main office number" note inside a tel edit box. admin.js emits it
   for any eid in MAIN_PHONE_EIDS — on this site that is the shared `site-phone`, so
   it correctly warns that the change lands on the footer, the contact card and the
   give page at once. It had no styles at all, so it rendered as a block of unstyled
   body text ~116px tall inside the yellow box. */
.admin-phone-note {
  display: block;
  margin-top: 6px;
  font-size: 0.72rem;
  line-height: 1.45;
  color: #7a6000;
}
.admin-phone-note strong { color: #5c4800; }


/* ════════════════════════════════════════════
   MANAGED BULLET LISTS  ([data-features-id])
   Add/remove/reorder bullet items. Ported from the ECC site, with one deliberate
   change: ECC's trigger is an in-flow button with `margin-top: 10px`, which pushes
   the page down the moment admin mode turns on. Here the trigger is absolutely
   positioned in the margin gap ABOVE its list, so turning admin mode on shifts
   nothing on the page.
   ════════════════════════════════════════════ */

.admin-mode [data-features-id] { position: relative; }

.pfl-edit-btn {
  display: none;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: #ffd200;
  color: #1a1a2e;
  border: none;
  border-radius: 5px;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.15s;
}
/* Absolute, anchored to the list's top-right and lifted into the margin above it —
   out of flow, so it adds no height and moves no content. */
body.admin-mode .pfl-edit-btn {
  display: flex;
  position: absolute;
  right: 0;
  bottom: calc(100% + 2px);
  z-index: 10;
}
body.admin-mode .pfl-edit-btn:hover { opacity: 0.85; }
body.admin-editing-active .pfl-edit-btn { display: none !important; }

.pfl-panel {
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  padding: 12px;
  margin-top: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  min-width: 260px;
  max-width: 480px;
}
.pfl-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.pfl-row { display: flex; align-items: center; gap: 6px; }
.pfl-row-input {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 4px;
  font-size: 0.85rem;
  font-family: inherit;
  color: var(--text-dark, #111827);
  outline: none;
}
.pfl-row-input:focus { border-color: #ffd200; box-shadow: 0 0 0 2px rgba(255,210,0,0.25); }
.pfl-row-remove {
  flex-shrink: 0;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent;
  border-radius: 4px;
  background: none;
  font-size: 1rem; line-height: 1;
  color: var(--text-muted, #6b7280);
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.pfl-row-remove:hover { background: #fff0f0; border-color: #fed7d7; color: #c53030; }
.pfl-actions { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.pfl-add-btn {
  padding: 5px 10px;
  background: var(--bg-page, #f9fafb);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 4px;
  font-size: 0.78rem; font-weight: 700;
  font-family: inherit;
  color: var(--text-dark, #111827);
  cursor: pointer;
  transition: opacity 0.15s;
}
.pfl-add-btn:hover { opacity: 0.8; }
.pfl-btn-group { display: flex; gap: 6px; }
.pfl-save-btn, .pfl-cancel-btn {
  padding: 5px 14px;
  border-radius: 4px;
  font-size: 0.78rem; font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.15s;
}
.pfl-save-btn { background: #ffd200; border: 1px solid #ffd200; color: #1a1a2e; }
.pfl-save-btn:hover { opacity: 0.85; }
.pfl-save-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.pfl-cancel-btn {
  background: var(--bg-page, #f9fafb);
  border: 1px solid var(--border, #e5e7eb);
  color: #374151;
}
.pfl-cancel-btn:hover { border-color: #9ca3af; }



/* ════════════════════════════════════════════
   MOBILE — Desktop-only restrictions
   Admin editing is intentionally disabled on mobile.
   ════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Button stays visible so users see it; JS shows a "desktop only" toast */
  .admin-toggle-btn { opacity: 0.5; pointer-events: auto; }
  /* Belt-and-suspenders: hide all editing UI even if JS somehow enables it */
  .admin-mode::before { display: none; }
  .admin-mode .admin-edit-trigger { display: none !important; }
  .admin-action-bar { display: none !important; }
  .admin-mode .admin-photo-btn { display: none !important; }
  /* The manager itself refuses phone-sized viewports (admin.js revokes the session),
     so this link would only lead to a dead end. */
  .admin-mode .admin-header-link { display: none !important; }
}

/* ── "Edit this sermon" links on the public pages ──────────────
   Injected by sermon-edit-link.js when an admin is signed in, on /sermons/:slug and
   on each archive row. Lives in admin.css (not manage-sermons.css) because these
   appear on visitor pages, where only admin.css is loaded — and because they are
   admin chrome, so they belong with the rest of it. */

.rs-edit-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  color: #1b2436;
  background: var(--gold-500, #f3ca7d);
  border: 1px solid rgba(27, 36, 54, 0.15);
  border-radius: 9999px;
  padding: 0.4rem 0.7rem;
  text-decoration: none;
  cursor: pointer;
}
.rs-edit-link:hover { filter: brightness(0.96); }
.rs-edit-link:focus-visible { outline: 2px solid #cf6415; outline-offset: 2px; }

/* On the sermon page it sits with the other actions. */
.rs-edit-link--page { margin: 1rem 0 0; }

/* On an archive row it is a small square at the right-hand end, so it never competes
   with the sermon title or the play button. */
.rs-edit-link--row {
  flex: none;
  align-self: center;
  margin-left: 0.6rem;
  padding: 0.4rem;
}

/* Manager button under the sermon archive on /listen, injected by
   sermon-edit-link.js in admin mode. A block-level version of .rs-edit-link. */
.rs-archive-manage {
  margin: 2rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px dashed rgba(27, 36, 54, 0.2);
  text-align: center;
  max-width: 1160px;
}
.rs-edit-link--block {
  font-size: 0.95rem;
  padding: 0.6rem 1.2rem;
}
.rs-archive-manage-note {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.85rem;
  color: #6c7686;
  margin: 0.5rem 0 0;
}
@media (max-width: 768px) {
  /* Editing is desktop-only, so this would lead to a "use a desktop" panel. */
  .admin-mode .rs-archive-manage { display: none !important; }
}