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

/* ── Base field: monospace inputs ───────────────────────────────────────────── */
.base-input {
    font-family:    'SFMono-Regular', 'Consolas', 'Menlo', monospace;
    font-size:      1.0625rem;
    letter-spacing: 0.03em;
    width:          100%;
    padding:        0.65rem 0.9rem;
    border:         2px solid var(--border, #E2E4E8);
    border-radius:  8px;
    background:     #fff;
    color:          var(--text, #0D1B2A);
    outline:        none;
    transition:     border-color 0.18s, box-shadow 0.18s;
    box-sizing:     border-box;
}
.base-input:focus {
    border-color: var(--accent, #E8472F);
    box-shadow:   0 0 0 3px rgba(232, 98, 42, 0.12);
}
.base-input.is-error {
    border-color: #d93025;
    box-shadow:   0 0 0 3px rgba(217, 48, 37, 0.12);
}
.base-input::placeholder {
    color:          var(--muted, #64748B);
    letter-spacing: 0;
    font-size:      0.9rem;
}

/* ── Four field cards: colour-coded left border ──────────────────────────── */
.base-fields-grid {
    display:        grid;
    grid-template-columns: 1fr 1fr;
    gap:            16px;
    margin-bottom:  20px;
}

@media (max-width: 600px) {
    .base-fields-grid {
        grid-template-columns: 1fr;
    }
}

.base-field-card {
    background:   #fff;
    border:       1.5px solid var(--border, #E2E4E8);
    border-radius: 12px;
    padding:      16px 16px 14px;
    border-left-width: 4px;
    transition:   box-shadow 0.18s;
    position:     relative;
}
.base-field-card:focus-within {
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

/* Colour-coded left borders */
.base-field-card.field-binary  { border-left-color: #2563eb; } /* blue */
.base-field-card.field-octal   { border-left-color: #d97706; } /* orange */
.base-field-card.field-decimal { border-left-color: #16a34a; } /* green */
.base-field-card.field-hex     { border-left-color: #dc2626; } /* red */

/* ── Field label row ─────────────────────────────────────────────────────── */
.base-field-label-row {
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    margin-bottom:  8px;
    gap:            8px;
}
.base-field-label {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size:   0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color:       var(--text, #0D1B2A);
}
.base-field-badge {
    font-size:    0.6875rem;
    font-weight:  600;
    padding:      2px 7px;
    border-radius: 999px;
    letter-spacing: 0.03em;
}
.field-binary  .base-field-badge { background: #eff6ff; color: #2563eb; }
.field-octal   .base-field-badge { background: #fffbeb; color: #d97706; }
.field-decimal .base-field-badge { background: #f0fdf4; color: #16a34a; }
.field-hex     .base-field-badge { background: #fef2f2; color: #dc2626; }

/* ── Input + copy row ────────────────────────────────────────────────────── */
.base-input-row {
    display: flex;
    gap:     8px;
    align-items: stretch;
}
.base-input-wrap {
    flex: 1;
    position: relative;
}

/* ── Copy button ──────────────────────────────────────────────────────────── */
.copy-btn {
    flex-shrink: 0;
    display:     flex;
    align-items: center;
    gap:         4px;
    padding:     0 12px;
    background:  var(--bg, #FFFFFF);
    border:      1.5px solid var(--border, #E2E4E8);
    border-radius: 8px;
    font-size:   0.8125rem;
    font-weight: 600;
    color:       var(--muted, #64748B);
    cursor:      pointer;
    transition:  background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
    min-width:   54px;
    justify-content: center;
}
.copy-btn:hover {
    background:   #fff;
    border-color: var(--accent, #E8472F);
    color:        var(--accent, #E8472F);
}
.copy-btn.copied {
    background:   #f0fdf4;
    border-color: #16a34a;
    color:        #16a34a;
}

/* ── Error hint ────────────────────────────────────────────────────────────── */
.field-error-hint {
    font-size:  0.75rem;
    color:      #d93025;
    margin-top: 5px;
    min-height: 1em;
    line-height: 1.4;
}

/* ── Controls strip ──────────────────────────────────────────────────────── */
.converter-controls {
    display:     flex;
    flex-wrap:   wrap;
    gap:         18px 28px;
    align-items: center;
    padding:     14px 16px;
    background:  var(--bg, #FFFFFF);
    border:      1.5px solid var(--border, #E2E4E8);
    border-radius: 10px;
    margin-bottom: 20px;
}

/* ── Bit-length pills ────────────────────────────────────────────────────── */
.bit-length-group {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-wrap:   wrap;
}
.bit-length-label {
    font-size:   0.8125rem;
    font-weight: 600;
    color:       var(--muted, #64748B);
    white-space: nowrap;
}
.bit-btns {
    display: flex;
    gap:     5px;
}
.bit-btn {
    padding:       5px 13px;
    font-size:     0.8125rem;
    font-weight:   600;
    border:        1.5px solid var(--border, #E2E4E8);
    border-radius: 999px;
    background:    #fff;
    color:         var(--text, #0D1B2A);
    cursor:        pointer;
    transition:    background 0.15s, color 0.15s, border-color 0.15s;
}
.bit-btn:hover {
    border-color: var(--accent, #E8472F);
    color:        var(--accent, #E8472F);
}
.bit-btn.active {
    background:   var(--accent, #E8472F);
    border-color: var(--accent, #E8472F);
    color:        #fff;
}

/* ── Toggle switches ─────────────────────────────────────────────────────── */
.toggle-group {
    display:     flex;
    align-items: center;
    gap:         8px;
}
.toggle-label {
    font-size:   0.8125rem;
    font-weight: 600;
    color:       var(--muted, #64748B);
    cursor:      pointer;
    user-select: none;
}

/* Hidden native checkbox — custom toggle visual below */
.toggle-switch-input {
    position: absolute;
    opacity:  0;
    width:    0;
    height:   0;
}
.toggle-switch-track {
    display:        inline-flex;
    align-items:    center;
    width:          38px;
    height:         22px;
    background:     #d1d5db;
    border-radius:  999px;
    cursor:         pointer;
    position:       relative;
    transition:     background 0.2s;
    flex-shrink:    0;
}
.toggle-switch-track::after {
    content:       '';
    position:      absolute;
    left:          3px;
    width:         16px;
    height:        16px;
    border-radius: 50%;
    background:    #fff;
    transition:    transform 0.2s;
    box-shadow:    0 1px 3px rgba(0,0,0,0.2);
}
.toggle-switch-input:checked + .toggle-switch-track {
    background: var(--accent, #E8472F);
}
.toggle-switch-input:checked + .toggle-switch-track::after {
    transform: translateX(16px);
}
.toggle-switch-input:focus-visible + .toggle-switch-track {
    outline:        2px solid var(--accent, #E8472F);
    outline-offset: 2px;
}

/* ── Sample value pills ──────────────────────────────────────────────────── */
.sample-values-row {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         8px;
    margin-bottom: 4px;
}
.sample-label {
    font-size:   0.8125rem;
    font-weight: 600;
    color:       var(--muted, #64748B);
    white-space: nowrap;
}
.sample-pills {
    display:  flex;
    flex-wrap: wrap;
    gap:       6px;
}
.sample-pill {
    padding:       4px 12px;
    font-size:     0.8125rem;
    font-family:   'SFMono-Regular', 'Consolas', monospace;
    font-weight:   600;
    border:        1.5px solid var(--border, #E2E4E8);
    border-radius: 999px;
    background:    #fff;
    color:         var(--text, #0D1B2A);
    cursor:        pointer;
    transition:    background 0.15s, border-color 0.15s, color 0.15s;
}
.sample-pill:hover {
    background:   var(--accent, #E8472F);
    border-color: var(--accent, #E8472F);
    color:        #fff;
}

/* ── Negative value note ─────────────────────────────────────────────────── */
.negative-note {
    font-size:    0.8125rem;
    color:        var(--muted, #64748B);
    margin-top:   4px;
    padding:      8px 12px;
    background:   #fffbeb;
    border:       1px solid #fde68a;
    border-radius: 8px;
    display:      none;
}
.negative-note.visible {
    display: block;
}

/* ── Feedback thanks ─────────────────────────────────────────────────────── */
.feedback-thanks {
    display: none;
}

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