/* ==========================================================================
   DigitalProfile.lk — Account screens
   Sign up, log in, and the page people land on once they are signed in.
   Every value here comes from tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   PAGE FRAME
   The sign-in screens are short, so the shell pins the footer to the bottom
   instead of leaving a band of empty background under it.
   -------------------------------------------------------------------------- */
.auth-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.auth-page .site-footer { margin-block-start: auto; }

.auth {
  padding-block: var(--space-12) var(--space-16);
}


/* --------------------------------------------------------------------------
   LAYOUT
   One column on phones with the sales panel underneath; two columns from
   large screens up, form first because that is what people came for.
   -------------------------------------------------------------------------- */
.auth__inner {
  display: grid;
  gap: var(--space-10);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 64rem) {
  .auth {
    padding-block: var(--space-16) var(--space-20);
  }
  .auth__inner {
    grid-template-columns: minmax(0, 27rem) minmax(0, 1fr);
    gap: var(--space-16);
  }
}


/* --------------------------------------------------------------------------
   FORM PANEL
   -------------------------------------------------------------------------- */
.auth__panel {
  position: relative;
  padding: var(--space-8) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl), var(--shadow-inset-top);
}

/* The soft glow that lifts the panel off the page, same trick as the hero */
.auth__panel::before {
  content: "";
  position: absolute;
  inset: auto 8% -14%;
  height: 40%;
  background: var(--gradient-accent);
  filter: blur(40px);
  opacity: 0.22;
  border-radius: var(--radius-full);
  z-index: -1;
  pointer-events: none;
}

@media (min-width: 36rem) {
  .auth__panel { padding: var(--space-10) var(--space-8); }
}

.auth__head {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  margin-block-end: var(--space-8);
}
.auth__title {
  font-size: var(--text-h3);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}
.auth__sub {
  font-size: var(--text-base);
  color: var(--color-text-muted);
}


/* --------------------------------------------------------------------------
   ALERTS
   -------------------------------------------------------------------------- */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-block-end: var(--space-6);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
}
.alert .icon {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  margin-block-start: 0.15em;
}
.alert--error {
  color: var(--color-danger-text);
  background: var(--color-danger-soft);
  border-color: var(--color-danger-border);
}
.alert--ok {
  color: var(--color-success-text);
  background: var(--color-success-soft);
  border-color: rgb(var(--rgb-green-500) / 0.38);
}
.alert--ok .icon { color: var(--color-success); }


/* --------------------------------------------------------------------------
   FIELDS
   -------------------------------------------------------------------------- */
.form {
  display: grid;
  gap: var(--space-5);
}

.field { display: grid; gap: var(--space-2); }

.field__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.field__control {
  position: relative;
  display: flex;
  align-items: center;
}

/* Leading icon sits inside the input, so the box keeps one clean outline */
.field__icon {
  position: absolute;
  inset-inline-start: var(--space-4);
  width: 1.05rem;
  height: 1.05rem;
  color: var(--color-text-subtle);
  pointer-events: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.field__input {
  width: 100%;
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-10);
  font-size: var(--text-md);
  color: var(--color-text);
  background: var(--color-field);
  border: 1px solid var(--color-field-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}
.field__input::placeholder { color: var(--color-text-subtle); }

.field__input:hover { border-color: var(--color-border-strong); }

.field__input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}
.field__control:focus-within .field__icon { color: var(--color-accent-text); }

/* The button only works with scripting, so it only exists with scripting */
.js .field__control:has(.field__reveal) .field__input {
  padding-inline-end: var(--space-12);
}

.field__reveal {
  position: absolute;
  inset-inline-end: var(--space-2);
  display: none;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  color: var(--color-text-subtle);
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}
.js .field__reveal { display: grid; }
.field__reveal:hover {
  color: var(--color-text);
  background: var(--color-surface-muted);
}
.field__reveal .icon { width: 1.05rem; height: 1.05rem; }

/* Eye by default; crossed-out eye once the password is showing */
.field__reveal .field__reveal-hide { display: none; }
.field__reveal[aria-pressed="true"] .field__reveal-show { display: none; }
.field__reveal[aria-pressed="true"] .field__reveal-hide { display: block; }

.field__hint {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

.field__error {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-danger-text);
}

.field--invalid .field__input { border-color: var(--color-danger); }
.field--invalid .field__input:focus {
  box-shadow: 0 0 0 3px var(--color-danger-soft);
}
.field--invalid .field__icon { color: var(--color-danger); }

/* Chrome paints its own yellow autofill background; repaint it in theme */
.field__input:-webkit-autofill,
.field__input:-webkit-autofill:hover,
.field__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-text);
  -webkit-box-shadow: 0 0 0 100px var(--color-field) inset;
  caret-color: var(--color-text);
}

.auth__swap {
  margin-block-start: var(--space-6);
  font-size: var(--text-base);
  text-align: center;
  color: var(--color-text-muted);
}
.auth__swap a {
  font-weight: var(--weight-semibold);
  color: var(--color-accent-text);
}
.auth__swap a:hover { text-decoration: underline; }


/* --------------------------------------------------------------------------
   SIDE PANEL
   The reason to bother creating an account, kept quiet so it never competes
   with the form itself.
   -------------------------------------------------------------------------- */
.auth__aside { max-width: 34rem; }

.auth__aside-title {
  font-size: var(--text-h3);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
}
.auth__aside-text {
  margin-block-start: var(--space-4);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}
.auth__aside-list { margin-block-start: var(--space-6); }

@media (max-width: 63.99rem) {
  /* Below two columns the aside becomes a quiet footnote under the form */
  .auth__aside {
    padding-block-start: var(--space-8);
    border-block-start: 1px solid var(--color-border);
  }
  .auth__aside-title { font-size: var(--text-h4); }
  .auth__aside-text { font-size: var(--text-base); }
}


/* ==========================================================================
   DASHBOARD
   ========================================================================== */
.dash { padding-block: var(--space-12) var(--space-16); }

.dash__head {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
  max-width: var(--container-narrow);
  margin-block-end: var(--space-12);
}
.dash__title {
  font-size: var(--text-h2);
  letter-spacing: var(--tracking-tighter);
  line-height: var(--leading-tight);
}
.dash__head .btn { margin-block-start: var(--space-2); }

.dash__grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

.dash__card {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  align-content: start;
}
.dash__card-title {
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
}
.dash__card-text {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}
.dash__card .btn { margin-block-start: var(--space-2); }

.dash__list {
  display: grid;
  gap: var(--space-4);
  width: 100%;
  margin: 0;
}
.dash__list dt {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-subtle);
}
.dash__list dd {
  margin: var(--space-1) 0 0;
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  overflow-wrap: anywhere;
}

@media (min-width: 48rem) {
  .dash__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .dash { padding-block: var(--space-16) var(--space-20); }
  .dash__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   THE GATE
   The line above the form telling somebody their half-built profile is safe.
   It is the first thing they read after being interrupted mid-form, so it
   gets the accent rather than the warning colours: nothing has gone wrong.
   -------------------------------------------------------------------------- */
.alert--info {
  color: var(--color-text);
  background: var(--color-accent-soft);
  border-color: var(--color-accent-soft-border);
}
.alert--info .icon { color: var(--color-accent); }
.alert code {
  padding: 0.1em 0.35em;
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: rgb(var(--rgb-slate-900) / 0.06);
  border-radius: var(--radius-sm);
}