/* ─────────────────────────────────────────────────────────────────────────────
   identity/identity-pin.css
   The one PIN field look. Pairs with identity/identity-pin-field.js.

   OWNERSHIP. This lives in identity/ for the same reason the module does: the
   PIN is identity's, and identity-pin-policy.js was already here. It was
   briefly in shell/, grouped by "used in many places" rather than "owned by one
   domain". Those are different rules and only the second one is ownership.

   THIS FILE WINS. It is not a fallback and it does not defer to the host page.
   Every PIN prompt in the application renders identically, and changing the
   look here changes all of them together. That is the point of there being one.

   THE LOOK IS THE GATE'S. gate/gate-enter.html's PIN was the one field on the
   site that read as finished, so its box is the standard: full width, one-pixel
   rule, ten-pixel corners, centred mono digits, accent border on focus. The
   reveal eye is part of why it read as finished, so it is in the module now
   rather than in one page's script.

   SPECIFICITY, AND THE ONE TRAP IN IT. Every rule that matters is written at
   input.pin-field-input.pin-field-input, a doubled class. That is (0,0,2,1),
   which outranks any host page's input[type="password"] rule (0,0,1,1) on
   specificity rather than on load order. Link this file first, last, or from a
   stylesheet three levels down and the PIN still renders as a PIN.

   The doubled class rather than input[type="password"].pin-field-input, which
   is the same specificity, because THE REVEAL BUTTON FLIPS type TO "text". A
   selector keyed to type="password" silently drops the entire PIN typography
   the moment someone taps the eye. The doubled class is type-agnostic and
   cannot.

   DURABLE RULE: never ship a shared stylesheet whose correctness rests on load
   order. Win on specificity or do not win.

   TOKENS ARE THE HOST'S. This file names no palette. It reads --accent, --ink,
   --ink-mid, --ink-faint, --surface and --rule-hard, falling back through the
   other families the site uses (--head / --body / --muted / --copper) so the
   green, blue and gold pages each get their own colour without a second
   stylesheet. Same arrangement as the rail: the host owes the tokens.
   ───────────────────────────────────────────────────────────────────────────── */

.pin-field-label {
  display: block;
  margin-bottom: 0.4rem;
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint, var(--muted, #8B9298));
}

/* The box and the type, one rule, doubled class so it outranks a host's own
   input styling and survives the type flip. text-indent pulls the centred value
   back by half a space, because the trailing letter-spacing on the last
   character throws it off centre. */
input.pin-field-input.pin-field-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--surface, transparent);
  color: var(--ink, var(--head, #ECE4D3));
  border: 1px solid var(--rule-hard, var(--rule, rgba(236, 228, 211, 0.2)));
  border-radius: 10px;
  padding: 0.85rem 1rem;
  font-family: 'DM Mono', monospace;
  font-size: 1.1rem;
  letter-spacing: 0.3em;
  text-align: center;
  text-indent: 0.3em;
  outline: none;
  transition: border-color 0.2s;
}

input.pin-field-input.pin-field-input:focus {
  border-color: var(--accent, var(--copper, #C67B3E));
}

input.pin-field-input.pin-field-input:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

input.pin-field-input.pin-field-input::placeholder {
  color: var(--ink-mid, var(--body, #8B9298));
  opacity: 1;
}

/* THE REVEAL CONTROL. The wrapper is the positioning context; the input keeps
   its own full width inside it. Named pin-field-* rather than reveal-* on
   purpose: gate-enter already has a .reveal-wrap / .reveal-toggle pair for its
   password fields, and two bare class names meaning slightly different things
   is how a shared stylesheet starts fighting its host. */
.pin-field-wrap {
  position: relative;
  display: block;
}

.pin-field-wrap > input.pin-field-input.pin-field-input {
  padding-right: 2.8rem;
}

.pin-field-reveal {
  position: absolute;
  top: 50%;
  right: 0.8rem;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  padding: 0.2rem;
  margin: 0;
  cursor: pointer;
  color: var(--ink-faint, var(--muted, #8B9298));
  display: inline-flex;
  align-items: center;
  line-height: 0;
  transition: color 0.2s;
}

.pin-field-reveal:hover {
  color: var(--ink, var(--head, #ECE4D3));
}

.pin-field-reveal:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pin-field-reveal svg {
  width: 18px;
  height: 18px;
  display: block;
}

@media (max-width: 600px) {
  input.pin-field-input.pin-field-input {
    font-size: 1rem;
    letter-spacing: 0.28em;
  }
}