/* HSK Level Analyzer
   ------------------------------------------------------------------ */

/* HSK level color scale (green = easy → red = hard), plus beyond/unknown. */
:root {
    --hsk-1: #16a34a;
    --hsk-2: #65a30d;
    --hsk-3: #ca8a04;
    --hsk-4: #ea580c;
    --hsk-5: #dc2626;
    --hsk-6: #9333ea;
    --hsk-beyond: #6b7280;
    --hsk-unknown: #cbd5e1;
}

.hsk-input {
    font-size: 1.1rem;
    line-height: 1.7;
    resize: vertical;
}

/* --- Summary stat cards --- */
.hsk-stat {
    background: var(--bs-tertiary-bg, #f1f3f5);
    border-radius: .5rem;
    padding: .6rem .25rem;
    height: 100%;
}

.hsk-stat-num {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--bs-primary, #0d6efd);
}

.hsk-stat-label {
    font-size: .75rem;
    color: var(--bs-secondary-color, #6c757d);
}

/* --- Stacked distribution bar --- */
.hskbar {
    display: flex;
    width: 100%;
    height: 22px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--hsk-unknown);
}

.hskbar .seg {
    height: 100%;
    min-width: 1px;
    transition: filter .15s ease;
}

.hskbar .seg:hover {
    filter: brightness(1.1);
}

/* --- Color swatches in legend / table --- */
.hsk-swatch {
    display: inline-block;
    width: .85rem;
    height: .85rem;
    border-radius: 3px;
    vertical-align: -1px;
    margin-right: .35rem;
}

.hsk-legend .hsk-swatch {
    margin-left: .5rem;
}

/* --- Color-coded reading view --- */
.hsk-reading {
    font-size: 1.35rem;
    line-height: 2.1;
    margin-bottom: 0;
    word-break: break-word;
}

.hsk-reading .hw {
    padding: .05em .15em;
    border-radius: 4px;
    border-bottom: 3px solid transparent;
    cursor: help;
}

.hsk-word-cell {
    font-size: 1.15rem;
    font-weight: 600;
}

/* Shared color mapping: tints for reading-view words, solids for swatches/bar. */
.hw.hsk-1 { border-bottom-color: var(--hsk-1); background: color-mix(in srgb, var(--hsk-1) 14%, transparent); }
.hw.hsk-2 { border-bottom-color: var(--hsk-2); background: color-mix(in srgb, var(--hsk-2) 14%, transparent); }
.hw.hsk-3 { border-bottom-color: var(--hsk-3); background: color-mix(in srgb, var(--hsk-3) 14%, transparent); }
.hw.hsk-4 { border-bottom-color: var(--hsk-4); background: color-mix(in srgb, var(--hsk-4) 14%, transparent); }
.hw.hsk-5 { border-bottom-color: var(--hsk-5); background: color-mix(in srgb, var(--hsk-5) 16%, transparent); }
.hw.hsk-6 { border-bottom-color: var(--hsk-6); background: color-mix(in srgb, var(--hsk-6) 16%, transparent); }
.hw.hsk-beyond { border-bottom-color: var(--hsk-beyond); background: color-mix(in srgb, var(--hsk-beyond) 16%, transparent); }
.hw.hsk-unknown { border-bottom-style: dashed; border-bottom-color: var(--hsk-5); }

.seg.hsk-1, .hsk-swatch.hsk-1 { background-color: var(--hsk-1); }
.seg.hsk-2, .hsk-swatch.hsk-2 { background-color: var(--hsk-2); }
.seg.hsk-3, .hsk-swatch.hsk-3 { background-color: var(--hsk-3); }
.seg.hsk-4, .hsk-swatch.hsk-4 { background-color: var(--hsk-4); }
.seg.hsk-5, .hsk-swatch.hsk-5 { background-color: var(--hsk-5); }
.seg.hsk-6, .hsk-swatch.hsk-6 { background-color: var(--hsk-6); }
.seg.hsk-beyond, .hsk-swatch.hsk-beyond { background-color: var(--hsk-beyond); }
.seg.hsk-unknown, .hsk-swatch.hsk-unknown { background-color: var(--hsk-unknown); }

.hsk-dist-table td, .hsk-dist-table th { padding-top: .35rem; padding-bottom: .35rem; }

/* --- Dark mode --- */
[data-bs-theme="dark"] .hsk-stat {
    background: rgba(255, 255, 255, .06);
}

[data-bs-theme="dark"] :root,
[data-bs-theme="dark"] {
    --hsk-unknown: #475569;
}

[data-bs-theme="dark"] .hsk-reading .hw.hsk-unknown {
    border-bottom-color: var(--hsk-5);
}

/* --- Word tooltip (pinyin + meaning), shown on hover and tap --- */
.hsk-tip {
    position: fixed;
    z-index: 1080;
    max-width: min(22rem, 92vw);
    background: #1f2937;
    color: #fff;
    font-size: .9rem;
    line-height: 1.45;
    padding: .4rem .6rem;
    border-radius: .4rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
    pointer-events: none; /* never intercept the taps/hovers meant for words */
    word-break: break-word;
}

.hsk-tip[hidden] {
    display: none;
}

.hsk-tip::after { /* little arrow pointing at the word */
    content: "";
    position: absolute;
    left: var(--arrow-x, 50%);
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border: 6px solid transparent;
}

.hsk-tip[data-placement="top"]::after {
    top: 100%;
    border-top-color: #1f2937;
}

.hsk-tip[data-placement="bottom"]::after {
    bottom: 100%;
    border-bottom-color: #1f2937;
}

.hsk-reading .hw:focus-visible {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: 1px;
}

[data-bs-theme="dark"] .hsk-tip {
    background: #374151;
    border: 1px solid rgba(255, 255, 255, .14);
}

[data-bs-theme="dark"] .hsk-tip[data-placement="top"]::after {
    border-top-color: #374151;
}

[data-bs-theme="dark"] .hsk-tip[data-placement="bottom"]::after {
    border-bottom-color: #374151;
}