/* Word Counter — tool styles on the shared design (site/assets/site.css, Docs/DESIGN_SYSTEM.md).
   Colours are written as literal token values because tests/word-counter/markup.test.js measures contrast from this file.
   Roles: cobalt #3155d9 primary action; violet #8057d9 label, secondary action and focus ring; turquoise #27b9b1 accents. */
:root { background: #f7f8ff; }
.app { width: min(920px, 100%); margin: 0 auto; padding: 32px 16px 0; }
.app-header { text-align: center; margin: 0 0 28px; }
.eyebrow { margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .12em; display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--violet-soft); color: var(--violet-ink); } /* Stage 7: the shared pill label */
h1 { margin: 8px 0; font-size: clamp(2rem, 5vw, 3rem); }
.intro { margin: 0; color: #475569; }
.counter-panel, .keyword-panel { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 18px; padding: 22px; box-shadow: 0 8px 28px rgba(49, 85, 217, .08); }
.counter-panel, .keyword-panel, .stat { position: relative; overflow: hidden; }
.counter-panel::before, .keyword-panel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, #3155d9, #8057d9 55%, #27b9b1); }
label { display: block; font-weight: 650; margin-bottom: 8px; }
textarea, input { width: 100%; border: 1px solid #64748b; border-radius: 12px; padding: 12px 14px; font: inherit; background: #ffffff; color: inherit; }
textarea { min-height: 240px; resize: vertical; line-height: 1.55; }
textarea:focus, input:focus, button:focus-visible { outline: 3px solid #8057d9; outline-offset: 2px; }
.actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
button { border: 0; border-radius: 12px; padding: 10px 16px; font: inherit; font-weight: 650; cursor: pointer; background: #3155d9; color: #ffffff; min-height: 44px; }
button:hover, button:active { background: #2443b8; }
button.secondary { background: #ffffff; color: #8057d9; border: 1px solid #8057d9; padding: 9px 15px; }
button.secondary:hover, button.secondary:active { background: #f1ecfc; color: #6a3fc8; }
.status { min-height: 1.2em; margin: 10px 0 0; color: #475569; font-size: .92rem; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.stat { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 16px 16px 16px 20px; min-width: 0; box-shadow: 0 8px 28px rgba(49, 85, 217, .08); }
.stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, #27b9b1, #8057d9); }
.stat h2 { font-size: .9rem; font-weight: 650; color: #0b6964; margin: 0 0 8px; }
.stat p { font-size: clamp(1.35rem, 3vw, 1.8rem); font-weight: 750; margin: 0; overflow-wrap: anywhere; color: #0f172a; }
.stat-note { display: block; margin-top: 6px; font-size: .8rem; color: #475569; }
.keyword-panel { margin-top: 16px; }
.keyword-panel h2 { margin-top: 0; color: #6a3fc8; }
.keyword-panel > p { color: #475569; }
.keyword-results { display: flex; gap: 12px 24px; flex-wrap: wrap; margin-top: 12px; padding: 12px 16px; border-radius: 12px; background: #e3f7f6; }
.keyword-results p { margin: 0; }
.fine-print, .tool-note { font-size: .88rem; color: #475569; }
.tool-note { text-align: center; margin: 22px 8px 0; }
@media (max-width: 600px) { .app { padding: 20px 12px 0; } .counter-panel, .keyword-panel { padding: 15px; } .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .stat { padding: 12px 12px 12px 16px; } }
@media (forced-colors: active) { .stat::before, .counter-panel::before, .keyword-panel::before { background: CanvasText; } }