/* ============================================================
   ПОСОСАЛОЧКА — SourceBans++ theme override layer
   ------------------------------------------------------------
   Loaded AFTER css/theme.css (see core/header.tpl). theme.css is
   kept byte-identical to the upstream SourceBans++ default theme so
   it can be refreshed from a newer release; every visual delta for
   this fork lives in this file.

   Two kinds of rule live here:
     1. Token re-paints (the bulk). theme.css resolves almost every
        colour through the --brand-N, --bg-*, --text-* and --accent
        tokens, so redefining those on :root + html.dark carries the
        whole panel to the black/pink palette in one shot.
        (Careful with wildcards in these comments: a literal
        `--brand-*` followed by a slash spells `*` + `/`, which ends
        the comment early and eats the rule after it.)
     2. Targeted overrides for the handful of places theme.css
        hardcodes a literal (the orange focus ring, the topbar's
        translucent white, the zinc pill on the active nav row).
        Those selectors have to MATCH theme.css's specificity
        (html.dark .foo == 0,2,N) or they lose the cascade, hence the
        html.dark prefixes below — they are not accidental.

   The panel is dark-only: the main site has no light mode, so :root
   carries the dark palette too and the theme toggle is hidden. See
   "Forced dark" at the bottom for how to re-enable the toggle.
   ============================================================ */

/* Typography splits in two:
     - The PANEL keeps upstream's --font-sans / --font-mono (vendored
       Inter + JetBrains Mono, @font-faced by theme.css from ../fonts/).
       Untouched here.
     - The HEADER BAND (running line + section nav) uses Ubuntu, the
       main site's face, via --pos-font-display. Those two elements are
       a direct port of pososalochka.ru's chrome, so they carry its
       typeface; the panel below them does not.
   Ubuntu comes from Google Fonts (<link> in core/header.tpl) — the one
   place this theme reaches off-box. If it can't load, the fallback
   chain lands on Inter and only the two header elements change face. */

:root,
html.dark {
  color-scheme: dark;

  /* ---- Brand ramp → pink.
     theme.css spends --brand-500/600/700 on the primary CTA, focus
     borders, active nav/chip fills and the dark-mode accents. Keeping
     the ramp's shape (light → dark) means those rules keep working
     unchanged; only the hue moves orange → #ff66cc. */
  --brand-50:  #fff0f8; --brand-100: #ffdcf0; --brand-200: #ffbfe4;
  --brand-300: #ffa3d9; --brand-400: #ff85d1; --brand-500: #ff66cc;
  --brand-600: #ff66cc; --brand-700: #e855b5; --brand-800: #c2408f;
  --brand-900: #8f2c69; --brand-950: #2a0c1f;

  /* ---- Neutrals → the main site's near-black stack.
     Re-pointing the zinc ramp (rather than only the semantic tokens)
     catches the rules that reach for --zinc-* directly: the .btn base
     fill, the active-nav pill, table zebra, skeletons. */
  --zinc-50:  #ffffff; --zinc-100: #f2f2f2; --zinc-200: #cccccc;
  --zinc-300: #a6a6a6; --zinc-400: #8a9295; --zinc-500: #6d787c;
  --zinc-600: #3a4144; --zinc-700: #262c2f; --zinc-800: #1a2023;
  --zinc-900: #0b0f11; --zinc-950: #05090a;

  /* ---- Semantic */
  --bg-page: #05090a;
  --bg-surface: #0b0f11;
  --bg-muted: #12181b;
  --border: #222222;
  --text: #ffffff;
  --text-muted: #cccccc;
  --text-faint: #888888;
  --accent: #ff66cc;
  --accent-hover: #e855b5;
  --accent-soft: rgba(255, 102, 204, 0.12);
  --on-accent: #ffffff;

  --success: #4caf50; --success-bg: rgba(76, 175, 80, 0.14);
  --warning: #ff9800; --warning-bg: rgba(255, 152, 0, 0.14);
  --danger:  #f44336; --danger-bg:  rgba(244, 67, 54, 0.14);
  --info:    #6bc1ff; --info-bg:    rgba(107, 193, 255, 0.14);

  /* ---- Geometry: the main site is square-cornered throughout, so
     flatten every radius token instead of hunting individual rules. */
  /* --radius-full goes to 0 with the rest. In theme.css it only ever
     reaches .pill, .chip, the comment-count badge and
     .empty-state__icon — never avatars or status dots, which hardcode
     `border-radius: 50%` and stay round regardless. Squaring it turns
     the status pills into the same flat rectangular tag the main site
     uses for its WIP badge. */
  --radius-sm: 0; --radius-md: 0; --radius-lg: 0;
  --radius-xl: 0; --radius-full: 0;

  --shadow-sm: none;
  --shadow:    0 0 0 1px rgba(34, 34, 34, 0.8);
  --shadow-lg: 0 0 40px 0 rgba(0, 0, 0, 0.6);

  /* ---- Fork-local tokens (used by the header band below). */
  --pos-pink: #ff66cc;
  --pos-link: #6bc1ff;
  /* Header-band typeface only — see the note at the top of this file.
     Falls back to --font-sans (Inter) if Google Fonts is unreachable. */
  --pos-font-display: 'Ubuntu', var(--font-sans);
  /* Measured height of .pos-marquee, border included — 8+8 padding +
     21px line box (14px × 1.5) + 2px bottom border. Everything that
     has to clear the fixed bar (body padding, sticky sidebar/topbar
     offsets) reads this token, so keep it in sync if the bar's
     font-size or padding changes, or the sticky surfaces slide
     under it by the difference. */
  --pos-marquee-h: 39px;
  --pos-marquee-speed: 15s;
}

/* ============================================================
   Header band — marquee + logo + site nav
   Mirrors index.html on pososalochka.ru: the marquee is fixed to the
   viewport top across the full width (over the sidebar as well), and
   the logo + section nav scroll away underneath it.
   ============================================================ */

/* The fixed marquee is out of flow, so the document needs the height
   back or the first 37px of the header band hide behind it. */
body { padding-top: var(--pos-marquee-h); }

.pos-marquee {
  font-family: var(--pos-font-display);
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 999;                /* above .topbar (30), drawer (50), palette (60) */
  overflow: hidden;
  white-space: nowrap;
  background-color: #111111;
  color: var(--pos-pink);
  border-bottom: 2px solid var(--pos-pink);
  padding: 8px 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.pos-marquee__inner {
  display: inline-block;
  padding-left: 100%;
  animation: pos-marquee-scroll var(--pos-marquee-speed) linear infinite;
}
@keyframes pos-marquee-scroll {
  0%   { transform: translateX(0%); }
  100% { transform: translateX(-100%); }
}
/* theme.css honours prefers-reduced-motion for the drawer/palette;
   an infinite marquee is exactly the kind of motion that policy
   targets, so park it and let the text sit still. */
@media (prefers-reduced-motion: reduce) {
  .pos-marquee__inner { animation: none; padding-left: 0; text-align: center; display: block; }
}

/* Logo geometry mirrors the main site's `.coa` / `.coa img`: 200px
   wide with a 90px gap above it, so the mark sits in the same pocket
   of empty space under the running line on both sites.

   The gap is `padding-top` on .pos-header, NOT `margin-top` on the
   logo the way the main site writes it. Without a top border or
   padding on .pos-header, a top margin on its first in-flow
   descendant collapses out through the band — the 90px still appears,
   but it lands ABOVE the band rather than inside it, so the band's
   background and any future top border stop covering it. Padding
   can't collapse, which keeps the space inside the band's box and
   stable regardless of what the first child ends up being. */
.pos-header {
  text-align: center;
  padding: 90px 16px 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg-page);
}
/* The logo's <a> is block so the centered block-level <img> inside it
   isn't laid out in an inline box. */
.pos-header > a { display: block; }
.pos-header__logo {
  display: block;
  margin: 0 auto 5px;
  width: 200px;
  height: auto;
}
.pos-nav {
  font-family: var(--pos-font-display);
  margin: 20px 0 0;
  padding-bottom: 15px;
  font-size: 16px;
  color: #aaaaaa;
}
.pos-nav a { margin: 0 8px; text-decoration: none; transition: color .2s ease; }
.pos-nav a:hover { text-decoration: underline; }
.pos-nav__main   { color: #ff6b6b; }
.pos-nav__bans   { color: #ffb86c; }
.pos-nav__stats  { color: var(--pos-link); }
.pos-nav__vip    { color: var(--pos-pink); }
.pos-nav__discord{ color: #a1d8ff; }

/* ---- App shell repositioning under the fixed marquee.
   .sidebar and .topbar are `position: sticky; top: 0` in theme.css;
   with a fixed 37px bar overhead they'd slide under it. Offset both
   and shave the same amount off the sidebar's 100vh so its internal
   nav still scrolls to the last item. */
.sidebar { top: var(--pos-marquee-h); height: calc(100vh - var(--pos-marquee-h)); }
.topbar  { top: var(--pos-marquee-h); }

/* The topbar's translucent-white + blur reads as a grey haze on a
   #05090a page. Paint it in the page colour instead. theme.css sets
   this on `.topbar` (0,1,0) and `html.dark .topbar` (0,2,0) — match
   the latter so both rules are covered. */
html .topbar,
html.dark .topbar {
  background: rgba(5, 9, 10, 0.88);
  border-bottom: 1px solid var(--border);
}

/* ============================================================
   Chrome details
   ============================================================ */

/* Sidebar brand. The height stays at theme.css's 3.5rem — the topbar
   next to it is also 3.5rem, and both paint a 1px bottom border, so
   the two borders have to land on the same y or the seam between the
   sidebar and the content column reads as a step. (An earlier
   `height: auto` here shortened the brand row and made that step
   visible at a glance.) Only the mark's sizing is overridden: the
   site's logo is a wide wordmark, not the square shield the default's
   1.75rem box assumes, so cap it by height and let the width follow. */
.sidebar__brand-mark { width: auto; height: 1.75rem; max-width: 2.5rem; object-fit: contain; }
.sidebar__brand .font-semibold { color: var(--pos-pink); letter-spacing: 0.04em; }

/* Section labels + active row. theme.css paints the active row with a
   --zinc-900 pill in light mode and --brand-700 under html.dark; the
   zinc re-point above already handles the first, but state it in the
   fork's terms so the intent survives a token refactor. */
.sidebar__link[aria-current="page"],
html.dark .sidebar__link[aria-current="page"] {
  background: var(--pos-pink);
  color: #ffffff;
}
.sidebar__link[aria-current="page"] svg { color: #ffffff; }
.sidebar__link:hover { background: rgba(255, 102, 204, 0.08); }

/* Links inside page content follow the main site's blue, not the
   inherited body colour. Scoped to .page so chrome links (nav rows,
   breadcrumbs, footer) keep their own treatment. */
.page a:not(.btn):not(.chip):not(.sidebar__link):not([class*="card"]) {
  color: var(--pos-link);
}
.page a:not(.btn):not(.chip):hover { text-decoration: underline; }

/* ---- Focus ring. theme.css hardcodes rgb(234 88 12 / .15) — the
   orange brand at 15% — in four places (.input/.select/.textarea,
   .filters-details__summary, the filter card, the chip row). Repaint
   all four pink; the selectors mirror theme.css exactly. */
.input:focus, .select:focus, .textarea:focus,
.filters-details__summary:focus-visible,
.filters-card__summary:focus-visible,
.chip:focus-visible {
  border-color: var(--pos-pink);
  box-shadow: 0 0 0 3px rgba(255, 102, 204, 0.18);
}
:focus-visible { outline-color: var(--pos-pink); }

/* Native form controls (checkbox/radio/range/progress) tint from
   accent-color, which theme.css leaves at the UA default. */
input[type="checkbox"], input[type="radio"], input[type="range"], progress {
  accent-color: var(--pos-pink);
}

/* ---- Buttons. The default's base button is a light pill on dark
   (--zinc-100 fill, dark text) which fights the pink CTA. Make the
   base a bordered dark button and let .btn--primary own the pink. */
.btn,
:where(html.dark) .btn {
  --btn-bg: var(--bg-surface);
  --btn-color: var(--text);
  --btn-border: var(--border);
  --btn-bg-hover: var(--bg-muted);
}
.btn--primary {
  --btn-bg: var(--pos-pink);
  --btn-color: #ffffff;
  --btn-border: var(--pos-pink);
  --btn-bg-hover: #e855b5;
}
.btn--danger { --btn-bg: var(--danger); --btn-color: #ffffff; --btn-border: var(--danger); --btn-bg-hover: #c62828; }
.btn--secondary[aria-pressed="true"],
html.dark .btn--secondary[aria-pressed="true"] {
  --btn-bg: var(--pos-pink);
  --btn-color: #ffffff;
  --btn-border: var(--pos-pink);
  --btn-bg-hover: #e855b5;
}
/* .btn--ghost must stay chrome-transparent — only the hover fill
   changes, and --btn-border resets so a preceding modifier can't
   leak a border in (theme.css #1183). */
.btn--ghost {
  --btn-bg: transparent;
  --btn-color: var(--text-muted);
  --btn-border: transparent;
  --btn-bg-hover: rgba(255, 102, 204, 0.12);
}

/* ---- Cards / surfaces. Flat panels with a hairline, matching the
   main site's borderless-on-black look. */
.card { border: 1px solid var(--border); box-shadow: none; }
.card__header { border-bottom: 1px solid var(--border); }

/* ---- Tables. The default's zebra is rgb(255 255 255 / .02) under
   html.dark — nearly invisible on #05090a. Lift the header row and
   give rows a pink-tinted hover so scanning a long banlist works. */
.table thead tr,
html.dark .table thead tr {
  background: #0b0f11;
  border-bottom: 1px solid var(--border);
}
.table thead th { color: var(--text-muted); letter-spacing: 0.04em; }
.table tbody tr:hover,
html.dark .table tbody tr:hover { background: rgba(255, 102, 204, 0.06); }
.table tbody tr { border-bottom: 1px solid #161c1f; }

/* ---- Chips (banlist All/Permanent/Active filters). */
.chip[data-active="true"],
html.dark .chip[data-active="true"] {
  background: var(--pos-pink);
  color: #ffffff;
  border-color: var(--pos-pink);
}

/* ---- Status pills. theme.css picks per-state text colours twice
   (light literal + an html.dark override); restate both arms so the
   pill text stays legible against the translucent *-bg tokens
   redefined above. */
.pill--permanent, html.dark .pill--permanent { color: #ff8a80; }
.pill--active,    html.dark .pill--active    { color: #ffcc80; }
.pill--unbanned,  html.dark .pill--unbanned  { color: #a5d6a7; }
.pill--unmuted,   html.dark .pill--unmuted   { color: #a5d6a7; }
.pill--online,    html.dark .pill--online    { background: rgba(76, 175, 80, 0.16); color: #a5d6a7; }

/* Ban-row left border, re-hued to this palette's status colours. */
.ban-row--permanent { border-left-color: #f44336; }
.ban-row--active    { border-left-color: #ff9800; }
.ban-row--unbanned  { border-left-color: #4caf50; }

/* ---- Overlays: drawer / palette / sidebar backdrops are
   rgb(9 9 11 / .4) upstream; deepen to match the page. */
.drawer-backdrop, .sidebar-backdrop, .palette-backdrop {
  background: rgba(5, 9, 10, 0.7);
}
.palette { border: 1px solid var(--border); box-shadow: var(--shadow-lg); }

/* ---- Footer. */
.app-footer { border-top: 1px solid var(--border); color: var(--text-faint); }
.app-footer a:hover, .app-footer a:focus-visible { color: var(--pos-pink); }

/* ---- Login card brand mark (page_login.tpl reuses brand-mark). */
[data-testid="brand-mark"] { max-height: 3rem; width: auto; }

/* ============================================================
   Forced dark
   The main site is dark-only, so :root above already carries the dark
   palette and light mode is unreachable by design — which leaves the
   tri-state toggle cycling between three identical looks. Hide it.

   To re-enable: delete this rule, then give :root the light values
   you want (the block at the top of this file currently doubles as
   both arms) and drop the `localStorage` pin in core/header.tpl's
   bootloader script.
   ============================================================ */
[data-theme-toggle] { display: none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  /* At <=1024px theme.css hides .sidebar and re-opens it as a fixed
     drawer via `.sidebar.is-open { inset: 0 auto 0 0 }` — that `inset`
     shorthand writes top: 0, and at (0,2,0) it outranks the plain
     `.sidebar` offset set further up this file, so the drawer's brand
     row would slide under the marquee. Match the specificity here.
     The drawer's own z-index is 41, well under the bar's 999, so the
     bar keeps painting over it as intended. */
  .sidebar.is-open { top: var(--pos-marquee-h); height: calc(100vh - var(--pos-marquee-h)); }
}
@media (max-width: 768px) {
  /* 6+6 padding + 18px line box (12px × 1.5) + 2px border. */
  :root, html.dark { --pos-marquee-h: 32px; }
  .pos-marquee { font-size: 12px; padding: 6px 0; }
  /* Main site's mobile arm drops the logo to 150px and the nav to 14px
     and leaves the 90px gap alone; mirror that. */
  .pos-header__logo { width: 150px; }
  .pos-nav { font-size: 14px; }
  .pos-nav a { margin: 0 4px; }
}