/* ============================================================================
   Profile — the owner's own account record.

   Three registers stacked: who the account is, what it is worth and what it
   has done, then the split between the one thing the owner can change (the
   form, in the main column) and the facts they cannot (the account panel and
   the rail, in the side column). It reuses the puzzle detail and ledger
   topology — `main side` at >=1024px — so the owner-facing surfaces share one
   shape.

   Colour is spent twice: the accent on the balance, violet on the blocked
   stake. Nothing else on this page is a state.

   This sheet is namespaced under `.acct-*` on purpose. The version it replaces
   declared `.form-input`, `.form-label`, `.form-help`, `.stat-value` and a
   half-dozen `.profile-*` selectors at the top level, which leaked into every
   other surface that happens to use those names. The form here is built from
   the system's own `.field` / `.input` / `.btn` primitives instead.
   ========================================================================= */

.acct {
  padding-block: var(--sp-8) var(--sp-16);
}

/* ---------------------------------------------------------------------------
   Identity — avatar, name, level, handle, and the way to the public profile.
   ------------------------------------------------------------------------ */

.acct-id {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4) var(--sp-5);
  margin-block-end: var(--sp-6);
}

.acct-id__who {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-width: 0;
}

.acct-id__avatar {
  --avatar-size: 72px;
}

.acct-id__names {
  min-width: 0;
}

.acct-id__nameline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
}

.acct-id__name {
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  color: var(--ink-050);
  margin: 0;
  /* display_name allows 50 characters with no space in them. */
  overflow-wrap: anywhere;
}

.acct-id__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-sm);
  color: var(--ink-400);
}

.acct-id__handle {
  font-size: var(--fs-sm);
  color: var(--ink-300);
  overflow-wrap: anywhere;
}

.acct-id__dot {
  flex: none;
  width: 3px;
  height: 3px;
  border-radius: var(--r-full);
  background: var(--ink-600);
}

.acct-id__public {
  flex: none;
}

/* Below 768px the meta line wraps, and a wrapped row leaves the separator dot
   stranded at the end of the first line. Stack instead and drop the dot — the
   separator only has a job while the two facts share a line. */
@media (max-width: 767.98px) {
  .acct-id__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-1);
  }

  .acct-id__dot {
    display: none;
  }
}

@media (min-width: 768px) {
  .acct-id__name {
    font-size: var(--fs-3xl);
  }
}

/* ---------------------------------------------------------------------------
   The position — the system's ledger strip. Cells are separated by a 1px gap
   over a rule-coloured ground so the separators resolve on both axes and in
   both writing directions, rather than by per-cell borders that double up.
   ------------------------------------------------------------------------ */

.acct-position {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-block-end: var(--sp-8);
}

.acct-position__cell {
  background: var(--ink-900);
  padding: var(--sp-3) var(--sp-4);
  min-width: 0;
}

.acct-position__label {
  margin: 0 0 var(--sp-1);
}

.acct-position__value {
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--ink-100);
  margin: 0;
}

.acct-position__value--accent {
  color: var(--accent);
}

.acct-position__value--locked {
  color: var(--locked);
}

/* ---------------------------------------------------------------------------
   Layout — one column on phones in the order the owner reads it (form, then
   the account facts, then the destinations); the ledger's `main side` split
   once there is room for it.
   ------------------------------------------------------------------------ */

.acct__layout {
  display: grid;
  gap: var(--sp-6);
}

.acct__main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  min-width: 0;
}

@media (min-width: 1024px) {
  .acct__layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--sp-8);
    align-items: start;
  }
}

/* ---------------------------------------------------------------------------
   The edit form — the system's `.field` primitives inside a panel body.
   ------------------------------------------------------------------------ */

.acct-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.acct-form__actions {
  display: flex;
  justify-content: flex-start;
}

/* ---------------------------------------------------------------------------
   Account facts — read-only. A label over a value, the way a data pair is set
   everywhere else in the system.
   ------------------------------------------------------------------------ */

.acct-facts {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* Two short facts sit side by side once the panel is wide enough to hold them;
   the profile URL keeps the full row, because it is a single unbreakable token
   with a control under it. */
@media (min-width: 768px) {
  .acct-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-5) var(--sp-6);
  }

  .acct-fact--wide {
    grid-column: 1 / -1;
  }
}

.acct-fact__value {
  display: block;
  margin-block-start: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--ink-100);
  /* An email address and a profile URL are single unbroken tokens that can
     outrun a 300px column. */
  overflow-wrap: anywhere;
}

.acct-fact__copy {
  margin-block-start: var(--sp-2);
}

/* ---------------------------------------------------------------------------
   The rail — the owner's other surfaces, which are otherwise reachable only
   from the avatar dropdown. Rows, not chips: they are destinations with names,
   and a 44px row is the touch target a phone needs.
   ------------------------------------------------------------------------ */

.acct-rail__title {
  margin: 0 0 var(--sp-2);
}

/* One bordered group with hairline-separated rows, not five loose links: the
   destinations are a set, and on a phone a bare list of text under a micro
   label reads as unstyled next to the panels above it.

   The corners are set on the first and last rows rather than clipped with
   `overflow: hidden` on the list. The focus treatment is a box-shadow, and a
   clipping ancestor would swallow the ring on the rows that need it most. */
.acct-rail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--ink-850);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.acct-rail__list > li + li {
  border-block-start: 1px solid var(--line);
}

.acct-link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 44px;
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-200);
  text-decoration: none;
  transition: background-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease);
}

.acct-rail__list > li:first-child .acct-link {
  border-start-start-radius: calc(var(--r-lg) - 1px);
  border-start-end-radius: calc(var(--r-lg) - 1px);
}

.acct-rail__list > li:last-child .acct-link {
  border-end-start-radius: calc(var(--r-lg) - 1px);
  border-end-end-radius: calc(var(--r-lg) - 1px);
}

.acct-link:hover {
  background: var(--ink-800);
  color: var(--ink-050);
}

.acct-link .icon {
  flex: none;
  color: var(--ink-400);
  transition: color var(--dur-1) var(--ease);
}

.acct-link:hover .icon {
  color: var(--ink-200);
}

.acct-link__name {
  flex: 1 1 auto;
  min-width: 0;
}

/* Matches the header drawer's unread badge exactly — same datum, same mark. */
.acct-link__count {
  flex: none;
  padding: 0.125rem 0.375rem;
  border: 1px solid var(--accent-dim);
  border-radius: var(--r-sm);
  background: var(--accent-wash);
  color: var(--accent);
  font-size: var(--fs-2xs);
  font-weight: 700;
  line-height: 1.4;
}