/* ═══════════════════════════════════════════════════════════════
   PROFILE
   styles-x-profile.css

   Lifted out of the page <style> blocks listed below. Kept in its own
   file rather than folded into styles-x-account.css: these rules are
   page-specific, and a shared file would apply them to every account
   page that happens to use the same class name.
   ═══════════════════════════════════════════════════════════════ */


/* ── from user-profile.php ─────────────────────────────────── */
/* ═══ PROFILE COVER ═════════════════════════════════════════════════════════ */
.prof-cover {
    position:relative;
    min-height:52vh;
    display:flex; flex-direction:column; justify-content:flex-end;
    overflow:hidden;
}
.prof-cover__bg {
    position:absolute; inset:-15%;
    background-size:cover; background-position:center 40%; background-repeat:no-repeat;
    transform:scale(1.06); transition:transform 10s ease-out; will-change:transform;
}
.prof-cover__bg.ready { transform:scale(1); }
.prof-cover__veil {
    position:absolute; inset:0;
    background:
        linear-gradient(to bottom, rgba(14,16,15,.45) 0%, rgba(14,16,15,0) 30%, rgba(14,16,15,0) 45%, rgba(14,16,15,.88) 75%, rgba(14,16,15,1) 100%),
        linear-gradient(to right, rgba(14,16,15,.4) 0%, transparent 65%);
}
.prof-cover__content { position:relative; z-index:2; padding:0 0 2rem; }
.prof-cover__eyebrow {
    font-family:var(--font-mono); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
    color:var(--emerald-lt); margin-bottom:.85rem;
    display:flex; align-items:center; gap:.75rem;
}
.prof-cover__eyebrow::before { content:''; display:inline-block; width:20px; height:1px; background:var(--emerald-lt); }
.prof-cover__title {
    font-family:var(--font-display);
    font-size:clamp(2.2rem,5vw,4rem);
    font-weight:900; line-height:.95; letter-spacing:-.03em; color:var(--ink); margin:0;
}
.prof-cover__title em { font-style:italic; color:var(--emerald-lt); }

/* ═══ PROFILE HEADER ════════════════════════════════════════════════════════ */
.prof-header { padding:2rem 0 0; }
.prof-header__inner {
    display:flex; align-items:center; gap:1.5rem;
    padding:0 0 1.5rem; border-bottom:1px solid var(--rule);
}
@media(max-width:767px) { .prof-header__inner { flex-direction:column; align-items:flex-start; gap:1rem; } }

.prof-avatar {
    width:128px; height:128px; border-radius:var(--radius-lg);
    background:var(--bg-3); border:3px solid var(--bg-2);
    display:flex; align-items:center; justify-content:center;
    color:var(--amber); font-size:3rem; flex-shrink:0;
    position:relative; overflow:hidden;
    box-shadow:0 8px 32px rgba(0,0,0,.5);
}
@media(max-width:767px) { .prof-avatar { width:88px; height:88px; } }
.prof-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.prof-avatar__initials {
    font-family:var(--font-display); font-size:2.5rem; font-weight:800;
    background:var(--emerald-dim); width:100%; height:100%;
    display:flex; align-items:center; justify-content:center; color:var(--emerald-lt);
}
@media(max-width:767px) { .prof-avatar__initials { font-size:1.8rem; } }

.prof-info { flex:1; min-width:0; }
.prof-name {
    font-family:var(--font-display); font-size:1.75rem; font-weight:800;
    color:var(--ink); line-height:1.1; margin-bottom:.25rem; letter-spacing:-.02em;
}
@media(max-width:767px) { .prof-name { font-size:1.35rem; } }
.prof-handle { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; color:var(--emerald-lt); display:block; margin-bottom:.6rem; }
.prof-meta-row {
    display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
    font-family:var(--font-mono); font-size:.62rem; letter-spacing:.08em; color:var(--ink-3);
}
.prof-meta-row span { display:flex; align-items:center; gap:.3rem; }
.prof-actions { display:flex; gap:.5rem; align-items:center; flex-shrink:0; }
@media(max-width:767px) { .prof-actions { margin-top:.25rem; } }

/* ═══ STATS BAR ═════════════════════════════════════════════════════════════ */
.prof-stats {
    display:flex; background:var(--bg-card);
    border-radius:var(--radius-lg); overflow:hidden; margin-bottom:1.5rem;
}
.prof-stat {
    flex:1; padding:1rem 1.25rem; border-right:1px solid var(--rule);
    text-align:center; transition:background .2s;
}
.prof-stat:hover { background:var(--bg-2); }
.prof-stat:last-child { border-right:none; }
.prof-stat__val { font-family:var(--font-display); font-size:1.5rem; font-weight:800; color:var(--emerald-lt); line-height:1; margin-bottom:.25rem; }
.prof-stat__label { font-family:var(--font-mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-4); }
@media(max-width:575px) { .prof-stats { flex-wrap:wrap; } .prof-stat { flex:1 1 50%; border-bottom:1px solid var(--rule); } }

/* ═══ TAB NAV ═══════════════════════════════════════════════════════════════ */
.prof-tabs { position:sticky; top:62px; z-index:100; padding:0 0 1.5rem; }
.prof-tabs__inner {
    display:flex; gap:.25rem; overflow-x:auto;
    background:var(--bg-2);
    border-radius:var(--radius-lg); padding:.4rem; scrollbar-width:none;
}
.prof-tabs__inner::-webkit-scrollbar { display:none; }
.prof-tab {
    display:inline-flex; align-items:center; gap:.4rem;
    font-family:var(--font-mono); font-size:.65rem; letter-spacing:.12em; text-transform:uppercase;
    text-decoration:none; color:var(--ink-3);
    padding:.65rem 1.1rem; border-radius:var(--radius);
    border:1px solid transparent; white-space:nowrap;
    transition:color .2s, background .2s, border-color .2s;
}
.prof-tab:hover { color:var(--ink-2); background:rgba(255,255,255,.04); }
.prof-tab.active { color:var(--emerald-lt); background:var(--emerald-dim); border-color:var(--emerald-rule); }
.prof-tab__count {
    background:var(--bg-3); border-radius:100px; padding:.05rem .4rem; font-size:.56rem;
}
.prof-tab.active .prof-tab__count { background:rgba(90,158,58,.25); color:var(--emerald-lt); }

/* ═══ PAGE BODY ═════════════════════════════════════════════════════════════ */
.prof-body { padding:0 0 5rem; }

/* Sidebar widgets */

.prof-bio { font-size:.85rem; color:var(--ink-2); line-height:1.8; margin-bottom:1rem; }
.prof-bio-section { padding: 1.25rem 0 .25rem; border-bottom: 1px solid var(--rule); margin-bottom: 1.5rem; }
.prof-bio-section .prof-bio { margin-bottom: .65rem; max-width: 720px; }
.prof-bio-links { display:flex; flex-wrap:wrap; gap:.85rem; }
.prof-bio-links a { font-size:.8rem; color:var(--ink-3); text-decoration:none; display:flex; align-items:center; gap:.4rem; transition:color .15s; }
.prof-bio-links a:hover { color:var(--emerald-lt); }
.prof-links { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.35rem; }
.prof-links a { display:flex; align-items:center; gap:.6rem; font-size:.8rem; color:var(--ink-3); text-decoration:none; transition:color .15s; }
.prof-links a:hover { color:var(--emerald-lt); }
.prof-links i { width:14px; text-align:center; color:var(--ink-4); flex-shrink:0; }

/* Level badge in sidebar */
.prof-level-badge {
    display:inline-flex; align-items:center; gap:.4rem;
    font-family:var(--font-mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
    padding:.25rem .75rem; border-radius:100px;
    border:1px solid var(--emerald-rule); color:var(--emerald-lt); background:var(--emerald-dim);
    margin-top:.75rem;
}

/* ── Post rows ── */
.ruled { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-4); display:flex; align-items:center; gap:1rem; white-space:nowrap; margin-bottom:1.75rem; }
.ruled::before,.ruled::after { content:''; flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--emerald),transparent); opacity:.35; }

.post-row {
    display:flex; gap:0; align-items:stretch;
    background:var(--bg-card); border-radius:var(--radius-lg);
    overflow:hidden; text-decoration:none; margin-bottom:.85rem;
    transition:transform .25s, box-shadow .25s;
}
.post-row:hover { transform:translateX(3px); box-shadow:0 8px 32px rgba(0,0,0,.3); }
.post-row::before { content:''; width:3px; flex-shrink:0; background:var(--emerald); }
.post-row__thumb { width:100px; flex-shrink:0; overflow:hidden; }
@media(max-width:575px) { .post-row__thumb { width:72px; } }
.post-row__thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s; }
.post-row:hover .post-row__thumb img { transform:scale(1.08); }
.post-row__body { flex:1; padding:.85rem 1rem; display:flex; flex-direction:column; min-width:0; }
.post-row__cat { font-family:var(--font-mono); font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--emerald-lt); display:flex; align-items:center; gap:.3rem; margin-bottom:.3rem; }
.post-row__title { font-family:var(--font-display); font-size:.88rem; font-weight:700; color:var(--ink); line-height:1.3; margin-bottom:.4rem; flex:1; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; transition:color .2s; }
.post-row:hover .post-row__title { color:var(--emerald-lt); }
.post-row__meta { font-family:var(--font-mono); font-size:.6rem; letter-spacing:.06em; color:var(--ink-4); display:flex; gap:.65rem; flex-wrap:wrap; }
.post-row__arrow { width:36px; display:flex; align-items:center; justify-content:center; color:var(--ink-4); font-size:.65rem; flex-shrink:0; transition:color .2s; }
.post-row:hover .post-row__arrow { color:var(--emerald-lt); }

/* ── Activity feed ── */
.activity-item { display:flex; gap:.85rem; align-items:flex-start; padding:.9rem 0; border-bottom:1px solid var(--rule); }
.activity-item:last-child { border-bottom:none; }
.activity-icon { width:34px; height:34px; border-radius:50%; flex-shrink:0; background:var(--bg); display:flex; align-items:center; justify-content:center; font-size:.7rem; color:var(--ink-3); }
.activity-icon--post     { color:var(--emerald-lt); background:var(--emerald-dim); }
.activity-icon--comment  { color:var(--teal); background:rgba(90,180,200,.08); }
.activity-icon--survey   { color:#c8a03a; background:rgba(200,160,58,.08); }
.activity-icon--species  { color:#7ec257; background:rgba(126,194,87,.08); }
.activity-icon--location { color:#5ab4c8; background:rgba(90,180,200,.08); }
.activity-icon--added    { color:var(--emerald-lt); }
.activity-icon--edited   { color:var(--teal); }
.activity-icon--deleted  { color:#c87a7a; }
.activity-body { flex:1; min-width:0; }
.activity-text { font-size:.82rem; color:var(--ink-2); line-height:1.6; margin-bottom:.2rem; }
.activity-text a { color:var(--emerald-lt); text-decoration:none; }
.activity-text a:hover { color:var(--emerald); }
.activity-time { font-family:var(--font-mono); font-size:.6rem; letter-spacing:.06em; color:var(--ink-4); }

/* ── Empty state ── */
.prof-empty { text-align:center; padding:4rem 2rem; background:var(--bg-card); border-radius:var(--radius-lg); }
.prof-empty__icon { font-size:2.5rem; color:var(--ink-4); margin-bottom:1rem; display:block; }
.prof-empty__title { font-size:1.1rem; font-weight:700; color:var(--ink-2); margin-bottom:.5rem; }
.prof-empty__text { font-size:.82rem; color:var(--ink-3); }

/* ── Breadcrumb ── */
.art-breadcrumb { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-4); margin-bottom:1.25rem; }
.art-breadcrumb a { color:var(--ink-3); text-decoration:none; transition:color .15s; }
.art-breadcrumb a:hover { color:var(--emerald-lt); }
.art-breadcrumb__sep { color:var(--ink-4); }

/* ── Buttons ── */
.btn-emerald { display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; padding:.6rem 1.4rem; border-radius:var(--radius); border:none; cursor:pointer; transition:background .2s, transform .15s; }
.btn-emerald:hover { transform:translateY(-1px); }
/* .btn-ghost was a page-local copy of the shared button with a neutral border
   in place of the warm one. Deleted — styles-x-buttons.css loads first via
   header-include.php, so the canonical button applies on this page now. */

/* ── Survey cards ── */
.survey-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.85rem; }
@media(max-width:767px) { .survey-grid { grid-template-columns:1fr; } }

.survey-card {
    background:var(--bg-card); border-radius:var(--radius-lg);
    overflow:hidden; text-decoration:none;
    transition:transform .25s, box-shadow .25s;
    display:flex; flex-direction:column;
}
.survey-card:hover { transform:translateY(-3px); box-shadow:0 12px 32px rgba(0,0,0,.35); }
.survey-card__img { position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--bg-3); }
.survey-card__img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s; }
.survey-card:hover .survey-card__img img { transform:scale(1.06); }
.survey-card__img-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--ink-4); font-size:2rem; }
.survey-card__status {
    position:absolute; top:.55rem; left:.55rem;
    font-family:var(--font-mono); font-size:.54rem; letter-spacing:.1em; text-transform:uppercase;
    padding:.18rem .55rem; border-radius:100px; backdrop-filter:blur(6px);
    border:1px solid; white-space:nowrap;
}
.survey-card__status--active    { background:rgba(90,158,58,.25); border-color:var(--emerald-rule); color:var(--emerald-lt); }
.survey-card__status--completed { background:rgba(90,180,200,.15); border-color:rgba(90,180,200,.35); color:var(--teal); }
.survey-card__body { padding:.85rem 1rem; flex:1; display:flex; flex-direction:column; }
.survey-card__title { font-family:var(--font-display); font-size:.9rem; font-weight:700; color:var(--ink); line-height:1.3; margin-bottom:.4rem; transition:color .2s; }
.survey-card:hover .survey-card__title { color:var(--emerald-lt); }
.survey-card__summary { font-size:.78rem; color:var(--ink-3); line-height:1.6; margin-bottom:.65rem; flex:1; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.survey-card__meta { font-family:var(--font-mono); font-size:.58rem; letter-spacing:.06em; color:var(--ink-4); display:flex; gap:.65rem; flex-wrap:wrap; margin-top:auto; }