/* The guide sits above reader controls and below full-page sheets. */
.walkthrough { position: fixed; inset: 0; z-index: 36; pointer-events: none; }
.walkthrough [hidden] { display: none !important; }
.walkthrough-card {
  position: fixed;
  box-sizing: border-box;
  width: 300px;
  max-width: calc(100vw - 24px);
  left: 12px;
  top: 76px;
  padding: 13px 16px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  pointer-events: auto;
  border: 1px solid color-mix(in srgb, var(--ink, #1e1d1b) 18%, transparent);
  border-radius: 15px;
  color: var(--ink, #1e1d1b);
  background: color-mix(in srgb, var(--paper, #f4f2ed) 94%, #9b835d);
  box-shadow: 0 3px 16px var(--shadow, #0002);
  font-family: var(--reader-font, var(--serif, Georgia, serif));
  font-size: 15px;
  line-height: 1.45;
}
.walkthrough-card p { margin: 0; }
.walkthrough-card button { font: inherit; cursor: pointer; }
.walkthrough-card button:focus-visible { outline: 2px solid var(--ink, #1e1d1b); outline-offset: 2px; }
.walkthrough-card button:disabled { cursor: default; opacity: .45; }
.walkthrough-card .walkthrough-welcome {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  margin: -5px 0 5px -5px;
  padding: 4px 5px;
  border: 0;
  border-radius: 5px;
  color: var(--ink-soft, #6a665e);
  background: transparent;
  font-size: 12px;
}
.walkthrough-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; margin-bottom: 8px; }
.walkthrough-card .walkthrough-progress { font-family: var(--sans, sans-serif); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.walkthrough-title { display: flex; align-items: center; gap: 2px; margin-left: -6px; }
.walkthrough-card .walkthrough-close { min-height: 32px; min-width: 32px; padding: 0 6px; border: 0; border-radius: 5px; color: inherit; background: transparent; font-size: 20px; line-height: 1; }
.walkthrough-actions { display: flex; gap: 2px; margin-right: -6px; }
.walkthrough-actions button { min-height: 32px; min-width: 38px; padding: 4px 6px; border: 0; border-radius: 5px; color: inherit; background: transparent; font-size: 13px; }
.walkthrough-card button:hover:not(:disabled) { background: color-mix(in srgb, var(--ink, #1e1d1b) 7%, transparent); }
.walkthrough-card .walkthrough-instruction { overflow-wrap: anywhere; }
/* Blank lines (\n\n) become sibling blocks with one blank-row gap.
   Soft breaks are <br> (+ \n with pre-line). Selector must beat
   `.walkthrough-card p { margin: 0 }` so the gap is not collapsed. */
.walkthrough-card .walkthrough-instruction > * + * { margin-top: 1.45em; }
.walkthrough-instruction :is(p, blockquote) { white-space: pre-line; }
.walkthrough-instruction ul { margin-bottom: 0; padding-left: 20px; }
.walkthrough-instruction li + li { margin-top: 3px; }
.walkthrough-instruction a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.walkthrough-instruction blockquote {
  margin: 0;
  padding: 2px 0 2px 12px;
  border-left: 2px solid color-mix(in srgb, var(--ink, #1e1d1b) 28%, transparent);
  color: var(--ink-soft, #6a665e);
  font-style: italic;
}

.walkthrough-card .walkthrough-tip {
  /* Divider, then one blank-row (Enter-twice / 1.45em) before the tip label —
     same gap height as sibling paragraph breaks from v1.0.130. */
  border-top: 1px solid color-mix(in srgb, var(--ink, #1e1d1b) 14%, transparent);
  padding-top: 1.45em;
  color: var(--ink-soft, #6a665e);
  font-size: 13px;
}
.walkthrough-tip strong { color: var(--ink, #1e1d1b); font-weight: 600; }
.walkthrough-intro { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.walkthrough-card .walkthrough-continue, .walkthrough-card .walkthrough-feature { min-height: 40px; padding: 8px 16px; border: 0; border-radius: 8px; color: var(--paper, #f4f2ed); background: var(--ink, #1e1d1b); font-size: 15px; }
.walkthrough-card .walkthrough-continue:hover:not(:disabled), .walkthrough-card .walkthrough-feature:hover:not(:disabled) { background: var(--accent, #4a4740); }
.walkthrough-card .walkthrough-feature { display: block; margin: 12px auto 0; }
.walkthrough-card .walkthrough-skip-all { min-height: 40px; padding: 8px 12px; border: 0; border-radius: 8px; color: inherit; background: transparent; font-size: 14px; }

/* Tour emphasis: the passage and every control dim, except the subject of the
   current step (.tour-focus, or the passage with .tour-scripture). Dimmed
   controls stay usable. Bars keep their surface; only their contents dim. */
/* No opacity transition in the tour: step 5 dims by ink instead, and a
   250ms fade between the two ways of dimming read as a flash of full text. */
html.tour-dim #book { opacity: .28; transition: none; }
html.tour-dim.tour-scripture #book { opacity: 1; }
/* Only visible controls dim. In Reading Mode (#chrome.hidden) the reader hides
   every control with opacity 0, and these rules must not show them again. */
html.tour-dim #chrome:not(.hidden) :is(.bar-btn, .bk-btn, .chip, .bar-sep) { opacity: .25; transition: opacity .25s ease; }
html.tour-dim #chrome:not(.hidden) .tour-focus { opacity: 1; }
html.tour-dim[data-tour-step="highlightApplied"] .wordbar :is(button, a):not(.tour-focus) { opacity: .3; }
/* Step 5: the passage dims by ink instead of opacity, so the selected words
   (main.js wraps them in .tour-sel) keep full ink while the rest fades. */
html.tour-dim[data-tour-step="wordActionsShown"] #book { opacity: 1; color: color-mix(in srgb, var(--ink, #1e1d1b) 28%, transparent); }
html.tour-dim[data-tour-step="wordActionsShown"] #book .tour-sel { color: var(--ink, #1e1d1b); }
html.tour-dim[data-tour-step="wordActionsShown"] #book :is(.vn, .cn, .vl-h, .bk-title, .credit, .hl-layer) { opacity: .28; }
@media (prefers-reduced-motion: reduce) {
  html.tour-dim #chrome:not(.hidden) :is(.bar-btn, .bk-btn, .chip, .bar-sep) { transition: none; }
}
.walkthrough-card .walkthrough-check { position: absolute; right: 18px; bottom: 12px; font-family: var(--sans, sans-serif); font-size: 30px; line-height: 1; }
.walkthrough-celebrating .walkthrough-instruction { opacity: .25; }
.walkthrough-card .walkthrough-done { display: block; width: 100%; min-height: 44px; margin-top: 14px; padding: 9px 14px; border: 0; border-radius: 8px; color: var(--paper, #f4f2ed); background: var(--ink, #1e1d1b); font-size: 15px; }
/* :not(:disabled) keeps this above the flat-button wash (line 47), which
   otherwise outranks it and fades Begin reading to 7% ink under the pointer. */
.walkthrough-card .walkthrough-done:hover:not(:disabled) { background: var(--accent, #4a4740); }
.walkthrough-arrow { position: fixed; pointer-events: none; color: var(--ink, #1e1d1b); filter: drop-shadow(0 1px 2px var(--paper, #f4f2ed)); }
.walkthrough-tour .walkthrough-card { cursor: grab; }
.walkthrough-tour .walkthrough-heading { touch-action: none; }
.walkthrough-dragging .walkthrough-card { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.walkthrough-connector { position: fixed; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; color: var(--ink, #1e1d1b); filter: drop-shadow(0 0 2px var(--paper, #f4f2ed)); }
.walkthrough-connector path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* A filled head whose wide round stroke turns its three corners into arcs. */
.walkthrough-connector .walkthrough-head { fill: currentColor; stroke-width: 4; }
.walkthrough-announcement { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-height: 450px) {
  .walkthrough-card { padding: 8px 12px 12px; font-size: 14px; }
  .walkthrough-card .walkthrough-welcome { margin-bottom: 0; }
  .walkthrough-heading { margin-bottom: 4px; }
}