/* Palette taken from the logo: navy field, royal blue, gold. */
:root {
  --ink: #131a26;
  --muted: #5d6675;
  --line: #e3e6ee;
  --accent: #1f6fe5;
  --accent-dark: #14509f;
  --navy: #0b1f3f;
  --navy-soft: #12305e;
  --gold: #d9a625;
  --gold-light: #f2c75c;
  --bad: #a3282d;
  --surface: #ffffff;
  --page: #f6f8fc;
  --radius: .75rem;
  --shadow: 0 1px 2px rgb(11 31 63 / .05), 0 8px 24px -12px rgb(11 31 63 / .18);
  --shadow-lift: 0 2px 4px rgb(11 31 63 / .06), 0 18px 40px -18px rgb(11 31 63 / .3);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.65 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink);
       background: var(--page); -webkit-font-smoothing: antialiased; }
main { max-width: 64rem; margin: 0 auto; padding: 2.5rem 1.25rem 5rem; }
h1, h2, h3 { font-family: var(--serif); letter-spacing: -.01em; }
a { color: var(--accent-dark); text-underline-offset: .15em; }

.nav { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center;
       gap: 1rem; padding: .8rem 1.5rem; border-bottom: 1px solid var(--line);
       background: rgb(255 255 255 / .85); backdrop-filter: blur(10px); }
.nav nav { display: flex; align-items: center; gap: 1.25rem; }
.nav nav a { color: var(--muted); text-decoration: none; font-weight: 500; }
.nav nav a:not(.button):hover { color: var(--ink); }
.nav nav a.button { color: #fff; }
.brand { font-family: var(--serif); font-size: 1.15rem; font-weight: 700; text-decoration: none; color: var(--navy); }
body.admin .brand { color: var(--bad); }

.button, button { background: var(--accent); color: #fff; border: 0; border-radius: .5rem;
                  padding: .6rem 1.15rem; font: inherit; font-weight: 600; cursor: pointer;
                  text-decoration: none; display: inline-block; box-shadow: 0 1px 2px rgb(11 31 63 / .18);
                  transition: background .15s ease, transform .15s ease, box-shadow .15s ease; }
.button:hover, button:hover { background: var(--accent-dark); transform: translateY(-1px); box-shadow: var(--shadow); }
.button.gold { background: linear-gradient(180deg, var(--gold-light), var(--gold)); color: var(--navy); }
.button.gold:hover { background: linear-gradient(180deg, #f7d478, #c4931c); }
button.link { background: none; color: var(--accent-dark); padding: 0; font-weight: 500;
              text-decoration: underline; box-shadow: none; }
button.link:hover { background: none; transform: none; box-shadow: none; }
form.inline { display: inline; }

.card { display: grid; gap: .8rem; max-width: 34rem; padding: 1.5rem; margin: 1.5rem 0;
        background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card label { display: grid; gap: .35rem; font-weight: 600; font-size: .95rem; }
input, select, textarea { padding: .6rem .7rem; font: inherit; border: 1px solid var(--line);
                          border-radius: .45rem; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--accent);
                                            box-shadow: 0 0 0 3px rgb(31 111 229 / .15); }
.hint { color: var(--muted); font-size: .9rem; margin: 0; }

/* The picture sits in the label's own grid, so it lines up with the fields above it and the
   answer box is only as wide as the six letters it takes. */
.captcha img { width: 220px; max-width: 100%; border: 1px solid var(--line); border-radius: .45rem;
               background: #fff; }
.captcha input { width: 11rem; text-transform: uppercase; letter-spacing: .35em;
                 font-family: ui-monospace, monospace; }
.agree { display: flex; align-items: flex-start; gap: .5rem; font-weight: 400; line-height: 1.45; }
.agree input { width: auto; margin-top: .15rem; flex: none; }
.code input { width: 11rem; letter-spacing: .35em; font-family: ui-monospace, monospace; }
.error { color: var(--bad); background: #fdf1f1; border: 1px solid #f2c9c9; padding: .75rem 1rem; border-radius: .5rem; }
.notice { background: #eef5ee; border: 1px solid #c9dfc9; padding: .75rem 1rem; border-radius: .5rem; }

.hero { position: relative; overflow: hidden; text-align: center; padding: 3rem 1.5rem 3.25rem;
        border-radius: 1.25rem; color: #eef3fb;
        background: radial-gradient(60rem 30rem at 50% -20%, var(--navy-soft), var(--navy) 70%); }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 3px;
               background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.hero .logo { display: block; width: 100%; max-width: 30rem; height: auto; margin: 0 auto 1.5rem;
              filter: drop-shadow(0 12px 30px rgb(0 0 0 / .45)); }
.hero h1 { font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.15; margin: 0 0 .75rem; color: #fff; }
.hero p { max-width: 40rem; margin: 0 auto; color: #c3d0e4; font-size: 1.08rem; }
.hero p + p { margin-top: 1.75rem; }
.hero a:not(.button) { color: var(--gold-light); }
.hero .price { margin-top: 1.25rem; color: var(--gold-light); font-weight: 600; }
.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 1.75rem; }
.button.ghost { background: transparent; color: #eef3fb; border: 1px solid rgb(255 255 255 / .35); box-shadow: none; }
.button.ghost:hover { background: rgb(255 255 255 / .1); border-color: rgb(255 255 255 / .6); }
.section-title { text-align: center; margin: 3.5rem 0 0; font-size: 1.75rem; color: var(--navy); }
.section-title + p { text-align: center; color: var(--muted); margin: .5rem auto 0; max-width: 34rem; }

.features, .tiles { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-top: 2.5rem; }
.features article, .tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
                           padding: 1.4rem; box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .15s ease; }
.features article:hover, .tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.features h2 { margin: 0 0 .5rem; font-size: 1.15rem; color: var(--navy); }
.features article p { margin: 0; color: var(--muted); }
.tile { text-decoration: none; color: inherit; }
.badge { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .85rem;
  font-weight: 600; background: var(--navy); color: #fff; }

/* Something is owed on the account: the tile it sits in already leads to the billing page. */
.badge.warn { background: #b3261e; }

.tile h2 { margin: 0 0 .25rem; font-size: 1.05rem; color: var(--navy); }

table { width: 100%; border-collapse: collapse; background: var(--surface); margin-top: 1.5rem;
        border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
th { background: #f2f5fb; font-size: .85rem; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
th, td { text-align: left; padding: .7rem .85rem; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
.status-ready { color: #2c6e3f; } .status-failed { color: var(--bad); } .status-indexing { color: #8a6d1f; }

.answer { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--gold);
          border-radius: var(--radius); padding: 1.25rem 1.4rem; margin-top: 1.5rem; box-shadow: var(--shadow); }
.answer.refused { border-left-color: var(--bad); }
.sermon section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
                  padding: 1.25rem 1.4rem; margin-top: 1.25rem; box-shadow: var(--shadow); }
.versions { padding-left: 1.1rem; }
.htmx-indicator { display: none; color: var(--muted); }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }

/* Launched from the home screen there is no browser chrome, and the sign-in screens want none of
   ours either: the app opens on a plain login page. */
@media (display-mode: standalone) {
  body.anon > .nav, body.anon > footer { display: none; }
  body.anon > main { padding-top: 1.5rem; }
  .install-link { display: none; }
}
footer { border-top: 1px solid var(--line); background: var(--surface); color: var(--muted);
         font-size: .9rem; text-align: center; padding: 1.5rem 1.25rem; }
.sermon-form { display: grid; gap: 1rem; }
.sermon-form label { display: grid; gap: .35rem; font-weight: 600; font-size: .95rem; }
.sermon-form section { display: grid; gap: .8rem; background: var(--surface); border: 1px solid var(--line);
                       border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); }
.sermon-form textarea { width: 100%; resize: vertical; line-height: 1.6; }
.actions { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.saved { margin-top: 2.5rem; }
.saved h2 { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; }
.pill { display: inline-flex; align-items: center; justify-content: center; min-width: 1.9rem;
        padding: .1rem .6rem; border-radius: 2rem; font: 600 .85rem/1.7 system-ui, sans-serif;
        color: #fff; background: var(--navy); }
.search { width: 100%; max-width: 26rem; }
.results { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; }
.results li { background: var(--surface); border: 1px solid var(--line); border-radius: .5rem;
              padding: .7rem .9rem; }
.results a { font-weight: 600; text-decoration: none; }
.results a:hover { text-decoration: underline; }

.toasts { position: fixed; top: 1rem; right: 1rem; z-index: 20; display: grid; gap: .5rem;
  max-width: min(28rem, calc(100vw - 2rem)); }
.toast { margin: 0; padding: .7rem 1rem; border-radius: 8px; cursor: pointer;
  background: var(--accent-dark); color: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); }
.toast.error { background: #a3261f; }

details.confirm { display: inline; }
details.confirm > summary { display: inline; cursor: pointer; color: var(--accent-dark);
  font-weight: 500; list-style: none; }
details.confirm > summary::-webkit-details-marker { display: none; }
details.confirm .prompt { margin: .5rem 0 .25rem; }

.overlay { position: fixed; inset: 0; z-index: 30; place-items: center;
  background: rgba(11, 22, 44, .55); }
/* Beats the shared .htmx-indicator rule above, which shows an indicator inline. Same specificity,
   so this has to stay after it. */
.htmx-request.overlay { display: grid; }
/* Shown by the page itself rather than by htmx: the trial-over nudge is not a request indicator. */
.overlay.shown { display: grid; }
.overlay-card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1.75rem 2rem; max-width: 26rem; text-align: center; }
.overlay-card p { margin: .35rem 0; }
.spinner { width: 2.2rem; height: 2.2rem; margin: 0 auto 1rem; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--accent-dark); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }
.elapsed { color: var(--muted); font-variant-numeric: tabular-nums; }