/* Crew portal — builds on styles.css tokens (fonts, colors, glass nav, buttons). */
[hidden] { display:none !important; }

body.crew { background:var(--bg-2); min-height:100svh; }
.crew-main { max-width:1040px; margin:0 auto; padding:112px var(--gutter) 80px; }
.crew-panel h1 { font-size:clamp(2rem,4vw,2.8rem); letter-spacing:-0.03em; margin:8px 0 10px; }
.crew-panel .eyebrow { display:block; }
.crew-panel .muted { font-size:17px; }
.crew-loading { text-align:center; color:var(--ink-3); padding:20vh 0; }

/* 1 · sign in */
#step-login { display:grid; place-items:center; min-height:62svh; }
.glass-card { width:min(420px,100%); padding:36px 32px; border-radius:24px;
  background:var(--bg); border:1px solid var(--line); box-shadow:0 20px 60px rgba(0,0,0,0.08); }
.field { display:flex; flex-direction:column; gap:8px; margin:24px 0 18px;
  font-size:14px; font-weight:500; color:var(--ink-2); }
.field input, .edit-form textarea {
  font:inherit; font-size:16px; color:var(--ink); background:var(--bg);
  border:1px solid var(--line-2); border-radius:12px; padding:12px 14px; outline:none;
  transition:border-color .2s, box-shadow .2s; }
.field input:focus, .edit-form textarea:focus {
  border-color:var(--red); box-shadow:0 0 0 4px color-mix(in srgb, var(--red) 15%, transparent); }
#login-btn { width:100%; justify-content:center; }
.err { color:var(--red-ink); font-size:14px; min-height:20px; margin-top:12px; }

/* 2 · pick yourself */
.pick-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:16px; margin-top:28px; }
.pick { all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-direction:column; gap:10px;
  padding:10px; border-radius:16px; background:var(--bg); border:1px solid var(--line);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.pick:hover { transform:translateY(-3px); box-shadow:0 12px 30px rgba(0,0,0,0.08); }
.pick:focus-visible { outline:2px solid var(--red); outline-offset:3px; }
.pick .ph { aspect-ratio:4/5; border-radius:10px; overflow:hidden; background:var(--bg-2);
  display:grid; place-items:center; font-weight:600; font-size:1.6rem; color:var(--ink-3); }
.pick .ph img { width:100%; height:100%; object-fit:cover; display:block; }
.pick .pn { font-weight:600; font-size:14px; letter-spacing:-0.01em; padding:0 2px 4px; color:var(--ink); }

/* 3 · edit */
.edit-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.link-btn { all:unset; cursor:pointer; color:var(--red-ink); font-size:14px; font-weight:500; }
.link-btn:hover { text-decoration:underline; }
.link-btn:focus-visible { outline:2px solid var(--red); outline-offset:3px; border-radius:4px; }
.edit-grid { display:grid; grid-template-columns:300px 1fr; gap:clamp(28px,4vw,56px); margin-top:28px; align-items:start; }
.preview { position:sticky; top:96px; }
.preview .member .bio { max-height:none; opacity:1; }   /* always show the bio while editing */
#pv-frame { position:relative; cursor:grab; touch-action:none; }
#pv-frame.dragging { cursor:grabbing; }
#pv-frame.empty { cursor:default; }
#pv-canvas { width:100%; height:100%; display:block; }
#pv-initials { position:absolute; inset:0; display:grid; place-items:center;
  font-weight:600; font-size:2.4rem; color:var(--ink-3); pointer-events:none; }
.edit-form { background:var(--bg); border:1px solid var(--line); border-radius:24px;
  padding:clamp(22px,3vw,34px); display:flex; flex-direction:column; gap:26px; }
.edit-form fieldset { border:0; display:flex; flex-direction:column; gap:12px; min-width:0; }
.edit-form legend { font-weight:600; font-size:15px; margin-bottom:12px; padding:0; }
.hint-inline { font-weight:400; color:var(--ink-3); font-size:13px; margin-left:6px; }
.hint, .tiny { font-size:13px; color:var(--ink-3); }
.center { text-align:center; margin-top:12px; }
.photo-row { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.file-btn { cursor:pointer; }
.zoom { display:flex; align-items:center; gap:12px; font-size:14px; color:var(--ink-2); }
.zoom input { flex:1; accent-color:var(--red); }
.role-chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { all:unset; box-sizing:border-box; display:inline-flex; cursor:pointer; font-size:14px; font-weight:500;
  padding:8px 16px; border-radius:999px; border:1px solid var(--line-2); color:var(--ink-2);
  background:var(--bg); transition:background .2s, border-color .2s, color .2s; }
.chip:hover { border-color:var(--ink-3); color:var(--ink); }
.chip[aria-pressed="true"] { background:var(--red); border-color:var(--red); color:#fff; }
.chip:disabled { opacity:.4; cursor:not-allowed; }
.chip:focus-visible { outline:2px solid var(--red); outline-offset:2px; }
.edit-form textarea { resize:vertical; min-height:110px; line-height:1.5; }
.count { font-size:12px; color:var(--ink-3); text-align:right; }
.save-row { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.status { font-size:14px; color:var(--ink-2); }
.status.ok { color:#1f8a3b; }
.status.bad { color:var(--red-ink); }
.status a { color:inherit; text-decoration:underline; }

@media (max-width:760px) {
  .edit-grid { grid-template-columns:1fr; }
  .preview { position:static; max-width:260px; margin:0 auto; }
}
/* the main site hides nav links on phones; here Sign out must stay reachable */
@media (max-width:640px) {
  .crew-bar .right { display:flex !important; }
  .crew-bar .right a[href="/#team"] { display:none; }
}