/* ============================================================================
   DevPlan — profile dialog

   Sits inside the .acct-modal shell that account.css already defines, so only
   the contents are styled here. Every colour is a token: this file must contain
   no literal colour value, same rule as the rest of the app.
   ========================================================================= */

.pf-dialog { max-width: 460px; }

/* Three independent saves, so they need to read as three things rather than one
   long form — the divider is the only thing telling you that the Save above it
   does not save the field below it. */
.pf-sec {
  padding: 20px 0;
  border-top: 1px solid var(--border);
}
.pf-sec:first-child { padding-top: 4px; border-top: 0; }
.pf-sec:last-child { padding-bottom: 4px; }

.pf-sec__title {
  margin: 0 0 14px;
  font-size: .95rem;
  font-weight: 650;
  color: var(--text);
}

.pf-hint { margin: 0 0 14px; }

/* ------------------------------------------------------------- avatar -- */

.pf-avatar__row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.pf-avatar {
  position: relative;
  flex: none;
  width: 72px;
  height: 72px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--avatar-1-fg);
  background: var(--avatar-1-bg);
  border: 1px solid var(--border);
  border-radius: 50%;
}

.pf-avatar[data-tint="1"] { color: var(--avatar-1-fg); background: var(--avatar-1-bg); }
.pf-avatar[data-tint="2"] { color: var(--avatar-2-fg); background: var(--avatar-2-bg); }
.pf-avatar[data-tint="3"] { color: var(--avatar-3-fg); background: var(--avatar-3-bg); }
.pf-avatar[data-tint="4"] { color: var(--avatar-4-fg); background: var(--avatar-4-bg); }
.pf-avatar[data-tint="5"] { color: var(--avatar-5-fg); background: var(--avatar-5-bg); }
.pf-avatar[data-tint="6"] { color: var(--avatar-6-fg); background: var(--avatar-6-bg); }

.pf-avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pf-avatar__initials {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  user-select: none;
}

.pf-avatar__side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}
.pf-avatar__btn { white-space: nowrap; }

/* A destructive-ish action that must not compete with "Choose photo". */
.pf-linkbtn {
  min-height: 32px;
  padding: 0;
  font: inherit;
  font-size: .85rem;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  background: none;
  border: 0;
  cursor: pointer;
}
.pf-linkbtn:hover { color: var(--danger); }

/* -------------------------------------------------------------- names -- */

/* Side by side where there is room, stacked on a narrow phone. */
.pf-names {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 4px;
}
@media (max-width: 420px) {
  .pf-names { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ messages -- */

.pf-msg {
  margin: 12px 0 0;
  font-size: .875rem;
  line-height: 1.45;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.pf-msg--ok { color: var(--ok); }
.pf-msg--danger { color: var(--danger); }

.pf-save { margin-top: 14px; }

/* On a phone every one of these is a thumb target at the bottom of a scrolling
   sheet, so they go full width rather than sitting narrow against the edge. */
@media (max-width: 480px) {
  .pf-save { width: 100%; }
  .pf-avatar__row { gap: 14px; }
}