/* CircleTrust Editorial — Me. Personal control, never a score.
   Order: identity → contribution → Showcase → control. Token-driven.
   No score/streak/points/meters. Circle-Trusted green never marks the user's OWN counts. */

.me{width:min(100%,1000px);max-width:1000px;min-width:0;margin:0 auto;padding:0 24px 110px;overflow-x:clip}

/* ---- identity ---- */
.me-cover{position:relative;height:210px;margin-top:6px;border-radius:20px;overflow:hidden;background:var(--ct-ink)}
.me-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.me-cover.matte{background:linear-gradient(135deg,color-mix(in srgb,var(--ct-ink) 55%,var(--ct-base)),var(--ct-ink))}
.me-idbar{display:flex;align-items:flex-end;gap:20px;margin-top:-54px;padding:0 4px 0 22px;position:relative;z-index:2}
.me-dp{flex:0 0 auto;width:118px;height:118px;border-radius:50%;border:4px solid var(--ct-base);overflow:hidden;background:var(--ct-ink);position:relative}
.me-dp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.me-dp .mono{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--ct-font-display);font-weight:600;font-size:2.4rem;color:color-mix(in srgb,#fff 82%,transparent);background:linear-gradient(155deg,color-mix(in srgb,var(--ct-ink) 58%,var(--ct-base)),var(--ct-ink))}
.me-idtext{flex:1;min-width:0;padding-bottom:6px}
.me-name{font-family:var(--ct-font-display);font-weight:600;letter-spacing:-.02em;font-size:clamp(1.7rem,3vw,2.2rem);color:var(--ct-ink);line-height:1;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.me-name .ct-tag{transform:translateY(-2px)}
.me-community{margin-top:6px;color:var(--ct-sub);font-family:var(--ct-font-ui);font-weight:600;font-size:.9rem}
.me-public{padding-bottom:12px}
.me-public a{color:var(--ct-ink);font-family:var(--ct-font-ui);font-weight:800;font-size:.82rem;text-decoration:none;border-bottom:2px solid var(--ct-accent);padding-bottom:2px}

/* ---- sections ---- */
.me-sec{margin-top:42px}
.me-eyebrow{font-family:var(--ct-font-ui);font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:.66rem;color:var(--ct-sub)}
.me-sec h2{font-family:var(--ct-font-display);font-weight:500;letter-spacing:-.02em;font-size:1.5rem;color:var(--ct-ink);margin:6px 0 0}

/* Your CircleTrust — human sentences from real counts */
.me-trust p{font-family:var(--ct-font-display);font-weight:500;font-size:clamp(1.4rem,2.4vw,1.8rem);line-height:1.35;letter-spacing:-.01em;color:var(--ct-ink);margin:16px 0 0;max-width:26ch}
.me-trust p + p{margin-top:10px;font-size:clamp(1.15rem,1.8vw,1.35rem);color:color-mix(in srgb,var(--ct-ink) 78%,var(--ct-base))}

/* Your contribution — only Recommendations carries emphasis (it moves trust) */
.me-contrib{display:flex;gap:44px;margin-top:20px;flex-wrap:wrap}
.me-metric .n{font-family:var(--ct-font-display);font-weight:600;font-size:2.6rem;line-height:1;color:var(--ct-ink);display:inline-block}
.me-metric.rec .n{border-bottom:3px solid var(--ct-accent);padding-bottom:3px}   /* accent = action, NOT trust green */
.me-metric .l{display:block;margin-top:9px;font-family:var(--ct-font-ui);font-weight:700;font-size:.82rem;color:var(--ct-sub)}
.me-metric.rec .l{color:var(--ct-ink)}
.me-contrib-note{margin-top:16px;color:var(--ct-sub);font-family:var(--ct-font-ui);font-size:.8rem}

/* Your Showcase */
.me-showcase-card{margin-top:18px;display:grid;grid-template-columns:180px 1fr;background:var(--ct-paper);border:1px solid var(--ct-line);border-radius:18px;overflow:hidden;box-shadow:0 10px 26px color-mix(in srgb,var(--ct-ink) 6%,transparent)}
.me-showcase-card .m{position:relative;min-height:150px;background:var(--ct-ink)}
.me-showcase-card .m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.me-showcase-card .m .tag{position:absolute;top:12px;left:12px}
.me-showcase-card .b{padding:20px 22px;display:flex;flex-direction:column;justify-content:center}
.me-showcase-card .b h3{font-family:var(--ct-font-display);font-weight:600;font-size:1.35rem;color:var(--ct-ink);margin:0}
.me-showcase-card .b .role{color:var(--ct-sub);font-family:var(--ct-font-ui);font-size:.85rem;margin-top:3px}
.me-showcase-card .b .go{margin-top:14px;align-self:flex-start;color:var(--ct-ink);font-family:var(--ct-font-ui);font-weight:800;font-size:.82rem;border:0;background:none;cursor:pointer;border-bottom:2px solid var(--ct-accent);padding:2px 0}
.me-showcase-create{margin-top:18px;background:var(--ct-paper);border:1px dashed color-mix(in srgb,var(--ct-ink) 22%,transparent);border-radius:18px;padding:22px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.me-showcase-create p{margin:0;color:var(--ct-sub);font-family:var(--ct-font-ui);font-size:.9rem;max-width:44ch}
.me-showcase-create strong{display:block;font-family:var(--ct-font-display);font-weight:600;font-size:1.2rem;color:var(--ct-ink);margin-bottom:4px}
.me-showcase-create button{border:0;cursor:pointer;background:var(--ct-accent);color:var(--ct-accent-contrast);font-family:var(--ct-font-ui);font-weight:800;border-radius:999px;padding:12px 20px;font-size:.85rem;white-space:nowrap}

/* control — deliberately last, quiet */
.me-controls{margin-top:16px;border-top:1px solid var(--ct-line)}
.me-ctrl{width:100%;text-align:left;border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 4px;border-bottom:1px solid var(--ct-line)}
.me-ctrl .l{font-family:var(--ct-font-ui);font-weight:700;font-size:.95rem;color:var(--ct-ink)}
.me-ctrl .r{display:flex;align-items:center;gap:12px}
.me-ctrl .note{color:var(--ct-sub);font-family:var(--ct-font-ui);font-size:.8rem}
.me-ctrl .chev{color:var(--ct-sub);font-size:1.1rem}
.me-ctrl:hover .l{text-decoration:underline}

@media (max-width:859px){
  .me{padding:0 16px 84px}
  .me-idbar{flex-direction:column;align-items:flex-start;gap:12px;margin-top:-46px}
  .me-idtext{padding-bottom:0}
  .me-public{padding-bottom:0;margin-top:6px}
  .me-contrib{gap:30px}
  .me-showcase-card{grid-template-columns:1fr}
  .me-showcase-card .m{min-height:150px}
}

/* v1.17: the frozen user schema has no cover field. A real DP may be used only
   as an explicitly treated editorial backdrop, never presented as uploaded cover media. */
.me-cover.derived-dp img{filter:grayscale(1) blur(18px) brightness(.52);transform:scale(1.14)}
.me-cover.derived-dp::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,rgba(30,27,24,.52),rgba(20,18,16,.78))}
.me-cover-note{position:absolute;right:14px;bottom:12px;z-index:2;color:rgba(255,255,255,.72);font:700 9px/1.2 var(--ct-font-ui);letter-spacing:.07em;text-transform:uppercase}
.me-metric.signal .n{font-size:2.15rem}
.me-cover-mono{position:absolute;right:28px;bottom:15px;font-family:var(--ct-font-display);font-size:clamp(4.8rem,11vw,8.5rem);font-weight:500;letter-spacing:-.06em;line-height:.8;color:color-mix(in srgb,#fff 12%,transparent);user-select:none}

/* v1.20B — personal DP + cover controls */
.me-cover{position:relative;overflow:hidden}.me-cover>img{width:100%;height:100%;object-fit:cover}.me-dp{position:relative;overflow:visible}.me-media-edit,.me-media-remove{position:absolute;z-index:5;border:1px solid rgba(255,255,255,.38);background:rgba(0,0,0,.5);color:#fff;backdrop-filter:blur(8px);font:800 .62rem var(--ct-font-ui);cursor:pointer}.me-cover-edit{right:14px;bottom:14px;border-radius:999px;padding:8px 11px}.me-media-remove{right:116px;bottom:14px;border-radius:999px;padding:8px 10px}.me-dp-edit{right:-4px;bottom:2px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;padding:0}
@media(max-width:620px){.me-cover-edit{right:9px;bottom:9px}.me-media-remove{right:107px;bottom:9px}}
\n/* v1.20N — profile-photo crop/resize editor. */
.ct-crop-overlay{position:fixed;inset:0;z-index:12000;background:rgba(20,16,14,.62);display:grid;place-items:center;padding:20px;backdrop-filter:blur(8px)}.ct-crop-card{width:min(440px,96vw);background:var(--ct-paper,#fff);border:1px solid var(--ct-line,#e7e1d6);border-radius:20px;padding:18px;box-shadow:0 28px 70px rgba(0,0,0,.28)}.ct-crop-card header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.ct-crop-card header>div{display:flex;flex-direction:column}.ct-crop-card header strong{font:700 1rem var(--ct-font-ui,system-ui)}.ct-crop-card header span{font-size:.78rem;color:var(--ct-sub,#6d685f);margin-top:3px}.ct-crop-card header button{border:0;background:transparent;font-size:1.15rem;cursor:pointer}.ct-crop-stage{width:min(320px,76vw);aspect-ratio:1;margin:18px auto;position:relative;overflow:hidden;border-radius:50%;background:#171310;box-shadow:inset 0 0 0 3px rgba(255,255,255,.8),0 8px 30px rgba(0,0,0,.18);touch-action:none;cursor:grab}.ct-crop-stage:active{cursor:grabbing}.ct-crop-stage img{position:absolute;max-width:none;user-select:none;pointer-events:none}.ct-crop-zoom{display:flex;gap:12px;align-items:center}.ct-crop-zoom span{font-weight:700;font-size:.8rem}.ct-crop-zoom input{flex:1}.ct-crop-card footer{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}.ct-crop-card footer button{border:1px solid var(--ct-line,#e7e1d6);background:#fff;border-radius:11px;padding:10px 15px;font-weight:800;cursor:pointer}.ct-crop-card footer button.primary{background:var(--ct-accent,#e8613c);border-color:transparent}

/* v1.20O.3 — explicit business-listing entry while preserving one Showcase identity. */
.me-showcase-create-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.me-showcase-create-actions button{min-width:150px}
@media(max-width:640px){.me-showcase-create-actions{width:100%;justify-content:stretch}.me-showcase-create-actions button{flex:1 1 100%}}

/* Q1 Me metric button reset */
.me-contrib button.me-metric{font:inherit;color:inherit}


/* DP-FIX — viewport-safe profile cropper */
html.ct-crop-open,body.ct-crop-open{overflow:hidden!important;overscroll-behavior:none!important}
.ct-crop-overlay{
  position:fixed!important;
  inset:0!important;
  z-index:2147483000!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch;
  padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))!important;
  box-sizing:border-box!important;
}
.ct-crop-card{
  width:min(440px,calc(100vw - 16px))!important;
  max-height:calc(100dvh - max(16px,env(safe-area-inset-top)) - max(16px,env(safe-area-inset-bottom)))!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  box-sizing:border-box!important;
  padding:16px!important;
}
.ct-crop-card header{flex:0 0 auto}
.ct-crop-stage{
  flex:0 0 auto!important;
  width:min(320px,76vw,42dvh)!important;
  height:min(320px,76vw,42dvh)!important;
  aspect-ratio:1!important;
  margin:12px auto!important;
}
.ct-crop-zoom{flex:0 0 auto!important;padding:2px 0 6px}
.ct-crop-card footer{
  position:sticky!important;
  bottom:-1px!important;
  z-index:4!important;
  flex:0 0 auto!important;
  margin:10px -16px -16px!important;
  padding:12px 16px max(12px,env(safe-area-inset-bottom))!important;
  background:var(--ct-paper,#fff)!important;
  border-top:1px solid var(--ct-line,#e7e1d6)!important;
  box-shadow:0 -8px 18px rgba(0,0,0,.08)!important;
}
.ct-crop-card footer button{min-height:44px!important}
.ct-crop-card footer button.primary{min-width:110px!important}

@media(max-width:620px),(max-height:760px){
  .ct-crop-overlay{align-items:flex-start!important}
  .ct-crop-card{margin:auto 0!important;padding:14px!important}
  .ct-crop-card header span{font-size:.72rem!important}
  .ct-crop-stage{
    width:min(300px,72vw,38dvh)!important;
    height:min(300px,72vw,38dvh)!important;
    margin:10px auto!important;
  }
  .ct-crop-card footer{
    margin:8px -14px -14px!important;
    padding:10px 14px max(10px,env(safe-area-inset-bottom))!important;
  }
}
@media(max-height:620px){
  .ct-crop-card header span{display:none}
  .ct-crop-stage{
    width:min(240px,62vw,34dvh)!important;
    height:min(240px,62vw,34dvh)!important;
    margin:6px auto!important;
  }
}


/* ME-POLISH — editorial controls, square DP */

/* Identity: keep the DP square; remove the little circular halo treatment. */
.me-dp{
  border-radius:4px!important;
  border-width:3px!important;
  box-shadow:none!important;
}
.me-dp img,.me-dp .mono{border-radius:1px!important}
.me-dp-edit{
  right:4px!important;
  bottom:4px!important;
  width:27px!important;
  height:27px!important;
  min-width:27px!important;
  min-height:27px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border-radius:4px!important;
  border:1px solid rgba(255,255,255,.32)!important;
  background:rgba(18,21,20,.82)!important;
  color:#fff!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  line-height:1!important;
}
.me-dp-edit:hover{background:rgba(18,21,20,.96)!important}

/* Cover actions: compact editorial buttons rather than floating pills. */
.me-cover-edit,.me-media-remove{
  min-height:36px!important;
  box-sizing:border-box!important;
  padding:0 13px!important;
  border-radius:8px!important;
  border:1px solid rgba(255,255,255,.34)!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  font:800 .68rem/1 var(--ct-font-ui)!important;
  letter-spacing:.01em!important;
}
.me-cover-edit{
  right:13px!important;
  bottom:13px!important;
  background:rgba(17,22,20,.88)!important;
}
.me-media-remove{
  right:124px!important;
  bottom:13px!important;
  background:rgba(17,22,20,.58)!important;
}
.me-cover-edit:hover,.me-media-remove:hover{background:rgba(17,22,20,.98)!important}

/* Contribution area: clickable metrics should never inherit generic button chrome. */
.me-contrib{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:28px!important;
  align-items:end!important;
}
.me-contrib .me-metric{
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  text-align:left!important;
}
.me-contrib button.me-metric,
.me-contrib .me-metric-link{
  appearance:none!important;
  -webkit-appearance:none!important;
  cursor:pointer!important;
  color:inherit!important;
  font:inherit!important;
  outline:none!important;
}
.me-contrib button.me-metric:hover .l,
.me-contrib .me-metric-link:hover .l{
  color:var(--ct-ink)!important;
  text-decoration:underline;
  text-decoration-color:var(--ct-accent);
  text-decoration-thickness:2px;
  text-underline-offset:5px;
}
.me-contrib button.me-metric:focus-visible,
.me-contrib .me-metric-link:focus-visible{
  outline:2px solid var(--ct-accent)!important;
  outline-offset:7px!important;
}
.me-metric .n{
  display:inline-block!important;
  padding:0!important;
  border:0!important;
  background:none!important;
}
.me-metric.rec .n{
  padding-bottom:4px!important;
  border-bottom:3px solid var(--ct-accent)!important;
}
.me-metric .l{
  margin-top:9px!important;
  line-height:1.25!important;
}

/* The secondary action is a link-like editorial action, not a pill. */
.me-contrib-actions{
  display:flex!important;
  justify-content:flex-end!important;
  margin-top:18px!important;
}
.me-contrib-actions button,
#meViewActivity{
  appearance:none!important;
  -webkit-appearance:none!important;
  min-height:auto!important;
  width:auto!important;
  margin:0!important;
  padding:3px 0 4px!important;
  border:0!important;
  border-bottom:2px solid var(--ct-accent)!important;
  border-radius:0!important;
  background:transparent!important;
  color:var(--ct-ink)!important;
  box-shadow:none!important;
  font:800 .82rem/1.2 var(--ct-font-ui)!important;
  cursor:pointer!important;
}

/* Showcase / business actions: restrained rectangles, not oversized pills. */
.me-showcase-create button,
.me-showcase-card .b .go,
.me-business-actions button{
  border-radius:9px!important;
  box-shadow:none!important;
}
.me-showcase-create button{
  min-height:42px!important;
  padding:0 15px!important;
  border:1px solid var(--ct-ink)!important;
  background:var(--ct-ink)!important;
  color:var(--ct-base)!important;
}
.me-showcase-card .b .go{
  min-height:auto!important;
  padding:4px 0!important;
  border-radius:0!important;
  background:transparent!important;
}
.me-business-actions button{
  min-height:40px!important;
  padding:0 13px!important;
  border:1px solid var(--ct-line)!important;
  background:var(--ct-paper)!important;
  color:var(--ct-ink)!important;
}
.me-business-actions .primary{
  border-color:var(--ct-ink)!important;
  background:var(--ct-ink)!important;
  color:var(--ct-base)!important;
}

/* Keep the page calmer and less 'buttony'. */
.me-public a{border-radius:0!important}
.me-ctrl{border-radius:0!important;box-shadow:none!important}
.me-ctrl:hover{background:color-mix(in srgb,var(--ct-ink) 3%,transparent)!important}
.me-ctrl:hover .l{text-decoration:none!important}

/* Mobile refinement. */
@media(max-width:859px){
  .me-idbar{
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    align-items:end!important;
    gap:12px 14px!important;
  }
  .me-public{
    grid-column:1/-1!important;
    margin-top:0!important;
  }
  .me-contrib{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:24px 18px!important;
  }
}
@media(max-width:620px){
  .me-cover{border-radius:14px!important}
  .me-cover-edit,.me-media-remove{
    min-height:34px!important;
    bottom:10px!important;
    padding:0 10px!important;
    font-size:.64rem!important;
  }
  .me-cover-edit{right:9px!important}
  .me-media-remove{right:111px!important}
  .me-dp{
    width:108px!important;
    height:108px!important;
    border-radius:4px!important;
  }
  .me-dp-edit{
    right:3px!important;
    bottom:3px!important;
    border-radius:3px!important;
  }
  .me-contrib{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:22px 14px!important;
  }
  .me-metric .n{font-size:2.25rem!important}
  .me-metric.signal .n{font-size:1.9rem!important}
  .me-metric .l{font-size:.74rem!important}
  .me-contrib-actions{justify-content:flex-start!important}
}
@media(max-width:390px){
  .me-contrib{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}