/*
 * Public profile page (lib/modules/rewrite/profile.php). Clean look: white
 * cards on a soft gray page with plain section headings (no dark bars),
 * red accents, the dark player bar, phones edge to edge. Everything is
 * scoped under #profile.pf so no other page is affected. The player, the
 * hover cards and the photo gallery keep their original ids/classes for
 * jPlayer and scripts.js, so their legacy styles.css rules are overridden
 * here rather than removed.
 */

#profile.pf {
    --pf-red: #d93337;
    --pf-red-dark: #b0262a;
    --pf-red-soft: #fdeeee;
    --pf-bar: #404040;
    --pf-ink: #1f1f1f;
    --pf-text: #444;
    --pf-muted: #767676;
    --pf-line: #dcdcdc;
    --pf-line-soft: #ececec;
    --pf-bg: #f6f6f7;
    --pf-green: #2e9e5b;
    --pf-blue: #0c83eb;     /* links and the skill meters */
    --pf-blue-dark: #0a6cc2;
    /* The old profile page's fonts: Helvetica Neue for text, Helvetica Neue
       Condensed Bold for headings ('Open Sans Condensed', which styles.css
       loads from Google Fonts, where that isn't installed). */
    --pf-font: 'Helvetica Neue', Helvetica-Neue, Helvetica, Arial, sans-serif;
    --pf-font-head: HelveticaNeue-CondensedBold, HelveticaNeueBoldCondensed, HelveticaNeue-Bold-Condensed, 'Helvetica Neue Bold Condensed', 'Open Sans Condensed', 'Helvetica Neue', Helvetica-Neue, Helvetica, Arial, sans-serif;
    font-family: var(--pf-font);
    margin-top: 0;
    margin-bottom: 24px;
    padding: 24px 16px;
    background: transparent;   /* cards sit straight on the site's dark gray */
    color: var(--pf-text);
    font-size: 15px;
    line-height: 1.5;
}

#profile.pf a {
    text-decoration: none;
}

#profile.pf a:focus-visible,
#profile.pf button:focus-visible,
#profile.pf [role="button"]:focus-visible {
    outline: 2px solid var(--pf-red);
    outline-offset: 2px;
}

/* ---------- Search results navigation ---------- */

/* scripts.js adds big Previous / Next arrows in the window margins on wide
   screens, sized for the old 1200px page. The panel is 1230px now, so the
   arrows are kept to the dark margin beside it, 20px clear of the panel,
   and left off where that margin is too narrow for them. (This stylesheet
   is only loaded by the profile page.) */
body > .result-previous,
body > .result-next {
    width: calc((100vw - 1230px) / 2) !important;   /* overrides scripts.js */
}

body > .result-previous {
    padding-right: 15px;
}

body > .result-next {
    padding-left: 15px;
}

body > .result-previous a,
body > .result-next a {
    font-size: 0;   /* the "Previous page" / "Next page" label stays hidden */
}

@media (max-width: 1459px) {
    body > .result-previous,
    body > .result-next {
        display: none !important;
    }
}


#profile.pf .pf-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 16px;
    padding: 8px;
    border: 0;
    border-radius: 8px;
    background: #fff;
}

#profile.pf .pf-nav-bottom {
    margin: 16px 0 0;
}

#profile.pf .pf-nav a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--pf-ink);
}

/* Medium gray so they don't compete with the name below them. */
#profile.pf .pf-nav .pf-nav-prev,
#profile.pf .pf-nav .pf-nav-next {
    border: 1px solid #e3e3e3;
    background: #fff;
    color: var(--pf-muted);
}

#profile.pf .pf-nav .pf-nav-prev:hover,
#profile.pf .pf-nav .pf-nav-next:hover {
    border-color: var(--pf-bar);
    background: var(--pf-bar);
    color: #fff;
}

#profile.pf .pf-nav .is-off {
    opacity: .4;
    pointer-events: none;
}

#profile.pf .pf-nav .pf-nav-back {
    color: var(--pf-bar);
}

#profile.pf .pf-nav .pf-nav-back:hover {
    color: var(--pf-ink);
    text-decoration: underline;
}

#profile.pf .pf-nav .glyphicon {
    top: 0;
    font-size: 11px;
}

/* ---------- Top bar: name, category, active status ---------- */

#profile.pf .pf-topbar {
    margin: 0 0 20px;
    border: 0;
    border-top: 4px solid var(--pf-red);
    border-radius: 8px;
    background: #fff;
}

/* Search results Previous / Back / Next sit in a strip at the top of it. */
#profile.pf .pf-topbar .pf-topbar-nav {
    margin: 0;
    padding: 8px 12px;
    border: 0;
    border-bottom: 1px solid var(--pf-line-soft);
    border-radius: 0;
    background: #fafafa;
}

#profile.pf .pf-topbar-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px 20px;
}

#profile.pf .pf-topbar-text {
    min-width: 0;
}

#profile.pf .pf-topbar .pf-name {
    font-size: 32px;
    letter-spacing: 0;
}

#profile.pf .pf-topbar .pf-cat {
    margin: 5px 0 0;
}

#profile.pf .pf-active {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 5px 12px;
    border-radius: 999px;
    background: #f1f1f1;
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    white-space: nowrap;
    color: var(--pf-muted);
}

#profile.pf .pf-active.is-on {
    background: #eef7f1;
}

/* ---------- Hero: photo, facts, actions, player ---------- */

/* Desktop: photo on the left; the player sits at the top of the right
   column with the facts and buttons under it (as on the old page). The
   photo/intro wrapper steps aside so all three share one grid. */
#profile.pf .pf-hero {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: 20px 28px;
    margin: 0 0 20px;
    padding: 24px;
    border: 0;
    border-radius: 8px;
    background: #fff;
}

#profile.pf .pf-hero-top {
    display: contents;
}

#profile.pf .pf-photo {
    grid-column: 1;
    grid-row: 1 / span 2;
}

#profile.pf .pf-player {
    grid-column: 2;
    grid-row: 1;
}

#profile.pf .pf-intro {
    grid-column: 2;
    grid-row: 2;
}

/* jPlayer's own (invisible) audio element stays out of the layout. */
#profile.pf #jquery_jplayer_1 {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

#profile.pf .pf-photo {
    position: relative;
    flex: 0 0 280px;
    width: 280px;
    height: 280px;
    border-radius: 6px;
    overflow: hidden;
    background: #333;
    cursor: pointer;
}

#profile.pf #profile_image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#profile.pf .pf-photo-tools {
    position: absolute;
    left: 10px;
    bottom: 10px;
    display: flex;
    gap: 6px;
    opacity: 0;
    transition: opacity .15s;
}

#profile.pf .pf-photo:hover .pf-photo-tools,
#profile.pf .pf-photo-tools:focus-within,
#profile.pf .pf-photo-tools.pf-photo-tools-on {
    opacity: 1;
}

#profile.pf .pf-photo-tools a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .72);
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

#profile.pf .pf-photo-tools a:hover {
    background: var(--pf-red);
}

#profile.pf .pf-photo-tools .glyphicon {
    top: 0;
    font-size: 11px;
}

#profile.pf .pf-intro {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

#profile.pf .pf-name {
    float: none;
    margin: 0;
    font-family: var(--pf-font-head);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--pf-ink);
    overflow-wrap: anywhere;
}

#profile.pf .pf-cat {
    margin: 6px 0 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #5c5c5c;
}

#profile.pf .pf-cat span {
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--pf-muted);
}

#profile.pf .pf-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
    font-size: 14px;
    color: var(--pf-text);
}

#profile.pf .pf-facts li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

#profile.pf .pf-facts > li > .glyphicon,
#profile.pf .pf-genres > .glyphicon {
    top: 0;
    font-size: 12px;
    width: 14px;
    text-align: center;
    color: var(--pf-muted);
}

#profile.pf .pf-facts a {
    color: var(--pf-ink);
}

#profile.pf .pf-facts a:hover {
    color: var(--pf-blue);
}

#profile.pf .pf-facts a.pf-edit {
    color: var(--pf-muted);
}

#profile.pf .pf-facts a.pf-edit:hover {
    color: var(--pf-blue);
}

#profile.pf .pf-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #b5b5b5;
}

#profile.pf .pf-active.is-on {
    color: #23794a;
}

#profile.pf .pf-active.is-on .pf-dot {
    background: var(--pf-green);
    box-shadow: 0 0 0 3px rgba(46, 158, 91, .18);
}

#profile.pf .pf-id {
    color: var(--pf-muted);
}

#profile.pf .pf-genres {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 14px;
    font-size: 14px;
    color: var(--pf-text);
}

#profile.pf .pf-instruments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
}

#profile.pf .pf-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    margin: 0;
    padding: 0 14px 0 12px;
    border: 0 !important;        /* styles.css forces a gray outline on .button */
    border-radius: 4px;
    background: #6b6b6b;
    box-shadow: none;
    text-shadow: none;           /* and a white glow on the text */
    font-size: 13.5px;
    font-weight: 600;
    line-height: 32px;
    text-transform: none;
    color: #fff;
    cursor: default;
}

#profile.pf .pf-pill:hover,
#profile.pf .pf-pill:focus,
#profile.pf .pf-pill:active {
    background: #6b6b6b;
    color: #fff;
    text-shadow: none;
}

#profile.pf .pf-pill .glyphicon-star {
    top: 0;
    font-size: 11px;
    color: #f2c14e;
}

#profile.pf .pf-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;   /* buttons line up with the bottom of the photo */
    padding-top: 6px;
}

#profile.pf .pf-btn {
    display: inline-block;
    height: 44px;
    margin: 0;
    padding: 0 20px;
    border: 1px solid #cfcfcf;
    border-radius: 4px;
    background: #fff;
    box-shadow: none;
    font-size: 14px;
    font-weight: 700;
    line-height: 42px;
    letter-spacing: .03em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--pf-ink);
    cursor: pointer;
}

/* Link buttons centre the icon and label with flexbox rather than
   line-height and a pixel nudge, so they stay centred when Android's
   in-app browser enlarges text to the phone's font size. */
#profile.pf a.pf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

#profile.pf .pf-btn:hover {
    border-color: var(--pf-bar);
    background: var(--pf-bar);
    color: #fff;
}

#profile.pf .pf-btn .glyphicon {
    top: 2px;
    margin-right: 8px;
    font-size: 14px;
}

#profile.pf a.pf-btn .glyphicon {
    top: 0;
    line-height: 1;
}

/* The desktop Share button gets Bootstrap's d-md-inline-block, which is
   !important; keep it a flex box so its label stays centred too. */
@media (min-width: 768px) {
    #profile.pf a.pf-btn.d-md-inline-block {
        display: inline-flex !important;
    }
}

#profile.pf .pf-btn-primary {
    min-width: 170px;
    border-color: var(--pf-red);
    background: var(--pf-red);
    color: #fff;
}

/* Phone-only Contact under the photo (shown in the max-width: 767px block). */
#profile.pf a.pf-btn-contact-m {
    display: none;
}

#profile.pf .pf-btn-primary:hover {
    border-color: var(--pf-red-dark);
    background: var(--pf-red-dark);
    color: #fff;
}

#profile.pf .pf-btn.btn-music-added {
    border-color: #9fd3b2;
    background: #f1f8f4;
    color: #23794a;
}

#profile.pf .pf-btn.btn-music-added:hover {
    border-color: #23794a;
    background: #23794a;
    color: #fff;
}

#profile.pf .pf-edit {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    padding: 2px 0;
    border: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--pf-muted);
}

#profile.pf .pf-edit:hover {
    color: var(--pf-blue);
}

#profile.pf .pf-edit .glyphicon {
    top: 0;
    font-size: 11px;
    color: inherit !important;   /* styles.css forces .glyphicon-edit red */
}

/* Edit links on white backgrounds (hero facts, sub-headings). */
#profile.pf .pf-intro .pf-edit,
#profile.pf .pf-subhead .pf-edit {
    margin-left: 6px;
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
}

/* ---------- Player (jPlayer markup, restyled) ---------- */

#profile.pf .pf-player {
    position: relative;
}

/* The player keeps its left-to-right layout on right-to-left pages too:
   jPlayer measures seek clicks from the left, and media controls are not
   mirrored. rtlcss leaves everything up to rtl:end:ignore as written. */
/*rtl:begin:ignore*/
#profile.pf .music-player {
    z-index: 10;
    position: relative;
    margin: 0;
    direction: ltr;
}

#profile.pf .music-player .panel {
    display: flex;
    align-items: center;
    gap: 14px;
    height: auto;
    min-height: 76px;
    margin: 0;
    padding: 14px 24px;
    border: 0;
    border-radius: 6px;
    background: var(--pf-bar);
    box-shadow: none;
}

#profile.pf .music-player .panel .play,
#profile.pf .music-player .panel .playYoutubeVideos {
    position: static;
    order: 2;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    margin: 0;
    float: none;
    border-radius: 50%;
    background: #f0f0f0;
    box-shadow: none;
    font-size: 19px;
    line-height: 48px;
    text-align: center;
    text-indent: 3px;
    color: var(--pf-bar);
    cursor: pointer;
}

/* Centred with flexbox (see a.pf-btn); the play triangle's slight nudge
   to the right is in em so it scales with the icon. */
#profile.pf .music-player .panel .play,
#profile.pf .music-player .panel .playYoutubeVideos,
#profile.pf .music-player .panel .prev,
#profile.pf .music-player .panel .next {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-indent: 0;
}

#profile.pf .music-player .panel .play::before,
#profile.pf .music-player .panel .playYoutubeVideos::before,
#profile.pf .music-player .panel .prev::before,
#profile.pf .music-player .panel .next::before {
    line-height: 1;
}

#profile.pf .music-player .panel .playYoutubeVideos::before {
    padding-left: .15em;
}

#profile.pf .music-player .panel .jp-pause {
    text-indent: 0;
}

#profile.pf .music-player .panel .play:hover,
#profile.pf .music-player .panel .playYoutubeVideos:hover {
    background: #fff;
    box-shadow: none;
}

#profile.pf .music-player .panel .prev,
#profile.pf .music-player .panel .next {
    position: static;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    margin: 0;
    float: none;
    border-radius: 50%;
    background: none;
    font-size: 0;
    line-height: 32px;
    text-align: center;
    color: #bdbdbd;
}

#profile.pf .music-player .panel .prev {
    order: 1;
}

#profile.pf .music-player .panel .next {
    order: 3;
}

#profile.pf .music-player .panel .prev::before,
#profile.pf .music-player .panel .next::before {
    font-size: 14px;
}

#profile.pf .music-player .panel .prev:hover,
#profile.pf .music-player .panel .next:hover {
    color: #fff;
}

#profile.pf .music-player .panel .track {
    display: block !important;
    order: 4;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: auto;
    margin: 0 0 0 6px;
    padding: 0;
    float: none;
    border: 0;
    background: none;
    text-align: left;
    overflow: hidden;
}

#profile.pf .music-player .panel .track ul {
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}

#profile.pf .music-player .panel .jp-title {
    overflow: hidden;
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #f0f0f0;   /* same light gray as the play button */
}

#profile.pf .music-player .jp-progress {
    width: 100%;
    height: 5px;
    margin: 0;
    border-radius: 3px;
    background: #5a5a5a;
    overflow: hidden;
}

#profile.pf .music-player .jp-seek-bar {
    background: #6d6d6d;
}

#profile.pf .music-player .jp-play-bar {
    background: var(--pf-red);
}

#profile.pf .music-player .panel .time {
    display: block;
    order: 5;
    min-width: 42px;
    margin: 0;
    float: none;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: #cfcfcf;
}

#profile.pf .music-player .panel .time #player-soundcloud a {
    font-size: 11px;
    color: #cfcfcf;
}

#profile.pf .music-player .panel .sound {
    display: flex;
    align-items: flex-end;
    order: 6;
    gap: 2px;
    width: auto;
    height: 20px;
    margin: 0 0 0 6px;
    float: none;
}

#profile.pf .music-player .panel .sound .volume {
    width: 4px;
    float: none;
    border-radius: 1px;
    background: #6b6b6b;
}

#profile.pf .music-player .panel .sound .volume-on {
    background: #e6e6e6;
}

#profile.pf .music-player .panel .sound .volume:nth-child(1) { height: 6px; }
#profile.pf .music-player .panel .sound .volume:nth-child(2) { height: 8px; }
#profile.pf .music-player .panel .sound .volume:nth-child(3) { height: 10px; }
#profile.pf .music-player .panel .sound .volume:nth-child(4) { height: 12px; }
#profile.pf .music-player .panel .sound .volume:nth-child(5) { height: 14px; }
#profile.pf .music-player .panel .sound .volume:nth-child(6) { height: 16px; }
#profile.pf .music-player .panel .sound .volume:nth-child(7) { height: 18px; }
#profile.pf .music-player .panel .sound .volume:nth-child(8) { height: 20px; }

#profile.pf .music-player .panel .menu {
    display: flex;
    align-items: center;
    justify-content: center;
    order: 7;
    width: 36px;
    height: 36px;
    margin: 0;
    float: none;
    border-radius: 4px;
    background: none;
    font-size: 0;
    text-indent: 0;
    color: #bdbdbd;
}

#profile.pf .music-player .panel .menu::before {
    content: "\e056";
    font-family: 'Glyphicons Halflings';
    font-size: 16px;
    line-height: 1;
}

#profile.pf .music-player .panel .menu:hover {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

#profile.pf .music-player .drop {
    top: 100%;
    right: 0;
    left: 0;
    padding: 8px;
    border-radius: 0 0 6px 6px;
    background: #2f2f2f;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
}

#profile.pf .music-player .drop ul {
    max-height: 320px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    background: none;
    list-style: none;
}

#profile.pf .music-player .drop ul li {
    padding: 0;
    line-height: 20px;
}

#profile.pf .music-player .drop ul a {
    display: block;
    padding: 10px 14px;
    border-radius: 4px;
    background: none;
    font-size: 14px;
    color: #eee;
}

#profile.pf .music-player .drop ul a:hover,
#profile.pf .music-player .drop ul .jp-playlist-current a {
    background: var(--pf-bar);
    color: #fff;
}

#profile.pf .music-player .drop ul .glyphicon {
    font-size: 10px;
    color: #9a9a9a;
}
/*rtl:end:ignore*/

#profile.pf .pf-noaudio {
    display: flex;
    align-items: center;
    min-height: 64px;
    padding: 12px 24px;
    border-radius: 6px;
    background: var(--pf-bar);
    font-size: 14px;
    color: #cfcfcf;
}

#profile.pf .pf-noaudio-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

#profile.pf .pf-noaudio .glyphicon {
    top: 0;
    color: #8a8a8a;
}

#profile.pf .pf-noaudio-link {
    padding: 3px 12px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

#profile.pf .pf-noaudio-link:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, .12);
}

/* ---------- Two columns of cards ---------- */

#profile.pf .pf-body {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

#profile.pf .pf-main {
    flex: 1 1 auto;
    min-width: 0;
}

#profile.pf .pf-side {
    flex: 0 0 370px;
    width: 370px;
    min-width: 0;
}

#profile.pf .pf-card {
    margin: 0 0 20px;
    padding: 22px 24px 24px;
    border: 0;
    border-radius: 8px;
    background: #fff;
}

/* Plain heading row: title on the left, Edit (owner) on the right. */
#profile.pf .pf-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 16px;
    padding: 0;
    background: none;
}

#profile.pf .pf-card-title {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: var(--pf-font-head);
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--pf-ink);
}

#profile.pf .pf-subhead {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 12px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pf-muted);
}

#profile.pf .pf-people + .pf-subhead,
#profile.pf .pf-empty + .pf-subhead,
#profile.pf .pf-event + .pf-subhead {
    margin-top: 20px;
}

#profile.pf .pf-empty {
    margin: 0;
    font-size: 14px;
    font-style: italic;
    color: var(--pf-muted);
}

#profile.pf .pf-text {
    overflow-wrap: anywhere;
}

#profile.pf .pf-text p {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--pf-text);
}

#profile.pf .pf-text p:last-child {
    margin-bottom: 0;
}

/* Seeking */
#profile.pf .pf-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#profile.pf .pf-tags li {
    padding: 5px 14px;
    border: 1px solid #e3e3e3;
    border-radius: 999px;
    background: var(--pf-bg);
    font-size: 14px;
    font-weight: 600;
    color: var(--pf-ink);
}

#profile.pf .pf-tags.is-collapsed .pf-tag-extra {
    display: none;
}

#profile.pf .pf-tags li.pf-tags-more {
    padding: 0;
    border: 0;
    background: none;
}

#profile.pf .pf-tags-more button,
#profile.pf .pf-events-more button {
    height: 100%;
    min-height: 32px;
    padding: 5px 14px;
    border: 1px dashed #cfcfcf;
    border-radius: 999px;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: var(--pf-bar);
    cursor: pointer;
}

#profile.pf .pf-tags-more button:focus:not(:focus-visible),
#profile.pf .pf-events-more button:focus:not(:focus-visible) {
    outline: 0;
}

#profile.pf .pf-tags-more button:hover,
#profile.pf .pf-events-more button:hover {
    border-color: var(--pf-bar);
    border-style: solid;
}

/* About facts */
#profile.pf .pf-dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 24px;
    margin: 20px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--pf-line-soft);
}

#profile.pf .pf-card-head + .pf-dl {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

#profile.pf .pf-dl dt {
    margin: 0 0 2px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--pf-muted);
}

#profile.pf .pf-dl dd {
    margin: 0;
    font-size: 15px;
    color: var(--pf-ink);
    overflow-wrap: anywhere;
}

#profile.pf .pf-dl dd a {
    color: var(--pf-blue);
}

#profile.pf .pf-dl dd a:hover {
    color: var(--pf-blue-dark);
    text-decoration: underline;
}

#profile.pf .pf-dl .pf-dl-wide {
    grid-column: 1 / -1;
}

/* Instrument experience */
#profile.pf .pf-skills {
    margin: 0;
    padding: 0;
    list-style: none;
}

#profile.pf .pf-skills li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 92px;
    align-items: center;
    gap: 16px;
    padding: 10px 0;
    border-top: 1px solid var(--pf-line-soft);
}

#profile.pf .pf-skills li:first-child {
    padding-top: 0;
    border-top: 0;
}

#profile.pf .pf-skill-name {
    font-weight: 600;
    color: var(--pf-ink);
}

#profile.pf .pf-skill-meter {
    display: flex;
    gap: 4px;
}

#profile.pf .pf-skill-meter i {
    display: block;
    width: 26px;
    height: 6px;
    border-radius: 3px;
    background: #e4e4e4;
}

#profile.pf .pf-skill-meter i.on {
    background: var(--pf-blue);
}

#profile.pf .pf-skill-level {
    font-size: 13px;
    text-align: right;
    color: var(--pf-muted);
}

/* Music track list. The play/pause icons stay the ico-08/ico-10 images
   because the page script swaps them inline while a track plays. */
#profile.pf .music-tracks {
    margin: 0;
    padding: 0;
    list-style: none;
    font: inherit;
}

#profile.pf .music-tracks li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--pf-line-soft);
    overflow: visible;
}

#profile.pf .music-tracks li:first-child {
    padding-top: 0;
    border-top: 0;
}

#profile.pf .music-tracks a {
    background: none;
}

#profile.pf .music-tracks .info-box-handler-song,
#profile.pf .music-tracks .playYoutubeVideo,
#profile.pf .music-tracks .pf-track-file-name {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 36px;
    padding: 7px 0 7px 48px;
    background: url(/images/ico-08.png) no-repeat 0 50%;
    background-size: 36px 36px;
    font-size: 15px;
    font-weight: 600;
    line-height: 22px;
    color: var(--pf-ink);
    overflow-wrap: anywhere;
}

#profile.pf .music-tracks .pf-track-file-name {
    padding-left: 0;
    background: none !important;
}

#profile.pf .music-tracks .info-box-handler-song:hover,
#profile.pf .music-tracks .playYoutubeVideo:hover,
#profile.pf .music-tracks .pf-track-file-name:hover {
    color: var(--pf-blue);
}

#profile.pf .music-tracks .jp-playlist-current .info-box-handler-song {
    color: var(--pf-ink);
}

#profile.pf .music-tracks .pf-track-file::before {
    content: "\e022";
    display: flex;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ececec;
    font-family: 'Glyphicons Halflings';
    font-size: 14px;
    color: #8a8a8a;
}

#profile.pf .music-tracks .jp-playlist-item-download {
    order: 2;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    float: none;
    border: 1px solid var(--pf-line);
    border-radius: 50%;
    background: none;
    font-size: 13px;
    line-height: 34px;
    text-align: center;
    color: var(--pf-muted);
}

#profile.pf .music-tracks .jp-playlist-item-download:hover {
    border-color: var(--pf-blue);
    color: var(--pf-blue);
}

#profile.pf .pf-track-tag {
    margin-left: 6px;
    padding: 2px 6px;
    border-radius: 3px;
    background: #8a8a8a;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    vertical-align: 2px;
    color: #fff;
}

/* Song details popup (positioned by scripts.js from the link's offset). */
#profile.pf .music-tracks .info-box {
    z-index: 50;
    left: 0;
    bottom: auto;
    width: 280px;
    padding: 0 0 10px;
    background: none;
}

#profile.pf .info-box .area {
    position: relative;
    padding: 12px 14px;
    border-radius: 6px;
    background: #2b2b2b;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}

#profile.pf .info-box .area::after {
    content: '';
    position: absolute;
    left: 22px;
    bottom: -6px;
    width: 12px;
    height: 12px;
    background: #2b2b2b;
    transform: rotate(45deg);
}

#profile.pf .info-box .desc {
    font-size: 13px;
    line-height: 18px;
    color: #cfcfcf;
}

#profile.pf .info-box .name {
    margin: 0 0 4px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    color: #fff;
}

#profile.pf .info-box .sub-ttl {
    display: block;
    margin: 0 0 3px;
    font-style: normal;
    font-family: inherit;
    color: #b5b5b5;
}

#profile.pf .info-box p {
    margin: 6px 0 0;
    color: #ddd;
}

/* Calendar */
#profile.pf .pf-event {
    border-top: 1px solid var(--pf-line-soft);
}

#profile.pf .pf-card-head + .pf-event,
#profile.pf .pf-subhead + .pf-event {
    border-top: 0;
}

/* Long calendars: rows after the first 8 wait for "Show all N events". */
#profile.pf .pf-o-calendar.is-collapsed .pf-event-extra {
    display: none;
}

#profile.pf .pf-events-more {
    padding-top: 14px;
    border-top: 1px solid var(--pf-line-soft);
}

#profile.pf .pf-event-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    cursor: pointer;
}

#profile.pf .pf-subhead + .pf-event .pf-event-head,
#profile.pf .pf-card-head + .pf-event .pf-event-head {
    padding-top: 0;
}

#profile.pf .pf-event-date {
    display: flex;
    flex: 0 0 52px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 6px;
    background: var(--pf-bar);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
}

#profile.pf .pf-event-date b {
    margin: 0 0 3px;
    font-size: 20px;
    letter-spacing: 0;
}

#profile.pf .pf-event-past .pf-event-date {
    background: #e9e9e9;
    color: var(--pf-muted);
}

#profile.pf .pf-event-info {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

#profile.pf .pf-event-info strong {
    font-size: 15px;
    color: var(--pf-ink);
    overflow-wrap: anywhere;
}

#profile.pf .pf-event-info small {
    font-size: 13px;
    color: var(--pf-muted);
}

#profile.pf .pf-event-toggle {
    top: 0;
    font-size: 12px;
    color: var(--pf-muted);
    transition: transform .15s;
}

#profile.pf .pf-event-head:not(.collapsed) .pf-event-toggle {
    transform: rotate(180deg);
}

#profile.pf .pf-event-head:hover .pf-event-info strong {
    color: var(--pf-blue);
}

#profile.pf .pf-event-desc {
    padding: 0 0 12px 66px;
    overflow-wrap: anywhere;
}

#profile.pf .pf-event-desc p {
    margin: 0 0 8px;
    font-size: 14px;
    color: var(--pf-text);
}

/* Digital audition invitation: a soft red card instead of a red bar. */
#profile.pf .pf-card-audition {
    border-color: #f1c7c8;
    background: #fffafa;
}

#profile.pf .pf-card-audition .pf-card-title {
    color: var(--pf-ink);
}

#profile.pf .pf-card-audition p {
    margin: 0 0 12px;
}

#profile.pf .pf-card-audition a {
    color: var(--pf-blue);
}

#profile.pf .pf-card-audition .pf-btn-primary {
    color: #fff;
}

#profile.pf .pf-lead {
    font-size: 16px;
    font-weight: 700;
    color: var(--pf-ink);
}

#profile.pf .pf-warning {
    margin: 0 0 14px;
    padding: 12px 16px;
    border-left: 4px solid var(--pf-red);
    border-radius: 4px;
    background: var(--pf-red-soft);
}

#profile.pf .pf-warning ul {
    margin: 0;
    padding: 0 0 0 18px;
}

#profile.pf .pf-audition-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#profile.pf .pf-audition-actions input.pf-btn {
    line-height: normal;
}

#profile.pf .pf-card-audition .pf-help {
    font-size: 13px;
    text-decoration: underline;
    color: var(--pf-muted);
}

/* Videos */
#profile.pf .pf-videos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#profile.pf .pf-video {
    display: block;
    color: var(--pf-ink);
}

#profile.pf .pf-video-thumb {
    display: block;
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 4px;
    background: #222;
    overflow: hidden;
}

#profile.pf .pf-video-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#profile.pf .pf-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .6);
    transition: transform .15s;
}

/* A play triangle points right in both directions (kept as-is by rtlcss). */
/*rtl:begin:ignore*/
#profile.pf .pf-video-play::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 16px;
    border-style: solid;
    border-width: 8px 0 8px 13px;
    border-color: transparent transparent transparent #fff;
}
/*rtl:end:ignore*/

#profile.pf .pf-video:hover .pf-video-play {
    background: rgba(0, 0, 0, .8);
    transform: scale(1.08);
}

#profile.pf .pf-video-title {
    display: block;
    margin-top: 6px;
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#profile.pf .pf-video:hover .pf-video-title {
    color: var(--pf-blue);
}

/* Photos */
#profile.pf .pf-photos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    overflow: visible;
    list-style: none;
}

#profile.pf .pf-photos li {
    width: auto;
    height: auto;
    margin: 0;
    float: none;
    aspect-ratio: 1;
    border: 0;
    border-radius: 4px;
    overflow: hidden;
    background: var(--pf-bg);
}

#profile.pf .pf-photos a,
#profile.pf .pf-photos img {
    display: block;
    width: 100%;
    height: 100%;
}

#profile.pf .pf-photos img {
    object-fit: cover;
    transition: transform .2s;
}

#profile.pf .pf-photos a:hover img {
    transform: scale(1.05);
}

/* Connections (hover cards come from scripts.js) */
#profile.pf .pf-people {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    min-height: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

#profile.pf .pf-people::after {
    content: none;
}

#profile.pf .pf-people li {
    position: relative;
    margin: 0;
    float: none;
}

#profile.pf .pf-people li > a {
    display: block;
    width: auto;
    height: auto;
    float: none;
    aspect-ratio: 1;
    border: 0;
    border-radius: 50%;
    background: var(--pf-bg);
    box-shadow: 0 0 0 1px var(--pf-line-soft);
    overflow: hidden;
    transition: box-shadow .15s;
}

#profile.pf .pf-people li > a:hover {
    box-shadow: 0 0 0 2px var(--pf-blue);
}

#profile.pf .pf-people li > a img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#profile.pf .pf-people .info-box {
    z-index: 40;
    bottom: 100%;
    left: 50%;
    width: 290px;
    margin-left: -145px;
    padding: 0 0 10px;
    background: none;
}

#profile.pf .pf-people li:nth-child(5n+1) .info-box {
    left: 0;
    margin-left: -8px;
}

#profile.pf .pf-people li:nth-child(5n+1) .info-box .area::after {
    left: 30px;
}

#profile.pf .pf-people li:nth-child(5n) .info-box {
    left: auto;
    right: -8px;
    margin-left: 0;
}

#profile.pf .pf-people li:nth-child(5n) .info-box .area::after {
    left: auto;
    right: 30px;
}

#profile.pf .pf-people .info-box .area {
    display: flex;
    gap: 12px;
}

#profile.pf .pf-people .info-box .area::after {
    left: 139px;
}

#profile.pf .pf-people .info-box .img {
    flex: 0 0 76px;
    width: 76px;
    height: 76px;
    margin: 0;
    float: none;
    border-radius: 4px;
    object-fit: cover;
}

#profile.pf .pf-people .info-box .desc {
    flex: 1 1 auto;
    min-width: 0;
}

#profile.pf .pf-people .info-box .name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#profile.pf .pf-people .info-box p {
    margin: 0 0 8px;
}

#profile.pf .pf-people .info-box .clearfix {
    display: flex;
    gap: 8px;
}

#profile.pf .pf-people .info-box .clearfix::after {
    content: none;
}

#profile.pf .info-box .btn {
    width: auto;
    margin: 0;
    padding: 0 12px;
    float: none;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 4px;
    background: transparent;
    box-shadow: none;
    font-size: 12px;
    font-weight: 700;
    line-height: 28px;
    color: #fff;
}

#profile.pf .info-box .btn:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, .12);
}

#profile.pf .info-box .btn-2 {
    border-color: var(--pf-red);
    background: var(--pf-red);
}

#profile.pf .info-box .btn-2:hover {
    border-color: var(--pf-red-dark);
    background: var(--pf-red-dark);
}

/* Hide / Flag / Contact under the sidebar */
#profile.pf .pf-report {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
}

#profile.pf .pf-report-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--pf-line);
    border-radius: 4px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: var(--pf-muted);
}

#profile.pf .pf-report-btn:hover {
    border-color: var(--pf-bar);
    color: var(--pf-ink);
}

#profile.pf .pf-report-btn .glyphicon {
    top: 0;
    font-size: 11px;
}

/* More from the search */
#profile.pf .pf-results {
    margin: 0;
    padding: 18px 20px;
    border: 0;
    border-radius: 8px;
    background: #fff;
    text-align: left;
}

#profile.pf .pf-results-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
}

#profile.pf .pf-results-title {
    margin: 0;
    font-family: var(--pf-font-head);
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
    text-transform: uppercase;
    color: var(--pf-ink);
}

#profile.pf .pf-results-back {
    font-size: 14px;
    font-weight: 600;
    color: var(--pf-bar);
}

#profile.pf .pf-results-back:hover {
    color: var(--pf-ink);
    text-decoration: underline;
}

#profile.pf .pf-results ul.pf-results-list {
    display: flex;
    gap: 8px;
    left: auto;
    margin: 0;
    padding: 2px 2px 6px;
    float: none;
    overflow-x: auto;
    list-style: none;
}

#profile.pf .pf-results ul.pf-results-list li {
    flex: 0 0 auto;
    left: auto;
    padding: 0;
    float: none;
}

#profile.pf .pf-results ul.pf-results-list a {
    display: block;
    width: 56px;
    height: 56px;
    padding: 0;
    float: none;
    border: 2px solid transparent;
    border-radius: 50%;
    overflow: hidden;
}

#profile.pf .pf-results ul.pf-results-list a:hover {
    padding: 0;
    border: 2px solid var(--pf-bar);
}

#profile.pf .pf-results ul.pf-results-list .active a {
    padding: 0;
    border: 2px solid var(--pf-bar);
}

#profile.pf .pf-results ul.pf-results-list img {
    display: block;
    width: 100%;
    height: 100%;
    float: none;
    border: 0;
    object-fit: cover;
}

/* ---------- Desktop and tablet: one white panel ----------
   The whole profile is a single white panel floating on the dark page,
   with the red edge across its top. Inside, the header, the photo/player
   card and the sections are separated by hairlines rather than gaps, and
   the media column (videos, photos, connections) is a shade darker.
   Phones keep their edge-to-edge boxes (rules further down). */

@media (min-width: 768px) {
    #profile.pf {
        width: calc(100% - 32px);   /* clear of the screen edges on tablets */
        margin: 24px auto;
        padding: 0;
        border-top: 4px solid var(--pf-red);
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
    }

    #profile.pf .pf-topbar {
        margin: 0;
        border: 0;
        border-bottom: 1px solid var(--pf-line-soft);
        border-radius: 4px 4px 0 0;
    }

    #profile.pf .pf-topbar .pf-topbar-nav {
        border-radius: 4px 4px 0 0;
    }

    #profile.pf .pf-topbar-main {
        padding: 18px 28px 20px;
    }

    /* Big photo flush with the panel's left edge (as on the old page),
       rounded on its right-hand corners; the player and details fill the
       right-hand column. */
    #profile.pf .pf-hero {
        grid-template-columns: 320px minmax(0, 1fr);
        gap: 20px 32px;
        margin: 0;
        padding: 0 28px 0 0;
        border-bottom: 1px solid var(--pf-line-soft);
        border-radius: 0;
    }

    /* At least square; if the details column runs taller, the photo
       stretches with it so the left side is always filled. */
    #profile.pf .pf-photo {
        align-self: stretch;
        width: 320px;
        height: auto;
        min-height: 320px;
        border-radius: 0 6px 6px 0;
    }

    #profile.pf #profile_image {
        position: absolute;
        top: 0;
        left: 0;
    }

    #profile.pf .pf-photo-tools {
        z-index: 2;
        left: auto;
        right: 10px;
    }

    #profile.pf .pf-player {
        margin-top: 24px;
    }

    #profile.pf .pf-intro {
        margin-bottom: 24px;
    }

    #profile.pf .pf-body {
        align-items: stretch;
        gap: 0;
    }

    #profile.pf .pf-main {
        padding: 4px 0;
    }

    #profile.pf .pf-card {
        margin: 0;
        padding: 24px 28px 26px;
        border-bottom: 1px solid var(--pf-line-soft);
        border-radius: 0;
        background: none;
    }

    #profile.pf .pf-main > .pf-card:last-child,
    #profile.pf .pf-side > .pf-card:last-of-type {
        border-bottom: 0;
    }

    /* The audition invite keeps its soft red, edge to edge. */
    #profile.pf .pf-card-audition {
        background: #fffafa;
    }

    #profile.pf .pf-side {
        flex-basis: 380px;
        width: 380px;
        padding: 4px 0 8px;
        border-left: 1px solid #e8e8ea;
        background: #f4f4f5;
    }

    #profile.pf .pf-side .pf-card {
        border-bottom-color: #e4e4e6;
    }

    #profile.pf .pf-body:last-child .pf-side {
        border-bottom-right-radius: 8px;
    }

    #profile.pf .pf-report {
        margin: 0;
        padding: 4px 28px 24px;
    }

    #profile.pf .pf-results {
        padding: 20px 28px;
        border-top: 1px solid var(--pf-line-soft);
        border-radius: 0;
    }

    #profile.pf .pf-nav-bottom {
        margin: 0;
        padding: 10px 16px;
        border-top: 1px solid var(--pf-line-soft);
        border-radius: 0 0 8px 8px;
        background: #fafafa;
    }
}

/* ---------- Narrower desktops ---------- */

@media (max-width: 1100px) {
    #profile.pf .pf-side {
        flex-basis: 340px;
        width: 340px;
    }

    #profile.pf .pf-hero {
        grid-template-columns: 280px minmax(0, 1fr);
    }

    #profile.pf .pf-photo {
        width: 280px;
        min-height: 280px;
    }
}

/* ---------- Phones: one column, boxes edge to edge ---------- */

@media (max-width: 767px) {
    #profile.pf {
        margin-bottom: 0;
        padding: 0 0 16px;
        border-radius: 0;
        background: #e6e6e8;   /* light gray gaps between the boxes */
    }

    #profile.pf .pf-nav {
        margin: 0;
        padding: 8px 10px;
        border-width: 0 0 1px;
        border-radius: 0;
    }

    #profile.pf .pf-nav-bottom {
        margin: 10px 0 0;
        border-width: 1px 0;
    }

    #profile.pf .pf-nav a {
        padding: 0 10px;
    }

    #profile.pf .pf-topbar {
        margin: 0;
        border-width: 4px 0 0;
        border-radius: 0;
        box-shadow: none;
    }

    #profile.pf .pf-topbar .pf-topbar-nav {
        padding: 6px 10px;
    }

    #profile.pf .pf-topbar-main {
        display: block;
        padding: 14px 16px 16px;
    }

    #profile.pf .pf-topbar .pf-name {
        font-size: 28px;
    }

    #profile.pf .pf-active {
        margin-top: 10px;
        padding: 3px 10px;
        font-size: 12px;
    }

    #profile.pf .pf-hero {
        margin: 0 0 10px;
        border-width: 0 0 1px;
        border-radius: 0;
    }

    /* The hero's pieces become one column so a working player can sit
       right under the photo; the "No audio yet" bar stays at the bottom. */
    #profile.pf .pf-hero {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0;
        background: none;
    }

    #profile.pf .pf-hero-top {
        display: contents;
    }

    #profile.pf .pf-photo { order: 1; }
    #profile.pf .pf-btn-contact-m { order: 2; }
    #profile.pf .pf-player.pf-player-on { order: 3; }
    #profile.pf .pf-intro { order: 4; }
    #profile.pf .pf-player { order: 5; }

    /* Phones: Contact sits flush under the photo (and above a working
       player), so the copy in the button row is left out. 53px is about
       20% taller than the other buttons. */
    #profile.pf a.pf-btn-contact-m {
        display: flex;
        width: 100%;
        height: 53px;
        border: 0;
        border-radius: 0;
    }

    /* Text and envelope about 20% larger than the other buttons (14px). */
    #profile.pf .pf-btn-contact-m,
    #profile.pf .pf-btn-contact-m .glyphicon {
        font-size: 17px;
    }

    #profile.pf .pf-btn-contact-m .glyphicon {
        margin-right: 10px;
    }

    #profile.pf .pf-actions .pf-btn-contact {
        display: none;
    }

    #profile.pf .pf-photo {
        flex: 0 0 auto;   /* the desktop flex-basis would become a height here */
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        border-radius: 0;
    }

    #profile.pf .pf-photo-tools {
        opacity: 1;
    }

    #profile.pf .pf-intro {
        padding: 16px 16px 18px;
        background: #fff;   /* the hero row is display: contents here */
    }

    #profile.pf .pf-facts {
        gap: 4px 16px;
    }

    #profile.pf .pf-instruments {
        margin-bottom: 16px;
    }

    #profile.pf .pf-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    #profile.pf .pf-btn {
        min-width: 0;
        padding: 0 10px;
    }

    #profile.pf .pf-btn-contact,
    #profile.pf .pf-btn-edit {
        grid-column: 1 / -1;
    }

    /*rtl:begin:ignore*/
    #profile.pf .music-player .panel {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px 22px;
        padding: 14px 16px;
        border-radius: 0;
    }

    /* Row one: title and a full-width progress bar. */
    #profile.pf .music-player .panel .track {
        order: 0;
        flex: 1 1 100%;
        margin: 0;
    }

    /* The elapsed time starts in line with the left edge of the progress
       bar, on the buttons row (the buttons are centred, so it is anchored
       rather than taking part in the row). */
    #profile.pf .music-player .panel .time {
        position: absolute;
        left: 26px;   /* same visual inset as the menu icon on the right */
        bottom: 29px;
        text-align: left;
        min-width: 0;
        margin: 0;
        line-height: 18px;
        white-space: nowrap;
    }

    #profile.pf .music-player .panel .sound {
        display: none;
    }

    /* Second row: prev / play / next centred on the bar, with the
       playlist menu pinned to the right. */
    #profile.pf .music-player .panel .prev { order: 2; }
    #profile.pf .music-player .panel .play,
    #profile.pf .music-player .panel .playYoutubeVideos { order: 3; }
    #profile.pf .music-player .panel .next { order: 4; }

    #profile.pf .music-player .panel .menu {
        position: absolute;
        right: 16px;
        bottom: 20px;
    }

    #profile.pf .music-player .drop {
        border-radius: 0;
    }
    /*rtl:end:ignore*/

    #profile.pf .pf-noaudio {
        padding: 12px 16px;
        border-radius: 0;
    }

    /* One column: the two column wrappers step aside so the cards can be
       put in a phone-friendly order. */
    #profile.pf .pf-body {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    #profile.pf .pf-main,
    #profile.pf .pf-side {
        display: contents;
    }

    #profile.pf .pf-o-audition { order: 1; }
    #profile.pf .pf-o-seeking { order: 2; }
    #profile.pf .pf-o-about { order: 3; }
    #profile.pf .pf-o-music { order: 4; }
    #profile.pf .pf-o-videos { order: 5; }
    #profile.pf .pf-o-photos { order: 6; }
    #profile.pf .pf-o-skills { order: 7; }
    #profile.pf .pf-o-text { order: 8; }
    #profile.pf .pf-o-calendar { order: 9; }
    #profile.pf .pf-o-connections { order: 10; }
    #profile.pf .pf-o-report { order: 11; }

    #profile.pf .pf-card {
        margin: 0 0 10px;
        padding: 18px 16px 20px;
        border-width: 1px 0;
        border-radius: 0;
        box-shadow: none;
    }

    #profile.pf .pf-card-head {
        margin-bottom: 14px;
    }

    #profile.pf .pf-card-title {
        font-size: 19px;
    }

    #profile.pf .pf-dl {
        gap: 12px 16px;
    }

    #profile.pf .pf-skills li {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px 12px;
    }

    #profile.pf .pf-skill-meter i {
        width: 18px;
    }

    #profile.pf .pf-skill-level {
        grid-column: 1 / -1;
        margin-top: -2px;
        text-align: left;
    }

    #profile.pf .pf-photos {
        gap: 6px;
    }

    #profile.pf .pf-people {
        gap: 8px;
    }

    #profile.pf .pf-event-desc {
        padding-left: 0;
    }

    #profile.pf .pf-report {
        justify-content: center;
        margin: 6px 16px 10px;
    }

    #profile.pf .pf-results {
        margin: 0;
        padding: 16px;
        border-width: 1px 0;
        border-radius: 0;
    }
}

/* ---------- Social Links (Premier, under Equipment) ---------- */

#profile.pf .pf-socials {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#profile.pf .pf-socials li {
    min-width: 0;
    margin: 0;
    padding: 0;
}

#profile.pf a.pf-social {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid var(--pf-line-soft);
    border-radius: 8px;
    background: #fff;
    color: var(--pf-ink);
    text-decoration: none;
    transition: border-color .15s, background-color .15s;
}

#profile.pf a.pf-social:hover,
#profile.pf a.pf-social:focus-visible {
    border-color: #cfcfcf;
    background: var(--pf-bg);
    text-decoration: none;
}

#profile.pf .pf-social-badge {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
}

#profile.pf .pf-social-svg {
    display: block;
    width: 17px;
    height: 17px;
}

#profile.pf .pf-social-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

#profile.pf .pf-social-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--pf-ink);
}

#profile.pf .pf-social-handle {
    overflow: hidden;
    font-size: 13px;
    color: var(--pf-muted);
    white-space: nowrap;
    text-overflow: ellipsis;
}

#profile.pf .pf-socials.is-locked .pf-social-handle .glyphicon {
    top: 1px;
    margin-right: 2px;
    font-size: 10px;
}

#profile.pf .pf-socials-note {
    margin: 14px 0 0;
    font-size: 14px;
    color: var(--pf-muted);
}

#profile.pf .pf-socials-note a {
    font-weight: 700;
    color: var(--pf-red);
}

#profile.pf .pf-socials-empty .pf-socials-note {
    margin: 0 0 14px;
}

@media (max-width: 767px) {
    /* Phones: right after the Influences / Members / Rates / Equipment boxes. */
    #profile.pf .pf-o-socials { order: 8; }

    #profile.pf .pf-socials {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    #profile.pf a.pf-social {
        gap: 10px;
        padding: 8px 10px;
    }

    #profile.pf .pf-social-badge {
        width: 30px;
        height: 30px;
    }

    #profile.pf .pf-social-svg {
        width: 15px;
        height: 15px;
    }

    #profile.pf .pf-socials-add {
        width: 100%;
    }
}

@media (max-width: 359px) {
    #profile.pf .pf-socials {
        grid-template-columns: minmax(0, 1fr);
    }
}