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

/* ── Textarea ────────────────────────────────────────────────────────────────── */
#cc-textarea {
    width:          100%;
    min-height:     140px;
    max-height:     400px;
    resize:         vertical;
    padding:        1rem 1.125rem;
    font-family:    'IBM Plex Sans', sans-serif;
    font-size:      1rem;
    line-height:    1.7;
    color:          var(--text, #0D1B2A);
    background:     var(--card-bg, #ffffff);
    border:         1.5px solid var(--border, #E2E4E8);
    border-radius:  10px;
    outline:        none;
    box-sizing:     border-box;
    transition:     border-color 0.18s, box-shadow 0.18s;
    overflow-y:     auto;
}
#cc-textarea:focus {
    border-color: var(--accent, #E8472F);
    box-shadow:   0 0 0 3px rgba(232, 98, 42, 0.12);
}
#cc-textarea::placeholder {
    color: var(--muted, #64748B);
    opacity: 0.7;
}

/* ── Live stats row (4 columns) ─────────────────────────────────────────────── */
.cc-stats-row {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   0.75rem;
    margin-top:            1rem;
}
.cc-stat-box {
    background:    var(--bg, #FFFFFF);
    border:        1.5px solid var(--border, #E2E4E8);
    border-radius: 10px;
    padding:       0.875rem 1rem;
    text-align:    center;
}
.cc-stat-value {
    display:     block;
    font-family: 'IBM Plex Serif', Georgia, serif;
    font-size:   1.75rem;
    font-weight: 400;
    color:       var(--accent, #E8472F);
    line-height: 1.1;
}
.cc-stat-label {
    display:     block;
    font-size:   0.75rem;
    font-weight: 600;
    color:       var(--muted, #64748B);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top:  0.25rem;
}

/* Responsive: 2 cols on mobile */
@media (max-width: 600px) {
    .cc-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Action buttons row ──────────────────────────────────────────────────────── */
.cc-actions {
    display:     flex;
    gap:         0.625rem;
    margin-top:  1rem;
    flex-wrap:   wrap;
}

/* ── Platform limits section ─────────────────────────────────────────────────── */
.cc-platforms {
    margin-top:  1.5rem;
    border-top:  1.5px solid var(--border, #E2E4E8);
    padding-top: 1.25rem;
}
.cc-platforms-heading {
    font-size:      0.8125rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:          var(--muted, #64748B);
    margin:         0 0 1rem;
}

/* Each platform bar row */
.cc-bar-row {
    display:        flex;
    align-items:    center;
    gap:            0.75rem;
    margin-bottom:  0.875rem;
    flex-wrap:      wrap;
}
.cc-bar-label {
    display:     flex;
    align-items: center;
    gap:         0.375rem;
    min-width:   140px;
    font-size:   0.875rem;
    font-weight: 600;
    color:       var(--text, #0D1B2A);
    flex-shrink: 0;
}
.cc-bar-icon {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           22px;
    height:          22px;
    border-radius:   5px;
    background:      var(--bg, #FFFFFF);
    font-size:       0.7rem;
    font-weight:     700;
    color:           var(--text, #0D1B2A);
    border:          1px solid var(--border, #E2E4E8);
    flex-shrink:     0;
}
.cc-bar-track {
    flex:            1;
    min-width:       80px;
    height:          8px;
    background:      var(--bg, #FFFFFF);
    border:          1.5px solid var(--border, #E2E4E8);
    border-radius:   999px;
    overflow:        hidden;
    position:        relative;
}
.cc-bar-fill {
    height:           100%;
    width:            0%;
    border-radius:    999px;
    background:       #22c55e;   /* green — within limit */
    transition:       width 0.15s ease, background 0.15s ease;
}
.cc-bar-fill--warn {
    background: var(--accent, #E8472F);   /* orange — 80%+ of limit */
}
.cc-bar-fill--over {
    background: #ef4444;                  /* red — over limit */
}
.cc-bar-count {
    min-width:   80px;
    font-size:   0.8rem;
    font-weight: 600;
    color:       var(--muted, #64748B);
    text-align:  right;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.cc-bar-remaining {
    min-width:   90px;
    font-size:   0.8rem;
    font-weight: 600;
    color:       #22c55e;                 /* green */
    text-align:  right;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.cc-bar-remaining.warn {
    color: var(--accent, #E8472F);
}
.cc-bar-remaining.over {
    color: #ef4444;
}

/* Row-level highlight when over limit */
.cc-bar--over .cc-bar-track {
    border-color: rgba(239, 68, 68, 0.3);
    background:   rgba(239, 68, 68, 0.06);
}
.cc-bar--warn .cc-bar-track {
    border-color: rgba(232, 98, 42, 0.3);
    background:   rgba(232, 98, 42, 0.06);
}

/* Responsive bar layout */
@media (max-width: 600px) {
    .cc-bar-label {
        min-width: 110px;
    }
    .cc-bar-count {
        display: none;
    }
    .cc-bar-remaining {
        min-width: 70px;
    }
}

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