/*
 * Public profile page — view_profile.php only, via extra_css.
 *
 * WHAT CHANGED ON THE WAY OUT OF THE PAGE
 *
 * body { background-color: #f4f7f6 } is gone. css/styles.css line 400 already sets
 * body's background to var(--background-color), #F5F5F5, and #f4f7f6 measures 1.01:1
 * against it. The rule existed only to override the global with a colour no eye can
 * separate from it. css/view-project.css carries the same rule for the same reason and
 * it goes in the same commit.
 *
 * .skill-tag was #e0eafc/#3c5ac9 at 4.96:1. It is now #e7e5ff/#4d41b3 at 6.26:1, which
 * is not a new colour: three stylesheets already agree on it - sections/dashboard_shared
 * .css for .db/.pn/.pv-skill-tag, css/featured-projects.css for .fp-skill-tag, and
 * css/view-project.css for this very class. Five definitions of one chip existed and the
 * only two that disagreed were both inline <style> blocks. The third outlier is
 * api/admin/admin_skills_viewer.php, still inline, still unseen.
 *
 * WHICH LITERALS BECAME TOKENS, AND THE RULE USED
 *
 * A literal becomes a token when the token is within 1.05:1 of it, which is below what
 * anyone can see: #fff to --white, #666 to --gray, #eee to --border-subtle. #f9f9f9 and
 * #555 have no token within that distance and are left alone rather than nudged into
 * a visible change while moving a file.
 *
 * The box-shadow is not a colour and does not get that rule. The style guide names four
 * shadows and this page used none of them; 0 4px 15px rgba(0,0,0,.08) is now
 * --shadow-md, the ramp's card default.
 *
 * WHAT WAS NOT DONE
 *
 * This page and view_project.php share five selectors and are plainly one design written
 * twice. Merging them is a consolidation with its own argument to make, and it is not
 * made by moving a stylesheet.
 */

.profile-view-container {
    max-width: 800px;
    margin: 120px auto 40px;
    padding: 20px;
    background: var(--white);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
}

.profile-header h1 {
    font-size: 2.5rem;
    margin-bottom: 5px;
}

.profile-header .username {
    font-size: 1.25rem;
    color: var(--gray);
    margin-bottom: 25px;
}

.profile-section {
    margin-bottom: 25px;
}

.profile-section h2 {
    font-size: 1.5rem;
    border-bottom: 2px solid var(--border-subtle);
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.profile-section p {
    font-size: 1rem;
    line-height: 1.7;
}

.profile-section a {
    color: var(--brand-text);
}

.skills-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.skill-tag {
    background-color: var(--primary-tint);
    color: var(--brand-text-alt);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
}

.cta-section {
    text-align: center;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 8px;
    margin-top: 30px;
}

.cta-section p {
    font-size: 1.25rem;
    color: var(--gray);
    margin-bottom: 20px;
}

.not-found {
    text-align: center;
    padding: 50px;
}

/* 600px was not one of the style guide's four, and was not a measurement either.
   Rendered with a 28-character name against css/styles.css, 40px wraps to two lines
   from 481px to about 650px and fits on one line above that. Of the approved widths,
   768 is the only one where the heading never wraps above ~500px; 480 leaves the whole
   481-650 band wrapping. The cost is a 32px heading rather than 40px between 650 and
   768, which is a reasonable place for smaller type. A shorter name behaves better at
   every width, so this is the pessimistic case rather than the typical one. */
@media (max-width: 768px) {
    .profile-view-container {
        margin-top: 80px;
        padding: 15px;
    }

    .profile-header h1 {
        font-size: 2rem;
    }

    .profile-header .username {
        font-size: 1rem;
    }

    .profile-section h2 {
        font-size: 1.25rem;
    }

    .profile-section p {
        font-size: 1rem;
    }

    .cta-section {
        padding: 15px;
    }

    .cta-section p {
        font-size: 1rem;
    }
}