/* ===========================================================================
   THE PASSWORD CONTROL — `templates/partials/_password_field.html`.

   docs/DESIGN_SYSTEM.md §6.7 is the form row this sits inside; everything
   here is the eye toggle and the creation-screen checklist, which §6 does
   not yet have a name for. Reported for §6 rather than invented freely:
   the values below are §6.7's own (44px control, --radius-sm, --sp-* gaps)
   and every colour is a token already measured on the ground it is painted
   on (docs/design/contrast_check.py: --muted and --ink on --bg and
   --surface, --success-text on --surface and --bg).

   WHY A FILE OF ITS OWN RATHER THAN base.css, where §7's table says form
   controls live: this lane does not own base.css, and another agent was
   editing it in the same worktree while this was written. A new stylesheet
   the three password screens link is the alternative CLAUDE.md names for
   exactly that situation. When the lanes merge, folding these rules into
   base.css §6.7's block and deleting the three <link>s is a clean change
   and probably the right one.

   NO SHADOWS (§2), no hex (§1.3), logical properties only (§1.2).
   ======================================================================== */

.pw {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  min-inline-size: 0;
}

/* The box that IS the field: the input fills it and the toggle is pinned
   inside it, so the control's height is whatever the hosting screen's own
   input rule says (44px in base.css, 40px in the back office) and this
   file never has to know which. */
.pw__control {
  position: relative;
  display: flex;
  min-inline-size: 0;
}

/* (0,3,0), AND THAT IS THE WHOLE POINT OF THE EXTRA CLASS.

   base.css styles every text-ish input globally with a (0,1,1) attribute
   selector, and `backoffice.css` answers it with `.bo-field .bo-field__input`
   at (0,2,0) — its own comment explains that trap at length. A plain
   `.pw__input` would be (0,1,0) and lose to base.css; `.pw .pw__input`
   would be (0,2,0) and TIE with the back office's rule, leaving the
   padding to whichever stylesheet happened to load second. Three classes
   wins outright in both places, which is what a rule that must survive
   being included into two different screens needs.

   Only the inline-end padding is claimed. Everything else about the field
   — height, border, radius, fill — still belongs to the screen it is on. */
.pw .pw__control .pw__input {
  flex: 1;
  min-inline-size: 0;
  padding-inline-end: 44px;
}

/* A 44px-wide target spanning the field's full height (§1.7's touch target
   on the axis that is actually tight — the field's own height supplies the
   other). Transparent, because it sits ON the field and a fill of its own
   would read as a second control. */
.pw__toggle {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.pw__toggle:hover { color: var(--ink); }

.pw__glyph { display: inline-flex; }

/* ---- the creation-screen checklist --------------------------------------
   Rendered only where the reader is CHOOSING a password. Never on sign-in
   — the partial's own comment says why.

   A met rule changes its mark AND its word (§1.10): `--success-text` alone
   would make the list unreadable to a colour-blind owner, which is most of
   the point of having the words «تم» / «ناقص» in the markup. */
.pw-rules {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.pw-rules__item {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  font-size: var(--fs-12);
  line-height: 1.6;
  color: var(--muted);
}

.pw-rules__item--met { color: var(--success-text); }

.pw-rules__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 14px;
  block-size: 14px;
  flex: none;
}

/* The unmet mark. A drawn circle rather than a glyph, so it cannot pick up
   a font's own idea of what a bullet is at 12px. */
.pw-rules__dot {
  inline-size: 6px;
  block-size: 6px;
  border-radius: var(--radius-pill);
  background: currentColor;
}

.pw-rules__text {
  flex: 1;
  min-inline-size: 0;
}

.pw-rules__state {
  flex: none;
  font-weight: 600;
}