/* Profiles: the avatar, the user card beside a post, the signature under it, the profile
   page, the members list and a member's own account pages.
   The look follows docs/mockups/Thread.dc.html (the user card and the signature).

   Mobile first: the rules outside a media query lay things out for a phone; the min-width
   blocks at the end add room. Everything tapped is at least 44 px tall, form fields use
   16 px text (smaller makes an iPhone zoom the page), and nothing here moves.

   Every color, font and corner radius is a custom property from site.css, so a
   community's theme can change them. A value with no variable yet gets one there first:
   the avatar tints and the badge colors were added for this file. */

/* ---- The avatar: a photo, or initials on one of the theme's tints ---- */
.avatar { overflow: hidden; text-decoration: none; line-height: 1; }
/* The photo fills the circle, and the member chooses which part of it shows: how far
   across, how far down and the zoom (Core's AvatarPosition; the _Avatar partial writes the
   three properties on the picture, and writes none for the middle at the natural fit).
   --avatar-x and --avatar-y are a share of the room the photo has to move in, so the same
   pair is both where the photo sits and the point it is enlarged around. That is what
   keeps the circle full at every value, for a wide, a tall and a square photo. */
.avatar img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  object-position: var(--avatar-x, 50%) var(--avatar-y, 50%);
  transform-origin: var(--avatar-x, 50%) var(--avatar-y, 50%);
  transform: scale(var(--avatar-zoom, 1));
}
.avatar-tint-1 { background: var(--avatar-tint-1); }
.avatar-tint-2 { background: var(--avatar-tint-2); }
.avatar-tint-3 { background: var(--avatar-tint-3); }
.avatar-tint-4 { background: var(--avatar-tint-4); }
.avatar-tint-5 { background: var(--avatar-tint-5); }
.avatar-tint-6 { background: var(--avatar-tint-6); }
/* The big one on a profile and on the edit page. It keeps its size at every width. */
.avatar.avatar-large { width: 72px; height: 72px; font-size: 26px; }
/* The small one beside "last post by" on the board index and in thread lists
   (Shared/LastPosters). It keeps its size at every width too. */
.avatar.avatar-small { width: 32px; height: 32px; font-size: 12px; box-shadow: var(--avatar-ring-small); }

/* ---- The user card. On a phone it lies across the top of the post: the avatar, then
   the name and the facts wrapping beside it. ---- */
.user-card { min-width: 0; }
.user-card-body { flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
.user-card-name { flex: 0 1 auto; display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.user-card-name:hover { text-decoration: underline; }
.user-card-name:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-chip); }
.user-card-stats { flex: 1 1 100%; }
.user-card-role.tag { margin-right: 0; }

/* What an add-on adds. A chip: "W9XYZ" with a check mark when the add-on verified it. */
.card-badge {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 2px 8px;
  border-radius: var(--radius-chip); background: var(--badge-surface); color: var(--badge-ink);
  font-family: var(--font-mono); font-size: 13px; font-weight: 700; overflow-wrap: anywhere;
}
.card-badge svg { flex: none; }
/* A labeled line: "Grid EN52". */
.card-line { overflow-wrap: anywhere; }
.card-line-label { color: var(--muted); }
.card-line a { color: var(--accent); }

/* ---- The signature under a post ---- */
.signature {
  margin-top: 18px; padding-top: 12px; border-top: 1px dashed var(--control-line);
  color: var(--muted); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere;
}
.signature p { margin: 0; }
.signature a { color: var(--accent); }
.signature a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-chip); }

/* ---- The profile page ---- */
.profile-page .profile-card { padding: 16px; gap: 16px; }
.profile-head { flex-wrap: wrap; align-items: flex-start; }
.profile-head-text { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.profile-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.profile-chips .tag { margin-right: 0; }
.profile-chips .profile-role { margin-top: 0; }
.profile-about { margin: 2px 0 0; overflow-wrap: anywhere; }
.profile-edit { flex: 1 1 100%; }
.profile-facts dd { overflow-wrap: anywhere; }
.profile-facts dd a { color: var(--accent); }
.profile-fact-note { display: block; color: var(--muted); font-size: 13px; font-weight: 400; }

.profile-activity { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 12px; }

/* Tabs: posts or threads, how the members list is sorted, the account pages. Each is a
   real link; the current one is filled as well as marked with aria-current. */
.profile-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.profile-tabs a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--button-line); border-radius: var(--radius-small);
  background: var(--surface); color: var(--ink); font-weight: 600; text-decoration: none; box-shadow: var(--elev-1);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.profile-tabs a:hover { border-color: var(--control-line); box-shadow: var(--elev-2); }
.profile-tabs a[aria-current] { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
.profile-tabs a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.profile-item { padding: 12px 16px; border-top: 1px solid var(--line-soft); transition: background-color var(--ease); }
.profile-item:hover { background: var(--surface-alt); }
.profile-item:first-child { border-top: 0; }
.profile-item-title { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.profile-item-title a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; }
.profile-item-title a:hover { text-decoration: underline; }
.profile-item-title .tag { margin: 0 0 0 6px; }
.profile-item-text { margin: 0; overflow-wrap: anywhere; }
.profile-item-meta { margin: 4px 0 0; color: var(--muted); font-size: 13px; }

/* ---- The members list ---- */
.members-search { display: flex; flex-wrap: wrap; gap: 8px; }
.members-search-box {
  flex: 1 1 220px; min-width: 0; min-height: 44px; padding: 10px 14px;
  border: 1px solid var(--field-line); border-radius: var(--radius-small);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 16px;
}
.members-search-box:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.member-list { margin: 0; padding: 0; list-style: none; }
/* On a phone a row is two lines: who, then their numbers. */
.member-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 16px; border-top: 1px solid var(--line-soft); transition: background-color var(--ease); }
.member-row:hover { background: var(--surface-alt); }
.member-row:first-child { border-top: 0; }
.member-row .avatar { width: 44px; height: 44px; font-size: 16px; }
.member-row-main { flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.member-row-main .tag { margin-right: 0; }
.member-row-name { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-size: 16px; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.member-row-name:hover { text-decoration: underline; }
.member-row-facts { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 0 14px; padding-left: 56px; color: var(--muted); font-size: 13px; }

/* ---- A member's own account pages ---- */
.settings { width: 100%; max-width: 760px; margin: -12px auto 0; display: flex; flex-direction: column; gap: 14px; }
.settings-head { display: flex; flex-direction: column; gap: 12px; }
.settings-card { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.settings-title { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.settings-text { margin: 0; color: var(--muted); }
.settings-text a, .settings-card .field-hint a { color: var(--accent); }
.settings-form { display: flex; flex-direction: column; gap: 16px; }
.settings-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.settings-buttons .forum-button { flex: 1 1 auto; }
.settings .forum-button:disabled { opacity: 0.55; cursor: not-allowed; }
.settings .field input:disabled { background: var(--ground); color: var(--muted); }
.settings .field input[type="file"] { padding: 8px; }
.settings a:focus-visible, .settings .forum-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-chip); }
.settings .check { align-items: flex-start; }
.settings .check input { margin-top: 11px; }
.settings .check span { padding: 11px 0; }
.settings-form .check + .check { margin-top: -16px; }

.settings-facts { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.settings-facts dt { color: var(--muted); font-size: 14px; }
.settings-facts dd { margin: 2px 0 0; font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }

/* The photo: what you have now on the left, the way to change it beside it. */
.avatar-edit { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.avatar-edit [hidden] { display: none; }
.avatar-edit-now { flex: none; }
.avatar-edit-forms { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.avatar-chosen { color: var(--ink); font-weight: 600; }
/* Only a browser with scripts off sees these: the three numbers, typed. */
.avatar-numbers { min-width: 0; margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 10px; }
.avatar-numbers legend { padding: 0; margin-bottom: 6px; }

/* The crop box: the photo itself, opened over the page, with the avatar's circle on it.
   The member drags the photo under the circle and pinches or scrolls to zoom; what is
   inside the circle is what everyone sees, and the rest of the photo is dimmed around it.
   profile.js sizes and moves the photo; nothing here animates. */
.avatar-crop {
  width: min(460px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto;
  padding: 16px; border: 1px solid var(--card-line); border-radius: var(--radius);
  background: var(--surface-raised); color: var(--ink); box-shadow: var(--elev-3);
}
.avatar-crop[open] { display: flex; flex-direction: column; gap: 12px; }
.avatar-crop::backdrop { background: color-mix(in srgb, var(--ink) 60%, transparent); }
/* A square the photo spills across. A finger on it moves the photo, never the page. */
.avatar-crop-stage {
  position: relative; flex: none; overflow: hidden; width: min(100%, 58dvh); margin: 0 auto; aspect-ratio: 1;
  border-radius: var(--radius-small); background: var(--band);
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
}
.avatar-crop-stage.is-dragging { cursor: grabbing; }
.avatar-crop-stage:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.avatar-crop-stage img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; -webkit-user-drag: none; }
/* The circle: a ring, and its own shadow dims everything outside it. */
.avatar-crop-circle {
  position: absolute; left: 50%; top: 50%; width: 76%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: var(--radius-round); pointer-events: none;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 100vmax color-mix(in srgb, var(--ink) 62%, transparent);
}
.avatar-crop-tools { display: flex; justify-content: center; gap: 8px; }
.avatar-crop-tools .forum-button { min-width: 48px; }

/* The signature's editor is a few lines tall, not a post's height. */
.signature-field { display: flex; flex-direction: column; gap: 6px; }
.signature-field .rf-field-label, .signature-field .field-label { font-weight: 600; }
.signature-field .rf-editor .rf-content { min-height: 4.6em; }
.signature-field textarea { width: 100%; min-height: 96px; padding: 10px 12px; border: 1px solid var(--field-line); border-radius: var(--radius-small); background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; line-height: 1.5; resize: vertical; }
.signature-shown { margin-top: 0; }

@media (min-width: 560px) {
  .profile-page .profile-card { padding: 24px; gap: 20px; }
  .avatar.avatar-large { width: 96px; height: 96px; font-size: 34px; }
  .profile-edit { flex: 0 0 auto; }
  .settings-card { padding: 22px 24px; }
  .settings-buttons .forum-button { flex: 0 0 auto; }
  .profile-item { padding: 12px 20px; }

  /* Members: one line per member, the numbers in their own columns on the right. */
  .member-row { flex-wrap: nowrap; padding: 10px 20px; }
  .member-row-facts { flex: 0 0 auto; flex-wrap: nowrap; gap: 0 20px; padding-left: 0; }
  .member-row-facts span { min-width: 84px; }
  .member-row-facts span + span { min-width: 136px; }
}

@media (min-width: 768px) {
  /* The user card stands beside the post (threads.css gives it its column): avatar on
     top, then the name, the add-on's chips and lines, the counts and the role. */
  .user-card-body { flex: 0 0 auto; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 6px; width: 100%; }
  .user-card-name { margin-top: 4px; }
  .user-card-stats { flex: 0 0 auto; }
  .user-card-role.tag { margin-top: 2px; }

  .settings { margin-top: -8px; gap: 16px; }
  .settings-head { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
}

/* A mouse can hit a smaller target, as in the mockup. Touch screens keep 44 px. */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .profile-item-title a, .member-row-name, .user-card-name { min-height: 0; }
  .profile-item { padding-top: 14px; padding-bottom: 14px; }
}