/* ===========================================================================
   Atrium City -- global theme for Fluxer (chat.atrium.city)
   ---------------------------------------------------------------------------
   Injected into every page by the atriumcity-theme nginx sidecar, so it applies
   to EVERY account and every device with no per-user setup. Fluxer itself has
   no instance-wide theme; this is done at the proxy because we own the stack.

   Palette: webdev/atriumcity-design/tokens/atriumcity.tokens.json
     black #000000 | teal #1a7a76 | teal-bright #3fc6c0 | teal-dim #0a4a48
     teal-dark #062524 | teal-faint #021110 | amber #a07a2a | err #7a2a2a

   Fonts are SELF-HOSTED (never Google Fonts): Anonymous Pro for body text,
   VT323 for display. Share Tech Mono was retired 2026-09-21.

   SELECTOR NOTE: Fluxer defines its tokens on CLASS selectors (.theme-dark,
   .theme-coal, .theme-dark_legacy, .theme-light). A bare :root block loses on
   specificity and does nothing at all. Matching those classes is required.
   =========================================================================== */

@font-face {
  font-family: 'Anonymous Pro';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/atriumcity/fonts/anonymous-pro-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Anonymous Pro';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('/atriumcity/fonts/anonymous-pro-bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Anonymous Pro';
  font-style: italic; font-weight: 400; font-display: swap;
  src: url('/atriumcity/fonts/anonymous-pro-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Anonymous Pro';
  font-style: italic; font-weight: 700; font-display: swap;
  src: url('/atriumcity/fonts/anonymous-pro-bolditalic.woff2') format('woff2');
}
@font-face {
  font-family: 'VT323';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/atriumcity/fonts/vt323.woff2') format('woff2');
}

/* SPECIFICITY: `.theme-dark` alone only TIES Fluxer's own rules, and the app
   injects module styles at runtime AFTER this file, so it wins on source
   order and the theme silently does nothing. Qualifying with the `html`
   element (0,1,1 vs 0,1,0) beats it regardless of order. `html[class]` also
   catches any theme class added in a future release. */
html.theme-dark,
html.theme-dark_legacy,
html.theme-coal,
html.theme-light,
html[class] {
  /* ---- surfaces --------------------------------------------------------- */
  --background-primary: #000000;
  --background-secondary: #021110;
  --background-secondary-alt: #062524;
  --background-secondary-lighter: #041a19;
  --background-tertiary: #062524;
  --background-channel-header: #021110;
  --background-header-primary: #021110;
  --background-header-primary-hover: #062524;
  --background-header-secondary: #021110;

  --bg-primary: #000000;
  --bg-secondary: #021110;
  --bg-tertiary: #062524;
  --bg-hover: #062524;
  --bg-active: #0a4a48;
  --bg-code: #021110;
  --bg-code-block: #021110;
  --bg-blockquote: #021110;

  --composer-surface-color: #021110;
  --panel-control-bg: #062524;
  --guild-badge-surface: #062524;
  --surface-interactive-hover-bg: #062524;
  --surface-interactive-selected-bg: #0a4a48;
  --surface-interactive-selected-color: #3fc6c0;
  --floating-surface-ring-color: #0a4a48;
  --floating-surface-ring-color-strong: #1a7a76;

  /* ---- text ------------------------------------------------------------- */
  --text-primary: #3fc6c0;
  --text-secondary: #1a7a76;
  --text-tertiary: #1a7a76;
  --text-primary-muted: #1a7a76;
  --text-tertiary-muted: #0a4a48;
  --text-tertiary-secondary: #2e9d97;
  --text-chat: #3fc6c0;
  --text-chat-muted: #1a7a76;
  --text-link: #3fc6c0;
  --text-on-brand-primary: #000000;
  --text-warning: #a07a2a;
  --text-selection: #0a4a48;

  /* ---- brand + accents: this is what removes Fluxer's purple ------------ */
  --brand-primary: #1a7a76;
  /* NOTE: --brand-primary-fill is the FOREGROUND colour drawn ON a
     brand-primary background, not a background fill. Setting it to the
     brand teal made the Sign in button teal-on-teal and invisible. */
  --brand-primary-fill: #ffffff;
  --brand-primary-light: #3fc6c0;
  --brand-secondary: #0a4a48;

  --accent-primary: #3fc6c0;
  --accent-purple: #1a7a76;
  --accent-info: #1a7a76;
  --accent-success: #3fc6c0;
  --accent-warning: #a07a2a;
  --accent-danger: #7a2a2a;

  --plutonium: #1a7a76;
  --plutonium-hover: #3fc6c0;
  --plutonium-icon: #3fc6c0;
  --plutonium-text: #3fc6c0;

  /* ---- typography tokens, if the client reads them ---------------------- */
  --font-primary: 'Anonymous Pro', ui-monospace, monospace;
  --font-display: 'VT323', monospace;
  --font-code: 'Anonymous Pro', ui-monospace, monospace;
}

/* Element-level fallback: applies even where the client does not use a token. */
body,
button, input, textarea, select,
[class*="message"], [class*="chat"] {
  font-family: 'Anonymous Pro', ui-monospace, monospace;
}

h1, h2, h3 {
  font-family: 'VT323', monospace;
  letter-spacing: 0.02em;
}

/* The auth pages ship a bright purple backdrop with food doodles. */
body { background-color: #000000; }

/* ---------------------------------------------------------------------------
   Hide the "Get the desktop app" nagbar.
   The official desktop client cannot be pointed at a self-hosted instance
   without an undocumented --force-server flag (upstream self-hosted issue
   #141 is still open), so this banner sends members to something that will
   not connect to this server.

   Targeted by Fluxer's own `data-flx` semantic attribute rather than a CSS
   module class, because those class names are content-hashed and change on
   every build. Only THIS nagbar is hidden; connection-lost, email
   verification and the rest still work.
   --------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   THE TRAP: the Nagbar component does NOT forward the `data-flx` prop it is
   given. It hardcodes `data-flx="app.nagbar.nagbar"` on the element it
   renders, so EVERY nagbar looks identical by that attribute and the caller's
   value (app.app-layout.nagbars.desktop-download-nagbar.nagbar) never reaches
   the DOM. Targeting it directly silently matches nothing.

   The platform-icons <span> INSIDE the bar is a raw DOM element, so it does
   keep its identifier. Match the bar by what it contains instead. This stays
   surgical: other nagbars (connection lost, email verification, terms) are
   untouched.
   --------------------------------------------------------------------------- */
[data-flx="app.nagbar.nagbar"]:has([data-flx*="desktop-download-nagbar"]) {
  display: none !important;
}
/* belt and braces, in case a future build does forward the prop */
[data-flx*="desktop-download-nagbar"] {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   Replace Fluxer's tiled food-doodle backdrop on the auth pages with the
   good_alley ASCII eyes.

   The element is `auth.flow.auth-background.pattern-host`, which ships as a
   260x260 tiled SVG at 6% opacity. Only the DESKTOP layout renders it; the
   mobile layout has no pattern host at all, which is why it cannot be found
   in a narrow viewport.
   --------------------------------------------------------------------------- */
[data-flx="auth.flow.auth-background.pattern-host"] {
  /* good_alley ASCII eyes, full strength, on the black auth backdrop.

     `calc(100% - 96px) auto` stretches ONE copy across the viewport at any
     resolution while leaving a 48px black gutter each side, so the artwork's
     hard left/right edges do not butt against the screen edge and read as a
     seam. `repeat-y` tiles downward only -- repeating in both directions made
     a grid of small copies that looked like noise.

     `background-origin: content-box` + padding keeps the gutter honest if the
     element ever gains its own padding.

     No invert(): the art is a greyscale ASCII render, so inverting cancels the
     contrast that carries the image. */
  background-image: url("/atriumcity/good-alley-eyes-band.webp") !important;
  background-repeat: repeat-y !important;
  background-size: calc(100% - 96px) auto !important;
  background-position: center top !important;
  background-attachment: scroll !important;
  filter: none !important;
  opacity: 1 !important;
  display: block !important;
}

/* ---------------------------------------------------------------------------
   Auth pages on black.
   The full-bleed backdrop is `app.auth-layout.auth-layout-content.container`,
   which Fluxer paints with the brand colour -- so once --brand-primary became
   Atrium City teal, the whole login page went teal. Force it black.
   --------------------------------------------------------------------------- */
[data-flx="app.auth-layout.auth-layout-content.container"] {
  background-color: #000000 !important;
}

/* ---------------------------------------------------------------------------
   Hide the desktop-app download button in the left rail.

   WHY CSS AND NOT A SETTING: Fluxer does have a `downloadButtonHidden` flag,
   but it is a PER-USER preference (persisted under `hiddenGuildButtons` and
   synced per account), so there is no instance-wide switch. Hiding it here, in
   the stylesheet the nginx sidecar injects into every page, applies it to every
   account on this server with no per-user setup.

   The selector is Fluxer's own semantic attribute, not a content-hashed class
   name, so it survives rebuilds. The button's sibling `?` help button uses
   `app.sidebar-nav.help-button.div` and is deliberately left alone.

   The desktop app cannot be pointed at a self-hosted server without a lot of
   workaround, so the button only leads users somewhere useless.
   --------------------------------------------------------------------------- */
[data-flx="app.sidebar-nav.download-button.div"] {
  display: none !important;
}