/* jewell-auth pages. Served from 'self' (no inline styles under the CSP).
   Modern Web Guidance 1.0.0: dark-mode + color (tokens, prefers-color-scheme fallback, forced colors),
   form-factor-adaptation (44px targets, 320px reflow), accessibility (:focus-visible). */
:root {
  color-scheme: light dark;
  --bg-light: #f4f5f7; --bg-dark: #0f1115;
  --card-light: #ffffff; --card-dark: #1a1d23;
  --text-light: #14161a; --text-dark: #eef0f3;
  --muted-light: #4a4f57; --muted-dark: #b9bec7;
  --border-light: #767c86; --border-dark: #858c98;
  --btn-light: #14161a; --btn-dark: #eef0f3;
  --btn-text-light: #ffffff; --btn-text-dark: #14161a;
  --focus-light: #1a56c8; --focus-dark: #8ab4ff;
  --err-light: #a3141c; --err-dark: #ff9a9f;
  --ok-light: #11663a; --ok-dark: #7fe0a6;
  --tag-light: #e6e9ee; --tag-dark: #2b3039;
  --bg: var(--bg-light); --card: var(--card-light); --text: var(--text-light); --muted: var(--muted-light);
  --border: var(--border-light); --btn: var(--btn-light); --btn-text: var(--btn-text-light); --focus: var(--focus-light);
  --err: var(--err-light); --ok: var(--ok-light); --tag: var(--tag-light);
  --target: 44px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--bg-dark); --card: var(--card-dark); --text: var(--text-dark); --muted: var(--muted-dark);
    --border: var(--border-dark); --btn: var(--btn-dark); --btn-text: var(--btn-text-dark); --focus: var(--focus-dark);
    --err: var(--err-dark); --ok: var(--ok-dark); --tag: var(--tag-dark);
  }
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 1rem/1.5 system-ui, sans-serif; background: var(--bg); color: var(--text); overflow-wrap: anywhere; }
main { inline-size: min(30rem, 100% - 2rem); margin: clamp(1rem, 6vh, 3rem) auto; padding: clamp(1.25rem, 5vw, 2rem); background: var(--card); border-radius: 12px; box-shadow: 0 1px 4px #0003; }
h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 .5rem; text-wrap: balance; }
h2 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; }
p { margin: .5rem 0; }
.brand { margin: 0 0 .75rem; font-weight: 700; color: var(--muted); letter-spacing: .01em; }
.context { margin: 0 0 1rem; }
.hint { color: var(--muted); font-size: .95rem; font-weight: 400; margin: 0; }
.stack { display: grid; gap: .4rem; margin-block: 1rem; }
label { font-weight: 600; }
input, select, textarea { inline-size: 100%; min-block-size: var(--target); font: inherit; padding: .5rem .65rem; color: var(--text); background: var(--card); border: 1px solid var(--border); border-radius: 8px; }
input:user-invalid, input[aria-invalid="true"] { border-color: var(--err); border-width: 2px; }
button, .button { display: inline-flex; align-items: center; justify-content: center; min-block-size: var(--target); min-inline-size: var(--target); padding: .55rem 1.1rem; font: inherit; font-weight: 600; text-decoration: none; color: var(--btn-text); background: var(--btn); border: 2px solid var(--btn); border-radius: 8px; cursor: pointer; justify-self: start; }
button.secondary { color: var(--text); background: transparent; border-color: var(--text); }
button:disabled { opacity: .6; cursor: progress; }
summary { min-block-size: var(--target); padding-block: .625rem; cursor: pointer; font-weight: 600; }
details { margin-block: 1rem .5rem; }
a { color: var(--focus); }
:where(a, button, summary, input, select, textarea):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.tag { display: inline-block; padding: 0 .5rem; font-size: .8rem; font-weight: 600; line-height: 1.6; border-radius: 999px; background: var(--tag); color: var(--text); vertical-align: .1em; }
.status { min-block-size: 1.5em; margin-block: 1rem 0; }
.status.error { color: var(--err); }
.status.ok { color: var(--ok); }
.status .icon { margin-inline-end: .35em; }
code { font-size: .9em; }
pre { white-space: pre-wrap; word-break: break-all; background: var(--tag); padding: .5rem; border-radius: 6px; }
@media (forced-colors: active) {
  .tag { border: 1px solid CanvasText; }
  main { border: 1px solid CanvasText; }
}

/* The hidden attribute must win over layout classes such as .stack { display: flex }. */
[hidden] { display: none !important; }
.hint code { overflow-wrap: anywhere; }