/*
 * bibliothēkē / Editorial Research OS — redesign foundation
 * One source of truth for colour, type, spacing, depth and motion.
 * Loaded last so the legacy renderer keeps its behaviour while the new
 * material language owns the presentation layer.
 */
:root {
  /* Palette: warm obsidian, oxidised sage, paper and archival brass. */
  --br-ink-950: #070b0a;
  --br-ink-900: #0c1210;
  --br-ink-850: #101916;
  --br-ink-800: #14201c;
  --br-ink-750: #1b2a24;
  --br-ink-700: #24362e;
  --br-sage-500: #9eb9a4;
  --br-sage-400: #bdd1bd;
  --br-sage-300: #d4e1cf;
  --br-mint-400: #8dd2c0;
  --br-brass-500: #be9251;
  --br-brass-400: #dfbd7b;
  --br-brass-300: #f0d59c;
  --br-paper-100: #f7f1e4;
  --br-paper-200: #e8dfce;
  --br-paper-500: #afa28f;
  --br-paper-700: #756b5f;
  --br-rose-400: #d99d8b;
  --br-violet-400: #b8a9d8;
  --br-danger-400: #ed9c87;

  --br-bg: var(--br-ink-950);
  --br-bg-raised: var(--br-ink-900);
  --br-surface: rgba(20, 32, 28, .82);
  --br-surface-strong: rgba(27, 42, 36, .94);
  --br-surface-soft: rgba(158, 185, 164, .08);
  --br-line: rgba(212, 225, 207, .14);
  --br-line-strong: rgba(223, 189, 123, .34);
  --br-text: var(--br-paper-100);
  --br-text-soft: var(--br-paper-200);
  --br-muted: var(--br-paper-500);
  --br-accent: var(--br-brass-400);
  --br-focus: var(--br-mint-400);

  /* Type: character for orientation, calm serif for evidence, exact sans for chrome. */
  --br-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --br-reading: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --br-ui: "DM Sans", Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  --br-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --br-type-0: .69rem;
  --br-type-1: .76rem;
  --br-type-2: .86rem;
  --br-type-3: 1rem;
  --br-type-4: clamp(1.25rem, 1.15rem + .5vw, 1.7rem);
  --br-type-5: clamp(2rem, 1.55rem + 1.8vw, 3.75rem);
  --br-leading-tight: 1.05;
  --br-leading-copy: 1.58;

  /* 4px rhythm. */
  --br-space-1: 4px;
  --br-space-2: 8px;
  --br-space-3: 12px;
  --br-space-4: 16px;
  --br-space-5: 20px;
  --br-space-6: 24px;
  --br-space-8: 32px;
  --br-space-10: 40px;
  --br-space-12: 48px;
  --br-space-16: 64px;

  --br-radius-sm: 7px;
  --br-radius-md: 12px;
  --br-radius-lg: 18px;
  --br-radius-xl: 26px;
  --br-radius-pill: 999px;

  --br-shadow-panel: 0 22px 60px rgba(0, 0, 0, .34), 0 2px 8px rgba(0, 0, 0, .2);
  --br-shadow-lift: 0 16px 36px rgba(0, 0, 0, .34), 0 0 0 1px rgba(223, 189, 123, .1);
  --br-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -1px 0 rgba(0, 0, 0, .22);
  --br-glass: blur(18px) saturate(120%);

  --br-z-base: 0;
  --br-z-chrome: 50;
  --br-z-popover: 100;
  --br-z-modal: 200;
  --br-z-toast: 300;
  --br-ease: cubic-bezier(.22, 1, .36, 1);
  --br-ease-sharp: cubic-bezier(.16, 1, .3, 1);
  --br-duration: 240ms;

  /* Mobile workspace geometry: the persistent shell occupies the first 119px. */
  --br-workspace-top: 119px;
}

body.uw-active {
  color: var(--br-text);
  background:
    radial-gradient(circle at 50% -12%, rgba(141, 210, 192, .13), transparent 35rem),
    radial-gradient(circle at 96% 12%, rgba(190, 146, 81, .11), transparent 29rem),
    var(--br-bg);
  font-family: var(--br-ui);
  letter-spacing: 0;
}

body.uw-active::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: .17;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

body.uw-active .app {
  background: transparent;
}

body.uw-active .app::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 22rem);
}

/* Shared shell: a quiet museum label above a research instrument. */
body.uw-active .uw-root {
  color: var(--br-text);
  font-family: var(--br-ui);
}

body.uw-active .uw-chrome {
  border: 0;
  border-bottom: 1px solid var(--br-line);
  background: linear-gradient(180deg, rgba(7, 11, 10, .94), rgba(7, 11, 10, .78));
  box-shadow: 0 16px 40px rgba(0, 0, 0, .22);
  backdrop-filter: var(--br-glass);
}

body.uw-active .uw-primary {
  min-height: 70px;
  padding: var(--br-space-3) var(--br-space-6);
  gap: var(--br-space-6);
}

body.uw-active .uw-brand {
  min-width: 174px;
  padding: 0;
  color: var(--br-paper-100);
  text-align: left;
}

body.uw-active .uw-brand span {
  display: block;
  font-family: var(--br-display);
  font-size: 1.72rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.025em;
}

body.uw-active .uw-brand small,
body.uw-active .uw-studio-copy small,
body.uw-active .uw-contextbar small,
body.uw-active .uw-tool-menu small,
body.uw-active .uw-utility-menu small,
body.uw-active .uw-command footer,
body.uw-active .uw-panel small {
  color: var(--br-muted);
  font-family: var(--br-mono);
  font-size: var(--br-type-0);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}

body.uw-active .uw-brand small {
  margin-top: 5px;
  font-size: .53rem;
  letter-spacing: .2em;
}

body.uw-active .uw-studios {
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--br-line);
  border-radius: var(--br-radius-pill);
  background: rgba(255, 255, 255, .025);
}

body.uw-active .uw-studio {
  min-height: 40px;
  padding: 5px 11px 5px 8px;
  border: 1px solid transparent;
  border-radius: var(--br-radius-pill);
  color: var(--br-muted);
  transition: color var(--br-duration) var(--br-ease), background var(--br-duration) var(--br-ease), transform var(--br-duration) var(--br-ease), box-shadow var(--br-duration) var(--br-ease);
}

body.uw-active .uw-studio i {
  color: var(--accent, var(--br-sage-400));
  font-size: .9rem;
}

body.uw-active .uw-studio-copy strong {
  color: inherit;
  font-size: .74rem;
  font-weight: 650;
  letter-spacing: .02em;
}

body.uw-active .uw-studio:hover,
body.uw-active .uw-studio:focus-visible {
  color: var(--br-text-soft);
  background: var(--br-surface-soft);
  transform: translateY(-1px);
}

body.uw-active .uw-studio.active {
  color: var(--br-paper-100);
  border-color: color-mix(in srgb, var(--accent, var(--br-accent)) 58%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent, var(--br-accent)) 15%, transparent), rgba(255, 255, 255, .06));
  box-shadow: 0 5px 16px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .08);
}

body.uw-active .uw-global-actions {
  gap: var(--br-space-2);
}

body.uw-active .uw-icon {
  width: 38px;
  height: 38px;
  border: 1px solid var(--br-line);
  border-radius: 50%;
  color: var(--br-paper-200);
  background: rgba(255, 255, 255, .035);
  transition: transform var(--br-duration) var(--br-ease), border-color var(--br-duration) var(--br-ease), background var(--br-duration) var(--br-ease);
}

body.uw-active .uw-icon:hover,
body.uw-active .uw-icon:focus-visible {
  border-color: var(--br-line-strong);
  background: rgba(223, 189, 123, .12);
  transform: translateY(-1px);
}

body.uw-active .uw-contextbar {
  min-height: 62px;
  padding: 8px var(--br-space-6);
  border-top: 1px solid rgba(255, 255, 255, .035);
  background: rgba(20, 32, 28, .65);
}

body.uw-active .uw-tool-current,
body.uw-active .uw-reader-toggle,
body.uw-active .uw-truth-button {
  min-height: 40px;
  border: 1px solid var(--br-line);
  border-radius: var(--br-radius-md);
  color: var(--br-text-soft);
  background: rgba(255, 255, 255, .035);
  transition: border-color var(--br-duration) var(--br-ease), background var(--br-duration) var(--br-ease), transform var(--br-duration) var(--br-ease);
}

body.uw-active .uw-tool-current:hover,
body.uw-active .uw-tool-current:focus-visible,
body.uw-active .uw-reader-toggle:hover,
body.uw-active .uw-reader-toggle:focus-visible,
body.uw-active .uw-truth-button:hover,
body.uw-active .uw-truth-button:focus-visible {
  border-color: var(--br-line-strong);
  background: rgba(255, 255, 255, .07);
  transform: translateY(-1px);
}

body.uw-active .uw-tool-current strong,
body.uw-active .uw-focus-summary strong,
body.uw-active .uw-truth-button strong {
  color: var(--br-paper-100);
  font-size: var(--br-type-2);
  font-weight: 650;
}

body.uw-active .uw-ref-form {
  border: 1px solid var(--br-line);
  border-radius: var(--br-radius-md);
  background: rgba(7, 11, 10, .35);
}

body.uw-active .uw-ref-form label {
  color: var(--br-muted);
  font-family: var(--br-mono);
  font-size: var(--br-type-0);
  letter-spacing: .1em;
  text-transform: uppercase;
}

body.uw-active .uw-ref-form input {
  color: var(--br-paper-100);
  font-family: var(--br-reading);
  font-size: 1.08rem;
  background: transparent;
}

body.uw-active .uw-ref-form button,
body.uw-active .uw-handoff button {
  border: 0;
  border-radius: var(--br-radius-sm);
  color: var(--br-ink-950);
  background: var(--br-brass-400);
  font-weight: 750;
  transition: filter var(--br-duration) var(--br-ease), transform var(--br-duration) var(--br-ease);
}

body.uw-active .uw-ref-form button:hover,
body.uw-active .uw-ref-form button:focus-visible,
body.uw-active .uw-handoff button:hover,
body.uw-active .uw-handoff button:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

body.uw-active .uw-focus-summary {
  padding-left: var(--br-space-4);
  border-left: 1px solid var(--br-line);
}

body.uw-active .uw-focus-summary #UW_FOCUS_KIND {
  color: var(--br-mint-400);
  font-family: var(--br-mono);
  font-size: var(--br-type-0);
  letter-spacing: .13em;
}

body.uw-active .uw-focus-summary #UW_FOCUS_EXTRA {
  color: var(--br-muted);
  font-size: var(--br-type-1);
}

/* Popovers and focus surfaces. */
body.uw-active .uw-tool-menu,
body.uw-active .uw-utility-menu,
body.uw-active .uw-command,
body.uw-active .uw-panel,
body.uw-active .uw-compare,
body.uw-active .uw-presentation {
  border: 1px solid var(--br-line-strong);
  border-radius: var(--br-radius-lg);
  color: var(--br-text);
  background: rgba(12, 18, 16, .96);
  box-shadow: var(--br-shadow-panel);
  backdrop-filter: var(--br-glass);
}

body.uw-active .uw-tool-menu,
body.uw-active .uw-utility-menu {
  padding: var(--br-space-2);
}

body.uw-active .uw-tool-menu button,
body.uw-active .uw-utility-menu button {
  min-height: 48px;
  border-radius: var(--br-radius-md);
  color: var(--br-text-soft);
  background: transparent;
  transition: background var(--br-duration) var(--br-ease), color var(--br-duration) var(--br-ease), transform var(--br-duration) var(--br-ease);
}

body.uw-active .uw-tool-menu button:hover,
body.uw-active .uw-tool-menu button:focus-visible,
body.uw-active .uw-utility-menu button:hover,
body.uw-active .uw-utility-menu button:focus-visible {
  color: var(--br-paper-100);
  background: var(--br-surface-soft);
  transform: translateX(2px);
}

body.uw-active .uw-command {
  overflow: hidden;
}

body.uw-active .uw-command header {
  padding: var(--br-space-4) var(--br-space-5);
  border-bottom: 1px solid var(--br-line);
}

body.uw-active .uw-command input {
  color: var(--br-paper-100);
  font-family: var(--br-reading);
  font-size: 1.2rem;
}

body.uw-active .uw-command main {
  padding: var(--br-space-2);
}

body.uw-active .uw-command main button {
  border-radius: var(--br-radius-md);
  color: var(--br-text-soft);
}

body.uw-active .uw-command main button[aria-selected="true"],
body.uw-active .uw-command main button:hover {
  color: var(--br-paper-100);
  background: linear-gradient(90deg, rgba(223, 189, 123, .15), rgba(141, 210, 192, .06));
}

/* Main work surface: one material, three degrees of depth. */
body.uw-active .viz {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .025), transparent 30%),
    linear-gradient(180deg, rgba(20, 32, 28, .9), rgba(7, 11, 10, .96));
}

body.uw-active #VIZHUD,
body.uw-active .studymode-shell,
body.uw-active .timeline-overlay,
body.uw-active .original-shell,
body.uw-active .manuscript-shell {
  border-color: var(--br-line);
  border-radius: var(--br-radius-lg);
}

body.uw-active .studymode-shell {
  color: var(--br-text-soft);
  background:
    linear-gradient(140deg, rgba(255, 255, 255, .035), transparent 28%),
    rgba(12, 18, 16, .76);
  box-shadow: var(--br-shadow-panel), var(--br-shadow-inset);
}

body.uw-active .studymode-head {
  padding: var(--br-space-6) var(--br-space-8);
  border-bottom: 1px solid var(--br-line);
}

body.uw-active .studymode-kicker,
body.uw-active .vizhud-k,
body.uw-active .timeline-kicker {
  color: var(--br-brass-400);
  font-family: var(--br-mono);
  font-size: var(--br-type-0);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

body.uw-active .studymode-title,
body.uw-active .vizhud-title,
body.uw-active .timeline-title {
  color: var(--br-paper-100);
  font-family: var(--br-display);
  font-size: var(--br-type-5);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: var(--br-leading-tight);
}

body.uw-active .studymode-copy,
body.uw-active .studymode-card p,
body.uw-active .studymode-panel p,
body.uw-active .vizhud-text {
  color: var(--br-text-soft);
  font-family: var(--br-reading);
  font-size: var(--br-type-3);
  line-height: var(--br-leading-copy);
}

body.uw-active .studymode-main {
  gap: var(--br-space-4);
  padding: var(--br-space-6) var(--br-space-8);
}

body.uw-active .studymode-card,
body.uw-active .studymode-panel,
body.uw-active .mode-panel,
body.uw-active .research-card,
body.uw-active .timeline-panel,
body.uw-active .source-card {
  border: 1px solid var(--br-line);
  border-radius: var(--br-radius-md);
  background: linear-gradient(135deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
  box-shadow: var(--br-shadow-inset);
}

body.uw-active .studymode-card:hover,
body.uw-active .studymode-panel:hover,
body.uw-active .mode-panel:hover,
body.uw-active .research-card:hover,
body.uw-active .source-card:hover {
  border-color: rgba(223, 189, 123, .3);
  box-shadow: var(--br-shadow-lift);
}

body.uw-active .studymode-card h3,
body.uw-active .studymode-panel h3,
body.uw-active .mode-panel h3,
body.uw-active .source-card h3 {
  color: var(--br-paper-100);
  font-family: var(--br-ui);
  font-size: var(--br-type-2);
  font-weight: 700;
  letter-spacing: .01em;
}

body.uw-active button:focus-visible,
body.uw-active input:focus-visible,
body.uw-active select:focus-visible,
body.uw-active textarea:focus-visible,
body.uw-active [tabindex]:focus-visible {
  outline: 2px solid var(--br-focus);
  outline-offset: 3px;
}

/* Reader is the evidence plane: light paper, quiet controls, generous measure. */
body.uw-active .side,
body.uw-active .reader,
body.uw-active #READER {
  border-left: 1px solid var(--br-line);
  background: linear-gradient(180deg, rgba(27, 42, 36, .93), rgba(12, 18, 16, .98));
  box-shadow: -18px 0 48px rgba(0, 0, 0, .18);
}

body.uw-active .side h2,
body.uw-active .reader h2,
body.uw-active .reader-title {
  color: var(--br-paper-100);
  font-family: var(--br-display);
  font-weight: 600;
}

body.uw-active .side .verse,
body.uw-active .reader .verse,
body.uw-active .reader-text {
  color: var(--br-paper-100);
  font-family: var(--br-reading);
  font-size: 1.05rem;
  line-height: 1.7;
}

body.uw-active .side .verse.active,
body.uw-active .reader .verse.active {
  border-left-color: var(--br-brass-400);
  background: rgba(223, 189, 123, .1);
}

body.uw-active .truth-dock,
body.uw-active .truth-panel {
  border-color: var(--br-line);
  border-radius: var(--br-radius-md);
  background: rgba(12, 18, 16, .9);
}

/* Timeline and spatial views inherit the same visual grammar. */
body.uw-active .timeline-overlay,
body.uw-active #TIMELINE_OVERLAY,
body.uw-active #MAPV,
body.uw-active #VATUMODE {
  background:
    radial-gradient(circle at 50% 8%, rgba(141, 210, 192, .1), transparent 30rem),
    var(--br-bg-raised);
}

body.uw-active .tl-shell,
body.uw-active .tl-toolbar,
body.uw-active .timeline-inspector,
body.uw-active .timeline-filterbar,
body.uw-active .map-panel,
body.uw-active .vatu-workbench {
  border-color: var(--br-line);
  border-radius: var(--br-radius-md);
  background: rgba(20, 32, 28, .8);
  box-shadow: var(--br-shadow-inset);
}

body.uw-active .tl-shell button,
body.uw-active .timeline-overlay button,
body.uw-active .studymode-shell button,
body.uw-active #VIZ button {
  border-radius: var(--br-radius-sm);
}

/* Use the focus accent as a material highlight, not a full-surface fill. */
body.uw-active [data-active="true"],
body.uw-active .is-active,
body.uw-active .selected,
body.uw-active .active {
  --selection-wash: color-mix(in srgb, var(--br-accent) 16%, transparent);
}

@media (max-width: 1080px) {
  body.uw-active .uw-primary,
  body.uw-active .uw-contextbar {
    padding-right: var(--br-space-4);
    padding-left: var(--br-space-4);
  }

  body.uw-active .uw-brand {
    min-width: 140px;
  }

  body.uw-active .uw-studio {
    padding-right: 8px;
    padding-left: 8px;
  }

  body.uw-active .uw-studio-copy strong {
    font-size: .68rem;
  }

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

  body.uw-active .uw-contextbar {
    gap: var(--br-space-2);
  }

  body.uw-active .uw-focus-summary #UW_FOCUS_EXTRA {
    display: none;
  }
}

@media (max-width: 720px) {
  body.uw-active {
    --br-space-6: 18px;
    --br-space-8: 24px;
  }

  body.uw-active .uw-primary {
    min-height: 56px;
    padding: 8px 12px;
  }

  body.uw-active .uw-brand {
    min-width: auto;
  }

  body.uw-active .uw-brand span {
    font-size: 1.35rem;
  }

  body.uw-active .uw-brand small,
  body.uw-active .uw-studios .uw-studio:nth-child(n+4) {
    display: none;
  }

  body.uw-active .uw-studios {
    max-width: calc(100vw - 150px);
    overflow: auto;
  }

  body.uw-active .uw-studio {
    min-width: 38px;
    min-height: 34px;
    padding: 4px 8px;
  }

  body.uw-active .uw-studio i {
    font-size: .8rem;
  }

  body.uw-active .uw-studio-copy strong {
    font-size: .64rem;
  }

  body.uw-active .uw-contextbar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    min-height: 56px;
    padding: 8px 12px;
  }

  body.uw-active .uw-tool-current {
    min-width: 42px;
    padding: 7px;
  }

  body.uw-active .uw-tool-current span,
  body.uw-active .uw-tool-current b,
  body.uw-active .uw-focus-summary,
  body.uw-active .uw-ref-form label,
  body.uw-active .uw-ref-form button,
  body.uw-active .uw-reader-toggle small,
  body.uw-active .uw-truth-button span {
    display: none;
  }

  body.uw-active .uw-ref-form {
    min-width: 0;
  }

  body.uw-active .uw-ref-form input {
    width: 100%;
    min-width: 0;
  }

  body.uw-active .uw-reader-toggle,
  body.uw-active .uw-truth-button {
    width: 42px;
    padding: 8px;
  }

  body.uw-active .studymode-head,
  body.uw-active .studymode-main {
    padding: var(--br-space-5) var(--br-space-4);
  }

  body.uw-active .studymode-title {
    font-size: clamp(2rem, 11vw, 3rem);
  }

  body.uw-active .studymode-main,
  body.uw-active .studymode-main.two,
  body.uw-active .timeline-main,
  body.uw-active .original-main,
  body.uw-active .manuscript-main {
    grid-template-columns: 1fr;
  }

  /* On touch, research rails become bottom-sheet surfaces instead of squeezed columns. */
  body.uw-active .studymode-shell .studymode-panel.is-rail,
  body.uw-active .studymode-shell .mode-rail,
  body.uw-active .timeline-inspector,
  body.uw-active .source-rail {
    position: relative;
    max-height: 42vh;
    overflow: auto;
    border-top: 1px solid var(--br-line-strong);
    border-radius: var(--br-radius-lg) var(--br-radius-lg) 0 0;
  }

  body.uw-active .side,
  body.uw-active .reader,
  body.uw-active #READER {
    position: fixed;
    z-index: var(--br-z-modal);
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-height: min(76vh, 720px);
    border: 1px solid var(--br-line-strong);
    border-bottom: 0;
    border-radius: var(--br-radius-xl) var(--br-radius-xl) 0 0;
    box-shadow: 0 -24px 60px rgba(0, 0, 0, .45);
  }
}

/* Inside: the durable layer between a single session and a finished study. */
body.inside-active #VIZ {
  position: relative;
  overflow: hidden;
}

/* Inside and Claim Lab are complete research workspaces. Keep the reader
   drawer out of their hit area so mobile controls remain directly usable. */
body.uw-active:is(.inside-active, .claimlab-active) .app {
  grid-template-columns: 1fr !important;
}

body.uw-active:is(.inside-active, .claimlab-active) .app > .viz {
  grid-column: 1 / -1 !important;
}

body.uw-active:is(.inside-active, .claimlab-active) .app > .side {
  display: none !important;
  pointer-events: none !important;
}

/* Full-workspace research modes own the interaction surface. Keep legacy
   visualization chrome mounted for state compatibility, but remove it from
   the visual and pointer stack so mobile sheets cannot be intercepted by the
   underlying HUD/canvas layer. */
body.uw-active:is(.inside-active, .claimlab-active) #VIZHUD,
body.uw-active:is(.inside-active, .claimlab-active) #BB {
  display: none !important;
  pointer-events: none !important;
}

body.uw-active:is(.inside-active, .claimlab-active) .vizambient,
body.uw-active:is(.inside-active, .claimlab-active) > .app > .viz > canvas {
  pointer-events: none !important;
}

body.uw-active:is(.inside-active, .claimlab-active) #INSIDEMODE,
body.uw-active:is(.inside-active, .claimlab-active) #CLAIMLABMODE {
  z-index: 999 !important;
}

body.uw-active #INSIDEMODE {
  position: absolute;
  z-index: 24;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
  color: var(--br-text);
  background:
    radial-gradient(circle at 72% 0, rgba(141, 210, 192, .09), transparent 30rem),
    linear-gradient(160deg, rgba(20, 32, 28, .97), rgba(7, 11, 10, .99)),
    var(--br-bg);
}

body.uw-active .inside-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--br-space-8);
  padding: var(--br-space-6) var(--br-space-8) var(--br-space-5);
  border-bottom: 1px solid var(--br-line);
}

body.uw-active .inside-head > div:first-child { max-width: 72ch; }

body.uw-active .inside-kicker,
body.uw-active .inside-label {
  display: block;
  color: var(--br-brass-400);
  font-family: var(--br-mono);
  font-size: var(--br-type-0);
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
}

body.uw-active .inside-head h1,
body.uw-active .inside-card h2,
body.uw-active .inside-view-intro h2,
body.uw-active .inside-review-hero h2 {
  margin-top: var(--br-space-2);
  color: var(--br-paper-100);
  font-family: var(--br-display);
  font-size: clamp(1.7rem, 1.2rem + 1.2vw, 2.7rem);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.08;
}

body.uw-active .inside-head p,
body.uw-active .inside-card p,
body.uw-active .inside-view-intro p,
body.uw-active .inside-review-hero p,
body.uw-active .inside-muted {
  color: var(--br-muted);
  font-family: var(--br-reading);
  font-size: .96rem;
  line-height: var(--br-leading-copy);
}

body.uw-active .inside-head-actions,
body.uw-active .inside-action-stack {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--br-space-2);
}

body.uw-active .inside-head-actions button,
body.uw-active .inside-card button,
body.uw-active .inside-primary-action,
body.uw-active .inside-add-row button {
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid var(--br-line);
  border-radius: var(--br-radius-sm);
  color: var(--br-text-soft);
  background: rgba(255, 255, 255, .035);
  font-family: var(--br-ui);
  font-size: var(--br-type-1);
  font-weight: 650;
  transition: border-color var(--br-duration) var(--br-ease), background var(--br-duration) var(--br-ease), transform var(--br-duration) var(--br-ease);
}

body.uw-active .inside-head-actions button:first-child,
body.uw-active .inside-primary-action,
body.uw-active .inside-add-row button,
body.uw-active .inside-next-card button:first-child {
  border-color: rgba(223, 189, 123, .45);
  color: var(--br-brass-300);
  background: rgba(223, 189, 123, .1);
}

body.uw-active .inside-head-actions button:hover,
body.uw-active .inside-card button:hover,
body.uw-active .inside-primary-action:hover,
body.uw-active .inside-add-row button:hover {
  border-color: var(--br-line-strong);
  background: rgba(141, 210, 192, .1);
  transform: translateY(-1px);
}

body.uw-active .inside-tabs {
  display: flex;
  gap: 3px;
  padding: 0 var(--br-space-8);
  border-bottom: 1px solid var(--br-line);
}

body.uw-active .inside-tabs button {
  padding: var(--br-space-3) var(--br-space-4);
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--br-muted);
  background: transparent;
  font-family: var(--br-mono);
  font-size: var(--br-type-1);
  letter-spacing: .04em;
  text-transform: uppercase;
}

body.uw-active .inside-tabs button.active {
  border-bottom-color: var(--br-brass-400);
  color: var(--br-paper-100);
}

body.uw-active .inside-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(255px, .72fr);
  gap: var(--br-space-4);
  min-height: 0;
  padding: var(--br-space-5) var(--br-space-8) var(--br-space-8);
}

body.uw-active .inside-layout-wide { grid-template-columns: minmax(0, 1.3fr) minmax(300px, .78fr); }
body.uw-active .inside-main,
body.uw-active .inside-rail { min-width: 0; }
body.uw-active .inside-main,
body.uw-active .inside-rail { display: grid; align-content: start; gap: var(--br-space-4); }

body.uw-active .inside-card {
  min-width: 0;
  padding: var(--br-space-5);
  border: 1px solid var(--br-line);
  border-radius: var(--br-radius-md);
  background: linear-gradient(145deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
  box-shadow: var(--br-shadow-inset);
}

body.uw-active .inside-card:hover { border-color: rgba(223, 189, 123, .28); }

body.uw-active .inside-section-head,
body.uw-active .inside-hero-meta,
body.uw-active .inside-hero-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--br-space-3);
}

body.uw-active .inside-section-head > span,
body.uw-active .inside-hero-meta > span:last-child,
body.uw-active .inside-hero-footer,
body.uw-active .inside-goal-row small {
  color: var(--br-muted);
  font-family: var(--br-mono);
  font-size: var(--br-type-0);
  letter-spacing: .06em;
  text-transform: uppercase;
}

body.uw-active .inside-goal-hero { padding: var(--br-space-6); }
body.uw-active .inside-goal-hero h2 { font-size: clamp(2rem, 1.5rem + 1.8vw, 3.8rem); }
body.uw-active .inside-outcome { max-width: 66ch; margin-top: var(--br-space-4); font-size: 1.05rem !important; }
body.uw-active .inside-progress { height: 6px; margin-top: var(--br-space-5); overflow: hidden; border-radius: var(--br-radius-pill); background: rgba(255, 255, 255, .08); }
body.uw-active .inside-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--br-brass-400), var(--br-mint-400)); transition: width 420ms var(--br-ease); }
body.uw-active .inside-hero-footer { align-items: center; margin-top: var(--br-space-3); }
body.uw-active .inside-hero-footer span:last-child { color: var(--br-brass-300); }

body.uw-active .inside-composer { display: grid; gap: var(--br-space-3); }
body.uw-active .inside-composer label,
body.uw-active .inside-form-grid label {
  display: grid;
  gap: var(--br-space-2);
  color: var(--br-muted);
  font-family: var(--br-mono);
  font-size: var(--br-type-0);
  letter-spacing: .08em;
  text-transform: uppercase;
}
body.uw-active .inside-composer input,
body.uw-active .inside-composer textarea,
body.uw-active .inside-composer select,
body.uw-active .inside-add-row input {
  width: 100%;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid var(--br-line);
  border-radius: var(--br-radius-sm);
  color: var(--br-paper-100);
  background: rgba(7, 11, 10, .48);
  font-family: var(--br-reading);
  font-size: .96rem;
  letter-spacing: 0;
  line-height: 1.45;
  text-transform: none;
  resize: vertical;
}
body.uw-active .inside-composer input:focus,
body.uw-active .inside-composer textarea:focus,
body.uw-active .inside-composer select:focus,
body.uw-active .inside-add-row input:focus { border-color: var(--br-focus); outline: 0; box-shadow: 0 0 0 3px rgba(141, 210, 192, .12); }
body.uw-active .inside-form-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: var(--br-space-3); }
body.uw-active .inside-context { display: grid; justify-items: end; gap: 2px; color: var(--br-brass-300); font-family: var(--br-mono); font-size: var(--br-type-1); }
body.uw-active .inside-context small { color: var(--br-muted); font-size: var(--br-type-0); }

body.uw-active .inside-milestone-card { display: grid; gap: var(--br-space-3); }
body.uw-active .inside-milestone-card .inside-section-head h2 { font-size: var(--br-type-4); }
body.uw-active .inside-milestone { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: var(--br-space-3); align-items: start; padding: var(--br-space-3) 0; border-top: 1px solid var(--br-line); }
body.uw-active .inside-milestone:first-of-type { border-top: 0; }
body.uw-active .inside-check { display: grid; width: 28px; height: 28px; min-height: 28px !important; padding: 0 !important; place-items: center; border-radius: 50% !important; color: var(--br-brass-300) !important; background: rgba(223, 189, 123, .08) !important; font-family: var(--br-mono) !important; font-size: .66rem !important; }
body.uw-active .inside-milestone.done .inside-check { color: var(--br-ink-950) !important; background: var(--br-mint-400) !important; }
body.uw-active .inside-milestone strong { display: block; color: var(--br-paper-100); font-family: var(--br-ui); font-size: .9rem; }
body.uw-active .inside-milestone.done strong { color: var(--br-sage-400); text-decoration: line-through; text-decoration-color: rgba(141, 210, 192, .55); }
body.uw-active .inside-milestone p { margin-top: 3px; font-size: .86rem; }
body.uw-active .inside-milestone > span { color: var(--br-muted); font-family: var(--br-mono); font-size: var(--br-type-0); text-transform: uppercase; }
body.uw-active .inside-milestone footer { display: flex; flex-wrap: wrap; gap: var(--br-space-2); margin-top: var(--br-space-2); }
body.uw-active .inside-milestone footer button { min-height: 0; padding: 0; border: 0; color: var(--br-brass-300); background: transparent; font-family: var(--br-mono); font-size: .68rem; }
body.uw-active .inside-add-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--br-space-2); padding-top: var(--br-space-3); border-top: 1px solid var(--br-line); }
body.uw-active .inside-add-row input { font-size: .88rem; }
body.uw-active .inside-text-action { justify-self: start; padding: 0 !important; border: 0 !important; color: var(--br-brass-300) !important; background: transparent !important; }

body.uw-active .inside-goal-list { padding: var(--br-space-4); }
body.uw-active .inside-goal-list h2,
body.uw-active .inside-signal-card h2 { font-size: var(--br-type-4); }
body.uw-active .inside-goal-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) 20px; width: 100%; min-height: 0 !important; margin-top: var(--br-space-2); padding: var(--br-space-3) 0 !important; border: 0 !important; border-top: 1px solid var(--br-line) !important; border-radius: 0 !important; color: var(--br-text-soft) !important; background: transparent !important; text-align: left; transform: none !important; }
body.uw-active .inside-goal-row.active { color: var(--br-paper-100) !important; }
body.uw-active .inside-goal-row i { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--br-line); border-radius: 50%; color: var(--br-brass-300); font-family: var(--br-mono); font-size: .67rem; font-style: normal; }
body.uw-active .inside-goal-row.active i { border-color: var(--br-brass-400); background: rgba(223, 189, 123, .1); }
body.uw-active .inside-goal-row strong { display: block; overflow: hidden; color: inherit; font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }
body.uw-active .inside-goal-row small { display: block; margin-top: 4px; overflow: hidden; font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; }
body.uw-active .inside-goal-row b { align-self: center; color: var(--br-muted); font-size: 1.25rem; font-weight: 400; }
body.uw-active .inside-signal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--br-space-2); margin-top: var(--br-space-4); }
body.uw-active .inside-signal-grid div { display: grid; gap: 3px; padding: var(--br-space-3) var(--br-space-2); border: 1px solid var(--br-line); border-radius: var(--br-radius-sm); text-align: center; }
body.uw-active .inside-signal-grid strong { color: var(--br-paper-100); font-family: var(--br-display); font-size: 1.6rem; font-weight: 600; }
body.uw-active .inside-signal-grid span { color: var(--br-muted); font-family: var(--br-mono); font-size: .61rem; text-transform: uppercase; }
body.uw-active .inside-signal-card p { margin-top: var(--br-space-3); font-size: .84rem; }
body.uw-active .inside-next-card { border-color: rgba(223, 189, 123, .25); }
body.uw-active .inside-next-card h3 { margin-top: var(--br-space-2); color: var(--br-paper-100); font-family: var(--br-reading); font-size: 1.1rem; font-weight: 500; line-height: 1.35; }
body.uw-active .inside-action-stack { display: grid; margin-top: var(--br-space-4); }
body.uw-active .inside-action-stack button { width: 100%; text-align: left; }
body.uw-active .inside-empty { padding: var(--br-space-6) 0; text-align: center; }
body.uw-active .inside-empty strong { color: var(--br-paper-100); font-family: var(--br-display); font-size: 1.5rem; font-weight: 600; }
body.uw-active .inside-empty p { max-width: 48ch; margin: var(--br-space-2) auto 0; }

body.uw-active .inside-view-intro,
body.uw-active .inside-review-hero { padding: var(--br-space-6); }
body.uw-active .inside-view-intro p { max-width: 68ch; margin-top: var(--br-space-4); }
body.uw-active .inside-review-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--br-space-2); margin-top: var(--br-space-5); }
body.uw-active .inside-review-stats div { display: grid; gap: 3px; padding: var(--br-space-3); border: 1px solid var(--br-line); border-radius: var(--br-radius-sm); }
body.uw-active .inside-review-stats strong { color: var(--br-brass-300); font-family: var(--br-display); font-size: 2rem; font-weight: 600; }
body.uw-active .inside-review-stats span { color: var(--br-muted); font-family: var(--br-mono); font-size: .64rem; text-transform: uppercase; }
body.uw-active .inside-review-row { display: flex; align-items: center; gap: var(--br-space-3); padding: var(--br-space-3) 0; border-top: 1px solid var(--br-line); }
body.uw-active .inside-review-row i { color: var(--br-mint-400); font-style: normal; }
body.uw-active .inside-review-row strong,
body.uw-active .inside-review-row small { display: block; }
body.uw-active .inside-review-row strong { color: var(--br-paper-100); font-size: .9rem; }
body.uw-active .inside-review-row small { margin-top: 3px; color: var(--br-muted); font-family: var(--br-reading); }

@media (max-width: 900px) {
  body.uw-active .inside-head { gap: var(--br-space-4); padding: var(--br-space-5) var(--br-space-5) var(--br-space-4); }
  body.uw-active .inside-layout,
  body.uw-active .inside-layout-wide { grid-template-columns: 1fr; padding: var(--br-space-4) var(--br-space-5) var(--br-space-6); }
  body.uw-active .inside-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.uw-active .inside-rail .inside-composer { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  body.uw-active .inside-head { display: block; }
  body.uw-active .inside-head-actions { margin-top: var(--br-space-4); }
  body.uw-active .inside-tabs { overflow: auto; padding: 0 var(--br-space-4); }
  body.uw-active .inside-tabs button { flex: 0 0 auto; min-height: 44px; }
  body.uw-active .inside-layout,
  body.uw-active .inside-layout-wide { padding: var(--br-space-4); }
  body.uw-active .inside-rail { grid-template-columns: 1fr; }
  body.uw-active .inside-rail .inside-composer { grid-column: auto; }
  body.uw-active .inside-form-grid,
  body.uw-active .inside-add-row { grid-template-columns: 1fr; }
  body.uw-active .inside-goal-hero { padding: var(--br-space-5); }
  body.uw-active .inside-hero-footer { display: grid; }
  body.uw-active .inside-milestone { grid-template-columns: 30px minmax(0, 1fr); }
  body.uw-active .inside-milestone > span { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  body.uw-active .inside-progress i { transition: none; }
}

/* Reader clarity pass: one visible focus, one calm reading surface. */
body.uw-active[data-uw-bridge="reader"] .uw-contextbar {
  grid-template-columns: 132px minmax(196px, 222px) minmax(0, 1fr) minmax(150px, 190px) 0 112px !important;
}

body.uw-active[data-uw-bridge="reader"] .uw-contextbar .uw-reader-toggle { display: none !important; }
body.uw-active[data-uw-bridge="reader"] .uw-focus-summary {
  display: grid !important;
  align-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 34px;
}
body.uw-active[data-uw-bridge="reader"] .uw-focus-summary strong {
  font-size: .76rem !important;
  line-height: 1.1;
}
body.uw-active[data-uw-bridge="reader"] .uw-focus-summary small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.uw-active[data-uw-bridge="reader"] .uw-handoff {
  display: flex !important;
  gap: 4px;
  min-width: 0;
}
body.uw-active[data-uw-bridge="reader"] .uw-handoff button {
  min-width: 0 !important;
  max-width: none !important;
  padding: 0 8px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: .04em !important;
}

body.uw-active[data-uw-bridge="reader"] .app > .side {
  border-left-color: rgba(223, 189, 123, .26);
  background:
    linear-gradient(180deg, rgba(24, 34, 31, .98), rgba(8, 13, 12, .99)),
    var(--br-bg);
}
body.uw-active[data-uw-bridge="reader"] .app > .side .side-head {
  padding: 16px 18px 14px;
  gap: 12px;
  border-bottom-color: rgba(223, 189, 123, .2);
}
body.uw-active[data-uw-bridge="reader"] .app > .side .side-headline { align-items: center; }
body.uw-active[data-uw-bridge="reader"] .app > .side .side-title {
  font-size: 1.58rem;
  letter-spacing: -.02em;
}
body.uw-active[data-uw-bridge="reader"] .app > .side .reader-tools { gap: 6px; }
body.uw-active[data-uw-bridge="reader"] .app > .side .reader-tools .tabs { min-width: 0; }
body.uw-active[data-uw-bridge="reader"] .app > .side .focussearch { margin-top: 2px; }
body.uw-active[data-uw-bridge="reader"] .app > .side .focussearch input {
  height: 42px;
  border-color: rgba(223, 189, 123, .18);
  background: rgba(7, 11, 10, .56);
  font-size: .82rem;
}
body.uw-active[data-uw-bridge="reader"] .app > .side .focussearch button { height: 42px; }
body.uw-active[data-uw-bridge="reader"] .app > .side .rnav {
  padding: 12px 18px;
  border-bottom-color: rgba(223, 189, 123, .18);
}
body.uw-active[data-uw-bridge="reader"] .app > .side .rbody { padding: 22px 24px 34px; }
body.uw-active[data-uw-bridge="reader"] .app > .side .chapter-copy {
  max-width: 58ch;
  color: var(--br-paper-200);
  font-family: var(--br-reading);
  font-size: 1.08rem;
  line-height: 1.88;
}
body.uw-active[data-uw-bridge="reader"] .app > .side .vs {
  line-height: 1.88;
  padding: 3px 5px;
}
body.uw-active[data-uw-bridge="reader"] .app > .side .chtitle {
  color: var(--br-paper-100);
  font-size: clamp(2rem, 1.55rem + 1vw, 2.65rem);
}

@media (max-width: 720px) {
  /* The mobile Reader is a full reading sheet; the empty 3D canvas moves away. */
  body.uw-active[data-uw-bridge="reader"] .uw-contextbar {
    grid-template-columns: minmax(104px, .9fr) minmax(0, 1.35fr) 30px !important;
    grid-template-areas: "tool ref truth" !important;
  }
  body.uw-active[data-uw-bridge="reader"] .uw-focus-summary,
  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 {
    display: block !important;
    height: calc(100dvh - 105px) !important;
    min-height: 0 !important;
    padding: 0 !important;
  }
  body.uw-active[data-uw-bridge="reader"] > .app > .viz {
    display: block !important;
    height: 100% !important;
    min-height: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body.uw-active[data-uw-bridge="reader"] > .app > .side {
    position: fixed !important;
    z-index: var(--br-z-modal);
    inset: 105px 0 0 !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(223, 189, 123, .28) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  body.uw-active[data-uw-bridge="reader"] .app > .side .side-head { padding: 12px 12px 10px; gap: 8px; }
  body.uw-active[data-uw-bridge="reader"] .app > .side .side-title { font-size: 1.28rem; }
  body.uw-active[data-uw-bridge="reader"] .app > .side .reader-tools { gap: 4px; }
  body.uw-active[data-uw-bridge="reader"] .app > .side .focussearch input,
  body.uw-active[data-uw-bridge="reader"] .app > .side .focussearch button { height: 38px; }
  body.uw-active[data-uw-bridge="reader"] .app > .side .rbody { padding: 18px 18px 30px; }
  body.uw-active[data-uw-bridge="reader"] .app > .side .chapter-copy {
    font-size: 1rem;
    line-height: 1.82;
  }
  body.uw-active[data-uw-bridge="reader"] .app > .side .vs { line-height: 1.82; }
  body.uw-active[data-uw-bridge="reader"] .app > .side .side-top-resizer { display: none !important; }
}

/* Belegkette / Argumentarium: a focused research room, not another dashboard. */
body.claimlab-active #VIZ {
  position: relative;
  overflow: hidden;
}

body.uw-active #CLAIMLABMODE {
  position: absolute;
  z-index: 24;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
  color: var(--br-text);
  background:
    radial-gradient(circle at 50% 0, rgba(223, 189, 123, .09), transparent 28rem),
    linear-gradient(160deg, rgba(20, 32, 28, .96), rgba(7, 11, 10, .99)),
    var(--br-bg);
}

body.uw-active .claimlab-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--br-space-8);
  padding: var(--br-space-6) var(--br-space-8) var(--br-space-5);
  border-bottom: 1px solid var(--br-line);
}

body.uw-active .claimlab-head > div:first-child {
  max-width: 68ch;
}

body.uw-active .claimlab-kicker,
body.uw-active .claimlab-label {
  display: block;
  color: var(--br-brass-400);
  font-family: var(--br-mono);
  font-size: var(--br-type-0);
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
}

body.uw-active .claimlab-head h1,
body.uw-active .claimlab-chain h2,
body.uw-active .claimlab-map-view h2,
body.uw-active .claimlab-output-view h2 {
  margin-top: var(--br-space-2);
  color: var(--br-paper-100);
  font-family: var(--br-display);
  font-size: clamp(1.7rem, 1.2rem + 1.2vw, 2.7rem);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.08;
}

body.uw-active .claimlab-head p,
body.uw-active .claimlab-card p,
body.uw-active .claimlab-empty p,
body.uw-active .claimlab-map-view p {
  color: var(--br-muted);
  font-family: var(--br-reading);
  font-size: .96rem;
  line-height: var(--br-leading-copy);
}

body.uw-active .claimlab-head-actions,
body.uw-active .claimlab-add,
body.uw-active .claimlab-output-view footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--br-space-2);
}

body.uw-active .claimlab-head-actions button,
body.uw-active .claimlab-add button,
body.uw-active .claimlab-empty button,
body.uw-active .claimlab-card > button,
body.uw-active .claimlab-output-view footer button,
body.uw-active .claim-evidence-card footer button,
body.uw-active .claim-proof-node button {
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid var(--br-line);
  border-radius: var(--br-radius-sm);
  color: var(--br-text-soft);
  background: rgba(255, 255, 255, .035);
  font-family: var(--br-ui);
  font-size: var(--br-type-1);
  font-weight: 650;
  transition: border-color var(--br-duration) var(--br-ease), background var(--br-duration) var(--br-ease), transform var(--br-duration) var(--br-ease);
}

body.uw-active .claimlab-head-actions button:first-child,
body.uw-active .claimlab-head-actions button:last-child,
body.uw-active .claimlab-empty button,
body.uw-active .claimlab-add button {
  border-color: rgba(223, 189, 123, .45);
  color: var(--br-brass-300);
  background: rgba(223, 189, 123, .1);
}

body.uw-active .claimlab-head-actions button:hover,
body.uw-active .claimlab-add button:hover,
body.uw-active .claimlab-empty button:hover,
body.uw-active .claimlab-card > button:hover,
body.uw-active .claimlab-output-view footer button:hover,
body.uw-active .claim-evidence-card footer button:hover,
body.uw-active .claim-proof-node button:hover {
  border-color: var(--br-line-strong);
  background: rgba(141, 210, 192, .1);
  transform: translateY(-1px);
}

body.uw-active .claimlab-tabs {
  display: flex;
  gap: 3px;
  padding: 0 var(--br-space-8);
  border-bottom: 1px solid var(--br-line);
}

body.uw-active .claimlab-tabs button {
  padding: var(--br-space-3) var(--br-space-4);
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--br-muted);
  background: transparent;
  font-family: var(--br-mono);
  font-size: var(--br-type-1);
  letter-spacing: .04em;
  text-transform: uppercase;
}

body.uw-active .claimlab-tabs button.active {
  border-bottom-color: var(--br-brass-400);
  color: var(--br-paper-100);
}

body.uw-active .claimlab-tabs button span {
  display: inline-grid;
  min-width: 1.3rem;
  min-height: 1.3rem;
  place-items: center;
  margin-left: 4px;
  border-radius: 50%;
  color: var(--br-ink-950);
  background: var(--br-brass-400);
  font-size: .6rem;
}

body.uw-active .claimlab-layout {
  display: grid;
  grid-template-columns: minmax(220px, .7fr) minmax(0, 1.55fr) minmax(230px, .78fr);
  gap: var(--br-space-4);
  min-height: 0;
  padding: var(--br-space-5) var(--br-space-8) var(--br-space-8);
}

body.uw-active .claimlab-question,
body.uw-active .claimlab-inspector,
body.uw-active .claimlab-chain {
  min-width: 0;
}

body.uw-active .claimlab-question,
body.uw-active .claimlab-inspector {
  display: grid;
  align-content: start;
  gap: var(--br-space-4);
}

body.uw-active .claimlab-card,
body.uw-active .claimlab-empty,
body.uw-active .claimlab-add,
body.uw-active .claim-evidence-card {
  border: 1px solid var(--br-line);
  border-radius: var(--br-radius-md);
  background: linear-gradient(145deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
  box-shadow: var(--br-shadow-inset);
}

body.uw-active .claimlab-card {
  padding: var(--br-space-4);
}

body.uw-active .claimlab-card textarea,
body.uw-active .claimlab-card select,
body.uw-active .claimlab-add input {
  width: 100%;
  margin-top: var(--br-space-3);
  padding: 10px 11px;
  border: 1px solid var(--br-line);
  border-radius: var(--br-radius-sm);
  color: var(--br-paper-100);
  background: rgba(7, 11, 10, .48);
  font-family: var(--br-reading);
  font-size: .98rem;
  line-height: 1.5;
  resize: vertical;
}

body.uw-active .claimlab-card textarea:focus,
body.uw-active .claimlab-card select:focus,
body.uw-active .claimlab-add input:focus {
  border-color: var(--br-focus);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(141, 210, 192, .12);
}

body.uw-active .claimlab-field-label {
  display: block;
  margin-top: var(--br-space-4);
  color: var(--br-muted);
  font-family: var(--br-mono);
  font-size: var(--br-type-0);
  letter-spacing: .1em;
  text-transform: uppercase;
}

body.uw-active .claimlab-status-copy {
  margin-top: var(--br-space-3);
  font-size: .82rem;
}

body.uw-active .claimlab-context {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--br-space-2);
  margin-top: var(--br-space-3);
  padding-top: var(--br-space-3);
  border-top: 1px solid var(--br-line);
  color: var(--br-brass-300);
  font-family: var(--br-mono);
  font-size: var(--br-type-1);
}

body.uw-active .claimlab-context small {
  color: var(--br-muted);
  font-family: var(--br-ui);
  font-size: .72rem;
}

body.uw-active .claimlab-chain {
  display: grid;
  align-content: start;
  gap: var(--br-space-3);
}

body.uw-active .claimlab-chain-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--br-space-3);
  padding: 0 var(--br-space-2) var(--br-space-2);
}

body.uw-active .claimlab-chain-head h2 {
  font-size: 1.7rem;
}

body.uw-active .claimlab-count {
  color: var(--br-muted);
  font-family: var(--br-mono);
  font-size: var(--br-type-0);
  text-transform: uppercase;
}

body.uw-active .claimlab-empty {
  display: grid;
  justify-items: start;
  gap: var(--br-space-2);
  padding: var(--br-space-8);
  border-color: rgba(223, 189, 123, .25);
  background: radial-gradient(circle at 70% 0, rgba(223, 189, 123, .1), transparent 18rem), rgba(20, 32, 28, .55);
}

body.uw-active .claimlab-empty > span,
body.uw-active .claim-evidence-index {
  color: var(--br-brass-400);
  font-family: var(--br-mono);
  font-size: var(--br-type-0);
  letter-spacing: .12em;
}

body.uw-active .claimlab-empty h3,
body.uw-active .claimlab-inspector h3 {
  color: var(--br-paper-100);
  font-family: var(--br-display);
  font-size: 1.45rem;
  font-weight: 600;
}

body.uw-active .claim-evidence-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: var(--br-space-3);
  padding: var(--br-space-4);
  border-left: 2px solid var(--claim-truth, var(--br-brass-400));
}

body.uw-active .claim-evidence-body header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--br-space-2);
}

body.uw-active .claim-evidence-body header > span,
body.uw-active .claim-evidence-body header > small {
  color: var(--br-muted);
  font-family: var(--br-mono);
  font-size: var(--br-type-0);
  text-transform: uppercase;
}

body.uw-active .claim-evidence-body header > strong {
  color: var(--br-paper-100);
  font-size: var(--br-type-2);
}

body.uw-active .claim-evidence-body p {
  margin: var(--br-space-3) 0;
  color: var(--br-text-soft);
  font-family: var(--br-reading);
  font-size: 1rem;
  line-height: var(--br-leading-copy);
}

body.uw-active .claim-evidence-card footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--br-space-2);
}

body.uw-active .claim-evidence-card footer button:first-child,
body.uw-active .claim-proof-node button {
  border-color: rgba(141, 210, 192, .28);
  color: var(--br-mint-400);
}

body.uw-active .claimlab-add {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(130px, .8fr) auto;
  gap: var(--br-space-2);
  align-items: center;
  padding: var(--br-space-3);
}

body.uw-active .claimlab-add input {
  width: auto;
  margin: 0;
}

body.uw-active .claimlab-add strong {
  display: block;
  margin-top: 3px;
  color: var(--br-paper-100);
  font-size: var(--br-type-2);
}

body.uw-active .claimlab-truth {
  display: flex;
  align-items: center;
  gap: var(--br-space-2);
  margin: var(--br-space-3) 0;
  color: var(--br-paper-100);
  font-size: var(--br-type-2);
  font-weight: 650;
}

body.uw-active .claimlab-truth i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--br-brass-400);
  box-shadow: 0 0 14px rgba(223, 189, 123, .4);
}

body.uw-active .claimlab-stat {
  display: inline-flex;
  flex-direction: column;
  min-width: 5rem;
  margin: var(--br-space-3) var(--br-space-2) var(--br-space-4) 0;
  padding: var(--br-space-2) var(--br-space-3);
  border: 1px solid var(--br-line);
  border-radius: var(--br-radius-sm);
}

body.uw-active .claimlab-stat strong {
  color: var(--br-brass-300);
  font-family: var(--br-display);
  font-size: 1.4rem;
}

body.uw-active .claimlab-stat span,
body.uw-active .claimlab-output-block > span {
  color: var(--br-muted);
  font-family: var(--br-mono);
  font-size: var(--br-type-0);
  text-transform: uppercase;
}

body.uw-active .claimlab-map-view,
body.uw-active .claimlab-output-view {
  padding: var(--br-space-6) var(--br-space-8) var(--br-space-8);
}

body.uw-active .claimlab-map-view > section,
body.uw-active .claimlab-output-view > section {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--br-space-8);
}

body.uw-active .claimlab-proof-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--br-space-3);
  margin-top: var(--br-space-8);
}

body.uw-active .claim-proof-node {
  display: grid;
  gap: var(--br-space-1);
  min-width: 11rem;
  padding: var(--br-space-3);
  border: 1px solid var(--br-line);
  border-top: 2px solid var(--br-brass-400);
  border-radius: var(--br-radius-md);
  background: rgba(255, 255, 255, .035);
}

body.uw-active .claim-proof-node.current {
  border-color: rgba(223, 189, 123, .35);
  background: rgba(223, 189, 123, .08);
}

body.uw-active .claim-proof-node strong {
  color: var(--br-paper-100);
  font-family: var(--br-reading);
}

body.uw-active .claim-proof-node span {
  color: var(--br-muted);
  font-family: var(--br-mono);
  font-size: var(--br-type-0);
}

body.uw-active .claim-proof-connector {
  color: var(--br-brass-400);
  font-size: 1.35rem;
}

body.uw-active .claimlab-output-block {
  margin-top: var(--br-space-6);
  padding-top: var(--br-space-4);
  border-top: 1px solid var(--br-line);
}

body.uw-active .claimlab-output-block p,
body.uw-active .claimlab-output-block pre {
  margin-top: var(--br-space-2);
  color: var(--br-text-soft);
  font-family: var(--br-reading);
  white-space: pre-wrap;
}

body.uw-active .claimlab-output-status {
  margin-top: var(--br-space-3);
  color: var(--br-brass-300) !important;
  font-family: var(--br-mono) !important;
  font-size: var(--br-type-1) !important;
}

/* Reader expert layer: progressive disclosure over the existing Reader, never a redesign. */
body.uw-active .reader-expert-toggle {
  min-height: 32px;
  padding: 5px 9px;
  border: 1px solid var(--br-line);
  border-radius: var(--br-radius-sm);
  color: var(--br-text-soft);
  background: rgba(255, 255, 255, .035);
  font-size: var(--br-type-1);
  font-weight: 650;
}

body.uw-active .reader-expert-toggle.act,
body.uw-active .reader-expert-toggle:hover {
  border-color: var(--br-line-strong);
  color: var(--br-brass-300);
  background: rgba(223, 189, 123, .1);
}

body.uw-active .reader-expert-panel {
  margin: 0 var(--br-space-4) var(--br-space-3);
  padding: var(--br-space-3);
  border: 1px solid var(--br-line);
  border-radius: var(--br-radius-md);
  background: linear-gradient(145deg, rgba(223, 189, 123, .07), rgba(255, 255, 255, .02));
  box-shadow: var(--br-shadow-inset);
}

body.uw-active .reader-expert-panel[hidden] {
  display: none;
}

body.uw-active .reader-expert-panel > header,
body.uw-active .reader-expert-meta,
body.uw-active .reader-expert-actions,
body.uw-active .reader-shortcuts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--br-space-2);
}

body.uw-active .reader-expert-panel > header {
  justify-content: space-between;
  padding-bottom: var(--br-space-2);
  border-bottom: 1px solid var(--br-line);
}

body.uw-active .reader-expert-panel > header strong {
  display: block;
  margin-top: 2px;
  color: var(--br-paper-100);
  font-size: var(--br-type-2);
}

body.uw-active #READER_EXPERT_TARGET {
  color: var(--br-brass-300);
  font-family: var(--br-mono);
  font-size: var(--br-type-1);
}

body.uw-active .reader-expert-actions {
  margin: var(--br-space-3) 0;
}

body.uw-active .reader-expert-actions button {
  min-height: 32px;
  padding: 6px 9px;
  border: 1px solid var(--br-line);
  border-radius: var(--br-radius-sm);
  color: var(--br-text-soft);
  background: rgba(255, 255, 255, .035);
  font-size: var(--br-type-1);
  font-weight: 650;
}

body.uw-active .reader-expert-actions button:first-child {
  border-color: rgba(223, 189, 123, .45);
  color: var(--br-brass-300);
}

body.uw-active .reader-expert-actions button:hover,
body.uw-active .reader-expert-actions button[aria-pressed="true"] {
  border-color: var(--br-line-strong);
  background: rgba(141, 210, 192, .1);
}

body.uw-active .reader-expert-meta {
  padding: var(--br-space-2) 0;
  border-top: 1px solid var(--br-line);
  border-bottom: 1px solid var(--br-line);
}

body.uw-active .reader-expert-meta span {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  color: var(--br-muted);
  font-family: var(--br-mono);
  font-size: .63rem;
}

body.uw-active .reader-expert-meta strong {
  color: var(--br-sage-300);
}

body.uw-active .reader-shortcuts {
  margin-top: var(--br-space-2);
  color: var(--br-muted);
  font-family: var(--br-mono);
  font-size: .61rem;
}

body.uw-active .reader-shortcuts kbd {
  display: inline-grid;
  min-width: 1.2rem;
  min-height: 1.2rem;
  place-items: center;
  border: 1px solid var(--br-line);
  border-radius: 4px;
  color: var(--br-paper-200);
  background: rgba(255, 255, 255, .04);
}

body.uw-active #RB .vs[tabindex="0"]:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--br-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

body.reader-focus-mode #RB .vs:not(.hl) {
  opacity: .58;
}

body.reader-focus-mode #RB .vs.hl {
  opacity: 1;
  box-shadow: 0 0 0 1px rgba(223, 189, 123, .18);
}

body.reader-density-compact #RB .chapter-copy {
  gap: 2px;
}

body.reader-density-compact #RB .vs {
  line-height: 1.42;
}

@media (max-width: 720px) {
  /* Claim Lab is a true mobile workspace. A fixed, isolated surface prevents
     the legacy .app grid/overflow context from winning hit-testing when a
     researcher scrolls to the evidence actions. */
  body.uw-active.claimlab-active #CLAIMLABMODE {
    position: fixed;
    z-index: var(--br-z-modal);
    top: var(--br-workspace-top);
    right: var(--br-space-2);
    bottom: var(--br-space-2);
    left: var(--br-space-2);
    width: auto;
    height: auto;
    max-height: none;
    isolation: isolate;
  }

  body.uw-active.inside-active #INSIDEMODE {
    position: fixed;
    z-index: var(--br-z-modal);
    top: var(--br-workspace-top);
    right: var(--br-space-2);
    bottom: var(--br-space-2);
    left: var(--br-space-2);
    width: auto;
    height: auto;
    max-height: none;
    isolation: isolate;
  }

  body.uw-active .claimlab-head,
  body.uw-active .claimlab-map-view,
  body.uw-active .claimlab-output-view {
    padding: var(--br-space-4);
  }

  body.uw-active .claimlab-head,
  body.uw-active .claimlab-layout {
    display: block;
  }

  body.uw-active .claimlab-head-actions {
    justify-content: flex-start;
    margin-top: var(--br-space-3);
  }

  body.uw-active .claimlab-tabs {
    position: sticky;
    z-index: var(--br-z-popover);
    top: 0;
    overflow-x: auto;
    padding: 0 var(--br-space-4);
    background: rgba(7, 11, 10, .94);
    backdrop-filter: var(--br-glass);
  }

  body.uw-active .claimlab-question,
  body.uw-active .claimlab-inspector {
    margin-bottom: var(--br-space-4);
  }

  body.uw-active .claimlab-chain {
    margin-bottom: var(--br-space-4);
  }

  body.uw-active .claimlab-add {
    grid-template-columns: 1fr;
  }

  body.uw-active .claimlab-add input {
    width: 100%;
  }

  body.uw-active .claim-evidence-body header {
    grid-template-columns: 1fr;
  }

  body.uw-active .claimlab-proof-line {
    align-items: stretch;
    flex-direction: column;
  }

  body.uw-active .claim-proof-connector {
    align-self: center;
    transform: rotate(0deg);
  }
}

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

/* Phase 3: mode grammar. Every research room reads as orientation → evidence → next step. */
body.uw-active .studymode-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--br-space-8);
}

body.uw-active .studymode-head > div:first-child {
  min-width: 0;
  max-width: 76ch;
}

body.uw-active .studymode-copy {
  max-width: 70ch;
  margin-top: var(--br-space-3);
  color: var(--br-muted);
  font-size: .98rem;
}

body.uw-active .studymode-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--br-space-2);
  max-width: 34rem;
}

body.uw-active .studymode-actions button,
body.uw-active .modeoverview-card button,
body.uw-active .vizhud-actions button {
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid var(--br-line);
  border-radius: var(--br-radius-sm);
  color: var(--br-text-soft);
  background: rgba(255, 255, 255, .035);
  font-family: var(--br-ui);
  font-size: var(--br-type-1);
  font-weight: 650;
  transition: background var(--br-duration) var(--br-ease), border-color var(--br-duration) var(--br-ease), transform var(--br-duration) var(--br-ease);
}

body.uw-active .studymode-actions button:first-child,
body.uw-active .modeoverview-card button:first-child,
body.uw-active .vizhud-actions button:first-child {
  border-color: rgba(223, 189, 123, .5);
  color: var(--br-brass-300);
  background: rgba(223, 189, 123, .1);
}

body.uw-active .studymode-actions button:hover,
body.uw-active .studymode-actions button:focus-visible,
body.uw-active .modeoverview-card button:hover,
body.uw-active .vizhud-actions button:hover {
  border-color: var(--br-line-strong);
  background: rgba(141, 210, 192, .1);
  transform: translateY(-1px);
}

body.uw-active .studymode-actions .close {
  width: 34px;
  padding: 0;
  color: var(--br-muted);
}

body.uw-active .studymode-main,
body.uw-active .verseintel-main,
body.uw-active .messiah-fulfillment-main {
  min-height: 0;
}

body.uw-active .studymode-panel,
body.uw-active .vi-panel,
body.uw-active .messiah-fulfillment-main > * {
  min-width: 0;
  scrollbar-color: var(--br-ink-700) transparent;
}

body.uw-active .studymode-panel::-webkit-scrollbar,
body.uw-active .side::-webkit-scrollbar,
body.uw-active .uw-command main::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

body.uw-active .studymode-panel::-webkit-scrollbar-thumb,
body.uw-active .side::-webkit-scrollbar-thumb,
body.uw-active .uw-command main::-webkit-scrollbar-thumb {
  border-radius: var(--br-radius-pill);
  background: var(--br-ink-700);
}

body.uw-active .studymode-panel > header,
body.uw-active .studymode-panel > .panel-head,
body.uw-active .vi-panel > header,
body.uw-active .mode-rail > header {
  position: sticky;
  z-index: 2;
  top: 0;
  padding: var(--br-space-3) var(--br-space-4);
  border-bottom: 1px solid var(--br-line);
  background: rgba(20, 32, 28, .92);
  backdrop-filter: var(--br-glass);
}

body.uw-active .studymode-panel > header strong,
body.uw-active .studymode-panel > .panel-head strong,
body.uw-active .mode-rail > header strong {
  color: var(--br-paper-100);
  font-size: var(--br-type-2);
}

body.uw-active .studymode-panel input,
body.uw-active .studymode-panel select,
body.uw-active .studymode-panel textarea,
body.uw-active .vi-panel input,
body.uw-active .vi-panel select,
body.uw-active .vatu-rail input,
body.uw-active .vatu-rail select,
body.uw-active .tl-shell input,
body.uw-active .tl-shell select {
  min-height: 34px;
  border: 1px solid var(--br-line);
  border-radius: var(--br-radius-sm);
  color: var(--br-paper-100);
  background: rgba(7, 11, 10, .45);
}

body.uw-active .studymode-panel input::placeholder,
body.uw-active .vi-panel input::placeholder,
body.uw-active .tl-shell input::placeholder {
  color: var(--br-muted);
}

/* Kanon: let the route be the hero, with the rail reserved for provenance and handoff. */
body.uw-active #CANONMODE .studymode-main {
  grid-template-columns: minmax(0, 1.7fr) minmax(250px, .72fr);
}

body.uw-active #CANONMODE #CANONSTAGE {
  border-color: rgba(223, 189, 123, .23);
  background:
    radial-gradient(circle at 50% 24%, rgba(223, 189, 123, .09), transparent 20rem),
    linear-gradient(135deg, rgba(141, 210, 192, .045), transparent 45%),
    rgba(7, 11, 10, .48);
}

body.uw-active #CANONMODE #CANONRAIL {
  background: linear-gradient(180deg, rgba(27, 42, 36, .74), rgba(12, 18, 16, .86));
}

body.uw-active #CANONMODE .studymode-panel h3,
body.uw-active #CANONMODE .studymode-panel strong {
  font-family: var(--br-display);
  font-size: 1.16rem;
  font-weight: 600;
}

/* Personen: dossier and evidence remain readable even when the graph is busy. */
body.uw-active #PEOPLEMODE .studymode-main {
  grid-template-columns: minmax(190px, .72fr) minmax(0, 1.48fr) minmax(250px, .84fr);
}

body.uw-active #PEOPLEMODE #PEOPLESTAGE {
  border-color: rgba(141, 210, 192, .3);
  background:
    radial-gradient(circle at 50% 0, rgba(141, 210, 192, .11), transparent 19rem),
    rgba(7, 11, 10, .44);
}

body.uw-active #PEOPLEMODE #PEOPLESTAGE h2,
body.uw-active #PEOPLEMODE #PEOPLESTAGE h3 {
  font-family: var(--br-display);
  font-weight: 600;
  letter-spacing: -.01em;
}

body.uw-active #PEOPLEMODE #PEOPLELIST,
body.uw-active #PEOPLEMODE #PEOPLERAIL {
  background: rgba(20, 32, 28, .58);
}

/* Timeline: the main axis should dominate; controls recede into labels. */
body.uw-active #TIMELINE_OVERLAY .tl-shell,
body.uw-active .timeline-overlay .tl-shell {
  box-shadow: var(--br-shadow-panel), var(--br-shadow-inset);
}

body.uw-active #TIMELINE_OVERLAY .tl-toolbar,
body.uw-active .timeline-overlay .tl-toolbar {
  background: rgba(12, 18, 16, .86);
}

body.uw-active #TIMELINE_OVERLAY .tl-toolbar input,
body.uw-active .timeline-overlay .tl-toolbar input {
  font-family: var(--br-reading);
  font-size: 1rem;
}

body.uw-active #TIMELINE_OVERLAY .tl-event,
body.uw-active .timeline-overlay .tl-event {
  transition: transform var(--br-duration) var(--br-ease), filter var(--br-duration) var(--br-ease);
}

body.uw-active #TIMELINE_OVERLAY .tl-event:hover,
body.uw-active .timeline-overlay .tl-event:hover {
  filter: brightness(1.12);
  transform: translateY(-2px);
}

/* Text, evidence and traditions share one quiet object-card treatment. */
body.uw-active #ORIGINALMODE .studymode-main,
body.uw-active #EVIDENCEMODE .studymode-main,
body.uw-active #TEXTWITNESSMODE .studymode-main,
body.uw-active .patristicmode-shell .studymode-main {
  grid-template-columns: minmax(190px, .72fr) minmax(0, 1.45fr) minmax(230px, .82fr);
}

body.uw-active #ORIGINALMODE #ORIGINALSTAGE,
body.uw-active #EVIDENCEMODE #EVIDENCESTAGE,
body.uw-active #TEXTWITNESSMODE #TEXTWITNESSSTAGE,
body.uw-active .patristicmode-shell [id$="STAGE"] {
  background: linear-gradient(150deg, rgba(223, 189, 123, .06), transparent 34%), rgba(7, 11, 10, .5);
}

body.uw-active .modeoverview-card {
  border: 1px solid var(--br-line);
  border-radius: var(--br-radius-md);
  background: rgba(255, 255, 255, .035);
}

body.uw-active .modeoverview-card strong {
  color: var(--br-paper-100);
  font-size: var(--br-type-2);
}

body.uw-active .modeoverview-card span {
  color: var(--br-muted);
  font-family: var(--br-reading);
  line-height: var(--br-leading-copy);
}

/* The comparison view is the extra focused mode: give it a proper study-table surface. */
body.uw-active .uw-compare {
  overflow: auto;
  padding: var(--br-space-6);
  background:
    linear-gradient(135deg, rgba(223, 189, 123, .09), transparent 30%),
    rgba(12, 18, 16, .97);
}

body.uw-active .uw-compare h2,
body.uw-active .uw-compare h3 {
  color: var(--br-paper-100);
  font-family: var(--br-display);
  font-weight: 600;
}

body.uw-active .uw-compare table {
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--br-line);
  border-radius: var(--br-radius-md);
  background: rgba(255, 255, 255, .025);
}

body.uw-active .uw-compare th,
body.uw-active .uw-compare td {
  padding: var(--br-space-3) var(--br-space-4);
  border-bottom: 1px solid var(--br-line);
  color: var(--br-text-soft);
  font-family: var(--br-reading);
  line-height: var(--br-leading-copy);
  text-align: left;
}

body.uw-active .uw-compare th {
  color: var(--br-brass-300);
  font-family: var(--br-mono);
  font-size: var(--br-type-1);
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (max-width: 720px) {
  body.uw-active .studymode-head {
    grid-template-columns: 1fr;
    gap: var(--br-space-4);
  }

  body.uw-active .studymode-actions {
    justify-content: flex-start;
  }

  body.uw-active #CANONMODE .studymode-main,
  body.uw-active #PEOPLEMODE .studymode-main,
  body.uw-active #ORIGINALMODE .studymode-main,
  body.uw-active #EVIDENCEMODE .studymode-main,
  body.uw-active #TEXTWITNESSMODE .studymode-main,
  body.uw-active .patristicmode-shell .studymode-main {
    grid-template-columns: 1fr;
  }

  body.uw-active .uw-compare {
    padding: var(--br-space-4);
  }

  body.uw-active .uw-compare table {
    min-width: 38rem;
  }
}

/* Phase 4: motion is a wayfinding layer, never a prerequisite for meaning. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes br-surface-arrive {
    from { opacity: 0; transform: translateY(8px) scale(.995); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  @keyframes br-line-in {
    from { opacity: 0; transform: scaleX(.2); transform-origin: left center; }
    to { opacity: 1; transform: scaleX(1); transform-origin: left center; }
  }

  @keyframes br-glow-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(141, 210, 192, 0); }
    50% { box-shadow: 0 0 0 5px rgba(141, 210, 192, .08); }
  }

  body.uw-active .studymode-shell[aria-hidden="false"],
  body.uw-active #TIMELINE_OVERLAY[aria-hidden="false"],
  body.uw-active #MAPV[aria-hidden="false"] {
    animation: br-surface-arrive 420ms var(--br-ease-sharp) both;
  }

  body.uw-active .studymode-head::after {
    display: block;
    width: min(12rem, 34%);
    height: 1px;
    margin-top: -1px;
    background: linear-gradient(90deg, var(--br-brass-400), transparent);
    content: "";
    animation: br-line-in 520ms var(--br-ease-sharp) both;
  }

  body.uw-active .uw-motion.run {
    animation: br-surface-arrive 360ms var(--br-ease-sharp) both;
  }

  body.uw-active .uw-handoff button,
  body.uw-active .uw-truth-button[aria-pressed="true"] {
    animation: br-glow-pulse 1.7s var(--br-ease) 1;
  }

  body.uw-active .studymode-card,
  body.uw-active .studymode-panel,
  body.uw-active .source-card {
    transition: border-color var(--br-duration) var(--br-ease), box-shadow var(--br-duration) var(--br-ease), transform var(--br-duration) var(--br-ease);
  }
}

@media (max-width: 720px) {
  /* Panels are bottom sheets on touch, with the same focus surfaces as desktop. */
  body.uw-active .uw-panel:not([hidden]),
  body.uw-active .uw-compare:not([hidden]),
  body.uw-active .uw-presentation:not([hidden]) {
    position: fixed;
    z-index: var(--br-z-modal);
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-height: min(78vh, 720px);
    margin: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: var(--br-radius-xl) var(--br-radius-xl) 0 0;
    box-shadow: 0 -24px 70px rgba(0, 0, 0, .5);
    animation: br-surface-arrive 320ms var(--br-ease-sharp) both;
  }

  body.uw-active .uw-tool-menu:not([hidden]),
  body.uw-active .uw-utility-menu:not([hidden]) {
    position: fixed;
    z-index: var(--br-z-popover);
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
    max-height: min(70vh, 620px);
    border-radius: var(--br-radius-xl);
    box-shadow: 0 18px 60px rgba(0, 0, 0, .52);
  }

  body.uw-active .uw-tool-menu:not([hidden])::before,
  body.uw-active .uw-utility-menu:not([hidden])::before,
  body.uw-active .uw-panel:not([hidden])::before,
  body.uw-active .uw-compare:not([hidden])::before {
    display: block;
    width: 36px;
    height: 4px;
    margin: 2px auto var(--br-space-3);
    border-radius: var(--br-radius-pill);
    background: var(--br-ink-700);
    content: "";
  }

  body.uw-active .uw-studio,
  body.uw-active .uw-icon,
  body.uw-active .uw-reader-toggle,
  body.uw-active .uw-truth-button,
  body.uw-active .studymode-actions button {
    min-height: 44px;
  }
}