/* Project profiles (project-profile.mjs): a launch's mark (its published logo, or the monogram on its tone) and the
 * creator's profile editor. Extends the site tokens (style.css :root) and the v1 surfaces (direct-launch.css); no
 * motion beyond colour changes.
 *
 * Every editor rule is scoped under .profile-editor (at least one class more than an element rule of the host page,
 * such as project.css `.project-page p` or `.project-page button`), so the host's element styles never win over the
 * editor's colours, borders or line heights. apps/web/test/project-profile.test.mjs checks the specificity. */

.project-mark{--project-mark-size:48px;display:grid;place-items:center;flex:none;width:var(--project-mark-size);height:var(--project-mark-size);border-radius:calc(var(--project-mark-size) / 4);overflow:hidden;font-family:Unbounded,sans-serif;font-weight:700;font-size:calc(var(--project-mark-size) / 3);letter-spacing:-.02em;line-height:1;color:#0c201c}
.project-mark.has-logo{background:#0d1a18;box-shadow:inset 0 0 0 1px rgba(151,252,224,.12)}
.project-mark.has-logo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.project-mark.tone-0{background:linear-gradient(145deg,#b1ffe9,#97e7d3)}.project-mark.tone-1{background:linear-gradient(145deg,#b9dbf5,#71a6cf)}.project-mark.tone-2{background:linear-gradient(145deg,#cfe3ff,#8fb1ea)}.project-mark.tone-3{background:linear-gradient(145deg,#ffe0a8,#e9b35f)}.project-mark.tone-4{background:linear-gradient(145deg,#e7d2ff,#b594ea)}

.profile-editor{padding:20px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(160deg,#161f1d,#101615);min-width:0;color:var(--fg)}
.profile-editor .profile-editor-title{font-family:Unbounded,sans-serif;font-size:18px;line-height:1.3;letter-spacing:-.03em;margin:0;color:var(--fg)}
.profile-editor .profile-editor-lead{color:var(--muted);font-size:13px;line-height:1.55;margin:8px 0 0}
.profile-editor .profile-editor-state{font-size:12px;font-weight:700;line-height:1.5;color:#c6e7df;margin:12px 0 0}
.profile-editor .profile-editor-state:empty{display:none}
.profile-editor[data-state=unavailable] .profile-editor-state{color:#f1a7a4}
.profile-editor .profile-editor-form{margin-top:18px}
.profile-editor .profile-editor-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0;padding:0;border:0;min-width:0}
.profile-editor .profile-editor-fields[disabled]{opacity:.7}
.profile-editor .visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.profile-editor .profile-logo{grid-column:1/-1;display:flex;gap:18px;align-items:center;padding:16px;border:1px solid #3d5955;border-radius:12px;background:linear-gradient(120deg,#20363366,#132321)}
.profile-editor .profile-logo-preview{width:88px;height:88px;flex:none;display:grid;place-items:center;border:1px dashed #6a8881;border-radius:22px;background:#0d1a18;overflow:hidden}
.profile-editor .profile-logo-preview.has-image{border-style:solid;border-color:#3d5955}
.profile-editor .profile-logo-preview img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.profile-editor .profile-logo-preview svg{width:32px;height:32px;fill:none;stroke:#b8e9dc;stroke-width:1.5}
.profile-editor .profile-logo-content{min-width:0;flex:1}
.profile-editor .profile-logo-title{font-size:15px;margin:0;color:var(--fg)}
.profile-editor .profile-help,.profile-editor .profile-field small{display:block;font-size:11px;line-height:1.55;color:#abc1be;margin:6px 0 0}
.profile-editor .profile-logo-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px}
.profile-editor .profile-logo-picker{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:10px 15px;border-radius:7px;background:#bff3e6;color:#152a27;font-size:12px;font-weight:750;overflow:hidden;cursor:pointer}
.profile-editor .profile-logo-picker input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.profile-editor .profile-logo-picker:hover{background:#cef9ed}
.profile-editor .profile-logo-picker:focus-within{outline:2px solid #defff7;outline-offset:3px}
.profile-editor .profile-logo-remove{min-height:44px;padding:10px 12px;border:0;border-radius:7px;background:transparent;color:#c4d6d2;font-size:12px;font-weight:700}
.profile-editor .profile-logo-remove:hover{color:var(--fg);background:#1b2c29}
.profile-editor .profile-editor-fields[disabled] .profile-logo-picker{cursor:default;background:#3b514d;color:#bfcbc9}

.profile-editor .profile-field{display:grid;gap:8px;align-content:start;min-width:0;font-size:12px;color:#c1d8d3}
.profile-editor .profile-field.is-full{grid-column:1/-1}
.profile-editor .profile-field label{font-weight:750}
.profile-editor .profile-field input,.profile-editor .profile-field textarea{width:100%;min-width:0;border:1px solid #415753;border-radius:6px;padding:12px 13px;background:#0e1b19;color:#e8f4f1;font:16px Manrope,sans-serif;caret-color:#b0f8e4}
.profile-editor .profile-field textarea{resize:vertical;min-height:112px;line-height:1.5}
.profile-editor .profile-field input::placeholder,.profile-editor .profile-field textarea::placeholder{color:#8ea39e}
.profile-editor .profile-field input:focus-visible,.profile-editor .profile-field textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.profile-editor .profile-field [aria-invalid=true]{border-color:#e5a292}
.profile-editor .profile-field small{margin:0}
.profile-editor .profile-field small.is-over{color:#f1a7a4}
.profile-editor .profile-field-error{margin:0;font-size:12px;line-height:1.45;color:#f1a7a4}
.profile-editor .profile-field-error:empty{display:none}

.profile-editor .profile-editor-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:20px}
.profile-editor .profile-publish:focus-visible,.profile-editor .profile-connect:focus-visible,.profile-editor .profile-switch:focus-visible,.profile-editor .profile-retry:focus-visible,.profile-editor .profile-logo-remove:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.profile-editor .profile-publish{min-height:48px;padding:0 22px;border:0;border-radius:7px;background:#baf1e2;color:#17302b;font-weight:800;font-size:14px;cursor:pointer}
.profile-editor .profile-publish:hover:not(:disabled){background:#c8f7eb}
.profile-editor .profile-publish:disabled{background:#3b514d;color:#bfcbc9;cursor:default}
.profile-editor .profile-publish[aria-busy=true]{cursor:progress}
.profile-editor .profile-connect,.profile-editor .profile-switch,.profile-editor .profile-retry{min-height:44px;padding:0 18px;border:1px solid #42615a;border-radius:8px;background:#132522;color:var(--fg);font-weight:750;font-size:13px;cursor:pointer}
.profile-editor .profile-connect:hover,.profile-editor .profile-switch:hover,.profile-editor .profile-retry:hover{background:#1f3532}
.profile-editor .profile-editor-note{color:var(--muted);font-size:12px;line-height:1.5;margin:10px 0 0}
.profile-editor .profile-editor-message{font-size:13px;line-height:1.5;margin:10px 0 0;color:#c6e7df}
.profile-editor .profile-editor-message:empty{display:none}
.profile-editor .profile-editor-message[data-tone=good]{color:#97fce4}
.profile-editor .profile-editor-message[data-tone=bad]{color:#f1a7a4}

@media (max-width:600px){
 .profile-editor{padding:16px}
 .profile-editor .profile-editor-fields{grid-template-columns:minmax(0,1fr)}
 .profile-editor .profile-logo{align-items:flex-start;gap:14px;padding:14px}
 .profile-editor .profile-logo-preview{width:64px;height:64px;border-radius:16px}
 .profile-editor .profile-publish{width:100%}
}
@media (prefers-reduced-motion:reduce){
 .profile-editor *{transition:none!important}
}