@import url("https://api.fontshare.com/v2/css?f[]=switzer@300,400,500,600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600&display=swap");

:root { --ink:#111; --muted:#858585; --line:#e9e9e5; --soft:#f6f6f3; --blue:#2f83ef; font-family:"Switzer","Helvetica Neue",Arial,sans-serif; }
* { box-sizing:border-box; }
html,body { min-height:100%; }
body { margin:0; background:#fff; color:var(--ink); font-size:15px; }
button,input,textarea { font:inherit; color:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
.material-symbols-rounded { font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 20; }

.edit-topbar { position:fixed; top:0; right:0; left:0; z-index:20; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:64px; padding:0 clamp(20px,2.4vw,46px); pointer-events:none; }
.edit-topbar > * { pointer-events:auto; }
.back-link { width:max-content; font-family:"Space Grotesk",sans-serif; font-size:20px; font-weight:600; letter-spacing:-.8px; }
.edit-topbar nav { position:absolute; top:13px; right:clamp(20px,2.4vw,46px); display:flex; align-items:center; gap:6px; }
.quiet-button,.save-button { display:inline-flex; height:38px; align-items:center; justify-content:center; padding:0 14px; border:1px solid transparent; border-radius:7px; background:rgba(255,255,255,.78); font-size:14px; line-height:1; font-weight:500; cursor:pointer; backdrop-filter:blur(12px); }
.quiet-button:hover { background:#f5f5f2; }
.save-button { border-color:#111; background:#111; color:#fff; }

.edit-profile-shell { --photo-width:min(41.5vw,calc(77.5vh - 52px)); display:grid; grid-template-columns:var(--photo-width) minmax(420px,1fr); align-items:flex-start; gap:clamp(40px,3.3vw,72px); min-height:100vh; padding:clamp(20px,2.4vw,34px) clamp(20px,2.4vw,46px) 40px; }
.edit-photo-pane { position:sticky; top:clamp(20px,2.4vw,34px); width:var(--photo-width); aspect-ratio:215/270; overflow:hidden; border-radius:7px; }
.edit-photo-stack { display:flex; flex-direction:column; width:100%; height:100%; gap:12px; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scroll-snap-type:y mandatory; scrollbar-width:none; }
.edit-photo-stack::-webkit-scrollbar { display:none; }
.edit-photo-stack.is-animating { scroll-snap-type:none; }
.edit-photo-stack:has(> .portrait-card:last-child.is-landscape)::after { content:""; display:block; flex:0 0 58%; pointer-events:none; }
.portrait-card { position:relative; display:block; width:100%; height:auto; aspect-ratio:215/270; flex:0 0 auto; margin:0; padding:0; overflow:hidden; border:0; border-radius:7px; background:#f3f3f1; cursor:pointer; scroll-snap-align:start; scroll-snap-stop:always; }
.portrait-card.is-landscape { aspect-ratio:var(--gallery-ratio,16/9); }
.portrait-card::after { content:""; position:absolute; inset:0; z-index:3; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(17,17,17,.1); pointer-events:none; }
.portrait-card > img { display:block; width:100%; height:100%; object-fit:cover; filter:none; transform:translate(var(--photo-x,0%),var(--photo-y,0%)) scale(var(--photo-scale,1)); transition:transform 700ms cubic-bezier(.16,1,.3,1); }
.portrait-card.is-landscape > img { object-position:center; }
.portrait-card:hover > img { transform:translate(var(--photo-x,0%),var(--photo-y,0%)) scale(calc(var(--photo-scale,1) + .008)); }
.photo-edit-action { position:absolute; right:18px; bottom:18px; z-index:4; display:flex; height:38px; align-items:center; gap:7px; padding:0 12px; border:0; border-radius:6px; background:rgba(255,255,255,.88); box-shadow:0 8px 26px rgba(0,0,0,.1); font-size:14px; opacity:0; transform:translateY(5px); cursor:pointer; backdrop-filter:blur(14px); transition:opacity 220ms ease,transform 220ms ease; }
.portrait-card:hover .photo-edit-action,.portrait-card:focus-visible .photo-edit-action { opacity:1; transform:none; }
.photo-edit-action .material-symbols-rounded { font-size:18px; }
.gallery-photo-actions { position:absolute; right:18px; bottom:18px; z-index:5; display:flex; align-items:center; gap:6px; opacity:0; transform:translateY(5px); transition:opacity 220ms ease,transform 220ms ease; }
.gallery-photo-card:hover .gallery-photo-actions,.gallery-photo-card:focus-within .gallery-photo-actions { opacity:1; transform:none; }
.gallery-card-action { display:inline-flex; height:36px; align-items:center; justify-content:center; gap:6px; padding:0 10px; border:1px solid rgba(17,17,17,.08); border-radius:6px; background:rgba(255,255,255,.9); color:#111; box-shadow:0 8px 24px rgba(0,0,0,.09); font-size:13px; font-weight:500; cursor:pointer; backdrop-filter:blur(14px); transition:background-color 180ms ease,color 180ms ease,transform 180ms ease; }
.gallery-card-action:hover,.gallery-card-action:focus-visible { background:#fff; transform:translateY(-1px); }
.gallery-card-action .material-symbols-rounded { font-size:18px; line-height:1; }
.gallery-drag-action,.gallery-remove-action { width:36px; padding:0; }
.gallery-drag-action { cursor:grab; }
.gallery-drag-action:active { cursor:grabbing; }
.gallery-remove-action:hover,.gallery-remove-action:focus-visible { color:#d92d20; }
.gallery-photo-card.is-dragging { opacity:.45; transform:scale(.985); }
.gallery-photo-card.is-drop-target { outline:2px solid rgba(11,124,255,.75); outline-offset:-2px; }
.gallery-add-action { position:absolute; top:18px; right:18px; z-index:5; display:inline-flex; height:38px; align-items:center; gap:7px; padding:0 12px; border:1px solid rgba(17,17,17,.08); border-radius:6px; background:rgba(255,255,255,.9); box-shadow:0 8px 26px rgba(0,0,0,.08); font-size:14px; font-weight:500; cursor:pointer; backdrop-filter:blur(14px); }
.gallery-add-action:hover { background:#fff; }
.gallery-add-action .material-symbols-rounded { font-size:18px; }
.gallery-add-action input { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }

.edit-profile-content { position:relative; min-width:0; min-height:calc(100vh - 68px); max-width:1040px; padding:84px 0 34px; }
.profile-head { min-height:174px; }
.name-line { display:flex; align-items:center; gap:9px; }
.inline-field { min-width:0; padding:2px 4px; border:0; border-radius:5px; outline:0; background:transparent; cursor:text; transition:background 160ms ease,box-shadow 160ms ease; }
.inline-field:hover { background:#f4f4f2; }
.inline-field:focus { background:#eee; box-shadow:0 0 0 1px rgba(17,17,17,.08); }
.name-field { width:min(560px,calc(100% - 46px)); margin:-2px 0 0 -4px; font-family:"NeueHaasUnicaW04-Regular","Switzer","Helvetica Neue",Arial,sans-serif; font-size:clamp(38px,2.7vw,52px); line-height:1.12; font-weight:400; letter-spacing:-.65px; }
.verified { display:grid; place-items:center; color:#f6b800; }
.verified .material-symbols-rounded { font-size:27px; font-variation-settings:"FILL" 1,"wght" 500,"GRAD" 0,"opsz" 24; }
.handle-line { display:flex; align-items:center; width:max-content; margin:3px 0 6px; color:#999; font-size:14px; }
.handle-field { width:180px; padding-left:1px; color:#777; }
.identity-line { display:flex; align-items:center; gap:6px; color:#858585; font-size:clamp(14px,.92vw,16px); line-height:30px; white-space:nowrap; }
.company-logo { width:28px; height:28px; flex:0 0 auto; border-radius:4px; object-fit:cover; }
.join-icon { width:18px; height:18px; flex:0 0 auto; opacity:.7; }
.company-field { width:118px; color:#111; font-weight:500; }
.role-field { width:155px; color:#777; }
.location-field { width:105px; color:#777; }

.profile-edit-sections { display:grid; gap:0; border-top:1px solid var(--line); }
.profile-section { min-width:0; padding:24px 0 26px; border-bottom:1px solid var(--line); }
.section-title-row { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:14px; }
.profile-section h2 { margin:0; color:#777; font-size:13px; line-height:1.25; font-weight:500; letter-spacing:.01em; }
.section-action { display:inline-flex; min-height:30px; align-items:center; gap:3px; padding:4px 8px; border:0; border-radius:6px; background:transparent; color:#777; font-size:13px; cursor:pointer; }
.section-action:hover { background:#f1f1ef; color:#111; }
.section-action .material-symbols-rounded { font-size:16px; }

.experience-editor-list { display:grid; gap:2px; }
.experience-card { display:grid; grid-template-columns:116px minmax(0,1fr) 30px; align-items:start; gap:16px; margin:0 -10px; padding:12px 10px; border-radius:8px; transition:background-color 160ms ease; }
.experience-card:hover { background:#f7f7f4; }
.experience-dates { display:grid; grid-template-columns:47px 16px 54px; align-items:center; gap:5px; color:#888; font-size:14px; white-space:nowrap; }
.experience-dates img { width:16px; height:16px; }
.experience-copy { min-width:0; color:#858585; font-size:13px; line-height:1.4; }
.experience-company { display:flex; align-items:center; gap:6px; min-width:0; }
.experience-company strong { color:#111; font-weight:500; }
.experience-company .company-mark { display:grid; width:27px; height:27px; flex:0 0 auto; place-items:center; border-radius:4px; background:#111; color:#fff; font-size:11px; font-weight:600; }
.experience-company .row-join { width:14px; height:14px; opacity:.68; }
.experience-role { display:flex; align-items:center; gap:5px; margin:7px 0 0 33px; color:#111; font-weight:500; }
.experience-role img { width:18px; height:18px; }
.edit-experience { display:grid; width:30px; height:30px; padding:0; place-items:center; border:0; border-radius:5px; background:transparent; color:#777; cursor:pointer; }
.edit-experience:hover { background:#f1f1ef; color:#111; }
.edit-experience .material-symbols-rounded { font-size:18px; }

.skill-total,.story-count { color:#aaa; font-size:11px; }
.skill-total b,.story-count b { font-weight:400; }
.skill-list { display:flex; flex-wrap:wrap; gap:6px; }
.skill-chip { display:inline-flex; align-items:center; min-height:30px; padding:0 5px 0 10px; border:1px solid transparent; border-radius:6px; background:#f5f5f2; font-size:13px; transition:background-color 160ms ease,border-color 160ms ease; }
.skill-chip:hover { border-color:#dfdfda; background:#fff; }
.skill-chip button { display:grid; width:22px; height:22px; padding:0; place-items:center; border:0; border-radius:4px; background:transparent; color:#aaa; cursor:pointer; }
.skill-chip button:hover { background:#eee; color:#111; }
.skill-chip .material-symbols-rounded { font-size:14px; }
.add-skill-form { position:relative; display:inline-flex; align-items:center; gap:6px; margin-top:10px; }
.add-skill-form input { width:142px; height:36px; padding:0 10px; border:1px solid #deded9; border-radius:6px; outline:0; background:#fff; font-size:13px; }
.add-skill-form input:focus { border-color:#2f83ef; box-shadow:0 0 0 2px rgba(47,131,239,.1); }
.add-skill-form button { display:inline-flex; height:36px; min-width:86px; align-items:center; justify-content:center; gap:4px; padding:0 11px; border:0; border-radius:6px; background:#111; color:#fff; font-size:13px; cursor:pointer; }
.add-skill-form .material-symbols-rounded { font-size:17px; }

.story-editor { display:block; width:100%; min-height:122px; padding:14px 16px; border:1px solid transparent; border-radius:9px; outline:0; background:#f7f7f4; resize:none; color:#111; font-size:clamp(23px,1.9vw,34px); line-height:1.12; letter-spacing:-.8px; overflow:hidden; transition:background-color 160ms ease,border-color 160ms ease; }
.story-editor:hover { border-color:#e4e4df; background:#f9f9f7; }
.story-editor:focus { border-color:#d8d8d3; background:#fff; box-shadow:0 0 0 3px rgba(17,17,17,.035); }
.social-summary { display:flex; flex-wrap:wrap; gap:8px 16px; color:#666; font-size:13px; }
.social-summary span { display:inline-flex; align-items:center; gap:4px; }
.social-summary .material-symbols-rounded { font-size:15px; }
.empty-state { color:#aaa; }

.edit-dialog { width:min(680px,calc(100vw - 32px)); max-height:calc(100vh - 32px); padding:0; overflow:hidden; border:0; border-radius:12px; background:#fff; box-shadow:0 32px 110px rgba(0,0,0,.22); }
.experience-dialog { width:min(720px,calc(100vw - 32px)); }
.edit-dialog::backdrop { background:rgba(17,17,17,.27); backdrop-filter:blur(7px); }
.dialog-panel { max-height:calc(100vh - 32px); overflow:auto; border-radius:inherit; }
.dialog-panel > header { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; min-height:78px; padding:0 28px; border-bottom:1px solid var(--line); border-radius:12px 12px 0 0; background:rgba(255,255,255,.95); backdrop-filter:blur(12px); }
.dialog-panel > header h2 { margin:0; font-size:16px; font-weight:500; letter-spacing:-.2px; }
.dialog-close { display:grid; width:38px; height:38px; padding:0; place-items:center; border:0; border-radius:6px; background:transparent; font-size:20px; line-height:1; font-weight:300; cursor:pointer; }
.dialog-close:hover { background:#f1f1ef; }
.experience-form-body { display:grid; gap:42px; min-height:460px; padding:42px 48px; }
.modal-field-group { display:grid; gap:15px; }
.modal-field-group > label { font-size:18px; font-weight:500; }
.inline-form-row { display:flex; align-items:center; gap:10px; }
.inline-form-row > img { width:22px; height:22px; flex:0 0 auto; }
.inline-form-row input,.social-form-body input { height:42px; padding:0 9px; border:0; border-radius:5px; outline:0; background:#eee; color:#111; }
.inline-form-row input:focus,.social-form-body input:focus { background:#e7e7e4; box-shadow:0 0 0 1px rgba(17,17,17,.12); }
.date-form-row input { width:145px; }
.company-form-row input:first-child { width:180px; }
.company-form-row .wide-input { width:min(320px,100%); }
.modal-join-icon { width:24px !important; height:24px !important; }
.role-form-row { padding-left:8px; }
.role-form-row img { width:25px; height:25px; }
.role-form-row input { width:230px; }
.current-check { display:flex; align-items:center; width:max-content; gap:6px; color:#777; font-size:13px !important; font-weight:400 !important; }
.current-check input { accent-color:#111; }
.dialog-panel > footer { position:sticky; bottom:0; z-index:2; display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:20px 28px 24px; border-radius:0 0 12px 12px; background:rgba(255,255,255,.96); backdrop-filter:blur(12px); }
.dialog-panel > footer > span { display:none; }
.cancel-button,.modal-save-button,.delete-button { min-width:96px; height:38px; padding:0 14px; border-radius:6px; font-size:14px; line-height:1; font-weight:500; cursor:pointer; }
.cancel-button { border:1px solid #d8d8d5; background:#fff; }
.modal-save-button { border:1px solid var(--blue); background:var(--blue); color:#fff; }
.delete-button { border:1px solid #f0caca; background:#fff; color:#d92f2f; }
.autocomplete-menu { position:fixed; z-index:2147483647; min-width:150px; padding:4px; overflow:hidden; border:1px solid rgba(17,17,17,.1); border-radius:6px; background:rgba(255,255,255,.98); box-shadow:0 10px 28px rgba(17,17,17,.14); backdrop-filter:blur(14px); }
.autocomplete-menu[hidden] { display:none; }
.autocomplete-menu button { display:block; width:100%; min-height:34px; padding:0 8px; border:0; border-radius:4px; background:transparent; color:#111; text-align:left; font-size:14px; cursor:pointer; }
.autocomplete-menu button.has-logo { display:flex; min-height:42px; align-items:center; gap:9px; padding:5px 8px; }
.autocomplete-company-logo { display:block; width:28px; height:28px; flex:0 0 auto; border:1px solid rgba(17,17,17,.08); border-radius:5px; background:#fff; object-fit:contain; }
.autocomplete-menu button:hover,.autocomplete-menu button.is-active { background:#efefed; }

.social-form-body { display:grid; gap:16px; padding:28px; }
.social-form-body label { display:grid; grid-template-columns:100px 1fr; align-items:center; gap:14px; }
.social-form-body label span { font-size:14px; font-weight:500; }
.photo-dialog { width:100vw; height:100vh; max-width:none; max-height:none; margin:0; padding:0; overflow:hidden; border:0; background:transparent; }
.photo-dialog::backdrop { background:rgba(17,17,17,.22); backdrop-filter:blur(9px); }
.photo-crop-mode { position:fixed; inset:0; }
.photo-crop-stage { position:absolute; top:clamp(20px,2.4vw,34px); left:clamp(20px,2.4vw,46px); width:min(41.5vw,calc(77.5vh - 52px)); aspect-ratio:215/270; overflow:hidden; border:2px dashed rgba(255,255,255,.9); border-radius:7px; background:#eee; box-shadow:0 18px 70px rgba(0,0,0,.14); cursor:grab; touch-action:none; user-select:none; }
.photo-crop-stage.is-dragging { cursor:grabbing; }
.photo-crop-stage img { width:100%; height:100%; object-fit:cover; transform:translate(var(--photo-x,0%),var(--photo-y,0%)) scale(var(--photo-scale,1)); transform-origin:center; pointer-events:none; user-select:none; }
.crop-move-indicator { position:absolute; right:12%; top:53%; display:grid; width:42px; height:42px; place-items:center; border-radius:8px; background:rgba(17,17,17,.68); color:#fff; box-shadow:0 8px 24px rgba(0,0,0,.18); pointer-events:none; backdrop-filter:blur(8px); }
.crop-move-indicator .material-symbols-rounded { font-size:25px; }
.photo-controls { position:absolute; right:clamp(20px,2.4vw,46px); bottom:162px; display:flex; align-items:center; gap:12px; padding:8px; border:1px solid rgba(17,17,17,.08); border-radius:8px; background:rgba(255,255,255,.88); box-shadow:0 12px 36px rgba(0,0,0,.1); backdrop-filter:blur(16px); }
.choose-photo { display:inline-flex; height:38px; align-items:center; gap:6px; padding:0 12px; border:1px solid var(--line); border-radius:6px; background:#fff; font-size:14px; cursor:pointer; }
.choose-photo .material-symbols-rounded { font-size:18px; }
.choose-photo input { display:none; }
.zoom-control { display:flex; align-items:center; gap:8px; }
.zoom-control .material-symbols-rounded { font-size:18px; }
.zoom-control input { width:130px; accent-color:#111; }
.photo-crop-actions { position:absolute; right:clamp(20px,2.4vw,46px); bottom:clamp(20px,2.4vw,34px); display:flex; gap:12px; }
.crop-action { display:flex; width:150px; height:112px; flex-direction:column; align-items:flex-start; justify-content:space-between; padding:18px; border:1px solid rgba(17,17,17,.12); border-radius:6px; background:rgba(255,255,255,.94); color:#111; text-align:left; font-size:14px; font-weight:500; cursor:pointer; box-shadow:0 14px 42px rgba(0,0,0,.1); backdrop-filter:blur(16px); }
.crop-action:hover { background:#fff; transform:translateY(-1px); }
.crop-action .material-symbols-rounded { font-size:21px; }
.crop-save { background:#111; color:#fff; border-color:#111; }
.crop-save:hover { background:#222; }
.toast { position:fixed; left:50%; bottom:24px; z-index:50; padding:10px 14px; border-radius:999px; background:#111; color:#fff; font-size:13px; opacity:0; transform:translate(-50%,10px); pointer-events:none; transition:opacity 180ms ease,transform 180ms ease; }
.toast.is-visible { opacity:1; transform:translate(-50%,0); }

@media (max-width:980px) {
  .edit-profile-shell { grid-template-columns:1fr; gap:30px; }
  .edit-photo-pane { position:relative; top:auto; width:min(100%,620px); justify-self:center; }
  .edit-profile-content { padding-top:24px; }
  .edit-topbar { background:rgba(255,255,255,.86); backdrop-filter:blur(14px); }
  .photo-crop-stage { left:50%; width:min(calc(100vw - 40px),520px); transform:translateX(-50%); }
}
@media (max-width:640px) {
  .edit-topbar { height:64px; padding:0 14px; }
  .quiet-button { display:none; }
  .edit-profile-shell { padding:78px 14px 28px; }
  .edit-photo-pane { width:100%; }
  .name-field { font-size:38px; }
  .identity-line { flex-wrap:wrap; white-space:normal; }
  .profile-head { min-height:170px; }
  .experience-card { grid-template-columns:1fr 30px; gap:8px; }
  .experience-dates { grid-column:1/-1; }
  .experience-form-body { min-height:0; padding:28px 20px; }
  .inline-form-row { flex-wrap:wrap; }
  .dialog-panel > footer { padding:18px 20px 20px; }
  .social-form-body label { grid-template-columns:1fr; gap:6px; }
  .photo-crop-stage { top:20px; width:min(calc(100vw - 28px),420px); max-height:calc(100vh - 220px); }
  .photo-controls { right:14px; bottom:142px; left:14px; justify-content:space-between; }
  .zoom-control input { width:90px; }
  .photo-crop-actions { right:14px; bottom:14px; left:14px; }
  .crop-action { width:50%; height:108px; }
}