/* F3D-SSO additions on top of app.css (copied from F3D-Sonar): secondary
   buttons, the choice of second factor, recovery codes, account and admin
   tables. Same tokens, nothing that changes the sign-in card itself. */
button.btn.ghost,
a.btn.ghost {
  background: transparent;
  color: var(--accent-ink);
}
button.btn.ghost:hover,
a.btn.ghost:hover {
  background: var(--soft);
  border-color: var(--accent);
}
button.btn.danger {
  background: var(--bad);
  border-color: var(--bad);
}
.wide {
  max-width: 760px;
}
.sep {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--mute);
  font-size: 12.5px;
  margin: 18px 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.sep::before,
.sep::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--line);
}
details.factor {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 0 0 10px;
  background: var(--bg);
}
details.factor summary {
  cursor: pointer;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
details.factor summary .i {
  color: var(--accent);
}
details.factor[open] summary {
  margin-bottom: 12px;
}
ol.codes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 18px;
  padding: 14px 14px 14px 34px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 15px;
}
.secret {
  display: block;
  text-align: center;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 20px;
  letter-spacing: 0.04em;
  padding: 14px;
  background: var(--bg);
  border: 1px dashed var(--accent);
  border-radius: 8px;
  user-select: all;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
td form {
  display: inline;
}
.actions form {
  margin: 0;
}
.btn-mini.ghost {
  background: transparent;
  color: var(--accent-ink);
}
.btn-mini.danger {
  background: var(--bad);
  border-color: var(--bad);
}
select {
  font: inherit;
  font-size: 15px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}
.page h1 {
  margin-top: 6px;
}
.page section {
  margin: 0 0 16px;
}
.ok-note {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--soft);
  border: 1px solid var(--accent);
  color: var(--accent-ink);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 0 0 16px;
  font-weight: 600;
}
.js-only[hidden] {
  display: none;
}