/*
 * Global bibliotheke surface and type system.
 * This is the final shared layer for every research mode. Mode-specific
 * diagrams keep their data colors; their workspace chrome does not.
 */
:root {
  --gu-shell: #071b2a;
  --gu-shell-2: #0d3042;
  --gu-stage: #081d2c;
  --gu-panel: #102b3c;
  --gu-panel-2: #123041;
  --gu-panel-3: #0b2233;
  --gu-text: #e4f1ee;
  --gu-text-soft: #b8ced0;
  --gu-muted: #7f9aa1;
  --gu-teal: #68d5ca;
  --gu-coral: #d88b70;
  --gu-line: rgba(153,215,211,.18);
  --gu-display: var(--br-display, 'Cormorant Garamond', Georgia, serif);
  --gu-reading: var(--br-reading, 'Source Serif 4', Georgia, serif);
  --gu-ui: var(--br-ui, 'DM Sans', Arial, sans-serif);
  --gu-mono: var(--br-mono, 'JetBrains Mono', ui-monospace, monospace);
}

body.uw-active {
  color-scheme: dark;
  background: var(--gu-shell) !important;
  color: var(--gu-text) !important;
  font-family: var(--gu-ui) !important;
  text-rendering: optimizeLegibility;
}

body.uw-active .uw-chrome {
  background: linear-gradient(180deg, #071b2a, #081f30) !important;
  border-bottom-color: var(--gu-line) !important;
  box-shadow: 0 16px 36px rgba(0,8,16,.38), inset 0 -1px rgba(220,247,240,.06) !important;
}

body.uw-active .uw-primary,
body.uw-active .uw-contextbar {
  background: transparent !important;
  border-color: rgba(153,215,211,.12) !important;
}

body.uw-active .uw-brand span,
body.uw-active .uw-studio.active,
body.uw-active .uw-tool-current strong,
body.uw-active .uw-ref-form input,
body.uw-active .uw-truth-button strong {
  color: var(--gu-text) !important;
}

body.uw-active .uw-brand small,
body.uw-active .uw-studio,
body.uw-active .uw-studio-copy small,
body.uw-active .uw-focus-summary,
body.uw-active .uw-ref-form label {
  color: var(--gu-muted) !important;
}

body.uw-active .uw-studio.active,
body.uw-active .uw-tool-current,
body.uw-active .uw-ref-form,
body.uw-active .uw-truth-button {
  border-color: rgba(104,213,202,.22) !important;
  background: linear-gradient(135deg, rgba(104,213,202,.16), rgba(13,48,66,.84)) !important;
  box-shadow: inset 0 1px rgba(220,247,240,.08), 0 8px 18px rgba(0,8,16,.18) !important;
}

body.uw-active > .app {
  color: var(--gu-text) !important;
  background: linear-gradient(145deg, #102d3e, #091f30) !important;
  border-color: rgba(126,204,201,.24) !important;
  box-shadow: 0 24px 70px rgba(0,8,16,.42), inset 0 1px rgba(220,247,240,.07) !important;
}

/* The mode picker is shared by classic and study workspaces. */
body.uw-active .modepack {
  border-color: var(--gu-line) !important;
  background: rgba(7,24,36,.72) !important;
  box-shadow: inset 0 1px rgba(220,247,240,.05) !important;
}

body.uw-active .modebtn {
  border-color: rgba(153,215,211,.14) !important;
  background: rgba(13,43,60,.78) !important;
  color: var(--gu-text-soft) !important;
  font-family: var(--gu-ui) !important;
}

body.uw-active .modebtn:hover,
body.uw-active .modebtn.act {
  border-color: rgba(104,213,202,.4) !important;
  background: rgba(104,213,202,.14) !important;
  color: var(--gu-text) !important;
}

body.uw-active .modebtn-label {
  color: inherit !important;
  font-family: var(--gu-ui) !important;
}

body.uw-active .modebtn-desc {
  color: var(--gu-muted) !important;
  font-family: var(--gu-mono) !important;
  font-size: .58rem !important;
  line-height: 1.25 !important;
}

/* All mode shells share the same frame, regardless of the feature inside. */
body.uw-active :is([class*="mode-shell"], .studymode-shell, .mapv.location-lab) {
  color: var(--gu-text) !important;
  background:
    radial-gradient(circle at 86% 0%, rgba(104,213,202,.08), transparent 34rem),
    linear-gradient(145deg, #102d3e, #091f30) !important;
  border-color: rgba(126,204,201,.24) !important;
  box-shadow: 0 26px 74px rgba(0,8,16,.4), inset 0 1px rgba(220,247,240,.07) !important;
}

body.uw-active :is(.modechrome-head, .studymode-head, .heatmode-head, .treemode-head, .motifmode-head, .acmode-head, .hmmode-head, .vatu-head, .patriarch-head) {
  background: linear-gradient(180deg, rgba(19,54,70,.98), rgba(11,35,50,.96)) !important;
  border-bottom: 1px solid var(--gu-line) !important;
  box-shadow: 0 13px 30px rgba(0,8,16,.22) !important;
}

body.uw-active :is(.modechrome-copy, .studymode-head > div:first-child, .modebrief, .studymode-panel, .heatmode-main, .treemode-main, .motifmode-main, .modeworkspace, .vatu-workbench, .vatu-rail) {
  font-family: var(--gu-ui) !important;
}

body.uw-active :is(.modechrome-title, .studymode-title, .heatmode-title, .treemode-title, .motifmode-title, .acmode-title, .hmmode-title, .vatu-stage-title strong) {
  color: var(--gu-text) !important;
  font-family: var(--gu-display) !important;
  font-size: clamp(1.65rem, 2.35vw, 2.45rem) !important;
  font-weight: 600 !important;
  letter-spacing: -.025em !important;
  line-height: 1.02 !important;
}

body.uw-active :is(.modechrome-text, .modechrome-copy, .studymode-copy, .heatmode-copy, .treemode-copy, .motifmode-copy, .acmode-copy, .hmmode-copy) {
  max-width: 72ch !important;
  color: var(--gu-text-soft) !important;
  font-family: var(--gu-reading) !important;
  font-size: .86rem !important;
  line-height: 1.58 !important;
}

body.uw-active :is([class*="-kicker"], [class*="-eyebrow"], .side-kicker, .modeoverview-card strong) {
  color: var(--gu-teal) !important;
  font-family: var(--gu-mono) !important;
  font-size: .57rem !important;
  font-weight: 650 !important;
  letter-spacing: .14em !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
}

body.uw-active :is(.studymode-main, .modeworkspace, .modeoverview, [class*="mode-main"], .vatu-workbench) {
  background: rgba(8,29,44,.72) !important;
  color: var(--gu-text) !important;
}

body.uw-active :is(.studymode-panel, .modebrief, .maprail, .heatmode-inspector, .heatmode-rail, .treemode-rail, .motif-panel, .motif-rail, .vatu-rail, .tree-panel, .modeoverview-card) {
  color: var(--gu-text) !important;
  border-color: var(--gu-line) !important;
  background: linear-gradient(180deg, rgba(18,48,65,.94), rgba(11,32,47,.98)) !important;
  box-shadow: inset 0 1px rgba(220,247,240,.06), 0 12px 28px rgba(0,8,16,.2) !important;
}

body.uw-active :is(.modeoverview-card, .modebrief-card, .heatcard, .heatrail-card, .tree-panel, .vatu-hud-card) {
  border-radius: 14px !important;
}

body.uw-active :is(.studymode-shell h1, .studymode-shell h2, .studymode-shell h3, .modeworkspace h1, .modeworkspace h2, .modeworkspace h3, .modebrief h2, .modebrief h3, .modeoverview-card strong) {
  color: var(--gu-text) !important;
  font-family: var(--gu-display) !important;
  line-height: 1.08 !important;
}

body.uw-active :is(.studymode-shell h4, .studymode-shell strong, .modeworkspace h4, .modebrief strong, .modeoverview-card strong) {
  color: var(--gu-text) !important;
  font-family: var(--gu-ui) !important;
}

body.uw-active :is(.studymode-shell p, .studymode-shell li, .modeworkspace p, .modeworkspace li, .modebrief p, .modeoverview-card span) {
  color: var(--gu-text-soft) !important;
  font-family: var(--gu-reading) !important;
  font-size: .84rem !important;
  line-height: 1.58 !important;
}

body.uw-active :is(.modechrome-btn, .studymode-actions button, .modebrief button, .modeoverview-card button, .tree-rail-tabs button, .vatu-stage-actions button) {
  min-height: 34px !important;
  border: 1px solid rgba(153,215,211,.2) !important;
  border-radius: 10px !important;
  background: rgba(7,24,36,.72) !important;
  color: var(--gu-text-soft) !important;
  font-family: var(--gu-ui) !important;
  font-size: .69rem !important;
  line-height: 1.2 !important;
}

body.uw-active :is(.modechrome-btn:hover, .studymode-actions button:hover, .modebrief button:hover, .modeoverview-card button:hover, .tree-rail-tabs button:hover, .vatu-stage-actions button:hover, .tree-rail-tabs button.act) {
  border-color: rgba(104,213,202,.48) !important;
  background: rgba(104,213,202,.14) !important;
  color: var(--gu-text) !important;
}

body.uw-active :is(.studymode-shell input, .studymode-shell select, .studymode-shell textarea, .modeworkspace input, .modeworkspace select, .modeworkspace textarea, .modebrief input, .modebrief select, .modebrief textarea) {
  min-height: 36px !important;
  border: 1px solid rgba(153,215,211,.18) !important;
  border-radius: 9px !important;
  background: rgba(7,24,36,.82) !important;
  color: var(--gu-text) !important;
  font-family: var(--gu-ui) !important;
  font-size: .76rem !important;
}

body.uw-active :is(.studymode-shell input::placeholder, .modeworkspace input::placeholder, .modebrief input::placeholder) {
  color: var(--gu-muted) !important;
}

body.uw-active :is(button, input, select, textarea):focus-visible {
  outline: 2px solid rgba(104,213,202,.72) !important;
  outline-offset: 2px !important;
}

body.uw-active :is(.modechrome-actions, .studymode-actions) {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

body.uw-active :is(.studymode-shell, .modeworkspace, .modebrief, .studymode-panel) {
  scrollbar-color: rgba(104,213,202,.28) transparent !important;
}

@media (max-width: 900px) {
  body.uw-active :is(.modechrome-title, .studymode-title, .heatmode-title, .treemode-title, .motifmode-title, .acmode-title, .hmmode-title) {
    font-size: clamp(1.45rem, 7vw, 2rem) !important;
  }

  body.uw-active :is(.modechrome-text, .modechrome-copy, .studymode-copy, .heatmode-copy, .treemode-copy, .motifmode-copy, .acmode-copy, .hmmode-copy) {
    font-size: .78rem !important;
    line-height: 1.5 !important;
  }

  body.uw-active :is(.modechrome-btn, .studymode-actions button, .modebrief button) {
    min-height: 32px !important;
    font-size: .64rem !important;
  }
}

/* Some legacy mode rules are ID-scoped. Match that specificity so the shared
   display face actually wins in every study workspace. */
body.uw-active .app :is(
  #MOTIFMODE,
  #PARABLEMODE,
  #PEOPLEMODE,
  #EVIDENCEMODE,
  #TENSIONMODE,
  #JOURNEYMODE,
  #WORLDMODE,
  #CANONMODE,
  #SYNTHESISMODE,
  #VERSEINTELLIGENCEMODE,
  #SUPERMODE,
  #PROPHECYMODE,
  #JESUSPROPHECYMODE,
  #MESSIAHFULFILLMENTMODE,
  #TEXTWITNESSMODE,
  #DOCTRINEMODE,
  #SERMONMODE,
  #INTERTEXTMODE,
  #EXEGESISMODE,
  #SOURCEDESKMODE,
  #GREEKORTHODOXMODE,
  #SYRIACORTHODOXMODE,
  #CATHOLICMODE,
  #PATRIARCHMODE,
  #ARAMMODE,
  #ORIGINALMODE,
  #MANUSCRIPTMODE,
  #VATUMODE
) .studymode-title {
  color: var(--gu-text) !important;
  font-family: var(--gu-display) !important;
  font-size: clamp(1.65rem, 2.35vw, 2.45rem) !important;
  letter-spacing: -.025em !important;
  line-height: 1.02 !important;
}

body.uw-active .app :is(
  #MOTIFMODE,
  #PARABLEMODE,
  #PEOPLEMODE,
  #EVIDENCEMODE,
  #TENSIONMODE,
  #JOURNEYMODE,
  #WORLDMODE,
  #CANONMODE,
  #SYNTHESISMODE,
  #VERSEINTELLIGENCEMODE,
  #SUPERMODE,
  #PROPHECYMODE,
  #JESUSPROPHECYMODE,
  #MESSIAHFULFILLMENTMODE,
  #TEXTWITNESSMODE,
  #DOCTRINEMODE,
  #SERMONMODE,
  #INTERTEXTMODE,
  #EXEGESISMODE,
  #SOURCEDESKMODE,
  #GREEKORTHODOXMODE,
  #SYRIACORTHODOXMODE,
  #CATHOLICMODE,
  #PATRIARCHMODE,
  #ARAMMODE,
  #ORIGINALMODE,
  #MANUSCRIPTMODE,
  #VATUMODE
) .studymode-copy {
  color: var(--gu-text-soft) !important;
  font-family: var(--gu-reading) !important;
  font-size: .86rem !important;
  line-height: 1.58 !important;
}

/* The Urtext workspace keeps its legacy renderer alive on mobile. Its
   parent was still being collapsed by the old reader bridge, leaving the
   visible study shell painted behind an invisible viz layer. */
@media (max-width: 900px) {
  body.uw-active:not(.fullscreen-active) .app[data-active-mode="original"] > .viz {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body.uw-active:not(.fullscreen-active) .app[data-active-mode="original"] #ORIGINALMODE[aria-hidden="false"] {
    pointer-events: auto !important;
  }
}

/* Voice is a global research instrument, not a hidden leftover from the
   legacy reader. Keep it available above every normal workspace while the
   active surface remains responsible for the research data. */
body.uw-active:not(.fullscreen-active) .voicefab#bSpeak {
  display: flex !important;
  position: fixed !important;
  right: max(20px, calc(var(--side-w, 360px) + 20px)) !important;
  bottom: 22px !important;
  z-index: 5000 !important;
  width: auto !important;
  min-width: 164px !important;
  height: 50px !important;
  min-height: 50px !important;
  padding: 0 15px 0 9px !important;
  gap: 10px !important;
  border: 1px solid rgba(104,213,202,.42) !important;
  border-radius: 15px !important;
  background:
    linear-gradient(135deg, rgba(17,55,64,.98), rgba(8,29,42,.98)) !important;
  color: var(--gu-text) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.04) inset !important;
}

body.uw-active:not(.fullscreen-active) .voicefab#bSpeak .vi {
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
  background: rgba(104,213,202,.16) !important;
  color: var(--gu-teal) !important;
}

body.uw-active:not(.fullscreen-active) .voicefab#bSpeak .vi svg {
  width: 18px !important;
  height: 18px !important;
  filter: none !important;
}

body.uw-active:not(.fullscreen-active) .voicefab#bSpeak .voicecopy {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
  text-align: left !important;
  line-height: 1 !important;
}

body.uw-active:not(.fullscreen-active) .voicefab#bSpeak .voicecopy strong {
  color: var(--gu-text) !important;
  font-family: var(--gu-ui) !important;
  font-size: .68rem !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
}

body.uw-active:not(.fullscreen-active) .voicefab#bSpeak .voicecopy small {
  color: var(--gu-muted) !important;
  font-family: var(--gu-mono) !important;
  font-size: .48rem !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

body.uw-active:not(.fullscreen-active) .voicefab#bSpeak:hover,
body.uw-active:not(.fullscreen-active) .voicefab#bSpeak:focus-visible {
  border-color: rgba(104,213,202,.78) !important;
  background: linear-gradient(135deg, rgba(23,75,81,.98), rgba(9,36,50,.98)) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 22px 48px rgba(0,0,0,.5), 0 0 0 3px rgba(104,213,202,.12) !important;
}

body.uw-active:not(.fullscreen-active) .voicefab#bSpeak.listen {
  border-color: rgba(104,213,202,.9) !important;
  background: linear-gradient(135deg, rgba(23,86,79,.98), rgba(8,35,45,.98)) !important;
}

body.uw-active.voice-session-open:not(.fullscreen-active) .ctxhub {
  display: block !important;
  left: 24px !important;
  top: auto !important;
  right: auto !important;
  bottom: 22px !important;
  z-index: 4999 !important;
  border-color: rgba(104,213,202,.28) !important;
  background: linear-gradient(180deg, rgba(13,43,54,.97), rgba(7,26,39,.98)) !important;
  color: var(--gu-text) !important;
}

@media (max-width: 900px) {
  body.uw-active:not(.fullscreen-active) .voicefab#bSpeak {
    right: 14px !important;
    bottom: 14px !important;
    min-width: 54px !important;
    width: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
    padding: 0 !important;
    border-radius: 50% !important;
  }

  body.uw-active:not(.fullscreen-active) .voicefab#bSpeak .voicecopy {
    display: none !important;
  }

  body.uw-active.voice-session-open:not(.fullscreen-active) .ctxhub {
    left: 14px !important;
    right: 14px !important;
    bottom: 78px !important;
    max-width: none !important;
  }
}

body.uw-active .nl-launcher-voice {
  margin: 0 0 18px;
}

body.uw-active .nl-voice-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 58px;
  padding: 10px 13px;
  border: 1px solid rgba(104,213,202,.28);
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(18,61,68,.82), rgba(9,30,43,.9));
  color: var(--gu-text);
  text-align: left;
  cursor: pointer;
}

body.uw-active .nl-voice-tile:hover,
body.uw-active .nl-voice-tile:focus-visible {
  border-color: rgba(104,213,202,.68);
  background: linear-gradient(135deg, rgba(24,81,80,.9), rgba(10,38,51,.96));
}

body.uw-active .nl-voice-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid rgba(104,213,202,.3);
  border-radius: 10px;
  color: var(--gu-teal);
  font-size: 1.25rem;
}

body.uw-active .nl-voice-tile > span:last-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

body.uw-active .nl-voice-tile strong {
  font-family: var(--gu-ui);
  font-size: .72rem;
  line-height: 1.1;
}

body.uw-active .nl-voice-tile small {
  color: var(--gu-muted);
  font-family: var(--gu-reading);
  font-size: .78rem;
  line-height: 1.25;
}