/* Reader workspace: compact focus, quiet controls, and a warmer research material. */
:root {
  --lux-ink: #0b1112;
  --lux-graphite: #11191a;
  --lux-panel: #151e1f;
  --lux-panel-soft: rgba(21, 30, 31, .82);
  --lux-paper: #f0e5c7;
  --lux-paper-muted: #c8bea5;
  --lux-gold: #c8a86b;
  --lux-gold-soft: rgba(200, 168, 107, .22);
  --lux-teal: #67d2c2;
  --lux-teal-soft: rgba(103, 210, 194, .18);
}

/* Protect the reader from stale drag values: a closed pane may be narrow,
   an open pane always gets enough room for its controls and text. */
@media (min-width: 1121px) {
  body.uw-active[data-uw-bridge="reader"] > .app:not(.side-collapsed) {
    grid-template-columns: minmax(0, 1fr) minmax(360px, min(var(--side-w), calc(100vw - 420px))) !important;
  }

  body.uw-active[data-uw-bridge="reader"] > .app:not(.side-collapsed) > .side {
    min-width: 360px !important;
  }

  body.uw-active[data-uw-bridge="reader"] > .app.side-collapsed {
    grid-template-columns: minmax(0, 1fr) 76px !important;
  }
}

/* Keep the drag target inside the visible Reader surface. The legacy handle
   used a negative offset and was clipped by .side { overflow: hidden }. */
body.uw-active[data-uw-bridge="reader"] .app:not(.side-collapsed) > .side > .side-resizer {
  left: 0 !important;
  width: 18px !important;
  z-index: 40 !important;
  touch-action: none;
}

@media (max-width: 1120px) {
  body.uw-active[data-uw-bridge="reader"] .app > .side > .side-top-resizer {
    display: flex !important;
    left: 14px !important;
    right: 14px !important;
    height: 18px !important;
    top: 0 !important;
    z-index: 40 !important;
    touch-action: none;
  }
}

/* The context bar is one continuous instrument, not a row of unrelated cards. */
body.uw-active[data-uw-bridge="reader"] .uw-contextbar {
  height: 46px !important;
  grid-template-columns: 148px minmax(176px, 224px) minmax(0, 1fr) minmax(138px, 186px) 164px !important;
  gap: 6px !important;
  padding: 5px 10px !important;
  border-top: 1px solid rgba(103, 210, 194, .11) !important;
  border-bottom: 1px solid rgba(200, 168, 107, .2) !important;
  background:
    linear-gradient(180deg, rgba(21, 31, 31, .94), rgba(10, 16, 17, .98)),
    radial-gradient(circle at 28% 0%, rgba(103, 210, 194, .08), transparent 40%) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 246, 218, .045) !important;
}

body.uw-active[data-uw-bridge="reader"] .uw-contextbar::after {
  content: '';
  position: absolute;
  inset: auto 10px 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 168, 107, .42), rgba(103, 210, 194, .45), transparent);
  opacity: .75;
  pointer-events: none;
}

body.uw-active[data-uw-bridge="reader"] .uw-tool-current,
body.uw-active[data-uw-bridge="reader"] .uw-ref-form,
body.uw-active[data-uw-bridge="reader"] .uw-reader-toggle,
body.uw-active[data-uw-bridge="reader"] .uw-truth-button {
  min-width: 0 !important;
  height: 34px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(200, 168, 107, .19) !important;
  background: linear-gradient(180deg, rgba(31, 42, 42, .78), rgba(14, 21, 22, .86)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 244, 210, .04), 0 5px 14px rgba(0, 0, 0, .12) !important;
  transition: border-color .22s ease, background .22s ease, transform .22s ease, box-shadow .22s ease !important;
}

body.uw-active[data-uw-bridge="reader"] .uw-tool-current:hover,
body.uw-active[data-uw-bridge="reader"] .uw-ref-form:hover,
body.uw-active[data-uw-bridge="reader"] .uw-reader-toggle:hover,
body.uw-active[data-uw-bridge="reader"] .uw-truth-button:hover {
  border-color: rgba(103, 210, 194, .5) !important;
  background: linear-gradient(180deg, rgba(35, 53, 52, .92), rgba(17, 28, 28, .92)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 244, 210, .06), 0 8px 18px rgba(0, 0, 0, .2) !important;
  transform: translateY(-1px);
}

body.uw-active[data-uw-bridge="reader"] .uw-tool-current {
  padding: 0 9px !important;
  border-left: 2px solid var(--lux-teal) !important;
}

body.uw-active[data-uw-bridge="reader"] .uw-tool-current i {
  width: 3px !important;
  height: 16px !important;
  margin-right: 7px !important;
  background: linear-gradient(var(--lux-teal), var(--lux-gold)) !important;
  box-shadow: 0 0 12px rgba(103, 210, 194, .28) !important;
}

body.uw-active[data-uw-bridge="reader"] .uw-tool-current small,
body.uw-active[data-uw-bridge="reader"] .uw-ref-form label,
body.uw-active[data-uw-bridge="reader"] .uw-focus-summary > span,
body.uw-active[data-uw-bridge="reader"] .uw-truth-button small {
  color: rgba(103, 210, 194, .72) !important;
  font-size: .46rem !important;
  letter-spacing: .16em !important;
  line-height: 1 !important;
}

body.uw-active[data-uw-bridge="reader"] .uw-tool-current strong,
body.uw-active[data-uw-bridge="reader"] .uw-focus-summary strong,
body.uw-active[data-uw-bridge="reader"] .uw-truth-button strong {
  color: var(--lux-paper) !important;
  font-size: .7rem !important;
  letter-spacing: .02em !important;
}

body.uw-active[data-uw-bridge="reader"] .uw-tool-current b {
  color: var(--lux-gold) !important;
  font-size: .72rem !important;
}

body.uw-active[data-uw-bridge="reader"] .uw-ref-form {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  padding: 0 9px !important;
  gap: 7px !important;
}

body.uw-active[data-uw-bridge="reader"] .uw-ref-form input {
  min-width: 0 !important;
  height: 28px !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(240, 229, 199, .24) !important;
  border-radius: 0 !important;
  color: var(--lux-paper) !important;
  background: transparent !important;
  font: 600 .72rem/1 ui-monospace, SFMono-Regular, Menlo, monospace !important;
  outline: none !important;
}

body.uw-active[data-uw-bridge="reader"] .uw-ref-form input:focus {
  border-bottom-color: var(--lux-teal) !important;
  box-shadow: 0 5px 12px -8px var(--lux-teal) !important;
}

body.uw-active[data-uw-bridge="reader"] .uw-ref-form button {
  height: 26px !important;
  padding: 0 8px !important;
  border: 1px solid rgba(200, 168, 107, .28) !important;
  border-radius: 7px !important;
  color: var(--lux-paper) !important;
  background: rgba(200, 168, 107, .08) !important;
  font: 600 .52rem/1 ui-monospace, SFMono-Regular, Menlo, monospace !important;
  letter-spacing: .1em !important;
  transition: background .2s ease, border-color .2s ease !important;
}

body.uw-active[data-uw-bridge="reader"] .uw-ref-form button:hover {
  border-color: var(--lux-gold) !important;
  background: rgba(200, 168, 107, .18) !important;
}

body.uw-active[data-uw-bridge="reader"] .uw-focus-summary {
  min-width: 0 !important;
  padding: 0 10px !important;
  border-left: 1px solid rgba(240, 229, 199, .1) !important;
  border-right: 1px solid rgba(240, 229, 199, .1) !important;
}

body.uw-active[data-uw-bridge="reader"] .uw-focus-summary strong {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.uw-active[data-uw-bridge="reader"] .uw-focus-summary small {
  color: rgba(200, 190, 165, .67) !important;
  font-size: .52rem !important;
}

body.uw-active[data-uw-bridge="reader"] .uw-handoff {
  min-width: 0 !important;
}

body.uw-active[data-uw-bridge="reader"] .uw-handoff button {
  width: 100% !important;
  height: 32px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(200, 168, 107, .34) !important;
  border-radius: 8px !important;
  color: var(--lux-paper) !important;
  background: linear-gradient(180deg, rgba(200, 168, 107, .12), rgba(200, 168, 107, .04)) !important;
  font: 600 .58rem/1 ui-monospace, SFMono-Regular, Menlo, monospace !important;
  letter-spacing: .08em !important;
  transition: transform .22s ease, border-color .22s ease, background .22s ease !important;
}

body.uw-active[data-uw-bridge="reader"] .uw-handoff button:hover {
  transform: translateY(-1px);
  border-color: var(--lux-gold) !important;
  background: rgba(200, 168, 107, .18) !important;
}

body.uw-active[data-uw-bridge="reader"] .uw-reader-toggle {
  justify-content: center !important;
  padding: 0 10px !important;
  border-color: rgba(103, 210, 194, .3) !important;
}

body.uw-active[data-uw-bridge="reader"] .uw-reader-toggle span,
body.uw-active[data-uw-bridge="reader"] .uw-reader-toggle small {
  color: var(--lux-teal) !important;
}

body.uw-active[data-uw-bridge="reader"] .uw-truth-button {
  justify-content: flex-end !important;
  padding: 0 8px !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.uw-active[data-uw-bridge="reader"] .uw-truth-button i {
  width: 7px !important;
  height: 7px !important;
  margin-right: 7px !important;
  border-radius: 50% !important;
  background: var(--truth, var(--lux-teal)) !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--truth, var(--lux-teal)) 55%, transparent) !important;
}

/* Reader controls: a single segmented instrument with a tactile primary state. */
body.uw-active[data-uw-bridge="reader"] .app .side {
  border-color: rgba(200, 168, 107, .23) !important;
  background:
    linear-gradient(180deg, rgba(20, 29, 29, .98), rgba(10, 16, 17, .98)),
    radial-gradient(circle at 100% 0%, rgba(103, 210, 194, .08), transparent 45%) !important;
  box-shadow: -14px 0 34px rgba(0, 0, 0, .16), inset 1px 0 0 rgba(255, 244, 210, .035) !important;
}

body.uw-active[data-uw-bridge="reader"] .app .side-head {
  padding: 12px 13px 11px !important;
  border-bottom: 1px solid rgba(200, 168, 107, .18) !important;
  background: linear-gradient(180deg, rgba(31, 43, 42, .76), rgba(16, 24, 25, .58)) !important;
}

body.uw-active[data-uw-bridge="reader"] .app .side-headline {
  align-items: center !important;
  gap: 9px !important;
}

body.uw-active[data-uw-bridge="reader"] .app .side-kicker {
  color: rgba(103, 210, 194, .8) !important;
  font-size: .48rem !important;
  letter-spacing: .16em !important;
}

body.uw-active[data-uw-bridge="reader"] .app .side-title {
  color: var(--lux-paper) !important;
  font-family: ui-serif, Georgia, serif !important;
  font-size: 1.12rem !important;
  letter-spacing: .01em !important;
}

body.uw-active[data-uw-bridge="reader"] .app .side-copy {
  color: rgba(200, 190, 165, .7) !important;
  font-size: .7rem !important;
}

body.uw-active[data-uw-bridge="reader"] .app .reader-tools {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

body.uw-active[data-uw-bridge="reader"] .app .tabs {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  min-width: 0 !important;
  gap: 3px !important;
  padding: 3px !important;
  border: 1px solid rgba(200, 168, 107, .2) !important;
  border-radius: 9px !important;
  background: rgba(7, 12, 13, .62) !important;
  box-shadow: inset 0 1px 0 rgba(255, 244, 210, .035) !important;
}

body.uw-active[data-uw-bridge="reader"] .app .tab {
  min-height: 29px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 6px !important;
  color: rgba(200, 190, 165, .67) !important;
  background: transparent !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif !important;
  font-size: .7rem !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  letter-spacing: .075em !important;
  transition: color .2s ease, background .2s ease, box-shadow .2s ease !important;
}

body.uw-active[data-uw-bridge="reader"] .app .tab:hover {
  color: var(--lux-paper) !important;
  background: rgba(103, 210, 194, .08) !important;
}

body.uw-active[data-uw-bridge="reader"] .app .tab.act {
  color: #171817 !important;
  background: linear-gradient(180deg, #f4e7c6, #c6a766) !important;
  box-shadow: 0 3px 10px rgba(200, 168, 107, .18), inset 0 1px 0 rgba(255, 250, 232, .72) !important;
}

body.uw-active[data-uw-bridge="reader"] .app .tab.act::after {
  display: none !important;
}

body.uw-active[data-uw-bridge="reader"] .app .reader-word-toggle {
  min-width: 82px !important;
  min-height: 31px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(103, 210, 194, .28) !important;
  border-radius: 8px !important;
  color: var(--lux-teal) !important;
  background: rgba(103, 210, 194, .07) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif !important;
  font-size: .65rem !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  letter-spacing: .09em !important;
  transition: border-color .2s ease, background .2s ease, transform .2s ease !important;
}

body.uw-active[data-uw-bridge="reader"] .app .reader-word-toggle:hover {
  border-color: var(--lux-teal) !important;
  background: rgba(103, 210, 194, .14) !important;
  transform: translateY(-1px);
}

body.uw-active[data-uw-bridge="reader"] .app .side-collapse {
  width: 30px !important;
  height: 30px !important;
  border: 1px solid rgba(200, 168, 107, .25) !important;
  border-radius: 8px !important;
  color: var(--lux-paper-muted) !important;
  background: rgba(200, 168, 107, .06) !important;
  transition: color .2s ease, border-color .2s ease, transform .2s ease !important;
}

body.uw-active[data-uw-bridge="reader"] .app .side-collapse:hover {
  color: var(--lux-paper) !important;
  border-color: var(--lux-gold) !important;
  transform: translateY(-1px);
}

body.uw-active[data-uw-bridge="reader"] .app .focussearch {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 10px !important;
  padding: 0 9px !important;
  height: 37px !important;
  border: 1px solid rgba(103, 210, 194, .17) !important;
  border-radius: 9px !important;
  background: rgba(6, 12, 13, .42) !important;
}

body.uw-active[data-uw-bridge="reader"] .app .focussearch input {
  min-width: 0 !important;
  height: 28px !important;
  border: 0 !important;
  color: var(--lux-paper) !important;
  background: transparent !important;
  font-size: .68rem !important;
  outline: none !important;
}

body.uw-active[data-uw-bridge="reader"] .app .focussearch input::placeholder {
  color: rgba(200, 190, 165, .53) !important;
}

body.uw-active[data-uw-bridge="reader"] .app .focussearch button {
  height: 25px !important;
  padding: 0 5px !important;
  border: 0 !important;
  color: rgba(200, 190, 165, .67) !important;
  background: transparent !important;
  font: 600 .48rem/1 ui-monospace, SFMono-Regular, Menlo, monospace !important;
  letter-spacing: .08em !important;
}

body.uw-active[data-uw-bridge="reader"] .app .focussearch button:hover {
  color: var(--lux-teal) !important;
}

body.uw-active[data-uw-bridge="reader"] .app .rnav {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 30px 30px !important;
  gap: 5px !important;
  padding: 9px 11px !important;
  border-bottom: 1px solid rgba(200, 168, 107, .16) !important;
  background: rgba(12, 18, 19, .55) !important;
}

body.uw-active[data-uw-bridge="reader"] .app .rnav select,
body.uw-active[data-uw-bridge="reader"] .app .rnav button {
  min-width: 0 !important;
  height: 32px !important;
  border: 1px solid rgba(200, 168, 107, .2) !important;
  border-radius: 7px !important;
  color: var(--lux-paper) !important;
  background: rgba(28, 38, 38, .72) !important;
  font: 600 .6rem/1 ui-monospace, SFMono-Regular, Menlo, monospace !important;
}

body.uw-active[data-uw-bridge="reader"] .app .rnav button {
  color: var(--lux-gold) !important;
  font-size: 1rem !important;
}

body.uw-active[data-uw-bridge="reader"] .app .rnav select:focus,
body.uw-active[data-uw-bridge="reader"] .app .rnav button:hover {
  border-color: var(--lux-teal) !important;
  background: rgba(103, 210, 194, .1) !important;
  outline: none !important;
}

body.uw-active[data-uw-bridge="reader"] .app .rbody {
  background: linear-gradient(180deg, rgba(17, 25, 26, .74), rgba(10, 16, 17, .96)) !important;
}

body.uw-active[data-uw-bridge="reader"] .app .rbody .chapter-title,
body.uw-active[data-uw-bridge="reader"] .app .rbody .chtitle {
  color: var(--lux-paper) !important;
  font-family: ui-serif, Georgia, serif !important;
  letter-spacing: .01em !important;
}

body.uw-active[data-uw-bridge="reader"] .app .rbody .verse,
body.uw-active[data-uw-bridge="reader"] .app .rbody .vtext {
  color: rgba(240, 229, 199, .9) !important;
  line-height: 1.62 !important;
}

/* A smaller reading-focus plate leaves the cross-reference canvas visible. */
body.uw-active[data-uw-bridge="reader"] #VIZHUD {
  top: 14px !important;
  left: 14px !important;
  width: min(276px, calc(100% - 28px)) !important;
  gap: 7px !important;
  padding: 10px !important;
  border: 1px solid rgba(103, 210, 194, .3) !important;
  border-radius: 13px !important;
  background:
    linear-gradient(145deg, rgba(19, 31, 31, .96), rgba(11, 18, 19, .94)),
    radial-gradient(circle at 0 0, rgba(200, 168, 107, .12), transparent 58%) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 244, 210, .06) !important;
  backdrop-filter: blur(16px) saturate(1.12) !important;
  animation: reader-focus-plate-in .48s cubic-bezier(.16, 1, .3, 1) both !important;
}

body.uw-active[data-uw-bridge="reader"] #VIZHUD::before {
  width: 2px !important;
  border-radius: 2px !important;
  background: linear-gradient(180deg, var(--lux-teal), var(--lux-gold)) !important;
  box-shadow: 0 0 12px rgba(103, 210, 194, .24) !important;
}

body.uw-active[data-uw-bridge="reader"] #VIZHUD .vizhud-top {
  align-items: center !important;
  gap: 7px !important;
}

body.uw-active[data-uw-bridge="reader"] #VIZHUD .vizhud-k {
  color: rgba(103, 210, 194, .82) !important;
  font-size: .43rem !important;
  letter-spacing: .16em !important;
}

body.uw-active[data-uw-bridge="reader"] #VIZHUD .vizhud-title {
  color: var(--lux-paper) !important;
  font-family: ui-serif, Georgia, serif !important;
  font-size: 1.18rem !important;
  line-height: 1.02 !important;
}

body.uw-active[data-uw-bridge="reader"] #VIZHUD .vizhud-year {
  flex: 0 0 auto !important;
  padding: 5px 7px !important;
  border: 1px solid rgba(200, 168, 107, .33) !important;
  border-radius: 7px !important;
  color: var(--lux-paper) !important;
  background: rgba(200, 168, 107, .08) !important;
  font-size: .46rem !important;
}

body.uw-active[data-uw-bridge="reader"] #VIZHUD .vizhud-text,
body.uw-active[data-uw-bridge="reader"] #VIZHUD .vizhud-refs,
body.uw-active[data-uw-bridge="reader"] #VIZHUD > .vizhud-k:last-child {
  display: none !important;
}

body.uw-active[data-uw-bridge="reader"] #VIZHUD .vizhud-metrics {
  gap: 5px !important;
}

body.uw-active[data-uw-bridge="reader"] #VIZHUD .vizhud-metric {
  min-width: 0 !important;
  padding: 7px 6px !important;
  border: 1px solid rgba(200, 168, 107, .15) !important;
  border-radius: 8px !important;
  background: rgba(5, 11, 12, .42) !important;
}

body.uw-active[data-uw-bridge="reader"] #VIZHUD .vizhud-metric strong {
  color: var(--lux-paper) !important;
  font-size: .9rem !important;
}

body.uw-active[data-uw-bridge="reader"] #VIZHUD .vizhud-metric span {
  color: rgba(103, 210, 194, .72) !important;
  font-size: .4rem !important;
  letter-spacing: .1em !important;
}

body.uw-active[data-uw-bridge="reader"] #VIZHUD .vizhud-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 5px !important;
  padding-top: 1px !important;
  border-top-color: rgba(200, 168, 107, .14) !important;
}

body.uw-active[data-uw-bridge="reader"] #VIZHUD .vizhud-btn {
  min-width: 0 !important;
  min-height: 25px !important;
  padding: 0 6px !important;
  border: 1px solid rgba(200, 168, 107, .18) !important;
  border-radius: 6px !important;
  color: rgba(240, 229, 199, .78) !important;
  background: rgba(200, 168, 107, .05) !important;
  font-size: .4rem !important;
  letter-spacing: .08em !important;
  white-space: nowrap !important;
}

body.uw-active[data-uw-bridge="reader"] #VIZHUD .vizhud-btn:hover {
  border-color: rgba(103, 210, 194, .62) !important;
  color: var(--lux-teal) !important;
  background: rgba(103, 210, 194, .09) !important;
  transform: translateY(-1px);
}

@keyframes reader-focus-plate-in {
  from { opacity: 0; transform: translateY(-8px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 980px) {
  body.uw-active[data-uw-bridge="reader"] .uw-contextbar {
    grid-template-columns: 132px minmax(160px, 210px) minmax(0, 1fr) 142px !important;
  }

  body.uw-active[data-uw-bridge="reader"] .uw-focus-summary small,
  body.uw-active[data-uw-bridge="reader"] .uw-truth-button small,
  body.uw-active[data-uw-bridge="reader"] .uw-truth-button strong {
    display: none !important;
  }

  body.uw-active[data-uw-bridge="reader"] .uw-truth-button {
    width: 32px !important;
    padding: 0 !important;
  }
}

@media (max-width: 760px) {
  body.uw-active[data-uw-bridge="reader"] .uw-contextbar {
    height: auto !important;
    min-height: 44px !important;
    grid-template-columns: minmax(112px, 1fr) minmax(0, 1fr) 38px !important;
    grid-template-areas: "tool ref truth" "focus focus focus" !important;
    gap: 5px !important;
  }

  body.uw-active[data-uw-bridge="reader"] .uw-tool-current { grid-area: tool; }
  body.uw-active[data-uw-bridge="reader"] .uw-ref-form { grid-area: ref; }
  body.uw-active[data-uw-bridge="reader"] .uw-truth-button { grid-area: truth; }
  body.uw-active[data-uw-bridge="reader"] .uw-focus-summary { grid-area: focus; min-height: 28px !important; border: 0 !important; }
  body.uw-active[data-uw-bridge="reader"] .uw-handoff,
  body.uw-active[data-uw-bridge="reader"] .uw-reader-toggle { display: none !important; }

  body.uw-active[data-uw-bridge="reader"] .app .side-head { padding: 10px !important; }
  body.uw-active[data-uw-bridge="reader"] .app .side-headline { flex-wrap: wrap !important; }
  body.uw-active[data-uw-bridge="reader"] .app .reader-tools { width: 100% !important; }
  body.uw-active[data-uw-bridge="reader"] .app .tabs { flex: 1 1 auto !important; }
  body.uw-active[data-uw-bridge="reader"] .app .rnav { padding-inline: 9px !important; }

  body.uw-active[data-uw-bridge="reader"] #VIZHUD {
    top: 10px !important;
    left: 10px !important;
    width: min(248px, calc(100% - 20px)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.uw-active[data-uw-bridge="reader"] #VIZHUD,
  body.uw-active[data-uw-bridge="reader"] .uw-tool-current,
  body.uw-active[data-uw-bridge="reader"] .uw-ref-form,
  body.uw-active[data-uw-bridge="reader"] .uw-reader-toggle,
  body.uw-active[data-uw-bridge="reader"] .uw-truth-button,
  body.uw-active[data-uw-bridge="reader"] .app .tab,
  body.uw-active[data-uw-bridge="reader"] .app .reader-word-toggle {
    animation: none !important;
    transition: none !important;
  }
}

/* The compact rail is a deliberate state. Keep all reader content out of it
   so the toggle remains visible and has a reliable hit target. */
body.uw-active[data-uw-bridge="reader"] .app.side-collapsed .side-headcopy,
body.uw-active[data-uw-bridge="reader"] .app.side-collapsed .tabs,
body.uw-active[data-uw-bridge="reader"] .app.side-collapsed .reader-tools,
body.uw-active[data-uw-bridge="reader"] .app.side-collapsed .side-copy,
body.uw-active[data-uw-bridge="reader"] .app.side-collapsed .readerpulse,
body.uw-active[data-uw-bridge="reader"] .app.side-collapsed .focussearch,
body.uw-active[data-uw-bridge="reader"] .app.side-collapsed .wordstudy-panel,
body.uw-active[data-uw-bridge="reader"] .app.side-collapsed .pcont {
  display: none !important;
}

body.uw-active[data-uw-bridge="reader"] .app.side-collapsed .side-head {
  display: block !important;
  padding: 12px !important;
  border-bottom: 0 !important;
}

body.uw-active[data-uw-bridge="reader"] .app.side-collapsed .side-headline {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

body.uw-active[data-uw-bridge="reader"] .app.side-collapsed .side-collapse {
  display: block !important;
  width: 50px !important;
  min-width: 50px !important;
  height: auto !important;
  min-height: 150px !important;
  padding: 10px 0 !important;
  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;
  border-color: rgba(200, 168, 107, .36) !important;
  color: var(--lux-paper) !important;
  background: linear-gradient(180deg, rgba(200, 168, 107, .14), rgba(103, 210, 194, .08)) !important;
}

body.uw-active[data-uw-bridge="reader"] .app.side-collapsed .side-collapse:hover {
  border-color: var(--lux-teal) !important;
  background: linear-gradient(180deg, rgba(200, 168, 107, .2), rgba(103, 210, 194, .14)) !important;
}