/* profile.css — styles for the new Profile and Settings pages, plus the
 * small topbar nav that links to them from every page.
 *
 * This file is additive and self-contained on purpose: every rule below
 * carries a var(--token, fallback) so it renders correctly even if a
 * token this app already defines elsewhere (in base.css) isn't picked
 * up for some reason — same defensive approach main.js's own injected
 * styles already use. It doesn't redefine anything from base.css,
 * buttons.css, gate.css, feed.css, etc. — only genuinely new pieces.
 */

/* ---------- topbar nav ---------- */
.topbar-actions{
  display:flex; align-items:center; gap:8px;
}
.icon-link{
  flex:none; width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-300, #A9BAE0);
  border:1px solid var(--glass-border, rgba(255,255,255,.16));
  background:var(--glass-fill, rgba(255,255,255,.05));
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.icon-link:hover, .icon-link:focus-visible{
  color:var(--ink-0, #F5F8FF);
  background:var(--glass-fill-strong, rgba(255,255,255,.12));
  border-color:rgba(255,255,255,.28);
  transform:translateY(-1px);
}
.icon-link[aria-current="page"]{
  color:#fff;
  background:linear-gradient(135deg, var(--blue-500,#4B84FF), var(--blue-600,#2F6FED));
  border-color:transparent;
}

/* ---------- shared page bits ---------- */
.page-lede{
  color:var(--ink-300, #A9BAE0); font-size:.92rem; line-height:1.55;
  margin:-6px 0 18px;
}
.settings-section + .settings-section,
.glass.form-card + .glass.form-card{ margin-top:16px; }

/* Every other card type in this app (.composer, .gate-card, .locked-card,
   .post-card) sets its own inside padding — .form-card never did, which
   is why its labels and inputs were sitting flush against the card's own
   border instead of sitting inside it. */
.glass.form-card{ padding:clamp(20px,4vw,28px); }


.section-head{ margin-bottom:14px; }
.section-head h2{
  font-family:var(--font-display, inherit); font-size:1.05rem; font-weight:600;
  color:var(--ink-0, #F5F8FF); margin:0 0 4px;
}
.section-head p{
  font-size:.84rem; color:var(--ink-500, #7C8FC2); margin:0; line-height:1.5;
}

/* ---------- locked state (guest view of profile/settings) ---------- */
.locked-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
  padding:28px 24px;
}
/* `.locked-card`'s own `display:flex` above always beats the browser's
   built-in `[hidden]{display:none}` — an author rule outranks a
   user-agent rule regardless of specificity — so setting
   lockedView.hidden = true in JS was doing nothing visually. This rule
   is more specific than the one above, so it wins instead and hidden
   actually hides the card once someone's signed in. (base.css also now
   carries a global `[hidden]{display:none !important}` reset, so this
   is belt-and-suspenders at this point — left in place since it's
   harmless and documents the original bug.) */
.locked-card[hidden]{ display:none; }
/* Give the locked card breathing room from whatever section follows it
   (the profile form on profile.html, the settings list on settings.html) —
   same 20px rhythm as the gap between two stacked .form-cards below. */
.locked-card + *{ margin-top:20px; }
.locked-card .locked-ic{
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--blue-300, #9CC0FF);
  background:var(--glass-fill-strong, rgba(255,255,255,.1));
}
.locked-card h2{
  font-size:1.1rem; font-weight:600; color:var(--ink-0, #F5F8FF); margin:0;
}
.locked-card p{
  font-size:.88rem; color:var(--ink-300, #A9BAE0); line-height:1.55; margin:0;
  max-width:44ch;
}

/* ---------- member profile: loading state ----------
   member.js shows this section (with the `glass` class added in
   member.html) while it awaits the getDoc() lookup. Sized and centered
   to roughly match the notFoundView/memberView cards next to it, so
   swapping `hidden` between them doesn't jump the page height around. */
.member-loading{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; padding:60px 24px; min-height:220px; text-align:center;
}
.member-loading p{
  margin:0; font-family:var(--font-mono, monospace); font-size:.8rem;
  letter-spacing:.03em; color:var(--ink-300, #A9BAE0);
}
.member-loading-dots{
  display:inline-flex; align-items:center; gap:8px;
}
.member-loading-dots span{
  width:9px; height:9px; border-radius:50%;
  background:linear-gradient(135deg, var(--blue-400,#6FA0FF), var(--blue-600,#2F6FED));
  box-shadow:0 0 10px rgba(75,132,255,.5);
  animation:memberLoadingPulse 1.2s ease-in-out infinite;
}
.member-loading-dots span:nth-child(2){ animation-delay:.15s; }
.member-loading-dots span:nth-child(3){ animation-delay:.3s; }
@keyframes memberLoadingPulse{
  0%, 80%, 100%{ transform:scale(.5); opacity:.35; }
  40%{ transform:scale(1); opacity:1; }
}

/* ---------- form fields ---------- */
.field{ margin-bottom:18px; }
.field:last-child{ margin-bottom:0; }
.field label{
  display:block; font-size:.78rem; font-weight:600; letter-spacing:.01em;
  color:var(--ink-200, #C9D6F5); margin-bottom:7px;
}
.field .field-hint{
  font-size:.78rem; color:var(--ink-500, #7C8FC2); margin-top:6px; line-height:1.5;
}
.field input[type="text"],
.field input[type="url"],
.field textarea{
  width:100%; box-sizing:border-box; font:inherit; font-size:.92rem;
  color:var(--ink-0, #F5F8FF);
  background:var(--glass-fill, rgba(255,255,255,.05));
  border:1px solid var(--glass-border, rgba(255,255,255,.16));
  border-radius:12px; padding:11px 14px;
  transition:border-color .15s ease, background .15s ease;
}
.field input[type="text"]::placeholder,
.field input[type="url"]::placeholder,
.field textarea::placeholder{ color:var(--ink-500, #7C8FC2); }
.field input[type="text"]:focus,
.field input[type="url"]:focus,
.field textarea:focus{
  outline:none; border-color:var(--blue-400, #6FA0FF);
  background:var(--glass-fill-strong, rgba(255,255,255,.08));
}
.field textarea{ resize:vertical; min-height:84px; line-height:1.5; }
.field-row{ display:flex; gap:14px; }
.field-row .field{ flex:1; min-width:0; }
.field-meta{
  display:flex; justify-content:flex-end; margin-top:6px;
}

/* ---------- avatar editor ---------- */
.avatar-edit{
  display:flex; align-items:center; gap:18px; margin-bottom:22px;
}
.avatar-edit-photo{
  position:relative; flex:none; width:88px; height:88px;
}
.avatar-lg{
  width:88px; height:88px; border-radius:50%; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; font-weight:600; color:#fff;
  background:linear-gradient(135deg, var(--blue-500,#4B84FF), var(--blue-600,#2F6FED));
}
.avatar-lg img{ width:100%; height:100%; object-fit:cover; display:block; }
.avatar-cam-btn{
  position:absolute; right:-2px; bottom:-2px; width:32px; height:32px;
  border-radius:50%; border:2px solid var(--bg-0, #0B1330);
  display:flex; align-items:center; justify-content:center;
  color:#fff; cursor:pointer;
  background:linear-gradient(135deg, var(--blue-500,#4B84FF), var(--blue-600,#2F6FED));
  box-shadow:0 8px 18px -6px rgba(2,8,25,.6);
  transition:transform .15s ease;
}
.avatar-cam-btn:hover, .avatar-cam-btn:focus-visible{ transform:scale(1.07); }
.avatar-cam-btn.busy{ opacity:.6; pointer-events:none; }
.avatar-edit-meta{ display:flex; flex-direction:column; gap:6px; }
.avatar-edit-meta .avatar-name{ font-weight:600; color:var(--ink-0, #F5F8FF); font-size:.98rem; }
.avatar-remove-btn{
  align-self:flex-start; border:none; background:transparent; padding:0;
  font-size:.8rem; font-weight:600; color:var(--danger, #FF7A7A); cursor:pointer;
}
.avatar-remove-btn:hover, .avatar-remove-btn:focus-visible{ text-decoration:underline; }

/* ---------- skills chip input ---------- */
.skill-chips{
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px;
}
.skill-chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 8px 6px 12px; border-radius:999px; font-size:.82rem; font-weight:500;
  color:var(--ink-100, #DCE6FF);
  background:var(--glass-fill-strong, rgba(255,255,255,.09));
  border:1px solid var(--glass-border, rgba(255,255,255,.16));
}
.skill-chip button{
  width:16px; height:16px; border:none; border-radius:50%; padding:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-500, #7C8FC2); background:transparent; cursor:pointer;
}
.skill-chip button:hover, .skill-chip button:focus-visible{
  color:#fff; background:rgba(255,255,255,.14);
}
.skill-empty{ font-size:.82rem; color:var(--ink-500, #7C8FC2); }

/* ---------- profile preview ---------- */
.profile-preview{ display:flex; gap:14px; align-items:flex-start; }
.profile-preview .avatar{ flex:none; width:44px; height:44px; }
.preview-name{ font-weight:600; color:var(--ink-0, #F5F8FF); font-size:.95rem; }
.preview-title{ font-size:.82rem; color:var(--blue-300, #9CC0FF); margin-top:2px; }
.preview-bio{ font-size:.85rem; color:var(--ink-300, #A9BAE0); line-height:1.5; margin-top:8px; }
.preview-skills{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.preview-skills span{
  font-size:.74rem; font-weight:600; padding:4px 9px; border-radius:999px;
  color:var(--ink-200, #C9D6F5); background:var(--glass-fill, rgba(255,255,255,.06));
  border:1px solid var(--glass-border, rgba(255,255,255,.14));
}

/* ---------- settings rows ---------- */
.settings-row{
  display:flex; align-items:center; gap:16px; justify-content:space-between;
  padding:14px 0;
}
.settings-row + .settings-row{ border-top:1px solid var(--glass-border, rgba(255,255,255,.1)); }
.settings-row-text{ flex:1; min-width:0; }
.settings-row-text strong{
  display:block; font-size:.9rem; color:var(--ink-0, #F5F8FF); margin-bottom:3px;
}
.settings-row-text span{ font-size:.8rem; color:var(--ink-500, #7C8FC2); line-height:1.5; }
.settings-email{
  font-family:var(--font-mono, monospace); font-size:.86rem;
  color:var(--ink-200, #C9D6F5);
}

/* ---------- toggle switch ---------- */
.switch{ position:relative; flex:none; width:44px; height:26px; }
.switch input{
  position:absolute; inset:0; opacity:0; margin:0; cursor:pointer;
}
.switch .track{
  position:absolute; inset:0; border-radius:999px;
  background:var(--glass-fill-strong, rgba(255,255,255,.14));
  border:1px solid var(--glass-border, rgba(255,255,255,.18));
  transition:background .18s ease, border-color .18s ease;
}
.switch .thumb{
  position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow:0 2px 6px rgba(2,8,25,.4);
  transition:transform .18s cubic-bezier(.4,0,.2,1);
}
.switch input:checked + .track{
  background:linear-gradient(135deg, var(--blue-500,#4B84FF), var(--blue-600,#2F6FED));
  border-color:transparent;
}
.switch input:checked + .track .thumb{ transform:translateX(18px); }
.switch input:focus-visible + .track{ outline:2px solid var(--blue-300, #9CC0FF); outline-offset:2px; }

/* ---------- danger zone ---------- */
.danger-card{ border-color:rgba(255,122,122,.28) !important; }
.danger-card .section-head h2{ color:#FF9C9C; }
.danger-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }

@media (max-width:480px){
  .avatar-edit{ gap:14px; }
  .field-row{ flex-direction:column; gap:0; }
  .settings-row{ align-items:flex-start; }
}

/* ---------- topbar / main spacing ----------
   Same fixes as group.css and messenger.css: the who-pill (shorter box)
   sits centered against the taller Bulletin pill and reads as flush
   against the top; the Bulletin pill and who-pill sit flush against the
   screen edges; and base.css's shared `main{padding-top:26px}` leaves
   too much air above the form cards. This file is shared by
   profile.html AND settings.html, so both pages get all three fixes. */
.who-pill{ margin-top:6px; }
main{ padding-top:10px; padding-left:14px; padding-right:14px; }
.topbar{ padding-left:14px; padding-right:14px; }