:root{--paper:#faf6ee;--surface:#fffdf8;--ink:#221d2b;--muted:#4f4858;--sage:#eee7f3;--line:#7d7184;--action:#4b2d5a;--focus:#9a4a00;--lavender:#f1ebf6;--blush:#fbeef0;--apricot:#fbefe2;--ice:#ecf1f8;--vanilla:#faf3dc;--gilt:#80621a;--attention:#7a5600;--area-w:#6b4a7d;--area-h:#8a4560;--area-e:#87522c;--area-m:#3d6286;--area-s:#755c12;--meta:1.125rem;--body:1.25rem;--question:1.375rem;--section:1.625rem;--title:1.75rem;--leading:1.45;--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans","Helvetica Neue",Arial,system-ui,sans-serif;--serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Noto Serif","Times New Roman",serif}
/* Shared styles for every route. Tokens are prepended by build.cjs from theme.js.
   Font roles never depend on which card contains a reference. Nothing is set below var(--meta)
   outside print; every control is at least 48px except the three header controls (A21). */

/* ---------- 1. Root, reading levels and text ---------- */
*{box-sizing:border-box}
fieldset{min-inline-size:0}
html{font-size:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%;color-scheme:light}
html[data-reading=larger]{font-size:125%}
html[data-reading=largest]{font-size:150%}
body{margin:0;background:var(--paper);color:var(--ink);font:var(--body)/var(--leading) var(--sans);overflow-wrap:anywhere}
[hidden]{display:none!important}
button,input,textarea,select{font:inherit;color:inherit}
button,a,summary,input,textarea,select{-webkit-tap-highlight-color:transparent}
h1{font:400 var(--title)/1.2 var(--serif);margin:0 0 12px}
h2{font:400 var(--section)/1.25 var(--serif);margin:0 0 12px}
h3,h4{font-size:var(--body);line-height:1.3;margin:16px 0 8px}
p{margin:0 0 12px}
ul,ol{margin:0 0 12px;padding-left:1.25em}
.meta,.eyebrow,label,.label,legend{font-size:var(--meta)}
.meta,.eyebrow{color:var(--muted)}
.eyebrow{margin:0 0 12px}
.pre{white-space:pre-wrap;overflow-wrap:anywhere}
.muted{color:var(--muted)}
a{color:inherit;text-underline-offset:4px}
.skip{position:fixed;left:12px;top:10px;z-index:100;transform:translateY(-180%);padding:10px;background:white}
.skip:focus{transform:none}
:where(button,a,summary,input,select,textarea):focus-visible{outline:3px solid var(--focus);outline-offset:3px}
main:focus,h1:focus,#reader-heading:focus{outline:0}
@media(max-width:359px){h1{font-size:1.5rem}}

/* ---------- 2. Buttons ---------- */
button{cursor:pointer;background:transparent;border:1px solid var(--line);border-radius:10px;padding:10px 16px;min-height:48px;font-size:var(--meta);line-height:1.3;font-weight:600}
button:disabled{cursor:default;opacity:.6}
.primary{background:var(--action);color:var(--surface);border-color:var(--action)}
.secondary{background:var(--surface)}
.quiet{border-color:transparent;text-decoration:underline;text-underline-offset:4px}
.danger{border-color:var(--ink)}
@media(hover:hover){button:hover{background:var(--sage)}.primary:hover{background:var(--ink)}.site-header nav a:hover{background:var(--sage)}}
.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0}
@media(max-width:699px){.actions>button{flex:1 1 100%}}

/* ---------- 3. Fields and choices ---------- */
.field{min-width:0;display:block;margin:12px 0 0;font-weight:600;font-size:var(--meta);line-height:1.3}
.field small{font-size:var(--meta);font-weight:400;color:var(--muted)}
input:not([type=radio]):not([type=checkbox]),textarea,select{width:100%;max-width:100%;min-width:0;border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:10px 12px;font:400 var(--body)/1.5 var(--sans);margin-top:6px}
input[type=date],input[type=datetime-local],select{min-height:48px;min-width:0}
textarea{resize:vertical;min-height:5.5em;scroll-margin:100px 0}
textarea::placeholder,input::placeholder{color:var(--muted);opacity:1}
input[type=radio],input[type=checkbox]{width:1.5rem;height:1.5rem;margin:0;accent-color:var(--action);flex:none}
.check{min-width:0;display:flex;gap:12px;align-items:flex-start;padding:8px 0;min-height:48px;cursor:pointer;font-size:var(--meta)}
.check input{margin-top:.1em}
.checks{display:flex;flex-wrap:wrap;gap:12px;margin:12px 0}
.option{cursor:pointer;display:flex;gap:10px;align-items:center;padding:9px 12px;border:1px solid var(--line);border-radius:8px;min-height:48px;background:var(--surface)}
.option:has(input:checked){box-shadow:inset 0 0 0 1px var(--ink);background:var(--sage)}
.segmented{display:flex;flex-wrap:wrap;gap:6px;border:0;padding:0;margin:12px 0}
.segmented legend{width:100%;margin-bottom:8px;font-weight:600}
.title-field input{font:400 var(--section)/1.3 var(--serif);border-width:0 0 1px;border-radius:0;padding:8px 0}
.title-field{margin-top:12px}
.prayer-field textarea{min-height:16em;line-height:1.7;border:0;padding:12px 0;resize:vertical}
.prayer-field textarea:focus-visible{outline-offset:6px}
.prayer-field{margin:20px 0}
.form-row{display:flex;flex-wrap:wrap;gap:12px;align-items:end;border-bottom:1px solid var(--line);padding-bottom:16px}
.form-row .field{flex:1;min-width:190px;margin:0}
.save-row{border-top:1px solid var(--line);padding-top:16px}
.save-row p{flex-basis:100%;font-size:var(--meta);color:var(--muted);margin:0}
.field-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fruits{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr));gap:0 12px}
.tag-suggestions{display:flex;flex-wrap:wrap;gap:4px}
.tag-suggestions button{min-height:48px;font-size:var(--meta);padding:8px 12px}

/* ---------- 4. Disclosures, references and callouts ---------- */
details{border-top:1px solid var(--line);padding:6px 0;margin:8px 0}
summary{cursor:pointer;font-weight:600;font-size:var(--body);line-height:1.3;padding:11px 2px;min-height:48px}
details[open]>summary{margin-bottom:8px}
.area-summary{display:inline-flex;gap:10px;align-items:center}
.area-summary b{font:400 var(--section)/1.2 var(--serif)}
.area-note{padding:10px 12px;background:var(--surface);border:1px solid var(--line);border-radius:8px;margin:8px 0}
.area-note .field{margin:0}
.area-note textarea{min-height:5.5em}
.reading-links{display:flex;flex-wrap:wrap;gap:4px 12px}
.verse-link,.reading-links a,.about-copy a{display:inline-flex;align-items:center;min-height:48px;min-width:0;padding:4px 8px 4px 0;font:400 var(--body)/1.45 var(--sans);text-decoration:underline;text-underline-offset:4px;color:var(--ink);overflow-wrap:anywhere;text-align:left}
button.verse-link{border:0;border-radius:4px;background:transparent}
.callout{padding:14px 16px;background:var(--sage);border:1px solid var(--line);border-radius:10px;margin:16px 0}
.callout p:last-child{margin:0}
.callout p{font-size:var(--body)}
.empty{padding:32px 20px;border:1px dashed var(--line);border-radius:10px;text-align:center;margin:24px 0}

/* ---------- 5. Header: two rows on phones (32px brand, 40px tabs), one row from 700px ---------- */
.site-header{max-width:72rem;margin:auto;display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;padding:0 max(16px,var(--inset-r,0px)) 0 max(16px,var(--inset-l,0px));background:var(--paper);box-shadow:0 1px 0 var(--line)}
.brand{flex:1 1 100%;display:inline-flex;align-items:center;gap:8px;min-height:32px;min-width:0;font:400 1.25rem/1 var(--serif);color:var(--ink);text-decoration:none}
.brand-cross{width:1.1em;height:1.45em;flex:none;color:var(--gilt)}
.brand-text{min-width:0}
.brand small{font:var(--meta)/1 var(--sans);color:var(--muted);margin-left:6px;white-space:nowrap}
.site-header nav{display:flex;flex-wrap:wrap;gap:4px;flex:1 1 auto;min-width:0}
.site-header nav a{display:inline-flex;align-items:center;min-height:40px;padding:6px 10px 9px;font-size:var(--meta);font-weight:600;line-height:1.2;text-decoration:none;color:var(--ink);border-radius:6px 6px 0 0}
.site-header nav a[aria-current]{padding-bottom:6px;border-bottom:3px solid var(--action);background:var(--sage)}
.text-size{min-height:40px;min-width:48px;padding:4px 10px;margin-left:auto;border-radius:8px;line-height:1.2}
@media(max-width:359px){.brand small{display:none}}
@media(min-width:700px){.brand{flex:0 0 auto}.site-header{padding-block:12px;gap:0 24px}}

/* ---------- 6. Page frame ---------- */
main{max-width:72rem;margin:auto;padding:4px max(16px,var(--inset-r,0px)) 32px max(16px,var(--inset-l,0px));min-height:40rem}
.page-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}
.page-heading p{max-width:34em}
.page-heading>div{min-width:0}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:24px;align-items:start}
.guided-workspace{max-width:46rem;margin:auto}
.writing-paper{padding:14px;background:var(--surface);border:1px solid var(--line);border-radius:12px;min-width:0}
.writing-paper .date-row{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.date-row time{font-size:var(--meta);color:var(--muted)}
.notes-column{min-width:0}
.notes-column .guide-head{border-left:3px solid var(--line);padding:4px 0 4px 16px;margin-bottom:20px}
.notes-column .guide-head p{font-size:var(--meta)}
.site-footer{max-width:72rem;margin:auto;padding:20px max(16px,var(--inset-r,0px)) 24px max(16px,var(--inset-l,0px));border-top:1px solid var(--line);display:flex;gap:12px 16px;align-items:center;justify-content:space-between;flex-wrap:wrap;font-size:var(--meta);color:var(--muted)}
.site-footer p{margin:0}
.site-footer>div{display:flex;gap:4px;flex-wrap:wrap}
.site-footer button{border:0;padding:10px 8px;font-weight:400;text-decoration:underline;text-underline-offset:4px}
.build-label{display:block;font-size:var(--meta)}
@media(min-width:700px){main{padding:20px max(24px,var(--inset-r,0px)) 40px max(24px,var(--inset-l,0px))}.writing-paper{padding:24px}.site-footer{padding-left:max(24px,var(--inset-l,0px));padding-right:max(24px,var(--inset-r,0px))}}

/* ---------- 7. Journal, browse, entry and Scripture routes (look only, A6) ---------- */
.catalogue-tools,.filters{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:12px;margin-bottom:16px}
.filters .field,.catalogue-tools .field{margin:0}
.filters details{grid-column:1/-1;margin:0}
.filter-extra{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.catalogue{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.passage-card{background:var(--surface);padding:16px;border:1px solid var(--line);border-radius:10px;min-width:0;overflow-wrap:anywhere}
.passage-card h2{margin-bottom:8px}
.passage-card h2 .verse-link{font-family:var(--serif);font-size:var(--section);line-height:1.25;padding-left:0}
.passage-card .meta{margin-bottom:6px}
.index-list{border-top:1px solid var(--line);margin-top:20px}
.month-heading{padding:20px 0 6px;font:400 var(--section)/1.3 var(--serif)}
.index-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;border-bottom:1px solid var(--line);padding:16px 6px}
.index-row .entry-title{padding:4px 0;min-height:48px;border:0;background:none;font:400 var(--section)/1.3 var(--serif);text-align:left;text-decoration:underline;text-underline-offset:4px;overflow-wrap:anywhere}
.index-row .row-meta{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:var(--meta);color:var(--muted)}
.index-row time{font-size:var(--meta);color:var(--muted);align-self:center}
.reading-page{max-width:52rem;margin:auto}
.reading-page .prayer-content{font-size:var(--body);line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere;padding:20px 16px;background:var(--surface);border:1px solid var(--line);border-radius:10px;margin:20px 0;font-family:var(--serif)}
.entry-metadata{font-size:var(--meta);color:var(--muted)}
.timeline{border-left:2px solid var(--line);padding-left:16px;margin:16px 0}
.timeline>div{margin:16px 0}
.timeline button{text-align:left}
.export-sheet{max-width:52rem;margin:auto;padding:20px 16px;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow-wrap:anywhere}
.export-section{margin-top:24px}
.export-area{padding-left:16px;border-left:2px solid var(--line);margin:16px 0}
.export-sheet footer{border-top:1px solid var(--line);margin-top:20px;padding-top:16px}
.export-sheet a{font-size:var(--body)}
@media(min-width:700px){.reading-page .prayer-content{padding:24px}.export-sheet{padding:28px}}
@media(max-width:1000px){.workspace{grid-template-columns:minmax(0,1fr)}.notes-column{max-width:none}.catalogue{grid-template-columns:minmax(0,1fr)}.filter-extra{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.page-heading{flex-wrap:wrap;gap:8px;margin-bottom:16px}.form-row{gap:8px}.form-row .field{min-width:150px}.option{padding:9px 10px}.field-pair{grid-template-columns:minmax(0,1fr);gap:0}.catalogue-tools,.filters{grid-template-columns:minmax(0,1fr);gap:10px}.filter-extra{grid-template-columns:minmax(0,1fr)}.index-row{grid-template-columns:minmax(0,1fr)}.index-row time{grid-row:2}.index-row .row-meta{grid-row:3}.site-footer>span,.site-footer>p{flex-basis:100%}}

/* ---------- 8. Reader dialog ---------- */
dialog{width:min(52rem,calc(100% - 32px));max-width:calc(100% - 32px);max-height:90vh;max-height:90dvh;overflow:hidden;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font:var(--body)/var(--leading) var(--sans)}
dialog:not([open]){display:none}
dialog[open]{display:flex;flex-direction:column}
dialog::backdrop{background:rgb(0 0 0/.45)}
.reader-header{display:flex;align-items:center;gap:12px;justify-content:space-between;flex:none;padding:12px max(16px,var(--inset-r,0px)) 12px max(16px,var(--inset-l,0px));border-bottom:1px solid var(--line);background:var(--paper)}
.reader-header h2{margin:0;flex:1;min-width:0;font-size:var(--section);overflow-wrap:anywhere}
.reader-header button{flex:none;min-width:64px}
.reader-content{overflow-y:auto;overscroll-behavior:contain;padding:20px max(16px,var(--inset-r,0px)) max(24px,calc(var(--inset-b,0px) + 8px)) max(16px,var(--inset-l,0px));min-height:0}
.reader-content h2{font-size:var(--section)}
.scripture-text{white-space:pre-wrap;line-height:1.7;border-left:3px solid var(--line);padding-left:16px;margin:20px 0;font:400 var(--body)/1.7 var(--serif);overflow-wrap:anywhere}
.source-state{font-size:var(--body)}
.reader-open{overflow:hidden}
.size-choice{display:grid;gap:8px}
.size-choice button{text-align:left;padding:12px 16px}
#reader [data-action=size][aria-pressed=true]{border:3px solid var(--action);background:var(--sage)}
.about-copy h3{font:400 var(--section)/1.3 var(--serif)}
.about-copy h4,.about-copy summary{font-size:var(--body)}
.about-copy .eyebrow,.about-source-note{font-size:var(--meta);color:var(--muted)}
.about-poem{border-left:3px solid var(--line);padding:14px;margin:16px 0;background:var(--paper);font:400 var(--body)/1.7 var(--serif)}
.poem-line{display:block;padding-left:1em;text-indent:-1em}
.stanza-start{margin-top:1em}
.about-example{border-left:3px solid var(--line);padding:14px;margin:16px 0;background:var(--sage)}
.about-example p{margin:0}
.about-areas>div{border-top:1px solid var(--line);padding:14px 0}
.about-areas dt{font-weight:600}
.about-areas dt small{display:block;font-size:var(--meta)}
.about-areas dd{margin:10px 0}
.about-letter{font-family:var(--serif);font-size:var(--section);margin-right:12px}
.about-ending{padding-top:20px;border-top:1px solid var(--line)}
.about-copy{overflow-wrap:anywhere}
.about-copy h3 br{display:none}
.inline-dialog{position:static;width:100%;max-height:none}
.inline-dialog .reader-content{overflow:visible}
.esv-reader-frame{display:block;border:1px solid var(--line);width:100%;height:220px;margin:12px 0;background:var(--paper);border-radius:12px}
.reader-content:has(.esv-reader-frame){padding-bottom:24px}
@media(max-width:620px){dialog{width:100%;max-width:100%;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;border:0;border-radius:0}.reader-header{padding-top:max(12px,env(safe-area-inset-top));flex-wrap:wrap}.reader-header h2{min-width:140px}.reader-header button[data-action=reader-back]{order:3}.about-poem{padding:12px;margin-left:0;margin-right:0}}

/* ---------- 9. Motion and print ---------- */
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
@media print{@page{size:A4;margin:16mm}.site-header,.site-footer,#notice,.actions,.skip,button{display:none!important}body,main{background:white;color:black;padding:0;margin:0;max-width:none}.writing-paper,.export-sheet{border:0}.notes-column{display:none}.workspace{display:block}.pre,.prayer-content{font-size:11pt}html.reader-open body>*:not(dialog){display:none!important}dialog[open]{position:static;width:100%;max-width:none;height:auto;max-height:none;display:block;border:0}.reader-content{overflow:visible;padding:0}.reader-header{padding:0;background:white}.reader-header h2{margin-bottom:16px}}

/* ---------- 10. Pray route shared pieces (details in experience.css) ---------- */
.guided-workspace .field textarea{font-size:var(--body)}
.guided-workspace h3{font-size:var(--body);line-height:1.3}
.consent-box{border-top:1px solid var(--line);padding-top:16px;margin-top:20px}
.consent-box .meta{font-size:var(--meta)}
.whems-jumps{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.whems-jumps a{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:6px 14px 6px 12px;border:1px solid var(--line);border-radius:24px;background:var(--surface);color:var(--ink);text-decoration:none;font-size:var(--meta);font-weight:600}
.open-whems{display:grid;gap:12px}
.open-area{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;scroll-margin-top:20px}
.open-area h2{margin-top:0}
.reflection-columns{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.facts-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.context-focus{border-left:3px solid var(--ink);padding-left:14px}
.prayer-form-block{border-top:1px solid var(--line);padding:16px 0}
.prayer-form-block textarea{min-height:6.5em}
.decision-option{border-left:3px solid var(--line);padding-left:14px;margin:16px 0}
.final-prayers button{min-height:48px}
.safety-note{border:2px solid var(--ink);padding:12px;border-radius:8px}
.guided-workspace button:disabled{opacity:.65;cursor:wait}
@media(max-width:700px){.facts-grid{grid-template-columns:minmax(0,1fr)}}