/* =========================================================================
   NIGHT CITY UPLINK — a Cyberpunk 2077-inspired skin for Mastodon
   =========================================================================

   Design language borrowed from CP2077's HUD, not the game's actual assets:
   matte black backgrounds, signature caution-yellow, chamfered (cut-corner)
   panels, an inverted fill on selected/active elements (the way the game's
   menu highlights an entry), and red/cyan chromatic-aberration glitch on
   hover. No logos, wordmarks, or proprietary fonts are used or referenced.

   HOW TO INSTALL
   ---------------------------------------------------------------------
   Instance admin (applies site-wide):
     Administration → Server Settings → Appearance → Custom CSS
     Paste this whole file in and save.

   Personal use only (any instance, just for you):
     Install the "Stylus" browser extension, create a new style for your
     instance's domain, and paste this file in.

   Tested against standard Mastodon web UI class names as of the 4.x
   series. Forks (glitch-soc, Hometown) may need minor selector tweaks —
   the design tokens below are the only thing you should need to touch
   for color/font changes.
   ========================================================================= */

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

/* -------------------------------------------------------------------- */
/* DESIGN TOKENS                                                         */
/* -------------------------------------------------------------------- */
:root {
  --void:          #060606;   /* HUD black */
  --panel:         #0e0e0e;   /* cards, columns, compose form */
  --panel-raised:  #1b1b1b;   /* hover states, dropdowns */
  --cp-yellow:     #fcee0a;   /* signature accent — selection, primary CTA */
  --cp-cyan:       #4dfcff;   /* netrunner accent — links, boosts, focus */
  --cp-red:        #ff003c;   /* danger accent — mentions, alerts */
  --ghost:         #f4f4f4;   /* primary text */
  --steel:         #5a5a5a;   /* secondary text, chrome, borders */

  --font-display: 'Rajdhani', sans-serif;
  --font-body:    'IBM Plex Sans', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --chamfer: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

/* -------------------------------------------------------------------- */
/* GLOBAL                                                                */
/* -------------------------------------------------------------------- */
html, body {
  background-color: var(--void) !important;
  background-image:
    linear-gradient(rgba(77, 252, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77, 252, 255, 0.05) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
  color: var(--ghost) !important;
  font-family: var(--font-body) !important;
}

/* -------------------------------------------------------------------- */
/* SCREEN FRAME — turns the empty margins either side of the fixed-     */
/* width layout into HUD bezel rails instead of dead black space.       */
/* -------------------------------------------------------------------- */
html::before,
body::before {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  width: 8px;
  z-index: 40;
  pointer-events: none;
  background: repeating-linear-gradient(
    45deg,
    var(--cp-yellow) 0px, var(--cp-yellow) 10px,
    var(--void) 10px, var(--void) 20px
  );
}
html::before { left: 0; }
body::before  { right: 0; }

/* On very wide monitors, also let the app itself use more of the
   screen so less bezel is needed in the first place. Mastodon's center-
   column wrapper class has varied slightly across versions — if this
   block doesn't visibly widen anything on your instance, open devtools,
   find the element that wraps the columns, and swap in its class here. */
@media (min-width: 1600px) {
  .columns-area__panels,
  .columns-area {
    max-width: 1500px !important;
    margin: 0 auto !important;
  }
}

::selection { background: var(--cp-yellow); color: var(--void); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb {
  background: var(--steel);
  border: 2px solid var(--void);
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover { background: var(--cp-yellow); }

a { color: var(--cp-cyan); }
a:hover { color: var(--cp-yellow); text-decoration: underline; }
.mention, a.mention { color: var(--cp-cyan) !important; }
a.hashtag { color: var(--cp-yellow) !important; }

.status__relative-time,
time,
.display-name__account,
.compose-form__modifiers,
.character-counter {
  font-family: var(--font-mono) !important;
  letter-spacing: 0.02em;
  color: var(--steel) !important;
}

/* -------------------------------------------------------------------- */
/* NAVIGATION / TABS — caution-stripe gutter + inverted active state    */
/* -------------------------------------------------------------------- */
.navigation-bar,
.tabs-bar,
.ui__header {
  background: var(--panel) !important;
  border-bottom: none !important;
  position: relative;
}

.navigation-bar::before,
.tabs-bar::before {
  content: "";
  display: block;
  height: 3px;
  background: repeating-linear-gradient(
    45deg,
    var(--cp-yellow) 0px, var(--cp-yellow) 8px,
    var(--void) 8px, var(--void) 16px
  );
}

.tabs-bar__link {
  font-family: var(--font-display) !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--steel) !important;
  transition: background 0.12s ease, color 0.12s ease;
}

.tabs-bar__link:hover { color: var(--ghost) !important; }

.tabs-bar__link.active {
  background: var(--cp-yellow) !important;
  color: var(--void) !important;
}

.column-link,
.column-link__icon { color: var(--ghost) !important; }
.column-link:hover {
  background: var(--cp-yellow) !important;
  color: var(--void) !important;
}

/* -------------------------------------------------------------------- */
/* COLUMNS                                                              */
/* -------------------------------------------------------------------- */
.column, .drawer, .scrollable { background: var(--void) !important; }

.column-header, .column-header__wrapper {
  background: var(--panel) !important;
  border-bottom: 1px solid var(--steel) !important;
}

.column-header__title {
  font-family: var(--font-display) !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ghost) !important;
}
.column-header__title::before {
  content: "// ";
  color: var(--cp-yellow);
}

/* -------------------------------------------------------------------- */
/* BUTTONS — chamfered, invert-fill on hover like a menu confirm prompt */
/* -------------------------------------------------------------------- */
.button {
  background: transparent !important;
  border: 1px solid var(--cp-yellow) !important;
  color: var(--cp-yellow) !important;
  font-family: var(--font-display) !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 0 !important;
  clip-path: var(--chamfer);
  transition: all 0.12s ease;
}

.button:hover {
  background: var(--cp-yellow) !important;
  color: var(--void) !important;
}

.button--block { width: 100%; }

.icon-button { color: var(--steel) !important; }
.icon-button:hover { color: var(--cp-cyan) !important; }
.icon-button.active { color: var(--cp-yellow) !important; }

/* -------------------------------------------------------------------- */
/* COMPOSE FORM                                                         */
/* -------------------------------------------------------------------- */
.compose-form,
.compose-panel,
.compose-form__autosuggest-wrapper {
  background: var(--panel) !important;
  border: 1px solid var(--steel) !important;
  clip-path: var(--chamfer);
}

.compose-form .autosuggest-textarea__textarea,
.compose-form__autosuggest-wrapper textarea {
  background: transparent !important;
  color: var(--ghost) !important;
  font-family: var(--font-body) !important;
}
.compose-form .autosuggest-textarea__textarea:focus { outline: none; }

.compose-form__autosuggest-wrapper:focus-within {
  border-color: var(--cp-cyan) !important;
  box-shadow: 0 0 12px rgba(77, 252, 255, 0.35);
}

.compose-form__publish .button {
  border-color: var(--cp-cyan) !important;
  color: var(--cp-cyan) !important;
}
.compose-form__publish .button:hover {
  background: var(--cp-cyan) !important;
  color: var(--void) !important;
}

/* -------------------------------------------------------------------- */
/* STATUS CARDS                                                         */
/* -------------------------------------------------------------------- */
.status, .status__wrapper {
  background: var(--panel) !important;
  border-bottom: 1px solid rgba(90, 90, 90, 0.4) !important;
  border-left: 3px solid transparent !important;
  transition: border-left-color 0.15s ease, background 0.15s ease;
}

.status:hover {
  background: var(--panel-raised) !important;
  border-left-color: var(--cp-yellow) !important;
}

.status__content { color: var(--ghost) !important; font-family: var(--font-body) !important; }
.status__content a { color: var(--cp-cyan) !important; }

/* Display names — chromatic-aberration glitch on hover */
.display-name__html,
.status__display-name strong {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  color: var(--ghost) !important;
  position: relative;
}

.status__display-name:hover .display-name__html {
  animation: chromatic-glitch 0.4s steps(2, end) infinite;
}

@keyframes chromatic-glitch {
  0%   { text-shadow: 0 0 0 transparent; }
  25%  { text-shadow: -2px 0 var(--cp-red), 2px 0 var(--cp-cyan); }
  50%  { text-shadow: 2px 0 var(--cp-red), -2px 0 var(--cp-cyan); }
  75%  { text-shadow: -1px 0 var(--cp-cyan), 1px 0 var(--cp-red); }
  100% { text-shadow: 0 0 0 transparent; }
}

/* Avatars — chamfered Kiroshi-optic frame, cyan ring */
.account__avatar,
.status__avatar img,
.account__avatar img,
.account__avatar__image {
  clip-path: var(--chamfer) !important;
  border: 2px solid var(--cp-cyan) !important;
  box-shadow: 0 0 8px rgba(77, 252, 255, 0.5);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.status__avatar:hover img,
.account__avatar:hover img {
  box-shadow: 0 0 16px rgba(252, 238, 10, 0.8);
  border-color: var(--cp-yellow) !important;
}

/* Action bar */
.status__action-bar .icon-button {
  transition: color 0.12s ease, text-shadow 0.12s ease;
}
.status__action-bar .icon-button:hover {
  color: var(--cp-red) !important;
  text-shadow: 0 0 8px rgba(255, 0, 60, 0.5);
}
.icon-button.active .fa-retweet {
  color: var(--cp-cyan) !important;
  text-shadow: 0 0 8px rgba(77, 252, 255, 0.6);
}
.icon-button.active .fa-star {
  color: var(--cp-yellow) !important;
  text-shadow: 0 0 8px rgba(252, 238, 10, 0.6);
}

/* -------------------------------------------------------------------- */
/* NOTIFICATIONS                                                        */
/* -------------------------------------------------------------------- */
.notification {
  background: var(--panel) !important;
  border-left: 3px solid transparent !important;
}
.notification:hover { background: var(--panel-raised) !important; }
.notification-favourite { border-left-color: var(--cp-yellow) !important; }
.notification-reblog    { border-left-color: var(--cp-cyan) !important; }
.notification-mention   { border-left-color: var(--cp-red) !important; }

/* -------------------------------------------------------------------- */
/* POLLS, MEDIA, SEARCH, DROPDOWNS                                      */
/* -------------------------------------------------------------------- */
.poll__option { border: 1px solid var(--steel) !important; }
.poll__chart { background: var(--cp-cyan) !important; }

.media-gallery, .attachment-list, .video-player {
  border: 1px solid var(--steel) !important;
  clip-path: var(--chamfer);
}

.search__input {
  background: var(--panel) !important;
  color: var(--ghost) !important;
  border: 1px solid var(--steel) !important;
  font-family: var(--font-mono) !important;
  clip-path: var(--chamfer);
}
.search__input:focus {
  border-color: var(--cp-yellow) !important;
  box-shadow: 0 0 10px rgba(252, 238, 10, 0.35);
}

.dropdown-menu {
  background: var(--panel-raised) !important;
  border: 1px solid var(--cp-yellow) !important;
  clip-path: var(--chamfer);
}
.dropdown-menu__item:hover {
  background: var(--cp-yellow) !important;
  color: var(--void) !important;
}

/* -------------------------------------------------------------------- */
/* AMBIENT SCANLINE — faint CRT/holo texture across the whole app       */
/* -------------------------------------------------------------------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    to bottom,
    rgba(77, 252, 255, 0.02) 0px,
    rgba(77, 252, 255, 0.02) 1px,
    transparent 1px,
    transparent 3px
  );
  animation: scan-drift 9s linear infinite;
}

@keyframes scan-drift {
  from { background-position: 0 0; }
  to   { background-position: 0 100px; }
}

/* -------------------------------------------------------------------- */
/* ACCESSIBILITY                                                        */
/* -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none !important; }
  .status__display-name:hover .display-name__html { animation: none !important; }
  * { transition-duration: 0.01ms !important; }
}

*:focus-visible {
  outline: 2px solid var(--cp-yellow) !important;
  outline-offset: 2px;
}