/* ============================================================================
   course-widgets/dose-response-slider.css -- widget #25 (EDUCATION-ONLY)

   an illustrative input slider that drives coupled readout bars. theme-token
   colors only. the accent encodes "this readout rises with the input"; the
   muted tone encodes "this one falls" -- color is meaning here, so the two
   tokens are intentional, not decorative hard-coded hex.
   ============================================================================ */

.cw-drs { display: block; font-size: 0.9rem; }

.cw-drs-note {
    font-size: 0.75rem;
    color: var(--cw-muted);
    font-style: italic;
    text-align: center;
    padding: 10px 16px;
    margin-bottom: 16px;
    border-radius: 10px;
    background: var(--cw-accent-soft);
    border: 1px solid var(--cw-border);
}

.cw-drs-input { margin-bottom: 20px; }
.cw-drs-input-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}
.cw-drs-input-label { font-weight: 600; color: var(--cw-text); }
.cw-drs-input-value { font-weight: 700; color: var(--cw-accent); }

.cw-drs-slider {
    width: 100%;
    accent-color: var(--cw-accent);
    cursor: pointer;
}

.cw-drs-bars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 14px;
    align-items: end;
}

.cw-drs-bar { display: flex; flex-direction: column; align-items: center; gap: 6px; }

.cw-drs-bar-value { font-size: 0.82rem; font-weight: 700; color: var(--cw-text); }

.cw-drs-bar-track {
    width: 100%;
    height: 120px;
    display: flex;
    align-items: flex-end;
    border-radius: 8px 8px 0 0;
    background: var(--cw-bg);
    border: 1px solid var(--cw-border);
    border-bottom: 2px solid var(--cw-border);
}

.cw-drs-bar-fill {
    width: 100%;
    border-radius: 8px 8px 0 0;
    min-height: 2px;
    background: var(--cw-accent);
    transition: height .3s ease;
}
.cw-drs-bar--down .cw-drs-bar-fill { background: var(--cw-muted); }

.cw-drs-bar-label {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--cw-text);
    text-align: center;
    line-height: 1.3;
}
.cw-drs-bar-tag {
    font-size: 0.66rem;
    color: var(--cw-muted);
    text-align: center;
    line-height: 1.25;
}

.cw-drs-reduced .cw-drs-bar-fill { transition: none; }
@media (prefers-reduced-motion: reduce) { .cw-drs-bar-fill { transition: none; } }