/*!
 * Copyright (c) 2010-2015 Kaj Magnus Lindberg
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */


.dw-p
  background-color: white
  position: relative;

.dw-p-hd,
.dw-p.dw-zd  // folded comment
  margin: 0;
  padding: 0;
  top: 0;
  line-height: 15px // or test w 120%

.dw-p-hd,
.dw-p.dw-zd,  // folded comment
.DW.DW .dw-p-hd.s_Fx-Flash-End
  color: hsl(0, 0%, 8%);
  background-color: white

.dw-p.dw-zd  // folded comment
  margin-bottom: 25px;
  cursor: pointer;

.dw-p-bd,
.dw-p-diff // COULD place -bd on -diff too, remove this -diff row?
  padding: 1px 1px 0 0
  position: relative
  min-width: 5em
  margin: 0;
  clear: both;
  overflow-y: hidden;
  overflow-x: auto;

.dw-p-bd,
.dw-p-diff,
.DW.DW .dw-p-bd.s_Fx-Flash-End
  background-color: white

.dw-p-flat > .dw-p-bd,
.dw-depth-1 > .dw-p > .dw-p-bd
  padding-left: 1px;  // looks more aligned with .dw-p-hd for some reason
  padding-top: 9px;

// Place debug-reading-progress outline above the .dw-p.
.dw-p-hd
  z-index: 2; // > the body, so avatar circle won't be cut off when highlighting body background
  position: relative;

  // Can right-align post tags, but doesn't look that nice. Might make sense, though,
  // if pat tags (user badges) look like post tags, so they'd be visually separated.
  //display: flex;
  //justify-content: space-between;
  //align-items: baseline;

  // Post tags often line wrap, and are hard to read if too close.
  line-height: 165%;


// Relying-to, draft and preview posts
//===========================

$previewBackground = hsl($uiHueHighlightedBackground, 100%, 80%);
$previewBorderBottom = 15px solid $previewBackground !important;

.s_T_ReTo,
.s_T_YourPrvw
  padding: 9px 15px 7px;
  font-weight: bold;
  font-size: 17px;
  background: $previewBackground;

.s_T_ReTo
  background: hsl($uiHue, 75%, 94%);
  margin-bottom: 16px;  // the .s_T_YourPrvw has extra top padding, but not .s_T_ReTo

.s_T-Prvw-IsEd > .s_T_YourPrvw
  margin-bottom: 10px;

// Remove colors from a draft one isn't currently editing. (4036RT459)
.s_T-Prvw-NotEd
  .s_T_YourPrvw
    color: hsl(0, 0%, 15%);
    background: hsl(0, 0%, 80%);
    &.s_Fx-Flash-End
      background: hsl(0, 0%, 80%) !important;
  .s_T_YourPrvw_ToWho
    color: black;
  .s_P-Prvw
    padding: 14px 10px 7px !important;

.DW .s_T_ReTo_Prvw,
.DW .s_T_YourPrvw_ToWho
  margin-left: 3px;
  font-style: normal;
  font-weight: normal;
  .dw-rr
    color: hsl($uiHue, 100%, 38%);
    padding-left: 3px;
  .s_RRs_RR_Aw
    color: hsl($uiHue, 55%, 47%);

.DW .s_T_ReTo_Prvw
  margin-left: 2em;
.DW .s_T_ReTo_Prvw_B
  font-weight: bold;
  color: hsl($uiHue, 100%, 33%);


.s_P-Prvw
  .dw-p-hd, .dw-p-bd
    opacity: 0.63;
  padding: 6px 0 6px 2px !important;
  &:not(.s_P-Prvw-Real)
    // If real, then there's an action bar below; then, need no margin.
    margin-bottom: 40px !important;
    border-bottom: $previewBorderBottom;
  .esP_Z-Show,
  .s_P_H_Unr
    display: none !important;

.s_T-Flat, .dw-id0
  > .s_P-Prvw
    padding-top: 16px !important;  // align w avatar
    min-height: 60px;  // enough height for avatar

.s_T-Prvw-IsEd.dw-id0:not(.s_P-Prvw-Real)
  // This only works for new orig post replies — currently, for nested replies,
  // or old replies being edited,
  // the outline could appear "far away" from the post — it'd include the arrows
  // pointing to the posts below too, or any child posts.
  // So skip, unless depth = 0, id0.
  outline: 5px solid $previewBackground;
  // W/o padding, there's a 5px gap between border and outline, no idea why.
  // Don't think can be decender-spacing? — Display is 'block'.
  padding-bottom: 5px;

.s_T-Prvw-NotEd .s_P-Prvw  // (4036RT459)
  border-bottom: none !important;
  &, 
  .dw-p-hd
    background: hsl(0, 0%, 92%);
    &.s_Fx-Flash-End
      background: hsl(0, 0%, 92%) !important;
  pre
    background: hsl(0, 0%, 98%);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 120px;

.dw-id0,
.s_T-Flat

  // If the post is indented, but the avatar is not, so place the border
  // below the thread instead so it'll extend below the avatar too.
  // However, if -Real, then we're editing an already existing post,
  // and there might be replies — then, skip the bottom border.
  &.s_T-Prvw-IsEd&:not(.s_P-Prvw-Real)
    border-bottom: $previewBorderBottom;
    margin-bottom: 30px;

    > .s_P-Prvw
      // There's margin below the thread instead.
      margin-bottom: 0 !important;

  // &.s_T-Prvw-NotEd:
  //  Skip border, there's background color instead  (4036RT459).

  > .s_P-Prvw
    border-bottom: none !important;
  &.s_T-Prvw-NotEd
    > .s_P-Prvw
      margin-bottom: 30px !important;

.s_T_YourPrvw_ResumeB
  margin-left: 15px;
  box-shadow: 1px 2px 4px hsl(0, 0%, 37%);

// The Orig Post has a bit different look & margins.
.dw-ar-t > .s_T_YourPrvw
  margin: 20px 0 0;



// Cropped and resized posts
//===========================

.dw-p.dw-x
  cursor: pointer;
  // Make things in the header clickable in spite of .dw-x-cover.
  > .dw-p-hd
    z-index: 2;
    position: relative;

.dw-p.dw-zd,
.dw-x-show
  position: relative;
  bottom: 10px;
  padding: 0 0 3px 3px;  // padding-top hides parts of any <p> above
  margin: 7px 0 22px;
  font-style: italic;
  background: #fff;
  color: hsl($uiHue, 70%, 35%);
  letter-spacing: 0.5px;
  word-spacing: 0.5px;

.dw-p.dw-zd,
.dw-ts-squashed .dw-x-show
  bottom: 0;
  padding: 13px 18px;
  display: block;
  margin: 0 0 8px;
  z-index: 1;
  float: left;  // see [5FKT02W] below
  color: hsl(0, 0%, 3%);
  background: hsl(0, 0%, 95%);
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 40%);
  font-size: 16px;
  margin-top: 10px;

  &:hover
    background-color: hsl($uiHue, 100%, 96%);
    color: hsl($uiHue, 100%, 16%);
    text-decoration: none;

.dw-ts-squashed.dw-2dcol > .dw-x-show
    color: hsl(0, 0%, 20%);

.dw-single-and-multireplies
  clear: both; // because of float: left above [5FKT02W]

.dw-p.dw-x:hover
  .dw-p-hd,
  .dw-p-bd
    background-color: hsl($uiHue, 100%, 95%);
  .dw-x-show
    color: black;
    background-color: hsl($uiHue, 100%, 91%);

.dw-x-cover
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;


// Unwanted posts
//===========================

// Dim the post and draw a X over it, darker if there are many Unwanted votes.
.dw-p.dw-unwanted

  // Sync the number of steps with JS in client/app/renderer/pots.ts. [4KEF28]
  &.dw-unwanted-1 > .dw-p-bd
    opacity: 0.80;
  &.dw-unwanted-2 > .dw-p-bd
    opacity: 0.72;
  &.dw-unwanted-3 > .dw-p-bd
    opacity: 0.65;
  &.dw-unwanted-4 > .dw-p-bd
    opacity: 0.60;
  &.dw-unwanted-5 > .dw-p-bd
    opacity: 0.55;
  &.dw-unwanted-6 > .dw-p-bd
    opacity: 0.50;
  &.dw-unwanted-max > .dw-p-bd
    opacity: 0.45;

  &.dw-unwanted-1 > .dw-unwanted-cross,
  &.dw-unwanted-2 > .dw-unwanted-cross
    opacity: 0.25;
  &.dw-unwanted-3 > .dw-unwanted-cross,
  &.dw-unwanted-4 > .dw-unwanted-cross
    opacity: 0.37;
  &.dw-unwanted-5 > .dw-unwanted-cross,
  &.dw-unwanted-max > .dw-unwanted-cross
    opacity: 0.7;

  // Draw an X.
  & > .dw-unwanted-cross
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
    crossGray();
    // Leave 20px at the bottom because the action button overlaps the lower parts of the post.
    background-size: 100% calc(100% - 20px), auto;


// Comments (both replies and chat comments)
//===========================

// Show the whole article (or <pre>s with very long lines
// might be cropped).
.dw-ar-p
  overflow: visible

// Don't pad the root post and titles (titles are already indented since
// they're placed inside another post already).
.DW.DW
  .dw-ar-p-hd,
  .dw-depth-0 > .dw-p > .dw-p-bd,
  .dw-p-ttl,
  .dw-p-ttl > .dw-p-bd
    margin-left: 0
    padding-left: 0
    // Wrap long titles.
    overflow: hidden;
    word-break: break-word;

.dw-p-ttl > .dw-p-bd
  margin-bottom: 0; // else too much margin-bottom, author name too far away

// No idea why, but the descender spacing for the title, is missing, so e.g. a 'y' in
// the title gets cut of (looks more like a v). Add some space. Weird.
h1.dw-p-ttl
  padding-bottom: 4px;


.esPendingApproval
  font-size: 15px;
  font-style: italic;
  font-weight: bold;
  background: hsl(0, 100%, 96%);
  padding: 3px 8px 3px 0;
  margin-top: 20px;
  display: inline-block;

// If there's a pending-approval message just above the title, then add margin above that
// message, instead of above the title.
.dw-p-ttl .esPendingApproval
  margin: 27px 0 3px 0;
  font-size: 17px;
  padding: 11px 17px 9px 11px;
.esPendingApproval + .dw-p-ttl
  margin-top: 7px;
  padding-top: 0;

// Reduce margin between text-pending-approval message and the text
.DW.DW .esPendingApproval + .dw-ar-p .dw-p-bd-blk > :first-child
  margin-top: 5px;  // otherwise, would be: (6MKA0EB)

h1.dw-p-ttl
  margin-top: 0;
  &.icon-pin:before
    font-size: 82%;
    color: hsl(0, 0%, 47%);
    margin: 0 9px 0 0;

  // Question and to-do icons.
  [class^="icon-"]:before,
  [class*=" icon-"]:before
    margin: 0 8px 0 0;
    position: relative;
    top: 2px;

  .icon-chat::before
    font-weight: bold;
    font-size: 115%;
    font-family: monospace;
    opacity: 0.85;

  .icon-mail:before
    top: 0
    color: hsl(0, 0%, 50%);

  .icon-help-circled:before
    color: hsl(0, 0%, 55%);
    font-size: 95%;
    top: 1px;

  .icon-ok-circled:before,
  .icon-ok-circled-empty:before
    font-size: 90%;
    position: static;

  .icon-idea:before
    font-size: 94%;
    position: relative;
    top: -2px;

  .icon-check-dashed:before
    margin-right: 11px;
    position: relative;
    top: 4px;
    border-color: hsl($uiHue, 55%, 57%);
    border-width: 3px;
    font-size: 80%;
    border-radius: 5px;
    border-style: dotted;

  .icon-attention-circled
    font-size: 95%;
    margin-right: 2px;
    position: relative;
    top: -2px;

  .icon-block:before
    top: 0;
    font-size: 98%;
    color: hsl(0, 0%, 47%);

  .icon-check
    color: #555;

  .icon-check-empty:before
    left: -2px;  // there's some whitespace to the left inside the icon itself

  // The done/not-done checkbox, if it's clickable (it is for staff and topic author).
  .dw-clickable[class^="icon-"],
  .dw-clickable[class*=" icon-"]
    &:before
      color: hsl($uiHue, 51%, 45%);
      text-decoration: none;
    &:hover:before
      outline: 2px solid hsl($uiHue, 100%, 90%);
      background-color: hsl($uiHue, 100%, 96%);
      cursor: pointer;
    &.c_Solved:before
      color: hsl($solvedHue, 58%, 48%);

  .dw-forum-intro-show
    margin-left: 10px;
    text-decoration: none;
    position: relative;
    top: -1px;
    font-size: 93%;
    // text-shadow doesn't work in IE9 though, and we don't support it.
    text-shadow: 0 0 5px hsl($uiHue, 67%, 55%);
    color: white;

  .dw-a-edit
    line-height: 0; // so it won't push the stuff below downwards
    float: none;
    font-size: 20px;
    margin-left: 8px;
    opacity: 0.8;
    &:before
      top: -2px;
    &:hover
      outline: 2px solid hsl($uiHue, 100%, 90%);
      background-color: hsl($uiHue, 100%, 96%);


.dw-forum .dw-p-ttl .dw-a-edit
  // A forum title has some margin/paddin-bottom, so unset bottom: 0.
  bottom: auto;
  padding-top: 2px;

// Orig post, deleted
.s_P-Dd .esOrigPost
  margin-top: 25px;
  font-size: 20px;
  font-style: italic;

.dw-p-unapproved > .dw-p-hd,
.s_P-Dd > .dw-p-hd
  font-style: italic
  background-color: transparent

.dw-p-unapproved > .dw-p-hd
  margin-bottom: 24px

.dw-depth-1 .dw-p-unapproved > .dw-p-hd
  padding: 14px 0 4px;

.s_P-Dd > .dw-p-hd
  margin-bottom: 8px

// If a deleted comment is shown, then there're non-deleted children, so make some
// space for the arrow to the non-deleted children.
.s_P-Dd + .dw-p-as
  min-height: 42px;

.dw-p:not(.dw-p-flat) > .dw-rrs // reply receivers
  font-style: italic;
  color: hsl(0, 0%, 41%);

.dw-rrs
  padding: 0 0 5px 1px;

.DW .dw-rr // reply receiver
  padding: 7px 0 2px 5px;
  margin-top: -7px;  // cancels 7px padding, otherwise breaks vertical alignment w avatar
  display: inline-block;
  font-weight: bold;
  color: hsl(0, 0%, 26%);
  &:hover
    background: hsl($uiHue, 100%, 96%);
    outline: hsl($uiHue, 100%, 87%) 2px solid;
    text-decoration: none;

.s_RRs_RR_Aw
  color: hsl(0, 0%, 52%); // or too dark
  margin: 0 2px;

// Make it easier to touch.
html:not(.mouse) .dw-rr
  padding: 15px 0 16px 6px;
  margin-top: -6px;

// ... but don't push the .dw-p-bd text away:
.dw-p-flat .dw-rr
  padding-bottom: 0;

.esWrong
  clearfix();
  margin: 0 0 7px;
  max-width: 270px;
  position: relative;
  top: -7px;
  z-index: 1;

.esWrong_Txt
  float: left;
  display: inline-block;
  color: hsl($heartAndErrorHue, 60%, 52%);
  font-weight: bold;
  font-style: italic;
  font-size: $postFontSize;
  letter-spacing: 0.2px;
  word-spacing: 0.5px;
  &:before // the wrong/disagree icon
    color: hsl($heartAndErrorHue, 79%, 72%);
    font-size: 24px;
    margin: 0 4px 0 1px;

.esPage-Compact
  .dw-id0 > .esWrong
    margin: 4px 0 11px 0; // margin-left was 58px — why? perhaps 2d layout?
    left: 0;
    top: 0;

  .dw-2dcol > .esWrong
    margin: 0 0 15px;
    top: -2px;


// [refactor] remove:
// dw-fullname
// dw-username
// dw-lg-t-spl


.esP_By
  margin-right: 12px;
.dw-p-hd .dw-ago
  margin-right: 7px;
.dw-p-hd:has(.icon-edit) .dw-ago  // ... but if there's an edit pencil icon just after,
  margin-right: 3px; // ... then, less magin (so the icon won't be far away)
.dw-p-hd .n_EdAt
  white-space: nowrap;
.esP_viewHist
  margin-right: 12px;

.esP_By_F,
.esP_By_U
  font-size: $postFontSize;

.esP_By_F
  font-weight: bold;
  color: hsl(0, 0%, 15%);


.c_P_By_AnonYou
  color: #333;
  font-weight: bold;

.c_P_By_AnonYou::before
  content: ' (';
  margin: 0 2px 0 1px;

.c_P_By_AnonYou::after
  content: ')';
  margin-left: 1px;


.esP_By_F-G
  font-weight: normal;
  color: hsl(0, 0%, 11%);
  // Append a "?" to show that the user might be anyone, e.g. email not verified.
  // But ... (435465490)
  /*
  &::after
    content: ' ?';
    */

// ... (435465490) But not for the Unknown user — currently, that'd be oneself,
// when composing a new post without having logged in [305KGWGH2].
.s_P_By-Unk .esP_By_F-G
  font-weight: bold;
  color: hsl(0, 0%, 8%);
  /*
  &::after
    content: none;
    */

.esP_By_U
  font-weight: normal;
  color: hsl(0, 0%, 11%);
  &:not(:first-child)
    margin-left: 6px;


// Badges.
// User title badges.
.dw-p-hd .n_TagL-Pat li
  &:first-child
    .c_TagL_Tag
      margin-left: -5px;
  &:last-child
    .c_TagL_Tag
      margin-right: 11px;

.esP_By_U_at
  padding-right: 1px;
  margin-left: -1px;

.dw-p-hd
  .dw-ago,
  .dw-rrs,
  .esP_viewHist
    color: hsl(0, 0%, 27%) !important;

.esP_viewHist
  white-space: nowrap;

.esP_By:not(.s_P_By-Unk),  // not clickable, if is the Unknown user
.esP_viewHist,
.dw-a-clps:hover
  cursor: pointer;
  &:hover
    text-decoration: none;
    color: black;
    background: hsl($uiHue, 100%, 97%);
    outline: 2px solid hsl($uiHue, 100%, 87%)

.esP_viewHist
  &:before
    opacity: 0.7;

.dw-p-by.dw-suspended
  text-decoration: line-through;

.dw-lg-t-spl
  font-weight: normal;
  font-size: 90%
  padding-left: 2px
  padding-right: 2px

// Toggle collapsed
// [refactor] rename dw-a-clps to esP_Z (Z = fold/collapse)
.dw-a-clps.icon-up-open,
.dw-a-clps.icon-down-open,
.dw-a-clps.icon-left-open
.dw-a-clps.icon-right-open
  padding: 0 5px;
  font-size: 11px;
  color: hsl($uiHue, 0%, 68%);
  cursor: pointer;
  // COULD start using Stylus + Nib?
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  // Only show if the thread is tall/wide enough [4KY0S2]  — although people just get confused
  // when they collapse a post, and it has no particular effect (because it's so small already).
  display: none;

.dw-a-clps.esP_Z-Show
  display: inline-block;
  position: relative;
  top: -1px;
  margin-right: 10px;

.dw-a-clps.icon-left-open,
.dw-a-clps.icon-right-open
  padding-top: 1px;

.dw-2dcol.dw-zd > .dw-p .dw-a-clps
  float: none;
  padding-top: 2px;
  display: inline-block;

.dw-p.dw-wiki > .dw-a-clps
  position: absolute;
  right: 0;
  top: 0;

.dw-p.dw-wiki:hover > .dw-a-clps
  z-index: 1;
  opacity: 0.8;


// Permalinks
.dw-p-link
  float: right
  font-family: monospace
  // Don't add top/bottom padding, that causes text below to wrap too early.
  // Instead, set `top: 1px`.
  padding: 0 3px 0 5px
  position: relative
  top: 1px

// For the *article* itself, make author and post date info less conspicuous,
// or it steals attention from the page title. (But don't do this for any root
// post, only for the article.)
.DW .dw-ar-p-hd
  border: none
  background-color: transparent
  // Dim username, date and assignees.
  // (But not the post tags — the text therein is already gray.)
  .n_ByAt
    opacity: 0.8;
  // "By" is an uninteresting word.
  .n_By,
  .n_Asgd2_Ttl
    color: hsl(0 0% 31%);
  font-size: $postFontSize;
  margin: 6px 0 0;

// Add ',' before "Assigned to ...".
.dw-p-hd:has(.n_Asgd2):not(:has(.esP_viewHist)) .esP_H_At.dw-ago,
.dw-p-hd:has(.n_Asgd2)                    .esP_viewHist  .dw-ago-ltr
  &::after
    content: ', ';

.dw-p-hd:has(.n_Asgd2) .esP_viewHist
  margin-right: 0.8ex;  // don't push "assigned to ..." too far away

.n_Asgd2_Ttl
  // Some space between "Assigned to" and the username.
  margin-right: 1.1ex;
  // n_1stCap (text-transform uppercase) needs a block or inline-block elem.
  display: inline-block;

.dw-ar-p-hd:hover
  opacity: 1

.DW .dw-ar-p-hd .dw-p-by
  color: hsl(0, 0%, 10%);

// Un-indent any root post, by hiding the collapse button.
// (Why would one want to hide the root post?)
.dw-depth-0 > .dw-z
  display: none

.DW.DW .dw-depth-0 > .dw-p
  margin-left: 0
  //float: left; // or the header will be as wide as the root thread
  //                fix the header instead? I need to fix it anayway

:not(.dw-hz) > .dw-p > .dw-p-bd > .dw-p-bd-blk
  // Cancel .dw-p-bd 3px padding-left:, because the .dw-p-bd-blk is
  // 100% wide though, and without padding-right, text might be cropped.
  padding-right: 3px

// Cancel .dw-p-bd-blk max width for code pages.
[data-page_role='Code'] .dw-hz > .dw-p > .dw-p-bd > .dw-p-bd-blk
  max-width: none

// Cancel Twitter Bootsrap wrapping of <pre>
.dw-hz > .dw-p > .dw-p-bd > .dw-p-bd-blk > pre
  white-space: pre
  word-wrap: normal

// Don't place the body too close to the title. But cannot add margin to the
// title — that'd push away the .dw-p-hd away. So add to the -bd instead.
// <h2> should have a fairly large margin-top (because it's a h2), so skip it.
// — The reason all this is needed is that the elems
// float:left, which makes margins add to each other, instead of overlapping
// each other. I should rewrite, and try to avoid float:left? [8DbF3]
// (skip old IE)
// [8K3U5]
.dw-ar-t > .dw-p > .dw-p-bd > .dw-p-bd-blk > :first-child:not(h2)
  margin-top: 26px  // (6MKA0EB)

// Add some whitespace between images and text.
.dw-p-bd-blk > img
  margin: 2em 0;

.dw-p-bd-blk
  margin: 0
  float: left
  clear: left
  width: 100%

.s_P-Hdn .dw-p-bd-blk
  padding: 5px 14px !important;
  margin: 4px 0 33px; // whitespace needed because no post-actions shown below
  background: hsl(0, 0%, 95.3%);
  float: left;
  display: block;
  width: auto;
  color: hsl(0, 0%, 26%);
  cursor: pointer;
  &.esOrigPost
    margin-top: 15px;
    padding: 7px 17px !important;
  &:hover
    color: hsl($uiHue, 100%, 20%);
    background: hsl($uiHue, 70%, 96%);
    outline: 1px solid hsl($uiHue, 100%, 91%);
    text-decoration: none;


// No margin-top for any title at the top in a comment.
:not(.dw-ar-p-bd) > .dw-p-bd-blk:first-child
  > h1:not(.dw-p-ttl),
  > h2, > h3, > h4, > h5, > h6
    &:first-child
      margin-top: 0;
      padding-top: 0;


// Narrow screens
//===========================

.esPage-Compact
  .dw-depth-1
    .dw-p
      margin-left: 0 !important;
      background: none;

    > .dw-p > .dw-p-hd
      margin-left: 44px;
      top: 10px;

    > .dw-p > .dw-p-bd
      margin-top: 30px !important;
      padding-top: 0;

    > .esAvtr
      width: 36px;  // sync with (2G5KW8)
      height: 36px;
      img
        width: 36px;
        height: 36px;

    > .esAvtr-ltr
      font-size: 22px;
      line-height: 36px;

  .dw-single-and-multireplies
    margin: 0 !important;


// Solution/answer
//===========================

.esP-solution
  margin-top: -4px;
  padding-top: 4px;

.esP-solution,
.esP-solution .dw-p-hd,
.esP-solution .dw-p-bd
  background-color: hsl($solvedHue, 68%, 97%);
  color: black;

.esH_solution
  left: -1px;
  font-size: 27px;
  color: hsl(120, 50%, 50%);
  line-height: 0;
  position: relative;
  top: -6px;
  display: inline-block;
  float: left;
  padding: 0;
  &.icon-ok-circled:before
    margin-left: 0;

.esH_solution + .esAvtr
  // The (v) solved icon can be harder to notice, if too close to the avatar.
  margin-left: 2px;

.dw-solved-by
  float: left;
  margin: 15px 10px 19px 0;
  font-weight: bold;
  z-index: 1;
  position: relative;
  color: hsl($solvedHue, 100%, 30%) !important;
  font-size: 115%;
  &.icon-ok-circled:before
    font-size: 125%;
    margin: 0 6px 0 0;
    color: hsl($solvedHue, 100%, 36%) !important;


// Chat messages
//===========================

.esC_M
  .esP_By_U
    text-shadow: none;
    font-weight: bold !important;
    letter-spacing: 0;
    color: black;

  .dw-rrs
    font-size: 12px;


// Post info
//===========================

.dw-p-pending-mod
  margin-bottom: 8px;
  padding: 5px 0 5px 8px;
  font-style: italic;
  font-weight: bold;
  background: hsl($pendingModHue, 100%, 96%);
  color: black;

.dw-p-hd .dw-p-at
  // javascript shows e.g. '7 days ago' instead of the .dw-p-at ISO dates.
  // Hiding the dates with jQuery.hide() at page loat time takes long,
  // so better hide here. COULD use another stylesheet if javascript disabled.
  display: none

.dw-p-hd .dw-p-by-me
  font-weight: bold
  color: #151515

.dw-p-r-all
  display: none // shown on .dw-p-hd click

.dw-rs,
.dw-rs li
  display: inline

.dw-rs li
  margin-left: 0.5ex


.dw-p-hd
  abbr
    border-color: #999

.dw-p-hd
  .dw-p-pin
    float: right
    font-size: 15px
    cursor: move
    opacity: 0.76


// Marks
//===========================

.dw-p-mark-click
  padding: 7px 0px 7px 5px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -ms-user-select: none;
  user-select: none;

  &:hover
    outline: 2px solid hsl($uiHue, 100%, 77%);
    background: hsl($uiHue, 100%, 97%);

html.touch .dw-p-mark-click
  padding: 9px 5px 9px 5px;

  &:hover
    outline: none;
    background: none;

.dw-p-mark
  width: 10px;
  height: 10px;
  display: inline-block;
  position: relative;
  top: 1px;
  margin: 0 8px 0 0;
  background: transparent;
  color: hsl(0, 0%, 72%);
  font-size: $postFontSize;
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -ms-user-select: none;
  user-select: none;

// rename to  s_P_H_Bm-Unr?  Bookmark-Unread
.dw-p-mark-read .dw-p-mark
  color: hsl(0, 0%, 50%);

// rename to  s_P_H_Bm-Rd?  Bookmark-Read
.dw-p-mark-blue-star .dw-p-mark
  color: hsl($uiHue, 100%, 50%);

// rename to  s_P_H_Bm-Act?  Bookmark-(take-some)-Action
.dw-p-mark-yellow-star .dw-p-mark
  padding: 0 2px 0 1px;
  font-size: 11px;
  text-shadow: -1px -1px 1px red, 1px -1px 1px red, -1px 1px 1px red, 1px 1px 1px red;
  color: yellow;

// These dots currently make people confused — one thought they're an online indicator.
// Also, they don't work with RTL (see position: absolute, below), so yet another
// reason to hide them for now. — But might as well keep them active otherwise,
// so I'll keep the code up-to-date (fix compilation errors etc).
.s_P_H_Unr
  display: none;  // see comment above
  font-size: 8px;
  position: absolute;  // won't work with RTL
  color: hsl(207, 100%, 71%);
  transition: opacity 1s;
// Percent read –> fade away the unread mark. [8LKW204R]
.s_P_H_Unr-10 { opacity: 0.8; }
.s_P_H_Unr-30 { opacity: 0.6; }
.s_P_H_Unr-50 { opacity: 0.4; }
.s_P_H_Unr-70 { opacity: 0.2; }
.s_P_H_Unr-90 { opacity: 0.0; }



// Highlighted posts
//===========================

.DW .s_Fx-Flash
  // Drafts
  &.s_T_YourPrvw
    background: hsl($uiHue, 100%, 73%);
  &.s_P-Prvw
    background: hsl($uiHue, 100%, 89%)
    pre
      color: black;

  // Posts
  &.dw-p-hd,
  &.dw-p-bd
    background-color: hsl($uiHue, 100%, 83%);
    // Place -bd background above action buttons.
    z-index: 1;

.s_Fx-Flash-End
  // (Color reset higher up in this file, search for .s_Fx-Flash-End)
  -webkit-transition: background-color 4s;
  -moz-transition: background-color 4s;
  -o-transition: background-color 4s;
  -ms-transition: background-color 4s;
  transition: background-color 4s;  // dupl constant, also in js [2DKQ7AM]

.dw-highlighted-multireply-hover   // RENAME to s_Fx-Outl
  &.dw-p,
  &.esC_M
    outline: hsl($uiHue, 100%, 77%) solid 5px;



// Meta posts
//===========================

$metaPostMarignBottom = 35px;

.DW .s_w-MP
  margin-bottom: $metaPostMarignBottom;
  // Place closer to the parent post, otherwise so much whitespace above.
  // There's no Reply button anyway so no wrong-Reply-button-to-click.
  margin-top: -20px;
  /* Too many lines, looks cluttered:
  border: 1px solid hsl(0, 0%, 90%);
  border-left: none;
  border-right: none; */
// If is directly below the append-last separator though, don't remove so much whitespace.
.s_PgSct + .s_w-MP
  margin-top: -5px;

// If two meta posts are next to each other, remove whitespace in between.
.DW .dw-res .s_w-MP + .s_w-MP
  margin-top: -33px;  //- $metaPostMarignBottom;
  padding-top: 0;
  border-top: none;

.s_MP
  border-left: none;
  border-right: none;
  color: hsl(0, 0%, 41%);
  padding: 11px 0 10px;
  font-style: italic;

  .esAvtr
    position: relative;
    top: -4px;

  .esP_By // s_MP_UN
    color: hsl(0, 0%, 29%);
    margin-right: 2px;

  // Align with normal posts... also if (7UKBQP2)
  //margin-left: $avatarSpace;  — no, looks as if the meta message is a reply to any OP reply above.
  margin-left: 13px;  // this looks better & makes it clear the meta message isn't a repy to sth.

.esPage-Compact
  .s_MP
    // The big OP-reply avatar width is 36px (2G5KW8), and the MP .esAvtr-tny width is 28px [7UKWQ1],
    // so to center-align the meta-message tiny avatar with [the OP reply big avatar], add this margin:
    margin-left: 4px;   // ... narrow screens (7UKBQP2)


// vim: fdm=marker et ts=2 sw=2 tw=0 fo=r list
