/* TALON desktop interface. Loaded after app.css to keep tool-specific rules modular. */
:root {
  --bg: #f3f4f6;
  --surface: #ffffff;
  --surface-muted: #f7f8fa;
  --surface-selected: #eaf1fb;
  --text: #18202c;
  --text-soft: #3f4b5c;
  --muted: #687386;
  --line: #d7dce4;
  --line-strong: #b9c1cd;
  --accent: #245ea9;
  --accent-dark: #194a88;
  --accent-soft: #e8f0fb;
  --ok: #217346;
  --warn: #8a5a00;
  --danger: #b42318;
  --sidebar: #182230;
  --sidebar-hover: #222f40;
  --sidebar-text: #d6dce5;
  --sidebar-muted: #8f9bad;
  --header: 56px;
  --sidebar-width: 232px;
  --radius: 3px;
  --shadow: 0 8px 24px rgba(23, 31, 43, 0.12);
  --sans: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

/* Text comparison */
.diff-setup {
  margin-bottom: 16px;
  padding: 14px;
}

.diff-document-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.diff-document-pair .document-picker {
  min-width: 0;
}

.diff-swap-button {
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  color: var(--text-soft);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
}

.diff-swap-button:hover {
  color: var(--accent-dark);
  background: var(--surface-selected);
  border-color: #8e9aac;
}

.diff-swap-button svg {
  width: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.diff-command-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.diff-options {
  color: var(--text-soft);
  font-size: 11px;
}

.diff-options summary {
  cursor: pointer;
  font-weight: 650;
}

.diff-options fieldset {
  display: flex;
  gap: 14px;
  margin-top: 9px;
}

.diff-options label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.diff-results {
  max-width: none;
}

.diff-empty-state {
  min-height: 300px;
}

.diff-empty-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(80px, 150px));
  gap: 7px 18px;
  margin-top: 18px;
}

.diff-empty-preview span {
  display: block;
  height: 5px;
  background: #e3e7ed;
}

.diff-empty-preview span:nth-child(3n) {
  width: 74%;
}

.diff-result-panel {
  padding: 0;
  overflow: hidden;
}

.diff-result-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 17px 18px 15px;
  border-bottom: 1px solid var(--line);
}

.diff-result-header h2 {
  margin-bottom: 3px;
  font-size: 20px;
}

.diff-result-header p {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.diff-result-stats {
  display: flex;
  margin: 0;
  border: 1px solid var(--line);
}

.diff-result-stats div {
  min-width: 76px;
  padding: 8px 10px;
  border-right: 1px solid var(--line);
}

.diff-result-stats div:last-child {
  border-right: 0;
}

.diff-result-stats dt,
.diff-result-stats dd {
  margin: 0;
}

.diff-result-stats dt {
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.diff-result-stats dd {
  margin-top: 2px;
  font-size: 15px;
  font-weight: 650;
}

.diff-legend {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 10px 18px;
  background: var(--surface-muted);
  border-bottom: 1px solid var(--line);
}

.diff-legend .diff-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
}

.diff-legend-item > span {
  display: grid;
  padding: 0;
}

.diff-legend-item strong {
  font-size: 10.5px;
}

.diff-legend-item small {
  color: var(--muted);
  font-size: 9.5px;
}

.diff-legend-swatch {
  width: 13px;
  height: 13px;
  border: 1px solid rgba(36, 43, 54, 0.12);
  border-radius: 1px;
}

.diff-scroll-note {
  margin-left: auto;
  padding: 0 !important;
  color: var(--muted);
  font-size: 10px;
}

.diff-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}

.diff-result-panel .diff-pane {
  min-width: 0;
  border: 0;
  border-radius: 0;
}

.diff-pane + .diff-pane {
  border-left: 1px solid var(--line);
}

.diff-pane header {
  min-height: 58px;
  padding: 10px 15px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.diff-pane header span {
  display: block;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.diff-pane header h3 {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diff-pane pre {
  max-height: 620px;
  min-height: 360px;
  padding: 22px 24px;
  color: #262b32;
  background: #fff;
  font-size: 14.5px;
  line-height: 1.85;
}

.diff-token {
  padding: 1px 2px;
  border-radius: 1px;
}

.diff-replace {
  background: #fff0b8;
}

.diff-delete {
  background: #f9d9dc;
  text-decoration-color: #a24c55;
}

.diff-insert {
  background: #d9ecdf;
}

/* Legal terminology */
.legal-control-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.legal-control-heading h2 {
  margin: 0;
  color: var(--text-soft);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.legal-control-heading span {
  color: var(--muted);
  font-size: 10px;
}

.legal-selection-actions {
  display: flex;
  justify-content: space-between;
  padding: 7px 1px 10px;
}

.legal-selection-actions .text-button {
  min-height: 24px;
  padding: 2px 0;
  font-size: 10.5px;
}

.legal-analysis-options {
  margin: 2px 0 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.legal-analysis-options summary {
  padding: 10px 0;
  color: var(--text-soft);
  cursor: pointer;
  font-size: 11px;
  font-weight: 650;
}

.legal-analysis-options[open] {
  padding-bottom: 2px;
}

.legal-empty-state {
  min-height: 360px;
}

.legal-result-panel {
  padding: 0;
  overflow: hidden;
}

.legal-result-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 18px 15px;
  border-bottom: 1px solid var(--line);
}

.legal-result-heading h2 {
  margin-bottom: 3px;
  font-size: 19px;
}

.legal-result-heading p {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.legal-source-badge {
  display: grid;
  min-width: 160px;
  padding: 8px 10px;
  color: var(--text-soft);
  background: var(--surface-muted);
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: 650;
}

.legal-source-badge small {
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 8.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.legal-result-panel > .warning-list:not(:empty) {
  padding: 12px 18px 0;
}

.legal-evidence-block {
  gap: 0;
}

.legal-evidence-heading {
  padding: 14px 18px 8px;
}

.legal-evidence-heading h3 {
  margin-bottom: 2px;
  font-size: 12px;
}

.legal-evidence-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 10.5px;
}

.legal-result-panel .legal-legend {
  display: flex;
  grid-template-columns: none;
  gap: 6px;
  padding: 0 18px 14px;
  overflow-x: auto;
  background: var(--surface);
  border: 0;
  border-bottom: 1px solid var(--line);
}

.legal-legend .legal-legend-item {
  display: inline-grid;
  grid-template-columns: 13px max-content auto;
  min-height: 32px;
  padding: 6px 8px;
  color: var(--text-soft);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2px;
  cursor: pointer;
  font-size: 10.5px;
  white-space: nowrap;
}

.legal-legend .legal-legend-item:hover,
.legal-legend .legal-legend-item.is-active {
  background: var(--surface-selected);
  border-color: #aebdce;
}

.legal-legend-item b {
  color: var(--muted);
  font-size: 10px;
}

.legal-all-swatch {
  width: 13px;
  height: 13px;
  background: linear-gradient(135deg, #f5d780 0 25%, #a9c7ed 25% 50%, #a8d8b5 50% 75%, #d7b5e9 75%);
  border-radius: 1px;
}

.legal-reader {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  min-height: 500px;
}

.legal-document-tabs {
  max-height: 680px;
  overflow: auto;
  background: var(--surface-muted);
  border-right: 1px solid var(--line);
}

.legal-document-tabs button {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 9px 10px;
  color: var(--text-soft);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  font-size: 10.5px;
  line-height: 1.35;
  text-align: left;
}

.legal-document-tabs button:hover {
  background: #f8f9fb;
}

.legal-document-tabs button.is-active {
  color: var(--text);
  background: var(--surface);
  box-shadow: inset 3px 0 0 var(--accent);
  font-weight: 650;
}

.legal-document-tabs button > span {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  color: var(--muted);
  background: #e6eaf0;
  font-size: 9px;
}

.legal-document-panels {
  min-width: 0;
}

.legal-text-card {
  display: none;
  border: 0;
  border-radius: 0;
}

.legal-text-card.is-active {
  display: block;
}

.legal-text-card > header {
  min-height: 58px;
  padding: 10px 15px;
  background: var(--surface);
}

.legal-text-card > header div,
.legal-text-card > header strong,
.legal-text-card > header span {
  display: block;
}

.legal-text-card > header span {
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.legal-text-card > header strong {
  font-size: 12px;
}

.legal-text-card > header small {
  color: var(--muted);
  font-size: 9.5px;
  text-align: right;
}

.legal-view-switch {
  display: flex;
  gap: 2px;
  padding: 7px 15px;
  background: var(--surface-muted);
  border-bottom: 1px solid var(--line);
}

.legal-view-switch button {
  min-height: 27px;
  padding: 4px 9px;
  color: var(--text-soft);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  font-size: 10px;
  font-weight: 650;
}

.legal-view-switch button.is-active {
  color: var(--accent-dark);
  background: var(--surface);
  border-color: var(--line-strong);
}

.legal-text-view pre,
.legal-text-card pre {
  min-height: 430px;
  max-height: 590px;
  padding: 28px 34px 42px;
  color: #272b31;
  background: #fff;
  font-size: 15px;
  line-height: 1.85;
}

.legal-hit {
  padding: 1px 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: opacity 120ms ease;
}

.legal-hit.is-muted {
  background: #edf0f4;
  opacity: 0.34;
}

@media (max-width: 1040px) {
  .diff-result-header,
  .legal-result-heading {
    display: grid;
  }

  .diff-result-stats {
    width: 100%;
  }

  .diff-result-stats div {
    flex: 1;
  }

  .legal-source-badge {
    width: max-content;
  }
}

@media (max-width: 860px) {
  .diff-document-pair {
    grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
  }

  .diff-grid {
    grid-template-columns: 1fr;
  }

  .diff-pane + .diff-pane {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .diff-pane pre {
    min-height: 260px;
    max-height: 430px;
  }

  .diff-scroll-note {
    display: none;
  }

  .legal-reader {
    grid-template-columns: 1fr;
  }

  .legal-document-tabs {
    display: flex;
    max-height: none;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .legal-document-tabs button {
    min-width: 190px;
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  .legal-document-tabs button.is-active {
    box-shadow: inset 0 -3px 0 var(--accent);
  }
}

@media (max-width: 600px) {
  .diff-document-pair {
    grid-template-columns: 1fr;
  }

  .diff-swap-button {
    justify-self: center;
    transform: rotate(90deg);
  }

  .diff-command-row,
  .diff-options fieldset {
    align-items: stretch;
    flex-direction: column;
  }

  .diff-result-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .diff-result-stats div:nth-child(2) {
    border-right: 0;
  }

  .diff-result-stats div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .diff-result-panel .diff-legend {
    align-items: flex-start;
    flex-direction: column;
  }

  .legal-text-view pre,
  .legal-text-card pre {
    padding: 22px 18px 34px;
  }
}

html {
  background: var(--bg);
  scroll-behavior: auto;
}

body {
  min-height: 100vh;
  color: var(--text);
  background: var(--bg);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.45;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 6px;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

h2 {
  margin-bottom: 8px;
  font-size: 17px;
  line-height: 1.3;
}

h3 {
  margin-bottom: 6px;
  font-size: 14px;
  line-height: 1.35;
}

p {
  margin-bottom: 10px;
}

button,
input,
select,
textarea {
  font: inherit;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[contenteditable="true"]:focus-visible {
  outline: 2px solid rgba(36, 94, 169, 0.32);
  outline-offset: 1px;
}

/* Application shell */
.app-sidebar.app-rail {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 100;
  display: flex;
  width: var(--sidebar-width);
  height: 100vh;
  padding: 0;
  flex-direction: column;
  overflow: hidden;
  color: var(--sidebar-text);
  background: var(--sidebar);
  border: 0;
  transition: width 160ms ease, transform 160ms ease;
}

.app-sidebar.app-rail:hover,
.app-sidebar.app-rail:focus-within {
  width: var(--sidebar-width);
}

.sidebar-brand.brand {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  height: var(--header);
  min-height: var(--header);
  padding: 0 16px;
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.sidebar-brand.brand:hover {
  text-decoration: none;
  background: rgba(255, 255, 255, 0.035);
}

.sidebar-brand .brand-mark {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: #ffffff;
  background: #2b66b1;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.brand-copy {
  min-width: 0;
}

.brand-copy strong,
.brand-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-copy strong {
  font-size: 13px;
  letter-spacing: 0.08em;
}

.brand-copy small {
  margin-top: 1px;
  color: var(--sidebar-muted);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.sidebar-nav {
  display: flex;
  min-height: 0;
  padding: 12px 8px 16px;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #465568 transparent;
}

.nav-section {
  display: grid;
  gap: 2px;
}

.nav-section-system {
  margin-top: auto;
}

.nav-section-label {
  display: block;
  padding: 0 10px 5px;
  overflow: hidden;
  color: var(--sidebar-muted);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}

.app-sidebar .rail-button {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 7px 10px;
  color: var(--sidebar-text);
  background: transparent;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  text-align: left;
}

.app-sidebar .rail-button:hover {
  color: #ffffff;
  background: var(--sidebar-hover);
}

.app-sidebar .rail-button.is-active {
  color: #ffffff;
  background: #2a3b50;
  border: 0;
  box-shadow: inset 3px 0 0 #69a2e8;
}

.app-sidebar .rail-button strong {
  display: block;
  overflow: hidden;
  color: inherit;
  font-size: 12px;
  font-weight: 550;
  opacity: 1;
  text-overflow: ellipsis;
  transform: none;
  white-space: nowrap;
}

.nav-icon,
.header-menu-button svg,
.header-actions svg,
.tool-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-header {
  position: fixed;
  inset: 0 0 auto var(--sidebar-width);
  z-index: 90;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  height: var(--header);
  min-height: var(--header);
  padding: 0 18px;
  background: rgba(255, 255, 255, 0.98);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  transition: left 160ms ease;
}

.header-menu-button {
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  color: var(--text-soft);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
}

.header-menu-button:hover {
  background: var(--surface-muted);
  border-color: var(--line);
}

.header-context {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 10px;
}

.header-context strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
}

.header-context span {
  color: var(--muted);
  font-size: 11px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-actions .primary-button {
  gap: 7px;
  min-height: 34px;
}

.header-actions svg {
  width: 17px;
  height: 17px;
}

main,
body[data-current-view="editor"] main {
  width: auto;
  min-height: calc(100vh - var(--header));
  margin: var(--header) 0 0 var(--sidebar-width);
  padding: 22px 24px 36px;
  transition: margin-left 160ms ease;
}

body.nav-collapsed {
  --sidebar-width: 68px;
}

body.nav-collapsed .sidebar-brand.brand {
  grid-template-columns: 32px;
  justify-content: center;
  padding: 0;
}

body.nav-collapsed .brand-copy,
body.nav-collapsed .nav-section-label,
body.nav-collapsed .app-sidebar .rail-button strong {
  display: none;
}

body.nav-collapsed .sidebar-nav {
  padding-inline: 8px;
}

body.nav-collapsed .app-sidebar .rail-button {
  grid-template-columns: 20px;
  justify-content: center;
  padding-inline: 16px;
}

.app-view {
  display: none;
  max-width: 1680px;
  margin: 0 auto;
}

.app-view.is-active {
  display: block;
}

/* Common controls */
.primary-button,
.secondary-button,
.text-button,
.icon-button {
  min-height: 34px;
  padding: 7px 13px;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}

.primary-button {
  color: #ffffff;
  background: var(--accent);
  border: 1px solid var(--accent);
  box-shadow: none;
}

.primary-button:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}

.secondary-button {
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
}

.secondary-button:hover {
  color: var(--accent-dark);
  background: #f8fafc;
  border-color: #8e9aac;
}

.text-button {
  padding-inline: 4px;
  color: var(--accent);
  background: transparent;
  border: 0;
}

.text-button:hover {
  color: var(--accent-dark);
  text-decoration: underline;
}

.icon-button {
  display: grid;
  width: 32px;
  min-height: 32px;
  padding: 0;
  place-items: center;
  background: transparent;
  border: 1px solid transparent;
}

.full-width {
  width: 100%;
}

button:disabled,
.primary-button:disabled,
.secondary-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.field {
  display: grid;
  gap: 5px;
  margin-bottom: 12px;
}

.field[hidden] {
  display: none;
}

.field > span,
fieldset legend {
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 650;
}

.field input,
.field select,
.field textarea,
input[type="text"],
select,
textarea {
  width: 100%;
  min-height: 34px;
  padding: 7px 9px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  box-shadow: none;
}

textarea {
  min-height: 72px;
  resize: vertical;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: #8e9aac;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--accent);
}

.field-help,
.muted {
  color: var(--muted);
  font-size: 11px;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--accent);
}

.panel,
.simple-card,
.result-panel {
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
}

.eyebrow {
  margin-bottom: 5px;
  color: var(--accent-dark);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  color: var(--text-soft);
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 11px;
  font-weight: 600;
}

.warning {
  padding: 10px 12px;
  color: #6b4700;
  background: #fff9e8;
  border: 1px solid #ead49e;
  border-left: 3px solid #c58a17;
  border-radius: 2px;
}

.result-note {
  padding: 10px 12px;
  color: var(--text-soft);
  background: #f5f8fc;
  border: 1px solid #cfdced;
  border-left: 3px solid #6f96c8;
  border-radius: 2px;
  font-size: 12px;
}

/* Page headings and workspaces */
.workspace-hero,
.compare-page-header,
.tool-page-header,
.home-command {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
  padding: 0 0 16px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

.workspace-hero p,
.compare-page-header p,
.tool-page-header p,
.home-command p {
  max-width: 780px;
  margin-bottom: 0;
  color: var(--muted);
}

.workspace-actions,
.home-actions,
.pipeline-report-actions,
.pipeline-status-actions,
.run-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tool-workspace,
.compare-layout {
  display: grid;
  grid-template-columns: 292px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

.tool-controls,
.compare-controls {
  position: sticky;
  top: calc(var(--header) + 18px);
  max-height: calc(100vh - var(--header) - 36px);
  padding: 14px;
  overflow: auto;
}

.tool-controls > h2,
.compare-controls > h2,
.module-console > h2 {
  margin: 16px 0 8px;
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tool-controls > h2:first-child,
.compare-controls > h2:first-child {
  margin-top: 0;
}

.tool-controls > .primary-button.full-width:last-child {
  position: sticky;
  bottom: -14px;
  width: calc(100% + 28px);
  min-height: 42px;
  margin: 12px -14px -14px;
  border-radius: 0 0 2px 2px;
}

.tool-results,
.compare-results {
  display: grid;
  min-width: 0;
  gap: 14px;
}

.result-panel {
  padding: 16px;
}

.result-heading,
.panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.result-heading p,
.panel-heading p {
  max-width: 900px;
  margin-bottom: 0;
  color: var(--muted);
}

.empty-state {
  display: grid;
  min-height: 260px;
  padding: 40px 24px;
  place-items: center;
  align-content: center;
  color: var(--muted);
  text-align: center;
}

.empty-state h2 {
  margin-bottom: 5px;
  color: var(--text);
}

.empty-state p {
  max-width: 600px;
  margin-bottom: 0;
}

.empty-glyph {
  display: none;
}

.empty-flow {
  display: flex;
  gap: 18px;
  margin-top: 18px;
}

.empty-flow span {
  padding: 4px 0;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--line);
  border-radius: 0;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Dashboard */
.home-command {
  align-items: center;
}

.home-command > div:first-child {
  min-width: 0;
  flex: 1;
}

.home-command .home-actions {
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

.home-summary {
  font-size: 13px;
}

.home-grid {
  display: grid;
  gap: 10px;
}

.section-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 2px;
}

.section-title h2,
.section-title p {
  margin-bottom: 0;
}

.section-title p {
  color: var(--muted);
  font-size: 12px;
}

.tool-launcher {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 14px;
}

.tool-loading {
  grid-column: 1 / -1;
  padding: 24px;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
}

.tool-group {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.tool-group > header {
  min-height: 76px;
  padding: 14px 15px 12px;
  background: var(--surface-muted);
  border-bottom: 1px solid var(--line);
}

.tool-group > header h3 {
  margin-bottom: 3px;
  font-size: 14px;
}

.tool-group > header p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 11px;
}

.tool-group-list {
  display: grid;
}

.tool-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 70px;
  padding: 10px 12px;
  color: var(--text);
  background: var(--surface);
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  cursor: pointer;
  text-align: left;
}

.tool-card:last-child {
  border-bottom: 0;
}

.tool-card:hover {
  background: #f7f9fc;
}

.tool-card:hover .tool-open {
  color: var(--accent-dark);
}

.tool-icon {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid #ccdaed;
  border-radius: 2px;
}

.tool-icon svg {
  width: 17px;
  height: 17px;
}

.tool-copy {
  min-width: 0;
}

.tool-copy strong,
.tool-copy small {
  display: block;
}

.tool-copy strong {
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: 650;
}

.tool-copy small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tool-open {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.tool-output,
.tool-meta {
  display: none;
}

/* Lists and selection controls */
.check-list,
.module-choice-list {
  display: grid;
  gap: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2px;
}

.check-item,
.module-choice {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  min-height: 42px;
  padding: 8px 9px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.check-item:last-child,
.module-choice:last-child {
  border-bottom: 0;
}

.check-item:hover,
.module-choice:hover {
  background: var(--surface-muted);
}

.check-item:has(input:checked),
.module-choice:has(input:checked) {
  background: var(--surface-selected);
  box-shadow: inset 3px 0 0 var(--accent);
}

.check-item input,
.module-choice input {
  margin: 2px 0 0;
}

.check-item strong,
.check-item small,
.module-choice strong,
.module-choice small,
.module-choice em {
  display: block;
}

.check-item strong,
.module-choice strong {
  font-size: 11px;
}

.check-item small,
.module-choice small,
.module-choice em {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10.5px;
  font-style: normal;
}

.normalization-box,
.module-console,
.pipeline-advanced {
  margin: 0 0 12px;
  padding: 10px;
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: 2px;
}

.normalization-box label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0;
  font-size: 11px;
}

.pipeline-advanced summary,
.pca-detail-panel summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
}

.pipeline-advanced[open] summary {
  margin-bottom: 10px;
}

/* Tables and result collections */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

th,
td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--text-soft);
  background: var(--surface-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

tbody tr:hover {
  background: #fafbfd;
}

.legal-table-wrap,
.table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 2px;
}

.legal-table-wrap table,
.table-wrap table {
  border: 0;
}

.pipeline-status-grid,
.lexicon-summary-grid,
.profile-card-grid,
.pca-loadings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}

.pipeline-status-card,
.lexicon-summary-card,
.profile-card,
.pca-loadings article,
.run-row {
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2px;
}

.pipeline-status-card > span {
  display: inline-flex;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pipeline-status-card.ok {
  border-top: 2px solid var(--ok);
}

.pipeline-status-card.error {
  border-top: 2px solid var(--danger);
}

.pipeline-status-card p,
.pipeline-status-card small {
  color: var(--muted);
  font-size: 11px;
}

/* Editor */
body[data-current-view="editor"] {
  overflow: hidden;
}

body[data-current-view="editor"] main {
  height: calc(100vh - var(--header));
  min-height: 0;
  padding: 14px 16px 16px;
  overflow: hidden;
}

#view-editor.app-view.is-active {
  display: flex;
  max-width: none;
  height: 100%;
  flex-direction: column;
}

.editor-ribbon {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 420px) auto auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: none;
}

.editor-ribbon-title strong,
.editor-ribbon-title span {
  display: block;
}

.editor-ribbon-title strong {
  font-size: 12px;
}

.editor-ribbon-title span,
.editor-status-line {
  overflow: hidden;
  color: var(--muted);
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-document-field {
  display: block;
  min-width: 0;
  margin: 0;
}

.editor-ribbon-actions {
  display: flex;
  gap: 7px;
}

.editor-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 294px;
  min-height: 0;
  height: auto;
  flex: 1;
  gap: 10px;
}

.editor-document-stage {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(100%, auto);
  min-width: 0;
  min-height: 0;
  padding: 14px 18px 36px;
  overflow: auto;
  background: #dfe3e9;
  border: 1px solid #c8ced8;
  border-radius: 2px;
}

.editor-page-toolbar {
  position: sticky;
  top: -14px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(940px, 100%);
  margin: 0 auto;
  padding: 8px 13px;
  color: var(--muted);
  background: #f7f8fa;
  border: 1px solid #c8ced8;
  border-bottom: 0;
  border-radius: 2px 2px 0 0;
  font-size: 10.5px;
}

.editor-document-page {
  width: min(940px, 100%);
  min-height: max(860px, calc(100vh - 180px));
  height: max-content;
  margin: 0 auto;
  padding: 54px 64px 80px;
  color: #20242a;
  background: #ffffff;
  border: 1px solid #c8ced8;
  border-radius: 0;
  box-shadow: 0 2px 8px rgba(29, 38, 51, 0.09);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.75;
  white-space: pre-wrap;
}

.editor-start {
  position: absolute;
  inset: 14px;
  z-index: 5;
  display: grid;
  place-items: center;
  align-content: center;
  background: rgba(223, 227, 233, 0.96);
  text-align: center;
}

.editor-annotation-list {
  min-height: 0;
  padding: 13px;
  overflow: auto;
  border-radius: 2px;
}

.editor-annotation-list h2 {
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.annotation-card {
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: 2px;
}

.editor-context-menu,
.editor-annotation-popover {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  box-shadow: var(--shadow);
}

.editor-context-menu button {
  border-radius: 2px;
}

.editor-context-menu button:hover {
  background: var(--surface-selected);
}

/* Legal terms */
.legal-summary-strip,
.pca-variance-strip,
.diff-summary-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
}

.legal-summary-strip article,
.pca-variance-strip article,
.diff-summary-strip article {
  padding: 10px 12px;
  border-right: 1px solid var(--line);
}

.legal-summary-strip article:last-child,
.pca-variance-strip article:last-child,
.diff-summary-strip article:last-child {
  border-right: 0;
}

.legal-summary-strip strong,
.pca-variance-strip strong,
.diff-summary-strip strong {
  font-size: 17px;
  font-weight: 650;
}

.legal-summary-strip span,
.pca-variance-strip span,
.diff-summary-strip span {
  color: var(--muted);
  font-size: 10.5px;
}

.legal-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 6px;
  padding: 10px;
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: 2px;
}

.legal-legend-item {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 6px 7px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 11px;
}

.legal-text-grid {
  display: grid;
  gap: 14px;
}

.legal-text-views {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 2px;
}

.legal-text-views.has-lemmas {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.legal-text-views section > span {
  padding: 8px 12px;
  background: var(--surface-muted);
  border-bottom: 1px solid var(--line);
}

.legal-text-views .text-block,
.legal-text-views p {
  padding: 18px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  line-height: 1.7;
}

.annotation-mark,
.legal-hit,
.legal-swatch {
  border-radius: 1px;
}

/* PCA */
.pca-mode-box {
  padding: 3px;
  background: #eef1f5;
  border: 1px solid var(--line);
}

.pca-mode-box legend {
  padding: 0 4px;
}

.affinity-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  align-items: start;
  gap: 12px;
}

.affinity-graph-shell {
  min-width: 0;
  padding: 10px;
  overflow: auto;
  background: #fbfcfd;
  border: 1px solid var(--line);
  border-radius: 2px;
}

.pca-plot {
  min-width: 620px;
  min-height: 400px;
}

.pca-bg {
  fill: #ffffff;
  stroke: #cfd5de;
}

.pca-axis {
  stroke: #aeb7c4;
}

.pca-point circle {
  fill: var(--accent);
  stroke: #ffffff;
  stroke-width: 2;
}

.pca-point text {
  fill: #ffffff;
  font-size: 8px;
  font-weight: 700;
}

.pca-document-key {
  display: grid;
  gap: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2px;
}

.pca-document-key article {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  padding: 8px 9px;
  background: var(--surface);
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

.pca-document-key article:last-child {
  border-bottom: 0;
}

.pca-document-key b {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  color: #ffffff;
  background: var(--accent);
  border-radius: 50%;
  font-size: 10px;
}

.pca-feature-preview {
  padding: 9px 10px;
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: 2px;
}

.pca-detail-panel {
  padding: 0;
  overflow: hidden;
}

.pca-detail-panel summary {
  padding: 12px 14px;
  background: var(--surface-muted);
}

.pca-detail-panel[open] summary {
  border-bottom: 1px solid var(--line);
}

.pca-detail-grid {
  display: grid;
  gap: 16px;
  padding: 14px;
}

/* Diff and integrations */
.diff-pane,
.passage {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2px;
}

.diff-pane h3 {
  padding: 9px 11px;
  background: var(--surface-muted);
  border-bottom: 1px solid var(--line);
}

.parallel-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2px;
}

.similarity-chip {
  align-self: center;
  padding: 4px 7px;
  color: var(--accent-dark);
  background: var(--accent-soft);
  border: 1px solid #ccdaed;
  border-radius: 2px;
}

.voyant-frame,
.collatinus-frame,
.embedded-tool iframe {
  width: 100%;
  min-height: 680px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2px;
}

/* Import dialog and transient UI */
dialog {
  padding: 0;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(15, 23, 34, 0.25);
}

dialog::backdrop {
  background: rgba(17, 24, 35, 0.48);
}

#import-dialog form {
  padding: 18px;
}

.dialog-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.dialog-actions {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.import-choice {
  border-radius: 2px;
}

.choice-button {
  border-radius: 0;
}

.drop-zone {
  border: 1px dashed #9aa6b5;
  border-radius: 2px;
}

.toast {
  color: #ffffff;
  background: #202a37;
  border: 1px solid #344254;
  border-radius: 3px;
  box-shadow: var(--shadow);
}

/* Archive actions */
.document-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  min-height: 58px;
  padding: 0;
  gap: 0;
  background: var(--surface);
  cursor: default;
}

.document-open-button {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(120px, 1fr)) 24px;
  align-items: center;
  min-width: 0;
  gap: 12px;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.document-row:hover,
.document-open-button:hover {
  background: var(--surface-muted);
}

.document-delete-button {
  display: grid;
  width: 46px;
  min-height: 58px;
  place-items: center;
  border: 0;
  border-left: 1px solid var(--line);
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}

.document-delete-button:hover {
  color: var(--danger);
  background: #fff5f4;
}

.document-delete-button svg {
  width: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.confirm-dialog {
  width: min(500px, calc(100vw - 32px));
  padding: 18px;
}

.confirm-dialog #delete-document-message {
  margin: 18px 0 6px;
  font-weight: 700;
}

.danger-button {
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid #8f1d14;
  border-radius: 2px;
  color: #fff;
  background: var(--danger);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.danger-button:hover {
  background: #8f1d14;
}

.danger-button:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* Document picker */
.document-picker {
  position: relative;
  min-width: 0;
}

.document-picker-trigger {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 18px;
  align-items: center;
  width: 100%;
  min-height: 44px;
  gap: 9px;
  padding: 6px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  color: var(--text);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
}

.document-picker-trigger:hover,
.document-picker.is-open .document-picker-trigger {
  border-color: #76859a;
  background: #fbfcfe;
}

.document-picker-trigger:focus-visible {
  outline: 2px solid rgba(31, 101, 177, 0.24);
  outline-offset: 1px;
}

.document-picker-trigger:disabled {
  color: var(--muted);
  cursor: default;
}

.document-picker-icon,
.document-picker-chevron,
.document-picker-option svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.document-picker-icon {
  width: 18px;
  color: var(--accent);
}

.document-picker-chevron {
  width: 16px;
  color: var(--muted);
  transition: transform 120ms ease;
}

.document-picker.is-open .document-picker-chevron {
  transform: rotate(180deg);
}

.document-picker-copy {
  min-width: 0;
}

.document-picker-copy small,
.document-picker-copy strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-picker-copy small {
  margin-bottom: 1px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.document-picker-copy strong {
  font-size: 12px;
  font-weight: 650;
}

.document-picker-popover {
  position: absolute;
  z-index: 140;
  top: calc(100% + 5px);
  left: 0;
  width: min(440px, calc(100vw - 32px));
  max-height: 360px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: var(--surface);
  box-shadow: 0 12px 28px rgba(15, 23, 34, 0.16);
}

.document-picker-heading {
  padding: 9px 11px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.document-picker-search {
  display: block;
  padding: 8px;
  border-bottom: 1px solid var(--line);
}

.document-picker-search input {
  width: 100%;
  min-height: 32px;
  padding: 6px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
}

.document-picker-options {
  max-height: 292px;
  overflow-y: auto;
  padding: 4px;
}

.document-picker-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  width: 100%;
  gap: 8px;
  padding: 8px;
  border: 0;
  border-radius: 2px;
  color: var(--text);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.document-picker-option:hover,
.document-picker-option.is-selected {
  background: var(--surface-muted);
}

.document-picker-option strong,
.document-picker-option small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-picker-option strong {
  font-size: 12px;
}

.document-picker-option small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.document-picker-option svg {
  width: 16px;
  color: transparent;
}

.document-picker-option.is-selected svg {
  color: var(--accent);
}

.document-picker-empty {
  margin: 0;
  padding: 18px;
  color: var(--muted);
  text-align: center;
}

/* Linguistic analysis */
.linguistic-workbench {
  padding: 0;
  overflow: visible;
}

.linguistic-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-muted);
}

.linguistic-document-field {
  width: min(460px, 100%);
}

.view-switch,
.compact-switch {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--surface);
}

.view-switch button,
.compact-switch button {
  min-height: 32px;
  padding: 5px 12px;
  border: 0;
  border-right: 1px solid var(--line);
  color: var(--text-soft);
  background: transparent;
  font: inherit;
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}

.view-switch button:last-child,
.compact-switch button:last-child {
  border-right: 0;
}

.view-switch button.is-active,
.compact-switch button.is-active {
  color: #fff;
  background: var(--accent);
}

.linguistic-content {
  min-height: 420px;
  padding: 16px;
}

.linguistic-result-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.linguistic-result-heading.compact h2 {
  font-size: 17px;
}

.linguistic-result-heading p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.text-button {
  padding: 4px 0;
  border: 0;
  color: var(--accent);
  background: transparent;
  font: inherit;
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}

.lexicon-summary-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-height: 34px;
  gap: 0;
  margin-bottom: 12px;
  border-block: 1px solid var(--line);
  color: var(--text-soft);
}

.lexicon-summary-line > span {
  padding: 6px 12px;
  border-right: 1px solid var(--line);
  font-size: 10px;
}

.lexicon-summary-line strong {
  margin-right: 3px;
  color: var(--text);
  font-size: 12px;
}

.lexicon-summary-line small {
  padding: 6px 12px;
  color: #76530f;
  font-size: 10px;
}

.lexicon-workspace {
  display: grid;
  grid-template-columns: minmax(380px, 0.9fr) minmax(420px, 1.1fr);
  min-height: 430px;
  border: 1px solid var(--line);
}

.lexicon-frequency-panel,
.lexicon-context-panel {
  min-width: 0;
}

.lexicon-frequency-panel {
  border-right: 1px solid var(--line);
}

.section-command-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 58px;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: #fbfcfe;
}

.section-command-bar h3 {
  margin: 0;
  font-size: 12px;
}

.section-command-bar p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 10px;
}

.frequency-table-wrap {
  max-height: 480px;
  overflow-y: auto;
}

.frequency-table,
.compact-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.frequency-table th,
.frequency-table td,
.compact-data-table th,
.compact-data-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  text-align: right;
}

.frequency-table th:first-child,
.frequency-table td:first-child,
.compact-data-table th:first-child,
.compact-data-table td:first-child {
  text-align: left;
}

.frequency-table th,
.compact-data-table th {
  position: sticky;
  z-index: 1;
  top: 0;
  color: var(--muted);
  background: var(--surface);
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.frequency-table tr.is-selected {
  background: #eef5fc;
  box-shadow: inset 3px 0 var(--accent);
}

.frequency-table button {
  padding: 0;
  border: 0;
  color: var(--accent-dark);
  background: transparent;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.compact-search {
  display: flex;
  gap: 7px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
}

.compact-search input {
  min-width: 0;
  min-height: 32px;
  flex: 1;
  padding: 6px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
}

.compact-kwic {
  max-height: 420px;
  overflow-y: auto;
  padding: 8px;
}

.compact-kwic .kwic-row {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.collocation-disclosure {
  margin-top: 12px;
  border: 1px solid var(--line);
}

.collocation-disclosure summary {
  display: flex;
  justify-content: space-between;
  padding: 9px 11px;
  background: #fbfcfe;
  cursor: pointer;
  font-size: 11px;
  font-weight: 650;
}

.collocation-disclosure > div {
  padding: 10px;
  border-top: 1px solid var(--line);
}

.collocation-disclosure p {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 10px;
}

.grammar-workspace {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 510px;
  border: 1px solid var(--line);
}

.sentence-browser {
  min-width: 0;
  border-right: 1px solid var(--line);
  background: #fbfcfe;
}

.sentence-browser-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
}

.sentence-browser-heading span {
  color: var(--muted);
}

.sentence-browser-list {
  max-height: 520px;
  overflow-y: auto;
}

.sentence-browser-list button {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  width: 100%;
  gap: 5px;
  padding: 8px;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.sentence-browser-list button:hover,
.sentence-browser-list button.is-active {
  background: #eef5fc;
}

.sentence-browser-list button.is-active {
  box-shadow: inset 3px 0 var(--accent);
}

.sentence-browser-list button > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.sentence-browser-list p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-family: var(--serif);
  font-size: 11px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.grammar-inspector {
  min-width: 0;
  padding: 14px;
}

.sentence-token-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  padding: 13px;
  border: 1px solid var(--line);
  background: #fcfcfb;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.7;
  max-height: 190px;
  overflow-y: auto;
}

.sentence-token-line button {
  padding: 1px 3px;
  border: 0;
  border-bottom: 1px solid transparent;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.sentence-token-line button:hover {
  border-bottom-color: var(--accent);
}

.sentence-token-line button.is-active {
  color: var(--accent-dark);
  background: #e7f0fa;
  border-bottom-color: var(--accent);
}

.sentence-overview {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 10px 0;
  border: 1px solid var(--line);
}

.sentence-overview > div {
  min-width: 140px;
  padding: 7px 10px;
  border-right: 1px solid var(--line);
}

.sentence-overview dt {
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.sentence-overview dd {
  margin: 2px 0 0;
  font-family: var(--serif);
  font-size: 12px;
}

.token-inspector {
  border: 1px solid var(--line);
}

.token-inspector header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: #fbfcfe;
}

.token-inspector header small {
  display: block;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.token-inspector header h3 {
  margin: 1px 0 0;
  font-family: var(--serif);
  font-size: 18px;
}

.token-inspector header > span {
  color: var(--text-soft);
  font-size: 10px;
}

.token-inspector dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.token-inspector dl > div {
  padding: 9px 12px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.token-inspector dl > div:nth-child(even) {
  border-right: 0;
}

.token-inspector dl > div:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.token-inspector dt {
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.token-inspector dd {
  margin: 3px 0 0;
  font-size: 11px;
}

.linguistic-parser-empty {
  max-width: 760px;
  margin: 24px auto;
  padding: 18px;
  border: 1px solid var(--line);
}

.parser-command {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
}

/* Responsive layout */
@media (max-width: 1220px) {
  .editor-ribbon {
    grid-template-columns: minmax(180px, 1fr) minmax(240px, 360px) auto;
  }

  .editor-status-line {
    display: none;
  }
}

@media (max-width: 1040px) {
  .lexicon-workspace {
    grid-template-columns: 1fr;
  }

  .lexicon-frequency-panel {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .tool-launcher {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tool-workspace,
  .compare-layout {
    grid-template-columns: 250px minmax(0, 1fr);
  }

  .editor-workspace {
    grid-template-columns: minmax(0, 1fr) 250px;
  }

  .legal-text-views.has-lemmas,
  .affinity-dashboard {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  :root {
    --sidebar-width: 0px;
  }

  body,
  body.nav-collapsed {
    --sidebar-width: 0px;
  }

  .app-sidebar.app-rail,
  .app-sidebar.app-rail:hover,
  .app-sidebar.app-rail:focus-within {
    width: 236px;
    transform: translateX(-100%);
  }

  body.nav-open .app-sidebar.app-rail {
    transform: translateX(0);
  }

  body.nav-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 95;
    background: rgba(15, 23, 34, 0.38);
  }

  .document-row {
    grid-template-columns: minmax(0, 1fr) 46px;
  }

  .document-open-button,
  .linguistic-toolbar {
    display: grid;
    grid-template-columns: 1fr;
  }

  .document-open-button .document-meta {
    display: none;
  }

  .document-open-button .row-arrow {
    display: none;
  }

  .view-switch {
    justify-self: start;
  }

  .grammar-workspace {
    grid-template-columns: 1fr;
  }

  .sentence-browser {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .sentence-browser-list {
    display: flex;
    max-height: none;
    overflow-x: auto;
  }

  .sentence-browser-list button {
    min-width: 220px;
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  body.nav-open .app-sidebar {
    z-index: 110;
  }

  body.nav-collapsed .brand-copy,
  body.nav-collapsed .nav-section-label,
  body.nav-collapsed .app-sidebar .rail-button strong {
    display: block;
  }

  body.nav-collapsed .sidebar-brand.brand {
    grid-template-columns: 32px minmax(0, 1fr);
    justify-content: initial;
    padding: 0 16px;
  }

  body.nav-collapsed .app-sidebar .rail-button {
    grid-template-columns: 20px minmax(0, 1fr);
    justify-content: initial;
    padding: 7px 10px;
  }

  .site-header {
    left: 0;
  }

  main,
  body[data-current-view="editor"] main {
    margin-left: 0;
  }

  .tool-workspace,
  .compare-layout {
    grid-template-columns: 1fr;
  }

  .tool-controls,
  .compare-controls {
    position: static;
    max-height: none;
  }

  .tool-launcher {
    grid-template-columns: 1fr;
  }

  body[data-current-view="editor"] {
    overflow: auto;
  }

  body[data-current-view="editor"] main {
    height: auto;
    overflow: visible;
  }

  #view-editor.app-view.is-active {
    height: auto;
  }

  .editor-ribbon,
  .editor-workspace {
    grid-template-columns: 1fr;
  }

  .editor-workspace {
    height: auto;
  }

  .editor-document-stage {
    min-height: 72vh;
  }

  .editor-annotation-list {
    max-height: 320px;
  }
}

@media (max-width: 600px) {
  .linguistic-content {
    padding: 10px;
  }

  .lexicon-summary-line {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .lexicon-summary-line > span {
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .lexicon-summary-line small {
    grid-column: 1 / -1;
  }

  .section-command-bar,
  .linguistic-result-heading,
  .parser-command {
    display: grid;
  }

  .compact-switch {
    justify-self: start;
  }

  .token-inspector dl {
    grid-template-columns: 1fr;
  }

  .token-inspector dl > div,
  .token-inspector dl > div:nth-child(even),
  .token-inspector dl > div:nth-last-child(-n + 2) {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .token-inspector dl > div:last-child {
    border-bottom: 0;
  }

  .site-header {
    padding-inline: 10px;
  }

  .header-context span {
    display: none;
  }

  .header-actions .primary-button {
    padding-inline: 9px;
  }

  .header-actions .primary-button svg {
    display: none;
  }

  main,
  body[data-current-view="editor"] main {
    padding: 16px 12px 28px;
  }

  .home-command,
  .workspace-hero,
  .compare-page-header,
  .tool-page-header,
  .result-heading,
  .panel-heading {
    display: grid;
  }

  .home-actions {
    justify-content: start;
  }

  .legal-summary-strip,
  .pca-variance-strip,
  .diff-summary-strip {
    grid-template-columns: 1fr;
  }

  .legal-summary-strip article,
  .pca-variance-strip article,
  .diff-summary-strip article {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .legal-summary-strip article:last-child,
  .pca-variance-strip article:last-child,
  .diff-summary-strip article:last-child {
    border-bottom: 0;
  }

  .editor-document-page {
    padding: 36px 26px 60px;
  }

  .parallel-card {
    grid-template-columns: 1fr;
  }
}

/* Authentication and account administration */
.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  min-height: 100vh;
  padding: 32px 20px;
  place-items: center;
  background: #edf0f4;
}

body.is-authenticated .auth-gate {
  display: none;
}

body.auth-pending > .app-sidebar,
body.auth-pending > .site-header,
body.auth-pending > main,
body.auth-pending > dialog {
  visibility: hidden;
}

.auth-panel {
  width: min(100%, 410px);
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #cbd2dc;
  border-radius: 3px;
  box-shadow: 0 18px 48px rgba(28, 39, 54, 0.14);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  color: #ffffff;
  background: #182230;
  border-bottom: 1px solid #101721;
}

.auth-brand .brand-mark {
  flex: 0 0 auto;
  background: #2b66b1;
  border-radius: 2px;
}

.auth-brand strong,
.auth-brand span {
  display: block;
}

.auth-brand strong {
  font-size: 14px;
  letter-spacing: 0.08em;
}

.auth-brand div > span {
  margin-top: 2px;
  color: #aeb9c8;
  font-size: 10px;
}

.auth-form {
  display: grid;
  gap: 14px;
  padding: 26px 28px 30px;
}

.auth-heading {
  margin-bottom: 3px;
}

.auth-heading h1 {
  margin: 0 0 5px;
  font-size: 21px;
  font-weight: 650;
}

.auth-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.auth-form .form-status {
  min-height: 18px;
  margin: 0;
  color: var(--danger);
  font-size: 11px;
}

.account-button {
  display: grid;
  grid-template-columns: 28px minmax(0, auto);
  align-items: center;
  min-height: 34px;
  gap: 8px;
  padding: 2px 8px 2px 4px;
  color: var(--text);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 2px;
  cursor: pointer;
  text-align: left;
}

.account-button:hover {
  background: var(--surface-muted);
  border-color: var(--line-strong);
}

.account-avatar,
.account-user-initial {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  color: #ffffff;
  background: #34445a;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
}

.account-copy strong,
.account-copy small {
  display: block;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-copy strong {
  font-size: 11px;
  font-weight: 650;
}

.account-copy small {
  color: var(--muted);
  font-size: 9px;
}

.account-dialog {
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  overflow: auto;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  box-shadow: var(--shadow);
}

.account-dialog > .dialog-heading,
.account-dialog > .dialog-actions {
  padding: 16px 20px;
}

.account-summary {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 20px;
  background: var(--surface-muted);
  border-bottom: 1px solid var(--line);
}

.account-summary strong,
.account-summary small,
.account-user-row strong,
.account-user-row small {
  display: block;
}

.account-summary small,
.account-user-row small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.account-admin {
  padding: 18px 20px 20px;
}

.account-password-section {
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
}

.account-password-section summary {
  cursor: pointer;
  font-size: 11px;
  font-weight: 650;
}

.account-password-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding-top: 13px;
}

.account-password-form .form-status {
  grid-column: 1 / -1;
  min-height: 16px;
  margin: 0;
  color: var(--text-soft);
  font-size: 10px;
}

.account-section-heading h3,
.account-create-form h3 {
  margin: 0;
  font-size: 13px;
}

.account-section-heading p {
  margin: 3px 0 12px;
  color: var(--muted);
  font-size: 11px;
}

.account-user-list {
  border: 1px solid var(--line);
}

.account-user-row {
  display: grid;
  grid-template-columns: 28px minmax(120px, 1fr) 132px 68px;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
}

.account-user-row.is-inactive {
  opacity: 0.58;
}

.account-role-select {
  min-height: 30px;
  padding: 4px 6px;
  font-size: 10px;
}

.account-user-row .text-button {
  min-height: 30px;
  padding-inline: 5px;
  font-size: 10px;
}

.account-user-row:last-child {
  border-bottom: 0;
}

.role-badge {
  padding: 3px 7px;
  color: var(--text-soft);
  background: #f2f4f7;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 9px;
  font-weight: 650;
  text-transform: uppercase;
}

.account-create-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.account-create-form h3,
.account-create-form .form-status {
  grid-column: 1 / -1;
}

.account-create-form .form-status {
  min-height: 16px;
  margin: 0;
  color: var(--text-soft);
  font-size: 10px;
}

.account-create-form button {
  justify-self: start;
}

body[data-role="viewer"] #editor-annotation-form,
body[data-role="viewer"] #editor-context-menu {
  display: none !important;
}

body[data-role="viewer"] #editor-text {
  cursor: text;
}

@media (max-width: 700px) {
  .account-copy {
    display: none;
  }

  .account-button {
    grid-template-columns: 28px;
    padding-right: 4px;
  }

  .account-create-form {
    grid-template-columns: 1fr;
  }

  .account-password-form {
    grid-template-columns: 1fr;
  }

  .account-user-row {
    grid-template-columns: 28px minmax(0, 1fr) auto;
  }

  .account-user-row .text-button {
    grid-column: 2 / -1;
    justify-self: start;
  }
}