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

/* ── Generate type pill row ─────────────────────────────────────────────────── */
.generate-type-row {
    display:         flex;
    gap:             0.5rem;
    flex-wrap:       wrap;
    margin-bottom:   1.25rem;
}

.generate-type-pill {
    padding:         0.4rem 1rem;
    border-radius:   999px;
    border:          1.5px solid var(--border);
    background:      var(--bg);
    color:           var(--text-secondary, #64748B);
    font-size:       0.875rem;
    font-weight:     600;
    cursor:          pointer;
    transition:      background 0.15s, color 0.15s, border-color 0.15s;
    font-family:     inherit;
    line-height:     1.4;
}

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

.generate-type-pill.active {
    background:      var(--accent, #E8472F);
    border-color:    var(--accent, #E8472F);
    color:           #fff;
}

/* ── Amount row ─────────────────────────────────────────────────────────────── */
.amount-row {
    display:         flex;
    align-items:     center;
    gap:             0.75rem;
    margin-bottom:   1rem;
}

.amount-label {
    font-size:       0.875rem;
    font-weight:     600;
    color:           var(--text-primary, #0D1B2A);
    white-space:     nowrap;
    min-width:       5rem;
}

.amount-input {
    width:           7rem;
    padding:         0.5rem 0.75rem;
    border:          1.5px solid var(--border, #E2E4E8);
    border-radius:   8px;
    font-size:       1rem;
    font-family:     inherit;
    background:      var(--card-bg, #fff);
    color:           var(--text-primary, #0D1B2A);
    transition:      border-color 0.15s;
    -moz-appearance: textfield;
}

.amount-input::-webkit-inner-spin-button,
.amount-input::-webkit-outer-spin-button {
    opacity: 1;
}

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

/* ── Options checkboxes ─────────────────────────────────────────────────────── */
.options-row {
    display:         flex;
    flex-direction:  column;
    gap:             0.625rem;
    margin-bottom:   1.25rem;
}

.option-label {
    display:         flex;
    align-items:     center;
    gap:             0.5rem;
    font-size:       0.9rem;
    color:           var(--text-primary, #0D1B2A);
    cursor:          pointer;
    user-select:     none;
}

.option-label input[type="checkbox"] {
    width:           1.1rem;
    height:          1.1rem;
    accent-color:    var(--accent, #E8472F);
    cursor:          pointer;
    flex-shrink:     0;
}

/* ── Output textarea ────────────────────────────────────────────────────────── */
.output-textarea {
    width:           100%;
    min-height:      10rem;
    max-height:      30rem;
    padding:         0.875rem 1rem;
    border:          1.5px solid var(--border, #E2E4E8);
    border-radius:   8px;
    font-family:     'SFMono-Regular', 'Consolas', 'Menlo', 'Liberation Mono', monospace;
    font-size:       0.875rem;
    line-height:     1.7;
    color:           var(--text-primary, #0D1B2A);
    background:      var(--bg, #FFFFFF);
    resize:          vertical;
    box-sizing:      border-box;
    transition:      border-color 0.15s;
}

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

/* ── Output actions row (copy button + stat line) ───────────────────────────── */
.output-actions {
    display:         flex;
    align-items:     center;
    gap:             0.75rem;
    margin-top:      0.75rem;
    flex-wrap:       wrap;
}

.copy-btn {
    padding:         0.45rem 1.25rem;
    border-radius:   8px;
    border:          1.5px solid var(--accent, #E8472F);
    background:      transparent;
    color:           var(--accent, #E8472F);
    font-size:       0.875rem;
    font-weight:     600;
    cursor:          pointer;
    font-family:     inherit;
    transition:      background 0.15s, color 0.15s;
}

.copy-btn:hover {
    background:      var(--accent, #E8472F);
    color:           #fff;
}

.copy-btn.copied {
    background:      #2d9a5a;
    border-color:    #2d9a5a;
    color:           #fff;
}

.stat-line {
    font-size:       0.8125rem;
    color:           var(--text-secondary, #64748B);
    font-variant-numeric: tabular-nums;
}

/* ── Copy feedback inline message ───────────────────────────────────────────── */
#copy-feedback {
    font-size:       0.8125rem;
    color:           #2d9a5a;
    font-weight:     600;
}

/* ── Responsive: stack amount row on small screens ──────────────────────────── */
@media (max-width: 480px) {
    .amount-row {
        flex-direction: column;
        align-items:    flex-start;
    }
    .generate-type-pill {
        font-size: 0.8125rem;
        padding:   0.35rem 0.85rem;
    }
}

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