/* Extracted from the page rather than inlined so the Content-Security-Policy in
   `_headers` can be strict. An inline <style> block would force
   `style-src 'unsafe-inline'`, which weakens the same policy that is the real
   clickjacking and injection defence on a screen where customers type a
   password. Same reasoning as consent.js. */
:root {
  color-scheme: light dark;
  --line: #d4d4d8;
  --muted: #6b7280;
  --accent: #2563eb;
  --danger: #b91c1c;
}
@media (prefers-color-scheme: dark) {
  :root { --line: #3f3f46; --muted: #a1a1aa; --danger: #f87171; }
}

* { box-sizing: border-box; }

body {
  font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  max-width: 30rem;
  margin: 0 auto;
  padding: 3rem 1.25rem;
}

h1 { font-size: 1.3rem; margin: 0 0 .35rem; }
.sub { color: var(--muted); margin: 0 0 1.5rem; }

.card {
  border: 1px solid var(--line);
  border-radius: .6rem;
  padding: 1.1rem;
  margin-bottom: 1rem;
}

label { display: block; font-size: .85rem; color: var(--muted); margin: .6rem 0 .2rem; }

input {
  width: 100%;
  padding: .55rem .6rem;
  border: 1px solid var(--line);
  border-radius: .4rem;
  font: inherit;
  background: transparent;
  color: inherit;
}

button {
  font: inherit;
  padding: .55rem 1rem;
  border-radius: .4rem;
  border: 1px solid transparent;
  cursor: pointer;
  margin-top: .75rem;
}
button[disabled] { opacity: .55; cursor: progress; }

.primary { background: var(--accent); color: #fff; }
.ghost { background: transparent; border-color: var(--line); color: inherit; }

.row { display: flex; gap: .5rem; }

ul.scopes { margin: .5rem 0 0; padding-left: 1.1rem; }

.err { color: var(--danger); }

.target {
  font-size: .8rem;
  color: var(--muted);
  margin-top: .9rem;
  word-break: break-all;
  border-top: 1px solid var(--line);
  padding-top: .7rem;
}