/* Tufte-inspired styles — zero framework dependencies */

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Palatino', 'Palatino Linotype', 'Georgia', 'Times New Roman', serif;
    font-size: 15px;
    line-height: 1.6;
    color: #111;
    padding: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
    overflow-x: hidden;
}

/* ── Typography ── */
h1 {
    font-size: 1.8rem;
    font-weight: 400;
    margin: 0.5rem 0 0.25rem;
    letter-spacing: -0.02em;
}
h2 {
    font-size: 1.15rem;
    font-weight: 400;
    font-style: italic;
    margin: 1.5rem 0 0.5rem;
    color: #333;
}
p { margin: 0 0 0.75rem; }
small, .small { font-size: 0.85em; }
.muted { color: #888; }
.danger { color: #b33; }

a { color: #333; text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: #000; }

/* ── Single-label structural note (amber, matches taxonomy-only badge) ── */
.single-label-note {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.8em;
    color: #9a6a00;
    background: #fdf6e3;
    border: 1px solid #e8d9a8;
    border-radius: 3px;
    padding: 0.45rem 0.6rem;
    margin: 0 0 0.75rem;
    max-width: 620px;
}

/* ── Hint text (instructional prompts between sections) ── */
.hint {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.82em;
    color: #999;
    margin: -0.25rem 0 0.75rem;
    font-style: italic;
}

/* ── Dataset Selector ── */
#datasetSelector {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.5rem 0 1rem;
}

.dataset-panel {
    flex: 1 1 0;
    min-width: 180px;
    max-width: 320px;
    padding: 0.6rem 0.8rem;
    border: 1px solid #ddd;
    border-left: 3px solid #ddd;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.dataset-panel:hover {
    border-color: #aaa;
    border-left-color: #888;
    background: #fafafa;
}
.dataset-panel-active {
    border-left-color: #333;
    background: #f8f8f8;
}
.dataset-panel-active:hover {
    border-left-color: #333;
}
.dataset-panel-disabled {
    cursor: default;
    border-style: dashed;
    border-left-style: solid;
    background: #fcfcfc;
}
.dataset-panel-disabled:hover {
    border-color: #ddd;
    border-left-color: #ddd;
    background: #fcfcfc;
}
.dataset-panel-disabled .dataset-panel-name { color: #888; }
.dataset-panel-disabled .dataset-panel-meta { color: #999; }
.dataset-panel-name {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.9em;
    font-weight: 600;
    color: #222;
    margin-bottom: 0.15rem;
}
.dataset-panel-meta {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.78em;
    color: #666;
    line-height: 1.3;
}
.dataset-panel-license {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.72em;
    color: #999;
    margin-top: 0.1rem;
}

/* ── Layout ── */
#wordRow {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    margin: 0 0 2rem;
}
#wordCol {
    flex: 2;
    min-width: 300px;
    display: flex;
    flex-direction: column;
}
#breakdownCol {
    flex: 1;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    padding-top: 2.5rem;
}

#mainContent { margin: 0 0 2rem; }

/* ── Tables ── */
table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    word-wrap: break-word;
    font-size: 0.9em;
}
th, td {
    text-align: left;
    padding: 0.3rem 0.5rem;
    border: none;
    border-bottom: 1px solid #e8e8e8;
}
th {
    font-weight: 600;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.85em;
    color: #555;
}
.table-responsive { overflow-x: auto; }

/* Results table: prompt + surprise + categories columns */
#results th:first-child,
#results td:first-child {
    width: 60%;
}
.surprise-col-header {
    width: 10%;
}
.cat-col-header {
    width: 30%;
}
.cat-cell {
    white-space: normal;
    vertical-align: top;
}

/* ── Virtual Scroll Container ── */
#resultsVirtual {
    max-height: 600px;
    overflow-y: auto;
    position: relative;
}
#resultsVirtual .virtual-spacer {
    width: 1px;
    pointer-events: none;
}
#resultsVirtual thead {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
}

/* ── Sortable Headers ── */
.sortable-header {
    cursor: pointer;
    user-select: none;
}
.sortable-header:hover {
    color: #111;
}
.sort-indicator {
    font-size: 0.8em;
    color: #888;
}

/* ── Surprise column ── */
.surprise-cell {
    vertical-align: middle;
    white-space: nowrap;
}
.surprise-bar {
    display: inline-block;
    height: 6px;
    background: #333;
    margin-right: 4px;
    border-radius: 1px;
    vertical-align: middle;
}
.surprise-label {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.72em;
    color: #888;
}

/* ── Forms & Controls ── */
input[type="text"],
input[type="search"] {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.9em;
    border: 1px solid #ccc;
    border-radius: 2px;
    padding: 0.3rem 0.5rem;
    width: 100%;
}
input[type="text"]:focus,
input[type="search"]:focus {
    outline: none;
    border-color: #888;
}

label {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.9em;
    cursor: pointer;
}

button, .btn {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.85em;
    background: none;
    border: 1px solid #888;
    padding: 0.3rem 0.75rem;
    cursor: pointer;
    border-radius: 2px;
    color: #333;
}
button:hover, .btn:hover {
    border-color: #333;
    color: #000;
}

/* ── Filter Controls ── */
#filterControlsRow {
    display: flex;
    gap: 1rem;
    margin-top: 0.75rem;
    align-items: flex-end;
    max-width: 400px;
}
.wordsearch-box {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.wordsearch-box label {
    font-size: 0.82em;
    margin-bottom: 2px;
    color: #666;
}

#filterSummary {
    font-size: 0.82em;
    color: #888;
    margin-top: 0.5rem;
    font-family: system-ui, -apple-system, sans-serif;
}

/* ── Category Pills ── */
#categoryPills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0.25rem 0 0.5rem;
}

.pill {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    border: 1px solid #bbb;
    background: #f5f5f5;
    color: #666;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.82em;
    cursor: pointer;
    margin: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    line-height: 1.4;
}
.pill:hover {
    border-color: #888;
    color: #333;
}
.pill-include {
    background: #333;
    color: #fff;
    border-color: #333;
}
.pill-include:hover {
    background: #222;
    border-color: #222;
    color: #fff;
}
.pill-exclude {
    background: #fff;
    color: #b33;
    border-color: #b33;
    text-decoration: line-through;
}
.pill-exclude:hover {
    border-color: #900;
    color: #900;
}

/* Small pills for results table */
.pill-sm {
    display: inline-block;
    padding: 0.08rem 0.35rem;
    border-radius: 8px;
    border: 1px solid #ccc;
    background: #f8f8f8;
    color: #555;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.72em;
    margin: 0.1rem 0.15rem 0.1rem 0;
    line-height: 1.4;
    white-space: nowrap;
}
.pill-none {
    color: #aaa;
    border-color: #ddd;
    background: #fafafa;
}

/* ── Word Category Breakdown ── */
#wordBreakdownPanel {
    min-height: 0;
}
.breakdown-header {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.9em;
    margin-bottom: 0.5rem;
}

/* ── Visualizations ── */
#categoryStripContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0.5rem 0 0.5rem;
}
.strip-panel {
    flex: 0 0 auto;
}

#exclusivitySection { margin: 0.5rem 0 1rem; }

#cooccurrenceSection { margin: 0.5rem 0 1rem; }

#wordFreqSection {
    margin: 0.75rem 0;
}
#wordFreqSection canvas {
    display: block;
}

#bitmapSection { margin: 1rem 0 1.5rem; }
#bitmapContainer {
    max-height: 400px;
    overflow-y: auto;
    border-bottom: 1px solid #e8e8e8;
}
#bitmapContainer canvas { display: block; }

#comboSection { margin: 1rem 0; }

canvas { max-width: 100%; }

/* ── Loading ── */
#loading {
    text-align: center;
    padding: 3rem 1rem;
    font-style: italic;
    color: #888;
}
#loading-debug {
    font-size: 0.8rem;
    color: #aaa;
    margin-top: 0.5rem;
    font-family: system-ui, -apple-system, sans-serif;
}

/* ── Details/Summary ── */
details { margin-bottom: 0.75rem; }
summary {
    cursor: pointer;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.9em;
    color: #555;
}
summary:hover { color: #111; }

/* ── Search Highlight ── */
mark {
    background-color: #ffff80;
    padding: 0;
}

/* ── Results Section ── */
#matchingLinesSection {
    margin-top: 1.5rem;
}

/* ── Rosetta Stone Table ── */
.rosetta-table {
    table-layout: auto;
    width: auto;
    max-width: 100%;
    font-size: 0.82em;
}
.rosetta-table th,
.rosetta-table td {
    padding: 0.25rem 0.6rem;
    white-space: nowrap;
    border-bottom: 1px solid #e8e8e8;
}
.rosetta-ds-header {
    font-size: 0.85em;
    color: #555;
    text-align: center;
}
.rosetta-concept {
    font-weight: 600;
    color: #333;
}
.rosetta-empty {
    color: #ccc;
    text-align: center;
}
.rosetta-ds-header-taxonomy {
    color: #9a6a00;
}
.taxonomy-badge {
    display: inline-block;
    margin-top: 2px;
    padding: 1px 5px;
    font-size: 0.72em;
    font-weight: 600;
    font-style: normal;
    color: #9a6a00;
    background: #fdf6e3;
    border: 1px solid #e8d9a8;
    border-radius: 3px;
    white-space: nowrap;
}
.timeline-scroll { overflow-x: auto; max-width: 100%; }

#rosettaSection { margin: 1rem 0 0.5rem; }
#driftSection { margin: 0.5rem 0 1rem; }
#driftSection h3 {
    font-size: 1rem;
    font-weight: 400;
    font-style: italic;
    color: #333;
    margin: 1rem 0 0.25rem;
}

/* ── Order Toggle ── */
.order-toggle {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.72em;
    color: #888;
    cursor: pointer;
    border-bottom: 1px dashed #aaa;
    padding: 0 0.15rem;
    margin-left: 0.3rem;
    white-space: nowrap;
    font-style: normal;
    font-weight: 400;
}
.order-toggle:hover {
    color: #333;
    border-bottom-color: #333;
}

/* ── Xref Indicator ── */
.xref-indicator {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.72em;
    color: #888;
    cursor: pointer;
    border-bottom: 1px dashed #aaa;
    padding: 0 0.15rem;
    margin-left: 0.3rem;
    white-space: nowrap;
}
.xref-indicator:hover {
    color: #333;
    border-bottom-color: #333;
}
.fuzzy-indicator {
    color: #a86;
    border-bottom-color: #c9a;
}
.fuzzy-indicator:hover {
    color: #754;
    border-bottom-color: #754;
}
.semantic-indicator {
    color: #86a;
    border-bottom-color: #a9c;
}
.semantic-indicator:hover {
    color: #545;
    border-bottom-color: #545;
}

/* ── Xref Panel ── */
#xrefPanel {
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    border-left: 3px solid #333;
    background: #fafafa;
}
#xrefPanel h2 {
    margin-top: 0;
}

/* ── Consensus Section ── */
#consensusSection { margin: 0.5rem 0 1rem; }

/* ── Category coherence / Annotation outliers tables ──
 * Same pattern as .rosetta-table: table-layout:auto with short columns kept to
 * a single line, wrapped in .table-responsive so a narrow viewport scrolls the
 * table horizontally instead of forcing single-word headers ("Concept", "n")
 * to wrap into a cramped multi-line stack. */
#coherenceSection, #outliersSection { margin: 0.5rem 0 1rem; }

.coherence-table, .outliers-table {
    table-layout: auto;
    width: auto;
    min-width: 100%;
}
.coherence-table th, .outliers-table th { white-space: nowrap; }
.coherence-table td:nth-child(1), .coherence-table td:nth-child(2),
.outliers-table td:nth-child(4) { white-space: nowrap; }
.coherence-table td:nth-child(4), .outliers-table td:nth-child(1),
.outliers-table td:nth-child(2), .outliers-table td:nth-child(3) {
    white-space: normal;
}
.coherence-table td:nth-child(4) { min-width: 260px; }
.outliers-table td:nth-child(1) { min-width: 260px; }
.coherence-table .concept-examples { font-size: 0.92em; color: #555; }
.coherence-table .concept-examples + .concept-examples { display: block; margin-top: 0.2rem; }
.outliers-table td:nth-child(2), .outliers-table td:nth-child(3) { vertical-align: top; }

/* ── Responsive ── */
@media (max-width: 700px) {
    #wordRow {
        flex-direction: column;
    }
    #wordCol, #breakdownCol {
        min-width: 0;
        width: 100%;
    }
    #breakdownCol { padding-top: 0; }
    body { font-size: 14px; padding: 1rem; }
    table { font-size: 0.82rem; }
    #filterControlsRow { max-width: 100%; }
    .pill { font-size: 0.75em; padding: 0.15rem 0.4rem; }
    #bitmapContainer { max-height: 250px; }
    #datasetSelector { flex-direction: column; }
    .dataset-panel { max-width: none; }
    #resultsVirtual { max-height: 400px; }
}