:root {
  --bg: #efefef;
  --surface: #f8f8f8;
  --surface-muted: #ececec;
  --surface-strong: #dfdfdf;
  --ink: #151515;
  --muted: #545454;
  --border: #c7c7c7;
  --border-strong: #afafaf;
  --button: #111111;
  --button-ink: #ffffff;
  --hero-logo-filter: none;
  --radius-lg: 12px;
  --radius-md: 9px;
}

[data-theme="dark"] {
  --bg: #171717;
  --surface: #212121;
  --surface-muted: #282828;
  --surface-strong: #313131;
  --ink: #f4f4f4;
  --muted: #c0c0c0;
  --border: #3e3e3e;
  --border-strong: #555555;
  --button: #f2f2f2;
  --button-ink: #111111;
  --hero-logo-filter: brightness(0) invert(1);
}

[data-theme="lava-blue"] {
  --bg: #111534;
  --surface: rgba(33, 36, 84, 0.76);
  --surface-muted: rgba(48, 54, 116, 0.62);
  --surface-strong: rgba(66, 74, 148, 0.58);
  --ink: #eef2ff;
  --muted: #c8c9f2;
  --border: rgba(181, 177, 255, 0.29);
  --border-strong: rgba(196, 199, 255, 0.45);
  --button: #d8c6ff;
  --button-ink: #252150;
  --hero-logo-filter: brightness(0) invert(1);
}

[data-theme="paper-sand"] {
  --bg: #f6f0e7;
  --surface: #fffaf2;
  --surface-muted: #f4eadc;
  --surface-strong: #ebdecd;
  --ink: #2a2017;
  --muted: #6c5d4e;
  --border: #d9c7b2;
  --border-strong: #c3ad95;
  --button: #2a2017;
  --button-ink: #fff6eb;
  --hero-logo-filter: none;
}

[data-theme="forest-ink"] {
  --bg: #0d1814;
  --surface: #15261f;
  --surface-muted: #1d3128;
  --surface-strong: #274033;
  --ink: #eef9f2;
  --muted: #afcdbd;
  --border: #345845;
  --border-strong: #4c7961;
  --button: #d8f2e1;
  --button-ink: #102018;
  --hero-logo-filter: brightness(0) invert(1);
}

[data-theme="shepherd-light"] {
  --bg: #f3efe4;
  --surface: #fdf9f0;
  --surface-muted: #f0e7d6;
  --surface-strong: #e5d8bf;
  --ink: #251e13;
  --muted: #6d5d44;
  --border: #cebda0;
  --border-strong: #b59f80;
  --button: #3b2f1d;
  --button-ink: #fff5e3;
  --hero-logo-filter: none;
}

[data-theme="cedar-dusk"] {
  --bg: #13161f;
  --surface: #1d2230;
  --surface-muted: #252c3d;
  --surface-strong: #30384c;
  --ink: #f1f4fc;
  --muted: #bbc5dd;
  --border: #3f4c66;
  --border-strong: #586888;
  --button: #dce7ff;
  --button-ink: #1a243c;
  --hero-logo-filter: brightness(0) invert(1);
}

[data-theme="olive-grove"] {
  --bg: #151d16;
  --surface: #1f2a21;
  --surface-muted: #28352a;
  --surface-strong: #324235;
  --ink: #eef8ef;
  --muted: #b4c8b5;
  --border: #4a614d;
  --border-strong: #648269;
  --button: #ddf0e0;
  --button-ink: #132017;
  --hero-logo-filter: brightness(0) invert(1);
}

@keyframes lavaBlueShift {
  0% {
    background-position: 0% 35%;
  }
  50% {
    background-position: 100% 65%;
  }
  100% {
    background-position: 0% 35%;
  }
}

[data-theme="lava-blue"] body {
  background:
    radial-gradient(900px 540px at 14% 12%, rgba(161, 223, 255, 0.15), transparent 62%),
    radial-gradient(940px 520px at 84% 14%, rgba(240, 166, 255, 0.14), transparent 64%),
    radial-gradient(860px 600px at 50% 82%, rgba(177, 188, 255, 0.12), transparent 66%),
    linear-gradient(118deg, #17153d 0%, #22275a 38%, #33357a 70%, #1e1d4d 100%);
  background-size: 165% 165%, 180% 180%, 170% 170%, 240% 240%;
  animation: lavaBlueShift 42s ease-in-out infinite;
}

* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  min-height: 100dvh;
  color: var(--ink);
  background: var(--bg);
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
}

body {
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
}

body {
  overflow-x: hidden;
  line-height: 1.45;
}

.theme-particles {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease;
  overflow: hidden;
}

body.has-theme-topography .theme-particles {
  opacity: 0;
}

.theme-topography {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 280ms ease;
}

body.has-theme-topography .theme-topography {
  opacity: 1;
}

body.has-theme-particles .theme-particles {
  opacity: 1;
}

.theme-topography,
.theme-particles canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

[data-theme="lava-blue"] .theme-particles {
  mix-blend-mode: screen;
  opacity: 0.98;
  filter: saturate(122%) blur(0.35px);
}

[data-theme="dark"] .theme-particles,
[data-theme="forest-ink"] .theme-particles,
[data-theme="cedar-dusk"] .theme-particles,
[data-theme="olive-grove"] .theme-particles {
  mix-blend-mode: lighten;
  opacity: 0.72;
}

[data-theme="light"] .theme-particles,
[data-theme="paper-sand"] .theme-particles,
[data-theme="shepherd-light"] .theme-particles {
  mix-blend-mode: multiply;
  opacity: 0.42;
}

.ambient-shape {
  display: none;
}

.hero,
.layout {
  position: relative;
}

.hero {
  z-index: 4;
}

.layout {
  z-index: 1;
}

.hero {
  max-width: 1320px;
  margin: 0 auto;
  padding: 18px 22px 8px;
  border-bottom: 0;
  overflow: visible;
}

.hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  position: relative;
}

.hero-top-tagline {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  line-height: 1.25;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 12px;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-left: 0;
}

#topViewportMenu {
  max-width: min(100%, 920px);
}

.hero-top-brand {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
  color: inherit;
}

.hero-logo-compact {
  width: clamp(62px, 4.8vw, 84px);
  height: auto;
}

.mobile-menu-toggle {
  display: none;
}

.mobile-menu-icon {
  position: relative;
  width: 13px;
  height: 10px;
  display: inline-block;
}

.mobile-menu-icon::before,
.mobile-menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1.7px;
  background: currentColor;
  border-radius: 2px;
}

.mobile-menu-icon::before {
  top: 1px;
  box-shadow: 0 3.9px 0 currentColor;
}

.mobile-menu-icon::after {
  bottom: 1px;
}

.mobile-menu-text {
  margin-left: 7px;
}

.quick-open-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.quick-open-btn {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 10px;
  white-space: nowrap;
}

.bookmark-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.onboarding-notice-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-color: color-mix(in srgb, var(--accent) 68%, var(--border-strong) 32%);
}

.onboarding-notice-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 72%, #ffffff 28%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--surface) 72%, transparent);
}

.bookmark-glyph {
  position: relative;
  width: 10px;
  height: 13px;
  border: 1.7px solid currentColor;
  border-radius: 2px;
  display: inline-block;
}

.bookmark-glyph::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1.7px;
  width: 6px;
  height: 6px;
  border-left: 1.7px solid currentColor;
  border-bottom: 1.7px solid currentColor;
  background: transparent;
  transform: translateX(-50%) rotate(-45deg);
}

.bookmark-label {
  line-height: 1;
}

.eyebrow {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

h1 {
  margin: 8px 0 0;
  font-family: "IBM Plex Serif", Georgia, serif;
  font-size: clamp(2rem, 4.5vw, 3.3rem);
  line-height: 0.96;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  display: inline-block;
  position: relative;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 24px rgba(0, 0, 0, 0.22);
}

.hero-brand {
  display: block;
  width: fit-content;
  margin: 10px auto 0;
}

.hero .hero-brand-main {
  display: none !important;
}

.hero-logo {
  display: block;
  width: clamp(280px, 46vw, 620px);
  max-width: 100%;
  height: auto;
  filter: var(--hero-logo-filter);
  transition: filter 180ms ease;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* Compact top-left brand logo sizing must override the generic .hero-logo rule. */
.hero-logo.hero-logo-compact {
  width: clamp(92px, 6vw, 132px);
  max-width: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

h1::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: -7px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ink) 0%, transparent 92%);
  opacity: 0.35;
}

.hero-subtitle {
  margin: 8px auto 0;
  max-width: 920px;
  text-align: center;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.4;
}

.hero-menu-tagline {
  margin: 0;
  width: 100%;
  order: 10;
  text-align: center;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

.hero-logo-tagline {
  margin: 4px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

.hero-layers {
  color: var(--ink);
  font-weight: 500;
}

.theme-toggle {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
}

.theme-toggle:hover {
  background: var(--surface-muted);
}

.account-menu {
  position: relative;
  z-index: 430;
}

.theme-menu {
  position: relative;
  z-index: 430;
}

.theme-menu summary {
  list-style: none;
}

.theme-menu-toggle,
.account-toggle {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

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

.theme-menu[open] .theme-menu-toggle {
  background: var(--surface-muted);
}

.theme-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(430px, calc(100vw - 24px));
  max-height: min(78vh, 560px);
  overflow-y: auto;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 12px;
  z-index: 1200;
}

.settings-profile {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.settings-profile h3 {
  margin: 0;
  font-size: 0.86rem;
}

.theme-popover h2 {
  margin: 0 0 8px;
  font-size: 0.9rem;
}

.theme-options {
  display: grid;
  gap: 6px;
}

.theme-option {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--ink);
  font: inherit;
  font-size: 0.78rem;
  text-align: left;
  padding: 8px 10px;
  cursor: pointer;
}

.theme-option:hover {
  border-color: var(--border-strong);
}

.theme-option.is-active {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--surface);
}

.account-menu summary {
  list-style: none;
}

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

.account-menu[open] .account-toggle {
  background: var(--surface-muted);
}

.account-menu[open],
.theme-menu[open] {
  z-index: 1210;
}

.account-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(560px, calc(100vw - 24px));
  max-height: min(80vh, 760px);
  overflow-y: auto;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 14px;
  z-index: 1200;
}

.account-popover h2 {
  margin: 0 0 10px;
  font-size: 1rem;
}

.share-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  z-index: 1225;
}

.share-modal {
  position: fixed;
  top: max(68px, calc(env(safe-area-inset-top) + 16px));
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, calc(100vw - 24px));
  max-height: min(82vh, calc(100dvh - 80px));
  overflow-y: auto;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 14px;
  z-index: 1230;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
}

.share-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.share-modal-header h2 {
  margin: 0;
}

.share-modal-backdrop[hidden],
.share-modal[hidden] {
  display: none;
}

body.share-modal-open {
  overflow: hidden;
}

.layout {
  max-width: 1320px;
  margin: 0 auto;
  padding: 16px 20px 24px;
  display: grid;
  grid-template-columns: 1.5fr minmax(360px, 0.9fr);
  gap: 12px;
}

.app-disclaimer {
  max-width: 1320px;
  margin: 0 auto 18px;
  padding: 0 20px;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--muted);
  display: grid;
  gap: 8px;
  justify-items: start;
}

.cookie-prefs-btn {
  width: auto;
}

.cookie-banner {
  position: fixed;
  left: 14px;
  right: auto;
  bottom: 14px;
  width: min(460px, calc(100vw - 28px));
  z-index: 980;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
  padding: 12px;
  display: grid;
  gap: 8px;
}

.cookie-banner[hidden] {
  display: none !important;
}

.cookie-banner h3 {
  margin: 0;
  font-size: 0.9rem;
}

.cookie-banner p {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
}

.cookie-banner-details {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  background: var(--surface-muted);
  display: grid;
  gap: 8px;
}

.cookie-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.78rem;
}

.cookie-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cookie-banner-actions .btn {
  width: auto;
  min-width: 120px;
}

.cookie-banner-links {
  color: var(--muted);
}

.cookie-banner-links a {
  color: var(--ink);
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
}

.panel-note {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

[data-theme="lava-blue"] .panel,
[data-theme="lava-blue"] .stack-item,
[data-theme="lava-blue"] .translation-card,
[data-theme="lava-blue"] .theme-popover,
[data-theme="lava-blue"] .account-popover,
[data-theme="lava-blue"] .share-modal,
[data-theme="lava-blue"] .semantic-drawer,
[data-theme="lava-blue"] .word-drawer,
[data-theme="lava-blue"] .custom-context-menu {
  backdrop-filter: blur(9px) saturate(108%);
  box-shadow: 0 12px 30px rgba(9, 8, 28, 0.28), 0 0 0 1px rgba(205, 201, 255, 0.1) inset;
}

[data-theme="lava-blue"] input:focus,
[data-theme="lava-blue"] select:focus,
[data-theme="lava-blue"] textarea:focus {
  outline-color: rgba(221, 193, 255, 0.9);
}

[data-theme="lava-blue"] .theme-toggle:hover,
[data-theme="lava-blue"] .btn:hover {
  background: rgba(220, 196, 255, 0.23);
}

[data-theme="lava-blue"] .hero-subtitle,
[data-theme="lava-blue"] .panel-note,
[data-theme="lava-blue"] .status {
  color: #d8d7f5;
}

.panel-reader {
  grid-row: auto;
  min-width: 0;
}

.panel-roadmap {
  grid-column: 1 / -1;
}

.panel-sidebar {
  align-self: start;
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 24px);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  scroll-margin-top: 12px;
  container-type: inline-size;
}

.panel-sidebar.sidebar-spotlight {
  animation: sidebarSpotlight 0.85s ease;
}

@keyframes sidebarSpotlight {
  0% {
    border-color: var(--ink);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  30% {
    border-color: var(--ink);
    box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--border-strong);
  }
  100% {
    border-color: var(--border);
    box-shadow: none;
  }
}

.sidebar-context {
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-muted);
  padding: 9px 10px;
}

.sidebar-kicker {
  margin: 0;
  font-size: 0.66rem;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sidebar-ref {
  margin: 3px 0 0;
  font-size: 0.98rem;
  font-family: "IBM Plex Serif", Georgia, serif;
  line-height: 1.25;
  color: var(--ink);
}

.sidebar-meta {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.75rem;
}

.sidebar-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
}

.sidebar-tab {
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  padding: 5px 6px;
  font-size: clamp(0.57rem, 0.48rem + 0.23vw, 0.64rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-tab:hover {
  color: var(--ink);
  border-color: var(--ink);
}

.sidebar-tab.is-active {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--surface);
}

.sidebar-panel {
  display: none;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
}

.sidebar-panel.is-active {
  display: grid;
}

.sidebar-block {
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-muted);
  padding: 10px;
  min-width: 0;
}

.sidebar-block > * {
  min-width: 0;
}

.sidebar-block h3 {
  margin: 0 0 6px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sidebar-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.sidebar-action-grid .btn {
  width: 100%;
}

.passage-guide-grid {
  display: grid;
  gap: 8px;
}

.passage-guide-card {
  gap: 7px;
}

.passage-guide-card h4 {
  margin: 0;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.passage-guide-list {
  margin: 0;
  padding-left: 16px;
  display: grid;
  gap: 6px;
}

.passage-guide-list li {
  margin: 0;
}

.guide-layer-link {
  font-weight: 700;
  color: var(--ink);
  margin-right: 2px;
}

.passage-guide-links li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

.guide-kicker {
  margin: 0;
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.guide-inline-meta {
  color: var(--muted);
  font-size: 0.74rem;
}

.panel-language,
.panel-annotations,
.panel-search,
.panel-ai {
  grid-column: 2;
}

.fab-stack {
  position: fixed;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 250;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: opacity 160ms, pointer-events 160ms;
}

.semantic-fab {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 0.05em;
  padding: 14px 9px;
  border-radius: 999px;
}

body.any-drawer-open .fab-stack {
  opacity: 0;
  pointer-events: none;
}

.quick-sidebar-dock {
  position: fixed;
  right: 12px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 248;
  display: none;
  flex-direction: column;
  gap: 6px;
  transition: opacity 160ms, pointer-events 160ms;
}

.quick-sidebar-dock .quick-open-btn {
  font-size: 0.64rem;
  padding: 6px 10px;
  letter-spacing: 0.05em;
}

body.any-drawer-open .quick-sidebar-dock {
  opacity: 0;
  pointer-events: none;
}

.book-selector-toggle {
  position: fixed;
  left: 14px;
  top: 82px;
  transform: none;
  z-index: 252;
  padding: 8px 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.any-drawer-open .book-selector-toggle {
  opacity: 0;
  pointer-events: none;
}

.semantic-drawer {
  position: fixed;
  top: 12px;
  left: 12px;
  width: min(600px, calc(100vw - 26px));
  height: calc(100vh - 24px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  z-index: 240;
  padding: 14px;
  overflow-y: auto;
  transform: translateX(calc(-100% - 24px));
  transition: transform 160ms ease;
}

.semantic-drawer.open {
  transform: translateX(0);
}

.book-selector-drawer {
  z-index: 242;
  width: min(420px, calc(100vw - 26px));
}

.toc-actions {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 6px;
}

.toc-actions .btn {
  width: auto;
}

.book-toc {
  display: grid;
  gap: 7px;
  max-height: calc(100vh - 180px);
  overflow-y: auto;
  padding-right: 2px;
}

.toc-book {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  overflow: hidden;
}

.toc-book-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink);
}

.toc-book-summary::marker {
  color: var(--muted);
}

.toc-book-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toc-book-meta {
  font-size: 0.64rem;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.toc-book-code {
  font-size: 0.66rem;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.toc-chapters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
  gap: 6px;
  padding: 0 10px 10px;
}

.toc-chapter-btn {
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.72rem;
  padding: 5px 0;
  cursor: pointer;
}

.toc-chapter-btn:hover {
  border-color: var(--ink);
}

.toc-chapter-btn.is-active {
  background: var(--ink);
  color: var(--surface);
  border-color: var(--ink);
}

.setting-meaning-drawer {
  z-index: 241;
}

.semantic-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.semantic-drawer-header h2 {
  margin: 0;
}

.semantic-drawer-content {
  display: grid;
  gap: 8px;
}

.semantic-tabbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.semantic-tab {
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  padding: 7px 10px;
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
}

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

.semantic-tab.is-active {
  background: var(--ink);
  color: var(--surface);
  border-color: var(--ink);
}

.semantic-panel {
  display: none;
  gap: 8px;
}

.semantic-panel.is-active {
  display: grid;
}

.semantic-drawer .semantic-controls {
  grid-template-columns: repeat(2, minmax(130px, 1fr));
}

.semantic-drawer .semantic-controls .btn {
  width: 100%;
}

.semantic-setting-controls {
  grid-template-columns: repeat(3, minmax(120px, 1fr)) auto;
  margin-bottom: 0;
  align-items: end;
}

.semantic-setting-controls .btn {
  width: auto;
  justify-self: end;
}

.semantic-drawer .semantic-map-viewport {
  height: min(62vh, 600px);
}

.setting-meaning-list {
  gap: 7px;
}

.setting-meaning-note {
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted);
}

.setting-meaning-item h4 {
  margin: 0;
}

.setting-meaning-heading {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}

.setting-meaning-body {
  margin: 0;
}

.setting-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  font-size: 0.66rem;
  line-height: 1;
  color: var(--muted);
  cursor: help;
}

.term-tip {
  display: inline;
  border-bottom: 1px dotted var(--border-strong);
  cursor: help;
}

.term-tip.term-tip-open {
  border-bottom-color: var(--ink);
}

.term-tip:focus-visible,
.setting-tip:focus-visible,
.structure-connector-label:focus-visible,
.word-tip:focus-visible,
.semantic-legend-note:focus-visible,
.structure-tip:focus-visible {
  outline: 2px solid var(--border-strong);
  outline-offset: 2px;
}

.ui-tooltip {
  position: fixed;
  left: 0;
  top: 0;
  max-width: min(360px, calc(100vw - 16px));
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
  font-size: 0.74rem;
  line-height: 1.35;
  white-space: normal;
  pointer-events: none;
  z-index: 1300;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 130ms ease, transform 130ms ease;
}

.ui-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 8px;
  height: 8px;
  background: var(--surface);
  border-left: 1px solid var(--border-strong);
  border-top: 1px solid var(--border-strong);
  transform: translateX(-50%) rotate(45deg);
}

.ui-tooltip[data-placement="top"]::after {
  bottom: -5px;
  border-left: none;
  border-top: none;
  border-right: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
}

.ui-tooltip[data-placement="bottom"]::after {
  top: -5px;
}

.ui-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

h2 {
  margin: 0 0 10px;
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.controls {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr) auto;
  gap: 8px;
  margin-bottom: 8px;
}

.export-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.selector-controls {
  grid-template-columns: repeat(3, minmax(95px, 1fr)) auto auto;
}

.verse-controls {
  grid-template-columns: minmax(120px, 180px) minmax(240px, 1fr);
}

.semantic-controls {
  grid-template-columns: repeat(4, minmax(130px, 1fr)) auto auto;
}

.language-controls {
  grid-template-columns: repeat(2, minmax(140px, 1fr)) auto auto;
}

.control {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--muted);
  font-size: 0.76rem;
}

.control-help {
  display: block;
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--muted);
}

.control-inline {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.control-inline input[type="checkbox"] {
  width: auto;
}

.parallel-controls,
.stream-controls {
  margin: 8px 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  background: var(--surface-muted);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px 12px;
}

.parallel-controls legend,
.stream-controls legend {
  color: var(--muted);
  padding: 0 4px;
}

.parallel-controls label,
.stream-controls label {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-width: 0;
  text-align: left;
  font-size: 0.72rem;
}

.parallel-controls input[type="checkbox"],
.stream-controls input[type="checkbox"] {
  width: auto;
  transform: scale(0.9);
  transform-origin: left center;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.9rem;
  padding: 8px 9px;
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--ink);
  outline-offset: 0;
}

.btn {
  border: 1px solid var(--button);
  border-radius: 999px;
  background: var(--button);
  color: var(--button-ink);
  padding: 8px 12px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  align-self: end;
}

.btn:hover {
  opacity: 0.88;
}

.btn-quiet {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border-strong);
}

.status {
  min-height: 18px;
  margin: 6px 0 10px;
  color: var(--muted);
  font-size: 0.8rem;
}

@keyframes statusCursorBlink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

.status.terminal-accessing {
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  letter-spacing: 0.02em;
}

.status.terminal-accessing::before {
  content: "> ";
  color: var(--muted);
}

.status.terminal-accessing::after {
  content: "_";
  margin-left: 2px;
  color: var(--ink);
  animation: statusCursorBlink 1s steps(1, end) infinite;
}

.status.ok {
  color: var(--ink);
}

.status.warn {
  color: var(--muted);
  text-decoration: underline;
}

.pericope-meta {
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  font-size: 0.86rem;
}

.scripture-grid {
  display: grid;
  gap: 10px;
}

.parallel-stack {
  display: grid;
  gap: 10px;
}

.parallel-verse-stack {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}

.parallel-verse-head {
  padding: 7px 10px 6px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-muted);
}

.parallel-lines {
  display: grid;
  gap: 0;
}

.parallel-line {
  display: grid;
  grid-template-columns: 66px 1fr;
  gap: 8px;
  align-items: start;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}

.parallel-line:last-child {
  border-bottom: none;
}

.parallel-line-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-muted);
}

.parallel-line-text {
  min-width: 0;
}

.translation-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}

.translation-card h3 {
  margin: 0;
  padding: 8px 10px;
  background: var(--ink);
  color: var(--surface);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.verse-list {
  padding: 12px;
  display: grid;
  gap: 12px;
}

.verse-item {
  color: var(--ink);
  font-family: "IBM Plex Serif", Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.58;
}

.verse-item-single {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.verse-body {
  flex: 1 1 auto;
  min-width: 0;
}

.verse-id {
  margin-right: 6px;
  color: var(--muted);
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
}

.verse-jump-btn {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  color: var(--muted);
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  text-decoration: underline;
  cursor: pointer;
}

.verse-jump-btn:hover {
  color: var(--ink);
}

.verse-jump-btn-compact {
  margin-top: 0.18em;
  min-width: 1.5em;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  text-decoration: none;
  text-align: right;
}

.verse-jump-btn-compact:hover {
  text-decoration: underline;
}

.interlinear-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.interlinear-token {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 4px 6px;
  background: var(--surface-muted);
}

.interlinear-surface {
  font-family: "IBM Plex Serif", Georgia, serif;
  font-size: 0.98rem;
}

.interlinear-meta {
  font-size: 0.62rem;
  color: var(--muted);
}

.word-token {
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 120ms ease;
}

.word-token:hover {
  background: var(--surface-strong);
}

.word-token.active {
  background: var(--ink);
  color: var(--surface);
}

.place-token {
  border-radius: 4px;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.place-token:hover {
  border: 1px dashed color-mix(in srgb, var(--border-strong) 84%, transparent);
  margin: -1px;
}

.geo-place-link {
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  padding: 0;
  margin: 0;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

.geo-place-link:hover {
  opacity: 0.82;
}

.word-token.has-word-gloss {
  position: relative;
}

.word-token.word-gloss-loading:hover::after,
.word-token.has-word-gloss:hover::after {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  max-width: min(260px, 70vw);
  width: max-content;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 6px 8px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  font-size: 0.72rem;
  line-height: 1.35;
  white-space: normal;
  z-index: 25;
  pointer-events: none;
  content: attr(data-gloss);
}

.layers details,
.layers .layer-panel {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
  background: var(--surface-muted);
}

.layers summary,
.layers .layer-summary {
  cursor: pointer;
  font-weight: 500;
  list-style: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.layers summary::-webkit-details-marker,
.layers .layer-summary::-webkit-details-marker {
  display: none;
}

.layer-summary-main {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}

.layer-summary-title {
  display: block;
}

.layer-summary-subtitle {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.45;
}

.layer-summary-indicator {
  position: relative;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-top: 2px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
}

.layer-summary-indicator::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 1.6px solid var(--ink);
  border-bottom: 1.6px solid var(--ink);
  transform: translate(-55%, -60%) rotate(45deg);
  transition: transform 180ms ease;
}

.layers details[open] .layer-summary-indicator::before {
  transform: translate(-50%, -42%) rotate(225deg);
}

.layers .layer-body {
  overflow: hidden;
  will-change: height, opacity;
}

.layers ul {
  margin: 8px 0 0;
  padding-left: 16px;
}

.layers li {
  margin-bottom: 6px;
}

.layers li.location-note {
  list-style: none;
  margin-left: -16px;
  margin-bottom: 8px;
  padding: 7px 8px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--surface);
}

.location-note-label {
  display: block;
  margin-bottom: 3px;
  font-size: 0.69rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}

.location-note-value {
  display: block;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--ink);
}

.stack-list {
  display: grid;
  gap: 8px;
}

.custom-context-backdrop {
  position: fixed;
  inset: 0;
  z-index: 590;
  background: transparent;
}

.custom-context-menu {
  position: fixed;
  z-index: 600;
  min-width: 190px;
  padding: 6px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
  display: grid;
  gap: 4px;
}

.custom-context-backdrop[hidden],
.custom-context-menu[hidden] {
  display: none !important;
}

.custom-context-item {
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  font: inherit;
  font-size: 0.82rem;
  padding: 7px 9px;
  cursor: pointer;
}

.custom-context-item:hover {
  background: var(--surface-muted);
  border-color: var(--border);
}

.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 980;
  background: rgba(7, 10, 16, 0.62);
  backdrop-filter: blur(2px);
  pointer-events: none;
}

.tour-overlay[hidden] {
  display: none !important;
}

.tour-spotlight {
  position: fixed;
  z-index: 985;
  border-radius: 12px;
  border: 2px solid color-mix(in srgb, var(--accent) 74%, #ffffff 26%);
  box-shadow:
    0 0 0 9999px rgba(7, 10, 16, 0.58),
    0 0 0 1px rgba(255, 255, 255, 0.12) inset,
    0 18px 38px rgba(0, 0, 0, 0.4);
  transition:
    left 420ms cubic-bezier(0.22, 1, 0.36, 1),
    top 420ms cubic-bezier(0.22, 1, 0.36, 1),
    width 420ms cubic-bezier(0.22, 1, 0.36, 1),
    height 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tour-cursor {
  position: fixed;
  z-index: 990;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 80%, #ffffff 20%);
  border: 2px solid var(--ink);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.14), 0 10px 24px rgba(0, 0, 0, 0.35);
  transform: translate(-50%, -50%);
  transition:
    left 540ms cubic-bezier(0.22, 1, 0.36, 1),
    top 540ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 260ms ease;
}

.tour-cursor::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 62%, #ffffff 38%);
  opacity: 0.72;
}

.tour-tooltip {
  position: fixed;
  z-index: 995;
  width: min(360px, 92vw);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.38);
  padding: 10px 11px;
  display: grid;
  gap: 7px;
  pointer-events: auto;
  transition:
    left 340ms cubic-bezier(0.22, 1, 0.36, 1),
    top 340ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tour-progress {
  margin: 0;
  font-size: 0.71rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.tour-tooltip h3 {
  margin: 0;
  font-size: 0.95rem;
}

.tour-tooltip p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ink);
  line-height: 1.43;
}

.tour-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

#linksView {
  max-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

#linksView::-webkit-scrollbar {
  width: 10px;
}

#linksView::-webkit-scrollbar-track {
  background: transparent;
}

#linksView::-webkit-scrollbar-thumb {
  background: var(--surface-strong);
  border: 2px solid var(--surface);
  border-radius: 999px;
}

#linksView::-webkit-scrollbar-thumb:hover {
  background: var(--border-strong);
}

.stack-item {
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 11px;
  background: var(--surface-muted);
}

.stack-item h4 {
  margin: 0 0 6px;
  font-size: 0.9rem;
  font-weight: 600;
}

.verse-jump-link {
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
}

.verse-jump-link:hover {
  text-decoration: underline;
}

.stack-item p {
  margin: 0 0 8px;
  font-size: 0.86rem;
  line-height: 1.5;
}

.stack-item p:last-child {
  margin-bottom: 0;
}

.stack-label {
  display: inline-block;
  margin-bottom: 5px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.annotation-form,
.ai-form,
.search-form {
  display: grid;
  gap: 8px;
}

.ai-form {
  grid-template-columns: minmax(160px, 1fr) minmax(130px, 160px) auto auto;
  align-items: end;
}

.ai-enhance-controls {
  grid-template-columns: 1fr auto;
  align-items: center;
  margin-bottom: 8px;
}

.search-form {
  grid-template-columns: repeat(4, minmax(120px, 1fr)) auto;
  align-items: end;
}

.search-form > *,
.annotation-form > *,
.export-actions > * {
  min-width: 0;
}

.search-form .btn {
  grid-column: 1 / -1;
  width: 100%;
}

.search-toolbar {
  display: grid;
  gap: 8px;
  grid-template-columns: auto minmax(160px, 1fr) auto auto;
  align-items: end;
  margin-top: 8px;
}

.search-toolbar label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.76rem;
  color: var(--muted);
}

.search-did-you-mean {
  margin: 6px 0 8px;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.5;
}

.search-suggestion-btn {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  color: var(--ink);
  font: inherit;
  font-size: 0.72rem;
  padding: 2px 8px;
  cursor: pointer;
  margin: 2px 4px 2px 0;
}

.search-reason-list {
  margin: 0 0 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.search-reason-chip {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.68rem;
}

.search-pagination {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.search-pagination #searchPageLabel {
  color: var(--muted);
  font-size: 0.74rem;
}

.sermon-outline-view {
  gap: 8px;
}

.sermon-panel {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-muted);
  padding: 10px;
}

.sermon-panel h4 {
  margin: 0 0 6px;
  font-size: 0.9rem;
}

.sermon-meta {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.74rem;
}

.sermon-point-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}

.sermon-point-list li p {
  margin: 4px 0 0;
}

.sermon-section {
  margin: 0 0 10px;
}

.sermon-section h5 {
  margin: 0 0 5px;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
}

.sermon-library-view {
  margin-top: 8px;
}

.sermon-lookup-results {
  margin: 8px 0;
  max-height: 220px;
  overflow: auto;
}

.sermon-analytics-card {
  margin-top: 10px;
}

.sermon-analytics-view h5 {
  margin: 0 0 6px;
  font-size: 0.8rem;
}

.sermon-starter-spotlight {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ink) 55%, transparent), 0 14px 28px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.22s ease;
}

.sermon-drawer {
  width: min(760px, calc(100vw - 26px));
}

.sermon-form-grid {
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 10px;
}

.sermon-form-grid #sermonPrompt {
  min-height: 42px;
}

.sermon-form-grid > label:first-child {
  grid-column: 1 / -1;
}

.sermon-form-grid > .btn {
  grid-column: auto;
}

.sermon-form-grid #sermonGenerateBtn {
  grid-column: 1 / -1;
}

.sermon-verse-toolbar,
.sermon-export-toolbar,
.sermon-library-toolbar {
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  align-items: end;
}

.sermon-library-toolbar label {
  grid-column: span 2;
}

.sermon-library-toolbar #sermonLoadBtn {
  grid-column: span 1;
}

.drawer-detach-toggle {
  min-width: 74px;
}

.semantic-drawer.detached,
.word-drawer.detached {
  transform: none !important;
  left: 24px;
  top: 24px;
  right: auto;
  bottom: auto;
  width: min(760px, calc(100vw - 32px));
  height: min(86vh, 860px);
  max-height: calc(100vh - 24px);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34);
}

.word-drawer.detached {
  width: min(560px, calc(100vw - 32px));
  border-left: 1px solid var(--border-strong);
}

.semantic-drawer.detached.open,
.word-drawer.detached.open {
  transform: none !important;
}

.semantic-drawer.detached:not(.open),
.word-drawer.detached:not(.open) {
  display: none;
}

.detached-drag-handle {
  cursor: move;
}

body.drawer-dragging {
  user-select: none;
}

.semantic-drawer.detached .drawer-resize-handle,
.word-drawer.detached .drawer-resize-handle {
  display: none;
}

.note-sync-pending {
  border-style: dashed;
}

.note-highlight-pill {
  margin-left: 6px;
}

.note-highlight-yellow {
  background: color-mix(in srgb, #f8e37f 35%, var(--surface));
  color: color-mix(in srgb, #6f5600 78%, var(--ink));
}

.note-highlight-blue {
  background: color-mix(in srgb, #8ec7ff 30%, var(--surface));
  color: color-mix(in srgb, #0f3f73 78%, var(--ink));
}

.note-highlight-green {
  background: color-mix(in srgb, #8bdcb0 30%, var(--surface));
  color: color-mix(in srgb, #1d5a37 78%, var(--ink));
}

.note-highlight-pink {
  background: color-mix(in srgb, #f5a5c6 30%, var(--surface));
  color: color-mix(in srgb, #7a2348 78%, var(--ink));
}

.search-form label,
.annotation-form label,
.auth-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.76rem;
  color: var(--muted);
}

.semantic-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 10px;
}

.semantic-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 8px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.7rem;
}

.semantic-legend-note {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1;
  cursor: help;
}

.semantic-legend-swatch {
  width: 14px;
  height: 0;
  border-top: 2px solid var(--border-strong);
}

.semantic-legend-swatch.overlap {
  border-color: #1a1a1a;
}

.semantic-legend-swatch.resonance {
  border-color: #454545;
}

.semantic-legend-swatch.reuse {
  border-color: #6a6a6a;
}

.semantic-legend-swatch.development {
  border-color: #929292;
}

.semantic-map-viewport {
  position: relative;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface-muted);
  height: min(76vh, 780px);
  overflow: hidden;
  touch-action: none;
}

.semantic-map-canvas {
  position: absolute;
  inset: 0;
  display: none;
}

.semantic-map-canvas canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.semantic-map-viewport.three-active .semantic-map-canvas {
  display: block;
}

.semantic-map-viewport.three-active .semantic-map-svg {
  display: none;
}

.semantic-node-tooltip {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 0.75rem;
  color: var(--ink);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.14s ease;
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 20;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.semantic-node-tooltip.visible {
  opacity: 1;
}

.semantic-map-svg {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  user-select: none;
}

.semantic-map-svg.dragging {
  cursor: grabbing;
}

.semantic-edge {
  fill: none;
  stroke: #6f6f6f;
  stroke-width: 1.2;
  opacity: 0.74;
}

.semantic-edge-overlap {
  stroke: #181818;
}

.semantic-edge-resonance {
  stroke: #3f3f3f;
}

.semantic-edge-reuse {
  stroke: #656565;
}

.semantic-edge-development {
  stroke: #888888;
}

.semantic-node {
  cursor: pointer;
}

.semantic-node text {
  fill: var(--ink);
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  font-size: 12px;
  pointer-events: none;
}

.semantic-node-verse .semantic-node-shape {
  fill: var(--surface);
  stroke: var(--ink);
  stroke-width: 1.1;
}

.semantic-node-concept .semantic-node-shape {
  fill: var(--ink);
  stroke: var(--ink);
  stroke-width: 1.1;
}

.semantic-node-concept text {
  fill: var(--surface);
}

.semantic-node.active .semantic-node-shape,
.semantic-node:hover .semantic-node-shape {
  stroke-width: 2;
}

.semantic-node-detail {
  fill: var(--muted);
  font-size: 10px;
}

.semantic-exit-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: none;
}

.semantic-map-viewport.fullscreen {
  position: fixed;
  inset: 10px;
  z-index: 360;
  height: auto;
  border-width: 2px;
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.semantic-map-viewport.fullscreen .semantic-exit-btn {
  display: inline-flex;
}

body.semantic-map-open {
  overflow: hidden;
}

.language-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.language-guide {
  margin: 0 0 10px;
}

.language-guide .stack-item {
  background: var(--surface);
}

.language-guide ul {
  margin: 0;
  padding-left: 16px;
  display: grid;
  gap: 4px;
}

.language-guide li {
  font-size: 0.8rem;
}

.language-translation-model {
  grid-column: 1 / -1;
}

#morphologyView {
  max-height: 360px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}

#domainClustersView {
  max-height: 360px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}

#translationModelView {
  max-height: 360px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}

.root-chart {
  display: grid;
  gap: 7px;
}

.root-bar {
  display: grid;
  grid-template-columns: minmax(70px, 140px) 1fr auto;
  gap: 7px;
  align-items: center;
}

.root-bar-label {
  font-size: 0.8rem;
}

.root-bar-track {
  height: 9px;
  border-radius: 999px;
  background: var(--surface-strong);
  overflow: hidden;
}

.root-bar-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--ink);
}

.root-bar-value {
  font-size: 0.74rem;
  color: var(--muted);
}

.syntax-view {
  display: grid;
  gap: 8px;
}

.syntax-clauses {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.syntax-clause {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 0.72rem;
  color: var(--muted);
  background: var(--surface);
}

.syntax-tokens {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.syntax-token {
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 4px 6px;
  background: var(--surface);
  font-size: 0.76rem;
}

.syntax-token .role {
  display: block;
  margin-top: 2px;
  font-size: 0.65rem;
  color: var(--muted);
}

.domain-jump-btn {
  margin-top: 8px;
  width: auto;
}

.roadmap-list {
  margin: 0;
  padding-left: 16px;
  display: grid;
  gap: 6px;
}

.roadmap-list li {
  font-size: 0.86rem;
}

.inline-verse-link {
  border: none;
  background: transparent;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  font: inherit;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.inline-verse-link:hover {
  opacity: 0.8;
}

.export-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.export-actions .btn {
  width: 100%;
  min-width: 0;
}

@container (max-width: 620px) {
  .panel-sidebar .search-form,
  .panel-sidebar .export-actions {
    grid-template-columns: 1fr;
  }

  .panel-sidebar .search-form .btn {
    grid-column: auto;
  }
}

.roadmap-corpus-registry {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 8px;
}

.corpus-registry-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px;
  background: var(--surface);
  display: grid;
  gap: 6px;
}

.corpus-registry-item h4 {
  margin: 0;
  font-size: 0.86rem;
}

.corpus-registry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.corpus-registry-item p {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.corpus-chip {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  background: var(--surface-muted);
}

.auth-forms {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.auth-form {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px;
  background: var(--surface-muted);
  display: grid;
  gap: 7px;
}

.auth-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

body.founding-gate-open {
  overflow: hidden;
}

.founding-gate {
  position: fixed;
  inset: 0;
  z-index: 520;
  display: grid;
  place-items: center;
  padding: 14px;
  background: rgba(10, 12, 18, 0.72);
  backdrop-filter: blur(4px);
}

.founding-gate-card {
  width: min(430px, 94vw);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 14px;
  background: var(--surface);
  box-shadow: 0 14px 28px rgba(5, 8, 18, 0.26);
  display: grid;
  gap: 7px;
}

.founding-gate-logo {
  width: min(160px, 56%);
  height: auto;
  justify-self: center;
  filter: var(--hero-logo-filter);
}

.founding-gate-card h2 {
  margin: 0;
  text-align: center;
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 600;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  letter-spacing: 0;
}

.founding-logo-tagline {
  margin-top: -7px;
  margin-bottom: 0;
  line-height: 1.16;
}

.founding-logo-tagline-top,
.founding-logo-tagline-bottom {
  display: block;
}

.founding-logo-tagline-bottom {
  margin-top: 3px;
}

.founding-welcome-line {
  margin: 0 0 2px;
  text-align: center;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.01em;
}

#foundingWelcomeRole {
  display: inline-block;
  font-weight: 600;
}

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

#foundingLoginBtn {
  width: 100%;
}

.founding-gate-card .panel-note {
  margin: 0;
  text-align: center;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.35;
}

.founding-gate-card .auth-form {
  padding: 8px;
  gap: 6px;
}

.founding-gate-card input {
  font-size: 0.86rem;
}

.username-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
}

.username-dice-btn {
  align-self: stretch;
  min-width: 58px;
  padding-left: 10px;
  padding-right: 10px;
}

.founding-gate-card .btn {
  padding-top: 8px;
  padding-bottom: 8px;
}

.founding-badge {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  right: 12px;
  z-index: 260;
  border: 1px solid color-mix(in srgb, var(--accent) 70%, #ffffff 30%);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 84%, var(--accent) 16%);
}

.first-login-tour {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 540;
  width: min(460px, calc(100vw - 20px));
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 14px 34px rgba(3, 6, 12, 0.34);
  padding: 10px 12px;
  display: grid;
  gap: 8px;
}

.first-login-tour p {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.38;
}

.first-login-tour-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.hidden {
  display: none;
}

.word-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(430px, 95vw);
  height: 100vh;
  background: var(--surface);
  border-left: 1px solid var(--border-strong);
  z-index: 180;
  padding: 14px;
  overflow-y: auto;
  transform: translateX(102%);
  transition: transform 180ms ease;
}

.word-drawer.open {
  transform: translateX(0);
}

.geo-drawer {
  width: min(520px, 96vw);
  z-index: 182;
}

.geo-drawer-header h3 {
  margin: 0;
}

.geo-drawer-content {
  gap: 10px;
}

.geo-context-item {
  display: grid;
  gap: 5px;
}

.geo-context-item h4 {
  margin: 0;
}

.geo-context-subtitle {
  margin: 0;
  font-size: 0.74rem;
  color: var(--muted);
}

.geo-context-item p {
  margin: 0;
}

.geo-context-item ul {
  margin: 0;
  padding-left: 16px;
  display: grid;
  gap: 4px;
}

.geo-meta-card {
  display: grid;
  gap: 6px;
}

.geo-place-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.geo-place-summary {
  margin: 0;
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.45;
}

.geo-place-coords {
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
  letter-spacing: 0.03em;
}

.geo-map-shell {
  position: relative;
  min-height: min(52vh, 430px);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  overflow: hidden;
  background: #0e1116;
}

.geo-map-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 48%, transparent 60%, rgba(0, 0, 0, 0.34) 100%);
}

.geo-map-canvas {
  position: absolute;
  inset: 0;
}

.geo-map-canvas .leaflet-control-container {
  display: none;
}

.geo-map-canvas .leaflet-tile {
  filter: saturate(0.9) contrast(1.08) brightness(0.92);
}

.geo-map-overlay {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 420;
  border: 1px solid color-mix(in srgb, var(--border-strong) 84%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  color: var(--ink);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
}

.geo-map-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.4;
}

.drawer-resize-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12px;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  z-index: 380;
  cursor: ew-resize;
}

.drawer-resize-handle::after {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  width: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border-strong) 82%, transparent);
  opacity: 0.42;
  transition: opacity 140ms ease;
}

.drawer-resize-handle:hover::after,
.drawer-resizing .drawer-resize-handle::after {
  opacity: 0.85;
}

.drawer-resize-handle-right {
  right: -6px;
}

.drawer-resize-handle-right::after {
  right: 4px;
}

.drawer-resize-handle-left {
  left: -6px;
}

.drawer-resize-handle-left::after {
  left: 4px;
}

body.drawer-resizing {
  user-select: none;
  cursor: ew-resize;
}

.word-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.word-drawer-header h3 {
  margin: 0;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.word-drawer-content {
  display: grid;
  gap: 10px;
}

.word-drawer-content h4 {
  margin: 0 0 6px;
  font-size: 0.82rem;
  text-transform: uppercase;
  color: var(--muted);
}

.word-ai-note {
  margin: 0 0 6px;
  font-size: 0.74rem;
  color: var(--muted);
}

.word-summary-card p {
  margin: 0 0 6px;
}

.word-advanced {
  margin-top: 8px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

.word-advanced summary {
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.word-advanced[open] summary {
  color: var(--ink);
}

.word-advanced-grid {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.word-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  font-size: 0.66rem;
  line-height: 1;
  color: var(--muted);
  cursor: help;
  vertical-align: middle;
}

.reveal {
  opacity: 1;
  transform: none;
  animation: none;
}

.delay-1,
.delay-2,
.delay-3,
.delay-4,
.delay-5,
.delay-6 {
  animation-delay: 0ms;
}

@media (max-width: 1050px) {
  .hero-top {
    align-items: center;
    justify-content: space-between;
  }

  .hero-top-tagline {
    font-size: 0.7rem;
    letter-spacing: 0.01em;
    padding: 0 8px;
  }

  .hero-actions {
    width: auto;
    margin-left: 0;
    justify-content: flex-end;
  }

  .quick-open-group {
    width: auto;
    justify-content: flex-end;
  }

  .quick-sidebar-dock {
    display: flex;
  }

  .layout {
    grid-template-columns: 1fr;
  }

  .panel-reader {
    grid-row: auto;
  }

  .panel-sidebar {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .sidebar-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sidebar-tab {
    font-size: clamp(0.56rem, 0.5rem + 0.18vw, 0.61rem);
    padding: 4px 6px;
    letter-spacing: 0.045em;
  }

  .panel-language,
  .panel-annotations,
  .panel-search,
  .panel-ai {
    grid-column: auto;
  }

  .search-form,
  .search-toolbar,
  .ai-form,
  .semantic-controls,
  .language-controls {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
  }

  .language-grid {
    grid-template-columns: 1fr;
  }

  .language-translation-model {
    grid-column: auto;
  }
}

@media (max-width: 900px) {
  .drawer-detach-toggle {
    display: none !important;
  }
}

@media (max-width: 1200px) {
  .sermon-form-grid {
    grid-template-columns: 1fr;
  }

  .sermon-form-grid > label:first-child,
  .sermon-form-grid #sermonGenerateBtn {
    grid-column: auto;
  }

  .sermon-verse-toolbar,
  .sermon-export-toolbar,
  .sermon-library-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sermon-library-toolbar label,
  .sermon-library-toolbar #sermonLoadBtn {
    grid-column: auto;
  }
}

@media (min-width: 701px) and (max-width: 1366px) {
  .hero-top {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .hero-top-tagline {
    font-size: 0.68rem;
  }

  .hero-actions {
    width: auto;
    min-width: 0;
    margin-left: 0;
    justify-content: flex-end;
    gap: 6px;
  }

  .quick-open-group {
    width: auto;
    min-width: 0;
    display: inline-flex;
    grid-template-columns: none;
    gap: 6px;
    justify-content: flex-end;
  }

  .quick-open-btn {
    width: auto;
    text-align: center;
  }

  .account-popover {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    width: auto;
    max-height: calc(100vh - 24px - env(safe-area-inset-top));
  }

  .theme-popover {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    width: auto;
    max-height: calc(100vh - 24px - env(safe-area-inset-top));
  }
}

@media (max-width: 700px) {
  html {
    font-size: 103.125%;
  }

  body,
  .layout,
  .panel,
  .scripture-grid,
  .verse-list,
  .stack-list {
    -webkit-touch-callout: none;
  }

  .panel-sidebar .panel-note {
    font-size: 0.88rem;
    line-height: 1.56;
  }

  .panel-sidebar .control-help {
    font-size: 0.8rem;
    line-height: 1.46;
  }

  .panel-sidebar .layer-summary-subtitle {
    font-size: 0.86rem;
  }

  .panel-sidebar .stack-item p,
  .panel-sidebar .stack-item li,
  .panel-sidebar .location-note-value,
  .panel-sidebar .status,
  .panel-sidebar .guide-inline-meta {
    font-size: 0.88rem;
    line-height: 1.52;
  }

  .hero {
    padding: 16px 12px 12px;
    text-align: center;
  }

  .hero-top {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .hero-top-tagline {
    display: none;
  }

  .hero-top-brand {
    display: inline-flex;
  }

  .hero-logo-compact {
    width: 108px;
  }

  .hero-logo.hero-logo-compact {
    width: 108px;
  }

  .mobile-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 0.74rem;
    margin-left: auto;
    position: relative;
    z-index: 580;
  }

  .hero-brand-main {
    display: none;
  }

  .hero-actions {
    width: min(300px, calc(100vw - 24px));
    justify-content: flex-start;
    margin: 0;
  }

  #topViewportMenu {
    position: fixed;
    top: calc(56px + env(safe-area-inset-top));
    left: 8px;
    right: 8px;
    width: auto;
    max-width: none;
    max-height: calc(100dvh - 60px - env(safe-area-inset-top));
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 7px;
    padding: 10px;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.34);
    z-index: 570;
    overflow: auto;
    scrollbar-width: auto;
    -ms-overflow-style: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px) scale(0.985);
    transition: opacity 150ms ease, transform 160ms ease, visibility 0s linear 160ms;
  }

  body.mobile-menu-open #topViewportMenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition: opacity 150ms ease, transform 160ms ease, visibility 0s;
  }

  body.mobile-menu-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.26);
    z-index: 560;
  }

  body.mobile-menu-open .quick-sidebar-dock {
    opacity: 0;
    pointer-events: none;
  }

  #topViewportMenu::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  #topViewportMenu .theme-toggle {
    width: 100%;
    font-size: 0.7rem;
    padding: 7px 10px;
    text-align: left;
    justify-content: flex-start;
  }

  #topViewportMenu .quick-open-btn {
    letter-spacing: 0.02em;
  }

  .quick-open-group {
    width: 100%;
    justify-content: flex-start;
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .bookmark-label {
    display: inline;
  }

  .bookmark-btn {
    gap: 6px;
    width: 100%;
    justify-content: flex-start;
    padding: 6px 10px;
  }

  .theme-menu,
  .account-menu {
    width: 100%;
    position: static;
  }

  .theme-menu > summary,
  .account-menu > summary {
    width: 100%;
  }

  .theme-popover,
  .account-popover {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
    max-width: 100%;
    max-height: none;
    margin-top: 8px;
    border-radius: 10px;
    box-shadow: none;
  }

  .share-modal {
    top: max(8px, env(safe-area-inset-top));
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px - env(safe-area-inset-top));
    border-radius: 10px;
    padding: 12px;
  }

  .hero-subtitle {
    white-space: normal;
    text-align: center;
    margin-top: 8px;
  }

  .mobile-menu-icon {
    width: 16px;
    height: 12px;
  }

  .mobile-menu-icon::before,
  .mobile-menu-icon::after {
    transition: transform 150ms ease, top 150ms ease, bottom 150ms ease, box-shadow 150ms ease;
  }

  .mobile-menu-text {
    display: none;
  }

  body.mobile-menu-open .mobile-menu-icon::before {
    top: 5px;
    box-shadow: none;
    transform: rotate(45deg);
  }

  body.mobile-menu-open .mobile-menu-icon::after {
    bottom: 5px;
    transform: rotate(-45deg);
  }

  .layout {
    padding: 12px;
  }

  .app-disclaimer {
    padding: 0 12px;
  }

  .cookie-banner {
    left: 8px;
    right: auto;
    bottom: 8px;
    width: min(460px, calc(100vw - 16px));
    padding: 10px;
  }

  .cookie-banner-actions .btn {
    width: 100%;
  }

  .fab-stack {
    left: 8px;
    top: auto;
    bottom: 12px;
    transform: none;
    flex-direction: row;
    gap: 6px;
  }

  .semantic-fab {
    writing-mode: horizontal-tb;
    padding: 7px 11px;
  }

  .book-selector-toggle {
    left: 8px;
    top: auto;
    bottom: 12px;
    padding: 7px 11px;
    font-size: 0.74rem;
  }

  .quick-sidebar-dock {
    right: 8px;
    bottom: calc(82px + env(safe-area-inset-bottom));
    gap: 7px;
    z-index: 420;
  }

  .quick-sidebar-dock .quick-open-btn {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    padding: 8px 11px;
    border-color: var(--ink);
    background: var(--ink);
    color: var(--surface);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3);
  }

  .book-toc {
    max-height: calc(100vh - 210px);
  }

  .toc-chapters {
    grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  }

  .semantic-drawer {
    top: 8px;
    left: 8px;
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
    border-radius: 10px;
  }

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

  .panel {
    padding: 12px;
    border-radius: 10px;
  }

  .sidebar-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sidebar-action-grid {
    grid-template-columns: 1fr;
  }

  .controls,
  .selector-controls,
  .search-form,
  .search-toolbar,
  .ai-form,
  .semantic-controls,
  .language-controls,
  .auth-forms {
    grid-template-columns: 1fr;
  }

  /* Keep Scripture Reader controls compact on mobile. */
  .panel-reader .verse-controls {
    grid-template-columns: minmax(104px, 0.85fr) minmax(0, 1.15fr);
  }

  .panel-reader .selector-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .panel-reader .selector-controls .control:nth-child(3) {
    grid-column: 1 / -1;
  }

  .btn {
    width: 100%;
  }

  .auth-actions {
    flex-direction: column;
  }

  .semantic-map-viewport {
    height: min(66vh, 430px);
  }

  .semantic-map-viewport.fullscreen {
    inset: 4px;
    border-radius: 8px;
  }

  .root-bar {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .account-popover,
  .theme-popover {
    overflow-y: visible;
  }

  .sm-logic-strip {
    grid-template-columns: 1fr;
  }

  .sm-logic-arrow {
    display: none;
  }
}

@media (min-width: 701px) {
  .hero-top-brand {
    display: inline-flex;
  }

  .hero-brand-main {
    display: none;
  }
}

@media (min-width: 901px) {
  .hero {
    padding: 12px 22px 10px;
  }

  .hero-top-brand {
    display: inline-flex;
  }

  .hero-brand-main {
    display: none;
  }

  #topViewportMenu {
    margin-left: auto;
    max-width: none;
    flex-wrap: nowrap;
    overflow: visible;
  }

  #topViewportMenu .theme-toggle,
  #topViewportMenu .quick-open-btn {
    font-size: 0.62rem;
    padding: 4px 8px;
    letter-spacing: 0.03em;
  }

  #openLivedTopBtn,
  #openStudyModeDrawerTopBtn {
    display: none;
  }

  .hero-subtitle {
    margin: 6px 0 0;
    max-width: 780px;
    text-align: left;
    font-size: 0.84rem;
  }

  #topViewportMenu .account-menu,
  #topViewportMenu .theme-menu {
    z-index: 430;
  }

  #topViewportMenu .account-popover,
  #topViewportMenu .theme-popover {
    z-index: 1220;
  }
}

@container (max-width: 760px) {
  .panel-sidebar .language-controls {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .panel-sidebar .language-controls .btn {
    width: 100%;
    justify-self: stretch;
  }

  .panel-sidebar .language-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .panel-sidebar .language-guide {
    margin-bottom: 8px;
  }

  .panel-sidebar .language-guide li {
    font-size: 0.77rem;
    line-height: 1.42;
  }

  .panel-sidebar #morphologyView,
  .panel-sidebar #domainClustersView,
  .panel-sidebar #translationModelView {
    max-height: 260px;
  }
}

/* ================================================================
   Study Mode Drawer
   ================================================================ */

.study-mode-drawer {
  --study-topbar-gap: 10px;
}

.study-mode-topbar {
  position: sticky;
  top: -14px;
  z-index: 14;
  margin: -14px -14px var(--study-topbar-gap);
  padding: 14px 14px 8px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.study-mode-topbar .semantic-drawer-header {
  margin-bottom: 8px;
}

.study-mode-drawer .semantic-drawer-content {
  gap: 10px;
}

/* Color tokens for structure markers */
:root {
  --sm-color-repeat: #8b5cf6;
  --sm-color-keyword: #ef4444;
  --sm-color-anaphora: #f59e0b;
}

.dark {
  --sm-color-repeat: #a78bfa;
  --sm-color-keyword: #f87171;
  --sm-color-anaphora: #fbbf24;
}

/* ---- Tabs ---- */
.study-mode-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  white-space: nowrap;
}

.study-mode-tab {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  padding: 5px 12px;
  border-radius: var(--radius);
  letter-spacing: 0.02em;
  transition: background 120ms, color 120ms;
  white-space: nowrap;
  flex: 0 0 auto;
}

.study-mode-tab:hover {
  color: var(--ink);
  background: var(--surface-strong);
}

.study-mode-tab.is-active {
  color: var(--ink);
  background: var(--surface-strong);
  font-weight: 600;
}

/* ---- Panels ---- */
.study-mode-panel {
  display: none;
}

.study-mode-panel.is-active {
  display: block;
}

.study-mode-panel > .status:empty {
  display: none;
  min-height: 0;
  margin: 0;
}

/* ---- Shared: verse text header ---- */
.sm-verse-text {
  font-family: "IBM Plex Serif", Georgia, serif;
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 9px;
  padding: 10px 12px;
  border-left: 3px solid var(--border-strong);
  background: var(--surface-strong);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* ---- Line Mode ---- */
.sm-word-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}

.sm-word-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  user-select: text;
  -webkit-user-select: text;
}

.sm-pos {
  font-size: 0.68rem;
  color: var(--muted);
  letter-spacing: 0.05em;
}

.sm-surface {
  font-family: "IBM Plex Serif", Georgia, serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}

.sm-lemma {
  font-size: 0.78rem;
  color: var(--muted);
  font-style: italic;
}

.sm-lemma-empty {
  opacity: 0.4;
}

.sm-strongs {
  font-size: 0.72rem;
  font-family: "IBM Plex Mono", monospace;
  color: var(--muted);
}

.sm-morph-label {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 2px;
}

.sm-source-term {
  font-style: normal;
  font-family: "IBM Plex Serif", Georgia, serif;
}

.sm-source-meta {
  font-size: 0.68rem;
}

.sm-source-pronunciation {
  font-size: 0.68rem;
}

.sm-source-empty {
  opacity: 0.55;
}

.sm-source-term.has-pronunciation {
  position: relative;
  width: fit-content;
  max-width: 100%;
  cursor: help;
  border-bottom: 1px dotted var(--border-strong);
}

.sm-source-term.has-pronunciation:hover::after {
  content: "Pronunciation: " attr(data-pronunciation);
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  max-width: min(250px, 70vw);
  width: max-content;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 5px 7px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
  font-size: 0.7rem;
  line-height: 1.3;
  z-index: 30;
  white-space: normal;
  pointer-events: none;
}

.sm-word-insight {
  display: block;
  font-size: 0.68rem;
  font-style: italic;
  color: var(--muted);
  line-height: 1.35;
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid var(--border, rgba(128,128,128,0.2));
}

/* ---- Structure Mode ---- */
.sm-mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  margin: 0 0 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-muted);
}

.sm-mode-btn {
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.2;
  padding: 4px 10px;
  cursor: pointer;
}

.sm-mode-btn:hover {
  color: var(--ink);
}

.sm-mode-btn.is-active {
  color: var(--ink);
  border-color: var(--border);
  background: var(--surface);
}

.sm-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.sm-badge {
  font-size: 0.74rem;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--surface);
}

.sm-badge-secondary {
  background: var(--surface-strong);
  color: var(--ink);
  border: 1px solid var(--border);
}

.sm-badge-quiet {
  background: none;
  color: var(--muted);
  border: 1px solid var(--border);
}

.sm-markers {
  display: grid;
  gap: 8px;
}

.sm-structure-takeaway {
  margin-bottom: 10px;
}

.sm-structure-takeaway p {
  margin: 0;
  line-height: 1.45;
}

.sm-structure-summary {
  margin-bottom: 10px;
}

.sm-structure-summary h4 {
  margin: 0 0 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sm-structure-summary p {
  margin: 0;
}

.sm-structure-stats {
  margin-top: -6px;
}

.sm-structure-block {
  margin-bottom: 10px;
}

.sm-structure-block h4 {
  margin: 0 0 6px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sm-connector-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sm-logic-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 7px;
  align-items: center;
}

.sm-logic-arrow {
  font-size: 0.84rem;
  color: var(--muted);
}

.sm-logic-step {
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-muted);
  color: var(--ink);
  font-family: inherit;
  text-align: left;
  padding: 7px 8px;
  display: grid;
  gap: 2px;
  cursor: pointer;
}

.sm-logic-label {
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.sm-logic-text {
  font-size: 0.79rem;
  line-height: 1.35;
}

.sm-verse-text-interactive {
  user-select: text;
  -webkit-user-select: text;
}

.sm-verse-token {
  border-radius: 4px;
  padding: 0 1px;
  transition: background-color 120ms ease, box-shadow 120ms ease;
}

.sm-verse-token.is-structure-focus {
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--border-strong) 78%, transparent) inset;
}

.sm-focus-controls {
  display: flex;
  justify-content: flex-end;
  margin: -4px 0 8px;
}

.sm-focus-clear {
  padding: 5px 10px;
  font-size: 0.72rem;
}

.sm-reading-path {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 5px;
}

.sm-reading-path li {
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--ink);
}

.sm-key-term-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sm-key-term-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 8px;
  background: var(--surface-muted);
  font-size: 0.76rem;
  color: var(--ink);
}

.sm-connector-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 9px;
  background: var(--surface-muted);
  font-family: inherit;
  cursor: pointer;
}

.sm-connector-pill strong {
  font-size: 0.78rem;
  font-weight: 600;
}

.sm-connector-pill small {
  font-size: 0.67rem;
  color: var(--muted);
}

.structure-connector-label {
  display: inline-block;
  border-bottom: 1px dotted var(--border-strong);
  cursor: help;
}

.sm-connector-secondary {
  font-size: 0.64rem;
  color: var(--muted);
}

.sm-connector-secondary-inline {
  font-size: 0.78rem;
  color: var(--muted);
}

.sm-clause-list {
  display: grid;
  gap: 7px;
}

.sm-clause-row {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 9px;
  background: var(--surface-muted);
  font-family: inherit;
  color: var(--ink);
  text-align: left;
  width: 100%;
  cursor: pointer;
}

.sm-clause-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.sm-clause-index {
  font-size: 0.71rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.sm-clause-count {
  font-size: 0.7rem;
  color: var(--muted);
}

.sm-clause-row p {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.46;
  color: inherit;
}

.sm-marker {
  padding-left: 12px !important;
}

.sm-marker-type {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 2px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sm-positions {
  font-weight: 400;
  font-style: italic;
}

.sm-marker-word {
  font-size: 0.9rem;
  margin: 0 0 3px;
}

.sm-marker-note {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
}

.sm-focus-target {
  transition: box-shadow 120ms ease, border-color 120ms ease, background-color 120ms ease;
  cursor: pointer;
}

.sm-focus-target.is-focus-active {
  border-color: var(--border-strong);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--border-strong) 78%, transparent) inset;
  background: color-mix(in srgb, var(--surface-strong) 72%, var(--surface) 28%);
}

.sm-focus-target:focus-visible,
.sm-inline-focus:focus-visible {
  outline: 2px solid var(--border-strong);
  outline-offset: 1px;
}

.sm-marker-connector-hint {
  margin: 0 0 4px;
  font-size: 0.74rem;
  color: var(--muted);
}

.sm-inline-focus {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.76rem;
  line-height: 1.2;
  padding: 2px 7px;
  cursor: pointer;
}

.sm-marker-empty p {
  margin: 0;
}

.sm-marker-empty p + p {
  margin-top: 5px;
  color: var(--muted);
}

/* ---- Theme Mode ---- */
.sm-concept-group {
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.sm-theme-intro {
  margin: 0 0 10px;
  font-size: 0.82rem;
  line-height: 1.42;
  color: var(--muted);
}

.sm-concept-name {
  font-size: 0.85rem;
  font-weight: 600;
  padding: 9px 12px;
  cursor: pointer;
  background: var(--surface-strong);
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
}

.sm-concept-name::-webkit-details-marker {
  display: none;
}

.sm-concept-count {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--muted);
}

.sm-concept-meta {
  padding: 9px 10px;
  display: grid;
  gap: 7px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-muted);
}

.sm-concept-summary {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ink);
}

.sm-concept-prompts {
  margin: 0;
  padding-left: 16px;
  display: grid;
  gap: 4px;
}

.sm-concept-prompts li {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
}

.sm-concept-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sm-concept-actions .btn {
  padding: 6px 9px;
  font-size: 0.72rem;
}

.sm-verse-list {
  display: grid;
  gap: 1px;
  background: var(--border);
}

.sm-verse-link {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: baseline;
  padding: 8px 12px;
  background: var(--surface);
  border: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 100ms;
}

.sm-verse-link:hover {
  background: var(--surface-strong);
}

.sm-verse-id {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.sm-corpus-tag {
  font-size: 0.64rem;
  font-weight: 500;
  color: var(--muted);
  margin-left: 3px;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 3px;
}

.sm-verse-snippet {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.35;
}

/* ---- Trajectory Mode ---- */
.study-mode-trajectory-controls {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: end;
  margin-bottom: 12px;
}

.sm-trajectory-heading {
  font-size: 0.85rem;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sm-trajectory-progression {
  margin: -4px 0 12px;
  padding-left: 17px;
  display: grid;
  gap: 4px;
}

.sm-trajectory-progression li {
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--muted);
}

.sm-trajectory-prompts {
  margin: 0 0 12px;
}

.sm-trajectory-prompts h4 {
  margin: 0 0 6px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.sm-trajectory-prompts ul {
  margin: 0;
  padding-left: 16px;
  display: grid;
  gap: 5px;
}

.sm-trajectory-prompts li {
  font-size: 0.82rem;
  line-height: 1.42;
}

.sm-trajectory-timeline {
  display: grid;
  gap: 12px;
}

.sm-trajectory-era {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.sm-era-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface-strong);
  border-bottom: 1px solid var(--border);
}

.sm-era-icon {
  font-size: 0.75rem;
  font-weight: 700;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--surface);
  flex-shrink: 0;
}

.sm-era-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  flex: 1;
}

.sm-era-count {
  font-size: 0.72rem;
  color: var(--muted);
}

.sm-era-summary {
  margin: 0;
  padding: 8px 12px 6px;
  font-size: 0.8rem;
  line-height: 1.42;
  color: var(--muted);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

/* Responsive: smaller screens */
@media (max-width: 700px) {
  .parallel-line {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .parallel-line-label {
    justify-self: start;
  }

  .sm-word-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  }

  .study-mode-trajectory-controls {
    grid-template-columns: 1fr;
  }

}