/*!
 * @Rank – Converter 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-conv: 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. FormFlow sets no font-family either — the tool inherits
 * the site's own typeface, so it reads as part of the page it is placed in.
 * Only the figures are pinned to tabular numerals, so the file sizes in the
 * result table line up.
 *
 * Two places are deliberately left open to the outside:
 *   --atrank-header-top  A theme with its own fixed header can push the tool's
 *                        sticky category bar below it.
 *   .atrank-toast   Stays position:fixed — the feedback should hang off
 *                        the window, not scroll away inside the section.
 */

/* ── Design tokens ─────────────────────────────────────────────────────────
     Values taken from FormFlow (assets/css/admin-dashboard.css) so the tool
     reads as part of the same product family:
       --accent  #1a044a  structure — headings, step numbers, active tab, focus
       --cta     #e8a002  the ONE primary action per panel (Download)
       --panel   #ffffff  cards on --bg #f7f7f8
       --r-lg    20px     FormFlow's card corner
     Two deliberate departures from FormFlow, both for contrast, and both
     carried over from Image & Icon Tool where they were first worked out:
       · 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. The darker values hold
         5.0:1 and 4.6:1. Where they are used as a fill rather than as text the
         difference is not noticeable. */
.atrank-conv {
	--overlay: rgba(17,12,40,.55);
}

/* 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-conv, .atrank-conv *{ box-sizing:border-box; }
/* The hidden attribute has to WIN.
   Found by looking at a screenshot: #atrank-conv-queueBar carries the class
   .atrank-conv-row, and .atrank-conv-row sets display:flex — an author
   rule, which beats the browser's own display:none for [hidden]. So the
   attribute was set correctly, the element stayed on screen, and the Convert
   button sat there before there was anything to convert.
   One rule fixes it for every element in the tool that is ever hidden, rather
   than for the one that happened to be noticed. */
.atrank-conv [hidden]{ display:none !important; }.atrank-conv {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	border-radius: var(--r-lg);
	overflow: hidden;
}

/* ── Header and the category bar ───────────────────────────────────────────
   Sticky, so the categories stay reachable in a long document. A theme with a
   fixed header of its own sets --atrank-header-top and the bar sits below it. */
.atrank-conv 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;
}

.atrank-conv-tabs{ display:flex; gap:4px; flex-wrap:wrap; }
.atrank-conv-tab{
  appearance:none; border:1px solid transparent; background:transparent;
  color:var(--muted); font:inherit; font-size:13px; font-weight:600;
  padding:7px 13px; border-radius:var(--r); cursor:pointer; white-space:nowrap;
  transition:color .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.atrank-conv-tab:hover{ color:var(--accent); background:var(--hover); }
.atrank-conv-tab.is-on{ color:var(--on-accent); background:var(--accent); border-color:var(--accent); }
.atrank-conv-tab:focus-visible{ outline:none; box-shadow:var(--ring); }
.atrank-tool-root .atrank-status.is-busy{ color:var(--accent); }

/* ── Cards ─────────────────────────────────────────────────────────────── */
.atrank-conv main{ display:block; padding:10px 12px 12px; }

/* ── The layout ───────────────────────────────────────────────────────────
   A grid, not a column. Stacked in a 820 px column, the three cards ran to a
   page of scrolling while two thirds of a normal screen sat empty beside them.

   Past 900 px the pair and the file list sit side by side, and the results take
   the full width underneath — which is the right way round, because the results
   are the part that grows with the number of files. Choosing the formats and
   dropping the files in are also the two halves of one thought, and having both
   on screen at once is what stops the tool feeling like a form to fill in.

   align-items:start, so the shorter of the two keeps its own height instead of
   growing white space to match its neighbour. */
.atrank-conv-track{
  display:grid; grid-template-columns:minmax(0,1fr); gap:12px;
  max-width:1060px; margin:0 auto; align-items:start;
}
@media (min-width:900px){
  .atrank-conv-track{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .atrank-conv #atrank-conv-resultCard{ grid-column:1 / -1; }
}.atrank-tool-root .atrank-card {
	transition: border-color .2s var(--ease);
}
.atrank-tool-root .atrank-card.is-done{ border-color:var(--ok); }
.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;
}
/* The step number: a filled disc, so the trail through the three cards is
   readable at a glance rather than only in the headings. */
.atrank-conv-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;
}
.atrank-tool-root .atrank-card.is-done .atrank-conv-num{ background:var(--ok); }
.atrank-conv-sub{ margin:0 0 11px; color:var(--muted); font-size:12.5px; max-width:70ch; }

.atrank-conv-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* ── The pair of selects ────────────────────────────────────────────────── */
.atrank-conv-pair{ display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; }
.atrank-conv-field{
  display:flex; flex-direction:column; gap:5px; flex:1 1 190px; min-width:150px;
  font-size:12.5px; font-weight:600; color:var(--muted);
}
.atrank-conv-field select, .atrank-conv-field input{
  font:inherit; font-size:14px; font-weight:500; color:var(--txt);
  padding:9px 11px; border:1px solid var(--line2); border-radius:var(--r);
  background:var(--panel); box-shadow:var(--field-inset); width:100%;
  transition:border-color .18s var(--ease);
}
.atrank-conv-field select:hover{ border-color:var(--accent); }
.atrank-conv-field select:focus-visible, .atrank-conv-field input:focus-visible{ outline:none; box-shadow:var(--ring); }

.atrank-conv-swap{
  display:grid; place-items:center; width:36px; height:36px; margin-bottom:1px; flex-shrink:0;
  border:1px solid var(--line2); border-radius:50%; background:var(--panel);
  color:var(--muted); cursor:pointer; padding:0;
  transition:color .18s var(--ease), border-color .18s var(--ease), transform .2s var(--ease);
}
.atrank-conv-swap:hover{ color:var(--accent); border-color:var(--accent); transform:rotate(180deg); }
.atrank-conv-swap:focus-visible{ outline:none; box-shadow:var(--ring); }

/* ── The verdict line ────────────────────────────────────────────────────
   The one element that carries the tool's promise: it says what will happen
   before it happens. Three states, and the red one has to be as legible as the
   green one — a refusal nobody reads is a refusal that generates a support
   e-mail. */
.atrank-conv-verdict{
  display:flex; align-items:flex-start; gap:8px; margin-top:11px;
  padding:9px 12px; border-radius:var(--r); font-size:12.5px;
  border:1px solid var(--line); background:var(--panel2);
}
.atrank-conv-verdict.is-ok{ background:var(--ok-soft); border-color:var(--ok); }
.atrank-conv-verdict.is-warn{ background:var(--warn-soft); border-color:var(--warn); }
.atrank-conv-verdict.is-err{ background:var(--err-soft); border-color:var(--err); }
.atrank-conv-vmark{ display:flex; flex-shrink:0; padding-top:2px; }
.atrank-conv-vwhy{ color:var(--muted); }

.atrank-conv-options{ margin-top:11px; padding-top:11px; border-top:1px solid var(--line); }
.atrank-conv-options p{ margin:6px 0 0; }

/* ── Sliders ─────────────────────────────────────────────────────────────— */
.atrank-conv-slider{ display:flex; align-items:center; gap:12px; font-size:12.5px; font-weight:600; color:var(--muted); }
.atrank-conv-slider > span:last-child{ min-width:52px; text-align:right; color:var(--txt); }
.atrank-conv-range{ -webkit-appearance:none; appearance:none; flex:1; height:4px; border-radius:3px;
  background:var(--line); outline:none; }
.atrank-conv-range::-webkit-slider-thumb{ -webkit-appearance:none; width:17px; height:17px; border-radius:50%;
  background:var(--accent); border:2px solid var(--panel); cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.atrank-conv-range::-moz-range-thumb{ width:15px; height:15px; border-radius:50%;
  background:var(--accent); border:2px solid var(--panel); cursor:pointer; }
.atrank-conv-range:focus-visible{ box-shadow:var(--ring); }

/* ── The drop zone ───────────────────────────────────────────────────────— */
.atrank-conv-file{ display:block; width:100%; cursor:pointer; }
.atrank-conv-file input[type="file"]{
  /* Off-screen rather than display:none: a hidden input cannot be reached by
     the keyboard, and the label is what is styled. */
  position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; clip-path:inset(50%);
}
.atrank-conv-drop{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  min-height:76px; padding:14px 16px; text-align:center;
  border:2px dashed var(--line2); border-radius:var(--r-lg);
  background:var(--inset); color:var(--txt); font-weight:600;
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
.atrank-conv-drop:hover, .atrank-conv-drop.is-over{ border-color:var(--accent); background:var(--accent-soft); }
.atrank-conv-file input:focus-visible + .atrank-conv-drop,
.atrank-conv-file input:focus-visible ~ .atrank-conv-drop{ box-shadow:var(--ring); }

.atrank-conv-fileinfo{ margin-top:12px; font-size:13px; color:var(--muted); }
.atrank-conv-fileinfo code{ font-family:var(--mono); font-size:12.5px; }

/* ── The queue ───────────────────────────────────────────────────────────—
   The list of files waiting to be converted. Each row shows its own state, so
   during a batch the progress is visible where the files are and not only in
   the bar above. */
.atrank-conv-queue{ margin-top:10px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--panel2); overflow:hidden; max-height:40vh; overflow-y:auto; }
.atrank-conv-qrow{ display:flex; align-items:flex-start; gap:8px; padding:7px 10px;
  border-top:1px solid var(--line); font-size:12.5px; }
.atrank-conv-qrow:first-child{ border-top:none; }
.atrank-conv-qrow.is-err code{ color:var(--err); }
.atrank-conv-qmark{ display:flex; flex-shrink:0; padding-top:2px; width:15px; }
.atrank-conv-qmark svg{ display:block; }
/* A file still waiting gets a quiet dot rather than a tick or a cross: the row
   has to read as "not yet", which neither of those does. */
.atrank-conv-qdot{ width:7px; height:7px; margin:4px; border-radius:50%;
  background:var(--line2); flex-shrink:0; }
.atrank-conv-qname{ flex:1; min-width:0; }
.atrank-conv-qname code{ font-family:var(--mono); font-size:12.5px; word-break:break-all; }
.atrank-conv-qsize{ flex-shrink:0; color:var(--muted); white-space:nowrap; font-size:12.5px; padding-top:1px; }
.atrank-conv-qdrop{ flex-shrink:0; display:grid; place-items:center; width:22px; height:22px; padding:0;
  border:none; background:transparent; color:var(--dim); border-radius:50%; cursor:pointer;
  transition:color .18s var(--ease), background .18s var(--ease); }
.atrank-conv-qdrop:hover{ color:var(--err); background:var(--hover); }
.atrank-conv-qdrop:focus-visible{ outline:none; box-shadow:var(--ring); }

/* ── Result ──────────────────────────────────────────────────────────────— */
.atrank-conv-table{ width:100%; border-collapse:collapse; font-size:13px; }
.atrank-conv-table th{
  text-align:left; padding:6px 12px 6px 0; width:84px; vertical-align:top;
  color:var(--dim); font-weight:600; font-size:12.5px; white-space:nowrap;
}
.atrank-conv-table td{ padding:6px 0; vertical-align:top; color:var(--txt); }
.atrank-conv-table tr + tr th, .atrank-conv-table tr + tr td{ border-top:1px solid var(--line); }
.atrank-conv-table code{ font-family:var(--mono); font-size:12.5px; word-break:break-all; }

/* ── The batch list ──────────────────────────────────────────────────────
   One row per file. The status mark is drawn rather than written, so a failed
   row reads as failed before any of its text is. */
.atrank-conv-summary{ margin:0 0 12px; font-size:13px; color:var(--txt); }
.atrank-conv-batch{ width:100%; border-collapse:collapse; font-size:13px; }
.atrank-conv-batch td{ padding:6px 8px 6px 0; vertical-align:top; border-top:1px solid var(--line); }
.atrank-conv-batch tr:first-child td{ border-top:none; }
.atrank-conv-batch tr.is-err code{ color:var(--err); }
.atrank-conv-batch code{ font-family:var(--mono); font-size:12.5px; word-break:break-all; }
.atrank-conv-bmark{ width:22px; padding-right:0 !important; }
.atrank-conv-bmark svg{ display:block; margin-top:2px; }
.atrank-conv-bsize{ white-space:nowrap; color:var(--muted); text-align:right; }
/* The per-row note sits UNDER the file name rather than beside it: these are
   full sentences, and a third column of prose makes the table unreadable. */
.atrank-conv-bnote{ display:block; margin-top:3px; }
.atrank-conv-bdl{ padding:5px 13px; font-size:12.5px; white-space:nowrap; }

.atrank-conv-progress{ height:6px; border-radius:4px; background:var(--line); overflow:hidden; }
.atrank-conv-progress span{ display:block; height:100%; background:var(--accent); border-radius:4px;
  transition:width .25s var(--ease); }
.atrank-tool-root .atrank-btn-secondary{ background:transparent; color:var(--muted); border-color:var(--line2); }
.atrank-tool-root .atrank-btn-secondary:hover{ color:var(--accent); border-color:var(--accent); background:var(--hover); }
.atrank-tool-root .atrank-toast.is-warn{ background:var(--warn); color:#fff; }

/* ── Narrow ──────────────────────────────────────────────────────────────— */
@media (max-width:600px){
  .atrank-conv header{ padding:10px 12px; gap:8px; }
.atrank-tool-root .atrank-status{
	order: 9;
	width: 100%;
}
  .atrank-conv main{ padding:12px; }
  .atrank-conv-pair{ flex-direction:column; align-items:stretch; }
  /* The swap arrow points down when the two selects are stacked; sideways
     would be a lie about which way the values move. */
  .atrank-conv-swap{ transform:rotate(90deg); align-self:center; }
  .atrank-conv-swap:hover{ transform:rotate(270deg); }
.atrank-tool-root .atrank-btn{
	flex: 1 1 auto;
}
  /* The size columns are the first thing to go when there is no room. */
  .atrank-conv-bsize, .atrank-conv-qsize{ display:none; }
  .atrank-conv-batch td{ padding:7px 6px 7px 0; }
}

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