/* data-distributions: interleaved teaching + question module.
   Shares the visual language of the other Journal Club apps
   (mirrors apps/p-values/styles.css, plus a few module-specific pieces). */

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f5f5f5;
    padding: 10px;
}

.container {
    max-width: 100%;
    margin: 0 auto;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

/* ---- Header ---- */
.main-header {
    text-align: center;
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 2px solid #e0e0e0;
}

.main-header h1 { font-size: 1.8rem; color: #232D4B; margin-bottom: 10px; }
.main-header h2 { font-size: 1.3rem; color: #E57200; margin-bottom: 10px; }
.attribution { font-size: 1rem; color: #666; margin-top: 10px; }
.date { font-size: 0.9rem; color: #888; margin-top: 5px; }

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e0e0e0;
    flex-wrap: wrap;
    gap: 12px;
}

.page-header h1 { font-size: 1.4rem; color: #232D4B; flex: 1; min-width: 200px; }

.back-link {
    color: #E57200;
    text-decoration: none;
    font-size: 0.95rem;
    padding: 8px 12px;
    border: 1px solid #E57200;
    border-radius: 4px;
    transition: background-color 0.2s;
    white-space: nowrap;
}

.back-link:hover { background-color: #E57200; color: white; }

/* ---- Progress indicator ---- */
.step-indicator {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 4px 0 18px;
    flex-wrap: wrap;
}

.step-dot {
    width: 30px;
    height: 6px;
    border-radius: 3px;
    background: #e0e0e0;
}

.step-dot.active { background: #E57200; }
.step-dot.done { background: #232D4B; }

/* ---- Intro / module landing ---- */
.intro {
    text-align: center;
    margin-bottom: 24px;
    font-size: 1rem;
    color: #555;
    padding: 0 10px;
}

.format-list {
    max-width: 640px;
    margin: 0 auto 24px;
    padding: 18px 22px;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

.format-list ol { margin: 8px 0 0 20px; }
.format-list li { margin-bottom: 6px; }

/* ---- QR code card ---- */
.qr-card {
    max-width: 320px;
    margin: 0 auto 26px;
    padding: 20px 20px 16px;
    text-align: center;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.qr-title { font-size: 1.15rem; color: #232D4B; margin-bottom: 14px; }
.qr-img { width: 230px; height: 230px; max-width: 100%; display: block; margin: 0 auto; }
.qr-caption { font-size: 0.92rem; color: #555; margin-top: 12px; }
.qr-url { font-size: 0.8rem; color: #888; word-break: break-all; margin-top: 2px; }

/* ---- Info box ---- */
.info-box {
    background-color: #e3f2fd;
    border-left: 4px solid #2196F3;
    padding: 12px 15px;
    margin-bottom: 15px;
    border-radius: 4px;
}

.info-box p { margin: 0; font-size: 0.95rem; }

/* ---- Quiz styles ---- */
.question-block {
    background-color: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 18px;
}

.question-prompt {
    font-weight: 600;
    font-size: 1.08rem;
    margin-bottom: 14px;
    color: #232D4B;
}

.options-list { display: flex; flex-direction: column; gap: 8px; }

.option-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 13px;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    background: #fff;
    transition: background-color 0.15s;
}

.option-label:hover { background-color: #eef1f4; }
.option-label input[type="radio"] { margin-top: 5px; accent-color: #E57200; }

.option-label.correct-option { background-color: #e8f5e9; border-color: #66bb6a; }
.option-label.incorrect-option { background-color: #fce4ec; border-color: #ef5350; }

.feedback {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 6px;
    font-size: 0.95rem;
    line-height: 1.5;
}

.feedback-correct { background-color: #e8f5e9; border-left: 4px solid #66bb6a; color: #2e7d32; }
.feedback-incorrect { background-color: #fce4ec; border-left: 4px solid #ef5350; color: #c62828; }

.quiz-error { color: #c62828; font-weight: 500; margin-top: 10px; }

/* ---- Interactive reveal area ---- */
.interactive {
    border-top: 2px dashed #e0e0e0;
    margin-top: 6px;
    padding-top: 18px;
}

.interactive[hidden] { display: none; }

.interactive-heading {
    font-size: 1.1rem;
    color: #232D4B;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.interactive-heading::before {
    content: '▶';
    color: #E57200;
    font-size: 0.8rem;
}

.interactive-intro {
    font-size: 0.95rem;
    color: #444;
    margin-bottom: 12px;
}

.interactive-note {
    font-size: 0.9rem;
    color: #555;
    background: #fff8f0;
    border-left: 3px solid #E57200;
    padding: 8px 12px;
    border-radius: 4px;
    margin-top: 12px;
    min-height: 1.2em;
}

/* Colored inline text keyed to the shaded regions */
.ink-tail { color: #c15400; }
.ink-null { color: #232D4B; }
.ink-benefit { color: #2e7d32; }

/* ---- Canvas ---- */
.canvas-container {
    width: 100%;
    margin: 12px 0;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px;
    overflow: hidden;
}

.canvas-container canvas { width: 100%; display: block; }

/* ---- Legend ---- */
.legend {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin: 6px 0;
    font-size: 0.85rem;
    flex-wrap: wrap;
}

.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-swatch { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }

/* ---- Controls ---- */
.controls {
    margin: 14px 0;
    padding: 14px 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.control-group {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.control-group:last-child { margin-bottom: 0; }

.control-group label { font-weight: 500; min-width: 160px; font-size: 0.95rem; }

.control-group input[type="range"] {
    flex: 1;
    min-width: 180px;
    height: 8px;
    border-radius: 5px;
    background: #ddd;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.control-group input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 24px; height: 24px; border-radius: 50%;
    background: #E57200; cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.control-group input[type="range"]::-moz-range-thumb {
    width: 24px; height: 24px; border-radius: 50%;
    background: #E57200; cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.control-group > span {
    font-weight: 600;
    color: #E57200;
    min-width: 60px;
    text-align: right;
    font-size: 1rem;
}

/* Segmented button group (e.g. the one-tailed / two-tailed selector) */
.seg { display: flex; gap: 8px; flex-wrap: wrap; }
.seg .btn { min-width: 62px; min-height: 40px; padding: 8px 16px; }
.seg .btn-secondary.active { background-color: #E57200; }

/* ---- Parameters display ---- */
.params-display {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin: 14px 0;
    flex-wrap: wrap;
}

.param-box {
    text-align: center;
    padding: 12px 18px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    background: #f8f9fa;
    min-width: 130px;
    flex: 1;
}

.param-box .param-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #888;
    margin-bottom: 4px;
}

.param-box .param-value { font-size: 1.4rem; font-weight: 700; color: #232D4B; }

/* ---- Buttons ---- */
.buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
    justify-content: center;
    align-items: center;
}

.btn {
    padding: 12px 24px;
    font-size: 1rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
    min-height: 44px;
    min-width: 120px;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-primary { background-color: #E57200; color: white; }
.btn-primary:hover { background-color: #d16500; transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
.btn-secondary { background-color: #6c757d; color: white; }
.btn-secondary:hover { background-color: #5a6268; transform: translateY(-1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---- Debrief ---- */
.summary-table {
    border-collapse: collapse;
    margin: 18px auto;
    width: 100%;
    max-width: 640px;
    font-size: 0.95rem;
}

.summary-table th, .summary-table td {
    border: 1px solid #ccc;
    padding: 12px 10px;
    text-align: left;
    vertical-align: top;
}

.summary-table thead th { background: #dfe4f0; color: #232D4B; font-weight: 700; text-align: center; }
.summary-table .is-col { background: #eef7ee; }
.summary-table .isnot-col { background: #fff3e0; }

.takeaways { max-width: 640px; margin: 20px auto; }
.takeaways li { margin-bottom: 10px; }
.takeaways strong { color: #232D4B; }

.score-line {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: #232D4B;
    margin: 10px 0 4px;
}

/* ---- Responsive ---- */
@media (min-width: 768px) {
    body { padding: 20px; }
    .container { max-width: 860px; padding: 30px; }
    .main-header h1 { font-size: 2.1rem; }
    .page-header h1 { font-size: 1.7rem; }
}

@media print {
    body { background-color: white; }
    .buttons, .controls { display: none; }
}

/* ============================================================
   data-distributions: module-specific styles
   ============================================================ */

/* ---- Teaching-page lead paragraph ---- */
.lead {
    font-size: 1rem;
    color: #444;
    margin-bottom: 14px;
}

.lead strong { color: #232D4B; }

/* ---- Two-column card row (the rule / how to check) ---- */
.card-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin: 18px 0 4px;
}

.card {
    flex: 1 1 260px;
    padding: 14px 16px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    background: #f8f9fa;
}

.card h3 {
    font-size: 1rem;
    color: #232D4B;
    margin-bottom: 8px;
}

.card ul { margin: 0 0 0 18px; }
.card li { margin-bottom: 6px; font-size: 0.93rem; }
.card.card-rule { background: #eef7ee; border-color: #a5d6a7; }
.card.card-check { background: #e3f2fd; border-color: #90caf9; }

/* ---- Tab strip (shape gallery, arrivals views) ---- */
.tab-strip {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.tab-btn {
    padding: 9px 14px;
    font-size: 0.9rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    color: #444;
    cursor: pointer;
    font-weight: 500;
    min-height: 40px;
    transition: all 0.15s;
}

.tab-btn:hover { background: #eef1f4; }

.tab-btn.active {
    background: #232D4B;
    border-color: #232D4B;
    color: #fff;
}

/* ---- Verdict / readout strip ---- */
.readout {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 14px 0;
}

.readout-box {
    flex: 1 1 220px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    background: #f8f9fa;
}

.readout-box h4 {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #888;
    margin-bottom: 6px;
    font-weight: 700;
}

.readout-box .big {
    font-size: 1.35rem;
    font-weight: 700;
    color: #232D4B;
}

.readout-box .sub { font-size: 0.86rem; color: #666; margin-top: 2px; }

/* Significance badges */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 700;
    margin-top: 6px;
}

.badge-sig { background: #e8f5e9; color: #2e7d32; border: 1px solid #66bb6a; }
.badge-nonsig { background: #fff3e0; color: #b25000; border: 1px solid #ffb74d; }

/* Test-comparison panel: one row per test */
.test-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 8px;
    border-left: 4px solid #999;
    background: #f8f9fa;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.test-row.parametric { border-left-color: #1565c0; }
.test-row.nonparametric { border-left-color: #6a1b9a; }
.test-row .test-name { font-weight: 700; color: #232D4B; min-width: 190px; }
.test-row .test-sub { font-size: 0.84rem; color: #777; font-weight: 400; display: block; }
.test-row .test-p { font-size: 1.15rem; font-weight: 700; color: #232D4B; min-width: 130px; }

/* Score bars: how often each test found the difference, out of 100 studies */
.score-bar {
    flex: 1 1 200px;
    height: 26px;
    background: #eceff1;
    border-radius: 13px;
    overflow: hidden;
    min-width: 160px;
}

.score-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 13px;
    transition: width 600ms ease-out;
}

.test-row.parametric .score-fill { background: #1565c0; }
.test-row.nonparametric .score-fill { background: #6a1b9a; }

.score-num {
    font-size: 1.35rem;
    font-weight: 700;
    color: #232D4B;
    min-width: 110px;
    text-align: right;
}

.score-num .score-of { font-size: 0.85rem; font-weight: 400; color: #777; }

/* Group summary chips */
.group-summary {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 12px 0;
}

.group-card {
    flex: 1 1 240px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    background: #fff;
}

.group-card h4 { font-size: 0.95rem; margin-bottom: 8px; }
.group-card.group-a h4 { color: #1565c0; }
.group-card.group-b h4 { color: #c15400; }
.group-card .stat-line { font-size: 0.9rem; color: #444; margin-bottom: 3px; }
.group-card .stat-line span { font-weight: 700; color: #232D4B; }

/* ---- Warning / caution callout ---- */
.caution {
    background: #fff8f0;
    border-left: 4px solid #E57200;
    padding: 12px 14px;
    border-radius: 4px;
    margin: 14px 0;
    font-size: 0.93rem;
    color: #444;
}

.caution strong { color: #b25000; }

/* ---- Impossible-region note used on Q1 ---- */
.ink-impossible { color: #c62828; font-weight: 600; }
.ink-median { color: #2e7d32; font-weight: 600; }
.ink-mean { color: #1565c0; font-weight: 600; }

/* ---- Galton board frame ---- */
.board-container {
    width: 100%;
    margin: 12px 0;
    border-radius: 8px;
    overflow: hidden;
    background: #6b4a2f;
    padding: 0;
    box-shadow: inset 0 0 22px rgba(0,0,0,0.35);
}

.board-container canvas { width: 100%; display: block; }

/* ---- Module landing: page list ---- */
.page-list { max-width: 640px; margin: 0 auto 22px; }

.page-list-item {
    display: flex;
    gap: 12px;
    align-items: baseline;
    padding: 9px 0;
    border-bottom: 1px solid #eee;
}

.page-list-item:last-child { border-bottom: none; }

.page-list-num {
    font-weight: 700;
    color: #E57200;
    min-width: 22px;
}

.page-list-text { font-size: 0.95rem; color: #444; }
.page-list-text strong { color: #232D4B; }

/* ---- Responsive tweaks ---- */
@media (max-width: 600px) {
    .control-group label { min-width: 120px; font-size: 0.9rem; }
    .test-row .test-name { min-width: 100%; }
}

/* ============================================================
   Board page layout (page 1)
   ============================================================
   The Galton board is about 1.33x as tall as it is wide, so on a
   laptop a full-width board pushes the sliders off screen. On wide
   viewports the board and its controls sit side by side, which uses
   the spare horizontal room and lets the board stay short enough to
   be seen whole. On phones they stack, and the board shrinks to fit
   whatever height is left (see _availableHeight in galton-board.js).
   ============================================================ */

.board-layout {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: stretch;
}

.board-col,
.side-col { width: 100%; min-width: 0; }

.board-container canvas { margin: 0 auto; }

@media (min-width: 900px) {
    .container-wide { max-width: 1100px; }

    .board-layout {
        flex-direction: row;
        align-items: flex-start;
        gap: 22px;
    }

    .board-col {
        width: min(48vw, 560px);
        flex: 0 0 auto;
    }

    .side-col {
        flex: 1 1 0;
        width: auto;
        position: sticky;
        top: 12px;
    }

    /* Narrower labels so a slider and its readout still fit the column. */
    .side-col .control-group label { min-width: 118px; }
    .side-col .control-group input[type="range"] { min-width: 130px; }
    .side-col .buttons { justify-content: flex-start; }
}

/* On a phone the board competes with the page chrome above it for vertical
   room: every pixel of header spent is 0.75 of a pixel of board width lost,
   because the board is 1.33x as tall as it is wide. These rules apply only to
   the board page. */
@media (max-width: 899px) {
    .container-wide { padding: 12px; }

    .container-wide .page-header {
        margin-bottom: 10px;
        padding-bottom: 10px;
        gap: 8px;
    }

    .container-wide .page-header h1 { font-size: 1.15rem; }
    .container-wide .step-indicator { margin: 2px 0 8px; }
    .container-wide .board-layout { gap: 10px; }
    .container-wide .controls { margin: 8px 0; padding: 10px 12px; }
    .container-wide .control-group { margin-bottom: 8px; }
}