/* Portfolio Home — the My Profile / Feed tabs, the topbar identity button, and
 * the quiet "browsing mode" the rail drops into while the feed is on screen.
 *
 * Everything else on these pages is styled by follow_feed.css / the portfolio
 * editor itself; this file only owns the new shell furniture.
 */

/* ---- the two tabs at the top of Public Portfolio ------------------------ */
.pp-tabs{
  display:flex;align-items:center;gap:4px;flex-wrap:wrap;
  width:max-content;max-width:100%;margin:0 0 14px;padding:4px;
  background:var(--surface-2,#f1f5f9);border:1px solid var(--border,#e2e8f0);
  border-radius:999px;
}
.pp-tab{
  border:0;background:transparent;color:var(--text-2,#475569);
  font:inherit;font-size:13px;font-weight:800;cursor:pointer;
  border-radius:999px;padding:9px 22px;white-space:nowrap;
  transition:background .15s,color .15s,box-shadow .15s;
}
.pp-tab:hover{color:var(--text,#0f172a)}
.pp-tab.active{
  background:var(--card,#fff);color:var(--brand-700,#4338ca);
  box-shadow:0 1px 3px rgba(15,23,42,.12);
}
.pp-tab:focus-visible{outline:2px solid var(--brand-300,#a5b4fc);outline-offset:2px}

/* The frame loses the tab row's height when it is on screen. */
#publicPortfolioView #publicPortfolioFrame{
  height:calc(100vh - 214px);
}
@media (max-width:640px){
  .pp-tabs{width:100%}
  .pp-tab{flex:1 1 auto}
  #publicPortfolioView #publicPortfolioFrame{height:calc(100vh - 250px)}
}

/* ---- phone: one compact segmented control, one full-height screen ----------
   The tabs used to sit in a tall pill with a lot of air around them. On a phone
   they become a small segmented control that hugs the topbar, and the editor
   frame fills everything down to the fixed bottom nav — no half-empty band
   between the content and the bar. `body.portfolio-profile` is set by
   portfolio_home.js for the My Profile tab only; the Feed wall keeps the shell's
   normal bottom padding so its last row can scroll clear of the bar. */
@media (max-width:600px){
  #publicPortfolioView{margin-top:-8px}
  .pp-tabs{
    width:100%;margin:0 0 8px;padding:3px;gap:2px;border-radius:12px;
  }
  .pp-tab{padding:8px 10px;font-size:12.5px;border-radius:9px;flex:1 1 0}

  body.portfolio-profile .app-content{padding:10px 10px 0}
  #publicPortfolioView #publicPortfolioFrame{
    height:calc(100vh - 178px - env(safe-area-inset-bottom, 0px));
    height:calc(100dvh - 178px - env(safe-area-inset-bottom, 0px));
    border-radius:12px;
  }
}

/* ---- topbar identity --------------------------------------------------- */
.tb-avatar{
  width:34px;height:34px;flex:none;padding:0;cursor:pointer;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(15,23,42,.12);border-radius:999px;
  background:linear-gradient(135deg,var(--brand-500,#6366f1),var(--brand-700,#4338ca));
  color:#fff;font:inherit;font-size:13px;font-weight:800;
  transition:filter .15s,transform .15s;
}
.tb-avatar:hover{filter:brightness(1.06);transform:translateY(-1px)}
/* The photo and the initial never show together; syncProfileUi toggles them.
   `!important` because .tb-avatar img is more specific than Tailwind's .hidden. */
.tb-avatar img.hidden{display:none !important}
.tb-avatar-ini.hidden{display:none !important}
.tb-avatar img{width:100%;height:100%;object-fit:cover;display:block}
/* The global `.hidden` utility must win over the button's own display rule. */
.tb-avatar.hidden{display:none !important}
.tb-avatar-ini{line-height:1}

/* ---- browsing mode ------------------------------------------------------ */
/* On the Feed tab the rail is still there for navigation, but it stops
   competing with the wall. It returns to full strength on hover/focus, so no
   route becomes unreachable. */
body.social-mode #sidebar{
  opacity:.55;
  transition:opacity .2s ease;
}
body.social-mode #sidebar:hover,
body.social-mode #sidebar:focus-within{opacity:1}
@media (max-width:900px){
  /* The mobile rail is a drawer: dimming it would just look broken. */
  body.social-mode #sidebar{opacity:1}
}

/* ---- the editor frame's skeleton ----------------------------------------
   `/my-portfolio?embed=1` is a second document: until it loads, the pane was
   simply white. The skeleton below mirrors what the frame will show (avatar +
   name, one action bar, a picture grid), stays put while the frame loads, then
   hands over to it with a cross-fade. */
.pp-pane{position:relative;min-height:560px}
#ppProfileSkeleton{
  position:absolute;inset:0;z-index:1;padding:4px;overflow:hidden;
  background:var(--bg,#f8fafc);border-radius:14px;
  transition:opacity .35s ease;
}
.pp-pane.is-ready #ppProfileSkeleton{opacity:0;pointer-events:none}
.pp-pane #publicPortfolioFrame{
  position:relative;z-index:2;opacity:0;transition:opacity .4s ease;
}
.pp-pane.is-ready #publicPortfolioFrame{opacity:1}

.pp-skel-head{display:flex;align-items:center;gap:14px;padding:18px 8px 14px}
.pp-skel-avatar{
  width:64px;height:64px;border-radius:50%;flex:none;background:#e4eaf1;
  animation:pp-pulse 1.5s ease-in-out infinite;
}
.pp-skel-lines{flex:1 1 auto;min-width:0;max-width:280px;
  display:flex;flex-direction:column;gap:9px}
.pp-skel-lines i{
  display:block;height:11px;border-radius:999px;background:#e4eaf1;
  animation:pp-pulse 1.5s ease-in-out infinite;
}
.pp-skel-lines i:last-child{width:70%}
.pp-skel-cta{
  display:block;height:42px;margin:0 8px 16px;border-radius:11px;
  background:#e4eaf1;animation:pp-pulse 1.5s ease-in-out infinite;
}
.pp-skel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;padding:0 8px}
.pp-skel-tile{
  display:block;height:150px;border-radius:12px;background:#e4eaf1;
  animation:pp-pulse 1.5s ease-in-out infinite;
}
.pp-skel-tile.tall{height:210px}
.pp-skel-tile.wide{grid-column:span 2;height:130px}
@keyframes pp-pulse{0%,100%{opacity:1}50%{opacity:.5}}
@media (prefers-reduced-motion: reduce){
  .pp-skel-avatar,.pp-skel-lines i,.pp-skel-cta,.pp-skel-tile{animation:none}
  #ppProfileSkeleton,.pp-pane #publicPortfolioFrame{transition:none}
}