/* S1/S2 auth spike — throwaway. Deliberately dependency-free: no CDN, no build step. */

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 12px;
  font: 13px/1.45 -apple-system, "Segoe UI", system-ui, sans-serif;
  color: #201f1e;
  background: #fff;
}

h1 { font-size: 16px; margin: 0 0 2px; }
h2 { font-size: 13px; margin: 16px 0 6px; text-transform: uppercase; letter-spacing: .04em; color: #605e5c; }

.env {
  font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #605e5c;
  word-break: break-all;
  margin: 0 0 12px;
}

button {
  font: inherit;
  padding: 6px 12px;
  margin: 0 6px 6px 0;
  border: 1px solid #8a8886;
  border-radius: 2px;
  background: #f3f2f1;
  cursor: pointer;
}
button.primary { background: #0f6cbd; border-color: #0f6cbd; color: #fff; }
button:disabled { opacity: .45; cursor: default; }

ol.steps { list-style: none; margin: 0; padding: 0; }
ol.steps li { padding: 6px 0; border-bottom: 1px solid #edebe9; }
ol.steps .label { font-weight: 600; }
ol.steps .detail {
  font: 11px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #605e5c;
  white-space: pre-wrap;
  word-break: break-all;
  margin-top: 2px;
}
.mark { display: inline-block; width: 1.3em; }
.pass .mark { color: #107c10; }
.fail .mark { color: #a4262c; }
.wait .mark { color: #8a8886; }

textarea {
  width: 100%;
  min-height: 60px;
  font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding: 6px;
  border: 1px solid #8a8886;
  border-radius: 2px;
}

pre.log {
  font: 11px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: #faf9f8;
  border: 1px solid #edebe9;
  padding: 8px;
  max-height: 260px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

.banner {
  padding: 8px 10px;
  border-radius: 2px;
  margin: 0 0 12px;
  border-left: 3px solid #a4262c;
  background: #fdf3f4;
}
.banner.ok { border-left-color: #107c10; background: #f1faf1; }