/* Sermons.Dev — design tokens and shared chrome.
   Light is the primary identity: warm paper, ink, one calm accent. Dark is a
   separate design rather than an inversion — warmer, softer contrast, built
   for a study at eleven at night. */

/* `hidden` has to win, everywhere, once.
   `display` set by any author rule beats the browser's own
   `[hidden] { display: none }` at equal specificity, so every component that
   sets a display value quietly re-renders anything the server or the script
   marked hidden. It has now cost three separate controls: the editor's Save
   button after autosave started, the Clean pasted chip on a bar with nothing
   to clean, and — the one this pass is for — Go Live on SlideControl, which
   the server marks hidden whenever the connected presentation system has no
   such operation, and which `.stage-btn { display: inline-flex }` painted
   anyway as a dead grey button in the middle of the transport.
   Two of those were fixed locally, in two stylesheets, which is how the third
   happened. This is app.css: every page loads it first. */
[hidden] { display: none !important; }

:root {
  --paper:        #FBFAF6;
  --paper-raised: #FFFFFF;
  --paper-sunk:   #F4F1E9;
  --paper-edge:   #FEFDFB;

  --line:        #E7E2D6;
  --line-strong: #D4CDBC;

  --ink:       #1A1917;
  --ink-soft:  #56534C;
  --ink-faint: #8C877D;

  --accent:        #2C5D5A;
  --accent-strong: #1E4441;
  --accent-tint:   #E3EDEB;
  --accent-ink:    #FFFFFF;

  --scripture:      #8A5628;
  --scripture-tint: #F7EEE1;

  --danger: #92392F;

  --shadow-soft: 0 1px 2px rgba(26, 25, 23, .04), 0 8px 24px -12px rgba(26, 25, 23, .12);
  --shadow-page: 0 1px 1px rgba(26, 25, 23, .03), 0 18px 50px -28px rgba(26, 25, 23, .22);
  --shadow-pop:  0 2px 6px rgba(26, 25, 23, .08), 0 24px 48px -20px rgba(26, 25, 23, .28);

  --font-serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Avenir Next', Inter, system-ui, sans-serif;
  /* New. Labels, dates and anything that wants a figure to line up under the
     one above it. A system stack: the marketing page loads IBM Plex Mono, and
     no authenticated screen is worth 20KB of webfont to letter-space a
     weekday header. */
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --radius: 10px;
  --radius-lg: 16px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #141311;
    --paper-raised: #1C1B18;
    --paper-sunk:   #100F0E;
    --paper-edge:   #232220;

    --line:        #2E2C27;
    --line-strong: #423F38;

    --ink:       #EFEBE2;
    --ink-soft:  #B3ADA1;
    --ink-faint: #837E74;

    --accent:        #7FB3AC;
    --accent-strong: #A2CCC6;
    --accent-tint:   #1E2C2A;
    --accent-ink:    #10201E;

    --scripture:      #CE9A64;
    --scripture-tint: #2A2219;

    --danger: #D98A7E;

    --shadow-soft: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
    --shadow-page: 0 1px 1px rgba(0, 0, 0, .3), 0 18px 50px -28px rgba(0, 0, 0, .8);
    --shadow-pop:  0 2px 6px rgba(0, 0, 0, .5), 0 24px 48px -20px rgba(0, 0, 0, .7);
  }
}

:root[data-theme="dark"] {
  --paper:        #141311;
  --paper-raised: #1C1B18;
  --paper-sunk:   #100F0E;
  --paper-edge:   #232220;

  --line:        #2E2C27;
  --line-strong: #423F38;

  --ink:       #EFEBE2;
  --ink-soft:  #B3ADA1;
  --ink-faint: #837E74;

  --accent:        #7FB3AC;
  --accent-strong: #A2CCC6;
  --accent-tint:   #1E2C2A;
  --accent-ink:    #10201E;

  --scripture:      #CE9A64;
  --scripture-tint: #2A2219;

  --danger: #D98A7E;

  --shadow-soft: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
  --shadow-page: 0 1px 1px rgba(0, 0, 0, .3), 0 18px 50px -28px rgba(0, 0, 0, .8);
  --shadow-pop:  0 2px 6px rgba(0, 0, 0, .5), 0 24px 48px -20px rgba(0, 0, 0, .7);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 .5em;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-strong); }

::selection { background: var(--accent-tint); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Brand ---------- */

.brand {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  white-space: nowrap;
}
.brand:hover { color: var(--ink); }
.brand .dot { color: var(--accent); }
.brand .tld { color: var(--ink-faint); font-weight: 500; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: .9375rem;
  font-weight: 550;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
  background: var(--accent);
  color: var(--accent-ink);
}
.btn:hover { background: var(--accent-strong); color: var(--accent-ink); }
.btn:active { transform: translateY(.5px); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover { background: var(--paper-sunk); color: var(--ink); border-color: var(--line-strong); }

.btn-quiet {
  background: transparent;
  border-color: transparent;
  color: var(--ink-soft);
  padding: 8px 12px;
}
.btn-quiet:hover { background: var(--paper-sunk); color: var(--ink); }

.btn-sm { padding: 7px 14px; font-size: .8438rem; }
.btn-block { width: 100%; }
.btn[disabled], .btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Forms ---------- */

label { display: block; font-size: .8125rem; font-weight: 600; color: var(--ink-soft); margin: 0 0 6px; }

/* `input:not([type])` is not tidiness — it is twelve real inputs.
   An <input> with no type attribute IS a text input, but `input[type=text]`
   is an attribute selector and matches nothing without the attribute. Twelve
   of them are written that way across the New Sermon page, the Series form,
   the Paper's details, the calendar's import panel and four admin forms, and
   every one of them has been rendering at the browser's default size next to
   siblings that fill the row. */
input:not([type]),
input[type=text], input[type=email], input[type=password], input[type=date], input[type=search],
select, textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--paper-raised);
  color: var(--ink);
  font-family: inherit;
  font-size: .9375rem;
  line-height: 1.4;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
textarea { resize: vertical; min-height: 88px; }
.field { margin-bottom: 18px; }
.field-hint { font-size: .75rem; color: var(--ink-faint); margin-top: 6px; }

.form-error {
  background: var(--scripture-tint);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--danger);
  color: var(--ink);
  padding: 10px 14px;
  border-radius: 6px;
  font-size: .875rem;
  margin-bottom: 18px;
}
.form-note {
  background: var(--accent-tint);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: .875rem;
  margin-bottom: 18px;
  color: var(--ink);
}

/* ---------- App chrome ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 clamp(16px, 4vw, 32px);
  height: 60px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  position: sticky;
  top: 0;
  z-index: 40;
}
.topbar-nav { display: flex; gap: 4px; margin-left: 8px; }
.topbar-nav a {
  padding: 7px 12px;
  border-radius: 8px;
  font-size: .875rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}
.topbar-nav a:hover { background: var(--paper-sunk); color: var(--ink); }
.topbar-nav a[aria-current="page"] { color: var(--ink); background: var(--paper-sunk); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.topbar form { margin: 0; }

/* The compact menu. A <details> element, so it works with JavaScript off. */
.topbar-menu { display: none; position: relative; }
.topbar-menu > summary {
  list-style: none; cursor: pointer;
  width: 42px; height: 42px; border-radius: 10px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
}
.topbar-menu > summary::-webkit-details-marker { display: none; }
.topbar-menu > summary::marker { content: ''; }
.topbar-menu > summary:hover { background: var(--paper-sunk); }
.menu-glyph { display: grid; gap: 4px; }
.menu-glyph span { display: block; width: 17px; height: 1.5px; background: var(--ink-soft); border-radius: 2px; }
.topbar-menu[open] > summary { background: var(--paper-sunk); }

.menu-panel {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 218px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-pop);
  padding: 6px;
  z-index: 60;
}
.menu-who {
  font-size: .75rem; color: var(--ink-faint);
  padding: 8px 12px 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.menu-item {
  display: block; width: 100%; text-align: left;
  padding: 12px; border-radius: 9px; border: 0; background: none;
  font: inherit; font-size: .9375rem; color: var(--ink); text-decoration: none;
  cursor: pointer; min-height: 44px;
}
.menu-item:hover { background: var(--paper-sunk); color: var(--ink); }
.menu-item[aria-current="page"] { background: var(--accent-tint); color: var(--accent-strong); font-weight: 600; }
.menu-sep { height: 1px; background: var(--line); margin: 5px 8px; }
.menu-signout { color: var(--ink-soft); }

/* Below this the full row cannot hold everything without shrinking type or
   pushing items off-screen, so navigation moves into the menu wholesale. */
@media (max-width: 720px) {
  .topbar { gap: 10px; padding: 0 14px; height: 58px; }
  .topbar-nav { display: none; }
  .topbar-signout { display: none; }
  .topbar-menu { display: block; }
  .topbar-new { padding: 9px 14px; }
}
@media (max-width: 400px) {
  .topbar-new { padding: 9px 12px; font-size: .875rem; }
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0;
  flex: none;
}
.theme-toggle:hover { background: var(--paper-sunk); color: var(--ink); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .icon-dark { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-dark { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-dark { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-light { display: none; }
}

.shell { max-width: 1080px; margin: 0 auto; padding: clamp(28px, 5vw, 56px) clamp(16px, 4vw, 32px) 96px; }
.shell-narrow { max-width: 720px; }

/* ---------- Type helpers ---------- */

.eyebrow {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.small { font-size: .8125rem; }
.serif { font-family: var(--font-serif); }

.section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 44px 0 14px;
}
.section-title h2 { font-size: 1.1875rem; margin: 0; }
.section-title a { font-size: .8125rem; text-decoration: none; }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------- Cards & lists ---------- */

.card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.stack { display: flex; flex-direction: column; gap: 10px; }

.row-link {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-raised);
  transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.row-link:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-soft);
  color: inherit;
}
.row-title { font-family: var(--font-serif); font-size: 1.0625rem; line-height: 1.3; margin: 0 0 3px; }
.row-meta { font-size: .8125rem; color: var(--ink-faint); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.row-meta .sep { opacity: .5; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: .6875rem;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--paper-sunk);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.pill-accent { background: var(--accent-tint); color: var(--accent-strong); border-color: transparent; }
/* The long acknowledgement is the default; a bar with no room swaps it. */
.pc-short { display: none; }

/* ---------- Pairing a presentation system ----------
   Three steps and a six-digit field. The field is the only thing on this card
   that needs to look like it wants something, so it is the only thing that
   does. */
.sc-steps {
  margin: 18px 0 14px;
  padding-left: 20px;
  color: var(--ink-soft);
  font-size: .9375rem;
  line-height: 1.6;
}
.sc-steps li { margin-bottom: 4px; }
.sc-code {
  display: block;
  width: 100%;
  max-width: 260px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .18em;
  text-align: center;
  padding: 12px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--paper-raised);
  color: var(--ink);
}
.sc-code:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sc-confirm {
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px; font-size: .875rem; color: var(--ink-soft);
}
.sc-actions { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
/* Workspace and screens, as a pastor's church names them. */
.sc-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; margin: 14px 0 0; }
.sc-facts dt {
  font-size: .75rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint); align-self: baseline;
}
.sc-facts dd { margin: 0; color: var(--ink); }
.sc-expiry { margin: 14px 0 0; font-size: .875rem; color: var(--ink-soft); line-height: 1.5; }
.sc-expiry[data-expiry="soon"], .sc-expiry[data-expiry="past"] { color: var(--scripture); }
.pill-scripture { background: var(--scripture-tint); color: var(--scripture); border-color: transparent; }

.empty {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  text-align: center;
  color: var(--ink-soft);
  background: transparent;
}
.empty p { margin: 0 0 16px; }

/* ---------- Auth pages ---------- */

.auth-wrap { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr; }
.auth-head { padding: 24px clamp(16px, 4vw, 32px); display: flex; align-items: center; justify-content: space-between; }
.auth-main { display: grid; place-items: start center; padding: clamp(12px, 5vh, 56px) 20px 80px; }
.auth-card { width: 100%; max-width: 400px; }
.auth-card h1 { font-size: 1.75rem; margin-bottom: 6px; }
.auth-card > p.lede { color: var(--ink-soft); margin: 0 0 28px; font-size: .9375rem; }
.auth-alt { margin-top: 24px; font-size: .875rem; color: var(--ink-soft); text-align: center; }

/* ---------- Dashboard ---------- */

.greeting { font-size: clamp(1.75rem, 4vw, 2.25rem); margin: 0 0 4px; }
.greeting-sub { color: var(--ink-soft); margin: 0 0 36px; }

.continue-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
  padding: 28px 30px;
  box-shadow: var(--shadow-soft);
  transition: box-shadow .18s ease, border-color .18s ease;
}
.continue-card:hover { box-shadow: var(--shadow-pop); border-color: var(--line-strong); color: inherit; }
.continue-card .eyebrow { margin-bottom: 12px; display: block; }
.continue-card h2 { font-size: clamp(1.375rem, 3vw, 1.75rem); margin: 0 0 8px; }
.continue-card .continue-meta { font-size: .875rem; color: var(--ink-soft); }
.continue-card .continue-cta { margin-top: 18px; font-size: .875rem; font-weight: 600; color: var(--accent); }

.quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 16px; }
.quick-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-raised);
  padding: 18px 20px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.quick-tile:hover { border-color: var(--line-strong); box-shadow: var(--shadow-soft); color: inherit; }
.quick-tile strong { font-family: var(--font-serif); font-weight: 500; font-size: 1.0625rem; }
.quick-tile span { font-size: .8125rem; color: var(--ink-faint); }

.capture {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-top: 14px;
}
.capture input { flex: 1; }
@media (max-width: 520px) { .capture { flex-direction: column; } }

/* ---------- Library ---------- */

.library-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 22px;
}
.library-controls form { display: contents; }
.library-controls input[type=search] { flex: 1 1 240px; }
.library-controls select { flex: 0 0 auto; width: auto; min-width: 150px; }

.filter-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.filter-chips a {
  font-size: .8125rem;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink-soft);
}
.filter-chips a:hover { background: var(--paper-sunk); color: var(--ink); }
.filter-chips a[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ---------- Series ---------- */

.series-head { border-bottom: 1px solid var(--line); padding-bottom: 28px; margin-bottom: 8px; }
.series-head h1 { font-size: clamp(2rem, 5vw, 2.75rem); margin-bottom: 10px; }
.series-head .big-idea { font-family: var(--font-serif); font-size: 1.125rem; line-height: 1.6; color: var(--ink-soft); max-width: 60ch; }

/* The series, in the order it is preached. An <ol> now rather than a stack of
   links, because the numbering is the content and a list of links does not
   tell a screen reader that this one comes after that one. */
.series-list { list-style: none; margin: 18px 0 0; padding: 0; }
.series-item { display: flex; gap: 14px; align-items: center; padding: 16px 4px; border-bottom: 1px solid var(--line); }
.series-item:hover { background: var(--paper-sunk); }
.series-item-main { flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.series-item-main:hover { color: inherit; }

/* Quiet until the row is under the pointer, and always there on a touch
   screen, where there is no pointer to put anywhere. */
.series-actions { display: flex; gap: 2px; flex: none; opacity: .35; transition: opacity .12s ease; }
.series-item:hover .series-actions, .series-actions:focus-within { opacity: 1; }
@media (hover: none) { .series-actions { opacity: .75; } }
.series-actions form { margin: 0; }
.series-btn {
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid transparent; border-radius: 7px; background: none;
  color: var(--ink-faint); font: inherit; font-size: .9375rem; line-height: 1; cursor: pointer;
}
.series-btn:hover { background: var(--paper-raised); border-color: var(--line-strong); color: var(--ink); }
.series-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.series-btn:disabled { opacity: .3; cursor: default; }
.series-btn:disabled:hover { background: none; border-color: transparent; color: var(--ink-faint); }
.series-num { font-family: var(--font-serif); font-size: .875rem; color: var(--ink-faint); min-width: 26px; font-variant-numeric: tabular-nums; }
.series-item h3 { margin: 0 0 3px; font-size: 1.125rem; }

/* ---------- Modal ---------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--paper-sunk) 70%, transparent);
  backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 100;
}
.modal-backdrop[hidden] { display: none; }
.modal {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  width: 100%;
  max-width: 480px;
  max-height: 88dvh;
  overflow: auto;
  padding: 26px 28px;
}
.modal h2 { font-size: 1.25rem; margin-bottom: 4px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }
@media (max-width: 520px) { .modal-actions { flex-direction: column-reverse; } .modal-actions .btn { width: 100%; } }

/* Turnstile sits between the last field and the submit button; it needs room
   to reserve its own height so the button does not jump when the widget
   finishes loading. */
.turnstile-slot { margin: 20px 0 4px; min-height: 65px; }
.turnstile-slot:empty { min-height: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- After preaching ---------- */

.after-list { display: grid; gap: 10px; margin-bottom: 22px; }
.after-note {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper-raised); cursor: pointer;
}
.after-note:hover { border-color: var(--line-strong); }
.after-note input { width: auto; margin-top: 3px; }
.after-note-body { display: grid; gap: 3px; min-width: 0; }
.after-note-text { font-size: .9375rem; overflow-wrap: anywhere; }
.after-note-anchor, .after-note-state { font-size: .75rem; color: var(--ink-faint); }
.after-note[data-kind="emergency"] { border-left: 3px solid var(--danger); }
.after-note[data-kind="important"] { border-left: 3px solid var(--accent); }
.after-note[data-kind="timing"] { border-left: 3px solid var(--scripture); }
.after-actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 520px) { .after-actions .btn { flex: 1 1 100%; } }

/* ---------- Presentation settings ---------- */

.form-good {
  background: var(--accent-tint);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--accent);
  color: var(--ink);
  padding: 10px 14px;
  border-radius: 6px;
  font-size: .875rem;
  margin-bottom: 18px;
}

.card-sep { border: none; border-top: 1px solid var(--line); margin: 24px 0 18px; }
.connected-line { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; color: var(--ink-soft); }

.channel-list { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 4px; }

/* A screen is a physical thing in a room, so it is picked from a list of
   named things — not from a dropdown of identifiers. */
.channel-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-raised);
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: border-color .15s ease;
}

.channel-row:hover, .channel-row:focus-visible { border-color: var(--line-strong); }
.channel-row[aria-current="true"] { border-color: var(--accent); }
.channel-name { font-weight: 600; }
.channel-meta { margin-left: auto; font-size: .8125rem; color: var(--ink-faint); }
.channel-row[aria-current="true"] .channel-meta { margin-left: auto; }

/* ---------- After preaching: erasure ---------- */

/* Set apart from the three dispositions, and quieter than all of them. A
   pastor should reach it deliberately, never on the way to something else. */
.after-erase {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.after-erase .small { margin: 0; max-width: 52ch; }
.after-erase-btn { color: var(--danger); border-color: var(--line-strong); }
.after-erase-btn:hover { border-color: var(--danger); background: var(--paper-sunk); }

/* A toggle that is currently on, in a quiet toolbar. */
.btn-quiet.is-on { background: var(--accent-tint); color: var(--accent-strong); border-color: var(--accent); }

/* ---------- How it reads: size and width, together ---------- */

/* One instrument, not two buttons that happen to be neighbours. A pastor
   adjusting how big the text is almost always wants to adjust how wide it runs
   in the same breath -- they are the two halves of "can I read this" -- so the
   pair is grouped, bordered once, and separated inside by a hairline rather
   than by empty space. */
.reading-controls {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-raised);
}

.rc-btn {
  border: none; background: none; cursor: pointer;
  font: inherit; font-size: .8125rem; font-weight: 700; color: var(--ink-soft);
  padding: 5px 10px; border-radius: 999px; line-height: 1;
  min-height: 30px;
}
.rc-btn:hover:not(:disabled) { background: var(--paper-sunk); color: var(--ink); }
.rc-btn:disabled { color: var(--ink-faint); cursor: default; }
.rc-step { font-variant-numeric: tabular-nums; min-width: 5ch; }

.rc-sep { width: 1px; align-self: stretch; margin: 4px 4px; background: var(--line); }

.rc-range { width: 108px; accent-color: var(--accent); cursor: pointer; margin: 0 4px; }
.rc-out {
  font-size: .75rem; font-weight: 700; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; min-width: 5.5ch; text-align: right; padding-right: 6px;
}
.rc-reset {
  border: none; background: none; cursor: pointer; color: var(--accent-strong);
  font-size: .875rem; line-height: 1; padding: 4px 8px; border-radius: 999px;
}
.rc-reset:hover { background: var(--accent-tint); }
.rc-reset[hidden] { display: none; }

/* Narrow screens keep the size buttons -- legibility matters most there -- and
   give up the width, because a phone column is as wide as the phone. */
@media (max-width: 900px) {
  .reading-controls .rc-range,
  .reading-controls .rc-out,
  .reading-controls .rc-sep,
  .reading-controls .rc-reset { display: none; }
}

@media print { .reading-controls { display: none; } }

/* ---------- Reading a reference in place ---------- */

/* In app.css because every surface that shows a manuscript can show a
   passage: the Sermon Paper, Preview and the Preaching Console. One copy, so
   a reference cannot look clickable on one page and inert on another. */
/* A reference that can be read without leaving the page. Underlined faintly
   rather than styled like a link: it is not going anywhere. */
.ref-live {
  cursor: help;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-strong);
}
.ref-live:hover, .ref-live[aria-expanded="true"] { text-decoration-color: var(--scripture); }

.passage {
  position: absolute; z-index: 60; max-width: min(420px, calc(100vw - 24px));
  background: var(--paper-raised); border: 1px solid var(--line-strong);
  border-radius: 12px; padding: 14px 16px; box-shadow: 0 14px 40px rgba(0,0,0,.16);
}
.passage-ref {
  font-size: .75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--scripture); margin-bottom: 8px;
}
.passage-body {
  font-family: var(--font-serif); font-size: .9375rem; line-height: 1.62; color: var(--ink);
  max-height: 46vh; overflow-y: auto;
}
.passage-body .v { display: inline; }
.passage-body .vn {
  font-family: var(--font-sans); font-size: .625rem; font-weight: 700;
  color: var(--ink-faint); vertical-align: super; margin-right: 3px;
}
.passage-foot {
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line);
}
/* Crossway requires the notice wherever the text appears. It is not optional
   chrome and it is never hidden. */
.passage-attr { font-size: .6875rem; color: var(--ink-faint); }
.passage-insert {
  border: 1px solid var(--line-strong); background: var(--paper); border-radius: 7px;
  font: inherit; font-size: .75rem; font-weight: 600; padding: 6px 10px; cursor: pointer;
  color: var(--ink); white-space: nowrap;
}
.passage-insert:hover { border-color: var(--accent); color: var(--accent-strong); }
.passage-loading { color: var(--ink-faint); font-style: italic; }

/* On a touch screen the card must not swallow the tap meant for what is
   underneath it.
   The card opens below the reference, which is very often directly on top of
   the next paragraph — so with pointer events on, tapping the NEXT reference
   hit the card instead and nothing happened. On a pointer device the card
   keeps them, because moving the cursor into it to read is the whole point;
   on touch there is no such gesture, so taps pass straight through and a
   second reference opens the way it should.

   A passage long enough to need scrolling takes them back, because scrolling
   is the one thing a finger does to the card itself. Tapping anywhere outside
   it still dismisses it either way. */
@media (hover: none) {
  .passage { pointer-events: none; }
  .passage[data-scrollable="true"] { pointer-events: auto; }
}

@media print { .passage { display: none; } }



/* ---------------------------------------------------------------------------
   The preaching layer.

   A note written mid-sermon, the composer that writes it, the chips that reach
   for it, and Focus Mode's way out. These moved here from read.css and
   console.css when the Slides workspace became a surface a pastor preaches
   from and needed all four: they describe how a note LOOKS, which does not
   depend on which page it is laid on, and a second copy of that is how two
   surfaces start disagreeing about the same object.

   What stayed behind is what really is surface-specific — where the console
   puts its bar, what Focus Mode does to the stage.
   --------------------------------------------------------------------------- */

.sticky {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  align-items: start;
  font-family: var(--font-sans);
  font-size: .8125rem;
  line-height: 1.45;
  padding: 9px 10px 10px 12px;
  border-radius: 3px 8px 8px 3px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-faint);
  background: var(--paper-raised);
  box-shadow: 0 1px 2px rgba(26, 25, 23, .05), 0 6px 14px -10px rgba(26, 25, 23, .3);
  max-width: 100%;
  overflow-wrap: anywhere;
}
:root[data-theme="dark"] .sticky,
:root:not([data-theme="light"]) .sticky { box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 14px -10px rgba(0,0,0,.7); }

.sticky-kind {
  grid-column: 1;
  font-size: .625rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-faint);
}
.sticky-text { grid-column: 1; color: var(--ink); }
.sticky-dismiss {
  grid-column: 2; grid-row: 1 / span 2;
  border: 0; background: none; cursor: pointer;
  color: var(--ink-faint); font-size: .9375rem; line-height: 1;
  padding: 4px 2px; margin: -2px -2px 0 0;
  min-width: 28px; min-height: 28px;
  border-radius: 6px;
}
.sticky-dismiss:hover { background: var(--paper-sunk); color: var(--ink); }

/* The four kinds. Hierarchy by weight and edge, not by hue saturation. */
.sticky[data-kind="note"] { border-left-color: var(--line-strong); }

.sticky[data-kind="important"] {
  border-left-color: var(--accent);
  background: var(--accent-tint);
}
.sticky[data-kind="important"] .sticky-kind { color: var(--accent-strong); }

.sticky[data-kind="timing"] {
  border-left-color: var(--scripture);
  background: var(--scripture-tint);
}
.sticky[data-kind="timing"] .sticky-kind { color: var(--scripture); }

.sticky[data-kind="emergency"] {
  border-left-width: 4px;
  border-left-color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 30%, var(--line));
  background: color-mix(in srgb, var(--danger) 7%, var(--paper-raised));
}
.sticky[data-kind="emergency"] .sticky-kind { color: var(--danger); font-weight: 800; }
.sticky[data-kind="emergency"] .sticky-text { font-weight: 550; }

/* Set aside while preaching. Still there, visibly retired, one tap to bring
   back — never deleted by a mid-sermon gesture. */
.sticky[data-dismissed="true"] {
  opacity: .45;
  box-shadow: none;
  background: transparent;
}
.sticky[data-dismissed="true"] .sticky-text { text-decoration: line-through; text-decoration-thickness: 1px; }

.preach-exit-btn, .preach-chip {
  border: 1px solid var(--line-strong); background: var(--paper-raised); color: var(--ink);
  border-radius: 999px; padding: 9px 16px; font: inherit; font-size: .875rem; font-weight: 550;
  cursor: pointer; min-height: 40px; white-space: nowrap;
}
.preach-exit-btn:hover, .preach-chip:hover { background: var(--paper-sunk); }
.preach-chip[aria-pressed="true"] { background: var(--accent-tint); border-color: var(--accent); color: var(--accent-strong); }

.sticky-composer {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  top: calc(env(safe-area-inset-top) + 56px);
  z-index: 70;
  width: min(520px, calc(100vw - 24px));
  background: var(--paper-raised);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-pop);
  padding: 14px;
}
.sticky-composer[hidden] { display: none; }
.sticky-composer textarea {
  width: 100%; font-family: var(--font-sans); font-size: 1rem; line-height: 1.5;
  border: 1px solid var(--line-strong); border-radius: 8px; padding: 10px 12px;
  background: var(--paper); color: var(--ink); resize: vertical; min-height: 62px;
}
.sticky-kinds { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.sticky-kind-btn {
  border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink-soft);
  border-radius: 999px; padding: 8px 14px; font: inherit; font-size: .8125rem; font-weight: 600;
  cursor: pointer; min-height: 40px;
}
.sticky-kind-btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.sticky-composer-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.sticky-anchor-hint { flex: 1; font-size: .75rem; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* On a phone the composer comes to the thumb rather than staying under the top
   bar. The console overrides the offset for its own bottom chrome; this is the
   sensible default for a surface without any. */
@media (max-width: 560px) {
  .sticky-composer { top: auto; bottom: calc(env(safe-area-inset-bottom) + 20px); }
  .sticky-composer-actions { flex-wrap: wrap; }
  .sticky-anchor-hint { flex-basis: 100%; order: 3; }
}

.focus-escape {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: none; justify-content: center;
  padding: 6px;
  opacity: 0; transition: opacity .2s ease;
}
body.focus-mode .focus-escape { display: flex; }
.focus-escape:hover, .focus-escape:focus-within { opacity: 1; }
.focus-escape button {
  border: 1px solid var(--line-strong); background: var(--paper-raised); color: var(--ink-soft);
  border-radius: 999px; padding: 6px 14px; font: inherit; font-size: .8125rem; cursor: pointer;
}

/* ---------- The sermon nav ----------

   One sermon, three stages and two actions, in the same place on every
   surface and at every width. Paper / Sermon slides / SlideControl are where
   the sermon IS; Preview and Print are things done to it, and they are the
   only things allowed to yield when the row runs out of room.

   They were one undifferentiated row, so when it ran out of width it was the
   stages that went: 270px of them scrolled out of sight on an iPad in
   landscape, and the whole row hidden on Paper below 1280px. The way between
   the three surfaces was in a different place on every surface and every
   width.

   Restrained on purpose — workspace navigation, not a wizard. The current
   stage is the raised chip; everything else is plain text on the bar's own
   ground. */
.sermon-nav { display: flex; align-items: center; gap: 10px; min-width: 0; flex: none; }
.sermon-stages, .sermon-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.sermon-stages { padding: 3px; border-radius: 999px; background: var(--paper-sunk); }
.sermon-nav a, .sermon-nav [data-stage] {
  display: inline-block; padding: 5px 13px; border-radius: 999px;
  font-size: .8125rem; font-weight: 550; line-height: 1.3;
  color: var(--ink-soft); text-decoration: none; white-space: nowrap;
  transition: color 140ms ease, background 140ms ease;
}
.sermon-nav a:hover { color: var(--ink); }
.sermon-nav [aria-current="page"] {
  background: var(--paper-raised); color: var(--ink); box-shadow: var(--shadow-soft);
}
.sermon-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Present, and not yet available. Plainly inert — not a link, not a button,
   nothing to press — with the reason on the element rather than in a banner,
   because pressing it must never become a hidden way to publish. */
.sermon-nav [data-locked] { color: var(--ink-faint); cursor: default; opacity: .7; }
.sermon-nav [data-locked]::after {
  content: '\2009\1F512'; font-size: .6875rem; opacity: .8;
}

.sermon-actions a { font-weight: 450; color: var(--ink-faint); }
.sermon-actions a:hover { color: var(--ink); background: var(--paper-sunk); }

/* The actions yield first, and only they — except the one the pastor is
   standing on, which always stays so the current page never vanishes from its
   own navigation. */
@media (max-width: 1280px) {
  .sermon-actions a:not([data-keep]) { display: none; }
}
@media (max-width: 460px) {
  .sermon-nav a, .sermon-nav [data-stage] { padding: 5px 9px; font-size: .75rem; }
  .sermon-stages { padding: 2px; }
  .sermon-nav { gap: 6px; }
}
/* Tighter again rather than dropping anything: all three stages stay reachable
   on a phone, which is the whole point of the row. */
@media (max-width: 420px) {
  .sermon-nav a, .sermon-nav [data-stage] { padding: 4px 7px; font-size: .6875rem; }
  .sermon-nav [data-locked]::after { display: none; }
}

/* ---------- Publication state ----------

   Three states, the same words wherever a pastor meets them. It was legible
   on Paper alone; Preview and the Slides workspace said it by a button
   changing from "Publish" to "Update published", which tells nobody anything.

   Read-only and quiet: a chip, never a banner, never a control. */
.pub-chip {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 4px 11px 4px 9px; border-radius: 999px;
  font-size: .75rem; font-weight: 550; white-space: nowrap;
  border: 1px solid var(--line); background: var(--paper-raised); color: var(--ink-soft);
}
.pub-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--ink-faint); flex: none; }
.pub-chip[data-state="current"] { border-color: transparent; background: var(--accent-tint); color: var(--accent-strong); }
.pub-chip[data-state="current"] .pub-dot { background: var(--accent); }
.pub-chip[data-state="ahead"] .pub-dot { background: var(--scripture); }
@media (max-width: 860px) { .pub-chip { padding: 4px 9px 4px 8px; font-size: .6875rem; } }

/* ---------- Choosing how to begin ----------

   The New Sermon page's template chooser. It used `.way`, a home-page class,
   on a page that has never loaded home.css — so it has always rendered as four
   loose radio buttons with paragraphs after them. These are app classes, in
   the app's stylesheet, on the page that uses them.

   The whole card is the control: the radio is still the element, still
   focusable and still what a screen reader announces, but a pastor should be
   able to hit the card rather than a 13px circle. */
.tpl-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  margin-top: 24px;
}
.tpl {
  position: relative; display: block; cursor: pointer;
  padding: 18px 18px 20px;
  border: 1px solid var(--line); border-radius: var(--radius-lg, 12px);
  background: var(--paper-raised);
  transition: border-color .12s ease, background .12s ease;
}
.tpl:hover { border-color: var(--line-strong); }
.tpl input {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
.tpl:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, var(--paper-raised));
}
.tpl:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.tpl-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
/* A tick that is only drawn when chosen. Colour is not the only signal: the
   border changes, the mark appears, and the radio itself still reports state. */
.tpl-mark {
  width: 18px; height: 18px; border-radius: 999px; flex: none;
  border: 1.5px solid var(--line-strong); display: grid; place-items: center;
  font-size: 11px; line-height: 1; color: transparent;
}
.tpl:has(input:checked) .tpl-mark {
  border-color: var(--accent); background: var(--accent); color: var(--accent-ink);
}
.tpl-mark::before { content: '✓'; }
.tpl h3 { margin: 0; font-family: var(--font-serif); font-size: 1.0625rem; font-weight: 500; }
.tpl-tagline { margin: 0 0 6px; font-size: .875rem; font-weight: 550; color: var(--ink); }
.tpl p { margin: 0; font-size: .8125rem; line-height: 1.55; color: var(--ink-soft); }

@media (max-width: 640px) { .tpl-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- A field with a second way to answer it ----------

   Pick a series, or name one that does not exist yet. Two controls for one
   decision, both visible, because hiding one behind the other needs script and
   this page has none — and a pastor who cannot see the second one will go and
   create the series somewhere else first, which is the round trip this is
   here to remove. */
.field-or {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: 10px; margin-top: 10px;
}
.field-or > label {
  margin: 0; font-size: .75rem; font-weight: 600; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: .06em; white-space: nowrap;
}
@media (max-width: 480px) { .field-or { grid-template-columns: minmax(0, 1fr); gap: 6px; } }

.tpl-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
/* Two short fields side by side rather than each one alone on its own row. */
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
@media (max-width: 560px) { .field-row { grid-template-columns: minmax(0, 1fr); } }

/* ---------- The series index ----------

   The list is the page. Creating a series is done once and then rarely; it
   was a permanent full-width card sitting above the thing a pastor comes here
   to look at, which put the rare act in front of the frequent one. It folds
   away behind one control now — and unfolds into the whole page when there
   are no series yet, because then it IS the thing to do. */
.series-index-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.series-index-head h1 { font-size: clamp(1.75rem, 4vw, 2.25rem); margin: 0; }
.series-index-head p { margin: 4px 0 0; }

.series-new { margin: 22px 0 18px; }
.series-new > summary {
  display: inline-flex; align-items: center; list-style: none; cursor: pointer;
}
.series-new > summary::-webkit-details-marker { display: none; }
.series-new > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.series-new[open] > summary { margin-bottom: 14px; }

.series-welcome { margin-top: 26px; max-width: 560px; }
.series-welcome h2 { font-size: 1.375rem; margin: 0 0 8px; }
.series-welcome p { margin: 0 0 22px; }

/* Kept, and not competing with the working list. Closed by default with its
   count on the summary, so a pastor can see there are archived series without
   having to scroll past them every time. */
.series-archived { margin-top: 32px; border-top: 1px solid var(--line); padding-top: 18px; }
.series-archived > summary {
  display: flex; align-items: center; gap: 9px; cursor: pointer; list-style: none;
  font-size: .8125rem; font-weight: 600; color: var(--ink-soft);
}
.series-archived > summary::-webkit-details-marker { display: none; }
.series-archived > summary::before { content: '›'; transition: transform .12s ease; display: inline-block; }
.series-archived[open] > summary::before { transform: rotate(90deg); }
.series-archived > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.series-archived .field-hint { margin: 10px 0 14px; }
.series-archived .row-link { opacity: .78; }
.series-archived .row-link:hover { opacity: 1; }
.series-count {
  font-size: .6875rem; font-weight: 650; color: var(--ink-faint);
  background: var(--paper-sunk); border-radius: 999px; padding: 2px 8px;
}

/* A note that explains rather than warns: nothing has gone wrong. */
.field-hint-note {
  margin-top: 8px; padding: 9px 12px; border-radius: 8px;
  background: var(--paper-sunk); color: var(--ink-soft); line-height: 1.5;
}