/* Corpus reader layout — shared between the monolingual and trilingual
   "real texts" pages. Sidebar (browse) + reading pane, matching the
   AvarLab visual language (maroon accent, Charis SIL for Avar text). */

.corpus-reader {
  --reader-border: var(--border-color, #e2e8f0);
  --reader-sidebar-w: 300px;
  max-width: 1180px;
  margin: 0 auto;
}

/* ---- Hero ---- */
.reader-hero {
  padding: var(--space-6, 1.5rem) 0 var(--space-4, 1rem);
}

.reader-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-500);
}

.reader-hero h1 {
  font-weight: 800;
  margin: var(--space-1, 0.25rem) 0 var(--space-2, 0.5rem);
  color: var(--text-primary, #1e293b);
}

.reader-hero p {
  color: var(--text-secondary, #64748b);
  max-width: 60ch;
  margin-bottom: 0.25rem;
}

.reader-hero .lang-secondary {
  font-size: 0.9rem;
}

/* ---- Tabs: Browse Texts / Search Inside Them ---- */
.reader-tabs {
  display: flex;
  gap: var(--space-6, 1.5rem);
  border-bottom: 1px solid var(--reader-border);
  margin: var(--space-4, 1rem) 0 var(--space-4, 1rem);
}

.reader-tab {
  padding: 0.5rem 0.1rem 0.75rem;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text-secondary, #64748b);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.reader-tab:hover {
  color: var(--color-primary-600);
  text-decoration: none;
}

.reader-tab.is-active {
  color: var(--color-primary-600);
  border-bottom-color: var(--color-primary-500);
}

/* ---- Body grid ---- */
.reader-body {
  display: grid;
  grid-template-columns: var(--reader-sidebar-w) minmax(0, 1fr);
  gap: var(--space-6, 1.5rem);
  align-items: start;
}

@media (max-width: 900px) {
  .reader-body {
    grid-template-columns: minmax(0, 1fr); /* a bare 1fr grows to its widest child */
  }
}

/* ---- Sidebar ---- */
.reader-sidebar {
  position: static;
}

.reader-mobile-picker-summary {
  display: none;
}

.reader-mobile-picker {
  display: none;
}

.reader-chip {
  display: inline-block;
  padding: 0.32rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: var(--radius-md, 5px);
  border: 1px solid var(--reader-border);
  color: var(--text-primary, #1e293b);
  background: var(--bg-primary, #fff);
  text-decoration: none;
  white-space: nowrap;
}

.reader-chip:hover {
  border-color: var(--color-primary-400, #475569);
  text-decoration: none;
  color: var(--color-primary-600);
}

.reader-doc-group {
  margin-bottom: var(--space-4, 1rem);
}

.reader-doc-group-label {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gray-600, #475569);
  padding: 0.45rem 0.5rem;
  margin-bottom: 0.35rem;
  border-radius: var(--radius-md, 5px);
  user-select: none;
}

.reader-doc-group-toggle {
  text-decoration: none;
  cursor: pointer;
}

.reader-doc-group-toggle:hover {
  background: var(--bg-secondary, #f1f5f9);
}

.reader-doc-group.is-open > .reader-doc-group-label {
  color: var(--color-primary-700, #2b0000);
  background: var(--color-primary-50, #f8fafc);
}

.reader-doc-group-name {
  flex: 1 1 auto;
  min-width: 0;
}

.reader-doc-group-name::before {
  content: '\25B8'; /* ▸ */
  display: inline-block;
  margin-right: 0.4rem;
  font-size: 0.7rem;
  color: var(--color-gray-500, #64748b);
  transition: transform 0.15s ease;
}

.reader-doc-group.is-open > .reader-doc-group-label .reader-doc-group-name::before {
  transform: rotate(90deg);
  color: var(--color-primary-600);
}

.reader-doc-group-toggle:hover {
  color: var(--color-primary-600);
  text-decoration: none;
}

.reader-doc-group-toggle:hover .reader-doc-group-name::before {
  color: var(--color-primary-600);
}

.reader-doc-group-count {
  flex-shrink: 0;
  min-width: 2.75rem;
  font-weight: 700;
  text-align: right;
  color: var(--color-gray-600, #475569);
  background: var(--bg-secondary, #f1f5f9);
  border-radius: var(--radius-sm, 3px);
  padding: 0.05rem 0.45rem;
}

.reader-doc-group.is-open > .reader-doc-group-label .reader-doc-group-count {
  background: #fff;
  color: var(--color-primary-600);
}

.reader-doc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--reader-border);
  border-radius: var(--radius-lg, 6px);
  overflow: hidden;
  background: var(--bg-primary, #fff);
}

.reader-doc-item + .reader-doc-item {
  border-top: 1px solid var(--reader-border);
}

.reader-doc-link {
  display: block;
  padding: 0.55rem 0.75rem;
  text-decoration: none;
  color: inherit;
}

.reader-doc-link:hover {
  background: var(--bg-secondary, #f1f5f9);
  text-decoration: none;
}

.reader-doc-item.is-active .reader-doc-link {
  background: var(--color-primary-50, #f8fafc);
  border-left: 3px solid var(--color-primary-500);
  padding-left: calc(0.75rem - 3px);
}

.reader-doc-title {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text-primary, #1e293b);
  display: block;
  margin-bottom: 0.15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reader-doc-item.is-active .reader-doc-title {
  color: var(--color-primary-600);
}

.reader-doc-meta {
  font-size: 0.74rem;
  color: var(--text-tertiary, #94a3b8);
}

.reader-sidebar-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: var(--space-3, 0.75rem);
}

.reader-contribute-link {
  display: block;
  margin-top: var(--space-3, 0.75rem);
  padding: 0.5rem 0.75rem;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-primary-600);
  border: 1px dashed var(--color-primary-300, #cbd5e1);
  border-radius: var(--radius-md, 5px);
  text-decoration: none;
}

.reader-contribute-link:hover {
  background: var(--color-primary-50, #f8fafc);
  text-decoration: none;
}

.reader-sidebar-empty {
  font-size: 0.85rem;
  color: var(--text-secondary, #64748b);
  padding: 0.75rem;
  text-align: center;
}

/* On a phone the selected document is the primary task. Keep the complete
   picker available, but turn it into one explicit control instead of placing
   every source and title before the first line of the text. */
@media (max-width: 900px) {
  .reader-hero {
    padding: 0.75rem 0 0.5rem;
  }

  .reader-hero h1 {
    margin: 0.15rem 0 0.25rem;
    font-size: 1.5rem;
    line-height: 1.2;
  }

  .reader-hero p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.35;
  }

  .reader-tabs {
    margin: 0.75rem 0;
  }

  .reader-mobile-picker {
    display: block;
    border-top: 1px solid var(--reader-border);
    border-bottom: 1px solid var(--reader-border);
  }

  .reader-desktop-picker {
    display: none;
  }

  .reader-mobile-picker-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 700;
    list-style: none;
  }

  .reader-mobile-picker-step {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
  }

  .reader-mobile-picker-hint {
    color: var(--text-secondary, #64748b);
    font-size: 0.78rem;
    font-weight: 500;
  }

  .reader-mobile-picker-summary::-webkit-details-marker {
    display: none;
  }

  .reader-mobile-picker-summary::after {
    content: "⌄";
    color: var(--text-secondary, #64748b);
  }

  .reader-mobile-picker[open] .reader-mobile-picker-summary::after {
    transform: rotate(180deg);
  }

  .reader-picker-content {
    padding: 0.5rem 0 1rem;
  }

  .reader-pane-header {
    gap: 0.5rem;
    padding: 0.75rem 1rem 0;
  }

  .reader-meta-grid {
    gap: 0.5rem;
    margin: 0.75rem 1rem;
    padding: 0.6rem 0.75rem;
  }

  .reader-pane-toolbar {
    margin: 0 1rem 0.75rem;
  }

  /* Four 44px actions beside the line left the text ~25px wide (and overflowed
     at 320px); give them their own row under the text. */
  .reader-line {
    flex-wrap: wrap;
  }

  .reader-line-actions {
    flex-basis: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .reader-pane-toggle,
  .reader-line-actions .btn:not(.reader-pos-toggle-btn):not(.reader-text-btn),
  .reader-pos-toggle-btn,
  .reader-text-btn {
    min-height: 44px;
  }

  .reader-line-actions .btn:not(.reader-pos-toggle-btn):not(.reader-text-btn) {
    width: 44px;
    height: 44px;
  }
}

/* ---- Reading pane ---- */
.reader-pane {
  border: 1px solid var(--reader-border);
  border-radius: var(--radius-xl, 10px);
  background: var(--bg-primary, #fff);
  min-height: 400px;
}

.reader-pane-empty {
  padding: var(--space-12, 4rem) var(--space-6, 1.5rem);
  text-align: center;
  color: var(--text-secondary, #64748b);
}

.reader-pane-external-notice {
  padding: var(--space-12, 4rem) var(--space-6, 1.5rem);
  text-align: center;
}

.reader-pane-external-notice h4 {
  color: var(--text-primary, #1e293b);
  margin-bottom: var(--space-2, 0.5rem);
}

.reader-pane-external-notice p {
  color: var(--text-secondary, #64748b);
  max-width: 480px;
  margin: 0 auto var(--space-6, 1.5rem);
}

.reader-pane-external-links {
  display: flex;
  justify-content: center;
  gap: var(--space-3, 0.75rem);
  flex-wrap: wrap;
}

.reader-pane-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap; /* the toggle drops below a long title instead of widening the page */
  gap: var(--space-4, 1rem);
  padding: var(--space-4, 1rem) var(--space-6, 1.5rem) 0;
}

.reader-pane-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-primary, #1e293b);
  margin: 0 0 0.25rem;
}

.reader-pane-subline {
  font-size: 0.82rem;
  color: var(--text-secondary, #64748b);
}

.reader-pane-toggle {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Metadata strip: Author / Genre / Language / Tags / Grammar tags */
.reader-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-4, 1rem);
  margin: var(--space-4, 1rem) var(--space-6, 1.5rem);
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  background: var(--bg-secondary, #f1f5f9);
  border-radius: var(--radius-lg, 6px);
}

.reader-meta-item-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary, #94a3b8);
  margin-bottom: 0.15rem;
}

.reader-meta-item-value {
  font-size: 0.86rem;
  color: var(--text-primary, #1e293b);
  overflow-wrap: anywhere;
}

.reader-meta-item-value a {
  color: var(--color-primary-500);
}

/* Compact search + options row inside the pane */
.reader-pane-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0 var(--space-6, 1.5rem) var(--space-3, 0.75rem);
}

.reader-search-form {
  flex: 1 1 240px;
  min-width: 200px;
}

.reader-options-toggle {
  font-size: 0.78rem;
  color: var(--text-secondary, #64748b);
  cursor: pointer;
}

.reader-options-panel {
  margin: 0 var(--space-6, 1.5rem) var(--space-3, 0.75rem);
  padding: var(--space-3, 0.75rem);
  border: 1px solid var(--reader-border);
  border-radius: var(--radius-md, 5px);
  background: var(--bg-secondary, #f1f5f9);
}

/* ---- Lines / entries ---- */
.reader-lines {
  border-top: 1px solid var(--reader-border);
}

.reader-line {
  display: flex;
  gap: 0.75rem;
  padding: var(--space-3, 0.75rem) var(--space-6, 1.5rem);
}

.reader-line + .reader-line {
  border-top: 1px solid var(--reader-border);
}

.reader-line-num {
  flex-shrink: 0;
  width: 1.6rem;
  color: var(--text-tertiary, #94a3b8);
  font-size: 0.8rem;
  padding-top: 0.15rem;
  text-align: right;
}

.reader-line-main {
  flex: 1 1 auto;
  min-width: 0;
}

.reader-line-avar {
  font-family: var(--font-family-serif, 'Charis SIL', serif);
  font-size: 1.05rem;
  color: var(--text-primary, #1e293b);
  margin-bottom: 0.15rem;
  white-space: pre-wrap;
}

.reader-line-gloss {
  font-size: 0.92rem;
  color: var(--color-gray-700, #334155);
}

.reader-line-gloss-ru {
  font-size: 0.85rem;
  color: var(--text-secondary, #64748b);
}

.trilingual-hide-translations .reader-line-gloss,
.trilingual-hide-translations .reader-line-gloss-ru {
  display: none;
}

.reader-input-narrow {
  width: 5rem;
}

.reader-input-medium {
  max-width: 11rem;
}

.reader-search-input-group {
  min-width: 220px;
}

/* ---- Search Inside Them page (global full-text search, no sidebar) ---- */
.reader-search-page {
  max-width: 900px;
  margin: 0 auto;
}

.reader-search-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3, 0.75rem);
  margin-bottom: var(--space-4, 1rem);
}

.reader-search-stat {
  border: 1px solid var(--reader-border);
  border-radius: var(--radius-lg, 6px);
  background: var(--bg-primary, #fff);
  padding: 0.9rem 1rem;
  text-align: center;
}

.reader-search-stat-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--color-primary-600);
}

.reader-search-stat-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary, #94a3b8);
  margin-top: 0.15rem;
}

.reader-search-panel {
  border: 1px solid var(--reader-border);
  border-radius: var(--radius-xl, 10px);
  background: var(--bg-primary, #fff);
  padding: 1.1rem 1.25rem;
  margin-bottom: var(--space-4, 1rem);
}

.reader-pane-search-summary {
  margin: 0 var(--space-6, 1.5rem) 0.5rem;
}

.reader-line-tags {
  margin-top: 0.4rem;
}

.reader-line-tags.is-hidden {
  display: none;
}

.reader-pos-empty {
  margin: 0;
  padding: 0.4rem 0;
  font-size: 0.82rem;
  color: var(--text-tertiary, #94a3b8);
  font-style: italic;
}

.reader-line-actions {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  padding-top: 0.1rem;
}

/* Bootstrap's rounded-circle only sets border-radius: a btn-sm icon button
   still sizes to its (unequal) padding box, so it renders as an oval, not a
   circle, and is an awkwardly small click target. Force a square box. Scoped
   to icon-only buttons — "Tags" and the "AI" voice (.reader-text-btn) are pills. */
.reader-line-actions .btn:not(.reader-pos-toggle-btn):not(.reader-text-btn) {
  width: 2rem;
  height: 2rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.reader-pos-toggle-btn,
.reader-text-btn {
  flex-shrink: 0;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
}

/* ---- Footer: export + report an error ---- */
.reader-pane-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: var(--space-4, 1rem) var(--space-6, 1.5rem);
  border-top: 1px solid var(--reader-border);
}

.reader-export {
  font-size: 0.82rem;
  color: var(--text-secondary, #64748b);
}

.reader-export a {
  color: var(--color-primary-500);
  text-decoration: underline;
}

.reader-report-error {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-primary-600);
  border: 1px solid var(--color-primary-200, #cbd5e1);
  border-radius: var(--radius-md, 5px);
  padding: 0.3rem 0.65rem;
  text-decoration: none;
  white-space: nowrap;
}

.reader-report-error:hover {
  background: var(--color-primary-50, #f8fafc);
  border-color: var(--color-primary-500);
  text-decoration: none;
}

.reader-report-error i {
  margin-right: 0.3rem;
}

/* ---- Audio upload modal (opened from corpus reading pane) ---- */
#dynamicModalContent .audio-modal-header {
  background: var(--bg-primary, #fff);
  border-bottom: 1px solid var(--reader-border, #e2e8f0);
  padding: 1.1rem 1.5rem;
}

#dynamicModalContent .audio-modal-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-primary, #1e293b);
  margin: 0;
}

#dynamicModalContent .audio-modal-body {
  padding: 1.5rem;
}

#dynamicModalContent .audio-modal-footer {
  background: var(--bg-primary, #fff);
  border-top: 1px solid var(--reader-border, #e2e8f0);
  padding: 1rem 1.5rem;
}

/* .audio-modal-selected/-record/-divider/-section-label/-preview/-fieldset
   live in site.css — shared with the standalone Upload Audio page. */

/* ---- Softened badges (confidence, verified, coverage) ----
   Bootstrap's bg-success/bg-warning/bg-danger/bg-info/bg-primary/bg-secondary
   are solid, saturated fills that clash with the reader's muted palette.
   Same classes, quieter tinted-pill look; !important matches the specificity
   Bootstrap's own color utilities ship with. */
.corpus-reader .badge {
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.01em;
  padding: 0.3rem 0.55rem;
  border-radius: var(--radius-sm, 3px);
}

.corpus-reader .badge.bg-success {
  background: #ecfdf5 !important;
  color: #047857 !important;
  border: 1px solid #a7f3d0;
}

.corpus-reader .badge.bg-primary {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border: 1px solid #bfdbfe;
}

.corpus-reader .badge.bg-warning {
  background: #fffbeb !important;
  color: #b45309 !important;
  border: 1px solid #fde68a;
}

.corpus-reader .badge.bg-danger {
  background: #fef2f2 !important;
  color: #b91c1c !important;
  border: 1px solid #fecaca;
}

.corpus-reader .badge.bg-secondary {
  background: var(--bg-secondary, #f1f5f9) !important;
  color: var(--color-gray-600, #475569) !important;
  border: 1px solid var(--reader-border, #e2e8f0);
}

.corpus-reader .badge.bg-info {
  background: #f0f9ff !important;
  color: #0369a1 !important;
  border: 1px solid #bae6fd;
}

/* This comes after the base icon-button rule so links used for the missing-audio
   action receive the same phone-sized touch box as actual buttons. */
@media (max-width: 900px) {
  .reader-line-actions .btn:not(.reader-pos-toggle-btn):not(.reader-text-btn) {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
  }

  /* The global corpus search and its expandable filters still use Bootstrap's
     compact controls on desktop.  On touch screens, keep the form compact by
     wrapping rows rather than making individual controls too small to tap. */
  .reader-search-panel .form-control,
  .reader-search-panel .form-select,
  .reader-search-panel .btn,
  .reader-search-panel .input-group-text {
    min-height: 44px;
  }

  .reader-search-panel .reader-options-toggle > summary {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  .reader-search-panel .reader-options-panel .form-check {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: 0;
  }

  .reader-search-panel .reader-options-panel .form-check-label {
    padding: 0.75rem 0.5rem 0.75rem 0.25rem;
  }
}

/* At the narrowest phone width, the results title and its document-browse
   action cannot share a row.  Stacking them preserves both readable text and
   the 44 px action target instead of creating page-level horizontal scroll. */
@media (max-width: 360px) {
  .reader-pane-header {
    flex-direction: column;
    align-items: stretch;
  }

  .reader-pane-toggle {
    align-self: flex-start;
    white-space: normal;
  }
}

/* Export links are a run of short words; give each a full-size touch box. */
@media (pointer: coarse) {
  .reader-export a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.25rem;
  }
}

/* ---- Corpus search (Search Inside Them, monolingual) ---- */
.corpus-search-row {
  display: flex;
  gap: 0.5rem;
}

.corpus-search-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  font-size: 1.05rem;
}

.corpus-search-palochka {
  min-width: 44px;
  font-weight: 700;
}

.corpus-search-row .btn {
  min-height: 44px;
}

.corpus-search-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  margin-top: 0.75rem;
}

.corpus-search-view {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.corpus-search-option {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 32px;
  font-size: 0.9rem;
  color: var(--text-primary, #1e293b);
  cursor: pointer;
}

.corpus-search-option .form-check-input {
  margin: 0;
}

.corpus-search-option .form-select {
  width: auto;
}

.corpus-search-option-note {
  font-size: 0.8rem;
  color: var(--text-secondary, #64748b);
}

.corpus-search-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.corpus-search-body {
  grid-template-columns: 260px minmax(0, 1fr);
}

/* Source rail: one row per source, hit count on the right. */
.corpus-facets-summary {
  display: flex;
  justify-content: space-between;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gray-600, #475569);
  padding: 0.45rem 0.5rem;
  list-style: none;
  cursor: default;
}

.corpus-facets-summary::-webkit-details-marker {
  display: none;
}

.corpus-facet-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.corpus-facet {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.45rem 0.5rem;
  border-radius: var(--radius-md, 5px);
  font-size: 0.85rem;
  color: var(--text-primary, #1e293b);
  text-decoration: none;
}

.corpus-facet:hover {
  background: var(--bg-secondary, #f1f5f9);
  color: var(--color-primary-600);
  text-decoration: none;
}

.corpus-facet.is-active {
  background: var(--bg-secondary, #f1f5f9);
  color: var(--color-primary-600);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--color-primary-500);
}

.corpus-facet-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.corpus-facet-count {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary, #64748b);
}

.corpus-hit-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.25rem;
  font-size: 0.8rem;
  color: var(--text-secondary, #64748b);
}

.corpus-hit-context {
  font-size: 0.85rem;
  color: var(--text-tertiary, #94a3b8);
}

.corpus-export {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  font-size: 0.85rem;
  color: var(--text-secondary, #64748b);
}

/* KWIC: left context right-aligned and clipped on its left edge, the hit in
   a fixed middle column, so every hit lines up down the page. */
.corpus-kwic {
  list-style: none;
  margin: 0;
  padding: 0 var(--space-6, 1.5rem) var(--space-4, 1rem);
  border-top: 1px solid var(--reader-border);
  font-family: var(--font-family-serif, 'Charis SIL', serif);
}

.corpus-kwic-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) 9rem;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--reader-border);
}

.corpus-kwic-left {
  display: flex;
  justify-content: flex-end;
  overflow: hidden;
  white-space: nowrap;
}

.corpus-kwic-left > span {
  flex-shrink: 0;
}

.corpus-kwic-kw {
  padding: 0 0.25rem;
  border-radius: 3px;
  font-weight: 700;
  white-space: nowrap;
}

.corpus-kwic-right {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.corpus-kwic-src {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--font-family-sans, system-ui, sans-serif);
  font-size: 0.75rem;
  color: var(--text-secondary, #64748b);
}

.corpus-pages {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: var(--space-4, 1rem);
}

.corpus-search-intro {
  min-height: 0;
  padding: var(--space-6, 1.5rem);
}

.corpus-search-intro ul {
  margin: 0.75rem 0 0;
  padding-left: 1.2rem;
  color: var(--text-secondary, #64748b);
}

.corpus-search-intro li + li {
  margin-top: 0.4rem;
}

@media (max-width: 900px) {
  .corpus-search-body {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Sources fold away above the results on narrow screens. */
  .corpus-facets-summary {
    cursor: pointer;
    border: 1px solid var(--reader-border);
    border-radius: var(--radius-md, 5px);
    min-height: 44px;
    align-items: center;
  }

  .corpus-facet {
    min-height: 44px;
    align-items: center;
  }

  .corpus-kwic {
    padding: 0 0.75rem 0.75rem;
  }

  /* Source moves under the line; the three text columns keep the alignment. */
  .corpus-kwic-line {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .corpus-kwic-src {
    grid-column: 1 / -1;
  }

  .corpus-search-option {
    min-height: 44px;
  }
}

/* Phones: with no document open, the "select a text" card only pushes the
   picker's list down; the open picker already says what to do. */
@media (max-width: 900px) {
  .reader-pane--nodoc {
    display: none;
  }
}