/* ─────────────────────────────────────────────────────────────
   The reading view.
   One verse per line. The column is capped so that opening the
   right pane later never reflows text the reader is part-way through.
   ───────────────────────────────────────────────────────────── */

/* ── lens rack ──────────────────────────────────────────────
   Inside the content column, not across the app. It sticks to
   the top of the reading area so it is there when you scroll.
   ───────────────────────────────────────────────────────── */

.page { display: flex; flex-direction: column; }

.lensrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1.6rem 0.6rem 3.4rem;
  border-bottom: 1px solid var(--hair);
  background: var(--page);
  overflow-x: auto;
  position: sticky;
  top: 0;
  z-index: 10;
  flex: 0 0 auto;
}

.lensrow__label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

.lenses {
  display: inline-flex;
  flex: 0 0 auto;
  border: 1px solid var(--hair);
  border-radius: 9px;
  overflow: hidden;
  background: var(--page-2);
}

/* The row scrolls sideways when the column is narrow; a thin bar, not none,
   so the overflow stays discoverable. */
.lensrow { scrollbar-width: thin; }
.lensrow::-webkit-scrollbar { height: 5px; }
.lensrow::-webkit-scrollbar-thumb { background: var(--hair); border-radius: 100px; }

.lens {
  border: 0;
  border-right: 1px solid var(--hair);
  background: transparent;
  color: var(--ink-2);
  font-family: inherit;
  font-size: 0.95rem;
  padding: 0.45rem 0.9rem;
  white-space: nowrap;
  cursor: pointer;
}

.lens:last-child { border-right: 0; }
.lens:hover:not(:disabled) { background: var(--page-2); color: var(--ink); }
.lens.is-on { background: var(--g); color: var(--g-fg); font-weight: 700; }
.lens:disabled { color: var(--ink-3); cursor: default; }

/* ── rail ─────────────────────────────────────────────────── */

.rail__book.is-on {
  background: var(--g);
  color: var(--g-fg);
  font-weight: 700;
}

.rail__book.is-on:hover { background: var(--g); color: var(--g-fg); }

.rail__chapters {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 0.4rem 0.9rem 0.6rem;
  background: var(--chrome-2);
}

.rail__chapter {
  min-width: 1.7rem;
  text-align: center;
  padding: 0.16rem 0.25rem;
  border-radius: 5px;
  font-size: 0.8rem;
  color: var(--on-2);
  font-variant-numeric: tabular-nums;
}

.rail__chapter:hover { background: var(--page); color: var(--on); }
.rail__chapter.is-on { background: var(--on); color: var(--chrome); font-weight: 700; }

/* ── the chapter ──────────────────────────────────────────── */

/* No bottom padding: the sticky end bar is the reading column's last
   element, and padding under it would hold it 5rem off the bottom edge at
   the end of the scroll. The bar's own margin provides the breathing room. */
.reading { padding: 2.4rem 1.6rem 0 3.4rem; flex: 1 1 auto; }

.reading__loading,
.reading__error {
  max-width: var(--measure-read);
  margin-left: auto;
  margin-right: auto;
  font-size: 0.95rem;
  color: var(--ink-3);
  line-height: 1.6;
}

.reading__error { color: var(--ink-2); }
.reading__error b { color: var(--ink); }
.reading__error a { border-bottom: 1px solid var(--hair); }

/* The head spans the full reading column so the share button sits at the
   right edge, not at the measure's — the title block keeps the measure. */
.chapter__head { margin-bottom: 1.6rem; }
/* Owner's call: the title stays at the left edge of the column, not
   centred with the measure — the share button still rides the far right. */
.chapter__head > div { max-width: var(--measure-read); flex: 1; }

.chapter__book {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 0.15rem;
}

.chapter__meta {
  font-size: 0.86rem;
  color: var(--ink-3);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.chapter { max-width: var(--measure-read);
  margin-left: auto;
  margin-right: auto; }

.verse {
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr);
  gap: 0.4rem;
  align-items: baseline;
  margin: 0 0 0.55rem;
}

.verse__n {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-3);
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding-top: 0.18rem;
}

.verse__t {
  font-size: 1.06rem;
  line-height: 1.62;
  color: var(--ink);
}

/* Sticky, so a reader can move chapter without scrolling to the end.
   It sits inside the reading column and spans it, so the text runs
   underneath rather than beside it. */
.chapter__end {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.6rem;
  padding: 0.7rem 1.6rem 0.7rem 3.4rem;
  margin-left: -3.4rem;
  margin-right: -1.6rem;
  border-top: 1px solid var(--hair);
  background: var(--page);
  font-size: 0.88rem;
  color: var(--ink-3);
}

.chapter__end a { color: var(--ink-2); }
.chapter__end a:hover { color: var(--ink); }
.chapter__where { font-variant-numeric: tabular-nums; }
.chapter__end a.chapter__next { font-weight: 700; color: var(--g); }
.chapter__end a.chapter__next:hover { color: var(--g); }

.reading__hint {
  max-width: var(--measure-read);
  margin-left: auto;
  margin-right: auto;
  margin-top: 1.8rem;
  font-size: 0.86rem;
  color: var(--ink-3);
  line-height: 1.55;
}

/* ── narrow ───────────────────────────────────────────────── */


@media (max-width: 64rem) {
  .reading { padding: 2rem 1.4rem 4rem 2rem; }
  .lensrow { padding: 0.55rem 1.4rem 0.55rem 2rem; }
  .chapter__end { padding-left: 2rem; padding-right: 1.4rem; margin-left: -2rem; margin-right: -1.4rem; }
}

@media (max-width: 44rem) {
  .reading { padding: 1.4rem 1.1rem 3.5rem; }
  .chapter__book { font-size: 1.65rem; }
  .lensrow { padding: 0.5rem 1.1rem; }


  .chapter__end {
    padding-left: 1.1rem; padding-right: 1.1rem;
    margin-left: -1.1rem; margin-right: -1.1rem;
    gap: 0.6rem;
  }
}


/* ── the rail, as in the designs ──────────────────────────── */

.rail__chapters { display: block; padding: 0.15rem 0.5rem 0.5rem; background: transparent; }

.rail__chapter {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  gap: 0.5rem;
  align-items: baseline;
  min-width: 0;
  text-align: left;
  padding: 0.34rem 0.6rem;
  border-radius: 8px;
  font-size: 0.95rem;
  color: var(--on-2);
}

.rail__num {
  font-size: 0.8rem;
  color: var(--on-3);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.rail__title { color: var(--on-2); }

.rail__chapter:hover { background: var(--chrome-2); color: var(--on); }

.rail__chapter.is-on {
  background: var(--g);
  color: var(--g-fg);
  font-weight: 700;
}

.rail__chapter.is-on .rail__num,
.rail__chapter.is-on .rail__title { color: var(--g-fg); }

/* Books sit above their chapters and read as headings. */
.rail__book { font-size: 1rem; padding-top: 0.32rem; padding-bottom: 0.32rem; }
.rail__book.is-on { background: transparent; color: var(--on); font-weight: 700; }
.rail__book.is-on:hover { background: transparent; color: var(--on); }

/* ── the right pane ───────────────────────────────────────── */

.pane {
  border-left: 1px solid var(--hair);
  background: var(--page-2);
  overflow-y: auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

/* The empty state is centred in the pane. Real content is not: a centred
   flex child taller than its container overflows in both directions, which
   puts the top of a long panel out of reach above the scroll. */
.pane.is-open {
  display: block;
  padding: 0;
}

.pane.is-open .pane__close {
  position: sticky;
  float: right;
  top: 0.8rem;
  margin: 0.8rem 0.9rem -2.7rem 0;
  z-index: 2;
}

.pane__empty { text-align: center; max-width: 20rem; }
.pane__note { font-size: 0.85rem; color: var(--ink-3); margin: 0.9rem 0 0; }
.pane__art--results { max-width: 12rem; }

.pane__art { width: 100%; max-width: 16rem; height: auto; margin: 0 auto 1.4rem; display: block; }

.pane__title {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 0.9rem;
}

.pane__list { list-style: none; margin: 0; padding: 0; }

.pane__list li {
  font-size: 0.98rem;
  color: var(--ink-2);
  line-height: 1.9;
}

.pane__list b { font-weight: 700; }
.pane__list .is-word { color: var(--g); }
.pane__list .is-name { color: var(--m); }
.pane__list .is-place { color: var(--o); }

.pane__try { margin: 1.3rem 0 0; }

.pane__try span {
  display: inline-block;
  border: 1px solid var(--hair);
  border-radius: 100px;
  padding: 0.42rem 0.95rem;
  font-size: 0.95rem;
  color: var(--ink-2);
  background: var(--page);
}

.pane__try b { color: var(--g); font-weight: 700; }

@media (max-width: 76rem) {
  .pane { display: none; }
  /* The grid has no room for a pane column here — but a tap must still
     answer. An opened panel floats over the page instead of nowhere. */
  .cols--overlaid .pane {
    display: block;
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(26rem, 94vw);
    z-index: 60;
    background: var(--page-2);
    border-left: 1px solid var(--hair);
    box-shadow: -18px 0 44px rgba(0, 0, 0, 0.16);
  }
}

/* ── the pane is resizable and closable ──────────────────────
   Width lives in --pane-w so the grid and the handle agree.
   ────────────────────────────────────────────────────────── */

.pane { position: relative; }

.pane__close {
  position: absolute;
  top: 0.8rem;
  right: 0.9rem;
  border: 1px solid var(--hair);
  background: var(--page);
  color: var(--ink-3);
  border-radius: 100px;
  width: 1.9rem;
  height: 1.9rem;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
}

.pane__close:hover { color: var(--ink); border-color: var(--ink-3); }

.pane__resize {
  width: 9px;
  margin-right: -9px;
  cursor: col-resize;
  background: transparent;
  position: relative;
  z-index: 6;
  touch-action: none;
}

/* The grip, owner-picked (option C): a small raised tab carrying chevrons,
   so the divider says which directions it moves before anyone hovers it. */
.pane__resize::before {
  content: "\25C2 \25B8";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.52rem;
  letter-spacing: -1px;
  line-height: 0.6;
  color: var(--ink-2);
  background: var(--page);
  border: 1px solid var(--hair);
  border-radius: 100px;
  padding: 0.62rem 0.18rem;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  pointer-events: none;
}

.pane__resize:hover::before,
.pane__resize:focus-visible::before,
.pane__resize.is-dragging::before {
  color: var(--g);
  border-color: var(--g-line);
}

.pane__resize::after {
  content: "";
  position: absolute;
  inset: 0 4px;
  background: transparent;
}

.pane__resize:hover::after,
.pane__resize:focus-visible::after,
.pane__resize.is-dragging::after { background: var(--g-line); }

.is-resizing, .is-resizing * { user-select: none; cursor: col-resize !important; }

/* ── the translation card ─────────────────────────────────── */

.verwrap { position: relative; display: inline-flex; }

.pill--version[aria-expanded="true"] { border-color: var(--on); color: var(--on); font-weight: 700; }

.vercard {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  z-index: 40;
  width: 21rem;
  background: var(--page);
  border: 1px solid var(--hair);
  border-radius: 13px;
  box-shadow: 0 14px 34px rgba(17, 21, 13, 0.14), 0 2px 6px rgba(17, 21, 13, 0.06);
  overflow: hidden;
  text-align: left;
}

.vercard[hidden] { display: none; }

.vermode { display: flex; gap: 0.4rem; padding: 0.6rem; }

.vermode__b {
  flex: 1;
  font-family: inherit;
  font-size: 0.92rem;
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--hair);
  border-radius: 9px;
  background: var(--page);
  color: var(--ink-2);
  cursor: pointer;
}

.vermode__b.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--page);
  font-weight: 700;
}

.verrow {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 0.15rem 0.5rem;
  align-items: baseline;
  width: 100%;
  text-align: left;
  padding: 0.6rem 0.9rem;
  border: 0;
  border-top: 1px solid var(--hair);
  background: var(--page);
  font-family: inherit;
  cursor: pointer;
}

.verrow:hover { background: var(--page-2); }
.verrow.is-on { background: var(--g-soft); }
.verrow__t { font-size: 1rem; font-weight: 700; color: var(--ink); }
.verrow__y { font-size: 0.85rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.verrow__tick { color: var(--g); font-weight: 700; justify-self: end; }
.verrow__d { grid-column: 1 / -1; font-size: 0.88rem; color: var(--ink-2); line-height: 1.45; }

.pane__reopen {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 8;
  display: none;
  border: 1px solid var(--hair);
  background: var(--page);
  color: var(--ink-2);
  border-radius: 100px;
  padding: 0.42rem 0.9rem;
  font-family: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(17, 21, 13, 0.08);
}

.pane__reopen:hover { color: var(--ink); border-color: var(--ink-3); }
.cols--no-pane .pane__reopen { display: block; }

@media (max-width: 76rem) { .pane__reopen { display: none !important; } }

.verrow.is-soon { cursor: default; }
.verrow.is-soon .verrow__t, .verrow.is-soon .verrow__d { color: var(--ink-3); }
.verrow.is-soon:hover { background: var(--page); }
.verrow__soon {
  justify-self: end;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-3);
  border: 1px solid var(--hair);
  border-radius: 100px;
  padding: 0.02rem 0.4rem;
  white-space: nowrap;
}

/* A licensed translation. The grey badge is deliberate: colour on this
   site means a layer of scripture, and a licence is not one. */
.verrow__lic {
  justify-self: end;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-3);
  background: var(--page-2);
  border: 1px solid var(--hair);
  border-radius: 100px;
  padding: 0.02rem 0.45rem;
  white-space: nowrap;
}

/* Why a row is unavailable, under its description rather than beside it —
   these run long, and truncating the reason would defeat the point. */
.verrow__why {
  display: block;
  margin-top: 0.25rem;
  font-style: normal;
  font-size: 0.8rem;
  color: var(--ink-3);
}

.verrow.is-licensed .verrow__t { letter-spacing: 0.01em; }

.verse--omitted .verse__t {
  color: var(--ink-3);
  font-style: italic;
  font-size: 0.95rem;
}

.verfoot {
  display: block;
  padding: 0.6rem 0.9rem;
  border-top: 1px solid var(--hair);
  background: var(--page-2);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink-2);
}

.verfoot:hover { color: var(--ink); }

.chapter__licence {
  max-width: var(--measure-read);
  margin-left: auto;
  margin-right: auto;
  margin: 1.2rem 0 0;
  font-size: 0.82rem;
  color: var(--ink-3);
  line-height: 1.5;
}

/* What a licensed translation cannot do. It sits under the chapter, in the
   same quiet grey as the copyright line, because it is the same kind of
   fact: a condition of use, not part of the reading. */
.chapter__limited {
  max-width: var(--measure-read);
  margin-left: auto;
  margin-right: auto;
  margin: 0.9rem 0 0;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: var(--page-2);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ink-2);
}

.chapter__limited b { color: var(--ink); }

/* ── tappable words ───────────────────────────────────────────
   A word that carries a Strong's number is set in the reading
   colour; one the translators supplied is set lighter. The
   difference has to be visible without being noisy, because most
   of a verse is untagged and a page of underlines is unreadable. */

/* Untagged words carry no element on a pre-rendered page, so the lighter
   colour comes from the verse itself and the tagged words override it. The
   app renders .w--plain spans for the same effect; both must look alike. */
.verse__t { color: var(--ink-2); }
.w--plain { color: var(--ink-2); }

b.w {
  font-weight: inherit;
  color: var(--ink);
  cursor: pointer;
  border-radius: 3px;
  padding: 0 0.04em;
  margin: 0 -0.04em;
  transition: background 90ms ease, color 90ms ease;
}

b.w:hover { background: var(--g-soft); color: var(--g-deep, var(--g)); }

b.w:focus-visible {
  outline: 2px solid var(--g);
  outline-offset: 1px;
  background: var(--g-soft);
}

@media (prefers-reduced-motion: reduce) {
  b.w { transition: none; }
}

/* ── the word panel ──────────────────────────────────────────── */

.wp {
  padding: 1.4rem 1.3rem 2.5rem;
  display: grid;
  gap: 0;
}

.wp__label {
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--g);
}

.wp__lemma {
  margin: 0;
  font-size: 2rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.wp__pron {
  margin: 0.25rem 0 0;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-3);
}

.wp__native {
  margin: 0.4rem 0 0;
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--ink-2);
}

.wp__here {
  margin: 0.9rem 0 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.wp__here b { color: var(--ink); }

.wp__sec {
  margin-top: 1.5rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--hair);
}

.wp__h {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
  border-left: 3px solid var(--g);
  padding-left: 0.5rem;
}

.wp__lit {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.35;
  font-weight: 700;
  color: var(--ink);
}

.wp__full {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-2);
}

.wp__row {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 0.6rem;
  padding: 0.3rem 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

.wp__k { color: var(--ink-3); }
.wp__v { color: var(--ink-2); }

/* Bars are proportional to the top gloss, and the reading's own gloss is
   marked so the reader can see where this verse sits among the rest. */
.wp__bars { display: grid; gap: 0.35rem; }

.wp__bar {
  display: grid;
  grid-template-columns: 6rem 1fr auto;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--ink-2);
}

.wp__bar.is-here .wp__bw { color: var(--ink); font-weight: 700; }
.wp__bt { height: 6px; background: var(--page-2); border-radius: 100px; }
.wp__bt i { display: block; height: 100%; background: var(--g); border-radius: 100px; }
.wp__bar.is-here .wp__bt i { background: var(--g-deep, var(--g)); }
.wp__bn { font-variant-numeric: tabular-nums; color: var(--ink-3); }

.wp__more {
  margin-top: 1rem;
  border-top: 1px solid var(--hair);
  padding-top: 0.9rem;
}

.wp__more summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
  list-style: none;
}

.wp__more summary::-webkit-details-marker { display: none; }

.wp__more summary::before {
  content: "+";
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  flex: none;
  border: 1px solid var(--hair);
  border-radius: 6px;
  font-weight: 700;
  color: var(--ink-3);
}

.wp__more[open] summary::before { content: "\2212"; }
.wp__more summary span { flex: 1; }
.wp__more summary b { font-variant-numeric: tabular-nums; color: var(--ink-3); font-weight: 700; }

.wp__refs, .wp__src { margin-top: 0.8rem; font-size: 0.88rem; }

.wp__grp {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: baseline;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--hair);
}

.wp__grp b {
  flex: 0 0 100%;
  font-size: 0.8rem;
  color: var(--ink-3);
  font-weight: 700;
}

.wp__grp a {
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  background: var(--page-2);
  border-radius: 5px;
  padding: 0.08rem 0.35rem;
}

.wp__grp a:hover { color: var(--g); background: var(--g-soft); }

.wp__src p { margin: 0 0 0.6rem; color: var(--ink-3); line-height: 1.6; }
.wp__src b { color: var(--ink-2); }

/* ── Share this page ──────────────────────────────────────────
   Bronze, owner-picked (D3): prominent, and deliberately outside
   the scripture colours. Lives beside the chapter heading and is
   echoed in the end-of-chapter bar. */

.chapter__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  /* Full column width: the title block keeps the measure and centres with
     the verses; the button rides the far right edge. This rule lost to a
     duplicate once — if you are here to cap it again, don't. */
  max-width: none;
}

.sharebtn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: none;
  border: none;
  border-radius: 100px;
  background: var(--share);
  color: var(--share-fg);
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.55rem 1.05rem;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
  transition: opacity 90ms ease;
}

.sharebtn:hover { opacity: 0.88; }
.sharebtn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sharebtn svg { width: 13px; height: 13px; }

/* The moment of feedback: same button, stating what just happened. */
.sharebtn.is-copied { background: var(--ink); color: var(--page); }

.chapter__end .sharebtn { font-size: 0.82rem; padding: 0.45rem 0.9rem; }

@media (prefers-reduced-motion: reduce) { .sharebtn { transition: none; } }

.chapter__mid { display: inline-flex; align-items: center; gap: 0.9rem; }

/* This chapter in the other translations — quiet chips under the end bar. */
.chapter__vers {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
  max-width: var(--measure-read);
  margin-left: auto;
  margin-right: auto;
  margin: 1.1rem 0 2.2rem;
  font-size: 0.82rem;
}

.chapter__vers span { color: var(--ink-3); margin-right: 0.35rem; }

.chapter__vers a {
  font-weight: 700;
  color: var(--ink-2);
  background: var(--page-2);
  border-radius: 6px;
  padding: 0.14rem 0.5rem;
  text-decoration: none;
}

.chapter__vers a:hover { color: var(--ink); background: var(--hair); }

/* ── the prose layer ──────────────────────────────────────────
   Claude's writing, woven in after the facts render. Green is
   right here: this content is the language layer itself. */

.wp__note {
  margin: 0.5rem 0 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-2);
}

.wp__spot {
  margin-top: 1.5rem;
  background: var(--g);
  color: var(--g-fg);
  border-radius: 12px;
  padding: 1rem 1.1rem;
}

.wp__spot b {
  display: block;
  font-size: 1.05rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.wp__spot p {
  margin: 0.45rem 0 0;
  font-size: 0.9rem;
  line-height: 1.55;
  opacity: 0.92;
}

.wp__v--strong { color: var(--ink); font-weight: 700; }

[data-prose="plain"] p {
  margin: 0 0 0.7rem;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink-2);
}

.wp__by {
  margin: 0.4rem 0 0;
  font-size: 0.76rem;
  color: var(--ink-3);
  line-height: 1.5;
}

/* First visitor to a word: the writing is being written. A soft pulse, and
   only text — removed the moment the prose lands or fails. */
.wp__wait {
  margin: 1.2rem 0 0;
  font-size: 0.85rem;
  color: var(--ink-3);
  animation: wp-wait 1.6s ease-in-out infinite;
}

@keyframes wp-wait { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) { .wp__wait { animation: none; } }

/* ── tappable names ───────────────────────────────────────────
   Violet is the person colour, as the master design assigns it.
   Same weight discipline as words: visible, not noisy. */

b.pn {
  font-weight: inherit;
  color: var(--ink);
  cursor: pointer;
  border-radius: 3px;
  padding: 0 0.04em;
  margin: 0 -0.04em;
  box-shadow: inset 0 -1.5px 0 var(--m-line);
  transition: background 90ms ease, color 90ms ease;
}

b.pn:hover { background: var(--m-soft); color: var(--m); }
b.pn:focus-visible { outline: 2px solid var(--m); outline-offset: 1px; background: var(--m-soft); }

@media (prefers-reduced-motion: reduce) { b.pn { transition: none; } }

/* the person panel wears violet where the word panel wears green */
.pp__label { color: var(--m); }
.pp__h { border-left-color: var(--m); }
.pp__spot { background: var(--m); color: var(--m-fg); }

.pp__chain {
  margin: 0;
  font-size: 0.95rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.5rem;
}
.pp__chain i { font-style: normal; color: var(--ink-3); }

.pp__kin {
  border: none;
  background: var(--m-soft);
  color: var(--m);
  font: inherit;
  font-weight: 700;
  border-radius: 6px;
  padding: 0.05rem 0.4rem;
  cursor: pointer;
}

.pp__kin:hover { background: var(--m); color: var(--m-fg); }

.pp__stop { margin: 0 0 0.8rem; }
.pp__stop b { font-size: 0.8rem; color: var(--ink-3); display: block; }
.pp__stop p { margin: 0.15rem 0 0; font-size: 0.92rem; line-height: 1.55; color: var(--ink-2); }

.pp__also { display: block; margin-top: 0.3rem; font-size: 0.85rem; color: var(--ink-3); }

/* Every occurrence WITH its verse — a reference alone is a pointer, not
   the verse, and the design lists the words themselves. */
.wp__grp--verses { display: block; }

.pv {
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  gap: 0.5rem;
  padding: 0.35rem 0;
  color: var(--ink-2);
  background: none;
  border-radius: 6px;
  font-size: 0.86rem;
  line-height: 1.5;
}

.pv b { color: var(--ink-3); font-variant-numeric: tabular-nums; font-weight: 700; }
.pv:hover { color: var(--ink); background: var(--page-2); }

/* ── tappable places — amber, as the design assigns them ────── */

b.pl {
  font-weight: inherit;
  color: var(--ink);
  cursor: pointer;
  border-radius: 3px;
  padding: 0 0.04em;
  margin: 0 -0.04em;
  box-shadow: inset 0 -1.5px 0 var(--o-line);
  transition: background 90ms ease, color 90ms ease;
}

b.pl:hover { background: var(--o-soft); color: var(--o); }
b.pl:focus-visible { outline: 2px solid var(--o); outline-offset: 1px; background: var(--o-soft); }
@media (prefers-reduced-motion: reduce) { b.pl { transition: none; } }

.gp__label { color: var(--o); }
.gp__h { border-left-color: var(--o); }
.gp__spot { background: var(--o); color: var(--o-fg); }

.gp__names span {
  display: inline-block;
  background: var(--o-soft);
  color: var(--o);
  font-weight: 700;
  border-radius: 6px;
  padding: 0.05rem 0.45rem;
  margin: 0 0.25rem 0.3rem 0;
}

.gp__map { color: var(--o); font-weight: 700; }

/* Follow the name down — the attested forms, oldest first, on a line. */
.gp__tl { display: grid; gap: 0.15rem; }

.gp__tlrow {
  display: grid;
  grid-template-columns: 1rem 1fr;
  gap: 0.6rem;
}

.gp__tlrow i {
  width: 11px;
  height: 11px;
  margin-top: 0.3rem;
  border: 2px solid var(--o);
  border-radius: 100px;
  background: var(--page);
  justify-self: center;
  position: relative;
}

.gp__tlrow:not(:last-child) i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 11px;
  transform: translateX(-50%);
  width: 2px;
  height: 1.7rem;
  background: var(--o-line);
}

.gp__tlrow b { font-size: 1rem; }
.gp__tlrow span { display: block; font-size: 0.8rem; color: var(--ink-3); padding-bottom: 0.7rem; }
.gp__tlnote { margin: 0.7rem 0 0; font-size: 0.78rem; color: var(--ink-3); line-height: 1.5; }

/* ── the panel's last act: keep it, send it ───────────────────
   Owner-picked C: the study leads in the entity's own colour —
   the study keeps what the thing IS — and share follows in solid
   bronze, the site's one sharing colour. */

.pfoot2 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--hair);
}

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 13.5rem;
  max-width: 100%;
  border: none;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: inherit;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: opacity 90ms ease;
}

.cta:hover { opacity: 0.88; }
.cta svg { width: 15px; height: 15px; }
.cta--study-w { background: var(--g); color: var(--g-fg); }
.cta--study-p { background: var(--m); color: var(--m-fg); }
.cta--study-g { background: var(--o); color: var(--o-fg); }
.cta--sharef { background: var(--share); color: var(--share-fg); }
.cta--sharef.is-copied { background: var(--ink); color: var(--page); }
@media (prefers-reduced-motion: reduce) { .cta { transition: none; } }

/* the saved toast */
.stoast {
  position: fixed;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: var(--ink);
  color: var(--page);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
  max-width: min(92vw, 30rem);
}

.stoast button {
  border: none;
  background: none;
  color: var(--g-line);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* ── search: the locked design ─────────────────────────────── */

/* The active input is the trigger, verbatim — same border, radius, padding
   and size — so opening the search moves nothing. Focus shows only in the
   border colour. */
.sr-input {
  width: min(42rem, 100%);
  font-family: inherit;
  font-size: 1.08rem;
  color: var(--ink);
  background: var(--page);
  border: 1.5px solid var(--chrome-3);
  border-radius: 9px;
  padding: 0.7rem 0.8rem 0.7rem 1rem;
  outline: none;
}

.sr-input:focus { border-color: var(--g); }

.sr-drop {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  background: var(--page);
  border: 1px solid var(--hair);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16);
  z-index: 40;
  overflow: hidden;
}

.sr-drop:empty { display: none; }
.searchwrap { position: relative; }

.sr-grp { padding: 0.45rem 0.6rem 0.2rem; }

.sr-grp h4 {
  margin: 0 0 0.1rem;
  padding: 0 0.5rem;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.sr-hit {
  display: grid;
  grid-template-columns: 4px 1fr auto auto;
  gap: 0.7rem;
  align-items: center;
  padding: 0.5rem;
  border-radius: 9px;
  text-decoration: none;
  color: inherit;
}

.sr-hit:hover, .sr-hit.is-focus { background: var(--page-2); }
.sr-hit i { height: 100%; min-height: 1.6rem; border-radius: 4px; }
.sr-hit--w i { background: var(--g); }
.sr-hit--p i { background: var(--m); }
.sr-hit--g i { background: var(--o); }
.sr-hit--v i { background: var(--ink-3); }
.sr-hit b { font-size: 0.93rem; }
.sr-hit small { display: block; font-size: 0.8rem; color: var(--ink-2); }

.sr-kind {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sr-foot {
  border-top: 1px solid var(--hair);
  padding: 0.55rem 1rem;
  font-size: 0.78rem;
  color: var(--ink-3);
  display: flex;
  justify-content: space-between;
}

/* D1, locked: the dashed add pill, entity colour arrives on hover */
.sr-add {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1.5px dashed var(--ink-3);
  background: var(--page);
  color: var(--ink-2);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  border-radius: 100px;
  padding: 0.28rem 0.65rem;
  cursor: pointer;
  white-space: nowrap;
}

.sr-hit--w .sr-add:hover { border-color: var(--g); border-style: solid; color: var(--g); background: var(--g-soft); }
.sr-hit--p .sr-add:hover { border-color: var(--m); border-style: solid; color: var(--m); background: var(--m-soft); }
.sr-hit--g .sr-add:hover { border-color: var(--o); border-style: solid; color: var(--o); background: var(--o-soft); }
.sr-hit--v .sr-add:hover, .sr-row--v .sr-add:hover { border-color: var(--ink); border-style: solid; color: var(--ink); }
.sr-row--w .sr-add:hover { border-color: var(--g); border-style: solid; color: var(--g); background: var(--g-soft); }
.sr-row--p .sr-add:hover { border-color: var(--m); border-style: solid; color: var(--m); background: var(--m-soft); }
.sr-row--g .sr-add:hover { border-color: var(--o); border-style: solid; color: var(--o); background: var(--o-soft); }

.sr-added {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1.5px solid var(--g);
  color: var(--g);
  background: var(--page);
  font-size: 0.74rem;
  font-weight: 700;
  border-radius: 100px;
  padding: 0.28rem 0.65rem;
  white-space: nowrap;
}

/* the results page */
.sr-page { max-width: var(--measure-read); }
.sr-eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin: 0; }

.sr-row {
  display: grid;
  grid-template-columns: 4px 1fr auto;
  gap: 0.85rem;
  align-items: start;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--hair);
}

.sr-row i { border-radius: 4px; min-height: 2rem; }
.sr-row--v i { background: var(--ink-3); }
.sr-row--w i { background: var(--g); }
.sr-row--p i { background: var(--m); }
.sr-row--g i { background: var(--o); }
.sr-row b { font-size: 0.97rem; }
.sr-row p { margin: 0.15rem 0 0; font-size: 0.95rem; color: var(--ink-2); line-height: 1.6; }
.sr-row p mark { background: var(--o-soft); color: var(--ink); border-radius: 3px; padding: 0 0.12em; }
.sr-row .sr-add, .sr-row .sr-added { margin-top: 0.2rem; }

/* Match strength: one quiet, right-aligned indicator per verse hit.
 * Muted so scripture stays the focus; the "Match" cap names it plainly. */
.sr-match {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.28rem;
  padding-top: 0.05rem;
}
.sr-match__cap {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.sr-match__bar { display: flex; gap: 3px; }
.sr-match__bar > span {
  width: 11px;
  height: 5px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--ink-3) 24%, transparent);
}
.sr-match__bar[data-fill="1"] > span:nth-child(-n+1),
.sr-match__bar[data-fill="2"] > span:nth-child(-n+2),
.sr-match__bar[data-fill="3"] > span:nth-child(-n+3),
.sr-match__bar[data-fill="4"] > span:nth-child(-n+4),
.sr-match__bar[data-fill="5"] > span:nth-child(-n+5) { background: var(--g); }

/* Verse-row end cell: the match indicator stacked above the "add" chip,
 * both right-aligned. (Used by the legacy static /find, which keeps the chip.) */
.sr-rowend {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

.sr-ans {
  border-left: 4px solid var(--g);
  background: var(--page);
  border-radius: 0 12px 12px 0;
  padding: 1rem 1.15rem;
  margin: 1.1rem 0 2.2rem;
  box-shadow: 0 1px 0 var(--hair);
}

.sr-ans p { margin: 0 0 0.65rem; font-size: 0.97rem; line-height: 1.66; color: var(--ink-2); }
.sr-ans p b { color: var(--ink); }
.sr-cites { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.sr-cites a {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-2);
  background: var(--page-2);
  border-radius: 6px;
  padding: 0.15rem 0.5rem;
  text-decoration: none;
}

.sr-cites a:hover { color: var(--g); background: var(--g-soft); }
.sr-ansnote { font-size: 0.76rem; color: var(--ink-3); margin: 0.6rem 0 0; }

/* The results page runs the full column — verses in a list read fine wide. */
.sr-page--full { max-width: none; }

/* The trigger's display rule beats the hidden attribute; make hidden win,
   or opening the search shows two bars. */
.search[hidden] { display: none; }

/* ── Did you know — the lens's cards ─────────────────────────
   Colour answers what kind of observation this is: ink for the
   text itself, green chip on a warm card for the language, violet
   for a reading, plain bordered for the (empty) historical record.
   ────────────────────────────────────────────────────────── */
/* the lens view lives beside the reading area; when it is on, the
   server-rendered chapter steps aside entirely */
.reading--dyk { display: none; }

.dyk__chips,
.dyk__verse,
.dyk > .dyk--record {
  max-width: var(--measure-read);
  margin-left: auto;
  margin-right: auto;
}
.dyk__chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1.4rem; }
.dyk__chip {
  border: 1px solid var(--hair); background: var(--page); color: var(--ink-2);
  border-radius: 100px; font-size: 0.84rem; font-family: inherit;
  padding: 0.32rem 0.8rem; cursor: pointer; white-space: nowrap;
}
.dyk__chip b { font-weight: 700; color: var(--ink); }
.dyk__chip.is-on { background: var(--ink); color: var(--page); border-color: var(--ink); }
.dyk__chip.is-on b { color: var(--page); }
.dyk__chip:disabled { opacity: 0.45; cursor: default; }

.dyk__verse { margin: 0 auto 1.1rem; position: relative; }
.dyk__verse--anchored { margin-bottom: 1.6rem; }
.dyk__verse--anchored::before {
  content: ""; position: absolute; left: -1.15rem; top: 0.5em;
  width: 8px; height: 8px; border-radius: 100px; background: var(--ink);
}
.dyk__verse--anchored.dyk--language::before { background: var(--o); }
.dyk__verse--anchored.dyk--reading::before { background: var(--m); }
.dyk__verse.is-cited > div > .verse { animation: dyk-cited 2.2s ease-out; border-radius: 8px; }
@keyframes dyk-cited {
  0%, 45% { background: var(--g-soft); box-shadow: 0 0 0 6px var(--g-soft); }
  100% { background: transparent; box-shadow: 0 0 0 6px transparent; }
}
@media (prefers-reduced-motion: reduce) { .dyk__verse.is-cited > div > .verse { animation: none; background: var(--g-soft); } }
mark.dyk__quote.is-cited-words { animation: dyk-cited-words 2.2s ease-out; }
@keyframes dyk-cited-words {
  0%, 45% { box-shadow: inset 0 -2px 0 currentColor, 0 0 0 4px var(--g-soft); background: var(--g-soft); }
  100% { }
}
@media (prefers-reduced-motion: reduce) { mark.dyk__quote.is-cited-words { animation: none; outline: 2px solid var(--g); } }
.dyk__card {
  border-left: 4px solid var(--ink-3);
  background: var(--page-2);
  border-radius: 0 12px 12px 0;
  padding: 0.95rem 1.1rem;
  margin: 0.7rem 0 0 1.6rem;
}
.dyk__kind {
  display: inline-block; font-size: 0.72rem; font-weight: 700;
  border-radius: 100px; padding: 0.18rem 0.6rem; margin: 0 0 0.5rem;
  background: var(--ink); color: var(--page);
}
.dyk__title { margin: 0 0 0.35rem; font-size: 1.02rem; letter-spacing: -0.01em; }
.dyk__body { margin: 0; font-size: 0.94rem; line-height: 1.6; color: var(--ink-2); }
.dyk__refs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.6rem; }
.dyk__refs a {
  font-size: 0.78rem; font-weight: 700; color: var(--ink-2);
  background: var(--page); border-radius: 6px; padding: 0.14rem 0.5rem; text-decoration: none;
}
.dyk__refs a:hover { color: var(--g); background: var(--g-soft); }

/* the words a card stands on */
mark.dyk__quote { color: inherit; border-radius: 3px; padding: 0 0.08em; background: color-mix(in srgb, var(--ink) 14%, transparent); }
mark.dyk__quote.dyk--language { background: var(--o-soft); box-shadow: inset 0 -2px 0 var(--o); }
mark.dyk__quote.dyk--reading { background: var(--m-soft); box-shadow: inset 0 -2px 0 var(--m); }
mark.dyk__quote.dyk--text { background: var(--page-2); box-shadow: inset 0 -2px 0 var(--ink); }

.dyk__card.dyk--text { border-left-color: var(--ink); }
.dyk__card.dyk--language { border-left-color: var(--o); background: var(--o-soft); }
.dyk__card.dyk--language .dyk__kind { background: var(--g); }
.dyk__card.dyk--reading { border-left-color: var(--m); background: var(--m-soft); }
.dyk__card.dyk--reading .dyk__kind { background: var(--m); }
.dyk--record { border-left: 1px solid var(--hair); border: 1px solid var(--hair);
  border-radius: 12px; background: var(--page); margin-top: 1.4rem; }
.dyk--record .dyk__kind { background: transparent; color: var(--ink-3); padding: 0; }

/* ─────────────────────────────────────────────────────────────
   Your studies — the save picker (Flow 2, locked) and the
   ledger page (Option E, locked). Colour law holds: the picker
   is ink-and-grey chrome; create-new is the one green accent;
   a row's bar keeps its layer colour.
   ───────────────────────────────────────────────────────────── */

.cta--saved { background: var(--page); color: var(--g); border: 1.5px solid var(--g); }
.sr-add--saved { border-color: var(--g); border-style: solid; color: var(--g); background: var(--page); cursor: pointer; }

.pick {
  z-index: 60;
  background: var(--page);
  border: 1px solid var(--hair);
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  font-size: 0.88rem;
  text-align: left;
}
.pick-in { display: flex; align-items: center; gap: 0.45rem; padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--hair); color: var(--ink-3); }
.pick-in i { font-style: normal; }
.pick-in input { border: none; outline: none; background: none; font: inherit; color: var(--ink); width: 100%; }
.pick-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; padding: 0.45rem 0.8rem; cursor: pointer; color: var(--ink-2); font-weight: 400; }
.pick-row:hover { background: var(--page-2); color: var(--ink); }
.pick-row em { font-style: normal; font-size: 0.72rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pick-new { border-top: 1px solid var(--hair); font-weight: 700; color: var(--g); }
.pick-new:hover { background: var(--g-soft); }
.pick-danger { border-top: 1px solid var(--hair); color: #a33; }
.pick-hint { font-size: 0.7rem; color: var(--ink-3); padding: 0.3rem 0.8rem 0.5rem; }

/* the ledger */
/* The ledger sits exactly where the Plain view's chapter sits. */
.st2 { max-width: var(--measure-read); margin-left: auto; margin-right: auto; }
.st2-head { display: flex; align-items: baseline; gap: 0.7rem; }
.st2-head h1 { margin: 0; font-size: 1.5rem; letter-spacing: -0.01em; }
.st2-sub { font-size: 0.8rem; color: var(--pg-faint); margin: 0.1rem 0 0.8rem; }
.st2-new {
  display: inline-flex; align-items: center; border: 1.5px dashed var(--on-3); color: var(--on-2);
  border-radius: 100px; font: inherit; font-size: 0.8rem; font-weight: 700; padding: 0.3rem 0.75rem;
  cursor: pointer; background: none; white-space: nowrap;
}
.st2-new:hover { border-style: solid; border-color: var(--g); color: var(--g); background: var(--g-soft); }
.st2-find {
  display: flex; align-items: center; gap: 0.5rem; border: 1px solid var(--pg-line); background: var(--page);
  border-radius: 8px; padding: 0.45rem 0.8rem; color: var(--pg-faint); font-size: 0.9rem; max-width: 24rem; margin: 0 0 0.9rem;
}
.st2-find input { border: none; outline: none; background: none; font: inherit; color: var(--pg-ink); width: 100%; }

.st2-acc { border: 1px solid var(--pg-line-2); border-radius: 8px; background: var(--page); margin-bottom: 0.45rem; overflow: hidden; }
.st2-acc-h { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.55rem 0.9rem; cursor: pointer; width: 100%; border: none; background: none; font: inherit; text-align: left; color: var(--pg-ink); }
.st2-acc-h:hover { background: var(--page-2); }
.st2-acc-h b { font-size: 0.93rem; }
.st2-car { color: var(--ink-3); font-size: 0.7rem; width: 0.8rem; flex: 0 0 auto; transition: transform 0.12s; }
.st2-acc--open .st2-car { transform: rotate(90deg); }
.st2-n { margin-left: auto; font-size: 0.8rem; color: var(--pg-faint); font-variant-numeric: tabular-nums; }
.st2-pin { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--o); }
.st2-body { padding: 0.5rem 0.9rem 0.8rem; background: var(--pg-bg); border-top: 1px solid var(--pg-line-2); }
.st2-tools { display: flex; gap: 0.3rem; margin: 0 0 0.5rem; }
.st2-ib { border: 1px solid transparent; background: none; color: var(--ink-3); font: inherit; font-size: 0.8rem; border-radius: 6px; padding: 0.2rem 0.45rem; cursor: pointer; }
.st2-ib:hover { border-color: var(--hair); color: var(--ink); background: var(--page-2); }

.st2-row {
  display: grid; grid-template-columns: 4px 1fr auto; gap: 0 0.8rem;
  background: var(--page); border: 1px solid var(--hair); border-radius: 8px;
  padding: 0.55rem 0.8rem 0.55rem 0; align-items: center; cursor: pointer;
}
.st2-row:hover { border-color: var(--ink-3); }
.st2-row + .st2-row { margin-top: 0.45rem; }
.st2-row--drag { opacity: 0.45; }
.st2-row--over { box-shadow: 0 -3px 0 0 var(--g-line); }
.st2-bar { align-self: stretch; border-radius: 8px 0 0 8px; background: var(--ink-3); }
.st2-row--w .st2-bar { background: var(--g); }
.st2-row--p .st2-bar { background: var(--m); }
.st2-row--g .st2-bar { background: var(--o); }
.st2-t { font-weight: 700; font-size: 0.93rem; color: var(--ink); }
.st2-t small { font-family: var(--mono); font-weight: 400; font-size: 0.7rem; color: var(--ink-3); margin-left: 0.4rem; }
.st2-s { font-size: 0.79rem; color: var(--ink-3); }
.st2-note { font-size: 0.84rem; color: var(--ink-2); background: var(--page-2); border: 1px dashed var(--hair); border-radius: 6px; padding: 0.3rem 0.6rem; margin-top: 0.35rem; grid-column: 2 / 4; }
.st2-note input { border: none; outline: none; background: none; font: inherit; color: var(--ink-2); width: 100%; }
.st2-actions { display: flex; align-items: center; gap: 0.3rem; }
.st2-grip { color: var(--ink-3); cursor: grab; font-size: 1rem; padding: 0.15rem 0.3rem; user-select: none; touch-action: none; }
.st2-empty { color: var(--pg-soft); font-size: 0.93rem; max-width: var(--measure); }
.st2-empty .sr-add { pointer-events: none; }

/* The empty state — the ghost study (Option A, locked): a dashed
   phantom that teaches the row anatomy and dissolves at first save. */
.st2-ghead { display: flex; align-items: baseline; gap: 0.6rem; border: 1.5px dashed var(--pg-line); border-radius: 8px; background: var(--page); padding: 0.5rem 0.9rem; margin: 1.1rem 0 0.5rem; color: var(--ink-3); }
.st2-ghead b { font-size: 0.93rem; }
.st2-ghead em { margin-left: auto; font-style: normal; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.st2-grow { display: grid; grid-template-columns: 4px 1fr; gap: 0 0.8rem; background: var(--page); border: 1.5px dashed var(--hair); border-radius: 8px; padding: 0.55rem 0.8rem 0.55rem 0; align-items: center; opacity: 0.85; }
.st2-grow + .st2-grow { margin-top: 0.45rem; }
.st2-gbar { align-self: stretch; border-radius: 8px 0 0 8px; opacity: 0.5; background: var(--ink-3); }
.st2-grow--w .st2-gbar { background: var(--g); }
.st2-grow--p .st2-gbar { background: var(--m); }
.st2-grow--g .st2-gbar { background: var(--o); }
.st2-gt { font-weight: 700; font-size: 0.93rem; color: var(--ink-3); }
.st2-gt small { font-family: var(--mono); font-weight: 400; font-size: 0.7rem; margin-left: 0.4rem; }
.st2-gs { font-size: 0.79rem; color: var(--ink-3); opacity: 0.75; }

/* ─────────────────────────────────────────────────────────────
   Word for word — the same chapter twice (design 13, locked).
   Underline = a computed textual difference; green mark = a
   stored note that opens the panel. The lens reuses the verse
   anatomy so the two columns read like the chapter itself.
   ───────────────────────────────────────────────────────────── */

.wfw { max-width: 62rem; margin-left: auto; margin-right: auto; }

.wfw-intro { display: flex; align-items: flex-start; gap: 1rem; max-width: 62rem; margin: 0 0 1.4rem; }
.wfw-intro p { margin: 0; max-width: 34rem; font-size: 0.95rem; color: var(--ink-2); }
.wfw-chip {
  flex: 0 0 auto; margin-left: auto; white-space: nowrap;
  background: var(--g-soft); color: var(--g); font-weight: 700; font-size: 0.85rem;
  border-radius: 100px; padding: 0.3rem 0.85rem;
}
.wfw-chip--quiet { background: var(--hair-2); color: var(--ink-3); font-weight: 400; }

.wfw-heads {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 0.9rem;
}
.wfw-heads span { border-bottom: 1px solid var(--hair); padding-bottom: 0.35rem; }
.wfw-heads__right { color: var(--g); border-bottom-color: var(--g-line); }
.wfw-heads__v { font-style: normal; font-weight: 400; letter-spacing: 0.06em; color: var(--ink-3); margin-left: 0.4rem; }

.wfw-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; }
.wfw-row .verse { margin-bottom: 0.9rem; }

.wfw-u { text-decoration: underline; text-decoration-color: var(--ink-3); text-underline-offset: 3px; font-weight: 700; }
mark.wfw-mark { background: var(--g-soft); color: inherit; border-radius: 4px; padding: 0 2px; cursor: pointer; font-weight: 700; }
mark.wfw-mark:hover { background: var(--g-line); }

.wfw-provenance {
  font-family: var(--mono); font-size: 0.8rem; line-height: 1.7; color: var(--ink-3);
  border-top: 1px solid var(--hair); margin-top: 1.6rem; padding-top: 1rem; max-width: 46rem;
}
.wfw-provenance b { color: var(--ink-2); }

/* the notes toggle in the lens row */
.wfw-toggle {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-left: auto;
  font-size: 0.9rem; color: var(--ink-2); white-space: nowrap; cursor: pointer;
}
.wfw-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.wfw-toggle__track {
  width: 2.1rem; height: 1.2rem; border-radius: 100px; background: var(--chrome-3);
  position: relative; transition: background 0.12s; flex: 0 0 auto;
}
.wfw-toggle__track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.2rem - 4px); height: calc(1.2rem - 4px);
  border-radius: 50%; background: var(--page); transition: left 0.12s; box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.wfw-toggle input:checked + .wfw-toggle__track { background: var(--g); }
.wfw-toggle input:checked + .wfw-toggle__track::after { left: calc(100% - 1.2rem + 2px); }
.wfw-toggle input:focus-visible + .wfw-toggle__track { outline: 2px solid var(--ink); outline-offset: 2px; }

/* the note panel */
.wfw-vs { font-size: 0.95rem; color: var(--ink-2); margin: 0.1rem 0 0.9rem; }
.wfw-sec { border-top: 1px solid var(--hair); padding: 0.75rem 0 0.2rem; margin-top: 0.75rem; }
.wfw-sec__h {
  font-size: 0.9rem; margin: 0 0 0.3rem; color: var(--ink);
  border-left: 3px solid var(--g); padding-left: 0.5rem;
}
.wfw-sec p { margin: 0 0 0.5rem; font-size: 0.92rem; line-height: 1.6; color: var(--ink-2); }
.wfw-renders { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; font-size: 0.92rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.wfw-panel .pfoot2 { margin-top: 1.1rem; }

@media (max-width: 44rem) {
  .wfw-row, .wfw-heads { grid-template-columns: 1fr; gap: 0 0; }
  .wfw-heads span:first-child { display: none; }
  .wfw-row .verse:first-child { opacity: 0.75; }
}

/* ─────────────────────────────────────────────────────────────
   Threads — trace every reference (design 51/52, M1).
   Violet = connection, the layer's own colour. The map is data;
   the summary on top is authored, only where a verse has one.
   ───────────────────────────────────────────────────────────── */

.thr { max-width: var(--measure-read); margin-left: auto; margin-right: auto; }

.thr-cue {
  background: var(--m-soft); border-radius: 12px; padding: 1rem 1.2rem; margin: 0 0 1.6rem;
  max-width: var(--measure-read);
}
.thr-cue-h { font-weight: 700; color: var(--m); margin: 0 0 0.3rem; font-size: 1rem; }
.thr-cue p { margin: 0; font-size: 0.92rem; color: var(--ink-2); line-height: 1.55; }
.thr-cue p b { color: var(--ink); }

/* anchored verses wear a dot in the margin */
.verse--anchored { position: relative; }
.verse--anchored::before {
  content: ""; position: absolute; left: -1.1rem; top: 0.55rem;
  width: 7px; height: 7px; border-radius: 50%; background: var(--m);
}

/* the floating trace bar */
.thr-bar {
  position: fixed; transform: translate(-50%, 0.5rem); z-index: 40;
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: var(--ink); color: var(--page); border-radius: 12px;
  padding: 0.5rem 0.6rem 0.5rem 0.9rem; font-size: 0.9rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22); white-space: nowrap;
}
.thr-bar-k { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--m-line); }
.thr-bar b { font-weight: 700; }
.thr-bar-n { color: var(--on-3); font-size: 0.82rem; }
.thr-bar-go {
  border: none; background: var(--m); color: var(--m-fg); font: inherit; font-size: 0.85rem; font-weight: 700;
  border-radius: 8px; padding: 0.35rem 0.7rem; cursor: pointer;
}
.thr-bar-go:hover { filter: brightness(1.08); }

/* the pane */
.thr-panel .thr-eyebrow { color: var(--m); }
.thr-meta { font-size: 0.84rem; color: var(--ink-2); margin: 0.1rem 0 0.7rem; }
.thr-summary { background: var(--m-soft); border-radius: 10px; padding: 0.9rem 1rem; margin: 0 0 1.1rem; }
.thr-big { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 700; color: var(--ink); line-height: 1.4; }
.thr-summary p { margin: 0; font-size: 0.9rem; color: var(--ink); line-height: 1.55; }
.thr-counts { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; border-top: 1px solid var(--m-line); margin-top: 0.75rem; padding-top: 0.6rem; font-size: 0.83rem; color: var(--ink-2); }
.thr-counts b { color: var(--ink); }

.thr-grp { margin-top: 1.2rem; }
.thr-grp-h { display: flex; align-items: baseline; gap: 0.5rem; border-left: 3px solid var(--m-line); padding-left: 0.55rem; margin-bottom: 0.4rem; }
.thr-grp-h h4 { margin: 0; font-size: 0.9rem; }
.thr-n { margin-left: auto; font-size: 0.78rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.thr-ref { display: block; padding: 0.5rem 0; border-top: 1px solid var(--hair-2); text-decoration: none; color: inherit; }
.thr-ref:hover .thr-rref { color: var(--m); }
.thr-rtop { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.thr-rref { font-weight: 700; font-size: 0.87rem; white-space: nowrap; }
.thr-rtext { font-size: 0.88rem; color: var(--ink); margin: 0.2rem 0 0; line-height: 1.5; }

/* the speaker tag */
.thr-spk { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--m); background: var(--m-soft); border-radius: 100px; padding: 0.05rem 0.5rem; white-space: nowrap; }
.thr-spk--god { color: var(--o); background: var(--o-soft); }
.thr-spk--nar { color: var(--ink-3); background: var(--chrome-2); }

/* who spoke it (anchor) and the authorship footnote */
.thr-spoke { font-size: 0.85rem; color: var(--ink-2); margin: 0 0 0.1rem; }
.thr-spoke b { color: var(--m); }
.thr-auth { font-size: 0.72rem; color: var(--ink-3); margin: 0.35rem 0 0; padding-top: 0.3rem; border-top: 1px dotted var(--hair); }
.thr-auth b { color: var(--ink-3); font-weight: 700; }
.thr-panel > .thr-auth { border-top: none; padding-top: 0; margin: 0 0 0.5rem; }
.thr-deb { color: var(--m); font-weight: 600; }
.thr-none { font-size: 0.9rem; color: var(--ink-3); margin: 0.2rem 0 0; }
.thr-none b { color: var(--ink); }

/* Traces — the "Traced here from …" arrival banner (M3, mock 52) */
.thr-from {
  background: var(--m-soft); border-radius: 12px; padding: 1rem 1.2rem; margin: 0 0 1.6rem;
  max-width: var(--measure-read); border-left: 3px solid var(--g);
}
.thr-from-h { font-weight: 700; color: var(--g); margin: 0 0 0.3rem; font-size: 1rem; }
.thr-from p { margin: 0; font-size: 0.92rem; color: var(--ink-2); line-height: 1.55; }
.thr-from a { color: var(--m); font-weight: 700; border-bottom: 1px solid var(--m-line); }

/* Traces — word and phrase trace results */
.thr-woccur { display: flex; flex-wrap: wrap; gap: 0.25rem 0.55rem; margin: 0.1rem 0 0; }
.thr-woccur a { font-size: 0.82rem; color: var(--ink-2); font-variant-numeric: tabular-nums; text-decoration: none; }
.thr-woccur a:hover { color: var(--m); }

/* Traces — the neutral "read more than one way" note under a summary */
.thr-argued { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--ink-2); line-height: 1.5; }
.thr-argued b { color: var(--m); font-weight: 700; }

/* Traces — bottom room so the last verse (and its trace bar) clears the fold */
.thr { padding-bottom: 3rem; }
/* the chapter nav at the end — not sticky here, and within the centred column */
.thr-end { position: static; margin: 2.4rem auto 0; max-width: var(--measure-read); }

/* ── Historical — the outside record for a chapter ───────────
   Amber is the history colour; each family carries its own accent
   on the card's left edge and kind badge. Same shape as the
   Did-you-know cards so the lenses feel like one app. */
.hist { max-width: var(--measure-read); }
.hist__verse { margin: 0 auto 1.1rem; position: relative; }
.hist__verse--anchored { margin-bottom: 1.6rem; }
.hist__card {
  border-left: 4px solid var(--o);
  background: var(--o-soft);
  border-radius: 0 12px 12px 0;
  padding: 0.95rem 1.1rem;
  margin: 0.7rem 0 0 1.6rem;
}
.hist__top { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.hist__kind {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: #fff; background: var(--o); border-radius: 100px; padding: 0.16rem 0.55rem;
}
.hist__date { font-size: 0.76rem; color: var(--ink-3); font-weight: 600; }
.hist__flag {
  font-size: 0.68rem; font-weight: 700; color: var(--ink-3);
  border: 1px solid var(--hair); border-radius: 100px; padding: 0.1rem 0.5rem;
}
.hist__title { margin: 0 0 0.35rem; font-size: 1.02rem; letter-spacing: -0.01em; }
.hist__body { margin: 0; font-size: 0.94rem; line-height: 1.6; color: var(--ink-2); }
.hist__foot { display: flex; flex-wrap: wrap; gap: 0.4rem 0.55rem; align-items: baseline; margin-top: 0.65rem; }
.hist__house { font-size: 0.75rem; color: var(--ink-3); }
.hist__cite { font-size: 0.75rem; color: var(--ink-3); font-style: italic; }
.hist__link {
  font-size: 0.76rem; font-weight: 700; color: var(--o);
  background: var(--page); border-radius: 6px; padding: 0.14rem 0.5rem; text-decoration: none;
}
.hist__link:hover { background: var(--o); color: #fff; }

/* per-family accents */
.hist__card.hist--seal { border-left-color: var(--m); background: var(--m-soft); }
.hist__card.hist--seal .hist__kind { background: var(--m); }
.hist__card.hist--seal .hist__link { color: var(--m); }
.hist__card.hist--hist { border-left-color: var(--ink); background: var(--page-2); }
.hist__card.hist--hist .hist__kind { background: var(--ink); }
.hist__card.hist--hist .hist__link { color: var(--ink); }
.hist__card.hist--chron { border-left-color: var(--g); background: var(--g-soft); }
.hist__card.hist--chron .hist__kind { background: var(--g); }
.hist__card.hist--chron .hist__link { color: var(--g); }
.hist__card.hist--ms { border-left-color: #2b6cb0; background: var(--page-2); }
.hist__card.hist--ms .hist__kind { background: #2b6cb0; }
.hist__card.hist--ms .hist__link { color: #2b6cb0; }
.hist__card.hist--geo { border-left-color: var(--ink-3); background: var(--page-2); }
.hist__card.hist--geo .hist__kind { background: var(--ink-3); }

.hist__empty {
  border: 1px solid var(--hair); border-radius: 12px; background: var(--page);
  padding: 1rem 1.15rem; margin-top: 0.4rem;
}
.hist__empty .hist__kind { background: transparent; color: var(--ink-3); padding: 0; }
.hist__empty h3 { margin: 0.35rem 0 0.3rem; font-size: 1rem; }
.hist__empty p { margin: 0; font-size: 0.92rem; color: var(--ink-2); line-height: 1.6; }

/* the flashed words, in the family colour, reuse the dyk quote marks */
.hist mark.dyk__quote { background: var(--o-soft); box-shadow: inset 0 -2px 0 var(--o); }
.hist mark.dyk__quote.hist--seal { background: var(--m-soft); box-shadow: inset 0 -2px 0 var(--m); }
.hist mark.dyk__quote.hist--chron { background: var(--g-soft); box-shadow: inset 0 -2px 0 var(--g); }
.hist mark.dyk__quote.hist--ms { box-shadow: inset 0 -2px 0 #2b6cb0; }
.hist mark.dyk__quote.hist--hist { box-shadow: inset 0 -2px 0 var(--ink); }


/* ── Historical storyteller: hook, story, and the tucked-away receipts ── */
.hist__aha {
  display: flex; gap: 0.7rem; align-items: flex-start;
  background: linear-gradient(180deg, var(--o-soft), transparent);
  border: 1px solid var(--o); border-radius: 12px;
  padding: 0.85rem 1rem; margin: 0 auto 1.6rem; max-width: var(--measure-read);
}
.hist__aha svg { flex: none; width: 22px; height: 22px; color: var(--o); margin-top: 0.1rem; }
.hist__aha p { margin: 0; font-size: 1rem; line-height: 1.5; }
.hist__hook { font-size: 1.12rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.35; margin: 0 0 0.5rem; }
.hist__receipts { margin-top: 0.8rem; border-top: 1px solid var(--hair); padding-top: 0.55rem; }
.hist__reveal {
  background: none; border: none; font: inherit; font-size: 0.8rem; font-weight: 700;
  color: var(--o); cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 0.35rem;
}
.hist__card.hist--seal .hist__reveal { color: var(--m); }
.hist__card.hist--chron .hist__reveal { color: var(--g); }
.hist__card.hist--ms .hist__reveal { color: #2b6cb0; }
.hist__card.hist--hist .hist__reveal { color: var(--ink); }
.hist__reveal svg { width: 11px; height: 11px; transition: transform 0.15s; }
.hist__reveal svg.is-open { transform: rotate(180deg); }
.hist__how { margin: 0.5rem 0 0; font-size: 0.8rem; color: var(--ink-3); line-height: 1.65; }
.hist__how .hist__name { color: var(--ink-2); font-weight: 600; }
.hist__how .hist__cite { font-style: italic; }
@media (prefers-reduced-motion: reduce) { .hist__reveal svg { transition: none; } }