/* Daniel Cohen — working profile prototype (generic app UI, no platform marks). */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--dc-stone);font-family:var(--dc-body);color:var(--dc-ink);display:grid;place-items:start center;min-height:100vh;padding:0}
.skip{position:fixed;top:-80px;inset-inline-start:14px;z-index:90;background:var(--dc-ink);color:var(--dc-cream);padding:10px 18px;font-size:14px;text-decoration:none}
.skip:focus-visible{top:12px}
img{display:block;max-width:100%}

.phone-shell{width:min(440px,100vw);min-height:100vh;background:var(--dc-cream);display:flex;flex-direction:column}

.app-bar{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-block-end:1px solid var(--dc-line)}
.app-user{font-weight:700;font-size:17px;letter-spacing:.02em}
.app-icons{display:inline-flex;gap:16px}
.app-icons svg{width:22px;height:22px;fill:none;stroke:var(--dc-ink);stroke-width:1.6}

.profile-head{display:flex;gap:18px;align-items:center;padding:18px 16px 6px}
.avatar-ring{flex:none;width:84px;height:84px;border-radius:50%;border:1px solid var(--dc-taupe);display:grid;place-items:center;background:var(--dc-linen)}
.avatar{width:46px;height:auto}
.profile-id h1{font-size:18px;font-weight:700}
.profile-meta{font-size:13.5px;color:var(--dc-taupe);margin-block-start:4px;letter-spacing:.02em}

.profile-bio{padding:10px 16px 0;font-size:14.5px;line-height:1.55}
.profile-bio p{margin:0}

.profile-actions{display:flex;gap:8px;padding:14px 16px}
.profile-actions button{flex:1;min-height:44px;border:1px solid var(--dc-line);background:var(--dc-white);font:inherit;font-size:14px;cursor:pointer}
.btn-follow{background:var(--dc-ink)!important;color:var(--dc-cream);border-color:var(--dc-ink)!important;font-weight:700}

.highlights{display:flex;gap:18px;padding:8px 16px 14px;overflow-x:auto}
.highlights button{appearance:none;background:none;border:0;display:grid;justify-items:center;gap:7px;font:inherit;font-size:12.5px;color:var(--dc-ink);cursor:pointer;min-width:64px;min-height:44px}
.hl{width:62px;height:62px;border-radius:50%;border:1px solid var(--dc-taupe);padding:3px;display:block;overflow:hidden;background:var(--dc-white)}
.hl img{width:100%;height:100%;object-fit:cover;border-radius:50%}

.grid-tabs{display:grid;grid-template-columns:1fr 1fr;border-block:1px solid var(--dc-line)}
.grid-tabs span{display:grid;place-items:center;padding:11px 0;opacity:.35}
.grid-tabs span.on{opacity:1;border-block-end:1.5px solid var(--dc-ink)}
.grid-tabs svg{width:22px;height:22px;fill:none;stroke:var(--dc-ink);stroke-width:1.5}

.feed-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--dc-cream)}
.feed-grid button{appearance:none;border:0;padding:0;background:none;cursor:pointer;aspect-ratio:1;overflow:hidden;position:relative}
.feed-grid img{width:100%;height:100%;object-fit:cover}
.feed-grid .multi{position:absolute;top:8px;right:8px}
.feed-grid .multi svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.8;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.feed-grid button:focus-visible{outline:2px solid var(--dc-ink);outline-offset:-3px}

.tab-bar{margin-block-start:auto;display:flex;justify-content:space-around;align-items:center;padding:13px 8px calc(13px + env(safe-area-inset-bottom,0px));border-block-start:1px solid var(--dc-line)}
.tab-bar svg{width:23px;height:23px;fill:none;stroke:var(--dc-ink);stroke-width:1.5}
.tab-avatar{width:24px;height:24px;border-radius:50%;border:1px solid var(--dc-taupe);display:grid;place-items:center;overflow:hidden;background:var(--dc-linen)}
.tab-avatar img{width:13px}

/* dialogs */
dialog{border:0;padding:0;background:var(--dc-cream);max-width:min(94vw,560px);width:100%;margin:auto}
dialog::backdrop{background:rgba(43,37,35,.82)}
.dlg-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-block-end:1px solid var(--dc-line)}
.dlg-brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:14.5px}
.dlg-brand img{width:20px}
.dialog-close{appearance:none;border:1px solid var(--dc-line);background:var(--dc-white);font:inherit;font-size:13px;padding:8px 14px;cursor:pointer;min-height:44px;min-width:44px}
.dlg-stage{position:relative}
.dlg-stage img{width:100%;height:auto}
.dlg-nav{position:absolute;top:50%;translate:0 -50%;appearance:none;border:0;background:rgba(250,247,242,.92);width:44px;height:44px;display:grid;place-items:center;cursor:pointer}
.dlg-nav.prev{inset-inline-start:10px}
.dlg-nav.next{inset-inline-end:10px}
.dlg-nav svg{width:20px;height:20px;fill:none;stroke:var(--dc-ink);stroke-width:1.8}
.dlg-dots{display:flex;gap:6px;justify-content:center;padding:10px 0 0}
.dlg-dots i{width:6px;height:6px;border-radius:50%;background:var(--dc-stone)}
.dlg-dots i.on{background:var(--dc-ink)}
.dlg-cap{padding:12px 16px 18px;font-size:14.5px;line-height:1.6;color:var(--dc-ink-soft)}
#story-dialog{background:var(--dc-ink);max-width:min(94vw,430px)}
#story-dialog img{width:100%}
.story-close{position:absolute;top:10px;inset-inline-start:10px;z-index:2}
@media (prefers-reduced-motion:no-preference){
  dialog[open]{animation:dlg .25s ease}
  @keyframes dlg{from{opacity:0;translate:0 8px}to{opacity:1}}
}