@charset "UTF-8";
/*!
 * StaticPress theme "Blocksy" - interact.css
 *
 * The look of the three visitor facing parts of the interaction feature: the
 * comment block of an article, the guestbook page and the floating widget
 * (message form + support chat). One stylesheet for the three of them, because
 * they share their building blocks: `.sp-field` / `.sp-input` / `.sp-button` /
 * `.sp-nick` are used by every form of the feature.
 *
 * The markup is identical in both themes (see
 * `templates/partials/comments.html` and
 * `templates/partials/interact_widget.html`), so only this file and the default
 * theme one differ: this theme keeps the Blocksy tokens of `tokens.css` (one
 * blue accent on a white surface, the ported border radius and shadow), the
 * default theme uses its own flat palette.
 *
 * The one rule that is not cosmetic is `.sp-hp`: the honeypot has to be
 * invisible to a visitor but still present in the layout, because a bot fills
 * every field it finds - including the ones a stylesheet hides with
 * `display: none`, which is exactly the hint it looks for. It is therefore
 * moved outside the viewport instead.
 */

/* ---------------------------------------------------------- visibility */
/* The script shows and hides nodes with the `hidden` attribute. An author rule
   that sets `display` on such a node outranks the user agent rule
   `[hidden] { display: none }` - the trap this theme documents for
   `.ct-post-views[hidden]` and `[data-dl-item][hidden]` - and a nickname dialog
   or a widget panel that stays on screen after it was closed is exactly what
   that looks like. The attribute is therefore restated here: it means "not
   rendered", whatever the rules below say about the display of the node. */
[hidden] {
    display: none !important;
}

/* ------------------------------------------------------------- honeypot */
.sp-hp {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* ------------------------------------------------------ form building blocks */
.sp-field {
    display: block;
    margin-bottom: 1em;
}

.sp-field-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--theme-headings-color);
    margin-bottom: 0.35em;
}

.sp-input {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.5em 0.7em;
    font-family: inherit;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--theme-text-color);
    background-color: var(--theme-palette-color-8);
    border: 1px solid var(--theme-border-color);
    border-radius: var(--theme-border-radius);
    transition: var(--theme-transition);
}

.sp-input:focus {
    outline: 0;
    border-color: var(--theme-link-initial-color);
    box-shadow: 0 0 0 0.15rem rgba(40, 114, 250, 0.18);
}

textarea.sp-input {
    resize: vertical;
    min-height: 4.5em;
}

.sp-button {
    display: inline-block;
    min-height: var(--theme-button-min-height);
    padding: var(--theme-button-padding);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--theme-button-text-initial-color);
    background-color: var(--theme-button-background-initial-color);
    border: 1px solid var(--theme-button-background-initial-color);
    border-radius: var(--theme-button-border-radius);
    cursor: pointer;
    transition: var(--theme-transition);
}

.sp-button:hover,
.sp-button:focus {
    color: var(--theme-button-text-hover-color);
    background-color: var(--theme-button-background-hover-color);
    border-color: var(--theme-button-background-hover-color);
}

.sp-button:disabled {
    opacity: 0.6;
    cursor: default;
}

.sp-button-ghost {
    color: var(--theme-text-color);
    background-color: var(--theme-palette-color-8);
    border-color: var(--theme-border-color);
}

.sp-button-ghost:hover,
.sp-button-ghost:focus {
    color: var(--theme-headings-color);
    background-color: var(--theme-palette-color-6);
    border-color: var(--theme-palette-color-5);
}

.sp-linkbutton {
    padding: 0;
    border: 0;
    background: none;
    color: var(--theme-link-initial-color);
    font-family: inherit;
    font-size: 0.875rem;
    text-decoration: underline;
    cursor: pointer;
}

.sp-linkbutton:hover,
.sp-linkbutton:focus {
    color: var(--theme-link-hover-color);
}

.sp-form-thanks,
.sp-form-error,
.sp-comments-error,
.sp-comments-loading,
.sp-comments-empty {
    font-size: 0.875rem;
    margin: 0.5em 0;
}

.sp-form-thanks {
    color: #1c7c3f;
}

.sp-form-error,
.sp-comments-error {
    color: #b02a37;
}

.sp-comments-loading,
.sp-comments-empty {
    color: var(--theme-text-color);
    opacity: 0.75;
}

/* ---------------------------------------------------------- comment block */
.sp-comments {
    margin-top: var(--theme-content-spacing);
    padding-top: 1.25em;
    border-top: 1px solid var(--theme-border-color);
}

.sp-comments-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.75em;
}

.sp-comments-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    color: var(--theme-headings-color);
}

.sp-comments-total {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--theme-text-color);
    opacity: 0.7;
    margin-left: 0.5em;
}

.sp-comments-notice {
    font-size: 0.875rem;
    color: var(--theme-text-color);
    background-color: var(--theme-palette-color-6);
    border: 1px solid var(--theme-border-color);
    border-radius: var(--theme-border-radius);
    padding: 0.65em 0.85em;
    margin-bottom: 1em;
}

.sp-comment-list {
    list-style: none;
    margin: 0 0 0.5em 0;
    padding: 0;
}

.sp-comment {
    padding: 1em 0;
    border-bottom: 1px dashed var(--theme-border-color);
}

.sp-comment:last-child {
    border-bottom: 0;
}

.sp-comment-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    /* The stamp and the state of a row are pushed to the right by the auto
       margin of the stamp below, so the author stays on the left whether the
       row carries a state or not. */
    gap: 0 0.5em;
    margin-bottom: 0.35em;
}

.sp-comment-author {
    color: var(--theme-headings-color);
    font-size: 0.9375rem;
}

.sp-comment-time {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--theme-text-color);
    opacity: 0.6;
}

/* The state of one of the visitor's own guestbook rows ("waiting for review",
   "not accepted"): a quiet pill beside the stamp, so a row that is not
   published yet is recognizable without shouting. Only the board ever prints
   one (see static/js/interact-comments.js). */
.sp-comment-state {
    padding: 0 0.55em;
    border: 1px solid var(--theme-border-color);
    border-radius: 999px;
    font-size: 0.6875rem;
    line-height: 1.7;
    color: var(--theme-text-color);
    opacity: 0.75;
    white-space: nowrap;
}

.sp-comment-body {
    color: var(--theme-text-color);
    font-size: 0.9375rem;
    line-height: var(--theme-line-height);
    white-space: pre-wrap;
    word-break: break-word;
}

.sp-comment-reply {
    margin: 0.65em 0 0 0;
    padding: 0.55em 0.8em;
    border-left: 3px solid var(--theme-link-initial-color);
    background-color: var(--theme-palette-color-7);
    border-radius: 0 var(--theme-border-radius) var(--theme-border-radius) 0;
}

.sp-comment-replylabel {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--theme-link-initial-color);
    margin-bottom: 0.2em;
}

.sp-comment-replybody {
    font-size: 0.875rem;
    color: var(--theme-text-color);
    line-height: var(--theme-line-height);
    white-space: pre-wrap;
    word-break: break-word;
}

.sp-comments-more {
    text-align: center;
    margin: 0.75em 0 1.25em 0;
}

.sp-comment-form {
    margin-top: 1em;
    padding-top: 1em;
    border-top: 1px solid var(--theme-border-color);
}

.sp-comment-nickrow {
    display: flex;
    align-items: baseline;
    gap: 0.4em;
    font-size: 0.875rem;
    color: var(--theme-text-color);
    margin-bottom: 0.6em;
}

.sp-comment-nickname {
    color: var(--theme-headings-color);
}

/* ---------------------------------------------------------- nickname box */
.sp-nick {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1em;
    background-color: rgba(18, 28, 46, 0.62);
}

.sp-nick-box {
    width: 100%;
    max-width: 22rem;
    background-color: var(--theme-palette-color-8);
    border-radius: var(--theme-border-radius);
    box-shadow: var(--theme-box-shadow-strong);
    padding: 1.25em;
}

.sp-nick-title {
    font-size: 1.0625rem;
    font-weight: 700;
    margin: 0 0 0.4em 0;
    color: var(--theme-headings-color);
}

.sp-nick-help {
    font-size: 0.8125rem;
    color: var(--theme-text-color);
    line-height: 1.6;
    margin-bottom: 0.75em;
}

.sp-nick-error {
    font-size: 0.8125rem;
    color: #b02a37;
    margin: 0 0 0.5em 0;
}

.sp-nick-actions {
    display: flex;
    gap: 0.5em;
    margin-top: 0.25em;
}

/* ------------------------------------------------------- floating widget */
/* The widget is pinned the same way as the theme's "back to top" button
   (`.ct-back-to-top` in components.css: fixed 22px from the right and the
   bottom, 42px tall, one shared radius/colour/transition). It repeats those
   values and is lifted by exactly one button height plus the same 10px gap, so
   the two controls stack in one right aligned column instead of covering each
   other - the widget never sits on top of the arrow again. */
.sp-interact {
    position: fixed;
    bottom: calc(22px + 42px + 10px);
    z-index: 1070;
    font-family: var(--theme-font-family);
    font-size: 0.9375rem;
    color: var(--theme-text-color);
}

.sp-interact-right {
    right: 22px;
    align-items: flex-end;
}

.sp-interact-left {
    left: 22px;
    align-items: flex-start;
}

/* The two entries ("leave a message" / "support") stack in one column: the bar
   stays narrow instead of growing sideways, and every button keeps its own
   width and lines up with the edge the widget is pinned to. */
.sp-interact-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.sp-interact-left .sp-interact-actions {
    align-items: flex-start;
}

/* Icon plus label, one button high, in the colours of the "back to top"
   button - the two controls read as one group instead of two different
   widgets. */
.sp-interact-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    height: 42px;
    padding: 0 0.85em;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    color: #ffffff;
    background-color: var(--theme-dark-surface);
    border: 0;
    border-radius: var(--theme-border-radius);
    box-shadow: var(--theme-box-shadow-strong);
    cursor: pointer;
    transition: var(--theme-transition);
}

.sp-interact-icon {
    display: block;
    flex: 0 0 auto;
}

.sp-interact-btn:hover,
.sp-interact-btn:focus {
    color: #ffffff;
    background-color: var(--theme-palette-color-1);
}

.sp-interact-badge {
    display: inline-block;
    min-width: 1.1rem;
    padding: 0 0.3em;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.1rem;
    text-align: center;
    color: #fff;
    background-color: #d63384;
    border-radius: 1rem;
    vertical-align: middle;
}

.sp-interact-panel {
    display: flex;
    flex-direction: column;
    width: 22rem;
    max-width: calc(100vw - 2.5rem);
    max-height: 70vh;
    margin-bottom: 0.75em;
    background-color: var(--theme-palette-color-8);
    border: 1px solid var(--theme-border-color);
    border-radius: var(--theme-border-radius);
    box-shadow: var(--theme-box-shadow-strong);
    overflow: hidden;
}

.sp-interact-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.5em;
    background-color: var(--theme-palette-color-6);
    border-bottom: 1px solid var(--theme-border-color);
}

.sp-interact-tabs {
    display: flex;
    gap: 0.25em;
}

.sp-interact-tab {
    padding: 0.65em 0.6em;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--theme-text-color);
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.sp-interact-tab.is-active {
    color: var(--theme-link-initial-color);
    border-bottom-color: var(--theme-link-initial-color);
}

.sp-interact-state {
    font-size: 0.75rem;
    font-weight: 400;
    margin-left: 0.25em;
}

.sp-interact-state.is-online {
    color: #1c7c3f;
}

.sp-interact-state.is-offline {
    opacity: 0.6;
}

.sp-interact-close {
    padding: 0 0.4em;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--theme-text-color);
    background: none;
    border: 0;
    cursor: pointer;
}

.sp-interact-close:hover,
.sp-interact-close:focus {
    color: var(--theme-headings-color);
}

.sp-interact-view {
    flex: 1 1 auto;
    padding: 0.9em;
    overflow-y: auto;
}

.sp-interact-notice {
    font-size: 0.8125rem;
    color: var(--theme-text-color);
    background-color: var(--theme-palette-color-6);
    border: 1px solid var(--theme-border-color);
    border-radius: var(--theme-border-radius);
    padding: 0.55em 0.7em;
    margin-bottom: 0.75em;
}

.sp-interact-formfoot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5em;
}

/* ------------------------------------------------------------------ chat */
.sp-chat-greeting,
.sp-chat-hours {
    font-size: 0.8125rem;
    color: var(--theme-text-color);
    line-height: 1.6;
    margin-bottom: 0.5em;
}

.sp-chat-log {
    list-style: none;
    margin: 0 0 0.5em 0;
    padding: 0;
    max-height: 17rem;
    overflow-y: auto;
}

.sp-chat-line {
    margin-bottom: 0.5em;
}

.sp-chat-line .sp-chat-who {
    display: block;
    font-size: 0.6875rem;
    opacity: 0.6;
    margin-bottom: 0.15em;
}

.sp-chat-line .sp-chat-text {
    display: inline-block;
    max-width: 85%;
    padding: 0.45em 0.65em;
    font-size: 0.875rem;
    line-height: 1.6;
    border-radius: var(--theme-border-radius);
    white-space: pre-wrap;
    word-break: break-word;
}

.sp-chat-visitor {
    text-align: right;
}

.sp-chat-visitor .sp-chat-text {
    color: #fff;
    background-color: var(--theme-palette-color-1);
}

.sp-chat-admin .sp-chat-text {
    color: var(--theme-headings-color);
    background-color: var(--theme-palette-color-6);
}

.sp-chat-system .sp-chat-text {
    font-size: 0.8125rem;
    color: #8a5300;
    background-color: #fff4e5;
}

.sp-chat-offline,
.sp-chat-typing,
.sp-chat-closed,
.sp-chat-blocked {
    font-size: 0.8125rem;
    color: var(--theme-text-color);
    margin: 0.35em 0;
}

.sp-chat-blocked {
    color: #b02a37;
}

.sp-chat-form .sp-field {
    margin-bottom: 0.5em;
}

/* ------------------------------------------------------------ play layer */
/* The reaction bar, the danmaku band and the "I was here" wall
   (`templates/partials/play.html`). It sits above the comment block and reads
   the same way: one section, one rule on top, a heading per block. Same markup
   as the default theme, the Blocksy tokens only. */
.sp-play {
    margin-top: var(--theme-content-spacing);
    padding-top: 1.25em;
    border-top: 1px solid var(--theme-border-color);
}

.sp-dm,
.sp-inscription {
    margin-top: 2em;
}

.sp-dm-head,
.sp-in-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.75em;
}

.sp-dm-title,
.sp-in-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    color: var(--theme-headings-color);
}

.sp-in-total {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--theme-text-color);
    opacity: 0.7;
    margin-left: 0.5em;
}

.sp-dm-notice,
.sp-in-intro {
    font-size: 0.875rem;
    color: var(--theme-text-color);
    background-color: var(--theme-palette-color-6);
    border: 1px solid var(--theme-border-color);
    border-radius: var(--theme-border-radius);
    padding: 0.65em 0.85em;
    margin-bottom: 1em;
}

/* The bar of reactions. The two votes are words, the emoji are glyphs; both
   are the same pill, so a bar rewording or a retired emoji never changes the
   layout of the others. */
.sp-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
}

.sp-reaction {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.35em 0.7em;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--theme-text-color);
    background-color: var(--theme-palette-color-6);
    border: 1px solid var(--theme-border-color);
    border-radius: 999px;
    cursor: pointer;
    transition: var(--theme-transition);
}

.sp-reaction:hover,
.sp-reaction:focus {
    color: var(--theme-headings-color);
    background-color: var(--theme-palette-color-5);
}

/* The types this visitor holds (`mine` of the API answer): the button is
   pressed, and the stylesheet is the only thing that says so. */
.sp-reaction.is-active {
    color: var(--theme-button-text-initial-color);
    background-color: var(--theme-link-initial-color);
    border-color: var(--theme-link-initial-color);
}

.sp-reaction-glyph {
    font-size: 1.05rem;
    line-height: 1;
}

.sp-reaction-count {
    font-size: 0.75rem;
    opacity: 0.75;
}

.sp-reaction.is-active .sp-reaction-count {
    opacity: 1;
}

.sp-reactions-error {
    margin-top: 0.5em;
}

/* The rain of one picked emoji: it rises over the button that was clicked and
   is removed by the script (`position: fixed` because the coordinates come
   from the button itself). */
.sp-emoji-rain {
    position: fixed;
    z-index: 1500;
    font-size: 1.25rem;
    line-height: 1;
    pointer-events: none;
    animation: sp-emoji-rise 0.9s ease-out forwards;
}

@keyframes sp-emoji-rise {
    from {
        opacity: 0;
        transform: translateY(0) scale(0.8);
    }

    30% {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translateY(-70px) scale(1.15);
    }
}

/* The band: a dark stage of the height the theme option asked for, its lanes
   absolutely positioned. A line crosses its lane in one animation and is taken
   out of the DOM when it arrives on the other side
   (static/js/interact-play.js). */
.sp-dm-stage {
    position: relative;
    overflow: hidden;
    background-color: var(--theme-dark-surface);
    border-radius: var(--theme-border-radius);
}

/* The height has to match ``LANE_HEIGHT`` of static/js/interact-play.js: the
   script derives how many lanes fit from it. */
.sp-dm-lane {
    position: absolute;
    left: 0;
    right: 0;
    height: 34px;
    overflow: hidden;
    pointer-events: none;
}

.sp-dm-item {
    position: absolute;
    left: 100%;
    top: 0;
    padding: 0 2em 0 0;
    font-size: 0.9375rem;
    line-height: 34px;
    white-space: nowrap;
    color: #f8f9fa;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
    animation: sp-dm-fly 12s linear 1 forwards;
}

/* The travel is lane relative, so the pace of a crossing does not depend on how
   wide the reading column happens to be. */
@keyframes sp-dm-fly {
    from {
        left: 100%;
    }

    to {
        left: -100%;
    }
}

.sp-dm-item .sp-dm-author {
    margin-right: 0.4em;
    font-size: 0.8125rem;
    color: rgba(248, 249, 250, 0.6);
}

.sp-dm-item.sp-dm-official {
    font-weight: 700;
}

.sp-dm-item.sp-dm-robot {
    font-style: italic;
}

/* The colours the operator allows (`play_danmaku_colors`, clamped by the page
   and by the API). Light enough to be read on the dark stage. */
.sp-dm-item.sp-dm-color-default {
    color: #f8f9fa;
}

.sp-dm-item.sp-dm-color-gold {
    color: #ffd166;
}

.sp-dm-item.sp-dm-color-brand {
    color: #4fc3dc;
}

.sp-dm-item.sp-dm-color-red {
    color: #ff8080;
}

.sp-dm-item.sp-dm-color-blue {
    color: #82b1ff;
}

.sp-dm-item.sp-dm-color-green {
    color: #7ddf8f;
}

.sp-dm-item.sp-dm-color-purple {
    color: #c9a6ff;
}

.sp-dm-hint {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    font-size: 0.875rem;
    color: rgba(248, 249, 250, 0.45);
}

.sp-dm-form,
.sp-in-form {
    margin-top: 1em;
}

.sp-dm-row {
    display: flex;
    gap: 0.5em;
    align-items: stretch;
}

.sp-dm-row .sp-dm-input {
    flex: 1 1 auto;
    min-width: 0;
}

.sp-dm-colors {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
    margin-top: 0.6em;
}

/* One swatch per allowed colour: an empty button whose background is the
   colour itself (`title` and `aria-label` carry its name). */
.sp-dm-color {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--theme-border-color);
    border-radius: 50%;
    background-color: #f8f9fa;
    cursor: pointer;
}

.sp-dm-color.is-active {
    border-color: var(--theme-headings-color);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.12);
}

.sp-dm-color-default {
    background-color: #f8f9fa;
}

.sp-dm-color-gold {
    background-color: #ffd166;
}

.sp-dm-color-brand {
    background-color: #4fc3dc;
}

.sp-dm-color-red {
    background-color: #ff8080;
}

.sp-dm-color-blue {
    background-color: #82b1ff;
}

.sp-dm-color-green {
    background-color: #7ddf8f;
}

.sp-dm-color-purple {
    background-color: #c9a6ff;
}

/* The area that holds what this visitor wrote and that is not public yet
   (D13): a waiting line and a refused one, each with the label of its state.
   It appears with its first row and stays out of the way until then. */
.sp-minebox {
    margin-top: 1em;
    padding: 0.75em 0.9em;
    background-color: var(--theme-palette-color-6);
    border: 1px dashed var(--theme-border-color);
    border-radius: var(--theme-border-radius);
}

.sp-mine-notice {
    font-size: 0.8125rem;
    color: var(--theme-text-color);
    opacity: 0.75;
    margin: 0 0 0.5em 0;
}

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

.sp-mine-row {
    display: flex;
    align-items: baseline;
    gap: 0.5em;
    padding: 0.2em 0;
}

.sp-mine-text {
    font-size: 0.875rem;
    color: var(--theme-text-color);
    word-break: break-word;
}

/* The pill of a moderation state ("waiting for review", "not accepted"). Both
   labels come from the operator settings, never from the script. */
.sp-state {
    flex: 0 0 auto;
    padding: 0 0.55em;
    border-radius: 999px;
    font-size: 0.6875rem;
    line-height: 1.7;
    white-space: nowrap;
    color: var(--theme-text-color);
    background-color: var(--theme-palette-color-5);
    border: 1px solid var(--theme-border-color);
}

.sp-state-pending {
    color: #8a5300;
    background-color: #fff4e5;
    border-color: #ffd7a8;
}

.sp-state-rejected {
    color: #b02a37;
    background-color: #fdeced;
    border-color: #f5c2c7;
}

/* The wall of slips. Two shapes, one markup: `sp-style-wall` lays the slips
   out as cards, `sp-style-list` as the one column of a guestbook. The theme
   option chooses (``play_inscription_style``). */
.sp-in-hint {
    font-size: 0.875rem;
    color: var(--theme-text-color);
    opacity: 0.75;
    margin: 0 0 0.5em 0;
}

.sp-in-list {
    list-style: none;
    margin: 0 0 0.5em 0;
    padding: 0;
}

.sp-style-wall .sp-in-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.75em;
}

.sp-in-item {
    padding: 0.75em 0.9em;
    background-color: var(--theme-palette-color-8);
    border: 1px solid var(--theme-border-color);
    border-radius: var(--theme-border-radius);
}

.sp-style-list .sp-in-item {
    border-width: 0 0 1px 0;
    border-radius: 0;
    padding: 1em 0;
}

.sp-style-list .sp-in-item:last-child {
    border-bottom: 0;
}

.sp-in-item.sp-in-official {
    background-color: var(--theme-palette-color-6);
    border-color: var(--theme-palette-color-5);
}

.sp-in-meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 0.5em;
    margin-bottom: 0.35em;
}

.sp-in-no {
    font-size: 0.75rem;
    color: var(--theme-text-color);
    opacity: 0.6;
}

.sp-in-author {
    font-size: 0.9375rem;
    color: var(--theme-headings-color);
}

.sp-in-at {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--theme-text-color);
    opacity: 0.6;
}

/* The slip the operator wrote himself: the badge stands where the number of a
   visitor slip stands. */
.sp-in-badge {
    padding: 0 0.55em;
    border-radius: 999px;
    font-size: 0.6875rem;
    line-height: 1.7;
    color: var(--theme-button-text-initial-color);
    background-color: var(--theme-link-initial-color);
    border: 1px solid var(--theme-link-initial-color);
}

.sp-in-text {
    font-size: 0.9375rem;
    line-height: var(--theme-line-height);
    color: var(--theme-text-color);
    white-space: pre-wrap;
    word-break: break-word;
}

.sp-in-reply {
    margin-top: 0.5em;
    padding: 0.55em 0.8em;
    font-size: 0.875rem;
    color: var(--theme-text-color);
    background-color: var(--theme-palette-color-7);
    border-left: 3px solid var(--theme-link-initial-color);
    border-radius: 0 var(--theme-border-radius) var(--theme-border-radius) 0;
}

/* The row of the little fun robot (D16) in the comment list: an ordinary
   comment of the document carrying ``robot: true``
   (static/js/interact-comments.js), tinted so a reader knows who speaks. */
.sp-comment.sp-robot {
    padding-left: 0.85em;
    border-left: 3px solid var(--theme-link-initial-color);
    background-color: var(--theme-palette-color-7);
}

.sp-comment.sp-robot .sp-comment-author {
    color: var(--theme-link-initial-color);
}

/* ... and the spot it keeps while it has not spoken yet: the script prints it
   only when the operator turned the robot on and put it in the comments. */
.sp-comment.sp-robot-waiting {
    background-color: transparent;
    border-left-style: dashed;
}

.sp-comment.sp-robot-waiting .sp-comment-body {
    font-style: italic;
    opacity: 0.75;
}

/* --------------------------------------------------------- small screens */
/* Same 689.98px breakpoint and the same smaller button as `.ct-back-to-top`,
   so the two stay aligned in one column on a phone as well. */
@media (max-width: 689.98px) {
    .sp-interact {
        bottom: calc(14px + 38px + 8px);
    }

    .sp-interact-right {
        right: 14px;
    }

    .sp-interact-left {
        left: 14px;
    }

    .sp-interact-btn {
        height: 38px;
    }

    .sp-interact-panel {
        width: calc(100vw - 1.5rem);
        max-height: 72vh;
    }

    .sp-chat-log {
        max-height: 40vh;
    }

    /* The danmaku form stacks: the field and the button side by side leave too
       little room for a sentence on a phone. */
    .sp-dm-row {
        flex-direction: column;
    }

    .sp-dm-row .sp-button {
        width: 100%;
    }
}

/* A reader who asked for less motion gets the lines without the crossing: the
   script still takes every node out after its own delay, so the band keeps
   cycling - it simply does not fly. */
@media (prefers-reduced-motion: reduce) {
    .sp-dm-item {
        animation: none;
    }

    .sp-emoji-rain {
        animation: none;
        opacity: 0;
    }
}