/* PRAYER JOURNAL (prayer/prayer.js) and its printouts (prayer/print.js). The app in the site's colors, either mode; the
   printouts paper white, in millimeters, as they'll print */
.pj { position: fixed; inset: 0; z-index: 58; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(20, 16, 12, 0.45); opacity: 0; transition: opacity 0.2s ease; color: var(--ink); font-family: var(--sans); }
.pj.open { opacity: 1; }
.pj[hidden] { display: none; }
html.pj-open, html.pj-open body { overflow: hidden; }
.pj svg { width: 18px; height: 18px; flex: none; }
.pj-box { position: relative; display: flex; flex-direction: column; width: min(680px, 100%); height: min(940px, 100%); overflow: hidden; border-radius: 24px; background: var(--bg); border: 1px solid var(--rule); box-shadow: 0 30px 80px -24px rgba(20, 16, 12, 0.5); transform: translateY(10px); transition: transform 0.22s ease; }
.pj.open .pj-box { transform: none; }
@media (max-width: 700px) { .pj { padding: 0; } .pj-box { width: 100%; height: 100%; border-radius: 0; border: none; } }
@media (min-width: 561px) {
  html[data-app-size="md"] .pj-box { width: min(1000px, 94vw); height: min(94vh, 100%); }
  html[data-app-size="lg"] .pj { padding: 0; }
  html[data-app-size="lg"] .pj-box { width: 100%; height: 100%; border-radius: 0; border: none; }
}
.pj-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 14px 10px 18px; padding-top: max(12px, env(safe-area-inset-top)); background: var(--bg-raised); }
.pj-titles { flex: 1; min-width: 0; }
.pj-kicker { font: 800 10.5px var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.pj-title { font: italic 22px/1.2 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-back { display: grid; place-items: center; width: 38px; height: 38px; margin-left: -6px; border: 1px solid var(--rule); border-radius: 50%; background: var(--bg); color: var(--ink); cursor: pointer; }
.pj-back[hidden] { display: none; }
.pj-head .x-close.is-back { max-width: 52vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-tabs { flex: none; display: flex; gap: 4px; padding: 0 14px 10px; background: var(--bg-raised); border-bottom: 1px solid var(--rule); }
.pj-tabs button { flex: 1; min-height: 38px; border: none; border-radius: 12px; background: none; color: var(--muted); font: 700 14px var(--sans); cursor: pointer; }
.pj-tabs button.is-on { background: color-mix(in srgb, var(--gold) 14%, var(--bg)); color: var(--ink); }
.pj-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 16px calc(36px + env(safe-area-inset-bottom)); }
.pj-body > * { max-width: 620px; margin-left: auto; margin-right: auto; } /* (every row the same width, in the middle) */
.pj-sub { margin: 22px auto 10px; font: 800 11px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.pj-sub small { margin-left: 4px; letter-spacing: 0; }
.pj-note { font: 14px/1.55 var(--sans); color: var(--muted); margin: 6px auto 12px; }
.pj-wait { color: var(--muted); }
.pj-day { margin: 0 auto 6px; font: italic 18px var(--serif); }
.pj-day span { font: 600 13px var(--sans); color: var(--gold); font-style: normal; }
.pj-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 10px 18px; border: none; border-radius: 999px; background: var(--gold); color: var(--on-gold, #1c1a17); font: 800 14.5px var(--sans); cursor: pointer; }
.pj-btn.is-soft { background: color-mix(in srgb, var(--ink) 7%, var(--bg-raised)); color: var(--ink); font-weight: 700; }
.pj-btn svg { width: 17px; height: 17px; }
.pj-link { padding: 0; border: none; background: none; color: var(--gold); font: inherit; font-weight: 700; cursor: pointer; }
.pj-toast { position: absolute; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 3; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 14px; background: var(--ink); color: var(--bg); font: 600 14px/1.4 var(--sans); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; }
.pj-toast.show { opacity: 1; transform: translate(-50%, 0); }
.pj-row { display: flex; align-items: center; gap: 12px; margin: 0 auto 6px; padding: 8px 10px; border-radius: 14px; background: var(--bg-raised); border: 1px solid var(--rule); }
.pj-row.is-on { border-color: color-mix(in srgb, var(--gold) 45%, var(--rule)); }
.pj-tick { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 2px solid var(--rule); border-radius: 50%; background: var(--bg); color: transparent; cursor: pointer; }
.pj-row.is-on .pj-tick, .pj-trow.is-on .pj-tick { background: var(--gold); border-color: var(--gold); color: var(--on-gold, #1c1a17); }
.pj-tick.is-star { border-color: transparent; color: var(--gold); }
.pj-row-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 2px 0; border: none; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.pj-row-t b { font: 600 15px/1.3 var(--sans); }
.pj-row-t small { font-size: 12.5px; color: var(--muted); }
.pj-row.is-ans .pj-row-t b { color: var(--muted); }
.pj-cheer { margin: 10px auto; padding: 10px 14px; border-radius: 14px; background: color-mix(in srgb, var(--gold) 12%, transparent); font: italic 15px/1.5 var(--serif); }
.pj-wide { display: flex; align-items: center; gap: 14px; width: 100%; box-sizing: border-box; margin: 12px auto 0; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 18px; background: var(--bg-raised); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.pj-wide svg { width: 22px; height: 22px; color: var(--gold); }
.pj-wide span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pj-wide b { font: 700 15.5px var(--sans); }
.pj-wide small { font-size: 13px; color: var(--muted); }
.pj-wide.is-gold { border-color: color-mix(in srgb, var(--gold) 50%, var(--rule)); background: color-mix(in srgb, var(--gold) 8%, var(--bg-raised)); }
.pj-acts { margin: 14px auto 0; padding: 0 14px; border: 1px solid var(--rule); border-radius: 16px; background: var(--bg-raised); }
.pj-acts summary { padding: 12px 0; font: 700 14.5px var(--sans); cursor: pointer; }
.pj-acts p { margin: 0 0 10px; font: 14px/1.5 var(--sans); color: var(--muted); }
.pj-acts p b { display: block; color: var(--ink); }
.pj-ans { display: flex; align-items: flex-start; gap: 10px; width: 100%; box-sizing: border-box; margin: 0 auto 6px; padding: 10px 12px; border: none; border-radius: 14px; background: color-mix(in srgb, var(--gold) 8%, transparent); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.pj-ans svg { color: var(--gold); margin-top: 2px; }
.pj-ans span { display: flex; flex-direction: column; }
.pj-ans b { font: 600 14.5px var(--sans); }
.pj-ans small { font-size: 13px; color: var(--muted); }
.pj-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.pj-quick input, .pj-quick select, .pj-f input, .pj-f select, .pj-f textarea, .pj-ansbox textarea, .pj-write { min-width: 0; min-height: 46px; box-sizing: border-box; padding: 10px 14px; border: 1.5px solid var(--rule); border-radius: 14px; background: var(--bg-raised); color: var(--ink); font: 16px var(--sans); }
.pj-quick input { flex: 1 1 220px; }
.pj-quick select { flex: 1 1 140px; }
.pj input:focus, .pj select:focus, .pj textarea:focus { outline: none; border-color: var(--gold); }
.pj-done { margin: 18px auto 0; }
.pj-done summary { margin-bottom: 10px; font: 800 11px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); cursor: pointer; }
.pj-form { display: flex; flex-direction: column; gap: 12px; }
.pj-f { display: flex; flex-direction: column; gap: 6px; }
.pj-f > span { font: 700 13px var(--sans); }
.pj-f small { font-weight: 400; color: var(--muted); }
.pj-f textarea { line-height: 1.5; resize: vertical; }
.pj-wide-b { width: 100%; }
.pj-acts-r { display: flex; flex-wrap: wrap; gap: 8px; }
.pj-ansbox { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 16px; border: 1px dashed color-mix(in srgb, var(--gold) 55%, var(--rule)); }
.pj-ansbox.is-on { border-style: solid; background: color-mix(in srgb, var(--gold) 9%, transparent); }
.pj-ansbox b { display: flex; align-items: center; gap: 6px; font: 700 14px var(--sans); }
.pj-ansbox svg { color: var(--gold); }
.pj-ansbox .pj-btn { align-self: flex-start; }
.pj-del { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 8px; padding: 6px 0; border: none; background: none; color: #B0473E; font: 700 13.5px var(--sans); cursor: pointer; }
.pj-new { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pj-page { display: flex; flex-direction: column; gap: 3px; width: 100%; box-sizing: border-box; margin: 0 auto 8px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 16px; background: var(--bg-raised); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.pj-page small { font-size: 12.5px; color: var(--gold); font-weight: 700; }
.pj-page b { font: italic 17px/1.3 var(--serif); }
.pj-page span { font-size: 13.5px; color: var(--muted); }
.pj-write { width: 100%; min-height: 50vh; padding: 14px 16px; font: 17px/1.65 var(--serif); resize: vertical; }
.pj-locked { padding: 30px 10px; text-align: center; }
.pj-locked svg { width: 34px; height: 34px; color: var(--gold); }
.pj-locked h3 { margin: 10px 0 6px; font: italic 22px var(--serif); }
.pj-locked p { color: var(--muted); font-size: 14.5px; }

/* the printouts' builder (its bar, choices, and work area: goals/print.css's) */
.pp { position: fixed; inset: 0; z-index: 2147483300; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); font-family: var(--sans); opacity: 0; transition: opacity 0.18s ease; }
.pp.open { opacity: 1; }
.pp[hidden] { display: none; }
.pp svg { width: 18px; height: 18px; flex: none; }
.pp-pages { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px; margin-top: 12px; }
.pp-slot { position: relative; }
/* a piece: paper, its words, its lines to write on */
.pp-piece { --pp-acc: #A8781E; --pp-line: #8f877b; position: relative; box-sizing: border-box; overflow: hidden; background: #fff; color: #1d1b18; font-family: -apple-system, "Segoe UI", system-ui, sans-serif; line-height: 1.35; box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.08); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.pp-piece.is-black { --pp-acc: #1d1b18; --pp-line: #7a7a7a; }
.pp-piece:not(.is-black) { background: linear-gradient(var(--pp-acc), var(--pp-acc)) top / 100% 1.3mm no-repeat, #fff; } /* (a thin band of its color along its top) */
.pp-in { display: flex; flex-direction: column; gap: 2mm; height: 100%; }
.pp-hole { position: absolute; box-sizing: border-box; border: 0.3mm dashed #8f877b; border-radius: 50%; background: radial-gradient(circle, #8f877b 0 0.35mm, transparent 0.4mm); }
.pp-credit { position: absolute; left: 0; right: 0; bottom: 1.2mm; font: 600 5.5pt/1 sans-serif; letter-spacing: 0.04em; color: #a39b8f; text-align: center; }
.pp-h { flex: none; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1mm 4mm; padding-bottom: 1mm; border-bottom: 0.4mm solid var(--pp-acc); }
.pp-h b { font: italic 600 1.55em/1.15 Georgia, "Times New Roman", serif; color: var(--pp-acc); min-width: 1em; }
.pp-h > span { display: flex; gap: 4mm; flex-wrap: wrap; }
.pp-blank { display: inline-flex; align-items: baseline; gap: 1.5mm; font-size: 0.8em; color: #6b655c; }
.pp-blank::after { content: ''; display: inline-block; width: 22mm; border-bottom: 0.25mm solid #8f877b; }
.pp-lines { flex: 1 1 0; min-height: 6mm; display: flex; flex-direction: column; overflow: hidden; padding-top: 0.3em; box-sizing: border-box; }
/* (each line a line of its own (prayer/print.js ruleLines: as many as fit), not a pattern behind: a pattern is printed, and
   saved as a PDF, as a picture, its lines blurred, some heavier than others. Dark enough, and thick enough, to see once printed) */
.pp-ln { flex: none; height: 2.2em; box-sizing: border-box; border-bottom: 0.3mm solid var(--pp-line); }
.pp-piece.is-small .pp-lines { min-height: 3mm; }
.pp-piece.is-small .pp-in { gap: 1.2mm; }
.pp-piece.is-small .pp-k small { display: none; } /* (a small page: the prompts' words left out, the room for writing) */
.pp-lines.is-one { flex: none; height: 2.6em; min-height: 0; } /* (room for one line, and two) */
.pp-lines.is-few { flex: none; height: 4.8em; min-height: 0; }
.pp-sec { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.pp-k { flex: none; font-weight: 800; font-size: 0.85em; letter-spacing: 0.05em; color: var(--pp-acc); text-transform: uppercase; }
.pp-k small { display: block; font-weight: 400; letter-spacing: 0; text-transform: none; color: #6b655c; font-size: 0.95em; }
.pp-box { display: inline-block; flex: none; width: 0.95em; height: 0.95em; vertical-align: -0.12em; border: 0.3mm solid #1d1b18; border-radius: 0.15em; cursor: pointer; }
.pp-box.is-on { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1b18' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 100% no-repeat; }
.pp-ed { outline: none; }
.pp-ed:focus { box-shadow: 0 0 0 1px #E3AE45; }
.pp-tab { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 0.92em; }
.pp-tab th { padding: 0.6mm 1mm; border-bottom: 0.35mm solid var(--pp-acc); color: var(--pp-acc); font-size: 0.82em; text-align: left; }
.pp-tab td { height: 2.3em; padding: 0 1mm; border-bottom: 0.3mm solid var(--pp-line); vertical-align: bottom; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pp-tab.is-list th:nth-child(1) { width: 1.6em; } .pp-tab.is-list th:nth-child(3), .pp-tab.is-list th:nth-child(4) { width: 18%; }
.pp-tab.is-answered th:nth-child(1), .pp-tab.is-answered th:nth-child(4) { width: 15%; }
.pp-week, .pp-people { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 2mm; min-height: 0; }
.pp-piece.is-narrow .pp-week, .pp-piece.is-narrow .pp-people { grid-template-columns: 1fr; } /* (a narrow page: one column) */
.pp-wd, .pp-pg { display: flex; flex-direction: column; min-height: 0; padding: 1.5mm 2mm; border: 0.3mm solid var(--pp-line); border-radius: 2mm; }
.pp-wd b, .pp-pg b { font-size: 0.85em; color: var(--pp-acc); text-transform: uppercase; letter-spacing: 0.05em; }
.pp-wd > span, .pp-pg > span { font-size: 0.92em; }
.pp-card, .pp-mark { display: flex; flex-direction: column; gap: 1.2mm; height: 100%; }
.pp-cat { font-weight: 800; font-size: 0.75em; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pp-acc); }
.pp-title { font: 600 1.25em/1.2 Georgia, serif; }
.pp-since, .pp-ansl, .pp-body { margin: 0; font-size: 0.85em; color: #4a4339; }
.pp-ansl { display: flex; align-items: center; gap: 1.5mm; }
.pp-acts { display: flex; gap: 2mm; }
.pp-acts > b { flex: none; display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--pp-acc); color: #fff; font: 700 1.1em Georgia, serif; }
.pp-acts i { display: block; font-weight: 700; font-style: normal; }
.pp-acts span { font-size: 0.9em; color: #4a4339; }
.pp-v { margin: auto 0 0; font: italic 0.88em/1.4 Georgia, serif; color: #3d3a35; }
.pp-v small { font: normal 700 0.85em sans-serif; color: #6b655c; }
.pp-li { display: flex; align-items: flex-start; gap: 1.5mm; margin: 0; }
.pp-day { flex: 1; display: flex; flex-direction: column; min-height: 0; } /* (the week on a bookmark: the days sharing its length) */
.pp-day b { font-size: 0.8em; color: var(--pp-acc); text-transform: uppercase; letter-spacing: 0.05em; }
.pp-day span { font-size: 0.9em; }
/* printed: on its sheet, the cut-outs dashed */
.pp-sheet { display: grid; box-sizing: border-box; justify-content: center; align-content: center; }
.pp-sheet .pp-piece { box-shadow: none; }
.pp-sheet .pp-piece.is-cut { outline: 0.3mm dashed #9a9387; outline-offset: -0.15mm; }
/* (the week's printouts: which days) */
.pp-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; } /* (the seven in one row, each the same width) */
.pp-days label { min-width: 0; padding: 8px 0; border: 1.5px solid var(--rule); border-radius: 10px; text-align: center; font: 700 13px var(--sans); color: var(--muted); cursor: pointer; }
.pp-days label.is-on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, var(--bg)); color: var(--ink); }
.pp-days input { position: absolute; opacity: 0; pointer-events: none; }
/* locked: unlocked here */
.pj-unlock { display: grid; gap: 10px; max-width: 360px; margin: 14px auto 6px; text-align: left; }
.pj-unlock .pj-btn { width: 100%; }
.pj-err { margin: 10px auto 0; max-width: 420px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, #B0473E 10%, var(--bg)); color: #B0473E; font: 600 14px/1.45 var(--sans); }

/* the journal by the day (prayer.js, daysHtml): today's page, gathered (what was read, what stood out, the prayers prayed
   for, begun, and answered, the pages written), the way to write to God under it; looking back and the days before folded */
.pj-dcard { display: grid; gap: 12px; margin-bottom: 14px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 18px; background: var(--bg-raised); }
.pj-dcard > .pj-new { margin: 2px 0 0; }
.pj-dcard > .pj-note { margin: 0; }
.pj-dh { display: flex; flex-direction: column; margin: 0; font: italic 600 22px/1.2 var(--serif); }
.pj-dh small { font: 600 13px var(--sans); font-style: normal; color: var(--muted); }
.pj-dr { display: flex; gap: 12px; align-items: flex-start; }
.pj-dr > svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--gold); }
.pj-dr > div { flex: 1; min-width: 0; }
.pj-dr p { margin: 2px 0; font: 14.5px/1.45 var(--sans); }
.pj-dr p span { color: var(--muted); }
.pj-dr .pj-page { margin: 6px 0 0; }
.pj-dk { display: block; margin-bottom: 2px; font: 800 10.5px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.pj-dq { padding-left: 10px; border-left: 2px solid color-mix(in srgb, var(--gold) 45%, var(--rule)); font-style: italic; color: var(--ink); }
.pj-ds { font-size: 13px !important; color: var(--muted); }
.pj-dns { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.pj-dn { padding: 0; border: none; background: none; color: var(--ink); font: inherit; font-weight: 700; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--gold) 55%, transparent); text-underline-offset: 3px; }
.pj-dns .pj-dn:not(:last-child)::after { content: ','; display: inline-block; text-decoration: none; }
.pj-fold { margin-bottom: 12px; }
.pj-fold > .ui-rows { border-top: 1px solid var(--rule); }
.pj-look { display: grid; gap: 8px; padding: 4px 14px 14px; }
.pj-look p { margin: 0; font: 14.5px/1.5 var(--sans); }
.pj-look .pj-dk { margin-top: 4px; }
.pj-lk span { color: var(--muted); }
.pj-then { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--rule)); border-radius: 14px; background: color-mix(in srgb, var(--gold) 7%, var(--bg)); color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.pj-then small { font: 700 12.5px var(--sans); color: var(--gold); }
.pj-then b { font: 600 15px/1.35 var(--sans); }
.pj-lockoffer { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-start; margin-bottom: 14px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 16px; background: var(--bg-raised); }
.pj-lockoffer > svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--gold); }
.pj-lockoffer p { flex: 1 1 200px; margin: 0; font: 14px/1.5 var(--sans); color: var(--muted); }
.pj-lockoffer p b { color: var(--ink); }
.pj-lockoffer > div { display: flex; align-items: center; gap: 14px; flex-basis: 100%; padding-left: 32px; }

/* a prayer, tapped (prayer.js, cardHtml): a card to read and pray through, turned over for when God answers (#513) */
.pj-cardbar { margin-bottom: 12px; } /* (in the page's middle column, as the card is) */
.pj-cardback { display: inline-flex; align-items: center; gap: 4px; }
.pj-cardback svg { width: 16px; height: 16px; margin-left: -4px; }
.pj-card { perspective: 1400px; }
.pj-card-in { display: grid; transition: transform 0.5s cubic-bezier(.2, .7, .2, 1); transform-style: preserve-3d; }
.pj-card.is-flipped .pj-card-in { transform: rotateY(180deg); }
.pj-face { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 14px; min-height: 340px; box-sizing: border-box; padding: 20px 20px 22px; border: 1px solid var(--rule); border-radius: 22px; background: var(--bg-raised); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.pj-face-b { transform: rotateY(180deg); }
.pj-face { cursor: pointer; -webkit-tap-highlight-color: transparent; } /* (a tap on it turns it over) */
.pj-card:not(.is-flipped) .pj-face-b, .pj-card.is-flipped .pj-face-f { pointer-events: none; }
.pj-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px; }
.pj-card-k { font: 800 11px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--door, var(--gold)); }
.pj-card-edit { display: inline-flex; align-items: center; gap: 6px; }
.pj-card-edit svg { width: 15px; height: 15px; }
.pj-card-t { margin: 0; font: italic 600 26px/1.25 var(--serif); }
.pj-card-b { font: 18px/1.65 var(--serif); color: var(--ink); overflow-wrap: anywhere; }
.pj-card-ans { display: flex; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--gold) 10%, transparent); font: 14.5px/1.5 var(--sans); }
.pj-card-ans svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--gold); }
.pj-card-ans span { display: flex; flex-direction: column; gap: 2px; }
.pj-card-days { margin: 0; font: 13px/1.5 var(--sans); color: var(--muted); }
.pj-card-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.pj-card-acts .pj-btn svg { width: 17px; height: 17px; }
@media (prefers-reduced-motion: reduce) { .pj-card-in { transition: none; } }

/* Today (prayer.js, todayHtml): the day, today's few to pray for, open; under them, folded, Write to Him, a way to pray,
   and God answered */
.pj-day small { display: block; margin-top: 2px; font: 600 13px var(--sans); font-style: normal; color: var(--muted); }
.pj-today { margin: 14px auto 12px; }
.pj-trow { display: flex; align-items: center; gap: 12px; padding: 8px 14px; }
.pj-trow .pj-tick { flex: none; }
.pj-trow-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 4px 0; border: none; background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.pj-trow-t b { font: 600 15.5px/1.3 var(--sans); }
.pj-trow-t small { font-size: 12.5px; color: var(--muted); }
.pj-trow.is-on .pj-trow-t b { color: var(--muted); }
.pj-today-none { margin: 0; padding: 4px 14px 6px; font: 14px/1.5 var(--sans); color: var(--muted); }
.pj-today-add { padding: 6px 14px 14px; }
.pj-actsl { display: grid; gap: 8px; padding: 4px 14px 14px; }
.pj-actsl p { margin: 0; font: 14px/1.5 var(--sans); color: var(--muted); }
.pj-actsl b { display: block; color: var(--ink); }
.pj-henry { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--rule); }
.pj-henry-r { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }