/*
 * Hanko sign-in element theme (loaded on /login only, after site.css).
 *
 * <hanko-auth> renders inside a shadow root. Hanko reads the custom
 * properties below inside it, and custom properties inherit across the
 * shadow boundary, so they point at the site.css design tokens. Exposed
 * ::part() selectors refine what the variables cannot express. The element's
 * own copy and six-digit code boxes are kept as Hanko renders them.
 */

/* 1. Variables ------------------------------------------------------------ */

#hanko-auth {
  display: block;

  /* Text and surfaces. The background matches .login-box so the "or"
     divider label blends in; text inputs use the sunken surface below. */
  --color: var(--text);
  --color-shade-1: var(--faint);
  --color-shade-2: var(--line);
  --background-color: var(--surface);
  --error-color: var(--red);
  --link-color: var(--blue);

  /* Primary actions */
  --brand-color: var(--blue);
  --brand-color-shade-1: var(--blue-hover);
  --brand-contrast-color: var(--on-blue);

  /* Type */
  --font-family: var(--sans);
  --font-size: 15px;
  --font-weight: 400;
  --line-height: 1.5;

  /* Shape and rhythm */
  --border-radius: var(--radius);
  --border-style: solid;
  --border-width: 1px;
  --item-height: 45px;
  --item-margin: 0 0 18px;
  --input-min-width: 100%;
  --button-min-width: 100%;
  --container-padding: 0;
  --container-max-width: 100%;
  --divider-padding: 0 14px;
  --link-text-decoration: none;
  --link-text-decoration-hover: underline;

  /* Headings: the page's own "Make yourself at home." heading names the
     step, so Hanko's first-level headline stays hidden (see below). */
  --headline1-margin: 0;
  --headline2-font-size: 11px;
  --headline2-font-weight: 400;
  --headline2-margin: 8px 0 12px;
}

/* 2. Layout --------------------------------------------------------------- */

#hanko-auth::part(container) {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

#hanko-auth::part(headline1) {
  display: none;
}

#hanko-auth::part(headline2) {
  color: var(--muted);
  font-family: var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

#hanko-auth::part(paragraph) {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

#hanko-auth::part(link) {
  color: var(--blue);
  font-size: 13px;
}

#hanko-auth::part(link):hover {
  color: var(--blue-hover);
}

/* Inputs and buttons stack at full width, like the design's sign-in form. */
#hanko-auth::part(form-item) {
  justify-content: center;
  min-width: 100%;
}

/* 3. Fields --------------------------------------------------------------- */

#hanko-auth::part(input) {
  background: var(--sunken);
  border-color: var(--line);
  color: var(--text);
  transition: border-color .2s;
}

#hanko-auth::part(text-input) {
  height: 50px;
  padding: 0 14px;
}

#hanko-auth::part(input):focus {
  border-color: var(--blue);
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

#hanko-auth::part(input):disabled {
  cursor: wait;
  opacity: .55;
}

/* One-time code: six equal monospace boxes across the full width. */
#hanko-auth::part(passcode-input) {
  height: 50px;
  padding: 0;
  font-family: var(--mono);
  font-size: 18px;
}

/* 4. Buttons -------------------------------------------------------------- */

#hanko-auth::part(button) {
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 550;
  line-height: 1.5;
  transition: background .2s, border-color .2s, transform .2s;
}

#hanko-auth::part(button):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

#hanko-auth::part(button):disabled {
  opacity: .55;
}

#hanko-auth::part(primary-button):hover {
  background: var(--blue-hover);
  border-color: var(--blue-hover);
  transform: translateY(-1px);
}

#hanko-auth::part(primary-button):focus {
  border-color: var(--blue);
}

#hanko-auth::part(primary-button):disabled {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--on-blue);
  transform: none;
}

/* Secondary actions (passkey sign-in) use the design's neutral .btn. */
#hanko-auth::part(secondary-button) {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text);
}

#hanko-auth::part(secondary-button):hover {
  background: var(--raised);
  border-color: var(--line-hover);
  color: var(--text);
}

#hanko-auth::part(secondary-button):focus {
  border-color: var(--line-hover);
}

#hanko-auth::part(secondary-button):disabled {
  background: var(--surface);
  border-color: var(--line);
  color: var(--faint);
}

#hanko-auth::part(dangerous-button) {
  background: var(--danger-surface);
  border-color: var(--danger-line);
  color: var(--red);
}

/* 5. Divider and errors --------------------------------------------------- */

#hanko-auth::part(divider) {
  color: var(--faint);
  margin: 2px 0 20px;
}

#hanko-auth::part(divider-line) {
  border-color: var(--line);
}

#hanko-auth::part(divider-text) {
  font-size: 11px;
}

#hanko-auth::part(error) {
  align-items: flex-start;
  background: var(--danger-surface);
  border-color: var(--danger-line);
  color: var(--red);
  font-size: 13px;
  line-height: 1.6;
  padding: 10px 12px;
}

#hanko-auth::part(error-text) {
  color: var(--red);
}