/* Profile composer: edit name, dates and biography; add a story; add a source.
   Every colour, radius, and font comes from forms.css. */
body[data-profile-contribution-open="true"]{overflow:hidden}

.perspective-intro--actions{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
}
.perspective-intro--actions>div{min-width:0}
.profile-add-action,
.profile-empty-action{
  min-height:44px;
  border:1px solid var(--btn-outline-line);
  border-radius:12px;
  background:var(--btn-outline-bg);
  color:var(--btn-outline-ink);
  font:var(--btn-font);
  letter-spacing:.02em;
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.profile-add-action{
  flex:0 0 auto;
  padding:0 17px;
}
.profile-empty-action{
  justify-self:center;
  margin-top:14px;
  padding:0 18px;
}
.profile-add-action:hover,
.profile-empty-action:hover{
  border-color:var(--form-accent-strong);
  background:var(--btn-outline-hover-bg);
  transform:translateY(-1px);
}
.profile-add-action:focus-visible,
.profile-empty-action:focus-visible{
  outline:2px solid var(--form-accent);
  outline-offset:3px;
}
.perspective-empty--action{
  display:grid;
  justify-items:center;
  gap:2px;
}

.profile-contribution[hidden]{display:none}
.profile-contribution{
  position:fixed;
  inset:0;
  z-index:420;
  display:grid;
  place-items:center;
  padding:24px;
  background:var(--form-scrim);
  color:var(--form-ink);
  backdrop-filter:blur(var(--form-scrim-blur));
}
.profile-contribution__panel{
  width:min(680px,100%);
  max-height:min(780px,calc(100dvh - 48px));
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  overflow:hidden;
  border:1px solid var(--form-panel-line);
  border-radius:var(--form-panel-radius);
  background:var(--form-panel-bg);
  box-shadow:var(--form-panel-shadow);
}
.profile-contribution[data-type="profile"] .profile-contribution__panel{width:min(820px,100%)}
.profile-contribution__header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:25px 27px 20px;
  border-bottom:1px solid var(--form-divider);
  background:var(--form-header-bg);
}
.profile-contribution__header>div{min-width:0}
.profile-contribution__header span{
  color:var(--form-kicker);
  font:800 9px/1.2 var(--form-ui-font);
  letter-spacing:.18em;
  text-transform:uppercase;
}
.profile-contribution__header h2{
  margin:6px 0 0;
  color:var(--form-title);
  font:500 31px/1.08 var(--form-display-font);
}
.profile-contribution__header p{
  margin:7px 0 0;
  overflow:hidden;
  color:var(--form-subtitle);
  font-size:12px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.profile-contribution__close{
  flex:0 0 auto;
  width:44px;
  height:44px;
  border:1px solid var(--btn-secondary-line);
  border-radius:12px;
  background:var(--btn-secondary-bg);
  color:var(--btn-secondary-ink);
  font-size:27px;
  line-height:1;
  cursor:pointer;
}
.profile-contribution__close:hover{background:var(--btn-secondary-hover-bg);color:var(--form-title)}
.profile-contribution__close:disabled{cursor:wait;opacity:.5}
.profile-contribution__close:focus-visible{outline:2px solid var(--form-accent);outline-offset:2px}
#profile-contribution-form{
  min-height:0;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto auto auto;
  overflow:hidden;
}
.profile-contribution__fields{
  min-height:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-content:start;
  gap:18px;
  overflow:auto;
  overscroll-behavior:contain;
  padding:24px 27px 12px;
  background:var(--form-body-bg);
}
.profile-contribution__field{
  display:grid;
  align-content:start;
  gap:8px;
  min-width:0;
}
.profile-contribution__field--wide{grid-column:1/-1}
.profile-contribution__field>span{
  color:var(--form-label);
  font:750 11px/1.3 var(--form-ui-font);
  letter-spacing:.035em;
}
.profile-contribution__field>span small{
  margin-left:5px;
  color:var(--form-hint);
  font-size:9px;
  font-weight:600;
  text-transform:uppercase;
}
.profile-contribution__field input,
.profile-contribution__field select,
.profile-contribution__field textarea{
  width:100%;
  min-height:var(--field-min-height);
  box-sizing:border-box;
  border:1px solid var(--field-line);
  border-radius:var(--field-radius);
  background:var(--field-bg);
  color:var(--field-ink);
  font:var(--field-font);
}
.profile-contribution__field input,
.profile-contribution__field select{padding:0 13px}
.profile-contribution__field textarea{
  min-height:112px;
  padding:12px 13px;
  resize:vertical;
}
.profile-contribution__field input::placeholder,
.profile-contribution__field textarea::placeholder{color:var(--field-placeholder)}
.profile-contribution__field input:focus,
.profile-contribution__field select:focus,
.profile-contribution__field textarea:focus{
  border-color:var(--field-focus-line);
  outline:2px solid var(--field-focus-ring);
  outline-offset:1px;
}
.profile-contribution__field select option{background:var(--field-option-bg);color:var(--field-ink)}
.profile-contribution__error{
  min-height:18px;
  margin:0;
  padding:5px 27px 0;
  background:var(--form-body-bg);
  color:var(--form-error);
  font-size:12px;
  line-height:1.45;
}
.profile-contribution__error:empty{visibility:hidden}
.profile-contribution__help{
  margin:0;
  padding:7px 27px 12px;
  color:var(--form-help);
  font-size:11px;
  background:var(--form-body-bg);
}
.profile-contribution__actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:16px 27px calc(16px + env(safe-area-inset-bottom));
  border-top:1px solid var(--form-divider);
  background:var(--form-footer-bg);
}
.profile-contribution__actions button{
  min-width:112px;
  min-height:var(--btn-min-height);
  border-radius:var(--btn-radius);
  font:var(--btn-font);
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease;
}
.profile-contribution__cancel{
  border:1px solid var(--btn-secondary-line);
  background:var(--btn-secondary-bg);
  color:var(--btn-secondary-ink);
}
.profile-contribution__cancel:hover{background:var(--btn-secondary-hover-bg)}
.profile-contribution__save{
  border:1px solid var(--btn-primary-line);
  background:var(--btn-primary-bg);
  color:var(--btn-primary-ink);
}
.profile-contribution__save:hover{background:var(--btn-primary-hover-bg)}
.profile-contribution__actions button:focus-visible{outline:2px solid var(--form-accent);outline-offset:2px}
.profile-contribution__actions button:disabled{cursor:wait;opacity:.56}

.profile-contribution-toast{
  position:fixed;
  left:50%;
  bottom:max(24px,calc(16px + env(safe-area-inset-bottom)));
  z-index:450;
  max-width:min(420px,calc(100% - 32px));
  padding:12px 17px;
  border:1px solid var(--toast-line);
  border-radius:var(--toast-radius);
  background:var(--toast-bg);
  color:var(--toast-ink);
  box-shadow:var(--toast-shadow);
  font:700 12px/1.4 var(--form-ui-font);
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,12px);
  transition:opacity .18s ease,transform .18s ease;
}
.profile-contribution-toast.is-visible{opacity:1;transform:translate(-50%,0)}

/* The classic theme is carried by the forms.css tokens; only the panel colour needs restating. */
body.classic-tree-mode .profile-contribution__panel{color:var(--form-ink)}
body.classic-tree-mode .profile-add-action,
body.classic-tree-mode .profile-empty-action{
  border-radius:2px;
  box-shadow:inset 0 0 0 2px rgba(255,239,204,.25);
}

@media(max-width:650px){
  .perspective-intro--actions{align-items:flex-start;flex-direction:column;gap:16px}
  .profile-add-action{align-self:stretch}
  .profile-contribution{place-items:stretch;padding:0}
  .profile-contribution__panel{
    width:100%;
    max-height:100vh;
    max-height:100dvh;
    min-height:100vh;
    min-height:100dvh;
    border:0;
    border-radius:0;
  }
  .profile-contribution__header{padding:calc(18px + env(safe-area-inset-top)) 18px 15px}
  .profile-contribution__header h2{font-size:27px}
  .profile-contribution__fields{
    grid-template-columns:1fr;
    gap:15px;
    padding:19px 18px 10px;
  }
  .profile-contribution__field--wide{grid-column:auto}
  .profile-contribution__field input,
  .profile-contribution__field select,
  .profile-contribution__field textarea{font-size:16px}
  .profile-contribution__error{padding-inline:18px}
  .profile-contribution__help{padding:7px 18px 11px}
  .profile-contribution__actions{
    position:sticky;
    bottom:0;
    padding:13px 18px calc(13px + env(safe-area-inset-bottom));
  }
  .profile-contribution__actions button{flex:1;min-width:0}
  body.classic-tree-mode .profile-contribution__panel{border:0}
}

@media(prefers-reduced-motion:reduce){
  .profile-add-action,
  .profile-empty-action,
  .profile-contribution-toast{transition:none}
}