/* >>>>>>>>>> MODULE: Tumblr (start) >>>>>>>>>> */

/* ==========================================================
   MODULE: TUMBLR   (classes: tb, tb-feed)
   Tumblr posts, reblog chains, asks, quote and chat posts, and the feed background (tb, tb-feed).
   Needs the CORE block.
   ========================================================== */

#workskin .tb-feed.wide {
  width: auto;
  max-width: none;
}

#workskin .tb {
  background: #ffffff;
  color: #000000;
  border: 1px solid #e3e3e3;
  border-radius: 14px;
  overflow: hidden;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.5;
}

/* Header row of a post or of one reblog: picture, name + small grey line, optional Follow, dots.
   Use <div class="tb-header"> for the post, <div class="tb-blog"> inside each reblog. */
#workskin .tb .tb-header,
#workskin .tb .tb-blog {
  display: block;
  overflow: hidden;
  padding: 0.8em 0.9em 0.3em 0.9em;
  font-weight: normal;
}

/* thin line under a post's header (the reblog headers sit inside the body and don't get one) */
#workskin .tb .tb-header { padding-bottom: 0.8em; border-bottom: 1px solid #eeeeee; }

/* a reblog header is a paragraph inside the post body, so undo the body's paragraph spacing */
#workskin .tb .tb-body .tb-blog { margin: 0; padding: 0.8em 0.9em 0.3em 0.9em; }

/* AO3 turns line breaks in your HTML into <br /> tags: keep them out of the header rows and the counts row */
#workskin .tb .tb-header br,
#workskin .tb .tb-blog br,
#workskin .tb .tb-footer br { display: none; }

/* ...and the paragraph AO3 wraps around a header row's pieces */
#workskin .tb .tb-header > p,
#workskin .tb .tb-body .tb-blog > p,
#workskin .tb .tb-footer > p { margin: 0; padding: 0; }

#workskin .tb .tb-name { display: block; min-height: 38px; margin-left: 48px; }

#workskin .tb .tb-name > b { display: block; font-weight: bold; line-height: 1.3; }

/* a name with no line under it sits level with the middle of the picture */
#workskin .tb .tb-name > b:only-child { line-height: 38px; }

#workskin .tb .tb-subline { display: block; font-size: 0.85em; color: #6c7a8b; }

#workskin .tb .tb-subline b { color: #555555; }

/* round profile picture (initials), colour1-colour10 for colours; add "rb" for the green reblog badge */
/* initials by default; colour1-colour10 are the colours (set in the CORE), or put a picture
   or a profile inside it with a pfp span */
#workskin .tb .tb-pfp {
  display: flex;
  align-items: center;
  justify-content: center;
  float: left;
  position: relative;
  width: 38px;
  height: 38px;
  line-height: 1;
  text-align: center;
  border-radius: 50%;
  background-color: #8a8a8a;
  font-family: Arial, Helvetica, sans-serif;
  background-size: cover;
  background-position: center;
  color: #ffffff;
  font-size: 0.85em;
  font-weight: bold;
}

#workskin .tb .tb-pfp.rb::after {
  content: '\21C4';
  position: absolute;
  right: -6px;
  bottom: -5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  line-height: 1;
  text-align: center;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #0ccc3c;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9px;
  font-weight: bold;
}

/* checkmarks beside a name, in twos, fours or sixes: <span class="tb-check">&#10003;</span><span class="tb-check">&#10003;</span>
   They always run in the same order, and the colours are added for you: blue, green, then lime, yellow, then amber, orange.
   On Tumblr these are bought for fun, so they don't mean a blog is verified. */
#workskin .tb .tb-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  height: 1.15em;
  line-height: 1;
  margin-left: 0.25em;
  border-radius: 50%;
  background: #42aaf5;
  color: #111111;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.75em;
  font-weight: bold;
  vertical-align: 0.1em;
}

#workskin .tb .tb-check + .tb-check { margin-left: 0.12em; }

#workskin .tb .tb-check + .tb-check { background: #4ccd4a; }

#workskin .tb .tb-check + .tb-check + .tb-check { background: #a6d03f; }

#workskin .tb .tb-check + .tb-check + .tb-check + .tb-check { background: #e3cf3c; }

#workskin .tb .tb-check + .tb-check + .tb-check + .tb-check + .tb-check { background: #efb238; }

#workskin .tb .tb-check + .tb-check + .tb-check + .tb-check + .tb-check + .tb-check { background: #f08b37; }

#workskin .tb .tb-follow { display: block; float: right; margin: 2px 0 0 0.5em; }

#workskin .tb .tb-follow span {
  display: inline-block;
  padding: 0 1.1em;
  line-height: 34px;
  border-radius: 2em;
  background: #ececec;
  font-weight: bold;
  font-size: 0.9em;
}

#workskin .tb .tb-menu {
  display: block;
  float: right;
  height: 38px;
  line-height: 38px;
  margin: 0 0 0 0.6em;
  color: #777777;
  letter-spacing: 0.05em;
  font-size: 0.8em;
}

#workskin .tb .tb-body { display: block; padding: 0.3em 0 0.8em 0; }

#workskin .tb .tb-body p { margin: 0.5em 0; padding: 0 0.9em; }

#workskin .tb :not(.pfp) > img {
  display: block;
  max-width: 92%;
  height: auto;
  margin: 0.6em auto;
  border-radius: 4px;
}

/* each reblog in the chain: one after another, with a thin line between, edge to edge */
#workskin .tb .tb-reblog {
  display: block;
  margin: 0;
  padding: 0 0 0.3em 0;
  border-top: 1px solid #eeeeee;
}

#workskin .tb .tb-body > .tb-reblog:first-child { border-top: 0; }

/* the ask and answer boxes: <div class="tb-ask"> or <div class="tb-ask tb-answer"> */
#workskin .tb .tb-ask {
  display: block;
  position: relative;
  background: #f5f5f5;
  border-radius: 8px;
  padding: 0.8em 0.9em 0.4em 0.9em;
  margin: 0.6em 36px 0.6em 0.9em;
}

/* little pointer on the right edge of an ask box, towards the square picture */
#workskin .tb .tb-ask::after {
  content: '';
  position: absolute;
  top: 1.2em;
  right: -6px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 7px;
  border-color: transparent transparent transparent #f5f5f5;
}

#workskin .tb .tb-asker {
  display: block;
  margin: 0 0 0.6em 0;
  padding-right: 2.8em;
  color: #6b6b6b;
}

#workskin .tb .tb-asker b { font-weight: bold; color: #6b6b6b; }

#workskin .tb .tb-ask p { margin: 0.5em 0; padding: 0; }

/* small square picture at the top right of an ask box */
#workskin .tb .tb-ask-pfp {
  display: block;
  position: absolute;
  top: 0.8em;
  right: -36px;
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  border-radius: 5px;
  background-color: #8a8a8a;
  font-family: Arial, Helvetica, sans-serif;
  background-size: cover;
  background-position: center;
  color: #ffffff;
  font-size: 0.75em;
  font-weight: bold;
}

#workskin .tb .tb-tags {
  display: block;
  margin: 0;
  padding: 0.2em 0.9em 0.6em 0.9em;
  color: #777777;
  font-size: 0.88em;
}

/* the bottom row: the note count on the left, the buttons on the right
   <p class="tb-footer"><span class="tb-notes"><b>149</b> notes</span> <span class="tb-icon save"></span> ... </p> */
#workskin .tb .tb-footer {
  display: flex;
  align-items: center;
  padding: 0.5em 0.9em 0.8em 0.9em;
  color: #555555;
}

/* the buttons: save, share, reply, reblog and like, in that order */
#workskin .tb .tb-icon {
  display: inline-block;
  margin-left: 1em;
  font-size: 1.15em;
  line-height: 1;
}

/* the save button's bookmark, drawn with CSS: <span class="tb-icon save"></span> */
#workskin .tb .tb-icon.save {
  position: relative;
  box-sizing: border-box;
  width: 13px;
  height: 16px;
  border: 2px solid currentColor;
  border-bottom: 0;
}

#workskin .tb .tb-icon.save::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  box-sizing: border-box;
  width: 7px;
  height: 7px;
  margin: 0 0 -3px -3px;
  border-top: 2px solid currentColor;
  border-left: 2px solid currentColor;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* quote post: <p class="tb-quote">text</p><p class="tb-source">&mdash; someone</p> */
#workskin .tb .tb-quote { font-family: Georgia, serif; font-size: 1.9em; line-height: 1.25; }

#workskin .tb .tb-quote::before { content: "\201C"; }

#workskin .tb .tb-quote::after { content: "\201D"; }

#workskin .tb .tb-source { font-size: 0.9em; }

/* chat post: <div class="tb-chat"><p><b>Name:</b> line</p>...</div> */
#workskin .tb .tb-chat {
  display: block;
  margin: 0.6em 0.9em;
  font-family: Courier, monospace;
  line-height: 1.4;
}

#workskin .tb .tb-chat p { margin: 0; padding: 0.35em 0; }

#workskin .tb .tb-chat b { font-weight: bold; }

/* the note count, in a rounded box at the left of the bottom row */
#workskin .tb .tb-notes {
  display: inline-block;
  margin: 0 auto 0 0;
  padding: 0.35em 0.9em;
  border: 1px solid #e3e3e3;
  border-radius: 2em;
  color: #777777;
  font-size: 0.85em;
}

#workskin .tb .tb-notes b { color: #222222; }

/* THE FEED BEHIND THE CARDS (optional): put one or more .tb posts inside <div class="tb-feed">
   navy by default (Tumblr's light mode); add "black" for the dark-mode look */
#workskin .tb-feed {
  width: 380px;
  max-width: 100%;
  margin: 1.2em auto;
  padding: 0.5em 0;
  background: #001935;
  box-sizing: border-box;
  border-radius: 14px;
}

#workskin .tb-feed.black { background: #000000; }

#workskin .tb-feed .mob {
  width: auto;
  max-width: none;
  margin: 0.5em 0;
  border-color: transparent;
  border-radius: 14px;
}

/* ---------- Tumblr: Links ---------- */

#workskin .tb .fake-link, #workskin .tb a:not(.tl) { color: #0070b8; }

/* ---------- Tumblr: Scrolling ---------- */

#workskin .tb {
  max-height: 700px;
  overflow-y: auto;
  overflow-x: hidden;
}

#workskin .tb::-webkit-scrollbar {
  width: 6px;
}

#workskin .tb::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.5);
  border-radius: 6px;
}

/* ---------- Tumblr: Dark theme (theme-dark) ---------- */

#workskin .tb.theme-dark .fake-link, #workskin .tb.theme-dark a:not(.tl) { color: #00b8ff; }

#workskin .tb.theme-dark { background: #1f1f1f; color: #e8e8e8; border-color: #1f1f1f; }

#workskin .tb.theme-dark .tb-subline,
#workskin .tb.theme-dark .tb-menu,
#workskin .tb.theme-dark .tb-tags,
#workskin .tb.theme-dark .tb-notes {
  color: #9a9a9a;
}

#workskin .tb.theme-dark .tb-subline b { color: #cfcfcf; }

#workskin .tb.theme-dark .tb-footer { color: #bdbdbd; }

#workskin .tb.theme-dark .tb-follow span { background: #2e2e2e; }

#workskin .tb.theme-dark .tb-pfp.rb::after { border-color: #1f1f1f; }

#workskin .tb.theme-dark .tb-reblog { border-top-color: #2c2c2c; }

#workskin .tb.theme-dark .tb-ask { background: #272727; }

#workskin .tb.theme-dark .tb-asker,
#workskin .tb.theme-dark .tb-asker b {
  color: #a8a8a8;
}

#workskin .tb.theme-dark .tb-notes { border-color: #3a3a3a; }

#workskin .tb.theme-dark .tb-notes b { color: #e8e8e8; }

#workskin .tb.theme-dark .tb-header { border-bottom-color: #2c2c2c; }

#workskin .tb.theme-dark .tb-ask::after { border-left-color: #272727; }

/* ---------- Tumblr: Auto theme (theme-auto): light, switching to dark when the reader's device is in dark mode ---------- */

@media (prefers-color-scheme: dark) {
  #workskin .tb.theme-auto .fake-link, #workskin .tb.theme-auto a:not(.tl) { color: #00b8ff; }

  #workskin .tb.theme-auto { background: #1f1f1f; color: #e8e8e8; border-color: #1f1f1f; }

  #workskin .tb.theme-auto .tb-subline,
    #workskin .tb.theme-auto .tb-menu,
    #workskin .tb.theme-auto .tb-tags,
    #workskin .tb.theme-auto .tb-notes {
      color: #9a9a9a;
    }

  #workskin .tb.theme-auto .tb-subline b { color: #cfcfcf; }

  #workskin .tb.theme-auto .tb-footer { color: #bdbdbd; }

  #workskin .tb.theme-auto .tb-follow span { background: #2e2e2e; }

  #workskin .tb.theme-auto .tb-pfp.rb::after { border-color: #1f1f1f; }

  #workskin .tb.theme-auto .tb-reblog { border-top-color: #2c2c2c; }

  #workskin .tb.theme-auto .tb-ask { background: #272727; }

  #workskin .tb.theme-auto .tb-asker,
    #workskin .tb.theme-auto .tb-asker b {
      color: #a8a8a8;
    }

  #workskin .tb.theme-auto .tb-notes { border-color: #3a3a3a; }

  #workskin .tb.theme-auto .tb-notes b { color: #e8e8e8; }

  #workskin .tb.theme-auto .tb-header { border-bottom-color: #2c2c2c; }

  #workskin .tb.theme-auto .tb-ask::after { border-left-color: #272727; }
}

/* <<<<<<<<<< MODULE: Tumblr (end) <<<<<<<<<< */