:root {
  color-scheme: light dark;
  --sso-fg: #1c1c1c;
  --sso-bg: #fafaf8;
  --sso-muted: #666;
  --sso-accent: #1f4e79;
  /* Slice TH-U F3: the text on an accent-filled button, per scheme - 8.66:1 on #1f4e79 here, 8.10:1 on #7fb2e5 below
     (white on #7fb2e5 was 2.23:1, under WCAG AA's 4.5:1). */
  --sso-on-accent: #fff;
  --sso-error: #9b1c1c;
  --sso-border: #d8d8d4;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sso-fg: #ececec;
    --sso-bg: #161616;
    --sso-muted: #a7a7a7;
    --sso-accent: #7fb2e5;
    --sso-on-accent: #161616;
    --sso-error: #ff8a80;
    --sso-border: #3a3a3a;
  }
}

html, body {
  margin: 0;
  background: var(--sso-bg);
  color: var(--sso-fg);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.sso-main {
  max-width: 28rem;
  margin: 4rem auto;
  padding: 0 1.25rem;
}

.sso-header {
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--sso-border);
  padding-bottom: 0.5rem;
}

.sso-brand {
  font-weight: 600;
  letter-spacing: 0.02em;
}

h1 {
  font-size: 1.4rem;
  margin: 0 0 1rem;
}

form.sso-form label {
  display: block;
  margin: 0.75rem 0 0.25rem;
  font-weight: 500;
}

form.sso-form input[type="email"],
form.sso-form input[type="password"],
form.sso-form input[type="tel"],
form.sso-form input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--sso-border);
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
}

form.sso-form button {
  margin-top: 1.25rem;
  padding: 0.55rem 1.2rem;
  border: 0;
  border-radius: 4px;
  background: var(--sso-accent);
  color: var(--sso-on-accent);
  font: inherit;
  cursor: pointer;
}

/* Slice TH-U F4: a secondary action is outlined in the accent, never filled, so the one that refuses or removes (Deny,
   "I did not request this", Sign out) is set apart from the page's main action. The accent on the page background is
   8.29:1 light and 8.10:1 dark. */
form.sso-form button.sso-secondary,
.sso-signed-in button {
  border: 1px solid var(--sso-accent);
  background: transparent;
  color: var(--sso-accent);
}

form.sso-form button.sso-secondary {
  padding: calc(0.55rem - 1px) calc(1.2rem - 1px);
}

/* Slice TH-U APPR-1: the approver pages' "Signed in as" line and its Sign out button, under the brand in the header. */
.sso-signed-in {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin-top: 0.35rem;
  font-size: 0.85rem;
  color: var(--sso-muted);
}

.sso-signed-in p,
.sso-signed-in form {
  margin: 0;
}

.sso-signed-in button {
  padding: 0.1rem 0.6rem;
  border-radius: 4px;
  font: inherit;
  cursor: pointer;
}

.sso-error {
  color: var(--sso-error);
  margin: 0.75rem 0 0;
}

.sso-muted {
  color: var(--sso-muted);
  font-size: 0.9rem;
}

.sso-notice {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--sso-border);
  font-size: 0.85rem;
  color: var(--sso-muted);
}

.sso-notice h2 {
  font-size: 0.95rem;
  margin: 0 0 0.5rem;
  color: var(--sso-fg);
}

/* Slice AR (D-190, D-195). Every rule lives here and none inline: the CSP is style-src 'self' (D-9). */

/* The honeypot field: off-screen, not display:none, so a form-filling script still sees and fills it. */
.sso-hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

form.sso-form label.sso-check {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-weight: 400;
}

/* D-142(2): submit stays inert until every required box is ticked; the server re-renders the form if it is not. */
form.sso-form:has(input.sso-required:not(:checked)) button[type="submit"] {
  opacity: 0.5;
  pointer-events: none;
}

.sso-links {
  display: flex;
  gap: 1.25rem;
  margin-top: 1rem;
}

/* The approver pages (slice AR W5, design 2.5): a request's details, the deny reason, the pending list. */
dl.sso-details {
  margin: 1rem 0 0;
}

dl.sso-details dt {
  margin-top: 0.6rem;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--sso-muted);
}

dl.sso-details dd {
  margin: 0;
  overflow-wrap: anywhere;
}

form.sso-form select {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--sso-border);
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
}

.sso-outcome {
  font-weight: 600;
}

/* Slice TH-U F1: the pending list is one card per request, not a table. The 28rem column showed only the code and the
   date of the six-column table, and the rest sat behind a sideways scroll; a card stacks the same facts at any width. */
ul.sso-requests {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

ul.sso-requests li {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--sso-border);
}

p.sso-request-name {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

dl.sso-request-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.1rem 0.75rem;
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
}

dl.sso-request-facts dt {
  color: var(--sso-muted);
}

dl.sso-request-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* Slice CON (plan 05, design 5.3): the admin console's shell. Every console rule lives here - lanes add none - and none inline:
   the console's CSP is the IdP's with only form-action widened (design 2.13), so style-src stays 'self'. */
.console-main {
  max-width: 60rem;
}

nav.console-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
}

nav.console-nav form {
  margin: 0 0 0 auto;
}

nav.console-nav button,
form.console-actions button {
  padding: 0.35rem 0.9rem;
  border: 0;
  border-radius: 4px;
  background: var(--sso-accent);
  color: var(--sso-on-accent);
  font: inherit;
  cursor: pointer;
}

table.console-table {
  border-collapse: collapse;
  font-size: 0.9rem;
  width: 100%;
}

table.console-table th,
table.console-table td {
  padding: 0.35rem 0.6rem 0.35rem 0;
  border-bottom: 1px solid var(--sso-border);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

table.console-table ul {
  margin: 0;
  padding-left: 1rem;
}

form.console-actions {
  margin: 1rem 0 0;
}

.console-caption {
  color: var(--sso-muted);
  font-size: 0.85rem;
  margin: 0.25rem 0 0;
}

.console-outcome {
  font-weight: 600;
  margin: 1rem 0;
}

.console-done {
  color: var(--sso-fg);
}

.console-refused {
  color: var(--sso-error);
}