/* 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-mobile-picker-summary {
  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 {
    border-top: 1px solid var(--reader-border);
    border-bottom: 1px solid var(--reader-border);
  }

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

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

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

@media (min-width: 901px) {
  .reader-mobile-picker:not([open]) > .reader-picker-content {
    display: block;
  }
}

/* ---- 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;
}

/* 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) {
    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;
  }
}