/* A profile's colour and four records (curator_profile_extras.py, curator_records.js). */

/* Colour: the masthead's text takes the ink that reads on the chosen ground. */
.curator-profile-editorial[data-profile-ground] .curator-profile-identity {
    --you-ink: var(--pg-ink);
    --you-muted: var(--pg-muted);
    --you-line: color-mix(in srgb, var(--pg-ink) 14%, transparent);
}
/* At the ID strength of the shared profile rule it overrides (curator_you.css), or visitors' Follow was paper on paper. */
:is(#curator-you, .curator-profile-editorial)[data-profile-ground] .curator-profile-identity .curator-profile-actions :is(.curator-profile-follow:not(.is-following), .curator-profile-action.is-primary) { color: var(--pg-tone); }
/* On repeat keeps its own paper strip, so its own inks. */
.curator-profile-editorial[data-profile-ground] .curator-on-repeat-slot { --you-ink: #302d29; --you-muted: #77716a; }
/* The header over a dark ground: the mark and its controls in paper. */
:is([data-curator-profile-surface], body:not(.curator-app-shell-page)):has(main[data-profile-ground="dark"]) > .site-header { color: #f3f1ec; }
:is([data-curator-profile-surface], body:not(.curator-app-shell-page)):has(main[data-profile-ground="dark"]) > .site-header :is(.branding-logo, .curator-header-mark img, .curator-header-brand-mark) { filter: invert(1) brightness(1.9); }
/* Its round controls stay glass on any colour: a clear tint of the ground with a lit rim, as
   white on the plain canvas lifts them off the paper. (--pg-tone reaches the header from the
   ground's own style, profile.html.) */
:is([data-curator-profile-surface], body:not(.curator-app-shell-page)):has(main[data-profile-ground]) > .site-header {
    --curator-control-fill: rgba(255, 255, 255, 0.5);
    --pg-control-rim: inset 0 0.5px 0 rgba(255, 255, 255, 0.75), inset 0 -0.5px 0 rgba(40, 36, 33, 0.06);
}
:is([data-curator-profile-surface], body:not(.curator-app-shell-page)):has(main[data-profile-ground="dark"]) > .site-header {
    --curator-control-fill: rgba(255, 255, 255, 0.15);
    --curator-control-ink: #f3f1ec;
    --pg-control-rim: inset 0 0.5px 0 rgba(255, 255, 255, 0.3), inset 0 -0.5px 0 rgba(0, 0, 0, 0.12);
}
:is([data-curator-profile-surface], body:not(.curator-app-shell-page)):has(main[data-profile-ground]) > .site-header :is(.curator-header-menu-trigger, .curator-search-trigger, .curator-notification-trigger, .curator-inbox-trigger, .curator-header-session, .curator-app-header-back) { box-shadow: var(--pg-control-rim); }
/* The new-notification dot's ring is cut from the capsule's tint over the colour. */
:is([data-curator-profile-surface], body:not(.curator-app-shell-page)):has(main[data-profile-ground]) > .site-header .curator-notification-dot { border-color: color-mix(in srgb, #fff 50%, var(--pg-tone, #fff)); }
:is([data-curator-profile-surface], body:not(.curator-app-shell-page)):has(main[data-profile-ground="dark"]) > .site-header .curator-notification-dot { border-color: color-mix(in srgb, #fff 15%, var(--pg-tone, #000)); }
/* The colour belongs to the masthead, not the page: it paints itself, up past the top (a pull
   down there), out to both sides, and a little below, then easing out to paper over a short, smooth fade, where pulling the sheet
   down shows the run-out. Everything else behind the sheet, its end on a short profile and a
   quick fling past it, is the page's own paper. One static paint, outside the box. */
.curator-profile-editorial[data-profile-ground] > .curator-profile-identity {
    border-image: linear-gradient(var(--pg-tone) calc(100% - 110px), color-mix(in srgb, var(--pg-tone) 96%, transparent) calc(100% - 99px), color-mix(in srgb, var(--pg-tone) 86%, transparent) calc(100% - 88px), color-mix(in srgb, var(--pg-tone) 70%, transparent) calc(100% - 77px), color-mix(in srgb, var(--pg-tone) 50%, transparent) calc(100% - 66px), color-mix(in srgb, var(--pg-tone) 30%, transparent) calc(100% - 55px), color-mix(in srgb, var(--pg-tone) 14%, transparent) calc(100% - 44px), color-mix(in srgb, var(--pg-tone) 5%, transparent) calc(100% - 33px), color-mix(in srgb, var(--pg-tone) 1%, transparent) calc(100% - 22px), color-mix(in srgb, var(--pg-tone) 0%, transparent)) fill 0 / 0 / 100vh 100vmax 190px 100vmax;
}
@media (max-width: 1023px) {
    /* In the app the colour runs solid all the way down behind the sheet, so a pull at the top only
       ever shows colour; below the sheet's end its paper runs on (curator_profile_sheet.css). */
    html.rhune-native-ios .has-profile-fixed-background .curator-profile-editorial[data-profile-ground] > .curator-profile-identity {
        border-image: linear-gradient(var(--pg-tone), var(--pg-tone)) fill 0 / 0 / 100vh 100vmax;
    }
    /* Pull to refresh's run-out, pressed into the colour rather than the paper. */
    html.rhune-native-ios .has-profile-fixed-background .curator-profile-sheet-enabled[data-profile-ground] > .curator-profile-identity::before {
        background: repeating-radial-gradient(circle at 50% 330%, color-mix(in srgb, var(--pg-ink) 7%, transparent) 0 0.6px, transparent 0.6px 3px);
    }
    html.rhune-native-ios .has-profile-fixed-background .curator-profile-sheet-enabled[data-profile-ground] > .curator-profile-identity::after {
        color: color-mix(in srgb, var(--pg-ink) 26%, var(--pg-tone));
        text-shadow: 0 0.75px 0 color-mix(in srgb, #fff 70%, transparent);
    }
    html.rhune-native-ios .has-profile-fixed-background .curator-profile-sheet-enabled[data-profile-ground="dark"] > .curator-profile-identity::after {
        color: color-mix(in srgb, var(--pg-ink) 32%, var(--pg-tone));
        text-shadow: 0 -0.75px 0 rgba(0, 0, 0, 0.32);
    }
}

/* Records: four covers in a row under the stats, nothing to label them. */
.curator-profile-records { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 20px 0 4px; }
/* Nothing to show (an artist's own profile without records): no gap either. The template
   leaves whitespace, so :empty alone wouldn't catch it. */
.curator-profile-records:not(:has(*)) { display: none; }
.curator-profile-record {
    position: relative;
    display: block;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 1px;
    overflow: hidden;
    background: color-mix(in srgb, var(--you-ink) 8%, transparent);
    /* Resting in its place, as the open ones are pressed in: a short, close shadow, not a float. */
    box-shadow: 0 1px 1px rgba(30, 24, 18, 0.14), 0 2px 5px -1px rgba(30, 24, 18, 0.16);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.curator-profile-record-art { position: relative; display: block; width: 100%; height: 100%; }
.curator-profile-record img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Each cover arrives as the profile's others do: the place's tint until it's decoded, then the shared fade. */
.curator-profile-record-art.is-loading img { opacity: 0; }
.curator-profile-record-art.is-revealing img { animation: curator-profile-artwork-reveal 0.34s ease-out both; }
.curator-profile-record-art.is-revealing.is-revealed img { animation-name: curator-profile-artwork-settled; }
@media (prefers-reduced-motion: reduce) { .curator-profile-record-art.is-revealing img { animation: none; } }
.curator-profile-record.is-out { visibility: hidden; }
/* Tapped, while its 3D sleeve is made (curator_records.js open): a soft glow travels slowly
   across the cover from its bottom-left corner to its top-right, then rests before the next, as
   light catches a product turned in the hand. Held back a beat so a quick one never shows it;
   stops as the sleeve lifts out. The album entry's sleeve shares it. */
[data-profile-record].is-waking::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, 0.03) 39%, rgba(255, 255, 255, 0.1) 44%, rgba(255, 255, 255, 0.16) 50%, rgba(255, 255, 255, 0.1) 56%, rgba(255, 255, 255, 0.03) 61%, rgba(255, 255, 255, 0) 66%) 100% 0 / 300% 300% no-repeat;
    mix-blend-mode: plus-lighter;
    animation: curator-record-waking 4.2s cubic-bezier(0.45, 0, 0.4, 1) 0.15s infinite both;
}
@keyframes curator-record-waking { 0% { background-position: 100% 0; } 80%, 100% { background-position: 0 100%; } }
@media (prefers-reduced-motion: reduce) { [data-profile-record].is-waking::before { content: none; } }
/* A cover sits over nothing once it has arrived, as collection covers do (curator_you.css), not the
   profile's artwork grey: faded in over that grey it washed out, and left a light line on the right
   and bottom. Outranks curator_you.css's artwork rule, which the app shell can load after this file. */
.curator-profile-record:not(.is-open) { background: none; }
:is(#curator-you, .curator-profile-editorial) .curator-profile-record > .curator-profile-record-art:not(.is-loading) { background: none; }
:is(#curator-you, .curator-profile-editorial) .curator-profile-record > .curator-profile-record-art.is-loading { background: color-mix(in srgb, var(--you-ink) 8%, transparent); }
/* While it loads on a dark colour, its place is a shade darker, as the open ones are, not lighter. */
:is(#curator-you, .curator-profile-editorial)[data-profile-ground="dark"] .curator-profile-record > .curator-profile-record-art.is-loading { background: color-mix(in srgb, #000 14%, transparent); }
/* Until its cover has arrived the marks wait, or their edge would show alone as a light border. */
.curator-profile-record-art.is-loading::after { opacity: 0; }
/* The sleeve's own marks, toned down for its place, as the lifted record shows them
   (curator_records.js coverCanvas): handled edges and corners, a soft card sheen. */
.curator-profile-record-art::after {
    content: "";
    transition: opacity 0.34s ease-out;
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.16), transparent 8.5%),
        radial-gradient(circle at 100% 0, rgba(255, 255, 255, 0.16), transparent 8.5%),
        radial-gradient(circle at 0 100%, rgba(255, 255, 255, 0.16), transparent 8.5%),
        radial-gradient(circle at 100% 100%, rgba(255, 255, 255, 0.16), transparent 8.5%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.07), transparent 45%);
    mix-blend-mode: soft-light;
    box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14);
}
/* The owner's open places: shallow hollows in the ground, nothing in them. */
.curator-profile-record.is-still { cursor: default; }
.curator-profile-record.is-open { border-radius: 3px; background: color-mix(in srgb, var(--you-ink) 5.5%, transparent); box-shadow: inset 0 1px 3px color-mix(in srgb, var(--you-ink) 12%, transparent); }
.curator-profile-editorial[data-profile-ground="dark"] .curator-profile-record:not(.is-open) { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.22), 0 2px 5px -1px rgba(0, 0, 0, 0.24); }
.curator-profile-editorial[data-profile-ground="dark"] .curator-profile-record.is-open { background: color-mix(in srgb, #000 14%, transparent); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.22); }
@media (hover: hover) and (pointer: fine) {
    .curator-profile-record:not(.is-open):hover { transform: translateY(-1px); }
}

/* The record out of its place: a stage over the page, the record in the middle. */
.curator-record-stage { position: fixed; inset: 0; z-index: 1000; pointer-events: none; touch-action: none; }
.curator-record-stage.is-live { pointer-events: auto; }
.curator-record-stage.is-open { cursor: grab; }
.curator-record-stage.is-dragging { cursor: grabbing; }
/* A deep dim in the record's own colour (--record-tint, curator_records.js), a little lighter
   behind it so its shadow has something to fall on. No blur: WebKit's backdrop blur striates. */
.curator-record-stage .scrim { position: absolute; inset: 0; background-color: var(--record-tint, #1d1b19); background-image: radial-gradient(85% 55% at 50% 44%, rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0.42)); opacity: 0; transition: opacity 0.35s ease; }
.curator-record-stage.is-open .scrim { opacity: 0.985; }
.curator-record-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Above the app's tab bar where there is one, else above the home indicator. */
.curator-record-stage .actions { position: absolute; left: 0; right: 0; bottom: calc(max(var(--curator-tab-bar-top, 0px), env(safe-area-inset-bottom, 0px)) + 32px); display: flex; justify-content: center; opacity: 0; transform: translateY(8px); transition: opacity 0.25s ease 0.2s, transform 0.3s ease 0.2s; pointer-events: none; }
/* The app from build 20 fades its tab bar with the stage. */
.curator-record-stage.covers-tab-bar .actions { bottom: calc(env(safe-area-inset-bottom, 0px) + 28px); }
.curator-record-stage.is-open .actions { opacity: 1; transform: none; pointer-events: auto; }
.curator-record-stage .actions a { padding: 11px 16px; border-radius: 999px; background: rgba(243, 241, 236, 0.95); color: #302d29; font: var(--rh-compact-button-font); letter-spacing: var(--rh-button-tracking); text-decoration: none; }
/* The owner's: Write about this leads, a fuller pill with a pen; the link below steps back. */
.curator-record-stage .actions.has-write { flex-direction: column; align-items: center; gap: 10px; }
.curator-record-stage .actions .write { display: inline-flex; align-items: center; gap: 9px; height: 48px; padding: 0 24px; border: 0; border-radius: 999px; background: #f3f1ec; color: #302d29; font: 500 17px/1 var(--rh-sans); letter-spacing: -0.02em; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.5); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity 0.18s ease; }
.curator-record-stage .actions .write[hidden] { display: none; }
.curator-record-stage .actions .write svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.curator-record-stage .actions .write.is-busy { opacity: 0.6; }
.curator-record-stage .actions .write:active { opacity: 0.85; }
.curator-record-stage .actions.has-write a { background: rgba(243, 241, 236, 0.16); color: #f3f1ec; }
/* A record's notes take the large pill, as Write about this does (curator_records.js). */
.curator-record-stage .actions.has-write a.write { background: #f3f1ec; color: #302d29; text-decoration: none; }
.curator-record-stage .actions :is(a, .write)[hidden] { display: none; }
/* Open in Spotify carries Spotify's mark. */
.curator-record-stage .actions a:has(svg) { display: inline-flex; align-items: center; gap: 8px; }
.curator-record-stage .actions a svg { flex: none; width: 19px; height: 19px; fill: currentColor; }

/* CSS sleeve (browsers): a card box with a printed back. */
.curator-record-stage .world { position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); transform-origin: 0 0; perspective: 1150px; perspective-origin: 50% 40%; }
.curator-record-stage .object { position: absolute; inset: 0; transform-style: preserve-3d; }
/* Its shadow: the sleeve's shape cast behind it (curator_records.js), softened as a whole. */
.curator-record-stage .cast { position: absolute; inset: 0; pointer-events: none; }
.curator-record-stage .cast i { position: absolute; inset: 0; border-radius: 3px; background: #000; }
.curator-record-stage .face { position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); border-radius: 2.5px; overflow: hidden; }
.curator-record-stage .front { transform: translateZ(calc(var(--t) / 2)); }
.curator-record-stage .back { transform: rotateY(180deg) translateZ(calc(var(--t) / 2)); }
.curator-record-stage .edge { position: absolute; }
.curator-record-stage .edge.left { width: var(--t); height: var(--s); left: calc(var(--t) / -2); top: 0; transform: rotateY(-90deg); background: linear-gradient(90deg, #d9d2c3, #f2ede3 45%, #d4cdbd); }
.curator-record-stage .edge.right { width: var(--t); height: var(--s); left: calc(var(--s) - var(--t) / 2); top: 0; transform: rotateY(90deg); background: linear-gradient(90deg, #e3dccd 0 22%, #2a2622 34% 66%, #e3dccd 78%); }
.curator-record-stage .edge.top { width: var(--s); height: var(--t); top: calc(var(--t) / -2); left: 0; transform: rotateX(90deg); background: linear-gradient(180deg, #ddd6c7, #f3eee4 50%, #d6cfbf); }
.curator-record-stage .edge.bottom { width: var(--s); height: var(--t); top: calc(var(--s) - var(--t) / 2); left: 0; transform: rotateX(-90deg); background: linear-gradient(180deg, #d6cfbf, #ece6da 50%, #cfc7b6); }
.curator-record-stage .shade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.curator-record-stage .art { position: absolute; inset: 0; background-size: cover; background-position: center; }
.curator-record-stage .bulge { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; background: radial-gradient(circle at calc(50% + var(--bx, 0%)) calc(50% + var(--by, 0%)), rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06) 45%, rgba(0, 0, 0, 0.18) 68%, transparent 72%); }
.curator-record-stage .gloss { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: var(--spec, 0.3);
    background: linear-gradient(115deg, transparent calc(var(--band) - 28%), rgba(255, 255, 255, 0.18) calc(var(--band) - 8%), rgba(255, 255, 255, 0.55) var(--band), rgba(255, 255, 255, 0.16) calc(var(--band) + 7%), transparent calc(var(--band) + 22%)); }
.curator-record-stage .print { position: absolute; inset: 0; background: #eee8db; }
.curator-record-stage .print canvas { display: block; width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) { .curator-record-stage :is(.scrim, .actions) { transition: none; } }

/* Edit profile (the web sheet): records and colour. */
/* Opened from an open record place: the section glows softly once, then settles. */
.curator-profile-edit-records.is-pointed { border-radius: 12px; animation: curator-profile-edit-pointed 1.4s ease-out 0.15s both; }
@keyframes curator-profile-edit-pointed {
    0% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--rh-ink) 0%, transparent); background-color: color-mix(in srgb, var(--rh-ink) 0%, transparent); }
    18% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--rh-ink) 6%, transparent); background-color: color-mix(in srgb, var(--rh-ink) 6%, transparent); }
    100% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--rh-ink) 0%, transparent); background-color: color-mix(in srgb, var(--rh-ink) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .curator-profile-edit-records.is-pointed { animation: none; } }
.curator-profile-edit-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.curator-profile-edit-slot { position: relative; display: block; aspect-ratio: 1; padding: 0; border: 0; border-radius: 3px; overflow: hidden; background: none; }
.curator-profile-edit-slot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.curator-profile-edit-slot [data-remove] { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: rgba(23, 22, 21, 0.62); cursor: pointer; }
.curator-profile-edit-slot [data-remove]::before, .curator-profile-edit-slot [data-remove]::after { content: ""; position: absolute; left: 6px; right: 6px; top: 10.25px; height: 1.5px; background: #f3f1ec; transform: rotate(45deg); }
.curator-profile-edit-slot [data-remove]::after { transform: rotate(-45deg); }
/* An open place: a shallow hollow, as the profile shelf shows it. */
.curator-profile-edit-slot.is-open { background: color-mix(in srgb, var(--rh-ink) 5.5%, transparent); box-shadow: inset 0 1px 3px color-mix(in srgb, var(--rh-ink) 12%, transparent); cursor: pointer; }
.curator-profile-edit-search { margin-top: 10px; }
.curator-profile-edit-search input { width: 100%; }
.curator-profile-edit-results { display: grid; margin-top: 6px; max-height: 260px; overflow-y: auto; }
.curator-profile-edit-result { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border: 0; border-radius: 8px; background: none; color: var(--rh-ink); text-align: left; cursor: pointer; }
.curator-profile-edit-result img { width: 40px; height: 40px; border-radius: 2px; object-fit: cover; flex: none; }
.curator-profile-edit-result span { display: grid; min-width: 0; }
.curator-profile-edit-result strong { overflow: hidden; font: 500 14px/1.25 var(--rh-sans); text-overflow: ellipsis; white-space: nowrap; }
.curator-profile-edit-result small { color: var(--rh-muted); font: 400 13px/1.25 var(--rh-sans); }
@media (hover: hover) and (pointer: fine) { .curator-profile-edit-result:hover { background: color-mix(in srgb, var(--rh-ink) 5%, transparent); } }
.curator-profile-edit-swatches { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.curator-profile-edit-swatch { position: relative; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(63, 60, 57, 0.08); cursor: pointer; }
.curator-profile-edit-swatch.is-on { box-shadow: 0 0 0 2px var(--rh-paper), 0 0 0 3.5px var(--rh-ink); }
.curator-profile-edit-swatch.is-none { background: var(--rh-paper); box-shadow: inset 0 0 0 1.5px rgba(63, 60, 57, 0.2); }
.curator-profile-edit-swatch.is-none::after { content: ""; position: absolute; left: 7px; right: 7px; top: 50%; height: 1.5px; background: rgba(63, 60, 57, 0.35); transform: rotate(-45deg); }
.curator-profile-edit-swatch.is-none.is-on { box-shadow: inset 0 0 0 1.5px rgba(63, 60, 57, 0.2), 0 0 0 2px var(--rh-paper), 0 0 0 3.5px var(--rh-ink); }
.curator-profile-edit-swatch.is-custom { background: conic-gradient(#c0392b, #d4a017, #4a8a3f, #2c6fa6, #7b4a8f, #c0392b); }
.curator-profile-edit-swatch.is-custom.is-on { background: var(--swatch); }
.curator-profile-edit-swatch.is-custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

/* Desktop browsers: the colour is the masthead's band alone; the page around it and the content
   sheet stay paper (layout in curator_you.css). */
@media (min-width: 1024px) {
    html:not(.rhune-native-ios) :is([data-curator-profile-surface], body:not(.curator-app-shell-page)):has(main[data-profile-ground]),
    html:not(.rhune-native-ios) :is([data-curator-profile-surface], body:not(.curator-app-shell-page)):has(main[data-profile-ground]) > .site-header { background-color: var(--curator-paper); }
    html:not(.rhune-native-ios) .curator-profile-editorial[data-profile-ground] > .curator-profile-identity { background: var(--pg-tone); }
    /* Signed out, the profile sits inset in the public shell: the band's top rounds as the sheet's does. */
    html:not(.rhune-native-ios) body:not(.curator-app-shell-page) .curator-profile-editorial[data-profile-ground] > .curator-profile-identity { border-radius: 20px 20px 0 0; }
}