/*!
 * @Rank – Text Find & Replace Tool
 * 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-fr: 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.
 *
 * No font is bundled. The tool inherits the site's own typeface — including in
 * the two big text boxes, because what goes in them is prose and prose is what
 * the site's typeface is for. The result box and the marked-up view are pinned
 * to the SAME font, size and line height, so switching between them does not
 * move a single line.
 */

/* ── 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-fr {
}/* 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-fr, .atrank-fr *{ 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-fr [hidden]{ display:none !important; }.atrank-fr {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	border-radius: var(--r-lg);
	overflow: hidden;
}

/* Visible to a screen reader, not to the eye. The two boxes have visible
   headings of their own, but a <textarea> still needs a real label. */
.atrank-fr-sr{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

/* ── 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-fr 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;
}

/* ── Cards ─────────────────────────────────────────────────────────────── */
.atrank-fr main{ display:block; padding:10px 12px 12px; }
.atrank-fr-track{ display:flex; flex-direction:column; gap:12px; max-width:1180px; margin:0 auto; }
.atrank-tool-root .atrank-card h2{
  display:flex; align-items:center; gap:8px;
  margin:0 0 8px; font-size:13px; font-weight:700; color:var(--accent); letter-spacing:-.01em;
}
.atrank-fr-num{
  display:grid; place-items:center; width:18px; height:18px; flex-shrink:0;
  border-radius:50%; background:var(--accent); color:var(--on-accent);
  font-size:11px; font-weight:700; font-variant-numeric:tabular-nums;
}
/* A wider measure on purpose. At 78ch this sat in a narrow column with two
   thirds of the card empty beside it, turning two lines of explanation into
   three or four. 96ch is still a comfortable line and one row shorter. */
.atrank-fr-sub{ margin:0 0 11px; color:var(--muted); font-size:12.5px; max-width:96ch; }
.atrank-tool-root .atrank-hint code,
.atrank-fr-sub code{ font-family:var(--mono); font-size:12px;
  background:var(--inset); padding:1px 4px; border-radius:4px; }
.atrank-fr-row{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }

/* ── The rule rows ──────────────────────────────────────────────────────—
   One grid, so the arrow and the count line up down the column however long
   the fields' contents are. The error line spans the whole row underneath. */
/* The rows scroll rather than pushing everything below them off the page: a
   pasted list of fifty replacements should not bury the text boxes. */
.atrank-fr-rules{ display:flex; flex-direction:column; gap:6px;
  max-height:46vh; overflow-y:auto; }
.atrank-fr-rule{
  display:grid; align-items:center; gap:8px;
  grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr) 74px 26px;
  grid-template-areas:"on find arrow to count drop" ". err err err err err";
}
.atrank-fr-rule.is-off{ opacity:.5; }
.atrank-fr-rule input[type="text"]{
  font:inherit; font-size:13.5px; color:var(--txt); width:100%;
  padding:6px 10px; border:1px solid var(--line2); border-radius:var(--r);
  background:var(--panel); box-shadow:var(--field-inset);
  transition:border-color .18s var(--ease);
}
.atrank-fr-rule input[type="text"]:hover{ border-color:var(--accent); }
.atrank-fr-rule input[type="text"]:focus-visible{ outline:none; box-shadow:var(--ring); }
.atrank-fr-rfind{ grid-area:find; }
.atrank-fr-rto{ grid-area:to; }
.atrank-fr-rule.is-bad .atrank-fr-rfind{ border-color:var(--err); }
.atrank-fr-arrow{ grid-area:arrow; display:flex; color:var(--dim); }
.atrank-fr-onoff{ grid-area:on; }

/* The count is the tool answering "did that rule do anything". It has to be
   readable at a glance, which is why "no match" is a warning colour and not
   grey — a rule that silently does nothing is the commonest mistake here. */
.atrank-fr-count{
  grid-area:count; font-size:11.5px; font-weight:700; text-align:right;
  white-space:nowrap; color:var(--dim); font-variant-numeric:tabular-nums;
}
.atrank-fr-count.is-ok{ color:var(--ok); }
.atrank-fr-count.is-warn{ color:var(--warn); }
.atrank-fr-rerror{ grid-area:err; font-size:12px; color:var(--err); }

.atrank-fr-rdrop{
  grid-area:drop; display:grid; place-items:center; width:26px; height:26px; padding:0;
  border:none; background:transparent; color:var(--dim); border-radius:50%; cursor:pointer;
  transition:color .18s var(--ease), background .18s var(--ease);
}
.atrank-fr-rdrop:hover{ color:var(--err); background:var(--hover); }
.atrank-fr-rdrop:focus-visible{ outline:none; box-shadow:var(--ring); }

/* ── Checkboxes ─────────────────────────────────────────────────────────—
   The native box is replaced by a drawn one so the tick can be the accent
   colour in both themes. The input itself stays in the DOM and keeps focus. */
.atrank-fr-check, .atrank-fr-onoff{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13px; color:var(--txt); cursor:pointer; user-select:none;
}
.atrank-fr-check.is-off{ opacity:.5; cursor:not-allowed; }
.atrank-fr-check input, .atrank-fr-onoff input{
  position:absolute; opacity:0; width:1px; height:1px; pointer-events:none;
}
.atrank-fr-check span, .atrank-fr-onoff span{
  display:grid; place-items:center; width:17px; height:17px; flex-shrink:0;
  border:1px solid var(--line2); border-radius:5px; background:var(--panel);
  transition:background .16s var(--ease), border-color .16s var(--ease);
}
.atrank-fr-check span::after, .atrank-fr-onoff span::after{
  content:""; width:9px; height:9px; border-radius:2px; background:transparent;
  transition:background .16s var(--ease);
}
.atrank-fr-check input:checked + span, .atrank-fr-onoff input:checked + span{
  border-color:var(--accent); background:var(--accent);
}
.atrank-fr-check input:checked + span::after, .atrank-fr-onoff input:checked + span::after{
  background:var(--on-accent);
}
.atrank-fr-check input:focus-visible + span, .atrank-fr-onoff input:focus-visible + span{
  box-shadow:var(--ring);
}
.atrank-fr-check-small{ font-size:12.5px; }

.atrank-fr-options{
  margin-top:12px; padding-top:10px; border-top:1px solid var(--line);
  display:flex; gap:7px 18px; flex-wrap:wrap; align-items:center;
}
/* Same reasoning as the sub above: a wide measure costs one line instead of two. */
.atrank-fr-options p{ margin:1px 0 0; flex-basis:100%; max-width:none; font-size:12px; }

/* ── Pasting a list ────────────────────────────────────────────────────── */
.atrank-fr-bulk{
  margin-top:10px; padding:12px; border:1px solid var(--line);
  border-radius:var(--r); background:var(--panel2);
}
.atrank-fr-bulk p{ margin:8px 0 10px; }
.atrank-fr-field{ display:flex; flex-direction:column; gap:5px;
  font-size:12.5px; font-weight:600; color:var(--muted); }
.atrank-fr-bulk textarea{
  font-family:var(--mono); font-size:12.5px; line-height:1.6; color:var(--txt);
  padding:10px 12px; border:1px solid var(--line2); border-radius:var(--r);
  background:var(--panel); box-shadow:var(--field-inset); resize:vertical; width:100%;
}
.atrank-fr-bulk textarea:focus-visible{ outline:none; box-shadow:var(--ring); }

/* ── The two boxes ─────────────────────────────────────────────────────—
   Side by side, because the point of the tool is seeing the before and the
   after together. They stack on a narrow screen, in reading order. */
.atrank-fr-boxes{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.atrank-fr-box{ display:flex; flex-direction:column; min-width:0; }
.atrank-fr-boxhead{
  display:flex; align-items:baseline; gap:10px; margin-bottom:5px; min-height:18px;
}
.atrank-fr-boxtitle{ font-size:13px; font-weight:700; color:var(--txt); }
.atrank-fr-boxhead .atrank-hint{ margin-left:auto; text-align:right; }

/* The plain result and the marked-up result must be identical in shape, or
   flipping the switch would move every line. Hence the shared tokens and the
   identical padding, border and metrics on both. */
.atrank-fr-area{
  width:100%; min-height:var(--area-min); resize:vertical;
  font-family:var(--font); font-size:var(--area-size); line-height:var(--area-line);
  color:var(--txt); background:var(--panel);
  padding:10px 12px; border:1px solid var(--line2); border-radius:var(--r);
  box-shadow:var(--field-inset);
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
.atrank-fr-area:hover{ border-color:var(--accent); }
.atrank-fr-area:focus-visible{ outline:none; box-shadow:var(--ring); }
.atrank-fr-area.is-over{ border-color:var(--accent); background:var(--accent-soft); }
.atrank-fr #atrank-fr-out{ background:var(--panel2); }

/* The marked view is a <pre>, so it needs the wrapping a textarea has by
   default — otherwise a long line would scroll the whole card sideways. */
.atrank-fr .atrank-fr-marked{
  margin:0; overflow:auto; max-height:70vh;
  white-space:pre-wrap; word-break:break-word; background:var(--panel2);
}
.atrank-fr-hit{
  background:var(--hit); color:var(--on-hit);
  border-bottom:2px solid var(--hit-line); border-radius:3px;
  /* No padding: it would change where the line breaks, and the marked view has
     to break in the same places as the plain one. */
  padding:0;
}
.atrank-fr-toobig{ color:var(--warn); font-size:13px; }

.atrank-fr-boxfoot{ display:flex; align-items:center; gap:7px; margin-top:7px; flex-wrap:wrap; }
.atrank-fr-boxfoot input[type="file"]{
  /* Off-screen rather than display:none: the button in front of it is what is
     styled, and a hidden input cannot be reached from script in Safari. */
  position:absolute; width:1px; height:1px; opacity:0; clip-path:inset(50%);
}

.atrank-fr-report{ margin-top:11px; }
.atrank-fr-summary{ margin:0 0 8px; font-size:13px; color:var(--txt); }
.atrank-fr-btn-small{ padding:6px 14px; font-size:12.5px; }
.atrank-tool-root .atrank-btn-secondary{ background:transparent; color:var(--muted); border-color:var(--line2); }
.atrank-tool-root .atrank-btn-secondary:hover:not(:disabled){ color:var(--accent); border-color:var(--accent); background:var(--hover); }

/* ── Narrow ────────────────────────────────────────────────────────────— */
@media (max-width:820px){
  .atrank-fr-boxes{ grid-template-columns:1fr; }.atrank-fr {
}
}
@media (max-width:600px){
  .atrank-fr header{ padding:10px 12px; gap:8px; }
.atrank-tool-root .atrank-status{
	order: 9;
	width: 100%;
	text-align: left;
}
  .atrank-fr main{ padding:12px; }
  /* The rule row becomes two lines: the two fields side by side would each be
     too narrow to read what is in them. */
  .atrank-fr-rule{
    grid-template-columns:auto minmax(0,1fr) 26px;
    grid-template-areas:"on find drop" ". arrow ." ". to ." ". count ." ". err .";
    gap:6px 8px;
    padding:10px; border:1px solid var(--line); border-radius:12px;
  }
  .atrank-fr-arrow{ transform:rotate(90deg); }
  .atrank-fr-count{ text-align:left; }
}

/* Somebody who asked for less motion gets the states without the movement. */
@media (prefers-reduced-motion:reduce){
  .atrank-fr *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}