/* Light monochrome. Colour is reserved for exactly four things — the payment
   action, the OTP nudge, an abort, and a validation error — so that seeing
   colour on this page always means something. Everything else is greyscale.
   The three hues are tuned for a white background and all clear WCAG AA;
   --err matches the red rr/auto.html already uses for error text. */
:root {
  --bg: #ffffff;
  --fg: #14161a;
  --dim: #6a7079;
  --line: #d8dbe0;
  --raised: #f6f7f8;

  --accent: #1a7f37;   /* pay */
  --warn: #9a6700;     /* otp nudge */
  --err: #d1242f;      /* abort, validation error */

  --col: 480px;        /* content column; the page is centred on wider screens */

  color-scheme: light;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  -webkit-text-size-adjust: 100%;
}
/* Phone-first, but readable on a desktop: cap the column and centre it rather
   than letting 12px monospace log lines run the full width of a wide screen. */
main {
  max-width: var(--col);
  margin-inline: auto;
}
.pad { padding: 16px; }
h1 { font-size: 16px; margin: 0 0 16px; letter-spacing: 2px; }
input, button {
  font: inherit;
  width: 100%;
  padding: 12px;
  margin: 0 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--fg);
}
/* Ordinary actions (unlock, start, use code) stay monochrome. Only the payment
   link earns colour — see .paybtn. */
button {
  background: var(--fg);
  color: var(--bg);
  font-weight: 700;
  border: none;
  cursor: pointer;
}
button[disabled] { opacity: .35; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0 0 20px; }
dt { color: var(--dim); }
dd { margin: 0; overflow-wrap: anywhere; }
.err { color: var(--err); }
ul.errors { padding-left: 18px; color: var(--err); }

.status {
  color: var(--dim);
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
  margin-bottom: 8px;
  overflow-wrap: anywhere;
}
.status.err { color: var(--err); font-weight: 700; }
.log {
  margin: 0;
  padding: 0 0 96px;          /* clear the bottom bar */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--fg);
  max-height: 70vh;
  overflow-y: auto;
}
.paybtn {
  display: block;
  padding: 16px;
  margin: 0 0 12px;
  border-radius: 8px;
  background: var(--accent);
  color: #ffffff;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
/* On white a pale bar would not read as floating above the log, so it gets a
   tint plus a shadow rather than the border alone that sufficed on dark.
   The surface stays full-bleed on a wide screen — a floating 480px bar
   detached from the edges reads as a stray dialog — but its horizontal
   padding grows so the field lines up with the column above it. */
#otpbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding-block: 12px calc(12px + env(safe-area-inset-bottom));
  padding-inline: max(16px, calc((100% - var(--col)) / 2));
  background: var(--raised);
  border-top: 1px solid var(--line);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, .08);
  will-change: transform;
}
#otpbar[hidden] { display: none; }
.otpnote { color: var(--dim); margin-bottom: 8px; font-size: 12px; }
.otpnote.warn { color: var(--warn); font-weight: 700; }
.otprow { display: flex; gap: 8px; }
.otprow input {
  margin: 0;
  letter-spacing: 6px;
  text-align: center;
}
.otprow input.bad { border-color: var(--err); color: var(--err); }
.otprow button { margin: 0; width: auto; flex: 0 0 auto; padding: 12px 16px; }