/* ============================================================
   RECORDED ROSARY, SHARED STYLES

   Everything used by more than one page. Page specific rules stay in the page
   that owns them.

   Loaded as a plain stylesheet with no build step, so a change here is live on
   every page as soon as it is pushed. That is the point: the palette and the
   controls were duplicated across five files, and a change to a button meant
   five edits and a good chance of missing one.
============================================================ */

:root{
  /* ---------- MODERN CHAPEL ----------
     Cool light surfaces, one deep marian blue, and a single recurring object:
     the strand of beads. Contemporary sans throughout; the serif survives only
     for the prayers themselves, set large, where it reads as intent rather than
     as antiquity. */
  --canvas:#F6F7FA;
  --surface:#FFFFFF;
  --fill:#F1F3F8;          /* fields and quiet blocks */
  --ink:#14161A;
  --ink-dim:#5C6270;
  --ink-faint:#646D80;   /* was #98A0AE, which failed WCAG at 2.46 against a
                          requirement of 4.5. This is 4.85 on the canvas and
                          5.20 on white, so it passes on both grounds.
                          It matters here more than most places: the audience
                          is elderly, and this colour carries the footers, the
                          policy links, timestamps and the price line. Nothing
                          between the old value and --ink-dim passed, so the
                          three levels of grey are now closer together than
                          they were. That is the cost of it being readable. */
  --rule:#E7EAF0;
  --rule-soft:#EFF1F6;
  --field-edge:#CFD5E0;    /* a field has to look like a field */
  /* A bead nobody has yet. --rule is a divider color and sat at 1.12 against the
     page, which on a thirteen pixel ring is close to nothing. This is light
     enough to stay quiet behind sixty five of them and dark enough to be seen. */
  --bead-empty:#AEB6C4;

  /* Marian blue: deep, serious, and deliberately not a default interface blue.
     Reserved for actions, so it never reads as a voice. */
  --accent:#23347E;
  --accent-press:#1B2963;
  --accent-tint:#EDEFFA;

  --gilt:#B0873F;          /* the finished Rosary, and nothing else */
  --good:#1E7A5A;
  --warn:#B7791F;
  --bad:#C93A31;
  /* The same three, darkened for text sitting on their own tinted background.
     A badge is a tint at around 12 percent, and --good on top of it does not
     carry; these do. Named so nothing has to be typed in by hand. */
  --good-ink:#14603F;
  --warn-ink:#7A4E0B;
  --bad-ink:#8E2119;

  /* Voices. Distinct from the accent so a bead is never mistaken for a control.
     Seven, because the seventh existed only in buyer.html and a project with
     seven contributors was handing somebody a color the stylesheet had never
     heard of. The order here is the order they are handed out, chosen so that
     any two adjacent picks are further apart than any other pair. */
  --v1:#D9453D; --v2:#2B7FA8; --v3:#7A4BB5; --v4:#5F7A21;
  --v5:#C7457F; --v6:#2E7D63; --v7:#E0913A;

  --radius:16px;
  --radius-sm:12px;
  --lift:0 1px 2px rgba(20,22,26,.04), 0 10px 28px -14px rgba(20,22,26,.14);

  --serif:"Instrument Serif",Georgia,serif;
  --sans:"Instrument Sans",system-ui,-apple-system,sans-serif;
}

/* ---------- base ---------- */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15.5px;
  line-height:1.55;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font-family:inherit;font-size:inherit}
button{border:none;background:none;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
a{color:var(--accent)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- type ---------- */
/* text-wrap:balance spreads a heading evenly across its lines rather than
   leaving one word alone on the last. "Your projects" becoming "Your" and
   "projects" is the case that prompted this, and a two-word heading breaking in
   two reads as a mistake rather than as a line break.
   Browsers that do not know the property ignore it and wrap as before. */
h1{font-family:var(--serif);font-weight:400;font-size:32px;line-height:1.1;
  letter-spacing:-.02em;margin:0;text-wrap:balance}
h2{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.15;
  letter-spacing:-.015em;margin:0;text-wrap:balance}

/* A name is one thing and should break like one.
   "Hear Us Pray" splitting after "Hear" reads as two products. It is short
   enough that never breaking costs nothing: on the narrowest phone it fits
   beside the rosary mark with room over. */
.nowrap{white-space:nowrap}
.eyebrow{font-family:var(--sans);font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-faint);font-weight:600}
/* A screen with nothing useful to say above its title says nothing, rather than
   leaving a gap where a word used to be. */
.eyebrow:empty{display:none}
.lede{color:var(--ink-dim);font-size:15px;margin:10px 0 0}
.note{font-size:12.5px;color:var(--ink-faint);line-height:1.6}

/* ---------- surfaces ---------- */
.card{background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);box-shadow:var(--lift);margin-top:16px;overflow:hidden}
.card-h{padding:16px 18px 12px;font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-faint);font-weight:600;
  display:flex;align-items:center;gap:10px}
.card-h .right{margin-left:auto;text-transform:none;letter-spacing:0;
  font-size:12.5px;font-weight:400;color:var(--ink-faint)}
.card-b{padding:18px}
.rows>*{border-bottom:1px solid var(--rule-soft)}
.rows>*:last-child{border-bottom:none}

/* ---------- controls ---------- */
.btn{display:block;width:100%;min-height:54px;border-radius:var(--radius-sm);
  font-family:var(--sans);font-weight:600;font-size:15.5px;letter-spacing:-.005em;
  margin-top:12px;transition:background .14s,transform .06s}
.btn:active{transform:scale(.995)}
.btn:disabled{opacity:.45;cursor:default}
.btn.gold{background:var(--accent);color:#fff}
.btn.gold:hover{background:var(--accent-press)}
.btn.ghost{background:var(--surface);border:1px solid var(--rule);color:var(--ink-dim);
  font-weight:500;min-height:50px;font-size:15px}
.btn.ghost:hover{border-color:var(--ink-faint);color:var(--ink)}
.btn-row{display:flex;gap:9px;flex-wrap:wrap}
.btn-row .btn{flex:1 1 100%;margin-top:0}
@media (min-width:520px){ .btn-row .btn{flex:1 1 0} }

/* 40px is the smallest comfortable tap target. */
.mini{min-height:40px;padding:0 15px;border-radius:999px;border:none;
  background:var(--fill);color:var(--ink-dim);font-size:13.5px;font-weight:500;
  white-space:nowrap}
.mini:hover{background:var(--accent-tint);color:var(--accent)}
.mini.primary{background:var(--accent);color:#fff}
.mini.primary:hover{background:var(--accent-press);color:#fff}
.mini:disabled{opacity:.4;cursor:default}

label.fld{display:block;margin-bottom:16px}
label.fld span{display:block;font-size:12px;color:var(--ink-faint);margin-bottom:6px}
input[type=text],input[type=email],input[type=password],input[type=date],
input[type=tel],select,textarea{
  width:100%;min-height:52px;padding:0 16px;border-radius:var(--radius-sm);
  background:var(--fill);border:1px solid var(--field-edge);color:var(--ink);
  font-size:16px;transition:border-color .14s,background .14s}
input:focus,select:focus,textarea:focus{
  background:var(--surface);border-color:var(--accent);outline:none}
/* A placeholder is a hint, not content. The browser default is dark enough to
   read as a filled field, which makes an empty form look complete. */
::placeholder{color:var(--ink-faint);opacity:1}

.chk{display:flex;align-items:flex-start;gap:10px;padding:8px 0;font-size:14px}
.chk input{accent-color:var(--accent);width:17px;height:17px;margin-top:3px;flex:none}
.chk small{display:block;color:var(--ink-faint);font-size:12px}

/* ---------- feedback ---------- */
.alert{display:flex;gap:11px;padding:14px 16px;border-radius:var(--radius-sm);
  font-size:14px;line-height:1.55;margin-top:14px}
.alert.g{background:rgba(30,122,90,.09);color:var(--good)}
.alert.w{background:rgba(183,121,31,.10);color:var(--warn)}
.alert.b{background:rgba(201,58,49,.09);color:var(--bad)}

/* Vertical padding was 4px against 11px horizontal, which reads as a box drawn
   round the word rather than a badge holding it. 7px evens the ratio and brings
   the pill to 29px, close enough to the 30px of the avatars beside it that a row
   of them lines up. */
.pill{display:inline-block;padding:7px 13px;border-radius:999px;font-size:11.5px;
  font-weight:600;letter-spacing:.01em;white-space:nowrap;line-height:1.25}
.pill.n{background:var(--fill);color:var(--ink-faint)}
.pill.g{background:rgba(176,135,63,.13);color:var(--gilt)}
.pill.w{background:rgba(183,121,31,.13);color:var(--warn)}
.pill.b{background:rgba(201,58,49,.12);color:var(--bad)}

.spinner{width:17px;height:17px;border:2px solid var(--rule);
  border-top-color:var(--accent);border-radius:50%;
  animation:spin .7s linear infinite;display:inline-block;vertical-align:-3px}
@keyframes spin{to{transform:rotate(360deg)}}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:26px;
  background:var(--fill);border:1px solid var(--rule);padding:10px 17px;
  border-radius:999px;font-size:13px;opacity:0;pointer-events:none;
  transition:opacity .2s;z-index:60;max-width:90vw;text-align:center}
.toast.on{opacity:1}

/* Which commit is running. Deliberately faint: it is for whoever is diagnosing a
   problem, not for the person praying. */
.buildline{margin:26px 0 0;font-size:11px;color:var(--ink-faint);
  font-variant-numeric:tabular-nums;letter-spacing:.04em}
.buildline:empty{display:none}

/* ---------- screens ---------- */
.wrap{max-width:760px;margin:0 auto;padding:24px 18px 80px}
.step{display:none}
.step.on{display:block}

/* ============================================================
   DIALOGS
   A sheet from the bottom on a phone, a centered card on a desktop. Same markup,
   because the content is identical and only the placement differs.
============================================================ */
.dlg{border:none;padding:0;background:transparent;max-width:100%;width:100%;
  margin:auto auto 0;color:var(--ink)}
.dlg::backdrop{background:rgba(20,22,26,.42)}
.dlg-card{background:var(--surface);border-radius:20px 20px 0 0;
  padding:26px 22px calc(22px + env(safe-area-inset-bottom));
  box-shadow:0 -14px 44px -14px rgba(20,22,26,.34);max-height:88vh;overflow:auto}
.dlg h2{font-family:var(--serif);font-weight:400;font-size:25px;line-height:1.16;
  letter-spacing:-.015em;margin:0}
.dlg p{margin:12px 0 0;font-size:15px;line-height:1.55;color:var(--ink-dim)}
.dlg p:empty{display:none}
.dlg #dlg-extra:empty{display:none}
.dlg #dlg-extra{margin-top:18px}
.dlg-actions{display:flex;flex-direction:column-reverse;gap:9px;margin-top:22px}
.dlg-actions .btn{margin-top:0;width:100%}
/* Destroying something does not look like saving it. */
.dlg .btn.danger{background:#C0271D;color:#fff}
.dlg .btn.danger:hover{background:#A21F17}

/* Shut, rather than dimmed. A faded red still reads as a red button waiting to
   be pressed; gray reads as not yet available, which is what it is. */
/* Text at 3.9:1: readable enough to say what will happen once it opens, quiet
   enough that nobody mistakes it for a button waiting to be pressed. */
.dlg .btn:disabled,
.dlg .btn.danger:disabled{background:#ECEEF3;color:#6E7686;
  opacity:1;cursor:default;pointer-events:none}

/* A list of people or options, one tap each. Replaces asking somebody to type a
   number into a prompt. */
.dlg-pick{display:flex;flex-direction:column;gap:8px}
.dlg-pick button{display:flex;align-items:center;gap:11px;min-height:54px;
  padding:0 15px;border-radius:var(--radius-sm);border:1px solid var(--rule);
  background:var(--surface);font-size:15.5px;color:var(--ink);text-align:left;width:100%}
.dlg-pick button:hover{border-color:var(--accent);background:var(--accent-tint)}
.dlg-pick.multi button{padding-right:12px}
.dlg-pick .tick{margin-left:auto;font-style:normal;color:var(--accent);
  opacity:0;font-size:17px}
.dlg-pick .avatar{width:30px;height:30px;font-size:11px}
/* Chosen. The sheet sits on a dimmed page, which lifts everything on it, so a
   pale tint that reads clearly on a white card does not read here. A stronger
   ground and a full weight border carry it. */
.dlg-pick button[aria-pressed="true"]{border-color:var(--accent);border-width:2px;
  background:#DDE3F8;color:var(--accent-press);font-weight:600}
.dlg-pick button[aria-pressed="true"] .tick{opacity:1}
.dlg-count{margin:12px 0 0;font-size:13px;color:var(--ink-faint);text-align:center}

/* A link the browser refused to copy. Selectable, and selected on open. */
.dlg-link{width:100%;min-height:52px;padding:0 15px;border-radius:var(--radius-sm);
  background:var(--fill);border:1px solid var(--field-edge);color:var(--ink);font-size:14px}

@media (min-width:600px){
  .dlg{margin:auto;max-width:440px}
  .dlg-card{border-radius:18px;padding:28px;
    box-shadow:0 24px 60px -20px rgba(20,22,26,.4)}
  .dlg-actions{flex-direction:row;justify-content:flex-end}
  .dlg-actions .btn{width:auto;min-width:112px}
}


/* ============================================================
   "Something is wrong"
   A sheet from the bottom on a phone, a centred card on a desktop, matching how
   every other question in this product is asked.
   ============================================================ */
#trouble{position:fixed;inset:0;z-index:90;display:flex;
  align-items:flex-end;justify-content:center;
  background:rgba(20,22,26,.42);padding:0}
@media (min-width:560px){ #trouble{align-items:center;padding:24px} }

#trouble .tr-sheet{background:var(--surface);width:100%;max-width:460px;
  border-radius:var(--radius) var(--radius) 0 0;padding:22px 20px 24px;
  box-shadow:0 -8px 40px rgba(20,22,26,.18)}
@media (min-width:560px){
  #trouble .tr-sheet{border-radius:var(--radius);box-shadow:0 12px 48px rgba(20,22,26,.22)}
}

#trouble h2{font-family:var(--serif,Georgia,serif);font-weight:400;
  font-size:24px;line-height:1.15;margin:0 0 6px;color:var(--ink)}
#trouble .tr-note{font-size:14px;line-height:1.55;color:var(--ink-dim);margin:0 0 14px}
#trouble .tr-lbl{display:block;font-size:13px;color:var(--ink-dim);margin:14px 0 5px}

#trouble textarea,#trouble input{width:100%;box-sizing:border-box;
  font-family:inherit;font-size:16px;color:var(--ink);
  background:var(--fill);border:1px solid var(--field-edge);
  border-radius:var(--radius-sm);padding:11px 13px}
#trouble textarea{resize:vertical;min-height:96px;line-height:1.5}
#trouble input{min-height:48px}

#trouble .tr-row{display:flex;gap:10px;margin-top:16px}
#trouble .tr-go,#trouble .tr-no{font:inherit;font-size:16px;font-weight:600;
  min-height:48px;padding:0 20px;border-radius:var(--radius-sm);cursor:pointer;flex:1}
#trouble .tr-go{background:var(--accent);border:none;color:#fff}
#trouble .tr-go:hover{background:var(--accent-press)}
#trouble .tr-go[disabled]{opacity:.6;cursor:default}
#trouble .tr-no{background:transparent;border:1px solid var(--rule);color:var(--ink-dim)}
#trouble .tr-no:hover{border-color:var(--ink-faint);color:var(--ink)}

/* The line left behind once a message has gone. On the page rather than in a
   dialog, because a dialog that stays open with the message still in it looks
   as though the message can still be changed. */
#trouble-sent{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
  z-index:80;max-width:min(420px, calc(100vw - 32px));
  margin:0;padding:13px 18px;border-radius:var(--radius-sm);
  background:var(--ink);color:#fff;font-size:14.5px;line-height:1.5;
  text-align:center;box-shadow:0 6px 24px rgba(20,22,26,.28);
  transition:opacity .6s ease}
#trouble-sent.go{opacity:0}


/* ============================================================
   THE FOOTER
   One definition, because there were six different ones across eight pages:
   some with the brand, some without, one with no copyright, one with no footer
   at all.

   Links left, the copyright right. On a phone they stack and both centre,
   because two short lines read better than one line pushed to the edges of a
   narrow screen.
   ============================================================ */
.sitefoot{margin:34px 0 0;padding-top:20px;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 0;
  font-size:12.5px;color:var(--ink-faint)}
.sitefoot a{color:var(--ink-faint);text-decoration:none}
.sitefoot a:hover{color:var(--accent);text-decoration:underline}
.sitefoot .links{display:flex;flex-wrap:wrap;align-items:baseline;gap:0}
.sitefoot .sep{padding:0 7px;opacity:.55}
/* Pushed right on a wide screen, and it needs no separator before it: the space
   is the separator. */
.sitefoot .who{margin-left:auto;white-space:nowrap}

@media (max-width:559px){
  .sitefoot{flex-direction:column;align-items:center;gap:10px}
  .sitefoot .who{margin-left:0}
}