/* Selah workbench — appearance, sparkline, verse rows, morpheme
   Odds and ends that don't fit the larger partials yet.
   Split from resources/public/css/workbench.css on 2026-07-01 —
   run git log --follow to trace history through the pre-split file. */

/* ── Appearance preview — live theme swatch above the Theme picker */

.settings-appearance-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--rd-ink-4, var(--wb-ink-4));
  border-radius: 4px;
  background: var(--rd-bg, var(--wb-bg));
}

.settings-appearance-swatch {
  display: inline-flex;
  align-items: center;
  position: relative;
  width: 60px;
  height: 40px;
  border: 1px solid var(--rd-ink-4, var(--wb-ink-4));
  border-radius: 3px;
  overflow: hidden;
  background: var(--rd-bg, var(--wb-bg));
}

.settings-appearance-swatch-bg {
  position: absolute; inset: 0;
  background: var(--rd-bg, var(--wb-bg));
}

.settings-appearance-swatch-ink {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-family: var(--font-hebrew);
  color: var(--rd-ink, var(--wb-ink));
  z-index: 1;
}

.settings-appearance-swatch-warm {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rd-warm, var(--rd-ink-2, var(--wb-ink-2)));
  z-index: 2;
}

.settings-appearance-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settings-appearance-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--rd-ink-3, var(--wb-ink-3));
}

.settings-appearance-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--rd-ink, var(--wb-ink));
  font-family: var(--rd-mono);
}

/* ── Across-book sparkline — slim 20px row, no header ─────── */

.wb-profile-spark {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 24px;
  margin: 8px 0;
  padding: 0 4px;
  opacity: 0.7;
}

.wb-profile-spark-bar {
  display: inline-block;
  width: 4px;
  min-width: 4px;
  background: var(--rd-ink-3, #5e6c84);
  cursor: pointer;
  border-radius: 1px;
  transition: background 0.1s ease;
}

.wb-profile-spark-bar:hover {
  background: var(--rd-ink, #c9d1d9);
}

.wb-profile-spark-bar--here {
  background: var(--rd-warm, #d4a256);
}

/* ── Verse profile · syllable row under each token ─────── */

.pf-token-syl-row {
  display: block;
  margin-top: 4px;
  font-family: var(--font-hebrew);
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  opacity: 0.85;
}

.pf-token-syl {
  display: inline-block;
  padding: 0 1px;
}

.pf-token-syl--pos-0 { color: var(--rd-ink, currentColor); }
.pf-token-syl--pos-1 {
  color: color-mix(in srgb,
                   var(--rd-ink, currentColor) 60%,
                   transparent);
}

.pf-token-syl--closed {
  border-bottom: 1px dotted color-mix(in srgb,
                                      var(--rd-ink-3) 40%,
                                      transparent);
}

/* ── Verse profile · transliteration second line ─────── */

.pf-token-translit {
  display: block;
  margin-top: 2px;
  font-family: var(--rd-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--rd-ink-3, #889);
  text-align: center;
  direction: ltr;
}

/* ── Verse profile · per-grain token highlights ───────────
   When the active unit is lemma/form/root/morpheme/syllable,
   every matching token in the verse lights so the user can SEE
   the sibling set at a glance. Distinct from --active (the
   single anchored selection); these are membership highlights. */

.wb-profile-token--lemma {
  background: color-mix(in srgb,
                        var(--rd-fixed) 18%,
                        transparent);
  border-radius: 3px;
}

.wb-profile-token--form {
  background: color-mix(in srgb,
                        var(--rd-warm, #d4a256) 18%,
                        transparent);
  border-radius: 3px;
}

.wb-profile-token--root {
  background: color-mix(in srgb,
                        var(--wb-violet) 18%,
                        transparent);
  border-radius: 3px;
}

/* Sub-word grains (morpheme/syllable/letter) — ONE dashed
   enclosure, same geometry as every other token-sized box (the
   token's own padded box, radius 3) and the letter-mode's warm
   wash so all three read identically (Scott, 2026-07-30). */
.wb-profile-token--morpheme,
.wb-profile-token--syllable {
  background: color-mix(in srgb, var(--wb-warm) 18%, transparent);
  outline: 1px dashed color-mix(in srgb,
                                var(--wb-warm) 60%,
                                transparent);
  outline-offset: 0;
  border-radius: 3px;
}

/* ── Morpheme mini-profile · prefix dictionary sections ─────
   Curated sense list + examples + notes for the closed-class
   proclitic prefixes (vav · he · lamed · bet · mem · kaf · et
   · shin). Each sense is a row: the gloss in mono, the
   contextual "when" note below. */

.rd-panel-morph-senses {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0;
}

.rd-panel-morph-sense-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 8px;
  border-left: 2px solid var(--wb-rule, var(--rd-ink-4));
}

.rd-panel-morph-sense {
  font-family: var(--rd-mono);
  font-size: 11px;
  color: var(--wb-ink, var(--rd-ink));
  font-weight: 500;
}

.rd-panel-morph-sense-note {
  font-size: 10px;
  color: var(--wb-ink-3, var(--rd-ink-3));
  line-height: 1.4;
}

.rd-panel-morph-examples,
.rd-panel-morph-notes {
  font-size: 10px;
  color: var(--wb-ink-2, var(--rd-ink-2));
  padding: 4px 0;
  line-height: 1.5;
}

.rd-panel-morph-example {
  padding: 2px 8px;
  font-family: 'Cardo', 'EB Garamond', Georgia, var(--script-faces), serif;
}

.rd-panel-morph-notes {
  padding: 4px 8px;
  font-style: italic;
}

/* Word mini-profile · loading placeholders (concordance + frequency).
   Reserve vertical space so the section doesn't appear/disappear
   when mini-data lands — kills the "redraw under root" jump. */

.rd-word-mini .rd-mw-conc--loading {
  min-height: 18px;
  padding: 4px 0;
  color: var(--rd-ink-3, var(--wb-ink-3));
}

.rd-word-mini .rd-mw-freq-loading {
  display: flex; flex-direction: column;
  gap: 1px;
  opacity: 0.5;
  pointer-events: none;
}



/* Explore tab ⌕ — FIXED px, not em (2.5em compounded in every
   context the label renders — tab, overflow — Scott, 2026-09-15:
   "too much... think about how that scales"). One size everywhere. */
.wb-tab-explore-label {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.wb-tab-explore-glyph {
  font-size: 17px;
  line-height: 1;
  /* the ⌕ glyph draws high in its em box — the extra size was
     stacking UP; center the box and nudge the glyph's optical
     center down onto the text baseline's middle */
  display: inline-flex;
  align-items: center;
  position: relative;
  top: 1.5px;
}