/* Artist, album, playlist and release entries in the Rhune page look (rhune_pages.css):
   a still cover with the curator's byline, then the notes sheet rising over it.
   Owners read the same page and write in the compose sheet; one floating bar adds
   tracks and publishes. Note cards keep curator_entry_page.css. */

/* Cover */
.curator-entry-rhune .curator-entry-byline { margin: 0; }
.curator-entry-rhune .curator-entry-byline a { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; max-width: 100%; }
.curator-entry-rhune .curator-entry-byline strong { font-weight: 500; white-space: nowrap; }
/* The name's medium face and the handle's regular one share a baseline; the pair centres on the avatar. */
.curator-entry-byline-names { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.curator-entry-rhune .curator-entry-byline-handle { overflow: hidden; color: var(--rhune-on-deep-muted); font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.curator-entry-rhune .curator-entry-byline .account-verified-seal { width: 15px; height: 15px; flex: 0 0 15px; }
.curator-entry-byline-avatar { position: relative; display: grid; flex: 0 0 24px; place-items: center; width: 24px; height: 24px; overflow: hidden; border-radius: 50%; background: rgba(241, 239, 233, 0.16); color: var(--rhune-on-deep); font-size: 11px; font-weight: 500; }
.curator-entry-byline-avatar img { width: 100%; height: 100%; object-fit: cover; }
.curator-entry-byline-avatar .curator-artwork-loading { border-radius: 50%; }
.curator-entry-rhune .curator-entry-rhune-meta { color: var(--rhune-on-deep-muted); }
/* Releases: the artist and year on one line, the streaming icons at its right. */
.curator-entry-byline-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.curator-entry-byline-row .curator-entry-byline { min-width: 0; }
/* A long artist name wraps in its own column; the year and streaming icons keep their place. */
.curator-entry-byline-row .curator-entry-byline { display: flex; align-items: center; gap: 6px; }
.curator-entry-byline-row .curator-entry-byline a { min-width: 0; }
.curator-entry-byline-row .curator-entry-byline strong { min-width: 0; white-space: normal; line-height: 1.2; }
.curator-entry-byline-row .curator-entry-byline strong .account-verified-seal { display: inline-block; margin-left: 6px; vertical-align: -2px; }
.curator-entry-byline-row > :last-child { flex: none; }
.curator-entry-byline-year { color: var(--rhune-on-deep-muted); font-weight: 400; white-space: nowrap; }
.curator-entry-byline-year::before { content: "·"; margin-right: 6px; }
.curator-entry-rhune .canonical-entry-links { display: flex; flex: 0 0 auto; gap: 4px; margin: 0 -8px 0 0; }
.curator-entry-rhune .canonical-entry-links a { display: grid; place-items: center; width: 36px; height: 36px; color: var(--rhune-on-deep); }
.curator-entry-rhune .canonical-entry-links svg { width: 20px; height: 20px; fill: currentColor; }

/* The cover artwork reveals as the previous entry cover did: a decoded keyframe fade. */
.curator-entry-rhune :is(.curator-entry-sleeve, .curator-entry-portrait).is-revealing img {
    animation: curator-entry-artwork-reveal 0.34s ease-out both;
    transition: none;
}
.curator-entry-rhune .curator-entry-portrait[data-curator-artwork] { background: var(--rhune-deep); }
/* The hero's image waits on dark with a faint, slow sheen: never the light pages' bright sweep. */
.curator-entry-rhune :is(.curator-entry-sleeve, .curator-entry-portrait)[data-curator-artwork] .curator-artwork-skeleton {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.04) 50%, rgba(255, 255, 255, 0) 70%);
    background-size: 200% 100%;
    animation-duration: 2.6s;
    animation-timing-function: ease-in-out;
}
/* Album and playlist covers sit on the dark hero too: they wait, and fade in, on dark,
   with the dark theme's shimmer, instead of the light pages' pale grey. */
.curator-entry-rhune .curator-entry-sleeve[data-curator-artwork] {
    --rh-skeleton-shimmer: linear-gradient(90deg, rgba(255, 255, 255, 0.02) 25%, rgba(255, 255, 255, 0.07) 50%, rgba(255, 255, 255, 0.02) 75%);
    background: color-mix(in srgb, #ffffff 5%, var(--rhune-deep));
}
/* A curator's artist page shows the real image; black and white is Rhune's own pages' treatment. */
.curator-entry-rhune .curator-entry-portrait img { filter: none; }

/* Header controls reverse to paper over the cover, as Rhune pages' do. */
html body.curator-entry-rhune-body.curator-app-shell-page .curator-app-detail-surface:not(.rhune-collapsed) > .site-header :is(.curator-reading-entry-menu--corner summary, .curator-entry-share, .curator-session-trigger, .curator-entry-header-save .curator-save-button) {
    background: rgba(20, 19, 18, 0.32);
    color: #f1efe9;
}
.curator-entry-rhune-body .site-header :is(.curator-reading-entry-menu--corner summary, .curator-entry-share, .curator-entry-header-save .curator-save-button) { transition: background-color 0.2s ease, color 0.2s ease; }

/* The header stays dark over these dark covers. Over the cover a soft scrim runs from
   the status area down behind the controls; docked, the header and status area become
   one dark translucent bar with light title and controls, never the light canvas bar.
   (curator_app_shell.js asks the native shell for a light status bar here; app builds
   that can't do that lack .rhune-native-status-bar and keep the light docked bar.) */
@media (max-width: 1023px) {
    :is(html:not(.rhune-native-app), html.rhune-native-status-bar) body.curator-entry-rhune-body.curator-app-shell-page .curator-app-detail-surface:has(> main.curator-entry-rhune) > .site-header { background: transparent; box-shadow: none; }
    :is(html:not(.rhune-native-app), html.rhune-native-status-bar) body.curator-entry-rhune-body.curator-app-shell-page .curator-app-detail-surface:has(> main.curator-entry-rhune).rhune-collapsed > .site-header { background: transparent; box-shadow: none; }
    :is(html:not(.rhune-native-app), html.rhune-native-status-bar) body.curator-entry-rhune-body.curator-app-shell-page .curator-app-detail-surface:has(> main.curator-entry-rhune) > .site-header::before,
    :is(html:not(.rhune-native-app), html.rhune-native-status-bar) body.curator-entry-rhune-body.curator-app-shell-page .curator-app-detail-surface:has(> main.curator-entry-rhune) > .site-header::after {
        position: absolute;
        z-index: -1;
        top: calc(-1 * env(safe-area-inset-top, 0px));
        right: 0;
        left: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }
    :is(html:not(.rhune-native-app), html.rhune-native-status-bar) body.curator-entry-rhune-body.curator-app-shell-page .curator-app-detail-surface:has(> main.curator-entry-rhune) > .site-header::before {
        height: calc(100% + env(safe-area-inset-top, 0px));
        background: rgba(23, 22, 21, 0.9);
        -webkit-backdrop-filter: saturate(1.4) blur(20px);
        backdrop-filter: saturate(1.4) blur(20px);
        opacity: 0;
    }
    :is(html:not(.rhune-native-app), html.rhune-native-status-bar) body.curator-entry-rhune-body.curator-app-shell-page .curator-app-detail-surface:has(> main.curator-entry-rhune) > .site-header::after {
        height: calc(100% + env(safe-area-inset-top, 0px) + 36px);
        background: linear-gradient(rgba(12, 11, 10, 0.5), rgba(12, 11, 10, 0.22) 58%, rgba(12, 11, 10, 0));
        content: "";
        opacity: 1;
    }
    :is(html:not(.rhune-native-app), html.rhune-native-status-bar) body.curator-entry-rhune-body.curator-app-shell-page .curator-app-detail-surface:has(> main.curator-entry-rhune).rhune-collapsed > .site-header::before { opacity: 1; }
    :is(html:not(.rhune-native-app), html.rhune-native-status-bar) body.curator-entry-rhune-body.curator-app-shell-page .curator-app-detail-surface:has(> main.curator-entry-rhune).rhune-collapsed > .site-header::after { opacity: 0; }
    :is(html:not(.rhune-native-app), html.rhune-native-status-bar) body.curator-entry-rhune-body.curator-app-shell-page .curator-app-detail-surface:has(> main.curator-entry-rhune) > .site-header .rhune-header-title { color: #f1efe9; }
    :is(html:not(.rhune-native-app), html.rhune-native-status-bar) body.curator-entry-rhune-body.curator-app-shell-page .curator-app-detail-surface:has(> main.curator-entry-rhune) > .site-header :is(.curator-app-header-back, .curator-save--header .curator-save-button, .curator-reading-entry-menu--corner summary, .curator-entry-share, .curator-session-trigger) { transition: background-color 0.2s ease, color 0.2s ease; }
    :is(html:not(.rhune-native-app), html.rhune-native-status-bar) body.curator-entry-rhune-body.curator-app-shell-page:not(.curator-artist-detail-page) .curator-app-detail-surface.rhune-collapsed:has(> main.curator-entry-rhune) > .site-header :is(.curator-app-header-back, .curator-save--header .curator-save-button, .curator-reading-entry-menu--corner summary, .curator-entry-share, .curator-session-trigger) {
        background: rgba(241, 239, 233, 0.12);
        color: #f1efe9;
    }
}

/* Sheet: the reading column, as Rhune release tracks set it. */
.curator-entry-rhune .rhune-sheet { padding-top: 26px; }
.curator-entry-rhune.curator-entry-editorial[data-curator-entry-design] :is(.curator-entry-rhune-foreword, .curator-reading-notes, .curator-entry-previews, .curator-entry-comments) {
    box-sizing: border-box;
    width: 100%;
    max-width: calc(760px + var(--rhune-gutter) * 2);
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--rhune-gutter);
    padding-left: var(--rhune-gutter);
}
.curator-entry-rhune.curator-entry-editorial[data-curator-entry-design] .curator-reading-notes { transform: none; }
.curator-entry-rhune .curator-entry-rhune-foreword { margin-top: 4px; margin-bottom: 30px; }
.curator-entry-rhune .curator-entry-rhune-foreword .curator-reading-edit-shell.is-empty [data-curator-editable] { color: color-mix(in srgb, var(--entry-muted) 55%, transparent); }
/* Curator entries: an empty foreword folds away behind the cover's "Add foreword" pill, and is
   written in the app's native composer. The fold animates its row height, so the notes below
   slide rather than jump; it carries the foreword's spacing inside it, and only clips while it moves. */
.curator-entry-rhune .curator-entry-rhune-foreword.is-collapsible {
    display: grid;
    grid-template-rows: 1fr;
    margin-top: 0;
    margin-bottom: 0;
    transition: grid-template-rows 0.36s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.curator-entry-rhune .curator-entry-rhune-foreword.is-collapsed { grid-template-rows: 0fr; }
.curator-entry-foreword-fold { min-height: 0; overflow: hidden; transition: opacity 0.24s ease; }
.curator-entry-foreword-fold > .curator-reading-edit-shell { margin: 4px 0 54px; }
.curator-entry-rhune-foreword.is-settled .curator-entry-foreword-fold { overflow: visible; }
.curator-entry-rhune-foreword.is-collapsed .curator-entry-foreword-fold { opacity: 0; }
.curator-entry-rhune-foreword[data-native-foreword] [data-curator-foreword-text] { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.curator-entry-rhune-foreword[data-native-foreword] .is-empty [data-curator-foreword-text] { color: color-mix(in srgb, var(--entry-muted) 55%, transparent); }
/* Beneath a posted foreword, in the gap before the notes, its heart: a small pill of the notes'
   paper at the right, edged with the cards. Readers see the same. */
.curator-entry-rhune .curator-entry-rhune-foreword.has-actions { margin-bottom: 54px; }
.curator-entry-foreword-body { position: relative; }
.curator-entry-foreword-actions { position: absolute; top: 100%; right: 0; left: 0; display: flex; align-items: center; justify-content: flex-end; height: 32px; margin-top: 8px; }
.curator-entry-foreword-actions .curator-entry-foreword-heart { display: none; height: 30px; min-width: 0; margin: 0; padding: 0 12px; border-radius: 999px; background: var(--rh-note-paper); box-shadow: 0 3px 14px rgba(25, 21, 16, 0.05); }
.curator-entry-rhune-foreword:is(.has-text, .has-actions) .curator-entry-foreword-heart { display: inline-grid; }
.curator-entry-foreword-actions .curator-entry-foreword-heart svg { width: 16px; height: 16px; }
.curator-entry-foreword-heart[data-entry-likers] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* The pill shares the credit's line, overhanging it rather than making it taller, so the title
   above sits as readers see it, and leaving it changes nothing else. */
.curator-entry-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.curator-entry-meta-row > .curator-entry-rhune-meta { min-width: 0; margin-top: 0 !important; }
.curator-entry-foreword-open { flex: none; height: 26px; margin: -2px 0 -2px auto; padding: 0 11px; border: 0; border-radius: 999px; background: rgba(241, 239, 233, 0.12); color: var(--rhune-on-deep); font: 500 13px/1 var(--rh-sans); letter-spacing: -0.01em; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* On an artist's portrait it sits beside the Spotify mark, nearer to it. */
.rhune-portrait .curator-entry-foreword-open { margin-right: -8px; }
.curator-entry-foreword-open:active { background: rgba(241, 239, 233, 0.2); }
@media (hover: hover) and (pointer: fine) {
    .curator-entry-foreword-open:hover { background: rgba(241, 239, 233, 0.18); }
}
@media (prefers-reduced-motion: reduce) {
    .curator-entry-rhune .curator-entry-rhune-foreword.is-collapsible, .curator-entry-foreword-fold { transition: none; }
}
.curator-entry-rhune [data-curator-editable] { cursor: text; outline: none; }
.curator-entry-rhune.is-guest-view [data-curator-editable] { pointer-events: none; }
.curator-entry-rhune .curator-reading-note-list { display: grid; gap: 12px; }
.curator-entry-rhune .curator-entry-empty-copy { margin: 8px 0 0; color: var(--entry-muted); font-size: 15px; }
.curator-entry-rhune .curator-entry-empty { display: grid; gap: 12px; padding: 0 0 24px; }
.curator-entry-rhune .curator-entry-empty[hidden] { display: none; }
/* The first track: a note card waiting to be written, with two ghost rows after it. */
.curator-entry-rhune .curator-entry-first-track {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px;
    border: 0;
    border-radius: 4px;
    background: var(--entry-note-paper);
    color: var(--entry-ink);
    font: inherit;
    text-align: left;
    box-shadow: 0 3px 14px rgba(25, 21, 16, 0.035), 0 0 0 0.5px color-mix(in srgb, var(--entry-ink) 8%, transparent);
    cursor: pointer;
    transition: background-color 0.12s ease;
    -webkit-tap-highlight-color: transparent;
}
.curator-entry-rhune .curator-entry-first-track:active { background: color-mix(in srgb, var(--entry-ink) 5%, var(--entry-note-paper)); }
@media (hover: hover) and (pointer: fine) {
    .curator-entry-rhune .curator-entry-first-track:hover { background: color-mix(in srgb, var(--entry-ink) 3%, var(--entry-note-paper)); }
}
.curator-entry-first-track-plus { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--entry-ink); color: var(--rh-paper); }
.curator-entry-first-track-plus svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.curator-entry-first-track-copy { flex: 1; min-width: 0; }
.curator-entry-first-track-copy strong { display: block; font: 500 17px/1.2 var(--rh-sans); letter-spacing: -0.03em; }
.curator-entry-first-track-copy small { display: block; margin-top: 3px; color: var(--entry-muted); font: 400 14px/1.3 var(--rh-sans); }
.curator-entry-first-track-chevron { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--entry-muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.curator-entry-first-track-ghost { height: 56px; border-radius: 3px; background: color-mix(in srgb, var(--entry-ink) 3.5%, transparent); }
.curator-entry-first-track-ghost:last-child { opacity: 0.55; }
@media (prefers-reduced-motion: reduce) { .curator-entry-rhune .curator-entry-first-track { transition: none; } }
/* Long album and playlist titles on phones: sized from their length (set by the server),
   so the first paint is final and the sheet stays in view. */
@media (max-width: 859px) {
    .curator-entry-rhune .rhune-title[style*="--rhune-title-chars"] { font-size: clamp(30px, calc((100vw - 2 * var(--rhune-gutter)) * 3.6 / var(--rhune-title-chars)), 52px); }
}
/* Curators' album and playlist covers sit a little smaller on phones, centred, so more
   of the notes sheet shows on arrival. */
@media (max-width: 859px) {
    .curator-entry-rhune-cover--compact { padding-bottom: 38px; }
    .curator-entry-rhune-cover--compact .rhune-sleeve-wrap { width: 72%; margin: 0 auto; }
    .curator-entry-rhune-cover--compact .rhune-cover-text { margin-top: 24px; }
    .curator-entry-rhune-cover--compact .rhune-title { font-size: 38px; line-height: 1.02; }
    .curator-entry-rhune-cover--compact .rhune-title[style*="--rhune-title-chars"] { font-size: clamp(26px, calc((100vw - 2 * var(--rhune-gutter)) * 2.7 / var(--rhune-title-chars)), 38px); }
}

/* Release groups on artist entries. */
.curator-note-group + .curator-note-group { margin-top: 28px; }
.curator-note-group-head { display: flex; align-items: center; gap: 12px; padding: 0 0 12px; color: var(--entry-ink); }
.curator-note-group-head[href] { text-decoration: none; }
.curator-note-group-art { position: relative; flex: 0 0 40px; width: 40px; height: 40px; overflow: hidden; background: var(--entry-art); }
.curator-note-group-art img { width: 100%; height: 100%; object-fit: cover; }
.curator-note-group-copy { display: block; flex: 1; min-width: 0; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.curator-note-group-copy strong { font-size: 17px; font-weight: 500; line-height: 1.25; letter-spacing: -0.025em; }
.curator-note-group-year { color: var(--entry-muted); font-size: 15px; letter-spacing: -0.01em; }
.curator-note-group-chevron { flex: none; width: 18px; height: 18px; margin-left: auto; fill: none; stroke: var(--entry-muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.curator-note-group-notes { display: grid; gap: 12px; }

/* Note cards: owners tap the text to write. */
.curator-entry-rhune .curator-reading-note-meta { align-items: center; }
/* A long track title wraps in its own column; the "…" stays level with its first line. */
.curator-entry-rhune.curator-entry-editorial[data-curator-entry-design] .curator-reading-note-heading-line { flex-wrap: nowrap; align-items: flex-start; }
.curator-entry-rhune .curator-reading-note-heading-line > h2 { flex: 1 1 auto; min-width: 0; }
.curator-note-menu-button { display: grid; flex: none; place-items: center; width: 36px; height: 36px; margin: -6px -10px -6px 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--entry-muted); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.curator-note-menu-button svg { width: 20px; height: 20px; fill: currentColor; }
.curator-note-menu-button:active { background: color-mix(in srgb, var(--entry-ink) 8%, transparent); }
/* Arriving at a note: a line draws under its title from the left, holds briefly, and slips away to the right. */
.curator-entry-rhune .curator-note-title { position: relative; display: inline-block; }
.curator-entry-rhune .curator-note-title::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px; border-radius: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; pointer-events: none; }
.curator-entry-rhune .curator-reading-note-row:is(:target, .is-arriving) .curator-note-title::after { animation: curator-note-arrive 1.2s both; }
@keyframes curator-note-arrive {
    0% { transform: scaleX(0); transform-origin: left center; animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); }
    32% { transform: scaleX(1); transform-origin: left center; }
    65% { transform: scaleX(1); transform-origin: right center; animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); }
    100% { transform: scaleX(0); transform-origin: right center; }
}
.curator-entry-rhune .curator-reading-note-row.is-leaving { overflow: hidden; animation: curator-note-leave 0.26s cubic-bezier(0.4, 0, 1, 1) both; }
@keyframes curator-note-leave { to { opacity: 0; transform: scale(0.98); } }
.curator-entry-rhune .curator-reading-note-row[hidden] { display: none; }

/* Drafts, seen only by the owner: the same card in pencil (half its fill, muted text), its foot
   saying Draft. Publishing inks each card in; "Draft ·" folds away and the date slides over. */
.curator-entry-rhune .curator-reading-note-card { transition: background-color 0.45s ease var(--note-ink-delay, 0s), box-shadow 0.45s ease var(--note-ink-delay, 0s); }
.curator-entry-rhune .curator-reading-note-text { transition: color 0.45s ease var(--note-ink-delay, 0s); }
.curator-entry-rhune .curator-reading-note-row.is-draft .curator-reading-note-card { background-color: color-mix(in srgb, var(--entry-note-paper) 45%, transparent); box-shadow: 0 3px 14px transparent; }
.curator-entry-rhune .curator-reading-note-row.is-draft .curator-reading-note-text { color: var(--entry-muted); }
/* A draft opens for writing on a tap. */
.curator-entry-rhune:not(.is-guest-view) .curator-reading-note-row.is-draft .curator-reading-note-card { cursor: text; }
.curator-note-draft-label { display: inline-block; max-width: 0; overflow: hidden; vertical-align: bottom; white-space: pre; opacity: 0; transition: max-width 0.38s cubic-bezier(0.2, 0.7, 0.2, 1) var(--note-ink-delay, 0s), opacity 0.22s ease var(--note-ink-delay, 0s); }
.curator-reading-note-row.is-draft .curator-note-draft-label { max-width: 5em; opacity: 1; }

/* Hearts: anyone signed in can heart a published note; its count is public from 1 up. */
.curator-note-heart { display: inline-grid; grid-auto-flow: column; place-items: center; gap: 5px; min-width: 40px; height: 40px; padding: 0 11px; border: 0; border-radius: 20px; background: transparent; color: var(--entry-muted); font: 400 13px/1 var(--rh-sans); font-variant-numeric: tabular-nums; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.curator-note-heart svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linejoin: round; transition: transform 0.2s cubic-bezier(0.3, 1.4, 0.5, 1), fill 0.15s ease; }
.curator-note-heart [hidden] { display: none; }
.curator-note-heart.is-hearted { color: var(--entry-tone, var(--entry-ink)); }
.curator-note-heart.is-hearted svg { fill: currentColor; transform: scale(1.06); }
/* Hearting: the heart lifts and settles as it fills. */
.curator-note-heart.is-popping svg { animation: curator-note-heart-pop 0.36s cubic-bezier(0.2, 0.9, 0.3, 1.25) both; }
@keyframes curator-note-heart-pop {
    0% { transform: scale(1); }
    45% { transform: scale(1.24); }
    100% { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { .curator-note-heart.is-popping svg { animation: none; } }
.curator-note-heart.is-static { cursor: default; }
.curator-reading-note-row.is-draft .curator-note-heart { opacity: 0.45; cursor: default; }
/* Held to list who liked it (the author, in the app): no text selection or system callout. */
.curator-note-heart[data-note-likers] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* View as guest shows the heart and its count as a reader sees them, without your own heart. */
.curator-entry-rhune.is-guest-view .curator-note-heart { pointer-events: none; color: var(--entry-muted); }
.curator-entry-rhune.is-guest-view .curator-note-heart svg { fill: none; transform: none; }
/* The card's foot: its date on the left; the heart, then the preview, on the right (as on the Board). */
.curator-note-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; margin: 4px 0 -10px; }
.curator-note-foot .listener-note-attribution { margin: 0; }
.curator-note-date { margin: 0; color: var(--entry-muted); font: 400 13px/1.3 var(--rh-sans); letter-spacing: -0.005em; font-variant-numeric: tabular-nums; }
.curator-note-foot-actions { display: flex; align-items: center; gap: 0; margin-right: -11px; }
/* The listen glyph matches the heart beside it: the same colour and stroke, and the same height
   (its shape fills less of its box, so the box is larger), on the same centre line. */
.curator-note-foot-actions .curator-track-media-toggle { width: 20px; height: 20px; margin: 0 10px 0 3px; color: var(--entry-muted); transform: translateY(-0.6px); }
.curator-note-foot-actions :is(.curator-track-media-toggle, .curator-track-media-icon--headphones, .curator-track-media-icon--loading) svg { width: 20px; height: 20px; stroke-width: 1.6; }
/* Apple Music, while a preview plays: in the row, between the heart and the headphones. */
.curator-note-foot-actions .curator-reading-note-provider { position: static; display: none; width: 30px; height: 30px; transform: none; }
.curator-note-foot-actions .curator-reading-note-provider svg { width: 13px; height: 13px; }
[data-track-card][data-has-track-provider="true"].is-playing .curator-note-foot-actions .curator-reading-note-provider:not([hidden]) { display: inline-flex; }
@starting-style { [data-track-card].is-playing .curator-note-foot-actions .curator-reading-note-provider { opacity: 0; } }

/* Album entries: every track is a card. Written tracks are note cards; the owner's
   unwritten tracks are quieter, compact cards with "+ Write". */
.curator-entry-rhune .curator-entry-tracklist { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.curator-entry-rhune .curator-entry-tracklist .rhune-track--note,
.curator-entry-rhune .curator-entry-tracklist .rhune-track--row { margin: 0; padding: 0; border: 0; }
.curator-entry-rhune .curator-entry-tracklist .rhune-track--row { display: block; }
.curator-track-blank { display: flex; align-items: center; gap: 12px; min-height: 56px; box-sizing: border-box; padding: 10px 14px 10px 1.15rem; border-radius: 3px; background: color-mix(in srgb, var(--entry-ink) 3.5%, transparent); }
.curator-track-blank h3 { flex: 1; min-width: 0; margin: 0; color: color-mix(in srgb, var(--entry-ink) 78%, transparent); font: 500 16px/1.25 var(--rh-sans); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.curator-album-track-write { display: inline-flex; flex: none; align-items: center; gap: 5px; height: 32px; padding: 0 12px; border: 0; border-radius: 16px; background: color-mix(in srgb, var(--entry-ink) 7%, transparent); color: color-mix(in srgb, var(--entry-ink) 80%, transparent); font: 400 13px/1 var(--rh-sans); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.curator-album-track-write svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.curator-album-track-write:active { opacity: 0.7; }
/* Opened straight into the writer: the waiting card keeps its place out of sight. If the writer
   closes with nothing written, the card it comes back as fades in. */
.curator-track-blank.is-held { visibility: hidden; }
.curator-track-blank.is-returning { animation: curator-track-return 0.28s ease-out both; }
@keyframes curator-track-return { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .curator-track-blank.is-returning { animation: none; } }
/* A song waiting on an artist page (from On repeat): its title is underlined once as the page arrives, as a note is. */
.curator-track-blank.is-waiting .curator-note-title::after { animation: curator-note-arrive 1.2s 0.25s both; }
@media (prefers-reduced-motion: reduce) { .curator-track-blank.is-waiting .curator-note-title::after { animation: none; } }
/* Titles line up with the written cards', whose padding widens above phone widths. */
@media (min-width: 801px) { .curator-track-blank { padding-left: 1.6rem; } }
/* Readers never get unwritten cards; View as guest hides them too, as it hides drafts. */
.curator-entry-rhune.is-guest-view .curator-entry-tracklist .rhune-track--row,
.curator-entry-rhune.is-guest-view .rhune-track--note:has(> .curator-reading-note-row.is-draft) { display: none; }
.curator-entry-rhune.is-guest-view .curator-note-group:not(:has(.curator-reading-note-row:not(.is-draft))) { display: none; }

/* A release header opens the curator's album entry, when there is one. */
a.curator-note-group-head { color: inherit; -webkit-tap-highlight-color: transparent; }
a.curator-note-group-head:active { opacity: 0.7; }

/* Action sheet: a short list of actions over the page, as the app's other sheets. */
.curator-action-sheet {
    position: fixed;
    inset: auto 0 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 22px 22px 0 0;
    background: var(--rh-paper);
    color: var(--rh-ink);
    font-family: var(--rh-sans);
    box-shadow: 0 -18px 50px -24px rgba(0, 0, 0, 0.35);
}
.curator-action-sheet:focus { outline: none; }
.curator-action-sheet::backdrop { background: rgba(18, 17, 16, 0.28); }
.curator-action-sheet[open] { animation: curator-compose-in 0.32s cubic-bezier(0.32, 0.72, 0, 1) both; }
.curator-action-sheet.is-closing { animation: curator-compose-out 0.22s cubic-bezier(0.4, 0, 1, 1) both; }
.curator-action-sheet[open]::backdrop { animation: curator-compose-fade 0.32s ease both; }
.curator-action-sheet-frame { display: grid; gap: 6px; padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
.curator-action-sheet-title { margin: 0; padding: 4px 6px 10px; overflow: hidden; color: var(--rh-muted); font-size: 14px; letter-spacing: -0.01em; text-overflow: ellipsis; white-space: nowrap; }
.curator-action-sheet-title strong { color: var(--rh-ink); font-weight: 500; }
.curator-action-sheet-row {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 52px;
    padding: 0 18px;
    border: 0;
    border-radius: 14px;
    background: color-mix(in srgb, var(--rh-ink) 3.5%, transparent);
    color: var(--rh-ink);
    font: 400 16px/1.2 var(--rh-sans);
    letter-spacing: -0.015em;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.curator-action-sheet-row[hidden] { display: none; }
/* Replace a pin (curator_pins.js): each pinned page as a row, its cover and title. */
/* Pinned / unpinned (curator_pins.js): a small pill in the middle of the screen that comes and goes
   by itself, touching nothing beneath it. */
.curator-pin-confirm {
    position: fixed;
    z-index: 60;
    top: 50%;
    left: 50%;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 999px;
    /* Paper, as the record stage's pills: it reads over a dark cover header and the light page alike. */
    background: #f3f1ec;
    color: #302d29;
    box-shadow: 0 0 0 0.5px rgba(40, 36, 33, 0.08), 0 14px 34px -12px rgba(0, 0, 0, 0.45);
    font: 500 15px/1.2 var(--rh-sans);
    letter-spacing: -0.02em;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.96);
    transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: none;
}
.curator-pin-confirm.is-shown { opacity: 1; transform: translate(-50%, -50%); }
.curator-pin-confirm .curator-pin-icon { flex: none; width: 15px; height: 15px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.curator-pin-confirm .curator-pin-icon-body { fill: currentColor; }
@media (prefers-reduced-motion: reduce) {
    .curator-pin-confirm { transform: translate(-50%, -50%); transition: opacity 0.2s ease; }
}
.curator-pin-sheet-rows { display: grid; gap: 6px; }
/* In the app the native tab bar sits over the page's foot: Cancel clears it, as the owner bar does. */
.curator-app-shell-page .curator-pin-sheet .curator-action-sheet-frame { padding-bottom: calc(max(var(--curator-tab-bar-top, 0px), env(safe-area-inset-bottom, 0px)) + 16px); }
.curator-pin-sheet-row { gap: 12px; min-height: 64px; padding: 10px 14px; }
.curator-pin-sheet-art { flex: none; width: 44px; height: 44px; overflow: hidden; border-radius: 3px; background: color-mix(in srgb, var(--rh-ink) 8%, transparent); }
.curator-pin-sheet-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.curator-pin-sheet-text { display: grid; gap: 3px; min-width: 0; }
.curator-pin-sheet-text :is(strong, small) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.curator-pin-sheet-text strong { font-weight: 500; }
.curator-pin-sheet-text small { color: var(--rh-muted); font-size: 13px; }
.curator-action-sheet-row:active { background: color-mix(in srgb, var(--rh-ink) 8.5%, transparent); }
.curator-action-sheet-row.is-destructive { color: var(--rh-danger); }
.curator-action-sheet-row.is-cancel { justify-content: center; margin-top: 4px; background: transparent; font-weight: 500; }
@media (hover: hover) and (pointer: fine) {
    .curator-action-sheet-row:hover { background: color-mix(in srgb, var(--rh-ink) 8.5%, transparent); }
    .curator-action-sheet-row.is-cancel:hover { background: color-mix(in srgb, var(--rh-ink) 3.5%, transparent); }
}
@media (min-width: 700px) {
    .curator-action-sheet { inset: 0; width: min(400px, calc(100vw - 48px)); height: fit-content; margin: auto; border-radius: 18px; }
    .curator-action-sheet-frame { padding-bottom: 16px; }
    .curator-action-sheet[open] { animation: curator-compose-in-wide 0.24s ease both; }
    .curator-action-sheet.is-closing { animation: curator-compose-out-wide 0.18s ease both; }
}
@media (prefers-reduced-motion: reduce) { .curator-action-sheet[open], .curator-action-sheet.is-closing { animation: none; } }

/* Previews: the entry deck after the notes. */
.curator-entry-rhune .curator-entry-previews { margin-top: 40px; }
/* Without the record player, comments keep its distance from the last note. */
.curator-entry-rhune .curator-entry-previews[hidden] + .curator-entry-comments { margin-top: 40px; }
.curator-entry-rhune .curator-entry-previews > .rhune-section-title { padding: 0 0 4px; }
.curator-entry-rhune .curator-entry-previews-stage { display: flex; align-items: center; gap: 14px; min-height: 104px; padding: 12px 0 8px; }

/* Owner bar: one pill above the tab bar. */
/* Room for the owner bar after the last section. The app surface already clears its tab bar. */
.curator-entry-rhune.is-owner-page .rhune-sheet { padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }
.curator-app-detail-surface > main.rhune-page.curator-entry-rhune.is-owner-page .rhune-sheet { padding-bottom: 76px; }
/* Readers: room for the focus dock beside the last section. */
.curator-app-detail-surface > main.rhune-page.curator-entry-rhune:not(.is-owner-page) .rhune-sheet { padding-bottom: 96px; }
/* The mini player and the focus dock share the bottom of the screen; the dock steps aside while it plays. */
.curator-focus-popover { transition: opacity 0.2s ease; }
body.curator-entry-mini-playing .curator-focus-popover { opacity: 0; pointer-events: none; }
.curator-entry-owner-bar,
.curator-entry-reorder-bar {
    position: fixed;
    z-index: 28;
    left: 50%;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: center;
    gap: 4px;
    box-sizing: border-box;
    max-width: calc(100vw - 32px);
    padding: 4px;
    border-radius: 26px;
    background: color-mix(in srgb, var(--rh-paper) 94%, transparent);
    color: var(--entry-ink);
    box-shadow: 0 10px 28px -10px rgba(24, 21, 17, 0.28);
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    transform: translateX(-50%);
    transition: opacity 0.2s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Shadows barely read on dark paper, so the edge does that job there. */
body.dark-mode :is(.curator-entry-owner-bar, .curator-entry-reorder-bar) { box-shadow: 0 0 0 0.5px var(--entry-line), 0 10px 28px -10px rgba(0, 0, 0, 0.5); }
.curator-entry-owner-bar[hidden],
.curator-entry-reorder-bar[hidden] { display: none; }
@media (max-width: 1023px) {
    .curator-app-shell-page :is(.curator-entry-owner-bar, .curator-entry-reorder-bar) { bottom: calc(var(--curator-tab-bar-top) + 14px); }
}
@media (min-width: 1024px) {
    .curator-app-shell-page :is(.curator-entry-owner-bar, .curator-entry-reorder-bar) { left: calc(50% + var(--curator-sidebar-width, 220px) / 2); }
}
.curator-entry-owner-bar button,
.curator-entry-reorder-bar button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: 22px;
    background: transparent;
    color: inherit;
    font: var(--rh-compact-button-font);
    letter-spacing: -0.02em;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
/* The + takes the first-track card's ink disc, so adding a track looks the same before and after. */
.curator-entry-owner-bar .curator-entry-owner-add { gap: 9px; padding-left: 4px; }
.curator-entry-owner-add-disc { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--entry-ink); color: var(--rh-paper); }
.curator-entry-owner-add svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.curator-entry-owner-add[hidden] { display: none !important; }
.curator-entry-owner-divider { width: 1px; height: 20px; background: var(--entry-line); }
.curator-entry-owner-add[hidden] + .curator-entry-owner-divider { display: none; }
/* Nothing to publish yet (a new page with only a waiting song): Add track stands alone. */
.curator-entry-owner-bar:not(:has(> :is(.curator-entry-owner-publish, .curator-entry-owner-published, .curator-entry-owner-switch):not([hidden]))) .curator-entry-owner-divider { display: none; }
.curator-entry-owner-bar .curator-entry-owner-publish,
.curator-entry-reorder-bar .curator-entry-owner-publish { background: var(--entry-ink); color: var(--rhune-paper); }
.curator-entry-owner-publish[hidden] { display: none !important; }
/* The first finished note: a callout above Publish, and a soft ring on it. */
.curator-entry-publish-hint {
    position: absolute;
    right: 4px;
    bottom: calc(100% + 12px);
    width: max-content;
    max-width: min(240px, calc(100vw - 48px));
    margin: 0;
    padding: 11px 14px;
    border-radius: 12px;
    background: var(--entry-ink);
    color: var(--rhune-paper);
    font: 400 15px/1.35 var(--rh-sans);
    letter-spacing: -0.01em;
    box-shadow: 0 12px 26px -14px rgba(24, 21, 17, 0.45);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}
.curator-entry-publish-hint::after { content: ""; position: absolute; right: 36px; bottom: -5px; width: 11px; height: 11px; border-radius: 2px; background: inherit; transform: rotate(45deg); }
.curator-entry-publish-hint.is-visible { opacity: 1; transform: none; }
.curator-entry-owner-bar .curator-entry-owner-publish.is-hinted { box-shadow: 0 0 0 3px color-mix(in srgb, var(--entry-ink) 18%, transparent); transition: box-shadow 0.28s ease; }
@media (prefers-reduced-motion: reduce) { .curator-entry-publish-hint { transition: none; transform: none; } }
.curator-entry-owner-publish.is-pending { opacity: 0.6; }
.curator-entry-owner-publish.is-rejected { animation: curator-entry-owner-reject 0.42s ease; }
@keyframes curator-entry-owner-reject { 25%, 75% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }
/* Releases: Publish / Published beside an on/off switch for the whole page. */
.curator-entry-owner-bar .curator-entry-owner-switch { gap: 10px; padding: 0 12px 0 14px; }
.curator-entry-owner-switch-track { position: relative; flex: none; width: 34px; height: 20px; border-radius: 10px; background: color-mix(in srgb, var(--entry-ink) 14%, var(--rh-paper)); transition: background-color 0.2s ease; }
.curator-entry-owner-switch-track > span { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--rh-paper); box-shadow: 0 1px 2px rgba(24, 21, 17, 0.18); transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); }
.curator-entry-owner-switch.is-on .curator-entry-owner-switch-track { background: var(--entry-ink); }
.curator-entry-owner-switch.is-on .curator-entry-owner-switch-track > span { transform: translateX(14px); }
.curator-entry-owner-switch.is-pending { opacity: 0.6; }
.curator-entry-owner-switch.is-rejected { animation: curator-entry-owner-reject 0.42s ease; }
/* The first note on an unpublished release: the track darkens as the knob nudges towards on, twice. */
.curator-entry-owner-switch.is-peeking:not(.is-on) .curator-entry-owner-switch-track { animation: curator-entry-switch-peek 0.8s cubic-bezier(0.33, 0, 0.2, 1) 0.3s 2; }
.curator-entry-owner-switch.is-peeking:not(.is-on) .curator-entry-owner-switch-track > span { animation: curator-entry-switch-peek-knob 0.8s cubic-bezier(0.33, 0, 0.2, 1) 0.3s 2; }
@keyframes curator-entry-switch-peek { 45% { background-color: color-mix(in srgb, var(--entry-ink) 34%, var(--rh-paper)); } }
@keyframes curator-entry-switch-peek-knob { 0%, 100% { transform: translateX(0); } 45% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) {
    .curator-entry-owner-switch-track, .curator-entry-owner-switch-track > span { transition: none; }
    .curator-entry-owner-switch.is-peeking .curator-entry-owner-switch-track,
    .curator-entry-owner-switch.is-peeking .curator-entry-owner-switch-track > span { animation: none; }
}
.curator-entry-owner-published { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px 0 12px; color: var(--entry-muted); font-size: 14px; letter-spacing: -0.02em; white-space: nowrap; }
.curator-entry-owner-published[hidden] { display: none; }
.curator-entry-owner-bar:active button:active,
.curator-entry-reorder-bar button:active { opacity: 0.72; }
@media (hover: hover) and (pointer: fine) {
    .curator-entry-owner-add:hover { background: color-mix(in srgb, var(--entry-ink) 6%, transparent); }
}
.curator-entry-reorder-bar > span { padding: 0 8px 0 14px; color: var(--entry-muted); font-size: 14px; letter-spacing: -0.02em; white-space: nowrap; }
.curator-entry-rhune.is-composing .curator-entry-owner-bar { opacity: 0; pointer-events: none; }

/* Saving and publishing messages sit just above the bar. */
:is(.curator-entry-rhune, .curator-longform-shell) .curator-entry-save-state {
    z-index: 29;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px) + 60px);
    padding: 0.55rem 0.8rem;
    border: 0;
    border-radius: 10px;
    background: color-mix(in srgb, var(--rh-paper) 96%, transparent);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    color: var(--entry-ink);
    font: 400 13px/1.35 var(--rh-sans);
    letter-spacing: -0.01em;
    text-transform: none;
    white-space: nowrap;
}
:is(.curator-entry-rhune, .curator-longform-shell) .curator-entry-save-state.is-error { color: var(--rh-danger); }
@media (max-width: 1023px) {
    .curator-app-shell-page :is(.curator-entry-rhune, .curator-longform-shell) .curator-entry-save-state { bottom: calc(var(--curator-tab-bar-top) + 74px); }
}

/* Toast: delete with Undo. */
.curator-entry-toast {
    position: fixed;
    z-index: 30;
    left: 50%;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px) + 60px);
    display: flex;
    align-items: center;
    gap: 14px;
    box-sizing: border-box;
    max-width: calc(100vw - 32px);
    min-height: 48px;
    padding: 6px 6px 6px 18px;
    border-radius: 12px;
    background: var(--rh-menu-background);
    color: var(--rh-menu-foreground);
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.45);
    font: 400 14px/1.3 var(--rh-sans);
    letter-spacing: -0.015em;
    transform: translate(-50%, 0);
    animation: curator-entry-toast-in 0.26s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.curator-entry-toast[hidden] { display: none; }
.curator-entry-toast.is-leaving { animation: curator-entry-toast-out 0.18s ease both; }
.curator-entry-toast button { min-height: 36px; padding: 0 12px; border: 0; border-radius: 8px; background: rgba(241, 239, 233, 0.12); color: inherit; font: var(--rh-compact-button-font); letter-spacing: -0.02em; cursor: pointer; }
.curator-entry-toast button[hidden] { display: none; }
@keyframes curator-entry-toast-in { from { opacity: 0; transform: translate(-50%, 12px); } }
@keyframes curator-entry-toast-out { to { opacity: 0; transform: translate(-50%, 8px); } }
@media (max-width: 1023px) {
    .curator-app-shell-page .curator-entry-toast { bottom: calc(var(--curator-tab-bar-top) + 74px); }
}

/* Now playing: the Board's mini player, while a preview plays out of sight. */
.curator-entry-rhune .curator-entry-mini-player {
    position: fixed;
    z-index: 27;
    left: 50%;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px) + 60px);
    width: min(360px, calc(100vw - 32px));
    margin: 0;
    transform: translate(-50%, 14px);
}
.curator-entry-rhune .curator-entry-mini-player.is-visible { transform: translate(-50%, 0); }
.curator-entry-rhune:not(.is-owner-page) .curator-entry-mini-player { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 1023px) {
    .curator-app-shell-page .curator-entry-rhune .curator-entry-mini-player { bottom: calc(var(--curator-tab-bar-top) + 74px); }
    .curator-app-shell-page .curator-entry-rhune:not(.is-owner-page) .curator-entry-mini-player { bottom: calc(var(--curator-tab-bar-top) + 14px); }
}
@media (min-width: 1024px) {
    .curator-app-shell-page .curator-entry-rhune :is(.curator-entry-mini-player, .curator-entry-toast) { left: calc(50% + var(--curator-sidebar-width, 220px) / 2); }
}

/* Compose sheet: full height on phones, a tall card on larger screens. */
.curator-compose-sheet {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: var(--compose-height, 100dvh);
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--rh-paper);
    color: var(--entry-ink, var(--rh-ink));
    font-family: var(--rh-sans);
    overflow: hidden;
    /* The sheet stops at the visible viewport; its paper carries on below it, behind the
       keyboard's translucent bar, so the page never shows between the two. */
    box-shadow: 0 var(--compose-height, 100dvh) 0 0 var(--rh-paper);
}
.curator-compose-sheet::backdrop { background: rgba(18, 17, 16, 0.32); }
.curator-compose-sheet[open] { animation: curator-compose-in 0.36s cubic-bezier(0.32, 0.72, 0, 1) both; }
.curator-compose-sheet.is-closing { animation: curator-compose-out 0.24s cubic-bezier(0.4, 0, 1, 1) both; }
.curator-compose-sheet[open]::backdrop { animation: curator-compose-fade 0.36s ease both; }
.curator-compose-sheet.is-closing::backdrop { animation: curator-compose-fade 0.24s ease reverse both; }
@keyframes curator-compose-in { from { transform: translateY(100%); } }
@keyframes curator-compose-out { to { transform: translateY(100%); } }
@keyframes curator-compose-fade { from { opacity: 0; } }
.curator-compose-frame {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100%;
    padding: env(safe-area-inset-top, 0px) max(20px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(20px, env(safe-area-inset-left, 0px));
}
.curator-compose-bar { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 0; }
.curator-compose-close { flex: none; min-height: 44px; margin-left: -6px; padding: 0 6px; border: 0; background: none; color: var(--entry-muted, var(--rh-muted)); font: 400 15px/1 var(--rh-sans); letter-spacing: -0.01em; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.curator-compose-close:active { opacity: 0.6; }
@media (hover: hover) and (pointer: fine) { .curator-compose-close:hover { color: var(--entry-ink, var(--rh-ink)); } }
.curator-compose-status { flex: 1; text-align: center; min-width: 0; color: var(--entry-muted, var(--rh-muted)); font-size: 13px; letter-spacing: -0.01em; opacity: 0; transition: opacity 0.2s ease; }
.curator-compose-status.is-visible { opacity: 1; }
.curator-compose-status.is-error { color: var(--rh-danger); }
.curator-compose-done {
    min-height: 40px;
    margin-right: -4px;
    padding: 0 18px;
    border: 0;
    border-radius: 20px;
    background: var(--entry-ink, var(--rh-ink));
    color: var(--rh-paper);
    font: var(--rh-compact-button-font);
    letter-spacing: -0.02em;
    cursor: pointer;
}
.curator-compose-done:active { opacity: 0.75; }
/* Post waits for writing. */
.curator-compose-done:disabled { opacity: 0.35; cursor: default; }
.curator-compose-done { transition: opacity 0.15s ease; }
.curator-compose-track { display: flex; flex: none; align-items: center; gap: 14px; padding: 8px 0 18px; border-bottom: 1px solid var(--entry-line, var(--rh-line)); }
.curator-compose-track[hidden] { display: none; }
.curator-compose-art { position: relative; flex: 0 0 56px; width: 56px; height: 56px; overflow: hidden; background: var(--rh-skeleton-base); }
.curator-compose-art:empty { display: none; }
.curator-compose-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.curator-compose-copy { display: grid; flex: 1; gap: 2px; min-width: 0; }
.curator-compose-copy strong { overflow: hidden; font-size: 18px; font-weight: 500; line-height: 1.25; letter-spacing: -0.03em; text-overflow: ellipsis; white-space: nowrap; }
.curator-compose-copy small { overflow: hidden; color: var(--entry-muted, var(--rh-muted)); font-size: 13px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.curator-compose-preview { flex: none; }
.curator-compose-field { display: flex; flex: 1; min-height: 0; padding-top: 16px; }
.curator-compose-field textarea {
    flex: 1;
    box-sizing: border-box;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0 0 24px;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font: 400 17px/1.7 var(--rh-sans);
    letter-spacing: -0.012em;
    resize: none;
    caret-color: var(--entry-tone, currentColor);
}
.curator-compose-field textarea::placeholder { color: color-mix(in srgb, var(--entry-muted, var(--rh-muted)) 70%, transparent); }
.curator-compose-sheet.is-foreword .curator-compose-field textarea { font-size: 22px; font-weight: 500; line-height: 1.2; letter-spacing: -0.04em; }
.curator-compose-counter { position: absolute; right: max(20px, env(safe-area-inset-right, 0px)); bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); color: var(--entry-muted, var(--rh-muted)); font-size: 12px; font-variant-numeric: tabular-nums; }
.curator-compose-counter.is-limit-hit { color: var(--rh-danger); }
.curator-compose-counter[hidden] { display: none; }
@media (min-width: 700px) {
    .curator-compose-sheet { inset: 0; width: min(640px, calc(100vw - 48px)); height: min(720px, calc(100dvh - 96px)); margin: auto; border-radius: 18px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.45); }
    .curator-compose-frame { padding: 8px 28px 20px; }
    .curator-compose-counter { right: 28px; bottom: 14px; }
    .curator-compose-sheet[open] { animation-name: curator-compose-in-wide; animation-duration: 0.28s; }
    .curator-compose-sheet.is-closing { animation-name: curator-compose-out-wide; }
    @keyframes curator-compose-in-wide { from { opacity: 0; transform: translateY(24px) scale(0.98); } }
    @keyframes curator-compose-out-wide { to { opacity: 0; transform: translateY(16px) scale(0.98); } }
}
body.dark-mode .curator-compose-sheet { --entry-ink: #e7e3db; --entry-muted: #a7a098; --entry-line: #363431; }

/* Track picker: noted tracks carry a tick in a third column. */
.curator-item-picker-list > button[data-curator-item-choice] { grid-template-columns: 48px minmax(0, 1fr) 22px; }
.curator-item-picker-list > button > .curator-item-picker-tick { display: block; width: 22px; height: 22px; color: var(--entry-ink, var(--rh-ink)); visibility: hidden; }
.curator-item-picker-tick svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[data-curator-item-choice].is-noted .curator-item-picker-tick { visibility: visible; }
[data-curator-item-choice][hidden] { display: none !important; }

/* Reorder mode: handles on each note, everything else steps back. */
.curator-entry-rhune.is-reordering :is(.curator-entry-rhune-foreword, .curator-entry-previews, .listener-notes-heading, .listener-notes-list) { opacity: 0.35; pointer-events: none; }
.curator-entry-rhune.is-reordering .curator-reading-note-text { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.curator-entry-rhune.is-reordering .curator-reading-note-meta > :not(.curator-note-handle) { display: none; }
.curator-note-handle { display: none; flex: none; place-items: center; width: 40px; height: 40px; margin: -6px -10px -6px 0; border: 0; background: transparent; color: var(--entry-muted); cursor: grab; touch-action: none; }
.curator-note-handle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.curator-entry-rhune.is-reordering .curator-note-handle { display: grid; }
.curator-entry-rhune.is-reordering .curator-reading-note-row { touch-action: pan-y; }
.curator-entry-rhune .curator-reading-note-row.is-dragging { position: relative; z-index: 5; cursor: grabbing; }
.curator-entry-rhune .curator-reading-note-row.is-dragging .curator-reading-note-card { box-shadow: 0 18px 40px -16px rgba(24, 21, 17, 0.35); }

/* View as guest: owner controls and drafts step out of the page. */
.curator-entry-rhune.is-guest-view :is([data-owner-only], .curator-entry-owner-bar, .curator-entry-save-state, .curator-writing-recovery, .curator-reading-note-row.is-draft, .curator-note-group.is-draft-only) { display: none !important; }
.curator-entry-rhune.is-guest-view .curator-note-menu-button { display: none; }
@media (min-width: 860px) {
    .curator-entry-rhune .rhune-sheet { padding-top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    .curator-entry-rhune :is(.curator-entry-sleeve, .curator-entry-portrait).is-revealing img,
    .curator-entry-rhune .curator-reading-note-row:is(:target, .is-arriving) .curator-note-title::after,
    .curator-entry-rhune .curator-reading-note-row.is-leaving .curator-reading-note-card,
    .curator-entry-rhune .curator-reading-note-row.is-leaving,
    .curator-compose-sheet[open], .curator-compose-sheet.is-closing,
    .curator-entry-toast { animation: none; }
    .curator-entry-owner-bar, .curator-entry-rhune .curator-entry-mini-player { transition: none; }
    .curator-entry-rhune :is(.curator-reading-note-card, .curator-reading-note-text), .curator-note-draft-label { transition: none; }
}

/* A noted track Spotify dropped stays readable, with a quiet line instead of its preview. */
.curator-entry-rhune .curator-reading-note-row.is-removed .curator-reading-note-card { opacity: 1; }
.curator-entry-rhune .curator-reading-removed { margin: -2px 0 10px; color: var(--entry-muted, var(--rh-muted)); font: 400 13px/1.4 var(--rh-sans); letter-spacing: -0.005em; }