/* `prober` login theme — the sign-in pages in the Prober design, dark.

   Values are COPIED from @prober/design (portal/vendor/prober-design on
   feat/prober-shell, generated by scripts/gen-design-tokens.py): the
   engineering preset's dark palette, the four-step type scale and the radii.
   Nothing is imported at runtime; when the design package moves, re-copy the
   block below (token names kept 1:1 so a diff against tokens.css is a read).

   Look: plain and Pajamas-like — one ground, one panel drawn with a 1 px
   border, solid blue primary, outlined secondary, no glow, no gradient
   ground, no coloured side rules. */

/* ---- fonts (the package's own woff2, byte for byte; OFL, ../fonts/OFL.txt) */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSansVar-Roman-Latin1.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Orbitron";
  src: url("../fonts/Orbitron.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---- tokens: engineering preset, data-theme="dark" (copied) -------------- */
:root {
  --bg:                oklch(18.1% 0.010 295);
  --surface:           oklch(20.8% 0.012 293);
  --surface-elevated:  oklch(27.6% 0.011 293);
  --surface-sunken:    oklch(23.9% 0.011 293);
  --surface-input:     oklch(20.2% 0.011 293);
  --row-hover:         oklch(27.0% 0.011 293);
  --border:            oklch(40.7% 0.013 297);
  --border-subtle:     oklch(31.0% 0.011 301);
  --border-strong:     oklch(55.0% 0.011 293);
  --text-primary:      oklch(94.4% 0.004 286);
  --text-secondary:    oklch(89.5% 0.004 286);
  --text-muted:        oklch(86.8% 0.004 286);
  --text-placeholder:  oklch(70.5% 0.009 294);
  --disabled-fill:     oklch(27.6% 0.011 293);
  --disabled-ink:      oklch(71.8% 0.009 294);
  --text-on-accent:    oklch(100.0% 0 0);
  --text-link:         oklch(87.0% 0.054 249);
  --accent:            oklch(55.9% 0.154 253);
  --accent-hover:      oklch(63.7% 0.139 251);
  --accent-subtle:     oklch(30.3% 0.063 251);
  --accent-ring:       oklch(63.7% 0.139 251 / 0.50);
  --accent-ink:        oklch(89.0% 0.045 248);
  --focus-ring:        var(--accent-ink);
  --danger:            oklch(65.4% 0.186 32);
  --danger-subtle:     oklch(26.7% 0.057 31);
  --danger-ink:        oklch(87.2% 0.067 29);
  --warning:           oklch(72.1% 0.137 72);
  --warning-subtle:    oklch(29.8% 0.044 76);
  --warning-ink:       oklch(87.1% 0.078 81);
  --success:           oklch(62.9% 0.141 154);
  --success-subtle:    oklch(28.3% 0.045 154);
  --success-ink:       oklch(86.1% 0.067 156);
  --info:              oklch(63.7% 0.139 251);
  --info-subtle:       oklch(30.3% 0.063 251);
  --info-ink:          oklch(87.1% 0.059 247);

  /* type: four steps — title 28 · section title 18 · text 14 · hint 12 */
  --font-sans-family: "IBM Plex Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-mono-family: ui-monospace, "SF Mono", Menlo, monospace;
  --fs-h1: 1.75rem;
  --fs-section: 1.125rem;
  --fs-body: 0.875rem;
  --fs-small: 0.75rem;
  --lh-h1: 1.2857;
  --lh-section: 1.4444;
  --lh-body: 1.43;
  --lh-tight: 1.33;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* radii */
  --radius-sm: 4px;
  --radius-md: 4px;
  --radius-lg: 6px;

  color-scheme: dark;
}

/* ---- base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body.pr-body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans-family);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--bg);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }
p { margin: 0; }
h1, h2 { margin: 0; }
code, .pr-code { font-family: var(--font-mono-family); font-size: var(--fs-small); color: var(--text-secondary); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.pr-hidden { display: none !important; }
/* the WebAuthn plumbing forms carry only hidden inputs: keep them out of the flex gaps */
#webauth, #authn_select { display: none; }

/* ---- page: one centred column -------------------------------------------- */
.pr-page {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 12vh 16px 48px;
}
.pr-column { width: 100%; max-width: 400px; }

.pr-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 24px;
}
.pr-mark { flex: none; }
.pr-mark-links line { stroke: var(--text-placeholder); stroke-opacity: 0.6; }
.pr-mark-nodes circle { fill: var(--text-placeholder); }
.pr-mark-hub { fill: var(--accent-hover); }

/* the product wordmark, as the portal's top bar draws it (.prober-wordmark,
   dark: steel with a warm glint) */
.pr-wordmark {
  font-family: "Orbitron", var(--font-sans-family);
  font-weight: 700;
  font-size: var(--fs-section);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--text-primary);
  background:
    radial-gradient(62% 78% at 42% 56%, rgba(243, 213, 154, 0.80) 0%, rgba(243, 213, 154, 0.62) 30%, rgba(243, 213, 154, 0) 58%),
    linear-gradient(176deg, #f4f7fa 0%, #dde4ec 22%, #b3bcc8 48%, #a3adbb 52%, #d6dde6 80%, #f7fafc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---- the panel ----------------------------------------------------------- */
.pr-panel {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.pr-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.pr-title {
  font-size: var(--fs-section);
  line-height: var(--lh-section);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.pr-panel-body { display: flex; flex-direction: column; gap: 16px; }
.pr-foot { margin-top: 16px; text-align: center; font-size: var(--fs-small); color: var(--text-placeholder); }
.pr-foot:empty { display: none; }

.pr-text { color: var(--text-secondary); }
.pr-muted { color: var(--text-placeholder); font-size: var(--fs-small); line-height: var(--lh-tight); }
.pr-hint { text-align: center; margin-top: -8px; }
.pr-required-note { margin-top: -8px; }

/* ---- "Signing in as …" --------------------------------------------------- */
.pr-identity {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.pr-identity-label { color: var(--text-placeholder); font-size: var(--fs-small); }
.pr-identity-name { font-weight: var(--weight-semibold); color: var(--text-primary); overflow-wrap: anywhere; }
.pr-identity-reset { margin-left: auto; font-size: var(--fs-small); }

/* ---- form ---------------------------------------------------------------- */
.pr-form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.pr-field { display: flex; flex-direction: column; gap: 6px; }
.pr-field:empty { display: none; }
.pr-field-label { display: flex; }
.pr-label, .pr-label-text {
  font-size: var(--fs-body);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.pr-required { color: var(--danger); margin-left: 2px; }

.pr-control { display: flex; position: relative; width: 100%; }
.pr-control input,
.pr-control select,
.pr-control textarea,
input.pr-control,
.pr-select {
  width: 100%;
  min-height: 36px;
  padding: 7px 10px;
  font: inherit;
  color: var(--text-primary);
  background: var(--surface-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.pr-control input::placeholder { color: var(--text-placeholder); }
.pr-control input:hover, .pr-select:hover { border-color: var(--border-strong); }
.pr-control input:focus, .pr-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.pr-control.pr-invalid input,
.pr-control input[aria-invalid="true"] { border-color: var(--danger); }
.pr-control.pr-readonly input { background: var(--surface-sunken); color: var(--text-secondary); }
.pr-select { width: auto; min-height: 32px; padding: 4px 8px; font-size: var(--fs-small); }

.pr-input-group { display: flex; align-items: stretch; }
.pr-input-group-item { display: flex; }
.pr-input-group-item.pr-fill { flex: 1 1 auto; min-width: 0; }
.pr-input-group .pr-fill input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.pr-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-height: 36px;
  color: var(--text-secondary);
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-left: 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  cursor: pointer;
}
.pr-icon-btn:hover { color: var(--text-primary); background: var(--row-hover); }

/* the eye glyph of the password toggle (passwordVisibility.js swaps the two
   classes); drawn with a mask so it takes the ink colour */
.pr-i { display: inline-block; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--pr-glyph) center / contain no-repeat; mask: var(--pr-glyph) center / contain no-repeat; }
.pr-i-eye { --pr-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4'%3E%3Cpath d='M1.5 8S4 3.5 8 3.5 14.5 8 14.5 8 12 12.5 8 12.5 1.5 8 1.5 8Z'/%3E%3Ccircle cx='8' cy='8' r='2'/%3E%3C/svg%3E"); }
.pr-i-eye-off { --pr-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4'%3E%3Cpath d='M1.5 8S4 3.5 8 3.5 14.5 8 14.5 8 12 12.5 8 12.5 1.5 8 1.5 8Z'/%3E%3Ccircle cx='8' cy='8' r='2'/%3E%3Cpath d='M2.5 13.5 13.5 2.5'/%3E%3C/svg%3E"); }

.pr-helper, .pr-helper-list { display: flex; flex-direction: column; gap: 4px; }
.pr-helper:empty, .pr-helper-list:empty { display: none; }
.pr-helper-item, .pr-helper-text { font-size: var(--fs-small); color: var(--text-placeholder); }
.pr-error-text, .pr-helper-item.pr-invalid { font-size: var(--fs-small); color: var(--danger-ink); }

.pr-check { display: flex; align-items: center; gap: 8px; }
.pr-check-input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.pr-check-label { color: var(--text-secondary); font-weight: 400; }

/* ---- buttons ------------------------------------------------------------- */
.pr-actions { display: flex; flex-direction: column; gap: 8px; }
.pr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 7px 14px;
  font: inherit;
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.pr-btn:hover { text-decoration: none; }
.pr-btn-block { display: flex; width: 100%; }
.pr-btn-primary { color: var(--text-on-accent); background: var(--accent); border-color: var(--accent); }
.pr-btn-primary:hover { color: var(--text-on-accent); background: var(--accent-hover); border-color: var(--accent-hover); }
.pr-btn-secondary { color: var(--text-primary); background: var(--surface-elevated); border-color: var(--border); }
.pr-btn-secondary:hover { color: var(--text-primary); background: var(--row-hover); border-color: var(--border-strong); }
.pr-btn-link {
  min-height: 0;
  padding: 0;
  font-weight: 400;
  color: var(--text-link);
  background: none;
  border: 0;
}
.pr-btn-link:hover { text-decoration: underline; }
.pr-btn:disabled, .pr-btn[aria-disabled="true"] { color: var(--disabled-ink); background: var(--disabled-fill); border-color: var(--disabled-fill); cursor: default; }
.pr-mt { margin-top: 8px; }

.pr-other-way { margin: 0; display: flex; justify-content: center; }

/* ---- the folded username lane under the passkey button -------------------- */
.pr-lane { border-top: 1px solid var(--border-subtle); padding-top: 16px; }
.pr-lane-toggle {
  list-style: none;
  cursor: pointer;
  text-align: center;
  color: var(--text-link);
}
.pr-lane-toggle::-webkit-details-marker { display: none; }
.pr-lane-toggle:hover { text-decoration: underline; }
.pr-lane[open] .pr-lane-toggle { color: var(--text-placeholder); margin-bottom: 16px; }

/* ---- inline alert: tinted ground, hairline border, no side rule ----------- */
.pr-alert {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-elevated);
  color: var(--text-primary);
}
.pr-alert-icon { display: none; }
.pr-alert-text { font-size: var(--fs-body); line-height: var(--lh-body); }
.pr-alert-error { background: var(--danger-subtle); border-color: color-mix(in oklch, var(--danger) 45%, transparent); color: var(--danger-ink); }
.pr-alert-warning { background: var(--warning-subtle); border-color: color-mix(in oklch, var(--warning) 45%, transparent); color: var(--warning-ink); }
.pr-alert-success { background: var(--success-subtle); border-color: color-mix(in oklch, var(--success) 45%, transparent); color: var(--success-ink); }
.pr-alert-info { background: var(--info-subtle); border-color: color-mix(in oklch, var(--info) 45%, transparent); color: var(--info-ink); }

/* ---- rows: passkeys of the account, sign-in methods ----------------------- */
.pr-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.pr-rows > li + li { border-top: 1px solid var(--border-subtle); }
.pr-row { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; }
.pr-row-title { font-weight: var(--weight-semibold); }
.pr-row-meta { font-size: var(--fs-small); color: var(--text-placeholder); display: flex; flex-wrap: wrap; gap: 4px; }

.pr-choice-item form { margin: 0; }
.pr-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  font: inherit;
  text-align: left;
  color: var(--text-primary);
  background: none;
  border: 0;
  cursor: pointer;
}
.pr-choice:hover { background: var(--row-hover); }
.pr-choice-body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.pr-choice-title { font-weight: var(--weight-semibold); font-size: var(--fs-body); }
.pr-choice-desc { font-size: var(--fs-small); color: var(--text-placeholder); }
.pr-choice-chevron { flex: none; color: var(--text-placeholder); }

/* ---- below the form: registration line, identity providers ---------------- */
.pr-band { border-top: 1px solid var(--border-subtle); padding-top: 16px; text-align: center; color: var(--text-secondary); }
.pr-social { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pr-social-grid { display: grid; grid-template-columns: 1fr 1fr; }

/* inherited keycloak.v2 pages that hard-code a PatternFly utility class */
[class*="pf-v5-u-"] { margin: 0; }

@media (max-width: 480px) {
  .pr-page { padding-top: 32px; }
  .pr-panel { padding: 20px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}