/* ==========================================================================
   FBCTO app — shell chrome

   Everything below the shell section is the church website's pw- design
   system, carried over verbatim from memory-verse-page.html so the app and
   the website look like one church rather than two products. Only the
   chrome -- app bar, tab bar, view container -- is new.
   ========================================================================== */

:root {
  --app-bar-h: 52px;
  --app-tabs-h: 58px;
}

html, body { height: 100%; }

body {
  margin: 0;
  background: #fff;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #18303d;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

.app { min-height: 100%; }

/* The bar sits at 0 and adds the inset to its OWN padding, so it runs under
   the status bar rather than starting below it. */
.app-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;

  display: flex;
  align-items: center;
  gap: 10px;

  height: calc(var(--app-bar-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 16px 0;

  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--pw-border);
}

.app-bar h1 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--pw-blue-deep);
}

.app-refresh {
  margin-left: auto;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--pw-border);
  border-radius: 10px;
  background: #fff;
  color: var(--pw-blue-dark);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.app-refresh:active { background: var(--pw-blue-soft); }

.app-refresh.is-busy { opacity: .5; pointer-events: none; }

.app-view {
  padding-top: calc(var(--app-bar-h) + env(safe-area-inset-top, 0px));
  padding-bottom: calc(var(--app-tabs-h) + env(safe-area-inset-bottom, 0px));
  outline: none;
}

.app-boot { padding: 60px 20px; text-align: center; color: var(--pw-muted); }

.app-tabs {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 40;

  display: flex;
  height: calc(var(--app-tabs-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);

  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--pw-border);
}

.app-tab {
  flex: 1 1 0;
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;

  border: 0;
  background: none;
  padding: 6px 2px;
  font: inherit;
  font-size: 10.5px;
  font-weight: 650;
  color: var(--pw-muted);
  cursor: pointer;

  -webkit-tap-highlight-color: transparent;
}

.app-tab .app-tab-ico { font-size: 19px; line-height: 1.1; }

.app-tab.is-active { color: var(--pw-blue-dark); }

.app-tab:focus-visible {
  outline: 2px solid var(--pw-blue);
  outline-offset: -3px;
  border-radius: 8px;
}

/* ---- honest states -------------------------------------------------------
   An app that silently shows nothing when the network fails is worse than one
   that says so. Every view uses these rather than an empty screen. */

.app-msg {
  max-width: 30rem;
  margin: 40px auto;
  padding: 22px;
  border: 1px solid var(--pw-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--pw-shadow);
  text-align: center;
}

.app-msg-ico { font-size: 30px; display: block; margin-bottom: 10px; }
.app-msg h3 { margin: 0 0 7px; font-size: 17px; color: var(--pw-blue-deep); }
.app-msg p { margin: 0 0 6px; color: var(--pw-muted); font-size: 14.5px; line-height: 1.6; }

.app-msg-detail {
  margin-top: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  color: #93353a;
  word-break: break-word;
}

.app-msg .pw-btn { margin-top: 14px; }

/* ---- soon ---------------------------------------------------------------- */

.app-soon { text-align: center; padding: 50px 20px; }
.app-soon-ico { font-size: 40px; opacity: .55; }
.app-soon h2 { margin: 12px 0 8px; font-size: 20px; color: var(--pw-blue-deep); }
.app-soon p { max-width: 26rem; margin: 0 auto 8px; color: var(--pw-muted); font-size: 14.5px; line-height: 1.65; }


/* ---- the class home.js uses for its single call-to-action ----------------
   This was referenced before it existed, so the button fell back to no
   layout at all and sat left while everything around it was centred. The
   website's card centres its parts individually rather than centring the
   card, so an undefined wrapper inherits nothing. */
.pw-mv-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* ---- desktop -------------------------------------------------------------
   The app is built for a phone and installs as one, but it is also a URL
   anyone can open on a laptop. Rather than letting a verse stretch to 1100px
   -- which reads as a broken website rather than an app -- the whole thing is
   capped and centred, and the chrome is capped to match so the tab bar does
   not float away from the content above it. */
@media (min-width: 700px) {
  .app-view .pw-container { width: min(620px, calc(100% - 32px)); }
  .app-view .pw-mv-card { max-width: 620px; }

  .app-bar,
  .app-tabs {
    padding-left: max(16px, calc((100% - 620px) / 2));
    padding-right: max(16px, calc((100% - 620px) / 2));
  }

  .app-tabs { justify-content: center; }
  .app-tab { flex: 0 1 150px; }

  /* A pointer is not a thumb: give the tabs a hover state on desktop only. */
  .app-tab:hover { color: var(--pw-blue-dark); background: var(--pw-blue-pale); }
}



.home-install { border-style: dashed; box-shadow: none; background: var(--pw-blue-pale); }
.home-install .ico { background: #fff; font-size: 19px; font-weight: 700; color: var(--pw-blue-dark); }

.home-steps {
  margin: 10px 0 30px;
  padding: 16px 18px;
  border: 1px solid var(--pw-border);
  border-radius: 16px;
  background: #fff;
  font-size: 14px;
  line-height: 1.6;
}
.home-steps b { display: block; margin-bottom: 8px; color: var(--pw-blue-deep); }
.home-steps ol { margin: 0; padding-left: 20px; }
.home-steps li { margin-bottom: 5px; }
.home-steps .note { margin: 10px 0 0; color: var(--pw-muted); font-size: 13px; }

/* ---- app notes: install, update, offline ---------------------------------
   One bar style for all three. They sit above the tab bar rather than the top
   bar, because on a phone the bottom is where a thumb already is -- and
   because covering the title would hide which section you are in. */

.app-note {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(var(--app-tabs-h) + env(safe-area-inset-bottom, 0px) + 10px);
  z-index: 50;

  display: flex;
  align-items: center;
  gap: 10px;

  padding: 11px 12px 11px 15px;
  border-radius: 14px;

  background: #12303f;
  color: #fff;
  font-size: 13.5px;
  line-height: 1.45;
  box-shadow: 0 10px 30px rgba(10, 30, 45, .28);
}

.app-note[hidden] { display: none; }

.app-note span { flex: 1 1 auto; min-width: 0; }
.app-note b { font-weight: 750; }

.app-note-go {
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  padding: 7px 14px;
  background: var(--pw-blue);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.app-note-x {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.app-note-go:focus-visible,
.app-note-x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.app-note.is-offline { background: #6d4a0d; }
.app-note.is-update  { background: #14633d; }

@media (min-width: 700px) {
  .app-note {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(560px, calc(100% - 32px));
  }
}

/* ---- home ---------------------------------------------------------------- */

.home-greet {
  padding: 22px 0 4px;
  text-align: center;
}
.home-greet .eyebrow {
  margin: 0 0 4px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--pw-blue-dark);
}
.home-greet h2 {
  margin: 0;
  font-size: clamp(24px, 6vw, 30px);
  letter-spacing: -.025em;
  color: var(--pw-blue-deep);
}

.home-links { display: grid; gap: 10px; margin: 18px 0 30px; }

.home-link {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 14px 15px;
  border: 1px solid var(--pw-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(20,61,80,.05);
  font: inherit;
  text-align: left;
  color: var(--pw-text);
  cursor: pointer;
}

.home-link .ico {
  width: 40px; height: 40px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 13px;
  background: var(--pw-blue-soft);
  font-size: 19px;
}
.home-link b { display: block; font-size: 15.5px; font-weight: 750; }
.home-link span.sub { display: block; font-size: 12.5px; color: var(--pw-muted); }
.home-link .chev { margin-left: auto; color: var(--pw-blue); font-size: 17px; }


  :root {
    --pw-blue: #007dba;
    --pw-blue-dark: #005f8e;
    --pw-blue-deep: #174458;
    --pw-blue-soft: #edf8fc;
    --pw-blue-pale: #f7fcfe;

    --pw-text: #18303d;
    --pw-muted: #687b85;
    --pw-border: #dce8ed;

    --pw-success: #edf9f1;
    --pw-success-text: #276640;

    --pw-warning: #fff8e8;
    --pw-warning-text: #795917;

    --pw-danger: #fff1f1;
    --pw-danger-text: #8b3333;

    --pw-shadow: 0 12px 36px rgba(20, 61, 80, 0.08);
    --pw-shadow-hover: 0 18px 46px rgba(20, 61, 80, 0.13);
  }

  .pw-page,
  .pw-page * {
    box-sizing: border-box;
  }

  .pw-page {
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--pw-text);
    background: #fff;
  }

  .pw-container {
    width: min(1120px, calc(100% - 32px));
    margin: 0 auto;
  }

  /* =========================
     BUTTONS
  ========================= */

  .pw-btn {
    appearance: none;
    border: 0;
    border-radius: 999px;
    padding: 13px 22px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 760;
    cursor: pointer;
    transition:
      transform 0.18s ease,
      box-shadow 0.18s ease,
      background 0.18s ease,
      border-color 0.18s ease;
  }

  .pw-btn:hover {
    transform: translateY(-1px);
  }

  .pw-btn:disabled {
    opacity: 0.55;
    cursor: default;
    transform: none;
  }

  .pw-btn-primary {
    background: linear-gradient(135deg, var(--pw-blue), #0096cf);
    color: #fff;
    box-shadow: 0 8px 20px rgba(0, 125, 186, 0.22);
  }

  .pw-btn-primary:hover {
    box-shadow: 0 11px 25px rgba(0, 125, 186, 0.29);
  }

  .pw-btn-secondary {
    background: #fff;
    color: var(--pw-blue);
    border: 1px solid var(--pw-border);
  }

  .pw-btn-soft {
    background: var(--pw-blue-soft);
    color: var(--pw-blue-dark);
  }

  .pw-btn-small {
    padding: 9px 15px;
    font-size: 13px;
  }

  /* =========================
     SECTIONS
  ========================= */

  .pw-section {
    padding: 68px 0;
    background: #ffffff;
  }

  .pw-section-soft {
    background:
      linear-gradient(
        180deg,
        #ffffff 0%,
        #ffffff 8%,
        #f9fcfd 24%,
        #f3f9fb 50%,
        #f9fcfd 76%,
        #ffffff 92%,
        #ffffff 100%
      );
  }

  .pw-section-title {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 38px;
  }

  .pw-section-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    border-radius: 18px;
    font-size: 27px;
    background: #fff;
    border: 1px solid var(--pw-border);
    box-shadow: 0 8px 22px rgba(17, 66, 88, 0.08);
  }

  .pw-section-title h2 {
    margin: 0 0 11px;
    font-size: clamp(29px, 4vw, 42px);
    letter-spacing: -0.03em;
    color: #183847;
  }

  .pw-section-title p {
    color: var(--pw-muted);
    margin: 0;
    line-height: 1.68;
  }

  .pw-panel {
    background: #fff;
    border: 1px solid var(--pw-border);
    border-radius: 24px;
    padding: 28px;
    box-shadow: var(--pw-shadow);
  }

  /* =========================
     CHIPS
  ========================= */

  .pw-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 0 30px;
  }

  .pw-chip {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 17px;
    border-radius: 999px;
    border: 1px solid var(--pw-border);
    background: #fff;
    color: var(--pw-text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 760;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  }

  .pw-chip:hover {
    border-color: #b9dbe9;
    background: #f9fdff;
    transform: translateY(-1px);
  }

  .pw-chip.is-active {
    background: linear-gradient(135deg, #f4fbfe, #eaf7fc);
    border-color: #bfdfec;
    color: var(--pw-blue-dark);
    box-shadow: 0 0 0 3px rgba(0, 125, 186, 0.08);
  }

  .pw-empty {
    padding: 44px 24px;
    color: var(--pw-muted);
    line-height: 1.7;
  }

  /* ==========================================================================
     MEMORY VERSE
     ========================================================================== */

  .pw-mv-card {
    background: #fff;
    border: 1px solid var(--pw-border);
    border-radius: 26px;
    padding: 34px;
    box-shadow: var(--pw-shadow);
    max-width: 860px;
    margin: 0 auto;
  }

  .pw-mv-week {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--pw-blue-dark);
    margin-bottom: 8px;
  }

  .pw-mv-ref {
    font-size: clamp(22px, 3vw, 29px);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--pw-blue-deep);
    margin: 0 0 4px;
  }

  .pw-mv-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: var(--pw-muted);
    border: 1px solid var(--pw-border);
    border-radius: 999px;
    padding: 2px 10px;
    margin-left: 8px;
    vertical-align: middle;
  }

  .pw-mv-theme {
    font-size: 13.5px;
    color: var(--pw-muted);
    margin-bottom: 14px;
  }

  /* The verse itself. white-space: pre-wrap so a psalm typed in lines stays in
     lines — the portal preserves newlines and this is where that pays off. */
  .pw-mv-text {
    font-size: clamp(18px, 2.3vw, 22px);
    line-height: 1.72;
    white-space: pre-wrap;
    color: var(--pw-text);
    margin: 18px 0 0;
  }

  /* An archived verse sits inside a card that is already inside a list, so it
     reads at a slightly smaller size than this week's hero verse. */
  .pw-mv-past-text {
    font-size: 18px;
    margin-top: 4px;
  }

  .pw-mv-note {
    margin-top: 18px;
    padding: 15px 18px;
    border-radius: 16px;
    background: var(--pw-blue-pale);
    border: 1px solid #dceef6;
    font-size: 14.5px;
    line-height: 1.66;
    color: var(--pw-blue-deep);
  }

  /* ---- drill switcher ---- */

  .pw-mv-modes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
    margin: 26px 0 4px;
  }

  .pw-mv-hint {
    text-align: center;
    font-size: 13.5px;
    color: var(--pw-muted);
    line-height: 1.6;
    margin: 0 0 20px;
    min-height: 22px;
  }

  .pw-mv-stage {
    border-top: 1px solid var(--pw-border);
    padding-top: 24px;
    margin-top: 22px;
  }

  /* ---- fade ---- */

  .pw-mv-blank {
    appearance: none;
    font: inherit;
    font-size: inherit;
    border: 0;
    border-bottom: 2px solid var(--pw-blue);
    background: var(--pw-blue-soft);
    border-radius: 5px 5px 0 0;
    color: transparent;
    cursor: pointer;
    padding: 0 2px;
    transition: background 0.15s ease, color 0.15s ease;
  }

  .pw-mv-blank:hover {
    background: #d9eff8;
  }

  .pw-mv-blank.is-shown {
    color: var(--pw-blue-dark);
    background: transparent;
    border-bottom-color: #bcdcea;
  }

  .pw-mv-levels {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
    flex-wrap: wrap;
  }

  .pw-mv-bar {
    height: 7px;
    width: 148px;
    border-radius: 999px;
    background: var(--pw-border);
    overflow: hidden;
  }

  .pw-mv-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--pw-blue), #0096cf);
    transition: width 0.3s ease;
  }

  .pw-mv-level-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--pw-muted);
    font-variant-numeric: tabular-nums;
  }

  /* ---- first letters ---- */

  .pw-mv-letters {
    font-size: clamp(19px, 2.4vw, 24px);
    line-height: 2;
    letter-spacing: 0.04em;
    white-space: pre-wrap;
    color: var(--pw-blue-deep);
    font-weight: 700;
  }

  /* ---- put it in order ---- */

  .pw-mv-slot {
    min-height: 62px;
    border: 2px dashed #cfe3ec;
    border-radius: 16px;
    padding: 13px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start;
    background: var(--pw-blue-pale);
  }

  .pw-mv-bank {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 16px;
  }

  .pw-mv-word {
    appearance: none;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 11px;
    border: 1px solid var(--pw-border);
    background: #fff;
    color: var(--pw-text);
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.15s ease, opacity 0.15s ease;
  }

  .pw-mv-word:hover {
    border-color: #b9dbe9;
    transform: translateY(-1px);
  }

  .pw-mv-word.is-used {
    opacity: 0;
    pointer-events: none;
  }

  .pw-mv-word.is-placed {
    background: var(--pw-blue-soft);
    border-color: #bcdcea;
    color: var(--pw-blue-dark);
    cursor: default;
  }

  .pw-mv-word.is-wrong {
    border-color: #e5b4b4;
    background: var(--pw-danger);
    animation: pw-mv-shake 0.3s ease;
  }

  @keyframes pw-mv-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
  }

  .pw-mv-chunkmeta {
    text-align: center;
    font-size: 13px;
    color: var(--pw-muted);
    margin-bottom: 12px;
    font-variant-numeric: tabular-nums;
  }

  /* ---- done / progress ---- */

  .pw-mv-done {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--pw-border);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: center;
  }

  .pw-mv-known {
    background: var(--pw-success);
    color: var(--pw-success-text);
    border: 1px solid #c9e6d5;
    border-radius: 999px;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 760;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .pw-mv-progress {
    text-align: center;
    font-size: 13.5px;
    color: var(--pw-muted);
    margin-top: 14px;
    line-height: 1.6;
  }

  .pw-mv-linkbtn {
    appearance: none;
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    color: var(--pw-blue-dark);
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .pw-mv-linkbtn:hover { color: var(--pw-blue); }

  .pw-mv-transfer {
    max-width: 520px;
    margin: 16px auto 0;
    padding: 18px;
    border-radius: 16px;
    background: var(--pw-blue-pale);
    border: 1px solid #dceef6;
    text-align: left;
  }

  .pw-mv-transfer-label {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--pw-blue-deep);
    margin-bottom: 6px;
  }

  .pw-mv-transfer-row {
    display: flex;
    gap: 8px;
    align-items: center;
  }

  .pw-mv-code {
    flex: 1;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    border: 1px solid var(--pw-border);
    border-radius: 10px;
    padding: 9px 11px;
    background: #fff;
    color: var(--pw-text);
    /* A long code must not push the card wider than the phone. */
    overflow-x: auto;
  }

  .pw-mv-code:focus {
    outline: none;
    border-color: var(--pw-blue);
    box-shadow: 0 0 0 3px rgba(0, 125, 186, 0.13);
  }

  .pw-mv-transfer-note {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.55;
    color: var(--pw-muted);
  }

  .pw-mv-transfer-note.is-good { color: var(--pw-success-text); font-weight: 600; }
  .pw-mv-transfer-note.is-bad { color: var(--pw-danger-text); font-weight: 600; }

  /* ---- archive ---- */

  .pw-mv-list {
    display: grid;
    gap: 16px;
    max-width: 860px;
    margin: 0 auto;
  }

  .pw-mv-past {
    background: #fff;
    border: 1px solid var(--pw-border);
    border-radius: 20px;
    box-shadow: var(--pw-shadow);
    overflow: hidden;
  }

  .pw-mv-past-head {
    appearance: none;
    width: 100%;
    border: 0;
    background: #fff;
    font-family: inherit;
    padding: 20px 24px;
    display: flex;
    gap: 14px;
    align-items: center;
    cursor: pointer;
    text-align: left;
  }

  .pw-mv-past-head:hover {
    background: var(--pw-blue-pale);
  }

  /* A column, not two inline spans. They were both <span>, so the reference
     and the date ran together with no gap: "Philippians 4:6-7Week of…". */
  .pw-mv-past-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .pw-mv-past-ref {
    font-size: 17px;
    font-weight: 800;
    color: var(--pw-blue-deep);
  }

  .pw-mv-past-week {
    font-size: 13px;
    color: var(--pw-muted);
  }

  .pw-mv-past-tick {
    color: var(--pw-success-text);
    font-size: 15px;
    flex: 0 0 auto;
  }

  .pw-mv-caret {
    flex: 0 0 auto;
    color: var(--pw-muted);
    font-size: 13px;
    transition: transform 0.2s ease;
  }

  .pw-mv-past.is-open .pw-mv-caret {
    transform: rotate(180deg);
  }

  .pw-mv-past-body {
    display: none;
    padding: 0 24px 24px;
    border-top: 1px solid var(--pw-border);
  }

  .pw-mv-past.is-open .pw-mv-past-body {
    display: block;
  }

  .pw-mv-copy {
    font-size: 13px;
    color: var(--pw-muted);
    text-align: center;
    line-height: 1.75;
    max-width: 720px;
    margin: 36px auto 0;
  }

  /* ==========================================================================
     ALIGNMENT GUARD

     The Church Co page centres text inside its HTML block. Scripture reads
     fine centred and is deliberately left that way, but anything that runs to
     several lines of ordinary prose is not: centred prose gives every line a
     different starting point, so the eye has to hunt for the start of each.

     Anything holding prose states its own alignment rather than inheriting.
     Headings, the verse itself, chips and controls stay centred on purpose.
     ========================================================================== */

  .pw-mv-note,
  .pw-mv-past-head,
  .pw-mv-slot,
  .pw-mv-transfer {
    text-align: left;
  }

  .pw-section-title,
  .pw-mv-week,
  .pw-mv-ref,
  .pw-mv-theme,
  .pw-mv-text,
  .pw-mv-letters,
  .pw-mv-modes,
  .pw-mv-hint,
  .pw-mv-levels,
  .pw-mv-bank,
  .pw-mv-chunkmeta,
  .pw-mv-done,
  .pw-mv-progress,
  .pw-mv-copy,
  .pw-empty {
    text-align: center;
  }

  /* =========================
     RESPONSIVE
  ========================= */

  @media (max-width: 650px) {
    .pw-container {
      width: min(calc(100% - 22px), 1120px);
    }

    .pw-section {
      padding: 46px 0;
    }

    .pw-mv-card {
      padding: 24px 20px;
      border-radius: 20px;
    }

    .pw-mv-past-head {
      padding: 17px 18px;
    }

    .pw-mv-past-body {
      padding: 0 18px 20px;
    }

    .pw-mv-bar {
      width: 112px;
    }

    .pw-mv-word {
      font-size: 15px;
      padding: 7px 12px;
    }
  }