/* The thread an app embeds (and comments.rhys.wtf's own pages). Copied
   from comments.rhys.wtf's repository (embed/comments.css) into each
   app's static files; keep the copies in step.

   It has no colours of its own: everything comes from the host page's
   tokens, so it follows the page's light/dark scheme and its palette
   (palettes.css and `data-palette` on <html>, which recolour the slots).
   What the host must define:
     --color-bg --color-surface --color-text --color-muted --color-link
     --color-link-hover --color-error --color-track
     --gruvbox-green-faded --gruvbox-red-faded     (thumbs up and down)
     --gruvbox-blue-faded --gruvbox-orange-faded   (badges, mentions)
     --gruvbox-yellow                              (the linked comment)
     --font-ui --font-display --font-body --radius
   The -faded accents are text: the host's dark blocks map them to the
   -bright ones, as every rhys.wtf main.css does. */

.comments {
    font-family: var(--font-ui);
    max-width: 48rem;
}

.comments__title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    margin: 0 0 0.75rem;
}

.comments__count {
    color: var(--color-muted);
    font-weight: normal;
}

.comments__error {
    margin: 0 0 1rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-error);
    border-radius: calc(var(--radius) / 2);
    color: var(--color-error);
    /* On the surface: in the dark schemes the bright reds only pass AA
       on the darker surface, not the page. */
    background: var(--color-surface);
}

.comments__locked,
.comments__empty,
.comments__signin {
    color: var(--color-muted);
    margin: 0 0 1rem;
}

.comments__tools {
    margin: 0 0 0.75rem;
}

.comments__inline {
    display: inline;
    margin: 0;
}

/* Text-shaped buttons: the inline actions. */
.comments__link,
.comment__action {
    display: inline;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.85rem;
    color: var(--color-muted);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    cursor: pointer;
}

.comments__link:hover,
.comment__action:hover {
    color: var(--color-link-hover);
}

.comments__list,
.comment__replies {
    list-style: none;
    margin: 0;
    padding: 0;
}

.comment {
    margin: 0 0 0.75rem;
}

/* Replies step in, with a rule on the left; after a few levels the step
   gets smaller so phones keep some width. */
.comment__replies {
    margin: 0.5rem 0 0 0.75rem;
    padding-left: 0.75rem;
    border-left: 2px solid var(--color-track);
}

.comment[data-depth="3"] > .comment__replies,
.comment[data-depth="4"] > .comment__replies {
    margin-left: 0.25rem;
    padding-left: 0.5rem;
}

.comment__box {
    padding: 0.6rem 0.8rem;
    background: var(--color-surface);
    border: 1px solid var(--color-track);
    border-radius: calc(var(--radius) / 2);
}

.comment__stub {
    color: var(--color-muted);
    font-style: italic;
    font-size: 0.9rem;
}

.comment--hidden > .comment__box {
    border-style: dashed;
    opacity: 0.8;
}

.comment:target > .comment__box {
    border-color: var(--gruvbox-yellow);
}

.comment__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.6rem;
    font-size: 0.85rem;
    color: var(--color-muted);
}

.comment__author {
    text-decoration: none;
    color: var(--color-text);
}

.comment__author:hover .comment__name {
    text-decoration: underline;
}

.comment__name {
    font-weight: 600;
}

.comment__handle {
    color: var(--color-muted);
}

.comment__time {
    color: var(--color-muted);
    text-decoration: none;
}

.comment__time:hover {
    text-decoration: underline;
}

.comment__badge {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.05rem 0.4rem;
    border-radius: 1rem;
    border: 1px solid var(--color-muted);
}

.comment__badge--author {
    color: var(--gruvbox-blue-faded);
    border-color: var(--gruvbox-blue-faded);
}

.comment__badge--hidden {
    color: var(--gruvbox-orange-faded);
    border-color: var(--gruvbox-orange-faded);
}

.comment__edited,
.comment__reply-to {
    font-style: italic;
}

/* The body is prose: Recoleta, a little smaller than the page's. */
.comment__body {
    font-family: var(--font-body);
    font-size: 0.98rem;
    line-height: 1.5;
    margin: 0.35rem 0;
    overflow-wrap: anywhere;
}

.comment__body > :first-child {
    margin-top: 0;
}

.comment__body > :last-child {
    margin-bottom: 0;
}

.comment__body p,
.comment__body ul,
.comment__body ol,
.comment__body blockquote,
.comment__body pre,
.comment__body table {
    margin: 0.5rem 0;
}

.comment__body blockquote {
    margin-left: 0;
    padding: 0.1rem 0 0.1rem 0.75rem;
    border-left: 3px solid var(--color-track);
    color: var(--color-muted);
}

.comment__body pre {
    padding: 0.5rem 0.75rem;
    overflow-x: auto;
    background: var(--color-bg);
    border-radius: calc(var(--radius) / 3);
    font-size: 0.85rem;
}

.comment__body code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.9em;
}

.comment__body img {
    display: block;
    max-width: 100%;
    max-height: 24rem;
    height: auto;
    border-radius: calc(var(--radius) / 3);
}

.comment__body table {
    border-collapse: collapse;
    font-family: var(--font-ui);
    font-size: 0.9rem;
}

.comment__body th,
.comment__body td {
    border: 1px solid var(--color-track);
    padding: 0.2rem 0.5rem;
}

.comment__body a {
    color: var(--color-link);
}

.comment__body a.mention {
    text-decoration: none;
    font-family: var(--font-ui);
    font-weight: 600;
    color: var(--gruvbox-blue-faded);
}

.comment__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.9rem;
    margin-top: 0.3rem;
}

.comment__vote {
    display: inline;
    margin: 0;
}

/* Thumbs: green up, red down; a pressed one is filled. */
.vote {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--color-track);
    border-radius: 1rem;
    background: transparent;
    font: inherit;
    font-size: 0.85rem;
    color: var(--color-text);
    cursor: pointer;
    line-height: 1.4;
}

.vote:disabled {
    cursor: default;
    opacity: 0.7;
}

.vote--up {
    color: var(--gruvbox-green-faded);
}

.vote--down {
    color: var(--gruvbox-red-faded);
}

.vote:not(:disabled):hover {
    border-color: currentColor;
}

.vote[aria-pressed="true"] {
    border-color: currentColor;
    background: color-mix(in srgb, currentColor 14%, transparent);
    font-weight: 600;
}

.vote__glyph {
    width: 1em;
    height: 1em;
}

.vote--down .vote__glyph {
    transform: scaleY(-1);
}

/* The editor. */
.comment-form {
    margin: 1rem 0 0;
    padding: 0.75rem 0.8rem;
    background: var(--color-surface);
    border: 1px solid var(--color-track);
    border-radius: calc(var(--radius) / 2);
}

.comment-form--edit {
    margin: 0.35rem 0;
    padding: 0.5rem;
}

.comment-form__replying {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    color: var(--color-muted);
}

.comment-form__tabs {
    display: flex;
    gap: 0.25rem;
    margin: 0 0 0.4rem;
}

.comment-form__tab {
    padding: 0.2rem 0.7rem;
    border: 1px solid var(--color-track);
    border-bottom: 0;
    border-radius: calc(var(--radius) / 3) calc(var(--radius) / 3) 0 0;
    background: transparent;
    font: inherit;
    font-size: 0.85rem;
    color: var(--color-muted);
    cursor: pointer;
}

.comment-form__tab[aria-selected="true"] {
    color: var(--color-text);
    background: var(--color-bg);
    border-color: var(--color-muted);
}

.comment-form__body[hidden] {
    display: none;
}

.comment-form__body {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 6rem;
    padding: 0.5rem 0.6rem;
    font-family: var(--font-ui);
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-track);
    border-radius: calc(var(--radius) / 3);
    resize: vertical;
}

.comment-form__preview {
    min-height: 6rem;
    padding: 0.5rem 0.6rem;
    border: 1px dashed var(--color-track);
    border-radius: calc(var(--radius) / 3);
}

.comment-form__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.9rem;
    margin: 0.4rem 0;
    font-size: 0.85rem;
}

.comment-form__pick {
    color: var(--color-muted);
}

/* As buttons (an app that opens the pickers in a dialog), they look like
   the links they stand for. */
button.comment-form__pick {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

button.comment-form__pick:hover {
    color: var(--color-link-hover);
}

.comment-form__hint {
    color: var(--color-muted);
    margin-left: auto;
}

.comment-form__buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

/* With the script, the second Preview button is the tab instead. */
.comments--scripted .comment-form__preview-button {
    display: none;
}

.comments--busy {
    opacity: 0.6;
    pointer-events: none;
}

@media (max-width: 480px) {
    .comment__box {
        padding: 0.5rem 0.6rem;
    }

    .comment__replies {
        margin-left: 0.25rem;
        padding-left: 0.5rem;
    }

    .comment-form__hint {
        margin-left: 0;
        flex-basis: 100%;
    }
}

/* The pickers (an app serves them, in its own layout): a small window, a
   list of rows with an Insert button. */
.picker {
    font-family: var(--font-ui);
}

.picker__crumbs {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
}

.picker__search {
    display: flex;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
}

.picker__search input {
    flex: 1;
    min-width: 0;
}

.picker__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.picker__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-track);
}

.picker__name {
    flex: 1 1 14rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.picker__icon {
    width: 1.1em;
    height: 1.1em;
    vertical-align: -0.2em;
    margin-right: 0.4em;
    color: var(--color-muted);
}

.picker__row--folder .picker__name {
    text-decoration: none;
    font-weight: 600;
}

.picker__meta {
    color: var(--color-muted);
    font-size: 0.85rem;
}

.picker__desc {
    flex-basis: 100%;
    color: var(--color-muted);
    font-size: 0.85rem;
}

.picker__insert {
    margin: 0;
}

/* The pickers in a dialog on the page (rhyswtf-web's comments embed makes
   it): a card in the middle of the window, a sheet along the bottom of a
   phone's. */
.comments-pick {
    width: min(36rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    box-sizing: border-box;
    padding: 1rem 1.25rem;
    border: 1px solid var(--color-track);
    border-radius: var(--radius);
    background: var(--color-bg);
    color: var(--color-text);
}

.comments-pick::backdrop {
    background: rgb(0 0 0 / 0.45);
}

/* Close, at the top right; the step's own title beside it. */
.comments-pick__close {
    float: right;
    margin: 0 0 0.5rem 1rem;
}

.comments-pick .page-title {
    font-size: 1.5rem;
    margin: 0 0 0.75rem;
}

@media (max-width: 40rem) {
    .comments-pick {
        width: 100%;
        max-width: none;
        margin: auto 0 0;
        border-radius: var(--radius) var(--radius) 0 0;
        max-height: 90vh;
    }
}

.picker__snippet {
    width: 100%;
    box-sizing: border-box;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.9rem;
}