/* ============================================================
   Profile Page — Styles
   Note: Breadcrumb styles are in styles.css (shared across pages)
   ============================================================ */


/* ============================================================
   Profile Header Card
   ============================================================ */

.profile-header-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.5rem;
}

/*
 * Banner redesign: replaced gradient that caused dark-on-dark contrast issues.
 * The old layout used margin-top: -48px to overlap the avatar onto the banner,
 * which pulled the researcher name text into or near the dark gradient area,
 * making black text (#0f172a) essentially invisible on the dark blue background.
 *
 * New approach: the banner is a solid accent stripe used purely for visual
 * decoration. The profile identity block is separated cleanly below it, with
 * the avatar bridging the two zones via negative margin. All identity text
 * now sits on the white card surface — dark text on white, high contrast.
 */
.profile-banner {
    height: 96px;
    background: linear-gradient(135deg, var(--brand-navy) 0%, #1e3a5f 60%, #2563eb 100%);
    flex-shrink: 0;
}

.profile-header-body {
    padding: 0 2rem 2rem;
    /* Pull the avatar up to straddle the banner/body boundary */
    margin-top: -40px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Avatar + identity row */
.profile-header-content {
    display: flex;
    gap: 1.5rem;
    /* align-items: flex-start so the identity text block starts below the
       avatar top edge — meaning name/title sit on the white surface area,
       never over the dark banner */
    align-items: flex-start;
}

.profile-avatar-large {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.25rem;
    font-weight: 700;
    flex-shrink: 0;
    /* White ring creates clear visual separation from the banner */
    border: 4px solid var(--surface);
    box-shadow: var(--shadow-md);
    text-transform: uppercase;
    user-select: none;
    letter-spacing: -0.02em;
    /* Keep the avatar itself straddling banner/body */
    position: relative;
    z-index: 1;
}

.profile-avatar-large.verified-avatar {
    background: var(--verified);
}

/* When .profile-avatar-large is an <img> tag (profile photo), ensure it
   renders as a circle with the same dimensions and border as the div version. */
img.profile-avatar-large {
    object-fit: cover;
    /* Suppress the default 'display: inline' for img elements */
    display: block;
    /* Reset text-related styles that don't apply to images */
    font-size: 0;
    /* Ensure background doesn't show through if image fails to load */
    background: var(--border);
}

/*
 * Identity block: add top padding so name/title/affiliation text is pushed
 * fully below the banner boundary (banner is 96px tall, avatar starts at
 * margin-top: -40px, so the banner-to-body transition is at ~56px from the
 * top of .profile-header-body). Padding ensures text never overlaps the
 * dark region.
 */
.profile-identity {
    flex: 1;
    min-width: 0;
    /* Push the entire text block down so it sits on the white surface */
    padding-top: 48px;
}

.profile-name {
    font-size: 1.75rem;
    font-weight: 700;
    /* Explicitly dark text — high contrast against white card surface */
    color: var(--text);
    margin: 0 0 0.3rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.profile-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    /* Default (tier-data): white text on green — high contrast badge */
    color: #fff;
    background: var(--verified);
    padding: 0.1875rem 0.5625rem;
    border-radius: 100px;
    letter-spacing: 0;
    vertical-align: middle;
}

.profile-verified-badge svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.profile-title {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0;
    font-weight: 500;
}

.profile-affiliation {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin: 0.2rem 0 0;
    font-weight: 500;
}

.profile-department {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0.2rem 0 0;
    font-weight: 400;
}

.profile-career-stage {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.profile-email {
    font-size: 0.875rem;
    margin: 0.2rem 0 0;
}

.profile-email-link {
    color: var(--primary);
    text-decoration: none;
}

.profile-email-link:hover {
    text-decoration: underline;
}

.profile-meta {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin: 0.25rem 0 0;
}

.profile-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.625rem;
}

.profile-active-status {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 10px;
    display: inline-block;
    margin-top: 6px;
}
.profile-active-status.active-recent   { background: #d1fae5; color: #065f46; }
.profile-active-status.active-moderate { background: #dbeafe; color: #1e40af; }
.profile-active-status.active-stale    { background: #fef3c7; color: #92400e; }
.profile-active-status.active-old      { background: #f3f4f6; color: #6b7280; }

.verification-context {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0.125rem 0 0.375rem;
    font-style: italic;
}

@media (max-width: 768px) {
    .verification-context {
        display: none;
    }
}


/* ============================================================
   Expertise Tags (profile)
   ============================================================ */

.profile-expertise {
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}

.profile-section-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin: 0 0 0.625rem;
}

.expertise-tags-large {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.expertise-tag-large {
    background: var(--primary-subtle);
    color: var(--primary);
    padding: 0.3125rem 0.75rem;
    border-radius: 100px;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}

a.expertise-tag-large:hover {
    background: var(--primary);
    color: #fff;
}


/* ============================================================
   Links (profile)
   ============================================================ */

.profile-links-section {
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}

.profile-links-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.profile-external-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--primary);
    text-decoration: none;
    padding: 0.3125rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: all var(--duration) var(--ease);
    background: var(--surface);
}

.profile-external-link:hover {
    background: var(--primary-subtle);
    border-color: var(--primary);
}

.profile-external-link svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}


/* ============================================================
   Profile Actions
   ============================================================ */

.profile-actions {
    display: flex;
    gap: 0.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

.profile-actions .btn {
    min-width: 160px;
}


/* ============================================================
   Profile Content Card (narrative, topics, metrics)
   ============================================================ */

.profile-content-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: 2rem;
}

.profile-content-html {
    line-height: 1.75;
    color: var(--text);
    font-size: 0.9375rem;
}

.profile-content-html h2 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text);
    margin: 2rem 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.profile-content-html h2:first-child {
    margin-top: 0;
}

.profile-content-html h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin: 1.5rem 0 0.5rem;
}

.profile-content-html p {
    margin-bottom: 0.875rem;
    color: var(--text-secondary);
}

.profile-content-html ul,
.profile-content-html ol {
    margin-left: 1.25rem;
    margin-bottom: 1rem;
    color: var(--text-secondary);
}

.profile-content-html li {
    margin-bottom: 0.375rem;
    line-height: 1.6;
}

.profile-content-html strong {
    color: var(--text);
    font-weight: 600;
}

.profile-content-html a {
    color: var(--primary);
    text-decoration: none;
}

.profile-content-html a:hover {
    text-decoration: underline;
}


/* ============================================================
   Introduction Modal (profile-specific overrides)
   ============================================================ */

.modal-intro-text {
    margin-bottom: 1.25rem;
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 0.875rem;
}

.modal-intro-text strong {
    color: var(--text);
}


/* ============================================================
   Responsive — Profile (Tablet, max-width: 768px)
   ============================================================ */

@media (max-width: 768px) {
    .profile-banner {
        height: 72px;
    }

    .profile-header-body {
        padding: 0 1.25rem 1.5rem;
        margin-top: -32px;
    }

    .profile-header-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .profile-avatar-large {
        width: 80px;
        height: 80px;
        font-size: 1.875rem;
    }

    /*
     * On mobile with centered layout, the identity block no longer sits
     * to the right of the avatar -- it stacks below it. The avatar itself
     * provides the visual gap from the banner, so we reduce top padding
     * to just give a small breathing room below the avatar.
     */
    .profile-identity {
        padding-top: 0.5rem;
        padding-bottom: 0;
    }

    .profile-name {
        font-size: 1.375rem;
        justify-content: center;
    }

    .profile-verified-badge {
        font-size: 0.625rem;
    }

    .profile-designations-row {
        justify-content: center;
    }

    .profile-title {
        font-size: 0.9375rem;
    }

    .profile-affiliation {
        font-size: 0.875rem;
    }

    .profile-metrics {
        justify-content: center;
    }

    .expertise-tags-large {
        justify-content: center;
    }

    .profile-links-row {
        justify-content: center;
        gap: 0.5rem;
    }

    .profile-external-link {
        font-size: 0.75rem;
        padding: 0.375rem 0.625rem;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .profile-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .profile-actions .btn {
        width: 100%;
        min-width: 0;
        min-height: 44px;
    }

    .claim-prompt {
        text-align: center;
    }

    .btn-ghost-danger {
        margin-left: 0;
        width: 100%;
        min-height: 44px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .profile-content-card {
        padding: 1.5rem 1.25rem;
    }

    /* Profile narrative text */
    .profile-content-html {
        font-size: 0.875rem;
    }

    .profile-content-html h2 {
        font-size: 1rem;
    }

    .profile-content-html h3 {
        font-size: 0.9375rem;
    }

    /* Publications list */
    .publication-item {
        gap: 0.25rem 0.375rem;
    }

    .pub-title {
        font-size: 0.8125rem;
        /* Let title take full width and wrap below year/DOI on mobile */
        flex: 1 1 100%;
    }

    .pub-year {
        font-size: 0.75rem;
    }

    .pub-doi {
        font-size: 0.6875rem;
        min-height: 32px;
        display: inline-flex;
        align-items: center;
    }

    /* Grants */
    .grant-item {
        gap: 0.25rem 0.5rem;
    }

    .grant-title {
        font-size: 0.8125rem;
        flex: 1 1 100%;
    }

    /* Co-authors */
    .coauthors-grid {
        justify-content: center;
    }

    .coauthor-chip {
        font-size: 0.75rem;
    }

    /* Modal */
    .modal-content {
        width: 95%;
        max-height: 85vh;
    }

    .modal-header,
    .modal-body {
        padding: 1.25rem;
    }

    .form-actions {
        flex-direction: column;
    }

    .form-actions .btn {
        width: 100%;
        min-height: 44px;
    }

    /* Profile section headings */
    .profile-section h2 {
        font-size: 0.9375rem;
    }
}

/* ============================================================
   Responsive — Profile (Phone, max-width: 480px)
   ============================================================ */

@media (max-width: 480px) {
    .profile-banner {
        height: 56px;
    }

    .profile-header-body {
        padding: 0 1rem 1.25rem;
        margin-top: -28px;
        gap: 1rem;
    }

    .profile-avatar-large {
        width: 64px;
        height: 64px;
        font-size: 1.5rem;
        border-width: 3px;
    }

    .profile-name {
        font-size: 1.125rem;
    }

    .profile-title {
        font-size: 0.875rem;
    }

    .profile-affiliation {
        font-size: 0.8125rem;
    }

    .profile-department {
        font-size: 0.8125rem;
    }

    .profile-email {
        font-size: 0.8125rem;
    }

    .metric-badge {
        font-size: 0.6875rem;
        padding: 0.125rem 0.375rem;
    }

    .expertise-tag-large {
        font-size: 0.75rem;
        padding: 0.25rem 0.625rem;
    }

    .profile-content-card {
        padding: 1.25rem 1rem;
    }

    .profile-content-html {
        font-size: 0.8125rem;
        line-height: 1.65;
    }

    /* Federal grants on phone */
    .federal-grant-card {
        padding: 0.75rem;
    }

    .federal-grant-header {
        gap: 0.375rem;
    }

    .federal-grant-agency-badge {
        font-size: 0.625rem;
    }

    .federal-grant-title {
        font-size: 0.8125rem;
    }

    .federal-grant-meta {
        gap: 0.5rem;
    }

    .federal-grant-amount {
        font-size: 0.6875rem;
    }

    /* Modal on small phone */
    .modal-content {
        width: 98%;
        margin: 0.5rem;
        max-height: 90vh;
    }

    .modal-header {
        padding: 1rem;
    }

    .modal-body {
        padding: 1rem;
    }

    .modal-header h2 {
        font-size: 1rem;
    }

    /* Claim card on small phone */
    .claim-card {
        padding: 1.5rem 1.25rem;
    }

    .claim-card h1 {
        font-size: 1.25rem;
    }

    .claim-email-input {
        min-height: 44px;
    }
}


/* ============================================================
   Verification Tier Badges
   ============================================================ */

/* Tier 3 — Institution Verified: gold background */
.profile-verified-badge.tier-institution {
    background: #b7791f;
    color: #fff;
}

/* Tier 2 — Self-Claimed / Researcher Verified: blue background (future use) */
.profile-verified-badge.tier-claimed {
    background: #2563eb;
    color: #fff;
}

/* Tier 1 — Data Verified: keep default green (var(--verified)) */
.profile-verified-badge.tier-data {
    background: var(--verified);
    color: #fff;
}

/* ============================================================
   Designation Badges — System 2
   Stacks alongside verification badge, any combination allowed
   ============================================================ */

/* Shared pill style for all designation badges on profile pages */
.profile-designation-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 100px;
    color: #fff;
    letter-spacing: 0;
}

/* ARA Academy — violet (#7c3aed, 5.8:1 contrast, colorblind-safe) */
.designation-ara-academy    { background: #7c3aed; }

/* Federal Grant PI — deep blue (#0369a1, 6.1:1 contrast) */
.designation-federal-grant-pi { background: #0369a1; }

/* High Impact researcher — dark amber (#92400e, 7.4:1 contrast) */
.designation-high-impact    { background: #92400e; }

/* Emeritus — slate gray (#64748b, 4.6:1 contrast) */
.designation-emeritus       { background: #64748b; }

/* Container row for stacking designation badges */
.profile-designations-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.375rem;
    align-items: center;
}

/* Search card badges — institution tier gold variant */
.verified-badge.tier-institution {
    background: #b7791f;
    color: #fff;
    padding: 0.125rem 0.5rem;
    border-radius: 100px;
    font-size: 0.6875rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.25rem;
}


/* ============================================================
   Profile Sections (publications, grants, co-authors)
   ============================================================ */

.profile-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.profile-section h2 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 1rem;
    padding-bottom: 0;
    border-bottom: none;
}

/* Publications */

.publications-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.publication-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.375rem 0.5rem;
    line-height: 1.5;
}

.pub-title {
    font-size: 0.875rem;
    color: var(--text-secondary);
    flex: 1 1 0;
    min-width: 0;
}

.pub-year {
    font-size: 0.8125rem;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.pub-doi {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--primary);
    text-decoration: none;
    padding: 0.125rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    transition: all var(--duration) var(--ease);
    white-space: nowrap;
    flex-shrink: 0;
}

.pub-doi:hover {
    background: var(--primary-subtle);
    border-color: var(--primary);
}

/* Research Interests */

.research-interests-text {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}

/* Grants */

.grants-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.grant-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.625rem;
}

.grant-title {
    font-size: 0.875rem;
    color: var(--text-secondary);
    flex: 1 1 0;
    min-width: 0;
}

.grant-agency {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.grant-role {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--primary);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Collaboration Network */

.collab-stats-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
    flex-wrap: wrap;
}

.collab-stat {
    font-weight: 600;
    color: var(--text);
}

.collab-stat-sep {
    color: var(--border);
    font-weight: 300;
}

.collab-map-container {
    width: 100%;
    height: 320px;
    border-radius: var(--radius-lg, 0.75rem);
    border: 1px solid var(--border);
    margin: 0.75rem 0 1rem;
    z-index: 0;
}

.collab-subheading {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
    margin: 1rem 0 0.5rem;
}

.collab-badge {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    margin-top: 0.25rem;
    width: fit-content;
}

.collab-badge-internal {
    background: #dbeafe;
    color: #1e40af;
}

.collaborator-external {
    cursor: default;
}

.collaborator-external:hover {
    border-color: var(--border);
    box-shadow: none;
}

/* Expandable collaborator cards */
.collaborator-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
}

.collaborator-header[role="button"] {
    cursor: pointer;
}

.collaborator-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    flex: 1;
}

.collaborator-actions {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
}

.collab-expand-icon {
    font-size: 0.75rem;
    color: var(--text-muted);
    transition: transform 0.2s ease;
    display: inline-block;
}

.collab-pubs-panel {
    border-top: 1px solid var(--border);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
}

.collab-pubs-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.collab-pubs-list li {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
}

.collab-pub-title {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.collab-pub-meta {
    font-size: 0.6875rem;
    color: var(--text-muted);
}

.collab-pubs-note {
    font-size: 0.6875rem;
    color: var(--text-muted);
    font-style: italic;
    margin: 0.375rem 0 0;
}

.collab-profile-link {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--primary);
    text-decoration: none;
    margin-top: 0.375rem;
}

.collab-profile-link:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .collab-map-container {
        height: 240px;
    }
}

/* Collaborators (computed from shared publications) */

.collaborators-grid,
.similar-researchers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.75rem;
}

.collaborator-card,
.similar-researcher-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.875rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 0.75rem);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.collaborator-card:hover,
.similar-researcher-card:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.collaborator-name,
.similar-name {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text);
}

.collaborator-institution,
.similar-institution {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.collaborator-count {
    font-size: 0.75rem;
    color: var(--primary);
    font-weight: 500;
    margin-top: 0.25rem;
}

.similar-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

.similar-topic-chip {
    font-size: 0.6875rem;
    padding: 0.125rem 0.5rem;
    background: var(--primary-subtle, #eff6ff);
    color: var(--primary);
    border-radius: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.similar-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.375rem;
}

.similar-match-label {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 100px;
    white-space: nowrap;
}

.similar-match-label.match-strong {
    background: #d1fae5;
    color: #065f46;
}

.similar-match-label.match-good {
    background: #dbeafe;
    color: #1e40af;
}

.similar-match-label.match-related {
    background: #f1f5f9;
    color: #475569;
}

.similar-topic-count {
    font-size: 0.6875rem;
    color: var(--text-tertiary, #64748b);
}

.section-subtitle {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-top: -0.5rem;
    margin-bottom: 1rem;
}

/* Co-authors (legacy UAMS data) */

.coauthors-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.coauthor-chip {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    background: var(--surface-dim, #f1f5f9);
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    border: 1px solid var(--border);
    white-space: nowrap;
}


/* ============================================================
   Federal Grants (NIH/NSF data)
   ============================================================ */

/* Section heading with count badge and total */
.profile-section h2 .federal-grants-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.375rem;
    height: 1.375rem;
    padding: 0 0.375rem;
    border-radius: 100px;
    background: var(--primary-subtle);
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 0.375rem;
    vertical-align: middle;
}

.profile-section h2 .federal-grants-total {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-left: 0.5rem;
    vertical-align: middle;
}

.federal-grants-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.federal-grant-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    transition: border-color var(--duration) var(--ease);
}

.federal-grant-card:hover {
    border-color: var(--border-strong);
}

.federal-grant-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.federal-grant-agency-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.125rem 0.5rem;
    border-radius: 100px;
    color: #fff;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.federal-grant-agency-badge.agency-nih {
    background: #0369a1;
}

.federal-grant-agency-badge.agency-nsf {
    background: #7c3aed;
}

.federal-grant-role {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 0.0625rem 0.5rem;
    border-radius: 100px;
    white-space: nowrap;
}

.federal-grant-dates {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    margin-left: auto;
}

.federal-grant-title {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.federal-grant-title a {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--duration) var(--ease);
}

.federal-grant-title a:hover {
    text-decoration: underline;
    color: var(--primary-hover);
}

.federal-grant-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.federal-grant-institute {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.federal-grant-amount {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--verified);
    background: var(--verified-bg);
    padding: 0.0625rem 0.5rem;
    border-radius: 100px;
}

.federal-grant-code {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 0.0625rem 0.375rem;
    border-radius: var(--radius-sm);
    font-family: monospace;
}

/* Federal grants responsive */
@media (max-width: 768px) {
    .federal-grant-card {
        padding: 0.875rem 1rem;
    }

    .federal-grant-dates {
        margin-left: 0;
        width: 100%;
    }

    .federal-grant-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .federal-grant-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.375rem;
    }
}


/* ============================================================
   "Is this your profile?" claim prompt
   ============================================================ */

.claim-prompt {
    width: 100%;
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
    text-align: left;
    line-height: 1.5;
}

.claim-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--duration) var(--ease);
}

.claim-link:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}


/* ============================================================
   Report an Error button
   ============================================================ */

.btn-ghost-danger {
    background: transparent;
    border: 1px solid #fca5a5;
    color: #dc2626;
    font-size: 0.8125rem;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
    margin-left: auto;
}
.btn-ghost-danger:hover {
    background: #fef2f2;
    border-color: #dc2626;
}


/* ============================================================
   Flag modal sizing
   ============================================================ */

.modal-content-sm {
    max-width: 540px;
}


/* ============================================================
   Flag modal — intro text
   ============================================================ */

.flag-intro-text {
    margin-bottom: 1.25rem;
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 0.875rem;
}

.flag-intro-text strong {
    color: var(--text);
}


/* ============================================================
   Flag modal — fieldset and legend
   ============================================================ */

.flag-fieldset {
    border: none;
    padding: 0;
    margin: 0 0 1.25rem;
}

.flag-legend {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--text);
    margin-bottom: 0.75rem;
    display: block;
    width: 100%;
}

.flag-required {
    color: var(--error);
}


/* ============================================================
   Flag modal — radio option cards
   ============================================================ */

.flag-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.flag-option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color var(--duration) var(--ease),
                background var(--duration) var(--ease);
    line-height: 1.4;
}

.flag-option:hover {
    border-color: var(--border-strong);
    background: var(--bg);
}

/* Highlight the selected option (CSS :has + JS class fallback) */
.flag-option:has(input:checked),
.flag-option.flag-option-selected {
    border-color: var(--primary);
    background: var(--primary-subtle);
}

.flag-option input[type="radio"] {
    /* Fixed size so it never collapses */
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    flex-shrink: 0;
    /* Vertically center with the title line */
    margin-top: 2px;
    accent-color: var(--primary);
    cursor: pointer;
}

.flag-option-content {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
    min-width: 0;
}

.flag-option-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
}

.flag-option-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
}


/* ============================================================
   Flag modal — contact section
   ============================================================ */

.flag-contact-section {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}

.flag-contact-heading {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.125rem;
}

.flag-contact-note {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.flag-contact-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.flag-contact-fields .form-group {
    margin-bottom: 0;
}

.optional-label {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 0.8125rem;
}

/* Flag contact fields stack on mobile */
@media (max-width: 480px) {
    .flag-contact-fields {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   Claim flow pages
   ============================================================ */

.claim-main {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.claim-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    max-width: 480px;
    width: 100%;
    text-align: center;
}

.claim-card h1 {
    font-size: 1.5rem;
    color: var(--text);
    margin-bottom: 0.75rem;
}

.claim-sub {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.claim-form {
    text-align: left;
    margin-top: 1.5rem;
}

.claim-email-input {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 1rem;
    font-family: var(--font);
    box-sizing: border-box;
}

.claim-email-input:focus {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.claim-error {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #dc2626;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    font-size: 0.875rem;
    margin-bottom: 1rem;
    text-align: left;
}

.claim-success-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.profile-ai-label {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-muted);
    margin-left: 0.5rem;
    vertical-align: middle;
}


/* ============================================================
   ARA Academy Section
   ============================================================ */

.ara-academy-section {
    /* Subtle left accent bar in ARA purple */
    border-left: 3px solid #7c3aed;
    padding-left: 1.25rem;
}

/* Heading row: badge + program descriptor */
.ara-academy-section h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ara-academy-heading-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.125rem 0.5rem;
    border-radius: 100px;
    background: #7c3aed;
    color: #fff;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ara-academy-program {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
}

/* Bio text block */
.ara-academy-bio {
    margin-top: 0.75rem;
}

.ara-academy-bio p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}

/* Subsections: Policy Impact, Growth Areas */
.ara-academy-subsection {
    margin-top: 1rem;
}

.ara-academy-subsection h3 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 0.375rem;
}

.ara-academy-subsection p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0;
}

/* Resources grid */
.ara-academy-resources {
    margin-top: 1.25rem;
}

.ara-academy-resources-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin: 0 0 0.625rem;
}

.ara-academy-resources-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

/* Individual resource card — styled similarly to federal-grant-card */
.ara-resource-card {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    color: #7c3aed;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: all var(--duration) var(--ease);
    white-space: nowrap;
}

.ara-resource-card:hover {
    background: #f5f3ff;
    border-color: #7c3aed;
    box-shadow: var(--shadow-xs);
}

.ara-resource-card svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #7c3aed;
}

.ara-resource-label {
    font-weight: 600;
}

.ara-resource-type {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 0.0625rem 0.375rem;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* ARA Profile link — slightly different accent */
.ara-resource-card.ara-resource-profile {
    border-color: #7c3aed;
    background: #f5f3ff;
}

.ara-resource-card.ara-resource-profile:hover {
    background: #ede9fe;
}

/* ARA Academy responsive */
@media (max-width: 768px) {
    .ara-academy-section {
        padding-left: 1rem;
    }

    .ara-academy-resources-grid {
        flex-direction: column;
    }

    .ara-resource-card {
        width: 100%;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .ara-academy-bio p {
        font-size: 0.8125rem;
    }

    .ara-academy-subsection p {
        font-size: 0.8125rem;
    }
}


/* ============================================================================
   Sparklines & Growth Indicators
   ============================================================================ */

.sparkline {
    display: inline-block;
    width: 60px;
    height: 16px;
    vertical-align: middle;
    margin-left: 0.25rem;
}

.metric-growth {
    font-size: 0.625rem;
    font-weight: 500;
    margin-left: 0.25rem;
    vertical-align: middle;
    color: var(--text-muted, #6b7280);
}

.metric-growth.positive {
    color: #22c55e;
}

.metric-growth.negative {
    color: #ef4444;
}