/* The signed-out screens. Deliberately tiny and dependency-free: these are the
   pages you reach when something has already gone wrong. */
:root {
  --ink: #1c1a17;
  --muted: #6b6459;
  --line: #ddd6ca;
  --bg: #f7f4ee;
  --card: #fffdf9;
  --accent: #7a5c2e;
  --err: #8a2b20;
  --ok: #2c5f3a;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f0ebe2; --muted: #a79e90; --line: #3a352d;
    --bg: #17150f; --card: #201d16; --accent: #d8b166;
    --err: #e8897c; --ok: #86c79a;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100dvh; display: grid; place-items: center;
  padding: 24px 16px; background: var(--bg); color: var(--ink);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.shell { width: 100%; max-width: 25rem; }
.shell.wide { max-width: 34rem; }
.mark {
  font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  font-size: .75rem; color: var(--muted); text-align: center; margin-bottom: 18px;
}
h1 { font-size: 1.4rem; margin: 0 0 4px; letter-spacing: -.01em; }
.lead { margin: 0 0 20px; color: var(--muted); font-size: .95rem; }
form, .card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 22px;
}
.f { display: block; margin-bottom: 16px; }
.lb { display: block; font-weight: 550; font-size: .9rem; margin-bottom: 6px; }
.hint { display: block; color: var(--muted); font-size: .82rem; margin-bottom: 6px; }
input {
  width: 100%; padding: 11px 12px; font: inherit; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: 9px;
}
input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
input[name="code"] {
  font-size: 1.6rem; letter-spacing: .35em; text-align: center;
  font-variant-numeric: tabular-nums;
}
button {
  width: 100%; padding: 12px; font: inherit; font-weight: 600; cursor: pointer;
  color: var(--bg); background: var(--ink);
  border: 1px solid var(--ink); border-radius: 9px;
}
button:hover { opacity: .9; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.notice {
  margin: 0 0 16px; padding: 10px 12px; border-radius: 9px; font-size: .9rem;
  border: 1px solid currentColor;
}
.notice.err { color: var(--err); }
.notice.ok { color: var(--ok); }
.alt { margin: 16px 0 0; text-align: center; font-size: .88rem; }
a { color: var(--accent); }
/* A white plate under the QR in both themes: an inverted code does not scan. */
.qr {
  display: block; width: max-content; margin: 0 auto 14px;
  background: #fff; padding: 8px; border-radius: 10px;
}
.qr svg { display: block; width: 190px; height: 190px; }
.secret {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .95rem;
  text-align: center; letter-spacing: .06em; word-break: break-all;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 9px; padding: 10px; margin: 0 0 18px;
}
.codes {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  margin: 0 0 18px; padding: 0; list-style: none;
}
.codes li {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 7px; padding: 8px; text-align: center;
}

/* ---- setting up the authenticator app ----
   These live HERE and not in app.css: enrolment happens before you have a
   session, so it loads the signed-out stylesheet. Putting them in app.css left
   the "Open my authenticator app" button rendering as a plain underlined link
   — on the one control the whole screen is built around. */
.step { font-size: 1.02rem; margin: 22px 0 6px; letter-spacing: -.01em; }
.step:first-child { margin-top: 0; }
.bigbtn {
  display: block; text-align: center; padding: 15px; border-radius: 9px;
  background: var(--ink); color: var(--bg); text-decoration: none;
  font-weight: 650; margin: 4px 0 6px;
}
.bigbtn:hover { opacity: .9; }
.other-way { margin: 18px 0; border-top: 1px solid var(--line); padding-top: 12px; }
.other-way summary {
  cursor: pointer; color: var(--accent); min-height: 44px;
  display: flex; align-items: center; font-size: .9rem;
}
.other-way .lead { font-size: .88rem; }
.qr { display: block; width: max-content; margin: 0 auto 14px;
      background: #fff; padding: 8px; border-radius: 10px; }
.qr svg { display: block; width: 190px; height: 190px; }
.codes-copy {
  width: 100%; font-family: ui-monospace, Menlo, monospace; font-size: .85rem;
  margin-bottom: 12px; padding: 10px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  resize: vertical;
}