/* ═══════════════════════════════════════════════════════════════════
   NPolls — public member profiles (/u/{handle}) and the profile editor.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Cover ──────────────────────────────────────────────────────── */
.pf-head{
  position:relative; margin:22px 0 26px;
  border-radius:var(--r-3); overflow:hidden;
  background:var(--glass); border:1px solid var(--edge);
  backdrop-filter:blur(20px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.pf-cover{ position:relative; aspect-ratio:4/1; min-height:150px; overflow:hidden; background:var(--bg-2); }
.pf-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
/* No cover uploaded: the palette itself becomes the banner rather than
   leaving a grey slab. */
.pf-cover-fallback{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 18% 20%, rgba(var(--c1-rgb),.42), transparent 58%),
    radial-gradient(ellipse at 78% 70%, rgba(var(--c5-rgb),.42), transparent 60%),
    linear-gradient(120deg, var(--bg-2), var(--bg));
}
.pf-cover-fallback::after{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:
    linear-gradient(var(--edge) 1px, transparent 1px),
    linear-gradient(90deg, var(--edge) 1px, transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:radial-gradient(ellipse at 40% 30%, #000, transparent 80%);
          mask-image:radial-gradient(ellipse at 40% 30%, #000, transparent 80%);
}
.pf-cover-scrim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, var(--scrim-1) 0%, var(--scrim-3) 62%, transparent 100%);
}

/* ── Identity bar ───────────────────────────────────────────────── */
.pf-bar{
  position:relative; z-index:2;
  display:flex; align-items:flex-end; gap:20px; flex-wrap:wrap;
  padding:0 30px 22px;
  /* Pull the row up so the avatar straddles the cover edge. */
  margin-top:-56px;
}
.pf-avatar{
  flex-shrink:0; width:128px; height:128px; border-radius:50%;
  overflow:hidden; display:grid; place-items:center;
  background:var(--grad-cta); color:var(--on-cta);
  border:4px solid var(--bg);
  box-shadow:0 18px 44px rgba(0,0,0,.5);
}
.pf-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.pf-initial{ font-family:var(--display); font-weight:800; font-size:46px; }

.pf-who{ flex:1; min-width:220px; padding-bottom:4px; }
.pf-who h1{
  font-family:var(--display); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(22px,2.6vw,32px); margin:0; line-height:1.1;
}
.pf-handle{
  margin:3px 0 0; font-family:var(--mono); font-size:13px; color:var(--c1);
}
.pf-bio{ margin:11px 0 0; font-size:14.5px; line-height:1.6; color:var(--txt-2); max-width:60ch; }
.pf-joined{
  display:flex; align-items:center; gap:7px;
  margin:11px 0 0; font-size:12.5px; color:var(--txt-3);
}
.pf-joined .i{ width:14px; height:14px; }

.pf-follow{ width:auto; min-width:158px; }
/* Following is a state you can leave, so it stops shouting once set. */
.pf-follow.is-following{
  background:var(--glass-2); color:var(--txt);
  border:1px solid var(--edge-2); box-shadow:none;
}
.pf-follow.is-following:hover{
  color:var(--c4); border-color:var(--c4); background:rgba(255,90,110,.08);
}
.pf-follow[disabled]{ opacity:.6; cursor:progress; }
.pf-self .btn-xl{ text-decoration:none; }

/* ── Stats ──────────────────────────────────────────────────────── */
.pf-stats{
  display:flex; flex-wrap:wrap; gap:0;
  border-top:1px solid var(--edge); background:var(--glass-2);
}
.pf-stat{
  flex:1 1 130px; padding:16px 20px; text-align:center;
  border-right:1px solid var(--edge);
}
.pf-stat:last-child{ border-right:0; }
.pf-stat b{
  display:block; font-family:var(--display); font-weight:800;
  font-size:22px; line-height:1; font-variant-numeric:tabular-nums;
}
.pf-stat span{
  display:block; margin-top:6px; font-size:10.5px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--txt-2);
}
.pf-stat-off b .i{ width:17px; height:17px; color:var(--txt-3); }

.pf-interests{
  display:flex; gap:7px; flex-wrap:wrap;
  padding:14px 30px 18px; border-top:1px solid var(--edge);
}
.pf-interests .topic{ cursor:default; }

/* ── Body layout ────────────────────────────────────────────────── */
.pf-grid{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:20px; align-items:start; }
.pf-main{ display:grid; gap:20px; min-width:0; }
.pf-side{ display:grid; gap:20px; position:sticky; top:88px; }

.pf-panel{
  padding:22px 24px 24px; border-radius:var(--r-2);
  background:var(--glass); border:1px solid var(--edge);
  backdrop-filter:blur(18px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.pf-empty{ padding:26px 0; text-align:center; }

/* A hidden section explains itself rather than just being absent —
   otherwise an empty profile and a private one look identical. */
.pf-locked{
  display:flex; align-items:flex-start; gap:11px;
  margin:0; padding:18px 20px; border-radius:var(--r);
  background:var(--glass-2); border:1px dashed var(--edge-2);
  font-size:13.5px; line-height:1.55; color:var(--txt-2);
}
.pf-locked .i{ width:17px; height:17px; flex-shrink:0; color:var(--c1); margin-top:1px; }

/* ── Comment feed ───────────────────────────────────────────────── */
.pf-feed{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.pf-item{ display:flex; gap:13px; margin:0; }
.pf-kind{
  flex-shrink:0; width:34px; height:34px; border-radius:11px;
  display:grid; place-items:center;
  background:var(--glass-2); border:1px solid var(--edge);
}
.pf-kind .i{ width:16px; height:16px; }
.pf-kind.poll .i{ color:var(--c1); }
.pf-kind.blog .i{ color:var(--c3); }
.pf-item-b{ flex:1; min-width:0; }
.pf-on{ margin:0; font-size:12.5px; color:var(--txt-3); display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.pf-on a{ color:var(--txt); font-weight:600; text-decoration:none; }
.pf-on a:hover{ color:var(--c3); }
.pf-on .badge{
  font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:3px 8px; border-radius:99px;
  background:var(--glass-2); border:1px solid var(--edge); color:var(--txt-2);
}
.pf-text{
  margin:7px 0 0; padding:11px 14px; border-radius:var(--r);
  background:var(--glass-2); border-left:2px solid var(--c1);
  font-size:14px; line-height:1.6; color:var(--txt-2);
  overflow-wrap:anywhere;
}
.pf-when{ margin:6px 0 0; font-size:11.5px; color:var(--txt-3); }

/* ── Votes ──────────────────────────────────────────────────────── */
.pf-votes{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.pf-votes li{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin:0; padding:12px 15px; border-radius:var(--r);
  background:var(--glass-2); border:1px solid var(--edge);
  transition:border-color var(--fast) var(--ease);
}
.pf-votes li:hover{ border-color:var(--edge-2); }
.pf-votes a{ display:flex; align-items:center; gap:12px; flex:1; min-width:0; text-decoration:none; }
.pf-votes .t{ flex:1; min-width:0; font-size:14px; font-weight:600; color:var(--txt);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pf-votes .pick{
  flex-shrink:0; font-size:11px; font-weight:700; padding:4px 11px; border-radius:99px;
}
.pf-votes .pick.a{ color:var(--c1); background:rgba(var(--c1-rgb),.12); border:1px solid rgba(var(--c1-rgb),.28); }
.pf-votes .pick.b{ color:var(--c5-lite); background:rgba(var(--c5-rgb),.14); border:1px solid rgba(var(--c5-rgb),.32); }
.pf-votes .w{ flex-shrink:0; font-size:11.5px; color:var(--txt-3); font-variant-numeric:tabular-nums; }

/* ── People ─────────────────────────────────────────────────────── */
.pf-people-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.pf-people-list li{ margin:0; }
.pf-people-list a{
  display:flex; align-items:center; gap:11px; padding:8px 10px;
  border-radius:var(--r); text-decoration:none;
  transition:background var(--fast) var(--ease);
}
.pf-people-list a:hover{ background:var(--glass-2); }
.pf-people-list .av{
  flex-shrink:0; width:34px; height:34px; border-radius:50%; overflow:hidden;
  display:grid; place-items:center;
  background:var(--grad-cta); color:var(--on-cta);
  font-family:var(--display); font-weight:800; font-size:13px;
}
.pf-people-list .av img{ width:100%; height:100%; object-fit:cover; display:block; }
.pf-people-list .nm{
  font-size:13.5px; font-weight:600; color:var(--txt);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ═══════════════════════════════════════════════════════════════════
   The editor, on profile.php
   ═══════════════════════════════════════════════════════════════════ */
.pe-media{ display:grid; gap:0; }
.pe-cover{
  position:relative; aspect-ratio:4/1; min-height:120px;
  border-radius:var(--r-2); overflow:hidden;
  background:var(--bg-2); border:1px solid var(--edge);
}
.pe-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.pe-cover:empty::after,
.pe-cover::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse at 20% 25%, rgba(var(--c1-rgb),.32), transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(var(--c5-rgb),.32), transparent 60%);
  z-index:0;
}
.pe-cover img{ position:relative; z-index:1; }
.pe-media-btns{
  position:absolute; right:12px; bottom:12px; z-index:2;
  display:flex; gap:7px; flex-wrap:wrap;
}

.pe-avatar-row{ display:flex; align-items:flex-end; gap:16px; margin-top:-40px; padding-left:20px; flex-wrap:wrap; }
.pe-avatar{
  position:relative; z-index:2; flex-shrink:0;
  width:96px; height:96px; border-radius:50%; overflow:hidden;
  display:grid; place-items:center;
  background:var(--grad-cta); color:var(--on-cta);
  font-family:var(--display); font-weight:800; font-size:34px;
  border:4px solid var(--bg-2);
}
.pe-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.pe-avatar-btns{ display:flex; flex-direction:column; gap:8px; padding-bottom:6px; }
.pe-avatar-btns .hint{ margin:0; }

/* The file input is hidden inside its label, so the label has to look
   and behave like the button it replaces. */
.pe-media label.btn{ cursor:pointer; }

.pe-status{ margin:14px 0 0; font-size:13px; min-height:1.2em; }
.pe-status.ok { color:var(--ok); }
.pe-status.bad{ color:var(--c4); }

.container textarea, .card textarea{
  width:100%; font-family:var(--body); font-size:14.5px; line-height:1.55;
  color:var(--txt); background:var(--glass-2);
  border:1px solid var(--edge); border-radius:var(--r);
  padding:12px 14px; resize:vertical;
}
.container textarea:focus, .card textarea:focus{
  outline:0; border-color:transparent; box-shadow:0 0 0 1.5px var(--c1);
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width:900px){
  .pf-grid{ grid-template-columns:1fr; }
  .pf-side{ position:static; grid-template-columns:1fr 1fr; }
}
@media (max-width:620px){
  .pf-bar{ padding:0 20px 20px; margin-top:-44px; }
  .pf-avatar{ width:96px; height:96px; }
  .pf-initial{ font-size:36px; }
  .pf-actions{ width:100%; }
  .pf-follow{ width:100%; }
  .pf-interests{ padding:12px 20px 16px; }
  .pf-side{ grid-template-columns:1fr; }
  .pf-panel{ padding:18px 18px 20px; }
  .pf-stat{ flex-basis:50%; }
}

/* ═══════════════════════════════════════════════════════════════════
   Profile, part two: owner tools, tabs, heatmap, fingerprint.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Cover: the stored image is now uncropped, so the 4:1 band is a
   window onto it and object-position chooses which band shows. ─────── */
.pf-cover img{ object-position:50% 50%; transition:object-position .18s linear; }
.pf-cover.is-reposing{ cursor:grab; }
.pf-cover.is-reposing:active{ cursor:grabbing; }
.pf-cover.is-reposing img{ transition:none; }
/* While repositioning, dim the scrim so the whole picture is visible. */
.pf-cover.is-reposing .pf-cover-scrim{ opacity:.25; }
.pf-cover-scrim{ transition:opacity var(--mid) var(--ease); }

.pf-cover-tools{
  position:absolute; right:14px; top:14px; z-index:3;
  display:flex; gap:7px; flex-wrap:wrap;
}
.pf-chip{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  padding:8px 14px; border-radius:100px; font-size:12.5px; font-weight:600;
  color:var(--txt); background:rgba(6,10,22,.62); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.16);
  transition:background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.pf-chip:hover{ background:rgba(6,10,22,.82); border-color:var(--edge-2); }
.pf-chip .i{ width:14px; height:14px; }
.pf-chip.primary{ background:var(--grad-cta); color:var(--on-cta); border-color:transparent; }

.pf-repos-bar{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; padding:12px 18px;
  background:rgba(6,10,22,.86); backdrop-filter:blur(16px);
  border-top:1px solid var(--edge-2);
  font-size:13px; color:var(--txt-2);
}

.pf-avatar{ position:relative; }
.pf-avatar-edit{
  position:absolute; inset:auto 0 0 0; height:34%; cursor:pointer;
  display:grid; place-items:center;
  background:linear-gradient(to top, rgba(6,10,22,.82), rgba(6,10,22,.2));
  color:#fff; opacity:0;
  transition:opacity var(--fast) var(--ease);
}
.pf-avatar:hover .pf-avatar-edit{ opacity:1; }
.pf-avatar-edit .i{ width:18px; height:18px; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ── Actions row ────────────────────────────────────────────────── */
.pf-actions{ display:flex; align-items:center; gap:10px; }
.pf-share{
  flex-shrink:0; width:46px; height:46px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center;
  color:var(--txt-2); background:var(--glass-2); border:1px solid var(--edge);
  transition:color var(--fast) var(--ease), border-color var(--fast) var(--ease),
             transform var(--fast) var(--spring);
}
.pf-share:hover{ color:var(--c1); border-color:var(--c1); transform:translateY(-2px); }
.pf-share .i{ width:19px; height:19px; }

/* ── Tabs ───────────────────────────────────────────────────────── */
.pf-tabs{
  display:flex; gap:6px; flex-wrap:wrap; margin:0 0 20px;
  padding:6px; border-radius:100px;
  background:var(--glass-2); border:1px solid var(--edge);
}
.pf-tabs.sm{ margin-bottom:14px; }
.pf-tab{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 16px; border-radius:100px; cursor:pointer;
  font-family:var(--body); font-size:13.5px; font-weight:600;
  color:var(--txt-2); background:transparent; border:0; white-space:nowrap;
  transition:color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.pf-tabs.sm .pf-tab{ font-size:12.5px; padding:8px 12px; }
.pf-tab:hover{ color:var(--txt); background:var(--glass); }
.pf-tab.is-on{ color:var(--on-cta); background:var(--grad-cta); box-shadow:var(--glow-a); }
.pf-tab .i{ width:15px; height:15px; }
.pf-tab .i.lock{ width:12px; height:12px; opacity:.7; }
.pf-tab .n{
  font-size:11px; font-weight:700; padding:2px 7px; border-radius:99px;
  background:rgba(255,255,255,.10); font-variant-numeric:tabular-nums;
}
.pf-tab.is-on .n{ background:rgba(6,10,22,.18); }

/* ── Load more ──────────────────────────────────────────────────── */
.pf-more{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; margin-top:14px; padding:12px 20px; cursor:pointer;
  border-radius:100px; font-family:var(--body); font-size:13.5px; font-weight:600;
  color:var(--txt-2); background:var(--glass-2); border:1px dashed var(--edge-2);
  transition:color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.pf-more:hover{ color:var(--txt); border-color:var(--c1); border-style:solid; }
.pf-more[disabled]{ opacity:.6; cursor:progress; }
.pf-more .n{ font-size:11.5px; color:var(--txt-3); }

/* ── Activity heatmap ───────────────────────────────────────────── */
.heat-scroll{ overflow-x:auto; padding-bottom:6px; }
.heat-scroll::-webkit-scrollbar{ height:6px; }
.heat-scroll::-webkit-scrollbar-thumb{ background:var(--edge-2); border-radius:99px; }
.heat{ display:flex; gap:3px; min-width:max-content; }
.heat-col{ display:grid; grid-template-rows:repeat(7,1fr); gap:3px; }
.heat-d{
  width:11px; height:11px; border-radius:3px;
  background:var(--glass-2); border:1px solid transparent;
}
/* Gold ramp: activity reads as the brand colour warming up. */
.heat-d[data-lvl="1"]{ background:rgba(var(--c1-rgb),.26); }
.heat-d[data-lvl="2"]{ background:rgba(var(--c1-rgb),.48); }
.heat-d[data-lvl="3"]{ background:rgba(var(--c1-rgb),.72); }
.heat-d[data-lvl="4"]{ background:var(--c1); }
.heat-d.is-future{ opacity:0; }
.heat-key{
  display:flex; align-items:center; gap:5px; justify-content:flex-end;
  margin-top:12px; font-size:11px; color:var(--txt-3);
}
.heat-key .heat-d{ width:10px; height:10px; }

/* ── Voting fingerprint ─────────────────────────────────────────── */
.fp{
  margin:0 0 20px; padding:18px 20px; border-radius:var(--r-2);
  background:var(--glass-2); border:1px solid var(--edge);
}
.fp-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:16px;
}
.fp-head .k{
  margin:0; font-size:10.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--txt-3);
}
.fp-head .t{ margin:5px 0 0; font-family:var(--display); font-weight:700; font-size:16px; }
.fp-score{ text-align:right; }
.fp-score b{
  display:block; font-family:var(--display); font-weight:800; font-size:26px;
  line-height:1; color:var(--c1); font-variant-numeric:tabular-nums;
}
.fp-score span{ display:block; margin-top:4px; font-size:11px; color:var(--txt-3); }

.fp-bars{ display:grid; gap:9px; }
.fp-row{ display:flex; align-items:center; gap:12px; }
.fp-cat{
  flex:0 0 96px; font-size:12.5px; font-weight:600; color:var(--txt-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.fp-track{
  flex:1; height:8px; border-radius:99px; overflow:hidden;
  background:rgba(255,255,255,.06);
}
:root[data-theme="light"] .fp-track{ background:rgba(10,18,38,.07); }
.fp-track i{
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--c1),var(--c5));
}
.fp-n{
  flex:0 0 auto; font-size:12px; color:var(--txt-3);
  font-variant-numeric:tabular-nums; min-width:22px; text-align:right;
}
.fp-foot{ margin:14px 0 0; font-size:11px; color:var(--txt-3); }

/* ── Empty people state ─────────────────────────────────────────── */
.pf-none{
  display:flex; align-items:center; gap:10px; margin:0;
  padding:18px 16px; border-radius:var(--r);
  background:var(--glass-2); border:1px dashed var(--edge);
  font-size:13px; color:var(--txt-3);
}
.pf-none .i{ width:17px; height:17px; flex-shrink:0; opacity:.7; }

@media (prefers-reduced-motion:reduce){
  .pf-cover img{ transition:none; }
  .pf-share:hover{ transform:none; }
}
@media (max-width:620px){
  .pf-cover-tools{ right:10px; top:10px; }
  .pf-chip{ padding:7px 11px; font-size:11.5px; }
  .heat-d{ width:9px; height:9px; }
  .fp-cat{ flex-basis:72px; }
}

/* The people rail is a denser panel than the main column ones: its rows
   are single-line, so the generous padding used elsewhere would leave it
   looking half empty. */
.pf-people{ padding:16px 16px 18px; }
.pf-people .pf-tabs{ background:transparent; border:0; padding:0 0 4px; }
.pf-people .pf-people-list{ max-height:340px; overflow-y:auto; scrollbar-width:thin; }
.pf-people .pf-people-list::-webkit-scrollbar{ width:5px; }
.pf-people .pf-people-list::-webkit-scrollbar-thumb{ background:var(--edge-2); border-radius:99px; }