/* Shared neumorphic surfaces for the public cards and editing workspace. */
:root{
  --paper:#e5e5e5;--ink:#333333;--muted:#555555;--line:#bebebe;
  --forest:#30343a;--lime:#eceef1;--white:#eceef1;
  --neu-surface:#e5e5e5;--neu-shadow:#bebebe;--neu-light:#ffffff;
  --neu-raised:7px 7px 16px #cbd0d8,-7px -7px 16px #ffffff;
  --neu-inset:inset 4px 4px 9px #cbd0d8,inset -4px -4px 9px #ffffff;
}
body,body:has(.public-profile){background:var(--neu-surface);color:var(--ink)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline-color:#626974}
.site-header{padding-top:32px;padding-bottom:32px}
.site-header{justify-content:flex-end}
.brand-mark,body:has(.public-profile) .brand-mark{
  background:var(--neu-surface);color:#363b43;box-shadow:4px 4px 9px var(--neu-shadow),-4px -4px 9px var(--neu-light);border:0;
}
.brand-mark span,body:has(.public-profile) .brand-mark span{color:#363b43}
.nav-login{background:var(--neu-surface);border:1px solid #ffffff80;box-shadow:4px 4px 9px var(--neu-shadow),-4px -4px 9px var(--neu-light)}
.preview-banner,body:has(.public-profile) .preview-banner{background:#e4e7eb;color:#4c525c;box-shadow:inset 0 -1px 2px #cbd0d880}
.site-footer,body:has(.public-profile) .site-footer{color:var(--muted);border:0;box-shadow:0 -1px 0 #d2d7df,0 -2px 0 #ffffffb0}
.hero-visual{background:var(--neu-surface);border-radius:36px;box-shadow:var(--neu-inset)}
.hero-visual:before{display:none}
.floating-tag{background:var(--neu-surface);border:0;box-shadow:var(--neu-raised)}
.profile-card,.public-profile .profile-card{
  background:var(--neu-surface);border:1px solid #ffffff85;border-radius:30px;
  box-shadow:14px 14px 30px #cbd0d8,-14px -14px 30px #ffffff;
}
.profile-card .card-cover{
  height:102px;margin:18px 18px 0;padding:0;border-radius:20px;
  background:var(--neu-surface);box-shadow:inset 5px 5px 12px #cdd2da,inset -5px -5px 12px #ffffff;
}
.profile-card .card-body{padding-top:0;padding-bottom:28px}
.profile-card .avatar{
  width:96px;height:96px;margin-top:-50px;margin-bottom:24px;
  background:var(--neu-surface);color:#30353d;border:7px solid var(--neu-surface);
  box-shadow:7px 7px 13px #c7cdd6,inset 3px 3px 7px #cbd0d8,inset -3px -3px 7px #ffffff;
}
.profile-card .profile-name{color:#252931}
.profile-card .profile-headline,.profile-card .location,.profile-card .profile-bio{color:#555d68}
.profile-card .profile-bio{margin-top:22px;margin-bottom:26px}
.button,.button.secondary,body:has(.public-profile) .button,
.profile-card .phone-button{
  background:var(--neu-surface);border:1px solid #ffffff80;color:#30353d;
  border-radius:14px;box-shadow:var(--neu-raised);
  transition:box-shadow .18s ease,background .18s ease,transform .18s ease;
}
.button:hover:not(:disabled),.profile-card .phone-button:hover{
  transform:translateY(-1px);box-shadow:9px 9px 18px #cbd0d8,-9px -9px 18px #ffffff;
}
.button:active:not(:disabled),.profile-card .phone-button:active{
  transform:translateY(0);box-shadow:var(--neu-inset);
}
.profile-card .card-save,body:has(.public-profile) .profile-card .card-save{
  color:#fff;background:linear-gradient(145deg,#3c4149,#272b32);border:1px solid #454b55;
  box-shadow:6px 6px 13px #c0c6cf,-5px -5px 12px #ffffff,inset 1px 1px 1px #ffffff26;
  min-height:46px;margin-top:16px;margin-bottom:9px;border-radius:14px;
}
.profile-card .card-save:hover{background:linear-gradient(145deg,#454b55,#30353d)}
.profile-card .card-save:active{box-shadow:inset 3px 3px 7px #191d23,inset -2px -2px 6px #505761}
.contact-list{margin-top:16px}
.profile-card .contact-list>.phone-button{margin-bottom:18px}
.contact-pairs,.contact-pair{gap:16px}
.profile-card .website-button,.profile-card .email-button{height:46px;min-height:46px;font-weight:500}
.profile-card .card-foot{border:0;box-shadow:inset 0 1px 1px #d0d5dd,0 -1px 0 #ffffffb0;color:#606772;padding:17px 12px}
.auth-panel,.editor-form,.tool-section,dialog{
  background:var(--neu-surface);border:1px solid #ffffff80;border-radius:23px;box-shadow:var(--neu-raised);
}
.member-button.selected{background:var(--neu-surface);border:1px solid transparent;box-shadow:var(--neu-inset)}
.member-initial{background:var(--neu-surface);color:var(--ink);box-shadow:3px 3px 6px #cbd0d8,-3px -3px 6px #ffffff}
.field input,.field textarea,.share-url{
  background:var(--neu-surface);border:1px solid #ffffff60;border-radius:12px;box-shadow:var(--neu-inset);color:var(--ink);
}
.field input::placeholder,.field textarea::placeholder{color:#6d7580}
.status-pill,.status-pill.is-public{background:var(--neu-surface);color:#505862;box-shadow:inset 2px 2px 5px #cbd0d8,inset -2px -2px 5px #ffffff}
.eyebrow,.feature-number,.form-status,.dot{color:#606772}
.dot{background:#606772}
.hero-title,.auth-intro h1,.page-heading h1{color:var(--ink)}
.form-status.error,.danger{color:#8e3232}
.private-preview{background:var(--neu-surface);color:#505862;box-shadow:var(--neu-inset)}
.toast{background:#30353d;color:#fff}
.auth-layout{align-items:center;gap:64px;padding-top:62px;padding-bottom:62px}
.auth-intro{padding-top:0}
.auth-intro h1{font-family:Georgia,'Times New Roman',serif;letter-spacing:-.045em}
.auth-panel{border-radius:30px;padding:32px;box-shadow:12px 12px 26px #cbd0d8,-12px -12px 26px #ffffff}
.auth-panel h2{font-family:Georgia,'Times New Roman',serif;font-size:29px;font-weight:400;letter-spacing:-.035em;margin-bottom:22px}
.auth-panel .field input{min-height:48px;padding:14px;border-radius:14px}
.auth-panel .button{min-height:48px}
.auth-panel .button:not(.secondary){
  color:#fff;background:linear-gradient(145deg,#3c4149,#272b32);border:1px solid #454b55;
  box-shadow:6px 6px 13px #c0c6cf,-5px -5px 12px #ffffff,inset 1px 1px 1px #ffffff26;
}
.auth-panel .button:not(.secondary):active{box-shadow:inset 3px 3px 7px #191d23,inset -2px -2px 6px #505761}
.auth-panel .demo-buttons{gap:18px;margin-top:28px;margin-bottom:22px}
.auth-panel .muted{font-size:12px;line-height:1.8}
.auth-panel .text-link,.auth-panel .text-button{color:#505862}
@media(max-width:760px){
  .auth-layout{padding:30px 0 36px;gap:32px}
  .auth-panel{padding:26px 22px;min-width:0;box-shadow:8px 8px 19px #cbd0d8,-8px -8px 19px #ffffff}
  .auth-panel h2{font-size:27px}
  .auth-panel .button{white-space:normal}
}
@media(max-width:760px){
  .public-profile{padding:32px 0}
  .profile-card,.public-profile .profile-card{box-shadow:8px 8px 19px #cbd0d8,-8px -8px 19px #ffffff}
}
@media(prefers-reduced-motion:reduce){.button,.profile-card .phone-button{transition:none}}
.email-glyph{display:none;position:relative;width:19px;height:14px;border:1.5px solid currentColor;border-radius:3px;flex-shrink:0}
.email-glyph:before{content:'';position:absolute;width:10px;height:10px;left:3px;top:-4px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
@container contact-card (max-width:440px){
  .contact-pair{grid-template-columns:minmax(0,1fr) 46px;gap:12px;align-items:center}
  .profile-card .website-button{width:100%;min-width:0;height:46px;min-height:46px;padding:10px;font-size:11px}
  .profile-card .email-button{width:46px;height:46px;min-height:46px;padding:0;justify-self:end;justify-content:center}
  .email-button .email-label{display:none}
  .email-button .email-glyph{display:block}
}

.photo-crop{display:block;width:100%;max-width:320px;height:auto;aspect-ratio:1;border-radius:16px;margin:18px 0}
.tool-section input[type=range]{width:100%;min-height:44px;accent-color:#606772}

/* Full surface palettes: raised and recessed elements share their canvas colour. */
.theme-mono,body:has(.public-profile .theme-mono){--neu-surface:#e5e5e5;--neu-shadow:#bebebe;--neu-light:#ffffff;--ink:#333333;--muted:#555555;--accent:#333333;--focus:#333333}
.theme-ocean,body:has(.public-profile .theme-ocean){--neu-surface:#e0f2fe;--neu-shadow:#bae6fd;--neu-light:#f0f9ff;--ink:#183b56;--muted:#36566d;--accent:#0284c7;--focus:#0284c7}
.theme-clay,body:has(.public-profile .theme-clay){--neu-surface:#f4efe6;--neu-shadow:#d6cec0;--neu-light:#ffffff;--ink:#4a443d;--muted:#625a50;--accent:#c29b61;--focus:#806039}
.theme-slate,body:has(.public-profile .theme-slate){--neu-surface:#1f2937;--neu-shadow:#111827;--neu-light:#374151;--ink:#f1f5f9;--muted:#cbd5e1;--accent:#818cf8;--focus:#a5b4fc}
.profile-card,.public-profile .profile-card{
 background:var(--neu-surface);color:var(--ink);border:0;
 box-shadow:10px 10px 22px var(--neu-shadow),-10px -10px 22px var(--neu-light);
}
.profile-card .card-cover{
 background:var(--neu-surface);box-shadow:inset 5px 5px 12px var(--neu-shadow),inset -5px -5px 12px var(--neu-light);
}
.profile-card .avatar{
 background:var(--neu-surface);border-color:var(--neu-surface);color:var(--ink);
 box-shadow:7px 7px 13px var(--neu-shadow),inset 3px 3px 7px var(--neu-shadow),inset -3px -3px 7px var(--neu-light);
}
.profile-card .profile-name{color:var(--ink)}
.profile-card .profile-headline,.profile-card .profile-bio,.profile-card .location,.profile-card .contact-value{color:var(--muted)}
.profile-card .button,.profile-card .phone-button,
body:has(.public-profile) .profile-card .card-save{
 background:var(--neu-surface);border:1px solid transparent;color:var(--ink);
 box-shadow:6px 6px 13px var(--neu-shadow),-6px -6px 13px var(--neu-light);
}
.profile-card .card-save,body:has(.public-profile) .profile-card .card-save{color:var(--ink);font-weight:700}
.profile-card .button:hover,.profile-card .phone-button:hover{background:var(--neu-surface);filter:none;box-shadow:8px 8px 16px var(--neu-shadow),-8px -8px 16px var(--neu-light)}
.profile-card .button:active,.profile-card .phone-button:active{box-shadow:inset 4px 4px 9px var(--neu-shadow),inset -4px -4px 9px var(--neu-light)}
.profile-card a:focus-visible,.profile-card button:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.profile-card .card-foot{color:var(--muted);box-shadow:inset 0 1px 1px var(--neu-shadow),0 -1px 0 var(--neu-light)}
.color-option{font-size:11px;gap:8px;padding:8px 4px}
.color-option .swatch{background:var(--neu-surface);border-color:var(--neu-light);box-shadow:3px 3px 6px var(--neu-shadow),-3px -3px 6px var(--neu-light)}
.color-option input:checked+.swatch{outline:2px solid #555;outline-offset:3px}
body:has(.public-profile) .nav-login{color:var(--ink);background:var(--neu-surface);border-color:transparent}
body:has(.public-profile) .site-footer{box-shadow:0 -1px 0 var(--neu-shadow),0 -2px 0 var(--neu-light)}

.language-switch{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin:18px 22px 0;color:var(--muted)}
.language-choice{border:0;border-radius:10px;min-width:44px;min-height:44px;background:var(--neu-surface);color:var(--ink);font-size:12px}
.language-choice[aria-pressed="true"]{font-weight:700;box-shadow:inset 3px 3px 7px var(--neu-shadow),inset -3px -3px 7px var(--neu-light)}
.language-choice:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.translation-fields{margin-bottom:24px}.translation-fields summary{cursor:pointer;font-weight:700;font-size:12px;margin-bottom:16px}.translation-fields p{margin-bottom:16px}

.interface-language{margin:0;gap:4px}.interface-language .language-choice{min-width:38px}.site-header nav{flex-wrap:wrap;justify-content:flex-end}.interface-language .language-choice[aria-pressed="true"]{outline:1px solid var(--muted)}

.install-icon{display:block;border-radius:23px;margin:10px 0 26px;box-shadow:var(--neu-raised)}.install-steps{padding-left:24px;margin-bottom:28px}.install-steps li{padding:8px 0;line-height:1.7}
@media(display-mode:standalone){.site-header{padding-top:max(20px,env(safe-area-inset-top))}.site-footer{padding-bottom:max(28px,env(safe-area-inset-bottom))}.site-header a[href="/install"]{display:none}}

/* Email addresses without a paired website have the full row available. */
.profile-card .standalone-email{width:100%;max-width:100%;min-width:0;height:auto;min-height:46px;padding:12px 14px;gap:12px;justify-content:flex-start;justify-self:stretch;text-align:left;white-space:normal}
.profile-card .standalone-email .email-glyph{display:block}
.profile-card .standalone-email .email-label{display:block;min-width:0;overflow-wrap:anywhere;line-height:1.5}
.reset-destination{overflow-wrap:anywhere;font-size:12px;line-height:1.6}