/* ═══════════════════════════════════════════════════════════════════════════
   TEXT REVERSER — Tool-specific styles
   Inherits base variables from /assets/css/tool-page.css
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Mode Pills ─────────────────────────────────────────────────────────── */
.mode-pills-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.mode-pills-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--muted, #64748B);
    margin-bottom: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mode-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4375rem 0.875rem;
    border-radius: 999px;
    border: 1.5px solid var(--border, #E2E4E8);
    background: #ffffff;
    color: var(--text-primary, #0D1B2A);
    font-size: 0.875rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease,
                color 0.15s ease, box-shadow 0.15s ease;
    user-select: none;
    white-space: nowrap;
}

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

.mode-pill.active {
    background: var(--accent, #E8472F);
    border-color: var(--accent, #E8472F);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(232, 98, 42, 0.28);
}

.mode-pill:focus-visible {
    outline: 2px solid var(--accent, #E8472F);
    outline-offset: 2px;
}

/* ─── Two-Textarea Layout ────────────────────────────────────────────────── */
.reverser-textareas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1rem;
}

@media (max-width: 640px) {
    .reverser-textareas {
        grid-template-columns: 1fr;
    }
}

.textarea-block {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.textarea-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.textarea-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--muted, #64748B);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.char-count {
    font-size: 0.75rem;
    color: var(--muted, #64748B);
    font-variant-numeric: tabular-nums;
}

.reverser-textarea {
    width: 100%;
    min-height: 180px;
    padding: 0.875rem 1rem;
    border: 1.5px solid var(--border, #E2E4E8);
    border-radius: var(--radius-sm, 8px);
    background: var(--card-bg, #ffffff);
    color: var(--text-primary, #0D1B2A);
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 0.9375rem;
    line-height: 1.6;
    resize: vertical;
    transition: border-color 0.15s ease;
    box-sizing: border-box;
}

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

.reverser-textarea[readonly] {
    background: var(--bg, #FFFFFF);
    cursor: default;
    color: var(--text-primary, #0D1B2A);
}

/* ─── Action Buttons Row ─────────────────────────────────────────────────── */
.reverser-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Copy button — prominent */
.copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5625rem 1.25rem;
    border-radius: var(--radius-sm, 8px);
    border: none;
    background: var(--accent, #E8472F);
    color: #ffffff;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.copy-btn:hover {
    background: #d4561f;
    box-shadow: 0 3px 10px rgba(232, 98, 42, 0.32);
}

.copy-btn:active {
    transform: scale(0.97);
}

.copy-btn.copied {
    background: #2a9d5c;
}

/* Clear button */
.clear-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5625rem 1rem;
    border-radius: var(--radius-sm, 8px);
    border: 1.5px solid var(--border, #E2E4E8);
    background: #ffffff;
    color: var(--text-secondary, #64748B);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.clear-btn:hover {
    border-color: #c0392b;
    color: #c0392b;
}

/* ─── Tool Card spacing ──────────────────────────────────────────────────── */
.tool-card .reverser-hint {
    font-size: 0.8125rem;
    color: var(--muted, #64748B);
    margin-top: 0.5rem;
}

/* ─── Helpful widget ─────────────────────────────────────────────────────── */
.helpful-thanks {
    font-size: 0.9375rem;
    color: var(--text-secondary, #64748B);
    text-align: center;
    padding: 0.5rem 0;
}

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