/* ---------------------------------------------------------------------------
   CANONICAL DESIGN TOKENS (Night)
   Same values as the @theme blocks in web/src/style.css and app/src/index.css.
   Declared on :root here because this project has no Tailwind. Change one,
   change all three.
   --------------------------------------------------------------------------- */
:root {
  --color-night: #0B1326;
  --color-depth-blue: #1E3F8A;
  --color-depth-green: #0F5C4C;
  --color-card: rgba(255, 255, 255, 0.08);
  --color-card-head: rgba(255, 255, 255, 0.07);
  --color-card-solid: #121B33;
  --color-edge: rgba(255, 255, 255, 0.14);
  --color-rule: rgba(255, 255, 255, 0.10);
  --color-text: #F3F5FA;
  --color-text-soft: #C3CBDD;
  --color-text-faint: #A6B0C6;
  --color-sea: #8FD3B4;
  --color-sea-deep: #5FB893;
  --color-sky: #7FA3FF;
  --color-amber: #F2C66D;
  --color-danger: #FF8A7A;
  --color-field: rgba(11, 19, 38, 0.6);

  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* ------------------------------- END TOKENS ------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  color-scheme: dark;
}

/* The night ground with its two soft depths. */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-night);
  background-image:
    radial-gradient(120% 70% at 85% 0%, var(--color-depth-blue) 0%, rgba(30, 63, 138, 0) 55%),
    radial-gradient(80% 50% at 0% 100%, var(--color-depth-green) 0%, rgba(15, 92, 76, 0) 60%);
  background-attachment: fixed;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background-color: var(--color-sea);
  color: var(--color-night);
}

:focus-visible {
  outline: 2px solid var(--color-sea);
  outline-offset: 2px;
}

a {
  color: var(--color-sea);
}

a:hover {
  color: var(--color-sea-deep);
}

/* A small secondary line. */
.label {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-text-faint);
}

/* ---------------------------------- Header --------------------------------- */

/* Lighter than the app's bar: the mark and the name alone on the ground. */
.masthead-inner {
  max-width: 1180px;
  margin-inline: auto;
  padding: 18px 1.25rem;
  display: flex;
  align-items: center;
}

@media (min-width: 640px) {
  .masthead-inner {
    padding: 18px 1.5rem;
  }
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 19px;
  color: var(--color-text);
  text-decoration: none;
}

.wordmark:hover {
  color: var(--color-text);
}

.wordmark svg {
  flex-shrink: 0;
}

/* ---------------------------------- Shell ---------------------------------- */

/* One wide card, centred in the viewport below the header. The bottom padding
   carries the header's height so the card sits at the centre of the whole
   viewport, not just the space beneath the header. */
main.auth-shell {
  flex: 1;
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding: 1rem 1.25rem 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media (min-width: 640px) {
  main.auth-shell {
    padding: 1.5rem 1.5rem calc(2.5rem + 66px);
  }
}

.auth-card {
  width: 100%;
  max-width: 1040px;
  border: 1px solid var(--color-edge);
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  .auth-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  }
}

.auth-card--single {
  max-width: 30rem;
}

/* The form column, on the solid panel. */
.auth-form {
  background-color: var(--color-card-solid);
  padding: 28px 24px;
  min-width: 0;
}

@media (min-width: 640px) {
  .auth-form {
    padding: 36px 40px;
  }
}

/* The brand column, frosted, with a rule on its left (above it when stacked). */
.auth-brand {
  background-color: rgba(255, 255, 255, 0.06);
  border-top: 1px solid var(--color-rule);
  padding: 28px 24px;
  min-width: 0;
  display: flex;
}

@media (min-width: 640px) {
  .auth-brand {
    padding: 40px;
  }
}

@media (min-width: 900px) {
  .auth-brand {
    border-top: 0;
    border-left: 1px solid var(--color-rule);
  }
}

/* ---------------------------------- Panel ---------------------------------- */

.panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.card-head__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.card-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.card-sub {
  font-size: 13px;
  color: var(--color-text-soft);
}

.tile-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ---------------------------------- Forms ---------------------------------- */

.form-group {
  margin-bottom: 1rem;
}

label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-soft);
  display: block;
  margin-bottom: 6px;
}

input[type='email'],
input[type='password'],
input[type='text'] {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 9px;
  background-color: var(--color-field);
  color: var(--color-text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 120ms linear;
}

input::placeholder {
  color: var(--color-text-faint);
}

input[type='email']:focus,
input[type='password']:focus,
input[type='text']:focus {
  border-color: var(--color-sea);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background-color: var(--color-sea);
  color: var(--color-night);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 120ms linear, color 120ms linear;
}

.btn:hover {
  background-color: var(--color-sea-deep);
  color: var(--color-night);
}

.btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.btn--inline {
  width: auto;
}

/* Quiet button for the passkey actions: white 10% with an edge, not filled. */
.btn--ghost {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--color-edge);
  color: var(--color-text);
}

.btn--ghost:hover {
  background-color: rgba(255, 255, 255, 0.16);
  color: var(--color-text);
}

/* The passkey section on the profile page. */
.passkey__hint {
  margin: 0 0 1rem;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-soft);
}

.passkey__status {
  display: block;
  margin-top: 0.75rem;
  font-size: 13px;
}

/* "or" separator between the password form and the passkey button. */
.divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.25rem 0;
  color: var(--color-text-faint);
  font-size: 12px;
  font-weight: 500;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--color-rule);
}

.remember {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

.remember input[type='checkbox'] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--color-sea);
  cursor: pointer;
}

.remember label {
  margin: 0;
  cursor: pointer;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 400;
}

.alt {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--color-rule);
  font-size: 14px;
  color: var(--color-text-soft);
}

.alt a {
  color: var(--color-sea);
  font-weight: 600;
  text-decoration: none;
}

.alt a:hover {
  color: var(--color-sea-deep);
  text-decoration: underline;
}

/* -------------------------------- Validation ------------------------------- */

.field-error {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-danger);
}

.field-error:empty {
  display: none;
}

.validation-summary-errors {
  margin-bottom: 1rem;
  padding: 10px 14px;
  border-radius: 10px;
  background-color: rgba(255, 138, 122, 0.12);
  color: var(--color-danger);
  font-size: 13px;
}

.validation-summary-errors ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.validation-summary-valid {
  display: none;
}

/* ------------------------------- Brand panel ------------------------------- */

.brand-panel {
  width: 100%;
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.brand-panel__top svg {
  display: block;
  margin-bottom: 1.25rem;
}

.brand-panel__kicker {
  color: var(--color-text-soft);
  font-size: 13px;
  display: block;
  margin-bottom: 0.5rem;
}

.brand-panel__line {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-size: 30px;
  margin: 0;
}

.brand-panel__chart {
  width: 100%;
  height: 180px;
}

.brand-panel__chart svg {
  width: 100%;
  height: 100%;
  display: block;
}

@keyframes bpDraw {
  from {
    stroke-dashoffset: var(--len);
  }
  to {
    stroke-dashoffset: 0;
  }
}

.brand-panel__fitness {
  stroke-dasharray: 520;
  stroke-dashoffset: 520;
  --len: 520;
  animation: bpDraw 1400ms cubic-bezier(0.4, 0, 0.2, 1) 120ms forwards;
}

.brand-panel__form {
  opacity: 0;
  animation: bpFade 700ms ease-out 1000ms forwards;
}

.brand-panel__area {
  opacity: 0;
  animation: bpFade 900ms ease-out 700ms forwards;
}

@keyframes bpFade {
  to {
    opacity: 1;
  }
}

.brand-panel__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin: auto 0 0;
}

.brand-panel__stats .label {
  color: var(--color-text-faint);
  margin-bottom: 4px;
}

.brand-panel__stats dd {
  margin: 0;
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.brand-panel__form-value {
  color: var(--color-sea);
}

@media (prefers-reduced-motion: reduce) {
  .brand-panel__fitness,
  .brand-panel__form,
  .brand-panel__area {
    animation: none;
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

/* --------------------------------- Profile --------------------------------- */

.status-message {
  margin-bottom: 1rem;
  padding: 10px 14px;
  border-radius: 10px;
  background-color: rgba(143, 211, 180, 0.12);
  color: var(--color-sea);
  font-size: 13px;
}

.account-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 0 0 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-rule);
}

.account-meta dt {
  margin-bottom: 4px;
}

.account-meta dd {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  word-break: break-word;
}

.account-actions {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.account-actions__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-sea);
  text-decoration: none;
}

.account-actions__back:hover {
  color: var(--color-sea-deep);
}

.account-actions__out {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-faint);
  text-decoration: none;
}

.account-actions__out:hover {
  color: var(--color-danger);
}

/* ---------------------------------- Error ---------------------------------- */

.error-copy {
  color: var(--color-text-soft);
  line-height: 1.5;
  margin: 0 0 1.25rem;
}

/* ------------------------------ Profile picture ----------------------------- */

.avatar-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.avatar-img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--color-depth-blue);
  border: 1px solid var(--color-edge);
}

.avatar-img--empty {
  display: inline-block;
}

.avatar-controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.avatar-controls input[type="file"] {
  color: var(--color-text-soft);
  font-size: 13px;
}

.avatar-remove {
  margin-top: 12px;
}