/* Account page — the personal results timeline (C2).
   Layered like the rest of the brand: base = page chrome, components =
   the timeline and share cards. Meaning-named classes only. */

  .account-main {
    max-width: 720px;
    margin: 0 auto;
    padding: 48px 20px 96px;
  }

  .account-title {
    font-size: clamp(1.6rem, 4vw, 2.1rem);
    margin: 0 0 6px;
  }

  .account-lede {
    color: var(--ink-soft, color-mix(in srgb, currentColor 62%, transparent));
    margin: 0 0 36px;
  }

  .account-section {
    margin: 0 0 48px;
  }

  .account-section > h2 {
    font-size: 1.15rem;
    margin: 0 0 14px;
  }

  /* signed-out state */
  .account-signin-prompt {
    border: 1px dashed var(--line, color-mix(in srgb, currentColor 30%, transparent));
    border-radius: 14px;
    padding: 36px 24px;
    text-align: center;
  }

  .account-signin-prompt p {
    margin: 0 0 16px;
  }

  /* timeline */
  .results-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;

    & .results-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 14px;
      border: 1px solid var(--line, color-mix(in srgb, currentColor 18%, transparent));
      border-radius: 12px;
      padding: 12px 16px;
    }

    & .results-when {
      color: var(--ink-soft, color-mix(in srgb, currentColor 60%, transparent));
      font-size: 0.85rem;
      margin-inline-start: auto;
    }

    & .results-share-btn {
      font-size: 0.85rem;
    }
  }

  .results-empty {
    color: var(--ink-soft, color-mix(in srgb, currentColor 60%, transparent));
  }

  /* share links */
  .shares-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;

    & .share-row {
      border: 1px solid var(--line, color-mix(in srgb, currentColor 18%, transparent));
      border-radius: 12px;
      padding: 12px 16px;
      display: grid;
      gap: 6px;
    }

    & .share-head {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 12px;
    }

    & .share-state {
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      border-radius: 999px;
      padding: 2px 10px;
      background: color-mix(in srgb, currentColor 10%, transparent);
    }

    & .share-state[data-state="active"] {
      color: #2e6b3f;
      background: color-mix(in srgb, #2e6b3f 14%, transparent);
    }

    & .share-state[data-state="revoked"],
    & .share-state[data-state="expired"] {
      color: color-mix(in srgb, currentColor 60%, transparent);
    }

    & .share-url {
      font: 0.8rem/1.5 ui-monospace, monospace;
      overflow-wrap: anywhere;
      color: var(--ink-soft, color-mix(in srgb, currentColor 65%, transparent));
    }

    & .share-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
  }

  .shares-empty {
    color: var(--ink-soft, color-mix(in srgb, currentColor 60%, transparent));
  }

  /* inline feedback for copy / revoke / errors */
  .account-status {
    min-height: 1.4em;
    font-size: 0.9rem;
    margin: 10px 0 0;
  }

  .account-status[data-tone="error"] {
    color: #a33327;
  }

  @media (prefers-reduced-motion: no-preference) {
    .account-status[data-tone="ok"] {
      transition: color 0.2s ease;
    }
  }

/* ---------- identity card + inline edit + stats (CEO A4) ---------- */

.identity-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 12px;
}
.identity-avatar svg { display: block; width: 72px; height: 72px; }
.identity-copy { min-width: 0; }
.identity-name { font-size: 1.45rem; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.identity-email { color: var(--soft); font-size: .88rem; margin-top: 2px; overflow-wrap: anywhere; }
.identity-meta { color: var(--soft); font-size: .82rem; margin-top: 6px; }

.identity-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
  gap: 10px 14px;
  margin-top: 14px;
}
/* phones: stacked identity cards (each card's min-content is a word long) */
@media (max-width: 30rem) { .identity-fields { grid-template-columns: 1fr; } }
.identity-field {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 14px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 10px;
  & dt { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--soft); }
  & .field-value {
    font: 500 1rem/1.3 var(--sans);
    color: var(--ink);
    background: none; border: 0; padding: 2px 0;
    text-align: start; cursor: text;
    text-decoration: underline dotted var(--rule);
    text-underline-offset: 4px;
    min-height: 1.4em;
    &:hover { text-decoration-color: var(--soft); }
  }
  & .field-empty { color: var(--faint, var(--soft)); font-style: italic; }
  & .field-input {
    font: 500 1rem/1.3 var(--sans);
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 4px 8px;
    width: 100%;
    min-width: 0;
  }
  & .field-saving { font-size: .78rem; color: var(--soft); font-style: italic; }
}
.identity-hint { margin-top: 8px; font-size: .78rem; color: var(--faint, var(--soft)); }

.stats-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: 12px;
}
.stats-strip .stat {
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 10px;
  & dt { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--soft); order: 2; }
  & dd { font-size: 1.6rem; font-weight: 750; letter-spacing: -0.02em; order: 1; }
  display: flex; flex-direction: column; gap: 4px;
}

.settings-form {
  display: grid;
  grid-template-columns: minmax(7rem, 10rem) minmax(0, 1fr);
  gap: 10px 14px;
  align-items: center;
  max-width: 34rem;
}
.settings-label { font-size: .82rem; font-weight: 700; color: var(--soft); }
.settings-input {
  font: 500 .95rem/1.3 var(--sans);
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 8px 10px;
  width: 100%;
  min-width: 0; /* date/number inputs carry a large intrinsic min-width */
}
.settings-status { grid-column: 1 / -1; min-height: 1.2em; font-size: .82rem; color: var(--soft); }
.settings-save { grid-column: 1 / -1; justify-self: start; }
.settings-gender-other { grid-column: 2; }
@media (max-width: 34rem) {
  .settings-form { grid-template-columns: 1fr; }
  .settings-save { justify-self: stretch; }
}

.account-quicknav {
  display: flex; flex-wrap: wrap; gap: 6px 10px;
  margin: 0 0 18px;
  & a {
    font: 600 .82rem/1 var(--mono);
    color: var(--soft);
    text-decoration: none;
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: 6px 12px;
    &:hover { color: var(--ink); border-color: var(--soft); }
  }
}