/**
 * Dream Comment Features — the panel above the comment form.
 *
 * This file ships byte-identical to 28 sites running four different theme
 * families (heatmap-adaptive, astra, blocksy, wp-bootstrap-starter), each with
 * its own typography and colour settings. So the panel brings its own, rather
 * than inheriting and hoping. Three rules make that work:
 *
 * 1. NO rem UNITS. ANYWHERE. heatmap-adaptive sets `html { font-size: 62.5% }`
 *    — the old 10px trick — so 1rem is 10px on a third of the fleet and 16px on
 *    the rest. The first version of this file used rem and its labels rendered
 *    at 7.2px on alemimenam.com. Instead #dcf-container declares an absolute
 *    font-size in px and everything inside it is em, which makes the container
 *    the single knob for the whole panel and makes the panel immune to whatever
 *    the host theme does to :root.
 *
 * 2. The panel draws its own surface. Because it sets BOTH a background and a
 *    foreground it controls its own contrast, and cannot be washed out by a
 *    theme whose body colour it did not anticipate. Every tone is a custom
 *    property declared on #dcf-container, so a site that ever needs an override
 *    can set four values instead of forking the file.
 *
 * 3. NO text-transform: uppercase, and `text-transform: none` is declared
 *    defensively on the button — several themes uppercase buttons. The network
 *    is Turkish-first, Turkish has dotted and dotless i, and CSS uppercasing
 *    mangles 'İnceleniyor' or 'te'vîl' unless the lang attribute is exactly
 *    right, which across 28 installs it will not be.
 *
 * font-family stays inherited EXCEPT on the headline, which is the one display
 * element and takes Georgia. Everywhere else the typeface is the host site's own
 * voice and there is no reason to take it. See --dcf-display for the caveats.
 *
 * Everything is scoped under #dcf-container, which also buys the specificity to
 * win against theme rules like `#comments p` without a single !important.
 *
 * The cards are divided by hairline rules rather than drawn as three boxes. The
 * rules are inset from the top and bottom rather than running the full height —
 * a manuscript column divider, which is the world this content comes from, and
 * it keeps three stacked grey rectangles off the page.
 */

#dcf-container {
    /* The tones. Warm greys rather than neutral — the network's subject is
       manuscript dream interpretation, and a cool clinical grey reads as a
       systems dashboard. Every one of these is a custom property so a site that
       ever needs an override sets values rather than forking the file. */
    --dcf-ink: #23201c;
    --dcf-ink-mute: #6c655b;
    --dcf-surface: #ffffff;
    --dcf-line: #e4dfd7;

    /* One accent, and it marks the things that can be clicked: the toggle
       button, and the muabbir.net CTA at the foot of the list it opens. Deep
       teal because the real primary action on this page is the comment form
       directly below, and nothing in the panel should out-shout it — the toggle
       is outlined and the muabbir.net CTA solid, which ranks the two against
       each other without either competing with the textarea. */
    --dcf-accent: #14655e;
    --dcf-accent-line: #a9c8c4;
    --dcf-accent-wash: #eff6f5;

    /* The headline, and deliberately NOT the accent above. The accent means
       "this is clickable" everywhere else in the panel, and the headline is a
       statement, not a control — borrowing the teal would invite a tap that does
       nothing. Deep madder instead: the heading of a manuscript was written in
       red ink while the body stayed black, which is the same job this line does
       and comes from the same world as the content. Dark enough to read as ink
       rather than as an error, and 8.4:1 on the surface, so it passes at any
       size. */
    --dcf-headline-ink: #7a3b2e;

    /* Georgia for the headline only. It is on Windows and macOS/iOS but NOT on
       Android or most Linux, where this falls through to the platform serif
       (Noto Serif via the generic) — still a serif, still the intended contrast
       against the sans body, just not the same face. That is an acceptable
       degradation for one line and the reason this is not used anywhere else.
       Georgia's numerals are old-style, with descenders on 3 4 5 7 9, so it must
       stay off the cards: '114.472' would bounce along the baseline. */
    --dcf-display: Georgia, 'Times New Roman', Times, serif;

    /* Presence. Green reads as available in every locale this ships to, and
       muabbir.net's dashboard already uses a green dot with a halo for the same
       fact — a visitor with both open should not have to learn two systems. The
       resting grey is warm, so it belongs to this panel rather than looking like
       a disabled control. */
    --dcf-online: #2f9e63;
    --dcf-online-ink: #1d7a4a;
    --dcf-online-halo: rgba(47, 158, 99, 0.22);
    --dcf-resting: #b6ada0;

    /* The anchor. See rule 1 in the header — this is px on purpose and must
       stay px. Everything below is em and scales from here. */
    font-size: 16px;
    line-height: 1.5;
    color: var(--dcf-ink);
    margin: 1.25em 0;
}

#dcf-container *,
#dcf-container *::before,
#dcf-container *::after {
    box-sizing: border-box;
}

/* --- who is here, and whether they are at the desk --- */

/* One voice, one weight, one colour. The name and the suffix used to be ranked
   against each other — bold name, muted suffix — which split a four-word line
   into two things to read. It is a single sentence about a single person, so it
   is set as one. */
#dcf-container .dcf-headline {
    margin: 0 0 0.25em;
    padding: 0;
    font-family: var(--dcf-display);
    font-size: 1.0625em;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    text-wrap: balance;
    color: var(--dcf-headline-ink);
}

/* Both spans now inherit everything, so these rules exist only to defend: the
   line contains the interpreter's display name, and themes do style bare spans
   inside a paragraph. #dcf-container + class outranks anything like
   `#comments p span`, so whatever arrives from the theme loses here. */
#dcf-container .dcf-name,
#dcf-container .dcf-headline-suffix {
    font-family: inherit;
    font-weight: inherit;
    font-style: inherit;
    color: inherit;
}

/* Reserves its line from first paint — it sits directly above the cards, so a
   late insertion would shove the whole panel down. */
#dcf-container .dcf-presence {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    margin: 0 0 0.7em;
    padding: 0;
    font-size: 0.8125em;
    line-height: 1.3;
    color: var(--dcf-ink-mute);
}

/**
 * The dot. Resting is the honest default, so it is the state that renders
 * without a modifier class — if the AJAX call never lands, the panel says the
 * interpreter is resting rather than claiming they are here.
 */
#dcf-container .dcf-dot {
    flex: none;
    width: 0.6em;
    height: 0.6em;
    border-radius: 50%;
    background: var(--dcf-resting);
}

#dcf-container .dcf-presence.is-online {
    color: var(--dcf-online-ink);
}

/* The halo is the whole reason this reads as live rather than as a bullet. It
   is a ring rather than an animation on purpose: a pulsing dot above a comment
   form is a notification badge, and this is a fact, not a demand. */
#dcf-container .dcf-presence.is-online .dcf-dot {
    background: var(--dcf-online);
    box-shadow: 0 0 0 3px var(--dcf-online-halo);
}

/* Flex with equal basis, and the third card is hidden with visibility rather
   than display — so all three columns hold their width from first paint whether
   or not the reply figure arrives. A cluster below the sample floor shows two
   cards in a three-column rhythm, which is a fair price for never reflowing the
   row under the reader's eyes. */
#dcf-container .dcf-cards {
    display: flex;
    align-items: stretch;
    background: var(--dcf-surface);
    border: 1px solid var(--dcf-line);
    border-radius: 10px;
    padding: 0.875em 0.375em;
}

#dcf-container .dcf-card {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.15em;
    padding: 0 0.5em;
    text-align: center;
}

/* The divider. Inset vertically, so it reads as a column rule rather than a
   table border. */
#dcf-container .dcf-card + .dcf-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.35em;
    bottom: 0.35em;
    width: 1px;
    background: var(--dcf-line);
}

#dcf-container .dcf-card-title {
    display: block;
    font-size: 0.8125em;
    font-weight: 600;
    font-style: normal;
    letter-spacing: 0.04em;
    line-height: 1.25;
    text-transform: none;
    color: var(--dcf-ink-mute);
}

/**
 * The number is the content; everything else labels it.
 *
 * Sized in px/vw rather than em because it is the one element whose width can
 * overflow its column: '124.777' is seven glyphs in a third of a phone screen.
 * The vw term is what keeps it inside that column on a 360px handset; the px
 * bounds are what stop it turning into a headline on a desktop and a footnote
 * inside a narrow sidebar-flanked column.
 *
 * Tabular figures so 124.777 and 28 sit on the same rhythm instead of wobbling.
 */
#dcf-container .dcf-card-number {
    display: block;
    font-size: clamp(20px, 6.2vw, 30px);
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    letter-spacing: -0.01em;
    white-space: nowrap;
    color: var(--dcf-ink);
}

/* 'saat' belongs to the number and carries its weight — size and tone are what
   keep it from competing, not a lighter stroke. */
#dcf-container .dcf-card-unit {
    font-size: 0.46em;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--dcf-ink-mute);
}

#dcf-container .dcf-card-def {
    display: block;
    font-size: 0.8125em;
    font-weight: 400;
    line-height: 1.35;
    color: var(--dcf-ink-mute);
    text-wrap: balance;
}

/* --- the list, and the button that asks for it --- */

/**
 * A full reset, not a tweak. Themes style bare `button` heavily — heatmap-
 * adaptive alone sets font-size, line-height, border, background and radius on
 * it, and Astra adds padding and letter-spacing — so every property that could
 * arrive from somewhere else is declared here rather than left to chance.
 */
#dcf-container #dcf-load {
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: auto;
    min-height: 0;
    margin: 0.625em 0 0;
    padding: 0.7em 1em;
    font-family: inherit;
    font-size: 0.9375em;
    font-weight: 600;
    font-style: normal;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    text-shadow: none;
    text-align: center;
    color: var(--dcf-accent);
    background: var(--dcf-surface);
    border: 1px solid var(--dcf-accent-line);
    border-radius: 8px;
    box-shadow: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

/**
 * The chevron, drawn in CSS rather than shipped as an SVG or an icon font: it is
 * two borders on an empty span, so it inherits the button's colour for free and
 * costs the 28 sites no extra request.
 *
 * It points down when closed and up when open, rotating from aria-expanded —
 * the same attribute the button reports to a screen reader, so the visual state
 * and the announced state cannot disagree.
 */
#dcf-container .dcf-chevron {
    flex: none;
    width: 0.5em;
    height: 0.5em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-0.15em) rotate(45deg);
    transform-origin: center;
    transition: transform 0.2s ease;
}

#dcf-container #dcf-load[aria-expanded="true"] .dcf-chevron {
    transform: translateY(0.1em) rotate(-135deg);
}

#dcf-container #dcf-load:hover,
#dcf-container #dcf-load:focus-visible {
    color: var(--dcf-accent);
    background: var(--dcf-accent-wash);
    border-color: var(--dcf-accent);
}

/* Never remove the focus ring — this is the one control in the panel. */
#dcf-container #dcf-load:focus-visible {
    outline: 2px solid var(--dcf-accent);
    outline-offset: 2px;
}

#dcf-container #dcf-list {
    margin-top: 0.5em;
}

#dcf-container .dream-comment-features {
    padding: 0.5em 0.25em;
    border-top: 1px solid var(--dcf-line);
}

#dcf-container .dream-comment-features:first-child {
    border-top: 0;
}

#dcf-container .dream-comment-features p {
    margin: 0;
    padding: 0;
    font-size: 0.875em;
    font-weight: 400;
    line-height: 1.45;
    color: var(--dcf-ink);
}

#dcf-container .dream-comment-features strong {
    font-weight: 600;
    color: inherit;
}

#dcf-container .dream-comment-features a {
    color: var(--dcf-accent);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

#dcf-container .dream-comment-features a:hover,
#dcf-container .dream-comment-features a:focus-visible {
    text-decoration: none;
}

#dcf-container .dream-comment-features small {
    font-size: 0.8571em; /* 12px against the row's 14px */
    color: var(--dcf-ink-mute);
}

/* The status marker keeps the emoji at the row's own size, so a theme that
   shrinks `small` cannot turn ✅ into a speck. */
#dcf-container .dream-comment-features small.comment-approved,
#dcf-container .dream-comment-features small.comment-pending,
#dcf-container .dream-comment-features small.comment-deleted {
    font-size: 1em;
    color: inherit;
}

/**
 * The mask.
 *
 * activity-list.php has always emitted <span class="blur">***</span> for pending
 * and trashed authors, and nothing has ever defined this class — so on all 28
 * live sites the asterisks render as plain text. Defining it is the point of
 * this rule: the three characters should read as deliberately withheld, not as
 * someone's actual name.
 *
 * The two characters before it are NOT blurred, and must not be. They are how a
 * visitor recognises their own submission without logging in.
 */
#dcf-container .blur {
    filter: blur(2.5px);
    opacity: 0.75;
    user-select: none;
}

/**
 * The muabbir.net CTA, at the foot of the expanded list. Turkish sites only —
 * the other six locales ship no copy for it and it never renders there.
 *
 * It replaces a bordered grey box that used to sit above the form on every
 * pageview. Down here it is the last thing someone sees after scanning the list
 * for their own dream and not finding it, which is the moment the offer is
 * actually useful — so it is separated by space and a rule rather than drawn as
 * another card competing with the one above.
 */
#dcf-container .dcf-cta {
    margin-top: 0.75em;
    padding-top: 0.75em;
    border-top: 1px solid var(--dcf-line);
    text-align: center;
}

#dcf-container .dcf-cta-text {
    margin: 0 0 0.6em;
    padding: 0;
    font-size: 0.8125em;
    line-height: 1.45;
    color: var(--dcf-ink-mute);
}

/* Solid, unlike the panel's outlined toggle: this is a destination, and the
   toggle above it is a control. Same accent so they read as one family. */
#dcf-container .dcf-cta-button {
    display: inline-block;
    margin: 0;
    padding: 0.55em 1.2em;
    font-family: inherit;
    font-size: 0.8125em;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    text-shadow: none;
    color: var(--dcf-surface);
    background: var(--dcf-accent);
    border: 1px solid var(--dcf-accent);
    border-radius: 6px;
    box-shadow: none;
}

#dcf-container .dcf-cta-button:hover,
#dcf-container .dcf-cta-button:focus-visible,
#dcf-container .dcf-cta-button:visited {
    color: var(--dcf-surface);
    text-decoration: none;
}

#dcf-container .dcf-cta-button:focus-visible {
    outline: 2px solid var(--dcf-accent);
    outline-offset: 2px;
}

/**
 * The last line before the textarea, and now literally against it.
 *
 * Quiet on purpose. It is a caution, not a pitch, and anything loud here would
 * compete with the very thing it is asking the visitor to do.
 *
 * Lives OUTSIDE #dcf-container since it moved inside the form, so like
 * .dcf-postsubmit below it repeats the few tokens it needs instead of
 * inheriting them — there is no container to inherit from, and an em font-size
 * out here would be measured against whatever the theme sets on the form.
 * 13px is the same size the em version resolved to inside the panel.
 */
.dcf-presubmit {
    margin: 0 0 0.5em;
    padding: 0;
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
    color: #6c655b;
}

/**
 * The post-submit notice. Lives outside #dcf-container — it is rendered after
 * the form, not in the panel — so it repeats the tokens it needs rather than
 * inheriting them.
 *
 * The accent wash rather than the plain surface: this one is a response to
 * something the visitor just did, and should read as an acknowledgement rather
 * than as more page furniture.
 */
.dcf-postsubmit {
    margin: 0.9em 0;
    padding: 0.85em 1em;
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
    color: #23201c;
    background: #eff6f5;
    border: 1px solid #a9c8c4;
    border-radius: 8px;
}

.dcf-postsubmit p {
    margin: 0;
    padding: 0;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

/**
 * Copy the link. A full reset, not a tweak — themes style bare `button` hard
 * (heatmap-adaptive sets font-size, line-height, border, background and radius;
 * Astra adds padding and letter-spacing), and this one sits in theme territory
 * outside #dcf-container with nothing of ours between it and them.
 *
 * Outlined rather than solid: the notice it lives in is already an
 * acknowledgement, and the real next action is the visitor bookmarking or
 * sharing the page. This offers help with that, it does not demand a click.
 *
 * text-transform: none for the same reason as the panel's button — Turkish
 * dotted and dotless i do not survive CSS uppercasing across 28 installs, and
 * 'Bağlantıyı kopyala' is exactly the phrase that would break.
 */
.dcf-postsubmit .dcf-copy-button {
    display: inline-block;
    margin: 0.7em 0 0;
    padding: 0.5em 1.1em;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    font-style: normal;
    line-height: 1.3;
    letter-spacing: normal;
    text-align: center;
    text-transform: none;
    text-decoration: none;
    color: #14655e;
    background: #ffffff;
    border: 1px solid #a9c8c4;
    border-radius: 6px;
    box-shadow: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.dcf-postsubmit .dcf-copy-button:hover,
.dcf-postsubmit .dcf-copy-button:focus {
    background: #eff6f5;
    border-color: #14655e;
}

/* Focus has to survive the reset above, because removing an outline without
   replacing it is how a keyboard user loses their place. */
.dcf-postsubmit .dcf-copy-button:focus-visible {
    outline: 2px solid #14655e;
    outline-offset: 2px;
}

/* Confirmed. Green rather than the accent, matching the presence dot's meaning
   of 'yes, this happened' — and it is a state, not a second action, so the
   border goes with it. */
.dcf-postsubmit .dcf-copy-button.is-done {
    color: #1d7a4a;
    background: #ffffff;
    border-color: #2f9e63;
    cursor: default;
}

@media (prefers-reduced-motion: reduce) {
    .dcf-postsubmit .dcf-copy-button {
        transition: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    #dcf-container #dcf-load,
    #dcf-container .dcf-chevron {
        transition: none;
    }
}

/**
 * Narrow phones: keep the three abreast — stacking them would put the reply time
 * below the fold, which is the whole reason the panel moved here — but give the
 * dividers and padding back their room.
 *
 * Only the container's font-size moves. Every label, definition and the button
 * scale from it in one step, which is the payoff for banning rem: there is
 * exactly one number to turn.
 */
@media (max-width: 420px) {
    #dcf-container {
        font-size: 15px;
    }

    #dcf-container .dcf-cards {
        padding: 0.75em 0.125em;
    }

    #dcf-container .dcf-card {
        padding: 0 0.3em;
    }
}

/* =========================================================================
   wpDiscuz overrides — NOT the panel
   =========================================================================

   Everything above this line is ours, scoped under #dcf-container, and uses no
   !important. Everything below is the opposite on both counts, deliberately:
   these target wpDiscuz's own markup, which is outside our container and comes
   with its own stylesheet, so there is nothing of ours to scope to and no way
   to win on specificity alone against rules we do not control and cannot
   anticipate across four theme families.

   Why they are here at all: this exact set was maintained by hand in 26
   separate per-site files under wp-content/uploads/custom-css-js/ — mycss.css,
   10000045.css, r-p.css, so_css.css, 2149424.css and a dozen more names. Same
   intent, sixteen filenames, no way to change it once. Consolidating them here
   is the point.

   The per-site file stays the place for anything genuinely per-site. This
   section is only for rules that should be true on every site.
   ========================================================================= */

/* Identity fields. The network never asks a dreamer for an email address or a
   website, and the two are removed rather than restyled.
   PRECONDITION: the field must NOT be required in the wpDiscuz form (Comment
   Forms → the form → the field). Hiding a required input makes the browser
   refuse to submit and then fail to explain why, because it cannot focus a
   display:none field to show the message. All 26 sites already carry
   required=0 on the email field; verify before adding a site. */
.wc_email-wrapper,
.wc_website-wrapper {
    display: none !important;
}

/* Account furniture. These sites have no reader accounts — the only logged-in
   user is the interpreter — so a log-in link and a user-settings panel offer
   a door that opens onto nothing. */
.wpd-login,
.wpdiscuz-user-settings {
    display: none;
}

/* Replies to a dream are the interpreter's job, not the crowd's. Hiding the
   reply button on top-level comments only: nested replies keep theirs, so a
   dreamer can still answer inside their own thread. */
div.wpd_comment_level-1 > div.wpd-comment-wrap > div.wpd-comment-right > div.wpd-comment-footer > div.wpd-reply-button {
    display: none !important;
}

/* The thread toggle is the control that reveals an interpretation, so it is
   sized and coloured to be found rather than left at wpDiscuz's default. */
.wpd-toggle i {
    font-size: 20px !important;
    color: #0088cc !important;
}

span.wpd-view-replies-text {
    font-size: 16px !important;
    font-weight: 600;
}

/* A dream takes more than two lines to tell. Three times the 48px wpDiscuz gives
   the box, so it invites the whole thing rather than a sentence the visitor then
   has to scroll inside.

   The live selector is the plain textarea. **Quill is off on all five deployed
   sites** — measured in a browser, 2026-08-03: every one renders
   `#wpdcom.wpd-layout-2` with a `textarea.wc_comment` and no `.ql-editor` node at
   all. Reading the page source is not enough to tell: `ql-editor` appears there
   as CSS text whether or not the editor is ever instantiated, which is exactly
   how the first attempt at this rule went to the wrong element.

   `min-height` rather than `height` on purpose. wpDiscuz sets `height: 48px`
   (`#wpdcom.wpd-layout-2 .wpd-form .wpdiscuz-textarea-wrap textarea`) and grows
   it from JS as the visitor types; min-height beats both an explicit height and
   an inline one, so the floor holds without fighting the auto-grow.

   The .ql-editor selector rides along for the case where someone turns the rich
   editor back on in wpDiscuz's settings — it costs one line and otherwise the box
   would silently drop to 65px. */
#wpdcom .wpd-form .wpdiscuz-textarea-wrap textarea,
#wpdcom .ql-editor {
    min-height: 144px !important;
}