/* Petrolyst's sign-in pages. Colours and type come from the brand tokens (css/brand/), light and dark; the form sits on a soft card
   beside the dark slate shell, which is the same in both (PD-26), as on the website and in the app. */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
/* Fetched at build time and never committed: Satoshi's licence forbids distributing the files (build.sh). Without it, Inter takes over. */
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}

* { box-sizing: border-box; }

html { color-scheme: light; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--surface-subtle);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: 1.5;
}

.pl-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 448px;
  margin: 0 auto;
  padding: 0 var(--space-6, 24px) var(--space-8, 32px);
}

/* The logo; the realm's name is left out (messages: loginTitleHtml). On a phone a slate band, like the website's header; wide, the panel holds it. */
.pl-header {
  display: flex;
  align-items: center;
  height: 64px;
  margin: 0 calc(var(--space-6, 24px) * -1) var(--space-8, 32px);
  padding: 0 var(--space-6, 24px);
  background: var(--surface-chrome);
  border-bottom: 1px solid var(--border-chrome);
}
#kc-header-wrapper {
  width: 160px;
  height: 22px;
  background: url("../img/petrolyst_wordmark_white_y.svg") left center / contain no-repeat;
}

.pl-card {
  padding: var(--space-6, 24px);
  background: var(--surface-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

#kc-page-title {
  margin: 0 0 var(--space-6, 24px);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 400;
  line-height: 1.2;
}

/* --- The form --- */
.pl-group { margin-bottom: var(--space-5, 20px); }
.pl-label,
#kc-content label {
  display: block;
  margin-bottom: var(--space-2, 8px);
  font-size: var(--text-ui);
  font-weight: 600;
}
.pl-input,
#kc-content input[type="text"],
#kc-content input[type="password"],
#kc-content input[type="email"] {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  color: var(--text-primary);
  font: inherit;
}
.pl-input:focus,
#kc-content input:focus-visible,
.pl-eye:focus-visible,
.pl-btn:focus-visible,
#kc-content a:focus-visible {
  outline: 2px solid var(--action-primary);
  outline-offset: 2px;
}
.pl-input[aria-invalid="true"] { border-color: var(--status-critical); }

.pl-input-group { position: relative; }
.pl-input-group .pl-input { padding-right: 48px; }
.pl-eye {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
.pl-eye:hover { color: var(--text-primary); }

.pl-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--pl-icon) center / contain no-repeat;
  mask: var(--pl-icon) center / contain no-repeat;
}
.pl-icon-show { --pl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.pl-icon-hide { --pl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.9 4.2A10 10 0 0 1 12 4c6.5 0 10 8 10 8a17 17 0 0 1-2.2 3.3M6.6 6.6A17 17 0 0 0 2 12s3.5 8 10 8a10 10 0 0 0 5.4-1.6M2 2l20 20M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E"); }
.pl-icon-restart { --pl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E"); }

.pl-settings { margin-bottom: 0; font-size: var(--text-ui); }
#kc-form-buttons { margin: var(--space-5, 20px) 0 0; }
.pl-settings a,
#kc-content a {
  color: var(--action-primary);
  font-weight: 600;
  text-decoration: none;
}
#kc-content a:hover { text-decoration: underline; }
#kc-form-options .checkbox label { display: inline-flex; align-items: center; gap: var(--space-2, 8px); font-weight: 400; margin: 0; }

.pl-btn,
#kc-content input[type="submit"] {
  min-height: 44px;
  padding: 10px 24px;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-ui);
  font-weight: 600;
  cursor: pointer;
}
.pl-btn-primary,
#kc-content input[type="submit"].pl-btn-primary {
  border-color: var(--action-primary);
  background: var(--action-primary);
  color: var(--action-primary-foreground);
}
.pl-btn-primary:hover { background: var(--action-primary-hover); border-color: var(--action-primary-hover); }
.pl-btn-primary:active { background: var(--action-primary-active); border-color: var(--action-primary-active); }
.pl-btn-primary:disabled { opacity: 0.6; cursor: default; }
.pl-btn-block { width: 100%; }

/* --- Messages --- */
.pl-alert {
  display: flex;
  gap: var(--space-2, 8px);
  margin-bottom: var(--space-5, 20px);
  padding: 12px 14px;
  border: 1px solid var(--border-default);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
  font-size: var(--text-ui);
}
.pl-alert.alert-error { border-left-color: var(--status-critical); }
.pl-alert.alert-warning { border-left-color: var(--status-warning, var(--border-strong)); }
.pl-alert.alert-success { border-left-color: var(--action-primary); }
.pl-alert.alert-info { border-left-color: var(--action-primary); }
.pl-field-error {
  display: block;
  margin-top: var(--space-2, 8px);
  color: var(--status-critical);
  font-size: var(--text-ui);
}
.instruction,
#kc-content p { color: var(--text-secondary); margin: 0 0 var(--space-5, 20px); }
#kc-content p:last-child { margin-bottom: 0; }
#kc-content ol, #kc-content ul { color: var(--text-secondary); padding-left: 20px; }
#kc-content li { margin-bottom: var(--space-3, 12px); }
#kc-content ul ul { margin-top: var(--space-2, 8px); }

/* The user's name on later steps, with the way back to the start. */
#kc-username { display: flex; align-items: center; justify-content: space-between; margin: 0 0 var(--space-5, 20px); font-size: var(--text-ui); font-weight: 600; }
#kc-attempted-username { margin: 0; }
#reset-login { display: inline-flex; color: var(--text-secondary); }
.kc-tooltip-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#kc-info { margin-top: var(--space-5, 20px); font-size: var(--text-ui); color: var(--text-secondary); }
.subtitle { font-size: var(--text-caption); color: var(--text-muted); }
.required { color: var(--status-critical); }
.clearfix { clear: both; }

/* --- Dark --- */
@media (prefers-color-scheme: dark) {
  html { color-scheme: dark; }
}

/* --- Wide: the slate panel with the logo, the form on its card beside it. The logo appears once, so the form's own is hidden. --- */
@media (min-width: 64rem) {
  body::before {
    content: "";
    position: fixed;
    inset: 0 50% 0 0;
    background:
      url("../img/petrolyst_logo_white_y.svg") center / clamp(300px, 30vw, 480px) auto no-repeat,
      radial-gradient(ellipse 34vw 40vw at 50% 50%, color-mix(in srgb, var(--petroleum-500) 45%, transparent) 0%, color-mix(in srgb, var(--petroleum-500) 20%, transparent) 45%, transparent 100%),
      var(--surface-chrome);
  }
  .pl-page {
    position: relative;
    z-index: 1;
    justify-content: center;
    width: 50%;
    max-width: none;
    margin: 0 0 0 50%;
    padding: var(--space-8, 32px) clamp(48px, 7vw, 128px);
  }
  .pl-header { display: none; }
  .pl-card { padding: var(--space-8, 32px); }
}