/* ============================================================
   MASTODON — ORANGE TECH THEME
   A dark, terminal-flavored skin with orange signal accents.
   Paste into: Settings → Preferences → Appearance → Custom CSS
   ============================================================ */

/* ── Design tokens ──────────────────────────────────────────── */
:root {
  --ot-bg-0:        #0a0a0b;   /* void / deepest bg             */
  --ot-bg-1:        #111114;   /* page background               */
  --ot-bg-2:        #18181d;   /* panel / column background     */
  --ot-bg-3:        #202028;   /* raised card surface           */
  --ot-bg-4:        #2a2a35;   /* hover / selected state        */

  --ot-border:      #2e2e3a;   /* default border                */
  --ot-border-hi:   #3e3e50;   /* highlighted border            */

  --ot-orange:      #ff6a00;   /* primary accent                */
  --ot-orange-hi:   #ff8c38;   /* hovered / lighter accent      */
  --ot-orange-lo:   #c04800;   /* pressed / darker accent       */
  --ot-orange-glow: rgba(255, 106, 0, 0.18); /* glow ambient   */
  --ot-orange-dim:  rgba(255, 106, 0, 0.08); /* subtle tint    */

  --ot-text-0:      #f0ebe4;   /* primary text                  */
  --ot-text-1:      #a09890;   /* secondary / muted text        */
  --ot-text-2:      #5e5a56;   /* placeholder / very muted      */

  --ot-green:       #39d98a;   /* success / active dot          */
  --ot-red:         #ff4757;   /* danger / error                */
  --ot-blue:        #4da6ff;   /* links (kept for readability)  */

  --ot-font-ui:     'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  --ot-font-body:   'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --ot-radius:      4px;
  --ot-radius-lg:   8px;
}

/* ── Font imports ───────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

/* ── Global reset ───────────────────────────────────────────── */
body,
.ui,
.column,
.drawer,
.drawer__inner,
.column-back-button,
.column-header,
.column-header__back-button {
  background-color: var(--ot-bg-1) !important;
  color: var(--ot-text-0) !important;
  font-family: var(--ot-font-body) !important;
}

/* ── Columns & layout ───────────────────────────────────────── */
.column {
  border-right: 1px solid var(--ot-border) !important;
}

.column-header,
.column-header__back-button {
  background: var(--ot-bg-2) !important;
  border-bottom: 1px solid var(--ot-border) !important;
  font-family: var(--ot-font-ui) !important;
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--ot-orange) !important;
}

.column-header__icon {
  color: var(--ot-orange) !important;
}

.column-header__button {
  color: var(--ot-text-1) !important;
  background: transparent !important;
  transition: color 0.15s, background 0.15s !important;
}

.column-header__button:hover,
.column-header__button.active {
  color: var(--ot-orange) !important;
  background: var(--ot-orange-dim) !important;
}

.column-header__collapsible {
  background: var(--ot-bg-2) !important;
  border-bottom: 1px solid var(--ot-border) !important;
}

/* ── Drawer (compose sidebar) ───────────────────────────────── */
.drawer__inner,
.drawer__inner__mastodon {
  background: var(--ot-bg-2) !important;
  border-right: 1px solid var(--ot-border) !important;
}

.drawer__inner__mastodon > img {
  filter: hue-rotate(200deg) saturate(3) brightness(0.8) !important;
  opacity: 0.6 !important;
}

/* ── Navigation ─────────────────────────────────────────────── */
.navigation-bar,
.navigation-panel {
  background: var(--ot-bg-2) !important;
  border-right: 1px solid var(--ot-border) !important;
}

.navigation-panel__menu a,
.navigation-panel__menu .column-link {
  color: var(--ot-text-1) !important;
  font-family: var(--ot-font-ui) !important;
  font-size: 13px !important;
  border-radius: var(--ot-radius) !important;
  transition: background 0.15s, color 0.15s !important;
  margin: 2px 8px !important;
}

.navigation-panel__menu a:hover,
.navigation-panel__menu .column-link:hover,
.navigation-panel__menu a.active,
.navigation-panel__menu .column-link.active {
  background: var(--ot-orange-dim) !important;
  color: var(--ot-orange-hi) !important;
}

.navigation-panel__menu .column-link .column-link__icon {
  color: var(--ot-orange) !important;
}

/* ── Toots / Statuses ───────────────────────────────────────── */
.status,
.detailed-status {
  background: var(--ot-bg-2) !important;
  border-bottom: 1px solid var(--ot-border) !important;
  transition: background 0.12s !important;
}

.status:hover {
  background: var(--ot-bg-3) !important;
}

.status__content,
.detailed-status__content {
  color: var(--ot-text-0) !important;
  font-family: var(--ot-font-body) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}

.status__content a,
.detailed-status__content a {
  color: var(--ot-orange-hi) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--ot-orange-glow) !important;
  transition: border-color 0.15s, color 0.15s !important;
}

.status__content a:hover,
.detailed-status__content a:hover {
  color: var(--ot-orange) !important;
  border-bottom-color: var(--ot-orange) !important;
}

/* Hashtags */
.status__content a.mention,
.status__content a.hashtag {
  color: var(--ot-orange) !important;
  border-bottom: none !important;
  font-family: var(--ot-font-ui) !important;
  font-size: 0.9em !important;
}

/* ── Display names & handles ────────────────────────────────── */
.display-name__html {
  color: var(--ot-text-0) !important;
  font-weight: 500 !important;
}

.display-name__account,
.status__relative-time,
.detailed-status__datetime {
  color: var(--ot-text-2) !important;
  font-family: var(--ot-font-ui) !important;
  font-size: 12px !important;
}

/* ── Action bar (boost, fav, reply) ─────────────────────────── */
.status__action-bar,
.detailed-status__action-bar {
  border-top: 1px solid var(--ot-border) !important;
}

.status__action-bar__button,
.detailed-status__action-bar .icon-button {
  color: var(--ot-text-2) !important;
  transition: color 0.15s, transform 0.1s !important;
}

.status__action-bar__button:hover,
.detailed-status__action-bar .icon-button:hover {
  color: var(--ot-orange-hi) !important;
  transform: scale(1.12) !important;
}

/* Favourited state */
.icon-button.active.star-icon {
  color: var(--ot-orange) !important;
  filter: drop-shadow(0 0 6px var(--ot-orange-glow)) !important;
}

/* Boosted state */
.icon-button.active.reblog-icon {
  color: var(--ot-green) !important;
}

/* ── Compose box ────────────────────────────────────────────── */
.compose-form,
.compose-form__autosuggest-wrapper {
  background: var(--ot-bg-2) !important;
}

.compose-form .autosuggest-textarea__textarea,
.compose-form textarea {
  background: var(--ot-bg-3) !important;
  color: var(--ot-text-0) !important;
  border: 1px solid var(--ot-border) !important;
  border-radius: var(--ot-radius) !important;
  font-family: var(--ot-font-body) !important;
  font-size: 15px !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  caret-color: var(--ot-orange) !important;
}

.compose-form .autosuggest-textarea__textarea:focus,
.compose-form textarea:focus {
  border-color: var(--ot-orange) !important;
  box-shadow: 0 0 0 3px var(--ot-orange-glow) !important;
  outline: none !important;
}

.compose-form__publish-button-wrapper .button,
.button.button--block {
  background: var(--ot-orange) !important;
  color: #0a0a0b !important;
  font-family: var(--ot-font-ui) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: var(--ot-radius) !important;
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s !important;
}

.compose-form__publish-button-wrapper .button:hover,
.button.button--block:hover {
  background: var(--ot-orange-hi) !important;
  box-shadow: 0 0 12px var(--ot-orange-glow) !important;
  transform: translateY(-1px) !important;
}

.compose-form__publish-button-wrapper .button:active,
.button.button--block:active {
  background: var(--ot-orange-lo) !important;
  transform: translateY(0) !important;
}

/* Character counter */
.character-counter {
  color: var(--ot-text-2) !important;
  font-family: var(--ot-font-ui) !important;
  font-size: 12px !important;
}

.character-counter.character-counter--over {
  color: var(--ot-red) !important;
}

/* ── CW / spoiler ───────────────────────────────────────────── */
.status__content__spoiler-link {
  background: var(--ot-orange-dim) !important;
  border: 1px solid var(--ot-orange-glow) !important;
  color: var(--ot-orange-hi) !important;
  font-family: var(--ot-font-ui) !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  border-radius: var(--ot-radius) !important;
  padding: 2px 8px !important;
  transition: background 0.15s !important;
}

.status__content__spoiler-link:hover {
  background: var(--ot-orange-glow) !important;
}

/* ── Notifications ──────────────────────────────────────────── */
.notification {
  background: var(--ot-bg-2) !important;
  border-bottom: 1px solid var(--ot-border) !important;
}

.notification__message .fa,
.notification__message .icon {
  color: var(--ot-orange) !important;
}

.notification--follow .notification__message,
.notification--reblog .notification__message {
  color: var(--ot-text-1) !important;
  font-family: var(--ot-font-ui) !important;
  font-size: 13px !important;
}

/* ── Search bar ─────────────────────────────────────────────── */
.search__input {
  background: var(--ot-bg-3) !important;
  color: var(--ot-text-0) !important;
  border: 1px solid var(--ot-border) !important;
  border-radius: var(--ot-radius) !important;
  font-family: var(--ot-font-ui) !important;
  font-size: 13px !important;
  caret-color: var(--ot-orange) !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.search__input:focus {
  border-color: var(--ot-orange) !important;
  box-shadow: 0 0 0 3px var(--ot-orange-glow) !important;
  outline: none !important;
}

.search__icon .fa {
  color: var(--ot-orange) !important;
}

/* ── Media / images ─────────────────────────────────────────── */
.media-gallery__item {
  border-radius: var(--ot-radius) !important;
  overflow: hidden !important;
  border: 1px solid var(--ot-border) !important;
  transition: border-color 0.2s !important;
}

.media-gallery__item:hover {
  border-color: var(--ot-orange) !important;
}

/* ── Avatars ────────────────────────────────────────────────── */
.account__avatar {
  border: 2px solid var(--ot-bg-4) !important;
  border-radius: var(--ot-radius) !important; /* square-ish tech look */
  transition: border-color 0.2s !important;
}

.status:hover .account__avatar,
.account__avatar:hover {
  border-color: var(--ot-orange) !important;
  box-shadow: 0 0 8px var(--ot-orange-glow) !important;
}

/* ── Profile / account pages ────────────────────────────────── */
.account__header__bar {
  background: var(--ot-bg-2) !important;
  border-bottom: 1px solid var(--ot-border) !important;
}

.account__header__tabs__buttons .button {
  background: transparent !important;
  border: 1px solid var(--ot-orange) !important;
  color: var(--ot-orange) !important;
  font-family: var(--ot-font-ui) !important;
  font-size: 12px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  border-radius: var(--ot-radius) !important;
  transition: background 0.15s, color 0.15s !important;
}

.account__header__tabs__buttons .button:hover {
  background: var(--ot-orange) !important;
  color: #0a0a0b !important;
}

.account__header__bio {
  color: var(--ot-text-1) !important;
}

.account__header__fields {
  border-top: 1px solid var(--ot-border) !important;
}

.account__header__fields dl {
  border-bottom: 1px solid var(--ot-border) !important;
}

.account__header__fields dt {
  color: var(--ot-orange) !important;
  font-family: var(--ot-font-ui) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

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

/* Verified field */
.account__header__fields .verified {
  border-color: var(--ot-green) !important;
  color: var(--ot-green) !important;
}

/* ── Trends / explore ───────────────────────────────────────── */
.trends__item__name a {
  color: var(--ot-orange-hi) !important;
  font-family: var(--ot-font-ui) !important;
}

.trends__item__current {
  color: var(--ot-orange) !important;
  font-family: var(--ot-font-ui) !important;
  font-size: 18px !important;
}

.trends__item__sparkline path {
  stroke: var(--ot-orange) !important;
  fill: none !important;
}

.trends__item__sparkline circle {
  fill: var(--ot-orange) !important;
}

/* ── Tabs (home/notifications) ───────────────────────────────── */
.tabs-bar,
.tabs-bar__wrapper {
  background: var(--ot-bg-2) !important;
  border-bottom: 1px solid var(--ot-border) !important;
}

.tabs-bar__link {
  color: var(--ot-text-1) !important;
  font-family: var(--ot-font-ui) !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  border-bottom: 2px solid transparent !important;
  transition: color 0.15s, border-color 0.15s !important;
}

.tabs-bar__link:hover {
  color: var(--ot-orange-hi) !important;
}

.tabs-bar__link.active {
  color: var(--ot-orange) !important;
  border-bottom-color: var(--ot-orange) !important;
}

/* ── Dropdown menus ─────────────────────────────────────────── */
.dropdown-menu {
  background: var(--ot-bg-3) !important;
  border: 1px solid var(--ot-border-hi) !important;
  border-radius: var(--ot-radius-lg) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important;
  overflow: hidden !important;
}

.dropdown-menu__item a {
  color: var(--ot-text-0) !important;
  font-family: var(--ot-font-ui) !important;
  font-size: 13px !important;
  transition: background 0.12s, color 0.12s !important;
}

.dropdown-menu__item a:hover {
  background: var(--ot-orange-dim) !important;
  color: var(--ot-orange-hi) !important;
}

.dropdown-menu__separator {
  border-color: var(--ot-border) !important;
}

/* ── Modal / overlays ───────────────────────────────────────── */
.modal-root__overlay {
  background: rgba(0, 0, 0, 0.75) !important;
  backdrop-filter: blur(4px) !important;
}

.modal-root__container .report-modal,
.modal-root__container .boost-modal,
.modal-root__container .confirmation-modal,
.modal-root__container .actions-modal,
.floating-action-button + div {
  background: var(--ot-bg-3) !important;
  border: 1px solid var(--ot-border-hi) !important;
  border-radius: var(--ot-radius-lg) !important;
  color: var(--ot-text-0) !important;
}

/* ── Scrollbars ─────────────────────────────────────────────── */
* {
  scrollbar-width: thin !important;
  scrollbar-color: var(--ot-border-hi) var(--ot-bg-1) !important;
}

::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

::-webkit-scrollbar-track {
  background: var(--ot-bg-1) !important;
}

::-webkit-scrollbar-thumb {
  background: var(--ot-border-hi) !important;
  border-radius: 3px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--ot-orange-lo) !important;
}

/* ── Loading / spinners ─────────────────────────────────────── */
.loading-indicator__figure {
  border-color: var(--ot-orange) !important;
  border-top-color: transparent !important;
}

.column-placeholder {
  color: var(--ot-text-2) !important;
}

/* ── Empty-state illustrations ───────────────────────────────── */
.empty-column-indicator {
  color: var(--ot-text-2) !important;
  background: transparent !important;
  font-family: var(--ot-font-ui) !important;
  font-size: 13px !important;
}

/* ── Announcement banner ─────────────────────────────────────── */
.announcements {
  background: var(--ot-bg-2) !important;
  border-bottom: 1px solid var(--ot-orange-glow) !important;
  border-top: 2px solid var(--ot-orange) !important;
}

/* ── Admin / moderation labels ───────────────────────────────── */
.status__prepend-icon,
.status__prepend {
  color: var(--ot-text-2) !important;
  font-family: var(--ot-font-ui) !important;
  font-size: 12px !important;
}

/* ── Accessibility: focus rings ──────────────────────────────── */
*:focus-visible {
  outline: 2px solid var(--ot-orange) !important;
  outline-offset: 2px !important;
}

/* ── Selection highlight ─────────────────────────────────────── */
::selection {
  background: var(--ot-orange-glow) !important;
  color: var(--ot-text-0) !important;
}

/* ── Tiny terminal blink on compose cursor ───────────────────── */
@keyframes caret-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.compose-form textarea {
  animation: none !important;
}

/* ============================================================
   END OF THEME
   Questions / tweaks → your friendly neighbourhood admin
   ============================================================ */