/* ═══════════════════════════════════
   WordWatch — Tool-specific styles
   Requires: toolbox-theme.css
   ═══════════════════════════════════ */

/* ── Text area ── */
.text-area {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 18px;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 0.95rem;
    line-height: 1.7;
    outline: none;
    transition: all 0.3s;
    resize: vertical;
    min-height: 140px;
}
.text-area:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.text-area::placeholder { color: var(--text-muted); }

/* ── Live Stats Bar ── */
.live-bar { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }

.live-stat {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px; background: var(--bg-input);
    border: 1px solid var(--border); border-radius: 8px;
    font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted);
    transition: all 0.3s;
}
.live-stat .n { color: var(--accent); font-weight: 700; }

/* ── Larger stat values for wordWatch ── */
.stat-value { font-size: 1.6rem; }
.stat-label { font-size: 0.7rem; }
.stats-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.stat-card { padding: 18px 16px; }

/* ── Readability gauge ── */
.gauge-wrap {
    display: flex; align-items: center; gap: 20px;
    background: var(--bg-input); border: 1px solid var(--border);
    border-radius: 12px; padding: 20px 24px; margin-top: 14px;
}
.gauge-circle {
    width: 80px; height: 80px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-size: 1.3rem; font-weight: 700;
    flex-shrink: 0; position: relative;
}
.gauge-circle svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.gauge-track { fill: none; stroke: var(--border); stroke-width: 6; }
.gauge-fill { fill: none; stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 0.6s ease, stroke 0.6s; }
.gauge-info { flex: 1; }
.gauge-title { font-weight: 600; font-size: 1rem; margin-bottom: 4px; }
.gauge-desc { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; }

/* ── Keyword chips ── */
.keyword-list { display: flex; flex-direction: column; gap: 8px; }
.keyword-row {
    display: flex; align-items: center; gap: 12px;
    background: var(--bg-input); border: 1px solid var(--border);
    border-radius: 10px; padding: 12px 16px; transition: border-color 0.3s;
}
.keyword-row:hover { border-color: var(--accent-mid); }
.keyword-rank {
    font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700;
    color: var(--text-muted); width: 24px; text-align: center; flex-shrink: 0;
}
.keyword-word {
    flex: 1; font-family: var(--font-mono); font-size: 0.9rem;
    color: var(--text-primary); font-weight: 600;
}
.keyword-count { font-family: var(--font-mono); font-size: 0.8rem; color: var(--accent); font-weight: 700; }
.keyword-bar-bg {
    flex: 1; max-width: 120px; height: 6px; border-radius: 3px;
    background: var(--border); overflow: hidden;
}
.keyword-bar-fill { height: 100%; border-radius: 3px; background: var(--accent); transition: width 0.4s; }

/* ── Transform buttons grid ── */
.transform-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px; margin-bottom: 20px;
}
.transform-btn {
    padding: 14px 16px; border-radius: 10px;
    border: 1px solid var(--border); background: var(--bg-card);
    color: var(--text-primary); font-family: var(--font-display);
    font-size: 0.85rem; font-weight: 600; cursor: pointer;
    transition: all 0.25s; text-align: center;
}
.transform-btn:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 4px 20px var(--accent-dim); }
.transform-btn:active { transform: translateY(0); }
.transform-btn .icon { display: block; font-size: 1.2rem; margin-bottom: 4px; }

/* ── Search & Replace ── */
.sr-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.sr-field { display: flex; flex-direction: column; gap: 6px; }
.sr-field.full { grid-column: 1 / -1; }

.sr-options { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }

.sr-result-info {
    font-family: var(--font-mono); font-size: 0.8rem;
    color: var(--text-secondary); margin-bottom: 14px;
}
.sr-result-info .n { color: var(--accent); font-weight: 700; }

/* ── Responsive ── */
@media (max-width: 600px) {
    .sr-fields { grid-template-columns: 1fr; }
    .gauge-wrap { flex-direction: column; text-align: center; }
    .transform-grid { grid-template-columns: 1fr 1fr; }
}