/* Morning and Evening (/devotional/); colour tokens and dark mode as in /topics/topics.css */
:root {
    --bar: #1e40af; --bar-ink: #fff;
    --bg: #f9fafb; --card: #fff; --ink: #111827; --muted: #4b5563; --line: #e5e7eb;
    --accent: #1d4ed8; --accent-ink: #fff; --accent-soft: #dbeafe; --quote: #1f2937;
    --serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
}
html.dark {
    --bar: #1e3a8a; --bg: #111827; --card: #1f2937; --ink: #f3f4f6; --muted: #9ca3af; --line: #374151;
    --accent: #93c5fd; --accent-ink: #0b1220; --accent-soft: #1e3a5f; --quote: #e5e7eb;
    color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink);
       font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow-x: hidden; }
a { color: var(--accent); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.bar { position: sticky; top: 0; z-index: 10; background: var(--bar); color: var(--bar-ink);
       display: flex; align-items: center; gap: 12px; padding: 10px 16px; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.bar a { color: inherit; text-decoration: none; display: flex; align-items: center; }
.bar img { height: 28px; width: auto; }
.bar-title { font-weight: 600; }
.bar .back { margin-left: auto; font-size: .875rem; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.14); }
.bar .back:hover { background: rgba(255,255,255,.24); }

main { max-width: 680px; margin: 0 auto; padding: 16px 16px 48px; }

button { font: inherit; color: var(--ink); }
.controls { display: grid; gap: 12px; justify-items: center; margin-bottom: 16px; }
.daynav { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; gap: 8px; width: 100%; }
.step { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: var(--card);
        font-size: 1.75rem; line-height: 1; padding: 0 0 3px; cursor: pointer; }
.step:hover { border-color: var(--accent); color: var(--accent); }
.date { text-align: center; min-width: 0; }
.date h1 { margin: 0; font: 600 1.6rem/1.2 var(--serif); }
.today { margin: 2px 0 0; font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }

.toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; background: var(--card); padding: 3px; }
.toggle button { border: 0; background: none; border-radius: 999px; padding: 8px 22px; min-height: 40px; font-weight: 600;
                 font-size: .95rem; cursor: pointer; color: var(--muted); }
.toggle button:hover { color: var(--accent); }
.toggle button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
button.link { border: 0; background: none; color: var(--accent); font-size: .9rem; text-decoration: underline;
              text-underline-offset: 2px; cursor: pointer; padding: 6px 10px; }

#reading { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 20px 18px 22px; min-height: 70vh; min-height: 70dvh; }  /* a reading is always taller than this: no layout shift while it loads */
.status { color: var(--muted); text-align: center; margin: 24px 0; }
.status button { margin-left: 4px; }
.verse-block { margin: 0 0 18px; }
.verse-block + .verse-block { margin-top: -4px; }
blockquote.quote { margin: 0; padding: 2px 0 2px 16px; border-left: 4px solid var(--accent);
                   font: italic 1.4rem/1.4 var(--serif); color: var(--quote); overflow-wrap: anywhere; }
.verse-ref { margin: 8px 0 0 20px; font-size: .95rem; font-weight: 600; }
.verse-ref a { text-underline-offset: 2px; }
.body { margin-top: 22px; font-family: var(--serif); font-size: 1.1rem; line-height: 1.75; overflow-wrap: break-word; }
.body p { margin: 0 0 1em; }
.body p:last-child { margin-bottom: 0; }
.body p.poem { margin-left: 1.25em; font-style: italic; color: var(--quote); }
.body a { text-underline-offset: 2px; }

.credits { margin-top: 18px; font-size: .85rem; color: var(--muted); text-align: center; }
.credits a { text-decoration: underline; text-underline-offset: 2px; }
noscript .status { padding: 0 16px; }

@media (min-width: 560px) {
    main { padding-top: 28px; }
    #reading { padding: 28px 32px 32px; }
    blockquote.quote { font-size: 1.55rem; }
    .body { font-size: 1.15rem; }
    .date h1 { font-size: 1.9rem; }
}