@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=VT323&display=swap');

/* =========================================================
   PA.ULIUS.LT
   PINE CONE v3
   Forest / Terminal / Moss / Bark / Signal
   =========================================================

   Design goals:
   - deep forest foundation
   - richer semantic color system
   - readable contrast
   - terminal character without excessive glow
   - compatible with newer Mastodon token-based UI
   - restrained surfaces, expressive accents
   ========================================================= */


/* =========================================================
   01. COLOR SYSTEM
   ========================================================= */

:root {

  /* -------------------------------------------------------
     FOREST FOUNDATION
     ------------------------------------------------------- */

  --pine-bg:                 #080b09;
  --pine-bg-deep:            #050706;
  --pine-bg-raised:          #0a0f0c;

  --pine-surface:            #0d120f;
  --pine-surface-2:          #111712;
  --pine-surface-3:          #151d17;
  --pine-surface-4:          #19231b;

  /* -------------------------------------------------------
     BORDERS / STRUCTURE
     ------------------------------------------------------- */

  --pine-border:             #202a23;
  --pine-border-light:       #2d3a30;
  --pine-border-strong:      #3b4c3e;
  --pine-border-active:      #536955;

  /* -------------------------------------------------------
     TEXT
     ------------------------------------------------------- */

  --pine-text:               #d8e0d8;
  --pine-text-soft:          #b6c1b7;
  --pine-text-dim:           #879388;
  --pine-text-faint:         #5d695f;
  --pine-white:              #edf3ed;

  /* -------------------------------------------------------
     PINE / MOSS
     Primary identity
     ------------------------------------------------------- */

  --pine-green:              #71895f;
  --pine-green-light:        #8fa878;
  --pine-green-bright:       #abc493;

  --pine-moss:               #82945a;
  --pine-moss-light:         #a5b878;

  /* -------------------------------------------------------
     FERN
     Secondary cool green
     ------------------------------------------------------- */

  --pine-fern:               #4f8971;
  --pine-fern-light:         #69a487;
  --pine-fern-bright:        #83b99c;

  /* -------------------------------------------------------
     BARK
     Warm forest neutral
     ------------------------------------------------------- */

  --pine-bark:               #765e50;
  --pine-bark-light:         #967563;
  --pine-bark-bright:        #b18b73;

  /* -------------------------------------------------------
     AMBER / CONE
     Warm signal color
     ------------------------------------------------------- */

  --pine-amber:              #b5965d;
  --pine-amber-light:        #d0b875;
  --pine-amber-bright:       #e0ca8a;

  /* -------------------------------------------------------
     SKY / COLD SIGNAL
     Used sparingly for information
     ------------------------------------------------------- */

  --pine-sky:                #668b91;
  --pine-sky-light:          #7eabb0;
  --pine-sky-bright:         #9ac5c5;

  /* -------------------------------------------------------
     BERRY
     Social / favorite / special accent
     ------------------------------------------------------- */

  --pine-berry:              #a36b78;
  --pine-berry-light:        #c18492;
  --pine-berry-bright:       #d99ca8;

  /* -------------------------------------------------------
     SEMANTIC
     ------------------------------------------------------- */

  --pine-success:            #71976b;
  --pine-success-light:      #8db686;

  --pine-warning:            #b5965d;
  --pine-warning-light:      #d0b875;

  --pine-danger:             #a86460;
  --pine-danger-light:       #c77c76;

  --pine-info:               #668b91;
  --pine-info-light:         #83aeb2;

  /* -------------------------------------------------------
     EFFECTS
     ------------------------------------------------------- */

  --pine-glow:
    rgba(113, 137, 95, 0.18);

  --pine-glow-soft:
    rgba(113, 137, 95, 0.075);

  --pine-glow-amber:
    rgba(181, 150, 93, 0.15);

  --pine-glow-berry:
    rgba(163, 107, 120, 0.14);

  --pine-glow-sky:
    rgba(102, 139, 145, 0.14);


  /* =======================================================
     MASTODON TOKEN BRIDGE
     ======================================================= */

  --color-bg-primary:        var(--pine-bg);
  --color-bg-secondary:      var(--pine-surface);
  --color-bg-tertiary:       var(--pine-surface-2);

  --color-text-primary:      var(--pine-text);
  --color-text-secondary:    var(--pine-text-soft);

  --color-border-primary:    var(--pine-border);

  --color-accent:            var(--pine-green);
  --color-accent-dark:       var(--pine-green);
  --color-link:              var(--pine-green-light);
  --color-hashtag:           var(--pine-moss-light);
  --color-mention:           var(--pine-fern-light);

  /* Newer token-style fallbacks */

  --color-accent-base:       var(--pine-green);
  --color-accent-primary:    var(--pine-green);
  --color-accent-secondary:  var(--pine-fern);

  --color-bg:                var(--pine-bg);
  --color-bg-90:             rgba(8, 11, 9, .90);
  --color-bg-75:             rgba(8, 11, 9, .75);

  --color-border:            var(--pine-border);

  --color-text:              var(--pine-text);
  --color-dim:               var(--pine-text-dim);

  --color-success:           var(--pine-success);
  --color-warning:           var(--pine-warning);
  --color-danger:             var(--pine-danger);
}


/* =========================================================
   02. GLOBAL
   ========================================================= */

html {
  background: var(--pine-bg) !important;
  color: var(--pine-text) !important;
  color-scheme: dark;
}

body {
  background:
    radial-gradient(
      circle at 50% -20%,
      rgba(113, 137, 95, 0.055),
      transparent 42%
    ),
    var(--pine-bg) !important;

  color: var(--pine-text) !important;

  font-family:
    'Share Tech Mono',
    monospace !important;
}


/* Prevent accidental horizontal overflow */

html,
body {
  overflow-x: hidden;
}


/* =========================================================
   03. MAIN SURFACES
   ========================================================= */

.column,
.column-header,
.column-header__wrapper,
.column-back-button,
.column-header__back-button,
.navigation-bar,
.tabs-bar__wrapper {
  background: var(--pine-bg) !important;
  color: var(--pine-text) !important;
}


/* =========================================================
   04. HEADERS
   ========================================================= */

.column-header,
.column-header__wrapper {
  background:
    linear-gradient(
      180deg,
      var(--pine-surface-2),
      var(--pine-surface)
    ) !important;

  color: var(--pine-text) !important;

  border-color:
    var(--pine-border) !important;

  box-shadow: none !important;
}

.column-header {
  border-bottom:
    1px solid var(--pine-border) !important;

  position: relative;
}


/* terminal divider */

.column-header::after {
  content: "";

  position: absolute;

  left: 12%;
  right: 12%;
  bottom: -1px;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--pine-green),
      var(--pine-fern),
      transparent
    );

  opacity: .45;
}


/* =========================================================
   05. PANELS / CARDS
   ========================================================= */

.drawer__inner,
.box-widget,
.public-account-header,
.directory__list,
.card,
.hero-widget,
.contact-widget,
.endorsements-widget,
.static-content,
.rich-formatting,
.getting-started {
  background:
    var(--pine-surface) !important;

  color:
    var(--pine-text) !important;

  border-color:
    var(--pine-border) !important;

  box-shadow:
    0 1px 0 rgba(0,0,0,.25) !important;
}


/* =========================================================
   06. TIMELINE
   ========================================================= */

.status,
.notification-group,
.notification-ungrouped {
  background: transparent !important;
  color: var(--pine-text) !important;
  border-color: var(--pine-border) !important;
}

.status {
  transition:
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease;
}

.status:hover {
  background:
    linear-gradient(
      90deg,
      var(--pine-glow-soft),
      transparent 65%
    ) !important;

  border-color:
    var(--pine-border-light) !important;
}

.status.status--in-thread {
  border-left:
    2px solid var(--pine-fern) !important;
}


/* Threaded conversation gets a slightly warmer signal */

.status.status--in-thread:hover {
  border-left-color:
    var(--pine-green-light) !important;
}


/* =========================================================
   07. HEADINGS
   ========================================================= */

h1,
h2,
h3,
h4,
.column-header span,
.hero-widget__text h1,
.public-layout h1,
.public-layout h2,
.landing-page__information h1 {
  font-family:
    'VT323',
    monospace !important;

  font-weight:
    400 !important;

  letter-spacing:
    .035em;

  color:
    var(--pine-white) !important;
}


/* Only real header titles get terminal cursor */

.column-header__title span::after,
.column-header__button span::after {
  content: "▌";

  margin-left: .16em;

  color:
    var(--pine-green-light) !important;

  opacity: .6;
}


/* =========================================================
   08. TEXT
   ========================================================= */

.status__content,
.status__content p,
.display-name strong,
.display-name__account,
.account__display-name strong,
.account__header__content,
.reply-indicator__content,
.rich-formatting p,
.rich-formatting li {
  color:
    var(--pine-text) !important;
}

.status__relative-time,
time {
  color:
    var(--pine-text-faint) !important;
}


/* secondary metadata */

.account__header__fields dt,
.account__header__fields dt a,
.detailed-status__meta,
.detailed-status__meta a {
  color:
    var(--pine-text-dim) !important;
}


/* =========================================================
   09. LINKS
   ========================================================= */

a,
.status__content a,
.public-layout a,
a.status-link {
  color:
    var(--pine-green-light) !important;

  text-decoration:
    none;

  transition:
    color .15s ease,
    text-shadow .15s ease;
}

a:hover {
  color:
    var(--pine-green-bright) !important;

  text-shadow:
    0 0 8px
    rgba(143,168,120,.18) !important;
}


/* ordinary external links */

.status__content a:not(.mention):not(.hashtag):not(.status-link) {
  color:
    var(--pine-sky-light) !important;
}


/* mentions */

.status__content a.mention,
a.mention {
  color:
    var(--pine-fern-light) !important;
}

.status__content a.mention:hover,
a.mention:hover {
  color:
    var(--pine-fern-bright) !important;
}


/* hashtags */

.status__content a.hashtag,
a.hashtag {
  color:
    var(--pine-moss-light) !important;
}

.status__content a.hashtag:hover,
a.hashtag:hover {
  color:
    var(--pine-moss-light) !important;

  text-shadow:
    0 0 8px
    rgba(165,184,120,.2) !important;
}


/* =========================================================
   10. NAVIGATION
   ========================================================= */

.column-link {
  color:
    var(--pine-text-dim) !important;

  background:
    transparent !important;

  transition:
    color .15s ease,
    background .15s ease;
}

.column-link.active {
  color:
    var(--pine-white) !important;
}

.column-link:hover,
.column-link:focus {
  color:
    var(--pine-white) !important;

  background:
    var(--pine-glow-soft) !important;
}


/* active navigation marker */

.column-link.active::before {
  background:
    linear-gradient(
      180deg,
      var(--pine-green-light),
      var(--pine-fern)
    ) !important;

  width:
    3px !important;
}

.column-subheading {
  background:
    var(--pine-surface-2) !important;

  color:
    var(--pine-text-faint) !important;
}


/* =========================================================
   11. ICONS
   ========================================================= */

.icon-button {
  color:
    var(--pine-text-dim) !important;

  background:
    transparent !important;

  transition:
    color .15s ease,
    transform .15s ease,
    filter .15s ease;
}

.icon-button:hover {
  color:
    var(--pine-green-light) !important;

  filter:
    drop-shadow(0 0 4px var(--pine-glow));
}

.icon-button.active,
.active-sub-navigation__wrapper svg {
  color:
    var(--pine-green-light) !important;
}


/* Favorite */

.status__action-bar
.button.button--icon.button--with-counter[aria-label*="Favourite"] {
  color:
    var(--pine-berry) !important;
}


/* Boost */

.status__action-bar
.button.button--icon.button--with-counter[aria-label*="Boost"] {
  color:
    var(--pine-fern) !important;
}


/* =========================================================
   12. BUTTONS
   ========================================================= */

.button,
input[type="submit"] {
  background:
    var(--pine-surface-2) !important;

  color:
    var(--pine-text-soft) !important;

  border:
    1px solid var(--pine-border-light) !important;

  border-radius:
    4px !important;

  font-family:
    'Share Tech Mono',
    monospace !important;

  box-shadow:
    none !important;

  transition:
    background .15s ease,
    color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;
}

.button:hover,
input[type="submit"]:hover {
  background:
    var(--pine-surface-3) !important;

  color:
    var(--pine-white) !important;

  border-color:
    var(--pine-green) !important;

  box-shadow:
    0 0 10px var(--pine-glow-soft) !important;
}


/* Primary */

.compose-form__publish .button,
button.button--primary {
  background:
    linear-gradient(
      135deg,
      var(--pine-green),
      var(--pine-fern)
    ) !important;

  color:
    #071007 !important;

  border-color:
    var(--pine-green) !important;

  font-weight:
    600;
}

.compose-form__publish .button:hover,
button.button--primary:hover {
  background:
    linear-gradient(
      135deg,
      var(--pine-green-light),
      var(--pine-fern-light)
    ) !important;

  color:
    #050905 !important;

  border-color:
    var(--pine-green-light) !important;

  box-shadow:
    0 0 16px
    var(--pine-glow) !important;
}


/* Destructive */

.button--destructive {
  color:
    var(--pine-danger-light) !important;

  border-color:
    rgba(168,100,96,.35) !important;
}

.button--destructive:hover {
  background:
    rgba(168,100,96,.10) !important;

  border-color:
    var(--pine-danger) !important;
}


/* =========================================================
   13. INPUTS
   ========================================================= */

.search__input,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
.compose-form textarea,
.simple_form input,
.simple_form textarea,
.simple_form select {
  background:
    var(--pine-bg-deep) !important;

  color:
    var(--pine-text) !important;

  border:
    1px solid var(--pine-border) !important;

  caret-color:
    var(--pine-green-light) !important;

  border-radius:
    3px !important;
}

.search__input:focus,
.compose-form textarea:focus,
.simple_form input:focus,
.simple_form textarea:focus,
.simple_form select:focus {
  border-color:
    var(--pine-green) !important;

  box-shadow:
    0 0 0 1px var(--pine-glow) !important;

  outline:
    none !important;
}

.search__input::placeholder,
input::placeholder,
textarea::placeholder {
  color:
    var(--pine-text-faint) !important;
}

.search__icon svg {
  color:
    var(--pine-text-faint) !important;
}


/* =========================================================
   14. COMPOSER
   ========================================================= */

.compose-form,
.compose-form__scrollable,
.compose-panel,
.compose-form__highlightable {
  background:
    var(--pine-surface) !important;

  color:
    var(--pine-text) !important;
}

.compose-form__buttons-wrapper,
.compose-form__publish,
.compose-form__buttons {
  background:
    var(--pine-surface) !important;

  border-color:
    var(--pine-border) !important;
}

.compose-form__buttons .icon-button {
  background:
    transparent !important;

  color:
    var(--pine-text-dim) !important;
}

.compose-form__buttons .icon-button:hover {
  color:
    var(--pine-green-light) !important;
}

.character-counter {
  color:
    var(--pine-text-faint) !important;
}


/* =========================================================
   15. DROPDOWNS / MODALS
   ========================================================= */

.dropdown-menu,
.privacy-dropdown__dropdown,
.language-dropdown__dropdown,
.actions-modal,
.modal-root__modal,
.boost-modal,
.confirmation-modal,
.dialog-modal,
.safety-action-modal,
.compare-history-modal {
  background:
    var(--pine-surface) !important;

  color:
    var(--pine-text) !important;

  border:
    1px solid var(--pine-border-light) !important;

  box-shadow:
    0 14px 42px
    rgba(0,0,0,.42) !important;
}

.dropdown-menu__item,
.dropdown-menu__separator {
  color:
    var(--pine-text) !important;

  border-color:
    var(--pine-border) !important;
}

.dropdown-menu__item a,
.dropdown-menu__item button {
  color:
    var(--pine-text-soft) !important;

  background:
    transparent !important;
}

.dropdown-menu__item a:hover,
.dropdown-menu__item button:hover {
  background:
    var(--pine-glow-soft) !important;

  color:
    var(--pine-white) !important;
}


/* =========================================================
   16. PROFILE
   ========================================================= */

.account,
.account__wrapper,
.account__display-name {
  background:
    var(--pine-surface) !important;

  color:
    var(--pine-text) !important;
}

.account__avatar,
.avatar img {
  border-radius:
    5px !important;
}

.account__avatar img,
.account__header .account__avatar img {
  box-shadow:
    0 0 0 1px var(--pine-border-light),
    0 0 18px rgba(113,137,95,.08) !important;
}

.account__header__fields dt {
  color:
    var(--pine-text-faint) !important;

  background:
    var(--pine-surface-2) !important;
}

.account__header__fields dd {
  color:
    var(--pine-text) !important;
}


/* =========================================================
   17. PROFILE HEADER
   ========================================================= */

.account__header > div {
  background:
    linear-gradient(
      180deg,
      rgba(13,18,15,.72),
      rgba(13,18,15,.96)
    ) !important;
}


/* =========================================================
   18. BADGES
   ========================================================= */

.accounts-table__count,
.short-number,
.counter__label,
.account__header__extra__links strong,
.detailed-status .stat__value {
  color:
    var(--pine-text) !important;

  background:
    transparent !important;
}

.account-role,
.roles,
.relationship-tag {
  background:
    rgba(113,137,95,.08) !important;

  color:
    var(--pine-text-soft) !important;

  border:
    1px solid var(--pine-border-light) !important;
}


/* =========================================================
   19. CUSTOM ROLE BADGE
   ========================================================= */

._comp_badge__badge[data-account-role-id="3"] {
  background:
    linear-gradient(
      135deg,
      var(--pine-surface-3),
      #171d17
    ) !important;

  color:
    var(--pine-text) !important;

  border:
    1px solid var(--pine-border-strong) !important;

  box-shadow:
    inset 0 0 12px rgba(113,137,95,.04) !important;
}

._comp_badge__badge[data-account-role-id="3"]
._comp_badge__content {
  color:
    var(--pine-green-light) !important;
}

._comp_badge__badge[data-account-role-id="3"]
._comp_badge__domain {
  color:
    var(--pine-text-dim) !important;
}


/* =========================================================
   20. MEDIA
   ========================================================= */

.media-gallery__item-thumbnail img:not([alt]),
.media-gallery__item-thumbnail img[alt=""] {
  border:
    2px solid var(--pine-amber) !important;
}

.media-gallery__item {
  border-radius:
    4px !important;

  overflow:
    hidden;

  border:
    1px solid var(--pine-border) !important;
}


/* =========================================================
   21. LOADING
   ========================================================= */

.image-loader,
.image-loader__preview-canvas,
.account__avatar-overlay,
.skeleton,
[class*="skeleton"] {
  background:
    linear-gradient(
      90deg,
      var(--pine-surface-2),
      var(--pine-surface-3),
      var(--pine-surface-2)
    ) !important;
}


/* =========================================================
   22. TABLES
   ========================================================= */

table,
.table,
.simple_form table {
  background:
    var(--pine-surface) !important;

  color:
    var(--pine-text) !important;
}

.table th,
.table td,
table th,
table td {
  color:
    var(--pine-text) !important;

  border-color:
    var(--pine-border) !important;
}

.batch-table__row {
  background:
    var(--pine-surface) !important;
}

.batch-table__row--muted {
  background:
    rgba(113,137,95,.07) !important;
}

.filters,
.filter-subset,
.report-card,
.report-card__summary {
  background:
    var(--pine-surface) !important;

  color:
    var(--pine-text) !important;

  border-color:
    var(--pine-border) !important;
}


/* =========================================================
   23. LOGIN / FORMS
   ========================================================= */

.simple_form,
.form-container,
.auth-layout .grid {
  background:
    var(--pine-surface) !important;

  color:
    var(--pine-text) !important;
}

.simple_form label,
.simple_form .label,
label {
  color:
    var(--pine-text) !important;
}

.simple_form .hint {
  color:
    var(--pine-text-faint) !important;
}

.simple_form .input.field_with_errors input {
  border-color:
    var(--pine-danger) !important;
}


/* =========================================================
   24. FLASH / STATUS MESSAGES
   ========================================================= */

.flash-message,
.flash-message.alert,
.flash-message.notice {
  background:
    var(--pine-surface) !important;

  color:
    var(--pine-text) !important;

  border:
    1px solid var(--pine-border) !important;
}

.flash-message.notice {
  border-color:
    var(--pine-fern) !important;
}

.flash-message.alert {
  border-color:
    var(--pine-danger) !important;
}

.flash-message.warning {
  border-color:
    var(--pine-amber) !important;
}


/* =========================================================
   25. POLLS
   ========================================================= */

.poll__chart {
  background:
    var(--pine-surface-3) !important;

  border-color:
    var(--pine-border) !important;
}

.poll__chart.leading {
  background:
    rgba(113,137,95,.14) !important;

  border-color:
    var(--pine-green) !important;
}

.poll__number {
  color:
    var(--pine-text-dim) !important;
}


/* =========================================================
   26. NOTIFICATIONS
   ========================================================= */

.notification-group--favourite {
  border-left:
    2px solid var(--pine-berry) !important;
}

.notification-group--reblog {
  border-left:
    2px solid var(--pine-fern) !important;
}

.notification-group--mention {
  border-left:
    2px solid var(--pine-green) !important;
}

.notification-group--follow {
  border-left:
    2px solid var(--pine-sky) !important;
}


/* =========================================================
   27. BOOKMARKS / SAVED
   ========================================================= */

.status__action-bar
[aria-label*="Bookmark"],
.status__action-bar
[title*="Bookmark"] {
  color:
    var(--pine-amber) !important;
}


/* =========================================================
   28. REMOVE BANNERS
   ========================================================= */

.navigation-panel__sign-in-banner,
.server-banner__introduction {
  display:
    none !important;
}


/* =========================================================
   29. REMOVE REGISTRATION
   ========================================================= */

a[href="/auth/sign_up"],
a[href*="/auth/sign_up"],
a[href*="/auth/registrations"],
a[href*="sign_up"] {
  display:
    none !important;
}


/* =========================================================
   30. WORDMARK
   ========================================================= */

.logo--wordmark {
  display:
    none !important;
}


/* =========================================================
   31. MOBILE NAV
   ========================================================= */

.tabs-bar,
.tabs-bar__wrapper {
  background:
    var(--pine-surface) !important;

  color:
    var(--pine-text) !important;

  border-color:
    var(--pine-border) !important;
}

.tabs-bar__link {
  color:
    var(--pine-text-dim) !important;
}

.tabs-bar__link.active {
  color:
    var(--pine-green-light) !important;
}

.tabs-bar__link:hover,
.tabs-bar__link:focus {
  color:
    var(--pine-white) !important;
}


/* =========================================================
   32. MEDIA SAFETY
   ========================================================= */

/*
   Avoid global img/video width overrides.
   Mastodon already manages media sizing.
*/

.media-gallery img,
.video-player video,
.media-gallery__item img {
  max-width:
    100%;
}


/* =========================================================
   33. SELECTION
   ========================================================= */

::selection {
  background:
    rgba(113,137,95,.30) !important;

  color:
    var(--pine-white) !important;
}


/* =========================================================
   34. SCROLLBAR
   ========================================================= */

* {
  scrollbar-width:
    thin;

  scrollbar-color:
    var(--pine-border-light)
    transparent;
}

*::-webkit-scrollbar {
  width:
    7px;

  height:
    7px;
}

*::-webkit-scrollbar-track {
  background:
    transparent;
}

*::-webkit-scrollbar-thumb {
  background:
    var(--pine-border-light);

  border-radius:
    4px;

  border:
    1px solid var(--pine-bg);
}

*::-webkit-scrollbar-thumb:hover {
  background:
    var(--pine-green);
}


/* =========================================================
   35. FOCUS
   ========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline:
    2px solid var(--pine-green-light) !important;

  outline-offset:
    2px;
}


/* =========================================================
   36. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    transition:
      none !important;

    animation:
      none !important;

    scroll-behavior:
      auto !important;
  }
}


/* =========================================================
   37. FOOTER
   ========================================================= */

footer._ui_components_link_footer__wrapper {
  display:
    none;
}


/* =========================================================
   38. CODE / TERMINAL
   ========================================================= */

code,
pre {
  background:
    var(--pine-bg-deep) !important;

  color:
    var(--pine-green-light) !important;

  border:
    1px solid var(--pine-border) !important;

  font-family:
    'Share Tech Mono',
    monospace !important;
}

pre {
  box-shadow:
    inset 0 0 18px rgba(113,137,95,.035) !important;
}


/* =========================================================
   39. BLOCKQUOTES
   ========================================================= */

blockquote {
  border-left:
    2px solid var(--pine-bark-light) !important;

  color:
    var(--pine-text-soft) !important;

  background:
    rgba(118,94,80,.045) !important;

  padding-left:
    1em !important;
}


/* =========================================================
   40. DIVIDERS
   ========================================================= */

hr {
  border-color:
    var(--pine-border) !important;

  opacity:
    .8;
}

.status + .status {
  border-top-color:
    rgba(45,58,48,.65) !important;
}


/* =========================================================
   41. STATUS VISUAL LANGUAGE
   ========================================================= */

/* Replies */

.reply-indicator {
  border-left-color:
    var(--pine-fern) !important;
}


/* Links / cards */

.status-card {
  background:
    var(--pine-surface-2) !important;

  border-color:
    var(--pine-border-light) !important;
}

.status-card:hover {
  border-color:
    var(--pine-border-active) !important;
}


/* =========================================================
   42. PUBLIC / LANDING PAGES
   ========================================================= */

.public-layout {
  background:
    var(--pine-bg) !important;

  color:
    var(--pine-text) !important;
}

.public-layout .header {
  background:
    var(--pine-surface) !important;

  border-color:
    var(--pine-border) !important;
}


/* =========================================================
   43. SMALL SCREEN
   ========================================================= */

@media (max-width: 700px) {

  html,
  body {
    background:
      var(--pine-bg) !important;

    color:
      var(--pine-text) !important;
  }

  .column-header,
  .column-header__wrapper {
    background:
      var(--pine-surface) !important;
  }

  .tabs-bar,
  .tabs-bar__wrapper {
    background:
      var(--pine-surface) !important;
  }

  .status,
  .notification-group,
  .notification-ungrouped {
    background:
      transparent !important;
  }

  .status:hover {
    background:
      transparent !important;
  }

  .column-header::after {
    left:
      4%;

    right:
      4%;
  }
}


/* =========================================================
   44. SMALL PHONES
   ========================================================= */

@media (max-width: 400px) {

  .status__content {
    font-size:
      .95rem;
  }
}