/* -------------------------------------------------------------------------
   7oday.social custom CSS
   Default Mastodon colours, self-hosted IBM Plex Sans + JetBrains Mono,
   logo/wordmark kept.
   Date: 2026-11-11
   Rollback file: /root/backup/custom-css-before-fonts-20261111.css
   ------------------------------------------------------------------------- */

/* Duże logo w prawym górnym rogu – tylko grafika z pliku */
.column-link--logo,
.column-link--logo:hover,
.column-link--logo:focus,
.column-link--logo:active,
.ui__header__logo {
  background-color: transparent; /* brak nakładki */
  background-image: var(--wm-7oday, url("https://7oday.social/system/site_uploads/files/000/000/012/original/b6353bd6c5cfc087.png?v=2"));
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 200px auto; /* zmieniaj wg potrzeby */
  width: 220px;
  height: 80px;
  padding: 0;
  margin: 8px 12px;
}

/* Ukryj oryginalną ikonę Mastodona */
.column-link--logo .logo,
.ui__header__logo .logo {
  visibility: hidden;
}

/* Ikona 7oday.social zamiast logo Mastodona (mobilny nagłówek) */
img.logo.logo--icon {
  content: url("https://7oday.social/system/site_uploads/files/000/000/014/original/986d74979bc68f08.png?v=2");
  object-fit: contain;
}
svg.logo.logo--icon {
  background: url("https://7oday.social/system/site_uploads/files/000/000/014/original/986d74979bc68f08.png?v=2") center / contain no-repeat;
}
svg.logo.logo--icon use { display: none; }

/* Logo 7oday.social: ciemny napis w jasnym motywie (2026-11-11) */
[data-color-scheme='light'] { --wm-7oday: url("/system/custom/wordmark-dark.png?v=2"); }
@media (prefers-color-scheme: light) {
  [data-color-scheme='auto'] { --wm-7oday: url("/system/custom/wordmark-dark.png?v=2"); }
}

/* -------------------------------------------------------------------------
   Self-hosted fonts (woff2 only, fontsource 5.3.0 unicode-ranges)
   ------------------------------------------------------------------------- */

/* IBM Plex Sans 400 */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("/system/custom/fonts/ibm-plex-sans-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("/system/custom/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Sans 500 */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("/system/custom/fonts/ibm-plex-sans-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("/system/custom/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Sans 600 */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("/system/custom/fonts/ibm-plex-sans-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("/system/custom/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Sans 700 */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("/system/custom/fonts/ibm-plex-sans-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("/system/custom/fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* JetBrains Mono 400 */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("/system/custom/fonts/jetbrains-mono-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("/system/custom/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* JetBrains Mono 600 */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("/system/custom/fonts/jetbrains-mono-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("/system/custom/fonts/jetbrains-mono-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -------------------------------------------------------------------------
   Mastodon font variables
   ------------------------------------------------------------------------- */
html,
html[data-redesign="true"] {
  --font-body: "IBM Plex Sans", mastodon-font-sans-serif, sans-serif;
  --font-monospace: "JetBrains Mono", ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", mastodon-font-monospace, monospace;
}

/* -------------------------------------------------------------------------
   Dev accents: JetBrains Mono
   ------------------------------------------------------------------------- */

/* Handles / account names */
.display-name__account,
.display-name__acct,
.account__header__tabs__name .acct,
.account__header__tabs__name h1 small {
  font-family: var(--font-monospace);
  font-variant-ligatures: none;
}

/* Hashtags */
a.hashtag,
.hashtag-bar a,
.status__content a[href*="/tags/"],
.edit-indicator__content a[href*="/tags/"],
.reply-indicator__content a[href*="/tags/"] {
  font-family: var(--font-monospace);
  font-variant-ligatures: none;
}

/* Counters */
.icon-button__counter,
.account-card__counters__item,
.accounts-table__count,
.detailed-status__meta .animated-number,
.character-counter {
  font-family: var(--font-monospace);
  font-variant-ligatures: none;
}

/* Timestamps */
.status__relative-time,
.status__info .status__relative-time,
time.time-ago,
time.datetime,
.detailed-status__datetime,
.notification__message time,
.conversation__content__names + time,
.conversation__content__relative-time {
  font-family: var(--font-monospace);
  font-variant-ligatures: none;
}

/* Code — font family only, no visual restyling */
code,
pre,
.status__content__text code,
.e-content code,
.edit-indicator__content code,
.reply-indicator__content code,
.prose code,
.status__content__text pre,
.e-content pre,
.edit-indicator__content pre,
.reply-indicator__content pre,
.status__content__text pre code,
.e-content pre code,
.edit-indicator__content pre code,
.reply-indicator__content pre code,
pre code {
  font-family: var(--font-monospace);
  font-variant-ligatures: none;
}

/* =====================================================================
   Kolorystyka w stylu X (2026-11-12) — tryb ciemny i jasny
   ===================================================================== */
/* --------------------------------------------------------------------------
   2. Tryb ciemny — jawny wybór motywu
   -------------------------------------------------------------------------- */
[data-color-scheme="dark"] {
  color-scheme: dark;

  /* Tekst */
  --color-text-primary: #e7e9ea;
  --color-text-secondary: #71767b;
  --color-text-tertiary: #71767b;
  --color-text-inverted: #0f1419;
  --color-text-brand: #1d9bf0;
  --color-text-brand-soft: color-mix(
    in oklab,
    var(--color-text-primary),
    var(--color-text-brand)
  );
  --color-text-status-links: #1d9bf0;
  --color-text-on-brand-base: #ffffff;
  --color-text-brand-on-inverted: #1d9bf0;
  --color-text-disabled: #536471;
  --color-text-on-disabled: #71767b;
  --color-text-favourite-highlight: #f91880;
  --color-text-bookmark-highlight: #1d9bf0;
  --color-text-success: #00ba7c;
  --color-text-on-media: #ffffff;

  /* Tła */
  --color-bg-primary: #000000;
  --color-bg-secondary: #16181c;
  --color-bg-tertiary: #16181c;
  --color-bg-highlight: #16181c;
  --color-bg-inverted: #eff3f4;
  --color-bg-overlay: rgba(0, 0, 0, 0.65);
  --color-bg-overlay-highlight: #16181c;
  --color-bg-disabled: #16181c;
  --color-bg-brand-base: #1d9bf0;
  --color-bg-brand-base-hover: #1a8cd8;
  --color-bg-brand-soft: #16181c;
  --color-bg-brand-softest: #202327;
  --color-bg-media-base: #000000;
  --color-bg-media: rgba(0, 0, 0, 0.65);

  /* Linie i obramowania */
  --color-border-primary: #2f3336;
  --color-border-strong: #2f3336;
  --color-border-brand: #1d9bf0;
  --color-border-brand-soft: rgba(29, 155, 240, 0.45);
  --color-border-media: #2f3336;

  /* Wewnętrzne tokeny pomocnicze motywu X */
  --x-field-bg: #202327;
  --x-modal-bg: #16181c;
  --x-modal-text-secondary: #8b98a5;
  --x-placeholder: #8b98a5;
  --x-primary-button-bg: #eff3f4;
  --x-primary-button-color: #000000;
  --x-primary-button-hover: #d7dbdc;
}

/* --------------------------------------------------------------------------
   3. Tryb jasny — jawny wybór motywu
   -------------------------------------------------------------------------- */
[data-color-scheme="light"] {
  color-scheme: light;

  /* Tekst */
  --color-text-primary: #0f1419;
  --color-text-secondary: #536471;
  --color-text-tertiary: #536471;
  --color-text-inverted: #ffffff;
  /* Tekstowe linki przyciemnione dla kontrastu WCAG AA na białym tle;
     #1d9bf0 pozostaje kolorem akcentów wypełnień i obramowań. */
  --color-text-brand: #0877b9;
  --color-text-brand-soft: color-mix(
    in oklab,
    var(--color-text-primary),
    var(--color-text-brand)
  );
  --color-text-status-links: #0877b9;
  --color-text-on-brand-base: #ffffff;
  --color-text-brand-on-inverted: #1d9bf0;
  --color-text-disabled: #8b98a5;
  --color-text-on-disabled: #536471;
  --color-text-favourite-highlight: #f91880;
  --color-text-bookmark-highlight: #1d9bf0;
  --color-text-success: #00ba7c;
  --color-text-on-media: #ffffff;

  /* Tła */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f7f9f9;
  --color-bg-tertiary: #eff3f4;
  --color-bg-highlight: #f7f9f9;
  --color-bg-inverted: #0f1419;
  --color-bg-overlay: rgba(0, 0, 0, 0.4);
  --color-bg-overlay-highlight: #eff3f4;
  --color-bg-disabled: #cfd9de;
  --color-bg-brand-base: #1d9bf0;
  --color-bg-brand-base-hover: #1a8cd8;
  --color-bg-brand-soft: #eff3f4;
  --color-bg-brand-softest: #f7f9f9;
  --color-bg-media-base: #000000;
  --color-bg-media: rgba(0, 0, 0, 0.65);

  /* Linie i obramowania */
  --color-border-primary: #eff3f4;
  --color-border-strong: #eff3f4;
  --color-border-brand: #1d9bf0;
  --color-border-brand-soft: rgba(29, 155, 240, 0.35);
  --color-border-media: #ffffff26;

  /* Wewnętrzne tokeny pomocnicze motywu X */
  --x-field-bg: #eff3f4;
  --x-modal-bg: #ffffff;
  --x-modal-text-secondary: #536471;
  --x-placeholder: #536471;
  --x-primary-button-bg: #0f1419;
  --x-primary-button-color: #ffffff;
  --x-primary-button-hover: #272c30;
}

/* --------------------------------------------------------------------------
   4. Tryb auto — brak atrybutu data-color-scheme + preferencja systemowa
   (default.css traktuje brak atrybutu jako ciemny, dlatego nadpisujemy go
   późniejszymi regułami wewnątrz media queries)
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  html:not([data-color-scheme]) {
    color-scheme: dark;

    --color-text-primary: #e7e9ea;
    --color-text-secondary: #71767b;
    --color-text-tertiary: #71767b;
    --color-text-inverted: #0f1419;
    --color-text-brand: #1d9bf0;
    --color-text-brand-soft: color-mix(
      in oklab,
      var(--color-text-primary),
      var(--color-text-brand)
    );
    --color-text-status-links: #1d9bf0;
    --color-text-on-brand-base: #ffffff;
    --color-text-brand-on-inverted: #1d9bf0;
    --color-text-disabled: #536471;
    --color-text-on-disabled: #71767b;
    --color-text-favourite-highlight: #f91880;
    --color-text-bookmark-highlight: #1d9bf0;
    --color-text-success: #00ba7c;
    --color-text-on-media: #ffffff;

    --color-bg-primary: #000000;
    --color-bg-secondary: #16181c;
    --color-bg-tertiary: #16181c;
    --color-bg-highlight: #16181c;
    --color-bg-inverted: #eff3f4;
    --color-bg-overlay: rgba(0, 0, 0, 0.65);
    --color-bg-overlay-highlight: #16181c;
    --color-bg-disabled: #16181c;
    --color-bg-brand-base: #1d9bf0;
    --color-bg-brand-base-hover: #1a8cd8;
    --color-bg-brand-soft: #16181c;
    --color-bg-brand-softest: #202327;
    --color-bg-media-base: #000000;
    --color-bg-media: rgba(0, 0, 0, 0.65);

    --color-border-primary: #2f3336;
    --color-border-strong: #2f3336;
    --color-border-brand: #1d9bf0;
    --color-border-brand-soft: rgba(29, 155, 240, 0.45);
    --color-border-media: #2f3336;

    --x-field-bg: #202327;
    --x-modal-bg: #16181c;
    --x-modal-text-secondary: #8b98a5;
    --x-placeholder: #8b98a5;
    --x-primary-button-bg: #eff3f4;
    --x-primary-button-color: #000000;
    --x-primary-button-hover: #d7dbdc;
  }
}

@media (prefers-color-scheme: light) {
  html:not([data-color-scheme]) {
    color-scheme: light;

    --color-text-primary: #0f1419;
    --color-text-secondary: #536471;
    --color-text-tertiary: #536471;
    --color-text-inverted: #ffffff;
    --color-text-brand: #0877b9;
    --color-text-brand-soft: color-mix(
      in oklab,
      var(--color-text-primary),
      var(--color-text-brand)
    );
    --color-text-status-links: #0877b9;
    --color-text-on-brand-base: #ffffff;
    --color-text-brand-on-inverted: #1d9bf0;
    --color-text-disabled: #8b98a5;
    --color-text-on-disabled: #536471;
    --color-text-favourite-highlight: #f91880;
    --color-text-bookmark-highlight: #1d9bf0;
    --color-text-success: #00ba7c;
    --color-text-on-media: #ffffff;

    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f7f9f9;
    --color-bg-tertiary: #eff3f4;
    --color-bg-highlight: #f7f9f9;
    --color-bg-inverted: #0f1419;
    --color-bg-overlay: rgba(0, 0, 0, 0.4);
    --color-bg-overlay-highlight: #eff3f4;
    --color-bg-disabled: #cfd9de;
    --color-bg-brand-base: #1d9bf0;
    --color-bg-brand-base-hover: #1a8cd8;
    --color-bg-brand-soft: #eff3f4;
    --color-bg-brand-softest: #f7f9f9;
    --color-bg-media-base: #000000;
    --color-bg-media: rgba(0, 0, 0, 0.65);

    --color-border-primary: #eff3f4;
    --color-border-strong: #eff3f4;
    --color-border-brand: #1d9bf0;
    --color-border-brand-soft: rgba(29, 155, 240, 0.35);
    --color-border-media: #ffffff26;

    --x-field-bg: #eff3f4;
    --x-modal-bg: #ffffff;
    --x-modal-text-secondary: #536471;
    --x-placeholder: #536471;
    --x-primary-button-bg: #0f1419;
    --x-primary-button-color: #ffffff;
    --x-primary-button-hover: #272c30;
  }
}

/* --------------------------------------------------------------------------
   5. Przyciski — pełne zaokrąglenie (pill) i główne akcje jak w X
   -------------------------------------------------------------------------- */
.button,
.simple_form .btn,
.navigation-panel__compose-button {
  border-radius: 9999px;
}

/* Główne przyciski akcji: biały w ciemnym, czarny w jasnym.
   Pomijamy warianty secondary/plain/dangerous/destructive oraz disabled. */
.button:not(.button-secondary):not(.button--plain):not(.button--dangerous):not(
    .button--destructive
  ):not(:disabled):not(.disabled) {
  background-color: var(--x-primary-button-bg);
  border-color: var(--x-primary-button-bg);
  color: var(--x-primary-button-color);
}

.button:not(.button-secondary):not(.button--plain):not(.button--dangerous):not(
    .button--destructive
  ):not(:disabled):not(.disabled):is(:hover, :focus, :active) {
  background-color: var(--x-primary-button-hover);
  border-color: var(--x-primary-button-hover);
  color: var(--x-primary-button-color);
}

/* Przycisk „Opublikuj wpis” w nawigacji (mobile) */
.navigation-panel__compose-button {
  background-color: var(--x-primary-button-bg);
  border-radius: 9999px;
  color: var(--x-primary-button-color);
  justify-content: center;
}

.navigation-panel__compose-button:is(:hover, :focus, :active) {
  background-color: var(--x-primary-button-hover);
  color: var(--x-primary-button-color);
}

/* --------------------------------------------------------------------------
   6. Wyszukiwarka i pola tekstowe — zaokrąglone, tło #202327 / #eff3f4
   -------------------------------------------------------------------------- */
.search__input {
  background-color: var(--x-field-bg);
  border-radius: 9999px;
}

.compose-form__highlightable {
  background-color: var(--x-field-bg);
  border-radius: 16px;
}

/* Pola formularzy poza kompozytorem (ustawienia, raporty, logowanie itd.) */
.simple_form input[type="text"],
.simple_form input[type="number"],
.simple_form input[type="email"],
.simple_form input[type="password"],
.simple_form input[type="url"],
.simple_form input[type="datetime-local"],
.simple_form textarea,
.report-dialog-modal__textarea,
.interaction-modal__login__input,
.column-search-header input,
.emoji-mart-search input {
  background-color: var(--x-field-bg);
  border-radius: 12px;
}

input::placeholder,
textarea::placeholder {
  color: var(--x-placeholder);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   7. Modale — nieco jaśniejsze niż tło (#16181c w ciemnym, #fff w jasnym)
   -------------------------------------------------------------------------- */
.dialog-modal,
.boost-modal,
.report-modal,
.report-dialog-modal,
.actions-modal,
.compare-history-modal,
.interaction-modal,
.modal-layout {
  --color-text-secondary: var(--x-modal-text-secondary);
  --color-text-tertiary: var(--x-modal-text-secondary);
  background: var(--x-modal-bg);
  border-radius: 16px;
}

/* Górna/dolna połówka modala bezpieczeństwa — tylko tło, bez zmiany radius */
.safety-action-modal__top,
.safety-action-modal__bottom {
  --color-text-secondary: var(--x-modal-text-secondary);
  --color-text-tertiary: var(--x-modal-text-secondary);
  background: var(--x-modal-bg);
}

/* --------------------------------------------------------------------------
   8. Karty / sekcje w prawej kolumnie — 16px i ramka w kolorze linii
   -------------------------------------------------------------------------- */
.getting-started,
.account-card,
.inline-follow-suggestions__body__scrollable__card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-primary);
  border-radius: 16px;
}

/* --------------------------------------------------------------------------
   9. Aktywne podbicie — zielony jak w X (faworyt ma osobny token #f91880)
   -------------------------------------------------------------------------- */
.icon-button.active:has(.icon-retweet) {
  color: #00ba7c;
}