/* word-counter — page-specific styles.
   External file so the strict CSP (style-src 'self') permits it. Colors use
   the site theme tokens (--ink/--muted/--line/--bg/--purple) so the tool
   reads correctly in both light and dark mode. */

.sr-only { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap }

/* Input tabs */
.wc-input-tabs { display:flex; gap:.5rem; margin:0 0 .8rem; }
.wc-input-tabs button { background:transparent; border:1px solid var(--line); color:var(--muted);
  padding:.4rem .9rem; border-radius:8px; font:inherit; font-size:.9rem; cursor:pointer; }
.wc-input-tabs button[aria-selected="true"] { background:color-mix(in oklch, var(--purple) 14%, transparent);
  border-color:color-mix(in oklch, var(--purple) 55%, transparent); color:var(--ink); font-weight:600; }
.wc-input-tabs button:hover { background:color-mix(in oklch, var(--purple) 8%, transparent); }

/* Textarea + numeric field */
.wc-textarea { width:100%; min-height:240px; resize:vertical; font:inherit; line-height:1.6;
  color:var(--ink); background:var(--bg); border:1px solid var(--line);
  border-radius:12px; padding:1rem 1.1rem; box-sizing:border-box }
.wc-textarea:focus { outline:2px solid var(--purple); outline-offset:2px; border-color:var(--purple) }
.wc-field { margin-top:1rem; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap }
.wc-field label { font-weight:600 }
.wc-field input[type=number] { width:7rem; font:inherit; color:var(--ink);
  background:var(--bg); border:1px solid var(--line);
  border-radius:8px; padding:.45rem .6rem; box-sizing:border-box }
.wc-field input[type=number]:focus { outline:2px solid var(--purple); outline-offset:2px }
.wc-limit { font-weight:600 }
.wc-limit.over { color:#c0392b }

/* Dropzone (reuses the global .dropzone if present; these are extras) */
.wc-dropzone { margin-top:.25rem; }

/* Basic stat tiles */
.wc-stats { list-style:none; padding:0; margin:1.25rem 0 0;
  display:grid; gap:.75rem; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)) }
.wc-stat { background:color-mix(in oklch, var(--purple) 10%, var(--bg)); border:1px solid color-mix(in oklch, var(--purple) 28%, transparent);
  border-radius:12px; padding:.85rem 1rem }
.wc-stat .wc-num { display:block; font-family:"Fraunces",serif; font-size:1.7rem; font-weight:700; line-height:1.1; color:var(--ink) }
.wc-stat .wc-lbl { display:block; margin-top:.25rem; font-size:.8rem; letter-spacing:.02em;
  text-transform:uppercase; color:var(--muted) }

.wc-err { color:#c0392b; font-weight:600 }

/* Deep-report cards */
#wc-report { margin-top:1.5rem; display:flex; flex-direction:column; gap:1rem; }
.wc-card { border:1px solid var(--line); border-radius:12px; background:var(--bg); overflow:hidden; }
.wc-card > summary { cursor:pointer; padding:.85rem 1.1rem; font-weight:700; font-family:"Fraunces",serif;
  font-size:1.05rem; color:var(--ink); list-style:none; display:flex; justify-content:space-between; align-items:center; }
.wc-card > summary::-webkit-details-marker { display:none; }
.wc-card > summary::after { content:"▸"; color:var(--muted); transition:transform .15s; }
.wc-card[open] > summary::after { transform:rotate(90deg); }
.wc-card-body { padding:0 1.1rem 1.1rem; }
.wc-card-note { font-size:.82rem; color:var(--muted); line-height:1.5; margin:.85rem 0 0;
  border-top:1px solid var(--line); padding-top:.7rem; }
.wc-card-body h4 { margin:1rem 0 .4rem; font-size:.85rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); }

/* Metric grid inside cards */
.wc-metric-grid { display:grid; gap:.6rem; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); }
.wc-metric { background:color-mix(in oklch, var(--purple) 6%, var(--bg)); border:1px solid var(--line);
  border-radius:10px; padding:.6rem .75rem; }
.wc-metric-num { display:block; font-size:1.25rem; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.wc-metric-lbl { display:block; margin-top:.15rem; font-size:.75rem; color:var(--muted); }
.wc-interp { margin:.8rem 0 0; font-weight:600; color:var(--ink); }

/* Word/phrase chips */
.wc-chips { display:flex; flex-wrap:wrap; gap:.4rem; }
.wc-chip { font-size:.82rem; background:color-mix(in oklch, var(--purple) 8%, var(--bg));
  border:1px solid var(--line); border-radius:999px; padding:.2rem .6rem; color:var(--ink); }
.wc-chip em { color:var(--purple); font-style:normal; font-weight:700; margin-left:.2rem; }
.wc-chip-flag { background:color-mix(in oklch, #d9a441 18%, var(--bg)); border-color:color-mix(in oklch, #d9a441 45%, transparent); }
.wc-none { color:var(--muted); font-style:italic; }

/* Sentence-length histogram */
.wc-hist { margin-top:.9rem; display:flex; flex-direction:column; gap:.35rem; }
.wc-bar-row { display:flex; align-items:center; gap:.6rem; font-size:.82rem; }
.wc-bar-lbl { width:3.5rem; color:var(--muted); flex-shrink:0; }
.wc-bar { flex:1; background:color-mix(in oklch, var(--ink) 8%, transparent); border-radius:6px; height:14px; overflow:hidden; }
.wc-bar-fill { display:block; height:100%; background:var(--purple); border-radius:6px; }
.wc-bar-n { width:2.5rem; text-align:right; color:var(--muted); flex-shrink:0; font-variant-numeric:tabular-nums; }

/* Anomaly list */
.wc-anom { margin:.2rem 0 0; padding-left:1.2rem; }
.wc-anom li { margin:.25rem 0; }

/* Section breakdown */
.wc-sec-intro { font-size:.88rem; color:var(--muted); margin:0 0 .7rem; }
.wc-sec-row { display:flex; align-items:center; gap:.6rem; padding:.4rem .2rem; border-bottom:1px solid var(--line); cursor:pointer; }
.wc-sec-row input[type=checkbox] { width:16px; height:16px; accent-color:var(--purple); flex-shrink:0; }
.wc-sec-name { flex:1; color:var(--ink); }
.wc-sec-words { color:var(--muted); font-variant-numeric:tabular-nums; font-size:.85rem; }
.wc-sec-total { margin-top:.9rem; padding:.7rem .9rem; background:color-mix(in oklch, var(--purple) 10%, var(--bg));
  border:1px solid color-mix(in oklch, var(--purple) 30%, transparent); border-radius:10px; color:var(--ink); }
.wc-sec-total strong { font-size:1.1rem; color:var(--purple); }