/*!
 * @Rank – HTML Format Cleaner
 * 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-clean: 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.
 *
 * Three rules here are function rather than styling:
 *   · both boxes are the same height and both scroll themselves, because the
 *     point of the pair is reading one against the other;
 *   · the result box is read-only and looks it, but must stay selectable — the
 *     action button selects it so that Cmd+C works without touching the mouse;
 *   · both boxes are MONOSPACED and do not wrap by word. This is markup, so a
 *     line is a line: the tool's whole promise is that a break only ever falls
 *     where a space already was, and a box that re-wraps for display makes that
 *     impossible to check by eye. They scroll sideways instead.
 */

/* ── 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-clean {
}
/* 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-clean, .atrank-clean *{ 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-clean [hidden]{ display:none !important; }.atrank-clean {
	-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-clean 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 ─────────────────────────────────────────────────────────────────
   Two boxes with an arrow between them, the three buttons under, the notes at
   the bottom. Side by side once there is room for two columns of markup;
   stacked below that, input first, because on a narrow screen the thing you are
   working on is the thing you paste into. */
.atrank-clean 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-clean-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); }

/* ── The two tabs ──────────────────────────────────────────────────────────
   A segmented control, centred, as the reference has it: one pill holding two,
   the chosen one filled. */
.atrank-clean-tabs{
  display:inline-flex; gap:4px; padding:4px; margin:0 auto 14px; display:flex;
  width:max-content; max-width:100%;
  border:1px solid var(--line); border-radius:var(--r); background:var(--panel2);
}
.atrank-clean-tab{
  appearance:none; border:none; background:transparent; cursor:pointer;
  padding:8px 26px; border-radius:var(--r);
  font:inherit; font-size:13.5px; font-weight:700; color:var(--muted);
  white-space:nowrap;
}
.atrank-clean-tab:hover{ color:var(--accent); }
.atrank-clean-tab.is-on{ background:var(--accent); color:var(--on-accent); }
.atrank-clean-tab:focus-visible{ outline:none; box-shadow:var(--ring); }

/* ── In and out ────────────────────────────────────────────────────────────
   Side by side with the arrow between them once there is room; stacked below
   that, with the arrow turned to point down. */
.atrank-clean-boxes{ display:grid; gap:10px; align-items:stretch; }
@media (min-width:860px){
  .atrank-clean-boxes{ grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:14px; }
}
.atrank-clean-side{ display:grid; gap:6px; min-width:0; align-content:start; }
.atrank-clean-blabel{
  font-size:11.5px; font-weight:600; color:var(--dim); cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.atrank-clean-area{
  width:100%; min-width:0; box-sizing:border-box;
  min-height:var(--area-min); 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:var(--area-size); line-height:var(--area-line);
  font-family:var(--mono);
  /* THIS IS MARKUP, SO A LINE IS A LINE. The tool's whole promise is that a
     line break only ever falls where a space already was; a box that re-wraps
     long lines for display makes that impossible to check by eye, and makes the
     indentation - the readable half of "clean and compact" - look ragged.
     So: no soft wrapping, and a horizontal scrollbar where a line is long. */
  white-space:pre;
  overflow:auto;
  tab-size:2;
}
.atrank-clean-area:focus-visible{ outline:none; border-color:var(--accent); box-shadow:var(--ring); }
.atrank-clean-area::placeholder{ color:var(--dim); }
/* Read-only, and it should look it — but it stays selectable and copyable,
   because the action button selects it so Cmd+C works without the mouse. */
#atrank-clean-result{ background:var(--panel2); }
/* Marked when the tool's own check on itself failed, which is the one state
   where the output must not be trusted. The border is the signal, not the
   colour alone. */
#atrank-clean-result.is-bad{ border-color:var(--err); border-width:2px; }
.atrank-clean-arrow{
  display:grid; place-items:center; color:var(--line2);
  /* Pointing down when the boxes are stacked, across when they are not. */
  transform:rotate(90deg);
}
@media (min-width:860px){
  .atrank-clean-arrow{ transform:none; padding-top:22px; }
}

/* ── The three buttons ─────────────────────────────────────────────────────
   Reset on the left, the action in the middle, Copy on the right, as the
   reference has them — and the middle one stays centred on the panel whatever
   the two beside it are called. */
.atrank-clean-actions{
  display:grid; gap:10px; margin-top:16px; align-items:center;
  grid-template-columns:1fr auto 1fr;
}
.atrank-clean-actions > :first-child{ justify-self:start; }
.atrank-clean-actions > :last-child{ justify-self:end; }
@media (max-width:520px){
  .atrank-clean-actions{ grid-template-columns:1fr; }
  .atrank-clean-actions > *{ justify-self:stretch !important; justify-content:center; }
}.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: 12px 30px;
	font-size: 14.5px;
}
.atrank-tool-root .atrank-btn-cta:hover{ background:var(--cta-h); }
.atrank-tool-root .atrank-btn-cta:disabled:hover{ background:var(--cta); }
/* Copy is outlined in the accent, as the reference has it: it is the thing you
   reach for after the action, so it should not look like Reset. */
.atrank-clean-btn-outline{ border-color:var(--accent); background:var(--panel); color:var(--accent); }
.atrank-clean-btn-outline:hover{ background:var(--hover); }.atrank-tool-root .atrank-notice {
	border-left-width: 3px;
}

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

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