/**
 * agent-profile-nsk.css — W4-U1 CANDIDATE (2026-08-10)
 * The public agent profile (tenant profile / agent detail) + the use door,
 * rebuilt on the W4-U5 estate kit. App scope: every color/space/radius/type
 * decision resolves through --nsk-* (chained to the served --ns-* themes).
 *
 * Replaces on these pages: the 775-line inline Wave-16 style block in
 * public_profile.blade.php (local --ns-* redefinitions + Tailwind-zinc +
 * #eab308 near-miss golds — DRIFT-REPORT 2.3) and use-entry's inline third
 * palette (DRIFT-REPORT 2.8). Loads AFTER design-system.css + ui-kit.css.
 */

/* ================= shared ground ================= */
.nsk-prof, .nsk-use {
    background: var(--nsk-bg);
    color: var(--nsk-text);
    min-height: 100vh;
}
.nsk-prof-container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 var(--nsk-space-4);
}

/* ================= profile hero ================= */
.nsk-prof-hero {
    background: var(--nsk-band);
    border-bottom: 1px solid var(--nsk-bd-soft);
    padding: var(--nsk-space-8) 0;
}
.nsk-prof-hero-grid {
    display: flex;
    gap: var(--nsk-space-6);
    align-items: flex-start;
}
.nsk-prof-face {
    flex: 0 0 168px;
    width: 168px;
}
.nsk-prof-face .nsk-avatar-frame { aspect-ratio: 1 / 1; }
.nsk-prof-face-mono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: var(--nsk-font-display);
    font-size: var(--nsk-text-3xl);
    font-weight: 700;
    color: var(--nsk-accent);
    background: var(--nsk-accent-subtle);
}
.nsk-prof-id { flex: 1 1 auto; min-width: 0; }
.nsk-prof-id .nsk-kicker { margin-bottom: var(--nsk-space-2); }
.nsk-prof-name {
    font-family: var(--nsk-font-display);
    font-size: var(--nsk-text-2xl);
    font-weight: 700;
    line-height: var(--nsk-leading-tight);
    color: var(--nsk-ink);
    margin: 0 0 var(--nsk-space-2);
    overflow-wrap: anywhere;
}
.nsk-prof-tagline {
    font-size: var(--nsk-text-lg);
    line-height: var(--nsk-leading-normal);
    color: var(--nsk-text);
    margin: 0 0 var(--nsk-space-2);
    max-width: 46rem;
}
.nsk-prof-desc {
    font-size: var(--nsk-text-sm);
    line-height: var(--nsk-leading-normal);
    color: var(--nsk-sub);
    margin: 0 0 var(--nsk-space-4);
    max-width: 46rem;
}
.nsk-prof-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nsk-space-2);
    margin-bottom: var(--nsk-space-5);
}
.nsk-prof-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nsk-space-3);
}

/* ================= sections ================= */
.nsk-prof-section { padding: var(--nsk-space-8) 0; }
.nsk-prof-section + .nsk-prof-section { border-top: 1px solid var(--nsk-bd-soft); }
.nsk-prof-section .nsk-kicker { margin-bottom: var(--nsk-space-2); }
.nsk-prof-h2 {
    font-family: var(--nsk-font-display);
    font-size: var(--nsk-text-xl);
    font-weight: 700;
    line-height: var(--nsk-leading-tight);
    color: var(--nsk-ink);
    margin: 0 0 var(--nsk-space-2);
}
.nsk-prof-lead {
    font-size: var(--nsk-text-sm);
    color: var(--nsk-sub);
    margin: 0 0 var(--nsk-space-5);
    max-width: 46rem;
}

/* capability / channel cards */
.nsk-prof-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--nsk-space-4);
}
.nsk-prof-cap .nsk-card-title { display: flex; align-items: center; gap: var(--nsk-space-2); }
.nsk-prof-cap-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: var(--nsk-radius-md);
    background: var(--nsk-accent-subtle);
    color: var(--nsk-accent);
    font-size: var(--nsk-text-base);
}
.nsk-prof-cap p { font-size: var(--nsk-text-sm); color: var(--nsk-sub); margin: 0; }

/* try band */
.nsk-prof-try { background: var(--nsk-band); }
.nsk-prof-try-panel { max-width: 720px; }
.nsk-prof-try-head {
    display: flex;
    align-items: center;
    gap: var(--nsk-space-4);
    margin-bottom: var(--nsk-space-4);
}
.nsk-prof-try-head h2 {
    font-family: var(--nsk-font-display);
    font-size: var(--nsk-text-lg);
    font-weight: 700;
    color: var(--nsk-ink);
    margin: 0;
}
.nsk-prof-try-head p { font-size: var(--nsk-text-sm); color: var(--nsk-sub); margin: 2px 0 0; }
.nsk-prof-try-meta {
    font-size: var(--nsk-text-xs);
    color: var(--nsk-faint);
    margin: var(--nsk-space-3) 0 0;
}

/* expertise questions — real prompts, quiet buttons */
.nsk-prof-qs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--nsk-space-3);
}
.nsk-prof-q {
    display: flex;
    align-items: center;
    gap: var(--nsk-space-3);
    text-align: left;
    background: var(--nsk-surface);
    border: 1px solid var(--nsk-bd);
    border-radius: var(--nsk-radius-lg);
    padding: var(--nsk-space-3) var(--nsk-space-4);
    color: var(--nsk-text);
    font-size: var(--nsk-text-sm);
    cursor: pointer;
    transition: border-color var(--nsk-motion-fast), box-shadow var(--nsk-motion-fast);
}
.nsk-prof-q:hover { border-color: var(--nsk-bd-strong); box-shadow: var(--nsk-shadow-sm); }
.nsk-prof-q:focus-visible { outline: 2px solid var(--nsk-focus); outline-offset: 2px; }
.nsk-prof-q i { color: var(--nsk-accent); flex: 0 0 auto; }

/* stats — rendered only when non-zero */
.nsk-prof-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--nsk-space-4);
}
.nsk-prof-stat {
    background: var(--nsk-surface);
    border: 1px solid var(--nsk-bd);
    border-radius: var(--nsk-radius-lg);
    padding: var(--nsk-space-4);
    text-align: center;
}
.nsk-prof-stat-value {
    font-family: var(--nsk-font-display);
    font-size: var(--nsk-text-xl);
    font-weight: 700;
    color: var(--nsk-accent);
    margin: 0;
}
.nsk-prof-stat .nsk-kicker { margin: var(--nsk-space-1) 0 0; }

/* personality quote */
.nsk-prof-quote {
    border-left: 3px solid var(--nsk-accent);
    background: var(--nsk-surface);
    border-radius: 0 var(--nsk-radius-lg) var(--nsk-radius-lg) 0;
    padding: var(--nsk-space-4) var(--nsk-space-5);
    font-size: var(--nsk-text-base);
    line-height: var(--nsk-leading-relaxed);
    color: var(--nsk-sub);
    font-style: italic;
    max-width: 46rem;
}

/* final CTA band */
.nsk-prof-cta-band {
    background: var(--nsk-band);
    border-top: 1px solid var(--nsk-bd-soft);
    text-align: center;
    padding: var(--nsk-space-10) 0;
}
.nsk-prof-cta-band h2 {
    font-family: var(--nsk-font-display);
    font-size: var(--nsk-text-xl);
    font-weight: 700;
    color: var(--nsk-ink);
    margin: 0 0 var(--nsk-space-2);
}
.nsk-prof-cta-band p {
    font-size: var(--nsk-text-sm);
    color: var(--nsk-sub);
    margin: 0 0 var(--nsk-space-5);
}

/* footer links */
.nsk-prof-footer {
    background: var(--nsk-bg);
    border-top: 1px solid var(--nsk-bd-soft);
    padding: var(--nsk-space-5) 0;
    text-align: center;
}
.nsk-prof-footer a {
    color: var(--nsk-sub);
    text-decoration: none;
    margin: 0 var(--nsk-space-3);
    font-size: var(--nsk-text-sm);
}
.nsk-prof-footer a:hover { color: var(--nsk-accent); }
.nsk-prof-footer .nsk-kicker { display: block; margin-top: var(--nsk-space-3); }

/* ================= use door ================= */
.nsk-use { padding: var(--nsk-space-8) var(--nsk-space-4) var(--nsk-space-10); }
.nsk-use-inner { max-width: 960px; margin: 0 auto; }
.nsk-use-crumb {
    display: flex;
    gap: var(--nsk-space-2);
    font-size: var(--nsk-text-sm);
    margin-bottom: var(--nsk-space-6);
    color: var(--nsk-faint);
}
.nsk-use-crumb a { color: var(--nsk-accent); text-decoration: none; }
.nsk-use-crumb a:hover { text-decoration: underline; }
.nsk-use-hero {
    display: flex;
    gap: var(--nsk-space-5);
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: var(--nsk-space-6);
}
.nsk-use-name {
    font-family: var(--nsk-font-display);
    font-size: var(--nsk-text-2xl);
    font-weight: 700;
    line-height: var(--nsk-leading-tight);
    color: var(--nsk-ink);
    margin: 0 0 var(--nsk-space-1);
}
.nsk-use-role { color: var(--nsk-accent); font-weight: 600; margin: 0 0 var(--nsk-space-2); }
.nsk-use-summary { color: var(--nsk-sub); font-size: var(--nsk-text-sm); margin: 0; max-width: 40rem; }
.nsk-use-doors {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: var(--nsk-space-4);
    margin-bottom: var(--nsk-space-6);
}
.nsk-use-doors .nsk-card-body p { font-size: var(--nsk-text-sm); color: var(--nsk-sub); margin: 0; }
.nsk-use-snippet { margin-bottom: var(--nsk-space-6); overflow-x: auto; }
.nsk-use-snippet p { font-size: var(--nsk-text-sm); color: var(--nsk-sub); }
.nsk-use-snippet pre {
    background: var(--nsk-inset);
    border: 1px solid var(--nsk-bd-soft);
    border-radius: var(--nsk-radius-md);
    padding: var(--nsk-space-4);
    font-family: var(--nsk-font-mono);
    font-size: var(--nsk-text-xs);
    line-height: 1.6;
    color: var(--nsk-text);
    overflow-x: auto;
    margin: 0;
}
/* A11y (SC 1.4.3) — this footer is a .nsk-kicker, and the kicker's
 * var(--nsk-faint) resolves to the estate token --ns-text-muted #6b7280, which
 * is 2.85:1 on the #2d2d2d band this door renders on. The manifest line is
 * 11px/600 body text, so it needs 4.5:1, not the 3:1 large-text bar.
 * #6b7280 on #2d2d2d = 2.85:1 -> #9399a3 = 4.80:1 (harness/wcag.mjs).
 * Scoped to this footer rather than to --nsk-faint itself: that token is
 * shared by the marketplace, the profile kit and mission control, and is worth
 * one deliberate estate-wide pass rather than a side effect of this one.
 * The nested <code> keeps var(--nsk-sub) #a0a0a0 = 5.27:1, already passing. */
.nsk-use-manifest {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nsk-space-2);
    border-top: 1px solid var(--nsk-bd-soft);
    padding-top: var(--nsk-space-4);
    text-transform: none;
    letter-spacing: 0.04em;
    color: #9399a3;
}
.nsk-use-manifest code { color: var(--nsk-sub); font-family: var(--nsk-font-mono); }

/* monogram shared with the browse card */
.nsk-mp-mono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--nsk-font-display);
    font-weight: 700;
    font-size: var(--nsk-text-lg);
    color: var(--nsk-accent);
    background: var(--nsk-accent-subtle);
}

/* ================= 375-first ================= */
@media (max-width: 639.98px) {
    .nsk-prof-hero { padding: var(--nsk-space-6) 0; }
    .nsk-prof-hero-grid { flex-direction: column; }
    .nsk-prof-face { flex-basis: auto; width: 128px; }
    .nsk-prof-section { padding: var(--nsk-space-6) 0; }
    .nsk-prof-actions .nsk-cta { flex: 1 1 100%; }
    .nsk-use { padding: var(--nsk-space-6) var(--nsk-space-4) var(--nsk-space-8); }
    .nsk-use-name { font-size: var(--nsk-text-xl); }
}