/* cibo account pages — creator studio / profile / settings.
   Clarity-first (consumes --cl-* tokens); the three pages default to
   body.light.clarity. Loaded alongside index.css + notes.css. */

.account-page{max-width:760px;margin:0 auto;padding:12px var(--cl-panel-inline,20px) 8px}

.account-card{box-sizing:border-box;background:var(--cl-surface,#fff);
  border:var(--cl-line-w,1px) solid var(--cl-line);border-radius:var(--cl-r-card,16px);
  padding:24px;margin:16px 0}
.account-card-heading{margin:0 0 20px;font:600 var(--cl-fs-h2,20px)/var(--cl-lh-h2,1.3) var(--font-cn);
  color:var(--cl-ink,#070a13);letter-spacing:-0.2px}

.account-form{display:flex;flex-direction:column;gap:18px}
.account-field{display:flex;flex-direction:column;gap:8px}
.account-label{font:500 var(--cl-fs-label,12px)/var(--cl-lh-body,1.5) var(--font-cn);color:var(--cl-muted,#696e77)}
.account-input,.account-textarea{box-sizing:border-box;width:100%;padding:12px 14px;
  border:var(--cl-line-w,1px) solid var(--cl-line);border-radius:var(--cl-r-sm,10px);
  background:var(--cl-surface,#fff);color:var(--cl-ink,#070a13);
  font:400 var(--cl-fs-body,14px)/var(--cl-lh-body,1.5) var(--font-cn);resize:vertical}
.account-input:focus,.account-textarea:focus{outline:0;border-color:var(--cl-brand,#7560d6);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--cl-brand,#7560d6) 12%,transparent)}
.account-textarea{min-height:96px}

.account-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px}
.account-status{margin:0;font:400 var(--cl-fs-body,14px)/var(--cl-lh-body,1.5) var(--font-cn)}
.account-status.is-error{color:var(--c-red,#ff3874)}
.account-status.is-success{color:var(--c-green,#00ada2)}

.account-btn{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
  min-height:40px;padding:0 20px;border-radius:var(--cl-r-full,9999px);border:0;cursor:pointer;
  font:500 var(--cl-fs-body,14px)/var(--cl-lh-18,1.3) var(--font-cn);transition:background-color .2s,color .2s}
.account-btn:disabled{opacity:.55;cursor:not-allowed}
.account-btn-primary{background:var(--cl-brand,#7560d6);color:#fff}
.account-btn-primary:hover:not(:disabled){background:var(--cl-brand-hover,#624dbb)}
.account-btn-secondary{background:var(--cl-fill,#f0f2f4);color:var(--cl-ink,#070a13);
  border:var(--cl-line-w,1px) solid var(--cl-line)}
.account-btn-secondary:hover{background:var(--cl-brand-soft,#f2eefc);color:var(--cl-brand-hover,#624dbb)}

.account-guest{display:flex;align-items:center;gap:16px;padding:24px;border-radius:var(--cl-r-sm,10px);
  background:var(--cl-fill,#f0f2f4)}
.account-guest p{margin:0;font:400 var(--cl-fs-body,14px)/var(--cl-lh-body,1.5) var(--font-cn);color:var(--cl-muted,#696e77)}

.account-field-avatar .account-avatar-row{display:flex;align-items:center;gap:16px}
.account-avatar-img,.account-avatar-placeholder{width:64px;height:64px;border-radius:var(--cl-r-round,50%);flex:none}
.account-avatar-img{object-fit:cover;background:var(--cl-fill,#f0f2f4)}
.account-avatar-placeholder{display:flex;align-items:center;justify-content:center;
  background:rgba(200,200,200,.9);color:#fff;font:600 var(--cl-fs-h2,20px)/1 var(--font-cn)}

/* ── Profile ─────────────────────────────────────────────── */
.profile-header.account-card{padding:28px 24px}
.profile-head-row{display:flex;align-items:center;gap:20px}
.profile-avatar{width:72px;height:72px;border-radius:var(--cl-r-round,50%);object-fit:cover;
  background:var(--cl-fill,#f0f2f4);flex:none}
.profile-avatar-placeholder{display:flex;align-items:center;justify-content:center;
  background:rgba(200,200,200,.9);color:#fff;font:600 var(--cl-fs-h1,24px)/1 var(--font-cn)}
.profile-head-meta{min-width:0}
.profile-name{margin:0;font:600 var(--cl-fs-h2,20px)/var(--cl-lh-h2,1.3) var(--font-cn);color:var(--cl-ink,#070a13)}
.profile-bio{margin:10px 0 0;font:400 var(--cl-fs-body,14px)/var(--cl-lh-body,1.5) var(--font-cn);color:var(--cl-ink,#070a13)}
.profile-head-top{display:flex;align-items:center;gap:12px;min-width:0}
#profileNotes .notes-list{display:flex;flex-direction:column}
.page-empty-state.notes-empty{margin:8px 0 24px;text-align:left;color:var(--cl-muted,#696e77);
  font:400 var(--cl-fs-body,14px)/var(--cl-lh-body,1.5) var(--font-cn)}

/* ── Profile stats row ─────────────────────────────────────── */
.profile-stats{display:flex;align-items:center;gap:24px;margin-top:18px}
.profile-stat{display:inline-flex;align-items:baseline;gap:6px;padding:0;border:0;background:none;
  cursor:pointer;font:inherit;color:inherit;appearance:none}
.profile-stat-num{font:600 18px/1.3 var(--font-cn);color:var(--cl-ink,#070a13);font-variant-numeric:tabular-nums}
.profile-stat-label{font:400 14px/1.5 var(--font-cn);color:var(--cl-muted,#696e77)}

/* ── Follow button (two states) ────────────────────────────── */
.follow-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;height:28px;padding:0 16px;
  border:0;border-radius:var(--cl-r-full,9999px);cursor:pointer;appearance:none;
  font:500 12px/1 var(--font-cn);transition:background-color .2s,color .2s,border-color .2s}
.follow-btn[hidden]{display:none}
.follow-btn{background:var(--cl-brand,#7560d6);color:#fff}
.follow-btn:hover:not(:disabled){background:var(--cl-brand-hover,#624dbb)}
.follow-btn.is-following{background:transparent;color:var(--cl-brand,#7560d6);
  border:var(--cl-line-w,1px) solid var(--cl-brand,#7560d6)}
.follow-btn.is-following:hover:not(:disabled){background:color-mix(in srgb,var(--cl-brand,#7560d6) 10%,transparent);
  color:var(--cl-brand,#7560d6)}
.follow-btn:disabled{opacity:.55;cursor:not-allowed}

/* ── Tabs ──────────────────────────────────────────────────── */
.profile-tabs{display:flex;align-items:center;gap:32px;margin:8px 0 0;padding:0 8px}
.profile-tab{position:relative;padding:10px 0;border:0;background:none;cursor:pointer;appearance:none;
  font:400 var(--cl-fs-body,14px)/1.5 var(--font-cn);color:var(--cl-muted,#696e77)}
.profile-tab.is-active{color:var(--cl-ink,#070a13);font-weight:600}
.profile-tab.is-active::after{content:'';position:absolute;left:50%;bottom:0;width:32px;height:3px;margin-left:-16px;
  border-radius:var(--cl-r-full,9999px);background:var(--cl-brand,#7560d6)}

.profile-panel{margin-top:12px}
.profile-panel[hidden]{display:none}

/* ── People cards (following / followers) ──────────────────── */
.people-list{display:flex;flex-direction:column}
.people-card{display:flex;align-items:center;gap:12px;padding:12px 0}
.people-card + .people-card{border-top:var(--cl-line-w,1px) solid var(--cl-line-soft)}
.people-card-avatar-link{flex:none;line-height:0;text-decoration:none}
.people-card-avatar,.people-card-avatar-ph{width:40px;height:40px;border-radius:var(--cl-r-round,50%);flex:none}
.people-card-avatar{object-fit:cover;background:var(--cl-fill,#f0f2f4)}
.people-card-avatar-ph{display:flex;align-items:center;justify-content:center;
  background:var(--cl-fill,#f0f2f4);color:var(--cl-ink,#070a13);box-shadow:inset 0 0 0 1px var(--cl-line-soft)}
.people-card-avatar-ph span{font:500 var(--cl-fs-h3,16px)/1 var(--font-cn)}
.people-card-main{flex:1;min-width:0}
.people-card-name{display:flex;align-items:center;gap:6px;min-width:0;text-decoration:none;
  font:500 var(--cl-fs-body,14px)/1.4 var(--font-cn);color:var(--cl-ink,#070a13)}
.people-card-name:hover .people-card-nick{color:var(--cl-brand,#7560d6)}
.people-card-nick{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.people-card-bio{margin:2px 0 0;font:400 var(--cl-fs-label,12px)/1.4 var(--font-cn);color:var(--cl-muted,#696e77);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.people-empty[hidden]{display:none}

/* ── Settings tabs ─────────────────────────────────────────── */
.settings-tabs{display:flex;align-items:center;gap:32px;margin:8px 0 0;padding:0 8px}
.settings-tab{position:relative;padding:10px 0;border:0;background:none;cursor:pointer;appearance:none;
  font:400 var(--cl-fs-body,14px)/1.5 var(--font-cn);color:var(--cl-muted,#696e77)}
.settings-tab.is-active{color:var(--cl-ink,#070a13);font-weight:600}
.settings-tab.is-active::after{content:'';position:absolute;left:50%;bottom:0;width:32px;height:3px;margin-left:-16px;
  border-radius:var(--cl-r-full,9999px);background:var(--cl-brand,#7560d6)}
.settings-panel[hidden]{display:none}

/* ── Bio counter + cancel/done ─────────────────────────────── */
.bio-field-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.bio-count{font:400 var(--cl-fs-label,12px)/1.4 var(--font-cn);color:var(--cl-muted,#696e77);
  font-variant-numeric:tabular-nums}
.bio-actions{display:flex;align-items:center;gap:8px}
.bio-actions .account-btn{min-height:32px;padding:0 16px}

/* ── Account info (phone / region, read-only) ────────────────── */
.account-info-field{gap:10px}
.account-info-rows{display:flex;flex-direction:column;border:var(--cl-line-w,1px) solid var(--cl-line);
  border-radius:var(--cl-r-sm,10px);overflow:hidden}
.account-info-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px}
.account-info-row + .account-info-row{border-top:var(--cl-line-w,1px) solid var(--cl-line-soft)}
.account-info-key{font:400 var(--cl-fs-body,14px)/1.5 var(--font-cn);color:var(--cl-muted,#696e77)}
.account-info-value{font:500 var(--cl-fs-body,14px)/1.5 var(--font-cn);color:var(--cl-ink,#070a13);text-align:right}
.account-info-value.is-empty{font-weight:400;color:var(--cl-muted,#696e77)}

/* ── Updown radio (preferences) ────────────────────────────── */
.updown-field{gap:12px}
.updown-radio{display:flex;flex-direction:column;gap:12px}
.updown-radio-follow{display:inline-flex;align-items:center;align-self:flex-start;gap:8px;
  min-height:36px;padding:0 16px;border:var(--cl-line-w,1px) solid var(--cl-line);
  border-radius:var(--cl-r-full,9999px);background:var(--cl-surface,#fff);color:var(--cl-ink,#070a13);
  cursor:pointer;appearance:none;font:500 var(--cl-fs-body,14px)/1.3 var(--font-cn)}
.updown-radio-follow:hover{border-color:var(--cl-brand,#7560d6);color:var(--cl-brand,#7560d6)}
.updown-radio-follow.is-active{border-color:var(--cl-brand,#7560d6);color:var(--cl-brand,#7560d6);
  background:var(--cl-brand-soft,#f2eefc)}
.updown-radio-card{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;border:var(--cl-line-w,1px) solid var(--cl-line);border-radius:var(--cl-r-sm,10px);
  background:var(--cl-surface,#fff)}
.updown-radio-card.is-active{border-color:var(--cl-brand,#7560d6)}
.updown-radio-name{font:500 var(--cl-fs-body,14px)/1.4 var(--font-cn);color:var(--cl-ink,#070a13)}
.updown-radio-pair{display:flex;align-items:center;gap:8px}
.updown-radio-pick{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:var(--cl-line-w,1px) solid var(--cl-line);
  border-radius:var(--cl-r-full,9999px);background:var(--cl-surface,#fff);cursor:pointer;appearance:none}
.updown-radio-pick.is-selected{border-color:var(--cl-brand,#7560d6);background:var(--cl-brand-soft,#f2eefc)}
.updown-radio-swatch{width:18px;height:18px;border-radius:var(--cl-r-round,50%);background:var(--cuc,#ccc);flex:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.updown-radio-label{font:500 var(--cl-fs-label,12px)/1.2 var(--font-cn);color:var(--cl-ink,#070a13)}

/* ── Security & login (devices) ─────────────────────────────── */
.security-body{display:flex;flex-direction:column;gap:20px}
.security-heading{margin:0;font:600 var(--cl-fs-label,12px)/1.4 var(--font-cn);color:var(--cl-muted,#696e77);
  letter-spacing:.02em}
.security-devices{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.security-device{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;border:var(--cl-line-w,1px) solid var(--cl-line);border-radius:var(--cl-r-sm,10px);
  background:var(--cl-surface,#fff)}
.security-device-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.security-device-name{font:500 var(--cl-fs-body,14px)/1.4 var(--font-cn);color:var(--cl-ink,#070a13);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.security-device-meta{font:400 var(--cl-fs-label,12px)/1.4 var(--font-cn);color:var(--cl-muted,#696e77)}
.security-device-badge{flex:none;padding:2px 10px;border-radius:var(--cl-r-full,9999px);
  background:var(--cl-brand-soft,#f2eefc);color:var(--cl-brand,#7560d6);
  font:500 var(--cl-fs-label,12px)/1.4 var(--font-cn)}
.security-remove-btn{flex:none;min-height:32px;padding:0 14px}
.security-device-empty{padding:14px 16px;color:var(--cl-muted,#696e77);
  font:400 var(--cl-fs-body,14px)/1.5 var(--font-cn)}
.account-toast{position:fixed;left:50%;bottom:40px;z-index:9999;padding:10px 18px;
  border-radius:var(--cl-r-full,9999px);background:rgba(7,10,19,.88);color:#fff;
  font:500 var(--cl-fs-body,14px)/var(--cl-lh-body,1.5) var(--font-cn);
  opacity:0;transform:translate(-50%,6px);transition:opacity .2s ease,transform .2s ease;pointer-events:none}
.account-toast.is-show{opacity:1;transform:translate(-50%,0)}

@media(max-width:600px){
  .account-card{padding:20px 16px}
  .account-actions{flex-direction:column;align-items:stretch}
  .account-btn{width:100%}
  .profile-head-row{flex-direction:column;align-items:flex-start}
  .bio-field-foot{flex-direction:column;align-items:stretch}
  .bio-actions{justify-content:flex-end}
  .updown-radio-card{flex-direction:column;align-items:flex-start}
}