/* ============================================================
   study.css — the public study pages on cuttingstraight.com
   ------------------------------------------------------------
   Written into site/studies/ by Process/publish.py, which appends
   review.WORD_BUBBLE_CSS so the word bubble matches the review pages.
   Layered on the site's tokens.css, components.css and doc.css.
   Everything a page shows here is described on the site's /about/
   page; change the two together.
   ============================================================ */

/* The original-language faces live in the site's fonts/ folder. The
   unicode-range keeps each one to its own script, so the study text can list
   them first without either one ever supplying a Latin letter. */
@font-face { font-family: "BSP Hebrew"; font-style: normal;
  font-weight: 100 900; font-display: block;
  src: url(../fonts/noto-serif-hebrew.ttf) format("truetype");
  unicode-range: U+0590-05FF, U+FB1D-FB4F; }
@font-face { font-family: "BSP Greek"; font-style: normal;
  font-weight: 100 900; font-display: block;
  src: url(../fonts/noto-serif-greek.ttf) format("truetype");
  unicode-range: U+0370-03FF, U+1F00-1FFF; }
/* Noto Serif Hebrew and Noto Serif (Greek subset). Copyright the Noto Project
   Authors (https://github.com/notofonts). Licensed under the SIL Open Font
   License, Version 1.1 (https://openfontlicense.org). */

.study-body { font-family: "BSP Hebrew", "BSP Greek", var(--font-serif); }

/* ---------------------------------------------------------- top bar extras */

.topbar .tools { display: flex; gap: 10px; align-items: center; }
.versiontoggle {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); background: none;
  border: 1px solid var(--rule-strong); border-radius: 3px;
  padding: 5px 10px; cursor: pointer;
}
.versiontoggle:hover { color: var(--ink); }
.versiontoggle b { color: var(--accent); font-weight: 600; }

/* ---------------------------------------------------------- page frame */

.study .crumbs {
  font-family: var(--font-mono); font-size: 12px; line-height: 1.6;
  color: var(--ink-faint); margin: 0 0 26px;
}
.study .crumbs a { color: var(--accent-2); }
.study .crumbs .sep { margin: 0 6px; }

.study-body h1 { font-size: clamp(30px, 4.6vw, 42px); }
.study-body h1 + p > em:only-child { color: var(--ink-soft); font-size: 19px; }

.study-section { margin: 0 0 8px; }
.study-section.short-answer {
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-left: 3px solid var(--accent);
  border-radius: 3px;
  padding: 4px 26px 8px;
  margin: 22px 0 10px;
  box-shadow: var(--shadow);
}
.study-section.short-answer h2 { border-bottom: 0; margin-top: 1.2em; }

/* ---------------------------------------------------------- dive deeper */

.dig { margin: 18px 0 4px; }
.dig p { margin: 0; }
.dig a {
  display: inline-block;
  font: 600 12px var(--font-mono); letter-spacing: .04em;
  color: var(--accent); border: 1px solid var(--accent); border-radius: 3px;
  padding: 8px 12px; text-decoration: none;
}
.dig a:hover { background: var(--accent); color: var(--paper); }
.dig-list ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.dig-list li {
  background: var(--surface); border: 1px solid var(--rule);
  border-left: 3px solid var(--brass); border-radius: 3px;
  padding: 12px 16px; margin: 0;
}
.dig-list li a { font-weight: 600; }

.page-foot {
  display: flex; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--rule); padding-top: 22px; margin-top: 36px;
}
.page-foot a {
  flex: 1 1 200px; display: block;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 3px;
  padding: 12px 14px; text-decoration: none; color: var(--accent); font-size: 15px;
}
.page-foot a:hover { border-color: var(--accent); }
.page-foot small {
  display: block; font: 10px var(--font-mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 3px;
}
.page-foot .up { text-align: center; }
.page-foot .next { text-align: right; }

/* ---------------------------------------------------------- word tables */

/* doc.css sets tables in mono, as apparatus. A word-study table is mostly
   the words themselves, so its cells take the study face; headings stay mono. */
.study-body table {
  font-family: inherit; font-size: 15px; line-height: 1.5;
  width: auto; max-width: 100%;
}
.study-body td { min-width: 7em; padding-right: 16px; }
.study-body td:last-child { min-width: 14em; }
.study-body td strong { font-size: 1.25em; font-weight: 500; }

/* ---------------------------------------------------------- scripture refs */

.scripture-ref {
  font: inherit; color: inherit; background: none; border: 0;
  border-bottom: 1px dashed var(--rule-strong); padding: 0; cursor: pointer;
  text-align: inherit;
}
.scripture-ref:hover { border-bottom-color: var(--accent); }
.ref-glue { white-space: nowrap; }

.versepop {
  position: fixed; z-index: 90;
  width: min(430px, calc(100vw - 28px)); max-height: 60vh; overflow: auto;
  background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 4px;
  padding: 15px 17px; box-shadow: var(--shadow-lift);
}
.versepop[hidden] { display: none; }
.versepop h4 {
  font: 600 11px var(--font-mono); color: var(--accent);
  margin: 0 0 9px; display: flex; gap: 10px; align-items: baseline;
}
.versepop h4 span { color: var(--ink-faint); font-weight: 400; font-size: 10px; }
.versepop p { font-size: 15px; line-height: 1.55; margin: 0 0 7px; }
.versepop sup { font: 10px var(--font-mono); color: var(--brass); margin-right: 4px; }

/* ---------------------------------------------------------- textual notes */

.textual { position: relative; }
.textual-trigger {
  font: inherit; font-weight: 700; color: inherit; background: none; border: 0;
  border-bottom: 1px dashed var(--rule-strong); padding: 0; cursor: help;
}
.textual-pop {
  position: absolute; z-index: 85; left: 0; top: 100%;
  width: min(520px, calc(100vw - 40px)); max-height: 60vh; overflow: auto;
  background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 4px;
  padding: 14px 17px; box-shadow: var(--shadow-lift); font-size: 15px;
}
.textual-pop[hidden] { display: none; }
.textual-pop p { margin: 0 0 8px; }
.textual-pop p:last-child { margin-bottom: 0; }

/* A difference that could bear on a conclusion: open on the page, in its own
   shaded box before the words section (Bible_Study_Rules.md, Textual Basis). */
.textual-fork {
  background: var(--sunk); border: 1px solid var(--rule);
  border-left: 3px solid var(--brass); border-radius: 0 3px 3px 0;
  padding: 14px 18px; margin: 24px 0 8px; max-width: var(--measure);
}
.textual-fork p { margin: 0 0 8px; }
.textual-fork p:last-child { margin-bottom: 0; }
.textual-fork > p:first-child > strong:first-child {
  display: block; font: 600 11px var(--font-mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--brass-ink); margin-bottom: 6px;
}

/* ---------------------------------------------------------- NKJV notice */

.foot .notice { display: block; margin-bottom: 10px; }
.foot nav { display: inline-flex; gap: 18px; }
.foot a { color: var(--ink-soft); }

/* ---------------------------------------------------------- grades */

/* The grade beside each answer (Jim, 2026-09-28). Wording and colours follow
   the site's How to Read page, which governs. */
.grade {
  display: inline-block; vertical-align: .2em; margin-left: .5em;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; line-height: 1.5;
  padding: 1px 8px; border-radius: 3px; white-space: nowrap; cursor: help;
}
.grade.settled { color: var(--settled); background: var(--settled-bg); }
.grade.probable { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.grade.open { color: var(--open); background: var(--open-bg); }
.study-card .grade { margin: 0 0 0 .6em; vertical-align: 0; }

/* ---------------------------------------------------------- studies list */

.group-list { margin: 0 0 12px; }
.group-list h2 { scroll-margin-top: 80px; }
.study-card {
  display: block; color: inherit;
  background: var(--surface);
  border: 1px solid var(--rule-strong); border-left: 3px solid var(--accent);
  border-radius: 3px; padding: 16px 20px; margin: 0 0 12px;
  box-shadow: var(--shadow);
}
.study-card:hover { text-decoration: none; box-shadow: var(--shadow-lift); }
.study-card .label { display: block; margin-bottom: 6px; }
.study-card h3 { margin: 0 0 6px; font-size: 22px; line-height: 1.25; }
.study-card p { margin: 0; color: var(--ink-soft); font-size: 16px; }
.none-yet {
  font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-faint);
  border: 1px dashed var(--rule-strong); border-radius: 3px; padding: 12px 14px;
}

@media (max-width: 640px) {
  .topbar .tools { margin-left: auto; }
  .study-section.short-answer { padding: 2px 16px 6px; }
  /* A centred word bubble runs off a phone screen when the word sits near
     either edge, so it opens above its paragraph, inside the column. */
  .study-body p { position: relative; }
  .study-body p .tl { position: static; }
  .study-body p .tl .bub { left: 0; right: auto; transform: none;
    min-width: 0; max-width: 100%; width: max-content; }
}

/* ---- word bubble: review.WORD_BUBBLE_CSS, which governs ---- */
/* The reading text carries the transliteration; the Hebrew is in the bubble. */
.tl { position: relative; cursor: help; color: var(--brass);
      font-style: italic; border-bottom: 1px dotted var(--brass); }
.tl > em, .tl em.tlit { color: inherit; border: 0; }
.heb.gl { position: relative; cursor: help;
          border-bottom: 1px dotted var(--rule-strong); }
.tl .bub, .heb.gl .bub { display: none; position: absolute; z-index: 60; bottom: 100%;
       right: 50%; transform: translateX(50%); margin-bottom: 8px;
       direction: ltr; unicode-bidi: isolate; text-align: center;
       min-width: 250px; max-width: 380px; padding: 13px 16px 12px;
       background: var(--surface); border: 1px solid var(--rule-strong);
       border-radius: 8px; box-shadow: var(--shadow-lift); }
.heb.gl:hover .bub, .heb.gl:focus .bub,
.tl:hover .bub, .tl:focus .bub { display: block; }
/* The bubble head is where the script is actually read -- it is the biggest
   the word appears anywhere -- so it carries the same face as the printed
   word rather than inheriting the body serif. Without this the embedded
   Hebrew face applied to the tables and not to the tooltip, which is the
   place the pointing most needs it. */
.tl .bh, .heb.gl .bh { display: block; direction: rtl; font-size: 2.1em;
              line-height: 1.6; color: var(--ink);
              font-family: "BSP Hebrew", "SBL Hebrew", "Ezra SIL",
                    "Taamey Frank CLM", "Noto Serif Hebrew", "David CLM",
                    var(--font-serif); }
/* Greek in the same slot: left to right, its own stack, and a shade smaller
   because the polytonic accents sit inside the line rather than under it. */
.tl .bh.grk { direction: ltr; font-size: 1.85em;
              font-family: "BSP Greek", "SBL Greek", "New Athena Unicode",
                    "Gentium Plus", "Noto Serif", "GFS Didot",
                    var(--font-serif); }
/* Which language the reader is looking at, small and out of the way at the
   top left (Jim, 2026-09-07). Two originals on one page means the script is
   no longer self-evident to a reader who does not read either one. */
.tl .bl, .heb.gl .bl { display: block; direction: ltr;
              font-family: var(--font-mono); font-size: 9.5px;
              letter-spacing: .09em; text-transform: uppercase;
              color: var(--ink-faint); margin-bottom: 3px; }
.tl .bt, .heb.gl .bt { display: block; font-family: var(--font-serif); font-style: italic;
              font-size: 15px; color: var(--brass); margin-top: 2px; }
.tl .be, .heb.gl .be { display: block; font-family: var(--font-serif);
              font-size: 14px; line-height: 1.45; color: var(--ink-soft);
              margin-top: 5px; }
.tl .bp, .heb.gl .bp { display: block; font-family: var(--font-mono); font-size: 10.5px;
              line-height: 1.5; color: var(--ink-faint); margin-top: 7px;
              padding-top: 7px; border-top: 1px solid var(--rule); }