/* Guided setup (/setup) + the home-page "you're not getting notifications"
   banner.

   Everything here uses the existing CSS custom properties from app.css
   (--card, --text, --text-muted, --border, --amber-700/600/100, --shadow) so
   the staff theme editor (/admin/theme -> /theme.css) keeps applying. No
   hardcoded brand colours.

   Type and hit targets are deliberately larger than the rest of the app: the
   congregation skews over 60, and this is the one page a member reads while
   holding the phone at arm's length. Buttons are >= 52px tall (the WCAG floor
   is 44px). */

.setup-wrap {
  max-width: 42rem;
  margin: 0 auto;
  padding: 4px 0 24px;
}

.setup-foot {
  font-size: 1rem;
  color: var(--text-muted);
  margin-top: 22px;
  line-height: 1.5;
}

.setup-pending-note,
.setup-already {
  margin-bottom: 16px;
  line-height: 1.5;
}

/* ---- badge / hero ----------------------------------------------------- */

/* The first thing on the page, because "do I need the App Store?" is the
   objection members actually voice. Answering it before the headline stops
   people leaving before they read anything else. */

/* ---- benefit tiles ---------------------------------------------------- */

/* One column on a phone. Two only from 34rem, so the text never gets narrow
   enough to hyphenate for a reader holding the phone at arm's length. */
@media (min-width: 34rem) {
  .setup-tiles { grid-template-columns: 1fr 1fr; }
}
.setup-tile-svg { width: 24px; height: 24px; display: block; }

/* ---- phone mockup ----------------------------------------------------- */

/* Drawn in HTML and CSS rather than shipped as a screenshot: a screenshot
   goes stale the first time the app changes, ignores the staff theme, and is
   another file to cache. aria-hidden in the markup -- it is decoration. */

/* ---- the "now do this" heading ---------------------------------------- */

/* No border-top any more: it existed to separate this heading from the
   benefit tiles and phone mockup that used to sit above it. With those gone
   this is the first thing under the lede, and the rule read as a stray line. */
.setup-steps-h {
  /* The only heading in the page body; the topbar carries the h1. */
  font-size: 1.45rem;
  margin: 6px 0 4px;
  color: var(--text);
}
.setup-steps-sub {
  margin: 0 0 14px;
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.45;
}

/* ---- QR block (desktop branch) ---------------------------------------- */

.setup-qr-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin: 4px 0 6px;
}

/* White plate behind the code regardless of theme: a QR needs light modules
   to be light, and a dark theme would otherwise invert it and stop phones
   reading it. */
.setup-qr-img {
  flex: 0 0 auto;
  width: 220px;
  height: 220px;
  background: #fff;
  padding: 6px;
  border-radius: 10px;
  border: 1px solid var(--border);
  display: block;
}

.setup-qr-steps { flex: 1 1 15rem; margin-bottom: 0; }

.setup-url-text {
  font-weight: 700;
  word-break: break-all;
  color: var(--text);
}

.setup-alt { margin-top: 14px; }

.setup-glyph-dots { font-weight: 700; }

/* ---- the step list --------------------------------------------------- */

.setup-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.setup-step {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  margin: 0 0 14px;
  overflow: hidden;
}

/* A step that does not apply to this device is removed from the flow
   entirely rather than shown as impossible -- see setup.js. */
.setup-step[hidden] { display: none; }

.setup-step-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}

.setup-step-mark {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  background: var(--amber-100);
  color: var(--amber-700);
  border: 2px solid var(--amber-200);
}

.setup-step-title {
  font-size: 1.2rem;
  margin: 0;
  flex: 1 1 auto;
  line-height: 1.25;
  color: var(--text);
}

.setup-step-state {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.setup-step-body {
  padding: 0 16px 18px;
  font-size: 1.05rem;
  line-height: 1.55;
}

/* done */
.setup-step-done .setup-step-mark {
  background: var(--amber-700);
  border-color: var(--amber-700);
  color: #fff;
  font-size: 0;
}
.setup-step-done .setup-step-mark::after {
  content: "\2713";
  font-size: 1.25rem;
  line-height: 1;
}
.setup-step-done .setup-step-state { color: var(--amber-700); }
/* Collapsed once finished: a completed step is confirmation, not reading. */
.setup-step-done .setup-step-body { display: none; }

/* current */
.setup-step-current {
  border-color: var(--amber-700);
  border-width: 2px;
}
.setup-step-current .setup-step-state { color: var(--amber-700); }

/* not yet reachable */
.setup-step-todo .setup-step-mark {
  background: transparent;
  border-color: var(--border);
  color: var(--text-muted);
}
.setup-step-todo .setup-step-body { opacity: 0.62; }
.setup-step-todo .setup-step-title { color: var(--text-muted); }

/* ---- content inside a step ------------------------------------------- */

.setup-p { margin: 0 0 12px; }

.setup-howto {
  margin: 0 0 12px;
  padding-left: 1.3em;
}
.setup-howto li { margin: 0 0 10px; }

.setup-glyph {
  display: inline-block;
  transform: rotate(-90deg);
  font-size: 1.15rem;
  line-height: 1;
}

.setup-note {
  margin: 10px 0 0;
  font-size: 0.98rem;
  color: var(--text-muted);
  line-height: 1.45;
}
.setup-note:empty { display: none; }

.setup-note-error { color: #b42318; }

.setup-warn {
  margin: 12px 0 0;
  padding: 10px 12px;
  background: var(--amber-100);
  border-left: 4px solid var(--amber-700);
  border-radius: 0 8px 8px 0;
  font-size: 1rem;
  line-height: 1.45;
}

.setup-prefs {
  margin: 0 0 12px;
  padding-left: 1.2em;
}
.setup-prefs li { margin: 0 0 6px; }

/* ---- buttons --------------------------------------------------------- */

.setup-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  width: 100%;
  padding: 12px 20px;
  font-size: 1.15rem;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  background: var(--amber-700);
  color: #fff;
  cursor: pointer;
  text-align: center;
}
.setup-btn:hover { background: var(--amber-600); text-decoration: none; }
.setup-btn:disabled { opacity: 0.55; cursor: default; }

.setup-btn-small {
  width: auto;
  min-height: 46px;
  font-size: 1rem;
  padding: 10px 16px;
}
.setup-btn-link { color: #fff; }
.setup-btn-link:hover { color: #fff; }

.setup-copy-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: stretch;
  margin: 4px 0 0;
}
.setup-copy-input {
  flex: 1 1 12rem;
  min-height: 46px;
  padding: 8px 12px;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
}

/* ---- staff rollout card (/admin/notify) ------------------------------- */

.setup-h4 {
  font-size: 1.05rem;
  margin: 20px 0 8px;
  color: var(--text);
}
.setup-stuck-list { margin-top: 0; }

/* ---- the home-page banner -------------------------------------------- */

/* Inline in the page flow rather than fixed to the bottom of the viewport:
   a floating bar covers content, gets swiped away reflexively, and on a
   phone competes with the tab bar. This one sits where the member is
   already looking. */
.setup-banner {
  background: var(--card);
  border: 2px solid var(--amber-700);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 14px 16px;
  margin: 0 0 16px;
}

.setup-banner-title {
  margin: 0 0 6px;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
}

.setup-banner-sub {
  margin: 0 0 12px;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.setup-banner-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.setup-banner-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 22px;
  font-size: 1.05rem;
  font-weight: 700;
  border-radius: 10px;
  background: var(--amber-700);
  color: #fff;
}
.setup-banner-go:hover { background: var(--amber-600); text-decoration: none; color: #fff; }

.setup-banner-x {
  min-height: 48px;
  padding: 10px 18px;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.setup-banner-x:hover { background: var(--bg); }

/* Sign-in calls to action on the public install page. */
.setup-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 4px;
}

.setup-btn-quiet {
  background: transparent;
  color: var(--amber-700);
  border: 1px solid var(--border);
}

/* ---- "which phone are these steps for" ------------------------------- */

.setup-install-head {
  margin: 0 0 10px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--amber-700);
}

/* ---- "you already have it" ------------------------------------------- */

/* Revealed by setup.js when the page finds itself running standalone. The
   server cannot know that, so it ships hidden. */

/* =======================================================================
   THE PUBLIC FRONT DOOR ON A COMPUTER  (.setup-hero)

   This markup is only ever emitted for an anonymous visitor whose
   User-Agent is not a phone (see setup_lib.js), so nothing here can reach
   a member on a handheld. Everything below 60rem is a plain single
   column -- the two-column treatment starts at the media query near the
   bottom of this block and nowhere else.

   Colours come from the existing theme variables. ONE new variable is
   introduced, --hero-ink, the deep navy already used as the app's
   theme-color, so the staff theme editor can still take the hero with it.
   ======================================================================= */

/* --hero-ink kept as an alias so anything still referencing it follows the
   brand palette defined in app.css. */
:root {
  --hero-ink: var(--brand-navy, #072e69);
}

.setup-wrap-wide { max-width: 42rem; }

/* The bottom of the install card is the bottom of the page here, so it owns
   the home-indicator inset. */
body:has(.setup-hero) .setup-panel {
  margin-bottom: 0;
  padding-bottom: calc(22px + var(--safe-b));
}

/* Full-bleed at every width. The navy has to reach the edges of the screen or
   it reads as a banner inside a page rather than as the page itself -- and on
   a phone a 16px gutter of page background either side of it is all anyone
   sees. :has() scopes the overflow guard to this page: 100vw includes the
   scrollbar, which would otherwise buy a few pixels of sideways scroll. */
body:has(.setup-hero) { overflow-x: hidden; }

/* THE WHITE GUTTERS, top and bottom -- same pair of causes as the login page:
   .container's 16px of vertical padding, and the body's reserved room for the
   fixed tab bar. Neither applies here: this page is the ANONYMOUS front door,
   which has no tab bar and no topbar.
   Scoped to :has(.setup-hero), which exists only on that page -- the
   signed-in wizard shares .setup-wrap and does need both. */
body:has(.setup-hero) { padding-bottom: 0; }
body:has(.setup-hero) .container { padding: 0; max-width: none; }
body:has(.setup-hero) .setup-wrap { padding-top: 0; padding-bottom: 0; }

.setup-hero {
  background: linear-gradient(160deg, var(--brand-navy) 0%, var(--brand-blue) 100%);
  color: #fff;
  border-radius: 0;
  margin-inline: calc(50% - 50vw);
  /* Top padding picks up the iPhone notch inset so the navy runs under the
     status bar rather than stopping at a white band. */
  padding: calc(24px + var(--safe-t)) max(18px, calc(50vw - 20rem)) 30px;
  margin-bottom: 0;
}

.setup-hero-inner { display: block; }

/* ---- brand row -------------------------------------------------------- */

.setup-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
}
.setup-brand-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fff;
  color: var(--hero-ink);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}
.setup-brand-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
}

/* ---- pill ------------------------------------------------------------- */

/* Caps and small, because it is answering a question ("do I need the App
   Store?") rather than making a claim. */
.setup-pill {
  display: inline-block;
  margin: 0 0 14px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(249, 114, 22, 0.14);
  border: 1px solid var(--brand-accent);
  color: var(--brand-accent);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* ---- headline --------------------------------------------------------- */

.setup-hero-h1 {
  margin: 0 0 14px;
  font-size: 2.1rem;
  line-height: 1.12;
  font-weight: 800;
  color: #fff;
}
/* The one warm note on the page, and the reason the headline has a shape:
   orange on navy is the church's existing scheme. */
.setup-hero-accent { color: var(--brand-accent); }

.setup-hero-lede {
  margin: 0 0 22px;
  font-size: 1.08rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  max-width: 34rem;
}

/* ---- benefit tiles ---------------------------------------------------- */

/* HIDDEN ON PHONES.
   On a wide screen these four tiles sit beside the install card and cost
   nothing. On a phone they stack into a column that pushes the white card --
   the only thing on the page with a button on it -- below the fold, so the
   reader scrolls past four claims to reach the one instruction. The claims
   are already made in the headline and lede above them.
   Shown again from 60rem, in the two-column layout. */
.setup-hero-tiles {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  grid-template-columns: 1fr;
  gap: 12px;
}
.setup-hero-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.setup-hero-tile-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--brand-accent);
  color: #fff;
}
.setup-hero-tile-label {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
}

/* ---- the white card --------------------------------------------------- */

.setup-panel {
  background: var(--card);
  color: var(--text);
  border-radius: 16px;
  padding: 20px 18px 22px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.setup-panel-h {
  margin: 0 0 6px;
  font-size: 1.35rem;
  line-height: 1.25;
  color: var(--text);
}
.setup-panel-h2 {
  margin: 0 0 6px;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--text);
}
.setup-panel-sub {
  margin: 0 0 16px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Light plate behind the code in every theme: a QR needs its light squares to
   stay light or phones cannot read it. */
.setup-qr-plate {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  margin: 0 0 20px;
  text-align: center;
}
.setup-qr-plate .setup-qr-img { margin: 0 auto; }
.setup-qr-cap {
  margin: 12px 0 0;
  font-size: 1rem;
  line-height: 1.45;
  font-weight: 700;
  color: var(--text);
}
.setup-qr-cap-alt {
  display: inline-block;
  margin-top: 4px;
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.setup-eyebrow {
  margin: 0 0 6px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand-accent);
}

/* ---- numbered steps in the card --------------------------------------- */

.setup-numsteps {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}
.setup-numsteps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 12px;
}
.setup-num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(249, 114, 22, 0.12);
  border: 2px solid var(--brand-accent);
  color: var(--brand-accent);
  font-weight: 700;
  font-size: 1rem;
}
.setup-num-text {
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--text);
}

/* ---- step cards in the card (phones) ----------------------------------
   The phone version of the white panel. Each step is its own tinted card so
   a member can point at one and say "I'm on this one" -- the numbered list
   used on desktop reads fine on a large screen but turns into a wall of
   text at 390px. The number badge overhangs the top-left corner rather than
   sitting in a gutter, which keeps the full text width for the sentence.
   ----------------------------------------------------------------------- */

.setup-stepcards {
  list-style: none;
  /* Extra top margin: the step cards now sit BELOW the install button, and
     the first card's number badge overhangs its top edge. */
  margin: 30px 0 18px;
  padding: 0;
}
.setup-stepcard {
  position: relative;
  margin: 0 0 18px;
  padding: 22px 16px 16px;
  border-radius: 14px;
  background: var(--bg);
  border: 1px solid var(--border);
}
.setup-stepcard-last { margin-bottom: 20px; }
.setup-stepcard-num {
  position: absolute;
  top: -14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--brand-accent);
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
}
.setup-stepcard-title {
  margin: 4px 0 6px;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
}
.setup-stepcard-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* The one action the card exists for, on Android. Full width because it is
   the only thing on the page a member has to hit. */
/* The one thing on the page that does the job, so it is allowed to shout:
   full width, heavier type, and a warm shadow in its own colour that lifts it
   off the white card. */
.setup-btn-wide {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  justify-content: center;
  padding: 18px 18px;
  margin-top: 6px;
  font-size: 1.14rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  border-radius: 14px;
  background: var(--brand-accent);
  box-shadow: 0 8px 22px rgba(249, 114, 22, 0.42);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}
.setup-btn-wide:hover {
  background: var(--brand-accent-hover);
  box-shadow: 0 10px 26px rgba(249, 114, 22, 0.5);
}
.setup-btn-wide:active { transform: translateY(1px); }

.setup-btn-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

/* DISABLED IS NOT A FADED CTA.
   The button ships disabled until the browser offers the install, and a pale
   orange version of the same button reads as "the button is broken" rather
   than "not yet". Grey, no shadow, no lift -- so the live one is unmistakably
   different. */
.setup-btn-wide:disabled,
.setup-btn-wide[disabled] {
  background: var(--border);
  color: var(--text-muted);
  box-shadow: none;
  opacity: 1;
  cursor: default;
}

/* The two calls to action sit inside the white card, so they need a visible
   edge rather than the page-coloured one .setup-btn-quiet assumes. */
.setup-panel .setup-cta-row .setup-btn-quiet {
  flex: 1 1 12rem;
  border-color: var(--amber-200);
}

/* =======================================================================
   DESKTOP ONLY -- two columns. Nothing above this point changes layout.
   ======================================================================= */

@media (min-width: 60rem) {
  .setup-wrap-wide { max-width: none; }

  .setup-hero {
    padding: 40px max(28px, calc(50vw - 34rem)) 52px;
  }

  .setup-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(24rem, 0.85fr);
    gap: 44px;
    align-items: start;
    max-width: 72rem;
    margin: 0 auto;
  }

  .setup-hero-h1 { font-size: 3.4rem; }
  .setup-hero-lede { font-size: 1.2rem; }

  .setup-hero-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

  .setup-panel { padding: 30px 28px 32px; }
  .setup-panel-h { font-size: 1.5rem; }
}

/* The real church logo, white-on-transparent, replacing the "FF" placeholder
   tile. It carries the wordmark itself, so no text sits beside it. Height is
   fixed and width auto so the aspect ratio survives; the source is 260x55, so
   44px tall renders it at roughly 2x on a phone screen. */
.setup-brand-logo {
  display: block;
  height: 44px;
  width: auto;
  max-width: 100%;
}