/* ============================================
   WritingNepal — Profile page styles
   Extends style.css tokens.
   Role + view switching is done with body classes:
     body.role-writer / .role-publisher / .role-blogger
     body.view-owner  / .view-public
   Content is authored once and shown/hidden via CSS,
   driven by the small demo-controls bar at the top
   (a prototype aid, not part of the real product UI).
   ============================================ */

/* ---- demo controls (prototype aid, clearly marked) ---- */
.demo-controls{
  background:#FDECC8;
  border:2px dashed var(--gold-deep);
  border-radius:14px;
  padding:14px 18px;
  margin:20px 0;
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  font-size:.85rem;
}
.demo-controls .label{ font-weight:800; text-transform:uppercase; letter-spacing:.06em; font-size:.72rem; color:var(--ink-soft); }
.demo-switch{ display:flex; gap:6px; flex-wrap:wrap; }
.demo-switch button{
  padding:7px 13px;
  border-radius:999px;
  border:1.5px solid var(--line);
  background:var(--white);
  font-size:.8rem;
  font-weight:700;
  color:var(--ink-soft);
  transition:transform .2s var(--bounce);
}
.demo-switch button:hover{ transform:translateY(-1px); }
.demo-switch button.active{ background:var(--ink); color:var(--gold); border-color:var(--ink); }

/* ---- role/view visibility toggling ---- */
.owner-only{ display:none; }
.public-only{ display:none; }
body.view-owner .owner-only{ display:inline-flex; }
body.view-public .public-only{ display:inline-flex; }
body.view-owner .owner-only.block{ display:block; }
body.view-public .public-only.block{ display:block; }
th.owner-only, td.owner-only{ display:none; }
body.view-owner th.owner-only, body.view-owner td.owner-only{ display:table-cell; }

[data-role-content]{ display:none !important; }
body.role-writer [data-role-content="writer"],
body.role-publisher [data-role-content="publisher"],
body.role-blogger [data-role-content="blogger"]{ display:block !important; }
/* component-specific overrides where 'block' is the wrong display type */
body.role-writer .role-badge[data-role-content="writer"],
body.role-publisher .role-badge[data-role-content="publisher"],
body.role-blogger .role-badge[data-role-content="blogger"]{ display:inline-block !important; }

.logged-out-header{ display:none; }
.logged-in-header{ display:none; }
body.view-public .logged-out-header{ display:flex; }
body.view-owner .logged-in-header{ display:flex; }

/* ---- profile dropdown ---- */
.profile-nav-item{ position:relative; }
/* invisible bridge over the 8px visual gap below — without this, moving
   the mouse from the button down into the dropdown crosses a strip that's
   outside .profile-nav-item's hover box, so :hover drops and the menu
   closes before the cursor ever reaches a link. */
.profile-nav-item::after{
  content:'';
  position:absolute;
  left:0; right:0;
  top:100%;
  height:8px;
}
.profile-dropdown{
  display:none;
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  background:var(--white);
  border:1.5px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow-pop);
  padding:8px;
  min-width:220px;
  z-index:40;
}
.profile-nav-item:hover .profile-dropdown,
.profile-nav-item:focus-within .profile-dropdown{ display:block; }
.profile-dropdown a{
  display:block;
  padding:9px 12px;
  border-radius:8px;
  font-size:.86rem;
  font-weight:600;
  color:var(--ink);
}
.profile-dropdown a:hover{ background:var(--paper-deep); }
.beta-tag{
  background:var(--bronze); color:var(--white); font-size:.6rem; font-weight:800;
  padding:1px 6px; border-radius:999px; margin-left:6px; vertical-align:middle;
}
.profile-dropdown a.dropdown-soon{ color:var(--ink-soft); cursor:default; }
.profile-dropdown a.dropdown-soon:hover{ background:transparent; }
.profile-dropdown a.dropdown-soon .beta-tag{ background:var(--paper-deep); color:var(--ink-soft); }

/* ---- cover + identity ---- */
.profile-header{ margin:28px 0 0; position:relative; }
.cover-banner{
  height:150px;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  background:
    repeating-linear-gradient(135deg, rgba(18,10,8,0.06) 0 2px, transparent 2px 22px),
    linear-gradient(120deg, #FBE0C6, #F6C98B);
  position:relative;
  overflow:hidden;
}
/* Soften the hard cut where the cover photo meets the white card below —
   fades the bottom of the cover into the card color instead of ending on
   a sharp edge, so an uploaded photo doesn't just get chopped off. */
.cover-banner::after{
  content:'';
  position:absolute; left:0; right:0; bottom:0; height:64px;
  background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, var(--white) 100%);
  pointer-events:none;
}
.cover-banner .change-cover{
  position:absolute; bottom:14px; right:18px; z-index:2;
  font-size:.78rem; font-weight:700;
  background:rgba(255,255,255,0.85);
  padding:6px 14px; border-radius:999px;
}
.identity-row{
  background:var(--white);
  border:2px solid var(--ink);
  border-top:none;
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  box-shadow:6px 6px 0 var(--gold);
  padding:0 32px 24px;
  display:flex;
  align-items:flex-end;
  gap:24px;
  flex-wrap:wrap;
  margin-bottom:8px;
}
/* Desktop: absolutely position the avatar so it overlaps the bottom of
   the cover banner by a fixed, explicit 46px — Chrome and Firefox
   disagreed on exactly how a negative top margin resolves on a flex
   item with align-items:flex-end (this rendered fine in Firefox but
   left a visible gap in Chrome instead of overlapping the cover photo).
   Absolute positioning removes that ambiguity: the overlap is a plain
   number, not something for two browsers' flexbox engines to interpret
   differently. Reverted back to normal in-flow positioning at the
   900px breakpoint below, where the layout stacks into a column and
   this fragile combination doesn't come up in the first place. */
.avatar-wrap{
  position:absolute;
  top:170px; /* cover-banner height (150px) minus a 26px overlap — nudged down from the original 46px overlap so the avatar sits better aligned with the name/handle text beside it, instead of appearing to float above it */
  left:32px; /* matches identity-row's own left padding, so the avatar lines up with the card edge as before */
  text-align:center;
}
.avatar-xl{
  width:112px; height:112px; border-radius:50%;
  border:5px solid var(--white);
  background:linear-gradient(155deg,var(--gold),var(--clay-deep));
  object-fit:cover;
  object-position:center;
}
.avatar-wrap .change-photo{
  font-size:.74rem; font-weight:700; color:var(--clay-deep); margin-top:6px;
}

/* ---- avatar reposition/crop modal ---- */
.avatar-crop-overlay{
  position:fixed; inset:0; z-index:9999;
  background:rgba(18,10,8,0.72);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.avatar-crop-overlay[hidden]{ display:none; }
.avatar-crop-box{
  background:var(--white,#fff);
  border-radius:var(--radius-lg,16px);
  padding:24px;
  max-width:360px;
  width:100%;
  text-align:center;
}
.avatar-crop-box h4{ margin-bottom:4px; }
.avatar-crop-box p{ font-size:.85rem; color:var(--ink-soft); margin-bottom:16px; }
.avatar-crop-viewport{
  width:280px; height:280px;
  margin:0 auto 16px;
  border-radius:50%;
  overflow:hidden;
  position:relative;
  background:var(--paper-deep,#eee);
  cursor:grab;
  touch-action:none; /* pointer events handle panning; stop the browser's own scroll/zoom gestures from fighting the drag */
  border:3px solid var(--ink,#120A08);
}
.avatar-crop-viewport:active{ cursor:grabbing; }
.avatar-crop-viewport img{
  position:absolute;
  top:0; left:0;
  max-width:none; /* override the theme-wide img{max-width:100%} reset — this image must be free to render larger than its container while panning/zooming */
  user-select:none;
  -webkit-user-drag:none;
}
#avatarCropZoom{ width:100%; margin-bottom:18px; }
.avatar-crop-actions{ display:flex; gap:10px; justify-content:center; }
.identity-info{
  flex:1; padding-top:16px; min-width:200px;
  margin-left:146px; /* reserves the space the avatar used to occupy in the flex flow (112px avatar + 10px border + 24px gap), now that it's positioned absolutely and out of flow */
}
.identity-info h1{ font-size:1.7rem; margin-bottom:6px; }
.identity-info .rating{ font-size:.9rem; color:var(--ink-soft); }
.identity-info .rating .stars{ color:var(--gold-deep); letter-spacing:1px; }
.identity-actions{ padding-top:16px; display:flex; gap:10px; }
.role-badge{
  display:inline-block;
  background:var(--paper-deep);
  border:1px solid var(--line);
  border-radius:999px;
  padding:3px 12px;
  font-size:.74rem;
  font-weight:700;
  color:var(--ink-soft);
  margin-bottom:8px;
}

/* ---- tabs ---- */
.profile-tabs{
  display:flex;
  gap:4px;
  flex-wrap:wrap;
  border-bottom:2px solid var(--line);
  margin-bottom:32px;
}
.profile-tabs button{
  padding:12px 18px;
  font-weight:700;
  font-size:.9rem;
  color:var(--ink-soft);
  border-bottom:3px solid transparent;
  margin-bottom:-2px;
  transition:color .15s ease;
}
.profile-tabs button:hover{ color:var(--ink); }
.profile-tabs button.active{ color:var(--clay-deep); border-color:var(--clay); }

.tab-panel{ display:none; }
.tab-panel.active{ display:block; animation:step-in .3s var(--bounce); }
/* My Publication and Reading List render the same .feed-card markup the
   main Catch feed does (via wn_render_catch_card()), but .tab-panel
   itself never had the spacing .feed normally provides — cards were
   just stacking with zero gap between them, edge to edge, which read as
   messy/cramped compared to how the same cards look in the feed.
   Scoped to just these two panels (not every tab) since the others
   (About, Books, Following/Follower) have their own layouts — a
   blanket flex change here could've doubled up spacing that's already
   handled elsewhere, like .book-grid's own grid layout. */
.tab-panel[data-panel="pub"].active,
.tab-panel[data-panel="reading"].active{
  display:flex; flex-direction:column; gap:16px;
}
/* Belt-and-suspenders fix: the avatar in these cards was rendering at
   full/natural image size instead of the small 40px circle it uses
   correctly in the main feed — same class, same CSS rule, same DOM
   nesting on paper, so this is very likely the same brand of cascade
   conflict already seen once on this profile page (the star-rating
   picker bug). Rather than keep hunting for exactly which stylesheet
   is winning the specificity fight, this pins the size down explicitly
   wherever a feed-card renders inside a profile tab, so it can't be
   silently overridden by anything loaded after it. */
.tab-panel .feed-card-head .avatar-sm{
  width:40px !important;
  height:40px !important;
  border-radius:50% !important;
  flex:none !important;
  object-fit:cover !important;
}

/* ---- About tab ---- */
.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.about-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px;
}
.about-card h4{ font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:16px; }
.about-field{ margin-bottom:14px; }
.about-field .k{ font-size:.76rem; color:var(--ink-soft); font-weight:600; }
.about-field .v{ font-size:.95rem; color:var(--ink); }

/* ---- Publication / Blog grids ---- */
.pub-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:18px;
}
.pub-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
}
.pub-card .cover{ aspect-ratio:2/3; background:linear-gradient(155deg,#3E5A69,#12181F); }
.pub-card .cover.c2{ background:linear-gradient(155deg,#8A3B2C,#2B140C); }
.pub-card .cover.c3{ background:linear-gradient(155deg,#5FA675,#141C15); }
.pub-card .cover.c4{ background:linear-gradient(155deg,#7C6A9F,#211A2E); }
.pub-card .cover.c5{ background:linear-gradient(155deg,#C98F12,#3E2A05); }
.pub-card .body{ padding:12px; }
.pub-card .title{ font-family:'Noto Serif Devanagari',serif; font-weight:700; font-size:.9rem; margin-bottom:6px; }
.pub-actions{ margin-top:20px; }

/* ---- saved catches (bookmarked writing, separate from finished books above) ---- */
.saved-catches{ margin-top:28px; }
.saved-catches h4{ font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:14px; }
.saved-catch-row{
  display:flex; justify-content:space-between; align-items:center;
  background:var(--white); border:1px solid var(--line); border-radius:12px;
  padding:14px 18px; margin-bottom:10px;
  transition:transform .2s var(--bounce), border-color .15s ease;
}
.saved-catch-row:hover{ transform:translateY(-2px); border-color:var(--gold-deep); }
.saved-catch-row h5{ font-size:.92rem; margin:0 0 2px; color:var(--ink); }
.saved-catch-row p{ font-size:.78rem; color:var(--ink-soft); margin:0; }
.saved-catch-row .btn{ padding:6px 14px; font-size:.76rem; }

/* ---- data tables (Blog list / Reading list) ---- */
.data-table{ width:100%; border-collapse:collapse; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.data-table th, .data-table td{ text-align:left; padding:12px 16px; font-size:.86rem; border-bottom:1px solid var(--line); }
.data-table th{ background:var(--paper-deep); font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); }
.data-table tr:last-child td{ border-bottom:none; }
.status-pill{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:.74rem; font-weight:700; }
.status-pill.published{ background:#E6F2E9; color:var(--leaf-deep); }
.status-pill.draft{ background:#F4EEE0; color:var(--ink-soft); }
.status-pill.finished{ background:#E4EFF9; color:var(--sky-deep); }
.row-actions{ display:flex; gap:8px; }
.row-actions button{ font-size:.78rem; font-weight:700; padding:5px 11px; border-radius:8px; }
.row-actions .edit{ background:var(--paper-deep); color:var(--ink); }
.row-actions .delete{ background:#FCE4E9; color:var(--rose-deep); }
.table-cover{ width:40px; aspect-ratio:2/3; border-radius:4px; background:linear-gradient(155deg,#3E5A69,#12181F); }

/* ---- Following / Follower cards ---- */
.people-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}
.person-card{
  display:flex; align-items:center; gap:14px;
  background:var(--white); border:1px solid var(--line); border-radius:14px; padding:16px;
}
.person-card .avatar-sm{ width:52px; height:52px; border-radius:50%; flex:none; background:linear-gradient(155deg,var(--sky),var(--sky-deep)); }
.person-card:nth-child(3n+2) .avatar-sm{ background:linear-gradient(155deg,var(--rose),var(--rose-deep)); }
.person-card:nth-child(3n+3) .avatar-sm{ background:linear-gradient(155deg,var(--gold),var(--clay-deep)); }
.person-card .info{ flex:1; }
.person-card h5{ font-size:.95rem; margin:0 0 3px; }
.person-card .stats{ font-size:.76rem; color:var(--ink-soft); }
.person-card .btn{ padding:7px 14px; font-size:.78rem; flex:none; }

@media (max-width: 900px){
  .about-grid{ grid-template-columns:1fr; }
  .pub-grid{ grid-template-columns:repeat(3,1fr); }
  .people-grid{ grid-template-columns:1fr; }
  .identity-row{ flex-direction:column; align-items:flex-start; }
  .identity-actions{ padding-top:0; }
  /* Column layout stacks the avatar above the name normally, so the
     row-specific absolute positioning (and the space it reserved on
     identity-info) isn't needed here — back to a plain negative margin
     for the overlap, which is the part that was safe across browsers. */
  .avatar-wrap{ position:static; margin-top:-46px; }
  .identity-info{ margin-left:0; }
}
@media (max-width: 680px){
  /* the shared site header hides .btn-ghost on mobile assuming it's only
     the homepage's "Sign In" link — but this page reuses .btn-ghost for the
     "My profile" dropdown trigger too, which must stay reachable. */
  .profile-nav-item .btn-ghost{ display:inline-flex !important; }
  .demo-controls{ flex-direction:column; align-items:flex-start; gap:10px; }
}
@media (max-width: 640px){
  .pub-grid{ grid-template-columns:repeat(2,1fr); }
  .data-table{ display:block; overflow-x:auto; white-space:nowrap; }
}