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

/* ── Mode tab pills ──────────────────────────────────────────────────────────── */
.mode-tabs {
    display:        flex;
    flex-wrap:      wrap;
    gap:            0.5rem;
    margin-bottom:  1.5rem;
}

.mode-tab {
    padding:        0.4rem 1rem;
    border-radius:  999px;
    border:         1.5px solid var(--border, #E2E4E8);
    background:     transparent;
    color:          var(--text-secondary, #64748B);
    font-size:      0.8125rem;
    font-weight:    600;
    cursor:         pointer;
    transition:     background 0.15s, color 0.15s, border-color 0.15s;
    font-family:    'IBM Plex Sans', sans-serif;
    white-space:    nowrap;
    line-height:    1.4;
}

.mode-tab:hover {
    border-color:   var(--accent, #E8472F);
    color:          var(--accent, #E8472F);
}

.mode-tab.active {
    background:     var(--accent, #E8472F);
    border-color:   var(--accent, #E8472F);
    color:          #fff;
}

/* ── Tab panels ─────────────────────────────────────────────────────────────── */
.tab-panel {
    display: none;
}
.tab-panel.active {
    display: block;
}

/* ── Calc input rows ────────────────────────────────────────────────────────── */
.calc-row {
    display:        flex;
    align-items:    center;
    flex-wrap:      wrap;
    gap:            0.625rem;
    margin-bottom:  1rem;
}

.calc-label {
    font-size:      0.875rem;
    font-weight:    600;
    color:          var(--text-secondary, #64748B);
    white-space:    nowrap;
}

.calc-input {
    width:          120px;
    padding:        0.5rem 0.75rem;
    border:         1.5px solid var(--border, #E2E4E8);
    border-radius:  8px;
    font-size:      1rem;
    font-family:    'IBM Plex Sans', sans-serif;
    color:          var(--text, #0D1B2A);
    background:     #fff;
    transition:     border-color 0.15s;
    -moz-appearance: textfield;
}

.calc-input::-webkit-inner-spin-button,
.calc-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.calc-input:focus {
    outline:        none;
    border-color:   var(--accent, #E8472F);
}

.calc-input.wide {
    width: 160px;
}

/* ── Result display ─────────────────────────────────────────────────────────── */
.result-display {
    margin:         1.25rem 0 0.5rem;
    padding:        1.25rem 1.5rem;
    background:     #fff7f4;
    border:         1.5px solid #f5cbb8;
    border-radius:  14px;
    text-align:     center;
}

.result-value {
    font-size:      2.25rem;
    font-weight:    700;
    color:          var(--accent, #E8472F);
    font-family:    'IBM Plex Serif', serif;
    line-height:    1.1;
    letter-spacing: -0.01em;
}

.result-label {
    font-size:      0.8125rem;
    color:          var(--text-secondary, #64748B);
    margin-top:     0.25rem;
}

/* ── Formula line ───────────────────────────────────────────────────────────── */
.formula-line {
    font-family:    'SFMono-Regular', 'Consolas', 'Menlo', monospace;
    font-size:      0.8rem;
    color:          var(--text-secondary, #64748B);
    background:     var(--bg, #FFFFFF);
    border-radius:  6px;
    padding:        0.4rem 0.75rem;
    margin-top:     0.5rem;
    text-align:     center;
    min-height:     1.8em;
    word-break:     break-word;
}

/* ── Direction indicator for % change ──────────────────────────────────────── */
.dir-increase { color: #16a34a; }
.dir-decrease { color: #dc2626; }
.dir-neutral  { color: var(--text-secondary, #64748B); }

/* ── Swap button (% Change tab) ─────────────────────────────────────────────── */
.swap-btn {
    padding:        0.35rem 0.75rem;
    border-radius:  8px;
    border:         1.5px solid var(--border, #E2E4E8);
    background:     #fff;
    color:          var(--text-secondary, #64748B);
    font-size:      0.875rem;
    cursor:         pointer;
    transition:     border-color 0.15s, color 0.15s;
    font-family:    'IBM Plex Sans', sans-serif;
    font-weight:    600;
}

.swap-btn:hover {
    border-color:   var(--accent, #E8472F);
    color:          var(--accent, #E8472F);
}

/* ── Tip & Split result rows ────────────────────────────────────────────────── */
.tip-results {
    margin-top:     1.25rem;
    border:         1.5px solid var(--border, #E2E4E8);
    border-radius:  14px;
    overflow:       hidden;
}

.tip-result-row {
    display:        flex;
    justify-content: space-between;
    align-items:    center;
    padding:        0.75rem 1.25rem;
    font-size:      0.9375rem;
    border-bottom:  1px solid var(--border, #E2E4E8);
}

.tip-result-row:last-child {
    border-bottom:  none;
    background:     #fff7f4;
}

.tip-result-label {
    font-weight:    600;
    color:          var(--text-secondary, #64748B);
}

.tip-result-value {
    font-weight:    700;
    color:          var(--text, #0D1B2A);
    font-size:      1rem;
}

.tip-result-row:last-child .tip-result-value {
    font-size:      1.375rem;
    color:          var(--accent, #E8472F);
}

/* ── Clear button (per tab) ─────────────────────────────────────────────────── */
.tab-clear-btn {
    margin-top:     1rem;
    padding:        0.35rem 0.9rem;
    border-radius:  8px;
    border:         1.5px solid var(--border, #E2E4E8);
    background:     transparent;
    color:          var(--text-secondary, #64748B);
    font-size:      0.8125rem;
    font-weight:    600;
    cursor:         pointer;
    transition:     border-color 0.15s, color 0.15s;
    font-family:    'IBM Plex Sans', sans-serif;
}

.tab-clear-btn:hover {
    border-color:   var(--accent, #E8472F);
    color:          var(--accent, #E8472F);
}

/* ── Responsive: stack on mobile ────────────────────────────────────────────── */
@media (max-width: 480px) {
    .mode-tabs {
        gap: 0.375rem;
    }
    .mode-tab {
        font-size:  0.75rem;
        padding:    0.35rem 0.75rem;
    }
    .result-value {
        font-size: 1.75rem;
    }
    .calc-input {
        width: 100px;
    }
    .calc-input.wide {
        width: 130px;
    }
}

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