:root {
  color-scheme: light;
  --bg: #f2efe8;
  --surface: #fffdf8;
  --surface-strong: #ffffff;
  --ink: #25231f;
  --muted: #756f65;
  --line: #ded8cd;
  --line-strong: #c9c0b1;
  --accent: #284f43;
  --accent-hover: #1e4036;
  --accent-soft: #e3eee9;
  --warm: #aa6c3d;
  --verse-font-size: 14px;
  --toolbar-icon-gap: 4px;
  --shadow: 0 18px 45px rgba(55, 45, 30, 0.1);
  --radius: 16px;
  font-family:
    Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", Inter, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background:
    radial-gradient(circle at 12% 0%, rgba(201, 181, 143, 0.18), transparent 26rem),
    var(--bg);
  color: var(--ink);
  overflow: hidden;
}

button,
select,
input {
  font: inherit;
}

button,
select {
  color: inherit;
}

button {
  cursor: pointer;
}

.app-header {
  position: relative;
  z-index: 10;
  height: 178px;
  padding: 22px 28px 16px;
  background: rgba(255, 253, 248, 0.92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}

.brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1800px;
  margin: 0 auto 18px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 13px;
}

.brand-mark {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 13px;
  background: var(--accent);
  color: white;
  font-family: Georgia, serif;
  font-size: 22px;
  box-shadow: 0 9px 18px rgba(40, 79, 67, 0.2);
}

h1,
h2,
p {
  margin: 0;
}

.brand h1 {
  font-family: Georgia, "Noto Serif KR", serif;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.brand p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.header-actions {
  display: flex;
  gap: var(--toolbar-icon-gap);
}

.button {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-weight: 700;
  transition: 150ms ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button-primary {
  background: var(--accent);
  color: white;
  box-shadow: 0 7px 16px rgba(40, 79, 67, 0.16);
}

.button-primary:hover {
  background: var(--accent-hover);
}

.button-secondary {
  background: var(--surface-strong);
  border-color: var(--line);
}

.button-secondary:hover {
  border-color: var(--line-strong);
  background: #faf8f3;
}

.translation-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 1800px;
  margin: 0 auto;
}

.translation-heading {
  flex: 0 0 auto;
}

.translation-heading strong,
.translation-heading span {
  display: block;
}

.translation-heading strong {
  font-size: 13px;
}

.translation-heading span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.translation-list {
  display: flex;
  flex: 1 1 auto;
  order: 1;
  min-width: 0;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 3px 5px;
  scrollbar-width: thin;
}

.translation-chip {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
  box-shadow: 0 3px 10px rgba(50, 40, 25, 0.04);
}

.translation-chip.dragging {
  opacity: 0.45;
}

.translation-chip label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.translation-chip input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}

.drag-handle,
.move-translation {
  display: grid;
  width: 22px;
  height: 24px;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  color: #9c9589;
  font-size: 12px;
}

.drag-handle {
  cursor: grab;
  font-size: 16px;
  touch-action: none;
}

.move-buttons {
  display: flex;
}

.workspace {
  height: calc(100vh - 178px);
  padding: 18px 0 20px;
}

.panel-track {
  display: flex;
  height: 100%;
  gap: 16px;
  overflow-x: auto;
  overflow-anchor: none;
  padding: 0 24px;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-color: #b9b0a1 transparent;
  scrollbar-width: thin;
}

/* Snapping is a touch paging aid; desktop scrolls the track freely so
   reordering and wheel panning never yank the viewport to a panel edge. */
.panel-track.free-scroll {
  scroll-snap-type: none;
}

.bible-panel {
  display: grid;
  flex: 0 0 clamp(380px, 43vw, 650px);
  min-width: 0;
  height: 100%;
  grid-template-rows: auto 1fr auto;
  overflow: visible;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  scroll-snap-align: start;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.bible-panel.active {
  box-shadow:
    0 0 0 2px var(--accent),
    var(--shadow);
}

.translation-name {
  color: var(--translation-color);
}

.panel-header {
  /* .panel-header is an auto-sized row in .bible-panel's grid with no
     explicit column track, so it defaults to min-width: auto — letting the
     translation row's chips (which want their full, unshrunk content width)
     grow the track past the panel's own border instead of scrolling inside
     it. min-width: 0 lets the row size to the panel and hands overflow to
     the chip list's own horizontal scrollbar. */
  min-width: 0;
  padding: 15px 18px 14px;
  border-bottom: 1px solid var(--line);
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
  background: rgba(255, 255, 255, 0.78);
}

.panel-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 24px;
}

.panel-kicker,
.eyebrow {
  color: var(--warm);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.icon-button {
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
}

.icon-button:hover {
  border-color: var(--line);
  background: #f6f3ed;
}

.close-button {
  position: relative;
  font-size: 0;
}

.close-button span {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
}

.close-button span::before,
.close-button span::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 17px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  content: "";
  transform-origin: center;
}

.close-button span::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.close-button span::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.icon-only-button {
  display: grid;
  min-width: 44px;
  padding-inline: 12px;
  place-items: center;
}

.icon-only-button svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.panel-selectors {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 10px;
  margin-top: 9px;
}

.panel-selectors label > span {
  display: block;
  margin: 0 0 5px 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

select {
  width: 100%;
  height: 39px;
  padding: 0 34px 0 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  outline: none;
  background: white;
  font-size: 13px;
  font-weight: 700;
}

select:focus,
input:focus {
  border-color: #78988d;
  box-shadow: 0 0 0 3px rgba(40, 79, 67, 0.11);
}

.panel-content {
  min-height: 0;
  overflow-y: auto;
  padding: 4px 20px 28px;
  outline: none;
  overscroll-behavior: contain;
  scrollbar-color: #c1b9ad transparent;
  scrollbar-width: thin;
}

.panel-content:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(40, 79, 67, 0.3);
}

/* Hebrew/Greek is just another translation-line (see renderPanelBody in
   app.js): same stacked/columns layout as any other version, just with a
   row of word blocks instead of plain text. */
.interlinear-word-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
}

.interlinear-word {
  display: flex;
  flex-direction: column;
  padding: 2px 4px;
  border-radius: 5px;
  cursor: pointer;
}

.interlinear-word:hover {
  background: rgba(80, 78, 72, 0.07);
}

.interlinear-word.selected {
  background: var(--accent-soft);
}

/* Greek reads left-to-right and Hebrew right-to-left; each block's own text
   follows suit rather than always centering. text-align is a physical
   (not logical) property, so it stays correct regardless of the RTL dir
   inherited from the Hebrew word row -- align-items: flex-start/-end would
   flip meaning under that inherited direction and land on the wrong side. */
.interlinear-word[lang="grc"] {
  text-align: left;
}

.interlinear-word[lang="he"] {
  text-align: right;
}

.interlinear-translit {
  color: #3a8fc7;
  font-size: calc(var(--verse-font-size) - 2px);
  white-space: nowrap;
}

.interlinear-original {
  color: var(--ink);
  font-size: var(--verse-font-size);
  font-weight: 400;
  white-space: nowrap;
}

.interlinear-gloss {
  color: #c1651c;
  font-size: calc(var(--verse-font-size) - 2px);
  white-space: nowrap;
}

.chapter-heading {
  padding: 24px 2px 18px;
}

.chapter-heading h2 {
  font-family: Georgia, "Noto Serif KR", serif;
  font-size: 25px;
  letter-spacing: -0.035em;
}

.chapter-heading p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}

.verse-group {
  position: relative;
  padding: 19px 0 20px 44px;
  border-top: 1px solid #e8e3da;
  scroll-margin-top: 12px;
  /* Clearance above the floating copy/cancel buttons when a tapped verse
     near the bottom edge is scrolled into view. */
  scroll-margin-bottom: 56px;
}

.verse-number {
  position: absolute;
  top: 18px;
  left: 0;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 0;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: Georgia, serif;
  font-size: 13px;
  font-weight: 800;
}

.translation-line + .translation-line {
  margin-top: 12px;
}

.translation-label {
  display: inline-flex;
  align-items: center;
  min-width: 68px;
  margin-bottom: 4px;
  color: var(--translation-color);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.translation-label::before {
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.translation-text {
  margin: 0;
  color: #312e29;
  font-family: Georgia, "Noto Serif KR", "Batang", serif;
  font-size: 15px;
  line-height: 1.72;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.translation-line[lang="ko"] .translation-text {
  word-break: break-all;
}

.empty-translation,
.panel-message {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.panel-message {
  display: grid;
  min-height: 220px;
  padding: 24px;
  place-items: center;
  text-align: center;
}

.panel-message.error {
  color: #9a3e35;
}

.panel-footer {
  display: grid;
  min-height: 58px;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.82);
}

.chapter-nav {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
}

.chapter-nav:hover:not(:disabled) {
  border-color: var(--line);
  background: var(--accent-soft);
}

.chapter-nav:disabled {
  cursor: default;
  opacity: 0.28;
}

.next-chapter {
  justify-self: end;
}

.chapter-position {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.search-dialog {
  width: min(900px, calc(100vw - 28px));
  height: min(760px, calc(100vh - 36px));
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 19px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 28px 90px rgba(31, 27, 21, 0.3);
}

.search-dialog::backdrop {
  background: rgba(29, 27, 23, 0.5);
  backdrop-filter: blur(5px);
}

/* Matches .translation-picker-toggle's own 32x32 exactly. */
.search-form .icon-only-button {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 8px;
}

.search-shell {
  display: grid;
  height: 100%;
  grid-template-rows: auto auto auto 1fr;
  padding: 24px;
}

.search-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.search-header h2 {
  margin-top: 5px;
  font-family: Georgia, "Noto Serif KR", serif;
  font-size: 27px;
}

.search-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 9px;
  margin-top: 20px;
}

/* Matches .translation-picker-toggle's own height exactly. */
.search-input-wrap {
  display: flex;
  height: 32px;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.search-input-wrap:focus-within {
  border-color: #78988d;
  box-shadow: 0 0 0 3px rgba(40, 79, 67, 0.11);
}

.search-input-wrap input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 15px;
}

.search-meta {
  min-height: 40px;
  padding: 12px 2px 8px;
  color: var(--muted);
  font-size: 12px;
}

/* 220px matches the TSK/concordance nav columns (see .tsk-word-nav,
   .concordance-nav) -- wide enough that even the longest entry here,
   "1 Thessalonians 데살로니가전서 (66)", stays on one line. */
.search-body {
  display: grid;
  min-height: 0;
  grid-template-columns: 220px minmax(0, 1fr);
}

.search-book-list {
  min-height: 0;
  overflow-y: auto;
  padding: 8px 10px 8px 0;
  scrollbar-width: thin;
}

.search-book-link {
  display: block;
  width: 100%;
  padding: 8px 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  text-align: left;
  white-space: nowrap;
}

.search-book-link:hover,
.search-book-link[aria-current] {
  background: var(--accent-soft);
  color: var(--accent);
}

.search-results {
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}

.search-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  width: 100%;
  padding: 15px 8px;
  border: 0;
  border-bottom: 1px solid #e9e4db;
  background: transparent;
  text-align: left;
}

.search-result:hover {
  background: #f7f4ee;
}

.search-result-content {
  min-width: 0;
}

.search-result-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.search-result-action {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: #b9b0a1;
}

.search-result-action svg {
  width: 17px;
  height: 17px;
}

.search-result-action:hover {
  border-color: transparent;
  background: #f7f4ee;
  color: #9c9589;
  transform: none;
}

.search-reference {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 900;
}

/* The grammar code the concordance results append to the reference (e.g.
   "Matthew 4:13 V-AAI-3S") reads better un-bolded, so it doesn't compete
   with the reference itself. Margin (not a leading space in the text) adds
   the gap, since .search-reference's flex layout collapses a text node's
   own leading whitespace. */
.search-reference-morphology {
  margin-left: 5px;
  font-weight: 400;
}

.search-match-line {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 8px;
  color: #3d3933;
  font-family: Georgia, "Noto Serif KR", serif;
  font-size: 13px;
  line-height: 1.55;
}

.search-match-line + .search-match-line {
  margin-top: 7px;
}

.search-match-label {
  color: var(--translation-color);
  font-family: var(--font-sans, sans-serif);
  font-size: 10px;
  font-weight: 900;
}

mark {
  border-radius: 3px;
  background: #f4dfa3;
  color: inherit;
}

@media (max-width: 760px) {
  .app-header {
    height: 198px;
    padding: 14px 14px 10px;
  }

  .brand-row {
    align-items: flex-start;
    margin-bottom: 12px;
  }

  .brand-mark {
    width: 40px;
    height: 40px;
  }

  .brand h1 {
    font-size: 20px;
  }

  .brand p {
    display: none;
  }

  .header-actions .button {
    width: 43px;
    padding: 0;
    font-size: 0;
  }

  .header-actions .button span {
    font-size: 20px;
  }

  .translation-bar {
    display: block;
  }

  .translation-heading span {
    display: none;
  }

  .translation-list {
    margin-top: 7px;
  }

  .workspace {
    height: calc(100vh - 198px);
    padding: 10px 0 12px;
  }

  .panel-track {
    gap: 10px;
    padding: 0 10px;
    scroll-snap-type: x mandatory;
  }

  .bible-panel {
    flex-basis: calc(100vw - 20px);
    border-radius: 13px;
  }

  .panel-content {
    padding-right: 15px;
    padding-left: 15px;
  }

  .verse-group {
    padding-left: 39px;
  }

  .translation-text {
    font-size: 14px;
  }

  .search-shell {
    padding: 18px 15px;
  }

  .search-form {
    grid-template-columns: 1fr;
  }

  .search-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .search-book-list {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 4px;
    padding: 6px 0;
    border-right: 0;
  }

  .search-book-link {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
  }
}

/* Smaller top controls and contextual copy action */
.app-header {
  height: 52px;
  padding: 7px 12px;
}

.workspace {
  height: calc(100vh - 52px);
  padding-top: 7px;
}

.compact-toolbar {
  gap: var(--toolbar-icon-gap);
}

.translation-list {
  gap: 5px;
}

.translation-chip {
  min-height: 32px;
  gap: 4px;
  padding-inline: 4px;
  border-radius: 8px;
}

.translation-chip label {
  gap: 5px;
  font-size: 10px;
}

.translation-chip input {
  width: 14px;
  height: 14px;
}

.drag-handle,
.move-translation {
  width: 18px;
  height: 20px;
}

.header-actions {
  gap: var(--toolbar-icon-gap);
}

.header-actions .button {
  min-height: 32px;
  padding-inline: 11px;
  border-radius: 8px;
  font-size: 11px;
}

.font-size-control {
  height: 32px;
  gap: var(--toolbar-icon-gap);
  padding: 0 4px;
  border-radius: 8px;
}

.font-size-control button {
  display: grid;
  min-width: 29px;
  height: 26px;
  padding: 0 5px;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #221f1a;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}

.font-size-control button svg {
  display: block;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

.font-size-control button:hover:not(:disabled) {
  background: var(--accent-soft);
}

.font-size-control button:disabled {
  opacity: 0.28;
}

.font-size-control output {
  min-width: 17px;
  font-size: 10px;
  text-align: center;
}

.panel-selectors {
  grid-template-columns: minmax(180px, 1fr) 74px 32px;
}

.panel-selectors .remove-panel {
  width: 32px;
  height: 32px;
}

.remove-panel svg,
.copy-selection svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.remove-panel:disabled {
  cursor: default;
  opacity: 0.26;
}

.copy-selection {
  display: grid;
  width: 36px;
  height: 34px;
  padding: 0;
  place-items: center;
  border: 1px solid #78988d;
  border-radius: 8px;
  background: var(--accent);
  color: white;
  box-shadow: 0 5px 14px rgba(40, 79, 67, 0.22);
}

.copy-selection:hover {
  background: var(--accent-hover);
}

.copy-header {
  align-items: center;
  margin-bottom: 12px;
}

.copy-header p {
  margin-top: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.copy-translation-option {
  gap: 5px;
  padding: 0 4px;
}

.copy-translation-option.dragging {
  opacity: 0.45;
}

.copy-translation-option label {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.copy-drag-handle {
  color: #9c9589;
  cursor: grab;
  font-size: 14px;
  touch-action: none;
}

.copy-move-buttons {
  display: flex;
}

.copy-move-buttons button {
  display: grid;
  width: 19px;
  height: 22px;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--muted);
}

.copy-move-buttons button:hover:not(:disabled) {
  color: var(--accent);
}

.copy-move-buttons button:disabled {
  opacity: 0.25;
}

.copy-order-option {
  align-items: center;
}

.translation-text {
  font-size: var(--verse-font-size);
}

@media (max-width: 760px) {
  .app-header {
    height: 48px;
    padding: 5px 6px;
  }

  .workspace {
    height: calc(100vh - 48px);
    padding-top: 5px;
  }

  .font-size-control {
    padding-inline: 2px;
  }

  .font-size-control button {
    min-width: 25px;
    padding-inline: 3px;
  }

  .font-size-control output {
    display: none;
  }

  .panel-selectors {
    grid-template-columns: minmax(135px, 1fr) 62px 32px;
  }
}

.translation-text {
  font-size: var(--verse-font-size);
}

.font-size-control {
  display: flex;
  flex: 0 0 auto;
  height: 36px;
  align-items: center;
  gap: var(--toolbar-icon-gap);
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: white;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.font-size-control input {
  width: 88px;
  accent-color: var(--accent);
  cursor: pointer;
}

.font-size-control output {
  min-width: 18px;
  color: var(--ink);
  font-size: 11px;
  text-align: right;
}

.panel-selectors {
  grid-template-columns: minmax(180px, 1fr) 74px 32px 32px;
}

.panel-selectors .copy-verses,
.panel-selectors .remove-panel {
  width: 32px;
  height: 36px;
}

.copy-verses svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.copy-verses:disabled {
  cursor: default;
  opacity: 0.3;
}

.translation-label::before {
  display: none;
}

.translation-text {
  font-size: var(--verse-font-size);
}

.verse-group {
  margin-inline: -6px;
  padding-right: 6px;
  padding-left: 44px;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 120ms ease;
}

.verse-group:hover {
  background: rgba(80, 78, 72, 0.055);
}

/* Touch devices simulate :hover on tap (and it can stick until the next
   tap elsewhere), which otherwise tints a verse's background just from
   tapping an interlinear word inside it to open the dictionary -- an
   unrelated action that shouldn't visually mark the verse itself. */
@media (hover: none) and (pointer: coarse) {
  .verse-group:hover {
    background: transparent;
  }
}

.verse-group.selected,
.verse-group.selected:hover {
  background: #deded9;
}

.verse-number {
  left: 6px;
}

.panel-resize-handle {
  position: absolute;
  top: 0;
  right: -8px;
  bottom: 0;
  z-index: 25;
  width: 8px;
  cursor: col-resize;
  touch-action: none;
}

.panel-resize-handle::after {
  position: absolute;
  top: 45%;
  right: 3px;
  width: 2px;
  height: 42px;
  border-radius: 2px;
  background: transparent;
  content: "";
  transition: background-color 120ms ease;
}

.panel-resize-handle:hover::after,
.resizing-panel .panel-resize-handle::after {
  background: #8ba59c;
}

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

.reordering-chip,
.reordering-chip * {
  user-select: none !important;
}

/* A removed panel collapses to zero width so its right-hand neighbors
   glide over to fill the gap in one continuous motion; the negative margin
   swallows the track gap the panel leaves behind. */
.bible-panel.panel-removing {
  z-index: 2;
  min-width: 0 !important;
  margin-inline-end: calc(var(--removed-gap, 0px) * -1);
  overflow: hidden !important;
  opacity: 0;
  pointer-events: none;
  transition:
    flex-basis 300ms ease,
    width 300ms ease,
    margin-inline-end 300ms ease,
    opacity 220ms ease;
}

/* Freeze the panel's contents at their pre-collapse width so text is
   clipped from the right instead of reflowing while the panel shrinks. */
.bible-panel.panel-removing > * {
  width: var(--removed-width, auto);
}

/* Scroll snapping fights the shrinking layout mid-removal, and during a
   badge drag it chases the dragged panel's transform, scrolling the track
   out from under the pointer. */
.panel-track.removing-panel {
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.translation-chip.drag-over,
.copy-translation-option.drag-over {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.copy-dialog {
  width: min(470px, calc(100vw - 28px));
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 24px 70px rgba(31, 27, 21, 0.28);
}

.copy-dialog::backdrop {
  background: rgba(29, 27, 23, 0.45);
  backdrop-filter: blur(4px);
}

.copy-shell {
  padding: 20px;
}

.copy-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.copy-header h2 {
  font-family: Georgia, "Noto Serif KR", serif;
  font-size: 21px;
}

.copy-header p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.copy-dialog fieldset {
  /* Browsers give <fieldset> an intrinsic min-width: min-content, which
     refuses to shrink below the versions row's full unwrapped width and
     pushes it past the dialog's edge instead of letting it scroll inside.
     min-width: 0 opts back into normal shrink-to-fit sizing. */
  min-width: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.copy-dialog fieldset + fieldset {
  margin-top: 10px;
}

.copy-dialog legend {
  display: none;
}

.copy-translation-options {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.copy-translation-option {
  display: flex;
  min-height: 32px;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  font-size: 11px;
  font-weight: 800;
}

.copy-translation-option input,
.copy-order-option input {
  accent-color: var(--accent);
}

.copy-order-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 3px;
}

.copy-order-option + .copy-order-option {
  border-top: 1px solid #eee9e0;
}

.copy-order-option span,
.copy-order-option strong,
.copy-order-option small {
  display: block;
}

.copy-order-option strong {
  font-size: 12px;
}

.copy-order-option small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.copy-actions {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.copy-status {
  position: absolute;
  left: 0;
  margin-right: 0;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
}

#confirm-copy {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-color: var(--line-strong);
  background: white;
  box-shadow: none;
  color: var(--ink);
}

#confirm-copy:hover {
  border-color: #9d968b;
  background: #f8f6f1;
  color: var(--ink);
  transform: none;
}

/* Strong's / Englishman's / TSK popups: same compact-dialog chrome as
   .copy-dialog, with a scrollable body for content whose length varies a
   lot (a handful of cross-references vs. thousands of occurrences). */
.lookup-dialog {
  width: min(520px, calc(100vw - 28px));
  max-height: min(640px, calc(100vh - 36px));
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 24px 70px rgba(31, 27, 21, 0.28);
}

.lookup-dialog::backdrop {
  background: rgba(29, 27, 23, 0.45);
  backdrop-filter: blur(4px);
}

.lookup-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: min(640px, calc(100vh - 36px));
  padding: 20px;
}

.lookup-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.lookup-header h2 {
  min-width: 0;
  overflow-wrap: break-word;
  font-family: Georgia, "Noto Serif KR", serif;
  font-size: 19px;
}

.lookup-header-title {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 6px;
}

.biblehub-link svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

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

.lookup-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

/* Same auto/1fr split as .lookup-shell's own grid (its two children here
   are .word-dictionary-fields and .word-concordance) -- this is what
   actually lets the concordance section grow to fill the rest of the
   dialog's height, rather than being cut off at a fixed height partway
   down. Nested flexbox flex-grow/shrink was tried here first, but a flex
   item that's itself a flex container doesn't reliably pass its own
   shrunk size down to its children in every browser; grid's track sizing
   doesn't have that ambiguity. */
#strongs-dialog-body {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

/* Label/value side by side on one row instead of stacked, so the Strong's
   fields don't take up more height than necessary (they used to crowd the
   concordance list below out of view). */
.lookup-entry {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 10px;
  align-items: baseline;
}

.lookup-entry + .lookup-entry {
  margin-top: 8px;
}

.lookup-label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lookup-value {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
}

.lookup-strongs-link {
  border: 0;
  padding: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  text-decoration: underline;
}

.lookup-strongs-link:hover {
  color: var(--ink);
}

.lookup-empty {
  padding: 20px 0;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

/* TSK and the merged dictionary dialog match the search dialog's own width
   exactly (see JS: openTskDialog/openStrongsDialog/openSearch also sync
   their height to the active panel's live height, so all three end up the
   same size as each other and as the panel itself). */
.tsk-dialog,
.word-dictionary-dialog {
  width: min(900px, calc(100vw - 28px));
  max-height: min(760px, calc(100vh - 36px));
}

.word-dictionary-shell {
  max-height: min(760px, calc(100vh - 36px));
}

/* .lookup-shell's base grid only accounts for a header + one flexible body
   row; the TSK shell has three more fixed-height rows in between (the
   book/chapter/verse selectors, the translation picker, the verse text)
   before the cross-reference list gets the remaining, scrollable space. */
.tsk-dialog-shell {
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  max-height: min(760px, calc(100vh - 36px));
}

.tsk-dialog-header {
  justify-content: flex-end;
}

.tsk-selectors {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.tsk-selectors .book-selector {
  flex: 1 1 auto;
  min-width: 0;
}

.tsk-selectors .chapter-selector,
.tsk-selectors .verse-selector {
  flex: 0 0 60px;
}

#tsk-translation-controls {
  margin-bottom: 14px;
}

.tsk-verse-text {
  margin-bottom: 14px;
}

.tsk-verse-line + .tsk-verse-line {
  margin-top: 6px;
}

.tsk-verse-line .translation-label {
  margin-left: 8px;
}

/* TSK anchors and concordance-highlighted words are both KJV words that a
   cross-reference/occurrence list is attached to. */
.tsk-anchor,
.concordance-highlight {
  color: #c1651c;
  font-style: italic;
}

.tsk-anchor-section + .tsk-anchor-section {
  margin-top: 10px;
}

.tsk-anchor-heading {
  margin-bottom: 8px;
  color: #c1651c;
  font-size: 13px;
  font-style: italic;
  font-weight: 800;
}

/* Word-search-style master/detail layout, shared by the TSK cross-reference
   list (grouped by anchor word) and the Englishman's concordance results
   (grouped by book): a narrow nav column of items with their counts, and a
   wider scrollable column of the actual verse results. */
.tsk-results,
.concordance-results {
  display: flex;
  gap: 14px;
}

/* TSK sits in its own fixed grid row (see .tsk-dialog-shell), so it needs
   height:100% to fill it; the concordance section instead flex-grows to
   fill whatever's left after the Strong's fields (see .word-concordance,
   .concordance-results below), so an explicit height here would conflict
   with that flex-basis. */
.tsk-results {
  height: 100%;
}

/* 220px matches the search dialog's own book-list column (see
   .search-body) -- wide enough for its longest entry, "1 Thessalonians
   데살로니가전서 (66)", English and Korean book name plus a count, which is
   the widest content any of these three left-nav columns has to fit. */
.tsk-word-nav,
.concordance-nav {
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow-y: auto;
  padding-right: 10px;
}

.tsk-word-nav-item,
.concordance-nav-item {
  padding: 7px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  text-align: left;
}

.concordance-nav-item {
  white-space: nowrap;
}

/* Some TSK anchors are whole phrases or clauses (e.g. Acts 8:8, where every
   word in the verse is anchored) rather than a single word, so this can't
   stay on one line without running off the edge of its column -- let it
   wrap instead. */
.tsk-word-nav-item {
  font-size: 12.5px;
  white-space: normal;
}

.concordance-nav-item {
  font-size: 11px;
}

.tsk-word-nav-item:hover,
.concordance-nav-item:hover {
  background: #f7f4ee;
}

.tsk-word-nav-word {
  color: #c1651c;
  font-style: italic;
}

/* Plain style, matching the search dialog's own book-list text exactly
   (not the orange/italic treatment TSK's anchor words get). */
.concordance-nav-name {
  color: var(--muted);
  font-style: normal;
}

.tsk-anchor-list,
.concordance-list {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
}

.concordance-group + .concordance-group {
  margin-top: 10px;
}

/* Fills the #strongs-dialog-body grid's second (1fr) row, and is itself an
   auto/1fr grid (mode toggle, then results) for the same reason -- see
   that rule for why grid rows are used here instead of flex-grow. */
.word-concordance {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  margin-top: 16px;
}

/* Concordance results only ever show one version (KJV), so the label
   column doesn't need the wider 68px reservation the multi-version search/
   TSK results use -- a snug column keeps the label close to the text. */
.concordance-list .search-match-line {
  grid-template-columns: 34px minmax(0, 1fr);
}

.concordance-mode-control {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.concordance-mode-button {
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: white;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
}

.concordance-mode-button:hover {
  border-color: #9d968b;
  color: var(--ink);
}

.concordance-mode-button.selected {
  border-color: transparent;
  background: var(--accent-soft);
  color: var(--accent);
}

.concordance-mode-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Fills .word-concordance's second (1fr) grid row -- this wrapper (not
   .concordance-results itself, which is re-created on every mode toggle)
   is the actual grid item, so it's what needs min-height:0 + overflow to
   stop growing past the track to fit its content instead of respecting it;
   .concordance-results's own children already scroll internally. */
.concordance-results-slot {
  min-height: 0;
  overflow: hidden;
}

.concordance-results {
  height: 100%;
}

@media (max-width: 760px) {
  .lookup-dialog {
    width: calc(100vw - 12px);
    max-width: none;
    max-height: calc(100dvh - 12px);
    margin: auto;
  }

  .lookup-shell {
    max-height: calc(100dvh - 14px);
    padding: 16px;
  }

  .tsk-dialog,
  .tsk-dialog-shell {
    max-height: calc(100dvh - 12px);
  }

  /* TSK: the word-nav row stays fixed in place (never scrolls) beside its
     own independently-scrolling results list -- just stacked instead of
     side by side, so height:100% (from the base rule) still applies. The
     14px gap (meant for the side-by-side desktop layout) is dropped here
     since the nav row's own border-bottom is the only separator wanted
     between it and the list below. */
  .tsk-results {
    flex-direction: column;
    gap: 0;
  }

  .tsk-word-nav,
  .concordance-nav {
    flex: 0 0 auto;
    flex-direction: row;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding-right: 0;
    padding-bottom: 8px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    scrollbar-width: none;
  }

  .tsk-word-nav::-webkit-scrollbar,
  .concordance-nav::-webkit-scrollbar {
    display: none;
  }

  .tsk-word-nav-item,
  .concordance-nav-item {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* Word dictionary: unlike TSK, the whole page (Strong's fields, mode
     toggle, book-name nav row, and results) scrolls as one continuous flow
     -- the nav row scrolls with everything else until it reaches the top,
     then sticks there while the results keep scrolling underneath it. Both
     grids collapse their 1fr row back to auto so nothing is forced to fill
     (and independently scroll within) a fixed height anymore -- so this
     needs to be the one scrolling container again, unlike on desktop where
     only .concordance-list scrolls internally. */
  #strongs-dialog-body {
    grid-template-rows: auto auto;
    overflow-y: auto;
  }

  .word-concordance {
    grid-template-rows: auto auto;
    height: auto;
  }

  .concordance-results-slot {
    min-height: auto;
    overflow: visible;
  }

  .concordance-results {
    height: auto;
    flex-direction: column;
    gap: 0;
  }

  .concordance-list {
    overflow-y: visible;
  }

  .concordance-nav {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface);
  }
}

@media (max-width: 760px) {
  .font-size-control {
    padding-inline: 7px;
  }

  .font-size-control input {
    width: 58px;
  }

  .font-size-control output {
    display: none;
  }

  .panel-selectors {
    grid-template-columns: minmax(130px, 1fr) 60px 32px 32px;
  }

  .panel-resize-handle {
    display: none;
  }

  .verse-group {
    padding-left: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* Compact reader UI */
.app-header {
  height: 64px;
  padding: 10px 18px;
}

.compact-toolbar {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  gap: var(--toolbar-icon-gap);
}

/* Only the brand sits on the left; everything else (panel count, font
   size, actions) clusters together on the right, now that the per-panel
   translation controls no longer occupy the middle flexible space that
   used to separate them. */
.compact-toolbar .panel-count-control {
  margin-left: auto;
}

.compact-toolbar .translation-controls {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  gap: var(--toolbar-icon-gap);
}

.compact-toolbar .translation-list {
  flex: 1 1 auto;
  min-width: 0;
}

.translation-chip {
  min-height: 36px;
  padding: 0 6px;
}

.workspace {
  height: calc(100vh - 64px);
  padding: 10px 0 12px;
}

.panel-track {
  gap: 10px;
  padding-inline: 12px;
}

.bible-panel {
  position: relative;
  flex-basis: clamp(350px, 40vw, 610px);
  grid-template-rows: auto 1fr;
  border-radius: 12px;
}

.panel-header {
  position: relative;
  z-index: 8;
  padding: 8px 10px;
}

.panel-selectors {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 74px 32px;
  gap: 6px;
  margin: 0;
}

.combo {
  position: relative;
  min-width: 0;
}

.combo-input {
  width: 100%;
  height: 32px;
  padding: 0 20px 0 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: none;
  background: white;
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.combo-input:focus {
  cursor: text;
}

/* A small triangle marks the box as a dropdown. It is decoration only:
   pointer-events pass straight through to the input underneath. */
.combo::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 9px;
  width: 0;
  height: 0;
  margin-top: -2px;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  border-top: 5px solid var(--muted);
  pointer-events: none;
}

.combo-menu {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  left: 0;
  z-index: 30;
  max-height: 418px;
  overflow-y: auto;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: white;
  box-shadow: 0 14px 36px rgba(40, 35, 27, 0.18);
  scrollbar-width: thin;
}

.book-combo .combo-menu {
  min-width: 250px;
}

.chapter-combo .combo-menu,
.verse-combo .combo-menu {
  left: auto;
  display: grid;
  width: min(270px, calc(100vw - 24px));
  grid-template-columns: repeat(5, minmax(0, 1fr));
  max-height: 418px;
}

.chapter-combo .combo-option,
.verse-combo .combo-option {
  text-align: center;
}

.combo-option {
  display: block;
  width: 100%;
  min-height: 34px;
  padding: 6px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-size: 12px;
  text-align: left;
}

.combo-menu-heading {
  display: flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  line-height: 1.1;
  pointer-events: none;
  text-transform: uppercase;
  user-select: none;
}

.chapter-combo .combo-menu-heading,
.verse-combo .combo-menu-heading {
  grid-column: 1 / -1;
}

.combo-option:hover,
.combo-option.highlighted {
  background: var(--accent-soft);
  color: var(--accent);
}

.combo-option[aria-selected="true"] {
  font-weight: 800;
}

.combo-empty {
  padding: 12px 8px;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.panel-selectors .remove-panel {
  width: 32px;
  height: 36px;
  font-size: 19px;
}

.panel-content {
  padding: 0 14px 18px;
}

.verse-group {
  padding: 10px 0 11px 38px;
  scroll-margin-top: 8px;
}

.verse-group:first-child {
  border-top: 0;
}

.verse-number {
  top: 10px;
  width: 26px;
  height: 26px;
  border-radius: 0;
  font-size: 12px;
}

.translation-line {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  align-items: start;
  gap: 6px;
}

.translation-line + .translation-line {
  margin-top: 3px;
}

.translation-label {
  min-width: 0;
  margin: 3px 0 0;
  font-size: 9px;
  line-height: 1.4;
}

.translation-label::before {
  width: 5px;
  height: 5px;
  margin-right: 5px;
}

.translation-text {
  font-size: 14px;
  line-height: 1.48;
}

.chapter-nav {
  position: absolute;
  bottom: 10px;
  z-index: 7;
  display: grid;
  width: 34px;
  min-height: 34px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--accent);
  box-shadow: 0 5px 14px rgba(40, 35, 27, 0.12);
  font-size: 17px;
  backdrop-filter: blur(6px);
}

.previous-chapter {
  left: 10px;
}

.next-chapter {
  right: 10px;
}

.chapter-nav:hover:not(:disabled) {
  border-color: #8ba59c;
  background: var(--accent-soft);
}

.search-header h2 {
  margin-top: 0;
}

@media (max-width: 760px) {
  .app-header {
    height: 58px;
    padding: 7px 8px;
  }

  .compact-toolbar {
    gap: 6px;
  }

  .compact-toolbar .translation-list {
    margin-top: 0;
  }

  .translation-chip {
    min-height: 34px;
  }

  .workspace {
    height: calc(100vh - 58px);
    padding: 7px 0 8px;
  }

  .panel-track {
    padding-inline: 7px;
  }

  .bible-panel {
    flex-basis: calc(100vw - 14px);
  }

  .panel-selectors {
    grid-template-columns: minmax(150px, 1fr) 66px 32px;
  }

  .panel-content {
    padding-inline: 11px;
  }

  .verse-group {
    padding-left: 36px;
  }

  .translation-line {
    grid-template-columns: 55px minmax(0, 1fr);
    gap: 4px;
  }

  .translation-text {
    font-size: 13px;
  }
}

/* Final compact toolbar overrides */
body,
body * {
  font-family: "Segoe UI", "Malgun Gothic", sans-serif !important;
}

[lang="ko"] {
  font-family: "Malgun Gothic", sans-serif !important;
}

[lang="en"] {
  font-family: "Segoe UI", sans-serif !important;
}

[lang="zh"] {
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif !important;
}

:lang(ko) {
  font-family: "Malgun Gothic", sans-serif !important;
}

:lang(en) {
  font-family: "Segoe UI", sans-serif !important;
}

:lang(zh) {
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif !important;
}

.site-brand {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 8px;
}

.site-brand:hover {
  opacity: 0.85;
}

.site-brand:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.site-cross {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 7px;
  background: var(--accent);
  color: white;
}

.site-cross svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2.2;
}

.panel-selectors {
  grid-template-columns: minmax(150px, 1fr) 128px 32px;
}

.selector-control {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
}

.selector-label {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.selector-control .combo {
  flex: 1 1 auto;
}

.remove-panel {
  font-size: 21px !important;
  line-height: 1;
}

.verse-group {
  padding-left: 32px;
}

.verse-number {
  top: 11px;
  left: 8px;
  display: block;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.translation-line {
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 4px;
}

.translation-label {
  margin-top: 2px;
}

.copy-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.copy-header p {
  margin-top: 3px;
}

.translation-text {
  font-size: var(--verse-font-size);
}

.app-header {
  height: 52px;
  padding: 7px 12px;
}

.workspace {
  height: calc(100vh - 52px);
  padding-top: 7px;
}

.compact-toolbar {
  gap: var(--toolbar-icon-gap);
}

.translation-list {
  gap: 5px;
}

.translation-chip {
  min-height: 32px;
  gap: 4px;
  padding-inline: 4px;
  border-radius: 8px;
}

.translation-chip label {
  gap: 5px;
  font-size: 10px;
}

.translation-chip input {
  width: 14px;
  height: 14px;
}

.drag-handle,
.move-translation {
  width: 18px;
  height: 20px;
}

.header-actions {
  gap: var(--toolbar-icon-gap);
}

.header-actions .button {
  min-height: 32px;
  padding-inline: 11px;
  border-radius: 8px;
  font-size: 11px;
}

.font-size-control {
  height: 32px;
  gap: var(--toolbar-icon-gap);
  padding: 0 4px;
  border-radius: 8px;
}

.font-size-control button {
  display: grid;
  min-width: 29px;
  height: 26px;
  padding: 0 5px;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #221f1a;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}

.font-size-control button svg {
  display: block;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

.font-size-control button:hover:not(:disabled) {
  background: var(--accent-soft);
}

.font-size-control button:disabled {
  opacity: 0.28;
}

.font-size-control output {
  display: block;
  min-width: 17px;
  font-size: 10px;
  text-align: center;
}

.copy-header {
  align-items: center;
  margin-bottom: 12px;
}

.copy-header p {
  margin-top: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.copy-translation-option {
  gap: 5px;
  padding: 0 4px;
  font-weight: 400;
}

.copy-translation-option label {
  font-weight: 400;
}

.panel-track {
  padding-block: 2px;
}

.panel-header {
  border-radius: 11px 11px 0 0;
}

.translation-line {
  grid-template-columns: 42px minmax(0, 1fr);
}

.copy-order-option {
  align-items: center;
}

@media (max-width: 760px) {
  .app-header {
    height: 48px;
    padding: 5px 6px;
  }

  .workspace {
    height: calc(100vh - 48px);
    padding-top: 5px;
  }

  .font-size-control {
    padding-inline: 2px;
  }

  .font-size-control button {
    min-width: 25px;
    padding-inline: 3px;
  }

  .font-size-control output {
    display: none;
  }

  .panel-selectors {
    grid-template-columns: minmax(135px, 1fr) 105px 30px;
    gap: 4px;
  }

  .site-brand > span:last-child {
    display: inline;
    font-size: 11px;
  }

  .site-cross {
    width: 25px;
    height: 25px;
  }

  .selector-label {
    font-size: 9px;
  }
}

/* Panel header controls stay inside the panel at every resizable width. */
.panel-selectors {
  grid-template-columns: 30px minmax(90px, 1fr) 28px minmax(82px, 104px) 28px;
  gap: 4px;
}

.panel-selectors .remove-panel {
  width: 30px;
  height: 32px;
}

.panel-selectors .chapter-nav {
  position: static;
  display: grid;
  width: 28px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  place-items: center;
  justify-self: stretch;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: var(--accent);
  box-shadow: none;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  backdrop-filter: none;
}

.panel-selectors .previous-chapter,
.panel-selectors .next-chapter {
  right: auto;
  left: auto;
}

.panel-selectors .chapter-nav svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

/* Mobile and tablet reading experience */
@media (max-width: 820px), (max-width: 1366px) and (any-pointer: coarse) {
  html,
  body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }

  button,
  input,
  label {
    -webkit-tap-highlight-color: transparent;
  }

  .app-header {
    height: calc(46px + env(safe-area-inset-top));
    padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) 5px
      max(6px, env(safe-area-inset-left));
  }

  .compact-toolbar {
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    grid-template-rows: 34px;
    grid-template-areas: "brand . view font actions";
    align-items: center;
    gap: var(--toolbar-icon-gap);
  }

  .site-brand {
    grid-area: brand;
  }

  .site-brand > span:last-child {
    display: inline;
    font-size: 11px;
  }

  /* The script adds this class only when the top row would otherwise
     overlap the brand text (see updateBrandLabelVisibility). */
  body.brand-label-hidden .site-brand > span:last-child {
    display: none;
  }

  .site-cross {
    width: 28px;
    height: 28px;
  }

  .translation-chip {
    min-height: 32px;
    scroll-snap-align: start;
  }

  .panel-track::-webkit-scrollbar {
    display: none;
  }

  .font-size-control {
    grid-area: font;
    justify-self: end;
    height: 32px;
    padding-inline: 2px;
  }

  .font-size-control button {
    min-width: 30px;
    height: 30px;
    padding: 0;
    font-size: 16px;
  }

  .font-size-control output {
    display: block;
    min-width: 18px;
  }

  .header-actions {
    grid-area: actions;
    gap: var(--toolbar-icon-gap);
  }

  .workspace {
    height: calc(100vh - 46px - env(safe-area-inset-top));
    height: calc(100dvh - 46px - env(safe-area-inset-top));
    padding: 5px 0 max(6px, env(safe-area-inset-bottom));
  }

  .panel-track {
    height: 100%;
    gap: 8px;
    padding: 2px 6px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .bible-panel {
    height: 100%;
    touch-action: pan-y pinch-zoom;
  }

  .panel-header {
    padding: 6px;
  }

  .panel-selectors {
    grid-template-columns: 30px minmax(98px, 1fr) 30px minmax(90px, 104px) 30px;
    grid-template-areas: none;
    gap: 4px;
  }

  .panel-selectors .remove-panel,
  .book-selector,
  .panel-selectors .previous-chapter,
  .chapter-selector,
  .panel-selectors .next-chapter {
    grid-area: auto;
  }

  .panel-selectors .remove-panel,
  .panel-selectors .chapter-nav {
    width: 30px;
    height: 32px;
    min-height: 32px;
  }

  .selector-label {
    font-size: 9px;
  }

  .combo,
  .combo-input {
    min-width: 0;
  }

  .combo-input {
    height: 32px;
    padding: 0 16px 0 7px;
    font-size: 15px;
  }

  .selector-separator {
    height: 32px;
  }

  .combo::after {
    right: 7px;
  }

  .combo-menu {
    max-height: min(418px, 72dvh);
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  .combo-option {
    min-height: 34px;
    padding: 5px 8px;
    line-height: 1.2;
  }

  .book-combo .combo-menu {
    width: min(260px, calc(100vw - 24px));
    min-width: 0;
  }

  .combo-option {
    min-height: 34px;
    padding: 5px 8px;
  }

  .panel-content {
    padding: 0 10px 64px;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    touch-action: pan-y pinch-zoom;
    -webkit-overflow-scrolling: touch;
  }

  .swiping-panels .panel-content {
    user-select: none;
  }

  .swiping-panels .bible-panel {
    user-select: none;
  }

  .verse-group {
    padding: 9px 0 10px 30px;
    scroll-margin-top: 6px;
    scroll-margin-bottom: 68px;
  }

  .verse-number {
    top: 10px;
    left: 7px;
  }

  .translation-line {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 4px;
  }

  .translation-text {
    font-size: var(--verse-font-size);
    line-height: 1.5;
  }

  .copy-selection {
    width: 44px;
    height: 44px;
  }

  .panel-resize-handle {
    display: none;
  }

  .search-dialog,
  .tsk-dialog,
  .word-dictionary-dialog {
    inset: 0;
    width: 100vw;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  .lookup-shell {
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right))
      max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }

  .search-shell {
    grid-template-rows: auto auto auto minmax(0, 1fr);
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right))
      max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }

  .search-header {
    align-items: center;
  }

  .search-header h2 {
    font-size: 20px;
  }

  .search-header .icon-button {
    width: 44px;
    height: 44px;
  }

  .search-form {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    margin-top: 10px;
  }

  .search-input-wrap {
    height: 32px;
    padding-inline: 10px;
  }

  .search-input-wrap input {
    min-width: 0;
    font-size: 16px;
  }

  .search-form .button {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
  }

  .search-meta {
    min-height: 32px;
    padding: 8px 2px 6px;
  }

  .search-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .search-book-list {
    display: flex;
    max-height: 50px;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 4px;
    padding: 5px 0;
    border-bottom: 1px solid var(--line);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .search-book-list::-webkit-scrollbar {
    display: none;
  }

  .search-book-link {
    flex: 0 0 auto;
    width: auto;
    min-height: 40px;
    padding: 7px 10px;
    white-space: nowrap;
  }

  .search-results {
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  .search-result {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    padding: 12px 6px;
  }

  .search-result-actions {
    gap: 5px;
  }

  .search-result-action {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
  }

  .search-match-line {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 6px;
    font-size: 13px;
  }

  .copy-dialog {
    width: calc(100vw - 12px);
    max-width: none;
    max-height: calc(100dvh - 12px);
    margin: auto;
    border-radius: 14px;
  }

  .copy-shell {
    max-height: calc(100dvh - 14px);
    overflow-y: auto;
    padding: 16px;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  .copy-header .icon-button {
    width: 44px;
    height: 44px;
  }

  .copy-translation-options {
    display: grid;
    grid-template-columns: 1fr;
  }

  .copy-translation-option {
    width: 100%;
    min-height: 44px;
    padding: 2px 5px;
  }

  .copy-translation-option label {
    flex: 1 1 auto;
  }

  .copy-translation-option input,
  .copy-order-option input {
    width: 18px;
    height: 18px;
  }

  .copy-move-buttons button {
    width: 34px;
    height: 38px;
  }

  .copy-order-option {
    min-height: 44px;
    align-items: center;
  }

  .copy-actions .button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }
}

@media (max-width: 820px) and (orientation: landscape),
  (min-width: 600px) and (max-width: 1366px) and (any-pointer: coarse) {
  .copy-dialog {
    width: min(470px, calc(100vw - 56px));
    max-width: min(470px, calc(100vw - 56px));
  }
}

@media (max-width: 340px) {
  .panel-selectors {
    grid-template-columns: 30px minmax(84px, 1fr) 30px 68px 30px;
    gap: 3px;
  }

  .panel-selectors .remove-panel,
  .panel-selectors .chapter-nav {
    width: 30px;
  }

  .selector-control {
    gap: 3px;
  }

  .selector-label {
    display: none;
  }
}

@media (hover: none) and (pointer: coarse) {
  .button:hover {
    transform: none;
  }
}

/* Translation selectors use the full chip as their selection control. */
.translation-chip {
  cursor: pointer;
}

.copy-translation-option.selected {
  border-color: var(--line);
  background: white;
  box-shadow: none;
}

.translation-chip:focus-visible,
.copy-translation-option:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.copy-translation-option {
  cursor: pointer;
}

.copy-check {
  position: relative;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: white;
}

.copy-translation-option.selected .copy-check {
  border-color: var(--line-strong);
  background: white;
}

.copy-translation-option.selected .copy-check::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 0;
  width: 5px;
  height: 8px;
  border-right: 2px solid #424242;
  border-bottom: 2px solid #424242;
  transform: rotate(45deg);
}

.copy-translation-name {
  flex: 1 1 auto;
  color: var(--translation-color);
  font-weight: 400;
  white-space: nowrap;
}

/* Phones in portrait keep full-width panels by default, but horizontal
   dragging stays continuous instead of snapping one panel per swipe. */
@media (orientation: portrait) and (max-width: 599px) {
  .panel-track {
    scroll-snap-type: none;
  }

  .bible-panel {
    flex: 0 0 calc(100vw - 12px);
    flex-basis: calc(100vw - 12px) !important;
    width: calc(100vw - 12px);
  }

  .panel-count-control {
    display: none !important;
  }
}

/* Phones in landscape and tablets run the exact desktop panel mechanism:
   pixel widths from the 1/2/fit presets and free continuous scrolling.
   Horizontal drags are driven by the swipe handler (touch-action pan-y
   keeps that axis cancelable), which pans the track with momentum. */
@media (orientation: landscape) and (max-width: 1366px) and (any-pointer: coarse),
  (min-width: 600px) and (max-width: 1366px) and (any-pointer: coarse) {
  .panel-track {
    scroll-snap-type: none;
  }
}

/* Stable left-to-right panel numbering beside the close control. */
.panel-selectors {
  grid-template-columns: 30px 26px minmax(72px, 1fr) 28px minmax(54px, 64px) 8px minmax(54px, 64px) 28px;
}

.selector-separator {
  display: grid;
  height: 32px;
  place-items: center;
  color: var(--muted);
  font-size: 15px;
  font-weight: 800;
}

.panel-number {
  display: grid;
  width: 26px;
  height: 26px;
  align-self: center;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #f6f1e7;
  color: #7a4f28;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  user-select: none;
  cursor: grab;
  touch-action: none;
}

.panel-number.dragging {
  border-color: #a7c9b8;
  background: var(--accent-soft);
  color: var(--accent);
  cursor: grabbing;
}

/* The panel being dragged by its number badge follows the pointer. */
.bible-panel.panel-dragging {
  z-index: 6;
  opacity: 0.88;
  transition: none;
}

.bible-panel.drop-target {
  outline: 2px dashed var(--accent);
  outline-offset: 3px;
}

.panel-track {
  overflow-anchor: none;
}

@media (max-width: 820px), (max-width: 1366px) and (any-pointer: coarse) {
  .panel-selectors {
    grid-template-columns: 30px 24px minmax(62px, 1fr) 30px minmax(52px, 64px) 7px minmax(52px, 64px) 30px;
    gap: 4px;
  }

  /* Portrait shows one panel per screen, so badge-drag reordering is off
     (the script ignores the gesture); touch-action stays "none" so a swipe
     starting on the badge cannot become a browser back-navigation. */
  .panel-number {
    width: 24px;
    height: 24px;
    cursor: default;
  }
}

@media (max-width: 340px) {
  .panel-selectors {
    grid-template-columns: 28px 20px minmax(52px, 1fr) 26px 48px 6px 48px 26px;
    gap: 3px;
  }

  .panel-number {
    width: 22px;
    height: 22px;
    font-size: 10px;
  }
}

/* Landscape swaps the visible pair by badge drag. (No ::after spacer here:
   the track must always end on a full pair so two panels stay visible.) */
@media (orientation: landscape) and (max-width: 1366px) and (any-pointer: coarse) {
  .panel-number {
    cursor: grab;
  }
}

/* Translation order: a mouse can drag the whole chip; on touch the drag
   starts on the ⠿ handle, so a swipe on the chip body scrolls the list
   (with many translations the header row overflows on phones). */
.translation-chip {
  cursor: grab;
  touch-action: pan-x;
  user-select: none;
}

.copy-translation-option {
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.translation-chip:active,
.copy-translation-option:active {
  cursor: grabbing;
}

.drag-handle,
.copy-drag-handle {
  flex: 0 0 auto;
  touch-action: none;
}

/* Bigger handle hit target for fingers. */
@media (max-width: 820px), (max-width: 1366px) and (any-pointer: coarse) {
  .drag-handle,
  .copy-drag-handle {
    display: inline-flex;
    width: 24px;
    height: 28px;
    align-items: center;
    justify-content: center;
  }
}

.move-buttons,
.copy-move-buttons {
  display: none;
}

/* Panel numbers are identifiers only; movement controls live at the edges. */
.panel-number,
.panel-number.dragging {
  border-color: var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: white;
  box-shadow: 0 3px 8px rgba(40, 79, 67, 0.2);
  cursor: default;
  touch-action: auto;
}

.panel-move {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .panel-move {
    position: absolute;
    top: 50%;
    z-index: 24;
    display: grid;
    width: 24px;
    height: 72px;
    padding: 0;
    place-items: center;
    transform: translateY(-50%);
    border: 1px solid rgba(40, 79, 67, 0.2);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.68);
    box-shadow: 0 4px 12px rgba(37, 35, 31, 0.08);
    opacity: 0;
    backdrop-filter: blur(3px);
    transition: opacity 130ms ease, background-color 130ms ease;
  }

  .panel-move-left {
    left: 4px;
  }

  .panel-move-right {
    right: 4px;
  }

  .panel-move.revealed:not(:disabled),
  .panel-move:hover:not(:disabled),
  .panel-move:focus-visible {
    background: rgba(255, 255, 255, 0.92);
    opacity: 1;
  }

  .panel-move:disabled {
    display: none;
  }

  .panel-move span {
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
  }

  .panel-move-left span {
    border-right: 7px solid var(--accent);
  }

  .panel-move-right span {
    border-left: 7px solid var(--accent);
  }
}

/* Contextual verse-selection actions. */
/* While the floating copy/cancel buttons are shown, extra bottom padding
   lets the last verse scroll fully above them. */
.bible-panel.selection-active .panel-content,
.bible-panel.word-lookup-active .panel-content {
  padding-bottom: 68px;
}

/* Both toolbars are a single flex row, centered as a group -- adding or
   reordering a button just changes the row's content, never manual offsets. */
.verse-actions,
.word-actions {
  position: absolute;
  bottom: 10px;
  left: 50%;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 6px;
  transform: translateX(-50%);
}

.selection-mode-control,
.selection-mode-button,
.cancel-selection,
.copy-selection,
.tsk-selection,
.word-dictionary,
.word-copy,
.word-cancel {
  flex: 0 0 auto;
  display: grid;
  width: 36px;
  height: 34px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: white;
  color: var(--ink);
  box-shadow: 0 5px 14px rgba(37, 35, 31, 0.14);
}

.selection-mode-control {
  display: flex;
  width: auto;
  height: 34px;
  gap: 0;
  padding: 2px;
}

.selection-mode-button {
  width: 32px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
}

.word-dictionary {
  font-family: Georgia, "Noto Serif KR", serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Mixed Hebrew/Greek glyphs sit visually low within their own line box at
   this font's baseline metrics -- nudge up so the symbol looks centered in
   the button rather than geometrically centered by box alone. */
.word-dictionary span {
  transform: translateY(-2.5px);
}

.selection-mode-button svg,
.cancel-selection svg,
.tsk-selection svg,
.word-copy svg,
.word-cancel svg {
  display: block;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

.selection-bars {
  display: grid;
  width: 20px;
  height: 19px;
  align-content: center;
  justify-items: center;
  gap: 2px;
}

/* A flat fill instead of a gradient keeps these crisp at this tiny (18x5)
   size -- a gradient over so few pixels reads as a blurry smudge. */
.selection-bars span {
  display: block;
  width: 18px;
  height: 5px;
  border: 1px solid #817c73;
  border-radius: 0;
  background: #837e75;
}

.selection-bars-gap span:nth-child(2) {
  background: white;
}

.selection-mode-button:hover,
.cancel-selection:hover,
.copy-selection:hover,
.tsk-selection:hover,
.word-dictionary:hover,
.word-copy:hover,
.word-cancel:hover {
  border-color: #9d968b;
  background: #f8f6f1;
  color: var(--ink);
}

.selection-mode-button.selected,
.selection-mode-button.selected:hover {
  border-color: transparent;
  background: var(--accent-soft);
  color: var(--accent);
}

.panel-track.panel-reorder-active {
  overflow-x: hidden;
  scroll-behavior: auto;
  scroll-snap-type: none;
}

.panel-track.panel-count-changing {
  scroll-behavior: auto;
  scroll-snap-type: none;
}

.panel-track.fit-all-panels {
  gap: 0;
}

.swiping-panels .panel-track {
  scroll-behavior: auto;
  scroll-snap-type: none;
}

@media (max-width: 820px), (max-width: 1366px) and (any-pointer: coarse) {
  .panel-move {
    display: none !important;
  }

  .verse-actions,
  .word-actions {
    bottom: 12px;
    gap: 8px;
  }

  .selection-mode-control,
  .selection-mode-button,
  .copy-selection,
  .cancel-selection,
  .tsk-selection,
  .word-dictionary,
  .word-copy,
  .word-cancel {
    height: 44px;
  }

  .selection-mode-control .selection-mode-button {
    height: 38px;
  }

  .copy-selection,
  .cancel-selection,
  .tsk-selection,
  .word-dictionary,
  .word-copy,
  .word-cancel {
    width: 44px;
  }

  .selection-mode-control {
    width: auto;
    padding: 2px;
    align-items: center;
  }

  .selection-mode-button {
    display: grid;
    width: 40px;
    height: 38px;
    place-items: center;
  }

  .selection-mode-button svg,
  .cancel-selection svg,
  .tsk-selection svg,
  .word-copy svg,
  .word-cancel svg {
    width: 19px;
    height: 19px;
  }

  .word-dictionary {
    font-size: 15px;
  }

  .selection-bars {
    width: 22px;
    height: 19px;
  }

  .selection-bars span {
    width: 20px;
    height: 5px;
  }
}

@media (orientation: landscape) and (max-width: 1366px) and (any-pointer: coarse) {
  .panel-number {
    cursor: default;
  }
}

.verse-layout-control,
.panel-count-control {
  flex: 0 0 auto;
  height: 32px;
  align-items: center;
  gap: var(--toolbar-icon-gap);
  padding: 1px 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.verse-layout-control,
.panel-count-control {
  display: flex;
}

.verse-layout-control button,
.panel-count-control button {
  display: grid;
  width: 29px;
  height: 28px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
}

.verse-layout-control button.selected,
.panel-count-control button.selected {
  background: var(--accent-soft);
  color: var(--accent);
}

.verse-layout-control button:disabled,
.panel-count-control button:disabled {
  cursor: default;
  opacity: 0.28;
}

.verse-layout-control svg,
.panel-count-control svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

@media (max-width: 820px), (max-width: 1366px) and (any-pointer: coarse) {
  .panel-count-control {
    grid-area: view;
    display: flex;
    justify-self: end;
  }
}

@media (orientation: portrait) and (max-width: 599px) {
  .compact-toolbar {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "brand . font actions";
  }

  .site-brand > span:last-child {
    display: inline !important;
  }

  .panel-count-control {
    display: none !important;
  }
}

/* Phones in landscape and tablets in either orientation use one top row. */
@media (orientation: landscape) and (max-width: 1366px) and (any-pointer: coarse),
  (min-width: 600px) and (max-width: 1366px) and (any-pointer: coarse) {
  .app-header {
    height: calc(46px + env(safe-area-inset-top));
    padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) 5px
      max(6px, env(safe-area-inset-left));
  }

  .compact-toolbar {
    grid-template-columns: auto minmax(0, 1fr) auto auto auto auto;
    grid-template-rows: 34px;
    grid-template-areas: "brand . . view font actions";
    gap: var(--toolbar-icon-gap);
  }

  .panel-count-control {
    grid-area: view;
    display: flex;
    height: 32px;
    align-items: center;
    gap: var(--toolbar-icon-gap);
    padding: 1px 3px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
  }

  .workspace {
    height: calc(100vh - 46px - env(safe-area-inset-top));
    height: calc(100dvh - 46px - env(safe-area-inset-top));
  }
}

/* Side-by-side verse layout with a sticky translation heading row. */
.column-translation-header {
  display: none;
}

.bible-panel[data-verse-layout="columns"] .column-translation-header {
  position: sticky;
  top: 0;
  z-index: 7;
  display: grid;
  grid-template-columns: repeat(var(--translation-count), minmax(0, 1fr));
  gap: 12px;
  margin: 0 -20px;
  padding: 8px 20px 8px 52px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 253, 248, 0.96);
  box-shadow: 0 4px 10px rgba(55, 45, 30, 0.05);
  backdrop-filter: blur(8px);
}

.column-translation-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--translation-color);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.03em;
}

.bible-panel[data-verse-layout="columns"] .verse-group {
  display: grid;
  grid-template-columns: repeat(var(--translation-count), minmax(0, 1fr));
  align-items: start;
  gap: 12px;
  padding-left: 32px;
}

.bible-panel[data-verse-layout="columns"] .translation-line {
  display: block;
  min-width: 0;
}

.bible-panel[data-verse-layout="columns"] .translation-line + .translation-line {
  margin-top: 0;
}

.bible-panel[data-verse-layout="columns"] .translation-label {
  display: none;
}

/* With only one version showing there's nothing to distinguish it from. */
.bible-panel.single-translation .translation-label,
.bible-panel.single-translation .column-translation-header {
  display: none;
}

/* Hiding the label above leaves .translation-text as the grid's only item;
   without collapsing to one track it lands in the label's narrow first
   column instead of the full-width second one, wrapping into a tall sliver. */
.bible-panel.single-translation .translation-line {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 820px), (max-width: 1366px) and (any-pointer: coarse) {
  .bible-panel[data-verse-layout="columns"] .column-translation-header,
  .bible-panel[data-verse-layout="columns"] .verse-group {
    gap: 8px;
  }
}

/* Header action buttons (search, add panel) are icon-only squares with
   the glyph dead-centered, on desktop and touch alike. */
.header-actions .button {
  display: inline-flex;
  width: 36px;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 0;
}

.header-actions .button span {
  font-size: 17px;
  line-height: 1;
}

/* SVG glyphs sit dead-center in the icon squares, avoiding font baseline drift. */
#open-search svg,
#add-panel svg {
  display: block;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* ---- Translation picker ---- */
.translation-picker {
  position: relative;
  flex: 0 0 auto;
  order: 0;
}

.translation-picker-toggle {
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: var(--ink);
  white-space: nowrap;
  touch-action: none;
}

.translation-picker-toggle:hover {
  border-color: var(--line-strong);
  background: #faf8f3;
}

.translation-picker-toggle .picker-plus {
  display: block;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
  color: var(--accent);
}

.translation-picker-toggle[aria-expanded="true"] {
  border-color: #a7c9b8;
  background: var(--accent-soft);
}

.translation-picker-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 45;
  width: min(640px, calc(100vw - 16px));
  max-height: min(480px, 72dvh);
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
  box-shadow: 0 16px 40px rgba(40, 35, 27, 0.2);
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
}

.translation-picker-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Equal-width columns, wide enough for the longest translation name
   ("New Revised Standard Version", "Korean Revised Version (1961)") to
   never truncate -- when the menu itself is too narrow for both side by
   side, flex-wrap stacks them instead of squeezing either one below its
   min-width. */
.translation-picker-column {
  flex: 1 1 300px;
  min-width: 300px;
}

.translation-picker-column-languages {
  padding-left: 10px;
  border-left: 1px solid var(--line);
}

@media (max-width: 480px) {
  .translation-picker-column-languages {
    padding-left: 0;
    border-left: 0;
  }
}

.translation-picker-group + .translation-picker-group {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid var(--line);
}

.translation-picker-group-label {
  padding: 2px 7px 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.translation-picker-option {
  display: flex;
  width: 100%;
  min-height: 36px;
  align-items: center;
  gap: 8px;
  padding: 5px 7px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  text-align: left;
}

.translation-picker-option:hover,
.translation-picker-option.highlighted {
  background: var(--accent-soft);
}

.translation-picker-option.selected {
  background: #eaf5ef;
  box-shadow: inset 0 0 0 1px rgba(47, 118, 99, 0.12);
}

.translation-picker-option.selected.highlighted,
.translation-picker-option.selected:hover {
  background: #eaf5ef;
}

.translation-picker-option-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.translation-picker-option-disabled:hover {
  background: transparent;
}

@media (hover: none) and (pointer: coarse) {
  .translation-picker-option:hover {
    background: transparent;
  }

  .translation-picker-option.highlighted {
    background: var(--accent-soft);
  }

  .translation-picker-option.selected,
  .translation-picker-option.selected:hover,
  .translation-picker-option.selected.highlighted {
    background: #eaf5ef;
  }
}

.translation-picker-option:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.translation-picker-option .picker-label {
  flex: 0 0 auto;
  min-width: 52px;
  color: var(--translation-color);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.translation-picker-option .picker-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.translation-name {
  display: flex;
  height: 100%;
  align-items: center;
  color: var(--translation-color);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.translation-chip .chip-remove {
  display: flex;
  width: 18px;
  height: 20px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #9c9589;
  font-size: 0;
  line-height: 1;
}

.translation-chip .chip-remove span {
  width: 14px;
  height: 14px;
}

.translation-chip .chip-remove span::before,
.translation-chip .chip-remove span::after {
  width: 13px;
  height: 1.7px;
}

.translation-chip .chip-remove:hover {
  background: rgba(162, 79, 98, 0.14);
  color: #a24f62;
}

/* Touch press-drag selection needs the browser to leave these gestures
   alone; none of these controls sit in a vertically scrolling region. */
.combo-input {
  touch-action: none;
}

@media (max-width: 820px), (max-width: 1366px) and (any-pointer: coarse) {
  .translation-picker-toggle {
    width: 32px;
    height: 32px;
    padding: 0;
  }

  .translation-picker-option {
    min-height: 42px;
  }

  .translation-name {
    align-self: stretch;
  }

  .translation-chip .chip-remove {
    width: 24px;
    height: 28px;
    font-size: 0;
  }
}

/* Final panel header/action layout overrides. */
.panel-selectors {
  grid-template-columns: 32px 32px minmax(72px, 1fr) minmax(54px, 64px) 8px minmax(54px, 64px) 32px;
  gap: 4px;
  align-items: center;
}

.panel-number {
  display: none;
}

.panel-history,
.panel-selectors .remove-panel,
.panel-selectors .chapter-nav {
  display: grid;
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: var(--muted);
  box-shadow: none;
}

.panel-history:disabled,
.panel-selectors .chapter-nav:disabled,
.chapter-jump:disabled {
  opacity: 0.3;
}

.panel-history svg,
.panel-selectors .chapter-nav svg {
  display: block;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.combo-input {
  height: 32px;
  padding: 0 18px 0 7px;
  font-size: 11px;
}

.chapter-input,
.verse-input {
  text-align: center;
}

.selector-separator {
  height: 32px;
  font-size: 14px;
}

.book-combo .combo-menu {
  display: grid;
  width: min(520px, calc(100vw - 24px));
  min-width: 0;
  grid-auto-columns: minmax(150px, 1fr);
  grid-auto-flow: column;
  grid-template-rows: repeat(40, minmax(32px, auto));
  max-height: 418px;
}

.book-combo .combo-option {
  min-height: 32px;
}

.chapter-combo .combo-menu,
.verse-combo .combo-menu {
  width: min(270px, calc(100vw - 24px));
  grid-template-columns: repeat(5, minmax(0, 1fr));
  max-height: 418px;
}

.bible-panel .panel-content {
  padding-bottom: 68px;
}

.chapter-jump {
  position: absolute;
  bottom: 10px;
  z-index: 7;
  display: grid;
  width: 36px;
  height: 34px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: white;
  color: var(--accent);
  box-shadow: 0 5px 14px rgba(37, 35, 31, 0.14);
}

.chapter-jump-previous {
  left: 10px;
}

.chapter-jump-next {
  right: 10px;
}

.chapter-jump svg {
  display: block;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

@media (max-width: 820px), (max-width: 1366px) and (any-pointer: coarse) {
  .panel-selectors {
    grid-template-columns: 32px 32px minmax(72px, 1fr) minmax(54px, 64px) 8px minmax(54px, 64px) 32px;
  }

  .book-combo .combo-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: auto;
    column-gap: 0;
  }

  .book-combo .combo-option,
  .book-combo .combo-menu-heading {
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
  }

  .chapter-jump {
    bottom: 12px;
    width: 44px;
    height: 44px;
  }

  .chapter-jump-previous {
    left: 12px;
  }

  .chapter-jump-next {
    right: 12px;
  }

  .chapter-jump svg {
    width: 19px;
    height: 19px;
  }

  .selection-mode-control {
    width: 84px;
  }

  .selection-mode-control .selection-mode-button {
    width: 40px;
    height: 38px;
  }
}

@media (orientation: portrait) and (max-width: 599px) {
  .book-combo .combo-menu {
    right: auto;
    padding: 4px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: auto;
    column-gap: 0;
  }

  .book-combo .combo-option {
    min-height: 30px;
    padding: 4px 1px 4px 6px;
    overflow: visible;
    font-size: 12px;
    line-height: 1.1;
    text-overflow: clip;
    white-space: nowrap;
  }

  .book-combo .combo-menu-heading {
    min-height: 30px;
    padding: 2px 1px 2px 6px;
    font-size: 10px;
    white-space: nowrap;
  }
}

/* Final top-toolbar alignment: every page-level icon/control shares the same
   32px vertical box so plus buttons, chips, layout controls, and actions line up. */
.compact-toolbar,
.compact-toolbar .translation-controls,
.translation-list,
.header-actions {
  align-items: center;
}

.translation-picker,
.translation-picker-toggle,
.translation-chip,
.verse-layout-control,
.panel-count-control,
.font-size-control,
.header-actions .button {
  height: 32px;
}

.site-cross,
.translation-picker-toggle,
.header-actions .button {
  width: 32px;
  min-width: 32px;
}

.site-brand,
.translation-controls,
.translation-picker,
.translation-list,
.header-actions {
  height: 32px;
}

.translation-picker,
.translation-list,
.translation-chip {
  display: flex;
  align-items: center;
}

.translation-picker-toggle,
.header-actions .button {
  min-height: 32px;
}

.site-brand {
  align-items: center;
}

.site-cross {
  height: 32px;
  border-radius: 8px;
}

.site-cross svg {
  width: 18px;
  height: 18px;
}

.translation-list {
  padding: 0;
}

.translation-chip {
  min-height: 32px;
  align-self: center;
}

.header-actions .button {
  padding: 0;
}

#open-search svg,
#add-panel svg {
  width: 15px;
  height: 15px;
}

.translation-picker-group-label,
.combo-menu-heading {
  color: #5f4630;
}

@media (max-width: 1366px) and (any-pointer: coarse) {
  .compact-toolbar .translation-controls,
  .compact-toolbar .translation-list {
    height: 34px;
    min-height: 34px;
  }

  .compact-toolbar .translation-list {
    padding-block: 1px;
    align-items: center;
  }

  .compact-toolbar .translation-chip {
    height: 32px;
    min-height: 32px;
  }
}

.dialog-translation-controls {
  display: flex;
  height: auto;
  min-height: 32px;
  min-width: 0;
  align-items: flex-start;
  gap: var(--toolbar-icon-gap);
  overflow: visible;
}

.dialog-translation-controls .translation-picker {
  display: flex;
  height: 32px;
  align-items: center;
  /* Match the chip list's own flex-start (see .translation-list and
     .translation-chip below): the row reserves height for its horizontal
     scrollbar and top-aligns the chips within it, so the add-version
     toggle needs the same top alignment instead of centering in the
     taller row and sitting visibly lower than the chips beside it. */
  align-self: flex-start;
}

.dialog-translation-controls .translation-list {
  display: flex;
  flex: 1 1 auto;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  min-width: 0;
  align-items: flex-start;
  align-self: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 5px;
  margin-top: 0;
  padding-block: 0;
  line-height: 0;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.dialog-translation-controls .translation-list.translation-list--overflowing {
  height: 46px;
  min-height: 46px;
  max-height: 46px;
  align-items: flex-start;
  padding-bottom: 10px;
}

.dialog-translation-controls .translation-picker-toggle,
.dialog-translation-controls .translation-chip {
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  align-self: flex-start;
}

.dialog-translation-controls .translation-chip {
  display: inline-flex;
  margin-block: 0;
  padding-top: 0;
  padding-bottom: 0;
  transform: none;
  line-height: 1;
}

.dialog-translation-controls .translation-chip .chip-remove {
  align-self: center;
}

.dialog-translation-controls .translation-list::-webkit-scrollbar {
  height: 10px;
}

.dialog-translation-controls .translation-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #c9bda9;
}

.dialog-translation-controls .translation-list::-webkit-scrollbar-track {
  background: #eee8dc;
}

.dialog-translation-controls .translation-picker-menu {
  z-index: 80;
}

.search-form .dialog-translation-controls {
  grid-column: 1 / -1;
}

.search-meta:empty {
  display: none;
}

.copy-dialog .dialog-translation-controls {
  width: 100%;
}

.copy-dialog .copy-translation-options {
  display: flex;
  grid-template-columns: none;
  flex-wrap: nowrap;
  align-items: center;
  overflow-x: auto;
}

.copy-dialog .translation-chip.drag-over,
.search-dialog .translation-chip.drag-over {
  outline-offset: 1px;
}

/* Each panel gets its own add-version / chip row / layout-toggle line above
   the book-chapter-verse selectors, so translations and stacked/columns mode
   can differ panel to panel instead of applying to the whole page. */
.panel-translation-controls {
  grid-template-columns: 32px minmax(0, 1fr) auto;
  margin-top: 8px;
  min-height: 32px;
  overflow: hidden;
  max-height: 64px;
  opacity: 1;
  filter: brightness(1);
  transition:
    height 180ms ease,
    max-height 180ms ease,
    min-height 180ms ease,
    margin 180ms ease,
    padding 180ms ease,
    opacity 180ms ease,
    filter 180ms ease;
}

.panel-translation-controls .verse-layout-control {
  flex: 0 0 auto;
  /* .translation-picker/.translation-list carry order: 0/1 from their
     original flex header context; order affects grid auto-placement too,
     so without this the unordered (order: 0) toggle would tie with the
     picker and sort ahead of the order: 1 chip list. */
  order: 2;
}

.panel-translation-controls.translation-picker-open {
  position: relative;
  overflow: visible;
  z-index: 5;
}

.verse-group {
  padding-top: 3px;
  padding-bottom: 4px;
  border-radius: 0;
}

.verse-number {
  top: 4px;
  border-radius: 0;
}

.selection-bars span {
  border-radius: 0;
}

@media (max-width: 820px), (max-width: 1366px) and (any-pointer: coarse) {
  .search-dialog .dialog-translation-controls .translation-list,
  .copy-dialog .dialog-translation-controls .translation-list {
    position: static;
    top: auto;
  }

  .bible-panel[data-verse-layout="columns"] .column-translation-header {
    margin: 0 -10px;
    padding: 7px 10px 7px 40px;
  }
}

/* Panel version chip cycles normal -> highlight -> dim -> normal on click.
   Highlight: tinted with a pale version of that version's own text color;
   its border is a medium shade of the same color — darker than the pale
   background, lighter than the version's full-strength text color. */
.panel-translation-list .translation-chip.chip-active {
  border-color: var(--translation-color-medium);
  background: var(--translation-color-pale);
}

/* Dim: the chip itself looks normal again, but its own label text fades
   toward a paler shade to read as de-emphasized. */
.panel-translation-list .translation-chip.chip-dimmed .translation-name {
  color: var(--translation-color-dim);
}

/* Highlighted version: its verse text renders in that version's own color,
   instead of the default neutral ink, in either verse layout. A hairline
   text-stroke adds just a touch of extra weight without jumping to a full
   bold face — the serif stack here has no true medium weight, so any
   font-weight above ~500 snaps straight to bold instead of easing into it. */
.translation-line--highlight .translation-text {
  color: var(--translation-color);
  -webkit-text-stroke: 0.3px currentColor;
}

/* Dimmed version: its verse text fades to a neutral pale gray, well past
   the shared --muted so it reads as clearly de-emphasized next to the
   full-strength ink of non-dimmed lines. */
.translation-line--dim .translation-text {
  color: #b3b0aa;
}