/*!
 * @Rank – Password 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-pw: 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 — with ONE exception in spirit: the password itself is set
 * in the monospace stack, and that is not decoration. A random string has to be
 * read off a screen and typed somewhere else, and a proportional font makes I,
 * l and 1 the same shape. The digits and symbols are tinted apart from the
 * letters for the same reason.
 */

/* ── 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-pw {
}/* 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-pw, .atrank-pw *{ 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-pw [hidden]{ display:none !important; }.atrank-pw {
	-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-pw 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-pw 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-pw-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-pw-track{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .atrank-pw #atrank-pw-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-pw-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-pw-row{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }

/* ── The password itself ────────────────────────────────────────────────—
   Monospace, large, and generously spaced. This is the one element on the page
   somebody has to transcribe by hand, so it is optimised for being read
   correctly rather than for looking tidy. */
.atrank-pw-list{ display:flex; flex-direction:column; gap:8px; }
.atrank-pw-item{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border:1px solid var(--line2); border-radius:var(--r);
  background:var(--inset); box-shadow:var(--field-inset);
}
.atrank-pw-value{
  flex:1; min-width:0; font-family:var(--mono); font-size:16px; line-height:1.45;
  /* A long password must wrap rather than scroll the card sideways, and it must
     be allowed to break anywhere — there are no words to keep together. */
  word-break:break-all; user-select:all; color:var(--txt);
}
/* Letters, digits and symbols tinted apart. The accent and the amber are
   reused rather than new colours introduced, so the palette stays at four. */
.atrank-pw-ch.is-alpha{ color:var(--txt); }
.atrank-pw-ch.is-num{ color:var(--accent); font-weight:700; }
.atrank-pw-ch.is-sym{ color:var(--warn); font-weight:700; }
.atrank-pw-one{
  flex-shrink:0; display:grid; place-items:center; width:30px; height:30px; padding:0;
  border:1px solid var(--line2); background:transparent; color:var(--muted);
  border-radius:var(--r); cursor:pointer;
  transition:color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.atrank-pw-one:hover{ color:var(--accent); border-color:var(--accent); background:var(--hover); }
.atrank-pw-one:focus-visible{ outline:none; box-shadow:var(--ring); }
.atrank-pw-empty{ margin:0; padding:14px; color:var(--dim); font-size:13px;
  border:1px dashed var(--line2); border-radius:var(--r); text-align:center; }

/* ── The strength statement ─────────────────────────────────────────────—
   The verdict word and the bit count sit on one line, because neither means
   much without the other: "Strong" is an opinion and "129 bits" is a fact, and
   the pair is a statement. */
.atrank-pw-verdict{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.atrank-pw-vword{ font-size:15px; font-weight:700; letter-spacing:-.01em; color:var(--dim); }
.atrank-pw-vword.is-l0{ color:var(--err); }
.atrank-pw-vword.is-l1{ color:var(--err); }
.atrank-pw-vword.is-l2{ color:var(--warn); }
.atrank-pw-vword.is-l3{ color:var(--ok); }
.atrank-pw-vword.is-l4{ color:var(--ok); }
.atrank-pw-vbits{ font-size:13px; font-weight:600; color:var(--muted);
  font-variant-numeric:tabular-nums; }

.atrank-pw-meter{
  margin-top:8px; height:8px; border-radius:5px; background:var(--line); overflow:hidden;
}
.atrank-pw-meter span{ display:block; height:100%; border-radius:5px; background:var(--dim);
  transition:width .3s var(--ease), background .3s var(--ease); }
.atrank-pw-meter span.is-l0, .atrank-pw-meter span.is-l1{ background:var(--err); }
.atrank-pw-meter span.is-l2{ background:var(--warn); }
.atrank-pw-meter span.is-l3, .atrank-pw-meter span.is-l4{ background:var(--ok); }
.atrank-pw-vsub{ margin:8px 0 0; font-size:12.5px; color:var(--muted); }

.atrank-pw-times{ width:100%; border-collapse:collapse; margin-top:12px; font-size:12.5px; }
.atrank-pw-times caption{
  text-align:left; font-size:12px; font-weight:700; color:var(--txt);
  padding-bottom:5px;
}
.atrank-pw-times th{
  text-align:left; font-weight:600; color:var(--txt); padding:5px 10px 5px 0;
  border-top:1px solid var(--line); vertical-align:top;
}
.atrank-pw-times td{
  padding:5px 0; border-top:1px solid var(--line); text-align:right;
  color:var(--txt); font-weight:700;
  font-variant-numeric:tabular-nums;
  /* Deliberately NOT nowrap any more: in one of two columns the longest times
     ("13 million × the age of the universe") would otherwise force the table
     wider than the card and push the label column to nothing. */
  min-width:9ch;
}
/* The rate under each attacker's name, because "fast hash" is not a number. */
.atrank-pw-rate{ display:block; font-weight:400; font-size:11.5px; color:var(--dim); }

/* ── The pool summary ───────────────────────────────────────────────────— */
.atrank-pw-pool{ margin-top:12px; padding-top:10px; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:12px; }
.atrank-pw-poolsize{ font-weight:700; color:var(--txt); }
.atrank-pw-chip{
  padding:3px 9px; border-radius:var(--r); background:var(--panel2);
  border:1px solid var(--line); color:var(--muted); white-space:nowrap;
}
.atrank-pw-chip b{ color:var(--txt); font-variant-numeric:tabular-nums; }
.atrank-pw-chip.is-off{ color:var(--warn); border-color:var(--warn); background:var(--warn-soft); }

/* ── Sliders and the number beside them ─────────────────────────────────— */
.atrank-pw-slider{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.atrank-pw-slider > label{ font-size:12.5px; font-weight:600; color:var(--txt);
  min-width:96px; }
.atrank-pw-range{ -webkit-appearance:none; appearance:none; flex:1; min-width:140px;
  height:4px; border-radius:3px; background:var(--line); outline:none; }
.atrank-pw-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-pw-range::-moz-range-thumb{ width:17px; height:17px; border-radius:50%;
  background:var(--accent); border:2px solid var(--panel); cursor:pointer; }
.atrank-pw-range:focus-visible{ box-shadow:var(--ring); }
.atrank-pw-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-pw-spin:focus-visible{ outline:none; box-shadow:var(--ring); }

.atrank-pw-sets, .atrank-pw-opts{
  display:flex; gap:7px 18px; flex-wrap:wrap; margin-top:11px;
}
.atrank-pw-sets code{ font-family:var(--mono); font-size:12px; color:var(--muted); }

/* ── 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-pw-check{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13px; color:var(--txt); cursor:pointer; user-select:none;
}
.atrank-pw-check.is-off{ opacity:.5; cursor:not-allowed; }
.atrank-pw-check input{
  position:absolute; opacity:0; width:1px; height:1px; pointer-events:none;
}
.atrank-pw-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-pw-check span::after{
  content:""; width:9px; height:9px; border-radius:2px; background:transparent;
  transition:background .16s var(--ease);
}
.atrank-pw-check input:checked + span{
  border-color:var(--accent); background:var(--accent);
}
.atrank-pw-check input:checked + span::after{
  background:var(--on-accent);
}
.atrank-pw-check input:focus-visible + span{
  box-shadow:var(--ring);
}

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

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

/* ── Text fields ───────────────────────────────────────────────────────— */
.atrank-pw-field{ display:flex; flex-direction:column; gap:4px; margin-top:11px;
  font-size:12px; font-weight:600; color:var(--muted); }
.atrank-pw-field.is-off{ opacity:.5; }
.atrank-pw-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-pw-field input[type="text"]:hover:not(:disabled){ border-color:var(--accent); }
.atrank-pw-field input[type="text"]:focus-visible{ outline:none; box-shadow:var(--ring); }
.atrank-pw-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-pw header{ padding:10px 12px; gap:8px; }
.atrank-tool-root .atrank-status{
	order: 9;
	width: 100%;
	text-align: left;
}
  .atrank-pw 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-pw *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}