/*!
 * @Rank – Character & Word Counter
 * The tool's stylesheet. A tool is a thing people come to in order to get
 * something done and leave, so the line is deliberately quiet: ONE deep
 * indigo ink for structure, ONE amber call to action, hairlines instead of
 * shadows, and 6/8 px corners rather than 20. Colour is spent only where it
 * carries meaning — that one ink, that one action, and ok/warn/err.
 *
 * Every rule sits under the root .atrank-count: the tool is a section inside
 * somebody else's page and must touch nothing outside its own root — no :root,
 * no html, no body, no bare *. See ADR-008.
 *
 * Light only. There is no dark palette and no toggle.
 *
 * Two rules here are function rather than styling:
 *   · there is ONE text box and the cleaning happens inside it, so the box has to
 *     be tall enough to read a paragraph in and must scroll itself rather than
 *     growing the page;
 *   · a switch shows three states — blank when it is off, a dash when it was on
 *     and found nothing, a number when it removed something — because "0" and "not
 *     asked" are different things.
 */

/* ── Design tokens ─────────────────────────────────────────────────────────
     The palette is deliberately narrow. Structure is carried by ONE deep ink
     — #1a044a, the old #26076b darkened, 18.1:1 on white — and nothing else is
     brand does not need to be repeated in every border. Amber stays as the
     single call to action. Two contrast rules are inherited and still hold:
       · Text on the amber CTA is near-black, not white. FormFlow's own
         .ffe-go-pro-button uses #fff on #e8a002, which is 2.22:1 and fails
         WCAG AA. Near-black on the same amber is 8.4:1 and keeps the identity.
       · --ok and --warn are darkened from FormFlow's #16a34a / #e8a002, which
         reach only 3.3:1 and 2.2:1 as TEXT on white. */
.atrank-count {
}
/* Only two selectors reach past the tool's own elements, and both are scoped to
   the root so they cannot leak into the client's page. */
.atrank-count, .atrank-count *{ box-sizing:border-box; }
/* The hidden attribute has to WIN. No element here currently collides with a
   display rule, but Converter Tool had exactly that bug — a bar carrying a
   .row class with display:flex stayed on screen despite being marked hidden,
   because an author rule beats the browser's own display:none for [hidden].
   This costs one line and removes the whole class of mistake. */
.atrank-count [hidden]{ display:none !important; }.atrank-count {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	border-radius: var(--r-lg);
	overflow: hidden;
}

/* ── Header ────────────────────────────────────────────────────────────────
   Sticky, so the status stays visible while scrolling a long text. A theme with
   a fixed header of its own sets --atrank-header-top and it sits below it. */
.atrank-count header{
  position:sticky; top:var(--atrank-header-top, 0px); z-index:5;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:6px 12px; background:var(--panel);
  border-bottom:1px solid var(--line); box-shadow:none;
}

/* ── Layout ─────────────────────────────────────────────────────────────────
   The reference shape: the phone on the left, the controls on the right, and one
   button at the bottom spanning both. Stacked below 1000 px, with the phone
   first — on a narrow screen the picture is what you want to see while typing. */
.atrank-count main{ display:block; padding:10px 12px 12px; }
.atrank-tool-root .atrank-panel{ display:block; }
.atrank-tool-root .atrank-panel > * + *{ margin-top:0; }.atrank-tool-root .atrank-hint {
	display: block;
	line-height: 1.45;
	margin-top: 7px;
}
.atrank-count-tail{ margin-top:18px; display:grid; gap:8px; }.atrank-tool-root .atrank-btn {
	white-space: nowrap;
}
.atrank-tool-root .atrank-btn-ghost{ border-color:var(--line2); background:var(--panel); color:var(--muted); }
.atrank-tool-root .atrank-btn-ghost:hover{ color:var(--accent); border-color:var(--accent); background:var(--hover); }.atrank-tool-root .atrank-btn-cta {
	padding: 11px 22px;
	font-size: 14px;
}
.atrank-tool-root .atrank-btn-cta:hover{ background:var(--cta-h); }.atrank-tool-root .atrank-btn {
	white-space: nowrap;
}
.atrank-tool-root .atrank-btn-ghost{ border-color:var(--line2); background:var(--panel); color:var(--muted); }
.atrank-tool-root .atrank-btn-ghost:hover{ color:var(--accent); border-color:var(--accent); background:var(--hover); }
.atrank-tool-root .atrank-btn-cta:hover{ background:var(--cta-h); }
.atrank-tool-root .atrank-btn.atrank-count-small{ padding:5px 12px; font-size:12px; }

/* ── The one box ───────────────────────────────────────────────────────────
   Its head carries everything that acts on it: the paste switch, Clean it, Copy. */
.atrank-count-boxhead{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:7px;
}
.atrank-count-boxhead h2{
  margin:0; font-size:13.5px; font-weight:700; color:var(--txt); letter-spacing:-.01em;
  margin-right:auto;
}
.atrank-count-boxhead h2 label{ cursor:pointer; }
.atrank-count-area{
  width:100%; min-width:0; box-sizing:border-box;
  min-height:min(260px, max(150px, 24vh)); max-height:52vh; resize:vertical;
  padding:12px 14px; border:1px solid var(--line2); border-radius:var(--r);
  background:var(--panel); color:var(--txt);
  font:inherit; font-size:14px; line-height:1.6;
  font-family:var(--mono);
}
.atrank-count-area:focus-visible{ outline:none; border-color:var(--accent); box-shadow:var(--ring); }
.atrank-count-area::placeholder{ color:var(--dim); }

/* ── The figures ───────────────────────────────────────────────────────────
   One set of numbers now, so tiles rather than a table: a table of one column is
   a list wearing a costume. */
.atrank-count-figures{
  display:grid; gap:8px; margin-top:12px;
  grid-template-columns:repeat(auto-fit, minmax(112px, 1fr));
}
.atrank-count-tile{
  border:1px solid var(--line); border-radius:var(--r); background:var(--panel);
  padding:9px 12px; display:grid; gap:1px; min-width:0;
}
.atrank-count-tile strong{
  font-size:20px; font-weight:700; color:var(--txt);
  font-variant-numeric:tabular-nums; font-family:var(--mono); line-height:1.15;
}
.atrank-count-tile span{
  font-size:11px; font-weight:600; color:var(--dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.atrank-count-times{
  display:flex; gap:14px; flex-wrap:wrap; align-items:baseline;
  margin:10px 0 16px; font-size:12.5px; color:var(--muted);
}
.atrank-count-times strong{ color:var(--txt); font-variant-numeric:tabular-nums; }
.atrank-count-times .atrank-hint{ margin-top:0; }
.atrank-tool-root .atrank-cardhead{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.atrank-tool-root .atrank-card h2{
  margin:0 0 8px; font-size:13px; font-weight:700; color:var(--txt); letter-spacing:-.01em;
  margin-right:auto;
}

/* ── The switches ──────────────────────────────────────────────────────────
   A row per cleaner: the box, what it does, and how many things it removed. */
.atrank-count-switches{ display:grid; gap:2px 20px; grid-template-columns:1fr; }
/* Eight switches down one column is two thirds of a 1280 px screen left empty
   and a page of scrolling. Two-up in the middle band, three when there is room —
   the label plus its explanation still needs roughly 300 px to stay on two lines. */
@media (min-width:700px){ .atrank-count-switches{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1040px){ .atrank-count-switches{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.atrank-count-switch{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start;
  gap:9px; padding:6px 7px; border-radius:var(--r); cursor:pointer;
}
.atrank-count-switch:hover{ background:var(--hover); }
.atrank-count-switch input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
/* The box itself is the FIRST span. Addressed as `.atrank-count-switch span` it
   would also catch the words beside it — the bug this line has already made once. */
.atrank-count-switch input + span{
  position:relative; display:block; width:17px; height:17px; margin-top:1px;
  border:1.5px solid var(--line2); border-radius:5px; background:var(--panel);
  flex:0 0 auto;
}
.atrank-count-switch input + span::after{
  content:""; position:absolute; left:5px; top:1px; width:5px; height:9px;
  border:solid var(--on-accent); border-width:0 2px 2px 0;
  transform:rotate(42deg) scale(.6); opacity:0; transition:opacity .12s, transform .12s;
}
.atrank-count-switch input:checked + span{ background:var(--accent); border-color:var(--accent); }
.atrank-count-switch input:checked + span::after{ opacity:1; transform:rotate(42deg) scale(1); }
.atrank-count-switch input:focus-visible + span{ box-shadow:var(--ring); }
.atrank-count-swtext{ display:grid; gap:1px; min-width:0; }
.atrank-count-swlabel{ font-size:13px; font-weight:600; color:var(--txt); }
.atrank-count-swhint{ font-size:11.5px; color:var(--dim); line-height:1.4; }
.atrank-count-swhits{
  font-size:12px; font-weight:700; color:var(--dim); font-variant-numeric:tabular-nums;
  min-width:2ch; text-align:right; margin-top:1px;
}
.atrank-count-swhits.is-hit{ color:var(--accent); }

/* The one switch that lives in the box's head rather than in the list. */
.atrank-count-switch.atrank-count-inline{
  grid-template-columns:auto auto; padding:4px 8px 4px 6px;
  border:1px solid var(--line2); border-radius:var(--r);
}
.atrank-count-switch.atrank-count-inline .atrank-count-swlabel{ font-size:12px; }
.atrank-tool-root .atrank-btn:disabled:hover{ background:var(--cta); }.atrank-tool-root .atrank-notice {
	border-left-width: 3px;
}

/* ── Narrow ─────────────────────────────────────────────────────────────── */
@media (max-width:600px){
  .atrank-count main{ padding:9px; }
.atrank-tool-root .atrank-btn-cta{ width:100%; justify-content:center; }
}

@media (prefers-reduced-motion:reduce){
  .atrank-count *{ transition:none !important; animation:none !important; }
}