/*
 * CuckSociety — Component kit
 * -------------------------------------------------------------------------
 * Brand components built entirely on tokens.css. Spacious, editorial, gold as
 * accent only. Scope everything under .cs-scope so the plugin never bleeds
 * into the surrounding theme or WP admin.
 */

.cs-scope {
    font-family: var(--cs-font-body);
    color: var(--cs-text-body);
    line-height: var(--cs-lh-body);
    background: var(--cs-bg);
}

.cs-scope h1, .cs-scope h2, .cs-scope h3, .cs-scope h4 {
    font-family: var(--cs-font-head);
    color: var(--cs-text);
    line-height: var(--cs-lh-tight);
    font-weight: 600;
    letter-spacing: 0.01em;
    margin: 0 0 var(--cs-space-4);
}

.cs-scope h1 { font-size: var(--cs-fs-3xl); }
.cs-scope h2 { font-size: var(--cs-fs-2xl); }
.cs-scope h3 { font-size: var(--cs-fs-xl); }

.cs-scope a { color: var(--cs-gold); text-decoration: none; transition: color var(--cs-transition); }
.cs-scope a:hover { color: var(--cs-gold-hover); }

.cs-container { max-width: var(--cs-container); margin: 0 auto; padding: 0 var(--cs-space-5); }

/* Buttons ---------------------------------------------------------------- */
.cs-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--cs-space-2);
    padding: var(--cs-space-3) var(--cs-space-5);
    border-radius: var(--cs-radius-pill);
    font-size: var(--cs-fs-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--cs-transition), color var(--cs-transition), border-color var(--cs-transition);
}
.cs-btn--primary { background: var(--cs-gold); color: var(--cs-on-gold); }
.cs-btn--primary:hover { background: var(--cs-gold-hover); }
.cs-btn--primary:active { background: var(--cs-gold-press); }
.cs-btn--ghost { background: transparent; color: var(--cs-gold); border-color: var(--cs-hairline); }
.cs-btn--ghost:hover { border-color: var(--cs-gold); color: var(--cs-gold-hover); }
/* Higher-specificity guards so a host theme's button styles cannot bleed in
   (e.g. turning the gold CTA a theme colour). */
.cs-scope .cs-btn { font-family: var(--cs-font-body); text-transform: none; box-shadow: none; }
.cs-scope .cs-btn--primary { background: var(--cs-gold); color: var(--cs-on-gold); border-color: transparent; }
.cs-scope .cs-btn--primary:hover { background: var(--cs-gold-hover); color: var(--cs-on-gold); }
.cs-scope .cs-btn--ghost { background: transparent; color: var(--cs-gold); }

/* Cards ------------------------------------------------------------------ */
.cs-card {
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-lg);
    padding: var(--cs-space-6);
    box-shadow: var(--cs-shadow-1);
}
.cs-card--hairline { border-color: var(--cs-hairline); }

/* Badges ----------------------------------------------------------------- */
.cs-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--cs-space-1);
    padding: 2px var(--cs-space-3);
    border-radius: var(--cs-radius-pill);
    font-size: var(--cs-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--cs-gold-soft);
    color: var(--cs-gold-hover);
    border: 1px solid var(--cs-hairline);
}
.cs-badge--verified { color: var(--cs-success); border-color: rgba(94, 142, 110, 0.4); background: rgba(94, 142, 110, 0.12); }
.cs-badge--premium  { color: var(--cs-gold); }

/* Chips (taxonomy) ------------------------------------------------------- */
.cs-chip {
    display: inline-block;
    padding: 4px var(--cs-space-3);
    margin: 0 var(--cs-space-2) var(--cs-space-2) 0;
    border-radius: var(--cs-radius-pill);
    background: var(--cs-surface-2);
    color: var(--cs-text-body);
    border: 1px solid var(--cs-border);
    font-size: var(--cs-fs-sm);
}

/* Profile card ----------------------------------------------------------- */
.cs-profile-card {
    background: var(--cs-surface);
    border: 1px solid var(--cs-hairline);
    border-radius: var(--cs-radius-lg);
    overflow: hidden;
    max-width: 320px;
}
.cs-profile-card__media {
    aspect-ratio: 4 / 5;
    background: linear-gradient(160deg, var(--cs-surface-2), var(--cs-bg-alt));
    border-bottom: 1px solid var(--cs-hairline);
}
.cs-profile-card__body { padding: var(--cs-space-5); }
.cs-profile-card__name { font-family: var(--cs-font-head); color: var(--cs-text); font-size: var(--cs-fs-lg); margin: 0; }
.cs-profile-card__meta { font-size: var(--cs-fs-sm); color: var(--cs-text-dim); margin: var(--cs-space-1) 0 var(--cs-space-4); }

/* Album tile ------------------------------------------------------------- */
.cs-album-tile {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--cs-radius-md);
    border: 1px solid var(--cs-hairline);
    background: linear-gradient(160deg, var(--cs-surface-2), var(--cs-bg-alt));
    overflow: hidden;
}
.cs-album-tile__lock {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--cs-gold); font-size: var(--cs-fs-lg);
    background: rgba(11, 11, 12, 0.55);
}

/* Forms ------------------------------------------------------------------ */
.cs-field { display: block; margin-bottom: var(--cs-space-4); }
/* Honour the [hidden] attribute even though .cs-field sets display:block. */
.cs-field[hidden] { display: none; }
.cs-label { display: block; font-size: var(--cs-fs-sm); color: var(--cs-text-body); margin-bottom: var(--cs-space-2); }
.cs-input, .cs-select, .cs-textarea {
    width: 100%;
    padding: var(--cs-space-3) var(--cs-space-4);
    background: var(--cs-bg-alt);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-md);
    color: var(--cs-text);
    font-size: var(--cs-fs-md);
    transition: border-color var(--cs-transition);
}
.cs-input:focus, .cs-select:focus, .cs-textarea:focus { outline: none; border-color: var(--cs-gold); }

/* Nav -------------------------------------------------------------------- */
.cs-nav { display: flex; align-items: center; gap: var(--cs-space-6); padding: var(--cs-space-4) 0; border-bottom: 1px solid var(--cs-hairline); }
.cs-nav__brand { font-family: var(--cs-font-head); color: var(--cs-text); font-size: var(--cs-fs-lg); }
.cs-nav__brand .cs-spade { color: var(--cs-gold); }

/* Modal ------------------------------------------------------------------ */
.cs-modal { background: var(--cs-surface); border: 1px solid var(--cs-hairline); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-2); padding: var(--cs-space-6); max-width: 480px; }

/* Sign-up wizard ---------------------------------------------------------- */
.cs-scope .cs-step[hidden] { display: none; }
.cs-wizard__progress { display: flex; gap: var(--cs-space-2); justify-content: center; margin-bottom: var(--cs-space-5); }
.cs-wizard__dot {
    width: 34px; height: 4px; border-radius: var(--cs-radius-pill);
    background: var(--cs-border); transition: background var(--cs-transition);
}
.cs-wizard__dot.is-active { background: var(--cs-gold); }
.cs-wizard__nav { display: flex; justify-content: space-between; align-items: center; gap: var(--cs-space-3); margin-top: var(--cs-space-5); }
.cs-step { animation: cs-fade var(--cs-transition) ease; }
@keyframes cs-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Type choice (Man / Woman / Couple) — large tappable cards. */
.cs-typechoice { display: flex; gap: var(--cs-space-3); flex-wrap: wrap; }
.cs-typechoice label {
    flex: 1 1 30%; min-width: 90px; cursor: pointer;
    border: 1px solid var(--cs-border); border-radius: var(--cs-radius-md);
    padding: var(--cs-space-5) var(--cs-space-3); text-align: center;
    color: var(--cs-text-body); transition: border-color var(--cs-transition), background var(--cs-transition);
}
.cs-typechoice label:hover { border-color: var(--cs-hairline); }
.cs-typechoice input { position: absolute; opacity: 0; pointer-events: none; }
.cs-typechoice input:checked + span { color: var(--cs-text); font-weight: 600; }
.cs-typechoice label:has(input:checked) { border-color: var(--cs-gold); background: var(--cs-gold-soft); }

/* Profile editor ---------------------------------------------------------- */
.cs-profile__head { margin-bottom: var(--cs-space-6); }
.cs-profile__head h1 { margin-bottom: var(--cs-space-1); }
.cs-profile__handle { color: var(--cs-gold); font-size: var(--cs-fs-lg); letter-spacing: .02em; margin: 0 0 var(--cs-space-4); }
.cs-profile__card { margin-bottom: var(--cs-space-5); padding: var(--cs-space-6) var(--cs-space-6) calc(var(--cs-space-6) + 4px); }
.cs-profile__card h2 { font-size: var(--cs-fs-xl); margin-bottom: var(--cs-space-2); }
.cs-profile__meterlabel { color: var(--cs-text-dim); font-size: var(--cs-fs-sm); margin: var(--cs-space-2) 0 0; }

.cs-meter { height: 6px; border-radius: var(--cs-radius-pill); background: var(--cs-surface-2); overflow: hidden; }
.cs-meter__fill { display: block; height: 100%; border-radius: var(--cs-radius-pill);
    background: linear-gradient(90deg, var(--cs-gold-press), var(--cs-gold), var(--cs-gold-hover)); transition: width var(--cs-transition); }

.cs-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cs-space-4); }
@media (max-width: 560px) { .cs-grid2 { grid-template-columns: 1fr; } }

.cs-hint { color: var(--cs-text-dim); font-size: var(--cs-fs-sm); line-height: 1.5; margin: var(--cs-space-2) 0 0; }
.cs-label--section { margin-top: var(--cs-space-4); margin-bottom: var(--cs-space-3); color: var(--cs-text); font-size: var(--cs-fs-md); }

/* Selectable gold toggle pills (identity / seeking). */
.cs-pillgroup { display: flex; flex-wrap: wrap; gap: var(--cs-space-2); margin-bottom: var(--cs-space-4); }
.cs-pillcheck {
    cursor: pointer; user-select: none;
    padding: 6px var(--cs-space-4);
    border: 1px solid var(--cs-border); border-radius: var(--cs-radius-pill);
    color: var(--cs-text-body); font-size: var(--cs-fs-sm);
    transition: border-color var(--cs-transition), background var(--cs-transition), color var(--cs-transition);
}
.cs-pillcheck:hover { border-color: var(--cs-hairline); color: var(--cs-text); }
.cs-pillcheck input { position: absolute; opacity: 0; width: 0; height: 0; }
.cs-pillcheck:has(input:checked) { border-color: var(--cs-gold); background: var(--cs-gold-soft); color: var(--cs-gold-hover); font-weight: 600; }

/* Attestation checkboxes. */
.cs-check { display: block; margin: var(--cs-space-2) 0; color: var(--cs-text-body); font-size: var(--cs-fs-sm); cursor: pointer; }
.cs-check input { margin-right: var(--cs-space-2); }

/* Combined upload declaration — one tasteful box covering all attestations. */
.cs-attest {
    display: flex; align-items: flex-start; gap: var(--cs-space-3);
    margin: var(--cs-space-4) 0;
    padding: var(--cs-space-4) var(--cs-space-5);
    border: 1px solid var(--cs-hairline); border-radius: var(--cs-radius-md);
    background: var(--cs-gold-soft);
    color: var(--cs-text-body); font-size: var(--cs-fs-sm); line-height: 1.5;
    cursor: pointer;
}
.cs-attest input { margin-top: 3px; accent-color: var(--cs-gold); width: 18px; height: 18px; flex: 0 0 auto; }

/* Hero band — very subtle starfield spark, per §3.5. */
.cs-hero {
    padding: var(--cs-space-8) 0;
    background:
        radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.20), transparent),
        radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,0.14), transparent),
        radial-gradient(1px 1px at 45% 80%, rgba(198,161,92,0.25), transparent),
        var(--cs-bg);
}