/* ============================================================================
   gradient-scale.css -- widget #26 (continuous axis with colored zones)

   chrome (track bg, axis text) uses theme tokens. zone/marker *tones* use a
   small fixed semantic palette because color encodes meaning here (this is the
   sanctioned data-encoding exception). tone hexes are the library's standard
   good/amber/red signal colors.
   ============================================================================ */

.cw-gradient-scale { display: block; }

.cw-gs-axis-label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.06em;
    color: var(--cw-muted);
    margin-bottom: 10px;
}

.cw-gs-plot { position: relative; }

/* zones bar */
.cw-gs-track {
    position: relative;
    height: 30px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--cw-accent-soft);
    border: 1px solid var(--cw-border);
}

.cw-gs-zone {
    position: absolute;
    top: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.cw-gs-zone-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--cw-text);
    white-space: nowrap;
    padding: 0 6px;
}

/* markers above the track */
.cw-gs-markers {
    position: relative;
    height: 46px;
}

.cw-gs-marker {
    position: absolute;
    bottom: 0;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 120px;
}

.cw-gs-marker-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--cw-text);
    text-align: center;
    line-height: 1.25;
    margin-bottom: 3px;
    white-space: nowrap;
}

.cw-gs-marker-pin {
    width: 0; height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid currentColor;
}

/* min / max scale row */
.cw-gs-scale {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 0.74rem;
    color: var(--cw-muted);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* --- semantic tones (color encodes meaning: data-encoding exception) ------ */
/* zones get a translucent fill so labels stay legible */
.cw-gs-zone.cw-gs-tone-accent { background: color-mix(in srgb, var(--cw-accent) 38%, transparent); }
.cw-gs-zone.cw-gs-tone-good   { background: rgba(16, 185, 129, 0.38); }
.cw-gs-zone.cw-gs-tone-amber  { background: rgba(245, 158, 11, 0.38); }
.cw-gs-zone.cw-gs-tone-red    { background: rgba(239, 68, 68, 0.38); }

/* markers (pin + label) color = solid tone via currentColor */
.cw-gs-marker.cw-gs-tone-accent { color: var(--cw-accent); }
.cw-gs-marker.cw-gs-tone-good   { color: #10b981; }
.cw-gs-marker.cw-gs-tone-amber  { color: #f59e0b; }
.cw-gs-marker.cw-gs-tone-red    { color: #ef4444; }