/*!
 * @Rank – Regex Tester
 * 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-rx: 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.
 *
 * Four rules here are function rather than decoration:
 *   · Input and Output are the same shape to the pixel — same font, same size,
 *     same line height, same padding — because one is read against the other
 *     and any difference in metrics makes the marking look misaligned;
 *   · consecutive matches ALTERNATE between two tints. A pattern like \d+ over
 *     "1 2 3" produces matches that touch, and one tint would draw them as a
 *     single long match;
 *   · an empty match has no text to fill, so it is drawn as a bar. A count of
 *     four with nothing visible on the page reads as a broken tool;
 *   · the read-only boxes keep white-space: pre-wrap. The input's line breaks
 *     and runs of spaces are frequently what the pattern is about.
 */

/* ── 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-rx {
	--hit2: #ffd27a;
	--area-pad: 12px 14px;
}

/* Only three selectors reach past the tool's own elements, and all are scoped to
   the root so they cannot leak into the client's page. */
.atrank-rx, .atrank-rx *{ 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-rx [hidden]{ display:none !important; }.atrank-rx {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	border-radius: var(--r-lg);
	overflow: hidden;
}

/* ── Header ────────────────────────────────────────────────────────────────
   Sticky, so the count and the status stay visible while scrolling a long
   input. A theme with a fixed header of its own sets --atrank-header-top and it
   sits below it. */
.atrank-rx 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 ─────────────────────────────────────────────────────────────────
   One column of stacked rows, as the reference has it. Each row is a pair —
   Pattern with Flags, Input with Output, Replacement with Replaced Output — and
   each pair splits into two columns once there is room for both. Below that the
   halves stack in reading order, so the box and the box it explains stay
   adjacent.

   The Pattern row is deliberately NOT an even split: the pattern is the long
   string and the flags are never more than eight characters. */
.atrank-rx main{ display:block; padding:10px 12px 12px; }.atrank-tool-root .atrank-panel {
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow);
}
.atrank-rx-lede{ margin:0 0 16px; font-size:12.5px; color:var(--dim); }
.atrank-rx-row{ display:grid; gap:12px 16px; margin-bottom:14px; }
.atrank-rx-row:first-of-type{ grid-template-columns:minmax(0,1fr); }
@media (min-width:820px){
  .atrank-rx-row{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  /* Pattern gets the room; Flags needs a fixed narrow column. */
  .atrank-rx-row:first-of-type{ grid-template-columns:minmax(0,1fr) 260px; }
}
.atrank-rx-field{ display:grid; gap:6px; min-width:0; align-content:start; }
.atrank-rx-label{
  font-size:11.5px; font-weight:600; color:var(--dim); cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.atrank-rx-mono{ font-family:var(--mono); }

/* ── Fields ─────────────────────────────────────────────────────────────── */
.atrank-rx-input, .atrank-rx-select{
  width:100%; min-width:0; padding:10px 12px;
  border:1px solid var(--line2); border-radius:var(--r);
  background:var(--panel); color:var(--txt); font:inherit; font-size:13.5px;
}
.atrank-rx-select{ cursor:pointer; }
.atrank-rx-input:focus-visible, .atrank-rx-select:focus-visible{
  outline:none; border-color:var(--accent); box-shadow:var(--ring);
}
.atrank-rx-input::placeholder{ color:var(--dim); }
/* A pattern that will not compile is marked on the field itself, not only in a
   note underneath: the note is four boxes away from the caret. */
.atrank-rx-input.is-bad{ border-color:var(--err); }
.atrank-rx-flagfield{ max-width:120px; }

/* ── The flag buttons ──────────────────────────────────────────────────────
   Seven small squares under the flag field, as the reference has them, and they
   are a second view of that field rather than a separate control: clicking one
   rewrites the text, typing in the text lights the squares. */
.atrank-rx-chips{ display:flex; flex-wrap:wrap; gap:5px; }
.atrank-rx-chip{
  appearance:none; min-width:27px; height:27px; padding:0 7px;
  border:1px solid var(--line2); border-radius:8px;
  background:var(--panel); color:var(--muted);
  font-family:var(--mono); font-size:12.5px; font-weight:700; cursor:pointer;
  transition:background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.atrank-rx-chip:hover{ color:var(--accent); border-color:var(--accent); background:var(--hover); }
.atrank-rx-chip.is-on{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.atrank-rx-chip:focus-visible{ outline:none; box-shadow:var(--ring); }

/* ── Input, and the marked-up copy of it ───────────────────────────────────
   The two share every metric through the four --area- tokens. */
.atrank-rx-area{
  width:100%; min-width:0; box-sizing:border-box;
  min-height:var(--area-min); max-height:52vh;
  padding:var(--area-pad);
  border:1px solid var(--line2); border-radius:var(--r);
  background:var(--panel); color:var(--txt);
  font:inherit; font-family:var(--mono);
  font-size:var(--area-size); line-height:var(--area-line);
  overflow:auto;
}
textarea.atrank-rx-area{ resize:vertical; }
.atrank-rx-area:focus-visible{ outline:none; border-color:var(--accent); box-shadow:var(--ring); }
.atrank-rx-area::placeholder{ color:var(--dim); }

/* Read-only, and it looks it — but it stays selectable and copyable, and it
   keeps the input's own line breaks and spacing, which are often the point. */
.atrank-rx-read{
  background:var(--panel2);
  white-space:pre-wrap; overflow-wrap:break-word; word-break:normal;
  user-select:text; -webkit-user-select:text;
}
.atrank-rx-read.is-bad{ border-color:var(--warn); }
.atrank-rx-small{
  width:100%; min-width:0; min-height:64px; max-height:220px;
  padding:var(--area-pad);
  border:1px solid var(--line2); border-radius:var(--r);
  background:var(--panel2); color:var(--txt);
  font-family:var(--mono); font-size:var(--area-size); line-height:var(--area-line);
  overflow:auto;
}.atrank-tool-root .atrank-hint {
	font-style: italic;
}

/* ── A match ───────────────────────────────────────────────────────────────
   Two tints used alternately, so matches that touch can be counted by eye. */
.atrank-rx-hit{
  background:var(--hit); color:var(--on-hit);
  border-radius:3px; padding:1px 0;
  box-shadow:0 0 0 1px var(--hit-line);
}
.atrank-rx-hit.is-alt{ background:var(--hit2); }
/* An empty match has nothing to fill, so it is drawn rather than filled: a bar
   in the gap where the pattern succeeded without consuming a character. */
.atrank-rx-hit.is-empty-hit{
  display:inline-block; width:3px; padding:0; vertical-align:-.18em;
  height:1.05em; background:var(--hit-line); box-shadow:none; border-radius:1px;
}

/* ── The count ─────────────────────────────────────────────────────────────
   Bottom left, as the reference has it, with the one button beside it. */
.atrank-rx-foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin-top:4px;
}
.atrank-rx-count{ font-size:12.5px; font-weight:600; color:var(--dim); }.atrank-tool-root .atrank-btn {
	white-space: nowrap;
}
.atrank-rx-btn-outline{ border-color:var(--accent); background:var(--panel); color:var(--accent); }
.atrank-rx-btn-outline:hover:enabled{ background:var(--hover); }

/* ── Notes ─────────────────────────────────────────────────────────────────
   Four levels, plus one for the line a preset brings with it — which is
   teaching rather than a finding about what the visitor typed, and is worth
   telling apart from one. */
.atrank-rx-tail{ margin-top:12px; display:grid; gap:8px; }.atrank-tool-root .atrank-notice {
	border-left-width: 3px;
}
.atrank-tool-root .atrank-notice.is-teach{ background:var(--accent-soft); border-color:var(--accent); }
#atrank-rx-notes > * + *{ margin-top:7px; }

/* ── Narrow ─────────────────────────────────────────────────────────────── */
@media (max-width:600px){
  .atrank-rx main{ padding:9px; }
  .atrank-rx-flagfield{ max-width:none; }
  .atrank-rx-foot{ flex-direction:column; align-items:stretch; }
.atrank-tool-root .atrank-btn{ justify-content:center; }
}

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