/*
   Simple UI system
   One visual language for every mode: calm surfaces, short labels, large
   targets and one obvious place to start. Loaded last on purpose.
*/

:root {
  --simple-bg: #000;
  --simple-surface: #1c1c1e;
  --simple-surface-2: #2c2c2e;
  --simple-surface-3: #3a3a3c;
  --simple-line: rgba(255,255,255,.12);
  --simple-text: #f5f5f7;
  --simple-muted: #a1a1a6;
  --simple-accent: #0a84ff;
  --simple-green: #30d158;
  --simple-radius: 14px;
}

body.uw-active {
  background: var(--simple-bg) !important;
  color: var(--simple-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif !important;
}

body.uw-active *,
body.uw-active *::before,
body.uw-active *::after {
  scrollbar-color: rgba(255,255,255,.24) transparent;
}

body.uw-active button,
body.uw-active input,
body.uw-active select {
  font-family: inherit !important;
}

body.uw-active button:focus-visible,
body.uw-active input:focus-visible,
body.uw-active select:focus-visible {
  outline: 3px solid rgba(10,132,255,.72) !important;
  outline-offset: 2px !important;
}

/* Shared chrome */
body.uw-active .uw-chrome {
  background: #000 !important;
  border-bottom: 1px solid var(--simple-line) !important;
  box-shadow: none !important;
}

body.uw-active .uw-primary {
  background: #000 !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.uw-active .uw-brand {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.uw-active .uw-brand span::before {
  color: var(--simple-text) !important;
}

body.uw-active .uw-brand small {
  color: var(--simple-muted) !important;
  letter-spacing: .12em !important;
}

body.uw-active .uw-studios {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.uw-active .uw-studio {
  border: 0 !important;
  border-radius: 11px !important;
  background: transparent !important;
  color: var(--simple-muted) !important;
  box-shadow: none !important;
}

body.uw-active .uw-studio:hover {
  background: rgba(255,255,255,.08) !important;
  color: var(--simple-text) !important;
}

body.uw-active .uw-studio.active {
  background: var(--simple-surface-2) !important;
  color: var(--simple-text) !important;
  box-shadow: none !important;
}

body.uw-active .uw-studio > i {
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
}

body.uw-active .uw-studio small {
  display: none !important;
}

body.uw-active .uw-studio strong {
  font-family: inherit !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

body.uw-active .uw-global-actions .uw-icon {
  border: 0 !important;
  background: var(--simple-surface) !important;
  color: var(--simple-text) !important;
  box-shadow: none !important;
}

body.uw-active .uw-contextbar {
  background: #000 !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--simple-line) !important;
  box-shadow: none !important;
}

body.uw-active .uw-tool-current,
body.uw-active .uw-ref-form,
body.uw-active .uw-truth-button {
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--simple-surface) !important;
  color: var(--simple-text) !important;
  box-shadow: none !important;
}

body.uw-active .uw-tool-current:hover,
body.uw-active .uw-ref-form:focus-within,
body.uw-active .uw-truth-button:hover {
  background: var(--simple-surface-2) !important;
}

body.uw-active .uw-tool-current small,
body.uw-active .uw-ref-form label,
body.uw-active .uw-focus-summary span,
body.uw-active .uw-focus-summary small,
body.uw-active .uw-truth-button small {
  color: var(--simple-muted) !important;
}

body.uw-active .uw-tool-current strong,
body.uw-active .uw-focus-summary strong,
body.uw-active .uw-truth-button strong {
  color: var(--simple-text) !important;
  font-family: inherit !important;
}

body.uw-active .uw-ref-form input {
  color: var(--simple-text) !important;
}

body.uw-active .uw-ref-form button {
  border: 0 !important;
  border-radius: 9px !important;
  background: var(--simple-accent) !important;
  color: #fff !important;
}

body.uw-active .uw-truth-button > i {
  background: var(--simple-green) !important;
  box-shadow: none !important;
}

body.uw-active .uw-tool-current::after {
  content: none !important;
  display: none !important;
}

body.uw-active .uw-contextbar .uw-tool-current,
body.uw-active .uw-contextbar .uw-ref-form,
body.uw-active .uw-contextbar .uw-truth-button {
  border: 0 !important;
  background: var(--simple-surface) !important;
  box-shadow: none !important;
}

body.uw-active .uw-contextbar .uw-tool-current > span {
  padding-top: 0 !important;
}

body.uw-active .uw-contextbar .uw-tool-current > i {
  margin-top: 0 !important;
}

body.uw-active .uw-tool-menu,
body.uw-active .uw-utility-menu,
body.uw-active .uw-panel,
body.uw-active .uw-compare,
body.uw-active .uw-command {
  border: 0 !important;
  border-radius: var(--simple-radius) !important;
  background: rgba(28,28,30,.98) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.45) !important;
  color: var(--simple-text) !important;
}

body.uw-active .uw-tool-menu header,
body.uw-active .uw-utility-menu header {
  border-bottom: 1px solid var(--simple-line) !important;
  background: transparent !important;
}

body.uw-active .uw-tool-menu button,
body.uw-active .uw-utility-menu button {
  min-height: 52px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  background: transparent !important;
  color: var(--simple-text) !important;
}

body.uw-active .uw-tool-menu button:hover,
body.uw-active .uw-tool-menu button.active,
body.uw-active .uw-utility-menu button:hover {
  background: var(--simple-surface-2) !important;
}

body.uw-active .uw-tool-menu button em {
  color: var(--simple-accent) !important;
  font-style: normal !important;
}

/* The reading surface is intentionally quiet. */
body.uw-active[data-uw-bridge="reader"] .app > .side {
  border: 0 !important;
  border-radius: 0 !important;
  background: #000 !important;
  box-shadow: none !important;
}

body.uw-active .app > .side {
  border-color: transparent !important;
  box-shadow: none !important;
}

body.uw-active[data-uw-bridge="reader"] .app .side-head {
  background: #000 !important;
  border-bottom: 1px solid var(--simple-line) !important;
}

body.uw-active[data-uw-bridge="reader"] .app .side-title,
body.uw-active[data-uw-bridge="reader"] .app .rbody .chapter-copy {
  color: var(--simple-text) !important;
}

body.uw-active[data-uw-bridge="reader"] .app .side-title,
body.uw-active[data-uw-bridge="reader"] .app .rbody .chtitle {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif !important;
}

body.uw-active[data-uw-bridge="reader"] .app .side-kicker,
body.uw-active[data-uw-bridge="reader"] .app .rbody .vn {
  color: var(--simple-accent) !important;
}

body.uw-active[data-uw-bridge="reader"] .app .tabs,
body.uw-active[data-uw-bridge="reader"] .app .focussearch,
body.uw-active[data-uw-bridge="reader"] .app .rnav select,
body.uw-active[data-uw-bridge="reader"] .app .rnav button {
  border: 0 !important;
  background: var(--simple-surface) !important;
  box-shadow: none !important;
}

body.uw-active[data-uw-bridge="reader"] .app .tab.act {
  background: var(--simple-surface-3) !important;
  color: var(--simple-text) !important;
}

body.uw-active[data-uw-bridge="reader"] .app .focussearch input,
body.uw-active[data-uw-bridge="reader"] .app .rnav select {
  color: var(--simple-text) !important;
}

body.uw-active[data-uw-bridge="reader"] .app .rbody {
  background: #000 !important;
}

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

body.uw-active[data-uw-bridge="reader"] .app .rbody .chapter-stack {
  max-width: 760px !important;
  margin: 0 auto !important;
}

body.uw-active[data-uw-bridge="reader"] .app .rbody .chtitle {
  border-bottom: 1px solid var(--simple-line) !important;
  color: var(--simple-text) !important;
  font-family: inherit !important;
  font-weight: 700 !important;
}

body.uw-active[data-uw-bridge="reader"] .app .rbody .ybadge {
  border: 0 !important;
  background: var(--simple-surface) !important;
  color: var(--simple-muted) !important;
  font-family: inherit !important;
}

body.uw-active .voicefab#bSpeak {
  display: none !important;
}

/* Every full-screen mode shares the same quiet shell. */
body.uw-active :is(
  .studymode-shell,
  .heatmode-shell,
  .treemode-shell,
  .motifmode-shell,
  .acmode-shell,
  .hmmode-shell,
  .sentence-paths-overlay,
  .timeline-overlay
) {
  border: 0 !important;
  border-radius: 0 !important;
  background: #000 !important;
  box-shadow: none !important;
}

body.uw-active :is(
  .studymode-head,
  .heatmode-head,
  .treemode-head,
  .motifmode-head,
  .acmode-head,
  .hmmode-head,
  .sp-head,
  .tl-head
) {
  min-height: 64px !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--simple-line) !important;
  background: #000 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.uw-active :is(
  .studymode-kicker,
  .heatmode-kicker,
  .treemode-kicker,
  .motifmode-kicker,
  .acmode-kicker,
  .hmmode-kicker,
  .tl-kicker,
  .sp-kicker
) {
  color: var(--simple-muted) !important;
  font: 600 .68rem/1.1 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

body.uw-active :is(
  .studymode-title,
  .heatmode-title,
  .treemode-title,
  .motifmode-title,
  .acmode-title,
  .hmmode-title,
  .tl-title-wrap h2,
  .sp-title
) {
  margin-top: 5px !important;
  color: var(--simple-text) !important;
  font: 700 1.35rem/1.1 -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif !important;
}

body.uw-active :is(
  .studymode-copy,
  .heatmode-copy,
  .treemode-copy,
  .motifmode-copy,
  .acmode-copy,
  .hmmode-copy,
  .tl-sub,
  .sp-sub
) {
  display: none !important;
}

body.uw-active :is(
  .studymode-actions button,
  .modechrome-btn,
  .tl-shell-btn,
  .tl-close,
  .sp-toolbar button
) {
  min-height: 42px !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: var(--simple-surface) !important;
  color: var(--simple-text) !important;
  box-shadow: none !important;
}

body.uw-active :is(
  .studymode-actions button:hover,
  .modechrome-btn:hover,
  .tl-shell-btn:hover,
  .sp-toolbar button:hover
) {
  background: var(--simple-surface-2) !important;
}

body.uw-active :is(
  .studymode-panel,
  .studymode-card,
  .heatmode-boardwrap,
  .heatmode-inspector,
  .heatmode-rail,
  .treemode-stage,
  .treemode-rail,
  .motif-panel,
  .motif-stage,
  .motif-rail,
  .modebrief,
  .mapstage,
  .maprail,
  .sp-stage-shell,
  .sp-inspector,
  .tl-stage-shell,
  .tl-sidebar-shell,
  .tl-inspector
) {
  border: 0 !important;
  border-radius: var(--simple-radius) !important;
  background: var(--simple-surface) !important;
  box-shadow: none !important;
}

body.uw-active :is(
  .studymode-card strong,
  .studymode-panel h3,
  .heatboard-stat strong,
  .tree-panel strong,
  .motif-card strong,
  .modeoverview-card strong
) {
  color: var(--simple-text) !important;
  font-family: inherit !important;
}

body.uw-active :is(
  .studymode-card p,
  .studymode-panel p,
  .modeoverview-card span,
  .modebrief p
) {
  color: var(--simple-muted) !important;
}

/* Mobile: one column, one task, no miniature dashboards. */
@media (max-width: 760px) {
  :root { --uw-header: 105px; }

  body.uw-active > .app {
    padding: 6px 8px 8px !important;
    gap: 6px !important;
  }

  body.uw-active .uw-primary {
    height: 54px !important;
    grid-template-columns: 32px minmax(0,1fr) 31px !important;
    padding: 3px 4px !important;
  }

  body.uw-active .uw-brand span::before {
    content: 'b' !important;
    color: var(--simple-text) !important;
    font: 600 1.5rem/1 Georgia, serif !important;
  }

  body.uw-active .uw-studio {
    flex-basis: 70px !important;
    min-width: 70px !important;
    min-height: 44px !important;
    padding: 4px 3px !important;
  }

  body.uw-active .uw-studio > i {
    width: 20px !important;
    height: 20px !important;
  }

  body.uw-active .uw-studio strong {
    font-size: .58rem !important;
  }

  body.uw-active .uw-contextbar {
    height: 42px !important;
    min-height: 42px !important;
    grid-template-columns: minmax(76px,.72fr) minmax(0,1.4fr) 28px !important;
    padding: 3px 4px !important;
  }

  body.uw-active .uw-tool-current,
  body.uw-active .uw-ref-form,
  body.uw-active .uw-truth-button {
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 10px !important;
  }

  body.uw-active .uw-tool-current strong {
    font-size: .65rem !important;
  }

  body.uw-active .uw-tool-current small,
  body.uw-active[data-uw-bridge="reader"] .app .side-kicker {
    display: none !important;
  }

  body.uw-active .uw-ref-form {
    grid-template-columns: minmax(0,1fr) 24px !important;
    padding-left: 9px !important;
  }

  body.uw-active .uw-ref-form label,
  body.uw-active .uw-focus-summary,
  body.uw-active .uw-handoff,
  body.uw-active .uw-reader-toggle {
    display: none !important;
  }

  body.uw-active .uw-truth-button {
    width: 28px !important;
    padding: 0 !important;
    background: transparent !important;
  }

  body.uw-active .uw-truth-button > span { display: none !important; }
  body.uw-active .uw-truth-button > i { margin: 0 !important; }

  body.uw-active :is(
    .studymode-shell,
    .heatmode-shell,
    .treemode-shell,
    .motifmode-shell,
    .acmode-shell,
    .hmmode-shell,
    .sentence-paths-overlay,
    .timeline-overlay
  ) {
    inset: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  body.uw-active :is(
    .studymode-head,
    .heatmode-head,
    .treemode-head,
    .motifmode-head,
    .acmode-head,
    .hmmode-head,
    .sp-head,
    .tl-head
  ) {
    min-height: 58px !important;
    padding: 11px 13px !important;
  }

  body.uw-active :is(.studymode-title, .heatmode-title, .treemode-title, .motifmode-title, .acmode-title, .hmmode-title, .tl-title-wrap h2, .sp-title) {
    font-size: 1.17rem !important;
  }

  body.uw-active :is(.studymode-actions, .modechrome-actions, .tl-head-actions, .sp-toolbar) {
    gap: 5px !important;
  }

  body.uw-active :is(.studymode-actions button, .modechrome-btn, .tl-shell-btn, .tl-close, .sp-toolbar button) {
    min-width: 42px !important;
    min-height: 40px !important;
    padding: 0 10px !important;
    font-size: .68rem !important;
  }

  /* Keep only the stage in the first view. Side information remains
     reachable through the mode's existing controls or the utility menu. */
  body.uw-active :is(
    .studymode-main,
    .studymode-main.two,
    .heatmode-main,
    .treemode-main,
    .motifmode-main,
    .modeworkspace,
    .original-main,
    .messiah-fulfillment-main,
    .jesusprophecy-main,
    .textwitness-main
  ) {
    min-height: 0 !important;
    grid-template-columns: minmax(0,1fr) !important;
    grid-template-rows: minmax(0,1fr) !important;
    gap: 8px !important;
    padding: 8px !important;
    overflow: auto !important;
  }

  body.uw-active :is(
    .studymode-main > aside,
    .heatmode-side,
    .treemode-rail,
    .motif-panel,
    .motif-rail,
    .modebrief,
    .original-pane-resizer,
    .messiah-fulfillment-main > aside,
    .jesusprophecy-main > aside,
    .textwitness-main > aside
  ) {
    display: none !important;
  }

  body.uw-active :is(
    .studymode-panel,
    .studymode-card,
    .heatmode-boardwrap,
    .treemode-board,
    .motif-stage,
    .acmode-framewrap,
    .hmmode-framewrap,
    .original-main > #ORIGINALSTAGE,
    .messiah-fulfillment-main > #MESSIAHSTAGE,
    .jesusprophecy-main > #JESUSPROPHECYSTAGE,
    .textwitness-main > #TEXTWITNESSSTAGE
  ) {
    min-height: 0 !important;
    padding: 13px !important;
    border-radius: 12px !important;
  }

  /* The reader remains the default mode and should start immediately below
     the small chrome. Keep the legacy visual stage alive at one pixel. */
  body.uw-active[data-uw-bridge="reader"] > .app {
    grid-template-rows: 1px minmax(0,1fr) !important;
  }

  body.uw-active[data-uw-bridge="reader"] .app > .viz {
    height: 1px !important;
    min-height: 1px !important;
    max-height: 1px !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  body.uw-active[data-uw-bridge="reader"] .app > .side {
    grid-row: 2 !important;
    min-width: 0 !important;
  }

  body.uw-active[data-uw-bridge="reader"] .app .reader-word-toggle,
  body.uw-active[data-uw-bridge="reader"] .app .side-copy,
  body.uw-active[data-uw-bridge="reader"] .app .readerpulse,
  body.uw-active[data-uw-bridge="reader"] .app .side-collapse {
    display: none !important;
  }

  body.uw-active[data-uw-bridge="reader"] .app .side-head {
    padding: 10px 10px 8px !important;
  }

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

  body.uw-active[data-uw-bridge="reader"] .app .side-title {
    font-size: 1rem !important;
  }

  body.uw-active[data-uw-bridge="reader"] .app .focussearch {
    height: 38px !important;
    margin-top: 8px !important;
  }

  body.uw-active[data-uw-bridge="reader"] .app .rnav {
    padding: 8px !important;
  }

  body.uw-active[data-uw-bridge="reader"] .app .rnav select,
  body.uw-active[data-uw-bridge="reader"] .app .rnav button {
    height: 38px !important;
  }

  body.uw-active[data-uw-bridge="reader"] .app .rbody .chapter-stack {
    padding: 15px 12px 48px !important;
  }

  body.uw-active[data-uw-bridge="reader"] .app .rbody .chapter-copy {
    font-size: 1rem !important;
    line-height: 1.72 !important;
  }

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

  /* Specialized layouts with a canvas: let the canvas be the single hero. */
  body.uw-active .app[data-active-mode="timeline"] .timeline-overlay .tl-main,
  body.uw-active .app[data-active-mode="timeline"] .timeline-overlay .tl-workbench,
  body.uw-active .app[data-active-mode="sentencePaths"] .sentence-paths-overlay .sp-main,
  body.uw-active .app[data-active-mode="location"] .maplayout {
    grid-template-columns: minmax(0,1fr) !important;
    grid-template-rows: minmax(0,1fr) !important;
    gap: 8px !important;
  }

  body.uw-active .app[data-active-mode="timeline"] .timeline-overlay :is(.tl-controls,.tl-commandbar,.tl-ribbon,.tl-atlas,.tl-sidebar-shell,.tl-inspector,.tl-scene-strip,.tl-context-rail,.tl-stage-meta),
  body.uw-active .app[data-active-mode="sentencePaths"] .sentence-paths-overlay :is(.sp-filters,.sp-summary,.sp-lens-strip,.sp-inspector,.sp-zoom,.sp-context),
  body.uw-active .app[data-active-mode="location"] .maplayout > .maprail {
    display: none !important;
  }

  body.uw-active .app[data-active-mode="timeline"] .timeline-overlay .tl-stage-shell,
  body.uw-active .app[data-active-mode="sentencePaths"] .sentence-paths-overlay .sp-stage-shell,
  body.uw-active .app[data-active-mode="location"] .maplayout > .mapstage {
    min-height: 0 !important;
    border-radius: 12px !important;
  }

  body.uw-active .app[data-active-mode="afterChrist"] .modeworkspace,
  body.uw-active .app[data-active-mode="hermeneutik"] .modeworkspace {
    grid-template-columns: minmax(0,1fr) !important;
  }

  body.uw-active .app[data-active-mode="afterChrist"] .modeoverview,
  body.uw-active .app[data-active-mode="hermeneutik"] .modeoverview {
    display: none !important;
  }
}

@media (min-width: 761px) {
  body.uw-active .uw-studio strong {
    font-size: .68rem !important;
  }

  body.uw-active :is(.studymode-title, .heatmode-title, .treemode-title, .motifmode-title, .acmode-title, .hmmode-title) {
    font-size: 1.5rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.uw-active *,
  body.uw-active *::before,
  body.uw-active *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}