/* 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 430px, always with the full name */
@media (max-width: 600px) {
  .res-set .res-row { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
  .res-sw { font-size: .9rem; padding: .35rem .6rem .35rem .55rem; }
}
@media (max-width: 430px) { .res-set .res-row { grid-template-columns: 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: Read link, search button; keep seven links on one row on phones ---------- */
@media (max-width: 640px) {
  .mainnav { gap: 0; font-size: .78rem; justify-content: space-between; overflow-x: auto; scrollbar-width: none; min-width: 0; }
  .mainnav::-webkit-scrollbar { display: none; }
  .mainnav a { padding: .4rem .3rem; white-space: nowrap; }
  .tools { gap: .2rem; }
}
@media (max-width: 420px) { .tools .iconbtn { min-width: 2.15rem; height: 2.15rem; font-size: .95rem; } .tools { gap: .2rem; } .brand-name { font-size: 1rem; } .brand { gap: .45rem; } }
@media (max-width: 380px) { .mainnav { font-size: .72rem; } .mainnav a { padding: .4rem .2rem; } .tools .iconbtn { min-width: 2.05rem; height: 2.05rem; font-size: .95rem; } .tools { gap: .15rem; } } @media (max-width: 360px) { .brand-text { display: none; } }
@media (max-width: 340px) { .mainnav { font-size: .68rem; } .mainnav a { padding: .4rem .12rem; } }

/* ---------- 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; } }