/* ════════════════════════════════════════════════════════════════════════════
   RECATOOLS — Speed Converter — style.css
   Tool-specific overrides only.
   Base styles live in /assets/css/tool-page.css.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Main converter panel ─────────────────────────────────────────────────── */
.converter-row {
    display:     flex;
    align-items: center;
    gap:         0.75rem;
    flex-wrap:   wrap;
    margin-bottom: 1.25rem;
}

.converter-field {
    display:        flex;
    flex-direction: column;
    gap:            0.375rem;
    flex:           1 1 180px;
    min-width:      0;
}

.converter-field label {
    font-size:   0.75rem;
    font-weight: 600;
    color:       var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.converter-input {
    width:         100%;
    padding:       0.75rem 1rem;
    border:        1.5px solid var(--border);
    border-radius: 8px;
    font-size:     1.375rem;
    font-weight:   700;
    font-family:   'IBM Plex Sans', sans-serif;
    color:         var(--text);
    background:    var(--card-bg, #ffffff);
    transition:    border-color 0.15s;
    box-sizing:    border-box;
    -moz-appearance: textfield;
}
.converter-input::-webkit-outer-spin-button,
.converter-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.converter-input:focus {
    outline:      none;
    border-color: var(--accent);
}
.converter-input[readonly] {
    background: var(--bg, #FFFFFF);
    color:      var(--accent);
    cursor:     default;
}

.converter-select {
    width:         100%;
    padding:       0.625rem 1rem;
    border:        1.5px solid var(--border);
    border-radius: 8px;
    font-size:     0.9375rem;
    font-weight:   600;
    font-family:   'IBM Plex Sans', sans-serif;
    color:         var(--text);
    background:    var(--card-bg, #ffffff);
    cursor:        pointer;
    appearance:    none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6760' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 0.875rem center;
    padding-right: 2.5rem;
    transition:    border-color 0.15s;
    box-sizing:    border-box;
}
.converter-select:focus {
    outline:      none;
    border-color: var(--accent);
}

/* ── Swap button ──────────────────────────────────────────────────────────── */
.swap-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           42px;
    height:          42px;
    border:          1.5px solid var(--border);
    border-radius:   999px;
    background:      var(--card-bg, #ffffff);
    font-size:       1.125rem;
    cursor:          pointer;
    color:           var(--muted);
    transition:      background 0.15s, color 0.15s, border-color 0.15s;
    flex-shrink:     0;
    align-self:      flex-end;
    margin-bottom:   0.375rem;   /* aligns with input bottom */
}
.swap-btn:hover {
    background:    var(--accent);
    color:         #fff;
    border-color:  var(--accent);
}
.swap-btn:focus-visible {
    outline:       2px solid var(--accent);
    outline-offset: 2px;
}

/* ── Full conversion table ────────────────────────────────────────────────── */
.conv-table-wrap {
    margin-top:    1.5rem;
    overflow-x:    auto;
}

.conv-table-wrap h3 {
    font-size:     0.8125rem;
    font-weight:   700;
    color:         var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.625rem;
}

.conv-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       0.9375rem;
}

.conv-table tr {
    border-bottom: 1px solid var(--border);
}
.conv-table tr:last-child {
    border-bottom: none;
}
.conv-table .conv-row-active {
    background: rgba(232, 98, 42, 0.06);
}

.conv-td-from,
.conv-td-eq,
.conv-td-to {
    padding: 0.55rem 0.5rem;
    vertical-align: middle;
}

.conv-td-from {
    color:      var(--muted);
    font-size:  0.875rem;
    min-width:  130px;
}
.conv-td-eq {
    color:      var(--muted);
    font-size:  0.875rem;
    width:      24px;
    text-align: center;
}
.conv-td-to {
    font-weight: 600;
    color:       var(--text);
}
.conv-td-to strong {
    color:    var(--accent);
    font-size: 1.0625rem;
}

.conv-unit {
    font-size:   0.75rem;
    font-weight: 500;
    color:       var(--muted);
    margin-left: 0.2em;
}

.conv-table-empty {
    text-align: center;
    color:      var(--muted);
    font-size:  0.875rem;
    padding:    1rem;
}

/* ── Real-world reference scale ───────────────────────────────────────────── */
.speed-scale-wrap {
    margin-top: 2rem;
}

.speed-scale-wrap h3 {
    font-size:      0.8125rem;
    font-weight:    700;
    color:          var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom:  0.875rem;
}

.speed-scale {
    position:    relative;
    margin-top:  1.75rem;
    margin-bottom: 0.5rem;
}

/* Track bar */
.scale-track {
    position:      relative;
    height:        10px;
    background:    linear-gradient(to right, #c8f5c8 0%, #ffe9a0 45%, #ffc580 70%, #ff8585 100%);
    border-radius: 999px;
    overflow:      visible;
}

/* Tick marks & labels */
.scale-ticks {
    display:         flex;
    justify-content: space-between;
    position:        relative;
    margin-top:      0.375rem;
}

.scale-tick {
    display:    flex;
    flex-direction: column;
    align-items:    center;
    font-size:  0.6875rem;
    color:      var(--muted);
    font-weight: 600;
    white-space: nowrap;
}
.scale-tick-line {
    width:  1px;
    height: 6px;
    background: var(--muted);
    margin-bottom: 3px;
}

/* Marker (user value) */
#scale-marker {
    position:      absolute;
    top:           50%;
    transform:     translate(-50%, -50%);
    width:         16px;
    height:        16px;
    background:    var(--accent);
    border:        2.5px solid #fff;
    border-radius: 50%;
    box-shadow:    0 0 0 2px var(--accent);
    display:       none;
    z-index:       2;
}

#scale-marker-label {
    position:    absolute;
    top:         -2rem;
    transform:   translateX(-50%);
    font-size:   0.6875rem;
    font-weight: 700;
    color:       var(--accent);
    white-space: nowrap;
    display:     none;
    background:  var(--card-bg, #fff);
    padding:     0.15rem 0.4rem;
    border-radius: 4px;
    border:      1px solid var(--accent);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
    .converter-row {
        flex-direction: column;
        align-items:    stretch;
    }
    .swap-btn {
        align-self: center;
        margin:     0;
    }
    .converter-input {
        font-size: 1.125rem;
    }
    .conv-td-from {
        min-width: 100px;
        font-size: 0.8125rem;
    }
    .conv-td-to strong {
        font-size: 0.9375rem;
    }
}

/* cache-buster: 2026-05-24T05:06:05Z */