/* Color-coded resource switches (resources.js), the day completion checkbox, Read mode and Bible search (reader.js). */

/* ---------- resource colors: one per resource type; the switch and its content block share it ----------
   Every color has at least 4.5:1 contrast on --paper and --bg, and on the switch's tinted "on" background,
   in both themes. */
:root {
  --rc-words: #0b6a72; --rc-note: #8f5200; --rc-xrefs: #1b5cb0; --rc-teachers: #6a3cae; --rc-fathers: #ad2433;
  --rc-jewish: #2c6a2c; --rc-henry: #9c2a78; --rc-notes: #6d5f00; --rc-maps: #7a4b1e; --rc-interlinear: #3f4a5c;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --rc-words: #5fc6cc; --rc-note: #e8a64e; --rc-xrefs: #86b4f2; --rc-teachers: #bea4f2; --rc-fathers: #f2929b;
    --rc-jewish: #8fd08f; --rc-henry: #eb92cf; --rc-notes: #d6c75a; --rc-maps: #d9ac7c; --rc-interlinear: #b9c3d3; }
}
:root[data-theme="dark"] { --rc-words: #5fc6cc; --rc-note: #e8a64e; --rc-xrefs: #86b4f2; --rc-teachers: #bea4f2; --rc-fathers: #f2929b;
  --rc-jewish: #8fd08f; --rc-henry: #eb92cf; --rc-notes: #d6c75a; --rc-maps: #d9ac7c; --rc-interlinear: #b9c3d3; }
.rc-words, .res[data-res="words"] { --rc: var(--rc-words); }
.rc-note, .res[data-res="note"] { --rc: var(--rc-note); }
.rc-xrefs, .res[data-res="xrefs"] { --rc: var(--rc-xrefs); }
.rc-teachers, .res[data-res="teachers"] { --rc: var(--rc-teachers); }
.rc-fathers, .res[data-res="fathers"] { --rc: var(--rc-fathers); }
.rc-jewish, .res[data-res="jewish"] { --rc: var(--rc-jewish); }
.rc-henry, .res[data-res="henry"] { --rc: var(--rc-henry); }
.rc-notes, .res[data-res="notes"] { --rc: var(--rc-notes); }
.rc-maps, .res[data-res="maps"] { --rc: var(--rc-maps); }
.rc-interlinear { --rc: var(--rc-interlinear); }

/* Content blocks: a colored rule on the left and a colored heading, matching the switch */
.res[data-res] { border-left: 4px solid var(--rc); padding: .1rem 0 .1rem .9rem; margin: 1rem 0; }
.res[data-res] > h4:first-child { color: var(--rc); margin-top: .2rem; }
.res[data-res="maps"] { margin: .4rem 0 .8rem; }
.res[data-res="maps"]:empty, .res[data-res="maps"]:not(:has(> :not([hidden]))) { display: none; }
/* Interlinear on: the word-by-word blocks get the interlinear color */
.il-w { border-color: color-mix(in srgb, var(--rc-interlinear) 45%, var(--rule)) !important; }
.il-head b, .il-head strong { color: var(--rc-interlinear); }

/* ---------- switches: one set per page, full names ---------- */
.passage-head { padding-top: 1.4rem; border-top: 1px solid var(--rule); margin-bottom: .6rem; }
.passage-head h2 { margin: 0; }
.res-set { margin: .4rem 0 1.6rem; font-family: var(--sans); }
.res-set-day { padding: .9rem 1rem 1rem; border: 1px solid var(--rule); border-radius: 14px; background: var(--paper); scroll-margin-top: 7.5rem; }
.res-set-h { margin: 0 0 .6rem; font: 700 1rem/1.2 var(--sans); color: var(--ink); letter-spacing: 0; }
.res-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.res-set-read .res-row { justify-content: flex-end; }
/* A switch: color-coded border, a check box (outlined when off, filled with a check mark when on), the full
   name and the word On/Off, so the state never depends on color alone. */
.res-sw { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .35rem .75rem .35rem .6rem;
  border: 2px solid color-mix(in srgb, var(--rc) 55%, var(--rule)); border-radius: 12px; background: var(--paper); color: var(--ink);
  font: 600 .9rem/1.15 var(--sans); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .15s, border-color .15s; }
.res-box { position: relative; width: 1.15rem; height: 1.15rem; border-radius: 4px; border: 2px solid var(--rc); background: var(--paper); flex: none; }
.res-state { margin-left: auto; padding-left: .2rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.res-sw[aria-pressed="true"] { border-color: var(--rc); background: color-mix(in srgb, var(--rc) 14%, var(--paper)); }
.res-sw[aria-pressed="true"] .res-box { background: var(--rc); }
.res-sw[aria-pressed="true"] .res-box::after { content: ""; position: absolute; left: .3rem; top: .05rem; width: .3rem; height: .62rem;
  border: solid var(--paper); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.res-sw[aria-pressed="true"] .res-state { color: var(--rc); }
@media (hover: hover) { .res-sw:hover { border-color: var(--rc); } }
.res-sw:focus-visible { outline: 3px solid var(--rc); outline-offset: 2px; }
.res-help { margin: .7rem 0 0; }
/* Phones: two per row on larger phones, one per row below 480px, always with the full name.
   (The columns are minmax(0, 1fr): with plain 1fr, the longest name, "Matthew Henry's Commentary", held its column
   open, so at 431-470px, e.g. a 440px iPhone 17 Pro Max, the right-hand column ran off the screen and widened the page.) */
.res-sw { min-width: 0; max-width: 100%; }
.res-name { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .res-set .res-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
  .res-sw { font-size: .9rem; padding: .35rem .6rem .35rem .55rem; }
}
@media (max-width: 480px) { .res-set .res-row { grid-template-columns: minmax(0, 1fr); } }
.res-sw[hidden], .res[hidden] { display: none !important; }
/* Maps off: place names stay as plain text */
.res-off-maps button.plc { color: inherit !important; text-decoration: none !important; border: 0 !important; pointer-events: none; cursor: text; }

/* The one "I've completed Day N" checkbox at the end of the day */
.day-done { margin: 2rem 0 1.2rem; }
.day-done .day-check { font-size: 1.05rem; font-weight: 600; }
.day-done .prog-status { margin: .5rem 0 0; }
.day-done .prog-btns { margin-top: .4rem; }
.day-done.is-complete { border-color: var(--gold); background: var(--gold-soft); }

/* top bar sizing lives in header.css */

/* ---------- Read mode ---------- */
.reader h1 { margin-bottom: .4rem; }
.rd-head { position: sticky; top: var(--topbar-h, 3.5rem); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem;
  margin: 0 -.4rem 1rem; padding: .55rem .4rem; background: var(--bg); border-bottom: 1px solid var(--rule); font-family: var(--sans); }
.rd-loc { display: flex; align-items: center; gap: .35rem; flex: 0 1 auto; }
.rd-pick { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: .35rem .85rem; border-radius: 999px; border: 1px solid var(--accent);
  background: var(--paper); color: var(--ink); font: 700 .95rem/1.1 var(--sans); cursor: pointer; }
.rd-pick[aria-expanded="true"] { background: var(--accent); color: var(--accent-ink); }
.rd-step { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rule); background: var(--paper);
  color: var(--accent); font-size: 1.5rem; line-height: 1; text-decoration: none; }
.rd-step:hover { border-color: var(--gold); }
.rd-step.disabled { opacity: .35; }
.rd-search { display: flex; align-items: center; gap: .35rem; flex: 1 1 15rem; min-width: 0; }
.rd-search input { flex: 1 1 8rem; min-width: 0; font: inherit; font-size: 1rem; padding: .55rem .9rem; border-radius: 999px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); }
.rd-search input:focus { outline: 2px solid var(--gold); border-color: var(--gold); }
.rd-search .rd-go { padding: .55rem .8rem; min-height: 40px; }
.rd-search .rd-go svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.rd-search.big { flex-wrap: wrap; }
.rd-search.big input { flex: 1 1 14rem; font-size: 1.05rem; padding: .7rem 1rem; }
.rd-scope { font: inherit; font-size: .9rem; padding: .55rem .6rem; border-radius: 999px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); max-width: 12rem; }
.rd-sbar { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; margin: .6rem 0 .4rem; font-family: var(--sans); }
@media (max-width: 640px) {
  .rd-go-t { display: none; }
  .rd-head { gap: .45rem; }
  .rd-loc { width: 100%; }
  .rd-pick { flex: 1 1 auto; justify-content: center; }
}
.rd-picker { margin: 0 0 1.2rem; padding: .9rem; }
.rd-pk-h { margin: .5rem 0 .4rem; font-family: var(--sans); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.rd-pk-top { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.rd-pk-top .rd-pk-h { margin: 0; }
.rd-grid { display: grid; gap: .3rem; }
.rd-grid.books { grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr)); }
.rd-grid.nums { grid-template-columns: repeat(auto-fill, minmax(2.8rem, 1fr)); margin-top: .5rem; }
.rd-bk, .rd-num { display: grid; place-items: center; min-height: 40px; padding: .2rem; border-radius: 10px; border: 1px solid var(--rule); background: var(--bg);
  color: var(--ink); font: 600 .82rem/1.1 var(--sans); text-decoration: none; cursor: pointer; text-align: center; }
.rd-bk:hover, .rd-num:hover { border-color: var(--gold); background: var(--gold-soft); }
.rd-bk.on, .rd-num.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.rd-back { border: 0; background: none; color: var(--accent); font: 600 .9rem var(--sans); cursor: pointer; padding: .4rem 0; }
.rd-whole { margin: .6rem 0 .2rem; }
.rd-msg { padding: .7rem 1rem; border-left: 3px solid var(--accent); background: var(--paper); }
.rd-chapter { scroll-margin-top: 8rem; }
.rd-tools { margin-bottom: .4rem; }
.rd-tools .res-set { margin: 0 0 .4rem; }
.rd-title { margin-top: .2rem; }
.rd-text .vn { scroll-margin-top: 10rem; }
.rd-text .vt.hl { background: var(--gold-soft); box-shadow: 0 0 0 3px var(--gold-soft); border-radius: 3px; }
.rd-nav { display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin: 1.6rem 0 .6rem; }
.rd-plan { font-family: var(--sans); margin: .4rem 0; }
.rd-offline { font-family: var(--sans); margin-top: 1.2rem; }
.linkbtn { border: 0; background: none; padding: 0; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; }
.rd-notes { margin: 1.4rem 0; padding: 1rem 1.1rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); }
.rd-notes-h { margin: 0 0 .6rem; font-family: var(--sans); font-size: .9rem; }
.rd-note { padding: .6rem 0; border-top: 1px solid var(--rule); }
.rd-note:first-of-type { border-top: 0; }
.rd-note-ref { margin: 0 0 .3rem; font-family: var(--sans); font-size: .88rem; font-weight: 600; }
.rd-note details summary { font-family: var(--sans); font-size: .85rem; cursor: pointer; color: var(--accent); }

/* ---------- search ---------- */
.rd-status { font-family: var(--sans); font-size: .9rem; color: var(--ink-soft); margin: 1rem 0 .4rem; }
.rd-suggest { font-family: var(--sans); font-size: .9rem; margin: .4rem 0; }
.rd-results { list-style: none; padding: 0; margin: .4rem 0; }
.rd-results li { border-top: 1px solid var(--rule); }
.rd-results a { display: block; padding: .65rem .2rem; color: var(--ink); text-decoration: none; }
.rd-results a:hover { background: var(--paper); }
.rd-r-ref { font-family: var(--sans); font-weight: 700; color: var(--accent); margin-right: .35rem; white-space: nowrap; }
.rd-results mark { background: var(--gold-soft); color: inherit; padding: 0 .1em; border-radius: 3px; }

/* ---------- home card ---------- */
.rd-home { margin: 1.6rem 0; }
.rd-home h2 { margin-top: 0; }
.rd-home .rd-search { margin-top: .6rem; }

/* ---------- Matthew Henry scoped to the passage (commentary.js passageSlotHTML / Read mode sections) ---------- */
.res[data-res="henry"] .cm-pass > h4:first-child { color: var(--rc); margin-top: .2rem; }
.cm-pass .cm-body { padding: 0; }
.cm-pass h5.cm-h { font-family: var(--display); font-size: 1.08rem; font-weight: 600; color: var(--ink); margin: .9em 0 .3em; text-transform: none; letter-spacing: 0; }
.cm-pass h5.cm-h .cm-ref { display: block; font-family: var(--sans); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--rc, var(--muted)); font-weight: 700; }
.cm-pass .cm-span { font-family: var(--sans); color: var(--ink-soft); background: color-mix(in srgb, var(--rc) 10%, transparent); border-radius: 8px; padding: .3rem .6rem; display: inline-block; margin: .1rem 0 .4rem; }
.cm-pass p { margin: .6em 0; }
.cm-pass .sc { font-variant: small-caps; }
.cm-pass .cm-credit { border-top: 1px solid var(--rule); padding-top: .5rem; margin-top: .9rem; }
.cm-pass details.cm-intro { margin: .4rem 0 .6rem; padding: .45rem .8rem; border: 1px dashed var(--rule); border-radius: 10px; }
.cm-pass details.cm-intro > summary { cursor: pointer; font-family: var(--sans); font-size: .9rem; color: var(--rc); min-height: 32px; display: flex; align-items: center; }
/* Read mode: the chapter is split at Henry's sections; with Henry off the pieces read as one card */
.rd-segs .scripture { margin: 0; }
.rd-segs .rd-seg + .rd-seg { margin-top: .9rem; }
.res-off-henry .rd-segs { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.2rem 1.4rem; }
.res-off-henry .rd-segs .scripture { background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; }
.res-off-henry .rd-segs .rd-seg + .rd-seg { margin-top: .6rem; }
@media (max-width: 430px) { .res-off-henry .rd-segs { padding: 1rem 1.05rem; } }

/* ---------- "Resources" button (beside Ask Grok, in the row along the bottom) and its menu (resources.js) ---------- */
.res-fab { position: fixed; left: 9.6rem; bottom: max(1.1rem, env(safe-area-inset-bottom)); z-index: 40; display: inline-flex; align-items: center; gap: .45rem;
  padding: .7rem 1rem .7rem .85rem; min-height: 44px; border-radius: 999px; border: 1px solid var(--gold); background: var(--paper); color: var(--accent);
  font-family: var(--sans); font-size: .85rem; font-weight: 650; letter-spacing: .02em; box-shadow: var(--shadow-lift); cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: transform .25s var(--ease), box-shadow .25s; }
.res-fab[hidden] { display: none; }
.res-fab { box-sizing: border-box; height: var(--fab); min-height: 0; padding-top: 0; padding-bottom: 0; }
.res-fab.fab-compact { justify-content: center; min-width: var(--fab); padding-left: .7rem; padding-right: .7rem; }
.res-fab.fab-compact .res-fab-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (hover: hover) { .res-fab:hover { transform: translateY(-2px); } }
.res-fab[aria-expanded="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.res-fab:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.res-fab svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.res-fab-n { min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem; box-sizing: border-box; border-radius: 999px; background: var(--accent); color: var(--accent-ink);
  font-size: .7rem; line-height: 1.25rem; text-align: center; }
.res-fab[aria-expanded="true"] .res-fab-n { background: var(--accent-ink); color: var(--accent); }
.res-fab-n[hidden] { display: none; }
.res-scrim { position: fixed; inset: 0; z-index: 64; background: rgba(30, 18, 10, .36); opacity: 0; transition: opacity .2s; touch-action: none; }
.res-scrim.open { opacity: 1; }
.res-scrim[hidden], .res-menu[hidden] { display: none; }
.res-menu { position: fixed; z-index: 65; left: max(1.1rem, env(safe-area-inset-left)); bottom: calc(max(1.1rem, env(safe-area-inset-bottom)) + 3.6rem);
  width: min(25rem, calc(100vw - 2.2rem)); max-height: calc(100vh - 7rem); max-height: calc(100dvh - 7rem); overflow: auto; overscroll-behavior: contain;
  box-sizing: border-box; padding: 1rem 1.1rem 1rem; border-radius: 18px; background: var(--paper); border: 1px solid var(--gold);
  box-shadow: 0 20px 50px rgba(40, 20, 10, .28); font-family: var(--sans); color: var(--ink);
  opacity: 0; transform: translateY(12px) scale(.98); transform-origin: bottom left; transition: opacity .2s, transform .2s var(--ease); }
.res-menu.open { opacity: 1; transform: none; }
.res-menu::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; border-radius: 18px 18px 0 0; background: linear-gradient(90deg, var(--gold), var(--accent)); }
.res-menu-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.res-menu-head h2 { margin: .1rem 0 0; font: 700 1.15rem/1.2 var(--sans); color: var(--ink); letter-spacing: 0; }
.res-menu-x { flex: none; width: 2.75rem; height: 2.75rem; }
.res-menu-x svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.res-menu-help { margin: .3rem 0 .7rem; }
.res-menu .res-menu-list { display: grid; grid-template-columns: 1fr; gap: .45rem; margin: 0; }
.res-menu .res-sw { width: 100%; min-height: 48px; font-size: .95rem; }
.res-menu-note { margin: .8rem 0 0; }
.res-menu-note:empty { display: none; }
.res-menu-go { font-weight: 650; white-space: nowrap; }
.res-menu-foot { display: flex; justify-content: flex-end; margin-top: .8rem; }
.res-menu-foot .btn { margin: 0; min-height: 44px; }
@media (max-width: 640px) {
  .res-fab { bottom: max(.8rem, env(safe-area-inset-bottom)); padding: .6rem .9rem .6rem .75rem; font-size: .8rem; }
  /* phones: a sheet along the bottom, clear of the home indicator */
  .res-menu { left: 0; right: 0; bottom: 0; width: auto; max-height: 88vh; max-height: 88dvh; border-radius: 18px 18px 0 0; border-bottom: 0;
    padding: 1rem max(1rem, env(safe-area-inset-right)) calc(1rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); transform: translateY(24px); }
  .res-menu.open { transform: none; }
  .res-menu .res-sw { min-height: 46px; }
}
@media (prefers-reduced-motion: reduce) { .res-menu, .res-scrim, .res-fab { transition: none; } }
@media print { .res-fab, .res-menu, .res-scrim { display: none !important; } }
/* The page's own switch card is gone (resources.js keeps it hidden as the list for the Resources button).
   In its place: a one-line hint that opens the Resources menu. */
.res-set-src, .res-set-src[hidden] { display: none !important; }
.res-hint { display: flex; align-items: center; gap: .55rem; width: 100%; margin: .4rem 0 1.4rem; padding: .6rem .85rem; box-sizing: border-box;
  border: 1px dashed var(--rule); border-radius: 12px; background: transparent; color: var(--ink-soft); text-align: left;
  font: .88rem/1.35 var(--sans); cursor: pointer; transition: border-color .15s, background .15s; }
.res-hint svg { width: 1.2rem; height: 1.2rem; flex: none; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.res-hint b { color: var(--accent); }
@media (hover: hover) { .res-hint:hover { border-color: var(--gold); background: var(--paper); } }
.res-hint:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.rd-tools .res-hint { margin: 0 0 .6rem; }
/* Read mode: a passage's study resources (from the published day study), after its verses. */
.rd-pres { margin: 1rem 0 .4rem; }
.rd-pres[hidden] { display: none !important; }
.rd-pres-h { font-family: var(--sans); font-size: .85rem; margin: 0 0 .3rem; color: var(--muted); }
.rd-pres-h a { font-weight: 700; }
.rd-pres-h span { margin-left: .35rem; }
.rd-pres .res[data-res] { margin: .7rem 0; }
/* A switch with nothing for this page yet: listed in the menu, marked "Not yet". */
.res-sw.res-na { opacity: .6; cursor: default; border-style: dashed; }
.res-sw.res-na .res-box { background: none; border-style: dashed; }
.res-sw.res-na .res-state { color: var(--muted); }