/* Comments on entries (curator_comments.py, curator_comments.js): the Board's top comment under
   the notes rail, the entry page's top three under the record player, and the web sheet
   (the app's is native from build 20). */

.curator-comment-avatar {
    --comment-avatar: 32px;
    display: inline-grid;
    flex: none;
    place-items: center;
    width: var(--comment-avatar);
    height: var(--comment-avatar);
    overflow: hidden;
    border-radius: 50%;
    background: var(--avatar-tone, #77716a);
    color: #f3f1ec;
    font: 500 calc(var(--comment-avatar) * 0.42) / 1 var(--rh-sans);
}
/* Centre the initial's capital itself, not its line box, whatever the device's font metrics. */
.curator-comment-avatar > span { text-box: trim-both cap alphabetic; }
.curator-comment-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.curator-comment-name {
    display: block;
    color: var(--rh-ink);
    font: 500 14px/1.3 var(--rh-sans);
    letter-spacing: -0.01em;
}
.curator-comment-name a { color: inherit; text-decoration: none; }
.curator-comment-name time,
.curator-comment-author {
    margin-left: 6px;
    color: var(--rh-muted);
    font: 400 13px/1.3 var(--rh-sans);
}
.curator-comment-text {
    margin: 2px 0 0;
    color: var(--rh-ink);
    font: 400 15px/1.45 var(--rh-sans);
    letter-spacing: -0.012em;
    white-space: pre-line;
    overflow-wrap: anywhere;
}
/* Board: the comment button (styled with the hearts, curator_roots.css) under the notes, its
   bubble in line with the note text. Each layout spaces its parts differently, so each sets
   the same distance below the notes. */
.curator-comments-slot--board { --board-comments-below: 14px; display: flex; padding-inline: clamp(1.15rem, 3vw, 1.5rem); }
.curator-board-record--portrait > .curator-comments-slot--board { margin-top: calc(var(--board-comments-below) - 1rem); }
.curator-board-record--sleeve > .curator-comments-slot--board { margin-top: var(--board-comments-below); }
.curator-board-record--longform > .curator-comments-slot--board { margin-top: calc(var(--board-comments-below) - 0.75rem); }
.curator-comments-slot--board .curator-board-comments { margin-left: -8px; }
/* Wider feeds (curator_roots.css): beside an artist's portrait, it goes under the notes in their
   column; an album's notes are inset, and it with them. */
@container (min-width: 620px) {
    .curator-board-record--portrait:has(> .curator-comments-slot--board) { grid-template-rows: auto auto 1fr; }
    .curator-board-record--portrait:has(> .curator-comments-slot--board) .curator-board-record-media { grid-row: 1 / span 3; }
    .curator-board-record--portrait > .curator-comments-slot--board { grid-column: 2; grid-row: 3; margin-top: calc(var(--board-comments-below) - 1.4rem); }
    .curator-board-record--sleeve > .curator-comments-slot--board { padding-inline: calc(1.25rem + clamp(1.15rem, 3vw, 1.5rem)); }
}

/* A comment row: portrait, name and time, text, Reply; its heart on the right. */
.curator-comment {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
/* A comment just posted or linked to: a soft wash with room around it, outside the row's own box. */
.curator-comment::before {
    content: "";
    position: absolute;
    inset: -12px -14px;
    z-index: -1;
    border-radius: 14px;
    background: color-mix(in srgb, var(--rh-ink) 6%, transparent);
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}
.curator-comment.is-arriving::before { opacity: 1; transition: none; }
.curator-comment-avatar-link { display: block; flex: none; border-radius: 50%; text-decoration: none; }
.curator-comment-body { flex: 1; min-width: 0; }
.curator-comment-actions { display: flex; gap: 16px; margin-top: 6px; }
.curator-comment-reply,
.curator-comment-actions button {
    margin: 6px 0 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--rh-muted);
    font: 500 13px/1.2 var(--rh-sans);
    cursor: pointer;
}
.curator-comment-actions button { margin: 0; }
.curator-comment-heart {
    display: grid;
    flex: none;
    justify-items: center;
    gap: 3px;
    min-width: 28px;
    margin-top: 2px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--rh-muted);
    font: 400 12px/1 var(--rh-sans);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.curator-comment-heart svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.curator-comment-heart.is-hearted svg { fill: var(--rh-ink); stroke: var(--rh-ink); }
.curator-comment-heart.is-popping svg { animation: curator-comment-heart-pop 0.36s cubic-bezier(0.2, 0.9, 0.3, 1.25) both; }
.curator-comment-heart:disabled { cursor: default; }
@keyframes curator-comment-heart-pop {
    0% { transform: scale(1); }
    45% { transform: scale(1.28); }
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .curator-comment-heart.is-popping svg { animation: none; } }

/* Entry page: under the record player, in the notes' column. */
.curator-entry-comments { padding: 8px 0 24px; }
.curator-entry-comments.is-appearing { animation: curator-entry-comments-in 0.45s ease-out both; }
@keyframes curator-entry-comments-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .curator-entry-comments.is-appearing { animation: none; } }
.curator-entry-comments-closed {
    margin: 4px 0 0;
    color: var(--rh-muted);
    font: 400 14px/1.4 var(--rh-sans);
}
.curator-comments-sheet-foot .curator-entry-comments-closed { margin: 4px 4px; text-align: center; }
/* A step below the notes and their byline: portraits the byline's size, smaller type, and a
   quiet label for the rows rather than a title over them. Two classes: .rhune-page's reset of
   heading and paragraph margins (rhune_pages.css) is as specific as one, and the app shell can
   load it after this file. */
.curator-entry-comments.curator-comments-slot h2 {
    margin: 0 0 14px;
    color: var(--rh-ink);
    font: 500 14px/1.3 var(--rh-sans);
    letter-spacing: -0.01em;
}
.curator-entry-comments.curator-comments-slot .curator-entry-comments-closed { margin: 4px 0 0; }
.curator-entry-comments h2 span { margin-left: 5px; color: var(--rh-muted); font-weight: 400; }
.curator-entry-comments .curator-comment { gap: 10px; margin-bottom: 16px; }
.curator-entry-comments .curator-comment-name { font-size: 13px; }
.curator-entry-comments .curator-comment-name time,
.curator-entry-comments .curator-comment-author { margin-left: 5px; font-size: 12px; }
.curator-entry-comments .curator-comment-text { margin-top: 1px; font-size: 14px; line-height: 1.42; }
.curator-entry-comments .curator-comment-reply { margin-top: 5px; font-size: 12px; }
.curator-entry-comments .curator-comment-heart { font-size: 11px; }
.curator-entry-comments .curator-comment-heart svg { width: 14px; height: 14px; }
.curator-entry-comments .curator-comment-body { cursor: pointer; }
.curator-entry-comments-all {
    display: block;
    margin: 0 0 18px 34px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--rh-muted);
    font: 400 14px/1.3 var(--rh-sans);
    cursor: pointer;
}
.curator-entry-comments-add {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.curator-entry-comments-field {
    display: flex;
    flex: 1;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 18px;
    background: color-mix(in srgb, var(--rh-ink) 5.5%, transparent);
    color: var(--rh-muted);
    font: 400 14px/1.2 var(--rh-sans);
}

/* The web sheet: a bottom sheet on phones, a centred panel on wider screens. */
.curator-comments-sheet {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--rh-ink);
}
.curator-comments-sheet::backdrop { background: rgba(15, 14, 13, 0.38); }
.curator-comments-sheet-panel {
    position: absolute;
    inset: auto 0 0;
    display: flex;
    flex-direction: column;
    height: min(82vh, 760px);
    height: min(82dvh, 760px);
    overflow: hidden;
    border-radius: 24px 24px 0 0;
    background: var(--rh-note-paper);
    font-family: var(--rh-sans);
}
.curator-comments-sheet-grab {
    width: 36px;
    height: 5px;
    margin: 8px auto 0;
    border-radius: 3px;
    background: color-mix(in srgb, var(--rh-ink) 22%, transparent);
}
.curator-comments-sheet-head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 6px 16px 10px;
    border-bottom: 1px solid var(--rh-line);
}
.curator-comments-sheet-head h2 {
    grid-column: 2;
    margin: 0;
    color: var(--rh-ink);
    font: 500 16px/1 var(--rh-sans);
}
.curator-comments-sheet-done {
    justify-self: end;
    min-height: 36px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--rh-ink);
    font: var(--rh-compact-button-font);
    cursor: pointer;
}
.curator-comments-sheet-list:focus { outline: none; }
.curator-comments-sheet-list {
    flex: 1;
    padding: 18px 20px 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.curator-comments-sheet-list > .curator-comment { margin-bottom: 20px; }
.curator-comment-replies { margin: -6px 0 20px 44px; }
.curator-comment-replies .curator-comment { gap: 10px; margin-bottom: 14px; }
.curator-comments-sheet-quiet {
    margin: 40px 0;
    color: var(--rh-muted);
    font: 400 15px/1.4 var(--rh-sans);
    text-align: center;
}
.curator-comments-sheet-more {
    display: block;
    margin: 0 auto 16px;
    padding: 8px 14px;
    border: 0;
    background: none;
    color: var(--rh-muted);
    font: 500 14px/1.2 var(--rh-sans);
    cursor: pointer;
}
.curator-comments-sheet-foot {
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--rh-line);
    background: var(--rh-note-paper);
}
.curator-comments-sheet-replying {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px 8px;
    color: var(--rh-muted);
    font: 400 13px/1.2 var(--rh-sans);
}
.curator-comments-sheet-replying[hidden] { display: none; }
.curator-comments-sheet-replying b { color: var(--rh-ink); font-weight: 500; }
.curator-comments-sheet-replying button {
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--rh-muted);
    font: 500 13px/1.2 var(--rh-sans);
    cursor: pointer;
}
.curator-comments-sheet-compose { display: flex; align-items: flex-end; gap: 10px; margin: 0; }
.curator-comments-sheet-compose .curator-comment-avatar { margin-bottom: 4px; }
.curator-comments-sheet-field {
    display: flex;
    flex: 1;
    align-items: flex-end;
    gap: 8px;
    min-height: 40px;
    padding: 0 4px 0 16px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--rh-ink) 5.5%, transparent);
}
.curator-comments-sheet-field textarea {
    flex: 1;
    height: 40px;
    min-height: 40px;
    padding: 10px 0;
    box-sizing: border-box;
    border: 0;
    outline: 0;
    background: none;
    color: var(--rh-ink);
    font: 400 15px/1.35 var(--rh-sans);
    resize: none;
}
.curator-comments-sheet-field textarea::placeholder { color: var(--rh-muted); }
.curator-comments-sheet-post {
    flex: none;
    margin-bottom: 4px;
    padding: 8px 14px;
    border: 0;
    border-radius: 999px;
    background: var(--rh-ink);
    color: var(--rh-note-paper);
    font: var(--rh-compact-button-font);
    letter-spacing: var(--rh-button-tracking);
    cursor: pointer;
}
.curator-comments-sheet-post[hidden] { display: none; }
.curator-comments-sheet-error:empty { display: none; }
.curator-comments-sheet-error { margin: 8px 4px 0; color: var(--rh-danger); font: 400 13px/1.3 var(--rh-sans); }

@media (min-width: 720px) {
    .curator-comments-sheet-panel {
        inset: 50% auto auto 50%;
        width: 480px;
        height: min(80vh, 720px);
        border-radius: 20px;
        transform: translate(-50%, -50%);
    }
    .curator-comments-sheet-grab { visibility: hidden; }
}

/* @mentions: linked to their profiles, in the comment's own ink. */
.curator-comment-mention { color: var(--rh-ink); font-weight: 500; text-decoration: none; }
.curator-comments-sheet-mentions {
    display: grid;
    max-height: 196px;
    margin: -2px -6px 8px;
    overflow-y: auto;
}
.curator-comments-sheet-mentions[hidden] { display: none; }
.curator-comments-sheet-mention {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 4px 6px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--rh-ink);
    text-align: left;
    cursor: pointer;
}
.curator-comments-sheet-mention span { display: grid; min-width: 0; }
.curator-comments-sheet-mention strong { overflow: hidden; font: 500 14px/1.25 var(--rh-sans); text-overflow: ellipsis; white-space: nowrap; }
.curator-comments-sheet-mention small { color: var(--rh-muted); font: 400 13px/1.25 var(--rh-sans); }
.curator-comments-sheet-mention:active { background: color-mix(in srgb, var(--rh-ink) 6%, transparent); }
@media (hover: hover) and (pointer: fine) {
    .curator-comments-sheet-mention:hover { background: color-mix(in srgb, var(--rh-ink) 5%, transparent); }
}

/* Desktop browsers: the shared popup (curator_menus.css tokens), a title with the round close
   button and a filled field. Phones and the app keep their sheet. */
@media (min-width: 1024px) {
    html:not(.rhune-native-ios) .curator-comments-sheet::backdrop {
        background: var(--rh-popup-backdrop);
        backdrop-filter: blur(var(--rh-popup-blur));
        -webkit-backdrop-filter: blur(var(--rh-popup-blur));
    }
    html:not(.rhune-native-ios) .curator-comments-sheet-panel {
        border-radius: var(--rh-popup-radius);
        background: var(--rh-popup-paper);
        box-shadow: var(--rh-popup-shadow);
    }
    html:not(.rhune-native-ios) .curator-comments-sheet-grab { display: none; }
    html:not(.rhune-native-ios) .curator-comments-sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 60px;
        box-sizing: border-box;
        padding: 12px 13px 12px 22px;
        border-bottom-color: var(--rh-popup-line);
    }
    html:not(.rhune-native-ios) .curator-comments-sheet-head h2 { font: 500 17px/1.2 var(--rh-sans); letter-spacing: -0.025em; }
    html:not(.rhune-native-ios) .curator-comments-sheet-done {
        position: relative;
        display: inline-grid;
        flex: 0 0 auto;
        place-items: center;
        width: 34px;
        height: 34px;
        min-height: 0;
        border-radius: 50%;
        font-size: 0;
    }
    html:not(.rhune-native-ios) .curator-comments-sheet-done::before,
    html:not(.rhune-native-ios) .curator-comments-sheet-done::after {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 16px;
        height: 1.6px;
        border-radius: 1px;
        background: currentColor;
        content: "";
        transform: translate(-50%, -50%) rotate(45deg);
    }
    html:not(.rhune-native-ios) .curator-comments-sheet-done::after { transform: translate(-50%, -50%) rotate(-45deg); }
    html:not(.rhune-native-ios) .curator-comments-sheet-done:focus-visible { background: var(--rh-popup-hover); outline: 2px solid var(--rh-input-ring); outline-offset: 0; }
    html:not(.rhune-native-ios) .curator-comments-sheet-list { padding: 18px 22px 8px; }
    html:not(.rhune-native-ios) .curator-comments-sheet-foot { padding: 12px 22px 14px; border-top-color: var(--rh-popup-line); background: var(--rh-popup-paper); }
    html:not(.rhune-native-ios) .curator-comments-sheet-field { background: var(--rh-input-fill); box-shadow: inset 0 0 0 1px transparent; }
    html:not(.rhune-native-ios) .curator-comments-sheet-field:focus-within { background: var(--rh-input-fill-focus); box-shadow: inset 0 0 0 1px var(--rh-input-ring); }
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    html:not(.rhune-native-ios) .curator-comments-sheet-done:hover { background: var(--rh-popup-hover); }
}