/* tokencount — tool-specific components (loaded after the global /styles.css) */

.tc-drop { position: relative; border-radius: var(--r-md); }
.tc-drop.is-over textarea { border-color: var(--accent); border-style: dashed;
  background: color-mix(in srgb, var(--accent) 6%, var(--bg)); }
.tc-text { min-height: 220px; resize: vertical; font-family: var(--font-mono); font-size: .9rem; line-height: 1.5; }

.tc-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-3); }
.tc-actions .hint { font-size: var(--fs-xs); color: var(--muted); }

.tc-status { margin-top: var(--space-3); font-size: var(--fs-sm); color: var(--muted); min-height: 1.4em; }
.tc-status.is-error { color: var(--danger); }

.tc-stats { display: grid; gap: var(--space-3); margin-top: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .tc-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tc-stats .stat .v { word-break: break-all; }
.stat.tc-primary { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); background: var(--brand-soft); }
.stat .sub { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--space-1); }

.tc-panel { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--border); }
.tc-panel h3 { font-size: var(--fs-md); margin-bottom: var(--space-3); }
.tc-row { display: grid; gap: var(--space-3); }
@media (min-width: 560px) { .tc-row { grid-template-columns: 1fr 1fr; align-items: end; } }

.tc-est { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.tc-est div { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--fs-sm);
  padding: var(--space-2) 0; border-bottom: 1px solid var(--border); }
.tc-est div:last-child { border-bottom: 0; }
.tc-est span:last-child { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

.tc-check { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; font-size: var(--fs-sm); }
.tc-check input { width: 1.1rem; height: 1.1rem; accent-color: var(--brand); }

.tc-viz { margin-top: var(--space-3); padding: var(--space-3); background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-md); font-family: var(--font-mono); font-size: .88rem; line-height: 1.9;
  white-space: pre-wrap; word-break: break-word; max-height: 420px; overflow: auto; }
.tk { border-radius: 3px; padding: 1px 0; }
.tk-0 { background: color-mix(in srgb, #6ea8fe 30%, transparent); }
.tk-1 { background: color-mix(in srgb, #22d3ee 26%, transparent); }
.tk-2 { background: color-mix(in srgb, #fbbf24 28%, transparent); }
.tk-3 { background: color-mix(in srgb, #f472b6 26%, transparent); }
.tk-multi { text-decoration: underline wavy; text-underline-offset: 3px; }
.tc-viz-note { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--space-2); }

/* Below 1000px .tool-layout is a one-column grid whose column grows to its widest unbreakable child
   (a long <pre> line here), which pushed the page ~450px wider than a 390px phone. min-width: 0 lets
   the column shrink so the wide children scroll inside themselves instead. */
.tool-layout > * { min-width: 0; }
.article pre { overflow-x: auto; }