/* Unyadua Sermons: the Unyadua look (design-system tokens). Daylight by default, Stage when the phone is in dark mode.
   Fonts are our own files (no Google Fonts), so opening this page tells nobody anything about the reader. */
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Source Serif 4";font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/source-serif-4-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Source Serif 4";font-weight:400;font-style:italic;font-display:swap;src:url(/fonts/source-serif-4-latin-400-italic.woff2) format("woff2")}

:root{
  /* Daylight */
  --bg:#e9ecf0; --bar:#f4f6f8; --card:#ffffff; --field:#f4f6f8; --hover:#e8ebf0;
  --line:#d6dbe2; --line-strong:#78828f;
  --ink:#13151a; --ink2:#4a525e; --ink3:#5b6471;
  --accent:#c8891a; --on-accent:#1a1204; --accent-ink:#8a5a00; --accent-soft:rgba(200,137,26,.15);
  --scripture:#5a40c9; --success:#0a7249; --caution:#a04a00; --danger:#c0272d; --focus:#13151a;
  --sans:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",Consolas,ui-monospace,monospace;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
}
@media (prefers-color-scheme:dark){
  :root{
    /* Stage */
    --bg:#0b0c0e; --bar:#121418; --card:#181b20; --field:#121418; --hover:#20242b;
    --line:#2a2f37; --line-strong:#6a7280;
    --ink:#f1f2f4; --ink2:#a6adb8; --ink3:#8a919d;
    --accent:#e7b24c; --on-accent:#1a1204; --accent-ink:#e7b24c; --accent-soft:rgba(231,178,76,.14);
    --scripture:#b6a2ff; --success:#5bd39c; --caution:#ff9d52; --danger:#ff6f68; --focus:#f1f2f4;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* top bar: the full mark (with the praying figure, 32 px) beside the name; gap = a quarter of the mark's height */
.bar{position:sticky;top:0;z-index:10;background:var(--bar);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top)}
.bar-in{max-width:720px;margin:0 auto;padding:0 16px;height:56px;display:flex;align-items:center}
.brand{display:inline-flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;font-size:16px;font-weight:600;line-height:1}
.brand img{display:block;width:32px;height:32px}
.brand .sub{color:var(--ink2);font-weight:400}

main{flex:1;width:100%;max-width:720px;margin:0 auto;padding:24px 16px 32px}
.pad{padding:24px 0}
h1{font-size:30px;line-height:1.2;font-weight:600;margin:0 0 20px}
h2{font-size:19px;line-height:1.3;font-weight:600;margin:0 0 12px}
.muted{color:var(--ink2)}
.small-print{color:var(--ink3);font-size:14px;margin:10px 0 0}

/* cards */
.card{display:block;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:18px 18px;margin:0 0 14px;color:var(--ink);text-decoration:none}
a.card{position:relative;padding-right:44px;transition:border-color .16s ease,background-color .16s ease}
a.card::after{content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:2px solid var(--accent-ink);border-top:2px solid var(--accent-ink);transform:rotate(45deg)}
a.card:hover,a.card:active{border-color:var(--accent);background:var(--hover)}
.card .t{font-size:19px;line-height:1.3;font-weight:600}
.card .s{color:var(--ink2);font-size:15px;margin-top:2px}
.card .foot-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.card .link{display:block;color:inherit;text-decoration:none}
.code{font:500 12px/1 var(--mono);color:var(--ink3);letter-spacing:.02em}
.code b{font:inherit;color:var(--ink2);text-transform:uppercase}
.overline{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}

/* controls */
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
input[type=text]{flex:1;min-width:0;min-height:44px;padding:10px 14px;border:1px solid var(--line-strong);border-radius:4px;background:var(--field);color:var(--ink);font:inherit;font-size:16px}
input[type=text]:focus{border-color:var(--accent);outline:2px solid var(--focus);outline-offset:1px}
input::placeholder{color:var(--ink3)}
button,.btn{appearance:none;min-height:44px;border:1px solid var(--accent);border-radius:4px;padding:10px 20px;background:var(--accent);color:var(--on-accent);font:600 15px/1.2 var(--sans);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:filter .09s ease,background-color .09s ease}
button:hover,.btn:hover{filter:brightness(1.07)}
button:active,.btn:active{filter:brightness(.95)}
button.ghost,.btn.ghost{background:transparent;color:var(--accent-ink);border-color:var(--line-strong)}
button.ghost:hover,.btn.ghost:hover{background:var(--accent-soft);border-color:var(--accent);filter:none}
button.small{min-height:32px;padding:4px 12px;font-size:13px;font-weight:500}
button.small.ghost{color:var(--ink2)}
button.small.ghost:hover{color:var(--danger);border-color:var(--danger);background:transparent}

/* messages: green for good news, red for problems */
.msg{padding:12px 16px;border-radius:8px;margin:0 0 20px;font-size:15px;font-weight:500;border:1px solid var(--line);background:var(--card)}
.msg.ok{color:var(--success);border-color:var(--success);background:color-mix(in srgb,var(--success) 10%,var(--card))}
.msg.err{color:var(--danger);border-color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,var(--card))}

/* home: the empty state shows the full mark */
.empty{text-align:center;padding:12px 0 24px}
.empty img{width:64px;height:64px;display:block;margin:0 auto 16px}
.empty p{max-width:30em;margin:0 auto;color:var(--ink2)}

/* church page */
.crumb{display:inline-flex;align-items:center;gap:6px;margin:0 0 16px;color:var(--accent-ink);text-decoration:none;font-size:15px;font-weight:600}
.crumb:hover{text-decoration:underline}
.head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px 16px;flex-wrap:wrap;margin-bottom:20px}
.head h1{margin:0;flex:1 1 220px}

/* the notes */
.notes{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px 22px 22px}
.notes .title{font-size:26px;line-height:1.25;font-weight:600;margin:0 0 6px}
.notes .date{color:var(--ink3);font-size:15px;margin:0 0 8px}
.notes h2{color:var(--accent-ink);font-size:19px;margin:30px 0 12px;padding-bottom:5px;border-bottom:1px solid var(--line)}
.notes h2.check{color:var(--caution)}
.notes h3{font-size:17px;font-weight:600;margin:22px 0 8px}
.notes p{margin:0 0 14px}
.notes ul,.notes ol{margin:0 0 16px;padding-left:22px}
.notes li{margin:0 0 12px;padding-left:2px}
.notes ol li::marker{color:var(--accent-ink);font-weight:600}
.notes ul li::marker{color:var(--accent)}
.notes strong{font-weight:600}
.notes ul.refs{list-style:none;padding-left:0}
.notes ul.refs li{padding-left:0}
.notes .ref{font-weight:600;color:var(--scripture)}
.notes .how{color:var(--ink2)}
.notes blockquote{margin:0 0 14px;padding:12px 18px;border-left:4px solid var(--accent);background:var(--accent-soft);border-radius:0 8px 8px 0;font:italic 400 19px/1.55 var(--serif)}
.notes ul.check{padding-left:20px;font-size:15px;color:var(--ink2)}
.notes ul.check li::marker{color:var(--caution)}
.byline{margin:28px 0 0;padding-top:14px;border-top:1px solid var(--line);color:var(--ink3);font-size:13px;line-height:1.5}
.actions{display:flex;gap:12px;margin-top:16px}
.actions button{flex:1}

/* footer */
.foot{padding:24px 16px;padding-bottom:calc(24px + env(safe-area-inset-bottom));text-align:center;font-size:13px;line-height:1.5;color:var(--ink3);max-width:600px;margin:0 auto}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (min-width:600px){h1{font-size:32px}.notes{padding:28px 32px 26px}.notes .title{font-size:28px}}

/* print: plain black on white, only the notes */
@media print{
  .bar,.foot,.actions,.crumb{display:none!important}
  body{background:#fff;color:#000;font-size:13pt}
  main{max-width:none;padding:0}
  .notes{border:0;padding:0;background:#fff}
  .notes h2,.notes h2.check{color:#000;border-bottom:1px solid #333}
  .notes .ref{color:#000}
  .notes blockquote{border-left:4px solid #333;background:transparent;color:#000}
  .notes .how,.notes .date,.notes ul.check,.byline{color:#333}
}