@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,600;1,400;1,600&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,600;1,8..60,300;1,8..60,400&display=swap');

/* ── Variables ── */
:root {
  --font-body:    'Crimson Pro', 'Georgia', serif;
  --font-ui:      'Source Serif 4', 'Georgia', serif;
  --font-label:   'Libre Baskerville', Georgia, serif;

  /* Light mode (default) */
  --paper:        #f5f1ea;
  --paper-dark:   #ece7dc;
  --ink:          #1c1814;
  --ink-mid:      #4a4035;
  --ink-light:    #9a8f7e;
  --ink-faint:    #d4ccbe;

  --sidebar-bg:   #1e1b16;
  --sidebar-w:    58px;

  --gold:         #c8a84b;
  --gold-faint:   rgba(200, 168, 75, 0.15);
  --gold-line:    rgba(200, 168, 75, 0.35);
  --active-bg:    rgba(200, 168, 75, 0.12);

  /* ── Component tokens ──────────────────────────────────────────────
     Semantic colors for the page stylesheets (read.css, …). Define the
     light value here and the dark value in the [data-theme="dark"]
     block below. Components must reference these tokens instead of
     hardcoding colors, so dark mode needs no per-component overrides. */

  /* Surfaces */
  --surface:        #fafafa;                  /* panels, sidebars */
  --surface-card:   #ffffff;                  /* cards, dropdowns, floating panels */
  --surface-card-2: #f8f8fc;                  /* nested / secondary cards */
  --surface-wash:   #f0f0f8;                  /* soft hover washes */
  --surface-related: transparent;             /* related column background */
  --input-bg:       #ffffff;
  --overlay-bg:     transparent;              /* modal click-catcher */
  --row-hover:      #fafafa;
  --row-active-bg:  #f5f5fb;
  --row-active-border: #b0b0d8;

  /* Lines */
  --line:        #eeeeee;                     /* soft dividers */
  --line-mid:    #e4e4f0;                     /* panel borders */
  --line-strong: #cccce0;                     /* control borders */

  /* Text */
  --text-body:  #1c1814;                      /* long-form reading text */
  --text-soft:  #444;
  --text-mid:   #555;
  --text-muted: #999;
  --text-faint: #bbb;

  /* Accent — filled controls (pills, chips, save buttons) */
  --accent-soft-bg:       #2d2d5a;
  --accent-soft-hover-bg: #3d3d7a;
  --accent-soft-text:     #fff;
  --accent-soft-border:   #2d2d5a;
  --accent-wash:          #eeeef8;            /* hover bg of outlined controls */
  --accent-border-hover:  #9898c0;
  --accent-text:          #1a1a4e;            /* links, titles */
  --accent-text-hover:    #1a1a4e;
  --focus-border:         #3d3d7a;
  --label:                #7878a8;            /* section labels */

  /* Outlined controls (mode/filter/map toggles) */
  --control-border:       #c8c8e0;
  --control-bg:           #f5f5fc;
  --control-text:         #555;
  --control-hover-bg:     #eaeaf8;
  --control-hover-border: #aaaacc;
  --control-hover-text:   #2a2a6a;

  /* Read tabs (keep their own hue in both themes) */
  --tab-bg:               #f0f0f8;
  --tab-border:           #c0c0e0;
  --tab-text:             #555;
  --tab-hover-bg:         #e0e0f0;
  --tab-hover-text:       #2d2d5a;
  --tab-hover-border:     #a0a0cc;
  --tab-active-bg:        #3d3d7a;
  --tab-active-hover-bg:  #2d2d5a;
  --tab-active-text:      #fff;
  --tab-close:            #aaa;
  --tab-close-hover-bg:   rgba(0, 0, 0, 0.12);
  --tab-close-hover-text: #333;

  /* Feedback surfaces — banners, error lists, active-filter chips.
     Unlike the small status/role pills, these are large filled areas, so
     they get a dark variant (translucent tint + light text) instead of a
     light island on the dark theme. */
  --danger-surface:  #fff5f5;
  --danger-border:   #f0bbbb;
  --danger-text:     #8b2222;
  --warning-surface: #fff8e1;
  --warning-border:  #ffe082;
  --warning-text:    #795548;
  --success-surface: #eef7ee;
  --success-border:  #7ab87a;
  --success-text:    #2d6e2d;

  --shadow-pop: 0 4px 12px rgba(0, 0, 0, 0.10);

  /* Procedural paper grain: inline SVG noise (feTurbulence), tiled.
     No image asset, no extra request. The alpha slope controls how
     visible the grain is. */
  --paper-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.14'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Dark Mode ── */
:root[data-theme="dark"] {
  --paper:        #1a1814;
  --paper-dark:   #242018;
  --ink:          #e8dfd2;
  --ink-mid:      #b8a88e;
  --ink-light:    #756a5a;
  --ink-faint:    #504630;

  --sidebar-bg:   #0f0d0a;
  --gold:         #d4b86a;
  --gold-faint:   rgba(212, 184, 106, 0.12);
  --gold-line:    rgba(212, 184, 106, 0.25);
  --active-bg:    rgba(212, 184, 106, 0.1);

  /* Surfaces */
  --surface:        #242018;
  --surface-card:   #2e2820;
  --surface-card-2: rgba(50, 45, 35, 0.45);
  --surface-wash:   rgba(212, 184, 106, 0.08);
  --surface-related: rgba(50, 45, 35, 0.3);
  --input-bg:       rgba(50, 45, 35, 0.6);
  --overlay-bg:     rgba(0, 0, 0, 0.6);
  --row-hover:      rgba(212, 184, 106, 0.03);
  --row-active-bg:  rgba(100, 100, 140, 0.15);
  --row-active-border: #5a5a90;

  /* Lines */
  --line:        rgba(212, 184, 106, 0.1);
  --line-mid:    rgba(212, 184, 106, 0.15);
  --line-strong: rgba(212, 184, 106, 0.3);

  /* Text */
  --text-body:  #c0c0c8;
  --text-soft:  #c0c0c8;
  --text-mid:   #b8a88e;
  --text-muted: #756a5a;
  --text-faint: #756a5a;

  /* Accent — gold ghost treatment instead of filled navy */
  --accent-soft-bg:       rgba(212, 184, 106, 0.15);
  --accent-soft-hover-bg: rgba(212, 184, 106, 0.25);
  --accent-soft-text:     #e8dfd2;
  --accent-soft-border:   #d4b86a;
  --accent-wash:          rgba(212, 184, 106, 0.08);
  --accent-border-hover:  #d4b86a;
  --accent-text:          #d4b86a;
  --accent-text-hover:    #e8c68e;
  --focus-border:         #d4b86a;
  --label:                #d4b86a;

  /* Outlined controls */
  --control-border:       rgba(212, 184, 106, 0.4);
  --control-bg:           rgba(212, 184, 106, 0.08);
  --control-text:         #d4b86a;
  --control-hover-bg:     rgba(212, 184, 106, 0.15);
  --control-hover-border: #d4b86a;
  --control-hover-text:   #d4b86a;

  /* Read tabs */
  --tab-bg:               rgba(100, 100, 140, 0.3);
  --tab-border:           rgba(120, 120, 180, 0.5);
  --tab-text:             #c0c0d0;
  --tab-hover-bg:         rgba(120, 120, 160, 0.4);
  --tab-hover-text:       #d8d8e8;
  --tab-hover-border:     rgba(140, 140, 200, 0.6);
  --tab-active-bg:        #5a5a90;
  --tab-active-hover-bg:  #6a6a9a;
  --tab-active-text:      #e8e8f8;
  --tab-close:            rgba(200, 200, 220, 0.6);
  --tab-close-hover-bg:   rgba(255, 255, 255, 0.1);
  --tab-close-hover-text: rgba(240, 240, 250, 0.9);

  /* Feedback surfaces — translucent tint + light text so they read as
     coloured panels on the dark paper instead of bright white islands. */
  --danger-surface:  rgba(180, 60, 60, 0.15);
  --danger-border:   rgba(200, 90, 90, 0.4);
  --danger-text:     #f0a8a8;
  --warning-surface: rgba(190, 150, 50, 0.15);
  --warning-border:  rgba(210, 170, 80, 0.4);
  --warning-text:    #e6c98a;
  --success-surface: rgba(100, 170, 100, 0.15);
  --success-border:  rgba(130, 190, 130, 0.45);
  --success-text:    #9fd49f;

  --shadow-pop: 0 4px 16px rgba(0, 0, 0, 0.6);

  /* Lighter grain on dark paper so it reads as texture, not dust. */
  --paper-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.09'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  font-family: var(--font-ui);
  background-color: var(--paper);
  background-image: var(--paper-texture);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Links ──
   Global themed link colour so anchors never fall back to the browser's
   default blue/purple, which is unreadable on the dark paper. Uses the same
   --accent-text token as the explicitly-styled links (navy in light mode,
   gold in dark). Components that need a different treatment (nav icons,
   button-style links, table headers) set their own colour and win on
   specificity, so this only catches links that were relying on UA defaults. */
a {
  color: var(--accent-text);
  text-decoration: none;
}
a:hover {
  color: var(--accent-text-hover);
  text-decoration: underline;
}

/* ── Layout ── */
.layout {
  display: flex;
  height: 100vh;
  flex: 1;
  align-items: stretch;
  overflow: hidden;
}

/* ── Sidebar ── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-self: stretch;
  position: relative;
  border-right: 1px solid var(--gold-line);
}

/* Typographic watermark */
.sidebar::before {
  content: 'ΦΤ';
  position: absolute;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-label);
  font-size: 0.58rem;
  letter-spacing: 0.15em;
  color: rgba(200, 168, 75, 0.1);
  pointer-events: none;
  user-select: none;
  writing-mode: vertical-rl;
}

/* ── Sidebar header ── */
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 0 0.9rem;
  border-bottom: 1px solid var(--gold-line);
  flex-shrink: 0;
}

.sidebar-title { display: none; }

.sidebar-logo-glyph {
  font-family: var(--font-label);
  font-size: 1.35rem;
  font-weight: 400;
  font-style: italic;
  color: var(--gold);
  line-height: 1;
  opacity: 0.85;
  user-select: none;
}

/* ── Navigation ── */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: 0.75rem 0;
  gap: 1px;
  flex: 1;
}

.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--sidebar-w);
  height: 44px;
  color: rgba(245, 241, 234, 0.4);
  text-decoration: none;
  transition: color 0.18s, background 0.18s;
  border-left: 2px solid transparent;
}

.nav-link:hover {
  color: rgba(245, 241, 234, 0.82);
  background: rgba(245, 241, 234, 0.05);
}

.nav-link.active {
  color: var(--gold);
  background: var(--active-bg);
  border-left-color: var(--gold);
}

.nav-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.nav-text { display: none; }

/* ── Tooltip ── */
.nav-link::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--ink);
  color: var(--paper);
  padding: 0.28rem 0.65rem;
  border-radius: 3px;
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.14s;
  z-index: 100;
  border-left: 2px solid var(--gold);
}

.nav-link:hover::after { opacity: 1; }

/* ── Divider ── */
.nav-divider {
  height: 1px;
  background: var(--gold-line);
  margin: 0.5rem 0.85rem;
}

/* ── Footer / User menu ── */
.sidebar-footer {
  padding: 0.75rem 0;
  border-top: 1px solid var(--gold-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  overflow: visible;
  flex-shrink: 0;
}

/* Theme toggle removed from the sidebar — the theme is now changed from the
   Settings modal. */

.user-menu { position: relative; }

.user-button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--gold-line);
  background: rgba(200, 168, 75, 0.12);
  color: var(--gold);
  font-family: var(--font-label);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
  letter-spacing: 0.02em;
}

.user-button:hover {
  background: rgba(200, 168, 75, 0.25);
  border-color: var(--gold);
}

.user-button::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--ink);
  color: var(--paper);
  padding: 0.28rem 0.65rem;
  border-radius: 3px;
  font-family: var(--font-label);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.14s;
  z-index: 100;
  border-left: 2px solid var(--gold);
}

.user-button:hover::after { opacity: 1; }

/* ── User dropdown ── */
.user-dropdown {
  position: absolute;
  bottom: 0;
  left: calc(100% + 10px);
  background: var(--paper);
  border: 1px solid var(--ink-faint);
  border-top: 2px solid var(--gold);
  border-radius: 4px;
  padding: 0.5rem;
  min-width: 180px;
  display: none;
  box-shadow:
    0 2px 8px rgba(28, 24, 20, 0.12),
    0 8px 24px rgba(28, 24, 20, 0.08);
  z-index: 200;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.14s, transform 0.14s;
}

.user-menu.open .user-dropdown {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.user-info {
  font-family: var(--font-label);
  font-size: 0.78rem;
  color: var(--ink-mid);
  padding: 0.25rem 0.4rem 0.5rem;
  border-bottom: 1px solid var(--ink-faint);
  margin-bottom: 0.35rem;
  letter-spacing: 0.01em;
}

.dropdown-item {
  width: 100%;
  border: none;
  background: none;
  padding: 0.42rem 0.6rem;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-label);
  font-size: 0.82rem;
  color: var(--ink-mid);
  border-radius: 3px;
  transition: background 0.1s, color 0.1s;
  letter-spacing: 0.01em;
}

.dropdown-item:hover {
  background: var(--paper-dark);
  color: var(--ink);
}

/* ── Content area ── */
.content {
  flex: 1;
  min-width: 0;
  min-height: 0;
  height: 100%;
  background-color: var(--paper);
  background-image: var(--paper-texture);
  overflow-y: auto;
}

.page-main {
  padding: 1.75rem 2.25rem;
}

/* ── Typography ── */
.paragraph-block p {
  font-family: var(--font-body);
  font-size: 1.15rem;
  line-height: 1.8;
  color: var(--text-body);
}

/* ── Tables ── */
.paragraphs_table {
  border-collapse: collapse;
}

.paragraphs_table td {
  vertical-align: top;
}

.paragraphs_table tbody tr {
  border-bottom: 1px solid var(--ink-faint);
}

.paragraphs_table thead tr th {
  text-align: left;
  font-family: var(--font-label);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-light);
  padding-bottom: 0.5rem;
}


/* ── Related authors panel (author_detail) ── */
.related-authors {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-mid);
}

.related-authors h3 {
  font-family: var(--font-label);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-light);
  margin-bottom: 0.75rem;
}

.related-authors-status {
  color: var(--ink-light);
  font-style: italic;
}

.related-authors-list,
.related-texts-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.related-author-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--line);
}

.related-author-toggle {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 1rem;
  color: var(--text-body);
  text-align: left;
}

.related-author-toggle:hover {
  color: var(--gold);
}

.related-author-row.expanded .related-author-toggle {
  font-weight: 600;
}

.relation-count {
  margin-left: auto;
  min-width: 1.6rem;
  padding: 0.05rem 0.45rem;
  border-radius: 0.75rem;
  background: var(--gold-faint);
  color: var(--ink-mid);
  font-family: var(--font-label);
  font-size: 0.78rem;
  text-align: center;
}

.related-texts-row {
  padding: 0.3rem 0 0.5rem 1.2rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink-light);
  font-style: italic;
}

.related-texts-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0;
  font-style: normal;
  font-size: 0.95rem;
  color: var(--text-soft);
}

.related-texts-list .relation-count {
  font-style: normal;
}

/* ── Text relations summary (texts list + reading view) ── */
.btn-text-relations {
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  padding: 0.1rem 0.5rem;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--ink-mid);
}

.btn-text-relations:hover,
.btn-text-relations.active {
  border-color: var(--gold);
  color: var(--gold);
}

.rel-summary-row > td {
  background: var(--surface-card-2);
  padding: 0.9rem 1.1rem;
}

.rel-summary-status,
.rel-summary-empty {
  color: var(--ink-light);
  font-style: italic;
  margin: 0;
}

.rel-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

/* Allow the columns to shrink below their content's intrinsic width so a long
 * title can be truncated instead of forcing the whole panel wider. */
.rel-summary-section {
  min-width: 0;
}

@media (max-width: 700px) {
  .rel-summary-grid { grid-template-columns: 1fr; }
}

.rel-summary-heading {
  font-family: var(--font-label);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-light);
  margin: 0 0 0.5rem;
}

.rel-summary-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 320px;
  overflow-y: auto;
}

.rel-summary-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}

/* The title link takes the remaining space and truncates with an ellipsis;
 * min-width: 0 is required for a flex item to shrink below its content. */
.rel-summary-list li > a {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rel-summary-meta {
  flex: 0 1 auto;
  max-width: 40%;
  color: var(--ink-light);
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The count badge must keep its full width — never let it shrink or wrap. */
.rel-summary-list li > .relation-count {
  flex: 0 0 auto;
}

/* Interactive count badge (reading view): drills down to paragraph pairs. */
.relation-count.rel-count-toggle {
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.relation-count.rel-count-toggle:hover,
.relation-count.rel-count-toggle.open {
  background: var(--gold);
  color: var(--surface-card);
}

/* Inline paragraph-pairs dropdown (one row injected after the clicked item). */
.rel-pairs-row {
  display: block !important;   /* override the flex layout of sibling li's */
  padding: 0.3rem 0 0.4rem 0.5rem;
  border-bottom: 1px solid var(--line);
}

.rel-pairs-status {
  margin: 0.2rem 0;
  color: var(--ink-light);
  font-style: italic;
  font-size: 0.82rem;
}

.rel-pairs-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rel-pairs-list li {
  display: block;
  padding: 0;
  border: none;
}

.rel-pair {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  width: 100%;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0.2rem 0.35rem;
  border-radius: 4px;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--ink-mid);
  text-align: left;
}

.rel-pair:hover {
  background: var(--gold-faint);
}

.rel-pair-src {
  flex: 0 0 auto;
  font-weight: 600;
  color: var(--gold);
}

.rel-pair-arrow {
  flex: 0 0 auto;
  color: var(--ink-light);
}

.rel-pair-tgt {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-light);
}

.rel-pair-score {
  flex: 0 0 auto;
}

/* Texts-list drill-down: related paragraph pairs read inline, side by side.
   Left = this text's paragraph, right = the related passage in the other text. */
.rel-pairs-reader {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rel-pair-reader {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.75rem;
  align-items: start;
  padding: 0.6rem 0.35rem;
  border-bottom: 1px solid var(--line);
}

.rel-pair-reader:last-child {
  border-bottom: none;
}

.rel-pair-col {
  min-width: 0;
}

.rel-pair-col-src {
  padding-right: 0.75rem;
  border-right: 1px solid var(--line);
}

.rel-pair-col-head {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-light);
  margin-bottom: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rel-pair-col-src .rel-pair-col-head {
  color: var(--gold);
}

.rel-pair-col-body {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink);
  white-space: pre-wrap;
}

.rel-pair-reader-score {
  align-self: start;
}

@media (max-width: 760px) {
  .rel-pair-reader {
    grid-template-columns: 1fr;
  }
  .rel-pair-col-src {
    padding-right: 0;
    border-right: none;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--line);
  }
  .rel-pair-reader-score {
    justify-self: start;
  }
}

/* Reading-view popover */
.text-relations-panel {
  display: none;
  position: fixed;
  top: 64px;
  right: 24px;
  width: min(560px, calc(100vw - 48px));
  max-height: 70vh;
  overflow-y: auto;
  background: var(--surface-card);
  border: 1px solid var(--line-mid);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
  z-index: 60;
  padding: 1rem 1.2rem 1.2rem;
}

.text-relations-panel.open {
  display: block;
}

.text-relations-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.8rem;
}

.text-relations-title {
  font-family: var(--font-label);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-light);
}

.text-relations-close {
  background: none;
  border: none;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-light);
}

.text-relations-close:hover {
  color: var(--ink);
}