/*
 * Mountain Diary — the look of the comments, drawn by wpDiscuz, on every page that has them —
 * adventures, questions, partner requests (Site\Frame\SiteStyles): the post rating, the head of
 * the comment form, the form with its editor, the head of the thread with its filters and sort
 * menu, the comments themselves, and the menus, messages and tooltips wpDiscuz opens around
 * them. Colours come from the design tokens and follow the colour mode; this file writes no
 * colour values.
 *
 * Left where they belong: the question page sets its comments into the card of the question -
 * spacing, avatars kept inside the card (Community (CSS)); the Report link in each comment is
 * Reports and moderation's; the original text under a translated comment is the translation
 * system's. Fields - the name and e-mail of a guest, the subscribe drop-down - take their whole
 * look from the form controls, whose !important rules already win over wpDiscuz's; the editor is
 * not a field, so it is set here.
 *
 * Why html #wpdcom: wpDiscuz writes its colours in its stylesheet and in an inline block made
 * from its settings (Comments - Settings - Styles and Colors, Rating), all of them on the id
 * #wpdcom or on its own classes. Each rule here repeats wpDiscuz's selector with html in front,
 * one step more specific, so it wins whatever order the stylesheets load in - !important only
 * where wpDiscuz itself uses it (the vote states and the error boxes). Leaving those settings as
 * they are is therefore safe; they no longer show. wpDiscuz's own class names are kept as it
 * writes them, and the rules keep their order where selectors of lower specificity follow.
 *
 * 1. The comment area and its text
 * 2. The post rating
 * 3. The head of the comment form - Subscribe, the logged-in line
 * 4. The comment form - avatar, editor, toolbar, options, buttons
 * 5. The head of the thread - count, settings, filters, sort menu
 * 6. The comments - author, label, avatar, meta, footer, tools menu
 * 7. Messages, error boxes, tooltips, pagination and dialogs
 * 8. Questions - no post rating, no logged-in line
 */
/* stylelint-disable no-descending-specificity, selector-class-pattern -- wpDiscuz's selectors, in the order the cascade relies on */

/* 1. The comment area and its text */

html #comments {
    color: var(--md-text);
}

/* The text of a comment, the first thing wpDiscuz's settings colour */
html #wpdcom .wpd-comment-text {
    color: var(--md-text);
}

/* 2. The post rating */

/* The box with the average. It sits on whatever holds the comments - the
   paper of an adventure, the card of a question - so it has no fill of its
   own, only a dashed line; on hover it fills like a secondary action. */
html .wpd-post-rating .wpd-rating-wrap .wpd-rating-value {
    background-color: transparent;
    border-color: var(--md-border-strong);
}

html .wpd-post-rating .wpd-rating-wrap .wpd-rating-value span {
    color: var(--md-text);
}

html .wpd-post-rating .wpd-rating-wrap .wpd-rating-value:hover {
    background-color: var(--md-text);
}

html .wpd-post-rating .wpd-rating-wrap .wpd-rating-value:hover .wpdrc,
html .wpd-post-rating .wpd-rating-wrap .wpd-rating-value:hover .wpdrt {
    color: var(--md-bg);
}

html .wpd-post-rating .wpd-rating-wrap .wpd-rating-title {
    color: var(--md-text-muted);
}

html .wpd-post-rating .wpd-rating-wrap .wpd-rating-left,
html .wpd-post-rating .wpd-rating-wrap .wpd-rating-right {
    border-bottom-color: var(--md-border);
}

/* Stars: empty ones in the strong line colour, filled ones in signpost
   yellow - the gold of a rating, the same in both modes and kept apart from
   the accent, which marks actions. While a member picks a rating, the stars
   up to the pointer fill and the ones after it empty again. */
html .wpd-post-rating .wpd-rating-wrap .wpd-rating-stars svg .wpd-star,
html .wpd-post-rating .wpd-rating-wrap .wpd-rate-starts svg .wpd-star,
html .wpd-post-rating.wpd-not-rated .wpd-rating-wrap .wpd-rate-starts svg:hover ~ svg .wpd-star,
html .wpdiscuz-post-rating-wrap .wpd-rating .wpd-rating-wrap .wpd-rating-stars svg .wpd-star {
    fill: var(--md-border-strong);
}

html .wpd-post-rating .wpd-rating-wrap .wpd-rating-stars svg .wpd-active,
html .wpd-post-rating .wpd-rating-wrap .wpd-rate-starts:hover svg .wpd-star,
html .wpdiscuz-post-rating-wrap .wpd-rating .wpd-rating-wrap .wpd-rating-stars svg .wpd-active {
    fill: var(--md-sign);
}

/* A rating field inside the comment form, when a form has one */
html #wpdcom .wpdiscuz-item .wpdiscuz-rating > label {
    color: var(--md-border-strong);
}

html #wpdcom .wpdiscuz-item .wpdiscuz-rating > input ~ label:hover,
html #wpdcom .wpdiscuz-item .wpdiscuz-rating > input:not(:checked) ~ label:hover ~ label,
html #wpdcom .wpdiscuz-item .wpdiscuz-rating > input:checked ~ label,
html #wpdcom .wpdiscuz-item .wpdiscuz-rating > input:checked ~ label:hover,
html #wpdcom .wpdiscuz-item .wpdiscuz-rating > label:hover ~ input:checked ~ label,
html #wpdcom .wpdiscuz-item .wpdiscuz-rating > input:checked + label:hover ~ label,
html #wpdcom .wpdiscuz-item .wpdiscuz-rating > input:checked ~ label:hover ~ label {
    color: var(--md-sign);
}

/* The same stars where a comment shows the rating it gave */
html .wpd-custom-field .wcf-pasiv-star {
    color: var(--md-border-strong);
}

html .wpd-custom-field .wcf-active-star {
    color: var(--md-sign);
}

html #wpdcom .wpdiscuz-item.wpd-field-group.wpd-field-rating {
    border-bottom-color: var(--md-border);
}

/* 3. The head of the comment form */

html #wpdcom .wpd-form-head {
    border-bottom-color: var(--md-border);
}

html #wpdcom .wpd-sbs-toggle,
html #wpdcom .wpd-sbs-toggle i.fa-caret-down {
    color: var(--md-text-muted);
}

html #wpdcom .wpd-auth .wpd-login {
    color: var(--md-text-muted);
}

html #wpdcom .wpd-auth .wpd-login a {
    color: var(--md-text);
}

html #wpdcom .wpd-auth .wpd-login a:hover {
    color: var(--md-accent-text);
}

html #wpdcom .wpd-auth .wpd-sep {
    border-right-color: var(--md-border);
}

/* 4. The comment form */

/* The avatar beside the form. Without an uploaded picture it is BuddyPress's
   default silhouette, a photo with its own light ground. */
html #wpdcom .wpd-form .wpd-avatar img,
html #wpdcom .wpd-form .wpd-avatar img.avatar {
    background-color: var(--md-surface-2);
    border-color: var(--md-border);
}

/* The editor and its toolbar read as one field: the field tone, the strong
   field border around both, a hairline between the text and the toolbar -
   the same build as the editor toolbar of the site's forms. wpDiscuz draws the
   text box without a bottom border and the toolbar without a top one. */
html #wpdcom .ql-container {
    background: var(--md-field);
    border-color: var(--md-border-strong);
}

html #wpdcom .ql-toolbar {
    background-color: var(--md-field);
    border-color: var(--md-border-strong);
    border-top: 1px solid var(--md-border);
}

html #wpdcom .ql-editor {
    border-bottom-color: transparent;
}

html #wpdcom .ql-editor > * {
    color: var(--md-text);
}

/* The placeholder */
html #wpdcom .ql-editor::before {
    color: var(--md-text-muted);
}

/* While typing, the frame takes the focus colour of a field (form-controls.css); the
   hairline to the toolbar stays */
html #wpdcom .wpdiscuz-textarea-wrap:focus-within .ql-container {
    border-color: var(--md-primary);
}

html #wpdcom .wpdiscuz-textarea-wrap:focus-within .ql-toolbar {
    border-right-color: var(--md-primary);
    border-bottom-color: var(--md-primary);
    border-left-color: var(--md-primary);
}

/* Toolbar buttons: muted at rest, the text colour on hover and when on */
html #wpdcom .ql-toolbar .ql-stroke {
    stroke: var(--md-text-muted);
}

html #wpdcom .ql-toolbar .ql-fill {
    fill: var(--md-text-muted);
}

html #wpdcom .ql-toolbar button.ql-spoiler,
html #wpdcom .ql-toolbar button.ql-sourcecode,
html #wpdcom .ql-toolbar .wmu-upload-wrap .wmu-add i {
    color: var(--md-text-muted);
}

html #wpdcom .ql-toolbar button:hover .ql-stroke,
html #wpdcom .ql-toolbar button.ql-active .ql-stroke {
    color: var(--md-text);
    stroke: var(--md-text);
}

html #wpdcom .ql-toolbar button:hover .ql-fill,
html #wpdcom .ql-toolbar button.ql-active .ql-fill {
    color: var(--md-text);
    fill: var(--md-text);
}

html #wpdcom .ql-toolbar button.ql-spoiler:hover,
html #wpdcom .ql-toolbar button.ql-sourcecode:hover,
html #wpdcom .ql-toolbar .wmu-upload-wrap .wmu-add i:hover {
    color: var(--md-text);
}

/* The editor's link box, Quill's own tooltip */
html #wpdcom .ql-snow .ql-tooltip {
    background-color: var(--md-dropdown);
    border-color: var(--md-border);
    box-shadow: var(--md-shadow);
    color: var(--md-text);
}

html #wpdcom .ql-snow .ql-tooltip a.ql-action::after {
    border-right-color: var(--md-border);
}

html #wpdcom .ql-snow a {
    color: var(--md-accent-text);
}

/* Inline formatting the editor can show inside a comment */
html #wpdcom .ql-snow .ql-editor blockquote {
    border-left-color: var(--md-border-strong);
}

html #wpdcom .ql-snow .ql-editor code,
html #wpdcom .ql-snow .ql-editor pre {
    background-color: var(--md-surface-2);
}

/* Character counter */
html #wpdcom .wpd-editor-char-counter {
    color: var(--md-text-muted);
}

html #wpdcom .wpd-editor-char-counter.error {
    color: var(--md-err);
}

/* Option icons under the editor (sticky, closed thread, notifications):
   off in the muted colours, on in the main colour */
html #wpdcom .wpd_label__check i.wpdicon-off {
    color: var(--md-text-muted);
    border-color: var(--md-border-strong);
}

html #wpdcom .wpd_label__check i.wpdicon-on {
    color: var(--md-primary);
    border-color: var(--md-primary);
}

/* Post Comment is the main action of the form, and so is the button of the
   subscribe bar (wpDiscuz gives both inputs a grey border of their own);
   the second button is outlined */
html #wpdcom .wpd-prim-button,
html #wpdcom .wc-field-submit input.wpd-prim-button,
html #wpdcom .wpdiscuz-subscribe-form-button input[type="submit"] {
    background-color: var(--md-primary);
    color: var(--md-on-primary);
    border-color: var(--md-primary);
    box-shadow: none;
}

html #wpdcom .wpd-prim-button:hover,
html #wpdcom .wc-field-submit input.wpd-prim-button:hover,
html #wpdcom .wpdiscuz-subscribe-form-button input[type="submit"]:hover {
    background-color: var(--md-primary-hover);
    border-color: var(--md-primary-hover);
}

html #wpdcom .wpd-second-button {
    background-color: transparent;
    color: var(--md-text);
    border: 1px solid var(--md-text);
    box-shadow: none;
}

html #wpdcom .wpd-second-button:hover {
    background-color: var(--md-text);
    color: var(--md-bg);
}

/* Required fields: wpDiscuz marks them with a grey glow */
html #wpdcom input:required {
    box-shadow: none;
}

/* Field descriptions open as dark tooltips, like those of the site's editor */
html #wpdcom div.wpd-field-desc span,
html #wpdcom span.wpd-field-desc span {
    background: var(--md-band);
    color: var(--md-on-band);
}

html #wpdcom div.wpd-field-desc span::after,
html #wpdcom span.wpd-field-desc span::after {
    border-top-color: var(--md-band);
}

html #wpdcom .wpd-form-row .wpd-field {
    color: var(--md-text);
}

html #wpdcom .wpd-form-row .wpdiscuz-item .wpd-field-desc {
    border-left-color: var(--md-border);
    color: var(--md-text-muted);
}

/* 5. The head of the thread */

/* The comment count is the open tab: ink rule under it, as under the
   site's headings; the settings icon beside it shares the rule. */
html #wpdcom .wpd-thread-head .wpd-thread-info {
    color: var(--md-text);
    border-bottom-color: var(--md-rule);
}

html #wpdcom .wpd-thread-head .wpdiscuz-user-settings {
    color: var(--md-text-muted);
    border-bottom-color: var(--md-rule);
}

html #wpdcom .wpd-thread-head .wpdiscuz-user-settings:hover {
    color: var(--md-text);
}

/* Filters: muted on a hairline; Most reacted keeps its amber bolt and
   Hottest its fire in the accent - in its text shade, as the label is small
   (the plain accent reached 3.9:1 on the question card); the chosen one
   turns to ink. */
html #wpdcom .wpd-thread-filter .wpd-filter {
    color: var(--md-text-muted);
    border-bottom-color: var(--md-border);
}

html #wpdcom .wpd-thread-filter .wpdf-reacted {
    color: var(--md-warn);
    border-bottom-color: var(--md-border);
}

html #wpdcom .wpd-thread-filter .wpdf-hottest {
    color: var(--md-accent-text);
    border-bottom-color: var(--md-border);
}

html #wpdcom .wpd-thread-filter .wpdf-sorting {
    color: var(--md-text-muted);
}

html #wpdcom .wpd-thread-filter .wpdf-active {
    color: var(--md-text);
    border-bottom-color: var(--md-rule);
}

/* The sort menu and the menu of comment tools float above the page */
html #wpdcom .wpdiscuz-sort-buttons,
html #wpdcom .wpd-tools-actions {
    background-color: var(--md-dropdown);
    border-color: var(--md-border);
    color: var(--md-text);
}

html #wpdcom .wpdiscuz-sort-buttons .wpdiscuz-sort-button:hover,
html #wpdcom .wpd-tools-actions .wpd-cta-button:hover {
    background-color: var(--md-hover-tint);
}

html #wpdcom .wpd-tools-actions .wpd-cta-button a {
    color: var(--md-text);
}

/* The bar above a filtered thread */
html #wpdcom .wpd-filter-container:not(:empty) {
    border-bottom-color: var(--md-border);
}

html #wpdcom .wpd-current-view,
html #wpdcom .wpd-inline-filter-cta .wpd-current-view i {
    color: var(--md-text);
}

html #wpdcom .wpd-inline-filter-cta {
    background: var(--md-accent-soft);
    border-color: var(--md-accent);
}

html #wpdcom .wpd-filter-view-all {
    background: var(--md-text-muted);
    color: var(--md-bg);
}

html #wpdcom .wpd-filter-view-all:hover {
    background: var(--md-text);
}

/* 6. The comments */

/* Authors and their role labels: ink names and a neutral tag for every
   role - wpDiscuz colours each role on its own (admin, author, subscriber,
   guest ...), so the rules go through the comment, above all of them. */
html #wpdcom .wpd-comment .wpd-comment-author,
html #wpdcom .wpd-comment .wpd-comment-author a {
    color: var(--md-text);
}

html #wpdcom .wpd-comment .wpd-comment-label {
    background-color: var(--md-surface-2);
    color: var(--md-text-muted);
    border: none;
}

html #wpdcom .wpd-comment .wpd-comment-wrap .wpd-comment-author span.wpd-user-nicename {
    color: var(--md-text-muted);
}

/* Avatars: a hairline ring for everyone, whatever the role. wpDiscuz rings
   an administrator through the layout class, four classes deep, so the
   rule goes through the avatar's column to stay above it. */
html #wpdcom .wpd-comment .wpd-comment-wrap .wpd-comment-left .wpd-avatar img,
html #wpdcom .wpd-comment .wpd-comment-wrap .wpd-comment-left .wpd-avatar img.avatar {
    background-color: var(--md-surface-2);
    border-color: var(--md-border);
}

/* Date, link, follow and edited notes */
html #wpdcom .wpd-comment-header,
html #wpdcom .wpd-comment-header .wpd-comment-link,
html #wpdcom .wpd-comment .wpd-comment-date,
html #wpdcom .wpd-comment .wpd-follow-link,
html #wpdcom .wpd-comment-status .wpd-closed,
html #wpdcom .wpd-comment-right .wpd-comment-last-edited,
html #wpdcom .wpd-comment .wpd-reply-to {
    color: var(--md-text-muted);
}

html #wpdcom .wpd-comment .wpd-follow-link:hover,
html #wpdcom .wpd-follow:hover i,
html #wpdcom .wpd-unfollow:hover i,
html #wpdcom .wpd-comment .wpd-follow-active:hover i,
html #wpdcom .wpd-comment-status .wpd-sticky {
    color: var(--md-text);
}

html #wpdcom .wpd-comment .wpd-follow-active {
    color: var(--md-accent-text);
}

html #wpdcom .wpd-comment .wpd-reply-to a {
    color: var(--md-text);
}

html #wpdcom .wpd-comment .wpd-reply-to a:hover {
    color: var(--md-accent-text);
}

html #wpdcom.wpd-layout-1 .wpd-comment .wpd-reply-to {
    border-left-color: var(--md-border);
}

html #wpdcom .wpdiscuz-readmore {
    color: var(--md-accent-text);
}

/* Footer of a comment: votes, Reply, tools, replies toggle */
html #wpdcom .wpd-comment-footer .wpd-vote-up svg,
html #wpdcom .wpd-comment-footer .wpd-vote-down svg,
html #wpdcom .wpd-comment-footer .wpd-reply-button svg {
    fill: var(--md-text-muted);
}

html #wpdcom .wpd-comment-footer .wpd-vote-result,
html #wpdcom .wpd-comment-footer .wpd-reply-button,
html #wpdcom .wpd-comment-footer .wpd-tools i,
html #wpdcom .wpd-comment-footer .wpd-toggle i,
html #wpdcom .wpd-comment-footer .wpd-toggle .wpd-view-replies {
    color: var(--md-text-muted);
}

html #wpdcom .wpd-comment-footer .wpd-reply-button:hover {
    color: var(--md-text);
}

html #wpdcom .wpd-comment-footer .wpd-reply-button:hover svg {
    fill: var(--md-text);
}

html #wpdcom .wpd-comment-footer .wpd-sep {
    border-right-color: var(--md-border);
}

html .wpd-vote-result-sep {
    background-color: var(--md-border);
}

/* A vote already given: wpDiscuz marks it with !important */
html #wpdcom .wpd-up {
    color: var(--md-ok) !important;
}

html #wpdcom .wpd-up svg {
    fill: var(--md-ok) !important;
}

html #wpdcom .wpd-down {
    color: var(--md-err) !important;
}

html #wpdcom .wpd-down svg {
    fill: var(--md-err) !important;
}

/* A comment just loaded or waiting for approval */
html #wpdcom.wpd-layout-1 .wpd-new-loaded-comment > .wpd-comment-wrap > .wpd-comment-right {
    background: var(--md-accent-soft);
}

html #wpdcom .wpd-comment .wpd-comment-status .wpd-unapproved {
    color: var(--md-warn);
}

/* A spoiler inside a comment */
html #wpdcom .wpdiscuz-spoiler-wrap {
    background-color: var(--md-surface-2);
    border-color: var(--md-border-strong);
}

/* 7. Messages, error boxes, tooltips, pagination and dialogs */

/* The toast after posting: the soft tint of its state, in its state colour */
html #wpdiscuz-comment-message .wpdiscuz-message-error {
    background-color: var(--md-err-soft);
    color: var(--md-err);
    box-shadow: var(--md-shadow);
}

html #wpdiscuz-comment-message .wpdiscuz-message-success {
    background-color: var(--md-ok-soft);
    color: var(--md-ok);
    box-shadow: var(--md-shadow);
}

html #wpdiscuz-comment-message .wpdiscuz-message-warning {
    background-color: var(--md-warn-soft);
    color: var(--md-warn);
    box-shadow: var(--md-shadow);
}

/* Inline error boxes; wpDiscuz sets their ground with !important */
html .wc_comment_edit_not_possible,
html .wc_comment_not_edited,
html .wc_comment_not_updated,
html .wc_deny_voting_from_same_ip,
html .wc_error_email_text,
html .wc_error_url_text,
html .wc_follow_e,
html .wpd-ajax-error {
    background-color: var(--md-err-soft) !important;
    color: var(--md-err);
    border-color: var(--md-err);
}

/* Tooltips on the icons, dark in both modes */
html [wpd-tooltip]::after {
    background: var(--md-band);
    color: var(--md-on-band);
}

html [wpd-tooltip]::before {
    border-top-color: var(--md-band);
}

/* Pages of a long thread */
html #wpdcom .page-numbers {
    background: transparent;
    color: var(--md-text-muted);
    border-color: var(--md-border-strong);
}

html #wpdcom span.current {
    background: var(--md-text);
    color: var(--md-bg);
}

/* The source-code dialog of the editor */
html #wpd-editor-source-code-wrapper-bg {
    background-color: var(--md-overlay);
}

html #wpd-editor-source-code-wrapper {
    background-color: var(--md-dropdown);
}

/* 8. Questions */

/* A question is answered and voted on, not rated, and the logged-in line
   adds nothing on the question card, so both go on question pages. The post rating is
   switched on per wpDiscuz form (Comments - Forms - Enable Post Rating), and
   one form serves every post type; once questions get a form of their own
   with the rating off, the first rule has nothing left to hide. */
body.single-question #wpd-post-rating,
body.single-question .wpd-rating-wrap {
    display: none !important;
}

body.single-question #wpdcom .wpd-login {
    display: none !important;
}