vignette/apps/web/src/pages/onboarding.css

.ob-page{
  min-height:100dvh;
  width:100%;
  background:var(--bg-app);
  color:var(--text-body);
  padding:clamp(20px,5vw,56px);
}
.ob-shell{
  width:100%;
  max-width:900px;
  margin:0 auto;
  display:grid;
  gap:var(--sp-6);
}
.ob-head{
  display:grid;
  gap:8px;
}
.ob-head p{
  margin:0;
  color:var(--accent-deep);
  font-size:12px;
  font-weight:800;
}
.ob-head h1{
  margin:0;
  color:var(--text-strong);
  font-size:clamp(28px,4vw,44px);
  line-height:1.18;
  letter-spacing:0;
}
.ob-form{
  min-width:0;
  display:grid;
  gap:var(--sp-6);
}
.ob-section{
  min-width:0;
  display:grid;
  gap:var(--sp-4);
  padding-bottom:var(--sp-5);
  border-bottom:1px solid var(--border-subtle);
}
.ob-section__head h2{
  margin:0;
  color:var(--text-strong);
  font-size:18px;
  line-height:1.35;
  letter-spacing:0;
}
.ob-avatar{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:var(--sp-3);
  align-items:center;
}
.ob-avatar__preview{
  width:72px;
  height:72px;
  border-radius:50%;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:var(--accent-tint);
  color:var(--accent-deep);
  font-size:28px;
  font-weight:800;
  border:1px solid var(--border-subtle);
}
.ob-avatar__preview img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.ob-avatar__body{
  min-width:0;
  display:grid;
  gap:7px;
}
.ob-avatar__body span{
  color:var(--text-strong);
  font-size:13px;
  font-weight:780;
}
.ob-avatar__body p{
  margin:0;
  color:var(--text-muted);
  font-size:12.5px;
  line-height:1.45;
}
.ob-avatar__button{
  position:relative;
  width:max-content;
  min-height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
  background:var(--bg-surface);
  color:var(--text-strong);
  font-size:12px;
  font-weight:760;
  cursor:pointer;
}
.ob-avatar__button input{
  position:absolute;
  inline-size:1px;
  block-size:1px;
  opacity:0;
  pointer-events:none;
}
.ob-field--wide{
  grid-column:1 / -1;
}
.ob-fields{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-3);
}
.ob-form label{
  min-width:0;
  display:grid;
  gap:7px;
}
.ob-form label span{
  color:var(--text-muted);
  font-size:12px;
  font-weight:730;
}
.ob-form input[type="text"],
.ob-form input:not([type]){
  min-width:0;
}
.ob-form input,
.ob-form textarea{
  width:100%;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
  background:var(--bg-surface-2);
  color:var(--text-strong);
  padding:0 12px;
  font:500 var(--fs-sm)/1.2 var(--font-sans);
}
.ob-form input{
  min-height:42px;
}
.ob-form textarea{
  min-height:92px;
  padding:11px 12px;
  resize:vertical;
  line-height:1.45;
}
.ob-form input:focus,
.ob-form textarea:focus{
  outline:2px solid color-mix(in srgb,var(--accent) 24%,transparent);
  border-color:var(--accent);
}
.ob-checks{
  display:grid;
  gap:10px;
  padding:14px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius);
  background:var(--bg-surface-2);
}
.ob-checks label{
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:10px;
}
.ob-checks input{
  width:18px;
  height:18px;
  min-height:18px;
  padding:0;
  accent-color:var(--accent);
}
.ob-legal{
  min-width:0;
  display:grid;
  gap:8px;
}
.ob-legal details{
  min-width:0;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
  background:var(--bg-surface-2);
}
.ob-legal summary{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:42px;
  padding:0 12px;
  cursor:pointer;
}
.ob-legal summary span{
  min-width:0;
  color:var(--text-strong);
  font-size:13px;
  font-weight:760;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ob-legal summary b{
  flex:none;
  color:var(--text-muted);
  font-size:11px;
  font-weight:700;
}
.ob-note,
.ob-error{
  margin:0;
  color:var(--text-muted);
  font-size:12.5px;
  line-height:1.5;
}
.ob-doc-text{
  max-height:260px;
  overflow:auto;
  white-space:pre-wrap;
  color:var(--text-body);
  font-size:12.5px;
  line-height:1.55;
  padding:0 12px 12px;
}
.ob-error{
  color:var(--crit-text);
}
.ob-actions{
  display:flex;
  justify-content:flex-start;
}
@media (max-width:620px){
  .ob-page{
    padding:14px;
  }
  .ob-fields{
    grid-template-columns:1fr;
  }
  .ob-avatar{
    grid-template-columns:1fr;
  }
  .ob-actions .vg-btn{
    width:100%;
  }
}