/*!
 * @Rank – QR Generator
 * 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-qr: 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.
 *
 * One rule here is not styling but function: the code preview sits on a
 * CHECKERBOARD when the background is transparent, because a transparent QR code
 * on a white card looks identical to a white one and the difference matters the
 * moment it is placed on anything.
 */

/* ── 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-qr {
}

/* 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-qr, .atrank-qr *{ 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-qr [hidden]{ display:none !important; }.atrank-qr {
	-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. */

/* ── 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-qr 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-qr main{ display:block; padding:10px 12px 12px; }

/* ── The layout ───────────────────────────────────────────────────────────
   A grid, not a column. Stacked, these three cards were about 1,270 px tall on
   a 1,280 px-wide screen — a page of scrolling to see three cards that each used
   a third of the width available to them.

   Past 980 px the password keeps the full width (it is the thing you came for,
   and a long one needs the room) while the strength and the settings sit side by
   side. That is not only shorter: dragging the length slider and watching the
   bits move is the whole point of the tool, and it should not require scrolling
   between the cause and the effect.

   align-items:start rather than stretch, so the shorter card stays its own
   height instead of growing a field of empty white to match its neighbour. */
.atrank-qr-track{
  display:grid; grid-template-columns:minmax(0,1fr); gap:12px;
  max-width:1180px; margin:0 auto; align-items:start;
}
@media (min-width:980px){
  .atrank-qr-track{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .atrank-qr #atrank-qr-outCard{ grid-column:1 / -1; }
}
.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-qr-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-qr-row{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }

/* ── The layout ───────────────────────────────────────────────────────────
   Past 1000 px the content and the options share the left column while the code
   sits in its own on the right, tall enough to span both. That pairing is the
   point rather than a way to save height: every control on the left changes the
   picture on the right, and having to scroll between a colour picker and the
   thing it colours is the difference between adjusting and guessing. */
.atrank-qr-track{
  display:grid; grid-template-columns:minmax(0,1fr); gap:12px;
  max-width:1180px; margin:0 auto; align-items:start;
}
@media (min-width:1000px){
  .atrank-qr-track{ grid-template-columns:minmax(0,1fr) minmax(300px,380px); }
  .atrank-qr #atrank-qr-contentCard{ grid-column:1; grid-row:1; }
  .atrank-qr #atrank-qr-optCard{ grid-column:1; grid-row:2; }
  /* The code spans both rows and sticks, so it stays in view while the options
     below are being worked through. */
  .atrank-qr #atrank-qr-codeCard{
    grid-column:2; grid-row:1 / span 2;
    position:sticky; top:calc(var(--atrank-header-top, 0px) + 62px);
  }
}

/* ── The content type tabs ───────────────────────────────────────────────— */
.atrank-qr-types{ display:flex; gap:4px; flex-wrap:wrap; margin-bottom:12px; }
.atrank-qr-type{
  appearance:none; border:1px solid var(--line2); background:transparent;
  color:var(--muted); font:inherit; font-size:12.5px; font-weight:600;
  padding:6px 12px; border-radius:var(--r); cursor:pointer; white-space:nowrap;
  transition:color .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.atrank-qr-type:hover{ color:var(--accent); border-color:var(--accent); background:var(--hover); }
.atrank-qr-type.is-on{ color:var(--on-accent); background:var(--accent); border-color:var(--accent); }
.atrank-qr-type:focus-visible{ outline:none; box-shadow:var(--ring); }

/* Two fields per row where there is room: a Wi-Fi form of four stacked fields is
   taller than it needs to be, and the pairs belong together anyway. */
.atrank-qr-fields{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:10px; }
.atrank-qr-fields .atrank-qr-wide{ grid-column:1 / -1; }
.atrank-qr-fields .atrank-qr-check{ grid-column:1 / -1; }

/* ── The code itself ─────────────────────────────────────────────────────—
   The checkerboard shows through a transparent background. It is drawn in CSS
   rather than shipped as an image, and it is the only way the preview can tell
   the truth about transparency. */
.atrank-qr-stage{
  display:grid; place-items:center; padding:12px; border-radius:var(--r);
  background:var(--checker); box-shadow:var(--area-inset); min-height:min(180px, max(130px, 18vh));
}
.atrank-qr-stage canvas{
  display:block; max-width:100%; height:auto;
  /* Nearest-neighbour: a QR code smoothed by the browser is a QR code with
     uncertain module edges, which is exactly what a scanner cannot afford. */
  image-rendering:pixelated;
}
.atrank-qr-empty{
  margin:0; padding:26px 14px; color:var(--dim); font-size:13px; text-align:center;
}

/* ── The readout under the code ──────────────────────────────────────────— */
.atrank-qr-readout{ margin:11px 0 0; font-size:12.5px; }
.atrank-qr-rline{
  display:flex; gap:10px; padding:5px 0; border-top:1px solid var(--line);
}
.atrank-qr-rline:first-child{ border-top:none; }
.atrank-qr-readout dt{ flex:0 0 82px; color:var(--dim); font-weight:600; }
.atrank-qr-readout dd{ margin:0; flex:1; color:var(--txt); }

/* ── The L/M/Q/H segmented control ───────────────────────────────────────— */
.atrank-qr-seg{ display:inline-flex; border:1px solid var(--line2); border-radius:var(--r); overflow:hidden; }
.atrank-qr-segbtn{
  appearance:none; border:none; background:transparent; color:var(--muted);
  font:inherit; font-size:13px; font-weight:700; padding:6px 16px; cursor:pointer;
  border-right:1px solid var(--line2);
  transition:color .16s var(--ease), background .16s var(--ease);
}
.atrank-qr-segbtn:last-child{ border-right:none; }
.atrank-qr-segbtn:hover{ color:var(--accent); background:var(--hover); }
.atrank-qr-segbtn.is-on{ color:var(--on-accent); background:var(--accent); }
.atrank-qr-segbtn:focus-visible{ outline:none; box-shadow:var(--ring); z-index:1; position:relative; }

/* ── Colours ─────────────────────────────────────────────────────────────— */
.atrank-qr-colours{ display:flex; gap:10px 20px; flex-wrap:wrap; align-items:center; margin-top:12px; }
.atrank-qr-colour{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:600; color:var(--muted); cursor:pointer;
}
.atrank-qr-colour input[type="color"]{
  width:36px; height:26px; padding:0; border:1px solid var(--line2); border-radius:7px;
  background:none; cursor:pointer;
}
.atrank-qr-colour input[type="color"]:focus-visible{ outline:none; box-shadow:var(--ring); }

/* ── Sliders and the number beside them ─────────────────────────────────— */
.atrank-qr-slider{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.atrank-qr-slider > label{ font-size:12.5px; font-weight:600; color:var(--txt);
  min-width:96px; }
.atrank-qr-range{ -webkit-appearance:none; appearance:none; flex:1; min-width:140px;
  height:4px; border-radius:3px; background:var(--line); outline:none; }
.atrank-qr-range::-webkit-slider-thumb{ -webkit-appearance:none; width:19px; height:19px;
  border-radius:50%; background:var(--accent); border:2px solid var(--panel);
  cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.atrank-qr-range::-moz-range-thumb{ width:17px; height:17px; border-radius:50%;
  background:var(--accent); border:2px solid var(--panel); cursor:pointer; }
.atrank-qr-range:focus-visible{ box-shadow:var(--ring); }
.atrank-qr-spin{
  width:64px; font:inherit; font-size:13.5px; font-weight:700; text-align:center;
  color:var(--txt); padding:5px 7px; border:1px solid var(--line2); border-radius:var(--r);
  background:var(--panel); box-shadow:var(--field-inset);
  font-variant-numeric:tabular-nums;
}
.atrank-qr-spin: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-qr-check{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13px; color:var(--txt); cursor:pointer; user-select:none;
}
.atrank-qr-check.is-off{ opacity:.5; cursor:not-allowed; }
.atrank-qr-check input{
  position:absolute; opacity:0; width:1px; height:1px; pointer-events:none;
}
.atrank-qr-check 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-qr-check span::after{
  content:""; width:9px; height:9px; border-radius:2px; background:transparent;
  transition:background .16s var(--ease);
}
.atrank-qr-check input:checked + span{
  border-color:var(--accent); background:var(--accent);
}
.atrank-qr-check input:checked + span::after{
  background:var(--on-accent);
}
.atrank-qr-check input:focus-visible + span{
  box-shadow:var(--ring);
}

/* ── Pasting a list ────────────────────────────────────────────────────── */

.atrank-qr-field{ display:flex; flex-direction:column; gap:5px;
  font-size:12.5px; font-weight:600; color:var(--muted); }

/* ── Text fields ───────────────────────────────────────────────────────— */
.atrank-qr-field{ display:flex; flex-direction:column; gap:4px; margin-top:11px;
  font-size:12px; font-weight:600; color:var(--muted); }
.atrank-qr-field.is-off{ opacity:.5; }
.atrank-qr-flabel{ font-size:12px; font-weight:600; color:var(--muted); }
.atrank-qr-field textarea, .atrank-qr-field select{
  font:inherit; font-size:13px; color:var(--txt); width:100%;
  padding:7px 10px; border:1px solid var(--line2); border-radius:var(--r);
  background:var(--panel); box-shadow:var(--field-inset); resize:vertical;
}
.atrank-qr-field textarea{ font-family:var(--mono); font-size:12.5px; line-height:1.5; }
.atrank-qr-field textarea:focus-visible, .atrank-qr-field select:focus-visible{
  outline:none; box-shadow:var(--ring);
}
.atrank-qr-field textarea[readonly]{ background:var(--panel2); color:var(--muted); }
.atrank-qr-field input[type="text"]{
  font-family:var(--mono); font-size:13.5px; color:var(--txt); width:100%;
  padding:7px 11px; border:1px solid var(--line2); border-radius:var(--r);
  background:var(--panel); box-shadow:var(--field-inset);
  transition:border-color .18s var(--ease);
}
.atrank-qr-field input[type="text"]:hover:not(:disabled){ border-color:var(--accent); }
.atrank-qr-field input[type="text"]:focus-visible{ outline:none; box-shadow:var(--ring); }
.atrank-qr-field .atrank-hint{ font-weight:400; }
.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:600px){
  .atrank-qr header{ padding:10px 12px; gap:8px; }
.atrank-tool-root .atrank-status{
	order: 9;
	width: 100%;
	text-align: left;
}
  .atrank-qr 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. */
}

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