/* src/styles/views/lock.css — the lock page (spec §8.4): hinomaru over the serif wordmark, one state line,
   six PIN boxes under one invisible input, the message line, the caption. Tokens only, so light and dark
   follow tokens.css. States arrive as .lock-screen[data-state]; motion is off under reduced motion. */

.lock-screen {
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  /* Top-anchored at an optical third, so a message appearing below never moves what is above it
     and the boxes stay clear of the iPhone keyboard. */
  padding: calc(var(--safe-top) + clamp(56px, 19vh, 188px)) calc(var(--gutter) + var(--safe-right))
    calc(var(--safe-bottom) + var(--s-8)) calc(var(--gutter) + var(--safe-left));
}

.lock-column {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ── Mark ────────────────────────────────────────────────────── */
.lock-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  margin-bottom: var(--s-4);
  transition: transform 520ms var(--ease-out);
}

.lock-wordmark {
  font: 500 var(--fs-display)/var(--lh-display) var(--font-serif);
  letter-spacing: .04em;
  color: var(--text);
}

/* ── State line: title in ink, detail in secondary ink ───────── */
.lock-state {
  margin-top: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  max-width: 30ch;
}

.lock-title {
  font: italic 400 var(--fs-title-3)/var(--lh-title-3) var(--font-serif);
  color: var(--text);
  text-wrap: balance;
}

.lock-detail {
  font: 400 var(--fs-small)/var(--lh-small) var(--font-sans);
  color: var(--text-2);
}

.lock-detail:empty { display: none; }

/* ── Six boxes, one invisible input laid over them ───────────── */
.lock-pin {
  position: relative;
  width: min(100%, 304px);   /* 6 × 44 + 5 × 8 */
  margin-top: var(--s-6);
}

.lock-boxes {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s-2);
}

.lock-box {
  position: relative;
  height: 56px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  background: var(--surface);
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}

/* A filled box: a 10 px ink dot. */
.lock-box::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--text);
  opacity: 0;
  transform: scale(.4);
  transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}

.lock-box.is-filled::before {
  opacity: 1;
  transform: none;
}

/* The box that takes the next digit, while the field has focus: a 2 px ink underline. */
.lock-box::after {
  content: '';
  position: absolute;
  left: 30%;
  right: 30%;
  bottom: 11px;
  height: 2px;
  border-radius: 1px;
  background: var(--text);
  opacity: 0;
}

.lock-pin:focus-within .lock-box.is-current { border-color: var(--text-3); }
.lock-pin:focus-within .lock-box.is-current::after { opacity: 1; }

.lock-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-2);
  background: transparent;
  opacity: 0;
  font-size: 16px;            /* ≥ 16 px: iOS never zooms */
  color: transparent;
  caret-color: transparent;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: text;
}

.lock-input:disabled { cursor: default; }

/* Sent, waiting for the answer: the dots step back. */
.lock-pin.is-busy .lock-box::before { opacity: .4; }

/* Wrong PIN: shu edges until the next digit. */
.lock-pin.is-wrong .lock-box { border-color: var(--accent-text); }

/* Waiting out a countdown: the boxes recede to hairlines. */
.lock-pin.is-disabled .lock-box {
  border-color: var(--line);
  background: transparent;
}

/* ── Message line (shu ink) and its quiet variant ────────────── */
.lock-msg {
  margin-top: var(--s-4);
  min-height: calc(2 * var(--lh-small));
  max-width: 32ch;
  font: 400 var(--fs-small)/var(--lh-small) var(--font-sans);
  color: var(--accent-text);
  text-wrap: balance;
}

.lock-msg.is-quiet { color: var(--text-3); }
.lock-count { font-variant-numeric: tabular-nums lining-nums; }

/* Without a PIN field there is nothing to reserve room for. */
.lock-screen:is([data-state="check"], [data-state="offline"], [data-state="empty"]) .lock-msg:empty { display: none; }

.lock-retry {
  width: min(100%, 304px);
  margin-top: var(--s-6);
}

.lock-retry:disabled { opacity: .6; cursor: default; }

/* ── Caption under a short ink rule ──────────────────────────── */
.lock-caption {
  margin-top: var(--s-6);
  font: 400 var(--fs-caption)/var(--lh-caption) var(--font-sans);
  color: var(--text-3);
}

.lock-caption::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  margin: 0 auto var(--s-4);
  background: var(--line-strong);
}

/* ── Motion: a quiet arrival, the shake, the sunrise ─────────── */
@keyframes lock-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* backwards, not both: after it runs the sunrise fade must still win. */
.lock-state, .lock-pin, .lock-retry {
  animation: lock-in var(--dur-3) var(--ease-out) backwards;
}

/* Failure: shake. */
@keyframes lock-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

.lock-boxes.lock-shake {
  animation: lock-shake 0.4s var(--ease-out);
}

/* Success: sunrise — the dot rises, the rest fades. */
.lock-sunrise .lock-dot {
  transform: translateY(-16px);
}

.lock-sunrise .lock-wordmark,
.lock-sunrise .lock-state,
.lock-sunrise .lock-pin,
.lock-sunrise .lock-msg,
.lock-sunrise .lock-retry,
.lock-sunrise .lock-caption {
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out);
}

.lock-sunrise .lock-wordmark { transition-delay: 120ms; }

@media (prefers-reduced-motion: reduce) {
  .lock-dot, .lock-box, .lock-box::before { transition: none; }
  .lock-state, .lock-pin, .lock-retry, .lock-boxes.lock-shake { animation: none; }
}