/*
 * Reader uniformity layer
 *
 * Timeline and Reader share one dark bibliotheke material language:
 * deep blue instrument chrome, layered night-blue evidence surfaces, one
 * oxidised teal accent and a restrained coral signal for selected states.
 */
:root {
  --ru-shell: #071b2a;
  --ru-shell-2: #0d3042;
  --ru-canvas: #081d2c;
  --ru-surface: #102b3c;
  --ru-surface-2: #132f41;
  --ru-surface-3: #18394a;
  --ru-ink: #e4f1ee;
  --ru-ink-soft: #a9c2c6;
  --ru-muted: #78969e;
  --ru-teal: #68d5ca;
  --ru-teal-soft: rgba(104,213,202,.14);
  --ru-coral: #d88b70;
  --ru-line: rgba(153,215,211,.18);
  --ru-shadow: 0 18px 42px rgba(0,10,20,.34);
}

body.uw-active[data-uw-bridge="reader"] {
  background: #071824 !important;
  color: var(--ru-ink) !important;
}

body.uw-active[data-uw-bridge="reader"] .uw-chrome {
  background: linear-gradient(180deg, var(--ru-shell), #071c2b) !important;
  border-bottom: 1px solid rgba(137,214,209,.18) !important;
  box-shadow: 0 14px 32px rgba(0,12,23,.34), inset 0 -1px rgba(229,247,240,.06) !important;
}

body.uw-active[data-uw-bridge="reader"] .uw-primary {
  background: transparent !important;
  border-bottom-color: rgba(137,214,209,.12) !important;
}

body.uw-active[data-uw-bridge="reader"] .uw-brand span {
  color: #e4f0ec !important;
}

body.uw-active[data-uw-bridge="reader"] .uw-brand small,
body.uw-active[data-uw-bridge="reader"] .uw-studio,
body.uw-active[data-uw-bridge="reader"] .uw-studio-copy small {
  color: #8ca6ae !important;
}

body.uw-active[data-uw-bridge="reader"] .uw-studio.active {
  color: #f1f7f2 !important;
  background: linear-gradient(135deg, rgba(13,129,132,.34), rgba(26,67,83,.72)) !important;
  box-shadow: inset 0 1px rgba(205,244,237,.1), 0 8px 18px rgba(0,8,16,.18) !important;
}

body.uw-active[data-uw-bridge="reader"] .uw-contextbar {
  background: rgba(6,26,40,.84) !important;
  border-top-color: rgba(137,214,209,.1) !important;
}

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-truth-button {
  border-color: rgba(137,214,209,.18) !important;
  background: rgba(18,52,67,.78) !important;
  box-shadow: inset 0 1px rgba(225,246,240,.06) !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,
body.uw-active[data-uw-bridge="reader"] .uw-ref-form input {
  color: #e5f1ed !important;
}

body.uw-active[data-uw-bridge="reader"] > .app {
  background: linear-gradient(145deg, #102d3e, #091f30) !important;
  border-color: rgba(126,204,201,.26) !important;
  box-shadow: 0 24px 70px rgba(0,8,16,.46), inset 0 1px rgba(220,247,240,.08) !important;
}

body.uw-active[data-uw-bridge="reader"] > .app > .viz {
  background: linear-gradient(180deg, #0d2b3d, #081c2b) !important;
  border: 1px solid rgba(126,204,201,.22) !important;
  box-shadow: inset 0 1px rgba(219,246,239,.08), 0 16px 34px rgba(0,18,31,.16) !important;
}

body.uw-active[data-uw-bridge="reader"] > .app > .side {
  border-left: 1px solid rgba(153,215,211,.18) !important;
  background: linear-gradient(180deg, var(--ru-surface-2), var(--ru-surface)) !important;
  box-shadow: -16px 0 34px rgba(0,8,16,.3) !important;
  color: var(--ru-ink) !important;
}

body.uw-active[data-uw-bridge="reader"] > .app > .side .side-head {
  background: linear-gradient(180deg, rgba(19,54,70,.98), rgba(14,42,57,.96)) !important;
  border-bottom-color: var(--ru-line) !important;
}

body.uw-active[data-uw-bridge="reader"] > .app > .side .side-kicker,
body.uw-active[data-uw-bridge="reader"] > .app > .side .side-title,
body.uw-active[data-uw-bridge="reader"] > .app > .side .side-copy {
  color: var(--ru-ink) !important;
}

body.uw-active[data-uw-bridge="reader"] > .app > .side .side-kicker {
  color: var(--ru-teal) !important;
}

body.uw-active[data-uw-bridge="reader"] > .app > .side .side-copy {
  color: var(--ru-ink-soft) !important;
}

body.uw-active[data-uw-bridge="reader"] > .app > .side .tabs {
  border: 1px solid var(--ru-line) !important;
  background: rgba(7,24,36,.72) !important;
  box-shadow: inset 0 1px rgba(220,247,240,.08) !important;
}

body.uw-active[data-uw-bridge="reader"] > .app > .side .tab {
  color: var(--ru-muted) !important;
}

body.uw-active[data-uw-bridge="reader"] > .app > .side .tab.act {
  color: #eef8f4 !important;
  background: var(--ru-shell-2) !important;
  box-shadow: 0 4px 12px rgba(0,24,38,.18), inset 0 1px rgba(255,255,255,.1) !important;
}

body.uw-active[data-uw-bridge="reader"] > .app > .side .reader-word-toggle,
body.uw-active[data-uw-bridge="reader"] > .app > .side .reader-expert-toggle,
body.uw-active[data-uw-bridge="reader"] > .app > .side .side-collapse {
  color: var(--ru-ink) !important;
  border-color: var(--ru-line) !important;
  background: rgba(7,24,36,.62) !important;
}

body.uw-active[data-uw-bridge="reader"] > .app > .side .reader-word-toggle:hover,
body.uw-active[data-uw-bridge="reader"] > .app > .side .reader-expert-toggle:hover,
body.uw-active[data-uw-bridge="reader"] > .app > .side .side-collapse:hover {
  color: #f4faf5 !important;
  border-color: var(--ru-teal) !important;
  background: var(--ru-teal) !important;
}

body.uw-active[data-uw-bridge="reader"] > .app > .side .focussearch,
body.uw-active[data-uw-bridge="reader"] > .app > .side .sbox {
  border-color: var(--ru-line) !important;
  background: rgba(8,29,44,.72) !important;
}

body.uw-active[data-uw-bridge="reader"] > .app > .side .focussearch input,
body.uw-active[data-uw-bridge="reader"] > .app > .side .sbox input {
  color: var(--ru-ink) !important;
  border-color: var(--ru-line) !important;
  background: rgba(6,22,34,.82) !important;
}

body.uw-active[data-uw-bridge="reader"] > .app > .side .focussearch input::placeholder,
body.uw-active[data-uw-bridge="reader"] > .app > .side .sbox input::placeholder {
  color: var(--ru-muted) !important;
}

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

body.uw-active[data-uw-bridge="reader"] > .app > .side #tR,
body.uw-active[data-uw-bridge="reader"] > .app > .side #tX,
body.uw-active[data-uw-bridge="reader"] > .app > .side .rlist,
body.uw-active[data-uw-bridge="reader"] > .app > .side .rbody {
  color: var(--ru-ink) !important;
  background: transparent !important;
}

body.uw-active[data-uw-bridge="reader"] > .app > .side .rnav {
  border-bottom-color: var(--ru-line) !important;
  background: rgba(11,35,50,.86) !important;
}

body.uw-active[data-uw-bridge="reader"] > .app > .side .rnav select,
body.uw-active[data-uw-bridge="reader"] > .app > .side .rnav button {
  color: var(--ru-ink) !important;
  border-color: var(--ru-line) !important;
  background: rgba(6,22,34,.82) !important;
}

body.uw-active[data-uw-bridge="reader"] > .app > .side .chapter-copy,
body.uw-active[data-uw-bridge="reader"] > .app > .side .vs,
body.uw-active[data-uw-bridge="reader"] > .app > .side .chtitle,
body.uw-active[data-uw-bridge="reader"] > .app > .side .rbody {
  color: var(--ru-ink) !important;
}

body.uw-active[data-uw-bridge="reader"] > .app > .side .vs.active,
body.uw-active[data-uw-bridge="reader"] > .app > .side .verse.active {
  border-left-color: var(--ru-teal) !important;
  background: var(--ru-teal-soft) !important;
}

/* Cross-reference dashboard: the same layered night surface as the Reader pane. */
body.uw-active[data-uw-bridge="reader"] > .app > .side .refdashboard,
body.uw-active[data-uw-bridge="reader"] > .app > .side .refhero,
body.uw-active[data-uw-bridge="reader"] > .app > .side .refpanel,
body.uw-active[data-uw-bridge="reader"] > .app > .side .refcompare-card,
body.uw-active[data-uw-bridge="reader"] > .app > .side .refspot {
  color: var(--ru-ink) !important;
  border-color: var(--ru-line) !important;
  background: rgba(16,43,60,.9) !important;
  box-shadow: inset 0 1px rgba(220,247,240,.08), 0 8px 18px rgba(0,8,16,.22) !important;
}

body.uw-active[data-uw-bridge="reader"] > .app > .side .refhero,
body.uw-active[data-uw-bridge="reader"] > .app > .side .refpanel {
  background: rgba(18,48,65,.78) !important;
}

body.uw-active[data-uw-bridge="reader"] > .app > .side :is(.rhead,.refcompare-title,.refspot-r,.refpanel-h strong,.refcompare-pane strong) {
  color: var(--ru-ink) !important;
}

body.uw-active[data-uw-bridge="reader"] > .app > .side :is(.refspot-k,.refcompare-k,.refpanel-h span,.refcompare-pane span) {
  color: var(--ru-teal) !important;
}

body.uw-active[data-uw-bridge="reader"] > .app > .side :is(.refspot-t,.refcompare-pane p) {
  color: var(--ru-ink-soft) !important;
}

body.uw-active[data-uw-bridge="reader"] > .app > .side .refchip {
  color: var(--ru-teal) !important;
  border-color: rgba(13,129,132,.25) !important;
  background: rgba(13,129,132,.16) !important;
}

body.uw-active[data-uw-bridge="reader"] > .app > .side .refcompare-card.focus,
body.uw-active[data-uw-bridge="reader"] > .app > .side .refspot.focus {
  border-color: rgba(200,109,80,.42) !important;
  background: linear-gradient(145deg, rgba(200,109,80,.14), rgba(13,129,132,.12)), rgba(18,48,65,.94) !important;
}

body.uw-active[data-uw-bridge="reader"] > .app > .side .refcompare-actions button,
body.uw-active[data-uw-bridge="reader"] > .app > .side .refspot-actions button {
  color: var(--ru-teal) !important;
  border-color: rgba(13,129,132,.25) !important;
  background: rgba(13,129,132,.07) !important;
}

body.uw-active[data-uw-bridge="reader"] > .app > .side .refheat-cell {
  color: #f1f8f4 !important;
  border-color: rgba(13,129,132,.34) !important;
  background: linear-gradient(180deg, rgba(13,129,132,.62), rgba(9,44,61,.96)) !important;
}

body.uw-active[data-uw-bridge="reader"] .vizhud {
  border-color: rgba(126,204,201,.28) !important;
  background: linear-gradient(145deg, rgba(13,49,67,.96), rgba(7,27,41,.96)) !important;
  box-shadow: 0 18px 42px rgba(0,13,24,.32), inset 0 1px rgba(223,246,238,.08) !important;
}

/* The HUD is also painted into the canvas layer; keep its material locked to the shell. */
body.uw-active[data-uw-bridge="reader"] > .app > #VIZ #VIZHUD {
  border-color: rgba(126,204,201,.28) !important;
  background: linear-gradient(145deg, rgba(13,49,67,.96), rgba(7,27,41,.96)) !important;
  box-shadow: 0 18px 42px rgba(0,13,24,.32), inset 0 1px rgba(223,246,238,.08) !important;
}

body.uw-active[data-uw-bridge="reader"] > .app > #VIZ #VIZHUD::before {
  background: linear-gradient(180deg, #72d3c9, #0d8184, #5aa6c8) !important;
  box-shadow: 0 0 22px rgba(70,205,195,.2) !important;
}

body.uw-active[data-uw-bridge="reader"] .vizhud-title,
body.uw-active[data-uw-bridge="reader"] .vizhud-text,
body.uw-active[data-uw-bridge="reader"] .vizhud-metric strong {
  color: #e7f3ee !important;
}

body.uw-active[data-uw-bridge="reader"] .vizhud-k,
body.uw-active[data-uw-bridge="reader"] .vizhud-metric span {
  color: #72d3c9 !important;
}

body.uw-active[data-uw-bridge="reader"] .vizhud-btn,
body.uw-active[data-uw-bridge="reader"] .vizhud-refchip {
  color: #d7ebe5 !important;
  border-color: rgba(126,204,201,.24) !important;
  background: rgba(11,73,85,.48) !important;
}

body.uw-active[data-uw-bridge="reader"] .reader-expert-panel,
body.uw-active[data-uw-bridge="reader"] .wordstudy-panel {
  color: var(--ru-ink) !important;
  border-color: var(--ru-line) !important;
  background: rgba(14,42,57,.96) !important;
}

@media (max-width: 900px) {
  body.uw-active[data-uw-bridge="reader"] > .app > .viz {
    background: linear-gradient(180deg, #0d2b3d, #081c2b) !important;
  }

  body.uw-active[data-uw-bridge="reader"] > .app > .side {
    background: linear-gradient(180deg, var(--ru-surface-2), var(--ru-surface)) !important;
  }
}