/* ============================================================
   SP500 Tracker theme for Mastodon (social.paganof.org)
   Same tokens as the tracker's Memory/Paths pages:
   bg #0a0e1a · surface #101526 · border #212942 · accent #6366f1
   teal #2dd4bf · violet #a78bfa · pos #34d399 · neg #f87171
   Installed via Admin → Appearance → Custom CSS (served at /custom.css).
   Selectors target long-stable Mastodon web-UI classes; CSS variables
   cover the 4.3+ variable-driven surfaces.
   ============================================================ */

:root {
  --sp-bg: #0a0e1a;
  --sp-surface: #101526;
  --sp-surface2: #151b30;
  --sp-border: #212942;
  --sp-border-soft: #1a2138;
  --sp-text: #e7ecf6;
  --sp-muted: #8b94ad;
  --sp-dim: #5b6379;
  --sp-accent: #6366f1;
  --sp-teal: #2dd4bf;
  --sp-violet: #a78bfa;
  --sp-pos: #34d399;
  --sp-neg: #f87171;
  --sp-warn: #fbbf24;
  --sp-mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Mastodon 4.3+ theme variables (harmless where unrecognized) */
  --background-color: var(--sp-bg);
  --background-color-tint: rgba(16, 21, 38, 0.9);
  --background-border-color: var(--sp-border);
  --surface-background-color: var(--sp-surface);
  --surface-variant-background-color: var(--sp-surface2);
  --modal-background-color: var(--sp-surface);
  --modal-border-color: var(--sp-border);
  --dropdown-background-color: var(--sp-surface2);
  --dropdown-border-color: var(--sp-border);
  --input-background-color: var(--sp-surface2);
}

/* ---------- typography: the tracker voice, not Roboto ---------- */
html { background: var(--sp-bg) !important; }
body, .ui, .ui *:not(i):not(.icon):not(svg) {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI",
               Helvetica, Arial, sans-serif !important;
}
body { font-size: 14px; }

/* ---------- base surfaces: panels floating on a darker page ---------- */
body,
.ui,
.columns-area,
.columns-area__panels,
.getting-started,
.navigation-panel,
.compose-panel,
.drawer__inner,
.drawer__inner__mastodon {
  background: var(--sp-bg) !important;
  color: var(--sp-text);
}

/* columns become tracker panels: surface fill, border, radius, breathing room */
.column {
  background: var(--sp-surface) !important;
}
.column > .scrollable,
.drawer__pager,
.status,
.detailed-status,
.detailed-status__action-bar,
.notification,
.account,
.follow_requests-unlocked_explanation {
  background: transparent !important;
  border-color: var(--sp-border-soft) !important;
}
.status:hover, .notification:hover { background: color-mix(in srgb, var(--sp-surface2) 55%, transparent) !important; }

.column-back-button,
.column-header,
.column-header__wrapper,
.column-header__collapsible,
.column-header__collapsible-inner,
.column-header__button {
  background: var(--sp-surface) !important;
  color: var(--sp-text) !important;
  border-color: var(--sp-border) !important;
}
.column-header {
  border: 0 !important;
  border-bottom: 1px solid var(--sp-border) !important;
  font-weight: 650;
  font-size: 13.5px;
}
.column-header__icon { color: var(--sp-teal); }
.notification__filter-bar button.active::after,
.account__section-headline a.active::after { border-color: transparent transparent var(--sp-teal) !important; }

/* panel edges — make columns read like tracker panels */
.column { border: 1px solid var(--sp-border) !important; border-radius: 12px; margin: 10px 6px; overflow: hidden; }
.scrollable { border-radius: 0 0 12px 12px; }
/* single-column layout: same panel treatment, centered with air around it */
.columns-area__panels__main { padding: 10px 8px; }
.columns-area__panels__main .column { margin: 0; }

/* ---------- statuses ---------- */
.status { border-bottom: 1px solid var(--sp-border-soft) !important; padding: 14px 16px; }
.status__content,
.status__content p,
.detailed-status .status__content {
  color: var(--sp-text) !important;
  font-size: 14px;
  line-height: 1.5;
}
.status__content a, .status__content a.unhandled-link { color: var(--sp-teal) !important; }
.status__display-name strong, .display-name strong { color: var(--sp-text) !important; }
.display-name__account,
.status__relative-time,
.detailed-status__datetime,
.status__visibility-icon {
  color: var(--sp-dim) !important;
  font-family: var(--sp-mono);
  font-size: 12px;
}
.status__avatar .account__avatar,
.account__avatar {
  border-radius: 10px !important;
  background-color: var(--sp-surface2);
}
.status__prepend, .notification__message { color: var(--sp-muted) !important; }
.status__prepend .status__prepend-icon { color: var(--sp-violet); }

/* thread line between replies */
.status__line, .status__wrapper--filtered { border-color: var(--sp-border) !important; }

/* action bar */
.status__action-bar .icon-button,
.detailed-status__action-bar .icon-button {
  color: var(--sp-dim) !important;
}
.icon-button:hover, .icon-button:focus { color: var(--sp-muted) !important; }
.icon-button.active { color: var(--sp-teal) !important; }
.icon-button.star-icon.active { color: var(--sp-warn) !important; }

/* bot + locked badges */
.account-role, .roles .account-role {
  background: color-mix(in srgb, var(--sp-violet) 16%, transparent) !important;
  color: var(--sp-violet) !important;
  border: 1px solid color-mix(in srgb, var(--sp-violet) 45%, var(--sp-border)) !important;
  border-radius: 6px;
  font-family: var(--sp-mono);
  text-transform: uppercase;
  font-size: 10px;
}

/* ---------- left nav / getting started ---------- */
.column-link,
.column-link--transparent {
  color: var(--sp-muted) !important;
  background: transparent !important;
  border-radius: 10px;
}
.column-link:hover { background: var(--sp-surface2) !important; color: var(--sp-text) !important; }
.column-link.active,
.column-link--transparent.active {
  background: color-mix(in srgb, var(--sp-teal) 14%, transparent) !important;
  color: var(--sp-teal) !important;
}
.column-link__icon, .column-link .icon { color: inherit !important; }
.column-subheading {
  background: transparent !important;
  color: var(--sp-dim) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10.5px;
}

/* ---------- compose ---------- */
.compose-form__autosuggest-wrapper,
.autosuggest-textarea__textarea,
.compose-form .spoiler-input__input,
.compose-form__highlightable {
  background: var(--sp-surface2) !important;
  color: var(--sp-text) !important;
  border-color: var(--sp-border) !important;
  border-radius: 12px;
}
.autosuggest-textarea__textarea::placeholder { color: var(--sp-dim) !important; }
.compose-form__buttons-wrapper, .compose-form__buttons {
  background: transparent !important;
}
/* primary actions in TEAL — deliberately distinct from Mastodon's own
   #6364FF, which is nearly identical to the tracker indigo */
.button, .button.button-primary, .compose-form__publish-button-wrapper .button {
  background: var(--sp-teal) !important;
  color: #04211d !important;
  border-radius: 10px !important;
  font-weight: 700;
}
.button:hover { filter: brightness(1.08); }
.button.button-secondary, .button.button-tertiary {
  background: transparent !important;
  color: var(--sp-muted) !important;
  border: 1px solid var(--sp-border) !important;
}
.privacy-dropdown__value, .dropdown-button {
  background: var(--sp-surface2) !important;
  border: 1px solid var(--sp-border) !important;
  color: var(--sp-warn) !important;   /* visibility stays loud */
  border-radius: 999px !important;
}
.character-counter { color: var(--sp-dim); font-family: var(--sp-mono); }

/* ---------- search & inputs ---------- */
.search__input, input.rich-formatting, .simple_form input[type="text"],
.simple_form input[type="email"], .simple_form input[type="password"],
.simple_form textarea, .simple_form select {
  background: var(--sp-surface2) !important;
  color: var(--sp-text) !important;
  border: 1px solid var(--sp-border) !important;
  border-radius: 10px !important;
}
.search__icon .icon { color: var(--sp-dim) !important; }

/* ---------- notifications column ---------- */
.notification { border-bottom: 1px solid var(--sp-border-soft) !important; }
.notification__filter-bar, .account__section-headline {
  background: var(--sp-surface) !important;
  border-color: var(--sp-border) !important;
}
.notification__filter-bar button.active,
.account__section-headline a.active {
  color: var(--sp-accent) !important;
}
.notification-group--annual-report, .dismissable-banner {
  background: var(--sp-surface) !important;
  border: 1px solid var(--sp-border) !important;
  border-radius: 12px;
  color: var(--sp-muted) !important;
}

/* ---------- dropdowns, modals ---------- */
.dropdown-menu, .dropdown-menu__container {
  background: var(--sp-surface2) !important;
  border: 1px solid var(--sp-border) !important;
  border-radius: 12px;
}
.dropdown-menu__item a, .dropdown-menu__item button { color: var(--sp-muted) !important; background: transparent !important; }
.dropdown-menu__item a:hover, .dropdown-menu__item button:hover {
  background: color-mix(in srgb, var(--sp-accent) 14%, transparent) !important;
  color: var(--sp-text) !important;
}
.modal-root__modal, .actions-modal, .boost-modal, .confirmation-modal, .report-modal {
  background: var(--sp-surface) !important;
  border: 1px solid var(--sp-border) !important;
  color: var(--sp-text) !important;
}

/* ---------- profile / account pages ---------- */
.account__header, .account__header__bar, .account__header__tabs,
.account__header__extra, .account-timeline__header {
  background: var(--sp-surface) !important;
  border-color: var(--sp-border) !important;
}
.account__header__tabs__name h1, .account__header__content { color: var(--sp-text) !important; }
.account__header__account-note, .account__header__fields dt { color: var(--sp-dim) !important; }
.account__header__fields dd.verified {
  background: color-mix(in srgb, var(--sp-pos) 12%, transparent) !important;
  color: var(--sp-pos) !important;
}

/* ---------- public pages (about, profiles when logged out) ---------- */
.landing-page, .public-layout, .public-layout .container,
.public-layout .public-account-header, .about, .about__section,
.about__header, .rules-list {
  background: var(--sp-bg) !important;
  color: var(--sp-text) !important;
  border-color: var(--sp-border) !important;
}
.about__section__title, .about__section__body {
  background: var(--sp-surface) !important;
  border: 1px solid var(--sp-border) !important;
  color: var(--sp-text) !important;
}
.link-footer, .link-footer p { color: var(--sp-dim) !important; }

/* ---------- scrollbars, links, odds & ends ---------- */
* { scrollbar-color: var(--sp-border) var(--sp-bg); }
::-webkit-scrollbar-thumb { background: var(--sp-border); border-radius: 6px; }
::-webkit-scrollbar-track { background: var(--sp-bg); }
a { color: var(--sp-teal); }
.load-more { color: var(--sp-accent) !important; background: transparent !important; }
.timeline-hint, .empty-column-indicator { color: var(--sp-dim) !important; background: var(--sp-bg) !important; }
.upload-progress, .loading-bar { background: var(--sp-accent) !important; }
.floating-action-button { background: var(--sp-accent) !important; }

/* hashtags + mentions in tracker colors */
.status__content a.mention { color: var(--sp-violet) !important; }
.status__content a.hashtag { color: var(--sp-accent) !important; }