/* 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) 1fr;
  gap: var(--space-6, 1.5rem);
  align-items: start;
}

@media (max-width: 900px) {
  .reader-body {
    grid-template-columns: 1fr;
  }
}

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

.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;
}

/* ---- 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;
  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);
  word-break: break-word;
}

.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;
}

.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 — the text "Tags" toggle keeps its natural width. */
.reader-line-actions .btn:not(.reader-pos-toggle-btn) {
  width: 2rem;
  height: 2rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.reader-pos-toggle-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;
}