/* ==UserStyle==
@name           OG-LESbian
@namespace      github.com/Rafal-Hacus/OG-LESbian
@version        1.0.1
@description    Rolls LowEndSpirit v2 back toward its pre-v2 look: no karma glow, no T-rex bar, no image badges, plain usernames, a single Thanks, a quiet light/dark toggle, and the OG sidebar.
@author         Rafal Hacus <rafal@hacus.pl>
@license        WTFPL
@homepageURL    https://github.com/Rafal-Hacus/OG-LESbian
@supportURL     https://github.com/Rafal-Hacus/OG-LESbian/issues
@updateURL      https://raw.githubusercontent.com/Rafal-Hacus/OG-LESbian/main/og-lesbian.user.css
@preprocessor   default
==/UserStyle== */

@-moz-document domain("lowendspirit.com") {

/* ------------------------------------------------------------
   Why this file is mostly display:none
   The archived Sept-2025 LES and today's LES load the SAME
   keystone theme and the SAME custom_default.css v1.0.2 —
   verified identical, 1451 of 1451 rules. Everything that
   changed since is a plugin layered on top. So "OG" is
   subtraction, not restyling. Almost no colours are declared
   below; where one is, it's a value lifted from the theme's
   own stylesheets rather than invented.
   ------------------------------------------------------------ */

/* ============================================================
   0. THEME-AWARE META COLOUR
   The theme sets comment usernames and .Meta links to
   rgb(105,110,117); dark.css then overrides to rgb(250,250,250).
   One token, so nothing below has to hardcode light or dark and
   the new toggle keeps working in both directions.
   ============================================================ */

:root {
  --og-meta-fg: rgb(105, 110, 117);
}

html.les-karma-dark {
  --og-meta-fg: rgb(250, 250, 250);
}

@media (prefers-color-scheme: dark) {
  html:not(.les-karma-explicit-light) {
    --og-meta-fg: rgb(250, 250, 250);
  }
}

/* ============================================================
   LAYOUT WIDTHS
   Only ONE geometry value actually changed between OG and v2.

   LES serves a small admin custom-CSS <style> block, and it is
   byte-identical in both eras:
       .MainContent.Content { width: calc(100% - 280px) }
       .Panel               { width: 255px }
   That block comes after the linked stylesheets, so it beats
   custom_default.css in both eras. Which means the sidebar has
   always rendered 255 wide with a 25px auto margin (280 - 255),
   regardless of what custom_default.css says — it went 220->300
   there, but that value never applied either way.

   So .Panel and .MainContent need NO override. Earlier versions
   of this file forced 220px/260px and that is what broke the
   sidebar; the correct action is to leave them alone.

   .Container is the real change: 1272px -> 1432px, with no
   override in the admin block. That single line is restored.
   Scoped above 992px to stay clear of the responsive collapse.
   ============================================================ */

@media screen and (min-width: 993px) {
  .Container {
    max-width: 1272px !important;
  }
}

/* ------------------------------------------------------------
   For reference, the box this produces
     .Container       max-width 1272, padding 0 18  -> 1236 content
     .Frame-contentWrap  width calc(100% + 36) = 1272,
                         margin 0 -18, padding 18 18 48 -> 1236
     .Frame-row (flex): MainContent calc(100% - 260) = 976
                        + Panel 220 + 40 gap
   1236 / +-18 / 18-18-48 is exactly the OG devtools box.
   ------------------------------------------------------------ */

/* ============================================================
   1. NAV — back to OG's five links
   OG had exactly: Categories, Discussions, Support, About, Rules.
   Matched by href, since CSS cannot select on link text.
   ============================================================ */

.Navigation-linkContainer:has(> a[href*="/discussions/markallviewed"]),
.Navigation-linkContainer:has(> a[href*="/discussion/showles"]),
.Navigation-linkContainer:has(> a[href*="/discussion/karmastore"]) {
  display: none !important;
}

/* Fallback for the mobile nav, where the <a> isn't wrapped */
.Navigation a[href*="/discussions/markallviewed"],
.Navigation a[href*="/discussion/showles"],
.Navigation a[href*="/discussion/karmastore"] {
  display: none !important;
}

/* ============================================================
   2. HEADER BUTTONS — OG had none of these
   ============================================================ */

.KarmaMeter-btn,                                        /* karma animation slider */
.LesShowLES-ListToggle,                                 /* Show LES list toggle */
.ThemeSwitcher-btn[href*="/plugin/themeChoose/grey/"],  /* grey theme */
.ThemeSwitcher-extras-wrap,                             /* vBulletin Light/Dark dropdown */
.ThemeSwitcher-extras-toggle,
.ThemeSwitcher-extras-dropdown,
.ThemeSwitcher-mobile-extras,
.ThemeSwitcher-mobile-extras-toggle,
.ThemeSwitcher-mobile-extras-list {
  display: none !important;
}

/* ============================================================
   3. QUIET LIGHT / DARK TOGGLE
   Both links already exist in the DOM, so no JS is needed.
   Matched on the PATH, not the full URL — the TransientKey in
   those links is session-scoped and rotates when you log in
   again, so hardcoding it would break the toggle silently.
   ============================================================ */

.ThemeSwitcher {
  display: inline-flex !important;
  align-items: center;
  gap: 0;
  border: 1px solid rgba(128, 128, 128, 0.35);
  border-radius: 4px;
  overflow: hidden;
  margin-left: 12px;
  line-height: 1;
}

.ThemeSwitcher-btn[href*="/plugin/themeChoose/default/"],
.ThemeSwitcher-btn[href*="/plugin/themeChoose/dark/"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 22px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 12px;
  opacity: 0.5;
  transition: opacity 0.12s;
  text-decoration: none !important;
}

.ThemeSwitcher-btn[href*="/plugin/themeChoose/default/"]:hover,
.ThemeSwitcher-btn[href*="/plugin/themeChoose/dark/"]:hover {
  opacity: 0.9;
}

.ThemeSwitcher-btn[href*="/plugin/themeChoose/dark/"] {
  border-left: 1px solid rgba(128, 128, 128, 0.35) !important;
}

/* The plugin already marks the active one */
.ThemeSwitcher-btn--active {
  opacity: 1 !important;
  background: rgba(128, 128, 128, 0.18) !important;
}

/* ============================================================
   4. GLOW AROUND USERS
   ============================================================ */

.karma-tier-lesbian .PhotoWrap,
.karma-tier-winner .PhotoWrap,
.karma-tier-platinum .PhotoWrap,
.karma-tier-pleb .PhotoWrap {
  animation: none !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* ============================================================
   5. THE T-REX PROGRESS BAR
   ::before is the bar frame, ::after is the running dino.
   ============================================================ */

[class*="les-karma-glow-"] {
  background: none !important;
  animation: none !important;
}

[class*="les-karma-glow-"]::before,
[class*="les-karma-glow-"]::after {
  content: none !important;
  display: none !important;
  background: none !important;
  animation: none !important;
  box-shadow: none !important;
}

/* Negative-karma greyout + floating skulls.
   Delete this block if you want to keep the shame markers. */
[class*="les-karma-grey-"] {
  background: transparent !important;
}
[class*="les-karma-grey-"] > * {
  filter: none !important;
  opacity: 1 !important;
}
[class*="les-karma-grey-"]::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

/* ============================================================
   6. KARMA WIDGET -> a single "Thanks", styled like Flag
   Flag has no rules of its own; it inherits from
   .MessageList .MItem a at 12px / weight 400 / line-height 1.5.
   So this mostly strips the button chrome and lets it inherit.
   ============================================================ */

.karma-score,
.karma-btn.karma-down,
.karma-gift-wrap,
.karma-error {
  display: none !important;
}

.karma-widget {
  margin-left: 0 !important;
  gap: 0 !important;
  vertical-align: baseline !important;
}

.karma-btn.karma-up {
  appearance: none !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: inherit !important;
  font-size: 0 !important;          /* hides the raw ▲ glyph */
  cursor: pointer !important;
  vertical-align: baseline !important;
}

.karma-btn.karma-up::after {
  content: "Thanks";
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--og-meta-fg);
}

.karma-btn.karma-up:hover::after,
.karma-btn.karma-up:focus::after {
  color: rgb(96, 169, 109);         /* the theme's link-hover green */
  text-decoration: none;
}

.karma-btn.karma-up.karma-active::after {
  content: "Thanked";
  opacity: 0.55;
}

/* ============================================================
   7. WHO THANKED A POST
   OG's equivalent was ThankfulPeople2's .ThankedByBox, which
   ran at 85% font-size — using that rather than a guess.
   No display rule on purpose: the plugin's JS toggles the
   inline style="display:none" itself when the list is empty,
   so forcing display would leave a gap under every post.
   ============================================================ */

.karma-thanked-by {
  font-size: 85% !important;
  color: var(--og-meta-fg) !important;
  opacity: 0.75;
  margin: 6px 0 0 !important;
}

.karma-thanked-label {
  font-weight: 600 !important;
  margin-right: 4px !important;
}

.karma-thanked-name {
  color: inherit !important;
}

/* ============================================================
   8. BADGES — image badges out, text badges stay
   Every LesKarmaStore badge is an <img>; RoleTitle (Hosting
   Provider, OG, Administrator) is text and survives. Scoped to
   post headers so the karma store page still shows its wares.
   The karma tier chips go entirely — OG had no equivalent.
   ============================================================ */

.AuthorInfo .LesKarmaStore-badgeRow,
.Meta .LesKarmaStore-badgeRow,
.karma-tier-badge {
  display: none !important;
}

/* ============================================================
   9. USERNAMES — plain again
   No hardcoded white here. LesKarma paints tier colours with
   !important, gradients and text-shadow; this hands the colour
   back to the theme via the token, so dark mode gives you
   dark.css's rgb(250,250,250) and light mode the theme's grey.
   ============================================================ */

.Username,
.karma-tier-lesbian .Username,
.karma-tier-winner .Username,
.karma-tier-platinum .Username,
.karma-tier-pleb .Username,
.Author a.Username {
  color: var(--og-meta-fg) !important;
  -webkit-text-fill-color: var(--og-meta-fg) !important;
  background: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  text-shadow: none !important;
  animation: none !important;
  font-weight: 400 !important;
  text-decoration: none !important;
}

.Username:hover,
.Author a.Username:hover {
  color: rgb(96, 169, 109) !important;
  -webkit-text-fill-color: rgb(96, 169, 109) !important;
}

/* ============================================================
   10. PLUGIN PAGE FURNITURE OG DIDN'T HAVE
   ============================================================ */

.LesSearch-AdvBtn {         /* advanced-search button on the search box */
  display: none !important;
}

/* Show LES, all of it. The site has a native toggle for the list
   rows (.LesShowLES-ListToggle, hidden in section 2) — this makes
   it permanent and also removes the composer and its modal. */
.LesShowLES-TriggerBox,     /* "post a Show LES" trigger */
.LesShowLES-Popup,          /* submit modal */
.LesShowLES-Overlay {
  display: none !important;
}

/* The list rows need extra specificity. The plugin ships
   .Item.LesShowLES-Item { display: flex !important }
   — two classes AND !important, so a one-class !important loses
   the tie. .DataList scopes us to three classes and wins. */
.DataList .Item.LesShowLES-Item {
  display: none !important;
}

/* ============================================================
   11. SIDEBAR — OG banner headings
   OG styled these as full-width centred colour bars via inline
   style attributes. Values below are lifted verbatim from the
   archive, including the two greens.
   Section order inside .LesOffersPanel is:
     child 1 = ad slot,  2 = Trending Today,
     child 3 = Recent Offers,  4 = Top Hosts This Month.
   Matched positionally because CSS can't select on heading text
   — if the plugin ever reorders them, the styling follows the
   slot rather than the name.
   ============================================================ */

.LesOffersPanel-heading {
  /* display:block is load-bearing. The theme sets
     .Panel h4 { display: flex; justify-content: space-between }
     which outranks .LesOffersPanel-heading on specificity, and a
     flex container ignores text-align entirely — that was the
     "not centered". */
  display: block !important;

  /* The plugin adds uppercase + letter-spacing + opacity 0.7 to
     this heading. OG's banner was a plain <div> with none of
     that, which was the "text looks different". */
  text-transform: none !important;
  letter-spacing: normal !important;
  opacity: 1 !important;

  /* OG's <div> inherited the body font and line-height 1.5;
     an <h4> gets a different stack and 1.25. */
  font-family: "Open Sans", "Segoe UI", "Helvetica Neue", Helvetica, Raleway, Arial, sans-serif !important;
  line-height: 1.5 !important;

  /* Lifted verbatim from OG's inline style attribute.
     margin is the full shorthand: OG's banner had margin-top 10px
     and no bottom margin — the items carry their own 5px. */
  padding: 5px 3px 5px 3px !important;
  margin: 10px 0 0 !important;
  width: 100% !important;
  border-radius: 4px !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #ffffff !important;
  text-align: center !important;
}

/* Trending Today -> OG "LES Talk" bar */
.LesOffersPanel-section:nth-child(2) .LesOffersPanel-heading {
  background-color: #41794b !important;
}

/* Recent Offers -> OG "Exclusive Deals" bar */
.LesOffersPanel-section:nth-child(3) .LesOffersPanel-heading {
  background-color: #60a96d !important;
}

/* Top Hosts This Month -> gone */
.LesOffersPanel-section:nth-child(4) {
  display: none !important;
}

/* --- Sidebar item boxes, matching OG ---
   OG's items were full-width bordered divs:
     margin: 5px 0; padding: 5px; width: 100%;
     border: 1px solid #60a96d; border-radius: 4px;
   The plugin instead uses padding: 5px 6px with no border, so the
   text sat 6px inside the heading bar's edge — that 6px is the
   misalignment. */
.LesOffersPanel-list li {
  margin: 5px 0 !important;
  padding: 5px !important;
  border: 1px solid #60a96d !important;
  border-radius: 4px !important;
  font-weight: 400 !important;
}

/* OG had no divider or 16px gap between sidebar blocks — the next
   banner's own margin-top: 10px provided all the separation. */
.LesOffersPanel-section {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}

/* OG titles wrapped to two lines; the plugin truncates with an
   ellipsis. Delete this block to keep the single-line truncation. */
.LesOffersPanel-list a {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.LesOffersPanel-list li {
  align-items: flex-start !important;
}

/* OG's sidebar boxes were title-only — no karma score on Trending,
   no provider name on Recent Offers. Both are .LesOffersPanel-value.
   Delete this rule to get that information back. */
.LesOffersPanel-value {
  display: none !important;
}

/* ============================================================
   11b. SIDEBAR ORDER — links below the offers panel
   OG put PROVIDER LIST / PRIVACY POLICY and the social icons
   AFTER the LES Talk / Exclusive Deals blocks. Today they sit
   above the offers panel. Reordering siblings needs a flex
   container, so .Panel-main becomes one; order values are keyed
   off href rather than nth-child so they survive a reshuffle.
   ============================================================ */

.Panel-main {
  display: flex !important;
  flex-direction: column !important;
}

.Panel-main > .LesOffersPanel {
  order: 1 !important;
}

.Panel-main > a[href$="/registered-providers"] {
  order: 2 !important;
}

.Panel-main > a[href$="/privacy-policy"] {
  order: 3 !important;
}

.Panel-main > #socials {
  order: 4 !important;
}

/* The two links are separated by a bare <br>, which would become
   its own flex item. Each link is already a block-level item. */
.Panel-main > br {
  display: none !important;
}

/* ============================================================
   12. THANKS NEXT TO FLAG — CSS anchor positioning, no JS
   The original placement, confirmed from a saved LowEndTalk
   thread, is inside the comment Meta row right after Flag:
       .MItem.CommentFlag > a.FlagContent
       .MItem.Thank       > a
   Flag and the karma widget are in different subtrees, so this
   used to look impossible: the widget sits in .Item-Body while
   Flag sits in .Item-Header, a sibling. Ordinary absolute
   positioning can only anchor to an ANCESTOR, which is why an
   earlier attempt anchored to .ItemComment and dumped the button
   at the bottom right of the comment.

   Anchor positioning removes that restriction entirely. Flag
   publishes an anchor name; the widget positions against it by
   name, no ancestry required, and follows it wherever it lands —
   including on posts with an "edited" marker or role badges,
   which is exactly what the old pixel-offset guesses could not
   handle.

   Two separate rules are doing work here:

   1. ACCEPTABILITY — for an absolutely positioned element the
      anchor must live inside the element's containing block.
      That is why .Reactions has to go static below: it is
      position:relative in Vanilla's style.css, which made it the
      containing block, and Flag is not inside it.

   2. WHICH anchor gets picked — every anchor with a given name is
      visible to every positioned element, and the LAST one in DOM
      order wins. With one name across N comments, all N buttons
      would pile onto the last comment's Flag. anchor-scope on the
      common ancestor of the anchor and the target (.ItemComment)
      is what makes each comment resolve to its own Flag. It is
      required, not optional.

   Supported in every major engine: Chrome/Edge 125+ (anchor-scope
   131+), Firefox 147+, Safari 26+. Still wrapped in @supports so
   older builds keep Thanks in the Reactions row next to Quote,
   styled by section 6, rather than a broken middle state.
   ============================================================ */

@supports (anchor-name: --a) {

  /* THE FIX v9.0.0 was missing.
     applications/dashboard/design/style.css sets
         .Reactions { position: relative; ... }
     which made .Reactions the widget's containing block. An anchor
     must live INSIDE the positioned element's containing block, and
     Flag is not inside .Reactions — so the anchor was unacceptable,
     anchor() became invalid at computed-value time, left/top fell
     back to auto, and the widget rendered at its static position:
     right where it already was, next to Quote. Silent no-op.
     Going static walks the containing block up to .ItemComment,
     which does contain Flag. Nothing in any loaded stylesheet
     absolutely positions a descendant of .Reactions, so this is
     safe; it is also inside @supports, so non-anchor browsers keep
     the original relative positioning untouched. */
  .MessageList .Reactions {
    position: static !important;
  }

  /* Confine the name to one comment so it can't leak across posts */
  .MessageList .ItemComment,
  .MessageList .ItemDiscussion {
    anchor-scope: --les-flag;
  }

  .MessageList .MItem.CommentFlag {
    anchor-name: --les-flag;
  }

  .MessageList .karma-widget {
    position: absolute;
    position-anchor: --les-flag;

    /* left edge to Flag's right edge, tops aligned */
    left: anchor(right);
    top: anchor(top);

    /* .MessageList .MItem uses margin: 0 6px, so 12px reproduces
       the gap between two adjacent MItems */
    margin: 0 0 0 12px !important;
  }
}

/* ============================================================
   13. PROFILE — "Points" label reads "Thanks"
   Markup is <dt class="Points">Points</dt> paired with
   <dd class="Points">418</dd>. Targeting the dt only, so the
   number in the dd is untouched.

   CSS can't rewrite text, so the label is collapsed to zero
   font-size and replaced with pseudo-content. No layout shift:
   the theme gives dt a width of 25%, so the box doesn't depend
   on the text it contains.

   Caveat worth knowing: the real text stays in the DOM, so it's
   still "Points" to screen readers, to Ctrl+F, and when copied.
   ============================================================ */

body.Section-Profile dt.Points {
  font-size: 0 !important;
}

body.Section-Profile dt.Points::after {
  content: "Thanks";
  font-size: 14px;   /* the theme's dt/dd size */
  font-weight: 700;  /* the theme's dt weight */
}

}