/* Passkeys — the sign-in card's alternative door, and the Account card's list.
 *
 * Two surfaces, one file, matching js/passkeys.js. Everything here is scoped
 * to a `pk-` prefix so neither the auth card's own layout (app.css .loginpanel)
 * nor the Account screen's group rail (js/account.js) loses ownership of
 * anything it already positions.
 *
 * NO NEW COLOURS. UI-DIRECTION-2026-08-22 §3 reserves the four hues by
 * meaning, and the states this feature has are already spoken for: a
 * backed-up passkey is `.pill.on` (mint — healthy), one that lives on a single
 * device is `.pill.neutral` (a difference, not a warning), and Remove is
 * `.iconbtn.danger` (coral — destructive). This file therefore declares
 * layout and one hairline, and reaches for --line / --haze only.
 */

/* ---- the sign-in card ---------------------------------------------------
 *
 * `.hide` is applied in the markup and removed by js/passkeys.js only when the
 * browser can really run a ceremony, so the block must not fight `display:
 * none` — hence no `display` on `.pk-alt` itself beyond the flow default.
 */
.pk-alt {
  margin-top: 14px;
}

/* "or" between the password button and the passkey button: a hairline through
 * the middle with the word sitting in a gap. `aria-hidden` is deliberately NOT
 * set on it — a screen-reader user hearing "or" between two buttons is being
 * told the true thing, that these are two ways to do one job. */
.pk-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  color: var(--haze);
  font-size: 12px;
  text-transform: lowercase;
  letter-spacing: .04em;
}

.pk-or::before,
.pk-or::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
}

/* ---- the Account card ---------------------------------------------------
 *
 * The rows themselves are `.arow` / `.an` / `.asub` / `.pill` — the vocabulary
 * the Security card one place above already uses, so the two cards read as one
 * subject rather than as two designs. This only spaces the block and gives the
 * per-row buttons room to sit together on a narrow phone.
 */
.pk-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* A PASSKEY ROW CARRIES FOUR THINGS, not the usual two.
 *
 * `.arow` is a flex row whose `.an` is `flex: 1; min-width: 0` with
 * `overflow-wrap: anywhere` — perfect for a name beside one pill, and wrong
 * the moment a row also holds Rename AND Remove. MEASURED at 390px: the name
 * column was squeezed to zero and `overflow-wrap: anywhere` then broke
 * "This device" into one letter per line, eleven lines tall.
 *
 * The fix is the one `.arow.engage-row` (app.css:2567) already uses for the
 * same shape: let the row wrap, and give the name a real basis so it takes a
 * line of its own rather than a column of characters. */
.pk-list > .arow {
  flex-wrap: wrap;
  gap: 8px 10px;
}

.pk-list > .arow > .an { flex: 1 1 190px; }

/* On a wide row the pill and the two buttons sit together at the right; on a
 * narrow one they wrap under the name as one group instead of stacking. */
.pk-list > .arow > .pill { margin-left: auto; }

/* The add button, and the "this browser cannot" sentence that replaces it,
 * both want air between themselves and the last passkey row. */
.pk-list > .ghost.wide,
.pk-list > .fineprint {
  margin-top: 12px;
}