/* ==========================================================================
   Global Reset & Base
   ========================================================================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --rail-left: minmax(220px, 260px);
    --rail-right: minmax(280px, 340px);
    --ws-gap: 18px;

    --border: #dee2e6;
    --accent: #2f6fed;
    --accent-strong: #1b4fd1;
    --muted: #6c757d;
    --muted-soft: #9299a1;
    --error: #a33b35;   /* one red for every failed-to-load / error placeholder */
    --category-none: #6b7280;   /* one grey for every "category has no colour" placeholder */

    --content-max: 1680px;
    --page-gutter: 20px;
    --page-pad-y: 20px;
}

html {
    background: #faf9f5;
}

body {
    color: #212529;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.5;
}

body.has-main-navbar {
    padding-top: 0 !important;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#app {
    width: 100%;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ==========================================================================
   Navbar
   ========================================================================== */

.main-navbar,
.main-navbar * {
    box-sizing: border-box;
}

.main-navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px 28px;
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 10px var(--page-gutter);
    background-color: transparent;
    z-index: 1200;
    flex: 0 0 auto;
}

.nav-logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.nav-logo img {
    display: block;
    height: 46px;
    width: auto;
    object-fit: contain;
}

.nav-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px 6px;
    flex-wrap: wrap;
}

.nav-links > a {
    text-decoration: none;
    color: #7c828b;
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    padding: 7px 13px;
    border-radius: 6px;
    white-space: nowrap;
}

.nav-links > a.nav-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    padding: 4px 10px;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 23px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1;
}

.nav-links > a:hover {
    color: #fff;
    background: #4f7096;
}

.nav-links > a.active {
    color: #2c3440;
    background: #e9eef5;
}

.nav-links > a.nav-info:hover {
    color: #fff;
    background: #4f7096;
}
.nav-links > a.nav-info.active {
    color: #111;
    background: transparent;
}

@media (max-width: 760px) {
    .main-navbar {
        align-items: flex-start;
        flex-direction: column;
        padding: 10px 16px;
    }

    .nav-links {
        width: 100%;
        justify-content: flex-start;
        gap: 8px 18px;
    }
}


/* ==========================================================================
   About Page
   ========================================================================== */

.about-page {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 28px;
}

.about-page .header-container {
    text-align: center;
    margin-bottom: 28px;
}

.about-page .logo-image {
    max-width: 250px;
    height: auto;
    margin-bottom: 22px;
}

.about-page .nav-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 15px;
    color: #333;
}

.about-page .nav-item {
    padding: 8px 16px;
    cursor: pointer;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: inherit;
    color: #333;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.about-page .nav-item.active {
    background-color: #e8f0f6;
    font-weight: 600;
}

.about-page .separator {
    color: #d0d0d0;
    font-size: 14px;
}

.about-page .content-container {
    max-width: 960px;
    width: calc(100% - 32px);
    padding: 40px;
    text-align: left;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
}

.about-page .tab-content {
    display: none;
    color: #555;
    font-size: 15px;
    line-height: 1.6;
}

.about-page .tab-content.active {
    display: block;
}

/* ==========================================================================
   Corpus / Sources Page
   ========================================================================== */

.corpus-page .workspace {
    overflow: hidden;
}

.corpus-page .panel,
.corpus-page .reader {
    min-height: 0;
}

.corpus-page .panel {
    display: flex;
    flex-direction: column;
}

.library-tree {
    overflow: auto;
    padding: 0 8px 16px;
    font-size: 13px;
}

.library-tree .major-section {
    margin-bottom: 6px;
}

.library-tree .major-title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 0;
    border-bottom: 1px solid #eceff1;
    background: transparent;
    color: #2f343b;
    cursor: pointer;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    padding: 2px 4px;
    text-align: left;
}

.library-tree .major-title::after {
    content: "\25be"; /* ▾ */
    color: #b0b7be;
    font-size: 13px;
    line-height: 1;
}

.library-tree .major-section.collapsed .major-title::after {
    content: "\25b8"; /* ▸ */
}

.library-tree .major-title:hover {
    background: #eef3f4;
    color: #111;
}

/* Active = the ONE selected node (region/tradition/book), independent of expansion. */
.library-tree .major-title.active {
    background: #e2edf0;
    color: #111;
}

.library-tree .major-body {
    padding-top: 0;
}

.library-tree .major-section.collapsed .major-body {
    display: none;
}

.library-tree .tradition-title {
    width: 100%;
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) 14px;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #3f4650;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 400;
    padding: 3px 6px;
    text-align: left;
}

.library-tree .tradition-title:hover {
    background: #eef3f4;
    color: #111;
}

.library-tree .tradition-group.open > .tradition-title {
    color: #111;
}

.library-tree .tradition-title.active {
    background: #e2edf0;
    color: #111;
}

.library-tree .tradition-pick {
    grid-template-columns: 10px minmax(0, 1fr);
}

.library-tree .tradition-pick.active {
    background: #e2edf0;
    color: #111;
}

.library-tree .tradition-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--tradition-color, var(--category-none));
    box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.12);
}

.library-tree .tradition-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.library-tree .tradition-toggle {
    color: #a7afb7;
    font-size: 10px;
    line-height: 1;
    text-align: right;
}

.library-tree .document-list {
    display: none;
    list-style: none;
    /* 17px aligns book text with the tradition name (title 6px pad + 10px dot + 8px gap = 24px,
       minus the button's own 7px pad); +7px more nests the books a touch to the right of it. */
    padding: 1px 0 4px 24px;
}

.library-tree .tradition-group.open .document-list {
    display: block;
}

.library-tree .document-button {
    width: 100%;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--muted-soft);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    line-height: 1.25;
    padding: 5px 7px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.library-tree .document-button:hover {
    color: #111;
    background: #f4f6f7;
}

.library-tree .document-button.active {
    color: #111;
    background: #e2edf0;
}

.library-sidebar {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.library-sidebar .library-tree {
    flex: 1 1 auto;
    min-height: 0;
}

.workspace {
    display: grid;
    grid-template-columns: var(--rail-left) minmax(0, 1fr) var(--rail-right);
    grid-template-rows: minmax(0, 1fr);
    gap: var(--ws-gap);
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
}

.corpus-page.container,
.analysis-page.container,
.graph-page.container,
.geography-page.container,
.motifs-page.container {
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--page-pad-y) var(--page-gutter);
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    overflow: hidden;
}

.rail {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.rail > .card {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.rail-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.corpus-page .info-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--book-color, var(--category-none));
    box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.12);
}

.corpus-page .reader {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.corpus-page .reader-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    padding: 28px 46px 60px;
    color: #111;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    line-height: 1.8;
    white-space: pre-wrap;
}

.corpus-page .reader-placeholder {
    margin: auto;
    color: var(--muted-soft);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    text-align: center;
}

.corpus-page .book-info {
    overflow: auto;
    padding: 18px;
}

.corpus-page .book-title {
    color: #111;
    overflow-wrap: anywhere;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
}

.corpus-page .book-tradition {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    color: #58616c;
    font-size: 13px;
}

.corpus-page .stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 18px 0;
}

.corpus-page .stat-card {
    border: 1px solid #e1e6eb;
    border-radius: 6px;
    background: #fafbfc;
    padding: 11px 10px;
}

.corpus-page .stat-value {
    color: #111;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}

.corpus-page .stat-label {
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.corpus-page .description-title {
    margin: 18px 0 8px;
    color: #111;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

.corpus-page .description-text {
    color: #4b5563;
    font-size: 14px;
}

/* Region / tradition detail shown in the reader when its tree row is clicked. */
.corpus-page .facet-info {
    max-width: 680px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    white-space: normal;
}
.corpus-page .facet-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 22px;
    color: #111;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}
.corpus-page .facet-dot {
    flex: none;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--facet-color, #8a8a8a);
    box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.15);
}
.corpus-page .facet-lead { margin-bottom: 16px; color: #374151; }
.corpus-page .facet-field { margin-bottom: 16px; }
.corpus-page .facet-field-label {
    margin-bottom: 3px;
    color: #6b4a2e;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.corpus-page .facet-field-value { color: #374151; }
.corpus-page .facet-field-list { margin: 0; padding-left: 18px; color: #374151; }
.corpus-page .facet-field-list li { margin-bottom: 3px; }

.corpus-page a.original-url-link {
    display: block;
    margin-top: 18px;
    color: var(--accent);
    font-size: 14px;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.corpus-page a.original-url-link:hover {
    text-decoration: underline;
}

.corpus-page .actions {
    display: grid;
    gap: 10px;
    margin-top: 20px;
}

.corpus-page .btn,
.analysis-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 8px 16px;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.corpus-page .btn {
    min-height: 38px;
    padding: 9px 12px;
    font-weight: 600;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.corpus-page .btn-primary,
.analysis-page .btn-primary {
    background: #111;
    color: #fff;
}

.corpus-page .btn-primary:hover {
    background: #30343a;
}

.corpus-page .btn-outline,
.analysis-page .btn-outline {
    border-color: var(--border);
    background: transparent;
    color: #495057;
}

.corpus-page .btn-outline:hover {
    border-color: #bfc7cf;
    background: #f5f7f8;
    color: #111;
}

/* ==========================================================================
   Block states — shared empty / error placeholders
   One look for every block that has no data yet or whose load failed (list &
   detail panes, corpus/graph trees, motif catalog). Page rules may refine.
   ========================================================================== */
.empty-state,
.error-state {
    padding: 24px 20px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}

.error-state {
    color: var(--error);
}

/* ==========================================================================
   Geography Page
   ========================================================================== */

.geography-page .geo-workspace {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.geography-page .map-frame {
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #d8dee4;
    border-radius: 8px;
    background: #d4dadc;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.geography-page #geography-map {
    position: relative;
    width: 100%;
    height: 100%;
}

.atlas-svg {
    display: block;
    width: 100%;
    height: 100%;
    background: #eef3f4;
    touch-action: none;
    user-select: none;
}
.atlas-svg path { vector-effect: non-scaling-stroke; }  /* contour widths stay fixed on zoom (mockup 62) */

.atlas-ocean { fill: #eef3f4; }
.atlas-land { fill: #e6ebe3; stroke: #c2ccbe; stroke-width: 0.5; }
.atlas-antarctica { fill: #ffffff; stroke: #c2ccbe; stroke-width: 0.5; }
.atlas-region { fill-opacity: 0.35; stroke-opacity: 0.55; stroke-width: 1; }

/* Points keep a near-constant screen size on zoom: radius via --z, non-scaling stroke (mockup 62). */
.atlas-dot {
    r: calc(var(--pr, 1.5) * var(--z, 1) * 1px);
    stroke: #fff;
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.1s ease-out;
    cursor: pointer;
}
.atlas-dot.hi { transform: scale(1.5); }

/* One shared dark-tooltip skin: atlas (.geo-tip), similarity (.plot-hover-tooltip),
   graphs (.graph-edge-tooltip). Each block below adds only its own positioning,
   sizing, z-index and show/hide behaviour. */
.geo-tip,
.analysis-page .plot-hover-tooltip,
.graph-node-tooltip,
.graph-edge-tooltip {
    position: absolute;
    padding: 16px 18px;
    background: #111827;
    color: #f1f3f5;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.22);
    font-size: 12px;
    line-height: 1.45;
    pointer-events: none;
}

/* Tooltip: mockup 62 dark tip (rise/fade-in); rich card content, links stay clickable. */
.geo-tip {
    z-index: 500;
    width: min(320px, 72vw);
    opacity: 0;
    transform: translateY(3px);
    transition: opacity 0.16s ease, transform 0.16s ease;
}
.geo-tip.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.geo-tip .popup-title { color: #fff; font-size: 15px; margin-bottom: 2px; gap: 8px; }
.geo-tip .popup-region { margin: 0 0 12px; color: rgba(255, 255, 255, 0.6); font-size: 12px; }
.geo-tip .popup-description { color: rgba(255, 255, 255, 0.82); font-size: 12.5px; }
.geo-tip.region { width: auto; padding: 5px 9px; }
.geo-tip .popup-region-only { color: rgba(255, 255, 255, 0.85); font-size: 12px; white-space: nowrap; }

.popup-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    color: #111827;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
}

.popup-description {
    color: #374151;
    font-size: 13px;
    line-height: 1.5;
}

.map-error {
    display: grid;
    place-items: center;
    height: 100%;
    padding: 24px;
    color: var(--error);
    text-align: center;
    font-size: 14px;
}

/* ==========================================================================
   Embeddings / Analysis Page
   ========================================================================== */

/* Fill the column before the tree renders, so the controls sit at the bottom from
   the first paint instead of hugging the "Loading…" line and dropping later. */
.analysis-page #tree-container {
    flex: 1 1 auto;
    min-height: 0;
}

.analysis-page .sidebar-controls {
    flex: 0 0 auto;
    border-top: 1px solid var(--border);
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.analysis-page .form-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
}

.analysis-page .form-group label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.analysis-page select {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 14px;
    color: #212529;
    outline: none;
    transition: border-color 0.2s;
    background: #fff;
    cursor: pointer;
}

.analysis-page select:focus {
    border-color: var(--accent);
}

.analysis-page .plot-area {
    min-width: 0;
    display: flex;
}

.analysis-page .plot-container {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.analysis-page .card-header {
    min-height: 54px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.analysis-page .card-body { padding: 20px; }

.analysis-page .plot-canvas {
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 0;
    background: #fbfcfd;
    overflow: auto;
}

.analysis-page #scatter-plot {
    overflow: auto !important;
    min-height: 100%;
}

.analysis-page .plot-hover-tooltip {
    z-index: 25;
    display: none;
    width: max-content;
    max-width: min(360px, calc(100% - 20px));
    overflow-wrap: anywhere;
}

.analysis-page .plot-hover-tooltip.visible {
    display: block;
}

.analysis-page .plot-hover-text {
    color: #f1f3f5;
}

.analysis-page .fragment-attribution {
    margin-top: 8px;
    color: var(--muted-soft);
    font-size: 12px;
    line-height: 1.4;
    text-align: right;
}
/* The same line rides inside the dark scatter tooltip — light text there. */
.analysis-page .plot-hover-tooltip .fragment-attribution { color: rgba(255, 255, 255, 0.7); }

.analysis-page .fragment-attribution .fragment-tradition,
.analysis-page .fragment-attribution .fragment-title,
.analysis-page .fragment-attribution .fragment-chunk {
    display: block;
}

.analysis-page .loading-placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--muted);
    font-size: 14px;
    text-align: center;
    z-index: 10;
}

.analysis-page .info-content {
    font-size: 14px;
}

.analysis-page .fragment-detail .fragment-text {
    color: #2f343b;
    font-size: 14px;
    line-height: 1.6;
}

.analysis-page .fragment-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    padding: 4px;
    border: 0;
    background: transparent;
    color: var(--accent);
    cursor: pointer;
    transition: color 0.16s ease;
}

.analysis-page .fragment-edit:hover {
    color: var(--accent-strong);
}

.analysis-page .fragments-divider {
    margin: 20px 0 14px;
    color: var(--muted-soft);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.analysis-page .cross-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    white-space: nowrap;
}

.analysis-page .cross-toggle input {
    cursor: pointer;
}

.analysis-page .neighbor-item {
    padding: 10px 8px;
    margin-bottom: 4px;
    border-radius: 6px;
    cursor: pointer;
}

.analysis-page .neighbor-item .fragment-text {
    color: #3f4650;
    font-size: 13px;
    line-height: 1.55;
}

/* Source-reveal icon at the end of a preprocessing variant's fragment text. */
.analysis-page .src-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: -3px;
    margin-left: 3px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--muted-soft);
    cursor: pointer;
    transition: color 0.12s ease, background 0.12s ease;
}

.analysis-page .src-icon svg {
    width: 14px;
    height: 14px;
    display: block;
}

.analysis-page .src-icon:hover,
.analysis-page .src-icon:focus-visible {
    color: var(--accent);
    background: #eaf1fe;
    outline: none;
}

/* Floating source tooltip (appended to body so the rail's scroll never clips it). */
.source-tip {
    position: fixed;
    z-index: 60;
    display: none;
    width: 320px;
    max-width: 44vw;
    padding: 20px 22px;
    border-radius: 9px;
    background: #141414;
    color: #fff;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.42);
    font-size: 13.5px;
    line-height: 1.6;
    pointer-events: none;
    overflow-wrap: anywhere;
}

/* Reflowed source paragraphs (see reflowHtml): keep paragraph spacing, let text
   wrap to the column instead of the source's hard line breaks. */
.analysis-page .fragment-text .reflow-p {
    margin: 0 0 0.7em;
}
.analysis-page .fragment-text .reflow-p:last-child {
    margin-bottom: 0;
}

.analysis-page textarea {
    width: 100%;
    min-height: 120px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
    outline: none;
    margin-bottom: 12px;
}

.analysis-page textarea:focus { border-color: var(--accent); }

.analysis-page .search-btn {
    width: 100%;
    justify-content: center;
    background: var(--accent);
    border-color: var(--accent);
}

.analysis-page .search-btn:hover:not(:disabled) {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
}

.analysis-page .search-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Replaces the search box in the viewer build. */
.analysis-page .search-panel-hint {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
    padding: 4px 2px;
}


.analysis-page #searchModal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 2000;
    padding: 40px;
}

.analysis-page .modal-content-reader {
    background: #fff;
    max-width: 900px;
    margin: 0 auto;
    height: 100%;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}

.analysis-page .search-modal-content {
    max-width: 980px;
    height: min(760px, 88vh);
}

.analysis-page .search-results {
    overflow-y: auto;
    padding: 0;
    font-size: 14px;
}

.analysis-page .search-loading,
.analysis-page .search-empty {
    display: grid;
    gap: 8px;
    min-height: 220px;
    place-items: center;
    padding: 40px;
    color: var(--muted);
    text-align: center;
}

.analysis-page .search-loading small,
.analysis-page .search-empty small {
    display: block;
    color: var(--muted-soft);
}

.analysis-page .info-loading {
    text-align: center;
    color: var(--muted);
}

.analysis-page .info-error {
    color: var(--error);
}

.analysis-page .search-summary {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    border-bottom: 1px solid #e8ecef;
    background: #fafbfc;
    color: #3f4650;
}

.analysis-page .search-summary span {
    color: var(--muted);
    font-size: 13px;
}

.analysis-page .search-result-list {
    display: grid;
}

.analysis-page .search-result-item {
    display: grid;
    gap: 8px;
    width: 100%;
    border-bottom: 1px solid #e8ecef;
    background: #fff;
    color: inherit;
    padding: 16px 18px;
    text-align: left;
}

.analysis-page .search-result-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.analysis-page .result-tradition {
    display: inline-block;
    background: #111;
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
}

.analysis-page .result-score {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 650;
}

.analysis-page .score-high { background: #d4edda; color: #155724; }
.analysis-page .score-medium { background: #fff3cd; color: #856404; }
.analysis-page .score-low { background: #f8d7da; color: #721c24; }

.analysis-page .search-result-meta {
    color: var(--muted);
    font-size: 12px;
}

.analysis-page .result-text {
    display: block;
    color: #3f4650;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow: visible;
}

.analysis-page .result-text mark {
    background: #fff3c4;
    border-radius: 3px;
    padding: 0 2px;
}

.analysis-page .chunk-text {
    min-height: 1.55em;
}

.analysis-page .chunk-text-empty {
    color: var(--error);
    font-style: italic;
}

/* ==========================================================================
   Graphs Page
   ========================================================================== */


.graph-area {
    position: relative;
    background: #fafafa;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    min-height: 0;
}

.graph-canvas {
    width: 100%;
    height: 100%;
    min-height: 0;
}

.graph-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--muted);
    font-size: 14px;
}

.graph-rail #graphInfoContent {
    padding: 16px;
    font-size: 13px;
}

.graph-info-empty {
    color: var(--muted);
    font-size: 14px;
}

.graph-info-panel table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.graph-info-panel th, .graph-info-panel td { text-align: left; padding: 6px 0; border-bottom: 1px solid #f0f0f0; vertical-align: top; }
.graph-info-panel th { font-weight: 600; color: #4a4a4a; width: 35%; padding-right: 8px; }
.graph-info-panel td { color: #2c3e50; width: 65%; }
.graph-info-panel h3 { margin: 0 0 10px 0; color: #5e4b8b; }

/* Text fields stacked single-column: label heading over its value. Description
   has no label — it leads straight with the text. */
.graph-info-desc { margin: 0 0 12px; color: #2c3e50; line-height: 1.5; }
.graph-info-field { margin-bottom: 10px; }
.graph-info-label { font-weight: 600; color: #4a4a4a; margin-bottom: 2px; }
.graph-info-value { color: #2c3e50; line-height: 1.45; }

.graph-edge-tooltip {
    z-index: 1000;
    display: none;
}

.graph-node-tooltip {
    z-index: 1000;
    display: none;
    max-width: 260px;
    padding: 10px 12px;
    white-space: normal;
}

.graph-node-tooltip-desc {
    margin-top: 4px;
    color: rgba(241, 243, 245, 0.78);
    font-size: 11.5px;
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

@media (max-width: 980px) {
    /* Narrow: app-shell becomes an ordinary scrolling document. */
    body.has-main-navbar {
        height: auto;
        overflow: visible;
    }

    .analysis-page.container,
    .graph-page.container,
    .corpus-page.container,
    .geography-page.container,
    .motifs-page.container {
        flex: none;
        overflow: visible;
    }

    .workspace {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        flex: none;
    }

    .geography-page .geo-workspace {
        flex: none;
    }

    .library-sidebar {
        max-height: 420px;
    }

    .geography-page .map-frame {
        height: 70vh;
        min-height: 360px;
    }

    .analysis-page .plot-canvas {
        flex: none;
        height: 560px;
        min-height: 480px;
    }

    .rail-body {
        overflow-y: visible;
    }

    .graph-area {
        min-height: 560px;
    }

    .about-page {
        flex: none;
        overflow-y: visible;
    }

    .motif-def {
        max-width: none;
    }
}

@media (max-width: 760px) {
    :root {
        --page-gutter: 16px;
        --page-pad-y: 16px;
    }

    .corpus-page .reader-content {
        padding: 22px 22px 44px;
        font-size: 16px;
    }
}

/* ==========================================================================
   Motifs
   ========================================================================== */

.motifs-page .workspace {
    grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
}

.motifs-sidebar {
    gap: 10px;
}

/* TMI browse dropdown: the lettered chapters are headers over their nested
   division1-3 headings, so weight them bold to stand out from the indented rows. */
#motifsChapter option.opt-chapter {
    font-weight: 700;
}

.motifs-tabs {
    display: flex;
    gap: 6px;
}

.motifs-tab {
    flex: 1;
    padding: 7px 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    background: #f3f5f8;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    line-height: 1.2;
}

.motifs-tab.active {
    color: #3a5e86;
    background: #e2edf0;
    border-color: #c7d9e6;
}

/* Contrasting hover, matching the motif-link chips. */
.motifs-tab:hover {
    color: #fff;
    background: #4f7096;
    border-color: #4f7096;
}
.motifs-tab:hover .motifs-tab-count { color: #fff; opacity: 0.85; }

.motifs-tab-count {
    display: block;
    font-size: 10px;
    font-weight: 500;
    opacity: 0.8;
}

.motifs-search,
.motifs-chapter {
    width: 100%;
    padding: 8px 10px;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
}

.motifs-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
}

.motifs-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    /* Indent each hierarchy level to render the list as a tree. */
    padding-left: calc(10px + var(--depth, 0) * 13px);
    text-align: left;
    background: none;
    border: 0;
    border-bottom: 1px solid #eef1f4;
    cursor: pointer;
    font-size: 13px;
}

.motifs-item.active { background: #e2edf0; }
/* Contrast hover, matching the nav tabs and link chips: the whole row flips to
   the accent blue with white text (overrides .active, same specificity). The
   :hover compound on the name beats the .category / .duplicate name colours. */
.motifs-item:hover { background: #4f7096; }
.motifs-item:hover .motifs-item-id,
.motifs-item:hover .motifs-item-name,
.motifs-item.category:hover .motifs-item-name,
.motifs-item:hover .motifs-item-badge { color: #fff; }
.motifs-item:hover .motifs-item-badge { opacity: 0.85; }
/* Selection is shown by .active, and a click leaves the item focused so the
   first ↑/↓ press would otherwise promote it to :focus-visible and paint a
   stray ring where .active no longer is. These lists are driven by click and
   arrow keys with selection shown by .active, so drop the focus ring entirely
   (the nav menu and sidebar lists all share this behaviour). */
.nav-links > a:focus,
.library-tree .tradition-title:focus,
.library-tree .tradition-pick:focus,
.library-tree .document-button:focus,
.motifs-item:focus { outline: none; }

.motifs-item-id {
    flex: 0 0 auto;
    font-weight: 700;
    color: #5b7da6;
    font-variant-numeric: tabular-nums;
}

.motifs-item-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #222;
}

.motifs-item-badge {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--muted-soft);
}

.motifs-more {
    padding: 10px;
    font-size: 12px;
    color: var(--muted);
    text-align: center;
}

/* Detail panel */
.motifs-detail {
    min-width: 0;
    overflow-y: auto;
}

.motif-detail-inner {
    padding: 24px 32px 48px;
}

.motif-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    /* A long name wraps within its own column, staying right of the code —
       never dropping onto a line below it. */
    flex-wrap: nowrap;
    /* The gap to whatever follows the title lives here, once — a note plaque
       (duplicate / redirect) or the first section. Their own margins collapse
       with this, so nothing needs its own top margin. */
    margin-bottom: 16px;
}

.motif-code {
    flex: 0 0 auto;   /* the code keeps its width; the name yields */
    font-weight: 700;
    font-size: 18px;
    color: #3a5e86;
    background: #e2edf0;
    padding: 2px 10px;
    border-radius: 6px;
}

.motif-name {
    flex: 1 1 auto;   /* TMI/ATU: take the remaining width and wrap inside it */
    min-width: 0;
    margin: 0;
    font-size: 22px;
    color: #2a3340;
}

.motif-chapter {
    margin: 6px 0 18px;
    color: var(--muted);
    font-size: 13px;
}

/* English name + Russian sub-title stacked as one column, so the sub-title's
   left edge lines up with the name (not the code chip). */
.motif-name-col {
    flex: 1 1 auto;   /* Berezkin: same wrapping column, holds name + subtitle */
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Russian original name shown as a faint sub-title under the (English) name. */
.motif-subtitle {
    color: #a2abb4;
    font-size: 16px;
    font-style: italic;
}

/* Russian original definition, shown faint below the English one. The compound
   selector out-specifies `.motif-text` (declared later), so the color sticks. */
.motif-text.motif-text-rus {
    color: #a2abb4;
    font-style: italic;
    font-size: 0.94em;
}

/* Motif definitions read better at a limited measure: cap at 4/5 of the pane. */
.motif-def {
    max-width: 80%;
}

/* mapsofmyths thematic classification (type · group). */
.motif-taxonomy { color: #3f4650; line-height: 1.5; }
/* Chapter trails the taxonomy: faded (matching the Russian name/definition)
   and italic. When it is the only classification it renders in the normal
   style instead (no .motif-taxonomy-chapter wrapper). */
.motif-taxonomy-chapter { color: #a2abb4; font-style: italic; }

/* Tradition-level distribution: collapsible per-region breakdown. */
.motif-dist { display: flex; flex-direction: column; gap: 2px; }
.motif-dist-region > summary {
    display: flex; justify-content: space-between; cursor: pointer;
    padding: 5px 8px; border-radius: 6px; list-style: none;
}
.motif-dist-region > summary::-webkit-details-marker { display: none; }
.motif-dist-region > summary:hover { background: #f3f6f5; }
.motif-dist-region > summary::before { content: "▸"; color: var(--muted); display: inline-block; width: 14px; }
.motif-dist-region[open] > summary::before { content: "▾"; }
.motif-dist-name { flex: 1; }
.motif-dist-count {
    font-variant-numeric: tabular-nums; color: var(--accent-dark, #1f7a6f);
    background: #e9f5f3; border-radius: 9px; padding: 1px 8px; font-size: 12px;
    margin-left: 12px;
}
/* Left pad = summary padding-left (8px) + marker box (14px), so the tradition
   list lines up with the start of the region label text, not the marker. A
   wider right pad keeps the wrapped names off the pane edge. */
.motif-dist-traditions { color: var(--muted); font-size: 13px; line-height: 1.5; padding: 2px 84px 8px 22px; }

/* ATU attestations grouped by region: one "People: citation" per line, aligned
   under the region label (same left pad as the tradition list above). */
.motif-att-list { list-style: none; margin: 0; padding: 2px 40px 8px 22px; }
.motif-att-item { font-size: 13px; line-height: 1.55; color: var(--muted); }
.motif-att-people { color: var(--text, #2a2f36); font-weight: 600; }
.motif-att-cite { color: var(--muted); }

/* Source bibliography (areasofmyths.com): collapsible list per macro-area,
   reusing the distribution accordion look. */
.motif-bib { display: flex; flex-direction: column; gap: 2px; }
.motif-bib-area > summary {
    display: flex; justify-content: space-between; cursor: pointer;
    padding: 5px 8px; border-radius: 6px; list-style: none;
}
.motif-bib-area > summary::-webkit-details-marker { display: none; }
.motif-bib-area > summary:hover { background: #f3f6f5; }
.motif-bib-area > summary::before { content: "▸"; color: var(--muted); display: inline-block; width: 14px; }
.motif-bib-area[open] > summary::before { content: "▾"; }
.motif-bib-region { flex: 1; }
.motif-bib-count {
    font-variant-numeric: tabular-nums; color: var(--muted);
    font-size: 12px; margin-left: 12px;
}
.motif-bib-list { margin: 0; padding: 2px 40px 4px 22px; list-style: none; }
.motif-bib-list li { font-size: 13px; line-height: 1.5; color: #2a2f36; margin-bottom: 8px; }
.motif-bib-list li:last-child { margin-bottom: 0; }
.motif-bib-author { font-weight: 600; color: #2a3340; }
.motif-bib-year { color: var(--muted); font-variant-numeric: tabular-nums; }
.motif-bib-title { color: #55606b; }
.motif-bib-unresolved { color: var(--muted); font-style: italic; }
.motif-bib-status { color: #5b82b3; text-decoration: none; }
.motif-bib-status:hover { text-decoration: underline; }
/* Hover a citation for a gray rounded pill; click copies it to the clipboard.
   Negative margins let the pill bleed into the list padding without shifting text. */
.motif-bib-item { cursor: pointer; border-radius: 6px; padding: 3px 8px; margin-left: -8px; margin-right: -8px; transition: background-color 0.12s ease; }
.motif-bib-item:hover { background-color: #f3f6f5; }  /* same as the macro-area hover */
.motif-bib-item.copied { background-color: #dbe7db; }

.motif-section { margin: 18px 0; }

.motif-section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6ea69e;
    margin-top: 34px;
    margin-bottom: 7px;
}

/* Collapsed-by-default section (Source text notes): the summary reads as the
   section title with a rotating caret; the body is hidden until opened. */
.motif-section-collapsible > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
}
.motif-section-collapsible > summary::-webkit-details-marker { display: none; }
/* Caret sits at the end of the title, larger, and rotates when open. */
.motif-section-collapsible > summary::after {
    content: "\25b8"; /* ▸ */
    font-size: 13px;
    line-height: 1;
    color: #9bb8b2;
    transition: transform 0.18s ease;
}
.motif-section-collapsible[open] > summary::after { transform: rotate(90deg); }
/* The body's reveal on open is driven from JS (bindCollapsible) so it replays on
   every toggle, not just the first. */

.motif-text {
    margin: 0;
    line-height: 1.55;
    color: #2a2f36;
}
.motif-range { color: var(--muted); font-variant-numeric: tabular-nums; }
/* ATU Wikidata enrichment: multilingual names + Wikipedia links. */
.motif-altnames { display: flex; flex-direction: column; gap: 4px; }
.motif-altname { font-size: 13px; color: #2a2f36; }
.motif-altname-lang { display: inline-block; min-width: 74px; color: var(--muted); font-size: 13px; }
.motif-altname-lang[title] { cursor: help; text-decoration: underline dotted var(--border);
    text-underline-offset: 3px; }
.motif-altname-lang[title]:hover, .motif-altname-lang[title]:focus {
    color: var(--text); text-decoration-color: var(--muted); outline: none; }
.motif-wiki-list { margin: 0; padding: 0 0 0 2px; list-style: none; }
.motif-wiki-list li { font-size: 13px; margin-bottom: 4px; }
.motif-wiki-list a { color: #3a5e86; text-decoration: none; }
.motif-wiki-list a:hover { text-decoration: underline; }
/* ATU Uther apparatus: litvar / provenance citation lists. */
.motif-cite-list { margin: 0; padding-left: 18px; }
.motif-cite-list li { line-height: 1.5; font-size: 13px; color: #2a2f36; margin-bottom: 3px; }
/* Decoded reference-work abbreviations: link where a page exists, else a hover tooltip. */
.motif-abbr { text-decoration: none; border-bottom: 1px dotted #9bb0c2; cursor: help; }
abbr.motif-abbr { color: inherit; }
a.motif-abbr { color: #3a5e86; cursor: pointer; }
a.motif-abbr:hover { border-bottom-color: #3a5e86; }
/* ATU example tales (Ashliman AFT), metadata only. */
/* Also-known-as / Wikipedia / Ashliman as up-to-three equal columns at the page
   foot; an absent section drops out and the rest grow to fill its place. */
.motif-cols { display: flex; gap: 24px; align-items: flex-start; margin-top: 34px; }
.motif-col { flex: 1 1 0; min-width: 0; }
.motif-col .motif-section-title { margin-top: 0; }

.motif-tales { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.motif-tale { font-size: 13.5px; }
.motif-tale a { color: #3a5e86; text-decoration: none; }
.motif-tale a:hover { text-decoration: underline; }
.motif-wiki-lang { color: var(--muted-soft); font-size: 13px; text-transform: uppercase; }
.motif-redirect { font-size: 12.5px; color: var(--muted); background: var(--surface-2, #f1f3f5);
    border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; margin: 0 0 14px; }
.motif-oldids { display: flex; flex-wrap: wrap; gap: 6px; }
.motif-oldid { font-size: 12px; color: var(--muted); background: var(--surface-2, #f1f3f5);
    border: 1px solid var(--border); border-radius: 4px; padding: 1px 7px; }
/* Concordance codes: the same small grey chips as "Earlier ATU numbers", flowing
   inline after the catalogue label. */
.motif-conc-codes { display: inline-flex; flex-wrap: wrap; gap: 5px; vertical-align: middle; }

.motif-links {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.motif-link {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    max-width: 320px;
    padding: 4px 9px;
    font-size: 12.5px;
    text-decoration: none;
    color: #41506a;
    background: #eef3f7;
    border: 1px solid #dde5ec;
    border-radius: 14px;
}

.motif-link:hover { background: #4f7096; border-color: #4f7096; color: #fff; }
.motif-link:hover .motif-link-id,
.motif-link:hover .motif-link-name,
.motif-link:hover .motif-link-rel { color: #fff; }
.motif-link.missing { opacity: 0.55; }

.motif-link-id { font-weight: 700; color: #5b7da6; }

.motif-link-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Direction marker (⇔ ⇐ ⇒) on merged motif↔ATU relation chips. */
.motif-link-rel { flex: none; color: #8a97a6; font-weight: 700; cursor: help; }
/* Provenance badge on a link resolved via the AaTh->ATU concordance. */
.motif-link-src {
    flex: none;
    padding: 0 5px;
    font-size: 10px;
    font-weight: 600;
    line-height: 15px;
    color: #7a6a3f;
    background: #efe7d2;
    border-radius: 8px;
    letter-spacing: 0.02em;
}

/* Heuristic textual-parallel chips — a tentative suggestion layer, set apart from
   curated links by a dashed edge, a muted purple tint and a similarity badge. */
.motif-parallel { background: #f3f0f7; border-style: dashed; border-color: #d8cfe4; color: #55496a; }
.motif-parallel:hover { background: #6a5a86; border-color: #6a5a86; color: #fff; }
.motif-parallel .motif-link-id { color: #7a6aa0; }
.motif-parallel:hover .motif-link-id,
.motif-parallel:hover .motif-link-name { color: #fff; }
.motif-parallel .motif-link-src { color: #6a5a86; background: #e6dff0; }
.motif-parallel-sim { flex: none; font-size: 10.5px; font-weight: 600; color: #9186a6; }
.motif-parallel:hover .motif-parallel-sim { color: #e8e2f2; }
.motif-parallel-note { margin: 0 0 8px; font-size: 11.5px; color: #b1ada4; font-style: italic; }

/* Near-identical band: solid green edge marks the near-certain "same motif". */
.motif-parallel.motif-parallel-near { background: #e5f0e7; border-style: solid; border-color: #bcd8c3; color: #35533f; }
.motif-parallel.motif-parallel-near:hover { background: #4f7a5b; border-color: #4f7a5b; color: #fff; }
.motif-parallel-near .motif-link-id { color: #4a7a58; }
.motif-parallel-near:hover .motif-link-id,
.motif-parallel-near:hover .motif-link-name { color: #fff; }
.motif-parallel-near .motif-link-src { color: #4f7a5b; background: #d3e6d8; }
.motif-parallel-near .motif-parallel-sim { color: #6f9179; }
.motif-parallel-near:hover .motif-parallel-sim { color: #dfeee2; }

/* Curated reasoned-parallel groups: a theme heading + a confidence tag over each
   chip row. */
.motif-parallel-group { margin-bottom: 12px; }
.motif-parallel-theme { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; font-size: 12.5px; font-weight: 600; color: #4a4066; }
.motif-parallel-conf { flex: none; padding: 0 7px; font-size: 10px; font-weight: 600; line-height: 15px; border-radius: 8px; cursor: help; letter-spacing: 0.02em; }
.motif-parallel-conf.conf-high { color: #3f6b4a; background: #dcecdf; }
.motif-parallel-conf.conf-medium { color: #7a6a3f; background: #efe7d2; }

/* Transitively inferred cross-links: dotted teal edge + a "via <bridge>" badge. */
.motif-parallel.motif-inferred { background: #e6f0f2; border-style: dotted; border-color: #bcd6da; color: #35525a; }
.motif-parallel.motif-inferred:hover { background: #4a7480; border-color: #4a7480; color: #fff; }
.motif-inferred .motif-link-id { color: #3f6f7a; }
.motif-inferred:hover .motif-link-id,
.motif-inferred:hover .motif-link-name { color: #fff; }
.motif-inferred .motif-link-src { color: #3f6f7a; background: #d3e6ea; }
.motif-inferred-via { flex: none; font-size: 10px; font-weight: 600; color: #7a95a0; cursor: help; }
.motif-inferred:hover .motif-inferred-via { color: #dcecef; }

/* Semantic (embedding) look-alikes: solid indigo edge marks the BGE-M3 layer. */
.motif-parallel.motif-parallel-sem { background: #eaecfa; border-style: solid; border-color: #c8ccef; color: #3b3f75; }
.motif-parallel.motif-parallel-sem:hover { background: #4a4f96; border-color: #4a4f96; color: #fff; }
.motif-parallel-sem .motif-link-id { color: #4a4f96; }
.motif-parallel-sem:hover .motif-link-id,
.motif-parallel-sem:hover .motif-link-name { color: #fff; }
.motif-parallel-sem .motif-link-src { color: #4a4f96; background: #dcdef5; }
.motif-parallel-sem .motif-parallel-sim { color: #8085b8; }
.motif-parallel-sem:hover .motif-parallel-sim { color: #e6e8f7; }

/* An ATU summary's "(1)…(N)" forms rendered as an ordered list. */
.motif-summary-list { margin: 6px 0 0; padding-left: 22px; }
.motif-summary-list li { margin-bottom: 6px; }
.motif-summary-list li:last-child { margin-bottom: 0; }

/* Broad TMI category rows in the list, shown bold. */
.motifs-item.category .motifs-item-name { font-weight: 700; color: #1f3a4d; }

/* Substantive motifs: badge in a brighter accent. Motifs with a definition get a
   ✓ instead (see badge-check). */
.motifs-item-badge.is-sub { color: var(--accent); font-weight: 600; }

/* Control bar above a tree: filter dropdown + "Flat list" toggle. */
.motif-controls { display: flex; align-items: center; gap: 14px; margin: 2px 0 12px; }
.motif-controls .motif-filter { margin: 0; }
.flat-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--muted);
    cursor: pointer;
}
.flat-toggle input { cursor: pointer; }

/* Motif-filter dropdown and the rows each tier hides. */
.motif-filter {
    margin: 2px 0 12px;
    padding: 4px 8px;
    font-size: 12.5px;
    color: #2a2f36;
    background: #fff;
    border: 1px solid #dde5ec;
    border-radius: 6px;
    cursor: pointer;
}
.motif-tree.filter-def .motifs-item.filterable:not(.f-def),
.motif-tree.filter-sub .motifs-item.filterable:not(.f-sub),
.motif-tree.filter-atu .motifs-item.filterable:not(.f-atu) { display: none; }

/* Root/chapter badge counts, and a motif's descendant count, follow the active
   tier — the displayed number swaps with the filter. */
.tier-badge::after,
.desc-count::after { content: attr(data-all); }
.motif-tree.filter-def .tier-badge::after,
.motif-tree.filter-def .desc-count::after { content: attr(data-def); }
.motif-tree.filter-sub .tier-badge::after,
.motif-tree.filter-sub .desc-count::after { content: attr(data-sub); }
.motif-tree.filter-atu .tier-badge::after,
.motif-tree.filter-atu .desc-count::after { content: attr(data-atu); }

/* Index overview dashboard. */

.overview-title { font-size: 21px; font-weight: 700; margin: 2px 0 12px; color: #1f3a4d; }

/* Scholarly header above the stat cards: description + authorship + sources.
   Plain — no panel; it sits on the page background. */
.overview-intro {
    margin: 0 0 20px;
    padding: 22px 26px;
    background: #f5f7f9;
    border-left: 3px solid #d7dee5;
    border-radius: 4px;
}
.ov-blurb { font-size: 13px; line-height: 1.55; color: #2f3d47; margin: 0 0 18px; }
.ov-blurb em { font-style: italic; color: #1f6b60; }
.ov-meta { display: flex; flex-direction: column; gap: 4px; }
.ov-meta-row { display: grid; grid-template-columns: 96px 1fr; gap: 10px; font-size: 12px; align-items: baseline; }
.ov-meta-k { color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; font-size: 10.5px; }
.ov-cite { color: #3a4652; }
.ov-cite em { font-style: italic; }
.ov-srcs { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.ov-src { color: var(--accent, #2a9d8f); text-decoration: none; }
.ov-src:hover { text-decoration: underline; }

.stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
    gap: 10px;
    margin-bottom: 24px;
}
.stat-card { padding: 10px 12px; text-align: center; background: #f5f7f9; border: 1px solid #e6ecf1; border-radius: 8px; }
.stat-num { font-size: 20px; font-weight: 700; color: #1f3a4d; }
.stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }

.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.chart-card { padding: 10px 12px; background: #fff; border: 1px solid #e6ecf1; border-radius: 8px; }
.chart-title { font-size: 13px; font-weight: 600; color: #41506a; margin-bottom: 6px; }
.chart { width: 100%; }

/* Overview charts split into colour-coded sections: geography (teal), themes &
   content (azure blue), dataset diagnostics (violet). The three accents are
   balanced in OKLCH — common lightness (L≈0.58) and chroma (C≈0.105), differing
   only in hue — so no one section reads louder than the others. The section accent
   tints its heading and each card's top. */
.chart-section { margin-top: 24px; }
.chart-section:first-of-type { margin-top: 0; }
/* Each section carries its accent (bars, heading, card top) plus a matching link
   trio — link ink, dotted-underline tint, hover ink — so a chart's clickable
   labels read in the same hue as the section they sit in. */
.chart-section--geography { --sec-accent: #008e80; --sec-link: #007769; --sec-link-soft: #9ec8c0; --sec-link-strong: #006255; }
.chart-section--content { --sec-accent: #467eb6; --sec-link: #2a669f; --sec-link-soft: #a8c1da; --sec-link-strong: #125289; }
.chart-section--diagnostics { --sec-accent: #856bae; --sec-link: #6f5397; --sec-link-soft: #c2b8d7; --sec-link-strong: #5b3f82; }
.chart-section-title {
    font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    margin: 0 0 11px; padding-left: 9px; border-left: 3px solid var(--sec-accent);
    color: var(--sec-accent);
}
.chart-section .chart-card { border-top: 2px solid var(--sec-accent); }

/* Pure-CSS "by region" bars (region palette; no Plotly). */
.csbars { display: flex; flex-direction: column; gap: 5px; padding: 6px 2px 2px; }
.csbar-row { display: grid; grid-template-columns: 148px 1fr 50px; align-items: center; gap: 9px; font-size: 11.5px; line-height: 1.1; }
/* Hover: brighten the row's label, value and bar, and deepen the empty track's
   grey a touch so the whole bar reads as active. */
.csbar-row:hover .csbar-lab { color: #16303f; }
.csbar-row:hover .csbar-val { color: #1f3a4d; font-weight: 700; }
.csbar-row:hover .csbar-fill { filter: brightness(1.3) saturate(0.78) sepia(0.28); }
/* Dark-blue (themes & content) bars gain saturation on hover instead of losing it. */
.chart-section--content .csbar-row:hover .csbar-fill { filter: brightness(1.28) saturate(1.15) sepia(0.2); }
/* "Motifs by chapter": the light "all" fill gets only a slight lift on hover
   (a touch lighter and more saturated); the dark substantive overlay reacts more. */
#ovChapters .csbar-row:hover .csbar-fill:not(.csbar-over) { filter: brightness(1.05) saturate(1.25); }
.csbar-row:hover .csbar-track { background: #e2e6ec; }
.csbar-lab { color: #41506a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Clickable chart labels read as links: the section's link ink + a dotted
   underline, solid on hover. Colours come from the parent .chart-section-- vars. */
a.csbar-lab.chart-link { color: var(--sec-link, #157f73); text-decoration: underline dotted; text-decoration-color: var(--sec-link-soft, #93cabf); text-underline-offset: 2px; cursor: pointer; }
a.csbar-lab.chart-link:hover { color: var(--sec-link-strong, #0f6a60); text-decoration-style: solid; }
.csbar-row:hover a.csbar-lab.chart-link { color: var(--sec-link-strong, #0f6a60); }
.csbar-track { position: relative; height: 13px; background: #eef1f4; border-radius: 4px; overflow: hidden; }
.csbar-fill { display: block; height: 100%; border-radius: 4px; transition: width 0.35s ease; }
.csbar-over { position: absolute; top: 0; left: 0; }   /* substantive subset over the "all" bar */
.csbar-val { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
/* 100% stacked bar (part-to-whole) + its legend. */
.csstack { display: flex; gap: 2px; height: 15px; border-radius: 4px; overflow: hidden; margin: 8px 0 0; }
.csstack-seg { height: 100%; }
.cslegend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 2px; font-size: 11.5px; color: var(--muted); }
.cslegend span { display: inline-flex; align-items: center; gap: 6px; }
.cslegend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.cslegend b { color: #41506a; font-weight: 700; }
/* Region colour dot on the per-type attestation accordion. */
.region-dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: 8px; flex: 0 0 auto; align-self: center; }

.motif-dup-note {
    margin: 0 0 14px;
    padding: 8px 10px;
    font-size: 12.5px;
    color: #8a3024;
    background: #fdecea;
    border: 1px solid #f5c6c0;
    border-radius: 8px;
}
/* The sibling link stays inline plain text, not a pill chip. */
.motif-dup-note .motif-link {
    display: inline;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    color: #8a3024;
    font-weight: 600;
    text-decoration: underline;
}
.motif-dup-note .motif-link:hover { color: #6f261d; background: none; }

.motif-source-link { font-size: 12.5px; color: #41506a; word-break: break-all; }

/* Citations (references + per-culture), each linkable to its source book. */
.motif-cites { margin: 0; padding-left: 18px; }
.motif-cites li { line-height: 1.5; font-size: 14px; color: #2a2f36; }
.motif-cite.linked { color: #2f6f9f; text-decoration: none; }
.motif-cite.linked:hover { text-decoration: underline; }

/* External-link indicator: smaller and lighter than the link text. */
.ext-arrow { font-size: 0.75em; color: #9aa7b3; }

/* Raw source notes shown verbatim at the end — set apart as a quote. */
.motif-notes-raw {
    font-size: 12.5px;
    color: #55606b;
    white-space: pre-wrap;
    padding: 24px 30px;
    background: #f5f7f9;
    border-left: 3px solid #d7dee5;
    border-radius: 4px;
}

/* TMI lineage tree on the detail page: chapter -> parents -> motif -> children,
   reusing the sidebar row look (.motifs-item) with per-level indentation. */
.motif-tree {
    margin: 0 0 18px;
    border: 1px solid #eef1f4;
    border-radius: 8px;
    overflow: hidden;
}
.motif-tree-row { text-decoration: none; color: inherit; }
.motif-tree-row.current { background: #e2edf0; }
.motif-tree-row.current .motifs-item-id,
.motif-tree-row.current .motifs-item-name { font-weight: 700; color: #1f3a4d; }
.motif-subtree-more { padding: 6px 10px; font-size: 12px; color: var(--muted-soft); }

.motif-areas {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.motif-area {
    padding: 3px 9px;
    font-size: 12px;
    background: #f3f1ec;
    border: 1px solid #e6e1d6;
    border-radius: 12px;
    color: #7c715c;
}

.motif-area.unresolved {
    background: #f3f4f6;
    border-color: #e3e6ea;
    color: var(--muted-soft);
    font-variant-numeric: tabular-nums;
}

.motif-empty { color: var(--muted-soft); }

/* Plotly sets `cursor: move` inline on the drag layer in pan mode; force the
   crosshair. Heatmap/distribution stay in zoom mode where it is already a
   crosshair, so this is a no-op for them. */
#scatter-plot .nsewdrag {
    cursor: crosshair !important;
}